@import url('https://fonts.googleapis.com/css2?family=DM+Mono&family=Noto+Sans+SC:wght@400;500;700&family=Playfair+Display:ital,wght@0,600;1,600&display=swap');
#project-01 .project-hero{-webkit-mask-image:linear-gradient(90deg,transparent 0,#000 15%,#000 100%);mask-image:linear-gradient(90deg,transparent 0,#000 15%,#000 100%)}@media(max-width:650px){#project-01 .project-hero{-webkit-mask-image:none;mask-image:none}}
#project-01{padding:0 0 8vw 3vw;grid-template-columns:minmax(320px,38%) 1fr;gap:0;min-height:calc(100vh - 72px);scroll-margin-top:72px}#project-01 .project-heading{padding:10vh 4vw 80px 0}#project-01 .project-hero{width:100%!important;height:calc(100vh - 72px);object-fit:cover;object-position:center;margin-bottom:clamp(160px,24vh,260px)!important}@media(max-width:650px){#project-01{display:block;padding:100px 20px 50px;min-height:100vh}#project-01 .project-heading{padding:0}#project-01 .project-hero{height:auto;object-fit:contain;margin-bottom:90px!important}}
#project-01 .project-hero{margin-bottom:clamp(160px,24vh,260px)!important}@media(max-width:650px){#project-01 .project-hero{margin-bottom:90px!important}}
#project-01 .project-heading{height:calc(100svh - 72px);min-height:calc(100vh - 72px);position:sticky;top:72px;padding-bottom:92px}
#project-01 .project-art>.project-hero{height:calc(100svh - 72px)!important;min-height:calc(100vh - 72px);object-fit:contain!important;object-position:center!important;background:#050505;margin-bottom:clamp(180px,28vh,320px)!important}
#project-01 .scroll-cue{position:absolute;left:0;bottom:28px;display:inline-flex;color:#fff;text-decoration:none;border-bottom:1px solid currentColor;padding-bottom:6px;font:10px 'DM Mono',monospace;letter-spacing:.13em}
#project-01 .scroll-cue:hover{color:var(--acid)}
#project-01-process{scroll-margin-top:96px}
@media(max-width:650px){#project-01 .project-heading{height:auto;min-height:0;position:relative;top:auto;padding-bottom:0}#project-01 .project-art>.project-hero{height:auto!important;min-height:0;object-fit:contain!important;margin-bottom:90px!important}#project-01 .scroll-cue{position:static;margin-top:32px}}
#project-02{padding:0 0 8vw 3vw;grid-template-columns:minmax(320px,38%) 1fr;gap:0;min-height:calc(100vh - 72px);scroll-margin-top:72px}
#project-02 .project-heading{height:calc(100svh - 72px);min-height:calc(100vh - 72px);position:sticky;top:72px;padding:10vh 4vw 92px 0}
#project-02 .project-art{display:block}
#project-02 .project-art>.project-hero{display:block;width:100%;height:calc(100svh - 72px)!important;min-height:calc(100vh - 72px);object-fit:contain!important;object-position:center!important;background:#050505;margin:0 0 clamp(180px,28vh,320px)!important;-webkit-mask-image:linear-gradient(90deg,transparent 0,#000 15%,#000 100%);mask-image:linear-gradient(90deg,transparent 0,#000 15%,#000 100%)}
#project-02 .project-art>img:not(.project-hero){display:block;width:100%;height:auto;margin:0 0 clamp(35px,5vw,80px)}
#project-02 .scroll-cue{position:absolute;left:0;bottom:28px;display:inline-flex;color:#fff;text-decoration:none;border-bottom:1px solid currentColor;padding-bottom:6px;font:10px 'DM Mono',monospace;letter-spacing:.13em}
#project-02 .scroll-cue:hover{color:var(--acid)}#project-02-process{scroll-margin-top:96px}
@media(max-width:650px){#project-02{display:block;padding:100px 20px 50px;min-height:100vh}#project-02 .project-heading{height:auto;min-height:0;position:relative;top:auto;padding:0}#project-02 .project-art>.project-hero{height:auto!important;min-height:0;object-fit:contain!important;margin-bottom:90px!important;-webkit-mask-image:none;mask-image:none}#project-02 .project-art>img:not(.project-hero){margin-bottom:30px}#project-02 .scroll-cue{position:static;margin-top:32px}}
#project-01 .project-art>.project-hero{background:transparent!important;-webkit-mask-image:none!important;mask-image:none!important;clip-path:polygon(8% 9%,18% 7%,31% 5%,43% 7%,48% 11%,52% 8%,64% 8%,77% 6%,82% 10%,89% 13%,92% 20%,94% 58%,91% 85%,75% 84%,58% 85%,52% 90%,38% 88%,25% 89%,10% 86%,7% 70%)}
#project-02{background:#050505!important}
#project-02 .project-art>.project-hero{background:transparent!important;-webkit-mask-image:none!important;mask-image:none!important}
#project-02 .project-number{color:var(--acid)!important}#project-02 h2{color:#f1efe9!important}#project-02 .project-type{color:#929292}
@media(max-width:650px){#project-01 .project-art>.project-hero{clip-path:polygon(8% 9%,18% 7%,31% 5%,43% 7%,48% 11%,52% 8%,64% 8%,77% 6%,82% 10%,89% 13%,92% 20%,94% 58%,91% 85%,75% 84%,58% 85%,52% 90%,38% 88%,25% 89%,10% 86%,7% 70%)}}
#project-01 .project-art>.project-hero{clip-path:none!important}
#project-03{padding:0 0 8vw 3vw;grid-template-columns:minmax(320px,38%) 1fr;gap:0;min-height:calc(100vh - 72px);scroll-margin-top:72px}
#project-03 .project-heading{height:calc(100svh - 72px);min-height:calc(100vh - 72px);position:sticky;top:72px;padding:10vh 4vw 92px 0}
#project-03 .project-art{display:block}
#project-03 .project-art>.project-hero{display:block;width:100%;height:calc(100svh - 72px)!important;min-height:calc(100vh - 72px);object-fit:contain!important;object-position:center!important;background:transparent!important;margin:0 0 clamp(180px,28vh,320px)!important}
#project-03 .project-art>img:not(.project-hero){display:block;width:100%;height:auto;margin:0 0 clamp(35px,5vw,80px)}
#project-03 .scroll-cue{position:absolute;left:0;bottom:28px;display:inline-flex;color:#fff;text-decoration:none;border-bottom:1px solid currentColor;padding-bottom:6px;font:10px 'DM Mono',monospace;letter-spacing:.13em}
#project-03 .scroll-cue:hover{color:var(--acid)}#project-03-process{scroll-margin-top:96px}
@media(max-width:650px){#project-03{display:block;padding:100px 20px 50px;min-height:100vh}#project-03 .project-heading{height:auto;min-height:0;position:relative;top:auto;padding:0}#project-03 .project-art>.project-hero{height:auto!important;min-height:0;object-fit:contain!important;margin-bottom:90px!important}#project-03 .project-art>img:not(.project-hero){margin-bottom:30px}#project-03 .scroll-cue{position:static;margin-top:32px}}
#project-03{background:#050505!important}
#project-03 .project-number{color:var(--acid)!important}#project-03 h2{color:#f1efe9!important}#project-03 .project-type{color:#929292}
#project-03 .project-video{width:100%;object-fit:contain;background:transparent}
#project-04{padding:0;grid-template-columns:minmax(320px,38%) 1fr;gap:0;min-height:calc(100vh - 72px);scroll-margin-top:72px;background:#8d8942 url('assets/works/sour-rain-cover.png') center/cover fixed!important}
#project-04 .project-heading{height:calc(100svh - 72px);min-height:calc(100vh - 72px);position:sticky;top:72px;padding:10vh 4vw 70px 3vw;background:#8d8942}
#project-04 .project-number{color:#d7ff31!important}#project-04 h2{color:#151515!important}#project-04 .project-type{color:#292918}#project-04 .project-description{color:#fff}
#project-04 .project-art{min-width:0}
#project-04 .project-hero-pair{height:calc(100svh - 72px);min-height:calc(100vh - 72px);display:grid;grid-template-columns:1fr 1fr;gap:clamp(8px,1vw,18px);align-items:center;padding:3vh 2vw;background:rgb(20 20 12 / .22)}
#project-04 .project-hero-pair img{display:block;width:100%;height:calc(94svh - 72px);margin:0!important;object-fit:contain;filter:none}
#project-04 .project-hero-pair{margin-bottom:clamp(160px,24vh,280px)}
#project-04 .project-process-board{display:block;width:calc(100% - 4vw);height:auto;margin:0 2vw clamp(45px,6vw,90px)!important;filter:none}
#project-04 .scroll-cue{position:absolute;left:3vw;bottom:28px;display:inline-flex;color:#fff;text-decoration:none;border-bottom:1px solid currentColor;padding-bottom:6px;font:10px 'DM Mono',monospace;letter-spacing:.13em}
#project-04 .scroll-cue:hover{color:var(--acid)}#project-04-process{scroll-margin-top:96px}
@media(max-width:650px){#project-04{display:block;padding:100px 20px 50px;background-attachment:scroll!important}#project-04 .project-heading{height:auto;min-height:0;position:relative;top:auto;padding:30px 22px;margin-bottom:30px}#project-04 .project-hero-pair{height:auto;min-height:0;display:block;padding:15px}#project-04 .project-hero-pair img{height:auto;margin-bottom:15px!important}}
@media(max-width:650px){#project-04 .project-hero-pair{margin-bottom:90px}#project-04 .project-process-board{width:100%;margin:0 0 30px!important}#project-04 .scroll-cue{position:static;margin-top:32px}}
#projects .project-art img{position:relative;cursor:zoom-in;transform-origin:center;transition:transform .35s ease,filter .35s ease!important}#projects .project-art img:hover{z-index:3;transform:scale(1.025)}
body{background:#8059ad!important}.topbar{background:rgb(50 25 70 / .88)!important;border-color:#a77ac9!important}#projects .project{background:#8059ad;border-color:#a77ac9}.project-number,#projects .project h2,#projects .project:target .project-heading h2{color:#301840}.project-type{color:#e5d8ef}.project-description{max-width:38ch;margin:32px 0 0;color:#fff;font-size:clamp(13px,1.05vw,16px);line-height:1.65;letter-spacing:.01em}#project-01 .project-art{display:block}#project-01 .project-art>img{display:block;width:100%;height:auto;margin:0 0 clamp(35px,5vw,80px);filter:saturate(.96)}@media(max-width:650px){.project-description{max-width:none;margin-top:24px;font-size:13px;line-height:1.6}#project-01 .project-art>img{margin-bottom:30px}}
.project-heading{transition:opacity .45s,transform .45s}.project:hover .project-heading{transform:translateX(10px)}
/* Interactive project directory */
.directory-page{background:#090909}.directory{min-height:100vh;padding:3vw;position:relative;isolation:isolate;overflow:hidden;background:#080808}.directory:before{content:'';position:absolute;inset:0;z-index:-2;background:url('assets/works/作品集2026.jpg') center top/cover fixed;filter:contrast(1.1) saturate(.85)}.directory:after{content:'';position:absolute;inset:0;z-index:-1;background:linear-gradient(90deg,rgba(0,0,0,.1),rgba(0,0,0,.05) 50%,rgba(0,0,0,.25))}.directory header{display:flex;justify-content:space-between;font:10px 'DM Mono',monospace;letter-spacing:.08em}.directory h1{display:inline-block;margin:9vh 0 3vh 36%;padding:1.2vw 3vw;background:#050505;font-size:clamp(45px,9vw,150px);letter-spacing:-.1em;line-height:.8}.hint{margin:0 0 3vh 36%;font:11px 'DM Mono',monospace;background:#050505;display:table;padding:8px;color:var(--acid)}.project-index{display:grid;grid-template-columns:repeat(3,1fr);gap:8vh 5vw;padding:0 6vw 7vw}.project-index a{display:flex;flex-direction:column;align-items:flex-start;text-decoration:none;width:max-content;max-width:100%;transition:transform .3s}.project-index a:nth-child(3n+2){transform:translateY(5vh)}.project-index a:nth-child(3n+0){transform:translateY(1vh)}.project-index a:hover{transform:translate(12px,-8px)!important}.project-index b,.project-index span,.project-index i{background:#050505;padding:3px 8px;line-height:1.05}.project-index b{font:italic clamp(34px,4vw,64px) 'Playfair Display',serif;color:var(--white)}.project-index span{font-size:clamp(16px,2vw,30px);letter-spacing:-.04em}.project-index i{font-style:normal;font-size:13px;color:#ddd}.project-index a:hover b,.project-index a:hover span,.project-index a:hover i{background:var(--acid);color:#050505}.project-index a:focus-visible{outline:2px solid var(--acid);outline-offset:8px}
.project{min-height:100vh;position:relative;border-bottom:1px solid var(--line);padding:clamp(105px,13vw,190px) 3vw 8vw;display:grid;grid-template-columns:minmax(260px,35%) 1fr;gap:5vw}.project-heading{position:sticky;top:115px;height:min-content;z-index:1}.project-number{font:italic clamp(50px,8vw,130px) 'Playfair Display',serif;color:var(--acid);line-height:.7}.project h2{font-size:clamp(35px,5.5vw,90px);letter-spacing:-.08em;line-height:.85;margin:15px 0}.project-type{color:var(--muted);font:11px 'DM Mono',monospace;letter-spacing:.08em}.project-art img{display:block;width:100%;margin-bottom:1.2vw;filter:saturate(.9);transition:filter .5s}.project-art img:hover{filter:saturate(1.15)}.project:target .project-heading h2{color:var(--acid)}@media(max-width:650px){.directory{padding:20px}.directory:before{background-attachment:scroll}.directory header{font-size:7px}.directory h1{margin:7vh 0 20px 12%;padding:15px;font-size:18vw}.hint{margin-left:12%;font-size:9px}.project-index{grid-template-columns:1fr 1fr;gap:50px 10px;padding:20px 5px}.project-index a:nth-child(n){transform:none}.project-index a:hover{transform:translate(3px,-3px)!important}.project-index a:nth-child(3n){grid-column:span 2;justify-self:end}.project-index span{font-size:15px}.project-index i{font-size:10px}.project{display:block;padding:100px 20px 50px}.project-heading{position:relative;top:auto;margin-bottom:45px}.project-art img{margin-bottom:15px}}

:root{--black:#080808;--white:#f1efe9;--muted:#929292;--acid:#d7ff31;--line:#252525}*{box-sizing:border-box}html{scroll-behavior:smooth}body{margin:0;background:var(--black);color:var(--white);font-family:'Noto Sans SC',Arial,sans-serif}a{color:inherit}.cover-page{overflow:hidden}.cover{height:100dvh;min-height:600px;position:relative;padding:30px 3vw;display:flex;flex-direction:column;justify-content:space-between;background:radial-gradient(circle at 70% 44%,#1e1e1e 0,#080808 39%);isolation:isolate}.cover-grid{position:absolute;inset:0;z-index:-1;opacity:.8;background:linear-gradient(90deg,transparent 49.94%,#222 50%,transparent 50.06%),linear-gradient(0deg,transparent 49.9%,#222 50%,transparent 50.1%);background-size:calc(100% / 12) calc(100% / 7)}.cover-index,.cover-meta,.topbar,.count,.card figcaption,.footer{font:10px 'DM Mono',monospace;letter-spacing:.08em}.cover-index{margin:0}.cover-title{font-weight:700;font-size:clamp(88px,18vw,310px);line-height:.7;letter-spacing:-.11em;display:flex;flex-direction:column;align-self:center;transform:translateY(3%)}.cover-title span:nth-child(2){padding-left:14vw}.cover-title sup{font:10px 'DM Mono',monospace;letter-spacing:0;vertical-align:top;margin-left:1vw}.cover-title i{font:600 clamp(25px,4vw,60px) 'Playfair Display',serif;letter-spacing:-.06em;color:var(--acid);padding-left:67%;margin-top:2vw}.cover-meta{display:flex;justify-content:space-between;color:var(--muted)}.enter{position:absolute;left:50%;top:51%;transform:translate(-50%,-50%);z-index:1;text-decoration:none}.enter-ring{width:132px;height:132px;border:1px solid var(--white);border-radius:50%;display:flex;align-items:center;justify-content:center;position:relative;transition:.45s;background:#0b0b0b;font:10px 'DM Mono',monospace;letter-spacing:.06em}.enter-ring b{position:absolute;right:17px;bottom:16px;font-size:18px;color:var(--acid)}.enter:hover .enter-ring{background:var(--acid);color:#080808;transform:scale(1.16) rotate(-12deg);border-color:var(--acid)}.enter:hover b{color:#080808}
.topbar{height:72px;border-bottom:1px solid var(--line);padding:0 2.5vw;display:flex;align-items:center;justify-content:space-between;position:sticky;top:0;background:rgb(8 8 8 / .86);backdrop-filter:blur(16px);z-index:5}.topbar a{text-decoration:none}.logo{font:700 12px 'DM Mono',monospace}.logo b{color:var(--acid)}.topbar nav{display:flex;gap:25px;color:var(--muted);font:10px 'DM Mono',monospace}.progress{height:2px;width:80px;background:#282828}.progress span{display:block;height:100%;background:var(--acid);width:0}.intro{min-height:68vh;padding:12vw 7vw 7vw;display:flex;align-items:flex-end;border-bottom:1px solid var(--line);background:radial-gradient(ellipse at 85% 0,#1b1b1b 0,transparent 47%)}.intro-grid{display:grid;grid-template-columns:2fr 1fr;gap:40px;width:100%;align-items:end}.intro h1{font-size:clamp(54px,10vw,160px);line-height:.82;letter-spacing:-.1em;margin:0}.intro h1 em{font:600 .86em 'Playfair Display',serif;color:var(--acid)}.intro p{color:var(--muted);font-size:14px;line-height:1.75;margin:0}.works{padding:2.5vw}.works-head{padding:0 0 7vw;display:flex;justify-content:space-between;align-items:center}.works-head h2{font-size:clamp(34px,5vw,76px);letter-spacing:-.08em;margin:0}.count{color:var(--muted)}.gallery{display:grid;grid-template-columns:repeat(12,1fr);gap:6vw 1.2vw}.card{grid-column:span 6;margin:0;cursor:zoom-in}.card:nth-child(4n+2),.card:nth-child(4n+3){grid-column:span 5}.card:nth-child(4n+2){grid-column-start:2}.card:nth-child(4n+3){grid-column-start:7}.card.wide{grid-column:span 12}.card-image{overflow:hidden;background:#151515}.card img{display:block;width:100%;transition:transform .7s,filter .5s;filter:saturate(.82)}.card:hover img{transform:scale(1.035);filter:saturate(1.1)}.card figcaption{padding-top:10px;display:flex;justify-content:space-between;color:var(--muted)}.card figcaption span:last-child{color:var(--acid)}.about{margin-top:12vw;padding:12vw 7vw;min-height:56vh;border-top:1px solid var(--line);background:var(--acid);color:var(--black);display:flex;flex-direction:column;justify-content:center}.about p{font:10px 'DM Mono',monospace;letter-spacing:.08em}.about h2{font-size:clamp(40px,7vw,110px);line-height:.9;letter-spacing:-.1em;margin:0}.about a{text-underline-offset:9px}.footer{padding:20px 2.5vw;color:var(--muted);display:flex;justify-content:space-between}.lightbox{position:fixed;inset:0;background:rgb(0 0 0 / .94);z-index:20;display:none;align-items:center;justify-content:center;padding:5vh 5vw;cursor:zoom-out}.lightbox.open{display:flex}.lightbox img{max-width:100%;max-height:90vh;object-fit:contain}.lightbox button{position:fixed;right:24px;top:22px;border:0;background:none;color:white;font:14px 'DM Mono',monospace;cursor:pointer}@media(max-width:650px){.cover{min-height:520px;padding:22px 20px}.cover-title{font-size:27vw}.cover-title span:nth-child(2){padding-left:8vw}.cover-title i{padding-left:58%;font-size:34px}.enter-ring{width:105px;height:105px}.cover-meta{font-size:8px}.cover-meta span:last-child{display:none}.topbar{padding:0 20px}.progress{width:42px}.intro{padding:110px 20px 55px}.intro-grid{display:block}.intro h1{font-size:16vw;margin-bottom:38px}.works{padding:20px}.works-head{padding:35px 0 65px}.gallery{display:block}.card,.card:nth-child(n){margin:0 0 45px}.about{margin-top:70px;padding:90px 20px}.footer{font-size:8px;padding:18px 20px}}
.about{min-height:70vh!important;background:#050505!important;color:var(--white)!important;border-top-color:#252525!important}
.about>p:first-child{margin:0 0 26px;color:var(--acid);font:10px 'DM Mono',monospace;letter-spacing:.16em}
.about h2{font-size:clamp(34px,6vw,96px);line-height:.94;letter-spacing:-.08em}
.about h2 span{display:inline-block;margin-bottom:10px;color:var(--muted);font:10px 'DM Mono',monospace;letter-spacing:.16em}
.about a{color:var(--white)}
.about a:hover,.about a:focus-visible{color:var(--acid)}
.about .contact-phone{display:flex;gap:24px;align-items:baseline;margin:42px 0 0;font:inherit;font-size:clamp(20px,2.7vw,46px);letter-spacing:-.03em}
.contact-phone span{color:var(--muted);font:10px 'DM Mono',monospace;letter-spacing:.16em}
.contact-phone a{text-decoration:none}
.footer{background:#050505}
@media(max-width:650px){.about{min-height:68vh!important}.about h2{font-size:clamp(24px,7vw,32px);letter-spacing:-.06em;white-space:nowrap}.about .contact-phone{display:block;margin-top:34px;font-size:22px}.contact-phone span{display:block;margin-bottom:10px}}