*,*::before,*::after{margin:0;padding:0;box-sizing:border-box}
:root{--red:#c83232;--red-hover:#a82828;--dark:#1a1a1a;--cream:#f5f0e6;--gold:#d4a574;--grey:#4a4a52;--grey-light:#6a6a72;--line:rgba(26,26,26,.12);--clip:polygon(0 0,100% 0,100% 82%,94% 100%,0 100%);--text-xs:clamp(.72rem,.67rem + .22vw,.82rem);--text-sm:clamp(.86rem,.8rem + .25vw,.96rem);--text-base:clamp(.98rem,.92rem + .28vw,1.08rem);--text-lg:clamp(1.15rem,1.02rem + .5vw,1.35rem);--text-xl:clamp(1.45rem,1.12rem + 1vw,1.95rem);--text-2xl:clamp(1.9rem,1.35rem + 1.8vw,3rem);--text-hero:clamp(2.25rem,1.58rem + 2.6vw,4.1rem);--space-xs:clamp(.5rem,.42rem + .25vw,.75rem);--space-sm:clamp(.8rem,.65rem + .45vw,1.05rem);--space-md:clamp(1.5rem,1rem + 1.4vw,2.5rem);--space-lg:clamp(3rem,2rem + 3vw,5rem);--space-xl:clamp(5rem,3rem + 5vw,8rem)}
html{scroll-behavior:smooth}
body{font-family:'Outfit',system-ui,sans-serif;font-weight:300;font-size:var(--text-base);line-height:1.7;color:var(--dark);background:var(--cream);-webkit-font-smoothing:antialiased;overflow-x:hidden}
a{color:inherit}
.container{width:min(90%,72rem);margin-inline:auto}
.prose{width:min(90%,48rem);margin-inline:auto}
.nav{position:sticky;top:0;z-index:20;padding:var(--space-sm) 0;background:rgba(245,240,230,.94);backdrop-filter:blur(12px);border-bottom:1px solid var(--line)}
.nav-inner{display:flex;justify-content:space-between;align-items:center;gap:1rem}
.nav-logo{display:flex;align-items:center;gap:.5rem;text-decoration:none}
.nav-logo-mark{font-family:'Unbounded',sans-serif;font-weight:900;font-size:var(--text-lg);color:var(--cream);background:var(--red);padding:.3em .5em .25em;clip-path:var(--clip);line-height:1;text-transform:uppercase}
.nav-links{display:flex;gap:var(--space-md);list-style:none;flex-wrap:wrap;justify-content:flex-end}
.nav-links a,.footer-nav a{font-family:'Fragment Mono',monospace;color:var(--grey);font-size:var(--text-xs);text-decoration:none;text-transform:lowercase;transition:color .2s}
.nav-links a:hover,.footer-nav a:hover,.nav-links a[aria-current]{color:var(--red)}
.hero{padding:var(--space-xl) 0 var(--space-lg);border-bottom:1px solid var(--line)}
.label{font-family:'Fragment Mono',monospace;font-size:var(--text-xs);text-transform:uppercase;letter-spacing:.15em;color:var(--red);margin-bottom:var(--space-xs)}
.label::before{content:'// '}
h1,h2,h3{font-family:'Unbounded',sans-serif;text-transform:uppercase;letter-spacing:-.01em;line-height:1.12}
h1{font-size:var(--text-hero);max-width:15ch;margin-bottom:var(--space-md)}
h2{font-size:var(--text-2xl);max-width:18ch;margin-bottom:var(--space-md)}
h3{font-size:var(--text-lg);margin-bottom:.55rem}
.lead{max-width:54rem;font-size:var(--text-lg);color:#37373d;margin-bottom:var(--space-md)}
.hero-actions{display:flex;flex-wrap:wrap;gap:var(--space-sm)}
.btn{display:inline-flex;align-items:center;gap:.5rem;padding:.85em 1.8em;background:var(--red);color:var(--cream);text-decoration:none;font-family:'Unbounded',sans-serif;font-weight:700;font-size:var(--text-xs);text-transform:uppercase;letter-spacing:.02em;clip-path:var(--clip);transition:background .2s,transform .15s}
.btn:hover{background:var(--red-hover);transform:translateY(-1px)}
.btn-outline{background:transparent;color:var(--red);border:2px solid var(--red);clip-path:none}
.btn-outline:hover{background:var(--red);color:var(--cream)}
.section{padding:var(--space-xl) 0}
.section-dark{background:var(--dark);color:var(--cream)}
.section-dark .lead,.section-dark .body,.section-dark .item p{color:rgba(245,240,230,.78)}
.red-line{width:4rem;height:4px;background:var(--red);margin-bottom:var(--space-sm)}
.grid{display:grid;gap:var(--space-md)}
@media (min-width:800px){.grid-2{grid-template-columns:repeat(2,1fr)}.grid-3{grid-template-columns:repeat(3,1fr)}}
.item{border-top:3px solid var(--red);padding-top:var(--space-sm)}
.item p{color:var(--grey);font-size:var(--text-sm);line-height:1.65}
.body p{max-width:58rem;margin-bottom:1rem;color:var(--grey)}
.article-body{width:min(90%,52rem);margin-inline:auto}
.article-body h2{max-width:22ch;margin-top:var(--space-lg)}
.article-body h3{margin-top:var(--space-md)}
.article-body p,.article-body li{color:var(--grey);line-height:1.75}
.article-body p{margin-bottom:1rem}
.article-body ul,.article-body ol{padding-left:1.25rem;margin:0 0 1.25rem}
.article-body li{margin-bottom:.55rem}
.article-note{border-left:4px solid var(--red);background:rgba(200,50,50,.08);padding:var(--space-sm) var(--space-md);margin:var(--space-md) 0}
.article-note p{margin:0;color:var(--dark)}
.article-meta{font-family:'Fragment Mono',monospace;font-size:var(--text-xs);color:var(--grey);margin-bottom:var(--space-md)}
.related-links{display:grid;gap:.85rem;margin-top:var(--space-md)}
.related-links a{font-weight:500;text-decoration:none;color:var(--dark)}
.related-links a:hover{color:var(--red)}
.metrics{display:grid;gap:var(--space-sm);margin-top:var(--space-md)}
@media (min-width:720px){.metrics{grid-template-columns:repeat(3,1fr)}}
.metric{padding:var(--space-md);background:rgba(200,50,50,.08);border-left:4px solid var(--red)}
.section-dark .metric{background:rgba(200,50,50,.16)}
.metric strong{display:block;font-family:'Unbounded',sans-serif;font-size:var(--text-xl);font-weight:900;color:var(--red);line-height:1;margin-bottom:.45rem;text-transform:uppercase}
.metric span{font-family:'Fragment Mono',monospace;font-size:var(--text-xs);color:var(--grey)}
.section-dark .metric span{color:rgba(245,240,230,.78)}
.link-list{list-style:none;display:grid;gap:.85rem}
.link-list a{font-weight:500;text-decoration:none;color:var(--dark)}
.section-dark .link-list a{color:var(--cream)}
.link-list a::after{content:' →';color:var(--red);font-family:'Fragment Mono',monospace}
.link-list a:hover{color:var(--red)}
.cta{padding:var(--space-xl) 0;background:var(--dark);color:var(--cream)}
.cta h2{max-width:18ch}
.cta p{max-width:42rem;color:rgba(245,240,230,.78);margin-bottom:var(--space-md)}
.footer{padding:2rem 0;color:var(--grey-light);border-top:1px solid rgba(26,26,26,.1)}
.footer .container{display:flex;justify-content:space-between;align-items:center;gap:1rem;flex-wrap:wrap}
.footer-nav{display:flex;gap:1rem;flex-wrap:wrap}
@media (max-width:640px){.nav{position:static}.nav-inner{align-items:flex-start;flex-direction:column}.nav-links{gap:1rem;justify-content:flex-start}h1{max-width:12ch}}