/* Hallmark · shape: the register, a ledger the visitor can write one line in · genre: editorial · theme: custom · job: buy · idea: "the site is the public register itself: every page is a typed record of real places and who holds them" · vibe: "deadpan civic register, typed, nothing promised"
 * paper: oklch(97.6% 0.005 250) · accent: oklch(57% 0.2 28) · display: Red Hat Mono · body: Hanken Grotesk · hero: one typed sentence and the place search on the left, the live count of claimed places set huge on the right, the world map of the million directly below · nav: wordmark and three plain links · footer: the test-mode note, legal links and the data credit in one band · imagery: the product (the live map and the generated register card) · signature: the live counter over the world map of a million dots
 * axes: light/mono/chromatic-red · posture: restrained, accent only marks claimed places and focus · contrast: pass · fold: pass · v2.0.0 */
/* Hallmark · pre-emit critique: P4 H4 E4 S4 R5 V4 · weakest: P, the deal section spells out what the euro does not buy so the page argues for its own pointlessness */
/* Hallmark · sweep: Floor 0 FAIL · Reflex 0 open, 2 waived (49b, 59) · 1 dismissed (77, share page) · finish-review: in-thread · 2 findings · 2 resolved (default share image text overlap, doubled map attribution icon) */
/* Hallmark · waive 49b · register name links wrap only at 320px for names near the 40-character limit · public names are visitor data up to 40 characters, and wrapping keeps the register table inside a phone screen without clipping a name */
/* Hallmark · waive 59 · the 40px gap is between the hero text and the world map directly under it · the map of the million places is the hero's own picture, so it sits close under the search it answers */
/* Hallmark · dismissed 77 · the share page is the landing for one shared register card, a single record with one action, not the site's landing page */
@import url("./tokens.css");
@import url("./base.css");

@font-face { font-family: "Red Hat Mono"; font-weight: 400; font-display: swap; src: url("/fonts/red-hat-mono-latin-400-normal.woff2") format("woff2"); }
@font-face { font-family: "Red Hat Mono"; font-weight: 500; font-display: swap; src: url("/fonts/red-hat-mono-latin-500-normal.woff2") format("woff2"); }
@font-face { font-family: "Red Hat Mono"; font-weight: 700; font-display: swap; src: url("/fonts/red-hat-mono-latin-700-normal.woff2") format("woff2"); }
@font-face { font-family: "Hanken Grotesk"; font-weight: 400; font-display: swap; src: url("/fonts/hanken-grotesk-latin-400-normal.woff2") format("woff2"); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: "Hanken Grotesk"; font-weight: 600; font-display: swap; src: url("/fonts/hanken-grotesk-latin-600-normal.woff2") format("woff2"); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: "Hanken Grotesk"; font-weight: 400; font-display: swap; src: url("/fonts/hanken-grotesk-latin-ext-400-normal.woff2") format("woff2"); unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; }
@font-face { font-family: "Hanken Grotesk"; font-weight: 600; font-display: swap; src: url("/fonts/hanken-grotesk-latin-ext-600-normal.woff2") format("woff2"); unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; }

body { font-size: 1.0625rem; }
main { display: block; }
.num, td.num, dd.num { font-family: var(--font-display); }

.skip { position: absolute; left: var(--space-md); top: calc(-1 * var(--space-3xl)); display: inline-flex; align-items: center; min-height: 44px; padding: 0 var(--space-md); background: var(--color-ink); color: var(--color-paper); z-index: var(--z-modal); }
.skip:focus-visible { top: var(--space-md); }

/* Header: the wordmark and three links over one rule. */
.site-header { border-bottom: var(--rule-hair) solid var(--color-ink); background: var(--color-paper); }
.header-row { display: flex; align-items: center; justify-content: space-between; gap: var(--space-lg); min-height: 64px; flex-wrap: wrap; }
.wordmark { font-family: var(--font-display); font-weight: 700; font-size: var(--text-lg); text-decoration: none; padding-block: var(--space-xs); }
.nav { display: flex; gap: var(--space-lg); list-style: none; margin: 0; padding: 0; }
.nav a { display: inline-flex; align-items: center; min-height: 44px; text-decoration: none; white-space: nowrap; }
.nav a:hover { text-decoration: underline; }

/* Hero. */
.hero { padding-block: var(--space-2xl) var(--space-xl); }
.hero-grid { display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); gap: var(--gap-columns); align-items: end; }
.hero h1 { font-size: clamp(2.25rem, 3vw + 0.75rem, 3.75rem); font-weight: 500; line-height: 1.06; letter-spacing: var(--tracking-display); max-width: 18ch; }
.lede { font-size: var(--text-lead); line-height: 1.45; max-width: 46ch; margin-top: var(--space-md); color: var(--color-ink-2); }
.counter { text-align: right; font-size: var(--text-lg); color: var(--color-ink-2); }
.counter-n { display: block; font-family: var(--font-display); font-weight: 700; font-size: clamp(4.5rem, 10vw, 10rem); line-height: 1; letter-spacing: -0.04em; color: var(--color-ink); font-variant-numeric: tabular-nums; }

/* Search. */
.search { position: relative; margin-top: var(--space-xl); max-width: 560px; }
.search label { display: block; font-size: var(--text-sm); color: var(--color-muted); margin-bottom: var(--space-xs); }
.search-row { display: flex; gap: var(--space-xs); }
input[type="search"], input[type="text"], select {
  flex: 1 1 auto; min-width: 0; height: 48px; padding: 0 var(--space-md); border: var(--rule-hair) solid var(--color-muted); border-radius: 0; background: var(--color-paper); color: var(--color-ink);
}
input[type="search"]:hover, input[type="text"]:hover, select:hover { border-color: var(--color-ink); }
input[type="search"]:focus-visible, input[type="text"]:focus-visible, select:focus-visible { outline: 2px solid var(--color-focus); outline-offset: 0; }
input::placeholder { color: var(--color-muted); opacity: 1; }
.suggestions { position: absolute; left: 0; right: 0; top: 100%; z-index: var(--z-dropdown); list-style: none; margin: var(--space-2xs) 0 0; padding: 0; background: var(--color-paper); border: var(--rule-hair) solid var(--color-ink); }
.suggestions a { display: flex; justify-content: space-between; gap: var(--space-md); min-height: 44px; align-items: center; padding: 0 var(--space-md); text-decoration: none; }
.suggestions a:hover, .suggestions a[aria-selected="true"] { background: var(--color-paper-2); }

/* Buttons: one style, an ink fill for the primary. */
.button {
  display: inline-flex; align-items: center; justify-content: center; height: 48px; padding: 0 var(--space-lg); white-space: nowrap; cursor: pointer;
  font-family: var(--font-body); font-weight: 600; font-size: var(--text-md); text-decoration: none;
  border: var(--rule-hair) solid var(--color-ink); border-radius: 0; background: var(--color-paper); color: var(--color-ink);
  transition: background-color var(--dur-micro) var(--ease-out), transform var(--dur-micro) var(--ease-out);
}
.button:hover { background: var(--color-paper-2); }
.button:active { transform: translateY(1px); }
.button:focus-visible { outline: 2px solid var(--color-focus); outline-offset: 2px; }
.button:disabled { opacity: 0.5; cursor: not-allowed; }
.button.primary { background: var(--color-ink); color: var(--color-paper); }
.button.primary:hover { background: var(--color-ink-2); }

/* The map. */
.map-section { padding-bottom: var(--space-2xl); }
.map-frame { width: 100%; max-width: var(--container); margin-inline: auto; padding-inline: var(--gutter); }
.map { height: clamp(420px, 68svh, 760px); border: var(--rule-hair) solid var(--color-ink); background: var(--color-paper-2); }
.map-frame.compact { padding-inline: 0; margin-top: var(--space-2xl); }
.map-frame.compact .map { height: clamp(320px, 45svh, 480px); }
.map-noscript { padding: var(--space-md) 0; }
.legend { display: flex; gap: var(--space-lg); list-style: none; margin: var(--space-sm) 0 0; padding: 0; font-size: var(--text-sm); color: var(--color-muted); }
.legend li { display: flex; align-items: center; gap: var(--space-xs); }
.swatch { width: 10px; height: 10px; border-radius: var(--radius-pill); }
.swatch.free { background: var(--color-dot); }
.swatch.claimed { background: var(--color-accent); width: 14px; height: 14px; }
.maplibregl-popup-content { font-family: var(--font-body); border-radius: 0; padding: var(--space-sm) var(--space-md); box-shadow: none; border: var(--rule-hair) solid var(--color-ink); }
.maplibregl-popup-content a { display: inline-flex; align-items: center; min-height: 44px; font-weight: 600; }
.maplibregl-ctrl-group button { width: 44px; height: 44px; }
.maplibregl-popup-close-button { width: 44px; height: 44px; font-size: var(--text-lg); }
.popup-meta { color: var(--color-muted); font-size: var(--text-sm); }

/* Sections. */
.deal, .latest { padding-block: var(--space-3xl); border-top: var(--rule-hair) solid var(--color-ink); }
h2 { font-size: var(--text-section); font-weight: 500; line-height: 1.1; letter-spacing: var(--tracking-display); max-width: 24ch; }
h3 { font-family: var(--font-body); font-size: var(--text-lg); font-weight: 600; }
.deal-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--gap-columns); margin-top: var(--space-xl); }
.ticks, .crosses { list-style: none; margin: var(--space-md) 0 0; padding: 0; }
.ticks li, .crosses li { display: grid; grid-template-columns: 2ch minmax(0, 1fr); gap: var(--space-sm); padding-block: var(--space-sm); border-top: var(--rule-hair) solid var(--color-rule); max-width: 52ch; }
.ticks li::before { content: "+"; font-family: var(--font-display); }
.crosses li::before { content: "×"; font-family: var(--font-display); }
.deal-end { margin-top: var(--space-xl); font-size: var(--text-lead); max-width: 56ch; }

/* The register. */
.register { width: 100%; border-collapse: collapse; margin-top: var(--space-xl); }
.register th { text-align: left; font-weight: 400; font-size: var(--text-sm); color: var(--color-muted); padding: var(--space-xs) var(--space-sm) var(--space-xs) 0; border-bottom: var(--rule-hair) solid var(--color-ink); }
.register td { padding: var(--space-sm) var(--space-sm) var(--space-sm) 0; border-bottom: var(--rule-hair) solid var(--color-rule); vertical-align: baseline; }
.register td a { display: inline-flex; align-items: center; min-height: 44px; text-decoration: none; }
.register td a:hover { text-decoration: underline; }
.cc { color: var(--color-muted); font-size: var(--text-sm); }
.text-link { display: inline-flex; align-items: center; min-height: 44px; margin-top: var(--space-md); font-weight: 600; }
.pager { display: flex; gap: var(--space-lg); margin-top: var(--space-lg); }
.pager a { display: inline-flex; align-items: center; min-height: 44px; }

/* Inner pages. */
.page { padding-block: var(--space-2xl) var(--space-3xl); }
.page h1 { font-size: clamp(2rem, 2.5vw + 1rem, 3.25rem); font-weight: 500; line-height: 1.08; letter-spacing: var(--tracking-display); }
.page .lede { margin-bottom: var(--space-xl); }
.page > p, .page > .search { margin-top: var(--space-lg); }
.explainer { max-width: 65ch; color: var(--color-ink-2); }
.hits { margin: var(--space-xl) 0 0; padding: 0; list-style: none; }
.hits li { display: flex; flex-wrap: wrap; align-items: baseline; gap: var(--space-sm); padding-block: var(--space-sm); border-bottom: var(--rule-hair) solid var(--color-rule); }
.hits a { display: inline-flex; align-items: center; min-height: 44px; font-weight: 600; }
.state { font-size: var(--text-sm); padding: var(--space-3xs) var(--space-xs); border: var(--rule-hair) solid var(--color-ink); }
.state.claimed { background: var(--color-accent); border-color: var(--color-accent); color: var(--color-accent-ink); }
.state.held { border-style: dashed; }

.place-grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: var(--gap-columns); }
.facts { margin: var(--space-xl) 0 0; }
.facts div { display: grid; grid-template-columns: minmax(0, 10rem) minmax(0, 1fr); gap: var(--space-md); padding-block: var(--space-sm); border-top: var(--rule-hair) solid var(--color-rule); }
.facts dt { color: var(--color-muted); }
.facts dd { margin: 0; }
.place-action { padding-top: var(--space-sm); }
.claim-form { display: grid; gap: var(--space-sm); max-width: 480px; padding: var(--space-lg); border: var(--rule-hair) solid var(--color-ink); }
.claim-form h2 { font-size: var(--text-2xl); }
.claim-form label { font-weight: 600; margin-top: var(--space-xs); }
.claim-form .check { display: grid; grid-template-columns: 24px minmax(0, 1fr); gap: var(--space-sm); align-items: start; font-weight: 400; }
.check input { width: 22px; height: 22px; margin: var(--space-3xs) 0 0; accent-color: var(--color-ink); }
.check input:focus-visible { outline: 2px solid var(--color-focus); outline-offset: 2px; }
.help { font-size: var(--text-sm); color: var(--color-muted); }
.error { color: var(--color-error); font-weight: 600; }
.notice { padding: var(--space-sm) var(--space-md); border: var(--rule-hair) solid var(--color-ink); margin-bottom: var(--space-md); }
.claimed-line .who { font-family: var(--font-display); font-size: var(--text-2xl); margin-block: var(--space-sm) var(--space-md); }
.card-img { width: 100%; max-width: 760px; border: var(--rule-hair) solid var(--color-ink); margin-top: var(--space-lg); }
.share { margin-top: var(--space-xl); }
.share h2 { font-size: var(--text-2xl); }
.share-actions { display: flex; flex-wrap: wrap; gap: var(--space-sm); list-style: none; padding: 0; margin: var(--space-md) 0 0; }
.share-url { margin-top: var(--space-sm); color: var(--color-muted); font-size: var(--text-sm); overflow-wrap: anywhere; }
.report { margin-top: var(--space-2xl); max-width: 480px; }
.report summary { cursor: pointer; min-height: 44px; display: flex; align-items: center; }
.report summary:focus-visible { outline: 2px solid var(--color-focus); outline-offset: 2px; }
.report form { display: grid; gap: var(--space-sm); margin-top: var(--space-sm); }
.prose section { margin-top: var(--space-xl); }
.prose h2 { font-size: var(--text-xl); }
.prose p { margin-top: var(--space-xs); }

/* Footer. */
.site-footer { border-top: var(--rule-hair) solid var(--color-ink); padding-block: var(--space-xl); font-size: var(--text-sm); color: var(--color-muted); }
.footer-row { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: var(--space-md) var(--gap-columns); }
.footer-links { display: flex; gap: var(--space-lg); list-style: none; margin: 0; padding: 0; }
.footer-links a { display: inline-flex; align-items: center; min-height: 44px; color: var(--color-ink); }
.footer-credit { grid-column: 1 / -1; }

@media (max-width: 60rem) {
  .hero-grid, .place-grid, .deal-grid { grid-template-columns: minmax(0, 1fr); }
  .counter { text-align: left; }
  .footer-row { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 40rem) {
  .hero { padding-block: var(--space-xl) var(--space-lg); }
  .search-row { flex-direction: column; }
  .maplibregl-ctrl-attrib-inner a { display: inline-flex; align-items: center; min-height: 44px; }
  .nav { gap: var(--space-md); }
  .register th:nth-child(4), .register td:nth-child(4) { display: none; }
  .facts div { grid-template-columns: minmax(0, 1fr); gap: var(--space-2xs); }
}
.place-mark { width: 24px; height: 24px; border: 3px solid var(--color-accent); border-radius: var(--radius-pill); }
.nav a, .footer-links a, .pager a, .register td a, .hits a, .text-link, .maplibregl-popup-content a { min-width: 44px; justify-content: center; }