/* Stadium Stride system layer. Loaded last on every inner page.
   It carries the home page's design through the rest of the site without touching each page's layout:
   three type voices (Anton = the stadium, Newsreader = people talking, Archivo = interface),
   black / chalk / track red, pill buttons, plain labels, a quiet header, and no decorative motion. */
:root{
  --ink:#000; --ink-2:#141413; --line:#2B2A28; --muted:#A8A398;
  --body:"Archivo",system-ui,-apple-system,"Segoe UI",sans-serif;
  --mono:"Archivo",system-ui,-apple-system,"Segoe UI",sans-serif;
  --voice:"Newsreader","Iowan Old Style",Georgia,serif;
  --gut:clamp(18px,4vw,48px);
}
body{font-family:var(--body);background:var(--ink)}
body::before{background:var(--ink)}
::selection{background:#E0362C;color:#fff}
:focus-visible{outline-color:var(--bone)}
.band :focus-visible,.support :focus-visible{outline-color:#000}
.wrap{max-width:1288px;padding-left:max(var(--gut),env(safe-area-inset-left,0px));padding-right:max(var(--gut),env(safe-area-inset-right,0px))}

/* ---------- type ---------- */
main h2{font-family:var(--voice)!important;font-weight:400;text-transform:none;font-size:clamp(36px,5.2vw,68px)!important;line-height:1.06!important;letter-spacing:-.012em}
@media (max-width:480px){main h2{font-size:clamp(36px,5.2vw,68px)!important}}
.sec-head{margin-bottom:clamp(36px,5vw,64px)}
.sec-head h2{grid-column:1 / span 7!important}
.sec-head p{grid-column:8 / span 5!important;max-width:40ch}
@media (max-width:900px){.sec-head h2,.sec-head p{grid-column:1 / -1!important}}
.eyebrow{font-size:15px;letter-spacing:0;text-transform:none;font-weight:500;color:var(--muted)}
.band .eyebrow{color:var(--muted-ink)}
.hero h1 .ln > span,.page-hero h1 .ln > span{animation:none}
.page-hero .lede{font-family:var(--voice);font-size:clamp(22px,2.4vw,30px);line-height:1.32;color:var(--bone);max-width:32em}
.support h3{font-family:var(--voice);font-weight:500;text-transform:none;letter-spacing:-.01em;line-height:1.1}
label,legend,.lbl,th,.k,.facts b,.sources h4,.fld label,.lanes legend,.nl label.nl-l{letter-spacing:0!important;text-transform:none!important}

/* ---------- buttons ---------- */
.btn{border-radius:999px;border-width:1.5px;padding:15px 26px;font:600 16px/1.1 var(--body);letter-spacing:0;text-transform:none}
.btn .arr,.site-cta .arr,.go .arr,.nl button .arr{display:none}
.lift:hover{transform:none}

/* ---------- header ---------- */
.site-top{background:var(--ink);-webkit-backdrop-filter:none;backdrop-filter:none;border-bottom:0;font-family:var(--body)}
.site-top .bar{max-width:1288px;height:68px;gap:26px;padding-left:max(var(--gut),env(safe-area-inset-left,0px));padding-right:max(var(--gut),env(safe-area-inset-right,0px))}
.site-top .brand{font-family:var(--display);font-weight:400;font-size:19px;line-height:.98;letter-spacing:.015em;gap:12px}
.site-top .brand .brand-mark{width:52px;height:auto}
.site-top .site-nav{font-size:15px;gap:26px}
.site-top .site-nav a{color:var(--muted);border-bottom:2px solid transparent}
.site-top .site-nav a::after{display:none}
.site-top .site-nav a:hover{color:var(--bone)}
.site-top .site-nav a[aria-current="page"]{color:var(--bone);border-bottom-color:var(--red)}
.site-top .site-cta{height:40px;padding:0 20px;border:0;border-radius:999px;font:600 15px/1 var(--body);letter-spacing:0;text-transform:none}
.site-top .lapbar{display:none}
.site-top .menu-btn{width:auto;height:auto;border:0;padding:12px 0;font:600 17px/1 var(--body);color:var(--bone)}
.site-top .menu-btn i{display:none}
.site-top .menu-btn::after{content:"Menu"}
.menu-open .site-top .menu-btn::after{content:"Close"}
@media (max-width:1280px) and (min-width:1081px){.site-top .site-nav{gap:18px;font-size:14px}.site-top .bar{gap:18px}}
@media (max-width:1080px){.site-top .site-cta{display:none}.site-top .menu-btn{margin-left:auto}}
@media (max-width:560px){.site-top .bar{height:68px}.site-top .brand{font-size:19px;gap:12px}.site-top .brand .brand-mark{width:52px;height:auto}}

.mnav{clip-path:none;visibility:hidden;transition:none;justify-content:flex-start;gap:0;background:var(--ink);overflow-y:auto;padding:calc(92px + env(safe-area-inset-top,0px)) max(var(--gut),env(safe-area-inset-right,0px)) 40px max(var(--gut),env(safe-area-inset-left,0px))}
.menu-open .mnav{clip-path:none;visibility:visible}
.mnav a{font-family:var(--voice);font-size:clamp(30px,8.4vw,44px);line-height:1.1;text-transform:none;transform:none;opacity:1;transition:none;padding-block:11px;border-bottom:1px solid var(--line)}
.mnav a:hover{color:var(--bone)}
.mnav a[aria-current="page"]{color:var(--red)}
.mnav .mnav-cta{margin-top:28px;border:0;border-radius:999px;font:600 17px/1 var(--body);letter-spacing:0;padding:17px 28px;color:#fff}

/* ---------- newsletter block (injected by newsletter.js) ---------- */
body .nl h2{font-family:var(--voice);text-transform:none;font-size:clamp(36px,5.2vw,68px);line-height:1.06;letter-spacing:-.012em}
body .nl .nl-copy p,body .nl .nl-msg{font-family:var(--body)}
body .nl .nl-in{max-width:1288px;padding-left:max(var(--gut),env(safe-area-inset-left,0px));padding-right:max(var(--gut),env(safe-area-inset-right,0px))}
body .nl label.nl-l{font:500 15px var(--body);color:var(--bone)}
body .nl .nl-row{border:0;gap:12px;flex-wrap:wrap}
body .nl input[type=email]{flex:1 1 220px;min-height:52px;padding:0 22px;border:1.5px solid var(--bone);border-radius:999px;font-family:var(--body)}
body .nl input[type=email]:focus{border-color:var(--red)}
body .nl button{min-height:52px;border:0;border-radius:999px;padding:0 28px;font:600 17px/1 var(--body);letter-spacing:0;text-transform:none}
@media (max-width:480px){body .nl .nl-row{flex-direction:row}body .nl button{border-top:0;padding:0 28px}}

/* ---------- 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:#000;color:#F3EFE6;font:600 13px/1 var(--body);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:#F3EFE6;stroke-opacity:.3;stroke-width:3}
.lap-p{fill:none;stroke:#E0362C;stroke-width:3;stroke-linecap:round;stroke-dasharray:100;stroke-dashoffset:100}
.lap-r{fill:#F3EFE6}
.menu-open .lap{display:none}

/* ---------- no tracked-out capitals on small labels (list generated from the pages' own label rules) ---------- */
.eyebrow,
.pres,
.facts b,
.dots .lbl,
.dots .cta,
.slots div,
.mm-cta,
.minimap .leaflet-tooltip,
.way .go,
.lanes legend,
.fld label,
.sources h4,
.climb p b,
.role .tags span,
.role .pick,
.ros .when,
.ros .when b,
.bib .bt,
.bib .bb,
.bibform label,
.chips button,
.tag,
.field label,
.result .k,
.reg label,
.reg .lbl,
.flow th,
.pcard .open,
.glance dt,
.guess .state,
.guess .chip,
.sub label,
.mapbar,
.mapbtn{text-transform:none!important;letter-spacing:0!important}
footer a,footer span{text-transform:none!important;letter-spacing:0!important;font-size:15px}

/* ---------- small controls take the pill shape too ---------- */
.mm-cta,.mapbtn,.role .pick,.chips button,.chips label,.role .tags span,.guess .chip,.pcard .open{border-radius:999px}
.way .go,.role .pick{font-size:15px;font-weight:600}

/* ---------- the human voice: long passages are set in the serif, like a letter ---------- */
.why .body{font-family:var(--voice);font-size:clamp(21px,2.1vw,27px);line-height:1.46;color:var(--bone)}
.band .why .body,.band.why .body{color:var(--ink)}
.why .body strong{font-weight:500}
main .letter p{font-family:var(--voice);font-size:clamp(20px,2vw,25px);line-height:1.48;color:var(--bone)}
.band .letter p{color:var(--ink)}

/* ---------- colour rhythm and scale, site-wide (Nov 9, second pass) ----------
   Same rules as the home page. Body text is full strength, never grey. Every page gets one red
   "poster" section that carries its loudest line at stadium size, so scrolling moves black, red, chalk.
   The poster sections are picked per page by what they contain. */
:root{--muted:#D4CFC4;--muted-ink:#34322E}

/* poster sections */
main:has(.climb) > section.band:nth-of-type(2),
.band:has(.why-only),
.band:has(.creed),
.band:has(.thesis){background:var(--red);color:#000}
:is(main:has(.climb) > section.band:nth-of-type(2), .band:has(.why-only), .band:has(.creed), .band:has(.thesis)) :is(p,li,.body,.eyebrow){color:#000}
:is(main:has(.climb) > section.band:nth-of-type(2), .band:has(.why-only), .band:has(.creed), .band:has(.thesis)) .red{color:var(--bone)}
:is(main:has(.climb) > section.band:nth-of-type(2), .band:has(.why-only), .band:has(.creed), .band:has(.thesis)) :focus-visible{outline-color:#000}
html.reading :is(main:has(.climb) > section.band:nth-of-type(2), .band:has(.why-only), .band:has(.creed), .band:has(.thesis)) .rw{color:inherit!important}

/* the loud line in each poster section */
main:has(.climb) > section.band:nth-of-type(2) h2,
main .creed h2{font-family:var(--display)!important;text-transform:uppercase;font-size:clamp(56px,11vw,160px)!important;line-height:.94!important;letter-spacing:-.005em}
main:has(.climb) > section.band:nth-of-type(2) .why{display:block}
main:has(.climb) > section.band:nth-of-type(2) .body{margin-top:clamp(28px,4vw,56px);font-family:var(--body);font-size:clamp(18px,1.6vw,21px);font-weight:500;line-height:1.45;max-width:none;display:grid;gap:18px}
@media (min-width:760px){main:has(.climb) > section.band:nth-of-type(2) .body{grid-template-columns:repeat(3,minmax(0,1fr));gap:40px}}
.why-only .big{font-size:clamp(46px,8.4vw,128px);line-height:.95}
.why-only .big span,.thesis blockquote em{color:var(--bone)}
.thesis blockquote{font-size:clamp(50px,9.6vw,140px)!important;line-height:.95!important}

/* statements and names at stadium size on every page */
.see .big{font-size:clamp(38px,6vw,84px)}
.fq blockquote{font-size:clamp(44px,7vw,104px)}