@font-face{font-family:'Be Vietnam Pro';src:url('./assets/be-vietnam-pro-bold.ttf') format('truetype');font-weight:700;font-display:swap}
@font-face{font-family:Rany;src:url('./assets/rany-bold.ttf') format('truetype');font-weight:700;font-display:swap}
@font-face{font-family:'FZLanTingHeiS-DB1-GB';src:url('./assets/fz-lanting-hei-db.ttf') format('truetype');font-weight:400;font-display:swap}
:root{--blue:#02b9ff;--page-margin:45px;--header-height:57.48px;--meta-height:48px;--scale:1;--u:calc(1px * var(--scale));font-family:'Be Vietnam Pro','FZLanTingHeiS-DB1-GB',sans-serif;color:#fff;background:var(--blue);font-synthesis:none}
*{box-sizing:border-box}body{margin:0;overflow-x:clip}a{color:inherit;text-decoration:none;touch-action:manipulation;-webkit-tap-highlight-color:transparent}img{display:block}h1,h2,p{margin:0}[hidden]{display:none!important}
/* The home and work-selection scenes share one non-scrolling viewport. */
html:has(body[data-view=home]),html:has(body[data-view=works]){overflow:hidden;overscroll-behavior:none}
body[data-view=home],body[data-view=works]{height:100dvh;overflow:hidden;overscroll-behavior:none}
.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}
.skip-link{position:fixed;top:-100px;left:20px;z-index:200;background:#fff;color:#005a7f;padding:14px}.skip-link:focus{top:10px}
:focus-visible{outline:2px solid white;outline-offset:7px}main:focus{outline:none}

/* Figma components retain outlined type, noise, blur and all shadow layers. */
.site-header{--nav-ratio:1;position:fixed;z-index:30;left:var(--page-margin);right:var(--page-margin);top:max(var(--page-margin),env(safe-area-inset-top));display:flex;justify-content:space-between;align-items:flex-start;gap:24px;pointer-events:none}
.site-header nav,.nav-primary,.nav-secondary{display:flex;gap:12px;align-items:flex-start}
.site-header nav,.nav-primary,.nav-secondary{flex:none}
.soap-button{position:relative;display:block;flex:none;width:calc(var(--button-width) * var(--nav-ratio));height:calc(57.48px * var(--nav-ratio));min-height:44px;pointer-events:auto;border-radius:9.72px}
.soap-button.brand{--button-width:194.4px;--image-width:301px}.soap-button.work{--button-width:161.6px;--image-width:268px}.soap-button.about-button{--button-width:116px;--image-width:222px}
.soap-button.back-button{--button-width:67.2px;--image-width:173.6px}
.soap-button>img{position:absolute;left:calc(-53.3488388px * var(--nav-ratio));top:calc(-3.7129211px * var(--nav-ratio));width:calc(var(--image-width) * var(--nav-ratio));height:auto;max-width:none;pointer-events:none}
.tray{flex:none;width:calc(92.65731px * var(--nav-ratio));height:calc(57.48px * var(--nav-ratio));position:relative}
.tray-shadow{position:absolute;left:-57.81%;top:-6.48%;width:214.77%;height:284.89%;max-width:none}
.tray-crop{position:absolute;inset:0;overflow:hidden}.tray-crop>img{position:absolute;width:110.22%;height:177.68%;max-width:none;left:-5.11%;top:-43.25%}
body[data-view=detail] .tray,body[data-view=about] .tray,body[data-view=not-found] .tray{display:none}

/* Artwork scales independently of navigation and reading sizes. */
/* clip also prevents focus-driven scrolling of the oversized artwork. */
.scene{position:relative;width:100%;height:100dvh;overflow:clip;background:var(--blue)}
.scene-artboard{--scene-unit:calc(1px * var(--scene-scale,var(--scale)));position:absolute;left:calc((100% - 2056 * var(--scene-unit)) / 2);bottom:0;width:2056px;height:1090px;transform:scale(var(--scene-scale,var(--scale)));transform-origin:bottom left;isolation:isolate;background:var(--blue)}
/* Live foam is premultiplied alpha; original Figma images keep their blue backdrop. */
.scene-artboard:has(#foam > canvas){background:transparent}
.soaps,.foam{position:absolute;inset:0}.foam{pointer-events:none;z-index:2;mix-blend-mode:screen}
.foam img{position:absolute;mix-blend-mode:screen;max-width:none}
body[data-scene-phase=works] .foam{visibility:hidden}
body[data-scene-phase=dissolving] .foam img{filter:url(#foam-dissolve)}
.soap{position:absolute;width:524.383px;height:524.383px;pointer-events:none}
.soap>img{width:100%;height:100%;object-fit:contain;user-select:none}
.soap-link{position:absolute;inset:0;pointer-events:auto;clip-path:inset(12% 8%);outline:none;cursor:pointer}
.soaps[inert] .soap-link{pointer-events:none;cursor:default}
body[data-scene-phase=works] .soap-link{touch-action:none;user-select:none}
.soap:has(.soap-link:focus-visible)>img{filter:drop-shadow(2px 0 0 #006283) drop-shadow(-2px 0 0 #006283) drop-shadow(0 2px 0 #006283)}
.soap-link.has-soap-cursor{cursor:none}
.project-cursor{position:fixed;z-index:60;width:71.5783px;height:50.1232px;pointer-events:none;transform:translate(-50%,-50%);transform-origin:center}
.project-cursor>svg{position:absolute;left:-31.1074px;top:-1.86987px;overflow:visible}
.project-cursor.is-pressed>svg{transform:scale(.97)}

/* Desktop keeps fixed window edges and an independent scrollable reading column. */
body[data-view=detail]{--detail-row-step:max(calc(204 * var(--u)),calc((100svh - 2 * var(--page-margin) + 20 * var(--u)) / 5));--info-width:calc((100% - 2 * var(--page-margin)) * .36)}
.detail{position:relative;min-height:100svh;padding-top:var(--page-margin)}
.detail-artboard{position:fixed;inset:calc(var(--page-margin) + var(--header-height) + 32px) auto calc(var(--page-margin) + var(--meta-height) + 28px) var(--page-margin);width:var(--info-width);overflow-y:auto;scrollbar-width:thin;scroll-padding-block:12px}
.project-info{position:relative;width:100%;padding-top:max(0px,calc(var(--detail-row-step) - var(--header-height) - 32px))}
.project-sections{display:grid;gap:36px}
.project-row{display:grid;grid-template-columns:4em minmax(0,1fr);column-gap:24px;font-family:'FZLanTingHeiS-DB1-GB',sans-serif;font-size:18px;line-height:1.55;font-weight:400;letter-spacing:0;overflow-wrap:anywhere}
.project-row h2,.project-row p{font:inherit}.project-row h2{white-space:nowrap}.project-row p{line-break:auto}
.project-meta{position:fixed;z-index:20;left:var(--page-margin);bottom:max(var(--page-margin),env(safe-area-inset-bottom));width:var(--info-width);display:grid;grid-template-columns:1.1fr 1.25fr 1fr .65fr;gap:12px;padding-top:12px;background:var(--blue);font-family:Rany,'FZLanTingHeiS-DB1-GB',sans-serif;font-size:12px;line-height:1.25;font-weight:700;letter-spacing:-.04em;overflow-wrap:anywhere}
.project-meta>span{min-width:0}.meta-edition,.meta-award{text-align:center}.meta-time{text-align:right}
.project-media{position:relative;margin-left:calc(var(--page-margin) + 986.43573 * var(--u));width:calc(979.56427 * var(--u))}
.case-image{display:block;width:100%;height:auto;background:#d9d9d9}
.project-end{display:flex;flex-wrap:wrap;justify-content:space-between;gap:12px 20px;padding:32px 0 45px;font-size:16px}.project-end a{display:flex;align-items:center;min-height:44px}
.text-link{text-underline-offset:5px}.text-link:hover{text-decoration:underline}
.about{min-height:100svh;padding:calc(var(--page-margin) + var(--header-height) + 64px) var(--page-margin) 100px}
.about h1{font-size:clamp(28px,4vw,72px);line-height:1.15;overflow-wrap:anywhere}.about p{margin-top:32px;font:18px/1.55 'FZLanTingHeiS-DB1-GB',sans-serif}.about .text-link{display:inline-flex;align-items:center;min-height:44px;margin-top:32px;font-size:16px}

/* Stack before the full-size detail navigation would overlap the image column. */
@media(max-width:1279px){
  html{scroll-padding-top:calc(var(--page-margin) + var(--header-height) + 32px);scroll-padding-bottom:calc(var(--page-margin) + var(--meta-height) + 28px)}
  body[data-view=detail] .site-header::before,body[data-view=about] .site-header::before{content:"";position:absolute;inset:calc(-1 * max(var(--page-margin),env(safe-area-inset-top))) calc(-1 * var(--page-margin)) -16px;background:var(--blue);z-index:-1}
  .detail{padding:calc(var(--page-margin) + var(--header-height) + 32px) var(--page-margin) calc(var(--page-margin) + var(--meta-height) + 32px)}
  .detail-artboard{position:static;width:100%;overflow:visible}
  .project-info{padding-top:0}.project-sections{gap:32px}
  .project-media{margin:40px 0 0;width:100%}
  .project-meta{width:auto;right:var(--page-margin)}
  .project-meta::after{content:"";position:absolute;top:100%;left:calc(-1 * var(--page-margin));right:calc(-1 * var(--page-margin));height:max(var(--page-margin),env(safe-area-inset-bottom));background:var(--blue)}
}
@media(max-width:719px){
  :root{--page-margin:20px}
  .site-header{--nav-ratio:.8}
  .site-header nav{flex-direction:column;gap:12px}
  .tray{position:absolute;top:0;right:0}
  /* Center the intact composition below navigation, accounting for its empty artboard top. */
  .scene-artboard{bottom:max(env(safe-area-inset-bottom),calc((100dvh - var(--page-margin) - var(--header-height) - 24px - 822 * var(--scene-unit)) / 2))}
  .project-row{grid-template-columns:minmax(0,1fr);gap:12px;font-size:16px}
  .project-row h2{white-space:normal}
  .project-meta{grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:12px 20px}
  .meta-edition,.meta-time{text-align:right}.meta-award{text-align:left}
  .about{padding-top:calc(var(--page-margin) + var(--header-height) + 40px)}
}

/* Isolated home physics study; ordinary home/works behavior stays available. */
body[data-physics-preview=true][data-view=home] .soap-link{pointer-events:none}
body[data-physics-preview=true][data-view=home] .soap-link[data-physics=true]{pointer-events:auto;cursor:grab;touch-action:none;user-select:none}
body[data-physics-preview=true][data-view=home] .soap-link[data-physics=true]:active{cursor:grabbing}

/* One transparent world-space surface, preserving the independent navigation layout. */
.shared-home-foam{position:absolute;inset:0;width:2056px;height:1090px;pointer-events:none;z-index:3}
.soap>img.soap-clean{display:none}
body[data-shared-foam="true"][data-view="home"] .soap:has(.soap-clean)>img:not(.soap-clean){display:none}
body[data-shared-foam="true"][data-view="home"] .soap>img.soap-clean{display:block}
body:not([data-view="home"]) .shared-home-foam{display:none}