/* Yue-Bo Jia — site stylesheet.
   One reading column, one typeface, one accent colour (links).
   Hierarchy comes from size, small capitals, and space, not from boxes or rules. */

@font-face {
  font-family: "Source Serif 4";
  src: url("fonts/SourceSerif4-Roman.woff2") format("woff2");
  font-weight: 200 900;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Source Serif 4";
  src: url("fonts/SourceSerif4-Italic.woff2") format("woff2");
  font-weight: 200 900;
  font-style: italic;
  font-display: swap;
}
/* Only the characters of the Chinese name (made by subset_fonts.py). */
@font-face {
  font-family: "FandolKai";
  src: url("fonts/FandolKai-Name.woff2") format("woff2");
  font-display: swap;
}

:root {
  --bg: #fff;
  --text: #222;
  --muted: #646464;
  --link: #264a78;
  --rule: #dcdcdc;
  --selection: #e4e8ef;

  /* The frame holds the header and the homepage's two columns; running text
     is held to a slightly narrower measure (~70 characters of Source Serif 4).
     Because text is ragged-right, the difference is felt rather than seen. */
  --frame: 40em;
  --measure: 35em;
  --gutter: 1.25rem;

  --serif: "Source Serif 4", Charter, "Bitstream Charter", "Sitka Text", Cambria, Georgia, serif;
  /* Source Serif has no Chinese; use a Song (serif) face, never the sans default. */
  --serif-zh: "FandolKai", "Kaiti SC", "STKaiti", "KaiTi", serif;
}

*, *::before, *::after { box-sizing: border-box; }

html {
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
}

body {
  margin: 0;
  background: var(--bg);
  color: var(--text);
  font-family: var(--serif);
  /* 17px on phones, rising to 18px on desktop. */
  font-size: clamp(1.0625rem, 0.95rem + 0.3vw, 1.125rem);
  line-height: 1.55;
  font-optical-sizing: auto;
  font-kerning: normal;
  font-variant-numeric: oldstyle-nums proportional-nums;
  text-rendering: optimizeLegibility;
}

::selection { background: var(--selection); }

/* --- Page frame ---------------------------------------------------------- */

.site-header,
main {
  max-width: var(--frame);
  margin-inline: auto;
  padding-inline: var(--gutter);
  box-sizing: content-box;
}

main :is(p, h1, h2, h3, ol, ul, dl, address) { max-width: var(--measure); }

/* --- Links --------------------------------------------------------------- */

a {
  color: var(--link);
  text-decoration-line: underline;
  text-decoration-thickness: 0.06em;
  text-underline-offset: 0.18em;
  text-decoration-color: color-mix(in srgb, currentColor 45%, transparent);
  text-decoration-skip-ink: auto;
}
a:hover { text-decoration-color: currentColor; }

:focus-visible {
  outline: 2px solid var(--link);
  outline-offset: 3px;
}
a:focus-visible { text-decoration-color: currentColor; }

.skip-link {
  position: absolute;
  left: var(--gutter);
  top: 0.75rem;
  padding: 0.3em 0.6em;
  background: var(--bg);
  transform: translateY(-200%);
}
.skip-link:focus { transform: none; }

.visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}

/* --- Header -------------------------------------------------------------- */

/* Stacked like a title page: the name on its own line, the menu beneath,
   both on the same left edge as the text. */
.site-header {
  padding-top: 3rem;
  margin-bottom: 3.5rem;
}

/* Capitals and small capitals: the treatment for a name on a title page.
   Each name is kept whole; on narrow screens the line breaks between them. */
.site-name {
  margin: 0 0 0.9rem;
  font-size: 1.35em;
  font-weight: 520;
  line-height: 1.3;
  font-variant-caps: small-caps;
  font-variant-numeric: lining-nums;
  letter-spacing: 0.035em;
  color: var(--text);
}
.site-name .name { white-space: nowrap; }
.site-name .name-sep {
  padding-inline: 0.2em;
  color: var(--muted);
  font-weight: 400;
}
/* Chinese glyphs sit lower in the em box than Latin capitals and look lighter,
   so they are set a touch larger and raised to centre on the capital height.
   Kai has only one, light weight; a thin outline brings it up to the weight
   of the small capitals beside it. */
.site-name .name-zh {
  font-family: var(--serif-zh);
  font-variant-caps: normal;
  font-size: 0.95em;
  font-weight: 400;
  font-synthesis: none;
  -webkit-text-stroke: 0.03em currentColor;
  letter-spacing: 0.06em;
  margin-left: 0.25em;
  position: relative;
  top: -0.05em;
}

.site-header ul {
  display: flex;
  flex-wrap: wrap;
  margin: 0;
  padding: 0;
  list-style: none;
}
/* Menu items are divided by light pipes, so they read differently from the
   middle dot inside the name. */
.site-header li + li::before {
  content: "|" / "";
  padding-inline: 0.6em;
  color: var(--rule);
  font-weight: 300;
}
.site-header nav a {
  color: var(--muted);
  text-decoration: none;
  /* Each item reserves the width of its bold form (an invisible bold copy of
     the label), so the separators stay put whichever page is current. */
  display: inline-flex;
  flex-direction: column;
  align-items: center;
}
.site-header nav a::after {
  content: attr(data-label) / "";
  font-weight: 600;
  height: 0;
  overflow: hidden;
  visibility: hidden;
  pointer-events: none;
}
/* The first item stays flush with the left edge of the name and text. */
.site-header nav li:first-child a { align-items: flex-start; }
.site-header nav a:hover,
.site-header nav a:focus-visible {
  color: var(--text);
  text-decoration: underline;
  text-decoration-color: var(--rule);
}
/* With no visible page titles, the current menu item is the title:
   darker and slightly heavier than its neighbours. */
.site-header nav a[aria-current="page"] {
  color: var(--text);
  font-weight: 600;
}

/* nav_style: blue in site.yaml. Links are coloured but not underlined
   (the menu's position says what it is); the current page stays in ink. */
.nav-blue nav a { color: var(--link); }
.nav-blue nav a:hover,
.nav-blue nav a:focus-visible {
  color: var(--link);
  text-decoration-color: color-mix(in srgb, var(--link) 45%, transparent);
}
.nav-blue nav a[aria-current="page"] { color: var(--text); }

/* --- Text ---------------------------------------------------------------- */

p, ul, ol, dl, address, figure { margin: 0 0 1em; }

h1, h2, h3 {
  font-weight: 560;
  line-height: 1.25;
  text-wrap: balance;
}

h1 {
  font-size: 1.65em;
  font-weight: 500;
  letter-spacing: -0.005em;
  margin: 0 0 1.25em;
}

/* Section heads are small capitals at text size: a book's section break,
   not a slide title. */
h2 {
  font-size: 1em;
  font-variant-caps: all-small-caps;
  font-variant-numeric: lining-nums;
  letter-spacing: 0.08em;
  font-weight: 600;
  margin: 2.75em 0 1em;
}

h3 {
  font-size: 1.05em;
  margin: 0 0 0.2em;
}

p { text-wrap: pretty; }

i, em { font-style: italic; }

address { font-style: normal; }

code {
  font-family: ui-monospace, "SF Mono", Menlo, Consolas, monospace;
  font-size: 0.85em;
}

/* --- Home ---------------------------------------------------------------- */

.intro {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 12.5em;
  gap: 0 3em;
  align-items: start;
}

.portrait {
  margin: 0;
  padding-top: 0.4em; /* top of photo meets the cap height of the first line */
}
.portrait img {
  display: block;
  width: 100%;
  height: auto;
}

/* --- Research ------------------------------------------------------------ */

.work { margin-bottom: 2.25em; }
.work:last-child { margin-bottom: 0; }

.work-status {
  font-style: italic;
  color: var(--muted);
  margin-bottom: 0.6em;
}

.work-note {
  color: var(--muted);
  font-size: 0.94em;
}

.citations {
  list-style: none;
  padding: 0;
}
.citations li {
  padding-left: 1.5em;
  text-indent: -1.5em;
  margin-bottom: 1em;
}
.citations .status { font-style: italic; }
.citations .authors,
.citations .work-links {
  display: block;
  text-indent: 0;
}
.citations .authors { color: var(--muted); }
.citations .detail { display: block; text-indent: 0; color: var(--muted); }
.citations .work-links { font-size: 0.94em; }

/* --- CV and Links ------------------------------------------------------- */

/* These are reference lists, read by scanning, so they are set tighter than
   the prose pages: closer sections, and a smaller size for secondary matter
   (dates, details, author lines) to give three levels: label, entry, detail. */

/* The PDF link sits just above the first heading, on the shared left edge.
   Floated and lifted with a negative margin into the space below the menu,
   it takes up no room, so the CV's first heading starts at the same height
   as on the other pages. It sits nearer the heading than the menu, and in
   link blue, so it reads as part of the CV rather than a second menu row. */
.cv-meta {
  float: left;
  width: 100%;
  margin: -2.1em 0 0;
  line-height: 1.25;
  font-size: 0.89em;
  color: var(--muted);
}

.cv-section h2 { margin: 2em 0 0.75em; }
.cv-meta + .cv-section h2 { margin-top: 0; }

.cv-entries { margin: 0; }

.cv-entry {
  display: grid;
  grid-template-columns: 4.5em minmax(0, 1fr);
  gap: 0 1.25em;
  align-items: baseline;
  margin-bottom: 0.45em;
}
.cv-entry dt {
  color: var(--muted);
  font-size: 0.89em;
  font-variant-numeric: oldstyle-nums tabular-nums;
}
.cv-entry dd { margin: 0; }
.cv-entry .detail,
.cv-entry .authors,
.cv-entry .work-links {
  display: block;
  font-size: 0.89em;
}
.cv-entry .detail,
.cv-entry .authors { color: var(--muted); }
/* Grouped entries (a role, then its courses): the rows sit close together,
   and the courses are indented under the role. */
.cv-group-head,
.cv-subentry { margin-bottom: 0.15em; }
.cv-subentry.cv-group-end { margin-bottom: 0.45em; }
.cv-subentry dd { padding-left: 1em; }
.cv-entry .status { font-style: italic; }

.links > div {
  display: grid;
  grid-template-columns: 8em minmax(0, 1fr);
  gap: 0 1.25em;
  align-items: baseline;
  margin-bottom: 0.35em;
}
.links dt { color: var(--muted); font-size: 0.89em; }
.links address { margin: 0; }
/* Identifiers (ORCID, addresses) read better in lining figures: an old-style
   zero is easily taken for a letter o. */
.links dd { margin: 0; overflow-wrap: anywhere; font-variant-numeric: lining-nums; }

/* With no footer, the page simply ends with generous space. */
main { padding-bottom: 6rem; }

/* A page whose title is hidden starts directly on its first section. */
main > .visually-hidden:first-child + section > h2:first-child { margin-top: 0; }

/* --- Narrow screens ------------------------------------------------------ */

@media (max-width: 40em) {
  body { hyphens: auto; }

  .site-header {
    padding-top: 1.75rem;
    margin-bottom: 2.5rem;
  }
  .site-name { font-size: 1.15em; }
  /* Too little room under the menu to lift it; give it its own line instead. */
  .cv-meta { float: none; margin: 0 0 1em; }

  .intro { grid-template-columns: 1fr; }
  .portrait {
    order: -1;
    width: 8.5em;
    padding-top: 0;
    margin-bottom: 1.75em;
  }
}

@media (max-width: 30em) {
  .links > div { display: block; margin-bottom: 0.9em; }
  .cv-entry { grid-template-columns: 4.25em minmax(0, 1fr); gap: 0 1em; }
}

/* --- Print --------------------------------------------------------------- */

@media print {
  body { background: #fff; color: #000; font-size: 10.5pt; }
  .site-header nav, .skip-link { display: none; }
  .site-header { padding-top: 0; margin-bottom: 1.5em; }
  a { color: inherit; text-decoration: none; }
}