/*
 * KYOTO FIELD RELIQUARY — depth craft layer
 * Reversible override: the stable layout remains in styles-reboot.css.
 * Physical model: recessed survey floor, raised instrument, stacked records,
 * and a sliding archive drawer. Every shadow assumes light from upper-left.
 */

:root {
  --bg: #d7d2c5;
  --bg-deep: #c9c3b4;
  --surface: #f3efe5;
  --surface-raised: #f8f5ed;
  --surface-solid: #fffdf7;
  --ink: #171916;
  --ink-soft: #343830;
  --muted: #666a61;
  --muted-light: #8a8d84;
  --line: rgba(33, 35, 30, 0.17);
  --line-strong: rgba(33, 35, 30, 0.34);
  --signal: #b84035;
  --signal-dark: #842d27;
  --signal-soft: #e8c7be;
  --verdigris: #326f66;
  --verdigris-soft: #b5cbc3;
  --ancient-soft: #d5c9a8;
  --medieval-soft: #b4ccc6;
  --early-modern-soft: #d3a98e;
  --modern-soft: #c2cab3;
  --paper-top: #fffdf7;
  --paper-warm: #f0ebdf;
  --paper-edge: #b7af9f;
  --edge-light: rgba(255, 255, 255, 0.88);
  --shadow-stage:
    0 2px 0 var(--paper-edge),
    0 9px 0 -4px rgba(132, 124, 109, 0.78),
    0 26px 52px rgba(42, 40, 34, 0.24);
  --shadow-float:
    0 3px 0 rgba(116, 108, 94, 0.8),
    0 15px 34px rgba(42, 40, 34, 0.23);
  --shadow-control:
    0 3px 0 rgba(70, 67, 58, 0.38),
    0 8px 17px rgba(42, 40, 34, 0.16);
  --inset-floor:
    inset 0 2px 3px rgba(54, 51, 44, 0.22),
    inset 0 -1px 0 rgba(255, 255, 255, 0.64),
    inset 12px 0 28px rgba(70, 66, 56, 0.08);
  --inset-control:
    inset 0 2px 4px rgba(46, 44, 38, 0.25),
    inset 0 -1px 0 rgba(255, 255, 255, 0.76);
  --radius-sheet: 12px;
  --radius-instrument: 16px;
  --radius-control: 10px;
}

html {
  overflow-x: clip;
  background: #c8c2b3;
}

body {
  background:
    linear-gradient(112deg, rgba(255, 255, 255, 0.42), transparent 34%),
    repeating-linear-gradient(8deg, rgba(37, 39, 34, 0.018) 0 1px, transparent 1px 7px),
    radial-gradient(circle at 88% 5%, rgba(50, 111, 102, 0.1), transparent 27rem),
    var(--bg);
}

.app-shell { position: relative; }

.topbar {
  border-bottom: 1px solid rgba(71, 68, 59, 0.45);
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.88), rgba(236, 232, 220, 0.94)),
    var(--surface);
  box-shadow:
    inset 0 1px 0 #fff,
    0 3px 0 rgba(156, 149, 135, 0.78),
    0 13px 30px rgba(51, 49, 42, 0.14);
  backdrop-filter: blur(18px) saturate(0.9);
}

.topbar::after {
  position: absolute;
  right: 0;
  bottom: -1px;
  left: 0;
  height: 1px;
  background: linear-gradient(90deg, transparent, var(--verdigris), var(--signal), transparent);
  content: "";
  opacity: 0.6;
  pointer-events: none;
}

.brand-mark {
  border: 1px solid #050604;
  background: linear-gradient(145deg, #30332d 0 24%, #121411 62%);
  border-radius: 6px;
  box-shadow:
    inset 1px 1px 0 rgba(255, 255, 255, 0.24),
    inset -1px -1px 0 rgba(0, 0, 0, 0.72),
    3px 3px 0 var(--verdigris),
    6px 8px 15px rgba(38, 37, 32, 0.18);
  transform: translateY(-1px);
}

.brand-copy strong { text-shadow: 0 1px 0 #fff; }

.language-picker {
  position: relative;
  padding: 0 27px 0 10px;
  border: 1px solid rgba(72, 69, 60, 0.44);
  background: linear-gradient(180deg, #fffdf7, #e9e4d8);
  border-radius: var(--radius-control);
  box-shadow:
    inset 0 1px 0 var(--edge-light),
    0 3px 0 rgba(144, 137, 123, 0.78),
    0 8px 18px rgba(42, 40, 34, 0.12);
  transition:
    transform var(--duration-fast) var(--ease-direct),
    box-shadow var(--duration-fast) var(--ease-direct);
}

.language-picker::after {
  position: absolute;
  top: 50%;
  right: 10px;
  width: 6px;
  height: 6px;
  border-right: 1.5px solid currentColor;
  border-bottom: 1.5px solid currentColor;
  content: "";
  pointer-events: none;
  transform: translateY(-70%) rotate(45deg);
}

.language-picker:active {
  box-shadow: var(--inset-control), 0 1px 0 rgba(144, 137, 123, 0.78);
  transform: translateY(2px);
}

.language-picker select {
  width: 92px;
  appearance: none;
}

.quiet-button,
.text-button {
  border-color: rgba(72, 69, 60, 0.42);
  background: linear-gradient(180deg, var(--paper-top), #eae5d9);
  border-radius: var(--radius-control);
  box-shadow:
    inset 0 1px 0 var(--edge-light),
    0 3px 0 rgba(144, 137, 123, 0.72),
    0 7px 15px rgba(42, 40, 34, 0.1);
}

.quiet-button:hover,
.text-button:hover {
  border-color: rgba(33, 35, 30, 0.68);
  background: linear-gradient(180deg, #fff, #eee9dd);
}

.quiet-button:active,
.text-button:active {
  box-shadow: var(--inset-control), 0 1px 0 rgba(144, 137, 123, 0.72);
  transform: translateY(2px) scale(0.992);
}

.discovery-column {
  border-bottom-color: rgba(75, 71, 62, 0.5);
  background: var(--bg-deep);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.42),
    inset 0 -14px 30px rgba(71, 67, 57, 0.12);
}

.proximity-map { box-shadow: var(--inset-floor); }

.proximity-map::before {
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.28), transparent 21%, transparent 66%, rgba(49, 47, 40, 0.18)),
    linear-gradient(90deg, rgba(50, 111, 102, 0.08), transparent 28%, transparent 73%, rgba(184, 64, 53, 0.06));
}

.proximity-canvas {
  background:
    linear-gradient(rgba(42, 44, 38, 0.1) 1px, transparent 1px),
    linear-gradient(90deg, rgba(42, 44, 38, 0.1) 1px, transparent 1px),
    linear-gradient(rgba(42, 44, 38, 0.17) 2px, transparent 2px),
    linear-gradient(90deg, rgba(42, 44, 38, 0.17) 2px, transparent 2px),
    radial-gradient(circle at 50% 49%, #e5e2d7 0, #d5d0c1 57%, #bbb5a6 100%);
  background-position: center;
  background-size: 40px 40px, 40px 40px, 160px 160px, 160px 160px, auto;
  box-shadow:
    inset 0 3px 8px rgba(48, 46, 40, 0.18),
    inset 0 -2px 0 rgba(255, 255, 255, 0.42),
    inset -18px 0 34px rgba(65, 61, 52, 0.08);
}

.map-ring {
  border-color: rgba(48, 49, 43, 0.26);
  box-shadow:
    inset 0 1px 1px rgba(51, 49, 42, 0.14),
    0 1px 0 rgba(255, 255, 255, 0.5);
}

.field-plot.is-panning .map-ring { transition: none; }

.current-point {
  background: rgba(229, 226, 215, 0.5);
  box-shadow: var(--inset-control), 0 1px 0 rgba(255, 255, 255, 0.65);
}

.map-marker {
  border-color: #f8f5ed;
  box-shadow:
    inset 1px 1px 0 rgba(255, 255, 255, 0.3),
    inset -1px -1px 0 rgba(0, 0, 0, 0.28),
    0 3px 0 color-mix(in srgb, var(--marker) 70%, #222),
    0 10px 17px rgba(37, 36, 31, 0.22);
}

.map-marker:hover,
.map-marker:focus-visible {
  box-shadow:
    inset 1px 1px 0 rgba(255, 255, 255, 0.32),
    inset -1px -1px 0 rgba(0, 0, 0, 0.28),
    0 4px 0 color-mix(in srgb, var(--marker) 70%, #222),
    0 16px 24px rgba(37, 36, 31, 0.28);
}

.hero {
  border-left-width: 3px;
  filter: drop-shadow(0 1px 0 rgba(255, 255, 255, 0.58));
}

.location-card {
  overflow: visible;
  border: 1px solid var(--paper-edge);
  background:
    linear-gradient(122deg, rgba(255, 255, 255, 0.92), transparent 35%),
    linear-gradient(180deg, var(--paper-top), var(--paper-warm));
  border-radius: var(--radius-instrument);
  box-shadow:
    inset 1px 1px 0 #fff,
    inset -1px -1px 0 rgba(103, 97, 84, 0.12),
    var(--shadow-stage);
  backdrop-filter: none;
  isolation: isolate;
}

.location-card::before {
  z-index: 3;
  right: 10px;
  left: 10px;
  height: 5px;
  border-right: 24px solid var(--signal);
  border-left: 58px solid var(--verdigris);
  background: rgba(39, 41, 36, 0.22);
  box-shadow: 0 1px 0 rgba(255, 255, 255, 0.72);
}

.location-card::after {
  position: absolute;
  z-index: -1;
  inset: 7px -7px -7px 7px;
  border: 1px solid rgba(85, 80, 69, 0.35);
  background: #c8c1b2;
  border-radius: var(--radius-instrument);
  box-shadow: 0 13px 22px rgba(43, 41, 35, 0.2);
  content: "";
  pointer-events: none;
}

.location-card > * {
  position: relative;
  z-index: 1;
}

.location-status-icon {
  border-color: rgba(50, 111, 102, 0.78);
  background: #e9e5d9;
  border-radius: 8px;
  box-shadow: var(--inset-control), 0 1px 0 rgba(255, 255, 255, 0.72);
}

.nearest-glance {
  position: relative;
  min-height: 196px;
  margin: 16px 0 15px;
  padding: 18px 15px 15px;
  overflow: hidden;
  border: 1px solid rgba(75, 71, 61, 0.38);
  background:
    linear-gradient(90deg, rgba(184, 64, 53, 0.065) 1px, transparent 1px),
    repeating-linear-gradient(0deg, transparent 0 31px, rgba(50, 111, 102, 0.075) 31px 32px),
    #e5e0d4;
  background-size: 72px 100%, auto, auto;
  border-radius: 9px;
  box-shadow: var(--inset-control);
}

.nearest-glance::after {
  position: absolute;
  top: 0;
  bottom: 0;
  left: 10px;
  width: 2px;
  background: var(--signal);
  content: "";
  opacity: 0.68;
}

.nearest-glance b {
  position: relative;
  z-index: 1;
  text-shadow: 0 1px 0 rgba(255, 255, 255, 0.72);
  transition: transform var(--duration-state) var(--ease-enter);
}

.nearest-glance span,
.nearest-glance > svg {
  position: relative;
  z-index: 1;
}

.nearest-glance:hover b,
.nearest-glance:focus-visible b { transform: translateX(3px); }

.primary-button,
.secondary-button { border-radius: var(--radius-control); }

.primary-button {
  border-color: #080a08;
  background: linear-gradient(160deg, #343832 0 18%, #151814 68%);
  box-shadow:
    inset 1px 1px 0 rgba(255, 255, 255, 0.2),
    inset -1px -1px 0 rgba(0, 0, 0, 0.52),
    0 4px 0 #090b09,
    0 11px 20px rgba(34, 33, 28, 0.2);
}

.primary-button:hover {
  background: linear-gradient(160deg, #41463f 0 18%, #1c201b 68%);
  box-shadow:
    inset 1px 1px 0 rgba(255, 255, 255, 0.22),
    inset -1px -1px 0 rgba(0, 0, 0, 0.52),
    0 5px 0 #090b09,
    0 14px 24px rgba(34, 33, 28, 0.23);
}

.secondary-button {
  border-color: rgba(72, 69, 60, 0.48);
  background: linear-gradient(180deg, var(--paper-top), #e9e4d8);
  box-shadow:
    inset 0 1px 0 var(--edge-light),
    0 3px 0 rgba(137, 130, 116, 0.72),
    0 8px 15px rgba(42, 40, 34, 0.11);
}

.primary-button:active,
.secondary-button:active {
  box-shadow: var(--inset-control), 0 1px 0 rgba(70, 67, 58, 0.4);
  transform: translateY(3px) scale(0.995);
}

.location-button[aria-busy="true"] {
  border-color: rgba(50, 111, 102, 0.42);
  background: #b8cdc5;
  box-shadow: var(--inset-control);
}

/* The archive surface sits above the map floor, but below pressable controls. */
.results-column {
  border-top: 1px solid rgba(255, 255, 255, 0.55);
  background:
    linear-gradient(90deg, rgba(184, 64, 53, 0.04) 0 1px, transparent 1px),
    repeating-linear-gradient(0deg, transparent 0 43px, rgba(52, 56, 48, 0.025) 43px 44px),
    #e8e3d7;
  background-position: 28px 0, 0 0, 0 0;
  box-shadow:
    inset 0 12px 28px rgba(70, 66, 56, 0.08),
    inset 0 1px 0 rgba(255, 255, 255, 0.62);
}

.era-filter {
  margin: 0 0 30px;
  padding: 16px;
  border: 1px solid var(--paper-edge);
  background:
    linear-gradient(122deg, rgba(255, 255, 255, 0.84), transparent 42%),
    linear-gradient(180deg, #f8f5ed, #e8e2d6);
  border-radius: 14px;
  box-shadow:
    inset 1px 1px 0 #fff,
    0 3px 0 rgba(143, 135, 121, 0.78),
    0 13px 26px rgba(45, 43, 37, 0.14);
}

.era-filter legend { padding-inline: 3px; }

.era-options {
  min-height: 54px;
  padding: 5px;
  border-color: rgba(72, 69, 60, 0.5);
  background: #d7d1c3;
  border-radius: 10px;
  box-shadow: var(--inset-control);
}

.era-options::before {
  top: 5px;
  bottom: 5px;
  left: 5px;
  width: calc((100% - 10px) / 5);
  border: 1px solid #080a08;
  background: linear-gradient(155deg, #373b35, #151714 70%);
  border-radius: 7px;
  box-shadow:
    inset 1px 1px 0 rgba(255, 255, 255, 0.18),
    0 3px 0 #080a08,
    0 7px 14px rgba(34, 33, 28, 0.22);
  transform: translate3d(0, -2px, 0);
  transition: transform 260ms var(--ease-enter);
}

.era-options:has(input[value="ancient"]:checked)::before { transform: translate3d(100%, -2px, 0); }
.era-options:has(input[value="medieval"]:checked)::before { transform: translate3d(200%, -2px, 0); }
.era-options:has(input[value="early-modern"]:checked)::before { transform: translate3d(300%, -2px, 0); }
.era-options:has(input[value="modern"]:checked)::before { transform: translate3d(400%, -2px, 0); }

.era-options span {
  min-height: 44px;
  text-shadow: 0 1px 0 rgba(255, 255, 255, 0.5);
}

.era-options input:checked + span {
  text-shadow: 0 -1px 0 rgba(0, 0, 0, 0.54);
}

.results-heading {
  margin: 0 3px 18px;
  padding-bottom: 17px;
  border-bottom: 2px solid rgba(54, 56, 49, 0.32);
  box-shadow: 0 1px 0 rgba(255, 255, 255, 0.74);
}

.results-heading h2 span {
  text-shadow: 0 1px 0 rgba(255, 255, 255, 0.78);
}

.distance-key i {
  box-shadow:
    inset 1px 1px 0 rgba(255, 255, 255, 0.38),
    0 2px 0 rgba(95, 32, 27, 0.42);
}

.coverage-note {
  border: 1px solid rgba(127, 98, 31, 0.38);
  border-left: 5px solid var(--warning);
  background: #e8dbb8;
  border-radius: 8px;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.5),
    0 3px 0 rgba(132, 111, 61, 0.32);
}

.place-list {
  display: grid;
  gap: 15px;
  border-top: 0;
  perspective: 900px;
}

.place-card {
  --era: var(--ink-soft);
  --era-soft: #d6d1c5;
  position: relative;
  display: grid;
  grid-template-columns: 82px minmax(0, 1fr);
  min-height: 158px;
  margin-right: 6px;
  overflow: visible;
  border: 1px solid rgba(83, 79, 68, 0.48);
  background:
    linear-gradient(122deg, rgba(255, 255, 255, 0.82), transparent 38%),
    linear-gradient(180deg, #faf7ef, #eee9dd);
  border-radius: var(--radius-sheet);
  box-shadow:
    inset 1px 1px 0 rgba(255, 255, 255, 0.84),
    inset -1px -1px 0 rgba(102, 96, 82, 0.1),
    0 3px 0 rgba(133, 126, 111, 0.68),
    0 13px 24px rgba(42, 40, 34, 0.14);
  isolation: isolate;
  animation: place-enter 340ms var(--ease-enter) both;
  transform-origin: 50% 100%;
  transition:
    border-color var(--duration-state) var(--ease-direct),
    box-shadow 240ms var(--ease-direct),
    transform 240ms var(--ease-enter);
}

.place-card::before {
  position: absolute;
  z-index: 2;
  top: 8px;
  bottom: 8px;
  left: -1px;
  width: 6px;
  border-radius: 0 4px 4px 0;
  background: var(--era);
  box-shadow:
    inset 1px 0 0 rgba(255, 255, 255, 0.34),
    2px 0 5px rgba(45, 43, 37, 0.12);
  content: "";
  pointer-events: none;
}

.place-card::after {
  position: absolute;
  z-index: -1;
  inset: 6px -6px -6px 6px;
  border: 1px solid rgba(83, 79, 68, 0.32);
  background: color-mix(in srgb, var(--era-soft) 38%, #d3cdbf);
  border-radius: var(--radius-sheet);
  box-shadow: 0 10px 18px rgba(42, 40, 34, 0.13);
  content: "";
  pointer-events: none;
}

.place-card[data-era="ancient"] { --era: var(--ancient); --era-soft: var(--ancient-soft); }
.place-card[data-era="medieval"] { --era: var(--medieval); --era-soft: var(--medieval-soft); }
.place-card[data-era="early-modern"] { --era: var(--early-modern); --era-soft: var(--early-modern-soft); }
.place-card[data-era="modern"] { --era: var(--modern); --era-soft: var(--modern-soft); }

.place-card:hover,
.place-card:focus-within {
  z-index: 3;
  border-color: rgba(45, 43, 37, 0.66);
  background:
    linear-gradient(122deg, rgba(255, 255, 255, 0.9), transparent 38%),
    linear-gradient(180deg, #fffdf7, #f0eadf);
  box-shadow:
    inset 1px 1px 0 rgba(255, 255, 255, 0.9),
    0 4px 0 rgba(133, 126, 111, 0.62),
    0 20px 34px rgba(42, 40, 34, 0.19);
}

.place-card__distance {
  position: relative;
  z-index: 1;
  padding-left: 12px;
  border-right: 1px solid rgba(75, 71, 61, 0.36);
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.36), transparent 38%),
    color-mix(in srgb, var(--era-soft) 78%, #e5dfd2);
  border-radius: 11px 0 0 11px;
  box-shadow:
    inset -3px 0 6px rgba(58, 55, 47, 0.1),
    inset 0 1px 0 rgba(255, 255, 255, 0.52);
}

.place-card__distance strong {
  font-size: 20px;
  text-shadow: 0 1px 0 rgba(255, 255, 255, 0.64);
}

.place-card__open {
  position: relative;
  z-index: 1;
  padding: 20px 66px 19px 18px;
  border-radius: 0 11px 11px 0;
}

.era-badge {
  border-radius: 5px;
  background: rgba(255, 253, 247, 0.56);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.72);
}

.save-toggle {
  top: 12px;
  right: 11px;
  border-color: rgba(70, 67, 58, 0.43);
  background: linear-gradient(145deg, #fffdf7, #ded8ca);
  border-radius: 9px;
  box-shadow:
    inset 1px 1px 0 rgba(255, 255, 255, 0.92),
    inset -1px -1px 0 rgba(91, 86, 74, 0.14),
    0 3px 0 rgba(132, 124, 109, 0.7),
    0 8px 13px rgba(42, 40, 34, 0.12);
}

.save-toggle:active {
  box-shadow: var(--inset-control), 0 1px 0 rgba(132, 124, 109, 0.7);
  transform: translateY(2px) scale(0.96);
}

.save-toggle[aria-pressed="true"] {
  border-color: rgba(132, 45, 39, 0.55);
  background: linear-gradient(145deg, #efd5ce, #d9aaa0);
}

.empty-state {
  border: 1px solid var(--paper-edge);
  background: linear-gradient(180deg, #faf7ef, #ede7da);
  border-radius: var(--radius-sheet);
  box-shadow: var(--shadow-control);
}

.simple-page { position: relative; }

.simple-page::before {
  position: absolute;
  z-index: -1;
  inset: 24px 10px 104px;
  border: 1px solid rgba(83, 79, 68, 0.2);
  background: rgba(238, 233, 221, 0.42);
  box-shadow: var(--inset-floor);
  content: "";
}

.page-intro {
  border-left-width: 4px;
  filter: drop-shadow(0 1px 0 rgba(255, 255, 255, 0.62));
}

.saved-panel .place-list { padding: 2px 6px 12px 0; }

.about-grid {
  gap: 15px;
  border-top: 0;
  perspective: 900px;
}

.about-card {
  min-height: 220px;
  padding: 28px 22px 32px 76px;
  border: 1px solid rgba(83, 79, 68, 0.44);
  background:
    linear-gradient(122deg, rgba(255, 255, 255, 0.76), transparent 43%),
    linear-gradient(180deg, #f8f5ed, #eae4d7);
  border-radius: var(--radius-sheet);
  box-shadow:
    inset 1px 1px 0 rgba(255, 255, 255, 0.86),
    0 3px 0 rgba(137, 130, 116, 0.65),
    0 13px 23px rgba(42, 40, 34, 0.13);
}

.about-card:nth-child(odd) { border-right: 1px solid rgba(83, 79, 68, 0.44); }

.about-card--accent {
  background:
    linear-gradient(122deg, rgba(255, 255, 255, 0.55), transparent 43%),
    linear-gradient(180deg, #c8d7d1, #adc5bd);
}

.about-number {
  top: 26px;
  left: 20px;
  padding-bottom: 4px;
  border-bottom: 3px solid currentColor;
  text-shadow: 0 1px 0 rgba(255, 255, 255, 0.6);
}

.bottom-nav {
  overflow: visible;
  border: 1px solid rgba(72, 69, 60, 0.5);
  background:
    linear-gradient(150deg, rgba(255, 255, 255, 0.9), transparent 38%),
    linear-gradient(180deg, #f5f1e8, #dcd6c8);
  border-radius: 16px;
  box-shadow:
    inset 1px 1px 0 #fff,
    0 4px 0 rgba(116, 109, 96, 0.82),
    0 17px 36px rgba(39, 37, 32, 0.28);
  backdrop-filter: blur(18px) saturate(0.9);
}

.bottom-nav::before {
  border: 1px solid #080a08;
  background: linear-gradient(155deg, #393d37, #141613 68%);
  border-radius: 11px;
  box-shadow:
    inset 1px 1px 0 rgba(255, 255, 255, 0.18),
    inset -1px -1px 0 rgba(0, 0, 0, 0.5),
    0 3px 0 #080a08,
    0 9px 16px rgba(34, 33, 28, 0.22);
}

.nav-item { text-shadow: 0 1px 0 rgba(255, 255, 255, 0.5); }
.nav-item.is-active { text-shadow: 0 -1px 0 rgba(0, 0, 0, 0.6); }

/* Detail opens as a physical archive drawer, not another floating card. */
.place-dialog {
  border: 1px solid rgba(69, 65, 56, 0.5);
  border-bottom: 0;
  background: #e1dccf;
  border-radius: 20px 20px 0 0;
  box-shadow:
    inset 0 1px 0 #fff,
    0 -4px 0 rgba(121, 113, 99, 0.76),
    0 -30px 78px rgba(24, 24, 20, 0.31);
}

.place-dialog::backdrop { background: rgba(24, 25, 21, 0.52); }

.dialog-handle {
  width: 54px;
  height: 6px;
  background: #8d8779;
  box-shadow:
    inset 0 2px 2px rgba(44, 42, 36, 0.3),
    0 1px 0 rgba(255, 255, 255, 0.66);
}

.icon-button {
  border-color: rgba(70, 67, 58, 0.45);
  background: linear-gradient(145deg, #fffdf7, #ded8ca);
  border-radius: 10px;
  box-shadow:
    inset 1px 1px 0 #fff,
    0 3px 0 rgba(124, 117, 103, 0.75),
    0 9px 18px rgba(42, 40, 34, 0.16);
  backdrop-filter: blur(10px);
}

.icon-button:active {
  box-shadow: var(--inset-control);
  transform: translateY(2px) scale(0.96);
}

.detail-hero {
  background:
    linear-gradient(90deg, transparent 31px, rgba(50, 111, 102, 0.26) 32px, transparent 33px),
    repeating-linear-gradient(0deg, transparent 0 39px, rgba(50, 53, 46, 0.045) 39px 40px),
    linear-gradient(138deg, rgba(255, 255, 255, 0.48), transparent 38%),
    linear-gradient(var(--era-soft), color-mix(in srgb, var(--era-soft) 62%, #f3eee2));
  border-bottom: 1px solid rgba(72, 69, 60, 0.48);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.64),
    0 5px 0 rgba(126, 118, 103, 0.54),
    0 16px 30px rgba(42, 40, 34, 0.13);
}

.detail-hero::before {
  left: 31px;
  width: 3px;
  box-shadow: 1px 0 0 rgba(255, 255, 255, 0.44);
}

.detail-body {
  margin: 8px 8px 0;
  padding-right: 18px;
  padding-left: 18px;
  border: 1px solid rgba(83, 79, 68, 0.28);
  border-bottom: 0;
  background:
    linear-gradient(90deg, transparent 20px, rgba(184, 64, 53, 0.09) 21px, transparent 22px),
    #f6f2e8;
  box-shadow:
    inset 0 1px 0 #fff,
    0 0 0 5px rgba(191, 184, 169, 0.58);
}

.detail-section { border-bottom-color: rgba(66, 65, 57, 0.2); }

.detail-tags span {
  border-radius: 5px;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.5);
}

.access-note {
  border-radius: 9px;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.56),
    0 3px 0 rgba(132, 111, 61, 0.26),
    0 10px 18px rgba(60, 52, 33, 0.1);
}

.wiki-link-card {
  border-color: rgba(72, 69, 60, 0.48);
  background: linear-gradient(145deg, #fffdf7, #e8e2d5);
  border-radius: 10px;
  box-shadow:
    inset 1px 1px 0 #fff,
    0 4px 0 rgba(126, 118, 103, 0.7),
    0 13px 23px rgba(42, 40, 34, 0.14);
}

.wiki-link-card:hover,
.wiki-link-card:focus-visible {
  border-color: rgba(33, 35, 30, 0.72);
  box-shadow:
    inset 1px 1px 0 #fff,
    0 5px 0 rgba(126, 118, 103, 0.7),
    0 18px 29px rgba(42, 40, 34, 0.18);
  transform: translateY(-2px);
}

.visit-note-editor {
  border-radius: 10px;
  box-shadow: var(--inset-control);
}

.visit-note-editor textarea {
  border-radius: 7px;
  box-shadow: inset 0 2px 4px rgba(46, 44, 38, 0.12);
}

.toast {
  border-color: #090b09;
  background: linear-gradient(155deg, #353a34, #111310 72%);
  border-radius: 9px;
  box-shadow:
    inset 1px 1px 0 rgba(255, 255, 255, 0.18),
    0 4px 0 #080a08,
    0 16px 30px rgba(28, 27, 23, 0.28);
}

@media (hover: hover) and (pointer: fine) {
  .place-card:hover,
  .place-card:focus-within {
    transform: translate3d(0, -5px, 0) rotateX(0.7deg);
  }

  .about-card {
    transition:
      border-color var(--duration-state) var(--ease-direct),
      box-shadow 240ms var(--ease-direct),
      transform 240ms var(--ease-enter);
  }

  .about-card:hover {
    border-color: rgba(45, 43, 37, 0.62);
    box-shadow:
      inset 1px 1px 0 rgba(255, 255, 255, 0.9),
      0 4px 0 rgba(137, 130, 116, 0.62),
      0 20px 32px rgba(42, 40, 34, 0.17);
    transform: translateY(-4px) rotateX(0.55deg);
  }
}

@supports (view-transition-name: none) {
  ::view-transition-old(root) {
    animation: none;
    opacity: 0;
  }

  ::view-transition-new(root) {
    animation: none;
    mix-blend-mode: normal;
  }

  #place-list,
  #saved-list { view-transition-name: record-stack; }

  .results-heading { view-transition-name: result-register; }

  .nearest-glance:not([hidden]) { view-transition-name: nearest-readout; }

  ::view-transition-old(record-stack),
  ::view-transition-old(result-register),
  ::view-transition-old(nearest-readout) {
    animation: record-exit 150ms var(--ease-exit) both;
  }

  ::view-transition-new(record-stack),
  ::view-transition-new(result-register),
  ::view-transition-new(nearest-readout) {
    animation: record-enter 260ms var(--ease-enter) both;
  }
}

@keyframes record-exit {
  to { opacity: 0; transform: translateY(5px) scale(0.992); }
}

@keyframes record-enter {
  from { opacity: 0; transform: translateY(10px) scale(0.992); }
  to { opacity: 1; transform: translateY(0) scale(1); }
}

@media (min-width: 720px) {
  .location-card {
    width: min(76%, 532px);
    padding: 23px;
  }

  .nearest-glance {
    min-height: 208px;
    padding-inline: 18px;
  }

  .results-column { padding-inline: clamp(27px, 5vw, 58px); }

  .place-card {
    grid-template-columns: 102px minmax(0, 1fr);
    min-height: 168px;
  }

  .place-card__open { padding: 24px 72px 22px 25px; }

  .about-grid { gap: 18px; }

  .detail-body {
    margin-inline: 12px;
    padding-inline: 30px;
  }
}

@media (min-width: 1024px) {
  .discovery-column {
    border-right: 1px solid rgba(74, 70, 61, 0.52);
    box-shadow:
      inset -4px 0 9px rgba(54, 51, 44, 0.14),
      inset 0 1px 0 rgba(255, 255, 255, 0.42);
  }

  .location-card {
    width: min(74%, 544px);
    margin: 0 0 46px 46px;
  }

  .results-column {
    border-top: 0;
    padding: 29px clamp(31px, 3.5vw, 57px) 94px;
    box-shadow:
      inset 12px 0 30px rgba(64, 60, 51, 0.1),
      inset 1px 0 0 rgba(255, 255, 255, 0.66);
  }

  .era-filter {
    top: calc(var(--topbar) + 14px);
    margin: -7px -4px 32px;
    padding: 15px 16px 17px;
    background:
      linear-gradient(122deg, rgba(255, 255, 255, 0.88), transparent 42%),
      linear-gradient(180deg, rgba(248, 245, 237, 0.97), rgba(232, 226, 214, 0.97));
    box-shadow:
      inset 1px 1px 0 #fff,
      0 3px 0 rgba(143, 135, 121, 0.76),
      0 15px 28px rgba(45, 43, 37, 0.16);
    backdrop-filter: blur(14px);
  }

  .bottom-nav {
    width: 66px;
    border-radius: 15px;
  }

  .place-dialog {
    border-top: 0;
    border-right: 0;
    border-bottom: 0;
    border-left: 1px solid rgba(69, 65, 56, 0.5);
    border-radius: 18px 0 0 18px;
    box-shadow:
      inset 1px 0 0 #fff,
      -5px 0 0 rgba(121, 113, 99, 0.76),
      -34px 0 84px rgba(24, 24, 20, 0.32);
  }

  .detail-body { margin: 10px 12px 0; }
}

@media (max-width: 374px) {
  .language-picker { padding-inline: 7px 23px; }
  .language-picker::after { right: 8px; }
  .language-picker select { width: 70px; }
  .location-card { width: calc(100% - 22px); }
  .place-card { grid-template-columns: 74px minmax(0, 1fr); }
}

@media (prefers-reduced-motion: reduce) {
  ::view-transition-group(*),
  ::view-transition-old(*),
  ::view-transition-new(*) {
    animation-duration: 1ms !important;
  }

  .place-card:hover,
  .place-card:focus-within,
  .about-card:hover {
    transform: none !important;
  }
}

@media (forced-colors: active) {
  .location-card,
  .era-filter,
  .place-card,
  .about-card,
  .bottom-nav,
  .place-dialog,
  .detail-body {
    border: 1px solid CanvasText;
    box-shadow: none;
  }

  .place-card::after,
  .location-card::after { display: none; }
}

/*
 * NEARPAST — coordinate-led refinement
 * The spatial instrument below is no longer decorative: its rings, vectors,
 * and markers all share the same 2.2 km radial scale used by app.js.
 */

:root {
  --font-body: "Segoe UI Variable Text", "Segoe UI", "Noto Sans JP", "Yu Gothic UI", Meiryo, system-ui, sans-serif;
  --font-display: "Segoe UI Variable Display", "Segoe UI Variable Text", "Segoe UI", "Noto Sans JP", "Yu Gothic UI", Meiryo, system-ui, sans-serif;
  --font-numeric: "Segoe UI Variable Text", Bahnschrift, "Arial Narrow", system-ui, sans-serif;
}

html:lang(zh-Hans) {
  --font-body: "Segoe UI Variable Text", "Microsoft YaHei UI", "PingFang SC", system-ui, sans-serif;
  --font-display: "Segoe UI Variable Display", "Microsoft YaHei UI", "PingFang SC", system-ui, sans-serif;
}

html:lang(zh-Hant) {
  --font-body: "Segoe UI Variable Text", "Microsoft JhengHei UI", "PingFang TC", system-ui, sans-serif;
  --font-display: "Segoe UI Variable Display", "Microsoft JhengHei UI", "PingFang TC", system-ui, sans-serif;
}

html:lang(ko) {
  --font-body: "Segoe UI Variable Text", "Malgun Gothic", "Apple SD Gothic Neo", system-ui, sans-serif;
  --font-display: "Segoe UI Variable Display", "Malgun Gothic", "Apple SD Gothic Neo", system-ui, sans-serif;
}

html:lang(th) {
  --font-body: "Segoe UI Variable Text", "Leelawadee UI", Tahoma, system-ui, sans-serif;
  --font-display: "Segoe UI Variable Display", "Leelawadee UI", Tahoma, system-ui, sans-serif;
}

body {
  font-feature-settings: "kern" 1, "palt" 1;
  font-kerning: normal;
}

.brand-mark::before { content: none; }

.brand-mark svg {
  display: block;
  width: 31px;
  height: 31px;
  overflow: visible;
}

.brand-orbit,
.brand-axis,
.brand-vector {
  fill: none;
  stroke: #f8f5ed;
  stroke-linecap: round;
}

.brand-orbit--outer { stroke-width: 1.25; opacity: 0.88; }
.brand-orbit--inner { stroke-width: 1; opacity: 0.48; }
.brand-axis { stroke-width: 1; opacity: 0.52; }
.brand-vector { stroke: #89b7ad; stroke-width: 1.8; }
.brand-origin { fill: #e66a5e; stroke: #f8f5ed; stroke-width: 1.2; }

.brand-copy strong {
  font-family: var(--font-display);
  font-size: 16px;
  font-weight: 800;
  letter-spacing: -0.035em;
}

.brand-copy small {
  font-family: var(--font-body);
  font-weight: 700;
  letter-spacing: 0.075em;
}

.hero { display: none; }

.discovery-column {
  grid-template-rows: 500px auto;
  min-height: 0;
  overflow: clip;
}

.proximity-map {
  grid-area: 1 / 1;
  min-height: 500px;
}

.proximity-map__heading {
  top: 17px;
  right: 17px;
  left: 17px;
  align-items: center;
}

.proximity-map h2 {
  margin-top: 3px;
  font-family: var(--font-display);
  font-size: 16px;
  font-weight: 760;
  letter-spacing: -0.035em;
}

.map-note {
  flex: 0 0 auto;
  padding: 6px 8px;
  border: 1px solid rgba(50, 111, 102, 0.28);
  background: rgba(239, 243, 237, 0.7);
  border-radius: 999px;
  color: var(--verdigris);
  font-family: var(--font-body);
  font-size: 8px;
  letter-spacing: 0.02em;
  text-transform: none;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.8);
}

.proximity-canvas {
  background:
    radial-gradient(circle at 50% 50%, rgba(247, 246, 241, 0.92), rgba(213, 210, 198, 0.66) 58%, rgba(183, 178, 164, 0.82)),
    var(--bg-deep);
}

.proximity-canvas::before,
.proximity-canvas::after { display: none; }

.field-plot {
  position: absolute;
  z-index: 2;
  top: 70px;
  left: 50%;
  width: min(calc(100vw - 34px), 392px);
  aspect-ratio: 1;
  border: 1px solid rgba(45, 49, 42, 0.23);
  background:
    linear-gradient(rgba(45, 49, 42, 0.075) 1px, transparent 1px),
    linear-gradient(90deg, rgba(45, 49, 42, 0.075) 1px, transparent 1px),
    linear-gradient(rgba(45, 49, 42, 0.13) 1px, transparent 1px),
    linear-gradient(90deg, rgba(45, 49, 42, 0.13) 1px, transparent 1px),
    radial-gradient(circle at 50% 50%, rgba(249, 247, 240, 0.92), rgba(226, 222, 211, 0.74));
  background-position: center;
  background-size: 24px 24px, 24px 24px, 96px 96px, 96px 96px, auto;
  border-radius: 50%;
  box-shadow:
    inset 0 2px 7px rgba(48, 46, 40, 0.18),
    inset 0 -1px 0 rgba(255, 255, 255, 0.68),
    0 1px 0 rgba(255, 255, 255, 0.5),
    0 18px 36px rgba(44, 42, 36, 0.13);
  transform: translateX(-50%);
  isolation: isolate;
}

.field-plot::before {
  position: absolute;
  z-index: 0;
  inset: 7%;
  border: 1px solid rgba(50, 111, 102, 0.14);
  border-radius: 50%;
  content: "";
  pointer-events: none;
}

.field-plot::after {
  position: absolute;
  z-index: 1;
  top: 50%;
  left: 50%;
  width: 43%;
  height: 1px;
  background: linear-gradient(90deg, rgba(50, 111, 102, 0.42), transparent);
  content: "";
  opacity: 0.36;
  transform: rotate(-24deg);
  transform-origin: left center;
  pointer-events: none;
}

.discovery-column:has(.location-card.is-locating) .field-plot::after {
  opacity: 0.9;
  animation: locate-scan 1.15s linear infinite;
}

.map-ring {
  z-index: 1;
  border-color: rgba(48, 52, 44, 0.3);
  box-shadow: none;
}

.map-ring--outer {
  width: 86%;
  height: 86%;
  border-color: rgba(48, 52, 44, 0.4);
}

.map-ring--middle {
  width: 39.09%;
  height: 39.09%;
  border-style: dashed;
}

.map-ring--inner {
  width: 19.55%;
  height: 19.55%;
  border-style: dotted;
}

.map-ring > span {
  position: absolute;
  top: 0;
  left: 50%;
  padding: 1px 5px 2px;
  border: 1px solid rgba(48, 52, 44, 0.16);
  background: rgba(242, 239, 230, 0.9);
  border-radius: 999px;
  color: rgba(40, 43, 37, 0.66);
  font-family: var(--font-numeric);
  font-size: 7px;
  font-weight: 700;
  letter-spacing: 0.02em;
  line-height: 1;
  white-space: nowrap;
  transform: translate(-50%, -50%);
}

.direction {
  z-index: 6;
  color: rgba(30, 33, 28, 0.62);
  font-family: var(--font-body);
  font-size: 8px;
  letter-spacing: 0;
}

.direction--north { top: 1.5%; }
.direction--east { right: 2.2%; }
.direction--south { bottom: 1.5%; }
.direction--west { left: 2.2%; }

#map-markers {
  z-index: 3;
}

.map-connections {
  position: absolute;
  z-index: 0;
  inset: 0;
  width: 100%;
  height: 100%;
  overflow: visible;
  pointer-events: none;
}

.map-connection {
  stroke: rgba(62, 68, 58, 0.34);
  stroke-width: 0.32;
  stroke-dasharray: 1.2 1.35;
  vector-effect: non-scaling-stroke;
}

.map-connection.is-nearest {
  stroke: var(--signal);
  stroke-width: 0.62;
  stroke-dasharray: none;
}

.map-connection[data-era="ancient"] { stroke: color-mix(in srgb, var(--ancient) 68%, transparent); }
.map-connection[data-era="medieval"] { stroke: color-mix(in srgb, var(--medieval) 68%, transparent); }
.map-connection[data-era="early-modern"] { stroke: color-mix(in srgb, var(--early-modern) 68%, transparent); }
.map-connection[data-era="modern"] { stroke: color-mix(in srgb, var(--modern) 68%, transparent); }
.map-connection.is-nearest { stroke: var(--signal); }

.current-point {
  width: 34px;
  height: 34px;
  border-color: rgba(50, 111, 102, 0.66);
  background: rgba(238, 235, 225, 0.84);
  box-shadow:
    inset 0 1px 2px rgba(45, 43, 37, 0.18),
    0 0 0 6px rgba(50, 111, 102, 0.08);
}

.current-point::before { width: 50px; }
.current-point::after { height: 50px; }
.current-point b { top: calc(100% + 9px); font-family: var(--font-body); }

.map-marker {
  width: 32px;
  height: 32px;
  border-width: 2px;
  font-size: 9px;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.28),
    0 2px 0 color-mix(in srgb, var(--marker) 70%, #222),
    0 7px 13px rgba(37, 36, 31, 0.22);
}

.map-marker > span { display: block; }

.map-marker.is-nearest {
  z-index: 8;
  display: flex;
  width: auto;
  min-width: 66px;
  height: 34px;
  justify-content: center;
  gap: 5px;
  padding: 0 9px;
  border-radius: 999px;
  background: var(--signal);
  white-space: nowrap;
}

.map-marker.is-nearest > span {
  display: grid;
  width: 17px;
  height: 17px;
  place-items: center;
  border: 1px solid rgba(255, 255, 255, 0.62);
  border-radius: 50%;
  font-size: 8px;
}

.map-marker.is-nearest small {
  font-family: var(--font-numeric);
  font-size: 8px;
  font-weight: 760;
}

.map-disclaimer {
  right: 17px;
  bottom: 15px;
  left: 17px;
  color: rgba(35, 38, 32, 0.62);
  font-size: 8px;
  text-align: center;
}

.location-card {
  grid-area: 2 / 1;
  align-self: start;
  width: calc(100% - 30px);
  margin: -58px auto 32px;
  padding: 16px;
}

.nearest-glance {
  min-height: 136px;
  margin: 12px 0 13px;
  padding: 14px 12px 12px;
}

.nearest-glance b {
  font-size: clamp(54px, 18vw, 78px);
  letter-spacing: -0.075em;
}

.nearest-glance strong {
  font-family: var(--font-display);
  font-size: clamp(17px, 4.6vw, 22px);
  font-weight: 760;
  letter-spacing: -0.035em;
}

.era-filter {
  margin: 0 0 22px;
  padding: 7px;
  border-radius: 13px;
}

.era-options {
  min-height: 48px;
  padding: 4px;
}

.era-options::before {
  top: 4px;
  bottom: 4px;
  left: 4px;
  width: calc((100% - 8px) / 5);
  transform: translate3d(0, -1px, 0);
}

.era-options:has(input[value="ancient"]:checked)::before { transform: translate3d(100%, -1px, 0); }
.era-options:has(input[value="medieval"]:checked)::before { transform: translate3d(200%, -1px, 0); }
.era-options:has(input[value="early-modern"]:checked)::before { transform: translate3d(300%, -1px, 0); }
.era-options:has(input[value="modern"]:checked)::before { transform: translate3d(400%, -1px, 0); }

.era-options span {
  min-height: 40px;
  font-size: 10px;
}

.results-heading h2,
.place-card__open h3,
.nearest-glance strong,
.page-intro h1,
.detail-hero h1,
.detail-section h2,
.about-card h2,
.empty-state h2 {
  font-family: var(--font-display);
  font-weight: 760;
  letter-spacing: -0.035em;
}

@media (min-width: 720px) and (max-width: 1023px) {
  .discovery-column { grid-template-rows: 604px auto; }
  .proximity-map { min-height: 604px; }

  .field-plot {
    top: 76px;
    width: min(calc(100vw - 86px), 500px);
  }

  .location-card {
    width: min(68%, 500px);
    margin-top: -72px;
    padding: 19px;
  }

  .nearest-glance { min-height: 145px; }
}

@media (min-width: 1024px) {
  .discovery-column {
    display: grid;
    grid-template-rows: minmax(0, 1fr) auto;
    overflow: hidden;
  }

  .proximity-map {
    grid-area: 1 / 1;
    min-height: 0;
  }

  .proximity-map__heading {
    top: 27px;
    right: 34px;
    left: 34px;
  }

  .field-plot {
    top: 58px;
    left: 50%;
    width: min(74%, calc(100svh - var(--topbar) - 238px), 500px);
  }

  .location-card {
    grid-area: 2 / 1;
    display: grid;
    grid-template-areas:
      "where nearest action"
      "privacy nearest action";
    grid-template-columns: minmax(132px, 0.8fr) minmax(190px, 1.35fr) minmax(120px, 0.72fr);
    align-self: auto;
    align-items: center;
    gap: 5px 12px;
    width: calc(100% - 48px);
    max-width: none;
    margin: 0 24px 24px;
    padding: 13px;
  }

  .location-card__top { grid-area: where; }

  .nearest-glance {
    grid-area: nearest;
    grid-template-columns: minmax(0, 1fr) 24px;
    min-height: 98px;
    margin: 0;
    padding: 10px 9px 9px;
    border: 1px solid rgba(75, 71, 61, 0.34);
  }

  .nearest-glance::after { left: 7px; }
  .nearest-glance b { font-size: clamp(41px, 3.9vw, 54px); }
  .nearest-glance span { gap: 2px; padding-top: 8px; }
  .nearest-glance strong { font-size: clamp(13px, 1.2vw, 16px); }

  .location-label { font-size: 12px; }
  .location-detail { font-size: 8px; }

  .location-button {
    grid-area: action;
    align-self: stretch;
    min-height: 74px;
    padding-inline: 10px;
  }

  .privacy-note {
    grid-area: privacy;
    justify-content: flex-start;
    margin: 0;
    font-size: 7px;
    text-align: left;
  }

  .map-disclaimer {
    right: 28px;
    bottom: 8px;
    left: auto;
    max-width: 260px;
    text-align: right;
  }

  .era-filter {
    top: calc(var(--topbar) + 12px);
    margin: -5px -3px 25px;
    padding: 7px;
  }
}

@media (max-width: 374px) {
  .field-plot { width: calc(100vw - 22px); }
  .location-card { width: calc(100% - 22px); }
  .nearest-glance b { font-size: 53px; }
}

@media (prefers-reduced-motion: reduce) {
  .discovery-column:has(.location-card.is-locating) .field-plot::after {
    animation: none !important;
    opacity: 0.45;
    transform: rotate(-24deg);
  }
}

@media (forced-colors: active) {
  .field-plot,
  .map-note { border: 1px solid CanvasText; box-shadow: none; }
  .map-connection { stroke: CanvasText; }
}

/*
 * NEARPAST — time-echo interaction layer
 * One visual grammar now connects the origin pulse, historical layers,
 * application mark, supporting imagery, and motion feedback.
 */

:root {
  --font-body: "Aptos", "Segoe UI Variable Text", "Noto Sans JP", "BIZ UDPGothic", "Yu Gothic UI", system-ui, sans-serif;
  --font-display: "Aptos Display", "Segoe UI Variable Display", "Noto Sans JP", "BIZ UDPGothic", "Yu Gothic UI", system-ui, sans-serif;
  --topbar: 76px;
}

body {
  background:
    radial-gradient(circle at 12% -8%, rgba(255, 255, 255, 0.82) 0 9rem, transparent 31rem),
    repeating-radial-gradient(circle at 12% -8%, transparent 0 95px, rgba(50, 111, 102, 0.045) 96px 97px),
    repeating-linear-gradient(180deg, transparent 0 82px, rgba(82, 76, 62, 0.035) 83px 84px),
    linear-gradient(128deg, rgba(213, 201, 168, 0.34), transparent 30%, rgba(180, 204, 198, 0.2) 64%, rgba(211, 169, 142, 0.16)),
    var(--bg);
  font-size: 17px;
}

.topbar {
  min-height: var(--topbar);
  padding-block: 11px;
  overflow: hidden;
  background:
    repeating-radial-gradient(circle at 42px 104%, transparent 0 28px, rgba(50, 111, 102, 0.075) 29px 30px),
    linear-gradient(180deg, rgba(255, 255, 255, 0.94), rgba(235, 230, 218, 0.95));
}

.topbar::before {
  position: absolute;
  z-index: -1;
  inset: 0;
  background:
    linear-gradient(90deg,
      var(--ancient) 0 22%,
      var(--medieval) 22% 47%,
      var(--early-modern) 47% 73%,
      var(--modern) 73% 100%) bottom / 100% 3px no-repeat;
  content: "";
  opacity: 0.72;
  pointer-events: none;
}

.topbar::after {
  right: 14px;
  bottom: 8px;
  left: auto;
  width: min(34vw, 260px);
  height: 1px;
  background: repeating-linear-gradient(90deg, rgba(50, 111, 102, 0.5) 0 13px, transparent 13px 18px);
  opacity: 0.36;
}

.brand { gap: 12px; }

.brand-mark {
  width: 44px;
  height: 44px;
  border-radius: 12px 12px 12px 5px;
  background:
    linear-gradient(145deg, rgba(255, 255, 255, 0.16), transparent 35%),
    linear-gradient(155deg, #30352e, #111310 72%);
  box-shadow:
    inset 1px 1px 0 rgba(255, 255, 255, 0.23),
    inset -1px -1px 0 rgba(0, 0, 0, 0.76),
    3px 3px 0 color-mix(in srgb, var(--verdigris) 72%, #d4cec0),
    7px 10px 18px rgba(38, 37, 32, 0.2);
}

.brand-mark svg {
  width: 36px;
  height: 36px;
}

.brand-echo,
.brand-strata,
.brand-timecut {
  fill: none;
  stroke: #f8f5ed;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.brand-echo--outer { stroke-width: 1.15; opacity: 0.76; }
.brand-echo--middle { stroke: #8bb9ae; stroke-width: 1.35; opacity: 0.92; }
.brand-echo--inner { stroke-width: 1.05; opacity: 0.54; }
.brand-strata { stroke-width: 1.05; opacity: 0.7; }
.brand-timecut { stroke: #8bb9ae; stroke-width: 1.2; }
.brand-origin { fill: #e66a5e; stroke: #f8f5ed; stroke-width: 1.05; }
.brand-discovery { fill: #bca45f; stroke: #f8f5ed; stroke-width: 0.9; }

.brand-copy { gap: 2px; }

.brand-copy strong {
  font-size: 18px;
  font-weight: 780;
  letter-spacing: -0.045em;
}

.brand-copy small {
  font-size: 11px;
  font-weight: 650;
  letter-spacing: 0.08em;
}

.language-picker select { font-size: 12px; font-weight: 650; }

.section-kicker,
.eyebrow {
  font-size: 11px;
  font-weight: 760;
  letter-spacing: 0.095em;
}

.discovery-column { grid-template-rows: 570px auto; }
.proximity-map { min-height: 570px; }

.proximity-map__heading {
  top: 20px;
  right: 20px;
  left: 20px;
}

.proximity-map h2 {
  max-width: 25rem;
  margin-top: 4px;
  font-size: 18px;
  font-weight: 760;
  line-height: 1.25;
}

.map-status-line {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px 12px;
  margin-top: 8px;
  color: rgba(43, 45, 39, 0.68);
  font-size: 11px;
  font-weight: 690;
  line-height: 1.25;
}

.map-center-label,
.map-density {
  display: inline-flex;
  align-items: center;
  white-space: nowrap;
}

.map-center-label::before {
  width: 7px;
  height: 7px;
  margin-right: 7px;
  border: 2px solid rgba(249, 247, 240, 0.9);
  background: var(--signal);
  border-radius: 50%;
  box-shadow: 0 0 0 1px rgba(105, 47, 40, 0.42);
  content: "";
}

.map-density {
  padding-left: 12px;
  border-left: 1px solid rgba(45, 49, 42, 0.22);
  color: rgba(35, 38, 32, 0.82);
  font-family: var(--font-numeric);
  font-weight: 760;
}

.proximity-canvas {
  background:
    conic-gradient(from 212deg at 50% 50%, rgba(213, 201, 168, 0.27), rgba(180, 204, 198, 0.19), rgba(211, 169, 142, 0.18), rgba(194, 202, 179, 0.24), rgba(213, 201, 168, 0.27)),
    radial-gradient(circle at 50% 50%, rgba(249, 247, 240, 0.92), rgba(218, 214, 202, 0.7) 62%, rgba(181, 177, 164, 0.86));
}

.field-plot {
  --map-zoom: 1;
  top: 84px;
  width: min(calc(100vw - 32px), 380px);
  overflow: hidden;
  background:
    linear-gradient(rgba(45, 49, 42, 0.065) 1px, transparent 1px),
    linear-gradient(90deg, rgba(45, 49, 42, 0.065) 1px, transparent 1px),
    linear-gradient(rgba(45, 49, 42, 0.115) 1px, transparent 1px),
    linear-gradient(90deg, rgba(45, 49, 42, 0.115) 1px, transparent 1px),
    repeating-radial-gradient(circle at 50% 50%, transparent 0 31px, rgba(50, 111, 102, 0.048) 32px 33px),
    radial-gradient(circle at 50% 50%, rgba(249, 247, 240, 0.96), rgba(226, 222, 211, 0.8));
  background-position: center;
  background-size: 24px 24px, 24px 24px, 96px 96px, 96px 96px, auto, auto;
  cursor: grab;
  touch-action: none;
}

.field-plot:active,
.field-plot.is-panning { cursor: grabbing; }

.field-plot:focus-visible {
  outline: 3px solid color-mix(in srgb, var(--verdigris) 74%, white);
  outline-offset: 4px;
}

.field-plot::before {
  z-index: 1;
  inset: 0;
  border-color: rgba(50, 111, 102, 0.23);
  background:
    linear-gradient(rgba(45, 49, 42, 0.052) 1px, transparent 1px),
    linear-gradient(90deg, rgba(45, 49, 42, 0.052) 1px, transparent 1px),
    radial-gradient(circle at 50% 50%, transparent 58%, rgba(44, 46, 40, 0.16) 100%);
  background-size: 24px 24px, 24px 24px, auto;
  box-shadow: inset 0 0 34px rgba(38, 42, 35, 0.08);
}

.field-plot::after { z-index: 2; }

.map-tile-layer {
  position: absolute;
  z-index: 0;
  inset: 0;
  overflow: hidden;
  background: rgba(228, 224, 213, 0.88);
  pointer-events: none;
}

.map-tile {
  position: absolute;
  top: 0;
  left: 0;
  display: block;
  max-width: none;
  opacity: 0;
  filter: saturate(0.58) sepia(0.08) contrast(0.93) brightness(1.035);
  transform-origin: top left;
  transition: opacity 180ms var(--ease-direct);
  user-select: none;
}

.map-tile.is-loaded { opacity: 0.82; }
.map-tile.is-error { display: none; }

.map-ring {
  z-index: 3;
  background: rgba(248, 245, 236, 0.025);
  transition:
    width 120ms var(--ease-direct),
    height 120ms var(--ease-direct),
    top 120ms var(--ease-direct),
    left 120ms var(--ease-direct);
}

.map-ring > span {
  padding: 3px 7px;
  font-size: 11px;
  font-weight: 720;
}

.direction {
  z-index: 9;
  font-size: 11px;
  font-weight: 760;
}

.current-point {
  z-index: 10;
  width: 38px;
  height: 38px;
  border: 1px solid rgba(50, 111, 102, 0.78);
  background: rgba(245, 241, 230, 0.92);
  box-shadow:
    inset 0 1px 2px rgba(45, 43, 37, 0.17),
    0 0 0 7px rgba(50, 111, 102, 0.09),
    0 8px 18px rgba(35, 36, 31, 0.18);
  isolation: isolate;
}

.current-point::before,
.current-point::after { display: none; }

.current-point span {
  width: 12px;
  height: 12px;
  border-width: 3px;
  box-shadow: 0 0 0 1px var(--signal), 0 0 18px rgba(184, 64, 53, 0.5);
}

.current-point b {
  z-index: 3;
  top: calc(100% + 10px);
  padding: 5px 9px 6px;
  border: 1px solid rgba(45, 49, 42, 0.28);
  color: var(--ink);
  background: rgba(249, 247, 240, 0.93);
  border-radius: 999px;
  box-shadow: 0 4px 10px rgba(42, 40, 34, 0.13);
  font-size: 11px;
  font-weight: 780;
  line-height: 1;
}

.sonar-ring {
  position: absolute;
  z-index: -1;
  top: 50%;
  left: 50%;
  width: 42px;
  height: 42px;
  border: 1.5px solid rgba(50, 111, 102, 0.72);
  border-radius: 50%;
  opacity: 0;
  pointer-events: none;
  transform: translate(-50%, -50%) scale(0.72);
  animation: current-location-sonar 3.6s var(--ease-direct) infinite;
}

.sonar-ring--two { animation-delay: 1.2s; }
.sonar-ring--three { animation-delay: 2.4s; }

.map-leader {
  stroke: rgba(42, 47, 40, 0.52);
  stroke-width: 0.52;
  stroke-dasharray: 1 1;
  vector-effect: non-scaling-stroke;
}

.map-anchor {
  --anchor: var(--ink);
  position: absolute;
  z-index: 5;
  width: 9px;
  height: 9px;
  border: 2px solid rgba(249, 247, 240, 0.96);
  background: var(--anchor);
  border-radius: 50%;
  box-shadow: 0 0 0 1px color-mix(in srgb, var(--anchor) 72%, #222);
  pointer-events: none;
  transform: translate(-50%, -50%);
}

.map-anchor[data-era="ancient"] { --anchor: var(--ancient); }
.map-anchor[data-era="medieval"] { --anchor: var(--medieval); }
.map-anchor[data-era="early-modern"] { --anchor: var(--early-modern); }
.map-anchor[data-era="modern"] { --anchor: var(--modern); }

.map-marker {
  z-index: 7;
  width: auto;
  min-width: 46px;
  height: 31px;
  padding: 0 9px;
  border-width: 2px;
  border-radius: 999px;
  font-family: var(--font-body);
  font-size: 11px;
  font-weight: 760;
  line-height: 1;
  white-space: nowrap;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.3),
    0 2px 0 color-mix(in srgb, var(--marker) 70%, #222),
    0 7px 14px rgba(37, 36, 31, 0.24);
}

.map-marker:hover,
.map-marker:focus-visible { z-index: 9; }

.map-marker > span { display: block; }

.map-marker.is-nearest {
  min-width: 94px;
  height: 34px;
  gap: 7px;
  padding-inline: 10px;
}

.map-marker.is-nearest > span {
  display: block;
  width: auto;
  height: auto;
  border: 0;
  border-radius: 0;
  font-size: 11px;
}

.map-marker.is-nearest small {
  padding-left: 7px;
  border-left: 1px solid rgba(255, 255, 255, 0.46);
  font-size: 11px;
}

.map-controls {
  position: absolute;
  z-index: 14;
  right: auto;
  bottom: 18px;
  left: 50%;
  display: grid;
  grid-template-columns: 44px 44px 60px 44px;
  overflow: hidden;
  border: 1px solid rgba(45, 49, 42, 0.42);
  background: rgba(247, 244, 235, 0.9);
  border-radius: 13px;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.86),
    0 3px 0 rgba(119, 113, 98, 0.54),
    0 10px 22px rgba(37, 36, 31, 0.2);
  backdrop-filter: blur(12px);
  transform: translateX(-50%);
}

.map-controls .map-recenter svg {
  width: 18px;
  height: 18px;
  fill: none;
  stroke: currentColor;
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-width: 1.8;
}

.map-controls .map-recenter.is-away {
  color: var(--verdigris);
  background: rgba(50, 111, 102, 0.09);
}

.map-controls button {
  min-width: 44px;
  min-height: 44px;
  padding: 0;
  border: 0;
  color: var(--ink);
  background: transparent;
  font-size: 22px;
  font-weight: 650;
  cursor: pointer;
}

.map-controls button + button { border-left: 1px solid rgba(45, 49, 42, 0.22); }
.map-controls button:hover { background: rgba(50, 111, 102, 0.1); }
.map-controls button:active { background: rgba(50, 111, 102, 0.17); box-shadow: inset 0 2px 4px rgba(31, 35, 30, 0.2); }
.map-controls button:disabled { color: rgba(45, 49, 42, 0.3); cursor: default; }
.map-controls .map-zoom-value { font-size: 11px; font-weight: 780; }

.map-utility-bar {
  position: absolute;
  z-index: 12;
  right: 16px;
  bottom: 31px;
  left: 16px;
  display: flex;
  min-height: 42px;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  padding: 8px 11px;
  border: 1px solid rgba(61, 62, 54, 0.28);
  color: rgba(35, 38, 32, 0.76);
  background: rgba(241, 237, 226, 0.88);
  border-radius: 11px;
  box-shadow: 0 6px 16px rgba(42, 40, 34, 0.12);
  font-size: 11.5px;
  font-weight: 650;
  line-height: 1.3;
  backdrop-filter: blur(10px);
}

.map-gesture {
  display: inline-flex;
  min-width: 0;
  align-items: center;
  gap: 7px;
}

.map-gesture svg {
  width: 20px;
  height: 20px;
  flex: 0 0 auto;
  fill: none;
  stroke: var(--verdigris);
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-width: 1.7;
}

.map-route-note { color: var(--muted); text-align: right; }

.map-provenance {
  display: inline-flex;
  flex: 0 0 auto;
  align-items: center;
  justify-content: flex-end;
  gap: 6px;
  text-align: right;
}

.map-provenance a {
  color: color-mix(in srgb, var(--verdigris) 86%, var(--ink));
  font-weight: 760;
  text-decoration-color: rgba(50, 111, 102, 0.38);
  text-underline-offset: 2px;
}

.map-provenance a:hover { text-decoration-color: currentColor; }
.map-provenance i { color: rgba(45, 49, 42, 0.32); font-style: normal; }

.location-card {
  width: calc(100% - 32px);
  margin: -20px auto 34px;
  padding: 18px;
}

.location-label {
  margin-top: 3px;
  font-size: 15px;
  font-weight: 760;
  line-height: 1.35;
}

.location-detail {
  margin-top: 3px;
  font-size: 12px;
  line-height: 1.5;
}

.privacy-note {
  margin-top: 12px;
  font-size: 11.5px;
  line-height: 1.45;
}

.nearest-glance strong { font-size: clamp(18px, 4.8vw, 23px); line-height: 1.25; }
.nearest-glance span small { font-size: 11px; }

.era-filter { margin-bottom: 24px; padding: 8px; }

.era-options {
  display: flex;
  min-height: 58px;
  gap: 5px;
  padding: 5px;
  overflow-x: auto;
  overscroll-behavior-inline: contain;
  scroll-snap-type: inline proximity;
  scrollbar-width: none;
}

.era-options::-webkit-scrollbar { display: none; }
.era-options::before { display: none; }
.era-options label { flex: 1 0 74px; scroll-snap-align: start; }

.era-options span {
  min-height: 46px;
  padding: 6px 8px;
  border: 1px solid transparent;
  border-radius: 8px;
  font-size: 12px;
  font-weight: 720;
  line-height: 1.2;
  hyphens: none;
  overflow-wrap: normal;
  word-break: keep-all;
  text-shadow: none;
}

.era-options input:checked + span {
  border-color: rgba(8, 10, 8, 0.88);
  color: #fff;
  background: linear-gradient(155deg, #3a3e37, #151714 72%);
  box-shadow:
    inset 1px 1px 0 rgba(255, 255, 255, 0.18),
    0 3px 0 #080a08,
    0 7px 14px rgba(34, 33, 28, 0.2);
  text-shadow: 0 -1px 0 rgba(0, 0, 0, 0.5);
}

.era-options label:has(input[value="ancient"]:checked) span { background: linear-gradient(155deg, color-mix(in srgb, var(--ancient) 80%, #fff), color-mix(in srgb, var(--ancient) 82%, #111)); }
.era-options label:has(input[value="medieval"]:checked) span { background: linear-gradient(155deg, color-mix(in srgb, var(--medieval) 80%, #fff), color-mix(in srgb, var(--medieval) 82%, #111)); }
.era-options label:has(input[value="early-modern"]:checked) span { background: linear-gradient(155deg, color-mix(in srgb, var(--early-modern) 80%, #fff), color-mix(in srgb, var(--early-modern) 82%, #111)); }
.era-options label:has(input[value="modern"]:checked) span { background: linear-gradient(155deg, color-mix(in srgb, var(--modern) 80%, #fff), color-mix(in srgb, var(--modern) 82%, #111)); }

.results-heading { align-items: start; }
.results-heading h2 { font-size: clamp(30px, 8vw, 40px); }

.place-list { gap: 19px; }

.place-card {
  grid-template-areas:
    "media"
    "open";
  grid-template-columns: minmax(0, 1fr);
  min-height: 0;
  margin-right: 7px;
}

.place-card__media {
  position: relative;
  z-index: 1;
  grid-area: media;
  height: 138px;
  margin: 0;
  overflow: hidden;
  border-bottom: 1px solid rgba(61, 62, 54, 0.34);
  background: color-mix(in srgb, var(--era-soft) 72%, #d8d3c7);
  border-radius: 11px 11px 0 0;
  isolation: isolate;
}

.place-card__media::after {
  position: absolute;
  z-index: 1;
  inset: 0;
  background:
    linear-gradient(180deg, rgba(16, 18, 15, 0.04) 35%, rgba(16, 18, 15, 0.68) 100%),
    linear-gradient(90deg, color-mix(in srgb, var(--era) 34%, transparent), transparent 42%);
  content: "";
  pointer-events: none;
}

.place-card__media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  filter: saturate(0.78) contrast(1.04) sepia(0.08);
  transform: scale(1.012);
  transition: filter 320ms var(--ease-direct), transform 460ms var(--ease-enter);
}

.place-card:hover .place-card__media img,
.place-card:focus-within .place-card__media img {
  filter: saturate(0.94) contrast(1.05);
  transform: scale(1.045);
}

.place-card__media figcaption {
  position: absolute;
  z-index: 3;
  right: 9px;
  bottom: 8px;
  left: 12px;
  min-width: 0;
}

.place-card__media figcaption a {
  display: flex;
  min-width: 0;
  align-items: center;
  gap: 7px;
  color: rgba(255, 255, 255, 0.94);
  font-size: 11px;
  line-height: 1.25;
  text-decoration: none;
  text-shadow: 0 1px 4px rgba(0, 0, 0, 0.8);
}

.place-card__media figcaption strong {
  flex: 0 0 auto;
  padding: 3px 6px;
  border: 1px solid rgba(255, 255, 255, 0.48);
  background: rgba(18, 21, 18, 0.48);
  border-radius: 5px;
  font-size: 10.5px;
  letter-spacing: 0.02em;
}

.place-card__media figcaption span {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.place-card__media.is-fallback::after { opacity: 0.24; }

.place-media-fallback {
  position: absolute;
  inset: 0;
  display: grid;
  place-content: center;
  gap: 5px;
  overflow: hidden;
  color: color-mix(in srgb, var(--era) 86%, #161814);
  background:
    repeating-linear-gradient(180deg, transparent 0 24px, color-mix(in srgb, var(--era) 10%, transparent) 25px 26px),
    linear-gradient(128deg, rgba(255, 255, 255, 0.62), transparent 42%),
    color-mix(in srgb, var(--era-soft) 74%, #e5e0d4);
  text-align: center;
}

.place-media-fallback::before,
.place-media-fallback::after,
.place-media-ripple {
  position: absolute;
  top: 82%;
  left: 19%;
  border: 1px solid color-mix(in srgb, var(--era) 38%, transparent);
  border-radius: 50%;
  content: "";
  transform: translate(-50%, -50%);
}

.place-media-fallback::before { width: 190px; height: 190px; }
.place-media-fallback::after { width: 125px; height: 125px; }
.place-media-ripple { width: 64px; height: 64px; }

.place-media-fallback b,
.place-media-fallback small { position: relative; z-index: 2; }
.place-media-fallback b { font-size: 15px; font-weight: 780; }
.place-media-fallback small { font-size: 11px; font-weight: 650; }

.place-card__media.is-loading .place-media-fallback::after {
  animation: media-search-pulse 1.8s var(--ease-direct) infinite;
}

.place-card__distance {
  position: absolute;
  z-index: 5;
  top: 11px;
  left: 12px;
  display: inline-flex;
  width: auto;
  min-height: 43px;
  align-items: center;
  gap: 8px;
  padding: 7px 10px;
  border: 1px solid rgba(255, 255, 255, 0.52);
  color: #fff;
  background: rgba(24, 27, 23, 0.7);
  border-radius: 8px;
  box-shadow: 0 4px 12px rgba(18, 20, 17, 0.22);
  backdrop-filter: blur(10px);
}

.place-card__distance strong {
  color: #fff;
  font-size: 19px;
  text-shadow: 0 1px 3px rgba(0, 0, 0, 0.55);
}

.place-card__distance small {
  max-width: 5.4em;
  color: rgba(255, 255, 255, 0.82);
  font-size: 11px;
  line-height: 1.2;
  text-align: left;
}

.place-card__open {
  grid-area: open;
  min-width: 0;
  padding: 22px 20px 22px 20px;
  border-radius: 0 0 11px 11px;
}

.place-card__meta { gap: 8px; font-size: 11.5px; line-height: 1.35; }
.era-badge { min-height: 26px; padding-inline: 8px; font-size: 11px; }

.place-card h3 {
  margin: 10px 0 7px;
  font-size: clamp(20px, 5.4vw, 25px);
  font-weight: 740;
  line-height: 1.34;
}

.place-card__summary {
  font-size: 14px;
  line-height: 1.65;
  -webkit-line-clamp: 3;
}

.place-card__hint { margin-top: 12px; font-size: 12px; }

.save-toggle {
  z-index: 5;
  top: 10px;
  right: 10px;
  color: #fff;
  background: rgba(24, 27, 23, 0.68);
  border-color: rgba(255, 255, 255, 0.48);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.28),
    0 3px 0 rgba(18, 20, 17, 0.58),
    0 8px 17px rgba(18, 20, 17, 0.25);
  backdrop-filter: blur(10px);
}

.save-toggle[aria-pressed="true"] {
  color: #fff;
  background: rgba(184, 64, 53, 0.88);
}

.about-card h2 { font-size: 19px; line-height: 1.35; }
.about-card p { font-size: 14px; line-height: 1.75; }
.page-intro > p:last-child { font-size: 14px; line-height: 1.75; }
.coverage-note { font-size: 13px; line-height: 1.6; }
.nav-item { font-size: 12px; }

.place-card h3,
.nearest-glance strong,
.location-label,
.proximity-map h2,
.results-heading h2,
.page-intro h1,
.about-card h2,
.detail-hero h2,
.detail-section h3,
.brand-copy {
  word-break: keep-all;
  overflow-wrap: anywhere;
  text-wrap: balance;
}

.place-card__summary,
.hero-copy,
.about-card p,
.page-intro > p,
.detail-section p {
  text-wrap: pretty;
}

@supports (word-break: auto-phrase) {
  .place-card h3,
  .nearest-glance strong,
  .location-label,
  .proximity-map h2,
  .results-heading h2,
  .page-intro h1,
  .about-card h2,
  .detail-hero h2,
  .detail-section h3 {
    word-break: auto-phrase;
    overflow-wrap: normal;
  }
}

@keyframes current-location-sonar {
  0% { opacity: 0; transform: translate(-50%, -50%) scale(0.72); }
  10% { opacity: 0.66; }
  68% { opacity: 0.08; }
  100% { opacity: 0; transform: translate(-50%, -50%) scale(4.5); }
}

@keyframes media-search-pulse {
  0%, 100% { opacity: 0.35; transform: translate(-50%, -50%) scale(0.84); }
  50% { opacity: 0.9; transform: translate(-50%, -50%) scale(1.18); }
}

@media (max-width: 719px) {
  .map-utility-bar {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    align-content: center;
    justify-content: stretch;
    gap: 4px;
    min-height: 58px;
    padding-block: 7px;
  }

  .map-gesture,
  .map-provenance {
    width: 100%;
    justify-content: flex-start;
    text-align: left;
  }

  .map-gesture > span {
    white-space: nowrap;
    word-break: keep-all;
  }

  .map-route-note { text-align: left; }
}

@media (min-width: 720px) and (max-width: 1023px) {
  .discovery-column { grid-template-rows: 690px auto; }
  .proximity-map { min-height: 690px; }
  .field-plot { top: 88px; width: min(calc(100vw - 96px), 500px); }
  .map-utility-bar { right: 42px; bottom: 45px; left: 42px; }
  .location-card { margin-top: -28px; }
  .place-card__media { height: 172px; }
}

@media (min-width: 1024px) {
  .discovery-column { grid-template-rows: minmax(0, 1fr) auto; }
  .proximity-map { min-height: 0; }

  .field-plot {
    top: 76px;
    width: min(74%, calc(100svh - var(--topbar) - 272px), 500px);
    min-width: 330px;
  }

  .map-utility-bar {
    right: 28px;
    bottom: 16px;
    left: 28px;
  }

  .map-controls { bottom: 54px; }

  .location-card {
    width: calc(100% - 48px);
    margin: 0 24px 24px;
    padding: 15px;
  }

  .location-label { font-size: 14px; }
  .location-detail { font-size: 12px; }
  .privacy-note { font-size: 11px; }
  .nearest-glance span small { font-size: 10.5px; }

  .era-filter { padding: 8px; }
  .era-options label { flex-basis: 78px; }
  .place-card__media { height: 150px; }
}

@media (max-width: 374px) {
  .topbar { padding-inline: 10px; }
  .brand { gap: 9px; }
  .brand-mark { width: 42px; height: 42px; }
  .brand-copy strong { font-size: 16px; }
  .brand-copy small { font-size: 10.5px; }
  .field-plot { top: 88px; width: calc(100vw - 20px); }
  .map-utility-bar { right: 10px; left: 10px; gap: 7px; padding-inline: 9px; font-size: 10.5px; }
  .map-gesture { gap: 5px; }
  .map-gesture svg { width: 18px; height: 18px; }
  .place-card__media { height: 126px; }
  .place-card__distance { left: 10px; }
  .place-card__open { padding-right: 16px; padding-left: 16px; }
  .place-card__meta { font-size: 11px; }
  .place-card h3 { font-size: 20px; }
  .place-card__summary { font-size: 13.5px; }
}

@media (prefers-reduced-motion: reduce) {
  .sonar-ring { display: none; animation: none !important; }
  .current-point { box-shadow: inset 0 1px 2px rgba(45, 43, 37, 0.17), 0 0 0 14px rgba(50, 111, 102, 0.12); }
  .place-card__media.is-loading .place-media-fallback::after { animation: none !important; }
  .map-ring { transition: none; }
  .map-tile { transition: none; }
  .place-card__media img { transition: none; }
}

@media (forced-colors: active) {
  .map-controls,
  .map-utility-bar,
  .place-card__media { border: 1px solid CanvasText; box-shadow: none; }
  .sonar-ring { border-color: CanvasText; }
  .map-tile-layer { display: none; }
  .save-toggle { color: ButtonText; background: ButtonFace; }
}

/* 2026-08-25 legibility and related-topic pass */
.brand-copy small,
.eyebrow,
.section-kicker,
.map-status-line,
.map-utility-bar,
.location-detail,
.privacy-note,
.nearest-glance span small,
.place-card__meta,
.place-card__hint,
.coverage-note,
.nav-item {
  font-size: 12px;
  line-height: 1.5;
}

.proximity-map h2 { font-size: clamp(18px, 4.8vw, 22px); line-height: 1.35; }
.map-ring > span { padding: 2px 6px 3px; font-size: 12px; }
.direction { font-size: 12px; font-weight: 760; }
.current-point b { font-size: 12px; line-height: 1.3; }
.map-marker { min-width: 36px; height: 36px; font-size: 12px; }
.map-marker.is-nearest { min-width: 84px; height: 40px; padding-inline: 11px; }
.map-marker.is-nearest > span { width: auto; min-width: 22px; height: 22px; padding-inline: 4px; font-size: 12px; border-radius: 6px; }
.map-marker.is-nearest small { font-size: 12px; }
.map-controls .map-zoom-value { font-size: 12px; }

.location-label { font-size: 15px; }
.location-detail { font-size: 13px; }
.privacy-note { font-size: 12px; }
.nearest-glance span small { font-size: 12px; }
.era-options span { min-height: 48px; font-size: 13px; }
.place-card__media figcaption a { font-size: 12px; }
.place-card__media figcaption strong { font-size: 12px; }
.place-media-fallback small { font-size: 12px; }
.place-card__distance small { font-size: 12px; }
.place-card__meta { font-size: 12.5px; }
.era-badge { min-height: 29px; padding-inline: 9px; font-size: 12px; }
.place-card__summary { font-size: 15px; }
.place-card__hint { font-size: 13px; }
.about-card p,
.page-intro > p:last-child { font-size: 15px; }
.results-heading h2 small { font-size: 15px; }
.nav-item { font-size: 13px; }

.map-marker.is-compact {
  width: 44px;
  min-width: 44px;
  height: 44px;
  padding: 0;
  border-width: 2px;
  border-radius: 12px;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.34),
    0 2px 0 color-mix(in srgb, var(--marker) 72%, #222),
    0 5px 10px rgba(37, 36, 31, 0.2);
}

.map-marker.is-compact > span {
  max-width: 39px;
  overflow: hidden;
  font-size: 12px;
  letter-spacing: -0.045em;
  text-overflow: clip;
}

.map-marker.is-compact:focus-visible {
  outline: 3px solid rgba(249, 247, 240, 0.98);
  outline-offset: 2px;
}

.detail-meta {
  gap: 9px;
  font-size: 12.5px;
  line-height: 1.5;
  letter-spacing: 0.035em;
}

.detail-reading {
  margin-top: 5px;
  font-size: 14px;
  font-weight: 680;
  letter-spacing: 0.045em;
  line-height: 1.6;
}

.detail-summary { font-size: 20px; line-height: 1.7; }
.detail-section h3 { margin-bottom: 11px; font-size: 13.5px; line-height: 1.45; letter-spacing: 0.075em; }
.detail-section p { font-size: 16px; line-height: 1.85; }
.detail-tags span { padding: 6px 10px; font-size: 12px; line-height: 1.35; }
.access-note { gap: 12px; padding: 16px; }
.access-note strong { font-size: 14px; line-height: 1.45; }
.access-note p { margin-top: 4px; font-size: 13.5px; line-height: 1.75; }
.source-row a { font-size: 13.5px; }
.source-row small { font-size: 12px; line-height: 1.65; }

.wiki-topic-list {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 9px;
}

.wiki-topic-link {
  display: grid;
  grid-template-columns: 28px minmax(0, 1fr) 18px;
  grid-template-areas:
    "index title arrow"
    "index source arrow";
  min-height: 70px;
  align-items: center;
  column-gap: 9px;
  padding: 12px;
  border: 1px solid color-mix(in srgb, var(--era-color) 30%, var(--line));
  color: var(--ink);
  background:
    linear-gradient(135deg, color-mix(in srgb, var(--era-soft) 62%, rgba(255, 255, 255, 0.72)), var(--surface) 72%);
  border-radius: 10px;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.72), 0 4px 10px rgba(35, 35, 29, 0.06);
  text-decoration: none;
  transition: transform 160ms var(--ease-direct), border-color 160ms var(--ease-direct), box-shadow 160ms var(--ease-direct);
}

.wiki-topic-link:hover,
.wiki-topic-link:focus-visible {
  border-color: var(--era-color);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.78), 0 7px 15px rgba(35, 35, 29, 0.1);
  transform: translateY(-2px);
}

.wiki-topic-link:focus-visible {
  outline: 3px solid var(--focus);
  outline-offset: 2px;
}

.wiki-topic-index {
  grid-area: index;
  align-self: stretch;
  display: grid;
  place-items: center;
  border-right: 1px solid color-mix(in srgb, var(--era-color) 24%, var(--line));
  color: var(--era-color);
  font-family: var(--font-numeric);
  font-size: 12px;
  font-weight: 780;
}

.wiki-topic-link strong {
  grid-area: title;
  min-width: 0;
  align-self: end;
  font-family: var(--font-display);
  font-size: 15px;
  font-weight: 760;
  line-height: 1.35;
  word-break: keep-all;
  overflow-wrap: anywhere;
}

.wiki-topic-link small {
  grid-area: source;
  align-self: start;
  color: var(--muted);
  font-size: 12px;
  font-weight: 680;
  line-height: 1.35;
}

.wiki-topic-link svg {
  grid-area: arrow;
  width: 17px;
  height: 17px;
  fill: none;
  stroke: var(--era-color);
  stroke-width: 2;
}

.detail-section .wiki-topic-note {
  margin-top: 11px;
  color: var(--muted-strong);
  font-size: 12.5px;
  line-height: 1.65;
}

@media (max-width: 374px) {
  .brand-copy small,
  .map-utility-bar,
  .place-card__meta { font-size: 12px; }
  .place-card__summary { font-size: 15px; }
}

@media (max-width: 520px) {
  .wiki-topic-list { grid-template-columns: minmax(0, 1fr); }
}

@media (prefers-reduced-motion: reduce) {
  .wiki-topic-link { transition: none; }
  .wiki-topic-link:hover,
  .wiki-topic-link:focus-visible { transform: none; }
}