@view-transition { navigation: none; }
@layer page-effects {
  .photo-slot { position: relative; aspect-ratio: 1; width: 100%; overflow: clip; }
  .photo-slot img { width: 100%; height: 100%; object-fit: cover; }
  .photo-placeholder { display: grid; place-items: center; isolation: isolate; background: var(--purple-wash); color: var(--plum); }
  .photo-placeholder::before { content: ''; position: absolute; inset: 7%; border: 1px solid #6c339835; z-index: -1; }
  .photo-placeholder > .photo-monogram { font-size: clamp(80px,15vw,220px); font-weight: 800; line-height: 1; letter-spacing: -.09em; color: #6c33983d; }
  .photo-placeholder-label { position: absolute; bottom: 11%; left: 11%; font-weight: 600; font-size: clamp(18px,2.2vw,30px); line-height: 1.2; }
  .photo-placeholder-label small { display: block; margin-top: 12px; font-size: 10px; letter-spacing: .12em; text-transform: uppercase; font-weight: 400; }
  .home-portrait .photo-placeholder { background: var(--plum); color: white; }
  .home-portrait .photo-monogram { color: #ffffff1c; }
  .home-portrait .photo-placeholder::before { border-color: #ffffff40; }
  .home-portrait .photo-placeholder-label small { color: var(--lime); }
  .page-chapters { display: none; }
  :root { --header-height: 84px; }
  .site-header { min-height: var(--header-height); }
  .hero-motion .hero-scroll .home-hero { padding-bottom: calc(55px + var(--header-height)); }
  .hero-motion .home-hero > .reel-button { bottom: calc(60px + var(--header-height)); }
  .page-effects-ready.motion-ready .site-header { position: sticky; top: 0; z-index: 40; background: var(--paper); transition: transform .45s cubic-bezier(.2,.65,.3,1), box-shadow .3s; }
  .page-effects-ready.motion-ready .site-header.nav-away { transform: translateY(-105%); }
  .page-effects-ready.motion-ready .site-header:focus-within { transform: none; }
  .page-effects-ready.motion-ready .word-mask { display: inline-block; overflow: clip; vertical-align: bottom; max-width: 100%; padding-bottom: .11em; margin-bottom: -.11em; }
  .page-effects-ready.motion-ready .word-rise { display: inline-block; max-width: 100%; overflow-wrap: anywhere; transform: translateY(115%) rotate(2deg); transition: transform .65s cubic-bezier(.2,.7,.2,1); transition-delay: calc(var(--word-order,0) * 24ms); }
  .page-effects-ready.motion-ready .is-title-visible .word-rise { transform: translateY(0) rotate(0); }
  .page-effects-ready.motion-ready .page-lead { translate: 0 var(--lead-shift,0px); }
  .page-effects-ready.motion-ready .depth-layer { translate: 0 var(--layer-shift,0px); }
  .page-effects-ready.motion-ready .motion-framed { position: relative; overflow: clip; isolation: isolate; }
  .page-effects-ready.motion-ready .motion-framed::before,
  .page-effects-ready.motion-ready .motion-framed::after { content: ''; position: absolute; inset: 0 auto 0 0; width: 50.5%; background: var(--plum); z-index: 3; pointer-events: none; transition: transform .7s cubic-bezier(.65,0,.2,1); }
  .page-effects-ready.motion-ready .motion-framed::after { left: auto; right: 0; background: var(--violet); transition-delay: .04s; }
  .page-effects-ready.motion-ready .motion-framed.is-media-visible::before { transform: translateX(-102%); }
  .page-effects-ready.motion-ready .motion-framed.is-media-visible::after { transform: translateX(102%); }
  .page-effects-ready.motion-ready .contact-band { position: relative; }
  .page-effects-ready.motion-ready .contact-band h2 { translate: 0 var(--closing-shift,0px); }
  .section-wipe { display: none; }
  .page-effects-ready.motion-ready .section-wipe { display: grid; grid-template-columns: repeat(5,1fr); position: absolute; top: -79px; left: 0; right: 0; height: 80px; overflow: clip; pointer-events: none; }
  .section-wipe > span { display: block; background: var(--green-wash); transform: translateY(var(--panel-shift,105%)); }
  html:not(.motion-ready) { scroll-behavior: auto; }
  @media (min-width: 901px) and (min-height: 650px) {
    .page-effects-ready.motion-ready .story-section > .section-label,
    .page-effects-ready.motion-ready .about-story > .about-statement { position: sticky; top: 135px; align-self: start; }
    .page-effects-ready.motion-ready .page-chapters { display: flex; position: fixed; z-index: 25; right: 13px; top: 40%; flex-direction: column; gap: 5px; opacity: 0; visibility: hidden; pointer-events: none; transition: opacity .3s, visibility .3s; }
    .page-effects-ready.motion-ready .page-chapters.is-present { opacity: 1; visibility: visible; pointer-events: auto; }
    .page-chapters a { display: flex; align-items: center; justify-content: end; position: relative; padding: 9px 7px; color: var(--violet); background: var(--paper); border: 1px solid var(--line); border-radius: 20px; font-size: 8px; font-weight: 600; min-width: 30px; }
    .page-chapters a[aria-current] { color: var(--ink); background: var(--accent); border-color: var(--accent); }
    .page-chapters .chapter-name { position: absolute; right: calc(100% + 8px); min-width: max-content; background: var(--ink); color: white; border-radius: 3px; padding: 7px 12px; opacity: 0; translate: 8px 0; pointer-events: none; transition: opacity .2s, translate .2s; }
    .page-chapters a:hover .chapter-name, .page-chapters a:focus-visible .chapter-name { opacity: 1; translate: 0; }
  }
  .page-curtain { position: fixed; inset: 0; z-index: 100; pointer-events: none; overflow: clip; }
  .page-curtain.is-leaving, .page-curtain.is-arriving { display: block; }
  html[data-page-arrival] .curtain-panels > span { transform: translateY(0); }
  html[data-page-arrival] .page-curtain { background: transparent; }
  .curtain-panels { position: absolute; inset: 0; display: grid; grid-template-columns: repeat(5,1fr); }
  .curtain-panels > span { background: var(--plum); transform: translateY(105%); transition: transform .24s cubic-bezier(.65,0,.25,1); transition-delay: calc(var(--panel-order) * 24ms); }
  .curtain-panels > span:nth-child(even) { background: #562d70; }
  .page-curtain.is-leaving .curtain-panels > span, .page-curtain.is-arriving .curtain-panels > span { transform: translateY(0); }
  .page-curtain.is-revealing .curtain-panels > span { transform: translateY(-105%); transition-duration: .45s; }
  .curtain-brand { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; flex-direction: column; gap: 15px; color: white; font-size: clamp(20px,3vw,42px); font-weight: 700; letter-spacing: -.04em; opacity: 0; transition: opacity .15s; }
  html[data-motion-preference="off"] .page-curtain { display: none; }
  .curtain-brand small { font-size: 8px; letter-spacing: .2em; color: var(--lime); font-weight: 400; }
  .is-leaving .curtain-brand { opacity: 1; transition-delay: .15s; }
  .is-arriving .curtain-brand { opacity: 1; }
  .is-revealing .curtain-brand { opacity: 0; transition-delay: 0s; }
  @media (max-width: 600px) {
    :root { --header-height: 82px; }
    .hero-motion .home-hero > .reel-button { bottom: calc(34px + var(--header-height)); }
    .project-detail h1 { font-size: clamp(40px,10.5vw,62px); }
    .home-title h1 { font-size: clamp(44px,calc(15vw - 4.5px),77px); }
    .page-effects-ready.motion-ready .word-rise { transition-duration: .45s; transition-delay: calc(var(--word-order,0) * 16ms); }
    .page-effects-ready.motion-ready .section-wipe { height: 41px; top: -40px; }
    .photo-placeholder-label { font-size: 24px; }
  }
  @media (max-width: 360px) {
    .hero-motion .home-hero .landscape-frame { clip-path: inset(calc(360px * (1 - var(--hero-progress,0))) 0 0); }
    .hero-motion .home-hero .landscape-frame > img { height: calc(100% - 360px * (1 - var(--hero-progress,0))); margin-top: calc(360px * (1 - var(--hero-progress,0))); }
  }
  @media (prefers-reduced-motion: reduce) {

    .page-effects-ready .site-header { position: relative; transform: none; transition: none; }
    .word-rise { transform: none; transition: none; }
    .page-lead, .depth-layer, .contact-band h2 { translate: none; }
    .section-wipe { display: none; }
  }
}