/* ==========================================================================
   chumchumlol Records LLC
   A midnight stage, velvet curtains and a blood-moon record.
   ========================================================================== */

/* Fonts, served from here rather than Google Fonts so visitors never call Google.
   Same files and subsets as Google's; browsers fetch a subset only when the page
   uses its characters. Licences (SIL OFL) sit beside the files. */
/* Archivo, vietnamese */
@font-face {
  font-family: "Archivo";
  font-style: normal;
  font-weight: 400 800;
  font-stretch: 62% 125%;
  font-display: swap;
  src: url("../assets/fonts/archivo-vietnamese.woff2") format("woff2");
  unicode-range: U+0102-0103, U+0110-0111, U+0128-0129, U+0168-0169, U+01A0-01A1, U+01AF-01B0, U+0300-0301, U+0303-0304, U+0308-0309, U+0323, U+0329, U+1EA0-1EF9, U+20AB;
}
/* Archivo, latin-ext */
@font-face {
  font-family: "Archivo";
  font-style: normal;
  font-weight: 400 800;
  font-stretch: 62% 125%;
  font-display: swap;
  src: url("../assets/fonts/archivo-latin-ext.woff2") format("woff2");
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* Archivo, latin */
@font-face {
  font-family: "Archivo";
  font-style: normal;
  font-weight: 400 800;
  font-stretch: 62% 125%;
  font-display: swap;
  src: url("../assets/fonts/archivo-latin.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
/* Rye, latin-ext */
@font-face {
  font-family: "Rye";
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("../assets/fonts/rye-latin-ext.woff2") format("woff2");
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* Rye, latin */
@font-face {
  font-family: "Rye";
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("../assets/fonts/rye-latin.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

:root {
  /* Colour, pulled from the covers: night skies, blood moons, curtain velvet */
  --midnight: #0f1530;
  --midnight-2: #151d40;
  --midnight-3: #0a0e22;
  --velvet-dark: #4c0913;
  --velvet: #8a1826;
  --velvet-light: #c0303f;
  --moon: #c8202f;
  --moonlight: #f2e7cf;
  --brass: #e0b252;
  --brass-dark: #9c6f22;
  --fog: #a2a7c8;
  --line: rgba(242, 231, 207, 0.13);
  --error: #ff9aa4;
  --required: #ff4b5c;

  /* Type */
  --f-display: "Rye", Georgia, "Times New Roman", serif;
  --f-text: "Archivo", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --t-xs: 0.8125rem;
  --t-sm: 0.9375rem;
  --t-base: 1.0625rem;
  --t-md: 1.375rem;
  --t-title: clamp(2.5rem, 6.2vw, 4.4rem);

  /* Layout */
  --header-h: 64px;
  --wrap: 1200px;
  --gutter: clamp(16px, 4vw, 48px);
  --ease-out: cubic-bezier(0.2, 0.8, 0.2, 1);
}

/* ---------- Base ---------- */

*,
*::before,
*::after {
  box-sizing: border-box;
}

html {
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
  scroll-padding-top: var(--header-h);
}

body {
  margin: 0;
  min-width: 320px;
  background: var(--midnight);
  color: var(--moonlight);
  font-family: var(--f-text);
  font-size: var(--t-base);
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

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

h1, h2, h3, p, ul, ol {
  margin: 0;
}

ul,
ol {
  padding: 0;
  list-style: none;
}

a {
  color: inherit;
}

button,
input,
textarea {
  font: inherit;
  color: inherit;
}

[hidden] {
  display: none !important;
}

::selection {
  background: var(--moon);
  color: var(--moonlight);
}

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

.sr-only {
  position: absolute !important;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
  border: 0;
}

.skip-link {
  position: absolute;
  top: -60px;
  left: 12px;
  z-index: 100;
  padding: 10px 16px;
  border-radius: 6px;
  background: var(--brass);
  color: var(--midnight);
  font-weight: 700;
  text-decoration: none;
}

.skip-link:focus {
  top: 12px;
}

.wrap {
  width: min(100% - 2 * var(--gutter), var(--wrap));
  margin-inline: auto;
}

/* ---------- Buttons ---------- */

.btn {
  position: relative;
  isolation: isolate;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 50px;
  padding: 0 28px;
  border: 0;
  background: none;
  font-size: var(--t-sm);
  font-weight: 700;
  font-stretch: 108%;
  letter-spacing: 0.01em;
  line-height: 1;
  text-decoration: none;
  cursor: pointer;
}

/* Primary actions are admission tickets: brass, with punched sides. */
.btn-ticket {
  color: var(--midnight);
}

.btn-ticket::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  border-radius: 4px;
  background: linear-gradient(180deg, #f0c86e, var(--brass) 55%, #c9952f);
  -webkit-mask:
    radial-gradient(circle 8px at 0 50%, transparent 96%, #000) left / 51% 100% no-repeat,
    radial-gradient(circle 8px at 100% 50%, transparent 96%, #000) right / 51% 100% no-repeat;
  mask:
    radial-gradient(circle 8px at 0 50%, transparent 96%, #000) left / 51% 100% no-repeat,
    radial-gradient(circle 8px at 100% 50%, transparent 96%, #000) right / 51% 100% no-repeat;
  transition: transform 0.25s var(--ease-out);
}

.btn-ticket:hover::before {
  transform: rotate(-2deg) scale(1.04);
}

.btn-ticket:active::before {
  transform: scale(0.97);
}

.btn-link {
  min-height: 44px;
  padding: 0 4px;
  color: var(--moonlight);
  text-decoration: underline;
  text-decoration-color: var(--brass);
  text-decoration-thickness: 2px;
  text-underline-offset: 7px;
  transition: color 0.2s;
}

.btn-link:hover {
  color: var(--brass);
}

/* ---------- Header ---------- */

.site-header {
  position: sticky;
  top: 0;
  z-index: 50;
  height: var(--header-h);
  background: rgba(15, 21, 48, 0.92);
  -webkit-backdrop-filter: blur(12px);
  backdrop-filter: blur(12px);
  border-bottom: 1px solid var(--line);
}

.header-inner {
  display: flex;
  align-items: center;
  gap: clamp(14px, 2.4vw, 32px);
  height: 100%;
}

/* Plain text until the real logo arrives */
.brand {
  margin-right: auto;
  font-size: var(--t-base);
  font-weight: 700;
  line-height: 1.2;
  text-decoration: none;
  white-space: nowrap;
}

.site-nav {
  display: flex;
  align-items: center;
  gap: clamp(18px, 2.4vw, 32px);
}

.site-nav a {
  padding: 6px 0;
  background: linear-gradient(var(--brass), var(--brass)) 0 100% / 0 2px no-repeat;
  color: var(--fog);
  font-size: var(--t-sm);
  font-weight: 500;
  text-decoration: none;
  transition: color 0.2s, background-size 0.25s var(--ease-out);
}

.site-nav a:hover {
  background-size: 100% 2px;
  color: var(--moonlight);
}

.menu-toggle {
  display: none;
  align-items: center;
  min-height: 38px;
  padding: 0 16px;
  border: 1px solid var(--line);
  border-radius: 999px;
  background: none;
  color: var(--moonlight);
  font-size: var(--t-xs);
  font-weight: 600;
  cursor: pointer;
  transition: border-color 0.2s;
}

.menu-toggle:hover {
  border-color: rgba(242, 231, 207, 0.35);
}

/* ---------- Stage (hero) ---------- */

.stage {
  --valance-h: clamp(44px, 6.4vw, 88px);
  --drape-w: clamp(40px, 14vw, 250px);
  --record: #c8202f;
  position: relative;
  isolation: isolate;
  display: grid;
  place-items: center;
  min-height: calc(100svh - var(--header-h));
  padding: calc(var(--valance-h) + 18px) var(--gutter) clamp(40px, 6vh, 72px);
  overflow: hidden;
  text-align: center;
  background:
    radial-gradient(ellipse 46% 62% at 50% -6%, rgba(126, 146, 255, 0.24), transparent 72%),
    var(--midnight);
}

/* Changing colour. The curtains and the record take on the colour of
   whatever "Try your luck" puts on, and fade to it. Fading the colours
   themselves meant repainting the curtains and the record on every frame of
   the fade, so instead everything that changes colour is drawn twice, once
   in each of two sets of colours: --record, --velvet, --velvet-light and
   --velvet-dark for the bottom copy, and the same with --over- in front for
   the top one. The script (recolour() in main.js) paints the new colour
   into whichever copy is out of sight, then .is-over fades one copy out and
   the other in, which the browser can do without repainting anything. The
   top copy is added to the bottom one (plus-lighter), so the fade shows
   exactly the colours in between, right to the edges. */
.stage-glow::before,
.moon-glow::before,
.moon-disc::after,
.valance-velvet::before,
.drape-fabric::before {
  transition: opacity 1.2s ease;
}

.stage-glow::after,
.moon-glow::after,
.moon-disc::before,
.valance-velvet::after,
.drape-fabric::after {
  opacity: 0;
  mix-blend-mode: plus-lighter;
  transition: opacity 1.2s ease;
}

.stage.is-over .stage-glow::before,
.stage.is-over .moon-glow::before,
.stage.is-over .moon-disc::after,
.stage.is-over .valance-velvet::before,
.stage.is-over .drape-fabric::before {
  opacity: 0;
}

.stage.is-over .stage-glow::after,
.stage.is-over .moon-glow::after,
.stage.is-over .moon-disc::before,
.stage.is-over .valance-velvet::after,
.stage.is-over .drape-fabric::after {
  opacity: 1;
}

/* The ring round the label only fades its top copy: the bottom one is part of the label. */
.moon-label::before {
  opacity: 0;
  transition: opacity 1.2s ease;
}

.stage.is-over .moon-label::before {
  opacity: 1;
}

/* Where plus-lighter isn't supported, the solid bottom copies stay put under
   the top one as it fades in, and go once they're covered. */
@supports not (mix-blend-mode: plus-lighter) {
  .moon-disc::after,
  .valance-velvet::before,
  .drape-fabric::before {
    transition: none;
  }

  .stage.is-over .moon-disc::after,
  .stage.is-over .valance-velvet::before,
  .stage.is-over .drape-fabric::before {
    transition: opacity 0s 1.2s;
  }
}

/* For changing colour again before the last change has finished: the
   script swaps the copies over in one go, then fades from there. */
.stage.is-snapping :is(.stage-glow, .moon-glow, .moon-disc, .moon-label, .valance-velvet, .drape-fabric)::before,
.stage.is-snapping :is(.stage-glow, .moon-glow, .moon-disc, .valance-velvet, .drape-fabric)::after {
  transition: none;
}

/* A glow on the floor in the record's colour, across the bottom quarter of the stage */
.stage-glow {
  position: absolute;
  inset: auto 0 0;
  z-index: -1;
  height: 25%;
  isolation: isolate;
  pointer-events: none;
}

.stage-glow::before,
.stage-glow::after {
  content: "";
  position: absolute;
  inset: 0;
  background: radial-gradient(ellipse 90% 180% at 50% 132%, color-mix(in srgb, var(--glow) 16%, transparent), transparent 70%);
}

.stage-glow::before {
  --glow: var(--record);
}

.stage-glow::after {
  --glow: var(--over-record);
}

/* The front edge of the stage */
.stage::after {
  content: "";
  position: absolute;
  inset: auto 0 0;
  z-index: 5;
  height: 4px;
  background: linear-gradient(90deg, var(--brass-dark), var(--brass) 50%, var(--brass-dark));
  opacity: 0.75;
}

.stage-sky {
  position: absolute;
  inset: 0;
  z-index: -1;
  opacity: 0.7;
  background-image:
    radial-gradient(1.4px 1.4px at 21% 18%, #fff 60%, transparent 100%),
    radial-gradient(1px 1px at 27% 42%, #fff 60%, transparent 100%),
    radial-gradient(1.6px 1.6px at 33% 12%, #fff 60%, transparent 100%),
    radial-gradient(1px 1px at 38% 68%, #fff 60%, transparent 100%),
    radial-gradient(1.2px 1.2px at 44% 30%, #fff 60%, transparent 100%),
    radial-gradient(1px 1px at 58% 22%, #fff 60%, transparent 100%),
    radial-gradient(1.5px 1.5px at 63% 56%, #fff 60%, transparent 100%),
    radial-gradient(1px 1px at 68% 14%, #fff 60%, transparent 100%),
    radial-gradient(1.3px 1.3px at 74% 38%, #fff 60%, transparent 100%),
    radial-gradient(1px 1px at 79% 72%, #fff 60%, transparent 100%),
    radial-gradient(1.6px 1.6px at 81% 20%, #fff 60%, transparent 100%),
    radial-gradient(1px 1px at 24% 80%, #fff 60%, transparent 100%),
    radial-gradient(1.2px 1.2px at 30% 58%, #fff 60%, transparent 100%),
    radial-gradient(1px 1px at 71% 86%, #fff 60%, transparent 100%),
    radial-gradient(1.4px 1.4px at 52% 9%, #fff 60%, transparent 100%),
    radial-gradient(1px 1px at 86% 50%, #fff 60%, transparent 100%),
    radial-gradient(1px 1px at 16% 50%, #fff 60%, transparent 100%);
}

/* From the back: the stars, the cast behind the record, the record, the cast
   in front of it, the words, and then the drapes and the valance. */
.stage-inner {
  position: relative;
  width: 100%;
}

.show {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
}

.show-back {
  z-index: 0;
}

.show-front {
  z-index: 2;
}

.stage-title {
  position: relative;
  z-index: 3;
  font-family: var(--f-display);
  font-size: clamp(2.25rem, 7.6vw, 5.8rem);
  font-weight: 400;
  line-height: 0.98;
  text-shadow: 0 6px 30px rgba(10, 14, 34, 0.65);
  pointer-events: none;
}

.stage-title span {
  display: block;
}

/* The blood-moon record rises behind the bottom of the title */
.moon {
  --moon-size: clamp(240px, min(500px, 82vw, 100svh - var(--header-h) - 450px), 500px);
  position: relative;
  z-index: 1;
  width: var(--moon-size);
  aspect-ratio: 1;
  margin: calc(var(--moon-size) * -0.14) auto 0;
  container-type: inline-size;
}

.moon-glow {
  position: absolute;
  inset: -18%;
  isolation: isolate;
  pointer-events: none;
}

.moon-glow::before,
.moon-glow::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: 50%;
  background: radial-gradient(circle, color-mix(in srgb, var(--glow) 50%, transparent) 36%, color-mix(in srgb, var(--glow) 16%, transparent) 52%, transparent 70%);
}

.moon-glow::before {
  --glow: var(--record);
}

.moon-glow::after {
  --glow: var(--over-record);
}

.moon-record {
  position: absolute;
  inset: 0;
  border-radius: 50%;
  cursor: grab;
  /* A finger on the record only ever turns it. A spin started on either side
     goes straight up or down at first, which pan-y handed to the page to scroll. */
  touch-action: none;
  user-select: none;
  -webkit-user-select: none;
  -webkit-tap-highlight-color: transparent;
}

.moon-record.is-dragging {
  cursor: grabbing;
}

.moon-record:focus-visible {
  border-radius: 50%;
  outline-offset: 8px;
}

.moon-disc {
  position: absolute;
  inset: 0;
  border-radius: 50%;
  will-change: transform;
  box-shadow: 0 30px 70px rgba(0, 0, 0, 0.5);
}

/* The record itself, drawn twice (see "Changing colour"): once under
   everything else on it, and once over that in the other colour. */
.moon-disc::before,
.moon-disc::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: 50%;
  background:
    radial-gradient(circle, transparent 0 20.5%, rgba(0, 0, 0, 0.45) 20.5% 21.2%, transparent 21.2% 97.4%, rgba(0, 0, 0, 0.5) 97.4%),
    repeating-radial-gradient(circle, transparent 0 1.6px, rgba(0, 0, 0, 0.26) 1.6px 2.3px, rgba(255, 200, 200, 0.05) 2.3px 3px),
    radial-gradient(circle,
      color-mix(in srgb, var(--disc) 70%, #000) 0 22%,
      var(--disc) 34%,
      color-mix(in srgb, var(--disc) 94%, #fff) 46%,
      color-mix(in srgb, var(--disc) 82%, #000) 72%,
      color-mix(in srgb, var(--disc) 52%, #000) 100%);
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.05);
}

.moon-disc::after {
  --disc: var(--record);
  z-index: -1;
}

.moon-disc::before {
  --disc: var(--over-record);
}

/* Plain paper label (room for the logo later) */
.moon-label {
  position: absolute;
  top: 31%;
  left: 31%;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 24%;
  width: 38%;
  height: 38%;
  border-radius: 50%;
  background: var(--moonlight);
  box-shadow: inset 0 0 0 0.9cqi var(--moonlight), inset 0 0 0 1.2cqi color-mix(in srgb, var(--record) 60%, var(--moonlight));
  color: var(--midnight);
  font-size: max(7px, 2.5cqi);
  font-weight: 700;
  font-stretch: 112%;
  letter-spacing: 0.08em;
  line-height: 1;
}

/* The ring round the label again, in the other colour (see "Changing
   colour"). It sits a pixel in from the label's edge, where both colours
   are moonlight, so its own soft edge doesn't show. */
.moon-label::before {
  content: "";
  position: absolute;
  inset: 1px;
  border-radius: 50%;
  box-shadow: inset 0 0 0 calc(0.9cqi - 1px) var(--moonlight), inset 0 0 0 calc(1.2cqi - 1px) color-mix(in srgb, var(--over-record) 60%, var(--moonlight));
}

/* The cover of whatever "Try your luck" puts on, over the paper label.
   A grab on it goes through to the record: a picture grabbed with a mouse
   gets dragged off the page instead, and the record stops turning. */
.moon-cover {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  border-radius: 50%;
  object-fit: cover;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.4s ease;
}

.moon.is-covered .moon-cover {
  opacity: 1;
}

/* spindle hole */
.moon-label::after {
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  width: 7%;
  aspect-ratio: 1;
  border-radius: 50%;
  background: var(--midnight);
  transform: translate(-50%, -50%);
}

.moon-sheen,
.vinyl-sheen {
  position: absolute;
  inset: 0;
  border-radius: 50%;
  pointer-events: none;
  background: conic-gradient(from 30deg, transparent 0deg, rgba(255, 255, 255, 0.16) 24deg, transparent 50deg, transparent 180deg, rgba(255, 255, 255, 0.1) 204deg, transparent 230deg);
  -webkit-mask: radial-gradient(circle, transparent 0 19.4%, #000 20%);
  mask: radial-gradient(circle, transparent 0 19.4%, #000 20%);
}

/* A halo of night round the words, so they read over the cast */
.stage-tagline,
.stage-actions,
.stage-hint {
  position: relative;
  z-index: 3;
  text-shadow: 0 0 3px var(--midnight), 0 0 10px var(--midnight), 0 0 18px var(--midnight);
}

.stage-actions .btn-ticket {
  text-shadow: none;
}

.stage-tagline {
  margin-top: clamp(12px, 2.4vh, 24px);
  font-size: clamp(1.125rem, 1.6vw, var(--t-md));
  font-weight: 500;
  text-wrap: balance;
}

.stage-actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 12px 28px;
  margin-top: 18px;
}

.stage-hint {
  margin-top: 12px;
  color: var(--fog);
  font-size: var(--t-xs);
}

/* Valance: the scalloped pelmet across the top of the stage */
.valance {
  --scallop: clamp(34px, 4.4vw, 64px);
  position: absolute;
  inset: 0 0 auto;
  z-index: 5;
  height: var(--valance-h);
  pointer-events: none;
  filter: drop-shadow(0 8px 10px rgba(0, 0, 0, 0.45));
}

.valance::before {
  content: "";
}

.valance::before,
.valance-velvet {
  position: absolute;
  inset: 0;
  -webkit-mask:
    linear-gradient(#000 0 0) top / 100% calc(100% - var(--scallop) / 2) no-repeat,
    radial-gradient(circle calc(var(--scallop) / 2) at 50% 0, #000 97%, transparent) bottom center / var(--scallop) calc(var(--scallop) / 2) repeat-x;
  mask:
    linear-gradient(#000 0 0) top / 100% calc(100% - var(--scallop) / 2) no-repeat,
    radial-gradient(circle calc(var(--scallop) / 2) at 50% 0, #000 97%, transparent) bottom center / var(--scallop) calc(var(--scallop) / 2) repeat-x;
}

/* brass trim peeking out under the scallops */
.valance::before {
  transform: translateY(4px);
  background: linear-gradient(var(--brass-dark), var(--brass));
}

/* The velvet on the valance and the drapes is drawn twice (see "Changing colour"). */
.valance-velvet::before,
.valance-velvet::after {
  content: "";
  position: absolute;
  inset: 0;
  background:
    linear-gradient(rgba(0, 0, 0, 0.5), transparent 45%, rgba(0, 0, 0, 0.25)),
    repeating-linear-gradient(90deg, var(--fold-dark) 0, var(--fold) 12px, var(--fold-light) 20px, var(--fold) 28px, var(--fold-dark) 40px);
}

.valance-velvet::before,
.drape-fabric::before {
  --fold: var(--velvet);
  --fold-dark: var(--velvet-dark);
  --fold-light: var(--velvet-light);
}

.valance-velvet::after,
.drape-fabric::after {
  --fold: var(--over-velvet);
  --fold-dark: var(--over-velvet-dark);
  --fold-light: var(--over-velvet-light);
}

/* Drapes: tied back at each side, folds gathered at the tie */
.drape {
  position: absolute;
  top: 0;
  bottom: 0;
  z-index: 4;
  width: var(--drape-w);
  pointer-events: none;
  filter: drop-shadow(10px 0 18px rgba(0, 0, 0, 0.45));
}

.drape-left {
  left: 0;
}

.drape-right {
  right: 0;
  transform: scaleX(-1);
}

.drape-fabric::before,
.drape-fabric::after {
  content: "";
  position: absolute;
  inset: 0;
  background:
    linear-gradient(90deg, rgba(0, 0, 0, 0.45), transparent 30%, transparent 72%, rgba(0, 0, 0, 0.35)),
    linear-gradient(rgba(0, 0, 0, 0.5), transparent 22%, transparent 78%, rgba(0, 0, 0, 0.55)),
    repeating-conic-gradient(from 180deg at 24% 61%, var(--fold-dark) 0deg, var(--fold) 2.6deg, var(--fold-light) 4deg, var(--fold) 5.4deg, var(--fold-dark) 8deg);
}

.drape-fabric {
  position: absolute;
  inset: 0;
  transform-origin: 0 0;
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100' preserveAspectRatio='none'%3E%3Cpath d='M0 0H100C90 20 44 46 28 61C34 73 46 88 54 100H0Z'/%3E%3C/svg%3E") 0 0 / 100% 100% no-repeat;
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100' preserveAspectRatio='none'%3E%3Cpath d='M0 0H100C90 20 44 46 28 61C34 73 46 88 54 100H0Z'/%3E%3C/svg%3E") 0 0 / 100% 100% no-repeat;
}

.drape-tie {
  position: absolute;
  top: 59.5%;
  left: 0;
  width: 32%;
  height: clamp(8px, 1vw, 14px);
  border-radius: 0 999px 999px 0;
  background: linear-gradient(var(--brass), var(--brass-dark));
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.45);
}

/* A gust through the drapes when they change colour */
.stage.is-billowing .drape-fabric {
  animation: billow 1.3s ease-in-out;
}

@keyframes billow {
  25% { transform: skewX(-2deg) scaleX(1.06); }
  55% { transform: skewX(1.2deg) scaleX(0.98); }
  80% { transform: skewX(-0.5deg) scaleX(1.01); }
}

.drape-tie::after {
  content: "";
  position: absolute;
  top: 60%;
  right: 8%;
  width: clamp(8px, 1vw, 14px);
  height: clamp(22px, 3vw, 44px);
  background: linear-gradient(90deg, var(--brass-dark), var(--brass) 50%, var(--brass-dark));
  clip-path: polygon(35% 0, 65% 0, 100% 100%, 0 100%);
}

/* Intro: the curtain opens once, on arrival */
.curtain {
  display: none;
}

.intro .curtain {
  position: absolute;
  top: 0;
  bottom: 0;
  z-index: 6;
  display: block;
  width: 50.5%;
  pointer-events: none;
  background:
    linear-gradient(rgba(0, 0, 0, 0.5), transparent 18%, transparent 82%, rgba(0, 0, 0, 0.55)),
    repeating-linear-gradient(90deg, var(--velvet-dark) 0, var(--velvet) 20px, var(--velvet-light) 32px, var(--velvet) 44px, var(--velvet-dark) 64px);
  animation: 1.25s cubic-bezier(0.7, 0, 0.25, 1) 0.35s forwards;
}

.intro .curtain-left {
  left: 0;
  transform-origin: 0 50%;
  box-shadow: inset -24px 0 30px -18px rgba(0, 0, 0, 0.7);
  animation-name: curtain-left;
}

.intro .curtain-right {
  right: 0;
  transform-origin: 100% 50%;
  box-shadow: inset 24px 0 30px -18px rgba(0, 0, 0, 0.7);
  animation-name: curtain-right;
}

.intro .stage-title {
  animation: title-drop 1.2s var(--ease-out) 0.9s backwards;
}

.intro .moon {
  animation: moon-rise 1.7s var(--ease-out) 0.6s backwards;
}

.intro .moon-disc {
  animation: disc-roll 2s var(--ease-out) 0.65s backwards;
}

.intro .stage-tagline,
.intro .stage-actions,
.intro .stage-hint {
  animation: fade-up 0.7s ease 1.45s backwards;
}

@keyframes curtain-left {
  to { transform: translateX(-100%) scaleX(0.5); }
}

@keyframes curtain-right {
  to { transform: translateX(100%) scaleX(0.5); }
}

@keyframes title-drop {
  from { opacity: 0; transform: translateY(-20px); }
}

@keyframes moon-rise {
  from { opacity: 0; transform: translateY(90px); }
}

@keyframes disc-roll {
  from { transform: rotate(-160deg); }
}

@keyframes fade-up {
  from { opacity: 0; transform: translateY(14px); }
}

/* ---------- Sections ---------- */

.section {
  padding-block: clamp(84px, 11vw, 150px);
}

.section-head {
  max-width: 780px;
  margin-bottom: clamp(40px, 5.5vw, 72px);
}

.section-head h2 {
  font-family: var(--f-display);
  font-size: var(--t-title);
  font-weight: 400;
  line-height: 1.02;
  text-wrap: balance;
}

.section-head p {
  max-width: 48ch;
  margin-top: 18px;
  color: var(--fog);
  font-size: clamp(1.0625rem, 1.5vw, var(--t-md));
  line-height: 1.5;
}

.section-head--center {
  margin-inline: auto;
  text-align: center;
}

.section-head--center p {
  margin-inline: auto;
}

/* ---------- Releases: deck + crate ---------- */

.releases {
  overflow-x: clip;
}

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

/* Centred while the record's inside it; moves over to make room when it comes out. */
.deck-sleeve {
  position: relative;
  width: 66%;
  aspect-ratio: 1;
  transform: translateX(25.75%);
  transition: transform 0.6s var(--ease-out);
}

.deck[data-playing="true"] .deck-sleeve {
  transform: none;
}

.deck-cover {
  position: relative;
  z-index: 2;
  width: 100%;
  height: 100%;
  object-fit: cover;
  box-shadow: 0 30px 60px rgba(0, 0, 0, 0.55), 0 0 0 1px rgba(255, 255, 255, 0.06);
  transition: transform 0.3s var(--ease-out), opacity 0.3s ease;
}

/* The record waits in its sleeve and slides out to play. While it plays
   it can be pushed up and down, and follows the hand a little way. */
.vinyl {
  --tint: var(--moon);
  position: absolute;
  top: 3%;
  left: 3%;
  z-index: 1;
  width: 94%;
  aspect-ratio: 1;
  border-radius: 50%;
  user-select: none;
  -webkit-user-select: none;
  -webkit-tap-highlight-color: transparent;
  transition: transform 0.6s var(--ease-out), translate 0.5s cubic-bezier(0.3, 1.6, 0.5, 1), opacity 0.2s ease 0.3s;
}

.deck[data-playing="true"] .vinyl {
  transform: translateX(58.5%);
  cursor: grab;
  touch-action: none;
}

.vinyl.is-grabbed {
  cursor: grabbing;
  transition-property: transform;
}

/* While the sleeve is swapped, the record goes with it, and only comes
   back once the new sleeve is there to cover it. */
.deck.is-swapping .vinyl {
  transform: translateX(0);
  opacity: 0;
  transition: transform 0.25s ease-in, translate 0.25s ease-in, opacity 0.15s ease;
}

.deck.is-swapping .deck-cover {
  opacity: 0;
  transform: translateY(18px) rotate(-2deg);
}

.vinyl-disc {
  position: absolute;
  inset: 0;
  border-radius: 50%;
  background:
    radial-gradient(circle, transparent 0 20.5%, rgba(0, 0, 0, 0.45) 20.5% 21.2%, transparent 21.2% 97.4%, rgba(0, 0, 0, 0.55) 97.4%),
    repeating-radial-gradient(circle, transparent 0 1.6px, rgba(0, 0, 0, 0.3) 1.6px 2.3px, rgba(255, 255, 255, 0.045) 2.3px 3px),
    radial-gradient(circle,
      color-mix(in srgb, var(--tint) 55%, #000) 0 24%,
      var(--tint) 40%,
      color-mix(in srgb, var(--tint) 70%, #000) 70%,
      color-mix(in srgb, var(--tint) 35%, #000) 100%);
  box-shadow: 0 20px 44px rgba(0, 0, 0, 0.5);
  will-change: transform;
}

/* spindle hole */
.vinyl-disc::after {
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  width: 3%;
  aspect-ratio: 1;
  border-radius: 50%;
  background: var(--midnight);
  transform: translate(-50%, -50%);
}

.vinyl-label {
  position: absolute;
  top: 31%;
  left: 31%;
  width: 38%;
  height: 38%;
  border-radius: 50%;
  object-fit: cover;
  pointer-events: none;
}

.deck-cat {
  color: var(--brass);
  font-size: var(--t-xs);
  font-weight: 800;
  font-stretch: 85%;
  letter-spacing: 0.1em;
}

.deck-title {
  margin-top: 12px;
  font-family: var(--f-display);
  font-size: clamp(2rem, 3.4vw, 3rem);
  font-weight: 400;
  line-height: 1.08;
  overflow-wrap: break-word;
}

.deck-artist {
  margin-top: 10px;
  font-size: var(--t-md);
  font-weight: 600;
}

.deck-blurb {
  max-width: 34ch;
  margin-top: 14px;
  color: var(--fog);
}

.deck-controls {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 12px 24px;
  margin-top: 28px;
}

.deck-play {
  min-width: 132px;
}

/* Shown while the record's out, or when a sample won't load. */
.deck-hint {
  margin-top: 14px;
  color: var(--fog);
  font-size: var(--t-xs);
  transition: opacity 0.3s, visibility 0.3s;
}

.deck:not([data-playing="true"]):not(.is-failed) .deck-hint {
  visibility: hidden;
  opacity: 0;
}

.deck-step {
  display: flex;
  align-items: center;
  gap: 14px;
  margin-top: 26px;
  color: var(--fog);
  font-size: var(--t-sm);
  font-variant-numeric: tabular-nums;
}

.icon-btn {
  display: grid;
  place-items: center;
  width: 44px;
  height: 44px;
  border: 1px solid var(--line);
  border-radius: 50%;
  background: none;
  cursor: pointer;
  transition: color 0.2s, border-color 0.2s;
}

.icon-btn:hover {
  border-color: var(--brass);
  color: var(--brass);
}

.crate {
  position: relative;
  display: grid;
  grid-template-columns: repeat(10, minmax(0, 1fr));
  gap: clamp(8px, 1vw, 14px);
  margin-top: clamp(48px, 7vw, 88px);
  padding-top: 16px;
}

.crate-item {
  position: relative;
  display: block;
  width: 100%;
  padding: 0;
  border: 0;
  background: none;
  cursor: pointer;
  transition: transform 0.25s var(--ease-out);
}

.crate-item img {
  width: 100%;
  height: auto;
  aspect-ratio: 1;
  object-fit: cover;
  box-shadow: 0 12px 22px rgba(0, 0, 0, 0.5);
  filter: brightness(0.6) saturate(0.8);
  transition: filter 0.25s;
}

.crate-item:hover {
  transform: translateY(-6px);
}

.crate-item:hover img,
.crate-item[aria-pressed="true"] img {
  filter: none;
}

.crate-item[aria-pressed="true"] {
  transform: translateY(-14px);
}

/* the red "on air" light under the sleeve that's on the deck */
.crate-item::after {
  content: "";
  position: absolute;
  bottom: -16px;
  left: 50%;
  width: 8px;
  height: 8px;
  margin-left: -4px;
  border-radius: 50%;
  background: var(--moon);
  box-shadow: 0 0 10px 2px rgba(200, 32, 47, 0.7);
  opacity: 0;
  transition: opacity 0.25s;
}

.crate-item[aria-pressed="true"]::after {
  opacity: 1;
}

.deck[data-playing="true"] ~ .crate .crate-item[aria-pressed="true"]::after {
  animation: on-air 1.2s ease-in-out infinite;
}

@keyframes on-air {
  50% { opacity: 0.3; }
}

/* ---------- Artists: the bill ---------- */

.artists {
  position: relative;
  background: var(--midnight-3);
}

.bill-row {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  align-items: center;
  column-gap: clamp(16px, 2.6vw, 34px);
  padding-block: clamp(14px, 2vw, 24px);
}

.bill-avatar {
  grid-row: 1 / span 2;
  width: clamp(52px, 6.4vw, 92px);
  height: auto;
  aspect-ratio: 1;
  border-radius: 50%;
  object-fit: cover;
  box-shadow: 0 0 0 3px var(--midnight-3), 0 0 0 4px var(--line);
}

.bill-name {
  align-self: end;
  font-family: var(--f-display);
  font-size: clamp(1.4rem, 6.2vw, 5.25rem);
  font-weight: 400;
  line-height: 1.05;
  transition: color 0.2s;
}

.bill-aka {
  display: inline-block;
  margin-left: 0.4em;
  color: var(--fog);
  font-family: var(--f-text);
  font-size: var(--t-sm);
  font-weight: 600;
  font-stretch: 110%;
  letter-spacing: 0.04em;
  vertical-align: middle;
}

.bill-note {
  align-self: start;
  margin-top: 6px;
  color: var(--fog);
}

.bill-note a {
  margin-left: 6px;
  color: var(--brass);
  font-weight: 600;
  text-underline-offset: 4px;
}

.bill-row:hover .bill-name {
  color: var(--brass);
}

/* Portrait that follows the cursor over the bill (mouse only) */
.bill-float {
  position: fixed;
  top: 0;
  left: 0;
  z-index: 30;
  width: clamp(200px, 20vw, 280px);
  aspect-ratio: 1;
  opacity: 0;
  scale: 0.8;
  pointer-events: none;
  transition: opacity 0.2s, scale 0.3s var(--ease-out);
}

.bill-float.is-on {
  opacity: 1;
  scale: 1;
}

.bill-float img {
  width: 100%;
  height: 100%;
  border-radius: 8px;
  object-fit: cover;
  box-shadow: 0 30px 70px rgba(0, 0, 0, 0.6), 0 0 0 1px rgba(255, 255, 255, 0.08);
}

@media (hover: none), (pointer: coarse) {
  .bill-float {
    display: none;
  }
}

/* ---------- Title machine ---------- */

.machine {
  background:
    radial-gradient(ellipse 60% 50% at 50% 62%, rgba(200, 32, 47, 0.14), transparent 70%),
    var(--midnight);
}

.slot {
  max-width: 900px;
  margin-inline: auto;
}

.slot-frame {
  position: relative;
  --bulb: 3.4px;
  --bulb-band: 22px;
  margin-right: 46px;
  padding: clamp(40px, 4.6vw, 52px);
  border-radius: 28px;
  background: radial-gradient(ellipse 80% 70% at 50% 0%, var(--velvet-light), var(--velvet) 50%, var(--velvet-dark));
  box-shadow: inset 0 0 0 5px var(--brass), inset 0 0 0 8px var(--brass-dark), 0 40px 90px rgba(0, 0, 0, 0.55);
}

/* Marquee bulbs: two interleaved sets that take turns while the reels spin */
.slot-frame::before,
.slot-frame::after {
  content: "";
  position: absolute;
  inset: 10px;
  padding: var(--bulb-band);
  border-radius: 20px;
  background-size: calc(2 * var(--bulb-band)) calc(2 * var(--bulb-band));
  background-repeat: round;
  pointer-events: none;
  filter: drop-shadow(0 0 3px rgba(255, 210, 120, 0.9));
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
  mask: linear-gradient(#000 0 0) content-box exclude, linear-gradient(#000 0 0);
}

.slot-frame::before {
  background-image:
    radial-gradient(circle at 25% 25%, #ffe7a8 0 var(--bulb), transparent calc(var(--bulb) + 1px)),
    radial-gradient(circle at 75% 75%, #ffe7a8 0 var(--bulb), transparent calc(var(--bulb) + 1px));
}

.slot-frame::after {
  background-image:
    radial-gradient(circle at 75% 25%, #ffe7a8 0 var(--bulb), transparent calc(var(--bulb) + 1px)),
    radial-gradient(circle at 25% 75%, #ffe7a8 0 var(--bulb), transparent calc(var(--bulb) + 1px));
}

.slot.is-spinning .slot-frame::before {
  animation: bulbs-a 0.36s steps(1) infinite;
}

.slot.is-spinning .slot-frame::after {
  animation: bulbs-b 0.36s steps(1) infinite;
}

@keyframes bulbs-a {
  0% { opacity: 1; }
  50% { opacity: 0.2; }
}

@keyframes bulbs-b {
  0% { opacity: 0.2; }
  50% { opacity: 1; }
}

.slot-reels {
  display: grid;
  grid-template-columns: 1.32fr 1fr 1.22fr;
  gap: 10px;
  container-type: inline-size;
}

.reel {
  position: relative;
  height: 2.3em;
  overflow: hidden;
  border-radius: 10px;
  background: var(--moonlight);
  color: var(--midnight);
  font-family: var(--f-display);
  font-size: clamp(1rem, 3.3cqi, 2rem);
  line-height: 1.3;
  box-shadow: inset 0 0 0 2px rgba(0, 0, 0, 0.25);
}

/* curve of the drum */
.reel::after {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background: linear-gradient(rgba(15, 21, 48, 0.6), transparent 30%, transparent 70%, rgba(15, 21, 48, 0.6));
}

/* Four words: the first peeks in at the top of the window, the second
   sits in the middle and the third peeks in at the bottom. */
.reel-strip {
  position: absolute;
  top: -0.8em;
  right: 0;
  left: 0;
  will-change: transform;
}

.reel-strip li {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 1.3em;
  padding-inline: 0.3em;
  white-space: nowrap;
}

.slot-lever {
  position: absolute;
  top: 50%;
  left: 100%;
  width: 56px;
  height: 176px;
  margin-top: -124px;
  cursor: pointer;
}

/* housing bolted to the side of the machine */
.slot-lever::before {
  content: "";
  position: absolute;
  bottom: 0;
  left: -6px;
  width: 44px;
  height: 58px;
  border-radius: 0 12px 12px 0;
  background: linear-gradient(90deg, var(--brass-dark), #f3d48a 45%, var(--brass-dark));
  box-shadow: 0 8px 16px rgba(0, 0, 0, 0.4);
}

.lever-arm {
  position: absolute;
  bottom: 34px;
  left: 16px;
  width: 12px;
  height: 110px;
  border-radius: 6px;
  background: linear-gradient(90deg, #6d7080, #eef0f6 50%, #6d7080);
  transform-origin: 50% 100%;
}

.lever-knob {
  position: absolute;
  bottom: 124px;
  left: -1px;
  width: 46px;
  height: 46px;
  border-radius: 50%;
  background: radial-gradient(circle at 34% 30%, #ff9f95, var(--moon) 46%, #5c0812);
  box-shadow: 0 8px 16px rgba(0, 0, 0, 0.45);
}

.slot-lever.is-pulled .lever-arm {
  animation: lever-arm 0.8s cubic-bezier(0.3, 0, 0.25, 1);
}

.slot-lever.is-pulled .lever-knob {
  animation: lever-knob 0.8s cubic-bezier(0.3, 0, 0.25, 1);
}

@keyframes lever-arm {
  38% { transform: scaleY(0.18); }
}

@keyframes lever-knob {
  38% { transform: translateY(90px) scale(1.18); }
}

.slot-actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 12px 28px;
  margin-top: clamp(28px, 4vw, 44px);
}

/* ---------- Demo ---------- */

.demo {
  background: var(--midnight-2);
}

.demo-inner {
  display: grid;
  grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr);
  align-items: start;
  gap: clamp(40px, 7vw, 110px);
}

.demo-copy {
  margin-bottom: 0;
}

.demo-copy .demo-small {
  margin-top: 22px;
  font-size: var(--t-sm);
}

.demo-panel {
  padding: clamp(24px, 3.6vw, 44px);
  border-radius: 20px;
  background: var(--midnight-3);
  box-shadow: 0 0 0 1px var(--line);
}

.demo-form {
  display: grid;
  gap: 22px;
}

.field-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 22px;
}

.field label {
  display: block;
  margin-bottom: 8px;
  font-size: var(--t-sm);
  font-weight: 600;
}

/* Red star on the fields that must be filled in */
.field .req {
  color: var(--required);
}

.field input,
.field textarea {
  width: 100%;
  min-height: 52px;
  padding: 0 16px;
  border: 1px solid rgba(242, 231, 207, 0.2);
  border-radius: 10px;
  background: var(--midnight);
  color: var(--moonlight);
  transition: border-color 0.2s, box-shadow 0.2s;
}

.field input::placeholder,
.field textarea::placeholder {
  color: rgba(162, 167, 200, 0.6);
}

.field input:hover,
.field textarea:hover {
  border-color: rgba(242, 231, 207, 0.35);
}

.field input:focus,
.field textarea:focus {
  outline: none;
  border-color: var(--brass);
  box-shadow: 0 0 0 3px rgba(224, 178, 82, 0.28);
}

.field input[aria-invalid="true"],
.field textarea[aria-invalid="true"] {
  border-color: var(--error);
}

.field textarea {
  display: block;
  min-height: 120px;
  padding: 14px 16px;
  line-height: 1.5;
  resize: vertical;
  color-scheme: dark; /* dark scrollbar and resize handle */
}

/* Characters used out of the pitch's 500 */
.field-count {
  margin-top: 8px;
  color: var(--fog);
  font-size: var(--t-xs);
  text-align: right;
  font-variant-numeric: tabular-nums;
}

.field-error {
  margin-top: 8px;
  color: var(--error);
  font-size: var(--t-sm);
}

.demo-form .btn-ticket {
  justify-self: start;
  margin-top: 6px;
}

/* The Turnstile bot check is usually invisible, so it stays out of the grid
   (and its gaps) until it shows a box to click. Out of the grid it sits at
   the form's top corner, which is fine only while it has no size. */
.demo-check:not(.is-asking) {
  position: absolute;
}

.demo-form .btn-ticket:disabled {
  cursor: progress;
  opacity: 0.7;
}

.form-error {
  margin-top: -8px;
  color: var(--error);
  font-size: var(--t-sm);
}

.demo-done:focus {
  outline: none;
}

.demo-done h3 {
  font-family: var(--f-display);
  font-size: clamp(2rem, 4vw, 3rem);
  font-weight: 400;
  line-height: 1.05;
}

.demo-done p {
  max-width: 40ch;
  margin-top: 14px;
  color: var(--fog);
}

.demo-done span {
  color: var(--moonlight);
  font-weight: 600;
  overflow-wrap: anywhere;
}

.demo-done .btn-link {
  margin-top: 18px;
}

/* ---------- Footer ---------- */

.site-footer {
  padding-block: 44px;
  border-top: 1px solid var(--line);
  background: var(--midnight-3);
}

.footer-inner {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 22px 40px;
}

.footer-inner .brand {
  margin-right: 0;
}

.footer-nav {
  display: flex;
  flex-wrap: wrap;
  gap: 8px 26px;
}

.footer-nav a {
  color: var(--fog);
  font-size: var(--t-sm);
  text-decoration: none;
}

.footer-nav a:hover {
  color: var(--moonlight);
}

.footer-about {
  flex-basis: 100%;
  max-width: 70ch;
  color: var(--fog);
  font-size: var(--t-sm);
  line-height: 1.55;
}

.footer-legal {
  flex-basis: 100%;
  color: var(--fog);
  font-size: var(--t-xs);
}

/* ---------- 404 ---------- */

.lost {
  min-height: calc(100svh - var(--header-h) - 140px);
  display: grid;
  align-content: center;
}

.lost h1 {
  font-family: var(--f-display);
  font-size: var(--t-title);
  font-weight: 400;
  line-height: 1.02;
}

.lost .btn {
  margin-top: 34px;
}

/* ---------- Responsive ---------- */

@media (max-width: 960px) {
  .deck {
    grid-template-columns: 1fr;
  }

  .deck-sleeve {
    width: min(76%, 460px);
    transform: none;
  }

  .crate {
    display: flex;
    gap: 10px;
    margin-inline: calc(var(--gutter) * -1);
    padding: 18px var(--gutter) 26px;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    scroll-padding-inline: var(--gutter);
    scrollbar-width: none;
  }

  .crate::-webkit-scrollbar {
    display: none;
  }

  .crate li {
    flex: 0 0 clamp(84px, 22vw, 120px);
    scroll-snap-align: start;
  }

  .demo-inner {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 860px) {
  .menu-toggle {
    display: inline-flex;
  }

  .site-nav {
    position: absolute;
    top: var(--header-h);
    right: 0;
    left: 0;
    display: none;
    flex-direction: column;
    align-items: stretch;
    gap: 0;
    padding: 6px var(--gutter) 18px;
    border-bottom: 1px solid var(--line);
    background: var(--midnight);
    box-shadow: 0 20px 40px rgba(0, 0, 0, 0.4);
  }

  .site-header.is-open .site-nav {
    display: flex;
  }

  .site-nav a {
    padding: 14px 0;
    border-bottom: 1px solid var(--line);
    background: none;
    color: var(--moonlight);
    font-size: 1.125rem;
  }

  .site-nav a:last-child {
    border-bottom: 0;
  }
}

@media (max-width: 640px) {
  .stage {
    --drape-w: 10vw;
    /* Room under the buttons for a whole figure (the cast is about 26vw tall
       here) to stand on top of the "Now playing" strip. */
    padding-bottom: calc(28vw + 48px);
  }

  /* The "Now playing" line leaves the middle of the stage, where it sat over
     the cast, for a one-line strip along the bottom edge. The cast stands on
     top of the strip (measure() in main.js). */
  .stage-inner {
    position: static;
  }

  .stage-hint {
    position: absolute;
    inset: auto 0 0;
    margin: 0;
    padding: 8px calc(var(--drape-w) + 8px) 10px;
    overflow: hidden;
    font-size: 0.8125rem;
    line-height: 1.35;
    white-space: nowrap;
    text-overflow: ellipsis;
    text-shadow: none;
  }

  /* Phones keep the three reels side by side, like the desktop machine:
     a slimmer bulb border, and type sized to fit the longest words
     (Indestructible, Dingo Dongo, (Bass Boosted)) across the row. */
  .slot-frame {
    --bulb: 2.2px;
    --bulb-band: 14px;
    margin-right: 0;
    padding: 26px 22px;
    border-radius: 20px;
  }

  .slot-frame::before,
  .slot-frame::after {
    inset: 6px;
    border-radius: 14px;
    filter: drop-shadow(0 0 1.5px rgba(255, 210, 120, 0.9));
  }

  .slot-reels {
    grid-template-columns: 1.12fr 1fr 1.14fr;
    gap: 5px;
  }

  .reel {
    border-radius: 7px;
    font-size: clamp(0.625rem, 4.3cqi, 1.75rem);
  }

  .reel-strip li {
    padding-inline: 0.1em;
  }

  .slot-lever {
    display: none;
  }

  .field-row {
    grid-template-columns: 1fr;
  }
}

/* ---------- Reduced motion ---------- */

@media (prefers-reduced-motion: reduce) {
  html {
    scroll-behavior: auto;
  }

  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
}