/* Large, pinned photographs and scroll-driven chapters. */
.hero-scroll { height: 320svh; min-height: 0; }
.hero-sticky { height: 100svh; min-height: 0; }
.hero-media { transform: none; border-radius: 0; }
.hero-media img { animation: none; transform: none; }
.hero-content { top: 25%; }
.hero-content h1 { font-size: clamp(56px, 6.8vw, 108px); }
.hero-afterword {
  position: absolute;
  inset: 15% 0 16%;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  opacity: 0;
  pointer-events: none;
  will-change: opacity, transform;
}
.hero-large-word {
  font-family: var(--serif);
  font-size: clamp(76px, 10.5vw, 170px);
  letter-spacing: .12em;
  line-height: 1.35;
  margin: 20px 0 24px;
}
.hero-afterword > p:last-child { font-size: 12px; letter-spacing: .15em; line-height: 2.3; }
.experience-progress {
  position: absolute;
  left: var(--pad);
  right: var(--pad);
  bottom: 86px;
  display: flex;
  gap: 22px;
  align-items: center;
  font-size: 9px;
  letter-spacing: .12em;
}
.experience-track { height: 1px; flex: 1; background: #ffffff40; overflow: hidden; }
.experience-track i, .room-scroll-track i {
  display: block;
  width: 100%;
  height: 100%;
  background: white;
  transform: scaleX(var(--progress, 0));
  transform-origin: left;
}
.experience-percent { min-width: 32px; text-align: right; font: 12px Georgia, serif; }
.intro-photo {
  height: 80svh;
  min-height: 480px;
  margin-left: calc(-1 * var(--pad));
  margin-right: calc(-1 * var(--pad));
}
.intro-photo-caption { left: var(--pad); right: var(--pad); bottom: 40px; }
.onsen-scroll { height: 500svh; min-height: 0; }
.onsen-sticky { height: 100svh; min-height: 0; }
.onsen-image, .onsen-forest { will-change: transform, opacity; }
.onsen-forest { position: absolute; inset: 0; opacity: 0; object-position: center; }
.onsen-copy { top: 24%; max-width: 760px; will-change: transform, opacity; }
.onsen-copy h2 { font-size: clamp(64px, 7.4vw, 115px); line-height: 1.4; }
.onsen-copy > p:last-of-type { transition: none; }
.onsen-overlay {
  background: linear-gradient(90deg, #092016b8, #09201610 85%), linear-gradient(0deg, #092016c0, transparent 45%);
}
.onsen-chapter {
  position: absolute;
  right: 5vw;
  top: 23%;
  font: 400 clamp(180px, 28vw, 450px)/1 Georgia, serif;
  letter-spacing: -.08em;
  color: #ffffff05;
  -webkit-text-stroke: 1px #ffffff38;
  pointer-events: none;
}
.onsen-steps { gap: 40px; right: 34%; bottom: 50px; }
.onsen-steps button { flex: 1; min-width: 0; opacity: .65; }
.onsen-steps button.active { opacity: 1; }
.onsen-steps i:after, .onsen-steps .active i:after {
  width: 100%;
  transform: scaleX(var(--scene-progress, 0));
  transform-origin: left;
  transition: none;
}
.room-scroll {
  height: 220svh;
  margin-left: calc(-1 * var(--pad));
  margin-right: calc(-1 * var(--pad));
}
.room-image-wrap {
  height: calc(100svh - 76px);
  position: sticky;
  top: 76px;
  margin: 0;
  isolation: isolate;
}
.room-image-wrap img { transition: opacity .25s; will-change: transform; }
.room-image-wrap:hover img { transform: none; }
.room-photo-shade { position: absolute; inset: 0; background: linear-gradient(0deg, #0b211b80, transparent 65%); }
.room-immersive-copy {
  position: absolute;
  inset: 0;
  display: grid;
  place-content: center;
  text-align: center;
  font-family: var(--serif);
  font-size: clamp(58px, 7vw, 110px);
  letter-spacing: .1em;
  line-height: 1.55;
  color: white;
  text-shadow: 0 2px 40px #00000070;
  opacity: 0;
  pointer-events: none;
  will-change: opacity, transform;
}
.room-image-wrap .image-label { left: var(--pad); bottom: 40px; }
.room-image-wrap #room-number { right: var(--pad); bottom: 40px; }
.room-scroll-track { position: absolute; inset: auto 0 0; height: 3px; background: #ffffff30; }
.dining-grid { grid-template-columns: .85fr 1.5fr; margin-right: calc(-1 * var(--pad)); gap: 6vw; }
.dining-photo { height: 85svh; min-height: 600px; }
.dining-photo figcaption { padding-right: var(--pad); }
@media (max-width: 800px) {
  .hero-scroll { height: 300svh; }
  .hero-content h1 { font-size: clamp(54px, 8vw, 78px); }
  .onsen-copy { top: 26%; }
  .onsen-copy h2 { font-size: clamp(64px, 9vw, 88px); }
  .onsen-steps { right: var(--pad); gap: 25px; }
  .onsen-chapter { top: 28%; right: 6vw; font-size: 240px; }
  .room-image-wrap { top: 70px; height: calc(100svh - 70px); }
  .dining-grid { gap: 4vw; grid-template-columns: .9fr 1.2fr; }
  .dining-photo { min-height: 500px; height: 78svh; }
}
@media (max-width: 600px) {
  .hero-content { top: 25%; left: 28px; right: 25px; }
  .hero-content h1 { font-size: clamp(40px, 10.8vw, 64px); }
  .hero-desc { margin-top: 16px; }
  .hero-content .text-link { margin-top: 14px; }
  .hero-afterword { inset: 18% 15px 17%; }
  .hero-afterword .eyebrow { font-size: 7px; letter-spacing: .15em; }
  .hero-large-word { font-size: clamp(68px, 20vw, 105px); margin: 24px 0; letter-spacing: .06em; }
  .hero-afterword > p:last-child { font-size: 10px; }
  .experience-progress { bottom: 73px; gap: 12px; font-size: 8px; letter-spacing: .03em; }
  .experience-percent { font-size: 10px; min-width: 27px; }
  .intro-photo { height: 82svh; min-height: 420px; }
  .intro-photo-caption { bottom: 27px; }
  .onsen-scroll { height: 460svh; }
  .onsen-copy { top: 25%; right: 20px; }
  .onsen-copy h2 { font-size: clamp(50px, 14vw, 72px); }
  .onsen-chapter { top: 42%; right: 6vw; font-size: 160px; }
  .onsen-steps { bottom: 30px; gap: 16px; }
  .room-scroll { height: 200svh; }
  .room-immersive-copy { font-size: clamp(44px, 13vw, 68px); }
  .room-image-wrap .image-label, .room-image-wrap #room-number { bottom: 26px; }
  .dining-grid { grid-template-columns: 1fr; margin-right: 0; gap: 35px; }
  .dining-photo { height: 83svh; min-height: 460px; margin-left: calc(-1 * var(--pad)); margin-right: calc(-1 * var(--pad)); }
  .dining-photo figcaption { padding-left: var(--pad); padding-right: var(--pad); }
}
@media (max-height: 700px) and (min-width: 601px) {
  .hero-content { top: 20%; }
  .hero-content h1 { font-size: 56px; margin-top: 12px; }
  .hero-desc { margin-top: 10px; font-size: 11px; }
  .hero-content .text-link { margin-top: 8px; }
  .hero-large-word { font-size: 80px; margin: 12px 0; }
  .onsen-copy { top: 24%; }
  .onsen-copy h2 { font-size: 62px; margin-top: 8px; }
  .onsen-copy > p:last-of-type { margin-top: 12px; }
  .onsen-copy .text-link { margin-top: 8px; }
  .onsen-top { top: 95px; }
}
@media (prefers-reduced-motion: reduce) {
  .hero-scroll, .onsen-scroll { height: 100svh; min-height: 650px; }
  .hero-sticky, .onsen-sticky { min-height: 650px; }
  .hero-afterword, .experience-progress, .onsen-chapter { display: none; }
  .hero-content, .hero-media, .onsen-image, .onsen-copy, .room-image-wrap img { transform: none !important; opacity: 1 !important; }
  .onsen-forest { display: none; }
  .room-scroll { height: auto; }
  .room-image-wrap { position: relative; top: 0; height: 85svh; min-height: 430px; }
  .room-immersive-copy { opacity: 1; transform: none !important; }
  .room-scroll-track { display: none; }
}