/* Lost in LA: synthwave, self-contained, no external requests. */

@font-face {
  font-family: "Orbitron";
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url("/fonts/orbitron-latin-700-normal.woff2") format("woff2");
}
@font-face {
  font-family: "Orbitron";
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url("/fonts/orbitron-latin-500-normal.woff2") format("woff2");
}
@font-face {
  font-family: "Ruthie";
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("/fonts/ruthie-latin-400-normal.woff2") format("woff2");
}
@font-face {
  font-family: "Exo 2";
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("/fonts/exo-2-latin-400-normal.woff2") format("woff2");
}
@font-face {
  font-family: "Exo 2";
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url("/fonts/exo-2-latin-600-normal.woff2") format("woff2");
}

:root {
  --night: #0b0221;
  --dusk: #2a0a4a;
  --violet: #5a1a6e;
  --cyan: #00f0ff;
  --pink: #ff2bd6;
  --gold: #ffd166;
  --orange: #ff7a18;
  --ink: #f4ecff;
  --muted: #b9a7d6;
  --panel: rgba(20, 6, 48, 0.72);
  --display: "Orbitron", "Exo 2", system-ui, sans-serif;
  --sign: "Ruthie", "Snell Roundhand", "Apple Chancery", cursive;
  --body: "Exo 2", system-ui, -apple-system, "Segoe UI", sans-serif;

  /* One vertical rhythm for the whole site. --section-gap is the space between
     two neighbouring sections, and each one pays half of it at each edge, so
     two neighbours add up to the gap instead of doubling it. A section that
     carries its own background pays --band-pad per side instead, because its
     tint or photo has to stand clear of the text inside it. */
  --section-gap: clamp(3.5rem, 7vw, 5rem);
  --band-pad: clamp(2.75rem, 5.5vw, 4rem);
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
  margin: 0;
  overflow-x: hidden;
  background: var(--night);
  color: var(--ink);
  font-family: var(--body);
  font-size: 1.05rem;
  line-height: 1.6;
}
a { color: var(--cyan); }
/* An <img> width/height attribute is a presentational hint, so it leaves the
   height definite and a CSS aspect-ratio on the same image is silently
   ignored. Releasing the height here is what makes the ratio rules below
   (.strip, .about-photo, .card-media) actually crop instead of letting each
   photo run to its own natural height. Elements that set their own height,
   like .hero-photo and .section-photo .bg, out-rank this on specificity. */
img { max-width: 100%; height: auto; }
h1, h2, h3 { font-family: var(--display); letter-spacing: 0.06em; text-transform: uppercase; margin: 0 0 0.6em; }
h2 { font-size: clamp(1.5rem, 3.5vw, 2.2rem); color: var(--pink); text-shadow: 0 0 12px rgba(255, 43, 214, 0.6); }
h3 { font-size: 1.3rem; }
p { margin: 0 0 1em; }

.skip { position: absolute; left: -999px; top: 0; background: var(--pink); color: var(--night); padding: 0.5rem 1rem; z-index: 100; }
.skip:focus { left: 0.5rem; top: 0.5rem; }

/* --- hero ------------------------------------------------------------------ */
.hero {
  position: relative;
  min-height: 100svh;
  display: grid;
  grid-template-rows: auto 1fr;
  overflow: hidden;
  isolation: isolate;
}
.hero-short { min-height: 60svh; }

.sky {
  position: absolute; inset: 0; z-index: -1;
  background: linear-gradient(180deg, var(--night) 0%, var(--dusk) 45%, var(--violet) 62%, #0d0324 63%, var(--night) 100%);
}
/* Real golden-hour Los Angeles behind the neon. The photo fades into the
   night floor so the grid still reads as the ground. */
.hero-photo-wrap {
  position: absolute; inset: 0; overflow: hidden;
  animation: hero-drift 40s ease-in-out infinite alternate;
}
.hero-photo {
  position: absolute; left: 0; right: 0; top: -8%; width: 100%; height: 116%;
  object-fit: cover; object-position: center 35%;
}
/* Ken Burns, barely: a 5% breath over 40 seconds. */
@keyframes hero-drift { from { transform: scale(1); } to { transform: scale(1.05); } }
/* Scroll-driven parallax where the browser has it (no scroll listeners). */
@supports (animation-timeline: scroll()) {
  .hero-photo { animation: hero-parallax linear both; animation-timeline: scroll(root); animation-range: 0 100vh; }
  @keyframes hero-parallax { to { transform: translateY(8%); } }
}
/* A soft glow that breathes over the photo's brightest spot. Color and
   position follow the time-of-day photo via data-tod on <html>. */
.hero-flare {
  --flare-x: 14%; --flare-y: 30%; --flare-c: rgba(255, 170, 60, 0.55);
  position: absolute; inset: 0; pointer-events: none;
  background: radial-gradient(ellipse 34% 28% at var(--flare-x) var(--flare-y), var(--flare-c), transparent 70%);
  mix-blend-mode: screen;
  animation: flare-pulse 7s ease-in-out infinite;
}
:root[data-tod="evening"] .hero-flare { --flare-x: 50%; --flare-y: 48%; --flare-c: rgba(255, 150, 90, 0.26); }
:root[data-tod="evening"] .hero-photo-wrap { top: -24%; }
:root[data-tod="evening"] .hero-photo { object-position: center 88%; }
:root[data-tod="night"] .hero-flare { --flare-x: 55%; --flare-y: 38%; --flare-c: rgba(255, 215, 170, 0.22); }
:root[data-tod="night"] .hero-photo { object-position: center 40%; }
@keyframes flare-pulse { 0%, 100% { opacity: 0.55; } 50% { opacity: 1; } }
:root[data-tod="evening"] .hero-shade { background: linear-gradient(180deg, rgba(11, 2, 33, 0.5) 0%, rgba(42, 10, 74, 0.2) 40%, rgba(11, 2, 33, 0.7) 66%, var(--night) 78%); }
:root[data-tod="night"] .hero-shade { background: linear-gradient(180deg, rgba(11, 2, 33, 0.35) 0%, rgba(11, 2, 33, 0.3) 45%, rgba(11, 2, 33, 0.75) 66%, var(--night) 78%); }

/* VHS: scanlines, a slow tracking band, a faint flicker on the kicker. Off by
   default; the checkbox in the nav turns it on, :has() does the rest. */
.scanlines {
  position: absolute; inset: 0; pointer-events: none; opacity: 0; transition: opacity 0.4s ease;
  background: repeating-linear-gradient(0deg, rgba(0, 0, 0, 0.22) 0 1px, transparent 1px 3px);
  mix-blend-mode: multiply;
}
.scanlines::after {
  content: ""; position: absolute; inset: 0;
  background: linear-gradient(transparent 0 42%, rgba(255, 255, 255, 0.05) 50%, transparent 58%);
  background-size: 100% 240px; background-repeat: repeat-y;
  animation: vhs-roll 8s linear infinite;
}
@keyframes vhs-roll { from { background-position: 0 -240px; } to { background-position: 0 100vh; } }
.hero:has(.vhs-check:checked) .scanlines { opacity: 1; }
.hero:has(.vhs-check:checked) .hero-copy h1 { text-shadow: -2px 0 rgba(255, 0, 90, 0.35), 2px 0 rgba(0, 240, 255, 0.35); }
.hero:has(.vhs-check:checked) .kicker { animation: vhs-flicker 4s steps(1, end) infinite; }
@keyframes vhs-flicker { 0%, 92%, 100% { opacity: 1; } 93% { opacity: 0.55; } 95% { opacity: 1; } 97% { opacity: 0.7; } }
.vhs-toggle {
  display: inline-flex; align-items: center; gap: 0.4rem; cursor: pointer; user-select: none;
  font-family: var(--display); font-weight: 500; letter-spacing: 0.15em; font-size: 0.7rem; color: var(--muted);
  border: 1px solid rgba(185, 167, 214, 0.4); border-radius: 999px; padding: 0.25rem 0.7rem; margin-left: 1rem;
}
.vhs-toggle:hover { color: var(--ink); border-color: var(--cyan); }
.vhs-toggle input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.vhs-toggle:has(input:focus-visible) { outline: 2px solid var(--cyan); outline-offset: 2px; }
.vhs-toggle:has(input:checked) { color: var(--night); background: var(--cyan); border-color: var(--cyan); box-shadow: 0 0 12px rgba(0, 240, 255, 0.5); }
.vhs-toggle span::before { content: "\25CF"; font-size: 0.55em; vertical-align: middle; margin-right: 0.35rem; opacity: 0.5; }
.vhs-toggle:has(input:checked) span::before { opacity: 1; color: var(--pink); }

.hero-shade {
  position: absolute; inset: 0;
  background: linear-gradient(180deg, rgba(11, 2, 33, 0.55) 0%, rgba(42, 10, 74, 0.25) 40%, rgba(11, 2, 33, 0.7) 66%, var(--night) 78%);
}
.hero-short .hero-shade {
  background: linear-gradient(180deg, rgba(11, 2, 33, 0.6) 0%, rgba(11, 2, 33, 0.55) 50%, var(--night) 100%);
}
.horizon {
  position: absolute; left: 0; right: 0; top: 74%; height: 2px;
  background: var(--cyan);
  box-shadow: 0 0 12px var(--cyan), 0 0 40px rgba(0, 240, 255, 0.5);
}
.grid {
  position: absolute; left: -50%; right: -50%; top: 74%; bottom: 0;
  background-image:
    linear-gradient(rgba(0, 240, 255, 0.45) 2px, transparent 2px),
    linear-gradient(90deg, rgba(0, 240, 255, 0.45) 2px, transparent 2px);
  background-size: 80px 80px;
  transform: perspective(420px) rotateX(62deg);
  transform-origin: top center;
  animation: grid-roll 3s linear infinite;
  -webkit-mask-image: linear-gradient(#000 0%, transparent 100%);
  mask-image: linear-gradient(#000 0%, transparent 100%);
}
@keyframes grid-roll { from { background-position: 0 0; } to { background-position: 0 80px; } }
/* The short subpage hero is only 60svh tall and its copy is bottom-aligned,
   so a horizon pinned at 74% ran straight through the headline: on /about the
   line crossed the middle of the words. Anchor the ground to the bottom edge
   instead and reserve the same depth under the copy, so the two cannot meet
   whatever the hero ends up measuring. The homepage hero is tall enough that
   its copy already clears 74%, and is left alone. */
.hero-short { --ground: 15svh; }
.hero-short .horizon { top: auto; bottom: var(--ground); }
.hero-short .grid { top: auto; height: var(--ground); }
.hero-short .hero-copy { padding-bottom: calc(var(--ground) + 1.5rem); }
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .grid, .hero-photo-wrap, .hero-photo, .hero-flare, .scanlines::after, .kicker, .hero-copy h1 .glow-pink { animation: none !important; }
  .hero-flare { opacity: 0.7; }
  .nav ul, .nav-burger span { transition: none !important; }
}

.nav {
  display: flex; justify-content: space-between; align-items: center; gap: 1rem;
  padding: 1.2rem clamp(1rem, 5vw, 3rem);
  font-family: var(--display); font-weight: 500; letter-spacing: 0.12em; text-transform: uppercase; font-size: 0.85rem;
}
.nav ul { list-style: none; margin: 0; padding: 0; min-width: 0; display: flex; gap: 1.2rem; flex-wrap: wrap; justify-content: flex-end; }
.nav a { color: var(--ink); text-decoration: none; }
.nav a:hover, .nav a:focus { color: var(--cyan); text-shadow: 0 0 10px var(--cyan); }
.brand { font-weight: 700; color: var(--pink) !important; white-space: nowrap; }

.nav-check, .nav-burger { display: none; }

/* Six links plus the brand and the toggle stop fitting one row a long way
   before phone width: with seven items the last one drops to a second line
   under about 980px. So the menu collapses here rather than at the 40rem the
   rest of the layout uses. A checkbox drives it, the same trick the VHS toggle uses, so it opens
   and closes with the stylesheet alone; site.js only adds Escape and
   tap-outside on top. */
@media (max-width: 62rem) {
  /* One row: brand, VHS, burger. The links move into the panel below. */
  .nav { position: relative; gap: 0.75rem; font-size: 0.78rem; }
  .nav-check { display: block; position: absolute; opacity: 0; width: 1px; height: 1px; }
  .brand { margin-right: auto; }
  .vhs-toggle { margin-left: 0; order: 2; }
  .nav-burger {
    display: flex; order: 3; flex-direction: column; justify-content: center; gap: 5px;
    width: 44px; height: 44px; padding: 0 10px; margin-right: -0.6rem;
    cursor: pointer; -webkit-tap-highlight-color: transparent;
  }
  .nav-burger span {
    display: block; height: 2px; border-radius: 2px; background: var(--ink);
    box-shadow: 0 0 8px rgba(0, 240, 255, 0.45);
    transition: transform 0.18s ease, opacity 0.18s ease;
  }
  .nav-check:focus-visible ~ .nav-burger { outline: 2px solid var(--cyan); outline-offset: 2px; border-radius: 6px; }
  /* Open: the bars fold into a cross. The gap is 5px and each bar 2px, so the
     outer two travel 7px to meet in the middle. */
  .nav-check:checked ~ .nav-burger span:first-child { transform: translateY(7px) rotate(45deg); }
  .nav-check:checked ~ .nav-burger span:nth-child(2) { opacity: 0; }
  .nav-check:checked ~ .nav-burger span:last-child { transform: translateY(-7px) rotate(-45deg); }
  /* The panel hangs off the nav rather than pushing the hero copy down, and
     hides with visibility so its links leave the tab order when it is shut. */
  .nav ul {
    position: absolute; z-index: 20; top: calc(100% - 0.4rem);
    left: clamp(1rem, 5vw, 3rem); right: clamp(1rem, 5vw, 3rem);
    display: block; padding: 0.3rem 0;
    max-width: 24rem; margin-left: auto;
    background: rgba(17, 4, 46, 0.94);
    border: 1px solid rgba(0, 240, 255, 0.35); border-radius: 10px;
    box-shadow: 0 18px 50px rgba(11, 2, 33, 0.75), 0 0 24px rgba(0, 240, 255, 0.18);
    -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px);
    opacity: 0; visibility: hidden; transform: translateY(-0.4rem);
    transition: opacity 0.18s ease, transform 0.18s ease, visibility 0s linear 0.18s;
  }
  .nav ul li + li { border-top: 1px solid rgba(185, 167, 214, 0.16); }
  .nav ul a { display: block; padding: 0.85rem 1.1rem; }
  .nav-check:checked ~ ul {
    opacity: 1; visibility: visible; transform: none;
    transition: opacity 0.18s ease, transform 0.18s ease;
  }
}

.hero-copy {
  align-self: end;
  text-align: center;
  padding: 2rem clamp(1rem, 5vw, 3rem) clamp(3rem, 12svh, 8rem);
}
.hero-copy h1 { filter: drop-shadow(0 4px 24px rgba(11, 2, 33, 0.9)); }
.tagline { text-shadow: 0 2px 12px rgba(11, 2, 33, 0.9); }
@media (max-width: 40rem) {
  .sun { top: 24%; }
  .hero-photo { object-position: 62% 58%; }
  :root[data-tod="night"] .hero-photo { object-position: 50% 40%; }
  /* Wide dusk skyline: enlarge the photo box so the empty sky is cropped
     off the top and the towers rise into the frame. */
  :root[data-tod="evening"] .hero-photo-wrap { top: -6%; }
  :root[data-tod="evening"] .hero-photo { object-position: 42% 70%; }
  .hero-shade { background: linear-gradient(180deg, rgba(11, 2, 33, 0.45) 0%, rgba(42, 10, 74, 0.12) 38%, rgba(11, 2, 33, 0.65) 68%, var(--night) 80%); }
  .hero-copy { padding-bottom: 10svh; }
  .hero-copy h1 { font-size: clamp(2.8rem, 14.5vw, 4.4rem); letter-spacing: 0.01em; white-space: nowrap; }
}
/* The sign: a neon-tube script, mixed case, with the same cyan/pink glow. */
.hero-copy h1 {
  font-family: var(--sign);
  font-weight: 400;
  text-transform: none;
  letter-spacing: 0.01em;
  font-size: clamp(3.8rem, 11.5vw, 9rem);
  line-height: 1;
  margin: 0 0 0.1em;
  padding: 0 0.25em;
}
.glow-cyan { color: var(--cyan); text-shadow: 0 0 3px rgba(255, 255, 255, 0.3), 0 0 10px var(--cyan), 0 0 28px rgba(0, 240, 255, 0.6), 0 0 60px rgba(0, 240, 255, 0.3); }
.glow-pink { color: var(--pink); text-shadow: 0 0 3px rgba(255, 255, 255, 0.3), 0 0 10px var(--pink), 0 0 28px rgba(255, 43, 214, 0.6), 0 0 60px rgba(255, 43, 214, 0.3); }
/* A neon tube that blinks once in a while: the pink half dips for a frame,
   twice, every 13 seconds. */
.hero-copy h1 .glow-pink { animation: tube-blink 13s steps(1, end) infinite; }
@keyframes tube-blink { 0%, 71%, 73%, 76%, 100% { opacity: 1; } 72%, 75% { opacity: 0.55; } }
.kicker { font-family: var(--display); font-weight: 500; letter-spacing: 0.3em; text-transform: uppercase; font-size: 0.8rem; color: var(--gold); margin-bottom: 1rem; }
.tagline { font-size: clamp(1.05rem, 2.2vw, 1.4rem); color: var(--muted); max-width: 34ch; margin: 0 auto 2rem; }

.cta { display: flex; gap: 1rem; justify-content: center; flex-wrap: wrap; }
.cta .btn { flex: 0 1 auto; max-width: 100%; text-align: center; }
@media (max-width: 40rem) { .cta .btn { flex: 1 1 100%; } }
.btn {
  display: inline-block;
  font-family: var(--display); font-weight: 700; letter-spacing: 0.12em; text-transform: uppercase; font-size: 0.85rem;
  padding: 0.9rem 1.6rem; border-radius: 4px; text-decoration: none;
  border: 2px solid transparent; transition: transform 0.15s ease, box-shadow 0.15s ease;
}
.btn:hover, .btn:focus { transform: translateY(-2px); }
.btn-pink { background: var(--pink); color: var(--night); box-shadow: 0 0 20px rgba(255, 43, 214, 0.55); }
.btn-cyan { background: var(--cyan); color: var(--night); box-shadow: 0 0 20px rgba(0, 240, 255, 0.55); }
.btn-ghost { border-color: var(--cyan); color: var(--cyan); background: transparent; }
.btn-ghost:hover, .btn-ghost:focus { box-shadow: 0 0 20px rgba(0, 240, 255, 0.45); }

/* --- mailing list form ---------------------------------------------------- */
.visually-hidden { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.hp { position: absolute; left: -9999px; width: 1px; height: 1px; opacity: 0; }
.subscribe { display: flex; flex-wrap: wrap; gap: 0.7rem; align-items: stretch; max-width: 34rem; margin: 0.5rem 0 0.8rem; }
.subscribe input[type="email"] {
  flex: 1 1 14rem; min-width: 0;
  font: inherit; color: var(--ink); background: rgba(20, 6, 48, 0.85);
  border: 1px solid rgba(0, 240, 255, 0.4); border-radius: 4px; padding: 0.85rem 1rem;
}
.subscribe input[type="email"]:focus { outline: none; border-color: var(--cyan); box-shadow: 0 0 14px rgba(0, 240, 255, 0.4); }
.subscribe button { flex: 0 0 auto; cursor: pointer; }
.subscribe button:disabled { opacity: 0.6; cursor: wait; transform: none; }
.form-msg { flex: 1 1 100%; margin: 0; min-height: 1.4em; font-size: 0.95rem; }
.form-msg.ok { color: var(--cyan); }
.form-msg.err { color: var(--gold); }
.h-small { font-size: 1rem; color: var(--cyan); margin-top: 2.2rem; }

/* --- release pages ---------------------------------------------------------- */
.release-link { text-decoration: none; color: inherit; transition: box-shadow 0.2s ease, transform 0.2s ease; }
.release-link:hover, .release-link:focus { box-shadow: 0 0 28px rgba(255, 43, 214, 0.35); transform: translateY(-2px); }
.release-copy .more { color: var(--cyan); font-family: var(--display); font-size: 0.75rem; letter-spacing: 0.15em; text-transform: uppercase; margin: 0; }
.release-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 1.2rem; }
.release-card {
  display: grid; grid-template-columns: minmax(8rem, 12rem) 1fr; gap: 1.5rem; align-items: center;
  background: var(--panel); border: 1px solid rgba(255, 43, 214, 0.35); border-radius: 10px; padding: 1.2rem;
  text-decoration: none; color: inherit;
}
.release-card:hover, .release-card:focus { box-shadow: 0 0 28px rgba(255, 43, 214, 0.35); }
.release-card h2 { font-size: 1.3rem; color: var(--cyan); text-shadow: none; margin-bottom: 0.3em; }
.release-card p:last-child { margin: 0; }
@media (max-width: 40rem) { .release-card { grid-template-columns: 1fr; } }
.release-page { display: grid; grid-template-columns: minmax(14rem, 22rem) 1fr; gap: 2.5rem; align-items: start; }
@media (max-width: 48rem) { .release-page { grid-template-columns: 1fr; } }
.release-art img, .release-art .art { width: 100%; aspect-ratio: 1; border-radius: 8px; border: 1px solid rgba(255, 43, 214, 0.4); box-shadow: 0 0 30px rgba(255, 43, 214, 0.25); }
.release-art img { display: block; height: auto; object-fit: cover; }
.release-meta { color: var(--muted); font-family: var(--display); font-size: 0.8rem; letter-spacing: 0.15em; text-transform: uppercase; }
.release-body iframe { width: 100%; max-width: 40rem; border: 0; border-radius: 6px; margin: 0.5rem 0 1rem; }
.tracklist { list-style: decimal inside; margin: 0 0 1.5rem; padding: 0; }
.tracklist li { padding: 0.4rem 0; border-bottom: 1px solid rgba(0, 240, 255, 0.15); display: flex; justify-content: space-between; gap: 1rem; }
.tracklist li span { color: var(--muted); font-variant-numeric: tabular-nums; }

/* --- /listen smart link ------------------------------------------------------ */
.page-smartlink { background: radial-gradient(ellipse at top, var(--violet) 0%, var(--dusk) 35%, var(--night) 75%); min-height: 100svh; }
.smartlink { max-width: 26rem; margin: 0 auto; padding: 2.5rem 1.2rem 3rem; text-align: center; }
.smartlink-art { position: relative; width: 11rem; aspect-ratio: 1; margin: 0 auto 1.4rem; border-radius: 10px; overflow: hidden; border: 1px solid rgba(255, 43, 214, 0.45); box-shadow: 0 0 40px rgba(255, 43, 214, 0.3); background: linear-gradient(180deg, var(--night) 0%, var(--dusk) 55%, var(--night) 56%); }
.smartlink h1 { font-size: 1.5rem; color: var(--ink); margin-bottom: 1.4rem; }
.smartlinks { list-style: none; margin: 0 0 1rem; padding: 0; display: grid; gap: 0.7rem; }
.smartlink-btn {
  display: block; padding: 1rem; border-radius: 6px; text-decoration: none;
  font-family: var(--display); font-weight: 500; letter-spacing: 0.12em; text-transform: uppercase; font-size: 0.85rem;
  color: var(--ink); background: var(--panel); border: 1px solid rgba(0, 240, 255, 0.4);
  transition: transform 0.15s ease, box-shadow 0.15s ease;
}
.smartlink-btn:hover, .smartlink-btn:focus { transform: translateY(-2px); box-shadow: 0 0 20px rgba(0, 240, 255, 0.45); }
.smartlink-btn.presave { background: var(--pink); color: var(--night); border-color: transparent; font-weight: 700; box-shadow: 0 0 20px rgba(255, 43, 214, 0.5); }
.smartlink .subscribe { margin: 1.5rem auto 0; justify-content: center; }
.smartlink .subscribe input[type="email"] { flex-basis: 100%; }
.smartlink .subscribe button { flex: 1 1 100%; }

/* --- photo-backed sections --------------------------------------------------- */
.section-photo { position: relative; isolation: isolate; overflow: hidden; }
.section-photo .bg {
  position: absolute; inset: 0; z-index: -2; width: 100%; height: 100%;
  object-fit: cover; object-position: center;
}
.section-photo::after {
  content: ""; position: absolute; inset: 0; z-index: -1;
  background: linear-gradient(180deg, var(--night) 0%, rgba(11, 2, 33, 0.72) 25%, rgba(11, 2, 33, 0.72) 75%, var(--night) 100%);
}
.section-photo .section { padding-block: var(--band-pad); }

.strip { padding: calc(var(--section-gap) / 2) clamp(1rem, 5vw, 3rem); }
.strip-inner { max-width: 62rem; margin: 0 auto; }
.strip-title { font-family: var(--display); font-weight: 500; letter-spacing: 0.3em; text-transform: uppercase; font-size: 0.8rem; color: var(--gold); margin: 0 0 1rem; }
.strip ul { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(4, 1fr); gap: 0.6rem; }
@media (max-width: 40rem) { .strip ul { grid-template-columns: repeat(2, 1fr); } }
.strip figure { margin: 0; position: relative; border-radius: 6px; overflow: hidden; border: 1px solid rgba(0, 240, 255, 0.25); }
.strip img { display: block; width: 100%; aspect-ratio: 4/3; object-fit: cover; transition: transform 0.4s ease; }
.strip figure:hover img { transform: scale(1.04); }
.strip figcaption {
  position: absolute; left: 0; right: 0; bottom: 0; padding: 0.5rem 0.7rem;
  font-family: var(--display); font-weight: 500; font-size: 0.65rem; letter-spacing: 0.15em; text-transform: uppercase;
  color: var(--ink); background: linear-gradient(180deg, transparent, rgba(11, 2, 33, 0.85));
}

.about-grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(14rem, 20rem); gap: 2.5rem; align-items: center; }
@media (max-width: 48rem) { .about-grid { grid-template-columns: 1fr; } }
.about-photo { margin: 0; border-radius: 10px; overflow: hidden; border: 1px solid rgba(255, 43, 214, 0.4); box-shadow: 0 0 30px rgba(255, 43, 214, 0.25); }
.about-photo img { display: block; width: 100%; aspect-ratio: 4/5; object-fit: cover; object-position: 82% 30%; }

.credits { list-style: none; margin: 0; padding: 0; }
.credits li { padding: 0.8rem 0; border-bottom: 1px solid rgba(0, 240, 255, 0.15); }
.credits li:last-child { border-bottom: 0; }

/* --- sections -------------------------------------------------------------- */
.section { max-width: 62rem; margin: 0 auto; padding: calc(var(--section-gap) / 2) clamp(1rem, 5vw, 3rem); }
.section-alt { position: relative; padding-block: var(--band-pad); }
.section-alt::before {
  content: ""; position: absolute; inset: 0; z-index: -1;
  background: linear-gradient(180deg, transparent, rgba(90, 26, 110, 0.25), transparent);
}
.lede { font-size: 1.2rem; color: var(--ink); max-width: 52ch; }
.note { color: var(--muted); font-size: 0.95rem; }

.platforms { list-style: none; margin: 1.5rem 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fit, minmax(10rem, 1fr)); gap: 0.8rem; }
.platform {
  display: block; text-align: center; text-decoration: none;
  font-family: var(--display); font-weight: 500; letter-spacing: 0.1em; text-transform: uppercase; font-size: 0.85rem;
  color: var(--ink); background: var(--panel); border: 1px solid rgba(0, 240, 255, 0.35); border-radius: 6px;
  padding: 1rem;
}
.platform:hover, .platform:focus { border-color: var(--cyan); box-shadow: 0 0 18px rgba(0, 240, 255, 0.4); }
/* Placeholders until the owner fills in real URLs (docs/CONTENT.md). They ship
   as <span aria-disabled>, not anchors: pointer-events only stops the mouse, so
   as links they stayed in the tab order and activated on Enter. 0.6 keeps the
   dimmed label above the 4.5:1 contrast floor. */
.platform.todo, .smartlink-btn.todo { opacity: 0.6; cursor: default; }
.platform.todo:hover, .smartlink-btn.todo:hover { box-shadow: none; border-color: rgba(0, 240, 255, 0.35); transform: none; }

.release {
  display: grid; grid-template-columns: minmax(12rem, 18rem) 1fr; gap: 2rem; align-items: center;
  background: var(--panel); border: 1px solid rgba(255, 43, 214, 0.35); border-radius: 10px; padding: 1.5rem;
}
@media (max-width: 40rem) { .release { grid-template-columns: 1fr; } }
.art {
  position: relative; aspect-ratio: 1; border-radius: 6px; overflow: hidden;
  background: linear-gradient(180deg, var(--night) 0%, var(--dusk) 55%, var(--night) 56%);
}
.art-sun {
  position: absolute; left: 50%; top: 52%; width: 55%; aspect-ratio: 1; transform: translate(-50%, -50%);
  border-radius: 50%; background: linear-gradient(180deg, var(--gold), var(--orange) 50%, var(--pink));
  -webkit-mask-image: linear-gradient(#000 60%, transparent 60% 64%, #000 64% 74%, transparent 74% 79%, #000 79% 88%, transparent 88% 93%, #000 93%);
  mask-image: linear-gradient(#000 60%, transparent 60% 64%, #000 64% 74%, transparent 74% 79%, #000 79% 88%, transparent 88% 93%, #000 93%);
}
.art-grid {
  position: absolute; left: -50%; right: -50%; top: 56%; bottom: 0;
  background-image: linear-gradient(rgba(0, 240, 255, 0.5) 1px, transparent 1px), linear-gradient(90deg, rgba(0, 240, 255, 0.5) 1px, transparent 1px);
  background-size: 30px 30px;
  transform: perspective(200px) rotateX(60deg); transform-origin: top center;
}
.release-copy h3 { color: var(--cyan); }

.prose { max-width: 42rem; }

/* A trailing paragraph margin lands on top of the padding below it, which is
   what made short sections read as holes. The padding owns that edge. */
.section > :last-child,
.strip-inner > :last-child,
.prose > :last-child,
.article-body > :last-child { margin-bottom: 0; }

.footer {
  display: flex; justify-content: space-between; gap: 1rem; flex-wrap: wrap;
  padding: 2rem clamp(1rem, 5vw, 3rem); border-top: 1px solid rgba(0, 240, 255, 0.2);
  color: var(--muted); font-size: 0.9rem;
}
.footer p { margin: 0; }

/* ============================================================================
   Multi-page layer. Everything below serves the pages added when the site
   stopped being one scroll: the city articles, the hub, about, contact and
   press. The rules above still own the homepage and the release pages.
   ========================================================================= */

/* --- hero additions -------------------------------------------------------- */
/* .tagline is centred at 34ch, which is a homepage measure. A subpage deck is
   a sentence of orientation and wants a wider, quieter line. */
.hero-deck {
  font-size: clamp(1rem, 1.8vw, 1.2rem); color: var(--muted);
  max-width: 46ch; margin: 0 auto 0.6rem; text-shadow: 0 2px 12px rgba(11, 2, 33, 0.9);
}

/* Per-page hero crops. CSP forbids inline styles, so the crop travels as a
   body class, the same way :root[data-tod] already works. */
.page-city .hero-photo { object-position: center 58%; }
.page-about .hero-photo { object-position: 82% 30%; }
.page-contact .hero-photo { object-position: center 62%; }
.page-press .hero-photo { object-position: center 45%; }
@media (max-width: 40rem) {
  .page-city .hero-photo { object-position: 55% 55%; }
  .page-about .hero-photo { object-position: 78% 35%; }
  .page-contact .hero-photo { object-position: 58% 60%; }
  .page-press .hero-photo { object-position: 52% 48%; }
}

/* --- long-form article ------------------------------------------------------ */
.article { max-width: 44rem; margin: 0 auto; }
.article-body { font-size: 1.08rem; line-height: 1.72; }
.article-body > p:first-of-type { font-size: 1.18rem; color: var(--ink); }
/* The global h2 is an uppercase glowing pink banner, which reads as a section
   divider on the homepage and as shouting inside 1400 words of prose. */
.article-body h2 {
  font-size: clamp(1.15rem, 2.2vw, 1.45rem); color: var(--cyan);
  text-shadow: none; letter-spacing: 0.14em; margin: 2.8rem 0 0.9rem;
}
.article-body h2:first-child { margin-top: 0; }
.article-body h3 { font-size: 1rem; color: var(--gold); letter-spacing: 0.14em; margin: 2rem 0 0.6rem; }
.article-body ul, .article-body ol { padding-left: 1.2rem; margin: 0 0 1.4rem; }
.article-body li { margin-bottom: 0.5rem; }
.article-body a { text-decoration-thickness: 1px; text-underline-offset: 2px; }
.article-meta {
  font-family: var(--display); font-size: 0.7rem; letter-spacing: 0.18em;
  text-transform: uppercase; color: var(--muted); margin: 0 0 2rem;
}
.subhead { font-size: 1.2rem; color: var(--muted); max-width: 52ch; margin: 0 0 2rem; }
.rule { border: 0; height: 1px; background: rgba(0, 240, 255, 0.18); margin: 3rem 0; }

/* In-article figures. .fig sits at body width, .fig-wide breaks out to the
   section measure on desktop. */
.fig { margin: 2.2rem 0; }
.fig img {
  display: block; width: 100%; height: auto; border-radius: 8px;
  border: 1px solid rgba(0, 240, 255, 0.25);
}
.fig-cap {
  font-family: var(--display); font-size: 0.65rem; letter-spacing: 0.15em;
  text-transform: uppercase; color: var(--muted); margin: 0.6rem 0 0;
}
.fig-cap a { color: inherit; }
.fig-cap a:hover, .fig-cap a:focus { color: var(--cyan); }
@media (min-width: 60rem) { .fig-wide { margin-left: -6rem; margin-right: -6rem; } }

/* --- breadcrumbs ------------------------------------------------------------ */
/* Every subpage emits BreadcrumbList and until now nothing rendered it. */
.crumbs {
  font-family: var(--display); font-size: 0.68rem; letter-spacing: 0.16em;
  text-transform: uppercase; color: var(--muted); margin: 0 0 1.6rem;
}
.crumbs ol { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 0.5rem; }
.crumbs li + li::before { content: "\00B7"; margin-right: 0.5rem; opacity: 0.6; }
.crumbs a { color: var(--muted); text-decoration: none; }
.crumbs a:hover, .crumbs a:focus { color: var(--cyan); }
.crumbs-here { color: var(--ink); }

/* --- card grid, for the city hub -------------------------------------------- */
.cards { list-style: none; margin: 0; padding: 0; display: grid; gap: 1.2rem; grid-template-columns: repeat(auto-fit, minmax(16rem, 1fr)); }
.card {
  display: flex; flex-direction: column; height: 100%; overflow: hidden;
  background: var(--panel); border: 1px solid rgba(255, 43, 214, 0.35);
  border-radius: 10px; text-decoration: none; color: inherit;
  transition: transform 0.15s ease, box-shadow 0.15s ease, border-color 0.15s ease;
}
.card:hover, .card:focus { transform: translateY(-2px); border-color: var(--cyan); box-shadow: 0 0 26px rgba(0, 240, 255, 0.3); }
.card-media { display: block; width: 100%; aspect-ratio: 16/9; object-fit: cover; }
.card-title { font-family: var(--display); font-size: 0.95rem; letter-spacing: 0.1em; text-transform: uppercase; color: var(--cyan); margin: 1rem 1.1rem 0.5rem; }
.card-note { margin: 0 1.1rem 1rem; color: var(--muted); font-size: 0.95rem; }
.card-link { margin: auto 1.1rem 1.1rem; font-family: var(--display); font-size: 0.7rem; letter-spacing: 0.15em; text-transform: uppercase; color: var(--pink); }

/* --- definition lists ------------------------------------------------------- */
/* The verifiable-facts block. Also the pressure valve for the number budget:
   mileages and hours live here so the prose does not fill up with digits. */
.deflist { margin: 2rem 0; padding: 0; border-top: 1px solid rgba(0, 240, 255, 0.18); }
.deflist div {
  display: grid; grid-template-columns: minmax(8rem, 14rem) 1fr; gap: 0.4rem 1.5rem;
  padding: 0.75rem 0; border-bottom: 1px solid rgba(0, 240, 255, 0.18);
}
.deflist dt { font-family: var(--display); font-size: 0.7rem; letter-spacing: 0.14em; text-transform: uppercase; color: var(--muted); margin: 0; }
.deflist dd { margin: 0; }
.deflist-wide div { grid-template-columns: 1fr; }
@media (max-width: 40rem) { .deflist div { grid-template-columns: 1fr; gap: 0.15rem; } }

/* --- sources ---------------------------------------------------------------- */
/* Every checkable claim on this site should be checkable by the reader too. */
.sources, .credits { list-style: none; margin: 0; padding: 0; }
.sources li { padding: 0.7rem 0; border-bottom: 1px solid rgba(0, 240, 255, 0.15); font-size: 0.92rem; color: var(--muted); }
.sources li:last-child { border-bottom: 0; }
.source-note { font-size: 0.9rem; color: var(--muted); }

/* --- unfilled facts --------------------------------------------------------- */
/* Deliberately loud. An empty placeholder must not be able to ship unnoticed. */
.todo-note {
  border: 1px dashed rgba(255, 209, 102, 0.6); border-radius: 8px;
  padding: 0.9rem 1.1rem; margin: 1.5rem 0; color: var(--gold);
  background: rgba(255, 209, 102, 0.06); font-size: 0.95rem;
}
.todo-note p { margin: 0; }
.todo-note::before {
  content: "To be confirmed"; display: block; font-family: var(--display);
  font-size: 0.62rem; letter-spacing: 0.18em; text-transform: uppercase;
  opacity: 0.8; margin-bottom: 0.35rem;
}

/* --- footer groups ---------------------------------------------------------- */
/* Carries all fourteen pages, so every page is one click from every other. */
.footer { flex-direction: column; align-items: flex-start; gap: 1.8rem; }
.footer-groups { display: grid; gap: 1.6rem; grid-template-columns: repeat(auto-fit, minmax(11rem, 1fr)); width: 100%; }
.footer-heading { font-family: var(--display); font-weight: 500; font-size: 0.68rem; letter-spacing: 0.2em; text-transform: uppercase; color: var(--gold); margin: 0 0 0.6rem; }
.footer-groups ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 0.4rem; }
.footer-groups a { color: var(--muted); text-decoration: none; font-size: 0.9rem; }
.footer-groups a:hover, .footer-groups a:focus { color: var(--cyan); }

/* --- contact ---------------------------------------------------------------- */
.contact-grid { display: grid; gap: 2.5rem; grid-template-columns: repeat(auto-fit, minmax(17rem, 1fr)); align-items: start; }
.contact-block h2 { font-size: 1.1rem; color: var(--cyan); text-shadow: none; letter-spacing: 0.14em; }
.contact-block p:last-child { margin-bottom: 0; }

/* --- previous / next -------------------------------------------------------- */
.pager { display: grid; gap: 1rem; grid-template-columns: 1fr 1fr; margin: 3rem 0 0; list-style: none; padding: 0; }
@media (max-width: 40rem) { .pager { grid-template-columns: 1fr; } }
.pager-item {
  display: block; padding: 1rem 1.2rem; border-radius: 6px; text-decoration: none;
  border: 2px solid var(--cyan); color: var(--ink); background: transparent;
  transition: transform 0.15s ease, box-shadow 0.15s ease;
}
.pager-item:hover, .pager-item:focus { transform: translateY(-2px); box-shadow: 0 0 20px rgba(0, 240, 255, 0.45); }
.pager-next { text-align: right; }
.pager-label { display: block; font-family: var(--display); font-size: 0.62rem; letter-spacing: 0.18em; text-transform: uppercase; color: var(--muted); margin-bottom: 0.3rem; }

/* --- inline table of contents ----------------------------------------------- */
.toc { background: var(--panel); border: 1px solid rgba(0, 240, 255, 0.28); border-radius: 10px; padding: 1.2rem 1.4rem; margin: 0 0 2.5rem; }
.toc-title { font-family: var(--display); font-size: 0.66rem; letter-spacing: 0.2em; text-transform: uppercase; color: var(--gold); margin: 0 0 0.7rem; }
.toc-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 0.45rem; }
.toc-list a { text-decoration: none; }
.toc-list a:hover, .toc-list a:focus { text-decoration: underline; }
/* Anchored headings must not land under the top of the viewport. */
.anchor { scroll-margin-top: 1.5rem; }

/* --- 404 -------------------------------------------------------------------- */
.page-404 .section { text-align: center; }

/* --- the arcade -------------------------------------------------------------- */
.page-arcade .hero-photo { object-position: center 58%; }
.page-game .hero-photo { object-position: center 60%; }
@media (max-width: 40rem) {
  .page-arcade .hero-photo { object-position: 55% 55%; }
  .page-game .hero-photo { object-position: 50% 58%; }
}

/* The cabinet: HUD above the screen, controls below, one panel around all of
   it. The canvas draws at a fixed logical size and CSS scales it; height:auto
   keeps the ratio the width/height attributes declare. */
.cabinet {
  max-width: 33rem; margin: 0 auto;
  background: var(--panel); border: 1px solid rgba(255, 43, 214, 0.35);
  border-radius: 10px; padding: 0.9rem;
  box-shadow: 0 0 30px rgba(255, 43, 214, 0.2);
}
.cabinet-wide { max-width: 38rem; }
/* Twisted Dragon draws at 256 by 224 and is scaled up by a factor of two or
   more. Smoothing that turns hand-placed pixels into mush, so this one canvas
   is scaled nearest-neighbour. */
.cabinet-pixel canvas { image-rendering: pixelated; image-rendering: crisp-edges; }
.cabinet canvas {
  display: block; width: 100%; height: auto;
  border-radius: 6px; background: #070116;
  touch-action: none;
}
.cabinet-hud {
  display: flex; justify-content: space-between; align-items: baseline; gap: 1rem;
  font-family: var(--display); font-weight: 500; font-size: 0.72rem;
  letter-spacing: 0.16em; text-transform: uppercase; color: var(--muted);
  margin: 0 0 0.7rem;
}
.cabinet-hud b { color: var(--cyan); font-weight: 700; font-variant-numeric: tabular-nums; margin-left: 0.35rem; }
.cabinet-title { color: var(--pink); }
.cabinet-note { margin: 0.8rem 0 0; color: var(--muted); font-size: 0.88rem; text-align: center; }

/* Full screen. The button is built by cabinet.js rather than written into the
   five pages, because it is only worth having where the script that answers
   it is running. The panel goes full screen rather than the canvas, so the
   score line goes with it and the letterboxing is ours. --cab-ar is the
   game's own aspect ratio, set by the cabinet from the canvas attributes. */
.cabinet-full {
  display: block; margin: 0.8rem auto 0; cursor: pointer;
  font-family: var(--display); font-size: 0.68rem; font-weight: 500;
  letter-spacing: 0.16em; text-transform: uppercase;
  color: var(--cyan); background: transparent;
  border: 1px solid rgba(0, 240, 255, 0.35); border-radius: 999px;
  padding: 0.36rem 0.95rem;
}
.cabinet-full:hover,
.cabinet-full:focus-visible { color: var(--night); background: var(--cyan); border-color: var(--cyan); }

.cabinet:fullscreen {
  max-width: none; width: 100%; height: 100%; margin: 0; padding: 1rem;
  border: 0; border-radius: 0; box-shadow: none; background: #05010f;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
}
.cabinet:fullscreen canvas {
  width: min(100%, calc((100vh - 6rem) * var(--cab-ar, 1.5))); height: auto;
}
.cabinet:fullscreen .cabinet-hud { width: min(100%, 44rem); margin: 0 0 0.6rem; }
.cabinet:fullscreen .cabinet-note { display: none; }
.cabinet:-webkit-full-screen {
  max-width: none; width: 100%; height: 100%; margin: 0; padding: 1rem;
  border: 0; border-radius: 0; box-shadow: none; background: #05010f;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
}
.cabinet:-webkit-full-screen canvas {
  width: min(100%, calc((100vh - 6rem) * var(--cab-ar, 1.5))); height: auto;
}
.cabinet:-webkit-full-screen .cabinet-note { display: none; }
.cabinet-fallback { margin: 0.8rem 0 0; color: var(--gold); font-size: 0.88rem; text-align: center; }

/* --- the mixing desk ---------------------------------------------------------- */
/* /loops. The same panel as the arcade cabinet, with a screen on top, a
   transport row, one strip per loop and the equalizer at the foot. The
   [hidden] blocks are the parts only desk.js can drive; it unhides them, so a
   reader with scripts off sees a native player per loop and nothing that does
   not work. */
.page-loops .hero-photo { object-position: center 55%; }
.desk {
  max-width: 44rem; margin: 0 auto;
  background: var(--panel); border: 1px solid rgba(255, 43, 214, 0.35);
  border-radius: 10px; padding: 0.9rem;
  box-shadow: 0 0 30px rgba(255, 43, 214, 0.2);
}
.desk-hud {
  display: flex; justify-content: space-between; align-items: baseline; gap: 1rem;
  font-family: var(--display); font-weight: 500; font-size: 0.72rem;
  letter-spacing: 0.16em; text-transform: uppercase; color: var(--muted);
  margin: 0 0 0.7rem;
}
.desk-hud b { color: var(--cyan); font-weight: 700; font-variant-numeric: tabular-nums; margin-left: 0.35rem; }
.desk-title { color: var(--pink); }
.desk-screen canvas {
  display: block; width: 100%; height: auto;
  border-radius: 6px; background: #070116;
}
.desk-modes { display: flex; justify-content: center; gap: 0.4rem; margin: 0.7rem 0 0; flex-wrap: wrap; }
.desk-btn {
  cursor: pointer;
  font-family: var(--display); font-size: 0.66rem; font-weight: 500;
  letter-spacing: 0.16em; text-transform: uppercase;
  color: var(--cyan); background: transparent;
  border: 1px solid rgba(0, 240, 255, 0.35); border-radius: 999px;
  padding: 0.36rem 0.95rem;
}
/* Hover must not look like pressed, or a chip under the pointer reads as
   lit whichever state it is in, and on a phone the hover sticks after a
   tap. So hover is a border glow, focus is a ring, pressed is the fill. */
@media (hover: hover) {
  .desk-btn:hover { border-color: var(--cyan); box-shadow: 0 0 10px rgba(0, 240, 255, 0.35); }
}
.desk-btn:focus-visible { outline: 2px solid var(--gold); outline-offset: 2px; }
.desk-btn[aria-pressed="true"] { color: var(--night); background: var(--cyan); border-color: var(--cyan); box-shadow: 0 0 14px rgba(0, 240, 255, 0.45); }
.desk-btn[aria-pressed="false"] { color: var(--cyan); background: transparent; }
.desk-screen .cabinet-full { margin-top: 0.7rem; }

.desk-transport { display: flex; align-items: center; gap: 1rem; flex-wrap: wrap; margin: 1.1rem 0; }
.desk-play { min-width: 6.5rem; padding: 0.65rem 1.2rem; font-size: 0.78rem; cursor: pointer; }
.desk-master { flex: 1 1 12rem; }
.desk-rate { font-family: var(--display); font-size: 0.62rem; letter-spacing: 0.16em; text-transform: uppercase; color: var(--muted); font-variant-numeric: tabular-nums; }

.desk-fader { display: flex; align-items: center; gap: 0.6rem; min-width: 0; }
.desk-fader span {
  flex: 0 0 3.2rem; font-family: var(--display); font-size: 0.6rem; letter-spacing: 0.16em;
  text-transform: uppercase; color: var(--muted);
}
.desk-fader input { flex: 1 1 6rem; min-width: 0; accent-color: var(--cyan); cursor: pointer; }

.desk-loops { list-style: none; margin: 0; padding: 0; display: grid; gap: 0.6rem; }
.desk-loop {
  display: grid; grid-template-columns: 1fr auto; gap: 0.5rem 1rem; align-items: center;
  padding: 0.75rem 0.9rem; border: 1px solid rgba(0, 240, 255, 0.2); border-radius: 8px;
  background: rgba(7, 1, 22, 0.55);
  transition: border-color 0.15s ease, box-shadow 0.15s ease;
}
.desk-loop.is-on { border-color: var(--cyan); box-shadow: 0 0 14px rgba(0, 240, 255, 0.25); }
.desk-loop-title { margin: 0; font-family: var(--display); font-size: 0.85rem; letter-spacing: 0.1em; text-transform: uppercase; color: var(--ink); }
.desk-loop audio { grid-column: 1 / -1; width: 100%; }
.desk-switch { min-width: 4rem; }
.desk-faders { grid-column: 1 / -1; display: grid; gap: 0.4rem 1.5rem; grid-template-columns: repeat(auto-fit, minmax(14rem, 1fr)); }
.desk-loop-note { grid-column: 1 / -1; margin: 0; font-size: 0.82rem; color: var(--muted); }
.desk-loop.is-on .desk-loop-note { color: var(--cyan); }

/* The [hidden] blocks are the JS-only parts. Their own display rules would
   beat the browser's [hidden] otherwise, and show the controls to a reader
   with scripts off. */
.desk [hidden] { display: none !important; }
.desk-library-wrap { margin: 0 0 1rem; }
.desk-library { display: flex; flex-wrap: wrap; gap: 0.45rem; }
.desk-chip { padding: 0.45rem 1rem; }
.desk-strip-btns { display: flex; gap: 0.4rem; flex-wrap: wrap; justify-content: flex-end; }
.desk-download { color: var(--gold); border-color: rgba(255, 209, 102, 0.4); }
@media (hover: hover) {
  .desk-download:hover { border-color: var(--gold); box-shadow: 0 0 10px rgba(255, 209, 102, 0.35); }
}
.desk-download:disabled { opacity: 0.6; cursor: wait; }
.desk-remove { color: var(--muted); border-color: rgba(185, 167, 214, 0.35); }
@media (hover: hover) {
  .desk-remove:hover { border-color: var(--muted); box-shadow: 0 0 10px rgba(185, 167, 214, 0.35); }
}
.desk-rate b { color: var(--cyan); font-weight: 700; margin-left: 0.35rem; }
.desk-eq-wrap { margin: 1.1rem 0 0; padding-top: 0.9rem; border-top: 1px solid rgba(0, 240, 255, 0.18); }
.desk-eq-head { display: flex; justify-content: space-between; align-items: center; gap: 1rem; margin: 0 0 0.6rem; }
.desk-eq-title { font-family: var(--display); font-size: 0.66rem; letter-spacing: 0.2em; text-transform: uppercase; color: var(--gold); }
.desk-eq { display: grid; grid-template-columns: repeat(10, 1fr); gap: 0.2rem; }
.desk-band { display: flex; flex-direction: column; align-items: center; gap: 0.35rem; min-width: 0; }
/* Vertical sliders. writing-mode is the standard way; a browser without it
   shows the same slider lying down, which still works. */
.desk-band input {
  writing-mode: vertical-lr; direction: rtl;
  width: 1.4rem; height: 6.5rem; max-width: 100%;
  accent-color: var(--pink); cursor: pointer;
}
.desk-band span { font-family: var(--display); font-size: 0.55rem; letter-spacing: 0.1em; color: var(--muted); }
.desk-status { margin: 0.8rem 0 0; color: var(--gold); font-size: 0.88rem; text-align: center; }

/* Full screen for the screen panel, on the cabinet's pattern. --desk-ar is
   the canvas's own ratio, set by desk.js from its attributes. */
.desk-screen:fullscreen {
  width: 100%; height: 100%; padding: 1rem; background: #05010f;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
}
.desk-screen:fullscreen canvas { width: min(100%, calc((100vh - 7rem) * var(--desk-ar, 3))); height: auto; }
.desk-screen:-webkit-full-screen {
  width: 100%; height: 100%; padding: 1rem; background: #05010f;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
}
.desk-screen:-webkit-full-screen canvas { width: min(100%, calc((100vh - 7rem) * var(--desk-ar, 3))); height: auto; }