@font-face{font-family:Field;src:url('/assets/city-fonts/cormorantgaramond.woff2') format('woff2');font-weight:300 700;font-display:swap}
@font-face{font-family:Deco;src:url('/assets/city-fonts/bodonimoda.woff2') format('woff2');font-weight:400 900;font-display:swap}
@font-face{font-family:Future;src:url('/assets/city-fonts/spacegrotesk.woff2') format('woff2');font-weight:300 700;font-display:swap}
@font-face{font-family:Cinema;src:url('/assets/city-fonts/barlowcondensed.woff2') format('woff2');font-weight:700;font-display:swap}
/* Four covers, four material languages. The collection remains familiar underneath. */
:root{--paper:#f3ecdf;--surface:#fffcf5;--ink:#262d2d;--muted:#62615a;--rose:#a62b30;--rose-dark:#8f2429;--petal:#e9e2d5;--blush:#efc9bf;--line:#d5ccbc;--title:Field,Georgia,serif;--radius:3px;--shadow:none;--hero-ink:var(--ink)}
html{scroll-behavior:smooth;scroll-padding-top:24px}
body{background:radial-gradient(ellipse at 0 20%,#b7855110,transparent 45%),repeating-linear-gradient(90deg,transparent 0 79px,#877c6408 80px),var(--paper)}
.wrap{width:min(1240px,calc(100% - 80px))}
.site-header{height:88px;min-height:88px;border:0;position:relative;z-index:2}
.site-header .brand{font-size:1.25rem;letter-spacing:-.05em}
.site-header .atlas-back{font-size:.8rem;text-transform:uppercase;letter-spacing:.12em}
.trip-header{display:block!important;isolation:isolate;min-height:640px;padding:85px 0 0;margin-bottom:34px;position:relative}
.trip-intro{position:relative;z-index:2;width:65%;pointer-events:none}
.trip-intro .eyebrow{font-family:monospace;font-size:.72rem;letter-spacing:.15em;color:var(--muted)}
.trip-intro h1{font-family:var(--title);font-size:clamp(6rem,13vw,12rem);font-weight:500;line-height:.9;letter-spacing:-.065em;margin:35px 0 26px;color:var(--hero-ink)}
.trip-intro p{display:block;font-size:.9rem;text-transform:uppercase;letter-spacing:.16em;color:var(--muted)}
.hero-glyph{position:absolute;font-family:serif;font-weight:600;font-size:120px;line-height:1;z-index:3;pointer-events:none}
.hero-index{position:absolute;top:10px;left:0;font:11px monospace;letter-spacing:.22em;color:var(--muted)}
.hero-frame{position:absolute;margin:0;right:20px;top:34px;width:43%;height:445px;z-index:0}
.hero-frame img{width:100%;height:100%;object-fit:cover}
.hero-frame figcaption{display:flex;justify-content:space-between;gap:8px;align-items:center;font-size:9px;line-height:1.35;margin-top:12px;color:var(--muted)}
.hero-frame figcaption a{max-width:50%;text-align:right;text-underline-offset:3px;min-height:44px;display:inline-flex;align-items:center}
.hero-invitation{position:relative;z-index:3;display:flex;flex-direction:column;align-items:flex-start;gap:22px;margin-top:45px;max-width:48%;color:var(--hero-ink)}
.hero-invitation>span{font-family:var(--title);font-size:1.8rem;line-height:1.2}
.explore-link{display:inline-flex;align-items:center;gap:30px;min-height:48px;font-size:.75rem;font-weight:800;text-decoration:none;border-bottom:1px solid currentColor;text-transform:uppercase;letter-spacing:.09em}
.explore-link span{font-size:1.5rem;font-weight:400}
.trip-progress{position:relative;z-index:3;padding:22px 0 18px;margin-top:74px;border-top:1px solid var(--line);font-size:.8rem}
progress,progress::-webkit-progress-bar{background:var(--line)}
progress::-webkit-progress-value{background:var(--rose)}
progress::-moz-progress-bar{background:var(--rose)}
.offline{margin-top:0;margin-bottom:32px;font-size:.8rem}
.offline h2{font-size:.9rem}.offline p{font-size:.8rem;max-width:640px}
.filter-section{padding-top:20px;scroll-margin-top:20px}
#search,.reach-select select,.sort-select select,.category-select select{background:var(--surface);border-radius:var(--radius);color:var(--ink)}
#search::placeholder{color:var(--muted)}
.button,.chip,.filter,.map-btn,.details-btn,.state-picker,.state-btn{border-radius:var(--radius)}
.button,.button-quiet,.details-btn,.map-btn,.icon-button{background:var(--surface);color:var(--ink);border-color:var(--line)}
.button-primary,.chip[aria-pressed=true]{background:var(--rose);color:var(--paper);border-color:var(--rose)}
.state-filters{background:var(--petal);border-radius:var(--radius);border:1px solid var(--line)}
.filter.active{background:var(--surface);color:var(--ink)}
.chip{font-size:.8rem}.state-picker{background:var(--petal)}
.state-btn[aria-pressed=true]{background:var(--surface);color:var(--ink);border-color:var(--line)}
.state-btn[data-state=visited][aria-pressed=true]{background:#e7efdf;color:#405b3c;border-color:#bdcbb2}
.state-btn[data-state=skip][aria-pressed=true]{background:#e9e4e4;color:#61565d;border-color:#ccc}
.list-heading{margin-block:45px 22px;padding-top:22px;border-top:1px solid var(--line)}
.list-heading h2{font-family:var(--title);font-weight:500;font-size:2rem}
.grid{gap:28px}
.card{background:var(--surface);border-color:var(--line);overflow:hidden}
.card h3{font-family:var(--title);font-size:1.85rem;font-weight:600;letter-spacing:-.035em}
.card p{color:var(--muted);font-size:.92rem}
.card .name-zh{color:var(--rose);font-size:1rem}
.card-photo{transition:filter .3s;aspect-ratio:4/3}
.card[data-state=visited]{background:var(--surface);border-color:#829879}
.card[data-state=skip]{background:var(--petal)}
.card[data-state=skip] h3{color:var(--muted)}
.card[data-state=skip] .map-btn{background:var(--surface)}
.memories{background:var(--petal);border-radius:var(--radius)}
.report-group,.memory-photos figure,.driver{background:var(--surface);border-radius:var(--radius)}
.report-category-list li{background:var(--surface);color:var(--ink)}
.report-heading h2,#detailTitle{font-family:var(--title);font-size:2.4rem}
.report-group li{border-color:var(--line)}
.find-place{background:var(--rose);color:var(--paper);border-color:var(--rose);border-radius:var(--radius)}
dialog{background:var(--paper);border-radius:max(4px,var(--radius))}
.sync-dialog input,#reportText{background:var(--surface);color:var(--ink)}
.empty{background:var(--petal);border-color:var(--line)}
@media(hover:hover){.button:hover,.chip:hover,.map-btn:hover,.state-btn:hover{background:var(--petal);border-color:var(--rose);color:var(--ink)}.explore-link:hover{gap:42px}.card:hover{box-shadow:0 12px 30px #00000012}.card:hover .card-photo{filter:saturate(1.12)}}
/* TOKYO — paper, a vermilion sun, a photograph tucked into a travel journal. */
[data-edition=tokyo] .hero-orbit{position:absolute;width:340px;height:340px;border-radius:50%;background:#bd3335;top:20px;left:24%;z-index:-1;box-shadow:inset 0 0 80px #72252933}
[data-edition=tokyo] .hero-glyph{right:0;top:90px;writing-mode:vertical-rl;font-size:110px;color:#fff8e6;text-shadow:0 2px 20px #0005}
[data-edition=tokyo] .hero-frame{transform:rotate(4deg);border:12px solid #fffcf5;box-shadow:10px 20px 0 #c9bda333;height:390px;top:70px;right:32px}
[data-edition=tokyo] .hero-frame figcaption{margin-top:18px;transform:rotate(-4deg);color:var(--ink)}
[data-edition=tokyo] .hero-invitation>span{font-style:italic}
[data-edition=tokyo] .card{border:0;border-bottom:2px solid var(--line);background:transparent;padding:0 0 20px;overflow:visible}
[data-edition=tokyo] .card-photo{width:100%;margin:0 0 18px;border:7px solid #fffdf7;box-shadow:0 3px 8px #55473312;border-radius:0}
[data-edition=tokyo] .card h3{font-size:2rem}
/* SHANGHAI — a nocturnal salon, an architectural arch, gilded double rules. */
:is([data-edition=shanghai],[data-edition=china]){--paper:#111f23;--surface:#192b30;--petal:#20363a;--ink:#f5ead6;--muted:#bdbba9;--rose:#ebc780;--rose-dark:#ebc780;--line:#496060;--blush:#304c4b;--title:Deco,Georgia,serif;--radius:2px;color-scheme:dark}
:is([data-edition=shanghai],[data-edition=china]) body{background:radial-gradient(ellipse at 80% 0,#2d66603b,transparent 40%),repeating-linear-gradient(90deg,transparent 0 159px,#bfa77408 160px),var(--paper)}
:is([data-edition=shanghai],[data-edition=china]) .trip-header{min-height:715px;padding-top:116px}
:is([data-edition=shanghai],[data-edition=china]) .trip-intro{width:77%}
:is([data-edition=shanghai],[data-edition=china]) .trip-intro h1{font-size:clamp(5rem,11vw,10.8rem);font-weight:400;letter-spacing:-.07em;text-shadow:0 3px 30px #0008}
:is([data-edition=shanghai],[data-edition=china]) .hero-frame{height:520px;top:20px;right:0;width:48%;padding:12px;border:1px solid #bfa774;border-radius:48% 48% 0 0}
:is([data-edition=shanghai],[data-edition=china]) .hero-frame img{border-radius:48% 48% 0 0;filter:brightness(.85);object-position:48% center}
:is([data-edition=shanghai],[data-edition=china]) .hero-frame:before{content:'';position:absolute;inset:-10px;border:1px solid #bfa77455;border-radius:48% 48% 0 0}
:is([data-edition=shanghai],[data-edition=china]) .hero-glyph{right:30px;top:75px;color:#ebc780;font-size:60px;writing-mode:vertical-rl;text-shadow:0 2px 10px black}
:is([data-edition=shanghai],[data-edition=china]) .hero-invitation{margin-top:60px}
:is([data-edition=shanghai],[data-edition=china]) .card{border:1px solid #677365;padding:24px}
:is([data-edition=shanghai],[data-edition=china]) .card-photo{width:100%;margin:0 0 24px;border-radius:45% 45% 0 0;aspect-ratio:1.2;max-width:100%}
:is([data-edition=shanghai],[data-edition=china]) .list-heading{border-top:3px double #7e805f}
:is([data-edition=shanghai],[data-edition=china]) .card h3{font-size:1.7rem;color:#f2ddb6}
:is([data-edition=shanghai],[data-edition=china]) .rating{color:#eccb88}
/* SHENZHEN — oversized type, acid green, engineering lines, a vertical city. */
[data-edition=shenzhen]{--paper:#e8eedf;--surface:#f5f8ee;--ink:#15251e;--muted:#4b5e50;--rose:#24593b;--rose-dark:#24593b;--petal:#d9e3d0;--line:#aabca5;--blush:#d3fa5a;--title:Future,Arial,sans-serif;--radius:0px;font-family:Future,Arial,sans-serif}
[data-edition=shenzhen] body{background-image:linear-gradient(#63866e12 1px,transparent 1px),linear-gradient(90deg,#63866e12 1px,transparent 1px);background-size:64px 64px}
[data-edition=shenzhen] .trip-header{min-height:665px;padding-top:92px}
[data-edition=shenzhen] .trip-intro{width:85%}
[data-edition=shenzhen] .trip-intro h1{font-size:clamp(5rem,12.5vw,12rem);text-transform:uppercase;font-weight:700;letter-spacing:-.085em;line-height:1.03;margin-left:-8px;text-shadow:3px 3px var(--paper)}
[data-edition=shenzhen] .hero-frame{right:0;top:0;width:35%;height:520px;border:1px solid #172f24;background:#cbf65b}
[data-edition=shenzhen] .hero-frame img{mix-blend-mode:multiply;filter:grayscale(1);object-position:center 25%}
[data-edition=shenzhen] .hero-glyph{right:30px;top:40px;font-family:monospace;font-size:70px;color:#d3fa5a;background:#172f24;padding:8px}
[data-edition=shenzhen] .hero-orbit{position:absolute;width:520px;height:520px;top:0;right:12%;border:1px solid #6c8c6455;border-radius:50%;z-index:-1}
[data-edition=shenzhen] .hero-orbit:before{content:'';position:absolute;inset:45px;border:1px solid #6c8c6433;border-radius:50%}
[data-edition=shenzhen] .hero-invitation>span{font-size:1.2rem;max-width:230px;font-weight:600}
[data-edition=shenzhen] .explore-link{background:#d3fa5a;padding:12px 22px;border:1px solid #172f24;box-shadow:4px 4px #172f24}
[data-edition=shenzhen] .trip-progress{margin-top:110px}
[data-edition=shenzhen] .card{border:1px solid #263d2f;box-shadow:5px 5px #b4c2a8}
[data-edition=shenzhen] .card h3{font-size:1.5rem;letter-spacing:-.06em}
[data-edition=shenzhen] .card-photo{filter:contrast(1.06);aspect-ratio:16/10}
[data-edition=shenzhen] .list-heading h2{text-transform:uppercase;font-size:1.6rem;font-weight:700}
[data-edition=shenzhen] .category-badge{border-radius:0}
/* HONG KONG — a widescreen night scene, neon signage, rolling film frames. */
[data-edition=hong-kong]{--paper:#15101d;--surface:#241b2c;--ink:#fff0ec;--muted:#c6b4c7;--rose:#f8a4bd;--rose-dark:#f8a4bd;--petal:#30243a;--line:#58405e;--blush:#5c294d;--title:Cinema,Impact,sans-serif;--radius:10px;color-scheme:dark}
[data-edition=hong-kong] body{background:radial-gradient(ellipse at 0 4%,#73284155,transparent 25%),radial-gradient(ellipse at 100% 40%,#11545f22,transparent 40%),var(--paper)}
[data-edition=hong-kong] .site-header{color:white}
[data-edition=hong-kong] .trip-header{min-height:700px;padding-top:100px}
[data-edition=hong-kong] .hero-landscape{position:absolute;inset:-88px calc((min(1240px,100vw - 80px) - 100vw)/2) 75px;z-index:-2;background:linear-gradient(90deg,#15101de6 0%,#15101d44 80%),linear-gradient(0deg,#15101d,transparent 60%),var(--city-photo) center/cover}
[data-edition=hong-kong] .hero-landscape:after{content:'';position:absolute;inset:0;background:repeating-linear-gradient(0deg,transparent 0 3px,#00000015 4px);pointer-events:none}
[data-edition=hong-kong] .trip-intro{width:75%}
[data-edition=hong-kong] .trip-intro h1{font-size:clamp(7rem,15vw,15rem);text-transform:uppercase;font-weight:700;letter-spacing:-.035em;color:#fff1df;text-shadow:4px 4px #c83e6480;line-height:.9;max-width:740px}
[data-edition=hong-kong] .trip-intro p{color:#f4dbdf;max-width:350px;line-height:1.8}
[data-edition=hong-kong] .trip-intro .eyebrow{color:#f4dbdf}
[data-edition=hong-kong] .hero-glyph{right:0;top:70px;writing-mode:vertical-rl;color:#ffe2f0;font-size:115px;text-shadow:0 0 4px #ff3991,0 0 24px #ff3991,3px 3px #a02861;border:2px solid #dc608c;padding:20px 6px;box-shadow:0 0 18px #ff399144,inset 0 0 18px #ff399133;transform:rotate(3deg)}
[data-edition=hong-kong] .hero-frame{inset:auto 0 90px auto;width:240px;height:auto}
[data-edition=hong-kong] .hero-frame img{display:none}
[data-edition=hong-kong] .hero-frame figcaption{display:block;text-align:right;color:#d4c4d6}
[data-edition=hong-kong] .hero-frame figcaption a{max-width:100%}
[data-edition=hong-kong] .hero-invitation{margin-top:32px}
[data-edition=hong-kong] .hero-invitation>span{text-transform:uppercase;font-size:2rem;color:#a9eee8}
[data-edition=hong-kong] .trip-progress{margin-top:60px}
[data-edition=hong-kong] .grid{gap:30px 22px}
[data-edition=hong-kong] .card{border-color:#68485d;background:linear-gradient(150deg,#342039,var(--surface) 50%)}
[data-edition=hong-kong] .card-photo{aspect-ratio:16/9;border-bottom:3px solid #df618d}
[data-edition=hong-kong] .card h3{font-size:2rem;text-transform:uppercase;font-weight:700;letter-spacing:0}
[data-edition=hong-kong] .list-heading h2{font-size:2.5rem;text-transform:uppercase}
[data-edition=hong-kong] .rating{color:#f1cb82}
@media(min-width:1001px){[data-edition=tokyo] .grid{column-gap:38px}[data-edition=tokyo] .card:nth-child(3n+2){transform:translateY(20px)}}
@media(max-width:1000px){.wrap{width:calc(100% - 48px)}.trip-intro h1{font-size:6.5rem}.hero-frame{width:45%}.hero-glyph{font-size:80px}[data-edition=hong-kong] .hero-landscape{left:-24px;right:-24px}.hero-frame figcaption{flex-direction:column;align-items:flex-start}.hero-frame figcaption a{max-width:100%;text-align:left}.trip-intro p{max-width:320px;line-height:1.7}}
@media(max-width:600px){
 .wrap{width:calc(100% - 36px)}.site-header{height:72px;min-height:72px}.site-header .brand{font-size:1.1rem}.site-header .atlas-back{font-size:.65rem;letter-spacing:.08em}
 .trip-header{min-height:730px;padding-top:38px!important;margin-bottom:10px}.hero-index{top:0;font-size:9px}.trip-intro{width:100%!important}.trip-intro .eyebrow{font-size:.62rem;letter-spacing:.08em}
 .trip-intro h1{font-size:6rem!important;margin:20px 0 16px;line-height:.95}.trip-intro p{display:block!important;font-size:.65rem;letter-spacing:.1em;max-width:250px}
 .hero-frame{width:75%;height:285px;top:232px;right:20px}.hero-frame figcaption{font-size:8px;gap:0;margin-top:8px}.hero-frame figcaption a{min-height:44px}
 .hero-glyph{z-index:2}.hero-invitation{margin-top:385px;max-width:100%;gap:8px}.hero-invitation>span{font-size:1.5rem}.explore-link{min-height:44px;font-size:.65rem;gap:24px}
 .trip-progress{margin-top:28px!important;padding-block:18px;gap:7px;font-size:.73rem}.progress-caption{font-size:.65rem}.progress-total{display:none}
 .offline{padding-block:20px;margin-bottom:12px}.offline-actions{min-width:0;width:100%}.offline-actions .button{width:100%}.offline p{font-size:.78rem}.search-row{gap:12px}.filter-section{padding-top:20px}
 .list-heading{margin-top:26px}.list-heading h2{font-size:1.65rem}.grid{gap:24px}.card{padding:19px}.card h3{font-size:1.75rem}.card-photo{width:calc(100% + 38px);border-radius:var(--radius) var(--radius) 0 0}
 [data-edition=tokyo] .hero-orbit{width:230px;height:230px;top:170px;left:-35px}
 [data-edition=tokyo] .hero-frame{top:220px;right:16px;width:78%;height:290px;border-width:8px;transform:rotate(5deg)}
 [data-edition=tokyo] .hero-glyph{top:254px;right:18px;font-size:72px}
 [data-edition=tokyo] .hero-frame figcaption{margin-top:14px}
 [data-edition=tokyo] .card-photo{width:100%;margin:0 0 18px}
 :is([data-edition=shanghai],[data-edition=china]) .trip-header{min-height:860px}
 :is([data-edition=shanghai],[data-edition=china]) .trip-intro h1{font-size:clamp(3.8rem,17vw,6rem)!important;margin-block:25px 15px}
 :is([data-edition=shanghai],[data-edition=china]) .hero-frame{top:230px;right:12%;width:76%;height:350px;padding:8px}
 :is([data-edition=shanghai],[data-edition=china]) .hero-frame figcaption{margin-top:15px}
 :is([data-edition=shanghai],[data-edition=china]) .hero-glyph{top:280px;right:20%;font-size:45px}
 :is([data-edition=shanghai],[data-edition=china]) .hero-invitation{margin-top:485px}
 :is([data-edition=shanghai],[data-edition=china]) .card-photo{width:100%;margin:0 0 20px}
 [data-edition=shenzhen] .trip-header{min-height:810px}
 [data-edition=shenzhen] .trip-intro h1{font-size:clamp(3.8rem,17.2vw,6rem)!important;margin-left:-3px;margin-top:28px;letter-spacing:-.075em}
 [data-edition=shenzhen] .hero-frame{top:228px;right:0;width:64%;height:340px}
 [data-edition=shenzhen] .hero-glyph{top:260px;left:0;right:auto;writing-mode:vertical-rl;font-size:55px;padding:14px}
 [data-edition=shenzhen] .hero-orbit{width:290px;height:290px;top:260px;left:0}
 [data-edition=shenzhen] .hero-invitation{margin-top:455px}.hero-invitation .explore-link{box-shadow:none}
 [data-edition=shenzhen] .hero-invitation>span{max-width:none;font-size:1.1rem}
 [data-edition=hong-kong] .trip-header{min-height:690px}
 [data-edition=hong-kong] .hero-landscape{inset:-72px -18px 72px;background-position:60% center}
 [data-edition=hong-kong] .trip-intro h1{font-size:7.2rem!important;max-width:240px;line-height:.87;margin-block:65px 20px}
 [data-edition=hong-kong] .trip-intro p{max-width:210px}
 [data-edition=hong-kong] .hero-glyph{top:106px;right:0;font-size:61px;padding:14px 3px}
 [data-edition=hong-kong] .hero-invitation{margin-top:48px;max-width:100%}
 [data-edition=hong-kong] .hero-invitation>span{font-size:1.75rem}
 [data-edition=hong-kong] .hero-frame{position:relative;inset:auto;width:100%;height:0;top:460px}
 [data-edition=hong-kong] .hero-frame figcaption{font-size:8px;text-align:right;display:block}
 [data-edition=hong-kong] .trip-progress{margin-top:90px!important}
 [data-edition=hong-kong] .list-heading h2{font-size:2rem}
}
@media(prefers-reduced-motion:no-preference){.hero-frame{animation:cover-reveal .8s ease both}.trip-intro{animation:type-reveal .65s ease both}.hero-invitation{animation:type-reveal .8s ease both}@keyframes cover-reveal{from{opacity:0;translate:0 15px}to{opacity:1;translate:0 0}}@keyframes type-reveal{from{opacity:0;translate:0 8px}to{opacity:1;translate:0 0}}}
/* Final optical adjustments and contrast on the night editions. */
.explore-link .icon{width:24px;height:24px;stroke-width:1.5}
:is([data-edition=shanghai],[data-edition=china],[data-edition=hong-kong]) .distance-note{color:#dcc5a1}
:is([data-edition=shanghai],[data-edition=china],[data-edition=hong-kong]) .location-status{color:#bedcbd}
:is([data-edition=shanghai],[data-edition=china],[data-edition=hong-kong]) .location-status.location-error{color:#ffb7c6}
@media(max-width:600px){
 [data-edition=tokyo] .hero-orbit{top:218px}
 :is([data-edition=shanghai],[data-edition=china]) .hero-frame figcaption{margin-top:22px}
 [data-edition=hong-kong] .hero-frame figcaption span{display:block}
 [data-edition=hong-kong] .hero-frame{top:478px}
}
@media(max-width:359px){
 .trip-intro h1{font-size:5.5rem!important}
 [data-edition=hong-kong] .trip-intro h1{font-size:6.3rem!important;max-width:210px}
 [data-edition=hong-kong] .hero-glyph{font-size:45px;right:0}
 [data-edition=tokyo] .hero-invitation{margin-top:395px}
 .list-heading{align-items:flex-start}.list-heading h2{max-width:65%}
}
.card{border-radius:var(--radius)}
[data-edition=tokyo] .trip-intro h1{color:#141616}
[data-edition=tokyo] .hero-orbit{background:#c73f3f;box-shadow:none}
.hero-frame figcaption{font-size:10px}
@media(max-width:600px){.hero-frame figcaption,[data-edition=hong-kong] .hero-frame figcaption{font-size:9px}}