/* Portfolio stories: shared presentation and accessible photo viewer. */
.project-entry .work-overlay { opacity: 1; background: linear-gradient(to top,rgba(14,14,14,.85),transparent 48%); }
.project-entry .work-overlay-credits { display: none; }
.project-entry .project-entry-link { font-size: 9px; letter-spacing: .12em; margin-top: 10px; color: var(--champagne); }
.project-entry:focus-visible { outline: 2px solid var(--champagne); outline-offset: -3px; }
.project-page :focus-visible { outline: 2px solid var(--champagne); outline-offset: 5px; }
.project-page .nav-hamburger { background: none; border: 0; padding: 8px; cursor: pointer; }
.project-skip { position: fixed; top: -100px; left: 20px; z-index: 200; padding: 12px; background: var(--cloud); color: var(--black); }
.project-skip:focus { top: 16px; }
.project-header { max-width: 1440px; margin: auto; padding: 160px 56px 48px; }
.project-back { display: inline-block; font-size: 11px; letter-spacing: .12em; margin-bottom: 36px; color: var(--champagne); }
.project-header .section-label { display: block; margin-bottom: 18px; }
.project-header h1 { max-width: 1100px; font-family: var(--serif); font-size: clamp(38px,5.4vw,78px); font-weight: 400; line-height: 1.12; letter-spacing: -.025em; }
.project-byline { margin-top: 22px; font-size: 12px; color: var(--champagne); letter-spacing: .045em; }
.project-hero { max-width: 1440px; padding: 0 56px; margin: auto; }
.project-photo { display: block; overflow: hidden; background: var(--charcoal); cursor: zoom-in; }
.project-hero img { width: 100%; height: auto; aspect-ratio: 4 / 3; object-fit: cover; object-position: center 35%; }
.project-story { max-width: 1240px; margin: auto; padding: 88px 56px; display: grid; grid-template-columns: 1fr 2fr; gap: 64px; }
.project-story h2, .project-credits h2, .project-related h2 { font-family: var(--serif); font-size: clamp(25px,2.5vw,36px); font-weight: 400; font-style: italic; }
.project-copy { max-width: 690px; }
.project-copy p { font-size: 15px; line-height: 1.95; color: var(--champagne); }
.project-copy p + p { margin-top: 24px; }
.project-gallery { max-width: 1440px; padding: 0 56px; margin: auto; columns: 2; column-gap: 20px; }
.project-gallery .project-photo { break-inside: avoid; margin-bottom: 20px; }
.project-gallery img { width: 100%; height: auto; transition: opacity .25s; }
.project-photo:hover img { opacity: .88; }
.project-credits { max-width: 1240px; margin: auto; padding: 72px 56px; display: grid; grid-template-columns: 1fr 2fr; gap: 64px; }
.project-credits dl { display: grid; gap: 18px; }
.project-credits dl > div { display: grid; grid-template-columns: 125px 1fr; gap: 20px; }
.project-credits dt { font-size: 10px; text-transform: uppercase; letter-spacing: .14em; line-height: 1.8; }
.project-credits dd { font-size: 13px; line-height: 1.8; color: var(--champagne); }
.project-contact { text-align: center; padding: 50px 28px 80px; }
.project-contact p { font-family: var(--serif); font-size: clamp(23px,3vw,36px); margin-bottom: 25px; }
.project-related { margin: 0 auto; max-width: 1440px; padding: 56px; border-top: 1px solid var(--charcoal); }
.project-related > div { display: grid; grid-template-columns: 1fr 1fr; gap: 32px; margin-top: 28px; }
.project-related a { display: grid; grid-template-columns: 1fr auto; gap: 14px; padding: 24px 0; border-bottom: 1px solid var(--charcoal); }
.project-related a .section-label { grid-column: 1 / -1; }
.project-related a > span:not(.section-label) { font-family: var(--serif); font-size: 23px; }
.project-lightbox { position: fixed; inset: 0; width: 100%; height: 100%; max-width: none; max-height: none; border: 0; padding: 60px 68px 30px; background: rgba(14,14,14,.98); color: var(--cloud); }
.project-lightbox[open] { display: grid; place-items: center; }
.project-lightbox::backdrop { background: rgba(0,0,0,.9); }
.project-lightbox figure { width: 100%; height: 100%; display: flex; flex-direction: column; justify-content: center; align-items: center; gap: 16px; min-height: 0; }
.project-lightbox .project-lb-image { width: auto; height: auto; max-width: 100%; max-height: calc(100% - 55px); object-fit: contain; flex: 0 1 auto; min-height: 0; }
.project-lb-caption { max-width: 800px; text-align: center; font-size: 12px; line-height: 1.6; color: var(--champagne); }
.project-lightbox button { position: absolute; width: 44px; height: 44px; background: transparent; border: 0; color: var(--cloud); font-size: 24px; cursor: pointer; }
.project-lb-close { top: 12px; right: 16px; }
.project-lb-prev { left: 12px; top: calc(50% - 22px); }
.project-lb-next { right: 12px; top: calc(50% - 22px); }
@media (max-width: 768px) {
 .project-header { padding: 135px 28px 32px; }
 .project-back { margin-bottom: 28px; }
 .project-hero, .project-gallery { padding: 0 20px; }
 .project-hero img { aspect-ratio: 3 / 4; }
 .project-story, .project-credits { display: block; padding: 48px 28px; }
 .project-story h2, .project-credits h2 { margin-bottom: 24px; }
 .project-copy p { font-size: 14px; line-height: 1.9; }
 .project-gallery { columns: 1; }
 .project-gallery .project-photo { margin-bottom: 16px; }
 .project-credits dl > div { grid-template-columns: 95px 1fr; gap: 12px; }
 .project-related { padding: 40px 28px; }
 .project-related > div { grid-template-columns: 1fr; gap: 8px; }
 .project-lightbox { padding: 60px 48px 25px; }
 .project-lb-prev { left: 0; } .project-lb-next { right: 0; }
 .project-page .nav-links.menu-open { display: flex; position: absolute; top: 80px; left: 0; right: 0; flex-direction: column; gap: 24px; padding: 28px; background: var(--black); }
}
@media (prefers-reduced-motion: reduce) {
 .project-page { scroll-behavior: auto; }
 .project-page *, .project-entry img { transition: none !important; animation: none !important; }
}