:root{--paper:#f7f5ef;--ink:#303b33;--muted:#6e786b;--accent:#9a523b;--line:#d9ddcf;--serif:Georgia,'Songti SC','Noto Serif CJK SC',serif;--sans:'PingFang SC','Microsoft YaHei',sans-serif;--ease:cubic-bezier(.22,1,.36,1)}*{box-sizing:border-box}html,body{margin:0;width:100%;height:100%;overflow:hidden}body{background:var(--paper);color:var(--ink);font-family:var(--sans);-webkit-font-smoothing:antialiased}button,a{-webkit-tap-highlight-color:transparent}button{font:inherit;color:inherit;cursor:pointer;border:0}button:disabled{opacity:.3;cursor:default}button:focus-visible,a:focus-visible,canvas:focus-visible{outline:2px solid var(--accent);outline-offset:5px}button svg{width:21px;height:21px;fill:none;stroke:currentColor;stroke-width:1.4;stroke-linecap:round;stroke-linejoin:round}[hidden]{display:none!important}.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}#experience{width:100%;height:100dvh;position:relative;isolation:isolate;overflow:hidden}.map-stage,.connections,.markers,#globe{position:absolute;inset:0;width:100%;height:100%}#globe{touch-action:none;cursor:grab;outline-offset:-5px}#globe.dragging{cursor:grabbing}.connections{pointer-events:none;overflow:hidden}.connections path{transition:stroke-opacity .18s ease}.markers{pointer-events:none}.place{position:absolute;inset:0;pointer-events:none;opacity:0;transition:opacity .2s ease}.place.in-view{opacity:1}.pin{z-index:1;position:absolute;left:0;top:0;width:44px;height:44px;padding:0;display:grid;place-items:center;pointer-events:auto;background:transparent;border-radius:50%;transition:opacity .2s}.pin:before{content:'';width:6px;height:6px;border:2px solid #fffdf5;border-radius:50%;background:var(--accent);box-shadow:0 0 0 1px #9a523b3d;box-sizing:content-box;transition:transform .25s var(--ease),box-shadow .25s}.pin:hover:before,.pin:focus-visible:before{transform:scale(1.4);box-shadow:0 0 0 5px #9a523b15}.place:not(.in-view) button{pointer-events:none}.postcard{--reveal:0;--photo-opacity:0;z-index:3;position:absolute;top:0;left:0;width:122px;height:162px;transform-origin:0 0;background:transparent;text-align:left;border-radius:3px;padding:0;pointer-events:none;opacity:0;transition:opacity .17s ease;clip-path:inset(0 0 calc(40px * (1 - var(--reveal))) 0 round 3px);contain:layout style}.postcard.shown{opacity:var(--photo-opacity);pointer-events:auto}.card-surface{position:absolute;inset:0;display:block;transform:translateY(5px) scale(.94);transform-origin:50% 25%;transition:transform .32s var(--ease);filter:drop-shadow(0 4px 7px #2e3a3325)}.shown .card-surface{transform:translateY(0) scale(1)}.postcard:hover .card-surface{transform:translateY(-3px) scale(1.025)}.postcard:active .card-surface{transform:scale(.97)}.card-paper{position:absolute;inset:0;background:#fffdf7;transform:scaleY(calc((122 + 40 * var(--reveal)) / 162));transform-origin:50% 0;border-radius:3px}.postcard img{position:absolute;left:5px;top:5px;display:block;width:112px;height:112px;object-fit:cover;border-radius:1px;pointer-events:none}.postcard-info{position:absolute;top:122px;left:0;right:0;opacity:var(--reveal);transform:translateY(calc(-7px * (1 - var(--reveal))));padding:1px 9px 8px;pointer-events:none}.place-name{display:block;font-size:11px;line-height:1.45;font-weight:500;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.place-country{display:block;padding-top:2px;color:var(--muted);font-size:8px;line-height:1.5;letter-spacing:.11em}.highlight .card-paper{box-shadow:inset 0 0 0 1px #9a523b55}.site-header{position:absolute;top:max(27px,env(safe-area-inset-top));left:24px;right:24px;display:flex;align-items:center;justify-content:space-between;pointer-events:none;z-index:5}.brand{color:var(--ink);text-decoration:none;pointer-events:auto}.brand-cn{font:21px/1.3 var(--serif);letter-spacing:.12em;display:block}.brand-en{display:block;font:9px/1.7 var(--serif);letter-spacing:.25em;margin-top:2px}.header-note{display:none;font-size:10px;letter-spacing:.2em;color:var(--muted)}.icon-button{width:44px;height:44px;display:grid;place-items:center;background:none;border-radius:50%;flex-shrink:0;transition:background .2s,transform .22s var(--ease)}.icon-button:active{transform:scale(.9)}.about-button{pointer-events:auto;width:36px;height:36px}.about-button svg{width:24px;height:24px;stroke-width:1.1}.about-button:hover{background:#e8e8dc}.map-tools{position:absolute;right:17px;bottom:169px;background:#fffdf5e8;border:1px solid #d6dacb;border-radius:26px;padding:4px 0;display:flex;align-items:center;flex-direction:column;z-index:4}.map-tools .icon-button{width:42px;height:42px}.map-tools .icon-button:hover{background:#e9ebde}.zoom-meter{width:12px;height:1px;background:#d6dacb;position:relative}.zoom-meter span{display:block;height:1px;width:100%;transform:scaleX(0);transform-origin:0 50%;background:var(--accent)}.tool-separator{width:14px;height:1px;background:var(--line);margin:4px 0}.reset-button svg{width:20px;height:20px}.journey-action{position:absolute;bottom:calc(39px + env(safe-area-inset-bottom));left:0;right:0;text-align:center;z-index:4;pointer-events:none}.random-button{pointer-events:auto;border-radius:30px;background:var(--ink);color:var(--paper);display:inline-flex;align-items:center;justify-content:center;gap:12px;padding:15px 25px;min-height:51px;font-size:13px;box-shadow:0 5px 20px #303b3312;transition:background .2s,transform .25s var(--ease)}.random-button:hover{background:#435343;transform:translateY(-2px)}.random-button:active{transform:scale(.96)}.random-button svg{width:18px;height:18px;stroke-width:1.3}.random-button .arrow{width:17px;height:17px;margin-left:10px}.random-button:hover .arrow{transform:translate(2px,-2px)}.random-button .arrow{transition:transform .3s var(--ease)}.map-meta{position:absolute;left:24px;bottom:calc(17px + env(safe-area-inset-bottom));display:flex;gap:7px;align-items:center;font-size:8px;letter-spacing:.04em;color:var(--muted);pointer-events:none}.meta-dot{width:4px;height:4px;background:#819474;border-radius:50%}.meta-line{width:13px;height:1px;background:#a7ae9e}.credits-trigger{position:absolute;right:20px;bottom:calc(12px + env(safe-area-inset-bottom));color:var(--muted);background:none;font-size:8px;padding:6px 0;z-index:5;text-decoration:underline;text-underline-offset:3px}.loading{position:absolute;inset:0;display:flex;flex-direction:column;justify-content:center;align-items:center;background:var(--paper);z-index:10;transition:opacity .4s}.loading-globe{width:42px;height:42px;fill:none;stroke:#a9b69c;stroke-width:1;animation:loading-turn 3s linear infinite}.loading p{font:14px var(--serif);margin-top:22px}.loading.loaded{opacity:0;pointer-events:none}.loading button{padding:10px 20px;background:var(--ink);color:var(--paper);border-radius:20px}.toast{position:absolute;bottom:143px;left:50%;transform:translate(-50%,8px);background:#fffdf4f0;color:var(--ink);box-shadow:0 3px 14px #303b3310;border:1px solid #d9ddcf;font-size:10px;line-height:1.7;padding:9px 13px;border-radius:5px;max-width:80%;width:max-content;pointer-events:none;opacity:0;transition:opacity .2s,transform .25s var(--ease);z-index:6}.toast.visible{transform:translate(-50%,0);opacity:1}
.scrim{position:fixed;inset:0;background:#303b332a;z-index:19;opacity:0;transition:opacity .35s}.scrim.open{opacity:1}.destination-drawer{position:fixed;bottom:0;left:0;right:0;height:76dvh;max-height:94dvh;background:#fffdf7;border-radius:24px 24px 0 0;z-index:20;transform:translateY(103%);transition:transform .4s cubic-bezier(.22,1,.36,1);box-shadow:0 -10px 40px #303b3312;overflow:hidden;outline:none}.destination-drawer.open{transform:translateY(0)}.destination-drawer.expanded{height:94dvh}.drawer-handle-zone{height:27px;position:relative;display:grid;place-items:center;touch-action:none;cursor:ns-resize}.drawer-handle{height:4px;width:35px;border-radius:5px;background:#cdd2c3}.drawer-expand{position:absolute;right:18px;top:8px;font-size:9px;background:none;color:var(--muted);padding:0}.drawer-close{position:absolute;top:42px;right:14px;background:#fffdf5eb;width:38px;height:38px;z-index:3;box-shadow:0 1px 10px #303b3310}.drawer-close svg{width:19px;height:19px}.drawer-scroll{height:calc(100% - 27px);overflow-y:auto;overscroll-behavior:contain;-webkit-overflow-scrolling:touch;scrollbar-width:thin;scrollbar-color:#d2d8c7 transparent}.destination-photo{position:relative;margin:0;height:220px;background:#e8e3d3}.destination-photo img{width:100%;height:100%;display:block;object-fit:cover}.destination-photo:after{content:'';position:absolute;inset:55% 0 0;background:linear-gradient(transparent,#162b2048);pointer-events:none}.destination-photo figcaption{position:absolute;left:24px;bottom:15px;right:24px;z-index:1;font:italic 15px/1.5 var(--serif);color:#fffdf5;text-shadow:0 1px 8px #162b2066}.destination-story{padding:25px 25px calc(25px + env(safe-area-inset-bottom))}.destination-location{color:var(--accent);font-size:9px;letter-spacing:.13em}.destination-story h2{font:34px/1.35 var(--serif);margin:7px 0 4px;letter-spacing:-.02em}.destination-en{font:italic 15px/1.5 var(--serif);color:var(--muted);margin:0}.destination-description{font-size:13px;line-height:2;color:#586653;margin:22px 0}.destination-reason{border-top:1px solid var(--line);padding-top:17px}.destination-reason h3{font-size:11px;font-weight:500;margin:0 0 10px}.destination-reason h3 span{font-size:8px;letter-spacing:.09em;color:var(--muted);margin-left:8px;font-weight:400}.destination-reason p{font-size:12px;line-height:1.8;margin:0;color:#586653}.destination-season{border-top:1px solid var(--line);padding-top:17px;margin-top:22px;display:flex;justify-content:space-between;align-items:center;gap:15px}.destination-season .eyebrow{font-size:8px}.destination-season h3{font-size:11px;font-weight:400;margin:4px 0}.destination-season strong{font-size:12px;font-weight:500;text-align:right;line-height:1.5}.season-note{font-size:10px;color:var(--muted);line-height:1.8;margin:10px 0 24px}.story-footer{display:flex;justify-content:space-between;align-items:center;gap:20px;padding-top:15px;border-top:1px solid var(--line)}.story-footer a{font-size:10px;color:var(--muted);text-decoration:none;text-underline-offset:3px}.story-footer a:first-child{color:var(--accent)}.story-footer a:hover{text-decoration:underline}body.drawer-open .map-tools,body.drawer-open .journey-action,body.drawer-open .map-meta,body.drawer-open .credits-trigger{visibility:hidden}.guide{background:#fffdf7;color:var(--ink);border:1px solid var(--line);border-radius:10px;padding:35px 28px;width:min(440px,calc(100% - 40px));max-height:85dvh;overflow:auto;box-shadow:0 20px 60px #303b3330}.guide::backdrop{background:#303b333f}.guide-close{position:absolute;right:10px;top:8px;font:24px var(--serif)}.guide h2{font:28px/1.4 var(--serif);margin:9px 0 22px}.guide p{font-size:12px;line-height:1.9;color:#586653}.guide h3{font-size:12px;font-weight:500;margin:23px 0 5px}.guide a{color:var(--accent);text-decoration:none}.guide .guide-sign{font:italic 20px var(--serif);margin-top:25px}.credit-list{list-style:none;padding:0}.credit-list li{font-size:11px;line-height:1.8;padding:8px 0;border-top:1px solid var(--line)}.credit-list span{color:var(--muted);font-size:10px;display:block}.noscript{position:fixed;inset:0;display:grid;place-items:center;background:var(--paper);z-index:50}@keyframes card-appear{from{opacity:0}to{opacity:1}}@keyframes loading-turn{to{transform:rotate(360deg)}}
@media(min-width:900px){.site-header{top:35px;left:49px;right:46px}.brand-cn{font-size:23px}.brand-en{font-size:10px}.header-note{display:block;margin-left:auto;margin-right:30px}.map-tools{right:40px;bottom:100px}.journey-action{bottom:51px}.random-button{padding:16px 28px;font-size:13px}.map-meta{left:45px;bottom:32px;font-size:9px}.credits-trigger{right:43px;bottom:27px;font-size:8px}.postcard{width:145px;height:185px}.postcard img{left:6px;top:6px;width:133px;height:133px}.postcard-info{top:145px;padding:1px 10px 9px}.card-paper{transform:scaleY(calc((145 + 40 * var(--reveal)) / 185))}.postcard .place-name{font-size:12px}.postcard .place-country{font-size:8px}.toast{bottom:146px}.destination-drawer{width:min(1000px,calc(100% - 100px));left:50%;right:auto;height:min(620px,80dvh);max-height:90dvh;transform:translate(-50%,103%);border-radius:16px 16px 0 0}.destination-drawer.open{transform:translate(-50%,0)}.drawer-handle-zone{height:22px}.drawer-expand{display:none}.drawer-close{right:17px;top:36px;background:#f7f5ef;width:36px;height:36px}.drawer-scroll{display:grid;grid-template-columns:1fr 1fr;overflow:auto;height:calc(100% - 22px)}.destination-photo{height:100%;min-height:530px}.destination-photo figcaption{bottom:29px;left:30px;font-size:18px}.destination-story{padding:38px 36px 28px}.destination-story h2{font-size:35px;margin-top:9px}.destination-description{font-size:13px;margin:25px 0}.destination-reason p{font-size:12px}.destination-drawer.expanded{height:min(620px,80dvh)}}
@media(max-height:730px) and (max-width:899px){.site-header{top:19px}.brand-cn{font-size:19px}.journey-action{bottom:calc(31px + env(safe-area-inset-bottom))}.map-tools{bottom:135px}.toast{bottom:117px}.destination-photo{height:190px}.destination-story{padding-top:20px}}
@media(prefers-reduced-motion:reduce){*,*:before,*:after{animation:none!important;transition:none!important}}
.postcard:not(.shown){opacity:0;pointer-events:none}


.toast{width:1px;height:1px;padding:0;border:0;overflow:hidden;clip-path:inset(50%);white-space:nowrap;box-shadow:none}

.map-meta{left:50%;right:auto;bottom:calc(13px + env(safe-area-inset-bottom));transform:translateX(-50%);justify-content:center;white-space:nowrap;font-size:10px;letter-spacing:.04em}#guide-credits{background:transparent;border-bottom:1px solid var(--muted);padding:4px 0;font-size:12px;color:var(--muted)}

.destination-description{white-space:pre-line}
/* Preserve the complete frame in the reading drawer, including portrait plog covers. */
.destination-photo{height:auto;min-height:0;align-self:start;background:#eeeade}
.destination-photo img{width:100%;height:auto;max-height:none;object-fit:contain}
.destination-photo:after{display:none}
.destination-photo figcaption{position:static;padding:14px 24px;margin:0;color:var(--muted);text-shadow:none;font-size:13px;background:#f4f1e8}
@media(min-width:900px){.drawer-scroll{align-items:start}.destination-photo figcaption{padding:18px 25px;font-size:15px}}
.destination-photo img{max-height:calc(76dvh - 85px);object-fit:contain}
.destination-drawer.expanded .destination-photo img{max-height:calc(94dvh - 85px)}
@media(min-width:900px){.destination-photo img,.destination-drawer.expanded .destination-photo img{max-height:min(520px,calc(80dvh - 85px))}}

/* Map postcards stay compact on touch screens, with text sized independently. */
.map-stage,.pin,.postcard{touch-action:none}
.postcard{width:var(--card-w,122px);height:calc(var(--photo-h,122px) + 40px)}
.postcard img{width:calc(var(--card-w,122px) - 10px);height:calc(var(--photo-h,122px) - 10px)}
.postcard-info{top:var(--photo-h,122px)}
.card-paper{transform:none;bottom:calc(40px * (1 - var(--reveal)))}
@media(min-width:900px){.postcard img{width:calc(var(--card-w,145px) - 12px);height:calc(var(--photo-h,145px) - 12px)}}
@media(max-width:600px){.postcard .place-name{font-size:10px}.postcard-info{padding-left:6px;padding-right:6px}.postcard .place-country{font-size:8px;letter-spacing:0}.postcard .card-surface{filter:drop-shadow(0 3px 5px #2e3a3320)}}
@media(hover:none){.postcard:hover .card-surface{transform:translateY(0) scale(1)}}

/* At the closest view, a small scrollable index keeps every point reachable. */
.viewport-places{position:absolute;z-index:7;top:104px;left:24px;width:260px;max-width:calc(100% - 104px);border:1px solid #bac4b6;border-radius:16px;background:#f7f5eff2;box-shadow:0 8px 28px #2e3a3312;overflow:hidden;animation:viewport-arrive .3s ease-out}
.viewport-places[hidden]{display:none}
.viewport-places header{display:flex;align-items:center;justify-content:space-between;padding:12px 14px 8px;gap:12px}
.viewport-places h2{margin:0;font-size:13px;font-weight:500;letter-spacing:.06em}
#viewport-count{font-size:11px;color:var(--muted);white-space:nowrap;font-variant-numeric:tabular-nums}
#viewport-list{list-style:none;margin:0;padding:0 6px 6px;max-height:min(23dvh,176px);overflow-y:auto;overscroll-behavior:contain;touch-action:pan-y;scrollbar-width:thin}
#viewport-list button{display:flex;align-items:center;gap:10px;width:100%;min-height:48px;padding:5px 8px;border:0;border-radius:9px;background:transparent;color:var(--ink);font:inherit;font-size:12px;text-align:left;cursor:pointer}
#viewport-list button>span{flex:1;min-width:0;overflow-wrap:anywhere}
#viewport-list img{width:34px;height:34px;flex:none;border-radius:5px;object-fit:cover}
#viewport-list button[aria-current],#viewport-list button:hover{background:#e6eadd}
#viewport-list button:focus-visible{outline:2px solid #9a523b;outline-offset:-2px}
#viewport-empty{margin:0;padding:6px 14px 14px;font-size:12px;line-height:1.6;color:var(--muted)}
body.drawer-open .viewport-places{visibility:hidden}
@keyframes viewport-arrive{from{opacity:0;transform:translateY(-7px)}to{opacity:1;transform:translateY(0)}}
@media(max-width:600px){.viewport-places{top:98px;left:16px;width:238px;max-width:calc(100% - 88px)}#viewport-list{max-height:min(21dvh,150px)}}
@media(prefers-reduced-motion:reduce){.viewport-places{animation:none}}

/* Shared selection and hover treatment for the map and its destination index. */
:root{--card-active:#bb541e}
.card-paper{transition:background-color .2s ease,box-shadow .2s ease}
.postcard .place-name,.postcard .place-country{transition:color .2s ease}
.postcard.highlight .card-paper,.postcard:focus-visible .card-paper{background:var(--card-active);box-shadow:none}
.postcard.highlight .place-name,.postcard.highlight .place-country,.postcard:focus-visible .place-name,.postcard:focus-visible .place-country{color:#fff}
#viewport-list button{transition:background-color .2s ease,color .2s ease}
#viewport-list button[aria-current],#viewport-list button:focus-visible{background:var(--card-active);color:#fff}
@media(hover:hover){
 .postcard:hover .card-paper{background:var(--card-active);box-shadow:none}
 .postcard:hover .place-name,.postcard:hover .place-country{color:#fff}
 #viewport-list button:hover{background:var(--card-active);color:#fff}
}
@media(prefers-reduced-motion:reduce){.card-paper,.postcard .place-name,.postcard .place-country,#viewport-list button{transition:none}}

.source-actions{display:flex;flex-wrap:wrap;align-items:center;gap:12px 16px}
.source-actions #copy-source{padding:6px 0;background:transparent;font-size:10px;color:var(--muted);text-align:left}
.source-actions #source-app{color:var(--accent)}
#source-status{margin:10px 0 0;font-size:10px;line-height:1.7;color:var(--muted)}
#source-status:empty{display:none}
#source-copy-field{width:100%;margin-top:8px;padding:10px;border:1px solid var(--line);border-radius:6px;background:var(--paper);color:var(--ink);font-size:12px}
@media(min-width:601px) and (hover:hover) and (pointer:fine){#source-app{display:none}}
@media(max-width:600px){.story-footer{flex-wrap:wrap;gap:12px}.source-actions{flex-basis:100%}}

.story-footer{flex-wrap:wrap}.story-footer #photo-credit{overflow-wrap:anywhere;line-height:1.7}.story-footer #photo-license{flex-basis:100%;font-size:9px}

.city-search{position:absolute;z-index:9;left:50%;bottom:calc(116px + env(safe-area-inset-bottom));width:340px;max-width:calc(100% - 32px);transform:translateX(-50%);font-size:14px}
.city-search-row{display:flex;align-items:center;background:#f7f5eff2;border:1px solid #bac4b6;border-radius:24px;box-shadow:0 5px 20px #2e3a3310}
.city-search input{min-width:0;flex:1;width:100%;border:0;background:transparent;padding:13px 0 13px 16px;font:inherit;font-size:16px;color:var(--ink);outline:none}
.city-search input::placeholder{color:var(--muted)}
.city-search-row:focus-within{outline:2px solid var(--accent);outline-offset:2px}
.city-search-row>button{display:grid;place-items:center;flex:none;width:44px;height:44px;border-radius:50%;background:transparent}
#city-results{margin-top:8px;background:var(--paper);border:1px solid #bac4b6;border-radius:12px;padding:12px;line-height:1.7;max-height:240px;overflow:auto;box-shadow:0 8px 28px #2e3a3315}
#city-results button{display:block;width:100%;text-align:left;background:transparent;padding:10px 4px;font-size:12px;border-radius:6px}
#city-results button:hover,#city-results button:focus-visible{background:var(--card-active);color:white}
.viewport-places{top:104px}
@media(max-width:600px){.viewport-places{top:98px}}

.journey-action .search-toggle{display:grid;place-items:center;pointer-events:auto;flex:none;width:54px;height:54px;border:1px solid #bdc7b4;border-radius:50%;background:#f8f6f0e8;transition:background .2s,transform .2s}
.journey-action .search-toggle:hover,.journey-action .search-toggle[aria-expanded="true"]{background:#e9ede1}
.journey-action .search-toggle:active{transform:scale(.96)}
.city-search[hidden]{display:none}
body.drawer-open .city-search{visibility:hidden}
@media(max-width:600px){.journey-action .search-toggle{width:52px;height:52px}.journey-action{gap:8px}.journey-action .add-place{padding:0 12px}.journey-action .random-button{padding:0 16px;gap:8px}}

.viewport-places header{display:block;padding:0}
#viewport-toggle{display:flex;align-items:center;gap:10px;width:100%;min-height:48px;padding:10px 14px;background:transparent;text-align:left}
#viewport-toggle #viewport-title{flex:1;font-size:13px;font-weight:500;letter-spacing:.06em}
#viewport-toggle svg{width:16px;height:16px;transition:transform .2s ease}
#viewport-toggle[aria-expanded="false"] svg{transform:rotate(180deg)}
.viewport-places.collapsed #viewport-list,.viewport-places.collapsed #viewport-empty{display:none}
#viewport-toggle:focus-visible{outline-offset:-3px;border-radius:14px}

@media(min-width:900px){
 .viewport-places{left:40px;width:340px;border-radius:18px}
 #viewport-toggle{min-height:58px;padding:14px 18px}
 #viewport-toggle #viewport-title{font-size:15px}
 #viewport-count{font-size:12px}
 #viewport-toggle svg{width:18px;height:18px}
 #viewport-list{padding:0 8px 10px;max-height:min(62dvh,640px,calc(100dvh - 240px))}
 #viewport-list button{min-height:64px;padding:8px 10px;gap:12px;font-size:14px;line-height:1.5}
 #viewport-list img{width:46px;height:46px;border-radius:7px}
 #viewport-empty{padding:10px 18px 20px;font-size:14px}
}