/* ════════════════════════════════════════════════════════════
   PLATEBODIED — Official
   Inside a corrupted CRT. Broken faith × blackletter × terminal.
   ════════════════════════════════════════════════════════════ */

/* ─── BLACKLETTER (self-hosted) ───────────────────────────── */
@font-face {
  font-family: 'Fayte';
  src: url('../assets/Fayte-Regular.woff2') format('woff2');
  font-weight: 400 700;
  font-style: normal;
  font-display: swap;
}

/* ─── TOKENS ──────────────────────────────────────────────── */
:root {
  --color-void:    #121212;
  --color-ash-bg:  #1C1C1C;
  --color-iron:    #2A2A2A;
  --color-smoke:   #414141;
  --color-bone:    #F3F3F3;
  --color-ash:     #909090;
  --color-red:     #B90000;
  --color-blood:   #7A0000;
  --color-glitch:  #FF1A1A;

  --font-black:   'Fayte', 'UnifrakturCook', 'Pirata One', cursive;   /* blackletter headers */
  --font-display: 'Inter', sans-serif;                       /* HUD / labels       */
  --font-mono:    'Share Tech Mono', monospace;              /* terminal body      */

  /* phosphor bloom + chromatic ghost on live text (dialed back slightly) */
  --phosphor: 0 0 6px rgba(243,243,243,.34), 0 0 2px rgba(243,243,243,.5);
  --phosphor-soft: 0 0 5px rgba(243,243,243,.24);
  --ghost: .5px 0 0 rgba(185,0,0,.5), -.5px 0 0 rgba(120,160,255,.16);
  --bloom-red: 0 0 12px rgba(185,0,0,.48);
}

/* ─── RESET ───────────────────────────────────────────────── */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html { -webkit-text-size-adjust: 100%; }
body {
  background: #000;
  color: var(--color-bone);
  font-family: var(--font-mono);
  line-height: 1.5;
  height: 100vh; height: 100dvh;
  overflow: hidden;
  cursor: none;
}
img { display: block; max-width: 100%; }
a { color: inherit; text-decoration: none; cursor: none; }
/* keep the custom crosshair everywhere — never show the system hand/grab */
a, button, input, label, summary, [role="button"], .acc-col, .carousel { cursor: none; }
ul { list-style: none; }
button { font: inherit; cursor: none; background: none; border: none; color: inherit; }
.svg-defs { position: absolute; width: 0; height: 0; pointer-events: none; }
::selection { background: var(--color-smoke); color: var(--color-bone); }

/* ─── A11Y ────────────────────────────────────────────────── */
.visually-hidden { position:absolute; width:1px; height:1px; padding:0; margin:-1px; overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap; border:0; }
.skip-link { position:absolute; top:-200px; left:1rem; z-index:80; background:var(--color-red); color:var(--color-bone); padding:.5rem .9rem; font-size:.8rem; letter-spacing:.1em; }
.skip-link:focus { top:1rem; }
a:focus-visible, button:focus-visible, input:focus-visible { outline:2px solid var(--color-red); outline-offset:3px; }

/* ════════════════════════════════════════════════════════════
   THE TERMINAL (full-bleed, frameless)
   ════════════════════════════════════════════════════════════ */
.crt {
  position: relative;
  z-index: 1;
  height: 100dvh;
  overflow: hidden;
  /* transparent so the background video shows through; a faint radial keeps
     the centre legible while the corners fall to black */
  background:
    radial-gradient(125% 120% at 50% 42%, rgba(8,8,8,.30) 0%, rgba(4,4,4,.55) 55%, rgba(0,0,0,.78) 100%);
}

/* ─── BACKGROUND VIDEO ─────────────────────────────────────── */
.bg-video { position:fixed; inset:0; z-index:0; overflow:hidden; pointer-events:none; background:#000; }
.bg-video iframe { position:absolute; top:50%; left:50%; transform:translate(-50%,-50%);
  width:max(100vw, 177.78vh); height:max(100vh, 56.25vw); }   /* cover, 16:9 */
.bg-video__scrim { position:absolute; inset:0;
  background:radial-gradient(120% 120% at 50% 45%, rgba(0,0,0,.45) 0%, rgba(0,0,0,.62) 60%, rgba(0,0,0,.82) 100%); }

/* faint sigil watermark behind the feed */
.deco--watermark {
  position:absolute; right:6%; top:50%; transform:translateY(-50%);
  height:78vh; width:auto; opacity:.05; pointer-events:none; z-index:0;
  filter:url(#signal-displace) drop-shadow(0 0 30px rgba(185,0,0,.2));
}

/* ─── FLOATING LOGO ───────────────────────────────────────── */
.brand {
  position:absolute; top:clamp(1rem,3.2vh,2rem); left:50%; transform:translateX(-50%);
  z-index:8; display:flex; flex-direction:column; align-items:center; gap:.4rem;
  filter:drop-shadow(0 0 16px rgba(243,243,243,.22));
}
.brand__logo { height:clamp(34px,7vh,72px); width:auto; }
.brand__sub { font-family:var(--font-mono); font-size:clamp(.5rem,1.2vw,.66rem); letter-spacing:.42em; color:var(--color-ash); text-shadow:var(--phosphor-soft); text-indent:.42em; }

/* ════════════════════════════════════════════════════════════
   CORNER HUD READOUTS
   ════════════════════════════════════════════════════════════ */
.hud { position:absolute; z-index:7; display:flex; flex-direction:column; gap:.35rem;
  font-family:var(--font-mono); font-size:clamp(.58rem,1.25vw,.74rem); letter-spacing:.18em;
  color:var(--color-ash); text-shadow:var(--phosphor-soft); }
.hud--tl { top:clamp(1rem,3vh,1.6rem); left:clamp(1rem,3vw,2rem); }
.hud--tr { top:clamp(1rem,3vh,1.6rem); right:clamp(1rem,3vw,2rem); text-align:right; align-items:flex-end; }
.hud--bl { bottom:clamp(1rem,3vh,1.6rem); left:clamp(1rem,3vw,2rem); }
.hud--br { bottom:clamp(1rem,3vh,1.6rem); right:clamp(1rem,3vw,2rem); text-align:right; align-items:flex-end; }
.hud__dim { color:var(--color-smoke); letter-spacing:.22em; }
.credit { color:var(--color-ash); letter-spacing:.18em; transition:color .2s, text-shadow .2s; }
.credit:hover, .credit:hover .credit__url { color:var(--color-red); text-shadow:0 0 11px rgba(185,0,0,.7), 0 0 3px rgba(185,0,0,.5); }
.credit__url { color:var(--color-red); }
.foot-m { display:none; }   /* mobile-only footer pieces (shown in the ≤880 query) */
.hud__rec { display:inline-flex; align-items:center; gap:.45em; color:var(--color-red); }
.hud__dot { width:8px; height:8px; border-radius:50%; background:var(--color-red); box-shadow:var(--bloom-red); animation:recblink 1.4s steps(1) infinite; }
@keyframes recblink { 0%,49%{opacity:1} 50%,100%{opacity:.12} }
.hud__signal { display:inline-flex; align-items:flex-end; gap:.5em; }
.hud__signal i { width:4px; height:12px; background:var(--color-red); box-shadow:var(--bloom-red); }
.hud__signal i:nth-child(2){height:9px} .hud__signal i:nth-child(3){height:6px}
.hud__signal i.off { background:var(--color-iron); box-shadow:none; height:14px; }
.hud__clock { font-variant-numeric:tabular-nums; color:var(--color-bone); }
.hud__feed { font-family:var(--font-mono); font-size:clamp(.55rem,1.15vw,.7rem); line-height:1.7; letter-spacing:.06em; color:var(--color-blood); white-space:pre; min-height:8.4em; text-shadow:var(--phosphor-soft); }
.hud__feed b { color:var(--color-red); font-weight:400; }

/* ════════════════════════════════════════════════════════════
   DECORATIVE MICROGRAPHICS
   ════════════════════════════════════════════════════════════ */
.deco { position:absolute; z-index:2; pointer-events:none; color:var(--color-smoke); font-family:var(--font-mono); text-shadow:var(--phosphor-soft); }
.deco--verse-r { right:.55rem; top:50%; transform:translateY(-50%); writing-mode:vertical-rl; text-orientation:mixed; font-size:clamp(.5rem,1vw,.66rem); letter-spacing:.5em; color:var(--color-iron); }
.deco--verse-l { left:.55rem; top:50%; transform:translateY(-50%); writing-mode:vertical-rl; text-orientation:mixed; font-size:clamp(.5rem,1vw,.66rem); letter-spacing:.5em; color:var(--color-iron); rotate:180deg; }
.deco--barcode { left:50%; bottom:clamp(4.2rem,11vh,6rem); transform:translateX(-50%); width:min(220px,40vw); height:16px; opacity:.4;
  background:repeating-linear-gradient(90deg, var(--color-smoke) 0 2px, transparent 2px 4px, var(--color-smoke) 4px 5px, transparent 5px 9px, var(--color-smoke) 9px 12px, transparent 12px 14px); }
/* decorative marks use the band sigil (mask) — never an emoji cross */
.deco--cross { width:18px; height:19px; opacity:.6; background-color:var(--color-iron);
  -webkit-mask:url('../assets/sigil-small.svg') no-repeat center / contain;
          mask:url('../assets/sigil-small.svg') no-repeat center / contain; }
.deco--cross-1 { top:24%; left:8%; }
.deco--cross-2 { bottom:30%; right:9%; width:25px; height:26px; background-color:var(--color-blood); opacity:.5; }
.deco--cross-3 { top:64%; left:13%; width:14px; height:15px; }
.deco--grid { right:clamp(1rem,3vw,2rem); top:38%; width:54px; height:54px; opacity:.35;
  background:linear-gradient(var(--color-iron) 1px, transparent 1px), linear-gradient(90deg, var(--color-iron) 1px, transparent 1px);
  background-size:11px 11px; }
.deco--coords { top:clamp(5rem,12vh,7rem); left:50%; transform:translateX(-50%); font-size:clamp(.5rem,1vw,.64rem); letter-spacing:.34em; color:var(--color-iron); }

/* ════════════════════════════════════════════════════════════
   SIDE NAV (leader lines toward the feed)
   ════════════════════════════════════════════════════════════ */
.sidenav {
  position:absolute; left:0; top:50%; transform:translateY(-50%); z-index:8;
  display:flex; flex-direction:column; gap:clamp(.5rem,2vh,1.1rem);
  padding-left:clamp(1rem,3vw,2.2rem);
}
.snav { display:flex; align-items:center; gap:.7rem; width:clamp(190px,17vw,250px); text-align:left; }
.snav__label { font-family:var(--font-display); font-weight:600; font-size:clamp(.78rem,1.5vw,.98rem);
  letter-spacing:.16em; text-transform:uppercase; color:var(--color-ash); white-space:nowrap;
  text-shadow:var(--phosphor-soft); transition:color .2s, text-shadow .2s; }
.snav__num { display:inline-block; min-width:2.1em; color:var(--color-smoke); font-size:.78em; letter-spacing:.05em; }
.snav__lead { flex:1; display:flex; align-items:center; }
.snav__line { flex:1; height:1px; background:var(--color-iron); transition:background .2s, box-shadow .2s; }
.snav__node { width:7px; height:7px; flex:none; transform:rotate(45deg); border:1px solid var(--color-iron); transition:border-color .2s, background .2s, box-shadow .2s; }
.snav:hover .snav__label { color:var(--color-bone); }
.snav:hover .snav__line { background:var(--color-smoke); }
.snav:hover .snav__node { border-color:var(--color-smoke); }
.snav.is-on .snav__label { color:var(--color-bone); text-shadow:var(--phosphor); }
.snav.is-on .snav__num { color:var(--color-red); }
.snav.is-on .snav__line { background:var(--color-red); box-shadow:var(--bloom-red); }
.snav.is-on .snav__node { border-color:var(--color-red); background:var(--color-red); box-shadow:var(--bloom-red); animation:recblink 1.6s steps(1) infinite; }

/* ════════════════════════════════════════════════════════════
   THE STAGE (active feed, centered)
   ════════════════════════════════════════════════════════════ */
.stage {
  position:absolute; z-index:3;
  top:clamp(7rem,16vh,9.5rem); bottom:clamp(4rem,10vh,6rem);
  left:clamp(2rem,6vw,5rem); right:clamp(2rem,6vw,5rem);
  overflow-y:auto; overflow-x:hidden;
  scrollbar-width:thin; scrollbar-color:var(--color-blood) transparent;
}
.stage::-webkit-scrollbar { width:7px; }
.stage::-webkit-scrollbar-track { background:transparent; }
.stage::-webkit-scrollbar-thumb { background:var(--color-iron); }
.stage::-webkit-scrollbar-thumb:hover { background:var(--color-blood); }
/* desktop: tagline dominates the left, accordion fills the right (~40/60) */
.stage__bulge { height:100%; display:flex; flex-direction:row; align-items:stretch; gap:clamp(1.2rem,3.5vw,3.5rem); padding:0 .25rem 0 clamp(.25rem,1vw,1rem); }

/* ─── HOME ────────────────────────────────────────────────── */
.home__head {
  font-family:var(--font-black); font-weight:700;
  font-size:clamp(2.4rem,8vw,6.6rem); line-height:1.02; letter-spacing:.005em;
  color:var(--color-bone); margin-bottom:1.5rem;
  text-shadow:var(--ghost), var(--phosphor);
}
.home__sub { font-family:var(--font-mono); font-size:clamp(.82rem,1.7vw,1.05rem); color:var(--color-ash); max-width:52ch; margin-bottom:2rem; line-height:1.75; text-shadow:var(--phosphor-soft); }
.home__cmds { display:flex; flex-wrap:wrap; gap:1rem 2.2rem; }
.cmd-link { font-family:var(--font-mono); font-size:clamp(.82rem,1.7vw,1.02rem); letter-spacing:.12em; color:var(--color-red); text-transform:uppercase; padding:.2rem 0; border-bottom:1px solid transparent; transition:border-color .2s,color .2s; text-shadow:var(--phosphor-soft); }
.cmd-link:hover { color:var(--color-glitch); border-color:var(--color-red); }

/* ─── LORE ────────────────────────────────────────────────── */
.lore__grid { display:grid; grid-template-columns:minmax(0,150px) minmax(0,60ch); gap:clamp(1.6rem,4vw,4rem); align-items:start; }
.lore__mark { filter:url(#signal-displace); }
.lore__mark img { width:100%; opacity:.5; }
.lore__text p { font-family:var(--font-mono); font-size:clamp(.85rem,1.45vw,1.05rem); color:var(--color-ash); margin-bottom:1.4rem; line-height:1.8; text-shadow:var(--phosphor-soft); }
.lore__creed {
  font-family:var(--font-black) !important; font-weight:700;
  font-size:clamp(1.7rem,4.5vw,3rem) !important; line-height:1.1 !important;
  color:var(--color-bone) !important; border-left:3px solid var(--color-red);
  padding-left:1.3rem; margin-top:.6rem !important;
  text-shadow:var(--ghost), var(--phosphor);
}

/* ─── MUSIC ───────────────────────────────────────────────── */
.music__grid { display:grid; grid-template-columns:repeat(auto-fit,minmax(min(100%,230px),1fr)); gap:clamp(1rem,2.2vw,1.8rem); }
.release { background:rgba(28,28,28,.55); border:1px solid var(--color-iron); transition:border-color .2s; }
.release:hover { border-color:var(--color-blood); }
.release__art { aspect-ratio:1; position:relative; overflow:hidden; display:flex; align-items:center; justify-content:center;
  background:repeating-linear-gradient(90deg,rgba(0,0,0,.5) 0 2px,transparent 2px 5px), linear-gradient(135deg,#2a2a2a,#0c0c0c); filter:contrast(1.4) grayscale(.2); }
.release__art--alt { background:repeating-linear-gradient(0deg,rgba(0,0,0,.5) 0 2px,transparent 2px 6px), linear-gradient(135deg,#1a1a1a,#000); }
.release__art--blood { background:repeating-linear-gradient(90deg,rgba(0,0,0,.6) 0 3px,transparent 3px 6px), linear-gradient(135deg,#3a0000,#0a0000); }
.release__index { font-family:var(--font-black); font-weight:700; font-size:clamp(3rem,8vw,6rem); color:rgba(243,243,243,.1); }
.release__meta { padding:1.2rem; display:flex; flex-direction:column; gap:.4rem; }
.release__title { font-family:var(--font-black); font-weight:700; font-size:clamp(1.2rem,2.4vw,1.7rem); line-height:1; color:var(--color-bone); text-shadow:var(--phosphor-soft); }
.release__type { font-family:var(--font-mono); font-size:.7rem; letter-spacing:.14em; color:var(--color-ash); }
.release__cta { font-family:var(--font-mono); font-size:.8rem; letter-spacing:.14em; color:var(--color-red); margin-top:.5rem; align-self:flex-start; text-shadow:var(--phosphor-soft); }
.release__cta:hover { color:var(--color-glitch); }

/* ─── SHOWS ───────────────────────────────────────────────── */
.shows__readout { border:1px solid var(--color-iron); background:rgba(20,20,20,.5); padding:clamp(1.4rem,4vw,2.6rem); max-width:780px; }
.shows__empty { font-family:var(--font-mono); font-size:clamp(.9rem,2.4vw,1.35rem); letter-spacing:.06em; margin-bottom:.8rem; text-shadow:var(--phosphor-soft); }
.shows__empty::before { content:'> '; color:var(--color-red); }
.shows__verse { font-family:var(--font-mono); font-size:clamp(.72rem,1.5vw,.85rem); color:var(--color-smoke); margin-bottom:1.6rem; letter-spacing:.04em; }
.shows__signup { display:flex; flex-wrap:wrap; gap:.7rem; }
.shows__signup input { flex:1 1 240px; background:#080808; border:1px solid var(--color-iron); color:var(--color-bone); padding:.85rem 1.1rem; font-family:var(--font-mono); font-size:.8rem; letter-spacing:.1em; }
.shows__signup input::placeholder { color:var(--color-smoke); }
.shows__status { font-family:var(--font-mono); font-size:.76rem; letter-spacing:.06em; color:var(--color-red); margin-top:1rem; min-height:1.2em; text-shadow:var(--phosphor-soft); }
.btn { font-family:var(--font-display); font-weight:600; font-size:.8rem; letter-spacing:.18em; text-transform:uppercase; padding:.85rem 1.7rem; border:1px solid var(--color-red); color:var(--color-bone); background:rgba(185,0,0,.12); transition:background .2s,box-shadow .2s; text-shadow:var(--phosphor-soft); }
.btn:hover { background:var(--color-blood); box-shadow:0 0 22px rgba(185,0,0,.4); }

/* ─── MERCH ───────────────────────────────────────────────── */
.merch__grid { display:grid; grid-template-columns:repeat(auto-fill,minmax(min(100%,210px),1fr)); gap:clamp(.9rem,2.2vw,1.6rem); }
.merch__skeleton { aspect-ratio:3/4; background:linear-gradient(100deg,#1a1a1a 30%,#242424 50%,#1a1a1a 70%); background-size:200% 100%; animation:shimmer 1.4s infinite linear; border:1px solid var(--color-iron); }
@keyframes shimmer { to { background-position:-200% 0; } }
/* full, uncropped product image — no box; the image just floats and grows on hover */
.product { display:block; position:relative; border:none; background:transparent; transition:transform .3s; }
.product:hover { z-index:2; }
.product__imgwrap { position:relative; overflow:visible; background:transparent; }
.product__img { width:100%; height:auto; object-fit:contain; filter:grayscale(.5) contrast(1.3) brightness(.95); transition:filter .35s, transform .4s; }
.product:hover .product__img { filter:grayscale(0) contrast(1.45) brightness(1.05); transform:scale(1.08); }
.product__scan { position:absolute; inset:0; pointer-events:none; background:repeating-linear-gradient(0deg,rgba(0,0,0,.35) 0 2px,transparent 2px 4px); opacity:.2; }
.product__meta { padding:.7rem .1rem 0; display:flex; flex-direction:column; gap:.3rem; }
.product__title { font-family:var(--font-display); font-weight:700; font-size:clamp(1.15rem,1.5vw,1.4rem); letter-spacing:-.01em; text-transform:uppercase; line-height:1.1; color:var(--color-bone); text-shadow:var(--phosphor-soft); }
.product__price { font-family:var(--font-mono); font-size:clamp(.92rem,1.2vw,1.05rem); letter-spacing:.05em; color:var(--color-red); text-shadow:var(--phosphor-soft); }
.merch__fallback { grid-column:1/-1; border:1px dashed var(--color-iron); background:rgba(20,20,20,.5); padding:clamp(1.8rem,6vw,3.4rem); }
.merch__fallback p { font-family:var(--font-mono); font-size:clamp(.95rem,2.6vw,1.5rem); letter-spacing:.1em; margin-bottom:1.2rem; text-shadow:var(--phosphor-soft); }
.merch__fallback p::before { content:'> '; color:var(--color-red); }
.merch__fallback a { font-family:var(--font-mono); font-size:.84rem; letter-spacing:.16em; color:var(--color-red); border-bottom:1px solid var(--color-red); }
.merch__fallback a:hover { color:var(--color-glitch); }

/* ─── CONTACT ─────────────────────────────────────────────── */
.contact__links { display:flex; flex-direction:column; gap:.2rem; margin-bottom:2rem; }
.contact__links a { font-family:var(--font-black); font-weight:700; font-size:clamp(1.6rem,6vw,3.6rem); line-height:1.08; color:var(--color-bone); width:fit-content; transition:color .2s,transform .2s; text-shadow:var(--ghost),var(--phosphor); }
.contact__links a:hover { color:var(--color-red); transform:translateX(.5rem); }
.contact__press { font-family:var(--font-mono); font-size:.82rem; letter-spacing:.12em; color:var(--color-ash); text-shadow:var(--phosphor-soft); }
.contact__press a { color:var(--color-red); border-bottom:1px solid var(--color-iron); }
.contact__press a:hover { border-color:var(--color-red); }
.contact__amen { font-family:var(--font-black); font-size:clamp(1rem,2.6vw,1.5rem); color:var(--color-blood); margin-top:1.6rem; letter-spacing:.1em; text-shadow:var(--phosphor-soft); }

/* ─── EXTERNAL NAV ITEMS ──────────────────────────────────── */
.snav--ext .snav__ext { font-style:normal; color:var(--color-red); font-size:.8em; margin-left:.15em; }
.snav--ext:hover .snav__label { color:var(--color-bone); }
.snav--ext:hover .snav__line { background:var(--color-blood); }
.snav--ext:hover .snav__node { border-color:var(--color-red); background:var(--color-red); box-shadow:var(--bloom-red); }
.dial__btn--ext { color:var(--color-red); }

/* ════════════════════════════════════════════════════════════
   DASHBOARD (Sanctum)
   ════════════════════════════════════════════════════════════ */
/* ─── HEADER (tagline + creed) — left column on desktop ────── */
.stage-head { flex:0 0 40%; min-width:0; display:flex; flex-direction:column; justify-content:center; }
.dash__title { font-family:var(--font-black); font-weight:700; font-size:clamp(2.6rem,7.2vw,7.5rem); line-height:.96; color:var(--color-bone); text-shadow:var(--ghost),var(--phosphor); }
.dash__creed { font-family:var(--font-black); font-weight:700; font-size:clamp(1rem,1.8vw,1.6rem); color:var(--color-blood); margin-top:.9rem; letter-spacing:.05em; text-shadow:var(--phosphor-soft); }

/* ─── CLICK ACCORDION ──────────────────────────────────────── */
/* vertical padding leaves room for the sigils to straddle the top/bottom
   borders without being clipped by the stage's scroll edge */
.accordion { flex:1 1 0; min-width:0; min-height:0; display:flex; gap:clamp(.5rem,1vw,.9rem); padding:26px 0; }
.acc-col {
  /* octagon shape shared by the box + the inset bg layers (slight 9px corner cuts) */
  --cut:9px;
  --oct:polygon(var(--cut) 0, calc(100% - var(--cut)) 0, 100% var(--cut), 100% calc(100% - var(--cut)),
                calc(100% - var(--cut)) 100%, var(--cut) 100%, 0 calc(100% - var(--cut)), 0 var(--cut));
  position:relative; flex:0 1 14%; min-width:0; overflow:visible; cursor:none;
  background:transparent;   /* the box draws the (octagonal) border */
  /* animate flex-basis only (no flex-grow → no expand-then-shrink jump) */
  transition:flex-basis .5s cubic-bezier(.55,0,.2,1);
  will-change:flex-basis;
}
.acc-col.is-open { flex-basis:60%; }

/* the box is a filled octagon = the border colour; the inset layers sit on a
   slightly smaller octagon so that ~1.5px ring of border colour shows on every
   edge (incl. the diagonals). drop-shadow (not box-shadow) follows the shape. */
.acc-col__box { position:absolute; inset:0; z-index:0; clip-path:var(--oct);
  background:var(--color-iron); transition:background .35s, filter .35s; }
.acc-col:not(.is-open):hover .acc-col__box { background:var(--color-smoke); }
.acc-col.is-open .acc-col__box { background:var(--color-red); filter:drop-shadow(0 0 16px rgba(185,0,0,.42)); }

/* per-column background images (base + hover) */
.acc-col[data-col="videos"]  { --col-bg:url('../assets/videos-column.webp');  --col-bg-hover:url('../assets/videos-column-hover.webp'); }
.acc-col[data-col="listen"]  { --col-bg:url('../assets/listen-column.webp');  --col-bg-hover:url('../assets/listen-column-hover.webp'); }
.acc-col[data-col="merch"]   { --col-bg:url('../assets/merch-column.webp');   --col-bg-hover:url('../assets/merch-column-hover.webp'); }
.acc-col[data-col="contact"] { --col-bg:url('../assets/socials-column.webp'); --col-bg-hover:url('../assets/socials-column-hover.webp'); }

/* layered background: base image, hover image (fades in), then a dark scrim.
   inset 1.5px + their own octagon clip leaves the border ring visible. */
.acc-col__bg { position:absolute; inset:1.5px; z-index:0; clip-path:var(--oct); background:var(--col-bg) center/cover no-repeat; }
.acc-col__bg--hover { background-image:var(--col-bg-hover); background-color:transparent; opacity:0; transition:opacity .35s; }
.acc-col:hover .acc-col__bg--hover, .acc-col.is-open .acc-col__bg--hover { opacity:1; }
.acc-col__scrim { position:absolute; inset:1.5px; z-index:1; clip-path:var(--oct); transition:background .35s;
  background:linear-gradient(rgba(8,8,8,.72), rgba(8,8,8,.82)); }
.acc-col:hover .acc-col__scrim, .acc-col.is-open .acc-col__scrim { background:linear-gradient(rgba(8,8,8,.5), rgba(8,8,8,.64)); }
/* clip the spine label + content to the octagon as well */
.acc-col__tab, .acc-col__content { clip-path:var(--oct); }

/* small sigil visibly straddling the top & bottom borders, tinted to match the
   border (iron → smoke on hover → red when selected); rotated 180° at the bottom */
.acc-col::before, .acc-col::after { content:''; position:absolute; left:50%; width:34px; height:36px; z-index:7; pointer-events:none;
  background-color:var(--color-iron);
  -webkit-mask:url('../assets/sigil-small.svg') no-repeat center / contain;
          mask:url('../assets/sigil-small.svg') no-repeat center / contain;
  transition:background-color .35s; }
.acc-col::before { top:-18px; transform:translateX(-50%); }
.acc-col::after  { bottom:-18px; transform:translateX(-50%) rotate(180deg); }
.acc-col:not(.is-open):hover::before, .acc-col:not(.is-open):hover::after { background-color:var(--color-smoke); }
.acc-col.is-open::before, .acc-col.is-open::after { background-color:var(--color-red); }

/* collapsed spine label */
.acc-col__tab { position:absolute; inset:0; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:1.4rem; opacity:1; transition:opacity .3s; pointer-events:none; z-index:2; }
.acc-col__num { font-family:var(--font-mono); font-size:.9rem; letter-spacing:.2em; color:var(--color-red); text-shadow:var(--phosphor-soft); }
.acc-col__name { font-family:var(--font-black); font-weight:700; font-size:clamp(1.7rem,2.8vw,3rem); color:var(--color-bone); writing-mode:vertical-rl; text-orientation:mixed; rotate:180deg; white-space:nowrap; letter-spacing:.03em; text-shadow:var(--ghost),var(--phosphor); }

/* revealed content (anchored & min-width so it never squishes mid-transition) */
/* inset 1.5px so full-bleed content (e.g. the video) doesn't cover the border ring */
.acc-col__content { position:absolute; inset:1.5px; overflow:hidden;
  display:flex; flex-direction:column; opacity:0; transition:opacity .35s .05s; pointer-events:none; z-index:3; }
.acc-col.is-open .acc-col__tab { opacity:0; }
.acc-col.is-open .acc-col__content { opacity:1; pointer-events:auto; }

.panel__head { display:flex; align-items:center; justify-content:space-between; gap:1rem; flex:0 0 auto;
  padding:.55rem .85rem; border-bottom:1px solid var(--color-iron);
  font-family:var(--font-mono); font-size:clamp(.56rem,1.1vw,.68rem); letter-spacing:.2em;
  text-transform:uppercase; color:var(--color-ash); text-shadow:var(--phosphor-soft); }
.panel__head span:first-child { color:var(--color-red); }
.panel__hint { color:var(--color-smoke) !important; }

.acc-col__body { flex:1; min-height:0; position:relative; overflow:auto; }
.acc-col__body--pad { padding:clamp(1.1rem,2.4vw,2rem); display:flex; flex-direction:column; justify-content:center; gap:.7rem; }
.acc-col__body--video { display:flex; align-items:center; justify-content:center; padding:clamp(.6rem,1.5vw,1.2rem); background:#070707; }
.acc-col__body--video iframe, .acc-col__body--video .video-ph { width:100%; aspect-ratio:16/9; border:0; }
.acc-col__body--merch { display:flex; flex-direction:column; gap:.5rem; padding:.2rem; }
.acc-col__more { align-self:flex-start; margin:.1rem .6rem .6rem; font-family:var(--font-mono); font-size:.76rem; letter-spacing:.14em; color:var(--color-red); border-bottom:1px solid var(--color-iron); text-shadow:var(--phosphor-soft); }
.acc-col__more:hover { color:var(--color-glitch); border-color:var(--color-red); }

/* video placeholder */
.video-ph { display:flex; flex-direction:column; align-items:center; justify-content:center; gap:.8rem;
  background:repeating-linear-gradient(0deg,rgba(0,0,0,.4) 0 2px,transparent 2px 4px), linear-gradient(135deg,#161616,#070707); color:var(--color-ash); }
.video-ph__glyph { font-size:clamp(1.6rem,4vw,2.6rem); color:var(--color-red); text-shadow:var(--bloom-red); }
.video-ph__txt { font-family:var(--font-mono); font-size:clamp(.62rem,1.4vw,.8rem); letter-spacing:.18em; }

/* listen */
.panel__lead { font-family:var(--font-mono); font-size:.72rem; letter-spacing:.28em; color:var(--color-red); text-shadow:var(--phosphor-soft); }
.panel__big { font-family:var(--font-black); font-weight:700; font-size:clamp(1.6rem,3.4vw,2.8rem); line-height:1; color:var(--color-bone); text-shadow:var(--phosphor); margin-bottom:.4rem; }
.btn--block { display:inline-block; text-align:center; font-family:var(--font-display); font-weight:600; font-size:.78rem; letter-spacing:.16em; text-transform:uppercase; padding:.85rem 1.4rem; border:1px solid var(--color-red); color:var(--color-bone); background:rgba(185,0,0,.14); transition:background .2s,box-shadow .2s; text-shadow:var(--phosphor-soft); }
.btn--block:hover { background:var(--color-blood); box-shadow:0 0 22px rgba(185,0,0,.4); }

/* follow / socials — a list that grows cleanly as links are added */
.panel__social { display:flex; align-items:center; gap:.6rem; padding:0;
  font-family:var(--font-display); font-weight:600; font-size:clamp(.82rem,1.7vw,1rem); letter-spacing:.08em;
  text-transform:uppercase; color:var(--color-bone); transition:color .2s; text-shadow:var(--phosphor-soft); }
.panel__social:hover { color:var(--color-red); }
.panel__social-glyph { color:var(--color-red); font-size:1.3em; transition:transform .2s; }
.panel__social:hover .panel__social-glyph { transform:translateX(2px); }

.acc-col__body--socials { justify-content:flex-start; gap:0; }
.acc-col__body--socials .panel__social { width:100%; padding:1.05rem .2rem; border-bottom:1px solid var(--color-iron); }
.acc-col__body--socials .panel__social:first-child { border-top:1px solid var(--color-iron); }
.acc-col__body--socials .panel__social:hover { border-color:var(--color-blood); }

/* CONTACT — two big buttons that fill the column 50/50 */
.acc-col__body--contact { display:flex; flex-direction:column; padding:clamp(.7rem,1.6vw,1.1rem); gap:clamp(.7rem,1.6vw,1.1rem); }
.contact-btn { flex:1 1 0; min-height:clamp(96px,17vw,150px); display:flex; flex-direction:column; align-items:center; justify-content:center; gap:.55rem;
  border:1px solid var(--color-iron); background:rgba(8,8,8,.42); text-align:center; padding:1rem .8rem;
  color:var(--color-bone); transition:border-color .25s, background .25s, box-shadow .25s; }
.contact-btn:hover { border-color:var(--color-red); background:rgba(185,0,0,.1); box-shadow:0 0 24px rgba(185,0,0,.25), inset 0 0 30px rgba(185,0,0,.06); }
.contact-btn .ic { width:2.3em; height:2.3em; color:var(--color-bone); transition:color .25s, transform .25s; }
.contact-btn:hover .ic { color:var(--color-red); transform:scale(1.08); }
.contact-btn__label { font-family:var(--font-display); font-weight:600; font-size:clamp(.95rem,1.9vw,1.25rem); letter-spacing:.05em; text-transform:uppercase; line-height:1.1; text-shadow:var(--phosphor-soft); }
.contact-btn__sub { font-family:var(--font-mono); font-size:clamp(.62rem,1.3vw,.8rem); letter-spacing:.06em; color:var(--color-ash); }
.contact-btn:hover .contact-btn__sub { color:var(--color-red); }

/* brand icons */
.ic { width:1.15em; height:1.15em; flex:none; fill:currentColor; vertical-align:middle; }
.link-ext { margin-left:auto; color:var(--color-red); font-size:.85em; }
.panel__social .ic { color:var(--color-bone); transition:color .2s; }
.panel__social:hover .ic { color:var(--color-red); }

/* LISTEN — streaming-service list (desktop) + button (mobile) */
.acc-col__body--listen { justify-content:flex-start; gap:.3rem; }
.dsp { list-style:none; display:flex; flex-direction:column; margin-top:.6rem; }
.dsp__link { display:flex; align-items:center; gap:.7rem; width:100%; padding:.78rem .2rem;
  border-bottom:1px solid var(--color-iron);
  font-family:var(--font-display); font-weight:600; font-size:clamp(.8rem,1.5vw,.95rem); letter-spacing:.04em;
  text-transform:uppercase; color:var(--color-bone); transition:color .2s, border-color .2s; text-shadow:var(--phosphor-soft); }
.dsp li:first-child .dsp__link { border-top:1px solid var(--color-iron); }
.dsp__link .ic { color:var(--color-bone); transition:color .2s, transform .2s; }
.dsp__link:hover { color:var(--color-red); border-color:var(--color-blood); }
.dsp__link:hover .ic { color:var(--color-red); transform:scale(1.12); }
.dsp-btn { margin-top:1rem; }

/* desktop shows the list, hides the single button; mobile flips it (see media query) */
.dsp-btn { display:none; }

/* merch carousel */
.carousel { overflow-x:auto; overflow-y:hidden; scrollbar-width:thin; scrollbar-color:var(--color-blood) transparent; cursor:none; -webkit-overflow-scrolling:touch; }
.carousel.is-dragging { cursor:none; }
.carousel::-webkit-scrollbar { height:6px; }
.carousel::-webkit-scrollbar-track { background:transparent; }
.carousel::-webkit-scrollbar-thumb { background:var(--color-iron); }
.carousel__track { display:flex; gap:clamp(.7rem,1.6vw,1.1rem); padding:clamp(.7rem,1.6vw,1.1rem); width:max-content; }
.carousel__track.is-entering { animation:carouselIn .7s cubic-bezier(.2,.7,.2,1) both; }
@keyframes carouselIn { from{ opacity:0; transform:translateX(60px); } to{ opacity:1; transform:translateX(0); } }
.carousel .product, .carousel .merch__skeleton { flex:0 0 auto; width:clamp(150px,20vw,195px); }
.carousel .product__img { pointer-events:none; }   /* don't fight the drag */
.carousel .merch__fallback { width:auto; }

/* ════════════════════════════════════════════════════════════
   TERMINAL COMMAND LINE + MOBILE DIAL
   ════════════════════════════════════════════════════════════ */
.terminal-bar { position:absolute; bottom:clamp(1rem,3vh,1.7rem); left:50%; transform:translateX(-50%); z-index:7;
  font-family:var(--font-mono); font-size:clamp(.66rem,1.5vw,.84rem); letter-spacing:.1em; color:var(--color-ash); text-shadow:var(--phosphor-soft); white-space:nowrap; }
.terminal__prompt { color:var(--color-red); }
.terminal__cmd { color:var(--color-bone); }
.terminal__caret { display:inline-block; width:.55em; height:1.05em; background:var(--color-red); margin-left:.15em; transform:translateY(.18em); box-shadow:var(--bloom-red); animation:caret 1s steps(1) infinite; }
@keyframes caret { 0%,49%{opacity:1} 50%,100%{opacity:0} }

.dial { display:none; position:absolute; bottom:clamp(.8rem,2.5vh,1.4rem); left:50%; transform:translateX(-50%); z-index:8; gap:.4rem; }
.dial__btn { font-family:var(--font-display); font-weight:600; font-size:.85rem; letter-spacing:.1em; color:var(--color-ash); padding:.5rem .7rem; min-width:2.6rem; border:1px solid var(--color-iron); text-shadow:var(--phosphor-soft); }
.dial__btn.is-on { color:var(--color-bone); border-color:var(--color-red); background:rgba(185,0,0,.1); box-shadow:0 0 14px rgba(185,0,0,.25); }

/* ════════════════════════════════════════════════════════════
   GLOBAL CRT FX
   ════════════════════════════════════════════════════════════ */
.crt-fx { position:fixed; inset:0; pointer-events:none; }
.crt-fx--bloom { z-index:38; backdrop-filter:blur(.55px) brightness(1.05) contrast(1.03); -webkit-backdrop-filter:blur(.55px) brightness(1.05) contrast(1.03); background:rgba(243,243,243,.01); }
.crt-fx--vignette { z-index:39; background:radial-gradient(122% 116% at 50% 48%, transparent 55%, rgba(0,0,0,.42) 84%, rgba(0,0,0,.82) 100%); }
/* occasional greyscale glitch burst (no colour — desaturated static + horizontal tear) */
.crt-fx--glitch { z-index:40; opacity:0; mix-blend-mode:screen;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.74' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  background-size:200px 200px; }
.crt-fx--glitch.is-glitching { animation:bgGlitch var(--gdur,.3s) steps(1) both; }
@keyframes bgGlitch {
  0%   { opacity:0;   transform:translate(0,0);   clip-path:inset(0 0 0 0); }
  8%   { opacity:.5;  transform:translate(-7px,0); clip-path:inset(42% 0 33% 0); }
  16%  { opacity:.08; transform:translate(4px,0);  clip-path:inset(0 0 0 0); }
  26%  { opacity:.55; transform:translate(6px,0);  clip-path:inset(8% 0 76% 0); }
  38%  { opacity:0; }
  52%  { opacity:.42; transform:translate(-4px,2px); clip-path:inset(66% 0 12% 0); }
  64%  { opacity:.1; }
  80%  { opacity:.48; transform:translate(3px,-1px); clip-path:inset(28% 0 50% 0); }
  100% { opacity:0;   transform:translate(0,0);   clip-path:inset(0 0 0 0); }
}
.crt-fx--scan { z-index:41; background:repeating-linear-gradient(to bottom, rgba(0,0,0,0) 0, rgba(0,0,0,0) 2px, rgba(0,0,0,.34) 2px, rgba(0,0,0,.34) 3px); opacity:.42; mix-blend-mode:multiply; }
.crt-fx--grille { z-index:42; background:repeating-linear-gradient(to right, rgba(255,0,0,.04) 0, rgba(0,255,0,.02) 1px, rgba(0,0,255,.04) 2px, transparent 3px); opacity:.4; mix-blend-mode:screen; }
.crt-fx--flicker { z-index:43; background:rgba(243,243,243,.02); animation:flicker .16s steps(2) infinite; }
@keyframes flicker { 0%{opacity:.08} 50%{opacity:.015} 100%{opacity:.06} }
.crt-fx--cut { z-index:46; background:#000; opacity:0; }
.crt-fx--cut.is-firing { animation:cut .26s steps(2) forwards; }
@keyframes cut { 0%{opacity:0} 30%{opacity:.96} 55%{opacity:.15} 100%{opacity:0} }

/* ─── BOOT ────────────────────────────────────────────────── */
/* z-index 30 sits above content but BELOW the global CRT-FX (38–46),
   so scanlines / bloom / grille / flicker treat the boot screen too. */
.boot { position:fixed; inset:0; z-index:30; background:#000; display:flex; align-items:center; justify-content:center; flex-direction:column; }
.boot.is-done { animation:bootOff .5s ease forwards; pointer-events:none; }
@keyframes bootOff { to { opacity:0; visibility:hidden; } }
.boot__line { position:absolute; left:0; right:0; top:50%; height:2px; background:var(--color-bone); box-shadow:0 0 18px var(--color-bone); animation:bootline 1.4s ease forwards; }
@keyframes bootline { 0%{transform:scaleX(0) scaleY(40)} 40%{transform:scaleX(1) scaleY(40)} 60%{transform:scaleX(1) scaleY(1)} 100%{transform:scaleX(1) scaleY(.4); opacity:0} }
/* same ghost + phosphor distortion the rest of the site's display text carries */
.boot__log { font-family:var(--font-mono); font-size:clamp(.7rem,2vw,.95rem); color:var(--color-red); letter-spacing:.1em; text-align:left; max-width:90vw; min-height:9em; opacity:0; animation:bootlog .3s .9s ease forwards; text-shadow:var(--ghost), var(--phosphor); }
@keyframes bootlog { to { opacity:1; } }

/* ─── CURSOR ──────────────────────────────────────────────── */
.cursor { position:fixed; top:0; left:0; z-index:70; width:24px; height:24px; pointer-events:none; transform:translate(-50%,-50%); mix-blend-mode:difference; transition:width .18s,height .18s; }
.cursor__h, .cursor__v { position:absolute; background:var(--color-red); }
.cursor__h { top:50%; left:0; width:100%; height:1px; transform:translateY(-50%); }
.cursor__v { left:50%; top:0; height:100%; width:1px; transform:translateX(-50%); }
.cursor.is-hover { width:40px; height:40px; }
.cursor.is-hover .cursor__h, .cursor.is-hover .cursor__v { background:var(--color-glitch); }

/* ════════════════════════════════════════════════════════════
   RESPONSIVE
   ════════════════════════════════════════════════════════════ */
@media (max-width: 1000px) {
  .deco--verse-l, .deco--grid, .deco--cross-3 { display:none; }
  .stage { left:clamp(1.2rem,5vw,2.5rem); right:clamp(1.2rem,5vw,2.5rem); bottom:clamp(2.5rem,7vh,4rem); }
  .terminal-bar { display:none; }
}

/* ── stack: tagline on top, then video → listen → socials → merch ── */
@media (max-width: 880px) {
  .stage__bulge { flex-direction:column; height:auto; gap:0; }

  /* hero: big + centered, fills a good chunk of the screen */
  .stage-head { flex:none; margin-bottom:clamp(1.6rem,6vw,2.6rem); text-align:center; align-items:center;
    min-height:46vh; justify-content:center; }
  .dash__title { font-size:clamp(2.9rem,13.5vw,5.5rem); max-width:14ch; }
  .dash__creed { font-size:clamp(1.15rem,4.4vw,1.8rem); margin-top:1.1rem; }

  /* wide boxes, but with ~20px of side room so the sigils fully overlap OUTSIDE
     the boxes while staying inside the viewport (no horizontal scroll) */
  .stage__bulge { padding:0; }
  .accordion { flex:none; flex-direction:column; gap:1.6rem; min-height:0; padding:0 20px clamp(3.5rem,16vw,6rem); }
  .acc-col, .acc-col.is-open { flex:none !important; overflow:visible; }
  /* boxes return to normal flow so the content sets each box's height */
  .acc-col__box { position:relative; inset:auto; }
  .acc-col.is-open .acc-col__box { background:var(--color-iron); filter:none; }   /* uniform on mobile */
  .acc-col__tab { display:none; }
  /* content sits ABOVE the scrim (fixes darkening) + 1.5px margin so the border
     ring shows around full-bleed content like the video */
  .acc-col__content { position:relative; inset:auto; margin:1.5px; z-index:3; opacity:1 !important; width:auto; min-width:0; pointer-events:auto; }
  .acc-col__body { overflow:visible; }
  .acc-col__bg--hover { opacity:0 !important; }   /* base image only on mobile */

  /* sigils move to the left & right sides of each box, overlapping; facing outward */
  .acc-col::before, .acc-col::after { display:block; top:50%; bottom:auto;
    background-color:var(--color-iron) !important;
    -webkit-mask-image:url('../assets/sigil-small.svg'); mask-image:url('../assets/sigil-small.svg'); }
  .acc-col::before { left:-18px; right:auto; transform:translateY(-50%) rotate(-90deg); }
  .acc-col::after  { right:-18px; left:auto;  transform:translateY(-50%) rotate(90deg); }

  /* Listen: hide the desktop service list, show the single pre-save button */
  .dsp { display:none; }
  .dsp-btn { display:inline-block; }

  /* footer: copyright bottom-left, hordeman.co credit bottom-right, dim line above each */
  .hud--bl { display:flex; }
  .hud__feed { display:none; }
  .foot-d { display:none; }
  .foot-m { display:block; }

  /* pull the stage close to the page edges so the boxes are wide */
  .stage { left:clamp(.4rem,1.8vw,.9rem); right:clamp(.4rem,1.8vw,.9rem);
    /* gradual fade at the top (under the header) AND the bottom, instead of hard cuts */
    -webkit-mask-image:linear-gradient(to bottom, transparent 0, #000 56px, #000 calc(100% - 68px), transparent 100%);
            mask-image:linear-gradient(to bottom, transparent 0, #000 56px, #000 calc(100% - 68px), transparent 100%); }
}
@media (max-width: 640px) {
  .deco--barcode, .deco--coords, .deco--verse-r, .brand__sub { display:none; }
  .stage { top:clamp(6rem,15vh,8rem); }
}

@media (hover: none) { body, button, a { cursor:auto; } .cursor { display:none; } }

/* ─── REDUCED MOTION ──────────────────────────────────────── */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation:none !important; transition:opacity .2s !important; }
  .crt-fx--flicker, .crt-fx--glitch { display:none; }
  .boot { display:none; }
  .deco--watermark { filter:none !important; }
  .acc-col { transition:none !important; }
  .carousel__track.is-entering { animation:none !important; }
}