/* Project browsing */
.work-track{display:flex;gap:18px;align-items:stretch;padding:22px 4vw 30px;overflow-x:auto;scroll-snap-type:x proximity;scroll-padding:4vw;scrollbar-width:thin}
.work-track:has(.is-previewing){scroll-snap-type:none}
.work-track .project-card{flex:0 0 270px;margin:0;min-width:0;opacity:1;transform:none;transition:flex-basis .4s cubic-bezier(.2,.7,.2,1);position:relative}
.project-link{display:block;border-radius:5px;overflow:hidden;color:white;background:#151515;outline-offset:6px}
.project-link:focus-visible{outline:3px solid var(--orange)}
.project-media{height:405px;position:relative;isolation:isolate;overflow:hidden}
.project-media .project-frame{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;opacity:0;transition:opacity .65s ease,transform .5s ease}
.project-media .project-frame.current{opacity:1}
.project-shade{position:absolute;inset:0;background:linear-gradient(180deg,#0001 30%,#000b 78%,#000e);z-index:1}
.project-label{position:absolute;left:24px;right:24px;bottom:29px;z-index:2}
.project-label>span{font:700 .59rem 'DM Sans',sans-serif;letter-spacing:.13em}
.project-label h3{font-size:2.9rem;line-height:.92;margin:12px 0 10px;letter-spacing:.005em}
.project-label p{font-size:.65rem;font-weight:700;letter-spacing:.05em;margin:0}
.project-open{position:absolute;right:18px;top:18px;z-index:2;background:var(--orange);color:#111;border-radius:50%;width:38px;height:38px;display:grid;place-items:center;font-size:1.5rem}
.project-dots{display:flex;gap:5px;position:absolute;bottom:13px;left:24px;right:24px;z-index:2;opacity:0;transition:opacity .2s}
.project-dots i{height:2px;background:#ffffff50;flex:1}.project-dots i.current{background:var(--orange)}
.is-previewing .project-dots{opacity:1}
.work-nav .preview-toggle{width:auto;height:auto;border-radius:0;padding:9px 12px;font:700 .64rem 'DM Sans',sans-serif;letter-spacing:.04em}
@media(hover:hover) and (pointer:fine) and (min-width:701px){.work-track .project-card.is-previewing{flex-basis:min(660px,70vw)}.is-previewing .project-label h3{font-size:3.5rem}.project-card.is-previewing{z-index:3}}
@media(max-width:700px){.work-track .project-card{flex-basis:76vw}.project-media{height:110vw;max-height:460px}.work-nav>span,.preview-toggle{display:none!important}.work-nav{display:flex}.project-label h3{font-size:3rem}}
@media(prefers-reduced-motion:reduce){.work-track .project-card,.project-frame,.project-dots{transition:none!important}}
/* Individual project pages */
.project-page{background:var(--cream)}.project-intro{padding-top:55px;padding-bottom:55px}
.back-to-work{display:inline-block;font-size:.72rem;font-weight:800;letter-spacing:.1em;border-bottom:1px solid;padding-bottom:9px;margin-bottom:65px}
.project-title-row{display:grid;grid-template-columns:1.2fr 1fr;gap:8vw;align-items:center}
.project-title-row h1{font-size:clamp(4.5rem,9vw,9rem);line-height:.9;margin:18px 0 0;overflow-wrap:normal}
.project-description p{font-size:clamp(1rem,1.35vw,1.25rem);line-height:1.65;margin-bottom:28px}
.project-tag{font-size:.68rem;font-weight:800;letter-spacing:.14em;color:var(--orange)}
.project-gallery{display:grid;grid-template-columns:1fr 1fr;gap:24px}
.gallery-item{position:relative;display:block;border:0;padding:0;background:#e5e0d5;cursor:zoom-in;overflow:hidden}
.gallery-item:first-child{grid-column:1/-1}.gallery-item img{width:100%;height:580px;object-fit:contain}.gallery-item:first-child img{height:min(72vw,760px)}
.gallery-item span{position:absolute;bottom:16px;right:16px;background:#111;color:white;padding:10px 14px;font-size:.75rem}
.gallery-item:focus-visible{outline:3px solid var(--orange);outline-offset:5px}
.project-end{display:flex;justify-content:space-between;align-items:end;gap:40px;padding:95px 0}.project-end h2{font-size:clamp(3.5rem,6vw,7rem);margin-bottom:32px}.next-project{display:flex;flex-direction:column;gap:14px}.next-project small{font-weight:800;letter-spacing:.12em}.next-project strong{font-family:'Barlow Condensed',sans-serif;font-size:2.8rem}
.project-lightbox{border:0;max-width:none;max-height:none;width:100vw;height:100dvh;padding:60px 65px;background:#111;color:#fff}.project-lightbox[open]{display:grid;place-items:center}.project-lightbox::backdrop{background:#000e}.project-lightbox img{width:100%;height:calc(100dvh - 150px);object-fit:contain}.project-lightbox button{position:absolute;background:#fff;color:#111;border:0;width:42px;height:42px;border-radius:50%;cursor:pointer;font-size:1.4rem}.lightbox-close{right:20px;top:18px}.lightbox-prev{left:12px;top:50%}.lightbox-next{right:12px;top:50%}.lightbox-count{position:absolute;bottom:15px;left:0;right:0;text-align:center;font-size:.8rem}
@media(max-width:700px){.project-intro{padding-top:30px}.back-to-work{margin-bottom:40px}.project-title-row{display:block}.project-description{margin-top:32px}.project-gallery{grid-template-columns:1fr;gap:16px}.gallery-item img,.gallery-item:first-child img{height:auto;max-height:none}.project-end{display:block;padding:70px 0}.next-project{margin-top:50px}.project-lightbox{padding:60px 12px}.project-lightbox img{height:calc(100dvh - 150px)}}
/* Frame gallery screenshots inside the photo, excluding captured edge controls. */
.project-frame:not(:first-child){transform:scale(1.22)}
.gallery-item:not(:first-child) img{width:124%;max-width:none;margin-left:-12%;object-fit:cover}
@media(max-width:700px){.gallery-item:not(:first-child) img{height:auto}}

/* Keep the project row scrollable without a visible scrollbar. */
.work-track{scrollbar-width:none;-ms-overflow-style:none}
.work-track::-webkit-scrollbar{display:none;width:0;height:0}

/* Give all project gallery images an equal-sized tile. */
.project-gallery .gallery-item:first-child{grid-column:auto}
.project-gallery .gallery-item{aspect-ratio:1 / 1}
.project-gallery .gallery-item img,.project-gallery .gallery-item:first-child img{width:100%;height:100%;max-height:none;margin:0;object-fit:cover}
.project-gallery .gallery-item:not(:first-child) img{width:124%;height:124%;max-width:none;margin:-12%;object-fit:cover}

/* Supplied original photos do not need screenshot-edge cropping. */
.supplied-card .project-frame{transform:none}
.supplied-gallery .gallery-item:not(:first-child) img{width:100%;height:100%;margin:0}