/* Graffiti Grimoire v2 mockup
   Black desktop, Windows 98 style windows, VHS/CRT layer, gothic type.
   Album covers are never filtered: they sit above the .crt layer (z-index 31 vs 30),
   so no ancestor of a cover may create a stacking context (no transform, filter,
   opacity < 1, z-index, or isolation on windows or sections). */

@font-face {
  font-family: "Grenze Gotisch";
  src: url("assets/fonts/grenze-gotisch-latin.woff2") format("woff2");
  font-weight: 100 900;
  font-display: swap;
}
@font-face {
  font-family: "VT323";
  src: url("assets/fonts/vt323-latin.woff2") format("woff2");
  font-weight: 400;
  font-display: swap;
}

:root {
  --black: #000;
  --face: #16141A;        /* window face (solid: taskbar, player, menus) */
  --glass: rgb(22 20 26 / 0.8);  /* content windows: smoked glass, so the falling stars show through */
  --face-2: #221F27;      /* buttons, raised */
  --well: #0A090C;        /* inset fields and lists */
  --hi: #6E6778;          /* bevel light edge */
  --hi-2: #3B3642;
  --lo: #000;             /* bevel dark edge */
  --lo-2: #060508;
  --title-a: #2C0509;     /* active title bar: oxblood */
  --title-b: #8E1B24;
  --select: #8E1B24;
  --bone: #EDE7E3;
  --muted: #C4BDC8;       /* light enough to keep 4.5:1 even with a star passing behind glass */
  --candle: #E8B86A;
  --red: #FF5757;
  --accent: var(--candle);

  --gothic: "Grenze Gotisch", "UnifrakturMaguntia", Georgia, serif;
  --pixel: "VT323", "Lucida Console", "Courier New", monospace;
  --body: system-ui, -apple-system, "Segoe UI", Tahoma, Roboto, Arial, sans-serif;

  --split: 1px;           /* RGB split distance, driven by scroll speed in fx.js */
  --rgb-r: rgb(255 30 60 / 0.75);
  --rgb-c: rgb(0 225 255 / 0.7);

  --bar-h: 48px;
  --gutter: clamp(16px, 4vw, 28px);
  color-scheme: dark;
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; }

body {
  margin: 0;
  min-height: 100vh;
  background: var(--black);
  color: var(--bone);
  font: 400 1rem/1.6 var(--body);
  padding-bottom: calc(var(--bar-h) + env(safe-area-inset-bottom) + 12px);
  overflow-x: hidden;
}

img { display: block; max-width: 100%; height: auto; }
a { color: inherit; }
h1, h2, h3 { margin: 0; }
p { margin: 0 0 1em; }

.vh {
  position: absolute !important;
  width: 1px; height: 1px;
  margin: -1px; padding: 0; border: 0;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap;
}

/* Focus: Windows 98 dotted focus, thick enough to see on black */
:focus-visible {
  outline: 2px dotted var(--bone);
  outline-offset: 2px;
}

.skip {
  position: fixed;
  left: 8px; top: -100px;
  z-index: 60;
  padding: 10px 14px;
  background: var(--bone);
  color: var(--black);
  font: 22px/1 var(--pixel);
  text-decoration: none;
}
.skip:focus { top: 8px; }

/* ---------- RGB split ---------- */

.rgb,
.win-name,
.menubar a,
.btn98,
.section-title {
  text-shadow:
    calc(var(--split) * -1) 0 0 var(--rgb-r),
    var(--split) 0 0 var(--rgb-c);
}
.rgb-img,
.ico {
  filter:
    drop-shadow(calc(var(--split) * -1) 0 0 var(--rgb-r))
    drop-shadow(var(--split) 0 0 var(--rgb-c));
}

/* ---------- Background: candle glow and particles ---------- */

.glow {
  position: fixed;
  inset: 0;
  z-index: -2;
  background:
    radial-gradient(ellipse 70% 45% at 50% -8%, rgb(232 150 80 / 0.22), transparent 70%),
    radial-gradient(ellipse 40% 30% at 50% 0%, rgb(255 200 140 / 0.12), transparent 70%);
  pointer-events: none;
}
@media (prefers-reduced-motion: no-preference) {
  .glow { animation: candle 5s ease-in-out infinite alternate; }
}
@keyframes candle {
  0% { opacity: 1; }
  30% { opacity: 0.86; }
  55% { opacity: 0.97; }
  80% { opacity: 0.82; }
  100% { opacity: 0.95; }
}

.particles {
  position: fixed;
  inset: 0;
  width: 100%;
  height: 100%;
  z-index: -1;
  pointer-events: none;
}

/* ---------- Header: logo and menu bar ---------- */

.top {
  position: relative;
  max-width: 1180px;
  margin: 0 auto;
  padding: max(18px, env(safe-area-inset-top)) var(--gutter) 10px;
  text-align: center;
}
.logo { display: inline-block; width: min(78vw, 460px); }
.logo a { display: block; }
.logo img { width: 100%; }

.menubar {
  margin-top: 14px;
  background: var(--glass);
  border: 2px solid;
  border-color: var(--hi) var(--lo) var(--lo) var(--hi);
  overflow-x: auto;
  scrollbar-width: none;
}
.menubar::-webkit-scrollbar { display: none; }
.menubar ul {
  display: flex;
  justify-content: center;
  gap: 2px;
  min-width: max-content;
  margin: 0 auto;
  padding: 3px;
  list-style: none;
}
.menubar a {
  display: block;
  padding: 4px 12px;
  border: 1px solid transparent;
  font: 22px/1.3 var(--pixel);
  text-decoration: none;
  color: var(--bone);
  white-space: nowrap;
}
.menubar a:hover {
  border-color: var(--hi) var(--lo) var(--lo) var(--hi);
}
.menubar a[aria-current="page"] {
  background: var(--select);
  color: #fff;
  border-color: var(--lo) var(--hi) var(--hi) var(--lo);
}

/* ---------- Windows ---------- */

.view,
.bottom {
  max-width: 1180px;
  margin: 0 auto;
  padding: 14px var(--gutter) 0;
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 30px;               /* open sky between windows for the falling stars */
}
.view:focus { outline: none; }
/* Window titles get focus after a page change so screen readers announce the
   new page. They aren't clickable, so no outline (phones drew one on every tap). */
.win-name:focus { outline: none; }
/* Pages render after content.json loads; holding a screen of space until the
   first page appears keeps the footer from jumping (layout shift). After that
   (app.js removes .is-loading) short pages sit right above the footer. */
.view { align-content: start; }
.view.is-loading { min-height: 100vh; min-height: 100svh; }
/* The footer stays invisible until then, so it appears in its final spot
   instead of visibly jumping up under a short page */
.view.is-loading + .bottom { visibility: hidden; }

.win {
  position: relative;
  background: var(--glass);
  border: 2px solid;
  border-color: var(--hi) var(--lo) var(--lo) var(--hi);
  box-shadow: inset 1px 1px 0 var(--hi-2), inset -1px -1px 0 var(--lo-2), 0 18px 40px -20px rgb(232 150 80 / 0.25);
  padding: 3px;
  color: var(--bone);
}

.win-title {
  display: flex;
  align-items: center;
  gap: 8px;
  min-height: 32px;
  padding: 2px 4px 2px 8px;
  background: linear-gradient(90deg, var(--title-a), var(--title-b));
  color: #fff;
}
.win-name {
  flex: 1;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font: 400 22px/1.2 var(--pixel);
  letter-spacing: 0.02em;
}
.win-ctl { display: flex; gap: 2px; }
.win-ctl i,
.win-close {
  display: grid;
  place-items: center;
  width: 22px;
  height: 20px;
  background: var(--face-2);
  border: 2px solid;
  border-color: var(--hi) var(--lo) var(--lo) var(--hi);
  color: var(--bone);
  font: 400 18px/1 var(--pixel);
  font-style: normal;
}
.win-close {
  width: 44px;
  height: 32px;
  font-size: 24px;
  cursor: pointer;
  padding: 0;
}
.win-close:active { border-color: var(--lo) var(--hi) var(--hi) var(--lo); }

.win-body { padding: clamp(14px, 3vw, 26px); }
.win-status {
  display: flex;
  gap: 4px;
  margin-top: 3px;
  font: 18px/1 var(--pixel);
  color: var(--muted);
}
.win-status span {
  flex: 1;
  padding: 4px 8px;
  border: 1px solid;
  border-color: var(--lo) var(--hi) var(--hi) var(--lo);
}

.ico {
  flex: none;
  width: 20px;
  height: 20px;
  color: var(--bone);
}
.ico-big { width: 40px; height: 40px; }

.section-title {
  font: 800 clamp(2.2rem, 7vw, 3.6rem)/1 var(--gothic);
  letter-spacing: 0.01em;
}
.lead { font-size: 1.125rem; color: var(--muted); max-width: 52ch; }

/* ---------- Buttons and fields ---------- */

.btn98 {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  min-height: 44px;
  padding: 6px 18px;
  background: var(--face-2);
  border: 2px solid;
  border-color: var(--hi) var(--lo) var(--lo) var(--hi);
  box-shadow: inset 1px 1px 0 #8B8496, inset -1px -1px 0 #0D0B10;
  color: var(--bone);
  font: 400 24px/1 var(--pixel);
  letter-spacing: 0.04em;
  text-decoration: none;
  text-transform: uppercase;
  cursor: pointer;
}
.btn98:hover { background: #2C2833; }
.btn98:active,
.btn98[aria-pressed="true"],
.btn98[aria-expanded="true"] {
  border-color: var(--lo) var(--hi) var(--hi) var(--lo);
  box-shadow: inset 1px 1px 0 #0D0B10, inset -1px -1px 0 #8B8496;
  padding: 7px 17px 5px 19px;
}
.btn98:focus-visible { outline-offset: -7px; }
.btn98.big { min-height: 58px; padding: 8px 30px; font-size: 34px; }
.btn98.accent { background: linear-gradient(180deg, #3A0A10, #6B141C); }
.btn98.accent:hover { background: linear-gradient(180deg, #4A0C14, #8E1B24); }
.btn98:disabled { cursor: progress; opacity: 0.7; }
.btn98[aria-disabled="true"] {
  color: #8C8494;
  text-shadow: 1px 1px 0 #000;
  cursor: not-allowed;
}

.field98 {
  width: 100%;
  min-height: 44px;
  padding: 8px 10px;
  background: var(--well);
  border: 2px solid;
  border-color: var(--lo) var(--hi) var(--hi) var(--lo);
  color: var(--bone);
  font: 16px/1.4 var(--body);
}
.field98::placeholder { color: #8C8494; }
textarea.field98 { min-height: 150px; resize: vertical; }

.groupbox {
  margin: 0 0 18px;
  padding: 14px 16px 12px;
  border: 2px groove var(--hi);
}
.groupbox legend {
  padding: 0 6px;
  font: 22px/1 var(--pixel);
  color: var(--candle);
}

/* Hidden trap field in the forms: bots fill it in, people never see it */
.hp { display: none; }

/* ---------- Album covers: always clean, always above the CRT layer ---------- */

.cover {
  position: relative;
  z-index: 31;
  display: block;
  aspect-ratio: 1;
  background: var(--well);
}
.cover img { width: 100%; height: 100%; object-fit: cover; }

/* ---------- Home: now playing ---------- */

.now {
  display: grid;
  gap: clamp(16px, 3vw, 32px);
  align-items: center;
}
@media (min-width: 820px) {
  .now { grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr); }
}
.now .cover { box-shadow: 0 0 0 2px #000, 0 0 60px -10px rgb(232 150 80 / 0.35); }
.now-info { text-align: center; }
@media (min-width: 820px) { .now-info { text-align: left; } }
.osd-tag {
  font: 26px/1 var(--pixel);
  color: var(--bone);
  letter-spacing: 0.1em;
}
.now-title {
  margin: 0.5rem 0 0.2rem;
  font: 800 clamp(2.6rem, 8vw, 4.6rem)/0.95 var(--gothic);
}
.out-now {
  font: 34px/1 var(--pixel);
  text-transform: uppercase;
  letter-spacing: 0.14em;
  color: var(--candle);
}
.now-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  margin-top: 22px;
  justify-content: center;
}
@media (min-width: 820px) { .now-actions { justify-content: flex-start; } }
.now-meta { margin-top: 14px; font: 20px/1.2 var(--pixel); color: var(--muted); }

/* Notepad (bio) */
.notepad-menu {
  display: flex;
  gap: 16px;
  padding: 2px 8px;
  font: 20px/1.3 var(--pixel);
  color: var(--muted);
}
.notepad {
  margin: 2px 0 0;
  padding: 16px 18px;
  background: var(--well);
  border: 2px solid;
  border-color: var(--lo) var(--hi) var(--hi) var(--lo);
  font: 24px/1.35 var(--pixel);
  white-space: pre-line;
}
.notepad p { margin: 0 0 0.9em; }
.notepad p:last-child { margin: 0; }

/* Activity feed, as a details list view */
.listview {
  width: 100%;
  border-collapse: collapse;
  background: var(--well);
  border: 2px solid;
  border-color: var(--lo) var(--hi) var(--hi) var(--lo);
  font: 20px/1.3 var(--pixel);
}
.listview th {
  position: sticky;
  top: 0;
  padding: 4px 10px;
  background: var(--face-2);
  border: 2px solid;
  border-color: var(--hi) var(--lo) var(--lo) var(--hi);
  font-weight: 400;
  text-align: left;
  color: var(--bone);
}
.listview td {
  padding: 8px 10px;
  border-bottom: 1px solid #1F1C24;
  vertical-align: middle;
}
.listview tr:hover td { background: #1A1720; }
.listview .when { white-space: nowrap; color: var(--muted); width: 1%; }
.listview .kind { white-space: nowrap; width: 1%; }
.listview .kind span { display: inline-flex; align-items: center; gap: 8px; }
.listview a { text-decoration: none; }
.listview a:hover { text-decoration: underline; }
@media (max-width: 600px) {
  .listview thead { position: absolute; left: -9999px; }
  .listview tr { display: grid; grid-template-columns: auto 1fr; gap: 2px 10px; padding: 8px 10px; border-bottom: 1px solid #1F1C24; }
  .listview td { padding: 0; border: 0; }
  .listview .what { grid-column: 1 / -1; }
}

/* ---------- Releases grid (Explorer "large icons") ---------- */

.toolbar {
  display: flex;
  flex-wrap: wrap;
  gap: 8px 16px;
  align-items: center;
  margin-bottom: 18px;
  font: 20px/1.2 var(--pixel);
  color: var(--muted);
}
.grid {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 22px 14px;
}
@media (min-width: 700px) { .grid { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (min-width: 1040px) { .grid { grid-template-columns: repeat(4, minmax(0, 1fr)); } }

.tile {
  display: block;
  width: 100%;
  padding: 6px;
  background: none;
  border: 2px solid transparent;
  color: var(--bone);
  font: inherit;
  text-align: center;
  cursor: pointer;
}
.tile .cover { box-shadow: 0 10px 26px -14px #000; }
.tile:hover { border-color: var(--hi) var(--lo) var(--lo) var(--hi); }
.tile:hover .tile-title,
.tile:focus-visible .tile-title { background: var(--select); color: #fff; }
.tile:focus-visible { outline-offset: 0; }
.tile-title {
  display: inline;
  margin-top: 10px;
  padding: 0 4px;
  font: 22px/1.35 var(--pixel);
  -webkit-box-decoration-break: clone;
  box-decoration-break: clone;
}
.tile-meta { display: block; margin-top: 4px; font: 18px/1.2 var(--pixel); color: var(--muted); }
.tile-name { display: block; margin-top: 10px; }

/* ---------- Release window (dialog) ---------- */

dialog.win {
  padding: 3px;
  max-height: min(92vh, 980px);
  max-height: min(92svh, 980px);
  overflow: auto;
  overscroll-behavior: contain;
}
dialog.win::backdrop { background: rgb(0 0 0 / 0.78); }

/* The release window opens without locking the docked player, so it is a
   regular (non-modal) dialog placed like a modal, over a scrim, with the rest
   of the page made inert by app.js. It leaves room for the dock and taskbar. */
dialog.release {
  position: fixed;
  z-index: 40;
  inset: 8px 0 calc(var(--bar-h) + env(safe-area-inset-bottom) + var(--dock-h, 0px) + 8px);
  margin: auto;
  height: fit-content;
  max-height: calc(100vh - var(--bar-h) - var(--dock-h, 0px) - 16px);
  max-height: calc(100svh - var(--bar-h) - env(safe-area-inset-bottom) - var(--dock-h, 0px) - 16px);
}
.scrim {
  position: fixed;
  inset: 0;
  z-index: 39;
  background: rgb(0 0 0 / 0.78);
}
.scrim[hidden] { display: none; }

.release { width: min(1000px, calc(100% - 12px)); }
.release .win-title { position: sticky; top: -3px; z-index: 3; }
.release-grid { display: grid; gap: 22px; }
@media (min-width: 800px) {
  .release-grid { grid-template-columns: minmax(0, 380px) minmax(0, 1fr); gap: 30px; }
  .release-side { position: sticky; top: 52px; align-self: start; }
}
.release .cover { box-shadow: 0 0 50px -14px var(--accent); }
.release-title { font: 800 clamp(2.2rem, 7vw, 3.4rem)/1 var(--gothic); }
.release-meta { margin: 6px 0 16px; font: 22px/1.2 var(--pixel); color: var(--accent); letter-spacing: 0.06em; }

.player {
  position: relative;
  height: 120px;
  background: var(--well);
  border: 2px solid;
  border-color: var(--lo) var(--hi) var(--hi) var(--lo);
}
.player-wait {
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  font: 24px/1 var(--pixel);
  color: var(--muted);
  letter-spacing: 0.1em;
}
.player iframe { position: relative; display: block; width: 100%; height: 116px; border: 0; opacity: 0; }
.player.is-loaded iframe { opacity: 1; }
.player.is-loaded .player-wait { display: none; }

.platform-row { display: flex; flex-wrap: wrap; gap: 10px; margin: 16px 0 22px; }
.platform-row .btn98 { font-size: 20px; padding: 6px 14px; }

.tracks {
  margin: 0;
  padding: 0;
  list-style: none;
  background: var(--well);
  border: 2px solid;
  border-color: var(--lo) var(--hi) var(--hi) var(--lo);
  counter-reset: t;
}
.tracks li {
  display: grid;
  grid-template-columns: 2.4em 1fr auto;
  gap: 8px;
  padding: 6px 10px;
  border-bottom: 1px solid #1F1C24;
  font: 21px/1.3 var(--pixel);
  counter-increment: t;
}
.tracks li::before { content: counter(t, decimal-leading-zero); color: var(--muted); }
.tracks .dur { color: var(--muted); }
.tracks-total { margin: 8px 0 18px; font: 18px/1.2 var(--pixel); color: var(--muted); }
.prose { margin: 0; white-space: pre-line; }

/* Grain inside dialogs (dialogs sit above the page's .crt layer) */
.dialog-crt {
  position: fixed;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  background:
    repeating-linear-gradient(to bottom, rgb(0 0 0 / 0.16) 0 1px, transparent 1px 3px),
    url("assets/img/grain.png");
  opacity: 0.4;
}
.release .cover { z-index: 2; }

/* Message box */
.msgbox { width: min(420px, calc(100% - 24px)); }
.msgbox-body { display: flex; gap: 16px; align-items: flex-start; }
.msgbox-body p { margin: 4px 0 0; }
.msgbox-actions { display: flex; justify-content: center; padding: 0 0 16px; }
.msgbox-actions .btn98 { min-width: 110px; }

/* ---------- Shows, videos, shop, support ---------- */

.empty-state {
  margin: 0 0 20px;
  font: 800 clamp(1.8rem, 6vw, 2.8rem)/1.1 var(--gothic);
  color: var(--bone);
}
.cards { display: grid; gap: 16px; grid-template-columns: repeat(auto-fill, minmax(min(100%, 240px), 1fr)); }
.card98 {
  padding: 14px;
  background: var(--face-2);
  border: 2px solid;
  border-color: var(--hi) var(--lo) var(--lo) var(--hi);
}
.card98 h3 { font: 26px/1.1 var(--pixel); margin: 10px 0 6px; }
.card98 p { margin: 0 0 10px; color: var(--muted); }
.card98 .ph {
  display: grid;
  place-items: center;
  aspect-ratio: 4 / 3;
  background:
    repeating-linear-gradient(45deg, #1A171F 0 10px, #141218 10px 20px);
  border: 2px solid;
  border-color: var(--lo) var(--hi) var(--hi) var(--lo);
  font: 22px/1 var(--pixel);
  color: var(--muted);
}

/* VHS tape placeholder for videos */
.tape {
  position: relative;
  aspect-ratio: 16 / 9;
  background: #0E0D11;
  border: 2px solid;
  border-color: var(--lo) var(--hi) var(--hi) var(--lo);
  display: grid;
  place-items: center;
}
.tape-label {
  width: 72%;
  padding: 8px 10px;
  background: #E9E1D2;
  color: #1A1414;
  font: 22px/1.1 var(--pixel);
  text-align: center;
  border-top: 6px solid var(--title-b);
}
.tape.yt { width: 100%; padding: 0; cursor: pointer; }
.tape.yt img { width: 100%; height: 100%; object-fit: cover; }
.yt-frame { display: block; width: 100%; aspect-ratio: 16 / 9; border: 0; }
.tape-reels { position: absolute; bottom: 12%; left: 50%; display: flex; gap: 26%; width: 50%; justify-content: center; translate: -50% 0; }
.tape-reels i { width: 26px; height: 26px; border-radius: 50%; border: 5px dotted #555; }

/* Show listing */
.shows { display: grid; gap: 10px; }
.show-row {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 4px 18px;
  align-items: center;
  padding: 12px 14px;
  background: var(--well);
  border: 2px solid;
  border-color: var(--lo) var(--hi) var(--hi) var(--lo);
}
.show-date { font: 30px/1 var(--pixel); color: var(--candle); grid-row: span 2; text-align: center; }
.show-date small { display: block; font-size: 20px; color: var(--muted); }
.show-what { font: 24px/1.1 var(--pixel); }
.show-where { color: var(--muted); }
@media (min-width: 700px) {
  .show-row { grid-template-columns: 90px 1fr auto; }
  .show-row .btn98 { grid-row: span 2; }
}

/* ---------- Contact ---------- */

.form98 { display: grid; gap: 14px; max-width: 640px; }
.form98 label { display: block; margin-bottom: 4px; font: 22px/1.1 var(--pixel); }
.form-actions { display: flex; gap: 10px; flex-wrap: wrap; }

/* ---------- Sitemap (Explorer tree) ---------- */

.tree, .tree ul { list-style: none; margin: 0; padding: 0; }
.tree { font: 22px/1.5 var(--pixel); background: var(--well); padding: 12px; border: 2px solid; border-color: var(--lo) var(--hi) var(--hi) var(--lo); }
.tree ul { margin-left: 12px; padding-left: 18px; border-left: 1px dotted #6E6778; }
.tree li { position: relative; }
.tree ul > li::before { content: ""; position: absolute; left: -18px; top: 0.75em; width: 14px; border-top: 1px dotted #6E6778; }
.tree a { display: inline-flex; align-items: center; gap: 8px; padding: 0 4px; text-decoration: none; overflow-wrap: anywhere; }
.tree a:hover, .tree a:focus-visible { background: var(--select); color: #fff; }

/* ---------- Glossary (Help window) ---------- */

.help { display: grid; gap: 14px; }
@media (min-width: 760px) { .help { grid-template-columns: 260px 1fr; } }
.help-index, .help-page {
  background: var(--well);
  border: 2px solid;
  border-color: var(--lo) var(--hi) var(--hi) var(--lo);
  padding: 12px;
}
.help-index h3, .help-page h3 { font: 22px/1.2 var(--pixel); color: var(--candle); margin-bottom: 8px; }
.help-index ul { list-style: none; margin: 0; padding: 0; font: 22px/1.5 var(--pixel); }
.help-page dl { margin: 0; }
.help-page dt { font: 800 1.9rem/1.1 var(--gothic); }
.help-page dd { margin: 4px 0 18px; }

/* ---------- Footer windows ---------- */

.bottom { padding-top: 34px; padding-bottom: 16px; }
.platforms { display: flex; flex-wrap: wrap; gap: 12px; justify-content: center; }
.platforms .btn98 { min-width: 200px; }
.signup-copy { font-size: 1.0625rem; }
.signup { display: flex; gap: 10px; flex-wrap: wrap; }
.signup .field98 { flex: 1 1 220px; }

/* ---------- Music player, attached to the taskbar ---------- */

.dock {
  position: fixed;
  left: 0;
  right: 0;
  bottom: calc(var(--bar-h) + env(safe-area-inset-bottom));
  z-index: 41;
  padding: 4px 4px 2px;
  background: var(--face);
  border-top: 2px solid var(--hi);
  box-shadow: inset 0 1px 0 var(--hi-2);
}
@media (min-width: 700px) {
  /* Bandcamp's full player stops growing at 700px, so the player stays that wide
     and sits on the left of the taskbar like an open tray */
  .dock { right: auto; width: min(760px, 100%); border-right: 2px solid var(--lo); }
}
.dock[hidden] { display: none; }
.dock::after {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background:
    repeating-linear-gradient(to bottom, rgb(0 0 0 / 0.14) 0 1px, transparent 1px 3px),
    url("assets/img/grain.png");
  opacity: 0.4;
}
@media (prefers-reduced-motion: no-preference) {
  .dock.is-new { animation: dock-up 0.25s cubic-bezier(0.2, 0.8, 0.2, 1); }
}
@keyframes dock-up { from { transform: translateY(16px); opacity: 0; } }

.dock-hint {
  margin: 0 0 4px;
  padding: 0 4px;
  font: 19px/1.2 var(--pixel);
  color: var(--candle);
}
@media (max-width: 560px) { .dock-hint { font-size: 17px; } }
@media (max-height: 500px) { .dock-hint { display: none; } }   /* phones held sideways: every line counts */
/* The player is the same on every screen (see dockSrc in app.js), with its
   buttons stacked beside it, so turning a phone only changes the width */
.dock-row { display: flex; gap: 4px; align-items: stretch; }
.dock-frame {
  flex: 1;
  min-width: 0;
  background: var(--well);
  border: 2px solid;
  border-color: var(--lo) var(--hi) var(--hi) var(--lo);
}
.dock-frame iframe { display: block; width: 100%; max-width: 700px; height: 120px; border: 0; }
.dock-ctl { display: flex; flex-direction: column; gap: 4px; }
.dock-btn {
  flex: 1;
  min-width: 44px;
  min-height: 0;
  padding: 0 8px;
  font-size: 24px;
}
.dock-btn .ico { width: 20px; height: 20px; }
.dock-btn:active { padding: 1px 7px 0 9px; }

/* Hidden: clipped to nothing rather than removed, so the music keeps playing */
.dock.is-min { height: 0; padding: 0; border: 0; overflow: hidden; }
.dock.is-min::after { display: none; }

body.has-dock {
  padding-bottom: calc(var(--bar-h) + var(--dock-h, 0px) + env(safe-area-inset-bottom) + 16px);
}

/* ---------- Taskbar and Start menu ---------- */

.taskbar {
  position: fixed;
  left: 0; right: 0; bottom: 0;
  z-index: 41;
  display: flex;
  align-items: center;
  gap: 6px;
  height: calc(var(--bar-h) + env(safe-area-inset-bottom));
  padding: 3px 4px calc(3px + env(safe-area-inset-bottom));
  background: var(--face);
  border-top: 2px solid var(--hi);
  box-shadow: inset 0 1px 0 var(--hi-2);
}
.taskbar .btn98 { min-height: 40px; padding: 4px 10px; font-size: 22px; }
.start { font-weight: 400; }
.start img { image-rendering: pixelated; }
.task { flex: 1 1 auto; min-width: 0; justify-content: flex-start; text-transform: none; }
.task-text { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.tray {
  display: flex;
  align-items: center;
  gap: 10px;
  height: 40px;
  padding: 0 10px;
  border: 2px solid;
  border-color: var(--lo) var(--hi) var(--hi) var(--lo);
  font: 20px/1 var(--pixel);
  white-space: nowrap;
}
.tray-link { text-decoration: none; }
.tray-link:hover { text-decoration: underline; }
.counter { color: var(--candle); }
/* Phones: a double-height taskbar (Windows 98 let you drag it taller),
   so the listen and follow links both fit without cutting off */
@media (max-width: 560px) {
  :root { --bar-h: 96px; }
  .taskbar { flex-wrap: wrap; align-content: center; row-gap: 4px; }
  .task { flex: 1 1 0; }
  .taskbar .btn98 { padding: 4px 10px; font-size: 21px; }
  .tray { flex: 1 0 100%; justify-content: space-between; font-size: 20px; }
}

.startmenu {
  position: fixed;
  left: 4px;
  bottom: calc(var(--bar-h) + env(safe-area-inset-bottom) - 2px);
  z-index: 42;
  display: flex;
  width: min(300px, calc(100% - 8px));
  max-height: calc(100dvh - var(--bar-h) - env(safe-area-inset-bottom) - 8px);  /* phones turned sideways */
  overflow-y: auto;
  overscroll-behavior: contain;
  background: var(--face);
  border: 2px solid;
  border-color: var(--hi) var(--lo) var(--lo) var(--hi);
  box-shadow: inset 1px 1px 0 var(--hi-2), 6px 6px 0 rgb(0 0 0 / 0.6);
}
.startmenu[hidden] { display: none; }
.startmenu-band {
  display: flex;
  align-items: flex-end;
  width: 36px;
  padding: 8px 0;
  background: linear-gradient(0deg, var(--title-b), var(--title-a));
}
.startmenu-band span {
  writing-mode: vertical-rl;
  rotate: 180deg;
  font: 700 26px/36px var(--gothic);
  color: #fff;
}
.startmenu-band b { font-weight: 800; color: var(--candle); }
.startmenu ul { flex: 1; list-style: none; margin: 0; padding: 4px; }
.startmenu a {
  display: flex;
  align-items: center;
  gap: 12px;
  min-height: 44px;
  padding: 4px 10px;
  font: 24px/1 var(--pixel);
  text-decoration: none;
}
.startmenu a:hover,
.startmenu a:focus-visible { background: var(--select); color: #fff; outline-offset: -3px; }
.startmenu a[aria-current="page"] { color: var(--candle); }
.startmenu .ico { width: 24px; height: 24px; }
.startmenu .sep { height: 0; margin: 4px 2px; border-top: 1px solid var(--lo); border-bottom: 1px solid var(--hi); }

/* The taskbar and Start menu sit above the covers (z 31), so they carry their own grain */
.taskbar::after,
.startmenu::after {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background:
    repeating-linear-gradient(to bottom, rgb(0 0 0 / 0.14) 0 1px, transparent 1px 3px),
    url("assets/img/grain.png");
  opacity: 0.45;
}

/* ---------- CRT / VHS layer ---------- */

.crt {
  position: fixed;
  inset: 0;
  z-index: 30;
  pointer-events: none;
  overflow: hidden;
}
/* Static in three depth layers. fx.js shifts each one by its depth as the mouse
   moves (or the page scrolls on touch screens), so nearer specks travel farther
   than distant ones and the static reads as a 3D field instead of flicker. */
.crt-static {
  position: absolute;
  inset: -360px;
  will-change: transform;
}
.crt-static.far { background: url("assets/img/grain.png") 0 0 / 192px; opacity: 0.32; }
.crt-static.mid { background: url("assets/img/grain-mid.png") 0 0 / 224px; opacity: 0.3; }
.crt-static.near { background: url("assets/img/grain-near.png") 0 0 / 320px; opacity: 0.38; }
.crt-lines {
  position: absolute;
  inset: 0;
  background:
    radial-gradient(ellipse 85% 80% at 50% 50%, transparent 55%, rgb(0 0 0 / 0.55) 100%),
    repeating-linear-gradient(to bottom, rgb(0 0 0 / 0.14) 0 1px, transparent 1px 3px);
}
.crt-fade {
  position: absolute;
  inset: 0;
  background: #000;
  opacity: 0;
}
.crt-track {
  position: absolute;
  left: 0; right: 0;
  top: -16vh;
  height: 16vh;
  opacity: 0;
  background:
    repeating-linear-gradient(to bottom, rgb(255 255 255 / 0.10) 0 1px, transparent 1px 4px),
    linear-gradient(to bottom, transparent, rgb(255 255 255 / 0.09) 40%, rgb(255 255 255 / 0.16) 50%, rgb(255 255 255 / 0.09) 60%, transparent);
  mix-blend-mode: screen;
}
.osd {
  position: absolute;
  max-width: calc(100% - 32px);
  top: max(14px, env(safe-area-inset-top));
  left: 16px;
  font: 28px/1 var(--pixel);
  color: #fff;
  letter-spacing: 0.08em;
  text-shadow: -2px 0 0 var(--rgb-r), 2px 0 0 var(--rgb-c), 0 0 6px rgb(0 0 0 / 0.9);
  opacity: 0;
}
@media (max-width: 600px) { .osd { font-size: 20px; top: 6px; left: 8px; } }

@media (prefers-reduced-motion: no-preference) {
  .tape-in .crt-fade { animation: tape-fade 0.7s ease-out both; }
  .tape-in .crt-track { animation: track 0.9s cubic-bezier(0.4, 0.1, 0.6, 1) both; }
  .roll .crt-track { animation: track 1.4s linear both; }
  .tape-in .osd { animation: osd 2.6s steps(1, end) both; }
}
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition: none !important; }
}

@keyframes tape-fade {
  0% { opacity: 0.9; }
  35% { opacity: 0.55; }
  100% { opacity: 0; }
}
/* transform, not top: moves the band without counting as layout shift */
@keyframes track {
  0% { transform: translateY(0); opacity: 1; }
  100% { transform: translateY(132vh); opacity: 0.6; }
}
@keyframes osd {
  0%, 85% { opacity: 1; }
  100% { opacity: 0; }
}