:root{--ink:#10183a;--blue:#1d4ed8;--sky:#a9c8ff;--cream:#fff7df;--orange:#ff5b2e;--yellow:#ffd74b;--line:rgba(16,24,58,.2);font-family:Inter,"Avenir Next","PingFang SC","Microsoft YaHei",sans-serif;color:var(--ink);background:#10183a}
*{box-sizing:border-box}
html,body{min-height:100%;margin:0}
button,a{font:inherit}
button{cursor:pointer}
button:focus-visible,a:focus-visible{outline:3px solid var(--yellow);outline-offset:4px}
.boot-screen{position:fixed;inset:0;z-index:50;overflow:hidden;display:grid;place-items:center;background:#020719;color:#dce6ff;transition:opacity .6s ease,visibility .6s ease}
.boot-screen::before{display:none}
.boot-screen.is-gone{opacity:0;visibility:hidden;pointer-events:none}
.boot-console{position:relative;width:min(670px,76vw);z-index:1}
.boot-loader-row{display:flex;align-items:center;gap:clamp(22px,5vw,70px)}
.boot-squares{flex:1;display:flex;justify-content:space-between;gap:clamp(7px,1.25vw,22px)}
.boot-squares i{display:block;width:clamp(9px,1.05vw,17px);aspect-ratio:1;background:#46536f;transition:background .12s linear,box-shadow .12s linear}
.boot-squares i.is-lit{background:#dce6ff;box-shadow:0 0 12px rgba(211,224,255,.34)}
.boot-percent,.boot-message{font-family:ui-monospace,SFMono-Regular,Menlo,monospace;font-size:clamp(11px,1vw,15px);letter-spacing:.17em}
.boot-percent{margin:0;white-space:nowrap}
.boot-message{min-height:17px;margin:24px 0 27px;color:#dce6ff}
.boot-path,.boot-logo,.boot-meter,.boot-sun,.boot-spark{display:none}
.start-button{display:flex;align-items:center;justify-content:space-between;width:178px;border:1px solid #dce6ff;background:transparent;color:#dce6ff;padding:10px 13px;font-weight:800;letter-spacing:.15em;font-size:11px;transition:transform .18s ease,background .18s ease,color .18s ease}
.start-button:disabled{border-color:#46536f;color:#66738f;cursor:wait}
.start-button:not(:disabled):hover{transform:translate(2px,-2px);background:#dce6ff;color:#020719}
@keyframes spin{to{rotate:360deg}
}


.world{min-height:100svh;overflow:hidden;position:relative;background:linear-gradient(180deg,#90b9ff 0 52%,#f9e5be 52% 100%);opacity:0;transition:opacity .7s ease}
.world.is-visible{opacity:1}
.world-sky{position:absolute;inset:0;pointer-events:none;background:repeating-linear-gradient(100deg,transparent 0 72px,rgba(255,255,255,.13) 73px 74px)}
.world-sky i{position:absolute;width:13px;height:13px;border-radius:50%;background:var(--cream);box-shadow:0 0 0 5px rgba(255,255,255,.15)}
.world-sky i:nth-child(1){left:13%;top:21%}
.world-sky i:nth-child(2){left:32%;top:12%;width:7px;height:7px}
.world-sky i:nth-child(3){left:53%;top:28%;width:8px;height:8px}
.world-sky i:nth-child(4){right:31%;top:18%;width:11px;height:11px}
.world-sky i:nth-child(5){right:11%;top:39%;width:7px;height:7px}
.world-sky i:nth-child(6){left:45%;top:40%;width:4px;height:4px}
.world-header{position:absolute;z-index:4;left:clamp(18px,4vw,64px);right:clamp(18px,4vw,64px);top:24px;display:flex;justify-content:space-between;align-items:center;font-size:11px;font-weight:800;letter-spacing:.11em}
.world-header p{margin:0}
.mini-mark{display:grid;place-items:center;width:36px;height:36px;border:2px solid var(--ink);color:var(--ink);text-decoration:none;border-radius:50%;font-weight:900;transform:rotate(-12deg);background:var(--yellow)}
.scene{height:100svh;min-height:660px;position:relative;perspective:1200px;isolation:isolate}
.scene-glow{position:absolute;width:min(50vw,650px);height:min(50vw,650px);left:21%;top:10%;border-radius:50%;background:radial-gradient(circle,#fdf2c1 0 9%,#ffcc55 9.5% 21%,transparent 21.5%);opacity:.7;filter:blur(2px)}
.sun-disc{position:absolute;width:clamp(130px,17vw,240px);height:clamp(130px,17vw,240px);border-radius:50%;top:17%;right:30%;background:linear-gradient(135deg,#ffd656,#ff7b40);box-shadow:20px 20px 0 rgba(255,94,46,.25)}
.desk-plane{position:absolute;width:100vw;height:58vh;bottom:-19vh;left:0;background:repeating-linear-gradient(90deg,#eabb72 0 56px,#e7aa5c 57px 60px);border-top:9px solid var(--ink);transform:rotateX(64deg);transform-origin:bottom;z-index:0}
.computer{position:absolute;z-index:2;left:50%;top:45%;width:min(500px,52vw);height:390px;transform:translate(-50%,-50%) rotateY(-7deg) rotateX(4deg)}
.monitor-shell{position:absolute;left:50%;top:0;width:72%;height:72%;transform:translateX(-50%)}
.monitor-frame{height:100%;width:100%;border:13px solid var(--ink);border-radius:20px;background:var(--ink);padding:8px;box-shadow:18px 18px 0 rgba(16,24,58,.21)}
.monitor-screen{width:100%;height:100%;position:relative;overflow:hidden;border-radius:6px;background:linear-gradient(135deg,#030817,#182d9e);display:grid;place-items:center;padding:25px}
.monitor-screen::after{content:"";position:absolute;inset:0;background:repeating-linear-gradient(0deg,transparent 0 3px,rgba(255,255,255,.045) 4px 5px);pointer-events:none}
.monitor-screen img{position:relative;z-index:1;max-width:82%;max-height:82%;object-fit:contain;filter:drop-shadow(0 0 10px rgba(255,92,46,.4))}
.monitor-screen span{position:absolute;z-index:1;bottom:13px;left:16px;color:var(--cream);font-size:9px;letter-spacing:.16em;font-weight:800}
.screen-cursor{position:absolute;right:22%;top:22%;width:14px;height:18px;z-index:2;background:var(--cream);clip-path:polygon(0 0,100% 62%,59% 67%,48% 100%)}
.monitor-neck{position:absolute;width:18%;height:19%;background:var(--ink);left:41%;top:99%;transform:skewX(-12deg)}
.monitor-foot{position:absolute;width:44%;height:6%;background:var(--ink);left:28%;top:116%;border-radius:100% 100% 0 0}
.keyboard{position:absolute;width:83%;height:60px;left:10%;top:84%;transform:skewX(-22deg) rotateX(63deg);background:#f8d99d;border:5px solid var(--ink);box-shadow:15px 15px 0 rgba(16,24,58,.22);padding:10px;display:grid;grid-template-columns:repeat(10,1fr);gap:4px}
.keyboard i{background:var(--ink);opacity:.88}
.cable{position:absolute;border-top:5px solid var(--ink);border-radius:50%;z-index:1;opacity:.9}
.cable-a{width:46vw;height:23vw;left:-11vw;top:8%;transform:rotate(8deg)}
.cable-b{width:31vw;height:16vw;right:-8vw;top:17%;transform:rotate(-9deg)}
.scene-copy{position:absolute;z-index:3;left:clamp(22px,7vw,100px);bottom:13vh;color:var(--ink);pointer-events:none}
.scene-copy p{margin:0 0 6px;font-size:11px;font-weight:900;letter-spacing:.24em}
.scene-copy h1{font-size:clamp(49px,9vw,142px);line-height:.76;letter-spacing:-.1em;margin:0;font-weight:950}
.scene-copy div{display:flex;gap:15px;align-items:center;margin-top:22px;font-size:10px;letter-spacing:.1em}
.scene-copy div b{background:var(--orange);padding:7px 8px;color:var(--cream)}
.scene-copy div span{max-width:120px;font-weight:750}
.scene-hint{position:absolute;z-index:2;bottom:4.5vh;left:50%;transform:translateX(-50%);font-size:10px;font-weight:900;letter-spacing:.15em;animation:blink 1.5s steps(2) infinite}
@keyframes blink{50%{opacity:.4}
}
.utility-pole{position:absolute;z-index:5;right:clamp(16px,7vw,125px);bottom:11vh;width:250px;height:66vh;min-height:480px}
.pole-body{position:absolute;width:19px;height:100%;bottom:0;left:56%;background:linear-gradient(90deg,#252a4c,#10183a 50%,#4d597c);border:3px solid var(--ink);z-index:1}
.pole-top{position:absolute;width:38px;height:38px;border-radius:50% 50% 10% 10%;background:var(--yellow);border:3px solid var(--ink);left:52%;top:-8px;z-index:2}
.pole-cross{position:absolute;width:105%;height:20px;background:var(--orange);border:3px solid var(--ink);left:3%;top:48px;transform:rotate(-3deg);z-index:2}
.pole-shadow{position:absolute;width:150px;height:28px;background:rgba(16,24,58,.25);filter:blur(4px);bottom:-6px;right:-30px;transform:rotate(-7deg)}
.pole-sign{position:absolute;right:42%;z-index:3;min-width:154px;display:flex;gap:12px;align-items:center;border:3px solid var(--ink);color:var(--ink);background:var(--cream);padding:10px 12px;font-weight:950;letter-spacing:.08em;font-size:13px;box-shadow:6px 6px 0 var(--ink);transition:transform .18s ease,background .18s ease}
.pole-sign span{font-family:ui-monospace,monospace;font-size:10px}
.pole-sign:hover{background:var(--yellow);transform:translate(-5px,-5px) rotate(-2deg)}
.sign-about{top:16%;transform:rotate(-4deg)}
.sign-work{top:38%;right:24%;transform:rotate(2deg);background:var(--yellow)}
.sign-contact{top:59%;right:40%;transform:rotate(-3deg);background:var(--orange);color:var(--cream)}
.scene-orb{position:absolute;z-index:1;border:4px solid var(--ink);border-radius:50%;box-shadow:10px 10px 0 rgba(16,24,58,.2)}
.orb-one{width:68px;height:68px;right:29%;bottom:20%;background:var(--yellow)}
.orb-two{width:32px;height:32px;left:31%;top:27%;background:var(--orange)}


.window-layer{position:fixed;z-index:20;inset:0;pointer-events:none;background:rgba(16,24,58,0);transition:background .25s ease}
.window-layer.has-open{pointer-events:auto;background:rgba(16,24,58,.36);backdrop-filter:blur(5px)}
.desktop-window{pointer-events:auto;position:absolute;overflow:auto;max-height:min(80vh,820px);background:var(--cream);border:4px solid var(--ink);box-shadow:18px 20px 0 rgba(16,24,58,.42);animation:window-in .3s cubic-bezier(.2,.9,.25,1.3)}
@keyframes window-in{from{opacity:0;transform:translateY(26px) scale(.94)}
to{opacity:1;transform:translateY(0) scale(1)}
}
.window-titlebar{position:sticky;top:0;z-index:5;min-height:42px;display:flex;align-items:center;justify-content:space-between;padding:0 8px 0 14px;background:var(--ink);color:var(--cream);font-family:ui-monospace,SFMono-Regular,Menlo,monospace;font-size:10px;font-weight:800;letter-spacing:.08em}
.window-titlebar>div{display:flex;gap:5px}
.window-control{width:27px;height:27px;border:0;background:var(--yellow);color:var(--ink);font-size:18px;line-height:1}
.close-control{background:var(--orange);color:var(--cream)}
.window-content{padding:clamp(22px,4vw,56px)}
.window-kicker{font-family:ui-monospace,SFMono-Regular,Menlo,monospace;font-size:10px;letter-spacing:.15em;font-weight:900;color:var(--blue);margin:0 0 11px}
.about-window{left:clamp(16px,10vw,180px);top:10vh;width:min(770px,80vw);transform:rotate(-1deg)}
.about-content{display:grid;grid-template-columns:130px 1fr;gap:25px;align-items:start}
.about-logo{display:block;width:124px;height:auto;max-width:100%;object-fit:contain;filter:drop-shadow(5px 6px 0 rgba(16,24,58,.16));transform:rotate(-3deg)}
.about-content h2,.contact-content h2,.directory-heading h2{margin:0;font-size:clamp(31px,5vw,59px);line-height:.9;letter-spacing:-.08em}
.about-content h2 em{font-style:normal;color:var(--orange);font-size:.62em;letter-spacing:-.06em}
.about-lead{font-size:17px;line-height:1.62;max-width:570px;margin:25px 0 0}
.about-capability{margin:12px 0 0;padding-left:11px;border-left:3px solid var(--orange);max-width:570px;font-size:13px;line-height:1.55;font-weight:720;color:rgba(16,24,58,.76)}
.about-facts{grid-column:1/-1;border-top:2px solid var(--ink);margin:15px 0 0;padding:0;display:grid;grid-template-columns:1fr 1fr}
.about-facts div{padding:14px 8px 12px 0;border-bottom:1px solid var(--line);margin-right:22px}
.about-facts dt{font-family:ui-monospace,monospace;font-size:10px;font-weight:900;color:var(--orange);letter-spacing:.1em}
.about-facts dd{margin:5px 0 0;line-height:1.45;font-size:13px;font-weight:650}
.work-window{left:7vw;top:7vh;width:min(1120px,86vw);transform:rotate(.35deg)}
.work-content{display:grid;grid-template-columns:210px 1fr;gap:34px}
.directory-heading{position:sticky;top:72px;height:max-content}
.directory-heading>p:last-child{font-size:13px;line-height:1.5}
.project-directory{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:18px}
.project-card{border:2px solid var(--ink);background:var(--cream);padding:0;text-align:left;color:var(--ink);box-shadow:5px 5px 0 var(--ink);transition:transform .2s ease,box-shadow .2s ease;overflow:hidden}
.project-card:hover{transform:translate(-4px,-5px);box-shadow:9px 10px 0 var(--orange)}
.project-card img{display:block;width:100%;height:150px;object-fit:cover;background:#ceddff}
.project-card div{display:flex;gap:10px;align-items:baseline;padding:10px}
.project-card b{font-size:14px;line-height:1.1}
.project-card span{font-size:9px;font-family:ui-monospace,monospace;color:var(--orange);font-weight:800}
.contact-window{right:clamp(16px,13vw,210px);top:18vh;width:min(500px,78vw);transform:rotate(1deg)}
.contact-content{min-height:350px;background:linear-gradient(145deg,var(--cream) 0 58%,var(--yellow) 58.5%)}
.contact-content a{display:block;width:max-content;max-width:100%;color:var(--blue);font-weight:900;font-size:clamp(17px,2vw,25px);text-decoration-color:var(--orange);text-decoration-thickness:4px;text-underline-offset:6px;margin:20px 0}
.contact-content>p:last-child{font-family:ui-monospace,monospace;font-size:11px;line-height:1.65;max-width:320px;margin-top:32px}
.project-window{left:1.5vw;right:1.5vw;top:2vh;bottom:2vh;max-height:none;overflow:auto}
.back-button{border:0;color:var(--cream);background:none;font:inherit;font-weight:900;letter-spacing:.08em;font-size:10px;padding:6px 5px}
.project-window-content{padding:0 0 55px}
.project-hero{position:relative;min-height:330px;overflow:hidden;color:var(--cream);display:flex;align-items:end;padding:clamp(24px,4vw,60px)}
.project-hero::after{content:"";position:absolute;inset:0;background:linear-gradient(90deg,rgba(16,24,58,.9),rgba(16,24,58,.24) 68%,rgba(16,24,58,.56))}
.project-hero img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.project-hero div{position:relative;z-index:1;max-width:630px}
.project-hero p{font-family:ui-monospace,monospace;font-size:10px;letter-spacing:.13em;font-weight:900;margin:0 0 12px}
.project-hero h2{font-size:clamp(42px,7vw,88px);letter-spacing:-.09em;line-height:.8;margin:0;text-wrap:balance}
.project-hero h2 small{display:block;margin-top:20px;font-size:.18em;letter-spacing:.02em;line-height:1.2;color:var(--yellow)}
.project-info{padding:28px clamp(14px,2vw,34px) 14px;display:grid;grid-template-columns:230px 1fr;gap:32px}
.project-meta{display:grid;gap:6px;align-content:start;padding-top:4px}
.project-meta span{font-family:ui-monospace,monospace;font-size:10px;font-weight:900;letter-spacing:.12em;color:var(--orange);margin-top:9px}
.project-meta b{font-size:12px;line-height:1.4}
.project-description{font-size:17px;line-height:1.7;max-width:680px;margin:0}
.case-study{display:grid;gap:16px;max-width:720px;margin:0;padding:0}
.case-study div{display:grid;grid-template-columns:104px minmax(0,1fr);gap:16px;align-items:start}
.case-study dt{margin:0;color:var(--orange);font:900 10px/1.35 ui-monospace,SFMono-Regular,Menlo,monospace;letter-spacing:.1em}
.case-study dd{margin:0;font-size:15px;line-height:1.72;color:var(--ink)}
.prototype-link{display:inline-flex;color:var(--cream);background:var(--blue);padding:9px 12px;margin-top:20px;font-size:12px;font-weight:900;text-decoration:none}
.project-gallery{padding:14px clamp(14px,2vw,34px);display:grid;grid-template-columns:repeat(12,1fr);gap:12px}
.project-gallery figure{margin:0;border:1px solid var(--line);background:#f3f0e6;overflow:hidden;cursor:zoom-in;position:relative}
.project-gallery img,.project-gallery video{width:100%;height:100%;display:block;object-fit:contain;background:#171924}
.project-gallery figcaption{position:absolute;left:0;right:0;bottom:0;background:rgba(16,24,58,.85);color:var(--cream);padding:7px 10px;font-size:10px;font-family:ui-monospace,monospace}
.gallery-card{grid-column:span 6;min-height:220px}
.gallery-card.large{grid-column:span 12}
.gallery-card.tall{grid-column:span 4;min-height:370px}
.gallery-card.video-card{grid-column:span 12;min-height:420px}
.media-fullscreen{position:absolute;right:11px;bottom:10px;z-index:1;padding:7px 9px;border:0;background:var(--yellow);font-size:10px;font-weight:900}
.lightbox{position:fixed;z-index:60;inset:0;background:rgba(7,11,29,.96);display:grid;place-items:center;padding:26px;overflow:hidden;cursor:zoom-out}
.lightbox img,.lightbox video{display:block;max-width:calc(100vw - 64px);max-height:calc(100svh - 64px);width:auto;height:auto;object-fit:contain}
.lightbox button{position:absolute;right:22px;top:17px;border:0;background:var(--orange);color:#fff;font-size:27px;width:39px;height:39px}
.lightbox .lightbox-nav{top:50%;right:auto;display:grid;place-items:center;width:48px;height:62px;padding:0;border:1px solid rgba(255,255,255,.82);background:rgba(16,24,58,.86);color:var(--cream);font-size:30px;line-height:1;transform:translateY(-50%);transition:background .16s ease,transform .16s ease}
.lightbox .lightbox-nav:hover{background:var(--orange);transform:translateY(-50%) scale(1.06)}
.lightbox .lightbox-nav--previous{left:22px}
.lightbox .lightbox-nav--next{right:22px}
.lightbox--panorama{grid-template-rows:minmax(0,1fr) auto;gap:12px;padding:48px 30px 26px;cursor:default}
.lightbox-panorama-viewport{width:min(100%,calc(100vw - 60px));height:min(72svh,520px);overflow-x:auto;overflow-y:hidden;overscroll-behavior:contain;border:1px solid rgba(255,255,255,.35);background:#070b1d;cursor:grab;touch-action:pan-x;scrollbar-color:var(--yellow) rgba(255,255,255,.22)}
.lightbox-panorama-viewport:active{cursor:grabbing}
.lightbox--panorama .lightbox-panorama-viewport img{display:block;width:auto;max-width:none;height:100%;max-height:none;object-fit:contain}
.lightbox-panorama-instruction{margin:0;color:rgba(255,255,255,.78);font:800 10px/1.3 ui-monospace,SFMono-Regular,Menlo,monospace;letter-spacing:.1em;text-align:center}
.no-scroll{overflow:hidden}

@media (max-width:800px){.boot-logo{height:205px}
.world-header p{display:none}
.scene{min-height:620px}
.computer{width:76vw;top:38%;height:300px}
.scene-copy{left:20px;bottom:18vh}
.scene-copy h1{font-size:64px}
.scene-copy div span{display:none}
.utility-pole{right:-28px;bottom:8vh;transform:scale(.74);transform-origin:bottom right}
.scene-hint{left:20px;transform:none;text-align:left;bottom:5vh;max-width:110px;line-height:1.5}
.sun-disc{right:15%;top:17%}
.about-window,.work-window,.contact-window{left:12px;right:12px;top:9vh;width:auto;max-height:83vh;transform:none}
.about-content{grid-template-columns:1fr}
.about-logo{width:84px}
.about-facts{grid-template-columns:1fr}
.work-content{display:block}
.directory-heading{position:relative;top:0;margin-bottom:25px}
.project-directory{grid-template-columns:1fr}
.project-card img{height:120px}
.project-window{inset:2vh 8px}
.project-info{grid-template-columns:1fr;gap:15px}
.project-gallery{grid-template-columns:1fr;padding-inline:18px}
.gallery-card,.gallery-card.large,.gallery-card.tall,.gallery-card.video-card{grid-column:auto;min-height:220px}
.gallery-card.tall{min-height:320px}
.gallery-card.video-card{min-height:235px}
.project-hero{min-height:260px}
.project-hero h2{font-size:49px}
.window-titlebar span#project-path{display:none}
.about-lead{font-size:15px}
.case-study{gap:14px}
.case-study div{grid-template-columns:1fr;gap:5px}
.case-study dd{font-size:14px;line-height:1.65}
.cable-a{width:90vw}
.cable-b{display:none}
}

/* Gallery media: preserve every project’s approved sequence, but give each
   row a shared visual height. Cards are transparent, captions live below the
   media, and `contain` is intentionally used everywhere—nothing is cropped. */
.project-gallery{--gallery-gap:12px;gap:var(--gallery-gap);align-items:start;background:transparent}
.project-gallery .gallery-card{margin:0;min-height:0;height:var(--card-height,320px);border:0;background:transparent;box-shadow:none;overflow:visible;cursor:zoom-in;position:relative;display:grid;grid-template-rows:minmax(0,1fr) auto;align-items:stretch}
.project-gallery figure.gallery-card>img,.project-gallery figure.gallery-card>video{grid-row:1;width:100%;height:100%;min-width:0;min-height:0;display:block;object-fit:contain;background:transparent;border:0;box-shadow:none}
.project-gallery figcaption{position:static;grid-row:2;margin:0;padding:7px 0 0;background:transparent;color:rgba(16,24,58,.56);font-size:10px;font-family:ui-monospace,monospace;line-height:1.35}
.project-gallery .media-fullscreen{bottom:32px;right:0}
.tag-pair{overflow:visible!important;cursor:zoom-in}
.tag-pair-media{grid-row:1;min-height:0;height:auto;display:grid;grid-template-columns:1fr 1fr;gap:8px;align-items:center;padding:0}
.tag-pair-media img{min-width:0;min-height:0;width:100%;height:100%;object-fit:contain!important;background:transparent!important}

/* 01 · one wide row, one two-up row, one two-up offset row. */
.gallery-urban .urban-wide{grid-column:1/-1;height:clamp(360px,50vw,620px)}
.gallery-urban .urban-pair{grid-column:span 6;height:clamp(290px,35vw,430px)}
.gallery-urban .urban-offset-left{grid-column:2/span 5;height:clamp(280px,33vw,400px);margin-top:0}
.gallery-urban .urban-offset-right{grid-column:8/span 5;height:clamp(280px,33vw,400px);margin-top:0}

/* 02 · one full-width image, a two-up row, then a three-up row. */
.gallery-jetlag .jet-single{grid-column:2/span 10;height:clamp(360px,52vw,620px)}
.gallery-jetlag .jet-pair-left,.gallery-jetlag .jet-pair-right{grid-column:span 6;height:clamp(300px,37vw,450px)}
.gallery-jetlag .jet-trio-a,.gallery-jetlag .jet-trio-b,.gallery-jetlag .jet-trio-c{grid-column:span 4;height:clamp(250px,29vw,350px)}

/* 03 · three single-image/video rows. */
.gallery-brain .brain-single{grid-column:1/-1;height:clamp(400px,55vw,650px)}
.gallery-brain .brain-system{grid-column:2/span 10;height:clamp(360px,50vw,590px)}
.gallery-brain .brain-film{grid-column:1/-1;height:clamp(380px,52vw,620px)}

/* 04 · six alternating poster/tag rows; poster and tag card heights match. */
.gallery-super{--gallery-gap:12px;gap:16px var(--gallery-gap);background:transparent}
.gallery-super .super-outcome,.gallery-super .super-final{grid-column:1/-1;height:clamp(380px,50vw,600px);margin-top:0}
.gallery-super .super-poster-left{grid-column:1/span 7;height:clamp(340px,43vw,520px)}
.gallery-super .super-poster-right{grid-column:6/span 7;height:clamp(340px,43vw,520px)}
.gallery-super .tag-pair{height:clamp(340px,43vw,520px);border:0;background:transparent;isolation:isolate;z-index:0}
.gallery-super .super-tag-right{grid-column:8/-1;transform:rotate(3.5deg) translateY(10px)}
.gallery-super .super-tag-left{grid-column:1/span 5;transform:rotate(-3.5deg) translateY(10px)}
.gallery-super .tag-pair::before{content:"";position:absolute;z-index:0;inset:5% -3%;background:linear-gradient(135deg,#ffed18,#ff7e29 45%,#fa316b 100%);clip-path:polygon(50% 0,58% 27%,78% 9%,72% 33%,100% 32%,76% 48%,96% 66%,70% 63%,75% 92%,53% 73%,40% 100%,38% 72%,9% 90%,27% 63%,0 58%,25% 44%,2% 22%,32% 30%);filter:drop-shadow(6px 8px 0 rgba(219,38,103,.28));pointer-events:none}
.gallery-super .tag-pair-media{position:relative;z-index:1;gap:2px;padding:14px 7px 0}
.gallery-super .tag-pair-media img{filter:drop-shadow(0 10px 7px rgba(132,24,57,.24))}
.gallery-super .tag-pair-media img:first-child{transform:rotate(-7deg) translate(-3px,-7px)}
.gallery-super .tag-pair-media img:last-child{transform:rotate(8deg) translate(4px,8px)}
.gallery-super .tag-pair figcaption{z-index:2;background:transparent}

/* 05 · posters two-up, calendars five-up, film, then large left + two stacked. */
.gallery-leftover{--gallery-gap:10px;gap:var(--gallery-gap);background:transparent}
.gallery-leftover .left-poster-a,.gallery-leftover .left-poster-b{grid-column:span 6;height:clamp(500px,60vw,760px)}
.gallery-leftover .left-calendar{grid-column:span 2;height:clamp(280px,34vw,420px)}
.gallery-leftover .left-calendar:nth-child(3){grid-column:2/span 2}
.gallery-leftover .left-film{grid-column:1/-1;height:clamp(360px,50vw,600px);margin-top:0}
.gallery-leftover .left-final-large{grid-column:1/span 7;grid-row:span 2;height:clamp(510px,60vw,780px)}
.gallery-leftover .left-final-top,.gallery-leftover .left-final-bottom{grid-column:8/-1;height:clamp(250px,30vw,385px)}

/* 06 · poster, five newly supplied illustrations in one row, then five
   individually hung front/back blessing tags. */
.gallery-wamao{--gallery-gap:10px;grid-template-columns:repeat(10,1fr);gap:34px var(--gallery-gap);background:transparent}
.gallery-wamao .wamao-cover{grid-column:1/-1;height:clamp(360px,50vw,600px)}
.gallery-wamao .wamao-poster{grid-column:span 2;height:auto;aspect-ratio:1746 / 2480}
.gallery-wamao .wamao-retail{grid-column:1/-1;height:clamp(430px,60vw,820px);margin-top:8px}
.gallery-wamao .wamao-tag{grid-column:span 2;height:auto;min-height:0;border:0;background:transparent;overflow:visible!important;grid-template-rows:auto auto}
.gallery-wamao .wamao-tag:nth-of-type(7){transform:rotate(-3deg)}
.gallery-wamao .wamao-tag:nth-of-type(8){transform:rotate(2deg) translateY(16px)}
.gallery-wamao .wamao-tag:nth-of-type(9){transform:rotate(-1.5deg) translateY(-4px)}
.gallery-wamao .wamao-tag:nth-of-type(10){transform:rotate(3deg) translateY(15px)}
.gallery-wamao .wamao-tag:nth-of-type(11){transform:rotate(-2.5deg) translateY(1px)}
.gallery-wamao .wamao-tag .tag-pair-media{height:auto;padding:0;gap:8px;align-items:start}
.gallery-wamao .hanging-tag{position:relative;display:block;height:auto;min-width:0;padding-top:42px;overflow:visible}
.gallery-wamao .hanging-tag::before{content:"";position:absolute;z-index:2;left:50%;top:0;width:2px;height:calc(42px + min(19px,1.5vw));background:#af1523;transform:translateX(-50%);transform-origin:bottom;border-radius:100% 100% 0 0;box-shadow:1px 0 0 rgba(255,255,255,.4);pointer-events:none}
.gallery-wamao .hanging-tag--front::before{transform:translateX(-50%) rotate(-4deg)}
.gallery-wamao .hanging-tag--back::before{transform:translateX(-50%) rotate(4deg)}
.gallery-wamao .hanging-tag img{position:relative;z-index:1;width:100%;height:auto;display:block;object-fit:initial!important;background:transparent!important;filter:drop-shadow(5px 9px 8px rgba(106,41,40,.22))}
.gallery-wamao .wamao-tag figcaption{background:transparent}

/* 07 · the existing large-left/right-detail grouping remains untouched. */
.gallery-commercial{--gallery-gap:12px;gap:var(--gallery-gap);background:transparent}
.gallery-commercial .commercial-poster{grid-column:1/span 5;grid-row:span 2;height:clamp(552px,68vw,852px)}
.gallery-commercial .commercial-graphic{grid-column:6/-1;height:clamp(270px,34vw,420px)}
.gallery-commercial .commercial-small-a{grid-column:6/span 3;height:clamp(270px,34vw,420px);margin-top:0}
.gallery-commercial .commercial-small-b{grid-column:10/span 3;height:clamp(270px,34vw,420px)}
.gallery-commercial .commercial-sketch{grid-column:2/span 4;height:clamp(270px,34vw,420px);margin-top:0}
.gallery-commercial .commercial-product{grid-column:7/span 3;height:clamp(270px,34vw,420px);margin-top:0}
.gallery-commercial .commercial-wide{grid-column:4/span 7;height:clamp(300px,36vw,460px)}
.gallery-commercial .commercial-film{grid-column:3/span 8;height:clamp(350px,46vw,580px);margin-top:0}

@media (max-width:800px){
  /* Retain each desktop row’s columns on narrow displays; row heights shrink
     rather than stacking, cropping, or changing the established sequence. */
  .project-gallery.gallery-urban,.project-gallery.gallery-jetlag,.project-gallery.gallery-brain,.project-gallery.gallery-super,.project-gallery.gallery-leftover,.project-gallery.gallery-commercial{grid-template-columns:repeat(12,minmax(0,1fr));padding-inline:10px}
  .project-gallery.gallery-wamao{grid-template-columns:repeat(10,minmax(0,1fr));padding-inline:10px}
  .project-gallery.gallery-urban .urban-wide{grid-column:1/-1;height:clamp(220px,55vw,360px)}
  .project-gallery.gallery-urban .urban-pair{grid-column:span 6;height:clamp(180px,43vw,290px)}
  .project-gallery.gallery-urban .urban-offset-left{grid-column:2/span 5;height:clamp(175px,40vw,280px)}
  .project-gallery.gallery-urban .urban-offset-right{grid-column:8/span 5;height:clamp(175px,40vw,280px)}
  .project-gallery.gallery-jetlag .jet-single{grid-column:2/span 10;height:clamp(245px,58vw,360px)}
  .project-gallery.gallery-jetlag .jet-pair-left,.project-gallery.gallery-jetlag .jet-pair-right{grid-column:span 6;height:clamp(195px,45vw,300px)}
  .project-gallery.gallery-jetlag .jet-trio-a,.project-gallery.gallery-jetlag .jet-trio-b,.project-gallery.gallery-jetlag .jet-trio-c{grid-column:span 4;height:clamp(160px,37vw,250px)}
  .project-gallery.gallery-brain .brain-single,.project-gallery.gallery-brain .brain-film{grid-column:1/-1;height:clamp(250px,60vw,400px)}
  .project-gallery.gallery-brain .brain-system{grid-column:2/span 10;height:clamp(230px,55vw,360px)}
  .project-gallery.gallery-super .super-outcome,.project-gallery.gallery-super .super-final{grid-column:1/-1;height:clamp(245px,58vw,380px)}
  .project-gallery.gallery-super .super-poster-left{grid-column:1/span 7;height:clamp(225px,52vw,340px)}
  .project-gallery.gallery-super .super-poster-right{grid-column:6/span 7;height:clamp(225px,52vw,340px)}
  .project-gallery.gallery-super .tag-pair{height:clamp(225px,52vw,340px)}
  .project-gallery.gallery-super .super-tag-right{grid-column:8/-1}
  .project-gallery.gallery-super .super-tag-left{grid-column:1/span 5}
  .project-gallery.gallery-leftover .left-poster-a,.project-gallery.gallery-leftover .left-poster-b{grid-column:span 6;height:clamp(300px,66vw,500px)}
  .project-gallery.gallery-leftover .left-calendar{grid-column:span 2;height:clamp(165px,33vw,280px)}
  .project-gallery.gallery-leftover .left-calendar:nth-child(3){grid-column:2/span 2}
  .project-gallery.gallery-leftover .left-film{grid-column:1/-1;height:clamp(225px,52vw,360px)}
  .project-gallery.gallery-leftover .left-final-large{grid-column:1/span 7;grid-row:span 2;height:clamp(310px,58vw,510px)}
  .project-gallery.gallery-leftover .left-final-top,.project-gallery.gallery-leftover .left-final-bottom{grid-column:8/-1;height:clamp(150px,28vw,250px)}
  .project-gallery.gallery-wamao .wamao-cover{grid-column:1/-1;height:clamp(220px,55vw,360px)}
  .project-gallery.gallery-wamao .wamao-poster{grid-column:span 2;height:auto;aspect-ratio:1746 / 2480}
  .project-gallery.gallery-wamao .wamao-retail{grid-column:1/-1;height:clamp(260px,68vw,460px)}
  .project-gallery.gallery-wamao .wamao-tag{grid-column:span 2;height:auto;min-height:0}
  .project-gallery.gallery-commercial .commercial-poster{grid-column:1/span 5;grid-row:span 2;height:clamp(350px,72vw,552px)}
  .project-gallery.gallery-commercial .commercial-graphic{grid-column:6/-1;height:clamp(170px,36vw,270px)}
  .project-gallery.gallery-commercial .commercial-small-a{grid-column:6/span 3;height:clamp(170px,36vw,270px)}
  .project-gallery.gallery-commercial .commercial-small-b{grid-column:10/span 3;height:clamp(170px,36vw,270px)}
  .project-gallery.gallery-commercial .commercial-sketch{grid-column:2/span 4;height:clamp(170px,36vw,270px)}
  .project-gallery.gallery-commercial .commercial-product{grid-column:7/span 3;height:clamp(170px,36vw,270px)}
  .project-gallery.gallery-commercial .commercial-wide{grid-column:4/span 7;height:clamp(190px,40vw,300px)}
  .project-gallery.gallery-commercial .commercial-film{grid-column:3/span 8;height:clamp(220px,48vw,350px)}
  .project-gallery .media-fullscreen{bottom:30px}
  .gallery-wamao .hanging-tag{padding-top:34px}
  .gallery-wamao .hanging-tag::before{height:calc(34px + min(13px,1.5vw))}
}

/* 07 · commercial collaboration uses a separate desktop-like window layer.
   It intentionally never turns the page into a darkened modal. */
.window-layer.commercial-desktop-mode{background:transparent;backdrop-filter:none}
.project-window.commercial-directory-window{left:clamp(12px,5vw,72px);right:auto;top:clamp(18px,7vh,66px);bottom:auto;width:min(430px,40vw);max-height:min(77vh,700px);overflow:auto;box-shadow:9px 10px 0 rgba(16,24,58,.36);transform:none}
.commercial-directory-content{padding:24px 22px 25px;background:var(--cream)}
.commercial-directory-heading{padding-bottom:19px;border-bottom:2px solid var(--ink)}
.commercial-directory-heading h2{margin:0;font-size:clamp(29px,3vw,43px);line-height:.88;letter-spacing:-.07em}
.commercial-directory-heading h2 em{display:block;margin-top:8px;color:var(--orange);font-size:.37em;font-style:normal;letter-spacing:.04em}
.commercial-directory-heading>p:last-child{margin:15px 0 0;font-size:12px;line-height:1.55}
.commercial-project-list{display:grid;gap:10px;margin-top:17px}
.commercial-project-button{width:100%;display:grid;grid-template-columns:34px minmax(0,1fr) auto;gap:10px;align-items:center;border:2px solid var(--ink);border-radius:0;background:#fffdf7;color:var(--ink);padding:10px;text-align:left;box-shadow:4px 4px 0 rgba(16,24,58,.55);transition:transform .15s ease,box-shadow .15s ease,background .15s ease}
.commercial-project-button:hover{background:var(--yellow);transform:translate(-3px,-3px);box-shadow:7px 7px 0 var(--ink)}
.commercial-folder-icon{display:grid;place-items:center;width:31px;height:31px;background:var(--blue);color:var(--cream);font:800 9px ui-monospace,SFMono-Regular,Menlo,monospace;letter-spacing:.06em}
.commercial-project-name{min-width:0;display:grid;gap:4px}
.commercial-project-name b{font-size:13px;line-height:1.2}
.commercial-project-name small{color:#56617d;font-size:9px;line-height:1.35}
.commercial-project-button i{font:800 8px ui-monospace,SFMono-Regular,Menlo,monospace;color:var(--orange);font-style:normal;white-space:nowrap}

.commercial-project-window{pointer-events:auto;position:absolute;display:grid;grid-template-rows:41px minmax(0,1fr);width:min(960px,72vw);height:min(650px,74vh);max-height:74vh;overflow:hidden;border:3px solid var(--ink);border-radius:0;background:#fff;box-shadow:8px 9px 0 rgba(16,24,58,.46);animation:commercial-window-in .24s ease-out;isolation:isolate}
@keyframes commercial-window-in{from{opacity:0;transform:translateY(14px)}to{opacity:1;transform:translateY(0)}}
.commercial-project-window.is-dragging{cursor:grabbing;box-shadow:12px 15px 0 rgba(16,24,58,.5)}
.commercial-window-titlebar{min-width:0;display:flex;align-items:center;justify-content:space-between;gap:10px;background:#13265e;color:var(--cream);padding:0 6px 0 13px;font:800 10px ui-monospace,SFMono-Regular,Menlo,monospace;letter-spacing:.07em;cursor:grab;user-select:none;touch-action:none}
.commercial-window-titlebar>span{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.commercial-window-close{display:grid;place-items:center;flex:0 0 29px;width:29px;height:29px;border:1px solid rgba(255,255,255,.8);border-radius:0;background:#cf3031;color:#fff;font-size:20px;line-height:1;transition:background .15s ease,transform .15s ease}
.commercial-window-close:hover{background:#ff5b2e;transform:scale(1.05)}
.commercial-window-body{min-height:0;display:flex;overflow:hidden;background:#fff}
.commercial-media-pane{flex:0 0 63%;min-width:0;min-height:0;overflow-y:auto;overflow-x:hidden;overscroll-behavior:contain;display:grid;align-content:start;gap:14px;padding:15px;background:#f4f1e7;touch-action:pan-y}
.commercial-media-item{width:100%;margin:0;padding:0;background:transparent}
.commercial-media-item img,.commercial-media-item video{display:block;width:100%;height:auto;max-width:100%;object-fit:contain;background:transparent}
.commercial-media-item img{cursor:zoom-in}
.commercial-video-item{border:1px solid rgba(16,24,58,.25);background:#10183a}
.commercial-video-item figcaption{padding:7px 9px;color:var(--cream);font:800 9px ui-monospace,SFMono-Regular,Menlo,monospace;letter-spacing:.05em}
.commercial-media-empty{min-height:100%;display:grid;place-content:center;gap:9px;border:2px dashed rgba(16,24,58,.45);padding:28px;text-align:center;color:#53627d;background:#fffdf7}
.commercial-media-empty b{font:900 11px ui-monospace,SFMono-Regular,Menlo,monospace;letter-spacing:.08em;color:var(--orange)}
.commercial-media-empty span{font-size:12px;line-height:1.55}
.commercial-copy-pane{flex:1;min-width:0;min-height:0;overflow-y:auto;overscroll-behavior:contain;padding:23px 21px 25px;border-left:2px solid var(--ink);background:#fffdf8;color:var(--ink);touch-action:pan-y}
.commercial-copy-index{margin:0 0 12px;color:var(--orange);font:800 9px ui-monospace,SFMono-Regular,Menlo,monospace;letter-spacing:.1em;line-height:1.4}
.commercial-copy-pane h2{margin:0;font-size:clamp(23px,2.3vw,36px);line-height:.96;letter-spacing:-.065em;overflow-wrap:anywhere}
.commercial-copy-pane dl{display:grid;gap:11px;margin:21px 0;padding:15px 0;border-top:1px solid var(--line);border-bottom:1px solid var(--line)}
.commercial-copy-pane dl div{display:grid;gap:3px}
.commercial-copy-pane dt{color:var(--blue);font:900 9px ui-monospace,SFMono-Regular,Menlo,monospace;letter-spacing:.09em}
.commercial-copy-pane dd{margin:0;font-size:12px;line-height:1.45;font-weight:700}
.commercial-description{margin:0;font-size:14px;line-height:1.7}
.commercial-case-study{gap:15px}
.commercial-case-study div{grid-template-columns:1fr;gap:5px}
.commercial-case-study dd{font-size:13px;line-height:1.68}

@media (max-width:760px){
  .project-window.commercial-directory-window{left:8px;right:8px;top:3vh;width:auto;max-height:82vh}
  .commercial-directory-content{padding:20px 16px}
  .commercial-project-window{left:8px!important;top:8px!important;width:calc(100vw - 16px);height:calc(100svh - 16px);max-height:calc(100svh - 16px);grid-template-rows:39px minmax(0,1fr)}
  .commercial-window-body{flex-direction:column}
  .commercial-media-pane{flex:0 0 56%;height:56%;padding:12px;gap:12px}
  .commercial-copy-pane{flex:1;border-top:2px solid var(--ink);border-left:0;padding:17px}
  .lightbox{padding:18px}
  .lightbox img,.lightbox video{max-width:calc(100vw - 44px);max-height:calc(100svh - 44px)}
  .lightbox .lightbox-nav{width:42px;height:54px;font-size:26px}
  .lightbox .lightbox-nav--previous{left:8px}
  .lightbox .lightbox-nav--next{right:8px}
  .lightbox--panorama{padding:45px 15px 18px}
  .lightbox-panorama-viewport{width:calc(100vw - 30px);height:min(64svh,380px)}
}

/* Commercial board: all projects appear at once as a non-overlapping desktop
   spread. Clicking a small window opens the single enlarged reading window. */
.commercial-board-layer{position:absolute;inset:0;z-index:42;pointer-events:none}
.commercial-board{position:absolute;inset:0;display:grid;grid-template-columns:repeat(12,minmax(0,1fr));grid-template-rows:42px minmax(138px,1.16fr) minmax(122px,.94fr) minmax(126px,1fr);gap:clamp(8px,1.1vw,16px);padding:clamp(22px,5vh,54px) clamp(18px,5vw,76px) clamp(18px,4vh,42px);pointer-events:none}
.commercial-board-header{grid-column:1/-1;grid-row:1;display:flex;align-items:center;justify-content:flex-end;pointer-events:auto}
.commercial-board-close{display:grid;place-items:center;flex:0 0 29px;width:29px;height:29px;border:2px solid var(--cream);border-radius:0;background:var(--orange);color:var(--cream);font-size:19px;line-height:1;box-shadow:3px 3px 0 rgba(16,24,58,.5)}
.commercial-board-window{position:relative;min-width:0;min-height:0;display:grid;grid-template-rows:31px minmax(0,1fr) auto;overflow:hidden;border:3px solid var(--ink);border-radius:0;background:#fffdf7;color:var(--ink);box-shadow:5px 6px 0 rgba(16,24,58,.42);padding:0;text-align:left;pointer-events:auto;transition:box-shadow .16s ease,border-color .16s ease}
.commercial-board-window:hover,.commercial-board-window:focus-visible{border-color:var(--orange);box-shadow:8px 9px 0 rgba(16,24,58,.55);outline:none}
.commercial-board-titlebar{display:flex;align-items:center;justify-content:space-between;gap:7px;min-width:0;padding:0 8px;background:#152a68;color:var(--cream);font:800 9px ui-monospace,SFMono-Regular,Menlo,monospace;letter-spacing:.04em}
.commercial-board-titlebar b{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.commercial-board-titlebar i{font-size:13px;font-style:normal;flex:0 0 auto;color:var(--yellow)}
.commercial-board-preview{position:relative;min-width:0;min-height:0;display:grid;place-items:center;overflow:hidden;padding:7px;background:#eef0f5}
.commercial-board-preview img{display:block;max-width:100%;max-height:100%;width:100%;height:100%;object-fit:contain}
.commercial-board-caption{display:grid;gap:2px;padding:7px 9px 8px;background:#fffdf7;border-top:1px solid rgba(16,24,58,.22)}
.commercial-board-caption b{font-size:10px;line-height:1.15}
.commercial-board-caption small{font:800 8px ui-monospace,SFMono-Regular,Menlo,monospace;line-height:1.25;color:#53627d;letter-spacing:.025em}
.commercial-board-placeholder{align-self:stretch;justify-self:stretch;display:grid;place-content:center;gap:7px;padding:12px;text-align:center;background:linear-gradient(135deg,#fff0bd,#ffbd8d 56%,#f37386);color:#13265e}
.commercial-board-placeholder b{font-size:clamp(11px,1.25vw,16px);line-height:1.05;letter-spacing:-.04em}
.commercial-board-placeholder small{font:800 8px ui-monospace,SFMono-Regular,Menlo,monospace;line-height:1.3;letter-spacing:.08em}
.commercial-board-window--1{grid-column:1/span 4;grid-row:2/span 2}
.commercial-board-window--2{grid-column:5/span 5;grid-row:2}
.commercial-board-window--3{grid-column:10/span 3;grid-row:2/span 2}
.commercial-board-window--4{grid-column:5/span 3;grid-row:3}
.commercial-board-window--5{grid-column:8/span 2;grid-row:3}
.commercial-board-window--6{grid-column:1/span 6;grid-row:4}
.commercial-board-window--7{grid-column:7/span 6;grid-row:4}
.commercial-project-window{width:min(1120px,90vw);height:min(720px,84vh);max-height:84vh}

@media (max-width:850px){
  .commercial-board{overflow-y:auto;grid-template-columns:repeat(2,minmax(0,1fr));grid-template-rows:auto;grid-auto-rows:minmax(172px,28vh);align-content:start;padding:16px 12px 28px}
  .commercial-board-header{grid-column:1/-1;grid-row:auto;min-height:34px}
  .commercial-board-window,.commercial-board-window--1,.commercial-board-window--2,.commercial-board-window--3,.commercial-board-window--4,.commercial-board-window--5,.commercial-board-window--6,.commercial-board-window--7{grid-column:auto;grid-row:auto}
  .commercial-board-window--1,.commercial-board-window--3{grid-row:span 2}
}

@media (max-width:520px){
  .commercial-board{grid-template-columns:1fr;grid-auto-rows:minmax(190px,34vh)}
  .commercial-board-window--1,.commercial-board-window--3{grid-row:auto}
}

@media (max-width:760px){
  .commercial-project-window{left:8px!important;top:8px!important;width:calc(100vw - 16px);height:calc(100svh - 16px);max-height:calc(100svh - 16px)}
}