/* FINAL DARK BEIGE / A horizontal story reel, not another zoom transition.
   All dimensions below are reserved in CSS. JavaScript only changes transform/opacity.
   No JS, small screens and reduced motion receive the complete stacked reading layout. */
:root{--reel-dark:#191510;--reel-card:#2b241d;--reel-paper:#eee5d9;--reel-accent:#cfb996}
.story-reel{background:var(--reel-dark);color:var(--reel-paper);position:relative;overflow:clip}
.reel-stage{position:relative;padding:42px var(--pad) 30px}
.reel-stage .section-index{margin-bottom:27px;padding-bottom:16px;color:var(--reel-accent);border-color:#c7ad8b2a;font-size:9px}
.reel-heading{display:flex;justify-content:space-between;align-items:end;gap:36px;margin-bottom:28px}
.reel-heading h2{font-size:clamp(46px,5.1vw,88px);font-weight:900;line-height:.92;letter-spacing:-.065em}
.reel-heading h2 span{color:var(--reel-accent)}
.reel-heading>p{font-size:14px;line-height:1.8;color:#c9b8a3;max-width:270px;margin-bottom:3px}
.reel-track{display:grid;grid-template-columns:1fr;gap:32px}
.reel-card{background:var(--reel-card);border:1px solid #c4af902a;border-radius:4px;overflow:hidden;min-width:0;position:relative;isolation:isolate}
.reel-photo{position:relative;overflow:hidden;aspect-ratio:2.08}
.reel-photo img{height:100%;width:100%;object-fit:cover;object-position:center 48%;transform-origin:center}
.reel-photo>span{position:absolute;bottom:16px;left:16px;font-size:7px;letter-spacing:.11em;padding:7px 9px;background:#1d1813b8;color:var(--reel-paper);border:1px solid #f1e2c644}
.reel-caption{display:flex;justify-content:space-between;align-items:center;padding:24px;gap:20px;min-height:140px}
.reel-caption .eyebrow{font-size:8px;color:var(--reel-accent);letter-spacing:.11em;margin-bottom:12px}
.reel-caption h3{font-size:clamp(28px,3vw,46px);line-height:1.05;letter-spacing:-.055em;margin-bottom:9px;font-weight:700}
.reel-caption>div>p:last-child{font-size:13px;color:#c9b8a3;line-height:1.7}
.reel-number{font-size:64px;font-weight:400;color:#ae987c;letter-spacing:-.08em;line-height:1;flex-shrink:0}
.reel-controls{display:flex;align-items:center;gap:28px;margin-top:21px}
.reel-positions{display:none;gap:8px}
.reel-positions button{border:1px solid #ccb39142;color:var(--reel-paper);font-size:10px;border-radius:50%;height:38px;width:38px;position:relative;isolation:isolate}
.reel-positions button::before{content:'';position:absolute;inset:0;border-radius:50%;background:var(--reel-accent);z-index:-1;opacity:0}
.reel-positions button[aria-pressed=true]::before{opacity:1}
.reel-positions button[aria-pressed=true]{color:#191510}
.reel-progress{display:none;background:#cab39333;height:1px;width:180px}
.reel-progress i{display:block;width:100%;height:1px;background:var(--reel-accent);transform-origin:left}
.reel-controls>a{margin-left:auto;display:flex;gap:25px;align-items:center;font-size:11px;font-weight:700}
.reel-controls>a>span{font-size:27px}
.reel-disclosure{font-size:9px;color:#bda88c;line-height:1.7;margin-top:10px}
.reel-hint{visibility:hidden}
/* Only desktop motion mode receives the extra scroll runway and sticky stage. */
@media(min-width:768px) and (min-height:640px) and (prefers-reduced-motion:no-preference){
 html[data-motion=on] .story-reel{height:240svh}
 html[data-motion=on] .reel-stage{position:sticky;top:0;height:100svh;padding-top:34px;padding-bottom:18px;overflow:clip;display:flex;flex-direction:column}
 html[data-motion=on] .reel-stage .section-index{flex-shrink:0}
 html[data-motion=on] .reel-heading{flex-shrink:0}
 html[data-motion=on] .reel-heading h2{font-size:clamp(44px,4.5vw,76px)}
 html[data-motion=on] .reel-window{flex:1;min-height:0;overflow:visible}
 html[data-motion=on] .reel-track{display:flex;gap:26px;width:max-content;height:100%}
 html[data-motion=on] .reel-card{width:73vw;height:100%;flex:0 0 73vw;display:flex;flex-direction:column}
 html[data-motion=on] .reel-photo{flex:1;min-height:0;aspect-ratio:auto}
 html[data-motion=on] .reel-caption{min-height:128px;flex-shrink:0}
 html[data-motion=on] .reel-caption h3{font-size:clamp(28px,2.75vw,45px)}
 html[data-motion=on] .reel-positions,html[data-motion=on] .reel-progress{display:flex}
 html[data-motion=on] .reel-positions button,html[data-motion=on] .reel-photo img{will-change:transform,opacity}
 html[data-motion=on] .reel-hint{visibility:visible}
}
@media(min-width:768px) and (min-height:640px) and (max-height:760px){
 html[data-motion=on] .reel-stage{padding-top:20px}
 html[data-motion=on] .reel-stage .section-index{margin-bottom:19px;padding-bottom:12px}
 html[data-motion=on] .reel-heading{margin-bottom:22px}
 html[data-motion=on] .reel-heading h2{font-size:50px}
 html[data-motion=on] .reel-caption{padding:17px 22px;min-height:113px}
 html[data-motion=on] .reel-caption .eyebrow{margin-bottom:8px}
 html[data-motion=on] .reel-caption h3{font-size:33px}
 html[data-motion=on] .reel-controls{margin-top:14px}
}
@media(max-width:1100px){.reel-stage{padding-left:var(--pad);padding-right:var(--pad)}.reel-caption h3{font-size:33px}.reel-heading>p{font-size:12px}.reel-caption>div>p:last-child{font-size:12px}.reel-number{font-size:50px}.reel-caption{padding:21px}}
@media(max-width:767px){
 .reel-stage{padding:55px var(--pad) 45px}
 .reel-stage .section-index{font-size:7px;margin-bottom:30px}
 .reel-stage .section-index>span:last-child{display:none}
 .reel-heading{display:block;margin-bottom:30px}
 .reel-heading h2{font-size:11.35vw;line-height:.96}
 .reel-heading>p{font-size:13px;margin-top:22px;max-width:none}
 .reel-track{gap:24px}
 .reel-photo{aspect-ratio:1.22}
 .reel-photo img{object-position:center}
 .reel-caption{padding:24px 21px;min-height:174px;align-items:start;gap:12px}
 .reel-caption .eyebrow{font-size:7px;margin-bottom:13px}
 .reel-caption h3{font-size:31px;max-width:245px;line-height:1.04}
 .reel-caption>div>p:last-child{font-size:12px;line-height:1.8;margin-top:14px}
 .reel-number{font-size:38px;margin-top:23px}
 .reel-controls>a{margin-left:0;font-size:12px}.reel-disclosure{font-size:8px;margin-top:18px}
}
/* Desktop keyboard/reduced-motion path keeps every image fully visible and unpinned. */
@media(prefers-reduced-motion:reduce){.story-reel{height:auto!important}.reel-stage{position:relative!important;height:auto!important}.reel-track,.reel-photo img{transform:none!important;opacity:1!important}.reel-hint{visibility:hidden!important}}
html[data-motion=off] .reel-track,html[data-motion=off] .reel-photo img{transform:none!important;opacity:1!important}
/* Photo accuracy and details. No animated filters. */
.package-visual{aspect-ratio:1.64}.package-visual img{object-position:center}
.bento-main .photo-frame img{object-position:center}
.bento-detail img{object-position:center 50%}
.booking-portrait img{object-position:center 39%}
.chapter-image img{object-position:center 43%}
.story-dialog-layout{display:block}.story-dialog-copy{max-width:700px}
.imagery-note{color:#bbab98;font-size:9px;margin-top:18px;line-height:1.8}
/* Gentle finishing motion belongs to the photos, not to prices or form controls. */
.package-visual img{transform-origin:center}