/* Each photograph owns its framing, including both sides of a crossfade. */
img[src*="assets/couple"]{--photo-position:50% 0%}
img[src*="assets/portrait"]{--photo-position:50% 0%}
img[src*="assets/wedding"]{--photo-position:48% 32%}
img[src*="assets/editorial"]{--photo-position:52% 34%}
img[src*="assets/family"]{--photo-position:50% 12%}
img[src*="assets/ride"]{--photo-position:48% 35%}
img[src*="assets/natalia"]{--photo-position:50% 12%}
.cover-big{left:auto;width:min(64%,1240px)}
.cover-big img,.cover-big .motion-cover-ghost{object-position:var(--photo-position,50% 50%)}
.cover-small{width:min(19%,310px)}
.cover-small img,.cover-small .motion-cover-ghost{object-fit:contain;object-position:center top}
.photo-work img,.photo-work:nth-child(6n+1) img,.photo-work:nth-child(6n+6) img{aspect-ratio:3/4;height:auto;object-position:var(--photo-position,50% 50%)}
.photo-work img[src*="assets/family"]{aspect-ratio:361/640}
.photo-work img[src*="assets/couple"]{aspect-ratio:1024/1365}
.chapter-detail img,.journey-detail img,.client-photo img,.archive-photo-stack img{object-position:var(--photo-position,50% 50%)}
.image-break{background:var(--dark);height:min(860px,85vw);min-height:620px;max-height:none}
.image-break>img{left:42%;width:58%;height:100%;object-fit:contain;object-position:center}
.image-break:after{background:none;pointer-events:none}
.image-break-copy{width:46%;padding-left:8%;padding-right:2%}
.image-break h2{font-size:clamp(74px,7.8vw,150px)}
.image-break .handwritten{margin-left:0;font-size:clamp(25px,2.2vw,40px)}
.image-break-index{right:5%}

/* Stable navigation dimensions at every active/hover state. */
.photo-header{height:100px;gap:24px}
.photo-header nav{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:12px;width:min(40vw,620px);align-items:center}
.photo-header nav a{display:flex;align-items:center;justify-content:center;text-align:center;min-height:48px;padding:8px 4px;font-size:14px;line-height:1.45}
.photo-header-tools{gap:20px;flex-shrink:0}
.header-controls{display:flex;align-items:center;gap:12px}
.photo-header .langs{gap:4px}
.photo-header .langs button{width:32px;min-width:32px;height:44px;font-size:11px;padding:0;border-bottom:2px solid transparent}
.photo-header .langs button.active{border-bottom-color:var(--paper)}
.photo-header .client-btn{min-height:44px;font-size:12px}
.photo-header .mobile-toggle{width:44px;height:44px;align-items:center;justify-content:center}
.mood-selector{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));width:min(480px,100%);gap:24px}
.mood-selector button,.mood-selector button.active{min-width:0;min-height:64px;padding:12px 0 10px;border-top:2px solid #ffffff55;font-size:13px;line-height:1.4;gap:7px}
.mood-selector button.active{border-top-color:var(--paper)}
.mood-selector small{font-size:10px}
.cover-portfolio,.cover-scroll{min-height:44px}
.modal-head .round{width:44px;height:44px;min-width:44px;flex-shrink:0}
html{scroll-padding-top:24px;scrollbar-gutter:stable}
section[id],details[id]{scroll-margin-top:20px}

/* Navigation belongs to the image stage, never to a variable-length caption. */
.lightbox .modal-head{height:90px;min-height:90px;padding:16px 24px;gap:18px}
.lightbox .modal-head h2{font-size:24px;line-height:1.25}
.lightbox-body{grid-template-columns:minmax(0,1fr) 280px;align-items:start}
.lightbox-stage{position:relative;min-width:0;height:min(70dvh,900px);background:#1c1c1b}
.lightbox-stage>img{width:100%;height:100%;object-fit:contain;object-position:center;touch-action:pan-y pinch-zoom;user-select:none;-webkit-user-select:none}
.lightbox-stage .lightbox-controls{position:absolute;left:0;top:50%;width:100%;display:flex;justify-content:space-between;transform:translateY(-50%);padding:0 12px;pointer-events:none}
.lightbox-stage .lightbox-controls button{width:48px;height:48px;background:#201c19d9;border-color:#ffffff70;color:#fff;pointer-events:auto;backdrop-filter:blur(4px)}
.lightbox-stage .lightbox-controls button:hover{background:#703c4d}
.lightbox-side{min-width:0}
@media(min-width:1600px){
 .cover-small{height:34%;top:8%}
}
@media(max-width:1200px){
 .photo-header nav{display:none;position:absolute;top:100%;left:0;right:0;width:100%;padding:18px 5%;background:var(--dark);border-bottom:1px solid #ffffff40}
 .photo-header nav.open{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:12px}
 .photo-header .mobile-toggle{display:flex}
 .cover{height:calc(100svh - 100px)}
}
@media(min-width:701px) and (max-width:1000px){
 .cover-big{width:65%}
 .cover-small{width:21%}
 .cover-sub{align-items:flex-end}
 .cover-actions{flex-direction:column;align-items:flex-end;gap:12px}
 .image-break-copy{width:45%;padding-left:6%}
 .image-break h2{font-size:clamp(58px,8vw,80px)}
}
@media(max-width:700px){
 .photo-header{height:134px;display:grid;grid-template-columns:minmax(0,1fr) auto;grid-template-rows:64px 44px;padding:12px 6% 14px;gap:0 12px;align-items:center}
 .photo-header>a{grid-column:1/-1;grid-row:1;justify-self:start}
 .photo-header-tools{display:contents}
 .photo-header-tools .langs{grid-column:1;grid-row:2;justify-content:flex-start;gap:4px}
 .photo-header .langs button{width:40px;min-width:40px;height:44px}
 .header-controls{grid-column:2;grid-row:2;gap:8px}
 .photo-header .client-btn,.photo-header .mobile-toggle{display:flex;width:44px;height:44px;min-height:44px;padding:0;justify-content:center;align-items:center}
 .photo-header .client-btn span{display:none}
 .photo-header nav.open{grid-template-columns:1fr 1fr;padding:16px 6%;gap:8px 16px}
 .photo-header nav a{justify-content:flex-start;text-align:left;min-height:48px;font-size:14px;border-bottom:1px solid #ffffff25}
 .cover{height:845px;min-height:0;max-height:none}
 .cover-big{left:21%;right:0;bottom:210px;width:auto}
 .cover-big img[src*="assets/couple"]{--photo-position:56% 0%}
 .cover-small{left:6%;top:80px;width:28%;height:160px}
 .cover-small img,.cover-small .motion-cover-ghost{object-fit:contain}
 .mood-selector{width:100%;gap:16px}
 .mood-selector button,.mood-selector button.active{font-size:12px;min-height:62px}
 .mood-selector small{font-size:9px}
 .cover-bottom{bottom:24px}
 .image-break{height:760px;min-height:0}
 .image-break>img{left:0;top:0;width:100%;height:540px;object-fit:contain;object-position:center top}
 .image-break-copy{position:absolute;bottom:0;width:100%;height:235px;padding:25px 6% 30px;justify-content:flex-end;background:var(--dark)}
 .image-break h2{font-size:50px;margin:14px 0 12px;line-height:.95}
 .image-break h2 br{display:none}
 .image-break .handwritten{font-size:23px;margin:0}
 .image-break .round{position:absolute;right:6%;bottom:32px;margin:0}
 .image-break-index{display:none}
 .lightbox .modal-head{height:90px;min-height:90px;padding:14px 16px}
 .lightbox .modal-head h2{font-size:19px;line-height:1.3}
 .lightbox .workspace-bar{gap:8px}
 .lightbox .workspace-bar .text-link{font-size:10px;max-width:72px;line-height:1.35}
 .lightbox-body{grid-template-columns:1fr;padding:12px 16px 24px;gap:22px}
 .lightbox-stage{height:clamp(300px,56dvh,620px)}
 .lightbox-stage .lightbox-controls{padding:0 7px}
 .lightbox-stage .lightbox-controls button{width:44px;height:44px}
}
@media(max-width:350px){
 .photo-header{padding-left:5%;padding-right:5%;column-gap:8px}
 .photo-header .langs{gap:2px}
 .image-break{height:680px}
 .image-break>img{height:450px}
 .image-break h2{font-size:42px}
 .image-break .handwritten{font-size:20px;max-width:210px}
}