:root { --progress: 0; --ink: #050505; }
* { box-sizing: border-box; }
html { background: #060606; }
body { margin: 0; overflow-x: hidden; color: #fff; font-family: Inter, "PingFang SC", "Microsoft YaHei", sans-serif; }
.fold { height: max(2993px, 360vh); }
.fold__stage { position: sticky; top: 0; height: 100vh; height: 100svh; height: 100dvh; overflow: hidden; isolation: isolate; background: #060606; }

.scene { position: absolute; inset: 0; pointer-events: none; }
.scene--initial { z-index: 1; will-change: opacity; }
.scene__background { position: absolute; inset: 0; display: block; width: 100%; height: 100%; object-fit: contain; object-position: center; }
.letter { position: absolute; z-index: 2; top: 28.8%; width: 52.8vw; height: auto; max-height: 57.5vh; object-fit: contain; will-change: transform, opacity; }
.letter--left { left: 1.9%; }
.letter--right { right: 1.9%; }

/* The device grows by opening two leaves. Screen artwork is never stretched to fill it. */
.fold-device { --device-w: 1000px; --device-h: 684px; --phone-w: min(28vw, 538px); --phone-h: min(69vh, 746px); --radius: 28px; --leaf: 0; --shell-opacity: 0; --hardware-opacity: 1; --screen-opacity: 0; --nav-opacity: 0; position: absolute; z-index: 4; top: 50%; left: 50%; width: var(--device-w); height: var(--device-h); transform: translate3d(-50%, -50%, 0); transform-style: preserve-3d; perspective: 1500px; will-change: width, height; }
.device-content { position: absolute; z-index: 3; inset: 2px; border-radius: calc(var(--radius) - 2px); background: transparent; overflow: visible; opacity: var(--screen-opacity); transform-style: preserve-3d; will-change: opacity; }
.mobile-expanded-art { display: none; }
/* A project owns the whole open display. Hide the homepage's two leaves rather
   than allowing their outline to peek out behind the project's own frame. */
.fold-device.is-project-view .device-content { visibility: hidden; }
.inner-page { position: absolute; top: 0; bottom: 0; width: 50%; overflow: hidden; background: #071123; backface-visibility: hidden; transform-style: preserve-3d; will-change: transform, opacity; }
.inner-page::after { content: ""; position: absolute; z-index: 2; inset: 0; pointer-events: none; border: 2px solid rgba(255,255,255,.92); box-shadow: 0 12px 26px #0007, 0 0 0 1px #ffffff55; }
.inner-page img { position: absolute; inset: 0; display: block; width: 200%; height: 100%; max-width: none; object-fit: contain; object-position: center; }
.inner-page img.is-project-art { height: auto; min-height: 100%; object-fit: initial; object-position: top center; }
.inner-page--right { right: 0; opacity: var(--right-inner-opacity, 0); border-radius: var(--right-inner-radius, 0) calc(var(--radius) - 2px) calc(var(--radius) - 2px) var(--right-inner-radius, 0); }
.inner-page--right::after { border-left: 0; border-radius: var(--right-inner-radius, 0) calc(var(--radius) - 2px) calc(var(--radius) - 2px) var(--right-inner-radius, 0); opacity: 1; }
.inner-page--right img { transform: translateX(-50%); }
.inner-page--left { left: 0; transform-origin: 100% 50%; opacity: var(--left-inner-opacity, 0); border-radius: calc(var(--radius) - 2px) 0 0 calc(var(--radius) - 2px); }
.inner-page--left::after { border-right: 0; border-radius: calc(var(--radius) - 2px) 0 0 calc(var(--radius) - 2px); opacity: 1; }
.device-content__desktop { z-index: 2; opacity: 0; }
.phone-portrait { position: absolute; z-index: 8; top: 50%; left: 50%; width: var(--phone-w); height: var(--phone-h); padding: 2px; transform: translate3d(var(--phone-shift-x, -50%), var(--phone-shift-y, -50%), 18px) rotateY(var(--phone-turn, 0deg)) rotateX(var(--phone-flip-x, 0deg)); transform-origin: left center; border: 2px solid rgba(255,255,255,.96); border-radius: 32px; background: #071123; box-shadow: 0 12px 26px #0008, 0 0 0 1px #ffffff92; overflow: hidden; backface-visibility: hidden; will-change: opacity, transform; }
.phone-portrait img { display: block; width: 100%; height: 100%; object-fit: contain; object-position: center; border-radius: 27px; }
.device-shell { display: none; }
.home-nav { position: absolute; z-index: 20; left: 50%; bottom: 6.5%; display: flex; align-items: center; gap: clamp(8px, 1.1vw, 20px); margin: 0; padding: clamp(4px, .42vw, 8px); transform: translate3d(-50%, 10px, 48px); border-radius: 999px; background: rgba(21, 28, 43, .68); box-shadow: 0 7px 20px rgba(0,0,0,.18); opacity: var(--nav-opacity); pointer-events: none; white-space: nowrap; will-change: opacity, transform; }
.home-nav__item { display: inline-flex; align-items: center; justify-content: center; min-width: clamp(38px, 4.4vw, 74px); height: clamp(25px, 2.5vw, 43px); padding: 0 clamp(7px, .65vw, 13px); border: 0; border-radius: 999px; color: #fff; background: transparent; font: 500 clamp(10px, 1vw, 18px)/1 Inter, "PingFang SC", sans-serif; letter-spacing: .02em; text-decoration: none; cursor: pointer; }
.home-nav__item--active { color: #192033; background: #fff; }
.project-display { position: absolute; z-index: 7; inset: 0; display: none; overflow-y: auto; overscroll-behavior: contain; box-sizing: border-box; border: 2px solid rgba(255,255,255,.92); border-radius: var(--radius); background: #fff; box-shadow: 0 15px 32px #0008, 0 0 0 1px #ffffff66; scrollbar-width: none; will-change: opacity; }
.project-display.is-active { display: block; }
.project-display.is-returning { opacity: 0; visibility: hidden; pointer-events: none; }
.project-screen { display: none; margin: 0; padding: 0; }
.project-screen.is-active { display: block; }
.project-screen img { display: block; width: 100%; max-width: none; height: auto; margin: 0; padding: 0; }
.project-display::-webkit-scrollbar { width: 0; height: 0; }
.project-fold { position: absolute; z-index: 8; inset: 0; display: none; transform-style: preserve-3d; pointer-events: none; }
.project-fold.is-active { display: block; }
.project-fold__flat { position: absolute; z-index: 0; inset: 0; overflow: hidden; border: 2px solid rgba(255,255,255,.92); border-radius: var(--radius); background: #fff; box-shadow: 0 15px 32px #0008, 0 0 0 1px #ffffff66; opacity: var(--project-flat-opacity, 0); }
.project-fold__flat img { display: block; width: 100%; max-width: none; height: auto; margin: 0; }
.project-fold__page { position: absolute; z-index: 1; top: 0; bottom: 0; width: 50%; overflow: hidden; background: #071123; backface-visibility: hidden; transform-style: preserve-3d; will-change: transform; }
.project-fold__page::after { content: ""; position: absolute; z-index: 2; inset: 0; border: 2px solid rgba(255,255,255,.92); box-shadow: 0 12px 26px #0007, 0 0 0 1px #ffffff55; pointer-events: none; }
.project-fold__page img { position: absolute; z-index: 0; top: 2px; left: 2px; display: block; width: calc(200% - 4px); max-width: none; height: auto; min-height: calc(100% - 4px); object-fit: initial; object-position: top center; }
.fold-device.is-flow-return .inner-page,
.project-fold[data-project="flow"] .project-fold__page { background: #f65ca6; }
/* Flow's first visual is deliberately horizontal; preserve it in full and
   continue its bottom pink field instead of enlarging or cropping it. */
.fold-device.is-flow-return .inner-page img.is-project-art,
.project-fold[data-project="flow"] .project-fold__page img { height: 100%; min-height: 0; object-fit: contain; object-position: top center; }

/* Keep the two physical leaves visually joined at their hinge. */
.project-fold__page { isolation: isolate; }
.project-fold__page--left::after { right: -1px; }
.project-fold__page--right::after { left: -1px; }
.project-fold__page--left { left: 0; transform-origin: 100% 50%; border-radius: var(--radius) 0 0 var(--radius); }
.project-fold__page--left::after { border-right: 0; border-radius: var(--radius) 0 0 var(--radius); }
.project-fold__page--right { right: 0; transform-origin: 0 50%; border-radius: 0 var(--radius) var(--radius) 0; }
.project-fold__page--right::after { border-left: 0; border-radius: 0 var(--radius) var(--radius) 0; }
.project-fold__page--right img { transform: translateX(-50%); }

/* Desktop: keep artwork, rounded outline and shadow on the exact same 3D
   surface. Paint containment prevents the very tall project images from being
   split into oversized GPU tiles while the leaf is almost flat. */
@media (min-width: 721px) {
  .project-fold__page { contain: layout paint; }
}
.project-scroll-thumb { position: absolute; z-index: 8; top: 7px; right: 6px; width: 4px; height: var(--project-thumb-height, 0px); transform: translateY(var(--project-thumb-y, 0px)); border-radius: 999px; background: rgba(255,255,255,.68); box-shadow: 0 1px 3px rgba(0,0,0,.28); opacity: 0; pointer-events: none; transition: opacity .22s ease; }
.project-scroll-thumb.is-visible { opacity: 1; }
.project-display.is-returning ~ .home-nav { pointer-events: none; }
/* There is only one moving page: the portrait phone. These legacy planes stay out
   of the rendered scene so a third translucent surface can never appear. */
.device-panel, .device-hinge { display: none; }

.scroll-copy { position: absolute; z-index: 7; bottom: 4.5%; left: 50%; margin: 0; padding: 10px 17px; transform: translateX(-50%); border-radius: 999px; background: #ffffffd9; color: #151515; font-size: 12px; letter-spacing: .03em; white-space: nowrap; box-shadow: 0 4px 14px #0002; will-change: opacity, transform; }
.scroll-copy span { margin-left: 7px; font-size: 15px; }

@media (max-width: 720px) {
  .fold { height: 310svh; height: 310dvh; }
  /* Mobile gets its own composition: the scene fills the tall canvas and the
     two pieces of lettering deliberately sit on separate vertical beats. */
  .scene__background { object-fit: cover; object-position: center; }
  .letter { width: 94vw; max-height: none; }
  .letter--left { top: 10%; left: -31vw; }
  .letter--right { top: auto; right: -34vw; bottom: 13%; }
  /* One continuous opened surface: the supplied portrait art is never cut in
     half, so there can be no centre line, duplicate image or mismatched crop. */
  .device-content { inset: 0; overflow: hidden; border: 2px solid rgba(255,255,255,.92); border-radius: var(--radius); box-shadow: 0 12px 26px #0007, 0 0 0 1px #ffffff55; }
  .inner-page { display: none; }
  .mobile-expanded-art { position: absolute; inset: 0; display: block; width: 100%; height: 100%; object-fit: cover; object-position: center; }
  .phone-portrait { border-radius: 25px; transform-origin: 50% 0; }
  .phone-portrait img { border-radius: 20px; object-fit: cover; }
  .home-nav { bottom: calc(5.5% + env(safe-area-inset-bottom)); gap: 5px; padding: 4px; }
  .home-nav__item { min-width: 0; height: 32px; padding: 0 8px; font-size: 11px; }
  .project-display { overscroll-behavior-y: contain; -webkit-overflow-scrolling: touch; }
  .project-display.is-returning { opacity: 0; transition: none; }
  .project-fold__flat { display: none; }
  /* A returning project is one leaf as well. The second mobile panel was the
     source of the duplicated project frame during the reverse fold. */
  .project-fold__page { left: 0; width: 100%; height: 100%; bottom: auto; contain: layout paint style; border-radius: var(--radius); transform: translateZ(0); transform-origin: 50% 0; -webkit-backface-visibility: hidden; backface-visibility: hidden; }
  .project-fold__page img { top: 0; left: 0; width: 100%; height: 100%; min-height: 0; object-fit: cover; object-position: top center; transform: translateZ(0); -webkit-backface-visibility: hidden; backface-visibility: hidden; }
  .project-fold__page--left { top: 0; }
  .project-fold__page--left::after { border: 2px solid rgba(255,255,255,.92); border-radius: var(--radius); }
  .project-fold__page--right { display: none; }
  .scroll-copy { bottom: calc(6% + env(safe-area-inset-bottom)); }
}
@media (prefers-reduced-motion: reduce) { .fold { height: 100vh; } }