/* ==========================================================================
   Nexus — front-end styles
   Palette: deep aubergine ink, brass, coral. Sleeves sit in a rack.
   ========================================================================== */

:root{
  --ink:#16101f;
  --ink-2:#1e162b;
  --ink-3:#2a1f3d;
  --ink-4:#3a2c52;
  --chalk:#f2ecf7;
  --muted:#a296b8;
  --brass:#e7b44a;
  --brass-deep:#c1902f;
  --coral:#ff4d6d;
  --line:rgba(242,236,247,.12);
  --line-strong:rgba(242,236,247,.22);

  --display:'Bricolage Grotesque',ui-sans-serif,system-ui,sans-serif;
  --body:'Manrope',ui-sans-serif,system-ui,-apple-system,sans-serif;
  --mono:'IBM Plex Mono',ui-monospace,'SFMono-Regular',monospace;

  --shell:1240px;
  --gap:clamp(1rem,3vw,2rem);
  --r:14px;
  --r-sm:8px;
  --shadow:0 24px 60px -24px rgba(0,0,0,.85);
  --ease:cubic-bezier(.2,.7,.3,1);
}

*,*::before,*::after{box-sizing:border-box}

/* The browser's own [hidden] rule loses to any author rule that sets display,
   so state it explicitly. Without this, panels marked hidden still show. */
[hidden]{display:none!important}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth}
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *,*::before,*::after{animation-duration:.001ms!important;animation-iteration-count:1!important;transition-duration:.001ms!important}
}

body{
  margin:0;
  background:var(--ink);
  color:var(--chalk);
  font:400 clamp(15px,.4vw + 14px,17px)/1.65 var(--body);
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
}

img{max-width:100%;display:block;height:auto}
a{color:inherit;text-decoration:none}
button{font:inherit;color:inherit}
:focus-visible{outline:2px solid var(--brass);outline-offset:3px;border-radius:3px}

.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}
.skip{position:absolute;left:-9999px;top:0;background:var(--brass);color:#1a1208;padding:.7rem 1.2rem;z-index:200;font-weight:700}
.skip:focus{left:1rem;top:1rem}

.shell{width:100%;max-width:var(--shell);margin-inline:auto;padding-inline:clamp(1rem,4vw,2.5rem)}

/* ── Type scale ─────────────────────────────────────────────────────────── */
h1,h2,h3,h4{font-family:var(--display);font-weight:800;line-height:1.02;letter-spacing:-.03em;margin:0}
h1{font-size:clamp(2.6rem,7vw,5.2rem)}
h2{font-size:clamp(1.9rem,4vw,3rem)}
h3{font-size:clamp(1.15rem,2vw,1.5rem);letter-spacing:-.02em}
p{margin:0 0 1rem}

.eyebrow{
  font:500 .72rem/1 var(--mono);letter-spacing:.22em;text-transform:uppercase;
  color:var(--brass);display:inline-flex;align-items:center;gap:.6rem;margin:0 0 1rem;
}
.eyebrow::before{content:"";width:26px;height:1px;background:var(--brass);opacity:.7}

.lead{font-size:clamp(1.02rem,1.2vw,1.2rem);color:var(--muted);max-width:56ch}

/* ── Buttons ────────────────────────────────────────────────────────────── */
.btn{
  --btn-bg:transparent;--btn-fg:var(--chalk);--btn-bd:var(--line-strong);
  display:inline-flex;align-items:center;justify-content:center;gap:.55rem;
  padding:.85rem 1.5rem;border-radius:999px;border:1px solid var(--btn-bd);
  background:var(--btn-bg);color:var(--btn-fg);cursor:pointer;
  font:700 .92rem/1 var(--body);letter-spacing:.01em;
  transition:transform .2s var(--ease),background .2s,border-color .2s,color .2s;
}
.btn:hover{transform:translateY(-2px)}
.btn:active{transform:translateY(0)}
.btn--brass{--btn-bg:var(--brass);--btn-fg:#1a1208;--btn-bd:var(--brass)}
.btn--brass:hover{--btn-bg:#f3c463}
.btn--coral{--btn-bg:var(--coral);--btn-fg:#fff;--btn-bd:var(--coral)}
.btn--solid{--btn-bg:var(--chalk);--btn-fg:var(--ink);--btn-bd:var(--chalk)}
.btn--ghost{--btn-bg:rgba(242,236,247,.05)}
.btn--ghost:hover{--btn-bd:var(--brass);--btn-fg:var(--brass)}
.btn--sm{padding:.55rem 1rem;font-size:.82rem}
.btn--block{width:100%}
.btn[disabled],.btn.is-busy{opacity:.5;pointer-events:none}
.ico{width:1.1em;height:1.1em;fill:none;stroke:currentColor;stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round;flex:none}

/* ── Top bar ────────────────────────────────────────────────────────────── */
.topbar{
  position:sticky;top:0;z-index:100;
  background:rgba(22,16,31,.72);backdrop-filter:blur(14px) saturate(160%);
  border-bottom:1px solid transparent;transition:border-color .25s,background .25s;
}
.topbar.is-stuck{border-bottom-color:var(--line);background:rgba(22,16,31,.94)}
.topbar__in{display:flex;align-items:center;gap:clamp(.75rem,2vw,2rem);min-height:74px}

.brand{display:flex;align-items:center;gap:.6rem;flex:none}
.brand__logo,.foot__logo{max-height:42px;width:auto}
.brand__mark{
  width:20px;height:20px;flex:none;border-radius:4px;
  background:conic-gradient(from 210deg,var(--brass),var(--coral),var(--brass));
}
.brand__name{font-family:var(--display);font-weight:800;font-size:1.15rem;letter-spacing:-.03em}

.nav{display:flex;align-items:center;gap:clamp(.5rem,1.4vw,1.35rem);margin-inline-start:auto;flex-wrap:nowrap}
.nav a{
  font-size:.9rem;font-weight:500;color:var(--muted);padding:.45rem 0;position:relative;white-space:nowrap;
  transition:color .18s;
}
.nav a::after{content:"";position:absolute;left:0;right:100%;bottom:0;height:1.5px;background:var(--brass);transition:right .28s var(--ease)}
.nav a:hover{color:var(--chalk)}
.nav a:hover::after{right:0}

.topbar__tools{display:flex;align-items:center;gap:.6rem;margin-inline-start:auto}
.quicksearch{position:relative;display:flex;align-items:center}
.quicksearch input{
  width:clamp(120px,14vw,200px);padding:.55rem 2.4rem .55rem .95rem;border-radius:999px;
  background:rgba(242,236,247,.06);border:1px solid var(--line);color:var(--chalk);
  font:400 .85rem var(--body);transition:border-color .2s,background .2s;
}
.quicksearch input::placeholder{color:var(--muted)}
.quicksearch input:focus{outline:none;border-color:var(--brass);background:rgba(242,236,247,.1)}
.quicksearch button{position:absolute;right:.35rem;background:none;border:0;cursor:pointer;color:var(--muted);padding:.35rem;display:grid;place-items:center}
.quicksearch button:hover{color:var(--brass)}

.avatar{
  display:grid;place-items:center;border-radius:50%;background:var(--ink-3);color:var(--brass);
  font:700 .8rem var(--mono);width:38px;height:38px;border:1px solid var(--line-strong);
}
.avatar--sm{width:34px;height:34px;font-size:.72rem}

.usermenu{position:relative}
.usermenu__btn{background:none;border:0;padding:0;cursor:pointer;border-radius:50%;display:block}
.usermenu__btn img{width:34px;height:34px;border-radius:50%;object-fit:cover;border:1px solid var(--line-strong)}
.usermenu__panel{
  position:absolute;right:0;top:calc(100% + .7rem);min-width:230px;padding:.5rem;
  background:var(--ink-2);border:1px solid var(--line);border-radius:var(--r);box-shadow:var(--shadow);
  display:flex;flex-direction:column;
}
.usermenu__who{margin:0;padding:.7rem .85rem;border-bottom:1px solid var(--line);font-weight:700;font-size:.9rem;display:flex;flex-direction:column}
.usermenu__who span{font-weight:400;font-size:.76rem;color:var(--muted);overflow:hidden;text-overflow:ellipsis}
.usermenu__panel a,.usermenu__panel button{
  padding:.6rem .85rem;border-radius:var(--r-sm);font-size:.88rem;text-align:left;
  background:none;border:0;cursor:pointer;color:var(--muted);width:100%;
}
.usermenu__panel a:hover,.usermenu__panel button:hover{background:var(--ink-3);color:var(--chalk)}
.usermenu__panel .is-accent{color:var(--brass)}

.burger{display:none;flex-direction:column;gap:5px;background:none;border:0;padding:.5rem;cursor:pointer}
.burger span{width:22px;height:2px;background:var(--chalk);border-radius:2px;transition:transform .25s var(--ease),opacity .2s}
.burger[aria-expanded="true"] span:nth-child(1){transform:translateY(7px) rotate(45deg)}
.burger[aria-expanded="true"] span:nth-child(2){opacity:0}
.burger[aria-expanded="true"] span:nth-child(3){transform:translateY(-7px) rotate(-45deg)}

@media (max-width:1040px){
  .burger{display:flex}
  .quicksearch{display:none}
  .nav{
    position:fixed;inset:74px 0 auto;flex-direction:column;align-items:stretch;gap:0;
    background:var(--ink-2);border-bottom:1px solid var(--line);padding:.5rem clamp(1rem,4vw,2.5rem) 1.5rem;
    transform:translateY(-120%);transition:transform .3s var(--ease);max-height:calc(100vh - 74px);overflow:auto;
  }
  .nav.is-open{transform:translateY(0)}
  .nav a{padding:.95rem 0;border-bottom:1px solid var(--line);font-size:1rem}
  .nav a::after{display:none}
}

/* ── Flash + toast ──────────────────────────────────────────────────────── */
.flashes{padding-top:1.2rem;display:flex;flex-direction:column;gap:.6rem}
.flash{
  display:flex;align-items:center;gap:.75rem;padding:.85rem 1.1rem;border-radius:var(--r-sm);
  font-size:.9rem;border-left:3px solid var(--brass);background:var(--ink-2);
}
.flash--success{border-left-color:#4ade80}
.flash--error{border-left-color:var(--coral)}
.flash__x{margin-left:auto;background:none;border:0;font-size:1.3rem;line-height:1;cursor:pointer;color:var(--muted)}
.toast{
  position:fixed;left:50%;bottom:2rem;transform:translate(-50%,150%);z-index:300;
  background:var(--chalk);color:var(--ink);padding:.85rem 1.4rem;border-radius:999px;
  font-weight:700;font-size:.88rem;box-shadow:var(--shadow);transition:transform .35s var(--ease);
}
.toast.is-up{transform:translate(-50%,0)}

/* ── Hero ───────────────────────────────────────────────────────────────── */
.hero{position:relative;padding:clamp(3.5rem,9vw,7rem) 0 clamp(2.5rem,5vw,4rem);overflow:hidden}
/* The background sits at whatever strength the admin picked (--hero-dim).
   Readability comes from the scrims below, not from crushing the image. */
.hero__bg{position:absolute;inset:0;z-index:0;overflow:hidden}
.hero__bg img{
  position:absolute;inset:0;width:100%;height:100%;object-fit:cover;
  opacity:var(--hero-dim,.5);
}
/* Bottom fade into the page, and a side scrim so the headline stays legible
   even at full strength — the image keeps its presence on the right. */
.hero__bg::before{
  content:"";position:absolute;inset:0;z-index:1;
  background:linear-gradient(90deg,var(--ink) 6%,rgba(22,16,31,.72) 38%,rgba(22,16,31,.12) 72%);
}
.hero__bg::after{
  content:"";position:absolute;inset:0;z-index:1;
  background:linear-gradient(180deg,rgba(22,16,31,.35),transparent 28%,rgba(22,16,31,.55) 78%,var(--ink) 98%);
}
@media (max-width:900px){
  .hero__bg::before{background:linear-gradient(180deg,rgba(22,16,31,.55),rgba(22,16,31,.75))}
}

/* Crossfade between slides */
.hero__bg--slides .hero__slide{opacity:0;transition:opacity 1.4s ease}
.hero__bg--slides .hero__slide.is-on{opacity:var(--hero-dim,.5)}
@media (prefers-reduced-motion:reduce){
  .hero__bg--slides .hero__slide{transition:none}
  .hero__bg--slides .hero__slide:not(.is-on){display:none}
}
.hero__glow{
  position:absolute;z-index:0;width:min(720px,90vw);aspect-ratio:1;right:-14%;top:-28%;
  background:radial-gradient(circle,rgba(231,180,74,.2),transparent 62%);pointer-events:none;
}
.hero__in{position:relative;z-index:1;display:grid;grid-template-columns:minmax(0,1.15fr) minmax(0,.85fr);gap:clamp(2rem,5vw,4rem);align-items:center}
.hero h1{max-width:15ch;text-wrap:balance}
.hero--long h1{font-size:clamp(2.1rem,4.6vw,3.6rem);max-width:20ch}
.hero--noart .hero__in{grid-template-columns:minmax(0,1fr)}
.hero--noart h1{max-width:18ch}
.hero--noart.hero--long h1{max-width:24ch}
.hero h1 em{font-style:normal;color:var(--brass)}
.hero__lead{margin-top:1.4rem}
.hero__actions{display:flex;flex-wrap:wrap;gap:.75rem;margin-top:2rem}

.hero__art{position:relative;display:grid;place-items:center;min-height:280px}
.hero__art .sleeve{width:min(340px,80%)}
.hero__art .sleeve:nth-child(1){transform:rotate(-5deg) translateX(-8%)}
.hero__art .sleeve:nth-child(2){position:absolute;transform:rotate(6deg) translate(22%,10%);width:min(260px,62%);opacity:.9}
.hero__art--emblem img{
  width:min(420px,88%);height:auto;border-radius:var(--r);
  filter:drop-shadow(0 30px 60px rgba(0,0,0,.6));
}
@media (max-width:900px){
  .hero__in{grid-template-columns:1fr}
  .hero__art{display:none}
}


/* ── Brand film ─────────────────────────────────────────────────────────── */
.film{padding:clamp(2rem,5vw,3.5rem) 0;background:linear-gradient(180deg,var(--ink),var(--ink-2) 55%,var(--ink))}
.film__frame{
  position:relative;margin:0;border-radius:var(--r);overflow:hidden;
  border:1px solid var(--line);background:#0b0710;box-shadow:var(--shadow);
  max-width:1000px;margin-inline:auto;aspect-ratio:3/2;
}
/* A hairline of brass so the frame reads as deliberate, not a raw embed */
.film__frame::before{
  content:"";position:absolute;inset:0;z-index:3;pointer-events:none;border-radius:inherit;
  box-shadow:inset 0 0 0 1px rgba(231,180,74,.28),inset 0 -80px 120px -60px rgba(10,6,16,.9);
}
.film__video,.film__still{width:100%;height:100%;object-fit:cover;display:block}
.film__still{position:absolute;inset:0;z-index:1;opacity:0}   /* stand-in, see below */
.film__video{position:relative;z-index:2}

.film__sound{
  position:absolute;right:.9rem;bottom:.9rem;z-index:4;display:inline-flex;align-items:center;gap:.5rem;
  padding:.5rem .85rem;border-radius:999px;cursor:pointer;
  background:rgba(22,16,31,.72);border:1px solid var(--line-strong);color:var(--chalk);
  backdrop-filter:blur(8px);font:700 .74rem/1 var(--body);letter-spacing:.02em;
  opacity:0;transform:translateY(6px);transition:opacity .25s,transform .25s var(--ease),background .2s,border-color .2s;
}
.film__frame:hover .film__sound,.film__sound:focus-visible{opacity:1;transform:translateY(0)}
.film__sound:hover{border-color:var(--brass);color:var(--brass)}
@media (hover:none){.film__sound{opacity:1;transform:none}}

.film__caption{
  position:absolute;left:1.1rem;bottom:1.1rem;z-index:4;margin:0;max-width:34ch;
  font:500 .72rem/1.5 var(--mono);letter-spacing:.16em;text-transform:uppercase;
  color:rgba(242,236,247,.9);text-shadow:0 2px 10px rgba(0,0,0,.9);
}
@media (max-width:560px){
  .film__caption{font-size:.62rem;left:.8rem;bottom:.8rem}
  .film__sound{right:.6rem;bottom:.6rem;padding:.45rem .7rem}
  .film__sound span{display:none}
}

/* Behind-the-headline variant */
.hero__bg--film{opacity:.34}
.hero__bg--film video{width:100%;height:100%;object-fit:cover}
.hero__bg--film::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(22,16,31,.62),var(--ink) 92%)}

/* Anyone who has asked their system to stop animation gets the still frame */
@media (prefers-reduced-motion:reduce){
  .film__video{display:none}
  .film__still{opacity:1}
  .film__sound{display:none}
  .hero__bg--film video{display:none}
}

/* ── Marquee ticker (cinema strip) ──────────────────────────────────────── */
.ticker{
  border-block:1px solid var(--line);background:linear-gradient(90deg,var(--ink-2),var(--ink-3),var(--ink-2));
  overflow:hidden;padding:.75rem 0;position:relative;
}
.ticker__track{display:flex;gap:2.5rem;width:max-content;animation:slide 48s linear infinite}
.ticker:hover .ticker__track{animation-play-state:paused}
.ticker__item{display:inline-flex;align-items:center;gap:.7rem;font:500 .8rem/1 var(--mono);letter-spacing:.1em;text-transform:uppercase;color:var(--muted);white-space:nowrap}
.ticker__item b{color:var(--chalk);font-weight:500}
.ticker__item::before{content:"◆";color:var(--brass);font-size:.6rem}
.ticker__item:hover b{color:var(--brass)}
@keyframes slide{from{transform:translateX(0)}to{transform:translateX(-50%)}}
@media (prefers-reduced-motion:reduce){.ticker__track{animation:none;flex-wrap:wrap;width:auto}}

/* ── Figures ────────────────────────────────────────────────────────────── */
.figures{display:grid;grid-template-columns:repeat(auto-fit,minmax(160px,1fr));gap:1px;background:var(--line);border-block:1px solid var(--line)}
.figure{background:var(--ink);padding:clamp(1.5rem,3vw,2.4rem) clamp(1rem,2vw,1.6rem)}
.figure__value{font-family:var(--display);font-weight:800;font-size:clamp(1.9rem,3.6vw,2.9rem);letter-spacing:-.04em;line-height:1}
.figure__label{font:500 .68rem/1.4 var(--mono);letter-spacing:.18em;text-transform:uppercase;color:var(--muted);margin-top:.7rem}

/* ── Sections ───────────────────────────────────────────────────────────── */
.section{padding:clamp(3rem,7vw,5.5rem) 0}
.section--tight{padding:clamp(2rem,4vw,3rem) 0}
.section__head{display:flex;align-items:flex-end;justify-content:space-between;gap:1.5rem;margin-bottom:clamp(1.5rem,3vw,2.5rem);flex-wrap:wrap}
.section__head h2{text-wrap:balance}
.section__head p{margin:.6rem 0 0;color:var(--muted);max-width:52ch;font-size:.95rem}
.seeall{font:500 .8rem/1 var(--mono);letter-spacing:.14em;text-transform:uppercase;color:var(--brass);display:inline-flex;align-items:center;gap:.5rem;white-space:nowrap}
.seeall:hover{gap:.85rem}
.seeall .ico{transition:transform .2s}

/* ── The rack: signature sleeve grid ────────────────────────────────────── */
.rack{
  display:grid;grid-auto-flow:column;grid-auto-columns:minmax(210px,25%);
  gap:clamp(1rem,2vw,1.6rem);overflow-x:auto;scroll-snap-type:x proximity;
  padding-bottom:1.4rem;margin-bottom:-1.4rem;scrollbar-width:thin;scrollbar-color:var(--ink-4) transparent;
}
.rack>*{scroll-snap-align:start}
.rack::-webkit-scrollbar{height:6px}
.rack::-webkit-scrollbar-thumb{background:var(--ink-4);border-radius:3px}
@media (max-width:640px){.rack{grid-auto-columns:minmax(160px,62%)}}

.grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(210px,1fr));gap:clamp(1rem,2vw,1.6rem)}
@media (max-width:520px){.grid{grid-template-columns:repeat(auto-fill,minmax(150px,1fr));gap:1rem}}

.sleeve{position:relative;display:flex;flex-direction:column}
.sleeve__frame{
  position:relative;display:block;border-radius:var(--r);overflow:hidden;
  background:var(--ink-2);border:1px solid var(--line);
  transition:transform .34s var(--ease),border-color .34s,box-shadow .34s;
}
.sleeve__frame::after{
  content:"";position:absolute;inset:0;border-radius:inherit;pointer-events:none;
  background:linear-gradient(180deg,transparent 44%,rgba(10,6,16,.88));opacity:0;transition:opacity .3s;
}
.sleeve:hover .sleeve__frame{transform:translateY(-8px);border-color:var(--line-strong);box-shadow:var(--shadow)}
.sleeve:hover .sleeve__frame::after{opacity:1}
.sleeve__img{width:100%;height:100%;object-fit:cover;transition:transform .6s var(--ease)}
.sleeve:hover .sleeve__img{transform:scale(1.05)}

.sleeve--square .sleeve__frame{aspect-ratio:1}
.sleeve--poster .sleeve__frame{aspect-ratio:2/3}
.sleeve--wide   .sleeve__frame{aspect-ratio:16/9}
.sleeve--circle .sleeve__frame{aspect-ratio:1;border-radius:50%}
.sleeve--circle .sleeve__spine{display:none}

/* The spine: catalogue number printed down the edge, like a record in a rack */
.sleeve__spine{
  position:absolute;left:.55rem;top:.75rem;z-index:2;
  writing-mode:vertical-rl;font:500 .6rem/1 var(--mono);letter-spacing:.2em;
  color:rgba(242,236,247,.75);text-shadow:0 1px 4px rgba(0,0,0,.9);
  padding:.4rem .2rem;border-left:1px solid rgba(231,180,74,.6);
}
.sleeve__badge{
  position:absolute;right:.6rem;top:.6rem;z-index:2;
  font:500 .58rem/1 var(--mono);letter-spacing:.14em;text-transform:uppercase;
  background:var(--brass);color:#1a1208;padding:.35rem .55rem;border-radius:4px;
}
.sleeve__play{
  position:absolute;inset:0;z-index:2;display:grid;place-items:center;opacity:0;transition:opacity .3s;
}
.sleeve:hover .sleeve__play{opacity:1}
.sleeve__play span{
  width:52px;height:52px;border-radius:50%;display:grid;place-items:center;
  background:rgba(231,180,74,.95);color:#1a1208;transform:scale(.85);transition:transform .3s var(--ease);
}
.sleeve:hover .sleeve__play span{transform:scale(1)}
.sleeve__play .ico{width:20px;height:20px;stroke-width:2;margin-left:2px}

.sleeve__tools{
  position:absolute;left:.6rem;right:.6rem;bottom:.6rem;z-index:3;display:flex;gap:.4rem;justify-content:flex-end;
  opacity:0;transform:translateY(6px);transition:opacity .28s,transform .28s var(--ease);
}
.sleeve:hover .sleeve__tools,.sleeve__tools:focus-within{opacity:1;transform:translateY(0)}
.chip{
  display:grid;place-items:center;width:34px;height:34px;border-radius:50%;cursor:pointer;
  background:rgba(22,16,31,.82);border:1px solid var(--line-strong);color:var(--chalk);
  backdrop-filter:blur(6px);transition:background .2s,color .2s,border-color .2s;
}
.chip:hover{background:var(--chalk);color:var(--ink)}
.chip.is-on{background:var(--coral);border-color:var(--coral);color:#fff}
.chip.is-on .ico{fill:currentColor}

.sleeve__meta{padding:.85rem .1rem 0}
.sleeve__title{font-family:var(--display);font-weight:600;font-size:1rem;letter-spacing:-.02em;line-height:1.25;display:block}
.sleeve:hover .sleeve__title{color:var(--brass)}
.sleeve__sub{color:var(--muted);font-size:.82rem;margin-top:.2rem;display:block}
.sleeve__tag{font:500 .62rem/1 var(--mono);letter-spacing:.14em;text-transform:uppercase;color:var(--muted);margin-top:.5rem;display:block}

/* ── Filter bar ─────────────────────────────────────────────────────────── */
.filters{display:flex;flex-wrap:wrap;gap:.6rem;align-items:center;margin-bottom:2rem;padding-bottom:1.5rem;border-bottom:1px solid var(--line)}
.filters input[type="search"],.filters select{
  padding:.65rem 1rem;border-radius:999px;background:var(--ink-2);border:1px solid var(--line);
  color:var(--chalk);font:400 .88rem var(--body);
}
.filters input[type="search"]{min-width:min(280px,100%)}
.filters select{cursor:pointer;appearance:none;padding-right:2.2rem;
  background-image:linear-gradient(45deg,transparent 50%,var(--muted) 50%),linear-gradient(135deg,var(--muted) 50%,transparent 50%);
  background-position:calc(100% - 18px) 55%,calc(100% - 13px) 55%;background-size:5px 5px;background-repeat:no-repeat}
.filters input:focus,.filters select:focus{outline:none;border-color:var(--brass)}
.pills{display:flex;gap:.45rem;flex-wrap:wrap}
.pill{padding:.5rem .95rem;border-radius:999px;border:1px solid var(--line);font-size:.82rem;color:var(--muted);transition:.2s}
.pill:hover{border-color:var(--line-strong);color:var(--chalk)}
.pill.is-on{background:var(--chalk);color:var(--ink);border-color:var(--chalk);font-weight:700}

/* ── Page banner ────────────────────────────────────────────────────────── */
.banner{position:relative;padding:clamp(2.8rem,6vw,4.5rem) 0 clamp(1.8rem,3vw,2.5rem);border-bottom:1px solid var(--line);overflow:hidden}
.banner__bg{position:absolute;inset:0;opacity:.2}
.banner__bg img{width:100%;height:100%;object-fit:cover}
.banner__bg::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(22,16,31,.4),var(--ink))}
.banner__in{position:relative;z-index:1}

/* ── Item detail ────────────────────────────────────────────────────────── */
.release{display:grid;grid-template-columns:minmax(0,.9fr) minmax(0,1.1fr);gap:clamp(2rem,5vw,4rem);align-items:start;padding:clamp(2.5rem,6vw,4.5rem) 0}
@media (max-width:900px){.release{grid-template-columns:1fr}}
.release__art{position:sticky;top:104px}
@media (max-width:900px){.release__art{position:static}}
.release__art .sleeve__frame{border-radius:var(--r)}
.release__crumbs{font:500 .72rem/1 var(--mono);letter-spacing:.16em;text-transform:uppercase;color:var(--muted);margin-bottom:1.2rem;display:flex;gap:.6rem;flex-wrap:wrap}
.release__crumbs a:hover{color:var(--brass)}
.release h1{font-size:clamp(2rem,5vw,3.4rem)}
.release__by{font-size:1.1rem;color:var(--brass);margin-top:.7rem;font-weight:700}
.release__facts{display:flex;flex-wrap:wrap;gap:1.5rem;margin:1.6rem 0;padding:1.1rem 0;border-block:1px solid var(--line)}
.fact{display:flex;flex-direction:column;gap:.3rem}
.fact dt{font:500 .64rem/1 var(--mono);letter-spacing:.16em;text-transform:uppercase;color:var(--muted)}
.fact dd{margin:0;font-weight:700;font-size:.92rem}
.release__body{color:var(--muted);max-width:62ch}
.release__body p{margin-bottom:1rem}
.release__actions{display:flex;flex-wrap:wrap;gap:.7rem;margin:1.8rem 0}
.linkgrid{display:grid;grid-template-columns:repeat(auto-fill,minmax(180px,1fr));gap:.6rem;margin-top:1.5rem}
.linkgrid a{
  display:flex;align-items:center;gap:.7rem;padding:.85rem 1rem;border-radius:var(--r-sm);
  background:var(--ink-2);border:1px solid var(--line);font-size:.88rem;font-weight:700;transition:.2s;
}
.linkgrid a:hover{border-color:var(--brass);color:var(--brass);transform:translateX(3px)}
.linkgrid .ico:last-child{margin-left:auto;opacity:.5}
.tags{display:flex;flex-wrap:wrap;gap:.4rem;margin-top:1.4rem}
.tags a{font:500 .68rem/1 var(--mono);letter-spacing:.1em;text-transform:uppercase;padding:.45rem .7rem;border:1px solid var(--line);border-radius:4px;color:var(--muted)}
.tags a:hover{border-color:var(--brass);color:var(--brass)}

.player{margin:1.8rem 0;border-radius:var(--r);overflow:hidden;border:1px solid var(--line);background:#000}
.player iframe{width:100%;aspect-ratio:16/9;border:0;display:block}
.player--audio iframe{aspect-ratio:auto;height:180px}

/* ── Comments ───────────────────────────────────────────────────────────── */
.talk{padding:clamp(2rem,5vw,3.5rem) 0;border-top:1px solid var(--line)}
.talk__form{display:flex;gap:.9rem;margin-bottom:2.2rem}
.talk__form textarea{
  flex:1;min-height:96px;resize:vertical;padding:.9rem 1.1rem;border-radius:var(--r);
  background:var(--ink-2);border:1px solid var(--line);color:var(--chalk);font:400 .95rem/1.6 var(--body);
}
.talk__form textarea:focus{outline:none;border-color:var(--brass)}
.comment{display:flex;gap:.9rem;padding:1.2rem 0;border-bottom:1px solid var(--line)}
.comment__body{flex:1;min-width:0}
.comment__head{display:flex;align-items:baseline;gap:.7rem;margin-bottom:.35rem;flex-wrap:wrap}
.comment__who{font-weight:700;font-size:.92rem}
.comment__when{font:400 .72rem var(--mono);color:var(--muted)}
.comment__text{margin:0;color:var(--muted);font-size:.94rem;overflow-wrap:anywhere}
.comment__del{margin-left:auto;background:none;border:0;color:var(--muted);cursor:pointer;font-size:.75rem}
.comment__del:hover{color:var(--coral)}

/* ── Prose (pages) ──────────────────────────────────────────────────────── */
.prose{max-width:70ch;color:var(--muted);font-size:1.02rem}
.prose h2,.prose h3{color:var(--chalk);margin:2.4rem 0 .9rem}
.prose h2{font-size:clamp(1.5rem,3vw,2rem)}
.prose a{color:var(--brass);text-decoration:underline;text-underline-offset:3px}
.prose ul,.prose ol{padding-left:1.3rem;margin:0 0 1.2rem}
.prose li{margin-bottom:.45rem}
.prose blockquote{margin:1.6rem 0;padding-left:1.3rem;border-left:2px solid var(--brass);color:var(--chalk);font-size:1.1rem}
.prose img{border-radius:var(--r);margin:1.6rem 0}
.prose hr{border:0;border-top:1px solid var(--line);margin:2.4rem 0}
.prose table{width:100%;border-collapse:collapse;margin:1.5rem 0;font-size:.92rem}
.prose th,.prose td{padding:.7rem .8rem;border-bottom:1px solid var(--line);text-align:left}

/* ── Forms ──────────────────────────────────────────────────────────────── */
.field{margin-bottom:1.15rem}
.field label{display:block;font-weight:700;font-size:.85rem;margin-bottom:.45rem}
.field .hint{display:block;font-weight:400;font-size:.78rem;color:var(--muted);margin-top:.3rem}
.field input[type="text"],.field input[type="email"],.field input[type="password"],
.field input[type="url"],.field input[type="tel"],.field input[type="date"],
.field input[type="number"],.field textarea,.field select{
  width:100%;padding:.8rem 1rem;border-radius:var(--r-sm);background:var(--ink-2);
  border:1px solid var(--line);color:var(--chalk);font:400 .95rem/1.5 var(--body);
}
.field textarea{min-height:120px;resize:vertical}
.field select{cursor:pointer}
.field input:focus,.field textarea:focus,.field select:focus{outline:none;border-color:var(--brass)}
.field .err{color:var(--coral);font-size:.8rem;margin-top:.35rem;display:block}
.field.has-err input,.field.has-err textarea,.field.has-err select{border-color:var(--coral)}
.check{display:flex;align-items:flex-start;gap:.65rem;font-size:.9rem;cursor:pointer;margin-bottom:1rem}
.check input{margin-top:.25rem;accent-color:var(--brass);width:16px;height:16px}
.row2{display:grid;grid-template-columns:1fr 1fr;gap:1rem}
@media (max-width:600px){.row2{grid-template-columns:1fr}}
.honey{position:absolute!important;left:-9999px}

/* ── Auth gate ──────────────────────────────────────────────────────────── */
.body--slim{display:grid;place-items:center;min-height:100vh;padding:2rem 1rem;
  background:radial-gradient(1000px 500px at 50% -10%,rgba(231,180,74,.13),transparent 65%),var(--ink)}
.gate{width:100%;max-width:440px}
.gate__brand{display:flex;align-items:center;justify-content:center;gap:.6rem;margin-bottom:2rem;font-family:var(--display);font-weight:800;font-size:1.3rem}
.gate__brand img{max-height:46px;width:auto}
.card{background:var(--ink-2);border:1px solid var(--line);border-radius:var(--r);padding:clamp(1.5rem,4vw,2.2rem)}
.card h1{font-size:1.7rem;margin-bottom:.5rem}
.card__sub{color:var(--muted);font-size:.92rem;margin-bottom:1.6rem}
.gate__back{text-align:center;margin-top:1.5rem;font-size:.85rem;color:var(--muted)}
.gate__back a:hover{color:var(--brass)}
.altline{text-align:center;margin-top:1.4rem;font-size:.88rem;color:var(--muted)}
.altline a{color:var(--brass);font-weight:700}

/* ── Pager ──────────────────────────────────────────────────────────────── */
.pager{display:flex;flex-wrap:wrap;align-items:center;justify-content:center;gap:.4rem;margin-top:3rem}
.pager__num,.pager__step,.pager__gap{
  min-width:40px;height:40px;padding:0 .8rem;border-radius:var(--r-sm);display:grid;place-items:center;
  font-size:.85rem;color:var(--muted);border:1px solid transparent;
}
.pager__num:hover,.pager__step:hover{border-color:var(--line-strong);color:var(--chalk)}
.pager__num.is-current{background:var(--chalk);color:var(--ink);font-weight:700}
.pager__step.is-off{opacity:.35}

/* ── Empty state ────────────────────────────────────────────────────────── */
.empty{text-align:center;padding:clamp(3rem,8vw,5rem) 1rem;border:1px dashed var(--line-strong);border-radius:var(--r)}
.empty h3{margin-bottom:.6rem}
.empty p{color:var(--muted);max-width:44ch;margin-inline:auto}
.empty .btn{margin-top:1.4rem}

/* ── CTA band ───────────────────────────────────────────────────────────── */
.band{
  position:relative;padding:clamp(3rem,7vw,5rem) 0;overflow:hidden;
  background:linear-gradient(120deg,var(--ink-3),var(--ink-2));border-block:1px solid var(--line);
}
.band::before{content:"";position:absolute;inset:auto -10% -60% auto;width:520px;aspect-ratio:1;
  background:radial-gradient(circle,rgba(255,77,109,.22),transparent 66%)}
.band__in{position:relative;z-index:1;display:flex;align-items:center;justify-content:space-between;gap:2rem;flex-wrap:wrap}
.band h2{max-width:18ch}
.band p{color:var(--muted);max-width:48ch;margin-top:.8rem}

/* ── Account ────────────────────────────────────────────────────────────── */
.acct{display:grid;grid-template-columns:220px minmax(0,1fr);gap:clamp(1.5rem,4vw,3rem);padding:clamp(2rem,5vw,3.5rem) 0}
@media (max-width:820px){.acct{grid-template-columns:1fr}}
.acct__nav{display:flex;flex-direction:column;gap:.2rem;align-self:start;position:sticky;top:100px}
@media (max-width:820px){.acct__nav{position:static;flex-direction:row;flex-wrap:wrap;gap:.4rem}}
.acct__nav a{padding:.7rem .9rem;border-radius:var(--r-sm);font-size:.9rem;color:var(--muted)}
.acct__nav a:hover{background:var(--ink-2);color:var(--chalk)}
.acct__nav a.is-on{background:var(--ink-2);color:var(--brass);font-weight:700}
.tiles{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:1rem;margin-bottom:2.5rem}
.tile{background:var(--ink-2);border:1px solid var(--line);border-radius:var(--r);padding:1.3rem}
.tile__n{font-family:var(--display);font-weight:800;font-size:2rem;line-height:1}
.tile__l{font:500 .66rem/1 var(--mono);letter-spacing:.16em;text-transform:uppercase;color:var(--muted);margin-top:.6rem}

.listrow{display:flex;align-items:center;gap:1rem;padding:.9rem 0;border-bottom:1px solid var(--line)}
.listrow img,.listrow .ph{width:56px;height:56px;border-radius:var(--r-sm);object-fit:cover;flex:none;background:var(--ink-3)}
.listrow__main{flex:1;min-width:0}
.listrow__main strong{display:block;font-size:.95rem;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.listrow__main span{color:var(--muted);font-size:.8rem}

/* ── Modal ──────────────────────────────────────────────────────────────── */
.modal{position:fixed;inset:0;z-index:250;display:grid;place-items:center;padding:1rem;background:rgba(10,6,16,.8);backdrop-filter:blur(4px)}
.modal[hidden]{display:none}
.modal__box{background:var(--ink-2);border:1px solid var(--line);border-radius:var(--r);padding:1.6rem;width:100%;max-width:400px;box-shadow:var(--shadow)}
.modal__box h3{margin-bottom:1rem}
.modal__list{display:flex;flex-direction:column;gap:.3rem;max-height:260px;overflow:auto;margin-bottom:1rem}
.modal__list button{text-align:left;padding:.7rem .85rem;border-radius:var(--r-sm);background:none;border:1px solid var(--line);cursor:pointer;font-size:.9rem}
.modal__list button:hover{border-color:var(--brass);color:var(--brass)}
.modal__x{float:right;background:none;border:0;font-size:1.5rem;line-height:1;cursor:pointer;color:var(--muted)}

/* ── Footer ─────────────────────────────────────────────────────────────── */
.foot{border-top:1px solid var(--line);background:var(--ink-2);padding-top:clamp(2.5rem,6vw,4rem);margin-top:clamp(2rem,5vw,4rem)}
.foot__grid{display:grid;grid-template-columns:1.6fr 1fr 1fr 1.4fr;gap:clamp(1.5rem,4vw,3rem);padding-bottom:2.5rem}
@media (max-width:900px){.foot__grid{grid-template-columns:1fr 1fr}}
@media (max-width:560px){.foot__grid{grid-template-columns:1fr}}
.foot__name{font-family:var(--display);font-weight:800;font-size:1.3rem;margin:0 0 .6rem}
.foot__note{color:var(--muted);font-size:.88rem;max-width:34ch}
.foot h3{font:500 .68rem/1 var(--mono);letter-spacing:.18em;text-transform:uppercase;color:var(--brass);margin-bottom:1rem}
.foot ul{list-style:none;padding:0;margin:0;display:flex;flex-direction:column;gap:.55rem}
.foot li a{color:var(--muted);font-size:.88rem}
.foot li a:hover{color:var(--chalk)}
.foot__small{color:var(--muted);font-size:.82rem;margin:.9rem 0 0}
.foot__small a:hover{color:var(--brass)}
.socials{list-style:none;padding:0;margin:1.3rem 0 0;display:flex;gap:.5rem;flex-wrap:wrap}
.socials a{width:38px;height:38px;border-radius:50%;display:grid;place-items:center;border:1px solid var(--line);color:var(--muted);transition:.2s}
.socials a:hover{border-color:var(--brass);color:var(--brass);transform:translateY(-2px)}
.subscribe{display:flex;gap:.5rem;margin-top:.4rem}
.subscribe input{flex:1;min-width:0;padding:.65rem .9rem;border-radius:999px;background:var(--ink-3);border:1px solid var(--line);color:var(--chalk);font:400 .85rem var(--body)}
.subscribe input:focus{outline:none;border-color:var(--brass)}
.foot__base{display:flex;justify-content:space-between;gap:1rem;flex-wrap:wrap;padding:1.4rem 0;border-top:1px solid var(--line);font-size:.8rem;color:var(--muted)}
.foot__base p{margin:0}
.foot__base a:hover{color:var(--brass)}

/* ── Error page ─────────────────────────────────────────────────────────── */
.errpage{min-height:60vh;display:grid;place-items:center;text-align:center;padding:4rem 1rem}
.errpage__code{font-family:var(--display);font-weight:800;font-size:clamp(5rem,18vw,11rem);line-height:.85;color:var(--ink-4);letter-spacing:-.06em}
.errpage h1{font-size:clamp(1.6rem,4vw,2.4rem);margin:1rem 0 .8rem}
.errpage p{color:var(--muted);max-width:44ch;margin-inline:auto}