/* DRTY REX — drtyrex.com
   PROFESSIONAL ARTIST BUILD. horrorcore identity, premium execution.
   One design system: Anton display / Archivo Black labels / Pirata One
   accents / mono technicals. Red + bone on black. No frameworks.
   Motion: transform/opacity only, expo-out, staggered via --d.
   Mobile-first. All JS hooks preserved (see js/site.js). */

:root{
  --bg:#070708;
  --bg2:#0e0d0f;
  --bg3:#141216;
  --card:#100e12;
  --line:#262227;
  --line-soft:#1b191d;
  --bone:#e8e0d0;
  --cream:#f4edde;
  --red:#c81e2b;
  --red-bright:#e02432;
  --red-deep:#7a0e16;
  --blood:#a31621;
  --amber:#d8a24a;
  --gray:#9a917f;
  --dim:#5c564c;
  --nav-h:64px;
  --max:1160px;
  --ease:cubic-bezier(.16,1,.3,1);
  --sec-pad:clamp(64px,9vw,104px);
}

@font-face{font-family:'Anton';src:url('../fonts/anton.ttf') format('truetype');font-display:swap}
@font-face{font-family:'Archivo Black';src:url('../fonts/archivo-black.ttf') format('truetype');font-display:swap}
@font-face{font-family:'Pirata One';src:url('../fonts/pirata-one.ttf') format('truetype');font-display:swap}
@font-face{font-family:'Nosifer';src:url('../fonts/nosifer.ttf') format('truetype');font-display:swap}
@font-face{font-family:'Rubik Glitch';src:url('../fonts/rubik-glitch.ttf') format('truetype');font-display:swap}

*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth}
html,body{overflow-x:hidden}
body{
  background:var(--bg);
  color:var(--bone);
  font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;
  font-size:16px;line-height:1.65;
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
}
img{max-width:100%;height:auto;display:block}
a{color:var(--bone)}
::selection{background:var(--red);color:var(--cream)}
:focus-visible{outline:2px solid var(--red);outline-offset:3px}
.mono{font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,"Liberation Mono",monospace}

/* soft image fade-in (JS adds .ld on load; no-JS still shows images) */
body.imgfade img{opacity:0;transition:opacity .7s ease}
body.imgfade img.ld{opacity:1}

/* ============ broadcast overlays ============ */
.scanlines{
  position:fixed;inset:0;z-index:290;pointer-events:none;
  background:repeating-linear-gradient(0deg,rgba(0,0,0,.20) 0 1px,transparent 1px 3px);
  opacity:.55;
}
.grain{
  position:fixed;inset:-40px;z-index:291;pointer-events:none;opacity:.08;
  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='0.9' numOctaves='2'/%3E%3C/filter%3E%3Crect width='140' height='140' filter='url(%23n)' opacity='1'/%3E%3C/svg%3E");
}
.vignette{
  position:fixed;inset:0;z-index:289;pointer-events:none;
  background:radial-gradient(ellipse 120% 100% at 50% 50%,transparent 55%,rgba(0,0,0,.5) 100%);
}

/* ============ motion system ============ */
[data-plx]{will-change:transform}
.reveal{
  opacity:0;transform:translateY(34px);
  transition:opacity .9s var(--ease),transform .9s var(--ease);
  transition-delay:var(--d,0ms);
  will-change:opacity,transform;
}
.reveal.in{opacity:1;transform:none}
.reveal-l{opacity:0;transform:translateX(-40px);transition:opacity .9s var(--ease),transform .9s var(--ease);transition-delay:var(--d,0ms)}
.reveal-l.in{opacity:1;transform:none}
.reveal-r{opacity:0;transform:translateX(40px);transition:opacity .9s var(--ease),transform .9s var(--ease);transition-delay:var(--d,0ms)}
.reveal-r.in{opacity:1;transform:none}
.reveal-s{opacity:0;transform:scale(.96);transition:opacity 1s var(--ease),transform 1s var(--ease);transition-delay:var(--d,0ms)}
.reveal-s.in{opacity:1;transform:none}

/* glitch headline — RGB signal decay on hover */
.glitch{position:relative;display:inline-block}
.glitch::before,.glitch::after{
  content:attr(data-text);position:absolute;inset:0;opacity:0;pointer-events:none;
  white-space:nowrap;
}
.glitch::before{color:var(--red);z-index:-1}
.glitch::after{color:#7dd7d7;z-index:-2}
a:hover .glitch::before,.glitch:hover::before,
a:hover .glitch::after,.glitch:hover::after{opacity:.85;animation:glitchShift .32s steps(2) infinite}
@keyframes glitchShift{
  0%{transform:translate(-3px,-2px);clip-path:inset(12% 0 60% 0)}
  50%{transform:translate(3px,1px);clip-path:inset(58% 0 8% 0)}
  100%{transform:translate(-2px,2px);clip-path:inset(28% 0 38% 0)}
}

/* ============ type ============ */
.eyebrow{
  font-family:'Archivo Black',sans-serif;font-size:11px;letter-spacing:.32em;
  text-transform:uppercase;color:var(--red);margin-bottom:18px;
}
.eyebrow.drip{font-family:'Nosifer',serif;font-size:13px;letter-spacing:.12em;color:var(--red);text-transform:lowercase}
h1,h2{font-family:'Anton',sans-serif;font-weight:400;text-transform:uppercase;line-height:.98;letter-spacing:.01em}
h1 .r,h2 .r{color:var(--red)}
.display-glitch{font-family:'Rubik Glitch',serif;font-weight:400}

/* ============ nav ============ */
.nav{
  position:sticky;top:0;z-index:100;height:var(--nav-h);
  display:flex;align-items:center;justify-content:space-between;
  padding:0 22px;background:rgba(7,7,8,.94);
  backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);
  border-bottom:1px solid var(--line-soft);
}
.nav::after{
  content:"";position:absolute;left:0;right:0;bottom:-1px;height:1px;
  background:linear-gradient(90deg,transparent,var(--red) 30%,var(--red) 70%,transparent);
  opacity:.55;
}
.nav-brand{display:flex;align-items:center;text-decoration:none}
.nav-links{display:flex;gap:26px;list-style:none;align-items:center}
.nav-links a{
  position:relative;text-decoration:none;font-family:'Archivo Black',sans-serif;font-size:11px;
  letter-spacing:.18em;text-transform:uppercase;color:var(--bone);opacity:.78;
  transition:opacity .2s,color .2s;padding:6px 0;
}
.nav-links a::after{
  content:"";position:absolute;left:0;right:100%;bottom:0;height:2px;background:var(--red);
  transition:right .3s var(--ease);
}
.nav-links a:hover{opacity:1;color:var(--cream)}
.nav-links a:hover::after{right:0}
.nav-links a.hot{color:var(--red);opacity:1}
.nav-links a.hot::after{right:0}
.nav-toggle{display:none;background:none;border:0;cursor:pointer;padding:10px}
.nav-toggle span{display:block;width:26px;height:2px;background:var(--bone);margin:6px 0;transition:transform .25s var(--ease),opacity .2s}
.nav-toggle[aria-expanded="true"] span:nth-child(1){transform:translateY(8px) rotate(45deg)}
.nav-toggle[aria-expanded="true"] span:nth-child(2){opacity:0}
.nav-toggle[aria-expanded="true"] span:nth-child(3){transform:translateY(-8px) rotate(-45deg)}

/* ============ fresh bar ============ */
.freshbar{
  position:sticky;top:var(--nav-h);z-index:99;
  display:flex;align-items:center;gap:12px;
  padding:10px 22px;background:#120608;border-bottom:1px solid var(--red-deep);
  font-size:13px;text-decoration:none;
  transform:translateY(-110%);transition:transform .35s var(--ease);
}
.freshbar.show{transform:translateY(0)}
.freshbar .tag{
  font-family:'Archivo Black',sans-serif;font-size:10px;letter-spacing:.16em;
  background:var(--red);color:var(--cream);padding:4px 10px;flex:none;
  clip-path:polygon(0 0,100% 0,calc(100% - 8px) 100%,0 100%);
}
.freshbar .txt{white-space:nowrap;overflow:hidden;text-overflow:ellipsis;opacity:.92}
.freshbar .go{margin-left:auto;flex:none;color:var(--red);font-weight:700}

/* ============ hero ============ */
.hero{
  position:relative;min-height:96svh;display:flex;align-items:center;justify-content:center;
  text-align:center;overflow:hidden;background:#050506;
}
.hero-bg{
  position:absolute;inset:-6%;z-index:0;
  background:url('../assets/scenes/hallway.webp') center/cover no-repeat,
             url('../assets/hero-banner.webp') center/cover no-repeat;
  will-change:transform;
  animation:hallFlicker 18s infinite;
}
@keyframes hallFlicker{
  0%,100%{filter:brightness(1)}
  3%{filter:brightness(1)}3.4%{filter:brightness(.62)}3.9%{filter:brightness(1)}
  61%{filter:brightness(1)}61.3%{filter:brightness(.74)}61.7%{filter:brightness(1)}
}
.hero::before{
  content:"";position:absolute;inset:0;z-index:1;
  background:
    radial-gradient(ellipse 90% 65% at 50% 45%,rgba(200,30,43,.22),transparent 62%),
    linear-gradient(180deg,rgba(5,5,6,.8) 0%,rgba(5,5,6,.52) 45%,rgba(7,7,8,.97) 100%);
}
.hero-inner{position:relative;z-index:2;padding:104px 20px 84px;max-width:920px;width:100%}
.boot{
  font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;
  font-size:12px;letter-spacing:.08em;color:var(--amber);opacity:.9;
  min-height:3.2em;margin-bottom:24px;text-align:center;white-space:pre-wrap;
}
.boot .cursor{display:inline-block;width:8px;height:15px;background:var(--amber);vertical-align:-2px;animation:blink 1s steps(1) infinite}
@keyframes blink{50%{opacity:0}}

/* DRTY REX custom wordmark — inline SVG lockup (built by JS) */
.wmount{display:inline-flex;align-items:center}
.wmount svg{display:block;overflow:visible;height:40px;width:auto}
.wm-t{font-family:'Anton',sans-serif}
.nav-brand .wmount svg{height:34px;width:auto;filter:drop-shadow(0 2px 10px rgba(0,0,0,.7))}
.foot-brand .wmount svg{height:44px;width:auto;margin-bottom:14px;filter:drop-shadow(0 4px 14px rgba(0,0,0,.7))}
.hero-wordmark{width:min(620px,90vw);margin:0 auto 12px;animation:wordIn 1.2s var(--ease) both .7s}
.hero-wordmark svg{width:100%;height:auto;filter:drop-shadow(0 12px 34px rgba(0,0,0,.85))}
@keyframes wordIn{from{opacity:0;transform:scale(1.06);filter:blur(6px)}to{opacity:1;transform:none;filter:blur(0)}}
.wm-flick{animation:wmFlicker 13s linear infinite}
@keyframes wmFlicker{
  0%,100%{opacity:1}
  2.5%{opacity:1}2.9%{opacity:.5}3.3%{opacity:1}
  58%{opacity:1}58.3%{opacity:.65}58.7%{opacity:1}
}
.wm-sheen{animation:wmSheen 13s ease-in-out infinite}
@keyframes wmSheen{0%{transform:translateX(0)}7%{transform:translateX(940px)}100%{transform:translateX(940px)}}
.hero-lyric{
  font-family:'Pirata One',serif;font-size:clamp(1.35rem,3.6vw,2.05rem);
  color:var(--bone);opacity:.95;margin:20px auto 4px;max-width:30em;min-height:2.6em;
  text-wrap:balance;
}
.hero-lyric .attr{
  display:block;font-family:ui-monospace,Menlo,Consolas,monospace;font-size:11px;
  letter-spacing:.22em;color:var(--dim);margin-top:12px;text-transform:uppercase;
}
.hero-sub{font-size:clamp(.95rem,2.4vw,1.15rem);color:var(--bone);opacity:.85;max-width:34em;margin:16px auto 0}
.hero-ctas{display:flex;gap:14px;justify-content:center;flex-wrap:wrap;margin-top:34px}
.hero-smile{font-family:'Pirata One',serif;font-size:clamp(1.5rem,4vw,2.1rem);color:var(--red);margin-top:18px;text-shadow:0 0 24px rgba(200,30,43,.5)}
.scroll-hint{margin-top:48px;font-size:11px;letter-spacing:.34em;text-transform:uppercase;color:var(--dim);animation:hintFloat 4s ease-in-out infinite}
@keyframes hintFloat{0%,100%{transform:translateY(0);opacity:.7}50%{transform:translateY(8px);opacity:1}}

/* ============ signal-break divider ============ */
.sigbreak{
  position:relative;height:74px;background:#040405;overflow:hidden;
  border-top:1px solid var(--line-soft);border-bottom:1px solid var(--line-soft);
  display:flex;align-items:center;justify-content:center;
}
.sigbreak::before{
  content:"";position:absolute;inset:0;opacity:.5;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='120'%3E%3Cfilter id='s'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.95' numOctaves='2'/%3E%3C/filter%3E%3Crect width='120' height='120' filter='url(%23s)' opacity='.55'/%3E%3C/svg%3E");
}
.sigbreak::after{
  content:"";position:absolute;left:0;right:0;top:46%;height:2px;
  background:var(--red);opacity:.55;box-shadow:0 0 18px var(--red);
  animation:tearSlide 9s var(--ease) infinite;
}
@keyframes tearSlide{0%,100%{transform:translateX(-8%) scaleX(.7);opacity:.4}50%{transform:translateX(8%) scaleX(1);opacity:.6}}
.sigbreak span{
  position:relative;z-index:1;font-family:ui-monospace,Menlo,Consolas,monospace;
  font-size:11px;letter-spacing:.4em;color:var(--bone);opacity:.85;text-transform:uppercase;
  background:#040405;padding:6px 18px;border:1px solid var(--line);
}

/* ============ ticker ============ */
.ticker{border-top:1px solid var(--line-soft);border-bottom:1px solid var(--line-soft);background:#0a090b;overflow:hidden;white-space:nowrap;padding:14px 0;position:relative}
.ticker-track{display:inline-block;animation:tick 55s linear infinite;will-change:transform}
.ticker span{font-family:'Anton',sans-serif;font-size:19px;letter-spacing:.12em;text-transform:uppercase;color:var(--bone);opacity:.88;padding:0 20px}
.ticker span.r{color:var(--red)}
.ticker span.amb{font-family:ui-monospace,Menlo,monospace;font-size:13px;color:var(--amber);letter-spacing:.24em;opacity:.8}
@keyframes tick{from{transform:translateX(0)}to{transform:translateX(-50%)}}

/* ============ sections ============ */
.section{padding:var(--sec-pad) 20px;max-width:var(--max);margin:0 auto;position:relative}
.section.tight{padding:calc(var(--sec-pad)*.68) 20px}
.sec-head{margin-bottom:44px;max-width:740px}
.sec-head h2{font-size:clamp(2.3rem,6vw,4.1rem)}
.sec-head h2 .r{color:var(--red)}
.sec-head p{color:var(--gray);margin-top:14px;font-size:1.02rem;max-width:44em}
.rule{height:3px;width:72px;background:linear-gradient(90deg,var(--red),transparent);margin:22px 0 0;transform:skewX(-24deg)}

/* ============ intercepted transmission ============ */
.intercept{
  position:relative;overflow:hidden;
  border-top:1px solid var(--red-deep);border-bottom:1px solid var(--red-deep);
  background:#08070a;
}
.intercept .tx-bg{
  position:absolute;inset:-8%;
  background-size:cover;background-position:center;
  filter:saturate(.85) brightness(.8);
  will-change:transform;
}
.intercept::before{
  content:"";position:absolute;inset:0;z-index:1;
  background:linear-gradient(180deg,rgba(7,7,8,.9),rgba(7,7,8,.55) 50%,rgba(7,7,8,.92));
}
.intercept::after{
  content:"";position:absolute;inset:0;z-index:1;pointer-events:none;
  background:repeating-linear-gradient(0deg,rgba(0,0,0,.25) 0 1px,transparent 1px 4px);
  opacity:.5;
}
.tx-inner{position:relative;z-index:2;max-width:900px;margin:0 auto;padding:96px 22px;text-align:center}
.tx-head{
  font-family:ui-monospace,Menlo,Consolas,monospace;font-size:11px;letter-spacing:.3em;
  color:var(--amber);text-transform:uppercase;margin-bottom:26px;
  display:inline-block;border:1px solid rgba(216,162,74,.4);padding:8px 16px;background:rgba(0,0,0,.5);
}
@keyframes recPulse{0%,100%{opacity:1}50%{opacity:.3}}
.tx-head i{font-style:normal;color:var(--red);animation:recPulse 3s ease-in-out infinite}
.intercept blockquote{
  font-family:'Pirata One',serif;font-size:clamp(1.7rem,5vw,3.1rem);
  line-height:1.25;color:var(--cream);text-wrap:balance;
  text-shadow:0 4px 30px rgba(0,0,0,.9),0 0 44px rgba(200,30,43,.25);
}
.intercept .tx-attr{
  margin-top:22px;font-family:ui-monospace,Menlo,Consolas,monospace;
  font-size:12px;letter-spacing:.28em;color:var(--gray);text-transform:uppercase;
}

/* ============ fresh feed: case files (dark dossier cards) ============ */
.fresh-list{display:grid;gap:18px}
.slip{
  position:relative;display:grid;grid-template-columns:96px 1fr;gap:20px;align-items:start;
  background:linear-gradient(165deg,var(--card),#0a090c);
  border:1px solid var(--line-soft);
  border-left:3px solid var(--red-deep);
  color:var(--bone);text-decoration:none;
  padding:24px 26px;
  transition:transform .35s var(--ease),border-color .3s,box-shadow .35s var(--ease);
}
a.slip:hover{transform:translateY(-4px);border-color:var(--line);border-left-color:var(--red);box-shadow:0 18px 44px rgba(200,30,43,.14)}
.slip .fresh-date{font-family:ui-monospace,Menlo,monospace;font-size:11px;color:var(--dim);letter-spacing:.08em;padding-top:6px;text-transform:uppercase}
.slip .fresh-tag{
  display:inline-block;font-family:'Archivo Black',sans-serif;font-size:10px;letter-spacing:.2em;
  color:var(--red-bright);border:1px solid var(--red-deep);padding:4px 10px;margin-bottom:10px;
  text-transform:uppercase;background:rgba(200,30,43,.07);
}
.slip h3{font-family:'Anton',sans-serif;font-weight:400;font-size:1.45rem;text-transform:uppercase;letter-spacing:.02em;color:var(--cream);line-height:1.1}
.slip p{color:var(--gray);font-size:.94rem;margin-top:6px;max-width:52em}
.slip .stamp-mini{
  position:absolute;right:16px;bottom:12px;font-family:'Archivo Black',sans-serif;
  font-size:9px;letter-spacing:.24em;color:rgba(200,30,43,.5);text-transform:uppercase;
  transform:rotate(-6deg);border:1px solid rgba(200,30,43,.4);padding:3px 7px;
}

/* ============ feed merch reminders ============ */
.slip-merch{grid-template-columns:150px 1fr;border-left-color:var(--red)}
.slip-merch .merch-photo{display:block;overflow:hidden;border:1px solid var(--line-soft);aspect-ratio:3/4;background:#0c0b0d}
.slip-merch .merch-photo img{width:100%;height:100%;object-fit:cover;transition:transform .6s var(--ease)}
.slip-merch:hover .merch-photo img{transform:scale(1.05)}
.slip-merch .cta{display:inline-block;margin-top:10px;font-family:'Archivo Black',sans-serif;font-size:11px;letter-spacing:.18em;text-transform:uppercase;color:var(--red-bright);text-decoration:none}
.slip-merch .cta:hover{color:var(--cream)}
.slip-merch .merch-pair{margin-top:8px;font-size:.85rem;color:var(--dim)}
.slip-merch .merch-pair a{color:var(--red-bright);text-decoration:none;border-bottom:1px dotted var(--red-deep)}
.slip-merch .merch-pair a:hover{color:var(--cream)}

/* ============ promo band ============ */
.promo{
  position:relative;overflow:hidden;
  background:linear-gradient(135deg,#4a060c,#1c0306 70%);
  border-top:1px solid var(--red);border-bottom:1px solid var(--red);
}
.promo::before{
  content:"";position:absolute;inset:0;opacity:.35;
  background:radial-gradient(ellipse 60% 120% at 85% 20%,rgba(200,30,43,.5),transparent 65%);
}
.promo-inner{
  position:relative;max-width:var(--max);margin:0 auto;padding:68px 22px;
  display:grid;gap:28px;grid-template-columns:1fr auto;align-items:center;
}
.promo-code{
  font-family:'Rubik Glitch',serif;font-size:clamp(2.6rem,8vw,5rem);
  color:var(--cream);line-height:1;letter-spacing:.02em;
  text-shadow:0 0 34px rgba(200,30,43,.55);
}
.promo-detail{font-size:1.05rem;color:var(--bone);opacity:.92;max-width:36em;margin-top:10px}
.countdown{display:flex;gap:12px;margin-top:22px;flex-wrap:wrap}
.cd{
  background:rgba(0,0,0,.5);border:1px solid rgba(232,224,208,.2);
  min-width:78px;padding:10px 8px;text-align:center;
  clip-path:polygon(0 0,100% 0,100% calc(100% - 10px),calc(100% - 10px) 100%,0 100%);
}
.cd b{display:block;font-family:'Anton',sans-serif;font-weight:400;font-size:1.9rem;color:var(--cream);font-variant-numeric:tabular-nums}
.cd i{font-style:normal;font-size:10px;letter-spacing:.2em;color:var(--bone);opacity:.7;font-family:ui-monospace,Menlo,monospace}
.promo-dead{font-family:'Anton',sans-serif;font-size:1.6rem;color:var(--cream);text-transform:uppercase}

/* ============ cards (shared system) ============ */
.cards{display:grid;gap:22px;grid-template-columns:repeat(auto-fit,minmax(270px,1fr))}
.card{
  position:relative;background:linear-gradient(165deg,var(--bg3),#0c0b0d);
  border:1px solid var(--line-soft);padding:30px 28px;text-decoration:none;
  display:flex;flex-direction:column;gap:10px;overflow:hidden;
  transition:transform .35s var(--ease),border-color .3s,box-shadow .35s var(--ease);
}
.card::before{
  content:"";position:absolute;inset:0;pointer-events:none;opacity:.5;
  background:radial-gradient(ellipse 80% 40% at 50% -10%,rgba(200,30,43,.16),transparent 60%);
}
a.card:hover{transform:translateY(-5px);border-color:var(--red-deep);box-shadow:0 18px 44px rgba(200,30,43,.16)}
.card .k{font-family:ui-monospace,Menlo,monospace;font-size:10px;letter-spacing:.26em;color:var(--amber);text-transform:uppercase}
.card h3{font-family:'Anton',sans-serif;font-weight:400;font-size:1.55rem;text-transform:uppercase;letter-spacing:.01em}
.card p{color:var(--bone);opacity:.8;font-size:.94rem;flex:1}
.card .cta{font-family:'Archivo Black',sans-serif;font-size:12px;letter-spacing:.14em;color:var(--red);text-transform:uppercase}
.card img.mark{width:74px;height:74px;object-fit:contain;filter:drop-shadow(0 4px 14px rgba(0,0,0,.6))}

/* ============ product cards — real merch, real photos ============ */
.product-grid{display:grid;gap:22px;grid-template-columns:repeat(auto-fit,minmax(290px,1fr))}
.product-card{
  position:relative;display:flex;flex-direction:column;text-decoration:none;
  background:linear-gradient(170deg,var(--card),#0a090c);
  border:1px solid var(--line-soft);overflow:hidden;
  transition:transform .4s var(--ease),border-color .3s,box-shadow .4s var(--ease);
}
.product-card:hover{transform:translateY(-6px);border-color:var(--red-deep);box-shadow:0 24px 60px rgba(0,0,0,.6),0 8px 30px rgba(200,30,43,.14)}
.product-photo{position:relative;overflow:hidden;aspect-ratio:1/1;background:#0c0b0d}
.product-photo img{width:100%;height:100%;object-fit:cover;transition:transform .7s var(--ease),filter .5s}
.product-card:hover .product-photo img{transform:scale(1.045)}
.product-photo::after{
  content:"";position:absolute;inset:0;pointer-events:none;
  background:linear-gradient(180deg,transparent 62%,rgba(7,7,8,.55));
}
.product-photo.empty{background:linear-gradient(160deg,#171114,#0b090c)}
.product-photo.empty::before{
  content:"photo incoming";position:absolute;inset:0;display:flex;align-items:center;justify-content:center;
  font-family:ui-monospace,Menlo,monospace;font-size:11px;letter-spacing:.3em;color:var(--dim);text-transform:uppercase;
}
.product-tag{
  position:absolute;top:14px;left:14px;z-index:2;
  font-family:'Archivo Black',sans-serif;font-size:10px;letter-spacing:.18em;text-transform:uppercase;
  background:var(--red);color:var(--cream);padding:6px 12px;
  clip-path:polygon(0 0,100% 0,calc(100% - 8px) 100%,0 100%);
}
.product-body{padding:24px 24px 26px;display:flex;flex-direction:column;gap:8px;flex:1}
.product-body .k{font-family:ui-monospace,Menlo,monospace;font-size:10px;letter-spacing:.26em;color:var(--amber);text-transform:uppercase}
.product-body h3{font-family:'Anton',sans-serif;font-weight:400;font-size:1.7rem;text-transform:uppercase;color:var(--cream);line-height:1.05}
.product-body p{color:var(--gray);font-size:.94rem;flex:1}
.product-body .cta{font-family:'Archivo Black',sans-serif;font-size:12px;letter-spacing:.14em;color:var(--red-bright);text-transform:uppercase;margin-top:6px}
.product-card:hover .product-body .cta{color:var(--cream)}

/* ============ collection lanes — the five label collections ============ */
.lanes{display:grid;grid-template-columns:repeat(12,1fr);gap:18px}
.lane{
  position:relative;display:flex;flex-direction:column;justify-content:flex-end;
  min-height:380px;overflow:hidden;text-decoration:none;
  border:1px solid var(--line-soft);background:#0b0a0c;
  transition:transform .4s var(--ease),border-color .3s,box-shadow .4s var(--ease);
}
.lane:nth-child(1){grid-column:span 7}
.lane:nth-child(2){grid-column:span 5}
.lane:nth-child(3){grid-column:span 4}
.lane:nth-child(4){grid-column:span 4}
.lane:nth-child(5){grid-column:span 4}
.lane:hover{transform:translateY(-6px);border-color:var(--red-deep);box-shadow:0 24px 60px rgba(0,0,0,.6)}
.lane-bg{
  position:absolute;inset:0;background-size:cover;background-position:center;
  filter:saturate(.85) brightness(.75);
  transition:transform .8s var(--ease),filter .5s;
  will-change:transform;
}
.lane:hover .lane-bg{transform:scale(1.06);filter:saturate(1) brightness(.85)}
.lane-shade{
  position:absolute;inset:0;
  background:linear-gradient(180deg,rgba(7,7,8,.25) 0%,rgba(7,7,8,.55) 55%,rgba(5,5,6,.94) 100%);
}
.lane-mark{
  position:absolute;top:50%;left:50%;transform:translate(-50%,-62%);
  width:min(46%,220px);opacity:.9;filter:drop-shadow(0 10px 30px rgba(0,0,0,.7));
  transition:transform .8s var(--ease);
}
.lane:hover .lane-mark{transform:translate(-50%,-62%) scale(1.06)}
.lane-num{
  position:absolute;top:16px;right:18px;z-index:2;
  font-family:'Anton',sans-serif;font-size:1rem;color:var(--bone);opacity:.65;letter-spacing:.1em;
}
.lane-body{position:relative;z-index:2;padding:26px}
.lane-body h3{font-family:'Anton',sans-serif;font-weight:400;font-size:clamp(1.6rem,2.6vw,2.1rem);text-transform:uppercase;color:var(--cream);line-height:1}
.lane-body p{color:var(--bone);opacity:.78;font-size:.92rem;margin-top:8px;max-width:26em}
.lane-body .cta{
  display:inline-block;margin-top:14px;font-family:'Archivo Black',sans-serif;font-size:12px;
  letter-spacing:.16em;color:var(--red-bright);text-transform:uppercase;
}
.lane-body .cta::after{content:"";display:block;height:2px;background:var(--red);margin-top:4px;transform:scaleX(.35);transform-origin:left;transition:transform .35s var(--ease)}
.lane:hover .lane-body .cta::after{transform:scaleX(1)}

/* ============ buttons ============ */
.btn{
  display:inline-block;font-family:'Archivo Black',sans-serif;font-size:13px;
  letter-spacing:.12em;text-transform:uppercase;text-decoration:none;
  padding:15px 32px;border:1px solid var(--bone);color:var(--bone);background:rgba(0,0,0,.35);
  cursor:pointer;position:relative;overflow:hidden;
  clip-path:polygon(10px 0,100% 0,calc(100% - 10px) 100%,0 100%);
  transition:transform .2s var(--ease),border-color .2s,color .2s,box-shadow .25s;
}
.btn::after{ /* sheen sweep */
  content:"";position:absolute;top:0;bottom:0;left:-70%;width:45%;
  background:linear-gradient(100deg,transparent,rgba(255,255,255,.22),transparent);
  transform:skewX(-18deg);transition:left .55s var(--ease);
}
.btn:hover{transform:translateY(-2px);border-color:var(--red);color:var(--cream)}
.btn:hover::after{left:130%}
.btn-red{background:var(--red);border-color:var(--red);color:var(--cream)}
.btn-red:hover{background:var(--red-bright);border-color:var(--red-bright);box-shadow:0 8px 30px rgba(200,30,43,.4)}
.btn-ghost{opacity:.85}

/* ============ embeds / tracks ============ */
.embed{overflow:hidden;border:1px solid var(--line-soft);background:#000;position:relative}
.embed iframe{display:block;width:100%;border:0}
.embed-note{font-size:.85rem;color:var(--gray);margin-top:10px}
.track-grid{display:grid;gap:20px;grid-template-columns:repeat(auto-fit,minmax(300px,1fr));margin-top:28px}
.track{
  background:linear-gradient(170deg,#121013,#0a090b);border:1px solid var(--line-soft);
  padding:22px;position:relative;overflow:hidden;
  transition:transform .35s var(--ease),border-color .3s,box-shadow .35s var(--ease);
}
.track:hover{transform:translateY(-4px);border-color:var(--red-deep);box-shadow:0 16px 40px rgba(0,0,0,.5)}
.track::before{
  content:"";position:absolute;top:0;left:0;right:0;height:2px;
  background:linear-gradient(90deg,var(--red),transparent);opacity:0;transition:opacity .3s;
}
.track:hover::before{opacity:1}
.track h3{font-family:'Anton',sans-serif;font-weight:400;font-size:1.3rem;text-transform:uppercase;margin-bottom:4px;color:var(--cream)}
.track p{font-size:.88rem;color:var(--gray);margin-bottom:12px}
.track .wave{height:26px;margin-bottom:12px;opacity:.8}

/* ============ pillars / about ============ */
.pillars{display:grid;gap:14px;grid-template-columns:repeat(auto-fit,minmax(230px,1fr));margin-top:32px}
.pillar{
  background:linear-gradient(165deg,var(--bg3),#0b0a0c);border:1px solid var(--line-soft);
  border-top:2px solid var(--red-deep);
  padding:24px 22px;position:relative;
  transition:transform .35s var(--ease),border-color .3s;
}
.pillar:hover{transform:translateY(-4px);border-top-color:var(--red)}
.pillar b{font-family:'Archivo Black',sans-serif;font-size:11px;letter-spacing:.16em;text-transform:uppercase;color:var(--red-bright);display:block;margin-bottom:8px}
.pillar p{font-size:.93rem;opacity:.85}
.prose p{margin-bottom:1.15em;max-width:46em}
.prose p.lead{font-size:1.18rem;color:var(--cream)}
.stamp{
  display:inline-block;border:2px solid var(--red);color:var(--red);
  font-family:'Archivo Black',sans-serif;font-size:12px;letter-spacing:.2em;text-transform:uppercase;
  padding:10px 18px;transform:rotate(-2deg);margin:26px 0;
}

/* ============ radar ============ */
.radar{
  position:relative;overflow:hidden;
  border:1px solid var(--line-soft);padding:clamp(30px,5vw,58px);display:grid;gap:22px;
  background:linear-gradient(170deg,#141114,#0a090b);
}
.radar::before{
  content:"";position:absolute;inset:0;pointer-events:none;
  background-image:radial-gradient(ellipse 70% 90% at 50% 0%,rgba(200,30,43,.16),transparent 70%);
}
.radar h2{font-size:clamp(2rem,5vw,3.2rem)}
.radar-btns{display:flex;gap:12px;flex-wrap:wrap;position:relative;z-index:1;align-items:center}

/* radar email form */
.radar-form{display:flex;gap:10px;flex-wrap:wrap;align-items:center;position:relative;z-index:1}
.radar-form input[type="email"]{
  font-family:inherit;font-size:14px;color:var(--bone);
  background:rgba(0,0,0,.5);border:1px solid var(--line);
  padding:14px 18px;min-width:min(260px,70vw);outline:none;
  clip-path:polygon(10px 0,100% 0,calc(100% - 10px) 100%,0 100%);
}
.radar-form input[type="email"]::placeholder{color:var(--gray);opacity:.8}
.radar-form input[type="email"]:focus{border-color:var(--red)}
.radar-form .hp{position:absolute;left:-9999px;top:auto;width:1px;height:1px;overflow:hidden}
.radar-status{width:100%;font-size:.85rem;color:var(--gray);margin:2px 0 0;min-height:1.2em}

/* scroll-triggered subscribe popup */
.radar-pop-overlay{
  position:fixed;inset:0;z-index:200;display:flex;align-items:center;justify-content:center;
  background:rgba(4,3,4,.72);backdrop-filter:blur(3px);
  opacity:0;pointer-events:none;transition:opacity .3s ease;padding:18px;
}
.radar-pop-overlay.show{opacity:1;pointer-events:auto}
.radar-pop{
  position:relative;max-width:430px;width:100%;
  background:linear-gradient(170deg,#171216,#0a090b);
  border:1px solid var(--line);padding:34px 30px 28px;
  clip-path:polygon(16px 0,100% 0,100% calc(100% - 16px),calc(100% - 16px) 100%,0 100%,0 16px);
  box-shadow:0 30px 80px rgba(0,0,0,.6),0 0 60px rgba(200,30,43,.12);
  transform:translateY(14px);transition:transform .3s ease;
}
.radar-pop-overlay.show .radar-pop{transform:none}
.radar-pop h3{font-size:1.7rem;margin:6px 0 8px}
.radar-pop p{font-size:.92rem;color:var(--gray);max-width:32em}
.radar-pop .radar-form{margin-top:16px;flex-direction:column;align-items:stretch}
.radar-pop .radar-form input[type="email"]{width:100%;min-width:0}
.radar-pop-x{
  position:absolute;top:10px;right:14px;background:none;border:none;cursor:pointer;
  color:var(--gray);font-size:26px;line-height:1;padding:6px;
}
.radar-pop-x:hover{color:var(--bone)}

/* ============ footer ============ */
footer{border-top:1px solid var(--line-soft);background:#060607;margin-top:0;position:relative}
footer::before{content:"";position:absolute;top:-1px;left:0;right:0;height:1px;background:linear-gradient(90deg,transparent,var(--red-deep),transparent)}
.foot-inner{max-width:var(--max);margin:0 auto;padding:60px 20px 34px;display:grid;gap:30px}
.foot-brand p{font-size:.9rem;color:var(--gray);max-width:34em}
.socials{display:flex;gap:10px;flex-wrap:wrap;margin-top:16px}
.socials a{
  font-family:'Archivo Black',sans-serif;font-size:11px;letter-spacing:.14em;text-transform:uppercase;
  text-decoration:none;border:1px solid var(--line);padding:10px 16px;color:var(--bone);
  clip-path:polygon(8px 0,100% 0,calc(100% - 8px) 100%,0 100%);
  transition:border-color .2s,color .2s,transform .2s var(--ease);
}
.socials a:hover{border-color:var(--red);color:var(--red-bright);transform:translateY(-2px)}
.foot-nav{display:flex;gap:20px;flex-wrap:wrap;list-style:none}
.foot-nav a{color:var(--gray);text-decoration:none;font-size:.9rem;transition:color .2s}
.foot-nav a:hover{color:var(--bone)}
.legal{font-size:.8rem;color:#4d4d4d;border-top:1px solid #1c1c1c;padding-top:20px;font-family:ui-monospace,Menlo,monospace;letter-spacing:.04em}
.legal .vtag{color:var(--red)}

/* ============ subpage hero ============ */
.page-hero{position:relative;overflow:hidden;padding:120px 20px 56px;background:#060607}
.page-hero .ph-bg{
  position:absolute;inset:-8%;background-size:cover;background-position:center;
  filter:saturate(.8) brightness(.6);will-change:transform;
}
.page-hero::before{
  content:"";position:absolute;inset:0;
  background:linear-gradient(180deg,rgba(6,6,7,.84),rgba(6,6,7,.45) 55%,var(--bg) 100%);
}
.page-hero::after{
  content:"";position:absolute;inset:14px;border:1px solid rgba(232,224,208,.14);pointer-events:none;
}
.ph-inner{position:relative;z-index:1;max-width:var(--max);margin:0 auto}
.ph-cam{
  display:flex;justify-content:space-between;align-items:center;gap:12px;
  font-family:ui-monospace,Menlo,monospace;font-size:11px;letter-spacing:.26em;
  color:var(--amber);text-transform:uppercase;margin-bottom:22px;opacity:.9;
}
.ph-cam .rec{color:var(--red);animation:recPulse 3.2s ease-in-out infinite}
.page-hero h1{font-size:clamp(2.9rem,9vw,5.8rem);text-shadow:0 6px 40px rgba(0,0,0,.8)}
.page-hero p{color:var(--gray);margin-top:16px;max-width:42em;font-size:1.05rem}

/* ============ content + commerce rail ============ */
.with-rail{
  max-width:var(--max);margin:0 auto;padding:6px 20px 90px;
  display:grid;grid-template-columns:minmax(0,1fr) 300px;gap:34px;align-items:start;
  position:relative;z-index:2;
}
.rail{display:grid;gap:18px;position:sticky;top:calc(var(--nav-h) + 58px);align-content:start}
.rail-mod{
  background:linear-gradient(165deg,var(--bg3),#0b0a0c);border:1px solid var(--line-soft);
  padding:24px 22px;text-decoration:none;display:block;color:var(--bone);position:relative;overflow:hidden;
  transition:border-color .25s,transform .3s var(--ease),box-shadow .3s var(--ease);
}
a.rail-mod:hover{border-color:var(--red-deep);transform:translateY(-3px);box-shadow:0 14px 36px rgba(0,0,0,.5)}
.rail-mod .k{font-family:ui-monospace,Menlo,monospace;font-size:10px;letter-spacing:.26em;color:var(--amber);text-transform:uppercase}
.rail-mod h3{font-family:'Anton',sans-serif;font-weight:400;font-size:1.45rem;text-transform:uppercase;margin:10px 0 6px;color:var(--cream)}
.rail-mod p{font-size:.9rem;opacity:.8;margin-bottom:4px}
.rail-mod .cta{font-family:'Archivo Black',sans-serif;font-size:12px;letter-spacing:.14em;color:var(--red-bright);text-transform:uppercase}
/* featured product photo in the rail */
.rail-photo{position:relative;display:block;overflow:hidden;margin:-24px -22px 18px;aspect-ratio:16/10;background:#0c0b0d}
.rail-photo img{width:100%;height:100%;object-fit:cover;transition:transform .7s var(--ease)}
a.rail-mod:hover .rail-photo img{transform:scale(1.05)}
.rail-photo.empty{background:linear-gradient(160deg,#171114,#0b090c);min-height:120px}
.rail-photo.empty::before{
  content:"photo incoming";position:absolute;inset:0;display:flex;align-items:center;justify-content:center;
  font-family:ui-monospace,Menlo,monospace;font-size:10px;letter-spacing:.3em;color:var(--dim);text-transform:uppercase;
}
.rail-sale{background:linear-gradient(135deg,#4a060c,#1c0306);border-color:var(--red-deep)}
.rail-sale .k{color:var(--cream)}
.rail-sale .btn{margin-top:14px;padding:12px 20px;font-size:12px}
.pick{display:grid;grid-template-columns:64px 1fr;gap:14px;align-items:center;text-decoration:none;padding:12px 0;border-top:1px solid var(--line-soft)}
.pick:first-of-type{border-top:0}
.pick-img{position:relative;width:64px;height:64px;overflow:hidden;background:#0c0b0d;flex:none}
.pick-img img{width:100%;height:100%;object-fit:cover;transition:transform .5s var(--ease)}
.pick:hover .pick-img img{transform:scale(1.08)}
.pick-img.empty{background:linear-gradient(160deg,#171114,#0b090c)}
.pick b{display:block;font-size:.95rem;color:var(--bone);line-height:1.25}
.pick .pick-blurb{display:block;font-size:.82rem;color:var(--gray);margin-top:2px}
.pick i{font-style:normal;font-size:11px;letter-spacing:.14em;color:var(--red-bright);text-transform:uppercase;font-family:'Archivo Black',sans-serif}

/* ============ gallery ============ */
.galgrid{display:grid;gap:22px;grid-template-columns:repeat(auto-fit,minmax(270px,1fr))}
.gal{
  position:relative;background:#0a090b;border:1px solid var(--line-soft);overflow:hidden;
  transition:transform .4s var(--ease),border-color .3s,box-shadow .4s var(--ease);
}
.gal:hover{transform:translateY(-4px);border-color:var(--red-deep);box-shadow:0 18px 44px rgba(0,0,0,.55);z-index:2}
.gal img{width:100%;aspect-ratio:4/3;object-fit:cover;transition:transform .6s var(--ease);filter:saturate(.85)}
.gal:hover img{transform:scale(1.05)}
.gal .cam-tag{
  position:absolute;top:10px;left:12px;right:12px;display:flex;justify-content:space-between;
  font-family:ui-monospace,Menlo,monospace;font-size:10px;letter-spacing:.2em;
  color:var(--cream);text-transform:uppercase;opacity:.85;text-shadow:0 1px 6px #000;
}
.gal .cam-tag .rec{color:var(--red)}
.gal figcaption{padding:12px 16px;font-size:.88rem;color:var(--gray);font-style:italic;border-top:1px solid var(--line-soft)}
.galsec{margin-bottom:70px}
.gal-strip{display:grid;grid-template-columns:repeat(4,1fr);gap:14px;margin-top:28px}
.gal-strip a{display:block;overflow:hidden;border:1px solid var(--line-soft);position:relative;transition:border-color .3s,transform .35s var(--ease)}
.gal-strip a:hover{border-color:var(--red-deep);transform:translateY(-4px)}
.gal-strip img{width:100%;aspect-ratio:1/1;object-fit:cover}

/* ============ mini player — KEPT AS-IS (radio behavior untouched) ============ */
.miniplayer{
  position:fixed;left:0;right:0;bottom:0;z-index:150;
  background:rgba(10,7,9,.96);border-top:1px solid var(--red-deep);
  backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);
}
.mp-toggle{width:100%;display:flex;align-items:center;gap:14px;background:none;border:0;cursor:pointer;padding:12px 20px;color:var(--bone);text-align:left}
.mp-glyph{flex:none;width:44px;height:44px;background:var(--red);display:flex;align-items:center;justify-content:center;font-size:15px;color:var(--cream);transition:background .15s,transform .2s var(--ease);clip-path:polygon(50% 0,100% 25%,100% 75%,50% 100%,0 75%,0 25%)}
.mp-toggle:hover .mp-glyph{background:var(--red-bright);transform:scale(1.07)}
.mp-label b{display:block;font-family:'Archivo Black',sans-serif;font-size:12px;letter-spacing:.18em;text-transform:uppercase;color:var(--cream)}
.mp-label i{display:block;font-style:normal;font-size:12px;color:var(--gray)}
.mp-live{margin-left:auto;flex:none;font-family:ui-monospace,Menlo,monospace;font-size:10px;letter-spacing:.24em;color:var(--red);text-transform:uppercase;display:flex;align-items:center;gap:8px}
.mp-live::before{content:"";width:8px;height:8px;background:var(--red);animation:recPulse 3s ease-in-out infinite}
.mp-panel{border-top:1px solid var(--line);padding:14px 20px 18px;max-width:860px;margin:0 auto}
.mp-panel iframe{display:block;width:100%;height:152px;border:0}
body.has-player{padding-bottom:70px}

/* ============ page wipe ============ */
.wipe{position:fixed;inset:0;z-index:400;pointer-events:none;visibility:hidden}
.wipe.go{visibility:visible}
.wipe .wp{position:absolute;top:-10%;bottom:-10%;width:120%;left:-10%;background:linear-gradient(100deg,#12060a,#0a0508);transform:translateX(-110%) skewX(-8deg)}
.wipe .wp.w2{display:none}
.wipe.go .wp{animation:wipeIn .34s var(--ease) both}
@keyframes wipeIn{
  0%{transform:translateX(-110%) skewX(-8deg)}
  45%,55%{transform:translateX(0) skewX(-8deg)}
  100%{transform:translateX(110%) skewX(-8deg)}
}

/* ============ scramble text ============ */
[data-scramble]{display:inline-block}

/* ============ responsive ============ */
@media (max-width:1100px){.nav-links{gap:16px}}
@media (max-width:960px){
  .with-rail{grid-template-columns:1fr}
  .rail{position:static;grid-template-columns:repeat(auto-fit,minmax(240px,1fr))}
  .promo-inner{grid-template-columns:1fr}
  .lane:nth-child(n){grid-column:span 6}
  .lane{min-height:320px}
}
@media (max-width:760px){
  .nav-links{
    position:fixed;top:var(--nav-h);right:0;left:0;flex-direction:column;align-items:stretch;
    background:#0b0a0c;border-bottom:1px solid var(--line);padding:10px 20px 20px;
    gap:0;display:none;z-index:100;
  }
  .nav-links.open{display:flex}
  .nav-links a{display:block;padding:14px 4px;border-bottom:1px solid #1c1c1c;font-size:14px}
  .nav-links a::after{display:none}
  .nav-toggle{display:block}
  .section{padding:64px 18px}
  .slip{grid-template-columns:1fr;gap:10px;padding:20px}
  .slip-merch .merch-photo{max-width:190px}
  .slip .stamp-mini{position:static;display:inline-block;margin-top:10px;transform:rotate(-4deg)}
  .hero{min-height:94svh}
  .hero-inner{padding:80px 18px 60px}
  .tx-inner{padding:72px 20px}
  .gal-strip{grid-template-columns:repeat(2,1fr)}
  .boot{font-size:11px}
  .sigbreak{height:60px}
  .lane:nth-child(n){grid-column:span 12}
  .lane{min-height:260px}
  .product-body h3{font-size:1.45rem}
  .rail{grid-template-columns:1fr}
  .ph-cam{flex-wrap:wrap;gap:6px}
}
@media (max-width:390px){
  .promo-inner{padding:52px 18px}
  .cd{min-width:68px}
  .hero-ctas .btn{width:100%;text-align:center}
  .track-grid{grid-template-columns:1fr}
  .cards{grid-template-columns:1fr}
  .product-grid{grid-template-columns:1fr}
}
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *,*::before,*::after{animation:none !important;transition:none !important}
  .ticker-track{animation:none}
  .scanlines{display:none}
  .wm-sheen,.wm-flick{animation:none}
  .reveal,.reveal-l,.reveal-r,.reveal-s{opacity:1;transform:none}
  .hero-bg{inset:0}
  body.imgfade img{opacity:1}
}