/* isometricmap.com
   A dark technical atlas: 1px hairlines, bevelled panels, dense pixel data.
   Every face is a pixel face and every size is a multiple of its design grid —
   8px Press Start 2P for chrome and data, 16px Silkscreen 700 for prose. */

/* ── tokens ───────────────────────────────────────────── */

:root {
  /* chrome */
  --bg: #111111;
  --panel: #1b1b1b;
  --panel-2: #222222;
  --panel-3: #2b2b2b;
  --panel-4: #343434;
  --line: #363636;
  --line-2: #282828;
  --hi: #454545;
  --lo: #0b0b0b;

  /* text */
  --text: #dcdcdc;
  --text-2: #9b9b9b;
  --text-3: #6d6d6d;

  /* accents */
  --amber: #e3b53f;
  --amber-d: #9d7c22;
  --green: #66b566;
  --red: #cd5a42;
  --blue: #5fa2e6;

  /* the map keeps its own bright palette — it is the only colour in the
     interface, and that is what makes the chrome read as chrome */
  --sea: #3f9ad6;
  --grass: #7cc464;
  --leaf: #2f6b3c;

  /* two pixel faces, each on its own grid:
     --ui     Press Start 2P @ 8px — the dense technical face. 1px strokes,
              real lowercase, 8px advance. Chrome, tables, meta.
     --pixel  Silkscreen 700 @ 16px and up — prose and titles. Its lowercase
              are small caps, so body copy is set in caps by design. */
  --ui: "Press Start 2P", "Courier New", monospace;
  --pixel: "Silkscreen", "Courier New", monospace;

  --fs-ui: 8px;
  --fs-body: 16px;
  --fs-h3: 24px;
  --fs-h2: 32px;

  /* --head-bar is the row height the markup is built at; --head-h is the
     measured total (row + border) that everything below the header reads.
     They are separate on purpose: writing the measured value back into the
     height that produced it makes the header grow 1px per resize. */
  --head-bar: 40px;
  --head-h: 41px;
  --status-h: 28px;
  --wrap: 1360px;
}

/* ── base ─────────────────────────────────────────────── */

*,
*::before,
*::after {
  box-sizing: border-box;
}

html {
  scroll-behavior: smooth;
  -webkit-text-size-adjust: 100%;
}

body {
  margin: 0;
  background-color: var(--bg);
  /* a 32px lattice: the substrate the whole interface is drawn on */
  background-image: linear-gradient(rgba(255, 255, 255, 0.022) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255, 255, 255, 0.022) 1px, transparent 1px);
  background-size: 32px 32px;
  color: var(--text);
  font-family: var(--pixel);
  font-size: var(--fs-body);
  font-weight: 700;
  line-height: 1.7;
}

/* every pixel face is drawn at 700; 400 is the 1px cut and reads as a hairline */
* {
  font-weight: 700;
}

.field input {
  font-weight: 400;
}

img {
  max-width: 100%;
  display: block;
}

a {
  color: var(--blue);
  text-decoration: none;
}

a:hover {
  color: #8fc0f2;
}

:focus-visible {
  outline: 2px solid var(--amber);
  outline-offset: 1px;
}

.wrap {
  /* width:100% matters: .wrap is a flex item inside the column-flex main, and
     an auto cross-axis margin cancels `align-items: stretch`, which left the
     table shrink-fitting to its own content instead of filling the page */
  width: 100%;
  max-width: var(--wrap);
  margin: 0 auto;
  padding: 0 16px;
}

.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}

.skip {
  position: absolute;
  left: -9999px;
  top: 0;
  z-index: 300;
  padding: 8px 10px;
  background: var(--amber);
  color: #111;
  font-family: var(--ui);
  font-size: var(--fs-ui);
}
.skip:focus {
  left: 8px;
  top: 8px;
}

/* the shared panel recipe: 1px border, 1px bevel, no soft shadows anywhere */
.site-head,
.side,
.toolbar,
.table,
.rule,
.step,
.submit-in,
.site-foot {
  background: var(--panel);
  border: 1px solid var(--line);
  box-shadow: inset 1px 1px 0 var(--hi), inset -1px -1px 0 var(--lo);
}

/* ── top chrome ───────────────────────────────────────── */

.site-head {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 80;
  border-width: 0 0 1px;
  border-color: var(--line);
  box-shadow: inset 0 1px 0 var(--hi), 0 1px 0 var(--lo);
  background: var(--panel-2);
}

.head-in {
  max-width: none;
  height: var(--head-bar);
  display: flex;
  align-items: stretch;
  gap: 0;
  padding: 0 10px;
}

.brand {
  display: flex;
  align-items: center;
  gap: 8px;
  padding-right: 12px;
  margin-right: 12px;
  border-right: 1px solid var(--line);
  color: var(--text);
  flex: none;
}
.brand:hover {
  color: #fff;
}

.brand-mark {
  width: 16px;
  height: 16px;
  flex: none;
  image-rendering: pixelated;
}

.brand-word {
  font-family: var(--ui);
  font-size: var(--fs-ui);
  letter-spacing: 0;
  text-transform: uppercase;
  white-space: nowrap;
}

.head-nav {
  display: flex;
  align-items: stretch;
  gap: 1px;
  margin-right: auto;
}

/* a menu item is a small bevelled plate, not bare text */
.nav-tab {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 0 10px;
  border: 1px solid transparent;
  font-family: var(--ui);
  font-size: var(--fs-ui);
  line-height: 1;
  letter-spacing: 0;
  text-transform: uppercase;
  text-decoration: none;
  color: var(--text-2);
  white-space: nowrap;
  transition: background 0.1s, color 0.1s;
}

.nav-tab svg {
  width: 8px;
  height: 8px;
  flex: none;
  shape-rendering: crispEdges;
}

.nav-tab:hover {
  background: var(--panel-3);
  color: var(--text);
  border-color: var(--line);
}

.nav-tab.is-on {
  background: var(--amber);
  border-color: var(--amber-d);
  color: #141414;
  box-shadow: inset 1px 1px 0 #f0cd6d, inset -1px -1px 0 var(--amber-d);
}

.nav-tab.is-on svg {
  color: #141414;
}

/* ── buttons ──────────────────────────────────────────── */

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  padding: 0 10px;
  height: 26px;
  border: 1px solid var(--line);
  background: var(--panel-3);
  box-shadow: inset 1px 1px 0 var(--hi), inset -1px -1px 0 var(--lo);
  color: var(--text);
  font-family: var(--ui);
  font-size: var(--fs-ui);
  line-height: 1;
  letter-spacing: 0;
  text-transform: uppercase;
  text-decoration: none;
  cursor: pointer;
  white-space: nowrap;
  transition: background 0.1s, color 0.1s;
}

.btn:hover {
  background: var(--panel-4);
  color: #fff;
}

.btn:active {
  box-shadow: inset 1px 1px 0 var(--lo), inset -1px -1px 0 var(--hi);
}

.btn-sun,
.btn-primary {
  background: var(--amber);
  border-color: var(--amber-d);
  color: #141414;
  box-shadow: inset 1px 1px 0 #f0cd6d, inset -1px -1px 0 var(--amber-d);
}

.btn-sun:hover,
.btn-primary:hover {
  background: #f0c65a;
  color: #141414;
}

.btn-wide {
  width: 100%;
  height: 32px;
}

.head-cta {
  flex: none;
  margin-left: 10px;
  align-self: center;
}

/* ── status bar ───────────────────────────────────────── */

.status {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 80;
  height: var(--status-h);
  background: var(--panel-2);
  border-top: 1px solid var(--line);
  box-shadow: inset 0 1px 0 var(--hi);
}

.status-in {
  display: flex;
  align-items: center;
  gap: 18px;
  height: 100%;
  padding: 0 10px;
  font-family: var(--ui);
  font-size: var(--fs-ui);
  color: var(--text-3);
  white-space: nowrap;
  overflow: hidden;
}

.status-in b {
  color: var(--text);
}

.status-sp {
  margin-left: auto;
}

.status-k {
  color: var(--amber);
}

/* ── map page ─────────────────────────────────────────── */

body.map-page {
  overflow: hidden;
}

.map-shell {
  position: fixed;
  top: var(--head-h);
  left: 0;
  right: 0;
  bottom: var(--status-h);
  display: grid;
  grid-template-columns: 1fr 288px;
  background: var(--bg);
}

.map-stage {
  position: relative;
  overflow: hidden;
  background: var(--sea);
  cursor: grab;
  touch-action: none;
  -webkit-user-select: none;
  user-select: none;
  border-right: 1px solid var(--line);
}

.map-stage.is-dragging {
  cursor: grabbing;
}

#worldCanvas {
  position: absolute;
  inset: 0;
  display: block;
}

.map-rect {
  position: absolute;
  pointer-events: none;
}

/* ── pins ─────────────────────────────────────────────── */

.pins {
  position: absolute;
  inset: 0;
}

.pin {
  position: absolute;
  z-index: 1;
  width: 8px;
  height: 8px;
  margin: -4px 0 0 -4px;
  padding: 0;
  border: 1px solid #141414;
  background: var(--red);
  box-shadow: inset 1px 1px 0 #ff8a70;
  pointer-events: auto;
  cursor: pointer;
}

.pin:hover,
.pin:focus-visible {
  background: var(--amber);
  box-shadow: inset 1px 1px 0 #ffe08a;
  z-index: 3;
}

.pin-labels {
  position: absolute;
  inset: 0;
  /* above the pins: the pins are appended after this box, so without a
     stacking order of its own the marker squares punch through the text */
  z-index: 2;
  pointer-events: none;
}

.pin-label {
  position: absolute;
  transform: translateY(-50%);
  padding: 2px 4px;
  background: #141414;
  border: 1px solid var(--line);
  font-family: var(--ui);
  font-size: var(--fs-ui);
  line-height: 1.4;
  color: var(--text);
  white-space: nowrap;
  text-transform: uppercase;
  pointer-events: none;
}

.pin-label em {
  font-style: normal;
  color: var(--amber);
}

.pin-label.on {
  background: var(--amber);
  border-color: var(--amber-d);
  color: #141414;
}

.pin-label.on em {
  color: #4a3a08;
}

.pin-label.is-out {
  display: none;
}

.pin-card {
  position: absolute;
  z-index: 5;
  display: flex;
  gap: 8px;
  align-items: flex-start;
  width: 248px;
  padding: 8px;
  background: var(--panel-2);
  border: 1px solid var(--line);
  box-shadow: inset 1px 1px 0 var(--hi), inset -1px -1px 0 var(--lo);
  pointer-events: none;
}

.pin-card img {
  width: 52px;
  height: 39px;
  flex: none;
  border: 1px solid var(--line);
  image-rendering: pixelated;
}

.pc-body {
  min-width: 0;
}

/* the author display:flex above beats the UA [hidden] rule, so an empty card
   would otherwise sit on the map as a bare panel */
.pin-card[hidden] {
  display: none;
}

/* the card hangs off the pin, and flips above it near the top of the map */
.pin-card {
  transform: translate(9px, 9px);
}

.pin-card.below {
  transform: translate(9px, calc(-100% - 9px));
}

.pin-card b {
  display: block;
  font-family: var(--pixel);
  font-size: var(--fs-body);
  line-height: 1.2;
}

.pin-card .pc-meta {
  display: block;
  margin: 4px 0 0;
  font-family: var(--ui);
  font-size: var(--fs-ui);
  line-height: 1.6;
  color: var(--text-2);
}

.pin-card .pc-go {
  display: block;
  margin: 6px 0 0;
  font-family: var(--ui);
  font-size: var(--fs-ui);
  color: var(--amber);
}

/* ── tool rail ────────────────────────────────────────── */

.tool-rail {
  position: absolute;
  top: 10px;
  left: 10px;
  display: flex;
  flex-direction: column;
  gap: 4px;
  z-index: 4;
}

.tool-btn {
  display: grid;
  place-items: center;
  width: 26px;
  height: 26px;
  padding: 0;
  border: 1px solid var(--line);
  background: var(--panel-2);
  box-shadow: inset 1px 1px 0 var(--hi), inset -1px -1px 0 var(--lo);
  color: var(--text);
  cursor: pointer;
}

.tool-btn:hover {
  background: var(--panel-3);
  color: #fff;
}

.tool-btn:active {
  box-shadow: inset 1px 1px 0 var(--lo), inset -1px -1px 0 var(--hi);
}

.tool-btn svg {
  width: 8px;
  height: 8px;
  shape-rendering: crispEdges;
}

/* ── side panel ───────────────────────────────────────── */

.side {
  display: flex;
  flex-direction: column;
  min-height: 0;
  border-width: 0;
  border-left: 0;
  box-shadow: none;
  background: var(--panel);
}

.side-head {
  display: flex;
  align-items: center;
  gap: 8px;
  height: 24px;
  padding: 0 8px;
  border-bottom: 1px solid var(--line);
  background: var(--panel-3);
  box-shadow: inset 0 1px 0 var(--hi);
  font-family: var(--ui);
  font-size: var(--fs-ui);
  color: var(--text-2);
  text-transform: uppercase;
  flex: none;
}

.side-head b {
  color: var(--amber);
}

.side-head .side-count {
  margin-left: auto;
  color: var(--text-3);
}

.side-list {
  flex: 1;
  min-height: 0;
  overflow-y: auto;
  scrollbar-width: thin;
  scrollbar-color: var(--panel-4) var(--panel);
}

.side-list::-webkit-scrollbar {
  width: 8px;
}
.side-list::-webkit-scrollbar-track {
  background: var(--panel);
}
.side-list::-webkit-scrollbar-thumb {
  background: var(--panel-4);
  border: 1px solid var(--line);
}

.city-row {
  display: grid;
  grid-template-columns: 22px 1fr auto;
  align-items: center;
  gap: 6px;
  width: 100%;
  padding: 4px 8px;
  border: 0;
  border-bottom: 1px solid var(--line-2);
  background: transparent;
  color: var(--text);
  font-family: var(--ui);
  font-size: var(--fs-ui);
  line-height: 1.5;
  text-align: left;
  cursor: pointer;
}

.city-row:nth-child(odd) {
  background: rgba(255, 255, 255, 0.016);
}

.city-row:hover {
  background: var(--panel-3);
}

.city-row.is-on {
  background: var(--amber);
  color: #141414;
}

.cr-idx {
  color: var(--text-3);
}

.city-row.is-on .cr-idx {
  color: #5a4708;
}

.cr-name {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  text-transform: uppercase;
}

.cr-tag {
  color: var(--text-3);
}

.city-row.is-on .cr-tag {
  color: #3d2f05;
}

/* ── interior pages ───────────────────────────────────── */

body.sub {
  padding-top: var(--head-h);
  padding-bottom: var(--status-h);
  /* the interior pages are short; without this the footer floats in the
     middle of the viewport with a void under it */
  display: flex;
  flex-direction: column;
  min-height: 100vh;
}

body.sub > main {
  flex: 1 0 auto;
  display: flex;
  flex-direction: column;
}

body.sub > main > .page-head {
  flex: none;
}

/* A short page would otherwise leave a 250px void between the content and the
   footer, so the band grows and the footer sits at the bottom. Only the submit
   panel is centred inside it — it has no page head, so nothing anchors it to
   the top. `safe` keeps long pages (cities) anchored when they overflow. */
body.sub .section {
  flex: 1 0 auto;
}

body.sub .submit {
  flex: 1 0 auto;
  display: flex;
  flex-direction: column;
  justify-content: safe center;
}

.page-head {
  border-bottom: 1px solid var(--line);
  background: var(--panel-2);
  box-shadow: inset 0 1px 0 var(--hi);
  padding: 20px 0 18px;
}

.page-head .wrap {
  display: flex;
  align-items: flex-end;
  gap: 28px;
}

.page-head-main {
  flex: 1;
  min-width: 0;
}

.eyebrow {
  display: flex;
  align-items: center;
  gap: 6px;
  margin: 0 0 10px;
  font-family: var(--ui);
  font-size: var(--fs-ui);
  line-height: 1.6;
  letter-spacing: 0;
  text-transform: uppercase;
  color: var(--amber);
}

.tick {
  width: 6px;
  height: 6px;
  background: var(--amber);
  flex: none;
}

.page-head h1 {
  margin: 0;
  font-family: var(--pixel);
  font-size: var(--fs-h2);
  font-weight: 700;
  line-height: 1.1;
  color: #fff;
}

.page-sub {
  margin: 12px 0 0;
  max-width: 74ch;
  font-size: var(--fs-body);
  line-height: 1.6;
  color: var(--text-2);
}

.page-head .specimen {
  flex: none;
  margin: 0;
  padding: 4px;
  background: var(--panel);
  border: 1px solid var(--line);
  box-shadow: inset 1px 1px 0 var(--hi), inset -1px -1px 0 var(--lo);
}

.specimen canvas {
  display: block;
  /* 1:1 with the bitmap — any scale factor between 0.5 and 2 makes a pixel
     grid step irregularly, and this is the one place the art is shown large */
  width: 220px;
  height: 132px;
  image-rendering: pixelated;
}

.specimen figcaption {
  margin-top: 4px;
  font-family: var(--ui);
  font-size: var(--fs-ui);
  color: var(--text-3);
  text-transform: uppercase;
}

/* ── section shell ────────────────────────────────────── */

.section {
  padding: 18px 0 26px;
}

/* ── toolbar ──────────────────────────────────────────── */

.toolbar {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 6px;
  padding: 6px;
  margin-bottom: 10px;
  background: var(--panel-2);
}

.search {
  display: flex;
  align-items: center;
  gap: 6px;
  flex: 1 1 220px;
  max-width: 300px;
  height: 24px;
  padding: 0 6px;
  background: var(--bg);
  border: 1px solid var(--line);
  box-shadow: inset 1px 1px 0 var(--lo);
}

.search:focus-within {
  border-color: var(--amber);
}

.search-ico {
  width: 8px;
  height: 8px;
  flex: none;
  color: var(--text-3);
  shape-rendering: crispEdges;
}

.search input {
  flex: 1;
  min-width: 0;
  border: 0;
  background: transparent;
  color: var(--text);
  font-family: var(--ui);
  font-size: var(--fs-ui);
  outline: none;
}

.search input::placeholder {
  color: var(--text-3);
}

.search kbd {
  font-family: var(--ui);
  font-size: var(--fs-ui);
  color: var(--text-3);
  border: 1px solid var(--line);
  padding: 0 3px;
  line-height: 1.4;
}

.chips {
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
}

.chip {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  height: 24px;
  padding: 0 7px;
  border: 1px solid var(--line);
  background: var(--panel-3);
  box-shadow: inset 1px 1px 0 var(--hi), inset -1px -1px 0 var(--lo);
  color: var(--text-2);
  font-family: var(--ui);
  font-size: var(--fs-ui);
  line-height: 1;
  text-transform: uppercase;
  cursor: pointer;
  white-space: nowrap;
}

.chip:hover {
  background: var(--panel-4);
  color: var(--text);
}

.chip[aria-pressed="true"] {
  background: var(--amber);
  border-color: var(--amber-d);
  color: #141414;
  box-shadow: inset 1px 1px 0 #f0cd6d, inset -1px -1px 0 var(--amber-d);
}

.chip .n {
  color: var(--text-3);
}

.chip[aria-pressed="true"] .n {
  color: #5a4708;
}

.sort {
  display: flex;
  align-items: center;
  gap: 5px;
  margin-left: auto;
  font-family: var(--ui);
  font-size: var(--fs-ui);
  color: var(--text-3);
  text-transform: uppercase;
}

.sort select {
  height: 24px;
  padding: 0 4px;
  border: 1px solid var(--line);
  background: var(--panel-3);
  color: var(--text);
  font-family: var(--ui);
  font-size: var(--fs-ui);
  text-transform: uppercase;
  cursor: pointer;
}

/* ── result bar ───────────────────────────────────────── */

.result-bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 6px 12px;
  padding: 0 0 8px;
  border-bottom: 1px solid var(--line);
  margin-bottom: 10px;
  font-family: var(--ui);
  font-size: var(--fs-ui);
}

.result-count {
  margin: 0;
  color: var(--text-3);
  text-transform: uppercase;
}

.random {
  border: 1px solid var(--line);
  background: var(--panel-2);
  color: var(--amber);
  font-family: var(--ui);
  font-size: var(--fs-ui);
  padding: 4px 7px;
  text-transform: uppercase;
  cursor: pointer;
  white-space: nowrap;
}

.random:hover {
  background: var(--panel-3);
}

/* ── data table ───────────────────────────────────────── */

.table {
  padding: 0;
  background: var(--panel);
}

.thead,
.trow {
  display: grid;
  grid-template-columns: 52px minmax(120px, 1.2fr) minmax(90px, 0.9fr) minmax(120px, 1.4fr) minmax(90px, 0.9fr) 78px 62px;
  align-items: center;
  gap: 10px;
  padding: 0 8px;
}

.thead {
  height: 22px;
  background: var(--panel-3);
  border-bottom: 1px solid var(--line);
  box-shadow: inset 0 1px 0 var(--hi);
  font-family: var(--ui);
  font-size: var(--fs-ui);
  color: var(--text-3);
  text-transform: uppercase;
  position: sticky;
  top: var(--head-h);
  z-index: 2;
}

.trow {
  padding-top: 5px;
  padding-bottom: 5px;
  border-bottom: 1px solid var(--line-2);
  color: var(--text);
  text-decoration: none;
  cursor: pointer;
}

.trow:nth-child(even) {
  background: rgba(255, 255, 255, 0.016);
}

.trow:hover {
  background: var(--panel-3);
  color: #fff;
}

.thumb {
  width: 52px;
  height: 39px;
  object-fit: cover;
  image-rendering: pixelated;
  border: 1px solid var(--line);
  background: #0d0d0d;
}

.tcity {
  font-family: var(--pixel);
  font-size: var(--fs-body);
  line-height: 1.2;
  color: var(--text);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.trow:hover .tcity {
  color: #fff;
}

.tmeta {
  font-family: var(--ui);
  font-size: var(--fs-ui);
  color: var(--text-2);
  text-transform: uppercase;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.topen {
  font-family: var(--ui);
  font-size: var(--fs-ui);
  color: var(--amber);
  text-transform: uppercase;
  text-align: right;
}

.empty {
  padding: 24px 8px;
  font-family: var(--ui);
  font-size: var(--fs-ui);
  color: var(--text-3);
  text-transform: uppercase;
}

/* ── lineage steps ────────────────────────────────────── */

.steps {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: 10px;
  grid-template-columns: repeat(3, 1fr);
}

.step {
  padding: 12px;
  position: relative;
}

.step-when {
  display: inline-block;
  margin: 0 0 10px;
  padding: 2px 5px;
  border: 1px solid var(--line);
  background: var(--panel-2);
  font-family: var(--ui);
  font-size: var(--fs-ui);
  color: var(--amber);
  text-transform: uppercase;
  line-height: 1.4;
}

.step h2 {
  margin: 0 0 8px;
  font-family: var(--pixel);
  font-size: var(--fs-h3);
  line-height: 1.15;
  color: #fff;
}

.step p {
  margin: 0;
  font-size: var(--fs-body);
  line-height: 1.6;
  color: var(--text-2);
}

.step a {
  color: var(--blue);
  text-decoration: underline;
  text-underline-offset: 2px;
}

.family {
  margin-top: 10px;
  padding: 12px;
  background: var(--panel);
  border: 1px solid var(--line);
  box-shadow: inset 1px 1px 0 var(--hi), inset -1px -1px 0 var(--lo);
}

.family-k {
  margin: 0 0 10px;
  font-family: var(--pixel);
  font-size: var(--fs-h3);
  color: #fff;
}

.mono {
  font-family: var(--ui);
  font-size: var(--fs-body);
  color: var(--amber);
}

.family-list {
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.family-list li {
  padding: 3px 6px;
  border: 1px solid var(--line);
  background: var(--panel-2);
  font-family: var(--ui);
  font-size: var(--fs-ui);
  color: var(--text-2);
  text-transform: uppercase;
}

/* ── rules ────────────────────────────────────────────── */

.rules {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 10px;
}

.rule {
  padding: 12px;
}

.rule-num {
  display: grid;
  place-items: center;
  width: 20px;
  height: 20px;
  margin: 0 0 10px;
  background: var(--amber);
  border: 1px solid var(--amber-d);
  box-shadow: inset 1px 1px 0 #f0cd6d;
  color: #141414;
  font-family: var(--ui);
  font-size: var(--fs-ui);
  line-height: 1;
}

.rule h2 {
  margin: 0 0 8px;
  font-family: var(--pixel);
  font-size: var(--fs-h3);
  line-height: 1.15;
  color: #fff;
}

.rule p {
  margin: 0;
  font-size: var(--fs-body);
  line-height: 1.6;
  color: var(--text-2);
}

/* the operational detail under each rule: same card, quieter voice */
.rule p.rule-note {
  margin-top: 12px;
  padding-top: 10px;
  border-top: 1px solid var(--line-2);
  font-family: var(--ui);
  font-size: var(--fs-ui);
  line-height: 1.9;
  color: var(--text-3);
  text-transform: uppercase;
}

/* ── submit ───────────────────────────────────────────── */

.submit {
  padding: 18px 0 26px;
}

/* a form is read, not scanned — narrower than the table pages so the two
   columns stay in one glance instead of stretching into a letterbox */
.submit .wrap {
  max-width: 1080px;
}

.submit-in {
  display: grid;
  grid-template-columns: 1.1fr 0.9fr;
  gap: 24px;
  padding: 20px;
  /* both columns hug their content; stretching the form leaves a dead panel
     under the last field */
  align-items: start;
}

.submit-copy .eyebrow {
  color: var(--amber);
}

.submit-copy h1 {
  margin: 0 0 12px;
  font-family: var(--pixel);
  font-size: var(--fs-h2);
  line-height: 1.1;
  color: #fff;
}

.submit-copy p {
  margin: 0 0 12px;
  font-size: var(--fs-body);
  line-height: 1.6;
  color: var(--text-2);
  max-width: 46ch;
}

.submit-copy p.submit-alt {
  font-family: var(--ui);
  font-size: var(--fs-ui);
  line-height: 1.8;
  color: var(--text-3);
  text-transform: uppercase;
}

.submit-alt a {
  color: var(--amber);
  text-decoration: underline;
  text-underline-offset: 2px;
}

.submit-form {
  padding: 12px;
  background: var(--bg);
  border: 1px solid var(--line);
  box-shadow: inset 1px 1px 0 var(--lo);
}

.field {
  margin-bottom: 10px;
}

.field label {
  display: block;
  margin-bottom: 5px;
  font-family: var(--ui);
  font-size: var(--fs-ui);
  color: var(--text-2);
  text-transform: uppercase;
}

.field label span {
  color: var(--text-3);
  font-family: var(--ui);
  font-size: var(--fs-ui);
}

.field input {
  width: 100%;
  height: 28px;
  padding: 0 6px;
  border: 1px solid var(--line);
  background: var(--panel);
  color: var(--text);
  font-family: var(--ui);
  font-size: var(--fs-ui);
  outline: none;
}

.field input:focus {
  border-color: var(--amber);
}

.field input::placeholder {
  color: var(--text-3);
}

.form-note {
  margin: 10px 0 0;
  font-family: var(--ui);
  font-size: var(--fs-ui);
  line-height: 1.7;
  color: var(--text-3);
  text-transform: uppercase;
}

.thanks {
  margin: 0 0 8px;
  font-family: var(--pixel);
  font-size: var(--fs-body);
  color: var(--green);
}

/* ── footer ───────────────────────────────────────────── */

.site-foot {
  margin-top: 10px;
  border-width: 1px 0 0;
  box-shadow: inset 0 1px 0 var(--hi);
  background: var(--panel-2);
  padding: 20px 0 26px;
}

.foot-grid {
  display: grid;
  grid-template-columns: 1.6fr 0.7fr 0.9fr 1.1fr;
  gap: 24px;
}

.foot-brand .brand-mark {
  width: 16px;
  height: 16px;
  margin-bottom: 10px;
}

.foot-brand p {
  margin: 0;
  font-family: var(--ui);
  font-size: var(--fs-ui);
  line-height: 1.9;
  color: var(--text-3);
  text-transform: uppercase;
}

.foot-col h4 {
  margin: 0 0 10px;
  font-family: var(--ui);
  font-size: var(--fs-ui);
  color: var(--amber);
  text-transform: uppercase;
}

.foot-col a,
.foot-col p {
  display: block;
  margin: 0 0 7px;
  font-family: var(--ui);
  font-size: var(--fs-ui);
  line-height: 1.6;
  color: var(--text-2);
  text-transform: uppercase;
}

.foot-col a:hover {
  color: var(--text);
}

.foot-col p.foot-stamp {
  color: var(--text-3);
}

/* ── reveal ───────────────────────────────────────────── */

html.js .reveal {
  opacity: 0;
  transform: translateY(4px);
  transition: opacity 0.24s, transform 0.24s;
}

html.js .reveal.in {
  opacity: 1;
  transform: none;
}

/* ── responsive ───────────────────────────────────────── */

@media (max-width: 1180px) {
  .map-shell {
    grid-template-columns: 1fr 240px;
  }
  .thead,
  .trow {
    /* the maker is the first thing to go: it is the column a reader can do
       without, and dropping it keeps six cells for six columns */
    grid-template-columns: 52px minmax(110px, 1.2fr) minmax(90px, 1fr) minmax(90px, 0.9fr) 74px 58px;
  }
  .thead .tmaker,
  .trow .tmaker {
    display: none;
  }
  .foot-grid {
    grid-template-columns: 1fr 1fr;
    gap: 20px;
  }
}

@media (max-width: 1000px) {
  .submit-in {
    grid-template-columns: 1fr;
    gap: 18px;
  }
  .steps,
  .rules {
    grid-template-columns: 1fr;
  }
  .page-head .specimen {
    display: none;
  }
}

/* below 900px the menu cannot stay inline, so the header becomes two rows.
   The type is not shrunk — 8px is already the smallest whole step. */
@media (max-width: 900px) {
  :root {
    --head-bar: 66px;
  }
  .head-in {
    flex-wrap: wrap;
    padding: 0 8px;
  }
  .brand {
    height: 34px;
    margin-right: auto;
    border-right: 0;
    padding-right: 0;
  }
  .head-cta {
    height: 24px;
    margin-left: 8px;
    align-self: center;
  }
  .head-nav {
    order: 3;
    width: 100%;
    height: 32px;
    margin-right: 0;
    border-top: 1px solid var(--line);
  }
  .nav-tab {
    flex: 1;
    justify-content: center;
    padding: 0 4px;
  }
  .map-shell {
    grid-template-columns: 1fr;
  }
  .side {
    display: none;
  }
  .map-stage {
    border-right: 0;
  }
}

@media (max-width: 760px) {
  .thead,
  .trow {
    grid-template-columns: 40px 1fr 58px;
    gap: 8px;
  }
  .thead .tproj,
  .thead .tmaker,
  .thead .tdate,
  .thead .tcountry,
  .trow .tproj,
  .trow .tmaker,
  .trow .tdate,
  .trow .tcountry {
    display: none;
  }
  .thumb {
    width: 40px;
    height: 30px;
  }
  .status-in {
    gap: 10px;
  }
  .status-in .status-opt {
    display: none;
  }
  .foot-grid {
    grid-template-columns: 1fr;
    gap: 18px;
  }
  .page-head h1,
  .submit-copy h1 {
    font-size: var(--fs-h3);
  }
}

@media (prefers-reduced-motion: reduce) {
  html {
    scroll-behavior: auto;
  }
  *,
  *::before,
  *::after {
    animation-duration: 0.001ms !important;
    transition-duration: 0.001ms !important;
  }
}

/* ── atlas redesign: warm paper, quiet chrome, map-first ── */
:root {
  --bg: #f4f1e8;
  --panel: #fbf9f2;
  --panel-2: #f8f5ec;
  --panel-3: #eeeade;
  --panel-4: #e5e0d2;
  --line: #d8d1c0;
  --line-2: #e8e3d7;
  --hi: #fffdf7;
  --lo: #d9d3c5;
  --text: #263d3a;
  --text-2: #62736b;
  --text-3: #89958b;
  --amber: #b66e4e;
  --amber-d: #94563d;
  --green: #748c68;
  --red: #b66e4e;
  --blue: #527d7a;
  --sea: #a9c9c7;
  --grass: #91aa78;
  --leaf: #496b52;
}
body { background-color: var(--bg); background-image: none; color: var(--text); }
.site-head { background: rgba(248,245,236,.97); box-shadow: 0 1px 0 var(--line); }
.head-in { width: 100%; max-width: var(--wrap); margin: 0 auto; padding: 0 16px; }
.brand-word { font-family: var(--pixel); font-size: 17px; text-transform:none; letter-spacing: -.04em; }
.brand { border-color: var(--line); }
.nav-tab { font-family: var(--pixel); font-size: 14px; text-transform:none; }
.nav-tab.is-on { background: transparent; border-color: transparent; box-shadow: none; color: var(--amber); }
.nav-tab.is-on svg { color: var(--amber); }
.btn { border-radius: 2px; font-family: var(--pixel); font-size: 13px; text-transform:none; box-shadow:none; }
.btn-sun,.btn-primary { background: var(--amber); color: #fffaf2; border-color: var(--amber); }
.btn-sun:hover,.btn-primary:hover { background:#a96044; color:white; }
.status { background: var(--panel-2); border-color: var(--line); box-shadow:none; }
.status-in { font-family: var(--pixel); color:var(--text-2); }
.status-k { color:var(--amber); }
.map-shell { grid-template-columns:minmax(0,1fr) 278px; background:var(--bg); }
.map-stage { background:#a9c9c7; border-color:var(--line); }
.side { background:var(--panel); }
.side-head { height:42px; padding:0 16px; background:var(--panel-2); border-color:var(--line); box-shadow:none; font-family:var(--pixel); font-size:14px; color:var(--text-2); }
.side-head b { color:var(--text); }
.city-row { grid-template-columns:25px 1fr auto; padding:9px 14px; border-color:var(--line-2); font-family:var(--pixel); font-size:14px; color:var(--text); }
.city-row:nth-child(odd) { background:transparent; }
.city-row:hover { background:#f0ede3; }
.city-row.is-on { background:#e9e3d4; color:var(--text); }
.cr-idx,.cr-tag { color:var(--text-3); }
.city-row.is-on .cr-idx,.city-row.is-on .cr-tag { color:var(--amber); }
.pin { background:#b66e4e; border-color:#fff8e9; box-shadow:0 0 0 2px rgba(38,61,58,.35); }
.pin:hover,.pin:focus-visible { background:#f0d49a; }
.pin-label { background:#fbf9f2; color:var(--text); border-color:#d8d1c0; font-family:var(--pixel); font-size:12px; text-transform:none; }
.pin-label em { color:var(--amber); }
.pin-label.on { background:#263d3a; color:#fffaf2; border-color:#263d3a; }
.pin-label.on em { color:#e7c58a; }
.pin-card,.tool-btn { background:var(--panel); color:var(--text); border-color:var(--line); box-shadow:0 4px 18px rgba(38,61,58,.12); }
.tool-btn:hover { background:#fffdf7; color:var(--amber); }
body.sub { background-color:var(--bg); }
.page-head { background:var(--panel-2); border-color:var(--line); box-shadow:none; }
.page-head h1 { color:var(--text); }
.eyebrow { color:var(--amber); }
.page-sub { color:var(--text-2); }
.toolbar,.table,.rule,.step,.submit-in,.site-foot { background:var(--panel); border-color:var(--line); box-shadow:none; }
.chip,.sort select,.search { background:var(--panel-2); color:var(--text); border-color:var(--line); box-shadow:none; }
.chip[aria-pressed="true"] { background:var(--text); border-color:var(--text); color:#fffaf2; box-shadow:none; }
.site-foot { border-width:1px 0 0; }
@media(max-width:700px) {
  .head-in { padding:0 12px; }
  .brand-word { font-size:14px; }
  .nav-tab { padding:0 6px; font-size:12px; }
  .nav-tab svg { display:none; }
  .head-cta { font-size:11px; margin-left:4px; }
  .map-shell { grid-template-columns:1fr; grid-template-rows:minmax(0,1fr) 160px; }
  .map-stage { border-right:0; border-bottom:1px solid var(--line); }
  .side-head { height:32px; }
  .city-row { padding:5px 12px; }
}

/* Refinement: smaller type, restored atlas colors, optional city rail. */
:root {
  --bg:#111111; --panel:#1b1b1b; --panel-2:#222222; --panel-3:#2b2b2b; --panel-4:#343434;
  --line:#363636; --line-2:#282828; --hi:#454545; --lo:#0b0b0b;
  --text:#e3e1d8; --text-2:#aaa99f; --text-3:#777970;
  --amber:#e3b53f; --amber-d:#9d7c22; --red:#cd5a42; --blue:#5fa2e6;
  --sea:#3f9ad6; --grass:#7cc464; --leaf:#2f6b3c;
  --ui:Arial,Helvetica,sans-serif; --pixel:Arial,Helvetica,sans-serif;
  --fs-ui:12px; --fs-body:16px; --fs-h3:24px; --fs-h2:32px;
}
body { background-color:var(--bg); background-image:linear-gradient(rgba(255,255,255,.018) 1px,transparent 1px),linear-gradient(90deg,rgba(255,255,255,.018) 1px,transparent 1px); }
.brand-word { font:600 15px/1.2 Arial,Helvetica,sans-serif; letter-spacing:.01em; text-transform:none; }
.nav-tab { font:500 13px/1 Arial,Helvetica,sans-serif; text-transform:none; }
.btn,.status-in,.side-head,.city-row,.pin-label,.pin-card .pc-meta,.pin-card .pc-go { font-family:Arial,Helvetica,sans-serif; }
.btn { font-size:12px; text-transform:none; }
.side-head { position:relative; font-size:13px; }
.city-row { font-size:12px; }
.pin-label { font-size:11px; }
.side-toggle { margin-left:auto; padding:3px 7px; border:1px solid var(--line); background:var(--panel-2); color:var(--text-2); font:12px Arial,sans-serif; cursor:pointer; }
.side-toggle:hover { color:var(--text); border-color:var(--amber); }
.map-shell { transition:grid-template-columns .2s ease; }
body.side-collapsed .map-shell { grid-template-columns:minmax(0,1fr) 0; }
body.side-collapsed .side { visibility:hidden; overflow:hidden; }
@media(max-width:700px) {
  body.side-collapsed .map-shell { grid-template-columns:1fr; grid-template-rows:minmax(0,1fr) 0; }
  body.side-collapsed .side { display:none; }
}

/* Final polish: pixel type and crisp beveled controls over the warm atlas palette. */
:root {
  --bg:#f4f1e8; --panel:#fbf9f2; --panel-2:#f8f5ec; --panel-3:#eeeade; --panel-4:#e5e0d2;
  --line:#d8d1c0; --line-2:#e8e3d7; --hi:#fffdf7; --lo:#c9c2b4;
  --text:#263d3a; --text-2:#62736b; --text-3:#89958b;
  --amber:#b66e4e; --amber-d:#94563d; --green:#748c68; --red:#b66e4e; --blue:#527d7a;
  --sea:#a9c9c7; --grass:#91aa78; --leaf:#496b52;
  --ui:"Silkscreen","Courier New",monospace;
  --pixel:"Silkscreen","Courier New",monospace;
  --fs-ui:12px; --fs-body:16px; --fs-h3:24px; --fs-h2:32px;
}
body { background:var(--bg); color:var(--text); font-family:var(--pixel); font-size:16px; }
.site-head { background:var(--panel-2); border-bottom:1px solid var(--line); box-shadow:inset 0 1px 0 var(--hi),0 2px 0 rgba(38,61,58,.06); }
body.map-page .head-in { max-width:none; padding:0 14px; }
.brand { border-right:1px solid var(--line); }
.brand-word { font:700 16px/1.2 var(--pixel); letter-spacing:0; text-transform:none; }
.nav-tab { margin:5px 2px; padding:0 10px; border:1px solid var(--line); background:var(--panel); box-shadow:inset 1px 1px 0 var(--hi),inset -1px -1px 0 var(--lo); color:var(--text-2); font:700 13px/1 var(--pixel); text-transform:none; }
.nav-tab svg { width:9px; height:9px; }
.nav-tab:hover { background:var(--panel-3); border-color:#bfb7a7; color:var(--text); }
.nav-tab.is-on { background:#e9e3d4; border-color:#c9bda8; color:var(--amber); box-shadow:inset 1px 1px 0 #fffdf7,inset -1px -1px 0 #d2c8b7; }
.nav-tab.is-on svg { color:var(--amber); }
.btn,.tool-btn,.side-toggle,.chip { border-radius:0; font-family:var(--pixel); box-shadow:inset 1px 1px 0 var(--hi),inset -1px -1px 0 var(--lo); }
.btn { height:28px; padding:0 10px; border:1px solid var(--line); background:var(--panel-3); color:var(--text); font-size:12px; }
.btn:active,.tool-btn:active,.side-toggle:active,.chip:active { box-shadow:inset 1px 1px 0 var(--lo),inset -1px -1px 0 var(--hi); transform:translate(1px,1px); }
.btn-sun,.btn-primary { background:var(--amber); border-color:var(--amber-d); color:#fffaf2; box-shadow:inset 1px 1px 0 #d99878,inset -1px -1px 0 var(--amber-d); }
.btn-sun:hover,.btn-primary:hover { background:#c17b5a; color:#fffaf2; }
.status { background:var(--panel-2); border-color:var(--line); box-shadow:inset 0 1px 0 var(--hi); }
.status-in { font:12px var(--ui); color:var(--text-2); }
.status-k { color:var(--amber); }
.side { background:var(--panel); }
.side-head { height:38px; padding:0 10px; background:var(--panel-2); border-color:var(--line); box-shadow:inset 0 1px 0 var(--hi); color:var(--text-2); font:700 13px var(--ui); }
.side-head b { color:var(--text); }
.city-row { padding:7px 10px; border-color:var(--line-2); font:700 12px/1.5 var(--ui); color:var(--text); }
.city-row:nth-child(odd) { background:rgba(38,61,58,.018); }
.city-row:hover { background:var(--panel-3); }
.city-row.is-on { background:#e9e3d4; color:var(--text); }
.pin-label { padding:2px 5px; background:var(--panel); border:1px solid #c9c1b2; box-shadow:2px 2px 0 rgba(38,61,58,.16); color:var(--text); font:700 11px/1.4 var(--ui); }
.pin-label em { color:var(--amber); }
.pin-label.on { background:var(--text); border-color:var(--text); color:#fffaf2; }
.pin-label.on em { color:#e8bd8e; }
.tool-btn { border:1px solid var(--line); background:var(--panel); color:var(--text); }
.side-toggle { margin-left:auto; padding:3px 7px; border:1px solid var(--line); background:var(--panel); color:var(--text-2); font:700 11px var(--ui); cursor:pointer; }
.side-toggle:hover { background:var(--panel-3); color:var(--text); border-color:#bfb7a7; }
.page-head,.toolbar,.table,.rule,.step,.submit-in,.site-foot { background:var(--panel); border-color:var(--line); box-shadow:none; }
.page-head h1 { color:var(--text); }
.chip[aria-pressed="true"] { background:var(--text); border-color:var(--text); color:#fffaf2; box-shadow:inset 1px 1px 0 #53706b,inset -1px -1px 0 #182d2a; }
@media(max-width:700px) { .nav-tab { margin:4px 1px; padding:0 6px; font-size:11px; } .nav-tab svg { display:none; } .brand-word { font-size:14px; } }

/* Slightly clearer pixel lettering: retain the bitmap character without chunky UI text. */
body,.nav-tab,.btn,.status-in,.side-head,.city-row,.pin-label,.side-toggle,.chip {
  font-family:"Silkscreen","Courier New",monospace;
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
}
.nav-tab { font-size:12px; letter-spacing:0; }
.city-row { font-size:11px; line-height:1.65; }
.pin-label { font-size:10px; }
.btn,.side-toggle { font-size:11px; }
.status-in { font-size:10px; }

/* Dark atlas palette restored; increase contrast across all supporting pages. */
:root { --bg:#111; --panel:#1b1b1b; --panel-2:#222; --panel-3:#2b2b2b; --panel-4:#343434; --line:#363636; --line-2:#303030; --hi:#454545; --lo:#0b0b0b; --text:#e8e6df; --text-2:#c0c0b8; --text-3:#a4a49c; --amber:#e3b53f; --amber-d:#9d7c22; --blue:#8bc1ff; }
body { background-color:var(--bg); color:var(--text); }
.site-head,.status,.page-head { background:var(--panel-2); border-color:var(--line); }
.side,.toolbar,.table,.rule,.step,.submit-in,.site-foot { background:var(--panel); border-color:var(--line); }
.nav-tab { color:#c0c0b8; }
.nav-tab:hover { color:#fff; }
.nav-tab.is-on { color:#171717; }
.page-head h1,.side-head b,.brand,.submit-copy h1,.rule h2,.step h2 { color:#f1efe8; }
.page-sub,.foot-col p,.foot-brand p,.rule-note,.form-note,.submit-copy p,.field label span { color:#c0c0b8; }
.eyebrow,.status-k { color:var(--amber); }
.city-row,.field label { color:#e8e6df; }
.cr-idx,.cr-tag { color:#adada5; }
.pin-label { background:#1b1b1b; color:#f1efe8; border-color:#65645c; }
.pin-label.on { background:var(--amber); color:#171717; }
.search,.sort select,.field input,.field textarea { background:#111; color:#f1efe8; border-color:#595959; }
.search input { color:#f1efe8; }
.search input::placeholder,.field input::placeholder,.field textarea::placeholder { color:#a4a49c; opacity:1; }
.site-foot a,.page-sub a,.rule a,.submit-alt a { color:#9bcaff; }
.chip { color:#d0cec6; }
.chip[aria-pressed="true"] { color:#171717; }
.side-toggle { color:#e0ded6; }
.form-honeypot { position:absolute!important; left:-10000px!important; width:1px!important; height:1px!important; opacity:0!important; }

/* Pixel lettering tuned for legibility; land contour uses a finer cell grid. */
.nav-tab,.btn,.status-in,.side-head,.city-row,.pin-label,.side-toggle,.chip,.sort,.search input,.field label,.field input,.field textarea {
  font-family:"Silkscreen","Courier New",monospace;
  font-weight:400;
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
}
.nav-tab { font-size:13px; }
.city-row { font-size:12px; }
.pin-label { font-size:11px; }

/* Keep optional notes aligned with the full-width form fields. */
.submit-form .field { width:100%; min-width:0; }
.submit-form .field input,.submit-form .field textarea { display:block; width:100%; max-width:100%; box-sizing:border-box; }
.submit-form .field textarea { resize:vertical; }
/* Slightly larger pixel lettering improves readability without losing its style. */
.submit-form .field label,.submit-form .field input,.submit-form .field textarea { font-size:14px; line-height:1.6; letter-spacing:.015em; }

/* Map cards: one aligned title strip and body for every city. */
.pin-card { display:block; width:252px; padding:0; background:#1b1b1b; border:1px solid #5b5444; box-shadow:3px 3px 0 rgba(13,25,29,.45); color:#ece9df; }
.pin-card[hidden] { display:none; }
.pin-card .pc-title { display:block; width:100%; padding:5px 8px; background:#e3b53f; border-bottom:1px solid #9d7c22; color:#171717; font:700 13px/1.35 "Silkscreen","Courier New",monospace; overflow-wrap:anywhere; }
.pin-card .pc-content { display:flex; align-items:flex-start; gap:8px; width:100%; padding:8px; }
.pin-card .pc-content img { display:block; width:52px; height:39px; object-fit:cover; flex:none; }
.pin-card .pc-body { min-width:0; color:#ece9df; }
.pin-card .pc-meta { color:#c8c5ba; }
.pin-card .pc-go { color:#e3b53f; }
.city-row.is-on { background:#e3b53f; color:#171717; }
.city-row.is-on .cr-name,.city-row.is-on .cr-idx,.city-row.is-on .cr-tag { color:#171717; }

/* The open city card already names the city; hide its duplicate map label. */
.pin-label.on { display:none; }

/* Language switch sits beside Submit on every page. */
.language-select { align-self:center; margin-left:8px; flex:none; }
.language-select select { max-width:116px; height:26px; padding:0 5px; border:1px solid var(--line); border-radius:0; background:var(--panel-3); color:var(--text); box-shadow:inset 1px 1px 0 var(--hi),inset -1px -1px 0 var(--lo); font:400 11px "Silkscreen","Courier New",monospace; cursor:pointer; }
.language-select select:focus-visible { outline:2px solid var(--amber); outline-offset:1px; }
@media(max-width:700px) { .language-select { margin-left:4px; } .language-select select { max-width:86px; font-size:10px; } }

/* Accessible city markers: a 28px hit area around the original small pixel. */
.pin { width:28px; height:28px; margin:-14px 0 0 -14px; border:0; background:transparent; box-shadow:none; }
.pin::before { content:""; position:absolute; left:9px; top:9px; width:10px; height:10px; border:1px solid #141414; background:var(--red); box-shadow:inset 1px 1px 0 #ff8a70; }
.pin:hover,.pin:focus-visible { background:transparent; box-shadow:none; }
.pin:hover::before,.pin:focus-visible::before { background:var(--amber); box-shadow:inset 1px 1px 0 #ffe08a; }
.pin-card { pointer-events:auto; }
.pin-card .pc-go { display:inline-block; text-decoration:underline; text-underline-offset:2px; }
.pin-card .pc-go:hover { color:#ffdc78; }
/* The generic .rule p rule must not override the number tile. */
.rule .rule-num { display:flex; align-items:center; justify-content:center; width:24px; height:24px; margin:0 0 10px; padding:0; background:var(--amber); color:#171717; font:700 13px/1 "Silkscreen","Courier New",monospace; text-align:center; }

@font-face { font-family:"FusionPixelHans"; src:url("fonts/fusion-pixel-12px-proportional-zh_hans.otf.woff2") format("woff2"); font-display:swap; }
@font-face { font-family:"FusionPixelHant"; src:url("fonts/fusion-pixel-12px-proportional-zh_hant.otf.woff2") format("woff2"); font-display:swap; }
@font-face { font-family:"FusionPixelJa"; src:url("fonts/fusion-pixel-12px-proportional-ja.otf.woff2") format("woff2"); font-display:swap; }
html[lang="zh-Hans"] { --pixel:"FusionPixelHans","Microsoft YaHei",sans-serif; --ui:"FusionPixelHans","Microsoft YaHei",sans-serif; }
html[lang="zh-Hant"] { --pixel:"FusionPixelHant","Microsoft JhengHei",sans-serif; --ui:"FusionPixelHant","Microsoft JhengHei",sans-serif; }
html[lang="ja"] { --pixel:"FusionPixelJa","Yu Gothic",sans-serif; --ui:"FusionPixelJa","Yu Gothic",sans-serif; }
html[lang="zh-Hans"] body,html[lang="zh-Hant"] body,html[lang="ja"] body,
html[lang="zh-Hans"] .nav-tab,html[lang="zh-Hant"] .nav-tab,html[lang="ja"] .nav-tab,
html[lang="zh-Hans"] .btn,html[lang="zh-Hant"] .btn,html[lang="ja"] .btn,
html[lang="zh-Hans"] .city-row,html[lang="zh-Hant"] .city-row,html[lang="ja"] .city-row,
html[lang="zh-Hans"] .pin-label,html[lang="zh-Hant"] .pin-label,html[lang="ja"] .pin-label,
html[lang="zh-Hans"] .side-head,html[lang="zh-Hant"] .side-head,html[lang="ja"] .side-head,
html[lang="zh-Hans"] .language-select select,html[lang="zh-Hant"] .language-select select,html[lang="ja"] .language-select select { font-family:var(--pixel); }
html[lang="zh-Hans"] .page-sub,html[lang="zh-Hant"] .page-sub,html[lang="ja"] .page-sub,
html[lang="zh-Hans"] .rule p,html[lang="zh-Hant"] .rule p,html[lang="ja"] .rule p { line-height:1.85; }

/* Keep CJK translations visible in controls that have their own font rules. */
:is(html[lang="zh-Hans"],html[lang="zh-Hant"],html[lang="ja"]) :is(.status-in,.pin-card .pc-title,.pin-card .pc-meta,.pin-card .pc-go,.chip,.sort,.search input,.field label,.field input,.field textarea,.tmeta,.tcity,.foot-col,.form-note,.side-toggle) { font-family:var(--pixel); }

/* Compact credit footer and refined navigation. */
.site-foot { margin-top:10px; padding:12px 0; text-align:center; }
.copyright { color:var(--text-2); font:400 13px/1.5 "Silkscreen","Courier New",monospace; }
.copyright a { color:var(--text); font-weight:700; text-decoration:underline; text-underline-offset:2px; }
.copyright a:hover { color:var(--amber); }
.language-select { margin-left:auto; }
@media(max-width:900px) { .language-select { order:2; margin-left:8px; } }
/* Give dates room and return space to the project/country columns. */
@media(min-width:1181px) { .thead,.trow { grid-template-columns:52px minmax(90px,.85fr) minmax(90px,.9fr) minmax(120px,1.3fr) minmax(90px,.9fr) minmax(112px,.9fr) 62px; } }
@media(min-width:761px) and (max-width:1180px) { .thead,.trow { grid-template-columns:52px minmax(90px,.85fr) minmax(90px,.9fr) minmax(110px,1.2fr) minmax(112px,.9fr) 58px; } }
/* Use Silkscreen for Latin letters and the locale-specific pixel face for Han/kana. */
html[lang="zh-Hans"] { --pixel:"Silkscreen","FusionPixelHans","Microsoft YaHei",sans-serif; --ui:"Silkscreen","FusionPixelHans","Microsoft YaHei",sans-serif; }
html[lang="zh-Hant"] { --pixel:"Silkscreen","FusionPixelHant","Microsoft JhengHei",sans-serif; --ui:"Silkscreen","FusionPixelHant","Microsoft JhengHei",sans-serif; }
html[lang="ja"] { --pixel:"Silkscreen","FusionPixelJa","Yu Gothic",sans-serif; --ui:"Silkscreen","FusionPixelJa","Yu Gothic",sans-serif; }
:is(html[lang="zh-Hans"],html[lang="zh-Hant"],html[lang="ja"]) :is(.nav-tab,.chip,.city-row,.pin-card .pc-title,.tcity,.copyright,.language-select select) { letter-spacing:.025em; font-weight:700; }

/* Interior pages end with the copyright footer; the map keeps its status bar. */
body.sub { padding-bottom:0; }