/* 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); }

/* 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; }
/* "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; }
.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-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; } }