:root {
  --chalk: #ddd5bf;
  --paper: #f0e8d4;
  --paper-deep: #e4dac1;
  --paper-shadow: #d2c6aa;
  --ink: #2c302b;
  --ink-soft: #5e6056;
  --graphite: #77776d;
  --moss: #6d7357;
  --weathered-brown: #806e56;
  --brass: #9a8151;
  --water: #687b78;
  --seam: #4e887f;
  --seam-bright: #8ad8c3;
  --serif: "AccanthisADFStdNo2-Regular", "Iowan Old Style", Georgia, serif;
  --sans: "LinuxBiolinumORegular", "Linux Biolinum O", Optima, sans-serif;
}

* { box-sizing: border-box; }

html { min-height: 100%; background: var(--chalk); }

body {
  min-height: 100vh;
  margin: 0;
  overflow-x: hidden;
  color: var(--ink);
  background: var(--chalk);
  font-family: var(--sans);
  text-rendering: optimizeLegibility;
  -webkit-font-smoothing: antialiased;
}

body::before {
  content: "";
  position: fixed;
  inset: 0;
  z-index: 20;
  pointer-events: none;
  opacity: .16;
  mix-blend-mode: multiply;
  background-image: repeating-linear-gradient(0deg, rgba(56,54,46,.025) 0 1px, transparent 1px 5px);
}

button, a { font: inherit; }

.back-link {
  position: fixed;
  top: clamp(18px, 3vw, 34px);
  left: clamp(18px, 3vw, 34px);
  z-index: 30;
  display: grid;
  width: 42px;
  height: 42px;
  place-items: center;
  color: rgba(57,58,51,.68);
  border: 1px solid rgba(83,78,66,.28);
  border-radius: 50%;
  background: rgba(240,232,212,.52);
  opacity: 0;
  transform: translateX(8px);
  transition: opacity 900ms ease, transform 900ms ease, color 180ms ease, border-color 180ms ease, background 180ms ease;
}

.is-arriving .back-link { opacity: 1; transform: none; }
.back-link:hover,
.back-link:focus-visible {
  color: var(--ink);
  border-color: rgba(128,110,86,.58);
  background: rgba(240,232,212,.9);
  outline: none;
  transform: translateX(-2px);
}
.back-link svg { width: 22px; height: 22px; }
.back-link path { fill: none; stroke: currentColor; stroke-width: 1.45; stroke-linecap: round; stroke-linejoin: round; }

.arrival {
  position: fixed;
  inset: 0;
  z-index: 10;
  display: grid;
  place-content: center;
  pointer-events: none;
  text-align: center;
  opacity: 0;
  transform: scale(.99);
  transition: opacity 1300ms ease, transform 1800ms cubic-bezier(.22,1,.36,1);
}

.is-arriving .arrival { opacity: 1; transform: none; }
.is-mapped .arrival { opacity: 0; transform: scale(1.015); transition-duration: 950ms; }
.arrival p {
  margin: 0 0 16px;
  color: rgba(82,79,67,.58);
  font-size: .63rem;
  letter-spacing: .2em;
  text-transform: uppercase;
}
.arrival h1 {
  margin: 0;
  color: var(--ink);
  font-family: var(--serif);
  font-size: clamp(3.4rem, 10vw, 8.5rem);
  font-weight: 400;
  line-height: .9;
  letter-spacing: .01em;
  text-shadow: 0 1px 0 rgba(250,247,236,.44);
}
.arrival span {
  display: block;
  width: min(240px, 42vw);
  height: 1px;
  margin: 26px auto 0;
  background: rgba(111,93,67,.42);
  transform: scaleX(0);
  transform-origin: center;
  transition: transform 1600ms 500ms ease;
}
.is-arriving .arrival span { transform: scaleX(1); }

.atlas-shell {
  position: relative;
  z-index: 2;
  width: min(1500px, calc(100% - 56px));
  margin: 0 auto;
  padding: clamp(82px, 8vw, 116px) 0 38px;
  opacity: 0;
  transform: translateY(18px);
  transition: opacity 1100ms ease, transform 1400ms cubic-bezier(.22,1,.36,1);
}

.is-mapped .atlas-shell { opacity: 1; transform: none; }

.atlas-header {
  display: flex;
  justify-content: space-between;
  gap: 30px;
  align-items: end;
  margin: 0 0 21px;
  padding: 0 2px 15px;
  border-bottom: 1px solid rgba(82,78,66,.22);
}

.eyebrow, .progress, .place-meta, .boundary span, .map-note { text-transform: uppercase; letter-spacing: .16em; }
.eyebrow { margin: 0 0 8px; color: rgba(92,84,68,.66); font-size: .61rem; }
.atlas-header h2 {
  margin: 0;
  color: var(--ink);
  font-family: var(--serif);
  font-size: clamp(2.4rem, 5vw, 5.2rem);
  font-weight: 400;
  line-height: .9;
}
.progress { margin: 0 0 6px; color: rgba(67,68,60,.48); font-size: .59rem; text-align: right; }

.atlas-layout {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(136px, 164px) minmax(300px, 380px);
  gap: 16px;
  align-items: stretch;
}

.map-stage {
  --drift-x: 0px;
  --drift-y: 0px;
  position: relative;
  min-height: 690px;
  overflow: hidden;
  border: 1px solid rgba(91,84,69,.26);
  background: #e8dfca;
  box-shadow: 0 14px 30px rgba(75,63,45,.09);
}

.map-stage::before {
  content: "";
  position: absolute;
  inset: 12px;
  z-index: 0;
  pointer-events: none;
  border: 1px solid rgba(106,91,68,.08);
}

.map-stage::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  opacity: .28;
  background-image:
    repeating-linear-gradient(8deg, rgba(78,74,62,.025) 0 1px, transparent 1px 11px),
    repeating-linear-gradient(97deg, rgba(103,89,68,.018) 0 1px, transparent 1px 17px);
  transform: translate(calc(var(--drift-x) * .12), calc(var(--drift-y) * .12));
  transition: transform 900ms ease-out;
}

.map-ground, .place-layer { position: absolute; inset: 0; width: 100%; height: 100%; }
.map-ground { z-index: 1; }
.place-layer { z-index: 3; }
.ground-lines path, .mere-shore, .trace { fill: none; vector-effect: non-scaling-stroke; }
.ground-lines path { stroke: rgba(77,78,69,.18); stroke-width: 1.05; stroke-dasharray: 2 7; }
.mere-shore { stroke: rgba(83,104,101,.38); stroke-width: 1.8; }
.mere-shore-soft { opacity: .42; stroke-width: 1; }

.trace { stroke-linecap: round; }
.trace-travelled { stroke: rgba(79,76,65,.38); stroke-width: 1.8; }
.trace-prospect {
  stroke: rgba(78,136,127,.72);
  stroke-width: 2.2;
  stroke-dasharray: 5 9;
  filter: url(#soft-glow);
  animation: prospect-drift 9s linear infinite;
}
.trace-drawing {
  stroke: rgba(78,136,127,.7);
  stroke-width: 2.2;
  stroke-dasharray: 1300;
  stroke-dashoffset: 1300;
  animation: trace-draw 1050ms cubic-bezier(.22,1,.36,1) forwards;
}

.place-marker {
  position: absolute;
  left: var(--x);
  top: var(--y);
  display: grid;
  width: 18px;
  height: 18px;
  place-items: center;
  padding: 0;
  color: var(--ink);
  border: 0;
  border-radius: 50%;
  background: transparent;
  cursor: pointer;
  opacity: 0;
  pointer-events: none;
  transform: translate(-50%, -50%) scale(.3);
  transition: opacity 900ms ease, transform 1200ms cubic-bezier(.22,1,.36,1);
}

.place-marker.is-revealed { opacity: 1; pointer-events: auto; transform: translate(-50%, -50%) scale(1); }
.marker-ring {
  width: 7px;
  height: 7px;
  border: 1px solid rgba(75,72,62,.78);
  border-radius: 50%;
  background: #eae1cc;
  box-shadow: 0 0 0 4px rgba(110,94,69,.055);
  transition: background 180ms ease, border-color 180ms ease, box-shadow 180ms ease, transform 180ms ease;
}
.marker-label {
  position: absolute;
  left: 17px;
  top: 0;
  width: max-content;
  max-width: 180px;
  color: rgba(49,50,44,.72);
  font-family: var(--serif);
  font-size: .72rem;
  line-height: 1.15;
  text-align: left;
  text-shadow: 0 1px 0 rgba(244,238,222,.72);
  opacity: 0;
  transform: translateX(-4px);
  transition: opacity 240ms ease, transform 240ms ease;
}
.place-marker:hover .marker-label,
.place-marker:focus-visible .marker-label,
.place-marker.is-selected .marker-label { opacity: 1; transform: none; }
.place-marker:hover .marker-ring,
.place-marker:focus-visible .marker-ring,
.place-marker.is-selected .marker-ring {
  border-color: var(--seam);
  background: var(--seam);
  box-shadow: 0 0 0 5px rgba(78,136,127,.09), 0 0 15px rgba(78,136,127,.18);
  transform: scale(1.22);
}
.place-marker:focus-visible { outline: 1px solid rgba(65,64,55,.72); outline-offset: 5px; }

.map-note { position: absolute; z-index: 4; left: 20px; bottom: 16px; margin: 0; color: rgba(66,65,56,.38); font-size: .52rem; }

.trace-control {
  display: flex;
  min-width: 0;
  align-items: center;
  justify-content: center;
}

.place-card {
  min-height: 690px;
  padding: clamp(24px, 3vw, 34px);
  color: var(--ink);
  border: 1px solid rgba(93,84,68,.24);
  background: rgba(241,234,216,.94);
  box-shadow: 0 14px 30px rgba(75,63,45,.08);
}

.place-card-empty { display: grid; min-height: 100%; place-items: center; color: rgba(58,59,52,.48); font-family: var(--serif); text-align: center; }
.place-card-empty p { max-width: 220px; margin: 0; font-size: 1.1rem; line-height: 1.5; }
.place-card-content { animation: card-arrive 500ms ease both; }
.place-meta { display: flex; justify-content: space-between; gap: 18px; padding-bottom: 17px; color: rgba(89,81,66,.58); border-bottom: 1px solid rgba(83,78,66,.18); font-size: .54rem; }
.place-portrait { margin: 22px 0 0; }
.place-portrait img,
.place-portrait-placeholder {
  display: block;
  width: 100%;
  aspect-ratio: 16 / 9;
  object-fit: cover;
  overflow: hidden;
  border: 1px solid rgba(91,81,64,.18);
  background: #ded4bd;
}
.place-portrait img { filter: saturate(.94) contrast(.98); }
.place-portrait-placeholder { display: grid; place-content: center; gap: 7px; padding: 18px; color: rgba(56,57,50,.42); text-align: center; }
.place-portrait-placeholder span { font-family: var(--serif); font-size: 1rem; }
.place-portrait-placeholder small { overflow-wrap: anywhere; color: rgba(104,90,67,.5); font-size: .5rem; letter-spacing: .12em; text-transform: uppercase; }
.place-portrait figcaption { margin-top: 8px; color: rgba(58,59,52,.42); font-size: .62rem; line-height: 1.4; }
.place-card h3 { margin: 22px 0 0; color: var(--ink); font-family: var(--serif); font-size: clamp(2rem, 3vw, 3.2rem); font-weight: 400; line-height: .98; }
.annotation { margin: 23px 0 0; color: rgba(45,47,41,.78); font-family: var(--serif); font-size: 1.04rem; line-height: 1.6; }
.boundary { margin: 26px 0 0; padding: 17px 0 0; color: rgba(55,56,49,.56); border-top: 1px solid rgba(83,78,66,.16); font-size: .72rem; line-height: 1.5; }
.boundary span { display: block; margin-bottom: 7px; color: rgba(128,104,70,.72); font-size: .52rem; }
.trace-button {
  width: 100%;
  margin: 0;
  padding: 12px 8px;
  color: rgba(48,49,43,.78);
  border: 0;
  border-top: 1px solid rgba(100,88,68,.26);
  border-bottom: 1px solid rgba(100,88,68,.26);
  border-radius: 0;
  background: transparent;
  cursor: pointer;
  font-family: var(--serif);
  font-size: .73rem;
  line-height: 1.45;
  letter-spacing: .09em;
  text-transform: uppercase;
  transition: color 180ms ease, border-color 180ms ease, transform 180ms ease;
}
.trace-button:hover,
.trace-button:focus-visible {
  color: var(--seam);
  border-color: rgba(78,136,127,.55);
  transform: translateY(-1px);
  outline: none;
}
.trace-button:disabled { color: rgba(57,58,51,.34); border-color: rgba(90,83,69,.14); cursor: default; transform: none; }
.trace-button-quiet { color: rgba(58,59,52,.56); }

@keyframes trace-draw { to { stroke-dashoffset: 0; } }
@keyframes prospect-drift { to { stroke-dashoffset: -126; } }
@keyframes card-arrive { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }

@media (max-width: 1180px) {
  .atlas-layout { grid-template-columns: 1fr; }
  .map-stage { min-height: 620px; }
  .trace-button { width: min(100%, 380px); }
  .place-card { min-height: 0; }
}

@media (max-width: 650px) {
  .atlas-shell { width: min(100% - 24px, 620px); padding-top: 86px; }
  .back-link { position: absolute; }
  .atlas-header { display: block; }
  .progress { margin-top: 13px; text-align: left; }
  .map-stage { min-height: 540px; }
  .place-card { padding: 24px; }
  .marker-label { max-width: 132px; font-size: .68rem; }
  .map-note { right: 16px; max-width: 230px; line-height: 1.5; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; scroll-behavior: auto !important; transition-duration: .01ms !important; }
  .arrival { display: none; }
  .atlas-shell, .back-link { opacity: 1; transform: none; }
}