/* Omnia's atlas: illustrated places inside bright, beveled pixel windows. */
.atlas-page { --atlas-edge:#332052; --atlas-sky:#d6f3ff; --atlas-lilac:#e8d5ff; min-width:0; }
.atlas-page :is(button,a,summary):focus-visible { outline:3px solid #2277ff; outline-offset:4px; }
.atlas-page :is(h1,h2,h3,h4,p) { overflow-wrap:anywhere; }
.atlas-heading { display:flex; align-items:center; justify-content:space-between; gap:24px; }
.atlas-heading h1 { text-shadow:2px 2px #fff,4px 4px #b8d5ff; }
.atlas-heading p { max-width:none; }
.atlas-heading-star { color:#bb66ca; filter:drop-shadow(3px 3px #fff1a0); flex:0 0 auto; }
.atlas-map-window,
.atlas-detail {
  border:4px solid var(--atlas-edge);
  background:linear-gradient(130deg,#fff9db,#e3f4ff 72%,#efddff);
  box-shadow:inset 0 0 0 3px #fff,5px 5px var(--atlas-edge),8px 8px #49336b28;
  margin:0 0 35px;
}
.atlas-map-titlebar {
  display:flex; justify-content:space-between; align-items:center; gap:20px;
  padding:23px 26px 19px;
  border-bottom:3px solid #76618f;
  background:linear-gradient(110deg,#c6edff,#e3d1ff 62%,#ffd5e8);
  box-shadow:inset 0 3px #fff8;
}
.atlas-map-titlebar .eyebrow { color:#664783; }
.atlas-map-titlebar h2 { margin:9px 0 0; font:13px/1.7 var(--pixel); color:#233a79; }
.atlas-map-seal { color:#ffe791; font:42px/1 var(--body); text-shadow:2px 2px #8356a1; }
.atlas-map-tools {
  position:sticky; top:10px; z-index:5;
  display:flex; align-items:center; gap:10px; flex-wrap:wrap;
  margin:15px; padding:11px 13px;
  border:2px solid #9880b5;
  background:linear-gradient(115deg,#fff6ce,#edf4ff);
  box-shadow:inset 2px 2px #fff,3px 3px #65508155;
}
.atlas-map-tools .button { min-width:44px; min-height:42px; padding:10px 13px; }
.atlas-map-tools [data-action^="atlas-zoom-"]:not(.atlas-fit-button) { font:27px/1 var(--body); padding:4px 12px; }
.atlas-page button:disabled { cursor:default; }
.atlas-zoom-level { min-width:58px; text-align:center; color:#51367b; font:23px/1 var(--body); }
.atlas-full-map { margin-left:auto; }
.atlas-map-instructions { margin:14px 22px 18px; color:#62477b; font:21px/1.4 var(--body); }
.atlas-map-description { margin:20px 23px 4px; color:#4e376e; font:24px/1.45 var(--body); }
.atlas-map-description p { margin:0 0 1em; max-width:none; }
.atlas-map-description p:last-child { margin-bottom:0; }
.atlas-map-viewport {
  margin:0 15px;
  overflow:auto;
  position:relative;
  border:3px solid #5d446e;
  background:#d8eff4;
  scrollbar-color:#9873b8 #f6ecda;
  scrollbar-width:auto;
  touch-action:auto;
}
.atlas-map-viewport:focus-visible { outline:3px solid #2277ff; outline-offset:4px; }
.atlas-map-viewport.is-zoomed { max-height:min(76vh,900px); }
.atlas-map-stage { position:relative; width:calc(100% * var(--atlas-zoom,1)); min-width:100%; }
.atlas-world-map { display:block; width:100%; max-width:none; height:auto; image-rendering:auto; }
.atlas-map-pin {
  position:absolute;
  left:clamp(24px,var(--pin-x),calc(100% - 24px));
  top:clamp(24px,var(--pin-y),calc(100% - 24px));
  transform:translate(-50%,-50%);
  width:44px; height:44px; padding:0;
  display:grid; place-items:center;
  border:0;
  color:#342356;
  background:transparent;
  box-shadow:none;
  z-index:2;
}
.atlas-pin-number { display:grid; place-items:center; width:30px; height:30px; border:2px solid #362052; background:linear-gradient(#fff8cd,#ffd674); box-shadow:inset 1px 1px #fff,2px 2px #25184490; font:7px/1 var(--pixel); white-space:nowrap; }
.atlas-map-pin:hover,
.atlas-map-pin:focus-visible,
.atlas-map-pin.is-selected { background:transparent; z-index:4; }
.atlas-map-pin:is(:hover,:focus-visible,.is-selected) .atlas-pin-number { background:linear-gradient(#fce0ff,#d5b5ff); }
.atlas-map-pin.is-selected { outline:3px solid #fff4b4; outline-offset:2px; }
.atlas-pin-name {
  position:absolute; top:calc(100% + 7px); left:50%; transform:translateX(-50%);
  display:none; width:max-content; max-width:200px;
  padding:7px 10px; border:2px solid #553872;
  background:#fff9df; color:#33205a;
  box-shadow:2px 2px #4d365f66;
  font:20px/1.1 var(--body); pointer-events:none;
}
.atlas-map-pin:is(:hover,:focus-visible,.is-selected) .atlas-pin-name { display:block; }
.atlas-map-pin.label-start .atlas-pin-name { left:0; transform:none; }
.atlas-map-pin.label-end .atlas-pin-name { left:auto; right:0; transform:none; }
.atlas-map-pin.label-above .atlas-pin-name { top:auto; bottom:calc(100% + 7px); }
.atlas-map-key { display:flex; gap:8px; flex-wrap:wrap; padding:19px 18px 21px; }
.atlas-map-key button {
  display:flex; align-items:center; gap:8px; padding:8px 12px; min-height:42px;
  font:20px/1.1 var(--body); color:#51326e;
  background:linear-gradient(#fffae0,#e7e2ff); border:2px solid #b099c8;
  box-shadow:inset 1px 1px #fff,2px 2px #8c6fac;
}
.atlas-map-key button>span { color:#23467e; font:8px/1.3 var(--pixel); min-width:20px; }
.atlas-map-key button[aria-pressed="true"] { background:linear-gradient(#ffe5f1,#dfc4ff); border-color:#79549c; }
.atlas-gazetteer-heading { display:flex; align-items:end; justify-content:space-between; flex-wrap:wrap; gap:20px; margin:0 0 23px; }
.atlas-gazetteer-heading h2 { margin:9px 0 0; font:16px/1.7 var(--pixel); color:#302461; text-shadow:2px 2px #fff8dc; }
.atlas-count { padding:8px 13px; color:#6e477e; background:#fff8d9; border:2px solid #9e82ba; box-shadow:2px 2px #46305d; font:21px/1 var(--body); }
.atlas-location-grid { display:grid; grid-template-columns:repeat(auto-fit,minmax(min(100%,330px),1fr)); align-items:start; gap:27px; }
.atlas-tone-sky { --atlas-tint:#d4f2ff; --atlas-dark:#32659b; }
.atlas-tone-rose { --atlas-tint:#ffd6e9; --atlas-dark:#974d7e; }
.atlas-tone-leaf { --atlas-tint:#dcf6dc; --atlas-dark:#40735d; }
.atlas-tone-ice { --atlas-tint:#dceaff; --atlas-dark:#426795; }
.atlas-tone-violet { --atlas-tint:#e6d5ff; --atlas-dark:#775499; }
.atlas-tone-gold { --atlas-tint:#fff0b8; --atlas-dark:#876139; }
.atlas-location-card {
  min-width:0; border:3px solid var(--atlas-edge); background:#fff8df;
  box-shadow:inset 2px 2px #fff,5px 5px #362451,8px 8px #9e80b533;
  animation:atlas-card-arrive .45s ease-out;
}
.atlas-location-card.is-selected { box-shadow:inset 2px 2px #fff,5px 5px #7d55a4,0 0 0 3px #ffd0eb; }
.atlas-card-ribbon {
  display:flex; align-items:center; gap:11px; min-height:47px; padding:11px 14px;
  background:linear-gradient(100deg,var(--atlas-tint),#fff4cd); border-bottom:2px solid #806493;
  font:8px/1.7 var(--pixel); color:var(--atlas-dark); text-transform:uppercase;
}
.atlas-card-number { min-width:28px; font-size:10px; color:#3c326c; }
.atlas-current { margin-left:auto; font-size:6px; color:#75428b; }
.atlas-card-art { margin:0; background:linear-gradient(130deg,#cbe8ff,#ecd6ff); border-bottom:3px solid #604271; }
.atlas-card-art a,
.atlas-detail-art a { display:block; }
.atlas-card-art img,
.atlas-detail-art img { display:block; width:100%; height:auto; max-width:100%; image-rendering:auto; }
.atlas-art-placeholder { min-height:180px; padding:25px; display:grid; place-items:center; gap:20px; color:#8154a2; background:linear-gradient(130deg,#cdeeff,#e9cfff); font:12px/1.8 var(--pixel); text-align:center; }
.atlas-card-content { padding:21px 23px 23px; }
.atlas-subtitle { font:19px/1.25 var(--body); margin:0 0 9px; color:var(--atlas-dark); }
.atlas-card-content h3 { margin:0 0 16px; font:14px/1.8 var(--pixel); color:#342365; }
.atlas-card-summary { font:23px/1.4 var(--body); color:#493363; margin:0 0 19px; }
.atlas-card-actions,
.atlas-detail-actions { display:flex; gap:12px; flex-wrap:wrap; align-items:center; }
.atlas-card-actions .button { font-size:8px; }
.atlas-card-notes { margin-top:21px; border-top:2px dashed #c3aacf; padding-top:13px; }
.atlas-card-notes>summary { padding:8px 0; color:#775094; font:22px/1.25 var(--body); cursor:pointer; }
.atlas-card-notes[open]>summary { margin-bottom:15px; }
.atlas-card-notes>.button { margin-top:8px; }
.atlas-location-prose :is(p,li),
.atlas-highlights p { font:23px/1.5 var(--body); color:#42305f; max-width:none; overflow-wrap:anywhere; }
.atlas-location-prose p { margin:0 0 1em; }
.atlas-location-prose h3 { font:11px/1.9 var(--pixel); color:#785397; }
.atlas-location-prose :is(ul,ol) { padding-left:24px; }
.atlas-highlights { clear:both; display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:15px; padding-top:15px; margin:10px 0 24px; }
.atlas-highlights>section { min-width:0; padding:17px 18px; background:linear-gradient(130deg,#fffdf0,var(--atlas-tint,#e9d9ff)); border:2px solid #c2a8d1; box-shadow:inset 2px 2px #fff,2px 2px #9c80b855; }
.atlas-highlights h4 { margin:0 0 10px; color:var(--atlas-dark,#6d4590); font:9px/1.9 var(--pixel); }
.atlas-highlights p { margin:0; font-size:22px; line-height:1.4; }
.atlas-card-notes .atlas-highlights { grid-template-columns:1fr; gap:12px; }
.atlas-detail { scroll-margin-top:22px; background:linear-gradient(135deg,#fff8d7,#fffced 72%,var(--atlas-tint)); }
.atlas-detail-heading { display:flex; justify-content:space-between; align-items:center; gap:20px; padding:26px 29px; border-bottom:3px solid #9e84b6; background:linear-gradient(110deg,var(--atlas-tint),#fff1c9); }
.atlas-detail-heading h2 { margin:12px 0 13px; font:20px/1.65 var(--pixel); color:#3a2569; }
.atlas-detail-heading h2:focus { outline:none; }
.atlas-detail-heading p { margin:0; font:24px/1.35 var(--body); color:var(--atlas-dark); }
.atlas-compass-mark { color:var(--atlas-dark); filter:drop-shadow(2px 2px #fff); }
.atlas-detail-body { padding:27px 30px 30px; display:flow-root; }
.atlas-detail-art { float:right; width:43%; margin:0 0 24px 28px; padding:7px; border:2px solid #9b7ab3; background:#fff9de; box-shadow:3px 3px #49305d; }
.atlas-detail-art figcaption { padding:8px 5px 3px; font:18px/1.25 var(--body); color:#705385; }
.atlas-detail-lead { margin:0 0 21px; font:26px/1.4 var(--body); color:#5b397d; }
.atlas-detail .atlas-location-prose :is(p,li) { font-size:clamp(24px,1.5vw,28px); }
.atlas-sr-only { position:absolute; width:1px; height:1px; padding:0; margin:-1px; overflow:hidden; clip:rect(0,0,0,0); white-space:nowrap; border:0; }
@keyframes atlas-card-arrive { from { box-shadow:inset 2px 2px #fff,2px 2px #362451; } to { box-shadow:inset 2px 2px #fff,5px 5px #362451,8px 8px #9e80b533; } }
@media(min-width:1800px) { .atlas-location-grid { grid-template-columns:repeat(3,minmax(0,1fr)); } }
@media(max-width:1050px) {
  .atlas-detail-art { width:46%; margin-left:22px; }
  .atlas-highlights { grid-template-columns:1fr; }
}
@media(max-width:680px) {
  .atlas-heading-star { display:none; }
  .atlas-map-titlebar { padding:19px 17px; }
  .atlas-map-titlebar h2 { font-size:11px; }
  .atlas-map-tools { margin:10px; padding:9px; gap:8px; top:5px; }
  .atlas-map-tools .button { min-height:42px; padding:9px 10px; font-size:7px; }
  .atlas-full-map { margin-left:0; }
  .atlas-map-instructions { margin:12px 16px 16px; font-size:20px; }
  .atlas-map-viewport { margin:0 10px; }
  .atlas-map-pin { width:44px; height:44px; border-width:2px; }
  .atlas-pin-number { font-size:6px; }
  .atlas-pin-name { max-width:140px; font-size:18px; }
  .atlas-map-key { gap:8px; padding:16px 12px 19px; }
  .atlas-map-key button { font-size:19px; padding:8px 10px; }
  .atlas-gazetteer-heading h2 { font-size:13px; }
  .atlas-location-grid { grid-template-columns:1fr; gap:25px; }
  .atlas-card-content { padding:20px; }
  .atlas-card-content h3 { font-size:13px; }
  .atlas-detail-heading { padding:22px 20px; }
  .atlas-detail-heading h2 { font-size:16px; }
  .atlas-detail-heading p { font-size:23px; }
  .atlas-detail-body { padding:20px; }
  .atlas-detail-art { float:none; width:100%; margin:0 0 24px; }
  .atlas-detail-lead { font-size:25px; }
  .atlas-detail .atlas-location-prose :is(p,li) { font-size:23px; }
  .atlas-detail-actions .button { width:100%; }
}
@media(prefers-reduced-motion:reduce) { .atlas-page * { animation:none!important; transition:none!important; scroll-behavior:auto!important; } }
html.reduce-motion .atlas-page * { animation:none!important; transition:none!important; scroll-behavior:auto!important; }