.atlas-page { min-height: 100svh; }
.atlas-page main { display: flex; }
.atlas-page .site-footer { margin-top: clamp(.65rem, 1.9vh, 1.25rem); }
.atlas-page .header-inner, .atlas-page .footer-inner { padding-block: .65rem; }
.atlas-page .footer-inner { gap: .25rem .7rem; }
.atlas-page .footer-inner strong, .atlas-page .footer-inner a { font-size: .82rem; }
.atlas-page .skip-link { z-index: 5; }

.atlas { display: flex; flex-direction: column; width: min(1560px, 96%); margin-inline: auto; }
.atlas-intro {
  display: grid;
  grid-template-columns: auto minmax(15rem, 22rem);
  justify-content: space-between;
  align-items: end;
  gap: .65rem 2rem;
  padding: clamp(.85rem, 2.6svh, 1.75rem) 2% clamp(.85rem, 2.4svh, 1.6rem);
}

.atlas-kicker {
  color: var(--accent);
  font: 650 .72rem/1.3 var(--mono);
  letter-spacing: .12em;
  text-transform: uppercase;
}

.atlas-kicker span { display: inline-block; width: 1.65rem; height: 1px; margin-right: .35rem; background: currentColor; vertical-align: middle; }
.atlas-intro h1 {
  margin: .32rem 0 0;
  color: var(--ink);
  font: 800 clamp(3.45rem, min(8.9vw, 14svh), 9rem)/.91 var(--display);
  letter-spacing: -.032em;
}
.atlas-intro h1 > span { color: var(--accent); white-space: nowrap; }
.atlas-lede { max-width: 32ch; padding-left: 1rem; border-left: 1px solid #aab6d7; color: #364463; font-size: clamp(.88rem, 1.25vw, 1.08rem); line-height: 1.5; }

.atlas-scene {
  display: flex;
  flex: 1;
  flex-direction: column;
}

.atlas-sections {
  display: grid;
  flex: 1;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  border-top: 1px solid var(--accent);
  border-left: 1px solid var(--rule);
  touch-action: pan-y pinch-zoom;
}

.atlas-section {
  display: grid;
  grid-template-rows: minmax(0, 1fr) auto;
  min-width: 0;
  border-right: 1px solid var(--rule);
  color: var(--ink);
  text-decoration: none;
  -webkit-tap-highlight-color: transparent;
}

.atlas-section:focus-visible { position: relative; z-index: 1; outline-offset: -3px; }

.atlas-section-visual {
  position: relative;
  display: grid;
  align-items: end;
  min-height: clamp(10rem, 37svh, 22rem);
  padding: clamp(.75rem, 2vw, 2rem);
  overflow: hidden;
  background: linear-gradient(to top right, transparent 49.85%, #143fca18 50%, transparent 50.15%) #f2eadb;
}

.atlas-section-number {
  color: var(--accent);
  font: 800 clamp(3.6rem, 8.5vw, 8rem)/.78 var(--display);
  font-variant-numeric: tabular-nums;
  letter-spacing: -.07em;
}

.atlas-section-visual img {
  position: absolute;
  inset: 0;
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  opacity: 0;
}

.atlas-image-note {
  position: absolute;
  inset: auto .5rem .5rem auto;
  padding: .15rem .35rem;
  background: var(--canvas);
  color: var(--ink);
  font-size: .66rem;
  opacity: 0;
}

.atlas-section-caption {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: .45rem;
  min-height: 4.4rem;
  padding: .65rem clamp(.75rem, 1.7vw, 1.65rem);
  border-top: 1px solid var(--rule);
  font: 760 clamp(1.15rem, 2.35vw, 2.35rem)/1 var(--display);
  letter-spacing: -.035em;
}

.atlas-arrow { flex: none; color: var(--accent); font-size: .8em; }

.atlas-section.is-active :is(.atlas-section-visual img, .atlas-image-note) { opacity: 1; }
.atlas-section.is-active .atlas-section-caption { background: var(--accent); color: white; }
.atlas-section.is-active .atlas-arrow { color: white; }

.atlas-preview {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: center;
  gap: 1rem clamp(1rem, 3vw, 3.5rem);
  min-height: 5.25rem;
  padding: .65rem clamp(1rem, 2.65vw, 2.6rem);
  border: 1px solid var(--rule);
  border-top: 3px solid var(--accent);
  background: white;
}

.atlas-preview-index { display: flex; align-items: baseline; gap: .4rem; color: var(--accent); font: 650 .78rem/1 var(--numerals); font-variant-numeric: tabular-nums; white-space: nowrap; }
.atlas-preview-index span:first-child { font: 750 clamp(2rem, min(4vw, 6svh), 4rem)/.95 var(--numerals); letter-spacing: -.025em; }
.atlas-preview h2 { font: 760 clamp(1.4rem, 3vw, 2.45rem)/1.05 var(--display); letter-spacing: -.045em; }
.atlas-preview-copy > p { margin-top: .32rem; color: #475571; font-size: .93rem; }

.atlas-open:not([hidden]) {
  display: inline-flex;
  align-items: center;
  justify-content: space-between;
  gap: 1.1rem;
  min-height: 3rem;
  padding: .6rem .8rem .6rem 1rem;
  background: var(--accent);
  color: white;
  font-size: .89rem;
  font-weight: 700;
  text-decoration: none;
  white-space: nowrap;
}
.atlas-open span { font-size: 1.3rem; line-height: 1; }
.atlas-open:is(:hover, :focus-visible) { background: #0f2e9a; }

@media (prefers-reduced-motion: no-preference) {
  .atlas-section-caption, .atlas-arrow { transition: background-color 180ms ease, color 180ms ease, transform 210ms ease; }
  .atlas-section.is-active .atlas-section-visual img { animation: atlas-image-in 180ms ease-out; }
  .atlas-section.is-active .atlas-arrow { transform: translate(2px, -2px); }

  @keyframes atlas-image-in {
    from { clip-path: inset(0 100% 0 0); }
    to { clip-path: inset(0); }
  }
}

@media (max-width: 760px) {
  .atlas { width: 100%; }
  .atlas-page .header-inner, .atlas-page .footer-inner { padding-block: .5rem; }
  .atlas-intro { grid-template-columns: 1fr; align-items: start; padding-inline: 1rem; }
  .atlas-intro h1 { font-size: clamp(2.7rem, 11.8vw, 5rem); }
  .atlas-lede { max-width: 43ch; font-size: .85rem; }
  .atlas-sections { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .atlas-section:nth-child(n + 3) { border-top: 1px solid var(--rule); }
  .atlas-section-visual { min-height: clamp(5.15rem, 14svh, 11rem); }
  .atlas-section-caption { min-height: 2.7rem; font-size: clamp(1.02rem, 3.5vw, 1.55rem); }
  .atlas-preview { grid-template-columns: auto minmax(0, 1fr); gap: .55rem .85rem; }
  .atlas-open:not([hidden]) { grid-column: 2; justify-self: start; min-height: 2.75rem; }
  .atlas-preview-copy > p { font-size: .82rem; }
}

@media (max-width: 420px) and (max-height: 730px) {
  .atlas-intro { gap: .45rem; padding-block: .55rem .65rem; }
  .atlas-lede { font-size: .82rem; }
  .atlas-preview { grid-template-columns: minmax(0, 1fr); gap: .45rem; padding-block: .5rem; }
  .atlas-preview-index { display: none; }
  .atlas-open:not([hidden]) { grid-column: 1; }
}