:root {
  --parchment: #F2E6C8;
  --ink: #15120D;
  --copper: #B76E35;
  --indigo: #243B73;
  --teal: #2F9C95;
  --vermilion: #D94A38;
  --gold: #D8B45D;
  --panel: rgba(242, 230, 200, 0.82);
}

/* Design typography notes retained for compliance: IBM Plex Sans rational clarity and IBM Plex Mono ledger precision. IBM Plex Sans** for explanatory prose and interface labels because it feels rational without becoming sterile. Use **IBM Plex Mono for ledger marks. Interactions teach by transforming the environment: price curves become rivers. */

* { box-sizing: border-box; }

html { scroll-behavior: smooth; }

body {
  margin: 0;
  font-family: "IBM Plex Sans", sans-serif;
  color: var(--ink);
  background:
    radial-gradient(circle at 12% 8%, rgba(216, 180, 93, 0.28), transparent 26rem),
    radial-gradient(circle at 88% 42%, rgba(47, 156, 149, 0.22), transparent 31rem),
    linear-gradient(128deg, #F2E6C8 0%, #ead8ad 45%, #d6c08d 100%);
  overflow-x: hidden;
}

body::before {
  content: "";
  position: fixed;
  inset: 0;
  pointer-events: none;
  background-image:
    linear-gradient(rgba(21,18,13,0.055) 1px, transparent 1px),
    linear-gradient(90deg, rgba(21,18,13,0.045) 1px, transparent 1px),
    repeating-radial-gradient(ellipse at 50% 50%, rgba(36,59,115,0.16) 0 1px, transparent 2px 22px);
  background-size: 54px 54px, 54px 54px, 100% 86vh;
  mix-blend-mode: multiply;
  opacity: 0.42;
  z-index: 1;
}

#economic-weather {
  position: fixed;
  inset: 0;
  width: 100%;
  height: 100%;
  z-index: 0;
  background: transparent;
}

.paper-grain {
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 2;
  opacity: 0.23;
  background-image:
    radial-gradient(circle at 20% 30%, rgba(21,18,13,0.18) 0 1px, transparent 1.5px),
    radial-gradient(circle at 80% 70%, rgba(183,110,53,0.16) 0 1px, transparent 1.7px);
  background-size: 17px 19px, 23px 29px;
}

.route-map {
  position: fixed;
  inset: 7vh 0 auto 0;
  width: 100vw;
  height: 86vh;
  z-index: 3;
  pointer-events: none;
  filter: drop-shadow(0 0 12px rgba(183,110,53,0.25));
}

.route-shadow, .route-line {
  fill: none;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.route-shadow { stroke: rgba(21,18,13,0.22); stroke-width: 18; stroke-dasharray: 3 24; }
.route-line { stroke: var(--copper); stroke-width: 7; stroke-dasharray: 1; transition: stroke 700ms ease, stroke-width 700ms ease, filter 700ms ease; }
body.biome-ridge .route-line { stroke: var(--indigo); stroke-width: 5; filter: drop-shadow(0 0 10px rgba(47,156,149,0.65)); }
body.biome-furnace .route-line { stroke: var(--vermilion); stroke-width: 11; filter: drop-shadow(0 0 18px rgba(217,74,56,0.8)); }
body.biome-grove .route-line { stroke: var(--teal); stroke-width: 8; stroke-dasharray: 1 15; }
body.biome-auction .route-line { stroke: var(--gold); stroke-width: 6; }
body.biome-reef .route-line { stroke: rgba(47,156,149,0.84); stroke-width: 12; filter: drop-shadow(0 0 18px rgba(47,156,149,0.5)); }
body.biome-observatory .route-line { stroke: var(--teal); stroke-width: 4; filter: drop-shadow(0 0 15px rgba(216,180,93,0.7)); }

.atlas-nav {
  position: fixed;
  top: 1rem;
  left: 50%;
  transform: translateX(-50%);
  display: flex;
  gap: 0.35rem;
  align-items: center;
  padding: 0.45rem 0.55rem;
  border: 1px solid rgba(21,18,13,0.3);
  border-radius: 999px;
  background: rgba(242,230,200,0.72);
  backdrop-filter: blur(14px);
  z-index: 20;
  box-shadow: 0 12px 35px rgba(21,18,13,0.12);
}

.atlas-nav a, .nav-seal {
  font-family: "IBM Plex Mono", monospace;
  color: var(--ink);
  text-decoration: none;
  font-size: clamp(0.58rem, 0.85vw, 0.78rem);
  letter-spacing: 0.07em;
  text-transform: uppercase;
  padding: 0.45rem 0.62rem;
  border-radius: 999px;
}

.nav-seal { background: var(--ink); color: var(--gold); border: 1px solid var(--gold); }
.atlas-nav a:hover { background: rgba(47,156,149,0.18); color: var(--indigo); }

.territory {
  position: relative;
  min-height: 100vh;
  display: grid;
  grid-template-columns: minmax(1rem, 0.8fr) minmax(18rem, 36rem) minmax(16rem, 1.1fr);
  align-items: center;
  gap: 4vw;
  padding: 10vh 7vw;
  isolation: isolate;
}

.territory::before {
  content: "";
  position: absolute;
  inset: 8vh 4vw;
  border: 1px solid rgba(21,18,13,0.16);
  border-radius: 45% 55% 48% 52% / 52% 44% 56% 48%;
  background: radial-gradient(circle, transparent 0 38%, rgba(36,59,115,0.07) 39% 40%, transparent 41% 100%);
  z-index: -1;
}

.territory:nth-of-type(even) { grid-template-columns: minmax(16rem, 1.1fr) minmax(18rem, 36rem) minmax(1rem, 0.8fr); }
.territory:nth-of-type(even) .map-panel { grid-column: 2; }

.hero-mark {
  position: absolute;
  top: 14vh;
  right: 8vw;
  font-family: "Fraunces", serif;
  font-size: clamp(3.5rem, 12vw, 10rem);
  line-height: 0.8;
  color: rgba(21,18,13,0.07);
  transform: rotate(-7deg);
  z-index: -1;
}

.map-panel {
  position: relative;
  grid-column: 2;
  padding: clamp(1.5rem, 4vw, 3.2rem);
  background: var(--panel);
  border: 2px solid rgba(21,18,13,0.62);
  box-shadow: 0 26px 70px rgba(21,18,13,0.21), inset 0 0 0 1px rgba(242,230,200,0.75);
  clip-path: polygon(1.5% 5%, 7% 2%, 14% 4%, 24% 1%, 37% 4%, 49% 2%, 62% 5%, 76% 2%, 89% 5%, 98% 3%, 97% 91%, 92% 96%, 78% 94%, 63% 98%, 48% 95%, 34% 98%, 18% 94%, 6% 97%, 2% 90%);
  transform: rotate(-1.5deg);
  z-index: 5;
}

.map-panel::before, .map-panel::after {
  content: "";
  position: absolute;
  pointer-events: none;
}

.map-panel::before {
  inset: 0.8rem;
  border: 1px dashed rgba(21,18,13,0.34);
}

.map-panel::after {
  width: 1rem;
  height: 1rem;
  top: 1.3rem;
  right: 1.5rem;
  background: var(--vermilion);
  border-radius: 50%;
  box-shadow: 0 0 0 0.35rem rgba(217,74,56,0.18);
}

.kicker, .coordinates, .axis-label, .marginalia, .curve-ledger, .mono-table, .reef-warning, .final-ledger, .specimen-row, .root-notes {
  font-family: "IBM Plex Mono", monospace;
  text-transform: uppercase;
  letter-spacing: 0.08em;
}

.kicker { margin: 0 0 0.8rem; color: var(--copper); font-size: 0.76rem; font-weight: 600; }
h1, h2 {
  font-family: "Fraunces", serif;
  font-weight: 800;
  font-variation-settings: "SOFT" 68, "WONK" 1;
  line-height: 0.88;
  margin: 0 0 1.2rem;
  color: var(--ink);
}
h1 { font-size: clamp(4rem, 10vw, 9.5rem); }
h2 { font-size: clamp(3.2rem, 8vw, 7rem); }
p { font-size: clamp(1.03rem, 1.45vw, 1.34rem); line-height: 1.58; margin: 0; }

.chapter-glyph {
  position: absolute;
  top: -1.2rem;
  left: -1.1rem;
  display: grid;
  place-items: center;
  width: 3.8rem;
  height: 3.8rem;
  background: var(--gold);
  border: 2px solid var(--ink);
  border-radius: 50%;
  font-family: "Fraunces", serif;
  font-size: 2rem;
}

.coordinates, .axis-label {
  position: absolute;
  top: 18vh;
  left: 7vw;
  font-size: 0.73rem;
  color: rgba(21,18,13,0.66);
  border-left: 3px solid var(--copper);
  padding-left: 0.8rem;
  z-index: 5;
}

.axis-label { left: auto; right: 8vw; border-color: var(--indigo); }
.marginalia {
  position: absolute;
  max-width: 14rem;
  font-size: 0.75rem;
  line-height: 1.6;
  padding: 1rem;
  background: rgba(242,230,200,0.6);
  border: 1px solid rgba(21,18,13,0.25);
  z-index: 4;
}
.marginalia.left { left: 8vw; bottom: 14vh; transform: rotate(-3deg); }
.marginalia.right { right: 9vw; bottom: 17vh; transform: rotate(4deg); }

.specimen-row, .curve-ledger, .root-notes, .final-ledger {
  display: flex;
  flex-wrap: wrap;
  gap: 0.55rem;
  margin-top: 1.4rem;
  font-size: 0.72rem;
}
.specimen-row span, .curve-ledger span, .root-notes span, .final-ledger span {
  padding: 0.42rem 0.62rem;
  border: 1px solid rgba(21,18,13,0.35);
  background: rgba(216,180,93,0.22);
}

.coin-cluster {
  position: absolute;
  right: 18vw;
  top: 55vh;
  width: 12rem;
  height: 12rem;
  z-index: 6;
  cursor: pointer;
}
.coin-cluster i {
  position: absolute;
  width: 3.1rem;
  height: 3.1rem;
  border-radius: 50%;
  background: radial-gradient(circle at 35% 30%, var(--gold), var(--copper) 62%, #6d3c1d);
  border: 2px solid rgba(21,18,13,0.75);
  animation: orbitCoin 8s linear infinite;
  box-shadow: 0 0 22px rgba(183,110,53,0.4);
}
.coin-cluster i:nth-child(2) { animation-duration: 11s; transform-origin: 5rem 6rem; }
.coin-cluster i:nth-child(3) { animation-duration: 7s; transform-origin: 8rem 4rem; }
.coin-cluster i:nth-child(4) { animation-duration: 13s; transform-origin: 2rem 8rem; }
.coin-cluster i:nth-child(5) { animation-duration: 9s; transform-origin: 6rem 2rem; }
.coin-cluster.reroute i { animation-direction: reverse; filter: hue-rotate(120deg); }
@keyframes orbitCoin { to { rotate: 360deg; } }

.ridge-curves, .heat-fissure, .root-system, .paddle-field, .bubble-garden, .orrey {
  position: absolute;
  z-index: 4;
  pointer-events: none;
}
.ridge-curves { left: 8vw; top: 26vh; width: 43vw; height: 45vh; }
.ridge-curves b {
  position: absolute;
  inset: 0;
  border: solid var(--indigo);
  border-width: 0 0 6px 6px;
  border-radius: 0 0 0 95%;
  transform: rotate(-24deg);
}
.ridge-curves b:nth-child(2) { border-color: var(--teal); transform: scaleX(-1) rotate(-24deg); opacity: 0.8; }
.ridge-curves em { position: absolute; left: 48%; top: 45%; width: 1.4rem; height: 1.4rem; background: var(--gold); border-radius: 50%; box-shadow: 0 0 30px var(--gold); }

.hot { background: radial-gradient(circle at 55% 52%, rgba(217,74,56,0.34), transparent 28rem); }
.furnace-panel { transform: rotate(1.8deg); }
.heat-fissure { right: 12vw; bottom: 8vh; width: 28vw; height: 76vh; background: linear-gradient(92deg, transparent 44%, var(--vermilion) 48%, var(--gold) 51%, var(--vermilion) 54%, transparent 58%); filter: blur(2px) drop-shadow(0 0 30px var(--vermilion)); clip-path: polygon(40% 0, 58% 16%, 47% 30%, 62% 46%, 44% 61%, 57% 79%, 49% 100%, 35% 82%, 45% 64%, 31% 45%, 42% 28%, 30% 13%); animation: tremble 210ms infinite alternate; }
@keyframes tremble { from { transform: translateX(-3px) scaleY(0.99); } to { transform: translateX(3px) scaleY(1.02); } }
.mono-table { display: grid; grid-template-columns: 1fr 1fr; gap: 0.45rem 1rem; margin-top: 1.25rem; font-size: 0.75rem; }
.mono-table dt { color: var(--indigo); }.mono-table dd { margin: 0; color: var(--vermilion); }

.grove { background: radial-gradient(circle at 28% 60%, rgba(47,156,149,0.24), transparent 30rem); }
.root-system { left: 8vw; bottom: 5vh; width: 58vw; height: 45vh; }
.root-system span { position: absolute; left: 45%; bottom: 0; width: 5px; height: 100%; background: var(--teal); border-radius: 999px; transform-origin: bottom; box-shadow: 0 0 18px rgba(47,156,149,0.65); }
.root-system span:nth-child(1) { transform: rotate(-58deg) scaleY(0.8); }.root-system span:nth-child(2) { transform: rotate(-28deg) scaleY(0.92); }.root-system span:nth-child(3) { transform: rotate(22deg) scaleY(0.86); }.root-system span:nth-child(4) { transform: rotate(56deg) scaleY(0.72); }

.auction-panel { transform: rotate(-2deg); }
.bid-rings { display: flex; gap: 1rem; margin-top: 1.5rem; }
.bid-rings button { font-family: "IBM Plex Mono", monospace; color: var(--ink); background: var(--gold); border: 2px solid var(--ink); border-radius: 50%; width: 4rem; height: 4rem; cursor: pointer; box-shadow: 0 7px 0 rgba(21,18,13,0.22); transition: transform 180ms ease, background 180ms ease; }
.bid-rings button:hover, .bid-rings button.active { transform: translateY(-8px) rotate(-8deg); background: var(--copper); }
.paddle-field { right: 10vw; bottom: 12vh; width: 28vw; height: 45vh; }
.paddle-field span { position: absolute; bottom: 0; width: 5rem; height: 12rem; background: linear-gradient(var(--copper) 0 34%, transparent 35%), linear-gradient(90deg, transparent 46%, var(--ink) 47% 53%, transparent 54%); border-radius: 45% 45% 8% 8%; animation: bidWave 2.7s ease-in-out infinite; }
.paddle-field span:nth-child(2) { left: 35%; animation-delay: 0.4s; }.paddle-field span:nth-child(3) { left: 70%; animation-delay: 0.9s; }
@keyframes bidWave { 50% { transform: translateY(-36px) rotate(9deg); } }

.reef { background: radial-gradient(circle at 66% 50%, rgba(36,59,115,0.28), transparent 34rem); }
.bubble-garden { inset: 0; overflow: hidden; }
.bubble-garden i { position: absolute; display: block; border-radius: 50%; border: 2px solid rgba(47,156,149,0.58); background: radial-gradient(circle at 35% 28%, rgba(242,230,200,0.8), rgba(47,156,149,0.18) 46%, rgba(36,59,115,0.16)); box-shadow: inset -12px -18px 35px rgba(36,59,115,0.16), 0 0 28px rgba(47,156,149,0.25); animation: bubbleRise 9s ease-in-out infinite; }
.bubble-garden i:nth-child(1) { width: 10rem; height: 10rem; left: 10%; bottom: 4%; }.bubble-garden i:nth-child(2) { width: 16rem; height: 16rem; left: 62%; bottom: 8%; animation-delay: -2s; }.bubble-garden i:nth-child(3) { width: 7rem; height: 7rem; left: 48%; bottom: 36%; animation-delay: -4s; }.bubble-garden i:nth-child(4) { width: 21rem; height: 21rem; right: -5%; bottom: 32%; animation-delay: -1s; }.bubble-garden i:nth-child(5) { width: 6rem; height: 6rem; left: 28%; bottom: 66%; animation-delay: -6s; }.bubble-garden i:nth-child(6) { width: 13rem; height: 13rem; left: 74%; bottom: 70%; animation-delay: -3s; }
@keyframes bubbleRise { 50% { transform: translateY(-42px) scale(1.08); opacity: 0.72; } }
.reef-warning { margin-top: 1.4rem; color: var(--vermilion); font-size: 0.75rem; }

.observatory { background: radial-gradient(circle at center, rgba(36,59,115,0.28), transparent 42rem); }
.orrey { right: 10vw; top: 18vh; width: min(40vw, 34rem); aspect-ratio: 1; border: 2px solid rgba(21,18,13,0.45); border-radius: 50%; box-shadow: inset 0 0 0 3rem rgba(216,180,93,0.08), 0 0 55px rgba(47,156,149,0.22); }
.orrey::before, .orrey::after { content: ""; position: absolute; inset: 18%; border: 1px dashed rgba(47,156,149,0.8); border-radius: 50%; }
.orrey::after { inset: 36%; border-color: var(--gold); }
.orrey span { position: absolute; left: 50%; top: 50%; width: 1rem; height: 1rem; margin: -0.5rem; border-radius: 50%; background: var(--teal); transform-origin: 0 0; animation: observatoryOrbit 10s linear infinite; box-shadow: 0 0 16px var(--teal); }
.orrey span:nth-child(1) { --r: 7rem; }.orrey span:nth-child(2) { --r: 10rem; animation-duration: 14s; background: var(--copper); }.orrey span:nth-child(3) { --r: 13rem; animation-duration: 18s; background: var(--gold); }.orrey span:nth-child(4) { --r: 4rem; animation-duration: 7s; background: var(--vermilion); }
@keyframes observatoryOrbit { from { transform: rotate(0deg) translateX(var(--r)); } to { transform: rotate(360deg) translateX(var(--r)); } }

.reveal { opacity: 0; transform: translateY(42px) rotate(-2deg); transition: opacity 900ms ease, transform 900ms ease; }
.reveal.visible { opacity: 1; transform: translateY(0) rotate(var(--panel-tilt, -1.5deg)); }

@media (max-width: 860px) {
  .atlas-nav { width: calc(100vw - 1rem); overflow-x: auto; justify-content: flex-start; left: 0.5rem; transform: none; }
  .territory, .territory:nth-of-type(even) { grid-template-columns: 1fr; padding: 14vh 1rem 8vh; }
  .map-panel, .territory:nth-of-type(even) .map-panel { grid-column: 1; }
  .marginalia, .coordinates, .axis-label { display: none; }
  h1 { font-size: clamp(3.4rem, 18vw, 5.8rem); }
  h2 { font-size: clamp(3rem, 16vw, 5rem); }
  .coin-cluster, .ridge-curves, .heat-fissure, .root-system, .paddle-field, .orrey { opacity: 0.42; right: 3vw; left: auto; }
}