/* Larger editorial type, shared by the homepage and Why story. */
.city-sequence.reading-stage,.city-sequence.city-stage{height:100svh;min-height:590px;padding:65px var(--gutter) 150px;justify-content:center}
.city-sequence .reading-copy,.city-sequence .city-copy{display:grid;font-size:clamp(90px,9.7vw,152px);line-height:1.02;letter-spacing:-.045em;max-width:1150px;width:100%}
.city-sequence .reading-line,.city-sequence .city-line{grid-area:1/1;margin:0;align-self:center;min-height:3.15em;display:block}
.city-sequence .reading-word{white-space:normal;margin-right:.16em}
.city-sequence .reading-close,.city-sequence .city-note{position:absolute;bottom:70px;left:var(--gutter);right:var(--gutter);margin:0;font-size:14px;max-width:50ch;line-height:1.6}
.city-sequence>.small-label{margin-bottom:38px}
@media(max-width:760px){
 .city-sequence.reading-stage,.city-sequence.city-stage{padding:55px 25px 150px;min-height:570px}
 .city-sequence .reading-copy,.city-sequence .city-copy{font-size:clamp(50px,16vw,82px);line-height:1.06;letter-spacing:-.045em}
 .city-sequence .reading-line,.city-sequence .city-line{min-height:4.25em}
 .city-sequence .reading-close,.city-sequence .city-note{bottom:115px;left:25px;right:25px;font-size:12px;max-width:36ch}
 .city-sequence .reading-progress,.city-sequence .city-progress{bottom:95px}
 .city-sequence>.small-label{margin-bottom:30px}
}
@media(max-height:650px) and (max-width:760px){
 .city-sequence.reading-stage,.city-sequence.city-stage{padding-top:28px;padding-bottom:140px;min-height:530px}
 .city-sequence .reading-copy,.city-sequence .city-copy{font-size:clamp(46px,14.5vw,64px)}
 .city-sequence>.small-label{margin-bottom:20px}
}

/* The current sentence is discoverable before scrolling; later cities stay hidden. */
.city-scroll-cue{position:absolute;bottom:100px;left:var(--gutter);margin:0;display:flex;align-items:center;gap:13px;font:400 11px/1.4 var(--sans);letter-spacing:.02em;color:inherit}
.city-scroll-cue:before{content:'';width:1px;height:25px;background:currentColor;opacity:.5}
@media(max-width:760px){.city-scroll-cue{left:25px;bottom:130px;font-size:11px}}
@media(prefers-reduced-motion:reduce){.city-scroll-cue{display:none}}

/* Geographic playing cards: printed faces, engraved backs, one deliberate turn. */
.city-deck{display:flex;gap:24px;justify-content:center;margin:40px 0;color:#173e35}
.city-card{width:230px;aspect-ratio:5/7;position:relative;perspective:1200px}
.card-turn{position:relative;width:100%;height:100%;transform-style:preserve-3d}
.card-face{position:absolute;inset:0;border:1px solid #b6b49d;border-radius:10px;backface-visibility:hidden;-webkit-backface-visibility:hidden;box-shadow:0 18px 32px -24px #08271f80;overflow:hidden}
.card-front{background:#f7f4e9;display:flex;flex-direction:column;align-items:center;padding:22px 13px 19px;transform:rotateY(0deg)}
.card-front:after{content:'';position:absolute;inset:9px;border:1px solid #173e3526;border-radius:5px;pointer-events:none}
.card-index{position:absolute;top:16px;left:16px;display:grid;gap:4px;font:13px/1 var(--display)}
.card-index svg{width:10px;height:12px;fill:currentColor}
.card-region{font:8px/1.4 var(--sans);letter-spacing:.15em;text-transform:uppercase;margin-top:6px}
.region-map{width:85%;height:auto;flex:1;min-height:0;overflow:visible}
.region-land{fill:#27554a;stroke:#143c32;stroke-width:.65;stroke-linejoin:round}
.city-pin{fill:#c0a36a;stroke:#fff7df;stroke-width:1.6}
.city-beacon{fill:none;stroke:#c4a973;stroke-width:1;transform-box:fill-box;transform-origin:center}
.card-city{font:27px/1.15 var(--display);letter-spacing:-.035em;margin-bottom:9px;white-space:nowrap}
.card-coordinate{font:7px/1.4 var(--sans);letter-spacing:.08em}
.card-corner{position:absolute;right:15px;bottom:17px;writing-mode:vertical-rl;font:9px/1 var(--sans);letter-spacing:.07em;opacity:.6}
.card-back{background:#123d33;transform:rotateY(180deg);padding:10px;color:#d5cba6}
.card-engraving{height:100%;border:1px solid #b8aa7977;border-radius:5px;display:flex;flex-direction:column;justify-content:space-between;align-items:center;padding:23px 7px;position:relative;background:repeating-radial-gradient(ellipse at center,transparent 0 9px,#d5cba61a 10px,transparent 11px 16px)}
.card-engraving:before{content:'';position:absolute;inset:8px;border:1px solid #b8aa793d;border-radius:45%}
.card-back-name,.card-back-place{font:8px/1.4 var(--sans);letter-spacing:.17em;position:relative;background:#123d33;padding:4px}
.card-spade{width:46px;height:56px;fill:currentColor;background:#123d33;box-shadow:0 0 35px 18px #123d33}
.city-sequence.reading-stage,.city-sequence.city-stage{display:grid;grid-template-columns:minmax(0,1.6fr) minmax(230px,1fr);grid-template-rows:auto 1fr;column-gap:6%;align-content:center;align-items:center;padding-top:65px;padding-bottom:155px}
.city-sequence>.small-label{grid-column:1/-1;align-self:end;margin-bottom:28px}
.city-sequence .reading-copy,.city-sequence .city-copy{grid-column:1;grid-row:2;font-size:clamp(62px,7.1vw,114px);margin:0;align-self:center}
.city-sequence .reading-line,.city-sequence .city-line{min-height:3.5em}
.city-sequence .city-deck{grid-column:2;grid-row:2;display:block;position:relative;width:clamp(235px,23vw,345px);aspect-ratio:5/7;margin:0;justify-self:center;perspective:1400px}
.city-sequence .city-card{position:absolute;inset:0;width:100%;transform-origin:50% 80%}
.city-sequence .card-turn{transform:rotateY(180deg)}
.city-sequence .card-region{font-size:10px}
.city-sequence .card-city{font-size:clamp(29px,2.5vw,40px)}
.city-sequence .card-coordinate{font-size:8px}
.city-sequence .card-front{padding:30px 18px 25px}
@media(max-width:760px){
 .city-sequence.reading-stage,.city-sequence.city-stage{grid-template-columns:1fr;grid-template-rows:auto auto 1fr;gap:0;padding:25px 25px 145px;min-height:560px}
 .city-sequence>.small-label{grid-column:1;grid-row:1;margin:0 0 18px;align-self:start;font-size:11px}
 .city-sequence .reading-copy,.city-sequence .city-copy{grid-column:1;grid-row:2;font-size:clamp(40px,11.9vw,65px);line-height:1.02;align-self:start}
 .city-sequence .reading-line,.city-sequence .city-line{min-height:3.15em}
 .city-sequence .city-deck{grid-column:1;grid-row:3;width:auto;height:min(37svh,270px);margin:16px 0 0;align-self:center}
 .city-sequence .card-front{padding:18px 9px 15px}
 .city-sequence .card-region{font-size:6px;margin-top:1px}
 .city-sequence .card-city{font-size:24px;margin-bottom:5px}
 .city-sequence .card-coordinate{font-size:5px}
 .city-sequence .card-index{font-size:10px;top:13px;left:12px}
 .city-sequence .card-index svg{width:8px;height:9px}
 .city-sequence .card-corner{font-size:6px;right:11px;bottom:12px}
 .city-sequence .card-back-name,.city-sequence .card-back-place{font-size:5px}
 .city-sequence .card-spade{width:31px;height:39px}
 .city-sequence .card-engraving{padding:14px 3px}
 .city-sequence .reading-close,.city-sequence .city-note{font-size:10px;bottom:93px;max-width:42ch;line-height:1.4}
 .city-sequence .reading-progress,.city-sequence .city-progress{bottom:80px}
 .city-scroll-cue{bottom:103px}
 .city-deck:not(.city-sequence .city-deck){flex-wrap:wrap}
}
@media(max-height:650px) and (max-width:760px){
 .city-sequence.reading-stage,.city-sequence.city-stage{min-height:510px;padding-top:18px;padding-bottom:132px}
 .city-sequence .reading-copy,.city-sequence .city-copy{font-size:clamp(35px,10.8vw,46px)}
 .city-sequence .city-deck{height:31svh;margin-top:10px}
 .city-sequence>.small-label{margin-bottom:13px}
}
@media(prefers-reduced-motion:reduce){.city-deck{margin-top:35px}.card-turn{transform:none!important}.card-back{display:none}}
@media(min-width:761px) and (max-height:740px){
 .city-sequence.reading-stage,.city-sequence.city-stage{min-height:500px;padding-top:32px;padding-bottom:105px}
 .city-sequence>.small-label{margin-bottom:18px}
 .city-sequence .reading-copy,.city-sequence .city-copy{font-size:clamp(52px,6vw,82px)}
 .city-sequence .reading-line,.city-sequence .city-line{min-height:3.2em}
 .city-sequence .city-deck{width:auto;height:calc(100svh - 240px);max-height:400px}
 .city-sequence .reading-close,.city-sequence .city-note{bottom:44px;font-size:12px}
 .city-sequence .reading-progress,.city-sequence .city-progress{bottom:28px}
 .city-scroll-cue{bottom:60px}
}
/* The closing thought is body copy, not a footnote. Reserve room above the dock. */
.city-sequence .reading-close,.city-sequence .city-note{font-size:18px;line-height:1.55;max-width:48ch}
@media(max-width:760px){
 .city-sequence .reading-close,.city-sequence .city-note{font-size:16px;line-height:1.45;max-width:none;bottom:100px}
 .city-sequence.reading-stage,.city-sequence.city-stage{padding-bottom:200px}
 .city-sequence .city-deck{height:min(34svh,250px)}
}
@media(max-height:650px) and (max-width:760px){
 .city-sequence.reading-stage,.city-sequence.city-stage{padding-bottom:190px}
 .city-sequence .city-deck{height:27svh;margin-top:6px}
 .city-sequence .reading-close,.city-sequence .city-note{font-size:15px;line-height:1.4}
}
@media(min-width:761px) and (max-height:740px){.city-sequence .reading-close,.city-sequence .city-note{font-size:16px}}