@import url('https://fonts.googleapis.com/css2?family=VT323&family=Silkscreen:wght@400;700&display=swap');
/* ============================================================
   ABSYNTH 808 — MATRIX / GLITCH OVERHAUL
   Loaded last on every page so it overrides each page's own
   inline <style> block. Re-maps the existing design tokens
   rather than rewriting every bespoke layout.
   ============================================================ */

:root{
  /* --- the gradient: matrix green -> cyan --- */
  --mx-green:#00ff5f;
  --mx-green-deep:#00c247;
  --mx-spring:#00ffa3;
  --mx-cyan:#00e5ff;
  --mx-cyan-deep:#22d3ee;
  --mx-grad: linear-gradient(104deg,
              var(--mx-green) 0%,
              var(--mx-spring) 32%,
              var(--mx-cyan-deep) 68%,
              var(--mx-cyan) 100%);

  /* --- the glow: purple + red --- */
  --mx-purple:#8b3bff;
  --mx-purple-soft:rgba(139,59,255,.55);
  --mx-red:#ff2049;
  --mx-red-soft:rgba(255,32,73,.38);
  --mx-glow:
      drop-shadow(0 0 6px rgba(139,59,255,.34))
      drop-shadow(0 0 16px rgba(255,32,73,.2));
  --mx-glow-strong:
      drop-shadow(0 0 6px rgba(0,255,95,.45))
      drop-shadow(0 0 16px var(--mx-purple-soft))
      drop-shadow(0 0 38px var(--mx-red-soft));

  /* --- re-mapped legacy tokens (pages reference these) --- */
  --void:#02040a;
  --paper:#d8f3ec;
  --muted:#6d8f88;
  --red:#ff2049;
  --blue:#0f8fae;
  --blue-glow:#22d3ee;
  --stark-blue:#00e5ff;
  --cyan:#00e5ff;
  --purple:#8b3bff;
  --line:rgba(0,255,95,.14);
  --panel:rgba(0,255,95,.025);
}

html{ background:var(--void); }
body{
  background:var(--void);
  color:var(--paper);
  text-rendering:optimizeLegibility;
}
::selection{ background:var(--mx-green); color:#02040a; }

/* ============================================================
   1. GRADIENT TEXT
   ============================================================ */
.mx-grad,
h1, h2, h3,
.logo,
nav a:not(.nav-void):not(.nav-contact):not(.nav-vst),
.hero-pill, .pill,
.card .title, .title,
.album-title, .track-title,
.section-label, .eyebrow,
footer a{
  background-image:var(--mx-grad);
  background-size:220% 100%;
  -webkit-background-clip:text;
  background-clip:text;
  -webkit-text-fill-color:transparent;
  color:transparent;
  filter:var(--mx-glow);
  animation:mx-grad-drift 14s ease-in-out infinite;
}

h1, .logo{ filter:var(--mx-glow-strong); }

@keyframes mx-grad-drift{
  0%,100%{ background-position:0% 50%; }
  50%    { background-position:100% 50%; }
}

/* Children inside gradient text keep the parent's clip, but a few
   pages colour spans directly — force them back into the gradient. */
h1 span, h2 span, h3 span, .logo span, nav a span,
.hero-pill span, .pill span, .title span{
  -webkit-text-fill-color:transparent;
  color:transparent;
}

/* Images used inside gradient-text containers must not be clipped away. */
h1 img, h2 img, h3 img, .logo img, nav a img,
.hero-pill img, .pill img, .title img, footer a img{
  -webkit-text-fill-color:initial;
  filter:none;
}

/* Body copy stays readable — tinted, not gradient. */
p, li, td, th, dd, dt, blockquote, .meta, .studio, .note, .muted, small{
  color:var(--paper);
  -webkit-text-fill-color:currentColor;
  background-image:none;
  filter:none;
  animation:none;
}
p, li, blockquote{ color:#b9dcd4; }
.meta, .muted, small, .note{ color:var(--muted); }

/* ============================================================
   2. GLITCH
   ============================================================ */
.mx-glitch{ position:relative; }

.mx-glitch::before,
.mx-glitch::after{
  content:attr(data-mx-text);
  position:absolute;
  left:0; top:0; width:100%;
  background-image:none;
  -webkit-background-clip:border-box;
  background-clip:border-box;
  pointer-events:none;
  opacity:0;
}
/* Only render the copies while the glitch is firing. Gradient text is
   painted with background-clip:text, which clips to every glyph inside
   the element, invisible ones included, so idle copies would show up
   as a ghost label at the top of buttons. */
.mx-glitch:not(.mx-fire)::before,
.mx-glitch:not(.mx-fire)::after{ content:none; }
.mx-glitch.mx-fire::before{
  animation-fill-mode:forwards;
  -webkit-text-fill-color:var(--mx-red);
  color:var(--mx-red);
  opacity:.85;
  animation:mx-chop-a .42s steps(2,end) 1;
  mix-blend-mode:screen;
}
.mx-glitch.mx-fire::after{
  animation-fill-mode:forwards;
  -webkit-text-fill-color:var(--mx-cyan);
  color:var(--mx-cyan);
  opacity:.85;
  animation:mx-chop-b .42s steps(2,end) 1;
  mix-blend-mode:screen;
}
.mx-glitch.mx-fire{ animation:mx-shake .42s steps(2,end) 1; }

@keyframes mx-chop-a{
  0%  { transform:translate(0,0);      clip-path:inset(0 0 72% 0); }
  25% { transform:translate(-5px,-2px);clip-path:inset(18% 0 46% 0); }
  50% { transform:translate(4px,1px);  clip-path:inset(54% 0 22% 0); }
  75% { transform:translate(-3px,2px); clip-path:inset(76% 0 4% 0); }
  100%{ transform:translate(0,0);      clip-path:inset(0 0 100% 0); }
}
@keyframes mx-chop-b{
  0%  { transform:translate(0,0);      clip-path:inset(84% 0 0 0); }
  25% { transform:translate(5px,2px);  clip-path:inset(58% 0 18% 0); }
  50% { transform:translate(-4px,-1px);clip-path:inset(30% 0 52% 0); }
  75% { transform:translate(3px,-2px); clip-path:inset(6% 0 80% 0); }
  100%{ transform:translate(0,0);      clip-path:inset(100% 0 0 0); }
}
@keyframes mx-shake{
  0%,100%{ transform:translate(0,0); }
  20%{ transform:translate(-2px,1px) skewX(-1.2deg); }
  40%{ transform:translate(2px,-1px) skewX(1deg); }
  60%{ transform:translate(-1px,0) skewX(.6deg); }
  80%{ transform:translate(1px,1px); }
}

/* hover glitch on anything interactive */
a:hover, button:hover{ animation:mx-shake .3s steps(2,end) 1; }

/* ============================================================
   3. SCREEN FURNITURE — rain, scanlines, vignette, tracking bar
   ============================================================ */
#mx-rain{
  position:fixed; inset:0;
  z-index:0;
  pointer-events:none;
  opacity:.16;
  mix-blend-mode:screen;
}

.mx-scan{
  position:fixed; inset:0;
  z-index:9998;
  pointer-events:none;
  background:repeating-linear-gradient(
     to bottom,
     rgba(0,0,0,0) 0px,
     rgba(0,0,0,0) 3px,
     rgba(0,255,95,.02) 4px,
     rgba(0,0,0,.06) 5px);
  mix-blend-mode:overlay;
}

.mx-vignette{
  position:fixed; inset:0;
  z-index:9997;
  pointer-events:none;
  background:
    radial-gradient(ellipse at 50% 42%, rgba(0,0,0,0) 44%, rgba(0,0,0,.62) 100%),
    radial-gradient(ellipse at 50% 0%, rgba(139,59,255,.10) 0%, rgba(0,0,0,0) 58%),
    radial-gradient(ellipse at 50% 100%, rgba(255,32,73,.09) 0%, rgba(0,0,0,0) 58%);
}

.mx-track{
  position:fixed; left:0; right:0; height:120px;
  z-index:9996; pointer-events:none;
  background:linear-gradient(to bottom,
     rgba(0,255,95,0) 0%,
     rgba(0,255,95,.045) 48%,
     rgba(0,229,255,.06) 52%,
     rgba(0,255,95,0) 100%);
  animation:mx-track-roll 9s linear infinite;
  opacity:.75;
}
@keyframes mx-track-roll{
  0%  { transform:translateY(-140px); }
  100%{ transform:translateY(100vh); }
}

/* The rain sits at z-index 0 alongside each page's own starfield canvas,
   so page content stacks above it without us touching `position` —
   overriding position here would unhide the mobile nav drawer. */

/* ============================================================
   4. SURFACES — panels, cards, rules, inputs
   ============================================================ */
.card, .panel, .door, .tile, article.card{
  background:
     linear-gradient(180deg, rgba(0,255,95,.035), rgba(0,0,0,0)),
     rgba(4,10,14,.62);
  border:1px solid var(--line);
  box-shadow:
     0 0 0 1px rgba(0,255,95,.04),
     0 18px 48px -24px rgba(139,59,255,.5),
     inset 0 1px 0 rgba(0,255,95,.07);
  backdrop-filter:blur(6px);
  transition:border-color .35s ease, box-shadow .35s ease, transform .35s ease;
}
.card:hover, .panel:hover, .door:hover, .tile:hover{
  border-color:rgba(0,229,255,.42);
  box-shadow:
     0 0 0 1px rgba(0,229,255,.18),
     0 0 34px -6px rgba(139,59,255,.55),
     0 0 64px -12px rgba(255,32,73,.4),
     inset 0 1px 0 rgba(0,255,95,.12);
  transform:translateY(-3px);
}

hr, .rule, .divider{
  border:0; height:1px;
  background:linear-gradient(90deg,
     rgba(0,0,0,0), var(--mx-green), var(--mx-cyan), rgba(0,0,0,0));
  opacity:.5;
}

header{
  border-bottom:1px solid var(--line);
  box-shadow:0 1px 0 rgba(0,255,95,.06), 0 10px 40px -22px rgba(139,59,255,.6);
}

input, textarea, select{
  background:rgba(0,20,14,.6);
  border:1px solid var(--line);
  color:var(--mx-green);
  caret-color:var(--mx-green);
  font-family:'JetBrains Mono', ui-monospace, monospace;
}
input:focus, textarea:focus, select:focus{
  outline:none;
  border-color:var(--mx-cyan);
  box-shadow:0 0 0 1px rgba(0,229,255,.3), 0 0 22px -4px rgba(139,59,255,.7);
}

/* ============================================================
   5. MOTION SAFETY
   ============================================================ */
@media (prefers-reduced-motion: reduce){
  *, *::before, *::after{
    animation-duration:.001ms !important;
    animation-iteration-count:1 !important;
    transition-duration:.001ms !important;
  }
  #mx-rain, .mx-track{ display:none; }
}

@media (max-width:720px){
  #mx-rain{ opacity:.1; }
  .mx-track{ display:none; }
}

/* ============================================================
   6. DISCOGRAPHY TILES — matrix highlight on hover
   Every track / album / compilation tile washes green, picks up
   a green->cyan gradient highlight, an inner glow, and a
   scan sweep. Repurposes the tile's existing ::before/::after.
   ============================================================ */

.track-tile, .album-cover, .comp-cover{
  position:relative;
  transition:box-shadow .35s var(--ease, ease), transform .35s var(--ease, ease);
}

/* --- the art itself goes green --- */
.track-tile img, .album-cover img{
  transition:transform .45s ease, filter .45s ease;
}
.track-tile:hover img,
.album-cover:hover img,
.album-card:hover .album-cover img{
  filter:grayscale(1) contrast(1.12) sepia(1) hue-rotate(68deg) saturate(5.5) brightness(1.04);
  transform:scale(1.05);
}

/* --- green gradient highlight + inner glow --- */
.track-tile::after,
.album-cover::after,
.comp-cover::after{
  content:''; position:absolute; inset:0; z-index:3; pointer-events:none;
  background:linear-gradient(152deg,
      rgba(0,255,95,.00) 0%,
      rgba(0,255,95,.00) 100%);
  box-shadow:none;
  opacity:.5;
  transition:background .4s ease, box-shadow .4s ease, opacity .4s ease;
}
.track-tile:hover::after,
.album-cover:hover::after,
.comp-cover:hover::after,
.album-card:hover .album-cover::after{
  opacity:1;
  background:linear-gradient(152deg,
      rgba(0,255,95,.38) 0%,
      rgba(0,255,163,.22) 38%,
      rgba(34,211,238,.16) 68%,
      rgba(0,0,0,0) 100%);
  box-shadow:
      inset 0 0 22px rgba(0,255,95,.55),
      inset 0 0 58px rgba(0,229,255,.30),
      inset 0 0 0 1px rgba(0,255,95,.55);
}

/* --- outer bloom on the tile --- */
.track-tile:hover,
.album-cover:hover,
.comp-cover:hover,
.album-card:hover .album-cover{
  box-shadow:
      0 0 20px -2px rgba(0,255,95,.45),
      0 0 46px -8px rgba(0,229,255,.35),
      0 0 70px -16px rgba(139,59,255,.4);
  z-index:2;
}

/* --- matrix scan sweep (recolours the old white shimmer) --- */
.track-tile::before,
.album-cover::before,
.comp-cover::before{
  content:''; position:absolute; top:0; bottom:0; left:-60%; width:45%; z-index:4;
  background:linear-gradient(105deg,
      transparent,
      rgba(0,255,95,.30) 42%,
      rgba(0,229,255,.38) 58%,
      transparent);
  transform:skewX(-18deg);
  pointer-events:none; opacity:0;
}
.track-tile:hover::before,
.album-cover:hover::before,
.comp-cover:hover::before,
.album-card:hover .album-cover::before{
  opacity:1;
  animation:tileShimmer 1.1s ease;
}

/* --- caption goes green, monospace glow --- */
.track-tile:hover .track-tile-overlay,
.album-card:hover .album-title{
  color:#8dffc4;
  -webkit-text-fill-color:#8dffc4;
  text-shadow:0 0 10px rgba(0,255,95,.75), 0 0 24px rgba(0,229,255,.4);
}
.track-tile .track-tile-overlay{
  transition:color .35s ease, text-shadow .35s ease, background .35s ease;
}
.track-tile:hover .track-tile-overlay{
  background:linear-gradient(to top, rgba(0,22,12,.9), rgba(0,30,18,.25) 55%, transparent);
}

/* placeholder tiles (no art) still light up */
.track-tile.placeholder:hover{
  background:linear-gradient(152deg, rgba(0,255,95,.14), rgba(0,0,0,0) 70%), var(--void);
}

/* ============================================================
   7. PER-PAGE BACKGROUND ART
   Each page carries its own key in <body data-mx-bg="...">, so the
   rain and the scanlines blend over that page's artwork rather than
   over flat black. Keep the art readable: it sits well behind the
   content and gets a light matrix tint, not a full recolour.
   ============================================================ */
.mx-bg{
  position:fixed; inset:0; z-index:-2; pointer-events:none;
  background-position:center center;
  background-size:cover;
  background-repeat:no-repeat;
  opacity:.72;
  filter:saturate(1.22) contrast(1.04) brightness(.98);
  transform:scale(1.04);
}
.mx-bg::after{
  content:''; position:absolute; inset:0;
  background:
    linear-gradient(180deg, rgba(0,255,95,.12) 0%, rgba(0,0,0,0) 42%, rgba(139,59,255,.16) 100%),
    radial-gradient(ellipse at 50% 38%, rgba(0,229,255,.10), rgba(0,0,0,0) 62%);
  mix-blend-mode:overlay;
}

body[data-mx-bg="nebula-blue-red"] .mx-bg{ background-image:url('/assets/bg-nebula-blue-red.webp'); }
body[data-mx-bg="nebula-red"]      .mx-bg{ background-image:url('/assets/bg-nebula-red.webp'); }
body[data-mx-bg="galaxy-purple"]   .mx-bg{ background-image:url('/assets/bg-galaxy-purple.webp'); }
body[data-mx-bg="andromeda"]       .mx-bg{ background-image:url('/assets/bg-andromeda.jpg'); }
body[data-mx-bg="story-red"]       .mx-bg{ background-image:url('/assets/bg-story-red.webp'); }
body[data-mx-bg="duality-smoke"]   .mx-bg{ background-image:url('/assets/art-duality-smoke.webp'); }
body[data-mx-bg="church"]          .mx-bg{ background-image:url('/assets/ui/church_interior.webp'); }
body[data-mx-bg="vst-purple"]      .mx-bg{ background-image:url('/assets/plugin/bg-vst-purple.webp'); }
body[data-mx-bg="vst-redblue"]     .mx-bg{ background-image:url('/assets/plugin/bg-vst-redblue.webp'); }
body[data-mx-bg="vst-tunnel"]      .mx-bg{ background-image:url('/assets/plugin/bg-vst-tunnel.webp'); }

/* With real art behind it the vignette can ease off and the rain
   can sit a little brighter, so the two read as one image. */
.mx-vignette{
  background:
    radial-gradient(ellipse at 50% 42%, rgba(0,0,0,0) 72%, rgba(0,0,0,.24) 100%),
    radial-gradient(ellipse at 50% 0%, rgba(139,59,255,.09) 0%, rgba(0,0,0,0) 54%),
    radial-gradient(ellipse at 50% 100%, rgba(255,32,73,.07) 0%, rgba(0,0,0,0) 54%);
}
#mx-rain{ opacity:.09; }
@media (max-width:720px){
  #mx-rain{ opacity:.06; }
  .mx-bg{ opacity:.48; }
}


/* ============================================================
   8. CRT / PHOSPHOR TERMINAL
   The whole site reads like an early desktop computer screen:
   a phosphor typeface, RGB fringing on every glyph, a shadow
   mask, screen curvature and a slow flicker. Deliberately NOT
   a CSS `filter` on <body> — that would create a containing
   block and break every position:fixed layer above.
   ============================================================ */

:root{
  --crt-font: 'VT323', 'JetBrains Mono', ui-monospace, 'Courier New', monospace;
  --crt-fringe-r: rgba(255,0,60,.42);
  --crt-fringe-c: rgba(0,229,255,.38);
}

/* --- 8.1 the phosphor typeface, everywhere --- */
body, body *:not(i):not(.fa):not([class*="icon"]){
  font-family:var(--crt-font) !important;
}

/* VT323 runs small and tight for its em, so open it back up. */
body{
  font-size:1.12rem;
  letter-spacing:.012em;
  line-height:1.6;
  -webkit-font-smoothing:antialiased;
}
p, li, blockquote, td, th, dd, dt{ line-height:1.65; }
h1, h2, h3{ letter-spacing:.015em; line-height:1.12; }

/* Monospace UI text was already small — nudge it up so the
   bitmap face stays legible at label sizes. */
.eyebrow, .section-label, .meta, .kicker, .note, small,
.track-tile-overlay, .album-year, nav a, footer, button, .pill, .hero-pill{
  font-size:1.06em;
  letter-spacing:.06em;
}

/* --- 8.2 RGB fringing + phosphor bloom on the glyphs --- */
/* Gradient text is painted through background-clip, so it takes
   the fringe as drop-shadows on the element. */
.mx-grad, h1, h2, h3, .logo, nav a:not(.nav-void):not(.nav-contact):not(.nav-vst), .hero-pill, .pill,
.card .title, .title, .album-title, .track-title,
.section-label, .eyebrow, footer a{
  filter:
      drop-shadow(-1px 0 0 var(--crt-fringe-r))
      drop-shadow(1px 0 0 var(--crt-fringe-c))
      drop-shadow(0 0 9px var(--mx-purple-soft))
      drop-shadow(0 0 24px var(--mx-red-soft));
}
h1, .logo{
  filter:
      drop-shadow(-1.5px 0 0 var(--crt-fringe-r))
      drop-shadow(1.5px 0 0 var(--crt-fringe-c))
      drop-shadow(0 0 6px rgba(0,255,95,.5))
      drop-shadow(0 0 18px var(--mx-purple-soft))
      drop-shadow(0 0 40px var(--mx-red-soft));
}

/* Ordinary copy keeps its own colour, so it takes the fringe as
   text-shadow instead — same effect, no repaint cost. */
p, li, td, th, dd, dt, blockquote, .meta, .muted, small, .note, span, label{
  text-shadow:
      -0.6px 0 var(--crt-fringe-r),
       0.6px 0 var(--crt-fringe-c),
       0 0 7px rgba(0,255,95,.22);
}

/* --- 8.3 shadow mask (aperture grille) --- */
.mx-crt-mask{
  position:fixed; inset:0; z-index:9995; pointer-events:none;
  background:repeating-linear-gradient(
      to right,
      rgba(255,0,60,.055)  0px,
      rgba(0,255,95,.055)  1px,
      rgba(0,160,255,.055) 2px,
      rgba(0,0,0,.10)      3px);
  mix-blend-mode:overlay;
  opacity:.34;
}

/* --- 8.4 glass curvature + bezel falloff --- */
.mx-crt-bezel{
  position:fixed; inset:0; z-index:9999; pointer-events:none;
  border-radius:22px;
  box-shadow:
      inset 0 0 60px rgba(0,0,0,.26),
      inset 0 0 150px rgba(0,0,0,.16);
  background:
    radial-gradient(130% 110% at 50% 50%, rgba(0,0,0,0) 74%, rgba(0,0,0,.22) 100%),
    linear-gradient(100deg, rgba(255,255,255,.035) 0%, rgba(255,255,255,0) 22%);
}

/* --- 8.5 the slow phosphor flicker --- */
.mx-crt-flicker{
  position:fixed; inset:0; z-index:9994; pointer-events:none;
  background:rgba(0,255,95,.012);
  animation:mx-crt-flicker 9s steps(1,end) infinite;
  opacity:.5;
}
@keyframes mx-crt-flicker{
  0%,  100%{ opacity:.18; }
  3%  { opacity:.42; }
  6%  { opacity:.12; }
  9%  { opacity:.36; }
  11% { opacity:.16; }
  40% { opacity:.22; }
  41% { opacity:.46; }
  43% { opacity:.2;  }
  72% { opacity:.15; }
  74% { opacity:.38; }
  76% { opacity:.18; }
}

/* --- 8.6 power-on sweep, once per page load --- */
.mx-crt-on{
  position:fixed; left:0; right:0; top:0; height:100vh;
  z-index:10000; pointer-events:none;
  background:linear-gradient(to bottom,
     rgba(0,0,0,0) 0%, rgba(0,255,95,.22) 48%, rgba(0,229,255,.3) 50%,
     rgba(0,255,95,.22) 52%, rgba(0,0,0,0) 100%);
  animation:mx-crt-on 1.05s cubic-bezier(.3,.7,.3,1) 1 forwards;
}
@keyframes mx-crt-on{
  0%  { transform:translateY(-100vh); opacity:1; }
  85% { opacity:1; }
  100%{ transform:translateY(100vh); opacity:0; }
}

@media (prefers-reduced-motion: reduce){
  .mx-crt-flicker, .mx-crt-on{ display:none; }
}
@media (max-width:720px){
  .mx-crt-mask{ opacity:.5; }
  .mx-crt-bezel{ border-radius:0; }
  body{ font-size:1.08rem; }
}

/* ============================================================
   9. SOFT MODE
   The homepage is the first thing anyone sees, so it wears the
   effect lightly: the rain, mask, scanlines and flicker all pull
   back, and the background art comes forward. The gradient text,
   phosphor fringing and glow are untouched — the identity stays,
   the noise drops. Add data-mx-soft to any <body> to opt in.
   ============================================================ */
body[data-mx-soft] #mx-rain        { opacity:.05; }
body[data-mx-soft] .mx-crt-mask    { opacity:.16; }
body[data-mx-soft] .mx-crt-flicker { animation-duration:11s; opacity:.5; }
body[data-mx-soft] .mx-track       { display:none; }
body[data-mx-soft] .mx-bg          { opacity:.86; filter:saturate(1.15) contrast(1.02) brightness(1.04); }

body[data-mx-soft] .mx-scan{
  background:repeating-linear-gradient(
     to bottom,
     rgba(0,0,0,0) 0px,
     rgba(0,0,0,0) 3px,
     rgba(0,255,95,.022) 4px,
     rgba(0,0,0,.07) 5px);
}
body[data-mx-soft] .mx-crt-bezel{
  box-shadow:
      inset 0 0 70px rgba(0,0,0,.34),
      inset 0 0 180px rgba(0,0,0,.2);
}
body[data-mx-soft] .mx-vignette{
  background:
    radial-gradient(ellipse at 50% 42%, rgba(0,0,0,0) 66%, rgba(0,0,0,.34) 100%),
    radial-gradient(ellipse at 50% 0%, rgba(139,59,255,.09) 0%, rgba(0,0,0,0) 56%),
    radial-gradient(ellipse at 50% 100%, rgba(255,32,73,.07) 0%, rgba(0,0,0,0) 56%);
}


/* ============================================================
   10. HEADER ALIGNMENT
   VT323 carries far more internal leading than the faces this
   site was built on, so header items drifted off a shared
   baseline once the CRT font went global.

   SCOPED TO DESKTOP ON PURPOSE: below 900px the nav is a
   slide-in drawer (flex-direction:column, align-items:flex-start,
   translateX off-canvas). A `header nav` rule outranks the
   page's own `nav` rule, so centring/wrapping here destroyed
   the drawer at every width. Don't widen this media query.
   ============================================================ */
@media (min-width:901px){
  header{ align-items:center; }
  header nav{
    display:flex;
    align-items:center;
    flex-wrap:wrap;
    gap:0;
  }
  header nav > a,
  header nav .nav-divider,
  header nav .nav-dropdown,
  header nav .nav-dropdown-trigger,
  header .logo{
    display:inline-flex;
    align-items:center;
    line-height:1;
  }
  header nav .nav-divider{ opacity:.45; padding:0 .15em; }
}

header .logo img, header nav a img{ display:block; }

/* the dropdown panel is absolutely positioned — keep it block */
header nav .nav-dropdown-menu{ line-height:1.5; }
header nav .nav-dropdown-menu a{ display:block; line-height:1.6; }

/* --- the drawer, below 900px --- */
@media (max-width:900px){
  /* Small uppercase mono text plus a four-layer drop-shadow reads
     as blur. Inside the drawer, drop the fringe and keep one glow. */
  nav a, nav .nav-dropdown-trigger{
    filter:drop-shadow(0 0 8px rgba(0,255,95,.35)) !important;
    letter-spacing:.08em;
  }
  nav.open a, nav.open .nav-dropdown-trigger{
    width:100%;
    line-height:1.5;
  }
  /* On desktop this is a dim, wide-tracked heading. In the drawer it sits in
     a plain list of links, where that treatment reads as smaller and weaker
     than its neighbours, so it matches them instead. */
  header nav .nav-dropdown-menu a.nav-menu-head{
    padding:8px 0 !important;
    font-size:inherit; letter-spacing:.1em; text-transform:none;
    color:inherit; -webkit-text-fill-color:currentColor;
  }

  /* self-painted pills stay solid and tappable in the drawer */
  nav .nav-void, nav .nav-contact, nav .nav-vst{
    display:inline-flex !important;
    align-items:center;
    justify-content:center;
    width:auto;
    filter:none !important;
    text-shadow:0 0 9px rgba(139,59,255,.6) !important;
  }
}

/* ============================================================
   11. SOCIAL ROW — eight equal squares, four over four
   The labels are bare text nodes next to each inline SVG, so
   font-size:0 on the tile hides them without touching markup
   while leaving the text in the accessibility tree. absynth-
   matrix.js copies that text into a title for hover tooltips.
   ============================================================ */
.social-row{
  display:grid;
  /* eight platforms, deliberately four over four rather than one long run
     that breaks into an orphan at the first awkward width */
  grid-template-columns:repeat(4, 1fr);
  gap:14px;
  max-width:470px;
  align-items:stretch;
}
.social-btn{
  aspect-ratio:1 / 1;
  width:auto;
  padding:0;
  gap:0;
  font-size:0;
  display:flex;
  align-items:center;
  justify-content:center;
  border-radius:3px;
  background:
     linear-gradient(180deg, rgba(0,255,95,.04), rgba(0,0,0,0)),
     rgba(4,10,14,.55);
  box-shadow:inset 0 1px 0 rgba(0,255,95,.07);
  transition:border-color .3s, box-shadow .3s, transform .3s, background .3s;
}
.social-btn:hover{ transform:translateY(-3px); }
.social-icon{
  width:52%; height:52%;
  min-width:30px; min-height:30px;
  flex-shrink:0;
}

@media (max-width:860px){
  .social-row{ gap:10px; max-width:420px; }
}
@media (max-width:620px){
  /* the four-wide shape holds; only the tiles get smaller */
  .social-row{ gap:8px; max-width:330px; }
}

/* ============================================================
   12. SELF-PAINTED CONTROLS
   .nav-void builds its animated border from a two-layer
   padding-box/border-box background and drives it with its own
   keyframes. The gradient-text treatment overwrote both, which
   left the label clipped to a background that no longer existed
   — blurred and unreadable. These controls keep their own paint
   and take a solid phosphor label instead.
   ============================================================ */
.nav-void, .nav-contact, .nav-vst{
  -webkit-text-fill-color:#e9ddff !important;
  color:#e9ddff !important;
  -webkit-background-clip:padding-box, border-box !important;
  background-clip:padding-box, border-box !important;
  filter:none !important;
  text-shadow:
      -0.5px 0 rgba(255,0,60,.3),
       0.5px 0 rgba(0,229,255,.28),
       0 0 9px rgba(139,59,255,.6);
}
.nav-void .void-dot{
  -webkit-text-fill-color:initial;
  filter:none;
}

/* ============================================================
   13. NAV ITEM COLOURS
   Each destination gets its own identity colour; Discography
   carries a gradient of the other three. Targeted by href as
   well as by the .n-* classes, because only the homepage
   markup actually carries those classes.
   ============================================================ */

/* --- Absynth 808 : red --- */
nav a.n-red,
nav a[href="#absynth"],
nav a[href$="index.html#absynth"],
nav a[href*="absynth808.com/#absynth"]{
  background-image:linear-gradient(100deg, #ff2049, #ff5c7a) !important;
  filter:
      drop-shadow(-1px 0 0 rgba(255,0,60,.4))
      drop-shadow(1px 0 0 rgba(0,229,255,.22))
      drop-shadow(0 0 10px rgba(255,32,73,.75))
      drop-shadow(0 0 26px rgba(255,32,73,.4)) !important;
}

/* --- Seraphim Instrumentals : blue --- */
nav a.n-blue,
nav a[href$="seraphim.html"],
nav a[href*="absynth808.com/seraphim"]{
  background-image:linear-gradient(100deg, #2e8bff, #6fb6ff) !important;
  filter:
      drop-shadow(-1px 0 0 rgba(255,0,60,.22))
      drop-shadow(1px 0 0 rgba(0,229,255,.4))
      drop-shadow(0 0 10px rgba(46,139,255,.75))
      drop-shadow(0 0 26px rgba(46,139,255,.4)) !important;
}

/* --- Absynth Laboratories : green --- */
nav a[href*="absynth808.com/labs"],
nav a[href="index.html"].current,
nav a.n-green{
  background-image:linear-gradient(100deg, #00ff5f, #6bffa8) !important;
  filter:
      drop-shadow(-1px 0 0 rgba(255,0,60,.22))
      drop-shadow(1px 0 0 rgba(0,229,255,.3))
      drop-shadow(0 0 10px rgba(0,255,95,.75))
      drop-shadow(0 0 26px rgba(0,255,95,.4)) !important;
}

/* --- Discography : all three --- */
nav a.n-purple,
nav a[href$="discography.html"],
nav a[href*="absynth808.com/discography"]{
  background-image:linear-gradient(100deg,
      #ff2049 0%,
      #ff5c7a 18%,
      #2e8bff 50%,
      #6bffa8 82%,
      #00ff5f 100%) !important;
  background-size:220% 100% !important;
  filter:
      drop-shadow(-1px 0 0 rgba(255,0,60,.3))
      drop-shadow(1px 0 0 rgba(0,229,255,.3))
      drop-shadow(0 0 10px rgba(139,59,255,.6))
      drop-shadow(0 0 26px rgba(255,32,73,.35)) !important;
}


/* ============================================================
   14. THE VOID — mobile layout
   The stage is a centred flex box, which squeezed the 16:9
   embed into a narrow column. On phones: title above, video
   full-bleed across the top third, controls underneath.
   ============================================================ */
@media (max-width:860px){
  .void-stage{
    min-height:auto;
    display:block;
    align-items:stretch;
    padding:0 0 7vh;
    overflow:visible;
  }
  .void-heading{
    padding:8vh 6vw 4vh;
    margin-bottom:0;
  }
  .void-player{ width:100%; padding:0; }

  /* full-bleed, exactly a third of the viewport */
  .void-frame-wrap{
    width:100vw;
    margin-left:calc(50% - 50vw);
    height:33vh;
    aspect-ratio:auto;
    border-radius:0;
    border-left:0;
    border-right:0;
    box-shadow:
       0 0 50px -12px rgba(139,59,255,.5),
       0 18px 50px -28px rgba(0,0,0,.9);
  }
  .void-frame-wrap #voidFrame,
  .void-frame-wrap iframe{
    width:100% !important;
    height:100% !important;
    display:block;
  }

  /* everything else stacks below the embed */
  .void-diamonds-left, .void-now, .void-count{ padding:0 6vw; }
  .void-now{ margin-top:16px; }
  .void-shuffle{ margin-top:22px; }
  .void-count{ margin-bottom:2vh; }
  .void-glow{ opacity:.5; }
}

/* ============================================================
   15. DRAWER TEXT — mobile
   Below 900px the page resets drawer links with the `background`
   SHORTHAND, which also resets background-clip to border-box.
   Section 13's nav colours are !important, so they survived that
   reset and painted each link as a solid bar with invisible
   (transparent-filled) text.

   SPECIFICITY: section 13 uses `nav a.n-red` = (0,1,2). A plain
   `header nav a` is only (0,0,3) and LOSES — one class beats any
   number of element selectors. Everything here carries a class or
   attribute selector to reach (0,1,3).
   ============================================================ */
@media (max-width:900px){
  header nav a[href]{
    background-image:none !important;
    -webkit-background-clip:border-box !important;
    background-clip:border-box !important;
    -webkit-text-fill-color:currentColor !important;
    color:#cfeee4 !important;
    text-shadow:0 0 9px rgba(0,255,95,.35) !important;
  }

  header nav a.n-red,
  header nav a[href="#absynth"],
  header nav a[href$="index.html#absynth"]{
    color:#ff5c7a !important;
    text-shadow:0 0 10px rgba(255,32,73,.6) !important;
  }
  header nav a.n-blue,
  header nav a[href$="seraphim.html"]{
    color:#6fb6ff !important;
    text-shadow:0 0 10px rgba(46,139,255,.6) !important;
  }
  header nav a[href*="absynth808.com/labs"]{
    color:#6bffa8 !important;
    text-shadow:0 0 10px rgba(0,255,95,.6) !important;
  }

  /* Discography keeps the three-colour gradient — clip back to text */
  header nav a.n-purple,
  header nav a[href$="discography.html"]{
    background-image:linear-gradient(100deg,
        #ff2049 0%, #ff5c7a 18%, #2e8bff 50%, #6bffa8 82%, #00ff5f 100%) !important;
    -webkit-background-clip:text !important;
    background-clip:text !important;
    -webkit-text-fill-color:transparent !important;
    text-shadow:none !important;
  }

  /* the self-painted pills keep what section 12 gave them */
  header nav a.nav-void,
  header nav a.nav-contact,
  header nav a.nav-vst{
    -webkit-text-fill-color:#e9ddff !important;
    color:#e9ddff !important;
    text-shadow:0 0 9px rgba(139,59,255,.6) !important;
  }
}

/* ============================================================
   16. MOBILE DRAWER — containing block + sticky header
   Two structural bugs that made the drawer unusable on phones:

   1. <header> has backdrop-filter:blur(14px). Any filter or
      backdrop-filter makes an element the containing block for
      its position:fixed descendants, so `nav{position:fixed;
      inset:0}` was being laid out against the HEADER, not the
      viewport — the drawer came out ~195px tall and clipped by
      its own overflow-y:auto. Dropping the blur on mobile hands
      the nav back to the viewport.

   2. Below 640px the page sets overflow-x:hidden on html/body.
      That computes overflow-y to auto, which creates a scroll
      container and silently kills position:sticky on the header
      (measured at top:-688px mid-scroll). overflow-x:clip gives
      the same horizontal clipping without a scroll container.
   ============================================================ */
@media (max-width:900px){
  header{
    backdrop-filter:none !important;
    -webkit-backdrop-filter:none !important;
    background:rgba(3,6,10,.94) !important;
  }
  /* Only the OPEN drawer gets viewport sizing. privacy/terms/ai-policy
     have a plain in-flow nav with one link and no mobile toggle — sizing
     every nav here inflated their header to 945px. */
  header nav.open{
    width:100vw;
    min-height:100vh;
    min-height:100dvh;
  }
}

@media (max-width:640px){
  html, body{
    overflow-x:clip;
    overflow-y:visible;
  }
}

/* The hero's gradient text carries heavy drop-shadow glow, which
   reads straight through the drawer's 3% transparency. Make the
   open drawer fully opaque. */
@media (max-width:900px){
  header nav.open{
    background:#02040a !important;
    box-shadow:inset 0 0 120px rgba(139,59,255,.12);
  }
}

/* ============================================================
   17. TRACK NAME ON HOVER
   Cover art is unreadable at tile size, so the title appears on
   hover as white terminal text with an RGB-split glitch.
   ============================================================ */
.track-tile .tile-name{
  position:absolute; inset:0; z-index:6;
  display:flex; flex-direction:column; align-items:center; justify-content:center;
  gap:6px; padding:10px 12px; text-align:center;
  background:linear-gradient(180deg, rgba(0,10,6,.78), rgba(0,16,10,.88));
  opacity:0; pointer-events:none;
  transition:opacity .22s ease;
}
.track-tile:hover .tile-name,
.track-tile:focus-visible .tile-name{ opacity:1; }

.track-tile .tile-name > span{
  position:relative;
  font-family:'VT323','JetBrains Mono',ui-monospace,monospace;
  font-size:1.22rem; line-height:1.08; letter-spacing:.055em;
  text-transform:uppercase;
  color:#ffffff;
  -webkit-text-fill-color:#ffffff;
  background-image:none;
  text-shadow:
     -1.4px 0 rgba(255,0,60,.85),
      1.4px 0 rgba(0,229,255,.8),
      0 0 10px rgba(255,255,255,.55),
      0 0 26px rgba(0,255,95,.4);
}
.track-tile .tile-name .tile-name-collab{
  font-family:'VT323','JetBrains Mono',monospace;
  font-size:.86rem; letter-spacing:.1em; text-transform:none;
  color:#8dffc4; -webkit-text-fill-color:#8dffc4;
  text-shadow:0 0 8px rgba(0,255,95,.6);
}

/* the glitch itself — two offset copies chopped on a loop */
.track-tile:hover .tile-name > span::before,
.track-tile:hover .tile-name > span::after{
  content:attr(data-n);
  position:absolute; left:0; top:0; width:100%;
  pointer-events:none; mix-blend-mode:screen;
}
.track-tile .tile-name{ --n:''; }
.track-tile:hover .tile-name > span{ animation:tile-name-jitter .9s steps(3,end) infinite; }
@keyframes tile-name-jitter{
  0%, 68%, 100%{ transform:translate(0,0); clip-path:none; }
  72%{ transform:translate(-2px,1px); clip-path:inset(12% 0 56% 0); }
  76%{ transform:translate(2px,-1px); clip-path:inset(52% 0 20% 0); }
  80%{ transform:translate(-1px,0);   clip-path:none; }
}

/* placeholder tiles already print their title — don't double it */
.track-tile.placeholder .tile-name{ display:none; }


/* ============================================================
   18. MACINTOSH
   Classic Mac STRUCTURE in the matrix palette: bitmap type for
   chrome, hard 1px edges instead of soft neon, offset solid
   drop shadows instead of blur, pinstripe title bars and a
   square close box on every panel.
   ============================================================ */

:root{
  --mac-ink:#0a1a14;
  --mac-line:rgba(0,255,95,.55);
  --mac-chrome:#0a140f;
  --mac-shadow:4px 4px 0 rgba(0,0,0,.78);
  --mac-font:'Silkscreen','VT323',ui-monospace,monospace;
}

/* --- bitmap type on the chrome: nav, labels, buttons --- */
nav a, .nav-divider, .logo,
.eyebrow, .section-label, .kicker, .source-tab,
.hero-pill, .pill, button, .void-shuffle, .album-year,
.social-btn, footer, .meta{
  font-family:var(--mac-font) !important;
  letter-spacing:.02em;
  text-transform:uppercase;
}
/* Silkscreen has no lowercase worth reading at size — keep copy on VT323 */
p, li, blockquote, td, th, dd, dt, .void-sub, .section-subtitle{
  font-family:'VT323','JetBrains Mono',ui-monospace,monospace !important;
  text-transform:none;
}
.logo{ font-size:.82rem; }
nav a{ font-size:.62rem; }
.hero-pill, .pill, button, .source-tab{ font-size:.58rem; }

/* --- hard edges everywhere --- */
.hero-pill, .pill, button, .source-tab, .social-btn,
.card, .panel, .door, .tile, .album-cover, .comp-cover,
.void-shuffle, .nav-void, .nav-contact, .nav-vst,
input, textarea, select, .sc-full-embed, .void-frame-wrap{
  border-radius:3px !important;
}

/* --- beveled, offset shadow instead of neon bloom --- */
.hero-pill, .pill, button, .source-tab, .void-shuffle,
.nav-void, .nav-contact, .nav-vst{
  border-width:2px !important;
  box-shadow:var(--mac-shadow) !important;
  background-color:rgba(4,12,9,.82);
  transition:transform .12s steps(2,end), box-shadow .12s steps(2,end);
}
/* buttons physically press, the way a Mac button did */
.hero-pill:active, .pill:active, button:active,
.source-tab:active, .void-shuffle:active{
  transform:translate(4px,4px) !important;
  box-shadow:0 0 0 rgba(0,0,0,0) !important;
}
.hero-pill:hover, .pill:hover, button:hover,
.source-tab:hover, .void-shuffle:hover{
  transform:translate(-1px,-1px);
  box-shadow:6px 6px 0 rgba(0,0,0,.8) !important;
}

/* --- panels become windows: pinstripe title bar + close box --- */
.card, .panel, .door, .album-card, .sc-full-embed{
  position:relative;
  border:2px solid var(--mac-line) !important;
  border-radius:3px !important;
  box-shadow:var(--mac-shadow) !important;
  background-color:rgba(4,12,9,.8);
  padding-top:22px;
}
.card::before, .panel::before, .door::before,
.album-card::before, .sc-full-embed::before{
  content:'';
  position:absolute; left:0; right:0; top:0; height:16px;
  border-bottom:2px solid var(--mac-line);
  background:repeating-linear-gradient(
     to bottom,
     rgba(0,255,95,.5) 0px, rgba(0,255,95,.5) 1px,
     rgba(0,0,0,0) 1px,   rgba(0,0,0,0) 3px);
  pointer-events:none;
}
.card::after, .panel::after, .door::after,
.album-card::after, .sc-full-embed::after{
  content:'';
  position:absolute; left:5px; top:3px;
  width:10px; height:10px;
  border:2px solid var(--mac-line);
  background:var(--mac-chrome);
  pointer-events:none;
}
/* the tiles already use ::before/::after for the scan sweep */
.track-tile::before, .track-tile::after,
.album-cover::before, .album-cover::after,
.comp-cover::before, .comp-cover::after{ border:0; background-clip:border-box; }

/* --- desktop pinstripe behind everything --- */
.mx-vignette{
  background-image:
    repeating-linear-gradient(
      to bottom,
      rgba(0,255,95,.016) 0px, rgba(0,255,95,.016) 1px,
      rgba(0,0,0,0) 1px, rgba(0,0,0,0) 2px),
    radial-gradient(ellipse at 50% 42%, rgba(0,0,0,0) 72%, rgba(0,0,0,.24) 100%),
    radial-gradient(ellipse at 50% 0%, rgba(139,59,255,.09) 0%, rgba(0,0,0,0) 54%),
    radial-gradient(ellipse at 50% 100%, rgba(255,32,73,.07) 0%, rgba(0,0,0,0) 54%);
}

/* --- chunky Mac scrollbar --- */
*{ scrollbar-width:auto; scrollbar-color:var(--mac-line) var(--mac-chrome); }
::-webkit-scrollbar{ width:15px; height:15px; }
::-webkit-scrollbar-track{
  background:repeating-linear-gradient(
     to bottom,
     rgba(0,255,95,.1) 0px, rgba(0,255,95,.1) 1px,
     rgba(0,0,0,0) 1px, rgba(0,0,0,0) 2px), var(--mac-chrome);
  border-left:2px solid var(--mac-line);
}
::-webkit-scrollbar-thumb{
  background:var(--mac-chrome);
  border:2px solid var(--mac-line);
}
::-webkit-scrollbar-thumb:hover{ background:rgba(0,255,95,.18); }

/* --- form controls --- */
input, textarea, select{
  border-width:2px !important;
  box-shadow:inset 2px 2px 0 rgba(0,0,0,.5) !important;
}

@media (max-width:900px){
  /* the drawer is not a window — no title bar on it */
  header nav::before, header nav::after{ display:none; }
  .card, .panel, .door, .album-card{ padding-top:20px; }
}

/* ============================================================
   19. LOGO
   Bigger, with a hard Macintosh-style offset shadow under a
   soft phosphor glow.
   ============================================================ */
header .logo{
  font-size:1.02rem !important;
  letter-spacing:.14em;
  gap:12px;
  text-shadow:
      2px 2px 0 rgba(0,0,0,.85),
     -1px 0   rgba(255,0,60,.35),
      1px 0   rgba(0,229,255,.32);
  /* shadow lives on the TEXT only; a filter here would also hit the
     masked icons and fringe them */
  filter:none !important;
  transition:filter .3s ease, transform .2s steps(2,end);
}
header .logo:hover{
  transform:translate(-1px,-1px);
  filter:
      drop-shadow(3px 3px 0 rgba(0,0,0,.85))
      drop-shadow(0 0 14px rgba(0,255,95,.6))
      drop-shadow(0 0 32px rgba(139,59,255,.55)) !important;
}
/* The icons carry a radial edge mask AND mix-blend-mode:screen.
   A hard offset shadow is computed BEFORE the blend, so its dark
   pixels get screened away and leave muddy fringing around the
   feather. Scale them up proportionally and let the mask do the
   work — glow only, no drop shadow, and never a forced height. */
header .logo .logo-icon{
  height:30px;
  width:auto;
  filter:brightness(1.18) drop-shadow(0 0 7px rgba(0,255,95,.45));
}
header .logo .logo-angel{ height:35px; }
header .logo:hover .logo-icon{
  filter:brightness(1.4) drop-shadow(0 0 11px rgba(0,255,95,.7)) drop-shadow(0 0 22px rgba(139,59,255,.5));
}
@media (max-width:900px){
  header .logo{ font-size:.86rem !important; letter-spacing:.11em; gap:9px; }
  header .logo .logo-icon{ height:23px; }
  header .logo .logo-angel{ height:27px; }
}

/* ============================================================
   20. ABSYNTH 808 SECTION — centred like the hero
   ============================================================ */
#absynth .section-head{
  text-align:center;
  display:flex;
  flex-direction:column;
  align-items:center;
}
#absynth .section-head h2,
#absynth .section-head .section-subtitle,
#absynth .section-head .tag{
  text-align:center;
  width:100%;
}
#absynth .social-row{
  margin-left:auto;
  margin-right:auto;
  justify-content:center;
}

/* the contact form's "not connected yet" notice */
.form-disabled-note{
  margin-top:16px; padding:12px 14px;
  border:2px solid var(--mx-red);
  border-radius:3px;
  background:rgba(40,0,10,.5);
  color:#ffb3c2; -webkit-text-fill-color:#ffb3c2;
  font-family:'VT323','JetBrains Mono',monospace;
  font-size:.95rem; letter-spacing:.04em; text-align:center;
  box-shadow:4px 4px 0 rgba(0,0,0,.7);
}

/* ============================================================
   21. SOCIAL TILES — platform colours, prior-colour glow
   Each icon takes its own brand colour; the halo keeps the
   colour that tile used to wear (purple / blue / cyan), so the
   row still reads as part of the palette rather than six logos
   dropped on a page.
   ============================================================ */
.social-btn .social-icon{
  transition:color .3s ease, filter .3s ease, transform .3s ease;
}

/* --- Instagram: brand magenta over its old purple --- */
.social-btn[data-brand="instagram"] .social-icon{
  color:#e1306c;
  filter:drop-shadow(0 0 5px rgba(225,48,108,.65)) drop-shadow(0 0 13px rgba(139,59,255,.6));
}
/* --- YouTube: brand red over its old blue --- */
.social-btn[data-brand="youtube"] .social-icon{
  color:#ff0000;
  filter:drop-shadow(0 0 5px rgba(255,0,0,.6)) drop-shadow(0 0 13px rgba(10,132,255,.6));
}
/* --- Spotify: brand green over its old cyan --- */
.social-btn[data-brand="spotify"] .social-icon{
  color:#1db954;
  filter:drop-shadow(0 0 5px rgba(29,185,84,.65)) drop-shadow(0 0 13px rgba(34,211,238,.6));
}
/* --- SoundCloud: brand orange over its old purple --- */
.social-btn[data-brand="soundcloud"] .social-icon{
  color:#ff5500;
  filter:drop-shadow(0 0 5px rgba(255,85,0,.65)) drop-shadow(0 0 13px rgba(139,59,255,.6));
}
/* --- Apple Music: brand red-pink over its old blue --- */
.social-btn[data-brand="apple"] .social-icon{
  color:#fa243c;
  filter:drop-shadow(0 0 5px rgba(250,36,60,.6)) drop-shadow(0 0 13px rgba(10,132,255,.6));
}
/* --- TikTok: brand cyan over its old purple --- */
.social-btn[data-brand="tiktok"] .social-icon{
  color:#00f2ea;
  filter:drop-shadow(0 0 5px rgba(0,242,234,.6)) drop-shadow(0 0 13px rgba(139,59,255,.6));
}
/* --- BeatStars: brand red over its old blue --- */
.social-btn[data-brand="beatstars"] .social-icon{
  color:#ff1f45;
  filter:drop-shadow(0 0 5px rgba(255,31,69,.65)) drop-shadow(0 0 13px rgba(10,132,255,.6));
}
/* --- X: brand white over its old cyan --- */
.social-btn[data-brand="x"] .social-icon{
  color:#ffffff;
  filter:drop-shadow(0 0 5px rgba(255,255,255,.6)) drop-shadow(0 0 13px rgba(34,211,238,.65));
}

/* hover lifts the brand colour and widens the halo */
.social-btn:hover .social-icon{ transform:scale(1.1); }
.social-btn[data-brand="instagram"]:hover{ border-color:#e1306c !important; box-shadow:5px 5px 0 rgba(0,0,0,.75), 0 0 22px rgba(225,48,108,.45) !important; }
.social-btn[data-brand="youtube"]:hover{    border-color:#ff0000 !important; box-shadow:5px 5px 0 rgba(0,0,0,.75), 0 0 22px rgba(255,0,0,.45) !important; }
.social-btn[data-brand="spotify"]:hover{    border-color:#1db954 !important; box-shadow:5px 5px 0 rgba(0,0,0,.75), 0 0 22px rgba(29,185,84,.45) !important; }
.social-btn[data-brand="soundcloud"]:hover{ border-color:#ff5500 !important; box-shadow:5px 5px 0 rgba(0,0,0,.75), 0 0 22px rgba(255,85,0,.45) !important; }
.social-btn[data-brand="apple"]:hover{      border-color:#fa243c !important; box-shadow:5px 5px 0 rgba(0,0,0,.75), 0 0 22px rgba(250,36,60,.45) !important; }
.social-btn[data-brand="x"]:hover{          border-color:#ffffff !important; box-shadow:5px 5px 0 rgba(0,0,0,.75), 0 0 22px rgba(255,255,255,.4) !important; }
.social-btn[data-brand="tiktok"]:hover{     border-color:#00f2ea !important; box-shadow:5px 5px 0 rgba(0,0,0,.75), 0 0 22px rgba(0,242,234,.45) !important; }
.social-btn[data-brand="beatstars"]:hover{  border-color:#ff1f45 !important; box-shadow:5px 5px 0 rgba(0,0,0,.75), 0 0 22px rgba(255,31,69,.45) !important; }

/* ============================================================
   22. WINDOWS
   The homepage reads as a stack of classic desktop windows —
   pinstriped title bar, close and zoom boxes, a beveled frame —
   and the page snaps from one to the next as you scroll,
   instead of the sections meeting at a thin rule.
   ============================================================ */
.mx-window{
  position:relative;
  border:2px solid var(--mac-line);
  border-radius:4px;
  background:
     linear-gradient(180deg, rgba(0,255,95,.03), rgba(0,0,0,0) 30%),
     rgba(3,9,7,.72);
  box-shadow:
     6px 6px 0 rgba(0,0,0,.8),
     inset 0 0 0 1px rgba(0,255,95,.14),
     inset 0 0 90px rgba(0,255,95,.04);
  margin:0 clamp(10px, 3.2vw, 46px) clamp(26px, 4vw, 54px);
  padding-top:34px !important;
  overflow:hidden;
  scroll-margin-top:72px;
}
.mx-window:first-of-type{ margin-top:clamp(14px, 2.4vw, 30px); }

/* --- the title bar --- */
.mx-titlebar{
  position:absolute; top:0; left:0; right:0; height:26px; z-index:7;
  display:flex; align-items:center; gap:8px;
  padding:0 8px;
  border-bottom:2px solid var(--mac-line);
  background:
     repeating-linear-gradient(
        to bottom,
        rgba(0,255,95,.42) 0px, rgba(0,255,95,.42) 1px,
        rgba(0,0,0,0) 1px,  rgba(0,0,0,0) 3px),
     var(--mac-chrome);
  pointer-events:none;
  user-select:none;
}
.mx-wbox{
  width:12px; height:12px; flex:0 0 12px;
  border:2px solid var(--mac-line);
  background:var(--mac-chrome);
  box-shadow:inset 1px 1px 0 rgba(0,255,95,.2);
}
.mx-wzoom{ margin-left:auto; }
.mx-wtitle{
  flex:1 1 auto; text-align:center;
  font-family:var(--mac-font);
  font-size:.56rem; letter-spacing:.14em; text-transform:uppercase;
  color:#bdfbdd; -webkit-text-fill-color:#bdfbdd;
  background:var(--mac-chrome);
  padding:2px 12px;
  white-space:nowrap; overflow:hidden; text-overflow:ellipsis;
  text-shadow:0 0 8px rgba(0,255,95,.5);
}

/* Scroll snapping was removed in V2.1: with the Latest Incursions strip
   above the hero, scroll position 0 is no longer a snap point, so proximity
   snapping dragged the page down past the hero and you could not rest at the
   top. The windows read as a stack without it. */

/* the hero is a window now, so it no longer needs full viewport height */
.mx-window.hero{
  min-height:clamp(420px, 72vh, 760px);
  display:flex; flex-direction:column; align-items:center; justify-content:center;
}

@media (max-width:900px){
  .mx-window{
    margin:0 10px 20px;
    padding-top:30px !important;
    box-shadow:4px 4px 0 rgba(0,0,0,.8), inset 0 0 0 1px rgba(0,255,95,.12);
  }
  .mx-titlebar{ height:22px; }
  .mx-wtitle{ font-size:.5rem; letter-spacing:.1em; }
}

/* ============================================================
   23. WINDOW CHROME — refined
   The first pass was too heavy: 2px bold-green frames, chunky
   boxes, hard black shadows. Cyan, hairline borders, smaller
   furniture and a softer shadow.
   ============================================================ */
:root{
  --mac-line:rgba(0,229,255,.38);
  --mac-line-soft:rgba(0,229,255,.2);
  --mac-chrome:#061016;
  --mac-shadow:3px 3px 0 rgba(0,0,0,.55);
}

/* --- hairline frames everywhere --- */
.mx-window,
.card, .panel, .door, .album-card, .sc-full-embed{
  border:1px solid var(--mac-line) !important;
  box-shadow:
     var(--mac-shadow),
     inset 0 0 0 1px rgba(0,229,255,.07) !important;
}
.mx-window{
  padding-top:28px !important;
  border-radius:3px;
  background:
     linear-gradient(180deg, rgba(0,229,255,.022), rgba(0,0,0,0) 26%),
     rgba(3,9,12,.7);
}

/* --- title bar: shorter, cyan, finer pinstripes --- */
.mx-titlebar{
  height:21px;
  gap:7px;
  padding:0 7px;
  border-bottom:1px solid var(--mac-line);
  background:
     repeating-linear-gradient(
        to bottom,
        rgba(0,229,255,.2) 0px, rgba(0,229,255,.2) 1px,
        rgba(0,0,0,0) 1px,  rgba(0,0,0,0) 3px),
     var(--mac-chrome);
}
.mx-wbox{
  width:9px; height:9px; flex:0 0 9px;
  border:1px solid var(--mac-line);
  box-shadow:none;
}
.mx-wtitle{
  font-size:.5rem; letter-spacing:.16em;
  color:#a9e8f5; -webkit-text-fill-color:#a9e8f5;
  padding:1px 10px;
  text-shadow:0 0 7px rgba(0,229,255,.45);
}

/* --- panel title bars + close boxes: hairline and cyan --- */
.card::before, .panel::before, .door::before,
.album-card::before, .sc-full-embed::before{
  height:14px;
  border-bottom:1px solid var(--mac-line);
  background:repeating-linear-gradient(
     to bottom,
     rgba(0,229,255,.18) 0px, rgba(0,229,255,.18) 1px,
     rgba(0,0,0,0) 1px,   rgba(0,0,0,0) 3px);
}
.card::after, .panel::after, .door::after,
.album-card::after, .sc-full-embed::after{
  left:4px; top:3px; width:8px; height:8px;
  border:1px solid var(--mac-line);
}
.card, .panel, .door, .album-card, .sc-full-embed{ padding-top:19px; }

/* --- buttons lose the heavy border too --- */
.hero-pill, .pill, button, .source-tab, .void-shuffle,
.nav-void, .nav-contact, .nav-vst, .social-btn{
  border-width:1px !important;
  box-shadow:var(--mac-shadow) !important;
}
.hero-pill:hover, .pill:hover, button:hover,
.source-tab:hover, .void-shuffle:hover{
  box-shadow:4px 4px 0 rgba(0,0,0,.6) !important;
}
.hero-pill:active, .pill:active, button:active,
.source-tab:active, .void-shuffle:active{
  transform:translate(3px,3px) !important;
}

/* --- scrollbar: thinner, cyan --- */
::-webkit-scrollbar{ width:12px; height:12px; }
::-webkit-scrollbar-track{
  background:repeating-linear-gradient(
     to bottom,
     rgba(0,229,255,.07) 0px, rgba(0,229,255,.07) 1px,
     rgba(0,0,0,0) 1px, rgba(0,0,0,0) 3px), var(--mac-chrome);
  border-left:1px solid var(--mac-line-soft);
}
::-webkit-scrollbar-thumb{ border:1px solid var(--mac-line); }
*{ scrollbar-color:var(--mac-line) var(--mac-chrome); }

/* --- desktop pinstripe: cyan, fainter --- */
.mx-vignette{
  background-image:
    repeating-linear-gradient(
      to bottom,
      rgba(0,229,255,.012) 0px, rgba(0,229,255,.012) 1px,
      rgba(0,0,0,0) 1px, rgba(0,0,0,0) 3px),
    radial-gradient(ellipse at 50% 42%, rgba(0,0,0,0) 72%, rgba(0,0,0,.24) 100%),
    radial-gradient(ellipse at 50% 0%, rgba(139,59,255,.09) 0%, rgba(0,0,0,0) 54%),
    radial-gradient(ellipse at 50% 100%, rgba(255,32,73,.07) 0%, rgba(0,0,0,0) 54%);
}

input, textarea, select{
  border-width:1px !important;
  box-shadow:inset 1px 1px 0 rgba(0,0,0,.4) !important;
}

@media (max-width:900px){
  .mx-window{ padding-top:25px !important; }
  .mx-titlebar{ height:19px; }
}

/* ============================================================
   24. NATIVE SOUNDCLOUD PLAYER
   The real widget is hidden (never display:none — that can stop
   playback) and we draw our own transport, seek bar and track
   list on top of it. See assets/js/sc-player.js.
   ============================================================ */
.sc-native{ position:relative; }

/* the engine: present, playing, invisible */
.scn-frame{
  position:fixed; left:0; top:0;
  width:1px; height:1px;
  overflow:hidden; opacity:0;
  pointer-events:none;
  clip-path:inset(50%);
}

.scn-now{
  display:grid;
  grid-template-columns:132px 1fr;
  gap:18px;
  padding:16px 18px 18px;
  align-items:start;
}
.scn-art{
  width:132px; height:132px;
  border:1px solid var(--mac-line);
  background:
     repeating-linear-gradient(45deg,
        rgba(0,229,255,.07) 0px, rgba(0,229,255,.07) 2px,
        rgba(0,0,0,0) 2px, rgba(0,0,0,0) 4px),
     var(--mac-chrome);
  background-size:cover; background-position:center;
  box-shadow:3px 3px 0 rgba(0,0,0,.55);
}
.scn-art.has-art{ background-repeat:no-repeat; }

.scn-title{
  font-family:'VT323','JetBrains Mono',monospace;
  font-size:1.5rem; line-height:1.1; letter-spacing:.03em;
  color:#ffffff; -webkit-text-fill-color:#ffffff;
  text-shadow:-1px 0 rgba(255,0,60,.6), 1px 0 rgba(0,229,255,.55), 0 0 12px rgba(0,229,255,.35);
  margin-bottom:2px;
  word-break:break-word;
}
.scn-user{
  font-family:var(--mac-font);
  font-size:.52rem; letter-spacing:.18em; text-transform:uppercase;
  color:#6d8f88; -webkit-text-fill-color:#6d8f88;
  margin-bottom:12px;
}
.scn-times{
  display:flex; justify-content:space-between;
  font-family:'VT323',monospace; font-size:.95rem;
  color:#8dffc4; -webkit-text-fill-color:#8dffc4;
  margin-bottom:4px;
}

/* --- seek bar, Mac trough and thumb --- */
.scn-bar{
  position:relative; height:14px; cursor:pointer;
  border:1px solid var(--mac-line);
  background:repeating-linear-gradient(
     to bottom,
     rgba(0,229,255,.1) 0px, rgba(0,229,255,.1) 1px,
     rgba(0,0,0,0) 1px, rgba(0,0,0,0) 3px), var(--mac-chrome);
  box-shadow:inset 1px 1px 0 rgba(0,0,0,.45);
  outline:none;
}
.scn-bar:focus-visible{ box-shadow:0 0 0 2px rgba(0,229,255,.45); }
.scn-fill{
  height:100%; width:0%;
  background:linear-gradient(90deg, #00ff5f, #00e5ff);
  box-shadow:0 0 10px rgba(0,229,255,.55);
  transition:width .12s linear;
}

/* --- transport --- */
.scn-transport{ display:flex; align-items:center; gap:8px; margin-top:12px; }
.scn-btn{
  font-family:var(--mac-font); font-size:.6rem;
  min-width:42px; padding:8px 10px;
  color:#bdfbdd; -webkit-text-fill-color:#bdfbdd;
  background:var(--mac-chrome);
  border:1px solid var(--mac-line);
  border-radius:3px;
  box-shadow:var(--mac-shadow);
  cursor:pointer;
  transition:transform .1s steps(2,end), box-shadow .1s steps(2,end), color .2s;
}
.scn-btn:hover{ color:#00e5ff; -webkit-text-fill-color:#00e5ff; }
.scn-btn:active{ transform:translate(3px,3px); box-shadow:none !important; }
.scn-play{ min-width:54px; font-size:.7rem; }
.scn-play.is-playing{ color:#00ff5f; -webkit-text-fill-color:#00ff5f; }
.scn-count{
  margin-left:auto;
  font-family:var(--mac-font); font-size:.5rem; letter-spacing:.16em;
  color:#6d8f88; -webkit-text-fill-color:#6d8f88;
}

/* --- track list --- */
.scn-list{
  max-height:272px; overflow-y:auto;
  border-top:1px solid var(--mac-line);
}
.scn-row{
  display:grid; grid-template-columns:34px 1fr auto;
  gap:10px; align-items:center; width:100%;
  padding:8px 18px;
  background:none; border:0;
  border-bottom:1px solid rgba(0,229,255,.1);
  text-align:left; cursor:pointer;
  font-family:'VT323','JetBrains Mono',monospace;
  color:#b9dcd4; -webkit-text-fill-color:#b9dcd4;
  font-size:1.02rem;
  box-shadow:none !important;
  transition:background .18s ease, color .18s ease;
}
.scn-row:hover{ background:rgba(0,229,255,.08); color:#ffffff; -webkit-text-fill-color:#ffffff; }
.scn-row:active{ transform:none !important; }
.scn-row.is-current{
  background:linear-gradient(90deg, rgba(0,255,95,.16), rgba(0,229,255,.06));
  color:#8dffc4; -webkit-text-fill-color:#8dffc4;
}
.scn-row-n{
  font-family:var(--mac-font); font-size:.48rem; letter-spacing:.1em;
  color:#4f7c72; -webkit-text-fill-color:#4f7c72;
}
.scn-row.is-current .scn-row-n{ color:#00ff5f; -webkit-text-fill-color:#00ff5f; }
.scn-row-t{ overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.scn-row-d{ font-size:.92rem; color:#6d8f88; -webkit-text-fill-color:#6d8f88; }

@media (max-width:640px){
  .scn-now{ grid-template-columns:84px 1fr; gap:12px; padding:12px 12px 14px; }
  .scn-art{ width:84px; height:84px; }
  .scn-title{ font-size:1.2rem; }
  .scn-row{ padding:8px 12px; }
  .scn-list{ max-height:230px; }
}

/* ============================================================
   25. EMBED ARTWORK — CRT glass
   The cover in the player sits behind scanlines, a drifting
   static field and a faint RGB fringe, so it reads as something
   being displayed on the same tube as the rest of the site.
   ============================================================ */
.scn-art{
  position:relative;
  overflow:hidden;
  isolation:isolate;
  filter:saturate(1.12) contrast(1.06);
}

/* scanlines + a soft curvature shadow */
.scn-art::before{
  content:'';
  position:absolute; inset:0; z-index:2; pointer-events:none;
  background:
    repeating-linear-gradient(
      to bottom,
      rgba(0,0,0,0)   0px, rgba(0,0,0,0)   1px,
      rgba(0,0,0,.34) 2px, rgba(0,0,0,.34) 3px),
    radial-gradient(ellipse at 50% 50%, rgba(0,0,0,0) 56%, rgba(0,0,0,.5) 100%);
  mix-blend-mode:multiply;
}

/* drifting static, plus a cyan/green phosphor wash */
.scn-art::after{
  content:'';
  position:absolute; inset:-60%; z-index:3; pointer-events:none;
  background-image:
    linear-gradient(180deg, rgba(0,255,95,.1), rgba(0,229,255,.08)),
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='120'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='120' height='120' filter='url(%23n)' opacity='.5'/%3E%3C/svg%3E");
  background-size:auto, 120px 120px;
  opacity:.3;
  mix-blend-mode:screen;
  animation:scn-static .5s steps(4,end) infinite;
}
@keyframes scn-static{
  0%   { transform:translate3d(0,0,0); }
  25%  { transform:translate3d(-3%,2%,0); }
  50%  { transform:translate3d(2%,-3%,0); }
  75%  { transform:translate3d(-2%,-2%,0); }
  100% { transform:translate3d(3%,1%,0); }
}

/* a slow brightness roll, like a tube settling */
.scn-art.has-art{ animation:scn-roll 7s ease-in-out infinite; }
@keyframes scn-roll{
  0%, 100%{ filter:saturate(1.12) contrast(1.06) brightness(1); }
  47%     { filter:saturate(1.16) contrast(1.09) brightness(1.06); }
  52%     { filter:saturate(1.1)  contrast(1.04) brightness(.96); }
}

/* a horizontal tracking band that sweeps the art now and then */
.scn-art .scn-art-track{
  content:''; position:absolute; left:0; right:0; height:22%; z-index:4;
  pointer-events:none;
  background:linear-gradient(to bottom,
     rgba(255,255,255,0) 0%,
     rgba(0,229,255,.16) 45%,
     rgba(255,255,255,.1) 50%,
     rgba(0,255,95,.14) 55%,
     rgba(255,255,255,0) 100%);
  animation:scn-art-track 6.5s linear infinite;
  mix-blend-mode:screen;
}
@keyframes scn-art-track{
  0%   { transform:translateY(-120%); opacity:0; }
  8%   { opacity:1; }
  70%  { opacity:1; }
  100% { transform:translateY(520%); opacity:0; }
}

@media (prefers-reduced-motion: reduce){
  .scn-art::after, .scn-art .scn-art-track{ animation:none; }
  .scn-art.has-art{ animation:none; }
}

/* ============================================================
   26. WINDOW BACKGROUNDS
   Each homepage window gets its own faint, chunky-pixel wash
   from the reference pack. The sources are deliberately stored
   at 360px wide and scaled up with image-rendering:pixelated,
   so the pixels are real rather than a filter pretending.
   ============================================================ */
#home.mx-window::after,
#absynth.mx-window::after{
  content:'';
  position:absolute; inset:0; z-index:0;
  pointer-events:none;
  background-size:cover;
  background-position:center;
  background-repeat:no-repeat;
  image-rendering:pixelated;
  opacity:.14;
  mix-blend-mode:screen;
  filter:saturate(.85) contrast(1.1);
}
#home.mx-window::after{
  background-image:url('/assets/windows/win-home.webp');
}
#absynth.mx-window::after{
  background-image:url('/assets/windows/win-listen.webp');
  opacity:.12;
}
/* keep the window's own content above the wash */
#home.mx-window > *:not(.mx-titlebar):not(.ambient-art),
#absynth.mx-window > *:not(.mx-titlebar):not(.ambient-art){ position:relative; z-index:1; }

/* ============================================================
   27. SOCIAL ICONS — equal size, CRT neon, pixel grid
   The six inline SVGs have different glyph densities, so a
   percentage size made them look uneven. Fixed box, normalised
   stroke weight, then neon bloom + RGB split + a pixel grid and
   scanlines over each tile.
   ============================================================ */
.social-icon{
  width:38px !important;
  height:38px !important;
  min-width:0; min-height:0;
  shape-rendering:crispEdges;
}
.social-icon [stroke-width]{ stroke-width:1.8; }

/* a couple of glyphs sit visually heavier than the rest */
.social-btn[data-brand="apple"] .social-icon{ transform:scale(.92); }
.social-btn[data-brand="x"] .social-icon{ transform:scale(.86); }
.social-btn[data-brand="apple"]:hover .social-icon{ transform:scale(1.01); }
.social-btn[data-brand="x"]:hover .social-icon{ transform:scale(.95); }

/* --- CRT glass over each tile: pixel grid + scanlines + bloom --- */
.social-btn{ position:relative; overflow:hidden; isolation:isolate; }
.social-btn::before{
  content:'';
  position:absolute; inset:0; z-index:2; pointer-events:none;
  background-image:
    repeating-linear-gradient(
      to bottom,
      rgba(0,0,0,0) 0px, rgba(0,0,0,0) 2px,
      rgba(0,0,0,.4) 3px, rgba(0,0,0,.4) 4px),
    repeating-linear-gradient(
      to right,
      rgba(0,0,0,.26) 0px, rgba(0,0,0,.26) 1px,
      rgba(0,0,0,0) 1px, rgba(0,0,0,0) 3px);
  mix-blend-mode:multiply;
  opacity:.8;
}
.social-btn::after{
  content:'';
  position:absolute; inset:0; z-index:3; pointer-events:none;
  background:radial-gradient(ellipse at 50% 45%,
     rgba(255,255,255,.1) 0%, rgba(255,255,255,0) 58%);
  mix-blend-mode:screen;
}

/* --- neon bloom + chromatic split, layered over the brand glow --- */
.social-btn[data-brand="instagram"] .social-icon{
  filter:drop-shadow(-1px 0 0 rgba(255,0,60,.5)) drop-shadow(1px 0 0 rgba(0,229,255,.45))
         drop-shadow(0 0 4px rgba(225,48,108,.95)) drop-shadow(0 0 12px rgba(225,48,108,.7))
         drop-shadow(0 0 26px rgba(139,59,255,.6));
}
.social-btn[data-brand="youtube"] .social-icon{
  filter:drop-shadow(-1px 0 0 rgba(255,0,60,.5)) drop-shadow(1px 0 0 rgba(0,229,255,.45))
         drop-shadow(0 0 4px rgba(255,0,0,.95)) drop-shadow(0 0 12px rgba(255,0,0,.65))
         drop-shadow(0 0 26px rgba(10,132,255,.6));
}
.social-btn[data-brand="spotify"] .social-icon{
  filter:drop-shadow(-1px 0 0 rgba(255,0,60,.45)) drop-shadow(1px 0 0 rgba(0,229,255,.5))
         drop-shadow(0 0 4px rgba(29,185,84,.95)) drop-shadow(0 0 12px rgba(29,185,84,.7))
         drop-shadow(0 0 26px rgba(34,211,238,.6));
}
.social-btn[data-brand="soundcloud"] .social-icon{
  filter:drop-shadow(-1px 0 0 rgba(255,0,60,.5)) drop-shadow(1px 0 0 rgba(0,229,255,.45))
         drop-shadow(0 0 4px rgba(255,85,0,.95)) drop-shadow(0 0 12px rgba(255,85,0,.7))
         drop-shadow(0 0 26px rgba(139,59,255,.6));
}
.social-btn[data-brand="apple"] .social-icon{
  filter:drop-shadow(-1px 0 0 rgba(255,0,60,.5)) drop-shadow(1px 0 0 rgba(0,229,255,.45))
         drop-shadow(0 0 4px rgba(250,36,60,.95)) drop-shadow(0 0 12px rgba(250,36,60,.65))
         drop-shadow(0 0 26px rgba(10,132,255,.6));
}
.social-btn[data-brand="x"] .social-icon{
  filter:drop-shadow(-1px 0 0 rgba(255,0,60,.45)) drop-shadow(1px 0 0 rgba(0,229,255,.5))
         drop-shadow(0 0 4px rgba(255,255,255,.95)) drop-shadow(0 0 12px rgba(255,255,255,.6))
         drop-shadow(0 0 26px rgba(34,211,238,.65));
}

@media (max-width:620px){
  .social-icon{ width:32px !important; height:32px !important; }
}

/* ============================================================
   28. HERO PILLS — one colour each
   Absynth 808 Music = red, Seraph Instrumentals = blue,
   Absynth Laboratories = green. Border, label and bloom all
   follow the same colour.
   ============================================================ */
.hero-pill.absynth{
  border-color:#ff2049 !important;
  background-image:linear-gradient(100deg, #ff2049, #ff7a93) !important;
  box-shadow:var(--mac-shadow), 0 0 18px rgba(255,32,73,.42) !important;
  filter:drop-shadow(-1px 0 0 rgba(255,0,60,.35))
         drop-shadow(1px 0 0 rgba(0,229,255,.2))
         drop-shadow(0 0 9px rgba(255,32,73,.65)) !important;
}
.hero-pill.seraph{
  border-color:#2e8bff !important;
  background-image:linear-gradient(100deg, #2e8bff, #8ec5ff) !important;
  box-shadow:var(--mac-shadow), 0 0 18px rgba(46,139,255,.42) !important;
  filter:drop-shadow(-1px 0 0 rgba(255,0,60,.2))
         drop-shadow(1px 0 0 rgba(0,229,255,.35))
         drop-shadow(0 0 9px rgba(46,139,255,.65)) !important;
}
.hero-pill.labs{
  border-color:#00ff5f !important;
  background-image:linear-gradient(100deg, #00ff5f, #7dffb4) !important;
  box-shadow:var(--mac-shadow), 0 0 18px rgba(0,255,95,.42) !important;
  filter:drop-shadow(-1px 0 0 rgba(255,0,60,.2))
         drop-shadow(1px 0 0 rgba(0,229,255,.3))
         drop-shadow(0 0 9px rgba(0,255,95,.65)) !important;
}

.hero-pill.absynth:hover{ box-shadow:4px 4px 0 rgba(0,0,0,.6), 0 0 30px rgba(255,32,73,.6) !important; }
.hero-pill.seraph:hover{  box-shadow:4px 4px 0 rgba(0,0,0,.6), 0 0 30px rgba(46,139,255,.6) !important; }
.hero-pill.labs:hover{    box-shadow:4px 4px 0 rgba(0,0,0,.6), 0 0 30px rgba(0,255,95,.6) !important; }

/* ============================================================
   29. SOCIAL TILES — softened, and all six exactly equal
   The CRT overlay was too heavy, and the per-brand scale
   corrections made the icons measurably different sizes.
   Every icon is now exactly 38x38 with no transform.
   ============================================================ */
.social-btn[data-brand="apple"] .social-icon,
.social-btn[data-brand="x"] .social-icon,
.social-btn[data-brand="apple"]:hover .social-icon,
.social-btn[data-brand="x"]:hover .social-icon{
  transform:none;
}
.social-btn:hover .social-icon{ transform:none; }

/* lighter grid + scanlines */
.social-btn::before{
  background-image:
    repeating-linear-gradient(
      to bottom,
      rgba(0,0,0,0) 0px, rgba(0,0,0,0) 3px,
      rgba(0,0,0,.16) 4px, rgba(0,0,0,.16) 5px),
    repeating-linear-gradient(
      to right,
      rgba(0,0,0,.09) 0px, rgba(0,0,0,.09) 1px,
      rgba(0,0,0,0) 1px, rgba(0,0,0,0) 4px);
  opacity:.5;
}
.social-btn::after{
  background:radial-gradient(ellipse at 50% 45%,
     rgba(255,255,255,.05) 0%, rgba(255,255,255,0) 60%);
}

/* The hero window wears the galaxy; it is a photograph rather than
   flat glitch art, so it carries a little more opacity and keeps
   its own colour instead of being screened to green. */
#home.mx-window::after{
  opacity:.3;
  mix-blend-mode:normal;
  filter:saturate(1.05) contrast(1.04) brightness(.92);
}

/* release month + year under the track name on hover */
.track-tile .tile-name .tile-name-date{
  font-family:var(--mac-font);
  font-size:.46rem;
  letter-spacing:.18em;
  text-transform:uppercase;
  color:#00e5ff;
  -webkit-text-fill-color:#00e5ff;
  text-shadow:0 0 8px rgba(0,229,255,.7);
  margin-top:2px;
}

/* ============================================================
   V2.1 — 30. GLOBAL UPSCALE
   Buttons and labels were reading slightly too small. Everything
   on this site is sized in rem, so lifting the root 10% scales
   type, padding and gaps together rather than just the text.
   ============================================================ */
html{ font-size:110%; }
@media (max-width:620px){
  /* phones were already tight — take a smaller lift there */
  html{ font-size:106%; }
}

/* ============================================================
   31. MUSIC PRODUCTION CREDITS
   ============================================================ */
.credit-list{ display:flex; flex-direction:column; gap:1px; background:var(--line); }
.credit-row{
  display:grid;
  grid-template-columns:minmax(130px,auto) 1fr auto auto;
  gap:16px; align-items:baseline;
  padding:16px 18px;
  background:rgba(4,12,9,.62);
  text-decoration:none;
  border:1px solid transparent;
  transition:background .25s ease, border-color .25s ease, transform .2s steps(2,end);
}
.credit-row:hover{
  background:rgba(0,229,255,.07);
  border-color:var(--mac-line);
  transform:translate(-1px,-1px);
}
.credit-role{
  font-family:var(--mac-font); font-size:.5rem; letter-spacing:.18em; text-transform:uppercase;
  color:#6d8f88; -webkit-text-fill-color:#6d8f88;
}
.credit-title{
  font-family:'VT323','JetBrains Mono',monospace; font-size:1.3rem; letter-spacing:.03em;
  color:#ffffff; -webkit-text-fill-color:#ffffff;
  text-shadow:-1px 0 rgba(255,0,60,.5), 1px 0 rgba(0,229,255,.45), 0 0 10px rgba(0,229,255,.3);
}
.credit-detail{
  font-family:'VT323',monospace; font-size:1rem;
  color:#8dffc4; -webkit-text-fill-color:#8dffc4;
}
.credit-go{
  font-family:var(--mac-font); font-size:.5rem; letter-spacing:.16em; text-transform:uppercase;
  color:#00e5ff; -webkit-text-fill-color:#00e5ff;
  text-shadow:0 0 8px rgba(0,229,255,.5);
}
@media (max-width:700px){
  .credit-row{ grid-template-columns:1fr auto; gap:4px 12px; padding:14px; }
  .credit-role{ grid-column:1 / -1; }
  .credit-detail{ grid-column:1; }
  .credit-go{ grid-column:2; grid-row:3; }
}

/* ============================================================
   32. LATEST SINGLE
   ============================================================ */
/* two cards side by side, stacking on a narrow screen */
.latest-row{
  display:grid; grid-template-columns:repeat(auto-fit, minmax(330px, 1fr));
  gap:16px; align-items:start;
}
.latest-single{
  display:grid;
  grid-template-columns:168px 1fr;
  gap:22px; align-items:center;
  padding:20px;
  border:1px solid var(--mac-line);
  border-radius:3px;
  background:
    linear-gradient(180deg, rgba(0,229,255,.03), rgba(0,0,0,0) 40%),
    rgba(4,12,9,.66);
  box-shadow:var(--mac-shadow);
}
.latest-art{ position:relative; overflow:hidden; border:1px solid var(--mac-line); }
.latest-art img{ display:block; width:100%; height:100%; object-fit:cover; }
.latest-art::after{
  content:''; position:absolute; inset:0; pointer-events:none;
  background:repeating-linear-gradient(
     to bottom, rgba(0,0,0,0) 0px, rgba(0,0,0,0) 2px,
     rgba(0,0,0,.3) 3px, rgba(0,0,0,.3) 4px);
  mix-blend-mode:multiply;
}
.latest-kicker{
  font-family:var(--mac-font); font-size:.5rem; letter-spacing:.22em; text-transform:uppercase;
  color:#00ff5f; -webkit-text-fill-color:#00ff5f;
  text-shadow:0 0 9px rgba(0,255,95,.6);
  margin-bottom:6px;
}
.latest-title{
  font-family:'VT323','JetBrains Mono',monospace;
  font-size:2rem; line-height:1.05; letter-spacing:.03em;
  color:#ffffff; -webkit-text-fill-color:#ffffff;
  text-shadow:-1.4px 0 rgba(255,0,60,.7), 1.4px 0 rgba(0,229,255,.65), 0 0 14px rgba(0,229,255,.35);
}
.latest-collab{
  font-family:'VT323',monospace; font-size:1rem;
  color:#8dffc4; -webkit-text-fill-color:#8dffc4;
}
.latest-date{
  font-family:var(--mac-font); font-size:.46rem; letter-spacing:.2em; text-transform:uppercase;
  color:#6d8f88; -webkit-text-fill-color:#6d8f88;
  margin:6px 0 14px;
}
.latest-links{ display:flex; flex-wrap:wrap; gap:10px; }
.latest-btn{
  display:inline-flex; align-items:center; gap:8px;
  padding:9px 14px;
  border:1px solid var(--mac-line);
  border-radius:3px;
  background:var(--mac-chrome);
  box-shadow:var(--mac-shadow);
  text-decoration:none;
  font-family:var(--mac-font); font-size:.5rem; letter-spacing:.16em; text-transform:uppercase;
  color:#bdfbdd; -webkit-text-fill-color:#bdfbdd;
  transition:transform .12s steps(2,end), box-shadow .12s steps(2,end), border-color .25s, color .25s;
}
.latest-btn svg{ width:18px; height:18px; flex:0 0 18px; }
.latest-btn:hover{ transform:translate(-1px,-1px); box-shadow:4px 4px 0 rgba(0,0,0,.6); }
.latest-btn:active{ transform:translate(3px,3px); box-shadow:none; }
.latest-btn[data-platform="spotify"]:hover{    border-color:#1db954; color:#1db954; -webkit-text-fill-color:#1db954; }
.latest-btn[data-platform="apple"]:hover{      border-color:#fa243c; color:#fa243c; -webkit-text-fill-color:#fa243c; }
.latest-btn[data-platform="soundcloud"]:hover{ border-color:#ff5500; color:#ff5500; -webkit-text-fill-color:#ff5500; }
.latest-btn[data-platform="youtube"]:hover{    border-color:#ff0000; color:#ff4444; -webkit-text-fill-color:#ff4444; }
@media (max-width:620px){
  .latest-single{ grid-template-columns:110px 1fr; gap:14px; padding:14px; }
  .latest-title{ font-size:1.5rem; }
  .latest-btn span{ display:none; }
  .latest-btn{ padding:10px; }
  .latest-btn svg{ width:22px; height:22px; flex:0 0 22px; }
}

/* ============================================================
   33. RELEASES — EPs and compilations in one section,
   and smaller squares so mobile fits three across
   ============================================================ */
.release-sub{
  font-family:var(--mac-font);
  font-size:.56rem; letter-spacing:.24em; text-transform:uppercase;
  color:#00e5ff; -webkit-text-fill-color:#00e5ff;
  text-shadow:0 0 9px rgba(0,229,255,.45);
  margin:26px 0 12px;
  padding-bottom:7px;
  border-bottom:1px solid var(--mac-line-soft);
}
.release-sub:first-of-type{ margin-top:6px; }
#releases .album-grid{
  grid-template-columns:repeat(auto-fill, minmax(150px,1fr));
}
#releases .album-card{ padding:14px; }
#releases .album-title{ font-size:.95rem; }
@media (max-width:760px){
  #releases .album-grid{ grid-template-columns:repeat(3, 1fr) !important; }
  #releases .album-card{ padding:9px; padding-top:17px; }
  #releases .album-title{ font-size:.8rem; line-height:1.15; }
  #releases .album-year{ font-size:.62rem; }
}
@media (max-width:420px){
  #releases .album-grid{ grid-template-columns:repeat(2, 1fr) !important; }
}

/* ============================================================
   34. LIVE TRACK COUNT
   ============================================================ */
.track-count{
  display:inline-block; margin-left:12px; padding:3px 11px;
  font-family:var(--mac-font,'JetBrains Mono',monospace);
  font-size:.86rem; letter-spacing:.08em; line-height:1.3;
  color:#00ff5f; -webkit-text-fill-color:#00ff5f;
  text-shadow:0 0 10px rgba(0,255,95,.45);
  border:1px solid rgba(0,255,95,.35); border-radius:3px;
  background:rgba(0,255,95,.07);
  vertical-align:middle;
}

/* ============================================================
   35. AI POLICY NOTICE + BLOG FOOTNOTE
   ============================================================ */
.ai-policy-notice{
  display:flex; gap:14px; align-items:flex-start;
  margin:0 0 28px;
  padding:16px 18px;
  border:1px solid var(--mx-cyan);
  border-left-width:4px;
  border-radius:3px;
  background:rgba(0,30,38,.5);
  box-shadow:var(--mac-shadow);
}
.ai-policy-notice p{
  margin:0;
  font-family:'VT323','JetBrains Mono',monospace;
  font-size:1.05rem; line-height:1.5;
  color:#cfeee4; -webkit-text-fill-color:#cfeee4;
}
.ai-policy-notice-date{
  flex:0 0 auto;
  font-family:var(--mac-font); font-size:.5rem; letter-spacing:.14em;
  color:#00e5ff; -webkit-text-fill-color:#00e5ff;
  padding:3px 8px;
  border:1px solid var(--mac-line);
  text-shadow:0 0 8px rgba(0,229,255,.5);
}
.post-ai-footnote{
  margin:38px 0 0;
  padding:13px 16px;
  border-top:1px solid var(--mac-line);
  border-left:3px solid var(--mx-green);
  background:rgba(0,22,14,.45);
  font-family:var(--mac-font);
  font-size:.5rem; letter-spacing:.14em; text-transform:uppercase;
  line-height:1.9;
  color:#8dffc4; -webkit-text-fill-color:#8dffc4;
  text-shadow:0 0 8px rgba(0,255,95,.4);
}

/* ============================================================
   36. LATEST INCURSIONS
   A slim rolling strip above the hero listing every Spotify
   release. The track is duplicated in the markup and translated
   -50%, so the loop is seamless with no JS. The label carries a
   permanent RGB-split glitch; the strip tears on hover.
   ============================================================ */
.incursions{
  position:relative;
  display:flex; align-items:center; gap:14px;
  margin:0 clamp(10px,3.2vw,46px) 14px;
  padding:0 14px;
  height:40px;
  overflow:hidden;
  text-decoration:none;
  border:1px solid var(--mac-line);
  border-radius:3px;
  background:
    repeating-linear-gradient(
      to bottom,
      rgba(0,229,255,.05) 0px, rgba(0,229,255,.05) 1px,
      rgba(0,0,0,0) 1px, rgba(0,0,0,0) 3px),
    var(--mac-chrome);
  box-shadow:var(--mac-shadow);
}

/* --- the label, permanently glitching --- */
.incursions-label{
  position:relative;
  flex:0 0 auto;
  font-family:var(--mac-font);
  font-size:.5rem; letter-spacing:.2em; text-transform:uppercase;
  color:#00ff5f; -webkit-text-fill-color:#00ff5f;
  text-shadow:0 0 9px rgba(0,255,95,.6);
  padding-right:14px;
  border-right:1px solid var(--mac-line);
}
.incursions-label::before,
.incursions-label::after{
  content:attr(data-text);
  position:absolute; left:0; top:0;
  pointer-events:none; mix-blend-mode:screen;
}
.incursions-label::before{
  -webkit-text-fill-color:#ff2049; color:#ff2049;
  animation:incursion-chop-a 3.4s steps(2,end) infinite;
}
.incursions-label::after{
  -webkit-text-fill-color:#00e5ff; color:#00e5ff;
  animation:incursion-chop-b 3.4s steps(2,end) infinite;
}
@keyframes incursion-chop-a{
  0%,86%,100%{ transform:translate(0,0); clip-path:inset(0 0 100% 0); }
  88%{ transform:translate(-2px,-1px); clip-path:inset(10% 0 55% 0); }
  92%{ transform:translate(2px,1px);  clip-path:inset(55% 0 20% 0); }
}
@keyframes incursion-chop-b{
  0%,86%,100%{ transform:translate(0,0); clip-path:inset(100% 0 0 0); }
  89%{ transform:translate(2px,1px);  clip-path:inset(60% 0 15% 0); }
  94%{ transform:translate(-2px,-1px);clip-path:inset(25% 0 50% 0); }
}

/* --- the rolling strip --- */
.incursions-viewport{
  position:relative;
  flex:1 1 auto;
  overflow:hidden;
  height:100%;
  display:flex; align-items:center;
  -webkit-mask-image:linear-gradient(to right, transparent, #000 5%, #000 95%, transparent);
  mask-image:linear-gradient(to right, transparent, #000 5%, #000 95%, transparent);
}
.incursions-track{
  display:flex; align-items:center;
  white-space:nowrap;
  will-change:transform;
  animation:incursion-roll 38s linear infinite;
}
@keyframes incursion-roll{
  from{ transform:translateX(0); }
  to  { transform:translateX(-50%); }   /* the list is doubled in the markup */
}
.incursions:hover .incursions-track{ animation-play-state:paused; }

.incursion{
  display:inline-flex; align-items:center; gap:8px;
  padding:0 20px;
  font-family:'VT323','JetBrains Mono',monospace;
  font-size:1rem; letter-spacing:.07em; text-transform:uppercase;
  color:#cfeee4; -webkit-text-fill-color:#cfeee4;
  text-shadow:-0.6px 0 rgba(255,0,60,.4), 0.6px 0 rgba(0,229,255,.38);
}
.incursion-dot{
  width:5px; height:5px; flex:0 0 5px;
  background:#00ff5f;
  box-shadow:0 0 7px rgba(0,255,95,.9);
}

/* a tracking tear that sweeps the strip */
.incursions::after{
  content:''; position:absolute; left:0; right:0; height:9px;
  pointer-events:none; z-index:2;
  background:linear-gradient(to bottom,
     rgba(0,229,255,0) 0%, rgba(0,229,255,.2) 45%,
     rgba(255,255,255,.14) 50%, rgba(0,255,95,.18) 55%, rgba(0,229,255,0) 100%);
  mix-blend-mode:screen;
  animation:incursion-tear 7s linear infinite;
}
@keyframes incursion-tear{
  0%  { transform:translateY(-14px); opacity:0; }
  10% { opacity:1; }
  80% { opacity:1; }
  100%{ transform:translateY(46px); opacity:0; }
}

.incursions-go{
  flex:0 0 auto;
  font-family:var(--mac-font);
  font-size:.46rem; letter-spacing:.16em; text-transform:uppercase;
  color:#1db954; -webkit-text-fill-color:#1db954;
  text-shadow:0 0 9px rgba(29,185,84,.6);
  padding-left:14px;
  border-left:1px solid var(--mac-line);
}
.incursions:hover{ border-color:#1db954; box-shadow:4px 4px 0 rgba(0,0,0,.6), 0 0 22px rgba(29,185,84,.3); }

@media (max-width:620px){
  .incursions{ margin:0 10px 10px; gap:9px; padding:0 9px; height:34px; }
  .incursions-label{ font-size:.42rem; letter-spacing:.14em; padding-right:9px; }
  .incursions-go{ display:none; }
  .incursion{ font-size:.9rem; padding:0 14px; }
}
@media (prefers-reduced-motion: reduce){
  .incursions-track{ animation:none; }
  .incursions::after,
  .incursions-label::before,
  .incursions-label::after{ animation:none; }
}

/* ============================================================
   37. WIZARD WARRIOR — ORIGINAL SOUNDTRACK PAGE
   ============================================================ */
.ost{
  display:grid;
  grid-template-columns:260px 1fr;
  gap:26px;
  align-items:start;
}
.ost-art{
  position:relative; overflow:hidden;
  border:1px solid var(--mac-line);
  border-radius:3px;
  box-shadow:var(--mac-shadow);
}
.ost-art img{ display:block; width:100%; height:auto; }
.ost-art::after{
  content:''; position:absolute; inset:0; pointer-events:none;
  background:repeating-linear-gradient(
     to bottom, rgba(0,0,0,0) 0px, rgba(0,0,0,0) 2px,
     rgba(0,0,0,.28) 3px, rgba(0,0,0,.28) 4px);
  mix-blend-mode:multiply;
}
.ost-body p{ margin:0 0 20px; }

.ost-player{
  padding:14px 16px;
  margin-bottom:18px;
  border:1px solid var(--mac-line);
  border-radius:3px;
  background:
    repeating-linear-gradient(
      to bottom,
      rgba(0,229,255,.04) 0px, rgba(0,229,255,.04) 1px,
      rgba(0,0,0,0) 1px, rgba(0,0,0,0) 3px),
    var(--mac-chrome);
  box-shadow:var(--mac-shadow);
}
.ost-player-label{
  font-family:var(--mac-font);
  font-size:.5rem; letter-spacing:.2em; text-transform:uppercase;
  color:#00ff5f; -webkit-text-fill-color:#00ff5f;
  text-shadow:0 0 9px rgba(0,255,95,.55);
  margin-bottom:10px;
}
.ost-player audio{
  width:100%;
  height:38px;
  display:block;
  filter:invert(1) hue-rotate(150deg) saturate(1.3) contrast(.95);
}

.ost-steam{
  display:inline-flex; align-items:center;
  padding:12px 20px;
  border:1px solid #66c0f4;
  border-radius:3px;
  background:var(--mac-chrome);
  box-shadow:var(--mac-shadow);
  text-decoration:none;
  font-family:var(--mac-font);
  font-size:.54rem; letter-spacing:.16em; text-transform:uppercase;
  color:#9fd8ff; -webkit-text-fill-color:#9fd8ff;
  text-shadow:0 0 9px rgba(102,192,244,.5);
  transition:transform .12s steps(2,end), box-shadow .12s steps(2,end);
}
.ost-steam:hover{ transform:translate(-1px,-1px); box-shadow:4px 4px 0 rgba(0,0,0,.6), 0 0 22px rgba(102,192,244,.35); }
.ost-steam:active{ transform:translate(3px,3px); box-shadow:none; }

.ost-list{ list-style:none; margin:0; padding:0; }
.ost-row{
  display:grid;
  grid-template-columns:1fr auto;
  gap:16px; align-items:baseline;
  padding:11px 14px;
  border-bottom:1px solid rgba(0,229,255,.1);
}
.ost-row:hover{ background:rgba(0,229,255,.05); }
.ost-track{
  font-family:'VT323','JetBrains Mono',monospace;
  font-size:1.2rem; letter-spacing:.03em;
  color:#ffffff; -webkit-text-fill-color:#ffffff;
  text-shadow:-0.8px 0 rgba(255,0,60,.45), 0.8px 0 rgba(0,229,255,.4);
}
.ost-track a{ color:#8dffc4; -webkit-text-fill-color:#8dffc4; text-decoration:none; }
.ost-track a:hover{ color:#00e5ff; -webkit-text-fill-color:#00e5ff; }
.ost-where{
  font-family:var(--mac-font);
  font-size:.46rem; letter-spacing:.16em; text-transform:uppercase;
  color:#6d8f88; -webkit-text-fill-color:#6d8f88;
  text-align:right;
}

/* the extra "hear the soundtrack" link under the credit row */
.credit-ost{
  display:block;
  padding:9px 18px;
  background:rgba(0,16,12,.6);
  border-left:3px solid var(--mx-green);
  text-decoration:none;
  font-family:var(--mac-font);
  font-size:.46rem; letter-spacing:.16em; text-transform:uppercase;
  color:#8dffc4; -webkit-text-fill-color:#8dffc4;
  text-shadow:0 0 8px rgba(0,255,95,.4);
  transition:background .25s ease, color .25s ease;
}
.credit-ost:hover{ background:rgba(0,255,95,.1); color:#00e5ff; -webkit-text-fill-color:#00e5ff; }

@media (max-width:760px){
  .ost{ grid-template-columns:1fr; gap:18px; }
  .ost-art{ max-width:230px; }
  .ost-row{ grid-template-columns:1fr; gap:3px; }
  .ost-where{ text-align:left; }
}

/* ============================================================
   38. THE VOID — PLATFORM LINKS
   ============================================================ */
.void-links{
  display:flex; flex-wrap:wrap; gap:8px;
  justify-content:center;
  margin-top:14px;
}
.void-link{
  padding:7px 12px;
  border:1px solid var(--mac-line);
  border-radius:3px;
  background:var(--mac-chrome);
  text-decoration:none;
  font-family:var(--mac-font);
  font-size:.44rem; letter-spacing:.14em; text-transform:uppercase;
  color:#bdfbdd; -webkit-text-fill-color:#bdfbdd;
  transition:border-color .25s, color .25s, transform .12s steps(2,end);
}
.void-link:hover{ transform:translate(-1px,-1px); }
.void-link[data-platform="soundcloud"]:hover{ border-color:#ff5500; color:#ff5500; -webkit-text-fill-color:#ff5500; }
.void-link[data-platform="spotify"]:hover{    border-color:#1db954; color:#1db954; -webkit-text-fill-color:#1db954; }
.void-link[data-platform="apple"]:hover{      border-color:#fa243c; color:#fa243c; -webkit-text-fill-color:#fa243c; }
.void-link[data-platform="youtube"]:hover{    border-color:#ff0000; color:#ff4444; -webkit-text-fill-color:#ff4444; }

/* ============================================================
   39. THE VOID — ANONYMOUS COMMENTS
   ============================================================ */
.void-comments{
  max-width:720px;
  margin:46px auto 0;
  padding:0 6vw;
  text-align:left;
}
.vc-head{
  display:flex; align-items:baseline; justify-content:space-between;
  gap:14px;
  padding-bottom:9px;
  border-bottom:1px solid var(--mac-line);
  margin-bottom:18px;
}
.vc-title{
  font-family:var(--mac-font);
  font-size:.6rem; letter-spacing:.24em; text-transform:uppercase;
  color:#00e5ff; -webkit-text-fill-color:#00e5ff;
  text-shadow:0 0 9px rgba(0,229,255,.45);
  margin:0;
}
.vc-count{
  font-family:var(--mac-font); font-size:.44rem; letter-spacing:.16em; text-transform:uppercase;
  color:#6d8f88; -webkit-text-fill-color:#6d8f88;
}

/* --- compose --- */
.vc-compose{
  padding:16px;
  border:1px solid var(--mac-line);
  border-radius:3px;
  background:
    linear-gradient(180deg, rgba(0,229,255,.03), rgba(0,0,0,0) 40%),
    rgba(4,12,9,.66);
  box-shadow:var(--mac-shadow);
  margin-bottom:24px;
}
.vc-mask{
  display:flex; align-items:center; flex-wrap:wrap; gap:10px;
  margin-bottom:12px;
  padding-bottom:12px;
  border-bottom:1px solid rgba(0,229,255,.14);
}
.vc-mask-label{
  font-family:var(--mac-font); font-size:.44rem; letter-spacing:.2em; text-transform:uppercase;
  color:#6d8f88; -webkit-text-fill-color:#6d8f88;
}
.vc-handle{
  flex:1 1 auto;
  font-family:'VT323','JetBrains Mono',monospace;
  font-size:1.35rem; letter-spacing:.04em;
  color:#00ff5f; -webkit-text-fill-color:#00ff5f;
  text-shadow:-1px 0 rgba(255,0,60,.55), 1px 0 rgba(0,229,255,.5), 0 0 12px rgba(0,255,95,.45);
  word-break:break-all;
}
.vc-handle.vc-flick{ animation:vc-flick .32s steps(2,end) 1; }
@keyframes vc-flick{
  0%  { transform:translate(0,0); opacity:1; }
  25% { transform:translate(-3px,1px); opacity:.55; }
  50% { transform:translate(3px,-1px); opacity:1; }
  75% { transform:translate(-1px,0); opacity:.7; }
  100%{ transform:translate(0,0); opacity:1; }
}
.vc-reroll{
  padding:7px 13px;
  border:1px solid var(--mac-line);
  border-radius:3px;
  background:var(--mac-chrome);
  box-shadow:var(--mac-shadow);
  cursor:pointer;
  font-family:var(--mac-font); font-size:.44rem; letter-spacing:.16em; text-transform:uppercase;
  color:#bdfbdd; -webkit-text-fill-color:#bdfbdd;
  transition:transform .12s steps(2,end), box-shadow .12s steps(2,end), color .25s;
}
.vc-reroll:hover{ color:#00e5ff; -webkit-text-fill-color:#00e5ff; transform:translate(-1px,-1px); }
.vc-reroll:active{ transform:translate(3px,3px); box-shadow:none; }

.vc-body{
  width:100%;
  resize:vertical;
  padding:11px 12px;
  border:1px solid var(--mac-line) !important;
  border-radius:3px;
  background:rgba(0,16,12,.6);
  color:#cfeee4;
  font-family:'VT323','JetBrains Mono',monospace;
  font-size:1.1rem; line-height:1.45;
}
.vc-actions{
  display:flex; align-items:center; justify-content:space-between;
  gap:12px; margin-top:11px;
}
.vc-left{
  font-family:var(--mac-font); font-size:.42rem; letter-spacing:.14em; text-transform:uppercase;
  color:#6d8f88; -webkit-text-fill-color:#6d8f88;
}
.vc-post{
  padding:10px 20px;
  border:1px solid var(--mx-green);
  border-radius:3px;
  background:var(--mac-chrome);
  box-shadow:var(--mac-shadow);
  cursor:pointer;
  font-family:var(--mac-font); font-size:.48rem; letter-spacing:.18em; text-transform:uppercase;
  color:#8dffc4; -webkit-text-fill-color:#8dffc4;
  text-shadow:0 0 9px rgba(0,255,95,.5);
  transition:transform .12s steps(2,end), box-shadow .12s steps(2,end);
}
.vc-post:hover{ transform:translate(-1px,-1px); box-shadow:4px 4px 0 rgba(0,0,0,.6), 0 0 20px rgba(0,255,95,.35); }
.vc-post:active{ transform:translate(3px,3px); box-shadow:none; }
.vc-note{
  margin-top:9px;
  font-family:var(--mac-font); font-size:.42rem; letter-spacing:.12em; text-transform:uppercase;
  color:#00e5ff; -webkit-text-fill-color:#00e5ff;
  min-height:1em;
}

/* --- the wall --- */
.vc-empty{
  padding:22px 0;
  text-align:center;
  font-family:'VT323',monospace; font-size:1.05rem;
  color:#4f7c72; -webkit-text-fill-color:#4f7c72;
}
.vc-item{
  padding:13px 0;
  border-bottom:1px solid rgba(0,229,255,.1);
}
.vc-item-head{
  display:flex; align-items:baseline; gap:12px; margin-bottom:5px;
}
.vc-item-handle{
  font-family:'VT323','JetBrains Mono',monospace;
  font-size:1.05rem; letter-spacing:.04em;
  color:#8dffc4; -webkit-text-fill-color:#8dffc4;
  text-shadow:0 0 8px rgba(0,255,95,.4);
  word-break:break-all;
}
.vc-item-at{
  margin-left:auto;
  font-family:var(--mac-font); font-size:.4rem; letter-spacing:.14em; text-transform:uppercase;
  color:#4f7c72; -webkit-text-fill-color:#4f7c72;
  flex:0 0 auto;
}
.vc-item-body{
  margin:0;
  font-family:'VT323','JetBrains Mono',monospace;
  font-size:1.08rem; line-height:1.5;
  color:#cfeee4; -webkit-text-fill-color:#cfeee4;
  white-space:pre-wrap; word-break:break-word;
}

.void-comments-note{
  max-width:720px;
  margin:18px auto 40px;
  padding:0 6vw;
  font-family:var(--mac-font);
  font-size:.4rem; letter-spacing:.12em; text-transform:uppercase;
  line-height:2;
  color:#4f7c72; -webkit-text-fill-color:#4f7c72;
  text-align:left;
}
.void-comments-note code{
  font-family:'JetBrains Mono',monospace;
  color:#6d8f88; -webkit-text-fill-color:#6d8f88;
  text-transform:none;
}

@media (max-width:620px){
  .void-comments, .void-comments-note{ padding:0 5vw; }
  .vc-handle{ font-size:1.15rem; }
}

/* ============================================================
   40. THE VOID — header at the top, on every width
   The stage used to be a centred flex box, which floated the
   title into the middle of the viewport and pushed the video
   below the fold. It now stacks: title, then video, then the
   controls and the comment wall.
   ============================================================ */
.void-stage{
  display:block !important;
  align-items:stretch !important;
  min-height:0 !important;
  padding:26px 6vw 6vh !important;
  overflow:visible !important;
}
.void-heading{
  margin:0 auto 18px;
  max-width:760px;
  text-align:center;
}
.void-title{
  margin:0 0 6px;
  line-height:1;
}
.void-sub{
  margin:0 auto;
  max-width:46ch;
  line-height:1.45;
}
.void-player{ margin:0 auto; }

@media (max-width:860px){
  .void-stage{ padding:18px 0 6vh !important; }
  .void-heading{ padding:0 6vw; margin-bottom:14px; }
}

/* The shuffle button and pull count now sit under the title, above
   the video, rather than below the player. */
.void-controls{
  display:flex;
  flex-direction:column;
  align-items:center;
  gap:8px;
  margin:0 auto 20px;
}
.void-controls .void-shuffle{ margin-top:0; }
.void-controls .void-count{ margin:0; }
@media (max-width:860px){
  .void-controls{ margin-bottom:14px; padding:0 6vw; }
}

/* ============================================================
   41. ENTER THE VOID — gradient neon
   Purple -> blue -> cyan -> green, running through the border,
   the glow and the label at once.

   The border gradient uses the two-layer padding-box/border-box
   trick (the same one .nav-void uses): the first layer paints
   the button's dark fill inside the padding box, the second
   paints the gradient across the border box, so the border
   itself becomes the gradient. background-clip:text would fight
   this, which is why the label is animated through the four
   colours instead of being clipped to a gradient.

   These carry !important because sections 18 and 23 force a
   hairline border and the flat Mac shadow onto every button.
   ============================================================ */
.void-shuffle{
  position:relative;
  border:2px solid transparent !important;
  border-radius:999px !important;
  background:
    linear-gradient(#02040a, #02040a) padding-box,
    linear-gradient(100deg,
      #8b3bff 0%, #2e8bff 25%, #00e5ff 50%, #00ff5f 75%, #8b3bff 100%) border-box !important;
  background-size: 100% 100%, 300% 100% !important;
  background-position: 0 0, 0 0 !important;
  color:#d8fff0 !important;
  -webkit-text-fill-color:#d8fff0 !important;
  animation:voidEnterSweep 7s linear infinite, voidEnterLabel 7s linear infinite !important;
  box-shadow:
      0 0 14px rgba(139,59,255,.55),
      0 0 30px rgba(0,229,255,.35),
      0 0 52px rgba(0,255,95,.22) !important;
  transition:transform .18s var(--ease), filter .25s ease !important;
}

/* the gradient slides across the border box */
@keyframes voidEnterSweep{
  0%   { background-position: 0 0, 0% 0; }
  100% { background-position: 0 0, 300% 0; }
}

/* the label and icon walk the same four colours */
@keyframes voidEnterLabel{
  0%   { color:#c9a7ff; -webkit-text-fill-color:#c9a7ff;
         text-shadow:0 0 10px rgba(139,59,255,.85), 0 0 22px rgba(139,59,255,.45); }
  25%  { color:#8ec5ff; -webkit-text-fill-color:#8ec5ff;
         text-shadow:0 0 10px rgba(46,139,255,.85), 0 0 22px rgba(46,139,255,.45); }
  50%  { color:#8ff3ff; -webkit-text-fill-color:#8ff3ff;
         text-shadow:0 0 10px rgba(0,229,255,.9), 0 0 22px rgba(0,229,255,.5); }
  75%  { color:#8dffc4; -webkit-text-fill-color:#8dffc4;
         text-shadow:0 0 10px rgba(0,255,95,.9), 0 0 22px rgba(0,255,95,.5); }
  100% { color:#c9a7ff; -webkit-text-fill-color:#c9a7ff;
         text-shadow:0 0 10px rgba(139,59,255,.85), 0 0 22px rgba(139,59,255,.45); }
}

/* the icon rides the label colour */
.void-shuffle svg{
  fill:currentColor;
  filter:drop-shadow(0 0 6px currentColor);
}

/* a soft bloom sitting behind the pill */
.void-shuffle::after{
  content:'';
  position:absolute; inset:-7px;
  z-index:-1;
  border-radius:999px;
  background:linear-gradient(100deg,
     #8b3bff 0%, #2e8bff 25%, #00e5ff 50%, #00ff5f 75%, #8b3bff 100%);
  background-size:300% 100%;
  filter:blur(13px);
  opacity:.55;
  animation:voidEnterSweep 7s linear infinite;
  pointer-events:none;
}

.void-shuffle:hover{
  transform:translateY(-2px) !important;
  filter:brightness(1.15) saturate(1.15);
  box-shadow:
      0 0 20px rgba(139,59,255,.75),
      0 0 42px rgba(0,229,255,.5),
      0 0 72px rgba(0,255,95,.32) !important;
}
.void-shuffle:hover::after{ opacity:.8; filter:blur(17px); }
.void-shuffle:active{
  transform:translateY(1px) !important;
  box-shadow:
      0 0 10px rgba(139,59,255,.6),
      0 0 24px rgba(0,229,255,.4) !important;
}

@media (hover:none){
  .void-shuffle:hover{ transform:none !important; }
}
@media (prefers-reduced-motion: reduce){
  .void-shuffle{
    animation:none !important;
    color:#8ff3ff !important;
    -webkit-text-fill-color:#8ff3ff !important;
    background-position: 0 0, 50% 0 !important;
  }
  .void-shuffle::after{ animation:none; }
}

/* ============================================================
   42. NAV FALLBACK
   The whole site now shares one masthead nav, including pages
   that were originally built with a single "back to site" link
   and therefore never had nav styles of their own (privacy,
   terms, ai-policy). Without these, their dropdown menus render
   static and visible and the header inflates to ~307px.

   Scoped to desktop on purpose: below 901px the drawer rules in
   sections 15 and 16 own the nav, and these would fight them.
   On pages that already style their nav, these rules describe
   the same behaviour, so nothing there changes.
   ============================================================ */
@media (min-width:901px){
  header nav{
    display:flex;
    align-items:center;
    flex-wrap:wrap;
    gap:0;
  }
  header nav .nav-dropdown{
    position:relative;
    display:inline-flex;
    align-items:center;
  }
  header nav .nav-dropdown-trigger{
    background:none;
    border:0;
    cursor:pointer;
    padding:0 2px;
    font:inherit;
    letter-spacing:inherit;
    text-transform:inherit;
  }
  header nav .nav-dropdown-menu{
    position:absolute;
    z-index:70;
    top:calc(100% + 16px);
    right:0;
    min-width:190px;
    padding:8px 0;
    border:1px solid var(--mac-line);
    border-radius:3px;
    background:#040b10;
    box-shadow:var(--mac-shadow);
    opacity:0;
    visibility:hidden;
    transform:translateY(-6px);
    transition:opacity .2s, transform .2s, visibility .2s;
  }
  header nav .nav-dropdown.open .nav-dropdown-menu{
    opacity:1;
    visibility:visible;
    transform:translateY(0);
  }
  header nav .nav-dropdown-menu a{
    display:block;
    padding:9px 16px;
    white-space:nowrap;
  }
  header nav .nav-dropdown .caret{
    display:inline-block;
    margin-left:4px;
    transition:transform .2s;
  }
  header nav .nav-dropdown.open .caret{ transform:rotate(180deg); }
}

/* ------------------------------------------------------------
   43. NAV FALLBACK — small screens
   privacy / terms / ai-policy were built with a one-link bar, so
   they have no mobile-toggle and none of the slide-in drawer CSS
   the other pages carry. Given the shared 8-item nav they stacked
   it vertically and the header grew to ~307px.

   :has() lets us target exactly those headers — the ones with no
   toggle — and give them a compact wrapped row instead. Pages
   that DO have a toggle keep the drawer from sections 15 and 16.
   ------------------------------------------------------------ */
@media (max-width:900px){
  header:not(:has(.mobile-toggle)) nav{
    position:static !important;
    inset:auto !important;
    transform:none !important;
    display:flex !important;
    flex-direction:row !important;
    flex-wrap:wrap !important;
    align-items:center !important;
    justify-content:flex-end !important;
    gap:3px 12px !important;
    width:auto !important;
    min-height:0 !important;
    padding:0 !important;
    background:none !important;
    backdrop-filter:none !important;
    overflow:visible !important;
    z-index:auto !important;
  }
  /* the dropdowns have nowhere to hang on a bar this small */
  header:not(:has(.mobile-toggle)) nav .nav-dropdown,
  header:not(:has(.mobile-toggle)) nav .nav-divider{
    display:none !important;
  }
  header:not(:has(.mobile-toggle)) nav a{
    font-size:.78rem !important;
    padding:4px 0 !important;
    width:auto !important;
  }
}

/* group label and separator inside the Universe menu */
.nav-dropdown-menu .nav-menu-label{
  display:block;
  padding:8px 16px 5px;
  font-family:var(--mac-font);
  font-size:.4rem; letter-spacing:.2em; text-transform:uppercase;
  color:#4f7c72; -webkit-text-fill-color:#4f7c72;
  pointer-events:none;
}
/* The Labs heading is also the link to Labs Home, so it keeps the heading's
   look but stays clickable. Specificity has to clear `header nav
   .nav-dropdown-menu a`, which sets its own padding. */
header nav .nav-dropdown-menu a.nav-menu-head{
  display:block;
  padding:8px 16px 5px;
  font-family:var(--mac-font);
  font-size:.4rem; letter-spacing:.2em; text-transform:uppercase;
  color:#4f7c72; -webkit-text-fill-color:#4f7c72;
  text-decoration:none;
  transition:color .2s;
}
header nav .nav-dropdown-menu a.nav-menu-head:hover,
header nav .nav-dropdown-menu a.nav-menu-head.current{
  color:#8dffc4; -webkit-text-fill-color:#8dffc4;
}
.nav-dropdown-menu .nav-menu-sep{
  display:block;
  height:1px;
  margin:7px 12px;
  background:var(--mac-line-soft);
}

/* the wishlist call-out on the Wizard Warrior page */
.ost-cta{
  margin:0 0 20px !important;
  font-family:'VT323','JetBrains Mono',monospace;
  font-size:1.35rem;
  letter-spacing:.03em;
  color:#8dffc4 !important;
  -webkit-text-fill-color:#8dffc4 !important;
  text-shadow:0 0 10px rgba(0,255,95,.6), 0 0 24px rgba(0,229,255,.3);
}

/* The call-out IS the Steam button now, so it needs button geometry
   on top of the phosphor type it already had. */
a.ost-cta{
  display:inline-flex;
  align-items:center;
  margin:4px 0 20px !important;
  padding:13px 24px;
  border:1px solid #66c0f4;
  border-radius:3px;
  background:var(--mac-chrome);
  box-shadow:var(--mac-shadow);
  text-decoration:none;
  font-size:1.25rem;
  transition:transform .12s steps(2,end), box-shadow .12s steps(2,end), border-color .25s;
}
a.ost-cta:hover{
  border-color:#9fd8ff;
  transform:translate(-1px,-1px);
  box-shadow:4px 4px 0 rgba(0,0,0,.6), 0 0 24px rgba(102,192,244,.4);
}
a.ost-cta:active{ transform:translate(3px,3px); box-shadow:none; }

/* ============================================================
   44. V2.2 — VST SECTION
   ============================================================ */
.plugin-desc{
  margin:10px 0 12px;
  font-family:'VT323','JetBrains Mono',monospace;
  font-size:1.02rem;
  line-height:1.45;
  color:#b9dcd4; -webkit-text-fill-color:#b9dcd4;
}
/* a plugin with no page yet should not look clickable */
.card.no-page{ cursor:default; }
.card.no-page:hover{ transform:none; }

.vst-status{
  max-width:1100px;
  margin:34px auto 0;
  padding:0 clamp(10px,3.2vw,46px);
}
.vst-status-grid{
  display:grid;
  grid-template-columns:repeat(auto-fit, minmax(240px,1fr));
  gap:1px;
  background:var(--mac-line-soft);
  border:1px solid var(--mac-line);
  border-radius:3px;
  box-shadow:var(--mac-shadow);
}
.vst-stat{ padding:18px; background:rgba(4,12,9,.7); }
.vst-stat-k{
  font-family:var(--mac-font);
  font-size:.44rem; letter-spacing:.2em; text-transform:uppercase;
  color:#6d8f88; -webkit-text-fill-color:#6d8f88;
  margin-bottom:7px;
}
.vst-stat-v{
  font-family:'VT323','JetBrains Mono',monospace;
  font-size:1.25rem; line-height:1.2;
  color:#ffffff; -webkit-text-fill-color:#ffffff;
  text-shadow:-1px 0 rgba(255,0,60,.5), 1px 0 rgba(0,229,255,.45);
  margin-bottom:6px;
}
.vst-stat-n{
  font-family:'VT323',monospace;
  font-size:.96rem; line-height:1.4;
  color:#6d8f88; -webkit-text-fill-color:#6d8f88;
}

.vst-waitlist{
  display:inline-flex; align-items:center;
  margin:22px 0 7px;
  padding:14px 26px;
  border:1px solid var(--mx-green);
  border-radius:3px;
  background:var(--mac-chrome);
  box-shadow:var(--mac-shadow);
  text-decoration:none;
  font-family:var(--mac-font);
  font-size:.56rem; letter-spacing:.18em; text-transform:uppercase;
  color:#8dffc4; -webkit-text-fill-color:#8dffc4;
  text-shadow:0 0 10px rgba(0,255,95,.55);
  transition:transform .12s steps(2,end), box-shadow .12s steps(2,end);
}
.vst-waitlist:hover{ transform:translate(-1px,-1px); box-shadow:4px 4px 0 rgba(0,0,0,.6), 0 0 22px rgba(0,255,95,.4); }
.vst-waitlist:active{ transform:translate(3px,3px); box-shadow:none; }
.vst-waitlist-note{
  margin:0 0 6px;
  font-family:var(--mac-font);
  font-size:.42rem; letter-spacing:.14em; text-transform:uppercase;
  color:#4f7c72; -webkit-text-fill-color:#4f7c72;
}

.vst-mission{
  max-width:860px;
  margin:40px auto 0;
  padding:0 clamp(10px,3.2vw,46px) 10px;
}
.vst-mission h2{ font-size:1.5rem; margin-bottom:14px; }
.vst-mission p{
  font-family:'VT323','JetBrains Mono',monospace;
  font-size:1.1rem; line-height:1.55;
  color:#b9dcd4; -webkit-text-fill-color:#b9dcd4;
  margin:0 0 16px;
}
/* the AI disclosure is stated plainly, so it is marked plainly */
.vst-mission .vst-ai{
  padding:13px 16px;
  border-left:3px solid var(--mx-cyan);
  background:rgba(0,26,34,.45);
  color:#cfeee4; -webkit-text-fill-color:#cfeee4;
}

/* ============================================================
   45. V2.2 — SERAPHIM AI COVER ART NOTICE
   ============================================================ */
.seraphim-ai-notice{
  max-width:720px;
  margin:0 0 30px;
  padding:15px 18px;
  border:1px solid var(--mx-cyan);
  border-left-width:4px;
  border-radius:3px;
  background:rgba(0,30,38,.5);
  box-shadow:var(--mac-shadow);
}
.seraphim-ai-notice p{
  margin:0;
  font-family:'VT323','JetBrains Mono',monospace;
  font-size:1.02rem; line-height:1.5;
  color:#cfeee4; -webkit-text-fill-color:#cfeee4;
}

/* ============================================================
   46. V2.2 — THE VOID DIAMOND
   It used to sit inside the video frame at bottom-left, directly
   over YouTube's play control, which swallowed the click. It now
   lives under the frame as its own control.
   ============================================================ */
.void-diamond-row{
  display:flex;
  justify-content:center;
  margin-top:12px;
}
.void-diamond{
  position:static !important;
  left:auto !important;
  bottom:auto !important;
  backdrop-filter:none;
  border:1px solid var(--mac-line) !important;
  border-radius:3px !important;
  background:var(--mac-chrome) !important;
  box-shadow:var(--mac-shadow) !important;
  padding:9px 15px !important;
  gap:9px !important;
  font-family:var(--mac-font) !important;
  font-size:.5rem !important;
  letter-spacing:.14em;
  text-transform:uppercase;
  color:#bdfbdd !important;
  -webkit-text-fill-color:#bdfbdd !important;
}
.void-diamond svg{
  width:17px !important; height:17px !important;
  fill:none;
  stroke:#00e5ff;
  stroke-width:1.7;
  stroke-linejoin:round;
}
.void-diamond:hover{
  transform:translate(-1px,-1px) !important;
  box-shadow:4px 4px 0 rgba(0,0,0,.6), 0 0 20px rgba(0,229,255,.35) !important;
  border-color:#00e5ff !important;
}
.void-diamond:active{ transform:translate(3px,3px) !important; box-shadow:none !important; }
.void-diamond.given svg{ fill:#00e5ff; }
.void-diamond.given{ opacity:.85; cursor:not-allowed; }

/* ============================================================
   47. V2.2 — DISCOGRAPHY CREDIT ROW, TWO TARGETS
   ============================================================ */
.credit-row{ align-items:center; }
.credit-main{
  display:contents;
  text-decoration:none;
}
.credit-detail-btn{
  justify-self:start;
  padding:7px 13px;
  border:1px solid var(--mac-line);
  border-radius:3px;
  background:var(--mac-chrome);
  box-shadow:var(--mac-shadow);
  text-decoration:none;
  font-family:var(--mac-font) !important;
  font-size:.46rem !important;
  letter-spacing:.14em;
  text-transform:uppercase;
  color:#8dffc4 !important;
  -webkit-text-fill-color:#8dffc4 !important;
  transition:transform .12s steps(2,end), box-shadow .12s steps(2,end), color .25s, border-color .25s;
}
.credit-detail-btn:hover{
  color:#00e5ff !important;
  -webkit-text-fill-color:#00e5ff !important;
  border-color:#00e5ff;
  transform:translate(-1px,-1px);
  box-shadow:4px 4px 0 rgba(0,0,0,.6);
}
.credit-detail-btn:active{ transform:translate(3px,3px); box-shadow:none; }
.credit-go{ text-decoration:none; }

@media (max-width:700px){
  .credit-detail-btn{ grid-column:1; justify-self:start; margin-top:6px; }
}

/* ============================================================
   48. MINDNET NEWS
   The blog reads as a terminal you are browsing files on:
   framed panels, a boot line, uppercase chrome, an index rail
   you can switch between feeds. The site-wide scanlines and
   phosphor type do most of the atmosphere already.
   ============================================================ */
.mindnet{
  position:relative;
  margin:0 clamp(10px,3.2vw,46px) clamp(26px,4vw,54px);
  padding-top:30px;
  border:1px solid var(--mac-line);
  border-radius:3px;
  background:
    linear-gradient(180deg, rgba(0,229,255,.03), rgba(0,0,0,0) 22%),
    rgba(2,8,11,.76);
  box-shadow:var(--mac-shadow);
}

/* title bar, same furniture as the windows elsewhere */
.mn-bar{
  position:absolute; top:0; left:0; right:0; height:22px; z-index:3;
  display:flex; align-items:center; gap:7px; padding:0 7px;
  border-bottom:1px solid var(--mac-line);
  background:
    repeating-linear-gradient(to bottom,
      rgba(0,229,255,.2) 0px, rgba(0,229,255,.2) 1px,
      rgba(0,0,0,0) 1px, rgba(0,0,0,0) 3px),
    var(--mac-chrome);
}
.mn-box{ width:9px; height:9px; flex:0 0 9px; border:1px solid var(--mac-line); }
.mn-bar-title{
  flex:1; text-align:center;
  font-family:var(--mac-font); font-size:.5rem; letter-spacing:.2em; text-transform:uppercase;
  color:#a9e8f5; -webkit-text-fill-color:#a9e8f5;
  background:var(--mac-chrome); padding:1px 10px;
  text-shadow:0 0 7px rgba(0,229,255,.45);
}

/* A broadcast crawl across the top: the newest entry from each feed, then
   the three standing plugs. The track carries the items twice, so moving it
   by exactly half its width lands on the start of the second copy and the
   loop has no seam. Hovering holds it still; reduced motion stops it for
   good and lets the strip be scrolled by hand instead. */
.mn-ticker{
  position:relative; overflow:hidden;
  border-bottom:1px solid var(--mac-line);
  background:linear-gradient(90deg, rgba(0,255,95,.08), rgba(0,0,0,0) 62%), rgba(1,7,10,.92);
}
.mn-ticker-track{
  display:flex; width:max-content;
  animation:mn-crawl 52s linear infinite;
}
.mn-ticker:hover .mn-ticker-track,
.mn-ticker:focus-within .mn-ticker-track{ animation-play-state:paused; }
@keyframes mn-crawl{ from{ transform:translateX(0); } to{ transform:translateX(-50%); } }

.mn-ticker-item{
  display:inline-flex; align-items:baseline; gap:9px;
  padding:9px 0; text-decoration:none; white-space:nowrap;
}
.mn-ticker-item::after{
  content:'//'; margin:0 28px;
  font-family:var(--mac-font); font-size:.38rem; letter-spacing:.1em;
  color:#2f5b52; -webkit-text-fill-color:#2f5b52;
}
.mn-tk-k{
  font-family:var(--mac-font); font-size:.4rem; letter-spacing:.18em; text-transform:uppercase;
  color:#00ff5f; -webkit-text-fill-color:#00ff5f; text-shadow:0 0 8px rgba(0,255,95,.5);
}
.mn-tk-t{
  font-family:'VT323',monospace; font-size:1.04rem; letter-spacing:.02em;
  color:#cfeee4; -webkit-text-fill-color:#cfeee4; transition:color .2s;
}
.mn-ticker-item:hover .mn-tk-t{ color:#fff; -webkit-text-fill-color:#fff; }
@media (prefers-reduced-motion: reduce){
  .mn-ticker{ overflow-x:auto; }
  .mn-ticker-track{ animation:none; }
}

/* The title screen. Big enough to read as a DOS splash rather than a
   heading, so it sets its own fill colour - the site-wide gradient on
   headings would otherwise claim it. */
.mn-title{ padding:20px clamp(14px,2.4vw,24px) 0; }
.mn-title-main{
  margin:0;
  font-family:'VT323','JetBrains Mono',monospace;
  font-size:clamp(3.4rem, 12vw, 7.2rem);
  line-height:.84; letter-spacing:.055em; text-transform:uppercase;
  background:none;
  color:#00ff5f; -webkit-text-fill-color:#00ff5f;
  text-shadow:
    0 0 12px rgba(0,255,95,.55),
    0 0 38px rgba(0,255,95,.28),
    -2px 0 rgba(255,0,60,.5), 2px 0 rgba(0,229,255,.45);
}
.mn-title-sub{
  margin-top:6px;
  font-family:var(--mac-font);
  font-size:.5rem; letter-spacing:.58em; text-transform:uppercase;
  color:#a9e8f5; -webkit-text-fill-color:#a9e8f5;
  text-shadow:0 0 8px rgba(0,229,255,.45);
}

/* the boot line, with a blinking block cursor */
.mn-boot{
  display:flex; align-items:center; gap:8px;
  padding:12px clamp(14px,2.4vw,24px) 0;
  font-family:'VT323','JetBrains Mono',monospace;
  font-size:.95rem; letter-spacing:.06em;
  color:#00ff5f; -webkit-text-fill-color:#00ff5f;
  text-shadow:0 0 9px rgba(0,255,95,.5);
}
.mn-caret{
  width:8px; height:14px;
  background:#00ff5f;
  box-shadow:0 0 9px rgba(0,255,95,.7);
  animation:mn-blink 1.1s steps(1,end) infinite;
}
@keyframes mn-blink{ 0%,49%{opacity:1;} 50%,100%{opacity:0;} }

.mn-body{
  display:grid;
  grid-template-columns:1fr 290px;
  gap:clamp(14px,2.2vw,26px);
  padding:16px clamp(14px,2.4vw,24px) clamp(18px,2.6vw,28px);
  align-items:start;
}

/* ---- the feeds ---- */
.mn-feeds{ display:flex; flex-direction:column; gap:26px; min-width:0; }
.mn-feed{ min-width:0; }
.mn-feed-head{
  display:flex; align-items:baseline; gap:10px;
  margin:0 0 4px;
  font-size:1.5rem;
}
.mn-feed-code{
  font-family:var(--mac-font);
  font-size:.46rem; letter-spacing:.18em;
  padding:3px 8px;
  border:1px solid var(--mac-line);
  background:var(--mac-chrome);
  color:#00e5ff; -webkit-text-fill-color:#00e5ff;
  text-shadow:0 0 8px rgba(0,229,255,.5);
}
.mn-feed-sub{
  margin:0 0 14px;
  font-family:'VT323',monospace; font-size:1rem;
  color:#6d8f88 !important; -webkit-text-fill-color:#6d8f88 !important;
}
.mn-feed-list{ display:flex; flex-direction:column; gap:1px; background:var(--mac-line-soft); }

.mn-item{
  display:block;
  padding:15px 16px;
  background:rgba(4,12,14,.72);
  text-decoration:none;
  border-left:3px solid transparent;
  transition:background .22s ease, border-color .22s ease, transform .18s steps(2,end);
}
.mn-item:hover, .mn-item.lit{
  background:rgba(0,229,255,.07);
  border-left-color:var(--mx-green);
  transform:translateX(2px);
}
.mn-item-meta{
  display:flex; align-items:baseline; gap:12px; margin-bottom:6px;
  font-family:var(--mac-font); font-size:.44rem; letter-spacing:.16em; text-transform:uppercase;
}
.mn-item-id{ color:#00ff5f; -webkit-text-fill-color:#00ff5f; text-shadow:0 0 8px rgba(0,255,95,.5); }
.mn-item-meta time{ color:#4f7c72; -webkit-text-fill-color:#4f7c72; margin-left:auto; }
.mn-item-title{
  font-family:'VT323','JetBrains Mono',monospace;
  font-size:1.4rem; line-height:1.15; letter-spacing:.02em;
  color:#ffffff; -webkit-text-fill-color:#ffffff;
  text-shadow:-1px 0 rgba(255,0,60,.5), 1px 0 rgba(0,229,255,.45);
  margin-bottom:5px;
}
.mn-item-excerpt{
  margin:0 0 9px;
  font-family:'VT323',monospace; font-size:1.02rem; line-height:1.45;
  color:#b9dcd4 !important; -webkit-text-fill-color:#b9dcd4 !important;
}
.mn-item-read{
  font-family:var(--mac-font); font-size:.42rem; letter-spacing:.16em; text-transform:uppercase;
  color:#8dffc4; -webkit-text-fill-color:#8dffc4;
}

/* ---- the index rail ---- */
.mn-index{
  position:sticky; top:92px;
  border:1px solid var(--mac-line);
  border-radius:3px;
  background:rgba(3,10,13,.8);
  box-shadow:var(--mac-shadow);
  overflow:hidden;
}
.mn-index-tabs{ display:grid; grid-template-columns:repeat(3, 1fr); }
.mn-tab{
  padding:11px 8px;
  border:0;
  border-bottom:1px solid var(--mac-line);
  background:var(--mac-chrome);
  cursor:pointer;
  font-family:var(--mac-font); font-size:.4rem; letter-spacing:.12em; text-transform:uppercase;
  color:#4f7c72; -webkit-text-fill-color:#4f7c72;
  box-shadow:none !important;
  transition:color .2s, background .2s;
}
.mn-tab{ line-height:1.25; }
.mn-tab + .mn-tab{ border-left:1px solid var(--mac-line); }

/* Absynth Gaming is selectable like the other two, but there is nothing
   behind it yet, so the label swaps to say so on hover and while it is the
   one showing. */
.mn-tab-soon{ position:relative; }
.mn-tab-off{
  position:absolute; inset:0;
  display:flex; align-items:center; justify-content:center;
  opacity:0; transition:opacity .22s ease;
  color:#ff5c7a; -webkit-text-fill-color:#ff5c7a;
  text-shadow:0 0 9px rgba(255,32,73,.6);
}
.mn-tab-soon:hover .mn-tab-on,
.mn-tab-soon.active .mn-tab-on{ opacity:0; }
.mn-tab-soon:hover .mn-tab-off,
.mn-tab-soon.active .mn-tab-off{ opacity:1; }

.mn-index-soon{ padding:22px 14px; text-align:center; }
.mn-index-soon-k{
  font-family:var(--mac-font); font-size:.4rem; letter-spacing:.2em; text-transform:uppercase;
  color:#ff5c7a; -webkit-text-fill-color:#ff5c7a;
  text-shadow:0 0 9px rgba(255,32,73,.5); margin-bottom:8px;
}
.mn-index-soon p{
  margin:0; font-family:'VT323',monospace; font-size:1rem; line-height:1.35;
  color:#6d8f88; -webkit-text-fill-color:#6d8f88;
}
.mn-tab:hover{ color:#8dffc4; -webkit-text-fill-color:#8dffc4; }
.mn-tab.active{
  background:rgba(0,229,255,.1);
  color:#00e5ff; -webkit-text-fill-color:#00e5ff;
  text-shadow:0 0 8px rgba(0,229,255,.5);
}
.mn-tab:active{ transform:none !important; }

.mn-index-list{ display:flex; flex-direction:column; }
.mn-index-item{
  display:grid; grid-template-columns:auto 1fr; gap:10px; align-items:baseline;
  padding:10px 13px;
  border-bottom:1px solid rgba(0,229,255,.1);
  text-decoration:none;
  transition:background .2s;
}
.mn-index-item:hover{ background:rgba(0,255,95,.09); }
.mn-index-id{
  font-family:var(--mac-font); font-size:.4rem; letter-spacing:.1em;
  color:#00ff5f; -webkit-text-fill-color:#00ff5f;
}
.mn-index-title{
  font-family:'VT323',monospace; font-size:.98rem; line-height:1.25;
  color:#cfeee4; -webkit-text-fill-color:#cfeee4;
}
.mn-index-foot{
  padding:9px 13px;
  font-family:var(--mac-font); font-size:.38rem; letter-spacing:.14em; text-transform:uppercase;
  color:#4f7c72; -webkit-text-fill-color:#4f7c72;
}

.mn-noscript{ display:flex; flex-direction:column; gap:8px; padding:0 clamp(14px,3.2vw,46px) 30px; }

@media (max-width:900px){
  .mn-body{ grid-template-columns:1fr; }
  .mn-index{ position:static; order:-1; }       /* index first on a phone */
  .mn-index-tabs{ grid-template-columns:repeat(3, 1fr); }
}


/* ============================================================
   49. Per-page nav banner
   The header art is one shared texture; the colour over it is
   per page. `body header::after` outranks the pages' own
   `header::after`, which sets the default wash.
   ============================================================ */
/* per-page nav banner wash */
body header::after{
  background-image:var(--nav-grad, linear-gradient(90deg,
    rgba(0,0,0,.85) 0%, rgba(255,255,255,.06) 50%, rgba(0,0,0,.85) 100%));
  /* the pages set `overlay`, which over a near-black header renders the wash
     invisible. `screen` lightens, so the colour actually reads. */
  mix-blend-mode:screen;
}
/* and let a little more of the texture through underneath it */
body header::before{ opacity:.16; }


/* ============================================================
   50. Nav trigger colour, lab kicker, Void jump
   ============================================================ */

/* A <button> with no colour set falls back to the UA default, which is
   black. Several pages (the labs hub, games, software, the legal pages)
   never style this one, so "Universe" was black-on-black in the header.
   Same specificity as the pages' own rule, and the sheet loads first, so
   any page that does set a colour still wins. */
.nav-dropdown-trigger{
  color:#e9ddff;
  -webkit-text-fill-color:#e9ddff;
}

/* the kicker above the Labs headings is also the way back to Labs home */
.eyebrow-home{
  display:inline-block;
  text-decoration:none;
  border-bottom:1px solid transparent;
  transition:color .25s, border-color .25s;
}
.eyebrow-home:hover{
  color:#8dffc4;
  -webkit-text-fill-color:#8dffc4;
  border-bottom-color:currentColor;
}

/* a way into the Void from the top of the track list */
.void-jump{
  display:flex; align-items:center; flex-wrap:wrap; gap:14px;
  margin:0 0 26px;
}
.void-jump-btn{
  display:inline-flex; align-items:center; justify-content:center;
  padding:11px 22px; border-radius:3px;
  border:1px solid transparent;
  background:
    linear-gradient(#050506,#050506) padding-box,
    linear-gradient(120deg, #ff2049, #2e8bff, #8b3bff, #ff2049) border-box;
  background-size:100% 100%, 300% 300%;
  animation:voidJumpBorder 6s linear infinite;
  font-family:'JetBrains Mono',monospace; font-size:.66rem;
  letter-spacing:.14em; text-transform:uppercase; text-decoration:none;
  color:#fff; -webkit-text-fill-color:#fff; white-space:nowrap;
  transition:box-shadow .3s, transform .3s;
}
.void-jump-btn:hover{
  transform:translateY(-1px);
  box-shadow:0 0 22px rgba(139,59,255,.45), 0 0 40px rgba(46,139,255,.25);
}
@keyframes voidJumpBorder{
  0%{ background-position:0% 0%, 0% 50%; }
  50%{ background-position:0% 0%, 100% 50%; }
  100%{ background-position:0% 0%, 0% 50%; }
}
@media (prefers-reduced-motion: reduce){ .void-jump-btn{ animation:none; } }
.void-jump-note{
  font-family:'VT323',monospace; font-size:1.06rem; line-height:1.3;
  color:#b9dcd4; -webkit-text-fill-color:#b9dcd4;
}
@media (max-width:560px){
  .void-jump{ gap:10px; }
  .void-jump-note{ font-size:.98rem; }
}


/* ============================================================
   51. Art + matrix layer
   Real art under the pages, matrix texture inside the buttons,
   and a glitch pass on cards and headings. Everything here is
   additive: a pseudo-element or a background layer, never a
   change to an existing rule.
   ============================================================ */

/* ---- the plate behind every page ------------------------------------
   Each page sets --page-art; this paints it fixed behind everything at
   a low enough opacity to read as texture rather than a photo. */
body::before{
  content:'';
  position:fixed; inset:0; z-index:-3;
  background-image:var(--page-art, none);
  background-size:cover; background-position:center;
  opacity:.14;
  pointer-events:none;
}
/* a second, offset copy gives the plate a datamosh double-exposure */
body::after{
  content:'';
  position:fixed; inset:0; z-index:-2;
  background-image:var(--page-art, none);
  background-size:140% auto; background-position:18% 62%;
  opacity:.05; mix-blend-mode:screen;
  filter:hue-rotate(40deg);
  pointer-events:none;
}

/* ---- matrix inside the buttons --------------------------------------
   isolation:isolate makes each button its own stacking context, so the
   z-index:-1 texture sits above the button's background and below its
   label without escaping behind the button itself. */
.pill, .hero-pill, .latest-btn, .source-tab, .mmed-btn, .mmed-more,
.cs-cta, .void-jump-btn, .mn-tab, .ost-cta, .dl-btn, .credit-detail-btn,
.mmed-rail-item, .cs-sib{
  position:relative;
  isolation:isolate;
  overflow:hidden;
}
.pill::after, .hero-pill::after, .latest-btn::after, .source-tab::after,
.mmed-btn::after, .mmed-more::after, .cs-cta::after, .void-jump-btn::after,
.mn-tab::after, .ost-cta::after, .dl-btn::after, .credit-detail-btn::after,
/* .mn-ticker-item is deliberately not here: its ::after is the "//"
   separator between headlines, and a texture layered on the same
   pseudo-element overlays it. */
.mmed-rail-item::after, .cs-sib::after{
  content:'';
  position:absolute; inset:0; z-index:-1;
  background-image:
    repeating-linear-gradient(to bottom,
      rgba(0,0,0,.26) 0px, rgba(0,0,0,.26) 1px,
      rgba(0,0,0,0) 1px, rgba(0,0,0,0) 3px),
    url('/assets/art/matrix-rain.webp');
  background-size:auto auto, auto 150%;
  background-position:0 0, 0 0;
  opacity:.14;
  mix-blend-mode:screen;
  pointer-events:none;
  transition:opacity .28s ease;
}
.pill:hover::after, .hero-pill:hover::after, .latest-btn:hover::after,
.source-tab:hover::after, .mmed-btn:hover::after, .mmed-more:hover::after,
.cs-cta:hover::after, .void-jump-btn:hover::after, .mn-tab:hover::after,
.ost-cta:hover::after, .dl-btn:hover::after, .credit-detail-btn:hover::after,
.mmed-rail-item:hover::after, .cs-sib:hover::after,
.source-tab.active::after, .mn-tab.active::after{
  opacity:.42;
  animation:mxRain 2.4s linear infinite;
}
@keyframes mxRain{
  from{ background-position:0 0, 0 0; }
  to{ background-position:0 0, 0 150%; }
}

/* Scanlines ride on the same ::after as the matrix, layered over the
   texture. They used to be a `background-image` on the button itself, which
   silently replaced the two-layer gradient that paints the animated borders -
   that is what flattened the Void button's purple. Never touch a button's
   own background from here. */

/* ---- glitch sweep on the cards --------------------------------------
   One pass of the glitch plate slides across on hover, clipped to the
   card, so the art shows up where someone is already looking. */
.card, .album-card, .track-card, .game-card, .door, .mmed-day, .mn-item,
.latest-single, .credit-row, .plugin-card{
  position:relative;
  isolation:isolate;
  overflow:hidden;
}
.card::after, .album-card::after, .track-card::after, .game-card::after,
.door::after, .mmed-day::after, .mn-item::after, .latest-single::after,
.credit-row::after, .plugin-card::after{
  content:'';
  position:absolute; inset:0; z-index:-1;
  background-image:var(--card-art, url('/assets/art/nodes.webp'));
  background-size:cover; background-position:center;
  opacity:0;
  mix-blend-mode:screen;
  pointer-events:none;
  transition:opacity .35s ease, transform .5s ease;
  transform:translateX(-4%) scale(1.04);
}
.card:hover::after, .album-card:hover::after, .track-card:hover::after,
.game-card:hover::after, .door:hover::after, .mmed-day:hover::after,
.mn-item:hover::after, .latest-single:hover::after, .credit-row:hover::after,
.plugin-card:hover::after{
  opacity:.2;
  transform:translateX(0) scale(1);
}

/* ---- headings take a chromatic split on hover ----------------------- */
.section-head h2:hover, .mn-feed-head:hover, .mmed-day-n:hover{
  animation:mxSplit .5s steps(2,end) 1;
}
@keyframes mxSplit{
  0%  { text-shadow:0 0 0 rgba(0,0,0,0); }
  25% { text-shadow:-3px 0 rgba(255,32,73,.85), 3px 0 rgba(0,229,255,.8); }
  50% { text-shadow:2px 0 rgba(255,32,73,.7), -2px 0 rgba(0,255,95,.7); }
  75% { text-shadow:-2px 0 rgba(0,229,255,.7), 2px 0 rgba(255,32,73,.6); }
  100%{ text-shadow:0 0 0 rgba(0,0,0,0); }
}

/* ---- a node-diagram rule between sections --------------------------- */
.mx-divider{
  height:64px; margin:8px 0;
  background:url('/assets/art/nodes.webp') center/cover no-repeat;
  opacity:.22;
  mask-image:linear-gradient(90deg, transparent, #000 18%, #000 82%, transparent);
  -webkit-mask-image:linear-gradient(90deg, transparent, #000 18%, #000 82%, transparent);
  pointer-events:none;
}

/* ---- respect a reduced-motion preference ---------------------------- */
@media (prefers-reduced-motion: reduce){
  .pill:hover::after, .hero-pill:hover::after, .latest-btn:hover::after,
  .source-tab:hover::after, .mmed-btn:hover::after, .mmed-more:hover::after,
  .cs-cta:hover::after, .void-jump-btn:hover::after, .mn-tab:hover::after,
  .ost-cta:hover::after, .dl-btn:hover::after, .credit-detail-btn:hover::after,
  .mmed-rail-item:hover::after, .cs-sib:hover::after,
  .source-tab.active::after, .mn-tab.active::after{ animation:none; }
  .section-head h2:hover, .mn-feed-head:hover, .mmed-day-n:hover{ animation:none; }
}

/* the plates are texture, not content - drop them on a small screen so
   a phone is not decoding two full-bleed images for decoration */
@media (max-width:560px){
  body::after{ display:none; }
  body::before{ opacity:.1; }
}

/* ============================================================
   52. Stay-human line + a lighter matrix where it crowds
   ============================================================ */

/* sits right under the boot line, in the one warm colour on the page */
.mn-human{
  padding:6px clamp(14px,2.4vw,24px) 0;
  font-family:'VT323','JetBrains Mono',monospace;
  font-size:1.02rem; letter-spacing:.12em; text-transform:uppercase;
  color:#ff9d2e; -webkit-text-fill-color:#ff9d2e;
  text-shadow:0 0 10px rgba(255,157,46,.5);
}

/* The platform tabs carry their own colour, so a full-strength matrix wash
   over them muddies it. Keep the texture, halve it, and skip the animation. */
.source-tab::after{ opacity:.06; }
.source-tab:hover::after, .source-tab.active::after{ opacity:.14; animation:none; }

/* the line that appears only when a browser refuses to autoplay the theme */
.ost-autoplay-note{
  margin-top:10px;
  font-family:'JetBrains Mono',monospace; font-size:.62rem; letter-spacing:.1em;
  text-transform:uppercase;
  color:#ff9d2e; -webkit-text-fill-color:#ff9d2e;
}
.ost-autoplay-note[hidden]{ display:none; }

/* ============================================================
   53. Production & art credits page
   ============================================================ */

/* the green link that leads here from the track list */
.credits-link{
  display:block; margin-top:8px;
  font-family:'JetBrains Mono',monospace; font-size:.72rem; letter-spacing:.08em;
  color:#00ff5f !important; -webkit-text-fill-color:#00ff5f !important;
  text-decoration:none; text-shadow:0 0 10px rgba(0,255,95,.4);
}
.credits-link:hover{ text-decoration:underline; }

.cr-head{ max-width:980px; }
.cr-intro{
  max-width:760px; margin-top:20px;
  font-family:'VT323',monospace; font-size:1.12rem; line-height:1.6;
  color:#b9dcd4; -webkit-text-fill-color:#b9dcd4;
}
.cr-stats{ display:flex; flex-wrap:wrap; gap:8px; margin-top:28px; max-width:820px; }
.cr-stat{
  flex:1 1 160px; padding:13px 16px;
  border:1px solid var(--mac-line, rgba(0,229,255,.22)); border-radius:3px;
  background:rgba(4,12,14,.72);
}
.cr-stat-k{
  font-family:var(--mac-font,'JetBrains Mono',monospace);
  font-size:.42rem; letter-spacing:.2em; text-transform:uppercase;
  color:#6d8f88; -webkit-text-fill-color:#6d8f88; margin-bottom:6px;
}
.cr-stat-v{
  font-family:'VT323',monospace; font-size:1.3rem;
  color:#fff; -webkit-text-fill-color:#fff;
}

.cr-shell{ padding:0 clamp(14px,6vw,64px) 80px; }
.cr-bar{
  display:flex; flex-wrap:wrap; gap:12px; align-items:center;
  position:sticky; top:72px; z-index:20;
  padding:12px 0; margin-bottom:18px;
  background:linear-gradient(180deg, rgba(3,6,10,.96) 70%, rgba(3,6,10,0));
}
.cr-search{ position:relative; flex:1 1 280px; }
.cr-search input, #crFilter{
  width:100%; padding:11px 14px;
  background:rgba(4,12,14,.86);
  border:1px solid var(--mac-line, rgba(0,229,255,.22)); border-radius:3px;
  font-family:'VT323',monospace; font-size:1.06rem;
  color:#cfeee4; -webkit-text-fill-color:#cfeee4;
}
#crFilter{ width:auto; flex:0 0 auto; cursor:pointer; }
.cr-search input:focus, #crFilter:focus{ outline:none; border-color:var(--mx-cyan,#00e5ff); }
.cr-count{
  font-family:var(--mac-font,'JetBrains Mono',monospace);
  font-size:.44rem; letter-spacing:.16em; text-transform:uppercase;
  color:#6d8f88; -webkit-text-fill-color:#6d8f88; margin-left:auto;
}

.cr-list{ display:flex; flex-direction:column; gap:12px; }
.cr-loading, .cr-empty{
  padding:8vh 0; text-align:center;
  font-family:'VT323',monospace; font-size:1.1rem;
  color:#6d8f88; -webkit-text-fill-color:#6d8f88;
}

.cr-track{
  border:1px solid var(--mac-line, rgba(0,229,255,.22)); border-radius:3px;
  background:rgba(4,12,14,.72);
}
/* a track whose credits are written gets a lit edge, so progress is visible
   at a glance while this page is being filled in */
.cr-track.has-credits{ border-left:2px solid #00ff5f; }

.cr-track-head{ display:flex; gap:16px; padding:16px; align-items:flex-start; }
.cr-art{
  width:96px; height:96px; flex:0 0 96px; object-fit:cover;
  border:1px solid var(--mac-line, rgba(0,229,255,.22)); border-radius:2px;
  background:#01060a;
}
.cr-art-none{ display:block; }
.cr-track-meta{ min-width:0; flex:1; }
.cr-title{
  font-family:'VT323','JetBrains Mono',monospace;
  font-size:1.5rem; line-height:1.15; margin:0 0 4px;
  color:#fff; -webkit-text-fill-color:#fff;
  text-shadow:-1px 0 rgba(255,0,60,.4), 1px 0 rgba(0,229,255,.35);
}
.cr-date{
  font-family:var(--mac-font,'JetBrains Mono',monospace);
  font-size:.4rem; letter-spacing:.16em; text-transform:uppercase;
  color:#4f7c72; -webkit-text-fill-color:#4f7c72; margin-bottom:9px;
}
.cr-wheres{ display:flex; flex-wrap:wrap; gap:7px; }
.cr-where{
  padding:5px 10px; border-radius:2px;
  border:1px solid rgba(0,229,255,.28);
  font-family:var(--mac-font,'JetBrains Mono',monospace);
  font-size:.38rem; letter-spacing:.14em; text-transform:uppercase;
  text-decoration:none;
  color:#9fd8cc; -webkit-text-fill-color:#9fd8cc;
  transition:color .2s, border-color .2s;
}
.cr-where:hover{ color:#00ff5f; -webkit-text-fill-color:#00ff5f; border-color:#00ff5f; }
.cr-where-none{
  font-family:'VT323',monospace; font-size:.95rem;
  color:#4f7c72; -webkit-text-fill-color:#4f7c72;
}

.cr-blocks{
  display:grid; grid-template-columns:repeat(auto-fit, minmax(260px,1fr));
  gap:1px; background:var(--mac-line-soft, rgba(0,229,255,.12));
  border-top:1px solid var(--mac-line, rgba(0,229,255,.22));
}
.cr-block{ padding:14px 16px; background:rgba(2,8,11,.86); }
.cr-block-k{
  font-family:var(--mac-font,'JetBrains Mono',monospace);
  font-size:.4rem; letter-spacing:.2em; text-transform:uppercase;
  color:#6d8f88; -webkit-text-fill-color:#6d8f88; margin-bottom:8px;
}
.cr-lines{ margin:0; padding-left:16px; }
.cr-lines li{
  font-family:'VT323',monospace; font-size:1.02rem; line-height:1.5;
  color:#cfeee4; -webkit-text-fill-color:#cfeee4;
}
.cr-todo{
  font-family:var(--mac-font,'JetBrains Mono',monospace);
  font-size:.42rem; letter-spacing:.18em; text-transform:uppercase;
  color:#ff9d2e; -webkit-text-fill-color:#ff9d2e;
  text-shadow:0 0 9px rgba(255,157,46,.4);
}

@media (max-width:560px){
  .cr-bar{ position:static; }
  .cr-art{ width:68px; height:68px; flex-basis:68px; }
  .cr-title{ font-size:1.25rem; }
}

/* the entry bar that marks a MINDNET post which also exists standalone */
.anw-entry-bar{
  display:flex; flex-wrap:wrap; align-items:center; gap:14px;
  padding:14px clamp(14px,6vw,64px);
  border-bottom:1px solid var(--mac-line, rgba(0,229,255,.22));
  background:rgba(2,8,11,.7);
  font-family:'JetBrains Mono',monospace; font-size:.62rem; letter-spacing:.12em;
  text-transform:uppercase;
}
.anw-entry-bar a{ color:#8dffc4; -webkit-text-fill-color:#8dffc4; text-decoration:none; }
.anw-entry-bar a:hover{ text-decoration:underline; }
.anw-id{ color:#00ff5f; -webkit-text-fill-color:#00ff5f; text-shadow:0 0 8px rgba(0,255,95,.5); }
.anw-entry-bar time{ color:#6d8f88; -webkit-text-fill-color:#6d8f88; }
.anw-standalone{ margin-left:auto; }

/* ============================================================
   54. MINDNET wire on the homepage
   ============================================================ */
.wire{
  position:relative; overflow:hidden;
  border:1px solid var(--mac-line, rgba(0,229,255,.22));
  border-radius:3px;
  background:linear-gradient(90deg, rgba(0,255,95,.07), rgba(0,0,0,0) 60%), rgba(2,8,11,.8);
}
.wire-track{
  display:flex; width:max-content;
  animation:wireCrawl 40s linear infinite;
}
.wire:hover .wire-track, .wire:focus-within .wire-track{ animation-play-state:paused; }
@keyframes wireCrawl{ from{ transform:translateX(0); } to{ transform:translateX(-50%); } }

.wire-item{
  display:inline-flex; align-items:baseline; gap:11px;
  padding:14px 0; text-decoration:none; white-space:nowrap;
}
.wire-item::after{
  content:'//'; margin:0 30px;
  font-family:var(--mac-font,'JetBrains Mono',monospace); font-size:.38rem;
  color:#2f5b52; -webkit-text-fill-color:#2f5b52;
}
.wire-code{
  font-family:var(--mac-font,'JetBrains Mono',monospace);
  font-size:.4rem; letter-spacing:.18em;
  color:#00ff5f; -webkit-text-fill-color:#00ff5f;
  text-shadow:0 0 8px rgba(0,255,95,.5);
}
.wire-title{
  font-family:'VT323',monospace; font-size:1.14rem; letter-spacing:.02em;
  color:#e9f7f2; -webkit-text-fill-color:#e9f7f2; transition:color .2s;
}
.wire-item:hover .wire-title{ color:#fff; -webkit-text-fill-color:#fff; text-decoration:underline; }
.wire-date{
  font-family:var(--mac-font,'JetBrains Mono',monospace);
  font-size:.38rem; letter-spacing:.14em; text-transform:uppercase;
  color:#4f7c72; -webkit-text-fill-color:#4f7c72;
}
.wire-loading{
  display:inline-block; padding:14px 18px;
  font-family:'VT323',monospace; font-size:1.02rem;
  color:#6d8f88; -webkit-text-fill-color:#6d8f88;
}
.wire-all{
  display:inline-block; margin-top:16px;
  font-family:var(--mac-font,'JetBrains Mono',monospace);
  font-size:.44rem; letter-spacing:.16em; text-transform:uppercase;
  text-decoration:none;
  color:#8dffc4; -webkit-text-fill-color:#8dffc4;
}
.wire-all:hover{ color:#00e5ff; -webkit-text-fill-color:#00e5ff; }
@media (prefers-reduced-motion: reduce){
  .wire{ overflow-x:auto; }
  .wire-track{ animation:none; }
}

/* ============================================================
   55. Wizard Warrior trailer
   The cover art used to sit in the OST grid's 260px column. A
   16:9 video there would be ~260x146, so the trailer runs full
   width above the grid and the grid drops to one column.
   ============================================================ */
.ost-video{ margin:0 0 26px; }
.ost-stage{
  position:relative; width:100%; aspect-ratio:16/9;
  border:1px solid var(--mac-line); border-radius:3px;
  background:#01060a; overflow:hidden;
  box-shadow:var(--mac-shadow);
}
.ost-stage iframe{ position:absolute; inset:0; width:100%; height:100%; border:0; }
.ost-thumb{
  position:absolute; inset:0; width:100%; height:100%; padding:0;
  border:0; background:#01060a; cursor:pointer; display:block;
}
.ost-thumb img{
  width:100%; height:100%; object-fit:cover; display:block;
  opacity:.84; transition:opacity .25s, transform .4s;
}
.ost-thumb:hover img{ opacity:1; transform:scale(1.02); }
.ost-play{
  position:absolute; left:50%; top:50%; transform:translate(-50%,-50%);
  width:74px; height:74px; border-radius:50%;
  display:flex; align-items:center; justify-content:center;
  background:rgba(4,12,14,.72);
  border:1px solid var(--mx-cyan,#00e5ff);
  box-shadow:0 0 26px rgba(0,229,255,.4);
  transition:transform .25s, box-shadow .25s;
}
.ost-thumb:hover .ost-play{
  transform:translate(-50%,-50%) scale(1.08);
  box-shadow:0 0 40px rgba(0,229,255,.6);
}
.ost-play svg{ width:30px; height:30px; fill:#e9f7f2; margin-left:3px; }
/* the scanline overlay belongs to the art, not the video */
.ost-video .ost-stage::after{ content:none; }
.ost-video-link{
  display:inline-block; margin-top:10px;
  font-family:var(--mac-font,'JetBrains Mono',monospace);
  font-size:.42rem; letter-spacing:.16em; text-transform:uppercase;
  text-decoration:none;
  color:#8dffc4; -webkit-text-fill-color:#8dffc4;
}
.ost-video-link:hover{ color:#00e5ff; -webkit-text-fill-color:#00e5ff; }

/* the grid lost its art column */
.ost.ost-novideo{ grid-template-columns:1fr; }

/* credit line above the trailer, now that the standalone player is gone */
.ost-trailer-credit{
  margin:0 0 10px;
  font-family:var(--mac-font,'JetBrains Mono',monospace);
  font-size:.46rem; letter-spacing:.16em; text-transform:uppercase;
  color:#8dffc4; -webkit-text-fill-color:#8dffc4;
  text-shadow:0 0 9px rgba(0,255,95,.35);
}

/* ============================================================
   56. Nav fits on one line between the drawer and wide desktop
   Two dropdowns plus five links plus two pills plus the logo is
   more than ~1300px of bar at full size, so it wrapped to two
   rows anywhere between the 900px drawer breakpoint and a wide
   screen. This tier tightens type and gaps rather than hiding
   anything, and stops the logo breaking mid-phrase.
   ============================================================ */
/* The Void and Contact are self-painted pills - two-layer gradient borders,
   their own padding and an animation. Shrinking them with the plain links
   flattens that, so :not() keeps them out of both tiers and only the plain
   links and the dropdown triggers give up width. */
@media (min-width:901px) and (max-width:1340px){
  header{ padding-left:3vw; padding-right:3vw; }
  header nav{ gap:0; }
  header nav a:not(.nav-void):not(.nav-contact),
  header nav .nav-dropdown-trigger{
    font-size:.6rem;
    letter-spacing:.06em;
  }
  header nav .nav-divider{ margin:0 7px; }
  .logo{ white-space:nowrap; font-size:.92rem; }
}

@media (min-width:901px) and (max-width:1120px){
  header nav a:not(.nav-void):not(.nav-contact),
  header nav .nav-dropdown-trigger{ font-size:.55rem; letter-spacing:.04em; }
  header nav .nav-divider{ margin:0 5px; }
  .logo{ font-size:.82rem; }
}

/* the logo is a phrase, not a sentence - never break it mid-way */
.logo{ white-space:nowrap; }


/* In the drawer the two menus read top to bottom, and Universe comes first
   there. The DOM order is the desktop order (Laboratory then Universe), so
   this flips just the drawer with flex order rather than duplicating markup. */
@media (max-width:900px){
  header nav.open{ display:flex; flex-direction:column; }
  header nav.open > *{ order:2; }
  header nav.open > .nav-void{ order:0; }
  header nav.open > a.home{ order:1; }
  header nav.open > #navUniverseDropdown{ order:6; }
  header nav.open > #navLabsDropdown{ order:7; }
  header nav.open > .nav-contact{ order:9; }
}

/* ============================================================
   57. Ticker legibility + the stay-human line inline
   ============================================================ */

/* The kicker was .4rem against a 1.04rem title and 9px apart, so it read as
   a cramped afterthought. It becomes a proper chip, closer in size, with
   room around it. */
.mn-ticker-item{ gap:12px; }
.mn-tk-k{
  font-size:.74rem;
  letter-spacing:.12em;
  padding:3px 8px;
  border:1px solid rgba(0,255,95,.35);
  border-radius:2px;
  background:rgba(0,255,95,.08);
  line-height:1.5;
  white-space:nowrap;
}
.mn-tk-t{ font-size:1.12rem; }

/* The separator does the spacing between headlines, so give it room that
   suits the new chip size. */
.mn-ticker-item::after{ margin:0 26px 0 30px; }

/* the stay-human line sits on the boot line now, so it matches its size and
   colour and only differs in hue */
.mn-boot .mn-human{
  padding:0;
  font-family:inherit;
  font-size:inherit;
  letter-spacing:inherit;
  text-transform:none;
  color:#ff9d2e; -webkit-text-fill-color:#ff9d2e;
  text-shadow:0 0 10px rgba(255,157,46,.5);
}
@media (max-width:640px){
  /* on a phone the two lines together overflow, so let them wrap */
  .mn-boot{ flex-wrap:wrap; }
}

/* a build screenshot, on a plugin page and in an article */
.cs-shot, .article-shot{
  margin:34px auto 0; max-width:900px; width:100%;
}
.article-shot{ margin:28px 0; }
.cs-shot img, .article-shot img{
  display:block; width:100%; height:auto;
  border:1px solid var(--mac-line, rgba(0,229,255,.22)); border-radius:3px;
  box-shadow:var(--mac-shadow, 4px 4px 0 rgba(0,0,0,.5));
}
.cs-shot figcaption, .article-shot figcaption{
  margin-top:9px; text-align:left;
  font-family:'JetBrains Mono',monospace; font-size:.62rem; line-height:1.6;
  color:var(--muted,#6d8f88); -webkit-text-fill-color:currentColor;
}