/* map.css - Rimal Spire premium map (engineer A9; A10 polish per Codex round 2). Plate A, hairline routes, numbered rings, RS medallion, editorial panel. */
.rs-map { position: relative; z-index: 2; height: 270svh; pointer-events: none;
  --m-ivory: #F4EDE1; --m-sand: #E9C9A0; --m-bronze: #9A6B3F; --m-esp: #1E1611; --m-sea: #110c09; }
.rs-map__stage { position: sticky; top: 0; height: 100svh; width: 100%; overflow: hidden; }
.rs-map__clip { position: absolute; inset: 0; overflow: hidden; background: var(--m-sea); visibility: hidden; pointer-events: auto; }
.rs-map__frame { pointer-events: none; }
.rs-map__world { position: absolute; left: 0; top: 0; transform-origin: 0 0; will-change: transform;
  -webkit-mask-image: linear-gradient(to bottom, transparent 0, #000 6%, #000 94%, transparent 100%); mask-image: linear-gradient(to bottom, transparent 0, #000 6%, #000 94%, transparent 100%); } /* soft plate edges, no letterbox seam */
.rs-map__plate { position: absolute; inset: 0; width: 100%; height: 100%; display: block; user-select: none; filter: brightness(.7); } /* A10: roads at 70 %, landmark vignettes (.rs-map__lit) keep full brightness */
.rs-map__lit { position: absolute; opacity: 0; pointer-events: none; background-repeat: no-repeat;
  filter: brightness(1.38) contrast(1.06);                                   /* landmark 65 % -> 90 % */
  -webkit-mask-image: radial-gradient(closest-side, #000 50%, transparent 100%); mask-image: radial-gradient(closest-side, #000 50%, transparent 100%); }
.rs-map__svg { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; pointer-events: none; }
.rs-map__line { fill: none; stroke: #D8BE88; stroke-width: 1.5; stroke-linecap: round; stroke-linejoin: round; vector-effect: non-scaling-stroke; opacity: 0; }
.rs-map__tail { fill: none; stroke-width: 2; stroke-linecap: round; vector-effect: non-scaling-stroke; opacity: 0; }
.rs-map__tip { fill: #F4EDE1; opacity: 0; }

/* overlay in screen px: every stop group sits on its anchor (translate set by map.js) */
.rs-map__ui { position: absolute; inset: 0; pointer-events: none; }
.rs-map__stop, .rs-map__hotel { position: absolute; left: 0; top: 0; width: 0; height: 0; }
.rs-map__anchor { position: absolute; left: -2px; top: -2px; width: 4px; height: 4px; border-radius: 50%; background: var(--m-sand); }
.rs-map__leader { position: absolute; left: 0; top: 0; width: 1px; height: 1px; overflow: visible; }
.rs-map__leader line { stroke: var(--m-bronze); stroke-width: .75; }
.rs-map__ring { position: absolute; width: 22px; height: 22px; margin: -11px 0 0 -11px; padding: 0; border-radius: 50%; box-sizing: border-box;
  border: 1px solid rgba(216, 190, 136, .45); background: #130E0A; color: rgba(244, 237, 225, .6); cursor: pointer; pointer-events: auto;
  font: 500 11px/1 'Host Grotesk', system-ui, sans-serif; letter-spacing: .02em; display: grid; place-items: center; font-variant-numeric: tabular-nums;
  transition: width .25s, height .25s, margin .25s, border-color .25s, border-width .25s, color .25s; }  /* A10: opaque fill, inactive 45 % */
.rs-map__stop.is-active .rs-map__ring { width: 24px; height: 24px; margin: -12px 0 0 -12px; border: 2px solid #E6CE9E; color: #F4EDE1; } /* the one selection */
.rs-map__ring::before { content: ''; position: absolute; left: 50%; top: 50%; width: 44px; height: 44px; margin: -22px 0 0 -22px; border-radius: 50%; } /* 44 px hit target */
.rs-map__ring:focus-visible, .rs-map__rowbtn:focus-visible, .rs-map__pb:focus-visible { outline: 1px solid #FFD696; outline-offset: 3px; }
.rs-map__outline { position: absolute; width: 22px; height: 22px; margin: -11px 0 0 -11px; border-radius: 50%; border: 1px solid var(--m-sand); opacity: 0; pointer-events: none; }
.rs-map__label { position: absolute; top: 0; transform: translateY(-50%); white-space: nowrap; pointer-events: none; opacity: 0; display: flex; flex-direction: column; transition: opacity .25s; }
.rs-map__stop--left .rs-map__label { text-align: right; align-items: flex-end; }
.rs-map__ln { font: 500 14px/19px 'Host Grotesk', system-ui, sans-serif; letter-spacing: .14em; text-transform: uppercase; color: #E8DFD0; }
.rs-map__lt { margin-top: 0; font: 400 12px/18px 'Host Grotesk', system-ui, sans-serif; color: #CDB386; }
/* A11: dark halo so roads never cut through letters; unselected label 0.80 (set by map.js), its time line 0.65 (= .8125 of .80) */
.rs-map__ln, .rs-map__lt { text-shadow: 0 0 2px #0d0907, 0 0 6px #0d0907, 0 0 6px #0d0907, 0 0 12px rgba(13, 9, 7, .8); }
.rs-map__stop:not(.is-active) .rs-map__lt { opacity: .8125; }

/* hotel medallion: 48 px desktop / 36 px phone, two bronze rings, custom RS paths, no glow */
.rs-map__emblem { position: absolute; left: -28px; top: -28px; width: 56px; height: 56px; display: block; } /* A10: 56 px desktop */
.rs-map__emblem svg { width: 100%; height: 100%; display: block; overflow: visible; }
.rs-map__emblem .e-fill { fill: var(--m-esp); }
.rs-map__emblem .e-ring { fill: var(--m-esp); stroke: var(--m-bronze); stroke-width: 1; vector-effect: non-scaling-stroke; }
.rs-map__emblem .e-in { fill: none; stroke-width: .75; }
.rs-map__emblem .e-mono path { fill: none; stroke: var(--m-ivory); stroke-linecap: round; stroke-linejoin: round; }
.rs-map__emblem .e-stem { stroke-width: 1.35; }
.rs-map__emblem .e-hair { stroke-width: .7; }
.rs-map__emblem .e-bowl { stroke-width: 1; }
.rs-map__emblem .e-leg { stroke-width: 1.2; }
.rs-map__emblem .e-s { stroke-width: 1.3; }
.rs-map__hname, .rs-map__hsub { position: absolute; left: 0; transform: translateX(-50%); white-space: nowrap; text-align: center; opacity: 0; }
.rs-map__hname { top: 38px; font: 500 14px/1 'Host Grotesk', system-ui, sans-serif; letter-spacing: .22em; text-transform: uppercase; color: #EFE5D2; padding-left: .22em; }
.rs-map__hsub { top: 60px; font: 400 12px/1 'Host Grotesk', system-ui, sans-serif; color: var(--m-sand); }

/* panel */
.rs-map__panel { color: var(--m-ivory); }
.rs-map__eyebrow { margin: 0 0 14px; font: 500 11px/1.3 'Host Grotesk', system-ui, sans-serif; letter-spacing: .2em; text-transform: uppercase; color: var(--m-sand); }
.rs-map__title { margin: 0 0 28px; font: normal 500 32px/1.1 'Bodoni Moda', 'Bodoni Moda Fallback', Georgia, serif; font-variation-settings: 'opsz' 28; color: var(--m-ivory); }
.rs-map__rows { list-style: none; margin: 0; padding: 0; border-top: 1px solid rgba(154, 107, 63, .3); }
.rs-map__row { border-bottom: 1px solid rgba(154, 107, 63, .3); }
.rs-map__rowbtn { width: 100%; min-height: 58px; display: grid; grid-template-columns: 24px minmax(0, 1fr) auto; gap: 14px; align-items: center;
  padding: 0 10px 0 12px; border: 0; background: transparent; color: inherit; text-align: left; cursor: pointer; position: relative; }
.rs-map__rowbtn::before { content: ''; position: absolute; left: 0; top: 10px; bottom: 10px; width: 2px; background: var(--m-bronze); opacity: 0; }
.rs-map__rowbtn.is-active { background: rgba(233, 201, 160, .06); }
.rs-map__rowbtn.is-active::before { opacity: 1; }
.rs-map__rn { width: 24px; height: 24px; border-radius: 50%; border: 1px solid rgba(233, 201, 160, .7); display: grid; place-items: center;
  font: 500 10px/1 'Host Grotesk', system-ui, sans-serif; color: var(--m-ivory); }
.rs-map__rname { font: 500 13px/18px 'Host Grotesk', system-ui, sans-serif; letter-spacing: .14em; text-transform: uppercase; color: #E8DFD0; }
.rs-map__rtime { font: 400 12px/18px 'Host Grotesk', system-ui, sans-serif; color: #CDB386; white-space: nowrap; }
.rs-map__foot { margin: 20px 0 0; font: 400 12px/1.45 'Host Grotesk', system-ui, sans-serif; color: rgba(233, 201, 160, .72); }
.rs-map__note { margin: 8px 0 0; font: 400 11px/1.4 'Host Grotesk', system-ui, sans-serif; letter-spacing: .04em; color: rgba(205, 179, 134, .7); } /* A10 */
.rs-map__pick, .rs-map__card { display: none; }

/* desktop >= 1024: map 75 % + espresso panel 25 % */
.rs-map.is-wide .rs-map__frame { position: absolute; left: 0; top: 0; width: 75%; height: 100%; }
.rs-map.is-wide .rs-map__panel { position: absolute; right: 0; top: 0; bottom: 0; width: 25%; box-sizing: border-box; padding: 88px 32px 32px;
  background: var(--m-esp); border-left: 1px solid rgba(154, 107, 63, .35); display: flex; flex-direction: column; justify-content: center; }

/* narrower than 1024: the plate full width at 16:9, panel below (numbers, one card) */
.rs-map:not(.is-wide) .rs-map__clip { display: flex; flex-direction: column; justify-content: center; padding: 56px 0 16px; box-sizing: border-box; }
.rs-map:not(.is-wide) .rs-map__frame { position: relative; width: 100%; aspect-ratio: 1672 / 941; flex: none; }
.rs-map:not(.is-wide) .rs-map__panel { position: relative; padding: 18px 20px 0; flex: none; display: flex; flex-direction: column; }
.rs-map:not(.is-wide) .rs-map__foot { order: 4; }
.rs-map:not(.is-wide) .rs-map__note { order: 5; }
.rs-map:not(.is-wide) .rs-map__rows { display: none; }
.rs-map:not(.is-wide) .rs-map__eyebrow { margin-bottom: 6px; }
.rs-map:not(.is-wide) .rs-map__title { font-size: 24px; margin-bottom: 14px; }
.rs-map:not(.is-wide) .rs-map__pick { display: flex; gap: 8px; }
.rs-map__pb { flex: 1 1 0; min-width: 44px; height: 44px; border-radius: 22px; border: 1px solid rgba(233, 201, 160, .45); background: transparent;
  color: var(--m-ivory); font: 500 12px/1 'Host Grotesk', system-ui, sans-serif; letter-spacing: .06em; cursor: pointer; }
.rs-map__pb.is-active { border-color: var(--m-sand); background: rgba(233, 201, 160, .1); }
.rs-map:not(.is-wide) .rs-map__card { display: block; margin-top: 14px; padding: 14px 0 0; border-top: 1px solid rgba(154, 107, 63, .35); min-height: 74px; }
.rs-map__cn { margin: 0; font: 500 16px/1.2 'Host Grotesk', system-ui, sans-serif; letter-spacing: .08em; text-transform: uppercase; color: var(--m-ivory); }
.rs-map__ct { margin: 6px 0 0; font: 400 12px/1.2 'Host Grotesk', system-ui, sans-serif; color: rgba(233, 201, 160, .85); }
.rs-map__cl { margin: 6px 0 0; font: 400 14px/1.4 'Host Grotesk', system-ui, sans-serif; color: rgba(244, 237, 225, .78); }
.rs-map:not(.is-wide) .rs-map__foot { margin-top: 10px; font-size: 11px; }
/* phone <= 480: rings only on the map (24 px), 36 px medallion, no subtitle */
.rs-map.is-phone .rs-map__ring, .rs-map.is-phone .rs-map__outline { width: 24px; height: 24px; margin: -12px 0 0 -12px; }
.rs-map.is-phone .rs-map__label { display: none; }
.rs-map.is-phone .rs-map__emblem { left: -18px; top: -18px; width: 36px; height: 36px; }
.rs-map.is-phone .rs-map__hname { top: 24px; font-size: 10px; }  /* phone left as A9 (owner: desktop only, 2026-11-14) */
.rs-map.is-phone .rs-map__hsub { display: none; }

/* reduced motion: a normal section, final state */
.rs-map.is-reduced { height: auto; margin-top: 0 !important; }
.rs-map.is-reduced .rs-map__stage { position: relative; }
.rs-map.is-reduced .rs-map__clip { visibility: visible; }
.rs-map.is-shut .rs-map__clip, .rs-map.is-shut .rs-map__clip * { visibility: hidden !important; }
/* A10: 13 px row names fit one line on 1024-1365 px panels (Burj Khalifa / Palm Jumeirah wrapped at 1280) */
@media (max-width: 1365px) {
  .rs-map.is-wide .rs-map__panel { padding-left: 24px; padding-right: 24px; }
  .rs-map__rowbtn { gap: 10px; padding: 0 6px 0 8px; }
}

/* F0 fix round (Fable P1-5): the panel speaks the site's language - no radius, no gold caps, a plain rule list. Gold stays in the artwork + routes. */
.rs-map__eyebrow { margin-bottom: 12px; font: 500 12px/1.4 var(--font-sans, 'Host Grotesk', system-ui, sans-serif); letter-spacing: .08em; text-transform: uppercase; color: rgba(243, 238, 228, .72); }
.rs-map__title { color: #F3EEE4; }
.rs-map__rows, .rs-map__row { border-color: rgba(243, 238, 228, .2); }
.rs-map__rowbtn { grid-template-columns: 24px minmax(0, 1fr) auto; gap: 12px; padding: 0 0 0 14px; color: #F3EEE4; }
.rs-map__rowbtn::before { background: #7FB3C4; top: 12px; bottom: 12px; }
.rs-map__rowbtn.is-active { background: none; }
.rs-map__rn { width: auto; height: auto; border: 0; border-radius: 0; display: block; font: 500 13px/1 var(--font-sans, 'Host Grotesk', system-ui, sans-serif);
  font-variant-numeric: lining-nums tabular-nums; letter-spacing: -.01em; color: rgba(243, 238, 228, .72); }
.rs-map__rname { font: 500 15px/20px var(--font-sans, 'Host Grotesk', system-ui, sans-serif); letter-spacing: 0; text-transform: none; color: rgba(243, 238, 228, .82); }
.rs-map__rtime { font: 500 13px/20px var(--font-sans, 'Host Grotesk', system-ui, sans-serif); font-variant-numeric: lining-nums tabular-nums; color: rgba(243, 238, 228, .72); text-align: right; }
.rs-map__rowbtn.is-active .rs-map__rname, .rs-map__rowbtn.is-active .rs-map__rn, .rs-map__rowbtn:hover .rs-map__rname { color: #F3EEE4; }
.rs-map__foot { color: rgba(243, 238, 228, .72); font-size: 13px; }
.rs-map__note { font-size: 13px; letter-spacing: .02em; color: rgba(243, 238, 228, .66); }
/* R3: the panel is a solid ink surface (map.js slides it with the plate's right edge); its left hairline draws top -> bottom */
.rs-map.is-wide .rs-map__panel { border-left: 0; will-change: translate; }
.rs-map.is-wide .rs-map__panel::before { content: ''; position: absolute; left: 0; top: 0; width: 1px; height: 100%; background: rgba(243, 238, 228, .2);
  transform-origin: 50% 0; transform: scaleY(var(--rs-hair, 1)); pointer-events: none; }
.rs-map__rowbtn:focus-visible, .rs-map__pb:focus-visible { outline: 2px solid #7FB3C4; outline-offset: 2px; }
/* R3 information layer (Codex): the selected / drawing route is a solid chalk 2.75 px stroke, the others 1 px muted (map.js sets 45 %) */
.rs-map__line { stroke-width: 1; transition: none; }
.rs-map__line.is-sel { stroke: #F3EEE4; stroke-width: 2.75; }
/* every label on the plate sits on an opaque ink backing, 14 px minimum (contrast >= 4.5:1 on #17110D) */
.rs-map__label { padding: 3px 8px; background: #17110D; border-radius: 0; }
.rs-map__ln, .rs-map__lt { text-shadow: none; }
.rs-map__ln { font-size: 14px; line-height: 19px; letter-spacing: .1em; color: #F3EEE4; }
.rs-map__lt { font-size: 14px; line-height: 19px; color: #D9C29A; }
.rs-map__stop:not(.is-active) .rs-map__ln { color: #D6CEC0; }
.rs-map__stop:not(.is-active) .rs-map__lt { opacity: 1; color: #C4AE88; }
.rs-map__hname { padding: 3px 8px 3px calc(8px + .22em); background: #17110D; line-height: 19px; }
.rs-map__hsub { top: 64px; padding: 3px 8px; background: #17110D; font-size: 14px; line-height: 19px; }
.rs-map__rname, .rs-map__rtime { font-size: 15px; }
.rs-map__rtime { font-size: 14px; }
@media (max-width: 1365px) { .rs-map__rname { font-size: 15px; } }
.rs-map__pb { border-radius: 0; border-color: rgba(243, 238, 228, .35); font-variant-numeric: lining-nums tabular-nums; }
.rs-map__pb.is-active { border-color: #F3EEE4; background: rgba(243, 238, 228, .08); }
.rs-map__cn { letter-spacing: 0; text-transform: none; color: #F3EEE4; }
.rs-map__ct { color: rgba(243, 238, 228, .72); }
@media (max-width: 1365px) { .rs-map__rowbtn { gap: 10px; padding: 0 0 0 10px; } .rs-map__rname { font-size: 14px; } }

/* R3 orchestrator cleanup: no tracked-caps eyebrow; the panel title is a section heading -> grotesk */
.rs-map__eyebrow { display: none; }
.rs-map__title, .rs-map:not(.is-wide) .rs-map__title { font: 500 24px/1.2 'Host Grotesk', system-ui, sans-serif; letter-spacing: -.01em; font-variation-settings: normal; }

/* R4: 'Illustrative drive times' note under the panel title; Home-only 'Explore the routes' link under the rows */
.rs-map .rs-map__head .rs-map__title { margin-bottom: 6px; }
.rs-map__times { margin: 0 0 24px; font: 400 13px/18px 'Host Grotesk', system-ui, sans-serif; color: rgba(243, 238, 228, .72); }
.rs-map:not(.is-wide) .rs-map__times { margin-bottom: 12px; }
.rs-map__more { margin: 22px 0 0; }
.rs-map__more .lnk { font: 500 16px/24px 'Host Grotesk', system-ui, sans-serif; color: #F3EEE4; text-decoration: none; }
.rs-map__more .lnk:focus-visible { outline: 1px solid #F3EEE4; outline-offset: 4px; }
.rs-map:not(.is-wide) .rs-map__more { order: 6; margin: 14px 0 0; }