@charset "UTF-8";
/* ============================================================================
   THE GREAT MENTAL MODELS OF ATTENTION
   paper.css — a two-ink press.

   The whole site is printed in two inks on paper: INK (near-black) and
   VERMILION (the second plate). Diagrams use tints of the same two inks and
   nothing else. Dark mode is the same press run on black stock.
   ========================================================================= */

/* ---------------------------------------------------------------- 1. INKS */

:root {
  /* --- paper stock & inks (light) --- */
  --paper:        #f2eee5;
  --paper-deep:   #e9e3d6;
  --paper-edge:   #dcd4c3;
  --ink:          #17150f;
  --ink-soft:     #4a453a;
  --ink-faint:    #8a8272;
  --rule:         #cdc4b0;
  --rule-hair:    #ded6c6;
  --vermilion:    #c0331b;
  --vermilion-lo: #e8d3cb;
  --vermilion-hi: #94240f;

  /* --- type --- */
  --display: "Bodoni Moda", "Didot", "Playfair Display", Georgia, serif;
  --body:    "Newsreader", "Spectral", Georgia, "Times New Roman", serif;
  --mono:    "IBM Plex Mono", "SFMono-Regular", Consolas, monospace;

  /* --- measure & rhythm --- */
  --measure:  34rem;
  --margin-col: 13rem;
  --gutter:   2.5rem;
  --leading:  1.68;

  /* --- motion --- */
  --ease: cubic-bezier(0.22, 0.61, 0.36, 1);

  color-scheme: light;
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --paper:        #100f0d;
    --paper-deep:   #171613;
    --paper-edge:   #201e1a;
    --ink:          #e9e3d6;
    --ink-soft:     #b0a898;
    --ink-faint:    #6f6858;
    --rule:         #3a362e;
    --rule-hair:    #29261f;
    --vermilion:    #e8563a;
    --vermilion-lo: #3a1c15;
    --vermilion-hi: #ff7a5c;
    color-scheme: dark;
  }
}

:root[data-theme="dark"] {
  --paper:        #100f0d;
  --paper-deep:   #171613;
  --paper-edge:   #201e1a;
  --ink:          #e9e3d6;
  --ink-soft:     #b0a898;
  --ink-faint:    #6f6858;
  --rule:         #3a362e;
  --rule-hair:    #29261f;
  --vermilion:    #e8563a;
  --vermilion-lo: #3a1c15;
  --vermilion-hi: #ff7a5c;
  color-scheme: dark;
}

/* ------------------------------------------------------------- 2. RESET  */

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

html {
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
}
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .01ms !important;
  }
}

body {
  margin: 0;
  background: var(--paper);
  color: var(--ink);
  font-family: var(--body);
  font-size: clamp(1.02rem, 0.98rem + 0.22vw, 1.18rem);
  line-height: var(--leading);
  font-weight: 400;
  font-optical-sizing: auto;
  text-rendering: optimizeLegibility;
  -webkit-font-smoothing: antialiased;
}

/* the paper has a tooth to it */
body::before {
  content: "";
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 9999;
  opacity: .5;
  mix-blend-mode: multiply;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='3'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='140' height='140' filter='url(%23n)' opacity='.28'/%3E%3C/svg%3E");
}
:root[data-theme="dark"] body::before { mix-blend-mode: screen; opacity: .16; }
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) body::before { mix-blend-mode: screen; opacity: .16; }
}

img, svg { max-width: 100%; height: auto; }

a {
  color: inherit;
  text-decoration-color: var(--vermilion);
  text-decoration-thickness: 1px;
  text-underline-offset: 0.18em;
  transition: color .18s var(--ease), background-color .18s var(--ease);
}
a:hover { color: var(--vermilion); }

::selection { background: var(--vermilion); color: var(--paper); }

/* ------------------------------------------------------- 3. PAGE FURNITURE */

.progress {
  position: fixed; top: 0; left: 0; height: 2px; width: 0%;
  background: var(--vermilion); z-index: 100;
  transition: width .1s linear;
}

.masthead {
  position: sticky; top: 0; z-index: 60;
  display: flex; align-items: baseline; gap: 1rem;
  padding: .7rem clamp(1rem, 4vw, 3rem);
  background: color-mix(in srgb, var(--paper) 88%, transparent);
  backdrop-filter: blur(8px) saturate(1.1);
  border-bottom: 1px solid var(--rule-hair);
  font-family: var(--mono);
  font-size: .68rem;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--ink-faint);
}
.masthead a { text-decoration: none; }
.masthead .mh-title { color: var(--ink-soft); }
.masthead .mh-folio { margin-left: auto; display: flex; gap: 1.1rem; align-items: baseline; }

.theme-toggle {
  border: 1px solid var(--rule); background: transparent; color: var(--ink-faint);
  font: inherit; letter-spacing: .1em; text-transform: uppercase;
  padding: .18rem .5rem; cursor: pointer; border-radius: 1px;
}
.theme-toggle:hover { color: var(--vermilion); border-color: var(--vermilion); }

/* ------------------------------------------------------------ 4. LAYOUT   */

/* The page is a three-track grid: prose column, margin column for notes,
   and a bleed track for wide figures. */
.sheet {
  display: grid;
  grid-template-columns:
    [bleed-start] minmax(1rem, 1fr)
    [main-start] min(var(--measure), calc(100% - 2rem))
    [main-end] minmax(0, var(--margin-col))
    [bleed-end] minmax(1rem, 1fr);
  column-gap: var(--gutter);
  padding: clamp(2rem, 6vw, 5rem) 0 6rem;
}
.sheet > * { grid-column: main; }
.sheet > .wide  { grid-column: main-start / bleed-end; }
.sheet > .bleed { grid-column: bleed; }

@media (max-width: 62rem) {
  .sheet {
    /* no margin column here — and no gutter, or it eats the measure */
    grid-template-columns: [bleed-start] 1rem [main-start] 1fr [main-end] [bleed-end] 1rem;
    column-gap: 0;
  }
  .sheet > .wide { grid-column: main; }
}

/* ------------------------------------------------------------- 5. TYPE    */

h1, h2, h3, h4 { font-weight: 400; line-height: 1.14; margin: 0; text-wrap: balance; }

.plate-num {
  font-family: var(--display);
  font-size: clamp(4rem, 14vw, 9rem);
  line-height: .8;
  color: var(--vermilion);
  font-weight: 400;
  font-variant-numeric: lining-nums;
}

h1.title {
  font-family: var(--display);
  font-size: clamp(2.1rem, 1.5rem + 3.4vw, 3.9rem);
  letter-spacing: -0.015em;
  margin: .4em 0 .3em;
}

h2 {
  font-family: var(--body);
  font-size: clamp(1.35rem, 1.2rem + .7vw, 1.72rem);
  font-weight: 500;
  margin: 3.2rem 0 .9rem;
  letter-spacing: -.005em;
}
h2::before {
  content: attr(data-sec);
  display: block;
  font-family: var(--mono);
  font-size: .62rem;
  letter-spacing: .18em;
  color: var(--vermilion);
  text-transform: uppercase;
  margin-bottom: .55rem;
}

h3 {
  font-family: var(--body);
  font-size: 1.12rem;
  font-weight: 600;
  margin: 2.1rem 0 .6rem;
}

p { margin: 0 0 1.15em; }
p + p { text-indent: 0; }

.lede {
  font-size: 1.22em;
  line-height: 1.5;
  color: var(--ink-soft);
  font-weight: 300;
  margin-bottom: 2rem;
}

/* drop cap on the first paragraph after the rule */
.dropcap::first-letter {
  font-family: var(--display);
  float: left;
  font-size: 3.34em;
  line-height: .82;
  padding: .06em .1em 0 0;
  color: var(--vermilion);
}

.kicker {
  font-family: var(--mono);
  font-size: .68rem;
  letter-spacing: .2em;
  text-transform: uppercase;
  color: var(--ink-faint);
}

strong, b { font-weight: 600; }
em, i { font-style: italic; }

/* an inline term being defined */
.term { font-weight: 600; font-style: normal; box-shadow: inset 0 -0.42em 0 var(--vermilion-lo); }

code, kbd, samp {
  font-family: var(--mono);
  font-size: .84em;
  background: var(--paper-deep);
  border: 1px solid var(--rule-hair);
  padding: .08em .32em;
  border-radius: 2px;
}

hr.rule {
  border: 0; height: 1px; background: var(--rule);
  margin: 3rem 0;
}
hr.rule-thin { border: 0; height: 1px; background: var(--rule-hair); margin: 2rem 0; }

/* the ornament that closes a lecture */
.colophon-mark {
  text-align: center; color: var(--vermilion);
  font-family: var(--display); font-size: 1.6rem; letter-spacing: .5em;
  margin: 3.5rem 0 2rem;
}

/* -------------------------------------------------- 6. THE MENTAL MODEL   */

.model-card {
  border-top: 2px solid var(--ink);
  border-bottom: 1px solid var(--rule);
  padding: 1.1rem 0 1.3rem;
  margin: 2.2rem 0 2.6rem;
}
.model-card .kicker { color: var(--vermilion); }
.model-card .statement {
  font-family: var(--body);
  font-size: 1.3rem;
  line-height: 1.42;
  font-weight: 500;
  margin: .5rem 0 0;
  text-wrap: pretty;
}

/* -------------------------------------------------------- 7. MARGINALIA   */

.note {
  grid-column: main-end / bleed-end;
  font-family: var(--mono);
  font-size: .7rem;
  line-height: 1.62;
  color: var(--ink-faint);
  border-left: 1px solid var(--vermilion);
  padding-left: .8rem;
  align-self: start;
  margin-top: .35rem;
}
.note b { color: var(--ink-soft); font-weight: 500; }
@media (max-width: 62rem) {
  .note {
    grid-column: main;
    border-left: 2px solid var(--vermilion);
    margin: 0 0 1.6rem;
    padding: .3rem 0 .3rem .8rem;
  }
}

/* ----------------------------------------------------------- 8. FIGURES   */

figure {
  margin: 2.4rem 0;
  padding: 0;
}
figure .bed {
  background: var(--paper-deep);
  border: 1px solid var(--rule-hair);
  padding: 1.4rem;
  position: relative;
  /* engineering grid paper */
  background-image:
    linear-gradient(var(--rule-hair) 1px, transparent 1px),
    linear-gradient(90deg, var(--rule-hair) 1px, transparent 1px);
  background-size: 22px 22px, 22px 22px;
  background-position: -1px -1px;
}
figure figcaption {
  font-family: var(--mono);
  font-size: .68rem;
  line-height: 1.55;
  color: var(--ink-faint);
  margin-top: .7rem;
  padding-left: .1rem;
  text-wrap: pretty;
}
figure figcaption b {
  color: var(--vermilion);
  font-weight: 500;
  letter-spacing: .1em;
  text-transform: uppercase;
  margin-right: .4em;
}

/* --------------------------------------------------- 8b. LINE DIAGRAMS   */
/* Hand-drawn inline SVG plates. Two inks only — everything below inherits
   from the theme, so diagrams flip with light/dark for free.               */

figure .bed.plain { background-image: none; }
figure .bed.tight { padding: .9rem; }

/* On a phone, scaling a 540-unit drawing into a 340px column renders its smallest
   labels at about 4px. Better to keep the drawing legible and let it scroll than to
   shrink it into decoration. The min-widths hold the smallest label above ~7.5px. */
@media (max-width: 44rem) {
  figure .bed { overflow-x: auto; overscroll-behavior-x: contain; }
  figure .bed > .dia { min-width: 30rem; }
  figure.wide .bed > .dia { min-width: 42rem; }
}

.dia { display: block; width: 100%; height: auto; overflow: visible; }

.dia .bx    { fill: none; stroke: var(--ink); stroke-width: 1.25; }
.dia .bx-f  { fill: var(--ink); stroke: none; opacity: .10; }
.dia .ln    { fill: none; stroke: var(--rule); stroke-width: 1; }
.dia .ln-d  { fill: none; stroke: var(--rule); stroke-width: 1; stroke-dasharray: 3 3; }
.dia .hot   { fill: var(--vermilion); stroke: none; }
.dia .hot-o { fill: none; stroke: var(--vermilion); stroke-width: 1.5; }
.dia .hot-f { fill: var(--vermilion); stroke: none; opacity: .14; }
/* Knockouts. Diagrams normally sit inside figure .bed, which is --paper-deep, so
   .knock is the one you want to break a line behind a label. .paper is only correct
   for a diagram placed directly on the page background. */
.dia .knock { fill: var(--paper-deep); stroke: none; }
.dia .paper { fill: var(--paper); stroke: none; }

/* Stroke-weight modifiers. A class rule beats an SVG stroke-width="" attribute, so
   line weight has to be expressible as a class too. These come after the ink classes
   above deliberately — equal specificity, so source order decides the winner. */
.dia .w2 { stroke-width: 2; }
.dia .w3 { stroke-width: 3; }
.dia .w-hair { stroke-width: .75; }
.dia .round { stroke-linecap: round; stroke-linejoin: round; }

.dia text   { font-family: var(--mono); font-size: 11px; fill: var(--ink); }
.dia .t-s   { font-size: 9px; fill: var(--ink-faint); }
.dia .t-h   { font-size: 9.5px; fill: var(--vermilion); letter-spacing: .08em; }
.dia .t-on  { font-size: 10px; fill: var(--paper); }
.dia .t-lbl { font-size: 8.5px; fill: var(--ink-faint); letter-spacing: .14em; }

/* ------------------------------------------------------------ 9. MATH     */

.equation {
  margin: 1.8rem 0;
  padding: 1.1rem 1.2rem;
  background: var(--paper-deep);
  border-left: 2px solid var(--vermilion);
  font-family: var(--mono);
  font-size: .9rem;
  line-height: 1.9;
  overflow-x: auto;
}
.equation .lbl {
  display: block; color: var(--ink-faint); font-size: .68rem;
  letter-spacing: .14em; text-transform: uppercase; margin-bottom: .5rem;
}
.equation em { color: var(--vermilion); font-style: normal; }

/* -------------------------------------------------------- 10. THE LEDGER  */

/* "who actually ships this" table */
table.ledger {
  width: 100%;
  border-collapse: collapse;
  font-size: .84rem;
  margin: 1.8rem 0;
  font-variant-numeric: tabular-nums;
}
table.ledger caption {
  font-family: var(--mono); font-size: .66rem; letter-spacing: .16em;
  text-transform: uppercase; color: var(--ink-faint);
  text-align: left; padding-bottom: .6rem;
}
table.ledger th {
  text-align: left; font-weight: 600; font-size: .68rem;
  font-family: var(--mono); letter-spacing: .1em; text-transform: uppercase;
  color: var(--ink-faint);
  border-bottom: 1px solid var(--ink); padding: .4rem .7rem .4rem 0;
}
table.ledger td {
  padding: .5rem .7rem .5rem 0;
  border-bottom: 1px solid var(--rule-hair);
  vertical-align: top;
}
table.ledger tr:hover td { background: color-mix(in srgb, var(--vermilion) 5%, transparent); }
.wrap-x { overflow-x: auto; }

/* -------------------------------------------------------- 11. SOURCE BOX  */

.sources {
  border: 1px solid var(--rule);
  padding: 1.2rem 1.3rem;
  margin: 2.6rem 0;
  background: var(--paper-deep);
}
.sources h4 {
  font-family: var(--mono); font-size: .66rem; letter-spacing: .18em;
  text-transform: uppercase; color: var(--vermilion); margin: 0 0 .8rem;
}
.sources ul { list-style: none; margin: 0; padding: 0; }
.sources li {
  font-size: .84rem; line-height: 1.5; padding: .3rem 0 .3rem 1.1rem;
  position: relative; text-indent: 0;
}
.sources li::before {
  content: "→"; position: absolute; left: 0; color: var(--vermilion);
  font-family: var(--mono); font-size: .78rem;
}
.sources a { text-decoration: none; border-bottom: 1px solid var(--rule); }
.sources a:hover { border-bottom-color: var(--vermilion); }
.sources .meta { color: var(--ink-faint); font-family: var(--mono); font-size: .72rem; }

/* -------------------------------------------------------- 12. CALLOUTS    */

.aside-box {
  border: 1px solid var(--rule);
  border-top: 2px solid var(--vermilion);
  padding: 1.1rem 1.2rem;
  margin: 2.2rem 0;
  font-size: .93rem;
  background: color-mix(in srgb, var(--vermilion) 3%, var(--paper));
}
.aside-box h4 {
  font-family: var(--mono); font-size: .66rem; letter-spacing: .16em;
  text-transform: uppercase; color: var(--vermilion); margin: 0 0 .6rem;
}
.aside-box p:last-child { margin-bottom: 0; }

/* a warning that a fact may have aged */
.stamp {
  display: inline-block;
  font-family: var(--mono); font-size: .6rem; letter-spacing: .14em;
  text-transform: uppercase; color: var(--vermilion);
  border: 1px solid var(--vermilion); padding: .1rem .38rem;
  transform: rotate(-1.5deg);
  vertical-align: .1em;
}

/* --------------------------------------------------------- 13. WIDGETS    */

.widget {
  font-family: var(--mono);
  font-size: .78rem;
}
/* the square plates shouldn't tower over the prose */
[data-widget="attn-grid"] .widget > div:has(canvas),
[data-widget="attn-grid"] canvas { max-width: 30rem; }
[data-widget="attn-grid"] .widget { max-width: 30rem; margin: 0 auto; }
.widget-controls {
  display: flex; flex-wrap: wrap; gap: .45rem;
  margin-bottom: 1rem;
}
.widget-controls button {
  font-family: var(--mono); font-size: .66rem; letter-spacing: .08em;
  text-transform: uppercase;
  background: transparent; color: var(--ink-soft);
  border: 1px solid var(--rule); border-radius: 1px;
  padding: .32rem .6rem; cursor: pointer;
  transition: all .15s var(--ease);
}
.widget-controls button:hover { border-color: var(--vermilion); color: var(--vermilion); }
.widget-controls button[aria-pressed="true"] {
  background: var(--vermilion); border-color: var(--vermilion); color: var(--paper);
}
.widget-row {
  display: flex; align-items: center; gap: .7rem;
  margin: .5rem 0; flex-wrap: wrap;
}
.widget-row label {
  font-size: .66rem; letter-spacing: .1em; text-transform: uppercase;
  color: var(--ink-faint); min-width: 8.5rem;
}
.widget-row output {
  color: var(--vermilion); font-weight: 500; font-variant-numeric: tabular-nums;
  min-width: 4.5rem;
}
input[type="range"] {
  flex: 1; min-width: 7rem; accent-color: var(--vermilion);
  height: 1.1rem; background: transparent; cursor: pointer;
}
.readout {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(8rem, 1fr));
  gap: .8rem; margin-top: 1rem;
  border-top: 1px solid var(--rule); padding-top: .9rem;
}
.readout .cell .k {
  font-size: .6rem; letter-spacing: .14em; text-transform: uppercase; color: var(--ink-faint);
  display: block; margin-bottom: .2rem;
}
.readout .cell .v {
  font-size: 1.15rem; color: var(--ink); font-variant-numeric: tabular-nums;
}
.readout .cell .v.hot { color: var(--vermilion); }

/* -------------------------------------------------------- 14. NAVIGATION  */

.pagination {
  display: grid; grid-template-columns: 1fr 1fr; gap: 1px;
  background: var(--rule); border: 1px solid var(--rule);
  margin: 4rem 0 0;
}
.pagination a {
  background: var(--paper); padding: 1.2rem 1.3rem; text-decoration: none;
  display: block; transition: background .18s var(--ease);
}
.pagination a:hover { background: var(--paper-deep); }
.pagination a:hover .pg-title { color: var(--vermilion); }
.pagination .pg-dir {
  font-family: var(--mono); font-size: .62rem; letter-spacing: .16em;
  text-transform: uppercase; color: var(--ink-faint); display: block; margin-bottom: .35rem;
}
.pagination .pg-title { font-size: 1rem; line-height: 1.3; display: block; }
.pagination .next { text-align: right; }
.pagination .empty { background: var(--paper-deep); }
@media (max-width: 40rem) { .pagination { grid-template-columns: 1fr; } }

/* ------------------------------------------------------ 15. REVEAL MOTION */

/* Blocks rise into view as you scroll. The hidden state applies only once JS has
   confirmed it is running (the <head> one-liner adds .js before first paint), so a
   failed script load leaves the page fully readable instead of blank.
   KEEP THIS LIST IN SYNC with REVEAL_SELECTOR in press.js. */
.js .reveal,
.js main.sheet > figure,
.js main.sheet > .equation,
.js main.sheet > .aside-box,
.js main.sheet > .model-card,
.js main.sheet > .wrap-x,
.js main.sheet > .sources,
.js main.sheet > blockquote.pull,
.js .map figure,
.js .costs .cost {
  opacity: 0;
  transform: translateY(16px);
}
.js .reveal.seen,
.js main.sheet > .seen,
.js .map figure.seen,
.js .costs .cost.seen {
  animation: rise .72s var(--ease) forwards;
}
/* the three cost panels come in as a run, not all at once */
.js .costs .cost:nth-child(2).seen { animation-delay: .10s; }
.js .costs .cost:nth-child(3).seen { animation-delay: .20s; }
@keyframes rise { to { opacity: 1; transform: none; } }

/* ------------------------------------------------------- 16. THE COVER    */

.cover {
  min-height: 92vh;
  display: grid;
  align-content: center;
  padding: 4rem clamp(1rem, 6vw, 5rem) 3rem;
  position: relative;
  border-bottom: 1px solid var(--rule);
}
.cover::after {
  /* the press registration marks */
  content: "";
  position: absolute; inset: 2rem clamp(1rem, 6vw, 5rem);
  border: 1px solid var(--rule-hair);
  pointer-events: none;
}
.cover-inner { max-width: 52rem; position: relative; z-index: 1; }

.cover .imprint {
  font-family: var(--mono); font-size: .66rem; letter-spacing: .24em;
  text-transform: uppercase; color: var(--vermilion);
  margin-bottom: 2.4rem;
  display: flex; gap: 1rem; align-items: center; flex-wrap: wrap;
}
.cover .imprint::after {
  content: ""; flex: 1; height: 1px; background: var(--rule); min-width: 2rem;
}
.cover h1 {
  font-family: var(--display);
  font-size: clamp(2.6rem, 1.2rem + 7.4vw, 7rem);
  line-height: .93;
  letter-spacing: -.022em;
  margin: 0;
}
.cover h1 .of { font-style: italic; color: var(--ink-faint); font-size: .46em; display: block; margin: .18em 0; letter-spacing: 0; }
.cover h1 .big { display: block; }
.cover h1 .big em { font-style: italic; color: var(--vermilion); }
.cover .sub {
  margin-top: 2.2rem; max-width: 33rem; font-size: 1.12rem;
  line-height: 1.55; color: var(--ink-soft); font-weight: 300;
}
.cover .byline {
  margin-top: 2.6rem; font-family: var(--mono); font-size: .7rem;
  letter-spacing: .1em; color: var(--ink-faint);
}
.cover .scroll-cue {
  margin-top: 3rem; font-family: var(--mono); font-size: .66rem;
  letter-spacing: .2em; text-transform: uppercase; color: var(--ink-faint);
}
.cover .scroll-cue span { display: inline-block; animation: nudge 2.6s var(--ease) infinite; }
@keyframes nudge { 0%,100% { transform: none; } 50% { transform: translateY(5px); } }

/* the thesis strip under the cover */
.thesis {
  border-bottom: 1px solid var(--rule);
  padding: clamp(3rem, 7vw, 5rem) clamp(1rem, 6vw, 5rem);
  background: var(--paper-deep);
}
.thesis-inner { max-width: 64rem; margin: 0 auto; }
.thesis blockquote {
  margin: 0; font-family: var(--display);
  font-size: clamp(1.5rem, 1rem + 2.2vw, 2.6rem);
  line-height: 1.22; letter-spacing: -.01em; text-wrap: balance;
}
.thesis blockquote em { color: var(--vermilion); font-style: italic; }
.thesis cite {
  display: block; margin-top: 1.4rem; font-style: normal;
  font-family: var(--mono); font-size: .68rem; letter-spacing: .12em;
  text-transform: uppercase; color: var(--ink-faint);
}

/* the three-costs strip */
.costs {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(15rem, 1fr));
  gap: 1px; background: var(--rule);
  border-bottom: 1px solid var(--rule);
}
.costs .cost { background: var(--paper); padding: 2rem clamp(1rem, 3vw, 2rem); }
.costs .cost .n {
  font-family: var(--display); font-size: 2.4rem; color: var(--vermilion); line-height: 1;
}
.costs .cost h3 { margin: .6rem 0 .5rem; font-size: 1.05rem; }
.costs .cost p { font-size: .92rem; color: var(--ink-soft); margin: 0; }

/* -------------------------------------------------------- 16b. THE MAP    */

.map {
  padding: clamp(3rem, 7vw, 4.5rem) clamp(1rem, 6vw, 5rem);
  border-bottom: 1px solid var(--rule);
}
.map-inner { max-width: 68rem; margin: 0 auto; }
.map h2 {
  font-family: var(--body); font-size: 1.3rem; font-weight: 500; margin: 0 0 .4rem;
}
.map h2::before { content: none; }
.map .map-sub {
  font-family: var(--mono); font-size: .68rem; letter-spacing: .12em;
  text-transform: uppercase; color: var(--ink-faint); margin: 0 0 1.8rem;
}
.map figure { margin: 0; }
.map .scroll-hint {
  display: none; font-family: var(--mono); font-size: .62rem;
  letter-spacing: .12em; text-transform: uppercase; color: var(--ink-faint);
  margin-top: .6rem;
}
@media (max-width: 52rem) {
  .map .wrap-x { overflow-x: auto; -webkit-overflow-scrolling: touch; }
  .map svg { min-width: 46rem; }
  .map .scroll-hint { display: block; }
}
.map svg text { font-family: var(--mono); }

/* ------------------------------------------------------- 17. CONTENTS     */

.contents { padding: clamp(3rem, 7vw, 5rem) clamp(1rem, 6vw, 5rem) 5rem; }
.contents-inner { max-width: 64rem; margin: 0 auto; }

/* a thin divider marking one of the series' four parts, above a run of volumes */
.part-break {
  display: flex; align-items: baseline; gap: 1rem;
  margin: 4.4rem 0 2.2rem; padding-top: .3rem;
}
.part-break:first-child { margin-top: 0; }
.part-break .p-num {
  font-family: var(--display); font-size: 1.7rem; color: var(--vermilion);
  line-height: 1;
}
.part-break .p-body { flex: 1; }
.part-break .p-label {
  font-family: var(--mono); font-size: .64rem; letter-spacing: .18em;
  text-transform: uppercase; color: var(--vermilion); display: block; margin-bottom: .2rem;
}
.part-break h2 {
  margin: 0; font-size: 1.5rem; font-weight: 500; font-family: var(--body);
}
.part-break h2::before { content: none; }
.part-break .p-rule { flex: 1; height: 2px; background: var(--ink); align-self: center; }

.volume { margin-bottom: 3.2rem; }
.volume-head {
  display: flex; align-items: baseline; gap: 1rem;
  border-bottom: 2px solid var(--ink); padding-bottom: .5rem; margin-bottom: .3rem;
}
.volume-head .vnum {
  font-family: var(--mono); font-size: .66rem; letter-spacing: .2em;
  text-transform: uppercase; color: var(--vermilion); white-space: nowrap;
}
.volume-head h2 {
  margin: 0; font-size: 1.3rem; font-weight: 500; font-family: var(--body);
}
.volume-head h2::before { content: none; }
.volume-head .vsub {
  margin-left: auto; font-family: var(--mono); font-size: .66rem;
  color: var(--ink-faint); letter-spacing: .06em; text-align: right;
}

.toc-item {
  display: grid;
  grid-template-columns: 3.2rem 1fr auto;
  gap: 1.2rem; align-items: baseline;
  padding: .95rem 0; border-bottom: 1px solid var(--rule-hair);
  text-decoration: none; position: relative;
}
.toc-item:hover { color: inherit; }
.toc-item::before {
  content: ""; position: absolute; left: -1rem; right: -1rem; top: 0; bottom: 0;
  background: var(--vermilion); opacity: 0; transition: opacity .18s var(--ease);
  z-index: -1;
}
.toc-item:hover::before { opacity: .05; }
.toc-item .num {
  font-family: var(--display); font-size: 1.5rem; color: var(--vermilion);
  font-variant-numeric: lining-nums; line-height: 1;
}
.toc-item .body .t { font-size: 1.14rem; line-height: 1.28; display: block; }
.toc-item:hover .body .t { color: var(--vermilion); }
.toc-item .body .d {
  font-size: .88rem; color: var(--ink-faint); margin-top: .22rem; display: block;
  line-height: 1.45;
}
.toc-item .tag {
  font-family: var(--mono); font-size: .6rem; letter-spacing: .1em;
  text-transform: uppercase; color: var(--ink-faint);
  border: 1px solid var(--rule-hair); padding: .16rem .42rem; white-space: nowrap;
}
@media (max-width: 46rem) {
  .toc-item { grid-template-columns: 2.4rem 1fr; }
  .toc-item .tag { display: none; }
  .volume-head .vsub { display: none; }
}

/* ------------------------------------------------------- 17b. TRACK NAV   */
/* The small strip cross-linking the four series. Lives on landing pages only. */

.track-strip {
  border-top: 1px solid var(--rule); border-bottom: 1px solid var(--rule);
  padding: 1.1rem clamp(1rem, 6vw, 5rem);
  display: flex; flex-wrap: wrap; gap: .5rem 1.6rem; align-items: baseline;
}
.track-strip .ts-label {
  font-family: var(--mono); font-size: .62rem; letter-spacing: .16em;
  text-transform: uppercase; color: var(--ink-faint); margin-right: .4rem;
}
.track-strip a {
  font-family: var(--mono); font-size: .72rem; letter-spacing: .04em;
  text-decoration: none; color: var(--ink-soft);
  border-bottom: 1px solid transparent; padding-bottom: .1rem;
}
.track-strip a:hover { color: var(--vermilion); border-bottom-color: var(--vermilion); }
.track-strip a[aria-current="true"] { color: var(--vermilion); font-weight: 500; }
.track-strip a[aria-current="true"]::before { content: "▸ "; }

/* ------------------------------------------------------- 18. FOOT         */

.site-foot {
  border-top: 1px solid var(--rule);
  padding: 2.5rem clamp(1rem, 6vw, 5rem) 4rem;
  font-family: var(--mono); font-size: .7rem; line-height: 1.7;
  color: var(--ink-faint);
}
.site-foot .foot-inner { max-width: 64rem; margin: 0 auto; display: grid; gap: .5rem; }
.site-foot a { text-decoration: none; border-bottom: 1px solid var(--rule); }

/* -------------------------------------------------------- 19. PRINT       */

@media print {
  .masthead, .progress, .pagination, .theme-toggle { display: none; }
  body { background: #fff; color: #000; }
  .sheet { display: block; max-width: 40rem; margin: 0 auto; }
  .note { border: 0; color: #444; font-size: .7rem; }
  a { text-decoration: none; }
}