/* ==========================================================================
   Cheeb Music — site styles
   Values are from design-reference/README.md (design tokens are source of truth).
   ========================================================================== */

/* --- Tokens ------------------------------------------------------------- */
:root {
  /* type */
  --dh: 'Bowlby One', Caprasimo, serif;
  --dh-ls: -0.01em;
  --body: 'Space Grotesk', Helvetica, sans-serif;
  --mono: 'IBM Plex Mono', ui-monospace, monospace;

  /* surfaces */
  --bg: #0C0910;
  --bg-deep: #0A0714;
  --bg-panel: #151021;
  --surface-a: #1F1734;
  --surface-b: #161022;
  --surface-alt-a: #1B1428;
  --surface-alt-b: #120E1E;
  --raised-a: #2A2038;
  --raised-b: #1B1428;
  --stripe-a: #1E1630;
  --stripe-b: #141024;
  --border: #2A2038;
  --border-raised: #33264A;
  --border-raised-2: #332752;

  /* Hero backdrop stops. site.js reads these and hands them to the lava shader,
     which paints the same gradient so it can bake in its own screen blend —
     keep them here as the single source of truth. */
  --hero-bg-0: #1A1130;
  --hero-bg-1: #0F0B1A;
  --hero-bg-2: #0A0714;

  /* text */
  --text: #F6F2FB;
  --text-bright: #FBF7FF;
  --text-muted: #CFC5E0;
  --text-dim: #A99CC0;
  --text-faint: #9C8DBA; /* a11y: lightened from #8A7BA8 for contrast on dark wells */
  --text-ghost: #6E6087;
  --wordmark-ghost: #241A38;

  /* accents */
  --pink: #FF3D8F;
  --pink-light: #FF6BA6;
  --pink-hover: #FF7FB6;
  --pink-shadow: #A32259;
  --teal: #2DE1C2;
  --teal-light: #7FF0DE;
  --spotify: #1ED760;
  --spotify-light: #3BE477;
  --teal-shadow: #17897A;

  /* misc */
  --chip-bg: rgba(12, 9, 16, 0.82);
  --sec-pad-block: clamp(88px, 16vw, 180px);
  --sec-pad-inline: clamp(26px, 6.5vw, 72px);

  /* scroll-spy writes --nav-<id>-* here; these are the idle defaults */
  --nav-music-c: var(--text-dim);      --nav-music-bg: transparent;   --nav-music-sh: none;
  --nav-video-c: var(--text-dim);      --nav-video-bg: transparent;   --nav-video-sh: none;
  --nav-gallery-c: var(--text-dim);    --nav-gallery-bg: transparent; --nav-gallery-sh: none;
  --nav-booking-c: var(--text-dim);    --nav-booking-bg: transparent; --nav-booking-sh: none;
}

/* --- Reset -------------------------------------------------------------- */
* { box-sizing: border-box; }

html { scroll-behavior: smooth; }

html, body {
  margin: 0;
  padding: 0;
  background: var(--bg);
}

body {
  color: var(--text);
  font-family: var(--body);
  min-height: 100vh;
  overflow-x: clip;
  -webkit-font-smoothing: antialiased;
}

a { color: var(--pink); text-decoration: none; }
a:hover { color: var(--pink-hover); }

img { max-width: 100%; display: block; }

h1, h2, p, figure { margin: 0; }

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

.visually-hidden {
  position: absolute;
  width: 1px; height: 1px;
  margin: -1px; padding: 0;
  overflow: hidden;
  clip: rect(0 0 0 0);
  clip-path: inset(50%);
  white-space: nowrap;
}

/* Skip link: off-screen until focused, then a normal slab button. */
.skip-link {
  position: fixed;
  top: 12px; left: 12px;
  z-index: 100;
  transform: translateY(-160%);
  transition: transform 0.15s ease;
}
.skip-link:focus { transform: translateY(0); }

/* The fixed header would otherwise cover the top of a section we jump to. */
:target,
#top, #music, #video, #gallery, #booking {
  scroll-margin-top: clamp(84px, 15vw, 100px);
}
main:focus { outline: none; }

/* --- Shared primitives -------------------------------------------------- */

/* Pressable slab buttons */
.btn {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  border: 0;
  cursor: pointer;
  font-family: inherit;
  font-size: 15px;
  border-radius: 12px;
  padding: 17px 26px;
  transition: transform 0.1s ease, box-shadow 0.1s ease;
}
.btn--icon { padding: 17px 28px; }

.btn--pink {
  background: linear-gradient(var(--pink-light), var(--pink));
  color: var(--bg);
  font-weight: 700;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.5), 0 4px 0 var(--pink-shadow);
}
.btn--pink:hover { color: var(--bg); }
.btn--pink:active {
  transform: translateY(4px);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.4), 0 0 0 var(--pink-shadow);
}

.btn--dark {
  background: linear-gradient(var(--raised-a), var(--raised-b));
  color: var(--text);
  font-weight: 600;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.14), 0 4px 0 var(--bg);
}
.btn--dark:hover { color: var(--text); }
.btn--dark:active {
  transform: translateY(4px);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.12), 0 0 0 var(--bg);
}

/* Pure-CSS play triangle */
.play-tri {
  width: 0; height: 0;
  border-left: 9px solid var(--bg);
  border-top: 6px solid transparent;
  border-bottom: 6px solid transparent;
  flex: none;
}
.play-tri--sm { border-left-width: 8px; border-top-width: 5px; border-bottom-width: 5px; }

/* Striped image placeholder well */
.slot {
  position: relative;
  background: repeating-linear-gradient(135deg, var(--stripe-a) 0 11px, var(--stripe-b) 11px 22px);
  box-shadow: inset 0 2px 7px rgba(0, 0, 0, 0.62), inset 0 -1px 0 rgba(255, 255, 255, 0.05);
  overflow: hidden;
}
/* Real image, dropped into any .slot. The slot already owns the aspect ratio
   (1/1 releases, 16/9 video, 4/5 featured photo), so the img just fills it.
   The striped placeholder and its label stay behind/hidden until one lands. */
.slot__img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
.slot:has(.slot__img) .slot__label,
.slot:has(.slot__img) .slot__index { display: none; }
.slot:has(.slot__img) .slot__chip { z-index: 1; }

.slot__label {
  position: absolute;
  left: 12px; bottom: 12px;
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--text-faint);
}
.slot__chip {
  position: absolute;
  right: 12px; bottom: 12px;
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: 0.08em;
  color: var(--text-muted);
  background: var(--chip-bg);
  padding: 4px 8px;
  border-radius: 5px;
}
.slot__index {
  position: absolute;
  left: 12px; top: 12px;
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: 0.12em;
  color: var(--text-muted);
  background: var(--chip-bg);
  padding: 4px 8px;
  border-radius: 5px;
}

/* Slab card shell — releases, videos, gallery figures */
.card {
  display: flex;
  flex-direction: column;
  gap: 18px;
  background: linear-gradient(var(--surface-a), var(--surface-b));
  padding: 14px 14px 20px;
  border-radius: 18px;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.12), 0 6px 0 var(--bg), 0 6px 0 1px var(--border);
  color: var(--text);
  transition: transform 0.14s ease, box-shadow 0.14s ease;
}
.card:hover { color: var(--text); transform: translateY(-3px); }
.card:active { transform: translateY(6px); }

.card--pink:hover { box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.12), 0 9px 0 var(--pink-shadow), 0 9px 0 1px var(--pink); }
.card--teal:hover { box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.12), 0 9px 0 var(--teal-shadow), 0 9px 0 1px var(--teal); }
.card--pink:active,
.card--teal:active { box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.12), 0 0 0 var(--bg), 0 0 0 1px var(--border); }

/* Play square inside card meta rows */
.play-sq {
  width: 30px; height: 30px;
  flex: none;
  display: grid;
  place-items: center;
  border-radius: 8px;
  background: linear-gradient(var(--pink-light), var(--pink));
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.5), 0 2px 0 var(--pink-shadow);
}
.play-sq--teal {
  background: linear-gradient(var(--teal-light), var(--teal));
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.5), 0 2px 0 var(--teal-shadow);
}

/* Spotify mark on the release cards. Sized to sit on the same baseline as the
   .play-sq chip it replaced, but with no chip behind it — the logo is the shape,
   and Spotify's guidelines do not allow it to be boxed or recoloured. */
.icon-spotify {
  width: 30px; height: 30px;
  flex: none;
  display: grid;
  place-items: center;
}
.icon-spotify svg {
  width: 26px; height: 26px;
  display: block;
  fill: var(--spotify);
}
.card:hover .icon-spotify svg { fill: var(--spotify-light); }

.mono-label {
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--text-faint);
}

/* --- Header ------------------------------------------------------------- */
.site-header {
  position: fixed;
  top: clamp(10px, 2.5vw, 18px);
  left: 0; right: 0;
  z-index: 50;
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 10px;
  padding: 0 clamp(12px, 4vw, 26px);
}

.wordmark {
  display: inline-flex;
  align-items: center;
  padding: clamp(10px, 2.6vw, 12px) clamp(15px, 4.5vw, 24px);
  border-radius: 14px;
  background: linear-gradient(#FFFFFF, #E4DDEE);
  color: var(--bg);
  font-family: var(--dh);
  font-size: clamp(15px, 4vw, 18px);
  letter-spacing: 0.12em;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.9), 0 5px 0 var(--text-ghost), 0 12px 22px rgba(6, 3, 12, 0.45);
  transition: transform 0.1s ease, box-shadow 0.1s ease;
}
.wordmark:hover { color: var(--bg); }
.wordmark:active {
  transform: translateY(5px);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.7), 0 0 0 var(--text-ghost), 0 4px 10px rgba(6, 3, 12, 0.4);
}

.nav-panel {
  background: linear-gradient(rgba(37, 28, 56, 0.92), rgba(18, 14, 30, 0.92));
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  border-radius: 18px;
  padding: 7px;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.12), 0 5px 0 var(--bg),
              0 5px 0 1px var(--border-raised), 0 14px 24px rgba(6, 3, 12, 0.5);
}

.nav-desktop {
  display: flex;
  align-items: center;
  gap: 4px;
}

.nav-link {
  font-family: var(--mono);
  font-size: clamp(10px, 2.6vw, 12px);
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--text-dim);
  padding: 10px clamp(9px, 2.6vw, 16px);
  border-radius: 9px;
  transition: color 0.3s ease, background 0.3s ease, box-shadow 0.3s ease;
}
.nav-link:hover {
  background: #251C38;
  color: var(--text);
  box-shadow: inset 0 2px 5px rgba(0, 0, 0, 0.55);
}
/* Scroll-spy: the JS sets these custom properties on :root */
.nav-link[data-spy="music"]   { color: var(--nav-music-c);   background: var(--nav-music-bg);   box-shadow: var(--nav-music-sh); }
.nav-link[data-spy="video"]   { color: var(--nav-video-c);   background: var(--nav-video-bg);   box-shadow: var(--nav-video-sh); }
.nav-link[data-spy="gallery"] { color: var(--nav-gallery-c); background: var(--nav-gallery-bg); box-shadow: var(--nav-gallery-sh); }

.nav-cta { padding: 11px 18px; font-size: 13px; border-radius: 9px; }

/* Mobile controls */
.nav-mobile { display: none; align-items: center; gap: 10px; position: relative; }

.hamburger {
  width: 48px; height: 46px;
  display: grid;
  place-content: center;
  gap: 5px;
  border-radius: 14px;
  border: 0;
  cursor: pointer;
  background: linear-gradient(var(--raised-a), var(--raised-b));
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.14), 0 5px 0 var(--bg), 0 5px 0 1px var(--border-raised);
  transition: transform 0.1s ease, box-shadow 0.1s ease;
}
.hamburger:active {
  transform: translateY(5px);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.12), 0 0 0 var(--bg);
}
.hamburger span {
  display: block;
  width: 20px; height: 2px;
  border-radius: 2px;
  background: var(--text-muted);
  transition: transform 0.16s ease, opacity 0.16s ease, background 0.16s ease;
}
.hamburger[aria-expanded="true"] span:nth-child(1) { transform: translateY(7px) rotate(45deg); background: var(--teal); }
.hamburger[aria-expanded="true"] span:nth-child(2) { opacity: 0; }
.hamburger[aria-expanded="true"] span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); background: var(--teal); }

.nav-dropdown {
  position: absolute;
  top: calc(100% + 12px);
  right: 0;
  min-width: 190px;
  padding: 9px;
  border-radius: 18px;
  background: linear-gradient(rgba(37, 28, 56, 0.97), rgba(18, 14, 30, 0.97));
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.12), 0 14px 24px rgba(6, 3, 12, 0.5);
  animation: cheebpop 0.16s ease-out;
  display: flex;
  flex-direction: column;
}
.nav-dropdown[hidden] { display: none; }
.nav-dropdown::before {
  content: "";
  position: absolute;
  top: -7px; right: 19px;
  width: 14px; height: 14px;
  background: rgba(37, 28, 56, 0.97);
  transform: rotate(45deg);
  border-radius: 3px;
}
.nav-dropdown a {
  position: relative;
  padding: 14px;
  border-radius: 11px;
  color: var(--text-muted);
  font-family: var(--mono);
  font-size: 12px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
}
.nav-dropdown a:hover { background: #251C38; color: var(--text); }
.nav-dropdown a.is-yt { color: var(--teal); }

@media (max-width: 759px) {
  .nav-panel { display: none; }
  .nav-mobile { display: flex; }
}

/* --- Hero --------------------------------------------------------------- */
.hero {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  gap: clamp(26px, 4vw, 40px);
  min-height: 100svh;
  padding: clamp(132px, 22vw, 180px) clamp(24px, 6vw, 72px) clamp(56px, 9vw, 88px);
  /* Geometry duplicated in the shader's heroBg() — change both together. */
  background: radial-gradient(120% 90% at 50% 0%, var(--hero-bg-0) 0%, var(--hero-bg-1) 62%, var(--hero-bg-2) 100%);
  overflow: hidden;
  isolation: isolate;
  border-bottom: 1px solid var(--border);
}

.hero__fallback {
  position: absolute;
  inset: -12% -8%;
  pointer-events: none;
  filter: blur(58px) saturate(1.3);
  opacity: 0.85;
}
.hero__fallback span {
  position: absolute;
  border-radius: 50%;
  display: block;
}
.hero__fallback span:nth-child(1) {
  left: 4%; bottom: -14%;
  width: 44vw; height: 44vw; max-width: 520px; max-height: 520px;
  background: radial-gradient(circle at 38% 34%, #FF7FB6, #FF3D8F 42%, rgba(255, 61, 143, 0) 72%);
  animation: cheebfloat 26s ease-in-out infinite;
}
.hero__fallback span:nth-child(2) {
  left: 34%; bottom: -26%;
  width: 52vw; height: 52vw; max-width: 600px; max-height: 600px;
  background: radial-gradient(circle at 50% 44%, #9B57FF, #7A2BE0 44%, rgba(122, 43, 224, 0) 74%);
  animation: cheebfloatb 34s ease-in-out infinite;
}
.hero__fallback span:nth-child(3) {
  right: 2%; bottom: -18%;
  width: 40vw; height: 40vw; max-width: 470px; max-height: 470px;
  background: radial-gradient(circle at 44% 40%, #6BFFE4, #2DE1C2 40%, rgba(45, 225, 194, 0) 72%);
  animation: cheebfloat 30s ease-in-out infinite reverse;
}
.hero__fallback span:nth-child(4) {
  left: 18%; top: -22%;
  width: 34vw; height: 34vw; max-width: 400px; max-height: 400px;
  background: radial-gradient(circle at 50% 50%, #FFB25C, rgba(255, 178, 92, 0) 68%);
  opacity: 0.75;
  animation: cheebfloatb 22s ease-in-out infinite reverse;
}
.hero__fallback span:nth-child(5) {
  right: 12%; top: -10%;
  width: 22vw; height: 22vw; max-width: 260px; max-height: 260px;
  background: radial-gradient(circle at 50% 46%, #FF7FB6, rgba(255, 61, 143, 0) 68%);
  opacity: 0.7;
  animation: cheebfloatb 27s ease-in-out infinite;
}

#cheeb-lava {
  position: absolute;
  inset: 0;
  width: 100%; height: 100%;
  display: block;
  pointer-events: none;
  /* No mix-blend-mode: the shader paints the hero gradient and does the screen
     blend itself, so this composites as one opaque layer. */
}

.hero__scrim {
  position: absolute;
  inset: 0;
  pointer-events: none;
  mix-blend-mode: multiply;
  background:
    linear-gradient(180deg, rgba(10, 7, 20, 0) 62%, rgba(10, 7, 20, 0.82) 88%, rgba(10, 7, 20, 0.94) 100%),
    radial-gradient(80% 60% at 50% 105%, rgba(10, 7, 20, 0) 0%, rgba(10, 7, 20, 0.72) 70%),
    repeating-linear-gradient(0deg, rgba(0, 0, 0, 0.16) 0 1px, rgba(0, 0, 0, 0) 1px 3px);
}

/* WebGL live: the shader bakes the two smooth darkening layers into its own output,
   so the scrim is reduced to its scanlines. They are pure black, and at pure black
   'multiply' and 'normal' composite to the identical result (0.84 x backdrop), so
   the blend mode goes away with them and the hero has no blended layers left.
   Scanlines stay in CSS rather than the shader: at 1px on / 2px off they would
   alias badly resampled through the canvas's reduced-DPR buffer. */
.hero--gl .hero__scrim {
  mix-blend-mode: normal;
  background: repeating-linear-gradient(0deg, rgba(0, 0, 0, 0.16) 0 1px, rgba(0, 0, 0, 0) 1px 3px);
}

.hero > *:not(.hero__fallback):not(#cheeb-lava):not(.hero__scrim) { position: relative; z-index: 1; }

.hero__title {
  font-family: var(--dh);
  font-size: clamp(84px, 22vw, 340px);
  line-height: 0.74;
  letter-spacing: -0.055em;
  text-transform: uppercase;
  font-weight: 400;
  color: var(--text-bright);
  text-shadow: 0 0 54px rgba(255, 61, 143, 0.5), 0 0 120px rgba(122, 43, 224, 0.45);
  animation: cheebwarp 12s ease-in-out infinite;
  user-select: none;
}

.hero__lead {
  max-width: 52ch;
  font-size: clamp(16px, 4vw, 19px);
  line-height: 1.55;
  color: var(--text-muted);
  text-wrap: pretty;
}

.btn-row {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 14px;
}
.btn-row--start { justify-content: flex-start; }

/* --- Waveform divider --------------------------------------------------- */
.waveform {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: clamp(1px, 0.28vw, 3px);
  height: clamp(54px, 9vw, 74px);
  background: var(--bg-panel);
  overflow: hidden;
  border-bottom: 1px solid var(--border);
  content-visibility: auto;
  contain-intrinsic-size: auto 74px;
}
.waveform b {
  flex: 1;
  min-width: 1px;
  max-width: 5px;
  border-radius: 3px;
  animation-name: cheebpulse;
  animation-timing-function: ease-in-out;
  animation-iteration-count: infinite;
}

/* --- Section shell ------------------------------------------------------ */
.section {
  padding: var(--sec-pad-block) var(--sec-pad-inline);
  border-bottom: 1px solid var(--border);
}

.h2 .line { display: block; }

.h2 {
  font-family: var(--dh);
  font-weight: 400;
  line-height: 1;
  letter-spacing: -0.02em;
  text-transform: uppercase;
  text-wrap: balance;
}

/* --- Music -------------------------------------------------------------- */
.music__head {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 320px), 1fr));
  align-items: end;
  gap: clamp(24px, 4.4vw, 48px);
  margin-bottom: clamp(42px, 7vw, 76px);
}
.music__head .h2 { font-size: clamp(34px, 4.4vw, 72px); }
.music__head p {
  max-width: 34ch;
  font-size: 16px;
  line-height: 1.6;
  color: var(--text-dim);
  text-wrap: pretty;
}
/* Underlined, not colour alone: this is the one body-copy link on the page. */
.music__head p a {
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 3px;
}

.release-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 250px), 1fr));
  gap: clamp(22px, 3.4vw, 34px);
}

.release__art { aspect-ratio: 1 / 1; border-radius: 11px; }

.release__meta {
  display: flex;
  align-items: center;
  gap: 12px;
}
/* Release cards only: the Spotify mark tops out with the title rather than
   floating at the centre of a title + note block whose height varies with how
   the title wraps. The video cards share .release__meta but their play chip
   sits beside a single-line title, so they keep the centred default. */
.release-grid .release__meta { align-items: flex-start; }
.release__title {
  display: block;
  font-family: var(--dh);
  font-weight: 400;
  font-size: 17px;
  text-transform: uppercase;
  text-wrap: balance;
  letter-spacing: var(--dh-ls);
}
.release__note {
  display: block;
  font-family: var(--mono);
  font-size: 11px;
  text-transform: uppercase;
  color: var(--text-faint);
  margin-top: 3px;
}

/* --- Video -------------------------------------------------------------- */
.video {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 440px), 1fr));
  gap: 0;
  border-bottom: 1px solid var(--border);
}
.video__intro {
  container-type: inline-size;
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 32px;
  padding: var(--sec-pad-block) var(--sec-pad-inline);
}
.video__intro .h2 {
  font-size: clamp(32px, 9cqw, 60px);
  line-height: 0.94;
}
.video__intro p {
  max-width: 42ch;
  font-size: 17px;
  line-height: 1.6;
  color: var(--text-muted);
  text-wrap: pretty;
}
.video__intro .btn { align-self: flex-start; }

.video__grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 190px), 1fr));
  gap: clamp(20px, 3.2vw, 30px);
  align-content: center;
  padding: clamp(0px, 4vw, 64px) var(--sec-pad-inline) clamp(60px, 10vw, 76px);
}

.video__thumb { aspect-ratio: 16 / 9; border-radius: 11px; }
.video__title { font-size: 14px; font-weight: 600; text-wrap: balance; }

/* Shown in place of the cards when the feed is unreachable. Spans the grid so
   one line of text does not stretch into a card-shaped column. */
.video__fallback {
  grid-column: 1 / -1;
  max-width: 42ch;
  font-size: 17px;
  line-height: 1.6;
  color: var(--text-muted);
  text-wrap: pretty;
}

/* --- Gallery ------------------------------------------------------------ */
.gallery__head {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  justify-content: space-between;
  gap: 20px;
  margin-bottom: clamp(38px, 5vw, 58px);
}
.gallery__head .h2 {
  font-size: clamp(28px, 3vw, 44px);
  letter-spacing: -0.01em;
}

.gallery__layout {
  display: grid;
  /* Five 4:5 portraits in one even run. auto-fit steps 5 -> 4 -> 3 -> 2 -> 1 as the
     viewport narrows; every cell stays the same shape at every step, which is the
     whole point of committing to one aspect ratio. */
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 210px), 1fr));
  gap: clamp(14px, 2vw, 22px);
  align-items: start;
}

.figure { padding: 12px 12px 14px; border-radius: 16px; gap: 12px; }

/* One ratio for every photo. The masters are cut to 4:5 too, so object-fit: cover
   has nothing left to trim and each frame is shown exactly as it was composed. */
.figure__slot { border-radius: 11px; aspect-ratio: 4 / 5; }

.figure figcaption {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  font-size: 13px;
  font-weight: 600;
  color: var(--text);
}

/* --- Booking ------------------------------------------------------------ */
.booking {
  position: relative;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 420px), 1fr));
  background: var(--bg-panel);
  overflow: hidden;
  border-bottom: 1px solid var(--border);
}
.booking__mesh {
  position: absolute;
  inset: -18%;
  pointer-events: none;
  filter: blur(52px) saturate(1.12);
  background-color: var(--bg-panel);
  background-image:
    radial-gradient(36% 44% at 50% 50%, #2DE1C2 0%, rgba(45, 225, 194, 0) 66%),
    radial-gradient(40% 46% at 50% 50%, #FF3D8F 0%, rgba(255, 61, 143, 0) 68%),
    radial-gradient(44% 50% at 50% 50%, #7A2BE0 0%, rgba(122, 43, 224, 0) 70%),
    radial-gradient(46% 52% at 50% 50%, #3A1B6B 0%, rgba(58, 27, 107, 0) 72%),
    radial-gradient(30% 36% at 50% 50%, #2DE1C2 0%, rgba(45, 225, 194, 0) 64%);
  background-repeat: no-repeat;
  background-size: 130% 130%, 120% 120%, 140% 140%, 150% 150%, 100% 100%;
  background-position: 0% 100%, 100% 0%, 80% 100%, 40% 30%, 10% 10%;
  opacity: 0.5;
  animation: cheebmesh 30s ease-in-out infinite;
}
.booking__veil {
  position: absolute;
  inset: 0;
  pointer-events: none;
  background: linear-gradient(180deg, rgba(21, 16, 33, 0.55), rgba(21, 16, 33, 0.72));
}
.booking > .booking__pane { position: relative; z-index: 1; }

.booking__pane {
  padding: var(--sec-pad-block) var(--sec-pad-inline);
  display: flex;
  flex-direction: column;
  justify-content: center;
}
.booking__intro {
  container-type: inline-size;
  gap: 28px;
}
.booking__intro .h2 {
  font-size: clamp(32px, 9cqw, 58px);
  line-height: 0.94;
}
.booking__intro p {
  max-width: 40ch;
  font-size: 17px;
  line-height: 1.6;
  color: var(--text-muted);
  text-wrap: pretty;
}
.booking__contact {
  font-family: var(--mono);
  font-size: 13px;
  letter-spacing: 0.06em;
  color: var(--text-dim);
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.booking__aside { gap: 20px; }

.channel-card {
  display: flex;
  flex-direction: column;
  gap: 28px;
  background: linear-gradient(var(--surface-alt-a), var(--surface-alt-b));
  border-radius: 26px;
  padding: clamp(28px, 5.4vw, 46px) clamp(26px, 5.4vw, 46px) clamp(28px, 5.4vw, 42px);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.14), 0 10px 0 var(--bg), 0 10px 0 1px var(--border-raised-2);
}
.channel-card__mark {
  font-family: var(--dh);
  font-weight: 400;
  font-size: clamp(26px, 2.8vw, 40px);
  text-transform: uppercase;
  letter-spacing: var(--dh-ls);
}
.channel-card__tags {
  display: flex;
  flex-wrap: wrap;
  gap: 26px;
  font-family: var(--mono);
  font-size: 12px;
  text-transform: uppercase;
  color: var(--text-dim);
  list-style: none;
  margin: 0; padding: 0;
}
.booking__fineprint {
  font-family: var(--mono);
  font-size: 12px;
  line-height: 1.7;
  text-transform: uppercase;
  color: var(--text-faint); /* a11y: --text-ghost was 2.89:1 over the mesh panel */
  max-width: 38ch;
}

/* --- Footer ------------------------------------------------------------- */
.site-footer {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: clamp(24px, 4vw, 34px);
  padding: clamp(56px, 9vw, 88px) clamp(24px, 6vw, 72px) clamp(40px, 6vw, 56px);
  background: var(--bg-deep);
  border-top: 1px solid var(--border);
}
.footer__ghost {
  font-family: var(--dh);
  font-size: clamp(38px, 9vw, 96px);
  line-height: 0.8;
  letter-spacing: -0.045em;
  text-transform: uppercase;
  color: var(--wordmark-ghost);
  user-select: none;
}
.footer__credit {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 10px;
  border-radius: 999px;
  background: rgba(10, 7, 20, 0.62);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  padding: 11px 20px;
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--text-muted);
}
.footer__credit i { font-style: normal; opacity: 0.5; }

/* --- Keyframes ---------------------------------------------------------- */
@keyframes cheebpulse {
  0%, 100% { transform: scaleY(0.35); }
  50% { transform: scaleY(1); }
}
@keyframes cheebwarp {
  0%, 100% { transform: rotate(-2.2deg) skewX(-3deg); }
  50% { transform: rotate(1.8deg) skewX(3deg); }
}
@keyframes cheebfloat {
  0%, 100% { transform: translateY(0) rotate(0deg); }
  50% { transform: translateY(-22px) rotate(4deg); }
}
@keyframes cheebfloatb {
  0%, 100% { transform: translateY(0) rotate(0deg); }
  50% { transform: translateY(18px) rotate(-5deg); }
}
@keyframes cheebmesh {
  0%, 100% { background-position: 0% 100%, 100% 0%, 80% 100%, 40% 30%, 10% 10%; }
  50% { background-position: 12% 88%, 86% 12%, 32% 88%, 74% 66%, 44% 56%; }
}
@keyframes cheebpop {
  from { opacity: 0; transform: translateY(-6px) scale(0.94); }
  to { opacity: 1; transform: translateY(0) scale(1); }
}

/* --- Reduced motion ----------------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
  .waveform b { transform: scaleY(0.7); }
}