/* The place pages (scripts/make-places.mjs). Plain static files, so the Slate tokens of
   src/style.css are repeated here; keep the two in step. */
:root {
  --bg: #eef1f4; --panel: #ffffff; --hover: #f1f4f7; --line: #e1e6ec; --line-strong: #cbd3dc;
  --ink: #1a2433; --muted: #667180; --water: #1668d8; --water-soft: #dbe8fa;
  --r-panel: 14px; --r-ctl: 10px;
  --font: system-ui, -apple-system, 'Segoe UI', sans-serif;
}
* { box-sizing: border-box; }
html, body { margin: 0; background: var(--bg); color: var(--ink); font: 15px/1.55 var(--font); -webkit-font-smoothing: antialiased; }
a { color: var(--water); font-weight: 600; text-decoration: none; }
a:hover { text-decoration: underline; }

.pl-top { position: sticky; top: 0; z-index: 2; display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 10px 16px; background: var(--panel); border-bottom: 1px solid var(--line); }
.pl-brand { display: inline-flex; align-items: center; gap: 8px; color: var(--ink); font-weight: 700; }
.pl-top nav { display: flex; gap: 16px; font-size: 14px; }

.pl-main { max-width: 720px; margin: 0 auto; padding: 24px 16px 40px; }
.pl-crumb { margin: 0 0 8px; font-size: 13px; }
.pl-main h1 { margin: 0 0 10px; font-size: 30px; line-height: 1.15; font-weight: 750; letter-spacing: -0.02em; }
.pl-lead { margin: 0 0 8px; font-size: 17px; line-height: 1.5; max-width: 62ch; }
.pl-main h2 { margin: 30px 0 10px; font-size: 13px; font-weight: 650; color: var(--muted); }
.pl-fine { margin: 6px 0 0; font-size: 13px; color: var(--muted); max-width: 62ch; }
.pl-btn { display: inline-block; margin-top: 10px; padding: 11px 18px; border-radius: 999px; background: var(--water); color: #fff; }
.pl-btn:hover { text-decoration: none; filter: brightness(1.08); }

.pl-facts { margin: 0; display: grid; background: var(--panel); border: 1px solid var(--line); border-radius: var(--r-panel); }
.pl-facts div { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.2fr); gap: 12px; padding: 12px 16px; }
.pl-facts div + div { border-top: 1px solid var(--line); }
.pl-facts dt { color: var(--muted); }
.pl-facts dd { margin: 0; font-weight: 600; }

.pl-chart { display: block; width: 100%; height: auto; background: var(--panel); border: 1px solid var(--line); border-radius: var(--r-panel); padding: 12px 12px 4px; }
.pl-chart text { font-size: 12px; fill: var(--muted); }

.pl-list, .pl-near { list-style: none; margin: 0; padding: 0; background: var(--panel); border: 1px solid var(--line); border-radius: var(--r-panel); }
.pl-list li, .pl-near li { display: flex; justify-content: space-between; gap: 12px; padding: 11px 16px; }
.pl-list li + li, .pl-near li + li { border-top: 1px solid var(--line); }
.pl-list li span, .pl-near li span { color: var(--muted); font-size: 13px; white-space: nowrap; }
.pl-list li { flex-direction: column; gap: 2px; }
.pl-all { columns: 2; column-gap: 0; }
.pl-all li { break-inside: avoid; }
.pl-all li + li { border-top: 0; }

.pl-foot { max-width: 720px; margin: 0 auto; padding: 0 16px 40px; font-size: 13px; color: var(--muted); }
.pl-foot p { margin: 0 0 6px; }

@media (max-width: 560px) {
  .pl-main h1 { font-size: 26px; }
  .pl-all { columns: 1; }
  .pl-top nav { gap: 12px; font-size: 13px; }
}