/* V3: an exhibition with a beginning, a sequence, and a return. */
.works{padding-bottom:0}.works-heading{margin-bottom:32px}.works-heading h2{font-size:clamp(36px,5.2vw,86px)}.works-heading p{max-width:370px}.works .work-toolbar{margin-bottom:20px}.projects-gallery{margin:0 calc(-1*var(--pad))}.ex-journey{height:calc((var(--scene-count) - 1)*82vh + 100vh);position:relative}.ex-theatre{position:sticky;top:78px;height:calc(100vh - 78px);height:calc(100svh - 78px);min-height:610px;background:var(--active-bg,#d6e65b);color:var(--active-ink,#382039);transition:background .5s,color .5s;overflow:hidden}.ex-theatre-label{position:absolute;inset:24px var(--pad) auto;display:flex;justify-content:space-between;gap:30px;font-size:11px;z-index:3}.ex-scenes{height:100%;position:relative}.ex-scene{position:absolute;inset:0;padding:80px var(--pad) 100px;display:grid;grid-template-columns:38% 62%;align-items:center;opacity:0;visibility:hidden;pointer-events:none;transition:opacity .45s,visibility .45s}.ex-scene.is-current{opacity:1;visibility:visible;pointer-events:auto}.ex-scene-copy{position:relative;z-index:2;padding-right:6%}.ex-direction{font-size:12px}.ex-scene-copy h3{font-size:clamp(42px,5.4vw,92px);letter-spacing:-.07em;font-weight:850;line-height:1.12;margin:20px 0}.ex-scene-line{font-size:clamp(19px,1.6vw,28px);font-weight:600}.ex-scene-desc{font-size:13px;line-height:1.9;margin-top:25px;max-width:28em}.ex-enter{font-size:13px;display:inline-flex;align-items:center;gap:35px;border-bottom:1px solid currentColor;padding:16px 0 8px;margin-top:24px}.ex-enter span{font-size:26px}.ex-scene-art{height:min(65vh,640px);position:relative;isolation:isolate;perspective:1400px;margin-left:3%;min-width:0}.ex-main-plane{position:absolute;inset:5% 3% 14% 0;transform:translateY(calc((1 - var(--enter,1))*70px - var(--leave,0)*20px)) rotate(-3deg);transition:transform .12s linear;overflow:hidden;box-shadow:0 16px 40px #0002;background:var(--ex-bg)}.ex-main-plane>img{width:100%;height:100%;object-fit:cover}.ex-detail-plane{position:absolute;width:40%;height:38%;right:-2%;bottom:0;transform:translateY(calc((1 - var(--enter,1))*110px)) rotate(6deg);box-shadow:0 10px 30px #0003;border:7px solid var(--ex-bg);overflow:hidden;background:var(--ex-bg)}.ex-detail-plane img{width:100%;height:100%;object-fit:cover}.ex-art-word{position:absolute;left:-4%;bottom:-3%;font:900 clamp(70px,9vw,170px)/1 Han,sans-serif;letter-spacing:-.07em;z-index:3;pointer-events:none;mix-blend-mode:multiply}.ex-scene-foot{position:absolute;bottom:67px;left:var(--pad);right:var(--pad);display:flex;justify-content:space-between;gap:30px;font-size:10px}.ex-scene-foot>p{max-width:40%;text-align:right}.ex-reel{position:absolute;bottom:0;left:0;right:0;display:flex;align-items:stretch;z-index:10;border-top:1px solid color-mix(in srgb,currentColor 22%,transparent);padding:0 var(--pad);height:48px}.ex-reel button{display:flex;align-items:center;gap:8px;flex:1;min-width:0;font-size:10px;opacity:.5;transition:opacity .3s}.ex-reel button[aria-pressed=true]{opacity:1}.ex-reel i{height:2px;flex:1;background:currentColor;transform:scaleX(.35);transform-origin:left;transition:transform .5s;margin-right:16px}.ex-reel button[aria-pressed=true] i{transform:scaleX(1)}.ex-reel-name{display:none}.ex-between-word{display:flex;align-items:center;justify-content:center;height:100%;background:#153dda;color:white;font:800 clamp(45px,9vw,160px)/.82 Archivo,sans-serif;font-stretch:75%;letter-spacing:-.06em;padding:15%}.ex-scene-aftergrowth .ex-main-plane{inset:0 13% 10% 10%;transform:rotate(3deg)}.ex-scene-aftergrowth .ex-detail-plane{height:60%;width:28%}.ex-scene-tilt .ex-main-plane{inset:2% 0 10% 1%;transform:rotate(-5deg)}.ex-scene-tilt .ex-art-word{font-size:8vw;left:0}.ex-scene-wild .ex-main-plane,.ex-scene-chuodui .ex-main-plane{transform:rotate(0);inset:6% 0 5%}.ex-scene-wild .ex-detail-plane{width:32%;height:45%;transform:rotate(10deg)}.ex-scene-chuodui .ex-detail-plane{transform:rotate(-7deg)}.ex-scene-sit .ex-art-word{bottom:1%;left:-6%;font-weight:900}.ex-scene-harvest .ex-detail-plane{width:47%;height:43%;right:-2%;transform:rotate(-5deg)}.ex-scene-offclock .ex-main-plane{transform:rotate(7deg);inset:8% 10% 16% 5%}.ex-scene-offclock .ex-art-word{transform:rotate(-9deg)}.ex-scene-between .ex-main-plane{transform:rotate(-8deg)}
/* The architect's way of seeing becomes a bridge, rather than a detached bio. */
.ex-bridge{padding:65px var(--pad) 95px;background:#e1e5e9}.ex-bridge-top{display:flex;justify-content:space-between;align-items:end;gap:30px;padding-bottom:55px}.ex-bridge-top p{font-size:clamp(22px,3vw,50px);font-weight:650;line-height:1.4;letter-spacing:-.04em}.ex-bridge-top>span{font-size:11px;max-width:240px}.ex-bridge-body{display:grid;grid-template-columns:1.3fr 1fr;gap:9%;align-items:center}.ex-bridge-images{height:490px;position:relative}.ex-bridge-images>img{width:78%;height:80%;object-fit:contain;background:white;transform:rotate(-6deg);box-shadow:0 15px 35px #1721301a}.ex-bridge-type{position:absolute;bottom:0;right:0;width:58%;height:64%;transform:rotate(8deg)}.ex-bridge-type .ex-between-word{font-size:clamp(60px,8vw,130px)}.ex-bridge-copy h2{font-size:clamp(35px,4.7vw,78px);font-weight:750;line-height:1.2;letter-spacing:-.06em}.ex-bridge-copy>p{font-size:14px;line-height:1.9;max-width:31em;margin:30px 0}.ex-bridge-copy>a{font-size:13px;border-bottom:1px solid;padding-bottom:7px}.home>.interlude{background:#153dda;color:white;padding-top:65px;padding-bottom:65px}.home>.interlude .glyph-stage{border:1px solid #fff5}.home>.interlude input{color:white}.home>.interlude input[type=text]{border-color:#fff6}.home>.interlude .lab-buttons{color:white}.home>.interlude input[type=range]{accent-color:white}.home>.about{background:var(--paper)}.home>.about .about-heading{padding-bottom:20px}.home>.about .about-art{display:none}.home>.about .about-content{display:block}.home>.about .about-copy{display:grid;grid-template-columns:1fr 1fr;gap:25px 9%}.home>.about .about-copy .lead{font-size:25px;line-height:1.65;grid-row:span 2}.home>.about .about-copy dl{margin:0}.home>.about .about-copy>a{grid-column:2;justify-self:start}
/* Project opening retains the same loose plane / arranged plane vocabulary. */
.ex-case{padding-top:78px;background:var(--paper);color:var(--ink)}.ex-opening{position:relative;height:165vh;min-height:900px;background:var(--ex-bg);color:var(--ex-ink)}.ex-opening-pin{position:sticky;top:78px;height:calc(100vh - 78px);height:calc(100svh - 78px);min-height:620px;overflow:hidden;isolation:isolate}.ex-case-meta{position:absolute;top:15px;left:var(--pad);right:var(--pad);display:flex;justify-content:space-between;gap:20px;z-index:5;font-size:11px}.ex-case-meta a{border-bottom:1px solid currentColor}.ex-case-name{position:absolute;top:65px;left:var(--pad);z-index:4;font:850 clamp(65px,10vw,170px)/1.07 Han,Archivo,sans-serif;letter-spacing:-.075em;transform:translate(calc(var(--cover-progress,0)*-12vw),calc(var(--cover-progress,0)*-18vh));opacity:calc(1 - var(--cover-progress,0)*.9);pointer-events:none}.ex-case-between .ex-case-name,.ex-case-tilt .ex-case-name{font-family:Archivo,sans-serif;font-stretch:75%;font-size:14vw;letter-spacing:-.06em}.ex-case-lead{position:absolute;bottom:16%;left:var(--pad);width:26%;z-index:4;opacity:calc(1 - var(--cover-progress,0)*2)}.ex-case-lead>p{font-size:11px;line-height:1.3}.ex-case-lead>span{display:block;font-size:clamp(17px,1.8vw,28px);font-weight:650;line-height:1.5;margin-top:16px}.ex-cover-art{position:absolute;right:calc(3% - var(--cover-progress,0)*3%);top:calc(29% - var(--cover-progress,0)*25%);width:calc(67% + var(--cover-progress,0)*33%);height:calc(63% + var(--cover-progress,0)*33%);transform:rotate(calc((1 - var(--cover-progress,0))*2deg));overflow:hidden;background:var(--ex-bg)}.ex-cover-art>img{width:100%;height:100%;object-fit:cover}.ex-cover-sheet{position:absolute;top:43%;left:var(--pad);width:23%;z-index:2;transform:translateX(calc(var(--cover-progress,0)*-35vw)) rotate(-8deg);box-shadow:0 10px 30px #0002}.ex-cover-sheet img{width:100%;height:auto}.ex-cover-caption{position:absolute;bottom:19px;right:var(--pad);font-size:10px;z-index:4;background:var(--ex-bg);padding:4px 9px}.ex-cover-down{position:absolute;bottom:22px;left:var(--pad);z-index:4;font-size:11px;background:var(--ex-bg);padding:4px 9px}.ex-chapters{position:sticky;top:78px;z-index:20;background:var(--ex-ink);color:var(--ex-bg);padding:16px var(--pad);display:flex;justify-content:space-between;align-items:center;gap:25px;font-size:11px}.ex-chapters>a{font-weight:750;font-size:14px}.ex-chapters>div{display:flex;gap:34px}.ex-chapters a{padding:3px 0}.ex-chapters a:hover{text-decoration:underline;text-underline-offset:5px}.ex-case section[id]{scroll-margin-top:150px}.ex-prologue{display:grid;grid-template-columns:1.12fr 1fr;gap:8%;padding:95px var(--pad) 85px;position:relative;background:var(--paper)}.ex-prologue-title>span{font-size:11px}.ex-prologue h2{font-size:clamp(30px,3.9vw,65px);line-height:1.33;font-weight:750;letter-spacing:-.055em;margin-top:30px}.ex-prologue-body>.ex-lede{font-size:20px;line-height:1.9;margin-bottom:25px}.ex-prologue-body>p{font-size:13px;line-height:1.9}.ex-facts{display:grid;grid-template-columns:1fr 1.5fr;gap:25px;margin-top:35px;padding-top:25px;border-top:1px solid var(--line)}.ex-facts>div>span{font-size:10px;opacity:.6}.ex-facts p{font-size:11px;line-height:1.8;margin-top:10px}
/* The images stay in view while a three-part argument unfolds beside them. */
.ex-sequence{display:grid;grid-template-columns:58% 42%;position:relative;background:var(--ex-bg);color:var(--ex-ink)}.ex-sequence-gallery{min-width:0;position:relative}.ex-sequence-pin{position:sticky;top:136px;height:calc(100vh - 136px);height:calc(100svh - 136px);min-height:550px;padding:25px 0 25px var(--pad);overflow:hidden}.ex-sequence-index{position:absolute;top:26px;left:var(--pad);font-size:11px;z-index:3}.ex-frames{height:100%;position:relative}.ex-frame{position:absolute;inset:8% 5% 17% 0;opacity:0;visibility:hidden;transform:translateY(25px) rotate(-3deg);transition:opacity .5s,transform .65s cubic-bezier(.22,1,.36,1),visibility .5s}.ex-frame.is-current{opacity:1;visibility:visible;transform:translateY(0) rotate(0)}.ex-frame>button{display:block;width:94%;height:86%;overflow:hidden}.ex-frame>button>img{width:100%;height:100%;object-fit:cover}.ex-frame-sheet{position:absolute;right:0;bottom:-2%;width:45%;transform:rotate(7deg);box-shadow:0 8px 20px #0002;border:5px solid var(--ex-bg);background:var(--ex-bg)}.ex-frame-sheet button,.ex-frame-sheet img{width:100%;display:block}.ex-frame figcaption{position:absolute;left:0;bottom:4%;font-size:11px;max-width:45%;line-height:1.7}.ex-frame-dots{position:absolute;bottom:27px;left:var(--pad);right:9%;display:flex;gap:25px;justify-content:space-between;font-size:11px}.ex-frame-dots button{display:flex;gap:10px;align-items:center;opacity:.45}.ex-frame-dots button[aria-pressed=true]{opacity:1}.ex-frame-dots i{height:4px;width:22px;background:currentColor;transform:scaleX(.3);transform-origin:left;transition:transform .3s}.ex-frame-dots button[aria-pressed=true] i{transform:scaleX(1)}.ex-sequence-copy{padding:0 var(--pad) 0 7%;min-width:0}.ex-step{min-height:88vh;display:flex;align-items:center;position:relative;padding:80px 0;scroll-margin-top:138px}.ex-step-counter{font-size:12px}.ex-step h2{font-size:clamp(65px,7.9vw,130px);font-weight:900;letter-spacing:-.09em;line-height:1.15;margin:22px 0 32px;position:relative;white-space:nowrap}.ex-step h2>span{font:400 .65em/1 Archivo,sans-serif;margin-left:.12em}.ex-step h3{font-size:22px;line-height:1.5;font-weight:650;margin-bottom:15px}.ex-step p{font-size:14px;line-height:1.9;margin:15px 0;max-width:27em}.ex-step p+p{font-size:12px;opacity:.8}.ex-step-note{display:block;margin-top:35px;padding-top:18px;border-top:1px solid color-mix(in srgb,currentColor 24%,transparent);font-size:10px}.ex-case-aftergrowth .ex-frame>button{width:70%;margin-left:12%}.ex-case-aftergrowth .ex-frame>button img{object-fit:contain}.ex-case-aftergrowth .ex-frame-sheet{width:42%;right:1%}.ex-case-wild .ex-frame>button img{object-fit:contain}.ex-case-between .ex-frame>button img{object-fit:contain;background:white}.ex-case-offclock .ex-frame:nth-child(2)>button img{object-fit:contain}.ex-case-chuodui .ex-sequence{background-image:url('assets/paper_texture.webp');background-size:800px}.ex-case-chuodui .ex-step h2{font-weight:650}.ex-case-tilt .ex-step h2{font-weight:500}
/* Each experiment is a small, honest demonstration of this project's mechanism. */
.ex-experiment{padding:80px var(--pad) 65px;background:var(--paper)}.ex-experiment-head{display:flex;justify-content:space-between;align-items:end;gap:40px;margin-bottom:35px}.ex-experiment-head>div>span{font-size:11px;display:block;margin-bottom:18px}.ex-experiment h2{font-size:clamp(29px,3.6vw,60px);letter-spacing:-.055em;font-weight:750;line-height:1.3}.ex-experiment-head>p{font-size:12px;line-height:1.9;max-width:28em}.ex-play-canvas{position:relative;height:min(66vw,600px);overflow:hidden;background:var(--ex-bg);color:var(--ex-ink)}.ex-play-controls{display:flex;justify-content:space-between;align-items:center;gap:25px;margin-top:22px;min-height:45px}.ex-play-controls>p{font-size:12px;max-width:30em}.ex-options{display:flex;gap:9px;flex-wrap:wrap}.ex-options button{padding:10px 20px;border:1px solid #9998;font-size:12px;transition:background .3s,color .3s}.ex-options button[aria-pressed=true]{background:var(--ex-ink);color:var(--ex-bg);border-color:var(--ex-ink)}.ex-demo-note{font-size:10px;color:#666;margin-top:23px}.ex-play-controls>label{display:flex;align-items:center;gap:20px;font-size:12px;flex:1;max-width:580px}.ex-play-controls input[type=range]{accent-color:var(--ex-ink);min-width:80px;flex:1}.ex-play-controls output{min-width:40px}.ex-patch-canvas{background:#e4dccf;display:flex;align-items:center;justify-content:center}.ex-patch-canvas>svg{height:94%;width:80%;position:relative;z-index:2}.ex-patch-words{position:absolute;right:5%;top:8%;font-size:clamp(40px,7vw,105px);font-weight:850;line-height:1.1;letter-spacing:-.07em;color:#38203930}.ex-patch{transform-box:fill-box;transform-origin:center;transition:transform .9s cubic-bezier(.22,1,.36,1)}.seam{fill:none;stroke:#eee3cf;stroke-width:3;stroke-dasharray:5 5}.ex-connecting-thread{fill:none;stroke:#382039;stroke-width:3;stroke-dasharray:700;stroke-dashoffset:700;transition:stroke-dashoffset 1.1s}.ex-patch-canvas[data-phase="1"] [data-patch-shape="0"],.ex-patch-canvas[data-phase="2"] [data-patch-shape="0"]{transform:translate(100px,30px) rotate(14deg)}.ex-patch-canvas[data-phase="1"] [data-patch-shape="2"],.ex-patch-canvas[data-phase="2"] [data-patch-shape="2"]{transform:translate(-90px,-30px) rotate(-16deg)}.ex-patch-canvas[data-phase="2"] .ex-connecting-thread{stroke-dashoffset:0}.ex-sign{display:grid;grid-template-columns:1.1fr 1fr;align-items:center;padding:5%;background:#f2ad4e;color:#193eb0}.ex-sign h3{font-size:clamp(40px,7vw,105px);font-weight:900;letter-spacing:-.075em;line-height:1.2;margin:30px 0}.ex-sign>div>span{font-size:13px}.ex-sign p{font-size:15px}.ex-sign-rule{display:block;margin-top:35px;border-top:2px solid;padding-top:15px}.ex-sign svg{width:100%;height:auto;transform:rotate(-7deg)}.ex-label-stage{display:flex;align-items:center;justify-content:center;background:#e4b33f;perspective:1400px}.ex-label-card{width:52%;height:84%;position:relative;transform-style:preserve-3d;transition:transform .85s cubic-bezier(.22,1,.36,1)}.ex-label-stage.is-back .ex-label-card{transform:rotateY(180deg)}.ex-label-front,.ex-label-back{position:absolute;inset:0;backface-visibility:hidden;background:#f0e8d7;box-shadow:0 15px 35px #4936062a;padding:6%;display:flex;flex-direction:column;justify-content:space-between}.ex-label-front>span{font-size:clamp(30px,4vw,65px);font-weight:900;letter-spacing:-.06em}.ex-label-front>img{height:60%;width:100%;object-fit:contain}.ex-label-front>p{font-size:12px}.ex-label-back{transform:rotateY(180deg)}.ex-label-back h3{font-size:clamp(30px,4vw,60px);line-height:1.2;letter-spacing:-.055em}.ex-label-back dl{margin:0}.ex-label-back dl>div{display:flex;justify-content:space-between;border-bottom:1px solid #24433155;padding:12px 0;font-size:13px}.ex-label-back dd{margin:0}.ex-label-back small{font-size:10px}.ex-label-side{position:absolute;right:5%;writing-mode:vertical-rl;font-size:14px;letter-spacing:.25em}.ex-ruler-canvas{display:flex;align-items:end;justify-content:center}.ex-ruler-canvas svg{position:absolute;inset:0;width:100%;height:85%}.ex-ruler-canvas h3{font-size:clamp(36px,5vw,80px);line-height:1.05;letter-spacing:-.06em;position:absolute;bottom:7%;left:5%;font-weight:850;transform:rotate(-7deg)}.ex-score{display:flex;flex-direction:column;align-items:center;padding:25px 5%;background:#e9d8b4}.ex-score>img{height:68%;width:100%;object-fit:contain;mix-blend-mode:multiply}.ex-score-lines{display:flex;width:100%;height:32%;gap:3%;align-items:center}.ex-score-lines>div{flex:1;display:flex;align-items:center;gap:8px;opacity:.28;height:70%;border-bottom:1px solid currentColor;position:relative;transition:opacity .4s}.ex-score-lines>div.active{opacity:1}.ex-score-lines span{position:absolute;top:0;font-size:11px}.ex-score-lines i{display:block;width:14%;height:8px;background:currentColor}.ex-score-lines>div:nth-child(1) i{transform:rotate(-55deg);height:50px;width:6px}.ex-score-lines>div:nth-child(2) i{height:35px;width:24%;border:2px solid;border-radius:50%;background:none}.ex-score-lines>div:nth-child(3) i{border-radius:50%;height:20px;width:20px}.ex-score-lines>div:nth-child(4) i{transform:skewY(-40deg);height:30px;width:15%;background:none;border-left:2px solid;border-bottom:2px solid}.ex-specimen{display:grid;grid-template-columns:1fr 1fr;padding:4%;background:#dce0d7;gap:7%}.ex-specimen>img{height:100%;width:100%;object-fit:contain}.ex-specimen>div{padding:3% 0;display:flex;flex-direction:column;align-items:start;min-height:0}.ex-specimen h3{font-size:clamp(40px,7vw,100px);letter-spacing:-.06em;margin:15px 0}.ex-specimen p{font-size:15px}.ex-specimen span,.ex-specimen small{font-size:11px}.ex-specimen svg{flex:1;min-height:0;width:80%;max-height:230px}.ex-light-compare{--split:50%;aspect-ratio:1.75;height:auto;background:#d4c8b7}.ex-light-compare>img,.ex-compare-layer,.ex-compare-layer>img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}.ex-compare-layer{clip-path:inset(0 calc(100% - var(--split)) 0 0)}.ex-compare-line{position:absolute;top:0;bottom:0;left:var(--split);width:2px;background:white;transform:translateX(-1px)}.ex-compare-line:after{content:'↔';position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);background:white;color:#462b27;width:45px;height:45px;display:grid;place-content:center;border-radius:50%;font-size:22px}.ex-compare-label-left,.ex-compare-label-right{position:absolute;bottom:20px;background:#f0f1f2;padding:7px 12px;font-size:11px}.ex-compare-label-left{left:20px}.ex-compare-label-right{right:20px}.ex-tea-table{background:#e4d6bf}.ex-tea-table>img{width:100%;height:100%;object-fit:cover}.ex-dialogue{position:absolute;inset:4% 6% auto;display:flex;justify-content:space-between;gap:25px}.ex-dialogue span{padding:12px 20px;background:#eee4d0;color:#613f36;max-width:43%;font-size:clamp(16px,2.5vw,35px);font-weight:650;transform:rotate(-4deg)}.ex-dialogue span+span{transform:rotate(4deg);margin-top:50px}.ex-case .interlude{padding:70px var(--pad);background:#153dda;color:white}.ex-case .interlude input{color:white}.ex-case .interlude .glyph-stage{border:1px solid #fff5}
/* An archive is browsable at a glance and legible in depth. */
.ex-archive{padding:80px var(--pad);background:white}.ex-archive-intro{display:flex;justify-content:space-between;gap:30px;align-items:end;margin-bottom:35px}.ex-archive-intro h2{font-size:clamp(38px,5vw,80px);letter-spacing:-.065em;font-weight:750}.ex-archive-intro p{font-size:12px;line-height:1.9}.ex-archive-layout{display:grid;grid-template-columns:27% 1fr;gap:4%;align-items:start}.ex-archive-list{display:flex;flex-direction:column}.ex-archive-list button{display:grid;grid-template-columns:80px 1fr 15px;align-items:center;text-align:left;gap:14px;padding:14px 12px;border-top:1px solid #ddd;transition:background .25s}.ex-archive-list button:last-child{border-bottom:1px solid #ddd}.ex-archive-list button[aria-pressed=true]{background:var(--ex-bg);color:var(--ex-ink)}.ex-archive-list img{width:80px;height:54px;object-fit:contain;background:#eee}.ex-archive-list span{font-size:11px;line-height:1.5}.ex-archive-list small{font-size:9px;display:block;margin-bottom:5px;opacity:.6}.ex-archive-list b{font-size:16px;font-weight:400;opacity:0}.ex-archive-list button[aria-pressed=true] b{opacity:1}.ex-archive-view{position:sticky;top:160px;min-width:0}.ex-archive-main{display:block;width:100%;background:#eceeef;cursor:zoom-in}.ex-archive-main img{width:100%;height:auto;aspect-ratio:1.777;object-fit:contain}.ex-archive-controls{display:flex;align-items:center;gap:16px;padding:15px 0;border-bottom:1px solid #ccc;font-size:11px}.ex-archive-controls>span{flex:1}.ex-archive-controls button{padding:5px 10px}.ex-archive-controls button:hover{background:var(--ex-bg)}.ex-archive-credit{font-size:10px;line-height:1.8;color:#666;margin-top:16px;max-width:65em}.ex-epilogue{background:var(--ex-ink);color:var(--ex-bg);padding:60px var(--pad) 25px}.ex-epilogue>p{font-size:clamp(19px,2.2vw,34px);font-weight:500;line-height:1.6;max-width:29em;margin-bottom:45px}.ex-next{background:var(--next-bg);color:var(--next-ink);padding:40px 5%;min-height:350px;display:grid;grid-template-columns:1fr 45%;align-items:center;gap:30px;position:relative;overflow:hidden}.ex-next>div>span{font-size:11px}.ex-next h2{font-size:clamp(32px,5vw,80px);letter-spacing:-.065em;line-height:1.2;margin:18px 0}.ex-next p{font-size:14px}.ex-next-art{height:270px;transform:rotate(7deg) translateY(8%);transition:transform .7s}.ex-next-art>img{width:100%;height:100%;object-fit:cover}.ex-next:hover .ex-next-art,.ex-next:focus-visible .ex-next-art{transform:rotate(0) translateY(0)}.ex-next-arrow{position:absolute;right:22px;top:15px;font-size:35px}.ex-end-index{display:flex;gap:15px;justify-content:space-between;margin-top:35px;flex-wrap:wrap}.ex-end-index a{font-size:11px;opacity:.6;display:flex;gap:7px;padding:5px 0}.ex-end-index a[aria-current=page],.ex-end-index a:hover{opacity:1}.ex-end-index span{font-size:9px}
/* Static mode preserves the story, rather than hiding motion-dependent content. */
.ex-static .ex-journey{height:auto}.ex-static .ex-theatre{position:relative;top:auto;height:auto;min-height:0;overflow:visible;background:transparent}.ex-static .ex-theatre-label,.ex-static .ex-reel{display:none}.ex-static .ex-scene{position:relative;opacity:1;visibility:visible;pointer-events:auto;background:var(--ex-bg);color:var(--ex-ink);min-height:650px;scroll-margin-top:78px}.ex-static .ex-opening{height:auto;min-height:0}.ex-static .ex-opening-pin{position:relative;top:0}.ex-static .ex-sequence{display:block;padding:55px var(--pad)}.ex-static .ex-sequence-gallery{display:none}.ex-static .ex-sequence-copy{padding:0}.ex-static .ex-step{min-height:0;padding:40px 0;display:grid;grid-template-columns:1fr 1fr;gap:7%;align-items:center}.ex-static .ex-step:before{content:'';display:block;aspect-ratio:1.3;background:var(--step-image) center/contain no-repeat}.ex-static .ex-step h2{font-size:65px;margin:10px 0 20px}.ex-static .ex-step p{font-size:13px}.ex-static .ex-step-note{margin-top:15px}.ex-static .ex-main-plane,.ex-static .ex-detail-plane{transition:none}
@media(min-width:1800px){.ex-theatre{min-height:750px}.ex-play-canvas{height:700px}.ex-sequence-pin{min-height:650px}.ex-scene-desc{font-size:16px}.ex-step p{font-size:16px}.ex-step p+p{font-size:14px}.ex-archive-list span{font-size:13px}}
@media(max-width:1150px){.ex-scene-copy h3{font-size:5.2vw}.ex-scene-desc{font-size:11px}.ex-scene-line{font-size:19px}.ex-step h2{font-size:7.7vw}.ex-step h3{font-size:20px}.ex-step p{font-size:12px}.ex-archive-layout{grid-template-columns:29% 1fr;gap:3%}.ex-archive-list button{grid-template-columns:55px 1fr 10px;padding:12px 8px;gap:9px}.ex-archive-list img{width:55px;height:45px}.ex-next{min-height:280px}.ex-next-art{height:220px}.ex-bridge-images{height:410px}}
@media(max-width:899px){
 .ex-theatre{top:auto;min-height:0}.ex-static .ex-scene{display:flex;flex-direction:column;align-items:stretch;padding:38px var(--pad) 90px;min-height:0}.ex-scene-copy{padding:0}.ex-direction{font-size:10px}.ex-scene-copy h3{font-size:clamp(34px,8vw,66px);margin:14px 0}.ex-scene-line{font-size:17px}.ex-scene-desc{font-size:12px;max-width:45em;margin-top:15px}.ex-enter{font-size:11px;padding:6px 0;margin-top:15px;gap:25px}.ex-enter span{font-size:22px}.ex-scene-art{height:65vw;min-height:250px;max-height:500px;margin:25px 0 0}.ex-main-plane{inset:3% 7% 18% 2%}.ex-art-word{font-size:18vw;bottom:0}.ex-detail-plane{right:0;width:36%;height:36%}.ex-scene-foot{bottom:25px;left:var(--pad);right:var(--pad);font-size:9px;align-items:start}.ex-scene-foot>span{max-width:40%}.ex-scene-foot>p{max-width:49%}.ex-scene-tilt .ex-art-word{font-size:17vw}.ex-bridge{padding:40px var(--pad) 55px}.ex-bridge-top{display:block;padding-bottom:35px}.ex-bridge-top p{font-size:28px}.ex-bridge-top>span{display:block;max-width:none;font-size:9px;margin-top:20px}.ex-bridge-body{grid-template-columns:1fr;gap:35px}.ex-bridge-images{height:76vw;max-height:500px}.ex-bridge-type .ex-between-word{font-size:clamp(50px,14vw,95px)}.ex-bridge-copy h2{font-size:40px}.ex-bridge-copy>p{font-size:13px;margin:20px 0;max-width:50em}.ex-bridge-copy>a{font-size:12px}.home>.interlude{padding:40px var(--pad)}.home>.about .about-copy{display:block}.home>.about .about-copy .lead{font-size:21px;margin-bottom:25px}.home>.about .about-copy dl{margin:25px 0}.home>.about .about-copy>a{display:inline-block}.ex-case{padding-top:78px}.ex-opening-pin{height:78vw;min-height:580px;max-height:850px}.ex-case-name{font-size:12vw;top:65px}.ex-case-meta{font-size:10px;top:18px}.ex-cover-art{width:80%;height:58%;top:30%;right:0}.ex-cover-sheet{width:31%;left:4%;top:52%}.ex-case-lead{width:auto;left:var(--pad);bottom:auto;top:20%;max-width:70%}.ex-case-lead>p{font-size:10px}.ex-case-lead>span{font-size:15px;margin-top:8px}.ex-cover-caption{font-size:9px;bottom:17px;max-width:40%}.ex-cover-down{font-size:10px;left:var(--pad);bottom:17px}.ex-chapters{top:78px;font-size:10px;padding:13px var(--pad);gap:15px}.ex-chapters>a{font-size:12px}.ex-chapters>span{display:none}.ex-chapters>div{gap:23px}.ex-prologue{grid-template-columns:1fr;padding:45px var(--pad);gap:30px}.ex-prologue h2{font-size:36px;margin-top:18px}.ex-prologue-body>.ex-lede{font-size:17px;line-height:1.8}.ex-prologue-body>p{font-size:12px}.ex-facts{margin-top:25px;gap:25px;grid-template-columns:1fr 1.7fr}.ex-facts p{font-size:10px}.ex-static .ex-sequence{padding:20px var(--pad)}.ex-static .ex-step{padding:35px 0;gap:30px}.ex-static .ex-step h2{font-size:55px}.ex-step h3{font-size:18px}.ex-static .ex-step p{font-size:12px}.ex-step-note{font-size:9px}.ex-experiment{padding:40px var(--pad)}.ex-experiment-head{display:block;margin-bottom:23px}.ex-experiment-head>div>span{font-size:10px;margin-bottom:14px}.ex-experiment h2{font-size:31px}.ex-experiment-head>p{max-width:40em;font-size:12px;margin-top:17px}.ex-play-canvas{height:62vw;min-height:300px;max-height:560px}.ex-play-controls{display:block}.ex-play-controls>p{font-size:11px;margin-top:17px}.ex-play-controls>label{max-width:none;font-size:11px;gap:12px}.ex-options button{font-size:10px;padding:9px 14px}.ex-demo-note{font-size:9px;margin-top:18px}.ex-patch-canvas>svg{width:100%}.ex-patch-words{font-size:9vw}.ex-sign{padding:5%;grid-template-columns:1.15fr 1fr}.ex-sign h3{font-size:8.5vw;margin:18px 0}.ex-sign>div>span{font-size:9px}.ex-sign p{font-size:11px}.ex-sign-rule{margin-top:22px;padding-top:10px}.ex-label-card{width:63%;height:85%}.ex-label-back h3{font-size:30px}.ex-label-back dl>div{font-size:10px;padding:6px 0}.ex-label-front>p{font-size:9px}.ex-label-side{font-size:10px;right:5%}.ex-label-back small{font-size:8px}.ex-ruler-canvas h3{font-size:9vw}.ex-score{padding:15px 3%}.ex-score-lines span{font-size:9px}.ex-score-lines>div{gap:6px}.ex-score-lines>div:nth-child(1) i{height:30px}.ex-score-lines>div:nth-child(2) i{height:22px}.ex-score-lines>div:nth-child(3) i{height:13px;width:13px}.ex-score-lines>div:nth-child(4) i{height:22px}.ex-specimen{gap:3%;padding:4%}.ex-specimen h3{font-size:9vw}.ex-specimen p{font-size:11px}.ex-specimen span,.ex-specimen small{font-size:9px}.ex-specimen svg{max-height:130px;width:100%}.ex-light-compare{min-height:0;height:auto;max-height:none;aspect-ratio:1.4}.ex-compare-label-left,.ex-compare-label-right{font-size:9px;bottom:12px;padding:5px 8px}.ex-compare-label-left{left:12px}.ex-compare-label-right{right:12px}.ex-compare-line:after{width:32px;height:32px;font-size:17px}.ex-dialogue span{font-size:4vw;padding:8px 12px}.ex-dialogue span+span{margin-top:30px}.ex-case .interlude{padding:40px var(--pad)}.ex-archive{padding:40px var(--pad)}.ex-archive-intro{display:block;margin-bottom:25px}.ex-archive-intro h2{font-size:40px}.ex-archive-intro p{font-size:11px;margin-top:18px}.ex-archive-layout{display:flex;flex-direction:column;gap:20px}.ex-archive-list{display:flex;flex-direction:row;width:100%;overflow-x:auto;scroll-snap-type:x proximity;gap:8px;padding-bottom:8px}.ex-archive-list button{display:flex;flex-direction:column;align-items:start;min-width:125px;width:125px;padding:8px;border:1px solid #ddd;gap:10px;scroll-snap-align:start}.ex-archive-list img{width:107px;height:65px}.ex-archive-list span{font-size:10px}.ex-archive-list b{display:none}.ex-archive-list small{display:inline;margin-right:5px}.ex-archive-view{width:100%;position:relative;top:auto;scroll-margin-top:140px}.ex-archive-controls{font-size:10px;gap:5px;padding:10px 0;flex-wrap:wrap}.ex-archive-controls>span{min-width:50%;text-align:center}.ex-archive-controls button{padding:4px 8px}.ex-archive-credit{font-size:9px}.ex-epilogue{padding:40px var(--pad) 25px}.ex-epilogue>p{font-size:21px;margin-bottom:25px}.ex-next{padding:28px 6%;min-height:230px;gap:15px;grid-template-columns:1fr 36%}.ex-next h2{font-size:30px;margin:15px 0}.ex-next p{font-size:10px;max-width:16em}.ex-next>div>span{font-size:9px}.ex-next-art{height:160px}.ex-next-arrow{font-size:22px;right:15px;top:10px}.ex-end-index{gap:10px 20px;margin-top:25px;justify-content:start}.ex-end-index a{font-size:10px}.ex-end-index span{font-size:8px}
}
@media(max-width:599px){.ex-case{padding-top:68px}.ex-opening-pin{min-height:530px}.ex-chapters{top:68px}.ex-chapters>div{gap:18px}.ex-chapters>a{font-size:10px}.ex-case-name{top:62px;font-size:14vw}.ex-case-meta{font-size:9px}.ex-case-meta>span:last-child{max-width:120px;text-align:right}.ex-cover-art{top:32%;height:53%;width:85%}.ex-cover-sheet{top:58%;width:36%}.ex-case-lead{top:23%;max-width:90%}.ex-case-lead>span{margin-top:5px;font-size:13px}.ex-case-lead>p{font-size:9px}.ex-cover-caption{font-size:8px}.ex-static .ex-step{display:block;padding:28px 0 35px}.ex-static .ex-step:before{aspect-ratio:1.3;margin-bottom:25px}.ex-static .ex-step h2{font-size:66px;margin:14px 0 20px}.ex-static .ex-step h3{font-size:20px}.ex-static .ex-step p{max-width:none;font-size:13px}.ex-step-counter{font-size:10px}.ex-prologue h2{font-size:31px}.ex-prologue-body>.ex-lede{font-size:16px}.ex-case-between .ex-case-name{font-size:17vw;top:70px}.ex-case-tilt .ex-case-name{font-size:23vw;top:55px}.ex-specimen>div>span{font-size:8px}.ex-label-front>span{font-size:32px}.ex-label-back h3{font-size:28px}.ex-label-card{width:72%}.ex-label-side{right:3%;font-size:9px}.ex-archive-controls [data-board-zoom]{display:none}.ex-next{grid-template-columns:1fr;min-height:360px}.ex-next-art{height:170px;width:70%;margin-left:auto;position:relative;right:-10%;margin-top:-15px}.ex-next h2{font-size:36px}.ex-next p{max-width:none}.ex-next>div>span{font-size:10px}.ex-sign h3{font-size:9vw}.ex-sign p{font-size:10px}.ex-sign>div>span{font-size:8px}.ex-score-lines>div{gap:4px}.ex-score-lines>div:nth-child(3) i{height:10px;width:10px}}
.ex-inline-frame{display:none}.ex-static .ex-step:before{display:none}.ex-static .ex-inline-frame{display:block;min-width:0}.ex-inline-frame button{display:block;width:100%;background:var(--ex-bg)}.ex-inline-frame img{width:100%;height:auto;max-height:500px;object-fit:contain}.ex-inline-frame figcaption{font-size:10px;margin-top:12px}.ex-static .ex-step:has(.ex-inline-frame) {align-items:center}
.ex-case-offcut .ex-prologue{border-bottom:2px dashed #38203955}.ex-case-offclock .ex-step:nth-child(2) h2{transform:rotate(-5deg);transform-origin:left center}.ex-case-aftergrowth .ex-prologue-title h2{font-weight:600}.ex-case-aftergrowth .ex-step h2{font-weight:550;letter-spacing:-.04em}.ex-case-wild .ex-prologue,.ex-case-wild .ex-experiment{background:#eee6d5}.ex-case-chuodui .ex-prologue,.ex-case-chuodui .ex-experiment{background:#eee4d5}.ex-case-chuodui .ex-prologue h2{font-weight:600}.ex-case-tilt .ex-prologue{background:#e5e1db}.ex-case-tilt .ex-sequence{background:#44382e;color:#f4dcc5}.ex-case-tilt .ex-frame-sheet{border-color:#44382e}.ex-case-tilt .ex-step h2{font-weight:450}
@media(min-width:900px) and (max-height:760px){.ex-theatre,.ex-opening-pin{min-height:500px}.ex-sequence-pin{min-height:440px}.ex-scene{padding-top:65px;padding-bottom:85px}.ex-scene-copy h3{font-size:4.5vw;margin:15px 0}.ex-scene-desc{font-size:11px;margin-top:14px}.ex-enter{margin-top:12px;padding-top:8px}.ex-scene-art{height:59vh}.ex-step{padding:45px 0}.ex-step h2{font-size:6.5vw;margin:14px 0 22px}.ex-step p{font-size:12px}.ex-step-note{margin-top:20px}}
::view-transition-group(selected-work){animation-duration:.8s;animation-timing-function:cubic-bezier(.22,1,.36,1)}::view-transition-old(selected-work),::view-transition-new(selected-work){height:100%;object-fit:cover;mix-blend-mode:normal}::view-transition-group(root){animation-duration:.4s}
@media(max-width:599px){.ex-static .ex-inline-frame{margin-bottom:25px}}
@media(prefers-reduced-motion:reduce){.ex-label-card,.ex-patch,.ex-frame,.ex-main-plane,.ex-detail-plane,.ex-next-art{transition:none}}