/* ==========================================================================
   casebook-v2. A printed casebook that carries the whole prospectus.
   Two first-class themes, ink (day) and slate (night), reproduced token for
   token from the production stylesheet. Everything below is this page's own
   markup: never a [data-sc-*] selector, never .sc-stage, .sc-copy, .sc-scrim.
   ========================================================================== */

/* ---------------------------------------------- production palette, day -- */
:root,
html[data-theme="ink"] {
  --bg:             #F4F1EC;
  --bg-elev:        #FFFFFF;
  --bg-sunken:      #ECE8E1;
  --border:         #DCD6CB;
  --border-strong:  #B8B0A2;
  --hairline:       rgba(20, 18, 14, .10);
  --text:           #14120E;
  --text-secondary: #5A5448;
  --text-tertiary:  #6E6858;
  --text-inverse:   #F4F1EC;
  --accent:         #1B2A4E;
  --accent-hover:   #243663;
  --accent-soft:    rgba(27, 42, 78, .08);
  --accent-text:    #FFFFFF;
}

/* -------------------------------------------- production palette, night -- */
html[data-theme="slate"] {
  --bg:             #0E1219;
  --bg-elev:        #161D28;
  --bg-sunken:      #0A0D13;
  --border:         #232C3B;
  --border-strong:  #2F3B4E;
  --hairline:       rgba(255, 255, 255, .08);
  --text:           #E8ECF2;
  --text-secondary: #95A0B3;
  --text-tertiary:  #7E8899;
  --text-inverse:   #0E1219;
  --accent:         #6FB1B0;
  --accent-hover:   #88C3C2;
  --accent-soft:    rgba(111, 177, 176, .12);
  --accent-text:    #0E1219;
}

/* ------------------------------- the six roles, mapped from the palette -- */
:root {
  --sc-canvas:     var(--bg);
  --sc-surface:    var(--bg-elev);
  --sc-ink:        var(--text);
  --sc-ink-soft:   var(--text-secondary);
  --sc-accent:     var(--accent);
  --sc-accent-ink: var(--accent-text);

  --sc-hairline:        var(--hairline);
  --sc-hairline-strong: var(--border);

  /* the chapter ground, painted per section. No drift on a chaptered page. */
  --cb-plate: var(--bg-sunken);
  --cb-bar:   var(--text);

  --sc-font-display: "EB Garamond", Georgia, "Times New Roman", serif;
  --sc-font-text:    "EB Garamond", Georgia, "Times New Roman", serif;
  --sc-font-mono:    "IBM Plex Mono", ui-monospace, "Courier New", monospace;
  --cb-font-loud:    "Bricolage Grotesque", "Archivo", system-ui, sans-serif;

  /* a printed page has no rounded corners */
  --sc-r-sm: 0; --sc-r-md: 0; --sc-r-lg: 0; --sc-r-pill: 0;

  /* light canvas: the edge light goes white and the shadows go thin */
  --sc-edge: inset 0 1px 0 rgb(255 255 255 / 0.7);
  --sc-shadow-color: 40 10% 20%;
  --sc-e1: 0 1px 2px hsl(var(--sc-shadow-color) / 0.10),
           0 2px 6px -1px hsl(var(--sc-shadow-color) / 0.08);
  --sc-e2: 0 2px 4px hsl(var(--sc-shadow-color) / 0.10),
           0 8px 18px -4px hsl(var(--sc-shadow-color) / 0.12);

  /* a serif needs a touch more room than the sans ramp assumes */
  --sc-leading-none: 1.02;
  --sc-leading-tight: 1.12;
  --sc-leading-body: 1.62;
  --sc-t-base: clamp(1.06rem, 1rem + 0.3vw, 1.24rem);
  --sc-track-tight: -0.012em;
  --sc-track-snug: -0.008em;
  --sc-track-normal: 0;

  --sc-section: clamp(3.5rem, 6.5vw, 7.5rem);
  --sc-gutter:  clamp(1.35rem, 4.5vw, 4.5rem);
  --sc-maxw:    76rem;

  --cb-folio-w: 14.5rem;
}

/* Under slate the ground is dark again, so the engine's own dark elevation
   and edge light are the correct ones. */
html[data-theme="slate"] {
  --sc-edge: inset 0 1px 0 color-mix(in oklab, var(--sc-ink) 10%, transparent);
  --sc-shadow-color: 220 40% 2%;
  --sc-e1: 0 1px 2px hsl(var(--sc-shadow-color) / 0.28),
           0 2px 6px -1px hsl(var(--sc-shadow-color) / 0.20);
  --sc-e2: 0 2px 4px hsl(var(--sc-shadow-color) / 0.24),
           0 8px 18px -4px hsl(var(--sc-shadow-color) / 0.30);
}

html { scroll-padding-top: 5rem; }
body { color: var(--sc-ink); letter-spacing: 0; }
.sc-grain { opacity: 0.03; }
html[data-theme="slate"] .sc-grain { opacity: 0.05; }

.page { padding-left: 0; }

/* the brand mark swaps with the theme */
.mark--slate { display: none; }
html[data-theme="slate"] .mark--ink { display: none; }
html[data-theme="slate"] .mark--slate { display: block; }

/* ------------------------------------------------------------- the folio --
   No fixed bar. A running head in the margin, updating as chapters pass, now
   carrying the actions at its foot. Below the desk width it becomes a strip. */
.folio {
  position: fixed; z-index: var(--sc-z-chrome);
  left: 0; top: 0; width: 100%;
  min-height: 52px;
  display: flex; align-items: center; gap: var(--sc-4);
  padding: var(--sc-2) var(--sc-gutter);
  background: var(--sc-canvas);
  border-bottom: 1px solid var(--sc-hairline-strong);
}
/* The mark is permanent chrome. The cover carries the word and nothing else,
   so there is never a second mark on screen to fight it. */
.folio__brand {
  display: flex; align-items: center;
  flex: 0 0 auto; min-height: 44px;
}
.folio__mark { width: 120px; height: auto; }

.folio__now {
  margin: 0; flex: 1 1 auto; min-width: 0;
  font-family: var(--sc-font-mono); font-size: 0.72rem; font-weight: 500;
  color: var(--sc-ink-soft); letter-spacing: 0;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.folio__list {
  list-style: none; margin: 0; padding: 0;
  display: none;
}
.folio__link {
  display: flex; align-items: baseline; gap: var(--sc-3);
  padding: 5px 0 5px var(--sc-3);
  font-family: var(--sc-font-text); font-size: 0.95rem;
  color: var(--sc-ink-soft); text-decoration: none;
  border-left: 2px solid transparent;
  transition: color var(--sc-d-fast) var(--sc-ease-out),
              border-color var(--sc-d-fast) var(--sc-ease-out);
}
.folio__ord {
  flex: 0 0 1.5rem;
  font-family: var(--sc-font-mono); font-size: 0.66rem;
  color: var(--sc-ink-soft);
}
.folio__t { min-width: 0; }
.folio__link:hover { color: var(--sc-ink); }
.folio__link.is-here { color: var(--sc-ink); border-left-color: var(--sc-accent); }
.folio__link.is-here .folio__ord { color: var(--sc-accent); }

.folio__act {
  display: flex; align-items: center; gap: var(--sc-3);
  flex: 0 0 auto;
}
.folio__price {
  margin: 0; display: none;
  font-family: var(--sc-font-mono); font-size: 0.72rem; color: var(--sc-ink);
}
.folio__side { display: none; }

.btn-enrol {
  display: inline-flex; align-items: center; justify-content: center;
  min-height: 44px; padding: 0 var(--sc-5);
  background: var(--sc-accent); color: var(--sc-accent-ink);
  font-family: var(--sc-font-mono); font-size: 0.78rem; font-weight: 500;
  text-decoration: none;
  border: 1px solid var(--sc-accent);
}
.btn-enrol:hover { background: var(--accent-hover); border-color: var(--accent-hover); }

.toggle {
  display: inline-flex; align-items: center; justify-content: center;
  width: 44px; height: 44px; padding: 0;
  background: none; border: 1px solid var(--sc-hairline-strong);
  color: var(--sc-ink); cursor: pointer;
}
.toggle:hover { border-color: var(--sc-ink-soft); }
.toggle .icon-sun { display: none; }
html[data-theme="slate"] .toggle .icon-moon { display: none; }
html[data-theme="slate"] .toggle .icon-sun { display: block; }

@media (min-width: 1180px) {
  .page { padding-left: var(--cb-folio-w); }
  .folio {
    width: var(--cb-folio-w); height: 100vh; min-height: 0;
    flex-direction: column; align-items: stretch; justify-content: flex-start;
    gap: var(--sc-5);
    padding: var(--sc-6) var(--sc-5) var(--sc-6) clamp(1.35rem, 3vw, 2.25rem);
    background: none; -webkit-backdrop-filter: none; backdrop-filter: none;
    border-bottom: 0; border-right: 1px solid var(--sc-hairline-strong);
  }
  .folio__brand { order: -1; min-height: 0; }
  .folio__now { flex: 0 0 auto; white-space: normal; overflow: visible; font-size: 0.7rem; }
  .folio__list {
    display: block; flex: 1 1 auto; min-height: 0; overflow-y: auto;
    scrollbar-width: thin;
  }
  .folio__act {
    flex-direction: column; align-items: stretch; gap: var(--sc-2);
    margin-top: auto; padding-top: var(--sc-4);
    border-top: 1px solid var(--sc-hairline-strong);
  }
  .folio__price { display: block; margin-bottom: var(--sc-2); }
  .folio__side {
    display: flex; align-items: center; min-height: 40px;
    font-family: var(--sc-font-mono); font-size: 0.72rem;
    color: var(--sc-ink); text-decoration: underline;
    text-underline-offset: 0.25em; text-decoration-thickness: 1px;
  }
  .folio__side:hover { color: var(--sc-accent); }
  .toggle { align-self: flex-start; margin-top: var(--sc-2); }
}

/* ------------------------------------------------------------- the leaves */
.leaf__wrap {
  width: 100%; max-width: var(--sc-maxw);
  margin-inline: auto; padding-inline: var(--sc-gutter);
}
.leaf { padding-block: var(--sc-section); }
.leaf--title {
  min-height: 100svh;
  display: flex; align-items: center;
  padding-top: calc(var(--sc-section) + 52px);
}
.leaf--colophon {
  background: var(--sc-canvas);
  border-top: 1px solid var(--sc-hairline-strong);
  padding-block: var(--sc-9) var(--sc-9);
}

/* grounds are painted per chapter, hard cuts, never interpolated */
.chapter { padding-block: var(--sc-section); }
.chapter--plate { background: var(--cb-plate); }
.chapter--paper { background: var(--sc-canvas); }
.chapter--short { padding-block: clamp(3rem, 5.5vw, 5.5rem); }

.silence { height: 40vh; background: var(--sc-canvas); }

.rule { height: 1px; border: 0; background: var(--sc-hairline-strong); margin: 0; }

/* ============================================================ 1  THE COVER
   One word at viewport scale, on the paper ground. It is display text, not a
   heading: the page's single h1 lives on the title page that follows. */
.act-cover { --sc-p: 0; }
.cover {
  background: var(--sc-canvas);
  display: grid;
  grid-template-rows: 1fr auto;
  padding: calc(var(--sc-5) + 56px) var(--sc-gutter) clamp(1.75rem, 5vh, 4rem);
}
.word-well { display: grid; place-items: center; min-height: 0; min-width: 0; }

/* The cover's live terminal (2026-09-06): a canvas drawn from real S&P 500
   daily bars, under the word, inside the sticky stage, so it scrolls away with
   the cover. Barely there by design; this one token sets how much. The folio is
   opaque paper so nothing shows through it. Not mounted under reduced motion. */
.cover { --cover-live-opacity: 0.5; }
.cover-live { position: absolute; inset: 0; z-index: 0; pointer-events: none; overflow: hidden; }
.cover-live canvas { position: absolute; left: 0; top: 0; opacity: var(--cover-live-opacity); }
.cover-live::after {
  content: ""; position: absolute; inset: 0;
  background: radial-gradient(120% 90% at 50% 50%, transparent 55%, var(--sc-canvas) 100%);
}
.cover > :not(.cover-live) { position: relative; z-index: 1; }

/* The kerning is manual. At this size default tracking is a defect. */
.word {
  margin: 0;
  font-family: var(--cb-font-loud);
  font-weight: 800;
  font-size: min(33vw, 26rem);
  line-height: 1;
  letter-spacing: -0.05em;
  margin-right: 0.05em;              /* give back the trailing letter-space */
  white-space: nowrap;
  color: var(--sc-ink);
  transform-origin: 50% 60%;
}
/* Chars split into overflow-hidden masks. Buy the ascenders room back. */
.word .sc-split { padding: 0.1em 0.085em; margin: -0.1em -0.085em; }
/* At minus 0.05em the r shoulder runs into the t crossbar, so that pair is
   opened again; the full stop carries a wide left bearing, so it is pulled in. */
.word .sc-split:nth-child(5) { margin-left: 0.014em; }
.word .sc-split:last-child   { margin-left: -0.03em; }

/* At desk widths the folio takes 14.5rem out of the line, so the word is
   sized against what is left rather than against the whole viewport. */
@media (min-width: 1180px) {
  .word { font-size: min(26vw, 26rem); }
}

.cover__foot { display: flex; }
.cover__line {
  margin: 0; max-width: 34ch;
  font-family: var(--sc-font-text); font-weight: 400;
  font-size: var(--sc-t-lg); line-height: 1.3;
  letter-spacing: var(--sc-track-snug);
  color: var(--sc-ink); text-wrap: balance;
}

/* ---------------------------------------------------------- the title page */
.title { max-width: 46rem; }
.title > * + * { margin-top: var(--sc-6); }
.title__mark { width: 208px; height: auto; margin-bottom: var(--sc-7); }
.title__h {
  margin: 0;
  font-family: var(--sc-font-display); font-weight: 500;
  font-size: var(--sc-t-4xl); line-height: var(--sc-leading-none);
  letter-spacing: var(--sc-track-tight);
  text-wrap: balance;
}
.title__stand {
  margin-top: var(--sc-7);
  font-size: var(--sc-t-lg); line-height: 1.5; color: var(--sc-ink-soft);
  max-width: 48ch;
  text-wrap: pretty;
}
.title__price { margin: 0; font-family: var(--sc-font-mono); font-size: 0.86rem; color: var(--sc-ink); }
.title__do { margin: 0; color: var(--sc-ink-soft); }

/* The close pattern is running text, not a button island, so the Enrol link
   stays inline. Vertical padding with matching negative margin grows the hit
   box past 44px on a phone without moving a single line of type. */
.actions { display: flex; flex-wrap: wrap; gap: var(--sc-3); }

.btn-ghost {
  display: inline-flex; align-items: center; justify-content: center;
  min-height: 44px; padding: 0 var(--sc-5);
  background: none; color: var(--sc-ink);
  border: 1px solid var(--sc-ink);
  font-family: var(--sc-font-mono); font-size: 0.78rem;
  text-decoration: none;
}
.btn-ghost:hover { border-color: var(--sc-accent); color: var(--sc-accent); }

.ink-link {
  color: var(--sc-accent);
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 0.2em;
  padding-block: 0.7em;
  margin-block: -0.7em;
}
.ink-link:hover { text-decoration-thickness: 2px; }
.ink-link--soft { color: var(--sc-ink); }

/* ------------------------------------------------------------ intertitles */
.intertitle { margin-bottom: var(--sc-8); }
.chapter--short .intertitle { margin-bottom: var(--sc-7); }
.intertitle__n {
  margin: 0 0 var(--sc-2);
  font-family: var(--sc-font-mono); font-size: 0.78rem; font-weight: 400;
  color: var(--sc-ink-soft); letter-spacing: 0;
}
.intertitle__h {
  margin: 0;
  font-family: var(--sc-font-display); font-weight: 500;
  font-size: var(--sc-t-3xl); line-height: var(--sc-leading-none);
  letter-spacing: var(--sc-track-tight);
}
.chapter--short .intertitle__h { font-size: var(--sc-t-2xl); }
.kicker {
  margin: var(--sc-5) 0 0; max-width: 58ch;
  font-size: var(--sc-t-lg); line-height: 1.5; color: var(--sc-ink-soft);
  text-wrap: pretty;
}

/* ------------------------------------------------------------------ prose */
.body { margin: 0; max-width: 60ch; color: var(--sc-ink); text-wrap: pretty; }
.body--turn { margin-top: var(--sc-5); color: var(--sc-ink-soft); }
.body--lead { max-width: 62ch; }
.leaf__wrap--tight { padding-top: var(--sc-7); }

/* --------------------------------------------------------------- spreads --
   Media sits in its own column with a caption. It never bleeds under type. */
.spread {
  display: grid; gap: var(--sc-7);
  grid-template-columns: minmax(0, 1fr);
  align-items: start;
}
@media (min-width: 900px) {
  .spread { grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr); gap: var(--sc-8); }
  .spread--flip .spread__prose { order: 2; }
  .spread--flip .spread__media { order: 1; }
}
.spread__prose > * + * { margin-top: var(--sc-5); }
/* Chapter nine wants the cap of the word Enrol on the ticket's top edge. A
   line box starts above the cap, so the ticket is dropped by exactly that
   difference, expressed in the heading's own font size so it stays fluid.
   The 0.207 factor is measured, not guessed: see the round-three report. */
.spread--flush { align-items: start; }
.spread--flush .spread__prose > * { margin-top: 0; }
.spread--flush .spread__prose > .body { margin-top: var(--sc-5); }
.enrol__h { margin: 0; }
@media (min-width: 900px) {
  .spread--flush > *:last-child { margin-top: calc(0.207 * var(--sc-t-2xl)); }
}

figure { margin: 0; }
figcaption {
  margin-top: var(--sc-3);
  font-family: var(--sc-font-text); font-style: italic;
  font-size: 0.95rem; color: var(--sc-ink-soft);
}
.frame {
  background: var(--sc-surface);
  box-shadow: var(--sc-e2), var(--sc-edge);
  overflow: clip;
}
.frame img { width: 100%; height: auto; }

/* ------------------------------------------------------- the law table --- */
.law { width: 100%; border-collapse: collapse; margin-top: var(--sc-6); }
.law caption { text-align: left; }
.law th, .law td {
  text-align: left; vertical-align: top;
  padding: var(--sc-3) var(--sc-4) var(--sc-3) 0;
  border-bottom: 1px solid var(--sc-hairline);
}
.law thead th {
  font-family: var(--sc-font-mono); font-weight: 500; font-size: 0.72rem;
  color: var(--sc-ink-soft); border-bottom-color: var(--sc-hairline-strong);
  padding-bottom: var(--sc-2);
}
.law tbody th { font-weight: 500; font-size: 1.02rem; color: var(--sc-ink); white-space: nowrap; }
.law tbody td { font-size: 1.02rem; color: var(--sc-ink-soft); }
.law__cite { font-family: var(--sc-font-mono); font-size: 0.8rem; line-height: 1.5; }

/* --------------------------------------------------- the figures (real) -- */
.figs {
  display: grid; grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--sc-5); margin: var(--sc-6) 0 0; max-width: 30rem;
}
.fig { min-width: 0; }
.fig__n {
  margin: 0;
  font-family: var(--sc-font-mono); font-weight: 500;
  font-size: clamp(2rem, 1.4rem + 2vw, 3rem);
  line-height: 1; color: var(--sc-ink);
}
.fig__l { margin: var(--sc-2) 0 0; font-size: 0.95rem; color: var(--sc-ink-soft); }

/* ------------------------------------------------------- depth in column --
   Three layers inside the media column only. The prose never moves. */
.deep { position: relative; padding: var(--sc-5) 0 var(--sc-5) var(--sc-5); }
.deep__rule {
  position: absolute; left: 0; top: 0; bottom: 0; width: 1px;
  background: var(--sc-hairline-strong);
}
.deep__plate { position: relative; z-index: 1; }
.deep__corner {
  position: absolute; z-index: 2;
  left: 0; bottom: 0; width: clamp(3.5rem, 8vw, 6rem); height: clamp(3.5rem, 8vw, 6rem);
  background: var(--cb-plate);
  box-shadow: var(--sc-e1);
}

/* ============================================ SIGNATURE: the redaction lift
   Three lines of real text, each covered by a bar that is a SIBLING of the
   text, never a pseudo-element on it. The bars are wiped away left to right
   by the act's own progress, one after another. */
.act-pin { --sc-p: 0; }
.stage { background: var(--cb-plate); }
.stage__wrap {
  width: 100%; max-width: var(--sc-maxw);
  margin-inline: auto; padding-inline: var(--sc-gutter);
  height: 100%;
  display: grid; gap: var(--sc-6);
  grid-template-columns: minmax(0, 1fr);
  align-content: center;
  padding-top: 64px; padding-bottom: var(--sc-6);
}
@media (min-width: 900px) {
  .stage__wrap {
    grid-template-columns: minmax(0, 1.5fr) minmax(0, 1fr);
    gap: var(--sc-8); align-items: center;
    padding-top: var(--sc-6);
  }
  .stage__media { max-width: 24rem; }
  .stage__media .frame { aspect-ratio: 4 / 5; }
  .stage__media .frame img { height: 100%; object-fit: cover; object-position: 62% 50%; }
}
.stage__media { max-width: 26rem; }
@media (max-width: 899px) {
  .stage__media { order: -1; }
  .stage__media .frame { max-height: 26svh; }
  .stage__media .frame img { height: 26svh; object-fit: cover; }
}

.red {
  margin: 0;
  font-family: var(--sc-font-display); font-weight: 400;
  font-size: clamp(1.08rem, 0.8rem + 1.05vw, 1.72rem);
  line-height: 1.46;
  color: var(--sc-ink);
}
.red__line {
  position: relative; display: block;
  width: fit-content; max-width: 100%;
  padding: 0.08em 0;
}
.red__line + .red__line { margin-top: 0.42em; }
.red__t { position: relative; z-index: 0; }
.red__bar {
  position: absolute; z-index: 1;
  inset: 0 -0.4em 0 -0.4em;
  background: var(--cb-bar);
  will-change: clip-path;
}
.red__bar--1 { clip-path: inset(0 0 0 calc(100% * clamp(0, (var(--sc-p) - 0.10) * 4, 1))); }
.red__bar--2 { clip-path: inset(0 0 0 calc(100% * clamp(0, (var(--sc-p) - 0.35) * 4, 1))); }
.red__bar--3 { clip-path: inset(0 0 0 calc(100% * clamp(0, (var(--sc-p) - 0.60) * 4, 1))); }

.red__note {
  margin: var(--sc-6) 0 0; max-width: 46ch;
  font-style: italic; font-size: 1.02rem; color: var(--sc-ink-soft);
}

/* ================================================= the prospectus chapters */

/* a numbered editorial list. No cards, no icons, no counters in the copy. */
.threads { margin: 0; padding: 0; list-style: none; counter-reset: thread; max-width: 62rem; }
.threads > li {
  counter-increment: thread;
  display: grid; gap: var(--sc-2) var(--sc-5);
  grid-template-columns: 2.5rem minmax(0, 1fr);
  padding-block: var(--sc-5);
  border-top: 1px solid var(--sc-hairline);
}
.threads > li:first-child { border-top: 0; padding-top: 0; }
.threads > li::before {
  content: counter(thread, decimal-leading-zero);
  grid-row: 1 / span 2;
  font-family: var(--sc-font-mono); font-size: 0.78rem;
  color: var(--sc-ink-soft); padding-top: 0.35em;
}
.threads h3 {
  margin: 0; grid-column: 2;
  font-family: var(--sc-font-display); font-weight: 500; font-size: var(--sc-t-lg);
  line-height: 1.2; letter-spacing: var(--sc-track-snug); color: var(--sc-ink);
}
.threads p { margin: 0; grid-column: 2; max-width: 60ch; color: var(--sc-ink-soft); }

.aud-note { margin: var(--sc-2) 0 0; grid-column: 2; font-style: italic; color: var(--sc-ink-soft); }

/* A chapter label that sits above a whole block rather than inside one column,
   so every heading under it starts on the same line. */
.chapter-label { margin: 0 0 var(--sc-5); }

/* Chapter five sets two lists of administrative matter side by side. Each
   column keeps its own heading, kicker and numbered list. */
.twocol { display: grid; gap: var(--sc-8); grid-template-columns: minmax(0, 1fr); }
@media (min-width: 1000px) {
  .twocol { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--sc-9); }
}
.twocol .intertitle { margin-bottom: var(--sc-6); }
.twocol .kicker { font-size: var(--sc-t-base); }


/* the module blotter, set as a printed table */
.blotter-wrap { overflow-x: auto; margin-top: var(--sc-6); }
.blotter { width: 100%; border-collapse: collapse; min-width: 44rem; }
.blotter th, .blotter td {
  text-align: left; vertical-align: top;
  padding: var(--sc-3) var(--sc-4) var(--sc-3) 0;
  border-bottom: 1px solid var(--sc-hairline);
}
.blotter thead th {
  font-family: var(--sc-font-mono); font-weight: 500; font-size: 0.72rem;
  color: var(--sc-ink-soft); border-bottom-color: var(--sc-hairline-strong);
}
.blotter tbody th {
  font-family: var(--sc-font-mono); font-weight: 500; font-size: 0.8rem;
  color: var(--sc-ink); white-space: nowrap;
}
.blotter .ttl { font-size: 1.02rem; color: var(--sc-ink); }
.blotter .out { font-size: 0.98rem; color: var(--sc-ink-soft); }
.blotter .hrs, .blotter .typ {
  font-family: var(--sc-font-mono); font-size: 0.78rem; color: var(--sc-ink-soft);
  white-space: nowrap;
}
.blotter .typ { color: var(--sc-accent); }
.blotter-foot {
  display: flex; flex-wrap: wrap; gap: var(--sc-2) var(--sc-6);
  margin: var(--sc-4) 0 0;
  font-family: var(--sc-font-mono); font-size: 0.74rem; color: var(--sc-ink-soft);
}
.blotter-foot span { display: block; }

/* An article in the list is the same shape as any other numbered item: the
   title takes the item-title size, the meta line the numeral's mono size. */
.threads__link {
  color: inherit; text-decoration: none;
  padding-block: 0.6em; margin-block: -0.6em;
}
.threads__link:hover { color: var(--sc-accent); text-decoration: underline; text-underline-offset: 0.2em; }
.threads__meta {
  font-family: var(--sc-font-mono); font-size: 0.78rem;
  color: var(--sc-ink-soft) !important;
}

/* the order ticket */
.ticket {
  max-width: 34rem;
  background: var(--sc-surface);
  border: 1px solid var(--sc-hairline-strong);
  box-shadow: var(--sc-e2), var(--sc-edge);
  padding: var(--sc-6);
  color: var(--sc-ink);
}
.ticket__h {
  margin: 0 0 var(--sc-4);
  font-family: var(--sc-font-mono); font-weight: 400; font-size: 0.72rem;
  color: var(--sc-ink-soft);
}
.ticket__t { width: 100%; border-collapse: collapse; }
.ticket__t th, .ticket__t td {
  text-align: left; vertical-align: top;
  padding: var(--sc-3) 0;
  border-bottom: 1px solid var(--sc-hairline);
}
.ticket__t th {
  font-family: var(--sc-font-mono); font-weight: 400; font-size: 0.74rem;
  color: var(--sc-ink-soft); white-space: nowrap; padding-right: var(--sc-4);
}
.ticket__t td { font-size: 1rem; color: var(--sc-ink); }
.ticket__t tr:last-child th, .ticket__t tr:last-child td { border-bottom: 0; }
.ticket__t .amt { font-family: var(--sc-font-mono); font-size: 1.05rem; font-weight: 500; }
.ticket .btn-enrol { margin-top: var(--sc-5); width: 100%; }
.ticket__warn {
  margin: var(--sc-4) 0 0; padding: 0; list-style: none;
  font-family: var(--sc-font-mono); font-size: 0.74rem; color: var(--sc-ink-soft);
}
.ticket__warn li + li { margin-top: 2px; }
.ticket__note {
  margin: var(--sc-4) 0 0; font-size: 0.98rem; color: var(--sc-ink-soft);
  border-top: 1px solid var(--sc-hairline); padding-top: var(--sc-4);
}
.ticket__note b { font-family: var(--sc-font-mono); font-size: 0.86rem; color: var(--sc-ink); font-weight: 500; }

/* the mailing list form */
.signup {
  display: flex; flex-wrap: wrap; gap: var(--sc-3);
  margin-top: var(--sc-6); max-width: 34rem;
}
.signup .input {
  flex: 1 1 15rem; min-width: 0; min-height: 44px;
  padding: 0 var(--sc-4);
  background: var(--sc-surface); color: var(--sc-ink);
  border: 1px solid var(--sc-hairline-strong);
  font-family: var(--sc-font-text); font-size: 1rem;
}
.signup .input::placeholder { color: var(--sc-ink-soft); }
.signup button {
  min-height: 44px; padding: 0 var(--sc-5);
  background: none; color: var(--sc-ink);
  border: 1px solid var(--sc-ink);
  font-family: var(--sc-font-mono); font-size: 0.78rem; cursor: pointer;
}
.signup button:hover { background: var(--sc-accent); color: var(--sc-accent-ink); border-color: var(--sc-accent); }
.signup-note { margin: var(--sc-4) 0 0; font-size: 0.95rem; color: var(--sc-ink-soft); }
.visually-hidden {
  position: absolute; width: 1px; height: 1px; margin: -1px;
  padding: 0; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}

/* ==================================================== the six-regime rail --
   The rail travels on the left, the reading list holds still on the right,
   both inside the one pinned stage. The track is what clips the rail, so the
   cards pass behind the column edge rather than under the reading list. */
.railstage {
  display: grid; align-items: center; background: var(--cb-plate);
  grid-template-columns: minmax(0, 1fr);
  align-content: center;
  gap: 0;
  padding-block: var(--sc-5);
  padding-top: calc(var(--sc-5) + 56px);
}
.railtrack { min-width: 0; overflow: clip; }




/* The trailing spacer is what makes the last item land flush. The engine
   travels rail.scrollWidth minus the VIEWPORT, but the track is narrower than
   the viewport by the folio and the reading column, so without this the note
   card stops short and is cut off at the right. page.js measures the exact
   difference and writes it here. */
.rail__pad { width: var(--rail-pad, 0px); align-self: stretch; }
.rail {
  gap: var(--sc-5);
  align-items: stretch;
  padding-inline: var(--sc-gutter);
  padding-block: var(--sc-6);
}
.rail > * { flex: 0 0 auto; }
.rail__lead { width: min(24rem, 74vw); align-self: center; }
.rail__lead .intertitle__n { margin-bottom: var(--sc-2); }
.rail__lead h2 {
  margin: 0;
  font-family: var(--sc-font-display); font-weight: 500;
  font-size: var(--sc-t-2xl); line-height: var(--sc-leading-none);
  letter-spacing: var(--sc-track-tight); color: var(--sc-ink);
}
.rail__lead p { margin: var(--sc-4) 0 0; color: var(--sc-ink-soft); }
.rail__note {
  width: min(20rem, 74vw); align-self: center;
  padding-left: var(--sc-5); padding-right: var(--sc-5);
  border-left: 1px solid var(--sc-hairline-strong);
}
.rail__note p {
  margin: 0; max-width: none; overflow-wrap: break-word;
  font-family: var(--sc-font-display); font-weight: 500;
  font-size: var(--sc-t-xl); line-height: 1.12;
  letter-spacing: var(--sc-track-snug); color: var(--sc-ink);
}
.card {
  width: 18rem;
  display: flex; flex-direction: column;
  background: var(--sc-surface);
  border: 1px solid var(--sc-hairline-strong);
  overflow: hidden;
  box-shadow: var(--sc-e2), var(--sc-edge);
  color: var(--sc-ink);
}
.card img { width: 100%; height: 15rem; object-fit: cover; }
/* Day plates by daylight, night plates after dark. Same swap as the mark: two
   images per card, one shown per theme, no script involved. */
.card .plate--slate { display: none; }
html[data-theme="slate"] .card .plate--ink { display: none; }
html[data-theme="slate"] .card .plate--slate { display: block; }
.card__label { padding: var(--sc-5); border-top: 1px solid var(--sc-hairline); }
.card__label h3 {
  margin: 0; font-family: var(--sc-font-display);
  font-size: var(--sc-t-lg); font-weight: 500;
  letter-spacing: var(--sc-track-snug); line-height: 1.15; color: var(--sc-ink);
}
.card__who {
  margin: 10px 0 0;
  font-family: var(--sc-font-mono); font-size: 0.74rem;
  color: var(--sc-accent);
}
.card__book {
  margin: 6px 0 0;
  font-family: var(--sc-font-mono); font-size: 0.74rem;
  line-height: 1.5; color: var(--sc-ink-soft);
}

/* Staggered settle from the act's own progress. First item exempt, floor the
   opacity so an arriving card reads as arriving, not as failing to load. */
@media (prefers-reduced-motion: no-preference) {
  .act--rail .card, .act--rail .rail__note {
    opacity: calc(0.55 + 0.45 * clamp(0, (var(--sc-p, 0) - var(--d, 0)) * 9, 1));
    transform: translate3d(0, calc(14px * (1 - clamp(0, (var(--sc-p, 0) - var(--d, 0)) * 9, 1))), 0);
  }
  .act--rail .card:nth-of-type(1) { --d: 0.00; }
  .act--rail .card:nth-of-type(2) { --d: 0.07; }
  .act--rail .card:nth-of-type(3) { --d: 0.18; }
  .act--rail .card:nth-of-type(4) { --d: 0.30; }
  .act--rail .card:nth-of-type(5) { --d: 0.42; }
  .act--rail .card:nth-of-type(6) { --d: 0.54; }
  .act--rail .rail__note { --d: 0.66; }
}

/* ------------------------------------------------------------- colophon -- */
.colophon { max-width: 44rem; }
.colophon > * + * { margin-top: var(--sc-7); }
.colophon > .rule { margin-top: var(--sc-6); }
.colophon > .rule + * { margin-top: var(--sc-6); }
.colophon__h {
  margin: 0;
  font-family: var(--sc-font-mono); font-weight: 400; font-size: 0.78rem;
  color: var(--sc-ink-soft); letter-spacing: 0;
}
.colophon__set { margin: 0; font-size: 1.06rem; color: var(--sc-ink); text-wrap: pretty; }
.colophon__price { margin: 0; font-family: var(--sc-font-mono); font-size: 0.86rem; color: var(--sc-ink); }
.colophon__do { margin: 0; font-size: 1.12rem; color: var(--sc-ink-soft); }
.colophon__nav {
  margin: var(--sc-5) 0 0; padding: 0; list-style: none;
  display: flex; flex-wrap: wrap; gap: var(--sc-2) var(--sc-6);
}
.colophon__nav a {
  display: inline-flex; align-items: center; min-height: 44px;
  font-family: var(--sc-font-mono); font-size: 0.76rem; color: var(--sc-ink);
  text-decoration: underline; text-underline-offset: 0.25em;
}
.colophon__nav a:hover { color: var(--sc-accent); }
.colophon__small { margin: 0; font-family: var(--sc-font-mono); font-size: 0.72rem; color: var(--sc-ink-soft); }

/* ------------------------------------------------------------ focus ring - */
a:focus-visible, button:focus-visible, input:focus-visible {
  outline: 2px solid var(--sc-accent);
  outline-offset: 3px;
}

/* --------------------------------------------------------------- mobile -- */
@media (max-width: 700px) {
  .title__h { font-size: var(--sc-t-2xl); }
  .intertitle__h { font-size: var(--sc-t-2xl); }
  .chapter--short .intertitle__h { font-size: var(--sc-t-xl); }
  .title__mark { width: 168px; }
  .silence { height: 22vh; }
  .word { font-size: min(32vw, 11rem); }
  .cover__line { font-size: var(--sc-t-base); max-width: 26ch; }
  .law th, .law td { padding-right: var(--sc-3); }
  .law tbody th { white-space: normal; }
  .figs { gap: var(--sc-6); }
  .card { width: 15rem; }
  .card img { height: 11rem; }
  .rail { gap: var(--sc-4); }
  .threads > li { grid-template-columns: 2rem minmax(0, 1fr); gap: var(--sc-2) var(--sc-4); }
  .ticket { padding: var(--sc-5); }
  .blotter { min-width: 38rem; }
}
@media (max-width: 760px) {
  /* The strip now carries the mark as well, so the running head gets a
     narrower mark rather than an ellipsis. */
  .folio__mark { width: 96px; }
  .folio { gap: var(--sc-3); }
}
@media (max-width: 420px) {
  .law__cite { font-size: 0.72rem; }
  .law tbody th, .law tbody td { font-size: 0.94rem; }
  .folio { gap: var(--sc-2); padding-inline: var(--sc-4); }
  .btn-enrol { padding: 0 var(--sc-4); }
}

/* ------------------------------------------------------- reduced motion -- */
@media (prefers-reduced-motion: reduce) {
  /* The bars are the effect, not the meaning. With motion off the sentence is
     simply readable, which is where the lift was taking the reader anyway. */
  .red__bar { display: none; }
  .frame, .deep__plate, .deep__rule, .deep__corner { transform: none !important; }
  /* The giant word holds at rest rather than part-scaled. */
  .word { transform: none !important; }
  /* The rail's travel is its navigation. The engine hands it back as a scroll
     region on the stage; the track is what actually clips the rail, so the
     scroll region belongs to the track instead. */
  [data-sc-act="pan"] .railstage { overflow-x: hidden; scroll-snap-type: none; }
  .railtrack {
    overflow-x: auto; overflow-y: hidden;
    overscroll-behavior-x: contain; scroll-snap-type: x proximity;
  }
  .rail__pad { display: none; }
}

/* Mailing form status line, written by js/signup.js (ported 2026-09-05). */
.signup-status { margin-top: 0.9rem; font-family: var(--sc-font-mono); font-size: 0.82rem; line-height: 1.5; max-width: 34rem; min-height: 1.3em; color: var(--text-secondary, var(--sc-ink-2)); }
.signup-status[hidden] { display: block; visibility: hidden; }
.signup-status[data-state="success"] { color: var(--text, var(--sc-ink)); font-weight: 500; }
.signup-status[data-state="error"] { color: var(--accent, #B3261E); }

/* Skip link (2026-09-05): the folio's thirteen chapter links and actions come
   first in tab order, so a keyboard reader gets one jump straight to the page.
   Hidden until focused; sits above the folio when shown. */
.skip-link { position: fixed; top: 0.75rem; left: 0.75rem; z-index: 100; padding: 0.6rem 0.9rem;
  font-family: var(--sc-font-mono); font-size: 0.78rem; color: var(--bg, #F4F1EC);
  background: var(--accent, #1B2A4E); text-decoration: none; transform: translateY(-200%); }
.skip-link:focus-visible { transform: none; outline: 3px solid var(--bg, #F4F1EC); outline-offset: 2px; }