/* Generated by node tools/build-home-css.cjs. Do not edit this file.
 * Edit the source stylesheets, rebuild, and bump the homepage bundle URL.
 * Verify freshness with: node tools/build-home-css.cjs --check
 */

/* Source: assets/site.css */
:root {
  --ink: #f3f1ed;
  --muted: rgba(243, 241, 237, .62);
  --line: rgba(243, 241, 237, .25);
  --black: #0b0b0b;
  --accent: #a680ff;
  --pad: clamp(18px, 2.2vw, 40px);
  --ease: cubic-bezier(.76, 0, .24, 1);
}

* { box-sizing: border-box; }
html { min-height: 100%; overflow-x: clip; background: var(--black); color: var(--ink); -webkit-text-size-adjust: 100%; text-size-adjust: 100%; }
body { margin: 0; min-height: 100%; background: var(--black); color: var(--ink); font-family: Arial, Helvetica, sans-serif; }
a { color: inherit; }
button { font: inherit; touch-action: manipulation; }
a, button { -webkit-tap-highlight-color: transparent; }
a:focus-visible, button:focus-visible { outline: 2px solid currentColor; outline-offset: 4px; }
.skip-link { position: fixed; left: max(var(--pad), env(safe-area-inset-left)); top: -80px; z-index: 120; background: var(--ink); color: var(--black); padding: 12px 16px; text-decoration: none; }
.skip-link:focus { top: max(10px, env(safe-area-inset-top)); }

.site-header { position: fixed; z-index: 20; inset: 0 0 auto; display: flex; justify-content: space-between; align-items: flex-start; gap: 30px; padding: max(var(--pad), env(safe-area-inset-top)) max(var(--pad), env(safe-area-inset-right)) var(--pad) max(var(--pad), env(safe-area-inset-left)); pointer-events: none; mix-blend-mode: difference; }
.site-header a { pointer-events: auto; text-decoration: none; }
.wordmark { display: flex; min-height: 44px; flex-direction: column; justify-content: center; gap: 4px; text-transform: uppercase; letter-spacing: .02em; font-size: 13px; line-height: 1; }
.wordmark-role { color: var(--muted); font-size: 9px; letter-spacing: .12em; }
.primary-nav { display: flex; gap: clamp(14px, 2.2vw, 32px); font-size: 11px; text-transform: uppercase; letter-spacing: .08em; }
.primary-nav a { position: relative; display: inline-flex; min-height: 44px; align-items: center; padding: 0 2px; }
.primary-nav a::after { content: ""; position: absolute; left: 0; right: 100%; bottom: 0; height: 1px; background: currentColor; transition: right .35s ease; }
.primary-nav a:hover::after, .primary-nav a:focus-visible::after, .primary-nav a.is-active::after { right: 0; }

.home-page {
  --home-header-top: max(clamp(16px, 2.4vh, 38px), env(safe-area-inset-top));
  --home-header-bottom: clamp(38px, 5.5vh, 76px);
  --home-header-height: calc(var(--home-header-top) + 44px + var(--home-header-bottom));
  --home-header-shade: linear-gradient(180deg, rgba(5,5,7,.9) 0%, rgba(5,5,7,.62) 42%, rgba(5,5,7,.22) 72%, rgba(5,5,7,0) 100%);
  overflow: hidden;
  background: #111;
}
.home-page .home-interface { opacity: 1; visibility: visible; transition: opacity .35s ease, visibility 0s linear; }
.home-page.is-loading .home-interface { opacity: 0; visibility: hidden; pointer-events: none; }
.home-page .home-header { inset: 0 0 auto; width: 100%; transform: none; justify-content: center; padding: var(--home-header-top) 20px var(--home-header-bottom); color: #fff; background: var(--home-header-shade); mix-blend-mode: normal; }
.home-page .home-header .primary-nav { gap: clamp(24px, 3vw, 58px); font-size: clamp(14px, 1.05vw, 18px); letter-spacing: 0; text-transform: none; }
.home-page .home-header .primary-nav a { opacity: .58; padding: 0; text-shadow: 0 1px 10px rgba(0,0,0,.78); }
.home-page .home-header .primary-nav .home-project-jump { opacity: .82; }
.home-page .home-header .primary-nav a::after { display: none; }
.home-page .home-header .primary-nav a:hover, .home-page .home-header .primary-nav a:focus-visible, .home-page .home-header .primary-nav a.is-active { opacity: 1; }

.site-loader { position: fixed; z-index: 100; inset: 0; contain: strict; overflow: hidden; background: #111; color: #f4f4f2; transition: opacity .22s ease, visibility .22s ease; }
.site-loader.is-finished { opacity: 0; visibility: hidden; }
.loader-percent { position: absolute; z-index: 20; left: 50%; top: 50%; transform: translate(-50%, -50%); font-size: 12px; font-variant-numeric: tabular-nums; transition: opacity .15s ease; }
.site-loader.is-row .loader-percent { opacity: 0; }
.loader-gallery { position: absolute; inset: 0; }
.loader-tile { position: absolute; left: 50%; top: 50%; width: clamp(54px, 5.8vw, 100px); height: clamp(34px, 3.8vw, 64px); object-fit: cover; opacity: 0; transform: translate(-50%, -50%) translate(var(--loader-row-x), 42vh) scale(.72); transform-origin: center; transition: opacity .2s ease, transform .52s var(--ease), filter .28s ease; will-change: transform, opacity; }
.loader-tile:nth-child(1) { --loader-row-x: -20vw; --loader-mosaic: translate(-16vw, -18vh) scale(4.7); }
.loader-tile:nth-child(2) { --loader-row-x: -14vw; --loader-mosaic: translate(-36vw, 8vh) scale(3); }
.loader-tile:nth-child(3) { --loader-row-x: -8vw; --loader-mosaic: translate(23vw, -35vh) scale(3.5); }
.loader-tile:nth-child(4) { --loader-row-x: -2vw; --loader-mosaic: translate(-38vw, -32vh) scale(3.3); }
.loader-tile:nth-child(5) { --loader-row-x: 4vw; --loader-mosaic: translate(2vw, -40vh) scale(3); }
.loader-tile:nth-child(6) { --loader-row-x: 10vw; --loader-mosaic: translate(25vw, 8vh) scale(4); }
.loader-tile:nth-child(7) { --loader-row-x: 16vw; --loader-mosaic: translate(-22vw, -42vh) scale(3.2); }
.loader-tile:nth-child(8) { --loader-row-x: 22vw; --loader-mosaic: translate(-36vw, 27vh) scale(4); }
.site-loader.is-row .loader-tile { opacity: 1; transform: translate(-50%, -50%) translate(var(--loader-row-x), 42vh) scale(1); }
.site-loader.is-mosaic .loader-tile { transform: translate(-50%, -50%) var(--loader-mosaic); }
.site-loader.is-opening .loader-tile { opacity: 0; filter: brightness(.75); }
.site-loader.is-opening .loader-tile--lead { z-index: 5; opacity: 1; transform: translate(-50%, -50%) scale(24); filter: none; }

.home-stage { position: relative; width: 100%; height: 100svh; height: 100dvh; overflow: hidden; overscroll-behavior: none; background: #111; border-radius: 0 0 11px 11px; touch-action: pan-y pinch-zoom; }
.project-deck { position: absolute; inset: 0; contain: layout paint; background: #111; }
.deck-card { --rel: 0; position: absolute; z-index: 0; left: 50%; top: 50%; width: 100%; height: 100%; opacity: 0; overflow: hidden; transform: translate(-50%, -50%) scale(.92); transform-origin: center; pointer-events: none; transition: left .72s var(--ease), top .72s var(--ease), width .72s var(--ease), height .72s var(--ease), transform .72s var(--ease), opacity .32s ease, border-radius .72s var(--ease); }
.project-deck.is-transitioning .deck-card { will-change: transform, width, height, left, top; }
.deck-card.is-animating { will-change: transform; }
.deck-card.is-active { z-index: 2; opacity: 1; transform: translate(-50%, -50%) scale(1); pointer-events: auto; }
.deck-card:not(.is-active) { left: var(--thumb-left, 88%); top: var(--thumb-top, 90%); width: var(--thumb-width, 5vw); height: var(--thumb-height, 3vw); transform: none; }
.deck-card.is-slide-layer { z-index: 4; left: 50%; top: 50%; width: 100%; height: 100%; opacity: 1; transform: translate(-50%, -50%); pointer-events: none; transition: none; }
.deck-picture, .deck-media { position: absolute; inset: 0; width: 100%; height: 100%; }
.deck-picture { display: block; }
.deck-media { object-fit: cover; }
.deck-media--portrait { object-position: center 45%; }
.deck-media--feel { object-position: 52% 50%; }
.deck-media--xuantian { object-position: 52% 50%; }
.deck-project-link { position: absolute; z-index: 4; left: 50%; top: 50%; min-height: 44px; max-width: min(72vw, 720px); padding: 10px 14px; transform: translate(-50%, -50%); display: flex; align-items: center; justify-content: center; color: #fff; text-decoration: none; font-size: clamp(18px, 2vw, 34px); font-weight: 400; line-height: 1.05; letter-spacing: -.025em; white-space: nowrap; text-align: center; text-shadow: 0 1px 18px rgba(0,0,0,.35); transition: opacity .25s ease, transform .7s var(--ease); }
.deck-project-link--meta { flex-direction: column; gap: clamp(7px, .7vw, 11px); }
.deck-project-title { display: block; }
.deck-project-link--xuantian { isolation: isolate; text-shadow: 0 2px 4px rgba(0,0,0,.9), 0 1px 22px rgba(0,0,0,.92); }
.deck-project-link--xuantian::before { content: ""; position: absolute; z-index: -1; inset: -34px -64px; border-radius: 50%; background: radial-gradient(ellipse at center, rgba(4,5,9,.66) 0%, rgba(4,5,9,.43) 45%, rgba(4,5,9,0) 78%); filter: blur(9px); pointer-events: none; }
.deck-project-title--xuantian { display: flex; flex-direction: column; align-items: center; gap: 8px; font-size: clamp(44px, 4.4vw, 78px); }
.deck-project-title--xuantian b { font: inherit; font-size: 1em; letter-spacing: .08em; }
.deck-project-title--xuantian small { font-size: clamp(15px, .34em, 24px); line-height: 1; letter-spacing: .2em; }
.deck-project-date { font-size: clamp(10px, .72vw, 12px); line-height: 1; letter-spacing: .08em; }
.project-tool-line { display: inline-flex; align-items: center; justify-content: center; gap: 8px; font-size: clamp(9px, .72vw, 12px); font-weight: 400; line-height: 1; letter-spacing: .055em; text-transform: none; white-space: nowrap; }
.deck-project-link--xuantian .project-tool-line,
.deck-project-link--xuantian .deck-project-date { font-size: clamp(11px, .82vw, 14px); }
.project-tool { display: inline-flex; align-items: center; gap: 5px; }
.project-tool-logo { position: relative; display: inline-block; width: 12px; height: 12px; flex: 0 0 12px; }
.project-tool-logo--gemini { background: conic-gradient(from 35deg, #65a5ff, #9d7cff 31%, #f17bd4 58%, #6ed5ff 82%, #65a5ff); clip-path: polygon(50% 0, 61% 37%, 100% 50%, 61% 63%, 50% 100%, 39% 63%, 0 50%, 39% 37%); }
.project-tool-logo--veo { border-radius: 50%; background: conic-gradient(from 225deg, #4285f4 0 25%, #34a853 25% 50%, #fbbc05 50% 75%, #ea4335 75%); }
.project-tool-logo--veo::after { content: ""; position: absolute; left: 4px; top: 3px; width: 0; height: 0; border-top: 3px solid transparent; border-bottom: 3px solid transparent; border-left: 5px solid #0b0b0b; }
.project-tool-logo--dreamina { background: url("images/logos/dreamina-mark.svg") center / contain no-repeat; }
.project-tool-logo--xinpianchang { background: url("images/logos/xinpianchang-mark.svg") center / contain no-repeat; }
.project-deck.is-strip .deck-card { z-index: 2; left: 50%; top: 50%; width: clamp(188px, calc(18vw + 88px), 440px); height: min(68svh, clamp(280px, calc(24vw + 210px), 650px)); opacity: var(--strip-opacity, 1); transform: translate3d(calc(-50% + var(--strip-x)), -50%, 0); border-radius: 0; pointer-events: auto; cursor: grab; }
.project-deck.is-strip.is-browsing .deck-card { transition: opacity .16s linear; }
.project-deck.is-strip.is-dragging .deck-card { cursor: grabbing; }
.project-deck.is-strip .deck-card::after { content: "+"; position: absolute; z-index: 5; left: 50%; top: 50%; transform: translate(-50%, -50%) scale(.72); color: #fff; font-size: clamp(28px, 3vw, 48px); font-weight: 200; line-height: 1; opacity: 0; mix-blend-mode: difference; transition: opacity .24s ease, transform .42s var(--ease); pointer-events: none; }
.project-deck.is-strip .deck-card.is-strip-selected::after,
.project-deck.is-strip .deck-card:hover::after,
.project-deck.is-strip .deck-card:focus-visible::after { opacity: 1; transform: translate(-50%, -50%) scale(1); }
.project-deck.is-strip .deck-project-link { opacity: 0; transform: translate(-50%, -50%) scale(.9); }
.project-deck.is-strip .deck-media { filter: saturate(.82) contrast(1.02); }

.stage-step { position: absolute; z-index: 8; top: 50%; transform: translateY(-50%); display: flex; align-items: center; justify-content: center; width: 12vw; min-width: 72px; height: 140px; padding: 0; border: 0; background: transparent; color: #fff; cursor: pointer; mix-blend-mode: difference; transition: opacity .25s ease; }
.stage-step--prev { left: 11vw; }
.stage-step--next { right: 11vw; }
.stage-step span { display: block; font-size: clamp(28px, 3vw, 48px); font-weight: 200; line-height: 1; transition: transform .35s ease; }
.stage-step:hover span, .stage-step:focus-visible span { transform: rotate(90deg); }
.home-pagination { position: absolute; z-index: 8; left: 50%; bottom: max(clamp(14px, 3.2vh, 54px), calc(env(safe-area-inset-bottom) + 10px)); transform: translateX(-50%); display: flex; min-width: 64px; min-height: 44px; gap: 10px; align-items: center; justify-content: center; padding: 0 10px; border: 0; background: transparent; font-size: clamp(12px, .92vw, 16px); color: #fff; font-variant-numeric: tabular-nums; cursor: pointer; mix-blend-mode: difference; transition: opacity .25s ease; }
.thumbnail-dock { position: absolute; z-index: 9; right: max(clamp(18px, 3.3vw, 64px), env(safe-area-inset-right)); bottom: max(clamp(14px, 3.2vh, 54px), calc(env(safe-area-inset-bottom) + 10px)); display: flex; gap: 5px; align-items: center; transition: opacity .25s ease, transform .55s var(--ease); }
.thumbnail-dock button { position: relative; width: clamp(68px, 5.2vw, 100px); height: clamp(44px, 3.2vw, 58px); flex: 0 0 auto; padding: 0; border: 0; background: #171717; overflow: hidden; opacity: .64; cursor: pointer; transition: opacity .25s ease, transform .4s var(--ease); }
.thumbnail-dock button::after { content: ""; position: absolute; inset: 0; border: 1px solid rgba(255,255,255,0); transition: border-color .25s ease; }
.thumbnail-dock button:hover, .thumbnail-dock button:focus-visible, .thumbnail-dock button.is-active { opacity: 1; transform: translateY(-2px); }
.thumbnail-dock button.is-active::after { border-color: rgba(255,255,255,.75); }
.thumbnail-dock img { width: 100%; height: 100%; object-fit: cover; }
.project-deck.is-strip ~ .home-pagination { opacity: 1; }
.project-deck.is-strip ~ .thumbnail-dock { opacity: 0; transform: translateY(18px); pointer-events: none; }
.project-deck.is-strip ~ .stage-step { opacity: 0; pointer-events: none; }

@media (max-width: 1024px) {
  .deck-project-link { font-size: clamp(18px, 3.2vw, 28px); white-space: normal; width: min(64vw, 520px); }
  .thumbnail-dock { left: max(14px, env(safe-area-inset-left)); right: max(14px, env(safe-area-inset-right)); overflow-x: auto; overscroll-behavior-inline: contain; justify-content: flex-start; scroll-padding-inline: 2px; scrollbar-width: none; }
  .thumbnail-dock::-webkit-scrollbar { display: none; }
  .home-pagination { bottom: max(68px, calc(env(safe-area-inset-bottom) + 62px)); }
}

@media (max-width: 560px) {
  .home-page { --home-header-top: max(10px, env(safe-area-inset-top)); --home-header-bottom: 30px; }
  .home-page .home-header .primary-nav { gap: clamp(14px, 5vw, 24px); font-size: clamp(12px, 3.6vw, 14px); }
  .home-page .home-header .primary-nav a { padding-inline: 6px; }
  .deck-project-link { width: 64vw; font-size: clamp(18px, 5vw, 23px); }
  .deck-project-link--xuantian { width: 82vw; }
  .deck-project-link--xuantian .project-tool-line { flex-wrap: wrap; max-width: 82vw; line-height: 1.35; }
  .stage-step { width: 48px; min-width: 48px; height: 72px; }
  .stage-step--prev { left: max(6px, env(safe-area-inset-left)); }
  .stage-step--next { right: max(6px, env(safe-area-inset-right)); }
  .stage-step span { font-size: 32px; }
  .thumbnail-dock button { width: 68px; height: 44px; }
  .loader-tile:nth-child(n + 6) { display: none; }
}

@media (prefers-reduced-motion: reduce) {
  .site-loader { display: none; }
  .home-page.is-loading .home-interface { opacity: 1; visibility: visible; pointer-events: auto; }
  .deck-card, .loader-tile { transition: none !important; }
}

/* Interior pages */
.content-page { overflow-x: clip; }
.content-page .site-header { mix-blend-mode: normal; background: linear-gradient(180deg, rgba(11,11,11,.82), transparent); }
.eyebrow, .project-number { margin: 0; font-size: 10px; line-height: 1.3; letter-spacing: .14em; text-transform: uppercase; color: var(--muted); }
.page-intro { min-height: 92svh; display: grid; grid-template-columns: minmax(0, 1.5fr) minmax(280px, .65fr); align-items: end; gap: 8vw; padding: clamp(150px, 20vh, 220px) var(--pad) clamp(70px, 10vh, 120px); border-bottom: 1px solid var(--line); }
.page-intro h1, .about-title h1, .film-hero h1 { margin: 20px 0 0; font-size: clamp(70px, 11.4vw, 178px); font-weight: 400; line-height: .78; letter-spacing: -.085em; }
.intro-copy { max-width: 44ch; margin: 0 0 4px; font-size: clamp(17px, 1.5vw, 24px); line-height: 1.35; letter-spacing: -.02em; }

.project-feature { min-height: 100svh; display: grid; grid-template-columns: minmax(0, 1.55fr) minmax(320px, .7fr); gap: clamp(30px, 6vw, 100px); align-items: center; padding: clamp(76px, 10vw, 150px) var(--pad); border-bottom: 1px solid var(--line); }
.project-feature--reverse { grid-template-columns: minmax(320px, .7fr) minmax(0, 1.55fr); }
.project-feature--reverse .project-feature__media { order: 2; }
.project-feature__media { position: relative; min-height: min(70vh, 840px); background: #151515; overflow: hidden; }
.project-feature__media img, .project-feature__media video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; transition: transform 1.1s var(--ease); }
.project-feature__media--portrait img { object-position: center 64%; }
.project-feature__media--feel img { object-position: 50% 50%; }
.project-feature:hover .project-feature__media img, .project-feature:hover .project-feature__media video { transform: scale(1.025); }
.project-feature__info { align-self: end; padding-bottom: 2vw; }
.project-feature__info h2, .section-heading h2, .awards-section h2, .film-archive h2 { margin: 20px 0 24px; font-size: clamp(44px, 6vw, 92px); line-height: .88; letter-spacing: -.065em; font-weight: 400; }
.project-feature__info > p:not(.project-number), .section-heading > p, .section-heading--film > p { max-width: 48ch; font-size: 16px; line-height: 1.55; color: var(--muted); }
.project-feature--with-stills .project-feature__info h2 { margin-bottom: 12px; }
.project-tool-line--detail { justify-content: flex-start; color: var(--ink); font-size: 11px; }
.project-date { display: block; margin: 0 0 28px; color: var(--muted); font-size: 11px; line-height: 1; letter-spacing: .1em; }
.project-stills { grid-column: 1 / -1; order: 3; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; margin-top: clamp(48px, 7vw, 100px); }
.project-still { margin: 0; aspect-ratio: 16 / 9; min-height: 0; overflow: hidden; background: #151515; }
.project-still--portrait { grid-row: span 2; aspect-ratio: 3 / 4; }
.project-still--wide { grid-column: 1 / -1; }
.project-still img { display: block; width: 100%; height: 100%; object-fit: cover; transition: transform 1s var(--ease); }
.project-still:hover img { transform: scale(1.025); }
.meta-list { margin: 46px 0 0; }
.meta-list div { display: grid; grid-template-columns: 90px 1fr; gap: 18px; padding: 13px 0; border-top: 1px solid var(--line); font-size: 11px; }
.meta-list dt { color: var(--muted); text-transform: uppercase; letter-spacing: .1em; }
.meta-list dd { margin: 0; }
.text-links { display: flex; flex-wrap: wrap; gap: 12px 24px; margin-top: 36px; }
.text-links a { display: inline-flex; min-height: 44px; align-items: center; font-size: 13px; line-height: 1.3; text-transform: uppercase; letter-spacing: .08em; text-decoration: none; border-bottom: 1px solid var(--line); padding: 8px 0 5px; }
.text-links a:hover, .text-links a:focus-visible { border-color: var(--ink); }

/* Video readiness */
.video-loading-ui {
  --video-load-progress: 0;
  position: absolute;
  z-index: 12;
  inset: 0;
  display: grid;
  place-items: center;
  padding: clamp(18px, 3vw, 48px);
  background: #626262;
  color: #f3f1ed;
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
  transition: opacity .38s ease, visibility .38s ease;
}
.video-loading-ui[hidden] { display: none; }
.video-loading-ui.is-ready { opacity: 0; visibility: hidden; pointer-events: none; }
.video-loading-ui.is-error { background: #4f4f4f; }
.video-loading-status { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0; }
.video-loading-meter { width: min(76%, 620px); }
.video-loading-meta { display: flex; align-items: baseline; justify-content: space-between; gap: 20px; margin-bottom: 12px; font-size: clamp(12px, .85vw, 14px); line-height: 1; letter-spacing: .1em; }
.video-loading-meta output { min-width: 4ch; font-variant-numeric: tabular-nums; text-align: right; letter-spacing: 0; }
.video-loading-track { width: 100%; height: 2px; overflow: hidden; background: rgba(243, 241, 237, .28); }
.video-loading-track i { display: block; width: 100%; height: 100%; background: #f3f1ed; transform: scaleX(var(--video-load-progress)); transform-origin: left center; transition: transform .18s linear; }
.video-loading-retry { min-width: 92px; min-height: 44px; border: 1px solid rgba(243, 241, 237, .72); background: transparent; color: inherit; padding: 10px 16px; cursor: pointer; font-size: 12px; line-height: 1; letter-spacing: .1em; text-transform: uppercase; }
.video-loading-retry:hover, .video-loading-retry:focus-visible { background: #f3f1ed; color: #303030; }
.video-loading-ui.is-error { align-content: center; gap: 18px; }
.video-loading-ui.is-error .video-loading-meter { width: auto; }
.video-loading-ui.is-error .video-loading-meta { justify-content: center; margin: 0; }
.video-loading-ui.is-error .video-loading-meta output,
.video-loading-ui.is-error .video-loading-track { display: none; }

@media (max-width: 560px) {
  .video-loading-meter { width: min(88%, 420px); }
  .video-loading-meta { margin-bottom: 9px; }
}

.image-study { padding: clamp(100px, 12vw, 180px) var(--pad); border-bottom: 1px solid var(--line); }
.section-heading { display: grid; grid-template-columns: minmax(0, 1.3fr) minmax(280px, .7fr); align-items: end; gap: 8vw; margin-bottom: clamp(48px, 7vw, 110px); }
.section-heading .project-number { grid-column: 1 / -1; }
.section-heading h2 { margin-bottom: 0; }
.section-heading > p { margin: 0 0 5px; }
.section-heading--project h2 { margin: 20px 0 16px; }
.section-heading--project .project-date { margin-bottom: 0; }
.project-summary { min-width: 0; }
.project-summary > p { margin: 0; max-width: 48ch; color: var(--muted); font-size: 16px; line-height: 1.7; }
.visual-grid { display: grid; grid-template-columns: repeat(12, 1fr); grid-auto-rows: min(26vw, 390px); gap: 10px; }
.visual-tile { grid-column: span 4; margin: 0; min-height: 0; overflow: hidden; background: #151515; }
.visual-tile--wide { grid-column: span 8; }
.visual-tile--tall { grid-column: span 4; grid-row: span 2; }
.visual-tile img { width: 100%; height: 100%; object-fit: cover; transition: transform 1s var(--ease), filter .5s ease; }
.visual-tile:hover img { transform: scale(1.035); }
.capabilities { padding: clamp(100px, 13vw, 190px) var(--pad); }
.capability-list { display: flex; flex-direction: column; margin-top: 40px; }
.capability-list span { padding: 13px 0 10px; border-top: 1px solid var(--line); font-size: clamp(34px, 5vw, 78px); line-height: .95; letter-spacing: -.055em; }

.site-footer { min-height: 160px; display: flex; justify-content: space-between; align-items: flex-end; gap: 30px; padding: var(--pad); border-top: 1px solid var(--line); font-size: 10px; text-transform: uppercase; letter-spacing: .1em; }
.site-footer a { display: inline-flex; min-height: 44px; align-items: center; text-decoration: none; font-size: clamp(24px, 3vw, 46px); text-transform: none; letter-spacing: -.04em; }

/* About */
.about-hero { min-height: 100svh; display: grid; grid-template-columns: minmax(300px, .72fr) minmax(0, 1.28fr); gap: 7vw; align-items: end; padding: clamp(130px, 15vh, 180px) var(--pad) var(--pad); }
.about-portrait { height: min(72vh, 850px); overflow: hidden; background: #151515; }
.about-portrait img { width: 100%; height: 100%; object-fit: cover; object-position: center 20%; filter: saturate(.75); }
.about-title { padding-bottom: 2.5vw; }
.about-title h1 { font-size: clamp(86px, 13vw, 196px); }
.about-deck { margin: 40px 0 0; max-width: 38ch; font-size: clamp(17px, 1.6vw, 25px); line-height: 1.35; color: var(--muted); }
.identity-section { padding: clamp(100px, 12vw, 180px) var(--pad); border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); }
.identity-list { margin-top: 42px; }
.identity-list > div, .award-list > div { display: grid; grid-template-columns: 50px minmax(0, 1fr) auto; gap: 20px; align-items: baseline; padding: 18px 0 15px; border-top: 1px solid var(--line); }
.identity-list span, .award-list span { font-size: 10px; color: var(--muted); }
.identity-list p, .award-list p { margin: 0; font-size: clamp(24px, 3.4vw, 54px); letter-spacing: -.045em; }
.identity-list strong, .award-list strong { font-size: 11px; font-weight: 400; text-transform: uppercase; letter-spacing: .11em; color: var(--muted); text-align: right; }
.about-columns { display: grid; grid-template-columns: 1.2fr .8fr; gap: 10vw; padding: clamp(100px, 12vw, 180px) var(--pad); border-bottom: 1px solid var(--line); }
.about-columns > div > p:last-child { max-width: 44ch; font-size: 16px; line-height: 1.55; color: var(--muted); }
.about-columns .large-copy { margin-top: 36px; font-size: clamp(28px, 4vw, 62px); line-height: 1.06; letter-spacing: -.05em; color: var(--ink); }
.contact-section { min-height: 78svh; display: flex; flex-direction: column; justify-content: flex-end; padding: clamp(100px, 12vw, 180px) var(--pad) var(--pad); }
.contact-email { display: block; margin: 30px 0 60px; font-size: clamp(39px, 7vw, 110px); line-height: .9; letter-spacing: -.07em; text-decoration: none; overflow-wrap: anywhere; }
.contact-links { display: flex; flex-wrap: wrap; gap: 14px 32px; padding-top: 18px; border-top: 1px solid var(--line); }
.contact-links a { display: inline-flex; min-height: 44px; align-items: center; font-size: 12px; text-transform: uppercase; letter-spacing: .1em; text-decoration: none; }

/* Film */
.film-hero { position: relative; height: 100svh; height: 100dvh; overflow: hidden; }
.film-hero__media { position: absolute; inset: 0; display: block; }
.film-hero__media img { width: 100%; height: 100%; object-fit: cover; filter: grayscale(1) contrast(1.12); }
.film-hero__shade { position: absolute; inset: 0; background: linear-gradient(90deg, rgba(0,0,0,.74), rgba(0,0,0,.12) 60%), linear-gradient(0deg, rgba(0,0,0,.65), transparent 55%); }
.film-hero__copy { position: absolute; left: var(--pad); bottom: clamp(80px, 10vh, 120px); }
.film-hero__copy h1 { font-size: clamp(68px, 10.5vw, 164px); }
.film-hero__copy > p:last-child { margin: 32px 0 0; max-width: 46ch; font-size: 16px; line-height: 1.5; color: var(--muted); }
.scroll-cue { position: absolute; right: var(--pad); bottom: var(--pad); font-size: 9px; text-transform: uppercase; letter-spacing: .12em; }
.awards-section { padding: clamp(100px, 12vw, 180px) var(--pad); border-bottom: 1px solid var(--line); }
.award-list { margin-top: clamp(50px, 7vw, 100px); }
.film-archive { padding: clamp(100px, 12vw, 180px) var(--pad); }
.section-heading--film { grid-template-columns: 1.15fr .6fr; }
.section-heading--film .eyebrow { grid-column: auto; }
.film-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
.film-card { position: relative; min-height: min(42vw, 610px); padding: 0; border: 0; color: var(--ink); background: #151515; overflow: hidden; cursor: pointer; text-align: left; }
.film-card--wide { grid-column: 1 / -1; min-height: min(55vw, 780px); }
.film-card > img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; filter: saturate(.7); transition: transform 1s var(--ease), filter .5s ease; }
.film-card__shade { position: absolute; inset: 0; background: linear-gradient(0deg, rgba(0,0,0,.7), transparent 55%); }
.film-card__meta { position: absolute; inset: auto 0 0; display: grid; grid-template-columns: 38px 1fr auto; gap: 12px; align-items: end; padding: 22px; }
.film-card__meta span, .film-card__meta em { font-size: 9px; text-transform: uppercase; letter-spacing: .1em; font-style: normal; }
.film-card__meta em { color: var(--muted); }
.film-card__meta strong { font-size: clamp(24px, 3.5vw, 56px); font-weight: 400; letter-spacing: -.05em; }
.film-card:hover > img, .film-card:focus-visible > img { transform: scale(1.025); filter: saturate(1); }
.film-card:focus-visible { outline: 2px solid var(--ink); outline-offset: 3px; }
.dialog-open { overflow: hidden; }
.project-dialog { width: min(94vw, 1500px); height: 92svh; height: 92dvh; max-width: none; max-height: none; padding: 0; border: 1px solid var(--line); background: #0d0d0d; color: var(--ink); overflow-y: auto; overscroll-behavior: contain; }
.project-dialog::backdrop { background: rgba(0,0,0,.84); backdrop-filter: blur(12px); }
.dialog-close { position: fixed; z-index: 3; top: max(calc(4svh + 12px), calc(env(safe-area-inset-top) + 10px)); right: max(calc(3vw + 12px), calc(env(safe-area-inset-right) + 10px)); min-width: 48px; min-height: 44px; border: 1px solid rgba(255,255,255,.42); background: rgba(0,0,0,.68); color: var(--ink); padding: 10px 13px; font-size: 12px; text-transform: uppercase; letter-spacing: .08em; cursor: pointer; }
.dialog-hero { width: 100%; height: 72svh; }
.dialog-hero img { width: 100%; height: 100%; object-fit: cover; }
.dialog-copy { display: grid; grid-template-columns: minmax(260px, .8fr) minmax(0, 1.2fr); gap: 8vw; padding: clamp(40px, 6vw, 90px); }
.dialog-copy h2 { grid-column: 1 / -1; margin: 10px 0 30px; font-size: clamp(62px, 9vw, 138px); font-weight: 400; line-height: .8; letter-spacing: -.08em; }
.dialog-copy > p:not(.project-number) { margin: 0; max-width: 46ch; color: var(--muted); line-height: 1.55; }
.dialog-copy .text-links { margin: 0; align-self: start; }
.dialog-gallery { grid-column: 1 / -1; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; margin-top: 40px; }
.dialog-gallery img { width: 100%; aspect-ratio: 16 / 9; object-fit: cover; }

@media (max-width: 960px) {
  .page-intro, .project-feature, .project-feature--reverse, .about-hero, .about-columns, .section-heading, .section-heading--film, .dialog-copy { grid-template-columns: 1fr; }
  .page-intro { align-content: end; gap: 40px; }
  .page-intro h1, .about-title h1 { font-size: clamp(62px, 19vw, 105px); }
  .project-feature, .project-feature--reverse { min-height: auto; }
  .project-feature--reverse .project-feature__media { order: 0; }
  .project-feature__media { min-height: 0; aspect-ratio: 4 / 3; }
  .project-feature__media--portrait { aspect-ratio: 4 / 5; }
  .project-feature__media--feel { aspect-ratio: 16 / 9; }
  .visual-grid { grid-template-columns: repeat(2, 1fr); grid-auto-rows: 52vw; }
  .visual-tile, .visual-tile--wide, .visual-tile--tall { grid-column: auto; grid-row: auto; }
  .visual-tile--tall { grid-row: span 2; }
  .site-footer { min-height: 130px; }
  .about-portrait { width: 100%; height: 56svh; aspect-ratio: auto; }
  .about-title { padding: 0 0 34px; }
  .identity-list > div, .award-list > div { grid-template-columns: 34px 1fr; }
  .identity-list strong, .award-list strong { grid-column: 2; text-align: left; }
  .film-grid { grid-template-columns: 1fr; }
  .film-card, .film-card--wide { grid-column: auto; min-height: 72vw; }
  .film-card__meta { grid-template-columns: 28px 1fr; }
  .film-card__meta em { grid-column: 2; }
  .dialog-hero { height: 52svh; }
  .dialog-copy h2, .dialog-gallery { grid-column: auto; }
  .dialog-gallery { grid-template-columns: 1fr; }
}

@media (max-width: 560px) {
  .content-page .site-header { display: grid; grid-template-columns: auto minmax(0, 1fr); align-items: start; gap: 8px; padding: max(8px, env(safe-area-inset-top)) max(12px, env(safe-area-inset-right)) 18px max(12px, env(safe-area-inset-left)); background: linear-gradient(180deg, rgba(11,11,11,.96), rgba(11,11,11,.72) 66%, transparent); }
  .content-page .wordmark { min-height: 44px; font-size: 12px; white-space: nowrap; }
  .content-page .wordmark-role { display: none; }
  .content-page .primary-nav { min-width: 0; justify-content: flex-end; gap: clamp(3px, 1.7vw, 8px); font-size: clamp(10px, 2.75vw, 12px); letter-spacing: .04em; }
  .content-page .primary-nav a { min-height: 44px; padding: 0 2px; white-space: nowrap; }
  .eyebrow, .project-number { font-size: 11px; line-height: 1.4; }
  .page-intro { min-height: 100svh; padding: max(112px, calc(env(safe-area-inset-top) + 92px)) max(18px, env(safe-area-inset-right)) 64px max(18px, env(safe-area-inset-left)); gap: 30px; }
  .page-intro h1, .about-title h1 { font-size: clamp(52px, 15vw, 68px); line-height: .84; letter-spacing: -.075em; }
  .ai-intro h1 { font-size: clamp(50px, 14.5vw, 64px); }
  .intro-copy { max-width: 36ch; font-size: 16px; line-height: 1.45; }
  .project-feature { gap: 34px; padding: 72px max(18px, env(safe-area-inset-right)) 84px max(18px, env(safe-area-inset-left)); }
  .project-stills { grid-template-columns: 1fr; gap: 8px; margin-top: 18px; }
  .project-still, .project-still--portrait, .project-still--wide { grid-column: auto; grid-row: auto; }
  .project-still--portrait { aspect-ratio: 3 / 4; }
  .project-feature__info h2, .section-heading h2, .awards-section h2, .film-archive h2 { font-size: clamp(42px, 13vw, 58px); line-height: .9; }
  .meta-list { margin-top: 34px; }
  .meta-list div { grid-template-columns: 76px 1fr; gap: 12px; font-size: 12px; line-height: 1.4; }
  .image-study, .capabilities, .identity-section, .awards-section, .film-archive, .about-columns { padding-left: max(18px, env(safe-area-inset-left)); padding-right: max(18px, env(safe-area-inset-right)); }
  .visual-grid { grid-template-columns: 1fr; grid-auto-rows: auto; gap: 8px; }
  .visual-tile, .visual-tile--wide, .visual-tile--tall { grid-column: auto; grid-row: auto; aspect-ratio: 16 / 10; }
  .visual-tile--tall { aspect-ratio: 4 / 5; }
  .about-hero { min-height: auto; padding: max(92px, calc(env(safe-area-inset-top) + 76px)) max(18px, env(safe-area-inset-right)) 72px max(18px, env(safe-area-inset-left)); gap: 36px; }
  .about-portrait { height: auto; aspect-ratio: 4 / 5; }
  .about-title { padding-bottom: 0; }
  .about-deck { font-size: 16px; line-height: 1.45; }
  .identity-list > div, .award-list > div { gap: 12px; }
  .identity-list p, .award-list p { font-size: clamp(24px, 8vw, 36px); line-height: 1.02; }
  .about-columns { gap: 64px; }
  .about-columns .large-copy { font-size: clamp(28px, 9vw, 42px); }
  .contact-section { min-height: 68svh; padding-left: max(18px, env(safe-area-inset-left)); padding-right: max(18px, env(safe-area-inset-right)); padding-bottom: max(18px, env(safe-area-inset-bottom)); }
  .contact-email { margin-bottom: 44px; font-size: clamp(38px, 11vw, 54px); line-height: .95; }
  .film-hero__copy { left: max(18px, env(safe-area-inset-left)); right: max(18px, env(safe-area-inset-right)); bottom: max(106px, calc(env(safe-area-inset-bottom) + 90px)); }
  .film-hero__copy h1 { font-size: clamp(56px, 15vw, 68px); line-height: .86; }
  .film-hero__copy > p:last-child { margin-top: 24px; font-size: 15px; }
  .scroll-cue { left: max(18px, env(safe-area-inset-left)); right: auto; bottom: max(18px, calc(env(safe-area-inset-bottom) + 12px)); font-size: 11px; }
  .film-card, .film-card--wide { min-height: 92vw; }
  .film-card__meta { padding: 18px; }
  .film-card__meta strong { font-size: clamp(28px, 9vw, 42px); }
  .project-dialog { width: 100vw; height: 100svh; height: 100dvh; margin: 0; border: 0; }
  .dialog-close { top: max(10px, env(safe-area-inset-top)); right: max(10px, env(safe-area-inset-right)); }
  .dialog-hero { height: 46svh; }
  .dialog-copy { gap: 24px; padding: 34px max(18px, env(safe-area-inset-right)) max(42px, calc(env(safe-area-inset-bottom) + 24px)) max(18px, env(safe-area-inset-left)); }
  .dialog-copy h2 { margin: 0; font-size: clamp(48px, 15vw, 68px); line-height: .86; }
  .dialog-copy > p:not(.project-number) { font-size: 16px; }
  .dialog-gallery { margin-top: 12px; }
  .site-footer { min-height: 150px; flex-direction: column; align-items: flex-start; padding-bottom: max(var(--pad), env(safe-area-inset-bottom)); }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { scroll-behavior: auto !important; transition-duration: .01ms !important; animation-duration: .01ms !important; animation-iteration-count: 1 !important; }
}

/* Source: assets/home-v2.css */
/* V2 candidate: isolated home-page refinements. */
.home-v2 .stage-step {
  width: clamp(48px, 6.5vw, 86px);
  min-width: 48px;
  height: 96px;
}

.home-v2 .stage-step--prev {
  left: clamp(8px, calc(18vw - 58px), 158px);
}

.home-v2 .stage-step--next {
  right: clamp(8px, calc(18vw - 58px), 158px);
}

.home-v2 .stage-step span {
  font-size: clamp(22px, 2.5vw, 34px);
  font-weight: 300;
}

.home-v2 .stage-step--prev:hover span,
.home-v2 .stage-step--prev:focus-visible span {
  transform: translateX(-5px);
}

.home-v2 .stage-step--next:hover span,
.home-v2 .stage-step--next:focus-visible span {
  transform: translateX(5px);
}

@media (min-width: 1025px) {
  .home-v2 .home-pagination {
    left: auto;
    right: calc(max(clamp(18px, 3.3vw, 64px), env(safe-area-inset-right)) + clamp(579px, 44vw, 835px) + 18px);
    transform: none;
  }
}

@media (max-width: 560px) {
  .home-v2 .stage-step {
    height: 64px;
  }
}

@media (max-width: 1024px) {
  .home-v2 .home-pagination {
    bottom: max(82px, calc(env(safe-area-inset-bottom) + 76px));
  }
}

@media (prefers-reduced-motion: reduce) {
  .home-v2 .stage-step span {
    transform: none !important;
  }
}

/* Source: assets/home-opening.css */
/* Staggered rising image wall, then a continuous push into the lead project. */
.home-v3.is-v3-loading .home-interface { opacity: 0; visibility: hidden; pointer-events: none; }
.v3-loader { position: fixed; z-index: 110; inset: 0; overflow: hidden; contain: strict; background: #111; color: #f4f4f2; }
.v3-loader[hidden] { display: none; }
.v3-loader-percent { position: absolute; z-index: 20; left: 50%; top: 50%; transform: translate(-50%, -50%); font-size: 12px; font-variant-numeric: tabular-nums; }
.v3-loader-gallery { position: absolute; inset: 0; }
.v3-loader-tile { position: absolute; left: 0; top: 0; width: 23.5vw; height: 23.5vh; overflow: hidden; opacity: 0; transform-origin: 0 0; will-change: transform; backface-visibility: hidden; }
.v3-loader-tile img { display: block; width: 100%; height: 100%; object-fit: cover; }
.v3-loader-tile--lead { z-index: 2; }
.v3-loader-skip { position: absolute; z-index: 30; bottom: max(18px, env(safe-area-inset-bottom)); right: max(18px, env(safe-area-inset-right)); min-height: 44px; padding: 10px 16px; border: 0; background: #111; color: #fff; font-size: 11px; opacity: .85; cursor: pointer; }
.v3-loader-skip:hover, .v3-loader-skip:focus-visible { opacity: 1; }
@media (prefers-reduced-motion: reduce) {
  .v3-loader { display: none !important; }
  .home-v3.is-v3-loading .home-interface { opacity: 1; visibility: visible; pointer-events: auto; }
}

/* Source: assets/banner-v3.css */
@property --compare-split {
  syntax: "<percentage>";
  inherits: true;
  initial-value: 50%;
}

.deck-card--comparison {
  background: #07080a;
}

.comparison-stage {
  --compare-split: 50%;
  position: absolute;
  inset: 0;
  overflow: hidden;
  background: #07080a;
  user-select: none;
  -webkit-user-select: none;
}

.comparison-frame {
  --comparison-inset: clamp(8px, 1.05vw, 18px);
  position: absolute;
  inset: var(--comparison-inset);
  overflow: hidden;
  border-radius: clamp(10px, 1vw, 17px);
  background: #111317;
  cursor: ew-resize;
  touch-action: pan-y;
  isolation: isolate;
}

/* Keep the navigation shade below the labels, inside the same stacking context. */
.home-page:has(.project-deck:not(.is-strip) .deck-card--comparison.is-active) .home-header {
  background: transparent;
}

.comparison-frame::before {
  content: "";
  position: absolute;
  z-index: 4;
  inset: 0 0 auto;
  height: calc(var(--home-header-height) - var(--comparison-inset));
  background-image: var(--home-header-shade);
  background-size: 100% var(--home-header-height);
  background-position: center bottom;
  background-repeat: no-repeat;
  pointer-events: none;
}

.project-deck.is-strip .comparison-frame::before {
  display: none;
}

.comparison-video,
.comparison-after {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
}

.comparison-video {
  display: block;
  object-fit: cover;
  object-position: center;
  pointer-events: none;
}

.comparison-after {
  z-index: 2;
  overflow: hidden;
  clip-path: inset(0 0 0 var(--compare-split));
  will-change: clip-path;
}

.comparison-after::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(2, 4, 7, .12), transparent 26%, transparent 68%, rgba(2, 4, 7, .18));
  pointer-events: none;
}

.comparison-label {
  position: absolute;
  z-index: 5;
  top: clamp(12px, 1.2vw, 21px);
  display: inline-flex;
  min-height: 27px;
  align-items: center;
  padding: 1px 11px 0;
  border-radius: 999px;
  background: rgba(248, 248, 246, .94);
  color: #101114;
  font-size: clamp(9px, .62vw, 11px);
  line-height: 1;
  letter-spacing: .09em;
  white-space: nowrap;
  pointer-events: none;
  box-shadow: 0 2px 16px rgba(0, 0, 0, .12);
}

.comparison-label--before {
  left: clamp(12px, 1.2vw, 21px);
}

.comparison-label--after {
  right: clamp(12px, 1.2vw, 21px);
}

.comparison-copy {
  position: absolute;
  z-index: 5;
  left: clamp(30%, var(--compare-split), 70%);
  top: 50%;
  width: min(86%, 820px);
  transform: translate(-50%, -50%);
  color: #fff;
  text-align: center;
  pointer-events: none;
  filter: drop-shadow(0 2px 20px rgba(0, 0, 0, .68));
  transition: opacity .3s ease, transform .48s cubic-bezier(.2, .75, .2, 1);
}

.comparison-copy p,
.comparison-copy h1,
.comparison-copy span,
.comparison-copy em {
  display: block;
  margin: 0;
}

.comparison-copy p {
  margin-bottom: clamp(8px, 1vw, 15px);
  font-size: clamp(9px, .65vw, 11px);
  line-height: 1.2;
  letter-spacing: .15em;
}

.comparison-copy h1 {
  font-size: clamp(34px, 4.5vw, 74px);
  font-weight: 400;
  line-height: .92;
  letter-spacing: -.055em;
}

.comparison-copy span {
  margin-top: clamp(10px, 1.2vw, 18px);
  font-size: clamp(11px, .85vw, 14px);
  line-height: 1.25;
  letter-spacing: .035em;
}

.comparison-copy em {
  width: max-content;
  margin: clamp(18px, 2.1vw, 32px) auto 0;
  padding: 9px 13px 8px;
  border: 1px solid rgba(255, 255, 255, .58);
  border-radius: 999px;
  background: rgba(5, 7, 10, .18);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  font-size: 9px;
  font-style: normal;
  line-height: 1;
  letter-spacing: .13em;
  text-transform: uppercase;
}

.comparison-divider {
  position: absolute;
  z-index: 6;
  left: var(--compare-split);
  top: 0;
  bottom: 0;
  width: 1px;
  transform: translateX(-.5px);
  background: rgba(255, 255, 255, .58);
  box-shadow: 0 0 10px rgba(0, 0, 0, .26);
  pointer-events: none;
  will-change: left;
}

.comparison-handle {
  position: absolute;
  z-index: 7;
  left: var(--compare-split);
  top: 50%;
  width: 56px;
  height: 64px;
  display: grid;
  place-items: center;
  padding: 0;
  border: 0;
  border-radius: 999px;
  transform: translate(-50%, -50%);
  background: transparent;
  color: #0d0e10;
  cursor: ew-resize;
  touch-action: none;
  will-change: left;
}

.comparison-handle > span {
  width: 8px;
  height: 8px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  border: 1px solid rgba(255, 255, 255, .75);
  background: #e8b676;
  box-shadow: 0 1px 8px rgba(0, 0, 0, .38);
  transition: transform .2s ease;
}

.comparison-handle i {
  display: none;
}

.comparison-handle:hover > span {
  transform: scale(1.45);
}

.comparison-handle:focus-visible {
  outline: none;
}

.comparison-handle:focus-visible > span {
  transform: scale(1.25);
  box-shadow: 0 0 0 5px rgba(255, 255, 255, .28), 0 1px 8px rgba(0, 0, 0, .38);
}

.comparison-stage.is-interacting .comparison-copy {
  opacity: 0;
  transform: translate(-50%, -50%) scale(.97);
}

.project-deck.is-strip .comparison-stage {
  pointer-events: none;
}

.project-deck.is-strip .comparison-frame {
  inset: 0;
  border-radius: 0;
  cursor: inherit;
}

.project-deck.is-strip .comparison-label,
.project-deck.is-strip .comparison-copy,
.project-deck.is-strip .comparison-divider,
.project-deck.is-strip .comparison-handle {
  opacity: 0;
  visibility: hidden;
}

.project-deck.is-strip .comparison-video {
  filter: saturate(.82) contrast(1.02);
}

@media (orientation: portrait) and (max-width: 900px) {
  /* The portrait comparison sits mid-screen, clear of the top navigation. */
  .comparison-frame::before {
    display: none;
  }

  .deck-card--comparison .comparison-frame {
    inset: auto max(8px, env(safe-area-inset-right)) auto max(8px, env(safe-area-inset-left));
    top: 50%;
    height: auto;
    aspect-ratio: 16 / 9;
    transform: translateY(-50%);
    border-radius: 9px;
  }

  .deck-card--comparison .comparison-copy {
    width: 82%;
  }

  .deck-card--comparison .comparison-copy p {
    margin-bottom: 7px;
    font-size: 8px;
  }

  .deck-card--comparison .comparison-copy h1 {
    font-size: clamp(26px, 7vw, 46px);
  }

  .deck-card--comparison .comparison-copy span {
    margin-top: 7px;
    font-size: clamp(9px, 2vw, 12px);
  }

  .deck-card--comparison .comparison-copy em {
    margin-top: clamp(10px, 2.6vw, 18px);
    padding: 7px 9px 6px;
    font-size: 0;
  }

  .deck-card--comparison .comparison-copy em::after {
    content: "Drag handle to reveal";
    font-size: 7px;
  }

  .deck-card--comparison .comparison-label {
    top: 8px;
    min-height: 23px;
    padding-inline: 8px;
    font-size: 8px;
  }

  .deck-card--comparison .comparison-label--before { left: 8px; }
  .deck-card--comparison .comparison-label--after { right: 8px; }

  .deck-card--comparison .comparison-handle {
    width: 52px;
    height: 56px;
  }

  .deck-card--comparison .comparison-handle > span {
    width: 9px;
    height: 9px;
  }

  .project-deck.is-strip .deck-card--comparison .comparison-frame {
    inset: 0;
    top: 0;
    width: 100%;
    height: 100%;
    aspect-ratio: auto;
    transform: none;
    border-radius: 0;
  }
}

@media (prefers-reduced-motion: reduce) {
  .comparison-stage {
    --compare-split: 50%;
  }

  .comparison-after,
  .comparison-divider,
  .comparison-handle {
    will-change: auto;
  }

  .comparison-copy,
  .comparison-handle > span {
    transition: none;
  }
}

/* Source: assets/portfolio.css */
/* Portfolio content edition — 25 Sep 2026. Existing home motion stays unchanged. */
.home-page { --home-project-title-size: clamp(44px, 4.4vw, 78px); --home-project-meta-size: clamp(11px, .82vw, 14px); }
.home-page .deck-project-title,
.home-page .comparison-copy h1 { font-size: var(--home-project-title-size); white-space: normal; text-wrap: balance; }
.home-page .deck-project-link { max-width: min(72vw, 1050px); }
/* Lay titles out for the expanded viewport before the card starts growing. */
@media (min-width: 1025px) {
  .home-page .deck-card > .deck-project-link--meta { width: max-content; }
}
.project-deck.is-strip .deck-card > .deck-project-link--meta { transform: translate(-50%, -50%); }
.home-page .comparison-copy { width: min(calc((100vw - 2 * clamp(8px, 1.05vw, 18px)) * .86), 820px); }
@media (orientation: portrait) and (max-width: 900px) {
  .home-page .deck-card--comparison .comparison-copy {
    width: calc((100vw - max(8px, env(safe-area-inset-right)) - max(8px, env(safe-area-inset-left))) * .82);
  }
}
.home-page .deck-project-link .project-tool-line,
.home-page .deck-project-link .deck-project-date,
.home-page .comparison-copy p,
.home-page .comparison-copy > span { font-size: var(--home-project-meta-size); }
.comparison-tool-line .project-tool-logo {
  width: 14px;
  height: 14px;
  margin: 0 5px 0 10px;
  vertical-align: -3px;
}
.deck-project-link--xuantian .deck-project-category {
  margin-block: 8px 4px;
  font-size: clamp(20px, 1.8vw, 28px);
  font-weight: 600;
  line-height: 1.4;
  letter-spacing: .12em;
}
.deck-card--alone { background: #090909; container-type: size; }
.deck-media--alone { object-fit: contain; }
/* Keep the hotspot registered to the 16:9 artwork, including its letterboxing. */
.alone-poster-frame {
  position: absolute;
  left: 50%;
  top: 50%;
  width: min(100cqw, 177.777778cqh);
  aspect-ratio: 16 / 9;
  transform: translate(-50%, -50%);
  container-type: inline-size;
}
.home-page .deck-card--alone .alone-recognition-link {
  left: 3%;
  top: 38%;
  width: 45%;
  max-width: none;
  height: 20%;
  min-height: 44px;
  padding: 8px 12px;
  transform: none;
  border-radius: 0;
  background: rgba(0, 0, 0, .156);
  font-size: clamp(13px, 2.3cqw, 30px);
  line-height: 1.25;
  letter-spacing: .015em;
  white-space: normal;
  transition: background-color .4s ease, opacity .25s ease;
}
.alone-recognition-label {
  position: absolute;
  top: 100%;
  left: 0;
  width: 100%;
  /* Leave the poster's festival laurels visible between the box and caption. */
  padding: 6.5cqw 0 8px;
  font-size: clamp(12px, 1.4cqw, 20px);
  opacity: 0;
  transform: translateY(5px);
  transition: opacity .4s ease, transform .4s ease;
}
.home-page .alone-recognition-link:is(:hover, :focus-visible) { background: rgba(0, 0, 0, .552); }
.alone-recognition-link:is(:hover, :focus-visible) .alone-recognition-label { opacity: 1; transform: none; }
.project-deck.is-strip .alone-recognition-link { visibility: hidden; pointer-events: none; }
/* The previous-project hit area must not intercept the poster title link. */
.home-page .home-stage:has(.deck-card--alone.is-active) > .stage-step {
  top: calc(50% + min(14.0625vw, 25dvh));
  height: 44px;
}
/* Keep only the left arrow clear of the new strip; the right stays off credits. */
.home-page .home-stage:has(.deck-card--alone.is-active) > .stage-step--prev { top: calc(50% + min(19.6875vw, 35dvh)); }
@media (hover: none), (pointer: coarse) {
  .home-page .deck-card--alone .alone-recognition-link { background: rgba(0, 0, 0, .516); }
  .alone-recognition-label { opacity: 1; transform: none; }
}
@media (prefers-reduced-motion: reduce) {
  .home-page .deck-card--alone .alone-recognition-link,
  .alone-recognition-label { transition: none; }
  .alone-recognition-label { transform: none; }
}
.deck-card--tvc { background: #000; }
.deck-media--tvc-banner { object-fit: contain; }
.tvc-home-layout { display: contents; }
.project-deck:not(.is-strip) .tvc-home-layout {
  position: absolute;
  inset: max(110px, 15%) 10% max(100px, 14%);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: clamp(24px, 4dvh, 48px);
}
.project-deck:not(.is-strip) .tvc-home-layout .deck-project-link {
  position: static;
  flex: none;
  width: 100%;
  max-width: none;
  padding: 0;
  transform: none;
}
.project-deck:not(.is-strip) .tvc-home-layout .deck-picture {
  position: relative;
  inset: auto;
  flex: 0 1 auto;
  width: 100%;
  height: auto;
  min-height: 0;
  aspect-ratio: 2114 / 744;
}
.project-deck:not(.is-strip) .deck-media--tvc-banner { padding: 0; }
.tvc-image-link { text-decoration: none; }
.tvc-image-link:focus-visible { outline: 2px solid #eee; outline-offset: 6px; }
/* Overview clicks expand the card; the expanded image opens the TVC page. */
.project-deck.is-strip .tvc-image-link { pointer-events: none; }
/* In the overview, fill the card vertically and crop the artwork at its sides. */
.project-deck.is-strip .alone-poster-frame {
  inset: 0;
  width: 100%;
  height: 100%;
  aspect-ratio: auto;
  transform: none;
}
.project-deck.is-strip .deck-media { object-fit: cover; }
.project-deck.is-strip .deck-media--tvc-banner { padding: 0; }
.thumbnail-dock .thumbnail-tvc img { object-fit: contain; background: #000; }

/* A fifth navigation item has its own row on small screens, not smaller targets. */
.content-page .primary-nav { flex-shrink: 0; }
.content-page .primary-nav a { white-space: nowrap; }
.section-heading > div > p { max-width: 44ch; color: var(--muted); line-height: 1.7; }
/* Match the other AI project credits; wrap between intact brand names on narrow screens. */
.content-page #xuantian .project-tool-line--detail { max-width: 100%; flex-wrap: wrap; line-height: 1.5; }
/* Workflow footage needs its complete horizontal frame, including on hover. */
.project-feature__media.project-feature__media--uncropped { min-height: 0; aspect-ratio: auto; }
.project-feature__media--uncropped video { display: block; position: static; width: 100%; height: auto; object-fit: contain; }
.project-feature__media--uncropped video,
.project-feature:hover .project-feature__media--uncropped video { transform: none; transition: none; }
/* This source has 90px black pillars on each side of its 720px encoded frame.
   Keep all 540px of content and the full height; SAR 118:81 gives DAR 295:216.
   The poster uses the same full-frame geometry, so loading does not change the crop. */
.project-feature__media.project-feature__media--trim-bars { aspect-ratio: 295 / 216; }
.project-feature__media--trim-bars video {
  position: absolute;
  inset: 0 auto 0 calc(-100% / 6);
  width: calc(100% * 4 / 3);
  max-width: none;
  height: 100%;
}
/* Recognition stays in the reading column, below the copy and above project facts. */
.project-award--feel { width: min(100%, 320px); margin: 20px 0 0; }
.project-award--feel img { display: block; width: 100%; height: auto; object-fit: contain; }
.project-award--feel + .meta-list { margin-top: 20px; }
/* One high-resolution, transparent strip; never crop the two ranking labels. */
.alone-staff-picks { margin: 0; background: transparent; }
.alone-staff-picks img { display: block; width: 100%; height: auto; object-fit: contain; background: transparent; filter: drop-shadow(0 2px 6px rgba(0, 0, 0, .1)); }
.alone-staff-picks--detail { width: min(100%, 620px); margin-top: 28px; }
.alone-staff-picks--home {
  position: absolute;
  z-index: 3;
  left: 3%;
  top: 72%;
  width: 45%;
  max-width: 640px;
  padding: 4px 8px;
  background: transparent;
  pointer-events: none;
}
.project-deck.is-strip .alone-staff-picks--home { display: none; }
@media (max-width: 700px), (orientation: portrait) {
  .alone-staff-picks--home { top: calc(100% + 20px); left: 4%; width: 92%; max-width: none; padding: 0; background: none; }
}
.film-card { text-decoration: none; }
.film-card--poster > img { object-fit: contain; background: #050505; }
.film-card__meta { grid-template-columns: 26px minmax(0, 1fr); }
.film-card__meta em { grid-column: 2; line-height: 1.8; color: #ddd; }
.film-card__meta strong { line-height: 1.05; }
.film-card__meta strong small { display: block; margin-top: 12px; font-size: clamp(12px, 1.2vw, 17px); font-weight: 400; letter-spacing: .06em; line-height: 1.5; }

/* Full artwork and portrait posters are never forced into a landscape crop. */
.dialog-hero { height: auto; min-height: 120px; background: #050505; }
.dialog-hero img { display: block; height: auto; max-height: 78svh; object-fit: contain; }
.dialog-copy { gap: 32px 6vw; grid-template-columns: minmax(0, 1.5fr) minmax(0, .7fr); }
.dialog-copy .project-number { grid-column: 1 / -1; line-height: 1.8; margin: 0; }
.dialog-copy h2 { margin: 0 0 12px; font-size: clamp(42px, 7vw, 104px); line-height: 1.02; letter-spacing: -.055em; overflow-wrap: anywhere; }
.project-description p { margin: 0; max-width: 60ch; font-size: clamp(16px, 1.3vw, 19px); line-height: 1.75; color: #c9c9c5; }
.project-description p + p { margin-top: 24px; font-size: 15px; line-height: 1.95; color: #aaa; }
.project-facts { margin: 0; }
.project-facts > div { border-top: 1px solid var(--line); padding: 14px 0 20px; }
.project-facts dt { margin-bottom: 10px; font-size: 10px; text-transform: uppercase; letter-spacing: .14em; color: #888; }
.project-facts dd { margin: 0; font-size: 14px; line-height: 1.6; }
.project-recognition, .dialog-copy .text-links { grid-column: 1 / -1; }
.project-recognition h3 { font-size: 11px; text-transform: uppercase; letter-spacing: .14em; font-weight: 400; }
.project-recognition ul { padding-left: 18px; margin: 18px 0 0; color: #bbb; font-size: 14px; line-height: 1.8; }
.film-recognition-list { margin: 32px 0 0; padding: 0; list-style: none; }
.film-recognition-list > li { display: grid; grid-template-columns: 48px minmax(0, 1fr); gap: 18px; padding: 18px 0; border-top: 1px solid var(--line); }
.film-recognition-list__year { padding-top: 4px; color: var(--muted); font-size: 12px; font-variant-numeric: tabular-nums; }
.film-recognition-list p { margin: 0; max-width: 76ch; color: #d4d4d0; font-size: clamp(14px, 1.35vw, 18px); line-height: 1.65; overflow-wrap: break-word; }
.film-recognition-list p[lang="zh-Hans"] { margin-top: 6px; color: #aaa; font-size: 14px; line-height: 1.85; }
.viewing-note { margin: 0; font-size: 13px; line-height: 1.6; color: #999; }
.dialog-gallery { align-items: start; gap: 28px 18px; margin-top: 12px; }
.dialog-gallery figure { margin: 0; min-width: 0; }
.dialog-gallery img { display: block; height: auto; aspect-ratio: auto; object-fit: contain; background: #080808; }
.dialog-gallery figcaption { padding-top: 10px; color: #888; font-size: 10px; letter-spacing: .04em; }
.dialog-gallery .gallery-portrait { grid-column: 1 / -1; width: min(100%, 520px); justify-self: center; }
.award-list strong { max-width: 30ch; line-height: 1.7; }
.profile-biography { margin-top: 30px; max-width: 52ch; font-size: 15px; color: var(--muted); line-height: 1.8; }

/* TVC: a brand-led opening followed by a compact, image-first case-study index. */
.tvc-hero { padding: clamp(148px, 15vw, 240px) var(--pad) 0; background: #000; }
.tvc-hero__heading { display: grid; grid-template-columns: 1.15fr .85fr; align-items: end; gap: 10vw; }
.tvc-hero h1 { margin: 30px 0 0; font-size: clamp(48px, 6vw, 88px); line-height: 1.04; letter-spacing: -.055em; font-weight: 400; }
.tvc-hero__intro > p { max-width: 42ch; color: #b3b3b0; font-size: 16px; line-height: 1.7; }
.tvc-hero__intro > p[lang] { font-size: 14px; line-height: 1.9; }
.tvc-explore { display: inline-flex; min-height: 44px; align-items: center; gap: 32px; margin-top: 16px; text-decoration: none; font-size: 13px; }
.tvc-explore span { font-size: 22px; }
.tvc-banner { margin: clamp(60px, 8vw, 120px) 0 0; border-top: 1px solid #222; }
.tvc-banner img { display: block; width: 100%; height: auto; margin: auto; padding: 24px 0; }
.tvc-banner figcaption { display: flex; justify-content: space-between; padding: 22px 0; border-top: 1px solid #222; font-size: 10px; text-transform: uppercase; letter-spacing: .12em; color: #888; }
.tvc-archive { padding-top: clamp(70px, 9vw, 140px); }
.tvc-page .film-grid { gap: 44px 24px; }
.tvc-page .film-card { display: flex; flex-direction: column; min-height: 0; background: transparent; overflow: visible; }
.tvc-page .film-card > img { position: static; aspect-ratio: 16 / 9; height: auto; filter: none; object-fit: cover; }
.tvc-page .film-card__shade { display: none; }
.tvc-page .film-card__meta { position: static; padding: 22px 0 0; }
.tvc-page .film-card__meta strong { font-size: clamp(26px, 3vw, 48px); }
.tvc-page .film-card__meta em { color: #aaa; }
.tvc-brand-portfolio { margin: 0 var(--pad) clamp(64px, 8vw, 120px); padding: clamp(24px, 4vw, 56px) 0; background: #000; }
.tvc-brand-portfolio img { display: block; width: 100%; max-width: 1366px; height: auto; margin: auto; }
.tvc-services { padding: 0 var(--pad) clamp(90px, 10vw, 150px); }
.tvc-services > div { display: flex; gap: 40px; justify-content: space-between; align-items: end; padding: 35px 0; border-bottom: 1px solid var(--line); }
.tvc-services h2 { font-size: clamp(42px, 6vw, 90px); line-height: .98; letter-spacing: -.06em; font-weight: 400; margin: 0; }
.tvc-services p { font-size: 16px; line-height: 1.9; color: #aaa; }
.tvc-services > a { display: inline-flex; min-height: 44px; align-items: center; margin-top: 20px; font-size: 13px; text-decoration: none; }

@media (max-width: 960px) {
  .tvc-hero__heading { gap: 6vw; }
  .dialog-copy { grid-template-columns: 1fr; }
  .dialog-copy h2, .dialog-gallery { grid-column: 1 / -1; }
  .project-facts { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 20px; }
  .tvc-page .film-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 680px) {
  .content-page .site-header { display: grid; grid-template-columns: 1fr; gap: 0; padding: max(12px, env(safe-area-inset-top)) max(18px, env(safe-area-inset-right)) 16px max(18px, env(safe-area-inset-left)); background: linear-gradient(#0b0b0b 70%, transparent); }
  .content-page .wordmark { font-size: 12px; }
  .content-page .wordmark-role { display: none; }
  .content-page .primary-nav { justify-content: space-between; width: 100%; gap: clamp(4px, 2vw, 10px); font-size: 11px; letter-spacing: .045em; }
  .content-page .primary-nav a { min-width: 44px; min-height: 44px; justify-content: center; padding: 0 3px; }
  .content-page section[id] { scroll-margin-top: max(132px, calc(env(safe-area-inset-top) + 120px)); }
  .about-page .about-hero, .content-page .page-intro { padding-top: max(140px, calc(env(safe-area-inset-top) + 128px)); }
  .tvc-hero { padding-top: 150px; }
  .tvc-hero__heading { grid-template-columns: 1fr; gap: 32px; }
  .tvc-hero h1 { font-size: clamp(44px, 11vw, 72px); }
  .tvc-hero__intro > p { max-width: none; }
  .tvc-banner { margin-top: 40px; }
  .tvc-banner img { padding: 24px 0; }
  .tvc-banner figcaption { font-size: 8px; gap: 12px; }
  .tvc-page .film-grid { grid-template-columns: 1fr; }
  .tvc-page .film-card__meta strong { font-size: 32px; }
  .tvc-services > div { align-items: start; flex-direction: column; gap: 22px; }
  .project-facts { grid-template-columns: 1fr 1fr; gap: 16px; }
  .project-facts > div:first-child { grid-column: 1 / -1; }
  .dialog-hero { padding-top: 62px; }
  .dialog-copy { padding: 32px 20px 48px; }
  .dialog-copy h2 { font-size: clamp(38px, 10vw, 68px); }
  .dialog-gallery { grid-template-columns: 1fr; }
  .project-deck:not(.is-strip) .tvc-home-layout { inset: max(110px, 15%) 12% max(130px, 17%); }
}
@media (max-width: 560px) {
  .home-page .deck-project-link { width: calc(100vw - 96px); max-width: calc(100vw - 96px); padding-inline: 0; }
  .home-page .stage-step { width: 44px; min-width: 44px; }
  .home-page .stage-step--prev { left: 0; }
  .home-page .stage-step--next { right: 0; }
}
@media (prefers-reduced-motion: reduce) {
  .film-card > img { transition: none; }
  .film-card:hover > img, .film-card:focus-visible > img { transform: none; }
}

/* Source: assets/cinema-workflows.css */
/* Detail players preserve the complete frame; the home hero fills its viewport. */
.workflow-player { position: relative; display: flex; flex-direction: column; min-width: 0; min-height: 0; }
.workflow-player__picture { position: relative; flex: 1; min-height: 0; aspect-ratio: 16 / 9; background: #050606; overflow: hidden; }
.workflow-player video { display: block; width: 100%; height: 100%; object-fit: contain; }
.workflow-player__controls { display: flex; flex-shrink: 0; align-items: center; gap: 14px; min-height: 44px; color: #d6d5cf; }
.workflow-player__controls[hidden] { display: none; }
.workflow-player__controls button { min-height: 44px; padding: 0; border: 0; color: inherit; background: none; cursor: pointer; font-size: 11px; white-space: nowrap; }
.workflow-player__controls button:first-child { min-width: 34px; text-align: left; }
.workflow-player__controls output { font-size: 10px; font-variant-numeric: tabular-nums; white-space: nowrap; }
.workflow-player__controls input { --seek: 0%; appearance: none; -webkit-appearance: none; flex: 1; width: 0; min-width: 35px; height: 36px; margin: 0; cursor: ew-resize; background: transparent; touch-action: none; }
.workflow-player__controls input::-webkit-slider-runnable-track { box-sizing: border-box; height: 12px; border: 1px solid #e5be8899; border-radius: 2px; background: linear-gradient(to right, #e5be88 var(--seek), #171a1be6 var(--seek)); }
.workflow-player__controls input::-moz-range-track { box-sizing: border-box; height: 12px; border: 1px solid #e5be8899; border-radius: 2px; background: #171a1be6; }
.workflow-player__controls input::-moz-range-progress { height: 10px; border-radius: 1px; background: #e5be88; }
.workflow-player__controls input::-webkit-slider-thumb { -webkit-appearance: none; width: 4px; height: 18px; margin-top: -4px; border-radius: 1px; background: #fff0d7; border: 0; }
.workflow-player__controls input::-moz-range-thumb { width: 4px; height: 18px; border-radius: 1px; background: #fff0d7; border: 0; }
.workflow-player__controls input:focus-visible { outline: 1px solid #e5be88; outline-offset: 3px; }
.workflow-player__controls input:disabled { opacity: .3; cursor: wait; }
.workflow-player__status { font-size: 11px; color: #e5be88; }
.workflow-player__status:empty { display: none; }

/* Home: edge-to-edge moving image with the same centered hierarchy as project 0. */
.cinema-home { position: absolute; inset: 0; isolation: isolate; }
.cinema-home__heading { position: absolute; z-index: 4; left: 50%; top: 50%; transform: translate(-50%, -50%); width: min(82vw, 1000px); display: flex; flex-direction: column; align-items: center; gap: 18px; text-align: center; text-shadow: 0 2px 24px #0009; pointer-events: none; }
.cinema-home__kicker > span { white-space: nowrap; }
.cinema-home__kicker .project-tool { text-transform: none; }
.cinema-home__kicker .project-tool-logo { width: 14px; height: 14px; flex-basis: 14px; }
.cinema-home__kicker { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 8px 14px; margin: 0; color: #eeece4; font-size: var(--home-project-meta-size); letter-spacing: .1em; text-transform: uppercase; }
.home-page .cinema-home .cinema-home__title { position: static; transform: none; display: block; width: auto; max-width: none; padding: 0; font-size: var(--home-project-title-size); line-height: .98; letter-spacing: -.05em; white-space: normal; text-align: center; pointer-events: auto; }
.cinema-home__title span { display: block; }
.cinema-home__meta { display: flex; align-items: center; gap: 20px; font-size: var(--home-project-meta-size); letter-spacing: .035em; }

.cinema-home > .workflow-player { position: absolute; inset: 0; }
.cinema-home .workflow-player__picture { position: absolute; inset: 0; aspect-ratio: auto; }
.cinema-home .workflow-player__picture::after { content: ''; position: absolute; inset: 0; pointer-events: none; background: linear-gradient(180deg, #0005, transparent 25%, #0003 50%, transparent 68%, #0009); }
.cinema-home .workflow-player video { object-fit: cover; }
.cinema-home .workflow-player__controls { position: absolute; z-index: 5; left: clamp(24px, 7vw, 130px); right: clamp(24px, 7vw, 130px); bottom: 108px; min-height: 54px; padding: 0; background: none; color: #fff; text-shadow: 0 1px 8px #000; transition: opacity 1.2s ease-in-out; }
.cinema-home .workflow-player__status { position: absolute; z-index: 5; left: 7vw; bottom: 172px; padding: 6px 10px; background: #050709b3; }
.comparison-title-link { color: inherit; text-decoration: none; pointer-events: auto; }
.comparison-title-link:focus-visible { outline: 1px solid #e5be88; outline-offset: 8px; }
.home-page .deck-card--comparison .comparison-copy em { padding: 11px 20px; font-size: clamp(13px, 1.1vw, 17px); letter-spacing: .06em; text-transform: none; }
.home-page .deck-card--comparison .comparison-copy em::after { content: none; }
.cinema-home .workflow-player__controls[data-visible="false"] { opacity: 0; visibility: hidden; pointer-events: none; }
.project-deck.is-strip .cinema-home { inset: 0; }
.project-deck.is-strip .cinema-home__heading, .project-deck.is-strip .workflow-player__controls, .project-deck.is-strip .workflow-player__status { display: none; }
.project-deck.is-strip .workflow-player { height: 100%; pointer-events: none; }
.project-deck.is-strip .workflow-player__picture { aspect-ratio: auto; }
.project-deck.is-strip .workflow-player video { object-fit: cover; }

/* The page title is a full cinema banner, separate from the pinned story controls. */
.ai-cinema-banner { position: relative; isolation: isolate; min-height: 520px; height: min(76svh, 850px); padding: 150px var(--pad) 58px; display: flex; align-items: end; justify-content: space-between; overflow: hidden; border-bottom: 1px solid var(--line); background: #080b0e; }
.ai-cinema-banner__image { position: absolute; z-index: -2; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: center 60%; opacity: .7; }
.ai-cinema-banner::before { content: ''; position: absolute; z-index: -1; inset: 0; background: linear-gradient(90deg, #06090ded 0%, #06090d8c 52%, #06090d26), linear-gradient(0deg, #07090cd9, transparent 60%); }
.ai-cinema-banner__copy { position: relative; }
.ai-cinema-banner__label { margin: 0 0 30px; font-size: 11px; letter-spacing: .15em; text-transform: uppercase; color: #e5be88; }
.ai-cinema-banner h1 { margin: 0; font-size: clamp(76px, 11.5vw, 180px); font-weight: 400; line-height: .86; letter-spacing: -.065em; }
.ai-cinema-banner h1 em { font-style: normal; color: #e5e3dc; }
.ai-cinema-banner__subtitle { margin: 30px 0 0; font-size: clamp(16px, 1.6vw, 24px); letter-spacing: -.025em; color: #c6c6c1; }
.ai-cinema-banner__index { display: flex; flex-direction: column; gap: 12px; padding-bottom: 3px; color: #d9d8d1; font-size: 10px; letter-spacing: .07em; text-transform: uppercase; }
@media (max-width: 680px) {
  .ai-cinema-banner { min-height: 480px; height: 70svh; padding-top: 150px; padding-bottom: 38px; align-items: end; }
  .ai-cinema-banner h1 { font-size: clamp(55px, 14vw, 92px); }
  .ai-cinema-banner__label { font-size: 9px; margin-bottom: 24px; }
  .ai-cinema-banner__subtitle { margin-top: 24px; }
  .ai-cinema-banner__index { display: none; }
}

/* Native scrolling advances two stories within one pinned editorial canvas. */
.ai-workflows { --workflow-top: 100px; --workflow-accent: #e5be88; padding: var(--workflow-top) var(--pad) 40px; border-bottom: 1px solid var(--line); }
.content-page:has(.ai-workflows) .site-header { background: #0b0b0b; }
.ai-workflows__pin { max-width: 1720px; margin: 0 auto; }
.ai-workflows__eyebrow { display: flex; gap: 24px; align-items: center; padding: 12px 0 18px; border-bottom: 1px solid var(--line); color: var(--muted); font-size: 10px; letter-spacing: .09em; text-transform: uppercase; }
.ai-workflows__eyebrow > p { color: var(--ink); margin: 0; font-size: 12px; font-weight: 400; letter-spacing: .12em; }
.ai-workflows__eyebrow > span:last-child { margin-left: auto; font-variant-numeric: tabular-nums; white-space: nowrap; }
.ai-workflows__layout { display: grid; grid-template-columns: clamp(180px, 18vw, 240px) minmax(0, 1fr); gap: clamp(28px, 4vw, 68px); padding-top: 22px; min-height: 0; }
.ai-workflows__directory { display: flex; flex-direction: column; gap: 26px; align-self: center; border-left: 1px solid var(--line); }
.ai-workflows__directory a { position: relative; display: grid; gap: 12px; padding-left: 18px; text-decoration: none; color: var(--muted); font-size: 11px; line-height: 1.5; transition: color .35s; }
.ai-workflows__directory a::before { content: ''; position: absolute; left: -1px; top: 0; width: 2px; height: 100%; transform: scaleY(0); transform-origin: top; background: var(--workflow-accent); transition: transform .35s; }
.ai-workflows__directory a[aria-current="true"] { color: var(--ink); }
.ai-workflows__directory a[aria-current="true"]::before { transform: scaleY(1); }
.ai-workflows__thumb { display: block; overflow: hidden; aspect-ratio: 16 / 9; opacity: .38; transition: opacity .35s; }
.ai-workflows__thumb img { display: block; width: 100%; height: 100%; object-fit: cover; }
.ai-workflows__directory a:is([aria-current="true"], :hover) .ai-workflows__thumb { opacity: 1; }
.ai-workflows__directory b { display: block; margin-bottom: 3px; font-weight: 400; color: var(--workflow-accent); font-size: 9px; letter-spacing: .06em; }
.ai-workflows__directory a > span:last-child { white-space: nowrap; }
.ai-workflows__directory small { display: inline; font-size: inherit; }
.ai-workflows__scroll { margin: 6px 0 0 18px; font-size: 9px; color: var(--muted); }
.ai-workflows__scroll span { display: block; margin-top: 12px; font-size: 20px; }
.ai-workflows__stage { min-width: 0; min-height: 0; }
.ai-workflows__item { display: flex; flex-direction: column; gap: 18px; scroll-margin-top: calc(var(--workflow-top) + 12px); }
.ai-workflows__item + .ai-workflows__item { margin-top: 80px; }
.ai-workflows__title p { margin: 0 0 12px; color: var(--workflow-accent); font-size: 10px; text-transform: uppercase; letter-spacing: .12em; }
.ai-workflows__title h2 { margin: 0; font-size: clamp(44px, min(6.3vw, 8svh), 82px); font-weight: 400; letter-spacing: -.055em; line-height: .98; }
.ai-workflows__title em { font-style: normal; color: #aaa9a3; }
.ai-workflows__description { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 28px; flex-shrink: 0; }
.ai-workflows__description h3 { margin: 0 0 8px; font-weight: 400; font-size: 15px; letter-spacing: -.02em; }
.ai-workflows__description p { margin: 0; max-width: 760px; color: var(--muted); font-size: 12px; line-height: 1.6; }
.ai-workflows__credits { display: flex; flex-direction: column; gap: 12px; align-items: end; font-size: 10px; white-space: nowrap; }
.ai-workflows__credits time { color: var(--muted); }
.ai-workflows.is-enhanced { height: 250svh; padding-bottom: 0; }
.ai-workflows.is-enhanced .ai-workflows__pin { position: sticky; top: var(--workflow-top); height: calc(100svh - var(--workflow-top)); display: flex; flex-direction: column; padding-bottom: 28px; }
.ai-workflows.is-enhanced .ai-workflows__layout { flex: 1; }
.ai-workflows.is-enhanced .ai-workflows__stage { position: relative; }
.ai-workflows.is-enhanced .ai-workflows__item { position: absolute; inset: 0; margin: 0; opacity: 1; transform: translateY(0); transition: opacity .38s, transform .5s; }
.ai-workflows.is-enhanced .ai-workflows__item[aria-hidden="true"] { opacity: 0; transform: translateY(20px); pointer-events: none; visibility: hidden; }
.ai-workflows.is-enhanced .ai-workflows__item > .ab-compare, .ai-workflows.is-enhanced .ai-workflows__item > .workflow-player { flex: 1; min-height: 0; }

/* Reuse the About page's synchronized comparison and divider controls. */
.ai-workflows .ab-compare { --compare-split: 50%; display: flex; flex-direction: column; }
.ai-workflows .ab-compare__frame { position: relative; flex: 1; min-height: 0; aspect-ratio: 16 / 9; overflow: hidden; background: #050505; isolation: isolate; cursor: ew-resize; touch-action: pan-y; user-select: none; }
.ai-workflows .ab-compare__frame video, .ai-workflows .ab-compare__after { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: contain; pointer-events: none; }
.ai-workflows .ab-compare__after { z-index: 1; clip-path: inset(0 0 0 var(--compare-split)); }
.ai-workflows .ab-compare__label { position: absolute; z-index: 2; top: 14px; padding: 7px 10px; border-radius: 20px; background: #f5f4f0eb; color: #111; font-size: 9px; letter-spacing: .09em; line-height: 1; pointer-events: none; }
.ai-workflows .ab-compare__label--before { left: 14px; }
.ai-workflows .ab-compare__label--after { right: 14px; }
.ai-workflows .ab-compare__divider { position: absolute; z-index: 3; top: 0; bottom: 0; left: var(--compare-split); width: 1px; background: #ffffffcc; pointer-events: none; }
.ai-workflows .ab-compare__handle { position: absolute; z-index: 4; left: var(--compare-split); top: 50%; transform: translate(-50%, -50%); display: grid; place-items: center; width: 56px; height: 64px; border: 0; padding: 0; background: transparent; cursor: ew-resize; touch-action: none; color: #17140e; }
.ai-workflows .ab-compare__handle > span { display: grid; place-items: center; width: 34px; height: 34px; border: 1px solid #ffffffcc; border-radius: 50%; background: #e8b676; font-size: 19px; }
.ai-workflows .ab-compare__controls { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 24px; flex-shrink: 0; min-height: 44px; color: var(--muted); font-size: 10px; }
.ai-workflows .ab-compare__controls p { margin: 0; }
.ai-workflows .ab-compare__play { min-height: 44px; margin-left: auto; padding: 8px 0 8px 16px; border: 0; background: transparent; color: var(--ink); font-size: 11px; cursor: pointer; }
.ai-workflows .ab-compare__status:not(:empty) { flex-basis: 100%; padding-bottom: 6px; }

@media (max-width: 680px) {
  .cinema-home__heading { width: calc(100vw - 64px); gap: 14px; }
  .home-page .cinema-home .cinema-home__title { font-size: clamp(32px, 8.5vw, 48px); }
  .cinema-home__kicker, .cinema-home__meta { font-size: 9px; }
  .cinema-home .workflow-player__controls { left: 18px; right: 18px; bottom: 152px; padding: 0; }
  .cinema-home .workflow-player__status { left: 18px; bottom: 212px; }
  .home-page .deck-card--comparison .comparison-copy em { font-size: 12px; padding: 8px 14px; }
  .ai-workflows__eyebrow { gap: 8px; padding: 5px 0 14px; }
  .ai-workflows__eyebrow > p { font-size: 10px; }
  .ai-workflows__eyebrow > span:nth-child(2) { display: none; }
  .ai-workflows__layout { grid-template-columns: 76px minmax(0, 1fr); gap: 14px; padding-top: 20px; }
  .ai-workflows__directory { gap: 22px; }
  .ai-workflows__directory a { gap: 7px; padding-left: 8px; font-size: 9px; line-height: 1.4; }
  .ai-workflows__scroll { display: none; }
  .ai-workflows__directory a > span:last-child { white-space: normal; }
  .ai-workflows__thumb { aspect-ratio: 1; }
  .ai-workflows__title h2 { font-size: clamp(31px, 7.5vw, 48px); }
  .ai-workflows__title p { font-size: 8px; letter-spacing: .05em; line-height: 1.6; }
  .ai-workflows__item { gap: 18px; }
  .ai-workflows__description { grid-template-columns: 1fr; gap: 14px; }
  .ai-workflows__description h3 { font-size: 14px; }
  .ai-workflows__description p { font-size: 11px; line-height: 1.5; }
  .ai-workflows__credits { flex-direction: row; justify-content: space-between; font-size: 9px; }
  .ai-workflows.is-enhanced .ai-workflows__item > .ab-compare, .ai-workflows.is-enhanced .ai-workflows__item > .workflow-player { flex: 0 0 auto; }
  .ai-workflows .workflow-player__picture, .ai-workflows .ab-compare__frame { flex: none; }
  .ai-workflows.is-enhanced .ai-workflows__item { justify-content: center; }
  .ai-workflows .ab-compare__controls { gap: 0 8px; font-size: 8px; }
  .ai-workflows .ab-compare__controls p span { display: none; }
  .ai-workflows .ab-compare__play { font-size: 9px; padding-left: 0; }
  .ai-workflows .ab-compare__label { top: 8px; font-size: 7px; padding: 5px 7px; }
  .ai-workflows .ab-compare__label--before { left: 8px; }
  .ai-workflows .ab-compare__label--after { right: 8px; }
  .workflow-player__controls { gap: 9px; }
  .ai-workflows .workflow-player__controls button { font-size: 9px; }
  .ai-workflows .workflow-player__controls output { font-size: 8px; }
}
@media (max-height: 650px) {
  .ai-workflows.is-enhanced { height: auto; padding-bottom: 40px; }
  .ai-workflows.is-enhanced .ai-workflows__pin { position: static; height: auto; }
  .ai-workflows.is-enhanced .ai-workflows__stage { min-height: 750px; }
  .ai-workflows.is-enhanced .ai-workflows__item { justify-content: start; }
}
@media (prefers-reduced-motion: reduce) {
  .cinema-home .workflow-player__controls { transition: none; }
  .ai-workflows__item, .ai-workflows__directory a, .ai-workflows__thumb, .ai-workflows__directory a::before { transition: none !important; }
  .ai-workflows__directory { align-self: start; position: sticky; top: var(--workflow-top); }
}
/* Size the image and its controls as one 16:9 frame, without empty side panels. */
@media (min-width: 681px) and (min-height: 651px) {
  .ai-workflows.is-enhanced .ai-workflows__item > .ab-compare,
  .ai-workflows.is-enhanced .ai-workflows__item > .workflow-player { container-type: size; align-items: start; justify-content: end; }
  .ai-workflows.is-enhanced .ab-compare__frame,
  .ai-workflows.is-enhanced .workflow-player__picture { flex: none; width: min(100cqw, calc((100cqh - 44px) * 16 / 9)); height: auto; aspect-ratio: 16 / 9; }
  .ai-workflows.is-enhanced .ab-compare__controls,
  .ai-workflows.is-enhanced .workflow-player__controls { width: min(100cqw, calc((100cqh - 44px) * 16 / 9)); }
}
/* Wide, shallow windows keep the large headline on one line to give the film more height. */
@media (min-width: 1200px) and (min-height: 651px) and (max-height: 850px) {
  .ai-workflows__title h2 { font-size: clamp(48px, 4.15vw, 62px); }
  .ai-workflows__title br { display: none; }
  .ai-workflows__title em::before { content: ' '; }
  .ai-workflows.is-enhanced .ai-workflows__item > .ab-compare,
  .ai-workflows.is-enhanced .ai-workflows__item > .workflow-player { align-items: center; }
}
@media (min-width: 1025px) {
  .home-v2 .home-pagination { right: calc(max(clamp(18px, 3.3vw, 64px), env(safe-area-inset-right)) + 9 * clamp(68px, 5.2vw, 100px) + 58px); }
}
@media (orientation: portrait) and (max-width: 900px) {
  .home-page .deck-card--comparison .comparison-copy h1 { font-size: clamp(24px, 7vw, 38px); line-height: .98; }
  .home-page .deck-card--comparison .comparison-copy p,
  .home-page .deck-card--comparison .comparison-copy > span { font-size: 9px; }
}

/* Source: assets/dlss-detail.css */
/* The new comparison keeps the established home layout and a Chinese-led hierarchy. */
.project-deck.is-strip .comparison-frame > .video-loading-ui { display: none; }
.home-page .deck-card--detail .comparison-copy {
  left: 50%;
  width: min(86%, 860px);
}
.home-page .deck-card--detail .comparison-copy h1 {
  font-family: -apple-system, BlinkMacSystemFont, "PingFang SC", "Microsoft YaHei", sans-serif;
  font-size: clamp(36px, 4.7vw, 76px);
  font-weight: 500;
  line-height: 1.2;
  letter-spacing: .025em;
}
.home-page .detail-copy .comparison-tool-line {
  margin-bottom: 21px;
  font-size: clamp(10px, .88vw, 14px);
  letter-spacing: .12em;
}
.home-page .detail-copy p.detail-copy__english {
  margin: 13px 0 0;
  font-size: clamp(13px, 1.2vw, 18px);
  letter-spacing: .055em;
  line-height: 1.4;
  color: #eee7df;
}
.home-page .detail-copy p.detail-copy__process {
  margin: 27px 0 0;
  font-size: clamp(15px, 1.25vw, 20px);
  line-height: 1.4;
  letter-spacing: .05em;
}
.detail-copy__process b { padding-inline: 12px; font-weight: 400; opacity: .6; }
.detail-copy__process strong { font-weight: 500; }
.detail-copy__process i { padding-inline: 5px; font-style: normal; color: #e5be88; }
.detail-copy time { display: block; margin-top: 15px; font-size: 12px; letter-spacing: .04em; }
.home-page .deck-card--detail .detail-copy em { margin-top: 24px; font-size: 14px; letter-spacing: .04em; }
.detail-copy em small { margin-left: 9px; font-size: 10px; opacity: .75; letter-spacing: .02em; }
.deck-card--detail .comparison-label { gap: 7px; font-size: 11px; letter-spacing: .03em; }
.deck-card--detail .comparison-label small { font-size: 9px; letter-spacing: .06em; opacity: .65; }

/* Ten thumbnails; the project labels still run from -1 through 8. */
@media (min-width: 1025px) {
  .home-v2 .home-pagination { right: calc(max(clamp(18px, 3.3vw, 64px), env(safe-area-inset-right)) + 10 * clamp(68px, 5.2vw, 100px) + 63px); }
}

@media (orientation: portrait) and (max-width: 900px) {
  .home-page .deck-card--detail .comparison-frame {
    inset: 96px max(8px, env(safe-area-inset-right)) 142px max(8px, env(safe-area-inset-left));
    height: auto;
    aspect-ratio: auto;
    transform: none;
    background: #07080a;
  }
  .deck-card--detail .comparison-video--before,
  .deck-card--detail .comparison-after { top: 0; height: 52%; }
  .deck-card--detail .comparison-video { object-fit: contain; }
  .deck-card--detail .comparison-after .comparison-video { height: 100%; }
  .deck-card--detail .comparison-divider { bottom: 48%; }
  .deck-card--detail .comparison-handle { top: 26%; }
  .home-page .deck-card--detail .comparison-copy {
    top: 57%;
    width: 96%;
    transform: translate(-50%, 0);
  }
  .home-page .deck-card--detail .comparison-copy h1 { font-size: clamp(27px, 7vw, 45px); line-height: 1.25; }
  .home-page .detail-copy .comparison-tool-line { margin-bottom: 12px; font-size: 8px; letter-spacing: .06em; }
  .home-page .detail-copy p.detail-copy__english { margin-top: 8px; font-size: 11px; }
  .home-page .detail-copy p.detail-copy__process { margin-top: 16px; font-size: 14px; }
  .detail-copy time { margin-top: 10px; font-size: 10px; }
  .home-page .deck-card--detail .detail-copy em { margin-top: 16px; padding: 8px 13px; font-size: 12px; }
  .detail-copy em small { font-size: 8px; }
  .home-page .deck-card--detail .comparison-stage.is-interacting .comparison-copy { transform: translate(-50%, 0) scale(.97); }
  .project-deck.is-strip .deck-card--detail .comparison-frame { inset: 0; height: 100%; }
  .project-deck.is-strip .deck-card--detail .comparison-video--before,
  .project-deck.is-strip .deck-card--detail .comparison-after { height: 100%; }
  .project-deck.is-strip .deck-card--detail .comparison-video { object-fit: cover; }
}
@media (orientation: portrait) and (max-height: 740px) {
  .home-page .deck-card--detail .comparison-frame { top: 82px; bottom: 130px; }
  .home-page .deck-card--detail .comparison-copy { top: 51%; }
  .home-page .detail-copy p.detail-copy__process { margin-top: 10px; }
  .home-page .deck-card--detail .detail-copy em { margin-top: 10px; }
}

/* Source: assets/cat-nest-home.css */
/* Real game screens pinned over the fully populated Cat Station. */
.deck-card--cat-nest { background:#eeb8cb; }
.deck-card--cat-nest .deck-media.cn-home-station { object-position:50% 54%; }
.deck-card--cat-nest::after { content:""; position:absolute; z-index:1; inset:0; pointer-events:none; background:linear-gradient(180deg,#3d23331a,transparent 24%,transparent 78%,#44303626); }
.cn-home-photos { position:absolute; z-index:3; right:6%; top:17%; width:min(51%,720px); height:64%; display:block; color:#4e493c; text-decoration:none; }
.cn-home-photo { position:absolute; width:min(53%,35dvh); margin:0; padding:9px 9px 0; background:#fffdf2; border:1px solid #ddd4bc; box-shadow:0 2px 3px #47342c38,3px 20px 27px #35232d40; transform-origin:50% 12%; }
.cn-home-photo img { display:block; width:100%; height:auto; border-radius:0; }
.cn-home-photo figcaption { display:grid; grid-template-columns:minmax(0,1fr) auto; align-items:center; gap:6px; padding:13px 2px 14px; font-family:Arial,"PingFang SC",sans-serif; font-size:clamp(10px,1vw,14px); font-weight:500; line-height:1.3; letter-spacing:.02em; }
.cn-home-screen { display:block; }
.cn-home-caption { min-width:0; }
.cn-home-caption small { display:block; margin-top:5px; color:#86806b; font-size:.7em; font-weight:400; }
.cn-home-play { display:inline-flex; min-height:44px; align-items:center; justify-content:center; gap:4px; padding:7px 9px; border:1px solid #35513d; border-radius:3px; background:#35513d; color:#fffdf2; font-size:clamp(9px,.8vw,12px); line-height:1.3; white-space:nowrap; text-decoration:none; transition:background .2s; }
.cn-home-play--restaurant { border-color:#a65335; background:#a65335; }
.cn-home-play:hover { background:#233d2b; }
.cn-home-play--restaurant:hover { background:#863b23; }
.cn-home-screen:focus-visible,.cn-home-play:focus-visible { outline:3px solid #a65335; outline-offset:4px; }
.cn-home-photo::before { content:""; position:absolute; z-index:2; top:0; left:50%; width:16px; height:16px; border-radius:50%; background:radial-gradient(circle at 35% 28%,#ffb7a5 0 8%,#d45c48 30%,#9a312e 78%); box-shadow:1px 3px 2px #49362c88; transform:translate(-50%,-35%); }
.cn-home-photo::after { content:""; position:absolute; top:9px; left:50%; width:2px; height:13px; z-index:1; background:linear-gradient(90deg,#b2a69a,#f5ecdf); transform:rotate(-25deg); box-shadow:2px 2px 1px #47342c55; }
.cn-home-photo--nest { left:0; top:20%; transform:rotate(-7deg); }
.cn-home-photo--restaurant { right:0; top:0; transform:rotate(6deg); }
.home-page .deck-card--cat-nest>.deck-project-link--meta { z-index:4; left:32%; top:47%; width:min(25%,440px); max-width:none; align-items:flex-start; gap:15px; padding:34px 26px 28px; border:1px solid #d5c5a8; border-radius:2px; background:#fff7e8ed; color:#314638; text-align:left; text-shadow:none; transform:translate(-50%,-50%) rotate(-3deg); box-shadow:3px 12px 25px #47342c30; }
.deck-card--cat-nest>.deck-project-link::before { content:""; position:absolute; top:0; left:26%; width:13px; height:13px; border-radius:50%; background:radial-gradient(circle at 30% 25%,#f5d99d,#b58a45 65%,#80602f); box-shadow:1px 3px 3px #4f3b2a66; transform:translateY(-30%); }
.home-page .deck-card--cat-nest .project-tool-line { font-size:clamp(7px,.72vw,11px); letter-spacing:.08em; line-height:1.6; white-space:normal; }
.home-page .deck-card--cat-nest .deck-project-title { font-family:Georgia,"Times New Roman",serif; font-size:clamp(54px,6.6vw,106px); line-height:.88; font-weight:400; font-style:italic; letter-spacing:-.065em; color:#a65335; }
.deck-card--cat-nest .deck-project-category { display:block; margin-top:8px; font-size:clamp(17px,1.7vw,26px); font-weight:500; letter-spacing:-.025em; line-height:1.4; white-space:normal; }
.deck-card--cat-nest .deck-project-category small { display:block; margin-top:9px; font-size:clamp(8px,.72vw,11px); font-weight:400; letter-spacing:.025em; line-height:1.7; }
.home-page .deck-card--cat-nest .deck-project-date { margin-top:4px; font-size:clamp(7px,.66vw,10px); letter-spacing:.035em; line-height:1.6; white-space:normal; }
.home-page .home-stage:has(.deck-card--cat-nest.is-active)>.stage-step { mix-blend-mode:normal; color:#314638; }
.home-page .home-stage:has(.deck-card--cat-nest.is-active)>.stage-step span { display:grid; place-items:center; width:44px; height:44px; border:1px solid #dac7a7; border-radius:50%; background:#fff7e8ed; box-shadow:0 3px 10px #47342c26; font-size:26px; }
.project-deck.is-strip .cn-home-photos { left:8%; right:auto; top:10%; width:84%; height:45%; pointer-events:none; }
.project-deck.is-strip .cn-home-photo { width:51%; padding:4px 4px 0; }
.project-deck.is-strip .cn-home-photo figcaption { display:block; font-size:7px; padding:6px 0; }
.project-deck.is-strip .cn-home-caption small,.project-deck.is-strip .cn-home-play { display:none; }
.project-deck.is-strip .cn-home-photo::before { width:8px; height:8px; }
.project-deck.is-strip .cn-home-photo::after { display:none; }
.home-page .project-deck.is-strip .deck-card--cat-nest>.deck-project-link--meta { left:50%; top:69%; width:85%; padding:16px 14px; gap:7px; transform:translate(-50%,-50%) rotate(-2deg); }
.home-page .project-deck.is-strip .deck-card--cat-nest .deck-project-title { font-size:44px; }
.project-deck.is-strip .deck-card--cat-nest .deck-project-category { font-size:14px; }
.project-deck.is-strip .deck-card--cat-nest .deck-project-category small { font-size:7px; }
@media(max-width:760px) {
  .deck-card--cat-nest .deck-media.cn-home-station { object-fit:contain; object-position:50% 100%; }
  .cn-home-photos { left:6%; right:auto; top:13%; width:88%; height:40%; }
  .cn-home-photo { width:47%; padding:6px 6px 0; }
  .cn-home-photo figcaption { padding:9px 1px 10px; font-size:10px; }
  .cn-home-caption small { font-size:7px; }
  .cn-home-play { font-size:9px; padding:6px; }
  .cn-home-photo::before { width:12px; height:12px; }
  .cn-home-photo--nest { top:7%; transform:rotate(-4deg); }
  .cn-home-photo--restaurant { transform:rotate(4deg); }
  .home-page .deck-card--cat-nest>.deck-project-link--meta { left:50%; top:63%; width:76%; padding:21px 20px 17px; align-items:center; text-align:center; gap:9px; transform:translate(-50%,-50%) rotate(-2deg); }
  .home-page .deck-card--cat-nest .deck-project-title { font-size:50px; line-height:.84; }
  .deck-card--cat-nest .deck-project-title br { display:none; }
  .home-page .deck-card--cat-nest .project-tool-line { font-size:7px; }
  .deck-card--cat-nest .deck-project-category { margin-top:3px; font-size:18px; }
  .deck-card--cat-nest .deck-project-category small { margin-top:5px; font-size:8px; }
  .home-page .deck-card--cat-nest .deck-project-date { font-size:7px; }
}
@media(max-width:760px) and (max-height:740px) { .cn-home-photos { top:12%; } .cn-home-photo { width:min(47%,27dvh); } .home-page .deck-card--cat-nest>.deck-project-link--meta { top:62%; padding:17px 16px 12px; gap:7px; } .home-page .deck-card--cat-nest .deck-project-title { font-size:42px; } }
@media(prefers-reduced-motion:reduce) { .cn-home-photo,.cn-home-play,.deck-card--cat-nest>.deck-project-link { transition:none; } }

/* Source: assets/tvc-transition.css */
/* Shared artwork: homepage → TVC, Alone, or Healing Wings. */
@view-transition { navigation: auto; }

html.tvc-transition-out [data-shared-artwork],
html.tvc-transition-in [data-shared-artwork] { view-transition-name: tvc-artwork; }

/* Capture the artwork, not padding: both snapshots keep the exact same ratio. */
.tvc-page .tvc-banner > img { padding: 0; margin: 24px auto; }
.film-page .project-dialog:is([data-project="alone"], [data-project="healing"]) #dialog-hero {
  width: auto;
  max-width: 100%;
  height: auto;
  margin-inline: auto;
}
.project-image-link { text-decoration: none; }
.project-deck.is-strip .project-image-link { pointer-events: none; }

::view-transition { background: #000; }
::view-transition-group(tvc-artwork) {
  z-index: 1;
  animation-duration: 1050ms;
  animation-timing-function: cubic-bezier(.22, .72, .16, 1);
}
::view-transition-image-pair(tvc-artwork) { isolation: isolate; }
::view-transition-old(tvc-artwork),
::view-transition-new(tvc-artwork) {
  height: 100%;
  width: 100%;
  object-fit: cover;
  mix-blend-mode: normal;
  animation: none;
}
/* The same cached image stays solid; don't cross-fade two misaligned copies. */
::view-transition-old(tvc-artwork) { opacity: 0; }
::view-transition-new(tvc-artwork) { opacity: 1; }
::view-transition-old(root) { animation: tvc-page-out 240ms ease-out both; }
::view-transition-new(root) { animation: tvc-page-in 740ms 180ms cubic-bezier(.2, .6, .2, 1) both; }
@keyframes tvc-page-out { to { opacity: 0; } }
@keyframes tvc-page-in { from { opacity: 0; } to { opacity: 1; } }

/* Geometry fallback, installed in the head before the destination can flash. */
html.tvc-fallback-pending .tvc-banner > img,
html.tvc-fallback-pending .film-page #dialog-hero { visibility: hidden; }
/* Modal pseudo-elements live in the top layer, above the dialog backdrop. */
html.tvc-fallback-pending::before,
html.tvc-fallback-film .project-dialog[open]::before {
  content: "";
  position: fixed;
  inset: 0;
  z-index: 2147483645;
  background: #000;
  pointer-events: none;
}
html.tvc-fallback-pending::after,
html.tvc-fallback-film .project-dialog[open]::after {
  content: "";
  position: fixed;
  left: var(--tvc-from-x);
  top: var(--tvc-from-y);
  width: var(--tvc-from-width);
  height: var(--tvc-from-height);
  z-index: 2147483646;
  background: var(--tvc-artwork-url) center / cover no-repeat;
  transform-origin: 0 0;
  pointer-events: none;
}
html.tvc-fallback-film:has(.project-dialog[open])::after { display: none; }
html.tvc-fallback-running::before,
html.tvc-fallback-running .project-dialog[open]::before { animation: tvc-page-out 740ms 180ms ease both; }
html.tvc-fallback-running::after,
html.tvc-fallback-running .project-dialog[open]::after { animation: tvc-artwork-move 1050ms cubic-bezier(.22, .72, .16, 1) both; }
@keyframes tvc-artwork-move {
  from { left: var(--tvc-from-x); top: var(--tvc-from-y); width: var(--tvc-from-width); height: var(--tvc-from-height); }
  to { left: var(--tvc-to-x); top: var(--tvc-to-y); width: var(--tvc-to-width); height: var(--tvc-to-height); }
}

@media (prefers-reduced-motion: reduce) {
  @view-transition { navigation: none; }
  ::view-transition-group(*),
  ::view-transition-old(*),
  ::view-transition-new(*) { animation: none !important; }
  html.tvc-fallback-pending .tvc-banner > img,
  html.tvc-fallback-pending .film-page #dialog-hero { visibility: visible; }
  html.tvc-fallback-pending::before,
  html.tvc-fallback-pending::after,
  html.tvc-fallback-film .project-dialog[open]::before,
  html.tvc-fallback-film .project-dialog[open]::after { display: none; }
}

/* Source: assets/xuantian-brand.css */
/* Supplied project artwork, kept in its original colors and transparent PNG.
   Use the full emblem at display sizes; navigation and prose stay typographic. */
.xj-brand-art {
  display: block;
  max-width: 100%;
  height: auto;
  aspect-ratio: 1672 / 941;
  object-fit: contain;
}

.xj-page .xj-hero { padding-top: max(150px, 18svh); }
/* A smaller title stays on the left; the hero's bottom-aligned content keeps
   the controls in place while naturally lowering the emblem. */
.xj-page .xj-hero__title { width: min(400px, 38vw, 44svh); margin: 12px 0 20px; }
.xj-hero__title .xj-brand-art { width: 100%; filter: drop-shadow(0 6px 16px rgba(0, 0, 0, .3)); }
.xj-page .xj-hero__title small {
  align-self: center;
  margin-top: 2px;
  font-size: clamp(14px, 1.1vw, 18px);
  letter-spacing: .3em;
}
.xj-page .xj-end__brand { width: min(280px, 66vw); margin: 0 0 28px; }
.xj-page .xj-end h2 { width: 100%; max-width: none; margin-inline: auto; text-align: center; }
/* Center the six Chinese characters, not the full-width punctuation box. */
.xj-end__title-line { position: relative; display: inline-block; white-space: nowrap; }
.xj-end__period { position: absolute; left: 100%; top: 0; }

/* Keep the existing project link, below the character's eyes, with the support
   credit above and English metadata below, without adding a box or plate. */
.home-page .deck-card > .deck-project-link--xuantian { top: 60%; }
.home-page .deck-project-title--xuantian { width: min(560px, 58vw, 64svh); max-width: 100%; gap: 4px; }
.home-page .deck-project-title--xuantian .xj-brand-art { width: 75%; }
.home-page .deck-project-title--xuantian small { font-size: clamp(12px, 1.1vw, 17px); letter-spacing: .28em; }

.content-page #xuantian .xj-feature-title { width: min(440px, 100%); margin: 12px 0 20px; }
.xj-feature-title .xj-brand-art { width: 100%; }
.content-page #xuantian .xj-feature-title small {
  display: block;
  margin-top: 2px;
  color: var(--muted);
  font: 400 12px/1.6 Arial, Helvetica, sans-serif;
  letter-spacing: .22em;
  text-align: center;
}

@media (max-width: 700px) {
  .xj-page .xj-hero { padding-top: max(184px, 24svh); }
  .xj-page .xj-hero__title { width: min(280px, 78%); margin-top: 10px; }
  .xj-page .xj-hero__title small { margin-top: 4px; font-size: 14px; letter-spacing: .25em; }
  .home-page .deck-project-title--xuantian { width: min(72vw, 58svh); }
  .content-page #xuantian .xj-feature-title { width: min(360px, 100%); }
}

@media (max-height: 650px) and (orientation: landscape) {
  .xj-page .xj-hero__title { width: min(340px, 38vw, 52svh); }
  .home-page .deck-card > .deck-project-link--xuantian { top: 54%; }
  .home-page .deck-project-title--xuantian { width: min(440px, 54vw, 62svh); }
}

/* Source: assets/icp-footer.css */
/* Public filing details are readable in the initial HTML, including without JS. */
.site-registration {
  padding: 0 max(18px, env(safe-area-inset-right)) max(18px, env(safe-area-inset-bottom)) max(18px, env(safe-area-inset-left));
  color: inherit;
  text-align: center;
  font: 11px/1.5 Arial, "PingFang SC", "Microsoft YaHei", sans-serif;
  letter-spacing: .02em;
}
.site-registration a {
  color: inherit;
  text-decoration: none;
  white-space: nowrap;
  opacity: .7;
}
.site-registration a:is(:hover, :focus-visible) {
  text-decoration: underline;
  text-underline-offset: 3px;
  opacity: 1;
}
/* The cinematic home fills the viewport; its registration stays below the dock. */
.home-page .site-registration {
  position: fixed;
  z-index: 12;
  inset: auto 0 max(0px, calc(env(safe-area-inset-bottom) - 2px));
  padding: 0;
  line-height: 12px;
  pointer-events: none;
}
.home-page .site-registration a {
  display: inline-block;
  padding-inline: 5px;
  color: #fff;
  background: #0009;
  border-radius: 2px;
  text-shadow: 0 1px 2px #000;
  pointer-events: auto;
}

/* Source: assets/media-access.css */
/* Keep slow media from covering the artwork or blocking navigation. */
.video-loading-ui.is-progressive {
  inset: auto 16px 16px;
  display: flex;
  justify-content: center;
  align-items: center;
  flex-wrap: wrap;
  gap: 12px;
  padding: 10px 14px;
  width: fit-content;
  max-width: calc(100% - 32px);
  margin-inline: auto;
  background: rgba(12, 14, 17, .78);
  border: 1px solid rgba(255, 255, 255, .18);
  border-radius: 4px;
  pointer-events: none;
}
.video-loading-ui.is-progressive .video-loading-meter { width: auto; }
.video-loading-ui.is-progressive[hidden] { display: none; }
.video-loading-ui.is-progressive .video-loading-meta { margin: 0; font-size: 12px; line-height: 1.5; letter-spacing: .025em; }
.video-loading-ui.is-progressive .video-loading-meta output,
.video-loading-ui.is-progressive .video-loading-track { display: none; }
.video-loading-ui.is-progressive .video-loading-retry { pointer-events: auto; min-height: 44px; }
.film-player { position: relative; min-width: 0; }
.film-player__picture { position: relative; background: #050505; }
.film-player video { display: block; width: 100%; height: auto; aspect-ratio: 16 / 9; object-fit: contain; }
.film-player__play {
  position: absolute; inset: 0; margin: auto; width: fit-content; height: 50px;
  padding: 0 26px; border-radius: 3px; border: 1px solid rgba(255, 255, 255, .75);
  background: rgba(10, 10, 10, .7); color: #fff; cursor: pointer; font: inherit;
}
.film-player__play:hover, .film-player__play:focus-visible { background: #fff; color: #111; }
.film-player__play[hidden] { display: none; }
.film-player__status { display: block; min-height: 1.5em; font-size: 12px; color: var(--muted, #aaa); margin-top: 8px; }
.film-player__caption { display: flex; justify-content: space-between; gap: 16px; align-items: center; margin: 12px 0; font-size: 13px; }
.film-player__caption a { color: inherit; text-underline-offset: 5px; }
.image-study > .film-player { margin-bottom: clamp(24px, 4vw, 64px); }
.project-feature > .film-player { align-self: center; }
.project-feature--reverse > .film-player { order: 2; }
.viewing-link-group { display: inline-flex; flex-wrap: wrap; align-items: center; gap: 8px 12px; min-width: 0; max-width: 100%; }
.viewing-link-tools { display: inline-flex; flex-wrap: wrap; align-items: center; gap: 6px 10px; min-width: 0; max-width: 100%; }
.viewing-link-copy { min-height: 44px; padding: 8px 10px; border: 1px solid var(--line, #444); background: transparent; color: inherit; font: inherit; font-size: 12px; cursor: pointer; }
.viewing-link-copy:hover, .viewing-link-copy:focus-visible { border-color: currentColor; }
.viewing-link-status { flex-basis: 100%; font-size: 12px; line-height: 1.5; color: var(--muted, #aaa); }
.viewing-link-url { box-sizing: border-box; width: min(100%, 380px); min-width: 0; padding: 10px; border: 1px solid #666; background: #111; color: #fff; font-size: 12px; }
.viewing-link-status[hidden], .viewing-link-url[hidden] { display: none; }
.xj-viewing__lounge .xj-viewing__platforms .xj-viewing__options { align-items: start; }
.xj-viewing__options > .viewing-link-group { flex-direction: column; align-items: stretch; gap: 6px; }
.xj-viewing__options > .viewing-link-group > .xj-viewing__choice { width: 100%; }
.tvc-services > .viewing-link-group { margin-top: 20px; }
.tvc-services > .viewing-link-group > a { display: inline-flex; min-height: 44px; align-items: center; font-size: 13px; text-decoration: none; }
@media (max-width: 900px) { .project-feature--reverse > .film-player { order: 0; } }
.home-page .detail-quality-link {
  position: absolute; z-index: 13; left: auto; top: auto; right: 22px; bottom: 96px;
  width: auto; max-width: none; transform: none; padding: 8px 12px;
  font-size: 11px; color: #fff; text-underline-offset: 4px;
  text-shadow: 0 1px 8px #000;
}
.project-deck.is-strip .detail-quality-link { display: none; }
@media (orientation: portrait) and (max-width: 900px) {
  .home-page .detail-quality-link { bottom: auto; top: 48%; right: 12px; font-size: 10px; }
  .deck-card--detail .video-loading-ui.is-progressive { bottom: auto; top: 36%; }
}