/* V28 responsive polish — intentionally scoped, preserving desktop editorial design */
:root{--mobile-ink:#29393d;--mobile-blue:#315d70}
html{scroll-padding-top:92px} [id]{scroll-margin-top:92px}
img,video,iframe,svg{max-width:100%} img{height:auto} 
figure{max-width:100%} .split>*,.gallery>*,.cards>*,.container>*,.content>*{min-width:0}
.button,.action{min-height:44px;display:inline-flex;align-items:center;justify-content:center;line-height:1.45;text-align:center}
:focus-visible{outline:3px solid #315d70;outline-offset:3px}
@media(max-width:850px){
 header nav{min-height:73px}
 .mobile-menu summary{border-radius:4px;user-select:none}
 .mobile-menu[open] .menu-glyph{border-top-color:transparent;border-bottom-color:transparent}
 .mobile-menu[open] .menu-glyph::after{transform:rotate(45deg);top:5px}
 .mobile-links{z-index:120;box-shadow:0 16px 35px rgba(27,48,54,.15);padding:8px 0;overscroll-behavior:contain}
 .mobile-links a{padding:12px 20px;min-height:45px;display:flex;align-items:center}
 .mobile-menu[open] summary{color:#16415e}
 body{overflow-x:clip} .hero{padding:55px 0 61px}
 .hero .eyebrow{margin-bottom:14px} .section-descriptor{margin-top:14px}
 .content,.container{width:100%;max-width:100%;padding-left:clamp(20px,5vw,30px);padding-right:clamp(20px,5vw,30px)}
 .feature{padding:43px 0} .split{gap:22px}
 .photo,.story-photo,.graphic-embed,.editorial-cover-art{max-width:100%;margin-left:auto;margin-right:auto}
 .photo img,.story-photo img,.graphic-embed img,.editorial-cover-art img{height:auto;object-fit:contain}
 .cards{gap:13px} .card{padding:23px 20px}
 .card h3{margin:4px 0 12px}
 .content{padding-top:37px;padding-bottom:62px}
 .content p{line-height:1.76}
 .v15-video-embed{width:100%;aspect-ratio:16/9}
 .footer{padding:42px 22px}
 .podcast-teaser{margin:30px 0;padding:23px 20px}
 .field input,.field select,.field textarea{font-size:16px;max-width:100%}
 .v15-city-section{padding-top:42px;padding-bottom:47px}
}
@media(max-width:600px){
 html{scroll-padding-top:80px} [id]{scroll-margin-top:80px}
 header nav{min-height:70px;padding:13px 19px!important}
 header nav .logo{font-size:11.5px;letter-spacing:.14em}
 .mobile-menu summary{padding:10px 0 10px 10px;font-size:11px}
 .mobile-links{right:-4px;top:calc(100% + 5px);width:min(305px,calc(100vw - 30px));max-height:calc(100dvh - 85px)}
 body{font-size:16px;line-height:1.7}
 .hero{padding:47px 0 55px}
 h1,.hero h1{font-size:clamp(34px,9vw,45px);line-height:1.14;letter-spacing:-.024em;overflow-wrap:normal;hyphens:none}
 h2{font-size:clamp(27px,7.3vw,35px);line-height:1.21}
 h3{font-size:21px}
 .hero .sub{font-size:clamp(20px,5.7vw,25px);line-height:1.44}
 .hero .intro{font-size:clamp(18px,4.65vw,21px);line-height:1.65}
 .section-descriptor{font-size:clamp(19px,5.5vw,24px);line-height:1.43}
 .eyebrow,.hero .eyebrow{font-size:11px;letter-spacing:.12em;line-height:1.55}
 .content h2{margin-top:38px}
 .content p{font-size:16.5px;line-height:1.76}
 .story-photo.landscape-breath{margin-left:0;margin-right:0}
 .gallery{grid-template-columns:1fr}
 .button{max-width:100%;white-space:normal;padding:13px 18px;font-size:11px}
 .v15-city{padding:19px 0}
 .footer small{line-height:1.6}
 /* Brevo form is hosted externally: let the iframe fill the small screen */
 #brevo-newsletter{display:block;width:100%!important;max-width:100%;min-height:450px;border:0}
}
@media(max-width:380px){
 header nav .logo{font-size:10px;letter-spacing:.10em}
 .mobile-menu summary{font-size:10px;gap:7px}
 h1,.hero h1{font-size:clamp(32px,9vw,36px)}
 .container,.content{padding-left:18px;padding-right:18px}
 .card{padding:20px 16px}
}
@media(max-width:850px) and (orientation:landscape) and (max-height:500px){
 header nav{min-height:54px;padding-top:5px!important;padding-bottom:5px!important}
 .mobile-links{max-height:calc(100dvh - 65px);overflow-y:auto}
 .hero{padding-top:34px;padding-bottom:38px}
}
@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto!important}*,*::before,*::after{transition-duration:.01ms!important;animation-duration:.01ms!important}}