@font-face{font-family:'Be Vietnam Pro';src:url('./assets/be-vietnam-pro-bold.woff2') format('woff2');font-weight:700;font-display:swap}
@font-face{font-family:Rany;src:url('./assets/rany-bold.woff2') format('woff2');font-weight:700;font-display:swap}
@font-face{font-family:'FZLanTingHeiS-DB1-GB';src:url('./assets/fz-lanting-hei-db.woff2') format('woff2');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}
/* Home is one viewport; Work continues below the fold at the same soap scale. */
html:has(body[data-view=home]){overflow:hidden;overscroll-behavior:none}
body[data-view=home]{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=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:pan-y;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;overflow:clip;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:flex;justify-content:space-between;align-items:flex-start;flex-wrap:wrap;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{width:max-content;flex:0 0 auto;max-width:100%;min-width:0}.meta-line{display:block;white-space:nowrap;line-height:1.13}.meta-line-zh{font-size:11px;letter-spacing:.02em}.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:25px 0 max(var(--page-margin),env(safe-area-inset-bottom));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{display:grid;grid-template-columns:max-content max-content;justify-content:space-between;gap:12px 16px}
  .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}
body:not([data-view="home"]):not([data-view="works"]) .shared-home-foam{display:none}

/* About: paired language sections share grid rows, sized by the longer translation. */
#about{display:grid;grid-template-columns:18.92% minmax(0,1fr);gap:9.45%;padding-top:max(249px,calc(var(--page-margin) + var(--header-height) + 90px));padding-bottom:45px}
.about-profile{margin:0;min-width:0}.about-profile img{width:100%;height:auto;aspect-ratio:1;object-fit:cover}.about-profile figcaption{margin-top:15px;font:18px/1.55 'FZLanTingHeiS-DB1-GB',sans-serif}
#about .about-intro{display:grid;gap:25px}#about p{margin:0}#about .about-intro p{font:25px/1.55 'FZLanTingHeiS-DB1-GB',sans-serif;text-align:justify}
.about-content{min-width:0}.about-history-columns{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);column-gap:8%;row-gap:53px;margin-top:64px}.about-history-row{display:grid;grid-template-columns:138px minmax(0,1fr);gap:12px;align-content:start;font:18px/1.55 'FZLanTingHeiS-DB1-GB',sans-serif}.about-history-row h2,#about .about-history-row p{font:inherit}.about-history-row div{min-width:0;overflow-wrap:break-word}.about-history-row:nth-last-child(-n+2) p:nth-child(2n){margin-bottom:16px!important}.about-history-row:nth-last-child(-n+2) p:last-child{margin-bottom:0!important}
@media(max-width:1600px){#about .about-intro p{font-size:clamp(18px,1.22vw,25px)}.about-history-columns{column-gap:32px}.about-history-row{grid-template-columns:116px minmax(0,1fr);gap:14px;font-size:15px}}
@media(max-width:1100px){.about-history-columns{grid-template-columns:1fr;row-gap:32px}#about{gap:6%;grid-template-columns:25% minmax(0,1fr);padding-top:190px}}
@media(max-width:650px){#about{grid-template-columns:1fr;gap:36px;padding-top:calc(var(--page-margin) + var(--header-height) + 48px)}.about-profile{width:min(100%,280px)}#about .about-intro p{font-size:18px;text-align:start}.about-history-columns{margin-top:40px}.about-history-row{grid-template-columns:116px minmax(0,1fr);gap:12px}}

/* First paint has only the final background and fixed navigation, never old artwork. */
body[data-scene-ready="false"] .scene-artboard{visibility:hidden}
body[data-scene-phase="entering"] .soap-link,body[data-scene-phase="dissolving"] .soap-link{pointer-events:none!important}

.project-end{--nav-ratio:1;flex-wrap:nowrap}.project-end .collection-button{--button-width:134.2px;--image-width:241px}.project-end .next-button{--button-width:82.2px;--image-width:181px}
@media(max-width:1279px){.detail{padding-bottom:0}.project-meta{position:static;width:100%;margin-top:32px;padding-bottom:0}.project-meta::after{display:none}}

/* Keep complete two-line groups when the four natural widths cannot fit. */
.project-meta.meta-stacked{display:grid;grid-template-columns:max-content max-content;justify-content:space-between;gap:12px 16px}
.project-meta.meta-stacked .meta-edition{text-align:right}.project-meta.meta-stacked .meta-award{text-align:left}

.project-meta>span:nth-child(even){justify-self:end}

body[data-scene-phase=works] .foam{visibility:hidden}

/* About keeps its portrait in the viewport; only biography content scrolls. */
html:has(body[data-view=about]),body[data-view=about]{height:100dvh;overflow:hidden}
#about{height:100dvh;min-height:0;grid-template-rows:minmax(0,1fr);padding-bottom:max(var(--page-margin),env(safe-area-inset-bottom))}
.about-profile{align-self:start}
.about-content{min-height:0;overflow-y:auto;overscroll-behavior:contain;scrollbar-width:none;padding-right:8px}
@media(max-width:650px){
 #about{grid-template-rows:auto minmax(0,1fr);row-gap:20px;padding-top:calc(var(--page-margin) + var(--header-height) + 24px)}
 .about-profile{width:min(140px,18dvh)}
 .about-profile figcaption{margin-top:8px;font-size:14px}
}

.about-content::-webkit-scrollbar{display:none}

.soap[data-work-only]>img{transform:scale(var(--soap-scale,1));transform-origin:center;}
.soap[data-work-only]{filter:drop-shadow(0 5px 7px #00466c30)}

@media(max-height:430px){#about{grid-template-columns:20% minmax(0,1fr);grid-template-rows:minmax(0,1fr);gap:24px;padding-top:calc(var(--page-margin) + var(--header-height) + 16px)}.about-profile{width:100%}.about-profile img{max-height:100px;object-fit:contain}.about-profile figcaption{font-size:12px}.about-history-row{grid-template-columns:1fr;gap:8px}}

.foam:has(>img){overflow:hidden}

body[data-view=works] .scene{height:var(--work-height);min-height:100dvh;}
body[data-view=works] .scene-artboard{top:var(--scene-top);bottom:auto;height:2250px;transform-origin:top left;}
body[data-view=works] .foam{height:1090px;bottom:auto;}
body[data-soap-waiting=true] #soaps,body[data-soap-waiting=true] .shared-home-foam{visibility:hidden;}

.soap-asset-fallback{position:absolute;inset:18%;display:grid;place-items:center;padding:24px;border-radius:36px;background:#fff;color:#005a7f;text-align:center;font:700 30px/1.25 'Be Vietnam Pro',sans-serif;overflow-wrap:anywhere;pointer-events:none}

/* Reserve the same viewport width on scrolling and non-scrolling routes. */
html{scrollbar-gutter:stable;}

.soap[data-asset-fallback=title] .soap-link{clip-path:inset(18% round 36px)!important}

/* The same aria-current state owns button colour and the selected navigation route. */
.site-header .soap-button>img.nav-selected{opacity:0}
.site-header .soap-button[aria-current=page]>img.nav-selected{opacity:1}
.site-header .soap-button[aria-current=page]>img.nav-idle{opacity:0}

body[data-physics-preview=true][data-view=home] .soap-link.has-soap-cursor{cursor:none}

.tray-video{position:absolute;inset:0;width:100%;height:100%;pointer-events:none}
.tray-video[hidden]{display:none}
.tray.is-playing .tray-static{visibility:hidden}