/* =====================================================================
   tommycape.com — Please Rewind: The Lost Tapes, 1985
   Vanilla CSS. Every animation is opt-in via prefers-reduced-motion.
   ===================================================================== */

/* ---------------------------------------------------------------- fonts (self-hosted, SIL OFL) */
@font-face {
  font-family: "VT323";
  src: url("../fonts/vt323-latin.woff2") format("woff2");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Orbitron";
  src: url("../fonts/orbitron-latin.woff2") format("woff2");
  font-weight: 500 900;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Mr Dafoe";
  src: url("../fonts/mr-dafoe-latin.woff2") format("woff2");
  font-weight: 400;
  font-style: normal;
  font-display: block;
}

/* ---------------------------------------------------------------- design tokens */
:root {
  --bg-0: #0a0a1f;
  --bg-1: #1a0033;
  --bg-grid: #2a0a4a;
  --neon-magenta: #ff00c8;
  --neon-cyan: #00e5ff;
  --neon-purple: #9d00ff;
  --neon-yellow: #ffe600;
  --sun-top: #ff2d95;
  --sun-bot: #ff9e2c;
  --chrome-1: #ffffff;
  --chrome-2: #c7d0ff;
  --chrome-3: #8390c8;
  --text: #e8e8ff;
  --text-dim: #7a7ab0;
  --spotify: #1db954;

  /* derived */
  --text-soft: #b9b9ea;          /* secondary copy, AA on both backgrounds */
  --ink: #1a0033;                /* outlines, bevels */
  --led: #ff5a1f;                /* date-stamp / counter LED orange */

  --font-display: "Orbitron", "Arial Black", "Helvetica Neue", sans-serif;
  --font-script: "Mr Dafoe", "Brush Script MT", cursive;
  --font-mono: "VT323", "Consolas", "Menlo", "DejaVu Sans Mono", monospace;

  --fs-body: clamp(1.3rem, 1.15rem + 0.5vw, 1.55rem);   /* VT323 runs small: ~21–25px */
  --fs-small: 1.2rem;

  --nav-h: 64px;
  --gutter: clamp(16px, 4vw, 40px);
  --maxw: 1180px;
  --section-pad: clamp(4.5rem, 9vw, 8rem);
}

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

html {
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
  color-scheme: dark;
  background: var(--bg-0);
  scroll-padding-top: calc(var(--nav-h) + 12px);
  scrollbar-color: var(--neon-magenta) var(--bg-0);
}
@media (prefers-reduced-motion: no-preference) {
  html { scroll-behavior: smooth; }
}

body {
  margin: 0;
  min-height: 100vh;
  font-family: var(--font-mono);
  font-size: var(--fs-body);
  line-height: 1.35;
  color: var(--text);
  background: var(--bg-0);
  overflow-x: clip;
}

img, svg, picture { display: block; max-width: 100%; }
img { height: auto; }
a { color: var(--neon-cyan); }
p { margin: 0; }
button { font: inherit; color: inherit; }
[hidden] { display: none !important; }

::selection { background: var(--neon-magenta); color: #fff; }

:focus-visible {
  outline: 3px dashed var(--neon-yellow);
  outline-offset: 4px;
}

.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: fixed;
  top: 8px; left: 8px;
  z-index: 1100;
  padding: .4em .9em;
  font-size: 1.3rem;
  color: var(--bg-0);
  background: var(--neon-yellow);
  text-decoration: none;
  transform: translateY(-200%);
}
.skip-link:focus { transform: none; }

.container {
  width: 100%;
  max-width: calc(var(--maxw) + 2 * var(--gutter));
  margin-inline: auto;
  padding-inline: var(--gutter);
}

.icon-sprite { position: absolute; width: 0; height: 0; overflow: hidden; }
.ico {
  display: inline-block;
  width: auto;
  height: .7em;
  aspect-ratio: 1;
  fill: currentColor;
  shape-rendering: crispEdges;
  vertical-align: baseline;
  flex: none;
}
.ico--wide { aspect-ratio: 11 / 7; }
.ico--tall { aspect-ratio: 7 / 9; height: .8em; }

/* Chunky pixel cursor (mouse/trackpad only) */
@media (pointer: fine) {
  html { cursor: url("../cursors/arrow.png") 0 0, default; }
  a, button, summary, label { cursor: url("../cursors/hand.png") 11 0, pointer; }
}

/* ---------------------------------------------------------------- buttons */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: .65em;
  font-family: var(--font-display);
  font-weight: 700;
  letter-spacing: .12em;
  line-height: 1.1;
  text-decoration: none;
  border: 2px solid #04140a;
  user-select: none;
  -webkit-user-select: none;
}
.btn .ico { height: .8em; }

/* Spotify = a green tape-deck PLAY key: bevelled plastic that travels when pressed */
.btn--spotify {
  padding: .9em 1.35em .85em;
  font-size: .95rem;
  color: #03160b;
  background: linear-gradient(180deg, #4be78a 0%, var(--spotify) 42%, #13923f 100%);
  box-shadow:
    inset 2px 2px 0 rgba(255, 255, 255, .55),
    inset -2px -3px 0 rgba(0, 0, 0, .25),
    0 5px 0 #0b5a28,
    0 7px 0 #04140a;
  transform: translateY(0);
  transition: transform .08s, box-shadow .08s, filter .15s;
}
.btn--spotify:hover {
  filter: brightness(1.08) saturate(1.1);
  box-shadow:
    inset 2px 2px 0 rgba(255, 255, 255, .55),
    inset -2px -3px 0 rgba(0, 0, 0, .25),
    0 5px 0 #0b5a28,
    0 7px 0 #04140a,
    0 0 26px rgba(29, 185, 84, .55);
}
.btn--spotify:active {
  transform: translateY(5px);
  box-shadow:
    inset 2px 2px 0 rgba(0, 0, 0, .2),
    inset -2px -2px 0 rgba(255, 255, 255, .25),
    0 0 0 #0b5a28,
    0 2px 0 #04140a;
}
.btn--small { padding: .6em .9em .55em; font-size: .72rem; letter-spacing: .14em; box-shadow: inset 2px 2px 0 rgba(255,255,255,.55), inset -2px -2px 0 rgba(0,0,0,.25), 0 3px 0 #0b5a28, 0 4px 0 #04140a; }
.btn--small:active { transform: translateY(3px); }
.btn--big { font-size: clamp(.95rem, .85rem + .4vw, 1.15rem); padding: 1em 1.6em .95em; }

/* Chrome key (404 page) */
.btn--chrome {
  padding: .9em 1.4em .85em;
  font-size: .95rem;
  color: var(--ink);
  border-color: var(--ink);
  background: linear-gradient(180deg, var(--chrome-1) 0%, var(--chrome-2) 46%, var(--chrome-3) 54%, #e6c8ff 100%);
  box-shadow:
    inset 2px 2px 0 rgba(255, 255, 255, .8),
    inset -2px -3px 0 rgba(0, 0, 0, .2),
    0 5px 0 #4a3a7a,
    0 7px 0 var(--ink);
  transition: transform .08s, box-shadow .08s;
}
.btn--chrome:hover { box-shadow: inset 2px 2px 0 rgba(255,255,255,.8), inset -2px -3px 0 rgba(0,0,0,.2), 0 5px 0 #4a3a7a, 0 7px 0 var(--ink), 0 0 26px rgba(255, 0, 200, .5); }
.btn--chrome:active { transform: translateY(5px); box-shadow: inset 2px 2px 0 rgba(0,0,0,.15), 0 0 0 #4a3a7a, 0 2px 0 var(--ink); }

/* ---------------------------------------------------------------- top bar / nav */
.topbar {
  position: sticky;
  top: 0;
  z-index: 100;
  height: var(--nav-h);
  background: linear-gradient(180deg, rgba(10, 10, 31, .97), rgba(20, 0, 42, .94));
  border-bottom: 2px solid transparent;
  border-image: linear-gradient(90deg, var(--neon-cyan), var(--neon-magenta) 50%, var(--neon-purple)) 1;
}
.nav {
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
}
.nav__brand {
  display: flex;
  align-items: baseline;
  gap: .2rem;
  text-decoration: none;
  white-space: nowrap;
}
.nav__tommy {
  font-family: var(--font-script);
  font-size: 1.9rem;
  line-height: 1;
  color: var(--neon-magenta);
  text-shadow: 0 0 8px rgba(255, 0, 200, .6);
  transform: rotate(-6deg) translateY(2px);
}
.nav__cape {
  font-family: var(--font-display);
  font-weight: 900;
  font-size: 1.05rem;
  letter-spacing: .04em;
  background: linear-gradient(180deg, var(--chrome-1) 0%, var(--chrome-2) 46%, #3c286e 50%, var(--chrome-3) 56%, #ffb3ec 100%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  transform: skewX(-9deg);
}

.nav__links {
  display: flex;
  align-items: center;
  margin: 0 auto 0 0;
  padding: 0;
  list-style: none;
  font-size: 1.5rem;
  letter-spacing: .14em;
}
.nav__brand + .nav__links { margin-left: auto; }
.nav__links li + li::before {
  content: "·";
  content: "·" / "";
  margin: 0 .55em 0 .4em;
  color: var(--text-dim);
}
.nav__links a {
  position: relative;
  display: inline-block;
  padding: .2em .05em;
  color: var(--text);
  text-decoration: none;
}
.nav__links a[aria-current] {
  color: var(--neon-cyan);
  text-shadow: 0 0 8px rgba(0, 229, 255, .75);
}
.nav__links a[aria-current]::after {
  content: "";
  position: absolute;
  left: 0; right: .14em; bottom: 0;
  height: 2px;
  background: var(--neon-cyan);
  box-shadow: 0 0 8px var(--neon-cyan);
}
.nav__links a:hover { color: #fff; }

/* VHS tracking glitch on nav hover: RGB-split slices that settle */
.nav__links a::before {
  content: attr(data-text);
  position: absolute;
  inset: 0;
  padding: inherit;
  pointer-events: none;
  opacity: 0;
}
@media (prefers-reduced-motion: no-preference) {
  .nav__links a:hover,
  .nav__links a:focus-visible { animation: rgb-jitter .5s steps(1) 1; }
  .nav__links a:hover::before,
  .nav__links a:focus-visible::before { animation: glitch-slice .5s steps(1) 1; }
}
@keyframes rgb-jitter {
  0%   { text-shadow: -3px 0 var(--neon-cyan), 3px 0 var(--neon-magenta); transform: translateX(1px); }
  20%  { text-shadow: 2px 0 var(--neon-cyan), -2px 0 var(--neon-magenta); transform: translateX(-2px) skewX(-10deg); }
  40%  { text-shadow: -1px 0 var(--neon-cyan), 1px 0 var(--neon-magenta); transform: none; }
  60%  { text-shadow: 3px 0 var(--neon-cyan), -3px 0 var(--neon-magenta); transform: translateX(2px); }
  80%  { text-shadow: -1px 0 var(--neon-cyan), 1px 0 var(--neon-magenta); transform: none; }
  100% { text-shadow: none; transform: none; }
}
@keyframes glitch-slice {
  0%   { opacity: .9; color: var(--neon-magenta); clip-path: inset(0 0 62% 0); transform: translateX(-5px); }
  20%  { opacity: .9; color: var(--neon-cyan); clip-path: inset(48% 0 18% 0); transform: translateX(4px); }
  40%  { opacity: .9; color: var(--neon-magenta); clip-path: inset(72% 0 0 0); transform: translateX(-3px); }
  60%  { opacity: .9; color: var(--neon-cyan); clip-path: inset(12% 0 70% 0); transform: translateX(6px); }
  80%  { opacity: .6; color: #fff; clip-path: inset(40% 0 40% 0); transform: translateX(-2px); }
  100% { opacity: 0; }
}

/* ---------------------------------------------------------------- hero */
.hero {
  --floor-h: clamp(120px, 24vh, 240px);
  --cover: clamp(250px, 34vw, 440px);
  position: relative;
  isolation: isolate;
  overflow: hidden;
  display: grid;
  grid-template-rows: 1fr var(--floor-h);
  min-height: calc(100vh - var(--nav-h));
  min-height: calc(100svh - var(--nav-h));
}
/* sky */
.hero::before {
  content: "";
  grid-area: 1 / 1;
  z-index: -1;
  background:
    radial-gradient(1.5px 1.5px at 8% 14%, #fff 50%, transparent 51%),
    radial-gradient(1px 1px at 17% 38%, #c7d0ff 50%, transparent 51%),
    radial-gradient(1.5px 1.5px at 29% 9%, #fff 50%, transparent 51%),
    radial-gradient(1px 1px at 41% 27%, #fff 50%, transparent 51%),
    radial-gradient(1px 1px at 52% 6%, #c7d0ff 50%, transparent 51%),
    radial-gradient(1.5px 1.5px at 63% 19%, #fff 50%, transparent 51%),
    radial-gradient(1px 1px at 74% 8%, #fff 50%, transparent 51%),
    radial-gradient(1px 1px at 86% 31%, #c7d0ff 50%, transparent 51%),
    radial-gradient(1.5px 1.5px at 93% 12%, #fff 50%, transparent 51%),
    radial-gradient(1px 1px at 5% 46%, #fff 50%, transparent 51%),
    radial-gradient(1px 1px at 36% 49%, #c7d0ff 50%, transparent 51%),
    radial-gradient(1px 1px at 97% 44%, #fff 50%, transparent 51%),
    radial-gradient(80% 60% at 50% 100%, rgba(255, 45, 149, .42), rgba(157, 0, 255, .14) 55%, transparent 80%),
    linear-gradient(180deg, var(--bg-0) 0%, var(--bg-1) 52%, #47085e 100%);
}
.hero__inner {
  grid-area: 1 / 1;
  z-index: 2;
  display: grid;
  grid-template-columns: minmax(0, 1.08fr) minmax(0, 1fr);
  align-items: end;
  gap: clamp(1.5rem, 4vw, 4rem);
  padding-top: clamp(2rem, 6vh, 4rem);
}
.hero__text {
  align-self: center;
  padding-bottom: clamp(1rem, 4vh, 3rem);
}

/* logo: brush-script "Tommy" over a chrome "CAPE", as on the sleeves */
.logo {
  --cape: clamp(3.9rem, 1.6rem + 8.4vw, 8.6rem);
  position: relative;
  display: inline-block;
  margin: 0;
  font-weight: 400;
  line-height: 1;
}
.logo__tommy {
  position: relative;
  z-index: 2;
  display: block;
  margin: 0 0 calc(var(--cape) * -.46) calc(var(--cape) * .04);
  font-family: var(--font-script);
  font-size: calc(var(--cape) * .8);
  line-height: 1.1;
  color: #ff1fcf;
  text-shadow:
    0 0 .02em #fff,
    0 0 .1em var(--neon-magenta),
    0 0 .32em rgba(255, 0, 200, .55),
    .03em .04em 0 var(--ink);
  transform: rotate(-8deg);
  transform-origin: 0 100%;
}
.logo__cape {
  position: relative;
  z-index: 1;
  display: block;
  padding-right: .08em;
  font-family: var(--font-display);
  font-weight: 900;
  font-size: var(--cape);
  line-height: 1.04;
  letter-spacing: .02em;
  color: transparent;
  background:
    linear-gradient(105deg, transparent 38%, rgba(255, 255, 255, .95) 50%, transparent 62%) no-repeat,
    linear-gradient(180deg,
      var(--chrome-1) 4%,
      #a8e8ff 26%,
      var(--chrome-2) 44%,
      #ffffff 48%,
      #2a0a4a 50.5%,
      #6a3f9e 54%,
      var(--chrome-3) 62%,
      #ff9fe2 84%,
      var(--chrome-1) 100%);
  background-size: 260% 100%, 100% 100%;
  background-position: 160% 0, 0 0;
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-stroke: 1px rgba(255, 255, 255, .45);
  filter:
    drop-shadow(0 2px 0 #43207a)
    drop-shadow(0 3px 0 var(--ink))
    drop-shadow(0 0 16px rgba(255, 0, 200, .45));
  transform: skewX(-9deg);
}
.logo::after {
  content: "";
  display: block;
  width: 108%;
  height: clamp(4px, .5vw, 6px);
  margin-top: .5rem;
  background: linear-gradient(90deg, var(--neon-magenta) 0%, var(--neon-magenta) 55%, rgba(255, 0, 200, 0) 100%);
  box-shadow: 0 0 12px rgba(255, 0, 200, .8);
  transform: skewX(-9deg) rotate(-1.5deg);
  transform-origin: 0 50%;
}
.logo__sparkle {
  position: absolute;
  z-index: 3;
  top: calc(var(--cape) * .62);
  right: calc(var(--cape) * .02);
  width: calc(var(--cape) * .42);
  aspect-ratio: 1;
  background:
    radial-gradient(circle, #fff 0 7%, rgba(255, 255, 255, .5) 12%, transparent 26%),
    linear-gradient(90deg, transparent 48.5%, #fff 50%, transparent 51.5%),
    linear-gradient(0deg, transparent 48.5%, #fff 50%, transparent 51.5%);
  -webkit-mask: radial-gradient(circle, #000 15%, transparent 60%);
  mask: radial-gradient(circle, #000 15%, transparent 60%);
  pointer-events: none;
}

.hero__album { margin: clamp(1.25rem, 3vh, 2rem) 0 0; }
.hero__title {
  display: block;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: clamp(1.15rem, .8rem + 1.5vw, 2rem);
  letter-spacing: .3em;
  color: #dcfaff;
  text-shadow: 0 0 6px rgba(0, 229, 255, .9), 0 0 20px rgba(0, 229, 255, .45);
}
.hero__sub {
  display: block;
  margin-top: .3em;
  font-size: clamp(1.4rem, 1.15rem + .8vw, 2rem);
  letter-spacing: .04em;
  color: var(--text);
}
.hero__text .btn { margin-top: clamp(1.5rem, 4vh, 2.5rem); }

/* stage: sun + sleeve sitting on the horizon */
.hero__stage {
  position: relative;
  justify-self: center;
  width: var(--cover);
  margin-top: calc(var(--cover) * .3);
}
.sun {
  position: absolute;
  left: 50%;
  bottom: 0;
  width: calc(var(--cover) * 2);
  height: calc(var(--cover) * 1.5);
  transform: translateX(-50%);
  overflow: hidden;
  pointer-events: none;
}
.sun::before {               /* glow, unbanded */
  content: "";
  position: absolute;
  left: 50%;
  bottom: calc(var(--cover) * -.5);
  width: calc(var(--cover) * 1.95);
  aspect-ratio: 1;
  transform: translateX(-50%);
  border-radius: 50%;
  background: radial-gradient(closest-side, rgba(255, 45, 149, .5), rgba(255, 45, 149, .16) 62%, transparent);
}
.sun__disc {
  position: absolute;
  left: 50%;
  bottom: calc(var(--cover) * -.27);   /* lower 18% sinks below the horizon */
  width: calc(var(--cover) * 1.5);
  aspect-ratio: 1;
  border-radius: 50%;
  background: linear-gradient(180deg, var(--sun-bot) 8%, #ff6a5c 48%, var(--sun-top) 82%);
  transform: translateX(-50%);
  -webkit-mask: linear-gradient(180deg, #000 0 44%, transparent 44% 46.5%, #000 46.5% 53%, transparent 53% 56.5%, #000 56.5% 62%, transparent 62% 66.5%, #000 66.5% 71%, transparent 71% 76.5%, #000 76.5% 80%, transparent 80%);
  mask: linear-gradient(180deg, #000 0 44%, transparent 44% 46.5%, #000 46.5% 53%, transparent 53% 56.5%, #000 56.5% 62%, transparent 62% 66.5%, #000 66.5% 71%, transparent 71% 76.5%, #000 76.5% 80%, transparent 80%);
}
.hero__cover {
  position: relative;
  z-index: 1;
}
.hero__cover img {
  width: 100%;
  box-shadow: 0 0 0 1px rgba(255, 255, 255, .12), 0 0 46px rgba(255, 0, 200, .35);
  -webkit-box-reflect: below 0 linear-gradient(transparent 52%, rgba(255, 255, 255, .26));
}

/* perspective grid floor */
.floor {
  position: relative;
  overflow: hidden;
  height: var(--floor-h, 160px);
  perspective: 300px;
  perspective-origin: 50% 0;
  background: linear-gradient(180deg, #2c0a52 0%, #14002c 50%, var(--bg-0) 100%);
  border-top: 2px solid #ff5ad9;
  box-shadow: 0 0 16px 2px rgba(255, 0, 200, .7), 0 0 70px 8px rgba(255, 45, 149, .3);
}
.hero .floor { grid-area: 2 / 1; z-index: 1; }
.floor__grid {
  position: absolute;
  left: -100%;
  right: -100%;
  bottom: 0;
  height: 420%;
  transform-origin: 50% 100%;
  transform: rotateX(76deg);
  background-image:
    linear-gradient(90deg, rgba(255, 0, 200, .9) 0 2px, transparent 2px),
    linear-gradient(0deg, rgba(0, 229, 255, .65) 0 2px, transparent 2px);
  background-size: 64px 64px;
  background-position: 50% 0;
}
.floor::after {                /* horizon haze swallows the far lines */
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, #3a0a63 0%, rgba(44, 10, 82, .85) 14%, rgba(44, 10, 82, 0) 55%);
  pointer-events: none;
}

/* ---------------------------------------------------------------- sections */
.section {
  position: relative;
  isolation: isolate;
  padding-block: var(--section-pad);
}
.section::before {             /* faint graph-paper grid */
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background-image:
    linear-gradient(var(--bg-grid) 1px, transparent 1px),
    linear-gradient(90deg, var(--bg-grid) 1px, transparent 1px);
  background-size: 48px 48px;
  opacity: .45;
  -webkit-mask: linear-gradient(180deg, transparent, #000 20%, #000 80%, transparent);
  mask: linear-gradient(180deg, transparent, #000 20%, #000 80%, transparent);
}
.music { background: linear-gradient(180deg, var(--bg-0), var(--bg-1)); }
.bio { background: linear-gradient(180deg, var(--bg-1), var(--bg-0)); }

.section-title {
  display: flex;
  align-items: center;
  gap: .5em;
  margin: 0 0 clamp(2.75rem, 6vw, 4.5rem);
  font-family: var(--font-display);
  font-weight: 900;
  font-size: clamp(2.2rem, 1.4rem + 3.4vw, 3.9rem);
  line-height: 1;
  letter-spacing: .08em;
  color: #fff;
  text-shadow: 3px 3px 0 var(--neon-magenta), 6px 6px 0 var(--neon-purple);
}
.section-title::after {        /* sunset speed-stripes, thinning like the sun bands */
  content: "";
  flex: 0 1 8em;
  height: .5em;
  background: linear-gradient(180deg,
    var(--sun-bot) 0 30%, transparent 30% 42%,
    #ff6a5c 42% 64%, transparent 64% 78%,
    var(--sun-top) 78% 100%);
  transform: skewX(-20deg);
}

/* ---------------------------------------------------------------- discography */
.releases {
  display: grid;
  gap: clamp(3.25rem, 7vw, 4.5rem) clamp(1.5rem, 3vw, 2.75rem);
  margin: 0;
  padding: 0;
  list-style: none;
}
.release article { height: 100%; }
.release__sleeve {
  position: relative;
  isolation: isolate;
  margin-bottom: 1.4rem;
}
.release__sleeve picture {
  position: relative;
  z-index: 1;
}
.release__sleeve img {
  width: 100%;
  box-shadow: 0 0 0 1px rgba(255, 255, 255, .1), 10px 10px 0 rgba(0, 0, 0, .55);
}
.release__disc {               /* the record inside the sleeve */
  position: absolute;
  z-index: 0;
  inset: 3%;
  border-radius: 50%;
  background:
    radial-gradient(circle, #0a0a1f 0 2.2%, var(--label) 2.6% 17%, #0d0d14 17.5%, transparent 18%),
    radial-gradient(circle, transparent 0 60%, rgba(255, 255, 255, .06) 61%, transparent 62%, transparent 76%, rgba(255, 255, 255, .05) 77%, transparent 78%),
    repeating-radial-gradient(circle, #101018 0 1.5px, #1c1c28 1.5px 3px);
  box-shadow: 0 0 0 1px #000;
  transition: transform .55s cubic-bezier(.2, .8, .2, 1);
}
.release:hover .release__disc,
.release:focus-within .release__disc { transform: translateY(-24%) rotate(80deg); }

.release__title {
  margin: 0 0 .4rem;
  font-family: var(--font-display);
  font-weight: 800;
  font-size: clamp(1.3rem, 1.1rem + .6vw, 1.65rem);
  line-height: 1.15;
  letter-spacing: .1em;
  color: #fff;
  text-shadow: 2px 2px 0 var(--neon-magenta);
}
.release__format { color: var(--neon-cyan); }
.release__date { margin: .1rem 0 1.4rem; color: var(--text-soft); }

/* NEW! starburst sticker */
.badge-new {
  position: absolute;
  z-index: 3;
  top: -20px;
  left: -16px;
  display: grid;
  place-items: center;
  width: clamp(72px, 9vw, 92px);
  aspect-ratio: 1;
  font-family: var(--font-display);
  font-weight: 900;
  font-size: clamp(.85rem, .7rem + .4vw, 1rem);
  letter-spacing: .04em;
  color: var(--ink);
  background: var(--neon-yellow);
  clip-path: polygon(50% 0%, 59.8% 13.3%, 75% 6.7%, 76.9% 23.1%, 93.3% 25%, 86.7% 40.2%, 100% 50%, 86.7% 59.8%, 93.3% 75%, 76.9% 76.9%, 75% 93.3%, 59.8% 86.7%, 50% 100%, 40.2% 86.7%, 25% 93.3%, 23.1% 76.9%, 6.7% 75%, 13.3% 59.8%, 0% 50%, 13.3% 40.2%, 6.7% 25%, 23.1% 23.1%, 25% 6.7%, 40.2% 13.3%);
  transform: rotate(-14deg);
  filter: drop-shadow(0 0 10px rgba(255, 230, 0, .6));
}
@media (prefers-reduced-motion: no-preference) {
  /* blinks for ~4s each time it scrolls into view (WCAG 2.2.2: under 5s) */
  .badge-new.in-view { animation: new-blink .5s steps(1) 8; }
}
@keyframes new-blink {
  50% { color: var(--neon-yellow); background: var(--neon-magenta); }
}

/* COMING SOON ribbon */
.ribbon {
  position: absolute;
  z-index: 3;
  inset: 0;
  overflow: hidden;
  pointer-events: none;
}
.ribbon span {
  position: absolute;
  top: 14%;
  right: -26%;
  width: 84%;
  padding: .7em 0 .65em;
  font-family: var(--font-display);
  font-weight: 900;
  font-size: clamp(.72rem, .6rem + .35vw, .9rem);
  letter-spacing: .2em;
  text-align: center;
  color: var(--ink);
  background: var(--neon-yellow);
  box-shadow: 0 0 0 2px var(--ink), 0 5px 0 rgba(0, 0, 0, .45);
  transform: rotate(40deg);
}
.release__timer {
  display: inline-flex;
  align-items: center;
  gap: .5em;
  white-space: nowrap;
  padding: .35em .85em;
  color: var(--neon-yellow);
  letter-spacing: .08em;
  border: 2px dashed rgba(255, 230, 0, .55);
}
.rec-dot {
  width: .55em;
  height: .55em;
  border-radius: 50%;
  background: #ff2a2a;
  box-shadow: 0 0 8px #ff2a2a;
}
@media (prefers-reduced-motion: no-preference) {
  .release__timer.in-view .rec-dot { animation: rec-blink 1s steps(1) 4; }
}
@keyframes rec-blink { 50% { opacity: .15; } }

/* phones: stacked cards */
@media (min-width: 560px) and (max-width: 859px) {
  .release article {
    display: grid;
    grid-template-columns: minmax(0, 44%) minmax(0, 1fr);
    gap: 1.75rem;
    align-items: center;
  }
  .release__sleeve { margin-bottom: 0; }
}
@media (min-width: 860px) {
  .releases { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .release article { display: flex; flex-direction: column; }
  .release__body { display: flex; flex-direction: column; flex: 1; align-items: flex-start; }
  .release__body > :last-child { margin-top: auto; }
}

/* ---------------------------------------------------------------- cassette divider */
.divider {
  position: relative;
  display: grid;
  place-items: center;
  padding-block: clamp(1.5rem, 4vw, 3rem);
  background: var(--bg-1);
}
.divider::before {             /* the tape, running out to the edges */
  content: "";
  position: absolute;
  left: 0; right: 0;
  top: 50%;
  height: 2px;
  background: linear-gradient(90deg, transparent, var(--neon-magenta) 25%, var(--neon-cyan) 75%, transparent);
  box-shadow: 0 0 10px rgba(255, 0, 200, .6);
}
.cassette {
  position: relative;
  width: clamp(170px, 20vw, 230px);
  height: auto;
  transform: rotate(-4deg);
  filter: drop-shadow(8px 8px 0 rgba(0, 0, 0, .5));
}
.cassette__label {
  font-family: var(--font-mono);
  font-size: 15px;
  letter-spacing: .5px;
  fill: var(--ink);
}
.cassette__reel {
  transform-box: fill-box;
  transform-origin: center;
}

/* ---------------------------------------------------------------- story: a teletext page on a CRT */
.screen {
  max-width: 880px;
  margin-inline: auto;
  padding: clamp(1rem, 2.5vw, 1.6rem) clamp(1.15rem, 4.5vw, 3.5rem) clamp(1.75rem, 4.5vw, 3.25rem);
  background:
    radial-gradient(120% 100% at 50% 40%, #0b0b24 0%, #05050f 100%);
  border: 3px solid #000;
  border-radius: 22px / 30px;
  box-shadow:
    0 0 0 clamp(6px, 1.2vw, 12px) #231a3a,
    0 0 0 calc(clamp(6px, 1.2vw, 12px) + 2px) #3a2d5c,
    14px 18px 0 clamp(6px, 1.2vw, 12px) rgba(0, 0, 0, .45),
    inset 0 0 90px rgba(0, 229, 255, .06),
    inset 0 0 22px rgba(0, 0, 0, .9);
}
.screen__bar {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: .2em 1.2em;
  margin-bottom: clamp(1.25rem, 3vw, 2rem);
  padding-bottom: .55rem;
  font-size: var(--fs-small);
  letter-spacing: .08em;
  color: #fff;
  border-bottom: 2px solid #1f1f45;
}
.screen__page { color: var(--neon-yellow); }
.screen__name { padding: 0 .45em; color: var(--neon-yellow); background: #1b2bd8; }
.screen__clock { margin-left: auto; color: var(--neon-cyan); font-variant-numeric: tabular-nums; }

.bio__text {
  max-width: 29em;              /* ≈ 72 characters of VT323 */
  font-size: clamp(1.4rem, 1.2rem + .6vw, 1.75rem);
  line-height: 1.36;
  color: var(--text);
  text-shadow: 0 0 7px rgba(170, 190, 255, .22);
  text-wrap: pretty;
}
.bio__text p + p { margin-top: 1em; }
.bio__text .bio__signoff {
  margin-top: 1.6em;
  font-size: 1.22em;
  line-height: 1.2;
  color: var(--neon-yellow);
  text-shadow: 0 0 10px rgba(255, 230, 0, .4);
}

/* gallery: lab prints */
/* Justified rows: each print grows in proportion to its aspect ratio (--ar),
   so prints sharing a row share a height whatever their shape. */
.gallery {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: flex-start;
  gap: clamp(2.5rem, 5vw, 4.5rem) clamp(2rem, 5vw, 4.5rem);
  max-width: 1040px;
  margin: clamp(4rem, 8vw, 6.5rem) auto 0;
  padding: 0;
  list-style: none;
}
.print {
  flex: var(--ar, 1) 1 calc(var(--ar, 1) * 280px);
  min-width: 0;
  transform: rotate(var(--tilt, -2deg));
  transition: transform .25s ease-out;
}
.print:nth-child(4n+2) { --tilt: 1.6deg; margin-top: clamp(0rem, 2.5vw, 2rem); }
.print:nth-child(4n+3) { --tilt: 1.1deg; }
.print:nth-child(4n+4) { --tilt: -1.7deg; margin-top: clamp(0rem, 2.5vw, 2rem); }
.print figure {
  margin: 0;
  padding: 12px 12px 0;
  background: #f2eee4;
  box-shadow: 10px 12px 0 rgba(0, 0, 0, .5);
}
.print__photo { display: block; position: relative; }
.print__photo img { width: 100%; }
.print__photo::after {         /* VCR "play" hint on hover/focus */
  content: "▶\FE0E  VIEW";
  position: absolute;
  left: 10px; top: 8px;
  font-size: 1.3rem;
  color: #fff;
  text-shadow: 2px 2px 0 rgba(0, 0, 0, .7);
  opacity: 0;
  transition: opacity .15s;
}
.print__photo:hover::after,
.print__photo:focus-visible::after { opacity: 1; }
.print:hover { transform: rotate(0deg) scale(1.015); }
.print figcaption {
  padding: .5em .15em .65em;
  font-size: 1.35rem;
  line-height: 1.2;
  color: #2a1a3a;
}

/* ---------------------------------------------------------------- footer */
.footer {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  text-align: center;
  background: linear-gradient(180deg, var(--bg-0) 0%, var(--bg-1) 100%);
  padding-top: clamp(3.5rem, 7vw, 5.5rem);
}
.footer__inner {
  position: relative;
  z-index: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: .8rem;
  padding-bottom: clamp(2.5rem, 6vw, 4rem);
}
.footer__line { letter-spacing: .06em; text-wrap: balance; }
.footer__sep { margin: 0 .4em; color: var(--text-dim); }
.counter { white-space: nowrap; }
.counter__digits { display: inline-flex; gap: 2px; vertical-align: baseline; }
.counter__digits span {
  min-width: 1.05ch;
  padding: 0 .14em;
  color: var(--led);
  background: #000;
  border: 1px solid #3c2a52;
  text-shadow: 0 0 6px rgba(255, 90, 31, .85);
}
.footer__badge {
  padding: .15em .75em .1em;
  font-size: 1.1rem;
  letter-spacing: .05em;
  color: #0a0a1f;
  background: #c6c6c6;
  border: 2px solid;
  border-color: #fff #4d4d4d #4d4d4d #fff;
  box-shadow: 3px 3px 0 #000;
}
.footer__rewind {
  display: inline-flex;
  align-items: center;
  gap: .6em;
  color: var(--neon-cyan);
  letter-spacing: .14em;
  text-shadow: 0 0 8px rgba(0, 229, 255, .5);
}
.footer__rule { color: var(--text-dim); letter-spacing: .1em; }
.footer__truth {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: clamp(.95rem, .85rem + .4vw, 1.15rem);
  letter-spacing: .06em;
  line-height: 1.5;
  color: #fff;
}
.footer__credit { color: var(--text-soft); }
.footer__spotify { margin-top: .4rem; }
.footer__spotify a {
  display: inline-flex;
  align-items: center;
  gap: .5em;
  color: var(--spotify);
  text-decoration: none;
  letter-spacing: .06em;
}
.footer__spotify a:hover { text-decoration: underline; text-underline-offset: .2em; }
.floor--footer {
  --floor-h: clamp(90px, 14vw, 150px);
  box-shadow: 0 0 14px 1px rgba(255, 0, 200, .55), 0 0 50px 4px rgba(255, 45, 149, .22);
}

/* ---------------------------------------------------------------- photo viewer (VCR controls) */
.viewer {
  max-width: min(94vw, 1100px);
  max-height: 96vh;
  padding: 14px;
  overflow: visible;
  color: var(--text);
  background: transparent;
  border: 0;
}
.viewer[open] { display: flex; flex-direction: column; align-items: center; }
.viewer::backdrop { background: rgba(5, 5, 16, .92); }
.viewer__screen {
  position: relative;
  padding: 8px;
  background: #000;
  border-radius: 16px / 20px;
  box-shadow: 0 0 0 8px #231a3a, 0 0 0 10px #3a2d5c, 0 0 60px rgba(255, 0, 200, .25);
}
.viewer__screen::after {      /* the dialog sits above the page's CRT layer, so it carries its own */
  content: "";
  position: absolute;
  inset: 8px;
  border-radius: 10px / 14px;
  background: repeating-linear-gradient(180deg, rgba(0, 0, 0, .2) 0 1px, transparent 1px 3px);
  pointer-events: none;
}
.viewer__img {
  max-width: calc(94vw - 60px);
  max-height: calc(96vh - 170px);
  width: auto;
  height: auto;
  border-radius: 10px / 14px;
}
.viewer__caption {
  margin: 1.2rem 0 .8rem;
  font-size: 1.5rem;
  text-align: center;
}
.viewer__controls { display: flex; gap: .6rem; }
.vcr-btn {
  display: inline-flex;
  align-items: center;
  gap: .45em;
  padding: .35em .9em .3em;
  font-family: var(--font-mono);
  font-size: 1.35rem;
  letter-spacing: .08em;
  color: var(--text);
  background: linear-gradient(180deg, #3d3a58, #1f1d31);
  border: 2px solid #000;
  box-shadow: inset 1px 1px 0 rgba(255, 255, 255, .25), 0 4px 0 #000;
}
.vcr-btn:hover { color: #fff; background: linear-gradient(180deg, #4b4870, #26233c); }
.vcr-btn:active { transform: translateY(3px); box-shadow: inset 1px 1px 0 rgba(0, 0, 0, .3), 0 1px 0 #000; }
@media (prefers-reduced-motion: no-preference) {
  .viewer[open] .viewer__screen { animation: tv-on .3s cubic-bezier(.2, .8, .2, 1); }
}
@keyframes tv-on {
  0%   { transform: scale(1, .01); filter: brightness(3); }
  60%  { transform: scale(1, 1.02); filter: brightness(1.4); }
  100% { transform: none; filter: none; }
}

/* ---------------------------------------------------------------- CRT layers */
.crt {
  position: fixed;
  inset: 0;
  z-index: 1000;
  pointer-events: none;
  background:
    radial-gradient(ellipse at center, transparent 58%, rgba(0, 0, 0, .4) 100%),
    repeating-linear-gradient(180deg, rgba(0, 0, 0, .22) 0 1px, transparent 1px 3px);
}
@media (prefers-reduced-motion: no-preference) {
  .crt { animation: crt-flicker 5s linear infinite; will-change: opacity; }
}
@keyframes crt-flicker {
  0%, 100% { opacity: 1; }
  4%  { opacity: .97; }
  6%  { opacity: 1; }
  38% { opacity: .98; }
  40% { opacity: 1; }
  71% { opacity: .975; }
  72% { opacity: 1; }
}
@media (max-width: 640px) {
  .crt {
    background:
      radial-gradient(ellipse at center, transparent 62%, rgba(0, 0, 0, .3) 100%),
      repeating-linear-gradient(180deg, rgba(0, 0, 0, .16) 0 1px, transparent 1px 3px);
  }
}

/* VHS tracking bar */
.vhs {
  position: fixed;
  left: 0; right: 0; top: 0;
  z-index: 950;
  height: 16vh;
  pointer-events: none;
  opacity: 0;
  transform: translate3d(0, -20vh, 0);
  background:
    repeating-linear-gradient(90deg, transparent 0 53px, rgba(255, 255, 255, .07) 53px 61px, transparent 61px 97px, rgba(255, 255, 255, .05) 97px 100px),
    repeating-linear-gradient(180deg, rgba(255, 255, 255, .08) 0 1px, transparent 1px 2px),
    linear-gradient(180deg, transparent 0%, rgba(255, 0, 200, .1) 30%, rgba(255, 255, 255, .16) 48%, rgba(0, 229, 255, .12) 62%, transparent 100%);
  -webkit-backdrop-filter: blur(1.4px) saturate(2.2) brightness(1.15);
  backdrop-filter: blur(1.4px) saturate(2.2) brightness(1.15);
}
.vhs::before,
.vhs::after {
  content: "";
  position: absolute;
  left: 0; right: 0;
  height: 3px;
}
.vhs::before { top: 36%; background: rgba(0, 229, 255, .6); box-shadow: 0 0 8px var(--neon-cyan); transform: translateX(-8px); }
.vhs::after  { top: 58%; background: rgba(255, 0, 200, .6); box-shadow: 0 0 8px var(--neon-magenta); transform: translateX(8px); }
.vhs.is-on { animation: vhs-sweep 1.15s cubic-bezier(.45, .05, .55, .95) forwards; }
@keyframes vhs-sweep {
  0%   { opacity: 1; transform: translate3d(0, -20vh, 0); }
  50%  { transform: translate3d(-4px, 40vh, 0); }
  52%  { transform: translate3d(5px, 42vh, 0); }
  90%  { opacity: 1; }
  100% { opacity: 0; transform: translate3d(0, 104vh, 0); }
}
@media (prefers-reduced-motion: reduce) {
  .vhs { display: none; }
}

/* VCR on-screen display: appears while the tape moves, then fades */
.osd {
  position: fixed;
  left: max(18px, env(safe-area-inset-left));
  bottom: max(16px, env(safe-area-inset-bottom));
  z-index: 200;
  display: flex;
  flex-direction: column;
  gap: .15em;
  font-size: 1.6rem;
  line-height: 1;
  letter-spacing: .08em;
  color: #fff;
  text-shadow: 2px 2px 0 rgba(0, 0, 0, .75), 0 0 6px rgba(255, 255, 255, .45);
  pointer-events: none;
  opacity: 0;
  transition: opacity .2s;
}
.osd.is-visible { opacity: .92; }
.osd__mode { display: inline-flex; align-items: center; gap: .4em; }
.osd__ico { display: none; filter: drop-shadow(2px 2px 0 rgba(0, 0, 0, .75)); }
.osd__mode[data-mode="play"] .osd__ico--play,
.osd__mode[data-mode="ff"] .osd__ico--ff,
.osd__mode[data-mode="rew"] .osd__ico--rew { display: inline-block; }
.osd__counter { font-variant-numeric: tabular-nums; }
/* Phones and tablets: the bottom edge belongs to the home indicator, rounded corners and
   browser toolbars that slide in and out while scrolling, so the display hangs just under
   the sticky nav instead. It only shows while the page moves and never takes taps. */
@media (max-width: 699px), (pointer: coarse) {
  .osd {
    top: calc(var(--nav-h) + 12px);
    bottom: auto;
    left: max(14px, env(safe-area-inset-left));
    font-size: 1.3rem;
    text-shadow: 2px 2px 0 rgba(0, 0, 0, .85), 0 0 8px rgba(0, 0, 0, .6);
  }
}

/* ---------------------------------------------------------------- boot sequence */
.boot { display: none; }
.is-booting .boot {
  position: fixed;
  inset: 0;
  z-index: 900;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 24px;
  background: #000;
  /* failsafe: if the script never arrives, get out of the way */
  animation: boot-failsafe .01s 9s forwards;
}
.is-booting .boot.boot--js { animation: none; }
.boot:focus { outline: none; }
@keyframes boot-failsafe { to { visibility: hidden; opacity: 0; } }

.boot::before {                /* CRT power-on flash */
  content: "";
  position: absolute;
  inset: 0;
  background: radial-gradient(ellipse at center, #fff 0%, rgba(199, 208, 255, .7) 22%, rgba(157, 0, 255, .15) 50%, transparent 70%);
  opacity: 0;
  pointer-events: none;
  animation: power-on .75s ease-out forwards;
}
@keyframes power-on {
  0%   { opacity: 1; transform: scale(.15, .004); }
  35%  { opacity: 1; transform: scale(1.1, .004); }
  65%  { opacity: .55; transform: scale(1.1, 1); }
  100% { opacity: 0; transform: scale(1.1, 1); }
}
.boot__screen {
  position: relative;
  width: min(100%, 16em);                                   /* VT323 advance = .4em; longest line is 37 chars */
  font-size: clamp(14px, calc((100vw - 48px) / 15.4), 36px);
  line-height: 1.22;
  color: var(--text);
  text-shadow: 0 0 6px rgba(199, 208, 255, .55);
}
.boot__line { min-height: 1.22em; white-space: pre; }
.boot__line--title { color: #fff; }
.boot__ok { color: var(--neon-cyan); text-shadow: 0 0 8px rgba(0, 229, 255, .8); }
.boot__fill { color: var(--neon-magenta); text-shadow: 0 0 8px rgba(255, 0, 200, .7); }
.boot__rest { color: #2a0a4a; text-shadow: none; }
.boot__cursor {
  display: inline-block;
  width: .5em;
  height: .95em;
  margin-left: .05em;
  vertical-align: -.12em;
  background: currentColor;
  animation: caret 1s steps(1) infinite;
}
@keyframes caret { 50% { opacity: 0; } }
.boot__enter {
  display: inline-flex;
  align-items: center;
  margin-top: 1.22em;
  padding: .1em .3em;
  margin-left: -.3em;
  font-family: inherit;
  font-size: inherit;
  letter-spacing: .1em;
  color: var(--neon-yellow);
  text-shadow: 0 0 10px rgba(255, 230, 0, .6);
  background: none;
  border: 0;
  animation: caret 1.1s steps(1) 4;
}
.boot__enter .ico { height: .7em; }
.boot__skip {
  position: absolute;
  top: max(16px, env(safe-area-inset-top));
  right: max(16px, env(safe-area-inset-right));
  display: inline-flex;
  align-items: center;
  gap: .5em;
  padding: .3em .8em .25em;
  font-family: var(--font-mono);
  font-size: 1.25rem;
  letter-spacing: .08em;
  color: var(--text-soft);
  background: none;
  border: 1px solid rgba(232, 232, 255, .35);
}
.boot__skip:hover { color: #fff; border-color: #fff; }
.boot--out { animation: boot-out .45s cubic-bezier(.6, 0, .9, .5) forwards !important; }
@keyframes boot-out {
  0%   { opacity: 1; transform: none; }
  55%  { opacity: 1; transform: scale(1, .005); filter: brightness(3); }
  100% { opacity: 0; transform: scale(0, .005); filter: brightness(3); }
}

/* ---------------------------------------------------------------- hero intro (once, after boot) */
@media (prefers-reduced-motion: no-preference) {
  .intro .sun__disc { animation: sun-rise 1.9s cubic-bezier(.22, .8, .25, 1) .1s both; }
  .intro .logo__tommy { animation: neon-on 1.3s .55s linear both; }
  .intro .logo__cape { animation: chrome-shine 1.5s 1s ease-in-out both; }
  .logo__sparkle { animation: twinkle 7s 2.4s ease-in-out infinite both; }
  .floor__grid { animation: floor-run 1.6s linear infinite; }
  .floor--footer .floor__grid { animation-duration: 3.2s; }
  .is-booting .hero *,
  .is-booting .hero::before { animation-play-state: paused !important; }
  .is-paused .floor__grid,
  .is-paused .logo__sparkle { animation-play-state: paused; }
  .release__disc { transition-duration: .55s; }
}
@keyframes sun-rise {
  from { transform: translate(-50%, 42%); }
  to   { transform: translate(-50%, 0); }
}
@keyframes neon-on {
  0%   { opacity: .08; text-shadow: none; }
  8%   { opacity: 1; }
  11%  { opacity: .15; text-shadow: none; }
  22%  { opacity: 1; }
  25%  { opacity: .3; text-shadow: none; }
  45%  { opacity: 1; }
  100% { opacity: 1; }
}
@keyframes chrome-shine {
  from { background-position: 160% 0, 0 0; }
  to   { background-position: -60% 0, 0 0; }
}
@keyframes twinkle {
  0%, 88%, 100% { transform: scale(0) rotate(0deg); opacity: 0; }
  93%           { transform: scale(1) rotate(45deg); opacity: 1; }
}
@keyframes floor-run {
  from { transform: rotateX(76deg) translateY(0); }
  to   { transform: rotateX(76deg) translateY(64px); }
}
@media (prefers-reduced-motion: reduce) {
  .logo__sparkle { transform: scale(.8); }
  .release__disc,
  .print,
  .btn { transition: none; }
}

/* ---------------------------------------------------------------- responsive */
@media (max-width: 899px) {
  .hero {
    --floor-h: clamp(90px, 16vh, 140px);
    --cover: min(70vw, 340px);
  }
  .hero__inner {
    grid-template-columns: 1fr;
    justify-items: center;
    gap: 0;
    padding-top: clamp(1.75rem, 5vh, 3rem);
    text-align: center;
  }
  .hero__text { padding-bottom: 0; }
  .logo { --cape: clamp(3.6rem, 1rem + 15vw, 7rem); text-align: left; }
  .hero__stage { margin-top: calc(var(--cover) * .32); }
}
@media (max-width: 719px) {
  :root { --nav-h: 56px; }
  .nav__brand { display: none; }
  .nav { gap: .5rem; }
  .nav__links { font-size: 1.32rem; letter-spacing: .1em; }
  .nav__links li + li::before { margin: 0 .35em 0 .25em; }
  .section-title::after { flex-basis: 3.5em; }
}
@media (max-width: 380px) {
  .nav__links { font-size: 1.18rem; letter-spacing: .06em; }
  .btn--small { padding-inline: .7em; letter-spacing: .08em; }
}
@media (max-width: 819px) {
  .gallery { flex-direction: column; align-items: center; }
  .print { flex: none; width: 100%; max-width: 460px; }
  .print:nth-child(n) { margin-top: 0; }
  .print:nth-child(odd) { --tilt: -1.2deg; }
  .print:nth-child(even) { --tilt: 1.2deg; }
}
@media (max-width: 640px) {
  .screen__clock { margin-left: 0; }
}

/* ---------------------------------------------------------------- 404 */
.jam {
  --floor-h: clamp(110px, 22vh, 220px);
  position: relative;
  isolation: isolate;
  overflow: hidden;
  display: grid;
  grid-template-rows: 1fr var(--floor-h);
  min-height: 100vh;
  min-height: 100svh;
}
.jam::before {
  content: "";
  grid-area: 1 / 1;
  z-index: -1;
  background:
    radial-gradient(80% 60% at 50% 100%, rgba(255, 45, 149, .38), rgba(157, 0, 255, .12) 55%, transparent 80%),
    linear-gradient(180deg, var(--bg-0) 0%, var(--bg-1) 55%, #47085e 100%);
}
.jam .floor { grid-area: 2 / 1; }
.jam__inner {
  grid-area: 1 / 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 1.1rem;
  padding-block: 3rem 2.5rem;
  text-align: center;
}
.jam__cassette { width: clamp(200px, 30vw, 280px); height: auto; filter: drop-shadow(8px 8px 0 rgba(0, 0, 0, .5)); transform: rotate(-7deg); }
.jam__title {
  margin: .6rem 0 0;
  font-family: var(--font-display);
  font-weight: 900;
  font-size: clamp(1.8rem, 1rem + 4vw, 3.4rem);
  letter-spacing: .08em;
  line-height: 1.1;
  color: #fff;
  text-shadow: 3px 3px 0 var(--neon-magenta), 6px 6px 0 var(--neon-purple);
}
@media (prefers-reduced-motion: no-preference) {
  .jam__title { animation: rgb-jitter .5s steps(1) 1.2s 3; }
}
.jam__title { white-space: nowrap; }
.jam__deco { white-space: pre; }
.jam__text { max-width: 30em; color: var(--text); font-size: clamp(1.35rem, 1.2rem + .5vw, 1.65rem); }
.jam__text span { display: block; text-wrap: balance; }
@media (max-width: 479px) { .jam__deco { display: none; } }
.jam .btn { margin-top: 1.25rem; }