/* English typography is sized for words and reading lines, not CJK glyphs. */
.language-switch{display:inline-flex;align-items:center;justify-content:center;flex:0 0 auto;min-width:54px;min-height:44px;padding:8px 13px;border:1px solid #95733b70;border-radius:24px;background:#fff8e5d9;color:#4b5143;font:600 12px/1.2 "Segoe UI",Arial,sans-serif;letter-spacing:.04em;cursor:pointer;white-space:nowrap;touch-action:manipulation}
.language-switch:hover{background:#fff5d6;border-color:#8c713f}.language-switch:focus-visible{outline:2px solid #2f6973;outline-offset:4px}
.dialog-language-toolbar{display:flex;justify-content:flex-end;margin:0 36px 12px 0}.chapter-header>.language-switch{margin-left:auto;flex-shrink:0}
.site-header.has-language-switch,.header.has-language-switch{gap:14px}.site-header.has-language-switch>.lite-switch-note{right:70px}
.language-toolbar{display:flex;justify-content:flex-end;max-width:1100px;margin:0 auto;padding:16px 22px 0}.locale-announcement{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap}
.cinema-header>.language-switch{margin-left:4px;min-height:36px;min-width:48px;padding:6px 11px;color:inherit;background:#f7edda1c;border-color:currentColor}
html[lang=en]{--sans:"Segoe UI",Arial,Helvetica,sans-serif;--serif:Georgia,"Times New Roman",serif}
html[lang=en] body{font-family:var(--sans);word-break:normal;overflow-wrap:break-word}
html[lang=en] button,html[lang=en] input,html[lang=en] select,html[lang=en] textarea{font-family:var(--sans)}
html[lang=en] .scroll-title h1{font-family:var(--serif);font-size:clamp(44px,4.7vw,76px);line-height:1.08;letter-spacing:-.045em;max-width:8.3em;text-wrap:balance}
html[lang=en] .title-comma{display:none}html[lang=en] .title-line{display:block}
html[lang=en] .journey-title-note{letter-spacing:.045em;line-height:1.7;max-width:34em;font-size:11px}
html[lang=en] .journey-launch-heading{font-size:clamp(19px,1.5vw,24px);line-height:1.25;letter-spacing:-.025em;max-width:90%;overflow-wrap:normal}
html[lang=en] .journey-launch-description{line-height:1.55;font-size:12px;letter-spacing:0}
html[lang=en] .journey-launch-actions{gap:10px;flex-wrap:wrap}html[lang=en] .journey-launch-actions button{font-size:12px;letter-spacing:0}
html[lang=en] .journey-period-title{font:16px/1.25 var(--serif);letter-spacing:0;text-wrap:balance}html[lang=en] .journey-period{min-width:0}
html[lang=en] .journey-launch-eyebrow,html[lang=en] .journey-title-kicker{letter-spacing:.09em}
html[lang=en] .scroll-poem{letter-spacing:.04em;line-height:1.8;max-width:230px}
html[lang=en] .site-header nav{gap:18px}html[lang=en] .site-header button,html[lang=en] .lite-switch{letter-spacing:0}
html[lang=en] .site-header>.lite-switch-note{font-size:10px;letter-spacing:0;max-width:300px;white-space:normal}
html[lang=en] .place-card strong{font-size:19px;line-height:1.3;letter-spacing:0}html[lang=en] .place-card>span{line-height:1.6;letter-spacing:0}
html[lang=en] .story-panel{font-family:var(--sans)}html[lang=en] .story-heading{font:clamp(25px,2.3vw,36px)/1.2 var(--serif);letter-spacing:-.025em;text-wrap:balance}
html[lang=en] .story-narrative,html[lang=en] .story-panel p,html[lang=en] .evidence-text{line-height:1.75;letter-spacing:0}
html[lang=en] .match-card,html[lang=en] .evidence-card{line-height:1.55;letter-spacing:0;white-space:normal;overflow-wrap:break-word}
html[lang=en] .story-directory h3{font-family:var(--serif);font-size:23px;letter-spacing:0;line-height:1.3}
html[lang=en] .story-stops{flex-wrap:wrap}html[lang=en] .story-stop{white-space:normal;line-height:1.45}
html[lang=en] .travel-caption strong{max-width:min(70vw,1050px);font:clamp(30px,3.8vw,62px)/1.1 var(--serif);letter-spacing:-.035em;text-wrap:balance;overflow-wrap:normal}
html[lang=en] .travel-caption>span,html[lang=en] .travel-caption>small{letter-spacing:.08em;line-height:1.6}
html[lang=en] .sea-travel-meta,html[lang=en] .sea-travel-track,html[lang=en] .sea-trip,html[lang=en] .journey-departure{letter-spacing:0}
html[lang=en] .trip-ends strong{font:16px/1.3 var(--serif);max-width:45%;overflow-wrap:break-word}html[lang=en] .trip-ends{gap:20px}
html[lang=en] .journey-departure strong{font-size:clamp(25px,3.5vw,52px);line-height:1.15;letter-spacing:-.02em;max-width:16em}
html[lang=en] .cinema-header{gap:16px;flex-wrap:nowrap}html[lang=en] .cinema-brand{font-size:13px;letter-spacing:.05em;white-space:nowrap}
html[lang=en] .cinema-header>div:not(.journey-stage-label){margin-left:auto}html[lang=en] .journey-stage-label{font-size:9px;letter-spacing:.08em}
html[lang=en] #cinema-title{font:clamp(31px,4.1vw,66px)/1.08 var(--serif);letter-spacing:-.035em;overflow-wrap:normal;text-wrap:balance;max-width:12em}
html[lang=en] #cinema-place{font-size:16px;line-height:1.5;letter-spacing:0;max-width:30em}html[lang=en] #cinema-opening{font-size:15px;line-height:1.65;letter-spacing:0;max-width:37em}
html[lang=en] .cinema-fiction{line-height:1.6;letter-spacing:.04em}html[lang=en] .cinema-footer{font-size:10px;letter-spacing:0}
html[lang=en] #cinema-chapters{flex-wrap:wrap}html[lang=en] #cinema-places button{white-space:normal;text-align:center;max-width:220px}
html[lang=en] .about-dialog h2,html[lang=en] .story-intro h2{font-family:var(--serif);letter-spacing:-.025em;line-height:1.2}html[lang=en] .about-details p{font-size:13px;line-height:1.75}
html[lang=en] .brand-name{font:600 15px/1.2 var(--serif);letter-spacing:0;max-width:170px}html[lang=en] .brand-name>span{font:8px/1.6 var(--sans);letter-spacing:.08em}
html[lang=en] .brand-city{font-size:10px;letter-spacing:0;max-width:75px;line-height:1.5}
html[lang=en] .intro h1{font:clamp(34px,4.2vw,68px)/1.12 var(--serif);letter-spacing:-.04em;text-wrap:balance}
html[lang=en] .intro-description{font-size:15px;line-height:1.75}html[lang=en] .theme-tabs button{letter-spacing:0;font-size:12px}
html[lang=en] .detail-copy h2{font-family:var(--serif);font-size:29px;line-height:1.15;letter-spacing:-.02em}html[lang=en] .detail-story{line-height:1.8;font-size:14px}
html[lang=en] .map-marker strong,html[lang=en] .map-marker span{letter-spacing:0}html[lang=en] .map-corner-label strong{font:24px/1.2 var(--serif);max-width:170px}
html[lang=en] .route-card h3{font:25px/1.2 var(--serif);letter-spacing:-.02em}html[lang=en] .footer-name{letter-spacing:0}
html[lang=en] .chapter-story h2{font:36px/1.15 var(--serif);letter-spacing:-.025em}html[lang=en] .chapter-lead{font-size:19px;line-height:1.6;letter-spacing:0}
html[lang=en] .object-caption strong{font-size:23px;line-height:1.25;letter-spacing:0}html[lang=en] .story-text{font-size:14px;line-height:1.8}
html[lang=en] .sources table,html[lang=en] table{overflow-wrap:anywhere}html[lang=en] th,html[lang=en] td{line-height:1.6}
@media(max-width:900px){
 .site-header.has-language-switch,.header.has-language-switch{gap:8px}.site-header.has-language-switch>.lite-switch{padding:0 12px}
 html[lang=en] .cinema-brand{display:none}html[lang=en] .journey-stage-label{position:static;transform:none;max-width:180px;white-space:normal;text-align:center}
 html[lang=en] .cinema-header{gap:8px}html[lang=en] .cinema-header>.language-switch{order:5}
 html[lang=en] .header.has-language-switch{flex-wrap:wrap}html[lang=en] .header .brand{margin-right:auto}
}
@media(max-width:600px){
 .language-switch{min-width:48px;padding:7px 10px;font-size:11px}.site-header.has-language-switch{right:16px;left:16px;width:auto;gap:7px}.site-header.has-language-switch>.brand{margin-right:auto}
 .site-header.has-language-switch>.lite-switch-note{right:55px;font-size:9px;max-width:230px}
 html[lang=en] .site-header nav{gap:8px}html[lang=en] .site-header>.lite-switch{font-size:11px;min-height:40px;padding:0 10px}
 html[lang=en] .scroll-title h1{font-size:clamp(39px,11.3vw,58px);max-width:8em;line-height:1.04}
 html[lang=en] .journey-title-note{font-size:9px;max-width:29em;line-height:1.7;letter-spacing:.015em}
 html[lang=en] .journey-launch-heading{font-size:20px;max-width:85%}html[lang=en] .journey-launch-description{font-size:11px;line-height:1.5}
 html[lang=en] .journey-launch-actions button{font-size:11px;min-height:36px}html[lang=en] .journey-period-title{font-size:12px;line-height:1.2}
 html[lang=en] .journey-period{padding:8px 6px}html[lang=en] .journey-period-years{font-size:9px}
 html[lang=en] .travel-caption strong{font-size:clamp(27px,7.6vw,38px);max-width:100%;line-height:1.1}
 html[lang=en] .travel-caption>small{font-size:9px;max-width:100%;letter-spacing:.01em}html[lang=en] .travel-caption>span{font-size:10px;letter-spacing:.035em}
 html[lang=en] .trip-ends strong{font-size:12px;line-height:1.35}html[lang=en] .sea-trip-note{font-size:8px;letter-spacing:0}
 html[lang=en] .cinema-header{padding:12px 16px;gap:7px;flex-wrap:wrap;height:auto;min-height:68px;align-content:center}
 html[lang=en] .cinema-header>button:first-child{font-size:11px;letter-spacing:0;min-height:36px}html[lang=en] .cinema-header>div:not(.journey-stage-label){margin-left:auto;font-size:11px}
 html[lang=en] .cinema-header .journey-stage-label{order:6;flex-basis:100%;max-width:none;text-align:left;font-size:8px;line-height:1.5;white-space:normal}
 html[lang=en] #cinema-title{font-size:clamp(31px,9.1vw,40px);max-width:100%;line-height:1.08}
 html[lang=en] #cinema-place{font-size:14px}html[lang=en] #cinema-opening{font-size:14px;line-height:1.7}
 html[lang=en] .cinema-fiction{font-size:9px;letter-spacing:0}html[lang=en] .cinema-photo-note{font-size:9px;line-height:1.5}
 html[lang=en] .cinema-footer{gap:8px}html[lang=en] #cinema-places button{max-width:125px;font-size:10px;line-height:1.35}
 html[lang=en] .mission-match{gap:8px}html[lang=en] .match-card{font-size:12px;padding:12px 9px;line-height:1.55}
 html[lang=en] .story-panel p{font-size:14px}html[lang=en] .story-stops button{font-size:11px;flex:1 1 120px}
 .header.has-language-switch{flex-wrap:wrap}.header.has-language-switch .language-switch{margin-left:0}.header.has-language-switch .original-switch{margin-left:auto}
 html[lang=en] .header .brand-city{display:none}html[lang=en] .header .brand-name{max-width:145px;font-size:14px}
 html[lang=en] .header nav{order:4;flex-basis:100%;justify-content:space-between;gap:8px;font-size:11px}
 html[lang=en] .header .collection-button{order:5}html[lang=en] .header .original-switch{font-size:10px;padding:8px 11px}
 html[lang=en] .intro h1{font-size:39px;line-height:1.12}html[lang=en] .intro-description{font-size:13px;line-height:1.8}
 html[lang=en] .catalog-intro{font-size:11px;line-height:1.7}html[lang=en] .region-tabs{flex-wrap:wrap;gap:4px}
 html[lang=en] .region-tabs button{white-space:normal;font-size:10px;padding:7px 9px}html[lang=en] .theme-tabs button{font-size:10px;padding:8px 10px}
 html[lang=en] .map-corner-label strong{font-size:20px;max-width:125px}html[lang=en] .detail-copy h2{font-size:27px}
 html[lang=en] .sound-copy h2{font:29px/1.2 var(--serif);letter-spacing:-.02em}html[lang=en] .section-heading h2{font:30px/1.2 var(--serif);letter-spacing:-.02em}
 html[lang=en] .chapter-header{height:auto;min-height:65px;padding:14px 18px;flex-wrap:wrap}html[lang=en] .chapter-wordmark{font-size:18px;letter-spacing:0}
 html[lang=en] .chapter-header-caption{font-size:9px;letter-spacing:0}html[lang=en] .chapter-story h2{font-size:29px}
 html[lang=en] .about-dialog{padding:32px 22px}html[lang=en] .about-dialog h2{font-size:28px}html[lang=en] .about-bottom{flex-wrap:wrap;line-height:1.7}
}
/* Match the established selectors' specificity; let English content set its height. */
html[lang=en] .letter-atlas .scroll-title h1 .title-comma{display:none}
html[lang=en] .journey-launch-heading{max-width:calc(100% - 66px);text-wrap:balance}
html[lang=en] .journey-itinerary:before{content:'CITY JOURNEY / 1880 — TODAY';letter-spacing:1px}
html[lang=en] #chapter-cinema:not(.place-cinema) .cinema-hero:before{content:'CITY JOURNEY';letter-spacing:1px}
html[lang=en] #chapter-cinema[open]{display:grid;grid-template-rows:auto minmax(0,1fr) auto}
html[lang=en] #chapter-cinema .cinema-header{height:auto;min-height:76px;box-sizing:border-box}
html[lang=en] #chapter-cinema .cinema-layout{height:auto;min-height:0}
html[lang=en] #chapter-cinema #cinema-title{font:400 clamp(32px,3.5vw,60px)/1.12 Georgia,serif;letter-spacing:-.025em;text-wrap:balance;overflow-wrap:normal;margin:0 0 18px}
html[lang=en] #chapter-cinema #cinema-place{font:15px/1.5 'Segoe UI',sans-serif;letter-spacing:0;max-width:32em}
html[lang=en] #chapter-cinema #cinema-opening{font:15px/1.7 'Segoe UI',sans-serif;letter-spacing:0;max-width:36em}
html[lang=en] #chapter-cinema .cinema-footer{height:auto;min-height:100px;padding-block:12px;align-items:center;box-sizing:border-box}
html[lang=en] #chapter-cinema .cinema-photo-note{max-height:94px;max-width:40%;overflow:auto;overscroll-behavior:contain;font:10px/1.55 'Segoe UI',sans-serif;scrollbar-width:thin}
html[lang=en] #chapter-cinema #cinema-places{gap:10px;min-width:0}
html[lang=en] #chapter-cinema #cinema-places button small{white-space:normal;line-height:1.4}
html[lang=en] .story-scene-title{letter-spacing:-.02em;line-height:1.25;font-family:Georgia,serif;text-wrap:balance}
html[lang=en] .story-question{letter-spacing:0;line-height:1.65}
html[lang=en] .catalog-label{max-width:220px;overflow:hidden;text-overflow:ellipsis;font:12px/26px 'Segoe UI',sans-serif;letter-spacing:0}
html[lang=en] .chapter-travelling .catalog-label{display:none}
html[lang=en] .journey-flight-label{font:11px 'Segoe UI',sans-serif;letter-spacing:0}
html[lang=en] .district-name{letter-spacing:1px;font-size:12px}
/* Keep the desktop introduction and journey card in one content-sized column.
   Long translated stop names must push the card down, never over the controls. */
@media(min-width:701px){
 html[lang=en] .letter-atlas .map-empty{display:grid;grid-template-columns:clamp(290px,26vw,360px) 1fr;grid-template-rows:max-content max-content;align-content:safe center;gap:18px 0;padding:104px 5.5% 90px}
 html[lang=en] .letter-atlas .scroll-title{position:relative;top:auto;left:auto;grid-column:1;grid-row:1;justify-self:start;max-width:none}
 html[lang=en] .letter-atlas .journey-launch{position:relative;left:auto;bottom:auto;grid-column:1;grid-row:2;width:100%;margin:0}
 html[lang=en] .letter-atlas .scroll-title h1{font-size:clamp(42px,4.2vw,64px);line-height:1.08}
 html[lang=en] .letter-atlas .scroll-title #begin{margin-top:18px;line-height:1.4;height:46px;min-height:46px;letter-spacing:.06em;gap:20px}
 html[lang=en] .letter-atlas .scroll-title #story-beacon{margin-top:6px}
 html[lang=en] .journey-launch-heading{font-size:clamp(19px,1.4vw,22px)}
}
@media(max-width:700px){
 html[lang=en] .journey-itinerary{display:flex;overflow-x:auto;overscroll-behavior-inline:contain;scrollbar-width:thin;gap:7px;bottom:76px;padding:0 0 5px;scroll-snap-type:x proximity}
 html[lang=en] .journey-period{flex:0 0 130px;min-height:86px;text-align:left;padding:9px 11px;scroll-snap-align:start}
 html[lang=en] .journey-period-number{margin:0 0 6px}html[lang=en] .journey-period-title{font:14px/1.25 Georgia,serif;overflow-wrap:normal;word-break:normal;text-wrap:balance}
 html[lang=en] .journey-period-years{display:block;font-size:8px;margin-top:5px}
 html[lang=en] .journey-launch{bottom:206px;padding:12px 15px 6px}
 html[lang=en] .journey-launch-heading{font-size:19px;max-width:calc(100% - 65px);display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:2;overflow:hidden}
 html[lang=en] .journey-launch-description{max-width:calc(100% - 40px)}
 html[lang=en] #chapter-cinema .cinema-header{min-height:62px;padding:9px 16px;gap:7px}
 html[lang=en] #chapter-cinema .journey-stage-label{display:none}
 html[lang=en] #chapter-cinema #cinema-title{font-size:28px;line-height:1.1;margin-bottom:8px}
 html[lang=en] #chapter-cinema #cinema-place{font-size:12px;line-height:1.5;margin-bottom:7px}
 html[lang=en] #chapter-cinema #cinema-opening{font-size:12px;line-height:1.6}
 html[lang=en] #chapter-cinema .cinema-hero{padding:8px 0}
 html[lang=en] #chapter-cinema .cinema-footer{min-height:116px;gap:12px;padding:10px 16px}
 html[lang=en] #chapter-cinema .cinema-photo-note{max-width:none;width:49%;max-height:104px;font-size:9px;line-height:1.5;flex-shrink:1}
 html[lang=en] #chapter-cinema #cinema-places{width:48%;max-width:none;gap:6px}
 html[lang=en] #chapter-cinema #cinema-places button{font-size:10px;padding:8px 6px;max-width:none;min-height:58px}
 html[lang=en] #chapter-cinema #cinema-places button small{font-size:8px;white-space:normal}
 html[lang=en] #chapter-cinema .story-scene-title{font-size:24px;letter-spacing:-.02em}
 html[lang=en] #chapter-cinema .story-question{letter-spacing:0;font-size:13px}
 html[lang=en] .district-name{font-size:10px;letter-spacing:0}
}
@media(max-width:700px) and (max-height:720px){
 html[lang=en] .journey-launch{bottom:188px;padding:9px 12px 4px}
 html[lang=en] .scroll-title h1{font-size:36px}
 html[lang=en] .journey-launch-description{font-size:10px}
 html[lang=en] .journey-launch-heading{font-size:17px}
 html[lang=en] .journey-launch-actions button{min-height:32px;font-size:10px}
 html[lang=en] #chapter-cinema .cinema-hero #cinema-opening{display:none}
}