/* =========================================================
   Convention of Counties - redesign demo
   Aesthetic: editorial constitutional broadsheet
   Navy ground, parchment panels, gold/amber accents,
   red reserved for the single primary action.
   ========================================================= */

/* ---------------------------------------------------------
   SELF-HOSTED FONTS (latin subset, served from /assets/fonts)
   Fraunces (display), Newsreader (body), Archivo (sans).
   Fraunces and Newsreader are the variable faces Google
   serves for these axis ranges, so one roman + one italic
   file covers every weight used in the design. font-display
   swap keeps the LCP text painting on the fallback first.
   --------------------------------------------------------- */
@font-face{
  font-family:"Fraunces";
  font-style:normal;
  font-weight:400 900;
  font-display:swap;
  src:url("/assets/fonts/fraunces-roman.woff2") format("woff2");
  unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;
}
@font-face{
  font-family:"Fraunces";
  font-style:italic;
  font-weight:400 500;
  font-display:swap;
  src:url("/assets/fonts/fraunces-italic.woff2") format("woff2");
  unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;
}
@font-face{
  font-family:"Newsreader";
  font-style:normal;
  font-weight:400 600;
  font-display:swap;
  src:url("/assets/fonts/newsreader-roman.woff2") format("woff2");
  unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;
}
@font-face{
  font-family:"Newsreader";
  font-style:italic;
  font-weight:400;
  font-display:swap;
  src:url("/assets/fonts/newsreader-italic.woff2") format("woff2");
  unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;
}
@font-face{
  font-family:"Archivo";
  font-style:normal;
  font-weight:500 700;
  font-display:swap;
  src:url("/assets/fonts/archivo.woff2") format("woff2");
  unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;
}

:root{
  --navy-900:#0a1a33;
  --navy-800:#0e2240;
  --navy-700:#13304f;
  --navy-600:#1b3c61;
  --navy-line:#27466b;

  --parchment:#f4ecd9;
  --parchment-dim:#e6dcc2;
  --paper:#fbf7ec;

  --gold:#caa24a;
  --gold-bright:#e3bf63;
  --amber:#d98c2b;

  --red:#a8221f;
  --red-bright:#c52e29;

  --ink:#0a1a33;
  --cream:#f3ecdc;
  --cream-soft:#cdd6e2;
  --muted:#9db0c8;

  --maxw:1180px;
  --r:3px;
  --ease:cubic-bezier(.2,.7,.2,1);

  --serif-display:"Fraunces", Georgia, serif;
  --serif-body:"Newsreader", Georgia, serif;
  --sans:"Archivo", "Helvetica Neue", Arial, sans-serif;
}

*{box-sizing:border-box;}
html{scroll-behavior:smooth;}
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto;}
  *,*::before,*::after{animation-duration:.001ms!important;transition-duration:.001ms!important;}
}

body{
  margin:0;
  background:var(--navy-900);
  color:var(--cream);
  font-family:var(--serif-body);
  font-size:1.075rem;
  line-height:1.72;
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
}

img{max-width:100%;display:block;height:auto;}
a{color:inherit;}

.wrap{max-width:var(--maxw);margin:0 auto;padding:0 clamp(20px,5vw,56px);}

.skip-link{
  position:absolute;left:-999px;top:0;z-index:200;
  background:var(--gold);color:var(--ink);padding:.6rem 1rem;
  font-family:var(--sans);font-weight:600;border-radius:0 0 var(--r) 0;
}
.skip-link:focus{left:0;}

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

a:focus-visible, button:focus-visible, input:focus-visible{
  outline:2.5px solid var(--gold-bright);outline-offset:3px;
}

/* ---------- shared headings ---------- */
.section{padding:clamp(70px,9vw,128px) 0;position:relative;}

.section-tag{
  font-family:var(--sans);font-weight:600;
  font-size:.74rem;letter-spacing:.22em;text-transform:uppercase;
  color:var(--gold);display:flex;align-items:center;gap:.7rem;margin:0 0 1.1rem;
}
.tag-num{
  font-family:var(--sans);color:var(--navy-900);background:var(--gold);
  font-size:.66rem;padding:.22rem .42rem;border-radius:2px;letter-spacing:.06em;
}

.section-title{
  font-family:var(--serif-display);
  font-weight:600;
  font-size:clamp(2.05rem,4.6vw,3.4rem);
  line-height:1.07;
  letter-spacing:-.018em;
  margin:0 0 1.1rem;
  color:var(--paper);
}
.section-title em{
  font-style:italic;font-weight:500;
  color:var(--gold-bright);
}

.section-head{max-width:760px;margin:0 0 clamp(40px,5vw,68px);}
.section-intro,.section-intro{color:var(--cream-soft);}
.big-para{
  font-size:1.28rem;line-height:1.6;color:var(--paper);
  font-weight:400;margin:0 0 1.2rem;
}

/* ---------- buttons ---------- */
.btn{
  display:inline-flex;align-items:center;gap:.55rem;
  font-family:var(--sans);font-weight:600;font-size:.92rem;
  letter-spacing:.02em;text-decoration:none;
  padding:.82rem 1.5rem;border-radius:var(--r);
  border:1.5px solid transparent;cursor:pointer;
  transition:transform .25s var(--ease), background .25s var(--ease),
             box-shadow .25s var(--ease), color .25s var(--ease);
}
.btn-lg{padding:1.05rem 2rem;font-size:1rem;}
.btn svg{transition:transform .3s var(--ease);}
.btn:hover svg{transform:translateX(4px);}

.btn-donate{
  background:var(--red);color:var(--paper);
  box-shadow:0 6px 22px -8px rgba(168,34,31,.85), inset 0 1px 0 rgba(255,255,255,.12);
}
.btn-donate:hover{background:var(--red-bright);transform:translateY(-2px);
  box-shadow:0 12px 30px -8px rgba(197,46,41,.9);}

.btn-gold{
  background:var(--gold);color:var(--navy-900);
  box-shadow:0 6px 20px -10px rgba(202,162,74,.9);
}
.btn-gold:hover{background:var(--gold-bright);transform:translateY(-2px);}

.btn-ghost{
  background:transparent;color:var(--paper);
  border-color:var(--navy-line);
}
.btn-ghost:hover{border-color:var(--gold);color:var(--gold-bright);
  transform:translateY(-2px);}

/* =========================================================
   HEADER
   ========================================================= */
.site-header{
  position:fixed;top:0;left:0;right:0;z-index:100;
  transition:background .35s var(--ease), box-shadow .35s var(--ease),
             border-color .35s var(--ease);
  border-bottom:1px solid transparent;
}
.site-header.is-scrolled{
  background:rgba(8,21,42,.94);
  backdrop-filter:blur(10px);
  border-bottom-color:var(--navy-line);
  box-shadow:0 12px 36px -20px #000;
}
.header-inner{
  display:flex;align-items:center;gap:2rem;
  padding-top:.95rem;padding-bottom:.95rem;
  transition:padding .35s var(--ease);
}
.is-scrolled .header-inner{padding-top:.6rem;padding-bottom:.6rem;}

.brand{display:flex;align-items:center;gap:.7rem;text-decoration:none;color:var(--gold);}
.brand-mark{display:flex;color:var(--gold);}
.brand-text{display:flex;flex-direction:column;line-height:1;}
.brand-line-1{
  font-family:var(--sans);font-size:.66rem;letter-spacing:.2em;
  text-transform:uppercase;color:var(--cream-soft);
}
.brand-line-2{
  font-family:var(--serif-display);font-weight:600;font-size:1.32rem;
  color:var(--paper);letter-spacing:.01em;margin-top:.1rem;
}

.site-nav{display:flex;gap:1.7rem;margin-left:auto;}
.site-nav a{
  font-family:var(--sans);font-weight:500;font-size:.9rem;
  text-decoration:none;color:var(--cream-soft);
  padding-bottom:.25rem;position:relative;
  transition:color .2s var(--ease);
}
.site-nav a::after{
  content:"";position:absolute;left:0;bottom:0;height:1.5px;width:0;
  background:var(--gold);transition:width .28s var(--ease);
}
.site-nav a:hover{color:var(--paper);}
.site-nav a:hover::after{width:100%;}

.header-cta{padding:.62rem 1.25rem;}

.nav-toggle{
  display:none;flex-direction:column;gap:5px;
  background:none;border:0;padding:8px;cursor:pointer;margin-left:auto;
}
.nav-toggle span{
  width:26px;height:2px;background:var(--gold);display:block;
  transition:transform .3s var(--ease), opacity .3s var(--ease);
}
.nav-toggle.is-active span:nth-child(1){transform:translateY(7px) rotate(45deg);}
.nav-toggle.is-active span:nth-child(2){opacity:0;}
.nav-toggle.is-active span:nth-child(3){transform:translateY(-7px) rotate(-45deg);}

.mobile-menu{
  display:none;flex-direction:column;gap:.2rem;
  background:var(--navy-800);border-top:1px solid var(--navy-line);
  padding:1rem clamp(20px,5vw,56px) 1.6rem;
}
.mobile-menu.is-open{display:flex;}
.mobile-menu a{
  font-family:var(--sans);font-weight:500;font-size:1rem;
  text-decoration:none;color:var(--cream);padding:.75rem 0;
  border-bottom:1px solid var(--navy-line);
}
.mobile-menu a.btn{
  border-bottom:0;margin-top:1rem;justify-content:center;color:var(--paper);
}

/* =========================================================
   HERO
   ========================================================= */
.hero{
  position:relative;
  background:
    radial-gradient(120% 80% at 78% 12%, var(--navy-700) 0%, transparent 60%),
    linear-gradient(180deg, var(--navy-900) 0%, var(--navy-800) 100%);
  padding:clamp(140px,16vw,220px) 0 clamp(64px,8vw,108px);
  overflow:hidden;
}
.hero-stars{
  position:absolute;inset:0;pointer-events:none;
  background-image:
    radial-gradient(1.4px 1.4px at 12% 22%, rgba(243,236,220,.55) 50%, transparent),
    radial-gradient(1.2px 1.2px at 28% 64%, rgba(243,236,220,.4) 50%, transparent),
    radial-gradient(1.5px 1.5px at 47% 18%, rgba(243,236,220,.5) 50%, transparent),
    radial-gradient(1.1px 1.1px at 63% 48%, rgba(243,236,220,.35) 50%, transparent),
    radial-gradient(1.3px 1.3px at 82% 30%, rgba(243,236,220,.45) 50%, transparent),
    radial-gradient(1.2px 1.2px at 90% 70%, rgba(243,236,220,.4) 50%, transparent),
    radial-gradient(1.1px 1.1px at 8% 82%, rgba(243,236,220,.3) 50%, transparent);
}
/* Capitol engraving: founding-era atmosphere, anchored low-right,
   duotoned into the navy ground so it reads as architecture, not a photo. */
.hero-capitol{
  position:absolute;right:-3%;bottom:0;
  width:min(56%,680px);height:78%;
  pointer-events:none;z-index:1;
  opacity:.55;
  background-image:url("capitol-engraving.jpg");
  background-image:image-set(
    url("capitol-engraving.webp") type("image/webp"),
    url("capitol-engraving.jpg") type("image/jpeg"));
  background-size:contain;
  background-position:right bottom;
  background-repeat:no-repeat;
  /* invert the navy-on-parchment engraving to light-on-dark, tint gold,
     then screen so the dark ground drops out and only the lines glow */
  filter:invert(1) grayscale(1) sepia(1) saturate(2.2) hue-rotate(3deg) brightness(.78) contrast(1.3);
  mix-blend-mode:screen;
  -webkit-mask-image:
    linear-gradient(250deg, #000 38%, transparent 90%),
    linear-gradient(180deg, transparent 4%, #000 40%);
  mask-image:
    linear-gradient(250deg, #000 38%, transparent 90%),
    linear-gradient(180deg, transparent 4%, #000 40%);
  -webkit-mask-composite:source-in;
  mask-composite:intersect;
}

.hero-map{
  position:absolute;top:0;right:-6%;width:54%;height:100%;
  pointer-events:none;z-index:2;
  -webkit-mask-image:linear-gradient(255deg, #000 22%, transparent 78%);
  mask-image:linear-gradient(255deg, #000 22%, transparent 78%);
}
.hero-map svg{width:100%;height:100%;}
.map-dots circle{opacity:0;animation:pop .6s var(--ease) forwards;}
.map-dots circle:nth-child(1){animation-delay:.7s;}
.map-dots circle:nth-child(2){animation-delay:.85s;}
.map-dots circle:nth-child(3){animation-delay:1s;}
.map-dots circle:nth-child(4){animation-delay:1.15s;}
.map-dots circle:nth-child(5){animation-delay:1.3s;}
.map-dots circle:nth-child(6){animation-delay:1.45s;}
.map-dots circle:nth-child(7){animation-delay:1.6s;}
.map-dots circle:nth-child(8){animation-delay:1.75s;}
@keyframes pop{from{opacity:0;transform:scale(0);}to{opacity:.9;transform:scale(1);}}
.map-counties path{
  stroke-dasharray:1400;stroke-dashoffset:1400;
  animation:draw 2.6s var(--ease) forwards .3s;
}
@keyframes draw{to{stroke-dashoffset:0;}}

.hero-inner{position:relative;z-index:5;max-width:920px;}

.kicker{
  font-family:var(--sans);font-weight:600;
  font-size:.8rem;letter-spacing:.2em;text-transform:uppercase;
  color:var(--gold);margin:0 0 1.4rem;
  display:inline-flex;align-items:center;
}
.kicker::before{
  content:"";width:34px;height:1.5px;background:var(--gold);
  margin-right:.85rem;display:inline-block;
}

.hero-title{
  font-family:var(--serif-display);
  font-weight:600;
  font-size:clamp(2.7rem,7vw,5.4rem);
  line-height:1.02;
  letter-spacing:-.022em;
  margin:0 0 1.6rem;
  color:var(--paper);
}
.hero-title em{
  font-style:italic;font-weight:500;color:var(--gold-bright);
  position:relative;
}

.hero-lede{
  font-size:clamp(1.1rem,1.7vw,1.34rem);
  line-height:1.62;color:var(--cream-soft);
  max-width:640px;margin:0 0 2.2rem;
}

.hero-actions{display:flex;flex-wrap:wrap;gap:1rem;margin-bottom:clamp(48px,6vw,76px);}

.hero-stats{
  display:grid;grid-template-columns:repeat(3,1fr);
  gap:clamp(20px,4vw,52px);margin:0;
  border-top:1px solid var(--navy-line);padding-top:2rem;
}
.hero-stats div{display:flex;flex-direction:column;}
.hero-stats dt{
  font-family:var(--serif-display);font-weight:600;
  font-size:clamp(2.4rem,4vw,3.3rem);line-height:1;
  color:var(--gold-bright);letter-spacing:-.02em;
}
.hero-stats dd{
  margin:.55rem 0 0;font-size:.97rem;line-height:1.45;
  color:var(--cream-soft);
}
.hero-stats em{font-style:italic;color:var(--paper);}

.hero-edge{
  position:absolute;left:0;right:0;bottom:0;height:5px;
  background:linear-gradient(90deg,var(--red) 0 28%,var(--gold) 28% 64%,var(--navy-600) 64% 100%);
  z-index:3;
}

/* hero reveal */
.hero .reveal{opacity:0;transform:translateY(26px);}
.hero .reveal.shown{
  opacity:1;transform:none;
  transition:opacity .8s var(--ease), transform .8s var(--ease);
}
.hero .reveal[data-d="1"].shown{transition-delay:.1s;}
.hero .reveal[data-d="2"].shown{transition-delay:.22s;}
.hero .reveal[data-d="3"].shown{transition-delay:.34s;}
.hero .reveal[data-d="4"].shown{transition-delay:.46s;}

/* =========================================================
   LEDGER MARQUEE
   ========================================================= */
.ledger{
  background:var(--gold);color:var(--navy-900);
  overflow:hidden;border-top:3px solid var(--navy-900);
  border-bottom:3px solid var(--navy-900);
}
.ledger-track{
  display:flex;align-items:center;gap:2.4rem;
  white-space:nowrap;padding:.7rem 0;
  font-family:var(--sans);font-weight:700;
  font-size:.82rem;letter-spacing:.16em;text-transform:uppercase;
  animation:slide 34s linear infinite;
  width:max-content;
  will-change:transform;
}
.ledger-track .dot{color:var(--red);font-size:.7rem;}
@keyframes slide{from{transform:translateX(0);}to{transform:translateX(-50%);}}

/* =========================================================
   THE MOVEMENT
   ========================================================= */
.movement{background:var(--navy-800);}
.movement-grid{
  display:grid;grid-template-columns:1.25fr .85fr;
  gap:clamp(36px,5vw,76px);align-items:start;
}
.movement-lead p{color:var(--cream-soft);}
.checklist{list-style:none;padding:0;margin:1.8rem 0 0;}
.checklist li{
  position:relative;padding-left:2rem;margin-bottom:.7rem;
  font-family:var(--sans);font-size:.98rem;color:var(--paper);
}
.checklist li::before{
  content:"";position:absolute;left:0;top:.34em;
  width:1rem;height:1rem;border-radius:50%;
  background:var(--gold);
  -webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M3 8.4l3.2 3.2L13 4.6' fill='none' stroke='black' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center/contain no-repeat;
  mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M3 8.4l3.2 3.2L13 4.6' fill='none' stroke='black' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center/contain no-repeat;
}

.movement-card{
  background:var(--paper);color:var(--ink);
  border-radius:var(--r);padding:clamp(26px,3vw,40px);
  border-top:4px solid var(--gold);
  box-shadow:0 30px 60px -30px rgba(0,0,0,.7);
}
.card-eyebrow{
  font-family:var(--sans);font-weight:700;
  font-size:.72rem;letter-spacing:.18em;text-transform:uppercase;
  color:var(--amber);margin:0 0 1.3rem;
}
.balance-figure{display:flex;flex-direction:column;gap:1.2rem;margin-bottom:1.5rem;}
.balance-row{display:grid;grid-template-columns:1fr;gap:.5rem;}
.bal-label{
  font-family:var(--sans);font-weight:700;font-size:.86rem;
  color:var(--navy-800);
}
.bal-bars{display:flex;gap:6px;align-items:flex-end;height:46px;}
.bal-bars i{
  flex:1;background:var(--navy-600);border-radius:2px 2px 0 0;
  height:100%;display:block;
}
.balance-broken .bal-bars i{
  background:var(--red);height:calc(var(--h,1) * 100%);min-height:5px;
}
.balance-fixed .bal-bars i{background:var(--gold);}
.bal-note{
  font-family:var(--sans);font-size:.74rem;letter-spacing:.04em;
  text-transform:uppercase;color:#6b6452;
}
.card-foot{
  font-size:.98rem;line-height:1.6;color:#403a2c;margin:0;
  padding-top:1.2rem;border-top:1px solid var(--parchment-dim);
}

/* =========================================================
   QUOTE BAND
   ========================================================= */
.quote-band{
  background:var(--navy-900);
  padding:clamp(72px,9vw,124px) 0;
  text-align:center;position:relative;overflow:hidden;
  border-top:1px solid var(--navy-line);
  border-bottom:1px solid var(--navy-line);
}
/* Eagle crest: heraldic seal watermark behind the pull-quote. */
.quote-crest{
  position:absolute;left:50%;top:50%;
  transform:translate(-50%,-50%);
  width:min(72vw,540px);aspect-ratio:1/1;
  pointer-events:none;z-index:0;
  opacity:.1;
  background-image:url("eagle-crest.jpg");
  background-image:image-set(
    url("eagle-crest.webp") type("image/webp"),
    url("eagle-crest.jpg") type("image/jpeg"));
  background-size:contain;
  background-position:center;
  background-repeat:no-repeat;
  mix-blend-mode:screen;
  -webkit-mask-image:radial-gradient(closest-side, #000 52%, transparent 88%);
  mask-image:radial-gradient(closest-side, #000 52%, transparent 88%);
}
.quote-band .wrap{position:relative;z-index:2;}
.quote-band::before,.quote-band::after{
  content:"";position:absolute;left:50%;transform:translateX(-50%);
  width:54px;height:2px;background:var(--gold);
}
.quote-band::before{top:0;}
.quote-band::after{bottom:0;}
.quote-mark{
  font-family:var(--serif-display);font-size:6rem;line-height:0;
  color:var(--red-bright);margin:.5rem 0 1.4rem;
}
.big-quote{
  font-family:var(--serif-display);font-style:italic;font-weight:500;
  font-size:clamp(1.8rem,4.4vw,3.25rem);
  line-height:1.18;letter-spacing:-.015em;
  color:var(--paper);margin:0 auto;max-width:18ch;
}
.big-quote em{font-style:italic;color:var(--gold-bright);}
.quote-cite{
  font-family:var(--sans);font-size:.84rem;letter-spacing:.12em;
  text-transform:uppercase;color:var(--muted);margin:1.8rem 0 0;
}
.quote-cite cite{font-style:normal;color:var(--gold);}

/* =========================================================
   THE ARGUMENT - TIMELINE
   ========================================================= */
.argument{background:var(--navy-800);position:relative;overflow:hidden;}
/* Constitution parchment: the history section literally rests on the
   founding document, sunk into the navy as a faint upper wash. */
.argument-parchment{
  position:absolute;left:0;right:0;top:0;
  height:70%;
  pointer-events:none;z-index:0;
  opacity:.32;
  /* pre-built duotone: warm gold script on near-black,
     screened so only the founding-document writing whispers over the navy */
  background-image:url("constitution-parchment-duo.jpg");
  background-image:image-set(
    url("constitution-parchment-duo.webp") type("image/webp"),
    url("constitution-parchment-duo.jpg") type("image/jpeg"));
  background-size:cover;
  background-position:top center;
  background-repeat:no-repeat;
  mix-blend-mode:screen;
  -webkit-mask-image:linear-gradient(180deg, #000 0%, rgba(0,0,0,.5) 50%, transparent 94%);
  mask-image:linear-gradient(180deg, #000 0%, rgba(0,0,0,.5) 50%, transparent 94%);
}
.argument .wrap{position:relative;z-index:2;}
/* Constitutional timeline.
   Every stop is one CSS grid with three explicit, named columns:
   [rail] a fixed marker rail, [year] a fixed year column, [body] the
   text. Because all four items use the SAME track template and the
   SAME left padding, their content edges line up exactly. The accent
   bar lives inside the rail column, never pinned to the section edge,
   so the 1964 and Now stops can no longer read as "stuck to the left."
   --t-accent is set per item and drives the bar, node and year color. */
.timeline{
  list-style:none;margin:0 0 clamp(40px,5vw,60px);padding:0;
  display:grid;gap:0;
}
.t-item{
  --t-accent:var(--gold);
  display:grid;
  grid-template-columns:[rail] 26px [year] 132px [body] 1fr;
  align-items:start;
  column-gap:clamp(18px,3.4vw,40px);
  padding:clamp(1.7rem,3vw,2.2rem) 0;
  border-top:1px solid var(--navy-line);
  position:relative;
}
.t-item:last-child{border-bottom:1px solid var(--navy-line);}

/* marker rail: a continuous hairline with a node at each stop */
.t-item::before{
  content:"";grid-column:rail;justify-self:center;
  width:3px;align-self:stretch;
  margin:calc(-1 * clamp(1.7rem,3vw,2.2rem)) 0;
  background:linear-gradient(180deg,
    var(--navy-line) 0%, var(--navy-line) 100%);
}
.t-item:first-child::before{
  background:linear-gradient(180deg,
    transparent 0%, transparent 50%, var(--navy-line) 50%);
}
.t-item:last-child::before{
  background:linear-gradient(180deg,
    var(--navy-line) 0%, var(--navy-line) 50%, transparent 50%);
}
.t-item::after{
  content:"";grid-column:rail;justify-self:center;
  align-self:start;margin-top:.35rem;
  width:13px;height:13px;border-radius:50%;
  background:var(--navy-900);
  border:3px solid var(--t-accent);
  box-shadow:0 0 0 4px var(--navy-800);
}

.t-year{
  grid-column:year;
  font-family:var(--serif-display);font-weight:700;
  font-size:clamp(1.55rem,2.6vw,2.4rem);
  color:var(--t-accent);line-height:1;letter-spacing:-.01em;
  padding-top:.05rem;
}
.t-body{grid-column:body;}
.t-body h3{
  font-family:var(--serif-display);font-weight:600;
  font-size:1.4rem;margin:0 0 .55rem;color:var(--paper);
}
.t-body h3 em{font-style:italic;color:var(--gold-bright);}
.t-body p{margin:0;color:var(--cream-soft);max-width:62ch;}

/* per-stop accent. The pivot stop also gets a faint red wash that is
   inset past the rail so it frames the text, not the section edge. */
.t-pivot{--t-accent:var(--red-bright);}
.t-now{--t-accent:var(--gold-bright);}
.t-pivot .t-body{
  position:relative;isolation:isolate;
}
.t-pivot .t-body::before{
  content:"";position:absolute;
  inset:-0.9rem -1rem -0.9rem -1.2rem;
  background:linear-gradient(90deg, rgba(168,34,31,.16), transparent 72%);
  border-radius:var(--r);z-index:-1;pointer-events:none;
}

.scholars{
  background:var(--navy-900);border:1px solid var(--navy-line);
  border-left:3px solid var(--gold);
  border-radius:var(--r);padding:clamp(24px,3vw,38px);
  max-width:860px;
}
.scholars p{margin:0;color:var(--cream-soft);font-size:1.05rem;}
.scholars cite{font-style:italic;color:var(--paper);}

/* =========================================================
   WATCH - VIDEO EXPLAINERS
   Sits between the argument (navy-800) and get involved
   (navy-900). Given its own radial ground plus a faint gold
   star wash so neither seam reads as a flat double-section,
   and a gold top hairline to mark it as a distinct stop.
   ========================================================= */
.watch{
  background:
    radial-gradient(120% 80% at 50% 0%, var(--navy-700) 0%, transparent 58%),
    var(--navy-900);
  position:relative;overflow:hidden;
  border-top:1px solid var(--navy-line);
}
.watch-stars{
  position:absolute;inset:0;pointer-events:none;opacity:.55;z-index:0;
  background-image:
    radial-gradient(1.3px 1.3px at 14% 22%, rgba(202,162,74,.42) 50%, transparent),
    radial-gradient(1.1px 1.1px at 78% 18%, rgba(202,162,74,.34) 50%, transparent),
    radial-gradient(1.2px 1.2px at 88% 60%, rgba(202,162,74,.38) 50%, transparent),
    radial-gradient(1.1px 1.1px at 26% 78%, rgba(243,236,220,.3) 50%, transparent);
}
.watch .wrap{position:relative;z-index:2;}

.watch-grid{
  display:grid;grid-template-columns:repeat(2,1fr);
  gap:clamp(28px,4vw,52px);align-items:start;
}
.watch-card{display:flex;flex-direction:column;}

/* facade frame: a fixed 16:9 stage so the 4:3 YouTube poster crops
   cleanly and the injected iframe inherits the exact same box (no CLS). */
.video-facade{
  position:relative;aspect-ratio:16/9;width:100%;
  border-radius:var(--r);overflow:hidden;
  border:1px solid var(--navy-line);
  background:var(--navy-800);
  box-shadow:0 30px 60px -34px rgba(0,0,0,.85);
}
.video-poster{
  position:absolute;inset:0;width:100%;height:100%;
  object-fit:cover;object-position:center;
  transition:transform .5s var(--ease), filter .35s var(--ease);
}
.video-facade::after{
  content:"";position:absolute;inset:0;pointer-events:none;
  background:linear-gradient(180deg, rgba(10,26,51,.12) 0%, rgba(10,26,51,.5) 100%);
  transition:opacity .35s var(--ease);
}
.video-play{
  position:absolute;inset:0;z-index:3;
  display:flex;align-items:center;justify-content:center;
  width:100%;height:100%;
  background:none;border:0;cursor:pointer;padding:0;
}
.video-play svg{
  filter:drop-shadow(0 6px 18px rgba(0,0,0,.6));
  transition:transform .3s var(--ease);
}
.video-play .play-bg{
  fill:var(--red);opacity:.92;
  transition:fill .25s var(--ease), opacity .25s var(--ease);
}
.video-play .play-tri{fill:var(--paper);}
.video-facade:hover .video-poster{transform:scale(1.04);}
.video-facade:hover::after{opacity:.7;}
.video-play:hover svg,.video-play:focus-visible svg{transform:scale(1.08);}
.video-play:hover .play-bg,.video-play:focus-visible .play-bg{
  fill:var(--red-bright);opacity:1;
}
.video-play:focus-visible{outline:none;}
.video-play:focus-visible svg{
  outline:2.5px solid var(--gold-bright);outline-offset:6px;border-radius:14px;
}
/* injected player fills the same stage; hide the gradient overlay */
.video-facade.is-playing{background:#000;}
.video-facade.is-playing::after{display:none;}
.video-frame{position:absolute;inset:0;width:100%;height:100%;border:0;}

.watch-meta{padding:1.25rem .1rem 0;}
.watch-title{
  font-family:var(--serif-display);font-weight:600;
  font-size:clamp(1.3rem,2.2vw,1.55rem);line-height:1.12;
  margin:0 0 .55rem;color:var(--paper);letter-spacing:-.01em;
}
.watch-caption{
  margin:0;color:var(--cream-soft);font-size:1.02rem;line-height:1.55;
  max-width:46ch;
}
.watch-speaker{
  font-family:var(--sans);font-weight:600;font-size:.82rem;
  letter-spacing:.12em;text-transform:uppercase;color:var(--gold);
  margin:.85rem 0 0;display:inline-flex;align-items:center;
}
.watch-speaker::before{
  content:"";width:22px;height:1.5px;background:var(--gold);
  margin-right:.6rem;display:inline-block;
}

/* =========================================================
   FAQ - DISCLOSURE LIST
   Native sibling of the Watch section: navy-900 ground with a
   faint gold star wash and a gold/navy hairline at the seam so
   it reads as its own stop. Built on <details>/<summary> for a
   zero-JS, fully accessible disclosure; the default marker is
   removed and replaced with a gold plus that rotates to a minus
   when open. Questions are h3 (clean h2 -> h3 hierarchy).
   ========================================================= */
.faq{
  background:
    radial-gradient(120% 80% at 50% 0%, var(--navy-700) 0%, transparent 58%),
    var(--navy-900);
  position:relative;overflow:hidden;
  border-top:1px solid var(--navy-line);
}
.faq-stars{
  position:absolute;inset:0;pointer-events:none;opacity:.5;z-index:0;
  background-image:
    radial-gradient(1.3px 1.3px at 16% 26%, rgba(202,162,74,.4) 50%, transparent),
    radial-gradient(1.1px 1.1px at 80% 16%, rgba(202,162,74,.32) 50%, transparent),
    radial-gradient(1.2px 1.2px at 90% 58%, rgba(202,162,74,.36) 50%, transparent),
    radial-gradient(1.1px 1.1px at 28% 80%, rgba(243,236,220,.28) 50%, transparent);
}
.faq .wrap{position:relative;z-index:2;}
.faq-grid{
  display:grid;grid-template-columns:.82fr 1.18fr;
  gap:clamp(36px,5vw,76px);align-items:start;
}
.faq-intro{position:sticky;top:120px;}
.faq-intro p{color:var(--cream-soft);margin:0;}
.faq-list{margin:0;}
.faq-item{
  border-top:1px solid var(--navy-line);
}
.faq-item:last-child{border-bottom:1px solid var(--navy-line);}
.faq-item summary{
  list-style:none;cursor:pointer;
  display:flex;align-items:flex-start;gap:1.1rem;
  padding:clamp(1.3rem,2.4vw,1.7rem) 0;
  transition:color .2s var(--ease);
}
.faq-item summary::-webkit-details-marker{display:none;}
.faq-q{
  font-family:var(--serif-display);font-weight:600;
  font-size:clamp(1.18rem,2vw,1.45rem);line-height:1.28;
  letter-spacing:-.01em;color:var(--paper);margin:0;flex:1;
  transition:color .2s var(--ease);
}
.faq-item summary:hover .faq-q{color:var(--gold-bright);}
/* gold plus / minus marker */
.faq-mark{
  position:relative;flex-shrink:0;
  width:1.7rem;height:1.7rem;margin-top:.15rem;
  border:1.5px solid var(--gold);border-radius:50%;
  transition:background .25s var(--ease), border-color .25s var(--ease);
}
.faq-mark::before,.faq-mark::after{
  content:"";position:absolute;left:50%;top:50%;
  background:var(--gold);border-radius:1px;
  transition:transform .3s var(--ease), background .25s var(--ease);
}
.faq-mark::before{width:.82rem;height:1.6px;transform:translate(-50%,-50%);}
.faq-mark::after{width:1.6px;height:.82rem;transform:translate(-50%,-50%);}
.faq-item[open] .faq-mark{background:var(--gold);border-color:var(--gold);}
.faq-item[open] .faq-mark::before,
.faq-item[open] .faq-mark::after{background:var(--navy-900);}
.faq-item[open] .faq-mark::after{transform:translate(-50%,-50%) scaleY(0);}
.faq-item summary:hover .faq-mark{border-color:var(--gold-bright);}
.faq-a{
  padding:0 0 clamp(1.3rem,2.4vw,1.7rem) calc(1.7rem + 1.1rem);
  margin:-.2rem 0 0;
  color:var(--cream-soft);font-size:1.04rem;line-height:1.62;
  max-width:60ch;
}
.faq-a a{color:var(--gold-bright);text-decoration:underline;
  text-underline-offset:3px;text-decoration-thickness:1px;}
.faq-a a:hover{color:var(--paper);}
/* gentle open animation, suppressed for reduced-motion via global rule */
.faq-item[open] .faq-a{animation:faqReveal .4s var(--ease);}
@keyframes faqReveal{from{opacity:0;transform:translateY(-6px);}to{opacity:1;transform:none;}}

/* =========================================================
   GET INVOLVED - STEPS
   ========================================================= */
.involved{background:var(--navy-900);}
.steps{
  display:grid;grid-template-columns:repeat(4,1fr);gap:1.4rem;
}
.step{
  background:var(--navy-800);border:1px solid var(--navy-line);
  border-radius:var(--r);padding:2rem 1.6rem;
  display:flex;flex-direction:column;
  transition:transform .3s var(--ease), border-color .3s var(--ease),
             box-shadow .3s var(--ease);
}
.step:hover{
  transform:translateY(-6px);border-color:var(--gold);
  box-shadow:0 26px 50px -28px rgba(0,0,0,.85);
}
.step-num{
  font-family:var(--serif-display);font-weight:700;
  font-size:1.05rem;width:2.5rem;height:2.5rem;
  display:flex;align-items:center;justify-content:center;
  border:1.5px solid var(--gold);color:var(--gold);
  border-radius:50%;margin-bottom:1.2rem;
}
.step h3{
  font-family:var(--serif-display);font-weight:600;
  font-size:1.32rem;margin:0 0 .6rem;color:var(--paper);
}
.step p{margin:0 0 1.3rem;color:var(--cream-soft);font-size:.99rem;flex:1;}
.step-link{
  font-family:var(--sans);font-weight:600;font-size:.88rem;
  letter-spacing:.04em;text-decoration:none;color:var(--gold-bright);
  transition:color .2s var(--ease);
}
.step-link:hover{color:var(--paper);}
.step-fund{
  background:linear-gradient(180deg,var(--navy-700),var(--navy-800));
  border-color:var(--red);
}
.step-fund .step-num{border-color:var(--red-bright);color:var(--red-bright);}
.step-link-red{color:#e88a86;}
.step-link-red:hover{color:var(--paper);}

/* =========================================================
   RESOLUTIONS
   ========================================================= */
.resolutions{background:var(--navy-800);}
.res-grid{
  display:grid;grid-template-columns:1fr 1fr;
  gap:clamp(36px,5vw,72px);align-items:center;
}
.res-lead p{color:var(--cream-soft);}
.res-lead .btn{margin-top:.6rem;}

.res-list{list-style:none;margin:0;padding:0;
  border:1px solid var(--navy-line);border-radius:var(--r);
  overflow:hidden;background:var(--navy-900);}
.res-item{
  display:grid;
  grid-template-columns:104px 1fr;
  grid-template-areas:"flag county" "flag state";
  column-gap:1.2rem;
  padding:1.15rem 1.4rem;
  border-bottom:1px solid var(--navy-line);
  align-items:center;
}
.res-item:last-child{border-bottom:0;}
.res-flag{
  grid-area:flag;align-self:center;
  font-family:var(--sans);font-weight:700;font-size:.68rem;
  letter-spacing:.1em;text-transform:uppercase;
  text-align:center;padding:.35rem .2rem;border-radius:2px;
}
.res-active .res-flag{background:var(--gold);color:var(--navy-900);}
.res-soon .res-flag{background:var(--navy-600);color:var(--gold-bright);
  border:1px solid var(--gold);}
.res-open .res-flag{background:transparent;color:var(--muted);
  border:1px dashed var(--muted);}
.res-county{
  grid-area:county;font-family:var(--serif-display);
  font-weight:600;font-size:1.12rem;color:var(--paper);
}
.res-state{
  grid-area:state;font-family:var(--sans);font-size:.86rem;
  color:var(--cream-soft);
}
.res-open .res-county{color:var(--gold-bright);font-style:italic;}

/* =========================================================
   DONATE BAND
   ========================================================= */
.donate-band{
  background:
    radial-gradient(110% 90% at 50% 0%, var(--navy-700) 0%, transparent 62%),
    var(--navy-900);
  text-align:center;position:relative;overflow:hidden;
  border-top:1px solid var(--navy-line);
}
.donate-stars{
  position:absolute;inset:0;pointer-events:none;opacity:.7;z-index:1;
  background-image:
    radial-gradient(1.4px 1.4px at 18% 28%, rgba(202,162,74,.5) 50%, transparent),
    radial-gradient(1.2px 1.2px at 72% 22%, rgba(202,162,74,.4) 50%, transparent),
    radial-gradient(1.3px 1.3px at 86% 64%, rgba(202,162,74,.45) 50%, transparent),
    radial-gradient(1.1px 1.1px at 32% 72%, rgba(202,162,74,.35) 50%, transparent);
}
/* Engraved star field: the patriotic ground of the donate band,
   held to the top and side margins so it never crowds the call to action. */
.donate-starfield{
  position:absolute;left:0;right:0;top:0;
  height:200px;
  pointer-events:none;z-index:0;
  opacity:.26;
  background-image:url("star-field.jpg");
  background-image:image-set(
    url("star-field.webp") type("image/webp"),
    url("star-field.jpg") type("image/jpeg"));
  background-size:1180px auto;
  background-position:top center;
  background-repeat:no-repeat;
  mix-blend-mode:screen;
  -webkit-mask-image:linear-gradient(180deg, #000 0%, transparent 92%);
  mask-image:linear-gradient(180deg, #000 0%, transparent 92%);
}
.donate-inner{position:relative;z-index:2;max-width:780px;}
.donate-eyebrow{color:var(--gold);margin-bottom:1.1rem;}
.donate-title{
  font-family:var(--serif-display);font-weight:600;
  font-size:clamp(1.9rem,4vw,3rem);line-height:1.12;
  letter-spacing:-.018em;color:var(--paper);margin:0 0 1.2rem;
}
.donate-lede{
  font-size:1.12rem;color:var(--cream-soft);
  margin:0 auto 2.4rem;max-width:60ch;
}
.donate-tiers{
  display:grid;grid-template-columns:repeat(3,1fr);
  gap:1rem;margin:0 0 2.4rem;
}
.tier{
  background:var(--navy-800);border:1px solid var(--navy-line);
  border-radius:var(--r);padding:1.5rem 1rem;
  text-decoration:none;display:flex;flex-direction:column;gap:.4rem;
  transition:transform .25s var(--ease), border-color .25s var(--ease);
}
.tier:hover{transform:translateY(-4px);border-color:var(--gold);}
.tier-amt{
  font-family:var(--serif-display);font-weight:700;
  font-size:1.9rem;color:var(--gold-bright);
}
.tier-label{
  font-family:var(--sans);font-size:.82rem;letter-spacing:.04em;
  color:var(--cream-soft);
}
.donate-fineprint{
  font-family:var(--sans);font-size:.78rem;color:var(--muted);
  margin:1.6rem 0 0;
}

/* =========================================================
   THE BOOK
   ========================================================= */
.book{background:var(--navy-800);}
.book-grid{
  display:grid;grid-template-columns:.8fr 1.2fr;
  gap:clamp(40px,6vw,84px);align-items:center;
}
.book-art{position:relative;display:flex;justify-content:center;}
.book-art img{
  width:340px;max-width:100%;border-radius:2px;
  box-shadow:
    0 2px 0 rgba(255,255,255,.05),
    0 40px 70px -28px rgba(0,0,0,.85);
  transform:rotate(-3deg);
  transition:transform .5s var(--ease);
}
.book-art:hover img{transform:rotate(0deg) scale(1.02);}
.book-shadow{
  position:absolute;inset:auto 0 -10% 0;height:60%;
  background:radial-gradient(60% 60% at 50% 100%, rgba(0,0,0,.55), transparent);
  z-index:-1;
}
.book-sub{
  font-family:var(--sans);font-weight:600;font-size:1rem;
  color:var(--gold);margin:0 0 1.1rem;letter-spacing:.02em;
}
.book-copy p{color:var(--cream-soft);}
.book-quote{
  font-family:var(--serif-display);font-style:italic;font-weight:500;
  font-size:1.3rem;line-height:1.4;color:var(--paper);
  margin:1.6rem 0;padding-left:1.3rem;
  border-left:3px solid var(--red);
}
.book-actions{display:flex;flex-wrap:wrap;gap:1rem;margin-top:1.6rem;}

/* =========================================================
   FOUNDER
   ========================================================= */
.founder{background:var(--navy-900);}
.founder-grid{
  display:grid;grid-template-columns:.85fr 1.15fr;
  gap:clamp(36px,5vw,76px);align-items:center;
}
.founder-portrait img{
  width:100%;border-radius:var(--r);
  border:1px solid var(--navy-line);
  filter:saturate(.92) contrast(1.02);
  box-shadow:0 36px 64px -34px rgba(0,0,0,.85);
}
.founder-role{
  font-family:var(--sans);font-weight:600;font-size:.92rem;
  color:var(--gold);margin:0 0 1.2rem;
}
.founder-copy p{color:var(--cream-soft);}
.contact-list{
  list-style:none;padding:0;margin:1.8rem 0;
  border-top:1px solid var(--navy-line);
}
.contact-list li{
  display:flex;gap:1.4rem;align-items:baseline;
  padding:.85rem 0;border-bottom:1px solid var(--navy-line);
}
.contact-list span{
  font-family:var(--sans);font-weight:700;font-size:.72rem;
  letter-spacing:.14em;text-transform:uppercase;color:var(--muted);
  width:78px;flex-shrink:0;
}
.contact-list a,.contact-list address{
  font-style:normal;color:var(--paper);text-decoration:none;
  font-size:1.02rem;
}
.contact-list a:hover{color:var(--gold-bright);}

/* =========================================================
   SUBSCRIBE
   ========================================================= */
.subscribe{
  background:var(--gold);color:var(--navy-900);
}
.subscribe-inner{
  display:grid;grid-template-columns:1fr 1fr;
  gap:clamp(32px,5vw,68px);align-items:center;
}
.subscribe .card-eyebrow{color:var(--red);}
.subscribe .section-title{color:var(--navy-900);}
.subscribe-text p{color:#3b3422;margin:.6rem 0 0;}
.subscribe-form{display:flex;flex-direction:column;gap:.85rem;}
.subscribe-form input{
  font-family:var(--serif-body);font-size:1.02rem;
  padding:.95rem 1.1rem;border-radius:var(--r);
  border:1.5px solid var(--navy-700);
  background:var(--paper);color:var(--ink);
}
.subscribe-form input::placeholder{color:#7a7257;}
.subscribe-form .btn{justify-content:center;}
.form-note{
  font-family:var(--sans);font-size:.78rem;color:#5c5436;margin:.3rem 0 0;
}

/* =========================================================
   FOOTER
   ========================================================= */
.site-footer{
  background:var(--navy-900);
  border-top:4px solid var(--gold);
  padding-top:clamp(54px,7vw,84px);
  position:relative;overflow:hidden;
}
/* Star field: a quiet patriotic close at the top edge of the footer. */
.footer-starfield{
  position:absolute;left:0;right:0;top:0;
  height:150px;
  pointer-events:none;z-index:0;
  opacity:.2;
  background-image:url("star-field.jpg");
  background-image:image-set(
    url("star-field.webp") type("image/webp"),
    url("star-field.jpg") type("image/jpeg"));
  background-size:1180px auto;
  background-position:top center;
  background-repeat:no-repeat;
  mix-blend-mode:screen;
  -webkit-mask-image:linear-gradient(180deg, #000 0%, transparent 96%);
  mask-image:linear-gradient(180deg, #000 0%, transparent 96%);
}
.site-footer .wrap{position:relative;z-index:2;}
.footer-grid{
  display:grid;
  grid-template-columns:1.6fr 1fr 1fr 1.3fr;
  gap:clamp(28px,4vw,56px);
  padding-bottom:clamp(40px,5vw,60px);
}
.footer-brand .brand-mark{color:var(--gold);margin-bottom:.7rem;}
.footer-name{
  font-family:var(--serif-display);font-weight:600;font-size:1.3rem;
  color:var(--paper);margin:0 0 .5rem;
}
.footer-tag{color:var(--cream-soft);font-size:.96rem;margin:0;max-width:34ch;}
.footer-col h3,.footer-cta h3{
  font-family:var(--sans);font-weight:700;font-size:.76rem;
  letter-spacing:.16em;text-transform:uppercase;color:var(--gold);
  margin:0 0 1.1rem;
}
.footer-col{display:flex;flex-direction:column;gap:.6rem;}
.footer-col a{
  font-family:var(--sans);font-size:.92rem;text-decoration:none;
  color:var(--cream-soft);transition:color .2s var(--ease);
}
.footer-col a:hover{color:var(--gold-bright);}
.footer-cta p{color:var(--cream-soft);font-size:.94rem;margin:0 0 1.1rem;}
.footer-base{
  display:flex;justify-content:space-between;flex-wrap:wrap;gap:.6rem;
  padding:1.5rem 0;margin-top:0;
  border-top:1px solid var(--navy-line);
}
.footer-base p{
  font-family:var(--sans);font-size:.8rem;color:var(--muted);margin:0;
}
.footer-demo{color:var(--gold)!important;font-style:italic;}

/* =========================================================
   FOUNDER ACTIONS (homepage + about)
   ========================================================= */
.founder-actions{display:flex;flex-wrap:wrap;gap:1rem;margin-top:.4rem;}

/* =========================================================
   ABOUT PAGE
   A second standalone page that lives inside the same
   editorial system: a navy hero with the portrait set as a
   framed plate beside the title lockup, then the long bio as
   three numbered editorial chapters on a single measure,
   closing on a path-back CTA band.
   ========================================================= */
.about-hero{
  position:relative;overflow:hidden;
  background:
    radial-gradient(120% 80% at 80% 8%, var(--navy-700) 0%, transparent 60%),
    linear-gradient(180deg, var(--navy-900) 0%, var(--navy-800) 100%);
  padding:clamp(132px,15vw,196px) 0 clamp(56px,7vw,92px);
  border-bottom:1px solid var(--navy-line);
}
.about-hero-stars{
  position:absolute;inset:0;pointer-events:none;z-index:0;
  background-image:
    radial-gradient(1.4px 1.4px at 14% 24%, rgba(243,236,220,.5) 50%, transparent),
    radial-gradient(1.2px 1.2px at 30% 66%, rgba(243,236,220,.36) 50%, transparent),
    radial-gradient(1.5px 1.5px at 70% 20%, rgba(243,236,220,.45) 50%, transparent),
    radial-gradient(1.1px 1.1px at 88% 58%, rgba(243,236,220,.32) 50%, transparent),
    radial-gradient(1.2px 1.2px at 56% 80%, rgba(243,236,220,.34) 50%, transparent);
}
.about-hero .wrap{position:relative;z-index:2;}
.about-hero-grid{
  display:grid;grid-template-columns:1fr .82fr;
  gap:clamp(36px,5vw,72px);align-items:start;
}
.about-hero-copy .section-tag{margin-bottom:1.2rem;}
.about-h1{
  font-family:var(--serif-display);font-weight:600;
  font-size:clamp(2.6rem,6vw,4.4rem);line-height:1.02;
  letter-spacing:-.022em;color:var(--paper);margin:0 0 1rem;
}
.about-h1 em{font-style:italic;font-weight:500;color:var(--gold-bright);}
.about-role{
  font-family:var(--sans);font-weight:600;font-size:1rem;
  letter-spacing:.02em;color:var(--gold);margin:0 0 1.5rem;
  display:inline-flex;align-items:center;
}
.about-role::before{
  content:"";width:34px;height:1.5px;background:var(--gold);
  margin-right:.85rem;display:inline-block;
}
.about-lede{
  font-size:clamp(1.12rem,1.7vw,1.34rem);line-height:1.6;
  color:var(--cream-soft);max-width:54ch;margin:0;
}
.about-lede em{font-style:italic;color:var(--paper);}

.about-portrait{position:relative;justify-self:center;width:100%;max-width:400px;}
.about-portrait .plate{
  position:relative;border-radius:var(--r);overflow:hidden;
  border:1px solid var(--navy-line);
  box-shadow:0 40px 70px -34px rgba(0,0,0,.9);
}
.about-portrait img{
  width:100%;filter:saturate(.92) contrast(1.02);
}
.about-portrait::before{
  content:"";position:absolute;left:-14px;top:-14px;
  width:64px;height:64px;border-top:2px solid var(--gold);
  border-left:2px solid var(--gold);z-index:2;
}
.about-portrait::after{
  content:"";position:absolute;right:-14px;bottom:-14px;
  width:64px;height:64px;border-bottom:2px solid var(--gold);
  border-right:2px solid var(--gold);z-index:2;
}
.about-portrait-cap{
  font-family:var(--sans);font-size:.74rem;letter-spacing:.14em;
  text-transform:uppercase;color:var(--muted);
  margin:1.1rem 0 0;text-align:center;
}

/* ---- bio body ---- */
.about-body{background:var(--navy-800);position:relative;}
.about-measure{max-width:760px;margin:0 auto;}
.bio-chapter{
  padding:clamp(2.2rem,4vw,3.4rem) 0;
  border-top:1px solid var(--navy-line);
}
.bio-chapter:first-of-type{border-top:0;padding-top:0;}
.bio-head{
  display:flex;align-items:baseline;gap:1rem;margin:0 0 1.4rem;
}
.bio-num{
  font-family:var(--serif-display);font-weight:700;
  font-size:1.05rem;color:var(--navy-900);background:var(--gold);
  width:2.1rem;height:2.1rem;flex-shrink:0;
  display:flex;align-items:center;justify-content:center;
  border-radius:50%;align-self:flex-start;
}
.bio-h2{
  font-family:var(--serif-display);font-weight:600;
  font-size:clamp(1.7rem,3.2vw,2.35rem);line-height:1.1;
  letter-spacing:-.015em;color:var(--paper);margin:0;
}
.bio-chapter p{
  color:var(--cream-soft);margin:0 0 1.15rem;
}
.bio-chapter p:last-child{margin-bottom:0;}
.bio-chapter p.lead-para{
  font-size:1.18rem;line-height:1.6;color:var(--paper);
}
.bio-chapter em{font-style:italic;color:var(--paper);}
.bio-pull{
  font-family:var(--serif-display);font-style:italic;font-weight:500;
  font-size:clamp(1.35rem,2.4vw,1.65rem);line-height:1.4;
  color:var(--paper);margin:1.8rem 0;padding-left:1.3rem;
  border-left:3px solid var(--red);
}

/* ---- about contact strip ---- */
.about-contact{
  background:var(--navy-900);border-top:1px solid var(--navy-line);
}
.about-contact .wrap{max-width:760px;}
.about-contact .contact-list{margin:0 0 1.8rem;}

/* ---- path-back CTA band ---- */
.about-next{
  background:
    radial-gradient(110% 90% at 50% 0%, var(--navy-700) 0%, transparent 62%),
    var(--navy-900);
  text-align:center;position:relative;overflow:hidden;
  border-top:1px solid var(--navy-line);
}
.about-next .donate-starfield{height:200px;}
.about-next-inner{position:relative;z-index:2;max-width:720px;margin:0 auto;}
.about-next h2{
  font-family:var(--serif-display);font-weight:600;
  font-size:clamp(1.8rem,3.8vw,2.8rem);line-height:1.12;
  letter-spacing:-.018em;color:var(--paper);margin:0 0 1rem;
}
.about-next p{color:var(--cream-soft);margin:0 auto 2.2rem;max-width:54ch;}
.about-next-actions{
  display:flex;flex-wrap:wrap;gap:1rem;justify-content:center;
}

/* =========================================================
   SCROLL REVEAL
   ========================================================= */
.observe{opacity:0;transform:translateY(34px);}
.observe.in{
  opacity:1;transform:none;
  transition:opacity .8s var(--ease), transform .8s var(--ease);
}

/* =========================================================
   RESPONSIVE
   ========================================================= */
/* nav collapses a touch earlier so the seven-item desktop nav never
   crowds the brand and CTA on narrow laptops (1024px landscape) */
@media (max-width:1080px){
  .site-nav, .header-cta{display:none;}
  .nav-toggle{display:flex;}
}
@media (max-width:1000px){
  .movement-grid,.res-grid,.book-grid,.founder-grid,.subscribe-inner,.faq-grid{
    grid-template-columns:1fr;
  }
  .faq-intro{position:static;}
  .steps{grid-template-columns:repeat(2,1fr);}
  .watch-grid{grid-template-columns:1fr;gap:clamp(36px,6vw,52px);}
  .footer-grid{grid-template-columns:1fr 1fr;}
  .book-art{order:-1;}
  .founder-portrait{max-width:380px;}
  .about-hero-grid{grid-template-columns:1fr;gap:clamp(36px,7vw,52px);}
  .about-portrait{order:-1;max-width:340px;}
}
@media (max-width:620px){
  body{font-size:1.02rem;}
  .steps{grid-template-columns:1fr;}
  .donate-tiers{grid-template-columns:1fr;}
  .footer-grid{grid-template-columns:1fr;}
  .hero-stats{grid-template-columns:1fr;gap:1.3rem;}
  .hero-stats div{
    flex-direction:row;align-items:baseline;gap:1rem;
    border-bottom:1px solid var(--navy-line);padding-bottom:1.1rem;
  }
  .hero-stats dt{font-size:2.4rem;flex-shrink:0;}
  .hero-stats dd{margin-top:0;}
  /* mobile timeline: keep the marker rail, stack year over body so
     all four stops still share one consistent content edge */
  .t-item{
    grid-template-columns:[rail] 22px [body] 1fr;
    column-gap:1.1rem;row-gap:.4rem;
  }
  .t-year{grid-column:body;}
  .t-body{grid-column:body;}
  .t-pivot .t-body::before{inset:-0.7rem -0.8rem;}
  .hero-actions .btn,.book-actions .btn{width:100%;justify-content:center;}
  .contact-list li{flex-direction:column;gap:.2rem;}
  .contact-list span{width:auto;}
  .about-next-actions .btn,.founder-actions .btn{width:100%;justify-content:center;}
  .bio-head{gap:.8rem;}
  .bio-num{width:1.9rem;height:1.9rem;font-size:.95rem;}
}