@font-face{font-family:"Inter Tight";font-style:normal;font-weight:400 700;font-display:swap;src:url(/assets/inter-tight-latin.woff2) format("woff2")}
@font-face{font-family:"Inter Tight Fallback";src:local("Arial");size-adjust:97%;ascent-override:96%;descent-override:24%;line-gap-override:0%}
:root{--ink:#141414;--sand:#F5EDE4;--red:#8B0000;--red-lit:#E04545;--tick:rgba(245,237,228,.45);--gold:#D4A574}
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;overflow-x:clip}
body{margin:0;background:var(--ink);color:var(--sand);font:400 18px/1.6 "Inter Tight","Inter Tight Fallback",Arial,sans-serif;overflow-x:clip}
.wrap{width:100%;max-width:1200px;margin-inline:auto;padding-inline:24px}
.hero{min-height:100vh;min-height:100svh;display:flex;flex-direction:column;background:var(--ink);overflow-x:clip}
.hero .wrap{flex:1;display:flex;flex-direction:column;padding-block:24px 40px}
.logo{display:block;width:180px;height:auto;flex:none}
.stage{position:relative;container-type:inline-size;margin-top:clamp(56px,12svh,112px)}
h1{position:relative;margin:0;font-size:clamp(4rem,20vw,15rem);line-height:1;font-weight:700;letter-spacing:-.04em;color:var(--sand)}
.ln{display:block}
h1::before{content:"";position:absolute;inset:0;background:var(--ink);transform:translateX(100%)}
.stage::after{content:"";position:absolute;left:0;top:0;bottom:-24px;width:4px;background:var(--red-lit);transform:translateX(calc(100cqw - 4px))}
@supports not (width:1cqw){.stage::after{display:none}}
.ruler{position:relative;height:40px;margin-top:16px}
.rmn,.rmj{position:absolute;left:0;display:block;width:100%;transform-origin:bottom}
.rmn{bottom:0;height:16px}
.rmj{bottom:0;height:100%}
.rmn .t{fill:var(--tick)}
.rmj .t{fill:var(--red-lit)}
.intro{margin-top:40px}
.lede{margin:0;font-size:clamp(1.5rem,3.4vw,2.5rem);line-height:1.2;font-weight:600}
.from{margin:16px 0 0;max-width:34ch;font-size:18px;line-height:1.6}
.slab{background:var(--red);color:var(--sand);padding-block:80px}
.gold{display:block;width:96px;height:6px;margin-bottom:40px;background:var(--gold);transform-origin:left}
blockquote{margin:0}
blockquote p{margin:0;overflow-wrap:anywhere}
.kicker{display:block;margin-bottom:24px;font-size:24px;line-height:1.4;font-weight:500}
.cl{display:block;text-wrap:balance;font-size:clamp(2rem,6.4vw,6rem);line-height:1.08;font-weight:650;letter-spacing:-.025em}
figcaption{margin-top:40px;font-size:24px;font-weight:500}
figure{margin:0}
footer{background:var(--ink);padding-block:40px;font-size:16px}
footer .wrap{display:flex;flex-direction:column;align-items:flex-start;gap:8px 24px}
footer a{display:inline-block;min-height:44px;padding-block:10px;color:var(--sand);font-weight:500;text-decoration:underline;text-decoration-thickness:2px;text-underline-offset:3px}
footer a:hover{color:var(--gold);text-decoration-thickness:3px}
footer a:active{color:var(--sand);text-decoration-color:var(--gold);text-decoration-thickness:3px}
footer a:focus-visible{outline:3px solid var(--sand);outline-offset:3px;border-radius:2px}
.vh{position:absolute;width:1px;height:1px;margin:-1px;padding:0;overflow:hidden;clip-path:inset(50%);white-space:nowrap}
@media(min-width:640px){
.wrap{padding-inline:40px}
.logo{width:240px}
.hero .wrap{padding-block:40px 80px}.stage{margin-top:auto}
.ruler{height:56px}
.rmn{height:22px}
footer .wrap{flex-direction:row;justify-content:space-between;align-items:center;flex-wrap:wrap}
}
@media(min-width:1024px){
.logo{width:260px}
.intro{display:grid;grid-template-columns:repeat(12,1fr);column-gap:24px;align-items:last baseline}
.lede{grid-column:1/8}
.from{grid-column:9/13;margin:0}
.slab{padding-block:160px;min-height:70vh;min-height:70svh;display:flex;align-items:center}
}
@media(prefers-reduced-motion:no-preference){
h1::before{animation:cur 1.6s .9s cubic-bezier(.65,0,.35,1) both}
.stage::after{animation:cal 1.6s .9s cubic-bezier(.65,0,.35,1) both}
.rmj{animation:grow .7s .15s cubic-bezier(.2,.7,.2,1) both}
.rmn{animation:grow .7s .35s cubic-bezier(.2,.7,.2,1) both}
.lede{animation:wipe .7s 2.4s cubic-bezier(.4,0,.2,1) both}
.from{animation:wipe .7s 2.55s cubic-bezier(.4,0,.2,1) both}
@keyframes cur{from{transform:translateX(0)}to{transform:translateX(100%)}}
@keyframes cal{from{transform:translateX(0)}to{transform:translateX(calc(100cqw - 4px))}}
@keyframes grow{from{transform:scaleY(0)}to{transform:scaleY(1)}}
@keyframes wipe{from{clip-path:inset(-1em 100% -1em 0)}to{clip-path:inset(-1em -1em -1em 0)}}
@supports(animation-timeline:view()){
.gold,.kicker,.cl,figcaption{animation-timing-function:linear;animation-fill-mode:both;animation-timeline:view()}
.gold{animation-name:gr;animation-range:entry 10% entry 40%}
.kicker,.cl,figcaption{animation-name:qw}
.kicker{animation-range:entry 15% entry 45%}
.cl:nth-of-type(2){animation-range:entry 25% entry 55%}
.cl:nth-of-type(3){animation-range:entry 40% entry 70%}
.cl:nth-of-type(4){animation-range:entry 55% entry 85%}
figcaption{animation-range:entry 80% entry 100%}
@keyframes gr{from{transform:scaleX(0)}to{transform:scaleX(1)}}
@keyframes qw{from{clip-path:inset(-.2em 100% -.2em 0)}to{clip-path:inset(-.2em -.2em -.2em 0)}}
}
}
@media(max-width:639px){h1{font-size:clamp(4rem,22vw,9rem)}}
@media(forced-colors:active){.logo text{fill:CanvasText;fill-opacity:1}.logo line{stroke:CanvasText;stroke-opacity:1}}