:root {
  color-scheme: light dark;
  --page: #f7f3ed;
  --surface: #fffcf8;
  --ink: #211e1c;
  --quiet: #605853;
  --line: #d6cfc6;
  --accent: #a51b24;
}
@media (prefers-color-scheme: dark) {
  :root {
    --page: #1c1918;
    --surface: #282423;
    --ink: #faf3eb;
    --quiet: #d3c7bf;
    --line: #5c514c;
    --accent: #ffa1a1;
  }
}
* { box-sizing: border-box; }
body { margin: 0; background: var(--page); color: var(--ink); font: 1rem/1.55 system-ui, sans-serif; overflow-wrap: anywhere; }
header, main { max-width: 70rem; margin: auto; padding: 1.5rem clamp(1rem, 4vw, 3rem); }
header { border-bottom: 1px solid var(--line); }
h1, h2, h3, p { margin: 0 0 .65rem; }
h1 { font-size: clamp(2rem, 6vw, 3.7rem); line-height: 1.12; letter-spacing: -.045em; }
h2 { font-size: 1.45rem; }
h3 { line-height: 1.3; }
.brand, .date { color: var(--accent); font-weight: 700; }
.date, .meta, .status, .series-label { font-size: .875rem; }
.meta, .series-label { color: var(--quiet); }
.status { font-weight: 650; }
a { color: var(--accent); text-underline-offset: .18em; }
nav { display: flex; flex-wrap: wrap; gap: .4rem .85rem; }
nav a { padding: .45rem 0; }
a[aria-current] { color: var(--ink); font-weight: 700; }
.views { margin-bottom: 1.25rem; }
.grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 20rem), 1fr)); gap: .9rem; }
.card { min-width: 0; background: var(--surface); border: 1px solid var(--line); border-radius: .5rem; padding: 1rem; }
.series-group { margin-bottom: 1.25rem; }
#by-series { margin-top: 2.5rem; }
.filmstrip { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: .4rem; }
.slide { padding: 0; border: 0; background: transparent; cursor: zoom-in; }
img, video { display: block; max-width: 100%; }
video { width: 100%; max-height: 22rem; }
.media-links { margin-top: .7rem; }
details { margin-top: .65rem; }
summary { cursor: pointer; }
.copytext { white-space: pre-wrap; }
button { color: var(--ink); font: inherit; }
button:not(.slide) { background: var(--surface); border: 1px solid var(--line); border-radius: .3rem; padding: .35rem .6rem; cursor: pointer; }
:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; }
dialog { max-width: calc(100% - 1rem); max-height: calc(100% - 1rem); background: var(--surface); color: var(--ink); border: 1px solid var(--line); border-radius: .5rem; }
dialog::backdrop { background: #000b; }
dialog img { max-height: 72vh; width: auto; margin: .5rem auto; object-fit: contain; }
.viewer-nav { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: .6rem; }