/* ================================================================
   DOCTHOR — monochrome chrome + molten orange  ·  v2
   ================================================================ */

:root {
  color-scheme: dark; /* native dark site — keeps dark-mode extensions from recoloring it */
  --black: #060607;
  --steel-950: #0b0b0e;
  --steel-900: #101014;
  --line: #24252c;
  --chrome: #e8eaef;
  --dim: #9ca0ab;
  --orange: #ff544f;      /* accent: coral red, matched to the artist photos */
  --orange-hot: #ff7d79;
  --gold: #ffe783;        /* sparing highlight: now-playing, live values */

  /* type system: Big Shoulders = industrial condensed display voice
     (angular terminals echo the chrome headings); IBM Plex Sans + Mono
     form one engineered family for body and HUD labels */
  --font-display: "Big Shoulders", "Arial Narrow", sans-serif;
  --font-body: "IBM Plex Sans", "Helvetica Neue", sans-serif;
  --font-mono: "IBM Plex Mono", "SFMono-Regular", monospace;

  --nav-h: 64px;
  --pad: clamp(20px, 5vw, 48px);

  /* z scale: flow-bg 0 · content 1 · grain 40 · nav 50 · menu 55 */
}

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

html { scroll-behavior: smooth; }

body {
  background: var(--black);
  color: var(--chrome);
  font-family: var(--font-body);
  font-size: 17px;
  line-height: 1.65;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}
body.menu-open { overflow: hidden; }

/* film grain over everything */
body::after {
  content: "";
  position: fixed;
  inset: 0;
  z-index: 40;
  pointer-events: none;
  opacity: .05;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='240' height='240'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2'/%3E%3C/filter%3E%3Crect width='240' height='240' filter='url(%23n)'/%3E%3C/svg%3E");
}

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

.mono {
  font-family: var(--font-mono);
  font-size: 13px;
  letter-spacing: .12em;
  text-transform: uppercase;
}

:focus-visible {
  outline: 2px solid var(--orange);
  outline-offset: 3px;
}

/* screen-reader / crawler text without visual footprint */
.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}

.skip-link {
  position: fixed;
  top: -100px;
  left: 16px;
  z-index: 100;
  padding: 10px 16px;
  background: var(--orange);
  color: #000;
  font-family: var(--font-mono);
  font-size: 13px;
  transition: top .2s;
}
.skip-link:focus { top: 12px; }

/* ================= NAV ================= */

.nav {
  position: fixed;
  top: 0; left: 0; right: 0;
  z-index: 50;
  height: var(--nav-h);
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding-inline: var(--pad);
  background: transparent;
  transition: background .3s, border-color .3s;
  border-bottom: 1px solid transparent;
}
.nav.scrolled {
  background: rgba(6, 6, 7, .82);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  border-bottom-color: var(--line);
}
body.menu-open .nav {
  background: transparent;
  border-bottom-color: transparent;
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
}

.nav-brand { display: flex; align-items: center; }
.nav-brand img {
  height: 48px;
  width: auto;
  display: block;
  transition: filter .25s;
}
.nav-brand:hover img { filter: brightness(1.25); }
@media (max-width: 640px) {
  .nav-brand img { height: 40px; }
}

/* burger */
.burger {
  position: relative;
  width: 52px;
  height: 44px;
  background: none;
  border: 1px solid var(--line);
  cursor: pointer;
  transition: border-color .25s;
}
.burger:hover { border-color: var(--orange); }
.burger span {
  position: absolute;
  left: 14px;
  right: 14px;
  height: 2px;
  background: var(--chrome);
  transition: transform .35s cubic-bezier(.6, 0, .2, 1), top .35s cubic-bezier(.6, 0, .2, 1), background .25s;
}
.burger span:nth-child(1) { top: 16px; }
.burger span:nth-child(2) { top: 26px; }
.burger:hover span { background: var(--orange); }
body.menu-open .burger span:nth-child(1) { top: 21px; transform: rotate(45deg); }
body.menu-open .burger span:nth-child(2) { top: 21px; transform: rotate(-45deg); }

/* ================= FULL-SCREEN MENU ================= */

.menu {
  position: fixed;
  inset: 0;
  z-index: 45;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  gap: clamp(36px, 7vh, 64px);
  background: rgba(4, 4, 5, .96);
  backdrop-filter: blur(18px);
  -webkit-backdrop-filter: blur(18px);
  opacity: 0;
  visibility: hidden;
  transition: opacity .4s ease, visibility 0s linear .4s;
}
body.menu-open .menu {
  opacity: 1;
  visibility: visible;
  transition: opacity .4s ease;
}

/* chrome emblem above the links — sized to the width of the link text */
.menu-logo-link { display: block; }
.menu-logo {
  width: min(60vw, 300px);
  max-height: 22svh; /* short screens: don't crowd the links out */
  object-fit: contain;
  opacity: 0;
  transform: translateY(20px);
  transition: opacity .5s ease .04s, transform .5s cubic-bezier(.2, .7, .2, 1) .04s;
}
body.menu-open .menu-logo { opacity: 1; transform: none; }
body.menu-open .menu-logo-link:hover .menu-logo { transform: scale(1.04); }

.menu-links {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: clamp(10px, 2.4vh, 22px);
}
.menu-links a {
  position: relative;
  display: flex;
  align-items: baseline;
  gap: 18px;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: clamp(40px, 7.5vh, 68px);
  line-height: 1.05;
  text-transform: uppercase;
  letter-spacing: .06em;
  color: var(--chrome);
  opacity: 0;
  transform: translateY(28px);
  transition: color .25s, opacity .5s ease, transform .5s cubic-bezier(.2, .7, .2, 1);
}
body.menu-open .menu-links a { opacity: 1; transform: none; }
body.menu-open .menu-links a:nth-child(1) { transition-delay: .10s; }
body.menu-open .menu-links a:nth-child(2) { transition-delay: .17s; }
body.menu-open .menu-links a:nth-child(3) { transition-delay: .24s; }
body.menu-open .menu-links a:nth-child(4) { transition-delay: .31s; }
.menu-links a:hover { color: var(--orange); }
.menu-links a[aria-current="true"] { color: var(--orange); }

.menu-num {
  font-size: 13px;
  color: var(--dim);
}
.menu-links a:hover .menu-num { color: var(--orange-hot); }

.menu-meta {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 16px;
  opacity: 0;
  transform: translateY(16px);
  transition: opacity .5s ease .4s, transform .5s ease .4s;
}
body.menu-open .menu-meta { opacity: 1; transform: none; }
.menu-socials { display: flex; gap: 26px; }
.menu-socials a, .menu-mail { color: var(--dim); transition: color .2s; }
.menu-socials a:hover, .menu-mail:hover { color: var(--orange); }

/* ================= FLOWING BACKGROUND ================= */

.flow-bg {
  position: fixed;
  inset: 0;
  z-index: 0;
  background: url("../assets/swirl-static.jpg") center / cover no-repeat var(--black);
}
.flow-video {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
/* one consistent darken + blur across every section below the hero */
.flow-dim {
  position: absolute;
  inset: 0;
  background: rgba(6, 6, 7, .58);
  backdrop-filter: blur(9px);
  -webkit-backdrop-filter: blur(9px);
}

main { position: relative; z-index: 1; }
.footer { position: relative; z-index: 1; }

/* ================= HERO ================= */

.hero {
  position: relative;
  min-height: 100svh;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  background: var(--black);
}

.hero-video {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  z-index: 0;
}

/* vignette + melt into the flow background below */
.hero-veil {
  position: absolute;
  inset: 0;
  z-index: 1;
  background:
    linear-gradient(to bottom, rgba(6,6,7,.55), transparent 22%),
    linear-gradient(to top, var(--black) 0%, rgba(6,6,7,0) 26%),
    radial-gradient(ellipse at center, transparent 45%, rgba(6,6,7,.5) 100%);
}

.hero-core {
  position: relative;
  z-index: 2;
  display: flex;
  flex-direction: column;
  align-items: center;
  padding-inline: var(--pad);
  padding-top: var(--nav-h);
}

.logo-stage {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
}

.hero-glow {
  position: absolute;
  width: min(64vw, 620px);
  aspect-ratio: 1;
  background: radial-gradient(closest-side, rgba(238,241,248,.30), rgba(238,241,248,.10) 48%, transparent 72%);
  animation: breathe 6.5s ease-in-out infinite;
  pointer-events: none;
}
@keyframes breathe {
  0%, 100% { opacity: .78; transform: scale(1); }
  50%      { opacity: 1;   transform: scale(1.06); }
}

/* ---- flashlight reveal ----
   cursor position (--mx/--my, px within the stage) drives two inverse
   radial masks: the logo gets a soft-edged hole, the portrait is visible
   only inside that same circle. --mr is the flashlight radius. */
.logo-stage {
  --mx: -999px;
  --my: -999px;
  --mr: 130px;
}

.reveal-portrait {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
  -webkit-mask-image: radial-gradient(circle var(--mr) at var(--mx) var(--my), #000 0 55%, transparent 100%);
  mask-image: radial-gradient(circle var(--mr) at var(--mx) var(--my), #000 0 55%, transparent 100%);
}

.hero-logo {
  width: min(66vw, 470px);
  height: auto;
  position: relative;
  filter: drop-shadow(0 8px 34px rgba(0,0,0,.65));
  -webkit-mask-image: radial-gradient(circle var(--mr) at var(--mx) var(--my), transparent 0 55%, #000 100%);
  mask-image: radial-gradient(circle var(--mr) at var(--mx) var(--my), transparent 0 55%, #000 100%);
}

.hero-tag {
  margin-top: clamp(20px, 3.5vh, 34px);
  display: flex;
  align-items: center;
  gap: 14px;
  color: var(--chrome);
  text-shadow: 0 1px 14px rgba(0, 0, 0, .85);
  letter-spacing: .55em;
  padding-left: .55em;
  font-size: 14px;
}
.hero-tag::before,
.hero-tag::after {
  content: "";
  width: 34px;
  height: 1px;
  background: rgba(232, 234, 239, .4);
}
.hero-cta {
  margin-top: clamp(26px, 4.5vh, 44px);
  display: flex;
  gap: 16px;
  flex-wrap: wrap;
  justify-content: center;
}
/* both CTAs share one width (longer label + a little margin) */
.hero-cta .btn {
  width: 172px;
  padding-inline: 12px;
  text-align: center;
}

.btn {
  display: inline-block; /* inline boxes don't clip — the sheen escaped on non-flex parents */
  position: relative;
  overflow: hidden;
  clip-path: inset(0); /* hard clip for the sheen — overflow alone is unreliable in Safari */
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 16px;
  letter-spacing: .2em;
  text-transform: uppercase;
  padding: 14px 34px;
  border: 1px solid transparent;
  transition: background .2s, color .2s, border-color .2s, transform .2s;
}
.btn::after { /* sheen sweep */
  content: "";
  position: absolute;
  top: 0; bottom: 0;
  left: -80%;
  width: 60%;
  background: linear-gradient(100deg, transparent, rgba(255,255,255,.35), transparent);
  transform: skewX(-20deg);
  transition: left .5s ease;
}
.btn:hover::after { left: 120%; }
.btn:hover { transform: translateY(-2px); }
.btn-solid { background: var(--orange); color: #0a0503; }
.btn-solid:hover { background: var(--orange-hot); }
.btn-ghost {
  border-color: rgba(232,234,239,.35);
  color: var(--chrome);
  background: rgba(6, 6, 7, .42); /* translucent fill so it reads over the bright pool */
}
.btn-ghost:hover { border-color: var(--chrome); background: rgba(6, 6, 7, .6); }

.scroll-cue {
  position: absolute;
  bottom: 22px;
  left: 50%;
  transform: translateX(-50%);
  z-index: 2;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 9px;
  padding: 8px 14px; /* generous hit area */
}
@media (max-width: 767px) {
  /* compact chevron-only cue, centered below the stacked buttons */
  .scroll-cue { left: 50%; transform: translateX(-50%); bottom: 12px; }
  .cue-text, .cue-line { display: none; }
  .cue-chev { width: 9px; height: 9px; }
}
.cue-text {
  font-size: 10px;
  letter-spacing: .42em;
  padding-left: .42em; /* optical centering against tracking */
  color: rgba(232, 234, 239, .78);
  text-shadow: 0 1px 10px rgba(0, 0, 0, .9);
  transition: color .25s;
}
.cue-line {
  width: 1px;
  height: 52px;
  background: linear-gradient(to bottom, transparent, rgba(232, 234, 239, .9));
  animation: drop 2.2s ease-in-out infinite;
  transform-origin: top;
  transition: background .25s;
}
.cue-chev {
  width: 7px;
  height: 7px;
  border-right: 1px solid rgba(232, 234, 239, .8);
  border-bottom: 1px solid rgba(232, 234, 239, .8);
  transform: rotate(45deg);
  animation: chev 2.2s ease-in-out infinite;
  transition: border-color .25s;
}
@keyframes chev {
  0%, 25%  { opacity: .25; transform: rotate(45deg) translate(0, 0); }
  55%      { opacity: 1;   transform: rotate(45deg) translate(3px, 3px); }
  100%     { opacity: .25; transform: rotate(45deg) translate(0, 0); }
}
.scroll-cue:hover .cue-text { color: var(--orange); }
.scroll-cue:hover .cue-chev { border-color: var(--orange); }
.scroll-cue:hover .cue-line { background: linear-gradient(to bottom, transparent, var(--orange)); }
@keyframes drop {
  0%   { transform: scaleY(0); opacity: 0; }
  35%  { transform: scaleY(1); opacity: 1; }
  100% { transform: scaleY(1) translateY(10px); opacity: 0; }
}

/* ================= TICKER ================= */

.ticker {
  position: relative;
  z-index: 1;
  overflow: hidden;
  border-block: 1px solid var(--line);
  background: rgba(6, 6, 7, .72);
  padding-block: 14px;
}
.ticker-track {
  display: flex;
  width: max-content;
  white-space: nowrap;
  animation: ticker 30s linear infinite;
}
.ticker-track span {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 17px;
  letter-spacing: .28em;
  text-transform: uppercase;
  color: var(--dim);
}
.ticker-track em {
  font-style: normal;
  color: var(--orange);
  margin-inline: 14px;
}
@keyframes ticker {
  from { transform: translateX(0); }
  to   { transform: translateX(-50%); }
}

/* ================= SECTIONS ================= */

.section {
  padding-block: clamp(84px, 12vw, 150px);
  scroll-margin-top: var(--nav-h);
  display: flex;
  align-items: center;
}

.container {
  max-width: 1200px;
  width: 100%;
  margin-inline: auto;
  padding-inline: var(--pad);
}

/* ---- desktop scroll snapping: 100% native CSS, no JS ----
   mandatory: the page never rests between sections (nearest one wins).
   snap-stop always: one gesture = one section, flings can't skip.
   The hero's own snap point keeps it freely reachable; scrolling down
   from it carries fully into About (the first hard stop).
   Sections taller than the viewport scroll freely inside their snap
   area (per spec), so nothing gets trapped on small screens. */
@media (min-width: 1024px) and (min-height: 640px) {
  html { scroll-snap-type: y mandatory; }
  .hero {
    scroll-snap-align: start;
    scroll-snap-stop: always;
  }
  .section {
    min-height: 100svh;
    padding-block: clamp(48px, 7vh, 90px);
    scroll-snap-align: start;
    scroll-snap-stop: always;
    scroll-margin-top: 0; /* snap flush to the viewport; anchors then match snap positions */
  }
}

.sec-head { margin-bottom: clamp(40px, 6vw, 72px); }
.sec-head-center { text-align: center; }
.sec-head-center .eyebrow { justify-content: center; }

.eyebrow {
  display: flex;
  align-items: center;
  gap: 10px;
  color: var(--orange);
  margin-bottom: 18px;
}

h2 {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: clamp(44px, 7.5vw, 88px);
  line-height: .95;
  text-transform: uppercase;
  letter-spacing: .01em;
}

.chrome-text {
  background: linear-gradient(160deg, #f8f9fb 0%, #c7cad2 26%, #5d616c 46%, #eef0f4 54%, #8a8e99 72%, #f2f3f6 100%);
  background-size: 220% 220%;
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  animation: sheen 9s ease-in-out infinite alternate;
}
@keyframes sheen {
  from { background-position: 0% 0%; }
  to   { background-position: 100% 100%; }
}

/* rendered chrome heading images — drop-in replacement for the h2 text,
   sized to the responsive scale of the old font-size clamp, then scaled up
   via transform so the layout box (and everything around it) stays put */
.heading-img img {
  height: clamp(44px, 7.5vw, 88px);
  width: auto;
  max-width: 65%;           /* leaves room for the 1.53 scale-up on narrow screens */
  object-fit: contain;      /* if max-width bites, shrink — don't distort */
  object-position: left center;
  transform: scale(1.53);
  transform-origin: left center;
}
/* NOTE: .booking-inner is a flex column, so this h2 shrinks to fit its
   content — a % max-width here resolves against the heading itself and
   cancels the scale-up. No % guard; small screens step the scale down.
   The transform doesn't reserve layout space, so the h2 carries margins
   sized to the scaled image's overflow to keep neighbors clear. */
.sec-head-center .heading-img {
  --hh: clamp(44px, 7.5vw, 88px);        /* same value the img height uses */
  margin-top: calc(var(--hh) * 0.78);    /* full upward overflow + breathing room — collapses with (and wins over) the eyebrow's 18px margin */
  margin-bottom: calc(var(--hh) * 0.25); /* extra air before the booking line */
}
@media (max-width: 520px) {
  .sec-head-center .heading-img { margin-top: calc(var(--hh) * 0.62); } /* matches the 2.14 phone scale-up */
}
.sec-head-center .heading-img img {
  margin-inline: auto;
  object-position: center;
  max-width: none;
  transform: scale(2.38);   /* must out-scale the wide email line below it */
  transform-origin: center;
}
@media (max-width: 520px) {
  /* the heading must dominate the section on phones too; 2.14 bleeds
     ~8px past the container padding on each side (intentional — still
     12px inside the viewport at 375px) */
  .sec-head-center .heading-img img { transform: scale(2.14); }
}

/* ================= ABOUT ================= */

.about-grid {
  display: grid;
  grid-template-columns: minmax(0, 5fr) minmax(0, 6fr);
  gap: clamp(32px, 5vw, 72px);
  align-items: center;
}

.about-photo {
  overflow: hidden;
  background: #000;
  max-height: 66svh; /* slightly under the heading's scale so the photo doesn't compete with it */
}
.about-photo img {
  width: 100%;
  height: 100%;
  max-height: 66svh;
  object-fit: contain;
  transition: transform .6s ease;
}
.about-photo:hover img { transform: scale(1.03); }

.about-body p + p { margin-top: 1.2em; }
.about-body { color: var(--dim); font-size: 18px; }
.about-body p:first-child { color: var(--chrome); font-size: 20px; }

.facts {
  list-style: none;
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-top: 34px;
}
.facts li {
  border: 1px solid var(--line);
  color: var(--dim);
  padding: 9px 14px;
  font-size: 12px;
  background: rgba(6, 6, 7, .5);
  transition: border-color .25s, color .25s;
}
.facts li:hover { border-color: var(--dim); color: var(--chrome); }
.facts li:first-child {
  border-color: var(--orange);
  color: var(--orange);
}

@media (max-width: 860px) {
  .about-grid { grid-template-columns: 1fr; gap: 22px; }
  /* stacked mode: crop the 2:3 portrait to a wide 3:2 window so the
     whole section reads in one screen */
  .about-photo {
    max-width: none;
    max-height: none;
    aspect-ratio: 3 / 2;
  }
  .about-photo img {
    max-height: none;
    object-fit: cover;
    object-position: 50% 22%; /* keep the face in frame */
  }
}

/* ================= MUSIC ================= */

/* ---- custom SoundCloud player card ---- */

/* pull the player closer to the heading (half the default section-head gap) */
#music .sec-head { margin-bottom: clamp(20px, 3vw, 36px); }
/* slightly tighter vertical padding so heading + player + platforms fit 100svh */
@media (min-width: 1024px) and (min-height: 640px) {
  #music.section {
    padding-block: clamp(40px, 5.5vh, 76px);
    padding-top: calc(clamp(40px, 5.5vh, 76px) + clamp(24px, 4vh, 40px));
  }
  /* About snaps flush to the top — give its eyebrow extra breathing room */
  #about.section { padding-top: calc(clamp(48px, 7vh, 90px) + clamp(24px, 4vh, 40px)); }
}

.player {
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
  gap: clamp(24px, 3.5vw, 48px);
  padding: clamp(20px, 3vw, 34px);
  border: 1px solid var(--line);
  background:
    radial-gradient(ellipse at 18% 0%, rgba(255, 84, 79, .10), transparent 55%),
    rgba(12, 12, 15, .82);
}
/* HUD corner brackets, same language as the old embed frames */
.player::before,
.player::after {
  content: "";
  position: absolute;
  width: 26px;
  height: 26px;
  pointer-events: none;
}
.player::before {
  top: -1px; left: -1px;
  border-top: 1px solid var(--orange);
  border-left: 1px solid var(--orange);
}
.player::after {
  bottom: -1px; right: -1px;
  border-bottom: 1px solid var(--orange);
  border-right: 1px solid var(--orange);
}

/* left pane: cover + transport — everything hangs on the cover's width,
   centered as one column */
.player-stage {
  --coverw: min(100%, 34svh); /* sized so the full card lands ~6% shorter and the section fits one screen */
  display: flex;
  flex-direction: column;
  align-items: center;
  min-width: 0;
}
.player-cover {
  width: var(--coverw);
  aspect-ratio: 1;
  overflow: hidden;
  border: 1px solid var(--line);
  background: var(--steel-900);
}
.player-cover img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: opacity .35s ease;
}
.player-track {
  width: var(--coverw);
  margin-top: 18px;
  font-family: var(--font-display);
  font-weight: 600;
  font-size: clamp(18px, 2vw, 24px);
  letter-spacing: .04em;
  text-transform: uppercase;
  color: var(--chrome);
  line-height: 1.2;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.player-progress {
  width: var(--coverw); /* timeline matches the cover, centered with it */
  margin-top: 14px;
  height: 5px;
  background: var(--line);
  cursor: pointer;
  transition: transform .2s;
}
.player-progress:hover,
.player-progress:focus-visible { transform: scaleY(1.5); }
.player-progress-fill {
  width: 0%;
  height: 100%;
  background: linear-gradient(90deg, var(--orange), var(--orange-hot));
}
.player-times {
  width: var(--coverw);
  margin-top: 8px;
  display: flex;
  justify-content: space-between;
  color: var(--dim);
  font-size: 11px;
}
.player-controls {
  margin-top: 16px;
  display: flex;
  align-items: center;
  justify-content: center; /* transport centered under the cover */
  gap: 12px;
}
.pbtn {
  width: 46px;
  height: 46px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(6, 6, 7, .5);
  border: 1px solid var(--line);
  border-radius: 50%;
  color: var(--chrome);
  cursor: pointer;
  transition: border-color .2s, color .2s, background .2s, transform .2s;
}
.pbtn svg { display: block; } /* kill inline-baseline offset so icons sit dead-center */
.pbtn svg[hidden] { display: none; } /* display:block above must not resurrect the hidden play/pause twin */
.pbtn:hover { border-color: var(--orange); color: var(--orange); transform: translateY(-1px); }
.pbtn-play {
  width: 56px;
  height: 56px;
  background: var(--orange);
  border-color: var(--orange);
  color: #0a0503;
}
.pbtn-play:hover { background: var(--orange-hot); border-color: var(--orange-hot); color: #0a0503; }

/* right pane: scrollable track list */
.player-listwrap {
  display: flex;
  flex-direction: column;
  min-width: 0;
  min-height: 0;
}
.player-list-label { color: var(--chrome); margin-bottom: 10px; }
.player-list-label span { color: var(--dim); }
.player-list {
  list-style: none;
  overflow-y: auto;
  min-height: 0;
  max-height: clamp(282px, 45svh, 451px); /* -6%, in step with the cover */
  border-top: 1px solid var(--line);
  scrollbar-width: thin;
  scrollbar-color: var(--line) transparent;
}
.player-list::-webkit-scrollbar { width: 6px; }
.player-list::-webkit-scrollbar-thumb { background: var(--line); }
.player-list::-webkit-scrollbar-thumb:hover { background: var(--orange); }
.player-list-note { color: var(--dim); padding: 18px 4px; }

.player-row {
  width: 100%;
  display: flex;
  align-items: baseline;
  gap: 14px;
  padding: 13px 10px;
  background: none;
  border: 0;
  border-bottom: 1px solid var(--line);
  color: var(--dim);
  font-family: var(--font-body);
  font-size: 15px;
  text-align: left;
  cursor: pointer;
  transition: background .2s, color .2s;
}
.player-row .row-num {
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: .08em;
  flex: 0 0 26px;
}
.player-row .row-title {
  flex: 1 1 auto;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  color: var(--chrome);
}
.player-row .row-dur {
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: .08em;
}
.player-row:hover { background: rgba(255, 84, 79, .07); }
.player-row:hover .row-num { color: var(--orange); }
.player-row.is-active { background: rgba(255, 84, 79, .10); }
.player-row.is-active .row-num,
.player-row.is-active .row-title { color: var(--orange); }

/* gold mini-equalizer on the playing row */
.row-eq {
  flex: 0 0 14px;
  display: none;
  align-items: flex-end;
  gap: 2px;
  height: 12px;
  align-self: center;
}
.player-row.is-active .row-eq { display: flex; }
.row-eq span {
  width: 3px;
  height: 100%;
  background: var(--gold);
  animation: eq 1s ease-in-out infinite;
  transform-origin: bottom;
}
.row-eq span:nth-child(2) { animation-delay: .25s; }
.row-eq span:nth-child(3) { animation-delay: .5s; }
@keyframes eq {
  0%, 100% { transform: scaleY(.25); }
  50%      { transform: scaleY(1); }
}
.player-row.is-active.is-paused .row-eq span { animation-play-state: paused; }

.player-attrib { margin-top: 12px; font-size: 11px; }
.player-attrib a { color: var(--dim); transition: color .2s; }
.player-attrib a:hover { color: var(--orange); }

/* ---- SoundCloud consent gate (two-click solution) ---- */
.player.awaiting-consent .player-stage,
.player.awaiting-consent .player-listwrap { display: none; }
.player-consent {
  grid-column: 1 / -1;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: 18px;
  padding: clamp(28px, 5vw, 56px) clamp(16px, 4vw, 48px);
}
.player-consent-eyebrow { color: var(--orange); }
.player-consent-text {
  max-width: 56ch;
  color: var(--dim);
  font-size: 15px;
}
.player-consent-text a { color: var(--chrome); border-bottom: 1px solid var(--line); transition: color .2s, border-color .2s; }
.player-consent-text a:hover { color: var(--orange); border-color: var(--orange); }
.player-consent-note { color: var(--dim); font-size: 11px; }
.player-consent[hidden] { display: none; }

.player-withdraw {
  margin-left: 14px;
  background: none;
  border: 0;
  border-bottom: 1px solid var(--line);
  padding: 0 0 1px;
  color: var(--dim);
  font-size: 11px;
  letter-spacing: .12em;
  text-transform: uppercase;
  cursor: pointer;
  transition: color .2s, border-color .2s;
}
.player-withdraw:hover { color: var(--orange); border-color: var(--orange); }
.player-withdraw[hidden] { display: none; }

/* the real SoundCloud widget: present + active, visually parked off-canvas */
.player-widget {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip-path: inset(50%);
}
.player-widget iframe { width: 100%; height: 100%; border: 0; }

/* fallback: widget API unavailable — show SoundCloud's own player instead */
.player.player-fallback .player-stage,
.player.player-fallback .player-listwrap { display: none; }
.player.player-fallback .player-widget {
  position: static;
  width: 100%;
  height: 400px;
  clip-path: none;
}

@media (max-width: 860px) {
  .player { grid-template-columns: 1fr; }
  .player-stage { --coverw: min(100%, 300px); }
  .player-list { max-height: 40svh; }
}
/* phones: compact player so cover, transport, list AND the platform
   links all land within a single screen */
@media (max-width: 640px) {
  #music.section { padding-block: 36px; }
  .player { padding: 14px; gap: 14px; }
  .player-stage { --coverw: min(100%, 160px); }
  .player-track { margin-top: 10px; font-size: 15px; }
  .player-progress { margin-top: 9px; }
  .player-controls { margin-top: 10px; }
  .pbtn { width: 42px; height: 42px; }
  .pbtn-play { width: 50px; height: 50px; }
  .player-list { max-height: 19svh; }
  .player-row { padding: 9px 8px; font-size: 14px; }
  .player-attrib { margin-top: 8px; }
}

.platforms {
  /* mirrors the VISUAL heading -> player gap (the scaled heading image
     overflows its layout box, so the on-screen distance is ~24px) */
  margin-top: clamp(14px, 1.5vw, 24px);
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
}
.platform {
  border: 1px solid var(--line);
  color: var(--dim);
  padding: 12px 20px;
  background: rgba(6, 6, 7, .5);
  transition: color .2s, border-color .2s, background .2s;
}
.platform:hover {
  color: #0a0503;
  background: var(--orange);
  border-color: var(--orange);
}
.platform span { margin-left: 6px; }

/* ================= SOCIALS ================= */

.social-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: clamp(16px, 2.5vw, 28px);
}
@media (max-width: 860px) {
  .social-grid { grid-template-columns: 1fr; gap: 12px; }
}

.social-tile {
  position: relative;
  overflow: hidden;
  border: 1px solid var(--line);
  aspect-ratio: 2 / 3; /* matches the new 1000×1500 photos — no crop */
  background: #000;
  max-height: 62svh;
}
.social-tile img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform .6s ease, opacity .4s ease;
  opacity: .92;
}
.social-tile::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(to top, rgba(6,6,7,.85) 0%, rgba(6,6,7,.2) 45%, transparent 70%);
}
.social-tile:hover img { transform: scale(1.05); opacity: 1; }

.tile-arrow {
  position: absolute;
  top: 14px;
  right: 18px;
  z-index: 2;
  font-size: 22px;
  color: var(--chrome);
  transition: transform .25s, color .25s;
}
.social-tile:hover .tile-arrow {
  transform: translate(3px, -3px);
  color: var(--orange);
}

.tile-label {
  position: absolute;
  left: 20px;
  bottom: 18px;
  z-index: 2;
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.tile-name {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 30px;
  text-transform: uppercase;
  letter-spacing: .06em;
  line-height: 1;
}
.tile-handle { color: var(--dim); font-size: 12px; }

/* stacked mode: portrait tiles become wide banners — all three fit one
   screen with the heading (must come AFTER the base .social-tile rules,
   same specificity) */
@media (max-width: 860px) {
  .social-tile {
    aspect-ratio: auto;
    height: 21svh;
    min-height: 120px;
    max-height: none;
  }
  .social-tile img { object-position: 50% 12%; } /* heads live in the top third of the portraits */
  .tile-name { font-size: 22px; }
  .tile-label { left: 16px; bottom: 14px; }
  .tile-arrow { top: 10px; right: 14px; font-size: 18px; }
}

/* ================= BOOKING ================= */

.booking-inner {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
}

.booking-line { color: var(--dim); font-size: 19px; max-width: 46ch; }

.booking-mail {
  margin-top: clamp(26px, 4vw, 40px);
  font-family: var(--font-display);
  font-weight: 600;
  font-size: clamp(24px, 4.6vw, 52px);
  letter-spacing: .04em;
  color: var(--chrome);
  border-bottom: 2px solid var(--line);
  padding-bottom: 8px;
  transition: color .2s, border-color .2s, letter-spacing .3s;
  word-break: break-all;
}
.booking-mail:hover {
  color: var(--orange);
  border-color: var(--orange);
  letter-spacing: .07em;
}

.booking-actions {
  margin-top: clamp(28px, 4vw, 40px);
}

.press-note {
  margin-top: 16px;
  max-width: 68ch;
  color: var(--dim);
  font-size: 10.5px;
  line-height: 1.6;
  opacity: .45;
  transition: opacity .3s ease;
}
/* fine print sharpens when the press-kit button (or the note) is hovered */
.booking-actions:hover + .press-note,
.press-note:hover { opacity: 1; }
.press-note a { color: var(--chrome); border-bottom: 1px solid var(--line); transition: color .2s, border-color .2s; }
.press-note a:hover { color: var(--orange); border-color: var(--orange); }

.booking-alt { margin-top: 26px; color: var(--dim); }
.booking-alt a {
  color: var(--chrome);
  border-bottom: 1px solid var(--line);
  transition: color .2s, border-color .2s;
}
.booking-alt a:hover { color: var(--orange); border-color: var(--orange); }

/* ================= FOOTER ================= */

.footer {
  padding-block: 34px;
  background: rgba(6, 6, 7, .8);
}

/* desktop with a mouse: footer hides below the viewport and slides up
   when the cursor approaches the bottom edge (or a footer link is focused) */
@media (hover: hover) and (pointer: fine) and (min-width: 1024px) {
  .footer {
    position: fixed;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 44;
    transform: translateY(102%);
    transition: transform .5s cubic-bezier(.2, .7, .2, 1);
    background: rgba(6, 6, 7, .9);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
  }
  .footer.visible,
  .footer:focus-within {
    transform: translateY(0);
  }
}
.footer-inner {
  display: flex;
  flex-wrap: wrap;
  gap: 18px;
  align-items: center;
  justify-content: space-between;
}
.footer .mono { color: var(--dim); font-size: 12px; }
.footer-links { display: flex; flex-wrap: wrap; gap: 22px; }
.footer-links a { transition: color .2s; }
.footer-links a:hover { color: var(--orange); }

/* ================= BACK TO TOP ================= */

.to-top {
  position: fixed;
  right: clamp(16px, 2.5vw, 28px);
  bottom: clamp(16px, 3vh, 26px);
  z-index: 46;
  width: 48px;
  height: 48px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 18px;
  color: var(--chrome);
  background: rgba(6, 6, 7, .55);
  border: 1px solid var(--line);
  cursor: pointer;
  opacity: 0;
  pointer-events: none;
  transform: translateY(8px);
  transition: opacity .35s ease, transform .45s cubic-bezier(.2, .7, .2, 1),
              border-color .25s, color .25s, background .25s;
}
.to-top.show {
  opacity: 1;
  pointer-events: auto;
  transform: translateY(0);
}
.to-top:hover {
  border-color: var(--orange);
  color: var(--orange);
  background: rgba(6, 6, 7, .8);
}
/* footer sliding up on booking: step aside instead of being covered */
body.footer-open .to-top.show {
  transform: translateY(calc(-1 * var(--footer-h, 100px)));
}
.to-top[hidden] { display: none; }

/* ================= SECTION DOTS ================= */

/* right-edge snap indicator — shares the to-top button's reveal condition
   and horizontal center (to-top is 48px wide, dots are 10px: offset +19px) */
.dots {
  position: fixed;
  right: calc(clamp(16px, 2.5vw, 28px) + 19px);
  top: 50%;
  z-index: 46;
  display: flex;
  flex-direction: column;
  gap: 14px;
  opacity: 0;
  pointer-events: none;
  transform: translateY(-50%) translateX(10px);
  transition: opacity .35s ease, transform .45s cubic-bezier(.2, .7, .2, 1);
}
.dots.show {
  opacity: 1;
  pointer-events: auto;
  transform: translateY(-50%);
}
.dots a {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  border: 1px solid var(--dim);
  background: transparent;
  transition: background .3s, border-color .3s,
              transform .45s cubic-bezier(.34, 1.56, .64, 1); /* springy pop on section change */
}
.dots a:hover { border-color: var(--orange); transform: scale(1.3); }
.dots a.is-active {
  background: var(--orange);
  border-color: var(--orange);
  transform: scale(1.4);
}
.dots[hidden] { display: none; }
/* dots belong to the snapping world — hide where snap is off */
@media (max-width: 1023px), (max-height: 639px) {
  .dots { display: none; }
}

/* ================= LEGAL PAGES ================= */

/* sub-pages (imprint, privacy, cookies, terms): static layout, same skin */
.legal-body { background: var(--steel-950); }
.legal-body .nav {
  background: rgba(6, 6, 7, .82);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  border-bottom-color: var(--line);
}
.legal-wrap {
  max-width: 760px;
  margin-inline: auto;
  padding: calc(var(--nav-h) + 48px) var(--pad) 72px;
}
.legal-wrap h1 {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: clamp(34px, 5vw, 54px);
  text-transform: uppercase;
  letter-spacing: .02em;
  line-height: 1;
  margin: 10px 0 28px;
}
.legal-wrap h2 {
  font-size: clamp(20px, 2.6vw, 26px);
  margin: 36px 0 12px;
  letter-spacing: .03em;
}
.legal-wrap p, .legal-wrap li { color: var(--dim); font-size: 15.5px; }
.legal-wrap p { margin-bottom: 14px; }
.legal-wrap ul { margin: 0 0 14px 20px; }
.legal-wrap li { margin-bottom: 6px; }
.legal-wrap strong { color: var(--chrome); font-weight: 500; }
.legal-wrap a { color: var(--chrome); border-bottom: 1px solid var(--line); transition: color .2s, border-color .2s; }
.legal-wrap a:hover { color: var(--orange); border-color: var(--orange); }
.legal-wrap address { font-style: normal; color: var(--chrome); line-height: 1.8; margin-bottom: 14px; }
.legal-updated { font-size: 12px !important; margin-top: 40px; }
/* footer behaves statically on sub-pages (no JS there) */
.legal-body .footer { position: static !important; transform: none !important; }
.footer-legal a { color: var(--dim); }

/* ================= MOBILE POLISH ================= */

/* phones: type as big as necessary, as small as possible — and tighter
   vertical rhythm so each section approaches a single screen */
@media (max-width: 640px) {
  body { font-size: 15.5px; line-height: 1.6; }
  .section { padding-block: 44px; }
  .sec-head { margin-bottom: 26px; }
  .eyebrow { margin-bottom: 12px; }

  .about-body { font-size: 15px; }
  .about-body p:first-child { font-size: 16.5px; }
  .facts { margin-top: 16px; gap: 8px; }
  .facts li { padding: 7px 10px; font-size: 10px; }
  /* trim the photo window from the bottom so the whole section fits one screen */
  .about-grid { gap: 18px; }
  .about-photo { aspect-ratio: auto; height: 22svh; }
  .about-photo img { object-position: 50% 16%; }

  /* hero CTAs: equal widths (they share the row evenly); sized against
     the viewport — the hero core shrink-wraps to the logo, which is
     narrower than the buttons need */
  .hero-cta { width: min(88vw, 400px); }
  .hero-cta .btn {
    flex: 1 1 0;
    padding: 13px 14px;
    font-size: 15px;
    text-align: center;
  }

  /* booking owns a full screen; subheading clearly narrower than the heading */
  #booking.section { min-height: 100svh; }
  .booking-line { font-size: 12px; }
  .booking-mail { font-size: clamp(22px, 6.4vw, 32px); }
  .booking-alt { margin-top: 18px; font-size: 11px; }

  .ticker-track span { font-size: 14px; }
  .menu-mail { font-size: 12px; }

  /* equal-width platform links: 2x2 grid (after the base .platforms rule) */
  .platforms {
    margin-top: 12px;
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 8px;
  }
  .platform { padding: 9px 8px; font-size: 11px; text-align: center; }
}

/* touch devices: the flashlight reveal follows the finger — dragging on
   the emblem drives the mask instead of scrolling (page still scrolls
   from anywhere else in the hero) */
@media (pointer: coarse) {
  .logo-stage { touch-action: none; }
}

/* ================= REDUCED MOTION ================= */

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .hero-glow, .scroll-cue span, .chrome-text,
  .ticker-track { animation: none; }
  .hero-video, .flow-video { display: none; }
  .hero { background: url("../assets/hero-poster.jpg") center / cover no-repeat; }
  .btn::after { display: none; }
}