
/* A dedicated world-map viewport, with navigation floating over the artwork. */
.map-page.immersive-map { --map-fade-width:44px; --map-fade-soft:color-mix(in srgb,var(--ink) 32%,transparent); --map-edge-fade:linear-gradient(to right,var(--ink),var(--map-fade-soft) calc(var(--map-fade-width) * .4),transparent var(--map-fade-width),transparent calc(100% - var(--map-fade-width)),var(--map-fade-soft) calc(100% - var(--map-fade-width) * .4),var(--ink)),linear-gradient(to bottom,var(--ink),var(--map-fade-soft) calc(var(--map-fade-width) * .4),transparent var(--map-fade-width),transparent calc(100% - var(--map-fade-width)),var(--map-fade-soft) calc(100% - var(--map-fade-width) * .4),var(--ink)); height:100vh; height:100dvh; overflow:hidden; background:var(--ink); }
.map-page.immersive-map .public-navigation { height:calc(70px + env(safe-area-inset-top)); border-bottom:0; box-shadow:none; background:var(--ink); backdrop-filter:none; }
.map-page.immersive-map .public-navigation::after { content:none; }
.immersive-map .world-scroll::after { content:""; position:fixed; inset:0; z-index:2; background:var(--map-edge-fade); pointer-events:none; }
.immersive-map main { padding:0; }
.map-page.immersive-map { --map-gold-text:linear-gradient(180deg,var(--gold-light) 0%,var(--gold) 42%,var(--gold-light) 55%,var(--gold) 100%); --map-letter-glow:0 1px 8px var(--line); --map-pin-panel:color-mix(in srgb,var(--gold) 12%,var(--ink)); --map-pin-glow:0 0 18px color-mix(in srgb,var(--gold-light) 46%,transparent),0 0 38px color-mix(in srgb,var(--gold) 30%,transparent); --map-brand-font:"Cinzel",Georgia,serif; }
.immersive-map .map-gold-lettering { font-family:var(--map-brand-font); font-weight:600; letter-spacing:0; color:var(--gold-light); background-image:var(--map-gold-text); background-clip:text; -webkit-background-clip:text; -webkit-text-fill-color:transparent; filter:drop-shadow(var(--map-letter-glow)); }
.immersive-map .world-pin .map-gold-lettering { width:auto; height:auto; border-radius:0; box-shadow:none; white-space:nowrap; font-size:.875rem; line-height:1.3; }
.immersive-map .map-gold-img { display:block; width:auto; height:24px; max-width:none; object-fit:contain; filter:drop-shadow(var(--map-letter-glow)); pointer-events:none; }
.immersive-map .map-gold-dock { height:20px; max-width:100%; margin:0 auto 2px; }
@media (max-width:640px){ .immersive-map .map-gold-img { height:20px; } .immersive-map .map-gold-dock { height:18px; } }
.immersive-map .world-pin { border-color:var(--gold-light); background:var(--map-pin-panel); text-transform:none; }
.immersive-map .world-pin:hover,.immersive-map .world-pin:focus-visible { background:var(--ink); border-color:var(--gold-light); outline:2px solid var(--gold-light); outline-offset:3px; }
.immersive-map .map-dock { display:block; padding:6px 14px; bottom:calc(8px + env(safe-area-inset-bottom)); border:1px solid var(--gold); border-radius:16px; background:var(--panel); box-shadow:none; backdrop-filter:none; text-align:center; pointer-events:none; }
.immersive-map .map-dock-copy { min-width:0; }
.immersive-map .map-dock-copy p { color:var(--mist); }
.immersive-map #place-title { font-size:1.8rem; line-height:1.3; }
.immersive-map .world-scroll { position:fixed; inset:0; width:100%; height:100%; box-sizing:border-box; padding:calc(70px + env(safe-area-inset-top)) 0 calc(4px + env(safe-area-inset-bottom)); background:var(--ink); overflow:auto; overscroll-behavior:contain; touch-action:none; scrollbar-width:none; cursor:grab; }
.immersive-map .world-scroll::-webkit-scrollbar { display:none; }
.immersive-map .world-scroll { scroll-behavior:auto; overflow-anchor:none; }
.immersive-map .world-scroll.is-dragging { cursor:grabbing; }
.immersive-map .world-canvas { width:max(100vw,177.69vh); width:max(100vw,177.69dvh); height:auto; min-height:0; aspect-ratio:1672/941; }
.immersive-map .world-canvas>img { position:absolute; inset:0; width:100%; height:100%; object-fit:fill; }
.immersive-map .world-canvas::after { background:linear-gradient(to bottom,transparent,transparent calc(100% - var(--map-fade-width)),var(--map-fade-soft) calc(100% - var(--map-fade-width) * .4),var(--ink)); box-shadow:none; opacity:.65; }
@media(max-width:1000px) { .map-page.immersive-map .public-navigation { height:calc(112px + env(safe-area-inset-top)); } .immersive-map .world-scroll { padding-top:calc(112px + env(safe-area-inset-top)); } }
.map-overlay-nav { position:fixed; top:max(16px,env(safe-area-inset-top)); left:16px; right:16px; z-index:10; display:flex; align-items:center; justify-content:space-between; gap:12px; pointer-events:none; }
.map-nav-group { display:flex; align-items:center; gap:18px; }
.map-overlay-nav a,.map-dock { pointer-events:auto; border:1px solid rgba(140,112,56,.3); background:rgba(251,248,241,.93); color:#2e2820; box-shadow:0 8px 28px rgba(46,40,32,.12); backdrop-filter:blur(14px); }
.map-overlay-nav a { display:flex; align-items:center; justify-content:center; min-height:44px; padding:13px 18px; border-radius:999px; text-decoration:none; }
.map-back,.map-enter { font:700 .875rem/1.2 Arial,sans-serif; }
.map-overlay-nav .map-enter { background:#cfae6d; }
.map-dock { position:fixed; bottom:max(18px,env(safe-area-inset-bottom)); left:50%; transform:translateX(-50%); z-index:10; display:flex; align-items:center; gap:28px; max-width:calc(100% - 32px); padding:14px 20px; border-radius:20px; }
.map-dock-copy strong { display:block; font-size:.875rem; font-weight:400; white-space:nowrap; }
.map-dock-copy p { margin:2px 0 0; color:var(--mist); font:400 .75rem/1.4 Arial,sans-serif; text-shadow:0 1px 4px var(--ink),0 1px 8px var(--ink); }
.immersive-map .world-pin,.immersive-map .world-pin.mother { box-sizing:border-box; width:180px; height:52px; min-height:52px; justify-content:center; flex-direction:column; gap:5px; font-size:.875rem; letter-spacing:0; padding:7px 10px; box-shadow:var(--map-pin-glow); transition:background .2s,border-color .2s; }
.immersive-map .world-pin:hover,.immersive-map .world-pin:focus-visible { transform:translate(-50%,-50%); box-shadow:var(--map-pin-glow); }
.immersive-map .map-pin-title { height:36px; max-width:100%; pointer-events:none; display:flex; align-items:center; justify-content:center; }
.immersive-map .map-pin-title .map-gold-img { height:23px; width:auto; max-width:none; flex-shrink:0; filter:none; }
.immersive-map .place-dialog { max-height:calc(100dvh - 32px); overflow:auto; }
.immersive-map .place-dialog>p:not(.eyebrow,.place-craft) { font-size:1rem; }
.map-overlay-nav a:focus-visible,.world-scroll:focus-visible { outline:2px solid #8c7038; outline-offset:3px; }
@media(max-width:640px) {
  .map-page.immersive-map { --map-fade-width:26px; --map-fade-soft:color-mix(in srgb,var(--ink) 20%,transparent); }
  .map-overlay-nav { left:12px; right:12px; }
  .map-nav-group { gap:8px; }
  .map-overlay-nav .brand { display:none; }
  .map-overlay-nav a { padding:12px 14px; }
  .immersive-map .world-pin,.immersive-map .world-pin.mother { width:152px; height:48px; min-height:48px; padding:7px 8px; gap:4px; }
  .immersive-map .map-pin-title { height:32px; }
  .immersive-map .map-pin-title .map-gold-img { height:20px; max-width:none; }
  .immersive-map .map-dock { display:block; width:max-content; max-width:calc(100% - 24px); box-sizing:border-box; padding:6px 12px; bottom:calc(6px + env(safe-area-inset-bottom)); border:1px solid var(--gold); border-radius:14px; background:var(--panel); box-shadow:none; backdrop-filter:none; text-align:center; pointer-events:none; }
  .map-dock-copy strong { font-size:.875rem; }
  .map-dock-copy p { max-width:none; margin:2px 0 0; font-size:.75rem; text-shadow:0 1px 4px var(--ink),0 1px 8px var(--ink); }
}

.immersive-map .access-details { margin:14px 0 6px; border:1px solid rgba(224,196,140,.32); border-radius:12px; background:rgba(224,196,140,.06); text-align:left; }
.immersive-map .access-details summary { cursor:pointer; padding:12px 16px; font-weight:600; color:#e0c48c; list-style:none; display:flex; justify-content:space-between; align-items:center; gap:12px; }
.immersive-map .access-details summary::-webkit-details-marker { display:none; }
.immersive-map .access-details summary::after { content:"+"; font-size:1.2rem; line-height:1; }
.immersive-map .access-details[open] summary::after { content:"−"; }
.immersive-map .access-details summary:focus-visible { outline:2px solid #e0c48c; outline-offset:2px; border-radius:12px; }
.immersive-map .access-details .access-body { padding:0 16px 14px; }
.immersive-map .place-dialog .access-details .access-body p { font-size:.94rem; line-height:1.55; margin:0 0 10px; }
.immersive-map .place-dialog .access-details .access-body p:last-child { margin-bottom:0; }

/* Travel carousel shares the map's place explanations and existing artwork. */
.immersive-map .map-dock { display:flex; gap:12px; pointer-events:auto; }
.immersive-map .lands-toggle { display:flex; align-items:center; justify-content:center; gap:7px; min-height:44px; padding:8px 12px; margin:0; border:1px solid var(--gold); border-radius:10px; background:var(--map-gold-text); color:var(--ink); font:700 .75rem/1.2 var(--sans); letter-spacing:0; white-space:nowrap; cursor:pointer; }
.immersive-map .lands-toggle:hover { background:var(--map-gold-text); border-color:var(--gold-light); }
.immersive-map .lands-toggle:focus-visible,.immersive-map .land-choice:focus-visible,.immersive-map .travel-arrow:focus-visible,.immersive-map #lands-close:focus-visible,.immersive-map .lands-options:focus-visible { outline:2px solid var(--gold-light); outline-offset:3px; }
.immersive-map .lands-dialog { position:fixed; box-sizing:border-box; width:min(880px,calc(100% - 32px)); max-height:calc(100dvh - 40px - env(safe-area-inset-top) - env(safe-area-inset-bottom)); padding:26px 32px 20px; border:1px solid var(--gold); border-radius:20px; background:color-mix(in srgb,var(--panel) 92%,transparent); color:var(--mist); overflow:auto; overscroll-behavior:contain; }
.immersive-map .lands-dialog::backdrop { background:color-mix(in srgb,var(--ink) 64%,transparent); backdrop-filter:blur(3px); }
.immersive-map .lands-dialog h2 { margin:0 36px 12px 0; font-size:1.6rem; line-height:1.3; }
.immersive-map .lands-options { touch-action:pan-y; }
.immersive-map .land-option { display:grid; grid-template-columns:minmax(0,1.3fr) minmax(0,1fr); grid-template-rows:auto auto auto; column-gap:28px; align-content:center; align-items:center; min-width:0; min-height:340px; }
.immersive-map .land-option[hidden] { display:none; }
.immersive-map .land-art { grid-row:1 / 4; width:100%; height:340px; object-fit:contain; }
.immersive-map .land-option h3 { margin:0 0 12px; font-family:var(--map-brand-font); font-size:1.75rem; font-weight:600; color:var(--gold-light); align-self:end; }
.immersive-map .land-option p { margin:0 0 22px; font:400 1rem/1.6 var(--sans); }
.immersive-map .land-choice { justify-self:start; align-self:start; margin:0; border:0; cursor:pointer; letter-spacing:0; text-transform:none; min-height:44px; gap:8px; padding:12px 18px; }
.immersive-map .land-travel-controls { display:flex; align-items:center; justify-content:center; gap:20px; margin-top:12px; }
.immersive-map .land-travel-controls p { margin:0; min-width:150px; text-align:center; font:400 .8125rem/1.4 var(--sans); color:var(--gold-light); }
.immersive-map .travel-arrow { display:flex; align-items:center; justify-content:center; width:44px; height:44px; padding:0; margin:0; border:1px solid var(--gold); border-radius:50%; background:transparent; color:var(--gold-light); font-size:1.3rem; cursor:pointer; }
.immersive-map .travel-arrow:hover { background:var(--panel); }
@media(max-width:640px) {
  .immersive-map .map-dock { display:flex; gap:8px; padding:6px 8px; }
  .immersive-map .map-dock-copy p { max-width:170px; font-size:.6875rem; }
  .immersive-map .lands-toggle { flex-direction:column; gap:3px; padding:5px 10px; font-size:.6875rem; }
  .immersive-map .lands-dialog { padding:22px 18px 16px; width:calc(100% - 24px); }
  .immersive-map .lands-dialog h2 { font-size:1.25rem; margin-bottom:8px; }
  .immersive-map .land-option { grid-template-columns:minmax(0,1fr); grid-template-rows:240px auto auto auto; gap:0; min-height:0; text-align:center; }
  .immersive-map .land-art { grid-row:auto; height:240px; }
  .immersive-map .land-option h3 { font-size:1.4rem; margin:8px 0 10px; }
  .immersive-map .land-option p { margin-bottom:18px; font-size:.875rem; min-height:44px; }
  .immersive-map .land-choice { justify-self:center; }
  .immersive-map .land-travel-controls { margin-top:18px; }
}
