:root { --bg:#050606; --white:#f3f3ef; --mono:"DM Mono",monospace; --sans:"Inter",Arial,sans-serif; --display:"Barlow Condensed","Arial Narrow",sans-serif; --ease:cubic-bezier(.22,.72,.2,1); }
* { box-sizing:border-box; }
html { scroll-behavior:smooth; }
body { margin:0; overflow-x:hidden; color:var(--white); background:var(--bg); font-family:var(--sans); }
button,a { color:inherit; font:inherit; }
a { text-decoration:none; }
.project-nav { position:fixed; z-index:30; inset:0 0 auto; height:76px; padding:0 4vw; display:flex; justify-content:space-between; align-items:center; font:500 11px var(--sans); letter-spacing:.06em; text-transform:uppercase; background:linear-gradient(180deg,rgba(3,4,4,.72),transparent); backdrop-filter:blur(10px); }
.project-nav__name { font:500 14px var(--mono); letter-spacing:.32em; }
.project-nav nav { display:flex; align-items:center; gap:40px; }
.project-nav nav a { position:relative; }
.project-nav nav a::after { content:""; position:absolute; left:0; bottom:-5px; width:0; height:1px; background:#fff; transition:width .25s ease; }
.project-nav nav a:hover::after { width:100%; }
.project-hero { position:relative; height:150vh; overflow:visible; background:#080909; }
.project-hero__back { position:absolute; inset:0 0 auto; height:112vh; will-change:transform; }
.project-hero__back img { width:100%; height:100%; object-fit:cover; filter:saturate(.66) contrast(1.08) brightness(.67); }
.project-hero__shade { position:absolute; inset:0; z-index:2; pointer-events:none; background:linear-gradient(90deg,rgba(2,3,3,.78),transparent 58%),linear-gradient(0deg,#050606 0%,transparent 32%); }
.project-hero__front { position:absolute; z-index:7; top:112vh; right:9vw; width:min(27vw,430px); height:72vh; overflow:hidden; box-shadow:0 35px 100px rgba(0,0,0,.42); will-change:transform; }
.project-hero__front img { width:100%; height:100%; object-fit:cover; filter:saturate(.74) contrast(1.04); }
.project-hero__title { position:absolute; z-index:4; top:29vh; left:4vw; }
.project-hero__title > span,.project-hero__title p,.project-hero__hint { font:8px var(--mono); letter-spacing:.1em; text-transform:uppercase; }
.project-hero__title h1 { margin:25px 0 22px; font:600 clamp(104px,15vw,245px)/.72 var(--display); letter-spacing:-.045em; text-transform:uppercase; }
.project-hero__title p { color:#b8bcba; }
.project-hero__hint { position:absolute; z-index:5; top:calc(100vh - 58px); left:50%; transform:translateX(-50%); }
.project-hero__hint span { margin-left:18px; }
.project-back { position:absolute; z-index:9; top:104px; left:4vw; color:#b8bcba; font:9px var(--mono); letter-spacing:.04em; text-transform:uppercase; transition:color .25s ease,transform .25s ease; }
.project-back:hover { color:#fff; transform:translateX(-3px); }
.project-back:focus-visible { outline:1px solid #fff; outline-offset:5px; }
.archive { position:relative; z-index:5; padding:12vh 4vw 16vh; background:var(--bg); }
.archive__head { display:flex; justify-content:space-between; align-items:flex-end; margin-bottom:8vh; padding-bottom:28px; border-bottom:1px solid #292b2a; }
.archive__head span,.archive__head p { font:8px/1.6 var(--mono); letter-spacing:.08em; text-transform:uppercase; color:#989d9a; }
.archive__head h2 { margin:12px 0 0; font:600 clamp(60px,8vw,132px)/.8 var(--display); letter-spacing:-.035em; text-transform:uppercase; }
.archive__head p { margin:0; text-align:right; }
.work-grid { display:grid; grid-template-columns:repeat(12,1fr); grid-auto-flow:dense; gap:16px; }
.work-card { --mx:0px; --my:0px; position:relative; grid-column:span 4; aspect-ratio:4/3; padding:0; overflow:hidden; border:0; background:#111; cursor:zoom-in; text-align:left; }
.work-card--wide { grid-column:span 8; aspect-ratio:16/9; }
.work-card--portrait { grid-column:span 4; grid-row:span 2; aspect-ratio:3/4; }
.work-card--tall { grid-column:span 4; aspect-ratio:3/4; }
.work-card--extra-tall { grid-column:span 4; grid-row:span 2; aspect-ratio:1/1.85; }
.work-card--panorama { grid-column:1/-1; aspect-ratio:21/9; }
.work-card img { width:calc(100% + 34px); height:calc(100% + 34px); margin:-17px; object-fit:cover; transform:translate(var(--mx),var(--my)) scale(1.025); filter:saturate(.62) brightness(.78); transition:transform .8s var(--ease),filter .6s ease; }
.work-card::after { content:"↗"; position:absolute; z-index:2; right:16px; top:16px; width:38px; height:38px; display:grid; place-items:center; border:1px solid rgba(255,255,255,.52); border-radius:0; opacity:0; transform:translateY(8px) rotate(-10deg); backdrop-filter:blur(12px); transition:.45s var(--ease); }
.work-card > span { position:absolute; z-index:2; left:16px; right:16px; bottom:14px; display:flex; justify-content:space-between; font:8px var(--mono); letter-spacing:.06em; text-transform:uppercase; opacity:0; transform:translateY(10px); transition:.45s var(--ease); }
.work-card > span b { font-weight:400; }
.work-card:hover img { transform:translate(var(--mx),var(--my)) scale(1.075); filter:saturate(.9) brightness(.9); }
.work-card:hover::after,.work-card:hover > span { opacity:1; transform:translateY(0) rotate(0); }
.lightbox { position:fixed; z-index:100; inset:0; display:grid; place-items:center; padding:7vh 8vw; opacity:0; visibility:hidden; transition:opacity .55s ease,visibility .55s ease; }
.lightbox.is-open { opacity:1; visibility:visible; }
.lightbox__backdrop { position:absolute; inset:0; width:100%; height:100%; border:0; background:rgba(0,0,0,.82); backdrop-filter:blur(22px); cursor:zoom-out; }
.lightbox figure { position:relative; z-index:2; margin:0; max-width:82vw; max-height:82vh; transform:scale(.94) translateY(22px); opacity:0; transition:transform .65s var(--ease),opacity .5s ease; }
.lightbox.is-open figure { transform:scale(1) translateY(0); opacity:1; }
.lightbox figure img { display:block; max-width:82vw; max-height:82vh; object-fit:contain; box-shadow:0 30px 120px rgba(0,0,0,.6); }
.lightbox__top { position:absolute; z-index:3; top:24px; left:4vw; right:4vw; display:flex; justify-content:space-between; font:8px var(--mono); letter-spacing:.1em; text-transform:uppercase; }
.lightbox__top button { border:0; background:transparent; cursor:pointer; text-transform:uppercase; }
.lightbox__arrow { position:absolute; z-index:3; top:50%; width:48px; height:48px; border:1px solid rgba(255,255,255,.4); border-radius:0; color:#fff; background:rgba(0,0,0,.2); backdrop-filter:blur(12px); cursor:pointer; transition:.3s ease; }
.lightbox__arrow:hover { color:#000; background:#fff; }
.lightbox__arrow--prev { left:3vw; }.lightbox__arrow--next { right:3vw; }
.lightbox__count { position:absolute; z-index:3; bottom:25px; display:flex; align-items:center; gap:12px; font:8px var(--mono); }
.lightbox__count i { width:90px; height:1px; background:rgba(255,255,255,.4); }
body.is-lightbox-open { overflow:hidden; }
@media(max-width:800px){.project-nav__name{font-size:11px}.project-nav nav{gap:12px;font-size:8px}.project-nav nav a:nth-child(3),.project-nav nav a:nth-child(5){display:none}.project-hero{height:155vh}.project-hero__back{height:100vh}.project-hero__front{top:112vh;right:6vw;width:45vw;height:56vh}.project-hero__title{top:25vh}.project-hero__title h1{font-size:25vw}.archive{padding-left:5vw;padding-right:5vw}.work-grid{gap:8px}.work-card,.work-card--portrait,.work-card--tall,.work-card--extra-tall{grid-column:span 6;grid-row:span 1;aspect-ratio:3/4}.work-card--wide,.work-card--panorama{grid-column:span 12;grid-row:span 1;aspect-ratio:16/10}.work-card>span{opacity:1;transform:none}.lightbox{padding:60px 12px}.lightbox__arrow{top:auto;bottom:18px}.lightbox__arrow--prev{left:18px}.lightbox__arrow--next{right:18px}.lightbox__count{bottom:35px}}
@media(prefers-reduced-motion:reduce){*{scroll-behavior:auto!important;transition:none!important;animation:none!important}.project-hero__back,.project-hero__front{transform:none!important}}

/* Unified sharp-edged controls */
.lightbox__top button{padding:8px 11px;border:1px solid rgba(255,255,255,.35);border-radius:0;color:#fff;transition:color .25s ease,background .25s ease,border-color .25s ease,transform .25s ease}.lightbox__top button:hover{color:#080909;background:#fff;border-color:#fff;transform:translateY(-2px)}

/* Heading alignment and scroll cue */
.project-hero__title h1,.archive__head h2{width:100%;margin-left:0;text-align:left;transform:translateX(-.012em)}
.project-hero__hint{font-size:10px;letter-spacing:.1em}.project-hero__hint span{display:inline-block;margin-left:15px;font:700 18px/1 var(--sans);animation:project-cue-drop 1.8s ease-in-out infinite}@keyframes project-cue-drop{0%,100%{transform:translateY(-2px);opacity:.65}50%{transform:translateY(5px);opacity:1}}
.project-hero .project-hero__hint{top:auto;left:auto;right:4vw;bottom:calc(50vh + 3.5vh);translate:none;transform:none}