/* Brand sheet round 5 — one shared shell for index.html, list.html, history.html, sources.html.
 * Prototype only. Fonts are the private OFL copies verified for faculty roster round 7
 * (.local/faculty-roster-round07-work/fonts/, git-ignored); referenced, never copied or committed.
 * Tokens follow docs/project/global-ia-brand-2026-10-04.md §d. Pages carry no inline colours or sizes;
 * every position (datum years, chain divisions) is a class defined here. */

@font-face { font-family: "NSerif"; src: url("628dc7aafea9-NotoSerifSC-VF.ttf") format("truetype"); font-weight: 200 900; font-display: block; }
@font-face { font-family: "NSans"; src: url("e10d77a580ec-NotoSansSC-VF.ttf") format("truetype"); font-weight: 100 900; font-display: block; }
@font-face { font-family: "Cinzel"; src: url("3bd238c83fb0-cinzel.ttf") format("truetype"); font-weight: 400 900; font-display: block; }

:root {
  --paper: #F8F7F3;
  --ink: #173F36;          /* 10.88:1 on paper */
  --ink-2: #3D5A52;        /* 7.04:1 on paper */
  --mark: #A63A21;         /* 桩号红, 6.03:1 on paper; only 「当前位置」 */
  --rule: rgba(23, 63, 54, .18);
  --tick: rgba(61, 90, 82, .45);
  --tint: #E9ECE7;
  --on-ink: #F8F7F3;
  --on-ink-2: #D2DCD6;     /* 8.3:1 on ink (round 5: raised from 6.6) */
  --on-ink-rule: rgba(248, 247, 243, .28);

  --serif: "NSerif", "Songti SC", serif;
  --sans: "NSans", "PingFang SC", sans-serif;
  --latin: "Cinzel", "Times New Roman", serif;

  --maxw: 1240px;
  --pad: max(clamp(20px, 4vw, 64px), calc((100vw - var(--maxw)) / 2));  /* continuous: no jump between 1280 and 1366 */
  --gut: 32px;
  --hdr: 72px;
  --s1: 4px; --s2: 8px; --s3: 12px; --s4: 16px; --s5: 24px; --s6: 32px; --s7: 48px; --s8: 72px; --s9: 96px;
}

* { box-sizing: border-box; }
html, body { margin: 0; background: var(--paper); color: var(--ink); }
body { font: 400 17px/1.75 var(--sans); font-synthesis: none; -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; overflow-wrap: anywhere; }
h1, h2, h3, p, ol, ul, dl, dd, figure { margin: 0; padding: 0; }
ol, ul { list-style: none; }
img { display: block; max-width: 100%; }
button { font: inherit; color: inherit; }
.vh { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.wrap { padding-left: var(--pad); padding-right: var(--pad); }
.latin { font-family: var(--latin); font-weight: 500; text-transform: uppercase; letter-spacing: .14em; }

/* ---------- focus (one rule for every focusable; outline never changes the box) ---------- */
:focus { outline: none; }
:focus-visible { outline: 2px solid var(--ink); outline-offset: 3px; }
.ftr :focus-visible { outline-color: var(--on-ink); }

/* ---------- COMPONENT link: static no underline, 1px underline on hover/focus; ↗ external, → go ---------- */
a { color: inherit; text-decoration: none; }
a:hover, a:focus-visible { text-decoration: underline; text-underline-offset: 4px; text-decoration-thickness: 1px; }
a.ext::after { content: "\2009↗"; font-family: var(--sans); font-size: 15px; opacity: .6; }
a.go::after { content: "\2009→"; font-family: var(--sans); }
.chip:hover, .chip:focus-visible, .brand:hover, .brand:focus-visible { text-decoration: none; }

/* ---------- COMPONENT button: 44px, 1px ink frame, 2px radius, Serif 600 19; hover = underline only (no colour change) ---------- */
.btn { display: inline-flex; align-items: center; gap: 10px; height: 44px; padding: 0 18px; border: 1px solid var(--ink); border-radius: 2px; font: 600 19px/1 var(--serif); background: transparent; color: var(--ink); }
.btn:hover { text-decoration: underline; text-underline-offset: 5px; text-decoration-thickness: 1px; }

/* ---------- COMPONENT chip (one class for every chip): 1px ink frame, 2px radius.
 *   button.chip = filter toggle; aria-pressed=true → filled ink + ×.  a.chip = area link (outline).
 *   .chip.sm = card tag: outline in --rule, smaller (13px, 26px high), not interactive. ---------- */
.chip { display: inline-flex; align-items: center; gap: 8px; min-height: 32px; padding: 0 11px; border: 1px solid var(--ink); border-radius: 2px;
  background: transparent; color: var(--ink); font: 500 14px/1.3 var(--sans); text-align: left; }
button.chip { cursor: pointer; }
.chip[aria-pressed="true"] { background: var(--ink); color: var(--paper); }
.chip .x { display: none; font: 400 14px/1 var(--sans); }
.chip[aria-pressed="true"] .x { display: inline; }
.chip.sm { min-height: 26px; padding: 0 8px; border-color: var(--rule); color: var(--ink-2); font: 400 13px/1.3 var(--sans); }
button.chip:hover .t { text-decoration: underline; text-underline-offset: 4px; text-decoration-thickness: 1px; }

/* ---------- COMPONENT station line (README 装置组件表) ----------
 * line  2px ink (on ink: 2px paper);  dot  10px disc, ink, centred on the line;  plate  .kp 22px high, 1px ink frame,
 * paper fill, Cinzel 500 13px .08em.  Current position (.here) = red dot + red plate + bold ink label; red is used
 * nowhere else. Dots and plates are aria-hidden; the station name is always text. */
.stn { position: relative; }
.dot { position: absolute; width: 10px; height: 10px; border-radius: 50%; background: var(--ink); }
.kp { display: inline-flex; align-items: center; height: 22px; padding: 0 6px; border: 1px solid var(--ink); background: var(--paper);
  color: var(--ink); font: 500 13px/1 var(--latin); letter-spacing: .08em; font-variant-numeric: lining-nums tabular-nums; white-space: nowrap; }
.here .kp, .kp.here { color: var(--mark); border-color: var(--mark); }
.here > .dot { background: var(--mark); }
/* full section line (every primary section K1–K6 on the home page): dot at the left end, faint ticks under the line */
.sl { position: relative; height: 2px; background: var(--ink); }
.sl .dot { left: 0; top: -4px; }
.sl::after { content: ""; position: absolute; left: 0; right: 0; top: 2px; height: 4px;
  background: repeating-linear-gradient(to right, var(--tick) 0 1px, transparent 1px calc(100% / 70)); }
.sh { margin-top: var(--s5); margin-bottom: var(--s6); }
.sh-row { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 14px; margin-top: 20px; }
.sh-row h2 { font: 700 32px/1.25 var(--serif); letter-spacing: .01em; }
.sh-row > a { margin-left: auto; font: 500 15px/1.6 var(--sans); }
/* datum line (history; home K5 preview): 2px line, ticks 1 year / 10 years from 1914 */
.chain { --n: 7; position: relative; height: 10px; border-top: 2px solid var(--ink);
  background:
    repeating-linear-gradient(to right, var(--ink) 0 1px, transparent 1px calc(100% / var(--n))) top left / 100% 9px no-repeat,
    repeating-linear-gradient(to right, var(--tick) 0 1px, transparent 1px calc(100% / (var(--n) * 10))) top left / 100% 4px no-repeat; }

/* ---------- header: the header rule is the station line; each nav item is a station (plate + name, dot on the line) ---------- */
.hdr { position: relative; height: var(--hdr); display: flex; align-items: center; justify-content: space-between; border-bottom: 2px solid var(--ink); }
.brand { display: block; line-height: 1; }
.brand-cn { display: block; font: 700 22px/1.1 var(--serif); letter-spacing: .02em; white-space: nowrap; }
.brand-cn .mid { font-family: var(--sans); font-weight: 500; margin: 0 -.14em; }
.brand-en { display: block; margin-top: 4px; font: 500 13px/1 var(--latin); letter-spacing: .14em; }
.nav { display: flex; align-items: center; height: 100%; }
.nav ol { display: flex; gap: 24px; height: 100%; }
.nav li { display: flex; align-items: center; height: 100%; }
.nav li > .dot { left: 50%; margin-left: -5px; bottom: -6px; }
.nav a { display: inline-flex; align-items: center; gap: 7px; font: 500 15px/1 var(--sans); padding: 8px 0; text-underline-offset: 6px; }
.nav .kp { height: 20px; padding: 0 5px; }
.nav .here a { font-weight: 700; color: var(--ink); }
.tools { display: flex; align-items: center; gap: 4px; margin-left: 24px; padding-left: 20px; border-left: 1px solid var(--rule); height: 20px; }
.ibtn { display: inline-flex; align-items: center; justify-content: center; gap: 6px; height: 44px; min-width: 44px; padding: 0 4px; border: 0; background: none; color: var(--ink); font: 500 15px/1 var(--sans); cursor: pointer; }
.ibtn svg { width: 18px; height: 18px; stroke: currentColor; fill: none; stroke-width: 1.6; }
.menu-btn { display: none; }

/* ---------- section rhythm and page head (inner pages) ---------- */
.sec { padding-top: var(--s8); }
.crumbs { padding-top: 12px; font: 400 14px/1.6 var(--sans); color: var(--ink-2); }
.crumbs .sep { padding: 0 8px; }
.phead { display: grid; grid-template-columns: 1fr auto; align-items: end; gap: var(--gut); margin-top: 24px; padding-bottom: 28px; }
.dept { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 14px; }
.dept .cn { font: 700 19px/1.3 var(--serif); }
.dept .latin { font-size: 13px; color: var(--ink-2); white-space: nowrap; }
.phead h1 { margin-top: 10px; font: 800 72px/1.1 var(--serif); letter-spacing: -.01em; }
/* H1-right slot (list, history, sources): emblem row (optional) + one fact line */
.own-col { display: flex; flex-direction: column; align-items: flex-end; gap: 10px; padding-bottom: 10px; }
.emb-row { display: flex; gap: 10px; }
.own-col .emb { width: 32px; height: 32px; }
.phead .own { font: 400 15px/1 var(--sans); color: var(--ink-2); }
.phead .own b { font: 500 30px/1 var(--latin); color: var(--ink); margin: 0 4px; }
/* same-type sub-navigation (list): 全部 n · 教授/研究员 n · 副教授/副研究员 n */
.subnav { display: flex; flex-wrap: wrap; gap: 0 32px; border-top: 2px solid var(--ink); }
.subnav a { display: inline-flex; align-items: baseline; gap: 8px; min-height: 44px; padding-top: 14px; }
.subnav .nm { font: 600 17px/1.4 var(--serif); }
.subnav a[aria-current] .nm { font-weight: 800; }
/* counters are labels, not links: inline-block so the link underline never reaches them; muted, no frame */
.subnav a:hover { text-decoration: none; }
.subnav a:hover .nm { text-decoration: underline; text-underline-offset: 4px; text-decoration-thickness: 1px; }
.subnav .n { display: inline-block; font: 400 14px/1 var(--sans); color: var(--ink-2); font-variant-numeric: lining-nums tabular-nums; }
.grp-h { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 14px; margin-top: 40px; padding-bottom: 14px; border-bottom: 2px solid var(--ink); }
.grp-h h2 { font: 700 28px/1.25 var(--serif); }
.grp-h .n { font: 500 22px/1 var(--latin); color: var(--ink-2); }

/* ---------- footer ---------- */
.ftr { margin-top: var(--s9); background: var(--ink); color: var(--on-ink); padding-top: var(--s7); padding-bottom: var(--s7); }
.ftr-route { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); }
.ftr-route > li { padding-top: 20px; padding-right: 12px; border-top: 2px solid var(--on-ink); }
.ftr-route > li > .dot { left: 0; top: -6px; background: var(--on-ink); }
.ftr-route .nm { display: block; margin-top: 10px; font: 600 18px/1.4 var(--serif); }
.ftr-route ul { margin-top: 8px; }
.ftr-route ul a { display: inline-block; font: 400 14px/2 var(--sans); color: var(--on-ink-2); }
.ftr-contact { display: grid; grid-template-columns: 5fr 7fr; gap: var(--s6); margin-top: var(--s8); padding-top: var(--s6); border-top: 1px solid var(--on-ink-rule); }
.ftr-id .brand-cn { font-size: 24px; }
.ftr-dept { margin-top: var(--s5); display: flex; flex-wrap: wrap; align-items: baseline; gap: 6px 14px; }
.ftr-dept .cn { font: 700 18px/1.4 var(--serif); }
.ftr-dept .latin { font-size: 13px; color: var(--on-ink-2); }
.ftr-dl { display: grid; grid-template-columns: 88px 1fr; gap: 10px 16px; font: 400 15px/1.6 var(--sans); }
.ftr-dl dt { color: var(--on-ink-2); font-weight: 500; }
.ftr-note { margin-top: var(--s5); font: 400 13px/1.7 var(--sans); color: var(--on-ink-2); }
.ftr-note { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 14px; }
.ftr-note a { font: 600 15px/1.6 var(--serif); color: var(--on-ink); text-decoration: underline; text-underline-offset: 3px; text-decoration-thickness: 1px; }

/* ---------- home: hero ---------- */
/* round 6: split hero — persistent identity (5/12) + framed carousel (7/12, home-news.css); 16px clear of the header dots */
.hero { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: var(--gut); align-items: start; padding-top: 24px; }
main { display: block; margin-top: 16px; }
.lock { padding-top: 24px; padding-bottom: 24px; }
.lock-k { display: flex; align-items: center; gap: 14px; }
.est { font: 500 15px/1 var(--latin); letter-spacing: .24em; color: var(--ink-2); }
.lock h1 { margin-top: 18px; font: 800 min(92px, 6vw)/1.08 var(--serif); letter-spacing: -.015em; }
/* English name: one line at ≥1024 (size follows the column), word-boundary wrap on phones */
/* hero English name (round 7: Department of Transportation Infrastructure Engineering): always two lines, broken after
 * TRANSPORTATION; word-boundary wrapping only, never wider than the identity column */
.lock .en { margin-top: 12px; font: 500 clamp(13px, 1.1vw, 16px)/1.3 var(--latin); letter-spacing: .06em; text-transform: uppercase; white-space: normal; overflow-wrap: normal; word-break: normal; }
.lock .stmt { margin-top: 24px; max-width: 30em; font: 400 17px/1.8 var(--sans); text-wrap: pretty; }
.act { display: flex; align-items: center; gap: 10px; margin-top: 28px; }
.act .lbl { font: 500 15px/1 var(--sans); margin-right: 8px; }
.act-in { margin-top: 12px; font: 500 15px/1.6 var(--sans); color: var(--ink-2); }
/* ---------- home: directions, areas, admissions, news ---------- */
.dirs { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--gut); }
/* second visual language: one abstract line emblem per direction (aria-hidden, stroke 1.5, ink-2) */
/* emblems: one 24-unit grid (viewBox 0 0 24 24), 1.5px stroke kept at every size (non-scaling), square caps */
.emb { display: block; width: 48px; height: 48px; fill: none; stroke: var(--ink-2); stroke-width: 1.5; stroke-linecap: square; }
.emb * { vector-effect: non-scaling-stroke; }
.dir { padding-top: 20px; border-top: 1px solid var(--ink); }
.dir .emb { margin-bottom: 4px; }
.dir h3 { margin-top: 10px; font: 600 34px/1.2 var(--serif); }
.dir p { margin-top: 12px; font: 400 16px/1.8 var(--sans); max-width: 23em; }
.dir .links { margin-top: 16px; font: 500 15px/1.6 var(--sans); }
.areas { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--gut); }
.areas h3 { font: 600 20px/1.4 var(--serif); padding-bottom: 10px; border-bottom: 1px solid var(--rule); }
.areas ul { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 12px; }
.adm { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--gut); }
.adm h3 { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: 4px 12px; font: 600 24px/1.3 var(--serif); padding-bottom: 12px; border-bottom: 2px solid var(--ink); }
.adm h3 a { font: 500 15px/1 var(--sans); }
.dated li { display: grid; grid-template-columns: 112px 1fr; gap: 16px; padding: 14px 0; border-bottom: 1px solid var(--rule); }
.dated time { font: 500 15px/1.75 var(--latin); letter-spacing: .04em; color: var(--ink-2); font-variant-numeric: lining-nums tabular-nums; }
.dated a { font: 500 16px/1.75 var(--sans); }
.portal { margin-top: var(--s5); display: flex; flex-wrap: wrap; gap: 8px 16px; align-items: baseline; font: 400 15px/1.6 var(--sans); color: var(--ink-2); }
.portal a { color: var(--ink); font-weight: 500; }

/* ---------- section rhythm: K3 ink band (paper text), K5 tinted paper band ---------- */
.band-ink, .band-tint { margin-top: var(--s8); padding-bottom: var(--s8); }
.band-ink + .sec, .band-tint + .sec { padding-top: var(--s8); }
.band-ink { background: var(--ink); color: var(--on-ink); }
.band-tint { background: var(--tint); }
.band-ink .sl { background: var(--on-ink); }
.band-ink .sl::after { background: repeating-linear-gradient(to right, var(--on-ink-rule) 0 1px, transparent 1px calc(100% / 70)); }
.band-ink .dot { background: var(--on-ink); }
.band-ink .dated time, .band-ink .portal { color: var(--on-ink-2); }
.band-ink .adm h3 { border-bottom-color: var(--on-ink); }
.band-ink .dated li { border-bottom-color: var(--on-ink-rule); }
.band-ink .portal a { color: var(--on-ink); }
.band-ink :focus-visible { outline-color: var(--on-ink); }

/* ---------- datum (history line; home K5 preview and history page share it) ---------- */
/* Unit = 1 year, 1914 → 2026 spans 112 units: short tick 1 year, long tick 10 years from 1914. */
.datum { position: relative; height: 128px; margin-top: 8px; }
.datum .chain { --n: 11.2; position: absolute; left: 0; right: 0; top: 40px; }
.datum .yr { position: absolute; top: 0; font: 500 24px/1 var(--latin); letter-spacing: .02em; }
.datum .era { position: absolute; top: 58px; max-width: 13em; padding-left: 12px; font: 400 15px/1.6 var(--sans); }
.datum .era > .dot { left: -5px; top: -22px; }
.datum .era .y { display: none; }
.datum .era > .kp { display: flex; width: max-content; margin-bottom: 6px; }
.datum.kd { height: 160px; }
.datum .r { white-space: nowrap; text-align: right; transform: translateX(-100%); padding-left: 0; padding-right: 12px; }
.datum .era.r > .dot { left: auto; right: -5px; }
.datum .era.r > .kp { margin-left: auto; }
.y1914 { left: 0; }
.y1952 { left: 33.93%; }
.y2000 { left: 76.79%; }
.y2024 { left: 98.21%; }
.scale { display: none; margin-top: 8px; font: 400 13px/1.6 var(--sans); color: var(--ink-2); }  /* round 8: the tick-legend sentence is gone; only the evenly-spaced note remains (<1280) */
.snap-note { margin-top: 4px; font: 400 14px/1.6 var(--sans); color: var(--ink-2); }
.snap-note a { color: var(--ink); text-decoration: underline; text-underline-offset: 3px; text-decoration-thickness: 1px; }

/* ---------- home: 数字 band — six recorded figures, Cinzel numerals, one source line ---------- */
.nums-sec { padding-top: var(--s7); }
.nums { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); border-top: 2px solid var(--ink); border-bottom: 1px solid var(--rule); }
.nums li { padding: 22px 12px 22px 0; }
.nums li + li { padding-left: 16px; border-left: 1px solid var(--rule); }
.nv { display: flex; align-items: baseline; gap: 4px; white-space: nowrap; }
.nv b { font: 500 56px/1 var(--latin); font-variant-numeric: lining-nums; }
.nv .u { font: 600 18px/1 var(--serif); }
.cap { display: block; margin-top: 12px; font: 400 15px/1.5 var(--sans); color: var(--ink-2); }
.num-src { margin-top: 10px; font: 400 13px/1.6 var(--sans); color: var(--ink-2); }

/* ---------- home: platforms ---------- */
/* four equal plate-cards: small 「依托平台」 label above, names top-aligned, equal heights per row; nothing added */
.plat-h { margin-bottom: 12px; font: 500 14px/1.6 var(--sans); color: var(--ink-2); letter-spacing: .04em; }
.plat { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--gut); }
.plat li { display: flex; align-items: flex-start; min-height: 112px; padding: 18px 20px; border: 1px solid var(--ink); border-top-width: 2px; border-radius: 2px; font: 600 19px/1.5 var(--serif); }

/* ---------- list page: filter row, area panel ---------- */
.filter { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 14px; margin-top: 40px; padding: 14px 0; border-top: 1px solid var(--rule); border-bottom: 1px solid var(--rule); }
.filter .from { font: 400 14px/1.6 var(--sans); color: var(--ink-2); margin-right: 8px; }
.filter .from a { color: var(--ink); font-weight: 500; }
.filter .found { font: 600 15px/1 var(--sans); }
.filter .any { font: 400 13px/1 var(--sans); color: var(--ink-2); }
.filter .clr { margin-left: auto; font: 500 14px/1 var(--sans); }
.apanel { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--s5) var(--gut); padding: var(--s5) 0; border-bottom: 1px solid var(--rule); }
.apanel fieldset { margin: 0; padding: 0; border: 0; min-width: 0; }
.apanel legend { padding: 0; font: 600 17px/1.4 var(--serif); }
.apanel ul { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 10px; }

/* ---------- COMPONENT card: framed full-colour portrait (4:5, 1px rule, 6px paper mat) + name ↗ + title + research
 * (2-line clamp, full text in DOM; Latin/number runs are atomic .nb so the ellipsis never splits one) + tag chips + email.
 * Grid 3-up ≥1280, 2-up ≥768, 1-up below; empty cells of a short last row stay empty (no mark). Portraits are never desaturated (owner ruling
 * 2026-10-05) and no state changes their colour. ---------- */
.cards { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); column-gap: var(--gut); }
.card { display: grid; grid-template-columns: 104px 1fr; grid-template-rows: auto 1fr; align-content: start; gap: 4px 18px; padding: 24px 0; border-bottom: 1px solid var(--rule); }
.card .ph { grid-row: span 2; align-self: start; width: 104px; padding: 6px; border: 1px solid var(--rule); background: var(--paper); }
.card .ph img { width: 100%; aspect-ratio: 4 / 5; height: auto; object-fit: cover; object-position: 50% 30%; background: var(--tint); }
.card .nmrow { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 12px; }
.card .nm { font: 600 24px/1.25 var(--serif); text-underline-offset: 5px; }
.card .ti { font: 400 14px/1.4 var(--sans); color: var(--ink-2); }
.card .rs { margin-top: 8px; font: 400 15px/1.75 var(--sans); display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.card .tags { margin-top: 8px; display: flex; flex-wrap: wrap; gap: 6px; }
.card .rs .nb { display: inline-block; }
.card .ct { margin-top: 4px; font: 400 14px/1.9 var(--sans); }

/* ---------- history page: eras, disputes, today ---------- */
.era-sec p { margin-top: var(--s4); max-width: 40em; font: 400 17px/1.8 var(--sans); }
.era-sec .rng { font: 500 15px/1 var(--latin); letter-spacing: .04em; color: var(--ink-2); }
.disputes { display: grid; gap: var(--s6); margin-top: var(--s5); }
.dispute h3 { font: 600 20px/1.4 var(--serif); }
.dispute .ev { margin-top: var(--s2); font: 400 16px/1.8 var(--sans); }
.pair { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--gut); margin-top: var(--s4); }
.pair > div { padding: var(--s4) 0 0; border-top: 1px solid var(--ink); }
.pair dt { font: 500 14px/1.6 var(--sans); color: var(--ink-2); }
.pair dd { margin-top: var(--s2); font: 400 16px/1.8 var(--sans); }
.today-sec { margin-top: var(--s8); }
.today-lead { margin-top: var(--s4); max-width: 40em; font: 400 17px/1.8 var(--sans); }
.today { display: grid; grid-template-columns: 5fr 7fr; gap: var(--gut); margin-top: var(--s5); }
.today h3 { font: 600 20px/1.4 var(--serif); padding-bottom: 10px; border-bottom: 1px solid var(--rule); }
.today-dirs { margin-top: var(--s3); font: 600 24px/1.4 var(--serif); }
.today-plat li { padding: 10px 0; border-bottom: 1px solid var(--rule); font: 500 16px/1.6 var(--serif); }
.today-more { margin-top: var(--s3); font: 500 15px/1.6 var(--sans); }
.src-link { margin-top: var(--s7); font: 500 15px/1.6 var(--sans); }

/* ---------- sources page (资料说明) ---------- */
.src-sec { margin-top: var(--s7); }
.src-sec .grp-h { margin-top: 0; }
.srcs > div { display: grid; grid-template-columns: 180px minmax(0, 1fr) 120px; gap: 4px 24px; padding: 14px 0; border-bottom: 1px solid var(--rule); }
.srcs dt { font: 600 17px/1.6 var(--serif); }
.srcs dd { font: 400 16px/1.7 var(--sans); }
.srcs .rd { font: 500 15px/1.7 var(--latin); letter-spacing: .04em; color: var(--ink-2); text-align: right; font-variant-numeric: lining-nums tabular-nums; }
.src-note, .src-close { margin-top: var(--s4); font: 400 15px/1.7 var(--sans); color: var(--ink-2); }
.src-p { margin-top: var(--s4); max-width: 40em; font: 400 17px/1.8 var(--sans); }
.notes-lead { margin-top: var(--s4); max-width: 44em; font: 400 15px/1.8 var(--sans); color: var(--ink-2); }
.dispute .hid { margin-right: 12px; font: 500 13px/1 var(--latin); letter-spacing: .08em; color: var(--ink-2); }

/* ---------- 1280: tighter nav, 4-column route ---------- */
@media (max-width: 1279px) {
  .nav ol { gap: 14px; }
  .tools { margin-left: 20px; padding-left: 14px; }
  .ftr-route { grid-template-columns: repeat(4, minmax(0, 1fr)); row-gap: 40px; }
  /* round 8 (SHELL-01): the K plates stay at 1024–1279; the row is tightened so brand and nav keep ≥24px apart */
  .nav a { gap: 5px; }
  .nav .kp { padding: 0 4px; }
  .cards { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (min-width: 1024px) and (max-width: 1139px) {
  .nav a { font-size: 14px; }  /* with the plates back, 14px keeps ≥24px between brand and nav at 1024 */
}

/* ---------- below 1280 the datum labels would collide: the datum becomes a vertical year list ---------- */
@media (max-width: 1279px) {
  .datum, .datum.kd { height: auto; }
  .datum .chain, .datum .yr { display: none; }
  .datum ol { border-left: 2px solid var(--ink); margin-left: 4px; }
  .datum .era { position: static; display: grid; grid-template-columns: 64px 1fr; align-items: center; gap: 4px 12px; max-width: none; padding: 12px 0 12px 20px; transform: none; text-align: left; white-space: normal; }
  .datum .era > .dot, .datum .era.r > .dot { left: -6px; right: auto; top: 50%; margin-top: -5px; }
  .datum .era .y { display: block; font: 500 18px/1.4 var(--latin); }
  .datum .era > .kp, .datum .era.r > .kp { grid-column: 1 / -1; margin: 0; }
  .datum .era.r { padding-right: 0; }
}

/* ---------- 1024: single column, vertical line map ---------- */
@media (max-width: 1023px) {
  :root { --hdr: 60px; --gut: 20px; }
  body { font-size: 16px; line-height: 1.7; }
  .nav ol, .tools .lbl { display: none; }
  .tools { border-left: 0; margin-left: 0; padding-left: 0; height: auto; }
  .menu-btn { display: inline-flex; }
  .brand-cn { font-size: 19px; }
  .brand-en { font-size: 13px; letter-spacing: .1em; }

  .hero { grid-template-columns: 1fr; gap: 24px; padding-top: 8px; }
  .lock { padding-top: 12px; padding-bottom: 0; }
  .est { font-size: 13px; letter-spacing: .2em; }
  .lock h1 { margin-top: 10px; font-size: calc((100vw - 40px) * .19); }
  .lock .en { margin-top: 8px; font-size: calc((100vw - 40px) * .044); white-space: normal; overflow-wrap: normal; text-wrap: balance; }
  .lock .stmt { margin-top: 14px; font-size: 15px; line-height: 1.75; }
  .act { display: grid; grid-template-columns: auto 1fr 1fr; gap: 8px; margin-top: 18px; }
  .act .btn { justify-content: center; }
  /* vertical line map: the footer site map (2px line on the left, dots on it) */
  .ftr-route { display: block; border-top: 0; border-left: 2px solid var(--ink); margin-left: 4px; }
  .ftr-route > li { padding: 0 0 0 20px; border-top: 0; }
  .ftr-route > li > .dot { left: -6px; top: 26px; }
  .band-ink, .band-tint { margin-top: var(--s7); padding-bottom: var(--s7); }
  .band-ink + .sec, .band-tint + .sec { padding-top: var(--s7); }
  .today { grid-template-columns: 1fr; }
  .today-dirs { font-size: 20px; }
  .own-col { flex-direction: row-reverse; justify-content: flex-end; align-items: center; gap: 14px; padding-bottom: 0; }
  .own-col .emb { width: 24px; height: 24px; }
  .dept .latin { white-space: normal; overflow-wrap: normal; }

  .sec { padding-top: var(--s7); }
  .sh { margin-bottom: var(--s5); }
  .sh-row { margin-top: 16px; }
  .sh-row h2 { font-size: 24px; }
  .nums { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .nums li, .nums li + li { padding: 18px 8px 18px 0; border-left: 0; border-top: 1px solid var(--rule); }
  .nums li:nth-child(-n+3) { border-top: 0; }
  .nv b { font-size: 44px; }
  .srcs > div { grid-template-columns: 1fr; }
  .srcs .rd { text-align: left; }
  .dirs, .adm, .areas, .plat, .ftr-contact, .apanel, .pair { grid-template-columns: 1fr; }
  .dirs { gap: 28px; }
  .dir h3 { font-size: 28px; }
  .dir p { font-size: 15px; }
  .areas { gap: 20px; }
  .areas ul { display: flex; flex-wrap: wrap; gap: 0 18px; }
  .chip { min-height: 44px; }
  .chip.sm { min-height: 26px; }
  .adm { gap: 36px; }
  .dated li { grid-template-columns: 1fr; gap: 2px; padding: 12px 0; }
  .dated time { font-size: 14px; }
  .dated a { font-size: 15px; }

  .ftr { margin-top: var(--s8); padding-top: var(--s6); }
  .ftr-route { border-left-color: var(--on-ink); }
  .ftr-route > li { padding: 4px 0 6px 20px; }
  .ftr-route .nm { display: inline; margin: 0 0 0 10px; font-size: 17px; }
  /* sub-links: equal 24px between labels (12px padding each side), first one flush with the station name */
  .ftr-route ul { display: flex; flex-wrap: wrap; gap: 0; margin-top: 2px; }
  .ftr-route ul a { line-height: 44px; padding: 0 12px; }
  .ftr-route ul li:first-child a { margin-left: -12px; }
  .ftr-contact { margin-top: var(--s6); gap: var(--s5); }
  .ftr-dl { grid-template-columns: 64px 1fr; }

  .phead { grid-template-columns: 1fr; gap: 8px; margin-top: 14px; padding-bottom: 20px; }
  .phead h1 { font-size: 44px; margin-top: 8px; }
  .phead .own { padding-bottom: 0; }
  .phead .own b { font-size: 22px; }
  .dept .latin { font-size: 13px; letter-spacing: .1em; }
  .filter { margin-top: 28px; gap: 10px; }
  .filter .from { flex-basis: 100%; }
  .filter .clr { margin-left: 0; min-height: 44px; display: inline-flex; align-items: center; }
  .card .ct a { display: inline-flex; align-items: center; min-height: 44px; }
  .grp-h h2 { font-size: 22px; }
  .grp-h .n { font-size: 18px; }
  .era-sec p { font-size: 16px; }

  /* touch targets ≥44×44: block links grow to 44px; links inside running text keep the line box and get an
   * invisible padded hit area (inline padding does not move lines; the negative side margin cancels the width) */
  .brand { padding-block: 4px; }
  .sh-row > a, .src-link a, .dir h3 a, .adm h3 a, .portal a, .dated a, .datum .era a, .card .nm { display: inline-flex; align-items: center; min-height: 44px; }
  a.chip, .ftr-route ul a { min-width: 44px; }
  .ftr-route .nm { display: inline-flex; align-items: center; min-height: 44px; min-width: 44px; vertical-align: middle; }
  .today-more a { display: inline-flex; align-items: center; min-height: 44px; }
  .links a, .crumbs a, .snap-note a, .from a, .today-dirs a, .ftr-dl a { padding: 12px 8px; margin: 0 -8px; }
  .ftr-note a { padding: 13px 8px; margin: 0 -8px; }
  .num-src { display: flex; flex-wrap: wrap; align-items: center; }
  .num-src a { display: inline-flex; align-items: center; min-height: 44px; }  /* 13px lines: 13px padding keeps the hit box ≥44 */
  .act-in a, .srcs a { display: inline-flex; align-items: center; min-height: 44px; }
  .subnav { display: block; }
  .subnav li { border-bottom: 1px solid var(--rule); }
  .subnav a { display: flex; justify-content: space-between; align-items: center; width: 100%; padding-top: 0; }
}
/* ---------- below 768: one card per row ---------- */
@media (max-width: 767px) {
  .nums { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .nums li:nth-child(3) { border-top: 1px solid var(--rule); }
  .cards { grid-template-columns: 1fr; }
  .card { grid-template-columns: 78px 1fr; gap: 10px 14px; }
  .card .ph { grid-row: auto; width: 78px; }
  .card .nmrow { flex-direction: column; align-items: flex-start; align-self: center; }
  .card .nm { font-size: 21px; }
  .card .body { grid-column: 1 / -1; }
}

/* ---------- round 5/6: word units, research cut, count wording, timeline and nav dots on small screens ---------- */
.w { white-space: nowrap; }
.card .rs-v::after { content: "\2026"; }
.filter .found b { font-weight: 700; }
.num-src .sep { padding: 0 8px; }
.num-src .lk { color: var(--ink); text-decoration: underline; text-underline-offset: 3px; text-decoration-thickness: 1px; }
.en-br { display: inline; }
.k-br { display: none; }
.ftr-dept .latin { overflow-wrap: normal; }
@media (max-width: 1279px) {
  /* each milestone is its own positioning box, so its dot sits on the line at the row's vertical centre */
  .datum .era { position: relative; left: auto; top: auto; }
  /* the vertical list is evenly spaced, so its note says 示意，不按比例 instead of the tick legend */
  .scale { display: block; }
}
@media (max-width: 1023px) {
  .plat { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; }
  .plat li { min-height: 96px; font-size: 17px; }
  /* the header rule keeps the six station dots (names live in the menu); current station dot stays red */
  .nav ol { display: flex; position: absolute; left: 0; right: 0; bottom: 0; height: 0; gap: 0; justify-content: space-around; }
  .nav ol li { height: 0; }
  .nav ol li > a { display: none; }
}
@media (max-width: 1023px) {
  .lock .en { font-size: min(calc((100vw - 40px) * .044), 22px); }
}
@media (max-width: 579px) {
  .k-br { display: inline; }  /* kicker: DEPARTMENT OF TRANSPORTATION / INFRASTRUCTURE ENGINEERING (round 8: up to 579px, no orphan INFRASTRUCTURE / ENGINEERING split at 520–579) */
}
@media (max-width: 767px) {
  .plat { grid-template-columns: 1fr; }
  .plat li { min-height: 0; }
}
@media (prefers-reduced-motion: reduce) { * { transition: none !important; animation: none !important; } }

/* Shared mobile navigation. All rules are scoped to avoid page filter/lightbox styles. */
.site-menu { position: fixed; inset: 0 0 0 auto; margin: 0; width: min(100%, 600px); max-width: none; height: 100vh; height: 100dvh; max-height: none; padding: 0; border: 0; border-left: 1px solid var(--rule); background: var(--paper); color: var(--ink); overflow: hidden; }
.site-menu:not([open]) { display: none; }
.site-menu[open] { display: flex; flex-direction: column; }
.site-menu::backdrop { background: rgb(23 63 54 / 42%); }
.site-menu .menu-head { display: flex; flex: 0 0 auto; align-items: center; justify-content: space-between; min-height: 60px; margin: 0 20px; padding-top: env(safe-area-inset-top); border-bottom: 2px solid var(--ink); gap: 16px; }
.site-menu .menu-title { font: 700 20px/1.4 var(--serif); }
.site-menu .menu-close { flex: 0 0 44px; }
.site-menu .menu-scroll { flex: 1 1 auto; min-height: 0; padding: 24px 24px max(24px, env(safe-area-inset-bottom)); overflow-y: auto; overscroll-behavior: contain; -webkit-overflow-scrolling: touch; }
.site-menu .menu-route { position: relative; padding: 0 0 0 24px; margin: 0; border-left: 2px solid var(--ink); list-style: none; }
.site-menu .menu-route > li { position: relative; margin: 0; }
.site-menu .menu-route > li::before { content: ""; position: absolute; left: -30px; top: 27px; width: 10px; height: 10px; border-radius: 50%; background: var(--ink); }
.site-menu .menu-route > li.here::before { background: var(--mark); }
.site-menu .menu-route a { display: flex; align-items: center; min-height: 64px; gap: 16px; padding: 10px 0; border-bottom: 1px solid var(--rule); font: 500 20px/1.5 var(--serif); }
.site-menu .menu-route a[aria-current="page"] { font-weight: 700; }
.site-menu .menu-route .kp { flex: 0 0 auto; }
.site-menu .menu-route .menu-label { min-width: 0; }
.site-menu .menu-meta { margin-top: 24px; padding-left: 26px; font: 400 14px/1.6 var(--sans); color: var(--ink-2); }
.site-menu .menu-meta a { display: inline-flex; align-items: center; min-height: 52px; }
.site-menu :focus-visible { outline: 2px solid var(--ink); outline-offset: 3px; }
@media (min-width: 1024px) { .site-menu[open] { display: none; } }

/* Shared site search dialog. Scoped to .site-search so page rules are untouched. */
.site-search { position: fixed; inset: 0; margin: 10vh auto auto; width: min(100% - 48px, 760px); max-width: none; height: auto; max-height: 80vh; max-height: 80dvh; padding: 0; border: 1px solid var(--rule); border-top: 2px solid var(--ink); background: var(--paper); color: var(--ink); overflow: hidden; }
.site-search:not([open]) { display: none; }
.site-search[open] { display: flex; flex-direction: column; }
.site-search::backdrop { background: rgb(23 63 54 / 42%); }
.site-search .search-head { display: flex; flex: 0 0 auto; align-items: center; justify-content: space-between; gap: 16px; min-height: 56px; margin: 0 24px; padding-top: env(safe-area-inset-top); }
.site-search .search-title { font: 700 20px/1.4 var(--serif); }
.site-search .search-close { flex: 0 0 44px; margin-right: -8px; }
.site-search .search-form { flex: 0 0 auto; margin: 0 24px; }
.site-search .search-box { display: flex; align-items: center; gap: 10px; min-height: 52px; padding: 0 14px; border: 1px solid var(--ink); background: #fff; }
.site-search .search-box svg { flex: 0 0 18px; width: 18px; height: 18px; stroke: var(--ink-2); fill: none; stroke-width: 1.6; }
.site-search .search-box input { flex: 1 1 auto; min-width: 0; height: 50px; border: 0; background: none; color: var(--ink); font: 400 17px/1.4 var(--sans); outline: none; }
.site-search .search-box input::-webkit-search-cancel-button { -webkit-appearance: none; appearance: none; }
.site-search .search-box input::placeholder { color: var(--ink-2); opacity: 1; }
.site-search .search-box:focus-within { outline: 2px solid var(--ink); outline-offset: 2px; }
.site-search .search-status { flex: 0 0 auto; margin: 12px 24px 0; padding-bottom: 12px; border-bottom: 1px solid var(--rule); font: 400 14px/1.6 var(--sans); color: var(--ink-2); }
.site-search .search-scroll { flex: 1 1 auto; min-height: 0; padding: 0 24px max(24px, env(safe-area-inset-bottom)); overflow-y: auto; overscroll-behavior: contain; -webkit-overflow-scrolling: touch; }
.site-search .search-group { padding-top: 20px; }
.site-search .search-gh { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; padding-bottom: 6px; border-bottom: 2px solid var(--ink); font: 700 15px/1.5 var(--sans); }
.site-search .search-gn { font: 400 13px/1.5 var(--sans); color: var(--ink-2); }
.site-search .search-group ol { margin: 0; padding: 0; list-style: none; }
.site-search .search-hit { display: flex; flex-direction: column; justify-content: center; gap: 2px; min-height: 52px; padding: 10px 0; border-bottom: 1px solid var(--rule); color: var(--ink); text-decoration: none; }
.site-search .search-hit:hover .hit-t { text-decoration: underline; text-underline-offset: 3px; }
.site-search .hit-t { font: 500 17px/1.5 var(--serif); }
.site-search .hit-ext { margin-left: .25em; font-family: var(--sans); color: var(--ink-2); }
.site-search .hit-d { display: -webkit-box; overflow: hidden; -webkit-box-orient: vertical; -webkit-line-clamp: 2; font: 400 14px/1.6 var(--sans); color: var(--ink-2); }
.site-search .hit-tags { display: flex; flex-wrap: wrap; gap: 4px 6px; margin-top: 4px; }
.site-search .hit-tag { padding: 0 6px; border: 1px solid var(--rule); font: 400 13px/1.7 var(--sans); color: var(--ink-2); }
.site-search mark { background: var(--tint); color: inherit; box-shadow: inset 0 -2px 0 var(--mark); }
.site-search .search-more { padding-top: 8px; font: 400 13px/1.6 var(--sans); color: var(--ink-2); }
.site-search :focus-visible { outline: 2px solid var(--ink); outline-offset: 2px; }
.site-search .search-hit:focus-visible { outline-offset: -2px; background: var(--tint); }
@media (max-width: 767px) {
  .site-search { inset: 0; margin: 0; width: 100%; max-height: none; height: 100vh; height: 100dvh; border: 0; }
  .site-search .search-head, .site-search .search-form, .site-search .search-status { margin-left: 20px; margin-right: 20px; }
  .site-search .search-scroll { padding-left: 20px; padding-right: 20px; }
}

/* Brand colour layer (owner 2026-10-07: #0066FF, only at key places, never competing with the content).
 * Role: a signal for "you can act here / you are here", nothing else. Text, headings, rules, cards, bands, icons and
 * illustrations stay in the green ink. Coverage is a few links and the focus outline. The current page keeps its existing red mark (--mark): one signal, not two.
 * Value: the owner's #0066FF is 4.51:1 on paper (margin 0.01) and 4.06:1 on --tint, so small text uses --brand-text
 * (#0058E0, 5.64:1 on paper, 5.07:1 on --tint) which keeps the same hue; --brand (#0066FF) is for non-text signals
 * (focus ring 4.51:1 >= 3:1) and large marks.
 * Never: on the green ink bands (2.41:1), as a fill, as a border, on body text or headings. */
:root { --brand: #0066FF; --brand-text: #0058E0; }

/* 1. keyboard focus ring (WCAG 2.4.7 / 1.4.11: >= 3:1); stays --on-ink on the dark footer and bands */
:focus-visible { outline-color: var(--brand); }
.ftr :focus-visible, .band-ink :focus-visible { outline-color: var(--on-ink); }
.site-menu :focus-visible { outline-color: var(--brand); }
.site-search :focus-visible, .site-search .search-box:focus-within { outline-color: var(--brand); }

/* 2. the go links ("相关教师 →", "查看全部 →"): the only coloured text on the page, and only on the paper background */
.sec a.go, .sec a.go:hover { color: var(--brand-text); }
.band-ink a.go, .band-tint a.go { color: inherit; }

/* 3. four fields (owner 2026-10-09: 道路 / 轨道 / 机场 / 低空): the home K1 band carries four cards in one row on wide screens */
.dirs.dirs-4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.dirs.dirs-4 .dir p { max-width: none; }
@media (max-width: 1139px) { .dirs.dirs-4 { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 767px) { .dirs.dirs-4 { grid-template-columns: 1fr; } }

/* POLISH-02: home fixes. */
/* POLISH-02 home fixes (2026-10-09 blind review, defects 1 and 2). No new colours.
 * 1. News card 09.25 (no licensed photo, emblem placeholder): home-news.css sets .nc-ph { display: block } after .emb-tile { display: flex },
 *    which parks the 96px emblem at the top-left under the date tile. The compound selector restores the centring. */
.nc-ph.emb-tile { display: flex; }

/* 2. Carousel: the six slides share one grid cell, so the frame is as tall as the tallest caption. Slide 1 (illustration, short caption)
 * left a blank band under its caption; as a flex column the caption bar fills the slide and the blank becomes a full ink panel. */
.car-on .car-track .slide { display: flex; flex-direction: column; }
.car-on .car-track .slide .sl-img { flex: none; }
.car-on .car-track .slide .sl-cap { flex: 1; }

/* SYNC-01: preserved history page rules. */
/* History page round 10 — page rules on top of brand-sheet-round07/shell.css (tokens, header, page head, datum, section
 * head, today block, footer come from the shell). No colours outside the shell tokens, no hover colour changes, no
 * transitions; red only on the header's current station (shell). Focus: the shell's 2px outline, offset 3; nothing
 * changes size on focus. */

/* ---------- secondary section head: short rule + dot, no ticks, no plate (as admissions round 2) ---------- */
.sl.ssl { width: 64px; }
.sl.ssl::after { content: none; }
.sh-row .rng { font: 500 18px/1 var(--latin); letter-spacing: .04em; color: var(--ink-2); font-variant-numeric: lining-nums tabular-nums; }

/* ---------- datum: one small dot per entry year on the line (>= 1280; the chain is hidden below) ----------
 * position = (year − 1914) / 112, the same unit as the sheet's .y1952 / .y2000 / .y2024 */
.datum .tk { position: absolute; top: -4px; width: 6px; height: 6px; margin-left: -3px; border-radius: 50%; background: var(--ink-2); }
.t1937 { left: 20.54%; } .t1948 { left: 30.36%; } .t1953 { left: 34.82%; } .t1954 { left: 35.71%; }
.t1956 { left: 37.5%; } .t1958 { left: 39.29%; } .t1959 { left: 40.18%; } .t1960 { left: 41.07%; }
.t1971 { left: 50.89%; } .t1973 { left: 52.68%; } .t1979 { left: 58.04%; } .t1982 { left: 60.71%; }
.t1995 { left: 72.32%; } .t1996 { left: 73.21%; } .t2002 { left: 78.57%; }
.t2003 { left: 79.46%; } .t2005 { left: 81.25%; }

/* round 10 (>= 1280): the datum is 96 px high (labels end ~40 px above the legend rule instead of ~100); years and labels start at the LEFT edge of their
 * dot (dot = 10 px, centred on the position, so -5 px), the last year and label end at the RIGHT edge of the end dot (+5 px); the shell's 12 px padding
 * between dot and text is dropped so the text edge is the dot edge; neighbours keep >= 40 px (asserted at 1280–1920) */
@media (min-width: 1280px) {
  .datum.kd { height: 96px; }
  .datum .yr { transform: translateX(-5px); }
  .datum .yr.r { transform: translateX(calc(-100% + 5px)); }
  .datum .era { padding-left: 0; transform: translateX(-5px); }
  .datum .era > .dot { left: 0; }
  .datum .era.r { padding-right: 0; transform: translateX(calc(-100% + 5px)); }
  .datum .era.r > .dot { right: 0; }
}

/* ---------- legend (source marks) + the one reading-date line ---------- */
.legend { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 8px 32px; margin-top: var(--s5); padding-top: 14px; border-top: 1px solid var(--rule); }
.lg { display: flex; flex-wrap: wrap; gap: 6px 28px; font: 400 14px/1.6 var(--sans); color: var(--ink-2); }
.lg li { display: inline-flex; align-items: center; gap: 8px; }
.rd-line { font: 400 14px/1.6 var(--sans); color: var(--ink-2); }

/* source marks 系 / 院: 22px square, 1px ink-2 frame, 2px radius; merged rows carry both */
.mks { display: inline-flex; gap: 3px; }
.mk { display: inline-flex; align-items: center; justify-content: center; width: 22px; height: 22px; border: 1px solid var(--ink-2); border-radius: 2px;
  font: 500 13px/1 var(--sans); color: var(--ink-2); }

/* ---------- era sections: year rows ---------- */
.hrows { border-top: 1px solid var(--rule); }
.hrow { display: grid; grid-template-columns: 112px minmax(0, 1fr); gap: 4px var(--gut); padding: 14px 0; border-bottom: 1px solid var(--rule); }
.hy { font: 500 22px/30px var(--latin); letter-spacing: .02em; font-variant-numeric: lining-nums tabular-nums; }
.hu { display: grid; grid-template-columns: 48px minmax(0, 1fr); column-gap: 12px; align-items: start; font: 400 17px/30px var(--sans); }
.hu .tx { max-width: 48em; }
.hu .mks { margin-top: 4px; }
.hu + .hu { margin-top: 8px; }
.hd { padding-left: 60px; font: 400 17px/30px var(--sans); }  /* round 10: the neutral guide line is set at body size (same as the entries) */
.hd a { color: var(--ink-2); }
.hrow[data-line="true"] { align-items: baseline; }  /* the year and the guide line share one baseline */

/* round 10: the last era closes with an end rule whose dot echoes the datum's 2024 end point, and a wide gap before the next section */
.era-end { margin-top: var(--s6); }
.era-end::after { content: none; }
.era-end .dot { left: auto; right: 0; }
#people { padding-top: var(--s9); }
@media (max-width: 767px) { #people { padding-top: var(--s8); } }

/* ---------- today: direction separators are CSS (no text node) ---------- */
.dsep::before { content: "\00B7"; padding: 0 .35em; }

/* ---------- below 1024: touch targets ---------- */
@media (max-width: 1023px) {
  .hd a { display: inline-flex; align-items: center; min-height: 44px; }
  .hd { line-height: 1.6; }
}
@supports (text-wrap: pretty) { .hu .tx { text-wrap: pretty; } }
/* ---------- below 768: year above its entries ---------- */
@media (max-width: 767px) {
  .hrow { grid-template-columns: minmax(0, 1fr); gap: 2px; padding: 12px 0; }
  .hy { font-size: 18px; line-height: 28px; }
  .hu { grid-template-columns: 47px minmax(0, 1fr); column-gap: 10px; font-size: 16px; line-height: 1.7; }
  .hu .mks { margin-top: 2px; }
  .hd { padding-left: 0; margin-top: 6px; font-size: 16px; }
  .sh-row .rng { font-size: 16px; }
  .legend { display: block; }
  .rd-line { margin-top: 8px; }
}


/* ====================================================================================================================
 * Image groups (rounds 5 / 7 / 9). ONE grid component for the year-table groups, the 同期史料 images and the appendix: three equal columns
 * (>= 768; 768–1023 with a smaller gap), below 768 each group is a row that scrolls sideways (scroll-snap, the next picture peeks out, a text hint).
 * Every frame is 4:3 on the same light backing; the picture is object-fit: contain (never stretched, never shown larger than its file, wide
 * scans never cropped). 同期史料 images carry a small corner badge. Nothing changes colour on hover; no transitions.
 * ==================================================================================================================== */

/* era group = a list item of the year table: period label | group. The group starts at the TEXT column of the year rows (the 48 px mark column
 * + 12 px gap = 60 px indent), so lead and grid share one left edge with the entries above and below. */
.hfig { display: grid; grid-template-columns: 112px minmax(0, 1fr); gap: 4px var(--gut); padding: 20px 0 24px; border-bottom: 1px solid var(--rule); }
.hp { font: 500 16px/30px var(--latin); letter-spacing: .01em; color: var(--ink-2); font-variant-numeric: lining-nums tabular-nums; white-space: nowrap; }
.hfb { min-width: 0; padding-left: 60px; }
.g-lead { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 12px; margin-bottom: 14px; font: 400 16px/1.7 var(--sans); color: var(--ink-2); text-wrap: pretty; }
.g-hint { display: none; }
.tag { display: inline-flex; align-items: center; height: 22px; padding: 0 8px; border: 1px solid var(--ink-2); border-radius: 2px; font: 500 13px/1 var(--sans); color: var(--ink-2); }

.pf-set { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 20px 24px; align-items: start; }
.pf-set[data-cols="4"] { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 20px 16px; }  /* 7 pictures: 4 + 3, never a single picture on the last row */

/* round 10: a group of ONE picture is an editorial picture + marginal note: the frame follows the picture's own ratio (no 4:3 frame, no backing, no crop),
 * is never wider than --k x its file (h08: 1.5 x 550 = 825 px; h04: 1.0 x), the caption stands in the free column at the right, top-aligned (stacked under 1024) */
.pf-set[data-aside] { display: block; }
.pf-set[data-aside] .pf { display: flex; align-items: flex-start; gap: 24px; }
.pf-set[data-aside] .pf .pf-open { display: block; flex: 0 1 calc(var(--w) * var(--k) * 1px); min-width: 0; padding: 0; border: 0; background: none; aspect-ratio: auto; overflow: visible; }
.pf-set[data-aside] .pf .pf-open:not(:focus-visible) { outline: 1px solid var(--rule); outline-offset: -1px; }
.pf-set[data-aside] .pf .pf-open img { width: 100%; height: auto; max-width: none; max-height: none; }
.pf-set[data-aside] .pf figcaption { flex: 0 0 180px; margin-top: 0; padding-top: 8px; border-top: 1px solid var(--ink-2); font-size: 15px; line-height: 1.7; }
.pf { position: relative; min-width: 0; }
.pf-open { display: block; cursor: zoom-in; }
.pf .pf-open { display: grid; grid-template: minmax(0, 1fr) / minmax(0, 1fr); place-items: center; box-sizing: border-box; aspect-ratio: 4 / 3; padding: 8px; border: 1px solid var(--rule); background: var(--tint); overflow: hidden; }  /* round 10: every picture sits on the same 8 px mat */
.pf .pf-open img { display: block; width: 100%; height: 100%; max-width: calc(var(--w) * 1px); max-height: calc(var(--h) * 1px); object-fit: contain; }
.pf figcaption { margin-top: 10px; font: 400 14px/1.6 var(--sans); overflow-wrap: anywhere; text-wrap: pretty; }
.pf .cap { display: block; padding-right: .5em; color: var(--ink); }
/* corner badge 「史料」 on the images that are period sources */
.bdg { position: absolute; top: 1px; left: 1px; display: inline-flex; align-items: center; height: 20px; padding: 0 7px; background: var(--paper); border-right: 1px solid var(--ink-2); border-bottom: 1px solid var(--ink-2);
  font: 500 13px/1 var(--sans); color: var(--ink-2); pointer-events: none; }

/* 附：图像资料: same left edge as the year-table groups (112 px label column + gutter + 60 px mark column), as wide as the header grid */
.pgs { margin-top: var(--s5); }
.pg { padding-left: calc(112px + var(--gut) + 60px); }
.pg + .pg { margin-top: var(--s7); }

/* round 9: the 2024 era is an ordinary era again (the same large H2 as the others); its one guide line is a light note, see .hd.
 * The page head: less air between the H1 and the datum line (the shell's 72 px section padding on the spine becomes 28 px). */
.spine { padding-top: 28px; }
@media (max-width: 1023px) { .spine { padding-top: 20px; } }
/* the 1914 fact line next to the H1 repeats the first node of the vertical timeline: it shows only with the horizontal datum (>= 1280) */
@media (max-width: 1279px) { .phead .own-col { display: none; } }
/* 「示意，不按比例」: shown while the datum is the vertical list (< 1280), hidden with the horizontal one (>= 1280) */
@media (min-width: 1280px) { .scale { display: none; } }

/* 学科人物: rows like the year table; avatar 112 px square (2x file), name + AI chip, one verbatim sentence, source link */
.fig-lead { margin-top: var(--s4); max-width: 40em; font: 400 17px/1.8 var(--sans); }
.ppl { margin-top: var(--s5); border-top: 1px solid var(--rule); }
.pp { display: grid; grid-template-columns: 112px minmax(0, 1fr); gap: 20px; align-items: start; padding: 16px 0; border-bottom: 1px solid var(--rule); }
.pp-open { display: block; width: 112px; height: 112px; border: 1px solid var(--rule); background: var(--tint); cursor: zoom-in; }
.pp-open .pp-img { display: block; width: 100%; height: 100%; max-width: none; max-height: none; object-fit: cover; }
.pp-n { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 10px; font: 500 20px/1.5 var(--sans); }
.pp-n b { font-weight: 500; }
.yrs { font: 500 17px/1.5 var(--latin); letter-spacing: .02em; color: var(--ink-2); font-variant-numeric: lining-nums tabular-nums; }  /* name · years: the dot is CSS (no text node) */
.yrs::before { content: "\00B7"; margin-right: 10px; }
.aib { display: inline-flex; align-items: center; height: 22px; padding: 0 8px; border: 1px solid var(--ink-2); border-radius: 2px; font: 500 13px/1 var(--sans); color: var(--ink-2); }
.pp-s { margin-top: 4px; max-width: 36em; font: 400 16px/1.7 var(--sans); text-wrap: pretty; }
.pp-l { margin-top: 8px; font: 400 14px/1.6 var(--sans); }
.pp-l a { display: inline-flex; align-items: center; min-height: 44px; min-width: 44px; }  /* round 10: touch height >= 44 px at every width */
.pp-note { margin-top: var(--s4); max-width: 44em; font: 400 14px/1.6 var(--sans); color: var(--ink-2); text-wrap: pretty; }
.srcl { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 6px; margin-top: 8px; color: var(--ink-2); }
a.ext::after { opacity: 1; font-size: 14px; }
.lic { margin-top: var(--s7); max-width: 40em; font: 400 14px/1.6 var(--sans); color: var(--ink-2); text-wrap: pretty; }
.lic + .src-link { margin-top: var(--s4); }

/* lightbox (native modal dialog): paper panel, ink frame, ink-tinted backdrop; image <= 1.5 x its file, n / N, caption, note, source */
.lb { width: min(960px, calc(100vw - 24px)); max-width: none; max-height: calc(100dvh - 24px); padding: 0; border: 2px solid var(--ink); background: var(--paper); color: var(--ink); overflow: hidden; }
.lb::backdrop { background: color-mix(in srgb, var(--ink) 80%, transparent); }
.lb-panel { display: flex; flex-direction: column; max-height: calc(100dvh - 28px); }
.lb-bar { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 8px; padding: 10px 12px; border-bottom: 1px solid var(--rule); }
.lb-nav { display: inline-flex; gap: 8px; }
.lb-count { font: 500 17px/1 var(--latin); letter-spacing: .04em; color: var(--ink); font-variant-numeric: lining-nums tabular-nums; }  /* round 10: body colour (10.9:1) */
.lb .btn { height: 44px; min-width: 44px; padding: 0 16px; font: 500 16px/1 var(--sans); }
.lb-stage { display: grid; place-items: center; min-height: 0; padding: 16px 16px 8px; overflow: auto; }
.lb-img { width: min(100%, var(--lw, 100%)); max-height: calc(100dvh - 24px - 70px - 150px); height: auto; aspect-ratio: var(--r, auto); object-fit: contain; }
.lb-cap { padding: 8px 16px 16px; font: 400 14px/1.6 var(--sans); }
.lb-cap .cap, .lb-cap .note { display: block; padding-right: .5em; }
.lb-cap .note { margin-top: 2px; color: var(--ink-2); }
.lb-cap .note:empty { display: none; }

/* lightbox buttons: a single 2 px outer stroke on keyboard focus (the 1 px frame gives way to it instead of doubling up) */
.lb .btn:focus-visible { outline: 2px solid var(--ink); outline-offset: 0; border-color: transparent; box-shadow: none; }

/* from 768: 学科人物 as two columns of cards (avatar, name · years, clause, link) */
@media (min-width: 768px) {
  .ppl { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: var(--gut); border-top: 0; border-bottom: 1px solid var(--rule); }
  .pp { border-top: 1px solid var(--rule); border-bottom: 0; }
}
@media (max-width: 1023px) {
  .srcl a { display: inline-flex; align-items: center; min-height: 44px; min-width: 44px; }
  /* round 10: under 1024 every group is ONE row that scrolls sideways (scroll-snap, the next picture peeks out, a text hint that history.js hides when the
   * row does not scroll); cards are 300 px (72% of a phone), so a 768 tablet shows pictures at least as large as a phone does */
  .g-hint { display: block; margin-bottom: 4px; font: 400 14px/1.6 var(--sans); color: var(--ink-2); }
  .g-hint[hidden] { display: none; }
  .g-hint::after { content: "\2009\2192"; }
  .pf-set { display: flex; gap: 12px; margin: 0 -6px; padding: 6px; overflow-x: auto; overscroll-behavior-x: contain; scroll-snap-type: x mandatory; scroll-padding: 0 6px; scrollbar-width: thin; }
  .pf { flex: 0 0 min(72%, 300px); scroll-snap-align: start; }
  .pf figcaption { margin-top: 8px; }
  .pf-set[data-aside] { display: block; overflow: visible; margin: 0; padding: 0; scroll-snap-type: none; }
  .pf-set[data-aside] .pf { display: block; flex: none; }
  .pf-set[data-aside] .pf .pf-open { width: 100%; max-width: calc(var(--w) * var(--k) * 1px); }
  .pf-set[data-aside] .pf figcaption { margin-top: 10px; padding-top: 8px; font-size: 14px; line-height: 1.6; }
}
@media (min-width: 1024px) { .g-hint { display: none; } }
/* phone: marks stacked in a 24 px column (the indent drops from 57 to 32 px); each group is ONE row that scrolls sideways (scroll-snap, the
 * next picture peeks out, a text hint); the 6 px padding keeps the focus ring of the first / last picture inside the scroller */
@media (max-width: 767px) {
  .hu { grid-template-columns: 24px minmax(0, 1fr); column-gap: 8px; }
  .hu .mks { flex-direction: column; gap: 2px; }
  .hfig { grid-template-columns: minmax(0, 1fr); gap: 2px; padding: 16px 0 20px; }
  .hfb { padding-left: 0; }
  .pg { padding-left: 0; }
  .g-lead { margin-bottom: 8px; }
  .pp { grid-template-columns: 88px minmax(0, 1fr); gap: 14px; }
  .pp-open { width: 88px; height: 88px; }
  .pp-n { font-size: 18px; }
  .pp-note { margin-top: var(--s3); }
  .lic { margin-top: var(--s6); }
  .lb-img { max-height: calc(100dvh - 24px - 70px - 190px); }
}

/* round 10: under 480 px the lightbox is the whole screen (no frame, no margin); the picture takes the full width; a horizontal swipe steps to the next /
 * previous picture (history.js; the buttons and the arrow keys stay) */
@media (max-width: 479px) {
  .lb { width: 100vw; max-width: 100vw; height: 100dvh; max-height: 100dvh; margin: 0; border: 0; }
  .lb-panel { height: 100dvh; max-height: 100dvh; }
  .lb-stage { flex: 1 1 auto; padding: 8px 0; touch-action: pan-y pinch-zoom; }
  .lb-img { max-height: calc(100dvh - 70px - 170px); }
  .lb-cap { padding: 8px 16px 20px; }
}

/* POLISH-02: phone merged-row marks. */
/* POLISH-02 history fix (defect 3): on phones merged rows (系 + 院, e.g. 1971 / 1973 / 1982) kept both marks in a 24px column,
 * so the second mark dropped onto its own line and looked like a missing entry. Both marks now sit on one line (22 + 3 + 22 = 47px)
 * and only those rows get the wider first column; single-mark rows keep the 24px column. */
@media (max-width: 767px) {
  .hu .mks { flex-wrap: nowrap; }
  .hu:has(.mk + .mk) { grid-template-columns: 47px minmax(0, 1fr); }
  .hu:has(.mk + .mk) .mks { flex-direction: row; gap: 3px; }
}