/* =========================================================
   Welkom in de Nulnaam — AIKONAUT
   Stijl: Vlaams-renaissance / Bosch-surrealisme.
   Reis van bot-wit (de spiegelkamer) naar olieverf-zwart (de onderwereld).
   ========================================================= */

:root{
  /* lichte wereld */
  --paper:   oklch(0.937 0.012 86);
  --paper-2: oklch(0.892 0.016 82);
  --paper-3: oklch(0.838 0.020 78);
  --ink-on-paper: oklch(0.235 0.018 62);
  --ink-soft-paper: oklch(0.40 0.02 62);

  /* donkere wereld */
  --ink:     oklch(0.155 0.012 58);
  --ink-2:   oklch(0.205 0.016 56);
  --umber:   oklch(0.285 0.030 58);
  --parch:   oklch(0.872 0.022 82);   /* tekst op donker */
  --parch-soft: oklch(0.70 0.022 80);
  --parch-faint: oklch(0.55 0.018 78);

  /* accenten (gedeelde chroma/lichtheid, andere hue) */
  --oxblood: oklch(0.505 0.135 28);
  --oxblood-bright: oklch(0.585 0.150 30);
  --gold:    oklch(0.745 0.090 82);
  --gold-deep: oklch(0.62 0.085 78);

  --accent: var(--oxblood);
  --accent-2: var(--gold);

  --maxw: 1240px;
  --measure: 60ch;
  --r: 3px;

  --serif: "EB Garamond", "Iowan Old Style", Georgia, serif;
  --cond:  "Oswald", "Arial Narrow", sans-serif;
  --disp:  "Jost", "Futura", "Century Gothic", sans-serif;

  --ease: cubic-bezier(.22,.61,.36,1);
  --grain: .5;          /* tweakbaar 0..1 */
  --motion: 1;          /* 1 = animaties aan */
}

*{ box-sizing:border-box; }
html{ scroll-behavior:smooth; -webkit-text-size-adjust:100%; font-size: 140%; }
body{
  margin:0;
  background: var(--ink);
  color: var(--parch);
  font-family: var(--serif);
  font-size: clamp(0.95rem, 0.3vw + 0.86rem, 1.06rem);
  line-height: 1.62;
  font-weight: 450;
  letter-spacing: .002em;
  overflow-x: hidden;
  text-rendering: optimizeLegibility;
  -webkit-font-smoothing: antialiased;
}
::selection{ background: var(--oxblood); color: var(--paper); }

img{ display:block; max-width:100%; }
a{ color: inherit; text-decoration: none; }

/* ---------- gedeelde texturen (craquelure + grain) ---------- */
.grain{
  position: fixed; inset:0; z-index: 60; pointer-events:none;
  opacity: calc(var(--grain) * .9);
  mix-blend-mode: soft-light;
  background-image:
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='220' height='220'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  background-size: 220px 220px;
}
.vignette{
  position: fixed; inset:0; z-index: 59; pointer-events:none;
  box-shadow: inset 0 0 220px 40px rgba(0,0,0,.45);
}

/* ============================ TYPE ============================ */
.kicker{
  font-family: var(--cond); font-weight:500;
  text-transform: uppercase; letter-spacing: .42em;
  font-size: .72rem; color: var(--accent-2);
}
.kicker.on-paper{ color: var(--oxblood); }

.eyebrow{
  font-family: var(--disp); font-weight:400;
  text-transform: uppercase; letter-spacing: .34em;
  font-size: .74rem; opacity:.8;
}

h1,h2,h3{ font-weight:500; line-height:1.02; margin:0; }
.display{
  font-family: var(--disp); font-weight:400;
  text-transform: uppercase; letter-spacing: .14em;
}
.section-title{
  font-family: var(--cond); font-weight:500;
  text-transform: uppercase; letter-spacing: .08em;
  font-size: clamp(2rem, 5.5vw, 4.2rem); line-height:.98;
}

/* ============================ LAYOUT ============================ */
section{ position: relative; }
.wrap{ max-width: var(--maxw); margin-inline:auto; padding-inline: clamp(20px, 5vw, 64px); }
.narrow{ max-width: 760px; }

/* top bar -------------------------------------------------- */
.topbar{
  position: fixed; top:0; left:0; right:0; z-index: 50;
  display:flex; align-items:center; justify-content:space-between;
  padding: 18px clamp(20px,5vw,48px);
  transition: background .5s var(--ease), backdrop-filter .5s;
}
.topbar.scrolled{
  background: color-mix(in oklab, var(--ink) 78%, transparent);
  backdrop-filter: blur(9px) saturate(120%);
  border-bottom: 1px solid color-mix(in oklab, var(--parch) 12%, transparent);
}
.brand{ display:flex; align-items:center; }
.brand .logo{ height: 30px; width:auto; display:block; }
.foot .logo{ height: 34px; }
.topbar::before{
  content:""; position:absolute; inset:0 0 auto 0; height:140px; z-index:-1; pointer-events:none;
  background: linear-gradient(180deg, rgba(10,8,6,.42), rgba(10,8,6,0));
  transition: opacity .4s var(--ease);
}
.topbar.scrolled::before{ opacity:0; }
.topbar .tb-right{ display:flex; align-items:center; gap: 22px; }
.tb-date{
  font-family: var(--cond); text-transform:uppercase; letter-spacing:.22em;
  font-size:.72rem; color: rgba(255,255,255,.82); white-space:nowrap;
}
@media (max-width:640px){ .tb-date{ display:none; } }

/* buttons -------------------------------------------------- */
.btn{
  font-family: var(--cond); text-transform:uppercase; letter-spacing:.16em;
  font-size:.78rem; font-weight:500; white-space:nowrap;
  display:inline-flex; align-items:center; gap:.6em;
  padding:.82em 1.5em; border-radius: 999px; cursor:pointer;
  border:1px solid color-mix(in oklab, var(--parch) 38%, transparent);
  color: var(--parch); background: transparent;
  transition: all .3s var(--ease);
}
.btn:hover{ border-color: var(--gold); color: var(--gold); transform: translateY(-1px); }
.btn-solid{
  background: var(--oxblood); border-color: var(--oxblood); color: var(--paper);
}
.btn-solid:hover{
  background: var(--oxblood-bright); border-color: var(--oxblood-bright);
  color: var(--paper); box-shadow: 0 10px 30px -12px var(--oxblood);
}
.btn .ico{ width:.95em; height:.95em; }

/* ============================ HERO ============================ */
.hero{
  min-height: 100svh; display:flex; flex-direction:column; justify-content:flex-end;
  overflow:hidden;
}
.hero-bg{
  position:absolute; inset:0; z-index:0;
  background: center 38% / cover no-repeat;
  background-image: url("assets/bg/hero.jpg");
  background-image: image-set(url("assets/bg/hero.webp") type("image/webp"), url("assets/bg/hero.jpg") type("image/jpeg"));
}
.hero-scrim{
  position:absolute; inset:0; z-index:1; pointer-events:none;
  background:
    linear-gradient(180deg, rgba(22,18,13,0) 26%, rgba(22,18,13,0.34) 50%, rgba(22,18,13,0.76) 74%, rgba(20,16,11,1) 100%),
    radial-gradient(120% 78% at 50% 24%, rgba(236,231,221,0) 46%, rgba(236,231,221,0.16) 100%);
}
.hero-inner{
  position:relative; z-index:2; width:100%;
  max-width: var(--maxw); margin-inline:auto;
  padding: 0 clamp(20px,5vw,64px) clamp(30px,5vh,58px);
  text-align:center;
}
.hero h1{ position:absolute; width:1px; height:1px; overflow:hidden; clip:rect(0 0 0 0); }
.hero-sub{
  font-family: var(--serif); font-style:italic; font-weight:600;
  font-size: clamp(1.2rem, 2.5vw, 1.78rem); line-height:1.3;
  color: #ffffff;
  max-width: 32ch; margin: 0 auto 1.3em;
}
.hero-cta{ display:flex; gap:14px; justify-content:center; flex-wrap:wrap; }
.hero .btn{ color: #fff; border-color: color-mix(in oklab, #fff 45%, transparent); }
.hero .btn:hover{ color: var(--gold); border-color: var(--gold); }
.hero .btn-solid{ color: var(--paper); border-color: var(--oxblood); }
.hero .btn-solid:hover{ color: var(--paper); }
.scroll-cue{
  display:flex; flex-direction:column; align-items:center;
  margin: 1.4em auto 0; width:44px; color:#fff; opacity:.92;
}
.scroll-cue svg{ width:27px; height:15px; display:block; }
.scroll-cue svg:nth-child(2){ margin-top:-8px; opacity:.55; }
@media (prefers-reduced-motion: no-preference){
  .scroll-cue svg{ animation: cueBob 1.9s var(--ease) infinite; }
  .scroll-cue svg:nth-child(2){ animation-delay:.12s; }
}
@keyframes cueBob{ 0%,100%{ transform: translateY(-2px); } 50%{ transform: translateY(4px); } }

/* ============================ DREMPEL (descent) ============================ */
.drempel{
  background:
    linear-gradient(180deg,
      var(--paper) 0%, var(--paper) 18%,
      var(--paper-2) 34%, var(--paper-3) 46%,
      #8a7a64 60%, #4a3f31 74%, #281f17 88%, var(--ink) 100%);
  padding: clamp(90px,16vh,190px) 0 clamp(120px,20vh,240px);
  text-align:center;
}
.drempel .wrap{ max-width: 820px; }
.drempel .kicker{ color: var(--oxblood); }
.drempel-quote{
  font-family: var(--serif); font-style: italic;
  font-size: clamp(1.6rem, 4.4vw, 3rem); line-height:1.18;
  color: var(--ink-on-paper); margin: .5em auto .9em; max-width: 18ch;
  text-wrap: balance;
}
.drempel-body{
  color: var(--ink-soft-paper); max-width: 56ch; margin: 0 auto;
  font-size: 1.06rem;
}
.drempel-body.descend{ color: color-mix(in oklab, var(--parch) 80%, transparent); margin-top: 2.4em; }
.drempel .threesome{
  display:flex; gap: clamp(14px,4vw,52px); justify-content:center; flex-wrap:wrap;
  margin: 3.2em auto 0; font-family: var(--disp); text-transform:uppercase;
  letter-spacing:.2em; font-size: clamp(1rem,2.4vw,1.5rem);
}
.drempel .threesome span{ color: color-mix(in oklab, var(--ink-on-paper) 70%, #7a6a55); }
.drempel .threesome span b{ color: var(--oxblood); font-weight:500; }

/* ============================ NUMMERS ============================ */
.songs{ padding: clamp(60px,9vh,120px) 0 clamp(40px,7vh,90px); }
.songs-head{ display:flex; align-items:flex-end; justify-content:space-between; gap:24px; flex-wrap:wrap; margin-bottom: clamp(40px,7vh,80px); }
.songs-head .section-title{ color: var(--parch); }
.songs-head p{ color: var(--parch-soft); max-width: 36ch; margin:0; font-size:1rem; }

.track{
  display:grid; grid-template-columns: minmax(0, 0.92fr) minmax(0, 1.08fr);
  gap: clamp(26px, 4vw, 64px); align-items:center;
  padding: clamp(34px,6vh,76px) 0;
  border-top: 1px solid color-mix(in oklab, var(--parch) 13%, transparent);
}
.track:nth-child(even) .track-art{ order: 2; }
.track-art{
  position:relative; aspect-ratio:1; border-radius: var(--r); overflow:hidden;
  box-shadow: 0 30px 70px -30px rgba(0,0,0,.8), 0 2px 0 rgba(255,255,255,.04) inset;
  transform: translateZ(0);
}
.track-art img{ width:100%; height:100%; object-fit:cover;
  transition: transform 1.1s var(--ease), filter .6s; filter: saturate(.96) contrast(1.02); }
.track:hover .track-art img{ transform: scale(1.045); }
.track-art .frame{ position:absolute; inset:0; box-shadow: inset 0 0 0 1px color-mix(in oklab, var(--gold) 30%, transparent); pointer-events:none; }
.track-meta{ display:flex; align-items:baseline; gap:.7em; flex-wrap:wrap; }
.t-index{ font-family:var(--disp); font-weight:400; font-size:1.5rem; line-height:1; color: var(--gold); letter-spacing:.03em; }
.track-art .play{
  position:absolute; bottom:14px; right:14px; z-index:3;
  width: 58px; height:58px; border-radius:50%;
  display:grid; place-items:center; cursor:pointer;
  color: var(--paper); background: color-mix(in oklab, var(--ink) 55%, transparent);
  border:1px solid color-mix(in oklab, var(--paper) 55%, transparent);
  backdrop-filter: blur(5px); transition: all .3s var(--ease);
}
.track-art .play:hover{ background: var(--oxblood); border-color: var(--oxblood); transform: scale(1.06); }
.track-art .play svg{ width:20px; height:20px; }
.track-art .play .ring{ position:absolute; inset:-1px; border-radius:50%; transform: rotate(-90deg); pointer-events:none; }
.track-art .play .ring circle{ fill:none; stroke: var(--gold); stroke-width:2; stroke-linecap:round; opacity:0; transition:opacity .3s; }
.track-art.playing .play .ring circle{ opacity:1; }
.track-art.playing .play{ background: var(--oxblood); border-color: var(--gold); }

.track-body{ min-width:0; }
.track-body .t-mood{ font-family:var(--cond); text-transform:uppercase; letter-spacing:.2em; font-size:.7rem; color: var(--gold-deep); }
.track-title{
  font-family: var(--cond); font-weight:600; text-transform:uppercase;
  letter-spacing:.01em; font-size: clamp(1.9rem, 4.2vw, 3.1rem); line-height:.98;
  color: var(--parch); margin:.28em 0 .55em;
}
.track-excerpt{
  font-family: var(--serif); font-style:italic;
  font-size: clamp(1.04rem, 1.65vw, 1.3rem); line-height:1.4;
  color: color-mix(in oklab, var(--parch) 92%, var(--gold) 8%);
  margin:0 0 1.5em; padding-left: 1em;
  border-left: 2px solid color-mix(in oklab, var(--oxblood) 75%, transparent);
}
.track-excerpt span{ display:block; }
.track-actions{ display:flex; align-items:center; gap:16px; flex-wrap:wrap; }
.lyrics-toggle{
  font-family:var(--cond); text-transform:uppercase; letter-spacing:.2em; font-size:.72rem;
  color: var(--parch-soft); cursor:pointer; background:none; border:none; padding:8px 0; white-space:nowrap;
  display:inline-flex; align-items:center; gap:.6em; transition: color .3s;
}
.lyrics-toggle:hover{ color: var(--gold); }
.lyrics-toggle .chev{ transition: transform .4s var(--ease); }
.lyrics-toggle[aria-expanded="true"] .chev{ transform: rotate(180deg); }

.lyrics{
  overflow:hidden; max-height:0; transition: max-height .6s var(--ease), opacity .5s;
  opacity:0; margin-top: 0;
}
.lyrics.open{ opacity:1; margin-top: 1.6em; }
.lyrics-inner{
  columns: 2; column-gap: 42px;
  font-size:.98rem; line-height:1.5; color: var(--parch-soft);
  padding-top: 1.4em; border-top: 1px solid color-mix(in oklab,var(--parch) 12%, transparent);
}
.lyrics-inner p{ margin:0 0 1.15em; break-inside: avoid; white-space: pre-line; }
.lyrics-inner p:first-child{ color: var(--parch); }
@media (max-width:680px){ .lyrics-inner{ columns:1; } }

/* ============================ BESTIARIUM ============================ */
.bestiary{
  padding: clamp(80px,12vh,150px) 0;
  background:
    radial-gradient(140% 90% at 50% -10%, color-mix(in oklab,var(--umber) 60%, var(--ink)) 0%, var(--ink) 60%);
  border-top: 1px solid color-mix(in oklab,var(--gold) 14%, transparent);
}
.bestiary-head{ text-align:center; max-width: 720px; margin: 0 auto clamp(40px,7vh,72px); }
.bestiary-head .section-title{ color: var(--parch); }
.bestiary-head p{ color: var(--parch-soft); margin-top:1em; }
.beast-grid{
  display:grid; grid-template-columns: repeat(4, 1fr);
  gap: clamp(16px,2.2vw,28px);
}
.beast{
  position:relative; border-radius: var(--r); overflow:hidden; cursor:pointer;
  background: var(--ink-2); aspect-ratio: 0.82; perspective: 1200px;
  box-shadow: 0 24px 50px -28px rgba(0,0,0,.85);
  border:1px solid color-mix(in oklab,var(--parch) 8%, transparent);
}
.beast .flip{ position:absolute; inset:0; }
.beast .face{ position:absolute; inset:0; transition: opacity .55s var(--ease); }
.beast .face img{ width:100%; height:100%; object-fit:cover; }
.beast .face picture{ position:absolute; inset:0; display:block; width:100%; height:100%; }
.track-art picture{ display:block; width:100%; height:100%; }
.lb-fig picture{ display:block; }
.beast .face.front{ opacity:1; z-index:2; }
.beast .face.front img{ filter: saturate(.97) contrast(1.03); }
.beast .face.back{ opacity:0; z-index:1; background: #efe7d4; }
.beast .face.back img{ object-fit: contain; background:#efe7d4; }
.beast.flipped .face.front{ opacity:0; }
.beast.flipped .face.back{ opacity:1; z-index:3; }
.beast .cap{
  position:absolute; left:0; right:0; bottom:0; z-index:3; pointer-events:none;
  padding: 30px 13px 13px;
  background: linear-gradient(transparent, rgba(8,6,4,.86) 70%);
}
.beast .cap .nm{ font-family:var(--cond); text-transform:uppercase; letter-spacing:0; font-size:.78rem; line-height:1.12; color: var(--paper); overflow-wrap:anywhere; }
.beast .cap .nt{ font-family:var(--serif); font-style:italic; font-size:.86rem; color: var(--parch-soft); line-height:1.3; margin-top:2px; }
.beast .badge{
  position:absolute; top:10px; right:10px; z-index:3;
  font-family:var(--cond); text-transform:uppercase; letter-spacing:.16em; font-size:.56rem;
  color: var(--ink); background: color-mix(in oklab,var(--gold) 86%, white); padding:3px 8px; border-radius:2px;
  opacity:.0; transition: opacity .3s;
}
.beast:hover .badge{ opacity:.92; }
.beast.flipped .badge{ background: var(--parch); }

/* ============================ DUIDING ============================ */
.duiding{ position:relative; padding: clamp(110px,20vh,260px) 0; overflow:hidden; }
.duiding-bg{ position:absolute; inset:0; z-index:0; background: center / cover no-repeat; background-image: url("assets/bg/depths.jpg"); background-image: image-set(url("assets/bg/depths.webp") type("image/webp"), url("assets/bg/depths.jpg") type("image/jpeg")); }
.duiding-bg::after{ content:""; position:absolute; inset:0;
  background: linear-gradient(90deg, var(--ink) 18%, color-mix(in oklab,var(--ink) 72%, transparent) 50%, color-mix(in oklab,var(--ink) 30%, transparent) 78%, transparent 100%),
              linear-gradient(0deg, var(--ink), transparent 38%, transparent 66%, var(--ink)); }
.duiding .wrap{ position:relative; z-index:2; max-width: 920px; }
.duiding .kicker{ color: var(--gold); }
.duiding h2{
  font-family: var(--serif); font-weight:500; font-style:italic;
  font-size: clamp(1.9rem, 4.6vw, 3.4rem); line-height:1.12; color: var(--paper);
  margin:.35em 0 .7em; max-width: 18ch; text-wrap: balance;
}
.duiding p{ color: color-mix(in oklab,var(--parch) 92%, transparent); max-width: 54ch; margin:0 0 1.2em; }
.duiding .pillars{ display:flex; gap: 26px; flex-wrap:wrap; margin-top: 2.4em; }
.pillar{ flex:1 1 200px; border-top:2px solid var(--oxblood); padding-top:14px; }
.pillar h3{ font-family:var(--cond); text-transform:uppercase; letter-spacing:.14em; font-size:1.05rem; color: var(--gold); margin-bottom:.4em; }
.pillar p{ font-size:.95rem; color: var(--parch-soft); }
.pillar .pillar-step{ margin-top:.7em; font-family:var(--serif); font-style:italic; font-size:.9rem; color: var(--gold); opacity:.82; }

/* ============================ VIDEOCLIP ============================ */
.clip{
  padding: clamp(70px,11vh,140px) 0 clamp(60px,9vh,120px);
  background: radial-gradient(130% 80% at 50% 0%, color-mix(in oklab,var(--umber) 42%, var(--ink)) 0%, var(--ink) 58%);
  border-top: 1px solid color-mix(in oklab,var(--gold) 12%, transparent);
}
.clip-head{ text-align:center; max-width: 660px; margin: 0 auto clamp(34px,5vh,56px); }
.clip-head .section-title{ color: var(--parch); }
.clip-head p{ color: var(--parch-soft); margin-top:1em; }
.clip-frame{
  position:relative; max-width: 980px; margin: 0 auto; aspect-ratio: 16/9;
  border-radius: var(--r); overflow:hidden; cursor:pointer; background: var(--ink-2);
  box-shadow: 0 40px 90px -40px rgba(0,0,0,.9);
  border:1px solid color-mix(in oklab,var(--gold) 22%, transparent);
}
.clip-frame .clip-poster{
  width:100%; height:100%; object-fit:cover; object-position:center 38%;
  filter: saturate(.96) contrast(1.03); transition: transform 1.2s var(--ease), filter .6s;
}
.clip-frame:hover .clip-poster{ transform: scale(1.04); }
.clip-scrim{ position:absolute; inset:0; background:
  radial-gradient(80% 60% at 50% 46%, transparent 0%, color-mix(in oklab,var(--ink) 42%, transparent) 100%),
  linear-gradient(0deg, color-mix(in oklab,var(--ink) 78%, transparent) 0%, transparent 42%); pointer-events:none; }
.clip-play{
  position:absolute; left:50%; top:50%; transform: translate(-50%,-50%);
  width: clamp(72px,9vw,96px); aspect-ratio:1; border-radius:50%;
  display:grid; place-items:center; cursor:pointer; z-index:3;
  color: var(--paper); background: color-mix(in oklab, var(--ink) 48%, transparent);
  border:1px solid color-mix(in oklab, var(--paper) 55%, transparent);
  backdrop-filter: blur(5px); transition: all .35s var(--ease);
}
.clip-frame:hover .clip-play{ background: var(--oxblood); border-color: var(--oxblood); transform: translate(-50%,-50%) scale(1.06); }
.clip-play .ico{ width: 34%; height:34%; margin-left:8%; }
.clip-play .ring{ position:absolute; inset:-1px; width:calc(100% + 2px); height:calc(100% + 2px); transform: rotate(-90deg); pointer-events:none; }
.clip-play .ring circle{ fill:none; stroke: var(--gold); stroke-width:2; stroke-linecap:round; opacity:.5; }
.clip-tag{
  position:absolute; left:18px; bottom:16px; z-index:3;
  font-family:var(--cond); text-transform:uppercase; letter-spacing:.2em; font-size:.7rem; color: var(--parch-soft);
}
.clip-frame iframe{ position:absolute; inset:0; width:100%; height:100%; border:0; z-index:4; }
.clip-yt{
  display:inline-flex; align-items:center; gap:.55em; margin: clamp(22px,3.4vh,34px) auto 0;
  width: fit-content; justify-self:center;
  font-family:var(--cond); text-transform:uppercase; letter-spacing:.18em; font-size:.78rem;
  color: var(--parch-soft); transition: color .3s var(--ease);
}
.clip .wrap{ display:flex; flex-direction:column; }
.clip-yt:hover{ color: var(--gold); }

/* ============================ SLOT / CTA ============================ */
.slot{ text-align:center; padding: clamp(110px,20vh,240px) 0 clamp(70px,10vh,120px);
  background: radial-gradient(120% 100% at 50% 120%, color-mix(in oklab,var(--oxblood) 22%, var(--ink)) 0%, var(--ink) 60%); }
.slot .big{
  font-family: var(--disp); text-transform:uppercase; letter-spacing:.06em; font-weight:400;
  font-size: clamp(2.1rem, 7vw, 5rem); line-height:1.0; color: var(--paper);
  margin:0 auto .2em; max-width: 16ch; text-wrap: balance;
}
.slot .big em{ font-style:normal; color: var(--oxblood-bright); }
.slot .sub{ font-family:var(--serif); font-style:italic; color: var(--parch-soft); font-size:1.2rem; margin-bottom: 2.4em; }
.slot .release{ font-family:var(--cond); text-transform:uppercase; letter-spacing:.3em; font-size:.8rem; color: var(--gold); margin-bottom: 2.2em; }
.slot-cta{ display:flex; gap:14px; justify-content:center; flex-wrap:wrap; }

/* footer --------------------------------------------------- */
.foot{ padding: 48px 0 64px; border-top:1px solid color-mix(in oklab,var(--parch) 10%, transparent); }
.foot .wrap{ display:flex; align-items:center; justify-content:space-between; gap:24px; flex-wrap:wrap; }
.foot .brand{ mix-blend-mode:normal; color: var(--parch); }
.socials{ display:flex; gap:10px; }
.socials a{
  width:42px; height:42px; border-radius:50%; display:grid; place-items:center;
  border:1px solid color-mix(in oklab,var(--parch) 22%, transparent); color: var(--parch-soft);
  transition: all .3s var(--ease);
}
.socials a:hover{ color: var(--gold); border-color: var(--gold); transform: translateY(-2px); }
.socials svg{ width:18px; height:18px; }
.foot .fine{ font-size:.8rem; color: var(--parch-faint); font-family:var(--cond); letter-spacing:.08em; }

/* ============================ STICKY PLAYER ============================ */
.player{
  position: fixed; left:50%; bottom: 20px; transform: translate(-50%, 160%);
  z-index: 55; width: min(560px, calc(100vw - 28px));
  display:flex; align-items:center; gap:14px;
  padding: 10px 14px 10px 10px; border-radius: 14px;
  background: color-mix(in oklab, var(--ink-2) 86%, transparent);
  border:1px solid color-mix(in oklab,var(--gold) 24%, transparent);
  box-shadow: 0 24px 60px -22px rgba(0,0,0,.9);
  backdrop-filter: blur(14px) saturate(130%);
  transition: transform .5s var(--ease);
}
.player.show{ transform: translate(-50%, 0); }
.player .p-cover{ width:48px; height:48px; border-radius:8px; object-fit:cover; flex:0 0 auto; }
.player .p-meta{ min-width:0; flex:1; }
.player .p-title{ font-family:var(--cond); text-transform:uppercase; letter-spacing:.08em; font-size:.86rem; color: var(--parch); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.player .p-tag{ font-size:.72rem; color: var(--gold-deep); font-family:var(--cond); letter-spacing:.14em; text-transform:uppercase; }
.player .p-progress{ height:3px; border-radius:2px; background: color-mix(in oklab,var(--parch) 18%, transparent); margin-top:6px; overflow:hidden; }
.player .p-progress i{ display:block; height:100%; width:0; background: linear-gradient(90deg,var(--oxblood),var(--gold)); transition: width .2s linear; }
.player .p-btn{ width:42px; height:42px; border-radius:50%; flex:0 0 auto; display:grid; place-items:center; cursor:pointer;
  background: var(--oxblood); color: var(--paper); border:none; transition: background .3s; }
.player .p-btn:hover{ background: var(--oxblood-bright); }
.player .p-btn svg{ width:18px; height:18px; }
.player .p-close{ background:none; border:none; color: var(--parch-faint); cursor:pointer; padding:6px; flex:0 0 auto; }
.player .p-close:hover{ color: var(--parch); }
.pspin{ animation: pspin .8s linear infinite; transform-origin: 50% 50%; }
@keyframes pspin{ to{ transform: rotate(360deg); } }
.player.loading .p-progress i{
  width: 34% !important;
  background: linear-gradient(90deg, transparent, var(--gold), transparent);
  animation: pshimmer 1.15s ease-in-out infinite;
}
@keyframes pshimmer{ 0%{ margin-left:-34%; } 100%{ margin-left:100%; } }
.track-art.loading .play{ background: var(--oxblood); border-color: var(--gold); }

/* ============================ REVEAL ============================ */
.reveal{ opacity:0; transform: translateY(26px); transition: opacity 1s var(--ease), transform 1.1s var(--ease); }
.reveal.in{ opacity:1; transform:none; }
@media (prefers-reduced-motion: reduce){
  .reveal{ opacity:1 !important; transform:none !important; }
  html{ scroll-behavior:auto; }
  .scroll-hint .line{ animation:none; }
}

/* ============================ RESPONSIVE ============================ */
@media (max-width: 860px){
  .track{ grid-template-columns: 1fr; gap: 22px; }
  .track:nth-child(even) .track-art{ order: 0; }
  .track-art{ max-width: 420px; }
}
@media (max-width: 980px){
  .beast-grid{ grid-template-columns: repeat(3, 1fr); }
}
@media (max-width: 520px){
  .beast-grid{ grid-template-columns: repeat(2, 1fr); }
  .foot .wrap{ flex-direction:column; text-align:center; }
}

/* ============================ LIGHTBOX (bestiarium) ============================ */
.beast{ transition: transform .4s var(--ease), box-shadow .4s var(--ease); }
.beast:hover{ transform: translateY(-4px); box-shadow: 0 34px 64px -28px rgba(0,0,0,.9); }
.beast .cap .nt{ opacity:.92; }
.beast::after{
  content:""; position:absolute; top:10px; left:10px; z-index:3; width:30px; height:30px;
  border-radius:50%; display:block; opacity:0; transition:opacity .3s;
  background: color-mix(in oklab,var(--ink) 55%, transparent);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' fill='none' stroke='%23e8ddc8' stroke-width='2' stroke-linecap='round'%3E%3Cpath d='M3 7V3h4M13 9v4H9'/%3E%3C/svg%3E");
  background-repeat:no-repeat; background-position:center;
  border:1px solid color-mix(in oklab,var(--gold) 40%, transparent);
}
.beast:hover::after{ opacity:.95; }

.lightbox{ position:fixed; inset:0; z-index:80; display:none; }
.lightbox.open{ display:block; }
.lb-backdrop{
  position:absolute; inset:0; opacity:0; transition:opacity .4s var(--ease);
  background: color-mix(in oklab,var(--ink) 82%, black);
  -webkit-backdrop-filter: blur(4px); backdrop-filter: blur(4px);
}
.lightbox.in .lb-backdrop{ opacity:1; }
.lb-panel{
  position:absolute; left:50%; top:50%;
  width: min(1060px, 94vw); max-height: 92vh; overflow:auto;
  background: linear-gradient(180deg, var(--ink-2), var(--ink));
  border:1px solid color-mix(in oklab,var(--gold) 26%, transparent);
  border-radius: 8px; padding: clamp(18px,3vw,34px);
  box-shadow: 0 50px 130px -30px #000;
  transition: transform .46s var(--ease), opacity .4s var(--ease);
  will-change: transform, opacity;
}
.lb-imgs{ display:grid; grid-template-columns:1fr 1fr; gap: clamp(14px,2.4vw,28px); }
.lb-fig{ margin:0; }
.lb-fig img{ width:100%; height: min(58vh, 600px); object-fit:contain; border-radius:4px; display:block; }
.lb-fig:first-child img{ background:#15110d; }
.lb-fig:last-child img{ background:#efe7d4; }
.lb-fig figcaption{ font-family:var(--cond); text-transform:uppercase; letter-spacing:.2em; font-size:.7rem; color:var(--gold-deep); margin-top:12px; text-align:center; }
.lb-cap{ text-align:center; margin-top: 20px; }
.lb-name{ font-family:var(--cond); text-transform:uppercase; letter-spacing:.05em; font-size:1.65rem; color:var(--parch); }
.lb-note{ font-family:var(--serif); font-style:italic; color:var(--parch-soft); margin:.35em 0 0; }
.lb-close{
  position:absolute; top:12px; right:12px; z-index:4; width:44px; height:44px; border-radius:50%;
  display:grid; place-items:center; cursor:pointer; color:var(--parch);
  background: color-mix(in oklab,var(--ink) 62%, transparent);
  border:1px solid color-mix(in oklab,var(--parch) 30%, transparent); transition: all .3s var(--ease);
}
.lb-close:hover{ color:var(--gold); border-color:var(--gold); transform: rotate(90deg); }
@media (max-width:640px){
  .lb-imgs{ grid-template-columns:1fr; }
  .lb-fig img{ height: 40vh; }
}