.whereMap{padding:92px clamp(24px,5vw,76px) 104px;background:#fff;color:#16100f;border-top:2px solid #c4100f;border-bottom:2px solid #c4100f}
.whereMapIntro{display:grid;grid-template-columns:minmax(280px,.9fr) minmax(300px,1.1fr);grid-template-rows:auto 1fr;column-gap:clamp(35px,8vw,130px);align-items:end;margin-bottom:42px}
.whereMapIntro .sectionIndex{grid-column:1/-1;margin:0 0 17px;color:#c4100f}
.whereMapIntro h2{grid-column:1;margin:0;font-family:"Western Brother",Georgia,serif;font-size:clamp(4.4rem,8vw,8rem);font-weight:400;line-height:.78;color:#c4100f}
.whereMapIntro>p:last-child{grid-column:2;margin:0 0 7px;max-width:520px;font-size:clamp(.95rem,1.3vw,1.18rem);font-weight:700;line-height:1.5}
.whereMapFrame{padding:10px;background:#c4100f;box-shadow:10px 10px 0 #16100f}
.whereMapViewport{position:relative;height:clamp(500px,60vw,700px);overflow:hidden;background:#fff;isolation:isolate;touch-action:pan-y}
.whereMapSvg{position:absolute;inset:0;width:100%;height:100%;overflow:visible}
.wherePatternDot{fill:#d3d3d3}
.whereLandShape{fill:url(#where-map-dot-pattern);opacity:1}
.js .whereMap:not(.isVisible) .whereLandShape{opacity:0}
.whereMap.isVisible .whereLandShape{animation:whereDotIn .7s both;animation-delay:var(--shape-delay,0ms)}
@keyframes whereDotIn{from{opacity:0}to{opacity:1}}
.whereMapMarkers{position:absolute;inset:0;z-index:3;pointer-events:none}
.whereMarker{position:absolute;width:42px;height:42px;padding:8px;border:2px solid #fff;border-radius:50%;background:#c4100f;box-shadow:0 5px 14px #3f050548;cursor:pointer;pointer-events:auto;transform:translate(-50%,-50%) scale(0);transition:left .75s cubic-bezier(.22,.75,.2,1),top .75s cubic-bezier(.22,.75,.2,1),transform .18s ease,opacity .25s;opacity:0}
.whereMarker:before{content:"";position:absolute;inset:-7px;border:2px solid #c4100f;border-radius:50%;opacity:.25;animation:wherePulse 2.4s ease-out infinite}
.whereMarker img{position:relative;width:100%;height:100%;object-fit:contain;pointer-events:none}
.whereMap.isVisible .whereMarker.isInView{opacity:1;transform:translate(-50%,-50%) scale(1);transition-delay:var(--marker-delay,0ms)}
.whereMap.isVisible .whereMarker.isInView:hover,.whereMap.isVisible .whereMarker.isInView:focus-visible{z-index:5;transform:translate(-50%,-50%) scale(1.08)}
.whereMap.isVisible .whereMarker.isInView[aria-expanded="true"]{z-index:6;transform:translate(-50%,-50%) scale(1.12)}
.whereMarker:focus-visible{outline:3px solid #16100f;outline-offset:4px}
.whereMarker span{position:absolute;left:50%;bottom:calc(100% + 10px);width:max-content;max-width:190px;padding:6px 8px;background:#16100f;color:#fff;font-size:.49rem;font-weight:900;letter-spacing:.08em;opacity:0;transform:translate(-50%,5px);transition:.18s;pointer-events:none}
.whereMarker:hover span,.whereMarker:focus-visible span{opacity:1;transform:translate(-50%,0)}
@keyframes wherePulse{70%,100%{transform:scale(1.45);opacity:0}}
.whereMapCard{position:absolute;z-index:8;left:24px;top:24px;width:min(280px,calc(100% - 110px));padding:16px;background:#fff;border:2px solid #16100f;border-radius:5px;box-shadow:7px 7px 0 #c4100f}
.whereMapCard h3{margin:0 28px 7px 0;font-size:.78rem;letter-spacing:.08em}.whereMapCard p{margin:0 0 20px;font-size:.82rem}.whereMapCard a{color:#c4100f;font-size:.62rem;font-weight:1000;letter-spacing:.1em;border-bottom:2px solid #c4100f}.whereMapCard button{position:absolute;right:10px;top:8px;border:0;background:transparent;font-size:1.25rem;cursor:pointer}
.whereMapVideo{display:block;width:100%;aspect-ratio:9/12;margin:13px 0 15px;border:0;background:#16100f}
.whereMapCard.isOpening{transform-origin:18% 30%;animation:whereCardPop .48s cubic-bezier(.16,1.3,.35,1) both}
.whereMapCard.isOpening h3,.whereMapCard.isOpening p,.whereMapCard.isOpening a{animation:whereCardContent .34s ease-out both}
.whereMapCard.isOpening p{animation-delay:.055s}.whereMapCard.isOpening .whereMapVideo{animation:whereVideoPop .42s .09s cubic-bezier(.2,.9,.3,1.15) both}.whereMapCard.isOpening a{animation-delay:.16s}
.whereMapCard.isClosing{pointer-events:none;animation:whereCardOut .18s ease-in both}
@keyframes whereCardPop{0%{opacity:0;transform:translateY(22px) scale(.78) rotate(-2.5deg)}65%{opacity:1;transform:translateY(-4px) scale(1.025) rotate(.5deg)}100%{opacity:1;transform:none}}
@keyframes whereVideoPop{from{opacity:0;transform:translateY(12px) scale(.94)}to{opacity:1;transform:none}}
@keyframes whereCardContent{from{opacity:0;transform:translateY(7px)}to{opacity:1;transform:none}}
@keyframes whereCardOut{to{opacity:0;transform:translateY(10px) scale(.92) rotate(1deg)}}
.whereMapControls{position:absolute;z-index:9;right:20px;bottom:20px;display:grid;gap:6px;opacity:0;transition:opacity .25s .7s}.whereMap.isVisible .whereMapControls{opacity:1}
.whereMapControls button{width:46px;height:46px;border:2px solid #16100f;background:#fff;color:#c4100f;font-size:1.5rem;font-weight:900;cursor:pointer;box-shadow:3px 3px 0 #16100f}.whereMapControls button:hover{background:#c4100f;color:#fff}.whereMapControls button:focus-visible{outline:3px solid #c4100f;outline-offset:3px}.whereMapControls button:disabled{opacity:.35;cursor:not-allowed}
.whereMapLevel{position:absolute;z-index:4;right:82px;bottom:25px;margin:0;padding:8px 11px;background:#fff;color:#16100f;font-size:.52rem;font-weight:1000;letter-spacing:.14em}
@media(max-width:800px){.whereMap{padding:64px 14px 76px}.whereMapIntro{display:block;margin-bottom:28px}.whereMapIntro .sectionIndex{margin-bottom:15px}.whereMapIntro h2{font-size:clamp(3.8rem,18vw,5.6rem);margin-bottom:20px}.whereMapIntro>p:last-child{font-size:.9rem}.whereMapFrame{padding:5px;box-shadow:6px 6px 0 #16100f}.whereMapViewport{height:520px}.whereMarker{width:34px;height:34px;padding:7px}.whereMarker:after{content:"";position:absolute;inset:-7px}.whereMarker span{display:none}.whereMapCard{left:10px!important;top:auto!important;bottom:72px;width:calc(100% - 20px);padding:14px;box-shadow:4px 4px 0 #c4100f}.whereMapVideo{height:190px;aspect-ratio:auto}.whereMapControls{right:11px;bottom:11px;display:flex}.whereMapControls button{width:44px;height:44px}.whereMapLevel{left:11px;right:auto;bottom:17px}}
@media(prefers-reduced-motion:reduce){.whereLandShape,.whereMarker,.whereMapControls,.whereMapCard,.whereMapCard *{animation:none!important;transition:none!important}.whereMap.isVisible .whereLandShape{opacity:1}.whereMarker:before{animation:none}}

/* Keep the complete map story visible in one laptop viewport. */
@media(min-width:801px) and (max-height:1000px){
  .whereMap{height:100svh;min-height:680px;padding:38px clamp(28px,4vw,64px);display:grid;grid-template-columns:minmax(300px,.7fr) minmax(560px,1.3fr);gap:clamp(34px,5vw,82px);align-items:center}
  .whereMapIntro{display:block;margin:0}
  .whereMapIntro .sectionIndex{margin-bottom:18px}
  .whereMapIntro h2{margin:0 0 28px;font-size:clamp(4.2rem,5.7vw,6.6rem);line-height:.78}
  .whereMapIntro>p:last-child{margin:0;max-width:430px;font-size:clamp(.82rem,1vw,1rem);line-height:1.5}
  .whereMapFrame{min-width:0;padding:8px;box-shadow:8px 8px 0 #16100f}
  .whereMapViewport{height:min(72vh,650px);min-height:500px}
}
@media(min-width:801px) and (max-width:1100px) and (max-height:1000px){
  .whereMap{grid-template-columns:minmax(235px,.62fr) minmax(460px,1.38fr);gap:28px;padding-inline:24px}
  .whereMapIntro h2{font-size:clamp(3.5rem,6vw,4.8rem)}
  .whereMapViewport{min-height:470px}
}
