:root {
  --sc-canvas: #f5f0e7;
  --sc-surface: #fbf8f2;
  --sc-ink: #27262a;
  --sc-ink-soft: #6e6865;
  --sc-accent: #c87571;
  --sc-accent-ink: #fbf8f2;
  --sc-hairline: rgba(39, 38, 42, .17);
  --sc-hairline-strong: rgba(39, 38, 42, .32);
  --sc-font-display: Georgia, 'Times New Roman', serif;
  --sc-font-text: 'Avenir Next', 'Helvetica Neue', ui-sans-serif, system-ui, sans-serif;
  --sc-font-mono: ui-monospace, SFMono-Regular, Menlo, monospace;
  --sc-section: clamp(5rem, 11vw, 11rem);
  --sc-gutter: clamp(1.25rem, 6vw, 7rem);
  --sc-maxw: 88rem;
  --sc-r-sm: 2px;
  --sc-r-md: 5px;
  --sc-edge: inset 0 1px 0 rgba(255,255,255,.62);
  --sc-shadow-color: 30 18% 25%;
  --sc-e2: 0 2px 5px hsl(var(--sc-shadow-color) / .1), 0 14px 32px -14px hsl(var(--sc-shadow-color) / .18);
}

html { background: var(--sc-canvas); }
body { background: var(--sc-canvas); color: var(--sc-ink); }
body::before { content: ''; position: fixed; inset: 0; pointer-events: none; z-index: 2; opacity: .18; background: radial-gradient(circle at 20% 20%, rgba(255,255,255,.6), transparent 40%), radial-gradient(circle at 80% 80%, rgba(194,155,132,.08), transparent 35%); }
.paper-grain { position: fixed; inset: 0; z-index: 4; pointer-events: none; opacity: .028; mix-blend-mode: multiply; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.82' numOctaves='3'/%3E%3C/filter%3E%3Crect width='140' height='140' filter='url(%23n)'/%3E%3C/svg%3E"); }

.display { margin: 0; font-family: var(--sc-font-display); font-weight: 400; line-height: .98; letter-spacing: -.045em; text-wrap: balance; }
.display i { color: var(--sc-accent); font-style: italic; }
.display--hero { font-size: clamp(4.5rem, 12vw, 11rem); }
.eyebrow { margin: 0 0 1.25rem; color: var(--sc-ink-soft); font-family: var(--sc-font-mono); font-size: .68rem; letter-spacing: .17em; line-height: 1.3; text-transform: uppercase; }
.text-link { display: inline-flex; align-items: center; gap: .8rem; color: var(--sc-ink); font-size: .85rem; letter-spacing: .06em; text-decoration: none; border-bottom: 1px solid var(--sc-ink); padding-bottom: .25rem; transition: color 160ms var(--sc-ease-out), border-color 160ms var(--sc-ease-out), transform 160ms var(--sc-ease-out); }
.text-link:hover { color: var(--sc-accent); border-color: var(--sc-accent); transform: translateX(2px); }
.text-link:focus-visible, .folio a:focus-visible { outline: 2px solid var(--sc-accent); outline-offset: 5px; }

.chapter { position: relative; z-index: 1; }
.chapter__inner { width: min(100%, var(--sc-maxw)); margin: 0 auto; padding-inline: var(--sc-gutter); }
.chapter--opening { min-height: 100svh; display: grid; place-items: center; overflow: clip; }
.opening__inner { position: relative; padding-block: 9rem 7rem; text-align: center; }
.opening__lede { max-width: 31rem; margin: 2rem auto 0; color: var(--sc-ink-soft); font-family: var(--sc-font-display); font-size: clamp(1.15rem, 2vw, 1.55rem); line-height: 1.4; }
.opening__link { margin-top: 3rem; }
.opening__date { margin: 6rem 0 0; color: var(--sc-ink-soft); font-size: .72rem; letter-spacing: .13em; text-transform: uppercase; }
.opening__mark { position: absolute; left: 50%; bottom: 5.5rem; width: 1px; height: 3rem; background: var(--sc-accent); transform: translateX(-50%); }
.opening__mark span { position: absolute; left: 50%; width: .65rem; height: .65rem; border: 1px solid var(--sc-accent); border-radius: 50%; transform: translateX(-50%); }
.opening__mark span:first-child { top: 0; background: var(--sc-canvas); }
.opening__mark span:last-child { bottom: 0; background: var(--sc-accent); }

.folio { position: fixed; inset: 0 auto 0 0; z-index: 70; display: flex; width: 9.25rem; flex-direction: column; justify-content: space-between; padding: 2.2rem 1.5rem 2.2rem 2.4rem; pointer-events: none; }
.folio > * { pointer-events: auto; }
.folio__brand { color: var(--sc-ink); font-family: var(--sc-font-display); font-size: 1.35rem; letter-spacing: -.1em; text-decoration: none; }
.folio__brand span { color: var(--sc-accent); font-size: .8em; margin-inline: .1em; }
.folio__list { display: grid; gap: .8rem; margin: auto 0; padding: 0; list-style: none; }
.folio__list a { display: grid; grid-template-columns: 1.6rem 1fr; gap: .45rem; color: var(--sc-ink-soft); font-size: .63rem; letter-spacing: .04em; text-decoration: none; transition: color 180ms var(--sc-ease-out); }
.folio__list a span { color: color-mix(in oklab, var(--sc-ink-soft) 55%, transparent); font-family: var(--sc-font-mono); font-size: .55rem; padding-top: .08rem; }
.folio__list a b { font-weight: 500; }
.folio__list a::before { content: ''; position: absolute; width: 1px; height: 1.3rem; margin-left: -.85rem; background: transparent; }
.folio__list a[aria-current='step'] { color: var(--sc-accent); }
.folio__list a[aria-current='step']::before { background: var(--sc-accent); }


.chapter--scene { min-height: 115svh; display: grid; align-items: center; background: color-mix(in oklab, var(--sc-canvas) 88%, white); }
.scene-grid { display: grid; grid-template-columns: minmax(14rem, .65fr) minmax(0, 1.35fr); align-items: center; gap: clamp(2rem, 8vw, 10rem); padding-block: var(--sc-section); }
.scene-grid--reverse { grid-template-columns: minmax(0, 1.35fr) minmax(14rem, .65fr); }
.scene-grid--reverse .scene-copy { grid-column: 2; grid-row: 1; }
.scene-grid--reverse .scene-art { grid-column: 1; grid-row: 1; }
.scene-copy { max-width: 26rem; }
.scene-copy h2, .transformation-copy h2 { font-size: clamp(2.5rem, 5vw, 5.7rem); }
.scene-copy p:not(.eyebrow), .transformation-copy p:not(.eyebrow) { color: var(--sc-ink-soft); font-size: 1rem; line-height: 1.7; }
.scene-art { margin: 0; overflow: hidden; border: 1px solid var(--sc-hairline); background: var(--sc-surface); box-shadow: var(--sc-e2); }
.scene-art img { width: 100%; height: auto; }
.scene-art figcaption { padding: .65rem .9rem .75rem; color: var(--sc-ink-soft); font-family: var(--sc-font-mono); font-size: .6rem; letter-spacing: .1em; text-transform: uppercase; }
.role-pair { display: flex; flex-wrap: wrap; gap: .6rem 1.5rem; margin-top: 2rem; color: var(--sc-ink-soft); font-size: .8rem; }
.role-pair span { display: inline-flex; align-items: center; gap: .6rem; }
.role-pair b { color: var(--sc-accent); font-family: var(--sc-font-mono); font-size: .58rem; letter-spacing: .12em; }

.chapter--intimacy { min-height: 170svh; }
.intimacy-stage { background: var(--sc-surface); }
.intimacy-stage__wash { position: absolute; inset: 0; background: radial-gradient(circle at 50% 45%, rgba(223,140,135,.16), transparent 32%), linear-gradient(135deg, #eee8de, #f8f4ed); }
.intimacy-stage__art { position: absolute; top: 9%; right: 0; bottom: auto; left: auto; width: min(70%, 66rem); height: 78%; object-fit: contain; }
.intimacy-copy { position: absolute; z-index: 2; bottom: clamp(3rem, 12vh, 8rem); left: var(--sc-gutter); width: min(31rem, 38vw); padding: clamp(1rem, 2vw, 1.7rem); background: color-mix(in oklab, var(--sc-canvas) 94%, transparent); box-shadow: var(--sc-e2); }
.intimacy-copy h2 { font-size: clamp(2.3rem, 4.4vw, 5rem); }
.intimacy-copy p:last-child { max-width: 27rem; color: #5b5552; line-height: 1.6; }

.chapter--pause { min-height: 88svh; display: grid; place-items: center; background: #ece6dc; }
.pause-inner { display: grid; justify-items: center; padding-block: var(--sc-section); text-align: center; }
.pause-inner__rule { width: 1px; height: 3.5rem; background: var(--sc-accent); }
.pause-inner blockquote { max-width: 47rem; margin: 3rem auto 1.5rem; font-family: var(--sc-font-display); font-size: clamp(2.1rem, 5vw, 5.5rem); letter-spacing: -.04em; line-height: 1.02; }
.pause-inner__note { max-width: 24rem; color: var(--sc-ink-soft); font-size: .9rem; }

.chapter--transformation { min-height: 230svh; background: #f5f0e7; }
.transformation-inner { padding-block: var(--sc-section); }
.transformation-copy { max-width: 37rem; margin-bottom: 3.5rem; }
.transformation-art { position: relative; width: min(100%, 75rem); margin-inline: auto; overflow: hidden; aspect-ratio: 16 / 9; border: 1px solid var(--sc-hairline); background: var(--sc-surface); box-shadow: var(--sc-e2); }
.transformation-art img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.transformation-art__office { opacity: .98; }
.transformation-art__aisle { z-index: 1; }
.transformation-art__trace { position: absolute; z-index: 2; right: 15%; bottom: 17%; left: 15%; height: 2px; background: var(--sc-accent); transform: rotate(-4deg); transform-origin: left center; opacity: .8; }

.chapter--commitment { min-height: 125svh; background: #f2ece2; }
.commitment-inner { display: grid; justify-items: center; padding-block: var(--sc-section) 5rem; }
.commitment-card { position: relative; width: min(100%, 64rem); aspect-ratio: 16 / 9; }
.commitment-card > img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.commitment-card__copy { position: absolute; inset: 15% 18%; display: flex; flex-direction: column; align-items: center; text-align: center; }
.commitment-card h2 { font-size: clamp(3rem, 7vw, 7rem); }
.commitment-card__lead { max-width: 27rem; margin: 1.3rem auto; color: var(--sc-ink-soft); font-family: var(--sc-font-display); font-size: clamp(1rem, 1.5vw, 1.3rem); line-height: 1.4; }
.details { display: grid; grid-template-columns: 1fr 1fr; gap: .75rem 2.5rem; width: min(100%, 32rem); margin: 1rem 0 0; text-align: left; }
.details div { border-top: 1px solid var(--sc-hairline); padding-top: .5rem; }
.details dt { color: var(--sc-ink-soft); font-family: var(--sc-font-mono); font-size: .58rem; letter-spacing: .08em; text-transform: uppercase; }
.details dd { margin: .3rem 0 0; font-size: .84rem; }
.commitment-card__closing { margin-top: auto; color: var(--sc-ink-soft); font-size: .78rem; }
.commitment-link { margin-top: 3rem; }

html:not(.sc-ready) [data-sc-in], html:not(.sc-ready) [data-sc-cue] { opacity: 1; transform: none; }
html:not(.sc-ready) [data-sc-reveal] { clip-path: none; }

@media (max-width: 860px) {
  .display--hero { font-size: clamp(3.8rem, 18vw, 6rem); }
  .folio { inset: 0 0 auto; display: block; width: auto; height: auto; padding: max(.85rem, env(safe-area-inset-top)) 1.25rem .7rem; background: color-mix(in oklab, var(--sc-canvas) 88%, transparent); backdrop-filter: blur(12px); }
  .folio__brand { display: inline-block; font-size: 1.1rem; }
  .folio__list { display: flex; gap: 0; margin: 0; overflow: hidden; }
  .folio__list li { display: none; }
  .folio__list li:has(a[aria-current='step']) { display: block; position: absolute; top: 1rem; right: 1.25rem; }
  .folio__list a { display: block; font-size: .64rem; }
  .folio__list a span { display: none; }
  .heartbeat { right: 1rem; bottom: max(.75rem, env(safe-area-inset-bottom)); left: 1rem; height: 1.8rem; }
  .scene-grid, .scene-grid--reverse { grid-template-columns: 1fr; gap: 2rem; padding-block: 6rem; }
  .scene-grid--reverse .scene-copy, .scene-grid--reverse .scene-art { grid-column: auto; grid-row: auto; }
  .scene-grid--reverse .scene-art { order: 2; }
  .scene-copy { max-width: 30rem; }
  .chapter--scene { min-height: auto; }
  .chapter--intimacy { min-height: 170svh; }
  .intimacy-stage__art { top: 8%; right: 0; width: 100%; height: 62%; }
  .intimacy-copy { right: 1.25rem; bottom: 4rem; left: 1.25rem; width: auto; padding: 1rem; }
  .intimacy-copy h2 { font-size: clamp(2.4rem, 11vw, 4.8rem); }
  .chapter--pause { min-height: 74svh; }
  .chapter--transformation { min-height: auto; }
  .transformation-inner { padding-block: 6rem; }
  .transformation-art { aspect-ratio: 4 / 5; }
  .transformation-art img { object-fit: cover; }
  .transformation-art__trace { right: 10%; bottom: 19%; left: 10%; }
  .chapter--commitment { min-height: auto; }
  .commitment-inner { padding-block: 6rem 4rem; }
  .commitment-card { aspect-ratio: auto; min-height: 38rem; }
  .commitment-card > img { object-fit: cover; }
  .commitment-card__copy { inset: 12% 13%; }
  .commitment-card h2 { font-size: clamp(3.25rem, 15vw, 5.8rem); }
  .details { grid-template-columns: 1fr; gap: .7rem; }
  .commitment-card__closing { margin-top: 1.5rem; }
}

@media (prefers-reduced-motion: reduce) {
  body::before, .paper-grain { display: none; }
  .heartbeat__path { stroke-dashoffset: 0 !important; }
  .text-link { transition: none; }
}

/* Video-scroll chapters. ScrollCraft owns stage stickiness, clip opacity and seeking. */
.chapter--video { background: var(--sc-canvas); }
.video-stage { background: var(--sc-surface); color: var(--sc-ink); }
.video-stage > :is(.sc-stage__poster, video[data-sc-scrub]) { object-position: var(--video-focus, 50% 50%); }
.video-stage--recognition { --video-focus: 50% 48%; }
.video-stage--familiarity { --video-focus: 50% 50%; }
.video-stage--intimacy { --video-focus: 58% 50%; }
.video-stage--transformation { --video-focus: 50% 52%; }
.video-stage--arrival { --video-focus: 50% 48%; }
.video-scrim { position: absolute; inset: 0; z-index: 2; pointer-events: none; }
.video-scrim--left { background: linear-gradient(90deg, rgba(245,240,231,.98) 0%, rgba(245,240,231,.88) 26%, rgba(245,240,231,.18) 55%, transparent 72%); }
.video-scrim--right { background: linear-gradient(270deg, rgba(245,240,231,.98) 0%, rgba(245,240,231,.88) 26%, rgba(245,240,231,.18) 55%, transparent 72%); }
.video-scrim--bottom { background: linear-gradient(0deg, rgba(245,240,231,.98) 0%, rgba(245,240,231,.78) 26%, transparent 58%); }
.video-copy { position: absolute; z-index: 3; max-width: min(34rem, 42vw); padding: clamp(1rem, 2vw, 1.65rem); background: rgba(251,248,242,.94); box-shadow: var(--sc-e2); }
.video-copy h2 { margin: 0; font-size: clamp(2.35rem, 4.9vw, 5.6rem); }
.video-copy > p:last-child { color: #5b5552; line-height: 1.65; }
.video-copy--left { left: max(var(--sc-gutter), 9.5rem); bottom: clamp(4rem, 12vh, 8rem); }
.video-copy--right { right: var(--sc-gutter); bottom: clamp(4rem, 12vh, 8rem); text-align: right; }
.video-copy--right .role-pair { justify-content: flex-end; }
.video-copy--paper { background: rgba(251,248,242,.96); }
.video-copy--bottom { right: var(--sc-gutter); bottom: clamp(4rem, 10vh, 7rem); left: var(--sc-gutter); max-width: 48rem; text-align: center; margin-inline: auto; }
.commitment-arrival { position: relative; }

@media (max-width: 860px) {
  .video-stage > :is(.sc-stage__poster, video[data-sc-scrub]) { object-position: var(--video-focus-mobile, 50% 50%); }
  .video-stage--recognition { --video-focus-mobile: 54% 50%; }
  .video-stage--familiarity { --video-focus-mobile: 50% 50%; }
  .video-stage--intimacy { --video-focus-mobile: 58% 50%; }
  .video-stage--transformation { --video-focus-mobile: 52% 50%; }
  .video-stage--arrival { --video-focus-mobile: 50% 50%; }
  .video-scrim--left, .video-scrim--right { background: linear-gradient(0deg, rgba(245,240,231,.98) 0%, rgba(245,240,231,.86) 28%, rgba(245,240,231,.14) 60%, transparent 76%); }
  .video-copy, .video-copy--left, .video-copy--right, .video-copy--bottom { right: 1.25rem; bottom: calc(3.5rem + env(safe-area-inset-bottom)); left: 1.25rem; max-width: none; text-align: left; }
  .video-copy h2 { font-size: clamp(2.35rem, 10.5vw, 4.4rem); }
  .video-copy--right .role-pair { justify-content: flex-start; }
  .video-copy { padding: 1rem; }
}

@media (prefers-reduced-motion: reduce) {
  .video-stage > .sc-stage__poster { transform: none !important; }
}

/* Invitation plate. */
.commitment-card {
  overflow: hidden;
  border: 1px solid var(--sc-hairline-strong);
  background: var(--sc-surface);
  box-shadow: var(--sc-e2);
}
.commitment-card__copy { overflow: hidden; }
.commitment-card__lead { max-width: 31rem; }

@media (max-width: 860px) {
  .commitment-card { width: 100%; min-height: 41rem; }
  .commitment-card__copy { inset: 10% 10%; }
}