/* Wretched Rhythms — main styles (v2.1.1) */

  :root{
    --void:#0a0a0b; --void-2:#070708; --scar:#14160f;
    --ash:#d8d4c8; --ash-dim:#7c7a70;
    --rot:#9fd400; --rot-deep:#5e7d00;
    --blood:#6b0f0f; --blood-bright:#b51616; --blood-text:#e0454a;
    --uv:#5b2a86; --bpm:220;
  }
  *{box-sizing:border-box;}
  html{scroll-behavior:smooth;}
  body{
    margin:0; color:var(--ash);
    font-family:"Space Mono",ui-monospace,monospace; font-size:16px; line-height:1.6;
    overflow-x:hidden; padding-bottom:88px; -webkit-font-smoothing:antialiased;
    background:
      linear-gradient(rgba(7,7,8,.52), rgba(7,7,8,.52)),
      url("/assets/site-bg.jpg") center center / cover no-repeat fixed,
      var(--void);
  }

  .bruise{ position:fixed; inset:0; z-index:0; pointer-events:none;
    background:
      radial-gradient(60vw 60vw at 78% -10%, rgba(91,42,134,.20), transparent 60%),
      radial-gradient(50vw 50vw at 10% 110%, rgba(107,15,15,.22), transparent 55%),
      radial-gradient(40vw 40vw at 50% 50%, rgba(159,212,0,.05), transparent 70%);
  }
  .grain{ position:fixed; inset:0; z-index:1; pointer-events:none; opacity:.10; mix-blend-mode:overlay;
    background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='3'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  }

  .fog{ position:fixed; inset:-25%; z-index:2; pointer-events:none; mix-blend-mode:screen; opacity:.55; }
  .fog b{ position:absolute; display:block; border-radius:50%; filter:blur(70px); will-change:transform;
    background:radial-gradient(circle at 50% 50%, rgba(150,160,148,.16), rgba(91,42,134,.05) 45%, transparent 68%); }
  .fog b:nth-child(1){ width:70vw; height:70vw; left:-15%; top:5%;  animation:drift1 70s ease-in-out infinite; }
  .fog b:nth-child(2){ width:80vw; height:80vw; right:-20%; top:25%; animation:drift2 95s ease-in-out infinite; background:radial-gradient(circle,rgba(120,140,120,.14),transparent 65%); }
  .fog b:nth-child(3){ width:55vw; height:55vw; left:20%; bottom:-10%; animation:drift3 110s ease-in-out infinite; }
  .fog b:nth-child(4){ width:60vw; height:60vw; right:10%; bottom:5%; animation:drift1 88s ease-in-out infinite reverse; background:radial-gradient(circle,rgba(140,150,138,.12),rgba(107,15,15,.04) 50%,transparent 66%); }
  .fog b:nth-child(5){ width:90vw; height:50vw; left:-10%; top:45%; animation:drift2 130s ease-in-out infinite; opacity:.7; }
  @keyframes drift1{ 0%,100%{ transform:translate(0,0) scale(1);} 50%{ transform:translate(14vw,-6vh) scale(1.15);} }
  @keyframes drift2{ 0%,100%{ transform:translate(0,0) scale(1.05);} 50%{ transform:translate(-12vw,8vh) scale(.92);} }
  @keyframes drift3{ 0%,100%{ transform:translate(0,0) scale(1);} 50%{ transform:translate(8vw,10vh) scale(1.2);} }

  .scanlines{ position:fixed; inset:0; z-index:3; pointer-events:none; opacity:.30;
    background:repeating-linear-gradient(0deg, rgba(0,0,0,0) 0 2px, rgba(0,0,0,.45) 3px 4px); }
  main,header,footer,.player{position:relative; z-index:4;}

  /* interactive GPU smoke trail (recoloured Smoke Streams fluid sim) */
  #fluid{ position:fixed; inset:0; width:100%; height:100%; z-index:5; pointer-events:none; mix-blend-mode:screen; }
  @media (prefers-reduced-motion:reduce){ #fluid{ display:none; } }

  /* transparent logo mark — fixed top-centre, pulses to the track's bass via logo-pulse.js */
  #skull-logo{ position:fixed; left:50%; top:3vh; z-index:0; pointer-events:none;
    max-width:35vmin; max-height:35vmin; width:auto; height:auto;
    transform:translate(-50%,0); will-change:transform,filter;
    filter:drop-shadow(0 0 30px rgba(159,212,0,.25)); }
  @media (prefers-reduced-motion:reduce){ #skull-logo{ display:none; } }

  @keyframes throb{ 0%,100%{ transform:scale(1); opacity:.55; } 18%{ transform:scale(1.06); opacity:.95; } 40%{ transform:scale(1); opacity:.55; } }
  .pulse-ring{ position:absolute; left:50%; top:50%; width:min(70vw,560px); aspect-ratio:1; translate:-50% -50%; border-radius:50%; z-index:-1;
    background:radial-gradient(circle, rgba(181,22,22,.30), rgba(91,42,134,.10) 45%, transparent 68%); animation:throb .2727s steps(60) infinite; filter:blur(6px); }

  a{color:inherit;}
  :focus-visible{ outline:2px solid var(--rot); outline-offset:3px; }
  .skip{position:absolute; left:-9999px; top:0; background:var(--rot); color:#000; padding:.5rem 1rem; z-index:99;}
  .skip:focus{left:1rem; top:1rem;}

  header{ position:sticky; top:0; z-index:40; display:flex; align-items:center; justify-content:space-between;
    padding:.75rem clamp(1rem,4vw,3rem); border-bottom:1px solid #20221a; background:rgba(7,7,8,.72); backdrop-filter:blur(8px); }
  .brandmark{ font-family:"Pirata One",serif; font-size:1.6rem; letter-spacing:.02em; color:var(--ash); text-decoration:none; line-height:1; }
  .brandmark span{color:var(--blood-bright);}
  nav{display:flex; gap:clamp(.8rem,2vw,1.8rem); font-size:.72rem; text-transform:uppercase; letter-spacing:.22em;}
  nav a{text-decoration:none; color:var(--ash-dim); transition:color .15s;}
  nav a:hover{color:var(--rot);}
  .nav-toggle{ display:none; align-items:center; justify-content:center;
    width:38px; height:38px; padding:0; margin-left:1rem; flex:0 0 auto;
    background:transparent; border:1px solid #2a2c22; color:var(--ash);
    font-size:1rem; line-height:1; cursor:pointer; transition:.15s; }
  .nav-toggle:hover{ border-color:var(--rot); color:var(--rot); }
  .nav-toggle[aria-expanded="true"]{ border-color:var(--rot); color:var(--rot); }
  .bpm-live{ display:flex; align-items:center; gap:.5rem; font-size:.7rem; letter-spacing:.2em; color:var(--ash-dim); text-transform:uppercase; }
  .bpm-dot{ width:9px; height:9px; border-radius:50%; background:var(--blood-bright); animation:throb .2727s steps(30) infinite; box-shadow:0 0 10px var(--blood-bright);}

  .hero{ min-height:92vh; display:flex; flex-direction:column; justify-content:center; padding:5rem clamp(1rem,5vw,4rem) 3rem; position:relative; isolation:isolate; }
  .eyebrow{ font-size:.72rem; letter-spacing:.4em; text-transform:uppercase; color:var(--rot); display:flex; gap:1rem; align-items:center; }
  .eyebrow::before,.eyebrow::after{content:""; height:1px; flex:0 0 2.2rem; background:var(--rot-deep);}
  .wordmark{ font-family:"Pirata One",serif; font-weight:400; font-size:clamp(3.2rem,15vw,11rem); line-height:.86; margin:.4em 0 .15em;
    letter-spacing:-.01em; position:relative; color:var(--ash); text-shadow:0 0 40px rgba(91,42,134,.4); }
  .wordmark .r2{ display:block; color:var(--blood-bright); }
  .glitch{position:relative;}
  .glitch::before,.glitch::after{ content:attr(data-text); position:absolute; inset:0; pointer-events:none; clip-path:inset(0 0 0 0); }
  .glitch::before{ color:var(--rot); transform:translate(-2px,0); mix-blend-mode:screen; opacity:0;}
  .glitch::after{ color:#19a0c4; transform:translate(2px,0); mix-blend-mode:screen; opacity:0;}
  @keyframes glitchflick{ 0%,92%,100%{ opacity:0; clip-path:inset(0 0 100% 0); }
    93%{ opacity:.85; clip-path:inset(10% 0 60% 0); transform:translate(-4px,1px);}
    95%{ opacity:.7;  clip-path:inset(70% 0 8% 0);  transform:translate(5px,-1px);}
    97%{ opacity:.8;  clip-path:inset(35% 0 40% 0); transform:translate(-3px,0);} }
  .glitch::before{ animation:glitchflick 5.2s infinite; }
  .glitch::after{ animation:glitchflick 5.2s infinite .06s; }

  .hero-tag{ max-width:46ch; font-size:clamp(.95rem,1.4vw,1.15rem); color:var(--ash); border-left:2px solid var(--blood); padding-left:1rem; margin:1.2rem 0 2rem; }
  .hero-tag b{color:var(--rot); font-weight:700;}
  .hero-actions{display:flex; flex-wrap:wrap; gap:1rem; align-items:center; margin-top:1.4rem;}
  .btn{ display:inline-block; font-family:"Space Mono",monospace; font-size:.78rem; letter-spacing:.2em; text-transform:uppercase; text-decoration:none;
    padding:.85rem 1.6rem; border:1px solid var(--rot); color:var(--rot); background:transparent; cursor:pointer; transition:.18s; }
  .btn:hover{ background:var(--rot); color:#000; box-shadow:0 0 24px rgba(159,212,0,.35);}
  .btn-ghost{ border-color:#2a2c22; color:var(--ash-dim);}
  .btn-ghost:hover{ border-color:var(--ash); color:var(--ash); background:transparent; box-shadow:none;}

  .hero-stats{ display:flex; gap:clamp(1.5rem,5vw,4rem); margin-top:3.5rem; flex-wrap:wrap; font-size:.72rem; letter-spacing:.18em; text-transform:uppercase; color:var(--ash-dim); }
  .hero-stats b{display:block; font-family:"Anton",sans-serif; font-size:2.2rem; letter-spacing:.02em; color:var(--ash); line-height:1;}
  section{padding:clamp(4rem,9vw,7rem) clamp(1rem,5vw,4rem); border-top:1px solid #1b1d15;}

  /* ── glass text panels ── only on the actual text containers, not full sections */
  .sec-head,
  .hero-tag,
  .hero-stats,
  .manifesto .lead,
  .manifesto .body,
  .submit-copy,
  .intake,
  .book-form{
    background:rgba(7,7,8,.40);
    backdrop-filter:blur(16px);
    -webkit-backdrop-filter:blur(16px);
    border:1px solid rgba(255,255,255,.05);
    padding:1.2rem 1.4rem;
  }
  /* hero text breathing room */
  .hero-tag{ margin:1.2rem 0 0; max-width:50ch; }
  .hero-stats{ margin-top:1.8rem; }
  /* sec-head: eyebrow-above-title column layout, shrinks to content width */
  .sec-head{display:inline-flex; flex-direction:column; gap:0.4rem; margin-bottom:2rem; max-width:100%;}
  .sec-no{font-size:.72rem; letter-spacing:.3em; color:var(--rot); padding:.25rem .6rem;}
  .sec-title{ font-family:"Anton",sans-serif; font-weight:400; text-transform:uppercase; font-size:clamp(1.8rem,5vw,3.4rem); line-height:.95; letter-spacing:.01em; margin:0;}
  .sec-sub{ color:var(--ash-dim); max-width:54ch; margin:.4rem 0 0; font-size:.92rem;}

  /* ── manifesto 2-column layout ── */
  .manifesto{ display:grid; grid-template-columns:1fr 1fr; gap:clamp(2rem,5vw,5rem); align-items:center; }
  .manifesto-content{ display:flex; flex-direction:column; gap:1.4rem; }
  .manifesto-content .sec-head{ display:flex; flex-direction:column; margin-bottom:0; }
  .manifesto-media{ display:flex; align-items:center; justify-content:center; }
  .manifesto-media video{ display:block; width:100%; max-width:600px; height:auto; mix-blend-mode:screen; }

  .manifesto p{ font-size:clamp(1.1rem,2.6vw,1.9rem); line-height:1.4; max-width:24ch; margin:0;}
  .manifesto .lead{ font-family:"Anton",sans-serif; text-transform:uppercase; max-width:none; display:block; width:auto;}
  .manifesto .lead em{ color:var(--blood-text); font-style:normal;}
  .manifesto .body{ font-size:1rem; line-height:1.7; color:var(--ash); max-width:none; margin-top:0; display:block; width:auto;}
  .manifesto .body b{color:var(--rot);}

  .roster{display:grid; grid-template-columns:repeat(auto-fit,minmax(280px,1fr)); gap:1px; background:#1b1d15;}
  .spec{ background:var(--void-2); padding:1.6rem 1.4rem 1.4rem; position:relative; overflow:hidden; transition:background .2s; }
  .spec::before{ content:""; position:absolute; inset:0 auto 0 0; width:3px; background:var(--blood); transition:background .2s, width .2s; }
  .spec:hover{ background:#0d0f0a; }
  .spec:hover::before{ background:var(--rot); width:5px; box-shadow:0 0 18px var(--rot);}
  .spec-id{ font-size:.68rem; letter-spacing:.22em; color:var(--ash-dim); display:flex; justify-content:space-between;}
  .spec-id .stat{ color:var(--blood-text);}
  .spec-name{ font-family:"Anton",sans-serif; text-transform:uppercase; font-size:1.9rem; line-height:1; margin:.7rem 0 .5rem; letter-spacing:.01em; color:var(--ash); position:relative; }
  .spec:hover .spec-name{ text-shadow:2px 0 var(--rot), -2px 0 #19a0c4;}
  .tag{ display:inline-block; font-size:.6rem; letter-spacing:.22em; text-transform:uppercase; border:1px solid #2a2c22; padding:.2rem .5rem; color:var(--ash-dim); margin:.15rem .3rem .15rem 0; }
  .tag.psycore{color:var(--blood-text); border-color:#41100f;}
  .tag.hitech{color:var(--rot); border-color:var(--rot-deep);}
  .tag.darkpsy{color:#9b7ec4; border-color:#33224a;}
  .spec-note{ font-size:.8rem; color:var(--ash-dim); margin:.9rem 0 0; line-height:1.5;}
  .spec-play{ margin-top:1.1rem; display:inline-flex; align-items:center; gap:.55rem; cursor:pointer; background:transparent; border:1px solid #2a2c22;
    color:var(--ash); font-family:"Space Mono",monospace; font-size:.66rem; letter-spacing:.2em; text-transform:uppercase; padding:.5rem .8rem; transition:.16s; }
  .spec-play:hover{ border-color:var(--rot); color:var(--rot); }

  .cat{ border-top:1px solid #1b1d15;}
  /* 7 children: ico | thumb | cat-no | cat-title(1fr) | cat-meta | play-count | share */
  .cat-row{ width:100%; text-align:left; background:transparent; border:0; border-bottom:1px solid #16180f; cursor:pointer;
    display:grid; grid-template-columns:2.2rem 5.5rem 4rem 1fr auto auto auto; gap:1rem; align-items:center; padding:1.1rem .4rem; color:inherit;
    font-family:"Space Mono",monospace; transition:background .15s, padding-left .15s; }
  .cat-row:hover{ background:#0e100a; padding-left:1rem;}
  .cat-row .ico{ color:var(--rot); font-size:.8rem; justify-self:center;}
  .cat-no{ font-size:.8rem; color:var(--rot); letter-spacing:.12em;}
  .cat-title{ font-family:"Anton",sans-serif; text-transform:uppercase; font-size:1.15rem; letter-spacing:.02em;}
  .cat-title small{ display:block; font-family:"Space Mono",monospace; font-size:.72rem; letter-spacing:.1em; color:var(--ash-dim); text-transform:none; margin-top:.15rem;}
  .cat-meta{ font-size:.72rem; color:var(--ash-dim); letter-spacing:.14em; text-align:right; text-transform:uppercase;}
  .cat-row:hover .cat-meta{ color:var(--blood-text);}
  .cat-row.is-playing{ background:#0e100a; }
  .cat-row.is-playing .ico{ color:var(--blood-text); }
  .cat-row.is-playing .cat-title{ color:var(--rot); }

  .submit-wrap{ display:grid; grid-template-columns:1.1fr .9fr; gap:clamp(2rem,5vw,4rem); align-items:center;}
  .submit-copy h3{ font-family:"Anton",sans-serif; text-transform:uppercase; font-size:clamp(1.6rem,4vw,2.6rem); margin:0 0 1rem; line-height:1;}
  .submit-copy p{ color:var(--ash); max-width:50ch;}
  .reqs{ list-style:none; padding:0; margin:1.4rem 0 0; font-size:.85rem;}
  .reqs li{ padding:.45rem 0 .45rem 1.6rem; position:relative; color:var(--ash-dim); border-bottom:1px dashed #1c1e16;}
  .reqs li::before{ content:"//"; position:absolute; left:0; color:var(--rot);}
  .reqs li b{color:var(--ash);}
  .intake{ border:1px solid var(--rot-deep); background:linear-gradient(180deg,#0c0e08,#070708); padding:1.8rem; font-size:.8rem; }
  .intake .line{ display:flex; justify-content:space-between; padding:.6rem 0; border-bottom:1px solid #16180f; color:var(--ash-dim); letter-spacing:.1em;}
  .intake .line span:last-child{ color:var(--rot);}
  .intake .btn{ width:100%; text-align:center; margin-top:30px;}

  .book-form{ display:grid; grid-template-columns:1fr 1fr; gap:1.4rem 1.6rem; border:1px solid var(--rot-deep);
    background:linear-gradient(180deg,#0c0e08,#070708); padding:1.8rem; }
  .book-row{ display:flex; flex-direction:column; gap:.5rem; }
  .book-row-full{ grid-column:1 / -1; }
  .book-row label{ font-size:.7rem; letter-spacing:.2em; text-transform:uppercase; color:var(--ash-dim); }
  .book-row input, .book-row select, .book-row textarea{
    background:var(--void-2); border:1px solid #2a2c22; color:var(--ash); padding:.7rem .8rem;
    font-family:"Space Mono",monospace; font-size:.85rem; }
  .book-row input:focus, .book-row select:focus, .book-row textarea:focus{ outline:none; border-color:var(--rot); }
  .book-row textarea{ resize:vertical; min-height:5rem; }
  .book-hp{ position:absolute; left:-9999px; width:1px; height:1px; overflow:hidden; }
  .book-form .btn{ grid-column:1 / -1; justify-self:start; }
  .book-status{ grid-column:1 / -1; margin:0; font-size:.8rem; letter-spacing:.05em; color:var(--ash-dim); min-height:1.2em; }
  .book-status.ok{ color:var(--rot); }
  .book-status.err{ color:var(--blood-text); }
  @media (max-width:720px){ .book-form{ grid-template-columns:1fr; } }

  footer{ background:#000; padding:3rem clamp(1rem,5vw,4rem); border-top:1px solid #1b1d15; display:grid; grid-template-columns:1.2fr 1fr 1fr; gap:3rem; align-items:start;}
  .foot-logo{ width:min(200px,100%); height:auto; display:block; mix-blend-mode:screen; }
  .foot-tagline{ font-size:.7rem; letter-spacing:.18em; text-transform:uppercase; color:var(--ash-dim); margin:.9rem 0 0; }
  .foot-nav{ display:flex; flex-direction:row; flex-wrap:wrap; gap:.4rem 1.8rem; }
  .foot-nav a{ font-size:.72rem; letter-spacing:.22em; text-transform:uppercase; color:var(--ash-dim); text-decoration:none; transition:color .15s; }
  .foot-nav a:hover{ color:var(--rot); }
  .foot-meta{ font-size:.7rem; letter-spacing:.16em; text-transform:uppercase; color:var(--ash-dim); text-align:right; line-height:2;}
  .foot-meta a{ text-decoration:none; color:var(--ash-dim);}
  .foot-meta a:hover{ color:var(--rot);}

  .player{ position:fixed; left:0; right:0; bottom:0; z-index:60; display:grid; grid-template-columns:minmax(0,1fr) auto minmax(0,1fr);
    align-items:center; gap:1rem; padding:.6rem clamp(.8rem,3vw,2rem); background:rgba(6,7,5,.92); backdrop-filter:blur(10px); border-top:1px solid var(--rot-deep); }
  .pl-now{ display:flex; align-items:center; gap:.85rem; min-width:0;}
  .pl-viz{ width:54px; height:40px; flex:0 0 auto; background:#0c0e08; border:1px solid #1b1d15; }
  .pl-meta{ min-width:0;}
  .pl-title{ font-family:"Anton",sans-serif; text-transform:uppercase; font-size:1rem; letter-spacing:.02em; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; color:var(--ash);}
  .pl-artist{ font-size:.68rem; letter-spacing:.14em; color:var(--ash-dim); text-transform:uppercase; white-space:nowrap; overflow:hidden; text-overflow:ellipsis;}
  .pl-src{ color:var(--blood-text); }
  .pl-transport{ display:flex; align-items:center; gap:.6rem; justify-self:center;}
  .pl-btn{ background:transparent; border:1px solid #2a2c22; color:var(--ash); width:34px; height:34px; cursor:pointer; display:grid; place-items:center; transition:.15s; font-size:.8rem; line-height:0;}
  .pl-btn:hover{ border-color:var(--rot); color:var(--rot);}
  .pl-play{ width:46px; height:46px; border-color:var(--rot); color:var(--rot); font-size:1rem;}
  .pl-play:hover{ background:var(--rot); color:#000;}
  .pl-mute.is-muted{ border-color:var(--blood); color:var(--blood-text); }
  .pl-right{ display:flex; align-items:center; gap:.8rem; justify-self:end; min-width:0;}
  .pl-time{ font-size:.66rem; letter-spacing:.1em; color:var(--ash-dim); white-space:nowrap;}
  .pl-bar{ flex:1; min-width:80px; height:5px; background:#1b1d15; position:relative; cursor:pointer;}
  .pl-fill{ position:absolute; inset:0 100% 0 0; background:linear-gradient(90deg,var(--rot-deep),var(--rot)); width:0;}
  .pl-vol{ width:72px; accent-color:var(--rot); cursor:pointer; }
  .pl-vol-wrap{ display:flex; align-items:center; gap:.4rem; color:var(--ash-dim); font-size:.7rem;}

  @media (max-width:860px){
    .player{ grid-template-columns:1fr auto; grid-template-areas:"now transport" "bar bar"; gap:.5rem 1rem; }
    .pl-now{ grid-area:now;} .pl-transport{ grid-area:transport;}
    .pl-right{ grid-area:bar; justify-self:stretch;} .pl-vol-wrap{ display:none;}
  }
  @media (max-width:760px){
    .nav-toggle{ display:flex; }
    /* Mobile dropdown: plain display:none/flex toggle, not a max-height/opacity
       transition — the animated version measurably failed to expand in testing
       (rule matched, specificity was correct, but the browser never resolved
       max-height past 0 on a bare `nav{}` base overridden by `nav.nav-open{}`).
       Instant show/hide is completely reliable across engines, so that wins. */
    nav{ display:none; flex-direction:column; gap:0;
      position:absolute; left:0; right:0; top:100%;
      background:rgba(7,7,8,.97); backdrop-filter:blur(10px); -webkit-backdrop-filter:blur(10px);
      border-bottom:1px solid #20221a;
      max-height:70vh; overflow-y:auto;
    }
    nav.nav-open{ display:flex; }
    nav a{ padding:1rem clamp(1rem,4vw,3rem); border-top:1px solid #16180f; font-size:.78rem; }
    .submit-wrap{ grid-template-columns:1fr;}
    .manifesto{ grid-template-columns:1fr; }
    .manifesto-media{ display:none; }
    /* catalogue row: renderer.js appends .play-count + .share-wrap to live tracks,
       so this row can hold up to 7 children — stack title/meta/count+share across
       3 explicit rows instead of leaving the extra items to auto-place wherever. */
    .cat-row{ grid-template-columns:2rem 4rem 3.5rem 1fr; row-gap:.35rem; }
    .cat-meta{ grid-column:4; grid-row:2; text-align:left;}
    .cat-row .play-count{ grid-column:4; grid-row:3; justify-self:start; margin-left:0; }
    .cat-row .share-wrap{ grid-column:4; grid-row:3; justify-self:end; }
    footer{ grid-template-columns:1fr; gap:2rem; }
    .foot-meta{ text-align:left; }
  }
  @media (prefers-reduced-motion:reduce){
    *,*::before,*::after{ animation:none !important; }
    .pulse-ring{ opacity:.5; } .bpm-dot{ opacity:.9; } .fog b{ opacity:.4; }
  }

  /* uploaded brand artwork */
  .brandmark{ display:flex; align-items:center; }
  .brand-em{ height:34px; width:auto; display:block; filter:drop-shadow(0 0 6px rgba(0,0,0,.6)); }
  .wordmark-img{ margin:.3em 0 .2em; }
  .hero-logo{ display:block; width:min(94%, 920px); height:auto;
    -webkit-mask-image:radial-gradient(125% 94% at 50% 50%, #000 66%, transparent 100%);
            mask-image:radial-gradient(125% 94% at 50% 50%, #000 66%, transparent 100%); }
  @media (max-width:760px){ .hero-logo{ width:100%; } }

  /* lockup pushed back to a full-width fixed backdrop */
  .bg-lockup{ position:fixed; left:50%; top:50%; transform:translate(-50%,-50%); width:100vw; height:auto;
    z-index:0; opacity:.42; pointer-events:none; user-select:none;
    -webkit-mask-image:radial-gradient(120% 108% at 50% 50%, #000 55%, transparent 100%);
            mask-image:radial-gradient(120% 108% at 50% 50%, #000 55%, transparent 100%); }

  /* ─── base element transitions for entry ─── */
  header, main, footer{ transition: opacity 1.5s ease 0.4s; }
  .player{ transition: opacity 1.5s ease 0.7s; }
  #skull-logo { transition: opacity 3.4s ease 0.9s; }
  .bg-lockup{ transition: opacity 3s ease, filter 3s ease; }

  /* ─── before-entry: splash visible, everything else hidden ─── */
  body.before-entry{ overflow:hidden; }
  body.before-entry header,
  body.before-entry main,
  body.before-entry footer{ opacity:0; pointer-events:none; }
  body.before-entry .player{ opacity:0; pointer-events:none; }
  body.before-entry #skull-logo{ opacity:0; }
  body.before-entry .bg-lockup{
    opacity:1; filter:none;
    -webkit-mask-image:none; mask-image:none;
  }

  /* ─── entered: bg dims hard so the logo owns the space ─── */
  body.entered .bg-lockup{
    opacity:.10;
    filter:blur(6px) brightness(.22);
    -webkit-mask-image:radial-gradient(120% 108% at 50% 50%, #000 55%, transparent 100%);
            mask-image:radial-gradient(120% 108% at 50% 50%, #000 55%, transparent 100%);
  }

  /* ─── splash overlay ─── */
  .splash{
    position:fixed; inset:0; z-index:88; pointer-events:all;
    display:flex; flex-direction:column;
    align-items:center; justify-content:flex-end;
    padding-bottom:6vh;
    overflow:hidden;
    transition:opacity 1.2s ease;
  }
  .splash.exiting{ opacity:0; pointer-events:none; }
  /* video sits at the back; the gradient div darkens it toward the bottom so the
     disclaimer stays legible; both painted explicitly below .splash-content via z-index
     since a parent's own background always paints behind positioned children anyway. */
  .splash-bg{ position:absolute; inset:0; z-index:0; width:100%; height:100%; object-fit:cover; }
  .splash-overlay{ position:absolute; inset:0; z-index:1; pointer-events:none;
    background:linear-gradient(to bottom,
      rgba(7,7,8,.25) 18%,
      rgba(7,7,8,.55) 46%,
      rgba(7,7,8,.97) 80%);
  }
  .splash-content{ position:relative; z-index:2; text-align:center; max-width:600px; padding:0 1.6rem; }
  .splash-eyebrow{
    font-size:.68rem; letter-spacing:.36em; text-transform:uppercase;
    color:var(--rot); margin:0 0 1rem;
  }
  .splash-tagline{
    font-family:"Anton",sans-serif; text-transform:uppercase;
    font-size:clamp(1.3rem,3.2vw,2.2rem); letter-spacing:.03em;
    color:var(--ash); line-height:1.1; margin:0 0 1.2rem;
  }
  .splash-disclaimer{
    font-size:.72rem; letter-spacing:.09em; color:var(--ash-dim);
    line-height:1.85; margin:0 0 2.2rem;
  }
  .splash-actions{ display:flex; gap:1rem; justify-content:center; align-items:center; flex-wrap:wrap; }
  /* disabled "no" button */
  .btn-no{
    border-color:#1e201a !important; color:#2e302a !important;
    cursor:not-allowed !important; pointer-events:none; user-select:none;
  }
  /* tooltip wrapper — receives hover even though button is disabled */
  .no-wrap{ position:relative; display:inline-block; }
  .no-wrap::after{
    content:attr(data-tooltip);
    position:absolute; bottom:calc(100% + 10px); left:50%;
    transform:translateX(-50%);
    background:#0a0a0b; border:1px solid var(--blood);
    color:var(--blood-text); font-size:.63rem; letter-spacing:.14em;
    padding:.45rem .85rem; white-space:nowrap;
    opacity:0; pointer-events:none;
    transition:opacity .22s; z-index:99;
  }
  .no-wrap:hover::after{ opacity:1; }


  .spec-art{ display:block; width:calc(100% + 2.8rem); margin:-1.6rem -1.4rem .9rem;
    height:160px; object-fit:cover; object-position:center top; filter:grayscale(.35) contrast(1.1); }
  .spec:hover .spec-art{ filter:grayscale(0) contrast(1.05); transition:filter .3s; }
  .cat-thumb{ width:38px; height:38px; object-fit:cover; flex:0 0 38px;
    border:1px solid #1b1d15; filter:grayscale(.4); }
  .cat-row:hover .cat-thumb{ filter:grayscale(0); transition:filter .2s; }


  /* incoming artist cards */
  .spec.incoming::before{ background: var(--uv); }
  .spec.incoming:hover::before{ background: var(--uv); box-shadow: 0 0 18px var(--uv); }
  .incoming-stat{ color: #9b7ec4; }
  /* forthcoming catalogue rows — non-interactive */
  .cat-row.forthcoming{ cursor:default; border-bottom:1px dashed #16180f; opacity:.55; }
  .cat-row.forthcoming .ico{ color:#2a2c22; }
  .cat-row.forthcoming .cat-title{ color:var(--ash-dim); }
  .cat-row.forthcoming:hover{ background:transparent; padding-left:.4rem; }
  .cat-row.forthcoming:hover .cat-meta{ color:var(--ash-dim); }

  /* ── artist profile modal ── */
  .modal-overlay{
    position:fixed; inset:0; z-index:70; background:rgba(7,7,8,.78); backdrop-filter:blur(4px);
    opacity:0; pointer-events:none; transition:opacity .3s;
  }
  .modal-overlay.open{ opacity:1; pointer-events:all; }
  .modal-panel{
    position:absolute; right:0; top:0; height:100%; width:min(560px,100vw);
    background:var(--void-2); border-left:1px solid #1b1d15;
    overflow-y:auto; transform:translateX(100%);
    transition:transform .35s cubic-bezier(.22,.8,.3,1);
    display:flex; flex-direction:column;
  }
  .modal-overlay.open .modal-panel{ transform:translateX(0); }
  .modal-close{
    position:sticky; top:0; z-index:2; display:flex; justify-content:flex-end;
    padding:.75rem 1rem; background:rgba(7,7,8,.90); border-bottom:1px solid #1b1d15;
    backdrop-filter:blur(6px);
  }
  .modal-close-btn{
    background:transparent; border:1px solid #2a2c22; color:var(--ash-dim);
    font-family:"Space Mono",monospace; font-size:.68rem; letter-spacing:.2em;
    text-transform:uppercase; padding:.4rem .9rem; cursor:pointer; transition:.15s;
  }
  .modal-close-btn:hover{ border-color:var(--blood-bright); color:var(--blood-text); }
  .modal-bio-img{
    width:100%; aspect-ratio:16/9; object-fit:cover; object-position:center top;
    display:block; filter:grayscale(.2) contrast(1.1);
    border-bottom:2px solid var(--blood);
  }
  .modal-body{ padding:1.8rem 1.6rem; flex:1; }
  .modal-spec-id{
    font-size:.68rem; letter-spacing:.22em; color:var(--ash-dim);
    display:flex; justify-content:space-between; margin-bottom:.6rem;
    text-transform:uppercase;
  }
  .modal-spec-id .stat{ color:var(--blood-text); }
  .modal-name{
    font-family:"Anton",sans-serif; text-transform:uppercase;
    font-size:3rem; line-height:.9; letter-spacing:.01em; color:var(--ash);
    margin:0 0 .6rem;
  }
  .modal-tags{ margin:.5rem 0 1.4rem; }
  .modal-meta-grid{
    display:grid; grid-template-columns:1fr 1fr; gap:1px; background:#1b1d15;
    margin-bottom:1.6rem; font-size:.68rem; letter-spacing:.16em; text-transform:uppercase;
  }
  .modal-meta-cell{ background:var(--void-2); padding:.6rem .85rem; color:var(--ash-dim); }
  .modal-meta-cell b{
    display:block; color:var(--ash); font-size:.82rem; margin-top:.25rem;
    font-family:"Anton",sans-serif; letter-spacing:.02em; text-transform:uppercase;
  }
  .modal-bio-text{
    font-size:.88rem; line-height:1.78; color:var(--ash); margin:0 0 2rem;
    border-left:2px solid var(--blood); padding-left:1rem;
  }
  .modal-bio-text b{ color:var(--rot); font-weight:700; }
  .modal-release-head{
    font-size:.65rem; letter-spacing:.32em; text-transform:uppercase; color:var(--rot);
    margin:0 0 1.1rem; display:flex; align-items:center; gap:.8rem;
  }
  .modal-release-head::after{ content:""; flex:1; height:1px; background:var(--rot-deep); }
  .modal-album-header{ display:flex; gap:1rem; align-items:flex-start; margin-bottom:1.1rem; }
  .modal-album-cover{
    width:80px; height:80px; object-fit:cover; flex:0 0 80px;
    border:1px solid #1b1d15; filter:grayscale(.25);
  }
  .modal-album-info{ flex:1; min-width:0; padding-top:.1rem; }
  .modal-album-title{
    font-family:"Anton",sans-serif; text-transform:uppercase; font-size:1.15rem;
    line-height:1.05; color:var(--ash); margin:0 0 .35rem;
  }
  .modal-album-sub{ font-size:.66rem; letter-spacing:.16em; color:var(--ash-dim); text-transform:uppercase; }
  .modal-tracklist{ list-style:none; padding:0; margin:0; }
  .modal-tracklist li{ display:block; }
  .modal-track{
    display:grid; grid-template-columns:3rem 1fr auto; gap:.6rem; align-items:center;
    padding:.75rem .4rem; width:100%; text-align:left; color:inherit;
    background:transparent; border:0; border-bottom:1px solid #16180f;
    font-family:"Space Mono",monospace; cursor:pointer;
    transition:background .15s, padding-left .15s;
  }
  .modal-track:hover{ background:#0e100a; padding-left:.8rem; }
  .modal-track.is-playing .modal-track-no{ color:var(--blood-text); }
  .modal-track.is-playing .modal-track-name{ color:var(--rot); }
  .modal-track-no{ font-size:.68rem; color:var(--rot); letter-spacing:.14em; }
  .modal-track-name{ font-size:.8rem; letter-spacing:.05em; }
  .modal-track-name small{
    display:block; font-size:.63rem; letter-spacing:.14em;
    color:var(--ash-dim); margin-top:.15rem; text-transform:uppercase;
  }
  .modal-track-play{ color:var(--ash-dim); font-size:.72rem; text-align:right; }
  .modal-track:hover .modal-track-play{ color:var(--rot); }
  .modal-track.is-playing .modal-track-play{ color:var(--blood-text); }
  .spec-profile{
    display:flex; width:100%; margin-top:.45rem;
    border-color:#2a2c22 !important; color:var(--ash-dim) !important;
    justify-content:center;
  }
  .spec-profile:hover{
    border-color:var(--ash) !important; color:var(--ash) !important;
    background:transparent !important; box-shadow:none !important;
  }

/* ── buy modal (checkout.js) ─────────────────────────────────────────────── */
.buy-modal-overlay{ z-index:80; display:flex; align-items:center; justify-content:center; }
.buy-modal-panel{
  position:relative; inset:auto; right:auto; top:auto; height:auto; width:min(420px,92vw);
  max-height:88vh; border:1px solid var(--rot-deep); transform:translateY(12px); opacity:0;
  transition:transform .3s cubic-bezier(.22,.8,.3,1), opacity .3s;
}
.buy-modal-overlay.open .buy-modal-panel{ transform:translateY(0); opacity:1; }
.buy-modal-body{ padding:1.6rem 1.5rem 1.8rem; }
.buy-modal-eyebrow{
  font-size:.65rem; letter-spacing:.28em; text-transform:uppercase; color:var(--rot); margin:0 0 .6rem;
}
.buy-modal-title{
  font-family:"Anton",sans-serif; text-transform:uppercase; font-size:1.5rem;
  line-height:1.1; color:var(--ash); margin:0 0 .3rem;
}
.buy-modal-price{ font-size:.85rem; color:var(--rot); margin:0 0 1rem; letter-spacing:.05em; }
.buy-modal-note{ font-size:.76rem; line-height:1.6; color:var(--ash-dim); margin:0 0 1.2rem; }
.buy-modal-label{
  display:block; font-size:.65rem; letter-spacing:.2em; text-transform:uppercase;
  color:var(--ash-dim); margin-bottom:.4rem;
}
.buy-modal-input{
  width:100%; background:var(--void); border:1px solid #2a2c22; color:var(--ash);
  font-family:"Space Mono",monospace; font-size:.85rem; padding:.7rem .8rem; margin-bottom:.9rem;
}
.buy-modal-input:focus{ outline:none; border-color:var(--rot); }
.buy-modal-error{
  color:var(--blood-text); font-size:.72rem; letter-spacing:.02em; margin:-.4rem 0 .9rem;
}
.buy-modal-pay{ width:100%; text-align:center; }
.buy-modal-pay:disabled{ opacity:.55; cursor:default; }


/* ── play counts ─────────────────────────────────────────────────────────── */
.play-count{
  font-family:"Space Mono",monospace; font-size:.6rem; color:var(--rot);
  opacity:.6; white-space:nowrap; margin-left:auto; flex-shrink:0;
}

/* ── share widget (catalogue row) ─────────────────────────────────────────── */
.share-wrap{ position:relative; flex-shrink:0; }
.share-toggle{
  background:none; border:none; cursor:pointer;
  color:var(--ash-dim); font-size:.75rem; padding:0 .25rem;
  line-height:1; transition:color .2s;
}
.share-toggle:hover{ color:var(--rot); }
.share-menu{
  display:none; position:absolute; right:0; bottom:calc(100% + 4px);
  background:var(--void-2); border:1px solid #2a2c22;
  padding:.3rem .4rem; gap:.4rem;
  flex-direction:row; z-index:20; white-space:nowrap;
}
.share-menu.open{ display:flex; }
.share-btn{
  background:none; border:none; cursor:pointer;
  color:var(--ash-dim); font-family:"Space Mono",monospace; font-size:.7rem;
  padding:.2rem .35rem; text-decoration:none; transition:color .15s;
}
.share-btn:hover{ color:var(--rot); }