/* The Chassis File page. Weight runs in one order: the car and its title, the record at a glance, the car's identity
   and plates, the journey, the history, then the sources and what is still open. One accent: burgundy marks the gaps, the active place and the
   open questions. Everything else is ink on sand, set in three voices: serif for what you read, sans for what explains
   it, mono for labels. The page grows from no entries to thirty without changing shape. */

/* The site header and the file's bar stay on screen; a link into the page lands just under both. */
:root:has(.md-file) { --nav-h: 52px; scroll-padding-top: calc(var(--header-h) + var(--nav-h) + 1px); }
.md-file ::selection { background: var(--burgundy); color: var(--on-burgundy); }
.fo-h2 { font-family: var(--serif); font-weight: 400; font-size: clamp(1.95rem, 1.3rem + 1.7vw, 2.9rem); line-height: 1.04; letter-spacing: -0.022em; }
.fo-section-head { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 10px clamp(32px, 5vw, 96px); align-items: end; padding-bottom: 16px; border-bottom: 1px solid var(--ink); }
.fo-section-head p { max-width: 54ch; color: var(--ink-2); font-size: 0.9375rem; line-height: 1.5; }
.fo-sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

/* The file's own bar, under the site header: which car, and where in its file you are. */
.fo-nav { position: sticky; top: var(--header-h); z-index: 30; background: rgba(246, 244, 237, 0.94); border-bottom: 1px solid var(--rule); backdrop-filter: saturate(1.2) blur(10px); }
.fo-nav-inner { display: flex; align-items: center; gap: 28px; height: var(--nav-h); }
.fo-nav-identity { display: flex; flex: none; align-items: baseline; gap: 10px; color: var(--ink); text-decoration: none; }
.fo-nav-identity strong { font-family: var(--serif); font-weight: 400; font-size: 1.05rem; }
.fo-nav-identity span { font-size: 0.75rem; letter-spacing: 0.1em; color: var(--ink-3); }
.fo-nav-links { display: flex; flex: 1; align-self: stretch; gap: 24px; min-width: 0; overflow-x: auto; scrollbar-width: none; }
.fo-nav-links::-webkit-scrollbar { display: none; }
.fo-nav-links a { flex: none; padding-top: 2px; line-height: calc(var(--nav-h) - 4px); white-space: nowrap; border-bottom: 2px solid transparent; color: var(--ink-2); font-size: 0.875rem; text-decoration: none; transition: color 200ms var(--ease-out), border-color 200ms var(--ease-out); }
.fo-nav-links a span { margin-left: 3px; font-family: var(--mono); font-size: 0.75rem; color: var(--ink-3); }
.fo-nav-links a:hover { color: var(--ink); }
.fo-nav-links a[aria-current] { color: var(--ink); border-bottom-color: var(--burgundy); }
.fo-nav-journey { flex: none; font-size: 0.875rem; color: var(--ink); text-underline-offset: 4px; }
.fo-nav-back { display: inline-flex; flex: none; align-items: center; gap: 8px; padding-right: 20px; border-right: 1px solid var(--rule); color: var(--ink-2); font-size: 0.875rem; text-decoration: none; transition: color 180ms var(--ease-out); }
.fo-nav-back::before { content: "←"; }
.fo-nav-back:hover { color: var(--burgundy); }
.fo-nav-title { flex: 1; min-width: 0; color: var(--ink-2); font-size: 0.875rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.fo-nav-note { display: flex; flex: none; align-items: baseline; gap: 10px; color: var(--ink-3); font-size: 0.8125rem; }
.fo-nav-note .md-mono { font-size: 0.75rem; letter-spacing: 0.12em; color: var(--burgundy); }

/* The car and its title */
/* The car and its title share the first screen with the record at a glance: sizes follow the screen's height, so the
   strip of years is in view when the file opens. */
.fo-head { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: clamp(32px, 5vw, 96px); align-items: center; padding-block: clamp(18px, 3.4svh, 52px) clamp(16px, 2.8svh, 36px); }
.fo-head-kicker { font-size: 0.75rem; letter-spacing: 0.12em; color: var(--burgundy); }
.fo-title { margin-top: 14px; max-width: 17ch; font-family: var(--serif); font-weight: 400; font-size: clamp(2.2rem, min(1.4rem + 3vw, 6.6svh), 4.6rem); line-height: 1; letter-spacing: -0.025em; }
.fo-lead { margin-top: clamp(12px, 2svh, 22px); max-width: 52ch; color: var(--ink-2); font-size: clamp(1.05rem, 1rem + 0.3vw, 1.25rem); line-height: 1.55; }
.fo-head-facts { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); margin: clamp(16px, 2.8svh, 30px) 0 0; border-top: 1px solid var(--ink); }
.fo-head-facts div { padding: 12px 14px 0 0; }
.fo-head-facts div + div { padding-left: 14px; border-left: 1px solid var(--rule); }
.fo-head-facts dt { font-family: var(--mono); font-size: 0.75rem; letter-spacing: 0.12em; text-transform: uppercase; color: var(--ink-3); }
.fo-head-facts dd { margin: 5px 0 0; font-size: 0.9375rem; line-height: 1.4; }
.fo-head-edition { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 14px; margin-top: clamp(12px, 2svh, 18px); color: var(--ink-3); font-size: 0.8125rem; }
.fo-head-edition .md-mono { font-size: 0.75rem; letter-spacing: 0.12em; color: var(--ink-2); padding-top: 2px; }
.fo-head-car { margin: 0; }
.fo-head-car.is-photo img { display: block; width: 100%; aspect-ratio: 3 / 2; max-height: 40svh; object-fit: cover; }
.fo-head-car.is-drawn { padding: clamp(18px, 4svh, 48px) clamp(16px, 2.4vw, 40px) 0; background: var(--paper); border: 1px solid var(--rule); }
/* The illustrations sit on white; multiply lets the white take the card's paper colour. */
.fo-head-car.is-drawn img { display: block; width: auto; max-width: 100%; height: auto; max-height: 30svh; margin-inline: auto; mix-blend-mode: multiply; }
.fo-cover-link { display: block; overflow: hidden; }
.fo-cover-link img { transition: scale 900ms var(--ease-out); }
.fo-cover-link:hover img { scale: 1.02; }
.fo-head-car figcaption { padding: 10px 0 0; color: var(--ink-3); font-size: 0.75rem; line-height: 1.4; }
.fo-head-car.is-drawn figcaption { margin-inline: calc(clamp(16px, 2.4vw, 40px) * -1); padding: 10px clamp(16px, 2.4vw, 40px) 12px; border-top: 1px solid var(--rule-strong); }
.fo-head-number { font-family: var(--serif); font-size: clamp(4rem, 3rem + 4vw, 8rem); line-height: 1; color: var(--burgundy); }

/* The record at a glance: one strip, one sentence of counts, the findings. */
.fo-glance { padding-block: clamp(18px, 3.4svh, 44px) clamp(32px, 6svh, 72px); border-top: 1px solid var(--ink); }
.fo-glance-head { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: baseline; gap: 8px 32px; }
.fo-glance-counts { color: var(--ink-2); font-size: 0.9375rem; }
.fo-strip { margin-top: clamp(12px, 2.4svh, 28px); }
/* On a short laptop screen and on a tablet the head drops its three facts (The car repeats them) and the picture
   stays smaller, to keep the strip and the way into the map in view. */
@media (min-width: 961px) and (max-height: 800px) {
  .fo-head-facts { display: none; }
  .fo-head { padding-bottom: 10px; }
  .fo-glance { padding-top: 16px; }
  .fo-glance .fo-h2 { font-size: 1.9rem; }
  .fo-strip .md-years-field { height: 38px; }
  .fo-glance-foot { margin-top: 8px; }
  .fo-map-button { min-height: 40px; }
}
@media (min-width: 641px) and (max-width: 960px) {
  .fo-head-facts { display: none; }
  .fo-head-render img, .fo-head-car.is-drawn img { max-height: 24svh; margin-inline: auto; }
  .fo-head-car.is-photo img { max-height: 22svh; }
}
.fo-strip .md-years-field { height: clamp(40px, 6svh, 64px); }
.fo-strip .md-year.is-gap { background: rgba(94, 1, 9, 0.08); }
.fo-strip .md-mark { cursor: pointer; }
.fo-strip-note { margin-top: 10px; color: var(--ink-3); font-size: 0.8125rem; }
.fo-glance-foot { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: 12px 28px; margin-top: 12px; }
.fo-glance-foot .fo-strip-note { margin-top: 0; }
.fo-map-button {
  display: inline-flex; align-items: center; gap: 14px; min-height: 46px; padding: 0 18px; border: 1px solid var(--ink); border-radius: 2px;
  color: var(--ink); font-size: 0.9375rem; font-weight: 600; text-decoration: none; transition: background-color 180ms var(--ease-out), color 180ms var(--ease-out);
}
.fo-map-button span::after { content: "→"; margin-left: 10px; display: inline-block; transition: translate 200ms var(--ease-out); }
.fo-map-button small { padding-left: 14px; border-left: 1px solid var(--rule-strong); color: var(--ink-3); font-size: 0.75rem; font-weight: 400; letter-spacing: 0.1em; transition: color 180ms var(--ease-out); }
.fo-map-button:hover { background: var(--ink); color: var(--sand); }
.fo-map-button:hover span::after { translate: 3px 0; }
.fo-map-button:hover small { color: rgba(246, 244, 237, 0.7); }
.fo-map-button:focus-visible { outline: 2px solid var(--burgundy); outline-offset: 3px; }
.fo-glance-empty { margin-top: 18px; max-width: 62ch; padding: clamp(18px, 3svh, 28px) clamp(18px, 2vw, 28px); border: 1px dashed var(--rule-strong); color: var(--ink-2); line-height: 1.55; }
.fo-findings { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 18px clamp(20px, 2.6vw, 44px); margin-top: clamp(24px, 4.4svh, 48px); }
.fo-findings a { display: grid; align-content: start; gap: 6px; padding-top: 14px; border-top: 1px solid var(--rule-strong); color: inherit; text-decoration: none; }
.fo-findings .md-mono { font-size: 0.75rem; letter-spacing: 0.12em; color: var(--burgundy); }
.fo-findings strong { font-family: var(--serif); font-weight: 400; font-size: clamp(1.15rem, 1.05rem + 0.4vw, 1.4rem); line-height: 1.15; transition: color 200ms var(--ease-out); }
.fo-findings a:hover strong { color: var(--burgundy); }
.fo-finding-text { color: var(--ink-2); font-size: 0.9375rem; line-height: 1.5; }

/* The story behind the chassis, where a file has one. */
.fo-story { padding-block: clamp(32px, 6svh, 72px); }
.fo-story-sections { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 24px clamp(32px, 5vw, 96px); margin-top: 24px; }
.fo-story-sections h3 { font-family: var(--serif); font-weight: 400; font-size: 1.25rem; }
.fo-story-sections p { margin-top: 6px; max-width: 62ch; color: var(--ink-2); line-height: 1.6; }

/* The history: a rail to find your way, the entries beside it. */
.fo-history { padding-block: clamp(36px, 6svh, 88px); }
.fo-history-layout { display: grid; grid-template-columns: minmax(0, 15rem) minmax(0, 1fr); gap: clamp(28px, 4vw, 72px); }
.fo-history--single .fo-history-layout { grid-template-columns: minmax(0, 1fr); }
.fo-history-rail { position: sticky; top: calc(var(--header-h) + var(--nav-h) + 16px); align-self: start; display: grid; gap: 18px; max-height: calc(100svh - var(--header-h) - var(--nav-h) - 32px); padding-top: 22px; overflow-y: auto; scrollbar-width: thin; }
.fo-history-index { display: grid; border-top: 1px solid var(--rule-strong); }
.fo-history-index a { position: relative; display: grid; grid-template-columns: minmax(0, 1fr) auto; column-gap: 10px; padding: 10px 0 10px 14px; border-bottom: 1px solid var(--rule); color: var(--ink-2); text-decoration: none; }
.fo-history-index a::before { content: ""; position: absolute; left: 0; top: 14px; width: 6px; height: 6px; border-radius: 1px; background: var(--rule-strong); transition: background-color 200ms var(--ease-out); }
.fo-history-index .md-mono { grid-column: 1; font-size: 0.75rem; letter-spacing: 0.1em; color: var(--ink-3); }
.fo-history-index strong { grid-column: 1; font-family: var(--serif); font-weight: 400; font-size: 1rem; line-height: 1.2; transition: color 200ms var(--ease-out); }
.fo-history-index em { grid-column: 2; grid-row: 1 / span 2; align-self: center; font-family: var(--mono); font-style: normal; font-size: 0.75rem; color: var(--ink-3); }
.fo-history-index a:hover strong, .fo-history-index a[aria-current] strong { color: var(--burgundy); }
.fo-history-index a[aria-current]::before { background: var(--burgundy); }
.fo-history-controls button {
  min-height: 38px; padding: 0 14px; border: 1px solid var(--rule-strong); border-radius: 2px; background: transparent; color: var(--ink);
  font: inherit; font-size: 0.875rem; cursor: pointer; transition: border-color 200ms var(--ease-out), background-color 200ms var(--ease-out);
}
.fo-history-controls button:hover { border-color: var(--ink); background: var(--paper); }
.fo-date-index summary { display: flex; justify-content: space-between; align-items: center; padding: 10px 0; border-block: 1px solid var(--rule); font-size: 0.875rem; cursor: pointer; list-style: none; }
.fo-date-index summary::-webkit-details-marker { display: none; }
.fo-date-index summary::after { content: "+"; font-family: var(--mono); color: var(--ink-3); }
.fo-date-index[open] summary::after { content: "−"; }
.fo-date-index nav { display: grid; max-height: 42svh; overflow-y: auto; padding: 4px 0; }
.fo-date-index a { display: grid; grid-template-columns: 6.6rem minmax(0, 1fr); gap: 8px; padding: 6px 0; color: var(--ink-2); font-size: 0.8125rem; line-height: 1.3; text-decoration: none; }
.fo-date-index a span { font-family: var(--mono); font-size: 0.75rem; letter-spacing: 0.04em; color: var(--ink-3); padding-top: 2px; }
.fo-date-index a strong { font-weight: 400; }
.fo-date-index a:hover strong { color: var(--burgundy); }

.fo-chapter + .fo-chapter { margin-top: clamp(28px, 5svh, 56px); }
.fo-chapter-heading { padding: 30px 0 16px; border-bottom: 1px solid var(--ink); scroll-margin-top: 12px; }
.fo-chapter-heading .md-mono { font-size: 0.75rem; letter-spacing: 0.12em; color: var(--burgundy); }
.fo-chapter-heading h3 { margin-top: 6px; font-family: var(--serif); font-weight: 400; font-size: clamp(1.65rem, 1.25rem + 1vw, 2.25rem); line-height: 1.08; letter-spacing: -0.015em; }
.fo-chapter-heading p:last-child:not(.md-mono) { margin-top: 6px; max-width: 62ch; color: var(--ink-2); font-size: 0.9375rem; }
.fo-chapter { scroll-margin-top: 12px; }

/* An entry: the date, then the title, its label and the account. */
.fo-entry { display: grid; grid-template-columns: minmax(0, 9rem) minmax(0, 1fr); gap: 6px clamp(18px, 2.4vw, 40px); padding: clamp(18px, 2.6svh, 28px) 0; border-bottom: 1px solid var(--rule); scroll-margin-top: 16px; outline: none; }
.fo-entry:target, .fo-entry:focus-visible { background: linear-gradient(90deg, rgba(94, 1, 9, 0.05), transparent 70%); }
.fo-entry-date { padding-top: 3px; font-family: var(--serif); font-size: 1rem; line-height: 1.3; color: var(--ink-2); }
.fo-entry-place { display: block; margin-top: 4px; font-family: var(--sans); font-size: 0.8125rem; color: var(--ink-3); }
.fo-undated-label { display: block; font-family: var(--mono); font-size: 0.75rem; letter-spacing: 0.1em; text-transform: uppercase; color: var(--burgundy); }
.fo-entry-date small { display: block; margin-top: 3px; color: var(--ink-3); font-family: var(--sans); font-size: 0.8125rem; }
.fo-entry-head { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: 6px 22px; }
.fo-entry-head h3 { font-family: var(--serif); font-weight: 400; font-size: clamp(1.28rem, 1.08rem + 0.6vw, 1.6rem); line-height: 1.15; letter-spacing: -0.01em; }
.fo-entry-details summary { display: grid; gap: 8px; margin-top: 8px; cursor: pointer; list-style: none; }
.fo-entry-details summary::-webkit-details-marker { display: none; }
.fo-entry-excerpt { max-width: 65ch; color: var(--ink-2); font-size: 1rem; line-height: 1.6; }
.fo-entry-action { justify-self: start; font-size: 0.875rem; font-weight: 600; border-bottom: 1px solid currentColor; transition: color 200ms var(--ease-out); }
.fo-entry-details summary:hover .fo-entry-action { color: var(--burgundy); }
.fo-entry-details summary:focus-visible { outline: 2px solid var(--burgundy); outline-offset: 4px; }
.fo-entry-action-close, .fo-entry-details[open] .fo-entry-action-open, .fo-entry-details[open] .fo-entry-excerpt { display: none; }
.fo-entry-details[open] .fo-entry-action-close { display: inline; }
.fo-entry-details[open] summary { order: 2; margin-top: 14px; }
.fo-entry-details[open] { display: flex; flex-direction: column; }
.fo-entry-body { display: grid; gap: 12px; margin-top: 8px; }
.fo-account { display: grid; gap: 12px; }
.fo-account p { max-width: 65ch; color: var(--ink-2); font-size: 1rem; line-height: 1.6; }
.fo-highlight { display: flex; align-items: baseline; gap: 10px; }
.fo-highlight strong { font-family: var(--serif); font-weight: 400; font-size: 1.6rem; }
.fo-highlight span { color: var(--ink-3); font-size: 0.875rem; }
.fo-takeaway { font-family: var(--serif); font-style: italic; font-size: 1.1rem; color: var(--burgundy); }
.fo-event-facts { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 24px; max-width: 65ch; }
.fo-event-facts div { padding: 8px 0; border-bottom: 1px solid var(--rule); }
.fo-event-facts dt { font-family: var(--mono); font-size: 0.75rem; letter-spacing: 0.1em; text-transform: uppercase; color: var(--ink-3); }
.fo-event-facts dd { margin: 3px 0 0; font-size: 0.9375rem; }
.fo-evidence { display: grid; gap: 8px; max-width: 72ch; padding: 12px 14px; background: var(--paper); border: 1px solid var(--rule); }
.fo-evidence-row { display: grid; grid-template-columns: 7.5rem minmax(0, 1fr); gap: 10px; color: var(--ink-2); font-size: 0.875rem; line-height: 1.5; }
.fo-evidence-row .md-mono { padding-top: 3px; font-size: 0.75rem; letter-spacing: 0.1em; color: var(--ink-3); }
.fo-evidence-row a { margin-right: 10px; color: var(--ink); text-underline-offset: 3px; }
.fo-evidence-context { color: var(--ink-3); }
.fo-media-link { display: grid; gap: 2px; justify-self: start; font-size: 0.875rem; color: var(--ink); }
.fo-media-link small { color: var(--ink-3); font-size: 0.75rem; }

/* A gap between entries is shown where it falls, not in a list at the end. */
.fo-gap { display: grid; grid-template-columns: minmax(0, 9rem) minmax(0, 1fr); gap: 6px clamp(18px, 2.4vw, 40px); padding: 16px 0; border-bottom: 1px solid var(--rule); background: repeating-linear-gradient(135deg, rgba(94, 1, 9, 0.05) 0 6px, transparent 6px 12px); }
.fo-gap .md-mono { padding-top: 4px; font-size: 0.75rem; letter-spacing: 0.12em; color: var(--burgundy); }
.fo-gap p { max-width: 65ch; color: var(--ink-2); font-size: 0.9375rem; line-height: 1.5; }
.fo-gap strong { color: var(--burgundy); font-weight: 600; }

.fo-empty { padding: clamp(24px, 4svh, 40px) 0; border-bottom: 1px solid var(--rule); }
.fo-empty h3 { font-family: var(--serif); font-weight: 400; font-size: clamp(1.3rem, 1.1rem + 0.6vw, 1.7rem); }
.fo-empty p { margin-top: 8px; max-width: 58ch; color: var(--ink-2); line-height: 1.55; }

/* Photographs, in the account they belong to. */
.fo-gallery { display: grid; gap: 10px; }
.fo-gallery-heading { font-size: 0.75rem; letter-spacing: 0.12em; color: var(--ink-3); }
.fo-photo-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 190px), 1fr)); gap: 14px; }
.fo-photo { margin: 0; scroll-margin-top: 16px; }
.fo-photo-image { display: block; overflow: hidden; background: var(--ink); }
.fo-photo-image img { display: block; width: 100%; aspect-ratio: 4 / 3; object-fit: cover; transition: scale 600ms var(--ease-out), opacity 300ms var(--ease-out); }
.fo-photo-image:hover img { scale: 1.03; opacity: 0.92; }
.fo-photo figcaption { display: grid; gap: 3px; padding-top: 8px; }
.fo-photo-date { font-family: var(--mono); font-size: 0.75rem; letter-spacing: 0.1em; text-transform: uppercase; color: var(--ink-3); }
.fo-photo h4 { font-size: 0.9375rem; font-weight: 600; line-height: 1.3; }
.fo-photo-caption { color: var(--ink-2); font-size: 0.8125rem; line-height: 1.45; }
.fo-photo-credit { color: var(--ink-3); font-size: 0.75rem; }
.fo-photo-source { justify-self: start; color: var(--ink-2); font-size: 0.75rem; text-underline-offset: 3px; }

/* The car's identity */
.fo-car { padding-block: clamp(36px, 6svh, 80px); border-top: 1px solid var(--ink); }
.fo-facts { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 0 clamp(20px, 3vw, 48px); }
.fo-facts div { padding: 14px 0; border-bottom: 1px solid var(--rule); }
.fo-facts dt { font-family: var(--mono); font-size: 0.75rem; letter-spacing: 0.12em; text-transform: uppercase; color: var(--ink-3); }
.fo-facts dd { margin: 5px 0 0; font-family: var(--serif); font-size: clamp(1.05rem, 1rem + 0.25vw, 1.2rem); line-height: 1.3; }
.fo-note { margin-top: 14px; max-width: 72ch; color: var(--ink-3); font-size: 0.8125rem; line-height: 1.5; }

/* Sources */
.fo-sources { padding-block: clamp(36px, 6svh, 80px); }
.fo-source-list { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 clamp(24px, 4vw, 64px); }
.fo-source-list li { display: grid; grid-template-columns: 2.4rem minmax(0, 1fr); gap: 12px; padding: 18px 0; border-bottom: 1px solid var(--rule); scroll-margin-top: 16px; }
.fo-source-list li:target { background: linear-gradient(90deg, rgba(94, 1, 9, 0.05), transparent 70%); }
.fo-source-n { font-family: var(--serif); font-style: italic; font-size: 1.3rem; line-height: 1.1; color: var(--burgundy); }
.fo-source-list .md-mono { font-size: 0.75rem; letter-spacing: 0.1em; color: var(--ink-3); }
.fo-source-list h3 { margin-top: 4px; font-family: var(--serif); font-weight: 400; font-size: 1.15rem; line-height: 1.2; }
.fo-source-list p:not(.md-mono) { margin-top: 6px; color: var(--ink-2); font-size: 0.875rem; line-height: 1.5; }
.fo-source-list a { display: inline-block; margin-top: 8px; font-size: 0.875rem; text-underline-offset: 3px; }
.fo-source-reference { margin-top: 8px; font-size: 0.75rem; }
.fo-source-none { grid-column: 1 / -1; padding: 18px 0; color: var(--ink-2); }
.fo-method { margin-top: 22px; }

/* Still open */
.fo-open { padding-block: clamp(40px, 7svh, 96px); background: var(--sand-deep); border-block: 1px solid var(--rule); }
.fo-open-grid { display: grid; grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr); gap: clamp(28px, 5vw, 96px); align-items: start; }
.fo-open-question { margin-top: 16px; max-width: 34ch; font-family: var(--serif); font-style: italic; font-size: clamp(1.3rem, 1.1rem + 0.7vw, 1.8rem); line-height: 1.3; color: var(--burgundy); }
.fo-question-list { border-top: 1px solid var(--ink); }
.fo-question-list a { display: grid; gap: 4px; padding: 14px 0; border-bottom: 1px solid var(--rule-strong); color: inherit; text-decoration: none; }
.fo-question-list strong { font-family: var(--serif); font-weight: 400; font-size: 1.15rem; line-height: 1.2; transition: color 200ms var(--ease-out); }
.fo-question-list a:hover strong { color: var(--burgundy); }
.fo-question-list span { color: var(--ink-2); font-size: 0.9375rem; line-height: 1.5; }
.fo-contribute { margin-top: 26px; }
.fo-contribute-title { font-weight: 600; }
.fo-contribute-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 26px; margin-top: 12px; }
.fo-contribute-note { margin-top: 12px; max-width: 58ch; color: var(--ink-3); font-size: 0.8125rem; line-height: 1.5; }
.fo-end { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: 10px 24px; padding-block: 28px; color: var(--ink-3); font-size: 0.875rem; }

/* The photograph viewer */
.fo-photo-viewer { width: 100vw; max-width: none; height: 100svh; max-height: none; margin: 0; padding: 0; border: 0; background: rgba(11, 13, 10, 0.97); color: var(--sand); }
.fo-photo-viewer::backdrop { background: rgba(11, 13, 10, 0.8); }
.fo-photo-viewer-shell { display: grid; grid-template-rows: auto minmax(0, 1fr) auto; height: 100%; }
.fo-photo-viewer-bar { display: flex; justify-content: space-between; align-items: center; gap: 16px; padding: 14px var(--gutter); }
.fo-photo-viewer-bar p { display: flex; gap: 12px; align-items: baseline; font-size: 0.875rem; }
.fo-photo-viewer-bar .md-mono { font-size: 0.75rem; letter-spacing: 0.12em; color: var(--on-ink-2); }
.fo-photo-counter { margin-left: auto; font-family: var(--mono); font-size: 0.75rem; color: var(--on-ink-2); }
.fo-photo-viewer button { min-height: 40px; padding: 0 14px; border: 1px solid rgba(246, 244, 237, 0.4); border-radius: 2px; background: transparent; color: var(--sand); font: inherit; font-size: 0.875rem; cursor: pointer; }
.fo-photo-viewer button:hover { border-color: var(--sand); }
.fo-photo-stage { display: grid; place-items: center; min-height: 0; padding: 0 var(--gutter); }
.fo-photo-full { max-width: 100%; max-height: 100%; object-fit: contain; }
.fo-photo-viewer-footer { display: flex; justify-content: space-between; align-items: end; gap: 16px 32px; padding: 16px var(--gutter) 24px; }
.fo-photo-viewer-footer h2 { font-family: var(--serif); font-weight: 400; font-size: 1.3rem; }
.fo-photo-viewer-footer p { max-width: 70ch; color: var(--on-ink-2); font-size: 0.875rem; line-height: 1.5; }
.fo-photo-viewer-date { font-family: var(--mono); font-size: 0.75rem !important; letter-spacing: 0.1em; text-transform: uppercase; }
.fo-photo-viewer-source { color: var(--sand); font-size: 0.8125rem; }
.fo-photo-viewer-footer nav { display: flex; gap: 8px; flex: none; }

/* Tablets and phones: one column, the rail becomes a row of periods above the entries. */
@media (max-width: 960px) {
  .fo-head { grid-template-columns: minmax(0, 1fr); }
  .fo-head-car { order: -1; }
  .fo-head-visual { display: contents; }
  .fo-head-render { order: -1; width: min(100%, 520px); justify-self: center; }
  .fo-head-render figcaption { text-align: center; }
  .fo-section-head, .fo-open-grid, .fo-story-sections { grid-template-columns: minmax(0, 1fr); }
  .fo-history-layout { grid-template-columns: minmax(0, 1fr); gap: 0; }
  .fo-history-rail { position: static; max-height: none; overflow: visible; padding-top: 16px; }
  .fo-history-index { display: flex; gap: 8px; overflow-x: auto; scrollbar-width: none; border-top: 0; padding-bottom: 4px; }
  .fo-history-index::-webkit-scrollbar { display: none; }
  .fo-history-index a { flex: none; padding: 8px 12px 8px 24px; border: 1px solid var(--rule-strong); border-radius: 2px; }
  .fo-history-index a::before { left: 10px; top: 50%; translate: 0 -50%; }
  .fo-history-index strong { font-size: 0.9375rem; }
  .fo-history-index .md-mono { display: none; }
  .fo-findings, .fo-facts { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .fo-source-list { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 640px) {
  :root:has(.md-file) { --nav-h: 46px; }
  .fo-nav-identity span { display: none; }
  .fo-nav-inner { gap: 18px; }
  .fo-nav-links { gap: 18px; }
  .fo-nav-links a { font-size: 0.8125rem; }
  .fo-nav-journey { display: none; }
  .fo-nav-back { padding-right: 14px; font-size: 0.8125rem; }
  .fo-nav-back ~ .fo-nav-identity { display: none; }
  .fo-nav-note span:last-child { display: none; }
  .fo-head { padding-block: 20px 28px; gap: 18px; }
  .fo-title { font-size: clamp(2.1rem, 9vw, 2.8rem); }
  .fo-head-facts { grid-template-columns: minmax(0, 1fr); }
  .fo-head-facts div, .fo-head-facts div + div { display: grid; grid-template-columns: 8rem minmax(0, 1fr); align-items: baseline; padding: 8px 0; border-left: 0; border-bottom: 1px solid var(--rule); }
  .fo-head-facts dd { margin: 0; }
  .fo-findings, .fo-facts { grid-template-columns: minmax(0, 1fr); }
  .fo-entry, .fo-gap { grid-template-columns: minmax(0, 1fr); }
  .fo-h2 { font-size: clamp(1.9rem, 8.4vw, 2.3rem); }
  .fo-entry { gap: 4px; padding-block: 20px; }
  .fo-entry-date { padding-top: 0; font-family: var(--mono); font-size: 0.75rem; letter-spacing: 0.1em; text-transform: uppercase; color: var(--ink-3); }
  .fo-entry-place { display: inline; margin: 0 0 0 8px; font-family: var(--mono); font-size: 0.75rem; }
  .fo-entry-place::before { content: "· "; }
  .fo-entry-head { display: grid; gap: 6px; }
  .fo-entry-head h3 { font-size: 1.35rem; line-height: 1.18; }
  .fo-account p, .fo-entry-excerpt { font-size: 0.96875rem; line-height: 1.55; }
  .fo-chapter-heading { padding-top: 26px; }
  .fo-chapter-heading h3 { font-size: 1.75rem; }
  .fo-chapter-heading p:last-child:not(.md-mono) { font-size: 0.9375rem; }
  .fo-evidence-row { grid-template-columns: minmax(0, 1fr); gap: 2px; }
  .fo-event-facts { grid-template-columns: minmax(0, 1fr); }
  .fo-photo-viewer-footer { flex-direction: column; align-items: stretch; }
  .fo-strip .md-years-axis span:nth-child(2):not(:last-child) { display: none; }
}
@media (prefers-reduced-motion: reduce) {
  .fo-cover-link img, .fo-photo-image img { transition: none; }
}
@media print {
  .md-header, .md-footer, .fo-nav, .fo-history-rail, .fo-strip-note, .fo-contribute, .fo-photo-viewer, .fo-entry-action, .fo-entry-excerpt { display: none !important; }
  .fo-history-layout { grid-template-columns: minmax(0, 1fr); }
  .fo-open { background: none; }
  .fo-entry, .fo-chapter-heading, .fo-source-list li { break-inside: avoid; }
}

/* How sure a record is: a small mark and a plain word, quiet beside the title. The meaning is in the key above the
   history and on hover. */
.fo-label { display: inline-flex; flex: none; align-items: center; gap: 7px; color: var(--ink-2); font-size: 0.8125rem; font-weight: 500; line-height: 1.2; white-space: nowrap; cursor: help; }
.fo-label i { flex: none; width: 8px; height: 8px; border-radius: 1px; }
.fo-label-documented i { background: var(--ink); }
.fo-label-supported i { background: linear-gradient(var(--ink), var(--ink)) center / 3px 3px no-repeat; box-shadow: inset 0 0 0 1.5px var(--ink); }
.fo-label-stated i { background: var(--burgundy); }
.fo-label-disputed i { background: repeating-linear-gradient(135deg, var(--burgundy) 0 1.5px, transparent 1.5px 3px); box-shadow: inset 0 0 0 1.5px var(--burgundy); }
.fo-label-none { color: var(--ink-3); }
.fo-label-none i { box-shadow: inset 0 0 0 1px var(--rule-strong); }
.fo-history-head { grid-template-columns: minmax(0, 1fr); }
/* How to read the history: at the foot of the rail, one label to a line with its meaning under it. */
.fo-history-about { display: grid; gap: 12px; color: var(--ink-3); font-size: 0.8125rem; line-height: 1.5; }
.fo-history-rail .fo-history-about { padding-top: 16px; border-top: 1px solid var(--rule); }
.fo-history-rail .fo-date-index + .fo-history-about { padding-top: 0; border-top: 0; }
.fo-label-key { display: flex; flex-wrap: wrap; gap: 6px 22px; }
.fo-label-key li { display: inline-flex; align-items: center; gap: 8px; color: var(--ink-3); font-size: 0.8125rem; }
.fo-history-rail .fo-label-key { display: grid; gap: 8px; }
.fo-history-rail .fo-label-key li { display: grid; gap: 1px; }
/* A short file has no rail: the same words make one quiet row above the entries. */
.fo-history-entries > .fo-history-about { display: flex; flex-wrap: wrap; align-items: baseline; gap: 6px 28px; padding: 16px 0 4px; }
@media (max-width: 960px) {
  .fo-history-rail .fo-history-about { padding-top: 14px; }
  .fo-history-rail .fo-label-key { display: flex; gap: 6px 22px; }
  .fo-history-rail .fo-label-key li { display: inline-flex; gap: 8px; }
}
.fo-label-key .fo-label { cursor: default; color: var(--ink); }

/* Footnotes: a small number after the account leads to its source at the bottom; pointing at it names the source. */
.fo-cite { position: relative; margin-left: 2px; font-size: 0.7em; line-height: 0; vertical-align: super; }
.fo-cite + .fo-cite { margin-left: 3px; }
.fo-cite a { position: relative; padding: 0 1px; color: var(--burgundy); font-family: var(--sans); font-weight: 600; text-decoration: none; }
/* A source number is small, so an invisible area around it takes the tap. */
.fo-cite a::before { content: ""; position: absolute; inset: -12px -9px; }
.fo-cite a:hover { text-decoration: underline; text-underline-offset: 2px; }
.fo-cite a::after {
  content: attr(data-tip); position: absolute; z-index: 5; left: 50%; bottom: calc(100% + 10px); translate: -50% 4px; padding: 6px 10px;
  border-radius: 2px; background: var(--ink); color: var(--sand); font-size: 12px; font-weight: 500; letter-spacing: 0; line-height: 1.3; white-space: nowrap;
  display: none; pointer-events: none; animation: fo-tip 180ms var(--ease-out);
}
.fo-cite a:hover::after, .fo-cite a:focus-visible::after { display: block; translate: -50% 0; }
@keyframes fo-tip { from { opacity: 0; translate: -50% 4px; } to { opacity: 1; translate: -50% 0; } }

/* What is still to check, in one quiet line under the account. */
.fo-check { max-width: 65ch; color: var(--ink-3); font-size: 0.875rem; line-height: 1.5; }
.fo-check-label { margin-right: 6px; font-family: var(--mono); font-size: 0.75rem; letter-spacing: 0.12em; text-transform: uppercase; }
.fo-check-help { display: block; margin-top: 2px; color: var(--ink-2); }

/* The reference list: each source once, numbered, with the entries that cite it. */
.fo-source-cites { display: grid; gap: 8px; margin-top: 10px; }
.fo-source-list .fo-source-cites li { display: grid; grid-template-columns: minmax(0, 1fr); gap: 1px; padding: 0; border: 0; color: var(--ink-3); font-size: 0.8125rem; line-height: 1.45; }
.fo-source-backs { display: flex; flex-wrap: wrap; }
.fo-source-list .fo-source-cites a { margin-top: 0; color: var(--ink-2); font-weight: 600; text-decoration: none; white-space: nowrap; }
.fo-source-list .fo-source-cites a:not(:last-child)::after { content: "·"; margin: 0 7px; color: var(--ink-3); font-weight: 400; }
.fo-source-list .fo-source-cites a:hover { color: var(--burgundy); }
.fo-source-n { font-style: normal; font-family: var(--serif); }

/* The private file's head: the car first, the file's plan beneath it. */
.fo-head-visual { display: grid; gap: clamp(10px, 2svh, 22px); align-content: center; }
.fo-head-render { margin: 0; }
.fo-head-render img { display: block; width: auto; max-width: 100%; height: auto; max-height: 36svh; margin-left: auto; filter: drop-shadow(0 22px 18px rgba(30, 20, 6, 0.16)); }
.fo-head-render figcaption { margin-top: 2px; color: var(--ink-3); font-size: 0.75rem; text-align: right; }

/* Registrations: the plates a car has worn. */
.fo-plates { margin-top: clamp(30px, 5svh, 56px); }
.fo-plates-head { display: grid; grid-template-columns: minmax(0, 0.7fr) minmax(0, 1.3fr); gap: 8px clamp(24px, 4vw, 64px); align-items: baseline; padding-bottom: 12px; border-bottom: 1px solid var(--ink); }
.fo-plates-head h3 { font-family: var(--serif); font-weight: 400; font-size: clamp(1.4rem, 1.15rem + 0.7vw, 1.85rem); line-height: 1.1; }
.fo-plates-head p { max-width: 62ch; color: var(--ink-2); font-size: 0.9375rem; line-height: 1.55; }
.fo-plate-list li { display: grid; grid-template-columns: minmax(170px, auto) minmax(0, 11rem) minmax(0, 1fr) auto; gap: 8px clamp(16px, 2.4vw, 32px); align-items: center; padding: 14px 0; border-bottom: 1px solid var(--rule); }
.fo-plate { display: inline-flex; align-items: stretch; justify-self: start; height: 34px; overflow: hidden; border: 1.5px solid var(--ink); border-radius: 4px; background: var(--paper); font-family: var(--mono); box-shadow: 0 1px 0 rgba(0, 0, 0, 0.05); }
.fo-plate-country { display: grid; place-items: center; min-width: 28px; padding: 0 6px; background: var(--ink); color: var(--sand); font-size: 0.75rem; letter-spacing: 0.06em; }
.fo-plate-text { display: flex; align-items: center; padding: 0 12px; color: var(--ink); font-size: 1rem; letter-spacing: 0.12em; white-space: nowrap; }
.fo-plate-list .is-missing .fo-plate { border-style: dashed; border-color: var(--rule-strong); background: transparent; box-shadow: none; }
.fo-plate-list .is-missing .fo-plate-country { background: var(--rule-strong); }
.fo-plate-list .is-missing .fo-plate-text { color: var(--ink-3); }
.fo-plate.is-small { height: 24px; border-width: 1px; border-radius: 3px; }
.fo-plate.is-small .fo-plate-country { min-width: 20px; padding: 0 4px; font-size: 0.75rem; }
.fo-plate.is-small .fo-plate-text { padding: 0 8px; font-size: 0.75rem; letter-spacing: 0.1em; }
.fo-plate-about strong { display: block; font-size: 0.9375rem; font-weight: 600; }
.fo-plate-about span { color: var(--ink-3); font-size: 0.8125rem; }
.fo-plate-note { color: var(--ink-2); font-size: 0.875rem; line-height: 1.45; }
.fo-plates-empty { padding: 14px 0; color: var(--ink-2); border-bottom: 1px solid var(--rule); }
.fo-plates-add { margin-top: 14px; color: var(--ink-2); font-size: 0.9375rem; }
.fo-plates-add a { color: var(--ink); font-weight: 600; }

/* The journey: the car's life as a map you move along. One road from the car's first year to today, with the stops
   above and below it, the silent years in hatched burgundy, and lanes beneath for where it was, who kept it, its plates
   and its mileage. A thin line and a ring on the road mark the reading point (the middle of the view, 30% in on
   phones); the readout says where you are. On its own page, under the file's bar. */
.fo-journey {
  --px: clamp(86px, 7.4vw, 124px); --card-w: calc(var(--px) * 2.7 - 8px); --card-h: clamp(104px, 15.4svh, 150px);
  --lane-h: 30px; --gap-y: 26px; --road-y: calc(30px + var(--card-h) + var(--gap-y)); --below-y: calc(var(--road-y) + var(--gap-y));
  --lanes-y: calc(var(--below-y) + var(--card-h) * (var(--rows) - 1) + 14px * (var(--rows) - 2) + 22px);
  --read: 0.5;
  position: relative; padding-block: clamp(22px, 3.6svh, 48px) clamp(16px, 2.4svh, 28px); background: var(--sand-deep); border-block: 1px solid var(--rule);
}
.fo-journey-head { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: end; gap: 14px 40px; }
.fo-journey-kicker { font-size: 0.75rem; letter-spacing: 0.12em; color: var(--burgundy); }
.fo-journey .fo-h2 { margin-top: 6px; }
.fo-journey .fo-h2 em { color: var(--burgundy); }
.fo-journey-sub { max-width: 60ch; margin-top: 8px; color: var(--ink-2); font-size: 0.9375rem; line-height: 1.5; }
.fo-journey-tools { display: flex; align-items: center; gap: 14px; min-width: 0; }
.fo-journey-chapters { display: flex; gap: 6px; min-width: 0; overflow-x: auto; scrollbar-width: none; }
.fo-journey-chapters::-webkit-scrollbar { display: none; }
.fo-journey-chapters a {
  display: grid; flex: none; padding: 6px 12px; border: 1px solid var(--rule-strong); border-radius: 2px; background: rgba(253, 252, 248, 0.5);
  color: var(--ink-2); font-size: 0.8125rem; line-height: 1.25; text-decoration: none; transition: border-color 200ms var(--ease-out), background-color 200ms var(--ease-out), color 200ms var(--ease-out);
}
.fo-journey-chapters a .md-mono { font-size: 0.75rem; letter-spacing: 0.1em; color: var(--ink-3); }
.fo-journey-chapters a:hover, .fo-journey-chapters a.is-here { border-color: var(--ink); background: var(--paper); color: var(--ink); }
.fo-journey-steps { display: flex; flex: none; gap: 8px; }
.fo-journey-steps button, .fo-jm-reader-bar button[data-jm-reader-step] {
  display: grid; place-items: center; width: 40px; height: 40px; padding: 0; border: 1px solid var(--rule-strong); border-radius: 50%;
  background: transparent; color: var(--ink); cursor: pointer; transition: background-color 200ms var(--ease-out), color 200ms var(--ease-out), border-color 200ms var(--ease-out);
}
.fo-journey-steps button::before, .fo-jm-reader-bar button[data-jm-reader-step]::before {
  content: ""; width: 15px; height: 10px; background: currentColor;
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 18 12'%3E%3Cpath d='M0 6h16M11 1l5 5-5 5' fill='none' stroke='black' stroke-width='1.6'/%3E%3C/svg%3E") center / contain no-repeat;
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 18 12'%3E%3Cpath d='M0 6h16M11 1l5 5-5 5' fill='none' stroke='black' stroke-width='1.6'/%3E%3C/svg%3E") center / contain no-repeat;
}
.fo-journey-steps button[data-jm-step="-1"]::before, .fo-jm-reader-bar button[data-jm-reader-step="-1"]::before { transform: scaleX(-1); }
.fo-journey-steps button:hover, .fo-jm-reader-bar button[data-jm-reader-step]:hover { border-color: var(--ink); background: var(--ink); color: var(--sand); }
html:not(.md-js) .fo-journey-steps { display: none; }

.fo-journey-stage { display: grid; grid-template-columns: minmax(0, 1fr) auto; grid-template-areas: "map map" "readout mini"; align-items: center; row-gap: 12px; margin-top: clamp(14px, 2.6svh, 28px); }
.fo-jm-scroll { grid-area: map; overflow-x: auto; overflow-y: hidden; container-type: inline-size; scrollbar-width: none; outline: none; overscroll-behavior-x: contain; cursor: grab; }
.fo-jm-scroll::-webkit-scrollbar { display: none; }
.fo-jm-scroll:focus-visible { box-shadow: inset 0 0 0 2px var(--burgundy); }
.fo-journey.is-dragging .fo-jm-scroll { cursor: grabbing; }
.fo-journey.is-dragging .fo-jm-world { -webkit-user-select: none; user-select: none; }
.fo-jm-track { position: relative; display: flex; width: max-content; }
.fo-jm-world { position: relative; flex: none; width: calc(var(--span) * var(--px)); margin-inline: calc(var(--read) * 100cqw) calc((1 - var(--read)) * 100cqw); padding-top: var(--lanes-y); }
html:not(.md-js) .fo-jm-world { margin-inline: var(--gutter); }
html:not(.md-js) :is(.fo-jm-opening, .fo-jm-key, .fo-jm-ending, .fo-jm-ending-open) { display: none; }
.fo-mapview .fo-journey { display: flex; flex-direction: column; min-height: calc(100svh - var(--header-h) - var(--nav-h) - 1px); border-top: 0; }
.fo-mapview .fo-journey-stage { flex: 1; align-content: center; }

/* The reading point: a line down the map and a ring where it crosses the road. */
.fo-journey-stage::before { content: ""; grid-area: map; justify-self: start; align-self: stretch; margin-left: calc(var(--read) * 100%); z-index: 2; width: 1px; background: linear-gradient(rgba(94, 1, 9, 0), rgba(94, 1, 9, 0.28) 12%, rgba(94, 1, 9, 0.28) 88%, rgba(94, 1, 9, 0)); pointer-events: none; }
.fo-journey-stage::after { content: ""; grid-area: map; justify-self: start; align-self: start; z-index: 4; width: 19px; height: 19px; margin: calc(var(--road-y) - 9.5px) 0 0 calc(var(--read) * 100% - 9px); border: 1.5px solid var(--burgundy); border-radius: 50%; pointer-events: none; transition: border-color 300ms var(--ease-out); }
.fo-journey.is-silent .fo-journey-stage::after { border-style: dashed; }
html:not(.md-js) .fo-journey-stage::before, html:not(.md-js) .fo-journey-stage::after { display: none; }

/* The world: decades in the background, chapters along the top, the road, the gap, the stops. */
.fo-jm-decade { position: absolute; z-index: 0; left: calc(var(--x) * var(--px)); top: calc(var(--road-y) - 0.82em); font-family: var(--serif); font-size: clamp(5rem, 9svh, 8rem); line-height: 1; letter-spacing: -0.03em; color: rgba(11, 13, 10, 0.045); pointer-events: none; }
.fo-jm-chapter { position: absolute; z-index: 1; top: 0; left: calc(var(--x) * var(--px)); width: calc(var(--room) * var(--px)); padding: 0 8px 6px 10px; overflow: hidden; border-left: 1px solid var(--ink-3); font-family: var(--serif); font-size: 0.9375rem; line-height: 1.1; white-space: nowrap; text-overflow: ellipsis; color: var(--ink-2); }
.fo-jm-chapter .md-mono { margin-right: 8px; font-size: 0.75rem; letter-spacing: 0.1em; color: var(--ink-3); }
.fo-jm-road { position: absolute; z-index: 1; left: 0; right: 0; top: var(--road-y); height: 2px; margin-top: -1px; background: var(--rule-strong); }
.fo-jm-road::before { content: ""; position: absolute; right: 100%; top: 0; width: 30cqw; height: 100%; background: linear-gradient(90deg, rgba(169, 162, 145, 0), var(--rule-strong)); }
.fo-jm-road::after { content: ""; position: absolute; left: 0; top: 0; width: calc(var(--done, 0) * var(--px)); max-width: 100%; height: 100%; background: var(--ink); }
.fo-jm-road-start { position: absolute; left: 0; top: 50%; width: 9px; height: 9px; margin: -4.5px 0 0 -4.5px; border-radius: 50%; background: var(--ink); }
.fo-jm-gap {
  position: absolute; z-index: 1; left: calc(var(--x) * var(--px)); width: calc(var(--w) * var(--px)); top: 26px; height: calc(var(--lanes-y) - 34px);
  border-inline: 1px dashed rgba(94, 1, 9, 0.35); background: repeating-linear-gradient(135deg, rgba(94, 1, 9, 0.06) 0 7px, transparent 7px 14px);
}
.fo-jm-gap::before { content: ""; position: absolute; left: 0; right: 0; top: calc(var(--road-y) - 27px); height: 2px; background: repeating-linear-gradient(90deg, var(--burgundy) 0 6px, transparent 6px 12px); }
.fo-jm-gap-title, .fo-jm-gap-text { position: absolute; z-index: 3; left: 50%; width: max-content; max-width: 92%; translate: -50% 0; padding: 0 10px; background: var(--sand-deep); text-align: center; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.fo-jm-gap-title { top: calc(var(--road-y) - 24px); font-family: var(--serif); font-style: italic; font-size: clamp(1.05rem, 0.95rem + 0.4vw, 1.35rem); line-height: 1.1; color: var(--burgundy); }
.fo-jm-gap-text { top: calc(var(--road-y) + 5px); color: var(--ink-2); font-size: 0.8125rem; line-height: 1.4; }
.fo-jm-empty { position: absolute; z-index: 2; left: calc(var(--x) * var(--px)); top: calc(var(--road-y) - 54px); max-width: 34ch; color: var(--ink-2); font-family: var(--serif); font-style: italic; font-size: 1.15rem; }

.fo-jm-stops li { position: absolute; inset: 0; pointer-events: none; }
.fo-jm-pin { position: absolute; z-index: 3; left: calc(var(--t) * var(--px)); top: var(--road-y); width: 11px; height: 11px; margin: -5.5px 0 0 -5.5px; border: 2px solid var(--sand-deep); border-radius: 50%; background: var(--ink); box-sizing: content-box; transition: transform 250ms var(--ease-out); }
:is(.fo-jm-pin, .fo-jm-key-pin).is-stated { background: var(--burgundy); }
:is(.fo-jm-pin, .fo-jm-key-pin).is-supported { background: var(--paper); box-shadow: inset 0 0 0 2px var(--ink); }
:is(.fo-jm-pin, .fo-jm-key-pin):is(.is-disputed, .is-none) { background: var(--paper); box-shadow: inset 0 0 0 2px var(--burgundy); }
.fo-jm-stem { position: absolute; z-index: 1; left: calc(var(--t) * var(--px)); width: calc(max(var(--dx), 0) * var(--px)); border-left: 1px solid var(--ink-3); }
.is-row-0 .fo-jm-stem { top: calc(30px + var(--card-h)); height: var(--gap-y); border-top: 1px solid var(--ink-3); }
.is-row-1 .fo-jm-stem { top: var(--road-y); height: var(--gap-y); border-bottom: 1px solid var(--ink-3); }
.is-row-2 .fo-jm-stem { top: var(--road-y); height: calc(var(--gap-y) + var(--card-h) + 14px); border-bottom: 1px solid var(--ink-3); }
.fo-jm-card {
  position: absolute; z-index: 2; left: calc(var(--x) * var(--px)); width: var(--card-w); height: var(--card-h); display: flex; flex-direction: column; gap: 4px;
  padding: 11px 13px; overflow: hidden; border: 1px solid var(--rule); border-radius: 2px; background: var(--paper); color: inherit; text-decoration: none; pointer-events: auto;
  box-shadow: 0 1px 1px rgba(40, 25, 10, 0.06), 0 14px 24px -20px rgba(40, 25, 10, 0.4); transition: translate 260ms var(--ease-out), box-shadow 260ms var(--ease-out), border-color 260ms var(--ease-out);
}
.is-row-0 .fo-jm-card { top: 30px; }
.is-row-1 .fo-jm-card { top: var(--below-y); }
.is-row-2 .fo-jm-card { top: calc(var(--below-y) + var(--card-h) + 14px); }
.fo-jm-card:hover, .fo-jm-stop.is-near .fo-jm-card, .fo-jm-stop.is-open .fo-jm-card { border-color: var(--ink); box-shadow: 0 1px 1px rgba(40, 25, 10, 0.08), 0 22px 30px -22px rgba(40, 25, 10, 0.55); }
.is-row-0 .fo-jm-card:hover, .is-row-0.is-near .fo-jm-card { translate: 0 -3px; }
.is-row-1 .fo-jm-card:hover, .is-row-2 .fo-jm-card:hover, .is-row-1.is-near .fo-jm-card, .is-row-2.is-near .fo-jm-card { translate: 0 3px; }
.fo-jm-stop.is-near .fo-jm-pin, .fo-jm-stop.is-open .fo-jm-pin { transform: scale(1.35); }
.fo-jm-stop.is-open .fo-jm-card { border-color: var(--burgundy); box-shadow: 0 0 0 1px var(--burgundy), 0 22px 30px -22px rgba(40, 25, 10, 0.55); }
.fo-jm-card:focus-visible { outline: 2px solid var(--burgundy); outline-offset: 3px; }
.fo-jm-card > * { flex-shrink: 0; }
.fo-jm-date { font-size: 0.75rem; letter-spacing: 0.1em; color: var(--ink-3); }
.fo-jm-title { display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; overflow: hidden; font-family: var(--serif); font-size: clamp(1rem, 0.92rem + 0.3vw, 1.18rem); line-height: 1.18; color: var(--ink); }
.fo-jm-text { display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; overflow: hidden; color: var(--ink-2); font-size: 0.8125rem; line-height: 1.4; }
.fo-jm-meta { display: flex; align-items: center; gap: 10px; min-width: 0; margin-top: auto; overflow: hidden; white-space: nowrap; }
.fo-jm-meta .fo-label { font-size: 0.75rem; cursor: inherit; }
.fo-jm-place { min-width: 0; overflow: hidden; color: var(--ink-3); font-size: 0.75rem; text-overflow: ellipsis; }
.fo-jm-card.has-photo { padding-right: calc(var(--card-h) * 0.6 + 18px); }
.fo-jm-thumb { position: absolute; top: 6px; right: 6px; bottom: 6px; width: calc(var(--card-h) * 0.6); height: auto; object-fit: cover; }
.fo-jm-km { position: absolute; top: 10px; right: 12px; font-size: 0.75rem; letter-spacing: 0.06em; color: var(--burgundy); }
.fo-jm-card.has-photo .fo-jm-km { right: calc(var(--card-h) * 0.6 + 16px); }

/* Before the first year: what the map holds and how to read it. After today: where the car is now, and what is open. */
.fo-jm-opening, .fo-jm-key, .fo-jm-ending, .fo-jm-ending-open { position: absolute; z-index: 2; }
.fo-jm-opening, .fo-jm-key { right: calc(100% + 48px); width: min(360px, calc(var(--read) * 100cqw - 48px - var(--gutter))); text-align: right; }
.fo-jm-ending, .fo-jm-ending-open { left: calc(100% + 48px); width: min(360px, calc((1 - var(--read)) * 100cqw - 48px - var(--gutter))); }
.fo-jm-opening, .fo-jm-ending { top: 30px; height: var(--card-h); display: flex; flex-direction: column; justify-content: flex-end; }
.fo-jm-key, .fo-jm-ending-open { top: var(--below-y); }
.fo-jm-opening-title, .fo-jm-ending-title { font-family: var(--serif); font-size: clamp(1.55rem, 1.15rem + 1.1vw, 2.2rem); line-height: 1.06; letter-spacing: -0.015em; color: var(--ink); }
.fo-jm-ending-title { display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; overflow: hidden; margin-top: 8px; }
.fo-jm-opening-facts { margin-top: 10px; font-size: 0.75rem; letter-spacing: 0.1em; color: var(--ink-3); }
.fo-jm-ending-kicker { font-size: 0.75rem; letter-spacing: 0.12em; color: var(--burgundy); }
.fo-jm-ending-line { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 12px; margin-top: 10px; color: var(--ink-2); font-size: 0.875rem; }
.fo-jm-ending-line .fo-plate { background: var(--paper); }
.fo-jm-key-hint, .fo-jm-ending-open { color: var(--ink-2); font-size: 0.875rem; line-height: 1.5; text-wrap: balance; }
.fo-jm-ending-open a { display: inline-block; margin-top: 4px; font-weight: 500; }
.fo-jm-key-list { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 6px 14px; margin-top: 10px; color: var(--ink-3); font-size: 0.75rem; }
.fo-jm-key-list li { display: inline-flex; align-items: center; gap: 6px; }
.fo-jm-key-pin { width: 9px; height: 9px; border-radius: 50%; background: var(--ink); }
.fo-jm-key-gap { width: 16px; height: 9px; border-inline: 1px dashed rgba(94, 1, 9, 0.45); background: repeating-linear-gradient(135deg, rgba(94, 1, 9, 0.16) 0 3px, transparent 3px 6px); }

/* The lanes: where it was, who kept it, the plates it wore, its mileage. Each lane's name stays at the left edge. */
.fo-jm-lanes { display: grid; gap: 6px; margin-left: -96px; }
.fo-jm-lane { position: relative; height: var(--lane-h); }
.fo-jm-lane-name { position: sticky; z-index: 3; left: 0; display: inline-flex; align-items: center; width: 92px; height: 100%; padding: 0 8px; background: linear-gradient(90deg, var(--sand-deep) 80%, rgba(236, 232, 220, 0)); font-size: 0.75rem; letter-spacing: 0.12em; color: var(--ink-3); }
.fo-jm-seg {
  position: absolute; top: 0; bottom: 0; left: calc(96px + var(--x) * var(--px)); width: calc(var(--w) * var(--px) - 3px); display: flex; align-items: center; gap: 8px; padding: 0 10px;
  overflow: clip; border: 1px solid var(--rule); border-radius: 2px; background: rgba(253, 252, 248, 0.72); color: var(--ink); font-size: 0.8125rem; white-space: nowrap;
  transition: border-color 260ms var(--ease-out), background-color 260ms var(--ease-out);
}
.fo-jm-seg small { color: var(--ink-3); font-size: 0.75rem; }
.fo-jm-seg.is-open { border-style: dashed; border-color: rgba(94, 1, 9, 0.4); background: transparent; color: var(--burgundy); font-style: italic; }
.fo-jm-seg.is-here { border-color: var(--ink); background: var(--paper); }
.fo-jm-seg.is-open.is-here { border-color: var(--burgundy); }
.fo-jm-code { display: inline-grid; place-items: center; min-width: 26px; height: 18px; padding: 0 5px; border: 1.5px solid var(--ink); border-radius: 999px; font-family: var(--mono); font-size: 0.75rem; font-weight: 700; letter-spacing: 0.04em; font-style: normal; }
.is-open .fo-jm-code { border-color: currentColor; }
.is-keepers .fo-jm-seg.is-documented { box-shadow: inset 3px 0 0 var(--ink); }
.is-keepers .fo-jm-seg.is-supported { box-shadow: inset 3px 0 0 var(--ink-3); }
.is-keepers .fo-jm-seg.is-stated { box-shadow: inset 3px 0 0 var(--burgundy); }
.is-plates .fo-jm-seg { padding: 0; border: 0; background: linear-gradient(var(--rule-strong), var(--rule-strong)) 0 50% / 100% 1px no-repeat; }
.is-plates .fo-jm-seg.is-open { background: repeating-linear-gradient(90deg, rgba(94, 1, 9, 0.45) 0 4px, transparent 4px 8px) 0 50% / 100% 1px no-repeat; }
.is-plates .fo-plate { background: var(--paper); }
.is-plates .is-open .fo-plate { border-style: dashed; border-color: rgba(94, 1, 9, 0.5); background: var(--sand-deep); }
.is-plates .is-open .fo-plate-country { background: rgba(94, 1, 9, 0.55); }
.is-plates .fo-jm-seg.is-here .fo-plate { box-shadow: 0 0 0 2px rgba(94, 1, 9, 0.18); }
.fo-jm-lane.is-km { height: 58px; }
.fo-jm-km-line { position: absolute; top: 0; left: 96px; width: calc(100% - 96px); height: 100%; overflow: visible; }
.fo-jm-km-line polyline { fill: none; stroke: var(--burgundy); stroke-width: 1.5; vector-effect: non-scaling-stroke; }
.fo-jm-km-point { position: absolute; left: calc(96px + var(--x) * var(--px)); top: calc((92 - var(--y) * 80) * 1%); width: 7px; height: 7px; margin: -3.5px 0 0 -3.5px; border-radius: 50%; background: var(--burgundy); }
.fo-jm-km-point span { position: absolute; left: 10px; bottom: 4px; font-family: var(--mono); font-size: 0.75rem; letter-spacing: 0.04em; color: var(--burgundy); white-space: nowrap; }
.fo-jm-axis { position: relative; height: 28px; margin-top: 10px; border-top: 1px solid var(--rule); }
.fo-jm-axis li { position: absolute; left: calc(var(--x) * var(--px)); top: 0; height: 5px; border-left: 1px solid var(--rule-strong); }
.fo-jm-axis li span { display: none; }
.fo-jm-axis li.is-five { height: 8px; border-color: var(--ink-3); }
.fo-jm-axis li.is-five span { display: block; position: absolute; left: -2px; top: 10px; font-family: var(--mono); font-size: 0.75rem; letter-spacing: 0.08em; color: var(--ink-3); }
.fo-jm-axis li.is-ten span { color: var(--ink); }

/* Under the map: where you are, and the whole life in one strip with the view marked on it. */
.fo-jm-readout { grid-area: readout; display: flex; align-items: baseline; gap: 14px; min-width: 0; padding-left: var(--gutter); }
.fo-jm-year { flex: none; font-family: var(--serif); font-size: clamp(1.7rem, 1.3rem + 1.1vw, 2.4rem); line-height: 1; letter-spacing: -0.02em; color: var(--burgundy); font-variant-numeric: tabular-nums; }
.fo-jm-line { min-width: 0; overflow: hidden; color: var(--ink-2); font-size: 0.9375rem; white-space: nowrap; text-overflow: ellipsis; }
.fo-jm-mini { grid-area: mini; position: relative; display: grid; grid-auto-flow: column; grid-auto-columns: minmax(0, 1fr); gap: 2px; width: clamp(200px, 30vw, 440px); height: 22px; margin-right: var(--gutter); cursor: pointer; }
.fo-jm-mini i { border-radius: 1px; background: rgba(11, 13, 10, 0.07); }
.fo-jm-mini i.has-stop { background: var(--ink); }
.fo-jm-mini i.is-gap { background: rgba(94, 1, 9, 0.14); }
.fo-jm-mini-window { position: absolute; top: -4px; bottom: -4px; left: 0; width: 10%; border: 1.5px solid var(--burgundy); border-radius: 2px; background: rgba(94, 1, 9, 0.06); pointer-events: none; }
html:not(.md-js) .fo-jm-mini, html:not(.md-js) .fo-jm-readout { display: none; }

/* Reading a moment: a panel over the right of the map. */
.fo-jm-reader {
  grid-area: map; justify-self: end; align-self: stretch; z-index: 6; width: min(430px, calc(100% - 2 * var(--gutter))); margin-right: var(--gutter); overflow-y: auto;
  display: flex; flex-direction: column; border: 1px solid var(--rule); border-radius: 2px; background: var(--paper); box-shadow: 0 30px 60px -30px rgba(30, 20, 6, 0.5);
}
.fo-jm-reader:not([hidden]) { animation: fo-jm-in 320ms var(--ease-out); }
@keyframes fo-jm-in { from { opacity: 0; transform: translateX(16px); } to { opacity: 1; transform: none; } }
.fo-jm-reader-bar { position: sticky; top: 0; z-index: 1; display: flex; align-items: center; gap: 8px; padding: 12px 14px; border-bottom: 1px solid var(--rule); background: var(--paper); }
.fo-jm-reader-close { margin-left: auto; padding: 0; border: 0; background: none; color: var(--ink-2); font: inherit; font-size: 0.875rem; font-weight: 500; text-decoration: underline; text-underline-offset: 3px; cursor: pointer; }
.fo-jm-reader-close:hover { color: var(--burgundy); }
.fo-jm-reader-body { display: grid; gap: 10px; padding: 18px 20px 22px; outline: none; }
.fo-jm-r-date { font-size: 0.75rem; letter-spacing: 0.1em; color: var(--ink-3); }
.fo-jm-r-title { font-family: var(--serif); font-weight: 400; font-size: 1.5rem; line-height: 1.12; }
.fo-jm-r-text { color: var(--ink-2); font-size: 0.9375rem; line-height: 1.6; }
.fo-jm-r-photos { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 6px; }
.fo-jm-r-photos img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; }
.fo-jm-r-link { justify-self: start; margin-top: 6px; font-size: 0.9375rem; }

/* Short laptop screens and smaller: fewer lanes, smaller cards. */
@media (max-height: 999px) {
  .fo-jm-lane.is-km { display: none; }
}
@media (max-height: 880px) {
  .fo-jm-text { -webkit-line-clamp: 1; }
  .fo-journey-sub { display: none; }
}
.fo-journey[data-rows="3"] { --card-h: clamp(96px, 12.4svh, 124px); --gap-y: 22px; }
@media (max-height: 760px) {
  .fo-journey { --card-h: 98px; --lane-h: 26px; --gap-y: 22px; }
  .fo-jm-lane.is-km, .fo-jm-lane.is-keepers, .fo-jm-text { display: none; }
  .fo-journey-sub { display: none; }
}
@media (max-width: 960px) {
  .fo-journey { --card-h: clamp(100px, 13.4svh, 138px); }
  .fo-journey-head { align-items: start; }
  .fo-journey-tools { width: 100%; justify-content: space-between; }
  .fo-plates-head { grid-template-columns: minmax(0, 1fr); }
  .fo-plate-list li { grid-template-columns: auto minmax(0, 1fr) auto; }
  .fo-plate-note { grid-column: 1 / -1; }
}
@media (max-width: 640px) {
  .fo-journey { --read: 0.3; --px: 82px; --card-h: 104px; --lane-h: 28px; --gap-y: 22px; }
  .fo-journey-sub, .fo-journey-chapters, .fo-jm-lane.is-km, .fo-jm-lane.is-keepers, .fo-jm-chapter, .fo-jm-gap-text, .fo-jm-opening, .fo-jm-key { display: none; }
  .fo-journey-tools { width: auto; }
  .fo-journey-head { flex-wrap: nowrap; align-items: end; }
  .fo-jm-title { font-size: 0.98rem; }
  .fo-jm-card { padding: 9px 11px; }
  .fo-journey-stage { grid-template-areas: "map" "readout"; grid-template-columns: minmax(0, 1fr); }
  .fo-jm-mini { display: none; }
  .fo-jm-line { font-size: 0.8125rem; }
  .fo-jm-reader { width: auto; margin-inline: 10px; }
  .fo-plate-list li { grid-template-columns: minmax(0, 1fr) auto; }
  .fo-plate-about { grid-column: 1 / -1; grid-row: 2; }
  .fo-plate-note { grid-row: 3; }
  .fo-cite a::after { display: none; }
}
@media print {
  .fo-journey { display: none; }
}

/* A long stretch keeps its name in view: the words ride along the left edge while the stretch is on screen. */
.fo-jm-seg-in { position: sticky; left: 100px; display: inline-flex; align-items: center; gap: 8px; min-width: 0; }
.is-plates .fo-jm-seg-in { left: 100px; }

/* Tablets and phones, after the base rules above: the car's picture leads, the file's plan follows the facts. */
@media (max-width: 960px) {
  .fo-head-visual { display: contents; }
  .fo-head-render { order: -1; width: min(100%, 520px); justify-self: center; }
  .fo-head-render figcaption { text-align: center; }
}
@media (max-width: 640px) {
  .fo-head-render { width: min(100%, 360px); }
  .fo-jm-lane-name { width: 64px; font-size: 0.75rem; }
  .fo-jm-lanes { margin-left: -68px; }
  .fo-jm-seg { left: calc(68px + var(--x) * var(--px)); }
  .fo-jm-seg-in, .is-plates .fo-jm-seg-in { left: 72px; }
  .fo-jm-gap-text { display: none; }
}
@media (max-height: 760px) {
  .fo-journey[data-rows="3"] { --card-h: 86px; --gap-y: 18px; }
  .fo-journey[data-rows="3"] .fo-jm-card { gap: 3px; padding: 8px 11px; }
  .fo-journey[data-rows="3"] .fo-jm-place { display: none; }
}
@media (max-width: 640px) and (max-height: 760px) {
  .fo-journey { --card-h: 90px; --lane-h: 24px; --gap-y: 18px; }
  .fo-journey[data-rows="3"] { --card-h: 76px; }
  .fo-journey .fo-h2 { font-size: 1.7rem; }
  .fo-jm-text, .fo-jm-date { display: none; }
  .fo-jm-year { font-size: 1.5rem; }
}

/* Reading the file, below its first screen. Every section has room around it and one rule only, the ink line under
   its heading, set to the width of the text. Lines between items are gone where space does the work. Type is sized
   for reading glasses: running text at 18px, small labels never under 12px, titles in the serif carrying the weight
   as they do in the head. The head and its first screen keep their own sizes. */
.md-file { --room: clamp(72px, 12svh, 150px); --gap-after-head: clamp(28px, 4.4svh, 52px); }
.fo-glance { border-top: 0; padding-bottom: var(--room); }
.fo-glance::before { content: ""; display: block; height: 1px; margin-bottom: clamp(18px, 3.4svh, 44px); background: var(--ink); }
.fo-glance { padding-top: 0; }
.fo-car, .fo-story, .fo-history, .fo-sources { border-top: 0; padding-block: 0 var(--room); }
.fo-open { padding-block: var(--room); }
.fo-section-head { padding-bottom: 20px; }
.fo-section-head + * { margin-top: var(--gap-after-head); }
.fo-section-head p, .fo-plates-head p { max-width: 58ch; color: var(--ink-2); font-size: 1.125rem; line-height: 1.6; }

/* Small labels, everywhere below the head: 12px mono, wide spacing. */
.fo-findings .md-mono, .fo-facts dt, .fo-chapter-heading .md-mono, .fo-gallery-heading, .fo-photo-date, .fo-source-list .md-mono,
.fo-check-label, .fo-undated-label, .fo-event-facts dt, .fo-evidence-row .md-mono, .fo-gap .md-mono, .fo-history-index .md-mono,
.fo-source-reference { font-size: 0.75rem; letter-spacing: 0.12em; }

/* The record at a glance: the findings stand apart from the strip, three short reads without rules. */
.fo-glance-counts, .fo-strip-note { font-size: 1rem; }
.fo-findings { gap: 36px clamp(28px, 4vw, 64px); margin-top: clamp(56px, 9svh, 104px); }
.fo-findings a { gap: 10px; padding-top: 0; border-top: 0; }
.fo-findings strong { font-size: clamp(1.5rem, 1.25rem + 0.7vw, 1.95rem); line-height: 1.12; }
.fo-finding-text { font-size: 1.0625rem; line-height: 1.6; }

/* The car: the facts in a quiet grid, read by their labels and spacing alone. */
.fo-facts { row-gap: clamp(26px, 4svh, 40px); }
.fo-facts div { padding: 0; border-bottom: 0; }
.fo-facts dd { margin-top: 8px; font-size: clamp(1.25rem, 1.12rem + 0.4vw, 1.5rem); line-height: 1.3; }
.fo-note { margin-top: clamp(28px, 4svh, 44px); max-width: 68ch; color: var(--ink-2); font-size: 1.0625rem; line-height: 1.6; }
.fo-plates { margin-top: var(--room); }
.fo-plates-head { padding-bottom: 20px; border-bottom-color: var(--rule-strong); }
.fo-plates-head h3 { font-size: clamp(1.75rem, 1.4rem + 1vw, 2.4rem); }
.fo-plate-list, .fo-plates-empty { margin-top: 12px; }
.fo-plate-list li { padding: 20px 0; }
.fo-plate-list li:last-child, .fo-plates-empty { border-bottom: 0; }
.fo-plate-about strong { font-size: 1.125rem; }
.fo-plate-about span, .fo-plate-note { font-size: 1rem; }
.fo-plates-empty { padding: 18px 0 0; font-size: 1.125rem; }
.fo-plates-add { margin-top: 20px; font-size: 1.0625rem; }

/* The story, where a file has one. */
.fo-story-sections { gap: 40px clamp(36px, 5vw, 96px); }
.fo-story-sections h3 { font-size: clamp(1.4rem, 1.2rem + 0.6vw, 1.75rem); }
.fo-story-sections p { margin-top: 10px; font-size: 1.125rem; line-height: 1.65; }

/* The history: chapters open with space, not a rule; entries keep one light line between them. */
.fo-history-about, .fo-label-key li { font-size: 0.9375rem; }
.fo-chapter-heading { padding: clamp(36px, 6svh, 64px) 0 20px; border-bottom: 0; }
.fo-chapter:first-child .fo-chapter-heading { padding-top: 0; }
.fo-chapter-heading h3 { font-size: clamp(1.9rem, 1.4rem + 1.3vw, 2.6rem); }
.fo-chapter-heading p:last-child:not(.md-mono) { margin-top: 10px; font-size: 1.125rem; line-height: 1.55; }
.fo-entry { padding-block: clamp(28px, 4.4svh, 44px); row-gap: 10px; }
.fo-entry-date { font-size: 1.125rem; }
.fo-entry-place, .fo-entry-date small { font-size: 0.9375rem; }
.fo-entry-head h3 { font-size: clamp(1.5rem, 1.25rem + 0.7vw, 1.9rem); line-height: 1.15; }
.fo-account p, .fo-entry-excerpt { font-size: 1.125rem; line-height: 1.65; }
.fo-entry-body { gap: 18px; margin-top: 12px; }
.fo-entry-action { font-size: 1rem; }
.fo-label { font-size: 0.9375rem; }
.fo-check { font-size: 1rem; line-height: 1.55; }
.fo-gap { padding-block: 24px; }
.fo-gap p { font-size: 1.0625rem; line-height: 1.55; }
.fo-gallery { gap: 14px; }
.fo-photo-grid { grid-template-columns: repeat(auto-fill, minmax(min(100%, 230px), 1fr)); gap: 24px; }
.fo-photo figcaption { gap: 5px; padding-top: 12px; }
.fo-photo h4 { font-size: 1.0625rem; }
.fo-photo-caption { font-size: 1rem; line-height: 1.5; }
.fo-photo-credit, .fo-photo-source { font-size: 0.875rem; }
.fo-evidence-row, .fo-media-link { font-size: 1rem; }
.fo-history-index a { padding-block: 12px; }
.fo-history-index strong { font-size: 1.0625rem; }

/* Sources: one source to a block, with room between. */
.fo-source-list { row-gap: 0; }
.fo-source-list li { padding: 28px 0; }
.fo-source-n { font-size: 1.5rem; }
.fo-source-list h3 { font-size: clamp(1.3rem, 1.15rem + 0.4vw, 1.55rem); }
.fo-source-list p:not(.md-mono), .fo-source-list a { font-size: 1rem; }
.fo-source-list .fo-source-cites li { font-size: 0.9375rem; }
.fo-method { margin-top: 36px; }

/* Still open */
.fo-question-list { border-top: 0; }
.fo-question-list a { gap: 6px; padding: 20px 0; border-bottom: 1px solid var(--rule); }
.fo-question-list li:first-child a { padding-top: 0; }
.fo-question-list strong { font-size: clamp(1.3rem, 1.15rem + 0.4vw, 1.55rem); }
.fo-question-list span { font-size: 1.0625rem; }
.fo-contribute { margin-top: 36px; }
.fo-contribute-title { font-size: 1.125rem; }
.fo-contribute-note { font-size: 0.9375rem; }
.fo-end { padding-block: 40px; font-size: 1rem; }

/* Phones: the same room in proportion, text never below 16px. */
@media (max-width: 640px) {
  .md-file { --room: 72px; --gap-after-head: 28px; }
  .fo-section-head p, .fo-plates-head p { font-size: 1.0625rem; }
  .fo-findings { gap: 32px; margin-top: 56px; }
  .fo-entry { padding-block: 28px; }
  .fo-entry-date, .fo-entry-place { font-size: 0.8125rem; }
  .fo-entry-head h3 { font-size: 1.5rem; }
  .fo-account p, .fo-entry-excerpt { font-size: 1.0625rem; line-height: 1.6; }
  .fo-chapter-heading h3 { font-size: 1.9rem; }
  .fo-chapter-heading p:last-child:not(.md-mono) { font-size: 1.0625rem; }
  .fo-source-list li { padding: 24px 0; }
  .fo-plate-list li { padding: 18px 0; }
}

/* The photograph viewer: the picture has its own area and is never covered; the caption sits on a solid band beneath
   it in clear, light type. Buttons are large and plainly outlined. */
.fo-photo-viewer { background: #0b0d0a; }
.fo-photo-viewer::backdrop { background: #0b0d0a; }
.fo-photo-viewer-bar { padding: 16px var(--gutter); border-bottom: 1px solid rgba(246, 244, 237, 0.12); }
.fo-photo-viewer-bar p { gap: 14px; font-size: 1rem; color: var(--sand); }
.fo-photo-viewer-bar .md-mono { font-size: 0.75rem; color: rgba(246, 244, 237, 0.62); }
.fo-photo-counter { font-size: 0.875rem; letter-spacing: 0.08em; color: rgba(246, 244, 237, 0.75); }
.fo-photo-stage { position: relative; margin: clamp(12px, 2svh, 24px) var(--gutter); padding: 0; }
.fo-photo-full { position: absolute; inset: 0; width: 100%; height: 100%; max-width: none; max-height: none; object-fit: contain; }
.fo-photo-viewer-footer {
  align-items: center; gap: 16px clamp(24px, 4vw, 64px); padding: clamp(16px, 2.4svh, 26px) var(--gutter) clamp(18px, 2.8svh, 30px);
  background: #151714; border-top: 1px solid rgba(246, 244, 237, 0.12);
}
.fo-photo-viewer-footer > div { display: grid; gap: 6px; max-width: 72ch; }
.fo-photo-viewer-footer h2 { font-size: clamp(1.4rem, 1.2rem + 0.6vw, 1.85rem); line-height: 1.15; color: var(--sand); }
.fo-photo-viewer-footer p { max-width: 72ch; color: rgba(246, 244, 237, 0.86); font-size: 1.0625rem; line-height: 1.55; }
.fo-photo-viewer-date { font-size: 0.75rem !important; color: rgba(246, 244, 237, 0.62) !important; }
.fo-photo-viewer-credit { font-size: 0.9375rem !important; color: rgba(246, 244, 237, 0.66) !important; }
.fo-photo-viewer-source { justify-self: start; color: var(--sand); font-size: 0.9375rem; text-underline-offset: 4px; }
.fo-photo-viewer button { min-height: 46px; padding: 0 18px; border: 1px solid rgba(246, 244, 237, 0.55); font-size: 1rem; transition: background-color 180ms var(--ease-out), color 180ms var(--ease-out); }
.fo-photo-viewer button:hover { border-color: var(--sand); background: var(--sand); color: #0b0d0a; }
.fo-photo-viewer button:disabled { opacity: 0.35; cursor: default; }
.fo-photo-viewer button:disabled:hover { background: transparent; color: var(--sand); border-color: rgba(246, 244, 237, 0.55); }
.fo-photo-viewer button:focus-visible { outline: 2px solid var(--sand); outline-offset: 3px; }
@media (max-width: 640px) {
  .fo-photo-stage { margin: 10px 0; }
  .fo-photo-viewer-footer p { font-size: 1rem; }
  .fo-photo-viewer-footer nav { justify-content: space-between; }
  .fo-photo-viewer-footer nav button { flex: 1; }
}
/* Short laptop screens: the rule above the record sits closer, so the strip and the way into the map stay in view. */
@media (min-width: 961px) and (max-height: 800px) {
  .fo-glance::before { margin-bottom: 12px; }
  .fo-glance-head .fo-h2 { line-height: 1; }
}
/* Phones: the way into the map is one full-width line; its counts are on the map page itself. */
@media (max-width: 640px) {
  .fo-map-button { width: 100%; justify-content: space-between; min-height: 52px; font-size: 1rem; }
  .fo-map-button small { display: none; }
}

/* Section heads read down, never across: the title, the line that explains it beneath, then the rule. Nothing sits
   to the right of a heading. */
.fo-section-head, .fo-plates-head { grid-template-columns: minmax(0, 1fr); align-items: start; row-gap: 14px; }
.fo-section-head p, .fo-plates-head p { max-width: 62ch; }
.fo-glance-head { flex-direction: column; flex-wrap: nowrap; justify-content: flex-start; align-items: flex-start; gap: 6px; }
.fo-glance-counts { color: var(--ink-3); }
.fo-open-grid { grid-template-columns: minmax(0, 1fr); gap: var(--gap-after-head); }
.fo-open-body { max-width: 62rem; }
.fo-open-question { max-width: 46ch; }

/* The counts lead the line under the strip, so the heading above stands alone. */
.fo-strip-counts { color: var(--ink); font-weight: 500; }

/* Phones: a gallery of three or more photographs is two to a row, each with its date, title and credit. The caption and
   the source open with the photograph in the viewer, so a long gallery stays a few screens, not a dozen. */
@media (max-width: 640px) {
  .fo-photo-grid:not([data-count="1"]):not([data-count="2"]) { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 18px 12px; }
  .fo-photo-grid:not([data-count="1"]):not([data-count="2"]) :is(.fo-photo-caption, .fo-photo-source) { display: none; }
  .fo-photo-grid:not([data-count="1"]):not([data-count="2"]) .fo-photo h4 { font-size: 0.875rem; }
}