/* ============================================================
   MESOPOTAMIA RECORDS — Homepage
   Exotic Cyber Mysticism: void black · antique gold · 五色 neon
   Composes the bound DS tokens into page-level atmosphere.
   ============================================================ */

:root{
  /* animation-speed tweak: --am is a duration multiplier (1 = normal,
     <1 = faster, >1 = slower). Driven by the Tweaks panel. */
  --am: 1;
  --reveal-dur: calc(820ms * var(--am));
  --breathe-dur: calc(7s * var(--am));
  --mandala-dur: calc(140s * var(--am));
  --float-dur: calc(11s * var(--am));
}

.site{
  background:var(--void-900);
  color:var(--text-primary);
  font-family:var(--font-serif);
  overflow-x:hidden;
  max-width:100vw;
}
.site *{ box-sizing:border-box; }
.wrap{ width:100%; max-width:var(--content-max); margin:0 auto; padding-inline:var(--gutter); }

/* ---------- scroll reveal ---------- */
.reveal{ opacity:0; transform:translateY(26px);
  transition:opacity var(--reveal-dur) var(--ease-ritual),
             transform var(--reveal-dur) var(--ease-ritual);
  transition-delay:calc(var(--i, 0) * 90ms); will-change:opacity, transform; }
.reveal.is-in{ opacity:1; transform:none; }
@media (prefers-reduced-motion: reduce){
  .reveal{ opacity:1 !important; transform:none !important; }
}

/* ============================================================
   1. NAV
   ============================================================ */
.nav{ position:fixed; inset:0 0 auto 0; z-index:80; display:flex; align-items:center;
  justify-content:space-between; gap:24px; padding:14px var(--gutter);
  background:rgba(5,6,10,.62); backdrop-filter:blur(13px) saturate(1.1);
  border-bottom:1px solid var(--line-hair);
  transition:background var(--dur-base) var(--ease-cyber), border-color var(--dur-base) var(--ease-cyber); }
.nav::after{ content:""; position:absolute; left:0; right:0; bottom:-1px; height:1px;
  background:linear-gradient(90deg, transparent, var(--gold-500) 30%, var(--gold-300) 50%, var(--gold-500) 70%, transparent);
  opacity:.5; }
.nav.is-scrolled{ background:rgba(3,4,8,.86); border-color:rgba(212,175,55,.3); }
.nav__brand{ display:flex; align-items:center; gap:13px; text-decoration:none; }
.nav__mark{ width:40px; height:40px; object-fit:contain; mix-blend-mode:screen;
  filter:drop-shadow(0 0 9px rgba(212,175,55,.45)); }
.nav__name{ font-family:var(--font-display); font-weight:700; font-size:15px;
  letter-spacing:.2em; color:var(--gold-200); line-height:1; }
.nav__name small{ display:block; font-family:var(--font-led); font-size:9px;
  letter-spacing:.34em; color:var(--ink-dim); margin-top:5px; }
.nav__links{ display:flex; align-items:center; gap:34px; }
.nav__link{ font-family:var(--font-tech); font-size:12px; letter-spacing:.26em; text-transform:uppercase;
  color:var(--ink-sand); cursor:pointer; text-decoration:none; position:relative;
  padding:4px 0; transition:color var(--dur-fast) var(--ease-cyber); }
.nav__link::after{ content:""; position:absolute; left:0; right:100%; bottom:-2px; height:1px;
  background:var(--neon-cyan); box-shadow:var(--text-glow-cyan);
  transition:right var(--dur-base) var(--ease-cyber); }
.nav__link:hover{ color:var(--gold-100); }
.nav__link:hover::after{ right:0; }
.nav__link.is-active{ color:var(--gold-200); }
.nav__link.is-active::after{ right:0; background:var(--gold-300); box-shadow:var(--text-glow-gold); }
.nav__cta{ display:flex; align-items:center; gap:9px; }
.nav__burger{ display:none; }
@media (max-width:820px){
  .nav__links{ gap:18px; }
  .nav__link{ display:none; }
  .nav__name small{ display:none; }
}

/* ============================================================
   2. KEY VISUAL / HERO
   ============================================================ */
.hero{ position:relative; min-height:100svh; display:flex; align-items:flex-end;
  padding:128px var(--gutter) 72px; overflow:hidden; background:var(--void-900); }

/* full-bleed key visual */
.hero__kv{ position:absolute; inset:0; z-index:0; overflow:hidden; }
.hero__kv-img{ width:100%; height:100%; object-fit:cover; object-position:center 26%;
  filter:saturate(.92) contrast(1.05) brightness(.9);
  animation:kv-zoom calc(2.8s * var(--am)) var(--ease-ritual) both; }
@keyframes kv-zoom{ from{ transform:scale(1.09); } to{ transform:scale(1); } }
.hero__kv-grid{ position:absolute; inset:0; pointer-events:none;
  background-image:var(--bg-grid); background-size:var(--grid-size) var(--grid-size);
  opacity:.4; mix-blend-mode:overlay; }
.hero__kv-scan{ position:absolute; inset:0; pointer-events:none; opacity:.5; mix-blend-mode:multiply;
  background:repeating-linear-gradient(to bottom, transparent 0 2px, rgba(0,0,0,.16) 2px 3px); }
.hero__kv-scrim{ position:absolute; inset:0; pointer-events:none; background:
  linear-gradient(180deg, rgba(3,4,8,.86) 0%, rgba(3,4,8,.18) 16%, transparent 32%),
  linear-gradient(0deg, var(--void-900) 1%, rgba(5,6,10,.92) 18%, rgba(5,6,10,.45) 40%, transparent 64%),
  radial-gradient(130% 80% at 50% 30%, transparent 46%, rgba(0,0,0,.5) 100%),
  radial-gradient(80% 50% at 50% 116%, rgba(212,175,55,.12), transparent 60%); }

/* faint cuneiform rails on the page edges */
.hero__rail{ position:absolute; top:0; bottom:0; width:48px; z-index:2; display:flex; align-items:center; justify-content:center;
  writing-mode:vertical-rl; font-family:var(--font-glyph); color:var(--gold-300); opacity:.2;
  font-size:21px; letter-spacing:.4em; pointer-events:none; text-shadow:0 0 10px rgba(0,0,0,.6); }
.hero__rail--l{ left:0; border-right:1px solid var(--line-hair); }
.hero__rail--r{ right:0; border-left:1px solid var(--line-hair); }
@media (max-width:680px){ .hero__rail{ display:none; } }

.hero__inner{ position:relative; z-index:3; max-width:min(880px, 100%); }

.hero__eyebrow{ display:inline-flex; align-items:center; gap:14px; margin-bottom:24px;
  font-family:var(--font-tech); font-size:12px; letter-spacing:.4em; text-transform:uppercase;
  color:var(--neon-cyan); text-shadow:var(--text-glow-cyan), 0 1px 6px rgba(0,0,0,.7); }
.hero__eyebrow::before{ content:""; width:42px; height:1px;
  background:linear-gradient(90deg, var(--neon-cyan), transparent); box-shadow:var(--text-glow-cyan); }
.hero__eyebrow .g{ font-family:var(--font-glyph); color:var(--gold-300); text-shadow:var(--text-glow-gold); }

.hero__wordmark{ font-family:var(--font-display); font-weight:900; font-size:clamp(2.3rem, 6vw, 5.2rem);
  line-height:.9; letter-spacing:.01em; margin:0;
  background:var(--grad-gold-text); -webkit-background-clip:text; background-clip:text; color:transparent;
  filter:drop-shadow(0 3px 22px rgba(0,0,0,.7)); }
.hero__feat{ display:flex; align-items:center; gap:16px; flex-wrap:wrap; margin-top:22px; }
.hero__feat-jp{ font-family:var(--font-jp); font-weight:900; font-size:clamp(18px, 2.4vw, 27px);
  letter-spacing:.1em; color:var(--ink-bone); text-shadow:0 1px 10px rgba(0,0,0,.7); }
.hero__feat-meta{ font-family:var(--font-tech); font-size:11px; letter-spacing:.24em; text-transform:uppercase;
  color:var(--gold-300); padding-left:16px; border-left:1px solid var(--line-gold-dim); }
.hero__jp{ font-family:var(--font-jp); font-weight:500; font-size:clamp(16px, 2vw, 22px);
  letter-spacing:.12em; color:var(--ink-sand); margin:20px 0 0; line-height:1.7; text-shadow:0 1px 8px rgba(0,0,0,.6); }
.hero__jp b{ font-weight:900; color:var(--gold-200); }
.hero__cta{ display:flex; flex-wrap:wrap; gap:22px; align-items:center; margin-top:38px; }
.hero__seal{ display:inline-flex; align-items:center; gap:13px;
  font-family:var(--font-tech); font-size:12px; letter-spacing:.4em; text-transform:uppercase; color:var(--gold-300); }
.hero__seal .bar{ width:28px; height:1px; background:var(--gold-500); }
.hero__scroll{ position:absolute; left:50%; bottom:26px; translate:-50% 0; z-index:3;
  display:flex; flex-direction:column; align-items:center; gap:9px;
  font-family:var(--font-led); font-size:10px; letter-spacing:.3em; color:var(--ink-sand); }
.hero__scroll .line{ width:1px; height:42px; background:linear-gradient(var(--gold-400), transparent);
  position:relative; overflow:hidden; }
.hero__scroll .line::after{ content:""; position:absolute; left:0; right:0; top:-40%; height:40%;
  background:var(--gold-200); box-shadow:var(--text-glow-gold);
  animation:scroll-fall calc(2.4s * var(--am)) var(--ease-cyber) infinite; }
@keyframes scroll-fall{ 0%{ transform:translateY(-100%); } 100%{ transform:translateY(360%); } }
@keyframes hero-breathe{ 0%,100%{ opacity:.7; transform:scale(.985); } 50%{ opacity:1; transform:scale(1.025); } }

/* mobile: stack the FULL key visual (all 3 members) above the text */
@media (max-width:760px){
  .hero{ flex-direction:column; align-items:stretch; min-height:auto; padding:72px 0 52px; }
  .hero__kv{ position:relative; inset:auto; width:100%; aspect-ratio:16/9; }
  .hero__kv-img{ object-position:center; animation:none; transform:none; }
  .hero__kv-scrim{ background:
    linear-gradient(180deg, rgba(3,4,8,.7) 0%, transparent 24%),
    linear-gradient(0deg, var(--void-900) 0%, rgba(5,6,10,.55) 16%, transparent 44%); }
  .hero__rail, .hero__scroll{ display:none; }
  .hero__inner{ max-width:100%; padding-block:30px 0; }
  .hero__wordmark{ font-size:clamp(1.7rem, 9vw, 3.1rem); line-height:.95; letter-spacing:0; }
  .hero__eyebrow{ margin-bottom:18px; font-size:10px; letter-spacing:.28em; }
}
@media (max-width:680px){ .hero__scroll{ display:none; } }

/* ============================================================
   SECTION SHELL
   ============================================================ */
.section{ position:relative; padding-block:var(--section-y); }
.section--alt{ background:var(--void-800); }
.section__bg{ position:absolute; inset:0; pointer-events:none;
  background-image:var(--bg-grid); background-size:var(--grid-size) var(--grid-size); opacity:.7; }
.section__head{ position:relative; display:flex; align-items:flex-end; justify-content:space-between;
  gap:28px; margin-bottom:58px; flex-wrap:wrap; }
.section__eyebrow{ font-family:var(--font-tech); font-size:12px; letter-spacing:.36em; text-transform:uppercase;
  color:var(--gold-300); display:flex; align-items:center; gap:13px; }
.section__eyebrow .g{ font-family:var(--font-glyph); color:var(--gold-500); }
.section__title{ font-family:var(--font-display); font-weight:800; font-size:var(--fs-h1);
  letter-spacing:.04em; margin:16px 0 0; color:var(--ink-bone); line-height:1; }
.section__title .jp{ font-family:var(--font-jp); font-weight:900; letter-spacing:.06em; }
.section__romaji{ display:block; font-family:var(--font-tech); font-weight:500; font-size:14px;
  letter-spacing:.32em; text-transform:uppercase; color:var(--gold-400); margin-top:14px; }
.section__num{ font-family:var(--font-tech); font-size:13px; letter-spacing:.3em; color:var(--gold-500); }
.section__lede{ font-family:var(--font-serif); font-size:clamp(17px, 1.6vw, 21px); color:var(--ink-sand);
  max-width:46ch; line-height:1.7; }

/* ============================================================
   3. ARTIST — 微苦中年団
   ============================================================ */
.members{ display:grid; grid-template-columns:repeat(3, 1fr); gap:26px; }
@media (max-width:900px){ .members{ grid-template-columns:1fr; max-width:440px; margin-inline:auto; } }

.member{ position:relative; background:var(--void-700); clip-path:var(--cut-ziggurat);
  box-shadow:var(--shadow-panel), inset 0 0 0 1px var(--line-hair);
  transition:transform var(--dur-base) var(--ease-ritual), box-shadow var(--dur-base) var(--ease-ritual); }
.member:hover{ transform:translateY(-5px);
  box-shadow:var(--shadow-float), 0 0 30px -8px rgba(155,92,255,.4), inset 0 0 0 1px rgba(212,175,55,.45); }

/* portrait plate — stone tablet × ID card */
.member__plate{ position:relative; aspect-ratio:4/5; overflow:hidden; background:var(--void-800); }
.member__photo{ position:absolute; inset:0; z-index:0; }
.member__photo img{ width:100%; height:100%; object-fit:cover; object-position:24% 28%;
  filter:saturate(.95) contrast(1.05) brightness(.94);
  transition:transform var(--dur-slow) var(--ease-ritual); }
.member:hover .member__photo img{ transform:scale(1.045); }
.member__grid{ position:absolute; inset:0; z-index:1; pointer-events:none;
  background-image:var(--bg-grid); background-size:20px 20px; opacity:.22; mix-blend-mode:overlay; }
.member__scan{ position:absolute; inset:0; z-index:1; pointer-events:none; opacity:.4; mix-blend-mode:overlay;
  background:repeating-linear-gradient(to bottom, transparent 0 3px, rgba(0,0,0,.22) 3px 4px); }
.member__plate-scrim{ position:absolute; inset:0; z-index:1; pointer-events:none; background:
  linear-gradient(180deg, rgba(5,6,10,.5) 0%, transparent 24%),
  linear-gradient(0deg, rgba(5,6,10,.8) 0%, transparent 32%); }
.member__cune{ position:absolute; z-index:2; top:0; bottom:0; right:13px; writing-mode:vertical-rl;
  font-family:var(--font-glyph); font-size:15px; letter-spacing:.32em; color:var(--gold-200); opacity:.5;
  display:flex; align-items:center; text-shadow:0 0 8px rgba(0,0,0,.8); }
.member__frame{ position:absolute; z-index:2; inset:11px; pointer-events:none;
  box-shadow:inset 0 0 0 1px rgba(212,175,55,.4); clip-path:var(--cut-bevel); }
.member__id{ position:absolute; z-index:3; top:16px; left:16px; font-family:var(--font-tech); font-weight:700;
  font-size:11px; letter-spacing:.22em; color:var(--neon-cyan); text-shadow:var(--text-glow-cyan), 0 1px 4px rgba(0,0,0,.85); }
.member__mono{ position:absolute; z-index:3; top:14px; right:14px; font-family:var(--font-glyph); font-size:26px;
  color:var(--gold-200); text-shadow:var(--text-glow-gold), 0 1px 6px rgba(0,0,0,.85); }

.member__body{ padding:22px 24px 26px; }
.member__role{ font-family:var(--font-tech); font-size:11px; letter-spacing:.26em; text-transform:uppercase;
  color:var(--neon-cyan); text-shadow:var(--text-glow-cyan); margin:0 0 11px; }
.member__name{ font-family:var(--font-display); font-weight:700; font-size:24px; letter-spacing:.05em;
  color:var(--gold-200); margin:0; line-height:1.05; }
.member__name-jp{ font-family:var(--font-jp); font-weight:500; font-size:14px; color:var(--ink-dim);
  letter-spacing:.08em; margin:7px 0 0; }
.member__tags{ display:flex; gap:9px; flex-wrap:wrap; margin-top:18px; }

/* base / genre strip under the trio */
.gapstrip{ position:relative; margin-top:40px; display:flex; align-items:stretch; flex-wrap:wrap;
  background:var(--void-900); clip-path:var(--cut-tab); box-shadow:inset 0 0 0 1px rgba(45,226,230,.28); }
.gapstrip__cell{ display:flex; align-items:center; gap:13px; padding:20px 28px; }
.gapstrip__cell + .gapstrip__cell{ border-left:1px solid var(--line-hair); }
.gapstrip__k{ font-family:var(--font-tech); font-size:11px; letter-spacing:.22em; text-transform:uppercase; color:var(--neon-cyan); }
.gapstrip__v{ font-family:var(--font-jp); font-weight:700; font-size:17px; color:var(--ink-bone); }
.gapstrip__pulse{ margin-left:auto; padding:20px 28px; font-family:var(--font-led); font-size:12px;
  color:var(--neon-magenta); text-shadow:var(--text-glow-magenta); display:flex; align-items:center; gap:11px; }
@media (max-width:620px){ .gapstrip__pulse{ margin-left:0; width:100%; border-top:1px solid var(--line-hair); } }

/* ============================================================
   4. ABOUT — creed + mandala
   ============================================================ */
.about{ position:relative; overflow:hidden; }
.about__silhouettes{ position:absolute; inset:0; pointer-events:none; z-index:0; opacity:.5; }
.about__inner{ position:relative; z-index:2; display:grid; grid-template-columns:1.05fr .95fr; gap:64px; align-items:center; }
@media (max-width:940px){ .about__inner{ grid-template-columns:1fr; gap:48px; } }
.about__copy p{ font-family:var(--font-serif); font-size:clamp(18px, 1.7vw, 22px); line-height:1.85;
  color:var(--ink-sand); margin:0 0 26px; max-width:50ch; }
.about__copy .lead{ color:var(--ink-bone); }
.about__points{ list-style:none; padding:0; margin:30px 0 0; display:flex; flex-direction:column; gap:14px; }
.about__points li{ display:flex; align-items:baseline; gap:14px; font-family:var(--font-jp); font-weight:500;
  font-size:15px; letter-spacing:.06em; color:var(--ink-bone); }
.about__points .g{ font-family:var(--font-glyph); color:var(--gold-400); font-size:16px; }
.about__points b{ font-family:var(--font-tech); font-weight:700; font-size:11px; letter-spacing:.2em;
  color:var(--neon-cyan); text-transform:uppercase; }

/* the inscribed creed inside a mandala */
.creed{ position:relative; aspect-ratio:1; display:flex; align-items:center; justify-content:center;
  margin-inline:auto; width:min(100%, 460px); }
.mandala{ position:absolute; inset:0; }
.mandala i{ position:absolute; border-radius:50%; }
.mandala .r1{ inset:0; box-shadow:inset 0 0 0 1px rgba(212,175,55,.22); }
.mandala .r2{ inset:7%; box-shadow:inset 0 0 0 1px rgba(212,175,55,.16); }
.mandala .r3{ inset:21%; box-shadow:inset 0 0 0 1px rgba(45,226,230,.22); }
.mandala .r4{ inset:30%; box-shadow:inset 0 0 0 1px rgba(212,175,55,.5), 0 0 30px -6px rgba(212,175,55,.35) inset; }
.mandala .spokes{ inset:7%; opacity:.4; mix-blend-mode:screen;
  background:repeating-conic-gradient(from 0deg, rgba(212,175,55,.4) 0deg .5deg, transparent .5deg 7.5deg); }
.mandala .ticks{ inset:0; opacity:.55;
  background:repeating-conic-gradient(from 0deg, rgba(212,175,55,.55) 0deg .4deg, transparent .4deg 30deg);
  -webkit-mask:radial-gradient(closest-side, transparent 92%, #000 92%);
          mask:radial-gradient(closest-side, transparent 92%, #000 92%); }
.mandala .ring-cune{ inset:9.5%; display:flex; align-items:center; justify-content:center;
  animation:spin var(--mandala-dur) linear infinite; }
.mandala .ring-cune span{ position:absolute; left:50%; top:50%; font-family:var(--font-glyph);
  font-size:15px; color:var(--gold-400); opacity:.6; }
.mandala .glow{ inset:26%; background:radial-gradient(closest-side, rgba(155,92,255,.22), transparent 70%);
  filter:blur(6px); animation:hero-breathe var(--breathe-dur) var(--ease-ritual) infinite; }
@keyframes spin{ to{ transform:rotate(360deg); } }

.creed__core{ position:relative; z-index:3; text-align:center; padding:14px; }
.creed__label{ font-family:var(--font-tech); font-size:10px; letter-spacing:.4em; text-transform:uppercase;
  color:var(--gold-500); margin-bottom:14px; }
.creed__text{ font-family:var(--font-display); font-weight:900; font-size:clamp(30px, 4.6vw, 50px);
  line-height:.94; letter-spacing:.03em; margin:0;
  background:var(--grad-gold-text); -webkit-background-clip:text; background-clip:text; color:transparent;
  filter:drop-shadow(0 1px 0 rgba(0,0,0,.7)) drop-shadow(0 0 18px rgba(212,175,55,.4)); }
.creed__jp{ font-family:var(--font-jp); font-weight:500; font-size:13px; letter-spacing:.34em;
  color:var(--ink-sand); margin-top:16px; }

/* ============================================================
   RELEASE — 華金スカイウォーカー
   ============================================================ */
.release__inner{ position:relative; display:grid; grid-template-columns:minmax(0, 1fr) minmax(0, 1fr);
  gap:56px; align-items:center; }
@media (max-width:880px){ .release__inner{ grid-template-columns:minmax(0, 1fr); gap:40px; max-width:520px; margin-inline:auto; } }

.release__art{ position:relative; min-width:0; }
.release__art-frame{ position:relative; aspect-ratio:1; overflow:hidden; padding:clamp(13px, 3%, 22px);
  background:linear-gradient(150deg, rgba(212,175,55,.22), rgba(5,6,10,.9) 55%), var(--void-800);
  clip-path:var(--cut-ziggurat); box-shadow:var(--shadow-float), inset 0 0 0 1px rgba(212,175,55,.4);
  transition:box-shadow var(--dur-base) var(--ease-ritual); }
.release__art:hover .release__art-frame{ box-shadow:var(--shadow-float), 0 0 44px -8px rgba(212,175,55,.5), inset 0 0 0 1px rgba(212,175,55,.7); }
.release__art-frame img{ width:100%; height:100%; object-fit:contain; display:block;
  box-shadow:0 0 0 1px rgba(212,175,55,.5), 0 10px 30px -10px rgba(0,0,0,.7);
  transition:transform var(--dur-slow) var(--ease-ritual); }
.release__art:hover .release__art-frame img{ transform:scale(1.025); }
.release__art-grid{ position:absolute; inset:0; pointer-events:none; background-image:var(--bg-grid);
  background-size:24px 24px; opacity:.1; mix-blend-mode:overlay; }
.release__art-scan{ position:absolute; inset:0; pointer-events:none; opacity:.16; mix-blend-mode:overlay;
  background:repeating-linear-gradient(to bottom, transparent 0 3px, rgba(0,0,0,.22) 3px 4px); }
.release__spin{ margin-top:18px; overflow:hidden; white-space:nowrap; max-width:100%;
  font-family:var(--font-tech); font-size:11px; letter-spacing:.3em; color:var(--gold-400); opacity:.6;
  -webkit-mask:linear-gradient(90deg, transparent, #000 12%, #000 88%, transparent);
          mask:linear-gradient(90deg, transparent, #000 12%, #000 88%, transparent); }

.release__badges{ display:flex; gap:11px; flex-wrap:wrap; margin-bottom:22px; }
.release__meta{ min-width:0; }
.release__kicker{ font-family:var(--font-tech); font-size:12px; letter-spacing:.3em; text-transform:uppercase;
  color:var(--neon-cyan); text-shadow:var(--text-glow-cyan); margin:0 0 14px; }
.release__title{ font-family:var(--font-jp); font-weight:900; font-size:clamp(30px, 4.4vw, 50px);
  letter-spacing:.04em; line-height:1.08; margin:0;
  background:var(--grad-gold-text); -webkit-background-clip:text; background-clip:text; color:transparent;
  filter:drop-shadow(0 0 16px rgba(212,175,55,.28)); }
.release__title-en{ font-family:var(--font-display); font-weight:700; font-size:15px; letter-spacing:.34em;
  text-transform:uppercase; color:var(--ink-sand); margin:12px 0 0; }
.release__lyric{ font-family:var(--font-serif); font-style:italic; font-size:clamp(16px, 1.6vw, 20px);
  line-height:1.7; color:var(--ink-bone); margin:24px 0 0; padding-left:18px; max-width:42ch;
  border-left:2px solid var(--line-gold-dim); }

.release__credits{ display:grid; grid-template-columns:1fr 1fr; gap:0; margin:30px 0 0;
  border-top:1px solid var(--line-hair); }
@media (max-width:460px){ .release__credits{ grid-template-columns:1fr; } }
.release__credit{ display:flex; flex-direction:column; gap:5px; padding:15px 0;
  border-bottom:1px solid var(--line-hair); }
.release__credit:nth-child(odd){ padding-right:20px; border-right:1px solid var(--line-hair); }
.release__credit:nth-child(even){ padding-left:20px; }
@media (max-width:460px){ .release__credit:nth-child(odd){ padding-right:0; border-right:none; } .release__credit:nth-child(even){ padding-left:0; } }
.release__credit dt{ font-family:var(--font-tech); font-size:10px; letter-spacing:.24em; text-transform:uppercase; color:var(--gold-500); }
.release__credit dd{ font-family:var(--font-jp); font-weight:700; font-size:16px; color:var(--ink-bone); margin:0; }
.release__tba{ font-family:var(--font-jp); font-weight:500; font-size:12px; color:var(--ink-dim); }
.release__tags{ display:flex; gap:9px; flex-wrap:wrap; margin-top:26px; }
.release__cta{ display:flex; gap:14px; flex-wrap:wrap; margin-top:30px; }

/* ============================================================
   5. FOOTER
   ============================================================ */
.footer{ position:relative; padding:84px var(--gutter) 40px; background:var(--void-800); overflow:hidden;
  border-top:1px solid var(--line-hair); }
.footer__cune{ position:absolute; inset:0; padding:20px; pointer-events:none;
  font-family:var(--font-glyph); color:var(--gold-300); opacity:.045; font-size:38px; line-height:1.6;
  letter-spacing:.2em; word-break:break-all; }
.footer__rule{ position:relative; z-index:2; display:flex; align-items:center; gap:18px; color:var(--gold-500);
  margin-bottom:54px; }
.footer__rule::before, .footer__rule::after{ content:""; flex:1; height:1px;
  background:linear-gradient(90deg, transparent, var(--gold-500), transparent); }
.footer__rule .g{ font-family:var(--font-glyph); font-size:18px; color:var(--gold-400); letter-spacing:.3em; }
.footer__inner{ position:relative; z-index:2; display:flex; flex-direction:column; align-items:center; text-align:center; gap:18px; }
.footer__mark{ width:64px; height:64px; object-fit:contain; mix-blend-mode:screen;
  filter:drop-shadow(0 0 14px rgba(212,175,55,.4)); }
.footer__name{ font-family:var(--font-display); font-weight:700; font-size:clamp(28px, 5vw, 46px);
  letter-spacing:.16em; margin:0;
  background:var(--grad-gold-text); -webkit-background-clip:text; background-clip:text; color:transparent; }
.footer__policy{ font-family:var(--font-tech); font-size:13px; letter-spacing:.42em; text-transform:uppercase;
  color:var(--neon-cyan); text-shadow:var(--text-glow-cyan); }
.footer__sub{ font-family:var(--font-led); font-size:12px; letter-spacing:.16em; color:var(--ink-dim); }
.footer__links{ display:flex; gap:30px; flex-wrap:wrap; justify-content:center; margin-top:10px; }
.footer__link{ font-family:var(--font-tech); font-size:12px; letter-spacing:.26em; text-transform:uppercase;
  color:var(--ink-sand); text-decoration:none; cursor:pointer; transition:color var(--dur-fast) var(--ease-cyber); }
.footer__link:hover{ color:var(--gold-200); }
.footer__social{ display:flex; gap:16px; flex-wrap:wrap; justify-content:center; margin-top:22px; }
.footer__social-link{ display:inline-flex; align-items:center; gap:10px;
  font-family:var(--font-tech); font-size:11px; letter-spacing:.24em; text-transform:uppercase;
  color:var(--gold-300); text-decoration:none; cursor:pointer;
  padding:9px 18px; clip-path:var(--cut-bevel); box-shadow:inset 0 0 0 1px var(--line-gold-dim);
  transition:color var(--dur-fast) var(--ease-cyber), box-shadow var(--dur-base) var(--ease-cyber), background var(--dur-base) var(--ease-cyber); }
.footer__social-link .g{ font-family:var(--font-glyph); font-size:14px; color:var(--gold-400); }
.footer__social-link:hover{ color:var(--gold-100); background:rgba(212,175,55,.07);
  box-shadow:inset 0 0 0 1px rgba(212,175,55,.55), 0 0 22px -8px rgba(212,175,55,.55); }
.footer__legal{ margin-top:34px; padding-top:24px; border-top:1px solid var(--line-hair);
  width:100%; text-align:center; font-family:var(--font-led); font-size:11px; letter-spacing:.18em; color:var(--ink-faint); }