/* Plain reading pages (case archive, 404, guides): same noir look as the booth, but they scroll. */
@font-face { font-family: "Playfair Display"; font-style: normal; font-weight: 400 900; font-display: swap; src: url(fonts/playfair-display.woff2) format("woff2"); }
@font-face { font-family: "Special Elite"; font-style: normal; font-weight: 400; font-display: swap; src: url(fonts/special-elite.woff2) format("woff2"); }
:root {
  --bg: #0b0b0d; --ink: #e8e2d4; --muted: #8d887d; --line: #2e2c30; --amber: #e2b052;
  --paper: #ece4cf; --paper-ink: #2a251e; --paper-line: #cfc3a6;
  --type: "Special Elite", "Courier New", monospace;
  --display: "Playfair Display", Georgia, serif;
}
* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body { margin: 0; background: var(--bg); color: var(--ink); font-family: Georgia, "Times New Roman", serif; line-height: 1.55; }
a { color: var(--amber); }
.wrap { max-width: 760px; margin: 0 auto; padding: 18px 16px 48px; }
.top { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; flex-wrap: wrap; border-bottom: 1px solid var(--line); padding-bottom: 10px; }
.brand { font-family: var(--display); font-size: 1.6rem; font-weight: 700; color: var(--ink); text-decoration: none; letter-spacing: .02em; }
.top nav { display: flex; gap: 16px; font-family: var(--type); font-size: .9rem; }
.crumbs { font-family: var(--type); font-size: .8rem; color: var(--muted); margin: 16px 0 0; }
.crumbs a { color: var(--muted); }
h1 { font-family: var(--display); font-size: 2rem; line-height: 1.2; margin: 14px 0 6px; }
h2 { font-family: var(--display); font-size: 1.25rem; margin: 28px 0 8px; }
.lede { color: #cfc8b8; }
.cta { display: inline-block; margin: 8px 0; padding: 10px 16px; background: var(--amber); color: #1a1408; font-family: var(--type); text-decoration: none; border-radius: 2px; }
.week { font-family: var(--type); font-size: .8rem; color: var(--muted); text-transform: uppercase; letter-spacing: .08em; margin: 26px 0 6px; }
.cases { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 6px; }
.cases a { display: grid; grid-template-columns: 56px 1fr auto; gap: 4px 10px; align-items: baseline; padding: 10px 12px; background: var(--paper); color: var(--paper-ink); text-decoration: none; border: 1px solid var(--paper-line); border-radius: 2px; }
.cases a:hover, .cases a:focus-visible { border-color: #7d2a20; }
.cases .no { font-family: var(--type); font-weight: bold; }
.cases .t { min-width: 0; }
.cases .t b { display: block; font-family: var(--display); }
.cases .t small { color: #5d5446; font-size: .82rem; }
.cases .lvl { font-family: var(--type); font-size: .8rem; color: #7d2a20; white-space: nowrap; }
.foot { margin-top: 40px; border-top: 1px solid var(--line); padding-top: 12px; font-family: var(--type); font-size: .8rem; color: var(--muted); display: flex; gap: 16px; flex-wrap: wrap; }
.foot a { color: var(--muted); }
@media (max-width: 480px) {
  .cases a { grid-template-columns: 40px 1fr; }
  .cases .lvl { grid-column: 2; }
}
.prose ul, .prose ol { padding-left: 22px; }
.prose li { margin: 4px 0; }
.prose table { width: 100%; border-collapse: collapse; margin: 10px 0 14px; font-size: .92rem; background: var(--paper); color: var(--paper-ink); }
.prose th, .prose td { text-align: left; vertical-align: top; padding: 7px 9px; border-bottom: 1px solid var(--paper-line); }
.prose th { font-family: var(--type); font-weight: normal; background: #e0d5b9; }
.prose .cta { margin-top: 20px; }
.table-scroll { overflow-x: auto; }
.spoiler { border-left: 3px solid #c4483e; padding: 6px 12px; background: #1a1314; }
.reveal { background: var(--paper); color: var(--paper-ink); padding: 12px 16px; border-radius: 2px; }
.reveal .muted { color: #6d6455; }
.route li { margin: 8px 0; }
.route .said { color: #cfc8b8; font-style: italic; }
.pager { display: flex; justify-content: space-between; gap: 12px; margin-top: 26px; font-family: var(--type); font-size: .9rem; }
.cases li.has-sol { display: flex; gap: 6px; align-items: stretch; }
.cases li.has-sol > a:first-child { flex: 1; min-width: 0; }
.cases .sol { display: flex; align-items: center; padding: 0 10px; font-family: var(--type); font-size: .78rem; color: var(--muted); border: 1px solid var(--line); border-radius: 2px; text-decoration: none; }
.cases .sol:hover { color: var(--amber); border-color: var(--amber); }