@font-face{font-family:'Anton';font-style:normal;font-weight:400;font-display:swap;src:url('../assets/fonts/anton-normal-400.woff2') format('woff2')}
@font-face{font-family:'Fraunces';font-style:normal;font-weight:300;font-display:swap;src:url('../assets/fonts/fraunces-normal-300.woff2') format('woff2')}
@font-face{font-family:'Fraunces';font-style:normal;font-weight:500;font-display:swap;src:url('../assets/fonts/fraunces-normal-500.woff2') format('woff2')}
@font-face{font-family:'Fraunces';font-style:italic;font-weight:300;font-display:swap;src:url('../assets/fonts/fraunces-italic-300.woff2') format('woff2')}
:root{--black:#070707;--bone:#f1ede4;--bone-dim:rgba(241,237,228,.58);--gold:#c9a227;--display:'Anton',sans-serif;--serif:'Fraunces',serif;--ease:cubic-bezier(.16,1,.3,1)}
*{margin:0;padding:0;box-sizing:border-box}
html{scroll-behavior:smooth}
body{background:var(--black);color:var(--bone);font-family:var(--serif);font-weight:300;line-height:1.7;-webkit-font-smoothing:antialiased}
@media(pointer:fine){body{cursor:none}a,button{cursor:none}}
::selection{background:var(--bone);color:var(--black)}
a{color:inherit}
.cursor-dot,.cursor-ring{position:fixed;top:0;left:0;pointer-events:none;z-index:9999;border-radius:50%;transform:translate(-50%,-50%)}
.cursor-dot{width:8px;height:8px;background:var(--gold)}
.cursor-ring{width:34px;height:34px;border:1px solid var(--gold);opacity:.6;transition:width .25s var(--ease),height .25s var(--ease),opacity .25s}
body.cursor-hover .cursor-ring{width:56px;height:56px;opacity:.9}
@media(pointer:coarse){.cursor-dot,.cursor-ring{display:none}}
.topbar{position:fixed;top:0;left:0;right:0;z-index:100;display:flex;justify-content:space-between;align-items:center;padding:1.4rem 3rem;mix-blend-mode:difference}
.topbar .logo{font-family:var(--display);text-transform:uppercase;letter-spacing:.14em;font-size:1rem}
.topbar .back{font-size:.8rem;letter-spacing:.08em;text-transform:uppercase;opacity:.75;text-decoration:none}
.topbar .back:hover{opacity:1}
.article{max-width:760px;margin:0 auto;padding:11rem 1.5rem 6rem}
.article .meta{font-size:.72rem;letter-spacing:.26em;text-transform:uppercase;color:var(--bone-dim)}
.article h1{font-family:var(--display);text-transform:uppercase;font-size:clamp(2.2rem,6vw,4.2rem);line-height:1.02;margin:1.4rem 0 1.2rem}
.article .lede{font-size:1.28rem;color:var(--bone);font-style:italic;margin-bottom:2.6rem;line-height:1.55}
.article h2{font-family:var(--display);text-transform:uppercase;font-size:clamp(1.5rem,3.2vw,2.2rem);line-height:1.1;margin:3.2rem 0 1rem}
.article h3{font-family:var(--serif);font-weight:500;font-size:1.35rem;margin:2.2rem 0 .6rem}
.article p{font-size:1.12rem;color:var(--bone-dim);margin-bottom:1.3rem}
.article p strong{color:var(--bone);font-weight:500}
.article ul,.article ol{margin:0 0 1.6rem 1.3rem;color:var(--bone-dim)}
.article li{font-size:1.1rem;margin-bottom:.7rem;padding-left:.3rem}
.article blockquote{border-left:2px solid var(--gold);padding-left:1.4rem;margin:2rem 0;font-style:italic;color:var(--bone);font-size:1.25rem}
.article .tldr{border:1px solid rgba(241,237,228,.18);padding:1.8rem 2rem;margin:0 0 2.8rem;background:#0c0c0c}
.article .tldr .lbl{font-family:var(--display);text-transform:uppercase;font-size:.8rem;letter-spacing:.2em;color:var(--bone-dim);display:block;margin-bottom:.7rem}
.article .tldr p{font-size:1.1rem;color:var(--bone);margin:0}
.article hr{border:0;border-top:1px solid rgba(241,237,228,.14);margin:3.4rem 0}
.cta-box{border-top:1px solid rgba(241,237,228,.14);margin-top:3.4rem;padding-top:2.6rem}
.cta-box h2{margin-top:0}
.cta-box a{color:var(--gold);border-bottom:1px solid var(--gold);font-style:italic;font-size:1.35rem;padding-bottom:.1em;text-decoration:none}
.related{max-width:760px;margin:0 auto;padding:0 1.5rem 6rem}
.related .lbl{font-size:.72rem;letter-spacing:.26em;text-transform:uppercase;color:var(--bone-dim);display:block;margin-bottom:1.2rem}
.related a{display:block;font-family:var(--display);text-transform:uppercase;font-size:1.15rem;padding:1rem 0;border-top:1px solid rgba(241,237,228,.14);text-decoration:none;transition:color .2s}
.related a:hover{color:var(--gold)}
