/* Keep photo navigation visible; preserve complete stories at small/zoomed sizes. */
dialog{max-height:calc(100dvh - 32px);padding:36px 26px 20px;box-sizing:border-box;overflow:auto}
dialog .dialog-close{position:sticky;top:0;z-index:2}
dialog h2{font-size:clamp(23px,3vw,34px);margin:5px 0 12px}
dialog p{line-height:1.5}
.simple-slideshow{min-width:0;margin:0}
.simple-slideshow>img{height:min(40dvh,320px);width:100%;object-fit:contain}
.simple-slide-controls{margin:8px 0 0;min-height:38px}
#personal-dialog:has(.simple-slideshow){max-width:900px}
#personal-dialog-content:has(.simple-slideshow){display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:8px 24px}
#personal-dialog-content>.dialog-label,#personal-dialog-content>h2{grid-column:1/-1}
#personal-dialog-content>.chapter-story{margin:0;font-size:14px;max-height:calc(100dvh - 190px);overflow:auto}
#personal-dialog-content>.simple-slideshow{grid-column:2;grid-row:3;align-self:center}
#portrait-dialog img,#event-gallery-image{max-height:65dvh;width:100%;object-fit:contain}
#project-dialog:has(.simple-slideshow){max-width:1000px}
#dialog-content:has(.simple-slideshow){display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:24px;align-items:center}
.project-story{max-height:calc(100dvh - 160px);overflow:auto;padding-right:8px}
@media(max-width:600px){
 dialog{width:calc(100% - 20px);padding:35px 16px 14px;max-height:calc(100dvh - 20px)}
 #personal-dialog-content:has(.simple-slideshow),#dialog-content:has(.simple-slideshow){display:flex;flex-direction:column;gap:7px;max-height:calc(100dvh - 110px)}
 #personal-dialog-content>.chapter-story,.project-story{font-size:14px;line-height:1.45;min-height:0;overflow:auto;max-height:none;flex:1 1 auto;width:100%}
 #personal-dialog-content>.dialog-label{margin:0;font-size:10px}
 #personal-dialog-content>h2{margin:0;font-size:23px;flex-shrink:0}
 .simple-slideshow{width:100%;flex:0 0 auto}
 .simple-slideshow>img{height:min(27dvh,210px)}
 .simple-slide-controls{gap:8px;margin-top:5px}
 .simple-slide-controls p{font-size:10px}
 #portrait-dialog img,#event-gallery-image{max-height:60dvh}
}
@media(max-height:520px){.simple-slideshow>img{height:30dvh}.project-story{max-height:calc(100dvh - 160px)}}
/* Align each photo with the chapter heading and give the close control breathing room. */
dialog .dialog-close{display:block;width:44px;height:44px;margin:0 0 14px;right:auto}
@media(min-width:601px){
 #personal-dialog-content:has(.simple-slideshow){grid-template-rows:auto auto 1fr;align-items:start}
 #personal-dialog-content>.dialog-label,#personal-dialog-content>h2{grid-column:1}
 #personal-dialog-content>.simple-slideshow{grid-column:2;grid-row:2/4;align-self:start;margin-top:5px}
 #dialog-content:has(.simple-slideshow){align-items:start}
 .simple-slideshow>img{object-position:center top}
}
@media(max-width:600px){dialog .dialog-close{margin-bottom:10px}.simple-slideshow>img{height:min(25dvh,195px)}}