:root {
  --paper: #f3eee4;
  --ink: #1c1914;
  --muted: #5c564c;
  --forest: #1c3d34;
  --forest-soft: #e5efe9;
  --oxblood: #7a2e2a;
  --gold: #8d6a38;
  --card: #fffdf8;
  --line: #e0d5c2;
  --chip: #efe6d4;
  --shadow: 0 16px 40px rgba(40, 28, 12, 0.08);
  color-scheme: light;
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
  margin: 0;
  color: var(--ink);
  background:
    radial-gradient(1200px 400px at 10% -10%, rgba(141, 106, 56, 0.16), transparent 50%),
    var(--paper);
  font: 17px/1.5 "Libre Franklin", "Segoe UI", sans-serif;
}

.mast {
  max-width: 1100px;
  margin: 0 auto;
  padding: 28px 20px 18px;
}
.kicker {
  margin: 0 0 8px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  font-size: 12px;
  color: var(--gold);
  font-weight: 700;
}
.mast-row { display: grid; grid-template-columns: auto 1fr; gap: 22px; align-items: end; }
h1 {
  margin: 0;
  font-family: Newsreader, Georgia, serif;
  font-size: clamp(64px, 10vw, 104px);
  font-weight: 650;
  line-height: 0.8;
  letter-spacing: -0.03em;
  color: var(--forest);
}
.deck { margin: 0 0 6px; max-width: 42rem; font-size: 18px; }
.when { margin: 14px 0 0; color: var(--muted); font-size: 15px; }
.when strong { color: var(--oxblood); font-weight: 700; }

.map-wrap { position: relative; height: min(52vh, 520px); min-height: 280px; margin: 8px 16px 0; border-radius: 18px; overflow: hidden; box-shadow: var(--shadow); border: 1px solid var(--line); }
#map { height: 100%; background: #d7e2da; }
.map-note {
  position: absolute;
  z-index: 500;
  left: 12px;
  bottom: 12px;
  margin: 0;
  max-width: min(440px, calc(100% - 24px));
  padding: 8px 12px;
  background: rgba(255, 253, 248, 0.94);
  border-radius: 10px;
  font-size: 14px;
  box-shadow: 0 4px 16px rgba(0,0,0,.08);
}

main { max-width: 1100px; margin: 0 auto; padding: 18px 20px 48px; }
.places { display: flex; flex-direction: column; gap: 10px; margin: 8px 0 18px; }
.place-row { display: flex; gap: 8px; align-items: baseline; }
.place-row h2 {
  margin: 0;
  min-width: 9.5rem;
  font-size: 13px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--gold);
}
.chips { display: flex; flex-wrap: wrap; gap: 8px; }
.chips button, .filters button, .ghost, button {
  font: inherit;
  cursor: pointer;
}
.chips button {
  border: 1px solid var(--line);
  background: var(--chip);
  color: var(--ink);
  border-radius: 999px;
  padding: 8px 12px;
  min-height: 40px;
}
.chips button[aria-pressed="true"], .filters button[aria-pressed="true"] {
  background: var(--forest);
  color: #f6f3ec;
  border-color: var(--forest);
}

.panel, .race, .candidate, .reading {
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: 16px;
  padding: 18px 18px 8px;
  margin: 0 0 14px;
}
.panel h2, .race h3, .reading h2 {
  font-family: Newsreader, Georgia, serif;
  font-weight: 600;
  margin: 0 0 8px;
}
.lede { color: var(--muted); }
ol#questions { margin: 0; padding: 0 0 10px 1.2rem; }
ol#questions li { margin: 0 0 10px; }
ol#questions strong { font-family: Newsreader, Georgia, serif; font-size: 1.05rem; }

.reading { border-left: 4px solid var(--oxblood); padding-bottom: 16px; }
.reading p { margin-top: 0; }

.toolbar { display: flex; flex-wrap: wrap; gap: 10px; align-items: end; margin: 0 0 14px; }
.filters { display: flex; flex-wrap: wrap; gap: 8px; flex: 1; }
.filters button {
  border: 1px solid var(--line);
  background: transparent;
  border-radius: 999px;
  padding: 7px 11px;
  min-height: 38px;
}
label.pick { font-size: 13px; color: var(--muted); display: grid; gap: 4px; }
select { font: inherit; padding: 8px 10px; border-radius: 10px; border: 1px solid var(--line); background: white; }

.race header { display: flex; justify-content: space-between; gap: 12px; align-items: baseline; }
.seats { color: var(--muted); font-size: 14px; white-space: nowrap; }
.note { color: var(--muted); font-size: 15px; }
.candidates { display: grid; gap: 10px; margin: 8px 0 12px; }
.candidate { padding: 14px 16px; margin: 0; }
.candidate.has-platform { border-color: #b7cfc4; background: linear-gradient(180deg, #f4faf6, var(--card) 40%); }
.candidate h4 { margin: 0 0 6px; font-size: 1.15rem; }
.badges { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 8px; }
.badge {
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.03em;
  text-transform: uppercase;
  padding: 2px 7px;
  border-radius: 999px;
  background: var(--forest-soft);
  color: var(--forest);
}
.badge.warn { background: #f3e4c8; color: #6d4e1e; }
.badge.quiet { background: #eeeae3; color: var(--muted); font-weight: 600; }
.platform { margin: 8px 0; padding-left: 1.1rem; }
.muted { color: var(--muted); }
.sources { font-size: 14px; margin: 8px 0 0; }
.sources a, .links a, footer a { color: var(--forest); }
.links { font-size: 15px; }

footer {
  max-width: 1100px;
  margin: 0 auto;
  padding: 0 20px 40px;
  color: var(--muted);
  font-size: 14px;
}
footer button {
  background: none;
  border: 0;
  padding: 0;
  color: var(--forest);
  text-decoration: underline;
  min-height: 44px;
}

dialog {
  border: 1px solid var(--line);
  border-radius: 16px;
  padding: 18px;
  max-width: 480px;
  width: calc(100% - 32px);
  background: var(--card);
  color: var(--ink);
}
dialog::backdrop { background: rgba(28, 25, 20, 0.45); }
textarea, dialog input { width: 100%; font: inherit; padding: 8px; border-radius: 10px; border: 1px solid var(--line); }
.dialog-actions { display: flex; justify-content: flex-end; gap: 8px; margin-top: 12px; }
.dialog-actions button, .ghost {
  border-radius: 10px;
  padding: 8px 14px;
  min-height: 42px;
}
.dialog-actions button[type="submit"] { background: var(--forest); color: white; border: 0; }
.ghost { background: transparent; border: 1px solid var(--line); }
.hp { position: absolute; left: -9999px; height: 0; overflow: hidden; }
.form-status { min-height: 1.2em; font-size: 14px; }

@media (max-width: 720px) {
  .mast-row { grid-template-columns: 1fr; gap: 8px; }
  h1 { font-size: 72px; }
  .place-row { flex-direction: column; }
  .map-wrap { margin: 0; border-radius: 0; height: 46vh; }
  .race header { flex-direction: column; }
}