/* Songs from memory (/songs, /songs/<slug>), 25 October 2026. The theme is a mixtape: each song is a cassette drawn in CSS, its
   label carrying the title, standing in a rack on hairline shelves; the reels turn on hover and focus (not under reduced motion).
   The shell stays charcoal and the label stays paper in every theme, so the object reads the same on light, dark and party;
   only the accent stripe and the ink follow the theme. Loaded only by these pages, before site.css. */
:root {
  --tape-shell: #2b2d31;
  --tape-shell-edge: #3a3d42;
  --tape-paper: #f4f1ea;
  --tape-ink: #2b2d31;
  --tape-ink-soft: #5c5a55;
  --tape-window: #26282c;
  --tape-pack: #4a403a;
  --tape-hub: #e9e4d8;
  --tape-stripe: var(--accent);
  --tape-tag: #e59a76;   /* the dark-theme terracotta: 6.0:1 on the light shell, 4.8:1 on the lifted shell (the theme accent failed at 2.4:1) */
}
html:not([data-theme="light"]) { --tape-shell: #3a3d42; --tape-shell-edge: #4d5058; --tape-window: #2b2d31; --tape-pack: #574a43; }   /* off a charcoal page the shell sits one step lighter */

/* ---------- the rack ---------- */
.page-songs { padding-top: 40px; }
.songs { margin: 0 0 72px; }
.tape-rack { list-style: none; margin: 8px 0 0; padding: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 34px 28px; }
.tape-slot { position: relative; padding: 0 0 18px; display: grid; }   /* the row's cassettes share the tallest label's height */
.tape-slot::after { content: ""; position: absolute; left: -8px; right: -8px; bottom: 0; height: 1px; background: var(--border); }   /* the shelf */
.tape { display: block; height: 100%; text-decoration: none; color: var(--tape-ink); border-radius: 14px; outline-offset: 6px;
  transition: transform var(--t-med) var(--ease-ui); }
.tape:focus-visible { outline: 2px solid var(--accent); }
.tape-shell { display: grid; grid-template-rows: auto auto 1fr; gap: 10px; min-height: 220px; height: 100%; box-sizing: border-box; padding: 7% 6% 5%; border-radius: 14px;
  background: var(--tape-shell); border: 1px solid var(--tape-shell-edge); box-shadow: var(--card-shadow); position: relative; overflow: hidden; }
/* the four screws */
.tape-shell::before { content: ""; position: absolute; inset: 0; pointer-events: none;
  background: radial-gradient(circle at 3.5% 6%, var(--tape-shell-edge) 0 2px, transparent 3px), radial-gradient(circle at 96.5% 6%, var(--tape-shell-edge) 0 2px, transparent 3px),
              radial-gradient(circle at 3.5% 94%, var(--tape-shell-edge) 0 2px, transparent 3px), radial-gradient(circle at 96.5% 94%, var(--tape-shell-edge) 0 2px, transparent 3px); }
.tape-label { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 12px; align-items: center; padding: 9px 12px 9px 9px; border-radius: 6px 6px 3px 3px;
  background: var(--tape-paper); color: var(--tape-ink); border-top: 5px solid var(--tape-stripe); min-height: 0; }
/* the photo is a square sticker from the recording, stuck on the label (Dylan, 25 Oct 2026: he read the rack as thumbnails that had not loaded) */
.tape-photo { display: block; width: 84px; height: 84px; object-fit: cover; object-position: 50% 30%; border-radius: 5px; border: 1px solid rgba(43, 45, 49, 0.18); background: var(--tape-pack); }
.tape-text { display: grid; gap: 2px; min-width: 0; }
.tape-side { font-family: var(--display); font-size: 10.5px; font-weight: 700; letter-spacing: 0.18em; text-transform: uppercase; color: var(--tape-ink-soft); }
.tape-title { font-family: var(--serif); font-style: italic; font-size: clamp(18px, 1.5vw, 22px); line-height: 1.15; color: var(--tape-ink); overflow-wrap: anywhere; }
.tape-by { font-family: var(--display); font-size: 12.5px; color: var(--tape-ink-soft); }
/* the window: two reels, the tape pack on each, the run of tape between */
.tape-window { display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: 0 10px; margin: 0 10%; padding: 6px 14px; border-radius: 8px;
  background: var(--tape-window); border: 1px solid var(--tape-shell-edge); min-height: 44px; }
.tape-reel { display: block; width: 34px; height: 34px; }
.reel { display: block; width: 100%; height: 100%; transform-origin: 50% 50%; }
.reel-hub { fill: var(--tape-hub); }
.reel-teeth { stroke: var(--tape-shell); stroke-width: 3; stroke-linecap: round; fill: none; }
.reel-axle { fill: var(--tape-shell); }
.tape-run { height: 4px; border-radius: 2px; background: var(--tape-pack); margin: 0 4px; }
.tape-foot { display: flex; justify-content: space-between; align-items: center; align-self: end; padding: 0 2px; font-family: var(--display); font-size: 11px; font-weight: 700;
  letter-spacing: 0.14em; text-transform: uppercase; color: var(--tape-hub); }
.tape-tag { color: var(--tape-tag); }
@keyframes reel-spin { to { transform: rotate(360deg); } }
@media (hover: hover) and (pointer: fine) {
  .tape:hover { transform: translateY(-3px); }
  .tape:hover .reel, .tape:focus-visible .reel { animation: reel-spin 1.6s linear infinite; }
}
.tape:focus-visible .reel { animation: reel-spin 1.6s linear infinite; }
.songs-note { max-width: 720px; margin: 28px 0 0; font-size: 15.5px; line-height: 1.7; color: var(--text-muted); }
.songs-note a { color: var(--accent-ink); text-decoration: underline; text-underline-offset: 3px; }
@media (max-width: 980px) { .tape-rack { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 640px) { .tape-rack { grid-template-columns: 1fr; gap: 26px; } .tape-title { font-size: 22px; } .tape-photo { width: 96px; height: 96px; } }
@media (prefers-reduced-motion: reduce) { .tape, .reel { transition: none; animation: none !important; } .tape:hover { transform: none; } }

/* ---------- one song ---------- */
.song-crumbs { display: flex; align-items: center; gap: 6px; font-size: 13px; color: var(--text-muted); margin: 0 0 14px; }
.song-crumbs a { color: var(--text-muted); text-decoration: underline; text-underline-offset: 3px; }
.song-crumbs a:hover { color: var(--accent-ink); }
.song-crumbs svg { width: 14px; height: 14px; }
.page-song { padding-top: 40px; }
.song { margin: 0 0 72px; }
.song-video { margin: 8px 0 22px; max-width: 960px; }
.song-video video { width: 100%; height: auto; aspect-ratio: 16 / 9; display: block; background: var(--charcoal); border: 1px solid var(--border);
  border-radius: 10px; box-shadow: var(--card-shadow); }
.song-video figcaption { font-size: 13.5px; color: var(--text-muted); margin-top: 10px; max-width: 68ch; }
.song-video a { color: var(--accent-ink); text-decoration: underline; text-underline-offset: 3px; }
.song > p { max-width: 720px; font-size: 16px; line-height: 1.7; color: var(--text-body); margin: 0 0 14px; }
.song-nav { display: flex; flex-wrap: wrap; gap: 12px 28px; align-items: flex-end; margin: 30px 0 0; padding-top: 18px; border-top: 1px solid var(--border-soft); }
.song-nav a { color: var(--text-primary); text-decoration: none; font-family: var(--display); font-weight: 700; font-size: 15px; display: grid; gap: 2px; }
.song-nav a:hover { color: var(--accent-ink); }
.song-nav .song-rack { margin: 0 auto; font-weight: 600; color: var(--accent-ink); }
.song-nav .song-next { text-align: right; margin-left: auto; }
.song-nav-k { font-size: 10.5px; font-weight: 700; letter-spacing: 0.18em; text-transform: uppercase; color: var(--text-muted); }
@media (max-width: 640px) { .song-nav { gap: 14px; } .song-nav .song-next, .song-nav .song-prev { width: 100%; text-align: left; } .song-nav .song-rack { margin: 0; } }

/* party keeps the object; only the stripe follows the theme token already */