/* Adobe XD review, 17 October 2026: proportion, alignment and responsive flow. */
.hero-editorial h1{font-size:clamp(38px,5.208vw,100px);line-height:1.06}
.hero-editorial p{font-size:clamp(18px,1.667vw,32px);line-height:1.35}
.xd-intro h2,.xd-heading h2{font-size:clamp(32px,5.26vw,101px);line-height:1.2}
.xd-intro p,.products-section .xd-heading p{font-size:clamp(20px,2.24vw,43px);line-height:1.35}
.xd-heading p{font-size:clamp(20px,2.76vw,53px);line-height:1.25}
.xd-heading-center p{max-width:1120px;margin-left:auto;margin-right:auto}
.products-section .xd-heading p{max-width:1170px}
.xd-split-copy h2,.xd-app h2,.news-section .xd-heading h2{font-size:clamp(32px,4.323vw,83px);line-height:1.2}
.xd-split-copy p,.xd-app .story-copy>p,.xd-events .xd-split-copy p,.xd-order .xd-split-copy p{font-size:clamp(20px,1.98vw,38px);line-height:1.35}
.xd-button{font-size:clamp(18px,2.083vw,40px)}
.xd-roaster,.xd-app,.xd-events,.xd-order{margin-bottom:0}
.xd-roaster,.xd-events{grid-template-columns:56% 44%;height:auto;min-height:0;align-items:stretch}
.xd-roaster .xd-split-media,.xd-events .xd-split-media{min-height:0;aspect-ratio:1.08;position:relative}
.xd-roaster .xd-split-media img,.xd-events .xd-split-media img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.xd-roaster .xd-split-media img{object-position:48% center}
.xd-events .xd-split-media img{object-position:51% center}
.xd-roaster .xd-split-copy,.xd-events .xd-split-copy{padding:5vw 4vw;align-items:center;text-align:center}
.xd-roaster .xd-split-copy p,.xd-events .xd-split-copy p{max-width:610px;margin:30px auto 48px}
.xd-roaster .xd-split-copy h2,.xd-events .xd-split-copy h2{margin-bottom:0}
.xd-roaster .xd-button,.xd-events .xd-button{min-width:0;max-width:100%;padding-inline:28px;font-size:clamp(18px,1.8vw,35px)}
.xd-app .story-copy{padding-top:6vw;padding-bottom:6vw}
.xd-app .download-links a{flex-direction:row;justify-content:center}
.xd-order{height:auto;min-height:42vw;align-items:stretch}
.xd-order .xd-split-copy{align-items:center;text-align:center;padding:6vw 5.5vw}
.xd-order .xd-split-copy p{max-width:660px}
.xd-order .xd-bag{position:relative;min-height:0;overflow:hidden}
.xd-order .xd-bag>img{position:absolute;width:140%;max-width:none;height:auto;left:-10.5%;bottom:-18%;padding:0;object-fit:contain}
.contact-banner h2{font-size:clamp(32px,3.28vw,63px)}
.site-footer{padding-top:clamp(64px,6.5vw,125px);padding-bottom:68px}
.footer-intro{padding-top:0;padding-bottom:clamp(42px,4vw,76px)}
.footer-intro>span{font-size:clamp(34px,4.323vw,83px)}
.site-footer .footer-grid{padding-top:40px;padding-bottom:12px}
.site-footer .footer-legal{margin-top:40px}
@media(max-width:1100px) and (min-width:901px){
 .xd-roaster .xd-split-copy,.xd-events .xd-split-copy{padding:40px 3vw}
 .xd-roaster .xd-split-copy p,.xd-events .xd-split-copy p{margin:24px auto 30px}
 .xd-roaster .xd-split-media,.xd-events .xd-split-media{aspect-ratio:auto;min-height:480px}
 .xd-app .story-copy{padding:48px 5vw}
}
@media(max-width:900px){
 .hero-editorial h1{font-size:clamp(30px,5.3vw,46px);line-height:1.12}
 .hero-editorial p{font-size:18px}
 .xd-intro h2,.xd-heading h2,.xd-split-copy h2,.xd-app h2,.news-section .xd-heading h2{font-size:clamp(28px,5.2vw,40px);line-height:1.2}
 .xd-intro p,.xd-heading p,.products-section .xd-heading p,.xd-split-copy p,.xd-app .story-copy>p,.xd-events .xd-split-copy p,.xd-order .xd-split-copy p{font-size:18px;line-height:1.5}
 .xd-roaster,.xd-app,.xd-events,.xd-order{grid-template-columns:1fr}
 .xd-roaster .xd-split-media,.xd-events .xd-split-media{height:auto;aspect-ratio:4/3;max-height:none}
 .xd-roaster .xd-split-copy,.xd-events .xd-split-copy{padding:48px 7vw}
 .xd-roaster .xd-split-copy p,.xd-events .xd-split-copy p{max-width:540px;margin:24px auto 30px}
 .xd-app .story-copy{padding:48px 7vw}
 .xd-order .xd-split-copy{padding:24px 7vw 48px}
 .xd-order .xd-bag{height:auto;min-height:0;max-width:500px;aspect-ratio:10/7}
 .xd-order .xd-bag>img{width:100%;left:6.8%;bottom:-11.43%;height:auto}
 .xd-button,.xd-roaster .xd-button,.xd-events .xd-button{font-size:18px;min-height:54px}
 .site-footer{padding-top:64px;padding-bottom:68px}
 .footer-intro{padding-bottom:36px}
 .footer-intro>span{font-size:30px}
 .site-footer .footer-grid{padding-top:32px;padding-bottom:0}
 .site-footer .footer-legal{margin-top:32px}
 .contact-banner h2{font-size:30px}
}

/* Quieter green headings and city labels outside the maps. */
@media(min-width:901px){
 .xd-intro h2,.xd-heading h2{font-size:clamp(30px,3.25vw,52px)}
 .xd-app h2,.xd-events .xd-split-copy h2,.xd-order .xd-split-copy h2,.news-section .xd-heading h2{font-size:clamp(28px,2.8vw,44px)}
 .map-grid{margin-inline:3.5vw;gap:clamp(18px,1.8vw,34px);grid-template-columns:repeat(3,minmax(0,1fr))}
 .city-maps .xd-heading{padding-bottom:clamp(40px,4.5vw,86px)}
}
.city-map-heading{display:flex;align-items:baseline;justify-content:flex-start;gap:12px;padding:0 0 16px;margin:0;flex-wrap:wrap}
.city-map-heading h3{margin:0;font-size:clamp(22px,1.7vw,30px);line-height:1.3}
.city-map-heading h3 a{color:var(--forest);text-decoration:none}
.city-map-heading h3 a:hover{text-decoration:underline;text-underline-offset:5px}
.city-map-heading .city-location-total{font-size:14px;line-height:1.5;color:var(--forest);white-space:nowrap}
.city-map{aspect-ratio:7/5}
.city-map>img{object-fit:contain}
@media(max-width:900px){.city-map-heading{padding-bottom:14px}.city-map-heading h3{font-size:24px}.city-map{aspect-ratio:7/5}}

/* Compact, consistently centered calls to action. */
.xd-button,.xd-roaster .xd-button,.xd-events .xd-button,.xd-order .xd-button,.contact-banner .xd-button{font-size:clamp(18px,1.25vw,20px);min-width:180px;min-height:50px;padding:12px 26px;border-width:2px;line-height:1.25;justify-content:center;text-align:center}
@media(max-width:900px){
 .xd-button,.xd-roaster .xd-button,.xd-events .xd-button,.xd-order .xd-button,.contact-banner .xd-button{font-size:17px;min-width:min(180px,100%);min-height:48px;padding:12px 24px}
}

/* Balanced section spacing and restrained editorial copy. */
.xd-intro{padding-block:clamp(56px,6vw,96px)}
.xd-heading,.xd-heading-left,.xd-heading-center,.city-maps .xd-heading,.news-section .xd-heading{padding-block:clamp(48px,5vw,80px)}
.xd-gallery-cta{padding-block:clamp(32px,3vw,48px)}
.news-section{padding-bottom:0}
.social-strip{padding-block:clamp(56px,5vw,80px)}
.social-strip .center-title{margin-top:0;margin-bottom:32px;line-height:1.3}
.social-strip>div{align-items:center}
.xd-roaster .xd-split-copy,.xd-events .xd-split-copy,.xd-order .xd-split-copy,.xd-app .story-copy{justify-content:center}
.xd-roaster .xd-split-copy h2,.xd-events .xd-split-copy h2,.xd-order .xd-split-copy h2,.xd-app h2{margin:0 0 24px}
.xd-roaster .xd-split-copy p,.xd-events .xd-split-copy p,.xd-order .xd-split-copy p,.xd-app .story-copy>p{margin-top:0;margin-bottom:32px}
@media(min-width:901px){
 .xd-roaster .xd-split-copy h2{font-size:clamp(28px,2.8vw,44px)}
 .xd-intro p,.xd-heading p,.products-section .xd-heading p{font-size:clamp(20px,1.65vw,26px);line-height:1.5}
 .xd-split-copy p,.xd-app .story-copy>p,.xd-events .xd-split-copy p,.xd-order .xd-split-copy p{font-size:clamp(18px,1.5vw,24px);line-height:1.5}
 .xd-heading p{margin-top:24px}
}
@media(max-width:900px){
 .xd-roaster .xd-split-copy,.xd-events .xd-split-copy,.xd-order .xd-split-copy,.xd-app .story-copy{padding-block:48px}
 .xd-roaster .xd-split-copy h2{font-size:clamp(28px,4.5vw,34px)}
 .social-strip .center-title{margin-bottom:28px}
}

/* The next heading owns the gap after the maps; avoid stacked spacing. */
.city-maps{padding-bottom:0}

/* Center the complete app copy vertically alongside the visual. */
.xd-app .story-copy{display:flex;flex-direction:column;justify-content:center;align-items:flex-start}

/* Street Coffee pins: vector brand sprig, with a separate cluster count. */
.city-map .map-pin{width:32px;height:44px;transform:translate(-50%,-100%);border-radius:16px 16px 4px 4px;background:transparent;overflow:visible}
.city-map .map-pin::before{content:"";position:absolute;inset:0;background:url('/assets/street-map-pin.svg') center/contain no-repeat;filter:drop-shadow(0 1px 2px #0003);pointer-events:none}
.city-map .map-pin span{position:absolute;right:-5px;top:-4px;width:18px;height:18px;min-width:18px;border:1.5px solid var(--forest);background:#fff;color:var(--forest);border-radius:50%;box-shadow:0 1px 3px #0002;font:600 10px/1 Arial,sans-serif;transform:none;z-index:1}
.city-map .map-pin span:empty{display:none}
.city-map .map-pin:hover::before,.city-map .map-pin.selected::before{filter:brightness(1.35) drop-shadow(0 2px 3px #0005)}
.city-map .map-pin.selected{z-index:5}
.city-map .map-pin:focus-visible{outline:2px solid var(--forest);outline-offset:3px}
/* Keep northern pins intact, including their touch targets and count badges. */
.city-map{overflow:visible}
.city-map-heading{padding-bottom:40px}
/* A clear city overview, with bounded zoomable maps and a location directory. */
.city-map-heading{justify-content:space-between;align-items:center;padding-bottom:20px;gap:10px}
.city-map-heading .city-location-total{display:flex;align-items:baseline;gap:6px;font-size:12px;text-transform:none}
.city-location-total strong{font-family:'Roboto Slab',Georgia,serif;font-size:32px;line-height:1.2;font-weight:500}
.city-map-featured .city-location-total strong{font-size:38px}
.city-map{aspect-ratio:1.18;overflow:hidden;background:#efefe8;border:1px solid #e2e6dc;isolation:isolate;touch-action:pan-y}
.city-map>img{position:absolute;max-width:none;object-fit:fill;pointer-events:none;user-select:none}
.city-map .map-pin{width:26px;height:36px}
.city-map .map-pin span{font-size:10px;width:18px;height:18px}
.map-controls{position:absolute;right:10px;top:10px;z-index:6;display:flex;background:#fff;border:1px solid #d9ded2;border-radius:6px;box-shadow:0 2px 8px #0001}
.map-controls button{width:34px;height:36px;padding:0;font:22px/1 Arial,sans-serif;display:grid;place-items:center;color:var(--forest)}
.map-controls button:disabled{opacity:.3;cursor:default}
.map-zoomed{cursor:grab;touch-action:none}
.map-zoomed:active{cursor:grabbing}
.map-list-toggle{display:block;width:100%;text-align:center;padding:13px 8px;margin-top:12px;border:1px solid #d9ded2;border-radius:4px;font-size:14px;color:var(--forest)}
.map-list-toggle:hover{background:var(--paper)}
.city-map-card .map-selection{max-height:300px;overflow:auto;overscroll-behavior:contain}
@media(max-width:900px){.city-map-featured{order:-1}.city-map{aspect-ratio:1.18}.city-map-heading{padding-bottom:20px}.city-map-heading h3{font-size:24px}}
.city-map-heading{min-height:66px}
.city-map-heading{display:grid;grid-template-columns:minmax(0,1fr) auto;min-height:76px;height:76px;align-items:center}
.city-map-heading h3{min-width:0}
.city-map-heading .city-location-total{flex-direction:row;flex-wrap:nowrap}

/* Discrete labels are fitted only into free space around individual pins. */
.map-pin-label{position:absolute;top:7px;width:max-content;max-width:115px;padding:3px 5px;border-radius:3px;background:#fffffff0;color:var(--forest);font:500 11px/1.25 'univers-next-pro',Arial,sans-serif;white-space:normal;text-align:left;box-shadow:0 1px 3px #0001;pointer-events:none}
.map-pin-label[data-side="right"]{left:calc(100% + 7px)}
.map-pin-label[data-side="left"]{right:calc(100% + 7px)}

/* All location names remain accessible independently of map clustering. */
.map-directory-caption{font-size:12px;line-height:1.5;margin:18px 0 10px;color:var(--forest)}
.map-directory{display:grid;grid-template-columns:1fr;gap:0;max-height:232px;overflow:auto;border-block:1px solid #d9ded2;scrollbar-width:thin;scrollbar-color:#a6b09b transparent;overscroll-behavior:contain}
.map-directory button{display:block;width:100%;min-height:44px;padding:11px 12px;text-align:left;font-size:14px;line-height:1.5;border-bottom:1px solid #e9ece5;background:transparent;color:var(--forest)}
.map-directory button:last-child{border-bottom:0}
.map-directory button:hover,.map-directory button[aria-pressed="true"]{background:var(--paper)}
.map-directory button[aria-pressed="true"]{box-shadow:inset 3px 0 var(--forest);font-weight:600}
.city-map .map-pin.selected::before{filter:drop-shadow(0 0 3px #fff) drop-shadow(0 0 5px #344426);transform:scale(1.12);transform-origin:bottom center}
