/* ============================================================
   yvesspiri.net · direction H2 "backroom, broken"
   Shared stylesheet. The first part is the reference implementation
   (_REDESIGN/yvesspiri-h2-reference.html) and its values are the source
   of truth; the inner page additions sit at the end.
   ============================================================ */

:root {
  /* ground + surfaces */
  --ground: #A9AB8C;          /* damp green-grey wall */
  --window: #CFC9AE;          /* window body */
  --paper: #DCD6C1;           /* inset text panel, file icons */
  --button: #D5CFB6;          /* dock + bevel buttons */
  --row-hover: #C3BDA2;
  --row-current: #B4B995;

  /* ink (text is ALWAYS dark on light) */
  --ink: #1E211C;
  --ink-2: #33352A;
  --ink-3: #45463A;
  --ink-4: #4E4F42;

  /* accents */
  --rust: #7A3B26;
  --rust-btn: #8E4E34;
  --warn: #B88A3A;
  --led-dead: #6E6C55;
  --led-alarm: #9A2E1C;

  /* folder icon tints */
  --f-about: #7C6838;
  --f-music: #55606C;
  --f-film: #7A3B26;
  --f-live: #6E6F62;
  --f-sound: #62786B;

  /* bevel */
  --bevel-dark: #9E9881;
  --bevel-light: #EEEADB;

  /* derived from the tokens above, so they follow the theme */
  --shadow: 6px 6px 0 color-mix(in srgb, var(--ink) 40%, transparent);

  /* the Mac OS 9 pairing: Geneva for text (the real one on macOS, its
     sibling Verdana elsewhere), Chicago only for window titles. ChicagoFLF
     is the free Chicago revival by Robin Casady (public domain), self-hosted
     in /assets/fonts */
  --font-sans: Geneva, Verdana, "DejaVu Sans", sans-serif;
  --font-mono: Geneva, Verdana, "DejaVu Sans", sans-serif;
  --font-title: "ChicagoFLF", "Chicago", "Charcoal", Geneva, sans-serif;
}

@font-face {
  font-family: "ChicagoFLF";
  src: url("/assets/fonts/ChicagoFLF.woff2") format("woff2");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

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

html, body { margin: 0; }

body {
  min-height: 100vh;
  background-color: var(--ground);
  /* faint vertical wallpaper stripes */
  background-image: repeating-linear-gradient(90deg, color-mix(in srgb, var(--ink) 6%, transparent) 0 2px, transparent 2px 22px);
  color: var(--ink);
  font-family: var(--font-mono);
  font-weight: 400;
  font-size: 12px;
  line-height: 1.55;
  position: relative;
  overflow-x: hidden;
}

a { color: var(--ink); text-decoration: none; }
a:focus-visible, button:focus-visible { outline: 2px dashed var(--ink); outline-offset: 2px; }

/* ---------- atmosphere overlays (fixed, non-interactive) ---------- */

/* CRT scanlines */
body::after {
  content: "";
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 100;
  background: repeating-linear-gradient(to bottom, color-mix(in srgb, var(--ink) 9%, transparent) 0 1px, transparent 1px 3px);
}

/* fluorescent hum: a pale wash that drops out irregularly */
body::before {
  content: "";
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 99;
  background: rgba(255, 248, 190, 0.10);
  animation: hum 18s infinite steps(1);
}
@keyframes hum {
  0% { opacity: 1; }
  62% { opacity: 0; }
  62.6% { opacity: 1; }
  63.4% { opacity: 0.4; }
  64% { opacity: 1; }
}

/* ---------- layout ---------- */

.page {
  position: relative;
  z-index: 1;
  max-width: 1060px;
  margin: 0 auto;
  padding: 72px 32px 80px;
  display: flex;
  flex-direction: column;
  gap: 28px;
}

.site-header {
  position: relative;
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  justify-content: space-between;
  gap: 12px 24px;
}
.site-header .lead { min-width: 0; }

.name {
  position: relative;
  display: inline-block;
}
.name h1 {
  margin: 0;
  font-family: var(--font-sans);
  font-weight: 400;
  font-size: 64px;
  letter-spacing: -0.02em;
  line-height: 1;
  /* chromatic aberration */
  text-shadow: 3px 0 0 rgba(140, 40, 25, 0.4), -3px 0 0 rgba(40, 80, 90, 0.35);
}
/* torn rust ghost slice of the name */
.name .ghost {
  position: absolute;
  left: 14px;
  top: 0;
  font-family: var(--font-sans);
  font-size: 64px;
  letter-spacing: -0.02em;
  line-height: 1;
  color: var(--rust);
  opacity: 0.35;
  clip-path: inset(46% 0 30% 0);
  white-space: nowrap;
  pointer-events: none;
  user-select: none;
}

.desk {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-start;
  gap: 24px;
}
.desk > .directory { flex: 1.4 1 440px; min-width: 0; }
.desk > .side {
  flex: 1 1 320px;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 24px;
  /* side column drops down and overlaps the directory window */
  margin-top: 120px;
  margin-left: -56px;
  position: relative;
  z-index: 2;
}

/* ---------- window ---------- */

.window {
  position: relative;
  background: var(--window);
  border: 2px solid var(--ink);
  box-shadow: var(--shadow);
  display: flex;
  flex-direction: column;
}

.titlebar {
  display: flex;
  align-items: center;
  gap: 10px;
  height: 30px;
  padding: 0 10px;
  border-bottom: 2px solid var(--ink);
}
.titlebar .box {
  width: 12px;
  height: 12px;
  border: 2px solid var(--ink);
  flex: none;
}
.titlebar .stripes {
  flex: 1 1 0;
  height: 14px;
  background: repeating-linear-gradient(to bottom, var(--ink) 0 1px, transparent 1px 4px);
}
.titlebar .title {
  padding: 0 10px;
  font-family: var(--font-title);
  font-size: 13px;
  white-space: nowrap;
}
.titlebar.small { height: 28px; }
.titlebar.small .stripes { height: 12px; }
.titlebar.small .title { font-size: 12px; padding: 0 8px; }

/* ---------- directory listing ---------- */

.row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 128px 56px;
  column-gap: 14px;
  align-items: center;
  padding: 6px 12px;
  min-height: 34px;
}
.row.head {
  border-bottom: 1.5px solid var(--ink);
  font-size: 12px;
  color: var(--ink-3);
}
.rows { display: flex; flex-direction: column; padding: 6px 0 10px; }
.rows a.row:hover { background: var(--row-hover); }
.rows .row[aria-current="page"] { background: var(--row-current); }
.row .name-cell { display: flex; align-items: center; gap: 10px; }
.row .meta { color: var(--ink-4); }
.row[aria-current="page"] .meta,
.rows a.row:hover .meta { color: var(--ink-2); }

/* glitched rows: site.js picks one row per page view and gives it one of
   these, rotating through them from view to view. Short steps, long rests. */

/* jitter: drifts right and twitches */
.row.glitch-jitter {
  background: color-mix(in srgb, var(--rust) 10%, transparent);
  animation: jitter 4s infinite steps(1);
}
@keyframes jitter {
  0% { transform: translateX(12px); }
  70% { transform: translateX(12px); }
  71% { transform: translateX(-4px); }
  73% { transform: translateX(18px); }
  75% { transform: translateX(12px); }
}

/* flicker: the row's text drops out like a failing tube */
.row.glitch-flicker > span { animation: flicker 5.5s infinite steps(1); }
@keyframes flicker {
  0% { opacity: 1; }
  58% { opacity: 0.2; }
  59% { opacity: 1; }
  61% { opacity: 0.45; }
  62% { opacity: 1; }
}

/* slip: the row loses vertical hold for a moment */
.row.glitch-slip { animation: slip 4.5s infinite steps(1); }
@keyframes slip {
  0% { transform: none; }
  64% { transform: translateY(3px) skewX(-6deg); }
  65.5% { transform: translateY(-2px); }
  67% { transform: none; }
}

/* chroma: the text splits into red and teal, then snaps back */
.row.glitch-chroma { animation: chroma 6s infinite steps(1); }
@keyframes chroma {
  0% { text-shadow: none; }
  50% { text-shadow: 2px 0 0 rgba(140, 40, 25, 0.55), -2px 0 0 rgba(40, 80, 90, 0.5); }
  53% { text-shadow: -3px 0 0 rgba(140, 40, 25, 0.55), 3px 0 0 rgba(40, 80, 90, 0.5); }
  55% { text-shadow: none; }
}

/* stutter: the icon blinks out and lands in the wrong place */
.row.glitch-stutter .name-cell svg { animation: stutter 5s infinite steps(1); }
@keyframes stutter {
  0% { opacity: 1; transform: none; }
  40% { opacity: 0; }
  41% { opacity: 1; transform: translateX(-4px); }
  44% { transform: translateX(3px); }
  46% { transform: none; }
}

.statusbar {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  padding: 6px 12px;
  border-top: 1.5px solid var(--ink);
  font-size: 12px;
  color: var(--ink-4);
}
.leds { display: inline-flex; gap: 6px; align-items: center; }
.led {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  border: 1.5px solid var(--ink);
  background: var(--led-dead);
}
.led.alarm { background: var(--led-alarm); animation: blink 1.2s infinite steps(1); }
@keyframes blink { 0% { opacity: 1; } 50% { opacity: 0.15; } }

/* ---------- readme ---------- */

.readme-body {
  margin: 14px;
  padding: 16px 18px;
  background: var(--paper);
  border: 1.5px solid var(--ink);
  display: flex;
  flex-direction: column;
  gap: 10px;
  font-family: var(--font-sans);
  font-size: 14px;
  line-height: 1.6;
}
.readme-body p { margin: 0; }
.readme-body a {
  text-decoration: underline;
  text-underline-offset: 3px;
  text-decoration-color: var(--rust);
}
.readme-body .mail {
  font-family: var(--font-mono);
  font-size: 13px;
  color: var(--ink-3);
}

/* ---------- player ---------- */

.player {
  flex-direction: row;
  align-items: center;
  gap: 12px;
  padding: 12px;
}
.play {
  flex: none;
  width: 44px;
  height: 44px;
  border-radius: 50%;
  background: var(--rust-btn);
  border: 2px solid var(--ink);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0;
  cursor: pointer;
}
.player .track {
  flex: 1 1 auto;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.player .label {
  font-size: 12px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.player .wave { width: 100%; height: 28px; cursor: pointer; }
.player .wave path { stroke: var(--ink); stroke-opacity: 0.3; }
.player .wave path.on { stroke: var(--rust); stroke-opacity: 1; }
.player .time { flex: none; font-size: 12px; color: var(--ink-3); }

.bevel {
  min-height: 32px;
  padding: 0 16px;
  background: var(--button);
  border: 2px solid var(--ink);
  box-shadow: inset -2px -2px 0 var(--bevel-dark), inset 2px 2px 0 var(--bevel-light);
  font-family: var(--font-mono);
  font-size: 12px;
  color: var(--ink);
  cursor: pointer;
}
.bevel:active { box-shadow: inset 2px 2px 0 var(--bevel-dark), inset -2px -2px 0 var(--bevel-light); }

/* ============================================================
   inner page additions: same components, extended
   ============================================================ */

.name a { color: inherit; }

.visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
}

/* breadcrumb path under the name on inner pages */
.path { margin: 10px 0 0; font-size: 13px; color: var(--ink-2); }
.path a { text-decoration: underline; text-underline-offset: 3px; text-decoration-color: var(--rust); }

/* a directory with more windows stacked under it */
.desk > .main-col { flex: 1.4 1 440px; min-width: 0; display: flex; flex-direction: column; gap: 24px; }

/* a desk with nothing beside the directory */
.desk.solo > .directory { flex-basis: 100%; }

/* rows that are not links (track lists) */
.rows div.row { cursor: default; }
.row .name-cell { min-width: 0; }
.row .name-cell .label { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.row .name-cell svg { flex: none; }

/* the open entry's files, indented under its folder row in a section tree */
.row.child .name-cell { padding-left: 30px; }

.readme-body .entry-title { font-size: 22px; line-height: 1.2; }

/* the home page player: a link to the release above its embed */
.player-label { margin: 12px 14px -4px; font-size: 12px; }
.player-label a { text-decoration: underline; text-underline-offset: 3px; text-decoration-color: var(--rust); }

/* inset panel holding an image or an embed */
.inset {
  margin: 14px;
  background: var(--paper);
  border: 1.5px solid var(--ink);
}
.inset img { display: block; width: 100%; height: auto; }
.inset iframe { display: block; width: 100%; border: 0; }
.inset .caption {
  margin: 0;
  padding: 6px 10px;
  border-top: 1.5px solid var(--ink);
  font-size: 12px;
  color: var(--ink-3);
}
.inset .caption a { text-decoration: underline; text-underline-offset: 3px; text-decoration-color: var(--rust); }
.inset.video iframe { aspect-ratio: 16 / 9; height: auto; }

/* film clips: a looping video with a sound toggle under it */
.inset video { display: block; width: 100%; height: auto; background: var(--ink); }
.clip-bar { display: flex; align-items: center; gap: 14px; }
.bevel.sound { display: inline-flex; align-items: center; gap: 6px; min-height: 26px; padding: 0 10px; }
.bevel.sound .waves { opacity: 0.25; }
.bevel.sound[aria-pressed="true"] .waves { opacity: 1; }

/* readme extras: credits, notes, the "more" disclosure */
.readme-body .credits {
  font-family: var(--font-mono);
  font-size: 13px;
  color: var(--ink-3);
  white-space: pre-line;
}
.readme-body .note { font-family: var(--font-mono); font-size: 13px; color: var(--ink-3); }
.readme-body details summary {
  font-family: var(--font-mono);
  font-size: 13px;
  color: var(--ink-3);
  cursor: pointer;
}
.readme-body details[open] summary { margin-bottom: 8px; }
.readme-body ul { margin: 0; padding: 0; list-style: none; font-family: var(--font-mono); font-size: 13px; }
.readme-body li + li { margin-top: 2px; }

/* ---------- dock: the track's play/pause, pinned to the corner ---------- */

.dock {
  position: fixed;
  right: 16px;
  bottom: 16px;
  z-index: 50;
  flex-direction: row;
  align-items: center;
  gap: 10px;
  padding: 8px 12px 10px 8px;
  max-width: calc(100vw - 32px);
  background: var(--button);
  font-size: 12px;
}
.dock[hidden] { display: none; }
.dock .play { width: 32px; height: 32px; }
.dock-label { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.dock-time { flex: none; color: var(--ink-3); }
/* progress, as a thin rust line along the bottom edge */
.dock-bar { position: absolute; left: 0; right: 0; bottom: 0; height: 3px; border-top: 1px solid var(--ink); }
.dock-bar span { display: block; height: 100%; width: 0; background: var(--rust); }

/* a playing embed after leaving its page: the page stays in the document,
   invisible, and only the player shows, pinned where the dock sits */
main.ghost {
  position: fixed;
  inset: 0;
  z-index: 50;
  max-width: none;
  overflow: hidden; /* takes no scroll space; the fixed player escapes the clip */
  visibility: hidden;
  pointer-events: none;
}
.inset.docked {
  visibility: visible;
  pointer-events: auto;
  position: fixed;
  right: 16px;
  bottom: 16px;
  z-index: 50;
  width: min(340px, calc(100vw - 32px));
  margin: 0;
  border: 2px solid var(--ink);
  box-shadow: var(--shadow);
}
.inset .undock { display: none; }
main.ghost .inset.docked .undock {
  display: block;
  position: absolute;
  right: -2px;
  bottom: 100%;
  margin-bottom: 6px;
  min-height: 26px;
  padding: 0 10px;
}

/* ---------- appearance: theme swatches in the header ---------- */

.themes { display: flex; align-items: center; gap: 8px; font-size: 12px; color: var(--ink-2); }
.themes .swatches { display: flex; gap: 6px; }
.swatch {
  width: 26px;
  height: 26px;
  padding: 0;
  border: 2px solid var(--ink);
  box-shadow: 2px 2px 0 color-mix(in srgb, var(--ink) 40%, transparent);
  background: linear-gradient(135deg, var(--a) 0 55%, var(--b) 55% 100%);
  cursor: pointer;
}
.swatch[aria-pressed="true"] { outline: 2px solid var(--ink); outline-offset: 2px; }

/* ---------- responsive ---------- */

@media (max-width: 760px) {
  .desk > .side { margin-top: 0; margin-left: 0; }
}

@media (max-width: 640px) {
  .page { padding: 36px 12px 96px; }
  .dock { right: 12px; bottom: 12px; max-width: calc(100vw - 24px); }
  .name h1, .name .ghost { font-size: 44px; }
  .row { grid-template-columns: minmax(0, 1fr) auto; padding: 9px 10px; }
  .hide-sm { display: none; }
  /* the theme picker shrinks into the header's top-right corner */
  .themes { position: absolute; top: 0; right: 0; }
  .themes > span[aria-hidden] { display: none; }
  .themes .swatches { gap: 5px; }
  .swatch { width: 18px; height: 18px; border-width: 1.5px; box-shadow: none; }
  .swatch[aria-pressed="true"] { outline-width: 1.5px; outline-offset: 1.5px; }
}

/* ---------- reduced motion: keep the look, stop the movement ---------- */

@media (prefers-reduced-motion: reduce) {
  body::before, .led.alarm,
  .row.glitch-jitter, .row.glitch-flicker > span, .row.glitch-slip, .row.glitch-chroma,
  .row.glitch-stutter .name-cell svg { animation: none; }
  .row.glitch-jitter { transform: translateX(12px); }
}

/* ---------- contact.txt page ---------- */

.contact-list {
  margin: 0;
  display: grid;
  grid-template-columns: max-content minmax(0, 1fr);
  column-gap: 18px;
  row-gap: 4px;
  font-size: 13px;
}
.contact-list dt { color: var(--ink-3); }
.contact-list dd { margin: 0; overflow-wrap: anywhere; }
.contact-list a { text-decoration: underline; text-underline-offset: 3px; text-decoration-color: var(--rust); }

/* ---------- themes (generated from src/data/themes.js) ---------- */

:root {
  --ground: #97A596;
  --window: #C8D6E4;
  --paper: #E0E9F2;
  --button: #D1DDE9;
  --row-hover: #B4C6D8;
  --row-current: #E6C8B0;
  --ink: #18241B;
  --ink-2: #223326;
  --ink-3: #2F4234;
  --ink-4: #394B3D;
  --rust: #8E3B12;
  --rust-btn: #D2652E;
  --led-dead: #576350;
  --led-alarm: #D2652E;
  --f-about: #A78567;
  --f-music: #3A9CBE;
  --f-film: #8E3B12;
  --f-live: #576350;
  --f-sound: #6FA9C5;
  --bevel-dark: #97A8BA;
  --bevel-light: #F2F6FA;
}

:root[data-theme="glitter"] {
  --ground: #B09AA3;
  --window: #DDCED5;
  --paper: #EEE4E9;
  --button: #E4D8DE;
  --row-hover: #CFBCC5;
  --row-current: #C4D8CB;
  --ink: #1A1822;
  --ink-2: #28282F;
  --ink-3: #38343F;
  --ink-4: #443E4A;
  --rust: #1F6B55;
  --rust-btn: #D385B1;
  --led-dead: #7D5C68;
  --led-alarm: #C2186B;
  --f-about: #7D5C68;
  --f-music: #254665;
  --f-film: #72454D;
  --f-live: #235B4F;
  --f-sound: #6DA587;
  --bevel-dark: #A8939D;
  --bevel-light: #F7F1F4;
}

:root[data-theme="backroom"] {
  --ground: #A9AB8C;
  --window: #CFC9AE;
  --paper: #DCD6C1;
  --button: #D5CFB6;
  --row-hover: #C3BDA2;
  --row-current: #B4B995;
  --ink: #1E211C;
  --ink-2: #33352A;
  --ink-3: #45463A;
  --ink-4: #4E4F42;
  --rust: #7A3B26;
  --rust-btn: #8E4E34;
  --led-dead: #6E6C55;
  --led-alarm: #9A2E1C;
  --f-about: #7C6838;
  --f-music: #55606C;
  --f-film: #7A3B26;
  --f-live: #6E6F62;
  --f-sound: #62786B;
  --bevel-dark: #9E9881;
  --bevel-light: #EEEADB;
}

:root[data-theme="glare"] {
  --ground: #9AA5B2;
  --window: #C9D1DA;
  --paper: #E6EBF0;
  --button: #D3DAE2;
  --row-hover: #B8C2CD;
  --row-current: #D8BFC1;
  --ink: #0C0809;
  --ink-2: #1D151A;
  --ink-3: #30323A;
  --ink-4: #3D4048;
  --rust: #7E0A11;
  --rust-btn: #B0262A;
  --led-dead: #525B66;
  --led-alarm: #C0121A;
  --f-about: #616B78;
  --f-music: #393C45;
  --f-film: #7E0A11;
  --f-live: #7E8B9A;
  --f-sound: #B0BECE;
  --bevel-dark: #8E99A6;
  --bevel-light: #F5F7FA;
}