/* =========================================================================
   spine.fyi — the notebook stylesheet
   One file. One script, and counting is the whole of its job: Google Analytics
   4, property G-JMC34YKWYT, this notebook's own id and no other site's. Apart
   from that tag nothing is fetched from anywhere but this host — no framework,
   no CDN, no webfont service. The part of the old claim worth keeping is that
   the notebook does not need the tag: served on 2026-09-23 with the counter
   refused at the policy layer, the cover still drew in full — this sheet
   applied, one h1, 23 links, 4,056 characters of entry, and window.gtag never
   defined. A blocked reader loses a page view and nothing else.
   Every face is a system stack. Class prefix is nb- throughout, without
   exception, so nothing here can collide with anybody else's sheet.
   ========================================================================= */

:root {
  --nb-mono: ui-monospace, "SF Mono", SFMono-Regular, Menlo, Consolas,
             "DejaVu Sans Mono", "Liberation Mono", monospace;

  /* Paper */
  --nb-paper:   #f7f4ec;
  --nb-paper-2: #efeade;
  --nb-ink:     #22201c;   /* 14.8:1 on paper */
  --nb-ink-2:   #56514a;   /* 7.15:1 on paper */
  --nb-rule:    #c9c2b2;
  --nb-rule-2:  #ddd6c5;
  --nb-pen:     #2f4f7a;   /* 7.58:1 — links, the blue biro */
  --nb-pencil:  #a8351f;   /* 5.98:1 — the red margin pencil */
  --nb-pencil-soft: #d9a99c;

  /* The measure and the margin. The whole layout is these two numbers. */
  --nb-measure: 40rem;
  --nb-margin:  14rem;
  --nb-gutter:  2.75rem;

  /* Type scale, mono, 1.145 ratio held tight because monospace is wide */
  --nb-t-xs: 0.75rem;
  --nb-t-sm: 0.8125rem;
  --nb-t-ms: 0.875rem;
  --nb-t-md: 1rem;
  --nb-t-lg: 1.1875rem;
  --nb-t-xl: 1.4375rem;
  --nb-t-2x: 1.75rem;
  --nb-t-3x: 2.125rem;
}

@media (prefers-color-scheme: dark) {
  :root {
    --nb-paper:   #17181a;
    --nb-paper-2: #202226;
    --nb-ink:     #e8e4da;   /* 13.99:1 */
    --nb-ink-2:   #a8a296;   /* 7.0:1 */
    --nb-rule:    #3a3d42;
    --nb-rule-2:  #2b2e33;
    --nb-pen:     #8fb6e8;   /* 8.48:1 */
    --nb-pencil:  #f0907a;   /* 7.59:1 */
    --nb-pencil-soft: #6c4238;
  }
}

*, *::before, *::after { box-sizing: border-box; }

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

body {
  margin: 0;
  background: var(--nb-paper);
  color: var(--nb-ink);
  font-family: var(--nb-mono);
  font-size: var(--nb-t-md);
  line-height: 1.72;
  font-variant-ligatures: none;
}

/* ---- links ------------------------------------------------------------ */
a { color: var(--nb-pen); text-underline-offset: 3px; text-decoration-thickness: 1px; }
a:hover { text-decoration-thickness: 2px; }
a:focus-visible,
:focus-visible {
  outline: 2px solid var(--nb-pencil);
  outline-offset: 3px;
  border-radius: 1px;
}

/* One transition on the whole site, and it is gone if you ask for it gone. */
a, .nb-tab { transition: text-decoration-thickness 120ms linear; }
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { transition: none !important; animation: none !important; scroll-behavior: auto !important; }
}

.nb-skip {
  position: absolute; left: -9999px; top: 0;
  background: var(--nb-paper); color: var(--nb-ink);
  padding: 0.6rem 1rem; border: 2px solid var(--nb-pencil); z-index: 9;
}
.nb-skip:focus { left: 0.75rem; top: 0.75rem; }

/* ---- the cover stamp -------------------------------------------------- */
.nb-cover {
  border-bottom: 1px solid var(--nb-rule);
  background: var(--nb-paper-2);
}
.nb-cover-in {
  max-width: calc(var(--nb-measure) + var(--nb-margin) + var(--nb-gutter));
  margin: 0 auto;
  padding: 1.4rem 1.25rem 1.1rem;
  display: flex; flex-wrap: wrap; gap: 0.9rem 1.5rem; align-items: baseline;
}
.nb-wordmark {
  font-size: var(--nb-t-lg);
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--nb-ink);
  text-decoration: none;
}
.nb-wordmark:hover { text-decoration: underline; text-underline-offset: 5px; }
.nb-wordmark .nb-dot { color: var(--nb-pencil); }
.nb-stance {
  font-size: var(--nb-t-sm);
  color: var(--nb-ink-2);
  margin: 0;
  max-width: 34rem;
}

.nb-tabs {
  border-bottom: 1px solid var(--nb-rule);
  background: var(--nb-paper);
}
.nb-tabs-in {
  max-width: calc(var(--nb-measure) + var(--nb-margin) + var(--nb-gutter));
  margin: 0 auto; padding: 0 1.25rem;
  display: flex; flex-wrap: wrap; gap: 0.25rem 1.5rem;
}
.nb-tab {
  display: inline-block;
  padding: 0.55rem 0;
  font-size: var(--nb-t-sm);
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--nb-ink-2);
  text-decoration: none;
  border-bottom: 2px solid transparent;
}
.nb-tab:hover { color: var(--nb-ink); border-bottom-color: var(--nb-rule); }
.nb-tab[aria-current="page"] { color: var(--nb-ink); border-bottom-color: var(--nb-pencil); }

/* ---- the leaf: one measure column, one wide margin -------------------- */
.nb-leaf {
  max-width: calc(var(--nb-measure) + var(--nb-margin) + var(--nb-gutter));
  margin: 0 auto;
  padding: 2.5rem 1.25rem 3rem;
}

.nb-run {
  display: grid;
  grid-template-columns: minmax(0, var(--nb-measure)) minmax(0, var(--nb-margin));
  column-gap: var(--nb-gutter);
  align-items: start;
}
.nb-say  { grid-column: 1; grid-row: 1; min-width: 0; }
.nb-mark {
  grid-column: 2; grid-row: 1;
  border-left: 1px solid var(--nb-pencil-soft);
  padding-left: 0.9rem;
  margin: 0.45rem 0 1.2rem;
  font-size: var(--nb-t-xs);
  line-height: 1.6;
  color: var(--nb-ink-2);
}
.nb-mark b, .nb-mark strong { color: var(--nb-ink); font-weight: 700; }
.nb-mark a { color: var(--nb-pen); }

.nb-tick {
  display: inline-block;
  min-width: 1.35em;
  padding: 0 0.25em;
  margin-right: 0.45em;
  text-align: center;
  font-size: var(--nb-t-xs);
  font-weight: 700;
  color: var(--nb-pencil);
  border: 1px solid var(--nb-pencil);
  border-radius: 2px;
  line-height: 1.45;
}

/* ---- prose ------------------------------------------------------------ */
.nb-say p, .nb-say ul, .nb-say ol, .nb-say blockquote, .nb-say dl { margin: 0 0 1.15rem; }
.nb-say ul, .nb-say ol { padding-left: 1.4rem; }
.nb-say li { margin-bottom: 0.5rem; }

h1, h2, h3 { font-weight: 700; line-height: 1.24; letter-spacing: -0.01em; margin: 0; }
h1 { font-size: var(--nb-t-2x); margin-bottom: 0.7rem; }
h2 {
  font-size: var(--nb-t-lg);
  letter-spacing: 0.06em;
  text-transform: uppercase;
  margin: 2.6rem 0 0.9rem;
  padding-top: 0.7rem;
  border-top: 1px solid var(--nb-rule);
}
h3 { font-size: var(--nb-t-md); margin: 1.8rem 0 0.6rem; }

.nb-kicker {
  font-size: var(--nb-t-xs);
  letter-spacing: 0.17em;
  text-transform: uppercase;
  color: var(--nb-pencil);
  margin: 0 0 0.6rem;
}
.nb-lede { font-size: var(--nb-t-md); color: var(--nb-ink-2); margin: 0 0 1.6rem; }

.nb-slug {
  font-size: var(--nb-t-xs);
  color: var(--nb-ink-2);
  letter-spacing: 0.06em;
  margin: 0 0 1.9rem;
  padding-bottom: 0.7rem;
  border-bottom: 1px solid var(--nb-rule);
}
.nb-slug span + span::before { content: " · "; color: var(--nb-rule); }

blockquote.nb-quoted {
  border-left: 3px solid var(--nb-pencil-soft);
  padding: 0.15rem 0 0.15rem 1rem;
  margin: 0 0 1.15rem;
  color: var(--nb-ink);
}
blockquote.nb-quoted cite {
  display: block;
  font-style: normal;
  font-size: var(--nb-t-xs);
  color: var(--nb-ink-2);
  margin-top: 0.4rem;
}

/* A measured fact, set as a ledger line. */
.nb-ledger { width: 100%; border-collapse: collapse; font-size: var(--nb-t-sm); margin: 0 0 1.3rem; }
.nb-ledger caption { text-align: left; font-size: var(--nb-t-xs); color: var(--nb-ink-2); padding-bottom: 0.5rem; letter-spacing: 0.06em; text-transform: uppercase; }
.nb-ledger th, .nb-ledger td { text-align: left; padding: 0.42rem 0.7rem 0.42rem 0; border-bottom: 1px solid var(--nb-rule-2); vertical-align: top; }
.nb-ledger th { font-weight: 700; border-bottom-color: var(--nb-rule); }
.nb-ledger td.nb-num { font-variant-numeric: tabular-nums; white-space: nowrap; }

/* ---- annotated plates ------------------------------------------------- */
.nb-plate { margin: 1.9rem 0 2.2rem; }
.nb-plate-frame {
  position: relative;
  border: 1px solid var(--nb-rule);
  background: var(--nb-paper-2);
  line-height: 0;
}
.nb-plate-frame img { display: block; width: 100%; height: auto; }
.nb-pin {
  position: absolute;
  left: var(--x); top: var(--y);
  transform: translate(-50%, -50%);
  width: 1.65rem; height: 1.65rem;
  display: grid; place-items: center;
  font-family: var(--nb-mono);
  font-size: var(--nb-t-xs); font-weight: 700; line-height: 1;
  color: #fff; background: #a8351f;
  border: 2px solid #f7f4ec;
  border-radius: 50%;
  box-shadow: 0 0 0 1px #a8351f;
}
.nb-plate figcaption {
  font-size: var(--nb-t-xs);
  color: var(--nb-ink-2);
  line-height: 1.6;
  margin-top: 0.7rem;
  padding-left: 0.05rem;
}
.nb-keys { list-style: none; margin: 0.9rem 0 0; padding: 0; font-size: var(--nb-t-sm); }
.nb-keys li { display: flex; gap: 0.5rem; margin: 0 0 0.55rem; line-height: 1.6; }
.nb-keys li .nb-tick { flex: 0 0 auto; margin-right: 0; margin-top: 0.12rem; }

/* A plate sits outside the runs, so it already spans measure + gutter + margin:
   the full leaf. The modifier only names that intent; it adds no offset, because
   an offset here would push the figure past the page. */
.nb-plate--wide { margin-left: 0; margin-right: 0; }

/* ---- the index of entries -------------------------------------------- */
.nb-entries { list-style: none; margin: 0; padding: 0; max-width: var(--nb-measure); }
.nb-entry { border-top: 1px solid var(--nb-rule); padding: 1.3rem 0 1.4rem; }
.nb-entry:last-child { border-bottom: 1px solid var(--nb-rule); }
.nb-entry h3 { margin: 0 0 0.45rem; font-size: var(--nb-t-lg); line-height: 1.3; }
.nb-entry h3 a { color: var(--nb-ink); text-decoration-color: var(--nb-pencil-soft); }
.nb-entry h3 a:hover { color: var(--nb-pen); }
.nb-entry p { margin: 0 0 0.6rem; color: var(--nb-ink-2); font-size: var(--nb-t-sm); }
.nb-meta { font-size: var(--nb-t-xs); color: var(--nb-ink-2); letter-spacing: 0.05em; }
.nb-meta span + span::before { content: " · "; color: var(--nb-rule); }

/* ---- the standing caution -------------------------------------------- */
.nb-caution {
  border: 1px solid var(--nb-pencil-soft);
  border-left-width: 4px;
  padding: 0.95rem 1.1rem;
  margin: 2rem 0 0;
  font-size: var(--nb-t-sm);
  line-height: 1.65;
  color: var(--nb-ink);
  background: var(--nb-paper-2);
}
.nb-caution b { display: block; letter-spacing: 0.08em; text-transform: uppercase; font-size: var(--nb-t-xs); color: var(--nb-pencil); margin-bottom: 0.35rem; }

/* ---- foot ------------------------------------------------------------- */
.nb-foot {
  border-top: 1px solid var(--nb-rule);
  background: var(--nb-paper-2);
  margin-top: 3rem;
}
.nb-foot-in {
  max-width: calc(var(--nb-measure) + var(--nb-margin) + var(--nb-gutter));
  margin: 0 auto;
  padding: 1.6rem 1.25rem 2.2rem;
  font-size: var(--nb-t-xs);
  line-height: 1.7;
  color: var(--nb-ink-2);
}
.nb-foot-in p { margin: 0 0 0.7rem; max-width: 46rem; }
.nb-foot-in p:last-child { margin-bottom: 0; }
.nb-foot-nav { display: flex; flex-wrap: wrap; gap: 0.3rem 1.2rem; margin-bottom: 0.9rem; }

/* ---- narrow: the margin folds under its paragraph --------------------- */
@media (max-width: 62rem) {
  :root { --nb-gutter: 0rem; }
  .nb-run { grid-template-columns: minmax(0, 1fr); }
  .nb-say { grid-column: 1; grid-row: auto; }
  .nb-mark { grid-column: 1; grid-row: auto; margin: 0 0 1.5rem; }
  .nb-plate--wide { margin-right: 0; }
}
@media (max-width: 30rem) {
  body { font-size: 0.9375rem; }
  h1 { font-size: var(--nb-t-xl); }
  .nb-leaf { padding-top: 1.8rem; }
}

@media print {
  .nb-tabs, .nb-skip { display: none; }
  body { background: #fff; color: #000; }
  .nb-mark { border-left-color: #999; }
}