@font-face{font-family:'Microgramma';src:url('fonts/Microgramma_D_Extended_Bold.otf') format('opentype');font-weight:700;font-display:swap;}
:root{
  --red:#E8291C; --black:#0A0A0A; --bone:#F2EFE9;
  --ink:#111110; --line:rgba(242,239,233,.13);
  --dim:rgba(242,239,233,.5); --dimb:rgba(10,10,10,.55);
  --pad:clamp(20px,5vw,86px);
  --ease:cubic-bezier(.16,.84,.28,1);
}
*{margin:0;padding:0;box-sizing:border-box;}
html{scroll-behavior:smooth;}
body{background:var(--black);color:var(--bone);font-family:'Poppins',sans-serif;letter-spacing:-.02em;overflow-x:hidden;min-height:100svh;display:flex;flex-direction:column;}
::selection{background:var(--red);color:var(--bone);}
img{display:block;max-width:100%;}
a{color:inherit;text-decoration:none;}
button{font:inherit;}
.mg{font-family:'Microgramma',sans-serif;font-weight:700;text-transform:uppercase;line-height:1.02;}
.cr{font-family:'Courier Prime',monospace;font-weight:700;text-transform:uppercase;letter-spacing:.14em;}

/* film-grain texture over everything */
body::after{content:"";position:fixed;inset:0;z-index:300;pointer-events:none;opacity:.035;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");}

/* NAV — thin, wide-tracked, red index dots */
nav{position:sticky;top:0;z-index:90;display:flex;align-items:center;justify-content:space-between;padding:16px var(--pad);background:rgba(10,10,10,.82);backdrop-filter:blur(14px) saturate(120%);border-bottom:1px solid var(--line);}
nav .logo{font-family:'Microgramma',sans-serif;font-size:16px;letter-spacing:.04em;}
nav .logo sup{font-size:.42em;color:var(--red);}
nav ul{display:flex;gap:clamp(14px,2.4vw,34px);list-style:none;}
nav ul a{position:relative;font-family:'Courier Prime',monospace;font-weight:700;font-size:11px;letter-spacing:.16em;text-transform:uppercase;color:var(--dim);transition:color .25s;padding-left:11px;}
nav ul a::before{content:"";position:absolute;left:0;top:50%;width:4px;height:4px;background:var(--red);transform:translateY(-50%) scale(0);transition:transform .25s var(--ease);}
nav ul a:hover{color:var(--bone);} nav ul a:hover::before{transform:translateY(-50%) scale(1);}
nav ul a.on{color:var(--bone);} nav ul a.on::before{transform:translateY(-50%) scale(1);}
@media(max-width:760px){nav{padding:13px var(--pad);} nav ul{gap:10px;} nav ul a{font-size:9.5px;letter-spacing:.1em;padding-left:8px;}}

/* PAGE HEAD — editorial rule + index number */
.phead{padding:clamp(46px,9vh,110px) var(--pad) clamp(20px,3.5vh,44px);border-bottom:1px solid var(--line);}
.phead .idx{font-family:'Courier Prime',monospace;font-weight:700;font-size:11px;letter-spacing:.18em;color:var(--red);margin-bottom:clamp(14px,2.5vh,26px);display:block;}
.phead h1{font-size:clamp(34px,6.4vw,84px);letter-spacing:-.01em;}
.phead h1 .r{color:var(--red);}
.phead .lede{margin-top:clamp(12px,2vh,20px);font-size:clamp(13px,1.4vw,16px);font-weight:500;color:var(--dim);max-width:44ch;line-height:1.65;}
.wrap{padding:0 var(--pad) clamp(60px,10vh,130px);flex:1;}

/* FOOTER */
footer{border-top:1px solid var(--line);padding:clamp(26px,4vh,44px) var(--pad);display:flex;justify-content:space-between;gap:16px;flex-wrap:wrap;align-items:flex-end;}
footer .fl{font-family:'Microgramma',sans-serif;font-size:clamp(22px,4vw,44px);color:var(--ink);letter-spacing:.02em;-webkit-text-stroke:1px rgba(242,239,233,.22);color:transparent;}
footer .fr{font-family:'Courier Prime',monospace;font-weight:700;font-size:10.5px;letter-spacing:.14em;color:var(--dim);text-transform:uppercase;text-align:right;line-height:2;}
footer a:hover{color:var(--red);}

/* BUTTONS — sharp, arrow slides */
.btn{position:relative;display:inline-flex;align-items:center;gap:12px;background:var(--red);color:var(--bone);font-family:'Courier Prime',monospace;font-weight:700;letter-spacing:.16em;text-transform:uppercase;font-size:12px;padding:17px 28px;border:none;cursor:pointer;overflow:hidden;transition:color .3s;}
.btn span{position:relative;z-index:2;}
.btn::before{content:"";position:absolute;inset:0;background:var(--bone);transform:translateY(101%);transition:transform .4s var(--ease);z-index:1;}
.btn:hover{color:var(--black);} .btn:hover::before{transform:none;}
.btn.ghost{background:none;border:1px solid rgba(242,239,233,.28);color:var(--bone);}
.btn.ghost::before{background:var(--red);}
.btn.ghost:hover{color:var(--bone);border-color:var(--red);}

/* REVEAL */
.rv{opacity:0;transform:translateY(30px);transition:opacity .9s var(--ease),transform .9s var(--ease);}
.rv.in{opacity:1;transform:none;}
@media(prefers-reduced-motion:reduce){.rv{opacity:1!important;transform:none!important;}}

/* ============ CUSTOM CURSOR (subtle) ============ */
@media(hover:hover) and (pointer:fine){
  .cur-ring{position:fixed;top:0;left:0;width:26px;height:26px;border:1px solid rgba(232,41,28,.55);border-radius:50%;pointer-events:none;z-index:9998;transform:translate(-50%,-50%);transition:width .3s var(--ease),height .3s var(--ease),border-color .3s,opacity .3s;}
  .cur-ring.hot{width:40px;height:40px;border-color:var(--red);}
}

/* ============ INTRO ============ */
#intro{position:fixed;inset:0;z-index:9990;background:var(--red);display:flex;align-items:center;justify-content:center;overflow:hidden;}
#intro .word{font-family:'Microgramma',sans-serif;font-weight:700;text-transform:uppercase;font-size:clamp(44px,9vw,150px);color:var(--black);line-height:1;letter-spacing:-.015em;opacity:0;transform:translateY(26px);animation:introIn .6s var(--ease) .1s forwards;}
#intro .word .d{color:var(--bone);}
#intro .sub{position:absolute;bottom:12%;left:50%;transform:translateX(-50%);font-family:'Courier Prime',monospace;font-weight:700;font-size:10.5px;letter-spacing:.24em;color:rgba(10,10,10,.6);text-transform:uppercase;opacity:0;animation:introIn .5s var(--ease) .35s forwards;white-space:nowrap;}
#intro .curtain{position:absolute;inset:0;background:var(--black);transform:translateY(101%);}
#intro.go .curtain{animation:curtainUp .55s var(--ease) forwards;}
#intro.go .word,#intro.go .sub{animation:introOut .3s var(--ease) forwards;}
#intro.done{display:none;}
@keyframes introIn{to{opacity:1;transform:none;}}
#intro .skip{position:absolute;top:22px;right:24px;font-family:'Courier Prime',monospace;font-weight:700;font-size:10px;letter-spacing:.16em;color:rgba(10,10,10,.55);text-transform:uppercase;cursor:pointer;background:none;border:none;padding:8px;}
#intro .skip:hover{color:var(--black);}
@keyframes introOut{to{opacity:0;transform:translateY(-18px);}}
@keyframes curtainUp{to{transform:translateY(0);}}
body.intro-lock{overflow:hidden;}
@media(prefers-reduced-motion:reduce){#intro{display:none;}}