@import url('https://fonts.googleapis.com/css2?family=Poppins:ital,wght@0,400;0,500;0,700;1,400;1,500;1,700&family=Inter:wght@400;500;600&display=swap');

:root {
  /* refined monochrome — warm off-white on near-black reads richer than pure #FFF on #000 */
  --ink: #0a0a0b;
  --ink-raised: #111113;
  --paper: #f4f2ef;
  --paper-dim: #b9b6b1;
  --paper-faint: #8a8783;
  --hair: rgba(244,242,239,0.11);
  --hair-strong: rgba(244,242,239,0.28);
  --ease: cubic-bezier(0.22, 1, 0.36, 1);
  /* unified vertical rhythm — no more stacked padding+margin */
  /* strict 8px scale — every vertical value below is a multiple of 8 */
  --sp-1: 8px;
  --sp-2: 16px;
  --sp-3: 24px;
  --sp-4: 40px;
  --sp-5: 64px;
  --sp-6: 96px;
  --gut: 24px;
  /* border opacity tiers so everything doesn't blend into one grey */
  --line-strong: rgba(244,242,239,0.26);
  --line-mid:    rgba(244,242,239,0.14);
  --line-soft:   rgba(244,242,239,0.07);
}

* { box-sizing: border-box; }
html { scroll-behavior: auto; }

body {
  margin: 0;
  overflow-x: hidden;
  background: var(--ink);
  color: var(--paper);
  font-family: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif;
  font-size: 17px;
  line-height: 1.65;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}

/* film grain — biggest single perceived-quality upgrade on dark sites */
body::after {
  content: "";
  position: fixed;
  /* oversized on purpose: the drift animation translates this up to 5%,
     and a viewport-sized layer would leave un-grained strips flashing
     along the edges each time it moved */
  top: -10%; left: -10%;
  width: 120%; height: 120%;
  pointer-events: none;
  z-index: 9999;
  opacity: 0.03;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='240' height='240'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='4'/%3E%3C/filter%3E%3Crect width='240' height='240' filter='url(%23n)'/%3E%3C/svg%3E");
}

a { color: inherit; }

.wordmark {
  font-family: 'Poppins', sans-serif;
  font-weight: 500;
  font-style: italic;
  letter-spacing: -0.02em;
  text-decoration: none;
  display: inline-block;
}

.wrap {
  width: 100%;
  max-width: clamp(1080px, 78vw, 1400px);
  margin: 0 auto;
  padding: 0 40px;
}
.wrap-narrow { max-width: 760px; }

/* ---------------- floating pill nav ---------------- */
.navbar {
  position: fixed;
  top: 18px;
  left: 50%;
  transform: translateX(-50%) translateY(0);
  z-index: 100;
  width: min(690px, calc(100% - 32px));
  border-radius: 999px;
  background: rgba(16,16,18,0.94);
  border: 1px solid rgba(244,242,239,0.20);
  box-shadow:
    0 1px 1px rgba(0,0,0,0.25),
    0 10px 34px rgba(0,0,0,0.38),
    inset 0 1px 0 rgba(255,255,255,0.06);
  backdrop-filter: blur(18px) saturate(170%);
  -webkit-backdrop-filter: blur(18px) saturate(170%);
  transition: box-shadow 0.5s var(--ease), background 0.5s var(--ease),
              border-color 0.5s var(--ease), width 0.5s var(--ease),
              transform 0.5s var(--ease);
}
/* subtle top sheen — the "liquid glass" highlight */
.navbar::before {
  content: "";
  position: absolute;
  top: 0; left: 14%; right: 14%;
  height: 1px;
  background: linear-gradient(90deg, transparent, rgba(255,255,255,0.35), transparent);
  border-radius: 999px;
  pointer-events: none;
}
.navbar.stuck {
  width: min(628px, calc(100% - 32px));
  background: rgba(13,13,15,0.97);
  border-color: rgba(244,242,239,0.26);
  box-shadow:
    0 1px 1px rgba(0,0,0,0.3),
    0 14px 40px rgba(0,0,0,0.48),
    inset 0 1px 0 rgba(255,255,255,0.07);
}
@supports not (backdrop-filter: blur(1px)) {
  .navbar { background: rgba(12,12,13,0.94); }
  .navbar.stuck { background: rgba(10,10,11,0.97); }
}

.navbar .bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 26px;
  padding: 9px 10px 9px 22px;
  transition: padding 0.5s var(--ease);
}
.navbar.stuck .bar { padding: 8px 9px 8px 20px; }
.navbar .wordmark {
  font-size: 19px;
  transition: font-size 0.5s var(--ease), opacity 0.3s var(--ease);
  flex: 0 0 auto;
}
.navbar.stuck .wordmark { font-size: 18px; }

/* hairline divider between mark and links */
.nav-sep {
  width: 1px;
  height: 18px;
  background: var(--hair-strong);
  flex: 0 0 auto;
  opacity: 0.7;
}

/* the links sit in a track with a sliding pill behind the active one */
/* the pill is fixed at top:18px and ~59px tall, so page content must start below it */
.page-shell { padding-top: 96px; }
@media (max-width: 640px) { .page-shell { padding-top: 84px; } }

.mainnav {
  position: relative;
  display: flex;
  align-items: center;
  gap: 2px;
  flex: 0 0 auto;
}
.nav-pill {
  position: absolute;
  top: 0; left: 0;
  height: 100%;
  border-radius: 999px;
  background: rgba(244,242,239,0.085);
  border: 1px solid rgba(244,242,239,0.07);
  opacity: 0;
  transform-origin: left;
  pointer-events: none;
  transition: transform 0.52s var(--ease), width 0.52s var(--ease), opacity 0.35s var(--ease);
  z-index: 0;
}
.nav-pill.ready { opacity: 1; }

.mainnav a {
  position: relative;
  z-index: 1;
  text-decoration: none;
  font-size: 13px;
  letter-spacing: 0.01em;
  color: var(--paper-faint);
  padding: 7px 15px;
  border-radius: 999px;
  white-space: nowrap;
  transition: color 0.3s var(--ease);
}
.mainnav a::after { display: none; }
.mainnav a:hover { color: var(--paper-dim); }
.mainnav a.active { color: var(--paper); }
.mainnav a:focus-visible { outline: 2px solid var(--paper); outline-offset: 2px; }

.nav-toggle {
  display: none;
  background: none;
  border: 1px solid var(--hair-strong);
  color: var(--paper);
  font-family: 'Inter', sans-serif;
  font-size: 13px;
  padding: 9px 16px;
  border-radius: 999px;
  cursor: pointer;
}

/* ---------------- hero ---------------- */
.hero { position: relative; padding: 76px 0 108px; }

.hero .spine {
  position: absolute;
  left: -24px; top: 10px; bottom: 10px;
  width: 2px;
  background: linear-gradient(180deg, var(--paper) 0%, rgba(244,242,239,0.15) 100%);
  transform-origin: top;
  transform: scaleY(0);
  animation: drawSpine 1.1s var(--ease) 0.15s forwards;
}
@keyframes drawSpine { to { transform: scaleY(1); } }

.hero-inner { padding-left: 54px; max-width: 780px; position: relative; z-index: 2; }

.ghost-quote {
  position: absolute;
  right: -70px; top: -170px;
  font-family: 'Poppins', sans-serif;
  font-weight: 700;
  font-style: italic;
  font-size: 520px;
  line-height: 1;
  color: rgba(244,242,239,0.045);
  z-index: 0;
  user-select: none;
  pointer-events: none;
  will-change: transform;
}

.eyebrow {
  font-family: 'Inter', sans-serif;
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--paper-faint);
  margin: 0 0 20px;
}

h1.headline {
  font-family: 'Poppins', sans-serif;
  font-weight: 500;
  font-style: italic;
  font-size: clamp(42px, 6.4vw, 76px);
  line-height: 1.11;
  letter-spacing: -0.035em;
  margin: 0 0 30px;
}

.lede {
  font-size: 19px;
  line-height: 1.7;
  color: var(--paper-dim);
  max-width: 580px;
  margin: 0 0 40px;
}

/* staggered load-in */
.js-on .rise { opacity: 0; transform: translateY(22px); animation: rise 0.9s var(--ease) forwards; }
.js-on .rise.d1 { animation-delay: 0.30s; }
.js-on .rise.d2 { animation-delay: 0.42s; }
.js-on .rise.d3 { animation-delay: 0.54s; }
.js-on .rise.d4 { animation-delay: 0.66s; }
@keyframes rise { to { opacity: 1; transform: translateY(0); } }

/* ---------------- buttons ---------------- */
.btn-row { display: flex; gap: 14px; flex-wrap: wrap; }

.btn {
  --btn-fg: var(--ink);
  --btn-bg: var(--paper);
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 15px 30px;
  border-radius: 999px;
  background: var(--btn-bg);
  color: var(--btn-fg);
  border: 1px solid transparent;
  font-family: 'Inter', sans-serif;
  font-size: 15px;
  font-weight: 500;
  text-decoration: none;
  transition: transform 0.35s var(--ease), background 0.3s var(--ease), border-color 0.3s var(--ease), color 0.3s var(--ease);
}
.btn .arw { display: inline-block; transition: transform 0.4s var(--ease); }
.btn:hover { transform: translateY(-2px); }
.btn:hover .arw { transform: translateX(5px); }
.btn:focus-visible { outline: 2px solid var(--paper); outline-offset: 4px; }

.btn-ghost {
  --btn-bg: transparent;
  --btn-fg: var(--paper);
  border-color: var(--hair-strong);
}
.btn-ghost:hover { border-color: var(--paper); }

/* ---------------- hero byline ---------------- */
.byline {
  margin: var(--sp-6) 0 0;
  padding-top: var(--sp-3);
  border-top: 1px solid var(--line-soft);
  max-width: 470px;
  font-size: 14.5px;
  line-height: 1.6;
  color: var(--paper-dim);
}

/* ---------------- sections ---------------- */
.sec { padding: var(--sp-5) 0; }
.sec-tight { padding: var(--sp-3) 0 var(--sp-5); }

.sec-head {
  display: flex;
  align-items: baseline;
  gap: 20px;
  margin-bottom: 40px;
  padding-bottom: var(--sp-2);
  border-bottom: 1px solid var(--line-mid);
}
h2.sec-title {
  font-family: 'Poppins', sans-serif;
  font-weight: 500;
  font-style: italic;
  font-size: clamp(26px, 3.4vw, 38px);
  letter-spacing: -0.03em;
  margin: 0;
}
.sec-count {
  font-family: 'Inter', sans-serif;
  font-size: 12px;
  letter-spacing: 0.12em;
  color: var(--paper-faint);
  margin-left: auto;
  white-space: nowrap;
}

/* ---------------- quote cards ---------------- */
.qgrid { display: grid; grid-template-columns: repeat(2, 1fr); gap: var(--sp-3); }

.qcard {
  position: relative;
  padding: 40px 32px;
  background: var(--ink-raised);
  border: 1px solid var(--line-soft);
  transition: background 0.4s var(--ease), border-color 0.4s var(--ease), transform 0.45s var(--ease);
}
.qcard::before, .qcard::after {
  content: "";
  position: absolute;
  width: 20px; height: 20px;
  border-color: var(--paper);
  border-style: solid;
  border-width: 0;
  transition: width 0.45s var(--ease), height 0.45s var(--ease);
}
.qcard::before { top: -1px; left: -1px; border-top-width: 2px; border-left-width: 2px; }
.qcard::after { bottom: -1px; right: -1px; border-bottom-width: 2px; border-right-width: 2px; }
.qcard:hover { border-color: var(--hair-strong); transform: translateY(-3px); }
.qcard:hover::before, .qcard:hover::after { width: 36px; height: 36px; }

.qcard p {
  font-family: 'Poppins', sans-serif;
  font-weight: 400;
  font-style: italic;
  font-size: 20px;
  line-height: 1.55;
  letter-spacing: -0.015em;
  margin: 0;
}

/* pull-quote — one oversized statement, used sparingly */
.pull {
  font-family: 'Poppins', sans-serif;
  font-weight: 500;
  font-style: italic;
  font-size: clamp(28px, 4.2vw, 46px);
  line-height: 1.22;
  letter-spacing: -0.03em;
  max-width: 900px;
  margin: 0;
  padding: var(--sp-5) 0;
  border-top: 1px solid var(--line-mid);
  border-bottom: 1px solid var(--line-mid);
}
.pull .src {
  display: block;
  margin-top: 26px;
  font-family: 'Inter', sans-serif;
  font-style: normal;
  font-weight: 400;
  font-size: 13px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--paper-faint);
}

/* ---------------- resources ---------------- */
.res-item {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 28px;
  padding: 30px 0;
  border-bottom: 1px solid var(--hair);
  transition: padding-left 0.4s var(--ease);
}
.res-item:hover { padding-left: 10px; }
.res-item h3 {
  font-family: 'Inter', sans-serif;
  font-weight: 600;
  font-size: 18px;
  letter-spacing: -0.01em;
  margin: 0 0 7px;
}
.res-item p { margin: 0; color: var(--paper-dim); font-size: 15px; max-width: 560px; }

.res-item .tag {
  font-size: 11px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--paper-faint);
  white-space: nowrap;
  padding-top: 4px;
}
.empty-note {
  max-width: 62ch;
  color: var(--paper-faint);
  font-family: 'Poppins', sans-serif;
  font-style: italic;
  font-size: 16px;
}

/* ---------------- about ---------------- */
.about-copy { font-size: 19px; line-height: 1.8; max-width: 700px; color: var(--paper-dim); }
.about-copy p { margin: 0 0 26px; }
.about-copy p:first-child {
  font-family: 'Poppins', sans-serif;
  font-style: italic;
  font-size: 24px;
  line-height: 1.5;
  color: var(--paper);
  letter-spacing: -0.02em;
}

/* ---------------- footer ---------------- */
.site-footer {
  border-top: 1px solid var(--line-mid);
  margin-top: var(--sp-6);
  padding: var(--sp-4) 0 var(--sp-5);
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 18px;
}
.site-footer .wordmark { font-size: 18px; }
.site-footer p { color: var(--paper-faint); font-size: 13px; margin: 0; }

/* ---------------- scroll reveal ---------------- */
/* only hide reveal content once JS confirms it can bring it back */
.js-on .reveal { opacity: 0; transform: translateY(26px); transition: opacity 0.85s var(--ease), transform 0.85s var(--ease); }
.js-on .reveal.in { opacity: 1; transform: none; }

/* ---------------- responsive ---------------- */
@media (max-width: 860px) { .qgrid { grid-template-columns: 1fr; } }

@media (max-width: 640px) {
  .wrap { padding: 0 24px; }
  .nav-toggle { display: inline-block; }
  .navbar .bar { position: relative; }
  .mainnav {
    display: none;
    position: absolute;
    top: 62px; left: -24px; right: -24px;
    background: rgba(10,10,11,0.97);
    backdrop-filter: blur(14px);
    border-top: 1px solid var(--hair);
    border-bottom: 1px solid var(--hair);
    flex-direction: column;
    gap: 20px;
    padding: 22px 24px 26px;
  }
  .mainnav.open { display: flex; }
  .hero { padding: var(--sp-4) 0 var(--sp-5); }
  .ghost-quote { font-size: 260px; top: -70px; right: -50px; }
  .sec { padding: 60px 0; }
  .qcard { padding: 34px 26px; }
  .qcard p { font-size: 18px; }
  .pull { padding: 44px 0; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: 0.001s !important; transition-duration: 0.001s !important; }
  html { scroll-behavior: auto; }
  .js-on .rise, .js-on .reveal { opacity: 1 !important; transform: none !important; }
  .hero .spine { transform: scaleY(1) !important; }
}

/* ============================================================
   PRELOADER
   ============================================================ */
/* preloader only exists when JS is running to dismiss it */
.preloader { display: none; }
.js-on .preloader {
  position: fixed;
  top: 0; right: 0; bottom: 0; left: 0;
  z-index: 10000;
  background: var(--ink);
  display: flex;
  align-items: center;
  justify-content: center;
  transition: opacity 0.45s var(--ease), visibility 0.45s var(--ease);
}
.js-on .preloader.done { opacity: 0; visibility: hidden; }
.js-on .preloader .pl-mark {
  font-family: 'Poppins', sans-serif;
  font-weight: 500;
  font-style: italic;
  font-size: clamp(30px, 5vw, 46px);
  letter-spacing: -0.03em;
  color: var(--paper);
  overflow: hidden;
  white-space: nowrap;
  width: 0;
  animation: plType 0.42s var(--ease) 0.04s forwards;
}
@keyframes plType { to { width: 9.2ch; } }
.js-on .preloader .pl-rule {
  position: absolute;
  bottom: 0; left: 0;
  height: 2px;
  width: 0;
  background: var(--paper);
  animation: plRule 0.7s var(--ease) forwards;
}
@keyframes plRule { to { width: 100%; } }

/* ============================================================
   PAGE TRANSITION
   ============================================================ */
.page-shell { opacity: 1; transition: opacity 0.4s var(--ease); }
.page-shell.leaving { opacity: 0; }

/* ============================================================
   ROTATING HERO WORD
   ============================================================ */
.rotator {
  display: inline-block;
  position: relative;
  vertical-align: bottom;
  overflow: hidden;
  height: 1.1em;
  /* JS sets an exact px height once fonts are ready; em is only the fallback */
}
.rotator .rot-track { display: block; transition: transform 0.75s var(--ease); }
.rotator .rot-item {
  display: block;
  height: 1.1em;
  line-height: 1.1em;
  white-space: nowrap;
}

/* ============================================================
   LINE-BY-LINE TEXT REVEAL
   ============================================================ */
.js-on .lines .ln-mask { display: block; overflow: hidden; }
.js-on .lines .ln-in {
  display: block;
  transform: translateY(105%);
  transition: transform 0.85s var(--ease);
}
.js-on .lines.in .ln-in { transform: translateY(0); }

/* ============================================================
   MISSING-TIME TIMELINE  (signature element)
   ============================================================ */
.timeline-sec { padding: var(--sp-5) 0 var(--sp-6); }

.tl-intro {
  font-family: 'Poppins', sans-serif;
  font-weight: 400;
  font-style: italic;
  font-size: clamp(20px, 2.6vw, 26px);
  line-height: 1.5;
  letter-spacing: -0.02em;
  color: var(--paper);
  max-width: 700px;
  margin: 0 0 56px;
}

.tl { position: relative; }

.tl-block { margin-bottom: 52px; }

.tl-name {
  display: block;
  font-family: 'Inter', sans-serif;
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 0.02em;
  color: var(--paper);
  margin-bottom: 14px;
}

.tl-bar {
  position: relative;
  height: 22px;
  border-radius: 2px;
}

/* continuous childhood */
.tl-full {
  position: absolute;
  top: 0; right: 0; bottom: 0; left: 0;
  background: var(--paper-dim);
  opacity: 0.5;
  border-radius: 2px;
  transform-origin: left;
}
.js-on .tl-full { transform: scaleX(0); transition: transform 1.2s var(--ease); }
.js-on .tl.in .tl-full { transform: scaleX(1); }

/* the broken track: hatched "missing" backdrop + solid lived-through segments */
.tl-bar-broken {
  background-image: repeating-linear-gradient(
    45deg,
    rgba(244,242,239,0.10) 0 5px,
    transparent 5px 11px
  );
  border: 1px dashed var(--hair-strong);
  border-radius: 2px;
}

.tl-seg {
  position: absolute;
  top: -1px;
  height: 22px;
  background: var(--paper);
  border-radius: 2px;
  transform-origin: left;
}
.js-on .tl-seg { transform: scaleX(0); transition: transform 0.75s var(--ease); }
.js-on .tl.in .tl-seg { transform: scaleX(1); }

.tl-note {
  display: block;
  margin-top: 13px;
  font-size: 14px;
  color: var(--paper-dim);
}

/* what lives in the gaps */
.tl-missed {
  margin: var(--sp-4) 0 0;
  padding: var(--sp-3) 0 0;
  border-top: 1px solid var(--line-soft);
  list-style: none;
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 22px;
}
.tl-missed li {
  font-size: 15px;
  color: var(--paper-dim);
  padding-left: 16px;
  position: relative;
  line-height: 1.45;
}
.tl-missed li::before {
  content: "";
  position: absolute;
  left: 0; top: 9px;
  width: 7px; height: 1px;
  background: var(--paper-faint);
}
.tl-missed li b {
  display: block;
  font-family: 'Inter', sans-serif;
  font-weight: 600;
  font-size: 13px;
  letter-spacing: 0.02em;
  color: var(--paper);
  margin-bottom: 3px;
}

.tl-caption {
  margin-top: 40px;
  max-width: 660px;
  color: var(--paper-dim);
  font-size: 16px;
}

@media (max-width: 780px) {
  .tl-missed { grid-template-columns: repeat(2, 1fr); gap: 20px; }
}
@media (max-width: 460px) {
  .tl-missed { grid-template-columns: 1fr; gap: 16px; }
  .timeline-sec { padding: 60px 0 72px; }
  .tl-bar { height: 18px; }
  .tl-seg { height: 18px; }
}

/* ============================================================
   READING PROGRESS RAIL
   ============================================================ */
.rail {
  position: fixed;
  right: 26px;
  top: 50%;
  transform: translateY(-50%);
  z-index: 90;
  display: flex;
  flex-direction: column;
  gap: 14px;
  align-items: flex-end;
}
.rail a {
  display: flex;
  align-items: center;
  gap: 10px;
  text-decoration: none;
  color: var(--paper-faint);
  font-family: 'Inter', sans-serif;
  font-size: 10px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  transition: color 0.35s var(--ease);
}
.rail a span {
  opacity: 0;
  transform: translateX(6px);
  transition: opacity 0.35s var(--ease), transform 0.35s var(--ease);
}
.rail a i {
  display: block;
  width: 20px;
  height: 2px;
  background: var(--hair-strong);
  transition: width 0.4s var(--ease), background 0.4s var(--ease);
}
.rail a:hover span, .rail a.on span { opacity: 1; transform: none; }
.rail a:hover, .rail a.on { color: var(--paper); }
.rail a.on i { width: 40px; background: var(--paper); }
.rail a:focus-visible { outline: 2px solid var(--paper); outline-offset: 4px; }

@media (max-width: 1180px) { .rail { display: none; } }

/* ============================================================
   ANIMATED GRAIN
   ============================================================ */
@media (prefers-reduced-motion: no-preference) {
  body::after { animation: grainDrift 14s ease-in-out infinite; }
  @keyframes grainDrift {
    0%   { transform: translate(0,0); }
    25%  { transform: translate(-1.5%,-1%); }
    50%  { transform: translate(1%,-1.5%); }
    75%  { transform: translate(-1%,1.5%); }
    100% { transform: translate(0,0); }
  }
}

@media (prefers-reduced-motion: reduce) {
  .js-on .preloader { display: none; }
  .js-on .lines .ln-in { transform: none !important; }
  .js-on .bx { opacity: 1 !important; transform: none !important; }
  .rotator .rot-track { transition: none !important; }
}

/* ============================================================
   TEXT SELECTION
   ============================================================ */
::selection { background: var(--paper); color: var(--ink); }
::-moz-selection { background: var(--paper); color: var(--ink); }

/* ============================================================
   SCROLL PROGRESS BAR
   ============================================================ */
.scroll-progress {
  position: fixed;
  top: 0; left: 0;
  height: 2px;
  width: 100%;
  transform: scaleX(0);
  transform-origin: left;
  background: var(--paper);
  z-index: 200;
  will-change: transform;
}

/* ============================================================
   SCROLL CUE (hero)
   ============================================================ */
.scroll-cue {
  display: inline-flex;
  align-items: center;
  gap: 11px;
  margin-top: 46px;
  font-family: 'Inter', sans-serif;
  font-size: 11px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--paper-faint);
  text-decoration: none;
}
.scroll-cue i {
  display: block;
  width: 1px;
  height: 26px;
  background: linear-gradient(180deg, var(--paper-faint), transparent);
  position: relative;
  overflow: hidden;
}
.scroll-cue i::after {
  content: "";
  position: absolute;
  top: -26px; left: 0;
  width: 1px; height: 26px;
  background: var(--paper);
  animation: cueDrop 2.1s var(--ease) infinite;
}
@keyframes cueDrop {
  0%   { top: -26px; }
  60%  { top: 26px; }
  100% { top: 26px; }
}

/* ============================================================
   SECTION TITLE UNDERLINE DRAW
   ============================================================ */
.sec-head { position: relative; }
.sec-head::after {
  content: "";
  position: absolute;
  left: 0; bottom: -1px;
  height: 1px;
  width: 100%;
  background: var(--paper);
  transform: scaleX(0);
  transform-origin: left;
}
.js-on .sec-head.in::after { transform: scaleX(1); transition: transform 1.1s var(--ease) 0.15s; }

/* ============================================================
   MAGNETIC BUTTONS
   ============================================================ */
.btn { will-change: transform; }

/* ============================================================
   MOBILE NAV ANIMATION
   ============================================================ */
@media (max-width: 640px) {
  .nav-sep { display: none; }
  .nav-pill { display: none; }
  .navbar .bar { position: static; padding: 9px 12px 9px 20px; }
  .mainnav {
    display: flex;
    flex-direction: column;
    position: absolute;
    top: calc(100% + 10px);
    left: 0;
    right: 0;
    background: rgba(16,16,18,0.78);
    border: 1px solid rgba(244,242,239,0.14);
    border-radius: 26px;
    box-shadow: 0 1px 1px rgba(0,0,0,0.25), 0 16px 40px rgba(0,0,0,0.45),
                inset 0 1px 0 rgba(255,255,255,0.06);
    backdrop-filter: blur(18px) saturate(170%);
    -webkit-backdrop-filter: blur(18px) saturate(170%);
    max-height: 0;
    overflow: hidden;
    opacity: 0;
    pointer-events: none;
    transform: translateY(-6px) scale(0.98);
    transform-origin: top center;
    gap: 4px;
    transition: max-height 0.45s var(--ease), opacity 0.3s var(--ease),
                padding 0.45s var(--ease), transform 0.45s var(--ease);
    padding: 0 22px;
  }
  @supports not (backdrop-filter: blur(1px)) {
    .mainnav { background: rgba(11,11,12,0.98); }
  }
  .mainnav.open {
    max-height: 340px;
    opacity: 1;
    pointer-events: auto;
    transform: translateY(0) scale(1);
    padding: 20px 22px 22px;
  }
  .mainnav a {
    transform: translateY(-8px);
    opacity: 0;
    padding: 7px 0;
    transition: transform 0.4s var(--ease), opacity 0.4s var(--ease);
  }
  .mainnav.open a { transform: none; opacity: 1; }
  .mainnav.open a:nth-child(1) { transition-delay: 0.06s; }
  .mainnav.open a:nth-child(2) { transition-delay: 0.11s; }
  .mainnav.open a:nth-child(3) { transition-delay: 0.16s; }
  .mainnav.open a:nth-child(4) { transition-delay: 0.21s; }
}

/* ============================================================
   404
   ============================================================ */
.err-wrap {
  min-height: 62vh;
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: 60px 0;
}
.err-code {
  font-family: 'Poppins', sans-serif;
  font-weight: 500;
  font-style: italic;
  font-size: clamp(70px, 13vw, 150px);
  line-height: 1;
  letter-spacing: -0.05em;
  color: var(--hair-strong);
  margin: 0 0 22px;
}

/* ============================================================
   FOOTER META / TRUST
   ============================================================ */
.footer-meta {
  border-top: 1px solid var(--line-soft);
  margin-top: 46px;
  padding-top: 26px;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 26px;
}
.footer-meta p {
  margin: 0;
  font-size: 13px;
  line-height: 1.6;
  color: var(--paper-faint);
}
.footer-meta b {
  display: block;
  font-family: 'Inter', sans-serif;
  font-weight: 600;
  font-size: 11px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--paper-dim);
  margin-bottom: 7px;
}
.footer-meta a { color: var(--paper-dim); }
.footer-meta a:hover { color: var(--paper); }
@media (max-width: 720px) { .footer-meta { grid-template-columns: 1fr; gap: 22px; } }

/* ============================================================
   SOURCE NOTE
   ============================================================ */
.source-note {
  margin-top: 34px;
  padding: 18px 22px;
  border-left: 2px solid var(--hair-strong);
  font-size: 14px;
  color: var(--paper-faint);
  line-height: 1.6;
}

/* ============================================================
   PRINT
   ============================================================ */
@media print {
  body { background: #fff !important; color: #000 !important; font-size: 12pt; }
  body::after, .preloader, .scroll-progress, .rail, .ghost-quote,
  .scroll-cue, .nav-toggle, .btn-row, .spine { display: none !important; }
  .navbar { position: static; border-bottom: 1px solid #000; }
  .mainnav { display: none !important; }
  .wordmark, h1, h2, h3, p, li, blockquote { color: #000 !important; }
  .qcard {
    background: #fff !important;
    border: 1px solid #999 !important;
    page-break-inside: avoid;
    padding: 16pt !important;
  }
  .qcard::before, .qcard::after { display: none !important; }
  .qgrid { display: block !important; }
  .qcard { margin-bottom: 12pt; }
  .tl-full { background: #999 !important; }
  .tl-seg { background: #000 !important; }
  .tl-bar-broken { border-color: #999 !important; }
  .js-on .reveal, .js-on .rise, .js-on .lines .ln-in,
  .js-on .tl-full, .js-on .tl-seg {
    opacity: 1 !important; transform: none !important;
  }
  .site-footer { border-top: 1px solid #000; }
  a { color: #000 !important; }
  .hero-inner { padding-left: 0 !important; }
}

/* ---------------- page fade-in on load ---------------- */
.js-on .page-shell { opacity: 0; animation: pageIn 0.55s var(--ease) 0.05s forwards; }
@keyframes pageIn { to { opacity: 1; } }
@media (prefers-reduced-motion: reduce) {
  .js-on .page-shell { opacity: 1; animation: none; }
}


/* ============================================================
   SINGLE-PAGE SECTION DIVIDERS
   ============================================================ */
.chapter {
  position: relative;
  padding: var(--sp-3) 0 0;
  margin: var(--sp-6) 0 var(--sp-4);
  border-top: 1px solid var(--line-strong);
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 24px;
}
.chapter-num {
  font-family: 'Inter', sans-serif;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.2em;
  color: var(--paper-faint);
}
.chapter-title {
  font-family: 'Poppins', sans-serif;
  font-weight: 500;
  font-style: italic;
  font-size: clamp(30px, 4.6vw, 52px);
  letter-spacing: -0.035em;
  line-height: 1.05;
  margin: 0;
}
.js-on .chapter { opacity: 0; transform: translateY(20px); transition: opacity 0.8s var(--ease), transform 0.8s var(--ease); }
.js-on .chapter.in { opacity: 1; transform: none; }

.chapter-lede {
  max-width: 620px;
  font-size: 18px;
  color: var(--paper-dim);
  margin: calc(var(--sp-3) * -1) 0 var(--sp-4);
}

/* first section needs no top margin */
#home { scroll-margin-top: 0; }
.section-anchor { scroll-margin-top: 90px; }
/* every scroll target clears the floating pill (57px pill + 18px offset + breathing room) */
#home, #main, #what-to-expect, #resources, #about, #faq,
section[id], .section-anchor { scroll-margin-top: 110px; }
#home { scroll-margin-top: 0; }

@media (max-width: 640px) {
  .chapter { flex-direction: column; align-items: flex-start; gap: 10px; margin: 76px 0 40px; }
  .chapter-title { text-align: left; }
  .chapter-lede { margin: -14px 0 40px; }
}

/* ============================================================
   CONDITION CHIPS
   ============================================================ */
.chips { display: flex; flex-wrap: wrap; gap: 7px; margin: 10px 0 0; }
.chip {
  font-family: 'Inter', sans-serif;
  font-size: 10.5px;
  font-weight: 500;
  letter-spacing: 0.11em;
  text-transform: uppercase;
  color: var(--paper-dim);
  border: 1px solid var(--hair);
  border-radius: 999px;
  padding: 4px 11px;
  white-space: nowrap;
}
.chip-note {
  border-color: transparent;
  background: rgba(244,242,239,0.07);
  color: var(--paper);
}

.res-item .meta-right {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 6px;
  white-space: nowrap;
}

@media (max-width: 640px) {
  .res-item { flex-direction: column; gap: 12px; }
  .res-item .meta-right { align-items: flex-start; }
}

/* ============================================================
   STAY INVOLVED
   ============================================================ */
.contact-block {
  border-top: 1px solid var(--line-mid);
  padding-top: var(--sp-5);
}
.contact-direct {
  margin: 26px 0 0;
  font-size: 14px;
  color: var(--paper-faint);
}
.contact-direct a { color: var(--paper-dim); }

/* ============================================================
   #39 CUSTOM SCROLLBAR
   ============================================================ */
html { scrollbar-width: thin; scrollbar-color: rgba(244,242,239,0.22) transparent; }
::-webkit-scrollbar { width: 10px; height: 10px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb {
  background: rgba(244,242,239,0.18);
  border-radius: 999px;
  border: 3px solid var(--ink);
}
::-webkit-scrollbar-thumb:hover { background: rgba(244,242,239,0.34); }

/* ============================================================
   #35 BRAND FOCUS RINGS
   ============================================================ */
:focus { outline: none; }
:focus-visible {
  outline: 2px solid var(--paper);
  outline-offset: 4px;
  border-radius: 3px;
}

/* ============================================================
   #22 TONAL VARIATION BETWEEN CHAPTERS
   ============================================================ */
.zone { position: relative; }
/* The per-chapter tint bands were removed. They were three stacked 100vw
   gradients that shifted against the page as you scrolled, which read as
   uneven patches rather than intentional tonal variation. The background
   is now a single flat colour across the whole page. */

/* ============================================================
   #30 #34 #81 EXTERNAL LINK ICON
   ============================================================ */
.ext {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  white-space: nowrap;
  /* underline is drawn on the label span, not under the icon */
  background-image: none !important;
  border-bottom: 1px solid var(--hair-strong);
  padding-bottom: 1px;
  transition: border-color 0.3s var(--ease), color 0.3s var(--ease);
}
.ext:hover { border-bottom-color: var(--paper); }
.ext svg {
  width: 11px; height: 11px;
  flex: 0 0 auto;
  transition: transform 0.32s var(--ease);
}
.ext:hover svg { transform: translate(2px, -2px); }

/* ============================================================
   #69 UNDERLINE DRAW ON INLINE LINKS
   ============================================================ */
.res-item p a, .contact-direct a, .footer-meta a, .faq-a a {
  position: relative;
  color: var(--paper);
  text-decoration: none;
  background-image: linear-gradient(var(--paper), var(--paper));
  background-repeat: no-repeat;
  background-position: 0 100%;
  background-size: 0% 1px;
  transition: background-size 0.42s var(--ease), color 0.25s var(--ease);
  padding-bottom: 2px;
}
.res-item p a { color: var(--paper-dim); }
.res-item p a { background-image: linear-gradient(var(--hair-strong), var(--hair-strong)); background-size: 100% 1px; }
.res-item p a:hover { background-image: linear-gradient(var(--paper), var(--paper)); }
.res-item p a:hover, .contact-direct a:hover,
.footer-meta a:hover, .faq-a a:hover {
  background-size: 100% 1px;
  color: var(--paper);
}

/* ============================================================
   #70 #89 BUTTON PRESS
   ============================================================ */
.btn:active { transform: scale(0.97) !important; transition: transform 0.09s ease; }

/* ============================================================
   #68 #43 #83 QUOTE CARD DEPTH + BRACKET ANIMATION
   ============================================================ */
.qcard {
  transform-style: preserve-3d;
  will-change: transform;
}
.qcard:hover {
  border-color: var(--line-mid);
  box-shadow: 0 20px 48px rgba(0,0,0,0.38);
}
.js-on .qcard::before,
.js-on .qcard::after { width: 0; height: 0; transition: width 0.6s var(--ease), height 0.6s var(--ease); }
.js-on .qcard.in::before,
.js-on .qcard.in::after { width: 20px; height: 20px; }
.js-on .qcard.in:hover::before,
.js-on .qcard.in:hover::after { width: 38px; height: 38px; }

/* ============================================================
   #72 ANIMATED SECTION DIVIDERS
   ============================================================ */
.divider {
  height: 1px;
  background: var(--line-mid);
  transform: scaleX(0);
  transform-origin: left;
  margin: 0;
}
.js-on .divider.in { transform: scaleX(1); transition: transform 1.2s var(--ease); }

/* ============================================================
   #71 CHAPTER NUMBER PARALLAX
   ============================================================ */
.chapter-num { will-change: transform; display: inline-block; }

/* ============================================================
   #73 BACK TO TOP
   ============================================================ */
.to-top { display: none; }
.js-on .to-top {
  position: fixed;
  right: 26px; bottom: 26px;
  z-index: 95;
  width: 46px; height: 46px;
  border-radius: 999px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(20,20,22,0.6);
  border: 1px solid rgba(244,242,239,0.16);
  backdrop-filter: blur(14px) saturate(160%);
  -webkit-backdrop-filter: blur(14px) saturate(160%);
  color: var(--paper);
  cursor: pointer;
  opacity: 0;
  visibility: hidden;
  transform: translateY(10px) scale(0.9);
  transition: opacity 0.4s var(--ease), transform 0.4s var(--ease), visibility 0.4s, background 0.3s var(--ease);
  box-shadow: 0 8px 26px rgba(0,0,0,0.4);
}
.to-top.show { opacity: 1; visibility: visible; transform: none; }
.to-top:hover { background: rgba(30,30,33,0.78); }
.to-top svg { width: 15px; height: 15px; transition: transform 0.32s var(--ease); }
.to-top:hover svg { transform: translateY(-2px); }
@media (max-width: 640px) { .to-top { right: 16px; bottom: 16px; width: 42px; height: 42px; } }

/* ============================================================
   #11 RESOURCE FILTER
   ============================================================ */
.filter-bar { display: none; }
.js-on .filter-bar {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--sp-1);
  margin: 0 0 var(--sp-2);
}
.filter-btn {
  font-family: 'Inter', sans-serif;
  font-size: 13px;
  font-weight: 500;
  letter-spacing: 0.01em;
  color: var(--paper-dim);
  background: transparent;
  border: 1px solid var(--line-mid);
  border-radius: 999px;
  padding: 0 20px;
  height: 44px;
  display: inline-flex;
  align-items: center;
  cursor: pointer;
  transition: color 0.3s var(--ease), border-color 0.3s var(--ease),
              background 0.3s var(--ease), transform 0.3s var(--ease);
}
.filter-btn:hover { color: var(--paper); border-color: var(--line-strong); transform: translateY(-1px); }
.filter-btn.on {
  color: var(--ink);
  background: var(--paper);
  border-color: var(--paper);
}
.filter-count { display: none; }
.js-on .filter-count {
  display: block;
  font-family: 'Inter', sans-serif;
  font-size: 12.5px;
  letter-spacing: 0.02em;
  color: var(--paper-faint);
  margin: 0 0 var(--sp-4);
  min-height: 18px;
}
.res-item.hidden { display: none; }
.js-on .res-item {
  transition: opacity 0.42s var(--ease), transform 0.42s var(--ease);
}
.res-item.filtering { opacity: 0; transform: translateY(8px); }

/* ============================================================
   #29 DOCTOR VS ORG DISTINCTION
   ============================================================ */
.res-item[data-kind="org"] h3::before {
  content: "";
  display: inline-block;
  width: 6px; height: 6px;
  border: 1px solid var(--paper-dim);
  margin-right: 10px;
  vertical-align: 2px;
}
.res-item[data-kind="doctor"] h3::before {
  content: "";
  display: inline-block;
  width: 6px; height: 6px;
  border-radius: 999px;
  background: var(--paper-dim);
  margin-right: 10px;
  vertical-align: 2px;
}

/* ============================================================
   #9 FAQ ACCORDION
   ============================================================ */
.faq-item { border-bottom: 1px solid var(--hair); }
.faq-q {
  width: 100%;
  text-align: left;
  background: none;
  border: none;
  color: var(--paper);
  font-family: 'Inter', sans-serif;
  font-size: 17px;
  font-weight: 500;
  padding: 26px 44px 26px 0;
  cursor: pointer;
  position: relative;
  min-height: 44px;
  transition: color 0.25s var(--ease);
}
.faq-q:hover { color: var(--paper); }
.faq-q::after {
  content: "";
  position: absolute;
  right: 6px; top: 50%;
  width: 11px; height: 1px;
  background: var(--paper-dim);
  transition: transform 0.4s var(--ease);
}
.faq-q::before {
  content: "";
  position: absolute;
  right: 11px; top: 50%;
  width: 1px; height: 11px;
  background: var(--paper-dim);
  transform: translateY(-50%);
  transition: transform 0.4s var(--ease), opacity 0.3s var(--ease);
}
.faq-item.open .faq-q::before { transform: translateY(-50%) rotate(90deg); opacity: 0; }
/* answers are open by default; JS collapses them so no-JS users still read everything */
.faq-a { padding-bottom: 28px; }
.js-on .faq-a {
  max-height: 0;
  overflow: hidden;
  transition: max-height 0.5s var(--ease), opacity 0.4s var(--ease), padding 0.5s var(--ease);
  opacity: 0;
  padding-bottom: 0;
}
.js-on .faq-item.open .faq-a { opacity: 1; padding-bottom: 28px; }
/* hide the +/- affordance when JS can't drive it */
.faq-q { cursor: default; }
.js-on .faq-q { cursor: pointer; }
.faq-q::before, .faq-q::after { display: none; }
.js-on .faq-q::before, .js-on .faq-q::after { display: block; }
.faq-a p {
  margin: 0 0 14px;
  max-width: 68ch;
  color: var(--paper-dim);
  font-size: 16px;
  line-height: 1.7;
  max-width: 720px;
}
.faq-a p:last-child { margin-bottom: 0; }

/* ============================================================
   #7 SHARE BUTTONS
   ============================================================ */
.share-row { display: none; }
.js-on .share-row {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-top: 26px;
}
.share-btn {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  background: transparent;
  border: 1px solid var(--hair);
  border-radius: 999px;
  color: var(--paper-dim);
  font-family: 'Inter', sans-serif;
  font-size: 12px;
  letter-spacing: 0.04em;
  padding: 8px 15px;
  min-height: 36px;
  cursor: pointer;
  text-decoration: none;
  transition: color 0.25s var(--ease), border-color 0.25s var(--ease);
}
.share-btn:hover { color: var(--paper); border-color: var(--hair-strong); }
.share-btn svg { width: 12px; height: 12px; }

/* ============================================================
   #32 READ TIME
   ============================================================ */
.read-time {
  font-family: 'Inter', sans-serif;
  font-size: 11px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--paper-faint);
  margin: 0 0 20px;
}

/* ============================================================
   #75 CHIP TOOLTIP
   ============================================================ */
.chip[data-tip] { position: relative; cursor: help; }
/* Tooltip is display:none until hover/focus. An always-present absolutely
   positioned nowrap pseudo-element still contributes to scrollable overflow
   even at opacity 0, which pushed the page ~30px wide at tablet sizes. */
.chip[data-tip]::after {
  content: attr(data-tip);
  display: none;
  position: absolute;
  bottom: calc(100% + 9px);
  left: 50%;
  background: rgba(28,28,31,0.97);
  border: 1px solid var(--hair-strong);
  color: var(--paper);
  font-size: 11px;
  letter-spacing: 0.02em;
  text-transform: none;
  padding: 7px 11px;
  border-radius: 7px;
  white-space: normal;
  width: max-content;
  max-width: min(240px, 60vw);
  pointer-events: none;
  z-index: 50;
  box-shadow: 0 8px 22px rgba(0,0,0,0.45);
}
@media (hover: hover) {
  .chip[data-tip]:hover::after,
  .chip[data-tip]:focus-visible::after {
    display: block;
    animation: tipIn 0.26s var(--ease) forwards;
  }
}
@keyframes tipIn {
  from { opacity: 0; transform: translateX(-50%) translateY(4px); }
  to   { opacity: 1; transform: translateX(-50%) translateY(0); }
}
@media (prefers-reduced-motion: reduce) {
  .chip[data-tip]:hover::after { animation: none; opacity: 1; transform: translateX(-50%); }
}

/* ============================================================
   #86 DEEP-LINK ARRIVAL FLASH
   ============================================================ */
@keyframes arriveFlash {
  0%   { background: rgba(244,242,239,0.07); }
  100% { background: transparent; }
}
.arrived { animation: arriveFlash 1.5s var(--ease); }

/* ============================================================
   #62 SHORT VIEWPORT SAFETY
   ============================================================ */
@media (max-height: 520px) {
  .navbar { position: absolute; }
  .scroll-cue { display: none; }
}

/* ============================================================
   #27 #54 #65 MOBILE TYPE + TOUCH TARGETS
   ============================================================ */
@media (max-width: 640px) {
  .mainnav a { min-height: 44px; display: flex; align-items: center; }
  .chips { gap: 6px; }
  .chip { font-size: 10px; padding: 4px 9px; }
  h1.headline { letter-spacing: -0.03em; }
  .lede { font-size: 17px; }
  .qcard p { font-size: 17px; line-height: 1.52; }
  .filter-btn { font-size: 11.5px; padding: 8px 14px; }
  .faq-q { font-size: 16px; padding-right: 38px; }
}

/* ============================================================
   #60 PRINT UPDATES
   ============================================================ */
@media print {
  .to-top, .filter-bar, .share-row, .scroll-progress { display: none !important; }
  .faq-a { max-height: none !important; opacity: 1 !important; overflow: visible !important; }
  .faq-q::before, .faq-q::after { display: none !important; }
  .res-item.hidden { display: flex !important; }
  .zone::before { display: none !important; }
}

/* ============================================================
   REDUCED MOTION SWEEP (#58)
   ============================================================ */
@media (prefers-reduced-motion: reduce) {
  .js-on .qcard::before, .js-on .qcard::after { width: 20px !important; height: 20px !important; }
  .js-on .divider { transform: scaleX(1) !important; }
  .to-top { transition: opacity 0.01s !important; }
  .arrived { animation: none !important; }
  .chapter-num { transform: none !important; }
}

/* ============================================================
   EDITORIAL GRID — fills horizontal space instead of one
   narrow left-aligned column with dead space to the right
   ============================================================ */
.grid {
  display: grid;
  grid-template-columns: repeat(12, 1fr);
  gap: var(--gut);
  align-items: start;
}
.col-4 { grid-column: span 4; }
.col-5 { grid-column: span 5; }
.col-6 { grid-column: span 6; }
.col-7 { grid-column: span 7; }
.col-8 { grid-column: span 8; }
.col-12 { grid-column: span 12; }
.start-6 { grid-column-start: 6; }
.start-7 { grid-column-start: 7; }

@media (max-width: 860px) {
  .grid { grid-template-columns: 1fr; gap: var(--sp-3); }
  .col-4, .col-5, .col-6, .col-7, .col-8 { grid-column: span 1; }
  .start-6, .start-7 { grid-column-start: auto; }
}

/* ============================================================
   FULL-VIEWPORT ASYMMETRIC HERO
   ============================================================ */
.hero {
  min-height: calc(100vh - 96px);
  overflow: hidden; /* clips the decorative ghost quote so it can bleed without causing page scroll */
  display: grid;
  grid-template-columns: repeat(12, 1fr);
  gap: var(--gut);
  align-content: center;
  padding: var(--sp-5) 0 var(--sp-5);
}
.hero-inner {
  grid-column: 1 / span 8;
  padding-left: 0;
  max-width: none;
}

/* right-side section index — fills the previously empty half */
.hero-index {
  grid-column: 10 / span 3;
  align-self: start;
  margin-top: 8px;
  display: flex;
  flex-direction: column;
  gap: 2px;
  border-left: 1px solid var(--line-soft);
  padding-left: var(--sp-3);
}
.hero-index a {
  position: relative;
  display: flex;
  align-items: baseline;
  gap: 12px;
  text-decoration: none;
  padding: 10px 0;
  color: var(--paper-faint);
  font-family: 'Inter', sans-serif;
  font-size: 13px;
  transition: color 0.3s var(--ease), padding-left 0.35s var(--ease);
}
/* marker that slides out from the rail on hover */
.hero-index a::before {
  content: "";
  position: absolute;
  left: calc(var(--sp-3) * -1 - 1px);
  top: 50%;
  width: 2px;
  height: 0;
  background: var(--paper);
  transform: translateY(-50%);
  transition: height 0.35s var(--ease);
}
.hero-index a:hover::before { height: 60%; }
.hero-index a span.n {
  font-size: 10px;
  letter-spacing: 0.14em;
  opacity: 0.55;
  transition: opacity 0.3s var(--ease);
}
.hero-index a:hover { color: var(--paper); padding-left: 8px; }
.hero-index a:hover span.n { opacity: 1; }

@media (max-width: 1000px) {
  .hero-index { display: none; }
  .hero-inner { grid-column: 1 / -1; }
}
@media (max-width: 640px) {
  .hero { min-height: auto; padding: var(--sp-4) 0 var(--sp-5); }
  .hero .spine { left: -12px; }
  .hero-inner { padding-left: 0; }
}

/* ============================================================
   STICKY CHAPTER RAIL — fills side space + keeps orientation
   ============================================================ */
.chapter {
  border-top: 1px solid var(--hair-strong);
  display: grid;
  grid-template-columns: repeat(12, 1fr);
  gap: var(--gut);
  align-items: baseline;
}
.chapter-num { grid-column: 1 / span 2; text-align: left; }
.chapter-title { grid-column: 4 / span 9; text-align: left; flex: none; }

@media (max-width: 860px) {
  .chapter { display: flex; flex-direction: column; align-items: flex-start; gap: 6px; }
  .chapter-title { text-align: left; }
}

/* ============================================================
   TWO-COLUMN FAQ — halves the vertical space it used to take
   ============================================================ */
.faq-item {
  display: grid;
  grid-template-columns: repeat(12, 1fr);
  gap: var(--gut);
  border-bottom: 1px solid var(--line-soft);
}
.faq-q {
  grid-column: 1 / span 5;
  padding: var(--sp-3) var(--sp-3) var(--sp-3) 0;
  align-self: start;
}
.faq-a { grid-column: 6 / span 7; align-self: start; }
.js-on .faq-a { padding-top: 0; }
.js-on .faq-item.open .faq-a { padding: var(--sp-3) 0 var(--sp-3); }
.faq-q::after { right: auto; left: calc(100% - 34px); }
.faq-q::before { right: auto; left: calc(100% - 29px); }

@media (max-width: 860px) {
  .faq-item { display: block; }
  .faq-q { padding: var(--sp-3) 44px var(--sp-3) 0; width: 100%; }
  .faq-q::after { left: auto; right: 6px; }
  .faq-q::before { left: auto; right: 11px; }
  .js-on .faq-item.open .faq-a { padding: 0 0 var(--sp-3); }
}

/* ============================================================
   RESOURCE ROWS — tighter, better horizontal use
   ============================================================ */
.res-item {
  display: grid;
  grid-template-columns: repeat(12, 1fr);
  gap: var(--gut);
  padding: var(--sp-4) 0;
  align-items: start;
  border-bottom: 1px solid var(--line-soft);
}
.res-item > div:first-child { grid-column: 1 / span 9; }
.res-item .meta-right { grid-column: 11 / span 2; align-items: flex-start; }
.res-item .empty-note { grid-column: 1 / -1; }


@media (max-width: 860px) {
  .res-item { display: flex; flex-direction: column; gap: 10px; }
  .res-item .meta-right { align-items: flex-start; }
}

/* ============================================================
   ABOUT — two column
   ============================================================ */
.about-grid { display: grid; grid-template-columns: repeat(12, 1fr); gap: var(--gut); }
.about-grid .about-copy { grid-column: 1 / span 7; max-width: 68ch; }
.about-grid .about-side { grid-column: 9 / span 4; }
.about-side .fact {
  border-top: 1px solid var(--hair);
  padding: var(--sp-2) 0;
}
.about-side .fact b {
  display: block;
  font-family: 'Inter', sans-serif;
  font-size: 10.5px;
  font-weight: 600;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--paper-faint);
  margin-bottom: 5px;
}
.about-side .fact span { font-size: 15px; color: var(--paper-dim); }
@media (max-width: 860px) {
  .about-grid { display: block; }
  .about-grid .about-side { margin-top: var(--sp-4); }
}

/* ============================================================
   TIMELINE — pull into grid, reduce dead width
   ============================================================ */
.tl-intro { margin: 0 0 var(--sp-4); }
.tl-block { margin-bottom: var(--sp-4); }
.tl-missed { margin: var(--sp-4) 0 0; padding-top: var(--sp-3); }
.tl-caption { margin-top: var(--sp-3); }

/* ============================================================
   MODERN VIEWPORT UNIT — avoids iOS Safari address-bar jump
   ============================================================ */
@supports (height: 100dvh) {
  .hero { min-height: calc(100dvh - 96px); }
  @media (max-width: 640px) { .hero { min-height: auto; } }
}

/* ============================================================
   NO-GRID FALLBACK (pre-2017 browsers) — stack readably
   ============================================================ */
@supports not (display: grid) {
  .hero, .chapter, .faq-item, .res-item, .about-grid, .grid { display: block; }
  .hero-index { border-left: none; border-top: 1px solid var(--hair); padding-left: 0; margin-top: 32px; }
  .about-side { margin-top: 40px; }
  .res-item .meta-right { margin-top: 10px; }
}

/* ============================================================
   SKIP LINK — required for keyboard/screen-reader users
   ============================================================ */
.skip-link {
  position: absolute;
  left: 12px;
  top: -60px;
  z-index: 1000;
  background: var(--paper);
  color: var(--ink);
  padding: 12px 20px;
  border-radius: 999px;
  font-family: 'Inter', sans-serif;
  font-size: 14px;
  font-weight: 500;
  text-decoration: none;
  transition: top 0.28s var(--ease);
}
.skip-link:focus { top: 12px; }

.sr-only {
  position: absolute;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden;
  clip: rect(0,0,0,0);
  white-space: nowrap;
  border: 0;
}

/* ============================================================
   NOSCRIPT NOTICE
   ============================================================ */
.noscript-note {
  background: rgba(244,242,239,0.08);
  border-bottom: 1px solid var(--hair-strong);
  padding: 12px 20px;
  text-align: center;
  font-size: 14px;
  color: var(--paper-dim);
}

/* ============================================================
   TIMELINE — clearer legend + accessible description
   ============================================================ */
.tl-bar { overflow: hidden; }
.tl-name {
  display: flex;
  align-items: center;
  gap: 10px;
}
.tl-name i {
  width: 14px; height: 3px;
  border-radius: 2px;
  flex: 0 0 auto;
}
.tl-name i.solid { background: var(--paper-dim); opacity: 0.5; }
.tl-name i.broken {
  background: repeating-linear-gradient(90deg, var(--paper) 0 4px, transparent 4px 7px);
}

/* ============================================================
   SECTION COUNT — small refinement
   ============================================================ */
.sec-count { font-variant-numeric: tabular-nums; }

/* ============================================================
   REDUCED TRANSPARENCY (accessibility preference)
   ============================================================ */
@media (prefers-reduced-transparency: reduce) {
  .navbar { background: rgba(12,12,13,0.98); backdrop-filter: none; -webkit-backdrop-filter: none; }
  .mainnav { background: rgba(11,11,12,0.99); backdrop-filter: none; -webkit-backdrop-filter: none; }
  .to-top { background: rgba(18,18,20,0.98); backdrop-filter: none; -webkit-backdrop-filter: none; }
}

/* ============================================================
   HIGH CONTRAST MODE
   ============================================================ */
@media (prefers-contrast: more) {
  :root {
    --paper-dim: #ddd9d4;
    --paper-faint: #b0aca7;
    --hair: rgba(244,242,239,0.28);
    --hair-strong: rgba(244,242,239,0.5);
  }
  .qcard { border-color: var(--hair-strong); }
}

/* hide resource sections that have no visible entries under the active filter */
.section-empty { display: none; }

/* ============================================================
   TOUCH TARGET SIZING (WCAG 2.2 — comfortable 44px on touch)
   ============================================================ */
@media (pointer: coarse) {
  .to-top { width: 48px; height: 48px; }
  .nav-toggle { min-height: 44px; padding: 11px 18px; }
  .share-btn { min-height: 44px; padding: 12px 18px; }
  .filter-btn { min-height: 44px; padding: 12px 18px; }
  /* give inline external links a taller hit area without changing look */
  .res-item p a, .contact-direct a, .faq-a a, .footer-meta a {
    display: inline-block;
    padding-top: 8px;
    padding-bottom: 8px;
  }
  .scroll-cue { padding: 10px 0; }
  .navbar .wordmark { padding: 7px 0; }
}

/* ============================================================
   NARROW-VIEWPORT LAYOUT FIXES
   At 320px a 12-column grid with 28px gaps needs 308px of gutter
   alone, which exceeds the available width and forces overflow.
   Collapse multi-column layouts and shrink the gutter token.
   ============================================================ */
@media (max-width: 860px) {
  .hero { grid-template-columns: 1fr; gap: 0; }
  .hero-inner { grid-column: 1 / -1; }
}

@media (max-width: 420px) {
  :root { --gut: 18px; }
  .wrap { padding: 0 20px; }
  .hero .spine { left: -10px; }
}

/* section meta labels must be able to wrap on narrow screens */
.sec-head { flex-wrap: wrap; row-gap: 6px; }
@media (max-width: 560px) {
  .sec-count {
    white-space: normal;
    margin-left: 0;
    flex-basis: 100%;
  }
}

/* ============================================================
   WHAT THIS IS — explainer block
   Visitors kept asking "is this just quotes?" because the site
   showed evidence without ever stating the project's shape.
   ============================================================ */
.explainer {
  display: grid;
  grid-template-columns: repeat(12, 1fr);
  gap: var(--gut);
  margin-top: var(--sp-4);
}
.exp-col { grid-column: span 4; }
.exp-col h3 {
  font-family: 'Inter', sans-serif;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--paper-faint);
  margin: 0 0 var(--sp-2);
  padding-bottom: var(--sp-1);
  border-bottom: 1px solid var(--line-soft);
}
.exp-col p {
  margin: 0 0 var(--sp-2);
  font-size: 16px;
  line-height: 1.65;
  color: var(--paper-dim);
  max-width: 42ch;
}
.exp-col p strong { color: var(--paper); font-weight: 500; }
.exp-col p:last-child { margin-bottom: 0; }

@media (max-width: 860px) {
  .explainer { grid-template-columns: 1fr; gap: var(--sp-4); }
  .exp-col { grid-column: span 1; }
  .exp-col p { max-width: none; }
}

/* age / audience strip */
.audience {
  display: flex;
  flex-wrap: wrap;
  gap: var(--sp-1);
  margin-top: var(--sp-3);
}
.audience span {
  font-family: 'Inter', sans-serif;
  font-size: 12px;
  letter-spacing: 0.02em;
  color: var(--paper-dim);
  border: 1px solid var(--line-mid);
  border-radius: 999px;
  padding: 7px 14px;
}

/* roadmap: numbered stages */
.roadmap { margin-top: var(--sp-4); }
.stage {
  display: grid;
  grid-template-columns: repeat(12, 1fr);
  gap: var(--gut);
  padding: var(--sp-3) 0;
  border-top: 1px solid var(--line-soft);
  align-items: baseline;
}
.stage-mark {
  grid-column: span 3;
  font-family: 'Inter', sans-serif;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--paper-faint);
}
.stage-mark.now { color: var(--paper); }
.stage-body { grid-column: 4 / span 9; }
.stage-body h3 {
  font-family: 'Poppins', sans-serif;
  font-weight: 500;
  font-style: italic;
  font-size: 21px;
  letter-spacing: -0.02em;
  margin: 0 0 6px;
  color: var(--paper);
}
.stage-body p { margin: 0; font-size: 15.5px; color: var(--paper-dim); max-width: 62ch; line-height: 1.6; }

@media (max-width: 860px) {
  .stage { grid-template-columns: 1fr; gap: 6px; }
  .stage-mark, .stage-body { grid-column: span 1; }
}

/* ============================================================
   DIVIDER RHYTHM
   Chapter dividers sat inconsistently: the one before the FAQ
   had ~129px above and only ~65px below, while the others ran
   ~105/122. Normalise the space a divider owns so every
   structural break reads the same down the page.
   ============================================================ */
/* the FAQ divider sits between two sections rather than between
   zones, so it needs the chapter-level breathing room applied here */
#faq { padding-top: calc(var(--sp-6) + var(--sp-3)); }

/* trim the pull-quote block that precedes it so the space above
   the divider matches the other three */
.zone-c > .sec-tight:last-of-type { padding-bottom: var(--sp-4); }

/* a section ending in a bare paragraph sits ~20px tighter to the
   divider than one ending in a padded card; even that out */
.tl-caption { margin-bottom: var(--sp-2); }

/* inline call-to-action link inside body copy.
   Needs a real hit area: as a bare inline link it measured 17px tall,
   under the WCAG 2.2 AA 24px minimum target size. */
.inline-cta {
  display: inline-block;
  color: var(--paper);
  text-decoration: none;
  padding: 4px 0;
  min-height: 24px;
  background-image: linear-gradient(var(--hair-strong), var(--hair-strong));
  background-repeat: no-repeat;
  background-position: 0 100%;
  background-size: 100% 1px;
  transition: background-image 0.3s var(--ease);
}
.inline-cta:hover { background-image: linear-gradient(var(--paper), var(--paper)); }
@media (pointer: coarse) { .inline-cta { padding: 10px 0; } }


/* ============================================================
   MEASURE + ALIGNMENT CORRECTIONS
   ============================================================ */

/* the directory footnote was rendering full-width (~133 characters per
   line) because it sits outside the .res-item p selector */
.res-item .empty-note { max-width: 62ch; }

/* roadmap copy was ~99 characters per line, well past comfortable measure */
.stage-body p { max-width: 62ch; }

/* Right-hand meta labels (TEXAS, NONPROFIT, BOOK) were left-aligned, so
   their right edges landed anywhere from x=1111 to x=1192. Right-aligning
   them to the content edge puts every one on the same vertical line. */
.res-item .meta-right { align-items: flex-end; text-align: right; }
@media (max-width: 860px) {
  .res-item .meta-right { align-items: flex-start; text-align: left; }
}

/* Chapter numbers were drifting ±8px against each other because of the
   scroll parallax, which read as misalignment rather than depth.
   They now sit on a fixed baseline. */
.chapter-num { transform: none !important; }

/* a little more air between nav items */
.mainnav { gap: 6px; }


/* Reading measure, applied last so nothing later overrides it.
   Body copy past ~75 characters per line gets noticeably harder to read;
   the resource descriptions were running 99 and the contact line 143. */
.res-item p:not(.empty-note) { max-width: 64ch; }
.res-item .empty-note { max-width: 62ch; }
.contact-direct { max-width: 62ch; }
.tl-caption { max-width: 58ch; }

/* ============================================================
   FAQ — REBUILT
   Previously a 12-col grid: question in cols 1-5, answer in 6-12.
   Collapsed, that left 59% of every row empty with a hairline
   running the full width, and the +/- icon was pinned to the end
   of the question column so long questions collided with it
   (28px clearance vs 228px on short ones).
   Now: one full-width row, question left, icon at a fixed right
   position, answer indented beneath.
   ============================================================ */
.faq-item {
  display: block;
  border-bottom: 1px solid var(--line-soft);
}
.faq-q {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--sp-4);
  width: 100%;
  text-align: left;
  padding: var(--sp-3) 0;
  font-size: 18px;
  line-height: 1.4;
  border-radius: 6px;
  transition: color 0.25s var(--ease), padding-left 0.3s var(--ease);
}
.faq-q:hover { color: var(--paper); padding-left: 10px; }
.js-on .faq-item.open .faq-q { color: var(--paper); }

/* icon lives in its own fixed-width box at the row's right edge,
   so it can never collide with question text of any length */
.faq-q::before, .faq-q::after {
  position: static;
  flex: 0 0 auto;
}
.faq-q::after { content: none; }
.faq-q::before {
  content: "";
  display: block;
  width: 13px;
  height: 13px;
  background:
    linear-gradient(var(--paper-dim), var(--paper-dim)) center/13px 1px no-repeat,
    linear-gradient(var(--paper-dim), var(--paper-dim)) center/1px 13px no-repeat;
  transform: none;
  opacity: 1;
  transition: transform 0.4s var(--ease), background-size 0.4s var(--ease);
}
.js-on .faq-item.open .faq-q::before {
  transform: rotate(90deg);
  background:
    linear-gradient(var(--paper), var(--paper)) center/13px 1px no-repeat;
}

.faq-a { grid-column: auto; padding-right: var(--sp-6); }
.faq-a p { max-width: 68ch; font-size: 16px; }
.js-on .faq-item.open .faq-a { padding: 0 var(--sp-6) var(--sp-4) 0; }

@media (max-width: 860px) {
  .faq-q { font-size: 16px; padding: var(--sp-3) 0; }
  .faq-a, .js-on .faq-item.open .faq-a { padding-right: 0; }
}

/* ============================================================
   CHAPTER HEADERS — REBUILT
   The number sat in cols 1-2 and the title in cols 4-9, so the
   title landed at x=476 while every other element on the page
   starts at x=220. That gap (109px) is why headings read as
   "centered" against left-aligned body copy.
   Number now sits directly above the title, both on the content
   edge, so the whole page shares one left alignment.
   ============================================================ */
.chapter {
  display: block;
  border-top: 1px solid var(--line-strong);
  padding-top: var(--sp-3);
  margin: var(--sp-6) 0 var(--sp-4);
}
.chapter-num {
  display: block;
  margin-bottom: var(--sp-1);
  font-size: 11px;
  letter-spacing: 0.2em;
}
h2.chapter-title {
  display: block;
  text-align: left;
  font-size: clamp(30px, 4.2vw, 46px);
}

/* ============================================================
   READABILITY
   Body copy sat at --paper-dim on a dark ground at small sizes.
   Lift the tone and the base size slightly; the reviewer flagged
   small, low-contrast text repeatedly.
   ============================================================ */
:root {
  --paper-dim: #c9c6c1;   /* was #b9b6b1 */
  --paper-faint: #979490; /* was #8a8783 */
}
body { font-size: 17.5px; }
.lede { font-size: 20px; }
.exp-col p { font-size: 16.5px; line-height: 1.7; }
.stage-body p { font-size: 16.5px; }
.res-item p { font-size: 16px; line-height: 1.65; }
.eyebrow { font-size: 11.5px; letter-spacing: 0.15em; }

/* ============================================================
   FEWER LINES
   Almost every block carried a hairline, which made the page read
   as a wireframe. Keep structural rules (chapters, section heads)
   and drop the decorative repeats.
   ============================================================ */
.sec-head { border-bottom: none; padding-bottom: var(--sp-1); }
.sec-head::after { height: 1px; background: var(--line-mid); }
.about-side .fact:first-child { border-top: none; }
.tl-missed { border-top: 1px solid var(--line-soft); }

/* ============================================================
   CONTROLS — make interactive vs. informational obvious
   Tags/chips were visually identical to filter buttons, so
   non-clickable labels looked clickable.
   ============================================================ */
.chip {
  border-radius: 4px;              /* pills = clickable, squared = label */
  border-color: transparent;
  background: rgba(244,242,239,0.06);
  padding: 5px 10px;
}
.tag { font-size: 11px; letter-spacing: 0.12em; }

/* Copy Quote was a 36px control carrying a real action */
.share-btn {
  min-height: 42px;
  padding: 11px 20px;
  font-size: 13px;
  border-color: var(--line-mid);
}
.share-btn:hover { border-color: var(--line-strong); background: rgba(244,242,239,0.04); }

/* ============================================================
   HERO — BALANCE
   The text column sat in cols 1-8 with the index in 10-12,
   leaving the composition weighted right on wide screens and the
   byline / scroll cue reading as detached fragments.
   ============================================================ */
.hero { align-content: center; padding: var(--sp-6) 0; }
.hero-inner { grid-column: 1 / span 7; }
.hero-index { grid-column: 9 / span 4; }

.hero .lede { max-width: 54ch; }

/* byline reads as part of the hero, not an orphan */
.byline {
  margin-top: var(--sp-5);
  padding-top: var(--sp-3);
  max-width: 52ch;
  font-size: 15px;
}

/* scroll cue: give it a label that says what happens */
.scroll-cue { margin-top: var(--sp-4); }

@media (max-width: 1000px) {
  .hero-inner { grid-column: 1 / -1; }
}

/* ============================================================
   READING — a single item was sitting in a full section's worth
   of padding, leaving a large dead area beneath it.
   ============================================================ */
#resources .sec:last-of-type { padding-bottom: var(--sp-4); }

/* ============================================================
   TYPE SCALE — one system instead of ad-hoc sizes
   display > chapter > section > body > label
   ============================================================ */
h1.headline   { font-size: clamp(42px, 6vw, 72px); }   /* display */
h2.chapter-title { font-size: clamp(30px, 4.2vw, 46px); } /* chapter */
h2.sec-title  { font-size: clamp(24px, 2.8vw, 32px); }  /* section */
.res-item h3, .stage-body h3 { font-size: 19px; }       /* entry */

/* ============================================================
   NAV PILL WIDTH
   Six links plus the wordmark needed more room than the pill
   allowed: the FAQ item ended at x=1072 while the pill stopped
   at x=1065, so it sat outside the capsule.
   ============================================================ */
.navbar { width: min(790px, calc(100% - 32px)); }
.navbar.stuck { width: min(742px, calc(100% - 32px)); }
.navbar .bar { padding: 9px 14px 9px 22px; }
.navbar.stuck .bar { padding: 8px 12px 8px 20px; }
.mainnav a { padding: 7px 13px; }

/* ============================================================
   CHAPTER NUMBER SPACING
   The number sat 8px above its title, which read as crowding
   rather than a label. Give it real separation.
   ============================================================ */
.chapter { padding-top: var(--sp-4); }
.chapter-num { margin-bottom: var(--sp-3); }
@media (max-width: 640px) {
  .chapter { padding-top: var(--sp-3); }
  .chapter-num { margin-bottom: var(--sp-2); }
}

/* ============================================================
   NAV BREAKPOINT
   Six links plus the wordmark need roughly 800px. Between 641px
   and ~900px the horizontal nav was still showing but the pill
   was capped by the viewport, so links spilled outside it.
   Switch to the menu button until there is genuinely room.
   ============================================================ */
@media (max-width: 900px) {
  .nav-toggle { display: inline-block; }
  .nav-sep, .nav-pill { display: none; }
  .navbar { width: min(560px, calc(100% - 32px)); }
  .navbar.stuck { width: min(520px, calc(100% - 32px)); }
  .navbar .bar { position: static; padding: 9px 12px 9px 20px; }

  .mainnav {
    display: flex;
    flex-direction: column;
    position: absolute;
    top: calc(100% + 10px);
    left: 0; right: 0;
    background: rgba(16,16,18,0.97);
    border: 1px solid rgba(244,242,239,0.16);
    border-radius: 26px;
    box-shadow: 0 1px 1px rgba(0,0,0,0.25), 0 16px 40px rgba(0,0,0,0.45);
    backdrop-filter: blur(18px) saturate(170%);
    -webkit-backdrop-filter: blur(18px) saturate(170%);
    max-height: 0;
    overflow: hidden;
    opacity: 0;
    pointer-events: none;
    transform: translateY(-6px) scale(0.98);
    transform-origin: top center;
    gap: 4px;
    padding: 0 22px;
    transition: max-height 0.45s var(--ease), opacity 0.3s var(--ease),
                padding 0.45s var(--ease), transform 0.45s var(--ease);
  }
  .mainnav.open {
    max-height: 420px;
    opacity: 1;
    pointer-events: auto;
    transform: translateY(0) scale(1);
    padding: 20px 22px 22px;
  }
  .mainnav a {
    min-height: 44px;
    display: flex;
    align-items: center;
    padding: 7px 0;
    transform: translateY(-8px);
    opacity: 0;
    transition: transform 0.4s var(--ease), opacity 0.4s var(--ease);
  }
  .mainnav.open a { transform: none; opacity: 1; }
  .mainnav.open a:nth-child(2) { transition-delay: 0.05s; }
  .mainnav.open a:nth-child(3) { transition-delay: 0.09s; }
  .mainnav.open a:nth-child(4) { transition-delay: 0.13s; }
  .mainnav.open a:nth-child(5) { transition-delay: 0.17s; }
  .mainnav.open a:nth-child(6) { transition-delay: 0.21s; }
  .mainnav.open a:nth-child(7) { transition-delay: 0.25s; }
}

/* ============================================================
   IMMEDIATE HELP
   Findable without being alarming. This site is read by kids who
   are struggling; having no crisis path at all was a real gap.
   ============================================================ */
.help-block {
  border: 1px solid var(--line-mid);
  border-radius: 10px;
  padding: var(--sp-4);
  margin-top: var(--sp-5);
  background: rgba(244,242,239,0.035);
}
.help-block h3 {
  font-family: 'Inter', sans-serif;
  font-size: 15px;
  font-weight: 600;
  letter-spacing: 0.01em;
  color: var(--paper);
  margin: 0 0 var(--sp-2);
}
.help-block p {
  margin: 0 0 var(--sp-2);
  font-size: 15.5px;
  line-height: 1.65;
  color: var(--paper-dim);
  max-width: 64ch;
}
.help-block p:last-child { margin-bottom: 0; }
.help-lines {
  list-style: none;
  margin: var(--sp-3) 0 var(--sp-2);
  padding: 0;
  display: grid;
  gap: var(--sp-2);
}
.help-lines li { font-size: 15.5px; color: var(--paper-dim); line-height: 1.55; }
.help-lines b { display: block; color: var(--paper); font-weight: 500; }
.help-lines a {
  color: var(--paper);
  text-decoration: none;
  border-bottom: 1px solid var(--line-strong);
  padding-bottom: 1px;
}
.help-lines a:hover { border-bottom-color: var(--paper); }

/* quiet, always-available link in the footer */
.footer-help {
  margin-top: var(--sp-3);
  font-size: 13px;
  color: var(--paper-faint);
}
.footer-help a { color: var(--paper-dim); border-bottom: 1px solid var(--line-mid); padding-bottom: 1px; text-decoration: none; }
.footer-help a:hover { color: var(--paper); }

/* Crisis links must be the easiest things on the page to tap,
   especially for someone whose hands are shaking. */
.help-lines a, .footer-help a {
  display: inline-block;
  min-height: 28px;
  padding: 4px 2px;
  line-height: 1.5;
}
@media (pointer: coarse) {
  .help-lines a, .footer-help a { min-height: 44px; padding: 11px 4px; }
}

/* email links in FAQ answers and footer meta also need a real hit area */
.faq-a a, .footer-meta a { display: inline-block; min-height: 26px; padding: 3px 0; }
@media (pointer: coarse) { .faq-a a, .footer-meta a { min-height: 44px; padding: 11px 0; } }

/* "988" is only three characters wide, so it fell under the 24px
   minimum width even with vertical padding. Give short crisis links
   horizontal room too. */
.help-lines a, .footer-help a { min-width: 44px; text-align: center; padding-left: 8px; padding-right: 8px; }
.contact-direct a { display: inline-block; min-height: 26px; padding: 3px 0; }
@media (pointer: coarse) { .contact-direct a { min-height: 44px; padding: 11px 0; } }