/* about-location.css — "About Embassy Eden" + "Location Explorer" screens
   + the two slim home entry links under the MASTER PLAN block.
   Owner: about/location agent. Loads after home-hero.css. */

/* ════════════════════════════════════════════════════════════════════
   HOME ENTRY LINKS — two hairline-underlined caps links stacked in the
   left column, below the master-plan tag (tag bottom ≈ 77–79% landscape).
   ════════════════════════════════════════════════════════════════════ */
.home-more-links{
  position:absolute;left:4.8%;top:84%;z-index:6;
  display:flex;flex-direction:column;gap:14px;align-items:flex-start;
}
.home-more-link{
  display:flex;align-items:center;gap:13px;
  min-height:44px;padding:0 2px;
  font:500 11.5px/1 var(--sans);letter-spacing:.24em;text-transform:uppercase;
  color:var(--e-ink);text-shadow:0 1px 8px rgba(255,242,235,.75);
  transition:color .35s var(--ease);
}
.home-more-link b{
  position:relative;font-weight:500;padding-bottom:7px;white-space:nowrap;
}
.home-more-link b::after{
  content:"";position:absolute;left:0;right:0;bottom:0;height:1px;
  background:linear-gradient(90deg,rgba(63,89,58,.45),rgba(63,89,58,.06));
  transition:background .35s var(--ease);
}
.home-more-link i{
  font-style:normal;font-size:13px;line-height:1;margin-bottom:6px;
  color:var(--eden-olive);transition:transform .4s var(--ease),color .35s;
}
.home-more-link:hover{color:var(--eden-olive)}
.home-more-link:hover b::after{background:linear-gradient(90deg,rgba(109,96,61,.85),rgba(109,96,61,.12))}
.home-more-link:hover i{transform:translateX(4px);color:var(--eden-olive)}
/* ride the home entrance choreography (homeRise lives in styles.css) */
.reference-home.home-motion .home-more-links{animation:homeRise .8s .72s var(--ease) both}
/* tall landscape (1218+): the master-plan tag sits higher — links follow */
@media (min-height:1080px) and (orientation:landscape){
  .home-more-links{top:76.5%}
}
/* short landscape (Tab S7 800h): tag ends ~72.5% abs — links become one row */
@media (max-height:850px) and (orientation:landscape){
  .home-more-links{top:93.2%;flex-direction:row;gap:34px}
  .home-more-link{min-height:44px;font-size:10.5px}
}
@media (orientation:portrait){
  .home-more-links{top:89.5%;gap:8px}
}

/* ════════════════════════════════════════════════════════════════════
   SHARED — grain + rise stagger for both new screens
   ════════════════════════════════════════════════════════════════════ */
.al-grain{
  position:absolute;inset:0;z-index:1;opacity:.11;pointer-events:none;
  background-image:url("data:image/svg+xml,%3Csvg viewBox='0 0 180 180' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='.35'/%3E%3C/svg%3E");
  mix-blend-mode:soft-light;
}
@keyframes alRise{from{opacity:0;transform:translateY(16px);filter:blur(6px)}to{opacity:1;transform:none;filter:blur(0)}}
@keyframes alFade{from{opacity:0}to{opacity:1}}

/* ════════════════════════════════════════════════════════════════════
   SCREEN 1 · ABOUT EMBASSY EDEN — editorial magazine spread
   ════════════════════════════════════════════════════════════════════ */
.about-view{
  background:
    radial-gradient(90% 90% at 78% 8%,var(--eden-sage-3) 0,transparent 55%),
    radial-gradient(110% 100% at 0% 100%,var(--eden-beige-2) 0,transparent 60%),
    var(--e-ground);
}
.about-copy{position:absolute;left:4.8%;top:10.5%;width:28.5%;z-index:2;color:var(--e-ink)}
.about-emblem{width:56px;height:auto;opacity:.88;margin:0 0 20px;filter:drop-shadow(0 2px 8px rgba(63,89,58,.13))}
.about-copy .kicker{font-size:11px;letter-spacing:.44em;color:var(--eden-olive)}
.about-copy h2{
  font:400 clamp(40px,3.6vw,62px)/1.02 var(--serif);letter-spacing:.02em;
  margin:16px 0 0;color:var(--e-ink-strong);text-wrap:balance;
  text-shadow:0 2px 18px rgba(63,89,58,.10);
}
.about-copy h2 em{font-style:italic;font-weight:400;color:var(--eden-olive)}
.about-rule{display:flex;align-items:center;width:150px;height:1px;background:var(--e-line-strong);margin:22px 0}
.about-rule i{display:block;width:6px;height:6px;background:var(--eden-olive);transform:rotate(45deg);margin-left:52%}
.about-lede{
  margin:0 0 14px;font:400 12.5px/1.85 var(--sans);letter-spacing:.02em;
  color:var(--e-ink);max-width:400px;
}
.about-tagline{
  margin:20px 0 0;font:400 clamp(16px,1.35vw,20px)/1.4 var(--serif);
  font-style:italic;color:var(--eden-olive);letter-spacing:.02em;
}
/* meta — the home spec-sheet language, verbatim visual grammar */
.about-meta{margin:26px 0 0;max-width:400px;border-top:1px solid var(--e-line)}
.about-meta>div{
  display:flex;align-items:baseline;justify-content:space-between;gap:18px;
  padding:9px 1px 9px 0;border-bottom:1px solid var(--e-line);
}
.about-meta dt{
  margin:0;font:500 10px/1.6 var(--sans);letter-spacing:.3em;text-transform:uppercase;
  white-space:nowrap;color:var(--eden-olive);
}
.about-meta dd{
  margin:0;font:400 clamp(13px,1vw,15px)/1.45 var(--serif);letter-spacing:.02em;
  text-align:right;color:var(--e-ink-strong);
}

/* right — hero panel + swap strip */
.about-visual{
  position:absolute;left:38.5%;right:3.2%;top:7.5%;bottom:7.5%;z-index:2;
  display:flex;flex-direction:column;gap:11px;
}
.about-hero{
  position:relative;margin:0;flex:1;min-height:0;overflow:hidden;
  border:1px solid var(--e-line);box-shadow:0 30px 70px rgba(63,89,58,.13);
}
.about-hero img{
  width:100%;height:100%;object-fit:cover;
  filter:saturate(.92) brightness(1);
  transition:opacity .4s var(--ease),transform 1.4s var(--ease);
}
.about-hero:hover img{transform:scale(1.015)}
.about-hero::after{
  content:"";position:absolute;inset:0;pointer-events:none;
  background:linear-gradient(0deg,rgba(255,242,235,.82),transparent 30%),
             linear-gradient(90deg,rgba(255,242,235,.26),transparent 28%);
}
.about-hero figcaption{
  position:absolute;left:22px;bottom:18px;z-index:2;
  font:500 10px/1 var(--sans);letter-spacing:.34em;text-transform:uppercase;
  color:var(--e-ink-strong);text-shadow:0 1px 8px rgba(255,242,235,.9);
}
.about-strip{display:grid;grid-template-columns:repeat(3,1fr);gap:11px;height:17.5%;min-height:96px}
.about-thumb{
  position:relative;overflow:hidden;padding:0;
  border:1px solid var(--e-line);
  transition:border-color .35s var(--ease),box-shadow .4s;
}
.about-thumb img{
  width:100%;height:100%;object-fit:cover;
  filter:saturate(.7) brightness(.98);
  transition:filter .45s var(--ease),transform 1.2s var(--ease),opacity .4s;
}
.about-thumb::after{
  content:"";position:absolute;right:9px;top:8px;width:7px;height:7px;
  border-top:1px solid var(--eden-olive);border-right:1px solid var(--eden-olive);
  opacity:0;transition:opacity .35s;
}
.about-thumb:hover{border-color:var(--eden-olive);box-shadow:0 14px 34px rgba(63,89,58,.11)}
.about-thumb:hover img{filter:saturate(.95) brightness(1.02);transform:scale(1.04)}
.about-thumb:hover::after{opacity:1}

/* entrance — kicker/headline/copy rise-stagger, panel breathes in */
.about-view.is-active .about-emblem{animation:alRise .7s .08s var(--ease) both}
.about-view.is-active .about-copy .kicker{animation:alRise .7s .16s var(--ease) both}
.about-view.is-active .about-copy h2{animation:alRise .8s .26s var(--ease) both}
.about-view.is-active .about-rule{animation:alRise .7s .36s var(--ease) both}
.about-view.is-active .about-lede{animation:alRise .8s .44s var(--ease) both}
.about-view.is-active .about-lede+.about-lede{animation-delay:.52s}
.about-view.is-active .about-tagline{animation:alRise .8s .62s var(--ease) both}
.about-view.is-active .about-meta{animation:alRise .8s .72s var(--ease) both}
.about-view.is-active .about-hero{animation:alRise 1s .3s var(--ease) both}
.about-view.is-active .about-thumb{animation:alRise .8s var(--ease) both}
.about-view.is-active .about-thumb:nth-child(1){animation-delay:.55s}
.about-view.is-active .about-thumb:nth-child(2){animation-delay:.65s}
.about-view.is-active .about-thumb:nth-child(3){animation-delay:.75s}

/* ════════════════════════════════════════════════════════════════════
   SCREEN 2 · LOCATION EXPLORER — zoomable regional map + category system
   ════════════════════════════════════════════════════════════════════ */
.location-view{background:var(--e-ground)}
.location-copy{position:absolute;left:4.8%;top:8%;bottom:6%;width:26%;z-index:3;color:var(--e-ink);display:flex;flex-direction:column}
.location-copy .kicker{font-size:11px;letter-spacing:.44em;color:var(--eden-olive)}
.location-copy h2{
  font:400 clamp(28px,2.4vw,42px)/1.08 var(--serif);letter-spacing:.02em;
  margin:15px 0 0;color:var(--e-ink-strong);text-wrap:balance;text-shadow:0 2px 18px rgba(63,89,58,.10);
}
.location-copy h2 em{font-style:italic;font-weight:400;color:var(--eden-olive)}
.location-lede{
  margin:12px 0 0;font:400 12px/1.75 var(--sans);letter-spacing:.02em;color:var(--e-ink);
}

/* ── category chips — uppercase, letterspaced, bronze active ── */
.poi-cats{
  display:flex;flex-wrap:wrap;gap:7px;margin:18px 0 2px;
}
.poi-cats button{
  min-height:32px;padding:0 12px;border-radius:999px;
  border:1px solid var(--e-line);background:var(--e-surface);
  font:500 9px/1 var(--sans);letter-spacing:.2em;text-indent:.2em;text-transform:uppercase;
  color:var(--e-ink);
  transition:color .3s var(--ease),background .3s var(--ease),border-color .3s var(--ease);
}
.poi-cats button:hover{color:var(--e-ink-strong);border-color:var(--e-line-strong)}
.poi-cats button.is-active{
  color:var(--e-ground);background:var(--eden-green);border-color:var(--eden-green-deep);
  box-shadow:0 6px 18px rgba(63,89,58,.09);
}

/* ── POI card list (dynamically rendered; original classes reused) ── */
.poi-list{margin-top:12px;border-top:1px solid var(--e-line);overflow-y:auto;flex:1;min-height:0;
  scrollbar-width:thin;scrollbar-color:var(--e-line-strong) transparent}
.poi-list::-webkit-scrollbar{width:5px}
.poi-list::-webkit-scrollbar-thumb{background:var(--e-surface-2);border-radius:3px}
.poi-group-head{
  padding:12px 2px 5px;font:500 8.5px/1 var(--sans);letter-spacing:.28em;text-transform:uppercase;
  color:var(--eden-olive);border-bottom:1px solid var(--e-line);
}
.poi-card{
  display:flex;align-items:center;gap:14px;width:100%;min-height:50px;
  padding:8px 2px;text-align:left;
  border-bottom:1px solid var(--e-line);
  transition:background .3s var(--ease),opacity .35s var(--ease);
}
.poi-idx{
  font:400 11px/1 var(--serif);color:var(--eden-olive);letter-spacing:.08em;min-width:18px;
}
.poi-body{flex:1;min-width:0}
.poi-body b{
  display:block;font:400 14.5px/1.25 var(--serif);letter-spacing:.02em;color:var(--e-ink-strong);
  transition:color .3s;
}
.poi-body small{
  display:block;margin-top:4px;font:500 9.5px/1 var(--sans);
  letter-spacing:.24em;text-transform:uppercase;color:var(--eden-olive);
}
.poi-card em{
  font:400 12.5px/1 var(--serif);font-style:normal;letter-spacing:.04em;
  color:var(--e-ink);white-space:nowrap;
}
.poi-card:hover .poi-body b{color:var(--e-ink-strong)}
.poi-card:hover{background:var(--e-surface)}
.poi-card.is-hot{background:var(--eden-sage-3);box-shadow:inset 2px 0 0 var(--eden-olive)}
.poi-card.is-hot .poi-body b{color:var(--e-ink-strong)}
.poi-card.is-dim{opacity:.42}
.location-note{
  margin:12px 0 0;flex:0 0 auto;font:400 10px/1.6 var(--sans);letter-spacing:.14em;
  text-transform:uppercase;color:var(--eden-olive);
}

/* ── the map panel — full-bleed right, dark botanical grade ── */
.location-map{
  position:absolute;right:0;top:0;bottom:0;width:65%;z-index:2;
  overflow:hidden;border-left:1px solid var(--e-line);
  background:var(--e-ground);
}
/* the FIELD is the clip viewport; the STAGE inside it transforms (zoom/pan) */
.map-field{
  position:absolute;inset:0;overflow:hidden;
  touch-action:none;cursor:grab;background:var(--e-ground);
}
.map-field:active{cursor:grabbing}
/* ── Leaflet map surface — scoped reset ─────────────────────────────────
   #edenMap carries z-index:0 so it forms a stacking context: this traps
   Leaflet's marker/overlay panes (z 200–700) inside it, keeping the grade
   overlay (z2), grain (z3) and the glass controls (z8) painting above. */
#edenMap,.map-canvas{position:absolute;inset:0;z-index:0}
.map-field .leaflet-container{background:transparent;font:inherit}
.map-field .leaflet-div-icon{background:none;border:none}
.map-stage{
  position:absolute;left:0;top:0;transform-origin:0 0;will-change:transform;
  --inv:1;
}
.map-stage>img{
  position:absolute;display:block;object-fit:cover;
  transition:opacity .5s var(--ease);
  -webkit-user-drag:none;user-select:none;pointer-events:none;
}
/* layer registers ---------------------------------------------------- */
/* REAL cartographic basemap (CARTO Voyager) — map-mode stack, three zoom
   registers crossfading as the visitor dives toward the estate */
.map-realbase{opacity:1}
.map-realmid,.map-realinner{opacity:0}
.location-map:not(.is-sat) .map-field.mid-on .map-realmid{opacity:1}
.location-map:not(.is-sat) .map-field.inner-on .map-realinner{opacity:1}
.location-map.is-sat .map-realbase,
.location-map.is-sat .map-realmid,
.location-map.is-sat .map-realinner{opacity:0}
/* wide satellite mosaic — satellite base */
.map-widesat{opacity:0}
.location-map.is-sat .map-widesat{opacity:1}
/* retired stylised plates (kept for static no-JSON fallback only) */
.map-terrain{opacity:0}
/* 2 km hi-res satellite — satellite mode, fades in near Eden */
.map-sat{
  opacity:0;
  filter:saturate(.62) brightness(.72) contrast(1.06) sepia(.08) hue-rotate(-6deg);
}
.location-map.is-sat .map-field.detail-on .map-sat{opacity:1}
.location-map.is-sat .map-field:not(.detail-on) .map-sat{opacity:0}

/* satellite grade — the dark botanical wash, only when satellite shows */
.location-map-grade{
  position:absolute;inset:0;pointer-events:none;z-index:2;opacity:0;
  transition:opacity .5s var(--ease);
  background:
    radial-gradient(120% 120% at 60% 45%,transparent 46%,rgba(44,63,40,.5) 100%),
    linear-gradient(90deg,rgba(44,63,40,.7) 0%,rgba(44,63,40,.2) 16%,transparent 34%),
    linear-gradient(0deg,rgba(44,63,40,.45) 0%,transparent 22%),
    linear-gradient(180deg,rgba(44,63,40,.38) 0%,transparent 18%),
    linear-gradient(0deg,rgba(63,89,58,.3),rgba(63,89,58,.3));
}
.location-map.is-sat .location-map-grade{opacity:1}
/* terrain grade — a whisper of vignette, keeps the paper light */
.location-map::after{
  content:"";position:absolute;inset:0;pointer-events:none;z-index:2;
  background:radial-gradient(118% 118% at 58% 46%,transparent 58%,rgba(63,89,58,.10) 100%);
  opacity:1;transition:opacity .5s var(--ease);
}
.location-map.is-sat::after{opacity:0}
.location-map .al-grain{z-index:3}

/* ── map-mode toggle — dark glass segmented chip, top-left ── */
.map-mode{
  position:absolute;left:24px;top:24px;z-index:8;
  display:flex;gap:2px;padding:3px;border-radius:999px;
  border:1px solid var(--e-glass-line);
  background:var(--e-glass-strong);backdrop-filter:blur(9px) saturate(115%);-webkit-backdrop-filter:blur(9px) saturate(115%);
  box-shadow:0 10px 28px rgba(63,89,58,.10);
}
.map-mode button{
  min-height:38px;padding:0 15px;border-radius:999px;
  font:500 9.5px/1 var(--sans);letter-spacing:.24em;text-indent:.24em;text-transform:uppercase;
  color:var(--eden-olive);transition:color .3s var(--ease),background .3s var(--ease);
}
.map-mode button:hover{color:var(--e-ink-strong)}
.map-mode button.is-on{color:var(--e-ground);background:var(--eden-green)}

/* ── zoom controls — bottom-left of the field, glass chips (≥44px) ── */
.map-zoom{
  position:absolute;left:24px;bottom:24px;z-index:8;display:flex;
  border:1px solid var(--e-glass-line);border-radius:14px;overflow:hidden;
  background:var(--e-glass-strong);backdrop-filter:blur(10px) saturate(115%);-webkit-backdrop-filter:blur(10px) saturate(115%);
  box-shadow:0 12px 30px rgba(63,89,58,.11);
}
.map-zoom button{
  width:46px;height:46px;display:grid;place-items:center;
  color:var(--e-ink);font:400 20px/1 var(--serif);
  border-right:1px solid var(--e-line);
  transition:background .28s var(--ease),color .28s var(--ease);
}
.map-zoom button:last-child{border-right:0;font-size:16px}
.map-zoom button:hover{background:var(--e-surface-2);color:var(--e-ink-strong)}
.map-zoom button:active{background:var(--eden-sage-1)}

/* ── centre marker — Embassy Eden, gold, pulsing ──
   Now a Leaflet divIcon (iconSize 0×0 → its 0,0 corner sits on Eden's point).
   Leaflet writes the position via an inline transform on the icon element, so
   the visual bits are pinned around that 0,0 corner with absolute children. */
.leaflet-marker-icon.map-eden{
  background:none;border:none;
  left:0!important;top:0!important;overflow:visible!important;pointer-events:none;
}
.map-eden .eden-pulse{
  position:absolute;left:0;top:0;transform:translate(-50%,-50%);
  width:14px;height:14px;border-radius:50%;
  background:var(--eden-plum);box-shadow:0 0 14px rgba(255,242,235,.92),0 0 34px rgba(255,242,235,.55);
}
.map-eden .eden-pulse::before,.map-eden .eden-pulse::after{
  content:"";position:absolute;inset:-4px;border-radius:50%;
  border:1px solid rgba(255,242,235,.85);
  animation:edenPulse 3.2s var(--ease) infinite;
}
.map-eden .eden-pulse::after{animation-delay:1.6s}
@keyframes edenPulse{0%{transform:scale(1);opacity:.9}100%{transform:scale(4.4);opacity:0}}
.map-eden b{
  position:absolute;left:0;top:14px;transform:translateX(-50%);
  font:500 11px/1 var(--sans);letter-spacing:.4em;text-indent:.4em;text-transform:uppercase;
  color:var(--e-ground);text-shadow:0 1px 4px rgba(44,63,40,.95),0 0 18px rgba(44,63,40,.8);white-space:nowrap;
}

/* ── POI pins — dots + tracked caps labels, category accents ── */
.map-pins{position:absolute;inset:0;z-index:5}
/* Leaflet writes an inline transform + width/height on the icon element, so the
   old translate/scale positioning is dropped — only the inner elements are
   styled. iconSize matches the 44×44 box; the dot/label are absolutely placed. */
.leaflet-marker-icon.map-pin{
  background:none;border:none;display:grid;place-items:center;
  cursor:pointer;pointer-events:auto;
}
.map-pin{
  width:44px;height:44px;padding:0;
  transition:opacity .4s var(--ease);
}
.map-pin.is-off{opacity:0;pointer-events:none}
.map-pin .pin-dot{
  position:relative;display:block;width:10px;height:10px;border-radius:50%;
  background:var(--acc,var(--e-surface-2));border:1px solid rgba(44,63,40,.7);
  box-shadow:0 0 10px color-mix(in srgb,var(--acc,#e4c9b0) 55%,transparent),0 2px 6px rgba(63,89,58,.16);
  transition:background .3s,box-shadow .3s,transform .3s;
}
.map-pin b{
  position:absolute;top:50%;transform:translateY(-50%);
  font:500 10px/1.5 var(--sans);letter-spacing:.18em;text-transform:uppercase;
  color:var(--e-ground);text-shadow:0 1px 3px rgba(44,63,40,.95),0 0 14px rgba(44,63,40,.85);
  white-space:nowrap;transition:color .3s,opacity .3s;max-width:190px;overflow:hidden;text-overflow:ellipsis;
}
.map-pin.lbl-right b{left:calc(100% - 8px);text-align:left}
.map-pin.lbl-left b{right:calc(100% - 8px);text-align:right}
/* de-clutter — zoomed out, hide labels of POIs very close to Eden (except hot) */
.map-field.zoom-lo .map-pin[data-near] b{opacity:0}
/* highlight — gold ring on the chosen pin; reveal even if its category is off */
.map-pin.is-hot{opacity:1!important;pointer-events:auto}
.map-pin.is-hot .pin-dot{background:var(--eden-olive);transform:scale(1.15);box-shadow:0 0 16px rgba(255,242,235,.9),0 2px 8px rgba(63,89,58,.16)}
.map-pin.is-hot .pin-dot::before{
  content:"";position:absolute;inset:-5px;border-radius:50%;
  border:1px solid rgba(255,242,235,.9);animation:edenPulse 2.1s var(--ease) infinite;
}
.map-pin.is-hot b{color:var(--e-ground);opacity:1!important}
.map-pin.is-dim{opacity:.28}
.map-pin.is-dim b{opacity:0;transition:opacity .3s} /* dimmed pins keep only their dot — no label clutter */
.map-pin:hover .pin-dot{transform:scale(1.15)}

/* ── terrain legibility — ink labels + bronze dots on the light paper ── */
.map-pin b,.map-eden b{transition:color .5s var(--ease),text-shadow .5s var(--ease),opacity .3s}
.location-map:not(.is-sat) .map-pin b{
  color:var(--e-ink);
  text-shadow:0 1px 2px rgba(255,242,235,.95),0 0 10px rgba(255,242,235,.9),0 0 20px rgba(255,242,235,.7);
}
.location-map:not(.is-sat) .map-pin .pin-dot{
  border-color:rgba(255,242,235,.95);
  box-shadow:0 0 0 3px rgba(255,242,235,.4),0 2px 6px rgba(63,89,58,.16);
}
.location-map:not(.is-sat) .map-pin:hover .pin-dot,
.location-map:not(.is-sat) .map-pin.is-hot .pin-dot{
  background:var(--eden-olive);box-shadow:0 0 0 3px rgba(255,242,235,.55),0 0 16px rgba(109,96,61,.5);
}
.location-map:not(.is-sat) .map-pin.is-hot .pin-dot::before{border-color:rgba(109,96,61,.8)}
.location-map:not(.is-sat) .map-pin.is-hot b{color:var(--e-ink-strong)}
.location-map:not(.is-sat) .map-eden b{
  color:var(--e-ink-strong);
  text-shadow:0 1px 2px rgba(255,242,235,.95),0 0 12px rgba(255,242,235,.9),0 0 22px rgba(255,242,235,.7);
}
.location-map:not(.is-sat) .map-eden .eden-pulse{
  background:var(--eden-plum);box-shadow:0 0 0 3px rgba(255,242,235,.45),0 0 18px rgba(107,67,98,.45);
}
.location-map:not(.is-sat) .map-eden .eden-pulse::before,
.location-map:not(.is-sat) .map-eden .eden-pulse::after{border-color:rgba(107,67,98,.7)}

/* ── route choreography — swooping gold line + km·min chip ──
   The route is two Leaflet polylines in the overlay pane. Leaflet writes the
   stroke colour/width as SVG presentation attributes, so !important is used to
   keep the house palette; is-sat swaps to the brighter register for imagery. */
.location-map path.route-casing,
.location-map path.route-line{fill:none!important;stroke-linecap:round}
.location-map path.route-casing{stroke:rgba(255,242,235,.92)!important;stroke-width:2.4!important}
.location-map path.route-line{stroke:var(--eden-green)!important;stroke-width:1.2!important}
.location-map.is-sat path.route-casing{stroke:rgba(44,63,40,.65)!important}
.location-map.is-sat path.route-line{stroke:var(--eden-beige-2)!important} /* light line pops on dark imagery */
/* km·min chip — anchored to a 0×0 Leaflet marker at the route midpoint */
.leaflet-marker-icon.route-chip-anchor{background:none;border:none;overflow:visible!important}
.route-chip{
  position:absolute;left:0;top:0;z-index:7;transform:translate(-50%,-50%);
  padding:8px 13px 7px;border-radius:999px;pointer-events:none;
  border:1px solid var(--e-glass-line);
  background:var(--e-glass-strong);backdrop-filter:blur(9px) saturate(115%);-webkit-backdrop-filter:blur(9px) saturate(115%);
  box-shadow:0 10px 26px rgba(63,89,58,.10);
  font:500 9.5px/1 var(--sans);letter-spacing:.22em;text-indent:.22em;text-transform:uppercase;
  font-variant-numeric:oldstyle-nums;
  color:var(--e-ink-strong);white-space:nowrap;opacity:0;
  transition:opacity .35s var(--ease);
}
.route-chip.is-on{opacity:1}

/* ── compass — soft N marker, top-right of the map ── */
.map-compass{
  position:absolute;right:24px;top:24px;z-index:8;width:42px;height:42px;
  display:grid;place-items:center;border:1px solid var(--e-glass-line);
  border-radius:50%;pointer-events:none;
  background:var(--e-glass-strong);backdrop-filter:blur(6px);-webkit-backdrop-filter:blur(6px);
  font:400 13px/1 var(--serif);color:var(--e-ink);
}
.map-compass::before{
  content:"";position:absolute;left:50%;top:3px;width:1px;height:7px;background:var(--eden-olive);
}

/* ── attribution — required small print under the honesty note ── */
.location-attrib{
  display:block;margin-top:5px;letter-spacing:.1em;
  color:var(--eden-olive);text-transform:none;
}

/* entrance — copy rises, map breathes in */
.location-view.is-active .location-copy .kicker{animation:alRise .7s .12s var(--ease) both}
.location-view.is-active .location-copy h2{animation:alRise .8s .22s var(--ease) both}
.location-view.is-active .location-lede{animation:alRise .8s .34s var(--ease) both}
.location-view.is-active .poi-cats{animation:alRise .8s .42s var(--ease) both}
.location-view.is-active .poi-list{animation:alRise .9s .5s var(--ease) both}
.location-view.is-active .location-note{animation:alFade 1s .9s var(--ease) both}
.location-view.is-active .map-field{animation:alFade 1.3s .1s var(--ease) both}
.location-view.is-active .map-eden{animation:alFade .8s .8s var(--ease) both}
.location-view.is-active .map-compass{animation:alFade .8s 1.5s var(--ease) both}
.location-view.is-active .map-mode{animation:alFade .8s 1.4s var(--ease) both}
.location-view.is-active .map-zoom{animation:alFade .8s 1.4s var(--ease) both}

/* ════════════════════════════════════════════════════════════════════
   RESPONSIVE
   ════════════════════════════════════════════════════════════════════ */
@media (max-height:850px) and (orientation:landscape){
  .about-copy{top:10%;width:29.5%}
  .about-emblem{width:44px;margin-bottom:12px}
  .about-copy h2{font-size:clamp(34px,3.3vw,46px)}
  .about-rule{margin:16px 0}
  .about-lede{font-size:11.5px;line-height:1.7;margin-bottom:10px}
  .about-tagline{margin-top:13px}
  .about-meta{margin-top:17px}
  .about-meta>div{padding:6px 1px 6px 0}
  .about-visual{top:6%;bottom:6%;left:39.5%}
  .about-strip{min-height:84px}
  .location-copy{top:5.5%}
  .location-lede{margin-top:10px}
  .poi-list{margin-top:14px}
  .poi-card{min-height:46px;padding:6px 2px}
  .poi-body b{font-size:14px}
  .location-note{margin-top:10px}
}
@media (orientation:portrait){
  .about-copy{left:6%;top:4%;width:88%}
  .about-copy h2{font-size:clamp(30px,4.6vw,40px)}
  .about-lede{max-width:none;font-size:11.5px;line-height:1.7;margin-bottom:9px}
  .about-meta{display:none}
  .about-visual{left:6%;right:6%;top:56%;bottom:3%}
  .about-strip{min-height:76px;height:20%}
  /* copy sits above the map (responsive.css raises .location-map to top:39%) */
  .location-copy{left:6%;bottom:62.5%;width:88%}
  .poi-cats{margin:11px 0 2px}
  .poi-list{margin-top:9px}
  .poi-card{min-height:44px;padding:5px 2px}
  .location-map{left:0;right:0;top:52%;bottom:0;width:auto;border-left:0;border-top:1px solid var(--e-line)}
  .location-note{margin-top:8px}
  .map-mode{left:16px;top:16px}
  .map-mode button{min-height:34px;padding:0 12px}
  .map-compass{right:16px;top:16px}
  .map-zoom{left:16px;bottom:16px}
  .map-zoom button{width:44px;height:44px}
}
@media (max-height:850px) and (orientation:landscape){
  .poi-cats{margin:12px 0 2px}
  .poi-cats button{min-height:30px;padding:0 10px;letter-spacing:.16em}
}
@media (prefers-reduced-motion:reduce){
  .about-view.is-active *,.location-view.is-active *{
    animation-duration:.01ms!important;animation-delay:0s!important;
  }
  .map-eden .eden-pulse::before,.map-eden .eden-pulse::after,
  .map-pin.is-hot .pin-dot::before,.map-route .route-pulse{animation:none!important;opacity:.5}
  .map-route .route-pulse{opacity:0!important}
}