/* ==========================================================================
   adammurray.ca — Mixtape '87
   A homemade cassette. Side A (light) is late-80s Memphis pop;
   Side B (dark) is neon after dark. Every page is a track.
   Layout: one 1240px column; tracklist nav on desktop, tape-deck keys
   pinned to the bottom on phones.
   ========================================================================== */

/* ---------- 0. Fonts (self-hosted: no third-party requests) ---------- */
@font-face { font-family: "Rubik"; font-style: normal; font-weight: 400; font-display: swap; src: url("../fonts/rubik-latin-400-normal.woff2") format("woff2"); }
@font-face { font-family: "Rubik"; font-style: normal; font-weight: 600; font-display: swap; src: url("../fonts/rubik-latin-600-normal.woff2") format("woff2"); }
@font-face { font-family: "Rubik"; font-style: normal; font-weight: 800; font-display: swap; src: url("../fonts/rubik-latin-800-normal.woff2") format("woff2"); }
@font-face { font-family: "Rubik Mono One"; font-style: normal; font-weight: 400; font-display: swap; src: url("../fonts/rubik-mono-one-latin-400-normal.woff2") format("woff2"); }
@font-face { font-family: "Permanent Marker"; font-style: normal; font-weight: 400; font-display: swap; src: url("../fonts/permanent-marker-latin-400-normal.woff2") format("woff2"); }

/* ---------- 1. Tokens: Side A · Daytime ------------------------------- */
:root {
  --bg: #FFFDF7;
  --card: #FFFFFF;
  --fg: #1B1B3A;            /* 16.3:1 on bg */
  --muted: #4D4D6B;         /* 8.0:1 */
  --line: #1B1B3A;
  --accent: #D4006A;        /* magenta, 5.2:1 */
  --on-accent: #FFFFFF;
  --accent2: #19C3C3;       /* teal, fills only */
  --accent2-ink: #007C80;   /* teal text, 4.9:1 */
  --accent3: #FFD23F;       /* yellow, fills only */
  --purple: #5B2BB5;
  --pink: #FF8CC6;
  --link: #D4006A;
  --link-hover: #1B1B3A;
  --shell: #1B1B3A;         /* cassette body */
  --label: #FFD23F;         /* cassette label */
  --label-ink: #1B1B3A;
  --reel: #FFFDF7;
  --shadow: #1B1B3A;
  --glow: 0 0 0 transparent;
  --glow-text: none;
  --pattern-ink: rgba(27, 27, 58, 0.55);
  --dots: rgba(91, 43, 181, 0.45);
  --show-a: inline;
  --show-b: none;
  --show-c: none;
  --pencil: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='32' height='32' viewBox='0 0 32 32'%3E%3Cg transform='rotate(45 16 16)'%3E%3Crect x='12' y='-5' width='8' height='5' fill='%23FF8CC6' stroke='%231B1B3A' stroke-width='1.5'/%3E%3Crect x='12' y='0' width='8' height='20' fill='%23FFD23F' stroke='%231B1B3A' stroke-width='1.5'/%3E%3Cpath d='M12 20 L16 29 L20 20 Z' fill='%23F3D9B1' stroke='%231B1B3A' stroke-width='1.5'/%3E%3Cpath d='M15 26.6 L16 29 L17 26.6 Z' fill='%231B1B3A'/%3E%3C/g%3E%3C/svg%3E") 7 25;
  --footer-bg: #1B1B3A;
  --footer-fg: #FFFDF7;
  --footer-accent: #FFD23F;
  --deck-bg: #1B1B3A;
  --deck-key: #34345C;
  --deck-fg: #FFFDF7;
  --deck-num: #FFD23F;
  --deck-active: #FFD23F;
  --deck-active-fg: #1B1B3A;
  --focus: #5B2BB5;

  --font-display: "Rubik Mono One", "Arial Black", Impact, sans-serif;
  --font-body: "Rubik", system-ui, -apple-system, "Segoe UI", sans-serif;
  --font-hand: "Permanent Marker", "Comic Sans MS", cursive;

  --step--1: 0.875rem;
  --step-0: 1.125rem;
  --step-1: 1.3125rem;
  --step-2: 1.5rem;
  --step-3: clamp(1.75rem, 2.4vw + 1rem, 2.5rem);
  --step-4: clamp(2rem, 4.2vw + 0.5rem, 3.375rem);
  --step-5: clamp(2.75rem, 6.4vw, 5.5rem);

  --gutter: max(16px, min(3vw, 24px));
  --radius: 16px;
  --radius-sm: 10px;
  --border: 3px;

  color-scheme: light;
}

/* ---------- Side B · After dark (system setting, unless the visitor chose) */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --bg: #0D0A24; --card: #17122F; --fg: #F2EEFF; --muted: #B9B0E0; --line: #A77BFF;
    --accent: #FF3EA5; --on-accent: #0D0A24; --accent2: #2BE4FF; --accent2-ink: #2BE4FF; --accent3: #FFE45C;
    --purple: #A77BFF; --pink: #FF3EA5; --link: #2BE4FF; --link-hover: #FFE45C;
    --shell: #2A1F55; --label: #FF3EA5; --label-ink: #0D0A24; --reel: #F2EEFF; --shadow: #000000;
    --glow: 0 0 26px rgba(255, 62, 165, 0.5); --glow-text: 0 0 18px rgba(255, 62, 165, 0.7);
    --pattern-ink: rgba(13, 10, 36, 0.55); --dots: rgba(167, 123, 255, 0.5);
    --show-a: none; --show-b: inline;
    --footer-bg: #07051A; --footer-fg: #F2EEFF; --footer-accent: #FFE45C;
    --deck-bg: #07051A; --deck-key: #241B4A; --deck-fg: #F2EEFF; --deck-num: #2BE4FF; --deck-active: #FF3EA5; --deck-active-fg: #0D0A24;
    --focus: #2BE4FF;
    color-scheme: dark;
  }
}
:root[data-theme="dark"] {
  --bg: #0D0A24; --card: #17122F; --fg: #F2EEFF; --muted: #B9B0E0; --line: #A77BFF;
  --accent: #FF3EA5; --on-accent: #0D0A24; --accent2: #2BE4FF; --accent2-ink: #2BE4FF; --accent3: #FFE45C;
  --purple: #A77BFF; --pink: #FF3EA5; --link: #2BE4FF; --link-hover: #FFE45C;
  --shell: #2A1F55; --label: #FF3EA5; --label-ink: #0D0A24; --reel: #F2EEFF; --shadow: #000000;
  --glow: 0 0 26px rgba(255, 62, 165, 0.5); --glow-text: 0 0 18px rgba(255, 62, 165, 0.7);
  --pattern-ink: rgba(13, 10, 36, 0.55); --dots: rgba(167, 123, 255, 0.5);
  --show-a: none; --show-b: inline;
  --footer-bg: #07051A; --footer-fg: #F2EEFF; --footer-accent: #FFE45C;
  --deck-bg: #07051A; --deck-key: #241B4A; --deck-fg: #F2EEFF; --deck-num: #2BE4FF; --deck-active: #FF3EA5; --deck-active-fg: #0D0A24;
  --focus: #2BE4FF;
  color-scheme: dark;
}

/* ---------- Side C · Chrome (secret: hold Flip, or the Konami code twice)
   Silver and graphite with electric blue, after the premium "Type II"
   chrome cassettes. Text pairs: fg on bg 14.5:1, fg on card 16.7:1,
   muted on bg 7.1:1, accent on bg 6.3:1, white on accent 7.8:1. */
:root[data-theme="c"] {
  --bg: #E4E7EC; --card: #F6F7F9; --fg: #14171D; --muted: #454B57; --line: #14171D;
  --accent: #0047C2; --on-accent: #FFFFFF; --accent2: #8E99AB; --accent2-ink: #14171D; --accent3: #C9D0DB;
  --purple: #3B4250; --pink: #AEB7C6; --link: #0047C2; --link-hover: #14171D;
  --shell: #23272E; --label: #C9D0DB; --label-ink: #14171D; --reel: #F6F7F9; --shadow: #14171D;
  --glow: 0 0 0 transparent; --glow-text: none;
  --pattern-ink: rgba(20, 23, 29, 0.5); --dots: rgba(20, 23, 29, 0.22);
  --show-a: none; --show-b: none; --show-c: inline;
  --footer-bg: #23272E; --footer-fg: #F6F7F9; --footer-accent: #8FB4FF;
  --deck-bg: #23272E; --deck-key: #3B4250; --deck-fg: #F6F7F9; --deck-num: #8FB4FF; --deck-active: #8FB4FF; --deck-active-fg: #14171D;
  --focus: #0047C2;
  --chrome: linear-gradient(115deg, #E9EDF2 0%, #AEB7C4 35%, #F4F6F9 50%, #9EA8B6 70%, #DDE2E9 100%);
  color-scheme: light;
}
/* Brushed-metal cassette label */
:root[data-theme="c"] .cassette__label { background-image: var(--chrome); }

/* ---------- 2. Base ---------------------------------------------------- */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0; background: var(--bg); color: var(--fg);
  font-family: var(--font-body); font-size: var(--step-0); line-height: 1.6;
  overflow-x: hidden; transition: background-color .35s, color .35s;
}
img, svg, video { max-width: 100%; height: auto; }
a { color: var(--link); text-underline-offset: 0.2em; text-decoration-thickness: 2px; }
a:hover { color: var(--link-hover); }
:focus-visible { outline: 3px solid var(--focus); outline-offset: 3px; border-radius: 4px; }
h1, h2, h3 { margin: 0; text-wrap: balance; }
p { margin: 0; }
[hidden] { display: none !important; }

.display { font-family: var(--font-display); font-weight: 400; line-height: 0.96; letter-spacing: -0.01em; text-shadow: var(--glow-text); }
.marker { font-family: var(--font-hand); font-weight: 400; }
.eyebrow { font-weight: 800; font-size: var(--step--1); letter-spacing: 0.16em; text-transform: uppercase; color: var(--accent); }
.muted { color: var(--muted); }
.only-a { display: var(--show-a); }
.only-b { display: var(--show-b); }
.only-c { display: var(--show-c, none); }

.wrap {
  width: 100%; max-width: 1240px; margin-inline: auto;
  padding-left: max(var(--gutter), env(safe-area-inset-left, 0px));
  padding-right: max(var(--gutter), env(safe-area-inset-right, 0px));
}
.section { padding-block: 0 4.5rem; }
.stack { display: flex; flex-direction: column; gap: 1.25rem; }
.two-up { display: flex; flex-wrap: wrap; align-items: flex-start; gap: 36px; }
.two-up > * { flex: 1 1 380px; min-width: 0; }
.two-up > .wide { flex: 1.35 1 480px; }

.skip-link { position: absolute; left: 16px; top: -100px; z-index: 60; background: var(--fg); color: var(--bg); padding: 10px 16px; border-radius: 999px; font-weight: 800; }
.skip-link:focus { top: 16px; }
.visually-hidden { position: absolute !important; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

/* ---------- 3. Header --------------------------------------------------- */
/* The header stays pinned to the top while the page scrolls. It sits on the page colour so text
   slides under it cleanly; a hairline appears once the page has moved (main.js adds .is-stuck).
   Anchor jumps leave room for it via scroll-padding-top (main.js keeps --header-h current). */
.site-header {
  position: sticky; top: 0; z-index: 40; background: var(--bg);
  transition: background-color .35s, box-shadow .2s;
}
.site-header.is-stuck { box-shadow: 0 1px 0 var(--line), 0 8px 18px -14px var(--shadow); }
html { scroll-padding-top: calc(var(--header-h, 96px) + 12px); }
.site-header .wrap { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 16px 24px; padding-block: 20px; }
.brand { display: flex; align-items: center; gap: 12px; color: var(--fg); text-decoration: none; }
.brand:hover { color: var(--fg); }
.mark {
  width: 54px; height: 36px; flex: none; border-radius: 7px; background: var(--shell);
  display: flex; align-items: center; justify-content: space-around; padding: 0 7px; box-shadow: var(--glow);
}
.mark::before, .mark::after {
  content: ""; width: 12px; height: 12px; border-radius: 50%;
  background: radial-gradient(circle, var(--shell) 0 1.6px, transparent 2px), conic-gradient(var(--accent3) 0 35deg, var(--shell) 35deg 55deg, var(--accent3) 55deg 155deg, var(--shell) 155deg 175deg, var(--accent3) 175deg 275deg, var(--shell) 275deg 295deg, var(--accent3) 295deg);
}
/* The AM logo: the same little cassette with an "AM" label above the reels, matching the favicon.
   The label takes the side's cassette-label colours; the reels still spin on hover (egg 9). */
.mark--am { display: grid; grid-template-columns: 1fr 1fr; grid-template-rows: auto 1fr; align-items: center; justify-items: center; gap: 2px 0; padding: 4px 6px; }
.mark--am::before { grid-area: 2 / 1; width: 11px; height: 11px; }
.mark--am::after { grid-area: 2 / 2; width: 11px; height: 11px; }
.mark__label {
  grid-column: 1 / -1; grid-row: 1; justify-self: stretch; text-align: center; border-radius: 2px; padding: 2px 0 1px;
  background: var(--label); color: var(--label-ink); font: 400 10px/1 var(--font-display); letter-spacing: .08em;
}
.brand:hover .mark::before, .brand:hover .mark::after, .brand:focus-visible .mark::before, .brand:focus-visible .mark::after { animation: am-spin .9s linear infinite; }
.brand__text { display: flex; flex-direction: column; line-height: 1.05; }
.brand__name { font-family: var(--font-display); font-size: 1.25rem; }
.brand__tag { font-family: var(--font-hand); font-size: 1.125rem; color: var(--accent); }

.nav { display: flex; flex-wrap: wrap; gap: 2px 18px; }
.track-link { display: inline-flex; align-items: center; gap: 6px; min-height: 44px; color: var(--fg); text-decoration: none; font-weight: 600; font-size: 1rem; }
.track-link__num { color: var(--accent); font-weight: 800; }
.track-link:hover { color: var(--accent); }
.track-link[aria-current="page"] { text-decoration: underline wavy var(--accent); text-underline-offset: 8px; text-decoration-thickness: 2px; }

.flip {
  min-height: 48px; padding: 0 20px; border: var(--border) solid var(--line); border-radius: 999px;
  background: var(--accent3); color: #1B1B3A; cursor: pointer;
  font: 800 0.9375rem/1 var(--font-body); letter-spacing: 0.06em; text-transform: uppercase;
  box-shadow: 4px 4px 0 var(--shadow); transition: transform .12s, box-shadow .12s;
}
.flip:hover { transform: translate(-1px, -1px); box-shadow: 5px 5px 0 var(--shadow); }
.flip:active { transform: translate(3px, 3px); box-shadow: 1px 1px 0 var(--shadow); }
.flip { -webkit-touch-callout: none; user-select: none; -webkit-user-select: none; }
.flip.is-holding { transform: translate(3px, 3px); box-shadow: 1px 1px 0 var(--shadow); background: var(--accent2); transition: background-color .9s linear, transform .12s, box-shadow .12s; }

/* Phone: tape-deck keys */
.deck { display: none; }
@media (max-width: 900px) {
  .nav { display: none; }
  /* Pinned header on phones: brand and Flip on one compact row, so it takes little of the screen. */
  .site-header .wrap { flex-wrap: nowrap; gap: 12px; padding-block: 12px; }
  .brand { min-width: 0; gap: 10px; }
  .brand__name { font-size: clamp(0.9375rem, 4.1vw, 1.125rem); white-space: nowrap; }
  .brand__tag { font-size: 1rem; white-space: nowrap; }
  .flip { flex: none; min-height: 44px; padding: 0 clamp(10px, 3vw, 14px); font-size: clamp(0.625rem, 2.9vw, 0.75rem); letter-spacing: 0.03em; box-shadow: 3px 3px 0 var(--shadow); }
}
/* The smallest phones: let the name take two lines rather than squash the Flip button. */
@media (max-width: 359px) {
  .brand__name { white-space: normal; }
  body { padding-bottom: calc(86px + env(safe-area-inset-bottom, 0px)); }
  .deck {
    position: fixed; left: 0; right: 0; bottom: 0; z-index: 50;
    display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 6px;
    background: var(--deck-bg); border-top: 3px solid var(--accent);
    padding-top: 10px; padding-bottom: calc(12px + env(safe-area-inset-bottom, 0px));
    padding-left: max(10px, env(safe-area-inset-left, 0px)); padding-right: max(10px, env(safe-area-inset-right, 0px));
  }
  .deck a {
    min-height: 56px; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 3px;
    border-radius: 8px; background: var(--deck-key); color: var(--deck-fg); text-decoration: none;
    box-shadow: inset 0 -5px 0 rgba(0, 0, 0, 0.35); font-size: 0.6875rem; font-weight: 600; line-height: 1.1;
  }
  .deck a span:first-child { font-weight: 800; font-size: 1rem; color: var(--deck-num); }
  .deck a[aria-current="page"] { background: var(--deck-active); color: var(--deck-active-fg); }
  .deck a[aria-current="page"] span:first-child { color: var(--deck-active-fg); }
  .deck a:active { transform: translateY(3px); box-shadow: inset 0 -2px 0 rgba(0, 0, 0, 0.35); }
}

/* ---------- 4. Buttons -------------------------------------------------- */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  min-height: 54px; padding: 0 26px; border: var(--border) solid var(--line); border-radius: 999px;
  background: transparent; color: var(--fg); text-decoration: none; cursor: pointer;
  font: 800 1.0625rem/1 var(--font-body); transition: transform .12s, box-shadow .12s;
}
.btn:hover { color: var(--fg); }
.btn--primary { background: var(--accent); color: var(--on-accent); box-shadow: 5px 5px 0 var(--shadow), var(--glow); }
.btn--primary:hover { color: var(--on-accent); transform: translate(-1px, -1px); }
.btn--primary:active { transform: translate(4px, 4px); box-shadow: 1px 1px 0 var(--shadow); }
.btn--teal { background: var(--accent2); color: #1B1B3A; }
.btn--teal:hover { color: #1B1B3A; }
.btn--small { min-height: 46px; padding: 0 18px; font-size: 0.9375rem; }
.btn-row { display: flex; flex-wrap: wrap; gap: 16px; }

/* ---------- 5. Cards ---------------------------------------------------- */
.card {
  background: var(--card); border: var(--border) solid var(--line); border-radius: var(--radius);
  box-shadow: 7px 7px 0 var(--accent2), var(--glow); padding: 28px; min-width: 0;
  display: flex; flex-direction: column; gap: 16px;
}
.card--magenta { box-shadow: 7px 7px 0 var(--accent), var(--glow); }
.card--yellow { box-shadow: 7px 7px 0 var(--accent3), var(--glow); }
.card__title { font-family: var(--font-display); font-size: var(--step-3); line-height: 1; }
.card__head { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: baseline; gap: 8px 12px; }

.photo {
  position: relative; width: 100%; max-width: 100%; aspect-ratio: 4 / 5;
  background: var(--pink); border: 4px solid var(--line); box-shadow: 10px 10px 0 var(--shadow), var(--glow);
  display: grid; place-items: center; transform: rotate(2deg);
}
.photo::before { content: ""; position: absolute; inset: 14px; border: 3px dashed var(--label-ink); opacity: .5; }
.photo img,
.photo > picture { position: absolute; inset: 0; width: 100%; height: 100%; }
.photo img { object-fit: cover; }
.photo:has(img)::before { display: none; } /* the dashed guide only marks an empty frame */

/* ---------- 6. Page heads ---------------------------------------------- */
.page-head { position: relative; padding-block: 1.5rem 3rem; display: flex; flex-direction: column; gap: 1rem; }
.page-head h1 { font-size: var(--step-5); }
.page-head .lede { max-width: 36rem; }
.page-head::after {
  content: ""; position: absolute; right: 0; top: 10px; width: 150px; height: 150px; z-index: 0; pointer-events: none;
  background-image: radial-gradient(var(--dots) 2.5px, transparent 3px); background-size: 18px 18px;
}
.page-head > * { position: relative; z-index: 1; }
@media (max-width: 640px) { .page-head::after { display: none; } .lead-single__art { min-height: 200px; } }
.page-head__aside { font-family: var(--font-hand); font-size: 1.5rem; color: var(--accent); transform: rotate(-3deg); align-self: flex-start; }
.lede { font-size: var(--step-1); line-height: 1.55; color: var(--muted); }
.section-head { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: flex-end; gap: 12px; margin-bottom: 28px; }
.section-head h2 { font-family: var(--font-display); font-size: var(--step-4); line-height: 1; text-shadow: var(--glow-text); }
.section-head a { font-weight: 800; }
.squiggle { display: block; width: 200px; height: 30px; }
.squiggle path { fill: none; stroke: var(--purple); stroke-width: 7; stroke-linecap: round; }

/* ---------- 7. Cassette (home hero) ------------------------------------ */
.hero { display: flex; flex-wrap: wrap; align-items: center; gap: 56px; padding-block: 1.5rem 4.5rem; }
.hero__tape { flex: 1 1 440px; min-width: 0; display: flex; justify-content: center; }
.hero__copy { flex: 1 1 440px; min-width: 0; display: flex; flex-direction: column; gap: 20px; }
.hero__copy h1 { font-size: var(--step-5); }
.hero__copy .lede { max-width: 32rem; }

.cassette {
  position: relative; width: 100%; max-width: 560px; aspect-ratio: 1.6;
  background: var(--shell); border-radius: 26px; padding: 6% 7%;
  box-shadow: 12px 12px 0 var(--accent2), var(--glow);
  display: flex; flex-direction: column; gap: 6%; transform: rotate(-3deg);
}
.cassette::before, .cassette::after { content: ""; position: absolute; bottom: 5%; width: 5%; aspect-ratio: 1; border-radius: 50%; background: var(--bg); opacity: .25; }
.cassette::before { left: 30%; } .cassette::after { right: 30%; }
.cassette__label {
  flex: 1.2; border-radius: 10px; padding: 4% 5%; display: flex; flex-direction: column; justify-content: space-between;
  background-color: var(--label);
  background-image: repeating-linear-gradient(180deg, transparent 0 22px, rgba(13, 10, 36, 0.22) 22px 24px);
  color: var(--label-ink);
}
.cassette__top { display: flex; justify-content: space-between; align-items: flex-start; gap: 10px; }
.cassette__title { font-family: var(--font-hand); font-size: clamp(1.375rem, 3.2vw, 2.375rem); line-height: 1; }
.cassette__side { font-family: var(--font-display); font-size: clamp(1.625rem, 3.6vw, 2.75rem); line-height: 1; }
.cassette__sub { font-family: var(--font-hand); font-size: clamp(0.875rem, 1.6vw, 1.1875rem); }
.cassette__window { flex: 1; display: flex; align-items: center; justify-content: space-between; gap: 6%; background: rgba(0, 0, 0, 0.28); border-radius: 999px; padding: 0 6%; }
.cassette__tape { flex: 1; height: 34%; border-radius: 8px; background: #6B4A35; opacity: .85; }
.reel { width: 22%; height: auto; animation: am-spin 5s linear infinite; }
.reel circle:first-child { fill: var(--reel); }
html.ff .reel { animation-duration: .35s; }

/* ---------- 8. Tracklist (J-card) -------------------------------------- */
.tracklist {
  background: var(--card); border: var(--border) solid var(--line); border-radius: 14px;
  box-shadow: 8px 8px 0 var(--accent), var(--glow); padding: 28px 32px;
  display: flex; flex-wrap: wrap; gap: 24px 40px;
}
.tracklist__head { flex: 1 1 240px; display: flex; flex-direction: column; gap: 6px; }
.tracklist__head h2 { font-family: var(--font-display); font-size: 2rem; line-height: 1; }
.tracklist__list { flex: 2 1 520px; min-width: 0; list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 240px), 1fr)); gap: 0 32px; }
.tracklist__list a { display: flex; gap: 14px; align-items: baseline; padding: 11px 0; border-bottom: 2px dashed var(--muted); color: var(--fg); text-decoration: none; font-weight: 600; }
.tracklist__list a:hover { color: var(--accent); }
.tracklist__list b { font-family: var(--font-display); font-weight: 400; color: var(--accent); min-width: 2.2em; }

/* ---------- 9. Hits (project cards) ------------------------------------ */
.hit-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 280px), 1fr)); gap: 32px; }
.hit {
  display: flex; flex-direction: column; background: var(--card); color: var(--fg); text-decoration: none;
  border: var(--border) solid var(--line); border-radius: 14px; overflow: hidden;
  box-shadow: 6px 6px 0 var(--accent2), var(--glow); transition: transform .15s;
}
.hit:hover { color: var(--fg); transform: translate(-2px, -3px) rotate(-0.5deg); }
.hit:nth-child(3n+2) { box-shadow: 6px 6px 0 var(--accent), var(--glow); }
.hit:nth-child(3n+3) { box-shadow: 6px 6px 0 var(--accent3), var(--glow); }
.hit__art { height: 170px; border-bottom: var(--border) solid var(--line); display: grid; place-items: center; }
.hit__art span { background: var(--card); color: var(--fg); padding: 4px 10px; font-weight: 800; font-size: 0.8125rem; letter-spacing: 0.14em; }
.hit__body { padding: 18px 20px 22px; display: flex; flex-direction: column; gap: 6px; }
.hit__num { font-family: var(--font-display); font-size: 0.875rem; color: var(--accent); }
.hit__title { font-weight: 800; font-size: var(--step-2); line-height: 1.2; }
.hit__meta { font-size: 0.9375rem; color: var(--muted); }

.art-dots { background-color: var(--accent2); background-image: radial-gradient(var(--pattern-ink) 2.5px, transparent 3px); background-size: 20px 20px; }
.art-stripes { background-color: var(--accent); background-image: repeating-linear-gradient(-45deg, var(--pattern-ink) 0 5px, transparent 5px 20px); }
.art-zig { background-color: var(--accent3); background-image: linear-gradient(135deg, var(--pattern-ink) 25%, transparent 25%), linear-gradient(225deg, var(--pattern-ink) 25%, transparent 25%); background-size: 36px 36px; }
.art-checks { background-color: var(--purple); background-image: conic-gradient(var(--pattern-ink) 25%, transparent 0 50%, var(--pattern-ink) 0 75%, transparent 0); background-size: 28px 28px; }

/* Lead single (projects page) */
.lead-single {
  display: flex; flex-wrap: wrap; background: var(--shell); color: #F2EEFF; border-radius: 24px; overflow: hidden;
  box-shadow: 10px 10px 0 var(--accent), var(--glow); margin-bottom: 3.5rem;
}
.lead-single__art { flex: 1 1 400px; min-width: 0; min-height: 320px; }
.lead-single__body { flex: 1 1 380px; min-width: 0; padding: 36px; display: flex; flex-direction: column; justify-content: center; gap: 14px; }
.lead-single__body .eyebrow { color: var(--accent3); }
.lead-single__body h2 { font-family: var(--font-display); font-size: var(--step-4); line-height: 1; }
.lead-single__facts { margin: 0; display: flex; flex-wrap: wrap; gap: 8px 28px; font-size: 0.9375rem; }
.lead-single__facts dt { font-weight: 800; letter-spacing: 0.12em; font-size: 0.75rem; color: var(--accent3); }
.lead-single__facts dd { margin: 0; }
.lead-single .btn { align-self: flex-start; background: var(--accent3); color: #1B1B3A; border-color: #F2EEFF; }

/* Filter chips */
.chips { display: flex; flex-wrap: wrap; gap: 10px; }
.chip { min-height: 44px; padding: 0 18px; border: 2px solid var(--line); border-radius: 999px; background: var(--card); color: var(--fg); font: 600 0.9375rem/1 var(--font-body); cursor: pointer; }
.chip[aria-pressed="true"] { background: var(--fg); color: var(--bg); border-color: var(--fg); }

/* Year groups */
.year-group { display: flex; flex-direction: column; gap: 20px; margin-bottom: 3rem; }
.year-group__label { font-family: var(--font-display); font-size: 1.75rem; display: flex; align-items: center; gap: 14px; }
.year-group__label::after { content: ""; flex: 1; height: 3px; background: var(--line); }

/* ---------- 10. B-sides (posts) ---------------------------------------- */
.posts { list-style: none; margin: 0; padding: 0; }
.posts li { border-top: var(--border) solid var(--line); }
.posts li:last-child { border-bottom: var(--border) solid var(--line); }
.post-row { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 24px; padding-block: 18px; color: var(--fg); text-decoration: none; }
.post-row:hover { color: var(--accent); }
.post-row__date { flex: 0 0 150px; font-weight: 800; font-size: 0.8125rem; letter-spacing: 0.14em; color: var(--accent); text-transform: uppercase; }
.post-row__title { flex: 1 1 300px; min-width: 0; font-weight: 800; font-size: 1.375rem; line-height: 1.25; }
.post-row__tag { font-size: 0.875rem; color: var(--accent2-ink); font-weight: 600; }

.article-head { display: flex; flex-direction: column; gap: 1rem; padding-block: 1.5rem 2.5rem; max-width: 54rem; }
.article-head h1 { font-size: clamp(2.25rem, 5vw, 4rem); }
.prose { max-width: 68ch; font-size: 1.1875rem; line-height: 1.7; }
.prose > * + * { margin-top: 1.25em; }
.prose h2 { font-family: var(--font-display); font-size: 1.625rem; line-height: 1.2; margin-top: 2em; }
.prose h3 { font-weight: 800; font-size: 1.25rem; margin-top: 1.75em; }
.prose blockquote { margin-inline: 0; padding: 6px 0 6px 20px; border-left: 6px solid var(--accent2); font-family: var(--font-hand); font-size: 1.5rem; line-height: 1.4; }
.prose code { background: var(--card); border: 1px solid var(--line); padding: 1px 6px; border-radius: 6px; font-size: .9em; }
.prose pre { overflow-x: auto; background: var(--shell); color: #F2EEFF; padding: 20px; border-radius: var(--radius-sm); }
.prose pre code { background: none; border: 0; padding: 0; }
.prose figure { margin-inline: 0; }
.prose figcaption { font-size: .9375rem; color: var(--muted); margin-top: 8px; }
.signoff { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: baseline; gap: 16px; margin-top: 3rem; padding-top: 1.5rem; border-top: var(--border) solid var(--line); max-width: 68ch; }

/* ---------- 11. Liner notes ------------------------------------------- */
.note {
  background: var(--card); border: var(--border) solid var(--line); border-radius: 12px; padding: 28px;
  display: flex; flex-direction: column; gap: 14px; transform: rotate(-1deg); box-shadow: 6px 6px 0 var(--accent3), var(--glow);
  background-image: repeating-linear-gradient(180deg, transparent 0 34px, rgba(127, 127, 160, 0.25) 34px 36px);
}
.note__text { font-family: var(--font-hand); font-size: 1.5rem; line-height: 1.45; }
.note__sign { font-family: var(--font-hand); font-size: 1.3125rem; color: var(--accent); }

.facts { margin: 0; display: grid; grid-template-columns: max-content 1fr; gap: 10px 20px; }
.facts dt { font-weight: 800; font-size: .8125rem; letter-spacing: .14em; text-transform: uppercase; color: var(--muted); padding-top: 3px; }
.facts dd { margin: 0; font-weight: 600; min-width: 0; }

.history { list-style: none; margin: 0; padding: 0; }
.history li { display: grid; grid-template-columns: 120px 1fr; gap: 20px; padding-block: 18px; border-top: 2px dashed var(--muted); }
.history li:first-child { border-top: 0; }
.history__year { font-family: var(--font-display); font-size: 1.25rem; color: var(--accent); }
.history__text { display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.history__text strong { font-size: 1.3125rem; }
@media (max-width: 520px) { .history li { grid-template-columns: 1fr; gap: 4px; } }

/* ---------- 12. Forms --------------------------------------------------- */
.form { display: flex; flex-direction: column; gap: 18px; }
.field { display: flex; flex-direction: column; gap: 6px; }
.field label { font-weight: 800; font-size: .8125rem; letter-spacing: .14em; text-transform: uppercase; }
.field input, .field textarea, .field select {
  font: inherit; color: var(--fg); background: var(--bg); width: 100%; min-height: 48px;
  border: 2px solid var(--line); border-radius: var(--radius-sm); padding: 12px 14px;
}
.field textarea { min-height: 140px; resize: vertical; }
/* Dropdown: drop the browser's own control (Safari ignores padding and draws a small grey box)
   so it matches the text fields. The arrow is two gradient halves in the side's text colour,
   so it follows Sides A, B and C. */
.field select {
  -webkit-appearance: none; appearance: none; cursor: pointer; padding-right: 48px;
  background-image: linear-gradient(45deg, transparent 50%, var(--fg) 50%), linear-gradient(135deg, var(--fg) 50%, transparent 50%);
  background-position: calc(100% - 25px) 50%, calc(100% - 18px) 50%;
  background-size: 7px 7px, 7px 7px;
  background-repeat: no-repeat;
}
.field select option { background: var(--card); color: var(--fg); }

/* Custom dropdown list (main.js "Dropdowns"). With JS, the native <select> is hidden (but still
   submitted) and replaced by a combobox + listbox in the site's card style. Without JS, the
   styled native select above is what shows. */
.dropdown { position: relative; }
.dropdown__button {
  display: flex; align-items: center; width: 100%; min-height: 48px; text-align: left; cursor: pointer;
  font: inherit; color: var(--fg); background: var(--bg); border: 2px solid var(--line); border-radius: var(--radius-sm);
  padding: 12px 48px 12px 14px; user-select: none; -webkit-user-select: none;
  background-image: linear-gradient(45deg, transparent 50%, var(--fg) 50%), linear-gradient(135deg, var(--fg) 50%, transparent 50%);
  background-position: calc(100% - 25px) 50%, calc(100% - 18px) 50%;
  background-size: 7px 7px, 7px 7px; background-repeat: no-repeat;
}
.dropdown__list {
  position: absolute; z-index: 30; top: calc(100% + 8px); left: 0; right: 0; margin: 0; padding: 6px; list-style: none;
  background: var(--card); color: var(--fg); border: 2px solid var(--line); border-radius: var(--radius-sm);
  box-shadow: 5px 5px 0 var(--accent2), var(--glow); max-height: min(60vh, 360px); overflow-y: auto;
}
.dropdown__list[hidden] { display: none; }
.dropdown__option {
  display: flex; align-items: center; gap: 10px; min-height: 44px; padding: 10px 12px; border-radius: 6px; cursor: pointer;
}
.dropdown__option::before { content: "▶"; font-size: .75em; color: var(--accent); visibility: hidden; }
.dropdown__option[aria-selected="true"] { font-weight: 800; }
.dropdown__option[aria-selected="true"]::before { visibility: visible; }
.dropdown__option.is-active { background: var(--fg); color: var(--bg); }
.dropdown__option.is-active::before { color: var(--bg); }
@media (forced-colors: active) {
  .dropdown__option.is-active { outline: 2px solid Highlight; }
  .dropdown__button { background-image: none; }
  .dropdown__button::after { content: "▾"; margin-left: auto; }
}
.field__hint { font-size: .9375rem; color: var(--muted); }
.form-status { font-weight: 800; color: var(--accent2-ink); min-height: 1.6em; }
.copy-row { display: flex; flex-wrap: wrap; align-items: center; gap: 12px; }
.copy-row code { font-family: ui-monospace, Menlo, monospace; font-size: 1.0625rem; font-weight: 700; user-select: all; overflow-wrap: anywhere; }
.link-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 10px; font-weight: 600; }

/* ---------- 13. Requests band ----------------------------------------- */
.request-band {
  background: var(--accent); color: var(--on-accent); border: var(--border) solid var(--line); border-radius: 18px;
  box-shadow: 10px 10px 0 var(--accent2), var(--glow); padding: 40px 34px;
  display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 24px;
}
.request-band__copy { flex: 1 1 400px; min-width: 0; display: flex; flex-direction: column; gap: 8px; }
.request-band h2 { font-family: var(--font-display); font-size: clamp(1.75rem, 3.8vw, 2.75rem); line-height: 1.02; }
.request-band .eyebrow { color: var(--on-accent); }
.request-band .btn { background: var(--bg); color: var(--fg); }

/* ---------- 14. Fan mail inserts -------------------------------------- */
.inserts { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 280px), 1fr)); gap: 28px; }
.insert {
  background: var(--card); border: var(--border) solid var(--line); border-radius: 8px; padding: 22px 24px;
  display: flex; flex-direction: column; gap: 12px; box-shadow: 6px 6px 0 var(--accent2), var(--glow);
  background-image: repeating-linear-gradient(180deg, transparent 0 30px, rgba(127, 127, 160, 0.25) 30px 32px);
}
.insert:nth-child(odd) { transform: rotate(-1.2deg); }
.insert:nth-child(even) { transform: rotate(1deg); box-shadow: 6px 6px 0 var(--accent), var(--glow); }
.insert__top { display: flex; justify-content: space-between; gap: 12px; font-weight: 800; font-size: .75rem; letter-spacing: .14em; color: var(--accent); text-transform: uppercase; }
.insert__msg { font-family: var(--font-hand); font-size: 1.3125rem; line-height: 1.4; }
.insert__from { font-size: .9375rem; color: var(--muted); }

/* ---------- 15. Hi-fi, friends' tapes, credits ------------------------ */
.gear { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 340px), 1fr)); gap: 32px; }
.gear ul { list-style: none; margin: 0; padding: 0; }
.gear li { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 4px 16px; padding-block: 10px; border-top: 2px dashed var(--muted); }
.gear li:first-child { border-top: 0; }
.gear li span:last-child { color: var(--muted); font-size: .9375rem; }

.friends { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 290px), 1fr)); gap: 20px; }
.friend { display: flex; align-items: center; gap: 16px; padding: 16px 18px; background: var(--card); border: 2px solid var(--line); border-radius: 12px; color: var(--fg); text-decoration: none; }
.friend:hover { color: var(--fg); transform: translateY(-2px); }
.friend .mark { width: 60px; height: 40px; }
.friend__text { display: flex; flex-direction: column; min-width: 0; }
.friend__text strong { font-size: 1.125rem; }
.friend__text span { font-size: .9375rem; color: var(--muted); overflow-wrap: anywhere; }
.webring { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 12px 24px; padding: 20px; border: 2px dashed var(--line); border-radius: var(--radius); font-weight: 800; }

.jcard-back {
  max-width: 880px; margin-inline: auto; background: var(--card); border: var(--border) solid var(--line); border-radius: 14px;
  box-shadow: 8px 8px 0 var(--accent), var(--glow); padding: 36px clamp(20px, 4vw, 48px); display: flex; flex-direction: column; gap: 28px;
}
.credits-block { display: flex; flex-direction: column; gap: 8px; }
.credits-block h2 { font-weight: 800; font-size: .8125rem; letter-spacing: .2em; text-transform: uppercase; color: var(--accent); border-bottom: 2px dashed var(--muted); padding-bottom: 6px; }
.credit { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 2px 16px; padding-block: 4px; }
.credit__role { font-weight: 800; }
.credit__who { color: var(--muted); }
.fine-print { font-size: .8125rem; letter-spacing: .04em; color: var(--muted); text-transform: uppercase; }

/* ---------- 16. Tape jam (404) ---------------------------------------- */
.tapejam { display: flex; flex-wrap: wrap; align-items: center; gap: 48px; padding-block: 3rem 5rem; }
.tapejam__art { flex: 1 1 420px; min-width: 0; display: flex; justify-content: center; }
.tapejam__art svg { width: 100%; max-width: 520px; }
.tapejam__copy { flex: 1 1 380px; min-width: 0; display: flex; flex-direction: column; gap: 18px; }
.tapejam__copy h1 { font-size: var(--step-5); }

/* ---------- 17. Footer -------------------------------------------------- */
.site-footer { background: var(--footer-bg); color: var(--footer-fg); }
.site-footer a { color: var(--footer-fg); }
.site-footer a:hover { color: var(--footer-accent); }
.site-footer a[aria-current="page"] { color: var(--footer-accent); }
.site-footer .wrap { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: 28px 40px; padding-block: 44px; }
.footer-sign { display: flex; flex-direction: column; gap: 4px; }
.footer-sign__title { font-family: var(--font-display); font-size: 1.25rem; }
.footer-sign__note { font-family: var(--font-hand); font-size: 1.25rem; color: var(--footer-accent); }
.footer-links { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 8px 22px; font-size: .9375rem; flex: 1 1 260px; max-width: 460px; }
.footer-links li span { font-weight: 800; color: var(--footer-accent); margin-right: 6px; }
.counter { display: flex; flex-direction: column; align-items: flex-end; gap: 6px; }
.counter__label { font-weight: 800; font-size: .6875rem; letter-spacing: .18em; text-transform: uppercase; color: var(--footer-accent); }
.counter__digits { display: flex; gap: 3px; padding: 5px; border-radius: 6px; background: #000; }
.counter__digits span { width: 28px; height: 38px; display: grid; place-items: center; border-radius: 3px; background: #F2EEFF; color: #1B1B3A; font: 800 1.375rem/1 ui-monospace, Menlo, monospace; font-variant-numeric: tabular-nums; box-shadow: inset 0 -19px 0 #DCD6F0; }
@media (max-width: 640px) { .counter { align-items: flex-start; } }

/* ---------- 18. Motion + easter eggs ---------------------------------- */
@keyframes am-spin { to { transform: rotate(360deg); } }
/* ---------- Flip takeover ---------------------------------------------
   Pressing Flip plays a 3.5s full-screen sequence (built by main.js):
   0.0s  the screen wipes shut from the Flip button
   0.3s  the cassette rises into the deck
   1.1s  ka-chunk: it ejects
   1.35s it turns over in 3D; the site swaps sides at the halfway point
   2.35s it clicks back in and the reels play
   2.8s  the screen opens again on the new side
   Click, tap or press any key to skip. Reduced motion: no takeover, the
   sides swap instantly. */
.flipover {
  --dur: 3.5s;
  position: fixed; inset: 0; z-index: 100; overflow: hidden; cursor: pointer;
  display: grid; place-items: center; align-content: center; gap: clamp(18px, 4vh, 36px);
  padding: 24px max(16px, env(safe-area-inset-left, 0px));
  background-color: var(--bg);
  background-image: radial-gradient(var(--dots) 2.5px, transparent 3px); background-size: 22px 22px;
  color: var(--fg);
  transition: background-color .45s ease, color .45s ease;
  animation: fo-iris var(--dur) cubic-bezier(.6, 0, .3, 1) both;
  -webkit-tap-highlight-color: transparent;
}
@keyframes fo-iris {
  0%   { clip-path: circle(0 at var(--fx, 90%) var(--fy, 6%)); }
  14%  { clip-path: circle(150vmax at var(--fx, 90%) var(--fy, 6%)); }
  80%  { clip-path: circle(150vmax at 50% 50%); }
  100% { clip-path: circle(0 at 50% 50%); }
}

/* Giant side letters behind the tape */
.fo-big {
  position: absolute; inset: 0; display: grid; place-items: center; pointer-events: none;
  font-family: var(--font-display); font-size: min(78vmin, 720px); line-height: 1;
  color: transparent; -webkit-text-stroke: 4px var(--accent); opacity: .32;
}
.fo-big--from { animation: fo-big-out var(--dur) ease-in both; }
.fo-big--to { animation: fo-big-in var(--dur) cubic-bezier(.34, 1.5, .64, 1) both; }
@keyframes fo-big-out { 0%, 30% { transform: scale(1); opacity: .32; } 50% { transform: scale(1.6) rotate(-8deg); opacity: 0; } 100% { opacity: 0; } }
@keyframes fo-big-in  { 0%, 52% { transform: scale(.4) rotate(8deg); opacity: 0; } 66% { transform: none; opacity: .32; } 100% { transform: none; opacity: .32; } }

/* Header line: SIDE A ▸ SIDE B */
.fo-eyebrow {
  position: relative; margin: 0; font-weight: 800; font-size: .875rem; letter-spacing: .22em; text-transform: uppercase; color: var(--accent);
  animation: fo-fade var(--dur) ease both;
}
@keyframes fo-fade { 0%, 10% { opacity: 0; transform: translateY(-10px); } 22%, 82% { opacity: 1; transform: none; } 94%, 100% { opacity: 0; } }

/* The tape: deck moves it, __turn turns it over */
.fo-stage { position: relative; perspective: 1400px; width: min(540px, 84vw); aspect-ratio: 1.6; }
.fo-deck { position: absolute; inset: 0; animation: fo-deck var(--dur) both; }
@keyframes fo-deck {
  0%, 8% { transform: translateY(75vh) rotate(-14deg); animation-timing-function: cubic-bezier(.2, .9, .3, 1.15); }
  30%    { transform: translateY(0) rotate(0); animation-timing-function: cubic-bezier(.3, 0, .2, 1); }
  35%    { transform: translateY(-38px) rotate(-2deg); }      /* eject */
  39%    { transform: translateY(-28px) rotate(0); }
  53%    { transform: translateY(-44px) scale(1.12); }
  67%    { transform: translateY(-28px) scale(1); animation-timing-function: cubic-bezier(.5, 0, .2, 1); }
  72%    { transform: translateY(10px) scale(.96); }           /* click in */
  77%    { transform: translateY(0) scale(1); opacity: 1; }
  82%    { transform: scale(1); opacity: 1; animation-timing-function: cubic-bezier(.6, 0, .8, .4); }
  96%, 100% { transform: scale(.62); opacity: 0; }
}
.fo-turn { position: absolute; inset: 0; transform-style: preserve-3d; animation: fo-turn var(--dur) both; }
@keyframes fo-turn {
  0%, 39% { transform: rotateY(0) rotateZ(0); animation-timing-function: cubic-bezier(.6, 0, .4, 1); }
  53%     { transform: rotateY(90deg) rotateZ(-7deg); animation-timing-function: cubic-bezier(.6, 0, .4, 1); }
  67%, 100% { transform: rotateY(180deg) rotateZ(0); }
}

/* One cassette face per side, coloured as that side whatever the page is showing */
.fo-face {
  position: absolute; inset: 0; backface-visibility: hidden; -webkit-backface-visibility: hidden;
  background: var(--s-shell); border-radius: 26px; padding: 6% 7%;
  box-shadow: 12px 12px 0 var(--s-drop), var(--s-glow);
  display: flex; flex-direction: column; gap: 6%;
}
.fo-face--back { transform: rotateY(180deg); }
.fo-face::before, .fo-face::after { content: ""; position: absolute; bottom: 5%; width: 5%; aspect-ratio: 1; border-radius: 50%; background: #000; opacity: .3; }
.fo-face::before { left: 30%; } .fo-face::after { right: 30%; }
.fo-face[data-side="A"] { --s-shell: #1B1B3A; --s-label: #FFD23F; --s-ink: #1B1B3A; --s-drop: #19C3C3; --s-glow: 0 0 0 transparent; }
.fo-face[data-side="C"] { --s-shell: #23272E; --s-label: #C9D0DB; --s-ink: #14171D; --s-drop: #0047C2; --s-glow: 0 0 0 transparent; }
.fo-face[data-side="C"] .fo-label { background-image: linear-gradient(115deg, #E9EDF2 0%, #AEB7C4 35%, #F4F6F9 50%, #9EA8B6 70%, #DDE2E9 100%); }
.fo-face[data-side="B"] { --s-shell: #2A1F55; --s-label: #FF3EA5; --s-ink: #0D0A24; --s-drop: #2BE4FF; --s-glow: 0 0 46px rgba(255, 62, 165, .65); }
.fo-label {
  flex: 1.2; border-radius: 10px; padding: 4% 5%; display: flex; flex-direction: column; justify-content: space-between;
  background-color: var(--s-label); color: var(--s-ink);
  background-image: repeating-linear-gradient(180deg, transparent 0 20px, rgba(13, 10, 36, .22) 20px 22px);
}
.fo-label__top { display: flex; justify-content: space-between; align-items: flex-start; gap: 10px; }
.fo-label__title { font-family: var(--font-hand); font-size: clamp(1.25rem, 4.6vw, 2.25rem); line-height: 1; }
.fo-label__side { font-family: var(--font-display); font-size: clamp(1.75rem, 6vw, 3rem); line-height: 1; }
.fo-label__sub { font-family: var(--font-hand); font-size: clamp(.8125rem, 2.4vw, 1.125rem); }
.fo-window { flex: 1; display: flex; align-items: center; justify-content: space-between; gap: 6%; background: rgba(0, 0, 0, .3); border-radius: 999px; padding: 0 6%; }
.fo-window i { flex: 1; height: 34%; border-radius: 8px; background: #6B4A35; opacity: .85; }
.fo-reel { width: 22%; height: auto; animation: fo-reels var(--dur) linear both; }
@keyframes fo-reels { 0% { transform: rotate(0); } 67% { transform: rotate(540deg); } 100% { transform: rotate(2160deg); } }

/* Caption under the tape (text set by main.js as the sequence runs) */
.fo-caption {
  position: relative; margin: 0; min-height: 1.3em; text-align: center;
  font-family: var(--font-hand); font-size: clamp(1.375rem, 4vw, 2.125rem); line-height: 1.2; color: var(--accent); text-shadow: var(--glow-text);
  animation: fo-fade var(--dur) ease both;
}
.fo-skip {
  position: absolute; left: 0; right: 0; bottom: max(18px, env(safe-area-inset-bottom, 0px)); margin: 0; text-align: center;
  font-weight: 800; font-size: .75rem; letter-spacing: .18em; text-transform: uppercase; color: var(--muted);
  animation: fo-fade var(--dur) ease both;
}

/* VHS tracking: scanlines all the way through, a rolling band during the turn */
.flipover::after {
  content: ""; position: absolute; inset: 0; pointer-events: none; opacity: .5;
  background: repeating-linear-gradient(0deg, rgba(0, 0, 0, .07) 0 2px, transparent 2px 5px);
}
.fo-band {
  position: absolute; left: 0; right: 0; top: 0; height: 18vh; pointer-events: none; opacity: 0;
  background: linear-gradient(180deg, transparent, rgba(255, 255, 255, .28) 40%, rgba(43, 228, 255, .22) 55%, transparent);
  mix-blend-mode: overlay; animation: fo-band var(--dur) linear both;
}
@keyframes fo-band { 0%, 38% { transform: translateY(-20vh); opacity: 0; } 42% { opacity: 1; } 64% { opacity: 1; } 68%, 100% { transform: translateY(105vh); opacity: 0; } }

/* The page underneath gives a little jolt as the tape clicks in */
@keyframes fo-jolt { 0%, 100% { transform: none; } 30% { transform: translateY(3px); } 60% { transform: translateY(-1px); } }
html.fo-landed main { animation: fo-jolt .35s ease-out; }
html.tracking body::after {
  content: ""; position: fixed; inset: 0; z-index: 90; pointer-events: none;
  background: repeating-linear-gradient(0deg, rgba(0,0,0,.14) 0 2px, transparent 2px 5px), linear-gradient(180deg, transparent 40%, rgba(255,255,255,.18) 46%, transparent 52%);
}
/* ---------- 19. Scroll motion: "the tape is playing" -------------------
   House rules
   1. Objects move, words don't. Cards, sleeves, notes, reels, numbers and
      tape can move. Running text (.prose, .lede, forms, the legal table)
      never animates on its own.
   2. Anything on screen when the page loads is already in place. Only
      things scrolled into view arrive, so nothing makes a reader wait.
   3. Arrivals happen once, finish in about half a second, travel 28px or
      less, and never replay when you scroll back up.
   4. Scroll-linked effects only touch decoration (patterns, dots, the
      hero cassette, the reels).
   5. "Reduce motion" turns all of it off. The .motion class is only set
      when the visitor hasn't asked for less motion and the browser can
      watch the scroll; without it, every element simply shows.
   Vocabulary
   Load    the hero cassette slides into the deck on the home page
   Eject   it lifts and tilts away as you scroll past
   FF      the reels spin faster while you scroll
   Drop    cards, sleeves and bands land like J-cards on a table
   Toss    handwritten notes and fan mail land with a little spin
   Cue     list rows (tracklist, history, posts, credits) run in one by one
   Label   section titles slide in from the left; year rules draw across
   Drift   tiled album-art patterns and dot grids move slower than the page
   Roll    the footer tape counter winds up to its number
   Run     a thin strip of tape tracks reading progress on long pages */
:root { --ease-out: cubic-bezier(.2, .8, .2, 1); --ease-drop: cubic-bezier(.34, 1.4, .64, 1); }

/* Load */
@keyframes am-load {
  0%   { opacity: 0; translate: 80px 0; rotate: 7deg; }
  65%  { opacity: 1; translate: -8px 0; rotate: -1deg; }
  82%  { translate: 2px 0; rotate: 0deg; }
  100% { translate: 0 0; rotate: 0deg; }
}
.motion .hero__tape { animation: am-load .9s var(--ease-out) .1s both; }

/* Drop, Toss, Cue, Label (JS adds .rv to things below the fold, then .is-in on arrival) */
.motion .rv {
  opacity: 0; translate: 0 28px;
  transition: opacity .45s var(--ease-out), translate .6s var(--ease-drop), rotate .6s var(--ease-drop);
  transition-delay: var(--rv-delay, 0ms);
}
.motion .rv--toss { translate: 0 36px; rotate: var(--rv-rot, 5deg); }
.motion .rv--cue { translate: -16px 0; transition-duration: .35s, .4s, .4s; transition-timing-function: var(--ease-out); }
.motion .rv--label { translate: -24px 0; transition-timing-function: var(--ease-out); }
.motion .rv.is-in { opacity: 1; translate: none; rotate: none; }
.motion .year-group__label.rv::after { transform: scaleX(0); transform-origin: left center; transition: transform .8s var(--ease-out) calc(var(--rv-delay, 0ms) + .15s); }
.motion .year-group__label.rv.is-in::after { transform: none; }

/* Run */
/* Sits along the bottom edge of the pinned header (--header-h is kept current by main.js). */
.tape-run { position: fixed; left: 0; right: 0; top: calc(var(--header-h, 0px) - 5px); z-index: 70; height: 5px; pointer-events: none; }
.tape-run span {
  display: block; height: 100%; transform-origin: left center; transform: scaleX(var(--run, 0));
  background: linear-gradient(90deg, var(--accent2), var(--accent)); box-shadow: var(--glow);
}

/* Eject + Drift: scroll-linked, only where the browser can tie animation to scroll */
@supports (animation-timeline: view()) {
  @keyframes am-eject { to { translate: 0 -70px; rotate: -9deg; } }
  .motion .cassette { animation: am-eject linear both; animation-timeline: view(); animation-range: exit 5% exit 95%; }

  @keyframes am-drift { from { background-position: 0 -28px; } to { background-position: 0 28px; } }
  .motion :is(.art-dots, .art-zig, .art-checks, .art-grid, .art-waves, .art-tri) { animation: am-drift linear both; animation-timeline: view(); }

  @keyframes am-float { to { translate: 0 70px; } }
  .motion .page-head::after { animation: am-float linear both; animation-timeline: view(); animation-range: exit; }
}

@media print { .rv { opacity: 1 !important; translate: none !important; rotate: none !important; } .tape-run { display: none; } }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition: none !important; }
}

/* ==========================================================================
   Additions (30 Oct 2026)
   ========================================================================== */

/* Album-art sleeves */
.sleeve { position: relative; display: grid; place-items: center; overflow: hidden; }
.sleeve__num {
  font-family: var(--font-display); font-size: clamp(2.5rem, 6vw, 4rem); line-height: 1; color: var(--card);
  text-shadow: 3px 3px 0 var(--line); -webkit-text-stroke: 2px var(--line); paint-order: stroke fill;
}
.sleeve__tag { position: absolute; left: 12px; bottom: 10px; background: var(--card); color: var(--fg); font-weight: 800; font-size: .6875rem; letter-spacing: .14em; padding: 3px 8px; border-radius: 3px; text-transform: uppercase; }
.sleeve--big { aspect-ratio: 1; border: var(--border) solid var(--line); border-radius: 16px; box-shadow: 10px 10px 0 var(--accent2), var(--glow); }
.sleeve--big .sleeve__num { font-size: clamp(4rem, 14vw, 8rem); }
.sleeve--big .sleeve__tag { font-size: .8125rem; left: 16px; bottom: 16px; }

.art-sun { background-color: var(--accent3); background-image: repeating-conic-gradient(from 0deg at 50% 110%, var(--accent) 0 6deg, transparent 6deg 12deg); }
.art-grid { background-color: var(--purple); background-image: linear-gradient(var(--pattern-ink) 3px, transparent 3px), linear-gradient(90deg, var(--pattern-ink) 3px, transparent 3px); background-size: 26px 26px; }
.art-waves { background-color: var(--accent2); background-image: radial-gradient(circle at 50% 0, transparent 12px, var(--pattern-ink) 13px 16px, transparent 17px); background-size: 34px 22px; }
.art-tri { background-color: var(--pink); background-image: linear-gradient(60deg, var(--pattern-ink) 25%, transparent 25.5%), linear-gradient(-60deg, var(--pattern-ink) 25%, transparent 25.5%); background-size: 40px 70px; }
.art-planet { background-color: var(--accent2); background-image: radial-gradient(circle at 50% 55%, var(--accent3) 0 30%, transparent 30.5%), repeating-radial-gradient(circle at 50% 55%, var(--pattern-ink) 0 3px, transparent 3px 18px); }

/* Unreleased (coming soon) list */
.unreleased { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 240px), 1fr)); gap: 12px; }
.unreleased li { border: 2px dashed var(--muted); border-radius: 10px; padding: 14px 16px; display: flex; flex-direction: column; gap: 2px; }
.unreleased b { font-weight: 800; }
.unreleased span { color: var(--muted); font-size: .9375rem; }
.unreleased em { font-style: normal; font-weight: 800; font-size: .6875rem; letter-spacing: .16em; color: var(--accent); text-transform: uppercase; }

/* Credits extras */
.credit__track { display: block; font-family: var(--font-hand); font-weight: 400; font-size: 1rem; color: var(--accent); }
.btn[aria-disabled="true"] { opacity: .55; cursor: not-allowed; box-shadow: none; }

/* Hi-fi rack */
.rack { list-style: none; margin: 0; padding: 0; }
.rack li { display: grid; grid-template-columns: minmax(130px, 34%) 1fr; gap: 4px 16px; padding-block: 12px; border-top: 2px dashed var(--muted); }
.rack li:first-child { border-top: 0; }
.rack b { font-weight: 800; color: var(--accent); }
@media (max-width: 520px) { .rack li { grid-template-columns: 1fr; } }

/* Counter note */
.counter__note { font-family: var(--font-hand); font-size: .9375rem; color: var(--footer-accent); }
/* Sleeves inside hit cards: undo the generic .hit__art span label style */
.hit__art .sleeve__num { background: none; padding: 0; color: var(--card); font-size: clamp(2.5rem, 6vw, 4rem); letter-spacing: 0; font-weight: 400; }
.hit__art .sleeve__tag { background: var(--card); color: var(--fg); padding: 3px 8px; font-size: .6875rem; }

/* The small print: data table */
.legal-table { overflow-x: auto; border: var(--border) solid var(--line); border-radius: var(--radius-sm); background: var(--card); }
.legal-table table { width: 100%; min-width: 640px; border-collapse: collapse; font-size: 1rem; line-height: 1.5; }
.legal-table th { text-align: left; font-weight: 800; font-size: .75rem; letter-spacing: .14em; text-transform: uppercase; color: var(--accent); padding: 14px 16px; border-bottom: var(--border) solid var(--line); }
.legal-table td { vertical-align: top; padding: 14px 16px; border-top: 2px dashed var(--muted); }
.legal-table tr:first-child td { border-top: 0; }
.site-footer .counter { margin-left: auto; }

/* ==========================================================================
   Easter eggs (3 Nov 2026). Everything here is optional fun: the site works
   and reads the same without any of it.
   ========================================================================== */

/* Pencil rewind: grab a reel on the home cassette and wind it */
.cassette .reel, [data-jam] { touch-action: none; cursor: var(--pencil), grab; }
html.winding, html.winding * { cursor: grabbing; user-select: none; -webkit-user-select: none; }

/* Counter rollover note */
.counter { position: relative; }
.counter__toast {
  position: absolute; right: 0; bottom: calc(100% + 10px); width: max-content; max-width: 240px;
  background: var(--footer-accent); color: #1B1B3A; font-weight: 800; font-size: .875rem; line-height: 1.3;
  padding: 8px 12px; border-radius: 10px; box-shadow: 4px 4px 0 #000;
  animation: egg-toast 4s ease both;
}
@keyframes egg-toast { 0% { opacity: 0; transform: translateY(8px) scale(.9); } 8%, 85% { opacity: 1; transform: none; } 100% { opacity: 0; transform: translateY(-6px); } }
@media (max-width: 640px) { .counter__toast { right: auto; left: 0; } }

/* Audit stamp (end of track 01) */
.stamp-row { display: flex; justify-content: flex-end; max-width: 68ch; margin-top: 2rem; }
.audit-stamp {
  display: inline-flex; flex-direction: column; align-items: center; gap: 4px; margin: 0;
  padding: 14px 26px 12px; border: 6px double var(--accent); border-radius: 12px; color: var(--accent);
  transform: rotate(-9deg); opacity: .9; text-transform: uppercase;
  -webkit-mask-image: repeating-radial-gradient(circle at 30% 40%, #000 0 3px, rgba(0,0,0,.82) 3px 4px);
          mask-image: repeating-radial-gradient(circle at 30% 40%, #000 0 3px, rgba(0,0,0,.82) 3px 4px);
}
.audit-stamp__big { font-family: var(--font-display); font-size: clamp(2.25rem, 7vw, 3.5rem); line-height: 1; letter-spacing: .04em; }
.audit-stamp__small { font-weight: 800; font-size: .8125rem; letter-spacing: .2em; }
.motion .audit-stamp:not(.is-stamped) { opacity: 0; }
.audit-stamp.is-stamped { animation: egg-stamp .55s cubic-bezier(.2, .7, .3, 1.2) both; }
@keyframes egg-stamp {
  0%   { opacity: 0; transform: rotate(-20deg) scale(2.8); }
  60%  { opacity: .95; transform: rotate(-8deg) scale(.92); }
  100% { opacity: .9; transform: rotate(-9deg) scale(1); }
}
html.stamped main { animation: fo-jolt .3s ease-out; }

/* The remote (press ?) */
.remote {
  width: min(360px, calc(100vw - 32px)); padding: 0; border: 0; border-radius: 28px 28px 40px 40px;
  background: #1B1B3A; color: #F2EEFF; box-shadow: 10px 10px 0 var(--accent), 0 30px 80px rgba(0, 0, 0, .45);
}
.remote::backdrop { background: rgba(13, 10, 36, .55); }
.remote__inner { padding: 24px 24px 22px; display: flex; flex-direction: column; gap: 16px; }
.remote__top { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.remote__brand { font-family: var(--font-display); font-size: 1rem; letter-spacing: .06em; }
.remote__led { width: 10px; height: 10px; border-radius: 50%; background: #FF3EA5; box-shadow: 0 0 10px #FF3EA5; }
.remote__keys { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; }
.remote__keys li { display: grid; grid-template-columns: 88px 1fr; align-items: center; gap: 12px; font-size: .9375rem; }
.remote kbd {
  display: inline-flex; justify-content: center; align-items: center; min-width: 40px; height: 34px; padding: 0 10px;
  border-radius: 10px; background: #34345C; color: #FFD23F; font: 800 .9375rem/1 var(--font-body);
  box-shadow: inset 0 -4px 0 rgba(0, 0, 0, .4);
}
.remote__foot { margin: 0; font-family: var(--font-hand); color: #FFD23F; font-size: 1.0625rem; text-align: center; }
.remote__close { align-self: center; min-height: 44px; padding: 0 22px; border: 0; border-radius: 999px; background: #FF3EA5; color: #0D0A24; font: 800 .9375rem/1 var(--font-body); cursor: pointer; }

/* Hidden track 00 (end of Credits, after the silence) */
.hidden-track { padding-bottom: 4.5rem; display: flex; flex-direction: column; align-items: center; }
.silence {
  height: 70vh; min-height: 360px; display: flex; flex-direction: column; justify-content: space-between; align-items: center;
  color: var(--muted); opacity: .55; font-weight: 800; font-size: .75rem; letter-spacing: .2em; font-variant-numeric: tabular-nums; padding-block: 2rem;
}
.hidden-track__card {
  max-width: 560px; display: flex; flex-direction: column; gap: 12px; text-align: center; align-items: center;
  border: 3px dashed var(--line); border-radius: 18px; padding: 32px clamp(20px, 4vw, 40px);
}
.hidden-track__card h2 { font-size: var(--step-3); }
.hidden-track__card h2 span { display: block; font-size: .5em; margin-top: .3em; }
.hidden-track__card .marker { color: var(--accent); font-size: 1.375rem; }

/* 404: wind the tape back in */
.jam-hint { font-size: 1.1875rem; color: var(--accent); }
.linkish { padding: 0; border: 0; background: none; color: inherit; font: inherit; text-decoration: underline; text-underline-offset: .2em; cursor: pointer; }
[data-jam] [data-jam-tape] { stroke-dasharray: 100 100; stroke-dashoffset: 0; }

/* Print-only J-card (Credits) */
.jcard-print { display: none; }

@media print {
  @page { margin: 14mm; }
  :root, :root:not([data-theme="light"]), :root[data-theme="dark"], :root[data-theme="c"] {
    --bg: #FFFFFF; --card: #FFFFFF; --fg: #111111; --muted: #444444; --line: #111111;
    --accent: #B0005A; --accent2: #19C3C3; --accent3: #FFD23F; --link: #111111;
    --glow: 0 0 0 transparent; --glow-text: none; --show-a: inline; --show-b: none; --show-c: none;
    color-scheme: light;
  }
  body { background: #fff; color: #111; font-size: 11pt; padding: 0 !important; }
  *, *::before, *::after { box-shadow: none !important; text-shadow: none !important; animation: none !important; transition: none !important; }
  .skip-link, .nav, .flip, .deck, .tape-run, .counter, .footer-links, .btn, .btn-row, .hidden-track, .page-head::after, .remote, .flipover, form { display: none !important; }
  html.tracking body::after { display: none !important; }
  .site-header { position: static; box-shadow: none; }
  .site-header .wrap, .site-footer .wrap { padding-block: 0 8mm; }
  .site-footer { background: none; color: #111; border-top: 1px solid #111; }
  .site-footer .wrap { padding-block: 6mm 0; }
  .site-footer a, .site-footer .footer-sign__note { color: #111; }
  .card, .tracklist, .hit, .note, .insert, .lead-single, .request-band, .credit, .credits-block h2 { break-inside: avoid; border-width: 1.5px; }
  .credits-block h2 { break-after: avoid; }
  .jcard-back { border-width: 1.5px; padding: 6mm; }
  body:has(.jcard-print) .site-footer { display: none; }
  .section { padding-block: 0 8mm; }
  .prose a[href^="http"]::after { content: " (" attr(href) ")"; font-size: .85em; color: #444; }
  .note, .insert, .photo, .cassette { transform: none !important; }

  /* The J-card: real cassette size, 4in (101.6mm) wide */
  .jcard-print { display: block; break-after: page; -webkit-print-color-adjust: exact; print-color-adjust: exact; color: #1B1B3A; }
  .jcard-print__howto { font: 600 9pt/1.4 var(--font-body); margin: 0 0 4mm; }
  .jcard-print__card { width: 101.6mm; border: .3mm solid #1B1B3A; }
  .jp-panel { position: relative; overflow: hidden; border-top: .35mm dashed #1B1B3A; }
  .jp-panel:first-child { border-top: 0; }
  .jp-foldout { height: 65mm; padding: 5mm 6mm; background: #FFFDF7; }
  .jp-kicker { margin: 0 0 2mm; font: 800 7pt/1 var(--font-body); letter-spacing: .2em; text-transform: uppercase; color: #D4006A; }
  .jp-foldout ol { list-style: none; margin: 0; padding: 0; font: 600 8pt/1.55 var(--font-body); }
  .jp-foldout b { font-family: var(--font-display); font-weight: 400; color: #D4006A; margin-right: 1.5mm; }
  .jp-foldout i { font-style: normal; color: #4D4D6B; font-size: 7pt; }
  .jp-small { margin: 2mm 0 0; font: 400 7pt/1.3 var(--font-hand); color: #D4006A; }
  .jp-front { height: 65mm; background: #1B1B3A; padding: 6mm; }
  .jp-label {
    height: 100%; border-radius: 3mm; padding: 4mm 5mm; display: grid; grid-template-columns: 1fr auto; grid-template-rows: auto 1fr auto; gap: 1mm 3mm;
    background-color: #FFD23F; background-image: repeating-linear-gradient(180deg, transparent 0 5.2mm, rgba(13, 10, 36, .2) 5.2mm 5.6mm);
  }
  .jp-title { font: 400 16pt/1 var(--font-hand); }
  .jp-side { font: 400 22pt/1 var(--font-display); }
  .jp-name { grid-column: 1 / -1; align-self: center; font: 400 15pt/1.05 var(--font-display); }
  .jp-sub { grid-column: 1 / -1; font: 400 8pt/1 var(--font-hand); }
  .jp-spine { height: 12.7mm; background: #D4006A; color: #FFFFFF; display: flex; align-items: center; justify-content: space-between; padding: 0 5mm; font: 400 7.5pt/1 var(--font-display); letter-spacing: .04em; }
  .jp-flap { height: 15mm; background: #19C3C3; display: flex; align-items: center; justify-content: space-around; gap: 2mm; padding: 0 4mm; font: 700 6.5pt/1.2 var(--font-body); color: #1B1B3A; text-align: center; }
}

/* Form honeypot: off-screen for people and assistive tech, still in the DOM for bots. */
.hp { position: absolute !important; left: -10000px; top: auto; width: 1px; height: 1px; overflow: hidden; }