/* Homepage layout — direction 1a, "one column, one action" (design handoff 2026-09-10).
   One centered action in the hero, a three-up barrier strip, one full-bleed pine band for
   the mast, a slim footer with a crisis card. Copy is untouched; this file is layout only. */

.shell{max-width:72rem;padding:0 clamp(1.25rem,5vw,3.5rem)}

/* Hero — centered, one action */
.hero{display:block;max-width:47.5rem;margin:0 auto;padding:clamp(4rem,10vh,6rem) 0 clamp(3.5rem,8vh,5rem);text-align:center}
.hero .kicker{margin-bottom:1.6rem}
.hero h1{font-size:clamp(2.6rem,7.5vw,5.5rem);line-height:.98;letter-spacing:-.035em;text-wrap:balance;max-width:none;padding-bottom:.06em}
.hero h1 em{color:var(--pine)}
.hero-intro{margin:1.75rem auto 0;max-width:46ch;font-size:1.19rem;line-height:1.5;text-wrap:balance}
.hero-step{margin:1.4rem auto 0;font-size:1.02rem;color:var(--bone)}
.hero .cta{margin-top:1.2rem;font-size:1.12rem;padding:1.1rem 2.1rem}
.hero .freeline{margin-top:1.2rem;font-size:.75rem;letter-spacing:.12em;text-transform:uppercase;color:var(--bone-faint)}
.hero-help{margin-top:1rem;font-size:.9rem;color:var(--bone-soft)}
.hero-help a{color:inherit;text-underline-offset:3px}
.hero-help a:hover{color:var(--pine)}

/* Supporting prose — narrower than the hero, quieter than the strip */
.intro{max-width:44rem;margin:0 auto;padding:0 0 3.5rem;color:var(--bone-soft);font-size:1.02rem;line-height:1.65}
.intro p+p{margin-top:1rem}
.intro strong{color:var(--bone);font-weight:600}

/* Barrier strip — three up, top rules */
.ledger{border-top:1px solid var(--line);padding:0 0 4.5rem}
.ledger-head{padding:2.4rem 0 1.4rem;color:var(--bone-faint);font-size:.72rem;font-weight:600;letter-spacing:.3em;text-transform:uppercase}
.strip{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:0}
.strip .row{display:block;padding:1.75rem 1.75rem 0 0;border-top:1px solid var(--line);border-bottom:0}
.strip .row+.row{padding-left:1.75rem}
.strip .num{font-weight:600;font-variant-numeric:tabular-nums;font-size:2.5rem;line-height:1;letter-spacing:-.02em;color:var(--bone-faint)}
.strip .row:nth-child(odd) .num{color:var(--pine)}
.strip h3{font-size:1.25rem;font-weight:600;letter-spacing:-.01em;margin:1.1rem 0 .5rem;text-wrap:balance}
.strip p{font-size:.95rem;line-height:1.55;color:var(--bone-soft);max-width:38ch}

/* How it works — title left, steps right */
.story{display:grid;grid-template-columns:1fr 2fr;column-gap:3rem;margin:0;padding:3rem 0 4rem;border-top:1px solid var(--line)}
.story h2{grid-column:1;grid-row:1/5;font-size:clamp(1.8rem,3vw,2.5rem);line-height:1.1;letter-spacing:-.025em;max-width:12ch}
.story p{grid-column:2;max-width:56ch;color:var(--bone-soft);font-size:1.02rem;line-height:1.6;margin-bottom:1rem}
.story p:last-child{margin-bottom:0}

/* Mast band — full bleed, pine-deep; the one amber moment on the page */
.mast-band{position:relative;z-index:1;background:var(--pine-deep);color:#f4f4ef;padding:5.5rem clamp(1.25rem,5vw,3.5rem)}
.mast-band ::selection{background:var(--light);color:var(--pine-deep)}
.mast-inner{max-width:45rem;margin:0 auto;display:grid;grid-template-columns:auto 1fr;gap:2.5rem;align-items:stretch}
.mast-line{width:2px;min-height:12.5rem;border-radius:2px;background:linear-gradient(180deg,var(--light),rgba(232,193,90,0))}
.mast-band h2{font-size:.72rem;font-weight:600;letter-spacing:.3em;text-transform:uppercase;color:var(--light);margin-bottom:1.4rem}
.mast-band .quote{font-size:clamp(1.45rem,2.6vw,1.9rem);font-weight:500;line-height:1.3;letter-spacing:-.015em;color:#f4f4ef;text-wrap:balance;max-width:30ch}
.mast-band p{color:rgba(244,244,239,.72);font-size:1.06rem;line-height:1.6;max-width:52ch;margin-top:1.1rem}
.mast-band .cta{margin-top:2rem;background:transparent;color:#f4f4ef;border:1.5px solid rgba(244,244,239,.5);box-shadow:none;font-size:1rem;padding:.85rem 1.6rem}
.mast-band .cta:hover{background:#f4f4ef;color:var(--pine-deep);border-color:#f4f4ef}
.mast-band a:focus-visible{outline-color:#f4f4ef}

/* Privacy card */
.band{margin:4rem 0 0;border:0;border-left:0;border-radius:.7rem;background:var(--ground-2)}
.band-inner{max-width:none;display:grid;grid-template-columns:1fr 2fr;gap:3rem;padding:2.3rem}
.band h3{font-size:1.35rem;line-height:1.2;max-width:14ch}
.band p{max-width:56ch}

/* Footer — origin left, crisis card right */
footer{margin-top:4rem;padding:3.5rem 0 3rem;border-top:1px solid var(--line)}
footer .cols{display:grid;grid-template-columns:1.2fr 1fr;gap:3.5rem;align-items:start}
.origin h2{font-size:.72rem;font-weight:600;letter-spacing:.3em;text-transform:uppercase;color:var(--bone-faint);margin-bottom:1rem}
.origin p{color:var(--bone-soft);font-size:1rem;line-height:1.6;max-width:56ch}
footer .legal{margin-top:1.4rem;font-size:.82rem;line-height:1.6;color:var(--bone-faint);max-width:56ch}
footer .legal a{color:var(--bone-soft);text-decoration:none}
footer .legal a:hover{color:var(--pine)}
.crisis-card{border:1px solid var(--line);border-radius:12px;padding:1.4rem 1.5rem;background:rgba(244,244,239,.6)}
.crisis-card .crisis-big{font-size:.82rem;color:var(--bone-soft);line-height:1.4}
.crisis-card .crisis-big b{display:block;font-size:1.65rem;line-height:1.3;color:var(--pine);margin-top:.2rem}
.crisis-card .crisis-big a{text-decoration:none}
.crisis-card p{font-size:.82rem;line-height:1.55;color:var(--bone-soft);max-width:none}
.crisis-card p+p{margin-top:.7rem}
.links{display:flex;flex-wrap:wrap;gap:.4rem .9rem;margin-top:1rem}
.links a{font-size:.82rem;color:var(--bone-soft);text-decoration:none}
.links a:hover{color:var(--pine)}
footer .legal+.legal{margin-top:.9rem}
.site-links{margin-top:.9rem}

a:focus-visible,button:focus-visible{outline:2px solid var(--pine);outline-offset:4px}

@media(max-width:760px){
  .hero{padding-top:3.5rem;padding-bottom:3rem}
  .hero h1{font-size:clamp(2.6rem,11vw,4.2rem)}
  .hero-intro{font-size:1.08rem}
  .helpbar .crisis{font-size:.74rem}
  .nav-right .donate-btn{font-size:.75rem;padding:.35rem .65rem}
  .intro{padding-bottom:2.5rem}
  .strip{grid-template-columns:1fr}
  .strip .row,.strip .row+.row{padding:1.4rem 0 1.6rem}
  .strip .num{font-size:2rem}
  .ledger{padding-bottom:2.5rem}
  .story{display:block;padding:2.2rem 0 2.8rem}
  .story h2{max-width:none;font-size:2rem;margin-bottom:1rem}
  .mast-band{padding:3.5rem clamp(1.25rem,5vw,3.5rem)}
  .mast-inner{grid-template-columns:auto 1fr;gap:1.4rem}
  .band-inner{grid-template-columns:1fr;gap:.6rem;padding:1.5rem}
  .band h3{max-width:none}
  footer{margin-top:2.5rem;padding-top:2.5rem}
  footer .cols{grid-template-columns:1fr;gap:2rem}
  footer .cols > div:first-child{order:2}
  footer .cols > .crisis-card{order:1}
}
@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}*{animation:none!important;transition:none!important}}