/* COLLECTORATE — per-album theme for the album exhibit pages.
 *
 * Same role larastelle.css plays: site.css + sub-pages.css + showcase.css
 * supply the structure, and this only re-skins it per record.
 *
 * The rule that matters here: the art is UNDER everything, and several parts
 * of the template blend against it rather than sit on top of it —
 *   site.css           #title-stroke   mix-blend-mode: luminosity
 *   showcase.css       .links .active  mix-blend-mode: hard-light
 *   accessibility.css  #dark           an animated radial gradient
 * so none of those may be given an opaque plate. Text that lands on the art
 * earns its legibility from --stroke (a shadow, or the title's stroke halo),
 * never from a filled pill. Only the reading panel is backed, and translucently
 * at that, exactly as the template already does it.
 *
 * Each record sets the token block; nothing below it is per-album.
 */

/* ------------------------------------------------------------- tokens -- */

/* --bg1/--bg2 feed site.css's body radial-gradient, so the page keeps a lit
 * ground for the art and the blends to work against instead of a flat fill.
 * --art-size is a fixed pixel size, the way larastelle pins its bed at
 * 3000x3000: the viewport crops into the art, it never scales it down into a
 * hero. Square records stay square. */

body.collectorate {
  --bg1: oklch(0.19 0.02 30);
  --bg2: oklch(0.28 0.06 40);
  --stroke: #1a0d08;
  --art: url('../img/collectorate-square.webp');
  --art-size: 1600px 1600px;
  --panel: #17101acc;
  --panel-line: #3a2a3e;
  --veil: #0a070c8c;
  --ink: #f4f0ea;
  --ink-soft: #c6b5aa;
  --accent: #ff7a3d;
  --accent-2: #ff3d5a;
  --rail: #ffffff26;
}

body.promise {
  --bg1: oklch(0.93 0.01 320);
  --bg2: oklch(0.97 0.03 330);
  --stroke: #f4eef6;
  --art: url('../img/promise-wide.webp');
  --art-size: 1920px 1072px;
  --panel: #fdfafdd9;
  --panel-line: #d8c9dd;
  --veil: #f6f3f76b;
  --ink: #1a1420;
  --ink-soft: #5d5366;
  --accent: #c8103f;
  --accent-2: #7b2ff7;
  --rail: #28143226;
}

body.nanofilament {
  --bg1: oklch(0.17 0.02 300);
  --bg2: oklch(0.25 0.04 300);
  --stroke: #0d0b12;
  --art: url('../img/nanofilament-square.webp');
  --art-size: 1600px 1600px;
  --panel: #16141ecc;
  --panel-line: #332e40;
  --veil: #0b09108c;
  --ink: #ece7f0;
  --ink-soft: #b0a6bc;
  --accent: #d8a7c4;
  --accent-2: #8fb8d8;
  --rail: #ffffff26;
}

body.bitflip {
  --bg1: oklch(0.94 0.02 70);
  --bg2: oklch(0.97 0.04 60);
  --stroke: #fbf3ea;
  --art: url('../img/bitflip-square.webp');
  --art-size: 1024px 1024px;
  --panel: #fefaf5d9;
  --panel-line: #e3cfc4;
  --veil: #f7ece06b;
  --ink: #2b1c26;
  --ink-soft: #6d5764;
  --accent: #e8317f;
  --accent-2: #3f5ec4;
  --rail: #2b1c2626;
}

body.lockthemirror {
  --bg1: oklch(0.16 0.02 250);
  --bg2: oklch(0.24 0.04 240);
  --stroke: #0a0d14;
  --art: url('../img/lockthemirror-wide.webp');
  --art-size: 1920px 1080px;
  --panel: #101620cc;
  --panel-line: #2b3646;
  --veil: #070a108c;
  --ink: #eaf0f4;
  --ink-soft: #a4b4c0;
  --accent: #7fd4c8;
  --accent-2: #e0a6c4;
  --rail: #ffffff26;
}

body.album {
  --serif: ui-serif, Georgia, "Iowan Old Style", "Times New Roman", serif;
  --mono: ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, monospace;
}

/* ---------------------------------------------------------------- bed -- */

/* No background declaration on body: site.css's radial-gradient stays, tinted
   by --bg1/--bg2 above, so there is always something lit underneath. */
body.album #bg {
  background-image: var(--art);
  background-size: var(--art-size);
  background-position: 50% 0;
  background-repeat: no-repeat;
}

body.album #showcase { background-color: var(--veil); }

/* --------------------------------------------------------------- head -- */

/* The title's legibility comes from the template's own stroke halo, which is
   luminosity-blended against the art. Only the width and the colour token
   change here; the blend is left alone. */
body.album #title,
body.album #title-stroke {
  font-family: var(--serif);
  font-size: clamp(1.7rem, 4.4vw, 3.1rem);
  font-weight: normal;
  text-align: center;
  margin: 0.15em 0 0;
  line-height: 1.15;
  -webkit-text-stroke-width: 11px;
}
body.album #title { color: var(--ink); }

/* An album's own line. Small — a caption the record makes about itself, not a
   headline — and shadowed rather than plated so the art still reads through. */
body.album .album-line {
  margin: calc(clamp(1.7rem, 4.4vw, 3.1rem) * 1.15 + 0.6rem) auto 0;
  max-width: 34rem;
  padding: 0 1rem;
  font-family: var(--mono);
  font-size: 0.78rem;
  line-height: 1.5;
  text-align: center;
  color: var(--ink);
  text-shadow: 0 1px 2px var(--stroke), 0 0 8px var(--stroke);
  /* #title-stack sets white-space: nowrap for the title; a sentence-length
     line has to be allowed to wrap out of that. */
  white-space: normal;
}

/* These sit directly on the art. Shadow, not a pill. */
body.album #bg > .pair h2 {
  font-family: inherit;
  font-size: 1.15rem;
  color: var(--ink);
  text-shadow: 0 1px 2px var(--stroke), 0 0 10px var(--stroke);
}

/* The album-to-album jump, on the far edges of the header space. */
.record-nav {
  position: absolute;
  top: calc(0.25rem + env(safe-area-inset-top, 0px));
  z-index: 6;
  display: flex;
  align-items: center;
  gap: 0.4rem;
  padding: 0.45rem 0.7rem;
  color: var(--ink);
  text-decoration: none;
  font-family: var(--mono);
  font-size: 0.78rem;
  letter-spacing: 0.06em;
  text-shadow: 0 1px 2px var(--stroke), 0 0 8px var(--stroke);
  opacity: 0.75;
  transition: opacity 0.15s;
}
.record-nav:hover { opacity: 1; }
.record-previous { left: 0.6rem; }
.record-next { right: 0.6rem; }
.record-nav .arrow { font-size: 1.15rem; line-height: 1; }
@media (max-width: 645px) {
  .record-nav .label {
    position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
    overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0;
  }
}

/* --------------------------------------------------- anchor bar strips -- */

/* The bar is sticky and must never move. It is NOT plated: showcase.css
   hard-light blends the active service button against whatever art is behind
   it, and a fill here would leave that blend with nothing to work on. */
body.album #chapters-control .tabs {
  gap: 0.1rem;
  align-items: center;
  padding: 0.35rem 0;
}

body.album .strip {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 0.1rem;
}
body.album .strip + .strip::before {
  content: "";
  align-self: stretch;
  width: 1px;
  margin: 0.2rem 0.45rem;
  background: var(--ink-soft);
  opacity: 0.4;
}

body.album .strip-tag {
  font-family: var(--mono);
  font-size: 0.68rem;
  letter-spacing: 0.06em;
  color: var(--ink);
  opacity: 0.7;
  margin-right: 0.25rem;
  user-select: none;
  text-shadow: 0 1px 2px var(--stroke);
}

body.album .chip {
  min-width: 1.7rem;
  padding: 0.22rem 0.45rem;
  border: 1px solid transparent;
  border-radius: 4px;
  background: transparent;
  color: var(--ink);
  font-family: var(--mono);
  font-size: 0.8rem;
  cursor: pointer;
  text-shadow: 0 1px 2px var(--stroke), 0 0 6px var(--stroke);
  opacity: 0.72;
}
body.album .chip:hover { opacity: 1; }
body.album .chip.active {
  opacity: 1;
  border-color: var(--accent);
}

/* -------------------------------------------------------- story panels -- */

/* site.css gives .content the base navy panel, which larastelle happens to
   match. These records do not, so the column is re-skinned — translucently,
   the way the template already backs its reading panel, so the art still
   shows through it. */
body.album .story .content {
  background-color: transparent;
  border: 0;
  padding: 0;
}

body.album [role="document"],
body.album #footer {
  background-color: var(--panel);
  border: 2px solid var(--panel-line);
  border-radius: 5px;
  color: var(--ink);
}
body.album [role="document"] {
  border-bottom: none;
  border-bottom-left-radius: 0;
  border-bottom-right-radius: 0;
}
body.album #footer {
  border-top: none;
  border-top-left-radius: 0;
  border-top-right-radius: 0;
}

body.album .story h3 {
  font-family: var(--serif);
  font-size: 1.4rem;
  color: var(--ink);
  text-shadow: none;
}
body.album .content .float {
  background: var(--panel);
  border-bottom: 2px solid var(--panel-line);
  filter: none;
}
body.album .story .drop { filter: none; }

body.album .track-lyrics { margin: 0 0 2.5rem; }
body.album .track-lyrics > h4 {
  margin: 0 0 0.6rem;
  font-family: var(--mono);
  font-size: 1rem;
  font-weight: normal;
  color: var(--ink);
}
body.album .track-lyrics > h4 .n {
  color: var(--ink-soft);
  margin-right: 0.5rem;
}

body.album .part {
  scroll-margin-top: 13rem;
  padding: 0.7rem 0 0.7rem 0.9rem;
  border-left: 2px solid var(--panel-line);
  white-space: pre-line;
  line-height: 1.6;
  transition: border-color 0.3s ease;
}
body.album .part + .part { margin-top: 0.35rem; }
body.album .part.in-view { border-left-color: var(--accent); }

/* A panel whose prose is not written yet. The placeholder lives in CSS, so
   pasting the text in later means deleting nothing. */
body.album .part:empty { min-height: 2.5rem; }
body.album .part:empty::before {
  content: "\2026";
  color: var(--ink-soft);
  opacity: 0.45;
}

/* Machine voice / transmission, the way larastelle fences a dream. */
body.album .part .cue {
  display: block;
  margin: 0.5rem -0.9rem 0.7rem;
  padding: 0.55rem 0.9rem;
  border-top: 1px solid var(--panel-line);
  border-bottom: 1px solid var(--panel-line);
  font-family: var(--mono);
  font-size: 0.86rem;
  color: var(--ink-soft);
}

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

body.album .player { flex-direction: column; }

body.album #youtube {
  width: 100%;
  max-width: 500px;
  margin: 20px;
  margin-left: 80px;
  padding: 0.9rem;
  border-radius: 5px;
  background-color: var(--panel);
  border: 2px solid var(--panel-line);
}

body.album #yt_screen {
  position: relative;
  width: 100%;
  aspect-ratio: 16 / 9;
  overflow: hidden;
  border-radius: 4px;
  background: #000;
}
body.album #yt_player,
body.album #yt_player iframe {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  border: 0;
}

/* Quality follows the player's pixel size and setPlaybackQuality has been a
   no-op since 2019, so we cannot set it — only say so. */
body.album .quality-note {
  display: none;
  margin: 0.5rem 0 0;
  font-family: var(--mono);
  font-size: 0.72rem;
  color: var(--ink-soft);
  text-align: center;
}
body.album.low-quality .quality-note { display: block; }

/* ------------------------------------------------------------ playlist -- */

body.album #youtube-chapters {
  background-color: transparent;
  list-style: none;
  margin: 0.8rem 0 0;
  padding: 0;
  font-size: 0.95rem;
}

body.album #youtube-chapters .track { padding: 0.1rem 0; }

body.album #youtube-chapters .track-go {
  display: grid;
  grid-template-columns: 1.9rem 1fr auto;
  align-items: baseline;
  gap: 0.5rem;
  width: 100%;
  padding: 0.32rem 0.3rem 0.24rem;
  border: 0;
  border-radius: 4px;
  background: transparent;
  color: var(--ink);
  font: inherit;
  text-align: left;
  cursor: pointer;
}
body.album #youtube-chapters .track-go:hover { background: var(--rail); }
body.album #youtube-chapters .n {
  font-family: var(--mono);
  font-size: 0.8rem;
  color: var(--ink-soft);
}
body.album #youtube-chapters .ft {
  display: block;
  font-size: 0.76rem;
  color: var(--ink-soft);
}
body.album #youtube-chapters .d {
  font-family: var(--mono);
  font-size: 0.78rem;
  color: var(--ink-soft);
}
body.album #youtube-chapters .track.active .n,
body.album #youtube-chapters .track.active .t { color: var(--accent); }

/* One slider per track over the single underlying video, so the column reads
   as one continuous bar cut at the boundaries. */
body.album .track-bar {
  position: relative;
  height: 0.36rem;
  margin: 0 0.3rem 0.1rem;
  border-radius: 999px;
  background: var(--rail);
  cursor: pointer;
  touch-action: none;
  overflow: hidden;
}
body.album .track-bar:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
}
body.album .track-fill {
  position: absolute;
  inset: 0;
  border-radius: 999px;
  background: linear-gradient(90deg, var(--accent-2), var(--accent));
  transform: scaleX(0);
  transform-origin: left center;
  will-change: transform;
}

body.album .playlist-head {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  padding: 0 0.3rem 0.4rem;
  font-family: var(--mono);
  font-size: 0.7rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--ink-soft);
}

/* Explicit uploads are age-restricted, and age-restricted video cannot play in
   an embed at all (the API reports it as 101/150). Rather than leave YouTube's
   error card in the column, the player gives way to a hand-off: the track list
   stays and each row deep-links to the right second. */
body.album .embed-note {
  display: none;
  margin: 0 0 0.6rem;
  font-family: var(--mono);
  font-size: 0.78rem;
  line-height: 1.5;
  color: var(--ink-soft);
}
body.album .embed-note a { color: var(--accent); }
body.album.embed-blocked .embed-note { display: block; }
body.album.embed-blocked #yt_screen,
body.album.embed-blocked .quality-note,
body.album.embed-blocked .track-bar,
body.album.embed-blocked .playlist-head .elapsed { display: none; }
body.album.embed-blocked .track-go::after {
  content: "\2197";
  margin-left: 0.4rem;
  color: var(--ink-soft);
}

/* No published render yet. */
body.album.no-video #yt_screen,
body.album.no-video #youtube-chapters .track-bar,
body.album.no-video .playlist-head .elapsed { display: none; }
body.album .no-video-note {
  display: none;
  margin: 0;
  padding: 0.8rem;
  font-family: var(--mono);
  font-size: 0.78rem;
  color: var(--ink-soft);
  text-align: center;
}
body.album.no-video .no-video-note { display: block; }

/* -------------------------------------------------------------- mobile -- */

@media (max-width: 645px) {
  body.album #youtube {
    margin: 20px;
    max-width: none;
    width: auto;
  }
  body.album .music-story .player[data-source="youtube"] {
    height: auto;
    max-height: 60vh;
    overflow-y: auto;
  }
  body.album .part { scroll-margin-top: 16rem; }
  body.album #title,
  body.album #title-stroke { -webkit-text-stroke-width: 7px; }
}