/* =========================================================
   Fonts & tokens
   ========================================================= */
@font-face {
  font-family: 'Tenor Sans';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('../fonts/TenorSans-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Tenor Sans';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('../fonts/TenorSans-latin-ext.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+1E00-1E9F, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

/* Cormorant Garamond (SIL OFL): the italic voice of the About page's English lines and numerals. */
@font-face { font-family: 'Cormorant Garamond'; font-style: italic; font-weight: 300; font-display: swap; src: url('../fonts/cormorant-garamond-latin-300-italic.woff2') format('woff2'); }
@font-face { font-family: 'Cormorant Garamond'; font-style: italic; font-weight: 400; font-display: swap; src: url('../fonts/cormorant-garamond-latin-400-italic.woff2') format('woff2'); }
@font-face { font-family: 'Cormorant Garamond'; font-style: normal; font-weight: 300; font-display: swap; src: url('../fonts/cormorant-garamond-latin-300-normal.woff2') format('woff2'); }

:root {  --font: 'Tenor Sans', 'Noto Serif SC', 'Source Han Serif SC', 'Songti SC', STSong, Optima, Candara, serif;
  --fg: rgba(255, 255, 255, 0.86);
  --fg-2: rgba(255, 255, 255, 0.62);
  --fg-3: rgba(255, 255, 255, 0.38);
  --fg-4: rgba(255, 255, 255, 0.16);
  --gold: #c99633;
  --seal: #a8261b;
  --song: 'KingHwa OldSong', 'Noto Serif SC', serif;
  --fang: 'Zhuque Fangsong', 'Noto Serif SC', serif;
  --ital: 'Cormorant Garamond', 'Noto Serif SC', serif;
  --ease: cubic-bezier(0.22, 1, 0.36, 1);
  --ease-io: cubic-bezier(0.65, 0, 0.35, 1);
}

*, *::before, *::after { box-sizing: border-box; }
html { font-size: clamp(11px, 0.93vw, 18px); }
html, body { margin: 0; height: 100%; background: #000; overflow: hidden; }
body {
  font-family: var(--font);
  /* Tenor only has 400, so this lightens just the Chinese (variable Noto Serif SC). */
  font-weight: 300;
  color: var(--fg);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  overscroll-behavior: none;
  user-select: none;
  -webkit-tap-highlight-color: transparent;
}
a { color: inherit; text-decoration: none; }
button { font: inherit; color: inherit; background: none; border: 0; padding: 0; cursor: pointer; }
img, video { display: block; }
ol, ul { list-style: none; margin: 0; padding: 0; }
h1, h2, h3, p, figure, dl, dd { margin: 0; font-weight: inherit; }
::selection { background: rgba(255, 255, 255, 0.2); }
:focus-visible { outline: 1px solid var(--fg-3); outline-offset: 4px; }
/* The sentence menu already marks the current page with its underline; no box on top. */
.nav-link:focus, .nav-link:focus-visible { outline: none; }

.caps { text-transform: uppercase; }

/* =========================================================
   Chinese typesetting
   Latin keeps the reference's wide-tracked capitals; Chinese runs (wrapped in
   .zh by util.js) follow their own rules instead of inheriting them.
   The type is designed with weight, not spacing: Noto Serif SC is variable
   (200-900), so display Chinese is cut heavy and set nearly solid, like the
   title cards of Chinese art-house posters; prose stays light; small labels sit
   in a firm medium so thin serifs never break up on black.
   - display: 800, tracking .02-.06em, tight leading, big size jumps;
   - prose: 300-350, full-width punctuation;
   - labels: 500, never below 12px, proportional punctuation.
   Contexts tune the tokens: --zh-ls, --zh-w, --zh-ff, --zh-min.
   ========================================================= */
html { text-autospace: normal; }
.zh {
  letter-spacing: var(--zh-ls, 0.12em);
  font-size: max(1em, var(--zh-min, 12px));
  font-weight: var(--zh-w, 500);
  font-feature-settings: var(--zh-ff, 'palt');
  text-transform: none;
}
/* prose: tight Latin, near-solid Han, full-width punctuation */
.bi-para, .pj-lead, .pj-more-text, .bh-text, .ai-fact dd, .hf-lead, .pr-sub-zh, .ab-state-facts dd, .lb-empty-zh {
  --zh-ls: 0.06em; --zh-ff: normal; --zh-w: 350;
}
.pj-lead, .hf-lead { --zh-w: 400; }
.ab-state-facts dd { --zh-w: 500; }
/* the biography opens with a heavy lead line, then falls to light prose */
.bi-para:first-child { --zh-w: 600; --zh-ls: 0.03em; --zh-ff: 'palt'; }
/* display headings: heavy, nearly solid */
.fm-head-zh, .os-title, .vf-title, .ai-head { --zh-ls: 0.06em; --zh-w: 800; }
/* the hero's two lines are the film's two eras: heavy ink for the years on set, a hairline for AI */
.ab-state-line { --zh-ls: 0.03em; --zh-w: 800; }
.ab-state-line + .ab-state-line { --zh-w: 250; }
.pj-title, .hf-title, .pj-next-title, .lb-empty-en { --zh-ls: 0.12em; --zh-w: 800; }
/* lists of titles: the hovered one gains weight instead of spacing */
.fm-t { --zh-ls: 0.1em; --zh-w: 400; }
.fm-t .zh { transition: font-weight 0.6s var(--ease), letter-spacing 0.7s var(--ease); }
.fm-t:hover { --zh-w: 800; }
.fm-group.is-feature .fm-t { --zh-w: 500; }
.fm-hl-title { --zh-ls: 0.04em; --zh-w: 800; }
.wi-title, .cat-label { --zh-ls: 0.2em; }
.pc-title.is-cjk { --zh-ls: 0.1em; }
.ai-title, .fm-slate-v { --zh-ls: 0.08em; }
.fm-slate-v.is-title { --zh-w: 600; --zh-ls: 0.04em; }
.pj-en { --zh-ls: 0.24em; --zh-w: 700; }

/* =========================================================
   Global chrome
   ========================================================= */
#space {
  position: fixed; inset: 0; width: 100%; height: 100%;
  opacity: 0; transition: opacity 1.2s var(--ease);
  touch-action: none;
}
#space.is-active { opacity: 1; }
body.is-grabbing, body.is-grabbing * { cursor: grabbing !important; }

.site-header {
  position: fixed; top: 0; left: 0; right: 0; z-index: 60;
  display: flex; justify-content: center;
  padding-top: 4.2rem; pointer-events: none;
}
.brand {
  pointer-events: auto; display: flex; flex-direction: column; align-items: center;
  text-transform: uppercase; line-height: 1;
}
.brand-name { font-size: 1.45rem; letter-spacing: 0.2em; margin-right: -0.2em; color: rgba(255, 255, 255, 0.92); }
.brand-role { font-size: 0.82rem; letter-spacing: 0.34em; margin-right: -0.34em; margin-top: 0.55rem; color: rgba(255, 255, 255, 0.42); transition: color 0.5s; }
.brand:hover .brand-role { color: var(--fg); }

.back-link {
  position: fixed; z-index: 60; top: 3.8rem; left: 2.6rem;
  display: flex; flex-direction: column; text-transform: uppercase;
  opacity: 0; pointer-events: none; transform: translateX(-0.6rem);
  transition: opacity 0.6s var(--ease), transform 0.6s var(--ease);
}
.back-link.is-visible { opacity: 1; pointer-events: auto; transform: none; }
.back-top { display: flex; align-items: center; gap: 0.25rem; font-size: 0.9rem; letter-spacing: 0.18em; color: #fff; }
.back-top svg { width: 0.75rem; height: 0.55rem; transition: transform 0.5s var(--ease); }
.back-link:hover .back-top svg { transform: translateX(-0.3rem); }
.back-sub { font-size: 0.72rem; letter-spacing: 0.26em; color: var(--fg-2); margin-left: 1rem; margin-top: 0.1rem; }

.sentence-nav {
  position: fixed; left: 50%; bottom: 1.6rem; z-index: 60;
  transform: translateX(-50%);
  display: flex; flex-direction: column; align-items: center;
  text-transform: uppercase; white-space: nowrap;
  transition: opacity 0.8s var(--ease);
}
.nav-line { display: flex; align-items: baseline; justify-content: center; margin-left: 1em; }
.nav-line + .nav-line { margin-top: 0.35rem; margin-left: 0; }
.nav-word { font-size: 0.85rem; letter-spacing: 0.3em; margin: 0 0.6rem; color: var(--fg-2); }
.nav-link { position: relative; font-size: 1.62rem; letter-spacing: 0.22em; margin: 0 0.55rem; color: var(--fg-2); transition: color 0.5s; padding-bottom: 0.2rem; }
.nav-link span { margin-right: -0.22em; }
.nav-link::after {
  content: ''; position: absolute; left: 0; right: 0; bottom: 0; height: 1px; background: currentColor;
  transform: scaleX(0); transform-origin: right; transition: transform 0.6s var(--ease);
}
.nav-link:hover { color: rgba(255, 255, 255, 0.85); }
.nav-link:hover::after { transform: scaleX(1); transform-origin: left; }
.nav-link.is-active { color: #fff; }
.nav-link.is-active::after { transform: scaleX(1); }

.mute {
  position: fixed; right: 2.2rem; bottom: 2.4rem; z-index: 60;
  display: flex; align-items: center; gap: 0.5rem; color: var(--fg);
}
.mute-icon { width: 1.35rem; height: 1rem; }
.mute-viz { width: 3.6rem; height: 1.4rem; opacity: 0; transition: opacity 0.6s; }
body:not(.is-muted) .mute-viz { opacity: 1; }
.mute-x { opacity: 0; transition: opacity 0.3s; }
.mute-waves { opacity: 1; transition: opacity 0.3s; }
body.is-muted .mute-x { opacity: 1; }
body.is-muted .mute-waves { opacity: 0; }

.loader { position: fixed; right: 2.1rem; bottom: 2.2rem; z-index: 1000; width: 2.4rem; height: 2.4rem; transition: opacity 0.6s; }
.loader svg { width: 100%; height: 100%; animation: spin 1.2s linear infinite; }
.loader circle { fill: none; stroke: rgba(255, 255, 255, 0.7); stroke-width: 1.4; stroke-dasharray: 80 30; }
.loader.is-done { opacity: 0; pointer-events: none; }
@keyframes spin { to { transform: rotate(360deg); } }

/* "Learn more" riding on the cursor */
.hover-label {
  position: fixed; left: 0; top: 0; z-index: 70; pointer-events: none;
  text-transform: uppercase; white-space: nowrap;
  opacity: 0; transition: opacity 0.35s;
}
.hover-label.is-visible { opacity: 1; }
.hl-learn {
  display: block; transform: translate(1.2rem, -50%); font-size: 0.82rem; letter-spacing: 0.4em; color: rgba(255, 255, 255, 0.85);
}
.hover-label.is-visible .hl-learn { animation: learnIn 0.7s var(--ease) both; }
@keyframes learnIn { from { letter-spacing: 0.9em; opacity: 0; } }

/* Hovered work's title and synopsis, held in the centre of the screen */
.hover-focus {
  position: fixed; left: 50%; top: 50%; z-index: 55; width: min(34rem, 80vw); pointer-events: none;
  transform: translate(-50%, -50%); text-align: center;
  opacity: 0; transition: opacity 0.5s var(--ease);
}
.hover-focus.is-visible { opacity: 1; pointer-events: auto; cursor: pointer; }
/* Touch: no cursor label; "Learn more" sits at the bottom instead (reference). */
.learn-more {
  position: fixed; left: 50%; bottom: 7.5rem; z-index: 61; transform: translateX(-50%);
  font-size: 0.9rem; letter-spacing: 0.4em; margin-right: -0.4em; text-transform: uppercase; color: #fff;
  opacity: 0; pointer-events: none; transition: opacity 0.4s var(--ease); display: none;
}
@media (hover: none), (pointer: coarse) {
  .hover-label { display: none; }
  .learn-more { display: block; }
  .learn-more.is-visible { opacity: 1; pointer-events: auto; }
  body:not([data-page='home']) .learn-more { display: none; }
}
body:not([data-page='home']) .hover-focus { display: none; }
.hf-title { font-size: 1.9rem; letter-spacing: 0.3em; margin-right: -0.3em; text-transform: uppercase; color: #fff; text-shadow: 0 0 2rem rgba(0, 0, 0, 0.8); }
.hf-title.is-cjk { font-size: 2.2rem; letter-spacing: 0.55em; margin-right: -0.55em; }
.hf-lead { margin-top: 1rem; font-size: 0.86rem; line-height: 1.9; letter-spacing: 0.22em; color: rgba(255, 255, 255, 0.78); text-shadow: 0 0 1.2rem #000; text-wrap: balance; }
.hover-focus.is-visible .hf-title { animation: focusIn 0.9s var(--ease) both; }
.hover-focus.is-visible .hf-lead { animation: focusIn 0.9s var(--ease) 0.08s both; }
@keyframes focusIn { from { opacity: 0; filter: blur(6px); transform: translateY(0.4rem); } }
/* Hidden means untouchable too: on a phone the centred title sits right over it.
   It also waits until the fly-in has landed. */
body.is-hovering .home-index, body.is-hovering .home-hint,
body:not(.space-settled):not(.no-webgl) .home-index { opacity: 0; pointer-events: none; }
.home-index, .home-hint { transition: opacity 0.5s var(--ease); }

/* Brand letters assemble in random order */
.bn-ch { display: inline-block; opacity: 0; filter: blur(8px); }
body.brand-in .bn-ch { animation: bnIn 1.3s var(--ease) both; animation-delay: var(--d); }
@keyframes bnIn { from { opacity: 0; filter: blur(8px); } to { opacity: 1; filter: none; } }

/* The wall grades its own grain; the overlay would only re-blend the whole screen each frame. */
body[data-page="home"] .grain, body.is-intro .grain { display: none; }
.grain {
  position: fixed; inset: -50%; z-index: 900; pointer-events: none; opacity: 0.22; mix-blend-mode: overlay;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='220' height='220'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  animation: grain 0.9s steps(6) infinite;
}
@keyframes grain {
  0% { transform: translate(0, 0); } 20% { transform: translate(-3%, 2%); } 40% { transform: translate(2%, -3%); }
  60% { transform: translate(-2%, -1%); } 80% { transform: translate(3%, 3%); } 100% { transform: translate(0, 0); }
}

/* Chrome is hidden until the intro gate is passed. */
body.is-intro .site-header, body.is-intro .sentence-nav, body.is-intro .mute, body.is-intro .back-link { opacity: 0; }
.site-header, .mute { transition: opacity 1s var(--ease); }

/* =========================================================
   Intro gate: the reference's small staircase, over the wall already
   drifting behind it (dimmed and out of focus), with a sound-meter cursor
   and words that lean toward it.
   ========================================================= */
.intro {
  position: fixed; inset: 0; z-index: 999;
  background: #000;
  display: flex; align-items: center; justify-content: center;
  transition: opacity 1.1s var(--ease);
}
/* The wall drifts behind the gate on every page; the page itself waits until the gate is passed. */

body.is-intro #view, body.is-intro #view:not(.is-entering):not(.is-leaving) { opacity: 0; }
.intro.is-ready { cursor: pointer; }
.intro.is-leaving { opacity: 0; pointer-events: none; }
@media (hover: hover) and (pointer: fine) { .intro.is-ready, .intro.is-ready .intro-skip { cursor: none; } }

/* The invitation. Reference: 12.8px on a 1366px screen, .15em tracking,
   80% white, a small staircase, centred (its box is measured in main.js). */
.intro-words {
  position: relative; z-index: 2; width: 25.8em; height: 7em;
  text-transform: uppercase; font-size: clamp(11px, 0.94vw, 15px); letter-spacing: 0.15em; line-height: 1.2;
  color: rgba(255, 255, 255, 0.8); pointer-events: none;
}
.iw {
  position: absolute; left: var(--x); top: var(--y); white-space: nowrap;
  opacity: 0; transform: translateY(0.8em); filter: blur(6px);
  transition: opacity 1.4s var(--ease), transform 1.4s var(--ease), filter 1.4s var(--ease);
  transition-delay: calc(var(--i) * 0.11s + 0.2s);
}
/* Words lean toward the pointer and brighten as it comes near (set in main.js). */
.iw > span {
  display: inline-block; transform: translate(var(--mx, 0), var(--my, 0));
  opacity: calc(0.8 + var(--near, 0) * 0.2); text-shadow: 0 0 calc(var(--near, 0) * 16px) rgba(255, 255, 255, 0.5);
    transition: transform 0.9s var(--ease), opacity 0.6s, text-shadow 0.6s, letter-spacing 0.9s var(--ease);
}
/* The staircase floats as one piece (words drifting separately collided). */
.intro.is-ready .intro-words { animation: drift 5.5s ease-in-out infinite; }
@keyframes drift { 0%, 100% { translate: 0 0; } 50% { translate: 0 -0.28em; } }
.iw:first-child { color: #fff; }
.intro.is-ready .iw { opacity: 1; transform: none; filter: none; }
.intro.is-leaving .iw {
  opacity: 0; filter: blur(8px); transition-duration: 0.9s; transition-delay: calc(var(--i) * 0.04s);
  transform: translate(calc((var(--i) - 3) * 1.4em), -1.2em);
}
/* Each letter is a key (pressed and rippled in main.js); a pressed key catches the light. */
.iw-k { display: inline-block; color: rgb(255 255 255 / calc(0.8 + var(--k, 0) * 0.2)); text-shadow: 0 0 calc(var(--k, 0) * 12px) rgba(255, 255, 255, calc(var(--k, 0) * 0.7)); }
.iw:first-child .iw-k { color: #fff; }
.iw-sound { position: relative; display: inline-block; }
.iw-ghost { opacity: 0.14; }
.iw-letters { position: absolute; left: 0; top: 0; display: flex; }
.iw-l { display: inline-block; animation: wave 2.6s var(--ease-io) infinite; animation-delay: calc(var(--i) * 0.1s + 1.6s); }
@keyframes wave {
  0%, 55%, 100% { transform: translateY(0); opacity: 1; }
  25% { transform: translateY(-0.22em); opacity: 0.7; }
}
/* Over the words the ring shrinks to a point so it never covers the letters. */
.intro-cursor.is-near { width: 0.6rem; height: 0.6rem; margin: -0.3rem 0 0 -0.3rem; border-color: transparent; background: rgba(255, 255, 255, 0.9); }
.intro-cursor.is-near i { opacity: 0; }
.intro-skip {
  position: absolute; z-index: 2; left: 50%; bottom: 2rem; transform: translateX(-50%);
  font-size: clamp(9px, 0.73vw, 12px); letter-spacing: 0.35em; text-transform: uppercase; color: #c5c5c5; white-space: nowrap;
  padding-bottom: 0.4em; opacity: 0; pointer-events: none; transition: opacity 1.2s var(--ease) 1.2s, color 0.4s;
}
.intro-skip::after {
  content: ''; position: absolute; left: 0; right: 0.35em; bottom: 0; height: 1px;
  background: currentColor; opacity: 0.7; transition: opacity 0.4s;
}
.intro.is-ready .intro-skip { opacity: 1; pointer-events: auto; }
/* As on the reference, the underline fades away under the pointer. */
.intro-skip:hover { color: #fff; }
.intro-skip:hover::after { opacity: 0; }

/* Cursor: a thin ring with a live level meter, eased toward the pointer. */
.intro-cursor {
  position: absolute; left: 0; top: 0; z-index: 3; width: 3.4rem; height: 3.4rem; margin: -1.7rem 0 0 -1.7rem;
  display: none; align-items: center; justify-content: center; gap: 2px; pointer-events: none;
  border: 1px solid rgba(255, 255, 255, 0.5); border-radius: 50%;
  transition: width 0.5s var(--ease), height 0.5s var(--ease), margin 0.5s var(--ease), border-color 0.5s, background 0.5s, opacity 0.5s;
}
@media (hover: hover) and (pointer: fine) { .intro.is-ready .intro-cursor { display: flex; } }
/* Hidden until the pointer first moves, so it never parks on the words at load. */
.intro-cursor:not(.is-live) { opacity: 0; }
.intro-cursor i { width: 1px; height: 0.9rem; background: #fff; transform: scaleY(0.25); animation: meter 1.1s var(--ease-io) infinite; transition: opacity 0.3s; }
.intro-cursor i:nth-child(2) { animation-delay: -0.35s; }
.intro-cursor i:nth-child(3) { animation-delay: -0.7s; }
.intro-cursor i:nth-child(4) { animation-delay: -0.15s; }
.intro-cursor i:nth-child(5) { animation-delay: -0.55s; }
@keyframes meter { 0%, 100% { transform: scaleY(0.2); } 50% { transform: scaleY(1); } }
/* Over "enter without sound" the meter goes flat and the ring closes in. */
.intro-cursor.is-mute { width: 1.2rem; height: 1.2rem; margin: -0.6rem 0 0 -0.6rem; border-color: rgba(255, 255, 255, 0.9); }
.intro-cursor.is-mute i { animation: none; transform: scaleY(0); }
.intro.is-leaving .intro-cursor { opacity: 0; width: 6rem; height: 6rem; margin: -3rem 0 0 -3rem; }

/* =========================================================
   Page transitions
   ========================================================= */
#view { position: fixed; inset: 0; z-index: 10; pointer-events: none; }
#view > .page { pointer-events: auto; }
#view.is-leaving { opacity: 0; filter: blur(8px); transition: opacity 0.55s var(--ease-io), filter 0.55s var(--ease-io); }
#view.is-entering { opacity: 0; }
#view:not(.is-entering):not(.is-leaving) { opacity: 1; transition: opacity 0.9s var(--ease), filter 0.9s var(--ease); }
.page { position: absolute; inset: 0; }

/* =========================================================
   Home overlay
   ========================================================= */
.page-home { pointer-events: none !important; }
.home-index {
  position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%);
  display: flex; flex-direction: column; align-items: center; gap: 0.7rem;
  pointer-events: auto; text-transform: uppercase; padding: 1rem;
}
.home-plus { position: relative; width: 1.2rem; height: 1.2rem; transition: transform 0.8s var(--ease); }
.home-plus::before, .home-plus::after { content: ''; position: absolute; background: var(--fg); left: 50%; top: 50%; transform: translate(-50%, -50%); }
.home-plus::before { width: 100%; height: 1px; }
.home-plus::after { width: 1px; height: 100%; }
.home-index-label { font-size: 1.1rem; letter-spacing: 0.4em; margin-right: -0.4em; color: var(--fg); transition: color 0.5s, letter-spacing 0.8s var(--ease); }
.home-index:hover .home-plus { transform: rotate(90deg); }
.home-index:hover .home-index-label { color: #fff; letter-spacing: 0.5em; }
.home-hint {
  position: absolute; left: 50%; bottom: 9.5rem; transform: translateX(-50%);
  display: flex; align-items: center; gap: 1rem; white-space: nowrap;
  font-size: 0.7rem; letter-spacing: 0.35em; text-transform: uppercase; color: var(--fg-3);
  transition: opacity 1.2s var(--ease);
  animation: hintIn 1.6s var(--ease) 1.8s both;
}
.home-hint i { width: 1.6rem; height: 1px; background: var(--fg-4); }
.page-home.is-explored .home-hint { opacity: 0; }
@keyframes hintIn { from { opacity: 0; transform: translate(-50%, 0.6rem); } }

/* =========================================================
   Work index
   ========================================================= */
.page-work { overflow: hidden; }
/* Reference numbers (michaelgatt.com/projects): titles 25.6px at .35em, 40% white,
   ~46px apart; the hovered title opens to .45em over .7s and nothing else changes.
   A long list scrolls (virtual scroll) and fades out in a short band just below
   the header and above the menu, so rows never sit on top of the name. */
.work-scroller {
  position: absolute; inset: 0; z-index: 2;
  --fade: linear-gradient(to bottom, transparent 0, transparent 105px, #000 160px, #000 calc(100% - 160px), transparent calc(100% - 105px));
  -webkit-mask-image: var(--fade); mask-image: var(--fade);
}
.work-list { position: relative; display: flex; flex-direction: column; align-items: center; will-change: transform; }
.work-row {
  opacity: 0; transform: translateY(1.2rem); filter: blur(4px);
  animation: rowIn 1.2s var(--ease) both; animation-delay: calc(var(--i) * 0.06s + 0.15s);
}
@keyframes rowIn { to { opacity: 1; transform: none; filter: none; } }
.work-item { display: flex; align-items: baseline; gap: 0.9rem; padding: 8px 0; line-height: 1.1; text-transform: uppercase; }
.wi-num { font-size: clamp(11px, 1.04vw, 16px); letter-spacing: 0.35em; color: #404040; }
.wi-title {
  font-size: clamp(18px, 1.875vw, 30px); letter-spacing: 0.35em; margin-right: -0.35em; color: rgba(255, 255, 255, 0.4);
  transition: letter-spacing 0.7s cubic-bezier(0.4, 0, 0.2, 1);
}
.wi-title.is-cjk { font-size: clamp(16px, 1.66vw, 27px); }
.work-row.is-active .wi-title { letter-spacing: 0.45em; margin-right: -0.45em; }

/* The hovered work's footage, centred, following the pointer up and down the list. */
.work-preview {
  position: absolute; left: 50%; top: 0; z-index: 1;
  width: 32vw; aspect-ratio: 16 / 9; pointer-events: none;
}
.wp-item { position: absolute; inset: 0; overflow: hidden; opacity: 0; transition: opacity 0.45s var(--ease); }
.wp-item.is-active { opacity: 0.9; }
.wp-media { width: 100%; height: 100%; object-fit: cover; }
.wp-item.is-portrait .wp-media { object-fit: contain; }

/* =========================================================
   Project detail
   ========================================================= */
.page-project { overflow: hidden; }
.pj-scroller {
  --tf: 0%;
  position: absolute; inset: 0;
  /* once scrolled, the top band stays clear so rows never run under the back link */
  -webkit-mask-image: linear-gradient(to bottom, transparent 0, transparent calc(var(--tf) * 0.6), #000 var(--tf), #000 68%, transparent 92%);
  mask-image: linear-gradient(to bottom, transparent 0, transparent calc(var(--tf) * 0.6), #000 var(--tf), #000 68%, transparent 92%);
}
body[data-page='project'] .site-header { opacity: 0; pointer-events: none; }
body[data-page='project'] .site-header .brand { pointer-events: none; }
.pj-content { padding: 2.6rem 2rem 30vh; will-change: transform; }
.pj-hero { display: flex; flex-direction: column; align-items: center; text-align: center; }
.pj-title {
  display: flex; flex-wrap: wrap; justify-content: center; column-gap: 0.55em;
  max-width: 64rem; font-size: 5.1rem; line-height: 1.12; letter-spacing: 0.24em; text-transform: uppercase;
  color: rgba(214, 220, 224, 0.92);
}
.pj-word { display: inline-flex; margin-right: -0.24em; }
.pj-title.is-long { max-width: 70rem; font-size: 3.6rem; letter-spacing: 0.22em; }
.pj-ch {
  display: inline-block; opacity: 0; transform: translateY(0.35em); filter: blur(10px);
  animation: chIn 1.4s var(--ease) forwards; animation-delay: calc(var(--d) + 0.2s);
}
@keyframes chIn { to { opacity: 1; transform: none; filter: none; } }
/* Chinese titles: lighter, wider, a touch smaller than the Latin caps. */
.pj-title.is-cjk { font-size: 4.6rem; font-weight: 300; letter-spacing: 0.62em; line-height: 1.3; }
.pj-title.is-cjk .pj-word { margin-right: -0.62em; }
.pj-en { margin-top: 1.2rem; font-size: 0.82rem; letter-spacing: 0.5em; margin-right: -0.5em; text-transform: uppercase; color: var(--fg-2); }
.pj-meta { margin-top: 1.1rem; font-size: 0.8rem; letter-spacing: 0.4em; margin-right: -0.4em; color: var(--fg-3); }
.pj-text { max-width: 40rem; margin-top: 1.5rem; }
.pj-lead, .pj-more-text {
  font-size: 0.98rem; line-height: 2.2; letter-spacing: 0.22em; color: var(--fg-2); user-select: text;
  text-wrap: balance;
}
.pj-more-wrap { display: grid; grid-template-rows: 0fr; transition: grid-template-rows 0.9s var(--ease); }
.pj-more-text { overflow: hidden; opacity: 0; transition: opacity 0.6s; }
.info-open .pj-more-wrap { grid-template-rows: 1fr; }
.info-open .pj-more-text { opacity: 1; transition-delay: 0.25s; }
.pj-hero > * { animation: fadeUp 1.2s var(--ease) both; }
.pj-hero > .pj-title { animation: none; }
.pj-hero > :nth-child(2) { animation-delay: 0.6s; }
.pj-hero > :nth-child(3) { animation-delay: 0.7s; }
.pj-hero > :nth-child(4) { animation-delay: 0.8s; }
.pj-hero > :nth-child(5) { animation-delay: 0.9s; }
@keyframes fadeUp { from { opacity: 0; transform: translateY(1rem); } to { opacity: 1; transform: none; } }

.pj-more { margin-top: 1.4rem; display: flex; flex-direction: column; align-items: center; gap: 0.7rem; padding: 0.5rem; }
.pj-plus { position: relative; width: 1.1rem; height: 1.1rem; transition: transform 0.7s var(--ease); }
.pj-plus::before, .pj-plus::after { content: ''; position: absolute; left: 50%; top: 50%; background: var(--fg); transform: translate(-50%, -50%); }
.pj-plus::before { width: 100%; height: 1px; }
.pj-plus::after { width: 1px; height: 100%; transition: transform 0.6s var(--ease); }
.info-open .pj-plus { transform: rotate(135deg); }
.pj-more-label { font-size: 0.78rem; letter-spacing: 0.4em; margin-right: -0.4em; text-transform: uppercase; color: var(--fg-2); transition: color 0.4s; }
.pj-more:hover .pj-more-label { color: #fff; }

.pj-video {
  position: relative; display: block; margin: 1.9rem auto 0; width: 28rem; max-width: 80vw; aspect-ratio: 16 / 9; overflow: hidden;
  animation: fadeUp 1.4s var(--ease) 1s both;
}
.pj-video-media { width: 100%; height: 100%; object-fit: cover; transition: transform 1.4s var(--ease), filter 0.8s; filter: brightness(0.8); }
.pj-video:hover .pj-video-media { transform: scale(1.05); filter: brightness(1); }
.pj-video-label {
  position: absolute; left: 50%; bottom: 0.9rem; transform: translateX(-50%); white-space: nowrap;
  font-size: 0.9rem; letter-spacing: 0.3em; text-transform: uppercase; color: #fff;
}
.pj-video-label::after {
  content: ''; position: absolute; left: 0; right: 0.3em; bottom: -0.3rem; height: 1px; background: #fff;
  transform: scaleX(0); transition: transform 0.6s var(--ease);
}
.pj-video:hover .pj-video-label::after { transform: scaleX(1); }
.pj-video.is-still { cursor: default; }
.pj-video.is-still .pj-video-media { filter: none; }
.pj-video.is-still:hover .pj-video-media { transform: none; }
/* 16:9 screen; portrait posters are contained over a blurred copy of themselves. */
.pj-screen { position: relative; display: block; width: 100%; height: 100%; overflow: hidden; background: #050505; }
.pj-screen-bg { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; transform: scale(1.25); filter: blur(22px) brightness(0.32) saturate(0.8); }
.pj-screen.is-portrait > :not(.pj-screen-bg), .pj-video.is-portrait > .pj-video-media { position: relative; object-fit: contain; }

/* Justified image rows: each item grows in proportion to its aspect ratio. */
.pj-gallery {
  display: flex; flex-wrap: wrap; gap: 0.9rem; width: min(84rem, 100%); margin: 3.6rem auto 0;
}
.pj-gallery::after { content: ''; flex-grow: 999; }
.pj-g-item {
  --a: 1.5;
  position: relative; flex: var(--a) 1 calc(var(--a) * 15rem); aspect-ratio: var(--a); overflow: hidden;
  animation: fadeUp 1.3s var(--ease) both; animation-delay: calc(var(--i) * 0.06s + 0.9s);
}
.pj-g-item img { width: 100%; height: 100%; object-fit: cover; filter: brightness(0.82); transition: filter 0.8s, transform 1.4s var(--ease); }
.pj-g-item:hover img { filter: brightness(1); transform: scale(1.035); }

/* Photo series: one print per row, stepping left and right, each with its number. */
.pj-series { width: min(84rem, 100%); margin: 5rem auto 0; display: flex; flex-direction: column; gap: 9rem; }
.pj-s-item { width: fit-content; margin: 0 auto; animation: fadeUp 1.3s var(--ease) both; animation-delay: calc(var(--i) * 0.06s + 0.9s); }
.pj-s-item:nth-child(odd) { margin-left: 12%; }
.pj-s-item:nth-child(even) { margin-right: 12%; }
.pj-s-img { display: block; overflow: hidden; }
.pj-s-img img { display: block; height: min(78vh, 46rem); width: auto; filter: brightness(0.88); transition: filter 0.8s, transform 1.6s var(--ease); }
.pj-s-item.is-wide .pj-s-img img { height: auto; width: min(58vw, 60rem); }
.pj-s-img:hover img { filter: brightness(1); transform: scale(1.02); }
.pj-s-cap { margin-top: 1rem; font-size: 0.7rem; letter-spacing: 0.4em; color: var(--fg-3); }
.pj-s-item:nth-child(even) .pj-s-cap { text-align: right; margin-right: -0.4em; }
@media (max-width: 700px) {
  .pj-series { gap: 4rem; margin-top: 3rem; }
  .pj-s-item:nth-child(n) { margin: 0 auto; }
  .pj-s-img img, .pj-s-item.is-wide .pj-s-img img { width: 88vw; height: auto; }
}

.pj-section-label {
  display: flex; justify-content: space-between; margin: 3.4rem auto 0; width: 100%;
  padding: 0 1rem 0.8rem; font-size: 0.72rem; letter-spacing: 0.38em; text-transform: uppercase; color: var(--fg-3);
}
/* The list arrives after the title has resolved, not before it. */
.pj-clips { margin-top: 3.4rem; border-top: 1px solid var(--fg-4); animation: fadeUp 1.3s var(--ease) 1.1s both; }
.pj-clip { border-bottom: 1px solid var(--fg-4); }
.pj-clip-btn {
  position: relative; display: grid; grid-template-columns: 7.5rem 1fr auto 1fr; align-items: center; column-gap: 1.5rem;
  width: 100%; padding: 0.85rem 1rem; text-align: left; text-transform: uppercase;
}
.pj-clip-btn::before {
  content: ''; position: absolute; inset: 0; background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.04), transparent);
  opacity: 0; transition: opacity 0.6s;
}
.pj-clip-btn:hover::before { opacity: 1; }
.pc-num { font-size: 0.72rem; letter-spacing: 0.3em; color: var(--fg-2); }
.pc-title { font-size: 0.98rem; letter-spacing: 0.2em; color: rgba(255, 255, 255, 0.7); transition: color 0.4s, transform 0.6s var(--ease); }
.pc-title.is-cjk { font-size: 1.02rem; letter-spacing: 0.32em; font-weight: 300; }
.pj-clip-btn:hover .pc-title { color: #fff; transform: translateX(0.5rem); }
.pj-clip-btn.is-static { cursor: default; }
.pj-clip-btn.is-static::before { display: none; }
.pj-clip-btn.is-static:hover .pc-title { color: rgba(255, 255, 255, 0.7); transform: none; }
.pc-play {
  width: 2.6rem; height: 2.6rem; border: 1px solid rgba(255, 255, 255, 0.85); border-radius: 50%;
  display: grid; place-items: center; transition: background 0.4s, transform 0.6s var(--ease);
}
.pc-play.pc-plus i { position: relative; width: 0.8rem; height: 0.8rem; border: 0; margin: 0; }
.pc-plus i::before, .pc-plus i::after { content: ''; position: absolute; left: 50%; top: 50%; background: #fff; transform: translate(-50%, -50%); transition: background 0.4s; }
.pc-plus i::before { width: 100%; height: 1px; }
.pc-plus i::after { width: 1px; height: 100%; }
.pj-clip-btn:hover .pc-plus i::before, .pj-clip-btn:hover .pc-plus i::after { background: #000; }
.pc-play i { width: 0; height: 0; border-left: 0.5rem solid #fff; border-top: 0.32rem solid transparent; border-bottom: 0.32rem solid transparent; margin-left: 0.15rem; transition: border-color 0.4s; }
.pj-clip-btn:hover .pc-play { background: #fff; transform: scale(1.08); }
.pj-clip-btn:hover .pc-play i { border-left-color: #000; }
.pc-dur { justify-self: end; font-size: 0.8rem; letter-spacing: 0.3em; color: var(--fg-2); }

.pj-next { display: flex; flex-direction: column; align-items: center; margin-top: 6rem; text-transform: uppercase; animation: fadeUp 1.4s var(--ease) 1.3s both; }
.pj-next-label { display: flex; flex-direction: column; align-items: center; font-size: 0.72rem; line-height: 1.6; letter-spacing: 0.4em; margin-right: -0.4em; color: var(--fg-2); }
.pj-next-title { margin-top: 2.2rem; font-size: 2.6rem; letter-spacing: 0.3em; margin-right: -0.3em; color: var(--fg-2); transition: color 0.5s, letter-spacing 0.9s var(--ease); }
.pj-next-title.is-cjk { font-size: 2.4rem; letter-spacing: 0.6em; margin-right: -0.6em; }
.pj-next:hover .pj-next-title { color: #fff; }
.pj-next-media { display: block; margin-top: 1.6rem; width: 28rem; max-width: 80vw; aspect-ratio: 16 / 9; overflow: hidden; }
.pj-next-img { width: 100%; height: 100%; object-fit: cover; filter: brightness(0.7); transition: filter 0.8s, transform 1.4s var(--ease); }
.pj-next:hover .pj-next-img { filter: brightness(1); transform: scale(1.04); }
/* A title card under the same title would only repeat it. */
.pj-next.is-card .pj-next-media { display: none; }

.pj-badge {
  position: absolute; top: 2.6rem; right: 2.6rem; z-index: 5; width: 7rem; height: 7rem;
  /* backwards, not both: once in, the scroll handler owns its opacity. */
  animation: fadeUp 1.2s var(--ease) 1.2s backwards; transition: opacity 0.3s;
}
.pj-badge svg { width: 100%; height: 100%; transform: rotate(var(--spin, 0deg)); animation: badgeSpin 24s linear infinite; }
.pj-badge text { font-family: var(--font); font-size: 7.6px; letter-spacing: 3.4px; fill: rgba(255, 255, 255, 0.72); }
.pj-badge i {
  position: absolute; left: 50%; top: 50%; width: 0.55rem; height: 0.55rem; border-radius: 50%; background: #fff;
  transform: translate(-50%, -50%); transition: transform 0.6s var(--ease);
}
.pj-badge:hover i { transform: translate(-50%, -50%) scale(2.2); }
@keyframes badgeSpin { to { rotate: 360deg; } }

/* =========================================================
   Lightbox & process
   ========================================================= */
.lightbox { position: fixed; inset: 0; z-index: 800; pointer-events: none; }
.lightbox.is-open { pointer-events: auto; }
.lb-backdrop { position: absolute; inset: 0; background: rgba(0, 0, 0, 0.94); opacity: 0; transition: opacity 0.6s var(--ease); backdrop-filter: blur(10px); }
.lightbox.is-open .lb-backdrop { opacity: 1; }
.lb-body {
  position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; pointer-events: none;
  opacity: 0; transform: scale(0.97); transition: opacity 0.6s var(--ease), transform 0.8s var(--ease);
}
.lb-body > * { pointer-events: auto; }
.lightbox.is-open .lb-body { opacity: 1; transform: none; transition-delay: 0.1s; }
.lb-figure { width: min(78vw, 140vh); }
.lb-video { width: 100%; aspect-ratio: 16 / 9; background: #000; border: 0; }
.lb-figure figcaption { margin-top: 1.1rem; text-align: center; font-size: 0.8rem; letter-spacing: 0.35em; text-transform: uppercase; color: var(--fg-2); }
.lb-empty { position: relative; aspect-ratio: 16 / 9; overflow: hidden; }
.lb-empty img { width: 100%; height: 100%; object-fit: cover; filter: brightness(0.35) blur(2px); transform: scale(1.04); }
.lb-empty p { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 1rem; text-align: center; }
.lb-empty-en { font-size: 1.6rem; letter-spacing: 0.35em; text-transform: uppercase; }
.lb-empty-zh { font-size: 0.85rem; letter-spacing: 0.2em; color: var(--fg-2); }
.lb-close {
  position: absolute; top: 2.4rem; right: 2.6rem; display: flex; align-items: center; gap: 0.8rem;
  font-size: 0.78rem; letter-spacing: 0.35em; text-transform: uppercase; color: var(--fg);
  opacity: 0; transition: opacity 0.6s 0.3s;
}
.lightbox.is-open .lb-close { opacity: 1; }
.lb-close i { position: relative; width: 1.4rem; height: 1.4rem; transition: transform 0.6s var(--ease); }
.lb-close i::before, .lb-close i::after { content: ''; position: absolute; left: 0; right: 0; top: 50%; height: 1px; background: currentColor; transform: rotate(45deg); }
.lb-close i::after { transform: rotate(-45deg); }
.lb-close:hover i { transform: rotate(90deg); }

/* Image viewer */
.lb-figure-image { position: relative; width: auto; display: flex; flex-direction: column; align-items: center; }
.lb-image { max-width: 84vw; max-height: 80vh; object-fit: contain; }
.lb-nav { position: fixed; top: 0; bottom: 0; width: 22vw; cursor: pointer; }
.lb-prev { left: 0; cursor: w-resize; }
.lb-next { right: 0; cursor: e-resize; }
.lb-nav i { position: absolute; top: 50%; width: 1.4rem; height: 1.4rem; border-top: 1px solid var(--fg-2); border-left: 1px solid var(--fg-2); opacity: 0; transition: opacity 0.4s; }
.lb-prev i { left: 2.6rem; transform: rotate(-45deg); }
.lb-next i { right: 2.6rem; transform: rotate(135deg); }
.lb-nav:hover i { opacity: 1; }

/* Behind-the-scenes side panel (like the reference's "go behind the sound") */
.lightbox.is-side .lb-backdrop { background: rgba(0, 0, 0, 0.72); backdrop-filter: none; }
.lightbox.is-side .lb-body { justify-content: flex-end; align-items: flex-start; padding: 1.2rem; transform: translateX(2rem); }
.lightbox.is-side.is-open .lb-body { transform: none; }
.behind {
  position: relative; width: 21rem; max-width: calc(100vw - 2.4rem); max-height: calc(100vh - 2.4rem); overflow: auto;
  padding: 4.2rem 1.1rem 1.1rem; background: #000; border: 1px solid var(--fg-4); text-align: center;
}
.behind .lb-close { position: absolute; top: 1.1rem; right: 1.1rem; opacity: 1; }
.behind .lb-close span { display: none; }
.bh-eyebrow { font-size: 0.66rem; letter-spacing: 0.4em; margin-right: -0.4em; text-transform: uppercase; color: var(--fg-3); }
.bh-title { margin-top: 0.9rem; font-size: 1.05rem; letter-spacing: 0.4em; margin-right: -0.4em; color: var(--fg); }
.bh-text { margin: 1.4rem 0.4rem 0; font-size: 0.86rem; line-height: 2; letter-spacing: 0.2em; color: var(--fg-2); user-select: text; }
.bh-img { margin-top: 1.8rem; }
.bh-img img { width: 100%; filter: grayscale(0.35) brightness(0.9); }

/* =========================================================
   Contact
   ========================================================= */
.page-contact { display: flex; align-items: center; justify-content: center; text-align: center; text-transform: uppercase; }
.ct-stack { display: flex; flex-direction: column; align-items: center; margin-top: -3rem; }
.ct-stack > * { opacity: 0; animation: fadeUp 1.3s var(--ease) forwards; animation-delay: calc(var(--i) * 0.09s + 0.2s); }
.ct-eyebrow { display: flex; flex-direction: column; gap: 0.6rem; font-size: 0.72rem; letter-spacing: 0.4em; color: var(--fg-2); }
.ct-headline { margin-top: 2.4rem; font-size: 1.62rem; letter-spacing: 0.3em; margin-right: -0.3em; color: var(--fg); }
.ct-headline-sub { margin-top: 0.4rem; font-size: 0.7rem; letter-spacing: 0.2em; color: var(--fg-2); }
.ct-phone { margin-top: 1.8rem; font-size: 2.3rem; letter-spacing: 0.3em; margin-right: -0.3em; color: var(--fg); transition: color 0.4s; }
.ct-phone-note { margin-top: 0.9rem; letter-spacing: 0.4em; }
.ct-email { margin-top: 0.6rem; font-size: 1.45rem; letter-spacing: 0.3em; margin-right: -0.3em; color: var(--fg-2); transition: color 0.4s; text-transform: uppercase; }
.ct-phone:hover, .ct-email:hover { color: #fff; }
.ct-pending { margin-top: 2.4rem; font-size: 0.9rem; letter-spacing: 0.5em; margin-right: -0.5em; color: var(--fg-3); }
.ct-wechat { margin-top: 0.8rem; font-size: 0.8rem; letter-spacing: 0.35em; color: var(--fg-3); text-transform: none; }
.ct-resume { margin-top: 3.4rem; display: flex; flex-direction: column; align-items: center; }
.ct-small { display: flex; flex-direction: column; font-size: 0.72rem; letter-spacing: 0.35em; color: var(--fg-3); line-height: 1.5; }
.ct-underline { position: relative; margin-top: 0.8rem; font-size: 1.12rem; letter-spacing: 0.35em; padding-bottom: 0.3rem; color: var(--fg); }
.ct-underline::after { content: ''; position: absolute; left: 0; right: 0.35em; bottom: 0; height: 1px; background: currentColor; transition: transform 0.6s var(--ease); transform-origin: left; }
.ct-underline:hover::after { transform: scaleX(0.3); }
.ct-underline.is-disabled { color: var(--fg-3); cursor: default; }
.ct-socials { display: flex; gap: 2rem; margin-top: 3rem; font-size: 0.78rem; letter-spacing: 0.3em; }
.ct-socials a { color: var(--fg-2); transition: color 0.4s; }
.ct-socials a:hover { color: #fff; }
.ct-credit { margin-top: 3rem; display: flex; flex-direction: column; align-items: center; font-size: 0.7rem; letter-spacing: 0.3em; color: var(--fg-2); }
.ct-credit-pre { display: flex; align-items: baseline; gap: 0 0.5em; }
.ct-credit .sup { display: inline-block; font-size: 0.45rem; transform: translateY(-0.5em); }
.ct-credit-by { margin-top: 0.4rem; font-size: 0.85rem; color: var(--fg); padding-bottom: 0.4rem; border-bottom: 1px solid var(--fg-3); }

/* =========================================================
   About — scroll story
   ========================================================= */
.page-about { overflow: hidden; }
.scene { position: absolute; inset: 0; visibility: hidden; pointer-events: none; }
.scene.is-on { visibility: visible; pointer-events: auto; }

/* hero */
.ab-hero-bg { position: absolute; inset: 0; transform-origin: 50% 60%; }
.ab-hero-bg img { width: 100%; height: 100%; object-fit: cover; filter: grayscale(1) brightness(0.62) contrast(1.1); animation: heroZoom 3s var(--ease) both; }
.ab-hero-bg::after { content: ''; position: absolute; inset: 0; background: radial-gradient(ellipse at center, rgba(0, 0, 0, 0.15), rgba(0, 0, 0, 0.7)); }
@keyframes heroZoom { from { transform: scale(1.12); opacity: 0; } }
.ab-hero-text { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; text-transform: uppercase; }
.ab-hero-line { display: flex; align-items: baseline; gap: 1.2rem; line-height: 1.5; }
.ab-hero-line span { opacity: 0; animation: fadeUp 1.4s var(--ease) both; }
.ab-hero-line:first-child span { animation-delay: calc(var(--i) * 0.14s + 0.5s); }
.ab-hero-line:nth-child(2) span { animation-delay: calc(var(--i) * 0.14s + 0.8s); }
.ab-hero-line span { animation-fill-mode: forwards; }
.ab-big { font-size: 2.55rem; letter-spacing: 0.32em; margin-right: -0.32em; color: #fff; }
.ab-small { font-size: 0.9rem; letter-spacing: 0.34em; color: var(--fg-2); }
.ab-hero-sub { margin-top: 1.4rem; font-size: 0.95rem; letter-spacing: 0.5em; color: var(--fg-2); opacity: 0; animation: fadeUp 1.4s var(--ease) 1.4s forwards; }
.ab-scroll-cue {
  position: absolute; left: 0; right: 0; bottom: 10rem; margin: 0 auto; width: max-content;
  display: flex; flex-direction: column; align-items: center; gap: 0.7rem;
  font-size: 0.66rem; letter-spacing: 0.4em; text-transform: uppercase; color: var(--fg-3);
  opacity: 0; animation: fadeUp 1.4s var(--ease) 2s forwards;
}
.ab-scroll-cue i { width: 1px; height: 2.6rem; background: linear-gradient(var(--fg-2), transparent); animation: cue 2.2s var(--ease-io) infinite; transform-origin: top; }
@keyframes cue { 0% { transform: scaleY(0); } 50% { transform: scaleY(1); transform-origin: top; } 51% { transform-origin: bottom; } 100% { transform: scaleY(0); transform-origin: bottom; } }

/* staircase */
.ab-stair { display: flex; flex-direction: column; align-items: center; justify-content: center; }
.st-box { display: flex; flex-direction: column; text-transform: uppercase; font-size: 1.05rem; letter-spacing: 0.24em; line-height: 1.04; margin-left: -12rem; }
.st-word { display: block; margin-left: calc(var(--i) * 2.6rem + (var(--i) * var(--i)) * 0.18rem); color: rgba(255, 255, 255, 0.9); white-space: nowrap; }
.st-word:first-child { color: #fff; }
.st-note { margin-top: 3rem; font-size: 0.9rem; letter-spacing: 0.35em; color: var(--fg-3); }
.st-ending .st-box { margin-left: -24rem; }
.st-ending .st-word { margin-left: calc(var(--i) * 3.4rem + (var(--i) * var(--i)) * 0.2rem); font-size: 0.95rem; letter-spacing: 0.3em; }

/* chapter label: "02  FILMOGRAPHY" */
.ab-label { display: flex; align-items: baseline; gap: 1.4rem; font-size: 0.72rem; letter-spacing: 0.45em; text-transform: uppercase; color: var(--fg-2); }
.ab-label span { color: var(--fg-3); letter-spacing: 0.2em; }

/* hero, second act: a title card set low and left, over a frame darkened toward it */
.ab-hero-bg.is-statement img { filter: grayscale(1) brightness(0.7) contrast(1.12); }
.ab-hero-bg.is-statement::after {
  background: linear-gradient(90deg, rgba(0, 0, 0, 0.78) 0%, rgba(0, 0, 0, 0.35) 45%, rgba(0, 0, 0, 0.1) 75%),
    linear-gradient(0deg, rgba(0, 0, 0, 0.7) 0%, transparent 55%);
}
.ab-statement { text-transform: none; align-items: flex-start; justify-content: flex-end; padding: 0 0 25vh 9vw; }
.ab-state-line { font-size: clamp(30px, 3.2vw, 56px); letter-spacing: 0.14em; line-height: 1.5; color: #fff; }
.ab-state-line + .ab-state-line { color: rgba(255, 255, 255, 0.74); }
.ab-state-line .lat { letter-spacing: 0.06em; margin: 0 0.24em 0 0.1em; }
.ab-state-rule { display: block; width: 3.4rem; height: 1px; margin: 2.6rem 0 1.9rem; background: rgba(255, 255, 255, 0.4); }
.ab-state-facts { display: flex; gap: 3.4rem; margin: 0; }
.ab-state-facts dt { margin-bottom: 0.75rem; font-size: 0.64rem; letter-spacing: 0.38em; text-transform: uppercase; color: var(--fg-3); }
.ab-state-facts dd { margin: 0; font-size: 0.88rem; letter-spacing: 0.16em; color: var(--fg-2); }

/* biography */
.ab-bio .ab-label { position: absolute; left: 8vw; top: 17vh; }
.bi-grid { position: absolute; left: 8vw; right: 11vw; top: 50%; margin-top: -19vh; display: grid; grid-template-columns: 23vw 1fr; gap: 6vw; align-items: start; }
.bi-stats { display: flex; flex-direction: column; gap: 3.2vh; padding-top: 0.4rem; border-left: 1px solid var(--fg-4); padding-left: 2vw; }
.bi-fig { display: flex; align-items: baseline; gap: 0.3rem; line-height: 1; color: #fff; }
.bi-n { font-size: clamp(40px, 4.4vw, 76px); letter-spacing: 0.04em; font-variant-numeric: tabular-nums; }
.bi-unit { font-size: clamp(14px, 1.2vw, 20px); color: var(--fg-2); }
.bi-text { margin-top: 0.7rem; font-size: 0.95rem; letter-spacing: 0.25em; color: var(--fg); }
.bi-note { margin-top: 0.35rem; font-size: 0.72rem; letter-spacing: 0.25em; color: var(--fg-3); }
.bi-text-col { display: flex; flex-direction: column; gap: 2.4vh; max-width: 40rem; }
.bi-para { font-size: clamp(14px, 1.14vw, 19px); line-height: 2.15; letter-spacing: 0.12em; color: rgba(255, 255, 255, 0.8); text-align: justify; }
.bi-para:first-child { font-size: clamp(16px, 1.36vw, 23px); line-height: 1.95; color: #fff; }

/* filmography */
.fm-head { position: absolute; left: 8vw; top: 17vh; display: flex; flex-direction: column; gap: 1.4rem; }
.fm-head-zh { font-size: clamp(22px, 2.1vw, 36px); letter-spacing: 0.5em; color: #fff; }
.fm-head-note { font-size: 0.72rem; letter-spacing: 0.4em; color: var(--fg-3); }
.fm-window {
  position: absolute; left: 34vw; right: 15vw; top: 0; bottom: 0;
  -webkit-mask-image: linear-gradient(transparent 12vh, #000 26vh, #000 78vh, transparent 90vh);
  mask-image: linear-gradient(transparent 12vh, #000 26vh, #000 78vh, transparent 90vh);
}
.fm-list { position: absolute; left: 0; right: 0; top: 0; will-change: transform; }
.fm-hl { display: flex; align-items: baseline; gap: 2.4rem; padding: 1.5rem 0; border-bottom: 1px solid var(--fg-4); }
.fm-hl:first-child { border-top: 1px solid var(--fg-4); }
.fm-hl-title { font-size: clamp(24px, 2.3vw, 40px); letter-spacing: 0.3em; color: #fff; white-space: nowrap; }
.fm-hl-note { font-size: 0.82rem; letter-spacing: 0.2em; color: var(--gold); }
.fm-group { margin-top: 8vh; }
.fm-group-name { display: flex; justify-content: space-between; padding-bottom: 1.1rem; margin-bottom: 1.8rem; border-bottom: 1px solid var(--fg-4); font-size: 0.72rem; letter-spacing: 0.45em; color: var(--fg-3); }
.fm-group-name span { letter-spacing: 0.2em; }
.fm-wall { display: flex; flex-wrap: wrap; gap: 1.5rem 2.9rem; }
.fm-group.is-feature .fm-group-name { color: var(--gold); }
.fm-group.is-feature .fm-t { font-size: clamp(20px, 1.8vw, 31px); color: rgba(255, 255, 255, 0.88); }
.fm-t .fm-role { margin-left: 0.7rem; font-size: 0.72rem; letter-spacing: 0.2em; color: var(--fg-3); vertical-align: 0.35em; }
.fm-t { font-size: clamp(16px, 1.35vw, 23px); letter-spacing: 0.28em; color: rgba(255, 255, 255, 0.62); white-space: nowrap; transition: color 0.5s, letter-spacing 0.7s var(--ease); }
.fm-wall:hover .fm-t:not(:hover) { color: rgba(255, 255, 255, 0.28); }
.fm-t:hover { color: #fff; }
.fm-t.has-image:hover { letter-spacing: 0.38em; }
.fm-preview {
  position: fixed; left: 0; top: 0; z-index: 3; width: 22vw; aspect-ratio: 3 / 2; overflow: hidden; pointer-events: none;
  opacity: 0; transition: opacity 0.45s; box-shadow: 0 2rem 5rem rgba(0, 0, 0, 0.7);
}
.fm-preview img { width: 100%; height: 100%; object-fit: cover; transform: scale(1.08); transition: transform 0.9s var(--ease); }
.fm-preview.is-on { opacity: 1; }
.fm-preview.is-on img { transform: none; }
/* clapperboard card: the stripes are the colours on his own slate, muted */
.fm-head, .fm-preview { --slate-stripes: repeating-linear-gradient(-58deg, #1a1a1a 0 0.9vw, #d9d9d4 0.9vw 1.8vw, #1a1a1a 1.8vw 2.7vw, #3b3d63 2.7vw 3.6vw, #1a1a1a 3.6vw 4.5vw, #3c5039 4.5vw 5.4vw, #1a1a1a 5.4vw 6.3vw, #7a3430 6.3vw 7.2vw, #1a1a1a 7.2vw 8.1vw, #8a7a45 8.1vw 9vw); }
.fm-stripe { display: block; width: 9vw; height: 4px; margin-top: 0.6rem; background: var(--slate-stripes); opacity: 0.75; }
.fm-slate { display: none; }
.fm-preview.is-slate { width: 24vw; aspect-ratio: auto; background: #0b0b0b; border: 1px solid rgba(255, 255, 255, 0.16); }
.fm-preview.is-slate img { display: none; }
.fm-preview.is-slate .fm-slate { display: block; }
.fm-slate-bar { display: block; height: 1.6vw; background: var(--slate-stripes); border-bottom: 1px solid rgba(255, 255, 255, 0.16); }
.fm-slate-row { display: grid; grid-template-columns: 6.2rem 1fr; align-items: center; gap: 1rem; padding: 1.15rem 1.4rem; border-bottom: 1px solid rgba(255, 255, 255, 0.16); }
.fm-slate-row:last-child { border-bottom: 0; }
.fm-slate-k { display: flex; flex-direction: column; gap: 0.3rem; font-size: 0.7rem; letter-spacing: 0.3em; color: var(--fg-2); }
.fm-slate-k em { font-style: normal; font-size: 0.56rem; letter-spacing: 0.2em; color: var(--fg-3); }
.fm-slate-v { font-size: 0.95rem; letter-spacing: 0.2em; color: #fff; }
.fm-slate-v.is-title { font-size: clamp(16px, 1.3vw, 22px); letter-spacing: 0.25em; }

/* on set: black-and-white archive strip, one frame at a time */
.os-head { position: absolute; left: 8vw; top: 17vh; z-index: 2; display: flex; flex-direction: column; gap: 1.4rem; }
.os-title { font-size: clamp(22px, 2.1vw, 36px); letter-spacing: 0.5em; color: #fff; }
.os-note { font-size: 0.72rem; letter-spacing: 0.3em; color: var(--fg-3); }
.os-window {
  position: absolute; inset: 0;
  -webkit-mask-image: linear-gradient(90deg, transparent 4vw, #000 22vw, #000 78vw, transparent 96vw);
  mask-image: linear-gradient(90deg, transparent 4vw, #000 22vw, #000 78vw, transparent 96vw);
}
.os-track { position: absolute; left: 0; top: 57%; display: flex; align-items: flex-start; gap: 2.6vw; will-change: transform; }
.os-frame { flex: none; cursor: pointer; }
.os-img { height: 42vh; aspect-ratio: 3 / 2; overflow: hidden; background: #070707; }
.os-media {
  display: block; width: 100%; height: 100%; object-fit: cover;
  filter: brightness(calc(0.28 + var(--c, 0) * 0.72));
  transform: scale(calc(1.04 - var(--c, 0) * 0.04));
  transition: filter 0.6s, transform 1.2s var(--ease);
}
.os-frame:hover .os-media { filter: brightness(1); transform: scale(1.03); }
.os-frame figcaption {
  display: flex; gap: 1.2rem; margin-top: 1.2rem; font-size: 0.78rem; letter-spacing: 0.28em; color: var(--fg);
  opacity: calc(0.15 + var(--c, 0) * 0.85); transition: opacity 0.6s;
}
.os-frame:hover figcaption { opacity: 1; }
.os-n { color: var(--fg-3); letter-spacing: 0.2em; font-variant-numeric: tabular-nums; }
.os-meter { position: absolute; right: 9vw; top: 17vh; display: flex; flex-direction: column; align-items: flex-end; gap: 0.9rem; }
.os-count { font-size: 0.78rem; letter-spacing: 0.3em; color: var(--fg-3); font-variant-numeric: tabular-nums; }
.os-count-n { color: #fff; }
.os-bar { width: 9vw; height: 1px; background: var(--fg-4); overflow: hidden; }
.os-bar-fill { display: block; height: 100%; background: rgba(255, 255, 255, 0.8); transform-origin: 0 50%; transform: scaleX(0); }

/* viewfinder: the director's framings inside frame lines */
.vf-head { position: absolute; left: 8vw; top: 17vh; z-index: 2; display: flex; flex-direction: column; gap: 1.4rem; }
.vf-title { font-size: clamp(22px, 2.1vw, 36px); letter-spacing: 0.5em; color: #fff; }
.vf-note { font-size: 0.72rem; letter-spacing: 0.3em; color: var(--fg-3); }
.vf-stage { position: absolute; left: 50%; top: 56%; width: 60vw; transform: translate(-50%, -50%); }
.vf-box { position: relative; aspect-ratio: 2.39 / 1; overflow: hidden; background: #060606; }
.vf-box::after { content: ''; position: absolute; inset: 0; box-shadow: inset 0 0 9vw rgba(0, 0, 0, 0.55); pointer-events: none; }
.vf-shot { position: absolute; inset: 0; opacity: 0; will-change: opacity, transform; }
.vf-shot img { width: 100%; height: 100%; object-fit: cover; transform: translate(var(--lx, 0), var(--ly, 0)) scale(1.04); filter: brightness(0.86) contrast(1.05); }
.vf-marks { position: absolute; inset: 6% 4%; z-index: 1; pointer-events: none; will-change: transform; }
.vf-corner { position: absolute; width: 2.2vw; height: 2.2vw; border: 1px solid rgba(255, 255, 255, 0.7); }
.vf-tl { left: 0; top: 0; border-right: 0; border-bottom: 0; }
.vf-tr { right: 0; top: 0; border-left: 0; border-bottom: 0; }
.vf-bl { left: 0; bottom: 0; border-right: 0; border-top: 0; }
.vf-br { right: 0; bottom: 0; border-left: 0; border-top: 0; }
.vf-cross { position: absolute; left: 50%; top: 50%; width: 1.4vw; height: 1.4vw; transform: translate(-50%, -50%); }
.vf-cross::before, .vf-cross::after { content: ''; position: absolute; background: rgba(255, 255, 255, 0.55); }
.vf-cross::before { left: 0; right: 0; top: 50%; height: 1px; }
.vf-cross::after { top: 0; bottom: 0; left: 50%; width: 1px; }
.vf-info { display: grid; grid-template-columns: auto 1fr auto; align-items: end; gap: 2.6vw; margin-top: 1.6rem; padding-top: 1.2rem; border-top: 1px solid var(--fg-4); }
.vf-mm { display: flex; align-items: baseline; gap: 0.3rem; line-height: 1; color: #fff; }
.vf-mm-n { min-width: 2ch; text-align: right; font-size: clamp(36px, 3.6vw, 64px); letter-spacing: 0.02em; font-variant-numeric: tabular-nums; }
.vf-mm-u { font-size: 0.9rem; letter-spacing: 0.1em; color: var(--fg-2); }
.vf-cam, .vf-date { font-size: 0.85rem; letter-spacing: 0.22em; color: var(--fg); font-variant-numeric: tabular-nums; }
.vf-fmt, .vf-count { margin-top: 0.5rem; font-size: 0.72rem; letter-spacing: 0.28em; color: var(--fg-3); }
.vf-side { text-align: right; }

/* full-bleed chapter */
.ab-prompt { background: #000; }
.pr-bg { position: absolute; inset: 0; }
.pr-bg img { width: 100%; height: 100%; object-fit: cover; filter: brightness(0.5) saturate(0.75); }
.pr-bg::after { content: ''; position: absolute; inset: 0; background: radial-gradient(ellipse at center, rgba(0, 0, 0, 0.2), rgba(0, 0, 0, 0.75)); }
.pr-stack { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; text-transform: uppercase; }
.pr-top { font-size: 4.6rem; letter-spacing: 0.26em; margin-right: -0.26em; color: #fff; }
.pr-top .pr-ch { display: inline-block; will-change: transform; }
.pr-mid { display: flex; gap: 0.1em; margin: 0.4rem 0 1rem; font-size: 1.2rem; letter-spacing: 1.1em; margin-right: -1.1em; color: #fff; }
.pr-mid .pr-mch { display: inline-block; }
.pr-bottom { font-size: 5rem; color: rgba(255, 255, 255, 0.92); white-space: nowrap; }
.pr-bottom .pr-bch { display: inline-block; }
.pr-sub { margin-top: 3.4rem; text-align: center; font-size: 0.78rem; line-height: 1.85; letter-spacing: 0.4em; color: rgba(255, 255, 255, 0.8); }
.pr-sub-zh { margin-top: 1rem; letter-spacing: 0.25em; text-transform: none; font-size: 0.88rem; }

/* AI practice */
.ai-left { position: absolute; left: 8vw; top: 17vh; width: 27vw; display: flex; flex-direction: column; }
.ai-head { margin-top: 1.6rem; font-size: clamp(22px, 2.1vw, 36px); letter-spacing: 0.4em; color: #fff; }
.ai-facts { margin: 5vh 0 0; }
.ai-fact { display: grid; grid-template-columns: 4.2rem 1fr; gap: 1rem; padding: 1.1rem 0; border-top: 1px solid var(--fg-4); }
.ai-fact dt { font-size: 0.75rem; letter-spacing: 0.3em; color: var(--fg-3); }
.ai-fact dd { margin: 0; font-size: 0.92rem; line-height: 1.8; letter-spacing: 0.14em; color: var(--fg); }
.ai-more { align-self: flex-start; margin-top: 4vh; padding-bottom: 0.4rem; font-size: 0.8rem; letter-spacing: 0.4em; color: var(--fg); border-bottom: 1px solid var(--fg-3); transition: color 0.4s, border-color 0.4s; }
.ai-more:hover { color: #fff; border-color: #fff; }
.ai-grid { position: absolute; left: 41vw; right: 9vw; top: 50%; margin-top: -22vh; display: grid; grid-template-columns: repeat(3, 1fr); gap: 5vh 1.8vw; will-change: transform; }
.ai-card { display: block; }
.ai-media { aspect-ratio: 16 / 9; overflow: hidden; background: #0b0b0b; }
.ai-video { width: 100%; height: 100%; object-fit: cover; filter: brightness(0.72) saturate(0.85); transform: scale(1.02); transition: filter 0.6s, transform 1.2s var(--ease); }
.ai-card:hover .ai-video { filter: none; transform: scale(1.06); }
.ai-title { margin-top: 0.9rem; font-size: 0.88rem; letter-spacing: 0.22em; color: var(--fg); transition: color 0.4s; }
.ai-type { margin-top: 0.3rem; font-size: 0.7rem; letter-spacing: 0.2em; color: var(--fg-3); }
.ai-card:hover .ai-title { color: #fff; }

/* ring */
.ab-ring { display: flex; align-items: center; justify-content: center; }
.rg-ring { position: absolute; left: 50%; top: 50%; width: 0; height: 0; perspective: 1400px; }
.rg-card {
  position: absolute; left: -13vw; top: -7.3vw; width: 26vw; height: 14.6vw; transform-origin: 50% 50%;
  border-radius: 1.2vw; overflow: hidden; will-change: transform; backface-visibility: hidden;
}
.rg-media { width: 100%; height: 100%; object-fit: cover; filter: brightness(0.7) saturate(0.85); }
.rg-center { position: relative; z-index: 2; display: flex; flex-direction: column; align-items: center; text-transform: uppercase; text-align: center; }
.rg-center::before { content: ''; position: absolute; inset: -40% -60%; z-index: -1; background: radial-gradient(closest-side, rgba(0, 0, 0, 0.8), transparent); }
.rg-pre { display: flex; flex-direction: column; gap: 0.5rem; font-size: 0.78rem; letter-spacing: 0.4em; color: var(--fg); margin-bottom: 3rem; }
.rg-big { font-size: 4.3rem; line-height: 1; color: rgba(236, 236, 236, 0.92); white-space: nowrap; }
.rg-mid { margin: 1.4rem 0; font-size: 0.7rem; letter-spacing: 0.4em; color: var(--fg-2); }

/* footer */
.ab-end { display: flex; flex-direction: column; align-items: center; justify-content: center; }

/* Photo field */
.fd-item { position: absolute; left: 50%; top: 50%; will-change: transform; }
.fd-media { width: 100%; height: auto; filter: brightness(0.8); }

/* Final lines */
.fe-stack { display: flex; flex-direction: column; align-items: center; gap: 0.5rem; text-transform: uppercase; margin-top: -4vh; }
.fe-stack { text-shadow: 0 0 2rem #000, 0 0 0.6rem #000; }
.fe-small { font-size: 0.66rem; letter-spacing: 0.4em; margin-right: -0.4em; color: var(--fg-2); }
.fe-mid { font-size: 1rem; letter-spacing: 0.4em; margin-right: -0.4em; color: var(--fg); }
.fe-link { margin: 0.5rem 0; font-size: 1.7rem; letter-spacing: 0.4em; margin-right: -0.4em; color: var(--fg); transition: color 0.4s; }
.fe-link:hover { color: #fff; }
.ab-end .abf-copy { position: absolute; bottom: 9rem; }
.cat-list { display: flex; flex-direction: column; align-items: center; gap: 2.2rem; margin-top: -6vh; }
.cat-link { position: relative; display: grid; place-items: center; text-transform: uppercase; }
.cat-label { position: relative; z-index: 2; font-size: 3.4rem; letter-spacing: 0.3em; margin-right: -0.3em; color: var(--fg-2); transition: color 0.5s, letter-spacing 0.9s var(--ease); }
.ct-preview { position: absolute; z-index: 1; width: 24rem; aspect-ratio: 16 / 10; overflow: hidden; opacity: 0; transform: scale(0.9) rotate(-2deg); transition: opacity 0.6s, transform 0.9s var(--ease); pointer-events: none; }
.ct-preview img { width: 100%; height: 100%; object-fit: cover; filter: brightness(0.6); }
.cat-link:hover .cat-label { color: #fff; letter-spacing: 0.36em; }
.cat-link:hover .ct-preview { opacity: 1; transform: none; }
.ab-footer { position: absolute; left: 0; right: 0; bottom: 9.5rem; display: flex; flex-direction: column; align-items: center; gap: 1.2rem; text-transform: uppercase; }
.abf-col { display: flex; flex-direction: column; align-items: center; gap: 0.4rem; }
.abf-label { font-size: 0.66rem; letter-spacing: 0.4em; color: var(--fg-3); }
.abf-links { display: flex; gap: 1.8rem; margin-top: 0.6rem; font-size: 0.78rem; letter-spacing: 0.3em; }
.abf-links a { color: var(--fg-2); transition: color 0.4s; }
.abf-links a:hover { color: #fff; }
.abf-copy { font-size: 0.62rem; letter-spacing: 0.35em; color: var(--fg-3); }

/* chapter indicator */
.chapters { position: absolute; right: 2.3rem; top: 50%; transform: translateY(-50%); display: flex; flex-direction: column; gap: 2.8rem; padding: 1.8rem 0; z-index: 20; }
.chapters::before { content: ''; position: absolute; right: 0.95rem; top: 0; bottom: 0; width: 1px; background: var(--fg-4); }
.ch-tick { position: relative; display: flex; align-items: center; justify-content: flex-end; width: 2rem; height: 1rem; }
.ch-tick i { position: relative; width: 0.55rem; height: 1px; background: var(--fg-2); margin-right: 0.7rem; transition: width 0.5s var(--ease); }
.ch-tick::after {
  content: ''; position: absolute; right: 0.1rem; top: 50%; width: 1.7rem; height: 3.6rem; border: 1px solid rgba(255, 255, 255, 0.75);
  transform: translateY(-50%) scaleY(0.4); opacity: 0; transition: opacity 0.5s, transform 0.7s var(--ease);
}
.ch-tick.is-active::after { opacity: 1; transform: translateY(-50%); }
.ch-name {
  position: absolute; right: 2.9rem; white-space: nowrap; font-size: 0.7rem; letter-spacing: 0.35em; text-transform: uppercase; color: var(--fg);
  opacity: 0; transform: translateX(0.6rem); transition: opacity 0.5s, transform 0.7s var(--ease); pointer-events: none;
}
.ch-tick.is-active .ch-name, .ch-tick:hover .ch-name { opacity: 1; transform: none; }
.ch-tick:hover .ch-name { color: #fff; }

/* =========================================================
   Page-specific chrome tweaks
   ========================================================= */
body[data-page='about'] .site-header .brand-role { color: rgba(255, 255, 255, 0.5); }

/* =========================================================
   Chinese typesetting, part two: Latin tracking in Chinese contexts
   (after the components so it wins over their own letter-spacing)
   ========================================================= */
.bi-para, .pj-lead, .pj-more-text, .bh-text, .ai-fact dd, .hf-lead, .pr-sub-zh, .ab-state-facts dd, .lb-empty-zh { letter-spacing: 0.03em; }
.bi-para { text-justify: inter-character; }
/* Latin and numerals inside Chinese titles take the Chinese rhythm, not the caps one */
.fm-t { letter-spacing: 0.12em; }
.fm-t .zh, .wi-title .zh { transition: letter-spacing 0.7s var(--ease); }
.fm-t.has-image:hover { letter-spacing: 0.12em; }
/* display scale: Chinese headings jump in size instead of spreading out */
.fm-head-zh, .os-title, .vf-title, .ai-head { font-size: clamp(30px, 2.9vw, 52px); line-height: 1.15; letter-spacing: 0.06em; }
.ab-state-line { font-size: clamp(36px, 4vw, 72px); line-height: 1.28; letter-spacing: 0.03em; }
.ab-state-line + .ab-state-line { color: rgba(255, 255, 255, 0.82); }
.ab-state-line .lat { letter-spacing: 0.02em; margin: 0 0.18em 0 0.08em; }
.bi-para:first-child { font-size: clamp(18px, 1.6vw, 28px); line-height: 1.7; letter-spacing: 0.02em; text-align: left; }
.fm-hl-title { letter-spacing: 0.04em; }
.pj-en { font-size: 1.05rem; }
.work-row.is-active .wi-title { --zh-ls: 0.3em; }
.fm-hl-title { letter-spacing: 0.16em; }
.fm-head-zh, .os-title, .vf-title, .ai-head { letter-spacing: 0.3em; }
.pc-title.is-cjk { letter-spacing: 0.08em; }
.ai-title, .fm-slate-v, .fm-slate-v.is-title { letter-spacing: 0.1em; }
/* mixed meta lines: bring the Latin in so both scripts share one rhythm */
.pj-meta, .bi-text, .bi-note, .ai-type, .os-frame figcaption, .ct-headline-sub, .ct-phone-note, .fm-hl-note, .fm-t .fm-role, .fm-head-note { letter-spacing: 0.18em; }

/* =========================================================
   About: two Chinese faces, cast by role
   - KingHwa OldSong (京華老宋体), cut from old letterpress type: the titles,
     names and headings, like the hand-set title cards of Chinese cinema;
   - Zhuque Fangsong (朱雀仿宋): prose, captions and labels, a quiet book face.
   Both come in one weight, so weight no longer carries the hierarchy:
   size, face and colour do. The hero's two lines are the two eras again:
   old type for the years on set, the fine fangsong for AI.
   ========================================================= */
.page-about { --zh-min: 13px; }
/* site-wide since the poster system: every Chinese run is fangsong unless it is a title */
.zh { font-family: var(--fang); font-weight: 400; font-synthesis: none; }
:is(.fm-hl-title, .fm-t, .bi-para:first-child, .bi-text, .fm-slate-v.is-title, .ai-title, .ab-big, .pj-en, .pj-title, .hf-title, .pj-next-title, .pc-title, .ct-headline, .wi-title, .lb-empty-en, .rg-big) .zh {
  font-family: 'KingHwa OldSong', 'Noto Serif SC', serif;
}
/* fangsong reads small and light: give prose a size and a little air */
.page-about .bi-para { --zh-ls: 0.01em; }
.page-about .bi-para:first-child { text-wrap: pretty; }
@media (min-width: 761px) {
  .page-about .bi-para:not(:first-child) { font-size: clamp(14px, 1.1vw, 19px); line-height: 1.95; color: rgba(255, 255, 255, 0.82); }
  .page-about .bi-para:first-child { font-size: clamp(19px, 1.6vw, 28px); line-height: 1.6; }
  .page-about .bi-text-col { max-width: 44rem; }
  .page-about .bi-grid { margin-top: -23vh; }
}
.page-about .ab-state-line:first-child { --zh-ls: 0.02em; font-size: clamp(40px, 4.5vw, 80px); }
.page-about .ab-state-line + .ab-state-line { --zh-ls: 0.08em; color: rgba(255, 255, 255, 0.86); }
.page-about :is(.fm-head-zh, .os-title, .vf-title, .ai-head) { --zh-ls: 0.04em; font-size: clamp(34px, 3.2vw, 58px); }
.page-about .fm-t { --zh-ls: 0.08em; }
.page-about .fm-t .zh { transition: color 0.5s; }
.page-about .fm-hl-title { --zh-ls: 0.03em; }
.page-about :is(.fm-group-name, .os-note, .vf-note, .fm-head-note, .bi-note, .fm-role, .fm-hl-note, .os-frame figcaption, .ab-state-facts dd, .ai-fact dd) { --zh-ls: 0.14em; }
.page-about :is(.os-frame figcaption, .ai-fact dd, .ab-state-facts dd) { font-size: max(0.95rem, 14px); }

/* =========================================================
   About: the poster system (direction A, chosen by the user)
   Chinese art-house posters set their titles vertically, in a heavy old Song,
   with a small vermilion seal, English in an italic serif, and the credits
   kept small and low. Every chapter of the About page opens that way.
   ========================================================= */
.tcy { text-combine-upright: all; letter-spacing: 0; }
.page-about :is(.vh-title, .ab-poster-line:first-of-type, .ab-hero-name p, .fm-hl-title, .vh-seal) .zh { font-family: var(--song); }

/* chapter heading: title, number and English name down one column, the note beside it */
.vh {
  position: absolute; left: 6.5vw; top: 14vh; z-index: 3;
  writing-mode: vertical-rl; display: flex; flex-direction: column; align-items: flex-start; gap: 1.1vw;
}
.vh-main { display: flex; align-items: center; gap: 2.4vh; }
.vh-title { font-family: var(--song); font-size: clamp(40px, min(5vw, 8.6vh), 92px); line-height: 1; letter-spacing: 0.06em; --zh-ls: 0.06em; color: #fff; white-space: nowrap; }
.vh-meta { display: flex; align-items: center; gap: 1.2em; font-size: 0.7rem; letter-spacing: 0.42em; text-transform: uppercase; color: var(--fg-3); white-space: nowrap; }
.vh-num { font-family: var(--ital); font-style: italic; font-weight: 300; font-size: 1.15rem; letter-spacing: 0.05em; text-transform: none; color: var(--fg-2); }
.vh-seal { display: block; flex: none; width: 1.55rem; height: 1.55rem; background: var(--seal); }
.vh-seal.is-name {
  display: grid; place-items: center; width: 2.4rem; height: 2.4rem;
  writing-mode: vertical-rl; font-style: normal; font-family: var(--song); font-size: 1.02rem; line-height: 1; --zh-ls: 0; color: #f1e6d6;
}
.vh-note { padding-top: 0.6em; font-size: 0.92rem; line-height: 1.8; --zh-ls: 0.22em; letter-spacing: 0.1em; color: var(--fg-3); white-space: nowrap; }

/* hero, first act: his name down the right edge like a signature */
.ab-hero-name {
  position: absolute; right: 13vw; top: 50%; transform: translateY(-50%);
  writing-mode: vertical-rl; display: flex; align-items: center; gap: 2.6vh;
  opacity: 0; animation: fadeUp 1.6s var(--ease) 1.2s forwards;
}
.ab-hero-name p { font-family: var(--song); font-size: clamp(40px, 4.2vw, 78px); line-height: 1; --zh-ls: 0.14em; color: rgba(255, 255, 255, 0.9); }

/* hero, second act: the poster */
.ab-hero-bg.is-statement::after {
  background: linear-gradient(270deg, rgba(0, 0, 0, 0.82) 0%, rgba(0, 0, 0, 0.36) 38%, transparent 62%),
    linear-gradient(0deg, rgba(0, 0, 0, 0.62) 0%, transparent 52%);
}
.ab-poster { display: block; text-transform: none; }
.ab-poster-title {
  position: absolute; right: 15vw; top: 15vh;
  writing-mode: vertical-rl; display: flex; flex-direction: column; align-items: flex-start; gap: 2.1vw;
}
.ab-poster-title .vh-seal { position: absolute; right: -2.7vw; top: -3.4vh; }
.ab-poster-line { white-space: nowrap; color: #fff; }
.ab-poster-line:first-of-type { font-family: var(--song); font-size: min(12.4vh, 7.4vw); line-height: 1; --zh-ls: 0.04em; }
.ab-poster-line + .ab-poster-line { margin-top: 33vh; font-size: min(4.4vh, 2.7vw); line-height: 1; --zh-ls: 0.3em; color: rgba(255, 255, 255, 0.84); }
.ab-poster-line .tcy { font-family: 'Tenor Sans', sans-serif; }
.ab-poster-credits { position: absolute; left: 7.5vw; bottom: 14vh; width: 30vw; }
.ab-poster-en { font-family: var(--ital); font-style: italic; font-weight: 300; font-size: clamp(24px, 2.15vw, 40px); line-height: 1.16; color: rgba(255, 255, 255, 0.92); }
.ab-poster-en span { display: block; }
.ab-poster-rule { display: block; width: 3rem; height: 1px; margin: 2.9vh 0 2.3vh; background: rgba(255, 255, 255, 0.5); }
.ab-poster-facts { display: grid; grid-template-columns: auto 1fr; align-items: baseline; gap: 1.1vh 1.7vw; margin: 0; }
.ab-poster-facts dt { font-size: 0.66rem; letter-spacing: 0.34em; text-transform: uppercase; color: var(--fg-3); }
.ab-poster-facts dd { margin: 0; font-size: 1.08rem; letter-spacing: 0.06em; --zh-ls: 0.14em; color: rgba(255, 255, 255, 0.86); }

/* biography: numerals in the italic serif's upright cut */
.bi-grid { left: 17vw; right: 9vw; grid-template-columns: 17vw 1fr; gap: 4vw; }
.bi-n { font-family: var(--ital); font-weight: 300; font-size: clamp(54px, 5.4vw, 98px); letter-spacing: 0; font-variant-numeric: lining-nums tabular-nums; }
.bi-unit { font-size: clamp(15px, 1.15vw, 20px); }

/* filmography: a strip of vertical columns travelling sideways */
.fm-window {
  left: 19vw; right: 8vw; top: 19vh; bottom: 13vh;
  -webkit-mask-image: linear-gradient(90deg, transparent 0, #000 3vw, #000 calc(100% - 7vw), transparent);
  mask-image: linear-gradient(90deg, transparent 0, #000 3vw, #000 calc(100% - 7vw), transparent);
}
.fm-list { left: 0; top: 0; height: 100%; width: max-content; display: flex; align-items: flex-start; gap: 4.6vw; padding-left: 3vw; }
.fm-col { writing-mode: vertical-rl; }
.fm-highlights { display: flex; gap: 3.4vw; }
.fm-hl, .fm-hl:first-child { display: flex; align-items: center; gap: 2.2vh; padding: 0; border: 0; }
.fm-hl-n, .fm-group-n, .vh-num { font-variant-numeric: lining-nums; }
.fm-hl-n { writing-mode: horizontal-tb; font-family: var(--ital); font-style: italic; font-weight: 300; font-size: 1.25rem; color: var(--fg-3); }
.fm-hl-title { font-family: var(--song); font-size: clamp(44px, 4.3vw, 80px); line-height: 1; --zh-ls: 0.06em; letter-spacing: 0.06em; color: #fff; white-space: nowrap; }
.fm-hl-note { margin-top: 1vh; font-size: 0.95rem; --zh-ls: 0.26em; letter-spacing: 0.1em; color: var(--gold); white-space: nowrap; }
.fm-group, .fm-group:first-child { display: flex; align-self: stretch; gap: 0.25vw; margin: 0; }
.fm-group-name {
  display: flex; align-items: center; justify-content: flex-start; gap: 1.6vh;
  margin: 0 1vw 0 0; padding: 0 0 0 1.3vw; border: 0; border-left: 1px solid var(--fg-4);
  font-size: 0.95rem; --zh-ls: 0.32em; letter-spacing: 0.1em; color: var(--fg-2); white-space: nowrap;
}
.fm-group.is-feature .fm-group-name { color: var(--gold); }
.fm-group-n { writing-mode: horizontal-tb; font-family: var(--ital); font-style: italic; font-weight: 300; font-size: 1.05rem; letter-spacing: 0.04em; color: var(--fg-3); }
.fm-t { font-family: var(--song); font-size: clamp(20px, 1.55vw, 28px); line-height: 1.5; letter-spacing: 0.1em; --zh-ls: 0.1em; padding: 0 0.12em; white-space: nowrap; }
.fm-group.is-feature .fm-t { font-size: clamp(26px, 2.15vw, 40px); }
.fm-t .fm-role { display: inline-block; margin: 0.9em 0 0; font-size: 0.78rem; --zh-ls: 0.22em; letter-spacing: 0.1em; vertical-align: baseline; color: var(--gold); }
.fm-group:hover .fm-t:not(:hover) { color: rgba(255, 255, 255, 0.28); }

/* the strips and the viewfinder leave room for the heading column */
.os-window {
  -webkit-mask-image: linear-gradient(90deg, transparent 15vw, #000 29vw, #000 80vw, transparent 96vw);
  mask-image: linear-gradient(90deg, transparent 15vw, #000 29vw, #000 80vw, transparent 96vw);
}
.vf-stage { left: 55%; width: 58vw; top: 51%; }
.ai-left { left: 17vw; top: 18vh; width: 22vw; }
.ai-grid { left: 44vw; right: 13vw; } /* clear of the chapter rail's label */
.ai-fact dd { text-wrap: pretty; white-space: pre-line; }

/* the poster system carried to the rest of the site */
.pj-en { display: inline-flex; align-items: center; gap: 0.55em; margin-top: 1.5rem; font-size: 1.75rem; --zh-ls: 0.12em; letter-spacing: 0.12em; color: rgba(255, 255, 255, 0.92); }
.pj-en .vh-seal { width: 0.8em; height: 0.8em; }
.pj-meta { margin-top: 1.2rem; font-size: 0.85rem; --zh-ls: 0.2em; }
.pj-lead { font-size: 1.12rem; --zh-ls: 0.03em; }
.pc-title.is-cjk { font-size: 1.12rem; }
.st-note { font-size: 1.15rem; --zh-ls: 0.08em; letter-spacing: 0.08em; color: var(--fg-2); }
.page-contact .ct-eyebrow { flex-direction: column; gap: 0.1rem; font-family: var(--ital); font-style: italic; font-weight: 300; font-size: 1.55rem; letter-spacing: 0.02em; text-transform: none; color: var(--fg-2); }
.page-contact .ct-headline { display: inline-flex; align-items: center; gap: 0; margin: 1.5rem 0 0; font-size: 3.7rem; line-height: 1; --zh-ls: 0.08em; letter-spacing: 0; }
.page-contact .ct-headline .vh-seal { width: 0.3em; height: 0.3em; margin-left: 0.45em; }
.ct-phone { margin-top: 2.6rem; }
.ct-phone-note { font-size: 0.95rem; --zh-ls: 0.16em; }

/* =========================================================
   Mobile
   ========================================================= */
@media (max-width: 760px) {
  html { font-size: 12px; }
  .site-header { padding-top: 2.2rem; }
  .brand-name { font-size: 1.3rem; }
  .back-link { top: 2rem; left: 1.4rem; }
  .back-sub { display: none; }
  .sentence-nav { bottom: 1.4rem; }
  .nav-link { font-size: 1.3rem; margin: 0 0.35rem; }
  .nav-word { font-size: 0.72rem; margin: 0 0.35rem; }
  .mute { right: 1.2rem; bottom: auto; top: 2.2rem; }
  .mute-viz { display: none; }
  .loader { right: 1.2rem; bottom: 1.2rem; }
  .intro-words { font-size: 12px; }
  .intro-skip { font-size: 10px; }
  .home-hint { bottom: 8rem; font-size: 0.6rem; gap: 0.6rem; }
  .home-hint i { width: 0.8rem; }

  .work-item { flex-direction: column; align-items: center; gap: 0.2rem; }
  .wi-title { font-size: 1.45rem; letter-spacing: 0.2em; margin-right: -0.2em; text-align: center; }
  .work-row.is-active .wi-title { letter-spacing: 0.22em; }
  .work-preview { width: 86vw; }

  .pj-content { padding: 11rem 1rem 30vh; }
  .pj-title { font-size: 2.6rem; letter-spacing: 0.16em; }
  .pj-title.is-long { font-size: 1.75rem; letter-spacing: 0.12em; line-height: 1.3; }
  .pj-word { margin-right: -0.16em; }
  .pj-summary { letter-spacing: 0.2em; }
  .pj-badge { top: 4.6rem; left: 50%; right: auto; margin-left: -2.7rem; width: 5.4rem; height: 5.4rem; }
  .pj-clip-btn { grid-template-columns: 3.2rem 1fr auto; gap: 0.8rem; }
  .pc-dur { display: none; }
  .pc-title { font-size: 1.1rem; }
  .pj-next-title { font-size: 1.8rem; }

  .ct-phone { font-size: 1.5rem; letter-spacing: 0.18em; }
  .ct-email { font-size: 1rem; letter-spacing: 0.15em; }
  .ct-socials { flex-wrap: wrap; justify-content: center; gap: 1rem 1.4rem; max-width: 90vw; }

  .ab-hero-line { flex-wrap: wrap; justify-content: center; gap: 0.6rem; }
  .ab-big { font-size: 1.8rem; letter-spacing: 0.2em; }
  .st-box { margin-left: -6rem; font-size: 0.95rem; }
  .st-word { margin-left: calc(var(--i) * 1.4rem); }
  .st-ending .st-box { margin-left: -9rem; }
  .st-note { max-width: 84vw; text-align: center; line-height: 2; letter-spacing: 0.15em; text-wrap: balance; }
  .st-ending .st-word { margin-left: calc(var(--i) * 1.6rem); }
  .ab-statement { padding: 0 7vw 24vh; }
  .ab-state-line { font-size: 1.9rem; letter-spacing: 0.1em; }
  .ab-state-rule { margin: 1.8rem 0 1.4rem; }
  .ab-state-facts { flex-direction: column; gap: 1.1rem; }
  .ab-state-facts dt { margin-bottom: 0.35rem; }
  .ab-hero-bg img[style] { object-position: 44% 50% !important; }
  .ab-statement { text-shadow: 0 0 1.4rem rgba(0, 0, 0, 0.9); }
  .ab-bio .ab-label, .fm-head, .os-head, .ai-left { left: 6vw; top: 12vh; }
  .bi-grid { left: 6vw; right: 6vw; top: 21vh; margin-top: 0; grid-template-columns: 1fr; gap: 3.5vh; }
  .bi-stats { flex-direction: row; justify-content: space-between; gap: 0; padding-left: 0; border-left: 0; }
  .bi-n { font-size: 2.6rem; }
  .bi-text { font-size: 0.8rem; letter-spacing: 0.1em; }
  .bi-note { display: none; }
  .bi-para { font-size: 13px; line-height: 1.95; letter-spacing: 0.06em; }
  .bi-para:first-child { font-size: 16px; line-height: 1.7; }
  .fm-head { flex-direction: row; align-items: baseline; }
  .fm-head-note { display: none; }
  .fm-window { left: 6vw; right: 6vw; -webkit-mask-image: linear-gradient(transparent 17vh, #000 24vh, #000 84vh, transparent 92vh); mask-image: linear-gradient(transparent 17vh, #000 24vh, #000 84vh, transparent 92vh); }
  .fm-hl { flex-direction: column; gap: 0.5rem; padding: 1.1rem 0; }
  .fm-hl-title { font-size: 1.6rem; letter-spacing: 0.2em; }
  .fm-group { margin-top: 5vh; }
  .fm-group-name { margin-bottom: 1.2rem; }
  .fm-wall { gap: 1rem 1.6rem; }
  .fm-group.is-feature .fm-t { font-size: 1.3rem; }
  .fm-t { font-size: 1.1rem; letter-spacing: 0.15em; }
  .fm-preview { display: none; }
  .os-img { height: auto; width: 78vw; }
  /* On a tall phone screen the set archive fills more of it: square frames, larger. */
  .ab-onset:not(.ab-crew) .os-img:not([style]) { width: 84vw; aspect-ratio: 1 / 1; }
  .os-note { letter-spacing: 0.15em; }
  .os-meter { right: 6vw; top: auto; bottom: 16vh; }
  .os-bar { width: 22vw; }
  .os-window { -webkit-mask-image: none; mask-image: none; }
  .vf-head { left: 6vw; top: 12vh; }
  .vf-note { letter-spacing: 0.15em; }
  .vf-stage { width: 88vw; top: 55%; }
  .vf-corner { width: 4vw; height: 4vw; }
  .vf-cross { width: 3vw; height: 3vw; }
  .vf-info { grid-template-columns: auto 1fr; gap: 1rem 4vw; }
  .vf-side { grid-column: 1 / -1; display: flex; justify-content: space-between; text-align: left; }
  .vf-side .vf-count { margin-top: 0; }
  .vf-mm-n { font-size: 2.6rem; }
  .vf-cam { letter-spacing: 0.1em; }
  .pr-top { font-size: 2.4rem; }
  .pr-bottom { font-size: 2.8rem; }
  .pr-sub { max-width: 84vw; letter-spacing: 0.2em; }
  .ai-left { width: auto; right: 6vw; }
  .ai-facts { margin-top: 2vh; }
  .ai-fact { padding: 0.7rem 0; }
  .ai-fact dd { font-size: 0.85rem; letter-spacing: 0.06em; }
  .ai-more { display: none; }
  .ai-grid { left: 6vw; right: 6vw; top: auto; bottom: 10vh; margin-top: 0; grid-template-columns: 1fr 1fr; gap: 2.4vh 3vw; }
  .ai-card:nth-child(n + 5) { display: none; }
  .ai-title { font-size: 0.8rem; letter-spacing: 0.1em; }
  .ai-type { display: none; }
  .rg-card { left: -17vw; top: -9.6vw; width: 34vw; height: 19.1vw; border-radius: 2vw; }
  .rg-big { font-size: 2.2rem; }
  .chapters { right: 0.6rem; gap: 1.6rem; }
  .ch-name { display: none; }
  .ch-tick.is-active .ch-name { display: none; }
  /* About poster system on a phone: headings turn horizontal, the poster keeps its vertical title */
  .vh { left: 6vw; top: 11vh; writing-mode: horizontal-tb; flex-direction: row; align-items: center; gap: 4vw; }
  .vh-main { gap: 3.4vw; }
  .vh-title { font-size: 2.5rem; }
  .vh-num { font-size: 1rem; }
  .vh-note { display: none; }
  .vh-seal { width: 1rem; height: 1rem; }
  .ab-hero-name { right: 6vw; }
  .ab-hero-name p { font-size: 2.6rem; }
  .ab-poster-title { right: 12vw; top: 15vh; gap: 4vw; }
  .ab-poster-title .vh-seal { right: -5vw; top: -4.5vh; }
  .ab-poster-line:first-of-type { font-size: 15vw; }
  .ab-poster-line + .ab-poster-line { margin-top: 24vh; font-size: 5vw; }
  .ab-poster-credits { left: 7vw; right: 7vw; bottom: 15vh; width: auto; }
  .ab-poster-en { font-size: 1.6rem; }
  .ab-poster-facts dd { font-size: 0.95rem; }
  .bi-grid { left: 6vw; right: 6vw; grid-template-columns: 1fr; gap: 3.5vh; }
  .bi-n { font-size: 3rem; }
  .fm-window { left: 0; right: 0; top: 20vh; bottom: 13vh; -webkit-mask-image: linear-gradient(90deg, transparent 0, #000 6vw, #000 90vw, transparent); mask-image: linear-gradient(90deg, transparent 0, #000 6vw, #000 90vw, transparent); }
  .fm-list { padding-left: 6vw; gap: 9vw; }
  .fm-hl, .fm-hl:first-child { flex-direction: row; padding: 0; }
  .fm-hl-title { font-size: 2.8rem; letter-spacing: 0.06em; }
  .fm-group, .fm-group:first-child { margin: 0; }
  .fm-group-name { margin-bottom: 0; }
  /* the vertical titles fill the phone's height instead of its top third */
  .fm-window { right: 9vw; bottom: 19vh; -webkit-mask-image: linear-gradient(90deg, transparent 0, #000 6vw, #000 80vw, transparent); mask-image: linear-gradient(90deg, transparent 0, #000 6vw, #000 80vw, transparent); }
  .fm-hl-title { font-size: 3.4rem; }
  .fm-hl-note { font-size: 0.9rem; }
  .fm-t { font-size: 1.5rem; letter-spacing: 0.1em; padding: 0 0.2em; }
  .fm-group.is-feature .fm-t { font-size: 1.8rem; }
  .fm-group-name { font-size: 0.85rem; }
  .fm-t .fm-role { font-size: 0.8rem; }
  .fm-tap-hint { position: absolute; left: 6vw; bottom: 14.5vh; font-size: 0.78rem; letter-spacing: 0.3em; color: var(--fg-3); }
  .ai-left { left: 6vw; top: 19vh; }
  .ai-grid { left: 6vw; }
  .vf-stage { left: 50%; width: 88vw; }
  .pj-en { font-size: 1.3rem; }
  .page-contact .ct-headline { font-size: 2.6rem; }
  .page-contact .ct-eyebrow { font-size: 1.25rem; }
}
/* Touch screens have no wheel zoom. */
@media (hover: none) {
  .home-hint span:nth-of-type(2), .home-hint i:nth-of-type(2) { display: none; }
}

@media (prefers-reduced-motion: reduce) {
  .grain, .iw-l, .pj-badge svg, .loader svg { animation: none !important; }
}