/* ============================================================
   MINDFORGE — cinematic dark stylesheet
   Palette + rules from MINDFORGE_BRAND_GUIDELINES.md
   ============================================================ */

:root {
  --mf-black: #0A0A0D;
  --mf-midnight: #0F1623;
  --mf-deep-navy: #152436;
  --mf-slate-blue: #2A3D4F;
  --mf-icy-white: #E6EEF3;
  --mf-soft-grey: #9FA7B1;
  --mf-ember-red: #B1121A;
  /* Ember for TEXT. The brand ember reads at 2.80:1 on the near-black
     background — fine for a mark, a rule or a border, below the 4.5:1
     that small text needs. This lighter ember is for the small
     letterspaced labels ONLY (4.75:1 on near-black). The brand red
     above stays the brand red everywhere else. */
  --mf-ember-text: #E0424A;
  --mf-muted-red: #6F1015;
  --mf-old-gold: #CDA14D;

  --font-title: 'Cinzel', serif;
  --font-body: 'Inter', sans-serif;

  --ease-slow: cubic-bezier(0.22, 1, 0.36, 1);
}

/* ============================================================
   SELF-HOSTED TYPE
   Cinzel and Inter are served from assets/fonts/ rather than from
   Google. Not for speed — a page that falls back to system serif is
   not a slow MindForge, it is a different artist. Self-hosting also
   removes a third party from every visitor's connection to an
   anonymous artist's site.

   These are STATIC instances at fixed weights, not variable fonts,
   so the rendered weight cannot drift if an axis default changes
   upstream. Latin subset only (the site has no other scripts).
   Both faces are SIL Open Font License 1.1 — redistribution is
   explicitly permitted; the licences ship in assets/fonts/.
   ============================================================ */

@font-face {
  font-family: 'Cinzel';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('../assets/fonts/cinzel-400.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC,
                 U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193,
                 U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
  font-family: 'Cinzel';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url('../assets/fonts/cinzel-500.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC,
                 U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193,
                 U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
  font-family: 'Cinzel';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url('../assets/fonts/cinzel-600.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC,
                 U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193,
                 U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 300;
  font-display: swap;
  src: url('../assets/fonts/inter-300.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC,
                 U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193,
                 U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('../assets/fonts/inter-400.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC,
                 U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193,
                 U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url('../assets/fonts/inter-500.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC,
                 U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193,
                 U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url('../assets/fonts/inter-600.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC,
                 U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193,
                 U+2212, U+2215, U+FEFF, U+FFFD;
}

* { margin: 0; padding: 0; box-sizing: border-box; }

html { scroll-behavior: smooth; }

body {
  background: var(--mf-black);
  color: var(--mf-icy-white);
  font-family: var(--font-body);
  font-weight: 300;
  line-height: 1.7;
  overflow-x: hidden;
}

::selection { background: var(--mf-muted-red); color: var(--mf-icy-white); }

/* Thin dark scrollbar */
::-webkit-scrollbar { width: 10px; }
::-webkit-scrollbar-track { background: var(--mf-black); }
::-webkit-scrollbar-thumb { background: #1d2733; border-radius: 5px; }
::-webkit-scrollbar-thumb:hover { background: var(--mf-slate-blue); }

img { max-width: 100%; display: block; }
a { color: inherit; text-decoration: none; }
button { font-family: inherit; cursor: pointer; background: none; border: none; color: inherit; }

.red { color: var(--mf-ember-red); }
em { font-style: normal; color: var(--mf-ember-red); }

/* ============ FILM GRAIN ============ */
.grain {
  position: fixed;
  inset: -100px;
  z-index: 2000;
  pointer-events: none;
  opacity: 0.055;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='300' height='300'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2'/%3E%3C/filter%3E%3Crect width='300' height='300' filter='url(%23n)'/%3E%3C/svg%3E");
  animation: grain 1.2s steps(4) infinite;
}
@keyframes grain {
  0% { transform: translate(0, 0); }
  25% { transform: translate(-30px, 40px); }
  50% { transform: translate(40px, -25px); }
  75% { transform: translate(-25px, -35px); }
  100% { transform: translate(0, 0); }
}

/* ============ REVEAL ANIMATION ============ */
.reveal {
  opacity: 0;
  transform: translateY(26px);
  transition: opacity 1.1s var(--ease-slow), transform 1.1s var(--ease-slow);
}
.reveal.in { opacity: 1; transform: none; }

/* Reduced motion is handled in ONE block, at the very bottom of this file.
   It has to come after the animations it switches off, or the later
   `animation:` declarations simply win. Do not add a second block here. */

/* ============ NAVIGATION ============ */
.nav {
  position: fixed;
  top: 0; left: 0; right: 0;
  z-index: 1000;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 1.1rem clamp(1.2rem, 4vw, 3rem);
  transition: background 0.5s ease, box-shadow 0.5s ease, padding 0.5s ease;
}
/* Blur lives on a pseudo-element: backdrop-filter on .nav itself would turn it
   into a containing block and clip the fixed mobile menu panel */
.nav::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background: rgba(10, 10, 13, 0.82);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  opacity: 0;
  transition: opacity 0.5s ease;
}
.nav.scrolled::before { opacity: 1; }
.nav.scrolled {
  box-shadow: 0 1px 0 rgba(230, 238, 243, 0.06);
  padding-top: 0.7rem;
  padding-bottom: 0.7rem;
}

.nav__brand { display: flex; align-items: center; gap: 0.7rem; }
/* The mark is now the approved raster emblem, not the old inline vector.
   flex-shrink keeps it from squashing beside the wordmark on narrow screens. */
.nav__mark { width: 30px; height: 30px; flex-shrink: 0; }
.nav__word {
  font-family: var(--font-title);
  font-size: 0.95rem;
  letter-spacing: 0.35em;
  color: var(--mf-icy-white);
}

.nav__links { display: flex; align-items: center; gap: clamp(1rem, 2.5vw, 2.2rem); }
.nav__links a {
  font-size: 0.72rem;
  font-weight: 400;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  white-space: nowrap;
  color: var(--mf-soft-grey);
  transition: color 0.35s ease;
}
.nav__links a:hover { color: var(--mf-icy-white); }

.nav__cta {
  border: 1px solid rgba(177, 18, 26, 0.55);
  padding: 0.5rem 1.1rem;
  color: var(--mf-icy-white) !important;
  transition: background 0.35s ease, box-shadow 0.35s ease !important;
}
.nav__cta:hover {
  background: rgba(177, 18, 26, 0.18);
  box-shadow: 0 0 18px rgba(177, 18, 26, 0.35);
}

.nav__burger { display: none; flex-direction: column; gap: 6px; padding: 6px; }
.nav__burger span {
  display: block; width: 24px; height: 1.5px;
  background: var(--mf-icy-white);
  transition: transform 0.35s ease, opacity 0.35s ease;
}
.nav__burger[aria-expanded="true"] span:first-child { transform: translateY(4px) rotate(45deg); }
.nav__burger[aria-expanded="true"] span:last-child { transform: translateY(-3.5px) rotate(-45deg); }

/* ============ BUTTONS ============ */
.btn {
  display: inline-block;
  font-size: 0.78rem;
  font-weight: 500;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  padding: 0.95rem 2.2rem;
  transition: all 0.4s ease;
}
.btn--primary {
  color: var(--mf-icy-white);
  background: rgba(10, 10, 13, 0.6);
  border: 1px solid rgba(177, 18, 26, 0.7);
  box-shadow: 0 0 0 rgba(177, 18, 26, 0);
}
.btn--primary:hover {
  background: var(--mf-ember-red);
  box-shadow: 0 0 28px rgba(177, 18, 26, 0.45);
}
.btn--ghost {
  color: var(--mf-icy-white);
  border: 1px solid rgba(159, 167, 177, 0.4);
}
.btn--ghost:hover {
  border-color: rgba(230, 238, 243, 0.8);
  box-shadow: 0 0 18px rgba(230, 238, 243, 0.12);
}

/* ============ HERO ============ */
.hero {
  position: relative;
  min-height: 100vh;   /* fallback for browsers without small-viewport units */
  min-height: 100svh;
  display: flex;
  align-items: center;
  overflow: hidden;
  background: var(--mf-black);
}

.hero__image {
  position: absolute;
  inset: 0;
  z-index: 0;
}
.hero__image img {
  position: absolute;
  right: 0;
  top: 0;
  height: 112%;
  width: auto;
  min-width: 46%;
  object-fit: cover;
  object-position: top center;
  /* Cool the warm portrait into the cold world — the flame stays as the warm wound */
  filter: brightness(0.72) saturate(0.82) contrast(1.05);
  will-change: transform;
}

/* Cold veil + vignette blending the portrait into midnight */
.hero__veil {
  position: absolute;
  inset: 0;
  z-index: 1;
  background:
    linear-gradient(90deg, var(--mf-black) 0%, var(--mf-black) 34%, rgba(10,10,13,0.55) 58%, rgba(10,10,13,0.25) 100%),
    linear-gradient(0deg, var(--mf-black) 2%, rgba(10,10,13,0) 32%),
    linear-gradient(180deg, rgba(10,10,13,0.75) 0%, rgba(15,22,35,0.15) 30%),
    radial-gradient(ellipse at 75% 40%, rgba(21,36,54,0.28), transparent 60%);
}

.hero__content {
  position: relative;
  z-index: 2;
  padding: 0 clamp(1.4rem, 7vw, 7rem);
  max-width: 900px;
}

/* The vertical red signal — origin, wound, pulse */
.hero__signal {
  width: 1.5px;
  height: 84px;
  margin-bottom: 2.2rem;
  background: linear-gradient(180deg, transparent, var(--mf-ember-red) 30%, var(--mf-ember-red) 70%, transparent);
  box-shadow: 0 0 12px rgba(177, 18, 26, 0.7);
  animation: signal 4.5s ease-in-out infinite;
  transform-origin: top;
}
@keyframes signal {
  0%, 100% { opacity: 0.65; }
  50% { opacity: 1; }
}

.hero__kicker {
  font-size: 0.72rem;
  letter-spacing: 0.42em;
  text-transform: uppercase;
  color: var(--mf-soft-grey);
  margin-bottom: 1.4rem;
}

.hero__title {
  font-family: var(--font-title);
  font-weight: 500;
  font-size: clamp(2.6rem, 9vw, 6.4rem);
  letter-spacing: clamp(0.12em, 2vw, 0.22em);
  line-height: 1.05;
  margin-left: -0.05em;
  text-shadow: 0 0 60px rgba(15, 22, 35, 0.9);
}

.hero__tagline {
  margin-top: 1.6rem;
  font-size: clamp(1rem, 2.2vw, 1.35rem);
  font-weight: 300;
  letter-spacing: 0.06em;
  color: var(--mf-icy-white);
}

.hero__sub {
  margin-top: 0.8rem;
  font-size: 0.95rem;
  color: var(--mf-soft-grey);
  max-width: 480px;
}

.hero__actions {
  display: flex;
  flex-wrap: wrap;
  gap: 1rem;
  margin-top: 2.6rem;
}

.hero__scroll {
  position: absolute;
  bottom: 0;
  left: 50%;
  z-index: 2;
  transform: translateX(-50%);
  padding: 0 1rem;
}
.hero__scroll-line {
  display: block;
  width: 1px;
  height: 64px;
  background: linear-gradient(180deg, transparent, var(--mf-soft-grey));
  animation: scrollcue 2.6s ease-in-out infinite;
  transform-origin: top;
}
@keyframes scrollcue {
  0% { transform: scaleY(0); opacity: 0; }
  45% { transform: scaleY(1); opacity: 0.9; }
  100% { transform: scaleY(1); opacity: 0; }
}

/* Stagger hero reveals */
.hero .reveal:nth-child(2) { transition-delay: 0.15s; }
.hero .reveal:nth-child(3) { transition-delay: 0.3s; }
.hero .reveal:nth-child(4) { transition-delay: 0.45s; }
.hero .reveal:nth-child(5) { transition-delay: 0.6s; }
.hero .reveal:nth-child(6) { transition-delay: 0.75s; }

/* ============ SECTIONS ============ */
.section {
  position: relative;
  padding: clamp(5rem, 12vh, 9rem) clamp(1.4rem, 5vw, 3rem);
}
.section__inner { max-width: 1100px; margin: 0 auto; }
.section__inner.narrow { max-width: 760px; }

.section__label {
  display: inline-block;
  font-size: 0.7rem;
  letter-spacing: 0.42em;
  text-transform: uppercase;
  color: var(--mf-ember-text);
  margin-bottom: 1.6rem;
  position: relative;
  padding-left: 2.6rem;
}
/* thin red line reveal */
.section__label::before {
  content: "";
  position: absolute;
  left: 0;
  top: 50%;
  width: 1.8rem;
  height: 1px;
  background: var(--mf-ember-red);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform 1.2s var(--ease-slow) 0.3s;
}
.section__label.in::before { transform: scaleX(1); }

.section__title {
  font-family: var(--font-title);
  font-weight: 400;
  font-size: clamp(1.7rem, 4.2vw, 2.7rem);
  letter-spacing: 0.08em;
  line-height: 1.35;
  margin-bottom: 2.2rem;
}

/* ============ ORIGIN ============ */
#origin {
  background: linear-gradient(180deg, var(--mf-black) 0%, var(--mf-midnight) 100%);
}
.origin__body p {
  color: var(--mf-soft-grey);
  font-size: 1.02rem;
  max-width: 620px;
  margin-bottom: 1.2rem;
}
.origin__creed {
  margin-top: 2.8rem;
  border-left: 1px solid rgba(177, 18, 26, 0.6);
  padding-left: 1.6rem;
}
.origin__creed p {
  font-family: var(--font-title);
  font-size: clamp(1rem, 2.4vw, 1.25rem);
  letter-spacing: 0.06em;
  color: var(--mf-icy-white);
  margin-bottom: 0.5rem;
}

/* ============ HUMAN + FORGE ============ */
.section--forge {
  background:
    radial-gradient(ellipse at 50% 0%, rgba(21, 36, 54, 0.55), transparent 65%),
    var(--mf-midnight);
  text-align: center;
}
.forge__quote {
  font-family: var(--font-title);
  font-size: clamp(1.3rem, 3.4vw, 2.1rem);
  letter-spacing: 0.05em;
  line-height: 1.6;
  max-width: 800px;
  margin: 0 auto 4rem;
}

.forge__split {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  gap: clamp(1.5rem, 5vw, 4rem);
  align-items: stretch;
  max-width: 860px;
  margin: 0 auto;
  text-align: center;
}
.forge__col h3 {
  font-family: var(--font-title);
  font-weight: 500;
  font-size: 1.05rem;
  letter-spacing: 0.3em;
  text-transform: uppercase;
  margin-bottom: 1.6rem;
  color: var(--mf-icy-white);
}
.forge__col ul { list-style: none; }
.forge__col li {
  color: var(--mf-soft-grey);
  font-size: 0.95rem;
  padding: 0.45rem 0;
}

.forge__spine {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.8rem;
}
.forge__spine-line {
  flex: 1;
  width: 1px;
  background: linear-gradient(180deg, transparent, rgba(177, 18, 26, 0.7), transparent);
}
.forge__spine-mark {
  width: 40px;
  height: 40px;
  animation: emberpulse 5s ease-in-out infinite;
}
@keyframes emberpulse {
  0%, 100% { opacity: 0.7; filter: drop-shadow(0 0 2px rgba(177,18,26,0.3)); }
  50% { opacity: 1; filter: drop-shadow(0 0 10px rgba(177,18,26,0.7)); }
}

.forge__closing {
  margin-top: 4rem;
  font-family: var(--font-title);
  font-size: clamp(1.05rem, 2.6vw, 1.4rem);
  letter-spacing: 0.06em;
  line-height: 1.8;
}

/* ============ SPLIT — TRACKS ============ */
.section--split {
  background: linear-gradient(180deg, var(--mf-midnight) 0%, var(--mf-black) 30%);
}
.split__title {
  font-size: clamp(3rem, 10vw, 5.5rem);
  letter-spacing: 0.32em;
  margin-left: -0.06em;
  margin-bottom: 1.2rem;
}
.split__intro {
  color: var(--mf-soft-grey);
  max-width: 640px;
  margin-bottom: 3.5rem;
}

.tracks { list-style: none; border-top: 1px solid rgba(230, 238, 243, 0.08); }

.track {
  position: relative;
  display: flex;
  align-items: center;
  gap: clamp(0.8rem, 2.5vw, 1.6rem);
  padding: 1.15rem clamp(0.4rem, 2vw, 1.2rem);
  border-bottom: 1px solid rgba(230, 238, 243, 0.08);
  transition: background 0.4s ease;
}
/* red accent line on hover / active */
.track::before {
  content: "";
  position: absolute;
  left: 0; top: 15%; bottom: 15%;
  width: 2px;
  background: var(--mf-ember-red);
  transform: scaleY(0);
  transition: transform 0.4s var(--ease-slow);
}
.track:hover, .track.active { background: rgba(21, 36, 54, 0.25); }
.track:hover::before, .track.active::before { transform: scaleY(1); }

/* <picture> wrappers. A picture element is inline by default, so it has to be
   told to behave like the img it replaced or the layout collapses. */
.hero__image picture { display: contents; }
.gallery__item picture { display: block; width: 100%; height: 100%; }
.track__art-box { flex-shrink: 0; display: block; font-size: 0; }

.track__art {
  flex-shrink: 0;
  width: 44px;
  height: 44px;
  object-fit: cover;
  border-radius: 3px;
  border: 1px solid rgba(230, 238, 243, 0.1);
  filter: brightness(0.88) saturate(0.92);
  transition: filter 0.5s ease;
}
.track:hover .track__art, .track.active .track__art { filter: brightness(1) saturate(1); }

.track__play {
  flex-shrink: 0;
  width: 44px;
  height: 44px;
  border: 1px solid rgba(159, 167, 177, 0.35);
  border-radius: 50%;
  display: grid;
  place-items: center;
  transition: border-color 0.35s ease, box-shadow 0.35s ease, background 0.35s ease;
}
.track__play svg { width: 16px; height: 16px; fill: var(--mf-icy-white); }
.track__play:hover {
  border-color: var(--mf-ember-red);
  box-shadow: 0 0 16px rgba(177, 18, 26, 0.35);
}
.track.playing .track__play {
  background: rgba(177, 18, 26, 0.15);
  border-color: var(--mf-ember-red);
}
.track .ico-pause { display: none; }
.track.playing .ico-play { display: none; }
.track.playing .ico-pause { display: block; }

.track__play--ember { cursor: default; }
.track__play--ember .ico-flame { fill: none; stroke: var(--mf-muted-red); stroke-width: 1.5; }
.track__play--ember:hover { border-color: rgba(159, 167, 177, 0.35); box-shadow: none; }

.track__num {
  font-family: var(--font-title);
  font-size: 0.9rem;
  color: var(--mf-soft-grey);
  width: 2ch;
  text-align: center;
  flex-shrink: 0;
}

.track__meta { display: flex; flex-direction: column; min-width: 0; flex: 1; }
.track__name {
  font-family: var(--font-title);
  font-size: clamp(1.02rem, 2.4vw, 1.25rem);
  letter-spacing: 0.1em;
  color: var(--mf-icy-white);
}
.track__feat {
  font-family: var(--font-body);
  font-size: 0.62em;
  letter-spacing: 0.14em;
  color: var(--mf-soft-grey);
  white-space: nowrap;
}
.track__theme {
  font-size: 0.76rem;
  letter-spacing: 0.08em;
  color: var(--mf-soft-grey);
  margin-top: 0.15rem;
}

.track__time {
  font-size: 0.78rem;
  color: var(--mf-soft-grey);
  font-variant-numeric: tabular-nums;
  flex-shrink: 0;
}
.track__time--forging {
  font-size: 0.7rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--mf-muted-red);
}

.track__lyrics {
  flex-shrink: 0;
  font-size: 0.68rem;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--mf-soft-grey);
  border: 1px solid rgba(159, 167, 177, 0.25);
  padding: 0.45rem 0.9rem;
  transition: color 0.35s ease, border-color 0.35s ease;
}
.track__lyrics:hover { color: var(--mf-icy-white); border-color: var(--mf-ember-red); }

.track--forging .track__name { color: var(--mf-soft-grey); }

/* ============ VISUAL WORLD ============ */
.section--visual { background: var(--mf-black); }
.visual__poem {
  font-family: var(--font-title);
  font-size: clamp(1.15rem, 2.8vw, 1.6rem);
  letter-spacing: 0.05em;
  line-height: 1.9;
  margin-bottom: 3.5rem;
  max-width: 800px;
}

.gallery {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 14px;
}
.gallery__item {
  position: relative;
  overflow: hidden;
  background: var(--mf-midnight);
  border: 1px solid rgba(230, 238, 243, 0.07);
  aspect-ratio: 4 / 5;
}
.gallery__item img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  filter: brightness(0.82) saturate(0.88);
  transition: transform 6s var(--ease-slow), filter 1.2s ease;
}
.gallery__item:hover img {
  transform: scale(1.05);
  filter: brightness(0.95) saturate(0.95);
}

.gallery__item figcaption {
  position: absolute;
  left: 0; right: 0; bottom: 0;
  padding: 2.2rem 1.1rem 0.9rem;
  font-size: 0.74rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--mf-icy-white);
  background: linear-gradient(180deg, transparent, rgba(10, 10, 13, 0.88));
  opacity: 0;
  transform: translateY(8px);
  transition: opacity 0.7s ease, transform 0.7s ease;
}
.gallery__item:hover figcaption { opacity: 1; transform: none; }

/* ============ CHAPTER TWO TEASER ============ */
.section--teaser {
  background:
    radial-gradient(ellipse at 50% 120%, rgba(111, 16, 21, 0.28), transparent 60%),
    linear-gradient(180deg, var(--mf-black), var(--mf-midnight));
  text-align: center;
  padding-top: clamp(6rem, 16vh, 11rem);
  padding-bottom: clamp(6rem, 16vh, 11rem);
}
.teaser__title {
  font-family: var(--font-title);
  font-weight: 500;
  font-size: clamp(2.4rem, 8vw, 4.5rem);
  letter-spacing: 0.3em;
  margin-left: -0.06em;
}
.teaser__line {
  margin-top: 1.4rem;
  color: var(--mf-soft-grey);
  font-size: clamp(0.95rem, 2vw, 1.1rem);
  letter-spacing: 0.06em;
}
.teaser__status {
  margin-top: 2.6rem;
  font-size: 0.72rem;
  letter-spacing: 0.32em;
  text-transform: uppercase;
  color: var(--mf-soft-grey);
  display: inline-flex;
  align-items: center;
  gap: 0.7rem;
}
.teaser__pulse {
  width: 7px; height: 7px;
  border-radius: 50%;
  background: var(--mf-ember-red);
  animation: emberdot 2.4s ease-in-out infinite;
}
@keyframes emberdot {
  0%, 100% { box-shadow: 0 0 0 0 rgba(177, 18, 26, 0.6); }
  50% { box-shadow: 0 0 0 7px rgba(177, 18, 26, 0); }
}

/* ============ FORGE NOTES ============ */
#notes { background: var(--mf-midnight); }
.notes {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 18px;
  margin-top: 1rem;
}
.note {
  position: relative;
  background: rgba(10, 10, 13, 0.55);
  border: 1px solid rgba(230, 238, 243, 0.08);
  padding: 2rem 1.6rem 1.8rem;
  transition: transform 0.6s var(--ease-slow), border-color 0.6s ease, box-shadow 0.6s ease;
}
.note:hover {
  transform: translateY(-5px);
  border-color: rgba(177, 18, 26, 0.35);
  box-shadow: 0 18px 40px rgba(0, 0, 0, 0.45);
}
.note__accent {
  position: absolute;
  top: 0; left: 1.6rem;
  width: 2.2rem; height: 2px;
  background: var(--mf-ember-red);
}
.note h3 {
  font-family: var(--font-title);
  font-weight: 500;
  font-size: 1.05rem;
  letter-spacing: 0.08em;
  margin-bottom: 0.9rem;
}
.note p { color: var(--mf-soft-grey); font-size: 0.92rem; }

/* ============ CONTACT ============ */
.section--contact {
  background:
    radial-gradient(ellipse at 50% 100%, rgba(21, 36, 54, 0.5), transparent 65%),
    var(--mf-black);
  text-align: center;
}
.contact__line { color: var(--mf-soft-grey); margin-bottom: 2.4rem; }
.contact__social {
  margin-top: 2.8rem;
  display: flex;
  justify-content: center;
  gap: 1.2rem;
  font-size: 0.74rem;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--mf-soft-grey);
}
.contact__social a { transition: color 0.35s ease; }
.contact__social a:hover { color: var(--mf-ember-text); }

/* ============ FOOTER ============ */
.footer {
  text-align: center;
  padding: 3.5rem 1.5rem 7rem; /* extra bottom room for the player bar */
  border-top: 1px solid rgba(230, 238, 243, 0.06);
  background: var(--mf-black);
}
.footer__mark {
  width: 34px; height: 34px;
  margin: 0 auto 1.2rem;
  animation: emberpulse 6s ease-in-out infinite;
}
.footer__essence {
  font-family: var(--font-title);
  font-size: 0.85rem;
  letter-spacing: 0.24em;
  text-transform: uppercase;
  color: var(--mf-icy-white);
  margin-bottom: 0.7rem;
}
.footer__legal { font-size: 0.72rem; color: var(--mf-soft-grey); letter-spacing: 0.08em; }

/* ============ PLAYER BAR ============ */
.player {
  position: fixed;
  left: 0; right: 0; bottom: 0;
  z-index: 1500;
  display: flex;
  align-items: center;
  gap: clamp(0.6rem, 2vw, 1.2rem);
  padding: 0.75rem clamp(1rem, 4vw, 2.5rem);
  background: rgba(10, 10, 13, 0.92);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  border-top: 1px solid rgba(177, 18, 26, 0.35);
  transform: translateY(110%);
  transition: transform 0.6s var(--ease-slow);
}
.player.visible { transform: none; }

.player__btn {
  flex-shrink: 0;
  width: 38px; height: 38px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  transition: background 0.3s ease;
}
.player__btn:hover { background: rgba(230, 238, 243, 0.07); }
.player__btn svg { width: 17px; height: 17px; fill: var(--mf-icy-white); }
.player__btn--main {
  width: 46px; height: 46px;
  border: 1px solid rgba(177, 18, 26, 0.6);
}
.player__btn--skip {
  position: relative;
  color: var(--mf-soft-grey);
}
.player__btn--skip svg { fill: none; width: 19px; height: 19px; }
.player__btn--skip span {
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  font-size: 0.42rem;
  font-weight: 600;
  letter-spacing: 0.02em;
  pointer-events: none;
  padding-top: 3px;
}
.player__btn--skip:hover { color: var(--mf-icy-white); }
.player__btn--main:hover { box-shadow: 0 0 16px rgba(177, 18, 26, 0.4); }
.player .ico-pause { display: none; }
.player.playing .ico-play { display: none; }
.player.playing .ico-pause { display: block; }

.player__info { flex: 1; min-width: 0; }
.player__title {
  display: block;
  font-family: var(--font-title);
  font-size: 0.82rem;
  letter-spacing: 0.16em;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  margin-bottom: 0.45rem;
}
.player__bar {
  position: relative;
  height: 4px;
  background: rgba(230, 238, 243, 0.12);
  cursor: pointer;
  border-radius: 2px;
  /* stops the page from scrolling under the finger while scrubbing on touch */
  touch-action: none;
}
.player__bar:hover { height: 6px; margin-top: -1px; margin-bottom: -1px; }
.player__progress {
  position: absolute;
  left: 0; top: 0; bottom: 0;
  width: 0%;
  background: var(--mf-ember-red);
  border-radius: 2px;
  box-shadow: 0 0 8px rgba(177, 18, 26, 0.6);
}
.player__time {
  flex-shrink: 0;
  font-size: 0.72rem;
  color: var(--mf-soft-grey);
  font-variant-numeric: tabular-nums;
}

/* ============ LYRICS MODAL ============ */
.modal { position: fixed; inset: 0; z-index: 1800; display: flex; align-items: center; justify-content: center; }
.modal[hidden] { display: none; }
.modal__backdrop {
  position: absolute; inset: 0;
  background: rgba(10, 10, 13, 0.88);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
}
.modal__panel {
  position: relative;
  width: min(680px, calc(100vw - 2.4rem));
  max-height: 82vh;
  overflow-y: auto;
  background: var(--mf-midnight);
  border: 1px solid rgba(230, 238, 243, 0.1);
  border-top: 2px solid var(--mf-ember-red);
  padding: clamp(1.8rem, 5vw, 3.2rem);
  animation: modalin 0.5s var(--ease-slow);
}
@keyframes modalin {
  from { opacity: 0; transform: translateY(24px); }
  to { opacity: 1; transform: none; }
}
.modal__close {
  position: absolute;
  top: 0.9rem; right: 1.1rem;
  font-size: 1.6rem;
  color: var(--mf-soft-grey);
  line-height: 1;
  transition: color 0.3s ease;
}
.modal__close:hover { color: var(--mf-ember-red); }
.modal__chapter {
  font-size: 0.68rem;
  letter-spacing: 0.32em;
  text-transform: uppercase;
  color: var(--mf-ember-text);
  margin-bottom: 0.7rem;
}
.modal__title {
  font-family: var(--font-title);
  font-weight: 500;
  font-size: clamp(1.4rem, 4vw, 1.9rem);
  letter-spacing: 0.12em;
  margin-bottom: 1.8rem;
}
.modal__body p {
  color: var(--mf-soft-grey);
  font-size: 0.98rem;
  line-height: 1.9;
  margin-bottom: 1.4rem;
  white-space: pre-line;
}

.modal__hint {
  font-size: 0.72rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--mf-soft-grey);
  margin: -1rem 0 1.8rem;
  opacity: 0.75;
}

/* Synced lyric lines — the words follow the song */
.modal__body--synced { padding-bottom: 30vh; } /* room so the last lines can center */
.lyric-line {
  cursor: pointer;
  margin-bottom: 0.9rem !important;
  padding: 0.15rem 0.6rem;
  margin-left: -0.6rem;
  border-left: 2px solid transparent;
  transition: color 0.45s ease, border-color 0.45s ease, text-shadow 0.45s ease;
}
.lyric-line:hover { color: var(--mf-icy-white); }
.lyric-line.active {
  color: var(--mf-icy-white);
  border-left-color: var(--mf-ember-red);
  text-shadow: 0 0 24px rgba(177, 18, 26, 0.35);
}

/* Word trail — the words burn red as he sings them, then cool back down */
.lyric-word {
  cursor: pointer;
  transition: color 0.35s ease, text-shadow 0.6s ease;
}
.lyric-word:hover { color: var(--mf-icy-white); text-shadow: 0 0 10px rgba(230, 238, 243, 0.3); }
.lyric-word.hot {
  color: var(--mf-ember-red);
  text-shadow: 0 0 16px rgba(177, 18, 26, 0.55);
}
/* words inside the focused line read brighter so the red pops */
.lyric-line.active .lyric-word:not(.hot) { color: var(--mf-icy-white); }

/* ============ RESPONSIVE ============ */
/* Nav collapses to burger earlier than the layout — the full link row needs room */
@media (max-width: 1000px) {
  .nav__links {
    position: fixed;
    top: 0; right: 0; bottom: 0;
    width: min(78vw, 320px);
    flex-direction: column;
    justify-content: center;
    gap: 2rem;
    background: rgba(10, 10, 13, 0.96);
    backdrop-filter: blur(16px);
    -webkit-backdrop-filter: blur(16px);
    border-left: 1px solid rgba(177, 18, 26, 0.3);
    transform: translateX(100%);
    /* visibility keeps the closed panel out of the tab order — without it,
       keyboard users tab through invisible off-screen links */
    visibility: hidden;
    transition: transform 0.5s var(--ease-slow), visibility 0s linear 0.5s;
  }
  .nav__links.open {
    transform: none;
    visibility: visible;
    transition: transform 0.5s var(--ease-slow), visibility 0s;
  }
  .nav__links a { font-size: 0.85rem; }
  .nav__burger { display: flex; z-index: 1001; }
}

@media (max-width: 860px) {
  .hero__image img {
    right: -18%;
    height: 100%;
    min-width: 130%;
    opacity: 0.55;
  }
  .hero__veil {
    background:
      linear-gradient(180deg, rgba(10,10,13,0.6) 0%, rgba(10,10,13,0.35) 45%, var(--mf-black) 96%),
      radial-gradient(ellipse at 60% 30%, rgba(21,36,54,0.3), transparent 65%);
  }

  .forge__split { grid-template-columns: 1fr; gap: 2.5rem; }
  .forge__spine { flex-direction: row; width: 100%; }
  .forge__spine-line { height: 1px; width: auto; background: linear-gradient(90deg, transparent, rgba(177,18,26,0.7), transparent); }

  .gallery { grid-template-columns: repeat(2, 1fr); }
  .notes { grid-template-columns: 1fr; }

  .track { flex-wrap: wrap; }
  .track__meta { flex-basis: calc(100% - 195px); } /* room for art + play + num */
  .track__time { margin-left: 115px; } /* aligns under the title, past art + play */
}

@media (max-width: 480px) {
  .track__art { width: 38px; height: 38px; }
  .gallery { grid-template-columns: 1fr; }
  .player__time { display: none; }
}


/* ---- Streaming placeholder (Split section) ---- */
.split__streams {
  margin-top: 34px;
  text-align: center;
  color: var(--mf-soft-grey);
  font-size: 0.95rem;
  letter-spacing: 0.06em;
}
.split__stream-links {
  margin-top: 12px;
  display: flex;
  gap: 16px;
  justify-content: center;
  align-items: center;
  color: var(--mf-soft-grey);
}
.split__stream-links a {
  color: var(--mf-icy-white);
  text-decoration: none;
  padding-bottom: 2px;
  border-bottom: 1px solid var(--mf-ember-red);
}
.split__stream-links a:hover { color: var(--mf-ember-red); }

/* Shown only when JavaScript is off, where the track list would have been. */
.split__noscript {
  margin-top: 28px;
  padding: 1.4rem 1.2rem;
  border-top: 1px solid rgba(230, 238, 243, 0.08);
  border-bottom: 1px solid rgba(230, 238, 243, 0.08);
  border-left: 2px solid var(--mf-ember-red);
  color: var(--mf-soft-grey);
  font-size: 0.98rem;
  letter-spacing: 0.04em;
}


/* ============================================================
   KEYBOARD ACCESS (added by CTO session 2026-08-04)
   Nothing here shows up for mouse users. It only appears when
   someone is navigating with a keyboard, which previously left
   them guessing where they were on a near-black page.
   ============================================================ */

/* One focus ring for the whole site: icy white halo + ember core,
   readable on black, midnight and navy alike. */
:focus-visible {
  outline: 2px solid var(--mf-icy-white);
  outline-offset: 3px;
  border-radius: 2px;
}
.btn:focus-visible,
.nav__cta:focus-visible,
.track__play:focus-visible,
.track__lyrics:focus-visible,
.player__btn:focus-visible,
.player__bar:focus-visible {
  outline-color: var(--mf-ember-red);
  box-shadow: 0 0 0 4px rgba(177, 18, 26, 0.25);
}
/* The page container takes focus after the skip link; never draw a ring on it. */
main:focus,
main:focus-visible { outline: none; }

/* Skip link — off-screen until it is focused, then it lands top-left. */
.skip-link {
  position: fixed;
  top: 0;
  left: 0;
  z-index: 2100;
  transform: translateY(-140%);
  padding: 0.85rem 1.4rem;
  background: var(--mf-black);
  color: var(--mf-icy-white);
  border: 1px solid var(--mf-ember-red);
  font-size: 0.72rem;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  transition: transform 0.25s var(--ease-slow);
}
.skip-link:focus { transform: none; }


/* ============================================================
   REDUCED MOTION (must stay LAST in this file)
   The OS-level "reduce motion" setting exists for people who get
   motion sickness or migraines from drifting, pulsing interfaces.
   The world keeps its exact look here — grain, ember, signal all
   stay where they are. They simply stop moving.
   ============================================================ */
@media (prefers-reduced-motion: reduce) {
  .grain,
  .hero__signal,
  .hero__scroll-line,
  .forge__spine-mark,
  .footer__mark,
  .teaser__pulse,
  .modal__panel { animation: none !important; }

  /* the scroll cue animates from invisible — without the loop it must be told to show */
  .hero__scroll-line { opacity: 0.65; transform: none; }

  .reveal,
  .gallery__item img,
  .note,
  .track,
  .section__label::before { transition: none !important; }
  .section__label::before { transform: scaleX(1); }
  .reveal { opacity: 1; transform: none; }
  html { scroll-behavior: auto; }
}