/* =========================================================================
   A Million Scattered Pieces — Listening Room 001
   Prototype styles.

   Structure of this file:
     1. tokens
     2. base + typography (shared by all four prototypes)
     3. page furniture (masthead, prototype headings, dev note)
     4. shared audio primitives (.wave, .marks, .mark, .ts, transport)
     5. variant overrides — .v1 .v2 .v3 .v4
     6. responsive + reduced motion

   Everything above section 5 is identical across the four prototypes.
   ========================================================================= */

/* ---------- 1. tokens ---------------------------------------------------- */
@font-face {
  font-family: "Libre Baskerville";
  src: url("/assets/fonts/libre-baskerville-var.woff2") format("woff2");
  font-style: normal;
  font-weight: 400 700;
  font-display: swap;
}
@font-face {
  font-family: "Libre Baskerville";
  src: url("/assets/fonts/libre-baskerville-italic-var.woff2") format("woff2");
  font-style: italic;
  font-weight: 400 700;
  font-display: swap;
}
@font-face {
  font-family: "Montserrat";
  src: url("/assets/fonts/montserrat-var.woff2") format("woff2");
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
}
@font-face {
  font-family: "IBM Plex Mono";
  src: url("/assets/fonts/ibm-plex-mono-400.woff2") format("woff2");
  font-style: normal;
  font-weight: 400;
  font-display: swap;
}
@font-face {
  font-family: "IBM Plex Mono";
  src: url("/assets/fonts/ibm-plex-mono-600.woff2") format("woff2");
  font-style: normal;
  font-weight: 600;
  font-display: swap;
}

:root {
  --paper:        #ECECE6;
  --paper-sunk:   #E3E3DB;   /* faint field, used only in 04 */
  --ink:          #000000;
  --ink-soft:     #5F615A;
  --rule:         #C6C7BE;
  --wave-off:     #B3B4AA;   /* unplayed */
  --wave-on:      #000000;   /* played */
  --mark:         #F2E04A;   /* lemon — editorial movement */
  --mark-deep:    #C9B300;

  --serif: "Libre Baskerville", Georgia, serif;
  --sans:  "Montserrat", ui-sans-serif, -apple-system, "Helvetica Neue", Arial, sans-serif;
  --mono:  "IBM Plex Mono", ui-monospace, SFMono-Regular, Consolas, monospace;

  --measure: 33em;
  --gap:     clamp(1rem, 5vw, 2rem);
}

/* ---------- 2. base + typography ---------------------------------------- */
* { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; }

body {
  margin: 0;
  padding: var(--gap) var(--gap) 5rem;
  background: var(--paper);
  color: var(--ink);
  font-family: var(--sans);
  font-size: 17px;
  line-height: 1.58;
  font-kerning: normal;
  text-rendering: optimizeLegibility;
}

main { max-width: var(--measure); margin: 0 auto; }

p { margin: 0 0 1.1em; }

.prose {
  max-width: 33em;
  font-family: var(--serif);
}
.prose--wide { max-width: 36em; }

h1, h2, h3 {
  font-family: var(--serif);
  font-weight: 600;
  line-height: 1.2;
  margin: 0;
}

.small { font-size: 0.8125rem; line-height: 1.5; color: var(--ink-soft); }

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

:where(button):focus-visible,
:where(a):focus-visible {
  outline: 2px solid var(--ink);
  outline-offset: 2px;
  background: var(--mark);
}

/* ---------- 3. page furniture ------------------------------------------- */
.masthead { margin: 0 0 3.5rem; }
.review-flag,
.room-label,
.derek-portrait figcaption {
  font-family: var(--mono);
  font-size: 0.6875rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}
.review-flag {
  font-family: var(--mono);
  font-size: 0.625rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  opacity: 0.62;
  margin: 0 0 1.5rem;
}
.room-label { margin: 0 0 0.55rem; color: var(--ink-soft); }
.masthead__grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(10rem, 15rem);
  gap: clamp(1.5rem, 7vw, 4rem);
  align-items: start;
}
.masthead h1 {
  font-size: clamp(1.8rem, 5vw, 3.1rem);
  font-weight: 600;
  letter-spacing: 0.005em;
}
.masthead__dek {
  max-width: 31rem;
  margin: 0.7rem 0 1.1rem;
  font-family: var(--serif);
  font-size: 1.05rem;
  font-style: italic;
}
.masthead .small { margin-top: 0.6rem; }
.derek-portrait { margin: 0; }
.derek-portrait img {
  display: block;
  width: 100%;
  height: auto;
}
.derek-portrait figcaption { margin-top: 0.5rem; }

.proto { margin: 0 0 5.5rem; }

.proto__head {
  display: flex;
  align-items: baseline;
  gap: 0.6em;
  margin: 0 0 1.4rem;
  padding-bottom: 0.5rem;
  border-bottom: 1px solid var(--rule);
}
.proto__num {
  font-family: var(--mono);
  font-variant-numeric: tabular-nums;
  color: var(--ink-soft);
}
.proto__name { font-family: var(--mono); font-size: 1rem; font-weight: 600; }

.proto__aim {
  margin: -0.7rem 0 1.8rem;
  font-size: 0.8125rem;
  color: var(--ink-soft);
  max-width: 30em;
}

.devnote { border-top: 1px solid var(--rule); padding-top: 1.4rem; }
.devnote h2 { font-size: 1rem; margin-bottom: 1rem; }
.devnote h3 { font-size: 0.875rem; margin: 1.6rem 0 0.4rem; }
.devnote p, .devnote li { font-size: 0.9375rem; }
.devnote ul { margin: 0 0 1em; padding-left: 1.1em; }
.devnote li { margin-bottom: 0.35em; }
.devnote code {
  font-family: var(--sans);
  font-size: 0.85em;
  background: var(--paper-sunk);
  padding: 0.05em 0.3em;
}

/* ---------- 4. shared audio primitives ---------------------------------- */

/* the sound block: waveform + marker layer, positioned together */
.sound { position: relative; margin: 2rem 0; }

.wave {
  position: relative;
  cursor: pointer;
  touch-action: manipulation;
}
.wave ::part(cursor) { opacity: 0.9; }

/* marker layer sits over the full width of the waveform; each mark is
   positioned at (timestamp / duration) x 100% */
.marks {
  position: absolute;
  left: 0; right: 0;
  height: 0;
  pointer-events: none;
}
.marks--above { top: 0; }
.marks--below { bottom: 0; }

.mark {
  position: absolute;
  pointer-events: auto;
  appearance: none;
  -webkit-appearance: none;
  background: none;
  border: 0;
  padding: 0.35rem 0.4rem 0.5rem;
  margin: 0;
  font: inherit;
  color: var(--ink);
  text-align: left;
  cursor: pointer;
  white-space: nowrap;
  /* --tx / --ty are set by audio.js: edge clamping and score-row staggering */
  transform: translate(var(--tx, -50%), var(--ty, 0));
}
.mark__tick {
  display: block;
  width: 1px;
  background: var(--ink);
  margin: 0 auto;
}
.mark__time {
  display: block;
  font-size: 0.6875rem;
  font-variant-numeric: tabular-nums;
  color: var(--ink-soft);
}
.mark__label {
  display: block;
  font-size: 0.75rem;
  font-style: italic;
  color: var(--ink-soft);
}
.mark.is-current .mark__label,
.mark.is-current .mark__time { color: var(--ink); }
.mark.is-current .mark__label { box-shadow: inset 0 -0.45em 0 var(--mark); }

/* prose timestamp — a real button, never a fake link */
.ts {
  appearance: none;
  -webkit-appearance: none;
  border: 0;
  background: none;
  padding: 0.25em 0.1em;
  margin: 0 -0.05em;
  font: inherit;
  font-variant-numeric: tabular-nums;
  color: var(--ink);
  cursor: pointer;
  box-shadow: inset 0 -1px 0 var(--mark-deep);
}
.ts:hover { box-shadow: inset 0 -0.3em 0 var(--mark); }
.ts.is-current { box-shadow: inset 0 -0.45em 0 var(--mark); }
.ts.is-playing { box-shadow: inset 0 -0.9em 0 var(--mark); }

/* transport + readouts */
.transport {
  appearance: none;
  -webkit-appearance: none;
  border: 0;
  background: none;
  padding: 0.55rem 0 0.55rem 0;
  font-family: var(--mono);
  font-size: 0.9375rem;
  color: var(--ink);
  cursor: pointer;
  box-shadow: inset 0 -1px 0 var(--ink);
}
.transport:hover { box-shadow: inset 0 -0.35em 0 var(--mark); }

.readout {
  font-family: var(--mono);
  font-size: 0.75rem;
  font-variant-numeric: tabular-nums;
  color: var(--ink-soft);
}

.playerbar,
.object__bar {
  display: grid;
  grid-template-columns: auto minmax(6rem, 1fr) auto;
  align-items: center;
  gap: 0.8rem;
  border-top: 1px solid var(--rule);
  margin-top: 0.35rem;
}

.seek {
  width: 100%;
  accent-color: var(--ink);
  cursor: pointer;
}

/* shown only if WaveSurfer cannot be loaded at all */
.fallback-note { font-size: 0.75rem; color: var(--ink-soft); margin: 0.5rem 0 0; }

/* =========================================================================
   5. variant overrides
   Only the rules below differ between the four prototypes.
   ========================================================================= */

/* ---- 01 — Sound as Footnote --------------------------------------------
   Writing dominant. Waveform is a quiet rule under the paragraph.
   Markers stay invisible until the reader activates a prose reference. */
.v1 .sound { margin: 1.6rem 0 0.5rem; }
.v1 .wave { opacity: 0.55; }
.v1 .wave:hover { opacity: 0.8; }
.v1 .mark {
  opacity: 0;
  padding-top: 0.15rem;
}
.v1 .mark.is-current { opacity: 1; }
.v1 .mark__tick { height: 10px; }
.v1 .mark__label { display: none; }
.v1 .mark__time { font-size: 0.625rem; }
.v1 .ts {
  font-size: 0.8125em;
  vertical-align: 0.35em;
  box-shadow: none;
  color: var(--ink-soft);
  border-bottom: 1px dotted var(--ink-soft);
  padding: 0.3em 0.05em 0;
}
.v1 .ts.is-current,
.v1 .ts.is-playing { color: var(--ink); border-bottom-color: var(--ink); }
.v1 .ts.is-playing { box-shadow: inset 0 -0.2em 0 var(--mark); }
.v1 .readout { display: block; margin-top: 0.4rem; }

/* ---- 02 — Annotated Score ----------------------------------------------
   The waveform is part of the composition: ticks, minute rule, phrases.
   Markers are buttons but never draggable or editable. */
.v2 .sound { margin: 2.4rem 0 3rem; }
.v2 .wave { border-bottom: 1px solid var(--rule); }
.v2 .marks--above { top: -0.5rem; }
.v2 .mark {
  --ty: -100%;
  display: flex;
  flex-direction: column-reverse;   /* tick nearest the wave */
  gap: 0.15rem;
}
.v2 .mark__tick { height: 12px; margin: 0 0 0 0; width: 1px; }
.v2 .mark:hover .mark__label { box-shadow: inset 0 -0.45em 0 var(--mark); }
.v2 .ruler {
  position: relative;
  height: 1.1rem;
  margin-top: 0.1rem;
}
.v2 .ruler span {
  position: absolute;
  top: 0;
  font-size: 0.6875rem;
  font-variant-numeric: tabular-nums;
  color: var(--ink-soft);
  transform: translateX(-50%);
}
.v2 .ruler span:first-child { transform: none; }
.v2 .ruler span:last-child { transform: translateX(-100%); }

/* ---- 03 — Sound Inside the Sentence ------------------------------------
   No waveform block in the flow. A 10px waveform hairline sits under the
   paragraph and only becomes visible while this track is sounding. */
.v3 .sound { margin: 0.4rem 0 0; }
.v3 .wave {
  opacity: 0;
  transition: opacity 220ms linear;
}
.v3.is-live .wave { opacity: 0.75; }
.v3 .ts {
  box-shadow: none;
  padding: 0.35em 0.25em;
  font-size: 0.9375em;
  border-bottom: 1px solid var(--rule);
}
.v3 .ts::before {
  content: "▶\FE0E";
  font-family: var(--sans);
  font-size: 0.62em;
  vertical-align: 0.12em;
  margin-right: 0.35em;
  color: var(--ink-soft);
}
.v3 .ts.is-playing::before { content: "❙❙"; letter-spacing: -0.12em; }
.v3 .ts.is-playing { box-shadow: inset 0 -0.5em 0 var(--mark); border-bottom-color: var(--ink); }
.v3 .readout { display: block; margin-top: 0.5rem; opacity: 0; }
.v3.is-live .readout { opacity: 1; }

/* ---- 04 — Listening Object ----------------------------------------------
   One piece given real room: title, context, sound, annotations, prose.
   Held together by a single vertical rule — not a card. */
.v4 .object {
  border-left: 1px solid var(--ink);
  padding-left: clamp(0.9rem, 4vw, 1.6rem);
}
.v4 .object__meta { margin: 0 0 0.35rem; }
.v4 .object__title {
  font-size: 1.375rem;
  line-height: 1.15;
  margin: 0 0 0.7rem;
  max-width: 14em;
}
.v4 .object__context { max-width: 30em; margin-bottom: 1.8rem; }
.v4 .object__context { font-family: var(--serif); }
.v4 .sound { margin: 1.2rem 0 0; background: linear-gradient(var(--paper-sunk), var(--paper-sunk)) no-repeat center / 100% 1px; }
.v4 .mark__label { display: none; }
.v4 .mark__time { display: none; }
.v4 .mark { padding: 0; opacity: 0.65; }
.v4 .mark__tick { height: 96px; background: var(--ink); opacity: 0.35; }
.v4 .mark.is-current { opacity: 1; }
.v4 .mark.is-current .mark__tick { opacity: 1; background: var(--mark-deep); }
.v4 .object__bar { margin-top: 0.2rem; }
.v4 .annots { list-style: none; margin: 1.1rem 0 2rem; padding: 0; }
.v4 .annots li { border-bottom: 1px solid var(--rule); }
.v4 .annots li:first-child { border-top: 1px solid var(--rule); }
.v4 .annot {
  display: flex;
  gap: 1rem;
  width: 100%;
  appearance: none;
  -webkit-appearance: none;
  border: 0;
  background: none;
  padding: 0.7rem 0.1rem;
  font: inherit;
  font-size: 0.9375rem;
  color: var(--ink);
  text-align: left;
  cursor: pointer;
}
.v4 .annot span:first-child {
  font-variant-numeric: tabular-nums;
  color: var(--ink-soft);
  min-width: 3.2em;
}
.v4 .annot span:last-child { font-style: italic; }
.v4 .annot:hover span:last-child,
.v4 .annot.is-current span:last-child { box-shadow: inset 0 -0.45em 0 var(--mark); }
.v4 .annot.is-current span:first-child { color: var(--ink); }

/* ---------- 6. responsive + reduced motion ------------------------------ */

/* Under ~560px the score labels would collide, so they drop to a stacked
   legend and the ticks alone stay on the waveform. */
@media (max-width: 560px) {
  .masthead__grid { grid-template-columns: 1fr; }
  .derek-portrait { width: min(72vw, 16rem); margin-left: auto; }
  .playerbar,
  .object__bar { grid-template-columns: auto 1fr; }
  .playerbar .readout,
  .object__bar .readout { grid-column: 2; }
  .v2 .mark__label { font-size: 0.6875rem; }
  .v2 .mark__time { font-size: 0.625rem; }
  .v4 .object__title { font-size: 1.1875rem; }
}

@media (prefers-reduced-motion: reduce) {
  .v3 .wave { transition: none; }
  * { scroll-behavior: auto; }
}

/* generous tap targets without visual weight */
@media (pointer: coarse) {
  .ts { padding: 0.45em 0.25em; }
  .mark { padding: 0.5rem 0.45rem 0.6rem; }
}


/* 04.64f — accurate public label for the supplied audio. Stated once, near the
   top, in the same mono register as the other metadata: this is a test file
   Derek provided for interface work, not a piece from the score. */
.audio-label {
  font-family: var(--mono);
  font-size: 0.6875rem;
  line-height: 1.6;
  letter-spacing: 0.06em;
  margin: 1.25rem 0 0;
  padding: 0.7rem 0.9rem;
  border: 1px solid currentColor;
  opacity: 0.86;
}