/* ============================================================================
   Calico Rogues — site stylesheet.
   Design system: docs/DESIGN-SYSTEM.md (Simon Liesinger monograph style,
   adapted for long-form reading). Bone canvas, graphite ink, hairline rules,
   EB Garamond voice, vermillion reserved for arrows and small marks.
   Flat throughout: no shadows, no rounded corners, weight ≤ 600 (prose bold only).
   ========================================================================== */

@font-face {
  font-family: 'EB Garamond';
  font-style: normal;
  font-weight: 400 700;
  font-display: swap;
  src: url('/assets/fonts/ebgaramond-var.woff2') format('woff2');
}
@font-face {
  font-family: 'EB Garamond';
  font-style: italic;
  font-weight: 400 700;
  font-display: swap;
  src: url('/assets/fonts/ebgaramond-italic-var.woff2') format('woff2');
}

:root {
  --bone: #f2f2f2;
  --graphite: #181818;
  --ink: #000000;
  --ash: #6e6e6e;
  --vermillion: #fc523b;

  --serif: 'EB Garamond', Garamond, Georgia, 'Times New Roman', serif;
  --sans: 'Helvetica Neue', Helvetica, Arial, sans-serif;
  --mono: ui-monospace, 'Cascadia Mono', Consolas, monospace;

  --rule-strong: 1px solid var(--graphite);
  --rule-muted: 1px solid var(--ash);
  --rule-faint: 1px solid color-mix(in srgb, var(--ash) 42%, var(--bone));

  --measure: 66ch;
  /* Chapter reading column: comfortable on laptops, uses the room on big
     desktops instead of leaving huge margins. One variable to taste-tune. */
  --measure-read: clamp(66ch, 62vw, 110ch);
  --prose-size: clamp(1.125rem, 1.05rem + 0.35vw, 1.3125rem);
  --pad-x: clamp(1.5rem, 5vw, 5rem);
  --band-y: clamp(4rem, 11vh, 9rem);
}

/* ---- Base ---------------------------------------------------------------- */

* { box-sizing: border-box; }

html { height: 100%; }

body {
  margin: 0;
  min-height: 100%;
  background: var(--bone);
  color: var(--graphite);
  font-family: var(--serif);
  font-size: 1.0625rem;
  line-height: 1.55;
  font-weight: 400;
  -webkit-font-smoothing: antialiased;
  display: flex;
  flex-direction: column;
}

main { flex: 1 0 auto; }

::selection { background: var(--graphite); color: var(--bone); }

:focus-visible { outline: 2px solid var(--vermillion); outline-offset: 2px; }

a { color: inherit; text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 0.16em; }

img { max-width: 100%; }

h1, h2, h3, h4, p { margin: 0; font-weight: 400; }

.arr { color: var(--vermillion); font-family: var(--sans); text-decoration: none; display: inline-block; }

.grow { flex: 1 1 auto; }

.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;
}

.draft-mark {
  font-family: var(--sans); font-size: 0.6875rem; letter-spacing: 0.1em;
  text-transform: uppercase; color: var(--vermillion); white-space: nowrap;
}
.pub-mark {
  font-family: var(--sans); font-size: 0.6875rem; letter-spacing: 0.1em;
  text-transform: uppercase; color: var(--ash); white-space: nowrap;
}

/* ---- Folio header ---------------------------------------------------------- */

.folio {
  display: flex; flex-wrap: wrap; align-items: baseline; gap: 0.75rem 2rem;
  padding: 1.125rem var(--pad-x);
  border-bottom: var(--rule-strong);
}

.brand { font-size: 1.375rem; text-decoration: none; letter-spacing: 0.01em; }

.folio-nav { display: flex; flex-wrap: wrap; align-items: baseline; gap: 0.5rem 1.375rem; margin-left: auto; }

.folio-nav a {
  font-family: var(--sans); font-size: 0.875rem; letter-spacing: 0.02em;
  text-decoration: none; padding-bottom: 2px; border-bottom: 1px solid transparent;
}
.folio-nav a:hover { border-bottom-color: var(--graphite); }
.folio-nav a[aria-current="page"] { border-bottom-color: var(--graphite); }

.inline-form { display: inline; margin: 0; }

.linklike {
  background: none; border: none; padding: 0; cursor: pointer;
  font-family: var(--sans); font-size: 0.875rem; letter-spacing: 0.02em;
  color: var(--graphite); text-decoration: underline; text-underline-offset: 0.16em;
}
.linklike.small { font-size: 0.75rem; }

/* ---- Buttons & forms -------------------------------------------------------- */

.btn {
  display: inline-block;
  font-family: var(--sans); font-size: 1rem; letter-spacing: 0.02em;
  color: var(--graphite); background: transparent;
  border: var(--rule-strong); border-radius: 0;
  padding: 0.625rem 1.5625rem;
  text-decoration: none; cursor: pointer; white-space: nowrap;
  transition: background-color 120ms linear, color 120ms linear;
}
.btn:hover { background: var(--graphite); color: var(--bone); }
.btn:disabled { border-color: var(--ash); color: var(--ash); cursor: default; background: transparent; }

.btn.mini { font-size: 0.875rem; padding: 0.3125rem 0.75rem; }

.quiet-link { font-family: var(--sans); font-size: 0.875rem; letter-spacing: 0.02em; }
.quiet-link.small { font-size: 0.75rem; }

input[type="text"], input[type="password"], input[type="file"], textarea, select {
  font-family: var(--sans); font-size: 1rem; color: var(--graphite);
  background: #ffffff; border: var(--rule-strong); border-radius: 0;
  padding: 0.5rem 0.75rem; width: 100%;
}
textarea { resize: vertical; line-height: 1.5; }

.field { margin-bottom: 1.5rem; }
.field label {
  display: block; margin-bottom: 0.5rem;
  font-family: var(--sans); font-size: 0.875rem; letter-spacing: 0.02em;
}
.optional { color: var(--ash); font-size: 0.8125rem; }

.checkbox-field label { display: flex; gap: 0.625rem; align-items: baseline; font-size: 0.9375rem; }
.checkbox-field input { width: auto; }

.form-foot { margin-top: 2rem; display: flex; align-items: center; gap: 1.5rem; flex-wrap: wrap; }

.form-error, .form-ok {
  font-family: var(--sans); font-size: 0.9375rem;
  border-left: 2px solid var(--vermillion);
  padding: 0.375rem 0 0.375rem 1rem; margin: 0 0 1.5rem;
}
.form-ok { border-left-color: var(--graphite); }

.fine-note { font-family: var(--sans); font-size: 0.75rem; color: var(--ash); line-height: 1.5; }
.fine-note a { color: inherit; }

.row-form { display: flex; gap: 0.625rem; align-items: center; }
.row-form input[type="text"], .row-form input[type="file"] { flex: 1 1 auto; width: auto; }
.stack-form label { display: block; margin-bottom: 0.5rem; }

/* ---- Generic page column ------------------------------------------------------ */

.page-col {
  width: 100%; max-width: calc(var(--measure) + 2 * var(--pad-x));
  margin-inline: auto; padding: 3.75rem var(--pad-x) 7.5rem;
}
.page-col.narrow { max-width: calc(30rem + 2 * var(--pad-x)); }
.page-col.wide { max-width: 75rem; }

.page-title {
  font-size: clamp(1.9rem, 1.5rem + 2vw, 2.375rem);
  line-height: 1; letter-spacing: 0.01em; margin-bottom: 2rem;
  text-wrap: balance;
}
.page-lead { max-width: 55ch; margin-bottom: 2rem; color: var(--graphite); }

.meta-date { font-family: var(--sans); font-size: 0.75rem; color: var(--ash); font-variant-numeric: tabular-nums; letter-spacing: 0.02em; }

.error-message { margin-bottom: 2rem; font-size: 1.1875rem; }

/* ---- Home ---------------------------------------------------------------------- */

.band { padding: var(--band-y) var(--pad-x); }
.band + .band { border-top: var(--rule-strong); }

.opening {
  display: grid; grid-template-columns: minmax(0, 1.05fr) minmax(0, 0.95fr);
  gap: 2.5rem; align-items: center;
  padding-top: calc(var(--band-y) * 0.8);
}

.statement {
  font-size: clamp(3rem, 2rem + 6vw, 4.75rem);
  line-height: 0.9; letter-spacing: 0.01em;
  margin-bottom: 1.25rem; text-wrap: balance;
}

.byline { display: flex; align-items: center; gap: 0.875rem; margin-bottom: 2.25rem; }
.byline-pfp { width: 3rem; height: 3rem; object-fit: cover; border: var(--rule-strong); flex-shrink: 0; }
.byline-name { font-size: 1.1875rem; font-style: italic; line-height: 1.2; }
.byline-handle { font-family: var(--sans); font-size: 0.75rem; letter-spacing: 0.08em; color: var(--ash); margin-top: 2px; }

.intro { max-width: none; }
.intro p {
  font-size: clamp(1.125rem, 1rem + 0.5vw, 1.375rem); line-height: 1.45; margin-bottom: 1em;
  text-align: justify; hyphens: auto;
}
.intro p:last-child { margin-bottom: 0; }
.intro .fine-note { text-align: left; }

.cta-row { display: flex; align-items: center; gap: 1.75rem; margin-top: 2.5rem; flex-wrap: wrap; }

.opening-art { display: flex; justify-content: center; }
.wire-art { width: 100%; max-width: 27rem; color: var(--vermillion); }
.cr-title-art {
  display: block; width: 100%; max-width: var(--home-art-max, 34rem);
  border: 2px solid var(--graphite);
}

.cols-band { display: grid; grid-template-columns: repeat(3, 1fr); gap: 0; padding-inline: 0; }
.cols-band .col { padding: 0.5rem var(--pad-x) 0.75rem calc(var(--pad-x) * 0.6); }
.cols-band .col + .col { border-left: var(--rule-muted); }

.col-label {
  font-family: var(--sans); font-size: 0.75rem; font-weight: 400;
  letter-spacing: 0.14em; text-transform: uppercase; color: var(--ash);
  margin-bottom: 1.75rem;
}

.meta-list { list-style: none; margin: 0; padding: 0; }
.meta-list li {
  display: flex; align-items: baseline; justify-content: space-between; gap: 1rem;
  font-family: var(--sans); font-size: 0.875rem; letter-spacing: 0.01em;
  padding: 0.4375rem 0;
}
.meta-list a { text-decoration: none; }
.meta-list a:hover { text-decoration: underline; }
.meta-list .meta-date { flex-shrink: 0; }

.prologue-band { display: grid; grid-template-columns: minmax(7rem, 10rem) minmax(0, 1fr); gap: 2.5rem; }

.prologue-label {
  font-family: var(--sans); font-size: 0.75rem; letter-spacing: 0.14em;
  text-transform: uppercase; color: var(--ash); padding-top: 0.5rem;
}
.prologue-copy p, .about-copy p {
  font-size: clamp(1.1875rem, 1.05rem + 0.6vw, 1.5rem);
  line-height: 1.4; max-width: 46ch; margin-bottom: 1em;
}
.prologue-copy p:last-child, .about-copy p:last-child { margin-bottom: 0; }

/* ---- About / legal --------------------------------------------------------------- */

.about-band { display: grid; grid-template-columns: minmax(6rem, 8rem) minmax(0, 1fr); gap: 2rem; padding: 2.5rem 0; }
.about-band + .about-band { border-top: var(--rule-faint); }
.about-copy .meta-list { margin-top: 1rem; max-width: 30rem; }

/* Editable page bodies (about, privacy, terms): quiet reading prose, left
   aligned, sharing the chapter image rules above. */
.page-body { font-size: 1.125rem; line-height: 1.6; }
.page-body p { margin: 0 0 1em; }
.page-body strong { font-weight: 600; }
.page-body h2 { font-size: 1.4375rem; line-height: 1.1; margin: 2.5rem 0 1rem; }
.page-body h3 { font-size: 1.1875rem; line-height: 1.2; margin: 2rem 0 0.75rem; }
.page-body ul, .page-body ol { margin: 0 0 1em; padding-left: 1.375rem; }
.page-body li { margin-bottom: 0.375em; }
.page-body li[data-list="bullet"] { list-style-type: disc; }
.page-body blockquote { margin: 1.5em 0; padding-left: 1.5625rem; border-left: var(--rule-strong); }
.page-body .ql-size-small { font-size: 0.85em; }
.page-body .ql-size-large { font-size: 1.3em; }
.page-body .ql-size-huge { font-size: 1.65em; }
.page-body .ql-font-sans { font-family: var(--sans); font-size: 0.9em; }
.page-body .ql-font-mono { font-family: var(--mono); font-size: 0.9em; }

/* ---- Table of contents page --------------------------------------------------------- */

.toc-band { margin-top: 3rem; padding-top: 2rem; border-top: var(--rule-strong); }
.toc-act-heading { font-size: 1.8125rem; line-height: 1; margin-bottom: 2rem; }
.toc-arc-heading {
  font-family: var(--sans); font-size: 0.75rem; font-weight: 400; letter-spacing: 0.14em;
  text-transform: uppercase; color: var(--ash); margin: 2rem 0 0.75rem;
}
.toc-page-list { list-style: none; margin: 0; padding: 0; }
.toc-page-list li {
  display: flex; align-items: baseline; gap: 0.875rem;
  padding: 0.5625rem 0; border-bottom: var(--rule-faint);
}
.toc-page-list li a { font-size: 1.1875rem; text-decoration: none; }
.toc-page-list li a:hover { text-decoration: underline; }
.toc-page-list .meta-date { margin-left: auto; flex-shrink: 0; }
.toc-ch-title { font-size: 1.0625rem; color: var(--ash); }

/* ---- Chapter reading layout ------------------------------------------------------------ */

.chapter-layout { display: grid; grid-template-columns: 17rem minmax(0, 1fr); flex: 1 0 auto; }

.toc-side-desktop {
  border-right: var(--rule-muted);
  padding: 2.5rem 1.875rem 2.5rem var(--pad-x);
  position: sticky; top: 0; max-height: 100vh; overflow-y: auto;
  scrollbar-width: thin;
}
.toc-side-title { margin-bottom: 1.75rem; }
.toc-side-title a { font-family: var(--sans); font-size: 0.75rem; letter-spacing: 0.14em; text-transform: uppercase; color: var(--ash); text-decoration: none; }
.toc-side-title a:hover { color: var(--graphite); }

.toc-act { margin-bottom: 1.75rem; }
.toc-act-title { font-family: var(--sans); font-size: 0.75rem; font-weight: 400; letter-spacing: 0.14em; text-transform: uppercase; margin-bottom: 0.625rem; }
.toc-arc-title { font-family: var(--sans); font-size: 0.6875rem; letter-spacing: 0.12em; text-transform: uppercase; color: var(--ash); margin: 0.875rem 0 0.375rem; }
.toc-chapters { list-style: none; margin: 0; padding: 0; }
.toc-chapters li { padding: 0.21875rem 0; }
.toc-chapters a { font-size: 1.0625rem; line-height: 1.4; text-decoration: none; }
.toc-chapters a:hover { text-decoration: underline; }
/* The current chapter gets a vermillion arrow hanging in the gutter. */
.toc-chapters li.current { position: relative; }
.toc-chapters li.current::before {
  content: '→'; position: absolute; left: -1.3em;
  color: var(--vermillion); font-family: var(--sans);
}
.toc-chapters li.current a { text-decoration: underline; text-underline-offset: 0.2em; }

.toc-side-mobile { display: none; }

.chapter-main { padding: 3.25rem var(--pad-x) 7.5rem; min-width: 0; }

.crumb {
  font-family: var(--sans); font-size: 0.75rem; letter-spacing: 0.08em;
  text-transform: uppercase; color: var(--ash);
  max-width: var(--measure); margin: 0 auto 1.25rem;
  display: flex; gap: 0.875rem; flex-wrap: wrap; align-items: baseline;
}
.crumb-edit { color: var(--ash); text-transform: none; letter-spacing: 0.02em; }

.prose { max-width: var(--measure-read); margin-inline: auto; }

/* Admin-only strip above the header (draft notice, edit link). */
.chapter-tools {
  font-family: var(--sans); font-size: 0.75rem; letter-spacing: 0.08em;
  text-transform: uppercase; color: var(--ash);
  display: flex; gap: 0.875rem; justify-content: center; align-items: baseline;
  margin-bottom: 1.5rem;
}

/* Centered chapter header, mirroring the doc: "Act 1 - Arc 1 - Chapter 3"
   (or a kicker + "Session 12" for the campaign diaries), then the chapter's
   own title beneath. */
.chapter-head { text-align: center; margin-bottom: 2.75rem; }
.chapter-kicker {
  font-family: var(--sans); font-size: 0.75rem; letter-spacing: 0.12em;
  text-transform: uppercase; color: var(--ash); margin-bottom: 1rem;
}
.chapter-heading {
  font-size: clamp(1.75rem, 1.4rem + 2vw, 2.375rem);
  line-height: 1; letter-spacing: 0.01em; text-wrap: balance;
}
.chapter-subtitle { font-size: 1.5rem; line-height: 1.2; margin-top: 0.875rem; text-wrap: balance; }

.chapter-body { font-size: var(--prose-size); line-height: 1.62; }
.chapter-body p { margin: 0 0 1em; text-align: justify; hyphens: auto; }
.chapter-body strong { font-weight: 600; }
.chapter-body h2 { font-size: 1.5em; line-height: 1.1; margin: 1.75em 0 0.9em; }
.chapter-body h3 { font-size: 1.2em; line-height: 1.2; margin: 1.5em 0 0.75em; }
.chapter-body blockquote { margin: 1.5em 0; padding-left: 1.5625rem; border-left: var(--rule-strong); }

/* Images: plain images sit centered on their own line; images aligned in the
   editor (BlotFormatter2 wrappers) float with the text or center at their
   resized width. */
.chapter-body img, .page-body img { max-width: 100%; height: auto; }
.chapter-body p > img, .page-body p > img { display: block; margin: 1.875rem auto; }
.chapter-body [class^="ql-image-align-"] > img, .page-body [class^="ql-image-align-"] > img { display: block; margin: 0; }
.chapter-body .ql-image-align-left, .page-body .ql-image-align-left {
  float: left; width: fit-content; max-width: min(55%, 26rem); margin: 0.375rem 1.75rem 0.75rem 0;
}
.chapter-body .ql-image-align-right, .page-body .ql-image-align-right {
  float: right; width: fit-content; max-width: min(55%, 26rem); margin: 0.375rem 0 0.75rem 1.75rem;
}
.chapter-body .ql-image-align-center, .page-body .ql-image-align-center {
  display: block; width: fit-content; max-width: 100%; margin: 1.875rem auto;
}
.chapter-body::after, .page-body::after { content: ''; display: block; clear: both; }
.chapter-body ul, .chapter-body ol { margin: 0 0 1em; padding-left: 1.5em; }
.chapter-body li[data-list="bullet"] { list-style-type: disc; }
.chapter-body .ql-align-center { text-align: center; }
.chapter-body .ql-align-right { text-align: right; }
.chapter-body .ql-align-justify { text-align: justify; hyphens: auto; }
.chapter-body .ql-size-small { font-size: 0.85em; }
.chapter-body .ql-size-large { font-size: 1.3em; }
.chapter-body .ql-size-huge { font-size: 1.65em; }
.chapter-body .ql-font-sans { font-family: var(--sans); font-size: 0.85em; }
.chapter-body .ql-font-mono { font-family: var(--mono); font-size: 0.85em; }

.pager {
  max-width: var(--measure-read); margin: 4rem auto 0;
  display: flex; justify-content: space-between; gap: 0.875rem;
}
.pager .btn { max-width: 48%; overflow: hidden; text-overflow: ellipsis; }

/* ---- Comments ------------------------------------------------------------------------ */

.comments { max-width: var(--measure-read); margin: 6rem auto 0; border-top: var(--rule-strong); padding-top: 2.5rem; }

.comments-title { font-size: 1.4375rem; line-height: 1.1; margin-bottom: 2rem; }

.comment-list { list-style: none; margin: 0 0 3rem; padding: 0; }
.comment { display: flex; gap: 1rem; padding: 1.5625rem 0; border-bottom: var(--rule-faint); }
.comment-empty { font-family: var(--sans); font-size: 0.875rem; color: var(--ash); padding: 1rem 0 2rem; }

.comment-pfp {
  width: 2.5rem; height: 2.5rem; flex-shrink: 0; object-fit: cover;
  border: var(--rule-muted); background: #ffffff;
}
.comment-pfp-mono {
  display: inline-flex; align-items: center; justify-content: center;
  font-family: var(--sans); font-size: 1rem; color: var(--ash);
}

.comment-main { min-width: 0; flex: 1; }
.comment-meta { display: flex; align-items: baseline; gap: 0.75rem; flex-wrap: wrap; margin-bottom: 0.375rem; }
.comment-name { font-family: var(--sans); font-size: 0.875rem; letter-spacing: 0.02em; }
.comment-guest { font-family: var(--sans); font-size: 0.6875rem; letter-spacing: 0.1em; text-transform: uppercase; color: var(--ash); }
.comment-body { white-space: pre-line; overflow-wrap: break-word; font-size: 1.0625rem; line-height: 1.55; }
.comment-body.clamp { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }

.comment-as { font-family: var(--sans); font-size: 0.875rem; margin-bottom: 1rem; }
.comment-form-foot { display: flex; align-items: flex-start; gap: 1.5rem; flex-wrap: wrap; }
.comment-form-foot .fine-note { max-width: 34rem; }

.hp { position: absolute; left: -5000px; width: 1px; height: 1px; overflow: hidden; }

/* ---- Audio section player ------------------------------------------------------------- */

.audio-section { margin: 2.5rem 0; }

.cr-player { --crpy: 1.5625rem; --crpx: 1.875rem; border: var(--rule-strong); padding: var(--crpy) var(--crpx); }

.cr-head { display: flex; align-items: baseline; gap: 1rem; flex-wrap: wrap; margin-bottom: 1.25rem; }
.cr-title { font-family: var(--serif); font-size: 1.25rem; line-height: 1.2; }
.cr-artist { font-family: var(--sans); font-size: 0.75rem; letter-spacing: 0.12em; text-transform: uppercase; color: var(--ash); }
/* Admin-assigned identity color: the header bar fills the top of the box. */
.cr-head.colored {
  margin: calc(-1 * var(--crpy)) calc(-1 * var(--crpx)) 1.25rem;
  padding: 0.75rem var(--crpx);
}
.cr-head.colored .cr-artist { color: inherit; opacity: 0.72; }

.cr-lines { min-height: 3.6em; font-size: 1.125em; line-height: 1.5; font-style: italic; margin-bottom: 1.25rem; }
.cr-line { display: inline; }
.cr-line.is-new { animation: cr-fade 260ms ease-out; }
.cr-placeholder { color: var(--ash); font-style: italic; }
.cr-cursor {
  display: inline-block; width: 2px; height: 1em; background: var(--vermillion);
  margin-left: 4px; vertical-align: -0.12em;
  animation: cr-blink 1.1s steps(2, start) infinite;
}
.cr-cursor[hidden] { display: none; }
@keyframes cr-blink { 50% { opacity: 0; } }
@keyframes cr-fade { from { opacity: 0; } to { opacity: 1; } }

.cr-controls { display: flex; align-items: center; gap: 1rem; }

.cr-play {
  width: 2.75rem; height: 2.75rem; flex-shrink: 0;
  display: inline-flex; align-items: center; justify-content: center;
  background: transparent; border: var(--rule-strong); border-radius: 0;
  color: var(--graphite); cursor: pointer;
  transition: background-color 120ms linear, color 120ms linear;
}
.cr-play:hover { background: var(--graphite); color: var(--bone); }
.cr-play svg { width: 0.875rem; height: 0.875rem; display: block; }

.cr-time { font-family: var(--sans); font-size: 0.8125rem; font-variant-numeric: tabular-nums; color: var(--graphite); white-space: nowrap; }
.cr-time .cr-dur { color: var(--ash); }

.cr-track { position: relative; flex: 1; height: 2.25rem; cursor: pointer; touch-action: none; }
.cr-track::before {
  content: ''; position: absolute; left: 0; right: 0; top: 50%; height: 1px;
  background: var(--ash); transform: translateY(-0.5px);
}
.cr-elapsed { position: absolute; left: 0; top: 50%; height: 2px; transform: translateY(-1px); background: var(--graphite); pointer-events: none; }
.cr-caret {
  position: absolute; top: 50%; width: 2px; height: 0.875rem;
  transform: translate(-1px, -50%); background: var(--vermillion); pointer-events: none;
}

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

.foot { border-top: var(--rule-strong); margin-top: 8rem; flex-shrink: 0; }
body.reading .foot, body.admin .foot { margin-top: 0; }

.foot-nav { display: grid; grid-template-columns: repeat(2, 1fr); border-bottom: var(--rule-muted); }
.foot-nav a {
  font-size: 1.375rem; text-decoration: none;
  padding: 1.875rem var(--pad-x);
}
.foot-nav a + a { border-left: var(--rule-muted); }
.foot-nav a:hover { text-decoration: underline; }

.foot-meta {
  display: flex; justify-content: space-between; align-items: baseline; gap: 1rem 2.5rem;
  flex-wrap: wrap; padding: 1.25rem var(--pad-x) 2.5rem;
}
.foot-credit, .foot-fine { font-family: var(--sans); font-size: 0.75rem; letter-spacing: 0.02em; color: var(--graphite); }
.foot-fine { color: var(--ash); }
.foot-fine a, .foot-credit a { color: inherit; }

/* ---- Glories of Serulea page ------------------------------------------------------------- */

.ser-opening { grid-template-columns: minmax(0, 1fr); }
.ser-opening.has-art { grid-template-columns: minmax(0, 1.1fr) minmax(0, 0.9fr); }
.ser-opening .intro { max-width: 62ch; }

.ser-cards {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 23rem), 1fr));
  gap: 1.875rem; max-width: 74rem; margin-top: 1.75rem;
}
.ser-card {
  border: var(--rule-strong); padding: 2rem 2.125rem;
  text-decoration: none; display: block;
}
.ser-card:hover .ser-card-cta { text-decoration: underline; }
.ser-card-title { font-size: 1.5625rem; line-height: 1.1; margin-bottom: 0.625rem; }
.ser-card-cta { font-family: var(--sans); font-size: 0.9375rem; letter-spacing: 0.02em; margin-top: 1.5rem; }

/* Diary cards: text left, a 2x2 party collage on the right. */
.ser-diary { display: flex; flex-wrap: wrap; gap: 1.25rem 1.5rem; align-items: center; justify-content: space-between; }
.ser-card-main { min-width: 0; flex: 1 1 11rem; }
.ser-collage {
  display: grid; grid-template-columns: repeat(2, 1fr); gap: 3px;
  width: clamp(9rem, 46%, 13rem); flex-shrink: 0;
  border: var(--rule-muted); padding: 3px;
}
.ser-collage img {
  display: block; width: 100%; aspect-ratio: 1;
  object-fit: cover; object-position: 50% 12%;
}

.ser-vod-img {
  display: block; width: 100%; aspect-ratio: 16 / 9; object-fit: cover;
  border: var(--rule-muted); margin-bottom: 1.125rem;
}
.ser-vod-empty {
  display: flex; align-items: center; justify-content: center;
  color: var(--ash); font-size: 1.5rem; border-style: dashed;
}

.ser-gate { text-align: center; }
.ser-gate .gate-box { max-width: 34rem; margin: 1.75rem auto 0; }
.gate-lead { font-size: 1.1875rem; margin-bottom: 1.5rem; }
.ser-gate .field label { text-align: center; }
.ser-gate .row-form { justify-content: center; }
.ser-gate .row-form input[type="text"] { flex: 0 1 18rem; }
.ser-gate .form-error { margin-top: 1rem; margin-bottom: 0; text-align: left; display: inline-block; }

/* ---- Admin: dashboard ------------------------------------------------------------------ */

.admin-band { margin-top: 4rem; padding-top: 2rem; border-top: var(--rule-strong); }
.admin-band > h2 { font-size: 1.4375rem; line-height: 1.1; margin-bottom: 2rem; }

.adm-story { margin-bottom: 3rem; }
.adm-story-title {
  font-size: 1.1875rem; font-weight: 400; display: flex; gap: 0.75rem; align-items: baseline;
  border-bottom: var(--rule-muted); padding-bottom: 0.5rem; margin-bottom: 1rem;
}

.adm-act { margin-bottom: 2.5rem; }
.adm-arc { margin-left: 1.875rem; margin-top: 1rem; }
.adm-chapters { list-style: none; margin: 0.5rem 0 0 1.875rem; padding: 0; }

.adm-row { display: flex; align-items: center; gap: 0.625rem; padding: 0.5rem 0; border-bottom: var(--rule-faint); flex-wrap: wrap; }
.adm-act-row { border-bottom: var(--rule-muted); }
.adm-act-row input[type="text"] { font-family: var(--serif); font-size: 1.25rem; }

.adm-ch-title { font-size: 1.0625rem; text-decoration: none; }
.adm-ch-title:hover { text-decoration: underline; }

.adm-add { margin: 0.75rem 0 0 1.875rem; max-width: 26rem; }
.adm-act > .adm-add { margin-left: 1.875rem; }
section > .adm-add { margin-left: 0; margin-top: 1.5rem; }

.adm-comments { list-style: none; margin: 0; padding: 0; }

/* ---- Admin: editor page ------------------------------------------------------------------ */

.editor-chrome {
  display: flex; align-items: center; gap: 1rem; flex-wrap: wrap;
  padding: 0.75rem var(--pad-x);
  border-bottom: var(--rule-strong);
  background: var(--bone);
  position: sticky; top: 0; z-index: 20;
}
#chapter-title { font-family: var(--serif); font-size: 1.25rem; flex: 0 1 30rem; width: auto; }
.pub-toggle { font-family: var(--sans); font-size: 0.875rem; display: inline-flex; gap: 0.5rem; align-items: center; white-space: nowrap; }

.editor-wrap { max-width: 68rem; margin: 0 auto; padding: 1.5rem var(--pad-x) 0; width: 100%; }

.editor-page .ql-toolbar.ql-snow {
  border: var(--rule-strong); border-radius: 0;
  font-family: var(--sans);
  position: sticky; top: 3.8rem; z-index: 10; background: var(--bone);
}
.editor-page .ql-container.ql-snow { border: var(--rule-strong); border-top: none; border-radius: 0; font-family: var(--serif); }
.editor-page .ql-editor {
  min-height: 62vh;
  font-size: 1.1875rem; line-height: 1.62;
  padding: 2.5rem max(1.875rem, calc((100% - var(--measure-read)) / 2)) 5rem;
  background: var(--bone);
}
/* Prose is justified on the reading page; mirror that while writing. */
.editor-page .ql-editor p { text-align: justify; hyphens: auto; }
.editor-page .ql-editor .ql-font-sans { font-family: var(--sans); font-size: 0.85em; }
.editor-page .ql-editor .ql-font-mono { font-family: var(--mono); font-size: 0.85em; }
.editor-page .ql-editor blockquote { border-left: var(--rule-strong); padding-left: 1.5rem; }

.editor-page .ql-snow .ql-picker.ql-font .ql-picker-label::before, .editor-page .ql-snow .ql-picker.ql-font .ql-picker-item::before { content: 'Serif'; }
.editor-page .ql-snow .ql-picker.ql-font .ql-picker-label[data-value="sans"]::before, .editor-page .ql-snow .ql-picker.ql-font .ql-picker-item[data-value="sans"]::before { content: 'Sans'; }
.editor-page .ql-snow .ql-picker.ql-font .ql-picker-label[data-value="mono"]::before, .editor-page .ql-snow .ql-picker.ql-font .ql-picker-item[data-value="mono"]::before { content: 'Mono'; }

#insert-audio { font-family: var(--serif); font-size: 1.0625rem; line-height: 1; }

/* Audio embed as it appears inside the editor */
.ql-editor .audio-section, .editor-audio-embed {
  border: 1px dashed var(--ash); padding: 0.875rem 1.25rem; margin: 1.5rem 0;
  font-family: var(--sans); font-size: 0.8125rem; color: var(--graphite);
  display: flex; gap: 1rem; align-items: baseline; flex-wrap: wrap;
}
.editor-audio-embed .note { font-style: normal; }
.editor-audio-embed a { color: inherit; }

.editor-audio-list { max-width: 68rem; margin: 0 auto; padding: 2.5rem var(--pad-x) 6rem; width: 100%; }
.editor-audio-list h2 { font-size: 1.1875rem; margin-bottom: 1rem; }
.editor-audio-list .meta-list { max-width: 34rem; }

/* ---- Admin: cue editor ------------------------------------------------------------------- */

.cue-head { align-items: flex-start; }

.cue-table { width: 100%; border-collapse: collapse; margin: 1.5rem 0 1rem; }
.cue-table th {
  font-family: var(--sans); font-size: 0.6875rem; font-weight: 400;
  letter-spacing: 0.12em; text-transform: uppercase; color: var(--ash);
  text-align: left; padding: 0 0.625rem 0.5rem 0; border-bottom: var(--rule-muted);
}
.cue-table td { padding: 0.375rem 0.625rem 0.375rem 0; border-bottom: var(--rule-faint); vertical-align: middle; }
.cue-table .cue-time { width: 6.5rem; font-family: var(--mono); font-variant-numeric: tabular-nums; }
.cue-table .cue-actions { width: 9rem; white-space: nowrap; text-align: right; }
.cue-table tr.tap-next td { border-bottom: 2px solid var(--vermillion); }

.cue-controls { margin-top: 1rem; flex-wrap: wrap; }

/* ---- Responsive ------------------------------------------------------------------------ */

@media (min-width: 1400px) {
  /* Wider lines breathe better with a little more leading. */
  .chapter-body { line-height: 1.7; }
}

@media (max-width: 1100px) {
  .cols-band { grid-template-columns: 1fr; padding-inline: var(--pad-x); }
  .cols-band .col { padding: 2rem 0; }
  .cols-band .col + .col { border-left: none; border-top: var(--rule-muted); }
}

@media (max-width: 960px) {
  .chapter-layout { grid-template-columns: 1fr; }
  .toc-side-desktop { display: none; }
  .toc-side-mobile {
    display: block; border: var(--rule-strong); padding: 0; margin-bottom: 2.5rem;
  }
  .toc-side-mobile summary {
    cursor: pointer; list-style: none;
    font-family: var(--sans); font-size: 0.8125rem; letter-spacing: 0.12em; text-transform: uppercase;
    padding: 0.875rem 1.25rem;
  }
  .toc-side-mobile summary::before { content: '☰ '; color: var(--vermillion); }
  .toc-side-mobile[open] summary { border-bottom: var(--rule-muted); }
  .toc-side-mobile .toc-act { margin: 1.25rem 1.25rem 1.5rem 2rem; }

  .opening { grid-template-columns: 1fr; }
  .ser-opening.has-art { grid-template-columns: 1fr; }
  .opening-art { order: 2; margin-top: 1.5rem; }
  .wire-cat { max-width: 19rem; }

  .prologue-band, .about-band { grid-template-columns: 1fr; gap: 1rem; }

  .foot-nav { grid-template-columns: 1fr; }
  .foot-nav a + a { border-left: none; border-top: var(--rule-muted); }
  .foot-nav a { padding: 1.25rem var(--pad-x); }
}

@media (max-width: 640px) {
  .pager { flex-direction: column; }
  .pager .btn { max-width: 100%; text-align: center; }
  .comment-form-foot { flex-direction: column; align-items: stretch; }
  .cr-player { --crpy: 1.125rem; --crpx: 1.25rem; }
  .cr-controls { flex-wrap: wrap; }
  .cr-track { flex-basis: 100%; order: 3; }
}

/* ---- Header dropdowns (Playlists, Other Projects) ----------------------------------------------- */

.nav-drop { position: relative; }
.nav-drop summary {
  list-style: none; cursor: pointer;
  font-family: var(--sans); font-size: 0.875rem; letter-spacing: 0.02em;
  padding-bottom: 2px; border-bottom: 1px solid transparent;
  user-select: none;
}
.nav-drop summary::-webkit-details-marker { display: none; }
.nav-drop summary:hover,
.nav-drop[open] summary,
.nav-drop summary[aria-current="page"] { border-bottom-color: var(--graphite); }
.drop-caret { color: var(--vermillion); font-size: 0.75em; }

.nav-drop-panel {
  position: absolute; top: calc(100% + 0.625rem); left: 50%; transform: translateX(-50%);
  min-width: 13rem; z-index: 50;
  background: var(--bone); border: var(--rule-strong);
  display: flex; flex-direction: column; padding: 0.375rem 0;
}
.nav-drop-panel a {
  font-family: var(--sans); font-size: 0.875rem; letter-spacing: 0.02em;
  text-decoration: none; white-space: nowrap;
  padding: 0.5625rem 1.125rem;
  border-left: 3px solid var(--tab-color, transparent);
}
.nav-drop-panel a:hover { background: var(--graphite); color: var(--bone); }
.nav-drop-panel a[aria-current="page"] { text-decoration: underline; text-underline-offset: 0.2em; }

@media (max-width: 640px) {
  .nav-drop-panel { left: auto; right: -0.5rem; transform: none; }
}

/* ---- Public playlist page ---------------------------------------------------------------------- */

.music-col { max-width: 62rem; }

.pl-head { margin-bottom: 2rem; }
.pl-head .page-title { margin-bottom: 0.375rem; }
.pl-rule { height: 4px; width: 7.5rem; }
.pl-desc { margin-top: 1rem; font-size: 1.1875rem; max-width: 60ch; }

.tag-row { display: flex; flex-wrap: wrap; gap: 0.5rem; margin: 1.5rem 0 1rem; }
.tag {
  font-family: var(--sans); font-size: 0.8125rem; letter-spacing: 0.02em;
  color: var(--graphite); background: transparent; border: var(--rule-muted); border-radius: 0;
  padding: 0.25rem 0.75rem; cursor: pointer;
}
.tag.active { background: var(--graphite); color: var(--bone); border-color: var(--graphite); }

.pl-section { margin-top: 2.75rem; }
.pl-section-head { font-size: 1.25rem; font-weight: 400; line-height: 1.2; margin-bottom: 0.625rem; }
.pl-section-head.colored { padding: 0.5rem 0.875rem; }
.pl-section-head:not(.colored) { padding: 0 0 0.5rem; border-bottom: var(--rule-strong); }

.song-list { list-style: none; margin: 0; padding: 0; }
.song {
  display: flex; align-items: center; gap: 0.5rem 1.125rem; flex-wrap: wrap;
  padding: 0.75rem 0.5rem 0.75rem 0.875rem; position: relative;
  border-bottom: var(--rule-faint);
  border-left: 3px solid transparent;
}
.song-play {
  width: 2.25rem; height: 2.25rem; flex-shrink: 0;
  display: inline-flex; align-items: center; justify-content: center;
  background: transparent; border: var(--rule-strong); border-radius: 0;
  color: var(--graphite); cursor: pointer;
  transition: background-color 120ms linear, color 120ms linear;
}
.song-play:hover { background: var(--graphite); color: var(--bone); }
.song-play svg { width: 0.75rem; height: 0.75rem; display: block; }
.song-main { min-width: 0; flex: 1 1 14rem; }
.song-label { font-size: 1.125rem; line-height: 1.3; }
.song-title { font-family: var(--sans); font-size: 0.8125rem; color: var(--ash); margin-top: 1px; }
.song-title.as-label { font-family: var(--serif); font-size: 1.125rem; color: var(--graphite); margin-top: 0; }
.song-artist { font-family: var(--sans); font-size: 0.6875rem; letter-spacing: 0.1em; text-transform: uppercase; color: var(--ash); margin-top: 3px; }
.song-tags { display: flex; flex-wrap: wrap; gap: 0.375rem; }
.song-chip {
  font-family: var(--sans); font-size: 0.6875rem; letter-spacing: 0.04em;
  color: var(--ash); border: var(--rule-faint); padding: 1px 8px; white-space: nowrap;
}
.song-time { font-family: var(--sans); font-size: 0.75rem; font-variant-numeric: tabular-nums; color: var(--ash); white-space: nowrap; }
.song-progress { position: absolute; left: 0; right: 0; bottom: -1px; height: 2px; }
.song-elapsed { height: 100%; width: 0; background: var(--graphite); }

/* ---- Color fields (admin) ------------------------------------------------------------------------ */

.color-field { display: inline-flex; align-items: center; gap: 0.375rem; }
.color-field .color-hex { width: 6.75rem; font-family: var(--mono); font-size: 0.875rem; }
.color-swatch {
  width: 2.375rem; height: 2.375rem; padding: 3px; flex-shrink: 0;
  border: var(--rule-strong); border-radius: 0; background: #ffffff; cursor: pointer;
}
.color-dot { display: inline-block; width: 0.625rem; height: 0.625rem; margin-right: 0.375rem; }

/* ---- Admin playlist manager ------------------------------------------------------------------------ */

.adm-pl-group { margin: 1.75rem 0 2.25rem; }
.adm-pl-section-head {
  display: flex; flex-wrap: wrap; align-items: center; gap: 0.625rem;
  padding: 0.5rem 0.75rem; margin-bottom: 0.625rem;
}
.adm-pl-section-head.plain { border: var(--rule-muted); }
.adm-songs { list-style: none; margin: 0; padding: 0; }
.adm-song {
  display: flex; flex-wrap: wrap; align-items: center; gap: 0.5rem;
  padding: 0.625rem 0 0.625rem 0.75rem;
  border-left: 3px solid transparent; border-bottom: var(--rule-faint);
}
.adm-song-form { display: flex; flex-wrap: wrap; align-items: center; gap: 0.5rem; flex: 1 1 auto; }
.adm-song-form input[type="text"] { flex: 1 1 8.5rem; min-width: 7rem; width: auto; }
.adm-song-form select { width: auto; }
.rehome-form { display: inline-flex; gap: 0.375rem; align-items: center; }
.rehome-form select { width: auto; max-width: 13rem; font-size: 0.8125rem; padding: 0.3125rem 0.5rem; }
.pos-input { width: 4.25rem; flex: 0 0 auto; font-variant-numeric: tabular-nums; }

/* ---- Subscribe form ------------------------------------------------------------------------ */

.subscribe-label { display: block; font-size: 1.1875rem; margin-bottom: 0.875rem; max-width: 46ch; }
.subscribe-form .row-form { max-width: 30rem; }
.subscribe-form .fine-note { margin-top: 0.75rem; max-width: 52ch; }

.editor-hint { margin-top: 0.5rem; }

/* ---- Motion safety ------------------------------------------------------------------------ */

@media (prefers-reduced-motion: reduce) {
  .cr-cursor { animation: none; }
  .cr-line.is-new { animation: none; }
  .btn, .cr-play { transition: none; }
}