/* BASE + TYPE SCALE (tz.type_scale) === */
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{margin:0;background:var(--paper);color:var(--graphite);font-family:var(--sans);font-size:clamp(1rem,.96rem + .2vw,1.125rem);line-height:1.65;overflow-x:hidden;
  background-image:radial-gradient(color-mix(in srgb,var(--text-color) 4%,transparent) 1px,transparent 1.2px);background-size:5px 5px}
img,svg{display:block;max-width:100%}
a{color:var(--graphite);text-decoration-color:var(--sang);text-underline-offset:3px}
a:hover{color:var(--sang-d)}
:focus-visible{outline:2px solid var(--sang);outline-offset:3px}
[tabindex="-1"]:focus{outline:none}
h1,h2,h3,h4{font-family:var(--serif);font-weight:500;line-height:1.08;margin:0 0 .5em}
.display{font-size:clamp(2.75rem,1.6rem + 4.8vw,5.5rem);font-variant:small-caps;letter-spacing:.02em;line-height:1.02}
h1{font-size:clamp(2.25rem,1.5rem + 3vw,3.75rem)}
h2{font-size:clamp(1.75rem,1.3rem + 1.8vw,2.625rem)}
h3{font-size:clamp(1.25rem,1.1rem + .6vw,1.5rem);font-weight:600}
h4{font-size:1.15rem;font-weight:600}
p{margin:0 0 1em}
ul,ol{padding-left:1.2em}
.wrap{max-width:var(--max);margin:0 auto;padding:0 var(--gut)}
.small,.cap,.eyebrow{font-size:clamp(.78rem,.75rem + .12vw,.875rem)}
.eyebrow{font-weight:500;letter-spacing:.12em;text-transform:uppercase;color:var(--ink2);margin:0 0 1rem;display:flex;gap:.8em;flex-wrap:wrap;align-items:center}
.eyebrow b{color:var(--sang);font-weight:700}
.lede{font-family:var(--serif);font-size:clamp(1.2rem,1rem + .8vw,1.55rem);line-height:1.4;max-width:40ch}
.muted{color:var(--ink2)}
.sr{position:absolute!important;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.skip{position:absolute;left:12px;top:-60px;background:var(--graphite);color:var(--chalk);padding:.6em 1em;z-index:100}
.skip:focus{top:12px}
.flag{display:inline-block;font:700 .7rem/1.4 var(--sans);letter-spacing:.06em;text-transform:uppercase;border:1px solid var(--sang);color:var(--sang-d);padding:.05em .45em;vertical-align:middle}
.note{border-left:2px solid var(--sang);padding:.2em 0 .2em 1em;color:var(--ink2)}
.disclose{border:1px solid var(--sang);padding:1rem 1.2rem;background:color-mix(in srgb,var(--primary-color) 6%,transparent);margin:1.2rem 0;display:flex;gap:.9rem;align-items:flex-start}
.disclose strong{color:var(--sang-d)}
.tag{display:inline-block;font:700 .68rem/1 var(--sans);letter-spacing:.12em;text-transform:uppercase;padding:.45em .6em;border:1px solid currentColor;border-radius:999px}
.tag.s{color:var(--sang-d)}

/* PAGES + ROUTE TRANSITION (A4) === */
main{display:block;min-height:70vh}
[data-page][hidden]{display:none!important}
.js [data-page].page-out{opacity:0;transition:opacity .16s ease-out}
.js [data-page].page-in{animation:pageIn .42s var(--ease) both}
@keyframes pageIn{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none}}
.bookmark{position:fixed;left:max(6px,calc((100vw - var(--max))/2 - 14px));top:0;width:2px;height:100vh;background:var(--sang);transform:scaleY(0);transform-origin:top;z-index:70;pointer-events:none;opacity:0}
.bookmark.go{animation:bm .5s var(--ease) both}
@keyframes bm{0%{opacity:1;transform:scaleY(0)}70%{opacity:1;transform:scaleY(1)}100%{opacity:0;transform:scaleY(1)}}
.sec{padding:clamp(56px,8vw,112px) 0}
.sec.t{padding:clamp(36px,5vw,64px) 0}
.band{background:var(--paper-deep);border-top:1px solid var(--rule);border-bottom:1px solid var(--rule)}
.chalk{background:var(--chalk);border-top:1px solid var(--rule);border-bottom:1px solid var(--rule)}
.dark{background:var(--graphite);color:var(--chalk)}
.dark a{color:var(--chalk)}
.dark .btn{background:var(--chalk);color:var(--graphite);border-color:var(--chalk)}
.dark .btn:hover{background:var(--sang);border-color:var(--sang);color:var(--white)}
.dark .btn.ghost{background:transparent;color:var(--chalk)}
.dark :focus-visible{outline-color:color-mix(in srgb,var(--primary-color) 55%,var(--white))}
.ph-head{padding:clamp(40px,7vw,96px) 0 clamp(24px,4vw,44px);border-bottom:1px solid var(--rule-2)}
.ph-head h1{max-width:20ch}
.crumb{font-size:.78rem;letter-spacing:.14em;text-transform:uppercase;color:var(--ink2);margin-bottom:1rem}
.crumb a{text-decoration:none}
.g2{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:clamp(24px,4vw,64px)}
.g3{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:clamp(18px,2.6vw,36px)}
.split{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,7fr);gap:clamp(28px,5vw,80px);align-items:start}
.split.r{grid-template-columns:minmax(0,7fr) minmax(0,5fr)}
@media (max-width:900px){.g3{grid-template-columns:repeat(2,minmax(0,1fr))}.split,.split.r,.g2{grid-template-columns:minmax(0,1fr)}}
@media (max-width:600px){.g3{grid-template-columns:minmax(0,1fr)}}
.sh{display:flex;justify-content:space-between;align-items:end;gap:1rem 1.5rem;flex-wrap:wrap;margin-bottom:clamp(24px,4vw,48px)}
.sh h2{margin:0;max-width:22ch}
.sh p{margin:0;max-width:44ch}
.legal{max-width:76ch}
.legal h2{font-size:clamp(1.4rem,1.2rem + 1vw,1.9rem);margin-top:2.2rem}
.toc{columns:2;column-gap:2rem;padding-left:1.2em;margin:0 0 1.6rem}
@media (max-width:560px){.toc{columns:1}}
.ticks{list-style:none;padding:0;margin:0 0 1.2rem}
.ticks li{padding:.45rem 0 .45rem 1.6rem;border-bottom:1px solid var(--rule);position:relative}
.ticks li::before{content:"";position:absolute;left:0;top:1.1rem;width:.8rem;height:1px;background:var(--sang)}

/* The page scrollbar is themed from the project's tokens */
html{scrollbar-width:thin;scrollbar-color:var(--sang) var(--paper-deep)}
@supports not (scrollbar-color:auto){
  html::-webkit-scrollbar{width:10px}
  html::-webkit-scrollbar-track{background:var(--paper-deep)}
  html::-webkit-scrollbar-thumb{background:var(--sang)}
}
.nav-menu,.nav-menu li{display:contents;list-style:none;margin:0;padding:0}