/* Standalone page with the homepage's shared font and theme stylesheets. */
.atlas-page { padding: 0; }
.atlas-nav {
  box-sizing: border-box; max-width: 1080px; margin: 0 auto;
  display: flex; align-items: center; justify-content: space-between; gap: 24px;
  padding: 24px 0; border-bottom: 1px solid #e5e5e5;
}
.atlas-name { color: #043361; font-size: 24px; font-weight: 500; white-space: nowrap; }
.atlas-nav-links { display: flex; align-items: center; gap: 24px; }
.atlas-nav-links a { display: inline-flex; align-items: center; min-height: 44px; color: #595959; }
.atlas-nav-links a:hover, .atlas-nav-links a[aria-current="page"] { color: #069; }
.atlas-nav a:focus-visible { outline: 2px solid #069; outline-offset: 3px; }
.world { box-sizing: border-box; max-width: 1080px; margin: 0 auto; padding: 36px 0; }
#atlas-title { font-size: 28px; margin: 0 0 14px; }

.world {
  --atlas-heading: #043361;
  --atlas-muted: #595959;
  --atlas-border: #e5e5e5;
  --atlas-surface: #fff;
  --atlas-hover: #f5f9fc;
  --atlas-pin: 0, 102, 153;
  --atlas-land: 4, 51, 97;
  --atlas-land-light: 78, 114, 145;
  --atlas-sphere-light: #ffffff;
  --atlas-sphere-edge: #eaf1f8;
}
.world *, .world *::before, .world *::after { box-sizing: border-box; }
.venue-chips { display: flex; flex-wrap: wrap; gap: 8px; }
.chip {
  display: inline-flex; align-items: center; gap: 8px;
  min-height: 40px; padding: 6px 12px;
  border: 1px solid var(--atlas-border); border-radius: 2px;
  background: var(--atlas-surface); color: var(--atlas-muted);
  font: inherit; font-size: 14px; cursor: pointer;
  transition: border-color .2s, color .2s, background .2s;
}
.chip::before { content: ''; width: 6px; height: 6px; border-radius: 50%; background: #aaa; }
.chip:hover, .chip[aria-pressed="true"] { color: rgb(var(--atlas-pin)); border-color: currentColor; background: var(--atlas-hover); }
.chip[aria-pressed="true"]::before { background: currentColor; }
.world a:focus-visible, .world button:focus-visible { outline: 2px solid rgb(var(--atlas-pin)); outline-offset: 3px; }
.world-body { position: relative; margin-top: 24px; }
.world-stage { position: relative; height: clamp(440px, 60vh, 600px); }
.world-stage canvas { display: block; width: 100%; height: 100%; cursor: grab; touch-action: pan-y; }
.world-stage .globe-surface { position: absolute; inset: 0; pointer-events: none; }
.world-stage #globe { position: relative; }
.world-stage canvas.dragging { cursor: grabbing; }
.venue-panel { position: absolute; top: 0; left: 0; width: 400px; transition: opacity .3s; }
.venue-panel.detached { opacity: .6; }
.venue-place { color: var(--atlas-muted); margin: 0 0 20px; }
.venue-edition { font-size: 12px; letter-spacing: .1em; text-transform: uppercase; }
.venue-city { color: var(--atlas-heading); font-size: 38px; font-weight: 500; line-height: 1.1; margin: 8px 0; }
.venue-meta { font-size: 15px; margin: 0; }
.paper-card {
  display: flex; align-items: flex-start; justify-content: space-between; gap: 16px;
  padding: 20px 0; border-top: 1px solid var(--atlas-border);
  color: inherit; animation: card-in .3s ease backwards;
}
.card-body { display: flex; flex-direction: column; align-items: flex-start; gap: 8px; min-width: 0; }
.card-badge {
  color: var(--atlas-muted); font-size: 11px; font-weight: 500;
  line-height: 1.2; letter-spacing: .08em; text-transform: uppercase;
}
.card-title { font-size: 23px; font-weight: 500; line-height: 1.25; color: var(--atlas-heading); }
.card-arrow { color: rgb(var(--atlas-pin)); font-size: 22px; flex: none; margin-top: 18px; }
.paper-card:hover .card-title { color: rgb(var(--atlas-pin)); text-decoration: underline; text-underline-offset: 4px; text-decoration-thickness: 1px; }
.region-detail { border-top: 1px solid var(--atlas-border); margin: 0 0 4px; padding-top: 12px; }
.region-detail[hidden] { display: none; }
.region-detail-label { color: var(--atlas-muted); font-size: 11px; letter-spacing: .08em; text-transform: uppercase; }
.region-map svg { display: block; width: 100%; height: 155px; overflow: visible; }
.region-land { fill: rgb(var(--atlas-land)); stroke: rgb(var(--atlas-land)); stroke-width: .5; }
.region-label { fill: var(--atlas-muted); font: 12px Georgia, serif; }
.region-city { fill: var(--atlas-heading); font: 13px Georgia, serif; }
.region-leader { fill: none; stroke: rgb(var(--atlas-pin)); stroke-width: .8; }
.region-point { fill: #ffd34e; stroke: none; filter: drop-shadow(0 0 3px #ffc72db3); }
.world-note { color: var(--atlas-muted); margin: 22px 0 16px; font-size: 14px; }
.atlas-credit { border-top: 1px solid var(--atlas-border); padding-top: 12px; font-size: 12px; color: #888; }
@keyframes card-in { from { opacity: 0; transform: translateY(4px); } }
@media (prefers-color-scheme: dark) {
  .atlas-auto-dark .world {
    --atlas-heading: #3eb7f0;
    --atlas-muted: #b8bac2;
    --atlas-border: #4b4d5a;
    --atlas-surface: #20212b;
    --atlas-hover: #292e3b;
    --atlas-pin: 62, 183, 240;
    --atlas-land: 69, 128, 168;
    --atlas-land-light: 126, 170, 203;
    --atlas-sphere-light: #293a50;
    --atlas-sphere-edge: #20212b;
  }
  .atlas-auto-dark .atlas-name,
  .atlas-auto-dark .atlas-nav-links a[aria-current="page"],
  .atlas-auto-dark .atlas-nav-links a:hover,
  .atlas-auto-dark .card-title,
  .atlas-auto-dark .paper-card:hover .card-title { color: #3eb7f0; }
  .atlas-auto-dark .atlas-credit, .atlas-auto-dark .atlas-nav-links a { color: #b8bac2; }
  .atlas-auto-dark .atlas-nav { border-color: #4b4d5a; }
}
@media (max-width: 600px) {
  .world-stage { height: min(95vw, 350px); }
  .chip { min-height: 44px; }
  .paper-card { gap: 14px; }
  .card-title { font-size: 21px; }
  .card-badge { font-size: 11px; }
}
@media (max-width: 360px) {
  .chip { font-size: 13px; padding: 6px 10px; }
}
@media (prefers-reduced-motion: reduce) {
  .paper-card { animation: none; }
  .venue-panel, .chip { transition: none; }
}

@media (max-width: 1140px) {
  .atlas-nav { margin: 0 24px; }
  .world { padding: 32px 24px; }
}
@media (max-width: 760px) {
  .atlas-nav { margin: 0 16px; padding: 14px 0; gap: 12px; }
  .atlas-name { font-size: 21px; }
  .atlas-nav-links { gap: 14px; font-size: 14px; }
  .world { padding: 26px 16px; }
  .world-stage { height: min(95vw, 380px); }
  .venue-panel { position: static; width: auto; }
  .venue-city { font-size: 32px; }
  .region-map svg { height: 176px; }
}
@media (max-width: 360px) {
  .atlas-nav { flex-wrap: wrap; gap: 0; }
  .atlas-nav-links { width: 100%; }
}