*{box-sizing:border-box}
:root{--po:min(113px,12vw);--kt:min(198px,19vw);--ease:cubic-bezier(.2,0,0,1)}
html,body{margin:0;background:#fff;color:#000;-webkit-font-smoothing:antialiased}
body{min-height:100vh;display:flex;flex-direction:column;font-family:Helvetica,'Helvetica Neue',Arial,sans-serif;position:relative}
main{flex:1;position:relative}
a{color:#000;text-decoration:none}
a:hover{color:#000}
mark{background:#f7ec0f;color:#000}
svg{display:block}
@view-transition{navigation:auto}
::view-transition-old(root),::view-transition-new(root){animation-duration:200ms}

/* header + footer */
.hdr{position:absolute;top:0;left:0;right:0;height:0}
.nav{position:absolute;left:40px;top:40px;height:17px;display:flex;gap:52px;align-items:center;z-index:6}
.nav-i{position:relative;display:inline-flex;flex-direction:column;align-items:center;font:700 14px/100% Helvetica,Arial,sans-serif;white-space:nowrap;color:#c2c2c2;transition:color 150ms}
a.nav-i:hover{color:#000}
.nav-i.off{color:#dadada;cursor:default}
.nav-hs{position:absolute;top:-13px;opacity:0}
.nav-hs svg{width:9px;height:9px}
a.nav-i:hover .nav-hs{opacity:1}
.nav-i.on::after,.nav-i.two::before{content:"";position:absolute;top:40px;left:calc(50% - 3px);width:6px;height:6px;border-radius:50%;background:#c2c2c2}
.nav-i.two::before{top:52px}
.hdr-star{position:absolute;left:calc(50% - 9px);top:41px;z-index:6}
.hdr-star svg,.gate-star svg,.rule svg,.proj-star svg{width:17px;height:16px}
.hdr-home{position:absolute;right:40px;top:40px;font:700 14px/100% Helvetica,Arial,sans-serif;color:#c2c2c2;z-index:6;transition:color 150ms}
.hdr-home:hover{color:#000}
.ftr{position:relative;z-index:3;flex-shrink:0;min-height:57px;background:#fff;box-shadow:0 -10px 10px rgba(0,0,0,.05);display:flex;justify-content:center;align-items:center;gap:52px;font:700 11px/100% Helvetica,Arial,sans-serif;color:#c2c2c2}
.ftr a{color:#c2c2c2;transition:color 150ms}
.ftr a:hover{color:#000}

/* shared bits */
.rule{display:flex;justify-content:space-between;align-items:flex-end;padding-bottom:4px;border-bottom:1px solid #000;font:700 20px/100% Helvetica,Arial,sans-serif}
.rule svg{margin-bottom:5px}
.btn{flex-shrink:0;font:700 11px/24px Helvetica,Arial,sans-serif;letter-spacing:.01em;border:2px solid #000;border-radius:4px;padding:0 20px;background:#fff;color:#000;cursor:pointer;transition:background-color 120ms,color 120ms}
.btn:hover{background:#000;color:#fff}
.kt{position:relative;display:inline-block;padding:0 6px 5px 0;font-family:Kapakana,cursive;font-weight:400;font-size:var(--kt);line-height:100%;white-space:nowrap}
.kt-sh{position:absolute;left:6px;top:5px;color:rgba(0,0,0,.25);filter:blur(6px)}
.kt h1{position:relative;margin:0;font:inherit;color:transparent;-webkit-text-stroke:1px #fff}
.under{position:relative;margin-top:calc(var(--kt) * -.4242)}

/* wordmark + glass panel */
.wm-wrap{position:absolute;left:0;right:0;top:38.9vh;display:flex;justify-content:center;pointer-events:none;z-index:1}
.wm{position:relative;display:inline-block;font-size:min(200px,22vw)}
.wm-t{display:block;font-family:'Noto Serif Display',Didot,serif;font-stretch:62.5%;font-weight:400;font-size:1em;line-height:100%;white-space:nowrap;color:#c2c2c2;letter-spacing:-.04em;padding-right:.04em}
.wm-bar{position:absolute;left:0;right:0;top:.59em;height:max(12px,.07em);background:#f7ec0f;display:flex;align-items:center;justify-content:space-between;padding:0 4px}
.wm-bar svg{width:9px;height:9px}
.wm-bar span{font:700 12px/100% Helvetica,Arial,sans-serif}
.panel{position:absolute;top:0;bottom:0;width:300vw;left:calc(50% - var(--po) - 300vw);background:rgba(255,255,255,.01);backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);box-shadow:5px 4px 10px rgba(0,0,0,.25);pointer-events:none;z-index:2}

/* landing */
.land{height:100vh;min-height:640px;overflow:hidden}
.land-follow{position:absolute;right:40px;top:40px;display:flex;flex-direction:column;align-items:flex-end;font:700 14px/100% Helvetica,Arial,sans-serif;z-index:3}
.land-follow a{color:#c2c2c2;margin-top:13px;transition:color 150ms}
.land-follow a:first-of-type{margin-top:18px}
.land-follow a:hover{color:#000}
.sel{position:absolute;left:40px;bottom:40px;width:290px;z-index:3}
.sel-i{display:flex;justify-content:space-between;align-items:center;gap:12px;margin-top:17px;min-height:38px;font:700 11px/100% Helvetica,Arial,sans-serif;text-transform:uppercase}
.land-info{position:absolute;right:40px;bottom:40px;display:flex;flex-direction:column;align-items:flex-end;gap:14px;z-index:3}
.yb{width:57px;height:76px;background:#f7ec0f}
.land-info p{width:252px;margin:0;font:700 10px/100% Helvetica,Arial,sans-serif;color:#c2c2c2;text-align:right;text-transform:uppercase}

/* enter gate */
.gate{display:none}
html.gated .gate,html.entering .gate{display:block;position:fixed;inset:0;z-index:50;background:#fdfdfd;transition:background-color 700ms var(--ease)}
html.entering .gate{background:rgba(253,253,253,0);pointer-events:none}
html.gated .land-core,html.entering .land-core{opacity:0}
html.gated body{overflow:hidden}
.gate .wm-bar{clip-path:inset(0 50% 0 50%);-webkit-clip-path:inset(0 50% 0 50%);transition:clip-path 800ms var(--ease) 150ms,-webkit-clip-path 800ms var(--ease) 150ms}
html.entering .gate .wm-bar{clip-path:inset(0);-webkit-clip-path:inset(0)}
.gate-panel{left:calc(50% + var(--po));box-shadow:-5px -4px 10px rgba(0,0,0,.25);transition:left 700ms var(--ease),box-shadow 700ms var(--ease)}
html.entering .gate-panel{left:calc(50% - var(--po) - 300vw);box-shadow:5px 4px 10px rgba(0,0,0,.25)}
.gate-enter{position:absolute;left:50%;top:34.5%;transform:translateX(-50%);padding:0;border:0;background:transparent;font:700 .32em/100% Helvetica,Arial,sans-serif;color:#000;-webkit-text-stroke:.031em #000;white-space:nowrap;cursor:pointer;pointer-events:auto;transition:color 120ms var(--ease),opacity 400ms var(--ease)}
.gate-enter:hover{color:transparent}
.gate-star{position:absolute;left:calc(50% - 9px);top:41px;z-index:3}
.gate-blurb{position:absolute;left:calc(50% - 130px);bottom:40px;width:260px;margin:0;z-index:3;font:700 10px/130% Helvetica,Arial,sans-serif;color:#c2c2c2;text-align:center;text-transform:uppercase;transition:opacity 400ms var(--ease)}
html.entering .gate-enter,html.entering .gate-blurb{opacity:0}

/* work + category */
.work,.about,.contact{padding:250px 20px 80px;display:flex;flex-direction:column;align-items:center}
.list{display:flex;flex-direction:column;align-items:center;gap:13px}
.li{display:flex;align-items:baseline;gap:8px;font:700 20px/100% Helvetica,Arial,sans-serif;white-space:nowrap;text-transform:uppercase;color:#c2c2c2;transition:color 150ms}
a.li:hover{color:#000}
.li.off{color:#dadada}
.li-n{font-size:14px}
.li-m{font-size:11px}
.li-sm{margin-top:27px;font:700 14px/100% Helvetica,Arial,sans-serif;text-transform:uppercase;color:#c2c2c2;transition:color 150ms}
.li-back{margin-top:40px}
.li-sm:hover{color:#000}

/* project */
.proj{display:grid;grid-template-columns:377px minmax(0,1fr);column-gap:160px;padding:150px 83px 60px 163px;--mh:clamp(420px,calc(100vh - 237px),880px)}
.proj-fade{position:absolute;left:0;top:0;width:624px;height:100%;min-height:100vh;background:linear-gradient(180deg,#fff 231px,rgba(255,255,255,0) 1117px);backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);box-shadow:5px 5px 10px rgba(0,0,0,.15);pointer-events:none}
.proj-media{grid-column:2;grid-row:1;position:sticky;top:40px;height:var(--mh);container-type:size}
.proj-info{grid-column:1;grid-row:1;position:relative;z-index:1;padding-top:76px;align-self:start;display:flex;flex-direction:column;gap:18px}
.proj-star{position:absolute;left:-52px;top:81px}
.proj-info h1{margin:0;font:700 24px/100% Helvetica,Arial,sans-serif;text-transform:uppercase}
.proj-meta{display:flex;justify-content:space-between;gap:12px;font:700 11px/100% Helvetica,Arial,sans-serif;color:#959595;text-transform:uppercase}
.proj-desc{margin:22px 0 0;font:400 11px/1.3248 'Libre Franklin',Helvetica,sans-serif;text-transform:uppercase;text-wrap:pretty}
.ctrl{display:flex;flex-wrap:wrap;gap:8px;margin-top:22px}
.ctrl:empty{display:none}
.tabs{display:flex;gap:27px;width:100%;font:700 14px/100% Helvetica,Arial,sans-serif;margin-bottom:8px}
.tabs button,.items button{padding:0;border:0;background:none;cursor:pointer;font:inherit;color:#c2c2c2;text-align:left;text-transform:uppercase;transition:color 150ms}
.tabs button.on,.items button.on,.items button:hover{color:#000}
.items{display:flex;flex-direction:column;gap:13px;width:100%;font:700 14px/100% Helvetica,Arial,sans-serif;margin-bottom:14px}
.stepper{display:flex;align-items:center;justify-content:space-between;gap:13px;width:100%;font:700 11px/100% Helvetica,Arial,sans-serif}
.sbtn{padding:0 10px;height:24px;border:2px solid #000;border-radius:4px;background:#fff;color:#000;font:700 11px/20px Helvetica,Arial,sans-serif;cursor:pointer}
.sbtn:disabled{border-color:#dadada;color:#dadada;cursor:default}
.layers-ui{display:flex;flex-direction:column;gap:10px;width:100%;font:700 11px/100% Helvetica,Arial,sans-serif}
.layers-ui .row{display:flex;align-items:center;gap:13px}
.layers-ui input{flex:1;accent-color:#000}
.thumbs{display:flex;flex-wrap:wrap;gap:8px;width:100%}
.thumb{flex-shrink:0;width:66px;height:84px;padding:0;border:2px solid transparent;background-color:#fdfdfd;background-size:cover;background-position:center;cursor:pointer;opacity:.55;transition:opacity 150ms}
.thumb:hover{opacity:.8}
.thumb.on{border-color:#000;opacity:1}
.thumb-v{position:relative;overflow:hidden;background:#000}
.thumb-v video{display:block;width:100%;height:100%;object-fit:cover;pointer-events:none}
.thumb-v svg{position:absolute;left:calc(50% - 7px);top:calc(50% - 8px);width:14px;height:16px;fill:#fff;filter:drop-shadow(0 0 3px rgba(0,0,0,.5))}
.proj-nav{margin-top:40px;display:flex;justify-content:space-between;gap:16px;padding-top:16px;border-top:1px solid #000;font:700 11px/100% Helvetica,Arial,sans-serif;text-transform:uppercase}
.proj-nav>div{flex:1;min-width:0}
.proj-nav .r{text-align:right}
.proj-nav a{color:#c2c2c2;white-space:nowrap;transition:color 150ms}
.proj-nav>div a{white-space:normal}
.proj-nav a:hover{color:#000}
.m-img,.m-vid{position:absolute;inset:0;width:100%;height:100%;object-fit:contain;background:transparent}
.m-center{position:absolute;inset:0;display:flex;align-items:center;justify-content:center}
.book{position:relative;width:min(100%,1244px,141.35cqh);aspect-ratio:1904/1347;transition:transform 900ms var(--ease)}
.leaf{position:absolute;left:50%;top:0;width:50%;height:100%;transform-origin:left center;transform-style:preserve-3d;transition:transform 900ms cubic-bezier(.45,.05,.25,1);cursor:pointer}
.leaf>div{position:absolute;inset:0;backface-visibility:hidden;-webkit-backface-visibility:hidden;background-color:#fff;background-size:100% 100%;box-shadow:0 1px 6px rgba(0,0,0,.06)}
.leaf>.bk{transform:rotateY(180deg)}
.book-1{max-width:100%;max-height:100%;box-shadow:0 1px 6px rgba(0,0,0,.06)}
.lay{position:relative;width:min(100%,211.43cqh);aspect-ratio:2220/1050;overflow:hidden;background:#fff}
.lay>div{position:absolute;background-size:100% 100%;transition:opacity 300ms var(--ease)}

/* store */
.store{padding:190px 20px 80px;display:flex;flex-direction:column;align-items:center}
.kt-wrap{position:relative;z-index:2;pointer-events:none}
.cards{display:flex;flex-wrap:wrap;justify-content:center;gap:13px}
.card{width:345px;max-width:100%;display:flex;flex-direction:column;gap:12px}
.card-img{aspect-ratio:345/460;background:#fdfdfd;box-shadow:-5px 5px 7px rgba(0,0,0,.15);transition:box-shadow 150ms}
.card-img:hover{box-shadow:0 5px 7px rgba(0,0,0,.25)}
.card-img img{display:block;width:100%;height:100%;object-fit:cover}
.card-row{display:flex;justify-content:space-between;align-items:center;gap:12px;font:700 11px/100% Helvetica,Arial,sans-serif;text-transform:uppercase}
.card-row .btn{padding:0 14px}

/* about */
.about-body{width:732px;max-width:100%;display:flex;flex-direction:column;gap:27px}
.about-intro{margin:0;font:850 11px/100% 'Libre Franklin',Helvetica,sans-serif;text-align:right;text-transform:uppercase}
.about-grid{display:grid;grid-template-columns:1fr 1fr;gap:52px}
.col{display:flex;flex-direction:column;gap:13px}
.row2{display:flex;justify-content:space-between;align-items:center;gap:12px;font:700 11px/100% Helvetica,Arial,sans-serif;text-transform:uppercase}
.row2 .k{color:#959595;text-align:right}
.disc{display:flex;flex-direction:column;align-items:flex-end;gap:10px;font:700 14px/100% Helvetica,Arial,sans-serif;color:#c2c2c2}

/* contact */
.contact{gap:40px}
.contact-mail{position:relative;margin-top:calc(var(--kt) * -.4242 - 40px);font-family:'Noto Serif Display',Didot,serif;font-stretch:62.5%;font-weight:400;font-size:min(96px,7.4vw);line-height:100%;color:#c2c2c2;white-space:nowrap;transition:color 150ms}
.contact-mail:hover{color:#000}
.contact-row{display:flex;flex-wrap:wrap;justify-content:center;gap:16px 32px;align-items:center;font:700 14px/100% Helvetica,Arial,sans-serif}
.contact-row mark{padding:0 3px}
.contact-row a{color:#c2c2c2;transition:color 150ms}
.contact-row a:hover{color:#000}

@media (max-width:1100px){
  .nav{gap:28px}
}
@media (max-width:960px){
  .hdr-star{left:auto;right:96px}
}
@media (max-width:1200px){
  .proj{grid-template-columns:320px minmax(0,1fr);column-gap:64px;padding:150px 40px 60px 92px}
  .proj-fade{width:452px}
}
@media (max-width:800px){
  .nav{left:20px;top:24px;gap:20px}
  .nav-i{font-size:12px}
  .nav-i.on::after{top:20px}
  .nav-i.two::before{top:30px}
  .hdr-star{left:auto;right:20px;top:23px}
  .hdr-home{display:none}
  .ftr{gap:12px 24px;flex-wrap:wrap;padding:20px}
  .land{height:auto;min-height:100vh;padding:calc(38.9vh + min(200px,22vw) + 56px) 20px 40px;display:flex;flex-direction:column;gap:48px}
  .land-follow,.sel,.land-info{position:relative;left:auto;right:auto;top:auto;bottom:auto}
  .sel{width:100%;max-width:360px}
  .land-info,.land-follow{align-items:flex-start}
  .land-info p{text-align:left}
  .work,.about,.contact,.store{padding-top:150px}
  .li{font-size:16px;white-space:normal}
  .proj{grid-template-columns:minmax(0,1fr);padding:80px 20px 40px;--mh:62vh}
  .proj-media{grid-column:1;grid-row:1;position:relative;top:auto}
  .proj-info{grid-column:1;grid-row:2;padding-top:28px;min-height:0}
  .proj-star,.proj-fade{display:none}
  .thumbs{flex-wrap:nowrap;overflow-x:auto;scroll-snap-type:x mandatory;-webkit-overflow-scrolling:touch;padding-bottom:6px;scrollbar-width:none}
  .thumb{scroll-snap-align:start}
  .proj-nav{margin-top:32px}
  .about-grid{grid-template-columns:1fr;gap:40px}
}