/* The Chinese pages (site/zh/). scripts/build-translations.mjs links this sheet after styles.css on those
   pages only, so the Chinese edition can set its own type and hero without touching the English and
   French pages. Titles are set in a system serif for Chinese (Songti, Source Han Serif, SimSun), the
   family of the 巧妙黑客 wordmark; everything else in the system sans (PingFang, Source Han Sans,
   Microsoft YaHei). Latin fonts come first in each stack, so names and acronyms keep their own glyphs. */
:root {
  --zh-serif: Georgia, "Songti SC", "STSong", "Noto Serif CJK SC", "Noto Serif SC", "Source Han Serif SC", "Source Han Serif CN", "SimSun", "宋体", serif;
  --zh-sans: -apple-system, BlinkMacSystemFont, "Segoe UI", "PingFang SC", "Hiragino Sans GB", "Noto Sans CJK SC", "Noto Sans SC", "Source Han Sans SC", "Microsoft YaHei", "微软雅黑", sans-serif;
  /* Dark chocolate for titles, as on the mark's dark squares, and a blue-grey for the small English captions. */
  --zh-ink: #4a2814;
  --zh-mist: #7d93a9;
}

/* Type: a little larger and looser than the English text, as Chinese reads best. Titles are tracked
   out instead of tightened. */
body { font-family: var(--zh-sans); font-size: 1.0625rem; line-height: 1.85; letter-spacing: .02em; }
p, li { text-wrap: pretty; overflow-wrap: anywhere; }
h1, h2, h3 { font-family: var(--zh-serif); font-weight: 700; letter-spacing: .06em; }
h1 { font-size: clamp(2.25rem, 4.6vw, 3.25rem); line-height: 1.25; }
h2 { font-size: 1.625rem; letter-spacing: .08em; }
h3 { font-size: 1.1875rem; letter-spacing: .05em; }
.eyebrow, .kicker { font-family: var(--zh-sans); font-size: .75rem; font-weight: 500; letter-spacing: .2em; text-transform: none; }
.text-link { font-size: .9063rem; font-weight: 500; letter-spacing: .06em; }
.button, .hiring-button { letter-spacing: .08em; }
time, .publication-year, .timeline-date { font-variant-numeric: tabular-nums; }

/* Header and footer. */
.nav-link { padding: 9px 13px; font-size: 1.0625rem; font-weight: 500; letter-spacing: .1em; }
.nav-link.is-cta { padding: 8px 17px 8px 20px; }
.lang-option { letter-spacing: .04em; }
.footer-brand { font-family: var(--zh-serif); }
.footer-affiliation { letter-spacing: .04em; }

/* Home page: the 巧妙黑客 Lab wordmark stands as the title, with the lab's line set vertically at its
   side, like a spine, and the introduction beside it. The English acronym becomes a small caption. */
.hero-inner { padding-block: 52px 56px; }
@media (min-width: 1201px) {
  .hero-inner { grid-template-columns: minmax(0, 600px) minmax(0, 1fr) 300px; }
}
.hero-copy {
  display: grid; grid-template-columns: auto auto minmax(0, 1fr); grid-template-rows: 1fr auto auto 1fr;
  column-gap: 30px; align-items: center;
}
.hero-copy .eyebrow {
  grid-column: 1; grid-row: 1 / -1; align-self: stretch; margin: 0; padding: 2px 0 2px 12px;
  writing-mode: vertical-rl; text-orientation: mixed; border-left: 2px solid var(--nus-orange);
  color: var(--nus-blue); font-size: .75rem; letter-spacing: .1em;
}
.hero h1 { display: block; grid-column: 2; grid-row: 1 / -1; margin: 0; }
/* The page source carries the English mark, which site.js replaces with the Chinese one; hidden so it never flashes. */
.hero-mark { display: none; }
/* The mark is sized so that the vertical line beside it, which has a fixed length, brackets it closely. */
.hero-wordmark { width: auto; height: clamp(15rem, 17vw, 16.5rem); }
.hero .lead { grid-column: 3; grid-row: 2; max-width: 30em; margin: 0; color: var(--ink); font-size: 1.0625rem; line-height: 1.95; }
.lab-expansion {
  grid-column: 3; grid-row: 3; max-width: 30em; margin: 18px 0 0; padding-top: 14px; border-top: 1px solid var(--line);
  color: var(--muted); font: 500 .8125rem/1.6 var(--mono); letter-spacing: .03em;
}
.accent-letter { color: var(--orange-ink); font-weight: 700; }

/* Section titles: an orange square in front, as on the fact lists, and the English name after in small
   type. `content: "…" / ""` keeps the English out of the accessible name. */
.section-heading { margin-bottom: 24px; }
.section-heading h2 { padding: 0; color: var(--zh-ink); font-size: 1.75rem; letter-spacing: .1em; }
.section-heading h2::before {
  display: inline-block; width: .4em; height: .4em; margin-right: .5em; vertical-align: .18em;
  background: var(--nus-orange); border-radius: 1px; content: "";
}
.section-heading h2::after {
  position: static; width: auto; height: auto; margin-left: .75em; background: none; border-radius: 0; vertical-align: .34em;
  color: var(--zh-mist); font: 600 .6875rem/1 var(--mono); letter-spacing: .28em; text-transform: uppercase; content: none;
}
#people-title::after { content: "People" / ""; }
#news-title::after { content: "News" / ""; }
#game-title::after { content: "Game" / ""; }
.section-note { font-size: .9063rem; }

/* Recruiting card and the orange note. */
.hiring-card h2 { font: 700 1.75rem/1.25 var(--zh-serif); letter-spacing: .06em; }
.hiring-kicker { font-family: var(--zh-sans); font-size: .75rem; font-weight: 500; letter-spacing: .22em; text-transform: none; }
.hiring-roles li { font-weight: 500; letter-spacing: .06em; }
.hiring-card p:not(.hiring-kicker) { font-size: .9063rem; line-height: 1.75; }
.hiring-button { font-weight: 600; }
.join-note h3 { letter-spacing: .1em; }
.join-note p { letter-spacing: .03em; }

/* People. */
.member-list { gap: 34px 44px; }
.person-card { grid-template-columns: 104px minmax(0, 1fr); gap: 22px; }
.person-photo { width: 104px; }
.person-content .eyebrow { margin-bottom: 5px; color: var(--orange-ink); }
.person-content h3 { margin-bottom: 6px; font-size: 1.375rem; letter-spacing: .08em; }
.person-content p { font-size: .9375rem; line-height: 1.75; }
.news-brief time { font-family: var(--zh-sans); font-size: .8125rem; font-weight: 500; letter-spacing: .08em; }
.news-brief a { font-weight: 500; }

/* Inner pages: the title, then its English name beneath in small type. */
.page-hero-inner { padding-block: 44px 40px; }
.page-hero h1 { margin-bottom: 8px; color: var(--zh-ink); letter-spacing: .12em; }
.page-choco { margin-left: .18em; vertical-align: .2em; }
.page-hero h1::after {
  display: block; margin-top: 10px; color: var(--zh-mist);
  font: 600 .75rem/1 var(--mono); letter-spacing: .3em; text-transform: uppercase;
}
body[data-page="publications"] .page-hero h1::after { content: "Publications" / ""; }
body[data-page="news"] .page-hero h1::after { content: "News" / ""; }
body[data-page="openings"] .page-hero h1::after { content: "Openings" / ""; }
.page-hero p { max-width: 36em; margin-top: 18px; }

/* Member pages. */
.profile-intro h1 { font-size: clamp(2.25rem, 4.6vw, 3rem); color: var(--zh-ink); letter-spacing: .1em; }
.profile-role, .back-link, .mentoring h3 { font-family: var(--zh-sans); font-size: .8125rem; font-weight: 500; letter-spacing: .2em; text-transform: none; }
.back-link { letter-spacing: .14em; }
.profile-affiliation, .profile-extra { letter-spacing: .03em; }
.profile-link { font-weight: 500; letter-spacing: .04em; }
.profile-section > h2 { color: var(--zh-ink); font-size: 1.25rem; letter-spacing: .12em; }
.profile-section-body { max-width: 42em; }
.profile-section-body p { line-height: 1.95; }
.interest-list li, .research-topics li { letter-spacing: .04em; }
.fact-list li { margin-bottom: 10px; }
.profile-pending h2 { letter-spacing: .1em; }

/* Publications: paper titles stay in the sans, as they are in English; the map's lane labels are
   Chinese, so they leave the monospace and its small size. */
.publication-card :is(h2, h3) { font-family: var(--zh-sans); font-weight: 650; letter-spacing: 0; }
.publication-tag { letter-spacing: .04em; }
.map-filter-name { width: 58px; font-family: var(--zh-sans); font-weight: 500; letter-spacing: .2em; text-transform: none; }
.map-chip { font-weight: 500; letter-spacing: .04em; }
.map-lane-label { font: 600 12px var(--zh-sans); letter-spacing: .08em; text-transform: none; }
.map-count, .map-legend-item { letter-spacing: .04em; }

/* News and openings. */
.timeline-item { grid-template-columns: 130px minmax(0, 1fr); }
.timeline-date { font-family: var(--zh-sans); font-weight: 500; letter-spacing: .08em; }
.timeline-item h2 { font-size: 1.3125rem; letter-spacing: .06em; line-height: 1.5; }
.opening-card h2 { font-size: 1.4375rem; letter-spacing: .1em; }
.apply-panel h2 { font: 700 1.75rem/1.25 var(--zh-serif); letter-spacing: .06em; }
.apply-list li { letter-spacing: .03em; }
.expectations-note p { letter-spacing: .03em; }

/* Narrower screens: the hero keeps its side-by-side wordmark down to phone widths, where the line
   returns to a horizontal label above the mark. */
@media (max-width: 1200px) {
  .hero-wordmark { height: 14rem; }
  .hero-copy .eyebrow { font-size: .6875rem; letter-spacing: .08em; }
}
@media (max-width: 900px) {
  .hero-inner { padding-block: 40px 42px; }
  .hero-wordmark { height: 15rem; }
  .hero-copy .eyebrow { font-size: .75rem; letter-spacing: .1em; }
  .section-heading h2 { font-size: 1.5rem; }
  .page-hero h1 { font-size: 2.25rem; }
  .profile-intro h1 { font-size: 2rem; }
}
@media (max-width: 640px) {
  .hero-copy { grid-template-columns: 1fr; grid-template-rows: none; row-gap: 0; }
  .hero-copy .eyebrow {
    grid-column: 1; grid-row: auto; align-self: auto; margin-bottom: 18px; padding: 2px 0 2px 10px;
    writing-mode: horizontal-tb; text-orientation: mixed; letter-spacing: .16em;
  }
  .hero h1 { grid-column: 1; grid-row: 2; margin-bottom: 22px; }
  .hero-wordmark { height: 12rem; }
  .hero .lead { grid-column: 1; grid-row: 3; }
  .lab-expansion { grid-column: 1; grid-row: 4; }
  .person-card { grid-template-columns: 84px minmax(0, 1fr); gap: 18px; }
  .person-photo { width: 84px; }
  .section-heading h2::after { display: block; margin: 10px 0 0; }
  .timeline-item { grid-template-columns: 1fr; gap: 8px; }
}