/* V13.6 — visual wayfinding, generous type, and stories at the guest's pace. */
body.visual-journey{--vj-accent:#acebd6;--vj-text:#edf5f2;--vj-muted:#bccbc7;--vj-line:#a8dfcd44}
body.visual-journey :is(.flow-section,.sp-section,.trip-calendar,.route-section){scroll-margin-top:155px}
body.visual-journey :is(.flow-section,.social-proof-suite,.trip-calendar,.route-section,.departures,.faq-section) p,
body.visual-journey .flow-section .flow-heading>p:not(.flow-kicker),body.visual-journey .flow-section .method-steps p,
body.visual-journey .cinematic-copy p,body.visual-journey .lite-detail-body p{font-size:1rem!important;line-height:1.85!important}
body.visual-journey :is(.flow-section,.sp-section,.trip-calendar,.route-section) :is(a,button,summary,label),body.visual-journey .faq-list summary{font-size:.9375rem!important}
body.visual-journey :is(.flow-section,.social-proof-suite) :is(.flow-kicker,.sp-kicker),body.visual-journey .section-no{font-size:.8125rem!important;letter-spacing:.1em!important}
body.visual-journey :is(.selection-hint,.journey-note,.stay-caption,.source-detail p,.proof-footnote p,.trust-score p small,.experience-record p small,.review-person small,.highlight-status){font-size:.8125rem!important;line-height:1.8!important;color:var(--vj-muted)}
body.visual-journey .journey-thread{width:2px;background:#a8dfcd35}
body.visual-journey .journey-thread span{background:#a8dfcd}
body.visual-journey .journey-path,body.visual-journey .chapter-nav{background:#10272aee!important;border-block:1px solid #a8dfcd40;backdrop-filter:blur(16px)}
body.visual-journey .journey-path{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:0;padding:0 6%;width:100%;max-width:none;margin:0 auto!important}
body.visual-journey .journey-path a,body.visual-journey .chapter-links a{display:flex;align-items:center;gap:14px;padding:14px 20px;min-height:76px;font-size:1rem;color:#eef7f4;line-height:1.4;text-decoration:none;border-bottom:3px solid transparent}
body.visual-journey .journey-path a+a,body.visual-journey .chapter-links a+a{border-left:1px solid #a8dfcd30}
body.visual-journey .journey-path a>span,body.visual-journey .chapter-links a>b{font-size:.875rem;color:#b8edd9;font-weight:400}
body.visual-journey .journey-path b{font-weight:500}
body.visual-journey .journey-path small,body.visual-journey .chapter-links small{display:block;color:#baccc6;font:400 .875rem/1.6 Prompt,sans-serif;letter-spacing:0;margin-top:3px}
body.visual-journey .journey-path a[data-current],body.visual-journey .chapter-links a[data-current]{border-bottom-color:var(--vj-accent);background:#b0e8d512;color:#fff}
body.visual-journey .chapter-nav .chapter-links{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));width:100%;gap:0}
body.visual-journey .chapter-nav .wrap{width:88%}
/* Route options: one distinct accent, clear selection, and shorter copy. */
body.visual-journey .interest-switch button{border-radius:8px;min-height:54px;color:#e5efeb;background:#14212a;border-color:#597c78}
body.visual-journey .interest-switch button[aria-pressed=true]{color:#0b2527;background:#b5ebd9;border-color:#b5ebd9;font-weight:500;box-shadow:inset 0 -3px 0 #759f92}
body.visual-journey .curated-option{padding:20px!important;background:#112129;border:1px solid #426361;border-top:3px solid #a8dfcd;border-radius:8px;display:flex;flex-direction:column;gap:0}
body.visual-journey .curated-option small{font-size:.75rem;color:#b7c9c4;letter-spacing:.07em}
body.visual-journey .curated-option h3{color:#f6faf7;font-weight:500}
body.visual-journey .curated-option a{margin-top:auto;border-top:1px solid #aacdb638;padding-top:10px}
/* A change of surface marks the move from inspiration to practical care. */
body.visual-journey main>section#how-we-travel,body.visual-journey main>section#included-experiences{background:#102d30!important;border:1px solid #598b81!important;padding:30px!important;border-radius:10px!important;margin-block:12px!important}
body.visual-journey #how-we-travel{gap:28px;grid-template-columns:1.05fr 1fr}
body.visual-journey #how-we-travel .flow-heading{margin:0}
body.visual-journey #how-we-travel h2{font-size:clamp(27px,2.6vw,36px)!important}
body.visual-journey .care-route{list-style:none;margin:20px 0 0;padding:0;display:flex;position:relative;gap:14px}
body.visual-journey .care-route:before{content:'';position:absolute;left:16px;right:16px;top:16px;height:1px;background:#87baa6}
body.visual-journey .care-route li{flex:1;position:relative;display:flex;flex-direction:column;align-items:flex-start;gap:8px;font-size:.875rem;line-height:1.7}
body.visual-journey .care-route b{width:34px;height:34px;background:#b5ebd9;color:#0b2527;border-radius:50%;display:grid;place-items:center;font-size:.8125rem;font-weight:500}
body.visual-journey .lite-details>summary{padding-left:14px;padding-right:38px;background:#a8dfcd0c;min-height:58px}
body.visual-journey .lite-details>summary:after{right:12px}
body.visual-journey .lite-details[open]>.lite-detail-body{padding:16px 14px 20px}
body.visual-journey .programme-facts{grid-template-columns:1fr;gap:20px}
body.visual-journey .programme-facts :is(li,p){font-size:1rem;line-height:1.85}
body.visual-journey .included-label,body.visual-journey .optional-label{display:inline-block;font-size:.8125rem;padding:5px 10px;border-radius:4px;background:#b5ebd9;color:#123033}
body.visual-journey .optional-label{background:#d4e2f4;color:#203148}
body.visual-journey #stays{border-bottom:1px solid var(--vj-line)}
body.visual-journey .stay-visual{position:relative}
body.visual-journey .stay-caption{color:#c4d6cd;background:#112427;padding:12px;display:block}
/* Image and copy share the same chapter; the factual record stays below it. */
body.visual-journey .method-scene{position:relative;isolation:isolate;overflow:hidden;min-height:240px;padding:28px 32px;display:flex;align-items:center;border-radius:8px}
body.visual-journey .method-scene>img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:center 35%;z-index:-2}
body.visual-journey .method-scene:after{content:'';position:absolute;inset:0;background:linear-gradient(90deg,#07191ded,#07191d70 65%,#07191d20);z-index:-1}
body.visual-journey .method-scene .flow-heading{margin:0;max-width:75%}
body.visual-journey .method-scene h2{margin:0;color:white}
body.visual-journey .method-steps{position:relative;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:24px;border-top:1px solid #6eac9a;margin:24px 0 14px}
body.visual-journey .method-steps li{position:relative;padding-top:22px;border:0}
body.visual-journey .method-steps li:before{content:'';position:absolute;top:-5px;left:0;width:9px;height:9px;background:#b5ebd9;border-radius:50%}
body.visual-journey .method-steps li>span{font-size:.8125rem;letter-spacing:.03em;color:#b5ebd9}
body.visual-journey .experience-record{padding:18px 20px;border-radius:8px;background:#14262c;border:0}
body.visual-journey .flow-section .experience-record p{font-size:.9375rem!important}
body.visual-journey .trust-strip{border-top:3px solid #9de9d0!important}
body.visual-journey .trust-score p{font-size:1rem!important}
/* Light review messages and dark photographic Highlights are intentionally distinct. */
body.visual-journey .social-proof-suite .review-message{background:#f2f6f4;color:#122c2c;border:0;border-radius:10px;padding:24px}
body.visual-journey .social-proof-suite .review-message blockquote{color:#183333;font-size:1.0625rem;line-height:1.85;font-weight:400}
body.visual-journey .social-proof-suite .review-message h3{color:#46615c;font-size:.875rem;font-weight:500}
body.visual-journey .social-proof-suite .review-platform{color:#205e5d}
body.visual-journey .social-proof-suite .review-platform span{font-size:.75rem}
body.visual-journey .social-proof-suite .review-person p{color:#183333;font-size:.875rem!important}
body.visual-journey .social-proof-suite .review-person small{color:#506962}
body.visual-journey .social-proof-suite .review-initial{background:#deebe5;border:0;color:#235448}
body.visual-journey .social-proof-suite .review-message>a{font-size:.875rem;color:#146050;font-weight:500}
body.visual-journey .social-proof-suite .review-platform{display:flex;align-items:center;gap:9px}
body.visual-journey .social-proof-suite .review-platform .fb-mark{flex:0 0 auto;width:18px;height:18px;border-radius:50%;fill:#0866ff}
body.visual-journey .social-proof-suite .review-platform>span:first-of-type{flex:1;min-width:0}
body.visual-journey .rail-controls button{background:#d4eee3;color:#173834;border:0;width:48px;height:48px}
body.visual-journey .rail-status{font-size:.875rem;color:#d2e3db}
body.visual-journey .rail-controls button:disabled{opacity:.45}
body.visual-journey .social-proof-suite #travel-highlights{border-block:1px solid #69867d;padding:30px 0!important;margin-top:12px!important}
body.visual-journey .social-proof-suite .rail-heading p:not(.sp-kicker){font-size:1rem!important}
body.visual-journey .album-cover{border-radius:10px;background:#152729}
body.visual-journey .album-caption>span{min-height:48px;font-size:.9375rem;align-items:center;border:1px solid #f5fff7aa;border-radius:6px;padding:8px 12px;background:#071b1baa}
body.visual-journey .album-top,body.visual-journey .album-top b,body.visual-journey .album-caption small{font-size:.75rem}
body.visual-journey .album-caption strong{font-size:1.375rem}
body.visual-journey .highlight-links{font-size:.9375rem}
body.visual-journey .highlight-links>span{font-size:.8125rem}
body.visual-journey :is(#calendar,#departures){border-top:3px solid #9de9d0}
body.visual-journey .timeline-card,body.visual-journey .departure{background:#13282c!important;border:1px solid #577971!important;border-radius:8px!important;padding:22px!important}
body.visual-journey .timeline-card :is(p,a,span,time),body.visual-journey .departure :is(p,a,time){font-size:.9375rem!important}
body.visual-journey .timeline-card a,body.visual-journey .departure-link{border-top:1px solid #648e7e;padding-top:12px}
body.visual-journey .flow-faq details,body.visual-journey .faq-list details{border-bottom:1px solid #638c80}
body.visual-journey .flow-faq details>summary,body.visual-journey .faq-list summary{font-size:1rem!important;line-height:1.8}
body.visual-journey #contact,body.visual-journey #enquire{border-top:1px solid #638c80}
body.visual-journey :is(button,a,summary,select,input):focus-visible{outline:3px solid #b4f0da;outline-offset:4px}
/* One full-frame player. Autoplay begins only after the guest opens a Highlight. */
body .story-dialog[open]{display:grid;grid-template-columns:minmax(0,1fr);grid-template-rows:auto 44px minmax(120px,1fr) auto auto auto;width:min(510px,calc(100vw - 16px));max-width:calc(100vw - 16px);height:min(920px,calc(100dvh - 16px));max-height:calc(100dvh - 16px);border:1px solid #55766d;border-radius:14px;overflow:auto;background:#0c1b20}
body .story-dialog .story-toolbar{background:#0c1b20;min-height:56px}
body .story-dialog .story-toolbar p{font-size:1rem!important;font-weight:500}
body .story-dialog button{font-size:.9375rem!important;border-radius:6px;min-height:48px}
body .story-dialog .story-progress{height:44px;align-items:center;gap:8px}
body .story-dialog .story-progress button{flex:1;min-height:44px;height:44px;padding:20px 0!important;border-radius:0}
body .story-dialog .story-progress button:before{height:4px;border-radius:4px;background:#b9d6ca36}
body .story-dialog .story-progress button:after{content:'';position:absolute;left:0;right:0;top:20px;height:4px;background:#b7efd8;transform:scaleX(var(--moment-progress,0));transform-origin:left;border-radius:4px}
body .story-dialog .story-progress button[aria-current=true]:before{background:#b9d6ca36}
body .story-dialog .story-stage{height:100%;min-height:120px;max-height:none;background:#050d11}
body .story-dialog .story-stage>img,body .story-dialog .story-stage>video{object-fit:contain}
body .story-dialog .story-playback{padding:6px 16px;gap:8px;justify-content:flex-start;flex-wrap:wrap;min-height:60px;border-bottom:1px solid #55766d55}
body .story-dialog .story-playback button{border:1px solid #6c9785;padding-inline:15px!important}
body .story-dialog .story-playback [data-story-play]{background:#b5ebd9;color:#112f2f;font-weight:500}
body .story-dialog .story-playback [data-story-source]{margin-left:auto;font-size:.8125rem}
body .story-dialog .story-copy{padding:12px 20px 8px;max-height:168px;min-height:0;overflow:auto;overscroll-behavior:contain}
body .story-dialog .story-copy h3{font-size:1.125rem;margin-bottom:6px;line-height:1.6}
body .story-dialog .story-copy p{font-size:1rem!important;line-height:1.75!important;color:#d0ddd7}
body .story-dialog .story-footer{background:#0c1b20!important;gap:12px!important;padding:10px 16px!important;border-top:1px solid #55766d55!important}
body .story-dialog .story-footer button{border:1px solid #769b8e;min-width:92px;padding:10px!important}
body .story-dialog .story-footer [data-story-next]{background:#d7ede4;color:#153530}
body .story-dialog .story-count{font-size:.75rem!important;letter-spacing:0;white-space:normal;text-align:center}
@media(min-width:900px){
 body .story-dialog[open]{width:min(900px,calc(100vw - 48px));height:min(760px,calc(100dvh - 40px));grid-template-columns:1.2fr 1fr;grid-template-rows:auto 44px 1fr auto auto}
 body .story-dialog .story-toolbar{grid-column:1/-1}
 body .story-dialog .story-progress{grid-column:1/-1}
 body .story-dialog .story-stage{grid-column:1;grid-row:3/5}
 body .story-dialog .story-copy{grid-column:2;grid-row:3;align-self:center;max-height:100%;padding:24px}
 body .story-dialog .story-copy h3{font-size:1.5rem}
 body .story-dialog .story-playback{grid-column:2;grid-row:4;padding:16px 24px;border:0}
 body .story-dialog .story-footer{grid-column:1/-1}
}
@media(max-width:680px){
 body.visual-journey :is(.flow-section,.sp-section,.trip-calendar,.route-section){scroll-margin-top:142px}
 body.visual-journey .journey-path{padding:0 3%}
 body.visual-journey .journey-path a,body.visual-journey .chapter-links a{padding:10px 7px;gap:6px;font-size:.875rem;min-height:80px;align-items:flex-start}
 body.visual-journey .journey-path a>span,body.visual-journey .chapter-links a>b{font-size:.75rem;line-height:1.9}
 body.visual-journey .journey-path small,body.visual-journey .chapter-links small{font-size:.8125rem;line-height:1.6}
 body.visual-journey .chapter-nav .wrap{width:94%}
 body.visual-journey .interest-switch{display:grid;grid-template-columns:1fr;gap:8px}
 body.visual-journey .interest-switch button{width:100%;padding:12px 18px;text-align:left;display:flex;align-items:center;justify-content:space-between;white-space:normal}
 body.visual-journey .interest-switch button:after{content:'→';font-size:20px}
 body.visual-journey .interest-switch button[aria-pressed=true]:after{content:'✓'}
 body.visual-journey .curated-options{display:grid;grid-auto-flow:column;grid-template-columns:none;grid-auto-columns:92%;gap:12px}
 body.visual-journey .curated-option{display:grid;grid-template-columns:1fr auto;column-gap:12px;padding:16px!important}
 body.visual-journey .curated-option small{grid-column:1/-1}
 body.visual-journey .curated-option h3{font-size:1.25rem;margin:6px 0;grid-column:1/-1}
 body.visual-journey .curated-option>p:not(.journey-note){grid-column:1/-1;font-size:.9375rem!important;margin:0 0 10px}
 body.visual-journey .curated-option .journey-note{grid-column:1/-1;margin:0 0 6px;color:#c8ddd3}
 body.visual-journey .curated-option a{grid-column:1/-1;width:100%;min-height:48px}
 body.visual-journey main>section#how-we-travel,body.visual-journey main>section#included-experiences{padding:22px!important}
 body.visual-journey #how-we-travel{grid-template-columns:1fr;gap:14px}
 body.visual-journey #how-we-travel h2{font-size:1.625rem!important}
 body.visual-journey .care-route{gap:10px}
 body.visual-journey .care-route li{font-size:.875rem}
 body.visual-journey .method-scene{min-height:210px;padding:22px}
 body.visual-journey .method-scene .flow-heading{max-width:100%}
 body.visual-journey .method-scene h2{font-size:1.625rem!important}
 body.visual-journey .method-steps{grid-template-columns:1fr;gap:14px;border:0;margin:22px 0;padding-left:20px;border-left:1px solid #6eac9a}
 body.visual-journey .method-steps li{padding:0}
 body.visual-journey .method-steps li:before{left:-25px;top:6px}
 body.visual-journey .flow-section .method-steps p{margin:4px 0;font-size:1rem!important}
 body.visual-journey .method-steps p br{display:none}
 body.visual-journey .experience-record{padding:18px;gap:16px}
 body.visual-journey .social-proof-suite .review-message{padding:20px}
 body.visual-journey .rail-controls{max-width:none;flex-wrap:nowrap;gap:8px}
 body.visual-journey .rail-controls button{width:48px;height:48px}
 body.visual-journey .rail-status{width:auto;min-width:38px;font-size:.8125rem}
 body.visual-journey .rail-heading{display:block;position:relative}
 body.visual-journey .rail-controls{justify-content:flex-start;margin-top:14px}
 body.visual-journey .album-rail.single-highlight{grid-auto-columns:100%;max-width:340px}
 body.visual-journey .album-cover{aspect-ratio:1.1}
 body.visual-journey .album-cover img{object-position:center 35%}
 body.visual-journey .album-top{display:flex;inset:18px}
 body.visual-journey .album-top b{margin:0}
 body.visual-journey .story-albums:has(.single-highlight) .rail-controls{display:none}
 body.visual-journey .album-caption strong{font-size:1.25rem;margin-block:8px 12px}
 body.visual-journey .highlight-links{gap:16px;flex-wrap:wrap}
 body.visual-journey .highlight-links a{margin-top:0}
 body.visual-journey .cinematic-copy h2{font-size:1.625rem!important}
 body.visual-journey .cinematic-copy p{font-size:1rem!important}
 body .story-dialog .story-playback{padding:4px 12px;min-height:56px}
 body .story-dialog .story-footer{gap:8px!important;padding:8px 12px!important}
}
@media(prefers-reduced-motion:reduce){body.visual-journey *{scroll-behavior:auto!important}body.visual-journey .flow-kicker:before{transition:none!important}}

body.visual-journey .choice-controls{display:none}
@media(max-width:680px){body.visual-journey .choice-controls{display:flex;justify-content:flex-end;margin:10px 0 0}body.visual-journey .journey-path a>span{margin-right:0}body.visual-journey .journey-path a{gap:5px}}
/* Keep legacy global paragraph colours from washing out the light review surface. */
body.visual-journey .social-proof-suite .review-message :is(h3,.review-person p){color:#294c43!important}
body.visual-journey .social-proof-suite .review-message .review-platform{color:#225c4e!important}
body.visual-journey .social-proof-suite .review-message .review-platform span{color:#476b61!important}
body.visual-journey .trust-strip h2{max-width:none!important}
@media(min-width:681px){body.visual-journey .trust-strip{display:grid;grid-template-columns:1fr 1.4fr}body.visual-journey .trust-strip>div{width:auto;min-width:0}body.visual-journey .trust-score{justify-content:flex-end}body.visual-journey .trust-score p{max-width:420px!important}}
body.visual-journey .review-message:focus-within{outline:3px solid #9fe0c8;outline-offset:-3px}
body.visual-journey .curated-option.is-muted{opacity:.72}
body.visual-journey .curated-option.is-muted h3{color:#d6e5df}

body.visual-journey #travel-highlights .rail-heading h2{font-size:clamp(1.75rem,3.4vw,2.6rem)!important;font-weight:600;letter-spacing:0;line-height:1.35}
body.visual-journey #travel-highlights .album-rail,body.visual-journey #travel-highlights .album-rail.single-highlight{display:grid!important;grid-auto-flow:column;grid-auto-columns:clamp(158px,19vw,226px)!important;grid-template-columns:none!important;gap:clamp(14px,1.8vw,26px);max-width:none!important;overflow-x:auto;scroll-snap-type:x mandatory;padding-bottom:6px;scrollbar-width:none}
body.visual-journey #travel-highlights .album-rail::-webkit-scrollbar{display:none}
body.visual-journey #travel-highlights .album-cover{display:flex!important;flex-direction:column;gap:12px;aspect-ratio:auto!important;overflow:visible!important;border-radius:0!important;background:none!important;scroll-snap-align:start;min-width:0}
body.visual-journey #travel-highlights .album-cover:after{content:none!important}
body.visual-journey #travel-highlights .album-frame{position:relative;display:block;width:100%;aspect-ratio:9/16;overflow:hidden;border-radius:clamp(18px,2vw,28px);background:#152729;isolation:isolate}
body.visual-journey #travel-highlights .album-frame>img{position:absolute!important;inset:0;width:100%!important;height:100%!important;object-fit:cover!important;object-position:center;mask-image:none!important;-webkit-mask-image:none!important;transition:transform .7s ease}
body.visual-journey #travel-highlights .album-cover:hover .album-frame>img{transform:scale(1.04)}
body.visual-journey #travel-highlights .album-cover:focus-visible .album-frame{outline:2px solid #7bead3;outline-offset:4px}
/* A story name takes up to two lines under its cover (one cut place names short), longer is clipped with "…". */
body.visual-journey #travel-highlights .album-label{display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:2;line-clamp:2;max-width:100%;overflow:hidden;overflow-wrap:anywhere;color:#fff;font-size:clamp(1rem,1.5vw,1.25rem);font-weight:600;letter-spacing:0;line-height:1.4}
body.visual-journey #travel-highlights .album-top{display:none!important}
body.visual-journey #travel-highlights .album-caption{position:absolute!important;width:1px!important;height:1px!important;padding:0!important;margin:-1px!important;overflow:hidden!important;clip:rect(0,0,0,0)!important;white-space:nowrap!important;border:0!important}

/* Months stack at every width: on a phone lite-journey.css makes the home's .timeline-grid a sideways rail (grid-auto-flow:column), which squeezed the first month into 40px. */
body.visual-journey .monthly-travel-board{display:grid!important;grid-template-columns:1fr!important;grid-auto-flow:row!important;grid-auto-columns:auto!important;overflow:visible!important;scroll-snap-type:none!important;gap:22px!important;margin-top:22px!important}
body.visual-journey .monthly-group{border-top:1px solid #6e9d90;padding-top:18px}
body.visual-journey .monthly-heading{display:flex;justify-content:space-between;gap:20px;align-items:baseline;margin-bottom:12px}
body.visual-journey .monthly-heading h3{margin:0;color:#f6fffb;font-size:clamp(1.35rem,2.4vw,2rem);font-weight:500;letter-spacing:0;line-height:1.4}
body.visual-journey .monthly-heading span{flex:0 0 auto;color:#aee8d6;font-size:.875rem;line-height:1.7}
body.visual-journey .monthly-scroll{overflow-x:auto}
body.visual-journey .monthly-table{width:100%;min-width:0;border-collapse:collapse;color:#e9f6f1}
body.visual-journey .monthly-table th{padding:11px 12px;border-bottom:1px solid #6e9d9077;color:#aee8d6;text-align:left;font-size:.75rem;font-weight:500;letter-spacing:.08em;text-transform:uppercase;line-height:1.6}
body.visual-journey .monthly-table td{padding:15px 12px;border-bottom:1px solid #395c57;vertical-align:top;font-size:.9375rem;line-height:1.75}
body.visual-journey .monthly-table strong{display:block;color:#fff;font-size:1rem;font-weight:500;line-height:1.6}
body.visual-journey .monthly-table small{display:block;margin-top:2px;color:#b9cbc6;font-size:.8125rem;line-height:1.7}
body.visual-journey .monthly-table td[data-label=Status] span{display:inline-flex;border:1px solid #6f9d90;border-radius:999px;padding:5px 10px;color:#d9f5ec;font-size:.8125rem;line-height:1.5}
body.visual-journey .monthly-table .flow-link{display:inline-flex;min-height:42px;align-items:center;border-top:0;padding-top:0;color:#b5ebd9}
/* STATUS and ACTION on one line (the owner: "status กับ action ตกบรรทัด"): the dates, journey and moment take the width instead,
   and the table fits its box rather than scrolling sideways (it had min-width:860px). The phone layout below is left as it was. */
@media(min-width:781px){body.visual-journey .monthly-table td[data-label=Status] span,body.visual-journey .monthly-table td[data-label=Action] a{white-space:nowrap}}
@media(min-width:781px) and (max-width:900px){body.visual-journey .monthly-table th,body.visual-journey .monthly-table td{padding-left:8px;padding-right:8px}}

@media(max-width:780px){
 body.visual-journey .monthly-scroll{overflow:visible}
 body.visual-journey .monthly-table{min-width:0}
 body.visual-journey .monthly-table thead{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0,0,0,0)}
 body.visual-journey .monthly-table,body.visual-journey .monthly-table tbody,body.visual-journey .monthly-table tr,body.visual-journey .monthly-table td{display:block;width:100%}
 body.visual-journey .monthly-table tr{border:1px solid #557971;border-radius:8px;background:#13282c;margin-bottom:10px;padding:12px}
 body.visual-journey .monthly-table td{display:grid;grid-template-columns:94px minmax(0,1fr);gap:12px;border-bottom:1px solid #345550;padding:10px 0;font-size:.9375rem!important}
 body.visual-journey .monthly-table td:last-child{border-bottom:0}
 body.visual-journey .monthly-table td:before{content:attr(data-label);color:#aee8d6;font-size:.75rem;letter-spacing:.06em;text-transform:uppercase;line-height:1.8}
 body.visual-journey .monthly-table .flow-link{justify-content:flex-start;min-height:44px}
}

/* Globe pins on a phone: refinement.css drew a 48px ring with a dark fill round every pin, and the rings piled up where
   countries sit close (Europe). The dot, its colour and its pulse stay, as on a wide screen, and so does the 48px tap area. */
@media(max-width:780px){
 body.visual-journey .pin{border:0!important;background:none!important}
}

/* Continents filter the season chooser's country buttons (season-explorer.js): squarer, and filled when chosen, so they
   read as a filter over the round country pills below rather than as more countries. Country mode only. */
body.visual-journey .continent-options{display:flex;flex-wrap:wrap;gap:8px;margin-bottom:14px}
body.visual-journey .continent-options[hidden],body.visual-journey .season-explorer[data-mode="month"] .continent-options,body.visual-journey .country-options button[hidden]{display:none}
body.visual-journey .continent-options button{font:400 .9375rem/1.4 Prompt,sans-serif;min-height:44px;padding:8px 14px;border:1px solid #597c78;border-radius:8px;background:#14212a;color:#e5efeb;cursor:pointer}
body.visual-journey .continent-options button[aria-pressed=true]{background:#b5ebd9;border-color:#b5ebd9;color:#0b2527;font-weight:500}
body.visual-journey .continent-options button:focus-visible{outline:2px solid #d3ffe8;outline-offset:3px}

/* On a phone the continent and country buttons are one row each that swipes sideways (the owner's choice, 14 Sep): the
   countries wrapped into some thirteen rows. The button cut off at the edge says there is more; snapping stops 48px in, as
   season-explorer.js does, so part of the button before shows too. */
@media(max-width:780px){
 body.visual-journey .season-explorer :is(.continent-options,.country-options){flex-wrap:nowrap;overflow-x:auto;overflow-y:hidden;overscroll-behavior-x:contain;scroll-snap-type:x proximity;scroll-padding-inline-start:48px;scrollbar-width:none;padding-bottom:2px}
 body.visual-journey .season-explorer :is(.continent-options,.country-options)::-webkit-scrollbar{display:none}
 body.visual-journey .season-explorer :is(.continent-options,.country-options) button{flex:0 0 auto;white-space:nowrap;scroll-snap-align:start}
 /* Countries take two lines that swipe together (the owner asked for one more line). Each line runs on like text: a
    grid of columns left gaps under short names ("มีช่องว่าง ไม่สวย"). season-explorer.js sets the track just wide enough
    for its buttons to wrap into two. */
 body.visual-journey .season-explorer .country-options{display:block}
 body.visual-journey .season-explorer .country-track{display:flex;flex-wrap:wrap;gap:8px;width:max-content}
}
/* A wide screen wraps the countries in the country box itself, as it always has. */
@media(min-width:781px){body.visual-journey .country-track{display:contents}}

/* Open now — the switch at the head of the country row (PLAN §23). Every other button in that row is a place, and the
   chosen one wears a mint keyline, so a mint keyline here would read as "the country you picked". Three things keep
   them apart instead: a hollow mark that fills when it is on (a switch, not a destination), sentence case against the
   countries' capitals, and the mint fill when on — an idiom the continent chips above already use for "this filter is
   doing something". It takes NO extra margin to set itself off: the row's gap is held to 6–12px by checkGlobe…
   checkSeasonContinents' gaps() after the owner's "มีช่องว่าง ไม่สวย", and a separator here reads as one of those holes. */
body.visual-journey .season-explorer .country-bookable{
  display:inline-flex!important;align-items:center;gap:7px;text-transform:none!important;letter-spacing:.02em!important;
  color:var(--aqua)!important}
body.visual-journey .season-explorer .country-bookable::before{
  content:"";width:12px;height:12px;border-radius:50%;border:1px solid currentColor;flex:none}
body.visual-journey .season-explorer .country-bookable[aria-pressed="true"]{
  background:var(--aqua)!important;color:#081520!important;border-color:var(--aqua)!important}
body.visual-journey .season-explorer .country-bookable[aria-pressed="true"]::before{background:currentColor}
/* Not offered means not drawn: the display above is !important, so it beat [hidden] and the switch stood on continents
   with nothing open to book — a button that did nothing, and a third line of countries on a phone (19 Sep). */
body.visual-journey .season-explorer .country-bookable[hidden]{display:none!important}

/* Globe dots carry no ring at any width (the owner, 14 Sep: "ทำไมจุดโลกบางอันยังมีวงแหวนอยู่"): the faint 5px halo of the
   planned dots, the 4px one of coming-soon, the 5px of confirmed and the chosen dot's 7px halo and white outline all go.
   Glows stay, and so do the pulses of open rounds; the chosen dot is larger and brighter instead of ringed. The dot's own
   white edge goes too: on a faded dot (a round under way, Madagascar in September) it read as a ring round a pale disc. */
body.visual-journey .pin span{outline:0!important;border:0!important}
body.visual-journey .pin:is(.status-planned,.status-coming-soon) span{box-shadow:none!important}
/* The blink of open rounds, at the dot's own size (the owner, 14 Sep: "เวลากระพริบใหญ่แปลกๆ"): a 25px gold glow brightening
   every second read as the dot swelling. The dot now fades in and out with a glow a few px wide; the chosen one is a
   little larger, not a lot. */
@keyframes pinBlink{50%{opacity:.35}}
body.visual-journey .pin.status-final-call span{box-shadow:0 0 6px var(--gold)!important;filter:none!important;animation:pinBlink 1.2s ease-in-out infinite!important}
body.visual-journey .pin.status-available span{box-shadow:0 0 6px var(--aqua)!important;animation:pinBlink 2.4s ease-in-out infinite!important}
/* Those two are the only !important animations in the site's sheets that load after refinement.css, so they are the only
   ones that beat its `*{animation:none!important}` guard: a visitor who has asked their device for less motion still had
   blinking dots. The dots keep their colour, their size and their meaning; they just hold still for that visitor. */
@media(prefers-reduced-motion:reduce){body.visual-journey .pin:is(.status-final-call,.status-available) span{animation:none!important}}
body.visual-journey .pin.status-confirmed span{box-shadow:0 0 6px var(--green)!important}
body.visual-journey .pin.status-full span{box-shadow:0 0 6px var(--violet)!important}
body.visual-journey .pin.active span{width:14px!important;height:14px!important;box-shadow:0 0 8px var(--aqua)!important}
/* DISCOVER · DREAM · EXPERIENCE under the home FAQ (the team's slides, 15 Sep: "เอา Discovery Line ไว้ใต้ FAQ"). premium.css
   draws the mint ribbon and premium.js runs it only while it is on screen, pausing for reduced motion or the visitor's button.
   journey-flow.css gave it a 95 px band with 60 px words, for a ribbon the home page never had; at the size the reference
   site uses, that clipped the words. The words are spans, not paragraphs: a site-wide p rule sets 18 px and a muted colour !important. */
body.visual-journey .journey-marquee{height:auto;margin:0}
body.visual-journey .journey-marquee .journey-marquee-group{font-size:clamp(60px,9vw,164px)}
body.visual-journey .journey-marquee .marquee-dot{font-size:inherit}
@media(max-width:780px){body.visual-journey .journey-marquee .journey-marquee-group{font-size:clamp(56px,12vw,90px)}}
@media(prefers-reduced-motion:reduce){body.visual-journey .journey-marquee .journey-marquee-group{font-size:clamp(24px,4.8vw,80px)}}
/* TAILOR MADE on the season card (the team's slides, item 10 — POC, 16 Sep): no group round to join in this window, so a
   text link to the official LINE sits on its own line under the status. refinement.css makes every link in .season-detail a
   full-width aqua button; this one stays a line of text so the status row still reads as a row. */
body.visual-journey .season-detail dl>div:has(.season-tailor:not([hidden])){flex-wrap:wrap;row-gap:0}
body.visual-journey .season-detail .season-tailor{flex-basis:100%;margin:0;text-align:right}
body.visual-journey .season-detail .season-tailor a{display:inline-flex;align-items:center;min-height:44px;margin:0;padding:0;background:none;color:var(--aqua);font-weight:500;text-decoration:underline;text-underline-offset:4px}
/* ── The globe: its rim, orbits, starfield and glow (the team's slides, item 8 — a POC, 17 Sep) ─────────────────
   The site the owner pointed at is this same code with `refinement.css` and the eleven sheets after it missing, which
   is the whole difference: refinement.css (inherited with the baseline export 6533314) hides .orbit and both .globe
   pseudo-elements, dims .world-stars to .18 over final-theme's 1, and replaces final-theme's twin glows with a single
   grey drop-shadow. Dropping that file is not on — it also carries the sticky nav, the hero grid, pin sizing, section
   padding and the reduced-motion guard — so the look goes back on here, in the sheet that loads after it and is already
   where the home page's look is refined. Nothing below animates: the guard in refinement.css stays untouched. */
body.visual-journey .world-stars{opacity:1!important}
/* The rim and the glow final-theme wrote, over refinement's grey one. The sphere itself is the canvas (globe3d.js): the
   border draws the lit edge around it, and the two drop-shadows the aqua and violet light it sits in. */
body.visual-journey .globe{border:1px solid rgba(122,244,230,.35)!important;filter:drop-shadow(0 0 55px rgba(0,255,230,.16)) drop-shadow(0 0 90px rgba(155,140,255,.14))!important}
/* .globe:before is the sphere's shading — a highlight at the upper left fading to a dark navy edge (globe-interaction.css),
   z-index 2, so it lies over the canvas and under the pins (z-index 5). .globe:after stays off: it is a square gradient
   from the days when .globe clipped its children (world.css `overflow:hidden`), and refinement.css sets overflow:visible,
   so switching it on paints a dark band across the hero instead of shading the ball. */
body.visual-journey .globe:before{display:block!important}
/* The two orbits, sized as they were before refinement.css made .globe fill its box: the sphere is about 84% of the orbit,
   so they sweep around it instead of tracing its edge. They sit inside .globe-wrap and change no layout.
   Each fades out along its own long axis before its ends reach anything: the card beside the globe from 1366 px (item 12;
   its panel is transparent, so an unfaded orbit would draw lines through the round name), the copy on the left, and the
   screen edges on a phone. The reference site fades them into the dark too — there the card is opaque, so it can. */
body.visual-journey .orbit{display:block!important;inset:-9%!important;
  -webkit-mask-image:linear-gradient(90deg,transparent 12%,#000 26%,#000 74%,transparent 88%);
  mask-image:linear-gradient(90deg,transparent 12%,#000 26%,#000 74%,transparent 88%)}
/* The season card's ดูรอบเดินทาง → is a link to the country's own page now (season-explorer.js · the owner, 19 Sep), drawn
   as the outlined button it was (final-theme.css .season-detail>button) rather than refinement.css's filled link. */
body.visual-journey .season-detail>a#nextSeason{display:flex;align-items:center;justify-content:center;min-height:48px;margin-top:0;padding:0 16px;border:1px solid var(--aqua);background:transparent;color:var(--aqua);font-size:16px;font-weight:400;text-decoration:none}
body.visual-journey .season-detail>a#nextSeason[hidden]{display:none}
/* UX plan 3.1 (handoff/UX-JOURNEY-PLAN.md §5). The owner's switch pageNav (home-hidden.js) hides the 01 / 02 / 03 strip,
   which only repeats the header's links; the markup stays, and false brings it back as it was. */
html[data-hide-page-nav] body.visual-journey nav.journey-path{display:none}
/* programmePdf (home-hidden.js): the programme PDF / Drive links hidden, the trip page is the way on; the terms text stays. */
html[data-hide-programme-pdf] body.visual-journey :is(#how-we-travel,#stays) a:is([href*=".pdf"],[href*="drive.google.com"]),html[data-hide-programme-pdf] body.visual-journey #stays .journey-note:has(>a:is([href*=".pdf"],[href*="drive.google.com"])){display:none}
/* At 780 px and under, where both lists used to stack (3 × 94 px of seasons, 5 × 56 px of feelings), each is one row
   the finger scrolls sideways. The next button shows in part, so the row reads as more to come. There is no touch-action
   here: an up-or-down swipe still scrolls the page. A focused button is brought into view by the browser, the outline is
   drawn inside the button so the row does not clip it, and the chosen one keeps its fill. No scroll-snap: it pulled a
   focused button back out of view (the row snapped to the nearest button start after the browser scrolled to it).
   scroll-padding: on Tab (or focus()) Chrome moves a row only to a button that shows nowhere in it; one already showing
   in part stays cut off. The row's last quarter is taken out of that "view", so the half-shown next button counts as
   not shown and is brought fully in. A season button is 74% of the row (no px cap: with one, the next button showed
   more than that quarter from about 410 px up and stayed cut off), so its peek, 26% less the gap, is inside the quarter
   and the button fits the three quarters it is centred in. */
@media(max-width:780px){
 body.visual-journey :is(#seasonStrip,.interest-switch):not([hidden]){display:flex;flex-flow:row nowrap;gap:8px;overflow-x:auto;overscroll-behavior-x:contain;scroll-padding-inline:0 25%;scrollbar-width:thin;border:0;margin-inline:0}
 body.visual-journey #seasonStrip:not([hidden]){margin-top:16px}
 body.visual-journey :is(#seasonStrip,.interest-switch) button:focus-visible{outline:2px solid var(--vj-accent);outline-offset:-4px}
 body.visual-journey #seasonStrip button{flex:0 0 74%;min-height:76px;padding:14px 16px;border:1px solid var(--line);border-radius:8px}
 body.visual-journey #seasonStrip button.active{border-color:var(--aqua)}
 body.visual-journey .interest-switch button{flex:0 0 auto;width:auto;white-space:nowrap;min-height:48px;padding:10px 16px}
 body.visual-journey .interest-switch button:after{content:none}
 body.visual-journey .interest-switch button[aria-pressed=true]:after{content:'✓';margin-left:10px;font-size:16px}
}