/* Shared responsive safeguards, loaded after the page-specific styles. */
/* Native scrollbars: Firefox and Chromium/WebKit, without replacing scrolling. */
html{scrollbar-width:thin;scrollbar-color:#f58a1f #191c17}
body::-webkit-scrollbar,html::-webkit-scrollbar{width:7px;height:7px}
body::-webkit-scrollbar-track,html::-webkit-scrollbar-track{background:#191c17}
body::-webkit-scrollbar-thumb,html::-webkit-scrollbar-thumb{background:#f58a1f;border:1px solid #191c17;border-radius:10px}
body::-webkit-scrollbar-thumb:hover,html::-webkit-scrollbar-thumb:hover{background:#ff9d38}
body::-webkit-scrollbar-corner,html::-webkit-scrollbar-corner{background:#191c17}
.about>*,.donation>*,.values-heading>*,.worship-layout>*,.region-hero-grid>*,.region-chart>*,.region-mission>*,.footer-inner>*,.album-narrative,.album-visual,.lightbox-story{min-width:0}
h1,h2,h3,h4,.eyebrow,.value-link,.album-view,.region-sources a{overflow-wrap:anywhere}
.btn{max-width:100%;white-space:normal;text-align:center}
.mission-priorities article>div{min-width:0}
.mission-priorities article>span{flex-shrink:0}
.region-mobile-flag{display:none}
.footer-instagram{display:inline-flex;align-items:center;gap:10px;max-width:100%;min-height:44px;margin-top:18px;padding:8px 0;color:#fff;font-size:.8rem;line-height:1.5;transition:color .2s}
.footer-instagram svg{width:21px;height:21px}
.footer-instagram>span:not(.instagram-arrow){min-width:0;overflow-wrap:anywhere}
.footer-instagram .instagram-arrow{transition:transform .2s}
.footer-instagram:hover,.footer-instagram:focus-visible{color:#ff8a00}
.footer-instagram:hover .instagram-arrow{transform:translate(2px,-2px)}
@media(prefers-reduced-motion:reduce){.footer-instagram,.footer-instagram .instagram-arrow{transition:none}.footer-instagram:hover .instagram-arrow{transform:none}}
.video-audio-toggle{display:flex;align-items:center;justify-content:center;gap:10px;width:100%;min-height:48px;margin-top:18px;padding:12px 16px;border:1px solid #ffbf70;border-radius:12px;background:#f58a1f;color:#171a13;font-size:.8rem;font-weight:700;line-height:1.5;text-align:center}
.video-audio-toggle[hidden]{display:none}
.video-audio-toggle svg{width:22px;height:22px}
.video-audio-toggle .audio-on,.video-audio-toggle[aria-pressed="true"] .audio-off{display:none}
.video-audio-toggle[aria-pressed="true"] .audio-on{display:block}
.video-audio-toggle[aria-pressed="true"]{background:#ffffff12;color:#ffcf94}
.album-highlights>button .album-highlight-label{min-width:0;font-size:inherit;opacity:1;white-space:normal;overflow-wrap:anywhere}
/* One scrolling content column in the mobile presentation, also in landscape. */
@media(max-width:900px),(pointer:coarse){
  #lightbox.is-expanded{inset:0;width:100%;max-width:100%;height:100dvh;max-height:100dvh;overflow:hidden}
  #lightbox.is-expanded .lightbox-shell{width:100%;max-width:100%;min-width:0;height:100%;grid-template-rows:auto minmax(0,1fr) auto;overflow:hidden}
  #lightbox.is-expanded .lightbox-top{position:relative;min-width:0;flex-wrap:wrap;padding:12px max(14px,env(safe-area-inset-right)) 12px max(14px,env(safe-area-inset-left));padding-top:max(12px,env(safe-area-inset-top));gap:10px}
  #lightbox.is-expanded .lightbox-top>div:first-child{min-width:0;flex:1 1 180px}
  #lightbox.is-expanded .lightbox-top-actions{width:auto;max-width:100%;gap:10px;flex-wrap:wrap}
  #lightbox.is-expanded h3{font-size:1.15rem;overflow-wrap:anywhere}
  #lightbox.is-expanded .lightbox-brand{font-size:.5rem;letter-spacing:1px}
  #lightbox.is-expanded .lightbox-body{display:grid;grid-template-columns:minmax(0,1fr);min-width:0;min-height:0;overflow-y:auto;overflow-x:hidden;overscroll-behavior:contain;align-content:start;-webkit-overflow-scrolling:touch}
  #lightbox.is-expanded .lightbox-stage{min-width:0;min-height:0;padding:12px 54px;overflow:hidden}
  #lightbox.is-expanded .lightbox-stage>img{width:100%;height:clamp(180px,44dvh,500px);min-height:0;max-height:none;object-fit:contain}
  #lightbox.is-expanded .lightbox-stage>button{width:44px;height:48px}
  #lightbox.is-expanded .lightbox-story{min-width:0;min-height:0;overflow:visible;padding:24px max(22px,env(safe-area-inset-right)) 28px max(22px,env(safe-area-inset-left))}
  #lightbox.is-expanded #photo-title{font-size:clamp(1.5rem,5vw,2rem);overflow-wrap:anywhere}
  #lightbox.is-expanded #photo-reflection{font-size:.9rem;overflow-wrap:anywhere}
  #lightbox.is-expanded .lightbox-bottom{min-width:0;display:block;padding:10px 14px max(10px,env(safe-area-inset-bottom));overflow:hidden}
  #lightbox.is-expanded .lightbox-hint{display:none}
  #lightbox.is-expanded .lightbox-thumbs{width:100%;max-width:100%;min-width:0;overscroll-behavior-x:contain}
  #lightbox.is-expanded #gallery-fullscreen [data-fullscreen-label]{display:none}
}
@media(max-width:1050px){
  header #navigation{overscroll-behavior:contain;max-height:calc(100dvh - 110px)}
  header #navigation>a,header .nav-world>summary{min-height:44px;display:flex;align-items:center}
  .menu-toggle{width:44px;height:44px;align-items:center;justify-content:center}
  .language-picker>summary,.language-option{min-height:44px}
  .region-tabs{position:static;inset:auto;flex-wrap:wrap;max-width:100%}
}
@media(max-width:760px){
  /* Mobile has its own horizontal flag artwork; retain curtains on desktop only. */
  .region-flag-curtain{display:none}
  .region-mobile-flag{display:block;width:min(230px,68vw);margin:8px auto 16px}
  .region-mobile-flag img{display:block;width:100%;height:auto;object-fit:contain;filter:drop-shadow(0 10px 16px #0005)}
  .region-hero-copy{padding-top:8px}
  html{scroll-padding-top:100px}
  .topline>.wrap{flex-wrap:wrap;gap:4px 16px;padding-block:7px}
  .topline span,.topline a{white-space:normal}
  .hero{display:block;min-height:0}
  .hero-content{padding:64px 0 38px}
  .hero h1{font-size:clamp(2.45rem,9vw,4rem)}
  .hero-foot{position:relative;inset:auto;margin:0 auto;padding:22px 0 44px;flex-wrap:wrap;gap:16px}
  .hero-foot>span{min-width:0}
  .section-top,.album-heading,.album-footer,.values-continuation{flex-wrap:wrap}
  .album-highlights button,.album-view,.value-link{min-height:44px}
  .album-highlights button{max-width:100%;min-width:0;white-space:normal;overflow-wrap:anywhere;text-align:left}
  .photo-album{grid-template-columns:minmax(0,1fr)}
  .album-highlights,.album-heading,.album-heading>div{min-width:0;max-width:100%}
  .album-highlights>button{flex:0 1 auto;height:auto;overflow:visible}
  .album-highlights>button>span:first-child{flex-shrink:0}
  .album-highlights>button .album-highlight-label{flex:1 1 auto}
  .album-dots{flex-wrap:wrap}
  .album-dots button{width:44px;min-width:44px;height:44px}
  .album-carousel-controls{flex-wrap:wrap}
  .map-legend{flex-wrap:wrap;gap:12px 24px}
  .donation-card{max-width:100%}
  .pix-content>img{max-width:100%;height:auto;aspect-ratio:1}
  dl{grid-template-columns:repeat(3,minmax(0,1fr))}
  dd{overflow-wrap:anywhere}
  .footer-nav-column a{min-height:44px;display:flex;align-items:center;white-space:normal}
  footer{padding-bottom:90px}
  .whatsapp{bottom:max(18px,env(safe-area-inset-bottom));right:max(18px,env(safe-area-inset-right))}
  #lightbox .lightbox-top{flex-wrap:wrap;align-items:center;gap:12px}
  #lightbox .lightbox-top>div:first-child{flex:1 1 100%;min-width:0}
  #lightbox .lightbox-top-actions{width:100%;gap:12px;justify-content:flex-end}
  #lightbox #photo-count{margin-right:auto}
  #lightbox #gallery-fullscreen,#lightbox #close-lightbox{width:44px;height:44px;min-height:44px}
  #lightbox .lightbox-stage>button{width:44px;height:48px}
  #lightbox .lightbox-stage{padding-inline:56px}
  #lightbox .lightbox-shell:fullscreen .lightbox-stage,#lightbox.is-expanded .lightbox-stage{padding-inline:56px}
  .lightbox-shell:fullscreen .lightbox-bottom,#lightbox.is-expanded .lightbox-bottom{padding-bottom:max(10px,env(safe-area-inset-bottom))}
}
@media(max-width:650px){
  .region-hero-copy{padding-right:0}
  .region-hero h1{font-size:clamp(3rem,14vw,4.75rem)}
  .region-hero h2{font-size:clamp(1.6rem,6.5vw,1.875rem)}
  .region-tabs{padding-right:0;gap:0}
  .region-hero-art{padding-right:0}
  .region-tabs a{flex:1 1 auto;text-align:center;padding:16px 12px;white-space:normal}
  .data-ring{width:min(220px,100%)}
}
@media(max-width:380px){
  .header-inner{gap:12px}
  .header-tools{gap:6px}
  .hero .actions .btn{width:100%}
  .donation-card{padding:22px 18px}
  dl{grid-template-columns:1fr 1fr}
  .footer-inner .footer-nav{gap:18px}
}