@font-face {
  font-family: "Archivo";
  src: url("assets/fonts/Archivo-Variable.ttf") format("truetype");
  font-style: normal; font-weight: 100 900; font-stretch: 62% 125%; font-display: swap;
}
:root {
  --pad: 24px; --ink: #111; --paper: #fff; --tile-height: 55px; --bottom: 21px;
  color: var(--ink); background: var(--paper);
  font-family: "Archivo", "Helvetica Neue", Arial, sans-serif;
  font-weight: 400;
  font-synthesis: none; -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility;
}
* { box-sizing: border-box; }
html, body { margin: 0; width: 100%; height: 100%; overflow: hidden; }
body { font-size: 14px; text-transform: uppercase; }
button, a { -webkit-tap-highlight-color: transparent; }
button { font: inherit; font-family: "Archivo", "Helvetica Neue", Arial, sans-serif; color: inherit; text-transform: inherit; cursor: pointer; }
a { color: inherit; text-decoration: none; }
a:not(.brand) { position: relative; }
a:not(.brand):not(.work-card)::after { content: ""; position: absolute; left: 0; bottom: -2px; width: 100%; height: 1px; background: currentColor; transform: scaleX(0); transform-origin: left; transition: transform 220ms; }
a:hover::after, a:focus-visible::after { transform: scaleX(1); }
button:focus-visible, a:focus-visible, canvas:focus-visible { outline: 1px solid #111; outline-offset: 5px; }
.portrait { position: fixed; inset: 0; z-index: 0; transition: opacity 600ms, z-index 0s 700ms; }
/* On the work pages the head glides over the images, and lets clicks through. */
body[data-view="work"] .portrait, body[data-view="project"] .portrait { z-index: 5; pointer-events: none; transition: opacity 600ms, z-index 0s; }
body[data-view="work"] #head-canvas, body[data-view="project"] #head-canvas { pointer-events: none; }
/* The logo spans 90% of the liquid field's square (LOGO_SPAN in logo-intro.js). */
.logo-loading { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); width: calc(min(56.93vh, 90vw) * .9); height: auto; pointer-events: none; }
@media (max-width: 700px) { .logo-loading { width: calc(min(67.97vh, 90vw) * .9); } }
@media (prefers-reduced-motion: reduce) { .logo-loading { display: none; } }
#head-canvas { width: 100%; height: 100%; display: block; outline-offset: -8px; cursor: grab; filter: contrast(1.14); }
#head-canvas:active { cursor: grabbing; }
.head-status { position: absolute; top: 52%; left: 50%; transform: translate(-50%, -50%); color: #888; font-size: 10px; letter-spacing: .5px; transition: opacity 500ms; }
.head-status.loaded { opacity: 0; pointer-events: none; }
.intro { position: fixed; top: var(--pad); left: var(--pad); right: calc(var(--pad) + 88px); z-index: 2; pointer-events: none; }
a.nav-work { position: fixed; top: var(--pad); right: var(--pad); z-index: 9; font-size: 14px; line-height: 1.35; letter-spacing: .14px; transition: opacity 400ms, visibility 400ms; }
.nav-work span { padding-left: 6px; }
.intro h1 { margin: 0; font: inherit; font-size: 14px; line-height: 1.35; font-weight: 400; letter-spacing: .14px; }
.intro a { pointer-events: auto; }
.dim { color: #808080; }
.identity, .contact { position: fixed; top: 50%; transform: translateY(-50%); z-index: 3; font-size: 10px; line-height: 1.35; letter-spacing: .2px; }
.identity { left: var(--pad); }
.contact { right: var(--pad); text-align: right; }
.contact nav { white-space: nowrap; }
.brand { position: fixed; left: var(--pad); bottom: var(--pad); z-index: 3; width: 84px; height: auto; display: block; }
.brand img { display: block; width: 100%; height: auto; }
.home-element { transition: opacity 400ms, visibility 400ms; }
.work-image { position: fixed; inset: 0; opacity: 0; visibility: hidden; z-index: 1; pointer-events: none; transition: opacity 400ms, visibility 400ms; }
.gray-image { position: absolute; left: 50%; top: 0; bottom: 0; width: min(80vh, 57vw); transform: translateX(-50%); background: #e5e5e5; transition: background-color 350ms, opacity 180ms; }
.work-image[data-kind="image"] .gray-image, .work-image[data-kind="video"] .gray-image { opacity: 0; }
.work-media { position: absolute; inset: 0; }
.media-layer { position: absolute; left: 50%; transform: translateX(-50%); top: var(--pad); bottom: calc(var(--bottom) + var(--tile-height) + 53px); width: calc(100vw - 2 * clamp(160px, 20vw, 300px)); opacity: 0; visibility: hidden; transition: opacity 180ms, visibility 180ms; }
.media-layer.visible { opacity: 1; visibility: visible; }
.work-media img, .work-media video { display: block; width: 100%; height: 100%; object-fit: contain; }
.media-time { position: absolute; left: 50%; transform: translateX(-50%); color: #808080; font-variant-numeric: tabular-nums; }
.work-info { position: fixed; top: 50%; left: var(--pad); transform: translateY(-50%); z-index: 4; max-width: 21vw; font-size: 10px; line-height: 1.35; letter-spacing: .2px; opacity: 0; visibility: hidden; pointer-events: none; transition: opacity 250ms, visibility 250ms; }
.work-info h2, .work-info p { font: inherit; margin: 0; }
.work-info h2 { max-width: 24ch; }
.work-info #work-position { margin-top: 12px; color: #808080; }
.text-button { background: none; border: 0; padding: 0; line-height: 1.35; letter-spacing: .2px; font-size: 10px; }
.text-button:hover { color: #888; }
.close-work { position: fixed; right: var(--pad); top: 50%; transform: translateY(-50%); z-index: 5; opacity: 0; visibility: hidden; transition: opacity 300ms, visibility 300ms; }
.close-work span { padding-left: 7px; font-size: 14px; vertical-align: -1px; }
.work-controls { position: fixed; left: var(--pad); right: var(--pad); bottom: calc(var(--bottom) + var(--tile-height) + 15px); display: flex; align-items: center; justify-content: space-between; z-index: 6; font-size: 10px; opacity: 0; visibility: hidden; transition: opacity 300ms, visibility 300ms; }
#play-symbol { display: inline-block; width: 9px; text-align: left; }
.hover-title { position: fixed; left: 50%; bottom: calc(var(--bottom) + var(--tile-height) + 13px); transform: translateX(-50%); white-space: nowrap; z-index: 6; font-size: 10px; letter-spacing: .2px; opacity: 0; transition: opacity 180ms; pointer-events: none; }
.carousel { position: fixed; left: 0; right: 0; bottom: var(--bottom); height: var(--tile-height); z-index: 7; touch-action: none; user-select: none; pointer-events: none; transition: opacity 900ms, visibility 900ms, translate 900ms cubic-bezier(.16,1,.3,1); }
.tile { position: absolute; top: 0; left: 0; width: 40px; height: var(--tile-height); border: 1px solid #fff; border-radius: 2px; padding: 0; background: #e5e5e5; font-size: 9px; letter-spacing: .18px; line-height: 1; transform-origin: center; pointer-events: auto; overflow: hidden; will-change: transform; }
.tile::after { content: ""; position: absolute; inset: 0; background: #fff; opacity: 0; transition: opacity 160ms; }
.tile:hover::after { opacity: .24; }
.tile .number { position: absolute; top: 4px; right: 3px; }
.tile .letter { position: absolute; bottom: 4px; left: 3px; }
.tile .work-label { position: absolute; top: 4px; left: 3px; font-size: 8px; }
.tile:focus-visible { outline-offset: -2px; z-index: 20; }
.tile[hidden] { display: none; }
.playhead { position: fixed; bottom: var(--bottom); left: calc(50% - 1px); width: 2px; height: var(--tile-height); background: #e12724; z-index: 8; pointer-events: none; opacity: 0; transition: opacity 300ms; }
body.previewing .work-image, body.viewing .work-image { opacity: 1; visibility: visible; }
body.previewing .identity, body.previewing .portrait, body.previewing .intro,
body.viewing .home-element, body.viewing .portrait { opacity: 0; visibility: hidden; pointer-events: none; }
body.previewing .work-info, body.viewing .work-info { opacity: 1; visibility: visible; }
body.previewing .hover-title { opacity: 1; }
body.viewing .close-work, body.viewing .work-controls { opacity: 1; visibility: visible; }
body.viewing .playhead { opacity: 1; }
body.viewing .nav-work { opacity: 0; visibility: hidden; pointer-events: none; }
/* Work page: one row of large project images drifting left to right. */
.work-index { --card-height: min(46vh, 30vw); position: fixed; inset: 0; z-index: 4; display: flex; align-items: center; overflow: hidden; pointer-events: none; opacity: 0; visibility: hidden; transition: opacity 500ms, visibility 500ms; }
.work-track { display: flex; align-items: flex-start; gap: 3.5vw; padding-bottom: 7vh; }
.work-card { flex: none; display: block; pointer-events: auto; touch-action: pan-y; will-change: transform; }
/* Every card is the same 16:9 window, like the Nanjing Museum film. */
.work-card img, .work-card video, .work-card-placeholder { display: block; height: var(--card-height); width: auto; aspect-ratio: 16 / 9; object-fit: cover; }
.work-card img { opacity: 0; transition: opacity 600ms; }
.work-card img.loaded { opacity: 1; }
.work-card-placeholder { background: #e5e5e5; }
.work-card-name { display: block; margin-top: 10px; font-size: 10px; line-height: 1.35; letter-spacing: .2px; transition: color 200ms; }
.work-card-name .dim { display: block; }
.work-card:hover .work-card-name, .work-card:focus-visible .work-card-name { color: #808080; }
.work-index.static { overflow-x: auto; pointer-events: auto; }
.work-index.static .work-track { padding: 0 var(--pad) 7vh; }
/* A project's page opens over the work page: a frosted layer, the project's images
   in one centered column that scrolls without end, and an info panel at the top right. */
.project-view { position: fixed; inset: 0; z-index: 10; visibility: hidden; pointer-events: none; }
.project-view.preparing { visibility: visible; }
.project-view.open { pointer-events: auto; }
.view-backdrop { position: absolute; inset: 0; opacity: 0; background: rgba(225, 226, 227, .3); -webkit-backdrop-filter: blur(11px); backdrop-filter: blur(11px); transform: translateZ(0); will-change: opacity; transition: opacity .58s cubic-bezier(.22, 1, .36, 1); }
.project-view.reveal .view-backdrop { opacity: 1; }
.project-scroll { position: absolute; inset: 0; overflow-y: auto; overscroll-behavior: contain; overflow-anchor: none; scrollbar-width: none; outline: none; opacity: 0; }
.project-scroll::-webkit-scrollbar { display: none; }
.project-view.gallery-ready .project-scroll { opacity: 1; }
.project-view.closing .project-scroll { opacity: 0; }
/* Every image has the same 28px of space below it, whatever its size. */
.project-slide { display: flex; justify-content: center; margin: 0 0 28px; pointer-events: none; }
.project-media { flex: none; overflow: hidden; border-radius: 13px; clip-path: inset(0 round 13px); pointer-events: auto; }
.project-media.is-empty { background: #e5e5e5; }
.project-media img, .project-media video { display: block; width: 100%; height: 100%; object-fit: cover; opacity: 0; transition: opacity .48s cubic-bezier(.22, 1, .36, 1); }
.project-view.gallery-ready .project-media.selected :is(img, video) { opacity: 1; transition: none; }
.project-view.open .project-media :is(img, video) { opacity: 1; transition-delay: var(--fade-delay, 0ms); }
/* The image travelling between a card and the column. Back to the work page, it
   passes under the frosted layer as that clears. */
.project-traveller { position: fixed; z-index: 11; display: block; margin: 0; object-fit: cover; background: #e5e5e5; pointer-events: none; will-change: left, top, width, height; }
.project-traveller.returning { z-index: 6; }
.project-info { position: absolute; z-index: 5; top: 10px; right: 10px; width: min(246px, calc(100vw - 20px)); max-height: calc(100% - 20px); overflow-y: auto; padding: 32px 12px 12px; border-radius: 2px; background: #e6e6e6; color: #010101; font-size: 11px; line-height: 1.28; letter-spacing: .2px; opacity: 0; transform: translateY(-9px) scale(.98); transform-origin: 100% 0; transition: opacity .35s .08s ease, transform .5s .04s cubic-bezier(.22, 1, .36, 1); }
.project-view.open .project-info { opacity: 1; transform: none; }
/* Closing, the panel folds into its top right corner. */
.project-view.closing .project-info { opacity: 0; transform: scale(.045); transition: transform .52s cubic-bezier(.76, 0, .24, 1), opacity .2s .24s ease-out; }
.project-info h2 { margin: 0 0 5px; font: inherit; outline: none; }
.project-meta { margin: 0; color: #777; }
.project-year { margin: 3px 0 0; color: #777; }
.project-year[hidden] { display: none; }
.project-year strong { padding: 1px 3px; border-radius: 1px; background: #111; color: #fff; font-weight: 400; }
.project-rule { height: 1px; margin: 12px 0; background: #cfcfcf; }
#project-text { margin: 0; color: #777; line-height: 1.38; white-space: pre-line; }
.project-rule[hidden], #project-text[hidden] { display: none; }
.project-close { position: absolute; top: 4px; right: 4px; width: 20px; height: 20px; padding: 0; border: 0; background: none; color: #010101; font-size: 16px; line-height: 20px; text-align: center; }
.project-close:hover { color: #777; }
/* A rail at the left whose thumb runs down as the column scrolls, then starts over. */
.scroll-hint { position: absolute; z-index: 6; top: 50%; left: 42px; width: 16px; height: 72px; padding: 4px; overflow: hidden; border-radius: 99px; background: #fff; transform: translateY(-50%); opacity: 0; pointer-events: none; transition: opacity .24s .18s ease; }
.project-view.open .scroll-hint { opacity: 1; transition-delay: 0s; }
.scroll-hint i { display: block; width: 8px; height: 19px; border-radius: 99px; background: #111; transform: translate3d(0, var(--thumb-y, 0px), 0); will-change: transform; }
body:is([data-view="work"], [data-view="project"]) .work-index { opacity: 1; visibility: visible; transition-delay: 250ms; }
body[data-view="work"] :is(.intro, .identity, .contact, .carousel),
body[data-view="project"] :is(.intro, .identity, .contact, .carousel) { opacity: 0; visibility: hidden; pointer-events: none; }
body[data-view="work"] .carousel, body[data-view="project"] .carousel { translate: 0 12px; }
body.viewing .hover-title { opacity: 0; }
body.dragging .tile { cursor: grabbing; }
.visually-hidden { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0; }
.noscript { position: fixed; inset: 40% 24px auto; text-align: center; font-size: 14px; background: white; z-index: 10; }
/* Initial markup hides the interface before scripts load, avoiding any first-frame flash. */
body.opening .home-element, body.opening .carousel, body.opening .nav-work {
  opacity: 0; visibility: hidden; pointer-events: none;
}
body.opening .carousel { translate: 0 12px; }
body.opening .head-status { visibility: hidden; }
body.opening #head-canvas { cursor: default; }
body.revealing .home-element { transition: opacity 800ms ease, visibility 800ms; }
body.revealing .identity, body.revealing .contact { transition-delay: 100ms; }
body.revealing .nav-work { transition: opacity 800ms ease 100ms, visibility 800ms 100ms; }
body.revealing .brand { transition-delay: 220ms; }
body.revealing .carousel { transition-delay: 350ms; }
@media (min-width: 1800px) {
  .intro h1 { font-size: 16px; }
  .identity, .contact, .work-info, .text-button, .work-controls { font-size: 12px; }
}
@media (max-width: 700px) {
  :root { --pad: 18px; --bottom: 19px; --tile-height: 52px; }
  .intro { right: calc(var(--pad) + 60px); }
  .intro h1 { font-size: 13px; line-height: 1.35; max-width: 46ch; }
  .nav-work { font-size: 13px; }
  .work-index { --card-height: min(40vh, calc((100vw - 2 * var(--pad)) * 9 / 16)); }
  .work-track { gap: 6vw; padding-bottom: 9vh; }
  .scroll-hint { display: none; }
  .desktop-break { display: none; }
  .identity, .contact { top: auto; bottom: 139px; transform: none; font-size: 10px; }
  .brand { width: 67px; bottom: 22px; }
  .gray-image { width: calc(100vw - 36px); top: 17%; bottom: 23%; }
  .media-layer { width: calc(100vw - 36px); top: 100px; bottom: 125px; }
  .work-info { top: var(--pad); transform: none; max-width: calc(100vw - 100px); }
  .work-info h2 { max-width: none; }
  .work-info #work-position { margin-top: 6px; }
  .close-work { top: var(--pad); transform: none; }
  .work-controls { bottom: calc(var(--bottom) + var(--tile-height) + 19px); }
  .hover-title { left: auto; right: var(--pad); transform: none; max-width: 70vw; white-space: normal; text-align: right; }
  body.previewing .contact, body.previewing .brand { opacity: 0; visibility: hidden; }
}
@media (max-height: 520px) and (min-width: 701px) {
  .intro h1 { font-size: 12px; }
  .gray-image { width: 65vh; }
}
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { transition-duration: 0.01ms !important; }
}