@font-face {
  font-family: "Flex Sans GB";
  src: url("assets/public/f2b8cb830cac65ecd54f4db2.otf") format("opentype");
  font-weight: 300;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "Flex Sans GB";
  src: url("assets/public/f1c1c2bab1a8095fc11288f6.otf") format("opentype");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "Flex Sans GB Regular";
  src: url("assets/public/3f50ac97a8db8685c8a743e7.otf") format("opentype");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "Flex Sans GB";
  src: url("assets/public/d78c6adfccfd2adbcadae0af.otf") format("opentype");
  font-weight: 500;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "Flex Sans GB";
  src: url("assets/public/154926fc525bc340ffc5dfb5.otf") format("opentype");
  font-weight: 600;
  font-style: normal;
  font-display: swap;
}

:root {
  --hero-bg: #070509;
  --paper: #fff;
  --ink: #111;
  --muted: #aaa;
  --chapter-bg: #fff;
  --chapter-fg: #111;
  --transition-time: 240ms;
  --edge-x: clamp(30px, 3.125vw, 64px);
  --edge-y: clamp(28px, 4.65vh, 52px);
  font-family: "Flex Sans GB", sans-serif;
  color: var(--ink);
  background: var(--hero-bg);
  font-synthesis: none;
}

* { box-sizing: border-box; }

html {
  scroll-behavior: smooth;
  scroll-snap-type: y mandatory;
}

body {
  min-width: 320px;
  margin: 0;
  overflow-x: hidden;
  background: var(--hero-bg);
  font-family: "Flex Sans GB", sans-serif;
  font-weight: 400;
}

button { color: inherit; font: inherit; }

/* 原有沉浸式封面。 */
.cover {
  position: relative;
  display: grid;
  place-items: center;
  width: 100%;
  height: 100vh;
  height: 100svh;
  isolation: isolate;
  overflow: hidden;
  background: var(--hero-bg);
  scroll-snap-align: start;
  scroll-snap-stop: always;
}

.cover-artwork {
  --hero-enter-x: 46%;
  --hero-enter-y: 50%;
  --hero-enter-size: clamp(240px, 30vw, 440px);
  --hero-enter-label-offset: clamp(14px, 1.1vw, 24px);
  --hero-core-x: 42%;
  position: relative;
  width: min(96vw, calc(96svh * 3840 / 2399));
  aspect-ratio: 3840 / 2399;
}

.cover-image,
.cover-title-image {
  position: absolute;
  inset: 0;
  display: block;
  width: 100%;
  height: 100%;
  object-fit: contain;
  pointer-events: none;
  user-select: none;
}

.cover-image {
  z-index: 0;
  -webkit-mask-image: linear-gradient(to right, transparent, #000 9%, #000 91%, transparent), linear-gradient(to bottom, transparent, #000 10%, #000 90%, transparent);
  -webkit-mask-composite: source-in;
  mask-image: linear-gradient(to right, transparent, #000 9%, #000 91%, transparent), linear-gradient(to bottom, transparent, #000 10%, #000 90%, transparent);
  mask-composite: intersect;
}
.cover-title-image { z-index: 2; }

.hero-title-stage {
  --hero-title-width: 100%;
  --hero-title-x: 50%;
  --hero-title-y: 50%;
  --hero-title-scale: 1;
  --hero-title-origin-x: 50%;
  --hero-title-origin-y: 50%;
  position: absolute;
  left: var(--hero-title-x);
  top: var(--hero-title-y);
  z-index: 2;
  display: none;
  width: var(--hero-title-width);
  aspect-ratio: 3840 / 2399;
  transform: translate(-50%, -50%) scale(var(--hero-title-scale));
  pointer-events: none;
}

html[data-hero-title="png"] .cover-title-image { display: none; }
html[data-hero-title="png"] .hero-title-stage { display: block; }

.hero-title-layer {
  position: absolute;
  inset: 0;
  display: block;
  width: 100%;
  height: 100%;
  object-fit: contain;
  user-select: none;
  transform-origin: var(--hero-title-origin-x) var(--hero-title-origin-y);
}

.hero-title-layer--english { --hero-title-angle: -6deg; --hero-title-start-scale: .96; --hero-title-offset: 8px; --hero-title-delay: .60s; --hero-title-idle-angle: -1.2deg; --hero-title-idle-duration: 10s; }
.hero-title-layer--chinese { --hero-title-angle: 4.5deg; --hero-title-start-scale: .96; --hero-title-offset: 10px; --hero-title-delay: .78s; --hero-title-idle-angle: 1deg; --hero-title-idle-duration: 12s; }
.hero-title-layer--metadata { --hero-title-angle: 6deg; --hero-title-start-scale: .98; --hero-title-offset: 6px; --hero-title-delay: .96s; --hero-title-idle-angle: 1.35deg; --hero-title-idle-duration: 14s; }

html[data-hero-title-motion="intro"] .hero-title-layer { opacity: 0; }
html[data-hero-title-motion="intro"] .hero-title-stage.is-ready .hero-title-layer {
  animation: hero-title-settle 1600ms cubic-bezier(.16, 1, .3, 1) var(--hero-title-delay) both,
    hero-title-idle var(--hero-title-idle-duration) ease-in-out 2600ms infinite;
}
html[data-hero-title-motion="intro"] .hero-is-offscreen .hero-title-layer,
html[data-hero-title-motion="intro"] .hero-is-exiting .hero-title-layer { animation-play-state: running, paused; }
@keyframes hero-title-idle {
  0%, 100% { transform: rotate(0deg); }
  25% { transform: rotate(var(--hero-title-idle-angle)); }
  75% { transform: rotate(calc(-1 * var(--hero-title-idle-angle))); }
}

@keyframes hero-title-settle {
  from { opacity: 0; transform: translateY(var(--hero-title-offset)) rotate(var(--hero-title-angle)) scale(var(--hero-title-start-scale)); }
  to { opacity: 1; transform: rotate(0deg) scale(1); }
}

.hero-background-exit,
.hero-title-exit,
.hero-core-exit,
.hero-cta-exit,
.hero-particle-exit {
  position: absolute;
  inset: 0;
  pointer-events: none;
}

.hero-background-exit { z-index: 0; }
.hero-title-exit { transform-origin: var(--hero-title-origin-x) var(--hero-title-origin-y); }
.hero-core-exit { z-index: 1; transform-origin: var(--hero-core-x) var(--hero-enter-y); }
.hero-cta-exit { z-index: 3; }
.hero-cta-exit .enter-button { pointer-events: auto; }
.hero-particle-exit { z-index: 1; }
.hero-core-pulse {
  position: absolute;
  left: var(--hero-core-x);
  top: var(--hero-enter-y);
  width: 24%;
  aspect-ratio: 1;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(255, 255, 255, .7), rgba(255, 255, 255, .18) 42%, rgba(255, 255, 255, 0) 72%);
  opacity: 0;
  transform: translate(-50%, -50%);
}

html[data-hero-title-motion="intro"] .cover { --hero-background-intro-scale: .90; }
html[data-hero-title-motion="intro"] .cover-image,
html[data-hero-title-motion="intro"] .particle-field,
html[data-hero-title-motion="intro"] .hero-enter-label { opacity: 0; animation: none; }

html[data-hero-title-motion="intro"] .hero-intro-ready .cover-image {
  animation: hero-background-reveal 1800ms cubic-bezier(.16, 1, .3, 1) 80ms both,
    hero-background-breathe 9s ease-in-out 2600ms infinite;
}
html[data-hero-title-motion="intro"] .hero-intro-ready .hero-core-pulse {
  animation: hero-core-activate 1150ms cubic-bezier(.16, 1, .3, 1) 450ms both;
}
html[data-hero-title-motion="intro"] .particle-field {
  animation: hero-particles-reveal var(--hero-particle-reveal-duration, 2560ms) ease-in-out 0ms both;
}
html[data-hero-title-motion="intro"] .hero-intro-ready .particle-field {
  animation: hero-particles-reveal var(--hero-particle-reveal-duration, 2560ms) ease-in-out 0ms both,
    hero-background-breathe 9s ease-in-out 2600ms infinite;
}
html[data-hero-title-motion="intro"] .hero-intro-ready .hero-enter-label {
  animation: hero-cta-reveal 700ms cubic-bezier(.16, 1, .3, 1) 2700ms both,
    hero-cta-breathe 3.6s ease-in-out 3400ms infinite;
}
html[data-hero-title-motion="intro"] .hero-is-offscreen .cover-image,
html[data-hero-title-motion="intro"] .hero-is-offscreen .particle-field,
html[data-hero-title-motion="intro"] .hero-is-offscreen .hero-enter-label,
html[data-hero-title-motion="intro"] .hero-is-exiting .cover-image,
html[data-hero-title-motion="intro"] .hero-is-exiting .particle-field,
html[data-hero-title-motion="intro"] .hero-is-exiting .hero-enter-label {
  animation-play-state: running, paused;
}
@keyframes hero-background-reveal {
  from { opacity: 0; transform: scale(var(--hero-background-intro-scale)); }
  to { opacity: 1; transform: scale(1); }
}
@keyframes hero-background-breathe {
  0%, 100% { transform: scale(1); }
  50% { transform: scale(1.025); }
}
@keyframes hero-core-activate {
  0% { opacity: 0; transform: translate(-50%, -50%) scale(.92); }
  45% { opacity: .22; transform: translate(-50%, -50%) scale(1.06); }
  100% { opacity: 0; transform: translate(-50%, -50%) scale(1); }
}
@keyframes hero-particles-reveal {
  0% { opacity: 0; }
  15% { opacity: 0; }
  40% { opacity: .15; }
  70% { opacity: .5; }
  100% { opacity: .9; }
}
@keyframes hero-cta-reveal {
  from { opacity: 0; }
  to { opacity: .88; }
}
@keyframes hero-cta-breathe { 0%, 100% { opacity: .88; } 50% { opacity: .32; } }

@media (max-width: 767px) {
  .cover-artwork {
    --hero-enter-size: min(64vw, 320px);
  }
  .hero-title-stage {
    --hero-title-width: 100%;
    --hero-title-x: 50%;
    --hero-title-y: 50%;
    --hero-title-scale: 1;
  }
  html[data-hero-title-motion="intro"] .cover { --hero-background-intro-scale: .92; }
  .enter-button { font-size: 10.5px; }
}

@media (prefers-reduced-motion: reduce) {
  html[data-hero-title-motion="intro"] .hero-title-layer {
    opacity: 1;
    transform: none;
    animation: none !important;
  }
  html[data-hero-title-motion="intro"] .cover-image,
  html[data-hero-title-motion="intro"] .particle-field,
  html[data-hero-title-motion="intro"] .hero-enter-label {
    animation: none !important;
    transform: none;
    opacity: 1;
  }
  html[data-hero-title-motion="intro"] .hero-enter-label {
    transform: translate(-50%, -50%);
    opacity: .55;
  }
  html[data-hero-title-motion="intro"] .hero-core-pulse { animation: none !important; opacity: 0; }
}

.particle-field {
  position: absolute;
  inset: 0;
  z-index: 1;
  width: 100%;
  height: 100%;
  opacity: .9;
  mix-blend-mode: screen;
  pointer-events: none;
}

.enter-button {
  position: absolute;
  left: var(--hero-enter-x);
  top: var(--hero-enter-y);
  z-index: 3;
  display: block;
  width: var(--hero-enter-size);
  aspect-ratio: 1;
  min-height: 44px;
  padding: 0;
  border: 0;
  border-radius: 50%;
  color: #000;
  background: transparent;
  cursor: pointer;
  font-family: "Flex Sans GB", sans-serif;
  font-size: clamp(10.5px, 1.1vw, 20px);
  font-weight: 300;
  line-height: 1.12;
  letter-spacing: .18em;
  text-align: center;
  transform: translate(-50%, -50%);
  touch-action: pan-y;
  -webkit-tap-highlight-color: transparent;
}

.hero-enter-label {
  position: absolute;
  left: 50%;
  top: calc(50% + var(--hero-enter-label-offset));
  width: max-content;
  opacity: .88;
  transform: translate(-50%, -50%);
  transition: opacity 320ms ease, text-shadow 320ms ease;
  pointer-events: none;
}
.hero-enter-arrow {
  position: absolute;
  left: 50%;
  bottom: calc(100% + .8em);
  letter-spacing: 0;
  transform: translateX(-50%);
  animation: hero-enter-arrow-hop 3.6s cubic-bezier(.45, 0, .25, 1) infinite;
}
.hero-enter-chinese {
  position: absolute;
  left: 50%;
  top: calc(100% + .6em);
  width: max-content;
  transform: translateX(-50%);
}
html[data-hero-title-motion="intro"] .hero-enter-arrow { animation: none; }
html[data-hero-title-motion="intro"] .hero-intro-ready .hero-enter-arrow {
  animation: hero-enter-arrow-hop 3.6s cubic-bezier(.45, 0, .25, 1) 3400ms infinite;
}
.hero-is-offscreen .hero-enter-arrow,
.hero-is-exiting .hero-enter-arrow { animation-play-state: paused !important; }
@keyframes hero-enter-arrow-hop {
  0%, 50%, 100% { transform: translate(-50%, 0); }
  78% { transform: translate(-50%, -3px); }
}
.enter-button.is-highlighted .hero-enter-label {
  text-shadow: 0 0 8px rgba(255,255,255,.65), 0 0 18px rgba(255,255,255,.35);
}

.enter-button:focus-visible { outline: none; }
.enter-button:focus-visible .hero-enter-label {
  text-decoration: underline;
  text-underline-offset: 4px;
}
@media (prefers-reduced-motion: reduce) {
  .hero-enter-label { transition: none; }
  .hero-enter-arrow { animation: none !important; }
}

/* 页面铺满窗口；作品构图继续在内部的 16:10 平面中等比缩放。 */
.portfolio-presentation {
  position: relative;
  display: grid;
  place-items: center;
  width: 100%;
  height: 100vh;
  height: 100svh;
  overflow: hidden;
  color: var(--chapter-fg);
  background: var(--chapter-bg);
  overscroll-behavior: none;
  scroll-snap-align: start;
  scroll-snap-stop: always;
}

.presentation-stage {
  position: relative;
  width: 100vw;
  height: 100vh;
  height: 100svh;
  overflow: hidden;
  color: var(--chapter-fg);
  background: var(--chapter-bg);
  container-type: inline-size;
  touch-action: pan-y;
  user-select: none;
  outline: none;
}

.page-layer,
.portfolio-page {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
}

.gallery-rail,
.gallery-panel {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
}

.gallery-rail {
  z-index: 1;
  background: var(--chapter-bg);
  transition-property: transform;
  transition-duration: 0s;
  will-change: transform;
}

.gallery-panel {
  background: var(--chapter-bg);
  pointer-events: none;
  transition-property: none;
  backface-visibility: hidden;
}

.portfolio-page.is-gallery-content {
  animation: none !important;
  transform-origin: center center;
  transition-property: scale, opacity;
  transition-duration: 0s;
  will-change: scale, opacity;
  backface-visibility: hidden;
}

.portfolio-page.is-gallery-chrome-source .composition-plane {
  will-change: filter;
}

.portfolio-page.is-gallery-content :is(.site-signature, .chapter-nav, .infinity-mark, .portfolio-watermark, .stage-navigation, .work-progress, .work-info) {
  animation: none !important;
}

.portfolio-page:is(.is-gallery-chrome-source, .is-gallery-chrome-ghost) > :is(.site-signature, .chapter-nav, .infinity-mark, .portfolio-watermark, .stage-navigation, .work-progress) {
  opacity: 0 !important;
}

.gallery-chrome-overlay {
  position: absolute;
  inset: 0;
  z-index: 20;
  color: #111;
  pointer-events: none;
}

.gallery-chrome-overlay.is-dark { color: #f4f4f4; }

.gallery-chrome-overlay.is-dark .chapter-nav__item { color: #666; }
.gallery-chrome-overlay.is-dark .chapter-nav__item.is-active { color: #f4f4f4; }
.gallery-chrome-overlay.is-dark :is(.portfolio-watermark, .work-progress) { color: #777; }
.gallery-chrome-overlay.is-dark .stage-control {
  color: #aaa;
  background: transparent;
}

.composition-plane {
  position: absolute;
  left: 50%;
  top: 50%;
  width: min(100vw, calc(100svh * 1.6), 1600px);
  aspect-ratio: 16 / 10;
  transform: translate(-50%, -50%);
  container-type: inline-size;
}

.page-layer {
  overflow: hidden;
  color: var(--chapter-fg);
  background: var(--chapter-bg);
}

.portfolio-page {
  background: var(--paper);
  color: var(--ink);
}

.portfolio-page.is-entering-forward {
  animation: page-in-forward var(--transition-time) cubic-bezier(.22, .61, .36, 1) both;
}

.portfolio-page.is-entering-backward {
  animation: page-in-backward var(--transition-time) cubic-bezier(.22, .61, .36, 1) both;
}

.portfolio-page.is-leaving-forward {
  animation: page-out-forward var(--transition-time) ease both;
}

.portfolio-page.is-leaving-backward {
  animation: page-out-backward var(--transition-time) ease both;
}

.portfolio-page.is-entering-phase-forward {
  animation: phase-in-forward 560ms cubic-bezier(.30, .72, .20, 1) both;
}

.portfolio-page.is-leaving-phase-forward {
  animation: phase-out-forward 560ms cubic-bezier(.30, .72, .20, 1) both;
}

.portfolio-page.is-entering-phase-backward {
  animation: phase-in-backward 560ms cubic-bezier(.30, .72, .20, 1) both;
}

.portfolio-page.is-leaving-phase-backward {
  animation: phase-out-backward 560ms cubic-bezier(.30, .72, .20, 1) both;
}

.portfolio-page.is-entering-opener-phase-forward {
  animation: opener-phase-in-forward 560ms linear both;
}

.portfolio-page.is-leaving-opener-phase-forward {
  animation: opener-phase-out-forward 560ms linear both;
}

.portfolio-page.is-entering-opener-phase-backward {
  animation: opener-phase-in-backward 560ms linear both;
}

.portfolio-page.is-leaving-opener-phase-backward {
  animation: opener-phase-out-backward 560ms linear both;
}

.portfolio-page:is(
  .is-entering-phase-forward,
  .is-leaving-phase-forward,
  .is-entering-phase-backward,
  .is-leaving-phase-backward,
  .is-entering-opener-phase-forward,
  .is-leaving-opener-phase-forward,
  .is-entering-opener-phase-backward,
  .is-leaving-opener-phase-backward
) {
  backface-visibility: hidden;
  contain: paint;
  will-change: transform, opacity;
}

.portfolio-page:is(.is-entering-phase-forward, .is-entering-phase-backward) { z-index: 1; }
.portfolio-page:is(.is-leaving-phase-forward, .is-leaving-phase-backward) { z-index: 2; }
.portfolio-page:is(.is-entering-opener-phase-forward, .is-entering-opener-phase-backward) { z-index: 1; }
.portfolio-page:is(.is-leaving-opener-phase-forward, .is-leaving-opener-phase-backward) { z-index: 2; }

/* Chapter Opener 进入首件作品时，使用章节底色完成一次纯色吸收与显影。 */
.portfolio-page.is-opener-work-leaving {
  z-index: 3;
  pointer-events: none;
  transform-origin: center center;
  will-change: transform, opacity, filter;
}

.portfolio-page.is-opener-work-leaving.toward-white {
  animation: opener-absorb-white 560ms cubic-bezier(.4, 0, .2, 1) both;
}

.portfolio-page.is-opener-work-leaving.toward-black {
  animation: opener-absorb-black 560ms cubic-bezier(.4, 0, .2, 1) both;
}

.portfolio-page.is-opener-work-entering {
  z-index: 1;
  pointer-events: none;
  animation: first-work-emerge 700ms cubic-bezier(.16, 1, .3, 1) 420ms both;
  will-change: transform, opacity;
}

.portfolio-page.is-opener-work-entering > :is(.site-signature, .chapter-nav, .infinity-mark) {
  animation: opener-work-top-elements-in 460ms cubic-bezier(.16, 1, .3, 1) 520ms both;
  will-change: translate, opacity;
}

.portfolio-page.is-opener-work-entering > :is(.portfolio-watermark, .stage-navigation, .work-progress) {
  animation: opener-work-bottom-elements-in 460ms cubic-bezier(.16, 1, .3, 1) 560ms both;
  will-change: translate, opacity;
}

.chapter-color-matte {
  position: absolute;
  inset: 0;
  z-index: 2;
  opacity: 1;
  visibility: visible;
  pointer-events: none;
  transition: opacity 520ms cubic-bezier(.16, 1, .3, 1);
  will-change: opacity;
}

.chapter-color-matte.is-white { background: #fff; }
.chapter-color-matte.is-black { background: #000; }
.chapter-color-matte.is-clearing { opacity: 0; }

@keyframes opener-absorb-white {
  from { opacity: 1; transform: scale(1); filter: brightness(1) contrast(1); }
  to { opacity: 0; transform: scale(1.088); filter: brightness(1.18) contrast(1.08); }
}

@keyframes opener-absorb-black {
  from { opacity: 1; transform: scale(1); filter: brightness(1) contrast(1); }
  to { opacity: 0; transform: scale(1.088); filter: brightness(.82) contrast(1.1); }
}

@keyframes first-work-emerge {
  from { opacity: .92; transform: scale(.86); }
  to { opacity: 1; transform: scale(1); }
}

@keyframes opener-work-top-elements-in {
  from { opacity: 0; translate: 0 -52px; }
  to { opacity: 1; translate: 0 0; }
}

@keyframes opener-work-bottom-elements-in {
  from { opacity: 0; translate: 0 52px; }
  to { opacity: 1; translate: 0 0; }
}

@keyframes page-in-forward {
  from { opacity: .2; transform: translateX(3.2%); }
  to { opacity: 1; transform: translateX(0); }
}

@keyframes page-in-backward {
  from { opacity: .2; transform: translateX(-3.2%); }
  to { opacity: 1; transform: translateX(0); }
}

@keyframes page-out-forward {
  from { opacity: 1; transform: translateX(0); }
  to { opacity: 0; transform: translateX(-2.2%); }
}

@keyframes page-out-backward {
  from { opacity: 1; transform: translateX(0); }
  to { opacity: 0; transform: translateX(2.2%); }
}

@keyframes phase-in-forward {
  from { opacity: 1; transform: translate3d(0, 5%, 0); }
  to { opacity: 1; transform: translate3d(0, 0, 0); }
}

@keyframes phase-out-forward {
  from { opacity: 1; transform: translate3d(0, 0, 0); }
  to { opacity: 0; transform: translate3d(0, -3.5%, 0); }
}

@keyframes phase-in-backward {
  from { opacity: 1; transform: translate3d(0, -5%, 0); }
  to { opacity: 1; transform: translate3d(0, 0, 0); }
}

@keyframes phase-out-backward {
  from { opacity: 1; transform: translate3d(0, 0, 0); }
  to { opacity: 0; transform: translate3d(0, 3.5%, 0); }
}

@keyframes opener-phase-in-forward {
  0% { opacity: 1; transform: translate3d(0, 5%, 0); }
  54%, 100% { opacity: 1; transform: translate3d(0, 0, 0); }
}

@keyframes opener-phase-out-forward {
  0% { opacity: 1; transform: translate3d(0, 0, 0); }
  54%, 100% { opacity: 0; transform: translate3d(0, -3.5%, 0); }
}

@keyframes opener-phase-in-backward {
  0% { opacity: 1; transform: translate3d(0, -5%, 0); }
  54%, 100% { opacity: 1; transform: translate3d(0, 0, 0); }
}

@keyframes opener-phase-out-backward {
  0% { opacity: 1; transform: translate3d(0, 0, 0); }
  54%, 100% { opacity: 0; transform: translate3d(0, 3.5%, 0); }
}

/* 页眉与页脚作为两个整体，沿相反方向飞入飞出。 */
.portfolio-page.is-entering-forward :is(.site-signature, .index-heading, .chapter-nav, .infinity-mark),
.portfolio-page.is-entering-backward :is(.site-signature, .index-heading, .chapter-nav, .infinity-mark),
.index-page.is-viewport-revealing :is(.site-signature, .index-heading, .infinity-mark) {
  animation: top-group-enter 220ms cubic-bezier(.22, .61, .36, 1) both;
}

.portfolio-page.is-leaving-forward :is(.site-signature, .index-heading, .chapter-nav, .infinity-mark),
.portfolio-page.is-leaving-backward :is(.site-signature, .index-heading, .chapter-nav, .infinity-mark),
.portfolio-page.is-viewport-leaving :is(.site-signature, .index-heading, .chapter-nav, .infinity-mark) {
  animation: top-group-exit 185ms ease-in both;
}

.portfolio-page.is-entering-forward :is(.portfolio-watermark, .stage-navigation, .work-progress),
.portfolio-page.is-entering-backward :is(.portfolio-watermark, .stage-navigation, .work-progress),
.index-page.is-viewport-revealing .portfolio-watermark {
  animation: bottom-group-enter 220ms cubic-bezier(.22, .61, .36, 1) both;
}

.portfolio-page.is-leaving-forward :is(.portfolio-watermark, .stage-navigation, .work-progress),
.portfolio-page.is-leaving-backward :is(.portfolio-watermark, .stage-navigation, .work-progress),
.portfolio-page.is-viewport-leaving :is(.portfolio-watermark, .stage-navigation, .work-progress) {
  animation: bottom-group-exit 185ms ease-in both;
}

@keyframes top-group-enter {
  from { opacity: 0; translate: 0 -28px; }
  to { opacity: 1; translate: 0 0; }
}

@keyframes top-group-exit {
  from { opacity: 1; translate: 0 0; }
  to { opacity: 0; translate: 0 28px; }
}

@keyframes bottom-group-enter {
  from { opacity: 0; translate: 0 28px; }
  to { opacity: 1; translate: 0 0; }
}

@keyframes bottom-group-exit {
  from { opacity: 1; translate: 0 0; }
  to { opacity: 0; translate: 0 -28px; }
}

/* PDF 左上角署名。 */
.site-signature {
  position: absolute;
  left: var(--edge-x);
  top: var(--edge-y);
  z-index: 5;
  display: grid;
  gap: 1px;
  padding: 0;
  border: 0;
  background: transparent;
  text-align: left;
  cursor: pointer;
}

.site-signature__zh {
  font-size: clamp(10px, .75vw, 15px);
  font-weight: 400;
  line-height: 1.05;
}

.site-signature__en {
  font-size: clamp(9px, .69vw, 14px);
  font-weight: 300;
  line-height: 1.05;
}

.site-signature:hover,
.site-signature:focus-visible,
.phase-link:hover,
.phase-link:focus-visible,
.chapter-nav__item:hover,
.chapter-nav__item:focus-visible,
.stage-control:hover,
.stage-control:focus-visible {
  opacity: .46;
  outline: none;
}

.infinity-mark {
  position: absolute;
  right: var(--edge-x);
  top: var(--edge-y);
  z-index: 5;
  font-size: clamp(14px, 1vw, 20px);
  font-weight: 300;
  line-height: 1;
}

.portfolio-watermark {
  position: absolute;
  left: var(--edge-x);
  bottom: var(--edge-y);
  z-index: 5;
  margin: 0;
  color: #aaa;
  font-size: clamp(8px, .56vw, 11px);
  font-weight: 400;
  line-height: 1;
}

/* Phase Index 使用 PDF 的编辑排版，而不是网页卡片。 */
.index-heading {
  position: absolute;
  left: 26.72%;
  /* 抵消居中的 16:10 构图层偏移，使标题始终贴合实际窗口上边距。 */
  top: calc(var(--edge-y) - 50svh + 31.25cqw);
  display: grid;
  gap: 1px;
  margin: 0;
  font-family: "Flex Sans GB Regular", sans-serif;
  font-weight: 400;
  line-height: 1.05;
}

.index-heading span:first-child {
  font-size: clamp(10px, .75vw, 15px);
}

.index-heading span:last-child {
  font-size: clamp(9px, .69vw, 14px);
}

.phase-index-list {
  position: absolute;
  left: 26.72%;
  top: 14.5%;
  display: grid;
  width: 55%;
  gap: 3.2cqw;
  margin: 0;
  padding: 0;
  list-style: none;
}

.index-page .phase-index-list > li {
  opacity: 0;
  transform: translateX(7cqw);
}

.index-page.is-index-revealing .phase-index-list > li {
  animation: index-item-enter 380ms cubic-bezier(.22, .61, .36, 1) forwards;
  animation-delay: calc(var(--index-order) * 85ms);
}

@keyframes index-item-enter {
  from {
    opacity: 0;
    transform: translateX(7cqw);
  }
  to {
    opacity: 1;
    transform: translateX(0);
  }
}

.phase-link {
  display: grid;
  grid-template-columns: 4.2cqw 1fr;
  width: max-content;
  max-width: 100%;
  padding: 0;
  border: 0;
  background: transparent;
  text-align: left;
  cursor: pointer;
  transition: opacity 160ms ease;
}

.phase-link__number {
  padding-top: .08cqw;
  font-size: 1.9cqw;
  font-weight: 400;
  line-height: 1;
}

.phase-link__name {
  display: grid;
  gap: .26cqw;
}

.phase-link__zh {
  font-size: 1.9cqw;
  font-weight: 400;
  line-height: 1;
}

.phase-link__en {
  font-size: 1.72cqw;
  font-weight: 300;
  line-height: 1;
}

.prototype-note {
  position: absolute;
  right: var(--edge-x);
  bottom: calc(var(--edge-y) + 28px);
  margin: 0;
  color: #aaa;
  font-size: clamp(8px, .5vw, 10px);
  letter-spacing: .03em;
  opacity: 0;
  transition: opacity 180ms ease;
}

.prototype-note.is-visible { opacity: 1; }

/* Chapter 扉页由无字背景与可响应的网页文字层组成。 */
.opener-page.is-light { background: #fff; }
.opener-page.is-dark { background: #000; }
.opener-page { --opener-intro-delay: 0ms; }
.opener-page.is-opener-intro-delayed { --opener-intro-delay: 300ms; }

.opener-composition {
  position: absolute;
  inset: 0;
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  pointer-events: none;
  user-select: none;
  will-change: transform, opacity;
  animation: opener-background-in 820ms cubic-bezier(.22, .61, .36, 1) var(--opener-intro-delay) both;
}

.opener-page.is-opener-intro-delayed .opener-composition {
  animation-name: opener-background-phase-in;
}

.opener-copy {
  position: absolute;
  inset: 0;
  z-index: 2;
  color: #fff;
  font-family: "Flex Sans GB", sans-serif;
  font-weight: 300;
  pointer-events: none;
}

.opener-title {
  position: absolute;
  left: var(--opener-copy-x, 50%);
  top: 6.2%;
  width: min(48%, 960px);
  margin: 0;
  font-weight: 300;
  letter-spacing: 0;
  line-height: .98;
}

.opener-title__en,
.opener-title__line,
.opener-title__line-text,
.opener-title__zh,
.opener-description > span {
  display: block;
}

.opener-title__line {
  overflow: hidden;
}

.opener-title__line-text {
  --opener-title-scale-x: 1;
  transform-origin: right center;
  will-change: transform, opacity;
  animation: opener-title-line-in 420ms cubic-bezier(.22, .61, .36, 1) both;
}

.opener-title__line:first-child .opener-title__line-text { animation-delay: calc(var(--opener-intro-delay) + 80ms); }
.opener-title__line:nth-child(2) .opener-title__line-text { animation-delay: calc(var(--opener-intro-delay) + 150ms); }

.opener-title__en {
  font-size: clamp(46px, 7.45vw, 152px);
  white-space: nowrap;
}

.opener-title__zh {
  margin-top: clamp(16px, 2.2vh, 34px);
  font-size: clamp(38px, 5.8vw, 118px);
  line-height: 1;
  white-space: nowrap;
  will-change: transform, opacity;
  animation: opener-copy-rise-in 360ms cubic-bezier(.22, .61, .36, 1) calc(var(--opener-intro-delay) + 260ms) both;
}

.opener-description {
  position: absolute;
  left: var(--opener-copy-x, 50%);
  bottom: 20.5%;
  width: min(48%, 960px);
  margin: 0;
  font-size: clamp(13px, 1.42vw, 29px);
  font-weight: 300;
  line-height: 1.22;
  letter-spacing: 0;
  will-change: transform, opacity;
  animation: opener-description-in 360ms cubic-bezier(.22, .61, .36, 1) calc(var(--opener-intro-delay) + 420ms) both;
}

.opener-number {
  position: absolute;
  left: var(--opener-copy-x, 50%);
  bottom: 3.5%;
  font-size: clamp(72px, 8.4vw, 172px);
  font-weight: 300;
  line-height: .82;
  letter-spacing: 0;
  will-change: transform, opacity;
  animation: opener-number-in 360ms cubic-bezier(.22, .61, .36, 1) calc(var(--opener-intro-delay) + 500ms) both;
}

.opener-page--01,
.opener-page--03 {
  --opener-copy-x: 50%;
}

.opener-page--02,
.opener-page--04 {
  --opener-copy-x: 2.7%;
}

.opener-page--01 .opener-title__en > span:nth-child(2),
.opener-page--03 .opener-title__en > span:nth-child(2) {
  padding-left: 11%;
}

.opener-page--02 .opener-title__en > span:nth-child(2) {
  padding-left: 5.5%;
}

.opener-page--04 .opener-title {
  top: 7.5%;
  width: 60.5%;
  line-height: 1.15;
}

.opener-page--04 .opener-title__en {
  font-size: clamp(42px, 6.45vw, 132px);
}

.opener-page--04 .opener-title__en > span {
  padding-left: 0;
  text-align: right;
}

.opener-page--04 .opener-title__line-text {
  --opener-title-scale-x: 1.12;
}

.opener-page--04 .opener-copy {
  color: #5d566d;
}

.opener-page--04.is-dark {
  background: #fff;
}

.opener-page--04 .opener-description {
  width: 55%;
}

/* 所有作品集页面共用的左右透明热区；现有交互控件使用更高层级。 */
.side-click-navigation {
  position: absolute;
  inset: 0;
  z-index: 4;
  pointer-events: none;
}

.side-click-zone {
  position: absolute;
  top: 0;
  width: 18%;
  height: 100%;
  padding: 0;
  border: 0;
  outline: none;
  background: transparent;
  pointer-events: auto;
}

.side-click-zone--prev { left: 0; }
.side-click-zone--next { right: 0; }

.side-click-zone:disabled {
  cursor: default;
  pointer-events: none;
}

/* 链接、现有导航和未来显式标记的媒体交互始终优先于透明热区。 */
.portfolio-page :is(a, button, [role="button"], [data-interactive]):not(.side-click-zone, .opener-click-zone) {
  z-index: 6;
}

@media (hover: hover) and (pointer: fine) {
  .side-click-zone--prev { cursor: w-resize; }
  .side-click-zone--next { cursor: e-resize; }
}

@media (hover: none), (pointer: coarse) {
  .side-click-navigation { display: none; }
}

/* Temporary desktop geometry editor. It is activated only by ?edit=1. */
.layout-edit-guides {
  position: absolute;
  left: 50%;
  top: 50%;
  z-index: 40;
  display: none;
  width: min(100vw, calc(100svh * 1.6), 1600px);
  aspect-ratio: 16 / 10;
  border: 1px solid rgba(0, 111, 255, .28);
  transform: translate(-50%, -50%);
  pointer-events: none;
}

.layout-edit-mode .layout-edit-guides { display: block; }
.layout-edit-mode.layout-guides-hidden .layout-edit-guides { border-color: transparent; }
.layout-edit-mode.layout-guides-hidden .layout-edit-guides::before,
.layout-edit-mode.layout-guides-hidden .layout-edit-guides::after,
.layout-edit-mode.layout-guides-hidden .layout-edit-guides__center { display: none; }

.layout-edit-guides::before,
.layout-edit-guides::after {
  position: absolute;
  content: "";
  background: rgba(0, 111, 255, .2);
}

.layout-edit-guides::before {
  left: 50%;
  top: 0;
  width: 1px;
  height: 100%;
}

.layout-edit-guides::after {
  left: 0;
  top: 50%;
  width: 100%;
  height: 1px;
}

.layout-edit-guides__center {
  position: absolute;
  left: 50%;
  top: 50%;
  width: 7px;
  height: 7px;
  border: 1px solid rgba(0, 111, 255, .5);
  border-radius: 50%;
  background: rgba(255, 255, 255, .72);
  transform: translate(-50%, -50%);
}

.layout-edit-grid {
  position: absolute;
  inset: 0;
  opacity: var(--layout-grid-opacity, .24);
  background-image:
    linear-gradient(to right, rgba(0, 111, 255, .62) 1px, transparent 1px),
    linear-gradient(to bottom, rgba(0, 111, 255, .62) 1px, transparent 1px),
    linear-gradient(to right, rgba(0, 111, 255, .24) 1px, transparent 1px),
    linear-gradient(to bottom, rgba(0, 111, 255, .24) 1px, transparent 1px);
  background-position:
    var(--layout-grid-x, 0px) 0,
    0 var(--layout-grid-y, 0px),
    var(--layout-grid-x, 0px) 0,
    0 var(--layout-grid-y, 0px);
  background-size: 5% 100%, 100% 5%, 1% 100%, 100% 1%;
}

.layout-edit-mode.layout-grid-hidden .layout-edit-grid { display: none; }

.layout-edit-reference-layer {
  position: absolute;
  inset: 0;
}

.layout-edit-mode.layout-references-hidden .layout-edit-reference-layer { display: none; }

.layout-edit-reference-line {
  position: absolute;
  color: #111;
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: 8px;
  line-height: 1;
}

.layout-edit-reference-line--x {
  top: 0;
  bottom: 0;
  border-left: 1px dashed currentColor;
}

.layout-edit-reference-line--y {
  left: 0;
  right: 0;
  border-top: 1px dashed currentColor;
}

.layout-edit-reference-line--info { color: rgba(0, 148, 94, .9); }
.layout-edit-reference-line--visual { color: rgba(228, 0, 112, .88); }

.layout-edit-reference-line__label {
  position: absolute;
  display: block;
  width: max-content;
  padding: 2px 3px;
  color: currentColor;
  background: rgba(255, 255, 255, .9);
  white-space: nowrap;
}

.layout-edit-reference-line--x .layout-edit-reference-line__label {
  left: 3px;
  top: var(--reference-label-offset, 3px);
}

.layout-edit-reference-line--label-end .layout-edit-reference-line__label {
  left: auto;
  right: 3px;
}

.layout-edit-reference-line--y .layout-edit-reference-line__label {
  left: var(--reference-label-offset, 3px);
  top: 3px;
}

.layout-edit-mode [data-layout-editable] {
  outline: 1px dashed rgba(0, 111, 255, .5);
  outline-offset: 3px;
  cursor: move;
  touch-action: none;
}

.layout-edit-mode .work-image-frame[data-layout-editable] { z-index: 20; }
.layout-edit-mode .work-info[data-layout-editable] { z-index: 21; }

/* Edge click zones would otherwise intercept layouts intentionally placed near the page sides. */
.layout-edit-mode .work-page .side-click-navigation { display: none; }

.layout-edit-mode [data-layout-editable].is-layout-selected {
  outline: 2px solid #087cff;
  outline-offset: 4px;
}

.layout-editor-panel {
  position: absolute;
  right: 14px;
  top: 14px;
  z-index: 100;
  display: none;
  width: 228px;
  padding: 12px;
  border: 1px solid #b9b9b9;
  border-radius: 4px;
  color: #111;
  background: rgba(255, 255, 255, .96);
  box-shadow: 0 3px 14px rgba(0, 0, 0, .1);
  font-family: "Flex Sans GB Regular", sans-serif;
  font-size: 11px;
  line-height: 1.25;
  user-select: none;
}

.layout-edit-mode .layout-editor-panel { display: grid; gap: 10px; }

.layout-editor-panel__heading,
.layout-editor-panel__selection,
.layout-editor-panel__coordinates,
.layout-editor-panel__scale-value {
  margin: 0;
}

.layout-editor-panel__heading {
  font-size: 11px;
  font-weight: 600;
  letter-spacing: .06em;
}

.layout-editor-panel__selection {
  min-height: 28px;
  color: #555;
}

.layout-editor-panel__coordinates {
  display: grid;
  grid-template-columns: 1fr 1fr;
  font-variant-numeric: tabular-nums;
}

.layout-editor-panel__guides,
.layout-editor-panel__toggle {
  display: flex;
  gap: 7px;
  align-items: center;
  cursor: pointer;
}

.layout-editor-panel__guides input,
.layout-editor-panel__toggle input { margin: 0; }

.layout-editor-panel__reference-key {
  display: flex;
  gap: 12px;
  margin: -5px 0 0 22px;
  font-size: 9px;
}

.layout-editor-panel__reference-key span::before {
  display: inline-block;
  width: 10px;
  margin-right: 4px;
  border-top: 1px dashed currentColor;
  content: "";
  vertical-align: middle;
}

.layout-editor-panel__reference-key-info { color: rgb(0, 128, 80); }
.layout-editor-panel__reference-key-visual { color: rgb(204, 0, 96); }

.layout-editor-panel__grid-position {
  display: grid;
  grid-template-columns: 1fr 1fr;
  margin: -4px 0 0;
  color: #666;
  font-variant-numeric: tabular-nums;
}

.layout-editor-panel__grid-opacity {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 5px 8px;
  align-items: center;
}

.layout-editor-panel__grid-opacity input {
  grid-column: 1 / -1;
  width: 100%;
  margin: 0;
}

.layout-editor-panel__scale {
  display: none;
  grid-template-columns: 1fr auto;
  gap: 5px 8px;
  align-items: center;
}

.layout-editor-panel.has-visual-selection .layout-editor-panel__scale { display: grid; }

.layout-editor-panel__scale input {
  grid-column: 1 / -1;
  width: 100%;
  margin: 0;
}

.layout-editor-panel__actions {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 6px;
}

.layout-editor-panel button {
  min-height: 28px;
  padding: 5px 7px;
  border: 1px solid #aaa;
  border-radius: 3px;
  color: #111;
  background: #fff;
  font: inherit;
  cursor: pointer;
}

.layout-editor-panel button:hover,
.layout-editor-panel button:focus-visible {
  border-color: #087cff;
  outline: none;
}

.layout-editor-panel__copy { grid-column: 1 / -1; }

.layout-editor-panel__output {
  display: none;
  width: 100%;
  min-height: 96px;
  resize: vertical;
  border: 1px solid #bbb;
  border-radius: 3px;
  color: #222;
  background: #f7f7f7;
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: 9px;
  line-height: 1.3;
  user-select: text;
}

.layout-editor-panel__output.is-visible { display: block; }

.layout-editor-panel__hint {
  margin: 0;
  color: #777;
  font-size: 9px;
  line-height: 1.3;
}

/* 扉页下方额外热区继续作为第二组快捷翻页区域。 */
.opener-click-navigation {
  position: absolute;
  inset: 0;
  z-index: 4;
  pointer-events: none;
}

.opener-click-zone {
  position: absolute;
  padding: 0;
  border: 0;
  outline: none;
  background: transparent;
  cursor: pointer;
  pointer-events: auto;
}

.opener-click-zone--lower-prev,
.opener-click-zone--lower-next {
  top: 66.666%;
  width: 31%;
  height: 33.334%;
}

.opener-click-zone--lower-prev { left: 18%; }
.opener-click-zone--lower-next { right: 18%; }

@keyframes opener-background-in {
  from { opacity: .8; transform: scale(1.025); }
  to { opacity: 1; transform: scale(1); }
}

@keyframes opener-background-phase-in {
  from { opacity: 0; transform: scale(1.025); }
  to { opacity: 1; transform: scale(1); }
}

@keyframes opener-title-line-in {
  from {
    opacity: 0;
    transform: translate3d(0, 14px, 0) scaleX(var(--opener-title-scale-x));
  }
  to {
    opacity: 1;
    transform: translate3d(0, 0, 0) scaleX(var(--opener-title-scale-x));
  }
}

@keyframes opener-copy-rise-in {
  from { opacity: 0; transform: translateY(9px); }
  to { opacity: 1; transform: translateY(0); }
}

@keyframes opener-description-in {
  from { opacity: 0; transform: translateY(8px); }
  to { opacity: 1; transform: translateY(0); }
}

@keyframes opener-number-in {
  from { opacity: 0; transform: translateY(12px) scale(.96); }
  to { opacity: 1; transform: translateY(0) scale(1); }
}

/* 竖向窗口只缩放和平移原排版，不改变各行的错位关系。 */
@media (max-aspect-ratio: 1 / 1) {
  .opener-title {
    left: 4%;
    top: max(7%, 36px);
    width: 92%;
    text-align: left;
    transform: none;
  }

  .opener-title__en,
  .opener-page--04 .opener-title__en {
    font-size: clamp(38px, min(11.5vw, 8.5vh), 108px);
    white-space: normal;
  }

  .opener-page--01 .opener-title__en > span:nth-child(2) { padding-left: 20%; }
  .opener-page--02 .opener-title__en > span:nth-child(2) { padding-left: 8%; }
  .opener-page--03 .opener-title__en > span:nth-child(2) { padding-left: 11%; }
  .opener-page--04 .opener-title__en > span:nth-child(2) { padding-left: 0; }

  .opener-title__zh {
    margin-top: clamp(10px, 1.5vh, 22px);
    font-size: clamp(32px, min(9.5vw, 6.8vh), 88px);
    white-space: normal;
  }

  .opener-description {
    left: 6.8%;
    bottom: clamp(150px, 18vh, 230px);
    width: 86%;
    font-size: clamp(12px, min(3.1vw, 2.15vh), 21px);
    text-align: left;
    transform: none;
  }

  .opener-number {
    left: 6.8%;
    bottom: max(4%, 28px);
    font-size: clamp(68px, min(17vw, 11vh), 120px);
    transform: none;
  }

  .opener-page--04 .opener-title {
    left: 4%;
    top: max(7%, 36px);
    width: 92%;
  }
}

/* 工作页顶部导航是可交互 HTML，位置由 PDF 坐标归一化得到。 */
.chapter-nav {
  position: absolute;
  left: 50%;
  top: var(--edge-y);
  z-index: 5;
  display: flex;
  width: max-content;
  max-width: calc(100vw - (var(--edge-x) * 2) - 160px);
  gap: clamp(12px, 1.6vw, 32px);
  align-items: start;
  font-family: "Flex Sans GB Regular", sans-serif;
  transform: translateX(-50%);
}

.chapter-nav__item {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: clamp(4px, .38vw, 8px);
  min-width: 0;
  padding: 0;
  border: 0;
  color: #aaa;
  background: transparent;
  text-align: left;
  cursor: pointer;
  transition: opacity 160ms ease;
}

.chapter-nav__item.is-active { color: #111; }

.chapter-nav__number,
.chapter-nav__zh,
.chapter-nav__en {
  font-family: "Flex Sans GB Regular", sans-serif;
  font-size: clamp(8px, .72vw, 12px);
  font-weight: 400;
  line-height: 1.08;
  white-space: nowrap;
}

.chapter-nav__copy {
  display: grid;
  gap: 1px;
}

.chapter-nav__en { font-weight: 400; }

/* 顶部导航空间不足时隐藏“关于”，相位索引页中的入口保持可用。 */
@media (max-width: 1100px) {
  .chapter-nav__item[data-chapter="00"] {
    display: none;
  }
}

.work-info {
  position: absolute;
  left: 3.125%;
  top: 16.85%;
  z-index: 3;
  width: 19.2%;
  margin: 0;
  opacity: 1;
}

.work-page.is-light {
  color: #111;
  background: #fff;
}

.work-page.is-dark {
  color: #f4f4f4;
  background: #000;
}

.work-page.is-dark .chapter-nav__item { color: #666; }
.work-page.is-dark .chapter-nav__item.is-active { color: #f4f4f4; }
.work-page.is-dark .portfolio-watermark,
.work-page.is-dark .work-progress { color: #777; }
.work-page.is-dark .stage-control {
  color: #aaa;
  background: transparent;
}

.portfolio-page.is-entering-forward .work-info,
.portfolio-page.is-entering-backward .work-info {
  animation: info-fade-in 200ms ease-out both;
}

.portfolio-page.is-leaving-forward .work-info,
.portfolio-page.is-leaving-backward .work-info {
  animation: info-fade-out 185ms ease-in both;
}

@keyframes info-fade-in {
  from { opacity: 0; }
  to { opacity: 1; }
}

@keyframes info-fade-out {
  from { opacity: 1; }
  to { opacity: 0; }
}

.work-title,
.work-subtitle,
.work-location,
.work-details,
.work-meta-group,
.work-info-section h2,
.work-info-section p,
.work-notes p { margin: 0; }

.work-title {
  display: grid;
  gap: .11cqw;
  margin-bottom: 1.02cqw;
  font-size: .703cqw;
  font-weight: 600;
  line-height: 1.07;
}

.work-location {
  display: grid;
  gap: .08cqw;
  font-size: .703cqw;
  font-weight: 400;
  line-height: 1.08;
}

.work-subtitle,
.work-details,
.work-meta-group,
.work-info-section,
.work-notes {
  display: grid;
  gap: .08cqw;
  font-size: .703cqw;
  font-weight: 400;
  line-height: 1.08;
}

.work-subtitle { margin-bottom: 1.02cqw; }
.work-details { margin-top: 1.02cqw; }
.work-meta-group { margin-top: 1.02cqw; }
.work-meta-label { margin-bottom: .16cqw; }

.work-info-section {
  gap: 1.02cqw;
  margin-top: 1.02cqw;
}

.work-info-section h2,
.work-info-section p,
.work-notes p {
  display: grid;
  gap: .08cqw;
  font: inherit;
}

.work-info-section h2 { font-weight: 600; }
.work-notes {
  gap: 1.02cqw;
  margin-top: 1.02cqw;
  font-size: .6640625cqw;
  opacity: .75;
}

.work-info--title .work-title { margin-bottom: 0; }

.work-info--title em { font-style: italic; }

.work-info--role .work-title { display: none; }
.work-info--role .work-info-section { margin-top: 0; }

.work-info--anchored-notes .work-notes {
  position: absolute;
  right: 0;
  bottom: 0;
  left: 0;
  margin-top: 0;
}

.work-info span:empty { display: none; }

.work-image-frame {
  position: absolute;
  left: 26.72%;
  top: 16.25%;
  display: flex;
  width: 67.97%;
  height: 72.5%;
  align-items: flex-start;
  justify-content: flex-start;
  overflow: hidden;
  margin: 0;
  background: transparent;
}

.work-image {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: contain;
  object-position: left top;
}

.ending-page {
  overflow: hidden;
  background: #fff;
}

.ending-composition {
  position: absolute;
  inset: 0;
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  user-select: none;
}

.stage-navigation {
  position: absolute;
  left: 50%;
  bottom: calc(var(--edge-y) - 8px);
  z-index: 8;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  width: clamp(180px, 14vw, 260px);
  align-items: end;
  transform: translateX(-50%);
}

.stage-control {
  justify-self: center;
  padding: 8px;
  border: 0;
  color: #777;
  background: transparent;
  font-size: clamp(8px, .56vw, 11px);
  font-weight: 400;
  line-height: 1;
  letter-spacing: .03em;
  cursor: pointer;
  transition: opacity 160ms ease;
}

.stage-control:disabled {
  opacity: .2;
  cursor: default;
}

.next-phase-control {
  position: relative;
  display: block;
  min-width: max-content;
  animation: next-phase-breathe 1250ms ease-in-out infinite;
}

.next-phase-copy {
  display: grid;
  grid-template-columns: max-content max-content;
  grid-template-rows: auto auto;
  column-gap: .35em;
  gap: 1px;
}

.next-phase-zh {
  grid-column: 1;
  grid-row: 1;
  justify-self: end;
}

.next-phase-en {
  grid-column: 1;
  grid-row: 2;
}

.next-phase-arrow {
  grid-column: 2;
  grid-row: 2;
}

.next-phase-control:hover,
.next-phase-control:focus-visible {
  animation-play-state: paused;
  opacity: 1;
}

@keyframes next-phase-breathe {
  0%, 100% { opacity: .5; }
  50% { opacity: 1; }
}

.work-progress {
  position: absolute;
  right: var(--edge-x);
  bottom: var(--edge-y);
  z-index: 6;
  color: #999;
  font-size: clamp(8px, .56vw, 11px);
  font-weight: 400;
  line-height: 1;
}

@media (max-width: 767px) {
  .cover-artwork {
    --hero-enter-size: min(83vw, 416px);
    width: min(156vw, calc(156svh * 3840 / 2399));
    top: -60px;
    transform: translateX(calc(4% - 21px));
  }
  .cover-image { -webkit-mask-image: none; mask-image: none; }
  .hero-background-exit {
    -webkit-mask-image: linear-gradient(to right, transparent, rgba(0,0,0,.5) 8%, #000 20%, #000 80%, rgba(0,0,0,.5) 92%, transparent), linear-gradient(to bottom, transparent, rgba(0,0,0,.5) 10%, #000 25%, #000 75%, rgba(0,0,0,.5) 90%, transparent);
    -webkit-mask-composite: source-in;
    mask-image: linear-gradient(to right, transparent, rgba(0,0,0,.5) 8%, #000 20%, #000 80%, rgba(0,0,0,.5) 92%, transparent), linear-gradient(to bottom, transparent, rgba(0,0,0,.5) 10%, #000 25%, #000 75%, rgba(0,0,0,.5) 90%, transparent);
    mask-composite: intersect;
  }
  .enter-button {
    font-size: 12.8px;
    top: calc(var(--hero-enter-y) - 2px);
  }
  .hero-enter-arrow { bottom: calc(100% + .25em + 2px); }
  .hero-enter-chinese { top: calc(100% + .25em + 2px); }
  html[data-hero-title-motion="intro"] .enter-button { opacity: 0; animation: none; }
  html[data-hero-title-motion="intro"] .hero-intro-ready .enter-button {
    animation: hero-mobile-cta-reveal 900ms ease-in-out 2050ms both;
  }
  html[data-hero-title-motion="intro"] .hero-enter-label { opacity: .88; animation: none; }
  html[data-hero-title-motion="intro"] .hero-intro-ready .hero-enter-label {
    animation: hero-cta-breathe 3.6s ease-in-out 2950ms infinite;
  }
  html[data-hero-title-motion="intro"] .hero-intro-ready .hero-enter-arrow { animation-delay: 2950ms; }
  html[data-hero-title-motion="intro"] .hero-is-exiting .cover-image,
  html[data-hero-title-motion="intro"] .hero-is-exiting .particle-field,
  html[data-hero-title-motion="intro"] .hero-is-exiting .hero-title-layer,
  html[data-hero-title-motion="intro"] .hero-is-exiting .enter-button,
  html[data-hero-title-motion="intro"] .hero-is-exiting .hero-enter-label { animation-play-state: paused !important; }
}

@keyframes hero-mobile-cta-reveal {
  from { opacity: 0; }
  to { opacity: 1; }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .hero-enter-label { animation: none; opacity: .55; }
  .next-phase-control { animation: none; opacity: 1; }
  .work-info { animation: none !important; opacity: 1; }
  .opener-composition,
  .opener-title__line-text,
  .opener-title__zh,
  .opener-description,
  .opener-number {
    opacity: 1;
    transform: none;
    animation: none !important;
  }
  .index-page .phase-index-list > li {
    opacity: 1;
    transform: none;
    animation: none !important;
  }
  .site-signature,
  .index-heading,
  .chapter-nav,
  .infinity-mark,
  .portfolio-watermark,
  .stage-navigation,
  .work-progress {
    opacity: 1;
    translate: none;
    animation: none !important;
  }
  .portfolio-page { animation-duration: 1ms !important; }
}

/* Mobile is a separate vertical reading layer; Desktop remains the default. */
.mobile-portfolio { display: none; }

@media (max-width: 767px) {
  html {
    scroll-behavior: auto;
    scroll-snap-type: none;
    background: #070509;
  }

  body.mobile-mode {
    min-width: 0;
    min-height: 100svh;
    overflow-x: clip;
    overflow-anchor: none;
    color: #111;
    background: #070509;
  }

  html[data-mobile-top-theme="light"],
  html[data-mobile-top-theme="light"] body.mobile-mode {
    background: #fff;
  }

  html[data-mobile-top-theme="dark"],
  html[data-mobile-top-theme="dark"] body.mobile-mode {
    background: #000;
  }

  html[data-mobile-top-opener]:not([data-mobile-menu-canvas]),
  html[data-mobile-top-opener]:not([data-mobile-menu-canvas]) body.mobile-mode {
    background-image: var(--mobile-opener-edge-image);
    background-position: center calc(var(--mobile-opener-edge-y, 0px) - env(safe-area-inset-top, 0px));
    background-size: auto calc(100lvh + env(safe-area-inset-top, 0px) + env(safe-area-inset-bottom, 0px));
    background-repeat: no-repeat;
  }

  .cover {
    width: 100%;
    grid-template-columns: minmax(0, 1fr);
    height: 100vh;
    height: 100dvh;
    min-height: calc(100vh + 120px);
    min-height: calc(100dvh + 120px);
    box-sizing: border-box;
    scroll-snap-align: none;
    scroll-snap-stop: normal;
  }
  body.mobile-mode .portfolio-presentation { display: none; }

  .mobile-portfolio {
    position: relative;
    display: block;
    width: 100%;
    min-height: 100svh;
    color: #111;
    background: #fff;
  }

  .mobile-header {
    position: sticky;
    top: 0;
    z-index: 50;
    isolation: isolate;
    width: 100%;
    margin-bottom: calc(-62px - env(safe-area-inset-top));
    color: #111;
    background: transparent;
    transition: color 220ms ease;
  }

  .mobile-header[data-mobile-state="hero"] {
    visibility: hidden;
    pointer-events: none;
  }

  .mobile-header[data-mobile-state="works"] {
    animation: mobile-header-enter 640ms cubic-bezier(.25, .45, .25, 1);
  }

  @keyframes mobile-header-enter {
    from { opacity: 0; transform: translateY(-56px); }
    40% { opacity: 1; }
    to { opacity: 1; transform: translateY(0); }
  }

  .mobile-header[data-mobile-state="opener"] .mobile-brand,
  .mobile-header[data-mobile-state="opener"]::before {
    visibility: hidden;
  }

  .mobile-header[data-mobile-state="opener"].mobile-header--opener-light-edge .mobile-menu-toggle {
    color: #111;
  }

  .mobile-header::before {
    position: absolute;
    top: 0;
    right: 0;
    left: 0;
    z-index: -1;
    height: calc(96px + env(safe-area-inset-top));
    content: "";
    pointer-events: none;
    background: linear-gradient(to bottom,
      #fff 0,
      #fff calc(32px + env(safe-area-inset-top)),
      rgba(255, 255, 255, .957) calc(40px + env(safe-area-inset-top)),
      rgba(255, 255, 255, .844) calc(48px + env(safe-area-inset-top)),
      rgba(255, 255, 255, .684) calc(56px + env(safe-area-inset-top)),
      rgba(255, 255, 255, .5) calc(64px + env(safe-area-inset-top)),
      rgba(255, 255, 255, .316) calc(72px + env(safe-area-inset-top)),
      rgba(255, 255, 255, .156) calc(80px + env(safe-area-inset-top)),
      rgba(255, 255, 255, .043) calc(88px + env(safe-area-inset-top)),
      rgba(255, 255, 255, .011) calc(92px + env(safe-area-inset-top)),
      rgba(255, 255, 255, .003) calc(94px + env(safe-area-inset-top)),
      rgba(255, 255, 255, 0) 100%);
    opacity: 1;
    transition: opacity 320ms cubic-bezier(.22, .61, .36, 1), background 220ms ease;
  }

  .mobile-header--dark {
    color: #f4f4f4;
  }

  .mobile-header--dark::before {
    background: linear-gradient(to bottom,
      #000 0,
      #000 calc(32px + env(safe-area-inset-top)),
      rgba(0, 0, 0, .957) calc(40px + env(safe-area-inset-top)),
      rgba(0, 0, 0, .844) calc(48px + env(safe-area-inset-top)),
      rgba(0, 0, 0, .684) calc(56px + env(safe-area-inset-top)),
      rgba(0, 0, 0, .5) calc(64px + env(safe-area-inset-top)),
      rgba(0, 0, 0, .316) calc(72px + env(safe-area-inset-top)),
      rgba(0, 0, 0, .156) calc(80px + env(safe-area-inset-top)),
      rgba(0, 0, 0, .043) calc(88px + env(safe-area-inset-top)),
      rgba(0, 0, 0, .011) calc(92px + env(safe-area-inset-top)),
      rgba(0, 0, 0, .003) calc(94px + env(safe-area-inset-top)),
      rgba(0, 0, 0, 0) 100%);
  }

  .mobile-header--opener::before {
    opacity: 0;
  }

  .mobile-header__bar {
    display: flex;
    min-height: calc(62px + env(safe-area-inset-top));
    padding: calc(13px + env(safe-area-inset-top)) 18px 5px;
    align-items: center;
    justify-content: space-between;
    box-sizing: border-box;
  }

  .mobile-brand,
  .mobile-menu-toggle,
  .mobile-menu__chapter,
  .mobile-next-phase__control {
    padding: 0;
    border: 0;
    border-radius: 0;
    color: inherit;
    background: transparent;
  }

  .mobile-brand {
    display: grid;
    gap: 1px;
    font-size: 11px;
    font-weight: 400;
    line-height: 1.08;
    text-align: left;
    transform: translateY(0);
    transition: opacity 340ms cubic-bezier(.22, .61, .36, 1), transform 340ms cubic-bezier(.22, .61, .36, 1);
  }

  .mobile-header--opener .mobile-brand {
    opacity: 0;
    pointer-events: none;
    transform: translateY(-14px);
  }

  .mobile-brand > span:first-child {
    font-family: "Flex Sans GB", sans-serif;
    font-weight: 400;
  }

  .mobile-menu-toggle {
    display: grid;
    width: 44px;
    height: 44px;
    flex: 0 0 44px;
    place-items: center;
    cursor: pointer;
  }

  .mobile-menu-icon {
    position: relative;
    display: block;
    width: 18px;
    height: 12px;
    transform: translateX(13px);
  }

  .mobile-menu-icon > span {
    position: absolute;
    left: 0;
    display: block;
    width: 18px;
    height: 1.2px;
    background: currentColor;
    transform-origin: center;
    transition: transform 210ms cubic-bezier(.22, .61, .36, 1), top 210ms cubic-bezier(.22, .61, .36, 1);
  }

  .mobile-menu-icon > span:first-child { top: 3px; }
  .mobile-menu-icon > span:last-child { top: 9px; }

  .mobile-menu-toggle[aria-expanded="true"] .mobile-menu-icon > span:first-child {
    top: 6px;
    transform: rotate(45deg);
  }

  .mobile-menu-toggle[aria-expanded="true"] .mobile-menu-icon > span:last-child {
    top: 6px;
    transform: rotate(-45deg);
  }

  .mobile-header--chapter-01 .mobile-menu-toggle {
    color: #fff;
  }

  .mobile-menu {
    padding: 4px 18px 28px;
    color: inherit;
    background: inherit;
  }

  .mobile-menu[hidden],
  .mobile-menu__about[hidden],
  .mobile-menu__notice[hidden] {
    display: none;
  }

  .mobile-menu ol {
    display: grid;
    gap: 13px;
    margin: 0;
    padding: 0;
    list-style: none;
  }

  .mobile-menu__chapter {
    display: grid;
    grid-template-columns: 28px minmax(0, 1fr);
    width: 100%;
    align-items: start;
    font-size: 10px;
    font-weight: 400;
    line-height: 1.04;
    text-align: left;
  }

  .mobile-menu__number { opacity: .54; }

  .mobile-menu__label {
    display: grid;
    gap: 1px;
  }

  .mobile-menu__about,
  .mobile-menu__notice {
    margin-top: 22px;
    font-size: 9px;
    line-height: 1.3;
    opacity: .66;
  }

  .mobile-menu__about {
    display: flex;
    justify-content: space-between;
  }

  .mobile-menu__notice { margin-bottom: 0; }

  .mobile-reading-flow {
    position: relative;
    width: 100%;
  }

  body.mobile-mode .cover[hidden],
  .mobile-chapter[hidden] { display: none; }

  .mobile-opener {
    position: relative;
    width: 100%;
    height: 100vh;
    height: 100dvh;
    min-height: calc(100vh + 120px);
    min-height: calc(100dvh + 120px);
    box-sizing: border-box;
    overflow: hidden;
    isolation: isolate;
    scroll-margin-top: 0;
  }

  .mobile-opener--01 {
    --mobile-opener-bottom-shift: 10px;
    height: calc(100vh + 120px);
    height: calc(100dvh + 120px);
  }

  .mobile-opener[data-opener-layout-frozen] {
    height: var(--mobile-opener-frozen-height);
    min-height: var(--mobile-opener-frozen-height);
  }

  .mobile-header[data-mobile-state="opener"].mobile-header--dark .mobile-menu-toggle {
    color: #fff;
  }

  .mobile-header[data-mobile-state="opener"].mobile-header--chapter-01 .mobile-menu-toggle {
    color: #fff;
  }

  .mobile-theme-light { background: #fff; }
  .mobile-theme-dark { background: #000; }

  html.mobile-edge-to-edge .mobile-header:not([data-mobile-state="works"]) {
    display: none;
  }

  .mobile-edge-to-edge .mobile-opener-controls {
    position: absolute;
    top: 0;
    right: 0;
    left: 0;
    z-index: 50;
    padding-top: calc(13px + env(safe-area-inset-top));
    color: #fff;
    background: transparent;
  }

  .mobile-edge-to-edge .mobile-opener-controls > .mobile-menu-toggle {
    margin: 0 18px 5px auto;
  }

  .mobile-opener--04 .mobile-opener-controls { color: #5d566d; }

  .mobile-opener__image {
    position: absolute;
    inset: 0;
    z-index: 0;
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
    transform: translateY(24px) scale(1.02);
    transition: transform 480ms cubic-bezier(.16, 1, .3, 1);
  }

  /* Use the resolved viewport height, not a replaced image's initial percentage sizing. */
  .mobile-opener--01 > .mobile-opener__image {
    height: inherit;
    min-height: inherit;
  }

  .mobile-opener.is-visible .mobile-opener__image {
    transform: translateY(0) scale(1);
  }

  .mobile-opener__copy {
    position: absolute;
    inset: 0;
    bottom: auto;
    top: 64px;
    height: var(--mobile-opener-frozen-copy-height, 100svh);
    z-index: 1;
    color: #fff;
    font-weight: 300;
    pointer-events: none;
    opacity: .92;
    transform: translateY(36px);
    transition: transform 480ms cubic-bezier(.16, 1, .3, 1) 60ms, opacity 480ms ease-out 60ms;
  }

  .mobile-opener.is-visible .mobile-opener__copy {
    opacity: 1;
    transform: translateY(0);
  }

  .mobile-opener__title {
    --mobile-opener-title-rise: 36px;
    container-type: inline-size;
    position: absolute;
    top: var(--mobile-opener-frozen-title-top, calc(8.5svh - var(--mobile-opener-title-rise)));
    left: 18px;
    right: 18px;
    margin: 0;
    font-weight: 300;
    line-height: .98;
  }

  .mobile-opener__title-en,
  .mobile-opener__title-en > span,
  .mobile-opener__title-zh,
  .mobile-opener__description > span {
    display: block;
  }

  .mobile-opener__title-en {
    font-size: clamp(3.7rem, 15.55vw, 4.25rem);
    font-size: min(clamp(3.7rem, 15.55vw, 4.25rem), 17.65cqw);
    white-space: normal;
  }

  .mobile-opener__title-en > span:nth-child(2) { padding-left: 9%; }
  .mobile-opener--02 .mobile-opener__title-en > span:nth-child(2) { padding-left: 8%; }

  .mobile-opener--03 .mobile-opener__title-en {
    font-size: clamp(3.2rem, 13.7vw, 3.75rem);
    font-size: 15.5cqw;
  }

  .mobile-opener--04 .mobile-opener__copy { color: #5d566d; }

  .mobile-opener--04 .mobile-opener__title-en {
    font-size: clamp(2.27rem, 10.85vw, 2.86rem);
    font-size: 11.95cqw;
  }

  .mobile-opener--04 .mobile-opener__title-en > span:nth-child(2) {
    padding-left: 0;
    text-align: right;
  }

  .mobile-opener__title-zh {
    margin-top: 14px;
    font-size: clamp(2.65rem, 11.45vw, 3.08rem);
    line-height: 1.08;
  }

  .mobile-opener__description {
    position: absolute;
    left: 18px;
    right: 18px;
    bottom: var(--mobile-opener-frozen-description-bottom, calc(170px - var(--mobile-opener-bottom-shift, 0px)));
    margin: 0;
    font-size: 13px;
    line-height: 1.22;
  }

  .mobile-opener__number {
    position: absolute;
    left: 18px;
    bottom: var(--mobile-opener-frozen-number-bottom, calc(70px - var(--mobile-opener-bottom-shift, 0px)));
    font-size: var(--mobile-opener-frozen-number-size, 5.35rem);
    line-height: .82;
  }

  .mobile-opener--01 .mobile-opener__description {
    margin-bottom: -6px;
  }

  .mobile-opener--02 :is(.mobile-opener__description, .mobile-opener__number) {
    text-shadow: 0 0 3px rgba(0, 0, 0, .3), 0 1px 8px rgba(0, 0, 0, .24);
  }

  .mobile-works {
    position: relative;
    padding: 92px 18px 18px;
    color: #111;
    background: #fff;
  }

  .mobile-work {
    width: 100%;
    margin: 0 0 84px;
    scroll-margin-top: 72px;
  }

  .mobile-work:last-child { margin-bottom: 0; }

  .mobile-chapter-end {
    display: flex;
    width: 100%;
    flex-direction: column;
    padding-bottom: 26px;
    background: #fff;
  }

  .mobile-chapter-end > .mobile-work { margin-bottom: 0; }

  .mobile-works.mobile-theme-dark,
  .mobile-theme-dark .mobile-chapter-end {
    color: #fff;
    background: #000;
  }

  .mobile-work[data-mobile-theme="light"] {
    color: #111;
    background: #fff;
  }

  .mobile-works.mobile-theme-dark .mobile-work[data-mobile-theme="light"] {
    position: relative;
    isolation: isolate;
  }

  .mobile-works.mobile-theme-dark .mobile-work[data-mobile-theme="light"]::before {
    position: absolute;
    inset: 0 -18px;
    z-index: -1;
    content: "";
    background: #fff;
  }

  .mobile-work__info { overflow-wrap: anywhere; }

  .mobile-work__sequence {
    display: grid;
    gap: 24px;
    width: 100%;
  }

  .mobile-work__figure {
    width: 100%;
    margin: 0;
    background: transparent;
  }

  .mobile-work__image {
    display: block;
    width: 100%;
    height: auto;
    color: transparent;
    background: transparent;
  }

  .mobile-work__image[data-src] {
    font-size: 0;
    line-height: 0;
  }

  .mobile-work__info {
    display: grid;
    gap: 2px;
    width: 100%;
    margin-top: 24px;
  }

  .mobile-work__info h2,
  .mobile-work__info p {
    margin: 0;
    font-size: 11px;
    font-weight: 400;
    line-height: 1.24;
  }

  .mobile-work__info p { opacity: .6; }

  .mobile-work__roles > span,
  .mobile-work__notes > span { display: block; }

  .mobile-work__roles > span + span { margin-top: 4px; }

  [data-mobile-chapter-page="04"] .mobile-work__info .mobile-work__roles {
    margin-top: 1.24em;
  }

  [data-mobile-chapter-page="04"] .mobile-work__roles > span:first-child {
    font-family: "Flex Sans GB", sans-serif;
    font-weight: 600;
  }

  .mobile-work__info .mobile-work__notes { margin-top: 11px; }

  .mobile-work__notes > span + span { margin-top: 4px; }

  .mobile-next-phase {
    display: flex;
    width: 100%;
    min-height: 162px;
    padding: 84px 18px 26px;
    align-items: flex-start;
    justify-content: center;
    box-sizing: border-box;
    background: #fff;
  }

  .mobile-next-phase.mobile-theme-dark { background: #000; }

  .mobile-next-phase__control {
    display: inline-grid;
    grid-template-columns: max-content auto;
    gap: 5px;
    align-items: center;
    padding: 0;
    border: 0;
    color: #111;
    background: transparent;
    cursor: pointer;
    font-size: 10px;
    line-height: 1.08;
    text-align: right;
    animation: mobile-next-phase-breathe 1600ms ease-in-out infinite;
    transform-origin: center;
  }

  .mobile-theme-dark .mobile-next-phase__control { color: #fff; }

  .mobile-next-phase__labels {
    display: grid;
    justify-items: end;
    gap: 1px;
    text-align: right;
  }

  .mobile-next-phase__labels > span { display: block; }

  .mobile-next-phase__arrow {
    display: inline-block;
    align-self: center;
  }

  .mobile-opener--02 { scroll-margin-top: 0; }

  @keyframes mobile-next-phase-breathe {
    0%, 100% { opacity: .32; transform: scale(.985); }
    50% { opacity: 1; transform: scale(1.025); }
  }

}

@media (max-width: 767px) and (max-height: 700px) {
  .mobile-opener__title { top: var(--mobile-opener-frozen-title-top, calc(56px - var(--mobile-opener-title-rise))); }
  .mobile-opener__description { bottom: var(--mobile-opener-frozen-description-bottom, calc(146px - var(--mobile-opener-bottom-shift, 0px))); }
  .mobile-opener__number { bottom: var(--mobile-opener-frozen-number-bottom, calc(64px - var(--mobile-opener-bottom-shift, 0px))); font-size: var(--mobile-opener-frozen-number-size, 4.75rem); }
}

@media (max-width: 767px) and (prefers-reduced-motion: reduce) {
  .mobile-opener__image,
  .mobile-opener__copy {
    opacity: 1;
    transform: none;
    transition: none;
  }

  .mobile-header { animation: none; }

  .mobile-next-phase__control { animation: none; }

  .mobile-header,
  .mobile-header::before,
  .mobile-brand,
  .mobile-menu-toggle,
  .mobile-menu-icon > span {
    transition: none;
  }
}