/* Animated values are not custom properties: script.js writes transform and opacity on each
   element. A custom property on :root changes the computed style of every element on the page,
   and at 60 writes a second that restyle was most of the frame budget on phones. The values
   below are the first frame (the loader covers the page until script.js takes over). */
:root {
  --ink: #111411;
  --paper: #fdf1e1;
  --glow: #63e6d9;
  --shadow: rgba(0, 0, 0, 0.32);
  font-family: Inter, Satoshi, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  color: var(--paper);
  background: #0b1110;
  letter-spacing: 0;
}

* {
  box-sizing: border-box;
}

html {
  min-height: 100%;
  scroll-behavior: smooth;
  background: #0b1110;
}

body {
  min-height: 100%;
  margin: 0;
  overflow-x: clip;
  background: #0b1110;
}

button {
  border: 0;
  font: inherit;
}

.site-shell {
  min-height: 100vh;
}

/* ---------- Loader (same screen as demo2: white canvas, black Xolomai logo) ---------- */

html.is-loading {
  overflow: hidden;
}

.loader {
  position: fixed;
  inset: 0;
  z-index: 50;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 28px;
  color: #000;
  background: #fff;
  transition: opacity 500ms;
}

/* An opaque layer lets the browser skip rasterizing what it covers. While script.js walks the
   timeline behind the loader, this keeps the scene "visible" so every texture is ready. */
.loader.is-warming {
  opacity: 0.999;
}

.loader.is-done {
  opacity: 0;
  pointer-events: none;
}

.loader-logo {
  width: 120px;
  height: auto;
  user-select: none;
}

.loader-bar {
  width: 160px;
  height: 2px;
  overflow: hidden;
  border-radius: 999px;
  background: rgba(0, 0, 0, 0.1);
}

.loader-bar-fill {
  height: 100%;
  background: #000;
  transform: scaleX(0);
  transform-origin: left;
  transition: transform 200ms ease-out;
}

.loader-text {
  color: rgba(0, 0, 0, 0.5);
  font-size: 13px;
  font-variant-numeric: tabular-nums;
}

@media (min-width: 640px) {
  .loader-logo {
    width: 148px;
  }
}

/* ---------- Scroll rig ---------- */

.cinema-scroll {
  position: relative;
  height: calc(100vh + 3700px);
}

.stage {
  position: sticky;
  top: 0;
  height: 100vh;
  min-height: 620px;
  overflow: hidden;
  isolation: isolate;
  background: #2f5d4c;
}

.world,
.back-stack,
.sky-img,
.shade,
.scene-img,
.site-header,
.hero-title,
.intro-copy,
.story-panel {
  position: absolute;
}

.world {
  inset: 0;
  overflow: hidden;
  background: #2f5d4c;
  /* The width of the reference frame (1536×1024) that the ceiling, the split frames and the ferns
     were cut from. Each box sits where its crop sat in that frame, bottom edge at -2vh, so the
     hero is the reference picture again. Tall screens need it wider to cover the height. */
  --frame-w: max(108vw, 154vh);
}

/* ---------- Header ---------- */

.site-header {
  top: 0;
  left: 0;
  right: 0;
  z-index: 10;
  display: grid;
  grid-template-columns: minmax(260px, 1fr) auto minmax(260px, 1fr);
  align-items: center;
  gap: 32px;
  padding: 32px;
  color: rgba(253, 241, 225, 0.86);
  pointer-events: auto;
}

.site-logo {
  justify-self: start;
  color: rgba(253, 241, 225, 0.92);
  font-family: Georgia, "Times New Roman", serif;
  font-size: 24px;
  font-weight: 500;
  line-height: 1;
  text-decoration: none;
  white-space: nowrap;
}

.site-nav {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: clamp(24px, 2.2vw, 44px);
}

.site-nav a,
.language-switcher {
  color: rgba(253, 241, 225, 0.86);
  font-weight: 700;
  line-height: 1;
  text-decoration: none;
  text-shadow: 0 2px 16px rgba(0, 0, 0, 0.2);
}

.site-nav a {
  font-size: 20px;
  font-weight: 400;
}

.language-switcher {
  justify-self: end;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 5px;
  padding: 0;
  background: transparent;
  font-size: 16px;
  cursor: pointer;
}

.language-switcher span {
  display: inline-flex;
  line-height: 1;
}

/* ---------- Scene images ---------- */

.scene-img {
  display: block;
  user-select: none;
  -webkit-user-drag: none;
  will-change: transform, opacity;
  pointer-events: none;
}

.sky-img {
  inset: 0;
  z-index: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  transform: none;
  will-change: auto;
}

/* The reference animates `filter: blur() brightness()` on the sky.
   A blur whose radius changes has to be recomputed on the GPU for every layer on every frame, and
   on integrated graphics that was the stutter. Each of those layers now has a small copy with
   blur(14px) brightness(0.745) baked into the file, faded in over the sharp one: opacity is
   free for the compositor and the end state is the same picture. */
.sky-blur {
  opacity: 0;
  will-change: opacity;
}

.back-stack {
  top: 0;
  bottom: 0;
  left: -3vw;
  right: -3vw;
  z-index: 1;
  opacity: 1;
  transform: scale(0.76);
  transform-origin: 50% 100%;
  will-change: transform, opacity;
}

.back-img {
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.underwater-img {
  top: auto;
  bottom: 0;
  left: 48%;
  right: auto;
  width: 112%;
  height: auto;
  object-fit: contain;
}

/* The over-under shot: the dive. It starts below the stage (script.js sets the offset from its
   height), rises as the ceiling and the ferns leave, and fills the screen in the third chapter.
   The hero's water is the surface painted in the sky layer. Wider than the stage so its side
   edges never show. */
.underwater-img {
  z-index: 3;
  width: 150%;
  visibility: hidden;
  transform: translate3d(-50%, 120vh, 0) scale(0.86);
  transform-origin: 50% 100%;
}

.note-button:focus-visible {
  outline: 3px solid var(--paper);
  outline-offset: 3px;
}

/* ---------- The ring of cenotes (last chapter) ---------- */

/* Over the underwater scene, under the header (z-index 10): a dark veil, the copy, the map and the
   list with the selected cenote's card. script.js writes opacity and transform on each piece from
   the scroll, and sets .is-live once it has all arrived: only then does it take the pointer. */
.atlas {
  position: absolute;
  inset: 0;
  z-index: 9;
  display: grid;
  grid-template-columns: minmax(0, 1fr) clamp(300px, 27vw, 380px);
  grid-template-rows: auto minmax(0, 1fr);
  grid-template-areas:
    "copy side"
    "map side";
  gap: 20px clamp(24px, 3.4vw, 56px);
  padding: 104px clamp(24px, 3.4vw, 48px) 36px;
  visibility: hidden;
  pointer-events: none;
}

.atlas-veil {
  position: absolute;
  inset: 0;
  z-index: -1;
  opacity: 0;
  background: linear-gradient(180deg, rgba(2, 30, 34, 0.62) 0%, rgba(2, 24, 28, 0.84) 100%);
  will-change: opacity;
}

.atlas-copy {
  grid-area: copy;
  max-width: 560px;
  opacity: 0;
  will-change: transform, opacity;
}

.atlas-copy h2 {
  margin: 0;
  color: var(--paper);
  font-family: Georgia, "Times New Roman", serif;
  font-size: clamp(2.2rem, 3.2vw, 3.4rem);
  font-weight: 500;
  line-height: 0.98;
}

.atlas-copy p {
  margin: 16px 0 0;
  color: rgba(253, 241, 225, 0.82);
  font-size: 1rem;
  line-height: 1.32;
}

.atlas-stage {
  grid-area: map;
  position: relative;
  display: grid;
  place-items: center;
  min-height: 0;
  container-type: size;
}

.atlas-map {
  position: relative;
  width: min(100cqw, 100cqh * 834 / 470);
  aspect-ratio: 834 / 470;
  transform-origin: 50% 60%;
  will-change: transform;
}

.atlas-svg {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  overflow: hidden;
}

.atlas-base {
  opacity: 0;
}

.atlas-land {
  fill: rgba(253, 241, 225, 0.1);
  stroke: rgba(253, 241, 225, 0.55);
  stroke-width: 1.4;
  stroke-linejoin: round;
}

.atlas-sea {
  fill: rgba(253, 241, 225, 0.42);
  font: italic 17px Georgia, "Times New Roman", serif;
  letter-spacing: 0.04em;
}

.atlas-crater {
  fill: none;
  stroke: rgba(253, 241, 225, 0.38);
  stroke-width: 1.4;
  stroke-dasharray: 3 7;
}

.atlas-ring {
  fill: none;
  stroke: var(--glow);
  stroke-width: 4;
  stroke-linecap: round;
  stroke-dasharray: 1;
  stroke-dashoffset: 1;
}

.atlas-labels {
  opacity: 0;
}

.atlas-ring-name {
  fill: var(--glow);
  font: 600 12px Inter, system-ui, -apple-system, "Segoe UI", sans-serif;
  letter-spacing: 0.22em;
  text-transform: uppercase;
}

.atlas-city {
  fill: rgba(253, 241, 225, 0.8);
}

.atlas-city-name {
  fill: rgba(253, 241, 225, 0.78);
  font: 13px Inter, system-ui, -apple-system, "Segoe UI", sans-serif;
}

.atlas-note {
  position: absolute;
  top: 100%;
  right: 0;
  margin: 6px 0 0;
  color: rgba(253, 241, 225, 0.45);
  font-size: 0.75rem;
  letter-spacing: 0.06em;
}

.atlas-pin {
  position: absolute;
  left: var(--x);
  top: var(--y);
  width: 32px;
  height: 32px;
  margin: -16px 0 0 -16px;
  padding: 0;
  border-radius: 50%;
  background: transparent;
  opacity: 0;
  cursor: pointer;
  will-change: transform, opacity;
}

.atlas-pin span,
.atlas-pin::after {
  position: absolute;
  inset: 0;
  margin: auto;
  border-radius: 50%;
}

.atlas-pin span {
  width: 13px;
  height: 13px;
  border: 2px solid var(--paper);
  background: var(--glow);
  box-shadow: 0 0 0 4px rgba(99, 230, 217, 0.18);
  transition:
    transform 260ms cubic-bezier(0.2, 0.8, 0.2, 1),
    background-color 260ms;
}

.atlas-pin::after {
  content: "";
  width: 13px;
  height: 13px;
  border: 1.5px solid var(--glow);
  opacity: 0;
}

.atlas.is-live .atlas-pin::after {
  animation: atlas-ripple 2.6s cubic-bezier(0.2, 0.6, 0.3, 1) infinite;
}

.atlas-pin:nth-of-type(2)::after {
  animation-delay: 0.5s !important;
}

.atlas-pin:nth-of-type(3)::after {
  animation-delay: 1s !important;
}

.atlas-pin:nth-of-type(4)::after {
  animation-delay: 1.5s !important;
}

.atlas-pin:nth-of-type(5)::after {
  animation-delay: 2s !important;
}

@keyframes atlas-ripple {
  0% {
    opacity: 0.8;
    transform: scale(1);
  }

  100% {
    opacity: 0;
    transform: scale(3.4);
  }
}

.atlas-pin.is-active span,
.atlas-pin.is-hover span {
  background: var(--paper);
  transform: scale(1.4);
}

.atlas-pin:focus-visible {
  outline: 2px solid var(--paper);
  outline-offset: 2px;
}

.atlas-side {
  grid-area: side;
  align-self: center;
  display: flex;
  flex-direction: column;
  gap: 18px;
  min-height: 0;
}

.atlas-list {
  margin: 0;
  padding: 0;
  list-style: none;
  border-top: 1px solid rgba(253, 241, 225, 0.16);
}

.atlas-list li {
  opacity: 0;
  will-change: transform, opacity;
}

.atlas-item {
  display: grid;
  grid-template-columns: 28px minmax(0, 1fr) auto;
  align-items: baseline;
  gap: 10px;
  width: 100%;
  padding: 11px 2px;
  border-bottom: 1px solid rgba(253, 241, 225, 0.16);
  color: rgba(253, 241, 225, 0.72);
  background: transparent;
  text-align: left;
  cursor: pointer;
  transition: color 200ms;
}

.atlas-num {
  color: rgba(253, 241, 225, 0.4);
  font-size: 0.75rem;
  font-variant-numeric: tabular-nums;
}

.atlas-name {
  color: inherit;
  font-family: Georgia, "Times New Roman", serif;
  font-size: 1.25rem;
}

.atlas-place {
  font-size: 0.8rem;
  letter-spacing: 0.02em;
}

.atlas-item:hover,
.atlas-item.is-active {
  color: var(--paper);
}

.atlas-item.is-active .atlas-num {
  color: var(--glow);
}

.atlas-item:focus-visible {
  outline: 2px solid var(--paper);
  outline-offset: -2px;
}

.atlas-card {
  position: relative;
  min-height: 168px;
  padding: 22px 24px 24px;
  border-radius: 24px;
  color: var(--ink);
  background: var(--paper);
  box-shadow: 0 24px 60px rgba(0, 0, 0, 0.28);
  opacity: 0;
  will-change: transform, opacity;
}

.atlas-card-icon {
  position: absolute;
  top: 18px;
  right: 18px;
  width: 64px;
  height: 64px;
}

.atlas-card-type {
  display: block;
  font-size: 0.75rem;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.atlas-card-name {
  margin: 38px 0 0;
  font-size: 1.6rem;
  font-weight: 800;
  line-height: 1;
}

.atlas-card-text {
  margin: 10px 0 0;
  font-size: 0.98rem;
  line-height: 1.3;
}

.atlas.is-live .atlas-pin,
.atlas.is-live .atlas-item,
.atlas.is-live .atlas-card {
  pointer-events: auto;
}

/* ---------- Hero title ---------- */

.hero-title {
  left: 50%;
  top: clamp(122px, 19vh, 205px);
  z-index: 3;
  width: min(94vw, 1780px);
  margin: 0;
  color: #fdf1e1;
  font-family: Georgia, "Times New Roman", serif;
  font-size: 14rem;
  font-weight: 500;
  line-height: 0.78;
  text-align: center;
  text-shadow: 0 8px 40px rgba(0, 0, 0, 0.35);
  transform: translate3d(-50%, 0, 0);
  opacity: 1;
  will-change: transform, opacity;
}

/* ---------- Foreground layers ---------- */

/* The cave ceiling: rock and stalactites across the top, roots hanging over the title. Crop: y 0
   to 0.66113 of the frame, full width. Anchored to the top, not to the frame: on wide screens the
   frame is taller than the stage and overflows above it, which cut the rock off and left an
   open-air canyon. The transform origin is the frame's centre, so growing pushes the rock up and
   out like a camera moving forward. */
.ceiling-img {
  left: 50%;
  top: -2vh;
  z-index: 4;
  width: var(--frame-w);
  height: auto;
  transform: translate3d(-50%, 0, 0);
  transform-origin: 50% 75.63%;
}

/* Cropped to what each frame shows (see ASSETS.md) and placed where the crop sat in the frame.
   They scale around 21% and 79% across the frame, 52% down, like the reference. */
.splitframe-img {
  bottom: -2vh;
  z-index: 6;
  height: auto;
  transform: translate3d(0, 0, 0);
  pointer-events: none;
}

/* Crop: x 0 to 0.4056, full height. */
.splitframe-left {
  left: calc(50% - var(--frame-w) * 0.5);
  width: calc(var(--frame-w) * 0.4056);
  transform-origin: 51.78% 52%;
}

/* Crop: x 0.52539 to the right edge, y 0.29492 to the bottom. */
.splitframe-right {
  left: calc(50% + var(--frame-w) * 0.02539);
  width: calc(var(--frame-w) * 0.47461);
  transform-origin: 55.75% 31.93%;
}

/* Stones and ferns along the bottom. Crop: y 0.67188 to the bottom, full width; the origin is
   the frame's centre, above the box, so growing pushes them down and out. */
.ferns-img {
  left: 50%;
  bottom: -2vh;
  z-index: 5;
  width: var(--frame-w);
  height: auto;
  transform: translate3d(-50%, 0, 0);
  transform-origin: 50% -52.38%;
}

.shade {
  inset: 0;
  z-index: 0;
  pointer-events: none;
  opacity: 0;
  /* The reference animates the three stop alphas, all proportional to one value: the gradient
     is fixed at full strength and only its opacity moves, so it is never repainted. */
  background: linear-gradient(
    180deg,
    rgba(16, 92, 96, 0.465) 0%,
    rgba(16, 92, 96, 0.42) 48%,
    rgba(16, 92, 96, 0.51) 100%
  );
  will-change: opacity;
}

/* ---------- Copy ---------- */

.intro-copy {
  left: 50%;
  bottom: clamp(56px, 28vh, 400px);
  z-index: 9;
  width: min(560px, calc(100vw - 40px));
  text-align: center;
  transform: translate3d(-50%, 0, 0);
  opacity: 1;
  will-change: transform, opacity;
}

.intro-copy p {
  margin: 0 auto;
  max-width: 560px;
  color: #fdf1e1;
  font-size: 1.18rem;
  font-weight: 500;
  line-height: 1.18;
  /* It sits over the sunlit water: a wide soft shadow plus a tight one. */
  text-shadow:
    0 1px 3px rgba(0, 0, 0, 0.5),
    0 2px 24px rgba(0, 0, 0, 0.6);
}

.hero-tags {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 10px;
  margin-top: 26px;
}

.hero-tags span {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 42px;
  padding: 0 25px;
  color: var(--ink);
  border-radius: 999px;
  background: #fdf1e1;
  font-size: 0.98rem;
  font-weight: 500;
  box-shadow: 0 12px 30px rgba(0, 0, 0, 0.18);
}

.story-panel {
  left: 50%;
  top: 45%;
  z-index: 10;
  width: min(760px, calc(100vw - 42px));
  text-align: center;
  pointer-events: none;
  transform: translate3d(-50%, -50%, 0);
  will-change: transform, opacity;
}

.story-panel h2 {
  margin: 0;
  color: #fdf1e1;
  font-family: Georgia, "Times New Roman", serif;
  font-size: 4.75rem;
  font-weight: 500;
  line-height: 0.95;
  text-shadow: 0 16px 38px var(--shadow);
}

.story-panel p {
  width: min(520px, 100%);
  margin: 26px auto 0;
  color: #fdf1e1;
  font-size: 1.14rem;
  font-weight: 500;
  line-height: 1.18;
  text-shadow: 0 2px 18px rgba(0, 0, 0, 0.42);
}

.story-panel-light {
  top: 60%;
  opacity: 0;
  transform: translate3d(-50%, calc(-50% + 58px), 0);
}

/* Over the sunlit wall, above the waterline (75% down the screen in that chapter). */
.story-panel-surface {
  top: 36%;
  opacity: 0;
  transform: translate3d(-50%, calc(-50% + 58px), 0);
}

/* The sunbeams behind it are nearly as light as the cream type: a tight dark shadow and a wide
   one, the same as the intro copy. */
.story-panel-surface h2,
.story-panel-surface p {
  text-shadow:
    0 1px 3px rgba(0, 0, 0, 0.55),
    0 10px 40px rgba(0, 0, 0, 0.6);
}

.story-panel-water {
  top: 29%;
  opacity: 0;
  transform: translate3d(-50%, calc(-50% + 58px), 0);
}

.facts {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 86px;
  width: min(470px, 100%);
  margin: 72px auto 0;
}

.facts dt {
  color: #fdf1e1;
  font-family: Georgia, "Times New Roman", serif;
  font-size: 4.2rem;
  font-weight: 500;
  line-height: 0.9;
  text-shadow: 0 14px 34px var(--shadow);
}

.facts dd {
  margin: 18px 0 0;
  color: #fdf1e1;
  font-size: 1rem;
  font-weight: 500;
  line-height: 1.14;
  text-shadow: 0 2px 18px rgba(0, 0, 0, 0.42);
}

.note-button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
  min-height: 50px;
  margin-top: 28px;
  padding: 0 28px;
  border-radius: 999px;
  color: var(--ink);
  background: #fdf1e1;
  box-shadow: 0 16px 34px rgba(0, 0, 0, 0.18);
  pointer-events: auto;
  cursor: pointer;
}

/* Not in the reference: while its panel is faded out the pill sits invisible on top of the next
   chapter and would swallow its clicks. script.js sets .is-live while the panel is on screen. */
.story-panel-water:not(.is-live) .note-button {
  pointer-events: none;
}

.note-button span:first-child {
  font-size: 1.25rem;
  line-height: 1;
}

/* ---------- Media queries ---------- */

@media (max-width: 1500px) {
  .hero-title {
    font-size: 11rem;
  }

  .story-panel h2 {
    font-size: 4.1rem;
  }
}

@media (max-width: 1100px) {
  .hero-title {
    top: 15vh;
    font-size: 7.5rem;
  }

  .story-panel h2 {
    font-size: 3.2rem;
  }

  .facts {
    gap: 34px;
    margin-top: 44px;
  }

  .facts dt {
    font-size: 3.2rem;
  }
}

@media (max-width: 640px) {
  .stage {
    min-height: 640px;
  }

  .site-header {
    grid-template-columns: 1fr auto;
    gap: 18px;
    padding: 24px;
  }

  /* Five links at 17px fit a 360px phone without scrolling; the scroller is only a fallback. */
  .site-nav {
    grid-column: 1 / -1;
    grid-row: 2;
    justify-content: flex-start;
    gap: 16px;
    overflow-x: auto;
    scrollbar-width: none;
  }

  .site-nav a {
    font-size: 17px;
  }

  .site-nav::-webkit-scrollbar {
    display: none;
  }

  .hero-title {
    top: 16vh;
    font-size: 4rem;
  }

  /* The ceiling's rock is thick at its sides and thin in the middle, and at 220vw a phone showed
     only the middle: narrower, so both overhangs and their stalactites frame the top corners. */
  .ceiling-img {
    left: 60%;
    width: 170vw;
  }

  /* The stage is 100vh: the viewport with the browser toolbar hidden. While the toolbar shows it
     covers the bottom of the stage, so the copy rises by exactly its height (100lvh - 100svh). */
  .intro-copy {
    bottom: 42px;
    bottom: calc(42px + 100lvh - 100svh);
  }

  .intro-copy p,
  .story-panel p {
    font-size: 1rem;
  }

  .hero-tags {
    gap: 8px;
  }

  .hero-tags span {
    min-height: 38px;
    padding: 0 16px;
    font-size: 0.88rem;
  }

  .story-panel {
    top: 42%;
  }

  .story-panel h2 {
    font-size: 2.45rem;
  }

  .facts {
    gap: 18px;
    margin-top: 34px;
  }

  .facts dt {
    font-size: 2.5rem;
  }
}

/* Portrait screens (phones, tablets upright). The frame has to be ~1.5 screens tall to reach the
   top, which pushes the split frames off the sides and leaves the water a strip at the bottom. Each layer is sized for the screen instead: the split frames hug their edge, the
   ceiling and the ferns get their own width, and the back layers are sized by height. */
@media (orientation: portrait) {
  .splitframe-left {
    left: calc(var(--frame-w) * -0.11);
  }

  .splitframe-right {
    left: calc(100% - var(--frame-w) * 0.4509);
  }

  .ceiling-img {
    width: 220vw;
  }

  .ferns-img {
    width: 220vw;
  }

  /* A centre crop of the over-under shot (see ASSETS.md), tall enough that at the end of the
     dive its waterline is above the top of the screen: the part under the surface is 76.3% of
     its height, so at scale 0.86 the picture needs 152vh; 142vh wide gives 155vh. At 160vh of the
     full picture the waterline rested 41% down the screen and the end read as a lake under a sky. */
  .underwater-img {
    width: max(150%, 142vh);
  }

  .atlas {
    grid-template-columns: minmax(0, 1fr);
    grid-template-rows: auto minmax(0, 1fr) auto auto;
    grid-template-areas:
      "copy"
      "map"
      "list"
      "card";
    gap: 14px;
    padding: 124px 20px calc(20px + 100lvh - 100svh);
  }

  .atlas-copy p {
    margin-top: 10px;
    font-size: 0.92rem;
  }

  .atlas-side {
    display: contents;
  }

  .atlas-list {
    grid-area: list;
    display: flex;
    gap: 8px;
    overflow-x: auto;
    border-top: 0;
    scrollbar-width: none;
    overscroll-behavior-x: contain;
  }

  .atlas-list::-webkit-scrollbar {
    display: none;
  }

  .atlas-item {
    display: inline-flex;
    gap: 6px;
    width: auto;
    padding: 8px 14px;
    border: 1px solid rgba(253, 241, 225, 0.28);
    border-radius: 999px;
    white-space: nowrap;
  }

  .atlas-item.is-active {
    color: var(--ink);
    border-color: var(--paper);
    background: var(--paper);
  }

  .atlas-item.is-active .atlas-num {
    color: rgba(17, 20, 17, 0.55);
  }

  .atlas-name {
    font-size: 1rem;
  }

  .atlas-place {
    display: none;
  }

  .atlas-card {
    grid-area: card;
    min-height: 0;
    padding: 18px 20px 20px;
  }

  .atlas-card-icon {
    top: 14px;
    right: 14px;
    width: 52px;
    height: 52px;
  }

  .atlas-card-name {
    margin-top: 24px;
    font-size: 1.35rem;
  }

  .atlas-card-text {
    font-size: 0.92rem;
  }


  /* Below the shore, over the water: higher up the waterline crossed the copy. */
  .story-panel-water {
    top: 60%;
  }
}

@media (max-width: 640px) {
  .atlas-sea {
    font-size: 26px;
  }

  .atlas-ring-name {
    font-size: 17px;
    letter-spacing: 0.14em;
  }

  .atlas-city-name {
    font-size: 24px;
  }

  .atlas-city {
    r: 5;
  }

  .atlas-land,
  .atlas-crater {
    stroke-width: 2.4;
  }

  .atlas-ring {
    stroke-width: 7;
  }
}

@media (prefers-reduced-motion: reduce) {
  html {
    scroll-behavior: auto;
  }

  .scene-img,
  .back-stack,
  .hero-title,
  .intro-copy,
  .story-panel {
    transition: none;
  }
}