/* ==========================================================================
   Stanford AITC — Precision Health & Intervention in Aging & ADRD
   Brand palette (from AITC_Colors.png):
     #27213c  ink / dark plum      #5762d5  periwinkle (secondary)
     #bdc8ff  light periwinkle     #8c1515  Stanford cardinal (primary)
   ========================================================================== */

:root {
  --ink:        #27213c;   /* dark plum, unchanged */
  --ink-soft:   #4a4360;
  --primary:    #8c1515;   /* Stanford cardinal — the lead colour */
  --primary-dk: #6d1010;   /* hover / pressed */
  --primary-lt: #eab9b9;   /* light cardinal, for dark backgrounds */
  --accent:     #5762d5;   /* periwinkle from the logo */
  --accent-lt:  #bdc8ff;
  --paper:      #ffffff;
  --paper-alt:  #fefef7;   /* alternating sections */
  --paper-card: #ffffff;   /* card surfaces */
  --paper-tint: #f7eded;
  --line:       #e8dcdc;
  --muted:      #625c74;

  --serif: "Source Serif 4", "Source Serif Pro", Georgia, "Times New Roman", serif;
  --sans:  "Source Sans 3", "Source Sans Pro", -apple-system, BlinkMacSystemFont,
           "Segoe UI", Roboto, Helvetica, Arial, sans-serif;

  --wrap: 1180px;
  --gutter: clamp(1.25rem, 4vw, 3rem);
  --radius: 10px;
  --shadow-sm: 0 1px 2px rgba(39,33,60,.06), 0 2px 8px rgba(39,33,60,.05);
  --shadow-md: 0 4px 12px rgba(39,33,60,.08), 0 12px 32px rgba(39,33,60,.08);
  --ease: cubic-bezier(.22,.61,.36,1);
}

/* ---------- reset / base ---------- */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }

body {
  margin: 0;
  font-family: var(--sans);
  font-size: 1.0625rem;
  line-height: 1.65;
  color: var(--ink);
  background: var(--paper);
  -webkit-font-smoothing: antialiased;
}

img { max-width: 100%; height: auto; display: block; }
a { color: var(--primary-dk); text-decoration-thickness: 1px; text-underline-offset: 2px; }
a:hover { color: var(--accent); }

h1, h2, h3, h4 { font-family: var(--serif); font-weight: 600; line-height: 1.18; color: var(--ink); margin: 0 0 .6em; letter-spacing: -.01em; }
h1 { font-size: clamp(2.1rem, 4.4vw, 3.25rem); }
h2 { font-size: clamp(1.65rem, 3vw, 2.35rem); }
h3 { font-size: clamp(1.2rem, 1.9vw, 1.45rem); }
h4 { font-size: 1.05rem; }
p  { margin: 0 0 1.1em; }
p:last-child { margin-bottom: 0; }

.wrap { width: 100%; max-width: var(--wrap); margin-inline: auto; padding-inline: var(--gutter); }
.wrap-narrow { max-width: 800px; }

.skip-link {
  position: absolute; left: -9999px; top: 0; z-index: 200;
  background: var(--ink); color: #fff; padding: .75rem 1.25rem; border-radius: 0 0 var(--radius) 0;
}
.skip-link:focus { left: 0; color: #fff; }

:focus-visible { outline: 3px solid var(--primary); outline-offset: 3px; border-radius: 3px; }

/* The header is sticky, so anything jumped to needs to clear it. */
[id] { scroll-margin-top: 100px; }

/* ---------- utility ---------- */
.eyebrow {
  font-family: var(--sans); font-size: .78rem; font-weight: 700;
  letter-spacing: .12em; text-transform: uppercase; color: var(--primary-dk);
  margin: 0 0 .85rem;
}
.eyebrow--light { color: var(--primary-lt); }
.lede { font-size: clamp(1.1rem, 1.6vw, 1.28rem); line-height: 1.6; color: var(--ink-soft); }
.center { text-align: center; }
.section { padding: clamp(3.5rem, 7vw, 6rem) 0; }
.section--tint { background: var(--paper-alt); }
.section--ink { background: var(--ink); color: #fff; }
.section--ink h2, .section--ink h3 { color: #fff; }
.section--ink p { color: rgba(255,255,255,.82); }
.section-head { max-width: 720px; margin-bottom: clamp(2rem, 4vw, 3rem); }
.section-head.center { margin-inline: auto; }

.rule {
  width: 56px; height: 4px; border-radius: 2px; border: 0;
  background: var(--primary); margin: 0 0 1.4rem;
}
.center .rule { margin-inline: auto; }

.btn {
  display: inline-flex; align-items: center; gap: .55rem;
  font-family: var(--sans); font-size: .98rem; font-weight: 600;
  padding: .8rem 1.5rem; border-radius: 6px; border: 2px solid transparent;
  text-decoration: none; cursor: pointer;
  transition: background .18s var(--ease), color .18s var(--ease), border-color .18s var(--ease), transform .18s var(--ease);
}
.btn:hover { transform: translateY(-1px); }
.btn--primary { background: var(--primary); color: #fff; }
.btn--primary:hover { background: var(--primary-dk); color: #fff; }
.btn--ghost { border-color: var(--primary); color: var(--primary-dk); background: transparent; }
.btn--ghost:hover { background: var(--primary); color: #fff; }
.btn--light { border-color: rgba(255,255,255,.55); color: #fff; background: transparent; }
.btn--light:hover { background: #fff; color: var(--ink); border-color: #fff; }
.btn-row { display: flex; flex-wrap: wrap; gap: .85rem; }

.arrow-link { font-weight: 600; text-decoration: none; display: inline-flex; align-items: center; gap: .4rem; }
.arrow-link::after { content: "→"; transition: transform .18s var(--ease); }
.arrow-link:hover::after { transform: translateX(3px); }

/* ---------- header ---------- */
.topbar {
  background: var(--ink); color: rgba(255,255,255,.75);
  font-size: .82rem; letter-spacing: .02em;
}
.topbar .wrap { display: flex; justify-content: space-between; align-items: center; gap: 1rem; min-height: 38px; }
.topbar a { color: rgba(255,255,255,.85); text-decoration: none; }
.topbar a:hover { color: #fff; text-decoration: underline; }
.topbar-links { display: flex; gap: 1.4rem; list-style: none; margin: 0; padding: 0; }
/* Below the breakpoint the strapline is dropped rather than allowed to wrap
   into a second row that pushes the header down. */
@media (max-width: 860px) {
  .topbar .tagline { display: none; }
  .topbar .wrap { justify-content: flex-end; }
}
@media (max-width: 520px) {
  .topbar { font-size: .76rem; }
  .topbar-links { gap: 1rem; }
}

.site-header {
  position: sticky; top: 0; z-index: 100;
  background: rgba(255,255,255,.96);
  backdrop-filter: saturate(180%) blur(10px);
  border-bottom: 1px solid var(--line);
}
.site-header .wrap { display: flex; align-items: center; justify-content: space-between; gap: 1.5rem; min-height: 82px; }
.brand { display: flex; align-items: center; text-decoration: none; flex-shrink: 0; }
.brand img { height: 58px; width: auto; }
@media (max-width: 480px) { .brand img { height: 46px; } }

.nav-toggle {
  display: none; background: none; border: 1px solid var(--line);
  border-radius: 6px; padding: .5rem .7rem; cursor: pointer; color: var(--ink);
}
.nav-toggle svg { display: block; }

.nav ul { display: flex; align-items: center; gap: .25rem; list-style: none; margin: 0; padding: 0; }
.nav > ul > li { position: relative; }
.nav a {
  display: block; padding: .6rem .85rem; border-radius: 6px;
  white-space: nowrap;                  /* labels must never wrap to two lines */
  font-size: .95rem; font-weight: 600; color: var(--ink); text-decoration: none;
  transition: color .15s var(--ease), background .15s var(--ease);
}
.nav a:hover { color: var(--primary-dk); background: var(--paper-tint); }
.nav a[aria-current="page"] { color: var(--primary-dk); box-shadow: inset 0 -3px 0 var(--primary); }
.nav .nav-cta { margin-left: .6rem; }
.nav .nav-cta a,
.nav .nav-cta a[aria-current="page"] {
  background: var(--primary); color: #fff; padding: .6rem 1.15rem;
  border-radius: 6px; box-shadow: none;   /* never the underline treatment */
}
.nav .nav-cta a:hover { background: var(--primary-dk); color: #fff; }

/* dropdown */
/* The caret sits inside the shared padding rather than adding width, so every
   nav item keeps the same box around its label: the label stays centred AND the
   current-page underline overhangs the text by the same amount everywhere. */
.has-sub > a { position: relative; }
.has-sub > a::after {
  content: "▾"; font-size: .62em; opacity: .6;
  position: absolute; right: .16rem; top: 50%; transform: translateY(-50%);
}
.subnav {
  position: absolute; top: calc(100% + 2px); left: 0; min-width: 230px;
  background: var(--paper-card); border: 1px solid var(--line); border-radius: var(--radius);
  box-shadow: var(--shadow-md); padding: .4rem;
  display: block; flex-direction: column; gap: 0;
  opacity: 0; visibility: hidden; transform: translateY(-6px);
  transition: opacity .16s var(--ease), transform .16s var(--ease), visibility .16s;
}
.has-sub:hover .subnav, .has-sub:focus-within .subnav { opacity: 1; visibility: visible; transform: translateY(0); }
.subnav li { width: 100%; }
.subnav a { font-weight: 500; font-size: .92rem; padding: .55rem .75rem; }

@media (max-width: 1100px) {
  .nav-toggle { display: block; }
  .nav {
    position: absolute; top: 100%; left: 0; right: 0;
    background: var(--paper-card); border-bottom: 1px solid var(--line);
    box-shadow: var(--shadow-md); padding: .75rem var(--gutter) 1.25rem;
    display: none; max-height: calc(100vh - 82px); overflow-y: auto;
  }
  .nav.is-open { display: block; }
  .nav ul { flex-direction: column; align-items: stretch; gap: 0; }
  .nav a { padding: .85rem .5rem; border-bottom: 1px solid var(--paper-alt); border-radius: 0; }
  .nav a[aria-current="page"] { box-shadow: inset 3px 0 0 var(--primary); }
  .subnav {
    position: static; opacity: 1; visibility: visible; transform: none;
    border: 0; box-shadow: none; padding: 0 0 0 1rem; min-width: 0;
  }
  .nav .nav-cta { margin: .9rem 0 0; }
  .nav .nav-cta a { border-radius: 6px; text-align: center; border-bottom: 0; }
}

/* ---------- hero slideshow ---------- */
/* The captions, not a fixed height, drive how tall the hero is. All four panels
   sit in one grid cell, so the cell is as tall as the longest caption and no
   headline can ever be clipped or run into the controls, at any viewport. The
   photographs are absolutely positioned behind that. */
.hero { position: relative; overflow: hidden; background: #261919; }
.hero-track { position: absolute; inset: 0; }
.hero-slide {
  position: absolute; inset: 0;
  opacity: 0; visibility: hidden;
  transition: opacity 1s var(--ease), visibility 1s;
}
.hero-slide.is-active { opacity: 1; visibility: visible; }
.hero-slide img {
  width: 100%; height: 100%; object-fit: cover;
  object-position: var(--focus, 50% 38%);
  filter: brightness(1.2) saturate(1.06);
}
/* Scrim: a warm near-black rather than the plum ink, which read as blue over
   the photographs once the palette went cardinal. Kept just heavy enough on the
   left for AA text contrast and light on the right so the photograph carries. */
.hero-slide::after {
  content: ""; position: absolute; inset: 0;
  background:
    linear-gradient(180deg, rgba(38,25,25,.22) 0%, rgba(38,25,25,0) 22%, rgba(38,25,25,0) 70%, rgba(38,25,25,.34) 100%),
    linear-gradient(90deg,  rgba(38,25,25,.90) 0%, rgba(38,25,25,.87) 32%, rgba(38,25,25,.78) 48%,
                            rgba(38,25,25,.56) 60%, rgba(38,25,25,.24) 73%, rgba(38,25,25,.10) 87%,
                            rgba(38,25,25,.08) 100%);
}
/* Drawn in normal blend mode on purpose: screen blending shifted #8c1515
   towards orange wherever the photograph behind it was green, so the accent
   stopped reading as Stanford cardinal. */
.hero-canvas {
  position: absolute; inset: 0; z-index: 2;
  width: 100%; height: 100%;
  display: block; pointer-events: none;
}
@media (prefers-reduced-motion: reduce) { .hero-canvas { display: none; } }

.hero-caption {
  position: relative; z-index: 3;
  display: grid;                       /* every panel shares cell 1/1 */
  min-height: clamp(480px, 66vh, 640px);
  padding-block: clamp(2.5rem, 5vh, 4rem) 7rem;   /* bottom clears the controls */
  pointer-events: none;
}
.hero-caption .wrap { width: 100%; }
.hero-text {
  max-width: 640px; color: #fff; pointer-events: auto;
  /* Insurance for the right-hand end of the longest lines, where the
     scrim has already thinned out to let the photograph through. */
  text-shadow: 0 1px 14px rgba(20,12,12,.55);
}
.hero-text h1 { color: #fff; margin-bottom: .5em; text-wrap: balance; }
.hero-text p { color: rgba(255,255,255,.9); font-size: clamp(1.05rem, 1.7vw, 1.28rem); margin-bottom: 1.8em; }
.hero-text .btn-row { pointer-events: auto; }

/* Captions must NOT cross-fade: two headlines at 50% opacity on top of each
   other is unreadable. The outgoing one clears out first, then the incoming one
   arrives — while the photographs behind keep their slow cross-fade. */
.hero-panel {
  grid-area: 1 / 1;                    /* stack, don't flow */
  display: flex; align-items: center;
  opacity: 0; visibility: hidden;
  transform: translateY(8px);
  transition: opacity .28s var(--ease), transform .28s var(--ease), visibility 0s .28s;
}
.hero-panel.is-active {
  opacity: 1; visibility: visible;
  transform: none;
  transition: opacity .5s var(--ease) .34s, transform .5s var(--ease) .34s, visibility 0s .34s;
}

.hero-controls {
  position: absolute; left: 0; right: 0; bottom: 1.75rem; z-index: 5;
}
.hero-controls .wrap { display: flex; align-items: center; gap: 1rem; }
.hero-dots { display: flex; gap: .55rem; }
.hero-dots button {
  width: 40px; height: 4px; border: 0; padding: 0; cursor: pointer; border-radius: 2px;
  background: rgba(255,255,255,.35); transition: background .2s var(--ease);
}
.hero-dots button:hover { background: rgba(255,255,255,.6); }
.hero-dots button[aria-selected="true"] { background: #fff; }
.hero-nav { display: flex; gap: .5rem; margin-left: auto; }
.hero-nav button {
  width: 42px; height: 42px; border-radius: 50%; cursor: pointer;
  background: rgba(255,255,255,.12); border: 1px solid rgba(255,255,255,.42); color: #fff;
  display: grid; place-items: center; font-size: 1rem; line-height: 1;
  transition: background .18s var(--ease);
}
.hero-nav button:hover { background: rgba(255,255,255,.28); }

@media (max-width: 860px) {
  .hero-slide::after {
    background: linear-gradient(180deg, rgba(38,25,25,.50) 0%, rgba(38,25,25,.70) 55%, rgba(38,25,25,.86) 100%);
  }
}
@media (max-width: 640px) {
  .hero-caption { min-height: clamp(420px, 62vh, 540px); padding-bottom: 4.5rem; }
  .hero-nav { display: none; }
}

/* ---------- page banner (inner pages) ---------- */
.page-banner {
  position: relative; overflow: hidden;
  background: #261919;
  color: #fff; padding: clamp(3.25rem, 6.5vw, 5.25rem) 0;
}
/* Photograph behind the page title, same treatment as the home hero. */
.page-banner-bg {
  position: absolute; inset: 0; width: 100%; height: 100%;
  object-fit: cover; object-position: var(--focus, 50% 40%);
  filter: brightness(1.16) saturate(1.04);
}
.page-banner::after {
  content: ""; position: absolute; inset: 0;
  background:
    linear-gradient(180deg, rgba(38,25,25,.26) 0%, rgba(38,25,25,0) 45%, rgba(38,25,25,.30) 100%),
    linear-gradient(90deg,  rgba(38,25,25,.93) 0%, rgba(38,25,25,.88) 34%, rgba(38,25,25,.72) 52%,
                            rgba(38,25,25,.40) 72%, rgba(38,25,25,.22) 100%);
}
.page-banner .wrap { position: relative; z-index: 2; }
/* Pages with no photograph keep the original gradient. */
.page-banner--plain {
  background-image: radial-gradient(900px 340px at 12% -10%, rgba(140,21,21,.50), transparent 62%),
                    radial-gradient(700px 300px at 88% 120%, rgba(87,98,213,.30), transparent 60%);
}
.page-banner--plain::after { display: none; }
.page-banner h1 { color: #fff; margin-bottom: .35em; }
.page-banner p { color: rgba(255,255,255,.82); max-width: 640px; font-size: 1.12rem; margin: 0; }
.breadcrumb { font-size: .85rem; color: rgba(255,255,255,.78); margin: 0 0 1rem; }
.breadcrumb a { color: rgba(255,255,255,.82); text-decoration: none; }
.breadcrumb a:hover { color: #fff; text-decoration: underline; }

/* ---------- grids & cards ---------- */
.grid { display: grid; gap: clamp(1.25rem, 2.5vw, 2rem); }
/* Genuinely two-up: a 300px minimum resolved to three columns at desktop
   width, which left a fourth card orphaned on its own row. */
.grid-2 { grid-template-columns: repeat(auto-fit, minmax(min(430px, 100%), 1fr)); }
.grid-3 { grid-template-columns: repeat(auto-fit, minmax(min(280px, 100%), 1fr)); }
.grid-4 { grid-template-columns: repeat(auto-fit, minmax(min(230px, 100%), 1fr)); }
/* auto-fill keeps the empty tracks, so a row holding one or two cards renders
   them at normal card width instead of stretching them across the row. */
.grid.grid--fill { grid-template-columns: repeat(auto-fill, minmax(min(230px, 100%), 1fr)); }

.card {
  background: var(--paper-card); border: 1px solid var(--line); border-radius: var(--radius);
  padding: 1.85rem; box-shadow: var(--shadow-sm);
  transition: transform .2s var(--ease), box-shadow .2s var(--ease), border-color .2s var(--ease);
  display: flex; flex-direction: column;
}
.card--link:hover { transform: translateY(-3px); box-shadow: var(--shadow-md); border-color: var(--primary-lt); }
.card h3 { margin-bottom: .5rem; }
.card p { color: var(--muted); font-size: .98rem; }
.card .arrow-link { margin-top: auto; padding-top: 1.1rem; }
/* Small standing note at the foot of a card, e.g. "Featured work coming soon". */
.card-note {
  margin-top: auto; padding-top: 1.1rem;
  border-top: 1px solid var(--line);
  font-size: .85rem; color: var(--muted);
}

.card-icon {
  width: 48px; height: 48px; border-radius: 10px; margin-bottom: 1.1rem;
  display: grid; place-items: center;
  background: var(--paper-tint); color: var(--primary-dk);
}
.card-icon svg { width: 24px; height: 24px; }

.card-feature {
  margin-top: auto; padding-top: 1.3rem; border-top: 1px solid var(--line);
}
.card-feature-media {
  border: 1px solid var(--line); border-radius: 10px; overflow: hidden;
  background: #fff; padding: .65rem; margin-bottom: 1.05rem;
}
.card-feature-media img {
  display: block; width: 100%; height: 100%;
  aspect-ratio: 4 / 3; object-fit: contain;
}
.card-feature h4 { font-size: 1.03rem; line-height: 1.35; margin-bottom: .5rem; }
.card-feature .cite { font-size: .84rem; margin-top: .6rem; }
.card-feature .btn-row { margin-top: 1.15rem; }

/* Cards whose featured work is not chosen yet: keep the image box and the
   button slot so the layout does not shift once content is added. */
.card-feature-media:empty { aspect-ratio: 4 / 3; }
.card-feature .btn-row:empty { min-height: 2.95rem; }

.card--num .num {
  display: block; font-family: var(--serif); font-size: 1.6rem; line-height: 1;
  color: var(--primary); opacity: .5; margin-bottom: .9rem;
}

/* The Collaboratory's own card in the AITC network row. */
.card--ours {
  border-color: var(--primary);
  border-width: 2px;
  box-shadow: 0 4px 18px rgba(140,21,21,.10);
}
.card--ours .card-flag {
  display: inline-block; font-size: .7rem; font-weight: 700; letter-spacing: .1em;
  text-transform: uppercase; color: #fff; background: var(--primary);
  padding: .25rem .6rem; border-radius: 4px; margin-bottom: .9rem;
}

/* stat band */
.stats { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(180px, 100%), 1fr)); gap: 2rem; }
.stat { text-align: center; }
.stat .fig {
  font-family: var(--serif); font-size: clamp(2.4rem, 5vw, 3.2rem);
  line-height: 1; color: var(--primary-lt); display: block; margin-bottom: .35rem;
}
.stat .lbl { font-size: .92rem; color: rgba(255,255,255,.76); letter-spacing: .02em; }

/* split feature */
.split { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(320px, 100%), 1fr)); gap: clamp(2rem, 5vw, 4rem); align-items: center; }
.split-media img { border-radius: var(--radius); box-shadow: var(--shadow-md); }
.split--rev .split-media { order: 2; }
@media (max-width: 719px) { .split--rev .split-media { order: 0; } }

/* people */
.person { text-align: left; }
.person-photo {
  aspect-ratio: 1/1; border-radius: var(--radius); overflow: hidden; margin-bottom: 1rem;
  background: linear-gradient(150deg, var(--paper-tint), var(--primary-lt));
  display: grid; place-items: center;
}
.person-photo img { width: 100%; height: 100%; object-fit: cover; }
.person-photo .initials {
  font-family: var(--sans); font-size: 1.15rem; font-weight: 700;
  letter-spacing: .14em; color: var(--primary-dk); opacity: .5;
}
.person h3 { font-size: 1.12rem; margin-bottom: .15rem; }
.person .role { font-size: .92rem; color: var(--primary-dk); font-weight: 600; margin: 0 0 .3rem; }
.person .affil { font-size: .88rem; color: var(--muted); margin: 0; }

/* list / news */
.item-list { list-style: none; margin: 0; padding: 0; }
.item {
  display: grid; grid-template-columns: 130px 1fr; gap: 1.75rem;
  padding: 1.75rem 0; border-bottom: 1px solid var(--line); align-items: start;
}
.item:first-child { padding-top: 0; }
.item .meta { font-size: .86rem; color: var(--muted); }
.item .tag {
  display: inline-block; font-size: .72rem; font-weight: 700; letter-spacing: .08em;
  text-transform: uppercase; color: var(--primary-dk); background: var(--paper-tint);
  padding: .25rem .6rem; border-radius: 4px; margin-bottom: .5rem;
}
.item .tag--event { color: var(--accent); background: #eef0fb; }
.item h3 { font-size: 1.22rem; margin-bottom: .35rem; }
.item p { color: var(--muted); font-size: .98rem; margin-bottom: .6rem; }
@media (max-width: 640px) { .item { grid-template-columns: 1fr; gap: .6rem; } }

/* callout / cta band */
.cta-band {
  background: linear-gradient(115deg, #5e0d0d 0%, var(--primary) 55%, #a82424 100%);
  color: #fff; border-radius: var(--radius); padding: clamp(2.25rem, 4.5vw, 3.5rem);
  display: grid; grid-template-columns: 1fr auto; gap: 2rem; align-items: center;
}
.cta-band h2, .cta-band h3 { color: #fff; margin-bottom: .4rem; }
.cta-band p { color: rgba(255,255,255,.88); margin: 0; max-width: 620px; }
@media (max-width: 800px) { .cta-band { grid-template-columns: 1fr; } }

.callout {
  border-left: 4px solid var(--primary); background: var(--paper-alt);
  padding: 1.4rem 1.6rem; border-radius: 0 var(--radius) var(--radius) 0; margin: 2rem 0;
}
.callout p:last-child { margin-bottom: 0; }
.callout--accent { border-left-color: var(--accent); }

/* accordion (cores / faq) */
.acc { border: 1px solid var(--line); border-radius: var(--radius); overflow: hidden; background: var(--paper-card); }
.acc + .acc { margin-top: 1rem; }
.acc summary {
  cursor: pointer; list-style: none; padding: 1.35rem 1.6rem;
  font-family: var(--serif); font-size: 1.22rem; font-weight: 600; color: var(--ink);
  display: flex; align-items: center; gap: 1rem;
}
.acc summary::-webkit-details-marker { display: none; }
.acc summary::after {
  content: "+"; margin-left: auto; font-family: var(--sans); font-weight: 400;
  font-size: 1.6rem; line-height: 1; color: var(--primary); transition: transform .2s var(--ease);
}
.acc[open] summary::after { transform: rotate(45deg); }
.acc summary:hover { background: var(--paper-alt); }
.acc .acc-body { padding: 0 1.6rem 1.6rem; }
.acc .acc-body p { color: var(--muted); }
.core-tag {
  font-size: .7rem; font-weight: 700; letter-spacing: .1em; text-transform: uppercase;
  color: #fff; background: var(--primary); padding: .3rem .55rem; border-radius: 4px; flex-shrink: 0;
}

/* prose lists */
.tick { list-style: none; padding: 0; margin: 0 0 1.2rem; }
.tick li { position: relative; padding-left: 1.75rem; margin-bottom: .7rem; }
.tick li::before {
  content: ""; position: absolute; left: 0; top: .52em;
  width: 8px; height: 8px; border-radius: 50%; background: var(--primary);
}
.section--ink .tick li { color: rgba(255,255,255,.82); }
.section--ink .tick li::before { background: var(--primary-lt); }

/* partner logos row */
.partners { display: flex; flex-wrap: wrap; gap: .75rem 1rem; justify-content: center; }
.partner {
  border: 1px solid var(--line); background: var(--paper-card); border-radius: 6px;
  padding: .8rem 1.35rem; font-size: .94rem; font-weight: 600; color: var(--ink-soft);
}

/* form */
.form-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(240px, 100%), 1fr)); gap: 1.25rem; }
.field { display: flex; flex-direction: column; gap: .4rem; }
.field--full { grid-column: 1 / -1; }
.field label { font-size: .9rem; font-weight: 600; }
.field input, .field select, .field textarea {
  font: inherit; font-size: .98rem; padding: .7rem .85rem;
  border: 1px solid var(--line); border-radius: 6px; background: var(--paper-card); color: var(--ink);
}
.field textarea { min-height: 150px; resize: vertical; }
.field input:focus, .field select:focus, .field textarea:focus { border-color: var(--primary); }
.form-note { font-size: .86rem; color: var(--muted); }

/* table */
.table-scroll { overflow-x: auto; -webkit-overflow-scrolling: touch; }
table { width: 100%; border-collapse: collapse; font-size: .96rem; min-width: 560px; }
th, td { text-align: left; padding: .9rem 1rem; border-bottom: 1px solid var(--line); vertical-align: top; }
th { font-family: var(--sans); font-size: .8rem; letter-spacing: .07em; text-transform: uppercase; color: var(--muted); }

/* ---------- footer ---------- */
.site-footer { background: var(--ink); color: rgba(255,255,255,.7); padding: clamp(3rem, 5vw, 4.5rem) 0 0; font-size: .94rem; }
.footer-grid { display: grid; grid-template-columns: 1.6fr repeat(3, 1fr); gap: 2.5rem; padding-bottom: 3rem; }
@media (max-width: 900px) { .footer-grid { grid-template-columns: 1fr 1fr; } }
@media (max-width: 560px) { .footer-grid { grid-template-columns: 1fr; } }
.footer-logo { height: 54px; width: auto; margin-bottom: 1.2rem; }
.site-footer h4 {
  color: #fff; font-family: var(--sans); font-size: .8rem; font-weight: 700;
  letter-spacing: .12em; text-transform: uppercase; margin-bottom: 1rem;
}
.site-footer ul { list-style: none; margin: 0; padding: 0; }
.site-footer li { margin-bottom: .55rem; }
.site-footer a { color: rgba(255,255,255,.72); text-decoration: none; }
.site-footer a:hover { color: #fff; text-decoration: underline; }
.footer-bottom {
  border-top: 1px solid rgba(255,255,255,.13); padding: 1.5rem 0;
  display: flex; flex-wrap: wrap; gap: .75rem 2rem; justify-content: space-between;
  font-size: .85rem; color: rgba(255,255,255,.55);
}
.footer-bottom ul { display: flex; flex-wrap: wrap; gap: 1.25rem; }
.funding {
  font-size: .84rem; color: rgba(255,255,255,.6); line-height: 1.55;
  border-top: 1px solid rgba(255,255,255,.13); padding: 1.5rem 0; margin: 0;
}

/* ---------- motion preference ---------- */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: .001ms !important; animation-iteration-count: 1 !important;
    transition-duration: .001ms !important;
  }
}

/* ---------- print ---------- */
@media print {
  .site-header, .topbar, .hero-controls, .site-footer, .nav-toggle { display: none !important; }
  body { font-size: 11pt; }
}

/* ---------- scroll reveal (only active once JS flags support) ---------- */
.has-reveal [data-reveal] {
  opacity: 0;
  transform: translateY(18px);
  transition: opacity .6s var(--ease) var(--reveal-delay, 0ms),
              transform .6s var(--ease) var(--reveal-delay, 0ms);
  will-change: opacity, transform;
}
.has-reveal [data-reveal].is-in { opacity: 1; transform: none; }

/* ---------- sticky header elevation ---------- */
.site-header { transition: box-shadow .2s var(--ease); }
.site-header.is-stuck { box-shadow: 0 2px 16px rgba(39,33,60,.09); }