/* Selected work: original-proportion imagery and a scroll-driven circular reveal. */
.project-film{--paper:#eeece6;--ink:#171717;--accent:#f2d333;background:#101010;color:#f5f3ed;position:relative;height:980svh}
.project-film-stage{height:100svh;position:sticky;top:0;overflow:hidden;isolation:isolate}
.project-film-head,.project-film-dot,.project-film-chrome{display:none}
.project-film-rail{height:100%;display:flex;width:calc(var(--project-panels,7)*100%);will-change:transform}
.project-film-intro,.project-film-slide{width:calc(100% / var(--project-panels,7));flex-shrink:0;height:100%;box-sizing:border-box;position:relative}
.project-film-intro{display:flex;flex-direction:column;justify-content:center;padding:90px 6vw}
.project-film-intro p{font:12px monospace;letter-spacing:.14em;color:#aaa}
.project-film-intro h2{font:400 clamp(42px,6.5vw,110px)/1.03 var(--font-display,Arial);letter-spacing:-.05em;margin:24px 0}
.project-film-intro h2 em{font-style:normal;color:var(--accent)}
.project-film-intro>span{font:11px monospace;color:#bbb;letter-spacing:.1em}
.project-film-surface{position:absolute;left:6%;width:88%;top:0;height:100%;background:var(--paper);color:var(--ink);display:flex;align-items:center;justify-content:center;padding:100px clamp(24px,3vw,64px) 100px;box-sizing:border-box;clip-path:circle(9px at 50% 50%);will-change:clip-path}
.project-film-slide figure{width:100%;max-width:1450px;margin:0;display:grid;grid-template-columns:minmax(0,1.9fr) minmax(0,1fr);align-items:center;gap:clamp(28px,3.5vw,70px);will-change:transform,opacity;transform-origin:center}
.project-film-window{position:relative;min-width:0;overflow:hidden;border-radius:5px;background:#e1e0da;box-shadow:0 24px 50px -30px #0005}
.project-film-window img{display:block;width:100%;height:auto;max-height:calc(100svh - 220px);aspect-ratio:3/2;object-fit:contain;object-position:center}
.project-film figcaption{display:flex;flex-direction:column;align-items:flex-start;gap:28px;min-width:0;padding:10px 0}
.project-film-edition{display:block;font:11px/1.5 monospace;letter-spacing:.13em;color:#666;border-top:1px solid #aaa;padding-top:14px;width:100%}
.project-film figcaption small{font:12px/1.5 monospace;color:#62625c}
.project-film figcaption h3{font:400 clamp(34px,3.4vw,66px)/1.02 var(--font-display,Arial);letter-spacing:-.055em;margin:12px 0 0;overflow-wrap:normal}
.project-film-credit{font:400 14px/1.65 var(--font-display,Arial);color:#62625c;margin:0}
.project-film figcaption a{display:flex;align-items:center;justify-content:space-between;gap:14px;width:100%;padding:16px 0 0;border-top:1px solid #b7b6af;text-decoration:none;color:var(--ink);font:11px/1.4 monospace;letter-spacing:.025em}
.project-film figcaption a b{display:grid;place-items:center;border-radius:50%;width:46px;height:46px;flex-shrink:0;background:var(--accent);font:26px Arial;transition:transform .25s}
.project-film figcaption a:hover b{transform:rotate(45deg)}
.project-film-controls{position:absolute;z-index:4;bottom:22px;left:3%;right:3%;display:flex;justify-content:space-between;align-items:center;gap:12px;font:10px monospace;letter-spacing:.06em}
.project-film-controls>span{background:#101010;color:#eee;padding:8px 10px;border-radius:12px;white-space:nowrap}
.project-film-controls nav{display:flex;gap:8px;flex-shrink:0;background:#101010;padding:6px;border-radius:40px}
.project-film-controls button{width:44px;height:44px;flex-shrink:0;display:grid;place-items:center;border-radius:50%;border:1px solid #555;background:#101010;color:#aaa;cursor:pointer;padding:0;font:11px monospace}
.project-film-controls button[aria-pressed=true]{color:#111;background:var(--accent);border-color:var(--accent)}
.project-film :focus-visible{outline:2px solid #9d8000;outline-offset:5px}
.project-film-stage:after{content:"";position:absolute;right:2.3%;top:50%;width:12px;height:12px;border-radius:50%;background:var(--paper);pointer-events:none}
.project-film.is-static{height:auto}
.project-film.is-static .project-film-stage{height:auto;position:relative;overflow:visible;padding:32px 0}
.project-film.is-static .project-film-rail{display:block;width:100%;height:auto}
.project-film.is-static .project-film-intro,.project-film.is-static .project-film-controls,.project-film.is-static .project-film-stage:after{display:none}
.project-film.is-static .project-film-slide{height:auto;width:100%;padding:20px 0;display:flex;justify-content:center}
.project-film.is-static .project-film-surface{position:relative;left:0;width:88%;height:auto;clip-path:none;padding:40px}
.project-film.is-static figure{opacity:1!important;transform:none!important}
@media(max-width:800px){
 .project-film-surface{left:4%;width:92%;padding:88px 22px 105px}
 .project-film-slide figure{display:flex;flex-direction:column;gap:24px;width:100%;max-width:520px}
 .project-film-window{width:100%}
 .project-film-window img{max-height:38svh;aspect-ratio:3/2;object-fit:contain}
 .project-film figcaption{width:100%;gap:14px;padding:0;position:relative}
 .project-film-edition{font-size:10px;padding-top:10px}
 .project-film figcaption h3{font-size:36px;margin-top:6px}
 .project-film-credit{display:none}
 .project-film figcaption a{padding-top:10px}
 .project-film figcaption a b{width:44px;height:44px}
 .project-film-controls>span:first-child{display:none}
 .project-film-controls{left:5%;right:5%;bottom:18px;gap:8px}
 .project-film-controls nav{gap:4px;padding:5px}
 .project-film-controls>span{font-size:9px;padding:6px}
 .project-film-intro{padding:80px 7vw}
 .project-film-intro h2{font-size:44px}
 .project-film-stage:after{right:1%;width:8px;height:8px}
 .project-film.is-static .project-film-surface{padding:24px}
}
@media(max-height:650px) and (min-width:801px){.project-film-surface{padding-top:85px;padding-bottom:85px}.project-film figcaption{gap:14px}.project-film figcaption h3{font-size:38px}.project-film-window img{max-height:calc(100svh - 190px)}}
@media(max-height:700px) and (max-width:800px){.project-film-slide figure{gap:14px}.project-film-window img{max-height:29svh}.project-film figcaption{gap:10px}.project-film figcaption h3{font-size:30px}.project-film-surface{padding-top:75px;padding-bottom:90px}}
@media(prefers-reduced-motion:reduce){.project-film figcaption a b{transition:none}}
.project-film-controls nav{position:static;inset:auto;width:max-content;height:auto;transform:none;margin:0;overflow:visible}.project-film-controls{min-height:56px}.project-film-controls button{position:static;transform:none;margin:0}.project-film-controls button span{position:static;transform:none}

@media(max-width:420px){.project-film-controls{left:3%;right:3%}.project-film-controls nav{gap:2px;padding:2px}.project-film-controls>span:last-child{padding:4px 2px;font-size:8px}}

/* Soft project imagery behind the selected-work introduction. */
.project-film-intro{isolation:isolate;overflow:hidden}
.project-intro-art{position:absolute;inset:-4%;z-index:-2;display:grid;grid-template-columns:1.15fr 1fr;grid-template-rows:1fr 1fr;gap:22px;transform:rotate(-8deg) scale(1.08);opacity:.43;filter:blur(2px) saturate(.65);pointer-events:none}
.project-intro-art img{width:100%;height:100%;object-fit:cover;min-height:0;border-radius:12px}
.project-intro-art img:first-child{grid-row:1 / 3}
.project-film-intro::after{content:"";position:absolute;inset:0;z-index:-1;pointer-events:none;background:linear-gradient(90deg,rgba(10,10,10,.94) 0%,rgba(10,10,10,.82) 38%,rgba(10,10,10,.25) 100%),linear-gradient(0deg,#101010 0%,transparent 24%,transparent 80%,#101010 100%)}
@media(max-width:800px){.project-intro-art{inset:0 -38%;opacity:.4;gap:12px}.project-film-intro::after{background:linear-gradient(90deg,#101010e8,#101010a3),linear-gradient(0deg,#101010,transparent 30%,transparent 78%,#101010)}}