/* ==========================================================================
   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:        #111111;   /* stanford.edu body text */
  --ink-soft:   #444442;   /* between body text and subtle */
  --surface-dark: #27213c; /* AITC dark plum, kept for dark panels */
  --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:  #eeeee847; /* alternating sections, translucent */
  --paper-alt-solid: #eeeee8; /* the same tint, opaque, for borders and surfaces */
  --paper-card: #ffffff;   /* card surfaces */
  --paper-tint: #f7eded;
  --line:       #e8dcdc;
  --muted:      #767674;   /* stanford.edu subtle text */

  /* Source Sans 3 and Source Serif 4 are both SIL Open Font License 1.1,
     free to use and serve commercially. stanford.edu's display serif is
     "edict", which is licensed to Stanford alone, so it is deliberately NOT
     named here; Source Serif 4 stands in ahead of the same Georgia fallback
     stanford.edu itself declares. Do not add edict to this stack. */
  --serif: "Source Serif 4", Georgia, Cambria, "Times New Roman", Times, serif;
  --sans:  "Source Sans 3", "Helvetica Neue", 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.25rem;      /* 20px, stanford.edu body */
  line-height: 1.5;        /* 30px */
  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 { color: var(--ink); margin: 0 0 .6em; }
/* Display sizes run on the serif, like stanford.edu's big section headings. */
h1, h2 { font-family: var(--serif); font-weight: 600; line-height: 1.1; letter-spacing: -.01em; }
h1 { font-size: clamp(2.5rem, 5vw, 4rem); }      /* 40 to 64px */
h2 { font-size: clamp(2rem, 3.6vw, 3.2rem); }    /* 32 to 51px */
/* Card and list titles run on the sans at 500, also like stanford.edu. */
h3, h4 { font-family: var(--sans); font-weight: 500; line-height: 1.2; letter-spacing: normal; }
h3 { font-size: 1.5rem; }                        /* 24px */
h4 { font-size: 1.25rem; }                       /* 20px */
p  { margin: 0 0 1.1em; line-height: 1.4; }
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(--surface-dark); 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: .875rem; 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.25rem, 1.8vw, 1.5rem); line-height: 1.4; 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(--surface-dark); 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: 1rem; 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; }
/* two buttons sharing one line inside a narrow card */
.btn-row--split { flex-wrap: nowrap; justify-content: center; }
.btn-row--split .btn { flex: 1 1 0; white-space: nowrap; }

.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(--primary); color: rgba(255,255,255,.82);
  font-size: .875rem; 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: .8125rem; }
  .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: 1rem; 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: .9375rem; 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-solid); 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.25rem, 1.8vw, 1.5rem); 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.25rem; margin: 0; }
.breadcrumb { font-size: .875rem; 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: 1rem; }
.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: .875rem; 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.125rem; line-height: 1.3; margin-bottom: .5rem; }
.card-feature .cite { font-size: .875rem; 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; }

/* Landscape figures: a 16:9 box instead of 4:3 */
.card-feature-media--wide img, .card-feature-media--wide:empty { aspect-ratio: 16 / 9; }
.card-feature .cite a { color: inherit; text-decoration: underline; text-underline-offset: 2px; }

.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: 1rem; 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.125rem; font-weight: 700;
  letter-spacing: .14em; color: var(--primary-dk); opacity: .5;
}
.person h3 { font-size: 1.25rem; margin-bottom: .15rem; }
.person .role { font-size: 1rem; color: var(--primary-dk); font-weight: 600; margin: 0 0 .3rem; }
.person .affil { font-size: .9375rem; 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: .9375rem; 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.5rem; margin-bottom: .35rem; }
.item p { color: var(--muted); font-size: 1rem; 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-solid);
  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); }

/* embedded third-party form */
.form-embed iframe {
  display: block; width: 100%; height: min(135vh, 1400px); border: 1px solid var(--line);
  border-radius: var(--radius); background: var(--paper-card); margin-top: 1rem;
}

/* embedded recording */
.video-embed {
  margin-top: 1.4rem; border: 1px solid var(--line); border-radius: var(--radius);
  overflow: hidden; background: var(--surface-dark);
}
.video-embed iframe { display: block; width: 100%; aspect-ratio: 16 / 9; border: 0; }

/* three calls to action sitting directly under the hero, each with a
   medallion straddling its top edge */
/* dark aside: points at something that lives off this site, so it reads as an
   aside rather than as one more card on the page. */
.dark-note {
  background: var(--surface-dark); color: #fff; border-radius: var(--radius);
  padding: clamp(1.6rem, 3vw, 2.1rem) clamp(1.6rem, 3vw, 2.25rem);
  display: grid; grid-template-columns: 1fr auto; gap: 1.6rem; align-items: center;
  margin-top: 2rem;
}
.dark-note h3 { color: #fff; font-size: 1.2rem; line-height: 1.25; margin-bottom: .45rem; }
.dark-note p { color: rgba(255,255,255,.8); margin: 0; max-width: 620px; }
@media (max-width: 760px) { .dark-note { grid-template-columns: 1fr; } }

.action-strip { display: grid; grid-template-columns: repeat(3, 1fr); gap: clamp(1.25rem, 2vw, 1.75rem); }
@media (max-width: 900px) { .action-strip { grid-template-columns: 1fr; } }
.action-box {
  position: relative; display: flex; flex-direction: column; text-align: center;
  background: linear-gradient(175deg, var(--paper-alt-solid) 0%, var(--paper-card) 55%);
  border: 1px solid var(--line); border-radius: var(--radius);
  padding: 3.1rem 1.7rem 1.7rem; box-shadow: var(--shadow-sm);
  transition: transform .25s var(--ease), box-shadow .25s var(--ease),
              border-color .25s var(--ease);
}
.action-box:hover {
  transform: translateY(-4px); box-shadow: var(--shadow-md); border-color: var(--primary-lt);
}
.action-medal {
  position: absolute; top: 0; left: 50%; transform: translate(-50%, -50%);
  width: 68px; height: 68px; border-radius: 50%; margin: 0;
  background: linear-gradient(145deg, #a82424, var(--primary) 55%, #6d1010);
  color: #fff; line-height: 1;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  box-shadow: 0 3px 12px rgba(140, 21, 21, .32);
  transition: transform .25s var(--ease), box-shadow .25s var(--ease);
}
.action-box:hover .action-medal {
  transform: translate(-50%, -50%) scale(1.07);
  box-shadow: 0 5px 18px rgba(140, 21, 21, .42);
}
.action-medal svg { width: 30px; height: 30px; }
.action-medal .m {
  font-family: var(--sans); font-size: .64rem; font-weight: 700;
  letter-spacing: .14em; text-transform: uppercase; color: #fff; margin-bottom: .14rem;
}
.action-medal .d { font-family: var(--serif); font-size: 1.62rem; font-weight: 600; color: #fff; }
.action-box .eyebrow { margin-bottom: .4rem; }
.action-box h3 { font-size: 1.25rem; line-height: 1.2; margin-bottom: .55rem; }
.action-box p { color: var(--muted); font-size: 1rem; margin-bottom: 0; }
.action-box .btn-row { margin-top: auto; padding-top: 1.5rem; }
.action-box .btn { width: 100%; justify-content: center; text-align: center; }
@media (prefers-reduced-motion: reduce) {
  .action-box:hover, .action-box:hover .action-medal { transform: none; }
  .action-box:hover .action-medal { transform: translate(-50%, -50%); }
}

/* event page: body column beside a sticky details card */
.event-grid { display: grid; grid-template-columns: 1fr 340px; gap: clamp(2rem, 4vw, 3.5rem); align-items: start; }
@media (max-width: 900px) { .event-grid { grid-template-columns: 1fr; } }
.tag-row { display: flex; flex-wrap: wrap; gap: .5rem; margin-bottom: 1.4rem; }
.tag-row .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;
}
.tag-row .tag--event { color: var(--accent); background: #eef0fb; }
.event-card {
  background: var(--paper-card); border: 1px solid var(--line); border-radius: var(--radius);
  padding: 1.75rem; box-shadow: var(--shadow-sm); position: sticky; top: 100px;
}
@media (max-width: 900px) { .event-card { position: static; } }
.event-when + .event-when { margin-top: 1.4rem; }
.event-when p, .event-add p { margin: 0; }
.event-date { font-family: var(--serif); font-size: 1.25rem; font-weight: 600; color: var(--ink); }
.event-time { font-size: 1rem; color: var(--ink-soft); margin-top: .25rem; }
.event-time .muted, .event-add .muted { color: var(--muted); }
.event-card .btn { width: 100%; justify-content: center; text-align: center; }
.qr { margin: 1.6rem 0 0; text-align: center; }
.qr img {
  display: block; width: 100%; max-width: 190px; height: auto; margin: 0 auto;
  border: 1px solid var(--line); border-radius: 8px; padding: .5rem; background: #fff;
}
.qr figcaption { font-size: .9375rem; color: var(--muted); margin-top: .6rem; }
.event-add { margin-top: 1.6rem; padding-top: 1.4rem; border-top: 1px solid var(--line); }
.event-add p { font-size: 1rem; line-height: 1.9; }

/* document card + inline PDF reader */
.doc-card {
  display: grid; grid-template-columns: 220px 1fr; gap: 2rem; align-items: start;
  margin-top: 2.75rem; padding: 1.75rem; background: var(--paper-card);
  border: 1px solid var(--line); border-radius: var(--radius); box-shadow: var(--shadow-sm);
}
.doc-card-thumb { display: block; border: 1px solid var(--line); border-radius: 6px; overflow: hidden; }
.doc-card-thumb img { display: block; width: 100%; height: auto; }
.doc-card-thumb:hover { border-color: var(--primary); }
.doc-card-body h3 { margin-bottom: .5rem; }
.doc-card-body p { color: var(--muted); font-size: 1rem; }
@media (max-width: 680px) {
  .doc-card { grid-template-columns: 1fr; gap: 1.5rem; }
  .doc-card-thumb { max-width: 220px; }
}
.doc-embed iframe {
  display: block; width: 100%; height: min(78vh, 900px);
  border: 1px solid var(--line); border-radius: 6px; background: var(--paper-alt-solid);
}
/* Phone browsers mostly refuse to render a PDF inside a page, and a tall empty
   box is worse than no box. Below this width the download buttons are the offer. */
@media (max-width: 680px) { .doc-embed { display: none; } }

/* 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(--sans); font-size: 1.5rem; font-weight: 500; 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-solid); }
.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;
}

/* question and answer accordion: the summary is a sentence, not a heading, so it
   wraps and sits a size below the core titles that share the .acc shell. */
.acc--qa summary {
  font-size: 1.0625rem; font-weight: 600; line-height: 1.45;
  padding: 1.05rem 1.3rem; align-items: flex-start; gap: .9rem;
}
.acc--qa summary::after { font-size: 1.35rem; line-height: 1.4; }
.acc--qa .acc-body { padding: 0 1.3rem 1.3rem; }
.acc--qa + .acc--qa { margin-top: .7rem; }

/* contents grid for a long question and answer page: each topic is a card that
   carries its number and how many questions sit under it. */
.qa-topics {
  display: grid; gap: .9rem; margin-top: 2.25rem;
  grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
}
.qa-topics a {
  display: grid; grid-template-columns: auto 1fr; gap: .15rem 1rem; align-items: baseline;
  text-decoration: none; background: var(--paper-card);
  border: 1px solid var(--line); border-left: 3px solid var(--line);
  border-radius: var(--radius); padding: 1.05rem 1.25rem;
  transition: border-color .2s var(--ease), transform .2s var(--ease);
}
.qa-topics a:hover, .qa-topics a:focus-visible {
  border-color: var(--primary); transform: translateY(-2px);
}
.qa-topics .n {
  grid-row: 1 / span 2; font-family: var(--sans); font-size: .8125rem; font-weight: 700;
  letter-spacing: .06em; color: var(--primary);
}
.qa-topics .t {
  font-family: var(--sans); font-size: 1.02rem; font-weight: 600;
  color: var(--ink); line-height: 1.35;
  /* two lines' worth, so the counts line up across the row whether or not a
     topic name wraps */
  min-height: 2.7em;
}
@media (max-width: 560px) { .qa-topics .t { min-height: 0; } }
.qa-topics .c { font-size: .8625rem; color: var(--muted); }

/* 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: 1rem; 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: .9375rem; font-weight: 600; }
.field input, .field select, .field textarea {
  font: inherit; font-size: 1rem; 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: .9375rem; color: var(--muted); }

/* table */
.table-scroll { overflow-x: auto; -webkit-overflow-scrolling: touch; }
table { width: 100%; border-collapse: collapse; font-size: 1rem; 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: .875rem; letter-spacing: .07em; text-transform: uppercase; color: var(--muted); }

/* ---------- footer ---------- */
.site-footer { background: var(--primary); color: rgba(255,255,255,.82); padding: clamp(3rem, 5vw, 4.5rem) 0 0; font-size: 1rem; }
.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: .875rem; 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,.82); text-decoration: none; }
.site-footer a:hover { color: #fff; text-decoration: underline; }
.footer-bottom {
  border-top: 1px solid rgba(255,255,255,.22); padding: 1.5rem 0;
  display: flex; flex-wrap: wrap; gap: .75rem 2rem; justify-content: space-between;
  font-size: .9375rem; color: rgba(255,255,255,.75);
}
.footer-bottom ul { display: flex; flex-wrap: wrap; gap: 1.25rem; }
.funding {
  font-size: .9375rem; color: rgba(255,255,255,.75); line-height: 1.5;
  border-top: 1px solid rgba(255,255,255,.22); 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); }