/* ════════════════════════════════════════════════════════════
   NØKKEN — style.css
   Gothic dark-techno aesthetic · Cinzel Decorative typography
   ════════════════════════════════════════════════════════════ */

/* ── RESET & ROOT ── */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

:root {
  --ink:        #070709;
  --void:       #0b0b0d;
  --dark:       #101014;
  --mid:        #18181e;
  --surface:    #202028;
  --border:     #2a2a35;
  --border-lt:  #363644;
  --muted:      #55556a;
  --silver:     #8888a0;
  --ash:        #b8b8cc;
  --cream:      #e4e0d8;
  --white:      #f2efe8;
  --gold:       #c8a86a;
  --gold-dim:   #8a7248;
  --gold-glow:  rgba(200,168,106,0.18);
  --red:        #c44040;
  --green:      #1db954;

  --font-display: 'Cinzel Decorative', serif;
  --font-serif:   'Cinzel', serif;
  --font-body:    'EB Garamond', serif;

  --nav-h: 70px;
  --ease-out: cubic-bezier(0.16, 1, 0.3, 1);
  --ease-in-out: cubic-bezier(0.65, 0, 0.35, 1);
}

html {
  scroll-behavior: smooth;
  font-size: 16px;
}

body {
  background: var(--ink);
  color: var(--cream);
  font-family: var(--font-body);
  font-size: 1.0625rem;
  line-height: 1.7;
  overflow-x: hidden;
  cursor: none;
}

body::before {
  content: '';
  position: fixed;
  inset: 0;
  z-index: 9999;
  pointer-events: none;
  opacity: 0.15;
  background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 256 256' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='noise'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23noise)'/%3E%3C/svg%3E");
  background-size: 200px 200px;
  background-repeat: repeat;
}

body::after {
  content: '';
  position: fixed;
  inset: 0;
  z-index: 9998;
  pointer-events: none;
  background: radial-gradient(
    ellipse at center,
    transparent 50%,
    rgba(0, 0, 0, 0.80) 100%
  );
}

.logo {
    height: 70px;
}

@media (hover: none) { body { cursor: auto; } }

img, svg { display: block; }
a { color: inherit; text-decoration: none; }
button { background: none; border: none; cursor: none; font: inherit; }
ul { list-style: none; }
input, textarea, select { font: inherit; }


/* ── GRAIN OVERLAY ── */
.grain {
  position: fixed; inset: 0; z-index: 9990; pointer-events: none;
  background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 512 512' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.72' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='1'/%3E%3C/svg%3E");
  opacity: 0.032;
}


/* ── CUSTOM CURSOR ── */
.cursor {
  position: fixed; z-index: 9999; pointer-events: none;
  width: 10px; height: 10px;
  background: var(--gold);
  border-radius: 50%;
  transform: translate(-50%, -50%);
  transition: width .2s var(--ease-out), height .2s var(--ease-out),
              background .2s, opacity .2s;
  mix-blend-mode: difference;
  opacity: 0;
}

.cursor.visible { opacity: 1; }
.cursor.hovering { width: 40px; height: 40px; background: rgba(200,168,106,.15); }

.cursor-trail {
  position: fixed; z-index: 9998; pointer-events: none;
  width: 32px; height: 32px;
  border: 1px solid rgba(200,168,106,.35);
  border-radius: 50%;
  transform: translate(-50%, -50%);
  transition: left .12s var(--ease-out), top .12s var(--ease-out), opacity .2s;
  opacity: 0;
}

.cursor-trail.visible { opacity: 1; }


/* ════════════════════════════════════════
   NAVIGATION
════════════════════════════════════════ */
.nav-wrap {
  position: fixed; top: 0; left: 0; right: 0; z-index: 800;
  transition: background .4s, backdrop-filter .4s, border-color .4s;
}

.nav-wrap.scrolled {
  background: rgba(7,7,9,.88);
  backdrop-filter: blur(20px) saturate(1.2);
  border-bottom: 1px solid var(--border);
}

.nav {
  display: flex; align-items: center; justify-content: center;
  height: var(--nav-h);
  padding: 0 190px;
  position: relative;
}

.nav-list {
  display: flex; align-items: center;
  gap: 38px;
  flex: 1;
}

.nav-list.nav-right { justify-content: flex-end; }

.nav-link {
  font-family: var(--font-serif);
  font-size: 10px; font-weight: 600;
  letter-spacing: .22em;
  text-transform: uppercase;
  color: var(--silver);
  position: relative;
  padding-bottom: 3px;
  transition: color .25s;
}

.nav-link::after {
  content: '';
  position: absolute; bottom: 0; left: 0;
  width: 100%; height: 1px;
  background: var(--gold);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform .3s var(--ease-out);
}

.nav-link:hover,
.nav-link.active { color: var(--cream); }
.nav-link:hover::after,
.nav-link.active::after { transform: scaleX(1); }

/* Brand */
.nav-brand {
  flex-shrink: 0;
  display: flex; flex-direction: column; align-items: center;
  gap: 5px;
  padding: 0 48px;
}

.nav-brand-text {
  font-family: var(--font-display);
  font-size: 17px; font-weight: 700;
  letter-spacing: .28em;
  color: var(--cream);
  text-shadow: 0 0 40px rgba(200,168,106,.4);
  transition: text-shadow .3s;
}

.nav-brand:hover .nav-brand-text {
  text-shadow: 0 0 60px rgba(200,168,106,.7);
}

.nav-brand-rule {
  display: block;
  width: 40px; height: 1px;
  background: linear-gradient(90deg, transparent, var(--gold), transparent);
}

/* Hamburger */
.nav-burger {
  display: none;
  flex-direction: column; justify-content: center; align-items: center;
  gap: 5px;
  width: 36px; height: 36px;
  position: absolute; right: 20px;
}

.nav-burger span {
  display: block; width: 22px; height: 1px;
  background: var(--cream);
  transition: transform .3s, opacity .3s;
}

.nav-burger.open span:nth-child(1) { transform: translateY(6px) rotate(45deg); }
.nav-burger.open span:nth-child(2) { opacity: 0; }
.nav-burger.open span:nth-child(3) { transform: translateY(-6px) rotate(-45deg); }

/* Mobile drawer */
.nav-drawer {
  position: absolute; top: var(--nav-h); left: 0; right: 0;
  background: rgba(7,7,9,.97);
  backdrop-filter: blur(20px);
  border-bottom: 1px solid var(--border);
  padding: 0;
  max-height: 0; overflow: hidden;
  transition: max-height .4s var(--ease-out), padding .4s;
}

.nav-drawer.open {
  max-height: 400px;
  padding: 20px 0;
}

.drawer-list { padding: 0 40px; }
.drawer-link {
  display: block;
  font-family: var(--font-serif);
  font-size: 11px; letter-spacing: .25em;
  text-transform: uppercase;
  color: var(--silver);
  padding: 14px 0;
  border-bottom: 1px solid var(--border);
  transition: color .2s, padding-left .2s;
}

.drawer-link:last-child { border-bottom: none; }
.drawer-link:hover { color: var(--cream); padding-left: 8px; }

@media (max-width: 860px) {
  .nav-list { display: none; }
  .nav-brand { padding: 0; }
  .nav-burger { display: flex; }
}


/* ════════════════════════════════════════
   SECTION COMMON
════════════════════════════════════════ */
.section { position: relative; }
.section-inner {
  max-width: 1160px;
  margin: 0 auto;
  padding: 110px 48px;
}

.section-header {
  text-align: center;
  margin-bottom: 64px;
}

.section-header--left {
  text-align: left;
  margin-bottom: 40px;
}

.section-ornament {
  display: flex; align-items: center; justify-content: center;
  gap: 16px; margin-bottom: 20px;
}

.section-ornament--left { justify-content: flex-start; }

.orn-line {
  flex: 1; max-width: 120px; height: 1px;
  background: linear-gradient(90deg, transparent, var(--gold-dim), var(--border));
}

.orn-line:last-child {
  background: linear-gradient(90deg, var(--border), var(--gold-dim), transparent);
}

.orn-line--short { flex: none; width: 60px; }

.orn-rune {
  width: 28px; height: 28px;
  color: var(--gold);
  flex-shrink: 0;
}

.section-title {
  font-family: var(--font-display);
  font-size: clamp(22px, 3vw, 36px);
  font-weight: 700;
  letter-spacing: .08em;
  color: var(--white);
  line-height: 1.15;
  margin-bottom: 12px;
}

.section-sub {
  font-family: var(--font-body);
  font-style: italic;
  font-size: 1.0625rem;
  color: var(--muted);
  letter-spacing: .04em;
}

/* Reveal animations */
.reveal-up, .reveal-left, .reveal-right {
  opacity: 0;
  transform: translateY(36px);
  transition: opacity .7s var(--ease-out) var(--d, 0s),
              transform .7s var(--ease-out) var(--d, 0s);
}

.reveal-left  { transform: translateX(-40px); }
.reveal-right { transform: translateX(40px); }

.revealed {
  opacity: 1 !important;
  transform: none !important;
}

/* Shared button */
.btn {
  display: inline-flex; align-items: center; gap: 10px;
  font-family: var(--font-serif);
  font-size: 10px; font-weight: 600;
  letter-spacing: .28em;
  text-transform: uppercase;
  padding: 14px 32px;
  border: 1px solid transparent;
  position: relative;
  transition: background .25s, border-color .25s, color .25s, box-shadow .25s;
  overflow: hidden;
  cursor: none;
}

.btn::before {
  content: '';
  position: absolute; inset: 0;
  background: var(--gold);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform .35s var(--ease-out);
  z-index: 0;
}

.btn span, .btn svg { position: relative; z-index: 1; }

.btn--primary {
  background: transparent;
  border-color: var(--gold);
  color: var(--gold);
}

.btn--primary:hover {
  color: var(--ink);
  box-shadow: 0 0 30px rgba(200,168,106,.25);
}

.btn--primary:hover::before { transform: scaleX(1); }

.btn--ghost {
  background: transparent;
  border-color: var(--border-lt);
  color: var(--silver);
}

.btn--ghost::before { background: var(--surface); }

.btn--ghost:hover {
  border-color: var(--silver);
  color: var(--cream);
}

.btn--ghost:hover::before { transform: scaleX(1); }

.btn--sm { padding: 9px 20px; font-size: 9px; }

.btn--full { width: 100%; justify-content: center; }

.btn-arrow {
  width: 16px; height: 16px;
  stroke: currentColor; stroke-width: 1.5;
  fill: none;
  transition: transform .25s;
}

.btn:hover .btn-arrow { transform: translateX(4px); }


/* ════════════════════════════════════════
   § 01  HERO
════════════════════════════════════════ */
.hero {
  position: relative;
  height: 100vh; min-height: 700px;
  display: flex; flex-direction: column;
  align-items: center; justify-content: flex-end;
  padding-bottom: 120px;
  overflow: hidden;
}

/* SKY */
.hero-sky {
  position: absolute; inset: 0; z-index: 0;
  background: radial-gradient(ellipse 70% 55% at 50% 18%, #14202e 0%, #0a0f18 45%, #07070a 100%);
  overflow: hidden;
}

.sky-moon {
  position: absolute;
  top: 10%; left: 50%; transform: translateX(-50%);
  width: 64px; height: 64px;
  background: radial-gradient(circle, rgba(220,225,240,.55) 30%, rgba(180,190,220,.18) 65%, transparent 100%);
  border-radius: 50%;
  filter: blur(4px);
  animation: moonPulse 8s ease-in-out infinite;
}

.sky-halo {
  position: absolute;
  top: calc(10% - 30px); left: 50%; transform: translateX(-50%);
  width: 160px; height: 160px;
  background: radial-gradient(circle, rgba(180,190,220,.06) 30%, transparent 70%);
  border-radius: 50%;
  animation: moonPulse 8s ease-in-out infinite reverse;
}

@keyframes moonPulse {
  0%,100% { opacity: .7; transform: translateX(-50%) scale(1); }
  50%      { opacity: 1;  transform: translateX(-50%) scale(1.06); }
}

.sky-cloud {
  position: absolute;
  background: radial-gradient(ellipse, rgba(30,40,60,.55) 0%, transparent 70%);
  border-radius: 50%;
  filter: blur(18px);
  animation: cloudDrift linear infinite;
}

.sky-cloud--a { width: 340px; height: 80px; top: 22%; left: -5%;  animation-duration: 70s; }
.sky-cloud--b { width: 260px; height: 60px; top: 30%; right: 5%;  animation-duration: 90s; animation-delay: -30s; }
.sky-cloud--c { width: 200px; height: 50px; top: 16%; left: 40%;  animation-duration: 110s; animation-delay: -50s; }

@keyframes cloudDrift {
  from { transform: translateX(0); }
  to   { transform: translateX(120px); }
}

.sky-stars {
  position: absolute; inset: 0;
}

/* TREES */
.hero-trees {
  position: absolute;
  bottom: 42%; left: 0; right: 0; height: 22%;
  z-index: 1;
  background: rgba(7,7,9,1);
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1440 200' preserveAspectRatio='none'%3E%3Cpath d='M0,200 L0,155 L25,148 L32,100 L39,148 L50,132 L62,68 L74,132 L81,112 L96,44 L111,112 L118,88 L128,138 L140,118 L152,158 L168,142 L176,72 L188,142 L200,122 L216,52 L228,122 L235,98 L248,28 L261,98 L274,78 L282,122 L298,102 L312,150 L325,134 L338,60 L351,134 L364,114 L380,42 L393,114 L400,92 L416,20 L429,92 L442,72 L452,118 L468,98 L482,150 L495,132 L508,58 L521,132 L534,112 L550,38 L563,112 L570,90 L585,24 L598,90 L611,70 L621,118 L636,98 L650,148 L664,130 L677,58 L690,130 L703,110 L718,36 L731,110 L738,88 L752,22 L765,88 L778,68 L788,118 L803,98 L817,148 L830,130 L843,56 L856,130 L869,110 L885,38 L898,110 L905,88 L920,18 L933,88 L946,68 L956,116 L972,96 L986,148 L999,128 L1012,56 L1025,128 L1038,108 L1054,34 L1067,108 L1074,86 L1088,22 L1101,86 L1114,66 L1124,114 L1140,94 L1154,145 L1167,128 L1180,55 L1193,128 L1206,108 L1222,35 L1235,108 L1242,85 L1256,20 L1269,85 L1282,65 L1292,115 L1308,95 L1322,148 L1335,130 L1348,56 L1361,130 L1374,110 L1390,36 L1403,110 L1410,88 L1424,145 L1440,155 L1440,200 Z' fill='white'/%3E%3C/svg%3E");
  mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1440 200' preserveAspectRatio='none'%3E%3Cpath d='M0,200 L0,155 L25,148 L32,100 L39,148 L50,132 L62,68 L74,132 L81,112 L96,44 L111,112 L118,88 L128,138 L140,118 L152,158 L168,142 L176,72 L188,142 L200,122 L216,52 L228,122 L235,98 L248,28 L261,98 L274,78 L282,122 L298,102 L312,150 L325,134 L338,60 L351,134 L364,114 L380,42 L393,114 L400,92 L416,20 L429,92 L442,72 L452,118 L468,98 L482,150 L495,132 L508,58 L521,132 L534,112 L550,38 L563,112 L570,90 L585,24 L598,90 L611,70 L621,118 L636,98 L650,148 L664,130 L677,58 L690,130 L703,110 L718,36 L731,110 L738,88 L752,22 L765,88 L778,68 L788,118 L803,98 L817,148 L830,130 L843,56 L856,130 L869,110 L885,38 L898,110 L905,88 L920,18 L933,88 L946,68 L956,116 L972,96 L986,148 L999,128 L1012,56 L1025,128 L1038,108 L1054,34 L1067,108 L1074,86 L1088,22 L1101,86 L1114,66 L1124,114 L1140,94 L1154,145 L1167,128 L1180,55 L1193,128 L1206,108 L1222,35 L1235,108 L1242,85 L1256,20 L1269,85 L1282,65 L1292,115 L1308,95 L1322,148 L1335,130 L1348,56 L1361,130 L1374,110 L1390,36 L1403,110 L1410,88 L1424,145 L1440,155 L1440,200 Z' fill='white'/%3E%3C/svg%3E");
  -webkit-mask-size: 100% 100%;
  mask-size: 100% 100%;
}

/* WATER */
.hero-water {
  position: absolute;
  bottom: 0; left: 0; right: 0;
  height: 45%;
  z-index: 2;
  background: linear-gradient(180deg,
    rgba(12,16,24,.0)   0%,
    rgba(10,13,20,.7)   30%,
    rgba(8,9,12,.92)   65%,
    rgba(7,7,9,1)     100%
  );
  overflow: hidden;
}

.water-shimmer {
  position: absolute;
  left: 20%; right: 20%; height: 1px;
  top: 20%;
  background: linear-gradient(90deg,
    transparent 0%, rgba(140,160,200,.2) 30%,
    rgba(200,210,230,.35) 50%,
    rgba(140,160,200,.2) 70%, transparent 100%
  );
  animation: shimmer 6s ease-in-out infinite;
}

.water-shimmer--2 { left: 8%; right: 8%; top: 28%; animation-delay: 1.5s; opacity: .6; }
.water-shimmer--3 { left: 0;  right: 0;  top: 36%; animation-delay: 3s;   opacity: .4; }

@keyframes shimmer {
  0%,100% { transform: scaleX(.88); opacity: .4; }
  50%      { transform: scaleX(1.02); opacity: 1; }
}

/* FIGURE */
.hero-figure {
  position: absolute;
  bottom: 38%; left: 50%; transform: translateX(-50%);
  z-index: 3;
  width: 100px; height: 220px;
}

.figure-body {
  position: absolute;
  top: 0; left: 50%; transform: translateX(-50%);
  width: 42px; height: 200px;
  background: linear-gradient(180deg,
    rgba(18,20,28,.0) 0%,
    rgba(12,13,18,.9) 15%,
    rgba(9,10,14,.96) 42%,
    rgba(12,14,20,.8) 68%,
    transparent 88%
  );
  clip-path: polygon(36% 0%, 64% 0%, 78% 22%, 82% 56%, 88% 100%, 12% 100%, 18% 56%, 22% 22%);
}

.figure-hair {
  position: absolute;
  top: 0; left: 50%; transform: translateX(-50%);
  width: 80px; height: 110px;
  background: radial-gradient(ellipse 100% 80% at 50% 10%,
    rgba(10,11,15,.92) 0%, rgba(10,12,16,.7) 45%, transparent 75%
  );
  clip-path: ellipse(50% 65% at 50% 25%);
  filter: blur(1.5px);
}

.figure-glow {
  position: absolute;
  bottom: 30%; left: 50%; transform: translateX(-50%);
  width: 120px; height: 20px;
  background: radial-gradient(ellipse, rgba(100,130,180,.12) 0%, transparent 70%);
  border-radius: 50%;
  filter: blur(6px);
  animation: figureGlow 5s ease-in-out infinite;
}

@keyframes figureGlow {
  0%,100% { opacity: .5; transform: translateX(-50%) scaleX(.9); }
  50%      { opacity: 1;  transform: translateX(-50%) scaleX(1.1); }
}

/* VIGNETTE / FADES */
.hero-vignette {
  position: absolute; inset: 0; z-index: 4; pointer-events: none;
  background:
    radial-gradient(ellipse 80% 70% at 50% 50%,
      transparent 30%, rgba(7,7,9,.6) 100%
    );
}

.hero-bottom-fade {
  position: absolute; bottom: 0; left: 0; right: 0; z-index: 5;
  height: 30%;
  background: linear-gradient(to bottom, transparent, var(--ink));
}

/* CONTENT */
.hero-content {
  position: relative; z-index: 10;
  text-align: center;
  padding: 0 24px;
}

.hero-eyebrow {
  font-family: var(--font-serif);
  font-size: 9px; font-weight: 600;
  letter-spacing: .5em;
  color: var(--gold);
  text-transform: uppercase;
  margin-bottom: 24px;
}

.hero-title {
  font-family: var(--font-display);
  font-size: clamp(38px, 7vw, 82px);
  font-weight: 900;
  letter-spacing: .06em;
  color: var(--white);
  line-height: 1;
  margin-bottom: 24px;
  text-shadow: 0 4px 30px rgba(0,0,0,.8), 0 0 80px rgba(200,168,106,.12);
}

.hero-title-line {
  display: block;
}

.hero-title-line--into {
  font-style: italic;
  font-size: .72em;
  color: var(--ash);
  letter-spacing: .18em;
}

.hero-sub {
  font-family: var(--font-serif);
  font-size: 11px; letter-spacing: .36em;
  color: var(--muted);
  text-transform: uppercase;
  margin-bottom: 44px;
}

.hero-cta {
  display: flex; align-items: center; justify-content: center;
  gap: 16px; flex-wrap: wrap;
}

/* SCROLL HINT */
.hero-scroll-hint {
  position: absolute; bottom: 40px; left: 50%; transform: translateX(-50%);
  z-index: 10;
  display: flex; flex-direction: column; align-items: center; gap: 10px;
  opacity: .5;
  animation: hintFade 2s ease-in-out 2s both;
}

@keyframes hintFade {
  from { opacity: 0; transform: translateX(-50%) translateY(10px); }
  to   { opacity: .5; transform: translateX(-50%) translateY(0); }
}

.scroll-hint-line {
  display: block; width: 1px; height: 36px;
  background: linear-gradient(to bottom, var(--gold), transparent);
  animation: lineExtend 2s ease-in-out infinite;
}

@keyframes lineExtend {
  0%,100% { transform: scaleY(.6); transform-origin: top; }
  50%      { transform: scaleY(1); }
}

.scroll-hint-text {
  font-family: var(--font-serif);
  font-size: 8px; letter-spacing: .3em;
  color: var(--gold);
  text-transform: uppercase;
}

/* Hero reveal-up */
.hero-content .reveal-up {
  animation: heroReveal .9s var(--ease-out) var(--d, 0s) both;
}

@keyframes heroReveal {
  from { opacity: 0; transform: translateY(28px); }
  to   { opacity: 1; transform: translateY(0); }
}


/* ════════════════════════════════════════
   § 02  RELEASES
════════════════════════════════════════ */
.releases {
  background: linear-gradient(180deg, var(--ink) 0%, var(--void) 50%, var(--ink) 100%);
}



@media (max-width: 900px) {
  .releases-grid { grid-template-columns: 1fr; }
}

/* Release card */
.release-card {
  background: var(--mid);
  border: 1px solid var(--border);
  overflow: hidden;
  transition: border-color .3s, box-shadow .3s;
  place-items: center;
}

.release-card:hover {
  border-color: var(--border-lt);
  box-shadow: 0 20px 0px rgba(0,0,0,.5);
}

.release-card--featured {
  display: grid;
  grid-template-columns: 1fr 1fr;
}

@media (max-width: 700px) {
  .release-card--featured { grid-template-columns: 1fr; }
}

.releases-side {
  display: flex; flex-direction: column; gap: 10px;
}

.releases-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 24px;
  align-items: start;
  width: 100%;        /* fill the parent */
  max-width: 1100px;
  margin: 0 auto;
}

/* Cover artwork */
.release-cover {
  position: relative;
  aspect-ratio: 1;
  overflow: hidden;
}

.release-cover--small { aspect-ratio: 1 / .85; }

.cover-art {
  width: 100%; height: 100%;
  position: relative;
  display: flex; align-items: center; justify-content: center;
  overflow: hidden;
}

.cover-art--submerged {
  background: radial-gradient(ellipse 80% 70% at 40% 55%,
    #1e1408 0%, #0e0a05 55%, #060404 100%
  );
}

.cover-art--nokken {
  background: radial-gradient(ellipse 70% 65% at 50% 40%,
    #0e1420 0%, #080c16 55%, #040609 100%
  );
}

.cover-art--deep {
  background: radial-gradient(ellipse 80% 70% at 48% 60%,
    #0e1520 0%, #060c16 55%, #030508 100%
  );
}

.cover-logo-wrap {
  position: absolute; top: 22%; left: 0; right: 0;
  text-align: center; z-index: 2;
}

.cover-logo {
  font-family: var(--font-display);
  font-size: clamp(12px, 2vw, 18px);
  font-weight: 700;
  letter-spacing: .22em;
  color: rgba(220,210,195,.82);
  text-shadow: 0 0 20px rgba(200,168,106,.35), 1px 1px 4px rgba(0,0,0,.95);
}

.cover-deco--skull {
  position: absolute; bottom: 18%; left: 50%; transform: translateX(-50%);
  width: 50px; height: 50px;
  background: radial-gradient(circle,
    rgba(50,35,20,.8) 0%, rgba(30,20,10,.5) 50%, transparent 70%
  );
  border-radius: 50%;
  box-shadow: 0 0 18px rgba(80,55,25,.3);
  z-index: 1;
}

.cover-figure-small {
  position: absolute;
  bottom: 14%; left: 50%; transform: translateX(-50%);
  width: 22px; height: 55px;
  background: linear-gradient(180deg, transparent, rgba(12,14,22,.88), transparent 90%);
  clip-path: polygon(35% 0%, 65% 0%, 75% 55%, 85% 100%, 15% 100%, 25% 55%);
  z-index: 1;
}

.cover-creature {
  position: absolute;
  bottom: 15%; left: 50%; transform: translateX(-50%);
  width: 44px; height: 44px;
  background: radial-gradient(ellipse 60% 40% at 50% 60%,
    rgba(20,25,35,.7) 0%, transparent 70%
  );
  z-index: 1;
}

.cover-fog {
  position: absolute; bottom: 0; left: 0; right: 0; height: 40%;
  background: linear-gradient(180deg, transparent, rgba(8,10,14,.7));
  z-index: 2;
}

/* Hover overlay */
.release-hover-overlay {
  position: absolute; inset: 0; z-index: 5;
  background: rgba(7,7,9,.5);
  display: flex; align-items: center; justify-content: center;
  opacity: 0;
  transition: opacity .3s;
}

.release-card:hover .release-hover-overlay { opacity: 1; }

.play-btn {
  width: 56px; height: 56px;
  border-radius: 50%;
  border: 1px solid var(--gold);
  display: flex; align-items: center; justify-content: center;
  color: var(--gold);
  transition: background .2s, transform .2s;
  cursor: none;
}

.play-btn svg { width: 20px; height: 20px; fill: currentColor; }
.play-btn:hover { background: var(--gold); color: var(--ink); transform: scale(1.08); }

/* Meta */
.release-meta {
  padding: 28px 32px;
  display: flex; flex-direction: column; justify-content: center;
  background: var(--mid);
}

.release-meta--small {
  padding: 20px 24px;
  flex-direction: row; align-items: center;
  gap: 20px;
  justify-content: center;
  flex-wrap: wrap;
}

.release-badge {
  display: inline-block;
  font-family: var(--font-serif);
  font-size: 8px; font-weight: 600;
  letter-spacing: .3em;
  text-transform: uppercase;
  color: var(--ink);
  background: var(--gold);
  padding: 3px 10px;
  margin-bottom: 14px;
  align-self: flex-start;
}

.release-title {
  font-family: var(--font-display);
  font-size: 11px; letter-spacing: .15em;
  font-weight: 700;
  color: var(--silver);
  margin-bottom: 4px;
}

.release-year {
  font-family: var(--font-serif);
  font-size: 11px; letter-spacing: .15em;
  color: var(--white);
  text-transform: uppercase;
  margin-bottom: 16px;
}

.release-desc {
  font-style: italic;
  font-size: .9375rem;
  color: var(--silver);
  margin-bottom: 24px;
  line-height: 1.65;
}

.release-links {
  display: flex; gap: 8px; flex-wrap: wrap;
}

.stream-btn {
  display: inline-flex; align-items: center; gap: 6px;
  font-family: var(--font-serif);
  font-size: 9px; font-weight: 600;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--silver);
  border: 1px solid var(--border);
  padding: 6px 12px;
  transition: border-color .2s, color .2s, background .2s;
  cursor: none;
}

.stream-btn svg { width: 12px; height: 12px; fill: currentColor; flex-shrink: 0; }

.stream-btn:hover { border-color: var(--silver); color: var(--cream); }

.stream-btn--spotify { color: var(--green); border-color: rgba(29,185,84,.3); }
.stream-btn--spotify:hover { background: rgba(29,185,84,.08); border-color: var(--green); }


/* ════════════════════════════════════════
   § 03  TOUR
════════════════════════════════════════ */
.tour {
  background: linear-gradient(180deg, var(--ink), var(--void) 50%, var(--ink));
  position: relative;
}

.tour::before {
  content: '';
  position: absolute; top: 0; left: 0; right: 0; height: 1px;
  background: linear-gradient(90deg, transparent, var(--border), transparent);
}

.tour-table {
  border: 1px solid var(--border);
  overflow: hidden;
}

.tour-row {
  display: grid;
  grid-template-columns: 110px 1fr 1fr 130px;
  align-items: center;
  padding: 0 28px;
  min-height: 64px;
  border-bottom: 1px solid var(--border);
  transition: background .2s;
  cursor: default;
}

.tour-row:last-child { border-bottom: none; }
.tour-row:not(.tour-row--header):hover { background: var(--mid); }

.tour-row--header {
  min-height: 44px;
  background: var(--surface);
  border-bottom: 1px solid var(--border-lt);
}

.tour-col {
  font-family: var(--font-serif);
  font-size: 10px; letter-spacing: .18em;
  text-transform: uppercase;
}

.tour-row--header .tour-col { color: var(--muted); font-size: 9px; }

.tour-col--date {
  display: flex; align-items: baseline; gap: 8px;
}

.date-day {
  font-family: var(--font-display);
  font-size: 22px; font-weight: 700;
  color: var(--gold);
  line-height: 1;
}

.date-mo {
  font-size: 9px; letter-spacing: .15em;
  color: var(--muted);
  text-transform: uppercase;
}

.tour-col--city {
  font-size: 13px; letter-spacing: .1em;
  color: var(--cream);
  font-family: var(--font-body);
}

.tour-col--venue {
  font-size: 12px;
  color: var(--silver);
  font-family: var(--font-body);
  font-style: italic;
  letter-spacing: 0;
}

.tour-col--action { text-align: right; }

.ticket-btn {
  font-family: var(--font-serif);
  font-size: 8px; font-weight: 600;
  letter-spacing: .28em;
  text-transform: uppercase;
  color: var(--gold);
  border: 1px solid var(--gold-dim);
  padding: 7px 16px;
  transition: background .2s, color .2s;
  cursor: none;
}

.ticket-btn:hover { background: var(--gold); color: var(--ink); }

.ticket-btn--sold {
  color: var(--muted);
  border-color: var(--border);
  pointer-events: none;
}

.tour-footer {
  margin-top: 40px;
  text-align: center;
}

@media (max-width: 700px) {
  .tour-row {
    grid-template-columns: 80px 1fr;
    grid-template-rows: 1fr 1fr;
    padding: 16px 20px; gap: 4px;
  }
  .tour-col--venue { display: none; }
  .tour-col--action { grid-column: 2; text-align: left; }
  .date-day { font-size: 18px; }
}


/* ════════════════════════════════════════
   § 04  ABOUT
════════════════════════════════════════ */
.about {
  background: var(--void);
  position: relative; overflow: hidden;
}

.about::before {
  content: '';
  position: absolute; inset: 0;
  background: radial-gradient(ellipse 60% 50% at 15% 50%,
    rgba(200,168,106,.04) 0%, transparent 65%
  );
  pointer-events: none;
}

.about-grid {
  display: grid;
  grid-template-columns: 420px 1fr;
  gap: 80px;
  align-items: stretch;
}

@media (max-width: 1000px) {
  .about-grid { grid-template-columns: 1fr; gap: 56px; }
}

/* Portrait */
.about-visual {
  display: flex;
  flex-direction: column;
}

.about-portrait {
  flex: 1;
  width: 100%;
  aspect-ratio: 3/4;
  border: 1px solid var(--border);
  overflow: hidden;
  position: relative;
}

.portrait-scene {
  width: 100%; height: 100%;
  position: relative;
  overflow: hidden;
}

.portrait-bg {
  position: absolute; inset: 0;
  background: radial-gradient(ellipse 80% 60% at 50% 35%,
    #12192a 0%, #0a0f1c 50%, #050709 100%
  );
}

.portrait-water {
  position: absolute;
  bottom: 0; left: 0; right: 0; height: 45%;
  background: linear-gradient(180deg,
    rgba(10,15,25,.0) 0%,
    rgba(8,12,20,.7) 40%,
    rgba(5,7,10,.95) 100%
  );
  animation: portraitWater 8s ease-in-out infinite;
}

@keyframes portraitWater {
  0%,100% { clip-path: polygon(0 15%, 20% 12%, 40% 16%, 60% 11%, 80% 15%, 100% 12%, 100% 100%, 0 100%); }
  50%      { clip-path: polygon(0 12%, 20% 16%, 40% 11%, 60% 15%, 80% 12%, 100% 16%, 100% 100%, 0 100%); }
}

.portrait-figure {
  position: absolute;
  bottom: 38%; left: 50%; transform: translateX(-50%);
  width: 35px; height: 110px;
  background: linear-gradient(180deg,
    transparent 0%, rgba(8,10,15,.92) 18%,
    rgba(6,7,11,.96) 45%, transparent 88%
  );
  clip-path: polygon(34% 0%, 66% 0%, 78% 22%, 82% 58%, 88% 100%, 12% 100%, 18% 58%, 22% 22%);
  z-index: 2;
  filter: blur(.5px);
}

.portrait-rune {
  position: absolute;
  font-family: monospace;
  color: rgba(200,168,106,.25);
  font-size: 18px;
  animation: runeFloat 6s ease-in-out infinite;
  z-index: 3;
}

.portrait-rune--a { top: 12%; left: 12%; animation-delay: 0s; }
.portrait-rune--b { top: 18%; right: 14%; animation-delay: 1.5s; }
.portrait-rune--c { bottom: 28%; left: 10%; animation-delay: 3s; }
.portrait-rune--d { bottom: 35%; right: 12%; animation-delay: 4.5s; }

@keyframes runeFloat {
  0%,100% { opacity: .2; transform: translateY(0); }
  50%      { opacity: .6; transform: translateY(-6px); }
}

.portrait-glow {
  position: absolute; inset: 0; pointer-events: none;
  background: radial-gradient(ellipse 40% 30% at 50% 25%,
    rgba(180,195,220,.07) 0%, transparent 65%
  );
  animation: portraitGlow 8s ease-in-out infinite;
}

@keyframes portraitGlow {
  0%,100% { opacity: .5; }
  50%      { opacity: 1; }
}

/* Counters */
.about-counter-row {
  display: flex; gap: 0;
  margin-top: 0;
  border: 1px solid var(--border);
  border-top: none;
}

.about-counter {
  flex: 1;
  padding: 20px 16px;
  text-align: center;
  border-right: 1px solid var(--border);
}

.about-counter:last-child { border-right: none; }

.counter-num {
  display: block;
  font-family: var(--font-display);
  font-size: 28px; font-weight: 900;
  color: var(--gold);
  line-height: 1;
  margin-bottom: 6px;
}

.counter-label {
  font-family: var(--font-serif);
  font-size: 8px; letter-spacing: .25em;
  color: var(--muted);
  text-transform: uppercase;
}

/* Text column */
.about-body {
  font-size: 1.0625rem;
  color: var(--silver);
  margin-bottom: 20px;
  line-height: 1.78;
}

.about-body:first-of-type { color: var(--ash); }

.about-members {
  display: flex; flex-direction: column; gap: 16px;
  margin-top: 36px;
  border-top: 1px solid var(--border);
  padding-top: 28px;
}

.member {
  display: flex; align-items: center; gap: 20px;
}

.member-sigil {
  width: 44px; height: 44px;
  border: 1px solid var(--border);
  display: flex; align-items: center; justify-content: center;
  font-family: monospace; font-size: 18px;
  color: var(--gold);
  flex-shrink: 0;
  background: var(--mid);
}

.member-name {
  font-family: var(--font-serif);
  font-size: 12px; font-weight: 600;
  letter-spacing: .12em;
  color: var(--cream);
  text-transform: uppercase;
  margin-bottom: 3px;
}

.member-role {
  font-size: .875rem;
  font-style: italic;
  color: var(--muted);
}


/* ════════════════════════════════════════
   § 05  MERCH
════════════════════════════════════════ */
.merch {
  background: linear-gradient(180deg, var(--ink), var(--void) 50%, var(--ink));
}

.merch-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 20px;
}

@media (max-width: 900px) { .merch-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 560px) { .merch-grid { grid-template-columns: 1fr; } }

.merch-card {
  background: var(--mid);
  border: 1px solid var(--border);
  transition: border-color .3s;
}

.merch-card:hover { border-color: var(--border-lt); }

.merch-img {
  position: relative;
  aspect-ratio: 1;
  overflow: hidden;
}

/* Merch artwork */
.merch-art {
  width: 100%; height: 100%;
  display: flex; align-items: center; justify-content: center;
  position: relative;
  overflow: hidden;
}

.merch-art--tee-black {
  background: linear-gradient(145deg, #0e0e12, #080808);
}

.merch-art--tee-grey {
  background: linear-gradient(145deg, #28282e, #1e1e24);
}

.merch-art--hoodie {
  background: linear-gradient(145deg, #0c0c10, #050508);
}

.merch-art--vinyl {
  background: radial-gradient(circle, #1a1a20, #0a0a0e);
  display: flex; align-items: center; justify-content: center;
  flex-direction: column; gap: 12px;
}

.merch-art--poster {
  background: linear-gradient(180deg, #0e141e 0%, #070a10 100%);
  position: relative;
}

.merch-art--bundle {
  background: linear-gradient(145deg, #121016, #0a0808);
}

.merch-art-inner {
  position: absolute; inset: 0;
  display: flex; flex-direction: column;
  align-items: center; justify-content: center; gap: 12px;
}

.merch-art-logo {
  font-family: var(--font-display);
  font-size: 15px; font-weight: 700;
  letter-spacing: .2em;
  color: rgba(220,210,195,.7);
  text-shadow: 0 0 15px rgba(200,168,106,.3);
  text-align: center;
}

.merch-art-logo--sm  { font-size: 12px; }
.merch-art-logo--vinyl { font-size: 10px; letter-spacing: .15em; text-align: center; color: rgba(200,190,175,.55); position: relative; z-index: 2; }
.merch-art-logo--poster { font-size: 13px; }

.merch-art-sigil {
  font-family: monospace;
  font-size: 26px;
  color: rgba(200,168,106,.35);
}

.merch-art-sigil--sm { font-size: 20px; }

/* Vinyl disc */
.merch-art-vinyl-disc {
  width: 65%; aspect-ratio: 1;
  background: radial-gradient(circle, #1c1c22 0%, #0d0d10 60%, #050507 100%);
  border-radius: 50%;
  border: 1px solid rgba(255,255,255,.05);
  display: flex; align-items: center; justify-content: center;
  position: relative; z-index: 1;
  animation: vinylSpin 8s linear infinite;
}

@keyframes vinylSpin {
  from { transform: rotate(0deg); }
  to   { transform: rotate(360deg); }
}

.merch-card:hover .merch-art-vinyl-disc { animation-duration: 3s; }

.merch-art-vinyl-center {
  width: 18%; aspect-ratio: 1;
  background: radial-gradient(circle, #1e1810, #0e0d0a);
  border-radius: 50%;
  border: 1px solid rgba(200,168,106,.2);
}

/* Poster water lines */
.merch-art-water-line {
  position: absolute;
  left: 10%; right: 10%; height: 1px;
  top: 50%;
  background: linear-gradient(90deg, transparent, rgba(120,140,180,.2), rgba(160,180,220,.35), rgba(120,140,180,.2), transparent);
}

/* Merch hover overlay */
.merch-hover {
  position: absolute; inset: 0;
  background: rgba(7,7,9,.6);
  display: flex; align-items: center; justify-content: center;
  gap: 10px; flex-wrap: wrap;
  opacity: 0;
  transition: opacity .3s;
  padding: 16px;
}

.merch-card:hover .merch-hover { opacity: 1; }

/* Tags */
.merch-tag {
  position: absolute; top: 12px; left: 12px;
  font-family: var(--font-serif);
  font-size: 7px; font-weight: 600;
  letter-spacing: .25em;
  text-transform: uppercase;
  background: var(--gold);
  color: var(--ink);
  padding: 3px 8px;
  z-index: 2;
}

.merch-tag--low { background: var(--red); color: #fff; }
.merch-tag--sale { background: transparent; border: 1px solid var(--gold); color: var(--gold); }

/* Info */
.merch-info {
  padding: 16px 20px;
  display: flex; align-items: center; justify-content: space-between;
  border-top: 1px solid var(--border);
}

.merch-name {
  font-family: var(--font-serif);
  font-size: 11px; font-weight: 600;
  letter-spacing: .1em;
  color: var(--ash);
  text-transform: uppercase;
}

.merch-price {
  font-family: var(--font-display);
  font-size: 14px; font-weight: 700;
  color: var(--gold);
}

.price-old {
  color: var(--muted);
  font-size: 11px;
  text-decoration: line-through;
  margin-right: 6px;
}


/* ════════════════════════════════════════
   § 06  CONTACT
════════════════════════════════════════ */
.contact {
  background: var(--void);
  position: relative;
}

.contact::before {
  content: '';
  position: absolute; inset: 0;
  background: radial-gradient(ellipse 50% 40% at 80% 50%,
    rgba(200,168,106,.04) 0%, transparent 65%
  );
  pointer-events: none;
}

.contact-grid {
  display: grid;
  grid-template-columns: 300px 1fr;
  gap: 80px;
  align-items: start;
}

@media (max-width: 900px) {
  .contact-grid { grid-template-columns: 1fr; gap: 48px; }
}

.contact-block { margin-bottom: 36px; }

.contact-label {
  font-family: var(--font-serif);
  font-size: 9px; font-weight: 600;
  letter-spacing: .3em;
  text-transform: uppercase;
  color: var(--gold);
  margin-bottom: 8px;
}

.contact-link {
  font-size: 1.0625rem;
  color: var(--silver);
  transition: color .2s;
  border-bottom: 1px solid transparent;
}

.contact-link:hover { color: var(--cream); border-color: var(--border-lt); }

.social-row {
  display: flex; gap: 14px; flex-wrap: wrap;
  margin-top: 10px;
}

.social-link {
  width: 38px; height: 38px;
  border: 1px solid var(--border);
  display: flex; align-items: center; justify-content: center;
  color: var(--muted);
  transition: border-color .2s, color .2s, background .2s;
  cursor: none;
}

.social-link svg { width: 16px; height: 16px; fill: currentColor; }
.social-link:hover { border-color: var(--gold-dim); color: var(--gold); background: var(--gold-glow); }

/* Form */
.contact-form-wrap {
  background: var(--mid);
  border: 1px solid var(--border);
  padding: 40px 44px;
}

@media (max-width: 600px) {
  .contact-form-wrap { padding: 28px 24px; }
}

.form-group {
  margin-bottom: 28px;
  position: relative;
}

.form-label {
  display: block;
  font-family: var(--font-serif);
  font-size: 9px; font-weight: 600;
  letter-spacing: .3em;
  text-transform: uppercase;
  color: var(--muted);
  margin-bottom: 10px;
  transition: color .2s;
}

.form-group:focus-within .form-label { color: var(--gold); }

.form-input {
  width: 100%;
  background: var(--surface);
  border: 1px solid var(--border);
  color: var(--cream);
  padding: 13px 16px;
  font-size: 1rem;
  outline: none;
  transition: border-color .25s, box-shadow .25s;
  -webkit-appearance: none;
  appearance: none;
  border-radius: 0;
}

.form-input:focus {
  border-color: var(--gold-dim);
  box-shadow: 0 0 0 1px rgba(200,168,106,.15);
}

.form-input::placeholder { color: var(--muted); }

.form-select {
  cursor: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6' fill='none'%3E%3Cpath d='M1 1l4 4 4-4' stroke='%2355556a' stroke-width='1.2'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 14px center;
  padding-right: 36px;
}

.form-select option {
  background: var(--surface);
  color: var(--cream);
}

.form-textarea { resize: vertical; min-height: 120px; }

.form-error {
  display: block;
  font-family: var(--font-serif);
  font-size: 9px; letter-spacing: .15em;
  color: var(--red);
  margin-top: 6px;
  height: 14px;
}

.form-input.has-error { border-color: var(--red); }

.form-success {
  display: none;
  align-items: center; gap: 12px;
  padding: 16px 20px;
  border: 1px solid rgba(200,168,106,.3);
  background: rgba(200,168,106,.05);
  margin-top: 16px;
  font-style: italic;
  color: var(--gold);
  font-size: .9375rem;
}

.form-success svg { width: 22px; height: 22px; flex-shrink: 0; }
.form-success.visible { display: flex; }


/* ════════════════════════════════════════
   FOOTER
════════════════════════════════════════ */
.footer {
  background: var(--ink);
  border-top: 1px solid var(--border);
  padding: 56px 48px 32px;
}

.footer-inner {
  max-width: 1160px; margin: 0 auto;
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  gap: 40px;
  margin-bottom: 48px;
}

@media (max-width: 700px) {
  .footer-inner { grid-template-columns: 1fr; text-align: center; gap: 32px; }
  .footer-nav { flex-wrap: wrap; justify-content: center; }
}

.footer-brand {}

.footer-logo {
  font-family: var(--font-display);
  font-size: 20px; font-weight: 700;
  letter-spacing: .28em;
  color: var(--cream);
  display: block; margin-bottom: 8px;
  text-shadow: 0 0 30px rgba(200,168,106,.3);
}

.footer-tagline {
  font-style: italic;
  font-size: .875rem;
  color: var(--muted);
}

.footer-nav {
  display: flex; gap: 28px;
}

.footer-link {
  font-family: var(--font-serif);
  font-size: 9px; font-weight: 600;
  letter-spacing: .2em;
  text-transform: uppercase;
  color: var(--muted);
  transition: color .2s;
}

.footer-link:hover { color: var(--cream); }

.footer-copy {
  text-align: right;
}

@media (max-width: 700px) { .footer-copy { text-align: center; } }

.footer-copy p {
  font-family: var(--font-serif);
  font-size: 9px; letter-spacing: .15em;
  color: var(--muted);
  margin-bottom: 4px;
}

.footer-credit { color: #3a3a4a !important; }

.footer-rule {
  max-width: 1160px; margin: 0 auto;
  display: flex; align-items: center; gap: 24px;
}

.footer-rule span:first-child,
.footer-rule span:last-child {
  flex: 1; height: 1px;
  background: linear-gradient(90deg, transparent, var(--border));
}

.footer-rule span:last-child {
  background: linear-gradient(90deg, var(--border), transparent);
}

.footer-rune {
  font-family: monospace;
  font-size: 12px; letter-spacing: .35em;
  color: var(--border-lt);
  flex: none;
}

.releases-footer {
  text-align: center;
  margin-top: 40px;
}

.see-all-btn {
  display: inline-block;
  font-family: var(--font-serif);
  font-size: 10px;
  font-weight: 600;
  letter-spacing: .25em;
  text-transform: uppercase;
  color: var(--gold);
  border: 1px solid var(--gold);
  padding: 12px 32px;
  transition: background .2s, color .2s;
}

.see-all-btn:hover {
  background: var(--gold);
  color: var(--ink);
}