:root {
  --ink:#151515;
  --paper:#f3f1ec;
  --white:#fff;
  --brick:#d3a29e;
  --brick-deep:#a8665f;
  --aqua:#91c9ca;
  --line:rgba(21,21,21,.16);
  --muted:#66635e;
  --kp-title-line-height:1.12;
}
*{box-sizing:border-box}
html,body{margin:0;min-height:100%;background:var(--paper);color:var(--ink);font-family:"DM Sans",sans-serif}
button{font:inherit;color:inherit}
button:focus-visible{outline:2px solid var(--brick-deep);outline-offset:3px}
.amenities-shell{min-height:100svh;display:grid;grid-template-columns:minmax(410px,38%) 1fr;background:var(--paper)}
.amenities-panel{z-index:2;height:100svh;overflow:auto;padding:clamp(34px,4vw,72px);border-right:1px solid var(--line);scrollbar-width:thin}
.eyebrow,.amenity-card__category{margin:0;font-size:.68rem;font-weight:600;letter-spacing:.18em;text-transform:uppercase}
.eyebrow{color:var(--brick-deep)}
h1{margin:22px 0 26px;font:400 clamp(3.2rem,5.2vw,6.6rem)/var(--kp-title-line-height) "Playfair Display",serif;letter-spacing:-.045em}
h1 em{color:var(--brick-deep);font-weight:400}
.lede{max-width:590px;margin:0;color:#343331;font-size:clamp(1rem,1.15vw,1.2rem);font-weight:300;line-height:1.65}
.reach{display:flex;align-items:center;gap:12px;margin:36px 0 30px}
.reach span{width:92px;aspect-ratio:1;display:grid;place-content:center;border:1px solid var(--line);border-radius:50%;text-align:center;transition:.3s}
.reach b{font:400 1.4rem "Playfair Display",serif}.reach small{font-size:.58rem;letter-spacing:.08em;text-transform:uppercase}
.reach span.is-active{border-color:var(--brick-deep);background:var(--brick);transform:scale(1.06)}
/* Icons are masked, not inlined: the SVG supplies the shape, CSS the colour. */
.modes-bar{display:flex;align-items:flex-end;gap:clamp(20px,4vw,46px);
           padding:14px clamp(18px,3vw,30px) 0;background:var(--ink)}
.mode-btn{flex:none;display:grid;justify-items:center;gap:9px;padding:0 2px 10px;border:0;
          border-bottom:2px solid transparent;background:none;color:rgba(255,255,255,.5);
          cursor:pointer;transition:color .2s ease,border-color .2s ease}
.mode-btn i{display:block;height:34px;background:currentColor;
            -webkit-mask-repeat:no-repeat;mask-repeat:no-repeat;
            -webkit-mask-position:center bottom;mask-position:center bottom;
            -webkit-mask-size:contain;mask-size:contain}
.mode-btn[data-mode="walking"] i{width:23px;-webkit-mask-image:url(walk.svg);mask-image:url(walk.svg)}
.mode-btn[data-mode="cycling"] i{width:49px;-webkit-mask-image:url(bike.svg);mask-image:url(bike.svg)}
.mode-btn[data-mode="driving"] i{width:42px;-webkit-mask-image:url(car.svg);mask-image:url(car.svg)}
.mode-btn span{color:inherit;font-size:.66rem;letter-spacing:.1em;text-transform:uppercase}
.mode-btn:hover{color:rgba(255,255,255,.8)}
.mode-btn.is-active{color:var(--white);border-bottom-color:var(--white)}
.route-summary{min-height:60px;display:flex;align-items:center;justify-content:space-between;gap:20px;padding:14px 0;border-top:1px solid var(--line);border-bottom:1px solid var(--line)}
.route-summary__status{color:var(--muted);font-size:.78rem}.route-summary__value{font:400 1.35rem "Playfair Display",serif;text-align:right}
.cards{display:grid;gap:8px;padding:16px 0 40px}
.amenity-card{width:100%;display:grid;grid-template-columns:1fr auto;gap:8px 20px;padding:18px;border:1px solid transparent;border-radius:3px;background:rgba(255,255,255,.52);text-align:left;cursor:pointer;transition:.25s}
.amenity-card:hover,.amenity-card.is-selected{border-color:transparent;background:var(--white);transform:none}
.amenity-card__category{color:var(--ink)}
/* Without this the browser starts its own image drag instead of scrolling the rail. */
.amenity-card__image{-webkit-user-drag:none;user-select:none;pointer-events:none}
.amenity-card h2{grid-column:1;margin:5px 0 3px;font:400 1.35rem "Playfair Display",serif}.amenity-card p{grid-column:1;margin:0;color:var(--muted);font-size:.78rem;line-height:1.5}
.amenity-card__meta{grid-column:2;grid-row:1/4;align-self:center;text-align:right;font-size:.7rem;line-height:1.6}.amenity-card__meta strong{display:block;font-size:.82rem}
.map-panel{position:sticky;top:0;height:100svh;overflow:hidden;background:#e8e7e2}
#map{position:absolute;inset:0}
.map-state,.map-error{position:absolute;z-index:4;left:24px;bottom:24px;max-width:360px;padding:12px 15px;background:var(--paper);border:1px solid var(--line);font-size:.75rem}.map-state.is-hidden{display:none}.map-error{border-color:var(--brick-deep)}
.origin-marker,.amenity-marker{border:0;background:none;cursor:pointer}
.origin-marker__dot{width:24px;height:24px;display:block;border:5px solid var(--white);border-radius:50%;background:var(--brick-deep);box-shadow:0 0 0 7px rgba(211,162,158,.42),0 6px 18px rgba(0,0,0,.22)}
.origin-marker__label{position:absolute;left:42px;bottom:-14px;min-width:166px;display:flex;align-items:center;gap:10px;padding:9px 12px;background:var(--ink);color:white;text-align:left;white-space:nowrap;font-size:.68rem;pointer-events:none}
.origin-marker__label::before{content:'';position:absolute;top:50%;left:-5px;width:10px;height:10px;transform:translateY(-50%) rotate(45deg);background:var(--ink)}
.origin-marker__logo{width:28px;height:28px;flex:none}.origin-marker__copy{display:block}.origin-marker__copy strong{display:block;font-weight:500}.origin-marker__copy small{display:block;margin-top:3px;color:#d7d5cf;font-size:.55rem}
.amenity-marker{position:absolute;width:29px;height:29px;display:grid;place-items:center;border:2px solid var(--white);border-radius:50%;background:var(--ink);color:white;box-shadow:0 4px 12px rgba(0,0,0,.2);font-size:.57rem;font-weight:600;transition:background-color .2s ease,color .2s ease}
.amenity-marker.is-mode-hidden{display:none}
.amenity-marker::before{content:'';position:absolute;inset:-5px;border-radius:50%;box-shadow:0 0 0 2px var(--brick-deep);opacity:0;transform:scale(.75);transition:opacity .2s ease,transform .2s ease;pointer-events:none}
.amenity-marker__symbol{display:block}.amenity-marker__label{position:absolute;bottom:38px;left:50%;min-width:max-content;padding:9px 11px;transform:translate(-50%,5px);background:var(--white);color:var(--ink);box-shadow:0 5px 18px rgba(0,0,0,.15);text-align:left;white-space:nowrap;opacity:0;pointer-events:none;transition:opacity .2s ease,transform .2s ease}.amenity-marker__label strong{display:block;font-size:.68rem;font-weight:600}.amenity-marker__label small{display:block;margin-top:3px;color:var(--brick-deep);font-size:.58rem;font-weight:500;letter-spacing:.03em}
.amenity-marker:hover,.amenity-marker:focus-visible,.amenity-marker.is-active{background:var(--white);color:var(--ink)}
.amenity-marker:hover::before,.amenity-marker:focus-visible::before,.amenity-marker.is-active::before{opacity:1;transform:scale(1)}
.amenity-marker:hover .amenity-marker__label,.amenity-marker:focus-visible .amenity-marker__label,.amenity-marker.is-active .amenity-marker__label{opacity:1;transform:translate(-50%,0)}
.maplibregl-ctrl-group{border-radius:2px!important;box-shadow:0 0 0 1px var(--line)!important}.maplibregl-popup-content{padding:12px 14px;border-radius:2px;font-family:"DM Sans",sans-serif}.maplibregl-popup-close-button{padding:4px}
@media(max-width:820px){
  .amenities-shell{display:block}.amenities-panel{height:auto;overflow:visible;padding:32px 20px 20px;border:0}.map-panel{position:relative;height:62svh;min-height:460px}
  h1{font-size:clamp(3.2rem,14vw,5.5rem)}.reach{margin-block:28px 22px}.reach span{width:78px}.cards{display:flex;overflow-x:auto;scroll-snap-type:x mandatory;padding-bottom:12px}.amenity-card{min-width:min(82vw,340px);scroll-snap-align:start}.route-summary{margin-top:14px}
}
@media(prefers-reduced-motion:reduce){*,*::before,*::after{scroll-behavior:auto!important;animation-duration:.01ms!important;transition-duration:.01ms!important}}