/* The home page keeps one quiet doorway into the photography sequence. */
.photo-entry-link { display:inline-block; margin-top:20px; padding:8px 0; border-bottom:1px solid currentColor; font-size:15px; }
.gallery-page { background:#171a1b; color:#f2eee5; min-height:100svh; }
.gallery-header { height:72px; display:grid; grid-template-columns:1fr auto 1fr; align-items:center; gap:20px; padding:0 5.6%; background:var(--paper); color:var(--plum); }
.gallery-header .wordmark { font-size:25px; }
.gallery-back { justify-self:start; display:grid; place-items:center; width:44px; height:44px; margin-left:-10px; opacity:.72; transition:opacity 180ms ease; }
.gallery-back svg { width:24px; height:24px; fill:none; stroke:currentColor; stroke-width:1.35; stroke-linecap:round; stroke-linejoin:round; }
.gallery-back:hover,.gallery-back:focus-visible { opacity:1; }
.gallery-header .language { justify-self:end; }
.gallery-main { position:relative; height:calc(100svh - 72px); min-height:360px; display:grid; grid-template-rows:minmax(220px,1fr) auto; }
.photo-stage { height:100%; position:relative; overflow:hidden; isolation:isolate; touch-action:pan-y pinch-zoom; outline-offset:-5px; --front-width:70vw; --peek:36px; }
.photo-stage:focus-visible { outline:1px solid var(--peach); }
.photo-layer { position:absolute; inset:0; opacity:0; pointer-events:none; }
.photo-layer.is-current { opacity:1; }
.photo-background { position:absolute; inset:0; background:var(--photo-field,#203044); }
.photo-background::after { content:''; position:absolute; inset:0; background:radial-gradient(ellipse at 50% 42%,transparent 25%,#080a102d 100%),linear-gradient(180deg,#0c101018,transparent 38%,#0c101030); }
.photo-stack { position:absolute; inset:0; }
.photo-card { position:absolute; left:50%; top:50%; margin:0; width:var(--card-width,70%); height:var(--card-height,auto); transform:var(--card-transform,translate(-50%,-50%)); transform-origin:center; backface-visibility:hidden; }
.photo-card .photo-image { width:100%; height:100%; object-fit:contain; user-select:none; -webkit-user-drag:none; box-shadow:0 22px 64px #0007,0 3px 12px #0004; outline:1px solid #ffffff16; outline-offset:-1px; }
.photo-card-front { z-index:3; }
.photo-card-side { z-index:1; opacity:.72; filter:brightness(.76) saturate(.86); }
.photo-card-side .photo-image { box-shadow:0 18px 42px #0005; }
.photo-card-side.is-unavailable { visibility:hidden; }
.photo-controls { position:absolute; inset:0; pointer-events:none; z-index:8; }
.photo-controls button { position:absolute; top:calc(50% - 24px); display:grid; place-items:center; width:48px; height:48px; padding:0; border:0; border-radius:0; background:none; color:#fff; opacity:.32; pointer-events:auto; transition:opacity 180ms ease,transform 180ms ease; touch-action:manipulation; }
.photo-previous { left:max(0px,calc(50% - var(--front-width)/2 - 10px)); }
.photo-next { right:max(0px,calc(50% - var(--front-width)/2 - 10px)); }
.photo-controls svg { width:24px; height:24px; fill:none; stroke:currentColor; stroke-width:1.25; stroke-linecap:round; stroke-linejoin:round; filter:drop-shadow(0 1px 2px #0008); transition:transform 220ms ease; }
.photo-controls button:focus-visible { outline:1px solid var(--paper); outline-offset:3px; opacity:1; }
.photo-controls button:active { transform:scale(.94); opacity:1; }
@media(hover:hover) and (pointer:fine) {
 .photo-controls button:hover { opacity:1; }
 .photo-previous:hover svg { transform:translateX(-2px); }
 .photo-next:hover svg { transform:translateX(2px); }
}
.photo-footer { position:relative; z-index:8; display:grid; justify-items:center; align-content:center; gap:4px; padding:4px 14px max(10px,env(safe-area-inset-bottom)); background:#171a1b; }
.photo-metadata { min-height:38px; max-width:760px; text-align:center; font-size:11px; line-height:1.75; letter-spacing:.03em; font-variant-numeric:tabular-nums; color:#f2eee5ad; }
.photo-location { color:#f2eee5; }
.photo-location[hidden] { display:none; }
.photo-gear { color:#f2eee5a8; }
.photo-toolbar { width:188px; height:28px; display:flex; align-items:center; }
.photo-progress { position:relative; width:100%; height:28px; pointer-events:none; }
.photo-progress-liquid { display:block; width:100%; height:28px; overflow:visible; }
.photo-progress-dots { fill:#f2eee5; }
.photo-progress-fluid { fill:#f2eee5; opacity:.85; }
.photo-loading { position:absolute; z-index:9; left:50%; top:50%; transform:translate(-50%,-50%); width:36px; height:36px; border-radius:50%; background:#10151b55; -webkit-backdrop-filter:blur(6px); backdrop-filter:blur(6px); display:grid; place-items:center; pointer-events:none; }
.photo-loading-ring { display:block; width:20px; height:20px; border:1.5px solid #f2eee530; border-top-color:#f2eee5; border-radius:50%; }
.photo-loading:not([hidden]) .photo-loading-ring { animation:photo-loading-spin 850ms linear infinite; }
.photo-loading.is-paused .photo-loading-ring { animation-play-state:paused; }
.photo-loading[hidden],.photo-error[hidden] { display:none; }
@keyframes photo-loading-spin { to { transform:rotate(360deg); } }
.photo-error { position:absolute; z-index:10; left:50%; bottom:max(20px,env(safe-area-inset-bottom)); transform:translateX(-50%); max-width:calc(100% - 32px); padding:8px 18px; background:#15191ceb; color:var(--paper); font-size:14px; text-align:center; }
.photo-error button { color:inherit; background:none; border:0; text-decoration:underline; margin-left:12px; min-height:44px; }
.photo-sr-only { position:absolute; width:1px; height:1px; padding:0; margin:-1px; overflow:hidden; clip-path:inset(50%); white-space:nowrap; border:0; }
.photo-noscript figure { margin:24px auto; padding:0 5.6%; max-width:1200px; }
.photo-noscript img { max-height:80vh; margin:auto; object-fit:contain; }
.photo-noscript figcaption { text-align:center; font-size:11px; margin-top:12px; color:#f2eee5aa; }
@media(max-width:700px) {
 .gallery-header { height:64px; padding:0 6%; gap:12px; }
 .gallery-header .wordmark { font-size:22px; }
 .gallery-header .language { gap:5px; font-size:13px; }
 .gallery-main { height:calc(100svh - 64px); min-height:340px; }
 .photo-controls button { width:44px; height:48px; }
 .photo-controls svg { width:22px; height:22px; }
 .photo-toolbar { width:168px; }
 .photo-metadata { font-size:11px; line-height:1.65; }
 .photo-card .photo-image { box-shadow:0 15px 34px #0006,0 2px 8px #0003; }
}
@media(max-width:360px) {
 .gallery-header { gap:9px; padding:0 5%; }
 .gallery-header .wordmark { font-size:20px; }
 .gallery-header .language { gap:3px; font-size:12px; }
 .gallery-back { font-size:13px; }
}
@media(prefers-reduced-motion:reduce) {
 .photo-controls button,.photo-controls svg { transition:none; transform:none!important; }
 .photo-loading:not([hidden]) .photo-loading-ring { animation:none; }
}

/* An editorial doorway: the person, then the photographs. */
.photography-entry { display:grid; grid-template-columns:1.1fr 1fr; margin-top:56px; background:#1d2924; color:#f2eee5; overflow:hidden; }
.photography-entry-copy { padding:clamp(28px,5vw,76px); display:flex; flex-direction:column; align-items:flex-start; justify-content:center; }
.photography-entry-copy .eyebrow { color:#c4cbbf; font-size:11px; letter-spacing:1.7px; }
.photography-entry h3 { font:400 clamp(48px,6.3vw,94px)/1.14 var(--serif); letter-spacing:-.045em; margin:36px 0 26px; }
.photography-entry p { font-size:clamp(14px,1.2vw,17px); line-height:1.9; color:#e0e3da; }
.photography-entry .photo-entry-link { display:inline-flex; gap:24px; align-items:center; margin-top:28px; font-size:14px; padding:10px 0; }
.photo-entry-link svg { width:22px; height:22px; fill:none; stroke:currentColor; stroke-width:1.2; stroke-linecap:round; stroke-linejoin:round; }
.photography-entry-signature { font-size:11px; letter-spacing:1.5px; color:#bdc6bd; margin-top:auto; padding-top:52px; }
.photography-entry-signature span { margin:0 10px; opacity:.4; }
.photography-entry-portrait { margin:0; align-self:stretch; }
.photography-entry-portrait img { width:100%; height:auto; display:block; }
@media(max-width:700px) {
 .photography-entry { grid-template-columns:1fr; margin-top:32px; }
 .photography-entry-copy { padding:32px 26px; }
 .photography-entry h3 { font-size:48px; margin:24px 0 18px; }
 .photography-entry-signature { padding-top:32px; }
 .photography-entry-portrait { width:100%; }
 #video .practice-label h3 { max-width:12em; }
}
.photography-entry:focus { outline:none; }
@media(max-width:700px) {
 .photography-entry-portrait { grid-row:1; }
 .photography-entry-copy { grid-row:2; padding:28px 26px; }
 .photography-entry-signature { padding-top:26px; }
}
