:root{--bg:#151714;--ink:#e0e6d9;--muted:#7e8879;--line:#343c30}*{box-sizing:border-box}html{color-scheme:dark}body{margin:0;font:400 14px 'Onest',sans-serif;background:var(--bg);color:var(--ink);transition:background .6s,color .6s;overflow-x:hidden}button,input,a{-webkit-tap-highlight-color:transparent}a{color:inherit;text-decoration:none}button{font:inherit;color:inherit;border:0;background:none;cursor:pointer}button:focus-visible,a:focus-visible,input:focus-visible{outline:2px solid #98bda4;outline-offset:5px}h1,h2,p{margin:0}h1,h2{font-weight:400;letter-spacing:-.035em}[hidden]{display:none!important}.top{height:104px;padding:32px 4%;display:flex;align-items:center;justify-content:space-between;gap:30px;position:relative;z-index:3}.brand{width:193px;height:27px;background:var(--ink);mask:url(img/logo-lockup.png) center/contain no-repeat;-webkit-mask:url(img/logo-lockup.png) center/contain no-repeat}.top nav{display:flex;gap:27px;font-size:12px}.ruler{display:flex;align-items:center;gap:5px;height:32px;position:absolute;left:50%;transform:translateX(-50%)}.ruler button{padding:0;width:7px;height:14px;position:relative;background:var(--line);transition:height .4s,background .4s}.ruler button:before{content:'';position:absolute;inset:-12px -3px}.ruler button[aria-current=true]{height:28px;background:#bdcda8}.ruler button:hover{background:var(--ink)}#film{height:calc(100svh - 194px);min-height:510px;position:relative;isolation:isolate}.gallery-heading{position:absolute;top:28px;left:4%;z-index:2;pointer-events:none}.gallery-heading p{font-size:10px;color:var(--muted);margin-bottom:17px}.gallery-heading h1{font-size:clamp(28px,3vw,44px);line-height:1.2;letter-spacing:-.03em;color:#c4cdbc}.film-stage{height:100%;position:relative;overflow:hidden;cursor:grab;touch-action:pan-y;user-select:none;outline-offset:-6px!important}.film-stage.dragging{cursor:grabbing}.film-track{position:absolute;left:50%;top:52%;display:flex;align-items:center;gap:12px;will-change:transform}.film-card{flex:none;width:72px;height:246px;padding:0;position:relative;will-change:transform;transform-origin:center center;overflow:hidden;cursor:inherit}.film-card img{width:100%;height:100%;object-fit:cover;pointer-events:none;filter:brightness(.38) saturate(.38);transition:filter .45s;will-change:filter}.film-card.focused img{filter:brightness(.9) saturate(.88)}.film-card:hover img{filter:brightness(1) saturate(1)}.film-card:focus-visible{outline:2px solid var(--ink)}.cursor-hint{position:absolute;left:var(--cx,50%);top:var(--cy,52%);width:54px;height:54px;border:1px solid #cddbc166;border-radius:50%;display:grid;place-items:center;transform:translate(-50%,-50%);opacity:0;transition:opacity .3s;pointer-events:none;z-index:4;color:white;background:#11111122;backdrop-filter:blur(2px)}.film-stage.pointer-in .cursor-hint{opacity:1}.film-stage.dragging .cursor-hint{transform:translate(-50%,-50%) scale(.8)}.film-info{position:absolute;bottom:30px;left:4%;right:4%;display:flex;align-items:end;justify-content:space-between;gap:30px;pointer-events:none}.film-info button{pointer-events:auto}.micro{font-size:9px;letter-spacing:.08em;color:var(--muted)}.film-info h2{font-size:27px;margin-top:12px;transition:opacity .15s}.film-instruction{font-size:10px;color:var(--muted);line-height:1.8}.round{width:43px;height:43px;border:1px solid var(--line);border-radius:50%;font-size:20px;display:grid;place-items:center}.round:hover{border-color:var(--ink)}.foot{min-height:90px;padding:20px 4% 30px;display:flex;align-items:center;justify-content:space-between;gap:24px;position:relative;z-index:4}.foot>a{font-size:10px;color:var(--muted)}.mode-switch{display:flex;border:1px solid var(--line);border-radius:40px;padding:5px;gap:3px}.mode-switch button{padding:11px 19px;border-radius:25px;font-size:11px;white-space:nowrap;transition:background .3s,color .3s}.mode-switch button[aria-pressed=true]{background:#d4dec9;color:#242c21}.sensitivity{display:flex;align-items:center;gap:10px;font-size:10px;color:var(--muted)}input[type=range]{accent-color:#a7bc95;width:86px;height:14px;cursor:pointer}
body[data-mode=collage]{--bg:#f5f6f2;--ink:#2b342a;--muted:#7c877b;--line:#d6ded2;color-scheme:light}.collage-heading{display:flex;align-items:end;justify-content:space-between;padding:25px 6% 30px;gap:25px}.collage-heading h1{font-size:clamp(33px,4vw,58px);line-height:1.1;margin-top:17px}.lens-controls{display:flex;flex-wrap:wrap;align-items:center;justify-content:flex-end;gap:15px;max-width:300px;font-size:11px}.lens-controls label{display:flex;gap:10px}.lens-controls output{color:#547454}.lens-controls button{padding:10px 15px;border:1px solid var(--line);border-radius:30px;font-size:11px}.lens-controls button[aria-pressed=true]{background:#dce5d4}.lens-controls input{width:90px}.mosaic-stage{height:clamp(360px,53svh,720px);position:relative;overflow:hidden;margin:0 4%;background:#e2e6dc;border-radius:3px;touch-action:pan-y}.mosaic-stage>canvas{display:block;width:100%;height:100%}.magnifier{position:absolute;width:228px;height:228px;left:50%;top:50%;transform:translate(-50%,-50%);border-radius:50%;overflow:hidden;pointer-events:none;border:2px solid #ffffffc9;box-shadow:0 22px 45px -12px #15271590,inset 0 0 0 8px #ffffff40;z-index:2}.magnifier:after{content:'';position:absolute;inset:5px;border-radius:50%;border:1px solid #ffffff6b;box-shadow:inset 0 0 20px #ffffff45;pointer-events:none}.magnifier canvas{display:block;width:100%;height:100%}.lens-reticle{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);font:200 22px sans-serif;color:#ffffffa1}.lens-zoom{position:absolute;bottom:17px;left:50%;transform:translateX(-50%);color:#fff;font-size:10px;background:#151d1699;padding:4px 8px;border-radius:20px}.mosaic-open{position:absolute;bottom:16px;right:18px;background:#ffffffed;border:1px solid #e7ebe2;padding:12px 16px;border-radius:30px;font-size:11px;z-index:3}.mosaic-footer{display:flex;justify-content:space-between;gap:20px;padding:18px 4% 12px;font-size:10px;color:var(--muted)}.accessible-works{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%)}.accessible-works:focus-within{position:relative;width:auto;height:auto;clip-path:none;margin:0 4%;display:flex;flex-wrap:wrap;gap:10px;padding:15px}.accessible-works button{padding:10px}.top:has(+main #collage:not([hidden])) .ruler{display:none}body[data-mode=collage] .sensitivity{visibility:hidden}
dialog{position:fixed;inset:0;width:100vw;max-width:none;height:100svh;max-height:none;margin:0;padding:0;border:0;background:transparent;color:#e7ecdf;overflow:hidden}dialog::backdrop{background:#141a16ed;backdrop-filter:blur(14px)}#viewer-image{position:fixed;object-fit:cover;box-shadow:0 20px 65px #0005;will-change:transform,clip-path;transition:opacity .25s}.viewer-close{position:absolute;right:4%;top:33px;z-index:10;font-size:12px;padding:10px}.viewer-copy{position:absolute;bottom:5%;left:50%;width:70%;transform:translateX(-50%);text-align:center;opacity:0;transition:opacity .5s .2s}.viewer-copy h2{font-size:clamp(24px,3.5vw,46px);margin:9px 0}.viewer-copy>p:last-child{font-size:10px;color:#8f9e8e}.viewer-copy .micro{color:#8f9e8e}.viewer-ready .viewer-copy{opacity:1}.viewer-prev,.viewer-next{position:absolute;top:47%;z-index:10;border-color:#5c6856}.viewer-prev{left:4%}.viewer-next{right:4%}
@media(max-width:700px){.top{height:87px;padding:24px 6%;gap:20px}.brand{width:146px;height:22px}.top nav{font-size:10px;gap:16px}.ruler{top:80px;gap:5px}.ruler button{width:5px;height:8px}.ruler button[aria-current=true]{height:17px}#film{height:calc(100svh - 215px);min-height:470px}.gallery-heading{left:6%;top:43px}.gallery-heading h1{font-size:29px}.gallery-heading p{font-size:9px;margin-bottom:12px}.film-track{top:55%;gap:9px}.film-card{width:55px;height:195px}.film-info{left:6%;right:6%;bottom:10px;gap:12px}.film-info h2{font-size:21px;margin-top:10px}.film-instruction{display:none}.foot{padding:20px 6% 25px;flex-wrap:wrap;gap:18px;justify-content:center;min-height:128px}.foot>a{order:2;font-size:9px}.sensitivity{order:3;font-size:9px}.mode-switch{order:1;flex-basis:auto}.mode-switch button{padding:10px 18px}.collage-heading{padding:25px 6% 23px;display:block}.collage-heading h1{font-size:38px}.lens-controls{margin-top:22px;max-width:100%;justify-content:flex-start;gap:11px}.lens-controls input{width:75px}.lens-controls button{font-size:10px;padding:8px 11px}.mosaic-stage{margin:0 5%;height:420px;touch-action:pan-y}.magnifier{width:160px;height:160px}.mosaic-footer{padding:15px 6%;font-size:9px;flex-direction:column;gap:8px}.viewer-copy{bottom:8%;width:80%}.viewer-close{right:5%;top:20px}.viewer-prev{left:3%;top:40%}.viewer-next{right:3%;top:40%}.viewer-prev,.viewer-next{background:#151a1677;width:36px;height:36px}.mosaic-open{right:12px;bottom:12px;font-size:10px}}
/* Refinement: a small image ribbon and one quiet, central caption. */
.gallery-heading{left:0;right:0;top:40px;text-align:center}
.gallery-heading h1{font-size:11px;letter-spacing:.015em;color:var(--muted)}
.film-track{top:44%;gap:10px}
.film-card{width:46px;height:154px}
.film-info{top:69%;bottom:auto;left:8%;right:8%;align-items:center;justify-content:center}
.film-caption{text-align:center;max-width:78%}
.film-info h2{font-size:clamp(25px,2.8vw,39px);margin-top:14px;letter-spacing:-.025em}
.film-caption .micro{font-size:9px;color:#768271;letter-spacing:.03em}
.film-description{font-size:12px;line-height:1.6;color:#89967f;margin-top:12px}
.open-selected{font-size:10px;padding:10px 0;margin-top:17px;color:#a1ad97;border-bottom:1px solid #48543f}
.open-selected span{margin-left:17px}
.prev-work{position:absolute;left:0;top:25px}.next-work{position:absolute;right:0;top:25px}
.film-info .round{border:none;color:#7e8d76;font-size:22px}
.foot .sensitivity{display:none}
.foot{justify-content:space-between}
.mode-switch button{font-size:10px;padding:9px 14px}
.cursor-hint{width:38px;height:38px;border-color:#dce7d333;background:transparent;backdrop-filter:none;font-size:12px}
.magnifier{opacity:0;visibility:hidden;transition:opacity .12s,visibility .12s}
.magnifier.lens-visible{opacity:1;visibility:visible}
.mosaic-stage.lens-following{cursor:none}
.mosaic-stage button{cursor:pointer}
@media(max-width:700px){.gallery-heading{top:48px;left:0}.gallery-heading h1{font-size:10px}.film-track{top:44%;gap:8px}.film-card{width:34px;height:122px}.film-info{top:67%;left:5%;right:5%;bottom:auto}.film-info h2{font-size:25px;line-height:1.2}.film-caption{max-width:76%}.foot{justify-content:center}.open-selected{margin-top:12px}.prev-work,.next-work{top:24px}}
@media(prefers-reduced-motion:reduce){*,*:before,*:after{transition:none!important;animation:none!important}.cursor-hint{display:none}.film-card{will-change:auto}}