:root{
    --navy-deep:#0a1220;
    --navy:#101b30;
    --navy-mid:#182545;
    --gold:#c9a84c;
    --gold-bright:#e6cd82;
    --parchment:#f2ecdc;
    --parchment-dim:#e9e0c9;
    --ink:#1c1c1c;
    --ink-soft:#4a463c;
    --oxblood:#7a2436;
    --oxblood-bright:#9c3247;
    --rule:rgba(28,28,28,0.14);
    --rule-dark:rgba(230,205,130,0.22);
  }

  *{box-sizing:border-box;}
  html{scroll-behavior:smooth;}
  body{
    margin:0;
    background:var(--parchment);
    color:var(--ink);
    font-family:"Source Serif 4", Georgia, serif;
    line-height:1.6;
    -webkit-font-smoothing:antialiased;
  }
  @media (prefers-reduced-motion: reduce){
    html{scroll-behavior:auto;}
    *{animation-duration:0.001ms !important; transition-duration:0.001ms !important;}
  }

  h1,h2,h3,.display{
    font-family:"Fraunces", "Source Serif 4", serif;
    font-weight:600;
    letter-spacing:-0.01em;
    margin:0;
  }
  .eyebrow{
    font-family:"Inter", sans-serif;
    font-size:0.72rem;
    font-weight:600;
    letter-spacing:0.22em;
    text-transform:uppercase;
  }
  a{color:inherit;}
  img{max-width:100%; display:block;}
  .wrap{max-width:1120px; margin:0 auto; padding:0 32px;}

  /* focus visibility */
  a:focus-visible, button:focus-visible{
    outline:2px solid var(--gold-bright);
    outline-offset:3px;
  }

  /* ---------- NAV ---------- */
  header.site-nav{
    position:sticky; top:0; z-index:50;
    background:rgba(10,18,32,0.94);
    backdrop-filter:blur(6px);
    border-bottom:1px solid var(--rule-dark);
  }
  .nav-inner{
    max-width:1120px; margin:0 auto; padding:0 32px;
    display:flex; align-items:center; justify-content:space-between;
    height:66px;
  }
  .nav-brand{
    display:flex; align-items:center; gap:12px;
    font-family:"Fraunces", serif; font-weight:600;
    color:var(--parchment); font-size:1.02rem; letter-spacing:0.06em;
    text-decoration:none;
  }
  .nav-brand img{height:30px; width:auto;}
  nav.nav-links{display:flex; gap:22px;}
  nav.nav-links a{
    font-family:"Inter", sans-serif; font-size:0.78rem; font-weight:600;
    letter-spacing:0.1em; text-transform:uppercase;
    color:var(--parchment-dim); text-decoration:none; white-space:nowrap;
    padding:6px 0; border-bottom:1px solid transparent;
    transition:border-color .2s ease, color .2s ease;
  }
  nav.nav-links a:hover{color:var(--gold-bright); border-color:var(--gold-bright);}
  .nav-cta{
    font-family:"Inter", sans-serif; font-size:0.76rem; font-weight:700;
    letter-spacing:0.08em; text-transform:uppercase;
    color:var(--navy-deep); background:var(--gold-bright);
    padding:9px 18px; border-radius:2px; text-decoration:none;
    white-space:nowrap;
    transition:background .2s ease;
  }
  .nav-cta:hover{background:#fff;}
  .nav-toggle{display:none;}

  @media (max-width:980px){
    nav.nav-links{display:none;}
    .nav-toggle{
      display:inline-flex; background:none; border:1px solid var(--rule-dark);
      color:var(--parchment); font-family:"Inter",sans-serif; font-size:0.75rem;
      padding:8px 12px; letter-spacing:0.08em; text-transform:uppercase; cursor:pointer;
    }
  }

  /* ---------- HERO ---------- */
  .hero{
    background:
      radial-gradient(ellipse 900px 500px at 18% -10%, rgba(230,205,130,0.10), transparent 60%),
      linear-gradient(180deg, var(--navy-deep), var(--navy) 60%, var(--navy) 100%);
    color:var(--parchment);
    padding:96px 0 120px;
    position:relative;
    overflow:hidden;
    border-bottom:1px solid var(--rule-dark);
  }
  .hero::after{
    content:"";
    position:absolute; inset:0;
    background-image:
      repeating-linear-gradient(90deg, rgba(230,205,130,0.035) 0 1px, transparent 1px 120px);
    pointer-events:none;
  }
  .hero-grid{
    display:grid; grid-template-columns:1.15fr 0.85fr; gap:56px; align-items:center;
    position:relative;
  }
  .hero-emblem{
    display:flex; justify-content:center;
  }
  .hero-emblem img{
    width:min(320px, 100%);
    filter:drop-shadow(0 30px 60px rgba(0,0,0,0.45));
  }
  .hero-eyebrow{color:var(--gold-bright); margin-bottom:18px;}
  .hero h1{
    font-size:clamp(2.6rem, 5.4vw, 4.4rem);
    line-height:1.02;
    letter-spacing:0.01em;
  }
  .hero h1 em{
    font-style:italic; color:var(--gold-bright); font-weight:500;
  }
  .hero p.lede{
    font-size:1.18rem; color:var(--parchment-dim);
    max-width:46ch; margin-top:22px;
  }
  .hero-actions{display:flex; gap:16px; margin-top:34px; flex-wrap:wrap;}
  .btn{
    font-family:"Inter", sans-serif; font-size:0.82rem; font-weight:700;
    letter-spacing:0.06em; text-transform:uppercase;
    padding:14px 26px; border-radius:2px; text-decoration:none; display:inline-block;
    transition:transform .18s ease, background .2s ease, color .2s ease;
  }
  .btn-primary{background:var(--gold-bright); color:var(--navy-deep);}
  .btn-primary:hover{background:#fff; transform:translateY(-1px);}
  .btn-ghost{border:1px solid var(--rule-dark); color:var(--parchment);}
  .btn-ghost:hover{border-color:var(--gold-bright); color:var(--gold-bright);}

  .hero-stats{
    display:flex; gap:40px; margin-top:56px; flex-wrap:wrap;
    border-top:1px solid var(--rule-dark); padding-top:28px;
  }
  .stat b{
    display:block; font-family:"Fraunces", serif; font-size:1.9rem; color:var(--gold-bright); font-weight:600;
  }
  .stat span{
    font-family:"Inter", sans-serif; font-size:0.72rem; color:var(--parchment-dim);
    letter-spacing:0.04em;
  }

  @media (max-width:860px){
    .hero-grid{grid-template-columns:1fr;}
    .hero-emblem{order:-1;}
  }

  /* ---------- SECTION SCAFFOLDING ---------- */
  section{padding:100px 0;}
  .section-head{max-width:640px; margin-bottom:52px;}
  .section-head .eyebrow{color:var(--oxblood); margin-bottom:14px;}
  .section-head h2{font-size:clamp(1.9rem, 3.4vw, 2.6rem); line-height:1.08;}
  .section-head p{color:var(--ink-soft); margin-top:16px; font-size:1.05rem;}
  .divider-mark{
    width:44px; height:2px; background:var(--gold);
    margin-bottom:22px;
  }

  /* ---------- MISSION ---------- */
  .mission{background:var(--parchment);}
  .mission-grid{display:grid; grid-template-columns:0.9fr 1.1fr; gap:64px; align-items:start;}
  .pullquote{
    font-family:"Fraunces", serif; font-style:italic; font-weight:500;
    font-size:clamp(1.5rem, 2.4vw, 2rem); line-height:1.35;
    color:var(--navy); border-left:3px solid var(--oxblood); padding-left:28px;
  }
  .mission-body p{color:var(--ink-soft); font-size:1.05rem; margin:0 0 18px;}
  .mission-body p:last-child{margin-bottom:0;}
  @media (max-width:860px){.mission-grid{grid-template-columns:1fr; gap:36px;}}

  /* ---------- THIRD BOOK (signature) ---------- */
  .third-book{
    background:linear-gradient(180deg, var(--navy), var(--navy-deep));
    color:var(--parchment);
  }
  .tb-grid{display:grid; grid-template-columns:1fr; gap:16px;}
  .tb-grid > div:first-child{width:100%;}
  .tb-copy{max-width:760px;}
  .tb-grid .section-head .eyebrow{color:var(--gold-bright);}
  .tb-grid .section-head p{color:var(--parchment-dim);}
  .tb-grid h2{color:var(--parchment);}
  .tb-copy p{color:var(--parchment-dim); font-size:1.03rem; margin:0 0 16px;}
  .tb-copy p:last-child{margin-bottom:0;}

  .books-stage{
    display:flex; justify-content:center; align-items:flex-start; gap:34px;
    perspective:2200px; padding:20px 0 8px; flex-wrap:wrap;
  }
  .book{
    position:relative; width:230px; height:150px;
  }
  .book .face{
    position:absolute; inset:0;
    transform-style:preserve-3d;
    backface-visibility:hidden;
    transition:transform 1.2s cubic-bezier(.2,.7,.2,1);
    filter:drop-shadow(0 20px 26px rgba(0,0,0,0.4));
  }
  .book .face svg{width:100%; height:100%; display:block;}
  .book .face.back{transform:rotateX(180deg);}
  .book.face-down .face.front{transform:rotateX(180deg);}
  .book.face-down .face.back{transform:rotateX(360deg);}
  .book.revealed .face.front{transform:rotateX(0deg);}
  .book.revealed .face.back{transform:rotateX(180deg);}
  .book .page-lines{opacity:0; transition:opacity 1.1s ease 0.5s;}
  .book.revealed .page-lines{opacity:1;}
  .book-cap{
    text-align:center; margin-top:16px; font-family:"Inter", sans-serif;
    font-size:0.7rem; letter-spacing:0.08em; text-transform:uppercase; color:var(--parchment-dim);
  }
  .book-cap b{display:block; color:var(--gold-bright); font-family:"Fraunces", serif; text-transform:none; letter-spacing:0; font-size:0.95rem; margin-bottom:2px;}
  @media (max-width:520px){.book{width:190px; height:124px;}}

  /* ---------- WHY NOW ---------- */
  .why-now{background:var(--parchment-dim);}
  .why-grid{display:grid; grid-template-columns:1fr 1fr; gap:60px;}
  .case-list{display:flex; flex-direction:column; gap:0;}
  .case{
    padding:26px 0; border-top:1px solid var(--rule);
  }
  .case:last-child{border-bottom:1px solid var(--rule);}
  .case h3{font-size:1.15rem; margin-bottom:8px;}
  .case p{color:var(--ink-soft); margin:0; font-size:0.98rem;}
  .case .tag{
    font-family:"Inter", sans-serif; font-size:0.68rem; font-weight:700;
    letter-spacing:0.09em; text-transform:uppercase; color:var(--oxblood);
    display:inline-block; margin-bottom:10px;
  }
  .figure-block{
    background:var(--navy); color:var(--parchment); padding:38px;
    border-radius:2px; align-self:start; position:sticky; top:96px;
  }
  .figure-block .num{
    font-family:"Fraunces", serif; font-size:3.4rem; color:var(--gold-bright); line-height:1;
  }
  .figure-block p{color:var(--parchment-dim); font-size:0.95rem; margin-top:14px;}
  .figure-block .src{
    font-family:"Inter", sans-serif; font-size:0.68rem; letter-spacing:0.06em;
    text-transform:uppercase; color:rgba(242,236,220,0.5); margin-top:18px;
  }
  @media (max-width:860px){
    .why-grid{grid-template-columns:1fr;}
    .figure-block{position:static;}
  }

  /* ---------- PILLARS ---------- */
  .pillars{background:var(--navy-deep); color:var(--parchment);}
  .pillars .section-head .eyebrow{color:var(--gold-bright);}
  .pillars .section-head h2{color:var(--parchment);}
  .pillars .section-head p{color:var(--parchment-dim);}
  .pillar-grid{
    display:grid; grid-template-columns:repeat(4, 1fr); gap:1px;
    background:var(--rule-dark); border:1px solid var(--rule-dark);
  }
  .pillar{
    background:var(--navy-deep); padding:34px 26px; position:relative;
  }
  .pillar .roman{
    font-family:"Fraunces", serif; font-size:0.85rem; color:var(--gold);
    letter-spacing:0.1em; margin-bottom:22px; display:block;
  }
  .pillar h3{font-size:1.3rem; color:var(--parchment); margin-bottom:12px;}
  .pillar p{color:var(--parchment-dim); font-size:0.93rem; margin:0;}
  @media (max-width:860px){.pillar-grid{grid-template-columns:1fr 1fr;}}
  @media (max-width:560px){.pillar-grid{grid-template-columns:1fr;}}

  /* ---------- FOUNDERS ---------- */
  .founders{background:var(--parchment);}
  .founder-feature{
    display:grid; grid-template-columns:220px 1fr; gap:40px;
    border:1px solid var(--rule); background:#fbf8ef; padding:38px; margin-bottom:28px;
  }
  .founder-feature .photo{
    width:100%; aspect-ratio:3/4; overflow:hidden; border-radius:2px;
    box-shadow:0 14px 26px rgba(0,0,0,0.18);
  }
  .founder-feature .photo img{width:100%; height:100%; object-fit:cover;}
  .founder-feature h3{font-size:1.55rem; margin-bottom:4px;}
  .founder-feature .role{
    font-family:"Inter", sans-serif; font-size:0.7rem; font-weight:700;
    letter-spacing:0.09em; text-transform:uppercase; color:var(--oxblood); margin-bottom:10px;
  }
  .founder-feature .cred{color:var(--ink-soft); font-size:0.92rem; font-family:"Inter",sans-serif; margin-bottom:16px;}
  .founder-feature p{color:var(--ink-soft); font-size:0.98rem; margin:0 0 14px;}
  .founder-feature p:last-child{margin-bottom:0;}
  @media (max-width:700px){.founder-feature{grid-template-columns:1fr;} .founder-feature .photo{max-width:200px;}}

  .founder-grid{display:grid; grid-template-columns:1fr; gap:44px;}
  .founder-card{
    border:1px solid var(--rule); padding:34px; background:#fbf8ef;
  }
  .founder-card .role{
    font-family:"Inter", sans-serif; font-size:0.7rem; font-weight:700;
    letter-spacing:0.09em; text-transform:uppercase; color:var(--oxblood); margin-bottom:10px;
  }
  .founder-card h3{font-size:1.35rem; margin-bottom:4px;}
  .founder-card .cred{color:var(--ink-soft); font-size:0.9rem; font-family:"Inter",sans-serif; margin-bottom:16px;}
  .founder-card p{color:var(--ink-soft); font-size:0.96rem; margin:0;}

  /* ---------- SUPPORT ---------- */
  .support{
    background:linear-gradient(135deg, var(--oxblood), #591824);
    color:var(--parchment); text-align:center;
  }
  .support h2{color:#fff; font-size:clamp(2rem,3.6vw,2.9rem); max-width:16ch; margin:0 auto;}
  .support p{color:rgba(242,236,220,0.85); max-width:56ch; margin:20px auto 0; font-size:1.05rem;}
  .support .btn-primary{background:var(--parchment); color:var(--oxblood);}
  .support .btn-primary:hover{background:#fff;}
  .support .btn-ghost{border-color:rgba(242,236,220,0.4); color:var(--parchment);}
  .support .btn-ghost:hover{border-color:#fff; color:#fff;}
  .support-actions{display:flex; gap:16px; justify-content:center; margin-top:30px; flex-wrap:wrap;}
  .support .status-line{
    margin-top:44px; font-family:"Inter", sans-serif; font-size:0.75rem;
    letter-spacing:0.05em; color:rgba(242,236,220,0.65);
  }

  /* ---------- FOOTER ---------- */
  footer{background:var(--navy-deep); color:rgba(242,236,220,0.6); padding:48px 0 32px;}
  .footer-grid{display:flex; justify-content:space-between; align-items:flex-start; flex-wrap:wrap; gap:24px;}
  .footer-brand{display:flex; align-items:center; gap:10px; color:var(--parchment); font-family:"Fraunces",serif;}
  .footer-brand img{height:22px;}
  footer .fine{font-family:"Inter", sans-serif; font-size:0.78rem; line-height:1.7;}
  /* flex-wrap is load-bearing: the footer carries 6 links now, not 4, and
     without it the row overflowed the viewport on every phone width (113px
     of sideways scroll at 320px). Caught in the 2026-09-10 device audit. */
  footer .links{display:flex; flex-wrap:wrap; gap:14px 22px; font-family:"Inter", sans-serif; font-size:0.78rem;}
  footer .links a{text-decoration:none; color:rgba(242,236,220,0.6);}
  footer .links a:hover{color:var(--gold-bright);}
  .foot-rule{border-top:1px solid var(--rule-dark); margin-top:34px; padding-top:20px;
    font-family:"Inter", sans-serif; font-size:0.72rem; color:rgba(242,236,220,0.4);}


/* ============================================================
   ADDITIONS — David Anawalt, 2026-09
   Everything above this line is Warren's original 3.0 stylesheet,
   extracted unchanged. Everything below is new.
   ============================================================ */

/* ---------- MOBILE NAV (his CSS styled .nav-toggle but the
     button was never in the markup and the JS was never written,
     so under 860px there was no navigation at all) ---------- */
.nav-toggle{
  display:none; background:none; border:1px solid var(--rule-dark);
  color:var(--parchment); font-family:"Inter",sans-serif; font-size:0.75rem;
  padding:9px 13px; letter-spacing:0.08em; text-transform:uppercase;
  cursor:pointer; border-radius:2px; align-items:center; gap:8px;
}
.nav-toggle:hover{background:rgba(230,205,130,0.08);}
.nav-toggle .bars{display:inline-block; width:14px; height:10px; position:relative;}
.nav-toggle .bars::before,
.nav-toggle .bars::after,
.nav-toggle .bars span{
  content:""; position:absolute; left:0; right:0; height:1.5px;
  background:currentColor; transition:transform .22s ease, opacity .18s ease;
}
.nav-toggle .bars::before{top:0;}
.nav-toggle .bars span{top:4.25px;}
.nav-toggle .bars::after{bottom:0;}
.nav-toggle[aria-expanded="true"] .bars::before{transform:translateY(4.25px) rotate(45deg);}
.nav-toggle[aria-expanded="true"] .bars span{opacity:0;}
.nav-toggle[aria-expanded="true"] .bars::after{transform:translateY(-4.25px) rotate(-45deg);}

@media (max-width:980px){
  .nav-toggle{display:inline-flex;}
  nav.nav-links{
    display:none; position:absolute; top:100%; left:0; right:0;
    flex-direction:column; align-items:stretch; gap:0;
    background:var(--navy-deep); border-top:1px solid var(--rule-dark);
    box-shadow:0 18px 40px rgba(0,0,0,0.45); padding:8px 0;
  }
  nav.nav-links.open{display:flex;}
  nav.nav-links a{
    padding:14px 32px; border-bottom:1px solid rgba(230,205,130,0.08);
    font-size:0.95rem;
  }
  nav.nav-links a:last-child{border-bottom:none;}
  .site-nav{position:relative;}
  .nav-cta{display:none;}
  nav.nav-links a.nav-cta-mobile{
    display:block; color:var(--gold-bright); font-weight:600;
  }
}
@media (min-width:981px){
  nav.nav-links a.nav-cta-mobile{display:none;}
}

/* ---------- DONATE ---------- */
.btn-donate{
  background:var(--oxblood); color:var(--parchment); border:1px solid var(--oxblood);
}
.btn-donate:hover{background:var(--oxblood-bright); border-color:var(--oxblood-bright);}
.nav-cta.nav-donate{
  background:var(--gold); color:var(--navy-deep); border-color:var(--gold);
  font-weight:600;
}
.nav-cta.nav-donate:hover{background:var(--gold-bright); border-color:var(--gold-bright);}

/* ---------- FORMS ---------- */
.form-card{
  background:#fff; border:1px solid var(--rule); border-radius:4px;
  padding:32px; box-shadow:0 2px 18px rgba(28,28,28,0.05);
}
.field{margin-bottom:20px;}
.field label{
  display:block; font-family:"Inter",sans-serif; font-size:0.78rem; font-weight:600;
  letter-spacing:0.06em; text-transform:uppercase; color:var(--ink-soft);
  margin-bottom:7px;
}
.field .req{color:var(--oxblood);}
.field input[type=text],
.field input[type=email],
.field textarea,
.field select{
  width:100%; padding:12px 14px; font-family:"Source Serif 4",Georgia,serif;
  font-size:1rem; color:var(--ink); background:var(--parchment);
  border:1px solid var(--rule); border-radius:3px;
}
.field input:focus, .field textarea:focus, .field select:focus{
  outline:2px solid var(--gold); outline-offset:1px; background:#fff;
}
.field textarea{min-height:130px; resize:vertical;}
.field .hint{
  font-family:"Inter",sans-serif; font-size:0.78rem; color:var(--ink-soft);
  margin-top:6px; line-height:1.5;
}
.field-check{display:flex; gap:11px; align-items:flex-start; margin-bottom:20px;}
.field-check input{margin-top:4px; width:16px; height:16px; flex:none;}
.field-check label{
  font-family:"Inter",sans-serif; font-size:0.88rem; color:var(--ink-soft);
  line-height:1.55; text-transform:none; letter-spacing:0; font-weight:400;
}
.hp-field{position:absolute; left:-9999px; width:1px; height:1px; overflow:hidden;}
.form-note{
  font-family:"Inter",sans-serif; font-size:0.8rem; color:var(--ink-soft);
  margin-top:16px; line-height:1.6;
}

/* ---------- PAGE HEADER (interior pages) ---------- */
.page-head{
  background:linear-gradient(180deg,var(--navy-deep),var(--navy));
  color:var(--parchment); padding:76px 0 64px;
}
.page-head h1{font-size:clamp(2.1rem,4.4vw,3.2rem); margin-bottom:16px; max-width:20ch;}
.page-head .lede{
  font-size:1.13rem; color:rgba(242,236,220,0.82); max-width:62ch; line-height:1.72;
}
.page-head .eyebrow{color:var(--gold-bright); margin-bottom:16px;}
.page-body{padding:72px 0 88px;}
.page-body .col{max-width:70ch;}

/* ---------- PRINCIPLES / ENDORSEMENT ---------- */
.principles-layout{display:grid; grid-template-columns:1.35fr 1fr; gap:64px; align-items:start;}
@media (max-width:940px){.principles-layout{grid-template-columns:1fr; gap:48px;}}
.principle{
  border-left:2px solid var(--gold); padding:2px 0 2px 26px; margin-bottom:38px;
}
.principle .roman{
  font-family:"Fraunces",serif; font-size:0.9rem; color:var(--gold);
  letter-spacing:0.16em; display:block; margin-bottom:8px;
}
.principle h2{font-size:1.42rem; margin-bottom:10px;}
.principle p{color:var(--ink-soft); line-height:1.75;}
.endorse-sticky{position:sticky; top:96px;}
.sig-count{
  font-family:"Fraunces",serif; font-size:2.6rem; color:var(--navy);
  line-height:1; margin-bottom:4px;
}
.sig-count-label{
  font-family:"Inter",sans-serif; font-size:0.76rem; letter-spacing:0.16em;
  text-transform:uppercase; color:var(--ink-soft); margin-bottom:26px;
}
.sig-list{margin-top:56px; border-top:1px solid var(--rule); padding-top:44px;}
.sig-grid{
  display:grid; grid-template-columns:repeat(auto-fill,minmax(232px,1fr)); gap:26px 34px;
}
.signatory{border-bottom:1px solid var(--rule); padding-bottom:15px;}
.signatory b{
  display:block; font-family:"Fraunces",serif; font-weight:600;
  font-size:1.02rem; margin-bottom:3px;
}
.signatory span{
  font-family:"Inter",sans-serif; font-size:0.83rem; color:var(--ink-soft);
  line-height:1.5; display:block;
}
.sig-empty{
  font-family:"Inter",sans-serif; color:var(--ink-soft); font-size:0.92rem;
  background:var(--parchment-dim); border-radius:3px; padding:22px 24px;
}

/* ---------- JOURNAL ---------- */
.journal-list{display:grid; gap:2px; background:var(--rule); border-block:1px solid var(--rule);}
.journal-item{background:var(--parchment); padding:30px 4px; display:block; text-decoration:none;}
.journal-item:hover{background:var(--parchment-dim);}
.journal-item .meta{
  font-family:"Inter",sans-serif; font-size:0.75rem; letter-spacing:0.14em;
  text-transform:uppercase; color:var(--ink-soft); margin-bottom:9px;
}
.journal-item h2{font-size:1.5rem; margin-bottom:9px; max-width:34ch;}
.journal-item p{color:var(--ink-soft); max-width:66ch; margin:0;}
.journal-item .more{
  font-family:"Inter",sans-serif; font-size:0.83rem; font-weight:600;
  color:var(--oxblood); margin-top:13px; display:inline-block;
}
.article-body{max-width:68ch;}
.article-body p{margin-bottom:22px; line-height:1.82;}
.article-body h2{font-size:1.65rem; margin:44px 0 16px;}
.byline{
  font-family:"Inter",sans-serif; font-size:0.86rem; color:var(--ink-soft);
  border-bottom:1px solid var(--rule); padding-bottom:22px; margin-bottom:34px;
}

/* ---------- SUBSCRIBE ---------- */
.subscribe{background:var(--navy); color:var(--parchment); padding:72px 0;}
.subscribe h2{color:var(--parchment); margin-bottom:12px;}
.subscribe p{color:rgba(242,236,220,0.76); max-width:56ch; margin-bottom:28px;}
.subscribe .field label{color:rgba(242,236,220,0.72);}
.subscribe .field input{background:rgba(255,255,255,0.06); border-color:var(--rule-dark); color:var(--parchment);}
.subscribe-row{display:flex; gap:12px; max-width:520px; flex-wrap:wrap;}
.subscribe-row .field{flex:1 1 260px; margin-bottom:0;}

/* ---------- THANKS ---------- */
.thanks-wrap{text-align:center; padding:112px 0 128px; max-width:56ch; margin:0 auto;}
.thanks-wrap h1{margin-bottom:18px;}
.thanks-wrap p{color:var(--ink-soft); font-size:1.1rem; margin-bottom:32px;}

/* ---------- SKIP LINK ---------- */
.skip-link{
  position:absolute; left:-9999px; top:0; background:var(--gold); color:var(--navy-deep);
  padding:12px 20px; font-family:"Inter",sans-serif; font-weight:600; z-index:200;
}
.skip-link:focus{left:0;}

/* ---------- DONATE PAGE ---------- */
.donate-layout{display:grid; grid-template-columns:1.25fr 1fr; gap:56px; align-items:start;}
@media (max-width:940px){.donate-layout{grid-template-columns:1fr; gap:40px;}}
.give-card{
  background:#fff; border:1px solid var(--rule); border-top:3px solid var(--gold);
  border-radius:4px; padding:36px; box-shadow:0 2px 18px rgba(28,28,28,0.05);
}
.btn-give{width:100%; text-align:center; font-size:0.92rem; padding:16px 24px;}
.give-note{
  font-family:"Inter",sans-serif; font-size:0.82rem; color:var(--ink-soft);
  margin-top:16px; line-height:1.6;
}
.other-ways{margin-top:36px;}
.other-ways h2{font-size:1.2rem; margin-bottom:6px;}
.other-ways .sub{
  font-family:"Inter",sans-serif; font-size:0.85rem; color:var(--ink-soft);
  margin-bottom:20px;
}
.way{
  display:flex; align-items:center; justify-content:space-between; gap:20px;
  border:1px solid var(--rule); border-radius:3px; padding:16px 20px;
  margin-bottom:10px; background:var(--parchment); text-decoration:none;
}
.way:hover{background:#fff; border-color:var(--gold);}
.way b{font-family:"Fraunces",serif; font-weight:600; font-size:1.02rem; display:block;}
.way span{font-family:"Inter",sans-serif; font-size:0.82rem; color:var(--ink-soft);}
.way .go{font-family:"Inter",sans-serif; font-size:0.82rem; font-weight:600; color:var(--oxblood); white-space:nowrap;}
.give-aside{
  background:var(--parchment-dim); border-radius:4px; padding:32px;
  position:sticky; top:96px;
}
.give-list{list-style:none; padding:0; margin:0 0 28px;}
.give-list li{
  padding-left:18px; position:relative; margin-bottom:16px;
  color:var(--ink-soft); line-height:1.7; font-size:0.97rem;
}
.give-list li::before{content:""; position:absolute; left:0; top:11px; width:7px; height:7px; background:var(--gold); border-radius:50%;}
.give-list b{color:var(--ink);}
.give-legal{
  border-top:1px solid var(--rule); padding-top:22px;
  font-family:"Inter",sans-serif; font-size:0.82rem; color:var(--ink-soft); line-height:1.75;
}

/* Checkout tip note. Givebutter adds a platform tip by default and many
   donors do not realise it is optional, so we say so before they get there. */
.tip-note{
  background:var(--parchment-dim); border-left:2px solid var(--gold);
  border-radius:2px; padding:15px 18px; margin-bottom:24px;
  font-family:"Inter",sans-serif; font-size:0.85rem; line-height:1.65;
  color:var(--ink-soft);
}
.tip-note b{color:var(--ink); font-weight:600;}

/* ---------- INTRO VIDEO ---------- */
.video-section{
  background:linear-gradient(180deg,var(--navy-deep),var(--navy));
  color:var(--parchment); border-bottom:1px solid var(--rule-dark);
}
.video-section h2{color:var(--parchment);}
.video-frame{
  max-width:900px; margin:0 auto; border:1px solid var(--rule-dark);
  border-radius:3px; overflow:hidden; background:#000;
  box-shadow:0 30px 70px rgba(0,0,0,0.45);
}
.video-frame video{display:block; width:100%; height:auto;}
.video-cap{
  max-width:900px; margin:16px auto 0; text-align:center;
  font-family:"Inter",sans-serif; font-size:0.82rem;
  color:rgba(242,236,220,0.55);
}

/* ---------- HERO VIDEO ----------
   Replaces the shield in the hero grid. The shield still appears in the nav
   and the footer, so the mark is not lost. preload="none" keeps the 8.8MB
   file off the critical path for phone visitors. */
.hero-video{width:100%;}
.hero-video video{
  display:block; width:100%; height:auto; border-radius:3px;
  border:1px solid var(--rule-dark); background:#000;
  box-shadow:0 26px 60px rgba(0,0,0,0.5);
}
.hero-video-cap{
  display:block; margin-top:12px; text-align:center;
  font-family:"Inter",sans-serif; font-size:0.74rem; letter-spacing:0.04em;
  color:rgba(242,236,220,0.5);
}
@media (max-width:860px){
  /* on phones the video leads, then the headline */
  .hero-video-cap{font-size:0.72rem;}
}

@media (max-width:860px){
  /* His original CSS put the hero emblem ABOVE the headline on phones, which
     was right for a shield. For a video it buries the message: a visitor would
     meet a player before learning what the organisation is. Headline first,
     video underneath. */
  .hero-emblem{order:0;}
}

/* ---------- HERO CLEANUP (2026-09-10) ----------
   Three problems once the video replaced the shield:
   1. .hero-stats was a wrapping flexbox. The 46% label is long, so it dropped
      to a second row and left a ragged gap. Now a real 3-column grid.
   2. The video column was 0.85fr, leaving the player small and adrift in dead
      space. Widened and given breathing room instead of floating.
   3. Nothing lined up vertically between the two columns.                     */

@media (min-width:861px){
  .hero{padding:76px 0 84px;}
  .hero-grid{grid-template-columns:1.02fr 0.98fr; gap:64px; align-items:center;}
  .hero-emblem{display:block;}
}

/* stats: equal columns, aligned baselines, no wrapping */
.hero-stats{
  display:grid;
  grid-template-columns:repeat(3, minmax(0,1fr));
  gap:28px 32px;
  margin-top:44px; padding-top:26px;
  align-items:start;
}
.stat b{font-size:1.75rem; line-height:1; margin-bottom:8px;}
.stat span{display:block; line-height:1.45; max-width:22ch;}

@media (max-width:620px){
  .hero-stats{grid-template-columns:repeat(2, minmax(0,1fr));}
  .hero-stats .stat:last-child{grid-column:1 / -1;}
  .stat span{max-width:none;}
}

/* video: fill its column properly rather than floating small */
.hero-video video{
  width:100%;
  aspect-ratio:16 / 9;
  object-fit:cover;
  border-radius:4px;
}
.hero-video-cap{margin-top:14px; text-align:left;}

@media (max-width:860px){
  .hero{padding:64px 0 72px;}
  .hero-video{margin-top:32px;}
  .hero-video-cap{text-align:center;}
}

/* stats now span the full hero width, under both columns, so the space beneath
   the video is used instead of sitting empty */
@media (min-width:861px){
  .hero-grid > .hero-stats{grid-column:1 / -1; margin-top:52px;}
  .hero-stats{grid-template-columns:repeat(3, minmax(0,1fr)); max-width:860px;}
}

/* ---------- FULL-VIEWPORT HERO (desktop) ----------
   The hero now fills the window so the headline, video and the three stats all
   land above the fold on a laptop, instead of the stats being cut off.

   min-height, never height: on a short window the section simply grows and the
   page scrolls, rather than clipping content. svh over vh so mobile browser
   chrome does not cause a jump, with a vh fallback for older engines.        */
@media (min-width:861px){
  .hero{
    min-height:calc(100vh - 66px);
    min-height:calc(100svh - 66px);
    display:flex; align-items:center;
    padding:48px 0;
  }
  .hero > .wrap{width:100%;}

  /* tighter vertical rhythm so everything fits one screen */
  .hero h1{font-size:clamp(2.4rem, 4.2vw, 3.9rem);}
  .hero p.lede{font-size:1.1rem; margin-top:18px;}
  .hero-actions{margin-top:28px;}
  .hero-grid > .hero-stats{margin-top:40px; padding-top:22px;}
  .stat b{font-size:1.6rem;}
}

/* Short laptops (1366x768, 1280x800). Compress the rhythm further so the
   headline, video and stats still land on one screen instead of the stats
   being cut in half. Tested at 768, 800 and 900 tall. */
@media (min-width:861px) and (max-height:860px){
  .hero{padding:28px 0;}
  .hero h1{font-size:clamp(2.1rem, 3.4vw, 3rem);}
  .hero p.lede{font-size:1rem; margin-top:14px;}
  .hero-actions{margin-top:22px;}
  .hero .btn{padding:12px 22px;}
  .hero-grid{gap:44px;}
  .hero-grid > .hero-stats{margin-top:28px; padding-top:18px;}
  .stat b{font-size:1.4rem; margin-bottom:5px;}
  .stat span{font-size:0.68rem;}
  .hero-video-cap{margin-top:10px;}
}

/* Anything genuinely short (a small window, not a small screen): stop forcing
   full height entirely and just let the page scroll. */
@media (min-width:861px) and (max-height:640px){
  .hero{min-height:0; padding:44px 0;}
}