.home-scroll-story { scroll-behavior: auto; }
.home-loop {
  /* Paint beyond Safari's collapsed toolbar without resizing on every scroll.
     Reading distances and gallery placement still use the small viewport. */
  --home-surface-height: 100vh;
  --home-surface-height: 100lvh;
  /* The exiting stage moves; its underlying paper must retain the scene tone. */
  background: rgb(var(--panels-tone, 255) var(--panels-tone, 255) var(--panels-tone, 255));
}
.home-panel,
body.is-home-transitioning .home-panel {
  position: fixed;
  inset: 0;
  z-index: 6;
  height: 100svh;
  min-height: 0;
  background: #ffffff;
  opacity: var(--home-panel-opacity, 1);
  transform: none;
}
.home-panel .intro-grid,
body.is-home-transitioning .home-panel .intro-grid {
  transform: translate3d(0, var(--home-header-y, 0px), 0);
  transition: none;
}
.home-panel .bio,
.home-panel .contact-links,
.home-panel .work-link {
  opacity: 1;
  transform: none;
}
.home-transition-wash { background: #ffffff; }
.home-loop-mark,
body.is-selected-view .home-loop-mark,
body.is-loop-settling .home-loop-mark,
body.is-loop-settling-out .home-loop-mark {
  opacity: 1;
  visibility: visible;
  transform: none;
  transition: none;
  animation: none;
  filter: none;
}
.home-persistent-footer {
  position: fixed;
  z-index: 80;
  inset: auto var(--page-margin) 20px;
  padding: 0;
  pointer-events: none;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  column-gap: var(--grid-gutter);
  font-size: 14px;
  line-height: 14px;
}
.home-persistent-footer .year-digits span:nth-child(2) { grid-column: 2; justify-content: flex-start; }
.home-persistent-footer .year-digits span:nth-child(3) { grid-column: 3; justify-content: flex-start; }
.home-persistent-footer .year-digits span:nth-child(4) { grid-column: 4; justify-content: flex-start; }
.home-persistent-footer .year-digits > span {
  animation: none;
  opacity: 1;
  transform: none;
  filter: none;
}
html[data-home-scroll="disabled"] .home-persistent-footer { display: grid; }
.home-panel .art-stage,
body.is-home-transitioning .home-panel .art-stage {
  transform: none;
  opacity: 1;
  transition: none;
  will-change: opacity;
}
.selected-works,
body.is-home-transitioning .selected-works {
  height: 1500svh;
  min-height: 0;
  padding: 0;
  background: transparent;
  z-index: 5;
}
.selected-panels-stage {
  position: sticky;
  top: 0;
  height: var(--home-surface-height);
  overflow: hidden;
  background: rgb(var(--panels-tone, 255) var(--panels-tone, 255) var(--panels-tone, 255));
  opacity: 1;
}
.selected-panels-stage { transform: translate3d(0, var(--return-stage-exit-y, 0px), 0); }
body.is-loop-returning .selected-panels-stage {
  /* The return field owns the black surface. An opaque outgoing sheet would
     cut its holes along the sheet's straight, upward-moving bottom edge. */
  background: transparent;
}
.loop-return {
  position: fixed;
  inset: 0;
  height: var(--home-surface-height);
  background: #ffffff;
  visibility: hidden;
  pointer-events: none;
}
body.is-loop-returning .loop-return { visibility: visible; }
.loop-return .loop-return-stage,
body.is-loop-returning .loop-return-stage,
body.is-loop-settling .loop-return-stage {
  height: var(--home-surface-height);
}
body.is-loop-returning .loop-return-stage { z-index: 7; }
body.is-loop-returning .selected-works { z-index: 8; }
body.is-home-transitioning .selected-panels-stage {
  position: sticky;
  top: 0;
}
body .selected-panels-stage .selected-works-scene {
  position: absolute;
  inset: 0;
  height: 100%;
  margin: 0;
  background: #ffffff;
  color: #000000;
  transform: none;
  clip-path: none;
  opacity: calc(var(--about-entry-opacity, 0) * var(--about-opacity, 1));
  visibility: visible;
  pointer-events: none;
}
.about-title, .about-copy {
  translate: 0 var(--about-exit-y, 0px);
  opacity: var(--about-text-visible, 0);
}
.selected-works-web { display: none; }
.about-art {
  position: absolute;
  width: min(100%, calc(100svh * 16 / 9));
  aspect-ratio: 16 / 9;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}
.about-image, .about-outer, .about-inner { position: absolute; }
.about-image {
  left: 12.5%; top: -11.2%; width: 75%; height: 115.556%;
  transform: rotate(7.16deg);
}
.about-outer {
  left: 30.717%; top: 4.444%; width: 38.307%; height: 91.111%;
  transform: rotate(7.16deg);
  mix-blend-mode: difference;
}
.about-inner {
  left: 34.33%; top: 26.68%; width: 29.765%; height: 57.491%;
  transform: rotate(7.16deg);
}
.about-art img { display: block; width: 100%; height: 100%; }
.about-art { pointer-events: auto; }
.home-particle-field {
  position: fixed;
  z-index: 10;
  inset: 0 0 auto;
  width: 100%; height: var(--home-surface-height);
  opacity: 0;
  transition: none;
  pointer-events: none;
}
body.is-unified-artwork .home-particle-field { opacity: var(--home-field-opacity, 1); }
body.is-unified-artwork.is-intro .home-particle-field { opacity: 0; }
html.home-arrival-pending .home-particle-field,
html.home-arrival-pending .home-panel .art-stage { visibility: hidden; }
body.is-unified-artwork.is-loop-settling-out .home-particle-field { opacity: 1; }
html[data-home-scroll="disabled"] .home-loop > .home-particle-field { display: block; }
body.is-unified-artwork .home-panel .art-stage { opacity: 1; }
body.is-unified-artwork .home-panel [data-magnetic-source],
body.is-unified-artwork .about-art [data-magnetic-source] { visibility: hidden; }
body.is-unified-artwork .about-art.is-model-fallback [data-magnetic-source] { visibility: visible; opacity: 1; }
body:not(.is-unified-artwork) .home-panel [data-magnetic-source] { opacity: 1; }
body:not(.is-unified-artwork) .about-art [data-magnetic-source] { opacity: var(--selected-entry, 0); }
body.is-unified-artwork .home-scroll-morph { display: none; }
.about-art > [data-magnetic-source], .about-art > .magnetic-canvas {
  opacity: calc(1 - var(--entry-art-active, 0));
}
.about-art > .magnetic-canvas { opacity: 0; }
.about-art.is-particles > [data-magnetic-source] { opacity: 0; }
.about-art.is-particles > .magnetic-canvas { opacity: calc(1 - var(--entry-art-active, 0)); }
body.is-home-transitioning .home-scroll-morph {
  opacity: var(--entry-art-active, 0);
  visibility: visible;
  filter: none;
  transform: none;
}
body.is-home-transitioning .home-panel .art-stage {
  opacity: calc(1 - var(--entry-art-active, 0));
}
body.is-home-transitioning .home-panel .bio,
body.is-home-transitioning .home-panel .contact-links,
body.is-home-transitioning .home-panel .work-link { transform: none; }
body.is-home-transitioning .selected-panels-stage .about-art > .magnetic-canvas { opacity: 0; }
body.is-home-transitioning .selected-panels-stage .selected-works-scene {
  opacity: calc(var(--entry-art-active, 0) + (1 - var(--entry-art-active, 0)) * var(--about-entry-opacity, 0));
  background: transparent;
}
.about-title {
  position: absolute;
  top: 50%; left: var(--page-margin);
  margin: 0;
  font-size: 80px;
  font-weight: 400;
  line-height: 1;
}
.about-copy {
  position: absolute;
  top: 50%; right: var(--page-margin);
  width: calc((100% - var(--page-margin) * 2 - var(--grid-gutter) * 3) / 4);
  font-size: 16px;
  font-weight: 500;
  line-height: 24px;
}
.about-copy p { margin: 0; }
.selected-feature {
  position: absolute;
  z-index: 2;
  inset: 0;
  height: 100svh;
  margin: 0;
  background: transparent;
  opacity: var(--feature-opacity, 0);
  pointer-events: none;
}
.selected-feature .selected-works-header,
body.is-home-transitioning.is-selected-ready .selected-feature .selected-works-header,
body.is-loop-returning .selected-feature .selected-works-header {
  position: absolute;
  top: 50%; left: var(--page-margin); right: var(--page-margin);
  bottom: auto;
  width: auto; height: auto;
  margin: 0; padding: 0;
  transform: translateY(-50%);
  align-items: center;
  font-size: 64px;
  font-weight: 400;
  mix-blend-mode: difference;
  pointer-events: none;
  opacity: 1;
}
.selected-feature .selected-works-header h2,
.selected-feature .selected-works-range,
body.is-selected-ready .selected-feature .selected-works-header h2,
body.is-selected-ready .selected-feature .selected-works-range {
  opacity: 1; filter: none; transform: none;
  animation: none;
  font-weight: 400;
}
.selected-feature .selected-works-range { align-self: center; }
body .selected-feature .selected-project-track {
  position: absolute;
  inset: 0;
  display: flex;
  width: 100%;
  height: 100%;
  gap: 0;
  margin: 0;
  padding: 0;
  opacity: 1;
  filter: none;
  transform: translate3d(var(--project-track-x, 0px), 0, 0);
  will-change: transform;
  contain: none;
}
body .selected-project-track > .selected-project {
  position: relative;
  display: flex;
  flex: 0 0 100%;
  width: 100%;
  height: 100%;
  margin: 0;
  justify-content: center;
  align-items: center;
  opacity: 1;
  transform: none;
  animation: none;
  pointer-events: none;
}
.selected-project-card {
  position: relative;
  width: calc((100% - var(--page-margin) * 2 - var(--grid-gutter)) / 2);
  pointer-events: auto;
}
.selected-project-track > .selected-project:focus-visible { outline: none; }
.selected-project-track > .selected-project:focus-visible .selected-project-card { outline: 2px solid currentColor; outline-offset: 6px; }
.selected-project-card .selected-project-visual { aspect-ratio: 93 / 58; }
.selected-project-card img { aspect-ratio: auto; }
.selected-project-card video {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.home-cover-roll-canvas {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  z-index: 1;
  pointer-events: none;
}
.selected-feature .selected-project-track { z-index: 2; }
.selected-project-visual.has-cover-roll,
.selected-project-visual.has-cover-roll.is-media-entering {
  /* The shared surface owns the cover's mask and deformation. Keep the DOM
     slot at full size so native hit areas and its caption never move. */
  animation: none;
  clip-path: none;
  transform: none;
}
.selected-project-visual.has-cover-roll > img,
.selected-project-visual.has-cover-roll > video { opacity: 0; }
.selected-project-card .selected-project-meta {
  position: absolute;
  inset: calc(100% + 20px) 0 auto;
  opacity: var(--caption-opacity,0);
  transition: opacity 180ms ease-out;
  padding: 0;
}
.loop-return-info { display: block; color: #000000; mix-blend-mode: normal; pointer-events: auto; }
.loop-return-info > .intro-grid {
  color: #000000;
  mix-blend-mode: normal;
  transform: none;
  transition: none;
}
.loop-return-info .bio,
.loop-return-info .contact-links,
.loop-return-info .work-link {
  opacity: 1;
  transform: none;
  animation: none;
}
.loop-return-info a::after { animation: none; transition: none; }
body.is-loop-returning .loop-return-info,
body.is-loop-settling .loop-return-info { opacity: 1; }
body.is-loop-settling .home-panel .intro-grid,
body.is-loop-settling-out .home-panel .intro-grid {
  opacity: 1; transform: none; transition: none;
}
.home-entrance-text .project-title-word { display: inline-block; position: relative; }
.home-entrance-text .project-character-mask {
  display: inline-block;
  overflow: hidden;
  vertical-align: top;
  padding: 0.14em 0.08em;
  margin: -0.14em -0.08em;
}
.home-entrance-text .project-character-mask.is-character-entered { overflow: visible; }
.home-entrance-text .project-title-character,
.home-entrance-text .home-info-character {
  display: inline-block;
  opacity: 0;
  transform: translate3d(0, 100%, 0);
}
.home-entrance-text.is-text-entering .project-title-character {
  animation: home-character-enter 1120ms cubic-bezier(0.22, 1, 0.36, 1) var(--character-delay, 0ms) both;
}
.home-entrance-text.is-text-entering .home-info-character {
  animation: home-character-enter 800ms cubic-bezier(0.22, 1, 0.36, 1) calc(220ms + var(--character-delay, 0ms)) both;
}
.selected-project-meta .home-entrance-text.is-text-entering .home-info-character {
  animation-delay: var(--character-delay, 0ms);
}
.home-entrance-text .title-ink-bridges {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  overflow: visible;
  pointer-events: none;
  fill: currentColor;
}
.home-cover-entrance { clip-path: inset(0 0 100% 0); }
.home-cover-entrance.is-media-entering {
  animation: home-cover-enter 1440ms cubic-bezier(0.25, 0.7, 0.2, 1) both;
}
.home-cover-entrance.is-media-entered { animation: none; clip-path: none; transform: none; }
@keyframes home-character-enter {
  from { opacity: 0; transform: translate3d(0, 100%, 0); }
  30% { opacity: 1; }
  to { opacity: 1; transform: translate3d(0, 0, 0); }
}
@keyframes home-cover-enter {
  from { clip-path: inset(4% 3% 100% 3%); transform: scale(0.93); }
  to { clip-path: inset(0); transform: scale(1); }
}
@media (prefers-reduced-motion: reduce) {
  .home-entrance-text.is-text-entering .project-title-character,
  .home-entrance-text.is-text-entering .home-info-character,
  .home-entrance-text .project-title-character,
  .home-entrance-text .home-info-character {
    animation: none;
    opacity: 1;
    transform: none;
  }
  .home-cover-entrance,
  .home-cover-entrance.is-media-entering { animation: none; clip-path: none; transform: none; }
}
@media (max-width: 1200px) {
  .about-title { font-size: 48px; }
  .about-copy { font-size: 14px; line-height: 20px; }
  .selected-feature .selected-works-header { font-size: 40px; }
}
@media (max-width: 600px) {
  .about-art { width: min(150%, calc(100svh * 0.75)); top: 35%; }
  .about-title { top: 12%; font-size: 32px; }
  .about-copy { top: auto; bottom: 70px; width: calc(100% - var(--page-margin) * 2); font-size: 12px; line-height: 18px; }
  .selected-project-card { width: calc(100% - var(--page-margin) * 2); }
  .selected-feature .selected-works-header { font-size: 24px; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 8px; }
  .selected-feature .selected-works-header h2 { grid-column: 1 / 3; }
  .selected-feature .selected-works-range { grid-column: 3 / 5; font-size: 20px; grid-template-columns: max-content minmax(12px, 1fr) max-content; gap: 6px; }
  .selected-works-rule { height: 4px; }
}

/* ABOUT is the outgoing sheet of paper. Its live field uses this same contour.
   The black stage and the next project are already underneath the receding ink. */
.home-liquid-defs { position: absolute; pointer-events: none; overflow: hidden; }
.has-liquid-boundary.is-liquid-crossing .selected-panels-stage .selected-works-scene {
  z-index: 3;
  -webkit-clip-path: url(#home-liquid-paper);
  clip-path: url(#home-liquid-paper);
}
.has-liquid-boundary.is-liquid-crossing > .home-particle-field {
  -webkit-clip-path: url(#home-liquid-paper);
  clip-path: url(#home-liquid-paper);
}
.has-liquid-boundary.is-liquid-crossing > .home-particle-field[data-liquid-mask="gpu"] {
  -webkit-clip-path: none; clip-path: none;
}

/* First two compositions share one continuous document coordinate system. */
.home-panel, body.is-home-transitioning .home-panel {
  transform: translate3d(0, var(--reading-home-y, 0px), 0);
}
.home-panel .intro-grid, body.is-home-transitioning .home-panel .intro-grid { transform: none; }
body .selected-panels-stage .selected-works-scene,
body.is-home-transitioning .selected-panels-stage .selected-works-scene {
  height: var(--reading-about-height, max(100svh, calc(100vw * 1628 / 1920)));
  transform: translate3d(0, var(--reading-about-y, 100svh), 0);
  background: transparent;
  overflow: visible;
  z-index: 3;
}
.about-info-grid {
  position: relative;
  display: grid;
  grid-template-columns: repeat(8, minmax(0,1fr));
  column-gap: var(--grid-gutter);
  margin: 0 var(--page-margin);
  padding-top: calc(100vw * 200 / 1920);
  font-size: 14px; line-height: 18px; font-weight: 500;
}
.about-portrait {
  position: relative;
  grid-column: 1;
  grid-row: 1;
  align-self: start;
  width: min(120px, 100%);
  aspect-ratio: 3 / 4;
  margin: 0;
  overflow: hidden;
}
.about-portrait img {
  position: absolute;
  top: 0;
  left: -0.112%;
  display: block;
  width: 100.223%;
  max-width: none;
  height: auto;
}
.about-title, .about-copy, .about-skills-title, .about-skills {
  position: static; top: auto; right: auto; bottom: auto; left: auto;
  width: auto; margin: 0; padding: 0;
  font-size: inherit; line-height: inherit; font-weight: inherit;
  grid-row: 1;
  translate: none; opacity: 1;
}
.about-title { grid-column: 2; }
.about-copy { grid-column: 3 / 5; }
.about-skills-title { grid-column: 6; }
.about-skills { grid-column: 7 / 9; list-style: none; }
.about-skills li { display: grid; grid-template-columns: minmax(0,1fr) max-content; gap: 8px; text-align: left; }
.about-skills li > span:last-child { justify-self: end; min-width: 1ch; text-align: left; }
.about-art {
  width: var(--about-desktop-art-width, calc(100vw * 1898.027 / 1920));
  height: var(--about-desktop-art-height, calc(100vw * 1916.559 / 1920));
  aspect-ratio: auto;
  left: var(--about-desktop-art-left, 0px); top: var(--about-desktop-art-top, calc(100vw * -119 / 1920)); transform: none;
}
.about-signatures {
  position: absolute; top: var(--about-desktop-signature-top, calc(100vw * 960 / 1920));
  transform: scale(var(--about-design-scale, 1)); transform-origin: top left;
  pointer-events: none;
}
.about-mark-calligraphy { left: calc(100% * 1594 / 1920); }
.about-mark-seal { left: calc(100% * 1582 / 1920); margin-top: calc(100vw * 23 / 1920); }
.about-mark-peace { left: calc(100% * 260 / 1920); margin-top: calc(100vw * 314 / 1920); }
.about-signatures img { display: block; }
.about-info-grid, .about-signatures { z-index: 1; }
.has-liquid-boundary.is-liquid-crossing .selected-panels-stage .selected-works-scene {
  /* Clip in viewport space, outside the translated document content. */
  -webkit-clip-path: none; clip-path: none;
}
@media (max-width: 760px) {
  .about-info-grid { grid-template-columns: repeat(2,minmax(0,1fr)); row-gap: 20px; padding-top: 80px; font-size: 12px; line-height: 18px; }
  .about-portrait { grid-column: 2; grid-row: 2; margin: 0; }
  .about-title, .about-skills-title { grid-column: 1; }
  .about-copy, .about-skills { grid-column: 2; }
  .about-skills-title, .about-skills { grid-row: 3; margin-top: 16px; }
  .about-skills li { grid-template-columns: minmax(0,1fr) max-content; gap: 8px; }
  .about-art {
    left: var(--about-mobile-art-left, 0px);
    width: var(--about-mobile-art-width, 100vw);
    height: var(--about-mobile-art-height, calc(100vw * 1916.559 / 1898.027));
    top: var(--about-mobile-art-top, 600px);
  }
  .about-signatures { top: var(--about-mobile-mark-top, 900px); transform: scale(.6); }
  .about-mark-calligraphy { left: auto; right: var(--page-margin); width: 60.6px; }
  .about-mark-seal { left: auto; right: calc(var(--page-margin) + 29.4px); width: 37.8px; margin-top: 13.8px; }
  .selected-works-scene .about-mark-peace { left: 10%; right: auto; margin-top: var(--about-mobile-mark-offset, 160px); }
}

/* Keep the liquid boundary in viewport space while its contents scroll. */
.about-paper {
  position: absolute; inset: 0; z-index: 3;
  background: #fff; overflow: hidden;
  opacity: var(--about-opacity, 1); pointer-events: none;
}
.has-liquid-boundary.is-liquid-crossing .about-paper {
  -webkit-clip-path: url(#home-liquid-paper); clip-path: url(#home-liquid-paper);
}
.about-info-grid { color: #000; }

/* Share the home header's text-rise, easing and 80ms reading rhythm. */
.about-info-grid { opacity: var(--about-text-opacity, 0); }
.about-copy-line { display: block; white-space: nowrap; }
.home-bside {
  position: absolute; left: var(--page-margin); right: var(--page-margin);
  top: var(--reading-about-height); z-index: 2;
  display: grid; grid-template-columns: repeat(8,minmax(0,1fr));
  column-gap: var(--grid-gutter); row-gap: 40px;
  color: #000; font-size: 14px; line-height: 18px; font-weight: 500;
  pointer-events: auto;
}
.home-bside h2 { grid-column: 2; margin: 0; font: inherit; }
.bside-copy { grid-column: 3 / 7; }
.bside-copy p { margin: 0; }
.bside-pair { grid-column: 3 / 5; display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); }
.bside-figure { margin: 0; min-width: 0; }
.bside-interior { grid-column: 7 / 9; width: 50%; align-self: start; }
.bside-image { position: relative; aspect-ratio: 2 / 3; overflow: hidden; background: #000; }
.bside-image img { display: block; width: 100%; height: 100%; object-fit: cover; }
.bside-pair .bside-figure:first-child img { width: 100.223%; height: 101.88%; max-width: none; margin-left: -.112%; }
.bside-figure figcaption { margin-top: 10px; }
@media (max-width: 760px) {
  .home-bside { grid-template-columns: repeat(2,minmax(0,1fr)); row-gap: 20px; font-size: 12px; line-height: 18px; }
  .home-bside h2 { grid-column: 1; }
  .bside-copy { grid-column: 2; }
  .bside-pair { grid-column: 1; }
  .bside-interior { grid-column: 2; width: 50%; }
}
.about-reveal.reveal-block { opacity: 0; will-change: auto; }
.about-reveal.reveal-block:not(.is-text-entering) { animation: none; }
.about-reveal.is-text-entering { will-change: opacity, filter, transform; }
.about-reveal.is-text-entered {
  opacity: 1;
  filter: none;
  transform: none;
  animation: none;
  will-change: auto;
}
.home-symbol-entrance { opacity: 0; }
.home-symbol-entrance.is-symbol-entering {
  opacity: 1;
}
@media (prefers-reduced-motion: reduce) {
  .about-reveal.reveal-block { opacity: 1; filter: none; transform: none; animation: none; will-change: auto; }
  .home-symbol-entrance, .home-symbol-entrance.is-symbol-entering { opacity: 1; animation: none; }
}