/* ════════════════════════════════════════════════
   SOPHIA LECLERC — analog soul, one page
   palette: espresso night / candle cream / brass
   ════════════════════════════════════════════════ */

:root {
  --ink:        #130e0a;
  --ink-soft:   #1c1410;
  --cream:      #f2e7d3;
  --cream-dim:  #cdbfa6;
  --brass:      #c9924f;
  --brass-soft: #d8b98a;
  --ember:      #8a3b2a;
  --line:       rgba(216, 185, 138, .18);

  --font-display: "Italiana", serif;
  --font-script:  "Pinyon Script", cursive;
  --font-body:    "Cormorant Garamond", serif;
  --font-label:   "Jost", sans-serif;
}

@property --r {
  syntax: "<angle>";
  inherits: false;
  initial-value: 0deg;
}

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

/* mouse-drift layers: --mx/--my are set from JS and compose
   with each element's own centering offsets below */
[data-mouse] { translate: var(--mx, 0px) var(--my, 0px); }

/* NOTE: no `scroll-behavior: smooth` here — it corrupts ScrollTrigger's
   measurements; smooth anchor scrolling is handled in site.js instead */

body {
  background: var(--ink);
  color: var(--cream);
  font-family: var(--font-body);
  font-weight: 400;
  overflow-x: hidden;
  cursor: none;
  -webkit-font-smoothing: antialiased;
}

::selection { background: var(--brass); color: var(--ink); }

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

/* ── atmosphere overlays ───────────────────────── */

.grain {
  position: fixed; inset: -50%;
  width: 200%; height: 200%;
  pointer-events: none; z-index: 200;
  opacity: .2;
  background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 250 250' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.95' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='0.1'/%3E%3C/svg%3E");
  animation: grain-shift 1.2s steps(4) infinite;
}
@keyframes grain-shift {
  0%   { transform: translate(0, 0); }
  25%  { transform: translate(-2%, 3%); }
  50%  { transform: translate(3%, -2%); }
  75%  { transform: translate(-3%, -3%); }
  100% { transform: translate(2%, 2%); }
}

.vignette {
  position: fixed; inset: 0;
  pointer-events: none; z-index: 190;
  background: radial-gradient(ellipse 120% 105% at 50% 45%, transparent 62%, rgba(8, 5, 3, .32) 100%);
}

/* ── cursor ────────────────────────────────────── */

.cursor-dot, .cursor-ring {
  position: fixed; top: 0; left: 0;
  pointer-events: none; z-index: 300;
  border-radius: 50%;
  transform: translate(-50%, -50%);
}
.cursor-dot {
  width: 6px; height: 6px;
  background: var(--brass-soft);
}
.cursor-ring {
  width: 34px; height: 34px;
  border: 1px solid rgba(216, 185, 138, .5);
  transition: width .35s ease, height .35s ease, border-color .35s ease, background .35s ease;
}
.cursor-ring.is-hover {
  width: 64px; height: 64px;
  border-color: var(--brass);
  background: rgba(201, 146, 79, .08);
}
@media (hover: none) {
  body { cursor: auto; }
  .cursor-dot, .cursor-ring { display: none; }
}

/* ── preloader ─────────────────────────────────── */

.loader {
  position: fixed; inset: 0; z-index: 400;
  background: var(--ink);
  display: grid; place-items: center;
  transition: opacity .9s ease, visibility .9s;
  /* failsafe: even with no JavaScript at all, never stay stuck */
  animation: loader-failsafe .9s ease 5s forwards;
}
.loader.is-done { opacity: 0; visibility: hidden; }
@keyframes loader-failsafe { to { opacity: 0; visibility: hidden; } }
.loader__inner { text-align: center; }
.loader__script {
  font-family: var(--font-script);
  font-size: clamp(4rem, 10vw, 7rem);
  color: var(--brass-soft);
  display: block;
  opacity: 0;
  animation: loader-in 1.2s ease .15s forwards;
}
.loader__line {
  display: block; height: 1px; width: 0;
  margin: 1.2rem auto;
  background: var(--brass);
  animation: loader-line 1.4s ease .5s forwards;
}
.loader__label {
  font-family: var(--font-label);
  font-weight: 200; font-size: .7rem;
  letter-spacing: .55em; text-transform: uppercase;
  color: var(--cream-dim);
  opacity: 0;
  animation: loader-in 1s ease .8s forwards;
}
@keyframes loader-in   { to { opacity: 1; } }
@keyframes loader-line { to { width: min(260px, 50vw); } }

/* ── nav ───────────────────────────────────────── */

.nav {
  position: fixed; top: 0; left: 0; right: 0; z-index: 150;
  display: flex; align-items: center; justify-content: space-between;
  padding: 1.6rem clamp(1.5rem, 4vw, 3.5rem);
  mix-blend-mode: normal;
  transition: background .5s ease, padding .5s ease, border-color .5s ease;
  border-bottom: 1px solid transparent;
}
.nav.is-scrolled {
  background: rgba(19, 14, 10, .82);
  backdrop-filter: blur(14px);
  border-bottom-color: var(--line);
  padding-block: 1rem;
}
.nav__brand {
  font-family: var(--font-display);
  font-size: 1.5rem; letter-spacing: .08em;
}
.nav__brand span {
  font-family: var(--font-script);
  font-size: 1.35rem; color: var(--brass-soft);
}
.nav__links { display: flex; gap: 2.4rem; }
.nav__links a, .nav__cta {
  font-family: var(--font-label);
  font-weight: 300; font-size: .72rem;
  letter-spacing: .3em; text-transform: uppercase;
  color: var(--cream-dim);
  position: relative;
  transition: color .35s ease;
}
.nav__links a::after {
  content: ""; position: absolute; left: 0; bottom: -6px;
  width: 100%; height: 1px; background: var(--brass);
  transform: scaleX(0); transform-origin: right;
  transition: transform .45s cubic-bezier(.7, 0, .3, 1);
}
.nav__links a:hover { color: var(--cream); }
.nav__links a:hover::after { transform: scaleX(1); transform-origin: left; }
.nav__cta {
  color: var(--brass-soft);
  border: 1px solid var(--line);
  padding: .65em 1.4em; border-radius: 99px;
  transition: background .4s ease, color .4s ease, border-color .4s ease;
}
.nav__cta:hover { background: var(--brass); border-color: var(--brass); color: var(--ink); }
@media (max-width: 760px) { .nav__links { display: none; } }

/* ── shared bits ───────────────────────────────── */

.section-tag {
  display: inline-block;
  font-family: var(--font-label);
  font-weight: 300; font-size: .68rem;
  letter-spacing: .5em; text-transform: uppercase;
  color: var(--brass);
  margin-bottom: 1.6rem;
}
em { font-style: italic; }

.reveal { opacity: 0; transform: translateY(40px); }
.reveal-line {
  display: block; overflow: hidden;
}
.reveal-line > .line-inner {
  display: block;
  transform: translateY(110%);
}

/* gentle perpetual float — applied to gallery / about images */
.floaty        { animation: floaty 7s ease-in-out infinite; }
.floaty--slow  { animation-duration: 10s; animation-delay: -3s; }
.floaty--fast  { animation-duration: 5.5s; animation-delay: -1.5s; }
@keyframes floaty {
  0%, 100% { translate: 0 0; rotate: var(--r, 0deg); }
  50%      { translate: 0 -16px; rotate: calc(var(--r, 0deg) + 0.8deg); }
}

/* ════════ HERO ════════ */

.hero {
  position: relative;
  min-height: 100svh;
  display: grid; place-items: center;
  overflow: hidden;
  background:
    radial-gradient(ellipse 60% 50% at 50% 38%, rgba(201, 146, 79, .14), transparent 70%),
    linear-gradient(180deg, #0e0a07 0%, var(--ink) 55%, #181009 100%);
}

.hero__halo {
  position: absolute; top: 50%; left: 50%;
  width: min(85vmin, 760px); aspect-ratio: 1;
  margin: calc(min(85vmin, 760px) / -2);
  border-radius: 50%;
  background: radial-gradient(circle, rgba(216, 185, 138, .09) 0%, rgba(138, 59, 42, .04) 48%, transparent 66%);
  border: 1px solid rgba(216, 185, 138, .12);
  outline: 1px solid rgba(216, 185, 138, .05);
  outline-offset: 22px;
}

.hero__vinyl {
  position: absolute; top: 50%; left: 50%;
  width: min(72vmin, 640px); aspect-ratio: 1;
  margin: calc(min(72vmin, 640px) / -2);
  border-radius: 50%;
  border: 1px solid rgba(216, 185, 138, .22);
  box-shadow:
    inset 0 0 0 28px rgba(216, 185, 138, .035),
    inset 0 0 0 60px rgba(216, 185, 138, .03),
    inset 0 0 0 100px rgba(216, 185, 138, .025),
    inset 0 0 0 150px rgba(216, 185, 138, .02);
  animation: vinyl-spin 60s linear infinite;
}
.hero__vinyl::before {
  content: "✦"; position: absolute; top: 3%; left: 50%;
  color: var(--brass); font-size: .8rem;
  transform: translateX(-50%);
}
@keyframes vinyl-spin { to { transform: rotate(360deg); } }

/* floating dust motes */
.hero__dust { position: absolute; inset: 0; pointer-events: none; }
.hero__dust i {
  position: absolute;
  width: 3px; height: 3px; border-radius: 50%;
  background: var(--brass-soft);
  opacity: 0;
  animation: dust-rise linear infinite;
}
@keyframes dust-rise {
  0%   { transform: translateY(15vh) scale(.6); opacity: 0; }
  15%  { opacity: .55; }
  85%  { opacity: .25; }
  100% { transform: translateY(-90vh) scale(1.1); opacity: 0; }
}

.hero__title { position: absolute; inset: 0; pointer-events: none; }
.hero__title-back {
  position: absolute; top: 22%; left: 50%;
  translate: calc(var(--mx, 0px) - 50%) calc(var(--my, 0px) - 50%);
  font-family: var(--font-display);
  font-size: clamp(5rem, 18vw, 15.5rem);
  letter-spacing: .12em;
  color: transparent;
  -webkit-text-stroke: 1px rgba(216, 185, 138, .38);
  white-space: nowrap;
}

.hero__portrait-wrap {
  position: relative; z-index: 3;
  width: min(64vmin, 540px);
  margin-top: 6vh;
}
@media (max-width: 760px) {
  .hero__portrait-wrap { width: min(88vw, 430px); margin-top: 4vh; }
  .hero__title-front { font-size: clamp(2.4rem, 11vw, 4.2rem); letter-spacing: .2em; text-indent: .2em; }
  .hero__title-back { font-size: clamp(4rem, 17vw, 7rem); }
}
.hero__portrait {
  position: relative; z-index: 2;
  width: 100%;
  filter: drop-shadow(0 50px 70px rgba(0, 0, 0, .65)) drop-shadow(0 0 60px rgba(201, 146, 79, .12));
  animation: portrait-breathe 8s ease-in-out infinite;
}
@keyframes portrait-breathe {
  0%, 100% { transform: translateY(0); }
  50%      { transform: translateY(-12px); }
}
.hero__portrait-glow {
  position: absolute; inset: auto 8% 0 8%; height: 14%;
  z-index: 1;
  background: radial-gradient(ellipse at center, rgba(201, 146, 79, .35), transparent 70%);
  filter: blur(22px);
}

.hero__title-front {
  position: absolute; z-index: 4;
  bottom: 19%; left: 50%;
  translate: calc(var(--mx, 0px) - 50%) var(--my, 0px);
  font-family: var(--font-display);
  font-size: clamp(3.4rem, 11.5vw, 9.5rem);
  letter-spacing: .3em; text-indent: .3em;
  color: var(--cream);
  white-space: nowrap;
  text-shadow: 0 18px 50px rgba(0, 0, 0, .8);
  pointer-events: none;
}

.hero__script {
  position: absolute; z-index: 5;
  bottom: 13.5%; left: 50%;
  translate: calc(var(--mx, 0px) - 50%) var(--my, 0px);
  font-family: var(--font-script);
  font-size: clamp(1.6rem, 3.4vw, 2.6rem);
  color: var(--brass-soft);
  text-shadow: 0 6px 30px rgba(0, 0, 0, .9);
  white-space: nowrap;
}

.hero__meta {
  position: absolute; z-index: 5; top: 50%;
  display: flex; flex-direction: column; gap: .5rem;
  font-family: var(--font-label);
  font-weight: 200; font-size: .62rem;
  letter-spacing: .42em; text-transform: uppercase;
  color: var(--cream-dim);
}
.hero__meta--left  { left: clamp(1.2rem, 4vw, 4rem); }
.hero__meta--right { right: clamp(1.2rem, 4vw, 4rem); text-align: right; }
@media (max-width: 860px) { .hero__meta { display: none; } }

.hero__scroll {
  position: absolute; z-index: 6;
  bottom: 2.2rem; left: 50%; translate: -50% 0;
  display: flex; flex-direction: column; align-items: center; gap: .7rem;
  font-family: var(--font-label);
  font-weight: 200; font-size: .62rem;
  letter-spacing: .5em; text-transform: uppercase;
  color: var(--cream-dim);
}
.hero__scroll-line {
  width: 1px; height: 52px;
  background: linear-gradient(var(--brass), transparent);
  overflow: hidden; position: relative;
}
.hero__scroll-line::after {
  content: ""; position: absolute; left: 0; top: -100%;
  width: 100%; height: 100%;
  background: var(--cream);
  animation: scroll-drip 2.2s ease-in-out infinite;
}
@keyframes scroll-drip { to { top: 110%; } }

/* ════════ MARQUEE ════════ */

.marquee {
  border-block: 1px solid var(--line);
  padding: 1.1rem 0;
  overflow: hidden;
  background: var(--ink-soft);
  position: relative; z-index: 5;
}
.marquee__track {
  display: flex; width: max-content;
  animation: marquee 30s linear infinite;
}
.marquee__track span {
  font-family: var(--font-display);
  font-size: 1.15rem; letter-spacing: .3em;
  text-transform: uppercase;
  color: var(--brass-soft);
  white-space: nowrap;
}
@keyframes marquee { to { transform: translateX(-50%); } }

/* ════════ ABOUT ════════ */

.about {
  position: relative;
  display: grid;
  grid-template-columns: 1.05fr 1fr;
  gap: clamp(2rem, 6vw, 6rem);
  align-items: center;
  padding: clamp(7rem, 14vh, 11rem) clamp(1.5rem, 6vw, 7rem);
  overflow: hidden;
}
.about__bg-word, .gallery__bg-word {
  position: absolute; top: 8%; right: -2%;
  font-family: var(--font-script);
  font-size: clamp(8rem, 22vw, 19rem);
  color: rgba(216, 185, 138, .05);
  pointer-events: none;
  white-space: nowrap;
}

.about__images { position: relative; min-height: 560px; }
.about__img {
  position: absolute;
  overflow: hidden;
  border-radius: 2px;
  box-shadow: 0 40px 80px rgba(0, 0, 0, .55);
}
.about__img img {
  width: 100%; height: 100%; object-fit: cover;
  transition: transform 1.2s cubic-bezier(.2, .8, .2, 1);
}
.about__img:hover img { transform: scale(1.06); }
.about__img--main {
  --r: -2deg;
  width: min(68%, 380px); aspect-ratio: 4 / 5;
  top: 0; left: 4%;
  border: 1px solid var(--line);
}
.about__img--small {
  --r: 2.5deg;
  width: min(44%, 240px); aspect-ratio: 3 / 4;
  bottom: 0; right: 4%;
  border: 1px solid var(--line);
  outline: 10px solid var(--ink);
}

.about__heading, .listen__heading, .gallery__heading {
  font-family: var(--font-display);
  font-weight: 400;
  font-size: clamp(2.6rem, 6vw, 5rem);
  line-height: 1.04;
  letter-spacing: .02em;
}
.about__heading em, .listen__heading em, .gallery__heading em {
  font-family: var(--font-script);
  font-size: .92em;
  color: var(--brass-soft);
  font-style: normal;
}

.about__para {
  margin-top: 2.2rem;
  font-size: clamp(1.1rem, 1.6vw, 1.3rem);
  line-height: 1.75;
  color: var(--cream-dim);
  max-width: 46ch;
}
.about__quote {
  margin-top: 2.4rem;
  font-size: clamp(1.4rem, 2.4vw, 1.9rem);
  font-style: italic;
  color: var(--cream);
  border-left: 1px solid var(--brass);
  padding-left: 1.4rem;
}
.about__signature {
  display: block; margin-top: 1rem;
  font-family: var(--font-script);
  font-size: 1.9rem; color: var(--brass);
}

@media (max-width: 900px) {
  .about { grid-template-columns: 1fr; }
  .about__images { min-height: 70vw; order: 2; }
}

/* ════════ FILM ════════ */

.film {
  position: relative;
  height: min(92vh, 860px);
  overflow: hidden;
  border-block: 1px solid var(--line);
}
.film__video {
  position: absolute; inset: -12% 0;
  width: 100%; height: 124%;
  object-fit: cover;
  will-change: transform;
}
.film__shade {
  position: absolute; inset: 0;
  background:
    linear-gradient(180deg, rgba(19, 14, 10, .82) 0%, rgba(19, 14, 10, .18) 32%, rgba(19, 14, 10, .14) 60%, rgba(19, 14, 10, .88) 100%),
    radial-gradient(ellipse 70% 60% at 50% 62%, transparent 40%, rgba(19, 14, 10, .42) 100%);
}
.film__content {
  position: absolute; inset: 0;
  display: flex; flex-direction: column;
  align-items: center; justify-content: flex-end;
  text-align: center;
  padding-bottom: clamp(3rem, 9vh, 6rem);
}
.film__tag {
  font-family: var(--font-label);
  font-weight: 300; font-size: .68rem;
  letter-spacing: .5em; text-transform: uppercase;
  color: var(--brass-soft);
}
.film__title {
  margin-top: 1rem;
  font-family: var(--font-display);
  font-weight: 400;
  font-size: clamp(3rem, 8vw, 6.5rem);
  line-height: 1;
  letter-spacing: .04em;
  color: var(--cream);
  text-shadow: 0 16px 60px rgba(0, 0, 0, .8);
}
.film__title em {
  font-family: var(--font-script);
  font-style: normal;
  font-size: .95em;
  color: var(--brass-soft);
}
.film__sub {
  margin-top: 1.2rem;
  font-style: italic;
  font-size: clamp(1.05rem, 1.6vw, 1.25rem);
  color: var(--cream-dim);
  text-shadow: 0 4px 24px rgba(0, 0, 0, .9);
}
.film__cta {
  margin-top: 2rem;
  font-family: var(--font-label);
  font-weight: 300; font-size: .74rem;
  letter-spacing: .34em; text-transform: uppercase;
  color: var(--ink);
  background: var(--brass);
  border: 1px solid var(--brass);
  padding: .9em 2.2em;
  border-radius: 99px;
  transition: background .4s ease, color .4s ease;
}
.film__cta:hover { background: transparent; color: var(--brass-soft); }
@media (max-width: 700px) { .film { height: 72vh; } }

/* ════════ LISTEN ════════ */

.listen {
  position: relative;
  padding: clamp(6rem, 12vh, 10rem) clamp(1.5rem, 5vw, 5rem) clamp(7rem, 13vh, 11rem);
  background:
    radial-gradient(ellipse 55% 45% at 50% 42%, rgba(138, 59, 42, .16), transparent 70%),
    linear-gradient(180deg, var(--ink) 0%, #1a120b 50%, var(--ink) 100%);
  text-align: center;
  /* overflow stays visible: the radio's antenna rises past this section's top */
}
.listen__head { position: relative; z-index: 2; }
.listen__sub {
  margin-top: 1.4rem;
  font-size: 1.2rem; font-style: italic;
  color: var(--cream-dim);
}

.listen__stage {
  position: relative;
  height: clamp(340px, 56vh, 560px);
  margin: clamp(1rem, 4vh, 3rem) auto 0;
  max-width: 1100px;
}
/* canvas is far taller than the stage and centered on it — it reaches over
   the headings and the section above, so the opening antenna never hits a
   clipped edge. pointer-events off so it can't block clicks beneath it. */
.radio-canvas {
  position: absolute; left: 0; right: 0; bottom: -65%;
  height: 230%;
  z-index: 3;
  pointer-events: none;
}
.radio-canvas canvas { width: 100% !important; height: 100% !important; }

.listen__freq {
  position: absolute; bottom: -4%; left: 50%;
  translate: -50% 0; z-index: 3;
  font-family: var(--font-label);
  font-weight: 200; font-size: .75rem;
  letter-spacing: .55em; text-transform: uppercase;
  color: var(--brass);
}

/* equalizer bars flanking the radio */
.listen__signal {
  position: absolute; top: 50%; translate: 0 -50%;
  display: flex; gap: 7px; align-items: center;
  z-index: 1; opacity: .8;
}
.listen__signal--l { left: clamp(0.5rem, 9vw, 8rem); }
.listen__signal--r { right: clamp(0.5rem, 9vw, 8rem); }
.listen__signal i {
  width: 2px; height: 14px;
  background: var(--brass);
  animation: eq 1.1s ease-in-out infinite;
}
.listen__signal i:nth-child(1) { animation-delay: 0s; }
.listen__signal i:nth-child(2) { animation-delay: .18s; height: 26px; }
.listen__signal i:nth-child(3) { animation-delay: .32s; height: 40px; }
.listen__signal i:nth-child(4) { animation-delay: .12s; height: 26px; }
.listen__signal i:nth-child(5) { animation-delay: .26s; }
@keyframes eq { 0%, 100% { transform: scaleY(.35); } 50% { transform: scaleY(1); } }
@media (max-width: 700px) {
  .listen__signal { display: none; }
  .listen__stage { height: clamp(280px, 42vh, 420px); }
  .listen__freq { bottom: 2%; }
}

/* animation libraries unavailable: show everything statically */
.no-anim body { cursor: auto; }
.no-anim .cursor-dot, .no-anim .cursor-ring { display: none; }
.no-anim .reveal { opacity: 1; transform: none; }

/* embedded player */
.player {
  position: relative; z-index: 2;
  max-width: 780px;
  margin: clamp(2.5rem, 6vh, 4.5rem) auto 0;
}
.player__script {
  display: block;
  font-family: var(--font-script);
  font-size: clamp(1.8rem, 3.4vw, 2.4rem);
  color: var(--brass-soft);
  margin-bottom: 1.2rem;
}
.player__frame {
  position: relative;
  padding: 10px;
  border: 1px solid var(--line);
  outline: 1px solid rgba(216, 185, 138, .06);
  outline-offset: 8px;
  background: var(--ink-soft);
  box-shadow: 0 40px 80px rgba(0, 0, 0, .5);
  transition: border-color .4s ease;
}
.player__frame:hover { border-color: var(--brass); }
.player__frame iframe {
  display: block;
  width: 100%;
  aspect-ratio: 16 / 9;
  border: 0;
  background: #000;
}
/* file:// fallback card (YouTube refuses referrer-less embeds) */
.player__fallback {
  position: relative;
  display: grid; place-items: center;
  aspect-ratio: 16 / 9;
  overflow: hidden;
  background: #000;
}
.player__fallback img {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  object-fit: cover;
  opacity: .55;
  transition: opacity .5s ease, transform 1.2s cubic-bezier(.2, .8, .2, 1);
}
.player__fallback:hover img { opacity: .75; transform: scale(1.04); }
.player__fallback-play {
  position: relative; z-index: 1;
  display: grid; place-items: center;
  width: 76px; height: 76px;
  border-radius: 50%;
  border: 1px solid var(--brass);
  background: rgba(19, 14, 10, .55);
  color: var(--brass-soft);
  font-size: 1.5rem;
  padding-left: 6px;
  transition: background .4s ease, color .4s ease;
}
.player__fallback:hover .player__fallback-play { background: var(--brass); color: var(--ink); }
.player__fallback-text {
  position: relative; z-index: 1;
  margin-top: 1.1rem;
  font-family: var(--font-label);
  font-weight: 300; font-size: .78rem;
  letter-spacing: .34em; text-transform: uppercase;
  color: var(--cream);
  text-shadow: 0 4px 20px rgba(0, 0, 0, .9);
}
.player__fallback-hint {
  position: relative; z-index: 1;
  margin-top: .5rem;
  font-style: italic; font-size: .95rem;
  color: var(--cream-dim);
  text-shadow: 0 4px 20px rgba(0, 0, 0, .9);
}
.player__fallback { grid-template-rows: auto auto auto; align-content: center; }

.player__note {
  margin-top: 1.6rem;
  font-style: italic;
  font-size: 1.05rem;
  color: var(--cream-dim);
}

/* station chips */
.stations {
  position: relative; z-index: 2;
  margin: clamp(3rem, 7vh, 5rem) auto 0;
  max-width: 1060px;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1rem;
}
.station {
  position: relative;
  display: flex; align-items: baseline; justify-content: center; gap: .9rem;
  padding: 1.5rem 1rem 1.7rem;
  border: 1px solid var(--line);
  border-radius: 2px;
  background: rgba(242, 231, 211, .025);
  overflow: hidden;
  transition: border-color .4s ease, background .4s ease, transform .4s ease;
}
.station__freq {
  font-family: var(--font-display);
  font-size: 1.5rem;
  color: var(--brass);
  transition: color .4s ease;
}
.station__name {
  font-family: var(--font-label);
  font-weight: 300; font-size: .78rem;
  letter-spacing: .34em; text-transform: uppercase;
  color: var(--cream-dim);
  transition: color .4s ease;
}
.station__needle {
  position: absolute; top: 0; bottom: 0; left: 12%;
  width: 1px; background: var(--ember);
  opacity: 0;
  transition: left .6s cubic-bezier(.6, 0, .2, 1), opacity .3s ease;
}
.station:hover {
  border-color: var(--brass);
  background: rgba(201, 146, 79, .07);
  transform: translateY(-4px);
}
.station:hover .station__freq { color: var(--cream); }
.station:hover .station__name { color: var(--brass-soft); }
.station:hover .station__needle { opacity: 1; left: 88%; }
@media (max-width: 880px) { .stations { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 520px) { .stations { grid-template-columns: 1fr; } }

/* ════════ GALLERY ════════ */

.gallery {
  position: relative;
  padding: clamp(6rem, 12vh, 10rem) clamp(1.5rem, 5vw, 5rem) clamp(8rem, 16vh, 13rem);
  overflow: hidden;
}
.gallery__bg-word { top: 4%; left: -3%; right: auto; }
.gallery__head { text-align: center; position: relative; z-index: 2; }

.gallery__field {
  position: relative; z-index: 2;
  max-width: 1240px;
  margin: clamp(3rem, 8vh, 6rem) auto 0;
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  gap: clamp(1.2rem, 3vw, 2.6rem);
  align-items: start;
}
.shot {
  position: relative;
  rotate: var(--r, 0deg);
  border: 1px solid var(--line);
  background: var(--ink-soft);
  padding: 10px 10px 0;
  box-shadow: 0 30px 60px rgba(0, 0, 0, .5);
  transition: rotate .6s cubic-bezier(.2, .8, .2, 1), box-shadow .6s ease, border-color .6s ease;
}
.shot img {
  width: 100%;
  filter: saturate(.92) contrast(1.02);
  transition: filter .6s ease;
}
.shot figcaption {
  font-family: var(--font-script);
  font-size: 1.25rem;
  color: var(--brass-soft);
  text-align: center;
  padding: .8rem 0 1rem;
  opacity: .85;
}
.shot { transition: --r .6s cubic-bezier(.2, .8, .2, 1), box-shadow .6s ease, border-color .6s ease; }
.shot:hover {
  --r: 0deg;
  border-color: var(--brass);
  box-shadow: 0 45px 90px rgba(0, 0, 0, .65), 0 0 50px rgba(201, 146, 79, .12);
}
.shot:hover img { filter: saturate(1.05) contrast(1.04); }

/* scattered editorial placement */
.shot:nth-child(1) { --r: -3deg;   grid-column: 1 / span 3; margin-top: 0; }
.shot:nth-child(2) { --r: 2.5deg;  grid-column: 4 / span 2; margin-top: 14%; }
.shot:nth-child(3) { --r: -2deg;   grid-column: 6 / span 1; margin-top: 34%; min-width: 130%; margin-left: -30%; }
.shot:nth-child(4) { --r: 3deg;    grid-column: 1 / span 2; margin-top: 8%; }
.shot:nth-child(5) { --r: -1.5deg; grid-column: 3 / span 2; margin-top: -6%; }
.shot:nth-child(6) { --r: 2deg;    grid-column: 5 / span 2; margin-top: 16%; }
.shot:hover:nth-child(n) { --r: 0deg; }

@media (max-width: 780px) {
  .gallery__field { grid-template-columns: repeat(2, 1fr); }
  .shot:nth-child(n) { grid-column: auto / span 1; margin: 0 !important; min-width: 0; }
  .shot:nth-child(even) { translate: 0 2.5rem; }
}

/* ════════ REQUEST A SONG ════════ */

.request {
  position: relative;
  padding: clamp(6rem, 12vh, 10rem) clamp(1.5rem, 5vw, 5rem);
  background:
    radial-gradient(ellipse 50% 40% at 50% 30%, rgba(201, 146, 79, .08), transparent 70%),
    var(--ink-soft);
  border-top: 1px solid var(--line);
  overflow: hidden;
  text-align: center;
}
.request__bg-word {
  position: absolute; bottom: 2%; right: -2%;
  font-family: var(--font-script);
  font-size: clamp(8rem, 20vw, 17rem);
  color: rgba(216, 185, 138, .05);
  pointer-events: none;
  white-space: nowrap;
}
.request__inner {
  position: relative; z-index: 2;
  max-width: 680px;
  margin: 0 auto;
}
.request__heading {
  font-family: var(--font-display);
  font-weight: 400;
  font-size: clamp(2.6rem, 6vw, 5rem);
  line-height: 1.04;
}
.request__heading em {
  font-family: var(--font-script);
  font-size: .92em;
  color: var(--brass-soft);
  font-style: normal;
}
.request__sub {
  margin-top: 1.4rem;
  font-size: clamp(1.05rem, 1.6vw, 1.25rem);
  font-style: italic;
  color: var(--cream-dim);
}

.request__form { margin-top: clamp(2.5rem, 6vh, 4rem); text-align: left; }
.request__row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1.6rem;
}
@media (max-width: 600px) { .request__row { grid-template-columns: 1fr; } }

.request__field { display: block; margin-bottom: 1.8rem; }
.request__field span {
  display: block;
  font-family: var(--font-label);
  font-weight: 300; font-size: .66rem;
  letter-spacing: .4em; text-transform: uppercase;
  color: var(--brass);
  margin-bottom: .7rem;
}
.request__field input,
.request__field textarea {
  width: 100%;
  background: transparent;
  border: 0;
  border-bottom: 1px solid var(--line);
  padding: .65em 2px;
  font-family: var(--font-body);
  font-size: 1.15rem;
  color: var(--cream);
  border-radius: 0;
  resize: vertical;
  transition: border-color .4s ease;
}
.request__field input::placeholder,
.request__field textarea::placeholder { color: rgba(205, 191, 166, .38); font-style: italic; }
.request__field input:focus,
.request__field textarea:focus {
  outline: none;
  border-bottom-color: var(--brass);
}

.request__price-row {
  display: flex; align-items: center; gap: .8rem; flex-wrap: wrap;
}
.request__price-input {
  display: flex; align-items: baseline; gap: .35rem;
  border-bottom: 1px solid var(--line);
  padding: .4em 2px;
  transition: border-color .4s ease;
}
.request__price-input:focus-within { border-bottom-color: var(--brass); }
.request__price-input i {
  font-family: var(--font-display);
  font-style: normal;
  font-size: 1.3rem;
  color: var(--brass);
}
.request__price-input input {
  width: 6.5ch;
  background: transparent; border: 0; outline: none;
  font-family: var(--font-display);
  font-size: 1.5rem;
  color: var(--cream);
  -moz-appearance: textfield;
}
.request__price-input input::-webkit-outer-spin-button,
.request__price-input input::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }
.request__chip {
  font-family: var(--font-label);
  font-weight: 300; font-size: .72rem;
  letter-spacing: .22em;
  color: var(--cream-dim);
  background: transparent;
  border: 1px solid var(--line);
  border-radius: 99px;
  padding: .55em 1.3em;
  cursor: none;
  transition: border-color .35s ease, color .35s ease, background .35s ease;
}
.request__chip:hover, .request__chip.is-active {
  border-color: var(--brass);
  color: var(--brass-soft);
  background: rgba(201, 146, 79, .08);
}

.request__submit {
  display: inline-block;
  font-family: var(--font-label);
  font-weight: 300; font-size: .74rem;
  letter-spacing: .34em; text-transform: uppercase;
  color: var(--ink);
  background: var(--brass);
  border: 1px solid var(--brass);
  padding: 1em 2.6em;
  border-radius: 99px;
  cursor: none;
  transition: background .4s ease, color .4s ease, opacity .4s ease;
}
.request__submit:hover { background: transparent; color: var(--brass-soft); }
.request__submit:disabled { opacity: .5; pointer-events: none; }

.request__status {
  margin-top: 1.4rem;
  min-height: 1.4em;
  font-style: italic;
  font-size: 1.05rem;
  color: var(--brass-soft);
}
.request__status.is-error { color: #c96a4f; }

/* ════════ FOOTER ════════ */

.footer {
  position: relative;
  text-align: center;
  padding: clamp(6rem, 14vh, 10rem) 1.5rem 3rem;
  border-top: 1px solid var(--line);
  background: linear-gradient(180deg, var(--ink) 0%, #0c0805 100%);
  overflow: hidden;
}
.footer__halo {
  position: absolute; top: -40%; left: 50%;
  width: 70vw; aspect-ratio: 2 / 1;
  translate: -50% 0;
  background: radial-gradient(ellipse, rgba(201, 146, 79, .08), transparent 65%);
  pointer-events: none;
}
.footer__script {
  font-family: var(--font-script);
  font-size: clamp(3.6rem, 10vw, 8rem);
  color: var(--cream);
  line-height: 1.1;
}
.footer__tag {
  margin-top: 1rem;
  font-style: italic; font-size: 1.15rem;
  color: var(--cream-dim);
}
.footer__links {
  margin-top: 2.6rem;
  display: flex; justify-content: center; align-items: center; gap: 1.4rem;
  font-family: var(--font-label);
  font-weight: 300; font-size: .72rem;
  letter-spacing: .34em; text-transform: uppercase;
}
.footer__links span { color: var(--brass); font-size: .6rem; }
.footer__links a { color: var(--cream-dim); transition: color .35s ease; }
.footer__links a:hover { color: var(--brass-soft); }
.footer__copy {
  margin-top: 3.4rem;
  font-family: var(--font-label);
  font-weight: 200; font-size: .62rem;
  letter-spacing: .4em; text-transform: uppercase;
  color: rgba(205, 191, 166, .45);
}

/* ── reduced motion ────────────────────────────── */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: .01s !important;
    animation-iteration-count: 1 !important;
    transition-duration: .01s !important;
  }
}