/* longform.css: shared by /history and /bartholomew.
   The tokens are copied from index.html (keep the two in step) and extended for long-form reading. */
:root {
  --paper: #ece6dc;
  --paper-2: #e5ded2;
  --plate: #e7e0d4;
  --ink: #2a241e;
  --ink-2: #5c5248;
  --ink-3: #645a4f;
  --rule: #c2b8a9;
  --stamp: #9e3526;
  --hatch: rgba(158, 53, 38, .32);
  --grain: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='240' height='240'%3E%3Cfilter id='g'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 .16 0 0 0 0 .13 0 0 0 0 .1 0 0 0 .09 0'/%3E%3C/filter%3E%3Crect width='240' height='240' filter='url(%23g)'/%3E%3C/svg%3E");
  --display: "Besley", "Clarendon", "Century Schoolbook", Georgia, serif;
  --text: "Old Standard TT", "Century Schoolbook", "Times New Roman", Georgia, serif;
  /* long-form additions */
  --paper-plate: #efe9df;       /* the light plate engravings, maps and book pages sit on, in both themes */
  --plate-ink: #2a241e;
  --plate-rule: #b9ae9e;
  --gutter: 16px;
  --measure: 66ch;
  --toc-w: 196px;
  --sn-w: 250px;
  --sn-gap: 34px;
  color-scheme: light dark;
}
@media (prefers-color-scheme: dark) {
  :root {
    --paper: #1a1714;
    --paper-2: #221e1a;
    --plate: #221e1a;
    --ink: #e9e1d4;
    --ink-2: #b3a898;
    --ink-3: #9a8f80;
    --rule: #4a423a;
    --stamp: #e27b64;
    --hatch: rgba(226, 123, 100, .34);
    --grain: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='240' height='240'%3E%3Cfilter id='g'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 .95 0 0 0 0 .92 0 0 0 0 .86 0 0 0 .05 0'/%3E%3C/filter%3E%3Crect width='240' height='240' filter='url(%23g)'/%3E%3C/svg%3E");
    /* engravings stay on paper after dark, slightly dimmed so the plate does not glare */
    --paper-plate: #d9d1c3;
    --plate-rule: #6a6056;
  }
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; background: var(--paper); }
body {
  margin: 0;
  background: var(--paper) var(--grain);
  color: var(--ink);
  font: 400 18px/1.6 var(--text);
  font-kerning: normal;
  text-rendering: optimizeLegibility;
  -webkit-font-smoothing: antialiased;
  overflow-wrap: break-word;
}
img { display: block; max-width: 100%; height: auto; }
a { color: inherit; text-decoration-color: var(--ink-3); text-decoration-thickness: 1px; text-underline-offset: 3px; }
a:hover { text-decoration-color: var(--stamp); }
:focus-visible { outline: 2px solid var(--stamp); outline-offset: 3px; border-radius: 1px; }
[id] { scroll-margin-top: 18px; }
.vh { position: absolute !important; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
cite { font-style: italic; }
em cite, cite em { font-style: normal; }
sup { font-size: .6em; line-height: 0; vertical-align: .6em; }

/* ---------- skip link ---------- */
.skip {
  position: absolute; left: var(--gutter); top: -60px; z-index: 10;
  padding: 10px 14px; background: var(--ink); color: var(--paper);
  font: 600 13px/1 var(--display); letter-spacing: .12em; text-transform: uppercase; text-decoration: none;
}
.skip:focus { top: 10px; }

/* ---------- shared small-caps label (Besley has no true small caps, so they are cut by hand) ---------- */
.label, .kicker, .topstrip, .glance dt, .fig__no, .fig__credit, .toc__label, .tl__other, .foot__line {
  font-family: var(--display); font-weight: 600; text-transform: uppercase;
}
.label { margin: 0 0 14px; font-size: 11.5px; line-height: 1.3; letter-spacing: .2em; color: var(--ink-3); text-wrap: balance; }

/* ---------- page shell ---------- */
.page { max-width: 1360px; margin: 0 auto; padding: 0 var(--gutter); }

.topstrip {
  display: flex; flex-wrap: wrap; justify-content: space-between; align-items: baseline; gap: 6px 18px;
  max-width: 1360px; margin: 0 auto; padding: 14px var(--gutter) 11px;
  font-size: 11.5px; line-height: 1.3; letter-spacing: .18em; color: var(--ink-2);
}
.topstrip a { text-decoration: none; padding: 6px 0; }
.topstrip a:hover span { text-decoration: underline; text-decoration-color: var(--stamp); text-underline-offset: 3px; }
@media (max-width: 559.98px) {
  .topstrip__more { display: none; }
  .topstrip { flex-wrap: nowrap; }
  .topstrip a { white-space: nowrap; }
}
.topstrip__rule { border: 0; border-top: 1px solid var(--ink); margin: 0; }

/* ---------- title sheet: a framed sheet, as on the home page ---------- */
.sheet {
  position: relative; margin: 26px 0 0;
  border: 2px solid var(--ink); outline: 1px solid var(--ink); outline-offset: 5px;
}
.sheet::before, .sheet::after {
  content: ""; position: absolute; left: 0; right: 0; height: 7px; pointer-events: none;
  background: repeating-linear-gradient(90deg, transparent 0 calc(12.5% - 1px), var(--ink) calc(12.5% - 1px) 12.5%);
  clip-path: inset(0 2px 0 0);
}
.sheet::before { top: 0; }
.sheet::after { bottom: 0; }
.sheet__grid { display: grid; grid-template-columns: minmax(0, 1fr); }
.sheet__text { padding: 30px 18px 26px; }
.sheet h1 {
  margin: 0; font: 700 34px/1.08 var(--display); letter-spacing: .005em; text-wrap: balance;
}
.sheet h1 .h1__dates { display: block; margin-top: 8px; font-weight: 500; font-size: .58em; letter-spacing: .06em; color: var(--ink-2); font-variant-numeric: lining-nums; }
.standfirst { margin: 18px 0 0; font-size: 19.5px; line-height: 1.5; text-wrap: pretty; }
.sheet__hero { margin: 0; padding: 0 18px 22px; }
.sheet__hero img { width: 100%; border: 1px solid var(--ink); }
.sheet__hero--plate .plate { max-width: 360px; margin: 0 auto; }
.sheet__hero .fig__cap { text-align: center; }

.glance {
  display: grid; grid-template-columns: repeat(2, minmax(0, 1fr));
  margin: 0; border-top: 1px solid var(--ink);
}
.glance > div { padding: 12px 14px 13px; border-bottom: 1px solid var(--rule); }
.glance > div:nth-child(odd) { border-right: 1px solid var(--rule); }
.glance > div:nth-last-child(-n+2) { border-bottom: 0; }
.glance dt { font-size: 10.5px; line-height: 1.3; letter-spacing: .18em; color: var(--ink-3); }
.glance dd { margin: 5px 0 0; font: 500 16.5px/1.3 var(--display); text-wrap: balance; }
.glance dd a { text-decoration-color: var(--ink-3); }

/* ---------- chapter index ---------- */
.toc { margin: 34px 0 0; padding: 0 0 6px; border-bottom: 1px solid var(--ink); }
.toc__label { margin: 0 0 8px; font-size: 11.5px; letter-spacing: .2em; color: var(--ink-3); }
.toc ol { list-style: none; margin: 0; padding: 0; border-top: 1px solid var(--ink); }
.toc li + li { border-top: 1px solid var(--rule); }
.toc a {
  display: grid; grid-template-columns: 30px minmax(0, 1fr); align-items: baseline;
  padding: 8px 0 9px; text-decoration: none; font-size: 16.5px; line-height: 1.3;
}
.toc a:hover .toc__t { text-decoration: underline; text-decoration-color: var(--stamp); text-underline-offset: 3px; }
.toc__n { font: 600 11.5px/1 var(--display); letter-spacing: .08em; color: var(--stamp); font-variant-numeric: lining-nums tabular-nums; }
.toc__extra a { font-style: italic; color: var(--ink-2); }

/* ---------- the reading column ---------- */
.prose { font-size: 18.5px; line-height: 1.65; }
.prose p { margin: 0 0 1em; max-width: var(--measure); hanging-punctuation: first; }
.prose p:last-child { margin-bottom: 0; }

.chapter { padding: 46px 0 50px; border-bottom: 1px solid var(--rule); }
.chapter:last-of-type { border-bottom: 0; }
.kicker {
  display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 14px;
  margin: 0 0 12px; font-size: 11.5px; line-height: 1.3; letter-spacing: .2em; color: var(--ink-3);
}
.kicker__sheet { padding-bottom: 4px; border-bottom: 2px solid var(--ink); box-shadow: 0 3px 0 -2px var(--paper), 0 4px 0 -2px var(--ink); color: var(--ink); }
.kicker__date { color: var(--stamp); letter-spacing: .14em; font-variant-numeric: lining-nums; text-transform: none; }
.chapter h2, .endsec h2 {
  margin: 0 0 22px; max-width: 24ch;
  font: 650 29px/1.14 var(--display); letter-spacing: .003em; text-wrap: balance;
}
/* the chapter opens with a drop cap in the display face */
.prose p.dropcap::first-letter {
  float: left; margin: .09em .1em 0 0; padding: 0;
  font: 700 3.35em/.78 var(--display); color: var(--ink);
}

/* cross-links to the companion page */
a.xref::after { content: "\2009\2192" / ""; color: var(--stamp); text-decoration: none; display: inline-block; }

/* ---------- notes: sidenotes on wide screens, tap-to-open on narrow ones, full list at the end ---------- */
.fn>input { position: absolute; opacity: 0; width: 1px; height: 1px; margin: 0; pointer-events: none; }
.fn>label:not(.sn) {
  position: relative; display: inline-block; margin: 0 1px 0 2px; padding: 3px 4px 2px; min-width: 1.6em;
  font: 600 11px/1 var(--display); letter-spacing: .02em; text-align: center; vertical-align: .5em;
  color: var(--stamp); border: 1px solid var(--rule); border-radius: 2px; cursor: pointer;
  font-variant-numeric: lining-nums; font-style: normal;
}
.fn>label:not(.sn)::after { content: ""; position: absolute; inset: -9px -5px; }
.fn>input:focus-visible + label { outline: 2px solid var(--stamp); outline-offset: 2px; }
.fn>input:checked + label { background: var(--stamp); border-color: var(--stamp); color: var(--paper); }
.sn { display: none; }
.fn>input:checked ~ .sn {
  display: block; margin: 8px 0 12px; padding: 10px 12px 11px;
  background: var(--paper-2); border-left: 2px solid var(--stamp);
  font: 400 15px/1.5 var(--text); font-style: normal; color: var(--ink-2); text-align: left; letter-spacing: 0; text-transform: none;
}
.sn>b { font: 600 11px/1 var(--display); color: var(--stamp); margin-right: 6px; font-variant-numeric: lining-nums; }
.sn a, .notes a { overflow-wrap: anywhere; }
/* a note already opened higher up the page: the marker is a plain link to the list */
a.fn__ref {
  display: inline-block; margin: 0 1px 0 2px; font: 600 11px/1 var(--display); vertical-align: .5em;
  color: var(--stamp); text-decoration: none; font-style: normal;
}

/* ---------- figures ---------- */
figure { margin: 0; }
.fig { margin: 34px 0; }
.fig a.zoom { display: block; cursor: zoom-in; }
.fig__cap {
  margin: 12px 0 0; max-width: var(--measure);
  font-size: 15px; line-height: 1.45; color: var(--ink-2); text-wrap: pretty;
}
.fig__no { margin-right: 8px; font-size: 10.5px; letter-spacing: .18em; color: var(--ink); }
.fig__credit { display: block; margin-top: 5px; font-size: 10px; line-height: 1.45; letter-spacing: .12em; color: var(--ink-3); }

/* a plate: engravings, maps and book pages sit on light paper with a hairline frame, in both themes */
.plate {
  padding: 10px; background: var(--paper-plate);
  border: 1px solid var(--ink); outline: 1px solid var(--rule); outline-offset: 4px;
}
.plate img { width: 100%; mix-blend-mode: multiply; }
/* photographs are never filtered; they take a plain hairline */
.photo img { width: 100%; border: 1px solid var(--ink); }

.fig--narrow .plate, .fig--narrow .photo { max-width: 420px; }
.fig--narrow .plate { margin-left: 4px; }

/* two images side by side, their widths set by their proportions so their heights match */
.pair { display: flex; gap: 12px; align-items: flex-start; }
.pair > figure { flex: var(--ar) 1 0; min-width: 0; }
.pair .fig__cap { font-size: 13.5px; }

/* the small maps in a grid */
.mapgrid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 22px 14px; margin-top: 16px; }
.mapgrid .plate { padding: 6px; outline-offset: 3px; }
.mapgrid .fig__cap { font-size: 13.5px; }
.fig__head { margin: 0 0 4px; }

/* full-bleed moments: edge to edge on phones, across text and margin on wide screens */
.fig--bleed { margin-left: calc(-1 * var(--gutter)); margin-right: calc(-1 * var(--gutter)); }
.fig--bleed .photo img { border-left: 0; border-right: 0; }
.fig--bleed .plate { outline: 0; border-left: 0; border-right: 0; padding: 14px 10px; }
.fig--bleed .plate img { max-width: 1079px; margin: 0 auto; }
.fig--bleed .fig__cap { padding: 0 var(--gutter); }

/* ---------- pull quotes ---------- */
.pq { margin: 38px 0; padding: 22px 0 0; max-width: var(--measure); border-top: 1px solid var(--ink); position: relative; }
.pq::before { content: ""; position: absolute; top: -2px; left: 0; width: 56px; border-top: 3px solid var(--stamp); }
.pq blockquote { margin: 0; }
.pq blockquote p {
  margin: 0; max-width: none;
  font: italic 400 25px/1.3 var(--display); letter-spacing: -.003em; text-wrap: pretty; color: var(--ink);
}
.pq--long blockquote p { font-size: 21px !important; line-height: 1.5 !important; text-wrap: pretty; }
@media (min-width: 760px) { .pq--long blockquote p { font-size: 24px !important; } }
.fig--lead { max-width: 340px; margin: 6px 0 30px; }
.fig--lead img { filter: grayscale(1) contrast(1.02); }
.card__thumb--portrait img { object-position: 50% 22%; }
.pq figcaption { margin: 14px 0 0; font-size: 15px; line-height: 1.45; color: var(--ink-2); }
.pq figcaption::before { content: "\2014\2002"; color: var(--stamp); }

/* ---------- end sections: timeline, notes, credits ---------- */
.endsec { padding: 46px 0 40px; border-top: 2px solid var(--ink); }
.endsec h2 { margin-bottom: 18px; }
.endsec__intro { font-size: 16px; color: var(--ink-2); }

.timeline { list-style: none; margin: 8px 0 0; padding: 0; position: relative; }
.timeline::before { content: ""; position: absolute; top: 6px; bottom: 6px; left: 5px; border-left: 1px solid var(--ink); }
.tl { position: relative; padding: 0 0 18px 30px; }
.tl::before {
  content: ""; position: absolute; left: 0; top: 7px; width: 11px; height: 11px; border-radius: 50%;
  background: var(--paper); border: 1.5px solid var(--ink);
}
.tl--here::before { background: var(--ink); }
.tl__date { display: block; font: 650 15px/1.35 var(--display); letter-spacing: .02em; font-variant-numeric: lining-nums; }
.tl__date a { text-decoration: none; }
.tl__date a:hover { text-decoration: underline; text-decoration-color: var(--stamp); }
.tl__text { display: block; margin-top: 2px; font-size: 16.5px; line-height: 1.5; max-width: var(--measure); }
.tl__other { display: inline-block; margin-top: 4px; font-size: 10.5px; letter-spacing: .16em; color: var(--stamp); text-decoration: none; padding: 4px 0; }
.tl__other:hover { text-decoration: underline; }
.tl-key { display: flex; flex-wrap: wrap; gap: 6px 20px; margin: 0 0 20px; padding: 0; list-style: none; font-size: 14.5px; color: var(--ink-2); }
.tl-key span { display: inline-block; width: 11px; height: 11px; margin-right: 7px; border-radius: 50%; border: 1.5px solid var(--ink); vertical-align: -1px; }
.tl-key .k-here { background: var(--ink); }

.notes { margin: 0; padding: 0 0 0 2.4em; font-size: 15px; line-height: 1.55; color: var(--ink-2); max-width: 78ch; }
.notes li { margin: 0 0 .7em; padding-left: .3em; }
.notes li::marker { font: 600 12px var(--display); color: var(--stamp); }
.notes li:target { background: var(--paper-2); outline: 1px solid var(--rule); outline-offset: 4px; }

.credits { list-style: none; margin: 0; padding: 0; font-size: 15.5px; line-height: 1.5; max-width: 78ch; }
.credits li { padding: 11px 0 12px; border-top: 1px solid var(--rule); }
.credits li:last-child { border-bottom: 1px solid var(--rule); }
.credits b { font: 600 11px/1 var(--display); letter-spacing: .16em; text-transform: uppercase; color: var(--ink); margin-right: 6px; }
.credits__note { margin-top: 16px; font-size: 15px; color: var(--ink-2); max-width: 78ch; }

/* ---------- foot ---------- */
.foot { margin-top: 30px; border-top: 2px solid var(--ink); }
.foot__line {
  display: flex; flex-wrap: wrap; justify-content: space-between; gap: 6px 24px;
  max-width: 1360px; margin: 0 auto; padding: 15px var(--gutter) 22px;
  font-size: 11px; line-height: 1.6; letter-spacing: .14em; color: var(--ink-2);
}
.foot__line a { text-decoration-color: var(--ink-3); text-underline-offset: 3px; }
.foot__line nav { display: flex; flex-wrap: wrap; gap: 4px 20px; }
.nw { white-space: nowrap; }

/* ---------- tablets and up ---------- */
@media (min-width: 700px) {
  :root { --gutter: 28px; }
  .sheet { margin-top: 32px; }
  .sheet__text { padding: 42px 36px 34px; }
  .sheet h1 { font-size: 46px; }
  .standfirst { font-size: 21px; }
  .sheet__hero { padding: 0 36px 32px; }
  .glance { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .glance > div { border-right: 1px solid var(--rule); border-bottom: 1px solid var(--rule); padding: 14px 18px 15px; }
  .glance > div:nth-child(odd) { border-right: 1px solid var(--rule); }
  .glance > div:nth-child(3n) { border-right: 0; }
  .glance > div:nth-last-child(-n+3) { border-bottom: 0; }
  .toc ol { columns: 2; column-gap: 36px; column-rule: 1px solid var(--rule); }
  .toc li { break-inside: avoid; border-top: 1px solid var(--rule); }
  .toc li + li { border-top: 1px solid var(--rule); }
  .toc ol { border-top: 1px solid var(--ink); }
  .prose { font-size: 19.5px; }
  .chapter { padding: 60px 0 64px; }
  .chapter h2, .endsec h2 { font-size: 36px; }
  .pq { margin: 48px 0; padding-top: 26px; }
  .pq blockquote p { font-size: 30px; }
  .fig { margin: 42px 0; }
  .pair { gap: 18px; }
  .pair .fig__cap, .mapgrid .fig__cap { font-size: 14px; }
  .mapgrid { gap: 26px 20px; }
  .fig--bleed .plate { padding: 22px 16px; }
}

/* ---------- the title sheet goes to two columns ---------- */
@media (min-width: 900px) {
  .sheet__grid { grid-template-columns: minmax(0, 1.08fr) minmax(0, 1fr); }
  .sheet__text { display: flex; flex-direction: column; justify-content: center; padding: 56px 48px 50px; border-right: 1px solid var(--ink); }
  .sheet h1 { font-size: 54px; }
  .sheet__hero { padding: 34px 34px 28px; display: flex; flex-direction: column; justify-content: center; }
  .sheet__hero--plate .plate { max-width: 380px; }
  .glance { grid-column: 1 / -1; grid-template-columns: repeat(6, minmax(0, 1fr)); }
  .glance > div, .glance > div:nth-child(odd), .glance > div:nth-child(3n) { border-right: 1px solid var(--rule); border-bottom: 0; }
  .glance > div:last-child { border-right: 0; }
  .glance--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .glance--3 > div:nth-child(3n) { border-right: 0; }
  .glance--3 > div:nth-child(-n+3) { border-bottom: 1px solid var(--rule); }
}

/* ---------- wide screens: sticky index on the left, notes in the right margin ---------- */
@media (min-width: 1100px) {
  :root { --gutter: 32px; --toc-w: 188px; --sn-w: 236px; --sn-gap: 30px; }
  .layout { display: grid; grid-template-columns: var(--toc-w) minmax(0, 1fr); column-gap: 44px; align-items: start; margin-top: 12px; }
  .toc { position: sticky; top: 0; max-height: 100vh; overflow-y: auto; margin: 0; padding: 50px 4px 20px 0; border-bottom: 0; scrollbar-width: thin; }
  .toc ol { columns: auto; border-top: 1px solid var(--ink); }
  .toc a { grid-template-columns: 26px minmax(0, 1fr); padding: 7px 0 8px; font-size: 15px; line-height: 1.3; }
  .prose { padding-right: calc(var(--sn-w) + var(--sn-gap)); font-size: 19px; }
  /* sidenotes float into the margin, cut to four lines; the marker or the note itself opens the whole note */
  .fn>label:not(.sn) { display: inline; padding: 0 1px; margin: 0 0 0 1px; border: 0; min-width: 0; font-size: 11px; vertical-align: .55em; }
  .fn>label:not(.sn)::after { inset: -6px -4px; }
  .sn, .fn>input:checked ~ .sn {
    display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 4; line-clamp: 4; overflow: hidden;
    float: right; clear: right; cursor: pointer;
    width: var(--sn-w); margin: .35em calc(-1 * (var(--sn-w) + var(--sn-gap))) 1.1em 0; padding: 0;
    background: none; border: 0;
    font: 400 13.5px/1.45 var(--text); font-style: normal; color: var(--ink-2); text-align: left; letter-spacing: 0; text-transform: none;
    text-indent: 0; text-wrap: pretty;
  }
  .sn>b { font-size: 10.5px; margin-right: 5px; }
  .fn>input:checked ~ .sn { display: block; -webkit-line-clamp: none; line-clamp: none; overflow: visible; color: var(--ink); }
  .sn:hover { color: var(--ink); }
  /* anything that spans into the margin clears the notes first */
  .fig--bleed, .endsec, .chapter > .kicker { clear: both; }
  .fig--bleed { margin-left: 0; margin-right: calc(-1 * (var(--sn-w) + var(--sn-gap))); }
  .fig--bleed .photo img { border: 1px solid var(--ink); }
  .fig--bleed .plate { outline: 1px solid var(--rule); border: 1px solid var(--ink); }
  .fig--bleed .fig__cap { padding: 0; }
  .prose .endsec { margin-right: calc(-1 * (var(--sn-w) + var(--sn-gap))); }
  .chapter:first-child { padding-top: 50px; }
  .pq blockquote p { font-size: 29px; }
}
@media (min-width: 1280px) {
  :root { --toc-w: 204px; --sn-w: 262px; --sn-gap: 38px; }
  .layout { column-gap: 56px; }
  .prose { font-size: 19.5px; }
  .toc a { font-size: 15.5px; }
}

/* =====================================================================
   Sets of short pages: <subject>/index.html (contents) and <subject>/<chapter>.html
   ===================================================================== */
.topstrip__nav { display: flex; gap: 4px 18px; }
/* phones: the home link drops "for Savings" so the strip fits in one line down to 320px; it may still wrap, never scroll */
@media (max-width: 559.98px) {
  .topstrip { flex-wrap: wrap; column-gap: 14px; }
  .topstrip__long { display: none; }
  .topstrip__nav { gap: 4px 14px; }
}
.topstrip__nav a[aria-current="page"] span { color: var(--ink); text-decoration: underline; text-decoration-thickness: 2px; text-decoration-color: var(--stamp); text-underline-offset: 4px; }

/* phones: the section links fold into a burger at the right of the strip (a <details>, so it needs no script) */
.burger { display: none; }
@media (max-width: 559.98px) {
  .topstrip { position: relative; flex-wrap: nowrap; align-items: center; }
  .topstrip__nav { display: none; }
  .burger { display: block; }
  .burger summary {
    display: flex; align-items: center; gap: 9px;
    margin: -6px 0; padding: 12px 0 12px 14px;
    list-style: none; cursor: pointer; color: var(--ink);
  }
  .burger summary::-webkit-details-marker { display: none; }
  .burger__icon { position: relative; width: 16px; height: 1.5px; background: currentColor; }
  .burger__icon::before, .burger__icon::after { content: ""; position: absolute; left: 0; width: 100%; height: 1.5px; background: currentColor; }
  .burger__icon::before { top: -5px; }
  .burger__icon::after { top: 5px; }
  .burger[open] .burger__icon { background: transparent; }
  .burger[open] .burger__icon::before { top: 0; transform: rotate(45deg); }
  .burger[open] .burger__icon::after { top: 0; transform: rotate(-45deg); }
  .burger__panel {
    position: absolute; z-index: 30; right: var(--gutter); top: 100%;
    display: flex; flex-direction: column; min-width: 210px;
    background: var(--paper) var(--grain); border: 1px solid var(--ink);
    box-shadow: 0 12px 28px rgba(0, 0, 0, .16);
  }
  .burger__panel a { padding: 15px 18px; border-top: 1px solid var(--rule); font-size: 12px; letter-spacing: .16em; }
  .burger__panel a:first-child { border-top: 0; }
  .burger__panel a[aria-current="page"] span { color: var(--ink); text-decoration: underline; text-decoration-thickness: 2px; text-decoration-color: var(--stamp); text-underline-offset: 4px; }
}

/* section headings, as on the home page */
h2.sec-h, .endsec h2.sec-h {
  display: inline-block; margin: 0 0 24px;
  font: 650 15px/1.3 var(--display); letter-spacing: .18em; text-transform: uppercase;
  padding-bottom: 6px; border-bottom: 2px solid var(--ink);
  box-shadow: 0 3px 0 -2px var(--paper), 0 4px 0 -2px var(--ink);
}

/* ---------- contents page: chapter cards ---------- */
.cards-sec { margin: 50px 0 0; }
.cards { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: minmax(0, 1fr); gap: 18px; }
.card a {
  display: flex; flex-direction: column; height: 100%;
  text-decoration: none; color: inherit;
  border: 1px solid var(--ink); background: var(--paper);
  transition: box-shadow .2s, transform .2s;
}
.card a:hover { box-shadow: 4px 4px 0 var(--ink); transform: translate(-2px, -2px); }
.card a:hover .card__title { text-decoration: underline; text-decoration-color: var(--stamp); text-decoration-thickness: 1px; text-underline-offset: 4px; }
.card__thumb { aspect-ratio: 3 / 2; overflow: hidden; border-bottom: 1px solid var(--ink); }
.card__thumb img { width: 100%; height: 100%; object-fit: cover; }
.card__thumb--plate { background: var(--paper-plate); }
.card__thumb--plate img { mix-blend-mode: multiply; }
.card__thumb--contain img { object-fit: contain; object-position: center; padding: 10px; }
/* a pull-quote chapter gets a typographic card: the chapter's own quotation, set in the display italic */
.card__type {
  position: relative; aspect-ratio: 3 / 2; overflow: hidden; border-bottom: 1px solid var(--ink);
  display: flex; flex-direction: column; justify-content: center; gap: 12px;
  padding: 22px 20px 18px; background: var(--paper-2);
}
.card__type::before { content: ""; position: absolute; top: 0; left: 20px; width: 44px; border-top: 3px solid var(--stamp); }
.card__pq {
  display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 4; line-clamp: 4; overflow: hidden;
  font: italic 400 20px/1.3 var(--display); color: var(--ink); text-wrap: pretty;
}
.card__attr { font-size: 13.5px; line-height: 1.3; color: var(--ink-2); }
.card__attr::before { content: "\2014\2002"; color: var(--stamp); }
.card__body { display: flex; flex-direction: column; gap: 7px; padding: 14px 16px 18px; }
.card__kicker { font: 600 10.5px/1.3 var(--display); letter-spacing: .18em; text-transform: uppercase; color: var(--stamp); font-variant-numeric: lining-nums; }
.card__title { font: 650 21px/1.2 var(--display); text-wrap: balance; }
.card__teaser { font-size: 16px; line-height: 1.5; color: var(--ink-2); text-wrap: pretty; }

.contents__end .endsec { border-top: 0; padding-top: 50px; }
.contents__end .endsec + .endsec { border-top: 1px solid var(--rule); }

/* ---------- chapter pages ---------- */
.chpage .prose { max-width: calc(var(--measure) + 2px); margin: 0 auto; padding-top: 34px; }
.chead { margin: 0 0 26px; }
.chead__up { margin-bottom: 18px; }
.chead__up a { text-decoration: none; }
.chead__up a::before { content: "\2190\2002" / ""; color: var(--stamp); }
.chead__up a:hover { text-decoration: underline; text-decoration-color: var(--stamp); }
.kicker__sep { color: var(--ink-3); letter-spacing: 0; }
.ctitle { margin: 0; max-width: 22ch; font: 700 34px/1.1 var(--display); letter-spacing: .003em; text-wrap: balance; }
.endsec--notes { margin-top: 44px; padding-top: 30px; border-top: 1px solid var(--ink); }
.endsec--notes h2 { font: 650 13px/1.3 var(--display); letter-spacing: .18em; text-transform: uppercase; margin: 0 0 16px; }

.pager {
  clear: both; display: grid; grid-template-columns: minmax(0, 1fr); gap: 0;
  margin: 40px 0 10px; border-top: 2px solid var(--ink);
}
.pager a { display: block; padding: 14px 0 15px; text-decoration: none; border-bottom: 1px solid var(--rule); }
.pager a:hover .pager__t, .pager a:hover.pager__all { text-decoration: underline; text-decoration-color: var(--stamp); text-underline-offset: 4px; }
.pager span.pager__prev:empty, .pager span.pager__next:empty { display: none; }
.pager__lbl { display: block; margin-bottom: 4px; font: 600 10.5px/1.3 var(--display); letter-spacing: .18em; text-transform: uppercase; color: var(--stamp); }
.pager__t { display: block; font: 600 19px/1.25 var(--display); text-wrap: balance; }
.pager__all { font: 600 12px/1.3 var(--display); letter-spacing: .18em; text-transform: uppercase; color: var(--ink-2); }

@media (min-width: 700px) {
  .cards { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 22px; }
  .chpage .prose { padding-top: 48px; }
  .ctitle { font-size: 46px; }
  .pager { grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr); column-gap: 24px; align-items: stretch; }
  .pager a { border-bottom: 0; }
  .pager__next { text-align: right; }
  .pager__all { align-self: center; padding: 14px 10px; }
  .pager span.pager__prev:empty, .pager span.pager__next:empty { display: block; }
}
@media (min-width: 1100px) {
  .cards { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 26px; }
  .chpage .prose { max-width: calc(var(--measure) + var(--sn-w) + var(--sn-gap)); padding-right: calc(var(--sn-w) + var(--sn-gap)); padding-top: 56px; }
  .pager, .endsec--notes { margin-right: calc(-1 * (var(--sn-w) + var(--sn-gap))); }
  .ctitle { font-size: 50px; }
  .contents__end { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); column-gap: 56px; }
  .contents__end .endsec + .endsec { border-top: 0; }
}

/* phones: tighter title sheet; a pair of images stacks, portraits kept to a sensible height */
@media (max-width: 699.98px) {
  .pair { flex-direction: column; gap: 26px; }
  .pair > figure { flex: none; width: 100%; }
  .pair .photo img, .pair .plate img { width: auto; max-width: 100%; max-height: 64vh; margin: 0 auto; }
  .pair .fig__cap { font-size: 15px; }
  .sheet { outline-offset: 3px; }
  .sheet::before, .sheet::after { height: 5px; }
  .topstrip { font-size: 10.5px; letter-spacing: .12em; }
  .foot__line { font-size: 10.5px; letter-spacing: .1em; }
}

@media (max-width: 419.98px) { .topstrip { font-size: 10px; letter-spacing: .06em; } }

@media print {
  .skip, .toc, .fn>label:not(.sn), .sn, a.fn__ref { display: none !important; }
  .prose { padding-right: 0; }
  body { background: #fff; }
}