:root { color-scheme: light; --paper: #eeeae1; --ink: #34372e; }
* { box-sizing: border-box; }
html, body { margin: 0; overflow-x: hidden; background: var(--paper); overscroll-behavior-x: none; }
html.voyage-locked, html.voyage-locked body { overflow: hidden; overscroll-behavior: none; }
html.voyage-locked { height: 100%; }
html.voyage-locked body { position: fixed; top: 0; left: 0; width: 100%; }

/* Horizontal voyage canvas — scenes sit side by side; wheel input drives translateX */
.voyage { position: relative; width: 100vw; height: 100svh; overflow: hidden; }
.voyage__track { display: flex; height: 100%; width: max-content; will-change: transform; }
.voyage__track > * { flex: 0 0 100vw; width: 100vw; }

.hero { position: relative; height: 100svh; overflow: hidden; isolation: isolate; background: radial-gradient(ellipse at 38% 30%, #f5f2ea80, transparent 75%), var(--paper); }
.paper { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; z-index: 4; mix-blend-mode: multiply; }
.signature { position: absolute; top: 7.1%; left: 50%; transform: translateX(-50%); margin: 0; color: var(--ink); font: 500 11px/1.2 Arial, sans-serif; letter-spacing: .19em; white-space: nowrap; z-index: 3; }
h1 { margin: 0; color: var(--ink); font-family: Impact, 'Arial Narrow', 'Helvetica Neue', sans-serif; font-weight: 900; }
.title-line { position: absolute; display: block; line-height: .9; letter-spacing: -.035em; white-space: nowrap; transform-origin: left center; z-index: 2; }
.title-line--one { top: 30%; left: 5.8%; font-size: 19.7vw; transform: scaleX(.81); }
.title-line--two { top: 55%; left: 39%; font-size: 21vw; transform: scaleX(.88); }
.cloud { position: absolute; pointer-events: none; user-select: none; will-change: transform; }
.cloud img { display: block; width: 100%; height: auto; filter: saturate(.25) sepia(.08); }
.cloud--one { width: 24vw; left: 69%; top: 12%; opacity: .72; z-index: 1; }
.cloud--one img { transform: scaleX(-1); }
.cloud--two { width: 29vw; left: 2%; top: 62%; opacity: .8; z-index: 1; }
.cloud--three { width: 19vw; left: 68%; top: 45%; opacity: .8; z-index: 1; }
.cloud--three img { transform: scaleX(-1) rotate(-5deg); }
@media (max-width: 600px) {
  .signature { top: 8%; font-size: 9px; }
  .title-line--one { top: 36%; left: 5%; font-size: 21vw; transform: scaleX(.78); }
  .title-line--two { top: 48%; left: 22%; font-size: 28vw; transform: scaleX(.85); }
  .cloud--one { width: 45vw; top: 20%; left: 52%; }
  .cloud--two { width: 54vw; top: 66%; left: -5%; }
  .cloud--three { width: 34vw; top: 45%; left: 65%; }
}
@media (prefers-reduced-motion: reduce) { .cloud { will-change: auto; } }

/* Shared discreet side element — present on every scene from Slide 02 onward */
.side-shortcut { position: absolute; left: 1.6%; top: 50%; transform: translateY(-50%) rotate(-90deg); transform-origin: left center; margin: 0; color: var(--ink); opacity: .55; font: 500 11px/1 Arial, sans-serif; letter-spacing: .16em; white-space: nowrap; pointer-events: none; z-index: 2; }
@media (max-width: 700px) {
  .side-shortcut { left: auto; right: 4%; top: auto; bottom: 3%; transform: none; }
}

/* Slide 02 — The Place */
.slide-02 { position: relative; height: 100svh; overflow: hidden; background: var(--paper); }
.s2-label { position: absolute; top: 15.5%; left: 4.4%; margin: 0; color: var(--ink); font: 500 12px/1.2 Arial, sans-serif; letter-spacing: .14em; z-index: 2; }
.s2-title { position: absolute; top: 13%; left: 4.4%; margin: 0; width: 46%; }
.s2-title span { display: block; font-family: Georgia, 'Times New Roman', serif; font-weight: 400; line-height: .96; letter-spacing: -.01em; }
.s2-title__ghost { position: absolute; top: 0; left: 0; color: var(--ink); opacity: .14; font-size: 6.4vw; z-index: 0; }
.s2-title__main { position: relative; top: 2.2vw; left: 1.4vw; color: var(--ink); font-size: 6.9vw; z-index: 1; }
.s2-title__main::first-letter { font-family: 'Brush Script MT', 'Segoe Script', cursive; font-size: 1.35em; }
.s2-media { position: absolute; left: 52.75%; top: 8.4%; width: 44.6%; height: 58.8%; overflow: hidden; border-radius: 10px; z-index: 1; }
.s2-media video { width: 100%; height: 100%; object-fit: cover; display: block; }
.s2-line { position: absolute; left: 1%; top: 53%; width: 98%; height: 18%; z-index: 0; opacity: 0; }
.s2-line path { fill: none; stroke: var(--ink); stroke-width: 1.4; stroke-dasharray: 1 9; opacity: .35; }
.s2-cta { position: absolute; left: 20.25%; top: 71.5%; margin: 0; display: flex; align-items: center; gap: .6em; color: #b08a2e; font: 600 15px/1.2 Arial, sans-serif; letter-spacing: .04em; z-index: 2; }
.s2-cta__text { text-decoration: line-through; text-decoration-thickness: 1px; }
.s2-copy { position: absolute; left: 20.15%; top: 75.5%; width: 40%; margin: 0; color: var(--ink); font-family: Arial, 'Helvetica Neue', sans-serif; font-weight: 500; font-size: 1.7vw; line-height: 1.3; z-index: 2; }
@media (max-width: 700px) {
  .s2-label { top: 8%; }
  .s2-title { top: 15%; width: 88%; }
  .s2-title__ghost { font-size: 11vw; }
  .s2-title__main { font-size: 12vw; top: 2.5vw; left: 1.5vw; }
  .s2-media { left: 6%; top: 31%; width: 88%; height: 25%; }
  .s2-line { top: 58%; }
  .s2-cta { top: 62%; left: 6%; font-size: 13px; }
  .s2-copy { left: 6%; top: 66%; width: 88%; font-size: 5.2vw; }
}

/* Slide 03 — Shelter */
.slide-03 { position: relative; height: 100svh; overflow: hidden; background: var(--paper); }
.s3-line { position: absolute; left: 0; top: 40%; width: 100%; height: 32%; z-index: 0; opacity: 0; }
.s3-line path { fill: none; stroke: var(--ink); stroke-width: 1.4; stroke-dasharray: 1 9; opacity: .35; }
.s3-label { position: absolute; top: 35.4%; left: 5.2%; margin: 0; color: var(--ink); font: 500 12px/1.2 Arial, sans-serif; letter-spacing: .14em; z-index: 2; }
.s3-label span + span { margin-left: .5em; }
.s3-title { position: absolute; top: 38%; left: 5.2%; margin: 0; width: 34%; color: var(--ink); font-family: Arial, 'Helvetica Neue', sans-serif; font-weight: 500; font-size: 2.9vw; line-height: 1.18; letter-spacing: -.005em; z-index: 2; }
.s3-media { position: absolute; left: 53.7%; top: 9.9%; width: 42.7%; height: 75.4%; overflow: hidden; border-radius: 10px; z-index: 1; }
.s3-media video { width: 100%; height: 100%; object-fit: cover; display: block; }
.s3-caption { position: absolute; left: 53.7%; top: 87%; margin: 0; color: var(--ink); font: 500 11px/1.2 Arial, sans-serif; letter-spacing: .12em; z-index: 2; }
@media (max-width: 700px) {
  .s3-label { top: 22%; left: 6%; }
  .s3-title { top: 25%; left: 6%; width: 88%; font-size: 6.4vw; }
  .s3-media { left: 6%; top: 45%; width: 88%; height: 32%; }
  .s3-caption { left: 6%; top: 79%; }
  .s3-line { top: 38%; height: 10%; }
}

/* Slide 04 — Experience */
.slide-04 { position: relative; height: 100svh; overflow: hidden; background: var(--paper); }
.s4-line { position: absolute; left: 0; top: 50%; width: 100%; height: 20%; z-index: 0; opacity: 0; }
.s4-line path { fill: none; stroke: var(--ink); stroke-width: 1.4; stroke-dasharray: 1 9; opacity: .3; }
.s4-label { position: absolute; top: 12.3%; left: 17.5%; margin: 0; color: #b08a2e; font: 500 12px/1.2 Arial, sans-serif; letter-spacing: .14em; z-index: 2; }
.s4-label span + span { margin-left: .5em; }
.s4-title { position: absolute; top: 15.8%; left: 17.5%; margin: 0; width: 45%; color: var(--ink); font-family: Arial, 'Helvetica Neue', sans-serif; font-weight: 500; font-size: 2.6vw; line-height: 1.2; z-index: 2; }
.s4-cta { position: absolute; top: 34.3%; left: 17.5%; margin: 0; color: #b08a2e; font: 600 13px/1.2 Arial, sans-serif; letter-spacing: .1em; z-index: 2; }
.s4-cta span { margin-left: .4em; }
.s4-media { position: absolute; left: 70.6%; top: 6.9%; width: 27.9%; height: 42.8%; overflow: hidden; border-radius: 10px; z-index: 1; }
.s4-media img { width: 100%; height: 100%; object-fit: cover; display: block; }
.s4-word { position: absolute; left: 7.5%; top: 68%; margin: 0; color: var(--ink); font-family: 'Arial Rounded MT Bold', Arial, sans-serif; font-weight: 800; font-size: 11vw; line-height: .9; letter-spacing: -.01em; white-space: nowrap; z-index: 1; }
@media (max-width: 700px) {
  .s4-label { top: 10%; left: 6%; }
  .s4-title { top: 15%; left: 6%; width: 88%; font-size: 6vw; }
  .s4-cta { top: 34%; left: 6%; }
  .s4-media { left: 6%; top: 40%; width: 88%; height: 22%; }
  .s4-line { top: 63%; height: 10%; }
  .s4-word { top: 72%; left: 5%; font-size: 18vw; }
}

/* Slide 05 — Stay */
.slide-05 { position: relative; height: 100svh; overflow: hidden; background: var(--paper); }
.s5-line { position: absolute; left: 0; top: 38%; width: 100%; height: 34%; z-index: 0; opacity: 0; }
.s5-line path { fill: none; stroke: var(--ink); stroke-width: 1.4; stroke-dasharray: 1 9; opacity: .32; }
.s5-media { position: absolute; overflow: hidden; border-radius: 10px; z-index: 1; }
.s5-media img { width: 100%; height: 100%; object-fit: cover; display: block; }
.s5-media--a { left: 13.35%; top: 2.55%; width: 36.3%; height: 35.7%; }
.s5-media--a img { object-position: 50% 53%; }
.s5-media--b { left: 44.95%; top: 52.3%; width: 31.7%; height: 41.7%; }
.s5-media--b img { object-position: 50% 100%; }
.s5-label { position: absolute; top: 42%; left: 5.2%; margin: 0; color: var(--ink); font: 500 12px/1.2 Arial, sans-serif; letter-spacing: .14em; z-index: 2; }
.s5-label span + span { margin-left: .5em; }
.s5-title { position: absolute; top: 46%; left: 5.2%; margin: 0; width: 34%; color: var(--ink); font-family: Arial, 'Helvetica Neue', sans-serif; font-weight: 500; font-size: 2.9vw; line-height: 1.18; z-index: 2; }
@media (max-width: 700px) {
  .s5-media--a { left: 6%; top: 8%; width: 88%; height: 22%; }
  .s5-media--b { left: 6%; top: 33%; width: 88%; height: 22%; }
  .s5-label { top: 58%; left: 6%; }
  .s5-title { top: 62%; left: 6%; width: 88%; font-size: 6vw; }
  .s5-line { top: 6%; height: 30%; }
}

/* Booking — first vertical chapter, reached by continuing past Slide 05 */
.booking { position: relative; background: var(--paper); }
.bk-header { position: sticky; top: 0; z-index: 5; background: var(--paper); padding-top: 2.2em; }
.bk-nav { display: flex; align-items: center; justify-content: space-between; padding: 0 5.5%; }
.bk-nav__brand { color: var(--ink); font: 500 11px/1.2 Arial, sans-serif; letter-spacing: .19em; }
.bk-nav__place { color: var(--ink); opacity: .55; font: 500 11px/1.2 Arial, sans-serif; letter-spacing: .14em; }
.bk-steps { display: flex; gap: 3.2em; list-style: none; margin: 1.8em 0 0; padding: 0 5.5% .9em; border-bottom: 1px solid rgba(52,55,46,.14); }
.bk-step { display: flex; align-items: baseline; gap: .5em; color: var(--ink); opacity: .4; font: 500 11px/1 Arial, sans-serif; letter-spacing: .12em; padding-bottom: .9em; margin-bottom: -1px; border-bottom: 1px solid transparent; transition: opacity .3s ease, border-color .3s ease; }
.bk-step em { font-style: normal; opacity: .7; }
.bk-step.is-active { opacity: 1; border-bottom-color: var(--ink); }
.bk-block { position: relative; min-height: 100svh; display: flex; align-items: center; }
.bk-block + .bk-block { border-top: 1px solid rgba(52,55,46,.14); }
.bk-content { width: 100%; max-width: 1240px; margin: 0 auto; padding: 4.6% 5.5%; }
.bk-label { margin: 0 0 1.4em; color: var(--ink); font: 500 12px/1.2 Arial, sans-serif; letter-spacing: .14em; }
.bk-label span + span { margin-left: .5em; }
.bk-eyebrow { margin: 0 0 .6em; color: #b08a2e; font: 600 11px/1.2 Arial, sans-serif; letter-spacing: .16em; }
.bk-title { margin: 0 0 .5em; color: var(--ink); font-family: Georgia, 'Times New Roman', serif; font-weight: 400; font-size: clamp(2.4rem, 4.4vw, 3.6rem); line-height: 1.05; }
.bk-copy { margin: 0 0 3em; max-width: 40em; color: var(--ink); font-family: Arial, 'Helvetica Neue', sans-serif; font-weight: 500; font-size: clamp(1rem, 1.15vw, 1.15rem); line-height: 1.5; opacity: .92; }
.bk-summary { display: grid; grid-template-columns: repeat(3, 1fr); border-top: 1px solid rgba(52,55,46,.14); border-bottom: 1px solid rgba(52,55,46,.14); margin-bottom: 3.6em; }
.bk-summary__item { padding: 1.5em 1.6em 1.5em 0; border-left: 1px solid rgba(52,55,46,.14); padding-left: 1.6em; display: flex; flex-direction: column; gap: .5em; }
.bk-summary__item:first-child { border-left: none; padding-left: 0; }
.bk-summary__label { color: var(--ink); opacity: .5; font: 500 10px/1.2 Arial, sans-serif; letter-spacing: .14em; }
.bk-summary__value { color: var(--ink); font-family: Arial, 'Helvetica Neue', sans-serif; font-weight: 500; font-size: clamp(1.05rem, 1.5vw, 1.35rem); }
.bk-calendar { display: grid; grid-template-columns: repeat(2, 1fr); gap: 6%; margin-bottom: 2.6em; }
.bk-month__title { margin: 0 0 1.4em; color: var(--ink); font-family: Georgia, 'Times New Roman', serif; font-weight: 400; font-size: clamp(1.3rem, 1.9vw, 1.7rem); }
.bk-month__title span { color: var(--ink); opacity: .5; font-size: .62em; margin-left: .35em; }
.bk-grid { display: grid; grid-template-columns: repeat(7, 1fr); row-gap: .55em; }
.bk-grid__head { color: var(--ink); opacity: .4; font: 500 10px/1 Arial, sans-serif; letter-spacing: .08em; text-align: center; padding-bottom: .6em; }
.bk-grid__day { position: relative; display: flex; align-items: center; justify-content: center; height: 2.5em; color: var(--ink); font-family: Arial, 'Helvetica Neue', sans-serif; font-size: .92rem; }
.bk-grid__day.is-empty { visibility: hidden; }
.bk-grid__day.is-range::before { content: ''; position: absolute; inset: .2em; background: rgba(52,55,46,.08); border-radius: 3px; }
.bk-grid__day.is-start, .bk-grid__day.is-end { color: var(--paper); }
.bk-grid__day.is-start::before, .bk-grid__day.is-end::before { content: ''; position: absolute; inset: .2em; background: var(--ink); border-radius: 3px; }
.bk-grid__day span { position: relative; z-index: 1; }
.bk-bar { display: flex; align-items: center; justify-content: space-between; gap: 2em; padding-top: 2em; border-top: 1px solid rgba(52,55,46,.14); }
.bk-bar__note { margin: 0; color: var(--ink); opacity: .5; font-family: Arial, 'Helvetica Neue', sans-serif; font-size: .85rem; }
.bk-cta { display: inline-flex; align-items: center; justify-content: center; padding: .95em 2.2em; border: 1px solid var(--ink); background: none; color: var(--ink); font: 600 12px/1 Arial, sans-serif; letter-spacing: .12em; white-space: nowrap; cursor: pointer; }
button.bk-cta { border-radius: 0; }
.bk-cta:hover { background: rgba(52,55,46,.06); }
.bk-cta--final { cursor: default; background: var(--ink); color: var(--paper); }
.bk-cta--final:hover { background: var(--ink); }

/* Stay — room / suite selection */
.bk-rooms { display: grid; grid-template-columns: repeat(2, 1fr); gap: 4%; margin-bottom: 2.8em; }
.bk-room { display: block; text-align: left; background: none; border: 1px solid transparent; padding: .6em .6em 1.6em; margin: 0; font: inherit; color: inherit; cursor: pointer; transition: border-color .25s ease, background-color .25s ease; }
.bk-room:hover { background: rgba(52,55,46,.03); }
.bk-room.is-selected { border-color: var(--ink); background: rgba(52,55,46,.03); }
.bk-room:focus-visible { outline: 2px solid var(--ink); outline-offset: 2px; }
.bk-room__media { display: block; width: 100%; aspect-ratio: 4 / 5; overflow: hidden; border-radius: 10px; margin-bottom: 1.2em; }
.bk-room__media img { width: 100%; height: 100%; object-fit: cover; display: block; }
.bk-room__row { display: flex; align-items: baseline; justify-content: space-between; gap: 1em; }
.bk-room__name { font-family: Georgia, 'Times New Roman', serif; font-size: clamp(1.3rem, 1.9vw, 1.6rem); color: var(--ink); }
.bk-room__mark { opacity: 0; color: #b08a2e; font: 600 10px/1 Arial, sans-serif; letter-spacing: .14em; white-space: nowrap; }
.bk-room.is-selected .bk-room__mark { opacity: 1; }
.bk-room__desc { display: block; margin-top: .6em; color: var(--ink); opacity: .8; font-family: Arial, 'Helvetica Neue', sans-serif; font-weight: 500; font-size: .95rem; line-height: 1.45; }
.bk-room__meta { display: block; margin-top: 1.1em; color: var(--ink); opacity: .5; font: 500 10px/1.2 Arial, sans-serif; letter-spacing: .1em; text-transform: uppercase; }
.bk-room__price { display: block; margin-top: .4em; color: var(--ink); font-family: Arial, 'Helvetica Neue', sans-serif; font-weight: 600; font-size: 1.1rem; }
.bk-room__price em { font-style: normal; opacity: .55; font-weight: 500; font-size: .82em; }

/* Review — final summary */
.bk-content--review { display: grid; grid-template-columns: 1fr 1fr; gap: 8%; align-items: start; }
.bk-review__panel { border-top: 1px solid rgba(52,55,46,.14); }
.bk-review__row { display: flex; align-items: baseline; justify-content: space-between; gap: 1em; padding: 1.1em 0; border-bottom: 1px solid rgba(52,55,46,.14); font-family: Arial, 'Helvetica Neue', sans-serif; }
.bk-review__row span:first-child { color: var(--ink); opacity: .55; font-size: .85rem; letter-spacing: .04em; }
.bk-review__row span:last-child { color: var(--ink); font-size: 1.05rem; font-weight: 500; text-align: right; }
.bk-review__row--total { padding-top: 1.5em; }
.bk-review__row--total span:first-child { opacity: .8; font-weight: 600; }
.bk-review__row--total span:last-child { font-family: Georgia, 'Times New Roman', serif; font-size: 1.7rem; font-weight: 400; }
.bk-review__cta { margin-top: 2.2em; display: flex; flex-direction: column; align-items: flex-start; gap: .9em; }
@media (max-width: 700px) {
  .bk-header { padding-top: 8%; }
  .bk-nav { padding: 0 6%; }
  .bk-steps { gap: 1.6em; padding: 0 6% .9em; overflow-x: auto; }
  .bk-content { padding: 10% 6%; }
  .bk-summary { grid-template-columns: 1fr; }
  .bk-summary__item { border-left: none; padding-left: 0; border-top: 1px solid rgba(52,55,46,.14); padding-top: 1.2em; }
  .bk-summary__item:first-child { border-top: none; padding-top: 0; }
  .bk-calendar { grid-template-columns: 1fr; gap: 10vw; }
  .bk-bar { flex-direction: column; align-items: flex-start; gap: 1.2em; }
  .bk-rooms { grid-template-columns: 1fr; gap: 10vw; }
  .bk-content--review { grid-template-columns: 1fr; gap: 8vw; }
}