/* Beijing — city series skeleton (live).
   Cover → one chapter rail → chapters (head · prose · plates) → the film → next city.
   Type and base tokens come from /assets/galok-type.css; Beijing keeps one accent: imperial vermilion.
   The film (chapter 02) lives in beijing-time.css. */

:root{
  --bj-accent:#b8322a;        /* imperial vermilion · 5.45:1 on paper; paper on it 5.45:1 */
  --bj-accent-night:#e46f63;  /* vermilion text on night · 6.3:1 */
  --bj-paper-2:#ecece6;
  --bj-night:#0b0c0c;
  --bj-night-ink:#ecebe5;     /* 16.4:1 on night */
  --bj-night-muted:#a3a59f;   /* 7.9:1 on night */
  --bj-night-rule:rgb(236 235 229 / .16);
  --bj-measure:34em;
  --bj-gutter:clamp(16px,4vw,56px);
  --bj-max:1360px;
  --bj-h2:clamp(36px,5.4vw,76px);
  --bj-nav-h:64px;
  --bj-rail-h:48px;
  --bj-bar-h:56px;
  --bj-body:18px;
  --bj-deck-h:156px;          /* film deck: tallest of the 21 cuts, so the page never shifts as the film advances */
  --bj-s1:8px;--bj-s2:16px;--bj-s3:24px;--bj-s4:32px;--bj-s5:48px;--bj-s6:64px;--bj-s7:96px;--bj-s8:128px;
}
@media (max-width:1100px){:root{--bj-deck-h:196px}}
@media (max-width:820px){:root{--bj-body:17px;--bj-nav-h:56px;--bj-deck-h:212px}}
@media (max-width:560px){:root{--bj-deck-h:300px}}
@media (max-width:420px){:root{--bj-deck-h:336px}}
/* smooth scrolling is switched on by beijing.js after load, so an inbound #hash lands instantly instead of animating down the page */
@media (prefers-reduced-motion:no-preference){html.bj-smooth{scroll-behavior:smooth}}
html{scroll-padding-top:calc(var(--bj-rail-h) + var(--bj-s2));-webkit-text-size-adjust:100%;text-size-adjust:100%}
@media (max-width:820px){html{scroll-padding-top:var(--bj-s2)}}
*,*::before,*::after{box-sizing:border-box}
body.bj-page{margin:0;background:var(--g-paper);color:var(--gt-ink);font:400 var(--bj-body)/1.6 var(--g-sans);font-optical-sizing:auto;text-rendering:optimizeLegibility;-webkit-font-smoothing:antialiased;overflow-x:clip}
:where(.bj-page) :where(img,video){display:block;max-width:100%;height:auto}
:where(.bj-page) :where(a){color:inherit}
.bj-page main{display:block;outline:0}
.bj-label{font:600 var(--gt-t-label)/1.3 var(--g-mono);letter-spacing:.08em;text-transform:uppercase;color:var(--gt-muted)}
.bj-visually-hidden{position:absolute!important;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}
.skip-link{position:absolute;left:var(--bj-gutter);top:-100px;z-index:60;padding:var(--bj-s1) var(--bj-s2);background:var(--g-paper);color:var(--gt-ink);font:600 var(--gt-t-small)/1.4 var(--g-sans)}
.skip-link:focus{top:var(--bj-s1)}
:focus-visible{outline-color:var(--bj-accent)}

.wrap{max-width:var(--bj-max);margin:0 auto;padding:0 var(--bj-gutter)}
.wrap--bleed{max-width:none;padding:0}

/* ---------- one display voice ---------- */
.cover__title,.chapter__title,.next__name{font-family:var(--g-sans);font-weight:800;font-variation-settings:"opsz" 32;letter-spacing:-.035em;color:inherit;margin:0}
.seal{display:inline-flex;align-items:center;justify-content:center;writing-mode:vertical-rl;font-family:var(--g-seal);font-weight:400;letter-spacing:-.04em;line-height:1;background:var(--bj-accent);color:#f5f5f1;padding:.14em .1em}

/* ---------- labels and captions: mono 12px only ---------- */
.cap{margin:var(--bj-s1) 0 0;font:500 var(--gt-t-label)/1.5 var(--g-mono);letter-spacing:.06em;text-transform:uppercase;color:var(--gt-muted)}
.cap a{color:inherit;text-decoration:none}
.cap a:hover,.cap a:focus-visible{color:var(--gt-ink);text-decoration:underline;text-underline-offset:3px}
.cap__no{color:var(--bj-accent);font-weight:700}
.cap__sep{margin:0 .6em;opacity:.7}
.cap__rights{white-space:nowrap}
.sub{margin:0;font:600 var(--gt-t-label)/1.3 var(--g-mono);letter-spacing:.08em;text-transform:uppercase;color:var(--gt-ink)}

/* ---------- rail: the one navigation ---------- */
.rail{position:sticky;top:0;z-index:40;background:color-mix(in srgb,var(--g-paper) 94%,transparent);backdrop-filter:saturate(1.2) blur(10px);-webkit-backdrop-filter:saturate(1.2) blur(10px);border-bottom:1px solid var(--gt-rule)}
.rail__inner{max-width:var(--bj-max);margin:0 auto;padding:0 var(--bj-gutter);height:var(--bj-rail-h);display:flex;align-items:center;gap:var(--bj-s4)}
.rail__city{display:inline-flex;align-items:center;gap:10px;text-decoration:none;font:700 15px/1 var(--g-sans);letter-spacing:-.01em}
.rail__seal{font-size:13px;padding:3px 4px;letter-spacing:-.08em}
.rail__sheet{flex:1;display:flex;align-items:center;gap:var(--bj-s4);min-width:0}
.rail__sheet-title{display:none}
.rail__list{list-style:none;margin:0;padding:0;display:flex;gap:var(--bj-s3);flex:1;min-width:0}
.rail__list a{position:relative;display:flex;align-items:baseline;gap:8px;height:var(--bj-rail-h);align-items:center;text-decoration:none;color:var(--gt-muted);font:500 var(--gt-t-small)/1 var(--g-sans);white-space:nowrap}
.rail__list a:hover{color:var(--gt-ink)}
.rail__list a[aria-current]{color:var(--gt-ink)}
.rail__list a::after{content:"";position:absolute;left:0;right:0;bottom:-1px;height:2px;background:var(--bj-accent);transform:scaleX(0);transform-origin:left;transition:transform .3s ease}
.rail__list a[aria-current]::after{transform:scaleX(1)}
.rail__no{font:600 var(--gt-t-label)/1 var(--g-mono);letter-spacing:.04em;color:var(--gt-muted)}
.rail__list a[aria-current] .rail__no{color:var(--bj-accent)}
.rail__next{margin-left:auto;text-decoration:none;font:600 var(--gt-t-small)/1 var(--g-sans);white-space:nowrap}
.rail__next:hover{text-decoration:underline;text-underline-offset:4px}
.rail__toggle{display:none}

@media (min-width:821px) and (max-width:1180px){.rail__next{display:none}}
@media (max-width:980px){.rail__list{gap:var(--bj-s2)} .rail__list .rail__no{display:none}}
@media (max-width:820px){
  body{padding-bottom:var(--bj-bar-h)}
  .rail{position:fixed;top:auto;bottom:0;left:0;right:0;border-bottom:0;border-top:1px solid var(--gt-rule);background:var(--g-paper);backdrop-filter:none;-webkit-backdrop-filter:none;padding-bottom:env(safe-area-inset-bottom)}
  .rail__inner{height:var(--bj-bar-h);padding:0;gap:0}
  .rail__city{display:none}
  .rail__toggle{display:flex;align-items:center;justify-content:space-between;gap:var(--bj-s2);width:100%;height:100%;padding:0 var(--bj-gutter);border:0;background:none;color:var(--gt-ink);font:600 var(--g-t-ui)/1 var(--g-sans);cursor:pointer;text-align:left}
  .rail__current{display:flex;align-items:baseline;gap:10px;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
  .rail__current .rail__no{color:var(--bj-accent)}
  .rail__toggle-label{display:inline-flex;align-items:center;gap:8px;padding:8px 12px;border:1px solid var(--gt-ink);font:600 var(--gt-t-label)/1 var(--g-mono);letter-spacing:.08em;text-transform:uppercase}
  .rail__toggle-label::after{content:"";width:6px;height:6px;border-left:1.5px solid currentColor;border-top:1.5px solid currentColor;transform:translateY(2px) rotate(45deg);transition:transform .2s ease}
  .rail__toggle[aria-expanded="true"] .rail__toggle-label::after{transform:translateY(-1px) rotate(225deg)}
  .rail__sheet{position:absolute;left:0;right:0;bottom:100%;display:block;padding:var(--bj-s3) var(--bj-gutter) var(--bj-s2);background:var(--g-paper);border-top:1px solid var(--gt-rule);box-shadow:0 -24px 48px rgb(14 16 15 / .12);visibility:hidden;opacity:0;transform:translateY(8px);transition:opacity .2s ease,transform .2s ease,visibility 0s .2s}
  .rail.is-open .rail__sheet{visibility:visible;opacity:1;transform:none;transition:opacity .2s ease,transform .2s ease}
  .rail__sheet-title{display:block;margin:0 0 var(--bj-s1)}
  .rail__list{display:block}
  .rail__list li{border-bottom:1px solid var(--gt-rule)}
  .rail__list a{height:auto;padding:14px 0;gap:var(--bj-s2);font:600 var(--gt-t-lede)/1.2 var(--g-sans);letter-spacing:-.02em;color:var(--gt-ink)}
  .rail__list .rail__no{display:inline;min-width:2.2em}
  .rail__list a::after{display:none}
  .rail__list a[aria-current]{color:var(--bj-accent)}
  .rail__next{display:block;padding:var(--bj-s2) 0 var(--bj-s1);font-size:var(--g-t-ui)}
}

/* ---------- cover ---------- */
.cover{position:relative;isolation:isolate;display:flex;align-items:flex-end;min-height:max(560px,min(calc(100svh - var(--bj-nav-h) - var(--bj-rail-h)),940px));color:#f5f5f1;background:var(--bj-night)}
.cover__media{position:absolute;inset:0;z-index:-1;overflow:hidden}
.cover__media picture,.cover__poster,.cover__video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:50% 40%}
.cover__video{opacity:0;transition:opacity .8s ease}
.cover__video.is-playing{opacity:1}
.cover__shade{position:absolute;inset:0;background:linear-gradient(180deg,rgb(11 12 12 / .3) 0%,rgb(11 12 12 / 0) 20%,rgb(11 12 12 / .28) 44%,rgb(11 12 12 / .78) 68%,rgb(11 12 12 / .92) 100%)}
.cover__body{width:100%;max-width:var(--bj-max);margin:0 auto;padding:var(--bj-s7) var(--bj-gutter) var(--bj-s6)}
.cover__meta{margin:0;color:#e6e4dc;white-space:nowrap}
.cover__foot{display:flex;align-items:flex-end;justify-content:space-between;gap:var(--bj-s3) var(--bj-s5);flex-wrap:wrap;margin-top:var(--bj-s4);padding-top:var(--bj-s3);border-top:1px solid rgb(245 245 241 / .35)}
.cover__lockup{display:flex;align-items:flex-end;gap:clamp(12px,2vw,32px)}
.cover__title{font-size:clamp(64px,18.6vw,224px);line-height:.82;letter-spacing:-.045em;text-transform:uppercase;margin-left:-.04em}
.cover__seal{flex:none;font-size:clamp(30px,4.6vw,68px);margin-bottom:.06em}
.cover__deck{max-width:34ch;margin:0;font:450 clamp(18px,1.7vw,24px)/1.4 var(--g-sans);letter-spacing:-.01em;color:#f5f5f1}
.cover__film{position:absolute;right:var(--bj-gutter);top:var(--bj-s3);padding:8px 12px;border:1px solid rgb(245 245 241 / .6);background:rgb(11 12 12 / .4);color:#f5f5f1;font:600 var(--gt-t-label)/1 var(--g-mono);letter-spacing:.08em;text-transform:uppercase;cursor:pointer}
.cover__film:hover{background:rgb(11 12 12 / .7)}
.cap--cover{display:flex;justify-content:flex-end;flex-wrap:wrap;margin-top:var(--bj-s1)}
@media (max-width:820px){
  .cover{min-height:max(520px,calc(100svh - var(--bj-nav-h) - var(--bj-bar-h)))}
  .cover__body{padding:var(--bj-s7) var(--bj-gutter) var(--bj-s4)}
  .cover__lockup{align-items:flex-end}
  .cover__deck{font-size:18px;max-width:28ch}
  .cover__meta{white-space:normal}
  .cap--cover{justify-content:flex-start}
}

/* ---------- chapter skeleton ---------- */
.chapter{padding:var(--bj-s8) 0 var(--bj-s8)}
.chapter + .chapter{border-top:1px solid var(--gt-rule)}
.chapter__head{max-width:15em}
.chapter__no{display:flex;align-items:center;gap:12px;margin:0 0 var(--bj-s3);font:600 var(--gt-t-label)/1 var(--g-mono);letter-spacing:.08em;text-transform:uppercase;color:var(--gt-ink)}
.chapter__no span{display:inline-flex;align-items:center;gap:12px;color:var(--bj-accent)}
.chapter__no span::after{content:"";width:32px;height:2px;background:var(--bj-accent)}
.chapter__title{font-size:var(--bj-h2);line-height:.98;text-wrap:balance}
.chapter__deck{margin:var(--bj-s3) 0 0;font:500 clamp(19px,1.6vw,22px)/1.4 var(--g-sans);letter-spacing:-.01em;color:var(--gt-ink-2)}
.prose{max-width:var(--bj-measure)}
.prose p{margin:0 0 1em}
.prose p:last-child{margin-bottom:0}
.chapter__prose{margin:var(--bj-s5) 0 0 auto;max-width:min(var(--bj-measure),100%)}
@media (min-width:1000px){
  .chapter > .wrap:first-child{display:grid;grid-template-columns:repeat(12,1fr);column-gap:var(--bj-s3);align-items:end}
  .chapter__head{grid-column:1 / span 7;max-width:none}
  .chapter__title{max-width:12em}
  .chapter__prose{grid-column:8 / span 5;margin:0;padding-bottom:6px}
  .chapter > .wrap:first-child > :not(.chapter__head):not(.chapter__prose){grid-column:1 / -1}
}
@media (max-width:820px){.chapter{padding:var(--bj-s7) 0}}

/* plates */
.plate{margin:var(--bj-s6) 0 0}
.plate__frame{position:relative;overflow:hidden;background:var(--bj-paper-2)}
.plate__frame img{width:100%;height:100%;object-fit:cover}
.plate--bleed .cap{padding:0 var(--bj-gutter);max-width:var(--bj-max);margin-left:auto;margin-right:auto}
.plate--bleed .plate__frame{aspect-ratio:auto!important;width:100%;height:min(56vw,80svh)}
@media (max-width:820px){.plate--bleed .plate__frame{height:auto;aspect-ratio:3/2!important}}

/* 01 central axis · registers */
.registers{margin-top:var(--bj-s7)}
.registers__head{display:flex;align-items:center;gap:var(--bj-s4);padding-bottom:var(--bj-s3);border-bottom:1px solid var(--gt-rule)}
.axisline{flex:1;display:flex;align-items:center;gap:12px;margin:0;font:600 var(--gt-t-label)/1 var(--g-mono);letter-spacing:.08em;text-transform:uppercase;color:var(--gt-muted)}
.axisline i{flex:1;height:2px;background:var(--bj-accent);position:relative}
.axisline i::after{content:"";position:absolute;right:-1px;top:-4px;border-left:8px solid var(--bj-accent);border-top:5px solid transparent;border-bottom:5px solid transparent}
.registers__list{list-style:none;margin:var(--bj-s4) 0 0;padding:0;display:grid;grid-template-columns:repeat(3,1fr);gap:var(--bj-s3)}
.register .plate__frame img{width:100%;height:100%;object-fit:cover}
.register__title{margin:var(--bj-s2) 0 0;font:700 var(--gt-t-lede)/1.2 var(--g-sans);letter-spacing:-.02em}
.register__copy{margin:var(--bj-s1) 0 0;color:var(--gt-ink-2);max-width:30em}
@media (max-width:820px){
  .registers__head{flex-direction:column;align-items:stretch;gap:var(--bj-s2)}
  .registers__list{grid-template-columns:1fr;gap:var(--bj-s5)}
}

/* 02 timeline · the film sits on night (see beijing-time.css) */
.chapter--film{padding-bottom:var(--bj-s7)}
.film-meta{margin:var(--bj-s3) 0 0;color:var(--bj-night-muted)}
/* before beijing-time.js mounts, reserve the player: tabs row (46px) + frame + deck, so anchors below never move */
.film-poster{position:relative;height:clamp(440px,min(72svh,56.25vw),820px);margin:46px 0 var(--bj-deck-h);overflow:hidden;background:#030303}
.film-poster img{width:100%;height:100%;object-fit:cover;filter:saturate(.86) contrast(1.04) brightness(.72)}
@media (max-width:820px){.film-poster{height:min(122vw,66svh);min-height:400px}}

/* 03 side streets · wide → detail → people */
.pair{display:grid;grid-template-columns:5fr 7fr;gap:var(--bj-s3);align-items:end}
.pair .plate{margin-top:var(--bj-s5)}
.people{display:grid;grid-template-columns:repeat(12,1fr);column-gap:var(--bj-s3);align-items:end;margin-top:var(--bj-s5)}
.people__photo{grid-column:1 / span 7;margin-top:0}
.people__line{grid-column:9 / span 4;margin:0 0 var(--bj-s6);font:600 clamp(22px,2.1vw,30px)/1.3 var(--g-sans);letter-spacing:-.02em;text-wrap:pretty;border-top:2px solid var(--bj-accent);padding-top:var(--bj-s3)}
@media (max-width:820px){
  .pair{grid-template-columns:1fr;gap:0}
  .people{display:block}
  .people__line{margin:var(--bj-s5) 0 0}
}

/* 04 street heat · vermilion field */
.chapter--heat{background:var(--bj-accent);color:#f5f5f1;border-top:0!important}
.chapter--heat + .chapter{border-top:0}
.chapter--heat .chapter__no,.chapter--heat .chapter__no span{color:#f5f5f1}
.chapter--heat .chapter__no span::after{background:#f5f5f1}
.chapter--heat .chapter__deck{color:#f5f5f1}
.chapter--heat .chapter__head{max-width:none}
.chapter--heat .chapter__title{max-width:9em}
.chapter--heat .cap,.chapter--heat .cap__no{color:#fff}
.chapter--heat .plate__frame{background:#9f2a23}
.heat{display:grid;grid-template-columns:repeat(12,1fr);column-gap:var(--bj-s3);row-gap:0;margin-top:var(--bj-s6)}
.heat .plate{margin-top:0}
.heat__tall{grid-column:1 / span 5;grid-row:1 / span 2}
.heat__wide{grid-column:6 / span 7}
.heat__note{grid-column:8 / span 5;align-self:end;margin-top:var(--bj-s5);padding-top:var(--bj-s3);border-top:1px solid rgb(245 245 241 / .55)}
.sub--onred{color:#f5f5f1}
.heat__note p{margin:var(--bj-s2) 0 0;font:500 clamp(20px,1.8vw,24px)/1.4 var(--g-sans);letter-spacing:-.012em}
@media (max-width:820px){
  .heat{display:block}
  .heat .plate + .plate{margin-top:var(--bj-s4)}
}

/* 05 new city · night */
.chapter--night{background:var(--bj-night);color:var(--bj-night-ink);border-top:0!important}
.chapter--night .chapter__no{color:var(--bj-night-ink)}
.chapter--night .chapter__no span{color:var(--bj-accent-night)}
.chapter--night .chapter__no span::after{background:var(--bj-accent)}
.chapter--night .cap{color:var(--bj-night-muted)}
.chapter--night .cap__no{color:var(--bj-accent-night)}
.chapter--night .plate__frame{background:#1b1d1c}
.newcity{display:grid;grid-template-columns:repeat(12,1fr);column-gap:var(--bj-s3);align-items:end;margin-top:var(--bj-s6)}
.newcity .plate{margin-top:0}
.newcity__wide{grid-column:1 / span 8}
.newcity__wide img{object-position:50% 0}
.newcity__detail{grid-column:10 / span 3}
@media (max-width:820px){
  .newcity{grid-template-columns:repeat(6,1fr);row-gap:var(--bj-s4)}
  .newcity__wide{grid-column:1 / -1}
  .newcity__detail{grid-column:3 / -1}
}

/* end · northern edge + next city */
.end{padding:0 0 var(--bj-s8)}
.plate--edge{margin-top:0}
.edge{display:grid;grid-template-columns:repeat(12,1fr);column-gap:var(--bj-s3);align-items:end;margin-top:var(--bj-s7)}
.edge__head{grid-column:1 / span 7}
.edge__head .chapter__no span{color:var(--bj-accent)}
.edge__head .chapter__no span::after{display:none}
.edge__prose{grid-column:8 / span 5;padding-bottom:6px}
@media (max-width:999px){.edge{display:block}.edge__prose{margin-top:var(--bj-s4)}}

.next{margin-top:var(--bj-s8);border-top:2px solid var(--gt-ink)}
.next__card{display:grid;grid-template-columns:7fr 5fr;gap:var(--bj-s4);padding-top:var(--bj-s4);text-decoration:none;color:var(--gt-ink)}
.next__frame{display:block;aspect-ratio:16/9;overflow:hidden;background:var(--bj-paper-2)}
.next__frame img{width:100%;height:100%;object-fit:cover;transition:transform .6s ease}
.next__card:hover .next__frame img{transform:scale(1.02)}
.next__body{display:flex;flex-direction:column;align-items:flex-start}
.next__label{color:var(--bj-accent)}
.next__lockup{display:flex;align-items:flex-end;gap:var(--bj-s2);margin-top:var(--bj-s3)}
.next__name{font-size:clamp(44px,6vw,96px);line-height:.85;letter-spacing:-.045em;text-transform:uppercase}
.next__seal{flex:none;font-size:clamp(22px,2.2vw,32px)}
.next__meta{margin-top:var(--bj-s3)}
.next__deck{margin-top:var(--bj-s2);font:500 clamp(19px,1.6vw,22px)/1.4 var(--g-sans);letter-spacing:-.01em}
.next__go{margin-top:auto;padding-top:var(--bj-s4);font:600 var(--g-t-ui)/1 var(--g-sans);border-bottom:2px solid var(--bj-accent);padding-bottom:6px}
.next__card:hover .next__go{color:var(--bj-accent)}
.next__index{display:inline-block;margin-top:var(--bj-s5);font:600 var(--g-t-ui)/1 var(--g-sans);text-underline-offset:5px}
@media (max-width:820px){
  .next__card{grid-template-columns:1fr;gap:var(--bj-s3)}
  .next__go{margin-top:var(--bj-s3);padding-top:0}
}

@media (prefers-reduced-motion:reduce){
  .next__card:hover .next__frame img{transform:none}
}

.chapter--night + .chapter{border-top:0}

/* ---------- site shell: global header and footer (script.js adds the Menu toggle) ---------- */
.bj-page .site-nav{position:relative;z-index:45;background:var(--g-paper);border-bottom:1px solid var(--gt-rule)}
.bj-page .site-nav .nav-inner{max-width:var(--bj-max);height:var(--bj-nav-h);margin:0 auto;padding:0 var(--bj-gutter);display:flex;align-items:center;justify-content:space-between;gap:var(--bj-s4)}
.bj-page .site-nav .brand{display:inline-flex;align-items:center;gap:10px;text-decoration:none;color:var(--gt-ink)}
.bj-page .site-nav .brand-mark{width:28px;height:28px}
.bj-page .site-nav .brand-lockup{display:grid;line-height:1}
.bj-page .site-nav .brand-lockup b{font:800 15px/1 var(--g-sans);letter-spacing:.02em}
.bj-page .site-nav .brand-lockup b{color:var(--gt-ink)}
.bj-page .site-nav .brand-lockup small{margin-top:3px;font:500 var(--gt-t-label)/1 var(--g-sans);color:var(--gt-muted)}
.bj-page .site-nav .nav-links{display:flex;align-items:center;gap:var(--bj-s3)}
.bj-page .site-nav .nav-links a{text-decoration:none;color:var(--gt-ink-2);font:500 var(--gt-t-small)/1 var(--g-sans);padding:8px 0}
.bj-page .site-nav .nav-links a:hover{color:var(--gt-ink)}
.bj-page .site-nav .nav-links a[aria-current]{color:var(--gt-ink);box-shadow:inset 0 -2px 0 var(--bj-accent)}
.bj-page .nav-menu-toggle{display:none;min-height:44px;padding:0 14px;border:1px solid var(--gt-ink);background:transparent;color:var(--gt-ink);font:600 var(--gt-t-label)/1 var(--g-mono);letter-spacing:.08em;text-transform:uppercase;cursor:pointer}
@media (max-width:1060px){.bj-page .site-nav .nav-links{gap:var(--bj-s2)}}
@media (max-width:760px){
  .bj-page .nav-menu-toggle{display:inline-flex;align-items:center;position:relative;z-index:2}
  .bj-page .site-nav .nav-links{display:none}
  .bj-page.nav-open{overflow:hidden}
  .bj-page.nav-open .site-nav .nav-links{position:fixed;inset:0;z-index:1;display:flex;flex-direction:column;align-items:stretch;gap:0;padding:calc(var(--bj-nav-h) + var(--bj-s3)) var(--bj-gutter) var(--bj-s5);background:var(--g-paper);overflow-y:auto}
  .bj-page.nav-open .site-nav .nav-links a{padding:14px 0;border-bottom:1px solid var(--gt-rule);font:600 var(--gt-t-lede)/1.2 var(--g-sans);letter-spacing:-.02em;color:var(--gt-ink)}
  .bj-page.nav-open .site-nav .brand{position:relative;z-index:2}
  .bj-page.nav-open .rail{display:none}
}

.bj-page .field-footer{background:var(--bj-night);color:var(--bj-night-ink);padding:var(--bj-s6) 0 var(--bj-s5)}
.bj-page .field-footer .footer-inner{max-width:var(--bj-max);margin:0 auto;padding:0 var(--bj-gutter);display:grid;grid-template-columns:2fr 3fr 2fr 2fr;gap:var(--bj-s4)}
.bj-page .field-footer .footer-inner > div:first-child{display:flex;align-items:center;gap:10px;align-self:start;font:800 15px/1 var(--g-sans);letter-spacing:.02em}
.bj-page .field-footer .footer-brand-mark{width:28px;height:28px;filter:invert(1)}
.bj-page .field-footer .footer-inner > div{display:flex;flex-direction:column;align-items:flex-start;gap:10px}
.bj-page .field-footer .footer-inner > div:first-child{flex-direction:row}
.bj-page .field-footer span{font:600 var(--gt-t-label)/1.3 var(--g-mono);letter-spacing:.08em;text-transform:uppercase;color:var(--bj-night-muted)}
.bj-page .field-footer a{text-decoration:none;font:500 var(--gt-t-small)/1.4 var(--g-sans);color:var(--bj-night-ink)}
.bj-page .field-footer a:hover{text-decoration:underline;text-underline-offset:3px}
.bj-page .field-footer p{margin:0;font:400 var(--gt-t-small)/1.5 var(--g-sans);color:var(--bj-night-muted)}
.bj-page .field-footer p span{font:inherit;letter-spacing:0;text-transform:none;color:inherit}
.bj-page .field-footer :focus-visible{outline:2px solid var(--bj-night-ink);outline-offset:3px}
@media (max-width:820px){.bj-page .field-footer .footer-inner{grid-template-columns:1fr 1fr}.bj-page .field-footer .footer-inner > div:first-child{grid-column:1 / -1}}

/* ---------- 06 · Writers on the city (shared literary reader: literary-city.js) ---------- */
:root{--bj-han:"Songti SC","STSong","Noto Serif CJK SC","Source Han Serif SC",var(--g-song)}
.chapter--writers .chapter__title .bj-han{display:inline-block;margin-left:.12em;font:600 .46em/1 var(--bj-han);letter-spacing:.08em;color:var(--bj-accent);vertical-align:.5em}
.chapter--writers .literary-deck{font:500 clamp(18px,1.5vw,21px)/1.85 var(--bj-han);letter-spacing:.02em;max-width:30em}
.literary-meta .bj-label{margin:0 0 var(--bj-s1);color:var(--gt-ink)}
.literary-meta .literary-kicker{color:var(--gt-muted)}
.literary-series{display:flex;flex-wrap:wrap;gap:0;margin-top:var(--bj-s3);border-top:1px solid var(--gt-rule)}
.literary-series a{display:inline-flex;align-items:baseline;gap:8px;min-height:44px;padding:12px 16px 10px 0;margin-right:var(--bj-s2);text-decoration:none;color:var(--gt-ink-2);border-bottom:2px solid transparent}
.literary-series a b{font:600 var(--gt-t-label)/1 var(--g-mono);letter-spacing:.06em;color:var(--gt-muted)}
.literary-series a span{font:600 18px/1 var(--bj-han);letter-spacing:.08em}
.literary-series a:hover{color:var(--gt-ink)}
.literary-series a[aria-current]{color:var(--gt-ink);border-bottom-color:var(--bj-accent)}
.literary-series a[aria-current] b{color:var(--bj-accent)}
.literary-body{display:grid;grid-template-columns:repeat(12,1fr);column-gap:var(--bj-s3);margin-top:var(--bj-s6);align-items:start}
.literary-plate{grid-column:1 / span 5;position:sticky;top:calc(var(--bj-rail-h) + var(--bj-s4));margin:0}
.literary-plate .cap{line-height:1.7}
.literary-spreads{grid-column:7 / span 6}
.literary-spread{padding:var(--bj-s4) 0 var(--bj-s5);border-top:1px solid var(--gt-rule)}
.literary-spread:first-child{padding-top:0;border-top:0}
.literary-citation{display:flex;align-items:center;gap:12px;font:600 var(--gt-t-label)/1 var(--g-mono);letter-spacing:.08em;text-transform:uppercase}
.literary-citation__no{display:inline-flex;align-items:center;gap:12px;color:var(--bj-accent)}
.literary-citation__no::after{content:"";width:24px;height:2px;background:var(--bj-accent)}
.literary-quote{margin:0}
.literary-quote p{margin:0}
.literary-quote--zh{margin-top:var(--bj-s3);font:600 clamp(24px,2.3vw,34px)/1.6 var(--bj-han);letter-spacing:.04em;color:var(--gt-ink)}
.literary-quote--en{margin-top:var(--bj-s2);max-width:30em;font:italic 400 clamp(19px,1.5vw,21px)/1.5 var(--g-serif);color:var(--gt-ink-2)}
.literary-author{margin:var(--bj-s3) 0 0;display:flex;flex-wrap:wrap;align-items:baseline;gap:4px 10px}
.literary-author b{font:700 18px/1.3 var(--bj-han);letter-spacing:.1em}
.literary-author cite{font:500 16px/1.3 var(--bj-han);font-style:normal;color:var(--gt-ink-2)}
.literary-author span{font:600 var(--gt-t-label)/1 var(--g-mono);letter-spacing:.06em;color:var(--gt-muted)}
.literary-source a{color:var(--gt-ink)}
.literary-colophon{display:grid;grid-template-columns:repeat(12,1fr);column-gap:var(--bj-s3);align-items:baseline;margin-top:var(--bj-s6);padding-top:var(--bj-s3);border-top:2px solid var(--bj-accent)}
.literary-colophon .bj-label{grid-column:1 / span 3;margin:0;color:var(--gt-ink)}
.literary-colophon__text{grid-column:4 / span 6;margin:0;font:500 clamp(18px,1.5vw,21px)/1.85 var(--bj-han);letter-spacing:.02em}
.literary-colophon__next{grid-column:10 / span 3;justify-self:end;font:600 var(--g-t-ui)/1.4 var(--g-sans);text-underline-offset:5px}
.literary-colophon__next span[lang]{font-family:var(--bj-han)}
.literary-motion-ready .literary-city [data-literary-reveal]{transition:opacity .6s ease,transform .7s cubic-bezier(.22,.61,.36,1)}
.literary-motion-ready .literary-city [data-literary-reveal]:not(.is-visible){opacity:0;transform:translate3d(0,16px,0)}
@media (max-width:820px){
  .literary-body,.literary-colophon{display:block}
  .literary-plate{position:static;margin-bottom:var(--bj-s5)}
  .literary-colophon__text{margin:var(--bj-s2) 0}
  .literary-colophon__next{display:inline-block}
}

/* ---------- 07 · City visual archive (shared archive runtime: city-archive.js) ---------- */
.chapter--archive{background:var(--bj-paper-2)}
.chapter--archive + .end{margin-top:0}
.city-archive-postcard-link{display:inline-flex;gap:8px;margin-top:var(--bj-s3);font:600 var(--g-t-ui)/1.4 var(--g-sans);text-underline-offset:5px}
.city-archive-sub{margin-top:var(--bj-s6);padding-bottom:var(--bj-s2);border-bottom:1px solid var(--gt-rule)}
.city-archive-editions,.city-archive-stickers{list-style:none;margin:var(--bj-s4) 0 0;padding:0;display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:var(--bj-s5) var(--bj-s3);align-items:end}
.city-archive-edition,.city-archive-sticker{display:block;width:100%;padding:0;border:0;background:none;color:inherit;text-align:left;cursor:zoom-in}
.city-archive-edition .plate__frame{display:block;box-shadow:0 1px 0 var(--gt-rule)}
.city-archive-edition img,.city-archive-sticker img{transition:transform .6s cubic-bezier(.22,.61,.36,1)}
.city-archive-edition:hover img,.city-archive-sticker:hover img{transform:scale(1.03)}
.city-archive-edition__tech{color:var(--gt-muted)}
.city-archive-sticker__shape{display:block;overflow:hidden;background:var(--gt-rule)}
.city-archive-sticker__shape img{width:100%;height:100%;object-fit:cover}
.city-archive-sticker.is-ticket .city-archive-sticker__shape{aspect-ratio:3/2;-webkit-mask:radial-gradient(circle 14px at 0 50%,#0000 97%,#000) left/51% 100% no-repeat,radial-gradient(circle 14px at 100% 50%,#0000 97%,#000) right/51% 100% no-repeat;mask:radial-gradient(circle 14px at 0 50%,#0000 97%,#000) left/51% 100% no-repeat,radial-gradient(circle 14px at 100% 50%,#0000 97%,#000) right/51% 100% no-repeat}
.city-archive-sticker.is-circle .city-archive-sticker__shape{width:82%;aspect-ratio:1/1;border-radius:50%}
.city-archive-sticker.is-strip .city-archive-sticker__shape{width:64%;aspect-ratio:9/16;outline:8px solid var(--g-paper);outline-offset:-8px}
.city-archive-sticker.is-fragment .city-archive-sticker__shape{aspect-ratio:4/5;clip-path:polygon(0 7%,100% 0,95% 100%,5% 93%)}
.city-archive-edition:focus-visible,.city-archive-sticker:focus-visible{outline:2px solid var(--bj-accent);outline-offset:6px}
@media (max-width:820px){
  .city-archive-editions{grid-template-columns:repeat(2,minmax(0,1fr));gap:var(--bj-s4) var(--bj-s2)}
  .city-archive-stickers{grid-template-columns:repeat(2,minmax(0,1fr));gap:var(--bj-s4) var(--bj-s2)}
}
.city-archive-lightbox{width:min(1120px,calc(100vw - 32px));height:min(92svh,1000px);max-width:none;max-height:none;padding:var(--bj-s3);border:0;background:var(--bj-night);color:var(--bj-night-ink);overflow:hidden}
.city-archive-lightbox[open]{display:grid;grid-template-rows:auto minmax(0,1fr) auto;gap:var(--bj-s2)}
.city-archive-lightbox::backdrop{background:rgb(0 0 0 / .82)}
.city-archive-lightbox__bar,.city-archive-lightbox__nav{display:flex;align-items:center;justify-content:space-between;gap:var(--bj-s2)}
.city-archive-lightbox__nav{justify-content:center}
.city-archive-lightbox .cap{margin:0;color:var(--bj-night-muted)}
.city-archive-lightbox__count{color:var(--bj-night-ink)!important}
.city-archive-lightbox figure{margin:0;min-height:0;display:grid;grid-template-rows:minmax(0,1fr) auto;gap:var(--bj-s2);justify-items:center}
.city-archive-lightbox figure img{width:auto;max-width:100%;height:100%;min-height:0;object-fit:contain}
.city-archive-lightbox__btn{min-width:44px;height:44px;padding:0 16px;border:1px solid rgb(236 235 229 / .55);background:transparent;color:var(--bj-night-ink);font:600 var(--gt-t-small)/1 var(--g-sans);cursor:pointer}
.city-archive-lightbox__btn:hover{background:var(--bj-night-ink);color:var(--bj-night)}
.city-archive-lightbox :focus-visible{outline:2px solid var(--bj-night-ink);outline-offset:3px}

@media (prefers-reduced-motion:reduce){
  .literary-motion-ready .literary-city [data-literary-reveal]{transition:none}
  .city-archive-edition:hover img,.city-archive-sticker:hover img{transform:none}
}