/* LandValueScape — Redesign C: Interactive Policy Lab & Tax Effect Demonstrator (TED) */
:root {
  color-scheme: light dark;
  --shell-max: 1085px;
  --shell-gutter: 1rem;
  --bg-page: #f7f3ed;
  --bg-surface: #ffffff;
  --bg-subtle: #f0e7db;
  --bg-accent-soft: #ede0d0;
  --ink-primary: #21170e;
  --ink-secondary: #523f30;
  --ink-muted: #6e5743;
  --accent: #8b3c0c;
  --accent-hover: #5c2504;
  --accent-teal: #1f6b52;
  --border: #dcd0bf;
  --border-strong: #bcab93;
  --badge-bg: #ece2d4;
  --badge-ink: #542708;
  --shadow: 0 3px 12px rgba(33, 23, 14, 0.06);
  --shadow-lg: 0 8px 24px rgba(33, 23, 14, 0.09);
}

@media (prefers-color-scheme: dark) {
  :root {
    --bg-page: #16120f;
    --bg-surface: #201a15;
    --bg-subtle: #29211b;
    --bg-accent-soft: #342820;
    --ink-primary: #f5eee4;
    --ink-secondary: #d9cab9;
    --ink-muted: #b5a28f;
    --accent: #e59a59;
    --accent-hover: #f7be8a;
    --accent-teal: #48bb95;
    --border: #3b3026;
    --border-strong: #594738;
    --badge-bg: #33271f;
    --badge-ink: #f2c091;
    --shadow: 0 4px 16px rgba(0, 0, 0, 0.32);
    --shadow-lg: 0 10px 30px rgba(0, 0, 0, 0.45);
  }
}

*, *::before, *::after {
  box-sizing: border-box;
}

[hidden] {
  display: none !important;
}

.visually-hidden:where(:not(:focus-within, :active)) {
  position: absolute !important;
  clip-path: inset(50%) !important;
  overflow: hidden !important;
  width: 1px !important;
  height: 1px !important;
  margin: -1px !important;
  padding: 0 !important;
  border: 0 !important;
  white-space: nowrap !important;
}

.skip-link:focus-visible {
  position: fixed;
  inset-block-start: 0.75rem;
  inset-inline-start: 0.75rem;
  z-index: 999;
  padding: 0.6rem 1.1rem;
  background: #5c2606;
  color: #ffffff;
  font-weight: 700;
  text-decoration: none;
  border-radius: 4px;
  outline: 3px solid #ead4b5;
  outline-offset: 2px;
}

body {
  margin: 0;
  font-family: Georgia, "Iowan Old Style", "Palatino Linotype", Palatino, "Times New Roman", serif;
  line-height: 1.68;
  color: var(--ink-primary);
  background: var(--bg-page);
  text-align: start;
  overflow-wrap: break-word;
}

a {
  color: var(--accent);
  text-decoration: underline;
  text-underline-offset: 0.16em;
}

a:hover {
  color: var(--accent-hover);
}

:where(a:any-link, button, input, select, textarea):focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 3px;
}

/* Header */
.lab-header {
  background: #ffffff;
  border-block-end: 1px solid var(--border-strong);
}

.logo-stage {
  background: #ffffff;
  padding-block: 0.25rem 0;
  padding-inline: 0.75rem;
}

.logo-link {
  display: block;
  max-inline-size: 701px;
  margin-inline: auto;
  line-height: 0;
  text-decoration: none;
}

.lvs-logo-svg {
  display: block;
  inline-size: 100%;
  max-inline-size: 701px;
  block-size: auto;
  aspect-ratio: 701 / 126;
  margin-inline: auto;
}

.lab-nav-bar {
  background: linear-gradient(180deg, #eadccf 0%, #f6f1ea 100%);
  border-block-start: 1px solid #d4bfa6;
  padding-block: 0.35rem;
  padding-inline: var(--shell-gutter);
}

@media (prefers-color-scheme: dark) {
  .lab-nav-bar {
    background: #251e18;
    border-block-start-color: #44362a;
  }
}

.lab-nav-inner {
  max-inline-size: var(--shell-max);
  inline-size: 100%;
  margin-inline: auto;
  display: flex;
  flex-wrap: nowrap;
  justify-content: space-between;
  align-items: center;
  gap: clamp(0.35rem, 0.8vw, 0.75rem);
}

.lab-nav {
  flex: 1 1 auto;
  min-inline-size: 0;
}

.lab-nav ul {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-wrap: nowrap;
  align-items: center;
  justify-content: space-between;
  gap: 0.1rem;
}

.lab-nav a {
  --nav-pad-x: clamp(0.22rem, -0.47rem + 1.43vw, 0.53rem);
  display: inline-flex;
  align-items: center;
  white-space: nowrap;
  min-block-size: 32px;
  padding: 0.24rem var(--nav-pad-x);
  font-family: system-ui, -apple-system, sans-serif;
  font-size: clamp(0.6875rem, 0.344rem + 0.72vw, 0.84rem);
  font-weight: 600;
  letter-spacing: -0.01em;
  color: #4a2205;
  text-decoration: none;
  border-radius: 4px;
  border: 1px solid transparent;
  transition: background-color 0.15s ease, border-color 0.15s ease;
}

.lab-nav li:first-child a {
  margin-inline-start: calc(-1 * var(--nav-pad-x) - 1px);
}

@media (prefers-color-scheme: dark) {
  .lab-nav a {
    color: #efe4d6;
  }
}

.lab-nav a:hover,
.lab-nav a:focus-visible {
  background: var(--bg-surface);
  border-color: var(--border-strong);
  color: var(--accent);
}

.lab-nav a[aria-current="page"],
.lab-nav a[aria-current="page"]:hover {
  background: transparent;
  border-color: transparent;
  color: var(--accent);
}

.header-search {
  display: flex;
  align-items: center;
  gap: 0.3rem;
  flex: 0 0 auto;
  margin: 0;
}

.header-search input {
  font-family: system-ui, sans-serif;
  font-size: clamp(0.72rem, 0.45rem + 0.35vw, 0.82rem);
  padding: 0.24rem 0.5rem;
  min-block-size: 32px;
  inline-size: clamp(5rem, -7.1rem + 25.2vw, 10.5rem);
  border: 1px solid var(--border-strong);
  border-radius: 4px;
  background: var(--bg-surface);
  color: var(--ink-primary);
}

.header-search .btn-lab {
  min-block-size: 32px;
  padding: 0.24rem clamp(0.45rem, 0.7vw, 0.75rem);
  font-size: clamp(0.72rem, 0.45rem + 0.35vw, 0.82rem);
}

@media (min-width: 56em) {
  .nav-burger-btn,
  .mobile-nav-dialog {
    display: none !important;
  }
}

@media (max-width: 55.99em) {
  .lab-nav {
    display: none;
  }
  .lab-nav-inner {
    flex-wrap: nowrap;
    justify-content: space-between;
    align-items: center;
    gap: 0.55rem;
  }
  .lab-nav-inner > search {
    flex: 1 1 auto;
    min-inline-size: 0;
    max-inline-size: 22rem;
  }
  .header-search {
    inline-size: 100%;
    display: flex;
    gap: 0.35rem;
  }
  .header-search input {
    flex: 1 1 auto;
    min-inline-size: 0;
    inline-size: 100%;
    min-block-size: 38px;
    font-size: 0.88rem;
    padding: 0.3rem 0.6rem;
  }
  .header-search .btn-lab {
    min-block-size: 38px;
    padding: 0.3rem 0.75rem;
    font-size: 0.84rem;
    flex: 0 0 auto;
  }
}

/* 3-Line Menu Trigger & Clean Modal Overlay Dialog */
.nav-burger-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.4rem;
  min-block-size: 38px;
  padding: 0.35rem 0.7rem;
  font-family: system-ui, -apple-system, sans-serif;
  font-size: 0.86rem;
  font-weight: 600;
  color: var(--ink-primary);
  background: var(--bg-surface);
  border: 1px solid var(--border-strong);
  border-radius: 6px;
  cursor: pointer;
  flex: 0 0 auto;
  transition: background-color 0.15s ease, border-color 0.15s ease, color 0.15s ease;
}

.nav-burger-btn:hover,
.nav-burger-btn:focus-visible {
  background: var(--bg-accent-soft);
  border-color: var(--accent);
  color: var(--accent);
}

.burger-icon {
  display: block;
  flex: 0 0 auto;
}

dialog:modal {
  overscroll-behavior: contain;
}

dialog::backdrop {
  overflow: hidden;
  overscroll-behavior: contain;
}

.mobile-nav-dialog {
  margin: 0.75rem auto auto;
  padding: 0;
  inline-size: min(calc(100vw - 1.5rem), 22rem);
  max-block-size: calc(100dvh - 1.5rem);
  border: 1px solid var(--border);
  border-radius: 14px;
  background: var(--bg-surface);
  color: var(--ink-primary);
  box-shadow: 0 20px 48px rgba(0, 0, 0, 0.18);
}

.mobile-nav-dialog::backdrop {
  background-color: rgba(22, 16, 11, 0.42);
  backdrop-filter: blur(4px);
}

.mobile-nav-sheet {
  display: flex;
  flex-direction: column;
  padding: 0.5rem 1.15rem 1rem;
}

.mobile-nav-top {
  display: flex;
  justify-content: flex-end;
  padding-block: 0.15rem 0;
}

.mobile-nav-close {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  inline-size: 36px;
  block-size: 36px;
  margin-inline-end: -0.35rem;
  padding: 0;
  color: var(--ink-secondary);
  background: transparent;
  border: 0;
  border-radius: 8px;
  cursor: pointer;
  transition: background-color 0.15s ease, color 0.15s ease;
}

.mobile-nav-close:hover,
.mobile-nav-close:focus-visible {
  background: var(--bg-subtle);
  color: var(--ink-primary);
}

.mobile-nav-links ul {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
}

.mobile-nav-links li + li {
  border-block-start: 1px solid var(--border);
}

.mobile-nav-links a {
  display: flex;
  align-items: center;
  min-block-size: 46px;
  padding: 0.65rem 0.25rem;
  font-family: system-ui, -apple-system, sans-serif;
  font-size: 1.02rem;
  font-weight: 500;
  color: var(--ink-primary);
  text-decoration: none;
  transition: color 0.15s ease;
}

.mobile-nav-links a:hover,
.mobile-nav-links a:focus-visible {
  color: var(--accent);
}

.mobile-nav-links a[aria-current="page"] {
  color: var(--accent);
  font-weight: 650;
}

.btn-lab,
.btn-secondary {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.35rem;
  min-block-size: 36px;
  padding: 0.4rem 0.95rem;
  font-family: system-ui, -apple-system, sans-serif;
  font-size: 0.85rem;
  font-weight: 600;
  border-radius: 4px;
  text-decoration: none;
  cursor: pointer;
  border: 1px solid transparent;
}

.btn-lab {
  background: #7c370d;
  color: #ffffff;
  border-color: #5f2604;
}

.btn-lab:hover {
  background: #5a2405;
  color: #ffffff;
}

.btn-secondary {
  background: var(--bg-surface);
  color: var(--ink-primary);
  border-color: var(--border-strong);
}

.btn-secondary:hover {
  background: var(--bg-accent-soft);
  color: var(--ink-primary);
}

/* Main Shell */
.lab-main {
  max-inline-size: calc(var(--shell-max) + 2 * var(--shell-gutter));
  margin-inline: auto;
  padding: 1.5rem var(--shell-gutter) 3rem;
}

/* Hero Section */
.policy-hero {
  background: var(--bg-surface);
  border: 1px solid var(--border);
  border-radius: 8px;
  padding: clamp(1.4rem, 2.8vw, 2.5rem);
  box-shadow: var(--shadow);
  margin-block-end: 2rem;
}

.kicker {
  font-family: system-ui, -apple-system, sans-serif;
  font-size: 0.78rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--accent);
  margin: 0 0 0.35rem;
}

.policy-hero h1 {
  margin: 0 0 0.65rem;
  font-size: clamp(1.6rem, 1.25rem + 1.5vw, 2.35rem);
  line-height: 1.2;
  text-wrap: balance;
}

.lead-prose {
  font-size: 1.1rem;
  line-height: 1.68;
  max-inline-size: none;
  margin: 0 0 1.25rem;
  color: var(--ink-secondary);
}

/* Interactive TED Demonstrator Calculator */
.ted-panel {
  background: var(--bg-surface);
  border: 2px solid var(--accent);
  border-radius: 8px;
  padding: clamp(1.25rem, 2.2vw, 2rem);
  margin-block-end: 2.25rem;
  box-shadow: var(--shadow-lg);
}

.ted-header {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  align-items: baseline;
  gap: 0.75rem 1.5rem;
  margin-block-end: 1.25rem;
  padding-block-end: 0.75rem;
  border-block-end: 1px solid var(--border);
}

.ted-header h2 {
  margin: 0;
  font-size: 1.45rem;
  color: var(--accent);
}

.ted-badge {
  display: inline-block;
  padding: 0.2rem 0.65rem;
  background: #e9f5ef;
  color: #1a5839;
  border: 1px solid #7cb998;
  border-radius: 999px;
  font-family: system-ui, sans-serif;
  font-size: 0.8rem;
  font-weight: 700;
}

@media (prefers-color-scheme: dark) {
  .ted-badge {
    background: #173727;
    color: #8ae4b5;
    border-color: #2b6b4c;
  }
}

.slider-container {
  margin-block: 1.5rem 2rem;
  background: var(--bg-subtle);
  border: 1px solid var(--border);
  border-radius: 6px;
  padding: 1.25rem 1.5rem;
}

.slider-label-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-block-end: 0.6rem;
  font-family: system-ui, sans-serif;
  font-weight: 700;
  font-size: 0.96rem;
}

.ted-slider {
  accent-color: var(--accent);
  inline-size: 100%;
  block-size: 2.5rem;
  margin: 0;
  cursor: pointer;
}

.slider-ticks {
  display: flex;
  justify-content: space-between;
  font-family: system-ui, sans-serif;
  font-size: 0.78rem;
  color: var(--ink-muted);
  margin-block-start: 0.35rem;
}

.ted-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 11.5rem), 1fr));
  gap: 0.85rem;
  margin-block-start: 1.25rem;
}

.ted-card {
  background: var(--bg-page);
  border: 1px solid var(--border);
  border-radius: 6px;
  padding: 0.95rem 1rem;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}

.ted-card h3 {
  margin: 0 0 0.35rem;
  font-size: 1.05rem;
  line-height: 1.3;
}

.ted-archetype {
  font-family: system-ui, sans-serif;
  font-size: 0.78rem;
  font-weight: 700;
  color: var(--accent);
  text-transform: uppercase;
  margin-block-end: 0.5rem;
}

.ted-card p {
  margin: 0 0 0.85rem;
  font-size: 0.88rem;
  color: var(--ink-secondary);
}

.ted-bill-box {
  background: var(--bg-surface);
  border: 1px solid var(--border-strong);
  border-radius: 4px;
  padding: 0.65rem 0.85rem;
  font-family: system-ui, sans-serif;
}

.ted-bill-row {
  display: flex;
  justify-content: space-between;
  font-size: 0.84rem;
  margin-block-end: 0.2rem;
}

.ted-diff {
  font-size: 0.95rem;
  font-weight: 700;
  margin-block-start: 0.35rem;
  padding-block-start: 0.35rem;
  border-block-start: 1px dashed var(--border);
}

.ted-diff.save { color: #18633e; }
.ted-diff.fair-share { color: #8a3c0c; }

@media (prefers-color-scheme: dark) {
  .ted-diff.save { color: #5ad495; }
  .ted-diff.fair-share { color: #f29e61; }
}

/* Atlas & Pilot Map Case Studies */
.atlas-panel {
  background: var(--bg-surface);
  border: 1px solid var(--border);
  border-radius: 8px;
  padding: clamp(1.25rem, 2.2vw, 2rem);
  margin-block-end: 2.25rem;
  box-shadow: var(--shadow);
}

.pilot-tabs {
  display: flex;
  flex-wrap: wrap;
  gap: 0.45rem;
  margin-block: 1rem 1.35rem;
}

.pilot-btn {
  font-family: system-ui, sans-serif;
  font-size: 0.86rem;
  font-weight: 600;
  padding: 0.42rem 0.85rem;
  background: var(--bg-subtle);
  color: var(--ink-primary);
  border: 1px solid var(--border-strong);
  border-radius: 4px;
  cursor: pointer;
  transition: all 0.15s ease;
}

.pilot-btn:hover {
  background: var(--bg-accent-soft);
}

.pilot-btn[aria-pressed="true"] {
  background: var(--accent);
  color: #ffffff;
  border-color: #5c2606;
}

.atlas-stage {
  display: grid;
  grid-template-columns: minmax(0, 1.3fr) minmax(0, 1fr);
  gap: 1.2rem;
  align-items: start;
}

@media (max-width: 46em) {
  .atlas-stage {
    grid-template-columns: minmax(0, 1fr);
  }
}

.atlas-svg {
  display: block;
  inline-size: 100%;
  block-size: auto;
  aspect-ratio: 540 / 300;
  background: #fbf8f3;
  border: 1px solid #d8cab8;
  border-radius: 6px;
}

.pilot-desc {
  background: var(--bg-subtle);
  border-inline-start: 4px solid var(--accent);
  border-radius: 4px;
  padding: 1.1rem 1.35rem;
}

.pilot-desc h3 {
  margin: 0 0 0.45rem;
  font-size: 1.15rem;
  color: var(--accent);
}

.pilot-desc p {
  margin: 0 0 0.65rem;
  font-size: 0.92rem;
  line-height: 1.6;
}

.pilot-desc p:last-child {
  margin-block-end: 0;
}

/* Archive Grid */
.section-heading {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  align-items: baseline;
  gap: 0.5rem 1rem;
  margin: 2.25rem 0 1rem;
  padding-block-end: 0.45rem;
  border-block-end: 2px solid var(--border-strong);
}

.section-heading h2 {
  margin: 0;
  font-size: 1.45rem;
  text-wrap: balance;
}

.pub-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(min(100%, 15.25rem), 1fr));
  grid-auto-rows: auto;
  gap: 0.9rem;
}

.pub-card:not([hidden]) {
  grid-row: span 3;
  display: grid;
  grid-template-rows: auto 1fr auto;
  grid-template-rows: subgrid;
  row-gap: 0.65rem;
  background: var(--bg-surface);
  border: 1px solid var(--border);
  border-radius: 6px;
  padding: 1rem 1.1rem;
  box-shadow: var(--shadow);
}

.pub-card-head {
  display: flex;
  flex-direction: column;
  gap: 0.35rem;
  min-inline-size: 0;
}

.pub-card-head .pub-meta {
  display: flex;
  justify-content: flex-end;
}

.pub-card h3 {
  margin: 0;
  font-size: 1.06rem;
  line-height: 1.35;
}

.pub-card p {
  margin: 0;
  font-size: 0.93rem;
  color: var(--ink-secondary);
  text-wrap: pretty;
}

.pub-footer {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 0.5rem;
  padding-block-start: 0.55rem;
  border-block-start: 1px solid var(--border);
  font-family: system-ui, sans-serif;
  font-size: 0.8rem;
}

.tag-pill {
  display: inline-block;
  padding: 0.14rem 0.5rem;
  font-family: system-ui, sans-serif;
  font-size: 0.74rem;
  font-weight: 700;
  border-radius: 3px;
  background: var(--badge-bg);
  color: var(--badge-ink);
}

/* Two-Column Reader Layout */
.reader-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 15.5rem;
  gap: 1.25rem;
  align-items: start;
}

@media (max-width: 46em) {
  .reader-grid {
    grid-template-columns: minmax(0, 1fr);
  }
}

.article-paper {
  background: var(--bg-surface);
  border: 1px solid var(--border);
  border-radius: 8px;
  padding: clamp(1.35rem, 3vw, 2.5rem);
  box-shadow: var(--shadow);
  min-inline-size: 0;
}

.article-paper h1 {
  margin: 0 0 0.75rem;
  font-size: clamp(1.45rem, 1.15rem + 1.1vw, 2rem);
  line-height: 1.25;
  text-wrap: balance;
}

.article-paper h2 {
  margin: 1.75rem 0 0.6rem;
  font-size: 1.25rem;
  line-height: 1.32;
  color: var(--accent);
  border-block-end: 1px solid var(--border);
  padding-block-end: 0.25rem;
}

.article-paper p,
.article-paper li {
  max-inline-size: 68ch;
  text-wrap: pretty;
}

.bio-lead {
  font-size: 1.05rem;
  line-height: 1.7;
  max-inline-size: 100% !important;
  text-wrap: pretty;
  margin-block: 0 1.25rem;
}

.bio-header {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 1.5rem;
  align-items: start;
  padding-block-end: 1.25rem;
  margin-block-end: 1.5rem;
  border-block-end: 1px solid var(--border);
}

.bio-header .article-meta {
  border-block-end: none;
  margin-block-end: 0;
  padding-block-end: 0;
}

.meta-line {
  display: block;
}

@media (max-width: 38em) {
  .bio-header {
    grid-template-columns: minmax(0, 1fr);
  }
}

.portrait-frame {
  background: #ddd1c5;
  border: 1px solid var(--border-strong);
  border-radius: 6px;
  padding: 0.3rem 0.3rem 0;
  inline-size: 118px;
  box-shadow: inset 0 0 0 1px rgba(255,255,255,0.45);
}

.portrait-frame img {
  display: block;
  inline-size: 100%;
  block-size: auto;
  aspect-ratio: 144 / 168;
  border-radius: 3px 3px 0 0;
}

.article-meta {
  font-family: system-ui, sans-serif;
  font-size: 0.86rem;
  color: var(--ink-muted);
  margin-block-end: 1.35rem;
  padding-block-end: 0.85rem;
  border-block-end: 1px solid var(--border);
}

.scholar-aside {
  display: flex;
  flex-direction: column;
  gap: 1rem;
}

.aside-box {
  background: var(--bg-surface);
  border: 1px solid var(--border);
  border-radius: 6px;
  padding: 1.1rem 1.2rem;
  font-size: 0.92rem;
}

.aside-box h2 {
  margin: 0 0 0.65rem;
  font-family: system-ui, sans-serif;
  font-size: 0.84rem;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--accent);
}

.aside-list {
  list-style: none;
  margin: 0;
  padding: 0;
}

.aside-list li {
  margin-block-end: 0.5rem;
  padding-block-end: 0.45rem;
  border-block-end: 1px dotted var(--border);
}

.aside-list li:last-child {
  margin-block-end: 0;
  padding-block-end: 0;
  border-block-end: 0;
}

/* Timeline & Data Tables */
.timeline {
  list-style: none;
  margin: 1.25rem 0;
  padding: 0;
  border-inline-start: 2px solid var(--border-strong);
}

.timeline li {
  position: relative;
  padding: 0 0 1.35rem 1.35rem;
}

.timeline li::before {
  content: "";
  position: absolute;
  inset-inline-start: -0.42rem;
  inset-block-start: 0.35rem;
  inline-size: 0.7rem;
  block-size: 0.7rem;
  border-radius: 50%;
  background: var(--accent);
}

.timeline-period {
  font-family: system-ui, sans-serif;
  font-size: 0.8rem;
  font-weight: 700;
  color: var(--accent);
  text-transform: uppercase;
  letter-spacing: 0.05em;
}

.data-table {
  inline-size: 100%;
  border-collapse: collapse;
  margin-block: 1rem 1.5rem;
  font-size: 0.92rem;
}

.data-table caption {
  text-align: start;
  font-weight: 700;
  margin-block-end: 0.45rem;
  color: var(--ink-secondary);
}

.data-table th,
.data-table td {
  padding: 0.55rem 0.75rem;
  border: 1px solid var(--border);
  text-align: start;
  vertical-align: top;
}

.data-table th {
  background: var(--bg-subtle);
  font-family: system-ui, sans-serif;
  font-size: 0.82rem;
}

/* Complete Hosted File Index — Grouped & Responsive Table */
.table-wrapper {
  overflow: auto;
  max-inline-size: 100%;
  container-type: inline-size;
  border: 1px solid var(--border-strong);
  border-radius: 6px;
  background: var(--bg-surface);
  box-shadow: var(--shadow);
}

.file-index-table {
  margin-block: 0;
  border-collapse: separate;
  border-spacing: 0;
  --label-1: "#";
  --label-2: "Filename";
  --label-3: "Date & Source";
  --label-4: "Format";
  --label-5: "Size";
  --label-6: "Description & Path";
}

.file-index-table caption {
  padding: 0.75rem 1rem 0.5rem;
  margin-block-end: 0;
  border-block-end: 1px solid var(--border);
  background: var(--bg-surface);
}

.file-index-table thead {
  position: sticky;
  inset-block-start: 0;
  z-index: 2;
}

.file-index-table thead th {
  background: var(--bg-subtle);
  border-block-end: 2px solid var(--border-strong);
  white-space: nowrap;
}

.file-index-table th,
.file-index-table td {
  padding: 0.45rem 0.6rem;
}

.file-index-table .col-num {
  inline-size: 2.2rem;
  text-align: center;
  font-family: system-ui, sans-serif;
  font-size: 0.78rem;
  font-weight: 700;
  color: var(--ink-muted);
}

.file-index-table .col-file {
  inline-size: 20%;
  font-size: 0.84rem;
  word-break: break-word;
}

.file-index-table .col-date {
  inline-size: 11%;
  white-space: nowrap;
  font-family: system-ui, sans-serif;
  font-size: 0.82rem;
  line-height: 1.35;
}

.file-index-table .col-fmt {
  inline-size: 4rem;
  text-align: center;
}

.file-index-table .col-size {
  inline-size: 4.8rem;
  white-space: nowrap;
  font-family: system-ui, sans-serif;
  font-size: 0.8rem;
  text-align: end;
}

.file-index-table .col-desc {
  inline-size: 52%;
}

.file-index-table .group-header-row th {
  background: var(--bg-accent-soft);
  color: var(--ink-primary);
  padding: 0.7rem 0.9rem;
  border-block: 2px solid var(--border-strong);
}

.group-header-inner {
  display: flex;
  flex-direction: column;
  gap: 0.15rem;
}

.group-header-inner strong {
  font-family: Georgia, serif;
  font-size: 0.98rem;
  color: var(--accent);
}

.group-header-inner span {
  font-family: system-ui, sans-serif;
  font-size: 0.8rem;
  font-weight: 400;
  color: var(--ink-secondary);
}

.date-rollover {
  position: relative;
  display: inline-flex;
  align-items: center;
  cursor: help;
  outline: none;
}

.date-val {
  display: inline-block;
  font-size: 0.84rem;
  font-weight: 600;
  color: var(--ink-primary);
  border-block-end: 1px dotted var(--border-strong);
  padding-block-end: 1px;
  transition: color 0.15s ease, border-color 0.15s ease;
}

.date-rollover:hover .date-val,
.date-rollover:focus-visible .date-val {
  color: var(--accent);
  border-block-end-color: var(--accent);
}

.date-tooltip {
  position: absolute;
  inset-block-start: calc(100% + 6px);
  inset-inline-start: 0;
  z-index: 30;
  inline-size: max-content;
  max-inline-size: 16rem;
  padding: 0.5rem 0.65rem;
  background: var(--bg-surface);
  color: var(--ink-primary);
  border: 1px solid var(--border-strong);
  border-radius: 6px;
  box-shadow: 0 6px 18px rgba(33, 23, 14, 0.16);
  font-family: system-ui, -apple-system, sans-serif;
  font-size: 0.75rem;
  line-height: 1.38;
  white-space: normal;
  pointer-events: none;
  opacity: 0;
  visibility: hidden;
  transform: translateY(-3px);
  transition: opacity 0.14s ease, transform 0.14s ease, visibility 0.14s ease;
}

.date-rollover:hover .date-tooltip,
.date-rollover:focus-visible .date-tooltip {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
}

.date-tooltip-badge {
  display: inline-block;
  padding: 0.08rem 0.38rem;
  border-radius: 3px;
  font-size: 0.65rem;
  font-weight: 700;
  letter-spacing: 0.02em;
  text-transform: uppercase;
  margin-block-end: 0.25rem;
}

.date-badge-doc,
.date-badge-both {
  background: #e6f4ea;
  color: #165934;
  border: 1px solid #8ec9a3;
}

.date-badge-file {
  background: #fef3d6;
  color: #704700;
  border: 1px solid #dfb65b;
}

.date-badge-meta {
  background: var(--badge-bg);
  color: var(--badge-ink);
  border: 1px solid var(--border-strong);
}

@media (prefers-color-scheme: dark) {
  .date-badge-doc,
  .date-badge-both {
    background: #173727;
    color: #8ae4b5;
    border-color: #2b6b4c;
  }
  .date-badge-file {
    background: #3d2c08;
    color: #f7d279;
    border-color: #7a5914;
  }
}

.date-tooltip-note {
  display: block;
  color: var(--ink-secondary);
  font-weight: 400;
}

.file-desc-text {
  margin: 0;
  font-size: 0.88rem;
  line-height: 1.48;
  color: var(--ink-primary);
  text-wrap: pretty;
}

.file-group:not(:has(tr[data-pub-cat]:not([hidden]))) {
  display: none;
}

@container (width < 620px) {
  .file-index-table,
  .file-index-table thead,
  .file-index-table tbody,
  .file-index-table tr,
  .file-index-table th,
  .file-index-table td {
    display: block;
    inline-size: 100% !important;
    text-align: start !important;
  }

  .file-index-table thead {
    display: none;
  }

  .file-index-table tr[data-pub-cat] {
    margin: 0.75rem;
    inline-size: auto !important;
    border: 1px solid var(--border-strong);
    border-radius: 6px;
    overflow: hidden;
  }

  .file-index-table tbody th.col-file {
    position: sticky;
    inset-block-start: 0;
    z-index: 1;
    background: var(--bg-subtle);
  }

  .file-index-table td:nth-child(1)::before { content: var(--label-1) ": "; font-weight: 700; }
  .file-index-table td:nth-child(3)::before { content: var(--label-3) ": "; font-weight: 700; }
  .file-index-table td:nth-child(4)::before { content: var(--label-4) ": "; font-weight: 700; }
  .file-index-table td:nth-child(5)::before { content: var(--label-5) ": "; font-weight: 700; }
  .file-index-table td:nth-child(6)::before { content: var(--label-6) ": "; font-weight: 700; display: block; margin-block-end: 0.2rem; }
}

.filter-bar {
  display: flex;
  flex-wrap: wrap;
  gap: 0.4rem;
  align-items: center;
  margin-block: 0.9rem 1.2rem;
}

.filter-bar .pilot-btn {
  font-size: 0.78rem;
  min-block-size: 32px;
  padding: 0.28rem 0.62rem;
  white-space: nowrap;
}

.filter-bar input[type="search"] {
  font-family: system-ui, sans-serif;
  font-size: 0.8rem;
  min-block-size: 32px;
  flex: 1 1 11rem;
  min-inline-size: 10rem;
}

.pub-section:not(:has([data-pub-cat]:not([hidden]))) {
  display: none;
}

.empty-filter-msg {
  padding: 1rem 1.25rem;
  background: var(--bg-surface);
  border: 1px dashed var(--border-strong);
  border-radius: 6px;
  color: var(--ink-secondary);
  font-family: system-ui, sans-serif;
  font-size: 0.92rem;
}

/* Forms */
.form-field {
  margin-block-end: 1rem;
}

.form-field label {
  display: block;
  font-family: system-ui, sans-serif;
  font-size: 0.9rem;
  font-weight: 600;
  margin-block-end: 0.3rem;
}

.form-field input[type="text"],
.form-field input[type="email"],
.form-field input[type="tel"],
.form-field input[type="search"],
.form-field select,
.form-field textarea {
  inline-size: 100%;
  font-family: inherit;
  font-size: 1rem;
  padding: 0.5rem 0.7rem;
  min-block-size: 42px;
  border: 1px solid var(--border-strong);
  border-radius: 4px;
  background: var(--bg-surface);
  color: var(--ink-primary);
}

.form-field input:invalid:user-invalid,
.form-field textarea:invalid:user-invalid {
  border-color: #b3261e;
}

fieldset.scholar-fieldset {
  border: 1px solid var(--border);
  border-radius: 6px;
  padding: 1.15rem 1.35rem;
  margin: 0 0 1.35rem;
  background: var(--bg-subtle);
}

fieldset.scholar-fieldset legend {
  font-family: system-ui, sans-serif;
  font-weight: 700;
  padding-inline: 0.45rem;
  color: var(--accent);
}

/* Footer */
.lab-footer {
  border-block-start: 1px solid var(--border);
  background: var(--bg-subtle);
  padding: 2rem var(--shell-gutter) 2.5rem;
  font-family: system-ui, -apple-system, sans-serif;
  font-size: 0.85rem;
  color: var(--ink-secondary);
}

.lab-footer-inner {
  max-inline-size: var(--shell-max);
  margin-inline: auto;
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: 1.25rem 2rem;
}

.edition-pill {
  display: inline-block;
  margin-block-start: 0.65rem;
  padding: 0.28rem 0.75rem;
  background: var(--bg-surface);
  border: 1px solid var(--border-strong);
  border-radius: 999px;
  font-size: 0.78rem;
}

/* ===== Redesign D: Illustrated TED ===== */
/* 5-row subgrid aligns archetype kicker, heading, tooltip band, extended white bill card, and half-overlapping isometric scene */
.ted-panel .slider-container {
  border-color: color-mix(in oklab, var(--border) 55%, transparent);
}

.ted-grid {
  position: relative;
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  grid-template-rows: repeat(5, auto);
  column-gap: 0.85rem;
  row-gap: 0;
  margin-block-start: 1.25rem;
}

.ted-group-savers {
  position: relative;
  grid-column: 1 / span 3;
  grid-row: 1 / span 5;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  grid-template-columns: subgrid;
  grid-template-rows: repeat(5, auto);
  grid-template-rows: subgrid;
  background: color-mix(in oklab, var(--bg-subtle) 42%, var(--bg-page));
  border: 1px solid color-mix(in oklab, var(--border) 50%, transparent);
  border-radius: 8px;
  padding-inline: 0.45rem;
}

.ted-group-savers .ted-card {
  background: transparent;
  border: 0;
  border-radius: 0;
  padding: 1rem 0.55rem 0.85rem;
}

.ted-card-a { grid-column: 1; grid-row: 1 / span 5; }
.ted-card-b { grid-column: 2; grid-row: 1 / span 5; }
.ted-card-c { grid-column: 3; grid-row: 1 / span 5; }

.ted-card-landbank {
  grid-column: 4;
  grid-row: 1 / span 5;
  background: color-mix(in oklab, var(--bg-subtle) 42%, var(--bg-page));
  border: 1px solid color-mix(in oklab, var(--border) 50%, transparent);
  border-radius: 8px;
  padding: 1rem 0.9rem 0.85rem;
}

.ted-card {
  display: grid;
  grid-template-rows: repeat(5, auto);
  grid-template-rows: subgrid;
  row-gap: 0;
  align-content: start;
}

.ted-card > .ted-archetype {
  grid-row: 1;
}

.ted-card > h3 {
  grid-row: 2;
  margin-block-end: 0.65rem;
}

/* Row 3: Dynamic tooltip band above the white bill boxes (editorial left-rule callout, no nested box border) */
.ted-tags {
  display: grid;
  align-items: center;
  margin-block-end: 0.75rem;
  pointer-events: none;
}

.ted-tags-savers {
  grid-column: 1 / -1;
  grid-row: 3;
  margin-inline: 0.55rem;
  z-index: 2;
}

.ted-tags-landbank {
  grid-row: 3;
}

.ted-tag {
  grid-area: 1 / 1;
  display: grid;
  align-content: center;
  max-inline-size: none;
  padding: 0.12rem 0.25rem 0.12rem 0.65rem;
  background: transparent;
  border: 0;
  border-inline-start: 2.5px solid color-mix(in oklab, var(--accent-teal) 72%, transparent);
  border-radius: 0;
  box-shadow: none;
  font: 500 0.7rem/1.38 system-ui, sans-serif;
  color: var(--ink-secondary);
  opacity: min(clamp(0, calc((var(--s) - var(--t, -1)) * 12), 1),
               clamp(0, calc((var(--t2, 2) - var(--s)) * 12), 1));
}

.ted-tags-savers .ted-tag {
  font-size: 0.74rem;
  padding: 0.12rem 0.25rem 0.12rem 0.68rem;
}

.ted-tags-landbank .ted-tag {
  border-inline-start-color: color-mix(in oklab, var(--accent) 65%, transparent);
}

@media (prefers-reduced-motion: no-preference) {
  .ted-tag { transition: opacity 0.3s ease; }
}

/* Row 4: Extended white bill box with numbers at top and clean white plinth space below for the isometric overlap */
.ted-card > .ted-bill-box {
  grid-row: 4;
  align-self: stretch;
  margin: 0;
  padding: 0.72rem 0.75rem 4.35rem;
  background: var(--bg-surface);
  border: 1px solid color-mix(in oklab, var(--border) 52%, transparent);
  border-radius: 6px;
  box-shadow: 0 1px 3px rgb(33 23 14 / 0.03);
  position: relative;
  z-index: 1;
}

.ted-card .ted-bill-row {
  gap: 0.35rem;
  align-items: baseline;
  font-size: 0.8rem;
}

.ted-card .ted-diff {
  font-size: 0.82rem;
  line-height: 1.3;
  white-space: nowrap;
}

.ted-diff-top {
  margin: 0 0 0.45rem;
  padding: 0 0 0.42rem;
  border-block-start: 0;
  border-block-end: 1px solid color-mix(in oklab, var(--border) 50%, transparent);
}

/* Row 5: Isometric illustration overlapping the lower half of the white bill card */
.ted-card > .ted-figure {
  grid-row: 5;
  align-self: stretch;
  display: grid;
  place-items: center;
  margin: -3.85rem 0 0;
  padding: 0 0.2rem;
  background: none;
  border: 0;
  border-radius: 4px;
  color: #4d3a2b;
  position: relative;
  z-index: 2;
  cursor: help;
}

.ted-figure:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
}

.ted-desc {
  position: absolute;
  inset: 0.25rem;
  display: grid;
  place-items: center;
  padding: 0.6rem 0.75rem;
  background: rgb(251 248 242 / 0.96);
  border: 1px solid var(--border);
  box-shadow: 0 2px 8px rgb(33 23 14 / 0.12);
  border-radius: 5px;
  opacity: 0;
  pointer-events: none;
}

.ted-desc p {
  margin: 0;
  font-size: 0.84rem;
  line-height: 1.4;
  text-align: center;
  color: #3f2e21;
}

.ted-figure:hover .ted-desc,
.ted-figure:focus .ted-desc {
  opacity: 1;
}

.ted-info {
  position: absolute;
  inset-block-end: 0.25rem;
  inset-inline-end: 0.3rem;
  inline-size: 1.05rem;
  block-size: 1.05rem;
  display: grid;
  place-items: center;
  border: 1px solid color-mix(in oklab, var(--border-strong) 42%, transparent);
  border-radius: 50%;
  background: color-mix(in oklab, var(--bg-surface) 85%, var(--bg-page));
  color: var(--ink-muted);
  font: italic 600 0.68rem Georgia, serif;
}

@media (prefers-contrast: more) {
  .ted-group-savers,
  .ted-card-landbank,
  .ted-card > .ted-bill-box {
    border-color: var(--border-strong);
  }
  .ted-tag {
    border-inline-start-color: var(--accent-teal);
    color: var(--ink-primary);
  }
}

@media (forced-colors: active) {
  .ted-group-savers,
  .ted-card-landbank,
  .ted-card > .ted-bill-box {
    border: 1px solid CanvasText;
  }
  .ted-tag {
    border-inline-start: 3px solid Highlight;
  }
}

@media (prefers-reduced-motion: no-preference) {
  .ted-desc { transition: opacity 0.2s ease; }
}

.ted-hint {
  margin: 0.6rem 0 0;
  font-family: system-ui, sans-serif;
  font-size: 0.84rem;
  color: var(--ink-muted);
}

@media (max-width: 980px) {
  .ted-tag-br {
    display: none;
  }
  .ted-grid {
    grid-template-columns: 1fr;
    grid-template-rows: auto;
    row-gap: 0.85rem;
  }
  .ted-group-savers {
    grid-column: 1;
    grid-row: auto;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    grid-template-rows: repeat(5, auto);
    column-gap: 0.65rem;
  }
  .ted-card-landbank {
    grid-column: 1;
    grid-row: auto;
    grid-template-rows: auto;
  }
}

@media (max-width: 680px) {
  .ted-group-savers {
    display: flex;
    flex-direction: column;
    gap: 1.15rem;
    padding: 0.95rem 1rem;
  }
  .ted-group-savers .ted-card,
  .ted-card-landbank {
    display: flex;
    flex-direction: column;
    padding: 0;
  }
  .ted-card-landbank {
    padding: 0.95rem 1rem;
  }
  .ted-tags-savers {
    margin-inline: 0;
    margin-block-end: 0.2rem;
  }
  .ted-card > .ted-figure {
    inline-size: min(100%, 16.5rem);
    margin-inline: auto;
  }
}

.ted-illus {
  display: block;
  inline-size: 100%;
  block-size: auto;
  aspect-ratio: 16 / 10;
}


/* Layers are driven by --s (0..1), set per illustration from the computed bill change. */
.ted-illus .in   { opacity: clamp(0, calc((var(--s) - var(--t)) * 12), 1); }
.ted-illus .out  { opacity: clamp(0, calc((var(--t) - var(--s)) * 12), 1); }
.ted-illus .band {
  opacity: min(clamp(0, calc((var(--s) - var(--t)) * 12), 1),
               clamp(0, calc((var(--t2) - var(--s)) * 12), 1));
}

@media (prefers-reduced-motion: no-preference) {
  .ted-illus .in,
  .ted-illus .out,
  .ted-illus .band {
    transition: opacity 0.35s ease;
  }
}

/* Atlas: original line drawing + optional layers */
.atlas-figure {
  margin: 0;
}

.atlas-canvas {
  position: relative;
}

.atlas-tag-main {
  font-family: Georgia, serif;
  font-size: 0.74rem;
  color: #5c2606;
}

.atlas-caption {
  justify-content: flex-end;
}

.atlas-illus {
  display: block;
  inline-size: 100%;
  block-size: auto;
}

.atlas-scene[hidden] {
  display: none;
}

@media (prefers-reduced-motion: no-preference) {
  .atlas-scene {
    animation: atlas-in 0.35s ease;
  }
}

@keyframes atlas-in {
  from { opacity: 0; }
  to { opacity: 1; }
}

.atlas-tags {
  list-style: none;
  margin: 0;
  padding: 0;
}

.atlas-tag {
  position: absolute;
  inset-inline-start: var(--x);
  inset-block-start: var(--y);
  max-inline-size: min(var(--mw), 15rem);
  inline-size: max-content;
  transform: translate(0.55rem, -50%);
  padding: 0.2rem 0.45rem;
  background: #fffdf8;
  border: 1px solid #bcab93;
  border-inline-start: 3px solid var(--accent-teal);
  border-radius: 3px;
  box-shadow: 0 1px 3px rgb(33 23 14 / 0.12);
  font: 600 0.68rem/1.3 system-ui, sans-serif;
  color: #3f2e21;
}

.atlas-tag.is-left {
  transform: translate(calc(-100% - 0.55rem), -50%);
  border-inline-start-width: 1px;
  border-inline-end: 3px solid var(--accent-teal);
}

.atlas-tag::before {
  content: "";
  position: absolute;
  inset-block-start: 50%;
  inset-inline-start: -0.6rem;
  inline-size: 0.4rem;
  block-size: 0.4rem;
  margin-block-start: -0.2rem;
  border-radius: 50%;
  background: #5c2606;
}

.atlas-figure.show-context .atlas-hub-text {
  display: none;
}

.atlas-tag.no-dot {
  transform: none;
}

.atlas-tag.no-dot::before {
  display: none;
}

.atlas-tag.is-left::before {
  inset-inline-start: auto;
  inset-inline-end: -0.6rem;
}

.atlas-figure:not(.show-context) .lyr-context,
.atlas-figure:not(.show-contours) .lyr-contours,
.atlas-figure:not(.show-figures) .lyr-figures,
.atlas-figure[data-pilot="oxford"] [data-pilot-layer]:not([data-pilot-layer="oxford"]),
.atlas-figure[data-pilot="newbury"] [data-pilot-layer]:not([data-pilot-layer="newbury"]),
.atlas-figure[data-pilot="jubilee"] [data-pilot-layer]:not([data-pilot-layer="jubilee"]),
.atlas-figure[data-pilot="liverpool"] [data-pilot-layer]:not([data-pilot-layer="liverpool"]) {
  display: none;
}

.atlas-tag.lyr-figures {
  background: #5c2606;
  border-color: #5c2606;
  color: #fbf3e6;
}

.atlas-caption {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-end;
  align-items: center;
  gap: 0.4rem 0.75rem;
  margin-block-start: 0.35rem;
}

.atlas-layers {
  display: inline-flex;
  flex-wrap: wrap;
  gap: 0.3rem;
}

.atlas-layer-btn {
  font: 600 0.72rem system-ui, sans-serif;
  padding: 0.18rem 0.55rem;
  border: 1px solid var(--border-strong);
  border-radius: 999px;
  background: transparent;
  color: var(--ink-secondary);
  cursor: pointer;
}

.atlas-layer-btn::before {
  content: "+ ";
}

.atlas-layer-btn[aria-pressed="true"] {
  background: var(--bg-accent-soft);
  border-color: var(--accent);
  color: var(--accent);
}

.atlas-layer-btn[aria-pressed="true"]::before {
  content: "✓ ";
}

.atlas-legend {
  margin: 0;
  font-family: system-ui, sans-serif;
  font-size: 0.76rem;
  color: var(--ink-muted);
}

.atlas-legend::before {
  content: "";
  display: inline-block;
  inline-size: 0.9rem;
  block-size: 0.6rem;
  margin-inline-end: 0.4rem;
  vertical-align: baseline;
  background: linear-gradient(#9a4914, #ead4b5);
  border-radius: 2px;
}

.ted-footnote {
  margin: 1rem 0 0;
  font-family: system-ui, sans-serif;
  font-size: 0.8rem;
  color: var(--ink-muted);
  max-inline-size: none;
}