/* Veluxeia Music: record centre-label world. Static CSS, no framework. */

:root {
  /* fields: the page is paper, never black */
  --lavender: #DCCFFF;
  --blue: #3D5BFF;
  --pink-2: #FFB3D0;
  --ivory: #F5F6F8;
  --ivory-2: #E8EAEF;
  --pink: #FFD9E8;
  --sky: #D6E8FF;
  --cobalt: #2E46E6;
  /* inks */
  --ink: #1A1C6E;
  --ink-soft: #4A3F7A;
  --ink-mist: #D5DBFF;
  /* type: five steps, one family */
  --step-small: clamp(1rem, 0.96rem + 0.1vw, 1.0625rem);
  --step-body: clamp(1.0625rem, 1rem + 0.25vw, 1.1875rem);
  --step-lead: clamp(1.25rem, 1.1rem + 0.7vw, 1.625rem);
  --step-head: clamp(2.5rem, 1.2rem + 5vw, 5.5rem);
  --step-display: clamp(4.5rem, 19vw, 22rem);
  /* space */
  --m: clamp(16px, 2.4vw, 32px);
  --gap-section: clamp(64px, 7vw, 112px);
  --bar-h: 64px;
  /* motion (Emil Kowalski curves) */
  --ease-out: cubic-bezier(0.23, 1, 0.32, 1);
  --ease-in-out: cubic-bezier(0.77, 0, 0.175, 1);
  --ease-drawer: cubic-bezier(0.32, 0.72, 0, 1);
  /* record parts */
  --vinyl: var(--blue);
  --groove: rgba(255, 248, 239, 0.22);
  --hole: var(--lavender);
  color-scheme: light;
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; -webkit-tap-highlight-color: transparent; scroll-behavior: smooth; scroll-padding-top: var(--bar-h); }
button, a, [role="button"] { touch-action: manipulation; }
button { -webkit-user-select: none; user-select: none; }
body {
  margin: 0;
  background: var(--ivory);
  color: var(--ink);
  font-family: "Chivo", system-ui, sans-serif;
  font-size: var(--step-body);
  line-height: 1.45;
  letter-spacing: -0.01em;
  font-feature-settings: "tnum" 0;
  overflow-x: clip;
  scrollbar-color: var(--ink) var(--ivory-2);
}
img, svg { display: block; max-width: 100%; }
img { height: auto; }
a { color: inherit; text-decoration-thickness: 2px; text-underline-offset: 0.18em; }
button { font: inherit; color: inherit; background: none; border: 0; padding: 0; cursor: pointer; }
h1, h2, h3, p, ol, ul, dl, dd, blockquote, figure { margin: 0; padding: 0; }
ol, ul { list-style: none; }
::selection { background: var(--lavender); color: var(--ink); }
:focus-visible { outline: 3px solid var(--ink); outline-offset: 3px; }
[data-field="cobalt"] :focus-visible, .btn--ink:focus-visible { outline-color: var(--lavender); }
.vh { position: absolute !important; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.skip { position: fixed; left: var(--m); top: -80px; z-index: 100; background: var(--ink); color: var(--lavender); padding: 12px 16px; font-weight: 700; text-decoration: none; transition: transform 200ms var(--ease-out); }
.skip:focus { transform: translateY(96px); }

/* ---------- shared type ---------- */
.h2 { font-size: var(--step-head); font-weight: 900; text-transform: uppercase; letter-spacing: -0.05em; line-height: 0.88; text-wrap: balance; }
.h3 { font-size: var(--step-lead); font-weight: 900; text-transform: uppercase; letter-spacing: -0.03em; line-height: 1; }
.lead { font-size: var(--step-lead); line-height: 1.3; max-width: 34ch; text-wrap: pretty; }

/* ---------- buttons: square corners, one shape everywhere ---------- */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 10px;
  min-height: 48px; padding: 12px 22px;
  font-weight: 700; font-size: var(--step-body); letter-spacing: -0.01em;
  text-decoration: none; border-radius: 0;
  transition: transform 160ms var(--ease-out), background-color 200ms ease, color 200ms ease;
}
.btn:active { transform: scale(0.97); }
.btn--ink { background: var(--ink); color: var(--lavender); }
.btn--lavender { background: var(--lavender); color: var(--ink); }
.btn--line { background: var(--ivory); color: var(--ink); }
@media (hover: hover) and (pointer: fine) {
  .btn--ink:hover { background: var(--cobalt); color: var(--ivory); }
  .btn--lavender:hover { background: var(--ivory); }
  .btn--line:hover { background: var(--lavender); }
}
.chip {
  display: inline-flex; align-items: center; min-height: 44px; padding: 10px 16px;
  background: var(--ivory); color: var(--ink); font-weight: 700; font-size: var(--step-small);
  text-decoration: none; transition: transform 160ms var(--ease-out), background-color 200ms ease;
}
.chip:active { transform: scale(0.97); }
@media (hover: hover) and (pointer: fine) { .chip:hover { background: var(--lavender); } }
.links { display: flex; flex-wrap: wrap; gap: 8px; }
.textlink { font-weight: 700; text-decoration: underline; text-decoration-thickness: 2px; text-underline-offset: 0.2em; min-height: 44px; transition: text-underline-offset 200ms var(--ease-out); }
@media (hover: hover) and (pointer: fine) { .textlink:hover { text-underline-offset: 0.35em; } }
.sq { width: 52px; height: 52px; display: grid; place-items: center; background: var(--ink); color: var(--lavender); transition: transform 160ms var(--ease-out), opacity 200ms ease; }
.sq svg { width: 22px; height: 22px; fill: none; stroke: currentColor; stroke-width: 2.5; stroke-linecap: square; }
.sq:active { transform: scale(0.94); }
.sq:disabled { opacity: 0.35; cursor: default; }

/* ---------- bar ---------- */
.bar {
  position: sticky; top: 0; z-index: 50; height: var(--bar-h);
  display: flex; align-items: center; gap: clamp(16px, 3vw, 40px);
  padding-inline: var(--m);
  background: var(--bar-bg, var(--lavender)); color: var(--bar-ink, var(--ink));
  transition: background-color 360ms ease, color 360ms ease;
}
/* the lockup is 6.62 times as wide as it is tall */
.bar__mark { --logo-h: clamp(24px, 2.1vw, 30px); display: block; flex: none; width: calc(var(--logo-h) * 6.62); color: inherit; }
.bar__mark svg { width: 100%; height: auto; }
/* the logo's record turns on its own centre; script.js spins it in, turns it with the scroll and brings it to rest upright */
.logo__disc { transform-box: fill-box; transform-origin: center; }
.logo__disc.is-resting { transition: transform 900ms var(--ease-out); }
/* the smallest phones: the logo keeps its size, the menu still holds Releases */
@media (max-width: 374px) { .bar__cta { display: none !important; } }
.bar__nav { margin-left: auto; display: flex; gap: clamp(16px, 2.2vw, 32px); font-weight: 700; font-size: var(--step-small); }
.bar__nav a { position: relative; text-decoration: none; padding: 10px 0; }
.bar__nav a::after { content: ""; position: absolute; left: 0; right: 0; bottom: 6px; height: 2px; background: currentColor; transform: scaleX(0); transform-origin: left; transition: transform 240ms var(--ease-out); }
.bar__nav a:focus-visible::after, .bar__nav a[aria-current="true"]::after { transform: scaleX(1); }
@media (hover: hover) and (pointer: fine) { .bar__nav a:hover::after { transform: scaleX(1); } }
.bar__cta { min-height: 40px; padding: 8px 16px; font-size: var(--step-small); }
.bar__menu { display: none; margin-left: auto; min-height: 44px; padding: 8px 14px; font-weight: 700; background: var(--ink); color: var(--lavender); }
.bar[data-ink="ivory"] .bar__cta, .bar[data-ink="ivory"] .bar__menu { background: var(--ivory); color: var(--ink); }

.menu {
  position: fixed; inset: 0; z-index: 60; background: var(--lavender); color: var(--ink);
  padding: calc(var(--bar-h) + 24px) var(--m) var(--m);
  display: flex; flex-direction: column; justify-content: space-between;
  clip-path: inset(0 0 0 0); transition: clip-path 320ms var(--ease-drawer);
}
.menu.is-closing { transition-duration: 200ms; clip-path: inset(0 0 100% 0); }
.menu[hidden] { display: none; }
@starting-style { .menu:not([hidden]) { clip-path: inset(0 0 100% 0); } }
.menu nav { display: flex; flex-direction: column; gap: 8px; }
.menu nav a { font-size: var(--step-head); font-weight: 900; text-transform: uppercase; letter-spacing: -0.05em; line-height: 0.95; text-decoration: none; }
.menu__close { position: absolute; top: 10px; right: var(--m); min-height: 44px; padding: 8px 14px; font-weight: 700; background: var(--ink); color: var(--lavender); }

/* ---------- records drawn by script.js ---------- */
.record { position: absolute; inset: 0; display: block; pointer-events: none; }
.record svg { width: 100%; height: 100%; overflow: visible; }
.record svg { animation: spin 1.8s linear infinite; animation-play-state: paused; }
.record text { font-family: "Chivo", system-ui, sans-serif; }
@keyframes spin { to { transform: rotate(360deg); } }
.sleeve { position: relative; width: 100%; aspect-ratio: 1; object-fit: cover; background: var(--tint, var(--ivory-2)); }

/* ---------- hero: split headline + sticky reel ---------- */
.hero { position: relative; height: 100svh; background: var(--lavender); margin-top: calc(var(--bar-h) * -1); }
.hero__stage {
  --f: min(24vw, 38svh);
  --gap: 24px;
  position: sticky; top: 0; height: 100svh; overflow: hidden;
  padding: var(--bar-h) var(--m) var(--m);
}
.reel { position: absolute; left: 50%; top: 50%; width: calc(var(--f) * 1.46); height: var(--f); transform: translate(-50%, -50%); overflow: hidden; }
.reel__strip { display: flex; flex-direction: column; gap: var(--gap); padding-top: 0; transition: transform 820ms var(--ease-in-out); }
.reel__frame { position: relative; width: var(--f); height: var(--f); flex: none; visibility: hidden; transition: visibility 0s linear 820ms; }
.reel__frame.is-on, html:not(.js) .reel__frame:first-child { visibility: visible; transition-delay: 0s; }
.reel__frame .sleeve { z-index: 1; }
.reel__frame .record { z-index: 0; transition: transform 900ms var(--ease-out); }
.reel__frame.is-on .record { transform: translateX(44%); }
.reel__frame.is-on .record svg { animation-play-state: running; }
.reel__caps { position: absolute; left: calc(50% - var(--f) * 0.73); top: calc(50% + var(--f) / 2 + 24px); width: var(--f); font-size: var(--step-small); }
.reel__caps li { display: none; }
.reel__caps li.is-on { display: block; }
.reel__caps b { font-weight: 900; text-transform: uppercase; letter-spacing: -0.02em; }
.hero__foot { position: absolute; left: var(--m); bottom: var(--m); width: min(21vw, 320px); display: grid; gap: 20px; justify-items: start; }
.hero__p { font-size: var(--step-body); max-width: 34ch; }
html:not(.js) .reel__caps li:first-child { display: block; }

/* ---------- records rail ---------- */
.records { background: var(--ivory); padding-block: clamp(64px, 7vw, 112px) clamp(64px, 8vw, 120px); }
.records__top { display: grid; grid-template-columns: 1fr auto; align-items: end; gap: 24px var(--m); padding-inline: var(--m); margin-bottom: clamp(40px, 5vw, 72px); }
.records__top .h2 { grid-column: 1 / -1; }
.rail__ctl { display: flex; gap: 8px; }
.rail {
  display: grid; grid-auto-flow: column; grid-auto-columns: clamp(250px, 31vw, 470px); gap: clamp(20px, 2.4vw, 36px);
  overflow-x: auto; overscroll-behavior-x: contain; scroll-padding-inline: var(--m);
  padding: 8px var(--m) 24px; scrollbar-width: none; cursor: grab;
}
.rail.is-dragging { cursor: grabbing; scroll-snap-type: none; }
.rail.is-dragging * { pointer-events: none; }
.rail__item { scroll-snap-align: start; --vinyl: var(--blue); --hole: var(--ivory); }
.sleeve-card { display: block; width: 100%; text-align: left; }
.sleeve-card__stage { position: relative; display: block; width: 76%; aspect-ratio: 1; }
.sleeve-card .sleeve { z-index: 1; transition: transform 240ms var(--ease-out); }
.sleeve-card .record { z-index: 0; transition: transform 340ms var(--ease-out); }
.sleeve-card:active .sleeve { transform: scale(0.98); }
.sleeve-card:focus-visible .record, .sleeve-card.is-out .record { transform: translateX(30%); }
.sleeve-card:focus-visible .record svg, .sleeve-card.is-out .record svg { animation-play-state: running; }
@media (hover: hover) and (pointer: fine) {
  .sleeve-card:hover .record { transform: translateX(30%); }
  .sleeve-card:hover .record svg { animation-play-state: running; }
  .sleeve-card:hover .sleeve { transform: translateX(-3%); }
}
.rail__title { margin-top: 20px; font-size: var(--step-lead); font-weight: 900; text-transform: uppercase; letter-spacing: -0.03em; line-height: 1; }
.rail__meta { margin-top: 8px; font-size: var(--step-small); color: var(--ink-soft); max-width: 32ch; }


/* ---------- catalogue: sticky picture, active list ---------- */
.catalogue {
  background: var(--pink); padding: var(--gap-section) var(--m);
  display: grid; grid-template-columns: repeat(12, 1fr); column-gap: var(--m);
}
.catalogue__pic { grid-column: 1 / 6; position: sticky; top: calc(var(--bar-h) + 5vh); align-self: start; aspect-ratio: 1; width: min(100%, calc(100svh - var(--bar-h) - 12vh)); }
.catalogue__pic img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; transition: opacity 300ms ease, filter 300ms ease; }
.catalogue__pic img[style*="opacity: 0"] { filter: blur(6px); }
.catalogue__pic img[data-cat-pic-b] { opacity: 0; }
.catalogue__list { grid-column: 7 / 13; }
.catalogue__list .lead { margin-top: 20px; }
.filter { display: flex; flex-wrap: wrap; gap: 8px; }
.filter__b { min-height: 44px; padding: 10px 16px; background: var(--ivory); font-weight: 700; transition: transform 160ms var(--ease-out), background-color 200ms ease, color 200ms ease; }
.filter__b span { font-weight: 400; margin-left: 4px; }
.filter__b:active { transform: scale(0.97); }
.filter__b[aria-pressed="true"] { background: var(--ink); color: var(--lavender); }
@media (hover: hover) and (pointer: fine) { .filter__b[aria-pressed="false"]:hover { background: var(--lavender); } }
.row[hidden] { display: none; }
.row__head {
  width: 100%; min-height: 60px; padding-block: 14px; text-align: left;
  display: grid; grid-template-columns: 56px 1fr; column-gap: 16px; align-items: baseline;
  color: var(--ink-soft); transition: color 200ms ease;
}
.row__title { font-size: var(--step-lead); font-weight: 700; letter-spacing: -0.02em; line-height: 1.1; transition: transform 240ms var(--ease-out); }
.row__mini { grid-column: 1; grid-row: 1 / 3; align-self: center; width: 56px; aspect-ratio: 1; object-fit: cover; background: var(--tint); transition: transform 240ms var(--ease-out); }
.row.is-active .row__mini { transform: scale(1.08) rotate(-3deg); }
.row__mini { cursor: alias; }
.row__by { grid-column: 2; font-size: var(--step-small); }
.rows__more { margin-top: 24px; }
.row.is-active .row__head, .row__head[aria-expanded="true"] { color: var(--ink); }
.row.is-active .row__title, .row__head[aria-expanded="true"] .row__title { font-weight: 900; transform: translateX(12px); }
.row__body[hidden] { display: none; }
.row__body { padding: 4px 0 28px 12px; display: grid; gap: 12px; justify-items: start; max-width: 52ch; }
.row__thumb { display: none; width: 120px; }

/* ---------- roster: pinned heading left, covers pass on the right ---------- */
.roster { position: relative; background: var(--sky); padding-bottom: var(--gap-section); display: grid; grid-template-columns: repeat(12, 1fr); column-gap: var(--m); }
.roster__main { grid-column: 1 / -1; display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--m); }
.roster__pin { grid-column: 1 / 8; grid-row: 1; position: sticky; top: 0; height: 100svh; display: grid; align-content: center; gap: 5svh; padding-left: var(--m); align-self: start; }
.roster__h { font-size: clamp(4.5rem, min(14vw, 24svh), 16rem); font-weight: 900; text-transform: uppercase; letter-spacing: -0.05em; line-height: 0.82; color: var(--ink); }
.roster__list { grid-column: 8 / 13; grid-row: 1; display: grid; grid-template-columns: 1fr 1fr; gap: 48px var(--m); align-content: start; padding: 22svh var(--m) 18svh 0; }
.portrait { width: 100%; }
.portrait--r { margin-top: 26svh; }
.portrait__img { display: block; aspect-ratio: 4 / 5; overflow: hidden; background: var(--tint); }
.portrait__img img { width: 100%; height: 100%; object-fit: cover; transition: transform 400ms var(--ease-out); }
@media (hover: hover) and (pointer: fine) { .portrait__img:hover img { transform: scale(1.04); } }
.portrait__name { margin-top: 16px; font-size: var(--step-lead); font-weight: 900; text-transform: uppercase; letter-spacing: -0.03em; line-height: 1; }
.portrait__role { margin-top: 6px; font-size: var(--step-small); font-weight: 700; }
.portrait__line { margin-top: 8px; font-size: var(--step-small); max-width: 34ch; }
.roster__index { grid-column: 1 / -1; padding-inline: var(--m); }
/* the record under the heading carries the label of the artist in view */
/* the record and a caption for the artist in view fill the space under the heading */
.roster__deck { display: flex; align-items: center; gap: clamp(24px, 3vw, 56px); }
.roster__now { display: grid; gap: 8px; max-width: 22ch; color: var(--ink); }
.roster__k { font-size: var(--step-small); font-weight: 700; text-transform: uppercase; letter-spacing: 0.08em; color: var(--ink-soft); white-space: nowrap; }
.roster__k b { color: var(--blue); }
.roster__now strong { font-size: var(--step-head); font-weight: 900; text-transform: uppercase; letter-spacing: -0.04em; line-height: 0.9; }
.roster__now span:not(.roster__k) { font-size: var(--step-body); font-weight: 700; }
.roster__now em { font-style: normal; font-size: var(--step-small); }
.roster__now > * { transition: opacity 240ms var(--ease-out), transform 240ms var(--ease-out); }
.roster__now.is-swap > * { opacity: 0; transform: translateY(8px); }
.roster__disc { position: relative; flex: none; width: min(24vw, 34svh); aspect-ratio: 1; --vinyl: var(--ink); --hole: var(--sky); --groove: rgba(255, 255, 255, 0.14); }
.roster__disc svg { animation: spin 7s linear infinite; }
.names { margin-top: 24px; display: flex; flex-wrap: wrap; gap: 6px 28px; font-size: var(--step-lead); font-weight: 700; letter-spacing: -0.02em; }
.names a { position: relative; text-decoration: none; }
.names a::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0.02em; height: 0.28em; background: var(--pink-2); z-index: -1; transform: scaleX(0); transform-origin: left; transition: transform 240ms var(--ease-out); }
.names a:focus-visible::after { transform: scaleX(1); }
@media (hover: hover) and (pointer: fine) { .names a:hover::after { transform: scaleX(1); } }
.names li { position: relative; z-index: 0; }

.play {
  position: absolute; left: 24px; bottom: 24px; display: inline-flex; align-items: center; gap: 12px;
  min-height: 56px; padding: 12px 22px 12px 18px; background: var(--blue); color: var(--ivory); font-weight: 900; text-transform: uppercase; letter-spacing: -0.02em;
  transition: transform 160ms var(--ease-out), background-color 200ms ease;
}
.play:active { transform: scale(0.97); }
.play__icon { width: 0; height: 0; border-left: 16px solid currentColor; border-top: 10px solid transparent; border-bottom: 10px solid transparent; }
.more { position: relative; z-index: 2; background: var(--ivory); padding: clamp(64px, 8vw, 120px) 0 var(--gap-section); }
.more .h3 { padding-inline: var(--m); }
.tapes { margin-top: 28px; display: grid; grid-auto-flow: column; grid-auto-columns: clamp(240px, 24vw, 360px); gap: 20px; overflow-x: auto; overscroll-behavior-x: contain; scroll-padding-inline: var(--m); padding: 12px var(--m) 20px; scrollbar-width: none; cursor: grab; }
.rail::-webkit-scrollbar, .tapes::-webkit-scrollbar { display: none; }
.tapes.is-dragging { cursor: grabbing; }
.tapes.is-dragging * { pointer-events: none; }
.tapes li { scroll-snap-align: start; }
.tape { display: grid; gap: 6px; width: 100%; text-align: left; }
.tape__pic { position: relative; display: block; overflow: hidden; border-radius: var(--r-img); transition: transform 480ms var(--ease-out); }
.tape img { display: block; width: 100%; aspect-ratio: 16 / 9; object-fit: cover; background: var(--ivory-2); transition: transform 700ms var(--ease-out); }
.tape__play { position: absolute; left: 14px; bottom: 14px; width: 48px; height: 48px; border-radius: 50%; background: var(--blue); opacity: 0; transform: scale(0.5); transition: opacity 240ms ease, transform 360ms var(--ease-out); }
.tape__play::before { content: ""; position: absolute; left: 19px; top: 15px; border-style: solid; border-width: 9px 0 9px 14px; border-color: transparent transparent transparent var(--ivory); }
.tape:active .tape__pic { transform: scale(0.97); }
.tape:focus-visible .tape__pic, .tape.is-lit .tape__pic { transform: translateY(-8px) rotate(-1.2deg); }
.tape:focus-visible img, .tape.is-lit img { transform: scale(1.08); }
.tape:focus-visible .tape__play, .tape.is-lit .tape__play { opacity: 1; transform: none; }
@media (hover: hover) and (pointer: fine) { .tape:hover .tape__pic { transform: translateY(-8px) rotate(-1.2deg); } .tape:hover img { transform: scale(1.08); } .tape:hover .tape__play { opacity: 1; transform: none; } }
.tape__t { margin-top: 6px; font-weight: 900; text-transform: uppercase; letter-spacing: -0.02em; }
.tape__m { font-size: var(--step-small); color: var(--ink-soft); }

/* ---------- services: one scene, stepping statements ---------- */
.services { position: relative; background: var(--cobalt); color: var(--ivory); --vinyl: var(--lavender); --hole: var(--cobalt); --groove: rgba(19, 34, 122, 0.25); }
.services__scene { position: relative; min-height: 100svh; display: grid; grid-template-columns: repeat(12, 1fr); column-gap: var(--m); align-items: center; padding: calc(var(--bar-h) + 48px) var(--m) 64px; }
.services__disc { grid-column: 7 / 13; grid-row: 1; justify-self: center; position: relative; width: min(42vw, 72svh); aspect-ratio: 1; }
.services__disc .record svg { animation-duration: 14s; animation-play-state: running; }
.steps { grid-column: 1 / 7; grid-row: 1; position: relative; z-index: 2; display: grid; gap: 14px; }
.step__h { font-size: var(--step-lead); font-weight: 900; text-transform: uppercase; letter-spacing: -0.03em; line-height: 1; color: var(--ink-mist); transition: color 240ms ease, transform 320ms var(--ease-out); }
.step.is-on .step__h { color: var(--ivory); transform: translateX(14px); }
.step:first-child .step__h { font-size: var(--step-head); line-height: 0.88; letter-spacing: -0.05em; margin-bottom: 12px; }
.step.is-on:first-child .step__h { transform: none; }
.step__p { margin: 10px 0 6px 14px; max-width: 40ch; font-size: var(--step-body); color: var(--ivory); }
.js .step:not(.is-on) .step__p { display: none; }
.pairs { grid-column: 7 / 13; grid-row: 1; position: relative; align-self: stretch; pointer-events: none; }
.pair img { position: absolute; width: clamp(110px, 11vw, 180px); opacity: 0; transform: translateY(24px); transition: opacity 400ms ease, transform 600ms var(--ease-out); }
.pair a:first-child img { left: -4%; top: 14%; }
.pair a:last-child img { right: -2%; bottom: 12%; width: clamp(130px, 13vw, 210px); }
.pair.is-on img { opacity: 1; transform: none; }
.pair img { box-shadow: 0 28px 56px rgba(10, 14, 70, 0.45); }
.pair a:first-child img { rotate: -7deg; }
.pair a:last-child img { rotate: 6deg; }
/* the four services read as a list: 01 to 04 in pills, the one on screen in pink */
.steps { counter-reset: svc; }
.step + .step:not(:last-child) .step__b::before { counter-increment: svc; content: counter(svc, decimal-leading-zero); display: inline-block; margin-right: 0.6em; padding: 0.32em 0.62em; border-radius: 999px; font-size: 0.5em; line-height: 1; letter-spacing: 0.04em; vertical-align: 0.35em; background: rgba(220, 207, 255, 0.16); color: var(--lavender); transition: background 240ms ease, color 240ms ease; }
.step.is-on .step__b::before { background: var(--pink-2); color: var(--ink); }
@media (max-width: 760px) { .step + .step:not(:last-child) .step__b::before { font-size: 0.72em; vertical-align: 0.12em; } }
.services__acts { display: flex; flex-wrap: wrap; gap: 12px; }


/* ---------- record sheet (dialog) ---------- */
.sheet {
  overflow: auto; overscroll-behavior: contain;
  width: min(1120px, calc(100vw - 2 * var(--m))); max-height: calc(100svh - 2 * var(--m)); padding: 0; border: 0;
  background: var(--tint, var(--ivory)); color: var(--deep, var(--ink));
  --vinyl: var(--blue); --hole: var(--tint, var(--ivory));
  opacity: 1; transform: none; transition: opacity 240ms var(--ease-out), transform 240ms var(--ease-out), overlay 240ms allow-discrete, display 240ms allow-discrete;
}
.sheet[data-licensed] { --vinyl: var(--ink); }
.sheet { --groove: rgba(255, 255, 255, 0.32); transition-property: opacity, transform, overlay, display, background-color; }
.sheet__disc, .sheet__txt { transition: opacity 260ms var(--ease-out), transform 420ms var(--ease-out); }
.sheet.is-leaving .sheet__disc, .sheet.is-leaving .sheet__txt { opacity: 0; transform: translateX(calc(var(--dir, 1) * -40px)); transition-duration: 160ms; }
.sheet.is-entering .sheet__disc, .sheet.is-entering .sheet__txt { opacity: 0; transform: translateX(calc(var(--dir, 1) * 40px)); transition: none; }
.sheet.is-leaving .sheet__disc .record { transition-duration: 160ms; transition-delay: 0ms; }
.sheet:not([open]) { transition-duration: 160ms; }
.sheet::backdrop { background: rgba(220, 207, 255, 0.88); transition: opacity 240ms ease; }
@starting-style { .sheet[open] { opacity: 0; transform: translateY(20px); } .sheet[open]::backdrop { opacity: 0; } }
.sheet__in { display: grid; grid-template-columns: 1.05fr 1fr; gap: clamp(24px, 4vw, 64px); padding: clamp(24px, 4vw, 56px); align-items: center; }
.sheet__x { position: absolute; top: 12px; right: 12px; min-height: 44px; padding: 8px 14px; font-weight: 700; background: var(--ink); color: var(--lavender); z-index: 3; transition: transform 160ms var(--ease-out); }
.sheet__x:active { transform: scale(0.97); }
.sheet__disc { position: relative; width: 74%; aspect-ratio: 1; }
.sheet__disc .sleeve { z-index: 1; }
.sheet__disc .record { z-index: 0; transition: transform 900ms var(--ease-out) 120ms; }
.sheet.is-out .sheet__disc .record { transform: translateX(34%); }
.sheet.is-out .sheet__disc .record svg { animation-play-state: running; }
.sheet__h { font-size: var(--step-head); font-weight: 900; text-transform: uppercase; letter-spacing: -0.05em; line-height: 0.88; overflow-wrap: anywhere; }
.sheet__by { margin-top: 14px; font-size: var(--step-lead); font-weight: 700; line-height: 1.2; }
.sheet__tracks { margin-top: 16px; counter-reset: t; display: grid; gap: 2px; font-weight: 700; }
.sheet__tracks:empty { display: none; }
.sheet__tracks li { counter-increment: t; }
.sheet__tracks li::before { content: counter(t) ". "; font-weight: 400; }
.sheet .links { margin-top: 20px; }


/* ---------- entrances (content stays visible without script) ---------- */
.js [data-reveal] > * { opacity: 0; transform: translateY(24px); transition: opacity 700ms var(--ease-out), transform 700ms var(--ease-out); transition-delay: calc(var(--i, 0) * 75ms); }
.js [data-reveal].in > * { opacity: 1; transform: none; }
.js .rail__item[data-reveal] > *, .js .portrait[data-reveal] > * { transition-delay: calc(var(--i, 0) * 75ms + var(--d, 0ms)); }
.js .portrait[data-reveal] .portrait__img { opacity: 1; transform: none; clip-path: inset(0 0 100% 0); transition: clip-path 1000ms var(--ease-in-out); }
.js .portrait[data-reveal].in .portrait__img { clip-path: inset(0 0 0 0); }
.js .reel { animation: fadein 900ms var(--ease-out) 180ms both; }
.js .hero__foot { animation: fadein 700ms var(--ease-out) 320ms both; }
@keyframes rise { from { opacity: 0; transform: translateY(28px); } to { opacity: 1; transform: none; } }
@keyframes fadein { from { opacity: 0; } to { opacity: 1; } }

/* ---------- tablet ---------- */
@media (max-width: 1080px) {
  .bar__nav { display: none; }
  .bar__menu { display: inline-flex; align-items: center; }
  .catalogue__pic { grid-column: 1 / 6; }
  .catalogue__list { grid-column: 6 / 13; }
}

/* ---------- phone: its own composition ---------- */
@media (max-width: 760px) {
  :root { --bar-h: 56px; --step-head: 2.25rem; --step-lead: 1.375rem; --step-display: 20vw; }
  .hero__stage { --gap: 40px; }
  .reel { transform: none; }

  .records__top { grid-template-columns: 1fr; }
  .rail__ctl { display: none; }
  .rail { grid-auto-columns: 54vw; gap: 20px; cursor: auto; }
  .rail .rail__title { font-size: 1.125rem; }


  .catalogue { display: block; }
  .catalogue__pic { display: none; }
  .row__thumb { display: block; }
  .row__head { grid-template-columns: 48px 1fr; }
  .row__mini { width: 48px; grid-row: 1 / 3; }
  .row__title, .row__by { grid-column: 2; }
  /* the heading says enough; each filter group is one swipeable line; the active title stays in line with its artists */
  .catalogue__list .lead { display: none; }
  .filter { flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; margin-inline: calc(var(--m) * -1); padding: 4px var(--m); }
  .filter::-webkit-scrollbar { display: none; }
  .filter__b { flex: none; }
  .row.is-active .row__title, .row__head[aria-expanded="true"] .row__title { transform: none; }

  .roster, .roster__main { display: block; }
  .roster__pin { position: relative; height: auto; padding: 72px var(--m) 32px; }
  .roster__h { font-size: var(--step-display); }
  /* artists: one swipeable row of portraits, name and role only */
  .roster__list { display: grid; grid-template-columns: none; grid-auto-flow: column; grid-auto-columns: 62vw; gap: 16px; overflow-x: auto; overscroll-behavior-x: contain; scroll-snap-type: x mandatory; scroll-padding-inline: var(--m); padding: 0 var(--m) 56px; scrollbar-width: none; }
  .roster__list::-webkit-scrollbar { display: none; }
  .portrait { scroll-snap-align: start; }
  .portrait--r { margin: 0; }
  .portrait__line { display: none; }
  .names { font-size: var(--step-body); gap: 2px 18px; }

  .play { left: 12px; bottom: 12px; min-height: 48px; padding: 8px 16px 8px 14px; }
  .tapes { grid-auto-columns: 58vw; gap: 14px; }
  .tape__t { font-size: 0.9375rem; }
  .tape__play { width: 40px; height: 40px; left: 10px; bottom: 10px; }
  .tape__play::before { left: 16px; top: 12px; border-width: 8px 0 8px 12px; }

  .services__scene { grid-template-columns: 1fr; align-content: start; min-height: 0; padding-top: 64px; padding-bottom: 48px; }
  /* the record sits on top so it never moves as the statements change */
  .services__disc { grid-column: auto; grid-row: 1; justify-self: end; width: 58vw; margin: 0 -16vw 16px 0; }
  .steps { gap: 10px; align-content: start; }
  .step__h { font-size: 1.125rem; }
  .steps { grid-column: 1; grid-row: 2; }
  .step:first-child .step__p { margin-left: 0; }
  /* the closing statement and its buttons stay put; only the short statements change */
  .js .step:not(.is-on) .step__close { display: grid; }
  .pairs { display: none; }



  .sheet__in { grid-template-columns: 1fr; }
  .sheet__disc { width: 62%; }
}

/* ---------- reduced motion: keep content, drop travel ---------- */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation-duration: 1ms !important; animation-iteration-count: 1 !important; }
  .record svg { animation: none !important; }
  .reel__strip, .reel__frame .record, .sleeve-card .record, .sheet__disc .record { transition-duration: 1ms !important; }
  .js [data-reveal] > * { transform: none; transition: opacity 300ms ease; }
  .js .portrait[data-reveal] .portrait__img { clip-path: none; transform: none; transition: none; }
  .js .reel, .js .hero__foot { animation: none; }
  .pair img, .step__h { transition: opacity 200ms ease; transform: none !important; }
}

/* ---------- quick listen links (hero caption, rail) ---------- */
.q { display: flex; flex-wrap: wrap; gap: 4px 16px; margin-top: 8px; font-size: var(--step-small); font-weight: 700; }
.q a { position: relative; text-decoration: underline; text-decoration-thickness: 2px; text-underline-offset: 0.22em; min-height: 32px; display: inline-flex; align-items: center; transition: text-underline-offset 200ms var(--ease-out); }
@media (hover: hover) and (pointer: fine) { .q a:hover { text-underline-offset: 0.36em; } }
.reel__caps li.is-on { display: grid; gap: 2px; }

/* ---------- ticker: the brand line from veluxeia.com, now carrying the records ---------- */
.ticker { position: relative; z-index: 2; overflow: hidden; background: var(--cobalt); color: var(--ivory); padding-block: 18px; }
.ticker__track { display: flex; align-items: center; gap: 28px; width: max-content; animation: ticker 48s linear infinite; }
.tick { font-size: var(--step-lead); font-weight: 900; text-transform: uppercase; letter-spacing: -0.03em; white-space: nowrap; }
.tick__v { width: 24px; height: 24px; flex: none; color: var(--lavender); }
/* each title rides on its own spinning mini record; every other title is set in outline */
.tick { align-items: center; gap: 14px; }
.tick__img { width: 1.9em; height: 1.9em; flex: none; border-radius: 50%; object-fit: cover; box-shadow: 0 0 0 3px var(--ink), 0 0 0 5px var(--lavender); -webkit-mask: radial-gradient(circle, transparent 9%, #000 10%); mask: radial-gradient(circle, transparent 9%, #000 10%); animation: spin 6s linear infinite; }
.tick:nth-of-type(even) { color: transparent; -webkit-text-stroke: 1.5px var(--ivory); }
.ticker::before, .ticker::after { content: ""; position: absolute; left: 0; right: 0; height: 4px; background: repeating-linear-gradient(90deg, var(--lavender) 0 18px, transparent 18px 30px); opacity: 0.55; }
.ticker::before { top: 6px; }
.ticker::after { bottom: 6px; }
@keyframes ticker { to { transform: translateX(-50%); } }
@media (hover: hover) and (pointer: fine) { .ticker:hover .ticker__track { animation-play-state: paused; } }

/* ---------- catalogue tools ---------- */
.search { position: relative; display: block; margin-top: 32px; max-width: 520px; }
.search svg { position: absolute; left: 16px; top: 50%; width: 20px; height: 20px; transform: translateY(-50%); fill: none; stroke: var(--ink); stroke-width: 2.4; pointer-events: none; }
.search input { width: 100%; min-height: 56px; padding: 12px 16px 12px 48px; border: 0; border-radius: 0; background: var(--ivory); color: var(--ink); font: inherit; font-size: max(16px, var(--step-body)); font-weight: 700; caret-color: var(--blue); transition: background-color 200ms ease; }
.search input::placeholder { color: var(--ink-soft); font-weight: 400; opacity: 1; }
.search input:focus { outline: 3px solid var(--ink); outline-offset: 0; background: #fff; }
.search input::-webkit-search-cancel-button { cursor: pointer; }
.filter { margin-block: 16px 0; }
.count { margin: 24px 0 8px; font-size: var(--step-small); font-weight: 700; color: var(--ink-soft); }
.empty { display: grid; gap: 16px; justify-items: start; padding: 24px 0; }
.empty[hidden] { display: none; }
.empty p { font-size: var(--step-lead); line-height: 1.3; max-width: 30ch; }

/* ---------- record sheet extras ---------- */
.sheet__nav { position: absolute; left: 12px; top: 12px; z-index: 3; display: flex; gap: 6px; }
.sheet__nav .sq { width: 44px; height: 44px; background: var(--ink); color: var(--lavender); }
.sheet__acts { margin-top: 20px; display: flex; flex-wrap: wrap; align-items: center; gap: 12px 20px; }
.sheet__acts [hidden] { display: none; }
.sheet__note { font-size: var(--step-small); font-weight: 700; }
.sheet__in { padding-top: clamp(72px, 6vw, 80px); }

/* ---------- services statements are also buttons ---------- */
.step__b { font: inherit; color: inherit; text-transform: inherit; letter-spacing: inherit; line-height: inherit; text-align: left; min-height: 32px; }
@media (hover: hover) and (pointer: fine) { .step:not(.is-on) .step__b:hover { color: var(--ivory); } }

@media (max-width: 1080px) { .bar__cta { display: inline-flex; margin-left: auto; } .bar__menu { margin-left: 8px; } }
@media (max-width: 760px) {
  .ticker { padding-block: 12px; }
  .tick { font-size: 1.125rem; }
  .bar__cta { min-height: 44px; padding: 8px 12px; }
  .sheet__in { padding-top: 72px; }
  .search { max-width: none; }
}
@media (prefers-reduced-motion: reduce) { .ticker__track, .tick__img { animation: none; } }

/* final statement in the services scene: mission + actions */
.step__close { display: grid; gap: 18px; margin-top: 14px; }
.step__close .statement { font-size: var(--step-lead); font-weight: 700; letter-spacing: -0.02em; line-height: 1.3; max-width: 30ch; text-wrap: balance; }
.step__close .statement span { display: block; margin-top: 8px; font-size: var(--step-small); font-weight: 400; color: var(--ink-mist); }

/* ---------- every song picture is a link to the song's own page ---------- */
.sleeve-card, .reel__link, .catalogue__pic, .wall a, .pair a, .row__thumb, .tape, .tick, .screen__main, .screen__pick, .page__card, [data-sheet-cover-link] { text-decoration: none; color: inherit; }
.reel__link, [data-sheet-cover-link] { position: relative; z-index: 1; display: block; }
.wall a { display: block; }
.wall a img { transition: transform 300ms var(--ease-out); }
.pair.is-on a { pointer-events: auto; }
.rail__title a, .portrait__name a { text-decoration: none; }
.tick { display: inline-flex; }
@media (hover: hover) and (pointer: fine) {
  .rail__title a:hover, .portrait__name a:hover { text-decoration: underline; text-decoration-thickness: 3px; text-underline-offset: 0.15em; }
  .wall a:hover img { transform: scale(1.06); }
  .catalogue__pic:hover img { transform: scale(1.01); }
  .tick:hover { color: var(--lavender); }
}

/* ---------- footer: the email up front on an ink card, then the links ---------- */
.foot { background: var(--lavender); color: var(--ink); padding: clamp(40px, 5vw, 72px) var(--m) 0; }
.foot__cta { position: relative; overflow: hidden; display: flex; align-items: center; min-height: clamp(200px, 20vw, 280px); padding: clamp(28px, 4vw, 56px); padding-right: clamp(200px, 28vw, 420px); border-radius: 28px; color: var(--lavender); background: radial-gradient(70% 140% at 100% 50%, rgba(61, 91, 255, 0.55), transparent 70%), var(--ink); }
.foot__say { position: relative; z-index: 1; display: grid; gap: 12px; min-width: 0; }
.foot__k { font-size: var(--step-small); font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; color: var(--pink-2); }
.foot__mail { justify-self: start; display: inline-flex; align-items: center; gap: 0.35em; font-size: clamp(1.35rem, 4.6vw, 3.75rem); font-weight: 900; letter-spacing: -0.035em; line-height: 1.05; color: var(--ivory); text-decoration: none; }
.foot__mail span { text-decoration: underline; text-decoration-color: rgba(255, 179, 208, 0.55); text-decoration-thickness: 0.06em; text-underline-offset: 0.16em; transition: text-decoration-color 200ms ease; }
.foot__sub { max-width: 46ch; font-size: var(--step-body); color: var(--ink-mist); }
.foot__arrow { flex: none; width: 0.78em; height: 0.78em; transition: transform 240ms var(--ease-out); }
.foot__arrow circle { fill: var(--pink-2); }
.foot__arrow path { fill: none; stroke: var(--ink); stroke-width: 4; stroke-linecap: round; stroke-linejoin: round; }
.foot__disc { position: absolute; right: -90px; top: 50%; width: clamp(240px, 26vw, 380px); aspect-ratio: 1; translate: 0 -50%; pointer-events: none; --vinyl: var(--blue); --groove: rgba(255, 255, 255, 0.28); --hole: var(--ink); }
.foot__disc svg { display: block; width: 100%; height: 100%; animation: spin 24s linear infinite; }
.foot__disc text { font-family: "Chivo", system-ui, sans-serif; }
@media (hover: hover) and (pointer: fine) { .foot__mail:hover span { text-decoration-color: var(--pink-2); } .foot__mail:hover .foot__arrow { transform: translate(3px, -3px); } }
.foot__grid { display: grid; grid-template-columns: 2fr repeat(3, 1fr); gap: 32px var(--m); padding: clamp(40px, 5vw, 64px) 0; }
.foot__mark { display: block; align-self: start; width: clamp(180px, 20vw, 300px); color: var(--ink); }
.foot__mark svg { width: 100%; height: auto; }
.foot__col { display: grid; align-content: start; gap: 4px; }
.foot__h { margin-bottom: 8px; font-size: var(--step-small); font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; color: var(--ink-soft); }
.foot__col a { justify-self: start; min-height: 32px; display: inline-flex; align-items: center; font-weight: 700; text-decoration: none; }
@media (hover: hover) and (pointer: fine) { .foot__col a:hover, .foot__up:hover { text-decoration: underline; text-decoration-thickness: 2px; text-underline-offset: 0.2em; } }
.foot__bar { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: 12px 24px; padding: 20px 0 max(20px, env(safe-area-inset-bottom)); border-top: 1px solid rgba(26, 28, 110, 0.16); font-size: var(--step-small); }
.foot__up { display: inline-flex; align-items: center; gap: 8px; min-height: 32px; font-weight: 700; text-decoration: none; }
.foot__up svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 2.4; stroke-linecap: round; stroke-linejoin: round; }
@media (max-width: 760px) {
  .foot__cta { display: block; min-height: 0; padding: 28px 22px 150px; }
  .foot__disc { right: -60px; top: auto; bottom: -110px; translate: none; width: 240px; }
  .foot__grid { grid-template-columns: 1fr 1fr; }
  .foot__mark { grid-column: 1 / -1; }
}
@media (prefers-reduced-motion: reduce) { .foot__disc svg { animation: none; } }

/* ---------- now playing: three bars bounce on the beat (92 BPM) beside the record in the hero ---------- */
.eq { display: inline-flex; align-items: flex-end; gap: 2px; width: 13px; height: 0.78em; margin-right: 8px; }
.eq i { flex: 1; height: 100%; border-radius: 1px; background: var(--blue); transform-origin: bottom; animation: eq 652ms var(--ease-in-out) infinite alternate; }
.eq i:nth-child(2) { animation-delay: -217ms; }
.eq i:nth-child(3) { animation-delay: -435ms; }
@keyframes eq { from { transform: scaleY(0.25); } }
@media (prefers-reduced-motion: reduce) { .eq i { animation: none; transform: scaleY(0.6); } }

/* ---------- hero background: CC0 dance footage, washed into the lavender field ---------- */
.hero__bg { position: absolute; inset: 0; z-index: 0; display: grid; grid-auto-flow: column; grid-auto-columns: 1fr; overflow: hidden; background: var(--lavender); pointer-events: none; }
.reel, .reel__caps, .hero__foot { z-index: 2; }

/* ---------- contact: details beside a grid of covers (nothing floats over anything) ---------- */
.contact { background: var(--ivory); padding: var(--gap-section) var(--m); display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--m); align-items: center; }
.contact__info { grid-column: 1 / 6; display: grid; gap: 24px; justify-items: start; }
.contact__info .lead { max-width: 30ch; }
/* contact details: one rounded tile each, label over value, the action at the right edge */
.visit__rows { width: 100%; max-width: 480px; display: grid; gap: 8px; }
.visit__rows div { position: relative; display: grid; grid-template-columns: 1fr auto; align-items: center; column-gap: 12px; row-gap: 2px; padding: 12px 14px 12px 18px; border-radius: 18px; background: rgba(220, 207, 255, 0.45); transition: background-color 200ms ease; }
.visit__rows dt { grid-column: 1; font-size: var(--step-small); color: var(--ink-soft); line-height: 1.2; }
.visit__rows dd { grid-column: 1; font-weight: 700; line-height: 1.25; min-width: 0; overflow-wrap: anywhere; }
.visit__rows dd a { text-decoration: none; }
/* the whole tile is the link; the Copy button sits above it */
.visit__rows dd a::before { content: ""; position: absolute; inset: 0; border-radius: inherit; }
.visit__rows dd a[target="_blank"]::after { content: ""; position: absolute; right: 27px; top: 50%; width: 18px; height: 18px; margin-top: -9px; background: var(--ink-soft); -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M7 17L17 7M9 7h8v8'/%3E%3C/svg%3E") center / contain no-repeat; mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M7 17L17 7M9 7h8v8'/%3E%3C/svg%3E") center / contain no-repeat; transition: transform 200ms var(--ease-out); }
@media (hover: hover) and (pointer: fine) {
  .visit__rows div:hover { background: var(--lavender); }
  .visit__rows div:hover a[target="_blank"]::after { transform: translate(3px, -3px); }
}
.visit__rows div:has(a:focus-visible) { outline: 3px solid var(--ink); outline-offset: 2px; }
.visit__rows a:focus-visible { outline: none; }
.contact__acts { display: flex; flex-wrap: wrap; gap: 12px; }
/* copy: a round icon button at the tile's right edge, a tick once copied */
.wall { grid-column: 7 / 13; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 8px; }
.wall img { width: 100%; aspect-ratio: 1; object-fit: cover; display: block; }
/* the two offices on a record that keeps turning; script.js draws the earth, the pins and the travelling note */
.globe { position: relative; width: min(100%, 420px); aspect-ratio: 1; }
/* the earth can be dragged round (script.js); vertical swipes still scroll the page */
.globe__map { cursor: grab; touch-action: pan-y; }
.globe__map.is-grabbed { cursor: grabbing; }
.globe__disc, .globe__map { position: absolute; inset: 0; width: 100%; height: 100%; }
.globe__disc { animation: spin 48s linear infinite; }

/* ---------- standalone pages: about, privacy, copyright, 404 ---------- */
.subpage { background: var(--ivory); }
.page__back { margin-left: auto; display: inline-flex; }
.page { padding: clamp(56px, 7vw, 112px) var(--m) var(--gap-section); }
.page__body { max-width: 68ch; margin-inline: auto; }
.page__h { font-size: var(--step-head); font-weight: 900; text-transform: uppercase; letter-spacing: -0.05em; line-height: 0.88; text-wrap: balance; }
.page__lead { margin-top: 24px; font-size: var(--step-lead); line-height: 1.3; }
.page__body h2 { margin-top: 48px; font-size: var(--step-lead); font-weight: 900; text-transform: uppercase; letter-spacing: -0.03em; line-height: 1; }
.page__body p, .page__body ul { margin-top: 16px; }
.page__body ul { list-style: disc; padding-left: 1.2em; }
.page__body li + li { margin-top: 8px; }
.page__body blockquote { margin-top: 16px; font-size: var(--step-lead); font-weight: 700; line-height: 1.3; max-width: 30ch; }
.page__body a:not(.btn) { font-weight: 700; }
.page__body .btn { margin-top: 16px; }
.page__meta { font-size: var(--step-small); color: var(--ink-soft); }
.page__mark { display: flex; gap: 20px; align-items: center; }
.page__mark img { flex: none; width: 96px; height: 96px; }

@media (max-width: 760px) {
  .contact { display: block; }
  .wall { margin-top: 40px; }
}

/* ---------- RADA: big sharp cover with its record, details beside it ---------- */
.feature { position: relative; isolation: isolate; overflow-x: clip; background: var(--cobalt); color: var(--ivory); display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--m); align-items: center; padding: var(--gap-section) var(--m); --vinyl: var(--lavender); --hole: var(--cobalt); --groove: rgba(26, 28, 110, 0.22); }
.feature__art { grid-column: 1 / 7; }
/* the record peeks 36% past the cover; 85% of the column keeps it clear of the details beside it */
.feature__stage { position: relative; width: min(85%, 560px); aspect-ratio: 1; }
.feature__stage .record { z-index: 0; transform: translateX(36%); }
.feature__stage .record svg { animation-play-state: running; }
/* the record on the turntable can be grabbed and scratched (script.js); vertical swipes still scroll the page */
.feature__stage .record { pointer-events: auto; cursor: grab; touch-action: pan-y; }
.feature.is-scratching .feature__stage .record { cursor: grabbing; }
@media (prefers-reduced-motion: reduce) { .feature__stage .record { pointer-events: none; } }
.feature__cover { position: relative; z-index: 1; display: block; }
.feature__cover img { width: 100%; aspect-ratio: 1; object-fit: cover; display: block; transition: transform 400ms var(--ease-out); }
@media (hover: hover) and (pointer: fine) { .feature__cover:hover img { transform: scale(1.02); } }
.feature__info { grid-column: 8 / 13; display: grid; gap: 18px; justify-items: start; }
.feature__h { font-size: clamp(4rem, 11vw, 10rem); font-weight: 900; text-transform: uppercase; letter-spacing: -0.05em; line-height: 0.82; }
.feature__meta { font-size: var(--step-lead); line-height: 1.25; }
.feature__tracks { counter-reset: t; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 6px 24px; font-weight: 700; }
.feature__tracks li { counter-increment: t; }
.feature__tracks li::before { content: counter(t) ". "; font-weight: 400; color: var(--ink-mist); }
.feature .chip { background: var(--ivory); }

/* ---------- page background: printed-paper grain, colour pools, spinning records ---------- */
body::after { content: ""; position: fixed; inset: 0; z-index: 90; pointer-events: none; opacity: 0.06;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 0.1 0 0 0 0 0.11 0 0 0 0 0.43 0 0 0 1 0'/%3E%3C/filter%3E%3Crect width='160' height='160' filter='url(%23n)'/%3E%3C/svg%3E"); }
.records, .catalogue, .roster, .contact, .more, .page, .services { position: relative; isolation: isolate; overflow: clip; }
.records::before { content: ""; position: absolute; inset: -10%; z-index: -2; pointer-events: none; background: radial-gradient(55% 60% at 92% 8%, rgba(220, 207, 255, 0.85), transparent 70%), radial-gradient(45% 55% at 0% 100%, rgba(255, 217, 232, 0.8), transparent 70%); animation: drift 24s ease-in-out infinite alternate; } /* taste-skill-ignore: client asked for a livelier, non-plain background */
.catalogue::before { content: ""; position: absolute; inset: -10%; z-index: -2; pointer-events: none; background: radial-gradient(50% 45% at 100% 0%, rgba(220, 207, 255, 0.9), transparent 70%), radial-gradient(55% 50% at 0% 70%, rgba(214, 232, 255, 0.85), transparent 70%); animation: drift 24s ease-in-out infinite alternate; } /* taste-skill-ignore: client asked for a livelier, non-plain background */
.roster::before { content: ""; position: absolute; inset: -10%; z-index: -2; pointer-events: none; background: radial-gradient(50% 45% at 100% 20%, rgba(255, 217, 232, 0.85), transparent 70%), radial-gradient(50% 50% at 0% 90%, rgba(220, 207, 255, 0.9), transparent 70%); animation: drift 24s ease-in-out infinite alternate; } /* taste-skill-ignore: client asked for a livelier, non-plain background */
.more::before { content: ""; position: absolute; inset: -10%; z-index: -2; pointer-events: none; background: radial-gradient(50% 80% at 100% 0%, rgba(214, 232, 255, 0.9), transparent 70%), radial-gradient(40% 70% at 0% 100%, rgba(255, 217, 232, 0.7), transparent 70%); animation: drift 24s ease-in-out infinite alternate; } /* taste-skill-ignore: client asked for a livelier, non-plain background */
.contact::before { content: ""; position: absolute; inset: -10%; z-index: -2; pointer-events: none; background: radial-gradient(50% 60% at 0% 0%, rgba(220, 207, 255, 0.85), transparent 70%), radial-gradient(45% 55% at 100% 100%, rgba(214, 232, 255, 0.85), transparent 70%); animation: drift 24s ease-in-out infinite alternate; } /* taste-skill-ignore: client asked for a livelier, non-plain background */
.page { background: var(--ivory); }
.page::before { content: ""; position: absolute; inset: -10%; z-index: -2; pointer-events: none; background: radial-gradient(45% 40% at 100% 0%, rgba(220, 207, 255, 0.8), transparent 70%), radial-gradient(40% 40% at 0% 100%, rgba(255, 217, 232, 0.7), transparent 70%); animation: drift 24s ease-in-out infinite alternate; } /* taste-skill-ignore: client asked for a livelier, non-plain background */
.bgdisc { position: absolute; z-index: -1; width: min(70vw, 980px); aspect-ratio: 1; pointer-events: none; opacity: 0.16; --vinyl: var(--blue); --groove: rgba(255, 255, 255, 0.35); --hole: transparent; }
.bgdisc svg { width: 100%; height: 100%; }
.bgdisc svg { animation: spin 90s linear infinite; }
.records > .bgdisc { right: -26vw; top: -12vw; }
.catalogue > .bgdisc { left: -30vw; bottom: -18vw; }
.roster > .bgdisc { right: -28vw; bottom: 10vh; }
.contact > .bgdisc { left: -24vw; top: -20vw; width: min(56vw, 760px); }

@media (max-width: 760px) {
  .feature { display: block; }
  .feature__stage { width: 78%; }
  .feature__stage .record { transform: translateX(22%); }
  .feature__info { margin-top: 40px; }
  /* the record sheet lists the tracks; "Pull the record" opens it */
  .feature__tracks { display: none; }
  .bgdisc { width: 120vw; opacity: 0.12; }
}
@media (prefers-reduced-motion: reduce) { .bgdisc svg, .roster__disc svg, .feature__stage .record svg, .globe__disc { animation: none; } }

/* ---------- hero footage ---------- */
.hero__video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: 50% 35%; }
/* lavender fades keep the ink headline legible over the footage */
.hero__bg::before, .hero__bg::after { content: ""; position: absolute; left: 0; right: 0; z-index: 1; pointer-events: none; }
.hero__bg::before { top: 0; height: 36%; background: linear-gradient(180deg, rgba(220, 207, 255, 0.95), rgba(220, 207, 255, 0.7) 55%, rgba(220, 207, 255, 0)); } /* taste-skill-ignore: legibility scrim over the hero footage */
.hero__bg::after { bottom: 0; height: 40%; background: linear-gradient(0deg, rgba(220, 207, 255, 0.95), rgba(220, 207, 255, 0.7) 55%, rgba(220, 207, 255, 0)); } /* taste-skill-ignore: legibility scrim over the hero footage */
@media (max-width: 760px) { .hero__video { object-position: 50% 30%; } .hero__bg::before { height: 26%; } .hero__bg::after { height: 58%; } .roster__deck { display: none; } }
/* the active record bobs on the beat (92 BPM) */
.reel__frame.is-on .sleeve { animation: bob 652ms cubic-bezier(0.23, 1, 0.32, 1) infinite; transform-origin: 50% 100%; }
@keyframes bob { 0% { transform: translateY(-6px) scale(1.02); } 100% { transform: none; } }

/* ---------- drifting colour pools ---------- */
@keyframes drift { from { transform: translate3d(-5%, -3%, 0) scale(1); } to { transform: translate3d(5%, 3%, 0) scale(1.1); } }

/* ---------- Hindi · Marathi · Urdu in their own scripts, drifting behind the sections ---------- */
.bgword { position: absolute; left: 0; right: 0; z-index: -1; margin: 0; white-space: nowrap; pointer-events: none; line-height: 1.25; }
.bgword span { display: inline-block; font-family: "Chivo", "Noto Sans Devanagari", "Noto Nastaliq Urdu", sans-serif; font-weight: 900; font-size: clamp(6rem, 16vw, 17rem); letter-spacing: -0.02em; color: rgba(61, 91, 255, 0.16); will-change: transform; }
.records > .bgword { top: 46%; }
.catalogue > .bgword { top: 6%; }
.catalogue > .bgword span { color: rgba(26, 28, 110, 0.1); }
.roster > .bgword { bottom: 6%; }
.roster > .bgword span { color: rgba(61, 91, 255, 0.08); }
.services > .bgword { top: 6%; }
.services > .bgword span { color: rgba(220, 207, 255, 0.1); }
.contact > .bgword { top: 4%; }
.contact > .bgword span { color: rgba(61, 91, 255, 0.14); }
@media (max-width: 760px) { .bgword span { font-size: 28vw; } }
@media (prefers-reduced-motion: reduce) {
  .reel__frame.is-on .sleeve { animation: none; }
  .records::before, .catalogue::before, .roster::before, .more::before, .contact::before, .page::before { animation: none; }
}


/* ---------- soft corners: pill controls, rounded artwork ---------- */
:root { --r-img: 18px; --r-sm: 10px; }
.btn, .chip, .filter__b, .search input, .play, .sq, .bar__menu, .menu__close, .sheet__x, .skip { border-radius: 999px; }
.sq svg { stroke-linecap: round; stroke-linejoin: round; }
img.sleeve, .catalogue__pic, .portrait__img, .feature__cover, .feature__cover img, .tape img, .wall a, .pair img, .row__thumb img, [data-sheet-cover-link], [data-sheet-cover-link] img { border-radius: var(--r-img); }
.catalogue__pic, .portrait__img, .screen__main, .wall a, [data-sheet-cover-link] { overflow: hidden; }
.row__mini { border-radius: var(--r-sm); }
.sheet { border-radius: 28px; }
@media (max-width: 760px) { :root { --r-img: 14px; } }
/* short desktop screens: smaller reel so its caption clears the bottom-right headline */
@media (min-width: 761px) and (max-height: 760px) { .hero__stage { --f: min(22vw, 33svh); } }
/* phones on their side and very short windows: the record and the button only */
@media (min-width: 761px) and (max-height: 500px) {
  .hero__stage { --f: min(22vw, 30svh); }
  .reel__caps, .hero__p { display: none; }
}
/* tablets: room for the intro text, and a bigger reel when the screen is tall */
.hero__foot { width: min(max(21vw, 270px), 360px); }
@media (min-width: 761px) and (orientation: portrait) { .hero__stage { --f: min(40vw, 32svh); } }
@media (min-width: 761px) and (max-width: 1100px) {
  .roster__pin { grid-column: 1 / 7; }
  .roster__h { font-size: 10.5vw; }
  .roster__disc { width: min(17vw, 26svh); }
  .roster__now strong { font-size: var(--step-lead); }
  .roster__list { grid-column: 7 / 13; grid-template-columns: 1fr; }
  .portrait--r { margin: 0; }
}

/* ---------- videos: one big screen, the list beside it puts a video on it ---------- */
.screen { position: relative; isolation: isolate; overflow: clip; display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--m); row-gap: 20px; align-items: start; padding: var(--gap-section) var(--m) clamp(48px, 6vw, 96px); background: var(--lavender); }
/* ambient light: a blurred copy of the poster spills out around the screen */
.screen__glow { grid-column: 1 / 8; grid-row: 2; align-self: stretch; z-index: -1; opacity: 0.7; pointer-events: none; transform: scale(1.04); }
.screen__glow img { width: 25%; height: 25%; object-fit: cover; transform: scale(4); transform-origin: 0 0; filter: blur(12px) saturate(1.6) brightness(1.15); transition: opacity 600ms ease; }
.screen__head { grid-column: 1 / -1; display: grid; grid-template-columns: 1fr auto; align-items: end; gap: 16px var(--m); margin-bottom: clamp(16px, 3vw, 40px); }
.screen__main { grid-column: 1 / 8; grid-row: 2; position: relative; display: block; aspect-ratio: 16 / 9; background: var(--ivory-2); border-radius: 24px; }
.screen__main img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; transition: opacity 650ms ease, transform 1100ms var(--ease-out); }
.screen__main img.is-off { opacity: 0; transform: scale(1.06); }
.screen__main:active .play { transform: scale(0.97); }
@media (hover: hover) and (pointer: fine) { .screen__main:hover img { transform: scale(1.02); } .screen__main:hover .play { background: var(--ink); color: var(--lavender); } }
.screen__cap { grid-column: 1 / 8; grid-row: 3; font-size: var(--step-small); }
.screen__cap b { font-size: var(--step-lead); font-weight: 900; text-transform: uppercase; letter-spacing: -0.03em; margin-right: 8px; }
.screen__list { grid-column: 8 / 13; grid-row: 2 / 4; display: grid; gap: 8px; }
.screen__pick { display: grid; grid-template-columns: clamp(96px, 9vw, 140px) 1fr; grid-template-rows: auto auto; column-gap: 14px; align-content: center; padding: 8px; border-radius: 18px; background: rgba(245, 246, 248, 0.4); transition: background-color 240ms ease, transform 240ms var(--ease-out); }
.screen__pick img { grid-row: 1 / 3; width: 100%; aspect-ratio: 16 / 9; object-fit: cover; border-radius: 12px; transition: transform 420ms var(--ease-out); }
.screen__pick.is-on img { transform: scale(1.05) rotate(-1.5deg); }
@media (hover: hover) and (pointer: fine) { .screen__pick:hover { background: rgba(245, 246, 248, 0.8); } .screen__pick:hover img { transform: scale(1.05) rotate(-1.5deg); } }
.screen__cap { transition: opacity 300ms ease; }
.screen__cap.is-swap { opacity: 0; }
.screen__t { align-self: end; font-weight: 900; text-transform: uppercase; letter-spacing: -0.02em; line-height: 1.05; }
.screen__f { align-self: start; margin-top: 2px; font-size: var(--step-small); color: var(--ink-soft); }
.screen__pick.is-on { background: var(--ivory); transform: translateX(-6px); }
.screen__pick:active { transform: scale(0.98); }
@media (max-width: 900px) {
  .screen__main, .screen__glow, .screen__cap, .screen__list { grid-column: 1 / -1; }
  .screen__list { grid-row: auto; margin-top: 12px; }
  .screen__head { grid-template-columns: 1fr; }
  .screen__pick.is-on { transform: none; }
}
@media (max-width: 760px) {
  .screen__main { border-radius: 16px; }
  /* phones: the five videos sit on one swipeable line under the screen */
  .screen__head .lead { display: none; }
  .screen__list { grid-auto-flow: column; grid-auto-columns: 40vw; overflow-x: auto; overscroll-behavior-x: contain; scroll-snap-type: x mandatory; scroll-padding-inline: var(--m); margin-inline: calc(var(--m) * -1); padding: 4px var(--m) 8px; scrollbar-width: none; }
  .screen__list::-webkit-scrollbar { display: none; }
  .screen__list li { scroll-snap-align: start; }
  .screen__pick { grid-template-columns: 1fr; row-gap: 8px; height: 100%; align-content: start; }
  .screen__pick img { grid-row: auto; }
  .screen__f { display: none; }
  .js .screen__pick.sr { transform: none; }
}

/* ---------- sub-pages: script lettering, a slow record and a fan of covers ---------- */
.page { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 68ch) minmax(0, 1fr); column-gap: var(--m); align-items: start; }
.page__body { grid-column: 2; max-width: none; margin: 0; }
.page__word { top: 34%; }
.page__word span { color: rgba(61, 91, 255, 0.07); animation: slide 120s linear infinite; }
@keyframes slide { to { transform: translateX(-50%); } }
.page__disc { position: absolute; z-index: -1; left: -16vw; bottom: -20vw; width: min(56vw, 760px); aspect-ratio: 1; border-radius: 50%; pointer-events: none; opacity: 0.5; animation: spin 120s linear infinite;
  background: radial-gradient(circle, var(--ivory) 0 3%, var(--lavender) 3.5% 30%, transparent 30.5%), repeating-radial-gradient(circle, rgba(61, 91, 255, 0.14) 0 2px, transparent 2px 10px), rgba(61, 91, 255, 0.12); } /* taste-skill-ignore: client asked for a livelier, non-plain background */
.page__stack { grid-column: 3; position: sticky; top: calc(var(--bar-h) + 48px); justify-self: center; width: min(100%, 260px); display: grid; gap: 20px; justify-items: center; }
.page__fan { position: relative; width: 100%; aspect-ratio: 1 / 0.95; }
.page__card { position: absolute; left: 50%; top: 0; width: 72%; transform-origin: 50% 110%; transition: transform 400ms var(--ease-out); }
.page__card img { width: 100%; aspect-ratio: 1; object-fit: cover; border-radius: var(--r-img); display: block; }
.page__card:nth-child(1) { transform: translateX(-62%) rotate(-10deg); }
.page__card:nth-child(2) { transform: translateX(-50%) rotate(2deg); z-index: 1; }
.page__card:nth-child(3) { transform: translateX(-38%) translateY(14%) rotate(12deg); z-index: 2; }
@media (hover: hover) and (pointer: fine) {
  .page__fan:hover .page__card:nth-child(1) { transform: translateX(-84%) rotate(-16deg); }
  .page__fan:hover .page__card:nth-child(3) { transform: translateX(-16%) translateY(14%) rotate(18deg); }
  .page__card:hover { z-index: 3; }
}
.page__stack-cap { font-size: var(--step-small); font-weight: 700; }
@media (max-width: 1100px) {
  .page { display: block; }
  .page__body { max-width: 68ch; margin-inline: auto; }
  .page__stack { position: relative; top: 0; margin: 64px auto 0; }
}
@media (prefers-reduced-motion: reduce) { .page__word span, .page__disc { animation: none; } }
@media (max-width: 760px) and (max-height: 760px) { .hero__p { display: none; } }

/* ---------- contact wall: columns of covers glide in opposite directions, holding while pointed at ---------- */
.wall.is-moving { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 8px; align-self: stretch; height: min(clamp(420px, 74svh, 780px), var(--wall-loop)); overflow: hidden; -webkit-mask-image: linear-gradient(transparent, #000 9%, #000 91%, transparent); mask-image: linear-gradient(transparent, #000 9%, #000 91%, transparent); } /* taste-skill-ignore: edge fade mask on the moving cover wall, not a fill */
.wall__track { animation: wall-up 46s linear infinite; }
.wall__col:nth-child(even) .wall__track { animation-direction: reverse; animation-duration: 58s; }
.wall__set { display: grid; gap: 8px; padding-bottom: 8px; }
.wall.is-moving:hover .wall__track, .wall.is-moving:focus-within .wall__track { animation-play-state: paused; }
@keyframes wall-up { to { transform: translate3d(0, -50%, 0); } }
/* the wall is never taller than one column of four covers (the wall's width + 8px), so the loop never shows a gap */
.contact { --wall-loop: calc(50vw - 1.5 * var(--m)); }
@media (max-width: 760px) { .contact { --wall-loop: calc(100vw - 2 * var(--m)); } .wall.is-moving { height: min(440px, var(--wall-loop)); } }
@media (prefers-reduced-motion: reduce) { .wall__track { animation: none; } }
/* wide screens: the wall stays in view beside the details, so the right side is never empty */
@media (min-width: 761px) { .wall.is-moving { position: sticky; top: calc(var(--bar-h) + 24px); align-self: start; } }
/* taps feel instant: no double-tap zoom delay on controls */
a, button, summary, [role="button"] { touch-action: manipulation; }
/* phones and tablets: the colour pools stay still; drifting layers this tall cost too much GPU memory at 2-3x density */
@media (pointer: coarse) {
  .records::before, .catalogue::before, .roster::before, .more::before, .contact::before, .page::before { animation: none; }
}

/* ---------- feature turntable: the record slides home, the sleeve drops away, the next one comes up ---------- */
.feature__stage .record { transition: transform 700ms var(--ease-out) 120ms; }
.feature__cover { transition: opacity 360ms var(--ease-out), transform 600ms var(--ease-out); }
.feature.is-leaving .feature__stage .record { transform: none; transition: transform 380ms var(--ease-in-out); }
.feature.is-leaving .feature__cover { opacity: 0; transform: translateY(28px) rotate(-4deg) scale(0.94); transition-duration: 360ms; }
.feature.is-leaving .feature__info > * { opacity: 0; transform: translateY(-14px); transition: opacity 260ms ease, transform 300ms var(--ease-out); transition-delay: 0ms; }
.feature__h.is-long { font-size: clamp(3rem, 6.4vw, 6.4rem); }
.feature__h.is-longer { font-size: clamp(2.4rem, 4.6vw, 4.6rem); }
.feature__tracks:empty { display: none; }
@media (min-width: 761px) { .feature__info { min-height: 33rem; align-content: center; } }
/* the tonearm drops onto the record as the turntable comes into view, lifts while the record changes, then drops onto the next */
.feature__arm { position: absolute; left: 102%; top: -6%; width: 40%; height: 50%; z-index: 2; pointer-events: none; transform-origin: 75% 20%; transform: rotate(-55deg); transition: transform 380ms var(--ease-in-out); }
.feature__arm svg { width: 100%; height: 100%; overflow: visible; }
/* -28deg sets the needle on the middle groove; the pivot sits the same distance from the record's centre on every screen */
.feature__art.in .feature__arm { transform: rotate(-28deg); transition: transform 1100ms var(--ease-in-out) 350ms; }
.feature.is-leaving .feature__arm { transform: rotate(-55deg); transition: transform 380ms var(--ease-in-out); }
@media (max-width: 760px) { .feature__arm { left: 88%; } }
@media (prefers-reduced-motion: reduce) { .feature__arm { transition: none !important; } }

/* ---------- scroll effect: rise in on entry, sink away on exit ---------- */
.js .sr { opacity: 0; transform: translateY(56px) scale(0.96); transition: opacity 650ms var(--ease-out) var(--sr, 0ms), transform 900ms var(--ease-out) var(--sr, 0ms); }
.js .sr.in { opacity: 1; transform: none; }
.js .screen__pick.sr.in.is-on { transform: translateX(-6px); }
@media (max-width: 900px) { .js .screen__pick.sr.in.is-on { transform: none; } }
@media (prefers-reduced-motion: reduce) { .js .sr { opacity: 1; transform: none; transition: none; } }

/* ---------- phone hero: the dance shows through; a small record up top ---------- */
@media (max-width: 760px) {
  .hero__stage { --f: min(34vw, 19svh); --hl: calc(var(--bar-h) + 12px); }
  .reel { left: var(--m); top: calc(var(--hl) + 16px); width: calc(var(--f) * 1.3); height: var(--f); }
  .reel__frame.is-on .record { transform: translateX(30%); }
  .reel__caps { left: calc(var(--m) + var(--f) * 1.3 + 12px); top: calc(var(--hl) + 16px); width: auto; right: var(--m); }
  .hero__p { display: none; }
  .hero__foot { bottom: calc(var(--m) + env(safe-area-inset-bottom, 0px)); }
  .hero__bg::before { height: calc(var(--hl) + var(--f) + 64px); background: linear-gradient(180deg, rgba(220, 207, 255, 0.92), rgba(220, 207, 255, 0.82) 70%, rgba(220, 207, 255, 0)); } /* taste-skill-ignore: legibility scrim over the hero footage */
  .hero__bg::after { height: 36%; background: linear-gradient(0deg, rgba(220, 207, 255, 0.94), rgba(220, 207, 255, 0.8) 55%, rgba(220, 207, 255, 0)); } /* taste-skill-ignore: legibility scrim over the hero footage */
  .hero__video { object-position: 50% 50%; }
}