:root {
  color-scheme: light dark;
  --canvas: #f6f5f0; --surface: #fffefb; --ink: #272f2b; --muted: #56635a;
  --rule: #d8ddd4; --control: #79877b; --accent: #294f40; --wash: #e7eee8;
  --s1: .25rem; --s2: .5rem; --s3: .75rem; --s4: 1rem; --s6: 1.5rem;
  --s8: 2rem; --s12: 3rem;
  --body: 1rem; --small: .875rem; --section: 1.375rem; --display: clamp(2.25rem, 6vw, 3rem);
  --target: 2.75rem; --radius: .25rem;
  --display-font: Georgia, serif;
}
@media (prefers-color-scheme: dark) {
  :root {
    --canvas: #1a211d; --surface: #222b25; --ink: #eef2ec; --muted: #bbc8bd;
    --rule: #3c4940; --control: #819385; --accent: #b3d5bf; --wash: #2d3c32;
  }
}
*, *::before, *::after { box-sizing: border-box; }
body { margin: 0; background: var(--canvas); color: var(--ink); font: var(--body)/1.55 system-ui, sans-serif; }
a { color: var(--accent); text-underline-offset: .2em; }
:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.shell { max-inline-size: 64rem; margin-inline: auto; padding-inline: var(--s4); }
.masthead { border-block-end: 1px solid var(--rule); background: var(--surface); }
.bar { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; column-gap: var(--s4); }
.bar a, .pager a, .result-head a, .back { display: inline-flex; align-items: center; min-block-size: var(--target); }
.bar a { font-size: var(--small); }
.bar .brand { font: var(--section) var(--display-font); text-decoration: none; }
.bar .brand:hover { text-decoration: underline; }
.reading { max-inline-size: 46rem; padding-block: var(--s8) var(--s12); overflow-wrap: anywhere; }
h1, h2 { font-family: var(--display-font); font-weight: normal; line-height: 1.15; }
h1 { font-size: var(--display); margin: var(--s2) 0 var(--s6); }
h2 { font-size: var(--section); margin: 0 0 var(--s3); }
h3, p { margin: 0; }
.label { font-size: var(--small); color: var(--muted); }
section { margin-block-start: var(--s8); }
label { display: block; margin-block-end: var(--s2); }
.search { display: flex; gap: var(--s2); }
input, button, select { min-block-size: var(--target); border: 1px solid var(--control); border-radius: var(--radius); font: inherit; padding: var(--s2) var(--s3); }
input { min-inline-size: 0; flex: 1; background: var(--surface); color: var(--ink); }
button { background: var(--accent); color: var(--canvas); border-color: var(--accent); font-weight: 600; cursor: pointer; }
button:hover { text-decoration: underline; }
button:active { background: var(--wash); color: var(--ink); }
.result-head { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--s2); min-block-size: var(--target); margin-block-start: var(--s3); }
.result-head, .muted, small { color: var(--muted); font-size: var(--small); }
.rows { list-style: none; padding: 0; margin: 0; border-block-start: 1px solid var(--rule); }
.rows li { border-block-end: 1px solid var(--rule); }
.rows a { display: flex; align-items: center; justify-content: space-between; gap: var(--s3); min-block-size: var(--target); padding: var(--s2) var(--s3); text-decoration: none; font-weight: 600; }
.rows small { text-align: end; font-weight: normal; }
.rows a:hover, .rows a:active { background: var(--wash); }
.rows a:hover span { text-decoration: underline; }
.pager { display: flex; justify-content: space-between; gap: var(--s4); margin-block-start: var(--s4); }
.event { padding-block: var(--s3); border-block-start: 1px solid var(--rule); }
.event p { margin-block-start: var(--s1); }
.event h3 { font-size: var(--body); }
.event h3 small { margin-inline-start: var(--s2); font-weight: normal; }
.note { white-space: pre-wrap; }
summary { min-block-size: var(--target); padding-block: var(--s2); color: var(--accent); cursor: pointer; }
summary:hover { text-decoration: underline; }
.citations { margin-block: 0; padding-inline-start: var(--s6); }
.citations li + li { margin-block-start: var(--s3); }
.record-images { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 16rem), 1fr)); gap: var(--s4); margin-block: var(--s3); }
.record-image { min-inline-size: 0; margin: 0; }
.record-image-link { display: block; aspect-ratio: 4 / 3; background: var(--surface); border: 1px solid var(--rule); border-radius: var(--radius); }
.record-image-link:hover, .record-image-link:active { background: var(--wash); }
.record-image img { display: block; inline-size: 100%; block-size: 100%; object-fit: contain; }
.record-image figcaption { margin-block-start: var(--s2); color: var(--muted); font-size: var(--small); }

@media (max-width: 36rem) {
  :root { --body: 1.0625rem; --small: .9375rem; }
}