:root{--bg:#fff;--fg:#0a0a0a;--mute:#8a8a8a;--line:#0a0a0a;--pad:clamp(14px,1.4vw,22px);
--sans:"Inter Tight","Helvetica Neue",Arial,sans-serif;--mono:"Space Mono","Courier New",monospace}
*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth}
body{background:var(--bg);color:var(--fg);font-family:var(--sans);-webkit-font-smoothing:antialiased;min-height:100vh}
a{color:inherit;text-decoration:none}
img,video{display:block;width:100%;height:100%;object-fit:cover}
.mono{font-family:var(--mono);font-size:11px;letter-spacing:.02em;text-transform:uppercase;line-height:1.5}
/* header */
header{position:fixed;inset:0 0 auto 0;z-index:50;display:flex;justify-content:space-between;align-items:flex-start;padding:var(--pad);mix-blend-mode:difference;color:#fff;pointer-events:none}
header>*{pointer-events:auto}
.logo{font-size:clamp(26px,3vw,40px);font-weight:500;letter-spacing:-.06em;line-height:1}
.menu-btn{background:none;border:0;color:inherit;cursor:pointer;font:inherit}
.menu-btn:hover{opacity:.6}
/* menu overlay */
.menu{position:fixed;inset:0;z-index:40;background:var(--fg);color:#fff;display:flex;flex-direction:column;justify-content:flex-end;padding:var(--pad);clip-path:inset(0 0 100% 0);transition:clip-path .7s cubic-bezier(.76,0,.24,1)}
.menu.open{clip-path:inset(0)}
.menu nav a{display:block;font-size:clamp(56px,13vw,200px);font-weight:500;letter-spacing:-.06em;line-height:.9;transition:opacity .3s}
.menu nav:hover a{opacity:.3}.menu nav a:hover{opacity:1}
.menu .foot{display:flex;justify-content:space-between;margin-top:28px;padding-top:12px;border-top:1px solid #333}
/* hero slider */
.hero{position:relative;height:100svh;background:#000;color:#fff;overflow:hidden}
.slide{position:absolute;inset:0;opacity:0;transition:opacity 1s ease}
.slide.on{opacity:1}
.slide::after{content:"";position:absolute;inset:0;background:linear-gradient(to bottom,rgba(0,0,0,.5),transparent 32%),linear-gradient(to top,rgba(0,0,0,.6),transparent 50%)}
body.home header{mix-blend-mode:normal;text-shadow:0 1px 14px rgba(0,0,0,.4)}
.hero-info{position:absolute;left:var(--pad);right:var(--pad);bottom:var(--pad);z-index:5;display:flex;justify-content:space-between;align-items:flex-end;gap:20px}
.hero-title{font-size:clamp(44px,9vw,150px);font-weight:500;letter-spacing:-.06em;line-height:.85}
.hero-meta{display:flex;flex-direction:column;gap:6px;text-align:right}
.hero-ctrl{display:flex;gap:14px;justify-content:flex-end}
.hero-ctrl button{background:none;border:0;color:#fff;cursor:pointer;font:inherit}
.hero-ctrl button:hover{opacity:.6}
.hero-tag{position:absolute;left:var(--pad);top:50%;z-index:5;max-width:260px}
/* works */
.page{padding:calc(var(--pad)*2 + 40px) var(--pad) var(--pad)}
.toolbar{display:flex;justify-content:space-between;align-items:flex-end;margin:clamp(40px,10vw,140px) 0 18px}
.page-title{font-size:clamp(48px,10vw,160px);font-weight:500;letter-spacing:-.06em;line-height:.85}
.toggle{display:flex;gap:18px}
.toggle button{background:none;border:0;cursor:pointer;font:inherit;color:var(--mute);display:flex;gap:6px;align-items:center}
.toggle button.on{color:var(--fg)}
.toggle button.on::before{content:"";width:7px;height:7px;background:var(--fg)}
.filters{display:flex;gap:16px;flex-wrap:wrap;margin-bottom:18px}
.filters button{background:none;border:0;cursor:pointer;font:inherit;color:var(--mute)}
.filters button.on,.filters button:hover{color:var(--fg)}
.grid{display:grid;grid-template-columns:1fr 1fr;gap:6px}
.card{display:block}
.card .thumb{position:relative;aspect-ratio:4/3;overflow:hidden;background:#111}
.card .thumb>*{transition:transform .9s cubic-bezier(.2,.7,.2,1)}
.card:hover .thumb>*{transform:scale(1.04)}
.card .thumb video{position:absolute;inset:0;opacity:0;transition:opacity .4s}
.card:hover .thumb video{opacity:1}
.card .cap{display:flex;justify-content:space-between;padding:10px 0 26px}
.badge{position:absolute;right:12px;bottom:12px;z-index:2;background:#000;color:#fff;border-radius:99px;padding:3px 11px}
.list .card{display:grid;grid-template-columns:1fr 2fr 1fr 80px;gap:10px;border-top:1px solid var(--line);padding:14px 0;align-items:center}
.list.grid{display:block}
.list .card .thumb{display:none}
.list .card .cap{display:contents}
.list .card .t{font-size:clamp(22px,3.4vw,52px);letter-spacing:-.05em;font-weight:500;text-transform:none;font-family:var(--sans)}
.list .card:hover{background:var(--fg);color:#fff}
/* project */
.p-head{margin:clamp(30px,8vw,120px) 0 40px}
.p-head h1{font-size:clamp(48px,10vw,160px);font-weight:500;letter-spacing:-.06em;line-height:.85}
.p-about{display:grid;grid-template-columns:repeat(4,1fr);gap:20px;border-top:1px solid var(--line);padding-top:12px;margin-bottom:40px}
.p-about .desc{grid-column:span 2;max-width:560px;text-transform:none;font-size:12px}
.spec{display:grid;grid-template-columns:repeat(4,1fr);gap:20px;margin-bottom:6px}
.spec span{display:block;color:var(--mute)}
.media{display:grid;grid-template-columns:1fr 1fr;gap:6px}
.media figure{position:relative;overflow:hidden;background:#111;cursor:zoom-in;aspect-ratio:4/3}
.media figure.full{grid-column:span 2;aspect-ratio:16/9}
.media figure.tall{aspect-ratio:3/4}
.media figure.reel{aspect-ratio:9/16}
.media.cols3{grid-template-columns:repeat(3,1fr)}
.next{display:block;margin-top:80px;border-top:1px solid var(--line);padding:14px 0 40px;text-align:center}
.next b{display:block;font-weight:500;font-size:clamp(40px,9vw,140px);letter-spacing:-.06em;line-height:.9;margin-top:10px;transition:opacity .3s}
.next:hover b{opacity:.4}
/* about */
.about-grid{display:grid;grid-template-columns:1fr 1fr;gap:6px;margin-top:40px}
.about-grid .portrait{aspect-ratio:3/4;background:#111;position:relative;overflow:hidden}
.about-txt{display:flex;flex-direction:column;justify-content:space-between;padding:0 0 0 20px}
.about-txt .big{font-size:clamp(15px,1.25vw,19px);letter-spacing:-.015em;line-height:1.4;font-weight:400;max-width:500px}
.about-txt .big p+p{margin-top:1.1em}
.about-txt ul{list-style:none;border-top:1px solid var(--line);margin-top:30px}
.about-txt li{display:flex;justify-content:space-between;padding:8px 0;border-bottom:1px solid #ddd}
.pt-slide{position:absolute;inset:0;opacity:0;transition:opacity .9s ease}
.pt-slide.on{opacity:1}
.portrait{cursor:pointer}
.pt-ui{position:absolute;left:12px;right:12px;bottom:12px;z-index:5;display:flex;justify-content:space-between;color:#fff;mix-blend-mode:difference}
.pt-ui button{background:none;border:0;color:inherit;font:inherit;cursor:pointer}
/* placeholder */
.ph{position:absolute;inset:0;display:flex;align-items:flex-end;padding:12px;color:rgba(255,255,255,.75)}
/* lightbox */
.lb{position:fixed;inset:0;z-index:90;background:rgba(0,0,0,.94);display:none;align-items:center;justify-content:center;color:#fff}
.lb.on{display:flex}
.lb .inner{width:min(92vw,1600px);height:86vh;position:relative}
.lb .inner>*{object-fit:contain;position:absolute;inset:0}
.lb button{position:absolute;background:none;border:0;color:#fff;font:inherit;cursor:pointer;padding:18px}
.lb .x{top:0;right:0}.lb .pv{left:0;top:50%}.lb .nx{right:0;top:50%}
footer{display:flex;justify-content:space-between;padding:var(--pad);border-top:1px solid var(--line);margin-top:60px}
@media(max-width:760px){
.grid,.media,.media.cols3,.about-grid{grid-template-columns:1fr}.media figure.full{grid-column:auto}
.p-about,.spec{grid-template-columns:1fr 1fr}.p-about .desc{grid-column:span 2}
.hero-info{flex-direction:column;align-items:flex-start}.hero-meta{text-align:left}.hero-ctrl{justify-content:flex-start}
.list .card{grid-template-columns:1fr 60px}.about-txt{padding:20px 0 0}.hero-tag{display:none}}
@media(max-width:760px){
.toolbar{flex-wrap:wrap;gap:14px}
.card .cap{gap:12px;align-items:baseline}
.card .cap .t{flex:1;min-width:0}
.card .cap span:nth-child(3){display:none}
.list .card .cap{display:contents}
}
.tabbar{display:none}
@media(max-width:760px){
.tabbar{display:grid;grid-template-columns:repeat(4,1fr);position:fixed;left:0;right:0;bottom:0;z-index:60;background:#0a0a0a;color:#fff;border-top:1px solid #2a2a2a;padding-bottom:env(safe-area-inset-bottom)}
.tabbar a{text-align:center;padding:16px 4px;color:#8a8a8a;position:relative}
.tabbar a.on{color:#fff}
.tabbar a.on::before{content:"";position:absolute;left:50%;top:7px;width:5px;height:5px;margin-left:-2.5px;background:#fff}
body{padding-bottom:54px}
.hero{height:100svh;margin-bottom:-54px}
.hero-info{bottom:calc(var(--pad) + 62px)}
.hero-tag{display:block;top:78px;left:var(--pad);max-width:none;font-size:11px;color:#fff;mix-blend-mode:normal;opacity:.9}
.menu{padding-bottom:70px}
footer{flex-wrap:wrap;gap:6px}
}