:root {
  --ink: #0f1419;
  --muted: #536471;
  --line: #e5e7eb;
  --hover: #f7f9f9;
  --rail: 220px;
  color-scheme: light;
}
* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0; background: #fff; color: var(--ink);
  font: 15px/1.45 -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
}
a { color: inherit; text-decoration: none; }
a:hover { text-decoration: underline; }

.shell { display: grid; grid-template-columns: var(--rail) minmax(0, 1fr); max-width: 1100px; margin: 0 auto; }
.rail { border-right: 1px solid var(--line); min-height: 100vh; padding: 16px 0; position: sticky; top: 0; align-self: start; }
.brand { font-weight: 700; font-size: 19px; letter-spacing: -0.01em; padding: 0 20px 18px; }
.nav a { display: block; padding: 9px 20px; color: var(--muted); }
.nav a:hover { background: var(--hover); text-decoration: none; }
.nav a[aria-current="page"] { color: var(--ink); font-weight: 600; }
.nav-locales { border-top: 1px solid var(--line); margin-top: 14px; padding-top: 10px; font-size: 13px; }
.nav-locales a, .nav-locales span { display: block; padding: 5px 20px; color: var(--muted); }
.nav-locales span[aria-current] { color: var(--ink); font-weight: 600; }
/* Above 700px the hamburger and the filters panel are inert wrappers: their contents sit exactly
   where they always did, and the checkbox that would open them stays hidden along with its label
   — see the mobile override below for what they actually become. */
.hamburger, .hamburger-panel, .filters, .filters-panel { display: contents; }
.hidden-toggle, .hamburger-toggle, .filters-toggle, .panel-close { display: none; }

.main { min-width: 0; }
.topbar {
  display: flex; align-items: center; gap: 10px;
  padding: 12px 20px; border-bottom: 1px solid var(--line);
  position: sticky; top: 0; background: #fff; z-index: 5;
}
.chips { display: flex; gap: 6px; flex: 1; flex-wrap: wrap; }
/* The search box is the last control in the row; on desktop it sits flush against the content
   edge rather than leaving the topbar's own inset after it. */
@media (min-width: 701px) {
  .topbar { padding-right: 0; }
}
.chip { border: 1px solid var(--line); border-radius: 999px; padding: 4px 12px; font-size: 13px; color: var(--muted); }
.chip:hover { background: var(--hover); text-decoration: none; }
.chip[aria-pressed="true"] { background: var(--ink); border-color: var(--ink); color: #fff; }
.chip[aria-disabled="true"] { color: var(--line); cursor: default; }
.chip[aria-disabled="true"]:hover { background: none; }
button.chip { font: inherit; font-size: 13px; background: #fff; cursor: pointer; }
button.chip[hidden] { display: none; }
.filters-toggle { cursor: pointer; }
.row-dist { color: var(--muted); }

/* One control for both city and genre. */
.combo { position: relative; }
.combo input[type="text"], input[type="search"] {
  font: inherit; font-size: 14px; color: var(--ink);
  border: 1px solid var(--line); border-radius: 999px; padding: 5px 12px; background: #fff;
  width: 130px;
}
input[type="search"] { width: 170px; }
.combo input:focus, input[type="search"]:focus { outline: none; border-color: var(--ink); }
.combo-list {
  position: absolute; top: calc(100% + 4px); left: 0; min-width: 180px; max-height: 280px;
  overflow-y: auto; margin: 0; padding: 4px 0; list-style: none;
  background: #fff; border: 1px solid var(--line); border-radius: 8px; z-index: 10;
}
.combo-list li { padding: 6px 12px; font-size: 14px; cursor: pointer; }
.combo-list li[aria-selected], .combo-list li:hover { background: var(--hover); }
.combo-none { color: var(--muted); cursor: default !important; }

.list { list-style: none; margin: 0; padding: 0; }
.row { display: flex; gap: 12px; padding: 12px 20px; border-bottom: 1px solid var(--line); }
.row-date { padding-right: 1px; }
.row:hover { background: var(--hover); }
.thumb { width: 56px; height: 56px; flex: none; border: 1px solid var(--line); border-radius: 4px; background: var(--hover); }
.thumb-mono, .thumb-symbol { display: flex; align-items: center; justify-content: center; color: var(--muted); }
.thumb-mono { font-weight: 700; font-size: 20px; }
.thumb-symbol svg { width: 26px; height: 26px; }
.row-main { min-width: 0; flex: 1; }
.row-title { font-weight: 600; }
.row-meta { color: var(--muted); font-size: 14px; }
.source-mark { display: flex; align-items: center; margin-top: 3px; }
.source-mark svg { height: 24px; width: auto; flex: none; }
.daterule { padding: 14px 20px 6px; font-weight: 700; font-size: 13px; text-transform: uppercase; letter-spacing: 0.04em; color: var(--muted); border-bottom: 1px solid var(--line); }

.empty { padding: 56px 20px; text-align: center; color: var(--muted); }
.empty h1 { font-size: 17px; font-weight: 600; color: var(--ink); margin: 0 0 6px; }
.empty p { margin: 0; font-size: 14px; }
.more { display: block; padding: 14px 20px; text-align: center; color: var(--muted); font-size: 14px; border-bottom: 1px solid var(--line); cursor: pointer; }
summary.more { list-style: none; }
summary.more::-webkit-details-marker { display: none; }
.detail { padding: 0 0 24px; }
.detail-head { padding: 20px; border-bottom: 1px solid var(--line); }
.detail-kicker { color: var(--muted); font-size: 13px; text-transform: uppercase; letter-spacing: 0.04em; }
.detail h1 { font-size: 24px; line-height: 1.2; margin: 6px 0 8px; letter-spacing: -0.01em; }
.detail-sub { margin: 0 0 8px; color: var(--muted); font-size: 16px; }
.detail-meta { margin: 4px 0 0; color: var(--muted); font-size: 14px; }
.detail h2 { font-size: 13px; text-transform: uppercase; letter-spacing: 0.04em; color: var(--muted);
             margin: 0; padding: 18px 20px 8px; border-bottom: 1px solid var(--line); }
.prose { padding: 16px 20px; border-bottom: 1px solid var(--line); }
.prose p { margin: 0 0 12px; max-width: 68ch; }
.prose p:last-child { margin-bottom: 0; }
.facts { display: grid; grid-template-columns: max-content 1fr; gap: 4px 16px;
         margin: 0; padding: 16px 20px; border-bottom: 1px solid var(--line); font-size: 14px; }
.facts dt { color: var(--muted); }
.facts dd { margin: 0; }
.detail .row { align-items: center; }
.detail-source { padding: 16px 20px 0; font-size: 13px; color: var(--muted); }
.source-logo { height: 16px; width: auto; fill: currentColor; vertical-align: middle; }

@media (max-width: 700px) {
  .shell { grid-template-columns: minmax(0, 1fr); }
  /* A slim fixed header — brand and the hamburger toggle — replaces the sidebar; .main gets the
     matching top padding so the first row is never hidden under it, and the topbar's own sticky
     offset moves down by the same amount so it docks under the header, not behind it. */
  .rail {
    position: fixed; top: 0; left: 0; right: 0; bottom: auto; min-height: 0;
    display: flex; align-items: center; justify-content: space-between; padding: 8px 16px;
    background: #fff; border-right: 0; border-bottom: 1px solid var(--line); z-index: 6;
  }
  .brand { padding: 0; font-size: 17px; }
  .main { padding-top: 53px; }
  .topbar { top: 53px; }

  /* Visible only here: a checkbox drives both disclosures below rather than a details element,
     whose closed-content hiding some engines implement as more than plain display:none — an
     author style can force a plain, ordinary display:contents element back to visible (that is
     what keeps the desktop rule above reliable), but not necessarily whatever that mechanism is.
     Kept focusable (not display:none) so Tab still reaches it and Space still toggles it — only
     moved off-screen, the standard visually-hidden treatment. */
  .hidden-toggle {
    display: block; position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0;
    overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0;
  }

  .hamburger { display: block; position: relative; }
  .hamburger-toggle {
    display: flex; align-items: center; justify-content: center;
    width: 36px; height: 36px; font-size: 18px; color: var(--ink); cursor: pointer;
  }
  .hamburger-panel { display: none; }
  #hamburger-toggle:checked ~ .hamburger-panel {
    display: block; position: fixed; top: 53px; left: 0; right: 0; bottom: 0;
    background: #fff; overflow-y: auto; padding: 8px 0; z-index: 6;
  }

  /* The filter combos, the category chips and the search box move behind a "Filters" toggle the
     same way — same technique, same no-script reasoning. */
  .filters-toggle { display: inline-flex; }
  .filters-panel { display: none; }
  #filters-toggle:checked ~ .filters-panel {
    display: flex; flex-direction: column; gap: 10px;
    position: fixed; top: 53px; left: 0; right: 0; bottom: 0;
    background: #fff; overflow-y: auto; padding: 16px 20px; z-index: 7;
  }
  .filters-panel .combo input[type="text"], .filters-panel input[type="search"] { width: 100%; }
  /* .chips's flex:1 grows it along the topbar's own row axis on desktop; inside this panel's
     column layout the main axis is vertical, so the same rule stretched it — and, by default
     cross-axis stretch, the "near me" chip inside it — to the panel's full height. */
  .filters-panel .chips { flex: none; }

  /* Both panels sit at the same fixed top offset as the toggle that opens them — the filters one
     in particular then covers its own "Filters" chip in the topbar underneath, leaving no visible
     way back without this: a second label for the same checkbox, inside the panel this time. */
  .panel-close {
    display: flex; align-items: center; justify-content: center;
    width: 32px; height: 32px; margin: 0 0 8px auto; font-size: 16px; color: var(--muted);
    border: 1px solid var(--line); border-radius: 999px; cursor: pointer; flex: none;
  }
  /* .filters-panel already has its own 20px horizontal inset; .hamburger-panel has none, since its
     nav links carry their own instead. */
  .hamburger-panel .panel-close { margin-right: 20px; }
}