/* Progressive enhancement: one sticky viewport owns the complete scroll story.
   Without the controller, the existing readable document remains the fallback. */
html[data-story='ready'] { scroll-behavior: auto; }
html[data-story='ready'] .experience-header { position: fixed; inset: 0 0 auto; z-index: 8; min-height: 78px; background: #f2f2f2ed; }
html[data-story='ready'] .story-scroll { position: relative; height: calc((var(--story-steps,11) * 120 + 100) * 1svh); }
html[data-story='ready'] .story-stage { position: sticky; top: 0; height: 100svh; isolation: isolate; overflow: clip; background: var(--paper); }
html[data-story='ready'] .story-stage > [data-story-scene] { position: absolute; inset: 0; height: 100%; min-height: 0; margin-block: 0; opacity: var(--story-opacity,0); pointer-events: none; transform: translate3d(calc(var(--story-shift,0) * var(--story-drift,18px)),0,0) scale(calc(.985 + var(--story-opacity,0) * .015)); transform-origin: center; overflow: clip; }
/* Only the current dissolve is paintable; hidden glass/artwork keeps its layout. */
html[data-story='ready'] .story-stage > [data-story-visible='false'] { visibility: hidden; }
html[data-story='ready'] .story-stage > [data-story-visible='true'] { visibility: visible; will-change: opacity, transform; }
/* The existing eased scroll position owns depth and drift too. No timed
   transition trails behind a reversal or moves the stationary stage itself. */
/* Artwork dissolves continuously; copy hands over at the midpoint so large
   headings never double-expose each other when a visitor stops mid-transition. */
html[data-story='ready'] [data-story-scene] { --story-copy-opacity: clamp(0,calc((var(--story-opacity,1) - .5) * 5),1); }
html[data-story='ready'] :is(.hero-bottom,.stories-heading>div,.concept-copy,.format-marquee,.format-inner,.offer-section>div,.onboarding-intro,.questions>div,.opening-content,.footer-top,.footer-wordmark) { opacity: var(--story-copy-opacity); }
html[data-story='ready'] :is(.art-caption,.beauty-type,.format-note,.opening-foot),
html[data-story='ready'] :is(.cafe-main,.cafe-story,.beauty-product,.atelier-editorial)>div,
html[data-story='ready'] :is(.cafe-caption,.beauty-feedback,.beauty-approved,.atelier-question,.atelier-answer)>:not(img) { opacity: var(--story-copy-opacity); }
html[data-story='ready'] .hero-media[data-video-ready='true'] > picture,
html[data-story='ready'] .opening-scene[data-video-ready='true'] > .opening-poster { visibility: hidden; }
html[data-story='ready'] .opening-arrow { transition-property: background, border-color, color; }
html[data-story='ready'] .story-stage > [data-story-scene][data-story-active='true'] { pointer-events: auto; }
html[data-story='ready'] .story-stage > .wrap { width: min(1320px,calc(100% - 100px)); margin-inline: auto; }
html[data-story='ready'] .cinematic-hero { width: 100%; border: 0; }
html[data-story='ready'] .hero-viewport { height: 100%; min-height: 0; }
html[data-story='ready'] .hero-title-wrap { padding-top: clamp(125px,16svh,180px); transform: translate3d(calc(var(--scene-progress) * -30px),0,0); opacity: min(var(--story-copy-opacity),clamp(.2,calc(1.4 - var(--scene-progress) * 1.1),1)); }
html[data-story='ready'] .hero-title-wrap h1 { font-size: clamp(74px,9.4vw,140px); }
html[data-story='ready'] .hero-media { inset: 12% 3% 12% 0; opacity: .95; transform: translate3d(calc(var(--scene-progress) * 8%),0,0) scale(calc(1 - var(--scene-progress) * .2)); transform-origin: right center; mask-image: linear-gradient(90deg,transparent,transparent calc(40% - var(--scene-progress) * 20%),#000 calc(55% - var(--scene-progress) * 27%),#000); }
html[data-story='ready'] .hero-media img,html[data-story='ready'] .hero-media video { object-fit: contain; object-position: right center; }
html[data-story='ready'] .hero-bottom { bottom: 45px; }
html[data-story='ready'] .stories-heading { display: flex; flex-direction: column; justify-content: center; padding-block: 110px 60px; }
html[data-story='ready'] .story-endorsement { margin-top: 0; margin-bottom: 65px; }
html[data-story='ready'] .stories-heading h2 { font-size: clamp(64px,7vw,105px); }
html[data-story='ready'] .concept-chapter { width: 100%; background: transparent; --unfold: var(--scene-progress); }
html[data-story='ready'] .concept-layout { position: relative; top: 0; height: 100%; min-height: 0; padding-block: 105px 45px; align-items: center; }
html[data-story='ready'] .concept-art { height: min(650px,72svh); min-height: 0; transform: none; }
html[data-story='ready'] .concept-copy { transform: none; }
html[data-story='ready'] .concept-copy h2 { font-size: clamp(44px,5vw,72px); }
html[data-story='ready'] .art-caption { bottom: 0; }
html[data-story='ready'] .art-caption::after { display: none; }
html[data-story='ready'] .cafe-story { z-index: 4; }
html[data-story='ready'] .cafe-caption { top: 6%; }
html[data-story='ready'] .atelier-editorial h3 { margin-top: 20px; }
html[data-story='ready'] .atelier-editorial small { margin-top: auto; }
html[data-story='ready'] .atelier-editorial>div { background: linear-gradient(180deg,#27272788,transparent 70%,#27272788); }
html[data-story='ready'] .beauty-type { top: -2%; left: 0; font-size: clamp(26px,3.2vw,43px); white-space: nowrap; transform: translate3d(0,calc((1 - var(--scene-progress)) * 20px),0); }
html[data-story='ready'] .beauty-type br { display: none; }
html[data-story='ready'] .beauty-type em::before { content: ' '; white-space: pre; }
html[data-story='ready'] .format-bridge { display: flex; flex-direction: column; justify-content: center; padding-block: 90px 35px; width: 100%; }
html[data-story='ready'] .format-marquee { font-size: clamp(48px,6.5vw,90px); flex: none; }
html[data-story='ready'] .format-inner { padding-block: 30px; }
html[data-story='ready'] .offer-section { align-content: center; align-items: start; padding-block: 105px 45px; }
html[data-story='ready'] .onboarding-section { grid-template-columns: 1fr; align-content: center; padding-block: 100px 50px; }
html[data-story='ready'] .onboarding-intro { width: min(780px,100%); }
html[data-story='ready'] .onboarding-intro h2 { font-size: clamp(62px,7vw,102px); margin-block: 25px; }
html[data-story='ready'] .onboarding-intro>p:not(.eyebrow) { max-width: 48ch; }
html[data-story='ready'] .onboarding-promise { border: 0; margin-top: 16px; padding-top: 0; max-width: 100%; }
html[data-story='ready'] .onboarding-intro>.onboarding-privacy { margin-top: 22px; max-width: 62ch !important; }
html[data-story='ready'] .questions { display: grid; grid-template-columns: .9fr 1.1fr; gap: 70px; align-items: center; padding-block: 105px 55px; }
html[data-story='ready'] .question-list { max-height: calc(100svh - 170px); overflow-y: auto; overscroll-behavior: auto; scrollbar-width: thin; padding: 5px 10px 5px 5px; }
html[data-story='ready'] .opening { width: 100%; background: var(--paper); }
html[data-story='ready'] .closing-viewport { height: 100%; min-height: 0; }
html[data-story='ready'] .opening-scene { mask-image: linear-gradient(transparent,#000 15%,#000 84%,transparent); }
html[data-story='ready'] .opening-content { padding-block: 110px 70px; }
html[data-story='ready'] .opening h2 { font-size: clamp(70px,8.5vw,124px); }
html[data-story='ready'] .opening-foot { bottom: 28px; }
html[data-story='ready'] .site-footer { display: flex; flex-direction: column; justify-content: center; padding-block: 105px 45px; }
html[data-story='ready'] .footer-top { align-items: center; }
html[data-story='ready'] .footer-wordmark { margin-top: 40px; }
@media (max-width: 1100px) {
  html[data-story='ready'] .story-stage > .wrap { width: calc(100% - 70px); }
  html[data-story='ready'] .concept-layout { gap: 32px; }
  html[data-story='ready'] .concept-copy h2 { font-size: 46px; }
  html[data-story='ready'] .concept-copy>p:not(.eyebrow) { font-size: 12px; }
  html[data-story='ready'] .format-inner { gap: 35px; }
  html[data-story='ready'] .questions { gap: 35px; }
}
@media (max-width: 760px) {
  html[data-story='ready'] .story-stage { --story-drift: 8px; }
  html[data-story='ready'] .experience-header { min-height: 70px; }
  html[data-story='ready'] .story-stage > .wrap { width: calc(100% - 40px); }
  html[data-story='ready'] .hero-title-wrap { padding-top: 110px; }
  html[data-story='ready'] .hero-title-wrap { transform: translate3d(calc(var(--scene-progress) * -8px),0,0); }
  html[data-story='ready'] .hero-title-wrap h1 { font-size: clamp(57px,15.8vw,95px); margin-block: 24px; }
  html[data-story='ready'] .hero-positioning { font-size: 12px; }
  html[data-story='ready'] .hero-media { inset: 43% 3% 16% -75%; max-height: 70vw; transform: translate3d(calc(var(--scene-progress) * 7%),0,0) scale(calc(1 - var(--scene-progress) * .035)); mask-image: linear-gradient(90deg,transparent,#000 25%,#000); }
  html[data-story='ready'] .hero-bottom { bottom: 28px; gap: 16px; }
  html[data-story='ready'] .hero-scroll-cue small { max-width: 30ch; }
  html[data-story='ready'] .stories-heading { padding-block: 100px 65px; }
  html[data-story='ready'] .story-endorsement { margin-bottom: 40px; }
  html[data-story='ready'] .stories-heading h2 { font-size: clamp(57px,14vw,84px); }
  html[data-story='ready'] .stories-heading>div { margin-top: 0; gap: 28px; }
  html[data-story='ready'] .concept-layout { display: grid; grid-template-columns: 1fr; grid-template-rows: auto minmax(0,1fr); height: 100%; padding-block: 93px 40px; gap: 20px; }
  html[data-story='ready'] .concept-copy .eyebrow { font-size: 6px; }
  html[data-story='ready'] .concept-copy h2 { font-size: clamp(31px,8.6vw,48px); margin-block: 15px 13px; }
  html[data-story='ready'] .concept-copy>p:not(.eyebrow) { font-size: 12px; line-height: 1.65; }
  html[data-story='ready'] .concept-deliverable { margin-top: 13px; padding-top: 10px; }
  html[data-story='ready'] .concept-deliverable>p { font-size: 8px; }
  html[data-story='ready'] .concept-art { height: 100%; width: min(100%,410px); min-height: 0; max-height: 440px; align-self: center; }
  html[data-story='ready'] .art-caption { font-size: 4px; bottom: -8px; }
  html[data-story='ready'] .cafe-main h3 { font-size: clamp(23px,6.4vw,30px); }
  html[data-story='ready'] .cafe-caption p { font-size: 15px; }
  html[data-story='ready'] .cafe-story p { font-size: 24px; }
  html[data-story='ready'] .beauty-product h3 { font-size: 26px; }
  html[data-story='ready'] .beauty-type { font-size: 34px; }
  html[data-story='ready'] .beauty-feedback p { font-size: 15px; }
  html[data-story='ready'] .atelier-editorial h3 { font-size: 30px; }
  html[data-story='ready'] .atelier-question p { font-size: 18px; }
  html[data-story='ready'] .atelier-answer p { font-size: 9px; }
  html[data-story='ready'] .format-bridge { padding-block: 90px 35px; }
  html[data-story='ready'] .format-marquee { font-size: 44px; padding-bottom: 8px; }
  html[data-story='ready'] .format-inner { gap: 20px; padding-block: 18px; }
  html[data-story='ready'] .format-inner h2 { font-size: 40px; margin-top: 15px; }
  html[data-story='ready'] .format-list>p { font-size: 14px; padding-block: 15px; }
  html[data-story='ready'] .format-list>p>span { top: 19px; }
  html[data-story='ready'] .format-list>p>small { font-size: 10px; margin-top: 7px; }
  html[data-story='ready'] .format-list .text-link { margin-top: 10px; }
  html[data-story='ready'] .format-note { font-size: 8px; }
  html[data-story='ready'] .offer-section { grid-template-columns: 1fr; gap: 25px; padding-block: 100px 40px; }
  html[data-story='ready'] .offer-section h2 { font-size: 44px; margin-top: 18px; }
  html[data-story='ready'] .offer-details>p { font-size: 12px; line-height: 1.7; }
  html[data-story='ready'] .offer-details dl { margin-block: 18px; }
  html[data-story='ready'] .offer-details dl>div { padding-block: 11px; font-size: 10px; }
  html[data-story='ready'] .offer-details .offer-note { font-size: 9px; }
  html[data-story='ready'] .onboarding-section { padding-block: 90px 80px; }
  html[data-story='ready'] .onboarding-intro h2 { font-size: clamp(43px,11vw,66px); }
  html[data-story='ready'] .onboarding-intro>p:not(.eyebrow) { font-size: 12px; line-height: 1.7; }
  html[data-story='ready'] .onboarding-promise { margin-top: 22px; }
  html[data-story='ready'] .onboarding-intro>.onboarding-privacy { font-size: 9px !important; }
  html[data-story='ready'] .questions { grid-template-columns: 1fr; grid-template-rows: auto minmax(0,1fr); align-content: center; gap: 22px; padding-block: 100px 80px; }
  html[data-story='ready'] .questions .section-intro h2 { font-size: 38px; margin-top: 17px; }
  html[data-story='ready'] .question-list { max-height: 100%; align-self: start; }
  html[data-story='ready'] .question-list summary { font-size: 13px; padding-block: 16px; }
  html[data-story='ready'] .question-list details>p { font-size: 12px; }
  html[data-story='ready'] .opening-content { padding: 105px 24px 75px; }
  html[data-story='ready'] .opening h2 { font-size: clamp(62px,16vw,90px); margin-block: 30px; }
  html[data-story='ready'] .opening-bottom>p { font-size: 14px; }
  html[data-story='ready'] .opening-action { font-size: 15px; margin-top: 0; }
  html[data-story='ready'] .opening-foot { font-size: 5px; bottom: 24px; }
  html[data-story='ready'] .opening-foot { right: 120px; max-width: none; flex-direction: column; gap: 3px; }
  html[data-story='ready'] .opening-foot>span:last-child { max-width: none; text-align: left; }
  html[data-story='ready'] .footer-top { row-gap: 23px; }
  html[data-story='ready'] .footer-company { flex-basis: 100%; }
}
/* These two cards stay in document flow relative to one another even when their
   container is animated. A longer question can never sit behind its reply. */
.atelier-conversation { position: absolute; top: 33%; right: 0; width: 70%; display: flex; flex-direction: column; align-items: end; gap: 14px; }
.atelier-conversation .atelier-question { position: relative; inset: auto; width: 85%; }
.atelier-conversation .atelier-answer { position: relative; inset: auto; width: 93%; margin-right: 5%; }
@media (max-width: 760px) {
  .atelier-conversation { top: 29%; width: 86%; gap: 12px; }
  .atelier-conversation .atelier-question { width: 94%; }
  .atelier-conversation .atelier-answer { width: 94%; margin-right: 5%; }
  html[data-story='ready'] .beauty-type { font-size: 26px; }
}
@media (max-width: 760px) and (max-height: 700px) {
  .atelier-conversation { top: 25%; width: 95%; gap: 12px; }
  .atelier-conversation .atelier-question,.atelier-conversation .atelier-answer { padding: 12px; }
  html[data-story='ready'] .atelier-question p { font-size: 16px; margin-top: 8px; }
  html[data-story='ready'] .atelier-answer small { margin-top: 8px; }
}
@media (max-width: 360px) {
  .experience-header { padding-inline: 12px; gap: 10px; }
  .experience-header .brand { font-size: 17px; gap: 6px; }
  .experience-header .brand-mark { width: 24px; }
}
@media (max-height: 700px) and (max-width: 760px) {
  html[data-story='ready'] .hero-title-wrap { padding-top: 100px; }
  html[data-story='ready'] .hero-title-wrap h1 { font-size: 14.5vw; }
  html[data-story='ready'] .hero-positioning { font-size: 11px; }
  html[data-story='ready'] .hero-media { inset-block: 52% 22%; }
  html[data-story='ready'] .hero-bottom { gap: 10px; bottom: 20px; }
  html[data-story='ready'] .hero-scroll-cue small { display: none; }
  html[data-story='ready'] .concept-layout { padding-top: 88px; gap: 12px; }
  html[data-story='ready'] .concept-copy h2 { font-size: 30px; margin-block: 12px; }
  html[data-story='ready'] .concept-copy>p:not(.eyebrow) { font-size: 11px; }
  html[data-story='ready'] .concept-deliverable { display: none; }
  html[data-story='ready'] .concept-art { width: min(100%,340px); }
  html[data-story='ready'] .cafe-caption { width: 32%; padding: 12px; }
  html[data-story='ready'] .cafe-caption p { font-size: 13px; }
  html[data-story='ready'] .cafe-main { left: 33%; width: 42%; }
  html[data-story='ready'] .cafe-main h3 { font-size: clamp(18px,5.2vw,23px); }
  html[data-story='ready'] .cafe-story { width: 25%; }
  html[data-story='ready'] .cafe-story p { font-size: 22px; }
  html[data-story='ready'] .beauty-product h3 { margin-top: 18px; font-size: 24px; }
  html[data-story='ready'] .beauty-product small { margin-top: auto; }
  html[data-story='ready'] .atelier-editorial h3 { font-size: 26px; margin-top: 12px; }
  html[data-story='ready'] .art-caption { display: none; }
  html[data-story='ready'] .format-marquee { font-size: 32px; }
  html[data-story='ready'] .format-bridge { padding-block: 90px 80px; }
  html[data-story='ready'] .format-inner { padding-block: 12px; gap: 12px; }
  html[data-story='ready'] .format-inner h2 { font-size: 34px; }
  html[data-story='ready'] .format-list>p { padding-block: 11px; }
  html[data-story='ready'] .format-list>p>span { top: 15px; }
  html[data-story='ready'] .offer-section h2 { font-size: 34px; margin-top: 14px; }
  html[data-story='ready'] .offer-section { align-content: start; gap: 14px; padding-block: 94px 80px; }
  html[data-story='ready'] .offer-details dl { margin-block: 12px; }
  html[data-story='ready'] .offer-details dl>div { padding-block: 6px; }
  html[data-story='ready'] .onboarding-intro h2 { font-size: 42px; margin-block: 18px; }
  html[data-story='ready'] .onboarding-promise { margin-top: 14px; }
  html[data-story='ready'] .onboarding-intro>.onboarding-privacy { margin-top: 15px; }
  html[data-story='ready'] .opening-content { padding-block: 105px 90px; }
  html[data-story='ready'] .opening-scene { inset-block: 70% 9%; }
  html[data-story='ready'] .opening h2 { font-size: clamp(44px,14vw,62px); margin-block: 20px; }
  html[data-story='ready'] .opening-bottom>p { font-size: 12px; }
  html[data-story='ready'] .opening-action { margin-top: 0; }
}
@media (max-width: 360px) and (max-height: 700px) {
  .atelier-conversation .atelier-question,.atelier-conversation .atelier-answer { padding: 10px; }
  html[data-story='ready'] .atelier-answer p { margin-top: 6px; }
  html[data-story='ready'] .atelier-answer small { margin-top: 4px; }
}
/* Compact landscape keeps content accessible inside the stationary scene. */
@media (max-height: 540px) {
  html[data-story='ready'] .story-stage > [data-story-scene]:not(.cinematic-hero):not(.concept-chapter):not(.opening) { overflow-y: auto; overscroll-behavior: auto; }
  html[data-story='ready'] .stories-heading,html[data-story='ready'] .format-bridge { justify-content: flex-start; }
  html[data-story='ready'] .onboarding-section,html[data-story='ready'] .offer-section,html[data-story='ready'] .questions { align-content: start; }
  html[data-story='ready'] .hero-title-wrap { padding-top: 95px; }
  html[data-story='ready'] .hero-title-wrap h1 { font-size: 60px; margin-block: 20px; }
  html[data-story='ready'] .hero-positioning { display: none; }
  html[data-story='ready'] .hero-bottom { bottom: 20px; }
  html[data-story='ready'] .concept-layout { padding-block: 80px 25px; grid-template-columns: .9fr 1.1fr; grid-template-rows: 1fr; gap: 28px; }
  html[data-story='ready'] .concept-copy h2 { font-size: 30px; margin-block: 12px; }
  html[data-story='ready'] .concept-copy>p:not(.eyebrow) { font-size: 10px; line-height: 1.55; }
  html[data-story='ready'] .concept-deliverable,html[data-story='ready'] .art-caption { display: none; }
  html[data-story='ready'] .concept-art { height: 100%; max-height: 340px; width: 100%; }
  html[data-story='ready'] .concept-copy .eyebrow { font-size: 6px; }
  html[data-story='ready'] .atelier-conversation { top: 22%; width: 94%; transform: scale(.72); transform-origin: top right; }
  html[data-story='ready'] .atelier-editorial h3 { font-size: 26px; }
  html[data-story='ready'] .beauty-feedback { padding: 12px; }
  html[data-story='ready'] .beauty-feedback p { font-size: 14px; }
  html[data-story='ready'] .beauty-feedback small { margin-top: 8px; }
  html[data-story='ready'] .cafe-main h3 { font-size: 24px; }
  html[data-story='ready'] .opening-content { padding-block: 90px 55px; }
  html[data-story='ready'] .opening h2 { font-size: 55px; margin-block: 15px; }
  html[data-story='ready'] .opening-bottom { display: flex; flex-direction: row; align-items: end; justify-content: start; gap: 24px; }
  html[data-story='ready'] .opening-bottom>p { font-size: 11px; }
  html[data-story='ready'] .opening-action { font-size: 12px; margin: 0; }
}