/* Stadium Stride home page.
   Three voices: Anton is the stadium (headline, lanes, 988). Newsreader is the people talking.
   Archivo is the interface. Black, chalk and track red only; sage is reserved for the 988 block. */
:root{
  --black:#000; --chalk:#F3EFE6; --red:#E0362C; --dim:#A8A398; --rule:#2B2A28; --sage:#9DB4A6;
  --stadium:"Anton","Impact","Arial Narrow",sans-serif;
  --voice:"Newsreader","Iowan Old Style",Georgia,serif;
  --ui:"Archivo",system-ui,-apple-system,"Segoe UI",sans-serif;
  --gut:clamp(18px,4vw,48px);
  --sec:clamp(76px,11vw,152px);
  --stagger:16px;
  color-scheme:dark;
}
@media (min-width:900px){:root{--stagger:5vw}}

*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{margin:0;background:var(--black);color:var(--chalk);font:400 17px/1.55 var(--ui);-webkit-font-smoothing:antialiased}
a{color:inherit}
p{margin:0}
[hidden]{display:none!important}
::selection{background:var(--red);color:#fff}
:focus-visible{outline:3px solid var(--chalk);outline-offset:3px}
.wrap{max-width:1288px;margin-inline:auto;padding-left:max(var(--gut),env(safe-area-inset-left,0px));padding-right:max(var(--gut),env(safe-area-inset-right,0px))}

/* shared pieces */
.h{font:400 clamp(36px,5.2vw,68px)/1.06 var(--voice);letter-spacing:-.012em;margin:0;text-wrap:balance}
.head{display:grid;gap:14px;margin-bottom:clamp(36px,5vw,64px)}
.head p{color:var(--dim);max-width:40ch}
@media (min-width:900px){.head{grid-template-columns:minmax(0,7fr) minmax(0,5fr);align-items:end;gap:48px}}
.sec{padding-block:var(--sec)}
.btn{display:inline-flex;align-items:center;justify-content:center;min-height:52px;padding:0 28px;border:0;border-radius:999px;background:var(--red);color:#fff;font:600 17px/1 var(--ui);text-decoration:none;cursor:pointer;transition:background-color .18s,color .18s}
.btn:hover{background:var(--chalk);color:var(--black)}
.btn-sm{min-height:40px;padding:0 20px;font-size:15px}
.link{font-weight:500;text-decoration:underline;text-decoration-thickness:1.5px;text-underline-offset:6px;text-decoration-color:var(--red)}
.link:hover{text-decoration-color:var(--chalk)}

/* header */
.top{position:sticky;top:0;z-index:40;background:var(--black);padding-top:env(safe-area-inset-top,0px)}
.top-in{display:flex;align-items:center;gap:26px;min-height:68px}
.brand{display:flex;align-items:center;gap:12px;margin-right:auto;text-decoration:none}
.brand svg{width:52px;height:auto;display:block}
.brand b{font:400 19px/.98 var(--stadium);text-transform:uppercase;letter-spacing:.015em}
.brand i{font-style:normal;color:var(--red)}
.nav{display:none;gap:26px;font-size:15px;font-weight:500}
.nav a{text-decoration:none;color:var(--dim);padding-block:6px;border-bottom:2px solid transparent;transition:color .18s}
.nav a:hover{color:var(--chalk)}
.nav a[aria-current]{color:var(--chalk);border-bottom-color:var(--red)}
.top-cta{display:none}
.menu-btn{appearance:none;background:none;border:0;padding:12px 0;color:var(--chalk);font:600 17px/1 var(--ui);cursor:pointer}
@media (min-width:1120px){.nav{display:flex}.top-cta{display:inline-flex}.menu-btn{display:none}}

.menu{position:fixed;inset:0;z-index:39;background:var(--black);overflow-y:auto;padding:calc(92px + env(safe-area-inset-top,0px)) 0 40px}
.menu .wrap{display:flex;flex-direction:column;align-items:flex-start}
.menu a:not(.btn){font:400 clamp(30px,8.4vw,44px)/1.1 var(--voice);text-decoration:none;padding-block:11px;width:100%;border-bottom:1px solid var(--rule)}
.menu a[aria-current]{color:var(--red)}
.menu .btn{margin-top:28px}
html.menu-open{overflow:hidden}

/* hero: the stadium from above */
.hero{padding-block:clamp(10px,1.6vw,24px) clamp(64px,9vw,120px)}
.track{position:relative;container-type:size;width:100%;aspect-ratio:.68;display:grid;place-items:center;text-align:center}
.track-art{position:absolute;inset:0;width:100%;height:100%;display:block}
.track-copy{position:relative;display:grid;gap:3cqw;justify-items:center}
.track h1{margin:0;font:400 18vw/.98 var(--stadium);font-size:19.5cqw;text-transform:uppercase;letter-spacing:.005em}
.track h1 span{display:block}
.track h1 i{font-style:normal;color:var(--red)}
.track-copy p{font:500 clamp(14px,4.1cqw,16px)/1.2 var(--ui);color:var(--chalk)}
@media (min-width:700px){
  .track{aspect-ratio:2.2}
  .track-copy{gap:1.6cqw}
  .track h1{font-size:8.4cqw}
  .track h1 span{display:inline}
  .track-copy p{font-size:clamp(15px,1.5cqw,19px)}
}

.hero-copy{display:grid;gap:26px;margin-top:clamp(40px,6vw,76px)}
.lead{font:400 clamp(34px,5.4vw,72px)/1.04 var(--voice);letter-spacing:-.015em;text-wrap:balance}
.hero-side{display:grid;gap:26px}
.hero-side p{font-size:clamp(17px,1.5vw,19px);color:var(--dim);max-width:46ch}
.actions{display:flex;flex-wrap:wrap;align-items:center;gap:14px 28px}
@media (min-width:900px){.hero-copy{grid-template-columns:minmax(0,7fr) minmax(0,5fr);gap:48px;align-items:end}.lead > span{display:block}}

.next{display:grid;gap:4px 28px;margin-top:clamp(52px,7vw,96px);padding-block:20px 22px;border-top:2px solid var(--chalk);border-bottom:2px solid var(--chalk);text-decoration:none}
.next-k{font-size:15px;color:var(--dim)}
.next-n{font:400 clamp(40px,6vw,76px)/1 var(--stadium);text-transform:uppercase}
.next-w{color:var(--dim)}
.next-go{margin-top:12px;font-weight:600;text-decoration:underline;text-decoration-color:var(--red);text-decoration-thickness:1.5px;text-underline-offset:6px}
.next:hover .next-n{color:var(--red)}
@media (min-width:900px){
  .next{grid-template-columns:minmax(0,7fr) minmax(0,5fr);align-items:end}
  .next-k{grid-column:1 / -1}
  .next-n{grid-row:2 / span 2}
  .next-go{margin-top:6px}
}

/* why we run: set like a letter */
.why{padding-top:clamp(20px,4vw,56px)}
.why-in{display:grid;gap:30px}
.letter{font:400 clamp(21px,2.1vw,27px)/1.46 var(--voice);max-width:33em}
.letter p + p{margin-top:1em}
.letter .pull{font-style:italic;font-size:clamp(36px,5vw,66px);line-height:1.05;letter-spacing:-.015em;margin-block:.62em .66em;text-wrap:balance}
@media (min-width:900px){.why-in{grid-template-columns:minmax(0,4fr) minmax(0,8fr);gap:48px}}

/* not another awareness walk */
.more{padding-top:0}
.diff{margin:0;display:grid;gap:34px}
.diff div{border-top:1px solid var(--rule);padding-top:20px}
.diff dt{font:400 clamp(26px,3vw,36px)/1.12 var(--voice);letter-spacing:-.01em}
.diff dd{margin:10px 0 0;color:var(--dim);max-width:44ch}
@media (min-width:760px){.diff{grid-template-columns:repeat(2,minmax(0,1fr));gap:52px 64px}}

/* how we fight it: down on the track, four lanes with a staggered start */
.lanes{background:var(--red);color:var(--black);padding-top:var(--sec)}
.lanes .head p{color:var(--black);font-weight:500}
.lane-list{list-style:none;margin:0;padding:0;border-bottom:3px solid var(--chalk)}
.lane{--s:calc(max(var(--gut),env(safe-area-inset-left,0px)) + var(--i) * var(--stagger));position:relative;border-top:3px solid var(--chalk);padding:20px var(--gut) 28px calc(var(--s) + 20px)}
.lane::before{content:"";position:absolute;left:var(--s);top:0;bottom:0;width:3px;background:var(--chalk)}
.lane-in{display:grid;grid-template-columns:auto minmax(0,1fr);column-gap:.42em;align-items:baseline;font-size:clamp(60px,9.4vw,124px)}
.lane-n,.lane-v{font:400 1em/1 var(--stadium);text-transform:uppercase;margin:0}
.lane-n{color:var(--chalk)}
.lane-in p{grid-column:1 / -1;margin-top:12px;font-size:17px;font-weight:500;line-height:1.5;max-width:40ch}
@media (min-width:900px){
  .lane{padding-block:26px 30px;padding-left:calc(var(--s) + 28px)}
  .lane-in{grid-template-columns:auto minmax(0,5fr) minmax(0,5fr);column-gap:36px;align-items:center}
  .lane-in p{grid-column:auto;margin-top:0;font-size:18px}
}
@media (min-width:1288px){.lane{--s:calc((100vw - 1288px) / 2 + var(--gut) + var(--i) * var(--stagger))}}

/* founder */
.founder blockquote{margin:0;font:400 clamp(32px,4.8vw,64px)/1.1 var(--voice);letter-spacing:-.015em;max-width:21em;text-wrap:balance}
.founder figure{margin-block:0}
.founder figcaption{display:flex;flex-wrap:wrap;gap:8px 28px;align-items:baseline;margin-top:28px;color:var(--dim)}
.founder figcaption .link{color:var(--chalk)}

/* keep going: an index, not cards */
.index{padding-top:0}
.index ul{list-style:none;margin:0;padding:0;border-bottom:1px solid var(--rule)}
.index li a{display:grid;gap:6px;padding-block:22px 24px;border-top:1px solid var(--rule);text-decoration:none}
.index .t{font:400 clamp(28px,3.4vw,44px)/1.1 var(--voice);letter-spacing:-.01em;text-decoration:underline;text-decoration-color:transparent;text-decoration-thickness:2px;text-underline-offset:8px;transition:text-decoration-color .18s}
.index .d{color:var(--dim);max-width:48ch}
.index li a:hover .t,.index li a:focus-visible .t{text-decoration-color:var(--red)}
@media (min-width:900px){.index li a{grid-template-columns:minmax(0,5fr) minmax(0,7fr);gap:48px;align-items:baseline}}

/* newsletter */
.loop{padding-top:0}
.loop-in{display:grid;gap:30px}
.loop-in > div p{margin-top:14px;color:var(--dim);max-width:44ch}
.loop form{display:grid;gap:10px;align-self:end}
.loop label{font-size:15px;font-weight:500}
.loop .field{display:flex;flex-wrap:wrap;gap:12px}
.loop input[type=email]{flex:1 1 220px;min-width:0;min-height:52px;padding:0 22px;border:1.5px solid var(--chalk);border-radius:999px;background:transparent;color:var(--chalk);font:400 17px var(--ui)}
.loop input[type=email]::placeholder{color:#7C776D}
.loop input[type=email]:focus{outline:none;border-color:var(--red)}
.loop .btn[disabled]{opacity:.6;cursor:default}
.loop .hp{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden}
.loop .msg{min-height:1.5em;font-size:15px;color:var(--dim)}
.loop .msg.ok{color:var(--sage)}
.loop .msg.err{color:#FF7A70}
@media (min-width:900px){.loop-in{grid-template-columns:minmax(0,7fr) minmax(0,5fr);gap:48px}}

/* 988: kept calm on purpose. No effects here. */
.support{background:var(--sage);color:var(--black)}
.support .wrap{padding-block:48px;display:flex;flex-wrap:wrap;gap:20px 48px;justify-content:space-between;align-items:center}
.support h2{margin:0;font:500 clamp(30px,3.8vw,44px)/1.1 var(--voice);letter-spacing:-.01em}
.support p{margin-top:10px;max-width:54ch}
.support .num{font:400 clamp(76px,9vw,112px)/1 var(--stadium);text-decoration:none}
.support :focus-visible{outline-color:var(--black)}

.foot .wrap{padding-block:36px calc(36px + env(safe-area-inset-bottom,0px));display:flex;flex-wrap:wrap;gap:10px 28px;justify-content:space-between;font-size:15px;color:var(--dim)}

@media (prefers-reduced-motion:reduce){*,*::before,*::after{transition:none!important;animation:none!important}}

/* ---------- motion ---------- */
/* starting gun: each verb comes off its start line, lane by lane, once */
.js .lane-in{clip-path:inset(0 100% 0 0)}
.js .lanes.go .lane-in{clip-path:inset(0 -4% 0 0);transition:clip-path .75s cubic-bezier(.2,.7,.2,1);transition-delay:calc(var(--i) * .13s)}

/* lap ring: scroll progress as a lap, and the way back to the top */
.lap{position:fixed;right:16px;bottom:calc(16px + env(safe-area-inset-bottom,0px));z-index:30;width:84px;height:52px;padding:0;border:0;border-radius:26px;background:var(--black);color:var(--chalk);font:600 13px/1 var(--ui);cursor:pointer;display:grid;place-items:center;opacity:0;visibility:hidden;transform:translateY(12px);transition:opacity .2s,transform .2s,visibility 0s .2s}
.lap.show{opacity:1;visibility:visible;transform:none;transition:opacity .2s,transform .2s}
.lap svg{position:absolute;inset:0;width:100%;height:100%}
.lap span{position:relative}
.lap-t{fill:none;stroke:var(--chalk);stroke-opacity:.3;stroke-width:3}
.lap-p{fill:none;stroke:var(--red);stroke-width:3;stroke-linecap:round;stroke-dasharray:100;stroke-dashoffset:100}
.lap-r{fill:var(--chalk)}
html.menu-open .lap{display:none}
.track{cursor:pointer}

/* ---------- colour rhythm and scale (Nov 9, second pass) ----------
   The page moves black, red, chalk, red, black, chalk, black, so scrolling feels like going somewhere.
   Each section has one thing that is much bigger than everything else in it. Body text is full strength,
   never grey on black; grey is only for small supporting lines. */
.lead .hot{color:var(--red)}
.hero-side p{color:var(--chalk)}

.why{padding-bottom:clamp(56px,8vw,110px)}
.letter{font-size:clamp(26px,3.3vw,42px);line-height:1.24;letter-spacing:-.01em;max-width:24em}

/* the loudest line on the page, alone on red */
.poster{background:var(--red);color:var(--black);padding-block:clamp(64px,9vw,128px)}
.shout{font:400 clamp(58px,12vw,176px)/.93 var(--stadium);text-transform:uppercase;letter-spacing:-.005em;text-wrap:balance;max-width:11em}
.poster-sub{display:grid;gap:18px;margin-top:clamp(32px,4.5vw,60px);font-size:clamp(18px,1.6vw,21px);font-weight:500;line-height:1.45}
.poster-sub p{max-width:36ch}
@media (min-width:760px){.poster-sub{grid-template-columns:repeat(2,minmax(0,1fr));gap:48px}}
.poster :focus-visible{outline-color:var(--black)}

/* not another awareness walk: chalk, black type, four statements at stadium size */
.more{background:var(--chalk);color:var(--black);padding-block:var(--sec)}
.more .head p,.index .head p{color:#45423C}
.more .diff{display:block}
.more .diff div{border-top:2px solid var(--black);padding-block:20px 26px;display:grid;gap:8px}
.more .diff div:last-child{border-bottom:2px solid var(--black)}
.more .diff dt{font:400 clamp(38px,6vw,84px)/.98 var(--stadium);text-transform:uppercase;letter-spacing:0}
.more .diff dd{margin:0;color:#45423C;font-size:18px;max-width:40ch}
@media (min-width:900px){.more .diff div{grid-template-columns:minmax(0,7fr) minmax(0,5fr);gap:48px;align-items:end}}
.more :focus-visible,.index :focus-visible{outline-color:var(--black)}

/* founder: the quote is the section */
.founder blockquote{font-size:clamp(38px,6.2vw,92px);line-height:1.04;max-width:16em}

/* keep going: chalk again, links at stadium size */
.index{background:var(--chalk);color:var(--black);padding-block:var(--sec)}
.index ul{border-bottom:2px solid var(--black)}
.index li a{border-top:2px solid var(--black)}
.index .t{font:400 clamp(38px,5.6vw,76px)/1 var(--stadium);text-transform:uppercase;letter-spacing:0;text-decoration:none;transition:color .15s}
.index .d{color:#45423C}
.index li a:hover .t,.index li a:focus-visible .t{color:var(--red)}
.loop{padding-top:var(--sec)}