:root{--accent:var(--photo)}
/* smaller type than the other sites so the photographs lead */
h1{font-size:clamp(34px,4.5vw,62px)}
h2{font-size:clamp(26px,3.2vw,42px)}

.hero-grid{display:grid;grid-template-columns:minmax(0,4fr) minmax(0,7fr);gap:clamp(32px,5vw,64px);align-items:center}
.hero-img{width:100%;height:auto;background:var(--raised)}
@media (max-width:860px){.hero-grid{grid-template-columns:1fr}}

/* Justified rows: every photo keeps its own proportions, each row fills the width, and photos read left to right
   in Henry's order. A figure grows in proportion to its width/height ratio (--ratio, set from the photo data),
   so every photo in a row ends up the same height. */
.gallery{--row:150px;display:flex;flex-wrap:wrap;gap:10px}
.gallery::after{content:"";flex-grow:10000000}
/* grow is the ratio x100: a lone narrow photo in a row (ratio under 1) would otherwise claim only part of the leftover space */
.gallery figure{margin:0;flex:calc(var(--ratio) * 100) 1 calc(var(--ratio) * var(--row));min-width:0}
.gallery button{all:unset;display:block;width:100%;cursor:zoom-in}
.gallery button:focus-visible{outline:2px solid var(--accent);outline-offset:3px}
.gallery img{width:100%;height:auto;background:var(--raised);transition:opacity .3s}
.gallery button:hover img{opacity:.85}
.gallery figcaption{padding-top:8px;font:500 12px var(--label);color:var(--muted)}
@media (min-width:700px){.gallery{--row:220px;gap:16px}}
@media (min-width:1280px){.gallery{--row:260px}}
.show-more{margin-top:24px;padding:0;background:none}
.show-more:hover{background:none;text-decoration:underline}
.show-more::after{content:"↓";content:"↓" / "";color:var(--accent)}
/* Highlights is a short, hand-picked set, so its last row may stretch to the full width too */
#highlightsGallery::after{content:none}

.portfolio-head{padding-bottom:28px}
.gal-section{padding-top:56px}
.gal-section:first-child{padding-top:0}
.gal-head{display:flex;flex-wrap:wrap;align-items:baseline;justify-content:space-between;gap:12px;margin-bottom:24px}
.gal-head p{max-width:520px;color:var(--muted);font-size:15px}
.filterbar{background:var(--ground);z-index:4}
.filterbar .in{max-width:1440px;margin:0 auto;padding:14px var(--pad);display:flex;flex-wrap:wrap;align-items:center;gap:12px 32px}
.seg>span{margin-right:10px}
/* on phones each filter group is one swipeable row instead of a tall stack of buttons */
/* the group label sits on its own line on phones so the options wrap under it */
@media (max-width:699px){.seg>span{flex-basis:100%}}
.showing{margin-left:auto;font-size:14px;color:var(--soft)}
.showing b{color:var(--accent);font-weight:700}
.empty-note{padding:48px 0;color:var(--muted)}
@media (min-width:900px){.filterbar{position:sticky;top:var(--hdr,80px)}}

.svc{display:flex;flex-direction:column;background:var(--ground);border:1px solid var(--line)}
.svc img{width:100%;height:auto;aspect-ratio:3/2;object-fit:cover;background:var(--raised)}
.svc .body{display:flex;flex-direction:column;gap:14px;padding:26px;flex:1}
.svc p{color:var(--soft)}
.svc ul{margin:0;padding:16px 0 0;list-style:none;border-top:1px solid var(--line);display:flex;flex-direction:column;gap:8px;color:var(--soft)}
.svc .btn{margin-top:auto}
.print-note{color:var(--soft)}
.print-note a{color:var(--accent)}

dialog.lightbox{padding:0;border:0;background:transparent;color:var(--text);max-width:min(1200px,94vw);max-height:94vh}
dialog.lightbox::backdrop{background:rgba(0,0,0,.9)}
dialog.lightbox figure{margin:0;display:grid;justify-items:center;gap:10px}
/* the <picture> wrappers add no box of their own, so the image stays the grid or button's direct child */
.gallery picture,dialog.lightbox picture{display:contents}
dialog.lightbox img{max-height:76vh;width:auto;transition:opacity .2s}
dialog.lightbox.loading img{opacity:.35}
dialog.lightbox figcaption{display:flex;flex-wrap:wrap;justify-content:space-between;gap:4px 16px;width:100%;font-size:14px;color:var(--soft)}
dialog.lightbox .lb-count{font:500 13px var(--label);color:var(--muted)}
dialog.lightbox .lb-bar{display:flex;justify-content:space-between;gap:12px;padding-top:12px}

.step-title{font-size:clamp(24px,3vw,34px)}