:root {
  --bg:#f5f7fb; --surface:#ffffff; --ink:#18202b; --muted:#5b6675; --line:#d9dee7; --line-strong:#b9c2cf;
  --accent:#c98a12; --accent-ink:#7a5208; --beaten:#1e7f4b; --beaten-bg:#e2f3ea; --reproduced:#3a6ea5; --reproduced-bg:#e4edf8;
  --behind:#b8432e; --behind-bg:#f8e6e1; --chip:#eef1f6; --focus:#c98a12;
}
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) {
  --bg:#11161d; --surface:#181f28; --ink:#e6eaf0; --muted:#98a3b3; --line:#2a3441; --line-strong:#3b4858;
  --accent:#e0a52c; --accent-ink:#f1c565; --beaten:#4fc17f; --beaten-bg:#17331f; --reproduced:#79a8dc; --reproduced-bg:#172a40;
  --behind:#f08a72; --behind-bg:#3d1e17; --chip:#202a36; --focus:#e0a52c; } }
:root[data-theme="dark"] {
  --bg:#11161d; --surface:#181f28; --ink:#e6eaf0; --muted:#98a3b3; --line:#2a3441; --line-strong:#3b4858;
  --accent:#e0a52c; --accent-ink:#f1c565; --beaten:#4fc17f; --beaten-bg:#17331f; --reproduced:#79a8dc; --reproduced-bg:#172a40;
  --behind:#f08a72; --behind-bg:#3d1e17; --chip:#202a36; --focus:#e0a52c; }
* { box-sizing:border-box; }
body { margin:0; background:var(--bg); color:var(--ink); font-family:"IBM Plex Sans","Segoe UI",system-ui,sans-serif; font-size:15px; line-height:1.45; }
a { color:var(--accent-ink); }
.wrap { max-width:1100px; margin:0 auto; padding:16px 16px 56px; }
nav { display:flex; flex-wrap:wrap; align-items:center; gap:6px 14px; border-bottom:2px solid var(--accent); padding:8px 0 10px; margin-bottom:18px; }
nav .brand { font-family:"Newsreader",Georgia,serif; font-weight:600; font-size:20px; margin-right:auto; color:var(--ink); text-decoration:none; }
nav a.link { font-size:14px; color:var(--muted); text-decoration:none; padding:4px 2px; border-bottom:2px solid transparent; }
nav a.link[aria-current="page"] { color:var(--ink); border-bottom-color:var(--accent); }
nav a.link:hover, nav a.link:focus-visible { color:var(--ink); outline:none; }
h1 { font-family:"Newsreader",Georgia,serif; font-weight:600; font-size:clamp(26px,4.5vw,36px); margin:0 0 6px; letter-spacing:-0.01em; text-wrap:balance; }
h2 { font-family:"Newsreader",Georgia,serif; font-weight:500; font-size:22px; margin:26px 0 10px; }
h3 { font-size:15px; margin:18px 0 8px; text-transform:uppercase; letter-spacing:.07em; color:var(--muted); font-weight:600; }
.stamp { font-family:"IBM Plex Mono",ui-monospace,monospace; font-size:12px; color:var(--muted); margin-bottom:14px; }
p.lede { margin:0 0 18px; max-width:66ch; color:var(--muted); } p.lede strong { color:var(--ink); }
.tiles { display:grid; grid-template-columns:repeat(auto-fit,minmax(210px,1fr)); gap:10px; margin-bottom:22px; }
.tile { background:var(--surface); border:1px solid var(--line); border-radius:6px; padding:12px 14px; text-decoration:none; color:inherit; display:block; }
.tile:hover, .tile:focus-visible { border-color:var(--accent); outline:none; }
.tile-name { font-size:12px; text-transform:uppercase; letter-spacing:.08em; color:var(--muted); }
.tile-big { display:flex; align-items:baseline; gap:8px; margin:4px 0 6px; }
.tile-big .num { font-family:"IBM Plex Mono",ui-monospace,monospace; font-size:34px; font-weight:500; color:var(--beaten); font-variant-numeric:tabular-nums; line-height:1; }
.tile-big .of { color:var(--muted); font-size:13px; }
.tile-sub { font-size:12.5px; color:var(--muted); display:flex; flex-wrap:wrap; gap:4px 6px; align-items:center; }
.dot { display:inline-block; width:8px; height:8px; border-radius:50%; }
.dot.beaten { background:var(--beaten); } .dot.reproduced { background:var(--reproduced); } .dot.behind { background:var(--behind); }
.gallery { display:grid; grid-template-columns:repeat(auto-fill,minmax(230px,1fr)); gap:12px; }
.card { background:var(--surface); border:1px solid var(--line); border-radius:6px; overflow:hidden; }
.card img { display:block; width:100%; aspect-ratio:1/1; object-fit:contain; background:#fff; border-bottom:1px solid var(--line); }
.card .body { padding:9px 12px 11px; }
.card .what { font-weight:600; }
.card .nums { font-family:"IBM Plex Mono",ui-monospace,monospace; font-size:12.5px; color:var(--muted); font-variant-numeric:tabular-nums; margin-top:3px; }
.card .nums b { color:var(--ink); font-weight:500; }
.card .who { font-size:12px; color:var(--muted); margin-top:4px; }
.card .links { font-size:12px; margin-top:6px; }
.controls { display:flex; flex-wrap:wrap; gap:8px; align-items:center; margin:10px 0 12px; }
.chip { font:inherit; font-size:13px; padding:5px 10px; border-radius:999px; border:1px solid var(--line-strong); background:var(--chip); color:var(--ink); cursor:pointer; }
.chip[aria-pressed="true"] { background:var(--ink); color:var(--bg); border-color:var(--ink); }
.chip:focus-visible { outline:2px solid var(--focus); outline-offset:2px; }
.chip .dot { margin-right:5px; vertical-align:1px; }
.tablewrap { overflow-x:auto; border:1px solid var(--line); border-radius:6px; background:var(--surface); }
table { border-collapse:collapse; width:100%; min-width:720px; font-size:13.5px; }
th, td { padding:7px 10px; border-bottom:1px solid var(--line); text-align:left; white-space:nowrap; }
th { font-size:11.5px; text-transform:uppercase; letter-spacing:.07em; color:var(--muted); font-weight:600; position:sticky; top:0; background:var(--surface); }
td.num, th.num { text-align:right; font-family:"IBM Plex Mono",ui-monospace,monospace; font-variant-numeric:tabular-nums; }
td.page { color:var(--muted); }
.pill { display:inline-block; font-size:11.5px; font-weight:600; letter-spacing:.03em; padding:2px 8px; border-radius:999px; }
.pill.beaten { background:var(--beaten-bg); color:var(--beaten); } .pill.reproduced { background:var(--reproduced-bg); color:var(--reproduced); } .pill.behind { background:var(--behind-bg); color:var(--behind); }
.note { color:var(--muted); font-size:13px; max-width:72ch; margin-top:14px; }
.prose { max-width:70ch; } .prose p { margin:0 0 12px; } .prose code { font-family:"IBM Plex Mono",ui-monospace,monospace; font-size:13px; background:var(--chip); padding:1px 4px; border-radius:3px; }
.empty { padding:18px; color:var(--muted); }
@media (prefers-reduced-motion:no-preference) { .tile,.chip,nav a.link { transition:border-color .15s,background .15s,color .15s; } }

body { background: var(--bg); }