/* A serif for words people read, a mono for everything that is measured. Neutral paper grey, no warmth, hairlines only,
   small tracked labels, and land one quiet tone off the page. Colour appears only in charts. The map's dots are ink. */
:root {
  --bg: #f5f5f3;
  --tile: #eaeae7;
  --ink: #171716;
  --ink-2: #4a4a47;
  --muted: #676762;
  --rule: #d9d9d4;
  --land: #eaeae7;
  --land-hover: #e1e1dd;
  --border: #c9c9c3;
  --dot: #626261;
  --s1: #025191;
  --s2: #b8323a;
  --s3: #b17e18;
  --s4: #297b54;
  --s5: #9e6da6;
  --rest: #8a8a83;
  --tip-bg: #171716;
  --tip-ink: #f5f5f3;
  --serif: "Newsreader", "Iowan Old Style", Georgia, serif;
  --mono: "IBM Plex Mono", ui-monospace, "SF Mono", Menlo, monospace;
  --text: var(--serif);
  --grain: 0.5;
  --hair: 1px;
  color-scheme: light;
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --bg: #141413; --tile: #1f1f1d; --ink: #ededE8; --ink-2: #bdbdb7; --muted: #8f8f88; --rule: #30302d; --land: #1f1f1d; --land-hover: #2a2a27;
    --border: #3f3f3b; --dot: #969693; --s1: #1f74bc; --s2: #db4655; --s3: #c58215; --s4: #54a977; --s5: #9c84c7; --rest: #7f7f78;
    --tip-bg: #ededE8; --tip-ink: #141413; --grain: 0.35; color-scheme: dark;
  }
}
:root[data-theme="dark"] {
  --bg: #141413; --tile: #1f1f1d; --ink: #ededE8; --ink-2: #bdbdb7; --muted: #8f8f88; --rule: #30302d; --land: #1f1f1d; --land-hover: #2a2a27;
  --border: #3f3f3b; --dot: #969693; --s1: #1f74bc; --s2: #db4655; --s3: #c58215; --s4: #54a977; --s5: #9c84c7; --rest: #7f7f78;
  --tip-bg: #ededE8; --tip-ink: #141413; --grain: 0.35; color-scheme: dark;
}

@media (min-resolution: 2dppx) { :root { --hair: 0.5px; } }

* { box-sizing: border-box; }
body { margin: 0; background: var(--bg); color: var(--ink); font: 400 18px/1.5 var(--serif); font-optical-sizing: auto; -webkit-text-size-adjust: 100%; }
a { color: inherit; text-underline-offset: 3px; text-decoration-thickness: 1px; text-decoration-color: var(--border); }
a:hover { text-decoration-color: var(--ink); }
:focus-visible { outline: none; box-shadow: 0 0 0 2px var(--bg), 0 0 0 4px var(--focus, var(--ink)); }
button, select { font: inherit; color: inherit; }

.wrap {
  max-width: 1000px; margin: 0 auto;
  padding-left: max(16px, env(safe-area-inset-left, 0px));
  padding-right: max(16px, env(safe-area-inset-right, 0px));
  padding-block: 22px 48px;
}

.top { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: 0 32px; }
.load-note { margin: 48px 0; font-family: "IBM Plex Mono", ui-monospace, monospace; font-size: 13px; color: var(--muted); }
.mark { margin-right: auto; font-size: 22px; font-weight: 500; letter-spacing: -0.01em; text-decoration: none; }
.theme { align-self: center; display: inline-grid; place-items: center; width: 30px; height: 30px; margin: -4px -10px -4px 0; padding: 0; background: none; border: var(--hair) solid var(--border); border-radius: 50%; color: var(--ink-2); cursor: pointer; }
.theme:hover { color: var(--ink); border-color: var(--ink-2); }
.theme svg { width: 14px; height: 14px; }
.theme circle { fill: none; stroke: currentColor; stroke-width: 1.2; }
.theme path { fill: currentColor; }
.views { display: flex; flex-wrap: wrap; gap: 0 22px; font: 400 12px/20px var(--mono); }
.views a { text-decoration: none; color: var(--ink-2); padding-bottom: 5px; border-bottom: 1px solid transparent; transition: color 120ms; }
.views a:hover { color: var(--ink); }
.views a[aria-current="page"] { color: var(--ink); border-bottom-color: var(--ink); }

.page-title { font-size: 46px; font-weight: 400; letter-spacing: -0.022em; line-height: 1.06; margin: 56px 0 0; text-wrap: balance; }
.lede { margin: 12px 0 0; font-size: 18px; line-height: 1.4; color: var(--ink-2); }
.lede b { color: var(--ink); font-weight: 400; font-family: var(--mono); font-size: 0.86em; letter-spacing: -0.01em; }

/* one strip of small mono tabs, framed by hairlines above and below */
/* three settings, three rows: each row names what it sets, and the menus stand beside them so the block stays low */
.controls { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 0 28px; align-items: start; margin-top: 30px; padding: 7px 0; border-block: var(--hair) solid var(--rule); font: 400 12px/20px var(--mono); }
.segs { display: grid; gap: 2px; min-width: 0; }
.filters { display: grid; grid-template-columns: auto auto; justify-content: end; gap: 2px 14px; }
.ctl { display: inline-flex; align-items: center; gap: 8px; min-height: 28px; color: var(--muted); }
.filters .ctl:nth-child(n+3) { grid-column: 1 / -1; justify-self: end; }
.ctl, .seg::before { font-size: 11px; letter-spacing: 0.07em; text-transform: uppercase; }
.ctl select { font-size: 12px; letter-spacing: 0; text-transform: none; }
.ctl select {
  appearance: none; -webkit-appearance: none; border: 0; border-radius: 0; color: var(--ink); max-width: 24ch; padding: 3px 14px 3px 0; cursor: pointer; field-sizing: content;
  background: transparent url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 10 10'%3E%3Cpath d='M2 3.5 5 6.5 8 3.5' fill='none' stroke='%236c6c67' stroke-width='1.1'/%3E%3C/svg%3E") no-repeat right center / 10px;
}
.ctl select option { color: #171716; background: #fff; }
.ctl select option:disabled { color: #999; }
.seg { display: flex; align-items: center; gap: 1px; min-height: 28px; }
.seg::before { content: attr(aria-label); flex: none; width: 74px; color: var(--muted); }
.seg button { background: none; border: 0; border-radius: 2px; padding: 3px 8px; color: var(--muted); cursor: pointer; transition: color 120ms, background-color 120ms; }
.seg button:hover { color: var(--ink); }
.seg button[aria-pressed="true"] { background: var(--tile); color: var(--ink); }
.seg button:disabled { color: var(--muted); cursor: not-allowed; opacity: 0.55; }
.seg-line { display: flex; flex-wrap: wrap; align-items: center; gap: 0 12px; min-width: 0; }  /* Rank, then the country it narrows to */
#scope-wrap[hidden] { display: none; }

/* the sea is the page, the land is one tone off it, a coast is only that change, and the borders are hairlines */
.map { position: relative; margin-top: 0; }
#map { overflow: hidden; border-bottom: var(--hair) solid var(--rule); }  /* the rule above is the controls' own */
#map canvas { display: block; width: 100%; cursor: default; -webkit-user-select: none; user-select: none; }
.caption { margin: 0; font: 400 12px/18px var(--mono); color: var(--muted); }
.map-foot { display: flex; align-items: center; justify-content: space-between; gap: 6px 16px; margin-top: 10px; }
.map-foot .caption { margin: 0; min-width: 0; }
.map-btns { display: flex; gap: 8px; flex: none; }
.map-btn {
  display: inline-flex; align-items: center; gap: 7px; padding: 4px 9px; cursor: pointer; white-space: nowrap;
  border: var(--hair) solid var(--rule); border-radius: 2px; background: var(--bg); color: var(--ink-2); font: 400 12px/18px var(--mono); transition: color 120ms, border-color 120ms;
}
.map-btn:hover { color: var(--ink); border-color: var(--ink-2); }
.map-btn[hidden] { display: none; }
.map-btn svg { width: 11px; height: 11px; fill: none; stroke: currentColor; stroke-width: 1.2; }
h2 { font-size: 22px; font-weight: 400; letter-spacing: -0.01em; line-height: 1.2; margin: 0; text-wrap: balance; }
.block { margin-top: 52px; }
.legend { display: flex; flex-wrap: wrap; gap: 2px 16px; margin-top: 10px; font: 400 12px/18px var(--mono); color: var(--ink-2); }
.legend span { display: inline-flex; align-items: center; gap: 6px; }
.legend i { display: inline-block; width: 14px; height: 2px; }
.plot svg { display: block; width: 100%; height: auto; overflow: visible; margin-top: 10px; }
/* charts aren't text: a long press on a phone reads the line instead of selecting labels or opening the copy menu */
.plot, .race, .map, .tip { -webkit-user-select: none; user-select: none; -webkit-touch-callout: none; }
.grid line { stroke: var(--rule); }
.axis text, .endlab { font: 400 11px var(--mono); fill: var(--muted); }
.endlab { fill: var(--ink-2); }
.line { fill: none; stroke-width: 1.5; stroke-linejoin: round; stroke-linecap: round; }
.hover-line { stroke: var(--ink-2); stroke-width: 1; }
.hover-dot { stroke: var(--bg); stroke-width: 2; }

/* a scientific table: names set in the serif, numbers in the mono, hairlines between rows, tracked labels above */
.rank { width: 100%; border-collapse: collapse; margin-top: 12px; font-variant-numeric: tabular-nums; }
.rank th { text-align: right; vertical-align: bottom; font: 400 11px/16px var(--mono); letter-spacing: 0.07em; text-transform: uppercase; color: var(--muted); padding: 6px 10px; border-bottom: var(--hair) solid var(--rule); }
.rank th:nth-child(-n+2) { text-align: left; }
.rank td { padding: 8px 10px; border-bottom: var(--hair) solid var(--rule); text-align: right; font: 400 13px/22px var(--mono); }
.rank td:nth-child(-n+2) { text-align: left; }
.rank td:first-child { color: var(--muted); width: 3em; padding-left: 0; }
.rank th:first-child { padding-left: 0; }
.rank th:last-child, .rank td:last-child { padding-right: 0; }
.rank .nm { font: 400 18px/22px var(--serif); }
.rank .sub { font: 400 12px/16px var(--mono); color: var(--muted); }
.rank .iso { display: none; }
.rank a { text-decoration: none; }
.rank a:hover { text-decoration: underline; text-decoration-color: var(--ink-2); }
.rank tr.sel td { background: var(--tile); }
.rank tr.gap td { color: var(--muted); padding-top: 2px; padding-bottom: 2px; }
.rank.two-names th:nth-child(3), .rank.two-names td:nth-child(3) { text-align: left; }
.rank th .sort { display: inline-flex; align-items: center; gap: 4px; min-height: 22px; padding: 0; background: none; border: 0; cursor: pointer; color: inherit; font: inherit; letter-spacing: inherit; text-transform: inherit; white-space: nowrap; }
.rank th .sort:hover { color: var(--ink); }
.rank th .sort[aria-pressed="true"] { color: var(--ink); }
.rank th .sort .arrow { flex: none; width: 15px; height: 15px; fill: none; stroke: currentColor; stroke-width: 1.3; stroke-linecap: round; stroke-linejoin: round; opacity: 0.3; transition: opacity 120ms; }
.rank th .sort:hover .arrow, .rank th .sort[aria-pressed="true"] .arrow { opacity: 1; }
.rank th .sort-x { justify-content: center; width: 18px; margin-left: 2px; }
.rank th.c-x { white-space: nowrap; }
.rank th select.xcol {
  font: inherit; letter-spacing: inherit; text-transform: uppercase; color: var(--ink); border: 0; padding: 0 13px 0 0; cursor: pointer; text-align: right; appearance: none; -webkit-appearance: none; field-sizing: content;
  background: transparent url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 10 10'%3E%3Cpath d='M2 3.5 5 6.5 8 3.5' fill='none' stroke='%236c6c67' stroke-width='1.1'/%3E%3C/svg%3E") no-repeat right center / 10px;
}
.table-scroll { overflow-x: auto; }

.rows { display: flex; flex-wrap: wrap; align-items: center; gap: 0 22px; margin-top: 12px; font: 400 12px/18px var(--mono); color: var(--muted); }
.rows button { background: none; border: 0; padding: 4px 0; cursor: pointer; color: var(--ink-2); text-decoration: underline; text-decoration-color: var(--border); text-underline-offset: 4px; }
.rows button:hover { color: var(--ink); text-decoration-color: var(--ink); }
.more { margin-top: 14px; background: none; border: 0; border-bottom: var(--hair) solid var(--border); padding: 0 0 1px; cursor: pointer; font: 400 12px/18px var(--mono); }
.more:hover { border-bottom-color: var(--ink); }
.note { margin: 12px 0 0; font-size: 16px; line-height: 1.45; color: var(--ink-2); max-width: 66ch; }
.note a { color: var(--ink-2); }
#count-note { font: 400 12px/18px var(--mono); color: var(--muted); }

.sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

.tiles { display: grid; grid-template-columns: repeat(auto-fit, minmax(170px, 1fr)); gap: 0; margin-top: 26px; border-block: var(--hair) solid var(--rule); }
.tile { position: relative; display: flex; flex-direction: column; gap: 2px; min-width: 0; padding: 14px 16px 14px 0; }
.tile + .tile { border-left: var(--hair) solid var(--rule); padding-left: 16px; }
.tile b { font: 400 30px/1.15 var(--mono); letter-spacing: -0.04em; font-variant-numeric: tabular-nums; }
.tile span { font-size: 16px; line-height: 1.3; color: var(--ink-2); }
.tile i { position: absolute; top: 18px; right: 14px; width: 7px; height: 7px; border-radius: 50%; }
.tiles-more { margin-top: 0; border-top: 0; }  /* a second row of tiles under the first */
#cmp-tiles { grid-template-columns: repeat(3, minmax(0, 1fr)); grid-template-areas: "a b both" "ra rb ."; }
#cmp-tiles .t-a { grid-area: a; } #cmp-tiles .t-b { grid-area: b; } #cmp-tiles .t-both { grid-area: both; }
#cmp-tiles .t-ra { grid-area: ra; border-left: 0; padding-left: 0; } #cmp-tiles .t-rb { grid-area: rb; }
#cmp-tiles .t-ra, #cmp-tiles .t-rb { border-top: var(--hair) solid var(--rule); }

.pairs { display: grid; gap: 12px; margin-top: 14px; }
.pair { display: grid; grid-template-columns: minmax(120px, 230px) minmax(0, 1fr); gap: 4px 16px; align-items: center; }
.pl { font-size: 16px; line-height: 1.25; }
.pv { display: grid; gap: 3px; }
.pb { display: grid; grid-template-columns: minmax(0, 1fr) 4.6em; gap: 8px; align-items: center; }
.track { display: block; height: 6px; }
.track i { display: block; height: 100%; min-width: 2px; }
.pb b { font: 400 12px/14px var(--mono); color: var(--ink-2); text-align: right; font-variant-numeric: tabular-nums; }
.race svg { display: block; width: 100%; height: auto; overflow: visible; }
.race-band { fill: var(--land); }
.race-step { stroke: var(--border); stroke-width: 1; stroke-dasharray: 2 3; }
.race-k, .race-y { font: 400 10.5px var(--mono); fill: var(--muted); }
.race-k { paint-order: stroke; stroke: var(--bg); stroke-width: 4px; stroke-linejoin: round; }  /* readable over the lines */
.race-lines path { fill: none; stroke-width: 2.4; stroke-linecap: round; transition: opacity 120ms, stroke-width 120ms; }
.race-lines path.grey { stroke-width: 1.4; opacity: 0.75; }
.race-lines path.dim { opacity: 0.12; }
.race-lines path.on { stroke-width: 3.2; opacity: 1; }
.race-lead path { fill: none; stroke: var(--muted); stroke-width: 0.8; }
.race-lab { font: 400 11.5px var(--mono); fill: var(--ink); }
.race-lab .race-n { fill: var(--muted); }
.pair.counted .pb { grid-template-columns: minmax(0, 1fr) 7.2em; }  /* "12,345 (37.3%)" */

.search { position: relative; max-width: 560px; margin-top: 30px; }
.search input { width: 100%; font: 400 16px/22px var(--mono); color: var(--ink); background: transparent; border: 0; border-bottom: 1px solid var(--ink-2); border-radius: 0; padding: 8px 0; }
.search input:focus { outline: none; border-bottom-color: var(--ink); box-shadow: 0 1px 0 var(--ink); }
.search input::placeholder { color: var(--muted); }
.suggest { position: absolute; z-index: 4; left: 0; right: 0; top: calc(100% + 4px); margin: 0; padding: 4px; list-style: none; background: var(--bg); border: var(--hair) solid var(--rule); }
.suggest li { display: flex; justify-content: space-between; gap: 12px; padding: 6px 8px; cursor: pointer; }
.suggest li b { font-weight: 400; }
.suggest li span { color: var(--muted); font: 400 12px/20px var(--mono); text-align: right; }
.suggest li[aria-selected="true"], .suggest li:hover { background: var(--tile); }
.profile-name { font-size: 46px; font-weight: 400; letter-spacing: -0.02em; line-height: 1.1; margin: 40px 0 0; text-wrap: balance; }
.where { margin: 6px 0 0; font: 400 12px/18px var(--mono); color: var(--ink-2); }
.cols { display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: 0 32px; }
.cols > * { min-width: 0; }
.sub-block { min-width: 0; }
.sub-block h3 { font-size: 18px; font-weight: 400; color: var(--ink-2); margin: 18px 0 0; }

.post { max-width: 64ch; margin-top: 52px; margin-bottom: 32px; }
/* the blog's charts from the data: a finding as the headline, its chart, and the page it comes from */
.dnotes { margin-top: 64px; }
.dn-head { margin: 0 0 6px; font: 400 12px/18px var(--mono); letter-spacing: 0.08em; text-transform: uppercase; color: var(--muted); }
.dnote { min-width: 0; padding: 18px 0 28px; border-top: var(--hair) solid var(--rule); }
.dnote h3 { max-width: 34ch; margin: 6px 0 10px; font-size: 28px; font-weight: 400; letter-spacing: -0.014em; line-height: 1.15; text-wrap: balance; }
.dn-tag, .dn-cap { margin: 0; font: 400 12px/18px var(--mono); color: var(--muted); }
.dn-cap { margin-top: 10px; }
.dn-cap a { color: var(--ink-2); text-underline-offset: 4px; }
.dn-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(290px, 1fr)); gap: 0 40px; }
.dn-grid .dnote h3 { font-size: 21px; }
.dbars { display: grid; gap: 7px; margin-top: 8px; }
.db { display: grid; grid-template-columns: minmax(0, 8.5em) minmax(0, 1fr) 4.2em; gap: 10px; align-items: center; font-size: 15px; }
.db-l { overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
.db-t { position: relative; height: 11px; }
.db-t::before { content: ""; position: absolute; left: 50%; top: -4px; bottom: -4px; border-left: 1px solid var(--border); }
.db-t i { position: absolute; top: 0; bottom: 0; border-radius: 2px; }
.db-t i.pos { left: 50%; background: var(--ink-2); }
.db-t i.neg { right: 50%; background: var(--rest); opacity: 0.6; }
.db b { font: 400 12px/14px var(--mono); color: var(--ink-2); text-align: right; font-variant-numeric: tabular-nums; }
.post-back { font: 400 12px/18px var(--mono); color: var(--ink-2); text-decoration: none; }
.post-back:hover { color: var(--ink); }
.post-meta { display: flex; flex-wrap: wrap; gap: 0 14px; margin: 26px 0 0; font: 400 12px/18px var(--mono); color: var(--muted); }
/* the blog's index: a contents page. The newest post leads with a chart from it; older ones will follow as plain rows */
.posts { list-style: none; margin: 34px 0 0; padding: 0; border-top: var(--hair) solid var(--rule); }
.post-item { border-bottom: var(--hair) solid var(--rule); }
.post-item > a { display: grid; gap: 8px; align-content: start; padding: 20px 0 22px; color: inherit; text-decoration: none; }
.post-item h2 { margin: 0; font-size: 26px; font-weight: 400; letter-spacing: -0.012em; line-height: 1.15; text-wrap: balance; }
.post-item > a:hover h2 { text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 5px; }
.post-item p { margin: 0; max-width: 58ch; font-size: 17px; line-height: 1.45; color: var(--ink-2); }
.pi-meta, .pi-tags { display: flex; flex-wrap: wrap; gap: 0 14px; font: 400 12px/18px var(--mono); color: var(--muted); }
.pi-tags span + span::before { content: "·"; margin-right: 14px; }
.post-item.featured { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 0 40px; align-items: start; }
.post-item.featured > a, .post-item.featured .pi-fig { padding: 40px 0 44px; }
.post-item.featured > a { gap: 14px; }
.post-item.featured h2 { font-size: 48px; letter-spacing: -0.02em; line-height: 1.05; }
.post-item.featured p { font-size: 20px; }
.pi-fig { margin: 0; padding: 20px 0 22px; min-width: 0; }
.pi-fig .legend { margin-top: 0; }
.pi-fig figcaption { margin-top: 4px; font: 400 12px/18px var(--mono); color: var(--muted); }
.post h1 { font-size: 46px; font-weight: 400; letter-spacing: -0.02em; line-height: 1.1; margin: 8px 0 20px; text-wrap: balance; }
.post h2 { font-size: 22px; margin: 40px 0 8px; }
.post p { font-size: 18px; line-height: 1.55; margin: 12px 0 0; }
.post .plot, .post .pairs { margin-top: 10px; }
.post-end { color: var(--ink-2); }

.method h1 { margin-top: 0; }
.method h2 { scroll-margin-top: 16px; }
.method .intro { color: var(--ink-2); }
.method ul, .method ol { margin: 10px 0 0; padding-left: 20px; }
.method li { font-size: 18px; line-height: 1.5; margin-top: 8px; }
.method li::marker { color: var(--muted); }
.toc { columns: 2 230px; column-gap: 24px; margin-top: 24px; padding: 14px 0; border-block: var(--hair) solid var(--rule); font: 400 12px/20px var(--mono); }
.toc a { display: block; padding: 1px 0; color: var(--ink-2); text-decoration: none; break-inside: avoid; }
.toc a:hover { color: var(--ink); text-decoration: underline; }
.cite { font: 400 0.68em var(--mono); color: var(--muted); text-decoration: none; vertical-align: 0.25em; }
.cite:hover { color: var(--ink); }
.method .refs li { font-size: 16px; line-height: 1.4; color: var(--ink-2); scroll-margin-top: 16px; }
.method .refs li:target { color: var(--ink); }
.refs a { word-break: break-word; }

.how { margin: 48px 0 0; font: 400 12px/18px var(--mono); color: var(--ink-2); }
.how a { color: var(--ink); }
.block .how { margin-top: 6px; }
#view-rankings { padding-bottom: 36px; }
/* the site's name, and beside it when the data was updated, where to get it and where to write */
.foot { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: start; gap: 10px 22px; margin-top: 20px; padding-top: 14px; border-top: var(--hair) solid var(--rule); font: 400 12px/18px var(--mono); color: var(--muted); }
.foot p { margin: 0; }
.foot-mark { color: var(--ink-2); text-decoration: none; }
.foot-mark:hover { color: var(--ink); }
.foot-lines { display: grid; gap: 3px; text-align: right; }
.foot-lines a { color: var(--ink-2); text-underline-offset: 4px; }
.foot-lines a:hover { color: var(--ink); }
.foot-site { display: grid; gap: 10px; }
.foot-nav { display: grid; gap: 3px; }
.foot-nav a { color: var(--ink-2); text-decoration: none; }
.foot-nav a:hover { color: var(--ink); text-decoration: underline; text-underline-offset: 4px; }

.tip { position: fixed; z-index: 30; pointer-events: none; max-width: 260px; padding: 6px 8px; background: var(--tip-bg); color: var(--tip-ink); font: 400 12px/1.45 var(--mono); }
.tip.live { pointer-events: auto; }  /* left open by a tap, so its link takes the next one */
.tip a { color: inherit; text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 3px; }
.tip .hint { opacity: 0.7; }

/* small targets stay small to the eye and grow to the finger */
@media (pointer: coarse) {
  .seg button, .rows button, .views a, .map-btn, .rank th .sort { position: relative; }
  .seg button::before, .rows button::before, .views a::before, .map-btn::before, .rank th .sort::before { content: ""; position: absolute; inset: -7px -3px; }
}

@media (max-width: 640px) {
  .map { margin-left: calc(-1 * max(16px, env(safe-area-inset-left, 0px))); margin-right: calc(-1 * max(16px, env(safe-area-inset-right, 0px))); }
  .map-foot { padding-inline: max(16px, env(safe-area-inset-left, 0px)) max(16px, env(safe-area-inset-right, 0px)); }
  .wrap { padding-block: 16px 36px; }
  .top { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; gap: 8px; }
  .views { gap: 0 18px; }
  .page-title { font-size: 34px; margin-top: 32px; }
  .lede { font-size: 17px; }
  .controls { grid-template-columns: minmax(0, 1fr); gap: 2px; margin-top: 22px; padding: 6px 0; }
  .seg::before { display: none; }
  .seg button { padding: 5px 7px; }
  .seg button:first-of-type { margin-left: -7px; }
  .filters { justify-content: start; gap: 0 18px; }
  .filters .ctl:nth-child(n+3) { justify-self: start; }
  .ctl select { padding-top: 5px; padding-bottom: 5px; }
  h2 { font-size: 20px; }
  .block { margin-top: 40px; }
  .c-whole, .c-x { display: none; }
  .rank th, .rank td { padding-left: 6px; padding-right: 6px; }
  .rank td { font-size: 12.5px; padding-top: 7px; padding-bottom: 7px; }
  .rank td:first-child { width: 1.8em; }
  .rank .nm { font-size: 17px; line-height: 20px; }
  .tile + .tile { border-left: 0; padding-left: 0; }
  .tiles { grid-template-columns: minmax(0, 1fr); }
  .tile { border-top: var(--hair) solid var(--rule); padding: 10px 0; }
  .tile:first-child { border-top: 0; }
  .pair { grid-template-columns: minmax(0, 1fr); }
  .post h1, .profile-name { font-size: 34px; }
  .post { margin-top: 32px; }
  .cols { grid-template-columns: minmax(0, 1fr); }
  #t-net th:first-child, #t-net td:first-child { display: none; }
  #t-net th, #t-net td { padding-left: 4px; padding-right: 4px; }
  #t-net td { font-size: 12px; }
  .foot { display: grid; gap: 10px; }
  .foot-lines { text-align: left; }
  .post-item.featured { grid-template-columns: minmax(0, 1fr); }
  .post-item.featured h2 { font-size: 34px; }
  .post-item.featured > a { padding-top: 24px; } .post-item.featured p { font-size: 18px; }
  #cmp-tiles { grid-template-columns: repeat(2, minmax(0, 1fr)); grid-template-areas: "a b" "ra rb" "both both"; }
  #cmp-tiles .t-b, #cmp-tiles .t-rb { border-left: var(--hair) solid var(--rule); padding-left: 12px; }
  #t-net .c-arr, #t-net .c-left { display: none; }
  .theme { order: 2; margin: 0; }
  .views { order: 3; grid-column: 1 / -1; }
  .post-item.featured > a { padding-bottom: 6px; }
  .post-item.featured .pi-fig { padding-top: 6px; }
}