@font-face{font-family:'Literata';src:url(fonts/literata-var-opsz-wght-latin.woff2) format('woff2');font-weight:200 900;font-display:swap}
@font-face{font-family:'DM Sans';src:url(fonts/dm-sans-var-wght-latin.woff2) format('woff2');font-weight:100 1000;font-display:swap}
@font-face{font-family:'DM Mono';src:url(fonts/dm-mono-400-latin.woff2) format('woff2');font-weight:400;font-display:swap}
@font-face{font-family:'DM Mono';src:url(fonts/dm-mono-500-latin.woff2) format('woff2');font-weight:500;font-display:swap}
:root{--cream:#ffedd7;--sand:#f6e0c6;--ink:#100904;--taupe:#6c5f51;--orange:#ff8a1f;--orange-text:#ad3e00;--black:#0a0a0a;--dash:rgba(16,9,4,.28);--px:clamp(20px,4.1vw,80px)}
*{box-sizing:border-box}
html{scroll-behavior:smooth;scroll-padding-top:70px}
body{margin:0;background:var(--cream);color:var(--ink);font:400 16px/1.55 'DM Sans',system-ui,sans-serif;-webkit-font-smoothing:antialiased;overflow-x:hidden}
a{color:inherit}
:focus-visible{outline:2px solid var(--orange-text);outline-offset:4px;border-radius:2px}
.skip{position:absolute;left:-999px;top:8px;background:var(--ink);color:var(--cream);padding:8px 14px;z-index:9}
.skip:focus{left:8px}
.top{display:flex;justify-content:space-between;align-items:center;height:60px;padding:0 var(--px);border-bottom:1px dashed var(--dash)}
.mark{display:flex;align-items:center;gap:10px;text-decoration:none;font:500 15px 'DM Mono',monospace}
.mark img{display:block;border-radius:6px}
nav{display:flex;gap:clamp(14px,2.2vw,32px)}
nav a{font:400 12px 'DM Mono',monospace;letter-spacing:.06em;text-decoration:none;color:var(--taupe);padding:6px 0;border-bottom:1px solid transparent;transition:color .2s,border-color .2s}
nav a:hover{color:var(--ink);border-color:var(--orange-text)}
.hero{display:grid;grid-template-columns:minmax(0,1.25fr) minmax(0,.75fr);gap:var(--px);align-items:center;padding:clamp(24px,5vh,64px) var(--px);min-height:calc(100svh - 61px);max-height:900px}
.eyebrow{font:500 11px 'DM Mono',monospace;letter-spacing:.14em;text-transform:lowercase;color:var(--orange-text);margin:0 0 clamp(14px,3vh,28px)}
h1{font:300 clamp(64px,12.5vw,230px)/.9 'Literata',Georgia,serif;letter-spacing:-.04em;margin:0}
@media(min-width:861px){h1{font-size:clamp(64px,min(12.5vw,22vh),230px)}}
h1 em{color:var(--orange);font-style:italic;font-weight:300}
.lede{font:300 clamp(20px,2.2vw,34px)/1.25 'Literata',Georgia,serif;margin:clamp(16px,3.5vh,36px) 0 0;max-width:20em}
.cta{display:inline-flex;align-items:center;gap:12px;margin-top:clamp(20px,4vh,40px);padding:13px 22px;border:1px solid var(--ink);border-radius:999px;text-decoration:none;font:500 13px 'DM Mono',monospace;letter-spacing:.04em;transition:background .25s,color .25s}
.cta svg{transition:transform .25s}
.cta:hover{background:var(--ink);color:var(--cream)}
.cta:hover svg{transform:translateY(3px)}
.portrait{margin:0;justify-self:end;width:min(100%,calc(100svh - 190px),640px)}
.portrait img{display:block;width:100%;height:auto;aspect-ratio:1;background:var(--black);outline:1px dashed var(--ink);outline-offset:10px}
.portrait figcaption{margin-top:22px;font:400 11px 'DM Mono',monospace;letter-spacing:.1em;color:var(--taupe);text-align:right}
.block{display:grid;grid-template-columns:minmax(0,.75fr) minmax(0,1.25fr);gap:var(--px);padding:clamp(48px,9vh,110px) var(--px);border-top:1px dashed var(--dash)}
#does{background:var(--sand)}
.label{margin:0;font:500 12px 'DM Mono',monospace;letter-spacing:.14em;color:var(--taupe)}
.label span{color:var(--orange-text);margin-right:12px}
.body{max-width:46rem}
.body p{margin:0 0 1.2em;font-size:clamp(16px,1.15vw,19px);color:#382416}
.body .big{font:300 clamp(26px,3vw,50px)/1.18 'Literata',Georgia,serif;color:var(--ink);letter-spacing:-.015em}
.quiet{color:var(--taupe)!important}
.facts{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));column-gap:24px;margin:2em 0;border-top:1px dashed var(--dash)}
.facts div{padding:14px 0;border-bottom:1px dashed var(--dash)}
.facts dt{font:400 11px 'DM Mono',monospace;letter-spacing:.1em;color:var(--taupe);text-transform:lowercase}
.facts dd{margin:2px 0 0;font:400 22px 'Literata',Georgia,serif}
.does{list-style:none;margin:1.4em 0;padding:0;border-top:1px dashed var(--dash)}
.does li{display:grid;grid-template-columns:minmax(0,11rem) 1fr;gap:16px;padding:16px 0;border-bottom:1px dashed var(--dash);color:#382416}
.does b{font:500 13px 'DM Mono',monospace;color:var(--ink);letter-spacing:.02em}
blockquote{margin:0 0 .6em;font:300 clamp(28px,4vw,66px)/1.1 'Literata',Georgia,serif;letter-spacing:-.025em}
blockquote+blockquote{padding-top:.5em;border-top:1px dashed var(--dash)}
blockquote em{color:var(--orange-text);font-style:italic}
.foot{display:flex;justify-content:space-between;gap:20px;flex-wrap:wrap;padding:26px var(--px);border-top:1px dashed var(--dash);font:400 11px 'DM Mono',monospace;color:var(--taupe);letter-spacing:.04em}
.foot span:first-child{color:var(--ink);font-weight:500}
@media(max-width:860px){
.hero{grid-template-columns:1fr;min-height:0;max-height:none;gap:28px;padding-top:28px;padding-bottom:44px}
.portrait{order:-1;justify-self:start;width:min(46vw,200px)}.portrait img{outline-offset:6px}.portrait figcaption{margin-top:14px}h1{font-size:clamp(64px,19vw,120px)}
.portrait figcaption{text-align:left}
.block{grid-template-columns:1fr;gap:20px}
.does li{grid-template-columns:1fr;gap:2px}
}
@media(max-width:480px){.eyebrow{letter-spacing:.08em}.foot{flex-direction:column;gap:6px}}
@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}*{transition:none!important}}
.body h3{font:500 12px 'DM Mono',monospace;letter-spacing:.1em;color:var(--orange-text);margin:2.2em 0 .6em;padding-top:1.2em;border-top:1px dashed var(--dash)}
.facts+h3{margin-top:2.6em}
.body p{max-width:38em}
.faq h3:first-child{margin-top:0;padding-top:0;border-top:0}
@media(min-width:861px){.label{position:sticky;top:84px;align-self:start}}
h1{font-size:clamp(52px,15vw,112px);line-height:.92}
@media(min-width:861px){h1{font-size:clamp(56px,min(9.6vw,18.5vh),190px)}}
@media(max-width:480px){h1{font-size:clamp(52px,16.5vw,88px)}}
