/* ============================================================
   NextChapterBench — "The Manuscript"
   Generated by scripts/build_site.py. No webfonts, no CDNs.
   ============================================================ */

:root {
  --paper:        #f6f0e1;
  --paper-deep:   #efe7d3;
  --ink:          #26211a;
  --ink-2:        #574e3e;
  --ink-3:        #8a806c;
  --rule:         #cfc5aa;
  --rule-faint:   #e0d8c2;

  /* Chart series — validated light-mode palette values, verbatim.
     Slots 1–3, assigned in fixed order, never cycled. */
  --series-1:     #2a78d6;
  --series-2:     #eb6834;
  --series-3:     #1baf7a;
  --series-4:     #9a5bd2;
  --series-5:     #c94f7c;
  --series-6:     #8c8420;
  --series-7:     #1f9daa;

  /* Rubber-stamp inks (decorative chrome, not data) */
  --stamp-red:    #a8352a;
  --stamp-blue:   #2d4f7c;

  /* Laurel metals (decorative ornament, not data) */
  --gold:   #8a6a1f;
  --silver: #7d7668;
  --bronze: #8a5a35;

  --measure: 46rem;
}
body.pg-library { --measure: 50rem; }

* { box-sizing: border-box; }
html { background: var(--paper); }
body {
  margin: 0;
  background: var(--paper);
  color: var(--ink);
  font-family: Georgia, 'Times New Roman', Times, serif;
  font-size: 18px;
  line-height: 1.62;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}
.page { max-width: var(--measure); margin: 0 auto; padding: 2.2rem 2.5rem 4rem; }
p { margin: 0 0 1.1em; }
a { color: inherit; }
.smallcaps { font-variant: small-caps; letter-spacing: 0.14em; }
h1, h2, h3 { font-weight: normal; }
h2 {
  font-size: 1.05rem; font-variant: small-caps; letter-spacing: 0.22em;
  text-align: center; margin: 0 0 0.4rem;
}
.section-no {
  display: block; text-align: center; font-size: 0.85rem;
  letter-spacing: 0.3em; color: var(--ink-3); margin-bottom: 0.5rem;
}
.section-sub {
  text-align: center; font-style: italic; color: var(--ink-2);
  font-size: 0.95rem; margin: 0 auto 2rem; max-width: 34rem;
}

hr.rule { border: 0; border-top: 1px solid var(--rule); margin: 3.2rem auto; width: 62%; }

.ornament {
  text-align: center; color: var(--ink-3); font-size: 1.15rem;
  margin: 3rem 0; user-select: none;
}
.ornament span { display: inline-block; transition: transform 500ms ease; }
.ornament:hover span { transform: rotate(180deg); }

/* ---------------- masthead ---------------- */
header.masthead { text-align: center; margin-bottom: 2.6rem; }
.mast-rules { border: 0; border-top: 1px solid var(--ink); border-bottom: 1px solid var(--ink); height: 4px; margin: 0; }
.mast-row {
  display: flex; align-items: center; justify-content: space-between;
  gap: 1rem; padding: 1.1rem 0 0.7rem;
}
.mast-side {
  flex: 1; font-size: 0.72rem; letter-spacing: 0.22em; text-transform: uppercase;
  color: var(--ink-3); white-space: nowrap;
}
.mast-side.left { text-align: left; }
.mast-side.right { text-align: right; }
.mast-center { flex: 0 1 auto; }
.colophon-mark { display: block; margin: 0 auto 0.25rem; width: 58px; height: 36px; color: var(--ink-2); }
.colophon-mark .drop { transition: transform 300ms ease; }
.mast-center:hover .colophon-mark .drop { transform: translateY(3px); }
a.mast-title {
  font-variant: small-caps; letter-spacing: 0.18em; font-size: 1.55rem;
  text-decoration: none; display: inline-block; line-height: 1.1;
}
.mast-motto { display: block; font-style: italic; font-size: 0.8rem; color: var(--ink-3); margin-top: 0.1rem; }
nav.mast-nav {
  border-top: 1px solid var(--rule); margin-top: 0.8rem; padding: 0.5rem 0 0.55rem;
  font-variant: small-caps; letter-spacing: 0.18em; font-size: 0.88rem; color: var(--ink-2);
}
nav.mast-nav a { text-decoration: none; padding: 0 0.75rem; }
nav.mast-nav a:hover { text-decoration: underline; text-underline-offset: 4px; }
nav.mast-nav a[aria-current="page"] { color: var(--ink); border-bottom: 2px solid var(--ink); padding-bottom: 2px; }
nav.mast-nav .nav-dot { color: var(--ink-3); }

/* ---------------- breadcrumb ---------------- */
.crumb { text-align: center; font-size: 0.82rem; font-style: italic; color: var(--ink-3); margin: 0 0 1.6rem; }
.crumb a { text-decoration: none; border-bottom: 1px dotted var(--rule); }
.crumb a:hover { border-bottom-color: var(--ink); }

/* ---------------- hero ---------------- */
header.hero { text-align: center; margin-bottom: 3rem; position: relative; }
.hero-house { font-size: 0.8rem; letter-spacing: 0.3em; text-transform: uppercase; color: var(--ink-3); margin: 0 0 0.4rem; }
h1.title { font-size: 2.9rem; line-height: 1.08; letter-spacing: 0.02em; margin: 0.6rem 0 1rem; font-variant: small-caps; }
.pg-method h1.title, .pg-library h1.title { font-size: 2.5rem; line-height: 1.1; }
.pg-model h1.title { font-size: 2.6rem; line-height: 1.1; margin: 0 0 0.6rem; }
.tagline { font-style: italic; font-size: 1.25rem; color: var(--ink-2); margin: 0 0 2rem; }
.pg-method .tagline, .pg-library .tagline { font-size: 1.2rem; margin-bottom: 1.6rem; }
.pg-model .tagline { font-size: 1.15rem; margin: 0 0 1.4rem; }
.intro { text-align: justify; hyphens: auto; margin: 0 auto 1.4rem; }
/* float drop cap (fallback): sized in em of the paragraph so cap top meets line one's cap height and the
   letter's baseline meets line three's, at Georgia's metrics and the body's 1.62 line-height */
.intro::first-letter { float: left; font-size: 5.69em; line-height: 0.8; padding: 0.022em 0.1em 0 0; color: var(--ink); }
.status-line {
  text-align: center; font-size: 0.85rem; color: var(--ink-2); font-style: italic;
  border-top: 1px solid var(--rule); border-bottom: 1px solid var(--rule);
  padding: 0.55rem 0.8rem; margin: 2rem auto 0; max-width: 34rem;
}
.pg-model .status-line, .pg-library .status-line { margin-top: 1.6rem; }
.pg-library .status-line { max-width: 36rem; }
.status-line .smallcaps { font-style: normal; color: var(--ink); }

/* ---------------- essay ---------------- */
.essay p.lead::first-letter { float: left; font-size: 5.69em; line-height: 0.8; padding: 0.022em 0.1em 0 0; color: var(--ink); }
.essay p { text-align: justify; hyphens: auto; }

/* ---------------- rubber stamps ---------------- */
.stamp {
  display: inline-block; border: 2px solid var(--stamp-red); color: var(--stamp-red);
  border-radius: 4px; padding: 0.18em 0.6em; font-size: 0.66rem;
  font-variant: normal; font-style: normal; letter-spacing: 0.24em; text-transform: uppercase;
  transform: rotate(-5deg); opacity: 0.82; white-space: nowrap; user-select: none;
  box-shadow: inset 0 0 0 1px rgba(168, 53, 42, 0.25);
}
.stamp.blue { border-color: var(--stamp-blue); color: var(--stamp-blue); box-shadow: inset 0 0 0 1px rgba(45, 79, 124, 0.25); }
.stamp.mini { font-size: 0.56rem; padding: 0.1em 0.4em; letter-spacing: 0.18em; transform: rotate(-4deg); margin-left: 0.5rem; vertical-align: 0.15em; }
.board-head { position: relative; }

/* the home page front-loads the standings: tighter vertical rhythm above the table */
.pg-home header.masthead { margin-bottom: 1.7rem; }
.pg-home header.hero { margin-bottom: 1.2rem; }
.pg-home h1.title { font-size: 2.1rem; margin: 0.3rem 0 0.7rem; }
.pg-home .intro { margin-bottom: 0.4rem; }
.pg-home .intro::first-letter { font-size: 3.34em; line-height: 0.9; padding-top: 0.03em; } /* two lines */
/* browsers that support initial-letter get a drop cap aligned to the cap height of line one and the
   baseline of its last line; the float rules above remain as the fallback for everyone else */
@supports (initial-letter: 2) or (-webkit-initial-letter: 2) {
  .intro::first-letter, .essay p.lead::first-letter {
    float: none; font-size: inherit; line-height: inherit; padding: 0;
    -webkit-initial-letter: 3; initial-letter: 3; margin-right: 0.14em;
  }
  .pg-home .intro::first-letter { -webkit-initial-letter: 2; initial-letter: 2; }
}
.pg-home #standings .section-sub { margin-bottom: 1.1rem; }
.hero .stamp.live { position: absolute; right: -0.5rem; top: -0.4rem; transform: rotate(7deg); }

/* ---------------- stat plaques ---------------- */
.plaques { display: flex; gap: 1.2rem; justify-content: center; margin: 1.8rem 0 0.8rem; flex-wrap: wrap; }
.plaque {
  border: 1px solid var(--ink-2); outline: 1px solid var(--rule); outline-offset: 3px;
  background: var(--paper-deep); padding: 0.8rem 1.5rem 0.7rem; min-width: 9.5rem; text-align: center;
}
.plaque .k { display: block; font-variant: small-caps; letter-spacing: 0.18em; font-size: 0.75rem; color: var(--ink-2); }
.plaque .v { display: block; font-size: 1.9rem; line-height: 1.15; }
.plaque.lead .v { font-size: 2.5rem; font-weight: bold; }
.plaque .sub { display: block; font-size: 0.72rem; font-style: italic; color: var(--ink-3); }

/* ---------------- leaderboard table ---------------- */
.table-wrap { overflow-x: auto; }
table.board { width: 100%; border-collapse: collapse; margin: 0 0 0.6rem; font-size: 0.95rem; }
table.board caption { caption-side: top; text-align: left; font-style: italic; color: var(--ink-2); font-size: 0.9rem; padding-bottom: 0.55rem; }
table.board th {
  font-weight: normal; font-variant: small-caps; letter-spacing: 0.1em; font-size: 0.88rem;
  color: var(--ink-2); text-align: right; padding: 0.4rem 0.45rem 0.45rem;
  border-top: 1px solid var(--ink); border-bottom: 1px solid var(--rule); white-space: nowrap;
}
table.board th.c-rank, table.board th.c-model { text-align: left; }
table.board th.c-book { text-align: left; padding-left: 0.2rem; }
table.board td {
  padding: 0.5rem 0.45rem; text-align: right; border-bottom: 1px solid var(--rule-faint);
  font-variant-numeric: tabular-nums; white-space: nowrap; vertical-align: middle;
}
table.board td.c-rank, table.board td.c-model { text-align: left; font-variant-numeric: normal; }
table.board td.c-model, table.board td.c-book { white-space: normal; }
table.board td.c-book { text-align: left; padding-left: 0.2rem; font-variant-numeric: normal; }
table.board tr:last-child td { border-bottom: 1px solid var(--ink); }
table.board tbody tr { transition: background 140ms ease; }
table.board tbody tr:hover { background: var(--paper-deep); }
td.hl { font-weight: bold; font-size: 1.04rem; }
td.dim { color: var(--ink-2); }
.book-title { font-style: italic; }
.book-sub { display: block; font-size: 0.76rem; color: var(--ink-3); font-style: italic; }
.split-note { color: var(--ink-3); }

/* the book-spine accent: tilts on row hover */
.spine {
  display: inline-block; width: 5px; height: 1.55em; border-radius: 1px;
  background: var(--ink-3); margin-right: 0.55rem; vertical-align: -0.35em;
  transition: transform 180ms ease, background 180ms ease; transform-origin: 50% 90%;
}
tbody tr:hover .spine { transform: rotate(-10deg); background: var(--ink); }

.rank-plain { display: inline-block; width: 34px; text-align: center; color: var(--ink-2); }
.rank-star { color: var(--ink-3, var(--ink-2)); font-size: 0.95em; }
.model-variants { margin-top: 0.3rem; font-size: 0.7rem; font-style: normal; display: flex; flex-wrap: wrap; gap: 0.3rem; align-items: center; }
.model-variants .vlab { font-style: italic; color: var(--ink-3); margin-right: 0.15rem; }
.eff-chip { display: inline-flex; align-items: baseline; gap: 0.35em; padding: 0.05em 0.45em 0.1em; border: 1px solid var(--rule);
  border-radius: 2px; text-decoration: none; color: var(--ink-2); background: var(--paper-deep); line-height: 1.35; white-space: nowrap; }
.eff-chip:hover { border-color: var(--ink-3); color: var(--ink); }
.eff-chip .eff-name { font-variant: small-caps; letter-spacing: 0.08em; }
.eff-chip .eff-score { font-variant-numeric: tabular-nums; }
.eff-chip .rank-star { margin-left: 0.1em; }
.eff-tag { font-size: 0.78em; font-style: italic; color: var(--ink-3); margin-left: 0.15em; }
.rank-dash { color: var(--rule); }
table.board tr.variant { display: none; }
table.board.show-all tr.variant { display: table-row; }
table.board.show-all .model-variants { display: none; }
table.board tr.variant td { color: var(--ink-2); border-top-style: dotted; }
table.board tr.variant .model-name { font-style: italic; }
table.board tr.variant .hl { font-weight: normal; }
table.board tr.variant td.c-model { padding-left: 1.1rem; }
.board-toggle { text-align: right; margin: -0.6rem 0 0.4rem; font-size: 0.8rem; }
button.linkish { background: none; border: 0; padding: 0; font: inherit; color: var(--ink-2);
  cursor: pointer; font-style: italic; border-bottom: 1px dotted var(--rule); }
button.linkish:hover { color: var(--ink); border-bottom-color: var(--ink-2); }
/* scatter legend as toggles */
.legend .lg-item { display: inline-flex; align-items: baseline; cursor: pointer; user-select: none; }
.legend .lg-item input { position: absolute; opacity: 0; width: 0; height: 0; }
.legend .lg-item .key { background: var(--c); box-shadow: inset 0 0 0 1.5px var(--c); }
.legend .lg-item.off { color: var(--ink-3); }
.legend .lg-item.off .key { background: transparent; }
.legend .lg-item:hover .key { filter: brightness(1.15); }
.legend .lg-all { gap: 0.5rem; font-size: 0.78rem; }
.sdot.off, .sc-lines polyline.off { display: none; }
table.board tbody tr.unranked td { color: var(--ink-2); }
table.board tbody tr.unranked .model-name { font-style: italic; }
table.board tbody tr.unranked .hl { font-weight: normal; }
.laurel { width: 34px; height: 27px; vertical-align: -0.55em; }
.laurel text { font-family: Georgia, 'Times New Roman', Times, serif; }
.l1 { color: var(--gold); } .l2 { color: var(--silver); } .l3 { color: var(--bronze); }
tbody tr:hover .laurel { transform: rotate(-6deg); transition: transform 180ms ease; }

.model-name { font-style: normal; }
a.model-link { text-decoration: none; border-bottom: 1px dotted var(--rule); }
a.model-link:hover { border-bottom-color: var(--ink); }
.model-sub { display: block; font-size: 0.76rem; color: var(--ink-3); font-style: italic; }
.fn-mark { color: var(--ink-3); text-decoration: none; }

.footnote { font-size: 0.82rem; color: var(--ink-2); line-height: 1.55; margin-top: 0.9rem; }
.footnote sup { color: var(--ink-3); }
.footnote .stamp { margin: 0 0.35rem; }

/* ============================================================
   CHARTS — thin marks, 4px rounded data ends, hairline grids,
   ink-colored value labels; legend only where series >= 2.
   ============================================================ */
.chart { margin: 1.8rem 0 0.4rem; --label-w: 9.5rem; }
.pg-model .chart { --label-w: 10.5rem; }
.pg-model .chart.narrow { --label-w: 8.5rem; }
.pg-library .chart { --label-w: 12.5rem; max-width: 44rem; margin-left: auto; margin-right: auto; }
.chart-title { font-style: italic; color: var(--ink-2); font-size: 0.9rem; margin-bottom: 1.1rem; }

.bar-row, .dot-row, .group-row {
  display: grid; grid-template-columns: var(--label-w) 1fr; align-items: center;
  column-gap: 0.9rem; padding: 0.3rem 0; cursor: default; outline: none;
}
.pg-library .bar-row, .pg-library .dot-row { padding: 0.22rem 0; }
.bar-row:focus-visible .bar-label, .dot-row:focus-visible .bar-label,
.group-row:focus-visible .bar-label { text-decoration: underline; }
.bar-label { font-size: 0.9rem; color: var(--ink); text-align: right; line-height: 1.25; }
.bar-label i { font-size: 0.88rem; }
.pg-library .bar-label { font-size: 0.88rem; font-style: italic; }

.bar-track, .dot-track {
  position: relative; height: 13px;
  background-image:
    linear-gradient(to right, var(--rule-faint) 1px, transparent 1px),
    linear-gradient(to right, var(--rule-faint) 1px, transparent 1px),
    linear-gradient(to right, var(--rule-faint) 1px, transparent 1px),
    linear-gradient(to right, var(--rule-faint) 1px, transparent 1px);
  background-repeat: no-repeat;
  background-position: 25% 0, 50% 0, 75% 0, 100% 0;
  background-size: 1px 100%, 1px 100%, 1px 100%, 1px 100%;
}
.dot-track { height: 15px; }
.pg-library .dot-track, .pg-library .bar-track { height: 14px; }
.bar-track.g2 { background-position: 50% 0, 100% 0, 100% 0, 100% 0; }
.bar {
  position: relative; height: 100%; background: var(--series-1);
  border-radius: 0 4px 4px 0; transition: filter 120ms ease;
}
.bar.s2 { background: var(--series-2); }
.bar.s3 { background: var(--series-3); }
.bar-row:hover .bar, .bar-row:focus-visible .bar,
.group-row:hover .bar, .group-row:focus-visible .bar { filter: brightness(1.12); }
.bar-value {
  position: absolute; left: 100%; top: 50%; transform: translateY(-50%);
  margin-left: 8px; font-size: 0.8rem; color: var(--ink-2);
  font-variant-numeric: tabular-nums; white-space: nowrap;
}
.bar-value.inside { left: auto; right: 6px; margin-left: 0; color: #fffdf6; }

/* grouped bars (3 series) */
.gbars .bar-track { height: 9px; margin-bottom: 2px; }  /* 2px surface gap */
.gbars .bar-track:last-child { margin-bottom: 0; }
.gbars .bar-value { font-size: 0.72rem; margin-left: 6px; }
.group-row { padding: 0.45rem 0; }

/* legend (>= 2 series) */
.legend { display: flex; gap: 1.6rem; align-items: baseline; margin: 0 0 0.9rem; font-size: 0.82rem; color: var(--ink-2); flex-wrap: wrap; }
.legend.legend-lines { gap: 0.6rem 1.9rem; }
.legend .lg { display: inline-flex; gap: 0.75rem; align-items: baseline; }
.legend .lg em { font-style: italic; color: var(--ink-3); margin-right: -0.1rem; }
.legend .key { display: inline-block; width: 9px; height: 9px; border-radius: 50%; margin-right: 0.4rem; vertical-align: -1px; }
.legend .sw  { display: inline-block; width: 12px; height: 9px; border-radius: 0 2px 2px 0; background: var(--series-1); margin-right: 0.4rem; }
.legend .capk { display: inline-block; width: 2px; height: 11px; background: var(--ink-2); margin-right: 0.5rem; vertical-align: -2px; }
.k-comp, .k-s1 { background: var(--series-1); }
.k-craft, .k-s2 { background: var(--series-2); }
.k-s3 { background: var(--series-3); }
.k-s4 { background: var(--series-4); }
.k-s5 { background: var(--series-5); }
.k-s6 { background: var(--series-6); }
.k-s7 { background: var(--series-7); }
.legend .key.j1 { background: var(--series-1); }
.legend .key.j2 { background: var(--series-2); }
.legend .key.j3 { background: var(--series-3); }

/* dot plot (dumbbell) */
.dot-conn { position: absolute; top: 50%; height: 2px; transform: translateY(-50%); background: var(--rule); }
.dot {
  position: absolute; top: 50%; width: 9px; height: 9px; border-radius: 50%;
  transform: translate(-50%, -50%); background: var(--series-1);
  box-shadow: 0 0 0 2px var(--paper); /* surface ring */
  transition: filter 120ms ease;
}
.dot.d-comp, .dot.j1 { background: var(--series-1); }
.dot.d-craft, .dot.j2 { background: var(--series-2); }
.dot.j3 { background: var(--series-3); }
.dot-row:hover .dot, .dot-row:focus-visible .dot { filter: brightness(1.18); }

/* cap marker for the words chart */
.cap-tick { position: absolute; top: -3px; bottom: -3px; width: 2px; background: var(--ink-2); }

/* year labels on the timeline */
.yv {
  position: absolute; top: 50%; transform: translateY(-50%);
  font-size: 0.76rem; color: var(--ink-2); font-variant-numeric: tabular-nums; white-space: nowrap;
}

.chart-axis { display: grid; grid-template-columns: var(--label-w) 1fr; column-gap: 0.9rem; margin-top: 0.35rem; }
.axis-line { grid-column: 2; position: relative; border-top: 1px solid var(--rule); height: 1.5rem; }
.axis-tick { position: absolute; top: 0.25rem; transform: translateX(-50%); font-size: 0.75rem; color: var(--ink-3); font-variant-numeric: tabular-nums; }
.axis-tick.t0 { left: 0; transform: none; }
.axis-tick.t20 { left: 20%; } .axis-tick.t25 { left: 25%; }
.axis-tick.t40 { left: 40%; } .axis-tick.t50 { left: 50%; }
.axis-tick.t60 { left: 60%; } .axis-tick.t75 { left: 75%; }
.axis-tick.t80 { left: 80%; }
.axis-tick.t100 { left: 100%; transform: translateX(-100%); }
.axis-caption { grid-column: 2; font-size: 0.78rem; font-style: italic; color: var(--ink-3); margin-top: 0.1rem; }

/* ---------------- scatter: cost vs headline ---------------- */
.scatter { display: grid; grid-template-columns: 3.2rem 1fr; column-gap: 0.6rem; margin-top: 1.4rem; }
.sc-ylab { position: relative; }
.sc-ylab span {
  position: absolute; right: 0; transform: translateY(50%);
  font-size: 0.75rem; color: var(--ink-3); font-variant-numeric: tabular-nums;
}
.sc-plot {
  position: relative; height: 340px;
  border-left: 1px solid var(--rule); border-bottom: 1px solid var(--rule);
}
.gl-h { position: absolute; left: 0; right: 0; height: 1px; background: var(--rule-faint); }
.gl-v { position: absolute; top: 0; bottom: 0; width: 1px; background: var(--rule-faint); }
.sdot {
  position: absolute; width: 26px; height: 26px; margin-left: -13px; margin-bottom: -13px;
  display: flex; align-items: center; justify-content: center;
  outline: none; cursor: default;   /* hit target far larger than the mark */
}
.sdot .pt {
  width: 9px; height: 9px; border-radius: 50%; background: var(--c, var(--series-1));
  box-shadow: 0 0 0 2px var(--paper); transition: filter 120ms ease, opacity 120ms ease;
}
.sdot:hover .pt, .sdot:focus-visible .pt { filter: brightness(1.18); }
.sdot:focus-visible .slabel { text-decoration: underline; }
.sdot.dim .pt { opacity: 0.35; }
.sdot.dim .slabel { opacity: 0.45; }
.slabel { transition: opacity 120ms ease; }
.slabel.hid { opacity: 0; }
.sdot.lit .slabel.hid { opacity: 1; }
.slabel { position: absolute; font-size: 0.72rem; color: var(--ink-2); white-space: nowrap; line-height: 1.1; }
.slabel.eff { font-size: 0.66rem; font-style: italic; color: var(--ink-3); }
/* effort curves: one polyline per model generation, drawn under the dots */
.sc-lines { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; pointer-events: none; }
.sc-lines polyline { fill: none; stroke-width: 1.4; stroke-opacity: 0.55; stroke-linejoin: round; stroke-linecap: round; vector-effect: non-scaling-stroke; transition: stroke-opacity 120ms ease, stroke-width 120ms ease; }
.sc-lines polyline.lit { stroke-opacity: 1; stroke-width: 2.2; }
.sc-lines polyline.dim { stroke-opacity: 0.18; }
.slabel.lr { left: 100%; margin-left: -1px; top: 50%; transform: translateY(-50%); }
.slabel.ll { right: 100%; margin-right: -1px; top: 50%; transform: translateY(-50%); }
.slabel.lt.la, .slabel.lb.la { left: 4px; transform: none; }
.slabel.lt.ra, .slabel.lb.ra { left: auto; right: 4px; transform: none; }
.slabel.lt { bottom: 100%; margin-bottom: -5px; left: 50%; transform: translateX(-50%); }
.slabel.lb { top: 100%; margin-top: -5px; left: 50%; transform: translateX(-50%); }
.slabel.lrt { left: 100%; margin-left: -1px; bottom: 50%; margin-bottom: 2px; }
.slabel.lrb { left: 100%; margin-left: -1px; top: 50%; margin-top: 2px; }
.slabel.llt { right: 100%; margin-right: -1px; bottom: 50%; margin-bottom: 2px; }
.slabel.llb { right: 100%; margin-right: -1px; top: 50%; margin-top: 2px; }

/* full-text sample chapters */
.chapter-prose { max-width: 38rem; margin: 1.6rem auto 0; }
.chapter-prose p { margin: 0 0 0.4rem; text-indent: 1.4em; line-height: 1.7; }
.chapter-prose p:first-child { text-indent: 0; }

/* dotted guides from the hovered dot down to the x axis and left to the y axis */
.sc-guide { position: absolute; display: none; pointer-events: none; }
.sc-guide.gv { width: 0; border-left: 1px dotted var(--ink-3); }
.sc-guide.gh { height: 0; border-top: 1px dotted var(--ink-3); }
.sc-xaxis { grid-column: 2; position: relative; height: 1.5rem; }
.sc-xaxis span { position: absolute; top: 0.25rem; transform: translateX(-50%); font-size: 0.75rem; color: var(--ink-3); font-variant-numeric: tabular-nums; }
.sc-xaxis span.e0 { left: 0; transform: none; }
.sc-xaxis span.e100 { left: 100%; transform: translateX(-100%); }
.sc-caption { grid-column: 2; font-size: 0.78rem; font-style: italic; color: var(--ink-3); margin-top: 0.1rem; }

/* ---------------- tooltip ---------------- */
#tip {
  position: fixed; z-index: 30; max-width: 19rem; background: #fffdf6; color: var(--ink);
  border: 1px solid var(--rule); box-shadow: 2px 3px 0 rgba(38, 33, 26, 0.12);
  padding: 0.55rem 0.8rem 0.6rem; font-size: 0.82rem; line-height: 1.45;
  pointer-events: none; display: none;
}
#tip .tip-head {
  font-variant: small-caps; letter-spacing: 0.06em;
  border-bottom: 1px solid var(--rule-faint); padding-bottom: 0.25rem; margin-bottom: 0.35rem;
}
#tip .tip-sub { display: block; font-style: italic; font-size: 0.75rem; color: var(--ink-3); font-variant: normal; letter-spacing: 0; }
#tip .tip-row { display: flex; align-items: baseline; gap: 0.5rem; white-space: nowrap; }
#tip .tip-key { display: inline-block; width: 12px; height: 0; border-top: 2px solid transparent; transform: translateY(-3px); flex: none; }
#tip .tip-key.c { border-top-color: var(--series-1); }
#tip .tip-key.k { border-top-color: var(--series-2); }
#tip .tip-key.a { border-top-color: var(--series-3); }
#tip .tip-key.d { border-top-color: var(--series-4); }
#tip .tip-key.e { border-top-color: var(--series-5); }
#tip .tip-key.f { border-top-color: var(--series-6); }
#tip .tip-key.g { border-top-color: var(--series-7); }
#tip .tip-row b { font-variant-numeric: tabular-nums; min-width: 2.9em; }
#tip .tip-row span { color: var(--ink-2); font-style: italic; }

/* ---------------- pull quotes ---------------- */
.pulls { margin-top: 2.2rem; }
blockquote.pull { margin: 0 auto 2.4rem; max-width: 38rem; text-align: left; }
blockquote.pull p.q { font-style: italic; font-size: 1.02rem; line-height: 1.66; margin: 0 0 0.55rem; text-indent: 1.4rem; }
blockquote.pull p.q::before { content: "\201C"; margin-left: -0.55em; }
blockquote.pull p.q::after { content: "\201D"; }
blockquote.pull footer { font-size: 0.82rem; color: var(--ink-2); text-align: right; }
blockquote.pull footer::before { content: "\2014\2002"; color: var(--ink-3); }
blockquote.pull footer .smallcaps { letter-spacing: 0.08em; }

/* ---------------- link strip ---------------- */
.link-strip { list-style: none; margin: 2rem 0 0; padding: 0; }
.link-strip li { display: flex; align-items: baseline; gap: 0.6rem; padding: 0.55rem 0; border-bottom: 1px solid var(--rule-faint); font-size: 0.98rem; }
.link-strip li:first-child { border-top: 1px solid var(--rule-faint); }
.link-strip a { text-decoration: none; font-variant: small-caps; letter-spacing: 0.12em; }
.link-strip a:hover { text-decoration: underline; text-underline-offset: 4px; }
.link-strip .dots { flex: 1; border-bottom: 1px dotted var(--rule); transform: translateY(-4px); min-width: 1.2rem; }
.link-strip .whither { font-style: italic; color: var(--ink-3); font-size: 0.85rem; }

/* ---------------- mechanical docket ---------------- */
.docket { list-style: none; margin: 1.8rem auto 0; padding: 0; max-width: 34rem; font-size: 0.92rem; }
.docket li { display: flex; align-items: baseline; gap: 0.6rem; padding: 0.4rem 0; border-bottom: 1px solid var(--rule-faint); }
.docket li:first-child { border-top: 1px solid var(--rule-faint); }
.docket .k { font-variant: small-caps; letter-spacing: 0.1em; font-size: 0.85rem; color: var(--ink-2); }
.docket .dots { flex: 1; border-bottom: 1px dotted var(--rule); transform: translateY(-4px); min-width: 1.2rem; }
.docket .v { font-variant-numeric: tabular-nums; text-align: right; }
.docket .v i { color: var(--ink-3); font-size: 0.82rem; }

/* ---------------- pipeline SVG ---------------- */
.pipeline-wrap { margin: 2rem 0 0.6rem; }
.pipeline { width: 100%; height: auto; display: block; }
.pipeline text { font-family: Georgia, 'Times New Roman', Times, serif; }
.pipeline-caption { text-align: center; font-size: 0.8rem; font-style: italic; color: var(--ink-3); margin-top: 0.5rem; }

/* ---------------- editor's memo ---------------- */
.memo {
  border: 1px solid var(--ink-2); outline: 1px solid var(--rule); outline-offset: 4px;
  background: var(--paper-deep); padding: 1.5rem 1.8rem 1.1rem; margin: 2.2rem auto;
  max-width: 38rem; font-size: 0.92rem; position: relative;
}
.memo-head { text-align: center; border-bottom: 1px solid var(--rule); padding-bottom: 0.7rem; margin-bottom: 1rem; }
.memo-head .from { font-variant: small-caps; letter-spacing: 0.22em; font-size: 0.8rem; color: var(--ink-2); }
.memo-head .re { font-style: italic; margin: 0.25rem 0 0; }
.memo dt { font-variant: small-caps; letter-spacing: 0.14em; font-size: 0.8rem; color: var(--ink-2); margin-top: 0.9rem; }
.memo dd { margin: 0.2rem 0 0; line-height: 1.55; }
.memo dl { margin: 0; }
.memo ol { margin: 0.2rem 0 0; padding-left: 1.3rem; }
.memo ol li { margin-bottom: 0.2rem; }
.memo .memo-foot { font-style: italic; color: var(--ink-3); font-size: 0.8rem; text-align: right; margin: 1.1rem 0 0; }
.memo .stamp { position: absolute; right: -0.7rem; top: -0.8rem; transform: rotate(7deg); background: var(--paper); }

/* ---------------- formula box ---------------- */
.formula-box {
  border: 1px solid var(--ink-2); outline: 1px solid var(--rule); outline-offset: 4px;
  padding: 1.4rem 1.6rem; margin: 2.2rem auto; max-width: 34rem; text-align: center;
}
.formula-box .eq { font-style: italic; font-size: 1.25rem; margin: 0 0 0.9rem; }
.formula-box .eq .op { font-style: normal; color: var(--ink-3); padding: 0 0.4em; }
.formula-box .gloss { font-size: 0.85rem; color: var(--ink-2); margin: 0.3rem 0 0; }
.formula-box .gloss b { font-variant: small-caps; letter-spacing: 0.1em; font-weight: normal; }

/* ---------------- worked example ---------------- */
.worked {
  border: 1px solid var(--ink-2); outline: 1px solid var(--rule); outline-offset: 4px;
  padding: 1.4rem 1.6rem 1.2rem; margin: 2.2rem auto 0; max-width: 40rem;
}
.worked-head {
  text-align: center; font-variant: small-caps; letter-spacing: 0.14em; font-size: 0.85rem;
  color: var(--ink-2); border-bottom: 1px solid var(--rule); padding-bottom: 0.6rem; margin-bottom: 1.1rem;
}
.worked-cols { display: grid; grid-template-columns: 1fr 1fr; gap: 2rem; }
.wcol h3 { font-variant: small-caps; letter-spacing: 0.14em; font-size: 0.82rem; color: var(--ink-2); margin: 0 0 0.6rem; }
.wrow { display: flex; align-items: center; gap: 0.5rem; padding: 0.22rem 0; font-size: 0.85rem; }
.wrow .wk { flex: 0 0 6.2rem; color: var(--ink-2); }
.wrow .wv { margin-left: auto; font-variant-numeric: tabular-nums; white-space: nowrap; }
.pip { display: inline-block; width: 9px; height: 9px; border-radius: 50%; border: 1px solid var(--series-1); margin-right: 3px; vertical-align: -1px; }
.pip.on { background: var(--series-1); }
.mini-track { flex: 1; position: relative; height: 8px; background: var(--rule-faint); border-radius: 0 4px 4px 0; }
.mini-bar { position: absolute; left: 0; top: 0; bottom: 0; background: var(--series-1); border-radius: 0 4px 4px 0; }
.wsum { border-top: 1px solid var(--rule-faint); margin-top: 0.7rem; padding-top: 0.5rem; font-size: 0.88rem; text-align: right; }
.wsum b { font-variant-numeric: tabular-nums; }
.worked-eq {
  border-top: 1px solid var(--rule); margin-top: 1.2rem; padding-top: 0.9rem;
  text-align: center; font-style: italic; font-size: 1.1rem;
}
.worked-eq .op { font-style: normal; color: var(--ink-3); padding: 0 0.3em; }
.worked-eq b { font-style: normal; }

/* ---------------- limitations ---------------- */
.caveats { list-style: none; margin: 1.6rem 0 0; padding: 0; counter-reset: caveat; }
.caveats li { position: relative; padding: 0.7rem 0 0.7rem 2.6rem; border-bottom: 1px solid var(--rule-faint); text-align: justify; hyphens: auto; }
.caveats li::before {
  counter-increment: caveat; content: counter(caveat, lower-roman) ".";
  position: absolute; left: 0.4rem; top: 0.7rem; color: var(--ink-3); font-style: italic;
}

/* ---------------- bookplates ---------------- */
.shelf { display: grid; grid-template-columns: 1fr 1fr; gap: 1.6rem; margin-top: 2.2rem; }
.plate {
  border: 1px solid var(--ink-2); outline: 1px solid var(--rule); outline-offset: 4px;
  background: var(--paper); padding: 1.3rem 1.4rem 1.1rem; position: relative;
  transition: transform 200ms ease, box-shadow 200ms ease;
}
.plate:hover { transform: rotate(-0.6deg) translateY(-2px); box-shadow: 3px 4px 0 rgba(38, 33, 26, 0.10); }
.plate .corner {
  position: absolute; top: 0.35rem; right: 0.55rem; color: var(--ink-3);
  font-size: 0.85rem; user-select: none; display: inline-block;
  transition: transform 400ms ease;
}
.plate:hover .corner { transform: rotate(180deg); }
.plate-ex { font-size: 0.66rem; letter-spacing: 0.3em; text-transform: uppercase; color: var(--ink-3); text-align: center; margin: 0 0 0.5rem; }
.plate-title { font-size: 1.18rem; font-style: italic; text-align: center; margin: 0 0 0.1rem; line-height: 1.3; }
.plate-author { text-align: center; font-variant: small-caps; letter-spacing: 0.14em; font-size: 0.85rem; color: var(--ink-2); margin: 0 0 0.9rem; }
.plate-line { display: flex; align-items: baseline; gap: 0.6rem; font-size: 0.85rem; padding: 0.18rem 0; }
.plate-line .k { color: var(--ink-2); font-variant: small-caps; letter-spacing: 0.1em; font-size: 0.78rem; }
.plate-line .dots { flex: 1; border-bottom: 1px dotted var(--rule); transform: translateY(-4px); min-width: 1.2rem; }
.plate-line .v { font-variant-numeric: tabular-nums; }
.plate-note { font-size: 0.82rem; font-style: italic; color: var(--ink-2); border-top: 1px solid var(--rule-faint); margin: 0.8rem 0 0; padding-top: 0.6rem; line-height: 1.5; }

/* ---------------- footer ---------------- */
footer.colophon {
  margin-top: 4rem; border-top: 1px solid var(--ink); padding-top: 1.4rem;
  text-align: center; font-size: 0.82rem; color: var(--ink-2); font-style: italic;
}
footer.colophon .folio {
  font-style: normal; color: var(--ink-3); letter-spacing: 0.28em; font-size: 0.75rem;
  text-transform: uppercase; margin-top: 0.9rem;
}

/* ---------------- 800px degradation ---------------- */
@media (max-width: 840px) {
  body { font-size: 17px; }
  .page { padding: 1.6rem 1.3rem 3rem; }
  h1.title { font-size: 2.2rem; }
  .pg-method h1.title, .pg-library h1.title { font-size: 2rem; }
  .pg-model h1.title { font-size: 2.1rem; }
  .tagline { font-size: 1.1rem; }
  .mast-side { display: none; }
  .chart { --label-w: 7.6rem; }
  .pg-model .chart { --label-w: 8rem; }
  .pg-model .chart.narrow { --label-w: 7rem; }
  .pg-library .chart { --label-w: 8.6rem; }
  .bar-label { font-size: 0.8rem; }
  .pg-library .bar-label { font-size: 0.78rem; }
  hr.rule { width: 80%; }
  .hero .stamp.live { position: static; display: inline-block; margin-bottom: 0.8rem; }
  .sc-plot { height: 300px; }
  .slabel { font-size: 0.66rem; }
  .plaques { gap: 0.8rem; }
  .plaque { min-width: 8rem; padding: 0.7rem 1rem 0.6rem; }
  .memo { padding: 1.2rem 1.1rem 0.9rem; }
  .worked-cols { grid-template-columns: 1fr; gap: 1.2rem; }
  .shelf { grid-template-columns: 1fr; }
}