/* decapmusic.com — "After Dark" prototype
   Warm-black family borrowed from Knock Audio; colour comes only from the photographs. */

@font-face { font-family: "GT Planar"; src: url("assets/fonts/GT-Planar-Light.woff2") format("woff2"); font-weight: 300; font-style: normal; font-display: swap; }
@font-face { font-family: "GT Planar"; src: url("assets/fonts/GT-Planar-Regular.woff2") format("woff2"); font-weight: 400; font-style: normal; font-display: swap; }
@font-face { font-family: "GT Planar"; src: url("assets/fonts/GT-Planar-Medium.woff2") format("woff2"); font-weight: 500; font-style: normal; font-display: swap; }

:root {
  --bg: #020202;
  --bg-2: #0E0E0D;
  --bg-3: #1A1918;
  --line: rgba(218, 211, 205, .14);
  --line-soft: rgba(218, 211, 205, .08);
  --mute: #8C857F;
  --ink: #DAD3CD;
  --bright: #F5F1EE;
  --ease: cubic-bezier(.2, .8, .2, 1);
  --gutter: clamp(20px, 4.4vw, 72px);
  --mono: ui-monospace, "SF Mono", Menlo, Consolas, monospace;
  --reveal-dur: 1.4s;
}

* { box-sizing: border-box; }
html { background: var(--bg); color: var(--ink); -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }
body {
  margin: 0;
  font-family: "GT Planar", "Helvetica Neue", Arial, sans-serif;
  font-weight: 400;
  font-size: 17px;
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}
@media (max-width: 600px) { body { font-size: 16px; } }

img { display: block; max-width: 100%; height: auto; }
a { color: inherit; text-decoration-thickness: 1px; text-underline-offset: .18em; text-decoration-color: var(--mute); transition: color .15s var(--ease), text-decoration-color .15s var(--ease); }
a:hover { color: var(--bright); text-decoration-color: var(--bright); }
a:focus-visible, button:focus-visible { outline: 1.5px solid var(--bright); outline-offset: 4px; border-radius: 2px; }
h1, h2, h3, p, ol, ul, figure, blockquote { margin: 0; }
ol, ul { padding: 0; list-style: none; }
button { font: inherit; color: inherit; background: none; border: 0; padding: 0; cursor: pointer; }

/* ---------- film grain, hairline-thin ---------- */
body::after {
  content: "";
  position: fixed; inset: 0;
  z-index: 60;
  pointer-events: none;
  opacity: .055;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='240' height='240'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 1 0 0 0 0 1 0 0 0 0 1 0 0 0 .7 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  background-size: 240px 240px;
}

/* ---------- utilities ---------- */
.skip {
  position: absolute; left: var(--gutter); top: -60px;
  z-index: 100; padding: 12px 16px;
  background: var(--bright); color: var(--bg);
  text-decoration: none; font-weight: 500;
  transition: top .15s var(--ease);
}
.skip:focus { top: 16px; }
.sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

.label {
  font-weight: 500;
  font-size: 11px;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--mute);
}
.mono { font-family: var(--mono); font-size: 12px; letter-spacing: .04em; color: var(--mute); }

.display { font-weight: 300; letter-spacing: -.02em; line-height: .98; color: var(--bright); }

.wrap { padding-left: var(--gutter); padding-right: var(--gutter); }
.rule { border: 0; border-top: 1px solid var(--line); margin: 0; }

/* ---------- reveal (JS adds .js to html; without it, everything is simply visible) ---------- */
.js .reveal { opacity: 0; transform: translateY(14px); transition: opacity var(--reveal-dur) var(--ease), transform var(--reveal-dur) var(--ease); }
.js .reveal.in { opacity: 1; transform: none; }
.js .reveal.slow { --reveal-dur: 2.2s; }
@media (prefers-reduced-motion: reduce) {
  .js .reveal { opacity: 1; transform: none; transition: none; }
}

/* ---------- nav ---------- */
.nav {
  position: fixed; inset: 0 0 auto 0;
  z-index: 40;
  display: flex; align-items: center; justify-content: space-between;
  padding: 18px var(--gutter);
  pointer-events: none;
}
.nav::before {
  content: ""; position: absolute; inset: 0; z-index: -1;
  background: linear-gradient(to bottom, rgba(2, 2, 2, .92), rgba(2, 2, 2, 0));
  height: 150%;
}
.nav a { pointer-events: auto; text-decoration: none; display: inline-flex; align-items: center; min-height: 44px; }
.nav .brand { font-weight: 500; font-size: 13px; letter-spacing: .22em; color: var(--bright); }
.nav ul { display: flex; gap: clamp(14px, 2.6vw, 36px); }
.nav ul a { font-size: 13px; font-weight: 500; letter-spacing: .06em; color: var(--ink); padding: 0 2px; }
.nav ul a:hover, .nav ul a[aria-current="page"] { color: var(--bright); }
.nav ul a[aria-current="page"] { text-decoration: underline; text-decoration-color: var(--mute); }

/* ---------- hero: a lit print in a dark room ---------- */
.hero {
  position: relative;
  min-height: 100svh;
  display: grid;
  grid-template-rows: 1fr auto;
  padding: 0 var(--gutter) clamp(28px, 4vh, 56px);
}
.hero-stage {
  display: grid; place-items: center;
  padding-top: clamp(88px, 12vh, 128px);
}
.hero-frame {
  position: relative;
  width: min(100%, calc(min(58svh, 640px) * 1.25));
  aspect-ratio: 5 / 4;
  background: var(--bg-2);
  box-shadow: 0 0 0 1px rgba(245, 241, 238, .06), 0 0 160px rgba(245, 241, 238, .07);
}
.hero-frame img { width: 100%; height: 100%; object-fit: cover; }
.js .hero-frame { opacity: 0; transform: scale(1.015); transition: opacity 2.4s var(--ease), transform 3s var(--ease); }
.js .hero-frame.lit { opacity: 1; transform: none; }

.hero-title {
  display: grid;
  grid-template-columns: 1fr auto;
  align-items: end;
  gap: 24px 40px;
  margin-top: clamp(24px, 4vh, 48px);
}
.wordmark {
  font-weight: 300;
  font-size: clamp(84px, 13.6vw, 212px);
  line-height: .82;
  letter-spacing: -.035em;
  color: var(--bright);
  margin-left: -.04em;
}
.hero-sub {
  font-size: 15px; line-height: 1.5;
  color: var(--mute);
  text-align: right;
  padding-bottom: .25em;
}
.js .hero-title { opacity: 0; transform: translateY(10px); transition: opacity 1.6s var(--ease) .9s, transform 1.8s var(--ease) .9s; }
.js .hero-title.lit { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) {
  .js .hero-frame, .js .hero-title { opacity: 1; transform: none; transition: none; }
}
@media (max-width: 600px) {
  .hero { grid-template-rows: auto auto; align-content: center; padding-bottom: 0; }
  .hero-stage { padding-top: 72px; }
  .hero-title { grid-template-columns: 1fr; gap: 12px; margin-top: 28px; }
  .hero-sub { text-align: left; font-size: 14px; }
}

/* ---------- full-bleed night frame with a title card ---------- */
.frame {
  position: relative;
  min-height: 100svh;
  display: flex; align-items: flex-end;
  padding: 0 var(--gutter) clamp(40px, 7vh, 88px);
  overflow: hidden;
  isolation: isolate;
}
.frame > img {
  position: absolute; inset: 0; z-index: -2;
  width: 100%; height: 100%; object-fit: cover; object-position: 50% 35%;
}
.frame::before {
  content: ""; position: absolute; inset: 0; z-index: -1;
  background:
    linear-gradient(to top, rgba(2, 2, 2, .9) 0%, rgba(2, 2, 2, .35) 38%, rgba(2, 2, 2, 0) 70%),
    linear-gradient(to bottom, rgba(2, 2, 2, .55), rgba(2, 2, 2, 0) 30%);
}
.frame.top { align-items: flex-start; padding-top: clamp(120px, 18vh, 200px); }
.frame.top::before {
  background:
    linear-gradient(to bottom, rgba(2, 2, 2, .85) 0%, rgba(2, 2, 2, .25) 45%, rgba(2, 2, 2, 0) 75%),
    linear-gradient(to top, rgba(2, 2, 2, .9), rgba(2, 2, 2, 0) 30%);
}
.titlecard { max-width: min(100%, 760px); }
.titlecard .label { display: block; margin-bottom: 20px; }
.titlecard h1, .titlecard h2 { font-size: clamp(40px, 6.2vw, 96px); }
.titlecard p.lede { margin-top: 20px; max-width: 42ch; color: var(--ink); font-size: clamp(16px, 1.3vw, 19px); }
.frame .titlecard h2 { max-width: 11ch; }
.frame .pos { position: absolute; left: var(--gutter); bottom: clamp(40px, 7vh, 88px); }

/* ---------- section scaffolding ---------- */
.section { padding: clamp(72px, 11vh, 150px) var(--gutter); }
.section-head { display: grid; grid-template-columns: 1fr; gap: 16px; margin-bottom: clamp(36px, 6vh, 72px); }
.section-head h2 { font-size: clamp(34px, 4.4vw, 64px); max-width: 16ch; }

/* ---------- featured credits (home) ---------- */
.cards { border-top: 1px solid var(--line); }
.card {
  display: grid;
  grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr);
  gap: 20px 56px;
  padding: clamp(28px, 4vh, 48px) 0;
  border-bottom: 1px solid var(--line);
  align-items: baseline;
}
.card h3 { font-weight: 300; font-size: clamp(34px, 4.6vw, 72px); line-height: .96; letter-spacing: -.02em; color: var(--bright); }
.card .song { margin-top: 10px; font-size: clamp(18px, 1.5vw, 24px); color: var(--ink); }
.card .note { color: var(--mute); max-width: 36ch; font-size: 15px; line-height: 1.55; }
.card .note q { color: var(--ink); }
.card .note q::before { content: "\201C"; } .card .note q::after { content: "\201D"; }
.also {
  display: grid; grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr); gap: 20px 56px;
  padding: clamp(28px, 4vh, 48px) 0;
  border-bottom: 1px solid var(--line);
}
.also p { font-size: clamp(20px, 2vw, 30px); font-weight: 300; line-height: 1.3; color: var(--ink); letter-spacing: -.01em; }
.also .label { padding-top: .6em; }
.more { margin-top: clamp(28px, 4vh, 44px); display: flex; justify-content: flex-end; }
.more a { font-weight: 500; font-size: 14px; letter-spacing: .06em; text-decoration: none; display: inline-flex; align-items: center; gap: 14px; min-height: 44px; }
.more a::after { content: ""; width: 44px; height: 1px; background: var(--mute); transition: width .15s var(--ease), background .15s var(--ease); }
.more a:hover::after { width: 72px; background: var(--bright); }
@media (max-width: 760px) {
  .card, .also { grid-template-columns: 1fr; gap: 14px; }
  .also .label { padding-top: 0; }
}

/* ---------- the feature block (swappable: today the Spotify profile, later the current record) ---------- */
.feature {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: clamp(32px, 5vw, 96px);
  align-items: center;
}
.feature figure { position: relative; aspect-ratio: 3 / 2; overflow: hidden; background: var(--bg-2); }
.feature figure img { width: 100%; height: 100%; object-fit: cover; }
.feature figure figcaption { position: absolute; left: 20px; bottom: 16px; }
.feature-body h2 { font-size: clamp(34px, 4vw, 56px); max-width: 12ch; }
.feature-body .label { display: block; margin-bottom: 18px; }
.feature-body p.lede { margin: 18px 0 32px; color: var(--mute); max-width: 36ch; }
.embed { border: 1px solid var(--line); background: var(--bg-2); border-radius: 12px; overflow: hidden; }
.embed iframe { display: block; width: 100%; height: 352px; border: 0; }
.feature-body .links { margin-top: 20px; display: flex; gap: 24px; }
.feature-body .links a { font-size: 13px; font-weight: 500; letter-spacing: .06em; text-decoration: none; min-height: 44px; display: inline-flex; align-items: center; color: var(--mute); }
.feature-body .links a:hover { color: var(--bright); }
@media (max-width: 900px) {
  .feature { grid-template-columns: 1fr; }
  .feature figure { order: -1; aspect-ratio: 4 / 3; }
}

/* ---------- about ---------- */
.about {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: clamp(32px, 5vw, 96px);
  align-items: start;
}
.about figure { position: sticky; top: 96px; overflow: hidden; background: var(--bg-2); aspect-ratio: 3 / 2; }
.about figure img { width: 100%; height: 100%; object-fit: cover; }
.about-body .label { display: block; margin-bottom: 18px; }
.about-body h2 { font-size: clamp(34px, 4vw, 56px); max-width: 14ch; margin-bottom: 32px; }
.about-body p { max-width: 44ch; color: var(--ink); }
.about-body p + p { margin-top: 1.1em; }
.about-body .founder { margin-top: 40px; padding-top: 24px; border-top: 1px solid var(--line); color: var(--mute); font-size: 15px; }
.about-body .founder a { color: var(--ink); text-decoration-color: var(--mute); }
@media (max-width: 900px) {
  .about { grid-template-columns: 1fr; }
  .about figure { position: static; order: -1; aspect-ratio: 4 / 3; }
}

/* ---------- a quiet title card between scenes ---------- */
.intertitle {
  min-height: 62svh;
  display: grid; place-items: center;
  padding: clamp(72px, 11vh, 150px) var(--gutter);
  text-align: center;
}
.intertitle p { font-weight: 300; font-size: clamp(26px, 3.4vw, 50px); letter-spacing: -.015em; line-height: 1.15; color: var(--bright); max-width: 22ch; }
.intertitle p q::before { content: "\201C"; } .intertitle p q::after { content: "\201D"; }

/* ---------- press ---------- */
.press { border-top: 1px solid var(--line); }
.press li { padding: clamp(36px, 5vh, 56px) 0; border-bottom: 1px solid var(--line); display: grid; grid-template-columns: minmax(0, 1fr); gap: 18px; }
.press blockquote p { font-weight: 300; font-size: clamp(26px, 3.6vw, 54px); letter-spacing: -.02em; line-height: 1.08; color: var(--bright); max-width: 22ch; }
.press blockquote p::before { content: "\201C"; } .press blockquote p::after { content: "\201D"; }
.press cite { font-style: normal; color: var(--mute); font-size: 14px; display: block; }
.press cite a { color: var(--mute); }
.press cite a:hover { color: var(--bright); }

/* ---------- footer ---------- */
.footer { padding: clamp(64px, 10vh, 120px) var(--gutter) 40px; border-top: 1px solid var(--line); }
.footer-grid { display: grid; grid-template-columns: minmax(0, 1.4fr) repeat(2, minmax(0, 1fr)); gap: 40px; }
.footer .wordmark { font-size: clamp(64px, 9vw, 140px); }
.footer .place { margin-top: 18px; color: var(--mute); font-size: 15px; }
.footer .col .label { display: block; margin-bottom: 16px; }
.footer .col ul li a { display: inline-flex; align-items: center; min-height: 44px; text-decoration: none; color: var(--ink); font-size: 17px; }
.footer .col ul li a:hover { color: var(--bright); text-decoration: underline; }
.footer-foot { margin-top: clamp(48px, 8vh, 96px); padding-top: 20px; border-top: 1px solid var(--line-soft); display: flex; justify-content: space-between; gap: 20px; flex-wrap: wrap; color: var(--mute); font-size: 13px; }
.footer-foot a { color: var(--mute); }
@media (max-width: 760px) {
  .footer-grid { grid-template-columns: 1fr 1fr; }
  .footer-grid > .brandcol { grid-column: 1 / -1; }
}

/* ---------- credits page: the roll ---------- */
.roll { padding: clamp(80px, 12vh, 180px) var(--gutter); position: relative; }
.roll-bg { position: fixed; inset: 0; z-index: -1; overflow: hidden; }
.roll-bg img { width: 100%; height: 100%; object-fit: cover; opacity: .18; }
.roll-bg::after { content: ""; position: absolute; inset: 0; background: radial-gradient(ellipse 70% 60% at 50% 50%, rgba(2, 2, 2, .2), rgba(2, 2, 2, .96) 100%), linear-gradient(to bottom, rgba(2, 2, 2, .9), rgba(2, 2, 2, .2) 30%, rgba(2, 2, 2, .2) 70%, rgba(2, 2, 2, .95)); }
.roll-inner { max-width: 1040px; margin: 0 auto; }
.block { padding: clamp(40px, 7vh, 96px) 0; text-align: center; }
.block + .block { border-top: 1px solid var(--line-soft); }
.block > .label { display: block; margin-bottom: clamp(28px, 4vh, 48px); }
.block > h2 { font-size: clamp(30px, 3.6vw, 52px); margin-bottom: clamp(28px, 4vh, 48px); }
.rows { display: grid; gap: clamp(22px, 3vh, 36px); }
.row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0 clamp(20px, 4vw, 56px);
  align-items: baseline;
}
.row .who { text-align: right; font-weight: 300; font-size: clamp(24px, 3vw, 44px); letter-spacing: -.02em; line-height: 1.02; color: var(--bright); }
.row .what { text-align: left; }
.row .what .song { font-size: clamp(17px, 1.5vw, 22px); color: var(--ink); }
.row .what .note { margin-top: 6px; color: var(--mute); font-size: 14px; line-height: 1.5; max-width: 30ch; }
.row .what .note q { color: var(--ink); }
.row .what .note q::before { content: "\201C"; } .row .what .note q::after { content: "\201D"; }
.row .what .mono { display: block; margin-top: 6px; }
.cast { display: grid; gap: 10px; }
.cast li { font-weight: 300; font-size: clamp(24px, 3vw, 44px); letter-spacing: -.02em; line-height: 1.05; color: var(--bright); }
.cast li .sub { display: block; font-size: 15px; color: var(--mute); margin-top: 4px; letter-spacing: 0; font-weight: 400; }
.cast.quiet li { font-size: clamp(20px, 2.2vw, 30px); }
.endcard { min-height: 100svh; display: grid; place-items: center; text-align: center; padding: var(--gutter); }
.endcard .wordmark { font-size: clamp(84px, 16vw, 260px); margin: 0; color: var(--bright); }
.endcard p { margin-top: 24px; color: var(--mute); }
.endcard .links { margin-top: 36px; display: flex; gap: 28px; justify-content: center; flex-wrap: wrap; }
.endcard .links a { font-size: 13px; font-weight: 500; letter-spacing: .08em; text-decoration: none; min-height: 44px; display: inline-flex; align-items: center; color: var(--ink); }
.endcard .links a:hover { color: var(--bright); }
@media (max-width: 600px) {
  .row { grid-template-columns: 1fr; gap: 6px; }
  .row .who, .row .what { text-align: center; }
  .row .who { font-size: 30px; }
  .row .what .song { font-size: 16px; }
  .row .what .note { font-size: 13px; margin-left: auto; margin-right: auto; }
  .rows { gap: 30px; }
}

/* roll control */
.rollctl {
  position: fixed; right: var(--gutter); bottom: 22px; z-index: 45;
  display: inline-flex; align-items: center; gap: 12px;
  min-height: 44px; padding: 0 16px;
  border: 1px solid var(--line); border-radius: 999px;
  background: rgba(2, 2, 2, .7); -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px);
  font-size: 12px; font-weight: 500; letter-spacing: .14em; text-transform: uppercase; color: var(--ink);
  transition: color .15s var(--ease), border-color .15s var(--ease);
}
.rollctl:hover { color: var(--bright); border-color: var(--mute); }
.rollctl .dot { width: 6px; height: 6px; border-radius: 50%; background: var(--mute); }
.rollctl[aria-pressed="true"] .dot { background: var(--bright); }
.rollctl[hidden] { display: none; }

/* round 2: founder line in the hero, Music label stands alone */
.hero-sub a { color: var(--ink); text-decoration-color: var(--mute); text-underline-offset: .2em; }
.hero-sub a:hover { color: var(--bright); }
.feature-body h2.label { font-size: 11px; font-weight: 500; line-height: 1.5; max-width: none; margin: 0 0 18px; }
.footer .col .mgmt { color: var(--ink); font-size: 17px; min-height: 44px; display: flex; align-items: center; margin: 0; }
.endcard .photo-credit { margin-top: 56px; font-size: 12px; color: var(--mute); }

/* Nav goes solid once you scroll, so titles slide under it instead of through it. */
.nav::after {
  content: ""; position: absolute; inset: 0; z-index: -1;
  background: #020202; border-bottom: 1px solid var(--line);
  opacity: 0; transition: opacity .35s var(--ease);
}
.nav.solid::after { opacity: 1; }
.nav::before { transition: opacity .35s var(--ease); }
.nav.solid::before { opacity: 0; }
.endcard .endsub a { color: var(--ink); text-decoration-color: var(--mute); text-underline-offset: .2em; }
.endcard .endsub a:hover { color: var(--bright); }

/* Hero, picked 2026-10-21: the photo fills the screen, the name sits on it. */
.hero-bleed { position: relative; min-height: 100svh; isolation: isolate; overflow: hidden; display: flex; align-items: flex-end; padding: 0 var(--gutter) clamp(36px, 7vh, 72px); }
.hero-bleed > img { position: absolute; inset: 0; z-index: -2; width: 100%; height: 100%; object-fit: cover; object-position: 50% 45%; }
.hero-bleed::before { content: ""; position: absolute; inset: 0; z-index: -1; background: linear-gradient(to top, rgba(2,2,2,.92) 0%, rgba(2,2,2,.4) 32%, rgba(2,2,2,0) 60%), linear-gradient(to bottom, rgba(2,2,2,.6), rgba(2,2,2,0) 22%); }
.hero-bleed .hero-title { width: 100%; margin: 0; }
.hero-bleed .hero-sub { color: var(--ink); }
.js .hero-bleed > img { opacity: 0; transform: scale(1.03); transition: opacity 2.4s var(--ease), transform 4s var(--ease); }
.js .hero-bleed.lit > img { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) { .js .hero-bleed > img { opacity: 1; transform: none; transition: none; } }
/* Phone: the name across the top, the photo framed under it (Nick's pick 2026-10-21: 1 on desktop, 2 on phone). */
@media (max-width: 600px) {
  .hero-bleed { display: grid; align-content: center; gap: 22px; padding: 84px var(--gutter) 40px; }
  .hero-bleed::before { display: none; }
  .hero-bleed > img { position: static; order: 2; width: 100%; height: auto; aspect-ratio: 4 / 5; object-position: 50% 50%; }
  .hero-bleed .hero-title { display: contents; }
  .hero-bleed .wordmark { order: 1; font-size: 26.6vw; line-height: .78; letter-spacing: -.05em; margin-left: -.05em; white-space: nowrap; }
  .hero-bleed .hero-sub { order: 3; text-align: left; color: var(--mute); }
}
/* Phone: the night frame before the credits is shorter, so "Heard on" arrives sooner. */
@media (max-width: 600px) { .frame-cut { min-height: 58svh; } .hero-bleed { min-height: 0; } }

/* Home credits, picked 2026-10-21 (Spotlight): every name dim, one lights up at a time with its song. */
.spot { padding: clamp(72px, 12vh, 140px) var(--gutter) clamp(48px, 8vh, 120px); }
.spot-head { font-size: clamp(20px, 1.8vw, 26px); font-weight: 400; color: var(--mute); letter-spacing: 0; margin-bottom: clamp(28px, 6vh, 72px); }
.spot ol { list-style: none; margin: 0; padding: 0; }
.spot li { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 20px; padding: clamp(4px, 1vh, 10px) 0; cursor: default; }
.spot .who { font-weight: 300; font-size: clamp(44px, 9vw, 150px); line-height: 1; letter-spacing: -.045em; color: var(--bright); transition: color .45s var(--ease); }
.spot .song { font-size: clamp(15px, 1.3vw, 19px); color: var(--ink); transition: opacity .45s var(--ease), transform .45s var(--ease); }
.js .spot.live .who { color: #2E2C2B; }
.js .spot.live .song { opacity: 0; transform: translateY(6px); }
.js .spot.live li.on .who { color: var(--bright); }
.js .spot.live li.on .song { opacity: 1; transform: none; }
.spot-also { margin-top: clamp(56px, 10vh, 140px); }
.spot-also p { font-weight: 300; font-size: clamp(18px, 1.8vw, 26px); line-height: 1.35; color: var(--mute); max-width: 40ch; }
.spot-also em { color: var(--ink); }
.footer { border-top: 0; }
.footer-foot { border-top: 0; }

/* Credits page, picked 2026-10-21 ("Film", teal-rims-28): teal photo full bleed, then centred capitals like an end roll. */
.film-top > img { object-position: 50% 12%; }
.frame.film-top { justify-content: center; text-align: center; }
.film-top .titlecard h1 { letter-spacing: .12em; text-transform: uppercase; font-weight: 400; font-size: clamp(30px, 4.4vw, 64px); }
.film { text-align: center; padding: clamp(80px, 14vh, 180px) var(--gutter) clamp(48px, 8vh, 120px); background: #020202; position: relative; z-index: 1; }
.film ol { list-style: none; margin: 0; padding: 0; display: grid; gap: clamp(36px, 6vh, 64px); }
.film .who { display: block; font-size: clamp(24px, 3.4vw, 50px); letter-spacing: .16em; text-transform: uppercase; color: var(--bright); line-height: 1.15; }
.film .song { display: block; margin-top: 10px; font-size: 12px; letter-spacing: .22em; text-transform: uppercase; color: var(--mute); }
.film .note { margin: 10px auto 0; color: var(--mute); font-size: 13px; line-height: 1.5; max-width: 36ch; }
.film q::before { content: "\201C"; } .film q::after { content: "\201D"; }
.film .also { display: block; text-align: center; margin-top: clamp(72px, 12vh, 150px); }
.film .also-p { margin: 0 auto; font-weight: 400; font-size: 13px; letter-spacing: .14em; text-transform: uppercase; line-height: 2.1; max-width: 48ch; color: var(--mute); }
@media (max-width: 600px) { .film-top > img { object-position: 22% 50%; } }

/* Colour, picked 2026-10-21 ("Gel glow"): each name lights in its own stage-gel colour and the light spills around it.
   "Heard on" and the press quote marks follow the lit colour; the DECAP in the nav stays white (Nick). */
@property --cur { syntax: "<color>"; inherits: true; initial-value: #FF3D8B; }
body { --cur: #FF3D8B; transition: --cur .6s var(--ease); }
body:has(.spot li:nth-child(2).on) { --cur: #FFB020; }
body:has(.spot li:nth-child(3).on) { --cur: #2FD3C4; }
body:has(.spot li:nth-child(4).on) { --cur: #A47BFF; }
body:has(.spot li:nth-child(5).on) { --cur: #FF5A2E; }
.spot { position: relative; isolation: isolate; }
.spot::before { content: ""; position: absolute; inset: -10% 0; z-index: -1; pointer-events: none;
  background: radial-gradient(55% 45% at 22% 48%, color-mix(in srgb, var(--cur) 22%, transparent), transparent 70%); }
.spot-head { color: var(--cur); }
.spot .who { transition: color .45s var(--ease), text-shadow .45s var(--ease); }
.spot li:nth-child(1) { --gel: #FF3D8B; } .spot li:nth-child(2) { --gel: #FFB020; } .spot li:nth-child(3) { --gel: #2FD3C4; }
.spot li:nth-child(4) { --gel: #A47BFF; } .spot li:nth-child(5) { --gel: #FF5A2E; }
.js .spot.live li.on .who { color: var(--gel); text-shadow: 0 0 80px color-mix(in srgb, var(--gel) 55%, transparent); }
.js .spot.live li.on .song { color: var(--bright); }
.press blockquote p::before, .press blockquote p::after { color: var(--cur); }
.film li:nth-child(1) .who { text-shadow: 0 0 40px rgba(255, 61, 139, .6); }
.film li:nth-child(2) .who { text-shadow: 0 0 40px rgba(255, 176, 32, .6); }
.film li:nth-child(3) .who { text-shadow: 0 0 40px rgba(47, 211, 196, .6); }
.film li:nth-child(4) .who { text-shadow: 0 0 40px rgba(164, 123, 255, .6); }
.film li:nth-child(5) .who { text-shadow: 0 0 40px rgba(255, 90, 46, .6); }
.film li:nth-child(6) .who { text-shadow: 0 0 40px rgba(255, 61, 139, .6); }