/* A normal-flow composition. Scrolling changes the arrangement without trapping the page. */
.journey{background:var(--travel-panel);overflow:hidden;border-block:1px solid var(--travel-line)}
.journey-inner{display:grid;grid-template-columns:1fr 1.15fr;gap:65px;align-items:center;padding-block:100px}
.journey-copy>p:not(.chapter){font-size:14px;line-height:1.85;max-width:380px;margin-top:25px}
.journey-steps{list-style:none;padding:0;margin-top:35px;display:grid;gap:22px}.journey-steps>li{display:flex;gap:15px}.journey-steps>li>span{color:var(--travel-accent);font:10px ui-monospace,monospace;padding-top:4px}.journey-steps strong{font-weight:550;font-size:13px}.journey-steps p{font-size:11px;margin-top:4px;line-height:1.6}
.motion-toggle{padding:9px 0;min-height:44px;font-size:10px;color:var(--travel-muted);border:0;border-bottom:1px solid var(--travel-line);background:transparent;margin-top:22px}
.journey-composition{position:relative;height:650px;isolation:isolate;--gather:1}
.journey-composition::before{content:'';position:absolute;inset:50px -20px 0;background:radial-gradient(ellipse at center,#9baf991f,transparent 65%);z-index:-1}
.composition-coordinate{display:block;font:9px ui-monospace,monospace;letter-spacing:.1em;color:var(--travel-muted);position:absolute;top:0;right:0}
.paper-ticket{position:absolute;top:44px;width:235px;min-height:212px;background:var(--travel-white);padding:22px;border:1px solid var(--travel-line);box-shadow:0 12px 24px #143d3812;z-index:2}
.paper-ticket>.micro{display:flex;align-items:center;justify-content:space-between;font-size:8px;color:var(--travel-muted)}.paper-ticket>.micro>.icon{width:17px;height:17px;color:var(--travel-accent)}
.ticket-flight{left:0;transform:translate(calc(var(--gather) * 22px),calc(var(--gather) * 28px)) rotate(calc(-13deg + var(--gather) * 6deg))}.ticket-hotel{right:0;transform:translate(calc(var(--gather) * -22px),calc(var(--gather) * 24px)) rotate(calc(12deg - var(--gather) * 5deg))}
.ticket-flight>div{display:flex;align-items:center;justify-content:space-between;margin-block:22px 16px;font:32px var(--serif)}.ticket-flight>div>strong{font-weight:400}.ticket-flight>div>span{font:22px var(--sans);color:var(--travel-accent)}.paper-ticket>p{font:9px ui-monospace,monospace;letter-spacing:.06em;border-top:1px dashed var(--travel-line);padding-top:13px}.ticket-flight>p>span{float:right}.ticket-barcode{display:block;height:24px;width:115px;margin-top:18px;background:repeating-linear-gradient(90deg,var(--travel-ink) 0 1px,transparent 1px 3px,var(--travel-ink) 3px 5px,transparent 5px 7px);opacity:.45}
.ticket-hotel>strong{display:block;font:31px/1.1 var(--serif);margin-block:18px}.ticket-hotel-stars{display:block;font-size:15px;letter-spacing:7px;margin-top:13px;color:var(--travel-accent)}
.journey-connector{position:absolute;top:228px;left:49%;height:96px;border-left:1px dashed var(--travel-accent);z-index:1}.journey-connector>.swallow{position:absolute;left:-23px;top:20px;width:48px;height:48px;color:var(--travel-accent);transform:rotate(65deg)}
.trip-folio{position:absolute;top:300px;left:7%;right:7%;background:var(--travel-white);padding:27px 27px 22px;border:1px solid var(--travel-line);box-shadow:8px 14px 0 -7px var(--travel-paper),8px 14px 0 -6px var(--travel-line),0 15px 35px #173f4310;transform:translateY(calc((1 - var(--gather)) * 22px)) rotate(calc(2deg - var(--gather) * 2deg));z-index:3}
.folio-top{display:flex;justify-content:space-between;align-items:center;gap:10px;font-size:8px;letter-spacing:.12em;color:var(--travel-muted)}.folio-top .micro{font-size:8px}.trip-folio h3{font:40px/1 var(--serif);letter-spacing:-.055em;margin-top:20px}.trip-folio h3 em{color:var(--travel-accent)}.folio-date{font:9px ui-monospace,monospace;letter-spacing:.1em;margin:15px 0 20px;color:var(--travel-muted)}
.folio-row{display:flex;align-items:center;gap:14px;border-top:1px solid var(--travel-line);padding:15px 0}.folio-row>.icon{width:18px;height:18px;color:var(--travel-accent)}.folio-row>div{flex:1;min-width:0}.folio-row strong{display:block;font-size:11px;font-weight:550}.folio-row>div>span{display:block;font-size:9px;color:var(--travel-muted);margin-top:3px}.folio-row>span{font:9px ui-monospace,monospace;color:var(--travel-muted)}.folio-free{display:flex;align-items:center;justify-content:center;gap:8px;border:1px dashed var(--travel-line);padding:11px;font-size:10px;color:var(--travel-muted)}.folio-free>.icon{width:13px;height:13px}
.composition-note{position:absolute;bottom:-30px;right:0;left:0;text-align:center;color:var(--travel-muted);font-size:9px}
/* Dark tokens are shared by all new story sections; the cinematic chapter stays dark. */
:root[data-theme=dark] .home-page{--travel-paper:#122429;--travel-ink:#eee9d8;--travel-muted:#bdc9c1;--travel-line:#385057;--travel-panel:#1a3034;--travel-accent:#efb787;--travel-white:#21393e}
:root[data-theme=dark] .home-page .site-header{background:var(--travel-paper);color:var(--travel-ink)}
:root[data-theme=dark] .home-page .departure-button{background:#e7c5a3;color:#18383c;border-color:#e7c5a3}
:root[data-theme=dark] .home-page .departure-button:hover{background:#f8d4af}
:root[data-theme=dark] .home-page .feature-stage{background:transparent}
:root[data-theme=dark] .home-page .feature-image{background:var(--travel-panel)}
:root[data-theme=dark] .home-page .feature-tabs button[aria-selected=true]{color:var(--travel-ink);border-color:var(--travel-accent)}
:root[data-theme=dark] .home-page .memory .chapter>span{border-color:#657c76}
:root[data-theme=dark] .home-page .main-nav{background:var(--travel-paper)}
:root[data-theme=dark] .home-page .header-cta{color:var(--travel-ink)}
@media(prefers-color-scheme:dark){:root:not([data-theme=light]) .home-page{--travel-paper:#122429;--travel-ink:#eee9d8;--travel-muted:#bdc9c1;--travel-line:#385057;--travel-panel:#1a3034;--travel-accent:#efb787;--travel-white:#21393e}:root:not([data-theme=light]) .home-page .site-header,:root:not([data-theme=light]) .home-page .main-nav{background:var(--travel-paper);color:var(--travel-ink)}:root:not([data-theme=light]) .home-page .departure-button{background:#e7c5a3;color:#18383c;border-color:#e7c5a3}:root:not([data-theme=light]) .home-page .feature-stage{background:transparent}:root:not([data-theme=light]) .home-page .feature-image{background:var(--travel-panel)}}
@media(max-width:1150px){.journey-inner{gap:40px}.paper-ticket{width:210px}.ticket-flight>div{font-size:28px}.ticket-hotel>strong{font-size:29px}.trip-folio{left:3%;right:3%}}
@media(max-width:950px){.journey-inner{grid-template-columns:.9fr 1fr;gap:30px;padding-block:80px}.journey-copy h2{font-size:45px}.journey-copy>p:not(.chapter){font-size:13px}.paper-ticket{width:180px;padding:18px;min-height:200px}.ticket-flight>div{font-size:25px}.ticket-hotel>strong{font-size:27px}.trip-folio{padding:24px 20px;top:290px}.trip-folio h3{font-size:36px}.folio-row{gap:10px}.folio-row strong{font-size:10px}.journey-composition{height:625px}.composition-coordinate{font-size:8px}.ticket-flight{left:-10px}.ticket-hotel{right:-10px}}
@media(max-width:800px){.journey-inner{display:flex;flex-direction:column;align-items:stretch;gap:45px;padding-block:70px}.journey-copy{display:grid;grid-template-columns:1fr 1fr;gap:0 35px}.journey-copy>.chapter{grid-column:1/-1}.journey-copy h2{grid-column:1}.journey-copy>p:not(.chapter){grid-column:1;margin-top:24px}.journey-steps{grid-column:2;grid-row:2/4;margin-top:0;align-self:center}.motion-toggle{justify-self:start}.journey-composition{max-width:540px;width:100%;align-self:center;height:650px}.paper-ticket{width:235px;padding:22px;min-height:212px}.ticket-flight{left:0}.ticket-hotel{right:0}.ticket-flight>div{font-size:32px}.ticket-hotel>strong{font-size:31px}.trip-folio{left:9%;right:9%;top:300px}.trip-folio h3{font-size:40px}.folio-row strong{font-size:11px}.composition-note{bottom:-30px}}
@media(max-width:600px){.journey-inner{padding-block:58px 70px;gap:30px}.journey-copy{display:block}.journey-copy h2{font-size:42px}.journey-copy>p:not(.chapter){font-size:13px;margin-top:23px}.journey-steps{margin-top:30px;gap:21px}.journey-steps strong{font-size:12px}.journey-steps p{font-size:11px}.motion-toggle{margin-top:15px;font-size:9px}.journey-composition{height:610px;max-width:380px}.composition-coordinate{font-size:8px;right:0;top:6px}.paper-ticket{width:174px;padding:17px;min-height:198px;top:40px}.ticket-flight{left:0;transform:translate(calc(var(--gather) * 9px),calc(var(--gather) * 24px)) rotate(calc(-12deg + var(--gather) * 5deg))}.ticket-hotel{right:0;transform:translate(calc(var(--gather) * -9px),calc(var(--gather) * 20px)) rotate(calc(12deg - var(--gather) * 5deg))}.ticket-flight>div{font-size:26px}.ticket-hotel>strong{font-size:26px}.paper-ticket>.micro{font-size:7px}.paper-ticket>p{font-size:8px}.ticket-barcode{width:105px;height:20px}.trip-folio{top:282px;left:5px;right:5px;padding:25px 23px}.trip-folio h3{font-size:38px}.folio-row strong{font-size:10px}.folio-row>div>span{font-size:9px}.journey-connector{top:220px;height:90px}.composition-note{bottom:-18px;font-size:8px}.home-page .journey-copy h2{font-size:42px}}
@media(max-width:360px){.paper-ticket{width:150px;padding:15px}.ticket-flight>div{font-size:23px}.ticket-hotel>strong{font-size:24px}.paper-ticket>p{font-size:7px}.trip-folio{padding-inline:18px}.composition-coordinate{font-size:7px}}
@media(prefers-reduced-motion:reduce){.journey-composition{--gather:1!important}}
/* The app's gold thread: chapters light up as the story is read, the chapter line fills up to where you are. */
.home-page{--travel-gold:#97713a}
:root[data-theme=dark] .home-page{--travel-gold:#d8be8d}
.home-page .chapter>span{transition:background-color .45s ease,border-color .45s ease,color .45s ease}
.home-page .chapter.is-lit>span{background:var(--travel-gold);border-color:var(--travel-gold);color:var(--travel-paper)}
.home-page .memory .chapter.is-lit>span{background:#d8be8d;border-color:#d8be8d;color:#123a40}
.chapter-nav[data-thread]{position:relative}
.chapter-nav[data-thread]>a{position:relative;z-index:1;background:var(--travel-paper);padding-right:14px}
.chapter-nav[data-thread]>a>span{display:grid;place-items:center;width:28px;height:28px;border:1px solid var(--travel-gold);border-radius:50%;background:var(--travel-paper);position:relative;z-index:1;color:var(--travel-gold);transition:background-color .45s ease,color .45s ease}
.chapter-nav[data-thread]>a.is-lit>span{background:var(--travel-gold);color:var(--travel-paper)}
.chapter-nav[data-thread]::before,.chapter-nav[data-thread]::after{content:'';position:absolute;top:var(--thread-y,50%);left:var(--thread-start,0);height:0;pointer-events:none}
.chapter-nav[data-thread]::before{width:var(--thread-span,0);border-top:1.5px dotted var(--travel-gold);opacity:.7}
.chapter-nav[data-thread]::after{width:calc(var(--thread-span,0px) * var(--thread,0));border-top:2px solid var(--travel-gold)}
@media(max-width:600px){.chapter-nav[data-thread]::before,.chapter-nav[data-thread]::after{display:none}}
/* While the three chapters are read, a vertical thread keeps your place in the margin. Wide screens only. */
.story-thread{position:fixed;left:18px;top:50%;transform:translateY(-50%);display:flex;flex-direction:column;gap:64px;z-index:30;opacity:0;visibility:hidden;transition:opacity .4s ease,visibility .4s}
.story-thread[data-visible]{opacity:1;visibility:visible}
.story-thread::before,.story-thread::after{content:'';position:absolute;left:13px;top:14px;pointer-events:none}
.story-thread::before{bottom:14px;border-left:1.5px dotted var(--travel-gold);opacity:.75}
.story-thread::after{height:calc((100% - 28px) * var(--thread,0));border-left:2px solid var(--travel-gold)}
.story-thread a{display:flex;align-items:center;gap:10px;position:relative;z-index:1;min-height:28px;color:var(--travel-muted);font-size:10px;letter-spacing:.14em;text-transform:uppercase}
.story-thread a>span{display:grid;place-items:center;width:28px;height:28px;flex:none;border:1px solid var(--travel-gold);border-radius:50%;background:var(--travel-paper);color:var(--travel-gold);font:10px ui-monospace,monospace;letter-spacing:0;transition:background-color .45s ease,color .45s ease}
.story-thread a.is-lit>span{background:var(--travel-gold);color:var(--travel-paper)}
.story-thread a>em{font-style:normal;color:inherit;white-space:nowrap;opacity:0;transform:translateX(-4px);transition:opacity .25s ease,transform .25s ease;background:var(--travel-paper);padding:3px 8px;border-radius:12px}
.story-thread:hover a>em,.story-thread a:focus-visible>em{opacity:1;transform:none}
@media(max-width:1199px){.story-thread{display:none}}