/* Layout: one reading column of diary prose (~62ch) with full-bleed "plates"
   (map, grid, charts) that break out to the page width, like engraved plates
   bound into a printed edition. */
:root {
  --paper: #f2f3ef;        /* cool rag paper */
  --paper-2: #e7e9e3;      /* plate ground */
  --ink: #1b2231;          /* Navy Office ink */
  --ink-2: #4a5263;        /* secondary text */
  --ink-3: #5c6272;        /* captions, rules */
  --wriggle: #7a4fa0;      /* vows he wriggled out of */
  --rule: #c9ccc4;
  --gilt: #8a5e0f;         /* accent: gilt tooling (5.1:1 on paper) */
  --fire: #c63d17;         /* reserved for the Fire */
  --fire-soft: rgba(198, 61, 23, .22);
  --river: #b9cdd6;
  --street: #8b919c;
  --m-2: #23508f; --m-1: #86a9d4; --m0: #d8d7d0; --m1: #e3b55e; --m2: #a96708;
  --none: transparent;
  --focus: #1f6fd1;
  --display: "IM Fell English", "IM Fell English Fallback", "IM Fell English Fallback Noto", "Iowan Old Style", "Palatino Linotype", Palatino, Georgia, serif;
  --body: "Literata", "Literata Fallback", "Literata Fallback Noto", "Iowan Old Style", Georgia, "Times New Roman", serif;
  --mono: "IBM Plex Mono", "IBM Plex Mono Fallback", ui-monospace, "SFMono-Regular", Menlo, Consolas, monospace;
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --paper: #121722; --paper-2: #1a2030; --ink: #e9e6dc; --ink-2: #bdbab0; --ink-3: #8f9099;
    --rule: #2f3646; --gilt: #d8a64a; --fire: #f0663a; --fire-soft: rgba(240, 102, 58, .26);
    --river: #24394a; --street: #6c7381;
    --m-2: #6a9de0; --m-1: #41679f; --m0: #3b3d42; --m1: #b07d25; --m2: #e7a43a;
    --wriggle: #b99ae0;
    --focus: #79aef5; color-scheme: dark;
  }
}
:root[data-theme="dark"] {
  --paper: #121722; --paper-2: #1a2030; --ink: #e9e6dc; --ink-2: #bdbab0; --ink-3: #8f9099;
  --rule: #2f3646; --gilt: #d8a64a; --fire: #f0663a; --fire-soft: rgba(240, 102, 58, .26);
  --river: #24394a; --street: #6c7381;
  --m-2: #6a9de0; --m-1: #41679f; --m0: #3b3d42; --m1: #b07d25; --m2: #e7a43a;
  --wriggle: #b99ae0;
  --focus: #79aef5; color-scheme: dark;
}

* { box-sizing: border-box; }
[hidden] { display: none !important; }
body {
  background: var(--paper); color: var(--ink);
  font: 400 1.0625rem/1.65 var(--body);
  padding-left: max(16px, env(safe-area-inset-left, 0px));
  padding-right: max(16px, env(safe-area-inset-right, 0px));
  padding-block: 0 4rem;
  -webkit-font-smoothing: antialiased;
}
a { color: inherit; text-decoration-color: var(--gilt); text-underline-offset: .18em; }
a:hover { color: var(--gilt); }
:focus-visible { outline: 2px solid var(--focus); outline-offset: 2px; }
.col { max-width: 40rem; margin-inline: auto; }
.plate { max-width: 68rem; margin-inline: auto; }
html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; }
section { padding-block: 4.5rem 3rem; }
section + section { border-top: 1px solid var(--rule); }
/* Each part of the page paints on its own (isolation makes it a stacking context, and so a cached
   layer of paint), so a change in one, such as a frame of the Fire map's animation, never has the
   browser walk the others again: the mood grid and the London map are thousands of elements. */
main > section { isolation: isolate; }

/* type scale: 0.8125 / 1.0625 / 1.375 / 2 / 3 / 4.25 */
h1, h2, h3 { font-family: var(--display); font-weight: 400; line-height: 1.08; text-wrap: balance; margin: 0; }
h1 { font-size: clamp(2.6rem, 9vw, 4.25rem); letter-spacing: -.01em; }
h2 { font-size: clamp(2rem, 6vw, 3rem); }
h3 { font-size: 1.375rem; }
.eyebrow {
  font: 500 .8125rem/1.3 var(--mono); letter-spacing: .08em; text-transform: uppercase;
  color: var(--gilt); margin: 0 0 .9rem;
}
.lede { font-size: 1.25rem; line-height: 1.55; color: var(--ink-2); }
p { margin: 1rem 0; }
.small { font-size: .875rem; color: var(--ink-2); }
.cap { font: 400 .8125rem/1.5 var(--mono); color: var(--ink-3); overflow-wrap: anywhere; }
.num { font-family: var(--mono); font-variant-numeric: tabular-nums; }

/* Pepys's own words: italic Fell, never the body face */
q.pep, .pep { font-family: var(--display); font-style: italic; font-size: 1.12em; quotes: "“" "”"; }
blockquote.pep {
  margin: 1.5rem 0; padding: 0; font-size: 1.5rem; line-height: 1.35; color: var(--ink);
}
blockquote.pep footer { margin-top: .5rem; font: 400 .8125rem/1.4 var(--mono); font-style: normal; color: var(--ink-3); }
/* Source links: dates never break; long source titles wrap anywhere. Padding makes a 24px target. */
.src { font: 400 .75rem/1 var(--mono); color: var(--ink-3); text-decoration: none; border-bottom: 1px dotted var(--ink-3); padding-block: .4rem; overflow-wrap: anywhere; }
.src.date { white-space: nowrap; }
.src:hover { color: var(--gilt); border-color: var(--gilt); }
.pending { font: 400 .8125rem/1.5 var(--mono); color: var(--ink-3); border: 1px dashed var(--rule); padding: 1rem; }
.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
@media (prefers-reduced-motion: reduce) { * { transition: none !important; animation: none !important; } }

/* Buttons, shared by every section. */
.btn {
  font: 500 .8125rem/1 var(--mono); letter-spacing: .04em; color: var(--ink); background: transparent;
  border: 1px solid var(--ink-3); border-radius: 999px; padding: .6rem .95rem; cursor: pointer; min-height: 40px;
}
.btn:hover { border-color: var(--ink); }
.btn[aria-pressed="true"], .btn.primary { background: var(--ink); color: var(--paper); border-color: var(--ink); }
.btn:disabled { opacity: .4; cursor: default; }
.tl-more { margin-top: .5rem; }


/* Self-hosted fonts (A-4). Latin subsets of the Google Fonts builds, all SIL OFL 1.1: see
   fonts/OFL.txt. Nothing is fetched from another origin.
   Each web face has a "Fallback" face built from a local font with its metrics adjusted
   (size-adjust matches the average advance width on diary prose, ascent/descent-override match
   the web font's line metrics), so lines wrap at the same words before and after the swap.
   Georgia is on Windows, macOS and iOS; Noto Serif is Android's serif. Widths were measured with
   Gelasio (metric-compatible with Georgia) and Noto Serif; Plex Mono and Courier New share a
   0.6em advance. The font-family tokens in 00-base.css list these in order. */
@font-face {
  font-family: "IM Fell English"; font-style: normal; font-weight: 400; font-display: swap;
  src: url("fonts/im-fell-english-regular.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: "IM Fell English"; font-style: italic; font-weight: 400; font-display: swap;
  src: url("fonts/im-fell-english-italic.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
/* Variable: optical size 7–72 (follows the font size) and weight 400–600. No italic: Pepys's
   words are in Fell italic, ours are never italic in Literata. */
@font-face {
  font-family: "Literata"; font-style: normal; font-weight: 400 600; font-display: swap;
  src: url("fonts/literata.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: "IBM Plex Mono"; font-style: normal; font-weight: 400; font-display: swap;
  src: url("fonts/ibm-plex-mono-400.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: "IBM Plex Mono"; font-style: normal; font-weight: 500; font-display: swap;
  src: url("fonts/ibm-plex-mono-500.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

/* Fallbacks on Georgia (IM Fell: ascent .905em, descent .363em; Literata: 1.177 / .308;
   Plex Mono: 1.025 / .275; no line gap). override = web metric / size-adjust. */
@font-face {
  font-family: "IM Fell English Fallback"; font-style: normal; font-weight: 400;
  src: local("Georgia");
  size-adjust: 93.06%; ascent-override: 97.28%; descent-override: 39.04%; line-gap-override: 0%;
}
@font-face {
  font-family: "IM Fell English Fallback"; font-style: italic; font-weight: 400;
  src: local("Georgia Italic"), local("Georgia-Italic");
  size-adjust: 78.85%; ascent-override: 114.81%; descent-override: 46.08%; line-gap-override: 0%;
}
@font-face {
  font-family: "Literata Fallback"; font-style: normal; font-weight: 400 500;
  src: local("Georgia");
  size-adjust: 106.5%; ascent-override: 110.52%; descent-override: 28.92%; line-gap-override: 0%;
}
@font-face {
  font-family: "Literata Fallback"; font-style: normal; font-weight: 600 700;
  src: local("Georgia Bold"), local("Georgia-Bold");
  size-adjust: 95.3%; ascent-override: 123.5%; descent-override: 32.32%; line-gap-override: 0%;
}
@font-face {
  font-family: "IBM Plex Mono Fallback"; font-style: normal; font-weight: 400 500;
  src: local("Courier New"), local("CourierNewPSMT");
  size-adjust: 100%; ascent-override: 102.5%; descent-override: 27.5%; line-gap-override: 0%;
}

/* The same on Noto Serif (Android). */
@font-face {
  font-family: "IM Fell English Fallback Noto"; font-style: normal; font-weight: 400;
  src: local("Noto Serif"), local("NotoSerif-Regular");
  size-adjust: 86.11%; ascent-override: 105.13%; descent-override: 42.19%; line-gap-override: 0%;
}
@font-face {
  font-family: "IM Fell English Fallback Noto"; font-style: italic; font-weight: 400;
  src: local("Noto Serif Italic"), local("NotoSerif-Italic");
  size-adjust: 76.64%; ascent-override: 118.12%; descent-override: 47.4%; line-gap-override: 0%;
}
@font-face {
  font-family: "Literata Fallback Noto"; font-style: normal; font-weight: 400 500;
  src: local("Noto Serif"), local("NotoSerif-Regular");
  size-adjust: 98.6%; ascent-override: 119.37%; descent-override: 31.24%; line-gap-override: 0%;
}
@font-face {
  font-family: "Literata Fallback Noto"; font-style: normal; font-weight: 600 700;
  src: local("Noto Serif Bold"), local("NotoSerif-Bold");
  size-adjust: 96.6%; ascent-override: 121.84%; descent-override: 31.88%; line-gap-override: 0%;
}

/* ---------- masthead, skip link, footer ---------- */
.skip-link { position: absolute; left: 16px; top: -100px; z-index: 10; background: var(--ink); color: var(--paper); padding: .6rem 1rem; font: 500 .875rem/1 var(--mono); text-decoration: none; }
.skip-link:focus { top: 8px; }
.masthead { max-width: 68rem; margin-inline: auto; padding-top: max(.75rem, env(safe-area-inset-top, 0px)); padding-bottom: .6rem; }
.masthead-row { display: flex; align-items: center; justify-content: space-between; gap: 1rem; }
.site-name { margin: 0; font: 400 1.25rem/1.2 var(--display); }
.site-name a { text-decoration: none; }
.site-name span { font: 400 .75rem/1 var(--mono); color: var(--ink-3); margin-left: .35rem; letter-spacing: .04em; white-space: nowrap; }
.theme-toggle { min-height: 32px; padding: .35rem .75rem; }
.mast-end { display: flex; align-items: center; gap: 1rem; }
.mast-link { font: 500 .8125rem/1 var(--mono); letter-spacing: .04em; color: var(--ink-2); text-decoration: none; white-space: nowrap;
  padding: .55rem 0; border-bottom: 1px solid transparent; }
.mast-link:hover { color: var(--gilt); border-bottom-color: var(--gilt); }
/* On the narrowest phones it would squeeze the site's name onto three lines; the line under the Fire card is there. */
@media (max-width: 374px) { .mast-link { display: none; } }
/* "On this page" stays pinned to the top while the page scrolls, so any section is one tap
   away. It spans the full width (it cancels the body's side gutter, then restores it inside);
   on a phone the links scroll sideways in one row instead of wrapping. */
:root { --bar-h: 2.75rem; }
.onpage {
  position: sticky; top: env(safe-area-inset-top, 0px); z-index: 20;
  background: var(--paper); border-bottom: 1px solid var(--rule);
  margin-left: calc(-1 * max(16px, env(safe-area-inset-left, 0px))); margin-right: calc(-1 * max(16px, env(safe-area-inset-right, 0px)));
  padding-left: max(16px, env(safe-area-inset-left, 0px)); padding-right: max(16px, env(safe-area-inset-right, 0px));
}
.onpage-row { max-width: 68rem; margin-inline: auto; min-height: var(--bar-h); display: flex; align-items: center; gap: 0 1.1rem;
  overflow-x: auto; scrollbar-width: none; font: 500 .75rem/1 var(--mono); letter-spacing: .04em;
  -webkit-mask-image: linear-gradient(90deg, #000 88%, transparent); mask-image: linear-gradient(90deg, #000 88%, transparent); }
.onpage-row::-webkit-scrollbar { display: none; }
.onpage a { white-space: nowrap; text-decoration: none; color: var(--ink-2); padding: .7rem 0; border-bottom: 2px solid transparent; }
.onpage a:hover { color: var(--gilt); }
.onpage a[aria-current="true"] { color: var(--ink); border-bottom-color: var(--gilt); }
@media (min-width: 900px) { .onpage-row { -webkit-mask-image: none; mask-image: none; flex-wrap: wrap; } }
/* On a phone in an app, paint the strip above the bar so nothing scrolls into view behind it. */
body::before { content: ""; position: fixed; inset: 0 0 auto; height: env(safe-area-inset-top, 0px); z-index: 21; background: var(--paper); }
/* Jumps to a section land below the bar, not under it. */
html { scroll-padding-top: calc(var(--bar-h) + env(safe-area-inset-top, 0px) + .75rem); }

.site-foot { border-top: 1px solid var(--rule); padding-top: 3rem; font-size: .9375rem; color: var(--ink-2); }
.read-on h2 { font-size: 1.75rem; color: var(--ink); }
.read-on ul { padding-left: 1.1rem; }
.read-on li { margin-bottom: .5rem; }
.colophon { margin-top: 2.5rem; border-top: 1px solid var(--rule); padding-top: 1rem; font-size: .875rem; }
.colophon p { margin: .6rem 0; }
.colophon .cite { font-family: var(--mono); font-size: .8125rem; overflow-wrap: anywhere; }
main > section:first-child { padding-top: 1.75rem; }
/* A jump lands on the section's heading, not on the empty band above it. */
main > section, .site-foot { scroll-margin-top: -2.5rem; }

/* The pages of their own for the stories and set pieces (scripts/site_pages.py): one reading column,
   on top of the explorer's base, fonts and chrome (00-base.css, 01-fonts.css, 05-chrome.css). */
.sp-crumbs { max-width: 40rem; margin: .25rem auto 0; font: 400 .75rem/1.4 var(--mono); color: var(--ink-3); }
.sp-crumbs ol { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 0 .4rem; }
.sp-crumbs li + li::before { content: "›"; margin-right: .4rem; }
.sp-crumbs a { color: inherit; display: inline-block; padding-block: .3rem; }
.sp .masthead { max-width: 40rem; }
.sp-main { max-width: 40rem; margin-inline: auto; padding-top: 2rem; }
.sp-main h1 { font-size: clamp(2.2rem, 7vw, 3.5rem); margin-bottom: 1rem; }
.sp-main h2 { margin: 3rem 0 .75rem; font-size: clamp(1.6rem, 5vw, 2.25rem); }
.sp-main h3 { margin: 1.75rem 0 .5rem; }
.sp-facts { font: 400 .8125rem/1.5 var(--mono); color: var(--ink-3); }
.sp-facts b { color: var(--ink); font-weight: 500; }
.sp-go { margin: 1.5rem 0 2rem; }
.sp-go .btn { display: inline-flex; align-items: center; gap: .45rem; text-decoration: none; }
.sp-go .btn:hover { color: var(--paper); opacity: .9; }
/* The Fire's page: the explorer's Fire card map (15-explore.css), still, under the lede. */
.sp-map { display: block; margin: 1.25rem 0 0; border: 1px solid var(--rule); border-top: 3px solid var(--fire); border-radius: 6px; overflow: hidden; }
.sp-map:hover { border-color: var(--fire); }
.sp-map .fe-map { display: block; width: 100%; height: auto; aspect-ratio: 3 / 1; background: var(--paper); }
.sp-map .fe-river { fill: var(--river); }
.sp-map .fe-burn { fill: var(--fire-soft); }
.sp-map .fe-last { stroke: var(--fire); stroke-width: 6; stroke-linejoin: round; }
.sp-map .fe-house { fill: var(--ink); stroke: var(--paper); stroke-width: 8; }
.sp-map .fe-lbl { font: 600 64px/1 var(--mono); fill: var(--ink); paint-order: stroke; stroke: var(--paper); stroke-width: 14px; }
@media (forced-colors: active) {
  .sp-map { border: 2px solid LinkText; }
  .sp-map .fe-burn { fill: Highlight; opacity: .4; }
  .sp-map .fe-last { stroke: CanvasText; }
  .sp-map .fe-house { fill: CanvasText; }
}
.badge { font: 500 .6875rem/1 var(--mono); letter-spacing: .06em; border: 1px solid currentColor; border-radius: 999px; padding: .2rem .45rem; margin-left: .4rem; vertical-align: .1em; }

/* A story's steps, and the Fire's and the timeline's: one entry each, ruled off. */
.sp-steps { list-style: none; margin: 0; padding: 0; }
.sp-steps > li { border-top: 1px solid var(--rule); padding: 1.1rem 0 .4rem; }
.sp-steps > li > p:first-child { margin-top: 0; }
.sp-steps h3 { margin-top: .25rem; }
.sp-when { font: 500 .8125rem/1.4 var(--mono); color: var(--ink-3); margin-bottom: .4rem; }
.sp-when .num { color: var(--gilt); }
.sp-on { font-size: .875rem; }

/* Lists: the related stories, the list of them all, quotations one to a line. */
.sp-list { padding-left: 1.1rem; }
.sp-list > li { margin: .75rem 0; }
.sp-list > li > span:not(.cap) { display: block; color: var(--ink-2); font-size: .9375rem; }
.sp-list > li > .cap { display: block; }
.sp-index { list-style: none; padding: 0; }
.sp-index > li { border-top: 1px solid var(--rule); padding-top: .75rem; }
.sp-index > li > a { font: 400 1.375rem/1.25 var(--display); }
.sp-quotes > li { margin: 1rem 0; }

/* Who he was: the facts, label then text. */
.sp-facts-list dt { font: 500 .8125rem/1.3 var(--mono); letter-spacing: .06em; text-transform: uppercase; color: var(--gilt); margin-top: 1.5rem; }
.sp-facts-list dd { margin: 0; }
.sp-facts-list dd > p { margin-top: .35rem; }

/* Tables: the weekly bills, what he ate. Scroll sideways inside their box on a narrow screen. */
.sp-table { overflow-x: auto; margin: 1rem 0; }
.sp-table table { border-collapse: collapse; width: 100%; font-size: .9375rem; }
.sp-table caption { text-align: left; font: 400 .8125rem/1.5 var(--mono); color: var(--ink-3); padding-bottom: .4rem; }
.sp-table th, .sp-table td { text-align: left; padding: .35rem .75rem .35rem 0; border-bottom: 1px solid var(--rule); vertical-align: top; }
.sp-table thead th { font: 500 .75rem/1.3 var(--mono); color: var(--ink-3); }
.sp-table tbody th { font-weight: 400; white-space: nowrap; }
.sp-table td:nth-child(2), .sp-table td:nth-child(3) { font-family: var(--mono); font-variant-numeric: tabular-nums; }

/* The ending's last fortnight: one square a day, coloured by his mood. */
.sp-days { list-style: none; display: flex; flex-wrap: wrap; gap: 6px; padding: 0; margin: .5rem 0 1.5rem; }
.sp-days li { display: flex; flex-direction: column; align-items: center; gap: 2px; font: 400 .6875rem/1 var(--mono); color: var(--ink-3); }
.sp-days .sq { width: 26px; height: 26px; border-radius: 3px; display: block; }
.sp-days .m-2 .sq { background: var(--m-2); } .sp-days .m-1 .sq { background: var(--m-1); } .sp-days .m0 .sq { background: var(--m0); }
.sp-days .m1 .sq { background: var(--m1); } .sp-days .m2 .sq { background: var(--m2); }
.sp-days .blank .sq { border: 1px dashed var(--ink-3); }

.sp-support { margin: -1rem 0 2rem; color: var(--ink-2); }
.sp-made { margin-top: 3rem; border-top: 1px solid var(--rule); padding-top: .5rem; font-size: .9375rem; color: var(--ink-2); }
.sp-made h2 { font-size: 1.375rem; margin: .75rem 0 .25rem; }
.sp .site-foot { margin-top: 3rem; padding-top: 1rem; }
.sp .site-foot .colophon { margin-top: 0; border-top: 0; padding-top: 0; }
@media (forced-colors: active) { .sp-days .sq { forced-color-adjust: none; border: 1px solid CanvasText; } }
@media print { .sp-go, .sp-on, .skip-link, .sp-crumbs { display: none !important; } }

/* The pages for teachers (scripts/teachers.py). */
.tp-glance { display: grid; grid-template-columns: minmax(7rem, max-content) 1fr; gap: .45rem 1rem; margin: 1.5rem 0; padding: 1rem;
  border: 1px solid var(--rule); border-radius: 6px; background: var(--paper-2); font-size: .9375rem; }
.tp-glance dt { font: 500 .75rem/1.6 var(--mono); letter-spacing: .06em; text-transform: uppercase; color: var(--gilt); }
.tp-glance dd { margin: 0; }
@media (max-width: 520px) { .tp-glance { grid-template-columns: 1fr; } .tp-glance dd { margin-bottom: .5rem; } }
.tp-note { border-left: 3px solid var(--gilt); padding: .25rem 0 .25rem 1rem; font-size: .9375rem; color: var(--ink-2); }
.tp-src { font: 400 .75rem/1.4 var(--mono); color: var(--ink-3); white-space: normal; }
.sp-list > li > span.tp-src { display: inline; font-size: .75rem; }
.tp-src a { color: inherit; }
.tp-extract { margin: 1.25rem 0; padding: .75rem 1rem; border-left: 2px solid var(--rule); font: italic 400 1.2rem/1.5 var(--display); }
.tp-extract p { margin: 0; }
.tp-extract footer { margin-top: .5rem; font: 400 .8125rem/1.4 var(--mono); font-style: normal; color: var(--ink-3); }
.tp-xh { font-size: 1.125rem; margin-bottom: .2rem; }
.tp-gloss { display: grid; grid-template-columns: max-content 1fr; gap: .3rem 1rem; font-size: .9375rem; }
.tp-gloss dt { font-family: var(--display); font-style: italic; }
.tp-gloss dd { margin: 0; color: var(--ink-2); }
@media (max-width: 520px) { .tp-gloss { grid-template-columns: 1fr; } .tp-gloss dd { margin-bottom: .4rem; } }
.tp-plain { font-size: 1.125rem; padding: .75rem 1rem; background: var(--paper-2); border-radius: 6px; }
.tp-cards { list-style: none; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(15rem, 1fr)); gap: .75rem; }
.tp-card { border: 1.5px dashed var(--ink-3); border-radius: 8px; padding: .9rem 1rem; break-inside: avoid; display: flex; flex-direction: column; gap: .6rem; }
.tp-card .tp-short { margin: 0; font-size: 1.25rem; line-height: 1.4; }
.tp-draw { flex: 1; min-height: 7rem; border: 1px solid var(--rule); border-radius: 4px; }
.tp-key-list > li { margin: .9rem 0; }
.tp-key-list p { margin: .2rem 0; }
.tp-when { font: 500 .8125rem/1.3 var(--mono); color: var(--gilt); }
.tp-seq > li { margin: .7rem 0; }
.tp-pupil { border: 1px solid var(--rule); border-radius: 8px; padding: .25rem 1.1rem; }
.tp-pupil li { margin: .45rem 0; }
.tp-grid td { height: 8rem; vertical-align: top; border: 1px solid var(--rule); }
.tp-grid th { width: 33%; border: 1px solid var(--rule); padding: .4rem; }
.tp-myths li b { display: block; }
.tp-sources-set > li { margin: 1rem 0; }
.tp-two { list-style: none; padding: 0; display: grid; gap: .9rem; margin: 2rem 0; }
.tp-two a { display: block; text-decoration: none; border: 1px solid var(--rule); border-radius: 8px; padding: 1rem 1.1rem; }
.tp-two a:hover { border-color: var(--gilt); }
.tp-two .t { display: block; font: 400 1.5rem/1.2 var(--display); margin-bottom: .35rem; }
.tp-two .d { display: block; color: var(--ink-2); font-size: .9375rem; }
.tp-chart { width: 100%; height: auto; margin: 1rem 0 .25rem; }
.tp-chart .g { stroke: var(--rule); stroke-width: 1; }
.tp-chart .ax { font: 400 11px var(--mono); fill: var(--ink-3); }
.tp-chart .plague { fill: var(--fire); }
.tp-chart .other { fill: var(--m0); }
.tp-key { font: 400 .8125rem/1.4 var(--mono); color: var(--ink-3); }
.tp-key .k { display: inline-block; width: .8rem; height: .8rem; border-radius: 2px; vertical-align: -.1em; margin: 0 .3rem 0 .6rem; }
.tp-key .k:first-child { margin-left: 0; }
.tp-key .k.plague { background: var(--fire); } .tp-key .k.other { background: var(--m0); }
.tp-table summary { cursor: pointer; font: 500 .8125rem/1.4 var(--mono); padding: .5rem 0; }
.tp-boards dt { font-weight: 600; margin-top: 1.25rem; }
.tp-boards dd { margin: .3rem 0 0; }
@media print {
  .sp-crumbs, .masthead, .site-foot, .sp-go { display: none !important; }
  body { background: #fff; color: #000; font-size: 11pt; }
  .tp-card { border-color: #000; }
  .tp-cards { grid-template-columns: 1fr 1fr; }
  #cards { break-before: page; }
  .tp-grid { break-inside: avoid; }
  .tp-chart .other { fill: #ccc; } .tp-chart .plague { fill: #b33; }
  .sp-table { overflow: visible; }
  h2 { break-after: avoid; }
}

/* How this site was made (scripts/how_made.py): the figures, who did what, and the map of the work. */
.hm-stats { list-style: none; margin: 1.5rem 0 1rem; padding: 0; display: grid; grid-template-columns: repeat(auto-fit, minmax(9.5rem, 1fr)); gap: .6rem; }
.hm-stats li { border: 1px solid var(--rule); border-top: 3px solid var(--gilt); border-radius: 6px; padding: .7rem .8rem .8rem; font-size: .875rem; line-height: 1.4; color: var(--ink-2); }
.hm-stats b { display: block; font: 600 1.5rem/1.15 var(--body); color: var(--ink); margin-bottom: .2rem; font-variant-numeric: lining-nums tabular-nums; }
.hm-tag { display: inline-block; font: 500 .6875rem/1 var(--mono); letter-spacing: .04em; border-radius: 999px; padding: .2rem .5rem; vertical-align: .12em; white-space: nowrap; border: 1px solid; }
.hm-person { color: var(--fire); border-color: var(--fire); }
.hm-ai { color: var(--ink); border-color: var(--ink); }
.hm-code { color: var(--ink-3); border-color: var(--ink-3); border-style: dashed; }
.hm-who { display: grid; gap: 1rem; }
.hm-who section { border: 1px solid var(--rule); border-radius: 6px; padding: .2rem 1rem .4rem; }
.hm-who h3 { margin: .8rem 0 .2rem; display: flex; align-items: center; gap: .5rem; flex-wrap: wrap; }
.hm-who ul { margin: .4rem 0 .6rem; padding-left: 1.1rem; }
.hm-who li { margin-bottom: .45rem; }
/* The map: numbered stages down a rail, each with what it made and how it was checked. */
.hm-map { list-style: none; margin: 1.5rem 0 0; padding: 0; position: relative; }
.hm-map::before { content: ""; position: absolute; left: 1rem; top: .5rem; bottom: .5rem; border-left: 2px solid var(--rule); }
.hm-stage { position: relative; display: grid; grid-template-columns: 2rem minmax(0, 1fr); gap: .9rem; padding-bottom: 1.4rem; scroll-margin-top: 4rem; }
.hm-n { position: relative; width: 2rem; height: 2rem; border-radius: 50%; display: grid; place-items: center; background: var(--paper); border: 2px solid var(--ink); font: 500 .8125rem/1 var(--mono); color: var(--ink); }
.hm-body h3 { margin: .2rem 0 .5rem; }
.hm-body dl { margin: 0; }
.hm-body dt { font: 500 .75rem/1.3 var(--mono); letter-spacing: .04em; text-transform: uppercase; color: var(--ink-3); margin-top: .6rem; display: flex; align-items: center; gap: .45rem; }
.hm-body dt .hm-tag { text-transform: none; }
.hm-body dd { margin: .25rem 0 0; line-height: 1.55; }
.hm-caught li { margin-bottom: .7rem; }
@media (forced-colors: active) {
  .hm-tag, .hm-stats li, .hm-who section { border-color: CanvasText; }
  .hm-person, .hm-ai, .hm-code { color: CanvasText; }
  .hm-n { border-color: CanvasText; }
}
@media print { .hm-stage, .hm-fig { break-inside: avoid; } }
/* The figures: the diary's moods as ten strips, the audit's bars, each story's findings, and the lanes. */
.hm-fig { margin: 1.5rem 0; }
.hm-fig figcaption { font-size: .875rem; line-height: 1.5; color: var(--ink-2); margin-top: .5rem; }
.hm-strips { display: block; width: 100%; height: auto; }
.hm-strips text { font: 500 13px var(--mono); fill: var(--ink-3); }
.hm-m-2 { fill: var(--m-2); background: var(--m-2); } .hm-m-1 { fill: var(--m-1); background: var(--m-1); }
.hm-m0 { fill: var(--m0); background: var(--m0); } .hm-m1 { fill: var(--m1); background: var(--m1); }
.hm-m2 { fill: var(--m2); background: var(--m2); }
.hm-sw { display: inline-block; width: .7em; height: .7em; border-radius: 2px; vertical-align: -.05em; }
.hm-c1 { fill: var(--m-2); background: var(--m-2); } .hm-c2 { fill: var(--gilt); background: var(--gilt); }
.hm-c3 { fill: var(--fire); background: var(--fire); } .hm-c4 { fill: var(--ink-3); background: var(--ink-3); }
.hm-fig i, .hm-keys i { display: inline-block; width: .7em; height: .7em; border-radius: 2px; vertical-align: -.05em; }
.hm-bars { border: 1px solid var(--rule); border-radius: 6px; padding: .6rem .9rem .3rem; }
.hm-bars figcaption { margin: 0 0 .3rem; color: var(--ink); }
.hm-bar { margin: .7rem 0; }
.hm-bar-h { margin: 0 0 .3rem; font-size: .875rem; color: var(--ink-2); }
.hm-bar svg { display: block; width: 100%; height: .9rem; border-radius: 3px; overflow: hidden; }
.hm-bar rect + rect { stroke: var(--paper); stroke-width: .6; vector-effect: non-scaling-stroke; }
.hm-keys { list-style: none; margin: .35rem 0 0; padding: 0; display: flex; flex-wrap: wrap; gap: .15rem 1rem; font-size: .8125rem; color: var(--ink-2); }
.hm-keys li { display: inline-flex; align-items: center; gap: .35rem; }
.hm-keys b { color: var(--ink); font-weight: 600; }
.hm-chart { list-style: none; margin: .6rem 0 0; padding: 0; display: grid; gap: .3rem; }
.hm-chart li { display: grid; grid-template-columns: minmax(7rem, 13.5rem) minmax(0, 1fr) 3.5rem; align-items: center; gap: .6rem; font-size: .8125rem; }
.hm-chart a { color: var(--ink); text-decoration: none; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.hm-chart a:hover { text-decoration: underline; }
.hm-chart svg { display: block; width: 100%; height: .75rem; }
.hm-chart .num { font: 400 .75rem var(--mono); color: var(--ink-3); text-align: right; }
.hm-lanes { width: 100%; border-collapse: separate; border-spacing: 3px; margin: 1.25rem 0 .5rem; font-size: .8125rem; line-height: 1.35; table-layout: fixed; }
.hm-lanes caption { caption-side: bottom; text-align: left; font-size: .8125rem; color: var(--ink-3); padding-top: .4rem; }
.hm-lanes thead th { text-align: left; font-weight: 400; padding: 0 0 .2rem; }
.hm-lanes thead th:first-child { width: 30%; font: 500 .6875rem var(--mono); letter-spacing: .04em; text-transform: uppercase; color: var(--ink-3); }
.hm-lanes tbody th { text-align: left; font-weight: 500; padding: .35rem .2rem; }
.hm-lanes tbody th a { color: var(--ink); text-decoration: none; display: flex; gap: .4rem; align-items: baseline; }
.hm-lanes tbody th a:hover { text-decoration: underline; }
.hm-ln { font: 500 .6875rem var(--mono); color: var(--ink-3); min-width: 1.2rem; }
.hm-lanes td { padding: .35rem .45rem; border-radius: 4px; vertical-align: middle; color: var(--ink-2); hyphens: auto; }
.hm-l-person { background: color-mix(in srgb, var(--fire) 7%, transparent); }
.hm-l-ai { background: color-mix(in srgb, var(--ink) 6%, transparent); }
.hm-l-code { background: transparent; outline: 1px dashed color-mix(in srgb, var(--ink-3) 45%, transparent); outline-offset: -1px; }
.hm-lanes td span { color: var(--ink); }
.hm-in { margin-top: 2.5rem; }
@media (max-width: 480px) {
  .hm-lanes { font-size: .75rem; border-spacing: 2px; }
  .hm-lanes thead th:first-child { width: 27%; }
  .hm-lanes td { padding: .3rem .3rem; }
  .hm-chart li { grid-template-columns: minmax(0, 9.5rem) minmax(0, 1fr) 3rem; }
  .hm-chart a { white-space: normal; }
}
@media (forced-colors: active) {
  .hm-m-2, .hm-m-1, .hm-m0, .hm-m1, .hm-m2, .hm-c1, .hm-c2, .hm-c3, .hm-c4 { forced-color-adjust: none; }
  .hm-l-person, .hm-l-ai { background: Canvas; outline: 1px solid CanvasText; }
}
/* What it took: the same tiles, in the Fire's colour, and the request beneath them. */
.hm-took li { border-top-color: var(--fire); }
.hm-support { margin: 1.25rem 0 0; padding: 1rem 1.1rem .2rem; border: 1px solid var(--rule); border-left: 3px solid var(--fire); border-radius: 6px; background: color-mix(in srgb, var(--fire) 5%, transparent); }
.hm-support p { margin: 0 0 .8rem; }
.hm-support .sp-go { margin: 0 0 .8rem; }