/* Hallmark · macrostructure: Marquee Hero · genre: atmospheric · tone: austere · anchor hue: signal-red #fb3a5d + shutter-violet #a06bff (on black/chrome) */
/* Hallmark · pre-emit critique: P5 H4 E4 S5 R5 V4 */
/* =============================================================
   MONEY BACK RECORDS
   Pretoria, South Africa
   Design system — black / chrome / silver, quiet label layout
   ============================================================= */

/* ---------- Tokens ---------- */
:root {
  --black:     #000000;
  --bg:        #060606;
  --bg-2:      #0b0b0b;
  --surface:   #101010;
  --surface-2: #171717;
  --ink:       #f4f4f4;
  --ink-soft:  #b9b9b9;
  --muted:     #7e7e7e;
  --faint:     #565656;
  --line:      rgba(255, 255, 255, 0.10);
  --line-2:    rgba(255, 255, 255, 0.22);

  /* metallic gradient lifted from the logo wordmark.
     NB: the public site's .chrome class renders solid white (see .chrome below);
     these gradients back the admin UI (admin.css) and the small .footer__admin dot. */
  --chrome: linear-gradient(178deg,
              #ffffff 0%, #f2f3f5 18%, #b6b9be 42%,
              #75797f 52%, #d3d6da 68%, #ffffff 88%, #9ea2a8 100%);
  --chrome-soft: linear-gradient(180deg, #ffffff 0%, #c8cbd0 55%, #8d9197 100%);

  /* accent — the label's signal colours: signal-red-pink + shutter violet.
     Used by the hero plus-pattern and the shutter
     heading effect. The *-rgb channel tokens back the rgba() washes.
     The plus-pattern data-URI (.hero::before) bakes the red into the SVG
     fill — keep it in sync with --accent by hand. (The footer once carried
     the same pattern; it now sits on the skyline photo instead, and
     .footer::before is the footer's fade divider.) */
  --accent:       #fb3a5d;
  --accent-rgb:   251, 58, 93;
  --accent-hi:    #ff6f8a;
  --accent-deep:  #c31d3c;
  --accent-soft:  #ff8098;
  --accent-2:     #a06bff;
  --accent-2-rgb: 160, 107, 255;

  --font-display: "Anton", "Oswald", "Arial Narrow", Impact, sans-serif;
  --font-ui: "Inter", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;

  --s--2: clamp(0.62rem, 0.6rem + 0.1vw, 0.7rem);
  --s--1: clamp(0.74rem, 0.71rem + 0.14vw, 0.82rem);
  --s-0:  clamp(0.93rem, 0.89rem + 0.2vw, 1.02rem);
  --s-1:  clamp(1.08rem, 1rem + 0.4vw, 1.3rem);
  --s-2:  clamp(1.45rem, 1.25rem + 0.9vw, 2rem);
  --s-3:  clamp(2rem, 1.55rem + 2.1vw, 3.4rem);
  --s-4:  clamp(2.7rem, 1.9rem + 4vw, 5.4rem);
  --s-5:  clamp(3.4rem, 1.9rem + 7.4vw, 9rem);

  --wrap: 1320px;
  --gutter: clamp(1.1rem, 3.5vw, 3.25rem);
  --nav-h: 72px;

  --ease: cubic-bezier(0.16, 1, 0.3, 1);
  --t: 0.55s var(--ease);
}

/* ---------- Reset ---------- */
*, *::before, *::after { box-sizing: border-box; }
* { margin: 0; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; overflow-x: hidden; max-width: 100%; width: 100%; }
/* <picture> exists only to let the browser pick WebP over the original file;
   it should never become a box of its own. `display: contents` removes it from
   layout, so every rule written against the <img> (`.collage__item img`,
   `.hero-logo`, `.signup__mark`…) keeps resolving against the real parent. */
picture { display: contents; }
@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;
  }
}

body {
  background: var(--bg);
  color: var(--ink);
  font-family: var(--font-ui);
  font-size: var(--s-0);
  line-height: 1.65;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  overflow-x: hidden;
  max-width: 100%;
  width: 100%;
}
body.menu-open { overflow: hidden; }

img, svg, video { display: block; max-width: 100%; }
a { color: inherit; text-decoration: none; }
button, input, textarea, select { font: inherit; color: inherit; }
button { cursor: pointer; background: none; border: none; }
ul { list-style: none; padding: 0; }
:focus-visible { outline: 2px solid #fff; outline-offset: 3px; }
::selection { background: #fff; color: #000; }

/* film grain, keeps flat black from banding */
body::after {
  content: ""; position: fixed; inset: 0; pointer-events: none; z-index: 9998;
  opacity: 0.035; mix-blend-mode: overlay;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='3'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}

/* ---------- Layout ---------- */
.wrap { width: min(100% - calc(var(--gutter) * 2), var(--wrap)); margin-inline: auto; max-width: 100%; box-sizing: border-box; }
.wrap--full { width: min(100% - calc(var(--gutter) * 2), 1680px); margin-inline: auto; max-width: 100%; box-sizing: border-box; }
.band { padding-block: clamp(3.5rem, 7vw, 7rem); position: relative; }
.band--tight { padding-block: clamp(2.4rem, 4.5vw, 4rem); }
.band--flush-top { padding-top: 0; }
.rule { height: 1px; background: var(--line); border: 0; }
.center { text-align: center; }
.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0; }

/* Skip link — the first tab stop on every page. Hidden until focused, so
   keyboard and screen-reader users can jump the nav straight to the content. */
.skip-link {
  position: fixed; top: 0; left: 50%; translate: -50% -110%;
  z-index: 999; background: #fff; color: #000;
  font-size: var(--s--1); font-weight: 700; letter-spacing: 0.12em; text-transform: uppercase;
  padding: 0.85rem 1.5rem; border-radius: 0 0 3px 3px;
  transition: translate 0.2s var(--ease);
}
.skip-link:focus-visible { translate: -50% 0; outline-offset: -4px; }
/* The skip link's target. tabindex="-1" makes <main> programmatically
   focusable so the jump actually moves the caret; it never enters the tab
   order itself, so it needs no focus ring of its own. */
main[tabindex="-1"]:focus { outline: none; }
.mt-1 { margin-top: 0.75rem; } .mt-2 { margin-top: 1.5rem; } .mt-3 { margin-top: 2.5rem; }
.mb-1 { margin-bottom: 0.75rem; } .mb-2 { margin-bottom: 1.5rem; } .mb-3 { margin-bottom: 2.5rem; }

/* ---------- Type ---------- */
.display, h1, h2, h3 {
  font-family: var(--font-display);
  font-weight: 400;
  line-height: 0.92;
  letter-spacing: 0.005em;
  text-transform: uppercase;
}
.t-hero { font-size: var(--s-5); line-height: 0.86; }
.t-xl   { font-size: var(--s-4); line-height: 0.9; }
.t-lg   { font-size: var(--s-3); }
.t-md   { font-size: var(--s-2); }

/* pure white title fill — despite the name, this does NOT use the --chrome
   gradient; the wordmark reads cleaner as solid white on pure black. */
.chrome {
  background: none;
  color: #fff; -webkit-text-fill-color: #fff;
  filter: drop-shadow(0 2px 12px rgba(255,255,255,0.14));
}

.kicker {
  display: inline-flex; align-items: center; gap: 0.65rem;
  font-family: var(--font-ui); font-size: var(--s--2); font-weight: 600;
  letter-spacing: 0.34em; text-transform: uppercase; color: var(--muted);
}
.kicker::before { content: ""; width: 22px; height: 1px; background: var(--line-2); }
.kicker--bare::before { display: none; }

.lede { font-size: var(--s-1); color: var(--ink-soft); line-height: 1.55; max-width: 62ch; }
.body-text { color: var(--ink-soft); max-width: 66ch; }
.muted { color: var(--muted); }
.prose p + p { margin-top: 1.05rem; }

/* section header, OVO-style: label left, link right, hairline under */
.sec {
  display: flex; align-items: flex-end; justify-content: space-between;
  gap: 1.5rem; flex-wrap: wrap;
  padding-bottom: 1.1rem; margin-bottom: clamp(1.6rem, 3vw, 2.6rem);
  border-bottom: 1px solid var(--line);
}
.sec__title { font-size: var(--s-3); }
.sec__aside { color: var(--muted); font-size: var(--s--1); max-width: 42ch; }

/* ---------- Buttons ---------- */
.btn {
  --py: 0.95em; --px: 1.9em;
  display: inline-flex; align-items: center; justify-content: center; gap: 0.6em;
  padding: var(--py) var(--px);
  font-family: var(--font-ui); font-size: var(--s--1); font-weight: 600;
  letter-spacing: 0.18em; text-transform: uppercase;
  border: 1px solid transparent; border-radius: 2px;
  transition: background var(--t), color var(--t), border-color var(--t), transform 0.3s var(--ease);
}
.btn:hover { transform: translateY(-2px); }
.btn:active { transform: translateY(0); }
.btn--solid { background: #fff; color: #000; }
.btn--solid:hover { background: #d6d9dd; }
.btn--line { border-color: var(--line-2); color: var(--ink); }
.btn--line:hover { border-color: #fff; background: #fff; color: #000; }
.btn--sm { --py: 0.7em; --px: 1.25em; letter-spacing: 0.14em; }
.btn--wide { width: 100%; }

.arrow-link {
  display: inline-flex; align-items: center; gap: 0.55rem;
  font-size: var(--s--1); font-weight: 600; letter-spacing: 0.2em; text-transform: uppercase;
  color: var(--ink); transition: gap 0.35s var(--ease), color 0.3s;
}
.arrow-link svg { width: 16px; height: 16px; }
.arrow-link:hover { gap: 1rem; color: #fff; }

.icon-btn {
  display: grid; place-items: center; width: 38px; height: 38px;
  border: 1px solid var(--line-2); border-radius: 50%; color: var(--ink);
  transition: background 0.3s, color 0.3s, border-color 0.3s, transform 0.3s var(--ease);
}
.icon-btn svg { width: 16px; height: 16px; }
.icon-btn:hover { background: #fff; color: #000; border-color: #fff; transform: translateY(-2px); }

/* ---------- Nav ---------- */
.nav {
  position: sticky; top: 0; z-index: 500;
  background: rgba(6, 6, 6, 0.72);
  backdrop-filter: blur(16px); -webkit-backdrop-filter: blur(16px);
  border-bottom: 1px solid transparent;
  transition: border-color 0.4s, background 0.4s;
}
.nav.is-scrolled { border-bottom-color: var(--line); background: rgba(6, 6, 6, 0.92); }
.nav.is-open { background: var(--black); border-bottom-color: var(--line); }
.nav__inner {
  height: var(--nav-h);
  display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: 1rem;
}

.brand { display: inline-flex; align-items: center; gap: 0.7rem; justify-self: start; }
.brand__mark { width: 30px; height: auto; }
.brand__type { display: flex; flex-direction: column; line-height: 1; }
.brand__type b {
  font-family: var(--font-display); font-weight: 400; font-size: 1.02rem;
  letter-spacing: 0.03em; text-transform: uppercase;
}
.brand__type span {
  font-size: 0.53rem; letter-spacing: 0.44em; text-transform: uppercase;
  color: var(--muted); margin-top: 3px;
}

.nav__links { display: flex; gap: clamp(1.2rem, 2.4vw, 2.4rem); justify-self: center; }
.nav__link {
  position: relative; font-size: var(--s--2); font-weight: 600;
  letter-spacing: 0.28em; text-transform: uppercase; color: var(--ink-soft);
  padding-block: 0.5rem; transition: color 0.3s;
}
.nav__link::after {
  content: ""; position: absolute; left: 0; right: 0; bottom: 0;
  height: 1px; background: #fff; transform: scaleX(0); transform-origin: left;
  transition: transform 0.45s var(--ease);
}
.nav__link:hover { color: #fff; }
.nav__link:hover::after, .nav__link[aria-current="page"]::after { transform: scaleX(1); }
.nav__link[aria-current="page"] { color: #fff; }

.nav__right { display: flex; align-items: center; gap: 0.75rem; justify-self: end; }
.nav__toggle { display: none; width: 40px; height: 40px; padding: 10px 8px; }
.nav__toggle span { display: block; height: 1.5px; background: var(--ink); transition: transform 0.4s var(--ease), opacity 0.25s; }
.nav__toggle span + span { margin-top: 5px; }
.nav.is-open .nav__toggle span:nth-child(1) { transform: translateY(6.5px) rotate(45deg); }
.nav.is-open .nav__toggle span:nth-child(2) { opacity: 0; }
.nav.is-open .nav__toggle span:nth-child(3) { transform: translateY(-6.5px) rotate(-45deg); }

/* ---------- Mobile drawer — full-screen menu ---------- */
.drawer {
  position: fixed; inset: 0; z-index: 510;
  background: var(--black);
  padding: clamp(6rem, 22vw, 8.5rem) var(--gutter) clamp(2rem, 8vw, 3.25rem);
  display: flex; flex-direction: column; align-items: flex-start;
  gap: clamp(1.4rem, 5vw, 2rem);
  transform: translateY(-100%); visibility: hidden;
  /* `visibility` is switched instantly, never interpolated — the delay is
     what keeps the panel on screen while it slides back out. Transitioning
     the property itself would leave it computing as `hidden` for the whole
     0.55s of the opening slide, and a hidden element cannot take focus, so
     the focus move in app.js would silently do nothing. */
  transition: transform 0.55s var(--ease), visibility 0s linear 0.55s;
  overflow-y: auto; -webkit-overflow-scrolling: touch;
}
/* Opening: visible immediately, so it's focusable from the first frame. */
.drawer.is-open { transform: translateY(0); visibility: visible; transition: transform 0.55s var(--ease), visibility 0s; }

.drawer__close {
  position: absolute; top: clamp(1rem, 4.5vw, 1.75rem); right: var(--gutter);
  width: 46px; height: 46px; display: grid; place-items: center;
  padding: 0; background: none; border: 0; color: var(--ink); cursor: pointer;
  transition: opacity 0.25s var(--ease);
}
.drawer__close:hover, .drawer__close:focus-visible { opacity: 0.6; }
.drawer__close svg { width: 32px; height: 32px; stroke-width: 1.3; }

.drawer__nav { display: flex; flex-direction: column; align-items: flex-start; }
.drawer__link {
  font-family: "Helvetica Neue", Helvetica, Arial, "Inter", system-ui, sans-serif;
  font-weight: 400; font-size: clamp(1.7rem, 7.6vw, 2.2rem); line-height: 1.12;
  letter-spacing: 0.005em; text-transform: uppercase; color: var(--ink);
  padding-block: 0.32em; transition: opacity 0.25s var(--ease);
}
.drawer__link:hover, .drawer__link:focus-visible { opacity: 0.55; }
/* Current page: a short rule under the word, matching how the desktop nav
   marks the same state. */
.drawer__link[aria-current="page"] { text-decoration: underline; text-underline-offset: 0.18em; text-decoration-thickness: 1px; }

.drawer__social {
  display: flex; flex-wrap: wrap; align-items: center;
  gap: clamp(1.05rem, 5vw, 1.5rem); margin-top: 0.4rem;
}
.drawer__social a { display: inline-flex; color: var(--ink); transition: opacity 0.25s var(--ease); }
.drawer__social a:hover, .drawer__social a:focus-visible { opacity: 0.6; }
.drawer__social svg { width: 25px; height: 25px; }

/* ---------- Photo treatment ---------- */
/* Every photo runs through the same monochrome grade so mixed sources
   read as one set; hover lifts it back toward full contrast. */
.ph { position: absolute; inset: 0; overflow: hidden; background: var(--surface); }
.ph::after {
  content: ""; position: absolute; inset: 0; z-index: 2; pointer-events: none;
  background: linear-gradient(180deg, rgba(0,0,0,0.15) 0%, rgba(0,0,0,0.05) 45%, rgba(0,0,0,0.85) 100%);
}
.ph > img {
  position: absolute; inset: 0; z-index: 1;
  width: 100%; height: 100%; object-fit: cover;
  filter: grayscale(1) contrast(1.14) brightness(0.82);
  transform: scale(1.02);
  transition: transform 1.1s var(--ease), filter 0.7s var(--ease);
}
.ph--flat::after { background: linear-gradient(180deg, rgba(0,0,0,0.1), rgba(0,0,0,0.35)); }
/* clean brand plate — flat surface + centred mark, no hatch (for image-less blocks) */
.ph--brand { background: var(--surface); }
.ph--brand::after { background: linear-gradient(180deg, rgba(0,0,0,0.05), rgba(0,0,0,0.25)); }
.ph--brand .plate::before { background: radial-gradient(120% 85% at 50% 8%, rgba(255,255,255,0.06), transparent 62%); }
.ph--brand .plate img { opacity: 0.42; max-width: 96px; }
.rel:hover .ph > img,
.artist:hover .ph > img,
.feature__art:hover .ph > img,
.split__media:hover .ph > img,
a:hover .ph > img { transform: scale(1.07); filter: grayscale(1) contrast(1.2) brightness(1); }

/* fallback plate sits under the photo — visible if the image never loads */
.plate { position: absolute; inset: 0; z-index: 0; display: grid; place-items: center; }
.plate::before {
  content: ""; position: absolute; inset: 0;
  background:
    radial-gradient(120% 90% at 30% 10%, rgba(255,255,255,0.13), transparent 62%),
    repeating-linear-gradient(115deg, #121212 0 14px, #0b0b0b 14px 28px);
}
.plate img { position: relative; width: 40%; max-width: 120px; opacity: 0.45; }

/* Animated WebGL plasma (ShaderBackground component, ported to vanilla JS)
   filling brand plates in place of the static logo mark. */
.shader-bg {
  position: absolute; inset: 0; z-index: 1;
  display: block; width: 100%; height: 100%;
  border: 0;
}

/* ---------- Hero ---------- */
/* Pure black. The logo lockup is the hero — no photography, no stat wall. */
.hero {
  position: relative; min-height: calc(100svh - var(--nav-h));
  display: grid; place-items: center; overflow: hidden;
  background: var(--black);
  border-bottom: 1px solid var(--line);
}
/* Plus-pattern grid (background-plus component, rendered natively).
   SVG from heropatterns.com; radial mask fades it toward the edges.
   Fill mirrors --accent (#fb3a5d); it is baked into the data-URI below,
   so update it here if --accent changes. */
.hero::before {
  content: ""; position: absolute; inset: 0; z-index: 1; pointer-events: none;
  background-image: url("data:image/svg+xml,%3Csvg width='60' height='60' viewBox='0 0 60 60' xmlns='http://www.w3.org/2000/svg'%3E%3Cg fill='none' fill-rule='evenodd'%3E%3Cg fill='%23fb3a5d' fill-opacity='0.4'%3E%3Cpath d='M36 34v-4h-2v4h-4v2h4v4h2v-4h4v-2h-4zm0-30V0h-2v4h-4v2h4v4h2V6h4V4h-4zM6 34v-4H4v4H0v2h4v4h2v-4h4v-2H6zM6 4V0H4v4H0v2h4v4h2V6h4V4H6z'/%3E%3C/g%3E%3C/g%3E%3C/svg%3E");
  -webkit-mask-image: radial-gradient(circle, #fff 10%, transparent 90%);
  mask-image: radial-gradient(circle, #fff 10%, transparent 90%);
}
/* left-aligned: logo on the left, copy on the right, seamless black */
.hero__inner {
  position: relative; z-index: 2; text-align: left;
  padding-block: clamp(2.5rem, 8vw, 5rem);
  display: grid; grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr);
  align-items: center; gap: clamp(1.5rem, 5vw, 4.5rem);
}
.hero__logo { width: 100%; max-width: 560px; height: auto; justify-self: start; }
.hero__copy { display: flex; flex-direction: column; align-items: flex-start; }
.hero__tag { margin: 0; font-size: var(--s-1); color: var(--ink-soft); max-width: 42ch; }
.hero__cta { display: flex; flex-wrap: wrap; gap: 0.8rem; justify-content: flex-start; margin-top: clamp(1.8rem, 3.5vw, 2.6rem); }
@media (max-width: 820px) {
  .hero__inner { grid-template-columns: 1fr; gap: clamp(1.6rem, 6vw, 2.6rem); }
  .hero__logo { max-width: 440px; }
}

/* ---------- Shutter titles (hero-shutter-text effect, rendered natively) ----
   Every heading on the site is enhanced by shutter-text.js: each glyph fades
   in from a blur while three clip-path slices sweep across it, staggered left
   to right. Size, weight and colour are inherited from the heading itself, so
   this only layers the motion on top of the existing type. The effect is gated
   behind .is-playing, which shutter-text.js adds when the heading scrolls into
   view. */
.shutter { --accent: var(--accent-2); }
.shutter__word { display: inline-block; white-space: nowrap; }
.shutter__char { position: relative; display: inline-block; overflow: hidden; }
.shutter__main { display: inline-block; color: inherit; opacity: 0; }
.shutter__slice {
  position: absolute; inset: 0; z-index: 2; opacity: 0;
  pointer-events: none;
}
.shutter__slice--top { color: var(--accent); clip-path: polygon(0 0, 100% 0, 100% 35%, 0 35%); }
.shutter__slice--mid { color: #e9e2ff;       clip-path: polygon(0 35%, 100% 35%, 100% 65%, 0 65%); }
.shutter__slice--bot { color: var(--accent); clip-path: polygon(0 65%, 100% 65%, 100% 100%, 0 100%); }

.shutter.is-playing .shutter__main {
  animation: shutterIn 0.8s ease forwards;
  animation-delay: calc(var(--i) * 0.04s + 0.3s);
}
.shutter.is-playing .shutter__slice--top {
  animation: shutterSweepR 0.7s ease-in-out;
  animation-delay: calc(var(--i) * 0.04s);
}
.shutter.is-playing .shutter__slice--mid {
  animation: shutterSweepL 0.7s ease-in-out;
  animation-delay: calc(var(--i) * 0.04s + 0.1s);
}
.shutter.is-playing .shutter__slice--bot {
  animation: shutterSweepR 0.7s ease-in-out;
  animation-delay: calc(var(--i) * 0.04s + 0.2s);
}

@keyframes shutterIn {
  from { opacity: 0; filter: blur(10px); }
  to   { opacity: 1; filter: blur(0); }
}
@keyframes shutterSweepR {
  0%   { transform: translateX(-100%); opacity: 0; }
  50%  { transform: translateX(0);     opacity: 1; }
  100% { transform: translateX(100%);  opacity: 0; }
}
@keyframes shutterSweepL {
  0%   { transform: translateX(100%);  opacity: 0; }
  50%  { transform: translateX(0);     opacity: 1; }
  100% { transform: translateX(-100%); opacity: 0; }
}

/* Static fallback: if JS never runs or motion is reduced, the plain heading
   text (or the finished glyphs) stays fully visible. */
.no-js .shutter__main { opacity: 1; }
@media (prefers-reduced-motion: reduce) {
  .shutter__main { opacity: 1; }
  .shutter__slice { display: none; }
  .shutter.is-playing .shutter__main,
  .shutter.is-playing .shutter__slice { animation: none; }
}

/* ---------- Feature release ---------- */
.feature { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: clamp(1.5rem, 4vw, 4rem); align-items: center; }
.feature__art { position: relative; aspect-ratio: 1; border: 1px solid var(--line); }
.feature__badge {
  position: absolute; top: 1rem; left: 1rem; z-index: 3;
  font-size: var(--s--2); font-weight: 600; letter-spacing: 0.26em; text-transform: uppercase;
  background: #fff; color: #000; padding: 0.4rem 0.75rem;
}
.feature__meta { display: flex; flex-wrap: wrap; gap: 0.5rem 1.4rem; align-items: center; color: var(--muted); font-size: var(--s--1); letter-spacing: 0.16em; text-transform: uppercase; }
.feature__title { font-size: var(--s-4); margin-block: 0.9rem 0.6rem; }
.feature__artist { font-family: var(--font-display); font-size: var(--s-1); color: var(--ink-soft); letter-spacing: 0.1em; }
.feature__cta { display: flex; flex-wrap: wrap; gap: 0.8rem; margin-top: 1.8rem; }
.feature__price { font-family: var(--font-display); font-size: var(--s-2); }
.feature__price .cur { font-size: 0.55em; vertical-align: super; color: var(--muted); margin-right: 2px; }

/* play button over artwork */
.play-btn {
  position: absolute; z-index: 3; inset: auto 1rem 1rem auto;
  width: 54px; height: 54px; border-radius: 50%;
  display: grid; place-items: center;
  background: rgba(255,255,255,0.92); color: #000;
  transition: transform 0.4s var(--ease), background 0.3s;
}
.play-btn svg { width: 20px; height: 20px; margin-left: 2px; }
.play-btn:hover { transform: scale(1.09); background: #fff; }

/* ---------- Release grid ---------- */
.releases { display: grid; grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); gap: clamp(1rem, 2.2vw, 1.9rem); }
.rel { display: flex; flex-direction: column; }
.rel__art { position: relative; aspect-ratio: 1; border: 1px solid var(--line); overflow: hidden; }
.rel__art .play-btn { opacity: 0; transform: translateY(8px) scale(0.9); }
.rel:hover .rel__art .play-btn, .rel__art:focus-within .play-btn { opacity: 1; transform: translateY(0) scale(1); }
.rel__tag {
  position: absolute; z-index: 3; top: 0.7rem; left: 0.7rem;
  font-size: var(--s--2); font-weight: 600; letter-spacing: 0.22em; text-transform: uppercase;
  color: var(--ink); background: rgba(0,0,0,0.55); border: 1px solid var(--line-2);
  padding: 0.25rem 0.55rem; backdrop-filter: blur(6px);
}
.rel__body { padding-top: 0.9rem; display: flex; flex-direction: column; gap: 0.25rem; flex: 1; }
.rel__artist { font-size: var(--s--2); letter-spacing: 0.24em; text-transform: uppercase; color: var(--muted); }
.rel__title { font-size: var(--s-1); }
.rel__foot { display: flex; align-items: center; justify-content: space-between; gap: 0.75rem; margin-top: auto; padding-top: 0.85rem; }
.rel__tag--soon { background: #fff; color: #000; border-color: #fff; }
.rel__soon { font-size: var(--s--2); font-weight: 600; letter-spacing: 0.22em; text-transform: uppercase; color: var(--muted); }
.rel--soon .rel__art { border-color: var(--line-2); }
.rel--soon .ph > img { filter: grayscale(1) contrast(1.1) brightness(0.5); }
.rel--soon:hover .ph > img { filter: grayscale(1) contrast(1.15) brightness(0.66); }
.rel__price { font-family: var(--font-display); font-size: var(--s-1); }
.rel__price .cur { font-size: 0.6em; vertical-align: super; color: var(--muted); margin-right: 1px; }
.rel__actions { display: flex; gap: 0.45rem; }
.rel.is-hidden { display: none; }

/* ---------- Filters ---------- */
.filters { display: flex; flex-wrap: wrap; gap: 0.5rem; margin-bottom: clamp(1.6rem, 3vw, 2.4rem); }
.filter {
  padding: 0.6rem 1.15rem; border: 1px solid var(--line);
  font-size: var(--s--2); font-weight: 600; letter-spacing: 0.2em; text-transform: uppercase;
  color: var(--muted); border-radius: 2px; transition: all 0.3s;
}
.filter:hover { color: var(--ink); border-color: var(--line-2); }
.filter.is-active { background: #fff; color: #000; border-color: #fff; }

/* ---------- Artist tiles ---------- */
.artists { display: grid; grid-template-columns: repeat(auto-fill, minmax(255px, 1fr)); gap: clamp(0.9rem, 2vw, 1.6rem); }
/* small roster — two tiles, centred, not strung across an empty row */
.artists--duo { grid-template-columns: repeat(2, minmax(0, 1fr)); max-width: 720px; margin-inline: auto; gap: clamp(1rem, 2.5vw, 1.8rem); }
/* solo roster — one tile, centred */
.artists--solo { grid-template-columns: minmax(0, 1fr); max-width: 360px; margin-inline: auto; }
.artist { position: relative; display: block; aspect-ratio: 3 / 4; overflow: hidden; border: 1px solid var(--line); }

/* name-forward tile — used while real artist photography isn't in yet */
.artist--name {
  display: grid; place-items: center; gap: 1rem; text-align: center;
  padding: clamp(1.5rem, 4vw, 2.5rem);
  background:
    radial-gradient(120% 80% at 50% 0%, rgba(255,255,255,0.06), transparent 60%),
    var(--surface);
  transition: border-color 0.4s var(--ease), background 0.4s var(--ease);
}
.artist--name:hover { border-color: var(--line-2); }
/* Animated shader fills the name tile; a scrim keeps the mark + name legible. */
.artist--name .shader-bg { z-index: 0; }
.artist--name::after {
  content: ""; position: absolute; inset: 0; z-index: 1; pointer-events: none;
  background: linear-gradient(180deg, rgba(6,6,6,0.55) 0%, rgba(6,6,6,0.72) 100%);
}
.artist--name > .artist__mark,
.artist--name > .artist__name { position: relative; z-index: 2; }
.artist--name:hover .shader-bg { opacity: 0.9; }
.artist__mark { width: 56px; opacity: 0.55; }
.artist--name .artist__name { font-size: var(--s-3); line-height: 0.95; }
.artist__body {
  position: absolute; z-index: 3; inset: auto 0 0 0;
  padding: clamp(1rem, 2.2vw, 1.5rem);
  display: flex; flex-direction: column; gap: 0.25rem;
}
.artist__genre { font-size: var(--s--2); letter-spacing: 0.28em; text-transform: uppercase; color: var(--ink-soft); }
.artist__name { font-size: var(--s-2); }
.artist__city { font-size: var(--s--1); color: var(--muted); }
.artist__socials { display: flex; gap: 0.4rem; margin-top: 0.7rem; opacity: 0; transform: translateY(6px); transition: opacity 0.4s var(--ease), transform 0.4s var(--ease); }
.artist:hover .artist__socials, .artist:focus-within .artist__socials { opacity: 1; transform: translateY(0); }
.artist__socials a { display: grid; place-items: center; width: 32px; height: 32px; border: 1px solid var(--line-2); border-radius: 50%; }
.artist__socials svg { width: 14px; height: 14px; }
.artist__socials a:hover { background: #fff; color: #000; border-color: #fff; }
.artist--tall { aspect-ratio: 3 / 4.6; }

/* ---------- Editorial split ---------- */
.split { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: clamp(1.8rem, 5vw, 5rem); align-items: center; width: 100%; max-width: 100%; box-sizing: border-box; }
.split > * { min-width: 0; max-width: 100%; box-sizing: border-box; }
.split__media { position: relative; aspect-ratio: 4 / 5; border: 1px solid var(--line); }
.split--flip .split__media { order: -1; }

/* ---------- Numbered list (how it works / stage) ---------- */
.steps { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: clamp(1.5rem, 3vw, 2.5rem); }
.step { padding-top: 1.4rem; border-top: 1px solid var(--line-2); }
.step__n { font-family: var(--font-display); font-size: var(--s-2); color: var(--faint); }
.step__title { font-size: var(--s-1); margin-block: 0.55rem 0.5rem; }
.step__text { color: var(--muted); font-size: var(--s-0); }

/* ---------- Stage note (what the label does / doesn't have yet) ---------- */
.note {
  display: grid; grid-template-columns: auto 1fr auto; gap: 1.2rem; align-items: center;
  padding: clamp(1.1rem, 2.4vw, 1.6rem) clamp(1.1rem, 2.4vw, 1.8rem);
  border: 1px solid var(--line); background: var(--surface); border-radius: 2px;
}
.note__icon { width: 34px; height: 34px; color: var(--faint); }
.note__title { font-size: var(--s-1); margin-bottom: 0.2rem; }
.note__text { color: var(--muted); font-size: var(--s--1); max-width: 62ch; }

/* ---------- Coming / quiet statement block ---------- */
.coming {
  text-align: center; border: 1px solid var(--line); background: var(--surface);
  padding: clamp(2.6rem, 7vw, 5rem) clamp(1.4rem, 4vw, 3rem);
}
.coming__eyebrow {
  display: inline-block; font-size: var(--s--2); font-weight: 600;
  letter-spacing: 0.34em; text-transform: uppercase; color: var(--muted);
  border: 1px solid var(--line-2); border-radius: 999px; padding: 0.4rem 1rem;
}
.coming__title { font-size: var(--s-4); margin-top: 1.4rem; }
.coming__text { color: var(--ink-soft); max-width: 52ch; margin: 1.2rem auto 0; }
.coming__cta { display: flex; flex-wrap: wrap; gap: 0.8rem; justify-content: center; margin-top: 2rem; }

/* ---------- Signup ---------- */
.signup {
  position: relative; overflow: hidden; text-align: center;
  padding: clamp(2.6rem, 7vw, 5.5rem) clamp(1.2rem, 4vw, 3rem);
  border: 1px solid var(--line); background: var(--surface);
}
.signup__mark { width: clamp(150px, 36vw, 210px); height: auto; margin: 0 auto 1.4rem; opacity: 0.9; }
.signup__form { display: flex; gap: 0.6rem; flex-wrap: wrap; justify-content: center; margin-top: 1.9rem; width: 100%; max-width: 100%; }
.signup__form input {
  flex: 1 1 min(300px, 100%); max-width: 400px; width: 100%; box-sizing: border-box;
  background: var(--black); border: 1px solid var(--line-2); border-radius: 2px;
  padding: 0.95rem 1.1rem; font-size: var(--s-0); color: var(--ink);
}
.signup__form input::placeholder { color: var(--faint); }
/* A brightened border alone is a weak keyboard cue on a near-black field, so
   the outline is only dropped for pointer focus — keyboard focus keeps the ring. */
.signup__form input:focus { outline: none; border-color: #fff; }
.signup__form input:focus-visible { outline: 2px solid #fff; outline-offset: 2px; }
.signup__fine { margin-top: 1rem; font-size: var(--s--2); color: var(--faint); letter-spacing: 0.1em; }

/* ---------- Page head (interior pages) ---------- */
.page-head { padding-block: clamp(2.5rem, 6vw, 5rem) clamp(1.8rem, 4vw, 3rem); border-bottom: 1px solid var(--line); }
.crumb { display: flex; gap: 0.6rem; font-size: var(--s--2); letter-spacing: 0.24em; text-transform: uppercase; color: var(--faint); margin-bottom: 1.2rem; }
.crumb a:hover { color: var(--ink); }
.page-head__title { font-size: var(--s-4); margin-bottom: 1rem; }

/* ---------- Contact / forms ---------- */
.contact-grid { display: grid; grid-template-columns: minmax(0, 1.35fr) minmax(0, 1fr); gap: clamp(2rem, 5vw, 4.5rem); align-items: start; width: 100%; max-width: 100%; box-sizing: border-box; }
.contact-grid > * { min-width: 0; max-width: 100%; box-sizing: border-box; }
.field { display: flex; flex-direction: column; gap: 0.45rem; margin-bottom: 1.1rem; width: 100%; max-width: 100%; min-width: 0; box-sizing: border-box; }
.field label { font-size: var(--s--2); font-weight: 600; letter-spacing: 0.22em; text-transform: uppercase; color: var(--muted); word-break: break-word; max-width: 100%; }
.field input, .field textarea, .field select {
  width: 100%; max-width: 100%; box-sizing: border-box;
  background: var(--black); border: 1px solid var(--line);
  border-radius: 2px; padding: 0.85rem 1rem; font-size: var(--s-0); color: var(--ink);
  transition: border-color 0.3s;
}
.field select { text-overflow: ellipsis; overflow: hidden; white-space: nowrap; }
.field textarea { resize: vertical; min-height: 140px; }
.field input:focus, .field textarea:focus, .field select:focus { outline: none; border-color: #fff; }
.field input:focus-visible, .field textarea:focus-visible, .field select:focus-visible { outline: 2px solid #fff; outline-offset: 2px; }
/* Result of a form submission, announced by app.js via role="status".
   A toast alone disappears; this stays put next to the form that produced it. */
.form-status {
  margin-top: 1rem; font-size: var(--s--1); line-height: 1.55;
  padding: 0.85rem 1.1rem; border: 1px solid var(--line-2); border-radius: 2px;
  color: var(--ink-soft); background: rgba(255, 255, 255, 0.03);
}
.form-status:empty { display: none; }
.form-status--ok { border-color: rgba(255, 255, 255, 0.35); color: var(--ink); }
.form-status--err { border-color: var(--accent); color: var(--accent-soft); }
.signup .form-status { max-width: 46ch; margin-inline: auto; text-align: center; }
.field-row { display: grid; grid-template-columns: 1fr 1fr; gap: 1.1rem; }
.form-note { font-size: var(--s--2); color: var(--faint); margin-top: 0.9rem; }

/* Honeypot. Positioned off-screen rather than `display: none`, because the
   simplest bots skip anything that's display:none — which defeats the point.
   The markup carries aria-hidden and tabindex="-1", so nobody using a screen
   reader or a keyboard ever meets it. */
.hp { position: absolute; left: -9999px; top: auto; width: 1px; height: 1px; overflow: hidden; }

.info-block { padding-block: 1.3rem; border-top: 1px solid var(--line); }
.info-block:first-child { border-top: 0; padding-top: 0; }
.info-block h3 { font-size: var(--s-1); margin-bottom: 0.4rem; }
.info-block p, .info-block a { color: var(--muted); font-size: var(--s-0); }
.info-block a:hover { color: var(--ink); }

/* ---------- Timeline ---------- */
.timeline { display: grid; gap: 0; }
.tl {
  display: grid; grid-template-columns: 130px 1fr; gap: clamp(1rem, 3vw, 2.5rem);
  padding-block: clamp(1.3rem, 3vw, 2rem); border-top: 1px solid var(--line);
}
.tl:last-child { border-bottom: 1px solid var(--line); }
.tl__when { font-family: var(--font-display); font-size: var(--s-1); color: var(--faint); }
.tl__title { font-size: var(--s-1); margin-bottom: 0.4rem; }
.tl__text { color: var(--muted); max-width: 62ch; }



    /* ---------- Stat row ---------- */
.stats { display: grid; grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)); gap: 1px; background: var(--line); border: 1px solid var(--line); }
.stat { background: var(--bg); padding: clamp(1.4rem, 3vw, 2.2rem); }
.stat b { display: block; font-family: var(--font-display); font-size: var(--s-3); font-weight: 400; }
.stat span { font-size: var(--s--2); letter-spacing: 0.24em; text-transform: uppercase; color: var(--muted); }

/* ---------- Footer ---------- */
/* Interior pages use this footer; the homepage's footer is .site-foot
   sitting inside .skyline. Same sunset photo on both so the footer
   reads the same everywhere. Layer order is scrim, then photo, then a
   solid black floor for when the image is still loading. */
.footer {
  position: relative; overflow: hidden;
  padding-top: clamp(2.5rem, 6vw, 4.5rem);
  background:
    linear-gradient(180deg, rgba(0,0,0,0.78) 0%, rgba(0,0,0,0.82) 45%, rgba(0,0,0,0.94) 100%),
    url("images/footer-skyline.webp") 50% 38% / cover no-repeat,
    var(--black);
}
/* The pink plus-pattern that used to sit here was texture for a flat
   black footer. Over the sunset photo it reads as interference, so the
   photo replaces it rather than layering with it. */
.footer > .wrap { position: relative; z-index: 1; }
.footer__top {
  display: grid; grid-template-columns: minmax(0, 1.5fr) auto;
  gap: clamp(2rem, 5vw, 4rem); align-items: start;
  padding-bottom: clamp(2rem, 4vw, 3rem);
}
.footer__brand { max-width: 44ch; }
.footer__blurb { color: var(--muted); font-size: var(--s--1); max-width: 42ch; margin-top: 1.2rem; }
.footer__nav { display: flex; flex-direction: column; gap: 0.75rem; }
.footer__nav a { font-size: var(--s--1); color: var(--ink-soft); letter-spacing: 0.04em; transition: color 0.3s; }
.footer__nav a:hover { color: #fff; }

/* single social — the one real channel, shown as a handle */
.social {
  display: inline-flex; align-items: center; gap: 0.6rem; margin-top: 1.4rem;
  color: var(--ink-soft); font-size: var(--s--1); letter-spacing: 0.04em;
  transition: color 0.3s;
}
.social svg { width: 20px; height: 20px; }
.social:hover { color: #fff; }

.footer__bottom {
  display: flex; flex-wrap: wrap; gap: 1rem; justify-content: space-between;
  padding-block: 1.5rem; margin-top: 1rem; border-top: 1px solid var(--line);
  font-size: var(--s--2); color: var(--faint); letter-spacing: 0.1em;
}
.footer__legal { display: flex; gap: 1.4rem; align-items: center; }
.footer__legal a:hover { color: var(--ink); }
.footer__admin {
  display: inline-flex; align-items: center; gap: 0.4rem;
  padding-left: 1.4rem; border-left: 1px solid var(--line);
  font-size: 0.72rem; letter-spacing: 0.16em; text-transform: uppercase; color: var(--faint);
}
.footer__admin::before { content: ""; width: 5px; height: 5px; border-radius: 50%; background: var(--chrome-soft); }
.footer__admin:hover { color: var(--ink); }

/* ---------- Reveal ---------- */
.reveal { opacity: 0; transform: translateY(26px); transition: opacity 0.9s var(--ease), transform 0.9s var(--ease); }
.reveal.is-visible { opacity: 1; transform: none; }
.reveal[data-delay="1"] { transition-delay: 0.08s; }
.reveal[data-delay="2"] { transition-delay: 0.16s; }
.reveal[data-delay="3"] { transition-delay: 0.24s; }
.reveal[data-delay="4"] { transition-delay: 0.32s; }
.reveal[data-delay="5"] { transition-delay: 0.4s; }
@media (prefers-reduced-motion: reduce) { .reveal { opacity: 1; transform: none; } }

/* ---------- Responsive ---------- */
@media (max-width: 1000px) {
  .nav__links { display: none; }
  .nav__toggle { display: block; }
  .nav__inner { grid-template-columns: 1fr auto; }
  .footer__top { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 820px) {
  .feature, .split, .contact-grid { grid-template-columns: 1fr; width: 100%; }
  .split > *, .contact-grid > * { min-width: 0; max-width: 100%; box-sizing: border-box; }
  .split--flip .split__media { order: 0; }
  .feature__art, .split__media { aspect-ratio: 4 / 3; }
  .tl { grid-template-columns: 1fr; gap: 0.5rem; }
  .note { grid-template-columns: 1fr; text-align: left; }
}
@media (max-width: 620px) {
  .nav__right .btn { display: none; }
  .footer__top { grid-template-columns: 1fr; }
  .releases { grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); }
  .artists { grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); }
  .field-row { grid-template-columns: 1fr; }
  .hero__stats { gap: 1.4rem 2rem; }
}

/* =============================================================
   OVO-INSPIRED HOMEPAGE OVERHAUL
   Hero (framed logo) · Roster collage · Skyline shop · Skyline footer
   Additive: scoped to new classes so interior pages are untouched.
   ============================================================= */

/* ---------- Hero: framed logo, side nav, social rail ---------- */
.hero--home {
  display: flex; flex-direction: column;
  min-height: calc(100svh - var(--nav-h));
  padding-block: clamp(2rem, 5vw, 4rem);
}
/* pure black — no plus-pattern behind the homepage hero, and no hairline
   splitting the hero from the roster (matches OVO's seamless black) */
.hero--home::before { display: none; }
.hero--home { border-bottom: 0; }
.hero-home {
  position: relative; z-index: 2;
  width: min(100% - calc(var(--gutter) * 2), 1680px);
  margin-inline: auto;
  flex: 1;
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: center; align-content: center;
  gap: clamp(1.5rem, 4vw, 4rem);
}

/* Left: vertical nav, text right-aligned (OVO side menu) */
.hero-nav { display: flex; flex-direction: column; align-items: flex-end; gap: clamp(0.5rem, 1.4vw, 0.9rem); text-align: right; }
.hero-nav a {
  font-family: var(--font-display); font-size: clamp(1.1rem, 1.7vw, 1.7rem);
  text-transform: uppercase; letter-spacing: 0.02em; line-height: 1;
  color: var(--ink-soft); transition: color 0.3s var(--ease), transform 0.35s var(--ease);
}
.hero-nav a:hover, .hero-nav a:focus-visible { color: #fff; transform: translateX(-4px); }

/* Centre: the exact logo lockup, used as one piece */
.hero-frame { display: grid; justify-items: center; }
.hero-logo { width: clamp(230px, 32vw, 440px); height: auto; }

/* Right: vertical social rail */
.hero-social { display: flex; flex-direction: column; align-items: center; gap: 1rem; }
.hero-social__label {
  writing-mode: vertical-rl; text-orientation: mixed;
  font-size: var(--s--2); font-weight: 600; letter-spacing: 0.34em; text-transform: uppercase;
  color: var(--muted); margin-bottom: 0.3rem;
}
.hero-social a {
  display: grid; place-items: center; width: 40px; height: 40px;
  border: 1px solid var(--line-2); border-radius: 50%; color: var(--ink);
  transition: background 0.3s, color 0.3s, border-color 0.3s, transform 0.3s var(--ease);
}
.hero-social a svg { width: 17px; height: 17px; }
.hero-social a:hover { background: #fff; color: #000; border-color: #fff; transform: translateY(-3px); }

/* Bottom: one-line uppercase label description */
.hero-label {
  position: relative; z-index: 2; text-align: center;
  padding-top: clamp(1.5rem, 3vw, 2.5rem);
  font-size: var(--s--2); font-weight: 600; letter-spacing: 0.32em; text-transform: uppercase;
  color: var(--muted);
}

@media (max-width: 860px) {
  .hero-home { grid-template-columns: 1fr; justify-items: center; gap: clamp(1.6rem, 6vw, 2.4rem); }
  .hero-nav { display: none; } /* global nav + drawer cover navigation on mobile */
  .hero-social { flex-direction: row; }
  .hero-social__label { writing-mode: horizontal-tb; margin: 0 0.2rem 0 0; }
}

/* The homepage carries its own vertical side menu (.hero-nav), so the global
   top bar duplicates it. Hide the bar there and let the hero reclaim the
   height it was leaving for it.

   Deliberately capped at 861px and up — that is exactly the range where
   .hero-nav is visible. Below 860px the side menu is hidden (see the query
   above) and the top bar plus its drawer are the ONLY way off the homepage,
   so it has to stay. Interior pages are untouched: they have no side menu. */
@media (min-width: 861px) {
  body.is-home .nav { display: none; }
  body.is-home .hero--home { min-height: 100svh; }
}

/* ---------- Roster / scattered CD + vinyl collage ---------- */
/*
   PARALLAX CONTROL PANEL
   ----------------------
   Every photo speed is ABOVE 1.0. That's the OVO behaviour: the photos
   all outrun the page and climb, and it's the NAME that acts as the
   slow reference they're read against — not a mix of fast and slow
   photos. Depth comes from the spread between 1.12 and 1.70.

   --travel-vh is THE knob: how far an element at speed 2.0 travels
   relative to the page across one full pass, as a FRACTION OF VIEWPORT
   HEIGHT. 0.55 means just over half a screen. Each element actually
   moves (speed - 1) x this. Raise it for a stronger effect.

   Why viewport-relative and not a fixed px value: the effect has to
   read the same on a laptop and a 27" monitor. A fixed 340px is a big
   move on a short screen and a twitch on a tall one. Measuring the OVO
   reference, its photos travel roughly a third of the viewport further
   than the page does — which is what this is tuned to.

   Keep both values UNITLESS. assets/parallax.js reads them with
   getComputedStyle, and custom properties come back unresolved — a
   clamp() or a vh value would arrive as literal text, not a number.
   JS multiplies by the viewport height itself.

   --overscan-vh draws the photo field taller than the visible section
   at each end, and the section clips, so the edges never empty out.
   It MUST be at least (fastest speed - 1) x --travel-vh / 2, which is
   the largest distance any tile strays from its resting position.
   Here: (1.70 - 1) x 0.55 / 2 = 0.193, so 0.24 has headroom.
*/
.record-collage {
  --travel-vh: 0.55;
  --overscan-vh: 0.24;
  background: var(--black);
  /* `clip` not `hidden`: hidden creates a scroll container (and so a
     potential stray scrollbar), clip just clips. Nothing here can grow
     the document either way — transforms never affect layout. */
  overflow: clip;
}
.record-collage__stage {
  position: relative;
  min-height: clamp(720px, 96vh, 1080px);
  /* The section publishes ONE progress timeline; every photo inside
     subscribes to it (animation-timeline: --roster below). Without a
     shared named timeline each photo would get its own view() progress
     based on its own height, and they'd drift out of sync. */
  view-timeline-name: --roster;
  view-timeline-axis: block;
}

/* The supplied record artwork occupies the former left-aligned roster slot. */
.record-collage__artwork {
  position: absolute; z-index: 4; top: 50%; left: 0; translate: 0 -50%;
  width: clamp(160px, 32%, 360px); pointer-events: none;
  filter: drop-shadow(0 12px 24px rgba(0,0,0,.65));
}
.record-collage__artwork img { width: 100%; height: auto; object-fit: contain; border-radius: 3%; }

/* The photo field, overscanned past the section at top and bottom so
   the edges stay covered while tiles travel. The overflow: clip on
   .record-collage hides the surplus. */
.collage {
  position: absolute;
  inset: calc(var(--overscan-vh) * -100vh) 0;
  /* Deliberately NO z-index. Setting one here would make .collage a
     stacking context, which traps every tile's z-index inside it — they
     could then only order among themselves, and the whole field would
     be stuck behind the names. Leaving it `auto` lets each tile's
     z-index compete with .record-collage__artwork (z-index 4) directly, so some
     photos genuinely pass in front of the text and some behind. */
}

/* Collage tiles: scattered, greyscale, parallaxed on scroll.
   Layout is absolute-in-relative rather than CSS Grid with grid-area.
   Grid CAN overlap cells, but every tile would have to land on a track
   boundary — so nudging one photo 40px means adding a row, and the
   underlying regularity keeps showing through as exactly the even grid
   this is meant to avoid. Percentage-based absolute positioning gives
   continuous placement on both axes and lets each tile carry its own
   width and aspect-ratio. The cost is that the container needs an
   explicit height, which .record-collage__stage already has. */
.collage__item {
  position: absolute; overflow: hidden; border: 1px solid var(--line);
  background:
    #0c0c0c url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='200' height='200'%3E%3Crect width='200' height='200' fill='%230c0c0c'/%3E%3Cg fill='none' stroke='%231d1d1d' stroke-width='1.5'%3E%3Ccircle cx='100' cy='100' r='26'/%3E%3Ccircle cx='100' cy='100' r='40'/%3E%3Ccircle cx='100' cy='100' r='54'/%3E%3Ccircle cx='100' cy='100' r='68'/%3E%3Ccircle cx='100' cy='100' r='82'/%3E%3Ccircle cx='100' cy='100' r='96'/%3E%3C/g%3E%3Ccircle cx='100' cy='100' r='9' fill='%232b2b2b'/%3E%3C/svg%3E") center / cover no-repeat;
}
.collage__item img {
  position: relative; z-index: 1; width: 100%; height: 100%;
  object-fit: cover; filter: grayscale(1) contrast(1.05);
  transition: filter 0.7s var(--ease), transform 1.1s var(--ease);
}
.collage__item:hover img { filter: grayscale(0) contrast(1.05); transform: scale(1.04); }
.collage__slot {
  position: absolute; z-index: 0; inset: auto 0 0.6rem 0; text-align: center;
  font-family: var(--font-ui); font-size: var(--s--2); font-weight: 600;
  letter-spacing: 0.3em; text-transform: uppercase; color: var(--faint);
}

/* ---------- The motion ----------
   Preferred path: CSS scroll-driven animation. It runs on the
   compositor, off the main thread, so it can't be stuttered by other
   JS — and it needs no scroll listener at all.

   Longhands, not the `animation` shorthand, on purpose. The shorthand
   resets animation-timeline to `auto` and animation-duration to `0s`,
   either of which silently kills a timeline-driven animation. This is
   the single most common way to break these.

   --speed is written by assets/parallax.js from each element's
   data-speed attribute (CSS can't read attributes as numbers). No JS
   at all -> var(--speed, 1) -> amplitude 0 -> static composed layout. */
@supports (animation-timeline: view()) and (view-timeline-name: --probe) {
  .collage__item,
  .record-collage__artwork {
    /* Distance this element moves relative to the page, across one
       full pass. Speed 1 = 0 = glued to the page. */
    --amp: calc((var(--speed, 1) - 1) * var(--travel-vh) * 100vh);

    animation-name: parallax-pass;
    animation-timeline: --roster;         /* the section's shared timeline */
    animation-range: cover 0% cover 100%; /* enters bottom -> exits top */
    animation-duration: auto;             /* driven by scroll, not a clock */
    animation-timing-function: linear;    /* position, not easing */
    animation-fill-mode: both;
  }
}

/* Starts BELOW its resting spot, passes through it when the section is
   centred, ends above. That's why the edges never empty out — each
   photo travels INTO place rather than only ever leaving it. Max
   excursion is amp/2 in each direction, which --px-overscan covers. */
@keyframes parallax-pass {
  from { transform: translate3d(0, calc(var(--amp) / 2), 0); }
  to   { transform: translate3d(0, calc(var(--amp) / -2), 0); }
}

/* Compositor layers cost memory, so only ask for them while the
   section is actually in play (class toggled by the IntersectionObserver
   in the JS fallback). The CSS path promotes layers on its own. */
.record-collage__stage.is-parallaxing .collage__item,
.record-collage__stage.is-parallaxing .record-collage__artwork { will-change: transform; }

/* Reduced motion: OFF, not slower. Both paths, one switch. Everything
   renders at its authored resting position — the composed layout. */
@media (prefers-reduced-motion: reduce) {
  .collage__item,
  .record-collage__artwork {
    animation: none !important;
    transform: none !important;
    will-change: auto !important;
  }
}

/* Desktop scatter — varied sizes & positions, some behind the names.
   Percentages are of .collage, which is taller than the section by
   --px-overscan at each end, so the field deliberately bleeds past the
   top and bottom edges rather than stopping at them.
   Aspect ratios lean portrait/square to match the source photography
   (mostly 1:1.1 to 1:1.65) — object-fit: cover crops the rest. */
/* ---------- Desktop scatter: LANES ----------

   No photo may ever sit on top of another photo. With every tile moving
   at a different speed that's not something you can eyeball once and
   call done — two tiles that clear each other at rest will slide into
   each other halfway down the scroll. So the layout guarantees it
   structurally, with two rules:

     1. Photos are grouped into vertical LANES that do not overlap
        horizontally (each lane's left..left+width is disjoint from
        every other lane's, with a gutter between).
     2. Photos SHARING a lane share the same --speed, so they move in
        lockstep and the vertical gap between them never changes.

   Different lanes can't collide because they never share x. Same-lane
   tiles can't collide because they never move relative to each other.
   That holds at any travel distance, which is what lets the motion be
   as strong as OVO's without risking a pile-up.

   If you add a photo: put it in an existing lane and give it that
   lane's speed, or open a new lane in the gutter space. Don't drop a
   tile into the middle of a lane at a different speed.

   z-index reads against .record-collage__artwork (4): 5 = in front of the artwork,
   2 = behind it. The name is left-aligned, so only the right-hand
   lanes (L4/L5) are ever clear of it — they're the ones allowed in
   front. The lanes that cross the text stay behind it, so the name
   never gets covered.                                                */

/* Four lanes, two photos each — one high, one low. Every lane carrying
   both a top and a bottom photo is what keeps the field from hollowing
   out: with only one photo in a lane, that lane is empty for most of
   the scroll.

   EDGE COVERAGE. A tile strays (speed - 1) x travel / 2 from where it
   is authored, so with this much travel the fast lanes cannot be
   trusted to hold the section's top and bottom edges — they outrun
   them. Lane 2 is the SLOW lane (0.88), so it strays least, and its
   two tiles are pinned flush to the top and bottom of the overscanned
   field. They are the edge anchors; the other six are free to sit
   wherever the composition wants them. Check: 0.88 strays only
   0.12 x 0.55 / 2 = 0.033vh = ~30px, well inside the 0.20vh overscan.

   Tiles are narrower than their lane and nudged around inside it, so
   the left edges don't line up into a visible column grid. */

/* STAGGER THE ROWS. Two photos per lane at matching heights makes a
   top band and a bottom band with a wide dead strip between them —
   about 440px of nothing but the name. So each lane runs its own
   vertical rhythm: lane 3's upper photo sits near mid-height and lane
   4's lower photo rides up to meet it, filling the middle on the right
   where the name doesn't reach. Lanes 1 and 2 stay open through the
   middle, which is exactly where the name needs clear space. Every
   lane still has one photo high and one low, so nothing hollows out. */

/* Lane 1 · x 0-23% · speed 1.30 */
.c1 { top: 6%;    left: 0%;    width: 21%; aspect-ratio: 3 / 4; z-index: 2; }
.c6 { bottom: 4%; left: 2%;    top: auto; width: 21%; aspect-ratio: 1; z-index: 2; }
/* Lane 2 · x 25.5-48.5% · speed 1.12 · EDGE ANCHORS, keep flush */
.c2 { top: 0%;    left: 25.5%; width: 23%; aspect-ratio: 4 / 5; z-index: 2; }
.c4 { bottom: 0%; left: 27%;   top: auto; width: 21%; aspect-ratio: 1; z-index: 2; }
/* Lane 3 · x 51-74% · speed 1.70 · upper photo pulled down to mid */
.c3 { top: 30%;   left: 52%;   width: 22%; aspect-ratio: 1;     z-index: 2; }
.c7 { bottom: 8%; left: 51%;   top: auto; width: 21%; aspect-ratio: 3 / 4; z-index: 2; }
/* Lane 4 · x 76.5-100% · speed 1.45 · lower photo lifted to mid.
   Clear of the name, so this lane is allowed in front of it (z 5) */
.c5 { top: 4%;     left: 77%;   width: 23%; aspect-ratio: 3 / 4; z-index: 5; }
.c8 { bottom: 28%; left: 76.5%; top: auto; width: 22%; aspect-ratio: 1; z-index: 5; }

/* Mobile: a genuinely simpler composition, not a shrunk desktop.
     1. Fewer photos — four, not eight. Eight tiles across a 390px
        column is mud whatever you do with them.
     2. Two lanes instead of five, so each photo is wide enough to read.
     3. Gentler motion — --travel-vh drops to 0.34, which narrows every
        amplitude at once. A big move on a short screen reads as jitter,
        not depth.
   The surviving four are two whole lanes — c2+c4 (1.12) and c3+c7
   (1.70). Keeping whole lanes matters: same-lane tiles must share a
   speed for the no-overlap guarantee, and data-speed lives in the HTML
   where a media query can't reach it. Dropping half a lane and keeping
   half of another would pair two different speeds in one column and
   let them slide into each other. These two also give the widest speed
   contrast available, which is what carries the depth when there are
   only two columns. c2/c4 stay the edge anchors. */
@media (max-width: 760px) {
  .record-collage {
    --travel-vh: 0.30;
    /* needs >= (1.70 - 1) x 0.30 / 2 = 0.105 */
    --overscan-vh: 0.12;
  }
  /* Deliberately shorter than the desktop stage, and not just scaled
     down. At 390px a lane is ~170px wide, so a tile is only ~280px
     tall however you crop it — four short tiles in a tall field leaves
     a hole through the middle. The field shrinks to match what four
     photos can actually fill, and the tiles go taller (3/5 portrait
     rather than 3/4) to cover more of it. */
  .record-collage__stage { min-height: clamp(520px, 118vw, 760px); }
  .record-collage__artwork { width: 46%; max-width: 280px; }

  .c1, .c5, .c6, .c8 { display: none; }

  /* Height cap. A tile's height comes from its width x aspect-ratio,
     but the FIELD's height comes from the viewport — so as this
     breakpoint widens toward 760px the tiles grow tall enough that two
     of them no longer fit in one lane, and same-lane tiles start
     overlapping. Capping the height in vh ties tile size to the same
     thing the field is sized by. Below ~600px the aspect-ratio is
     already under the cap and nothing changes; object-fit: cover
     handles the crop when it does bite. */
  .collage__item { max-height: 38vh; }

  /* Lane 1 · x 0-48% · speed 1.12 · edge anchors */
  .c2 { top: 0%;     left: 0%;  width: 48%; aspect-ratio: 3 / 5; z-index: 2; }
  .c4 { bottom: 0%;  left: 1%;  top: auto; width: 46%; aspect-ratio: 3 / 4; z-index: 2; }
  /* Lane 2 · x 52-100% · speed 1.70 */
  .c3 { top: 9%;     left: 52%; width: 48%; aspect-ratio: 3 / 5; z-index: 2; }
  .c7 { bottom: 10%; left: 53%; top: auto; width: 46%; aspect-ratio: 3 / 5; z-index: 2; }
}

/* ---------- Bottom section over the sunset skyline ----------
   On the homepage <footer class="site-foot"> is nested INSIDE this
   section, so this background is the footer's background. The photo
   used to be images/pretoria-sunset.jpg, which was never added and
   404'd — the gradient below was doing all the work. It now points at
   images/footer-skyline.jpg. The gradient stays as the fallback, so a
   missing or slow image still looks deliberate rather than broken.

   background-position is 50% 38%, not center: the sun and the skyline
   sit in the upper-middle of the frame, and centring a 3:2 photo in a
   tall footer crops them straight out. */
.skyline { position: relative; isolation: isolate; background: #140b22; }
.skyline::before {
  content: ""; position: absolute; inset: 0; z-index: -2;
  background:
    url("images/footer-skyline.webp") 50% 38% / cover no-repeat,
    linear-gradient(180deg, #3a2350 0%, #56305f 30%, #7a3f57 55%, #241534 100%);
}
/* Readability scrim. The photo is bright orange at the top, so the
   overlay has to be heavier there than a stock dark gradient would be,
   or the white shop headings sit on near-white sky. */
.skyline::after {
  content: ""; position: absolute; inset: 0; z-index: -1;
  background: linear-gradient(180deg, rgba(0,0,0,0.70) 0%, rgba(0,0,0,0.66) 40%, rgba(0,0,0,0.80) 72%, rgba(0,0,0,0.93) 100%);
}
.skyline__inner { padding-block: clamp(4rem, 10vw, 8rem) clamp(2.5rem, 6vw, 4rem); }

/* Shop / releases list — OVO tour-module layout, restyled for MBR */
.shop__head { display: flex; align-items: flex-end; justify-content: space-between; gap: 1.5rem; flex-wrap: wrap; padding-bottom: 1.2rem; margin-bottom: clamp(1.4rem, 3vw, 2.2rem); border-bottom: 1px solid var(--line-2); }
.shop__title { font-size: var(--s-3); color: #fff; }
.shop__list { display: grid; }
.shop__row {
  display: grid; grid-template-columns: minmax(0, 1fr) auto auto;
  align-items: center; gap: clamp(1rem, 3vw, 2.5rem);
  padding-block: clamp(1.1rem, 2.6vw, 1.7rem); border-top: 1px solid var(--line);
}
.shop__row:last-child { border-bottom: 1px solid var(--line); }
.shop__rel { min-width: 0; }
.shop__name { font-family: var(--font-display); font-size: var(--s-2); text-transform: uppercase; color: #fff; line-height: 1; }
.shop__artist { font-size: var(--s--1); letter-spacing: 0.14em; text-transform: uppercase; color: var(--ink-soft); margin-top: 0.5rem; }
.shop__price { font-family: var(--font-display); font-size: var(--s-1); color: #fff; white-space: nowrap; }
.shop__price .cur { font-size: 0.6em; vertical-align: super; color: var(--muted); margin-right: 1px; }
.shop__note { margin-top: clamp(1.4rem, 3vw, 2.2rem); font-size: var(--s--2); letter-spacing: 0.16em; text-transform: uppercase; color: var(--muted); }

/* Slim mailing-list bar inside the skyline block (mailing list preserved) */
.skyline__list { margin-top: clamp(2rem, 5vw, 3.4rem); padding-top: clamp(1.6rem, 4vw, 2.6rem); border-top: 1px solid var(--line); display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 1.2rem; }
.skyline__list h3 { font-family: var(--font-display); font-size: var(--s-2); text-transform: uppercase; color: #fff; }
.skyline__list .signup__form { margin-top: 0; justify-content: flex-end; }

@media (max-width: 720px) {
  .shop__row { grid-template-columns: 1fr auto; row-gap: 0.9rem; }
  .shop__price { grid-column: 1; }
  .shop__buy { grid-column: 2; grid-row: 1 / 3; align-self: center; }
  .skyline__list { flex-direction: column; align-items: flex-start; }
  .skyline__list .signup__form { justify-content: flex-start; }
}

/* ---------- Homepage footer, sitting over the skyline ---------- */
.site-foot { position: relative; z-index: 1; padding-block: clamp(2rem, 5vw, 3.4rem) clamp(1.6rem, 4vw, 2.6rem); }
/* Soft divider instead of a hard 1px rule. The hairline is at full strength
   through the middle and dissolves to nothing before it reaches either edge,
   so the footer melts out of the page rather than being cut off from it.
   Same treatment on the interior-page .footer so the seam reads identically
   everywhere. Change the two mid-stop colours to make the line heavier. */
.site-foot::before,
.footer::before {
  content: ""; position: absolute; top: 0; left: 0; right: 0; height: 1px;
  pointer-events: none;
  background: linear-gradient(90deg,
    transparent 0%,
    rgba(255, 255, 255, 0.10) 28%,
    rgba(255, 255, 255, 0.10) 72%,
    transparent 100%);
}
.site-foot__inner { display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: 1.2rem 2rem; }
.site-foot__word { justify-self: start; }
.site-foot__word img { width: clamp(96px, 11vw, 140px); height: auto; }
.site-foot__links { display: flex; flex-wrap: wrap; justify-content: center; gap: 0.8rem 1.5rem; justify-self: center; }
.site-foot__links a { font-size: var(--s--2); font-weight: 600; letter-spacing: 0.2em; text-transform: uppercase; color: var(--ink-soft); transition: color 0.3s; }
.site-foot__links a:hover { color: #fff; }
.site-foot__copy { justify-self: end; font-size: var(--s--2); letter-spacing: 0.12em; color: var(--faint); text-align: right; }

@media (max-width: 820px) {
  .site-foot__inner { grid-template-columns: 1fr; justify-items: center; text-align: center; gap: 1.4rem; }
  .site-foot__word, .site-foot__copy { justify-self: center; text-align: center; }
}

/* =============================================================
   STUDIO SERVICES STYLING
   Pretoria facility, recording rates, project combos & VIP hospitality
   ============================================================= */
.studio-facility {
  display: grid;
  grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr);
  gap: clamp(1.8rem, 4vw, 3.5rem);
  padding: clamp(1.6rem, 3.5vw, 2.6rem);
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: 2px;
  align-items: center;
  margin-bottom: clamp(2rem, 5vw, 4rem);
}
.studio-facility__meta {
  display: flex;
  flex-direction: column;
  gap: 0.8rem;
}
.studio-facility__address {
  font-family: var(--font-ui);
  font-size: var(--s-0);
  color: var(--ink);
  line-height: 1.6;
}
.studio-facility__tags {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  margin-top: 0.4rem;
}
.tag-pill {
  font-size: var(--s--2);
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--ink-soft);
  background: var(--surface-2);
  border: 1px solid var(--line);
  padding: 0.35rem 0.75rem;
  border-radius: 2px;
}
.tag-pill--accent {
  border-color: rgba(var(--accent-rgb), 0.4);
  color: #fff;
  background: rgba(var(--accent-rgb), 0.12);
}

/* Studio rates: cards fit the screen without a scrolling table. */
.rate-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; }
.rate-card { display: flex; flex-direction: column; align-items: flex-start; gap: 10px; min-width: 0; padding: 24px; background: var(--surface); border: 1px solid var(--line); border-radius: 4px; }
.rate-card h3 { font-size: clamp(1.4rem, 2vw, 1.8rem); line-height: 1.1; }
.rate-card > p { font-size: .95rem; color: var(--ink-soft); line-height: 1.6; }
.rate-card .rate-card__price { font-size: 2rem; font-weight: 700; color: var(--ink); line-height: 1.3; }
.rate-card__price span { font-size: .9rem; font-weight: 400; color: var(--ink-soft); }
.rate-card .rate-card__schedule { font-size: .85rem; color: var(--accent-soft); }
.rate-card .btn { margin-top: auto; width: 100%; }
@media (max-width: 620px) { .rate-grid { grid-template-columns: minmax(0, 1fr); } .rate-card { padding: 20px; } }

    /* Project Combo & Bundle cards */
.bundle-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 320px), 1fr));
  gap: clamp(1.2rem, 3vw, 2.2rem);
  margin-bottom: clamp(2.4rem, 5vw, 4.5rem);
}
.bundle-card {
  position: relative;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  padding: clamp(1.6rem, 3.5vw, 2.4rem);
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: 2px;
  transition: border-color 0.3s var(--ease), transform 0.3s var(--ease);
}
.bundle-card:hover {
  border-color: var(--line-2);
  transform: translateY(-3px);
}
.bundle-card--featured {
  border-color: rgba(var(--accent-rgb), 0.45);
  background: linear-gradient(180deg, rgba(var(--accent-rgb), 0.05) 0%, var(--surface) 35%);
}
.bundle-card--featured:hover {
  border-color: var(--accent);
}
.bundle-card__header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.6rem;
  margin-bottom: 0.75rem;
  flex-wrap: wrap;
}
.bundle-badge {
  font-size: var(--s--2);
  font-weight: 600;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--accent-soft);
  background: rgba(var(--accent-rgb), 0.15);
  border: 1px solid rgba(var(--accent-rgb), 0.35);
  padding: 0.25rem 0.65rem;
  border-radius: 2px;
  white-space: nowrap;
}
.bundle-card__kicker {
  font-size: var(--s--2);
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--muted);
  margin-bottom: 0;
}
.bundle-card__title {
  font-family: var(--font-display);
  font-size: var(--s-3);
  line-height: 0.95;
  color: #fff;
  margin-bottom: 0.8rem;
}
.bundle-card__pricing {
  display: flex;
  align-items: baseline;
  gap: 0.8rem;
  margin-block: 1rem 1.4rem;
}
.bundle-card__rate {
  font-family: var(--font-display);
  font-size: clamp(2rem, 3vw, 2.8rem);
  color: #fff;
  line-height: 1;
}
.bundle-card__savings {
  font-size: var(--s--2);
  color: var(--accent-soft);
  letter-spacing: 0.1em;
  text-transform: uppercase;
}
.bundle-card__features {
  list-style: none;
  padding: 0;
  margin: 0 0 1.8rem 0;
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
  font-size: var(--s-0);
  color: var(--ink-soft);
}
.bundle-card__features li {
  display: flex;
  align-items: flex-start;
  gap: 0.65rem;
  line-height: 1.5;
}
.bundle-card__features li::before {
  content: "—";
  color: var(--muted);
}
.bundle-card--featured .bundle-card__features li::before {
  color: var(--accent);
}

/* VIP Hospitality Cards */
.vip-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 300px), 1fr));
  gap: clamp(1.2rem, 3vw, 2rem);
  margin-bottom: clamp(2.4rem, 5vw, 4.5rem);
}
.vip-card {
  padding: clamp(1.5rem, 3vw, 2.2rem);
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: 2px;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}
.vip-card:hover {
  border-color: var(--line-2);
}
.vip-card__top {
  margin-bottom: 1.2rem;
}
.vip-card__title {
  font-family: var(--font-display);
  font-size: var(--s-2);
  color: #fff;
  margin-bottom: 0.3rem;
}
.vip-card__time {
  font-size: var(--s--2);
  color: var(--muted);
  letter-spacing: 0.16em;
  text-transform: uppercase;
}
.vip-card__price {
  font-family: var(--font-display);
  font-size: var(--s-3);
  color: #fff;
  margin-block: 0.8rem 1rem;
}
.vip-card__inclusions {
  padding-top: 1rem;
  border-top: 1px solid var(--line);
  font-size: var(--s--1);
  color: var(--ink-soft);
  line-height: 1.6;
}
.vip-card__inclusions b {
  display: block;
  font-family: var(--font-ui);
  font-size: var(--s--2);
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--muted);
  margin-bottom: 0.4rem;
}

@media (max-width: 820px) {
  .studio-facility { grid-template-columns: 1fr; }
}

/* =============================================================
   STORE & MERCHANDISE
   ============================================================= */
.store-notice {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: clamp(1.2rem, 3vw, 2.5rem);
  align-items: center;
  padding: clamp(1.4rem, 3vw, 2.2rem);
  background: var(--surface);
  border: 1px solid var(--line);
  border-left: 3px solid var(--accent);
  border-radius: 2px;
  margin-bottom: clamp(2rem, 4vw, 3.5rem);
  width: 100%;
  max-width: 100%;
  box-sizing: border-box;
}
.store-notice__title {
  font-family: var(--font-display);
  font-size: var(--s-1);
  letter-spacing: 0.05em;
  color: #fff;
  margin-bottom: 0.35rem;
}
.store-notice__text {
  font-size: var(--s--1);
  color: var(--ink-soft);
  max-width: 65ch;
  line-height: 1.6;
}
.store-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(min(100%, 280px), 1fr));
  gap: clamp(1.2rem, 2.8vw, 2.2rem);
  margin-bottom: clamp(3rem, 6vw, 5rem);
  width: 100%;
  max-width: 100%;
  box-sizing: border-box;
}
.store-card {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: 2px;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  transition: border-color 0.3s var(--ease), transform 0.3s var(--ease);
  width: 100%;
  max-width: 100%;
  min-width: 0;
  box-sizing: border-box;
}
.store-card:hover {
  border-color: var(--line-2);
  transform: translateY(-3px);
}
.store-card.is-hidden {
  display: none !important;
}
.store-card__media {
  position: relative;
  aspect-ratio: 1 / 1.06;
  background: radial-gradient(circle at 50% 45%, #181818 0%, #0d0d0d 75%, #060606 100%);
  border-bottom: 1px solid var(--line);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0.65rem;
  overflow: hidden;
  width: 100%;
  max-width: 100%;
  box-sizing: border-box;
}
.store-card__media picture {
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
}
.store-card__media img,
.store-card__img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  display: block;
  transition: transform 0.35s var(--ease), opacity 0.3s ease;
  user-select: none;
  -webkit-user-drag: none;
}
.store-card:hover .store-card__media img {
  transform: scale(1.02);
}
.store-card__media svg {
  width: 75%;
  height: 75%;
  max-width: 220px;
  max-height: 220px;
  filter: drop-shadow(0 12px 28px rgba(0, 0, 0, 0.65));
  transition: transform 0.4s var(--ease);
}
.store-card:hover .store-card__media svg {
  transform: scale(1.04);
}

/* Hide top overlay frame writings over photos per user request */
.store-card__tag,
.store-card__status {
  display: none !important;
}

/* Two-photo Front / Back Carousel & Horizontal Scroller */
.store-card__media.has-carousel {
  padding: 0;
  cursor: grab;
}
.store-card__media.has-carousel:active {
  cursor: grabbing;
}
.store-card__scroller {
  display: flex;
  width: 100%;
  height: 100%;
  overflow-x: auto;
  overflow-y: hidden;
  scroll-snap-type: x mandatory;
  scroll-behavior: smooth;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
  -ms-overflow-style: none;
}
.store-card__scroller::-webkit-scrollbar {
  display: none;
}
.store-card__slide {
  flex: 0 0 100%;
  width: 100%;
  height: 100%;
  scroll-snap-align: start;
  scroll-snap-stop: always;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0.65rem;
  box-sizing: border-box;
  position: relative;
}
.store-card__slide img,
.store-card__slide .store-card__img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  display: block;
  user-select: none;
  -webkit-user-drag: none;
  transition: transform 0.35s var(--ease);
}
.store-card:hover .store-card__slide img {
  transform: scale(1.02);
}

/* Front / Back View Switcher Pill */
.store-card__views {
  position: absolute;
  bottom: 0.7rem;
  left: 50%;
  transform: translateX(-50%);
  display: flex;
  gap: 0.25rem;
  background: rgba(12, 12, 12, 0.85);
  border: 1px solid rgba(255, 255, 255, 0.18);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  padding: 3px;
  border-radius: 100px;
  z-index: 5;
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.6);
}
.view-pill {
  font-size: 0.62rem;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--muted);
  background: transparent;
  border: none;
  padding: 0.22rem 0.65rem;
  border-radius: 100px;
  cursor: pointer;
  transition: all 0.18s ease;
  line-height: 1.1;
  font-family: var(--font-ui);
}
.view-pill:hover {
  color: #fff;
}
.view-pill.is-active {
  background: #fff;
  color: #000;
}

/* Nav arrows on sides */
.photo-nav-btn {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  width: 32px;
  height: 32px;
  border-radius: 50%;
  background: rgba(14, 14, 14, 0.82);
  border: 1px solid rgba(255, 255, 255, 0.25);
  color: #fff;
  display: grid;
  place-items: center;
  font-size: 1.2rem;
  line-height: 1;
  cursor: pointer;
  z-index: 6;
  opacity: 0;
  transition: opacity 0.2s ease, background 0.2s ease, transform 0.15s ease;
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
}
.store-card:hover .photo-nav-btn {
  opacity: 1;
}
.photo-nav-btn:hover {
  background: #fff;
  color: #000;
  transform: translateY(-50%) scale(1.08);
}
.photo-nav-btn--prev { left: 0.6rem; }
.photo-nav-btn--next { right: 0.6rem; }

@media (max-width: 768px) {
  .photo-nav-btn {
    opacity: 0.8;
    width: 44px;
    height: 44px;
    font-size: 1rem;
  }
  .view-pill { min-width: 60px; min-height: 44px; }
}
.store-card__body {
  padding: clamp(1.2rem, 2.5vw, 1.6rem);
  display: flex;
  flex-direction: column;
  flex: 1;
  gap: 0.5rem;
  width: 100%;
  max-width: 100%;
  box-sizing: border-box;
}
.store-card__category {
  font-size: var(--s--2);
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--muted);
}
.store-card__title {
  font-family: var(--font-display);
  font-size: var(--s-1);
  color: #fff;
  line-height: 1.1;
  margin-block: 0.15rem 0.3rem;
  word-break: break-word;
}
.store-card__desc {
  font-size: var(--s--1);
  color: var(--ink-soft);
  line-height: 1.55;
  margin-bottom: 0.6rem;
  flex: 1;
}
.store-card__specs {
  display: flex;
  flex-wrap: wrap;
  gap: 0.4rem;
  margin-bottom: 1.1rem;
}
.store-spec {
  font-size: var(--s--2);
  color: var(--muted);
  background: var(--bg-2);
  border: 1px solid var(--line);
  padding: 0.2rem 0.55rem;
  border-radius: 2px;
}
.store-card__foot {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.8rem;
  padding-top: 1rem;
  border-top: 1px solid var(--line);
  margin-top: auto;
  width: 100%;
  box-sizing: border-box;
}
.store-card__price-wrap {
  display: flex;
  flex-direction: column;
}
.store-card__price-label {
  font-size: var(--s--2);
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--muted);
}
.store-card__price-val {
  font-family: var(--font-display);
  font-size: var(--s-1);
  color: #fff;
  letter-spacing: 0.04em;
  font-weight: 700;
}
.store-card__price-val--tba {
  color: var(--accent-soft);
  font-size: var(--s--1);
  font-family: var(--font-ui);
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}
.store-registry-card {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: 2px;
  padding: clamp(1.1rem, 3.5vw, 2.5rem);
  width: 100%;
  max-width: 100%;
  box-sizing: border-box;
}
.store-policies {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: clamp(1.2rem, 3vw, 2rem);
  margin-bottom: clamp(3rem, 6vw, 5rem);
  width: 100%;
  max-width: 100%;
  box-sizing: border-box;
}
.store-policy {
  padding: clamp(1.4rem, 3vw, 2rem);
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: 2px;
  width: 100%;
  max-width: 100%;
  box-sizing: border-box;
}
.store-policy__title {
  font-family: var(--font-display);
  font-size: var(--s-1);
  color: #fff;
  margin-bottom: 0.5rem;
}
.store-policy__text {
  font-size: var(--s--1);
  color: var(--ink-soft);
  line-height: 1.6;
}
@media (max-width: 820px) {
  .store-notice {
    grid-template-columns: 1fr;
    gap: 1.2rem;
  }
}

/* Small screens: retain the same typography and composition while giving
   text, form fields and touch controls room to work. */
main [id] { scroll-margin-top: calc(var(--nav-h) + 1rem); }
.studio-facility > *, .bundle-card, .vip-card, .store-notice > *,
.sec > *, .signup__form-wrap { min-width: 0; }
.info-block a, .form-status, .footer__blurb { overflow-wrap: anywhere; }
.footer__legal { flex-wrap: wrap; }
.bundle-card__pricing { flex-wrap: wrap; }
.photo-nav-btn:focus-visible, .store-card:focus-within .photo-nav-btn { opacity: 1; }

@media (max-width: 620px) {
  /* Headings enhanced by shutter-text keep each word together. Allow a very
     long word to wrap between glyphs when it exceeds the available line. */
  .shutter__word { max-width: 100%; white-space: normal; }
  .page-head__title, .t-xl, .coming__title { font-size: clamp(2rem, 9vw, 3.2rem); }
  .sec__title { font-size: clamp(1.7rem, 7.5vw, 2.5rem); }
  .kicker { letter-spacing: 0.2em; }
  .kicker::before { flex-shrink: 0; }
  .crumb { flex-wrap: wrap; }
  .btn, .filter { min-height: 44px; max-width: 100%; text-align: center; }
  .btn svg, .arrow-link svg, .social svg { flex-shrink: 0; }
  .filter { padding-inline: 0.85rem; letter-spacing: 0.12em; }
  .nav__toggle, .icon-btn, .hero-social a { width: 44px; height: 44px; }
  .drawer { padding-bottom: max(2rem, env(safe-area-inset-bottom)); overscroll-behavior: contain; }
  .drawer__nav { width: 100%; }
  .drawer__link { max-width: 100%; overflow-wrap: anywhere; }
  .drawer__social a { width: 44px; height: 44px; align-items: center; justify-content: center; }
  /* 16px avoids Safari zooming the page whenever a field receives focus. */
  .field input, .field textarea, .field select, .signup__form input { font-size: 16px; min-width: 0; }
  .signup__form input { max-width: 100%; }
  .signup__form > .btn { width: 100%; }
  .signup__form .field { text-align: left; }
  .store-card__foot { flex-wrap: wrap; }
  .store-card__foot .btn { flex: 1 1 auto; }
  .bundle-card, .vip-card, .studio-facility { padding: 1.2rem; }
  .footer__nav a, .site-foot__links a { min-height: 44px; display: inline-flex; align-items: center; }
  .footer__nav { gap: 0.25rem; }
  .site-foot__links { gap: 0.25rem 1.2rem; }
  .footer__legal { gap: 0.75rem 1rem; }
}

/* Touch devices cannot expose controls through hover. These stay visible
   on tablets as well as phones, with a comfortable finger-sized target. */
@media (hover: none), (pointer: coarse) {
  .artist__socials, .rel__art .play-btn { opacity: 1; transform: none; }
  .artist__socials a { width: 44px; height: 44px; }
  .photo-nav-btn { opacity: 0.85; width: 44px; height: 44px; }
  .view-pill { min-width: 60px; min-height: 44px; }
  .store-card__scroller { scroll-behavior: auto; }
}

/* ---------- Modals & Purchase Dialogs ---------- */
.modal {
  position: fixed; inset: 0; z-index: 9999;
  display: none; place-items: center; padding: 1.2rem;
}
.modal.is-open { display: grid; }
.modal__scrim {
  position: absolute; inset: 0; background: rgba(0, 0, 0, 0.84);
  backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px);
}
.modal__panel {
  position: relative; z-index: 1;
  background: var(--surface); border: 1px solid var(--line-2);
  border-radius: 4px; width: min(100%, 520px); max-height: 90vh;
  overflow-y: auto; box-shadow: 0 24px 60px rgba(0, 0, 0, 0.85);
  display: flex; flex-direction: column;
}
.modal__head {
  display: flex; align-items: center; justify-content: space-between;
  padding: 1.25rem 1.5rem; border-bottom: 1px solid var(--line);
}
.modal__head h3 {
  font-family: var(--font-display); font-size: var(--s-1);
  letter-spacing: 0.04em; text-transform: uppercase; color: #fff;
}
.close-x {
  background: none; border: none; color: var(--muted);
  font-size: 1.6rem; line-height: 1; cursor: pointer;
  padding: 0.2rem 0.5rem; transition: color 0.2s;
}
.close-x:hover { color: #fff; }
.modal__body { padding: 1.5rem; flex: 1; }
.modal__foot {
  display: flex; align-items: center; justify-content: flex-end;
  gap: 0.8rem; padding: 1.1rem 1.5rem; border-top: 1px solid var(--line);
  background: var(--bg-2);
}

.field { display: flex; flex-direction: column; gap: 0.4rem; margin-bottom: 1.1rem; text-align: left; }
.field label {
  font-size: var(--s--2); font-weight: 600; letter-spacing: 0.18em;
  text-transform: uppercase; color: var(--muted);
}
.field input, .field select, .field textarea {
  width: 100%; background: var(--bg-2); border: 1px solid var(--line);
  border-radius: 2px; padding: 0.75rem 0.9rem; color: #fff;
  font-family: var(--font-ui); font-size: var(--s--1);
  transition: border-color 0.2s, background 0.2s;
  box-sizing: border-box;
}
.field input:focus, .field select:focus, .field textarea:focus {
  outline: none; border-color: #fff; background: var(--surface-2);
}
.field .hint { font-size: var(--s--2); color: var(--muted); line-height: 1.4; margin-top: 0.25rem; }

/* Music player preview bar */
.preview-bar {
  display: flex; align-items: center; justify-content: space-between;
  gap: 0.75rem; padding: 0.75rem 1rem; border-radius: 3px;
  background: rgba(255, 255, 255, 0.04); border: 1px solid var(--line);
  margin-bottom: 1.25rem; font-size: var(--s--1);
}
.preview-bar .track-info { display: flex; flex-direction: column; }
.preview-bar .track-title { font-weight: 600; color: #fff; }
.preview-bar .track-sub { font-size: var(--s--2); color: var(--muted); }

/* Google Pay button styling */
.gpay-btn {
  width: 100%; min-height: 48px; background: #000; color: #fff;
  border: 1px solid rgba(255, 255, 255, 0.25); border-radius: 4px;
  display: inline-flex; align-items: center; justify-content: center; gap: 0.6rem;
  font-family: var(--font-ui); font-weight: 600; font-size: 0.95rem;
  cursor: pointer; transition: background 0.2s, border-color 0.2s, transform 0.2s;
}
.gpay-btn:hover { background: #1a1a1a; border-color: #fff; transform: translateY(-1px); }
.gpay-btn svg { height: 20px; width: auto; }



/* Studio service PDF builder */
.request-grid { display: grid; grid-template-columns: minmax(0, 1.65fr) minmax(0, 1fr); gap: clamp(24px, 5vw, 80px); }
.request-grid > * { min-width: 0; }
.request-grid .form-note { color: var(--ink-soft); font-size: .78rem; line-height: 1.7; }
.request-fieldset { border: 0; padding: 0; margin: 0 0 28px; min-width: 0; }
.request-fieldset legend { font-weight: 700; font-size: 1.1rem; margin-bottom: 14px; }
.request-services { margin-top: 18px; border-top: 1px solid var(--line); }
.request-service { display: grid; grid-template-columns: minmax(0, 1fr) 88px; align-items: center; gap: 16px; padding: 16px 0; border-bottom: 1px solid var(--line); }
.request-service__choice { display: flex; align-items: center; gap: 12px; min-height: 44px; cursor: pointer; }
.request-service__choice input { width: 22px; height: 22px; flex: 0 0 22px; accent-color: var(--accent); }
.request-service__choice strong { display: block; font-size: .92rem; line-height: 1.4; }
.request-service__choice span span { display: block; color: var(--muted); font-size: .8rem; margin-top: 4px; }
.request-service__quantity { display: grid; gap: 5px; color: var(--muted); font-size: .72rem; }
.request-service__quantity input { box-sizing: border-box; width: 100%; min-height: 44px; border: 1px solid var(--line); border-radius: 4px; background: transparent; color: var(--ink); font: inherit; font-size: 1rem; padding: 8px; }
.request-service__quantity input:disabled { opacity: .35; }
.request-total { display: flex; align-items: center; justify-content: space-between; gap: 16px; border-top: 1px solid var(--line); padding: 20px 0; }
.request-total span { font-weight: 700; }
.request-total small { display: block; color: var(--muted); font-size: .72rem; font-weight: 400; margin-top: 6px; }
.request-total output { font-size: clamp(1.2rem, 3vw, 1.65rem); font-weight: 700; white-space: nowrap; }
.request-result { border: 1px solid var(--line); border-radius: 6px; padding: 20px; margin-top: 20px; }
.request-result[hidden], .request-services[hidden], #request-share[hidden] { display: none; }
.request-actions { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 16px; }
.request-result h3 { font-size: 1.1rem; }
#request-filename { overflow-wrap: anywhere; }
.request-steps { padding-left: 24px; margin: 24px 0; }
.request-steps li { padding: 0 0 24px 8px; }
.request-steps strong, .request-steps span { display: block; }
.request-steps span { color: var(--muted); font-size: .9rem; line-height: 1.7; margin-top: 7px; }
.request-form :focus-visible { outline: 2px solid var(--accent); outline-offset: 4px; }
@media (max-width: 760px) {
  .request-grid { grid-template-columns: minmax(0, 1fr); }
  .request-guide { border-top: 1px solid var(--line); padding-top: 28px; }
  .request-total { flex-wrap: wrap; }
  .request-actions { flex-direction: column; }
  .request-service { gap: 10px; grid-template-columns: minmax(0, 1fr) 72px; }
}
/* A shorter, readable path through each public page. */
.page-actions, .home-quick { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 24px; }
.home-quick { justify-content: center; padding-inline: var(--gutter); }
.home-paths { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; }
.home-path { display: flex; flex-direction: column; gap: 12px; min-width: 0; padding: 24px; border: 1px solid var(--line-2); background: rgba(0, 0, 0, .5); border-radius: 4px; }
.home-path h3 { font-size: 1.7rem; }
.home-path p { color: var(--ink-soft); font-size: .95rem; line-height: 1.6; }
.home-path > span { margin-top: auto; color: var(--ink); font-size: .9rem; font-weight: 600; }
.home-path:hover { border-color: var(--ink); }
.home-path:focus-visible { outline: 2px solid var(--accent); outline-offset: 4px; }
.content-disclosure { border: 1px solid var(--line-2); border-radius: 4px; margin-top: 16px; background: var(--bg-2); }
.content-disclosure > summary { padding: 16px 20px; cursor: pointer; min-height: 52px; font-size: 1rem; line-height: 1.5; font-weight: 600; color: var(--ink); }
.content-disclosure > summary::marker, .package-details > summary::marker, .product-details > summary::marker { color: var(--accent-soft); }
summary:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; }
.disclosure-hint { display: block; margin-top: 4px; font-size: .85rem; font-weight: 400; color: var(--ink-soft); }
.disclosure-body { padding: 0 20px 20px; min-width: 0; }
.disclosure-body.vip-grid { margin-bottom: 0; padding-top: 8px; }
.booking-form { max-width: 760px; }
.package-copy { color: var(--ink-soft); font-size: .95rem; line-height: 1.6; margin-block: 16px 20px; }
.bundle-card__title { font-size: clamp(1.6rem, 2.5vw, 2rem); line-height: 1.1; }
.bundle-grid { margin-bottom: 20px; }
.bundle-card > .btn { margin-top: auto; }
.package-details { margin-bottom: 20px; font-size: .9rem; }
.package-details summary, .product-details summary { cursor: pointer; min-height: 44px; padding-block: 12px; color: var(--ink-soft); line-height: 1.5; }
.package-details p { color: var(--ink-soft); line-height: 1.6; }
.product-details { margin-block: 4px 12px; font-size: .9rem; }
.product-details .store-card__desc { margin-top: 10px; }
.product-details .store-card__specs { margin-bottom: 12px; }
.store-card__category, .store-card__status { display: none; }
.form-note { color: var(--ink-soft); font-size: .82rem; line-height: 1.6; }
.field label { color: var(--ink-soft); font-size: .85rem; letter-spacing: .06em; text-transform: none; }
.footer__nav a { min-width: 0; overflow-wrap: anywhere; }
.request-optional { margin: 0; }
.request-optional > summary { font-size: .9rem; }
.request-guide .body-text { font-size: .95rem; }
@media (min-width: 821px) { .contact-primary { grid-template-columns: minmax(0, 1fr) minmax(0, 1.35fr); } }
@media (max-width: 820px) {
  .request-grid { grid-template-columns: minmax(0, 1fr); }
  .request-guide { border-top: 1px solid var(--line); padding-top: 24px; }
  .home-paths { grid-template-columns: minmax(0, 1fr); }
  .hero--home { min-height: 0; padding-block: 32px; }
  .hero-home { flex: none; gap: 24px; }
  .hero-logo { width: clamp(200px, 58vw, 270px); }
  .home-quick { margin-top: 24px; }
  .hero-label { font-size: .72rem; letter-spacing: .16em; padding-top: 24px; padding-inline: var(--gutter); }
}
@media (max-width: 620px) {
  .band { padding-block: 32px; }
  .band--flush-top { padding-top: 0; }
  .page-head { padding-block: 28px 24px; }
  .page-head .lede { font-size: 1rem; line-height: 1.65; }
  .page-head__title { font-size: clamp(2rem, 8.5vw, 3rem); line-height: 1.05; }
  .sec { flex-direction: column; align-items: flex-start; gap: 10px; margin-bottom: 20px; }
  .sec__title { font-size: 1.9rem; line-height: 1.1; }
  .sec__aside { font-size: .9rem; }
  .btn { min-height: 46px; font-size: .82rem; letter-spacing: .06em; padding: .85rem 1rem; }
  .page-actions > .btn { flex: 1 1 160px; }
  .filter { font-size: .85rem; letter-spacing: .03em; }
  .body-text, .step__text, .note__text { font-size: 1rem; line-height: 1.65; }
  .field input, .field textarea, .field select { padding: 12px; }
  .field label { letter-spacing: .02em; }
  .signup { padding: 24px 18px; }
  .signup__mark { display: none; }
  .signup .lede { font-size: 1rem; }
  .signup__form { margin-top: 20px; }
  .signup__fine { font-size: .8rem; }
  .split__media:has(.shader-bg) { display: none; }
  .releases, .artists { grid-template-columns: minmax(0, 1fr); }
  .rel__foot { flex-wrap: wrap; gap: 12px; }
  .rel__actions .btn { min-width: 120px; }
  .request-services { margin-top: 12px; }
  .request-service { padding-block: 12px; }
  .request-service__quantity { font-size: .8rem; }
  .request-form .form-note { font-size: .85rem; }
  .request-result { padding: 16px; }
  .footer__nav { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 16px; }
  .footer__nav a, .site-foot__links a { font-size: .85rem; letter-spacing: .03em; }
  .footer__blurb { font-size: .9rem; }
  .store-notice { padding: 20px; margin-bottom: 20px; }
  .store-card__foot .btn { flex: 0 1 auto; }
  .store-card__price-label { display: none; }
  .drawer { padding-top: max(80px, env(safe-area-inset-top)); gap: 20px; }
  .drawer__nav { gap: 10px; }
  .drawer__link { font-size: clamp(1.4rem, 5vw, 2rem); min-height: 44px; display: flex; align-items: center; }
}

/* The release announcement and a small way back to the website. */
.is-music-coming { background: #000; }
.music-back {
  position: absolute; z-index: 1;
  top: max(16px, env(safe-area-inset-top)); left: max(18px, env(safe-area-inset-left));
  display: inline-flex; align-items: center; gap: 10px; min-height: 44px;
  padding: 8px 14px; border: 1px solid var(--line-2); border-radius: 24px;
  color: var(--ink-soft); font-size: 14px;
}
.music-back:hover { color: var(--ink); border-color: var(--ink); }
.music-coming {
  min-height: 100svh; display: flex; flex-direction: column; align-items: center;
  justify-content: center; gap: clamp(20px, 4vh, 36px);
  padding: calc(76px + env(safe-area-inset-top)) max(18px, env(safe-area-inset-right)) max(24px, env(safe-area-inset-bottom)) max(18px, env(safe-area-inset-left));
}
.music-coming__record {
  width: min(78vw, 400px, 50svh); aspect-ratio: 1; display: grid; place-items: center;
  padding: 0; border-radius: 50%; flex-shrink: 0; -webkit-tap-highlight-color: transparent;
}
.music-coming__record[hidden] { display: none; }
.music-coming__mark { height: 74%; width: auto; max-width: 74%; animation: record-turn 20s linear infinite; }
.music-coming__record.is-paused .music-coming__mark { animation-play-state: paused; }
.music-coming__record:focus-visible { outline: 1px dashed var(--ink-soft); outline-offset: 8px; }
.music-coming__still { width: min(50vw, 260px); height: auto; }
.music-coming__title, .music-coming__date { margin: 0; width: min(100%, 600px); }
.music-coming__title img { width: 100%; height: auto; opacity: .72; }
.music-coming__date { width: min(92%, 540px); }
.music-coming__date img { width: 100%; height: auto; }
@media (max-height: 480px) {
  .music-coming { gap: 16px; padding-top: calc(76px + env(safe-area-inset-top)); padding-bottom: max(16px, env(safe-area-inset-bottom)); }
  .music-coming__record { width: min(60vw, 40svh); }
  .music-coming__title { width: min(100%, 450px, 90svh); }
  .music-coming__date { width: min(92%, 420px, 85svh); }
}
@keyframes record-turn { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) { .music-coming__mark { animation: none !important; } }
.update-note { max-width: 760px; padding: clamp(24px, 6vw, 64px); background: var(--surface); border: 1px solid var(--line); }
.update-note h2 { margin-top: 1rem; }
.update-note__date { font-size: var(--s-2); color: var(--ink-soft); margin: .5rem 0 2rem; }