:root {
  color-scheme: light;
  --paper: #fff;
  --ink: #202428;
  --muted: #545c65;
  --line: #a9b0b7;
  --soft-line: #d9dde2;
  --link: #2b55a0;
  --wash: #f6f8fa;
  --brand: #223c53;
  --serif: Georgia, 'Times New Roman', serif;
  --sans: system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
}
*, *::before, *::after { box-sizing: border-box; }
body { margin: 0; background: var(--paper); color: var(--ink); font: 1rem/1.57 var(--sans); }
a { color: var(--link); text-decoration: none; text-underline-offset: .14em; }
a:hover { text-decoration: underline; }
a:focus-visible { outline: 2px solid var(--link); outline-offset: 3px; }
img { display: block; max-width: 100%; }
.wrap { max-width: 78rem; margin-inline: auto; padding-inline: clamp(1rem, 3vw, 2.5rem); }
.skip { position: absolute; transform: translateY(-200%); padding: .5rem 1rem; background: var(--paper); }
.skip:focus { transform: none; z-index: 2; }
.masthead { border-bottom: 1px solid var(--soft-line); background: var(--paper); }
.masthead-inner { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: .65rem 1rem; min-height: 4.1rem; padding-block: .65rem; }
.brand { display: inline-grid; gap: .16rem; color: var(--brand); line-height: 1.06; }
.brand:hover { text-decoration: none; }
.brand-name { font: 400 1.66rem/1.05 var(--serif); }
.brand-description { color: var(--muted); font-size: .76rem; }
.main-site { font-size: .87rem; }

.article-grid {
  display: grid;
  grid-template-columns: minmax(8rem, 10.75rem) minmax(0, 1fr);
  grid-template-areas: ". heading" "contents body";
  column-gap: clamp(1.5rem, 3.65vw, 2.75rem);
  row-gap: .95rem;
  align-items: start;
  padding-block: 1.75rem 3rem;
}
.article-heading { grid-area: heading; }
h1, h2 { font-family: var(--serif); font-weight: 400; line-height: 1.2; }
h1 { margin: 0; padding-bottom: .32rem; border-bottom: 1px solid var(--line); font-size: clamp(1.95rem, 4vw, 2.42rem); }
.page-kind { margin: .45rem 0 0; color: var(--muted); font-size: .85rem; }
.toc { grid-area: contents; position: sticky; top: 1.25rem; font-size: .86rem; }
.toc p { margin: 0 0 .46rem; padding-bottom: .42rem; border-bottom: 1px solid var(--soft-line); font-weight: 700; }
.toc ol { margin: 0; padding-left: 1.12rem; }
.toc li { padding: .22rem 0 .22rem .08rem; }
.toc li::marker { color: var(--muted); }
.body-copy {
  grid-area: body;
  display: grid;
  grid-template-columns: minmax(0, 1fr) clamp(11.25rem, 27%, 15.25rem);
  gap: 1.15rem clamp(1.15rem, 2.6vw, 1.85rem);
  align-items: start;
}
.body-copy > section { grid-column: 1 / -1; }
.body-copy > section#chronology { grid-column: 1; }
.intro { grid-column: 1; }
.intro p:first-child { margin-top: 0; }
.intro p:last-child { margin-bottom: 0; }
.infobox { grid-column: 2; grid-row: 1 / span 2; min-width: 0; padding: .35rem; border: 1px solid var(--line); background: var(--wash); font-size: .82rem; line-height: 1.4; }
.infobox-title { margin: 0; padding: .42rem .45rem; background: #e3ebf0; color: var(--brand); font-size: .96rem; font-weight: 700; text-align: center; }
.portrait { margin: .48rem .42rem .45rem; text-align: center; }
.portrait img { width: 100%; height: auto; }
.portrait figcaption { margin-top: .25rem; color: var(--muted); font-size: .76rem; }
.facts { margin: 0; }
.facts div { display: grid; grid-template-columns: minmax(0, 2fr) minmax(0, 3fr); gap: .37rem; padding: .31rem .27rem; border-top: 1px solid var(--soft-line); }
.facts dt { font-weight: 650; overflow-wrap: anywhere; }
.facts dd { margin: 0; overflow-wrap: anywhere; }

section, .intro, .sources li { scroll-margin-top: .8rem; }
h2 { margin: 0 0 .5rem; padding-bottom: .23rem; border-bottom: 1px solid var(--line); font-size: 1.56rem; }
h3 { margin: .73rem 0 .2rem; font-size: 1.04rem; line-height: 1.3; }
p { margin: .4rem 0 .6rem; }
sup { margin-left: .15em; font-size: .72em; line-height: 0; white-space: nowrap; }
.books, .sources { margin-block: .4rem; padding-left: 1.5rem; }
.books li { margin-block: .2rem; }
.sources li { margin-bottom: .45rem; padding-left: .12rem; }
.sources li span { display: block; color: var(--muted); font-size: .85rem; }
.sources li:target { background: #eef4fd; }
.footer { padding-block: .8rem 1rem; border-top: 1px solid var(--soft-line); color: var(--muted); font-size: .83rem; }

@media (max-width: 48rem) {
  .article-grid { grid-template-columns: minmax(0, 1fr); grid-template-areas: "heading" "contents" "body"; padding-top: 1.2rem; }
  .toc { position: static; padding: .45rem .65rem; border: 1px solid var(--soft-line); }
  .toc ol { display: grid; grid-template-columns: 1fr 1fr; column-gap: 1.3rem; }
}
@media (max-width: 35rem) {
  .body-copy { display: flex; flex-direction: column; align-items: stretch; gap: 1rem; }
  .infobox { width: min(100%, 18.5rem); }
  .portrait img { max-width: 11rem; margin-inline: auto; }
}
@media print {
  .masthead, .skip, .toc { display: none; }
  .article-grid, .body-copy { display: block; }
  .infobox { float: right; width: 12rem; margin: .5rem 0 .5rem 1rem; }
}