/* Project details: the image and title occupy the first viewport, as on home. */
.project-hero-page main{max-width:none;margin:0;padding:0}
.project-hero-page .site-header:not(.scrolled){background:linear-gradient(180deg,#0009,#0000);border-color:transparent;color:#fff}
.project-hero-page .site-header:has(.mobile-nav[open]){background:#101010;border-color:var(--line)}
.project-hero{position:relative;display:flex;align-items:flex-end;min-height:100vh;min-height:100svh;padding:calc(var(--header-height) + 70px) var(--gutter) max(50px,env(safe-area-inset-bottom));isolation:isolate;overflow:hidden;background:#0b0d0e;color:#fff}
.project-hero-visual,.project-hero-shade{position:absolute;inset:0}
.project-hero-visual{z-index:0;overflow:hidden}
.project-hero .project-cover-open{position:absolute;inset:0;width:100%;height:100%;aspect-ratio:auto;padding:0;border:0;background:none;color:#fff;text-align:left;cursor:zoom-in;overflow:hidden}
.project-hero .project-cover-open .project-hero-image{width:100%;height:100%;max-width:none;object-fit:cover;object-position:var(--project-focus,50% 50%);transform:scale(var(--project-zoom,1));transition:none}
.project-hero-shade{z-index:1;pointer-events:none}
.project-cover-open:after{content:'';position:absolute;inset:0;z-index:1;pointer-events:none;background:linear-gradient(180deg,#0003 0%,transparent 30%,transparent 48%,#0005 72%,#000c 100%)}
.project-hero-caption{position:relative;z-index:2;width:min(100%,1250px);pointer-events:none;text-shadow:0 2px 18px #0003}
.project-hero-meta{display:flex;flex-wrap:wrap;gap:0 .45em;font-size:11px;line-height:1.7;letter-spacing:.1em;text-transform:uppercase;margin-bottom:17px;max-width:900px}
.project-hero h1{font-size:clamp(42px,5.5vw,90px);line-height:1.04;font-weight:400;letter-spacing:-.045em;max-width:1120px;margin:0;text-wrap:balance;overflow-wrap:break-word}
.project-scroll{display:inline-flex;align-items:center;gap:22px;min-height:44px;margin-top:26px;border-bottom:1px solid #ffffff85;font-size:12px;line-height:1.4;pointer-events:auto}
.project-scroll:hover{border-color:#fff}
.project-scroll-arrow{position:relative;width:1px;height:13px;margin:0 5px 2px;background:currentColor}
.project-scroll-arrow:after{content:'';position:absolute;left:-3px;bottom:0;width:7px;height:7px;border-left:1px solid;border-bottom:1px solid;transform:rotate(-45deg)}
.project-photo-label{position:absolute;z-index:2;right:var(--gutter);bottom:max(62px,env(safe-area-inset-bottom));font-size:11px;line-height:1.5;text-shadow:0 1px 8px #000;border-bottom:1px solid #ffffff80;padding-bottom:4px;opacity:.9}
.project-cover-open:focus-visible{outline:2px solid #fff;outline-offset:-8px}
.project-hero-text{background:radial-gradient(ellipse at 85% 25%,#263039 0,transparent 65%),#101010}
.project-body{max-width:2000px;margin:0 auto;padding:0 var(--gutter);scroll-margin-top:var(--header-height)}
.project-context{display:flex;justify-content:space-between;align-items:flex-start;gap:24px;padding:23px 0 0}
.project-context>div{max-width:1050px}
.project-subtitle{font-size:18px;line-height:1.5;color:#d0d0c9}
.project-image-credit{font-size:11px;line-height:1.6;color:var(--muted);margin-top:9px}
.project-image-credit:first-child{margin-top:0}
.project-return{flex-shrink:0;font-size:11px;color:var(--muted);text-decoration:underline;text-underline-offset:4px;min-height:35px;padding-top:3px}
.project-return:hover{color:var(--ink)}
@media(max-width:700px){
 .project-hero{padding-top:calc(var(--header-height) + 45px);padding-bottom:max(72px,calc(env(safe-area-inset-bottom) + 45px))}
 .project-hero .project-cover-open .project-hero-image{object-position:var(--project-mobile-focus,var(--project-focus,50% 50%))}
 .project-cover-open:after{background:linear-gradient(180deg,#0004 0%,transparent 25%,transparent 40%,#0005 64%,#000d 100%)}
 .project-hero h1{font-size:clamp(39px,10.2vw,65px);line-height:1.05;max-width:100%}
 .project-hero-meta{font-size:9px;line-height:1.65;letter-spacing:.07em;margin-bottom:15px}
 .project-scroll{font-size:11px;margin-top:23px}
 .project-photo-label{bottom:max(24px,env(safe-area-inset-bottom));font-size:10px}
 .project-context{display:block;padding-top:20px}
 .project-subtitle{font-size:16px}
 .project-image-credit{font-size:10px}
 .project-return{display:inline-block;margin-top:14px;font-size:10px}
}
@media(max-height:500px) and (orientation:landscape){
 .project-hero{padding-top:110px;padding-bottom:24px}
 .project-hero h1{font-size:clamp(31px,5vw,52px);max-width:85%}
 .project-hero-meta{font-size:9px;margin-bottom:9px}
 .project-scroll{font-size:11px;margin-top:12px;min-height:34px}
 .project-photo-label{bottom:34px;font-size:10px}
}