/* Palette and type follow landmarkcolumbusfoundation.org: Futura PT (Jost stands in; Futura PT
   is an Adobe Fonts licence tied to the foundation's own site), slate text, one blue and one red,
   pale grey bands, pill controls. */
:root {
  --ink: #4b555d;        /* a shade darker than the foundation's #5a656d so 12px data stays legible */
  --slate: #5b666e;
  --muted: #6b7d8a;      /* the foundation's blue-grey #7e92a0, darkened to pass contrast at 12px */
  --line: #cfd4d8;
  --paper: #ffffff;
  --wash: #e5e7e9;
  --wash-light: #f1f2f4;
  --accent: #1968ab;
  --nhl: #d93a37;
  --modern: #d98e04;
  --dot: #5b666e;
  --sans: "futura-pt", Futura, Jost, "Century Gothic", "Avenir Next", -apple-system, Helvetica, Arial, sans-serif;
}
* { box-sizing: border-box; }
[hidden] { display: none !important; }  /* the flex rules below must not override the hidden attribute */
body { margin: 0; font: 500 16px/1.4 var(--sans); color: var(--ink); background: var(--paper); letter-spacing: -0.01em; }
header, .controls, main, footer { padding: 0 24px; max-width: 1280px; margin: 0 auto; }
header { padding-top: 24px; }
.nav { display: flex; flex-wrap: wrap; gap: 4px 22px; align-items: baseline; margin: 0 0 22px; font-size: 15px; }
.nav a { color: var(--slate); text-decoration: none; padding: 2px 0; border-bottom: 2px solid transparent; }
.nav a:hover, .nav a[aria-current] { border-bottom-color: var(--accent); }
.nav .brand { font-weight: 600; letter-spacing: -0.02em; margin-right: 10px; color: var(--nhl); }
.nav .brand:hover { border-bottom-color: var(--nhl); }
.crumb a { color: var(--muted); text-decoration: none; }
.crumb a:hover { color: var(--accent); }
h1 .k, h2 .k { font-size: 0.5em; font-weight: 400; color: var(--muted); margin-left: 10px; letter-spacing: 0; vertical-align: middle; }
main.single { display: block; }
.summary, .note.coverage { max-width: 80ch; color: var(--slate); font-weight: 400; }
.note.coverage { background: var(--wash-light); padding: 10px 14px; border-left: 3px solid var(--accent); }
.class h2 { font-size: 24px; margin: 36px 0 6px; }
.more { margin: 8px 0 0; font-size: 14px; }
.browse { border-top: 1px solid var(--line); margin-top: 24px; padding-top: 12px; }
.browse h2 { font-size: 20px; margin: 8px 0 4px; }
.browse .glabel { font-size: 13px; color: var(--muted); margin: 10px 0 2px; }
.browse p { margin: 0 0 6px; line-height: 1.7; }
.tree, .tree ul { list-style: none; padding-left: 0; margin: 0; }
.tree ul { padding-left: 22px; }
.tree li { margin: 6px 0; }
.tree .lvl-family > a, .tree .lvl-family { font-size: 20px; margin-top: 18px; }
.tree .lvl-family li { font-size: 16px; }
.tree .k { font-size: 12px; color: var(--muted); margin-left: 6px; }
.tree .period { font-size: 12px; color: var(--muted); margin-left: 6px; }
.cities { list-style: none; padding: 0; margin: 8px 0 0; columns: 3; column-gap: 24px; font-size: 14px; }
.cities li { break-inside: avoid; margin: 3px 0; }
.cities .k { font-size: 12px; color: var(--muted); margin-left: 4px; }
@media (max-width: 760px) { .cities { columns: 1; } }
.page .row { cursor: default; }
.page .row:hover { background: var(--paper); }
h1 { font-size: 44px; font-weight: 500; margin: 0 0 8px; letter-spacing: -0.03em; line-height: 1.05; color: var(--slate); }
h2 { font-weight: 500; letter-spacing: -0.02em; color: var(--slate); }
a { color: var(--accent); }
.lede { margin: 0 0 20px; color: var(--slate); max-width: 62ch; font-size: 20px; line-height: 1.25; letter-spacing: -0.02em; }
.controls { display: flex; flex-direction: column; gap: 10px; padding-top: 14px; padding-bottom: 14px;
  border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); }
/* The filter grid: three columns of golden rectangles (width : height = φ). A tile that spans two
   columns and two rows keeps the ratio, so the big Category tile is golden too. */
.filterhead { display: flex; justify-content: space-between; align-items: center; gap: 12px; flex-wrap: wrap; }
.collapse { font: inherit; font-size: 13px; color: var(--muted); background: none; border: 0; padding: 4px 0; cursor: pointer; margin-left: auto; }
.collapse:hover { color: var(--accent); }
.collapse .chev { display: inline-block; width: 1em; }
.minisel { display: none; flex-wrap: wrap; gap: 6px; align-items: center; }
.controls.collapsed .minisel { display: flex; }
.controls.collapsed .top, .controls.collapsed .panes { display: none; }
.pill { font: inherit; font-size: 13px; display: inline-flex; align-items: baseline; gap: 6px; padding: 4px 11px; border: 1px solid var(--line); border-radius: 999px; background: var(--wash-light); color: var(--slate); cursor: pointer; white-space: nowrap; }
.pill:hover { border-color: var(--slate); }
.pill.set { border-color: var(--accent); background: var(--accent); color: #fff; }
.pill .pl { font-size: 10px; letter-spacing: 0.06em; text-transform: uppercase; opacity: 0.7; }
.pill .more { font-size: 0.85em; opacity: 0.8; }
.controls .top { display: flex; gap: 28px; align-items: flex-start; flex-wrap: wrap; }
.grid9 { --gap: 10px; --cols: 3; --w: min(720px, 100vw - 48px); width: var(--w); flex: 0 0 auto;
  display: grid; grid-template-columns: repeat(var(--cols), 1fr); gap: var(--gap);
  grid-auto-rows: calc((var(--w) - (var(--cols) - 1) * var(--gap)) / var(--cols) / 1.618); }
.controls .top .note { flex: 1 1 260px; padding-top: 4px; }
.tile { position: relative; display: flex; flex-direction: column; justify-content: flex-end; gap: 3px; padding: 12px 14px;
  text-align: left; font: inherit; color: var(--slate); background: var(--wash-light); border: 1px solid var(--line); border-radius: 2px; cursor: pointer; overflow: hidden; }
.tile:hover { border-color: var(--slate); }
.tile.open { background: var(--accent); border-color: var(--accent); color: #fff; }
.tile.set:not(.open) { border-color: var(--accent); box-shadow: inset 0 0 0 1px var(--accent); }
.tile.big { grid-column: span 2; grid-row: span 2; padding: 18px 20px; }
.tile .tl { font-size: 11px; letter-spacing: 0.06em; text-transform: uppercase; opacity: 0.75; }
.tile .tv { font-size: 16px; font-weight: 500; letter-spacing: -0.02em; line-height: 1.15; display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }
.tile.big .tv { font-size: 28px; letter-spacing: -0.03em; -webkit-line-clamp: 4; }
.tile .tv .more { font-size: 0.7em; opacity: 0.7; margin-left: 6px; }
.tile .th { font-size: 13px; font-weight: 400; opacity: 0.8; }
.tile.spare { cursor: default; background: repeating-linear-gradient(135deg, var(--paper) 0 8px, var(--wash-light) 8px 16px);
  border-style: dashed; color: var(--muted); justify-content: center; align-items: center; }
.tile.spare .tl { opacity: 0.5; }
.tile.spare:hover { border-color: var(--line); }
@media (max-width: 760px) { .grid9 { --cols: 2; } .tile .tv { font-size: 15px; } .tile.big .tv { font-size: 22px; } .tile .th { display: none; } }
/* The secondary selection: the open filter's options as a grid of small golden tiles. The chip
   markup is unchanged; only its shape is. */
.panes .pane { border: 1px solid var(--line); border-left: 3px solid var(--accent); padding: 14px 16px 16px; background: var(--paper); display: flex; flex-direction: column; gap: 14px; }
.controls .panes .group { display: block; }  /* outranks the flex row rule below */
.panes .glabel { display: block; flex: none; padding: 0 0 8px; font-size: 11px; letter-spacing: 0.06em; text-transform: uppercase; color: var(--muted); }
.panes .hint { display: block; padding: 8px 0 0; }
.panes .chips { display: grid; grid-template-columns: repeat(auto-fill, 168px); gap: 8px; }  /* fixed width: every option tile the same size */
.controls .panes .chips.single { display: grid; flex: none; }
.panes .chip { position: relative; display: flex; flex-direction: column; justify-content: flex-end; align-items: flex-start; gap: 2px;
  aspect-ratio: 1.618; padding: 10px 12px; border-radius: 2px; background: var(--wash-light); border: 1px solid var(--line);
  font-size: 14px; line-height: 1.15; letter-spacing: -0.01em; text-align: left; overflow: hidden; }
.panes .chip:hover { border-color: var(--slate); background: var(--paper); }
.panes .chip.on { background: var(--accent); border-color: var(--accent); color: #fff; }
.panes .chip.on.primary { box-shadow: inset 0 0 0 2px #fff, inset 0 0 0 3px var(--accent); }
.panes .chip .k { position: absolute; top: 8px; left: 10px; margin: 0; font-size: 11px; width: 18px; height: 18px; border-radius: 50%;
  background: var(--nhl); color: #fff; display: flex; align-items: center; justify-content: center; }
.panes .chip .caret { position: absolute; top: 6px; right: 8px; margin: 0; font-size: 12px; opacity: 0.6; padding: 4px; }
.panes .chip .caret:hover { opacity: 1; }
.panes .chip.open:not(.on) { border-color: var(--accent); color: var(--accent); background: var(--paper); }
.panes .chip .period { display: block; margin: 0; font-size: 11px; opacity: 0.7; }
.panes .chip.lvl-variant::before { content: none; }
.panes .chip.lvl-variant { font-size: 13px; }
.panes .chip.lvl-movement { font-weight: 500; }
.panes .styles-sub { margin-left: 14px; padding-left: 14px; border-left: 2px solid var(--line); }
@media (max-width: 760px) { .panes .chips { grid-template-columns: repeat(auto-fill, 136px); } }
/* One colour per filter, carried through its tile, its options panel and its collapsed pill. Red stays
   for actions and the pinned city; the size-class colours on the composite view are a separate set. */
[data-pane="category"] { --fc: #1968ab; }
[data-pane="style"] { --fc: #7b4ea3; }
[data-pane="band"] { --fc: #0f8b8d; }
[data-pane="measure"] { --fc: #b8730a; }
[data-pane="rtype"] { --fc: #2f7d4f; }
.tile .tl { color: var(--fc); opacity: 1; }
.tile.open { background: var(--fc); border-color: var(--fc); }
.tile.open .tl { color: #fff; opacity: 0.85; }
.tile.set:not(.open) { border-color: var(--fc); box-shadow: inset 0 0 0 1px var(--fc); }
.panes .pane { border-left-color: var(--fc); }
.panes .glabel { color: var(--fc); }
.panes .chip.on { background: var(--fc); border-color: var(--fc); }
.panes .chip.on.primary { box-shadow: inset 0 0 0 2px #fff, inset 0 0 0 3px var(--fc); }
.panes .chip.open:not(.on) { border-color: var(--fc); color: var(--fc); }
.panes .chip:hover { border-color: var(--fc); }
/* The measures and the adjustment share one row: four option tiles, a dashed divider, then the
   adjustment as an option tile of the same size whose native checkbox is hidden entirely. */
.panes .measures { display: flex; flex-wrap: wrap; gap: 8px; align-items: flex-start; }
.controls .panes .measures .chips { display: flex; flex-wrap: wrap; gap: 8px; flex: 0 1 auto; width: auto; }
.panes .measures .chip { width: 168px; }
.panes .divider { width: 0; border-left: 1px dashed var(--line); align-self: stretch; margin: 0 6px; }
.panes .chip.toggle { position: relative; width: 168px; margin: 0; }
.panes .chip.toggle input { position: absolute; opacity: 0; width: 1px; height: 1px; margin: 0; pointer-events: none; appearance: none; }
.panes .chip.toggle:has(:checked) { background: var(--fc); border-color: var(--fc); color: #fff; }
.panes .chip.toggle:has(:focus-visible) { outline: 2px solid var(--fc); outline-offset: 2px; }
.pill .pl { color: var(--fc); opacity: 1; }
.pill.set { background: var(--fc); border-color: var(--fc); }
.pill.set .pl { color: #fff; opacity: 0.85; }
.pill:hover { border-color: var(--fc); }
.controls .group { display: flex; flex-wrap: wrap; gap: 6px 12px; align-items: flex-start; }
.controls .glabel { font-size: 13px; color: var(--muted); flex: 0 0 92px; padding-top: 5px; }
.controls .hint { flex-basis: 100%; padding-left: 104px; font-size: 12px; color: var(--muted); }
@media (max-width: 760px) { .controls .glabel { flex-basis: 100%; padding-top: 0; } .controls .hint { padding-left: 0; } }
.chips { display: flex; flex-wrap: wrap; gap: 6px; flex: 1 1 0; min-width: 0; }
.chips.single { flex: 0 1 auto; }  /* keeps the adjusted-rate toggle next to the measure chips */
.chip { font: inherit; font-size: 13px; padding: 4px 12px; border: 1px solid var(--line); border-radius: 999px; background: var(--paper);
  color: var(--slate); cursor: pointer; letter-spacing: 0; }
.chip:hover { border-color: var(--slate); }
.chip.on { background: var(--accent); border-color: var(--accent); color: #fff; }
.chip.on.primary { box-shadow: inset 0 0 0 2px #fff, 0 0 0 1px var(--accent); }
.chip .k { opacity: .7; font-size: 11px; margin-left: 4px; }
.chip.open:not(.on) { border-color: var(--accent); color: var(--accent); }
.chip .caret { opacity: .6; font-size: 10px; margin-left: 5px; }
.chip.lvl-movement { font-weight: 600; }
.chip.lvl-variant { font-size: 12px; opacity: .9; }
.chip.lvl-variant::before { content: "↳ "; opacity: .6; }
.chip .period { opacity: .6; font-size: 11px; margin-left: 4px; }
.styles-sub .glabel { font-size: 12px; }
.listings .tag.style { background: #e8f0e6; color: #2f5d33; }
.listings .tag.unverified { background: #fff4d6; color: #7a5200; }
.verify { font-size: 11px; color: var(--accent); margin-left: 6px; }
.soon, .doc h2 .k { font-size: 11px; letter-spacing: 0.06em; text-transform: uppercase; color: var(--nhl); border: 1px solid var(--nhl); border-radius: 999px; padding: 0 7px; margin-left: 6px; vertical-align: middle; font-weight: 500; }

.controls .note { font-size: 13px; color: var(--muted); display: flex; flex-direction: column; gap: 4px; max-width: 110ch; }
.controls .note b { color: var(--ink); font-weight: 600; }
.chip[title]:hover { border-color: var(--accent); }
.stat .extras { font-size: 12px; color: var(--muted); margin-top: 4px; display: flex; flex-direction: column; gap: 1px; }
.stat .extras b { color: var(--ink); font-weight: 600; }
.search { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; margin: 0 0 16px; }
.searchbox { position: relative; }
.search input { font: inherit; font-weight: 400; padding: 8px 12px; border: 1px solid var(--line); border-radius: 2px; min-width: 300px; width: 100%; }
.search input:focus { outline: none; border-color: var(--accent); box-shadow: 0 0 0 1px var(--accent); }
.suggest { position: absolute; left: 0; right: 0; top: calc(100% + 4px); z-index: 20; margin: 0; padding: 4px 0; list-style: none;
  background: var(--paper); border: 1px solid var(--line); border-radius: 2px; box-shadow: 0 6px 18px rgba(31, 41, 51, 0.12); }
.suggest li { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; padding: 7px 12px; cursor: pointer; font-size: 14px; }
.suggest li .n { font-weight: 500; color: var(--ink); }
.suggest li .d { font-size: 12px; color: var(--muted); white-space: nowrap; }
.suggest li:hover, .suggest li.active { background: var(--accent); }
.suggest li:hover .n, .suggest li.active .n, .suggest li:hover .d, .suggest li.active .d { color: #fff; }
/* Red is for actions and the pinned city; blue is for selections. Together with the white page, it is
   quietly red, white and blue. */
.search button { font: inherit; font-size: 13px; font-weight: 600; letter-spacing: 0.06em; text-transform: uppercase; padding: 9px 16px;
  border: 1px solid var(--nhl); background: var(--nhl); color: #fff; border-radius: 2px; cursor: pointer; }
.search button:hover { background: #c0302d; border-color: #c0302d; }
.search .pinned { font-size: 13px; color: var(--muted); }
.search .pinned .pinnote { color: var(--muted); }
.search .pinned .pinnote::before { content: "· "; }
.search .near { font: inherit; font-size: 13px; padding: 9px 14px; border: 1px solid var(--line); background: var(--paper); color: var(--slate); border-radius: 2px; cursor: pointer; }
.search .near:hover { border-color: var(--slate); }
.search .pinned button { font: inherit; font-size: 12px; margin-left: 6px; padding: 2px 8px; border: 1px solid var(--line); background: var(--paper); color: var(--ink); border-radius: 999px; cursor: pointer; }
.row.pin { position: sticky; top: 0; z-index: 2; background: #fdf1f0; border-bottom: 2px solid var(--nhl); border-left: 5px solid var(--nhl); padding-left: 10px; }
.row.pin .rank { color: var(--nhl); font-size: 14px; }
.search .pinned b { color: var(--nhl); }
.delta { font-size: 12px; margin-top: 2px; }
.delta.up { color: #1a7f37; }
.delta.down { color: var(--nhl); }
.count { color: var(--accent); text-decoration: underline dotted; cursor: pointer; }
.listings li.dim { color: #9aa8b4; }
.listings { max-height: none; }
.listings summary { cursor: pointer; }
.listings details[open] > summary { font-weight: 600; }
.rec { border-collapse: collapse; margin: 6px 0 10px; font-size: 12px; width: 100%; }
.rec th { text-align: left; color: var(--muted); font-weight: 500; padding: 2px 8px 2px 0; vertical-align: top; white-space: nowrap; width: 1%; }
.rec td { padding: 2px 0; vertical-align: top; word-break: break-word; }
.rec tr { border-top: 1px solid var(--wash); }
.rec .ev { color: var(--muted); }
.linkish { font: inherit; font-size: 13px; color: var(--accent); background: none; border: 0; padding: 0; cursor: pointer; text-decoration: underline; }
.detail .tour a { font-weight: 500; }
/* The tour planner page */
/* Print: the page becomes the document someone would hand to a driver. Controls, search, nav,
   buttons and the footer go; the site name and page name stay as a running head; links keep
   their targets, so a PDF saved from the browser is still clickable. */
@media print {
  nav.nav, .crumb, .search, .geoask, .geomsg, .controls, footer, .collapse, .minisel, #share, #sharenote, #print, .near, .browse, .detail, #boardtop { display: none !important; }
  header, main, .controls { padding: 0; max-width: none; }
  body { font-size: 12px; color: #000; }
  body::before { content: "City Index · landmarks.city"; display: block; font-size: 11px; color: #555; letter-spacing: 0.06em; text-transform: uppercase; margin-bottom: 6px; }
  h1 { font-size: 22px; margin: 0 0 4px; }
  .lede { display: none; }
  .tour h2 { font-size: 20px; margin: 6px 0 2px; }
  .tourlinks { font-size: 12px; }
  main.tour .tourmap { height: 420px; margin: 8px 0 12px; break-inside: avoid; page-break-inside: avoid; }
  .maplibregl-ctrl { display: none !important; }
  .stops .stop { break-inside: avoid; page-break-inside: avoid; padding: 6px 0; }
  .stops .num { background: #000; color: #fff; -webkit-print-color-adjust: exact; print-color-adjust: exact; }
  .stops .sub a::after { content: ""; }
  .stops .sub { color: #333; }
  .row { break-inside: avoid; page-break-inside: avoid; }
  .bar { display: none; }
  .mini .outline { stroke: #777; }
  .mini .pt { fill: #000; -webkit-print-color-adjust: exact; print-color-adjust: exact; }
  .mini .pt.nhl { fill: #d93a37; }
  .mini .pt.hit { fill: #1968ab; }
  .tag { border: 1px solid #999; }
  a { color: #000; text-decoration: none; }
  .stops a, .tourlinks a { text-decoration: underline; }
}
.printonly { display: none; }
@media print { .printonly { display: block; font-size: 10px; color: #555; margin: 0 0 8px; word-break: break-all; } }
.printbtn { font: inherit; font-size: 13px; color: var(--accent); background: none; border: 0; padding: 0; cursor: pointer; text-decoration: underline; }
.pinchip { display: inline-flex; align-items: center; gap: 4px; padding: 2px 4px 2px 9px; border: 1px solid var(--nhl); border-radius: 999px; color: var(--ink); margin: 2px 2px 2px 0; }
.pinchip b { color: var(--nhl); }
.pinchip .unpin { font: inherit; font-size: 14px; line-height: 1; border: 0; background: none; color: var(--muted); cursor: pointer; padding: 0 5px; }
.pinchip .unpin:hover { color: var(--nhl); }
.tour h2 { font-size: 26px; margin: 8px 0 4px; }
main.tour .tourmap { height: 480px; margin: 12px 0 18px; }
.tourlinks a { font-weight: 500; }
.tourlinks a[hidden] { display: none; }
.stops { list-style: none; padding: 0; margin: 0; max-width: 80ch; }
.stops .stop { display: flex; gap: 12px; padding: 10px 0; border-bottom: 1px solid var(--line); }
.stops .num { flex: 0 0 28px; height: 28px; border-radius: 50%; background: var(--nhl); color: #fff; font-weight: 600; font-size: 13px; display: flex; align-items: center; justify-content: center; }
.stops .sub { font-size: 13px; color: var(--muted); font-weight: 400; margin-top: 2px; }
.stops .leg { padding: 10px 0 4px 40px; font-size: 13px; }
@media (max-width: 760px) { main.tour .tourmap { height: 55vh; } .tourform select { max-width: 100%; } }
.detail .tour a[hidden] { display: none; }
/* Prose pages share the leaderboard pages' container so the nav and heading never shift between
   pages; the reading measure is set on the text itself. */
.doc dl, .doc ul, .doc > p { max-width: 80ch; }
.doc h2 { font-size: 18px; margin: 28px 0 8px; }
.doc dl { margin: 0; }
.doc dt { font-weight: 600; margin-top: 10px; }
.doc dd { margin: 2px 0 0 0; color: var(--ink); }
.doc li { margin: 4px 0; }
.crumb { margin: 0 0 6px; font-size: 13px; }
main { display: grid; grid-template-columns: 1fr; gap: 24px; padding-top: 18px; padding-bottom: 32px; }
main.with-detail { grid-template-columns: minmax(0, 1fr) minmax(360px, 480px); }
.board { display: flex; flex-direction: column; }
.row { display: grid; grid-template-columns: 44px 120px 1fr auto; gap: 16px; align-items: center; padding: 10px 0;
  border-bottom: 1px solid var(--line); cursor: pointer; }
.row:hover { background: var(--wash-light); }
.row.selected { background: #e8f0f8; }
.rank { font-size: 26px; font-weight: 500; color: var(--muted); text-align: right; letter-spacing: -0.03em; }
.mini { width: 120px; height: 120px; display: block; }
.mini .outline { fill: #eef2f5; stroke: #9aa8b4; stroke-width: 1; }
.mini .pt { fill: var(--dot); opacity: .85; }
.mini .pt.nhl { fill: var(--nhl); }
.mini .pt.hit { fill: var(--accent); }
.mini .pt.modern { fill: var(--modern); }
.who .name { font-size: 20px; font-weight: 500; letter-spacing: -0.02em; color: var(--slate); }
.kind { font-size: 12px; font-weight: 400; color: var(--muted); margin-left: 4px; }
.kind:not(:empty)::before { content: "("; }
.kind:not(:empty)::after { content: ")"; }
.who .sub { color: var(--muted); font-size: 13px; }
.who .bar { height: 6px; background: var(--wash); border-radius: 0; margin-top: 8px; width: 100%; max-width: 420px; }
.who .bar i { display: block; height: 6px; background: var(--accent); border-radius: 0; }
.stat { text-align: right; min-width: 150px; }
.stat .big { font-size: 28px; font-weight: 500; letter-spacing: -0.03em; color: var(--slate); }
.stat .unit { font-size: 12px; color: var(--muted); }
.stat .small { font-size: 12px; color: var(--muted); margin-top: 2px; }
.empty { color: var(--muted); padding: 24px 0; }
/* Size classes get a colour each; it shows only on the composite view, where every number is
   relative to the city's own class and a merged board would otherwise mislead. */
[data-band="10,000-24,999"] { --bc: #1968ab; }
[data-band="25,000-49,999"] { --bc: #0f8b8d; }
[data-band="50,000-99,999"] { --bc: #2f7d4f; }
[data-band="100,000-249,999"] { --bc: #d98e04; }
[data-band="250,000-499,999"] { --bc: #d93a37; }
[data-band="500,000-999,999"] { --bc: #7b4ea3; }
[data-band="1,000,000+"] { --bc: #38383b; }
.board.composite .row { border-left: 5px solid var(--bc); padding-left: 10px; }
.board.composite .bandtag, .legend .bandtag { display: inline-block; padding: 0 7px; border-radius: 999px; background: var(--bc); color: #fff; font-size: 11px; line-height: 17px; }
.board.composite .rank { color: var(--bc); }
.legend { font-size: 13px; color: var(--slate); padding: 10px 0 12px; border-bottom: 1px solid var(--line); line-height: 2; }
.detail { position: sticky; top: 12px; align-self: start; border: 0; border-radius: 0; padding: 20px; background: var(--wash-light); }
.detail h2 { margin: 0 0 4px; font-size: 24px; }
.detail .meta { margin: 0 0 10px; color: var(--muted); font-size: 13px; }
.close { position: absolute; right: 10px; top: 8px; border: 0; background: none; font-size: 22px; cursor: pointer; color: var(--muted); }
.map { height: 320px; border-radius: 4px; overflow: hidden; background: var(--wash); }
.listings { margin: 12px 0 0; padding-left: 20px; font-size: 13px; max-height: 320px; overflow: auto; }
.listings li { margin: 3px 0; }
.listings .tag { display: inline-block; font-size: 11px; padding: 0 6px; border-radius: 999px; background: var(--wash); color: var(--slate); margin-left: 4px; letter-spacing: 0; }
.listings .tag.nhl { background: #f9e3e0; color: var(--nhl); }
.listings .tag.modern { background: #fbefd4; color: #7a5200; }
footer { color: var(--slate); font-size: 13px; border-top: 1px solid var(--line); padding-top: 16px; padding-bottom: 32px; font-weight: 400; }
main.doc { display: block; }
.doc p { margin: 0 0 12px; max-width: 80ch; }
.doc h2 { font-size: 24px; }
.doc, .doc dd, .doc li { font-weight: 400; }
.geoask, .geomsg { margin: -8px 0 12px; font-size: 13px; color: var(--muted); }
.geoask .linkish, .geomsg { font-size: 13px; }
.geomsg:empty { display: none; }
#boardtop { grid-column: 1 / -1; height: 0; }
@media (max-width: 760px) {
  .row { grid-template-columns: 32px 90px 1fr; }
  .mini { width: 90px; height: 90px; }
  .stat { grid-column: 2 / -1; text-align: left; }
  main.with-detail { grid-template-columns: 1fr; }
  /* The detail panel is a full-screen overlay on phones; below the board it was out of reach. */
  .detail { position: fixed; inset: 0; z-index: 30; overflow: auto; border: 0; border-radius: 0; padding: 16px; max-height: 100vh; }
  .detail .close { position: fixed; right: 10px; top: 8px; width: 40px; height: 40px; background: var(--paper); border-radius: 50%; box-shadow: 0 1px 4px rgba(0,0,0,0.2); z-index: 31; }
  .listings { max-height: none; }
  /* Once the board's top has scrolled away, the pinned row keeps only its rank, name and number. */
  body.scrolled .row.pin { grid-template-columns: 44px 1fr auto; padding: 6px 0 6px 10px; gap: 10px; }
  body.scrolled .row.pin .mini, body.scrolled .row.pin .bar, body.scrolled .row.pin .sub, body.scrolled .row.pin .small,
  body.scrolled .row.pin .delta, body.scrolled .row.pin .extras, body.scrolled .row.pin .unit { display: none; }
  body.scrolled .row.pin .stat { grid-column: auto; text-align: right; min-width: 0; }
  body.scrolled .row.pin .big { font-size: 18px; }
  body.scrolled .row.pin .name { font-size: 15px; }
}