/* Shared base for V1–V4. Each version sets: --bg --fg --mut --line --accent --tile --display --body --radius --track --dweight */
*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{margin:0;background:var(--bg);color:var(--fg);font-family:var(--body);-webkit-font-smoothing:antialiased;overflow-x:clip;line-height:1.55}
a{color:inherit}
img,video{max-width:100%;display:block}
h1,h2,h3,h4,p{margin:0}
h1,h2,h3{text-wrap:balance}
[hidden]{display:none!important}
a:focus-visible,button:focus-visible{outline:2px solid var(--accent);outline-offset:3px}
.gut{padding-left:max(clamp(16px,4vw,56px),env(safe-area-inset-left,0px));padding-right:max(clamp(16px,4vw,56px),env(safe-area-inset-right,0px))}
#home,#detail{position:relative;z-index:1}
/* loader */
#loader{position:fixed;inset:0;z-index:100;display:grid;place-items:center;background:var(--load-bg,var(--bg));color:var(--load-fg,var(--fg));transition:opacity .6s ease,transform .8s cubic-bezier(.7,0,.2,1)}
html.ready #loader{opacity:0;pointer-events:none}
/* reveal */
.rv{opacity:0;transform:translate3d(0,28px,0);transition:opacity .8s cubic-bezier(.2,.7,.2,1),transform .9s cubic-bezier(.2,.7,.2,1)}
.rv.in{opacity:1;transform:none}
/* project page */
.d-wrap{max-width:1320px;margin:0 auto;padding:clamp(96px,13vh,150px) max(clamp(16px,4vw,56px),env(safe-area-inset-right,0px)) 60px max(clamp(16px,4vw,56px),env(safe-area-inset-left,0px))}
.d-back{text-decoration:none;color:var(--mut);font-size:15px}
.d-back:hover{color:var(--fg)}
.d-label{margin-top:34px;font-size:12px;letter-spacing:.14em;text-transform:uppercase;color:var(--mut)}
.d-title{font-family:var(--display);font-size:clamp(42px,8vw,128px);line-height:.95;letter-spacing:var(--track,-.03em);font-weight:var(--dweight,500);margin-top:14px;text-transform:var(--dcase,none)}
.d-meta{display:grid;grid-template-columns:minmax(0,4fr) minmax(0,8fr);gap:clamp(24px,5vw,72px);margin:clamp(28px,5vh,56px) 0;padding-top:24px;border-top:1px solid var(--line)}
.d-meta dl{margin:0;display:grid;gap:16px;align-content:start}
.d-meta dt,.d-two h4{font-size:12px;letter-spacing:.12em;text-transform:uppercase;color:var(--mut);font-weight:500}
.d-meta dd{margin:2px 0 0}
.d-sum{font-size:clamp(20px,2vw,28px);line-height:1.35;max-width:36ch;letter-spacing:-.01em}
.d-two{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:24px;margin-top:28px;max-width:760px}
.d-two p{margin-top:8px;font-size:16px}
.d-gallery{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:16px}
.d-gallery figure{margin:0;grid-column:span 2;border-radius:var(--radius,10px);overflow:hidden;background:var(--tile)}
.d-gallery figure.half{grid-column:span 1}
.d-gallery figure.v{background:#08090a}
.d-gallery img{width:100%;height:auto}
.d-gallery video{width:100%;max-height:86vh;object-fit:contain;margin:0 auto}
.d-next{display:block;text-decoration:none;border-top:1px solid var(--line);margin-top:clamp(40px,8vh,96px);padding-top:32px}
.d-next span{font-size:12px;letter-spacing:.14em;text-transform:uppercase;color:var(--mut)}
.d-next b{display:block;font-family:var(--display);font-weight:var(--dweight,500);font-size:clamp(32px,5vw,80px);line-height:1.02;letter-spacing:var(--track,-.03em);margin-top:8px;text-transform:var(--dcase,none)}
.d-next:hover b{color:var(--accent)}
@media(max-width:800px){.d-meta,.d-two{grid-template-columns:minmax(0,1fr)}.d-gallery figure.half{grid-column:span 2}}
::view-transition-old(root),::view-transition-new(root){animation-duration:.35s}
@media (prefers-reduced-motion:reduce){*{transition:none!important;animation:none!important}.rv{opacity:1;transform:none}}