/* White gallery: image windows carry the expression; captions remain quiet. */
:root{color-scheme:light;--bg:#fff;--text:#202126;--muted:#64676e;--line:#e1e2e6;--accent:#3548d4;--card-radius:24px}
html{background:#fff;overflow-x:clip}
body{background:#fff}
*{scrollbar-color:#a1a4ad #f4f4f6}
::selection{background:#dbe0ff;color:#202126}
a:focus-visible,button:focus-visible{outline-color:var(--accent)}
.site-header{background:#fffffff5;border-bottom:0;padding:20px 5vw}
.site-header.is-scrolled{border-bottom:1px solid var(--line)}
.brand{font-weight:600;letter-spacing:0}.brand span{font-weight:400;letter-spacing:0}
.site-header nav a{font-size:13px}
.showcase{margin:12px 3vw 0;border-radius:28px;color:#fff;min-height:520px;max-height:calc(100svh - 125px)}
.showcase:after{border-radius:inherit}
.showcase-caption{left:3.4vw;right:3.4vw;bottom:38px}
.showcase .primary-action{background:#fff;color:#202126;border-color:#fff}
.showcase .primary-action:hover{background:#e9ebf6}
.section{padding-top:100px;padding-bottom:100px}
.section-intro{margin-bottom:60px;gap:24px}
.section-intro h2{font-size:clamp(30px,3.6vw,52px);letter-spacing:-.035em}
.section-intro p{font-size:14px}
.project-pair{gap:5vw;align-items:start}
.work-item.offset{padding-top:0;margin-top:100px}
.artwork{border-radius:var(--card-radius);background:#f0f1f3}
.artwork img{border-radius:var(--card-radius);aspect-ratio:16/10}
.surface-target{overflow:visible}.showcase.surface-target{overflow:hidden}
.artwork.surface-ready{background:transparent}
#work .artwork-link{inset:auto 20px 20px auto;width:46px;height:46px;border-radius:50%;padding:0;justify-content:center;background:#fff;color:#202126;transition:background .2s,opacity .2s}
.artwork-link svg{width:20px;height:20px}
#work .work-caption,#work .wide-caption{padding:23px 4px 0;background:transparent}
#work .work-caption h3,#work .wide-caption h3{font-size:clamp(21px,2vw,28px);line-height:1.45;font-weight:500;letter-spacing:-.025em}
#work .work-caption>p,#work .wide-caption>p{font-size:14px;line-height:1.8;color:var(--muted);margin-top:10px;max-width:42ch;text-wrap:pretty}
.wide-work{margin:110px 0}
.wide-work .artwork img{aspect-ratio:2.15}
.wide-caption{display:block}
#work .wide-caption>p{max-width:64ch}
.primary-action{background:#202126;color:#fff;border-color:#202126;border-radius:28px;gap:22px;min-height:50px;font-size:14px}
.primary-action:hover{background:#3c4050}
.volc-section{background:#f5f5f7;border:0;border-radius:32px;margin:0 3vw;max-width:none;padding-left:5vw;padding-right:5vw}
.volc-logo{padding:0;background:transparent;margin-bottom:24px}
.volc-intro .role{font-size:14px;line-height:1.8;margin-bottom:14px}
.volc-intro>div>p{font-size:14px}
.screening{display:grid;grid-template-columns:1fr 1fr;gap:5vw;margin-top:54px}
.screening article{display:flex;flex-direction:column;align-items:stretch;gap:20px;border:0;padding:0;min-width:0}
.screening video{max-width:100%;width:100%;height:480px;max-height:62svh;object-fit:contain;background:#eceef0;border-radius:24px}
.screening-copy{padding:0 4px}.screening-copy h3{font-family:inherit;font-size:25px}.screening-copy>p{font-size:14px;color:var(--muted);margin-top:8px}
.live-action{border:0}.wanwu-poster{border-radius:24px;overflow:hidden}
.film-credits{border-bottom:0}.honors{margin-top:28px}.honors li{padding:14px 0}
.method-section{background:#f5f5f7;border-radius:32px;margin:0 3vw;max-width:none}
.method-cover{border-radius:16px;overflow:hidden;transform:none}.method-cover img{border-radius:16px}
.portrait{border-radius:24px;overflow:hidden}.about-section{border:0}
.text-link{border-color:#8a8d96;font-size:14px}.external-note{font-size:13px}
.method-notes,.film-credits,.channel{border-color:var(--line)}
.scope-note{color:var(--muted)}
footer{background:#f5f5f7;border:0;color:#64676e;font-size:13px}
dialog,.viewer-bar{background:#fff;color:#202126}#viewer-loading{background:#f5f5f7;color:#202126}
.portfolio-light{display:none}
@media(max-width:900px){.section{padding-top:76px;padding-bottom:76px}.showcase{margin:8px 3vw 0;min-height:520px}.work-item.offset{margin-top:64px}.screening video{height:400px}.volc-section,.method-section{padding:64px 5vw}}
@media(max-width:600px){:root{--card-radius:20px}.site-header{padding:12px 5vw}.site-header nav a{font-size:12px}.showcase{border-radius:24px;min-height:540px;max-height:none}.showcase-caption{left:6vw;right:6vw;bottom:28px}.showcase h1{font-size:56px}.section{padding:64px 6vw}.section-intro{margin-bottom:38px}.section-intro p{margin-top:14px}.project-pair{gap:58px}.work-item.offset{margin-top:0}.wide-work{margin:64px 0}.wide-work .artwork img,.artwork img{aspect-ratio:4/3}#work .work-caption,#work .wide-caption{padding-top:20px}#work .work-caption>p,#work .wide-caption>p{font-size:13px;max-width:100%;line-height:1.85}.screening{grid-template-columns:1fr;gap:40px}.screening video{height:auto;max-height:580px}.volc-section,.method-section{padding:56px 6vw;border-radius:24px}.volc-intro{gap:24px}.showcase-action p{font-size:12px!important}.primary-action{min-height:48px}}
@media(prefers-reduced-motion:reduce){#work .work-caption,#work .wide-caption,#work .artwork-link{transform:none!important;opacity:1!important}}

.screening video,.wanwu-poster img,.method-cover img{transform-origin:50% 50%;backface-visibility:hidden}
.screening video{transition:none}
.wanwu-poster,.method-cover{overflow:visible}
.wanwu-poster img{border-radius:24px}
@media(prefers-reduced-motion:reduce){.screening video,.wanwu-poster img,.method-cover img{transform:none!important}}

/* Light follows the pointer, while the project itself stays still on hover. */
.artwork:hover img{transform:none}
.artwork:hover .artwork-link svg{transform:none}
.opening-link{display:block;width:fit-content;margin:16px 0 0 auto;font-size:13px;color:#fff;text-decoration:underline;text-underline-offset:5px;min-height:32px;padding:5px 0}
@media(max-width:900px){.opening-link{margin-left:0}}
html[data-intro-replay] #cinema{display:grid}
html[data-intro-replay] body.intro-active #site{opacity:var(--handoff)}


/* Water / mineral palette: pale colour belongs to the section, not a cursor blob. */
:root{--accent:#315f6b;--muted:#5b6469;--line:#d9e1e0}
::selection{background:#cbe1dd;color:#183e45}
.volc-section{background:linear-gradient(140deg,#e8f0f4 0%,#f2f6f7 64%,#e7efed 100%);box-shadow:inset 0 1px 0 #fff;border:1px solid #dae6e9}
.volc-section h2,.volc-section .screening-copy h3{color:#234e5b}
.live-action{background:linear-gradient(180deg,#fff 0%,#faf6ee 40%,#fff 100%)}
.method-section{background:linear-gradient(130deg,#e8eee4,#f4f5ed 75%);border:1px solid #dce4d7}
.method-section h2{color:#354f3e}.method-cover{box-shadow:12px 22px 44px #273c2820}
.about-section{background:linear-gradient(145deg,#fff 5%,#f2f0e9 100%);border-radius:32px;margin:80px 3vw 0;max-width:none}
footer{background:#eaf0ef;color:#455e60}
.cursor-water{position:fixed;inset:0;width:100%;height:100%;z-index:7;pointer-events:none;contain:strict}
.intro-active .cursor-water{display:none}
@media(max-width:600px){.about-section{margin:56px 3vw 0;border-radius:24px}}
@media(prefers-reduced-motion:reduce),(pointer:coarse){.cursor-water{display:none}}
/* A deeper final panel gives the long white gallery a clear visual destination. */
#work{background:linear-gradient(180deg,#fff 18%,#f9faf7 58%,#f3f6f8 100%);border-radius:0 0 32px 32px}
.about-section{background:linear-gradient(130deg,#16383d,#24544e);color:#f4f6ef}
.about-section .about-copy>p{color:#d3dfda}
.about-section .about-role{color:#e3ebe5}
.about-section .primary-action{background:#eef2e8;color:#173a3c;border-color:#eef2e8}
.about-section .primary-action:hover{background:#dce8dc}
.about-section .channel{border-color:#ffffff38}
.about-section a:focus-visible,.about-section summary:focus-visible{outline-color:#d6e9d9}
/* Keep the film still's baked letterbox outside the rounded hero viewport. */
.showcase-image{top:-18%;height:136%}

/* Full film composition, without zooming a 1080p still to fill a tall viewport. */
.showcase{height:auto;min-height:0;max-height:none;max-width:1600px;margin:12px auto 0;width:94%;color:var(--text);background:transparent;overflow:hidden}
.showcase-image{position:relative;inset:auto;display:block;width:100%;height:auto;aspect-ratio:16/9;object-fit:contain;object-position:center;border-radius:28px;transform:none!important;background:#080a09}
.showcase:after{display:none}
.showcase-caption{position:relative;inset:auto;padding:28px 4px 16px;display:flex;align-items:center;justify-content:space-between;gap:24px;color:#202727}
.showcase h1{font-size:clamp(36px,4.4vw,64px)}
.showcase-action p{color:var(--muted)!important}
.showcase .primary-action{background:#243c39;color:#fff;border-color:#243c39}
.showcase .primary-action:hover{background:#36554d}
.opening-link{color:#52645d}
.live-kicker{font-size:10px;letter-spacing:.16em;color:var(--muted);margin-bottom:16px}
.live-preview{display:grid;grid-template-columns:1fr 1fr;gap:40px 4vw}
.live-tile{display:block;min-width:0}
.live-tile img{width:100%;height:auto;aspect-ratio:16/9;object-fit:contain;background:#090b0a;border-radius:24px}
.live-tile>div{padding:18px 2px 0}
.live-tile span{font-size:11px;color:var(--muted)}
.live-tile h3{font-size:clamp(20px,2vw,27px);font-weight:500;line-height:1.45;margin-top:8px}
.live-archive-link{margin-top:40px}
@media(max-width:700px){.showcase{min-height:0;max-height:none;height:auto}.showcase-image{border-radius:20px}.showcase-caption{display:block;padding:24px 3px}.showcase-action{margin-top:20px}.showcase h1{font-size:40px}.live-preview{grid-template-columns:1fr;gap:30px}.live-tile img{border-radius:20px}}
#work .artwork[href="collection/pantheon.html"] img{aspect-ratio:16/9;object-fit:contain}
.live-tile p{font-size:14px;line-height:1.8;color:var(--muted);margin-top:8px;max-width:40ch}