/* A continuous part of the charcoal/gold page, with independent room and chair layers. */
.scroll-story { position: relative; background: #17191d; color: #f7f4ed; }
.scroll-story__anchor { position: absolute; top: 0; left: 0; }
.scroll-story__stage { position: relative; isolation: isolate; overflow: clip; padding-block: 80px 120px; }
.scroll-story__room { position: absolute; inset: 0; z-index: -4; opacity: .32; pointer-events: none; transform-origin: 56.5% 42.2%; will-change: transform, opacity; }
.scroll-story__room img { width: 100%; height: 100%; object-fit: cover; object-position: center; filter: saturate(.45) brightness(.77); }
.scroll-story__atmosphere { position: absolute; inset: 0; z-index: -1; pointer-events: none; background: linear-gradient(180deg, #17191d 0%, #17191df0 8%, #17191d36 38%, #17191d22 70%, #17191d 100%), linear-gradient(90deg, #17191d 0%, transparent 18%, transparent 82%, #17191d 100%); }
.scroll-story__shade { position: absolute; inset: 0; z-index: -2; pointer-events: none; }
.scroll-story__shade--right { background: linear-gradient(90deg, transparent 20%, #17191d9c 48%, #17191df5 86%); }
.scroll-story__shade--left { opacity: 0; background: linear-gradient(90deg, #17191df5 8%, #17191dc4 40%, transparent 78%); }
.scroll-story__heading { position: relative; z-index: 3; }
.scroll-story__heading .eyebrow { display: flex; align-items: center; gap: 12px; color: #ad9473; font-size: 9px; letter-spacing: .18em; }
.scroll-story__heading h2 { margin: 23px 0 0; font-size: clamp(30px, 3.1vw, 45px); line-height: 1.16; letter-spacing: -.025em; font-weight: 400; }
.scroll-story__heading h2 span { color: #b89f7f; }
.scroll-story__features { position: relative; z-index: 2; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 46px; margin-top: 78px; }
.scroll-story__feature { min-width: 0; }
.scroll-story__feature h3 { font-size: clamp(25px, 2.9vw, 42px); font-weight: 400; letter-spacing: -.025em; line-height: 1.17; margin: 0 0 23px; }
.scroll-story__feature > p:not(.scroll-story__index) { max-width: 390px; font-size: 14px; line-height: 1.9; color: #b1b0ad; margin: 0; }
.scroll-story__index { font-size: 10px; letter-spacing: .15em; color: #706d66; margin: 0 0 22px; }
.scroll-story__index span { color: #c9a779; }
.scroll-story__accent { display: flex; align-items: center; gap: 12px; color: #ac906c; font-size: 8px; letter-spacing: .19em; text-transform: uppercase; margin-top: 30px; }
.scroll-story__accent::before { content: ''; width: 30px; height: 1px; background: #a78a635e; }
.scroll-story__chair { position: absolute; z-index: 0; left: 0; bottom: 4svh; height: min(60svh, 640px); aspect-ratio: 2 / 3; opacity: .14; transform: translateX(70vw); transform-origin: 50% 90.4%; pointer-events: none; will-change: transform, opacity; filter: drop-shadow(0 22px 22px #0007); }
.scroll-story__chair img, .scroll-story__chair canvas { position: absolute; inset: 0; width: 100%; height: 100%; }
.scroll-story__chair canvas { display: none; }
.scroll-story.is-interactive .scroll-story__chair canvas { display: block; }
.scroll-story.is-interactive .scroll-story__still { display: none; }
.scroll-story__shadow { position: absolute; bottom: 5svh; left: 0; width: min(38svh, 420px); height: 4svh; border-radius: 50%; filter: blur(13px); background: #020202; opacity: 0; pointer-events: none; z-index: -1; will-change: transform, opacity; }
.scroll-story__exit { position: absolute; inset: 0; z-index: 5; background: #17191d; opacity: 0; pointer-events: none; }
.scroll-story__skip { position: absolute; top: 16px; right: 24px; z-index: 6; transform: translateY(-180%); padding: 12px 18px; border: 1px solid #a78c68; border-radius: 6px; background: #17191d; color: #eedcc3; font-size: 12px; text-decoration: none; }
.scroll-story__skip:focus-visible { transform: none; }

.scroll-story.is-interactive { height: 620svh; }
.scroll-story.is-interactive .scroll-story__stage { position: sticky; top: 0; height: 100svh; padding: 0; }
.scroll-story.is-interactive .scroll-story__heading { position: absolute; top: clamp(38px, 6.5svh, 80px); left: 0; right: 0; }
.scroll-story.is-interactive .scroll-story__features { position: absolute; top: 46%; bottom: 0; left: 0; right: 0; display: block; margin-top: 0; pointer-events: none; }
.scroll-story.is-interactive .scroll-story__feature { position: absolute; top: 0; width: min(37%, 440px); opacity: 0; will-change: transform, opacity; }
.scroll-story.is-interactive .scroll-story__feature--right { right: 3%; }
.scroll-story.is-interactive .scroll-story__feature--left { left: 3%; }
.scroll-story.is-interactive .scroll-story__chair { opacity: 1; }
.scroll-story.is-interactive + .approach-section { position: relative; z-index: 2; margin-top: -10svh; }

@media (min-width: 1600px) {
  .scroll-story.is-interactive .scroll-story__feature--right { right: 0; }
  .scroll-story.is-interactive .scroll-story__feature--left { left: 0; }
}
@media (max-width: 900px) {
  .scroll-story__features { gap: 25px; }
  .scroll-story__feature h3 { font-size: 29px; }
  .scroll-story__feature > p:not(.scroll-story__index) { font-size: 13px; }
  .scroll-story.is-interactive .scroll-story__feature { width: 39%; }
  .scroll-story.is-interactive .scroll-story__feature--right { right: 0; }
  .scroll-story.is-interactive .scroll-story__feature--left { left: 0; }
  .scroll-story__chair { height: 54svh; }
}
@media (max-width: 680px) {
  .scroll-story__stage { padding-block: 48px 60px; }
  .scroll-story__heading h2 { font-size: clamp(27px, 6.8vw, 36px); line-height: 1.2; }
  .scroll-story__heading .eyebrow { font-size: 8px; }
  .scroll-story__features { grid-template-columns: 1fr; gap: 38px; margin-top: 44px; }
  .scroll-story__feature h3 { font-size: 29px; margin-bottom: 15px; }
  .scroll-story__feature > p:not(.scroll-story__index) { font-size: 12px; line-height: 1.8; }
  .scroll-story__index { margin-bottom: 15px; font-size: 9px; }
  .scroll-story__accent { margin-top: 19px; font-size: 7px; }
  .scroll-story__chair { height: min(39svh, 370px); bottom: 3svh; }
  .scroll-story__shadow { bottom: 4svh; width: 28svh; height: 3svh; }
  .scroll-story.is-interactive { height: 580svh; }
  .scroll-story.is-interactive .scroll-story__heading { top: 38px; }
  .scroll-story.is-interactive .scroll-story__features { top: 29%; }
  .scroll-story.is-interactive .scroll-story__feature { width: 85%; }
  .scroll-story.is-interactive .scroll-story__feature--right { right: 0; }
  .scroll-story.is-interactive .scroll-story__feature--left { left: 0; }
  .scroll-story__atmosphere { background: linear-gradient(180deg, #17191d 0%, #17191de0 25%, #17191db3 52%, #17191d22 76%, #17191d 100%); }
}
@media (max-height: 650px) and (min-width: 681px) {
  .scroll-story.is-interactive .scroll-story__heading { top: 28px; }
  .scroll-story__heading h2 { font-size: 32px; margin-top: 15px; }
  .scroll-story.is-interactive .scroll-story__features { top: 42%; }
  .scroll-story__feature h3 { font-size: 29px; }
  .scroll-story__feature > p:not(.scroll-story__index) { font-size: 12px; }
  .scroll-story__accent { margin-top: 18px; }
}
@media (prefers-reduced-motion: reduce) {
  .scroll-story.is-interactive { height: auto; }
  .scroll-story__room, .scroll-story__chair, .scroll-story__feature { will-change: auto; }
}