/* Flexible layouts for phones, split windows and both iPhone Duo displays.
   Layout follows the available space; resizing never replaces page content. */
:root{--field-border:#929798;--safe-left:env(safe-area-inset-left,0px);--safe-right:env(safe-area-inset-right,0px)}
html{-webkit-text-size-adjust:100%;text-size-adjust:100%}
.frame{padding-left:max(var(--gutter),var(--safe-left));padding-right:max(var(--gutter),var(--safe-right))}
.header{padding-top:env(safe-area-inset-top,0px)}
.footer{padding-bottom:max(24px,env(safe-area-inset-bottom,0px))}
button,a,summary{touch-action:manipulation}
button,input,select,textarea{max-width:100%}
.text-button,.document-open,.project-summary summary{min-height:44px}
.text-button,.document-open{align-content:center}
.footer-bottom>a{min-height:44px;display:inline-flex;align-items:center}
.section,.leadership{min-height:0}
.orientation-grid>*,.news-layout>*,.community-grid>*,.resources-grid>*,.project-grid>*,.leadership-heading>*,.form-row>*,.document-heading>*{min-width:0}
.orientation-grid{grid-template-columns:minmax(0,1.1fr) minmax(0,.9fr)}
.news-layout{grid-template-columns:minmax(0,1.05fr) minmax(0,.95fr)}
.community-grid{grid-template-columns:minmax(0,1.08fr) minmax(0,.92fr)}
.resources-grid{grid-template-columns:minmax(0,1fr) minmax(0,1.1fr)}
.project-grid{grid-template-columns:minmax(0,1.15fr) minmax(0,.85fr)}
.leadership-heading{grid-template-columns:minmax(0,1fr) minmax(0,1.12fr)}
.form-row{grid-template-columns:repeat(auto-fit,minmax(min(100%,15.5rem),1fr))}
.filters,.hero-foot{flex-wrap:wrap}
.presentation-choice{min-width:0}
.project-documents{container-type:inline-size}
.presentation-controls{display:grid;grid-template-columns:auto minmax(0,1fr) auto;gap:16px}
.presentation-controls .button{justify-content:center}
.presentation-choice select{height:auto;min-height:54px}
.presentation-slide+.presentation-slide{margin-top:0}
.presentation-hint,.presentation-status,.document-open,.leadership-team dd,.leadership-team dt{overflow-wrap:anywhere}
.presentation-hint{max-width:none}
dialog{max-height:calc(100dvh - 32px - env(safe-area-inset-top,0px) - env(safe-area-inset-bottom,0px))}
.dialog-header{align-items:center}
.dialog-close{flex-shrink:0;min-width:44px}

@container(max-width:640px){
  .presentation-controls{grid-template-columns:1fr 1fr}
  .presentation-choice{grid-column:1/-1;grid-row:1;order:0}
  .presentation-controls .button{width:100%}
}

/* Keep the navigation usable before desktop links begin to crowd. */
@media(max-width:1000px){
  .nav-wrap{height:88px}
  .brand{height:78px;width:181px}
  .brand img{width:202px;margin-left:-10px}
  .menu-toggle{display:flex;align-items:center;gap:14px;min-height:48px;background:none;padding:10px 0;font-size:15px;font-weight:700}
  .menu-lines{width:24px;height:12px;border-top:2px solid currentColor;border-bottom:2px solid currentColor}
  nav{display:none;position:absolute;top:100%;left:0;right:0;background:var(--paper);padding:12px max(var(--gutter),var(--safe-right)) 24px max(var(--gutter),var(--safe-left));align-items:stretch;gap:4px;max-height:calc(100dvh - 88px - env(safe-area-inset-top,0px));overflow-y:auto;overscroll-behavior:contain}
  nav.is-open{display:flex;flex-direction:column}
  nav>a:not(.button){min-height:48px;padding-block:12px}
  nav .button{margin-top:12px;max-width:none;justify-content:space-between}
  .form-bottom{align-items:flex-start;flex-wrap:wrap;gap:20px}
  .document-heading{align-items:flex-start;flex-direction:column;gap:22px}
  .leadership-team{grid-template-columns:repeat(2,minmax(0,1fr));gap:32px;margin-top:56px}
  .leadership-team::before,.leadership-team>div::before{display:none}
  .leadership-presidency::after{height:32px}
  .leadership-team dt{min-height:48px}
  .leadership-team dd{font-size:28px}
  .footer-bottom .text-button{padding-block:10px}
}

@media(max-width:700px){
  :root{--gutter:20px}
  .orientation-grid,.news-layout,.community-grid,.resources-grid,.project-grid{display:grid;grid-template-columns:minmax(0,1fr);gap:32px}
  .justice-figure{display:none}
  .section-top{display:block}
  .section-top>p,.section-top>div{margin-top:24px;max-width:48ch}
  .project-grid{margin-top:32px}
  .community-image{aspect-ratio:1.45}
  .resources figure img{aspect-ratio:1.5}
  .resource-list{width:100%}
  .news-layout.filtered-analysis .feature-story,.news-layout.filtered-news .news-stories{display:block}
  .news-layout.filtered-analysis .feature-story img{aspect-ratio:1.65}
  .news-layout.filtered-news .news-story+.news-story{margin-top:32px}
  .project-documents{padding:24px 20px}
  .document-heading .button{width:100%;gap:16px}
  .presentation-controls{grid-template-columns:1fr 1fr;gap:12px}
  .presentation-choice{grid-column:1/-1;grid-row:1;order:0}
  .leadership-heading{display:block}
  .leadership-heading h2{font-size:clamp(42px,10vw,60px)}
  .leadership-logo{width:200px;margin:28px 0 22px}
  .faq-row{grid-template-columns:1fr;gap:18px}
  .faq-row p{margin-top:0}
  .footer-top{display:block}
  .footer-top>p{margin-top:12px}
  .footer-top>.button{margin-top:28px}
  .footer-bottom{align-items:flex-start;flex-direction:column;gap:12px}
}

/* Expanded portrait: use the extra width for choices and the team directory. */
@media(min-width:561px) and (max-width:700px){
  .topic-list{grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}
  .topic-list button{min-height:64px;font-size:15px;padding:12px}
  .leadership-team{grid-template-columns:repeat(2,minmax(0,1fr))}
  .leadership-team dt{min-height:48px}
}

@media(max-width:560px){
  .leadership-team{grid-template-columns:1fr;gap:30px}
  .leadership-team dt{min-height:0}
  .hero-foot{font-size:12px}
  .hero h1{font-size:clamp(38px,12.6vw,70px)}
  .hero-bottom{padding-inline:max(20px,var(--safe-left)) max(20px,var(--safe-right))}
}

/* Short outer screens retain a complete title and a reachable first action. */
@media(max-width:1000px) and (max-height:650px){
  .nav-wrap{height:76px}
  .brand{height:70px}
  nav{max-height:calc(100dvh - 76px - env(safe-area-inset-top,0px))}
  .hero h1{padding-block:32px 34px}
  .hero-bottom{padding-top:28px;padding-bottom:22px;gap:20px}
  .hero-foot{padding-top:20px;margin-top:4px}
  .section{padding-block:56px}
}

/* Open landscape and rotated phones: a compact two-panel opening. */
@media(min-width:540px) and (max-width:1000px) and (max-height:650px){
  .hero{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);align-items:stretch}
  .hero h1{display:flex;flex-direction:column;justify-content:center;font-size:clamp(36px,6.8vw,68px);padding:32px 20px 36px max(20px,var(--safe-left));line-height:1.04}
  .hero-bottom{padding:32px max(20px,var(--safe-right)) 26px 20px;gap:22px;justify-content:center}
  .hero-bottom>p{font-size:16px;max-width:34ch}
  .hero-bottom>p br{display:none}
  .hero-bottom>.button{gap:16px;max-width:100%;padding-inline:16px}
  .hero-foot{padding-top:8px;gap:10px;font-size:11px}
  .hero-foot span:last-child{max-width:24ch;text-align:right}
}

@media(max-width:360px){
  :root{--gutter:16px}
  .nav-wrap{gap:12px}
  .brand{width:159px}
  .brand img{width:178px;margin-left:-9px}
  .menu-toggle{font-size:14px;gap:10px}
  .hero-foot{font-size:11px;gap:10px}
  .hero h1{padding-inline:16px}
  .project-documents{padding:22px 16px}
  .prepare-heading,form,.result{padding-inline:16px}
  .leadership-presidency{padding-inline:20px}
  .leadership-presidency h3{font-size:29px}
  .filters button{padding-inline:13px}
  .news-story+.news-story{margin-inline:calc(-1 * var(--gutter));padding-inline:var(--gutter)}
}