/* One page template for every itinerary event.
   Header: one quiet line (date · time · sky), then the title.
   Body: media on the left, notes on the right; stacked on phones.
   Loaded last; the older stylesheets still style shared components. */

/* Type: Inter for the interface, Newsreader for titles and lead text. */
:root{--font-sans:'Inter',system-ui,-apple-system,'Segoe UI',sans-serif;--font-serif:'Newsreader',Georgia,serif}
body{font-family:var(--font-sans);font-optical-sizing:auto;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;text-rendering:optimizeLegibility;font-feature-settings:'cv11','ss01'}
:where(time,.duration-clock,.page-when,.fact dd,.nav-stops small,.route-label){font-variant-numeric:tabular-nums}

.page{--gutter:clamp(20px,4vw,56px);--measure:1200px;--column-gap:clamp(28px,3.4vw,56px);--radius:18px}

/* Header */
.page-head{display:block;width:100%;max-width:var(--measure);margin:0 auto;padding:clamp(30px,5vh,52px) var(--gutter) clamp(20px,2.8vh,30px)}
.page-eyebrow{display:flex;flex-wrap:wrap;align-items:baseline;gap:4px 10px;margin:0 0 12px;font:600 11px/1.4 var(--font-sans);letter-spacing:.12em;text-transform:uppercase;color:var(--page-muted)}
.page-eyebrow .clock{color:inherit;border:0;text-decoration:none}
.page-sky{display:inline;padding:0;margin:0;border:0;background:none;font:inherit;letter-spacing:inherit;text-transform:inherit;color:inherit;text-align:left;cursor:pointer;max-width:none}
.page-sky:empty{display:none}
.page-sky::before{content:"·";margin-right:10px;opacity:.7}
.page-sky:hover{color:var(--page-ink)}
.page-sky:focus-visible{outline:2px solid currentColor;outline-offset:3px;border-radius:3px}
.page-title{max-width:26ch;margin:0;font:400 clamp(32px,3.4vw,56px)/1.02 var(--font-serif);font-optical-sizing:auto;letter-spacing:-.022em;text-wrap:balance;color:var(--page-ink)}

/* Body grid */
.page>.stage{display:grid!important;grid-template-columns:minmax(0,1.45fr) minmax(300px,1fr);grid-template-rows:auto;gap:var(--column-gap);align-items:start;width:100%;max-width:var(--measure);margin:0 auto;padding:0 var(--gutter) 112px!important;background:none!important;perspective:none;overflow:visible!important}
.page>.stage>.visual{grid-column:1;grid-row:1;position:sticky;top:24px;display:flex;flex-direction:column;gap:12px;min-width:0;min-height:0;height:auto;margin:0!important;padding:0!important;transform:none!important;overflow:visible}
.page>.stage>.scene-copy{grid-column:2;grid-row:1;min-width:0;max-width:none!important;width:auto;margin:0!important;padding:2px 0 0!important;border:0!important;border-radius:0!important;background:none!important;color:var(--page-ink)!important;overflow:visible!important;scrollbar-width:thin}
.page>.stage>.scene-copy:before{display:none!important}
.page>.stage.is-day{grid-template-columns:minmax(0,1fr)!important}
.page>.stage.is-day>.scene-copy{grid-column:1;padding:0!important}

/* Travel: the map fills the left column at one screen; notes scroll beside it. */
@media (min-width:1001px){
 .page:has(>.stage.is-travel){height:100%}
 .page>.stage.is-travel{flex:1 1 0;min-height:0;grid-template-rows:minmax(0,1fr);align-items:stretch;padding-bottom:32px!important}
 .page>.stage.is-travel>.visual{position:relative;top:auto;height:100%}
 .page>.stage.is-travel>.visual>.map-shell{flex:1 1 auto;height:auto!important;min-height:0!important;max-height:none!important}
 .page>.stage.is-travel>.scene-copy{max-height:100%;overflow-y:auto!important;padding-right:8px!important;overscroll-behavior:contain}
}
.page .stage.is-event .visual>.map-shell{height:clamp(360px,62dvh,680px)!important;min-height:360px}
.page .map-shell{border-radius:var(--radius);overflow:hidden}

/* Time: a compact pill on the media, two lines tall. */
.page :is(#chapter,.preview-clock).duration-clock{left:12px;top:12px;width:auto;max-width:calc(100% - 24px);grid-template-columns:auto auto auto;grid-template-rows:auto auto;grid-template-areas:"dials range icon" "dials copy icon";column-gap:10px;row-gap:1px;align-items:center;padding:7px 12px 7px 8px;border:0;border-radius:14px;background:#fbfaf4eb;box-shadow:0 4px 18px #0928201f;font-family:var(--font-sans);color:#14332c}
.page :is(#chapter,.preview-clock) .duration-dials{grid-area:dials;height:auto;min-width:0;gap:3px}
.page :is(#chapter,.preview-clock) .duration-dial{width:26px;height:26px}
.page :is(#chapter,.preview-clock) .duration-range{grid-area:range;font-size:12.5px;font-weight:600;letter-spacing:-.005em;gap:5px}
.page :is(#chapter,.preview-clock) .duration-copy{grid-area:copy;flex-direction:row;align-items:baseline;gap:5px}
.page :is(#chapter,.preview-clock) .duration-copy strong{font-size:12px;font-weight:600}
.page :is(#chapter,.preview-clock) .duration-copy small{font-size:11px;opacity:.65}
.page :is(#chapter,.preview-clock) .duration-activity{grid-area:icon;width:28px;min-height:0;margin-left:2px}
.page :is(#chapter,.preview-clock) .duration-activity>*{max-width:26px;max-height:26px;font-size:22px}

/* Photos: Stories-style progress and controls sit on the image. */
.page .photo-wall.slideshow{position:relative}
.page .slide-frame{border-radius:var(--radius)}
.page .slide-controls{position:absolute!important;inset:0;height:auto!important;z-index:4;display:block;margin:0!important;padding:0!important;border:0!important;background:none!important;box-shadow:none!important;color:#fff;pointer-events:none}
.page .slide-controls .slide-position{display:none}
.page .slide-controls .slide-progress{position:absolute;left:16px;right:16px;bottom:12px;display:flex;gap:4px}
.page .slide-controls .slide-progress span{flex:1;height:2.5px;border-radius:2px;background:#ffffff5c}
.page .slide-controls .slide-progress span.active{background:#fff}
.page .slide-controls button{position:absolute;top:12px;pointer-events:auto;display:grid;place-items:center;width:32px;height:32px;padding:0;border:0;border-radius:50%;background:#0b1f1a66;color:#fff;backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px);opacity:0;transition:opacity .2s}
.page .slide-controls [data-slide-pause]{right:52px}
.page .slide-controls .expand-gallery{right:12px}
.page .slide-controls button i{font-size:15px}
.page .photo-wall:is(:hover,:focus-within) .slide-controls button{opacity:1}
@media (hover:none){.page .slide-controls button{opacity:.9}}
.page .slide-caption{bottom:26px!important;left:16px!important;max-width:calc(100% - 32px)!important;font:500 13px/1.35 var(--font-sans)!important;letter-spacing:.005em;text-shadow:0 1px 6px #0007}
.page .slide-frame::after{background:linear-gradient(transparent 62%,#0008)}
.page .photo-wall:has(.slide-progress span:only-child) .slide-controls .slide-progress{visibility:hidden}

/* Under the media: only what the media itself doesn't already offer. */
.page .media-actions{display:flex;gap:6px 18px;padding:0 2px;min-height:0}
.page .media-actions [data-gallery]{display:none!important}
.page .media-actions:empty,.page .media-actions:not(:has(>:not([data-gallery]))){display:none}

/* Notes column */
.page .scene-copy>*:first-child{margin-top:0}
.page .scene-description{margin:0 0 28px!important;max-width:34ch;font:400 clamp(19px,1.45vw,22px)/1.45 var(--font-serif)!important;letter-spacing:-.005em;color:var(--page-ink)!important;text-wrap:pretty}
.page .facts{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:22px 28px;margin:0 0 28px;padding:22px 0 0;border-top:1px solid var(--page-line)}
.page .fact{display:block;min-width:0;padding:0;border:0}
.page .fact:is(.fact-reviews,.fact-budget){grid-column:1/-1}
.page .fact dt{margin:0 0 6px;font:600 10.5px/1.4 var(--font-sans);letter-spacing:.12em;text-transform:uppercase;color:var(--page-muted)}
.page .fact dd{margin:0;min-width:0;font-size:15px;line-height:1.5;letter-spacing:-.006em;color:var(--page-ink)}
.page .fact-budget b{display:block;font-weight:600}
.page .fact-budget span{display:block;margin-top:4px;font-size:14px;line-height:1.6;color:var(--page-muted)}
.page .fact-budget small{display:block;margin-top:8px;font-size:11.5px;color:var(--page-muted);opacity:.75}
.page .fact-reviews .place-reviews{margin:0}
.page .fact-reviews .place-score{gap:6px 22px}
.page .fact-reviews .review-quote{margin-top:10px;font:italic 400 16px/1.5 var(--font-serif);color:var(--page-muted)}

.page .scene-notes{display:grid;gap:14px;margin:0 0 28px;padding-top:24px;border-top:1px solid var(--page-line)}
.page .scene-note{margin:0!important;padding:0!important;border:0!important;font-size:14.5px!important;line-height:1.7!important;color:var(--page-muted)!important;text-wrap:pretty}
.page .scene-note.kid{display:flex;gap:10px;align-items:flex-start}
.page .scene-note.kid i{flex:none;margin-top:4px;font-size:16px;color:var(--page-time)}

/* Multi-leg journeys: a quiet timeline. Each row replays its leg. */
.page .journey-legs{position:relative;margin:0 0 28px!important;padding:22px 0 0!important;list-style:none;border-top:1px solid var(--page-line)}
.page .facts+.journey-legs{border-top:0;padding-top:0!important}
.page .journey-legs>li{position:relative;display:block!important;padding:0 0 18px 42px!important;background:none!important}
.page .journey-legs>li:last-child{padding-bottom:0!important}
.page .journey-legs>li:before{left:13px!important;top:32px!important;bottom:4px!important;width:2px!important;background:var(--leg-color)!important;opacity:.45!important;border-radius:1px}
.page .leg-select{display:block!important;width:100%;padding:3px 0!important;margin:0;border:0;border-radius:0!important;background:none!important;text-align:left;color:inherit}
.page :is(.leg-select>i:first-child,.journey-legs>li>i){position:absolute;left:0;top:0;width:28px!important;height:28px!important;display:grid!important;place-items:center;border:0!important;border-radius:50%!important;background:color-mix(in srgb,var(--leg-color) 24%,transparent)!important;color:var(--page-ink)!important;font-size:15px!important;box-shadow:none!important}
.page .journey-legs>li.active-leg .leg-select>i:first-child{background:var(--leg-color)!important;color:#0d2a24!important}
.page .leg-select>i:last-child{display:none!important}
.page .leg-select:enabled{cursor:pointer}
.page .leg-select:enabled:hover b{text-decoration:underline;text-decoration-color:var(--page-line);text-underline-offset:3px}
.page .journey-legs small{display:block;margin:0 0 3px;color:var(--page-muted)!important;font-size:10.5px!important;font-weight:600;letter-spacing:.12em;text-transform:uppercase}
.page .journey-legs b{display:block;color:var(--page-ink);font-size:15px!important;font-weight:500;line-height:1.45;letter-spacing:-.006em}
.page .journey-legs :is(em,details){display:block;margin:6px 0 0!important;color:var(--page-muted)!important;font-size:13px!important;font-style:normal}
.page .journey-legs summary{cursor:pointer}

/* Shorter connections and links close the column quietly. */
.page .short-transfers{margin:0 0 24px}
.page .short-transfers details{padding:13px 0;border-top:1px solid var(--page-line);font-size:13.5px;color:var(--page-muted)}
.page .short-transfers details:last-child{border-bottom:1px solid var(--page-line)}
.page .short-transfers summary{cursor:pointer;color:var(--page-ink);list-style:none}
.page .short-transfers summary::-webkit-details-marker{display:none}
.page .short-transfers summary i{margin-right:8px;opacity:.7}
.page .short-transfers p{margin:8px 0}
.page .short-transfers a{margin-right:14px;color:inherit}
.page .scene-copy .links{margin-top:4px;gap:8px 22px}
.page .scene-copy .links :is(a,button){font:500 13px/1.4 var(--font-sans)!important;letter-spacing:.005em}

/* Sidebar type */
.sidebar{font-family:var(--font-sans)}
.brand-label{font-family:var(--font-serif);font-weight:400;letter-spacing:-.015em}
.nav-day>a>b{font-weight:600;letter-spacing:-.005em}
.nav-stops a{line-height:1.45;letter-spacing:-.003em}
.nav-stops a small{letter-spacing:.01em}

/* Floating Next stays clear of content and compact on phones. */
.scene-footer #next{font:600 13.5px/1 var(--font-sans);letter-spacing:.01em}
@media (max-width:1000px){body .scene-footer{right:14px;bottom:max(14px,env(safe-area-inset-bottom))}.scene-footer #next{min-height:42px;padding:0 16px;font-size:13px}}

/* Phones and tablets: one column, media first. */
@media (max-width:1000px){
 .page{--gutter:20px;--radius:16px}
 .page-head{padding:20px var(--gutter) 18px 68px}
 .page-title{font-size:clamp(27px,7.4vw,34px);max-width:none}
 .page>.stage{grid-template-columns:minmax(0,1fr)!important;gap:24px;padding:0 var(--gutter) 104px!important}
 .page>.stage>.visual{position:static;grid-column:1;grid-row:1}
 .page>.stage>.scene-copy{grid-column:1;grid-row:2}
 .page>.stage.is-travel>.visual>.map-shell{height:min(58vh,500px)!important}
 .page .scene-description{font-size:19px!important;max-width:none}
 .page .facts{gap:18px 20px}
 .page :is(#chapter,.preview-clock).duration-clock{left:10px;top:10px;padding:6px 10px 6px 7px;column-gap:8px}
 .page :is(#chapter,.preview-clock) .duration-dial{width:22px;height:22px}
 .page :is(#chapter,.preview-clock) .duration-range{font-size:12px}
}

/* Sidebar: one open timeline; the highlight glides. */
.nav-expand,.nav-day>a,.nav-day>a>i{transition:none!important}
.nav-indicator.is-gliding{transition:transform .32s cubic-bezier(.22,.8,.24,1),width .32s,height .32s}
@media (prefers-reduced-motion:reduce){.nav-indicator.is-gliding{transition:none}}
.nav-expand{grid-template-rows:1fr!important}
.nav-day>a>i{display:none}
.nav-day{margin:0 0 6px}
@media (max-width:1000px){.sky-backdrop .sky-sun,.sky-backdrop .sky-moon{left:88%!important;width:24px;height:24px}}

/* On the places-only map, its note sits quietly above the credits. */
#visual #map-shell:has(#terrain-map[data-places]) .map-top{top:auto!important;bottom:48px;left:12px!important;right:auto!important}
@media (max-width:1000px){.page-sky{display:block;flex-basis:100%}.page-sky::before{display:none}}

/* Video plays clean: YouTube's hover layer never takes the pointer unless its
   own controls were requested; a tap on the picture opens our small controls.
   The creator credit and source link stay, as attribution requires. */
.scene-movie[data-provider="youtube"]:not([data-youtube-controls="on"]) .movie-frame iframe{pointer-events:none}
.scene-movie .movie-frame{cursor:pointer;border-radius:var(--radius,18px);overflow:hidden}
.scene-movie .movie-credit [data-movie-reveal]{display:none}
.scene-movie .movie-credit{padding:8px 2px 0;font:500 12px/1.3 var(--font-sans);color:var(--page-muted)}

/* Video pages: the video stands alone; photos are one tap away. */
.page .visual.with-video>.photo-wall{display:none!important}
.page .visual.with-video .media-actions [data-gallery]{display:inline-flex!important}
.page .visual.with-video .media-actions:has([data-gallery]){display:flex!important}
.page .scene-movie{position:relative}
.page .scene-movie .movie-frame{aspect-ratio:16/9;min-height:0!important;max-height:none!important;border-radius:var(--radius);overflow:hidden;background:#0d2a24}
.page .scene-movie .movie-frame :is(iframe,video,img){display:block;width:100%;height:100%;object-fit:cover;border:0}
/* Over YouTube the clock keeps to the space above the player, never on its branding. */

/* Captions never inherit the old centring transform. */
.page .slide-caption{transform:none!important;right:auto!important;width:auto!important}

/* Endpoint labels sit clear of the traveller and above it. */
.maplibregl-marker.route-pin[data-role]{z-index:5!important}
.route-pin[data-role="origin"] .route-label{bottom:calc(100% + 26px)}

@media (max-width:1000px){
 /* The sun keeps to a small corner; titles never run beneath it. */
 .sky-backdrop{height:72px}
 .sky-backdrop .sky-sun,.sky-backdrop .sky-moon{left:auto!important;right:18px;width:22px!important;height:22px!important;transform:translateY(50%)}
 .page-head{padding-right:52px}
 /* Swiping is the main way forward on a phone; Next becomes a quiet round button. */
 .scene-footer #next{width:46px;min-width:46px;height:46px;min-height:46px;padding:0!important;border-radius:50%;justify-content:center;font-size:0!important;gap:0}
 .scene-footer #next>span{display:none}
 .scene-footer #next i{font-size:19px}
}

/* A video already on the page needs no separate "1 video" link. */
.page .visual.with-video .media-actions [data-panel="videos"]{display:none!important}
.page .media-actions :is(button,a){color:var(--page-muted)!important;opacity:1!important}
.page .media-actions :is(button,a):hover{color:var(--page-ink)!important}

/* Route notes under the map read as a quiet disclosure, not a panel. */
.page .terrain-surface-note{margin:2px 2px 0;padding:0!important;border:0!important;background:none!important;box-shadow:none!important;font:500 12.5px/1.5 var(--font-sans)!important;color:var(--page-muted)!important;opacity:1}
.page .terrain-surface-note summary{list-style:none;cursor:pointer;min-height:0;padding:2px 0}
.page .terrain-surface-note summary::-webkit-details-marker{display:none}
.page .terrain-surface-note summary::before{content:"+";display:inline-block;width:14px;opacity:.7}
.page .terrain-surface-note[open] summary::before{content:"–"}

/* Short landscape screens (a phone on its side): the sidebar steps behind the
   menu button and the header tightens, so the map and photo get the room. */
@media (max-height:560px) and (min-width:1001px) and (max-width:1100px){
 .sidebar{transform:translateX(-100%);transition:transform 190ms var(--ease)}
 body.nav-open .sidebar{transform:translateX(0)}
 .app{margin-left:0}
 #menu{display:grid;place-items:center}
 .sky-backdrop{left:0}
 .page-head{padding-left:68px}
}
@media (max-height:560px) and (min-width:600px){
 .page-head{padding-top:14px;padding-bottom:12px}
 .page-eyebrow{margin-bottom:6px}
 .page-title{font-size:26px}
 .page>.stage{padding-bottom:72px!important}
 .page>.stage.is-travel{padding-bottom:14px!important}
}
@media (max-height:560px){.sky-backdrop{height:54px}.sky-backdrop .sky-sun,.sky-backdrop .sky-moon{width:22px!important;height:22px!important}}
/* Leg icons sit in the timeline gutter, not inside the row's text. */
.page .leg-select{position:static!important}
.page .journey-legs>li>details,.page .journey-legs>li>em{margin-left:0!important}

/* Sidebar refinements */
@media (min-width:1200px){:root{--sidebar:256px}}
.brand-label small{display:block;margin-top:4px;font:600 9.5px/1.3 var(--font-sans);letter-spacing:.14em;white-space:nowrap;text-transform:uppercase;color:var(--page-muted)}
body[data-sky] .nav-day.current>a{background:color-mix(in srgb,var(--page-surface) 34%,transparent)}
.nav-day>a{border-radius:12px}
.nav-day .nav-date{border-color:color-mix(in srgb,currentColor 45%,transparent)}
.nav-stops a small{font-size:11px;font-weight:500;color:var(--page-muted)}
.sidebar-bottom button,.sidebar-bottom a{font:500 13px/1.3 var(--font-sans)}
.sidebar-bottom>span{font-size:10.5px;letter-spacing:.02em}

/* Panels: calm editorial reading, figures aligned. */
#panel-body{font-family:var(--font-sans);font-size:14.5px;line-height:1.65}
#panel-body h3{font:400 24px/1.2 var(--font-serif);letter-spacing:-.01em}
#panel-body table{font-size:13.5px;font-variant-numeric:tabular-nums}
#panel-body table td:last-child,#panel-body table th:last-child{text-align:right;white-space:nowrap}
#panel-body table th{font:600 10.5px/1.4 var(--font-sans);letter-spacing:.12em;text-transform:uppercase;color:var(--muted)}
#panel-title,.panel h2{font:400 28px/1.15 var(--font-serif);letter-spacing:-.015em}

/* Day overview: the collage fills the screen; the calendar card carries the date. */
@media (min-width:1001px){.page .day-atlas{grid-template-rows:repeat(2,minmax(220px,calc((100dvh - 250px)/2)));max-width:none}}
.page .calendar-day-count{display:none}
.page .day-calendar time{border-color:color-mix(in srgb,currentColor 40%,transparent);background:color-mix(in srgb,#fff 22%,transparent);backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px)}
.page .day-calendar time small,.page .day-calendar time em{font:600 12px/1 var(--font-sans);letter-spacing:.18em}
.page .day-calendar time strong{font:300 104px/.95 var(--font-serif);letter-spacing:-.04em}
.page .day-tile{border-radius:var(--radius)}
.page .day-tile figcaption{font:500 14px/1.35 var(--font-sans);letter-spacing:.005em;padding:48px 18px 16px}
@media (max-width:1000px){.page .day-calendar time strong{font-size:76px}}

/* Map controls appear with the map, never as empty boxes while it loads. */
#terrain-map:not([data-ready]) .maplibregl-ctrl-group{opacity:0;pointer-events:none}
#terrain-map[data-ready] .maplibregl-ctrl-group{transition:opacity .25s}

/* A travel page waiting to go live: a quiet contour texture, not a blank box. */
.preview-stage .preview-map{background:
 repeating-radial-gradient(circle at 30% 40%,transparent 0 22px,color-mix(in srgb,var(--page-ink) 7%,transparent) 22px 23px),
 repeating-radial-gradient(circle at 75% 70%,transparent 0 28px,color-mix(in srgb,var(--page-ink) 6%,transparent) 28px 29px),
 color-mix(in srgb,var(--page-surface) 62%,#dfe7df)}

/* Distance leads; how it was measured sits beneath, small. */
.page [data-distance] small{display:block;margin-top:2px;font-size:12px;color:var(--page-muted)}

/* On the globe the illustration note is quiet text, not another chip. */
#visual #map-shell .map-top>#map-caption:not(.route-status){padding:0!important;border:0!important;background:none!important;box-shadow:none!important;color:#f3f7f2d9!important;font:500 11px/1.35 var(--font-sans)!important;text-shadow:0 1px 4px #0006;max-width:180px}
/* Over satellite imagery a bare caption is unreadable; give it a dark backing. */
#visual #map-shell:has(#terrain-map[data-places]) .map-top>#map-caption:not(.route-status){padding:3px 9px!important;border-radius:999px;background:#0b2620b8!important;color:#f3f7f2!important;max-width:none}

/* Video frames show the place's photo until the player is ready, then fade in. */
.scene-movie .movie-frame{background:var(--poster,none) center/cover no-repeat,#0d2a24}
.scene-movie .movie-frame :is(iframe,video){transition:opacity .6s ease}
.scene-movie[data-ready="false"] .movie-frame :is(iframe,video),.scene-movie[data-provider="youtube"]:not([data-started]) .movie-frame iframe{opacity:0}
.page :is(#chapter,.preview-clock) .duration-copy:has(strong:empty):has(small:empty){display:none}
.page :is(#chapter,.preview-clock).duration-clock:has(.duration-copy:has(strong:empty)){grid-template-areas:"dials range icon";padding-block:9px}
.scene-movie:not([data-started]) .movie-frame{background:var(--poster,none) center/cover no-repeat,#0d2a24!important}

/* On the flight globe, the caption and its two buttons sit along the bottom
   edge instead of floating over the globe or under the clock, at every width. */
#visual #map-shell:has(>#globe[style*="display: block"]) .map-top{top:auto!important;bottom:12px!important;left:12px!important;right:12px!important;display:flex;align-items:flex-end;justify-content:space-between;gap:12px}
#visual #map-shell:has(>#globe[style*="display: block"]) .map-top>div{margin-left:auto}

/* Flight days on phones: a compact date in the corner leaves the route clear. */
@media (max-width:1000px){
 .page .day-atlas:has(.day-flight){position:relative}
 .page .day-atlas:has(.day-flight) .day-calendar{position:absolute;z-index:2;top:12px;left:12px;grid-area:auto;padding:0;display:block;width:auto}
 .page .day-atlas:has(.day-flight) .day-calendar time{width:84px;margin:0}
 .page .day-atlas:has(.day-flight) .day-calendar time small{padding:5px;font-size:10px}
 .page .day-atlas:has(.day-flight) .day-calendar time strong{font-size:40px;padding:6px 4px 2px}
 .page .day-atlas:has(.day-flight) .day-calendar time em{margin:4px 0 7px;font-size:10px}
}

/* Frost: once you read down a page, the sky behind it softens to a frosted,
   evenly lit surface. It fades back as the next page arrives. */
.sky-frost{position:fixed;z-index:0;inset:0 0 0 var(--sidebar);opacity:0;pointer-events:none;background:color-mix(in srgb,var(--page-surface) 62%,transparent);-webkit-backdrop-filter:blur(22px) saturate(1.15);backdrop-filter:blur(22px) saturate(1.15);will-change:opacity}
@media (max-width:1000px){.sky-frost{left:0}}
@media (max-height:560px) and (min-width:1001px) and (max-width:1100px){.sky-frost{left:0}}
/* While reading, a frosted band under the floating menu keeps text from
   running beneath it. Only where the menu floats over the page. */
.frost-band{display:none}
@media (max-width:1000px),(max-height:560px) and (min-width:1001px) and (max-width:1100px){
 .frost-band{display:block;position:fixed;z-index:19;top:0;left:0;right:0;height:calc(66px + env(safe-area-inset-top));opacity:0;pointer-events:none;background:linear-gradient(color-mix(in srgb,var(--page-surface) 78%,transparent),color-mix(in srgb,var(--page-surface) 40%,transparent));-webkit-backdrop-filter:blur(16px);backdrop-filter:blur(16px);-webkit-mask:linear-gradient(#000 60%,transparent);mask:linear-gradient(#000 60%,transparent)}
}

/* Weather marks. Forecast: a solid pill that names the weather.
   Outlook: a dashed outline that names only a lean against the usual. */
.wx{display:inline-flex;align-items:center;gap:5px;margin-left:10px;padding:2px 9px 2px 7px;border-radius:999px;font:600 10.5px/1.5 var(--font-sans);letter-spacing:.08em;text-transform:uppercase;vertical-align:1px;white-space:nowrap}
.wx i{font-size:13px;letter-spacing:0}
.wx-forecast{background:color-mix(in srgb,var(--page-ink) 13%,transparent);color:var(--page-ink)}
.wx-outlook{border:1px dashed color-mix(in srgb,var(--page-ink) 45%,transparent);color:var(--page-muted);padding:1px 8px 1px 6px}
@media (max-width:1000px){.page-sky .wx{margin:4px 0 0}.page-sky{display:flex!important;flex-wrap:wrap;align-items:center;gap:0 10px}}
.sky-weather{margin:16px 0 4px;padding:14px 0 2px;border-top:1px solid #0001}
.sky-weather h3{margin:0 0 8px;font:600 11px/1.4 var(--font-sans);letter-spacing:.12em;text-transform:uppercase}
.sky-weather .wx{margin-left:0;--page-ink:#173d34;--page-muted:#3c5a52}
/* Narrow frames: never collapse the dials under the time text; let the text wrap instead. */
.page :is(#chapter,.preview-clock) .duration-dials{min-width:max-content}
.page :is(#chapter,.preview-clock) :is(.duration-range,.duration-copy){min-width:0;flex-wrap:wrap;white-space:normal;row-gap:0}
.page :is(#chapter,.preview-clock) :is(.duration-range,.duration-copy)>*{white-space:nowrap}
/* A clear rule where one event ends and the next begins; a new day gets a heavier one. */
.page+.page>.page-head{position:relative}
.page+.page>.page-head::before{content:"";position:absolute;top:0;left:var(--gutter);right:var(--gutter);height:1px;background:color-mix(in srgb,var(--page-ink) 50%,transparent);pointer-events:none}
.page+.page:has(>.stage.is-day)>.page-head::before{height:2px;background:color-mix(in srgb,var(--page-ink) 80%,transparent)}
/* A clock without dials or a second line ("Timing flexible") is one centred row, not a grid with empty tracks. */
.page :is(#chapter,.preview-clock).duration-clock:is(:has(>.duration-dials[hidden]),:not(:has(>.duration-dials))){grid-template-columns:auto auto;grid-template-areas:"range icon" "copy icon";padding-left:12px}
.page :is(#chapter,.preview-clock).duration-clock:has(>.duration-copy strong:empty):has(>.duration-copy small:empty){grid-template-rows:auto;grid-template-areas:"dials range icon"}
.page :is(#chapter,.preview-clock).duration-clock:is(:has(>.duration-dials[hidden]),:not(:has(>.duration-dials))):has(>.duration-copy strong:empty):has(>.duration-copy small:empty){grid-template-areas:"range icon"}
/* Animated activity icons draw inside their slot, centred, at the same size as the static glyph. */
.page :is(#chapter,.preview-clock) .duration-activity>div{display:grid;place-items:center;width:24px;height:24px}
.page :is(#chapter,.preview-clock) .duration-activity svg{width:100%;height:100%}
/* Photo changes: the new picture fades in over the old one, which stays solid until it is covered,
   and only one caption is ever on screen. */
.slideshow .slide-frame{transition:opacity 350ms ease 650ms}
.slideshow .slide-frame.is-active{transition:opacity 650ms ease}
.slideshow .slide-frame:not(.is-active) .slide-caption{opacity:0;transition:none}
.slideshow .slide-frame.is-active .slide-caption{opacity:1;transition:opacity 280ms ease 420ms}
/* A map page's recorded first frame: the whole preview, then behind the live map until it has drawn. */
.preview-map .map-snapshot{position:absolute;inset:0;display:block;width:100%;height:100%;object-fit:cover}
.preview-stage .preview-map.has-snapshot{background:#547067}
#map-shell[data-snapshot]{background:var(--snapshot,none) center/cover no-repeat,#547067}
#map-shell[data-snapshot] .map-loading,#map-shell[data-snapshot] #map-placeholder{display:none!important}
.preview-stage .terrain-surface-note,.preview-stage .terrain-attribution{pointer-events:none}
#visual[data-map-pending]>:is(.terrain-surface-note,.terrain-attribution){display:none!important}
#visual>.map-after-placeholder{display:contents}
#visual:not([data-map-pending])>.map-after-placeholder{display:none}
.map-after-placeholder>*{pointer-events:none}
.visual>.media-actions:empty{display:none!important}