/* Lumen Atlas world: an illustrated drag-to-pan plate with an interactive SVG overlay. */
.world {
  --world-sky: #d9eff0;
  --world-route: #cc1d8a;
  --world-gold: #e0a32e;
  --world-ink: #132c49;
  --world-paper: #f7f5f0;
  position: relative;
  height: 100vh;
  height: 100dvh;
  min-height: 620px;
  overflow: clip;
  color: var(--world-ink);
  background: var(--world-sky);
  isolation: isolate;
}

:root[data-theme="dark"] .world {
  --world-sky: #071728;
  --world-gold: #f0bc4a;
  --world-ink: #f3eee3;
  --world-paper: #132c49;
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme]) .world {
    --world-sky: #071728;
    --world-gold: #f0bc4a;
    --world-ink: #f3eee3;
    --world-paper: #132c49;
  }
}

.world-viewport {
  position: absolute;
  inset: 0;
  overflow: hidden;
  cursor: grab;
  touch-action: none;
  user-select: none;
  -webkit-user-select: none;
  background: var(--world-sky);
}
.world-viewport.is-dragging { cursor: grabbing; }
.world-viewport:focus-visible { outline: 3px solid var(--world-route); outline-offset: -3px; }

.world-plane {
  position: absolute;
  top: 0;
  left: 0;
  height: calc(100% - 76px);
  aspect-ratio: 3 / 2;
  transform-origin: 0 0;
  will-change: transform;
}
.world-plane.is-gliding { transition: transform .5s cubic-bezier(.22, .61, .36, 1); }

.world-plate {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
}
.world-overlay {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  overflow: visible;
  z-index: 1;
}

.world-building { color: inherit; text-decoration: none; cursor: pointer; }
.world-building:focus-visible { outline: none; }
.world-hit { fill: transparent; stroke: none; pointer-events: all; }
.world-building:focus-visible .world-hit {
  stroke: var(--world-route);
  stroke-width: 5;
  vector-effect: non-scaling-stroke;
}

.world-label { opacity: 0; pointer-events: none; transition: opacity .15s ease; }
.world-building:hover .world-label,
.world-building:focus .world-label,
.world-building[aria-current="true"] .world-label { opacity: 1; }
.world-building.is-touch-preview .world-label { opacity: 1; }
.world-label-card { fill: var(--world-paper); stroke: var(--world-ink); stroke-width: 1.5; }
.world-label-title {
  fill: var(--world-ink);
  font: 800 18px/1 -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  letter-spacing: .08em;
}
.world-label-title--compact {
  font-size: 14px;
  letter-spacing: .05em;
}
.world-building--easter .world-label-card { fill: #fff; }
.world-label-title--easter {
  font-size: 16px;
  letter-spacing: .04em;
}
.world-label-go { fill: #ffb612; }
.world-label-pack { fill: #203731; }
.world-label-kicker {
  fill: var(--world-route);
  font: 800 10px/1 -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  letter-spacing: .16em;
}

.world-explore-note {
  position: absolute;
  z-index: 2;
  top: 1rem;
  right: 1rem;
  max-width: min(18rem, calc(100% - 2rem));
  margin: 0;
  padding: .7rem .85rem;
  border: 1px solid color-mix(in srgb, var(--world-ink) 24%, transparent);
  background: color-mix(in srgb, var(--world-paper) 92%, transparent);
  color: var(--world-ink);
  font: 750 .72rem/1.35 var(--sans);
  letter-spacing: .06em;
  text-transform: uppercase;
  pointer-events: none;
  box-shadow: 0 12px 32px -24px rgba(4, 21, 37, .7);
  backdrop-filter: blur(8px);
}

.world-welcome {
  position: absolute;
  z-index: 4;
  top: clamp(1.5rem, 5vw, 5.5rem);
  left: clamp(1rem, 4vw, 4.5rem);
  width: min(35rem, calc(100% - 2rem));
  padding: clamp(1.25rem, 3vw, 2.25rem);
  border: 1px solid color-mix(in srgb, var(--world-ink) 28%, transparent);
  border-top: 4px solid var(--world-route);
  background: color-mix(in srgb, var(--world-paper) 94%, transparent);
  color: var(--world-ink);
  box-shadow: 0 24px 80px -42px rgba(4, 21, 37, .62);
  backdrop-filter: blur(7px);
}
.world-welcome::after {
  content: "";
  position: absolute;
  inset: .55rem;
  border: 1px solid color-mix(in srgb, var(--world-ink) 12%, transparent);
  pointer-events: none;
}
.world-welcome { transition: opacity .3s ease, transform .3s ease; }
.world.is-welcome-hidden .world-welcome {
  opacity: 0;
  transform: translateX(-26px);
  pointer-events: none;
}
.world-welcome-chip {
  position: absolute;
  z-index: 4;
  top: 1rem;
  left: 1rem;
  display: none;
  align-items: center;
  gap: .5rem;
  min-height: 44px;
  padding: 0 1rem;
  border: 1px solid color-mix(in srgb, var(--world-ink) 24%, transparent);
  background: color-mix(in srgb, var(--world-paper) 94%, transparent);
  color: var(--world-ink);
  font: 750 .75rem/1 var(--sans);
  letter-spacing: .08em;
  text-transform: uppercase;
  cursor: pointer;
  box-shadow: 0 12px 36px -24px rgba(4, 21, 37, .7);
  backdrop-filter: blur(9px);
}
.world.is-welcome-hidden .world-welcome-chip { display: inline-flex; }
.world-welcome > * { position: relative; z-index: 1; }
.world-welcome__kicker {
  color: var(--world-route);
  font: 800 .72rem/1.2 var(--sans);
  letter-spacing: .18em;
  text-transform: uppercase;
}
.world-welcome h1 {
  max-width: 10ch;
  margin-top: .75rem;
  color: var(--world-ink);
  font-family: Impact, Haettenschweiler, "Arial Narrow Bold", var(--sans);
  font-size: clamp(3rem, 6.5vw, 6.4rem);
  font-weight: 800;
  letter-spacing: -.035em;
  line-height: .9;
  text-transform: uppercase;
}
.world-welcome h1 span { color: var(--world-route); }
.world-welcome__dek {
  max-width: 37ch;
  margin-top: 1.15rem;
  color: color-mix(in srgb, var(--world-ink) 82%, transparent);
  font: 550 clamp(.95rem, 1.4vw, 1.08rem)/1.55 var(--sans);
}
.world-welcome__actions { display: flex; flex-wrap: wrap; gap: .75rem; margin-top: 1.35rem; }
.world-welcome .btn--primary { background: var(--world-route); color: #fff; }
.world-welcome .btn--ghost { border-color: color-mix(in srgb, var(--world-ink) 32%, transparent); color: var(--world-ink); }

.world-tools {
  position: absolute;
  z-index: 45;
  right: clamp(.75rem, 2.5vw, 2rem);
  bottom: calc(76px + 1rem);
  display: flex;
  align-items: center;
  gap: .6rem;
}
.world-read-full {
  min-height: 48px;
  border: 1px solid color-mix(in srgb, var(--world-ink) 24%, transparent);
  background: color-mix(in srgb, var(--world-paper) 94%, transparent);
  color: var(--world-ink);
  box-shadow: 0 12px 36px -24px rgba(4, 21, 37, .7);
  backdrop-filter: blur(9px);
}
.world-read-full {
  padding: 0 1rem;
  font: 750 .75rem/1 var(--sans);
  letter-spacing: .08em;
  text-transform: uppercase;
  cursor: pointer;
}

.world-directory {
  display: none;
  position: fixed;
  z-index: 44;
  right: .75rem;
  bottom: 4.6rem;
  width: min(22rem, calc(100vw - 1.5rem));
  max-height: min(65vh, 38rem);
  overflow: auto;
  border: 1px solid color-mix(in srgb, var(--world-ink) 24%, transparent);
  background: var(--world-paper);
  color: var(--world-ink);
  box-shadow: 0 24px 70px -30px rgba(4, 21, 37, .78);
}
.world-directory__head { padding: 1rem; border-bottom: 1px solid color-mix(in srgb, var(--world-ink) 18%, transparent); }
.world-directory__head strong { display: block; font: 800 .75rem/1 var(--sans); letter-spacing: .16em; text-transform: uppercase; }
.world-directory__head span { display: block; margin-top: .35rem; font-size: .82rem; opacity: .7; }
.world-directory ol,
.world-directory ul { margin: 0; padding: 0; list-style: none; }
.world-directory a,
.world-directory button {
  display: grid;
  grid-template-columns: 2.3rem 1fr auto;
  width: 100%;
  padding: .8rem 1rem;
  border: 0;
  border-bottom: 1px solid color-mix(in srgb, var(--world-ink) 11%, transparent);
  background: transparent;
  color: inherit;
  font: inherit;
  text-align: left;
  text-decoration: none;
  cursor: pointer;
}
.world-directory a:hover,
.world-directory button:hover { background: color-mix(in srgb, var(--world-route) 8%, transparent); }
.world-directory__n { color: var(--world-route); font-weight: 800; }
.world-directory__name { font-weight: 750; }
.world-directory__kind { align-self: center; font-size: .66rem; letter-spacing: .09em; opacity: .58; text-transform: uppercase; }

.world-route-ribbon {
  position: absolute;
  z-index: 3;
  left: 0;
  right: 0;
  bottom: 0;
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  border-top: 1px solid color-mix(in srgb, var(--world-ink) 26%, transparent);
  background: color-mix(in srgb, var(--world-paper) 94%, transparent);
  color: var(--world-ink);
  backdrop-filter: blur(8px);
}
.world-route-ribbon a {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: .6rem;
  min-height: 76px;
  padding: .8rem clamp(.65rem, 1.6vw, 1.5rem);
  border-right: 1px solid color-mix(in srgb, var(--world-ink) 14%, transparent);
  color: inherit;
  text-decoration: none;
}
.world-route-ribbon a:last-child { border-right: 0; }
.world-route-ribbon b { color: var(--world-route); font-size: .8rem; }
.world-route-ribbon strong { display: block; font: 800 .78rem/1.1 var(--sans); letter-spacing: .1em; text-transform: uppercase; }
.world-route-ribbon span { display: block; margin-top: .25rem; font-size: .72rem; opacity: .7; }

.world-dialog {
  width: min(94vw, 1440px);
  height: min(89vh, 900px);
  max-width: none;
  max-height: none;
  padding: 0;
  border: 1px solid rgba(19, 44, 73, .32);
  background: var(--paper);
  color: var(--navy);
  box-shadow: 0 28px 110px -38px rgba(4, 21, 37, .82);
  overflow: hidden;
}
.world-dialog::backdrop { background: rgba(3, 16, 29, .72); backdrop-filter: blur(5px); }
:root[data-theme="dark"] .world-dialog { background: #101f31; color: #eef2ed; border-color: rgba(223, 243, 239, .22); }
.world-dialog__bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  min-height: 48px;
  padding-left: 1rem;
  background: var(--magenta);
  color: #fff;
}
.world-dialog__bar span { font: 800 .72rem/1 var(--sans); letter-spacing: .16em; text-transform: uppercase; }
.world-dialog__close { align-self: stretch; width: 52px; border: 0; background: transparent; color: #fff; font-size: 1.65rem; cursor: pointer; }
.world-dialog__layout { display: grid; grid-template-columns: minmax(0, 1.35fr) minmax(20rem, .65fr); height: calc(100% - 48px); }
.world-dialog--topic { width: min(92vw, 900px); height: min(86vh, 780px); }
.world-dialog--topic .world-dialog__layout { grid-template-columns: minmax(0, 1fr); }
.world-dialog--topic .world-guide { width: min(100%, 760px); margin-inline: auto; }
.world-cutaway {
  position: relative;
  display: grid;
  place-items: center;
  min-width: 0;
  padding: clamp(1rem, 3vw, 2.5rem);
  overflow: hidden;
  background: #f2ecdb;
  border-right: 1px solid rgba(19, 44, 73, .22);
}
:root[data-theme="dark"] .world-cutaway { border-right-color: rgba(223,243,239,.16); }
.world-cutaway__art { width: 100%; height: 100%; max-height: 700px; object-fit: contain; }
.world-cutaway[hidden],
.world-guide__rooms[hidden],
.world-dialog__action[hidden] { display: none !important; }

.world-guide { min-width: 0; overflow: auto; padding: clamp(1.5rem, 3vw, 2.75rem); }
.world-guide__kicker { color: var(--magenta); font: 800 .7rem/1 var(--sans); letter-spacing: .18em; text-transform: uppercase; }
.world-guide h2 { margin-top: .6rem; font-family: Impact, Haettenschweiler, "Arial Narrow Bold", var(--sans); font-size: clamp(2.5rem, 4vw, 4.6rem); font-weight: 800; letter-spacing: -.025em; line-height: .92; text-transform: uppercase; }
.world-guide__promise { margin-top: 1rem; color: currentColor; font: 750 1.05rem/1.4 var(--sans); }
.world-guide__rooms { display: grid; margin: 1.5rem 0 1.75rem; padding: 0; list-style: none; border-top: 1px solid color-mix(in srgb, currentColor 50%, transparent); }
.world-guide__room { display: grid; grid-template-columns: 2rem 1fr; gap: .65rem; padding: .75rem 0; border-bottom: 1px solid color-mix(in srgb, currentColor 28%, transparent); }
.world-guide__room b { color: var(--magenta); }
.world-guide__room strong { font: 800 .76rem/1.25 var(--sans); letter-spacing: .08em; text-transform: uppercase; }
.world-guide__copy { font-size: .92rem; line-height: 1.55; }
.world-guide__copy > * + * { margin-top: 1rem; }
.world-guide__summary { max-width: 62ch; }
.world-guide__copy .wrap { max-width: none; padding: 0; }
.world-guide__copy .section { padding: 0; }
.world-guide__copy h2,
.world-guide__copy h3 { margin-top: 1rem; font-family: var(--sans); font-size: 1.15rem; line-height: 1.25; text-transform: none; letter-spacing: 0; }
.world-guide__copy p { max-width: 62ch; }
.world-guide__copy .head,
.world-guide__copy .two,
.world-guide__copy .grid2,
.world-guide__copy .grid3,
.world-guide__copy .cards,
.world-guide__copy .pricing-grid,
.world-guide__copy .operator { display: block; }
.world-guide__copy [style*="margin-top"] { margin-top: .75rem !important; }
.world-guide__copy .reveal { opacity: 1; transform: none; }
.world-guide__copy .btn,
.world-guide__copy form { display: none; }
.world-dialog__action { display: inline-flex; align-items: center; justify-content: center; min-height: 46px; margin-top: 1.5rem; padding: .75rem 1rem; background: var(--magenta); color: #fff; font: 750 .8rem/1 var(--sans); text-decoration: none; }
.world-dialog__nav { display: flex; gap: .65rem; margin-top: 1.4rem; }
.world-dialog__nav button { flex: 1; min-height: 44px; border: 1px solid currentColor; background: transparent; color: inherit; font: 750 .78rem var(--sans); cursor: pointer; }
.world-dialog__nav button[data-world-next] { background: var(--magenta); border-color: var(--magenta); color: #fff; }

.world-enhanced #canonicalSite { display: none; }
.world-enhanced.world-longform-open #canonicalSite { display: block; }
.world-enhanced.world-longform-open .world-read-full { background: var(--magenta); color: #fff; border-color: var(--magenta); }

.world-dialog--easter {
  background: #fff8df !important;
  color: #203731 !important;
}
.world-dialog--easter .world-dialog__bar { background: #203731; color: #ffb612; }
.world-dialog--easter .world-dialog__close { color: #ffb612; }
.world-dialog--easter .world-guide__kicker,
.world-dialog--easter .world-guide h2 { color: #203731; }
.world-dialog--easter .world-guide__promise { color: #000000; }
.world-easter-cheer {
  display: flex;
  gap: .45em;
  font: 900 clamp(1.8rem, 5vw, 3.4rem)/1 var(--sans);
  letter-spacing: -.035em;
  text-transform: uppercase;
}
.world-easter-go { color: #ffb612; text-shadow: 0 1px 0 #203731; }
.world-easter-pack { color: #203731; }
.world-dialog--easter .world-dialog__action { background: #ffb612; color: #203731; }

@media (min-width: 941px) {
  .world-viewport { bottom: 76px; }
  .world-plane {
    width: 100%;
    height: auto;
  }
  :root.world-enhanced:not(.world-longform-open) { height: 100%; overflow: hidden; }
  :root.world-enhanced:not(.world-longform-open) body {
    display: grid;
    grid-template-rows: 66px minmax(0, 1fr) auto;
    height: 100dvh;
    overflow: hidden;
  }
  :root.world-enhanced:not(.world-longform-open) main { min-height: 0; }
  :root.world-enhanced:not(.world-longform-open) .world { height: 100%; min-height: 0; }
  :root.world-enhanced:not(.world-longform-open) .foot__in {
    min-height: 74px;
    flex-wrap: nowrap;
    gap: 1rem;
    padding-block: .55rem;
  }
  :root.world-enhanced:not(.world-longform-open) .brandlogo--foot { width: 108px; height: 46px; }
  :root.world-enhanced:not(.world-longform-open) .foot__links {
    justify-content: flex-end;
    gap: clamp(.65rem, 1.2vw, 1.1rem);
    font-size: clamp(.7rem, .8vw, .82rem);
  }
}

@media (min-width: 941px) and (max-height: 940px) {
  .world-welcome {
    top: clamp(.5rem, 2vh, 1rem);
    padding: clamp(.8rem, 2vh, 1.25rem);
  }
  .world-welcome h1 {
    margin-top: .45rem;
    font-size: clamp(2.35rem, 7.5vh, 4.5rem);
    line-height: .88;
  }
  .world-welcome__dek {
    margin-top: .65rem;
    font-size: clamp(.82rem, 1.8vh, .95rem);
    line-height: 1.35;
  }
  .world-welcome__actions { margin-top: .8rem; }
}

@media (max-width: 940px) {
  .world { display: flex; flex-direction: column; height: auto; min-height: 100dvh; }
  .world-welcome { position: relative; inset: auto; width: auto; margin: 0; border-left: 0; border-right: 0; }
  .world-welcome h1 { max-width: 12ch; font-size: clamp(3.1rem, 12vw, 5rem); }
  .world-viewport { position: relative; flex: 1; min-height: 58vh; }
  .world-plane { height: max(120vh, 760px); }
  .world-route-ribbon { position: relative; grid-template-columns: 1fr; }
  .world-route-ribbon a { min-height: 58px; border-right: 0; border-bottom: 1px solid color-mix(in srgb, var(--world-ink) 14%, transparent); }
  .world-route-ribbon a:last-child { border-bottom: 0; }
  .world-dialog { width: 100vw; height: 100dvh; }
  .world-dialog__layout { grid-template-columns: 1fr; overflow: auto; }
  .world-cutaway { min-height: 44vh; border-right: 0; border-bottom: 1px solid rgba(19,44,73,.2); }
  .world-guide { overflow: visible; }
  .world.is-welcome-hidden .world-welcome { display: none; }
}

@media (max-width: 560px) {
  .nav__in { gap: .5rem; }
  .nav__cta { gap: .45rem; }
  .nav__cta > .btn { display: none; }
  .world-viewport { min-height: 52vh; }
  .world-tools { position: fixed; right: .6rem; bottom: .6rem; }
  .world-read-full { display: none; }
  .world-directory { right: .6rem; bottom: 4.2rem; width: calc(100vw - 1.2rem); }
  .world-welcome { padding: 1.25rem 1rem 1.5rem; }
  .world-welcome::after { inset: .4rem; }
  .world-welcome__actions .btn { width: 100%; justify-content: center; }
  .world-welcome-chip {
    top: .75rem;
    left: .75rem;
    width: calc(50% - 1rem);
    padding: .7rem .65rem;
    justify-content: center;
    font-size: .64rem;
    line-height: 1.25;
    text-align: center;
  }
  .world-explore-note {
    top: .75rem;
    left: calc(50% + .25rem);
    right: .75rem;
    max-width: none;
    padding: .7rem .65rem;
    font-size: .64rem;
  }
  .world-dialog__bar { padding-left: .75rem; }
  .world-cutaway { min-height: 40vh; padding: .7rem; }
  .world-guide { padding: 1.25rem 1rem 2rem; }
}

@media (prefers-reduced-motion: reduce) {
  .world-plane.is-gliding { transition: none; }
  .world-label,
  .world-welcome { transition: none; }
}
