/* Personal photography, presented in its original proportions. */
.photography-preview{border-top:1px solid var(--rule);padding:48px 0 70px;scroll-margin-top:100px}
.photography-preview-head{display:flex;justify-content:space-between;align-items:flex-end;gap:30px;margin-bottom:32px}
.photography-preview h2{font:clamp(38px,4.5vw,66px)/1.02 var(--serif);letter-spacing:-.025em;margin-top:18px}
.photography-preview-head .text-link{margin-bottom:5px;white-space:nowrap}
.photography-preview-pair{display:grid;grid-template-columns:1fr 1fr;gap:28px;align-items:center}
.photography-preview-pair a{display:block;min-width:0}
.photography-preview-pair img{width:100%;height:auto}
.photography-preview-pair .under-image{color:var(--muted);font-size:10px;line-height:1.6}
.photography-preview-pair a:hover .under-image{color:var(--wine)}
.client-logo-row{grid-template-columns:repeat(4,minmax(0,1fr))}
.client-design-milk img{width:125px;height:auto;max-height:70px;object-fit:contain;filter:brightness(0)}
.client-logo-row .client-design-milk span{font-size:9px;letter-spacing:.08em;text-transform:uppercase;text-align:center;max-width:none;color:var(--muted)}
.about.about-with-portrait{grid-template-columns:36% 1fr;gap:7%;align-items:center;padding:62px 0 70px}
.about-with-portrait .about-label{justify-content:flex-start;gap:22px}
.about-portrait{max-width:440px;width:100%}
.about-portrait img{width:100%;height:auto}
.about-portrait figcaption{display:flex;justify-content:space-between;gap:16px;font-size:10px;line-height:1.5;margin-top:12px;color:var(--muted)}
.about-with-portrait h2{font-size:clamp(35px,4.2vw,64px)}
.photography-preview-pair .photo-preview-caption{display:grid;grid-template-columns:24px 1fr;justify-content:start;gap:12px;align-items:baseline}
html:has(.photography-page){scrollbar-gutter:stable}
.photo-page-head{padding:48px 0 40px}
.photo-page-head .case-description{grid-template-columns:1fr 1fr;align-items:end}
.photo-page-head .case-description>p{max-width:360px}
.photo-page-note{font-size:10px;color:var(--muted);text-align:right}
.photo-toolbar{display:flex;align-items:center;justify-content:space-between;gap:20px;border-top:1px solid var(--rule);padding:10px 0;margin:5px 0 36px;scroll-margin-top:90px}
.photo-total{font-size:10px;color:var(--muted);font-variant-numeric:tabular-nums}
.photo-view-options{display:flex;align-items:center;gap:36px}
.photo-view-options[hidden]{display:none}
.photo-layout-switch{display:flex;gap:18px}
.photo-toolbar button{border:0;background:transparent;font-size:11px;min-height:44px;padding:8px 0}
.photo-layout-switch button{color:var(--muted);position:relative}
.photo-layout-switch button[aria-pressed="true"]{color:var(--wine)}
.photo-layout-switch button[aria-pressed="true"]:after{content:"";position:absolute;left:0;right:0;bottom:5px;height:1px;background:currentColor}
.photo-enter{display:flex;align-items:center;gap:22px}
.photo-enter span{font-size:16px}
.photo-sequence{padding-bottom:10px}
.photo-work{min-width:0;scroll-margin-top:104px}
.photo-work .image-button{display:block;width:100%;padding:0;border:0;background:transparent;transform-origin:0 0;cursor:zoom-in}
.photo-work img{width:100%;height:auto}
.photo-work .image-action{font-size:18px;transition:background .2s,color .2s}
.photo-work .image-button:hover .image-action{background:var(--wine);color:var(--paper)}
.photo-work figcaption{display:grid;grid-template-columns:24px minmax(0,1fr);gap:12px;align-items:baseline;margin-top:13px;color:var(--muted)}
.photo-number{font-size:10px;color:var(--muted);font-variant-numeric:tabular-nums;line-height:1.6}
.photo-work figcaption p{font-size:10px;line-height:1.6}
.photo-work .photo-camera{display:block;margin-top:3px;font-size:9px;line-height:1.5;color:var(--muted)}
.photo-opening{width:86%;margin:0 auto 88px}
.photo-color-pair{display:grid;grid-template-columns:1fr 1fr;gap:4%;align-items:center;margin-bottom:100px}
.photo-interlude{width:76%;margin:0 auto 100px}
.photo-place-pair{display:grid;grid-template-columns:35% 56%;justify-content:space-between;align-items:center;margin:0 4% 100px}
.photo-form-pair{display:grid;grid-template-columns:1.15fr 1fr;gap:8%;align-items:center;margin-bottom:100px}
.photo-swans{max-width:493px;justify-self:end}
/* The larger portrait is centered beside the horizontal photograph. */
.photo-memorial-pair{display:grid;grid-template-columns:minmax(0,1.37fr) minmax(0,1fr);gap:clamp(48px,8vw,96px);align-items:center;width:100%;max-width:1100px;margin:0 auto 70px}
.photo-sequence.is-index{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:52px 4%;align-items:center;padding:8px 0 50px}
.photo-sequence.is-index>div{display:contents}
.photo-sequence.is-index .photo-work{width:100%;max-width:none;margin:0;justify-self:stretch}
.photo-sequence.is-index .photo-place-pair .photo-work:first-child{width:72%;justify-self:center}
.photo-sequence.is-index .image-action{opacity:0}
.photo-sequence.is-index .image-button:hover .image-action,.photo-sequence.is-index .image-button:focus-visible .image-action{opacity:1}
.photography-page .project-pagination{margin-top:40px}

/* The image travels into the dialog's top layer, retaining its full composition. */
.photo-viewer{position:fixed;inset:0;margin:0;padding:0;border:0;max-width:none;max-height:none;width:100%;height:100vh;height:100dvh;background:transparent;color:var(--ink);overflow:hidden}
.photo-viewer[open]{display:block}
.photo-viewer::backdrop{background:transparent}
.viewer-paper{position:absolute;inset:0;background:var(--paper)}
.viewer-shell{position:relative;z-index:1;display:grid;grid-template-rows:auto minmax(0,1fr) auto auto;gap:0;height:100%;padding:10px clamp(22px,4vw,64px) 16px}
.viewer-top{min-height:56px;display:flex;align-items:center;justify-content:space-between;gap:20px}
.viewer-credit{font-size:10px;color:var(--muted)}
.viewer-close{display:flex;align-items:center;gap:18px;padding:8px 0 8px 12px;border:0;background:transparent;font-size:11px;min-height:44px}
.viewer-close span{font:28px/1 var(--sans)}
.viewer-stage{position:relative;min-height:0;touch-action:pan-y pinch-zoom}
.viewer-image,.viewer-outgoing{position:absolute;max-width:none;max-height:none;object-fit:contain;user-select:none;-webkit-user-drag:none;transform-origin:center}
.viewer-flight{position:fixed;z-index:3;max-width:none;max-height:none;object-fit:contain;pointer-events:none;transform-origin:0 0}
.viewer-meta{display:flex;justify-content:space-between;gap:20px;align-items:center;min-height:68px}
.viewer-caption{display:grid;grid-template-columns:26px minmax(0,1fr);gap:12px;align-items:baseline;font-size:11px;line-height:1.5}
.viewer-number{color:var(--muted);font-variant-numeric:tabular-nums}
.viewer-camera{display:block;margin-top:3px;font-size:9px;line-height:1.5;color:var(--muted)}
.viewer-nav{display:flex;align-items:center;gap:16px;flex-shrink:0}
.viewer-nav button{width:44px;height:44px;padding:0;border:0;background:transparent;font-size:23px}
.viewer-nav button:hover{color:var(--wine)}
.viewer-count{font-size:10px;color:var(--muted);font-variant-numeric:tabular-nums;min-width:42px;text-align:center}
.viewer-thumbnails{position:relative;display:flex;justify-content:center;align-items:center;gap:8px;overflow-x:auto;overscroll-behavior:contain;padding:4px 4px 8px;scrollbar-width:thin;min-height:60px;border-top:1px solid var(--rule)}
.viewer-thumb{position:relative;width:56px;height:48px;flex:0 0 56px;display:flex;align-items:center;justify-content:center;border:0;background:transparent;padding:5px 2px;opacity:.48;transition:opacity .2s}
.viewer-thumb img{width:100%;height:100%;object-fit:contain;pointer-events:none}
.viewer-thumb:hover,.viewer-thumb[aria-current="true"]{opacity:1}
.viewer-thumb[aria-current="true"]:after{content:"";height:1px;position:absolute;bottom:0;left:2px;right:2px;background:var(--wine)}
.viewer-thumb:focus-visible{outline-offset:0}

@media(max-width:1000px){
 .photo-opening{width:94%;margin-bottom:65px}
 .photo-interlude{width:84%;margin-bottom:75px}
 .photo-place-pair{margin-left:0;margin-right:0;grid-template-columns:38% 56%}
 .about.about-with-portrait{grid-template-columns:40% 1fr;gap:6%}
 .about-with-portrait h2{font-size:42px}
}
@media(max-width:760px){
 .photography-preview{padding:32px 0 45px}
 .photography-preview-head{align-items:flex-start;flex-direction:column;gap:18px;margin-bottom:25px}
 .photography-preview h2{font-size:38px;margin-top:14px}
 .photography-preview h2 br{display:none}
 .photography-preview-head .text-link{margin:0}
 .photography-preview-pair{grid-template-columns:1fr;gap:28px}
 .photography-preview-pair .under-image{font-size:10px;gap:12px}
 .client-logo-row{grid-template-columns:repeat(2,minmax(0,1fr));gap:20px 12px}
 .client-design-milk img{width:100px;max-height:58px}
 .about.about-with-portrait{grid-template-columns:1fr;gap:28px;padding:35px 0 45px}
 .about-with-portrait .about-label{gap:20px}
 .about-portrait{max-width:100%}
 .about-with-portrait h2{font-size:36px}
 .about-portrait figcaption{font-size:9px}
 .photo-page-head{padding:28px 0 30px}
 .photo-page-head .case-description{grid-template-columns:1fr;gap:16px}
 .photo-page-note{text-align:left;font-size:10px}
 .photo-toolbar{gap:10px;flex-wrap:wrap;margin-bottom:25px;padding:8px 0}
 .photo-total{width:100%}
 .photo-view-options{justify-content:space-between;width:100%;gap:15px}
 .photo-enter{gap:15px}
 .photo-opening,.photo-interlude{width:100%;margin:0 0 45px}
 .photo-color-pair,.photo-place-pair,.photo-form-pair{grid-template-columns:1fr;gap:38px;margin:0 0 45px}
 .photo-memorial-pair{grid-template-columns:1fr;gap:52px;margin:0 auto 45px}
 .photo-sequence:not(.is-index) .photo-memorial-pair .photo-work:last-child{width:82%;justify-self:end}
 .photo-place-pair .photo-work:first-child{width:84%;justify-self:center}
 .photo-swans{max-width:100%;justify-self:auto}
 .photo-work figcaption{margin-top:12px;gap:10px;grid-template-columns:22px minmax(0,1fr)}
 .photo-sequence.is-index{grid-template-columns:repeat(2,minmax(0,1fr));gap:32px 18px;padding-bottom:20px}
 .photo-sequence.is-index .photo-place-pair .photo-work:first-child{width:84%}
 .photo-sequence.is-index figcaption{gap:6px;grid-template-columns:18px minmax(0,1fr)}
 .photo-sequence.is-index figcaption p,.photo-sequence.is-index .photo-number{font-size:9px}
 .photography-page .project-pagination{margin-top:15px}
 .viewer-shell{padding:6px 18px max(12px,env(safe-area-inset-bottom));grid-template-rows:auto minmax(0,1fr) auto auto}
 .viewer-top{min-height:54px}
 .viewer-credit{font-size:9px}
 .viewer-close{font-size:10px;gap:12px}
 .viewer-meta{min-height:86px;align-items:center;gap:8px}
 .viewer-caption{font-size:10px;grid-template-columns:20px minmax(0,1fr);gap:8px;max-width:65%}
 .viewer-nav{gap:0}
 .viewer-nav button{width:40px;min-height:44px}
 .viewer-count{min-width:37px;font-size:9px}
 .viewer-thumbnails{gap:5px;justify-content:flex-start;min-height:56px;padding-left:0;padding-right:0}
 .viewer-thumb{width:44px;flex-basis:44px;height:44px}
}
@media(prefers-reduced-motion:reduce){
 html:has(.photography-page),.photography-page,.photography-page *{scroll-behavior:auto!important}
 .viewer-thumb,.photo-work .image-action{transition:none}
}

.photo-page-head .case-description{margin-top:18px}