/* 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 faculty page rules. */
/* Faculty roster round 13 — page rules after the brand-sheet-round07 shell (faculty.css = shell.css verbatim + this file; the shell owns tokens, fonts, header, footer, page head, station line, chips and focus; no shell token is redefined here). Desktop >= 1280: sticky rail (search, 研究领域 in 道路 / 机场 / 轨道 / 跨方向) + list (2-up >= 1440, else 联系 column >= 1024). Touch < 1280: sticky bar + modal panel; the selected-chips strip wraps (<= 3 lines, then 「+n」). Portraits always in colour; only names underlined at rest; hover never changes a colour; every touch link its own >= 44 px target (README). */
:root {
  --pad-x: var(--pad); --muted: #5b6e67; --bar-h: 60px; --where-h: 28px; --strip-h: 52px; --bar-fill: var(--ink-2); --track: rgba(23, 63, 54, 0.12); --area-h: 28px; --ag-h: 28px; --field-h: 38px; --ph-w: 84px; --ph-h: 105px; --mat: 6px; --fr-w: calc(var(--ph-w) + 2 * var(--mat) + 2px); --rhythm: 6px; --contact-w: 240px;
}
html { -webkit-text-size-adjust: 100%; scroll-behavior: auto; }
html.panel-open { overflow: hidden; }
[hidden] { display: none !important; }
.sr { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap; border: 0; }
[data-units] { word-break: keep-all; line-break: strict; }

/* page head additions: emblems row, the station line with counters outside the links, the direction-entry banner */
/* direction legend: emblem + label; ink when the group has matches, muted otherwise (never interactive) */
.dir-key { display: flex; gap: 18px; }
.dk { display: flex; flex-direction: column; align-items: center; gap: 4px; }
.dk .emb { width: 32px; height: 32px; stroke: var(--ink); }
.dk-l { font: 500 13px/1.3 var(--sans); color: var(--ink); white-space: nowrap; }
.dk.off .emb { stroke: var(--muted); }
.dk.off .dk-l { font-weight: 400; color: var(--muted); }
/* station line: 「本次结果 n」 is a muted label set apart by a thin rule; groups regular, the current one bold + 2 px underline */
.subnav li { display: inline-flex; align-items: baseline; gap: 8px; }
.subnav .results { padding: 14px 32px 0 0; border-right: 1px solid var(--rule); min-height: 44px; }
.subnav .results .nm { font: 400 15px/1.4 var(--sans); color: var(--ink-2); }
.subnav .rank .nm { font-weight: 400; }
.subnav .rank[aria-current="location"] .nm { font-weight: 700; text-decoration: underline; text-decoration-thickness: 2px; text-underline-offset: 6px; text-decoration-color: var(--ink); }
.subnav a[aria-disabled="true"] { color: var(--muted); cursor: default; }
.subnav a[aria-disabled="true"]:hover .nm { text-decoration: none; }
.from { display: flex; flex-wrap: nowrap; align-items: center; gap: 0 16px; height: 40px; margin-top: 12px; padding: 0; border-bottom: 1px solid var(--rule); font: 400 15px/1.6 var(--sans); color: var(--ink); white-space: nowrap; } .from-x { flex: none; display: inline-flex; align-items: center; justify-content: center; width: 44px; height: 44px; margin: -2px -12px -2px auto; border: 0; background: transparent; color: var(--ink); cursor: pointer; }
.own-f { display: none; } html.filtered .own-f { display: inline; } html.filtered .own-all { display: none; } html:not(.filtered) .subnav .results { display: none; } .from.from-bar { display: none; } /* one count source; the bar copy is touch only */
.from-t { font-weight: 500; min-width: 0; overflow: hidden; text-overflow: ellipsis; }   /* round 23: a long field name (低空交通与技术) shrinks with … before the two controls do */
.from .back { font-weight: 500; flex: none; }

/* Roster: rail (search, 研究领域) | list. Type and wrapping as round 7 (the shell body is 17/1.75, anywhere-wrap). */
.roster { display: grid; grid-template-columns: 240px minmax(0, 1fr); column-gap: 48px; margin-top: 0; font: 400 16px/normal var(--sans); overflow-wrap: normal; }
.roster :focus-visible { outline-offset: -2px; }
.rail { grid-column: 1; }
.list { grid-column: 2; min-width: 0; padding-top: 20px; }
.rail-in { position: sticky; top: 0; display: flex; flex-direction: column; max-height: 100vh; overflow-y: auto; scrollbar-width: thin; padding: 12px 2px 6px 0; }
@media (min-width: 1280px) { .rail-in.fade { -webkit-mask-image: linear-gradient(to bottom, #000 calc(100% - 48px), transparent); mask-image: linear-gradient(to bottom, #000 calc(100% - 48px), transparent); } }
.field { position: relative; }
.field .search-icon { position: absolute; left: 12px; top: calc(var(--field-h) / 2 - 9px); color: var(--ink-2); pointer-events: none; }
.q { width: 100%; height: var(--field-h); padding: 0 40px 0 38px; border: 1px solid var(--ink); border-radius: 2px; background: var(--paper); font-weight: 400; font-size: 15px; line-height: 20px; -webkit-appearance: none; appearance: none; }
.q:focus-visible { outline-offset: -3px; }
.q::placeholder { color: var(--ink-2); opacity: 1; }
.q::-webkit-search-cancel-button { -webkit-appearance: none; display: none; }
.q-clear { position: absolute; right: 0; top: 0; width: 40px; height: var(--field-h); display: flex; align-items: center; justify-content: center;
  border: 0; background: transparent; color: var(--ink); cursor: pointer; }
.clear-filter { height: 28px; margin-top: 6px; padding: 0 2px; border: 0; background: transparent; font-weight: 500; font-size: 14px; line-height: 20px;
  text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 4px; cursor: pointer; white-space: nowrap; }
.areas-btn, .scrim, .drawer-foot, .chips.chips-bar, .where-row { display: none; }
.drawer, .drawer-scroll { display: contents; }

/* Selected-area chips row (desktop: top of the list): 「已筛选 n / 名录收录 63」, shell chips (filled ink, ×), the note, 清除筛选 */
.chips { display: flex; flex-wrap: wrap; align-items: center; column-gap: 10px; row-gap: 8px; }
.chips-list { margin-bottom: 18px; padding-bottom: 14px; border-bottom: 1px solid var(--rule); }
.chips-status { font-weight: 600; font-size: 15px; line-height: 22px; color: var(--ink); }
.chip-list { display: contents; }
.chips .chip { position: relative; height: 32px; }
.chips .chip:focus-visible { outline-offset: 2px; }
.chips-any { font-size: 13px; line-height: 20px; color: var(--ink-2); }
.chips-clear { height: 32px; padding: 0 6px; border: 0; background: transparent; font-weight: 500; font-size: 14px; line-height: 20px; color: var(--ink);
  text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 4px; cursor: pointer; white-space: nowrap; }

/* The area module: caption, four labelled groups (thin rule, 全选 / 取消), areas as label / number / inline bar rows */
.atlas { margin-top: 10px; }
.atlas-top { display: flex; align-items: baseline; gap: 10px; height: 22px; }
.atlas-h { font-family: var(--serif); font-weight: 700; font-size: 16px; line-height: 22px; white-space: nowrap; }
.hint { margin-top: 2px; font-size: 13px; line-height: 19px; color: var(--ink-2); }
.ag { margin-top: 12px; }
.ag-h { display: flex; align-items: center; justify-content: space-between; gap: 8px; height: var(--ag-h); border-bottom: 1px solid var(--rule); }
.ag-label { font-family: var(--serif); font-weight: 600; font-size: 14px; line-height: 20px; letter-spacing: 0.08em; color: var(--ink); }
.ag-toggle { height: var(--ag-h); padding: 0 4px; margin-right: 0; border: 0; background: transparent; font-weight: 500; font-size: 13px; line-height: 18px; color: var(--ink);
  text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 3px; cursor: pointer; white-space: nowrap; }
.ag-toggle { border: 1px solid var(--ink); border-radius: 2px; padding: 0 8px; text-decoration: none; } .ag-toggle:disabled { color: var(--muted); border-color: var(--muted); text-decoration: none; cursor: default; }
.bars { margin-top: 12px; }
.area { position: relative; display: flex; flex-direction: row; align-items: center; gap: 8px; width: 100%; height: var(--area-h);
  padding: 0 8px; margin: 0; border: 0; border-radius: 2px; background: transparent; text-align: left; cursor: pointer; }
.area-top { flex: 1 1 auto; min-width: 0; display: flex; align-items: baseline; justify-content: space-between; gap: 8px; }
.area-label { font-size: 14px; line-height: 20px; color: var(--ink); }
.area-n { flex: 0 0 auto; min-width: 2ch; font-family: var(--serif); font-weight: 500; font-size: 14px; line-height: 20px; text-align: right; color: var(--ink-2); font-variant-numeric: tabular-nums lining-nums; }
.area-track { display: block; flex: 0 0 44px; height: 3px; background: var(--track); }
.area-bar { display: block; height: 3px; background: var(--bar-fill); }
/* hover = underline only (shell rule: no colour change on hover) */
.area[aria-pressed="false"]:not(:disabled):hover .area-label { text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 4px; }
.area[aria-pressed="true"] { background: var(--ink); }
.area[aria-pressed="true"] .area-label, .area[aria-pressed="true"] .area-n { color: var(--paper); font-weight: 700; text-decoration: none; }
.area[aria-pressed="true"] .area-track { background: rgba(248, 247, 243, 0.28); }
.area[aria-pressed="true"] .area-bar { background: var(--paper); }
.area[aria-pressed="true"]:focus-visible { outline-color: var(--paper); outline-offset: -4px; }
.area:disabled { cursor: default; }
.area:disabled .area-label, .area:disabled .area-n { color: var(--muted); }
.area:disabled .area-track { background: rgba(23, 63, 54, 0.16); } /* round 10: a light empty track, never a solid line */

/* Rank groups and cards: framed photo | (name 职称 / research text / tags + 展开) with the email / 课题组网站 lines under the
   tags, or in a right-hand 联系 column (single-column rows >= 1024) */
.group { margin-top: 44px; scroll-margin-top: 20px; }
.list > .group:first-of-type { margin-top: 0; }
.gh { padding-bottom: 10px; border-bottom: 2px solid var(--ink); font-family: var(--serif); font-size: 28px; line-height: 1.3; }
.gh-label { font-weight: 700; }
.gh-meta { margin-left: 0.3em; font-weight: 500; color: var(--ink-2); font-variant-numeric: tabular-nums lining-nums; }
.gh-sep { margin-right: 0.3em; }
.gh-unit { margin-left: 0.2em; }
.rows { display: grid; grid-template-columns: minmax(0, 1fr); column-gap: 40px; }
.row { display: grid; grid-template-columns: var(--fr-w) minmax(0, 1fr); grid-template-rows: auto 1fr; column-gap: 20px; align-items: start;
  padding: 18px 0 17px; border-bottom: 1px solid var(--rule); }
.ph-w { grid-column: 1; grid-row: 1 / span 2; display: block; width: var(--fr-w); padding: var(--mat); border: 1px solid var(--rule); background: var(--paper); }
.ph { display: block; width: var(--ph-w); height: var(--ph-h); object-fit: cover; background: var(--tint); }
.pc { grid-column: 2; grid-row: 1; min-width: 0; }
.who { display: flex; flex-wrap: wrap; align-items: baseline; column-gap: 12px; row-gap: 0; margin-top: -3px; }
.row .nm { font-family: var(--serif); font-weight: 600; font-size: 22px; line-height: 1.4; }
/* Latin name: same family, case and weight stack as the CJK names; slightly smaller and lighter so its colour matches */
.row .nm [lang="en"] { font-family: var(--serif); font-variant: normal; text-transform: none; letter-spacing: 0; font-size: 0.9em; font-weight: 500; }
.row a:hover, .row a:focus-visible { text-decoration: none; }
.nm-link { position: relative; display: inline-flex; align-items: center; gap: 5px; padding: 5px 6px; margin: -5px -6px; border-radius: 2px; }
.nm-t { text-decoration: underline; text-decoration-color: rgba(23, 63, 54, 0.35); text-decoration-thickness: 1px; text-underline-offset: 3px; }
.nm-link:hover .nm-t, .nm-link:focus-visible .nm-t { text-decoration-color: var(--ink); }
.nm-link:focus-visible { outline-offset: 0; }
/* ↗: always present (muted at rest, so every name reads as an external link), full strength on hover / focus */
.ext { flex: 0 0 auto; color: var(--ink); opacity: 0.6; }
.nm-link:hover .ext, .nm-link:focus-visible .ext { opacity: 1; }
.tl { font-size: 14px; line-height: 20px; color: var(--ink-2); }
.rt { display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; overflow: hidden; margin-top: 4px; font-size: 15px; line-height: 26px; color: var(--ink);
  max-width: 46em; overflow-wrap: normal; word-break: normal; text-wrap: pretty; }
.rt.open { display: block; overflow: visible; }
/* every card opens with the same label; generated, so the DOM text stays the verbatim research string */
.rt::before { content: "研究方向："; color: var(--ink-2); font-weight: 500; }   /* round 23: 研究方向, not 研究领域 — 研究领域 now names the four fields (道路 / 轨道 / 机场 / 低空) */
.meta { display: flex; align-items: flex-start; gap: 16px; margin-top: 8px; }
.more { display: block; width: max-content; text-align: left; height: 26px; margin: 2px 0 0 -6px; padding: 0 6px; border: 0; background: transparent; font-weight: 500; font-size: 13px; line-height: 20px;
  color: var(--ink); cursor: pointer; white-space: nowrap; }
.more { font-size: 14px; font-weight: 600; } .more::after { content: "\2009↓"; } .more[aria-expanded="true"]::after { content: "\2009↑"; }
.more:hover, .more:focus-visible { text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 4px; }
/* card tags: the shell's small outline chip; the selected areas' tags in ink */
.tags { display: flex; flex-wrap: wrap; gap: 6px; }
.meta .tags { flex: 1 1 auto; min-width: 0; }
.tag.on { border-color: var(--ink); color: var(--ink); font-weight: 600; }
/* contact lines: plain ink text; one rhythm unit between the tags, the email and the website */
.contact { grid-column: 2; grid-row: 2; display: flex; flex-direction: column; align-items: flex-start; row-gap: var(--rhythm); margin-top: var(--rhythm);
  min-width: 0; font-size: 13px; line-height: 20px; color: var(--ink); }
.mail, .site { display: inline-flex; align-items: center; gap: 6px; max-width: 100%; padding: 2px 4px; margin: -2px -4px; border-radius: 2px; color: var(--ink); }
.mail { -webkit-user-select: text; user-select: text; font-variant-numeric: lining-nums; }
.row .mail:hover, .row .mail:focus-visible, .row .site:hover .site-label, .row .site:focus-visible .site-label, .row .site:hover .host, .row .site:focus-visible .host {
  text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 3px; }
.mail:focus-visible, .site:focus-visible, .more:focus-visible { outline-offset: 0; }
.host { color: var(--ink); }
.ext-site { flex: 0 0 auto; color: var(--ink); opacity: 0.6; }
.row[hidden] { display: none; }
.to-top { display: none; } /* 回到顶部: touch widths only */

/* Empty state: the message with the computed guidance, centred in the space beside the rail (desktop) */
.empty { padding: 24px 0; }
.empty-t { font-family: var(--serif); font-weight: 700; font-size: 26px; line-height: 1.4; }
.guide { display: flex; flex-direction: column; align-items: flex-start; gap: 10px; margin-top: 20px; }
.guide-btn { height: 40px; padding: 0 18px; border: 1px solid var(--ink); border-radius: 2px; background: var(--paper); font-weight: 500; font-size: 15px; line-height: 20px; cursor: pointer; white-space: nowrap; }
.guide-all { border-color: transparent; padding: 0 8px; text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 4px; }
@media (min-width: 1280px) {
  .empty { padding-top: 48px; }
}
/* Desktop with room (>= 880 px tall): a little more air in the rail */
@media (min-width: 1280px) and (min-height: 880px) {
  :root { --field-h: 42px; --area-h: 30px; }
  .rail-in { padding-top: 16px; padding-bottom: 10px; }
  .atlas { margin-top: 14px; }
}
/* single-column rows from 1024 to 1439: photo | name, research, tags | 联系 column (email, 课题组网站 stacked) */
@media (min-width: 1024px) and (max-width: 1439px) {
  .row { grid-template-columns: var(--fr-w) minmax(0, 1fr) var(--contact-w); grid-template-rows: auto; column-gap: 24px; }
  .ph-w { grid-row: 1; }
  .contact { grid-column: 3; grid-row: 1; margin-top: 2px; }
  .contact .site { flex-wrap: wrap; row-gap: 0; }
}
/* two cards per row from 1440 (round 7 README: 1366 gives 319 px text columns, too narrow for two-line research text) */
@media (min-width: 1440px) {
  .rows { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (min-width: 1680px) {
  .roster { grid-template-columns: 256px minmax(0, 1fr); column-gap: 64px; }
  .rows { column-gap: 48px; }
}

/* Touch layouts (< 1280): full-bleed sticky bar; the panel is a modal overlay under it over a scrim */
@media (max-width: 1279px) {
  :root { --field-h: 44px; --rhythm: 0px; }
  .roster { display: block; }
  .rail { position: sticky; top: 0; z-index: 5; margin: 0 calc(-1 * var(--pad-x)); padding: 0 var(--pad-x); background: var(--paper);
    border-bottom: 1px solid var(--rule); box-shadow: 0 8px 14px -12px rgba(23, 63, 54, 0.45); }
  .rail-in { position: relative; display: block; max-height: none; overflow: visible; padding: 0; }
  .bar { display: flex; align-items: center; gap: 10px; height: var(--bar-h); }
  .find { flex: 1 1 auto; min-width: 0; }
  html.foot-in.past-head:not(.panel-open) .rail { visibility: hidden; }
  /* where-row: the rank group in view and its count | 「已筛选 n / 名录收录 63」 while searching or filtering */
  .where-row { display: flex; align-items: center; justify-content: space-between; gap: 12px; height: var(--where-h); margin-top: -6px; }
  .where { font-family: var(--serif); font-weight: 600; font-size: 14px; line-height: 20px; color: var(--ink); font-variant-numeric: tabular-nums lining-nums; }
  .where-status { margin-left: auto; font-weight: 500; font-size: 13px; line-height: 20px; color: var(--ink); }
  html:not(.past-head) .where { visibility: hidden; } /* while the head is in view the group heading itself sits right below */
  .chips.chips-list { display: none; }
  /* one line (44 px + 8): 满足任一所选领域 | chips (scroll sideways inside the strip if many) | 清除; hidden while the panel is open */
  /* the strip wraps (at most three lines, then 「+n」); 清除 is its own column, 12 px from the chips */
  .chips.chips-bar { display: grid; grid-template-columns: minmax(0, 1fr) auto; column-gap: 12px; align-items: start; padding: 0 0 8px; }
  .rail-in[data-open] .chips.chips-bar, html.entry-intact .chips.chips-bar, html.entry-intact .from:not(.from-bar) { display: none; } /* entry strip in the bar */
  html.entry-intact .from.from-bar:not([hidden]) { display: flex; margin: 0; border-bottom: 0; }
  .chips-flow { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; min-width: 0; }
  .chips-bar .chip-list { display: contents; }
  .chips-bar .chips-any { line-height: 44px; }
  .chips-bar .chip, .chips-bar .chips-clear { height: 44px; max-width: 100%; }
  .chips-bar .chip { padding: 0 12px; }
  .chips-bar .chip-more { min-width: 44px; justify-content: center; background: var(--paper); color: var(--ink); font-weight: 600; }
  .chips-bar .chip:focus-visible { outline-color: var(--paper); outline-offset: -4px; }
  .chips-bar .chip-more:focus-visible { outline-color: var(--ink); }
  .chips-bar .chips-clear { min-width: 44px; padding: 0 10px; }
  .q-clear { width: 44px; }
  .areas-btn { display: inline-flex; align-items: center; gap: 6px; flex: 0 0 auto; height: 44px; margin-left: auto; padding: 0 12px;
    border: 1px solid var(--ink); border-radius: 2px; background: var(--paper); font-weight: 500; font-size: 15px; cursor: pointer; }
  .areas-btn-n { min-width: 20px; height: 20px; padding: 0 5px; border-radius: 2px; background: var(--ink); color: var(--paper);
    font-size: 12px; line-height: 20px; text-align: center; font-variant-numeric: tabular-nums lining-nums; }
  .areas-btn-n:empty { display: none; }
  .areas-btn .down { display: block; }
  .areas-btn[aria-expanded="true"] { background: var(--ink); color: var(--paper); }
  .areas-btn[aria-expanded="true"] .areas-btn-n { background: var(--paper); color: var(--ink); }
  .areas-btn[aria-expanded="true"] .down { transform: rotate(180deg); color: var(--paper); }
  .scrim { display: block; position: fixed; inset: 0; z-index: 4; background: rgba(23, 63, 54, 0.5); }
  .drawer { display: none; position: absolute; top: calc(100% + 1px); left: calc(-1 * var(--pad-x)); right: calc(-1 * var(--pad-x)); flex-direction: column;
    background: var(--paper); border-top: 1px solid var(--rule); border-bottom: 1px solid var(--ink); box-shadow: 0 18px 28px -14px rgba(23, 63, 54, 0.55); }
  .rail-in[data-open] .drawer { display: flex; }
  .drawer-scroll { display: block; flex: 1 1 auto; min-height: 0; overflow-y: auto; overscroll-behavior: contain; padding: 4px var(--pad-x) 0; } .drawer-scroll .atlas { padding-bottom: 28px; }
  /* opaque edge fade (never a transparent mask, so nothing behind the panel shows through), only while more is below */
  .drawer-scroll.fade::after { content: ""; position: sticky; bottom: 0; display: block; height: 28px; margin: -28px calc(-1 * var(--pad-x)) 0; pointer-events: none;
    background: linear-gradient(to bottom, rgba(248, 247, 243, 0), var(--paper) 4px); } /* 24 px of solid paper; the panel height ends on a row (faculty.js) */
  .atlas { margin-top: 10px; }
  .atlas-top { height: auto; }
  .ag { margin-top: 12px; }
  .ag-h { height: 44px; }
  .ag-label { font-size: 15px; }
  .ag-toggle { height: 44px; min-width: 44px; padding: 0 8px; margin-right: -8px; font-size: 14px; }
  .bars { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); column-gap: 16px; margin-top: 12px; }
  .area { flex-direction: column; align-items: stretch; justify-content: center; gap: 4px; height: auto; min-height: 44px; padding: 5px 8px 7px; }
  .area-top { flex: 0 0 auto; }
  .area-track { flex: 0 0 auto; width: 100%; }
  .drawer-foot { display: block; flex: 0 0 auto; padding: 0 var(--pad-x); border-top: 1px solid var(--rule); }
  .drawer-acts { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 12px; padding: 8px 0 10px; }
  .drawer-acts .clear-filter { height: 44px; margin: 0; padding: 0 4px; }
  .panel-close { flex: 1 1 100%; height: 48px; padding: 0 20px; border: 1px solid var(--ink); border-radius: 2px; background: var(--ink); color: var(--paper); font-weight: 600; font-size: 16px; cursor: pointer; } /* primary 「查看 n 位」 */
  .panel-close:focus-visible { outline-color: var(--paper); outline-offset: -4px; }
  .list { padding-top: 20px; }
  .group { margin-top: 32px; scroll-margin-top: calc(var(--rail-h, 90px) + 12px); }
 /* --rail-h: the sticky bar's height (faculty.js) */
  .to-top { display: block; margin-top: 4px; }
  .to-top a { display: inline-flex; align-items: center; min-height: 44px; min-width: 44px; padding: 0 8px; margin: 0 -8px; font-size: 14px; font-weight: 500; color: var(--ink-2); }
  /* every link is its own >= 44 px target on its own line; focus rings inside the box, enclosing the text with padding */
  .nm-link { min-height: 44px; min-width: 44px; padding: 0 12px; margin: -6px -10px; } /* ring >= 8 px from the text */
  .who { margin-top: 0; }
  .meta { flex-direction: column; align-items: flex-start; gap: 0; margin-top: 4px; }
  .more { height: 44px; margin: 0 0 0 -8px; padding: 0 8px; font-size: 14px; }
  .contact { margin-top: 12px; }
  .mail, .site { display: flex; width: max-content; max-width: 100%; min-height: 44px; min-width: 44px; padding: 0 10px; margin: 0 -8px; font-size: 14px; }
  .mail:focus-visible, .site:focus-visible { outline-offset: -2px; }
  .guide-btn { min-height: 44px; height: 44px; }
}
/* Tablet 768-1279: photo 72 px | content */
@media (min-width: 768px) and (max-width: 1279px) {
  :root { --ph-w: 72px; --ph-h: 90px; }
  .gh { font-size: 26px; }
  .row .nm { font-size: 20px; }
  .row { padding: 15px 0 14px; }
}
@media (min-width: 1024px) and (max-width: 1279px) {
  .contact { margin-top: -4px; }
}
/* below 1024 (shell: one column): the station line is a list of rows; counters stay labels at the right */
@media (max-width: 1023px) {
  .subnav li { display: flex; justify-content: space-between; align-items: center; }
  .subnav li > a { flex: 1 1 auto; width: auto; }
  .subnav .results { padding: 0 12px 0 0; }
  /* mobile: emblems and labels, same rules at 24 px */
  .dk .emb { width: 24px; height: 24px; }
  /* four emblems (round 23): labels stay 13 px; only the gaps shrink so the legend and 「名录收录 63 位 / 已筛选 n」 fit on one line down to 360 px */
  .dir-key { gap: 8px; }
  /* tighter contact lines (round 9): tags -> email 12 px, email -> 课题组网站 8 px, each still a 44 px target */
  .contact { margin-top: 0; }
  .contact:has(.mail):has(.site) { margin-top: -8px; }
  .contact:has(.site) .mail { align-items: flex-end; padding-bottom: 4px; }
  .contact:has(.mail) .site { align-items: flex-start; padding-top: 4px; }
  .from { margin-top: 12px; gap: 0 10px; }   /* round 23: the entry label 「低空交通与技术」 is longer; 6 px less per gap keeps the strip inside 390 px */
  .from .back { display: inline-flex; align-items: center; min-height: 44px; padding: 0 8px; margin: -2px -8px; }
}
/* 768-1023: the station line is one horizontal row (a segmented line), counts in small muted numerals */
@media (min-width: 768px) and (max-width: 1023px) {
  .subnav { display: flex; flex-wrap: nowrap; gap: 0 24px; }
  .subnav li { display: inline-flex; justify-content: flex-start; gap: 6px; border-bottom: 0; }
  .subnav li > a { flex: 0 0 auto; }
  .subnav .results { padding-right: 24px; }
  .subnav .n { font-size: 13px; }
}
/* Mobile < 768: the station line in two columns (two rows instead of four); card = photo | name block, the rest full
   width below; panel bars in two columns */
@media (max-width: 767px) {
  .subnav { display: flex; flex-wrap: wrap; column-gap: 20px; }  /* round 14: four groups in a wrapping row, cells grow to fill it (two lines at 390) */
  .subnav li { flex: 1 1 auto; }
  .subnav .nm { font-size: 16px; }
  :root { --bar-h: 58px; --ph-w: 64px; --ph-h: 80px; }
  .q { font-size: 16px; }
  .areas-btn { padding: 0 10px; gap: 5px; }
  .bars { grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: 12px; }
  .area { padding: 5px 6px 7px; }
  .list { padding-top: 16px; }
  .group { margin-top: 24px; }
  .gh { padding-bottom: 8px; font-size: 22px; }
  .row { grid-template-rows: auto; column-gap: 16px; padding: 10px 0; }
  .pc { display: contents; }
  .ph-w { grid-row: 1; grid-column: 1; }
  .who { grid-row: 1; grid-column: 2; align-self: center; flex-direction: column; align-items: flex-start; }
  .rt, .meta, .contact { grid-column: 1 / -1; grid-row: auto; }
  .row .nm { font-size: 20px; line-height: 1.35; }
  .tl { font-size: 14px; line-height: 20px; }
  .rt { margin-top: 10px; -webkit-line-clamp: 3; font-size: 14px; line-height: 24px; }
  .empty { padding: 4px 0; }
  .empty-t { font-size: 21px; }
}
@media (max-width: 379px) {
  .bars { column-gap: 10px; }
  .area { padding: 5px 4px 7px; }
  .area-top { gap: 6px; }
  .area-label { font-size: 13px; }
}
/* 1024-1279 is touch for the roster (but desktop for the shell): page-head links get 44 px targets too */
@media (min-width: 1024px) and (max-width: 1279px) {
  .crumbs a { padding: 12px 8px; margin: 0 -8px; }
  .from .back { display: inline-flex; align-items: center; min-height: 44px; padding: 0 8px; margin: -2px -8px; }
}

/* Roster research keywords (owner 2026-10-09): 「研究方向：」 + keywords joined with 、; long lists fold in the middle. */
.rt { display: block; overflow: visible; -webkit-line-clamp: unset; }   /* keywords are short: no 2-line clamp, no 展开 */
.kw { overflow-wrap: anywhere; }
.kw-fold[hidden], .kw-btn[hidden] { display: none !important; }
.kw-more { display: inline; margin: 0 -2px; padding: 0 2px; border: 0; background: transparent; font: inherit; font-weight: 500; color: var(--ink-2); cursor: pointer; text-decoration: underline; text-decoration-style: dotted; text-decoration-thickness: 1px; text-underline-offset: 4px; }
.kw-more:hover, .kw-more:focus-visible { color: var(--ink); text-decoration-style: solid; }
.kw-more[aria-expanded="true"] { text-decoration-style: solid; }
@media (pointer: coarse) { .kw-more { min-height: 44px; padding: 10px 6px; margin: -10px -4px; } }

/* Stable leadership targets must clear the sticky faculty filters. */
h3[id^="person-"]{scroll-margin-top:20px}
h3[id^="person-"]:target{outline:1px solid var(--ink);outline-offset:4px}
@media(max-width:1279px){h3[id^="person-"]{scroll-margin-top:calc(var(--rail-h,90px) + 12px)}}