/* Page banner with a real photo (2026-10-12, PLAN 2b step 6). Only the 15 .ph-top pages load it, after styles.css.
   Text on flat navy (.page-hero stays on the text for main.js); photo beside it from 761px, from the header line to the
   band's bottom, up to 1.35x as tall as wide; under the text at 4:3 on phones. Box sized by CSS, img absolute: CLS 0.
   The banner <picture> is display:block (styles.css has picture{display:contents}). Kept terse: it is render-blocking. */
.ph-top{display:grid;grid-template-columns:minmax(0,7fr) minmax(0,5fr);background:var(--navy-700)}
.ph-top>.page-hero{background:none;min-width:0;display:flex;flex-direction:column;justify-content:center}
.ph-top .page-hero__in{max-width:none;margin:0;width:auto;padding-left:max(22px,calc((100vw - var(--container))/2 + 22px));padding-right:clamp(28px,3.4vw,52px)}
.ph-top .page-hero h1{font-size:clamp(2.1rem,3.4vw,3.15rem);font-weight:700;letter-spacing:-.02em;line-height:1.08}
.ph-top .page-hero p{font-size:1.08rem;line-height:1.6}
.ph-photo{position:relative;margin:0;align-self:end;height:calc(100% - var(--header-h));min-height:340px;max-height:calc(100vw*5/12*1.35);overflow:hidden;background:var(--navy-800)}
.ph-photo picture{display:block;position:absolute;inset:0}
.ph-photo img{display:block;width:100%;height:100%;max-width:none;object-fit:cover;object-position:var(--pos,50% 50%)}
.ph-photo figcaption{position:absolute;left:18px;bottom:18px;z-index:1;max-width:min(42ch,calc(100% - 36px));background:#efe7da;color:var(--navy-700);font-size:.88rem;line-height:1.45;padding:7px 11px;border-radius:3px}
.ph-photo--cap-top figcaption{top:18px;bottom:auto}
@media (min-width:761px) and (max-width:1023px){
.ph-photo figcaption{left:12px;bottom:12px;max-width:calc(100% - 24px);font-size:.8rem;padding:5px 9px}
.ph-photo--cap-top figcaption{top:12px;bottom:auto}}
@media (max-width:760px){
.ph-top{grid-template-columns:minmax(0,1fr)}
.ph-top .page-hero__in{padding-left:22px;padding-right:22px}
.ph-top .page-hero h1{font-size:2rem}
.ph-top .page-hero p{font-size:1rem}
.ph-photo{height:auto;min-height:0;max-height:none;aspect-ratio:4/3}
.ph-photo img{object-position:var(--pos-m,var(--pos,50% 50%))}
.ph-photo{aspect-ratio:auto;overflow:visible;background:none}
.ph-photo picture{position:relative;inset:auto;aspect-ratio:4/3;overflow:hidden}
.ph-photo figcaption,.ph-photo--cap-top figcaption{position:static;max-width:none;background:none;color:#d9e0f0;font-size:.82rem;line-height:1.45;padding:9px 22px 18px;border-radius:0}}