/* PREMIUM LAYER — cinematic chrome, depth, lockups. Loaded after the base sheet. */
:root{--rr:#E0993C;--rr-dim:rgba(224,153,60,.5);--ease:cubic-bezier(.22,1,.36,1)}

/* ============ 1. SLATE PRELOADER ============ */
#slate{position:fixed;inset:0;z-index:10000;background:#07080A;display:grid;place-items:center;transition:clip-path 1.05s var(--ease),opacity .4s ease .75s;clip-path:inset(0 0 0 0)}
#slate.gone{clip-path:inset(0 0 100% 0);opacity:0;pointer-events:none}
.sl-in{width:min(760px,84vw);display:grid;gap:26px}
.sl-top{display:flex;justify-content:space-between;align-items:baseline;font-family:var(--mono);font-size:10px;letter-spacing:.28em;text-transform:uppercase;color:var(--faint)}
.sl-top b{color:var(--rr);font-weight:400}
.sl-name{font-family:var(--grot);font-weight:800;font-size:clamp(34px,7vw,74px);line-height:.9;letter-spacing:-.045em;color:var(--ink);display:flex;flex-wrap:wrap;gap:0 .28em}
.sl-name i{font-style:normal;display:inline-block;opacity:0;transform:translateY(.5em);animation:sl-up .7s var(--ease) forwards;animation-delay:calc(var(--i)*80ms + 120ms)}
@keyframes sl-up{to{opacity:1;transform:none}}
.sl-bar{height:2px;background:#1E2126;position:relative;overflow:hidden}
.sl-bar span{position:absolute;inset:0 100% 0 0;background:var(--rr);transition:right .18s linear}
.sl-foot{display:flex;justify-content:space-between;font-family:var(--mono);font-size:10px;letter-spacing:.22em;text-transform:uppercase;color:var(--dim)}
.sl-foot em{font-style:normal;color:var(--ink);font-variant-numeric:tabular-nums}

/* ============ 2. CURSOR ============ */
@media(hover:hover)and(pointer:fine){
  body.hascur,body.hascur a,body.hascur button,body.hascur .xpbar,body.hascur .cbtn{cursor:none}
  #cdot,#cring{position:fixed;top:0;left:0;z-index:9999;pointer-events:none;will-change:transform}
  #cdot{width:6px;height:6px;margin:-3px 0 0 -3px;border-radius:50%;background:var(--rr)}
  #cring{width:34px;height:34px;margin:-17px 0 0 -17px;border:1px solid rgba(219,212,197,.42);border-radius:50%;display:grid;place-items:center;transition:width .3s var(--ease),height .3s var(--ease),margin .3s var(--ease),border-color .3s,background .3s}
  #cring i{font-family:var(--mono);font-style:normal;font-size:8px;letter-spacing:.16em;text-transform:uppercase;color:#07080A;opacity:0;transition:opacity .2s}
  body.c-link #cring{width:52px;height:52px;margin:-26px 0 0 -26px;border-color:var(--rr)}
  body.c-media #cring{width:76px;height:76px;margin:-38px 0 0 -38px;background:var(--rr);border-color:var(--rr)}
  body.c-media #cring i{opacity:1}
  body.c-media #cdot{opacity:0}
}

/* ============ 3. PROGRESS + CHAPTER RAIL ============ */
#prog{position:fixed;top:0;left:0;height:2px;width:0;background:var(--rr);z-index:9996;pointer-events:none}
#rail{position:fixed;left:26px;top:50%;right:auto;bottom:auto;transform:translateY(-50%);z-index:95;display:grid;gap:16px;opacity:0;transition:opacity .6s ease;pointer-events:none;background:none;border:0;backdrop-filter:none;height:auto;width:auto}
#rail.show{opacity:1;pointer-events:auto}
#rail a{display:flex;align-items:center;gap:10px;font-family:var(--mono);font-size:9px;letter-spacing:.2em;text-transform:uppercase;color:var(--faint);transition:color .3s}
#rail a .t{width:14px;height:1px;background:currentColor;transition:width .4s var(--ease)}
#rail a .l{opacity:0;transform:translateX(-4px);transition:opacity .3s,transform .3s var(--ease)}
#rail a:hover,#rail a.on{color:var(--ink)}
#rail a.on{color:var(--rr)}
#rail a.on .t{width:30px}
#rail a:hover .l,#rail a.on .l{opacity:1;transform:none}
@media(max-width:1180px){#rail{display:none}}

/* ============ 4. 3D MONITOR WALL (cover) ============ */
#hero3d{position:absolute;inset:0;z-index:1;pointer-events:none;opacity:0;transition:opacity 1.6s ease .3s}
#hero3d.on{opacity:1}
.cover .cv-bg{opacity:.16}
.cover .cv-scrim{z-index:2}

/* ============ 5. PARALLAX ============ */
.cover .cv-bg,.ap-bg,.xbg,.sk-bg,.cbg{will-change:transform}
[data-px]{will-change:transform}

/* ============ 6. COVER LOCKUP — editorial refinement ============ */
.cover h1{font-size:clamp(58px,min(17.5vw,26vh),268px);letter-spacing:-.055em}
.cover h1 .pd{color:var(--rr)}
.cover .cv-top .rec,.cover .cv-top .rec .dot{color:var(--rr)}
.cover .cv-top .rec .dot{background:var(--rr)}
.cover .ck{margin-top:34px;gap:8px 18px;flex-wrap:nowrap}
.cover .ck>span{white-space:nowrap}
@media(max-width:760px){.cover .ck{flex-wrap:wrap}}
.cover .ck .sp{color:var(--rr)}
/* hairline rules flanking the metadata row — turns a centered stack into a lockup */
.cover .ck::before,.cover .ck::after{content:"";flex:0 0 auto;align-self:center;width:clamp(18px,4vw,64px);height:1px;background:linear-gradient(90deg,transparent,var(--faint))}
.cover .ck::after{background:linear-gradient(90deg,var(--faint),transparent)}
@media(max-width:560px){.cover .ck::before,.cover .ck::after{display:none}}
.cover .scroll{color:var(--faint)}

/* ============ 7. SECTION LABEL — editorial lockup ============ */
.seclabel{position:relative;gap:16px;font-size:11px;letter-spacing:.3em;color:var(--ink)}
.seclabel .n{color:var(--rr);border:1px solid rgba(224,153,60,.42);padding:5px 8px 4px;font-size:10px;letter-spacing:.14em;line-height:1}
.approach .seclabel .n{color:var(--rr)}
.seclabel::after{background:linear-gradient(90deg,var(--line),transparent)}

/* ============ 7b. SLOP CLEANUP — one grain, no glass, no glow ============ */
/* the base sheet stacks five texture layers; the system calls for one */
body::after{display:none}
.sk-card::after{display:none}
.lt-grain{opacity:.035}
/* no glassmorphism — solid editorial surfaces */
nav{backdrop-filter:none;background:rgba(12,13,16,.94)}
.sk-card{backdrop-filter:none;background:rgba(19,21,24,.9);border:1px solid var(--line)}
.sk-card:hover{border-color:rgba(224,153,60,.34)}
/* ============ 8. WORD REVEAL ============ */
.wr{display:inline-block;overflow:hidden;vertical-align:bottom}
.wr>span{display:inline-block;transform:translateY(102%);transition:transform .9s var(--ease);transition-delay:calc(var(--w,0)*70ms)}
.wr.in>span,.reveal.in .wr>span{transform:none}

/* ============ 9. 3D TILT CARDS ============ */
.tilt{transform-style:preserve-3d;transition:transform .5s var(--ease)}
.tilt.live{transition:transform .12s linear}
.sk-card{transform-style:preserve-3d}

/* ============ 10. ACCENT CONSOLIDATION — one red, no competing hues ============ */
::selection{background:var(--rr);color:#15171A}
.brand .rule{background:var(--rr)}
.brand .idx b{color:var(--rr)}
.brand:hover .sv{color:var(--rr)}
nav .rec,nav .rec .dot{color:var(--rr)}
nav .rec .dot{background:var(--rr)}
a:hover{color:var(--rr)}
#rail a.on{color:var(--rr)}

/* ============ 11. MAGNETIC CONTACT CHIPS ============ */
.chip{transition:transform .3s var(--ease),border-color .3s,color .3s}
.chip:hover{border-color:var(--rr);color:var(--ink)}

/* ============ 12. REDUCED MOTION ============ */
@media(prefers-reduced-motion:reduce){
  #slate{display:none}
  .sl-name i{animation:none;opacity:1;transform:none}
  .wr>span{transform:none;transition:none}
  #hero3d{display:none}
  .cover .cv-bg{opacity:.34}
  .tilt{transition:none}
}