/* CV: one stylesheet for the screen, the printed page and the PDF.

   The page is set on one grid, print-first:
     the label column   a section's name (## Section); a smaller label (### Label), grey
     the date column    the date at the start of an entry, in tabular figures
     the text column    the entries, their details and notes
   On screen these are columns 1–2, 3–4 and 5–12 of the site's 12-column grid; in print three
   tracks, 3.5mm apart: 26mm, 22.6mm (it holds "Nov 2024 – now") and the rest. A number at the
   start of an entry ([12]) hangs to the left of the text column, so the text of every entry
   starts on one line. A ### inside a section starts a group: its label stands in the label
   column, beside the group's first entry. The name, the web address and the research interests
   open the page on the same grid; a label in the header (### Research interests) may use the
   label and the date columns, so it keeps one line, and its line stands in the text column. On
   narrower screens the label column widens (900–1199px), the labels stand above their sections
   (below 900px) and the dates above their entries (below 700px).

   Type follows the site it belongs to: Inter, two weights (400 to read, 600 to name), ink and one
   grey. An entry that opens with a title (**…**) keeps the title ink and semibold and sets the
   rest grey; any other entry is ink. In a numbered entry (a paper) the authors are grey and the
   owner's name (**…**), the title (*…*) and the journal are ink; a link to arXiv stays grey, so
   published papers stand out. The journal must be written as a link, [Journal Vol, Article](doi),
   to be set in ink and kept whole: such a journal reference never breaks inside. A journal written
   as plain text stays grey, like the authors, and may break. Details (- item), notes (> …) and
   dates are a size smaller and grey.

   Rhythm. A label's capitals stand on the line of the first capitals beside it: label and text
   start together, and the label's line height is the text's plus 0.727 × the difference in size
   (Inter leaves 0.3635 × its size between the half-leading and the capitals). A date shares its
   entry's baseline. In print every line of the date and text columns, details and notes included,
   has the same leading and entries are 5px apart (under a third of a line), every step a whole
   number of pixels, so the lines of a section keep one rhythm. Each band opens with one hairline
   and has the same space above and below its content.

   Print. A4. For US Letter write `paper: letter` in the front matter of cv/index.md (the layout
   turns it into an inline @page { size: letter }), or change `size: A4` to `size: letter` in
   @page at the end of this file: an A4 page printed on Letter paper is shrunk by about 6% to fit
   and its footer no longer lines up with the text, while true Letter keeps every size. The
   name, the date of the last update and the page number stand in the footer of every page (their
   text is set in _layouts/cv.html; Chrome and Edge print these @page margin boxes); the browser's
   own header and footer stay off even when the print dialog's "Headers and footers" is ticked.
   Links stay clickable in the PDF, without lines under them. An entry is never split across two
   pages, and a section's name always comes with its first entry. A section that goes on over a
   page break repeats neither its name nor the date above on the next page (Chrome has no running
   headers); a talk or a paper carries its own month or year in its text. Chrome writes variable
   fonts (Inter, PingFang SC) into the PDF as Type 3 fonts; a portal that refuses Type 3 needs
   static fonts for print (Inter 400, 600 and italic through @font-face).

   Nothing here is tied to one person's sections: the rules follow the Markdown conventions of the
   note in cv/index.md, so the same file serves anyone's CV. */

:root {
  --bg: #ffffff;
  --ink: #111111;
  --ink-2: #6b6b6b;   /* the one grey for text */
  --ink-3: #a6a6a6;   /* never a word: underlines only */
  --rule: #111111;
  --red: #e4002b;     /* hover, focus, selection: on screen only */
  --sans: "Inter", "Helvetica Neue", Helvetica, Arial, "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", "Noto Sans CJK SC", sans-serif;

  /* Screen: the site's tokens */
  --max: 1520px;
  --m: clamp(20px, 4.2vw, 72px);       /* outer margin */
  --g: clamp(16px, 1.8vw, 28px);       /* column gap */
  --band: clamp(28px, 2.8vw, 44px);    /* inside a band, above and below its content */
  --sec: clamp(44px, 4.6vw, 76px);     /* above the first band */
  --top: clamp(32px, 4vw, 64px);       /* top bar to the name (or to the first band) */

  --fs-xl: clamp(36px, 3.6vw, 56px);   /* the name */
  --fs-l: clamp(18px, 0.5vw + 15px, 22px);   /* labels; the research interests */
  --fs: 16px;   --lh: 24px;            /* entries */
  --fs-s: 14px; --lh-s: 20px;          /* dates, details, notes */
  --lh-l: calc(var(--lh) + 0.727 * (var(--fs-l) - var(--fs)));   /* a label beside text */
  --lh-lede: calc(1.32 * var(--fs-l)); /* the research interests, and a label beside them */

  --gap-e: 16px;      /* between entries */
  --gap-g: 32px;      /* above a smaller label (###) inside a section, and its first entry */
  --gap-d: 4px;       /* an entry to its details; between details */
  --gap-h: 8px;       /* the name to the web address */
  --gap-i: 24px;      /* the web address to the research interests */
  --gap-l: 16px;      /* a label above its content (narrow screens) */
  --hang: 0.5em;      /* a hanging number to its text */
  --measure: 40em;

  /* The grid: the columns of each part */
  --c-label: 1 / span 2;   /* page columns: a label */
  --c-body: 3 / -1;        /* page columns: the entries (date and text) */
  --b-date: 1 / span 2;    /* inside the entries (page columns 3–12): the date */
  --b-text: 3 / -1;        /*   and the text */
  --c-lab2: 1 / span 4;    /* page columns: a label in the header, over the label and date columns */
  --c-text: 5 / -1;        /* page columns: the text column (a line of the header) */
}

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

html {
  background: var(--bg);
  color: var(--ink);
  font-family: var(--sans);
  font-size: 16px;
  line-height: 1.5;
  letter-spacing: -0.011em;
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}
body { margin: 0; background: var(--bg); }
h1, h2, h3, h4, p, ul, ol, blockquote { margin: 0; }
strong, b { font-weight: 600; }
code { font: inherit; letter-spacing: inherit; }   /* a date the layout did not find still reads as text, never monospace */
a { color: inherit; text-decoration: none; }
a:hover { color: var(--red); }
::selection { background: var(--red); color: #fff; }
:focus-visible { outline: 2px solid var(--red); outline-offset: 3px; }
[hidden] { display: none !important; }
:lang(zh) { letter-spacing: 0.02em; }
.cv-nw { white-space: nowrap; }   /* a name, a word with a hyphen, a side of a date range: never broken (spans set by the layout) */

/* Top bar (screen only): the site's name as in its own header (the Chinese name under it in grey),
   leading back to the home page, and the print control at the right, grey as one of its tabs. */
.cv-bar {
  max-width: var(--max); margin: 0 auto; padding: clamp(16px, 2vw, 28px) var(--m) 0;
  display: flex; justify-content: space-between; align-items: flex-start; gap: 16px;
  font-size: var(--fs); line-height: 1.25;
}
.cv-home { font-weight: 600; }
.cv-home-zh { display: block; font-weight: 400; color: var(--ink-2); letter-spacing: 0.02em; }
.cv-home:hover .cv-home-zh { color: inherit; }
.cv-print { font: inherit; letter-spacing: inherit; line-height: inherit; color: var(--ink-2); background: none; border: 0; padding: 0; cursor: pointer; white-space: nowrap; }
.cv-print:hover { color: var(--ink); }
@media (pointer: coarse) {
  /* on a touch screen the control answers to an area at least 32px square around it; the look
     does not change */
  .cv-print { position: relative; }
  .cv-print::after { content: ""; position: absolute; top: -6px; bottom: -6px; left: min(-6px, calc(50% - 16px)); right: min(-6px, calc(50% - 16px)); }
}

/* The page and its grid */
.cv { max-width: var(--max); margin: 0 auto; padding: 0 var(--m); font-size: var(--fs); line-height: var(--lh); }
.cv-head, .cv-sec {
  display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--g);
  align-items: start;
}
.cv-body, .cv-first { display: grid; grid-template-columns: subgrid; row-gap: var(--gap-e); align-content: start; }
.cv-body { grid-column: var(--c-body); }
.cv-first { grid-column: 1 / -1; }
:where(.cv-body, .cv-first) > * { grid-column: var(--b-text); min-width: 0; }

/* Header: the name, the web address, the research interests */
.cv-head { padding-top: var(--top); padding-bottom: var(--sec); }
.cv-head > * { grid-column: 1 / -1; min-width: 0; }
.cv-head h1 {
  font-size: var(--fs-xl); font-weight: 600; line-height: 1; letter-spacing: -0.04em;
  margin-left: -0.05em;   /* optical: the first capital's stem on the edge of the text below */
  text-wrap: balance;
}
.cv-head h1:has(:lang(zh)) { text-wrap: wrap; }   /* the site's rule: the Latin name stays whole and the Chinese moves whole */
.cv-head h1 :lang(zh) { font-weight: 400; font-size: 0.9375em; color: var(--ink-2); letter-spacing: 0.02em; white-space: nowrap; }
#webaddress {
  margin-top: var(--gap-h);
  display: flex; flex-wrap: wrap; gap: 0 1.5em;
  font-size: var(--fs); line-height: var(--lh);
}
.cv-head > h3, .cv-head > .cv-e { margin-top: var(--gap-i); }
.cv-head > h1 + .cv-e { margin-top: var(--gap-h); }
.cv-head > .cv-e { grid-column: var(--c-body); }   /* a dated entry: the date and text columns */
.cv-head > .cv-e:not(.cv-dated) { grid-column: 1 / -1; display: block; }   /* a line straight under the name (a subtitle): the full width */
.cv-head > h3 ~ .cv-e:not(.cv-dated) { grid-column: var(--c-text); }        /* a label's line (the research interests): the text column, beside it */
.cv-head > .cv-e:not(.cv-dated) .cv-t p { font-size: var(--fs-l); line-height: var(--lh-lede); letter-spacing: -0.017em; max-width: 36em; text-wrap: balance; }

/* Labels: a section's name in the label column; in the header a label as large as its line */
.cv-sec h2, .cv-head > h3 {
  grid-column: var(--c-label);
  font-size: var(--fs-l); font-weight: 400; line-height: var(--lh-l); letter-spacing: -0.019em;
  text-wrap: balance;
}
.cv-head > h3 { grid-column: var(--c-lab2); line-height: var(--lh-lede); }

/* A smaller label (### inside a section): grey, in the label column, beside the first entry of its
   group; a group opens with a little more space than an entry */
.cv-sec h3 {
  grid-column: var(--c-label);
  font-size: var(--fs); font-weight: 400; line-height: var(--lh); color: var(--ink-2);
  text-wrap: balance;
}

/* Bands: one hairline, the same space above and below. The section itself has no space or line at
   its top: the rule is drawn at its top edge and the space under it belongs to the label and to the
   first entry, which cannot break. So a page can break before a section but never between its rule,
   its label and its first entry. A "##" straight followed by a "###" comes as one .cv-lead: both
   labels and the first entry, unbreakable. */
.cv-sec { position: relative; padding-bottom: var(--band); }
.cv-sec::before { content: ""; position: absolute; top: 0; left: 0; right: 0; border-top: 1px solid var(--rule); }
.cv-sec > h2, .cv-sec > h2 + .cv-body > .cv-first, .cv-lead { padding-top: calc(var(--band) + 1px); }
.cv-sec > h3, .cv-sec > h3 + .cv-body > .cv-first { padding-top: var(--gap-g); }
.cv-lead { grid-column: 1 / -1; display: grid; grid-template-columns: subgrid; row-gap: var(--gap-e); align-items: start; }
.cv-lead > .cv-body { grid-column: var(--c-body); }
.cv-sec > .cv-lead + .cv-body { margin-top: var(--gap-e); }
.cv-sec > .cv-body:not(:has(> *)) { display: none; }
.cv > .cv-sec:first-child { margin-top: var(--top); }   /* no header: the first band keeps its distance from the top bar */

/* Entries: the date, then the text with its details */
.cv-e { display: grid; grid-template-columns: subgrid; align-items: baseline; }
:where(.cv-body, .cv-first) > .cv-e { grid-column: 1 / -1; }
.cv-d {
  grid-column: var(--b-date);
  font-size: var(--fs-s); line-height: var(--lh); color: var(--ink-2);
  font-variant-numeric: tabular-nums; font-feature-settings: "case"; letter-spacing: -0.004em;   /* "case": dashes centred on the figures */
}
.cv-t { grid-column: var(--b-text); position: relative; min-width: 0; }
.cv-t p { font-size: var(--fs); line-height: var(--lh); max-width: var(--measure); text-wrap: pretty; }
.cv-titled > .cv-t > p { color: var(--ink-2); }   /* an entry that opens with a title: the title ink, the rest grey */
.cv-t strong { color: var(--ink); }

/* Numbered entries (papers): authors grey; the owner, the title and the journal ink; the
   journal reference ("Phys. Rev. Lett. 132, 228402") moves whole to the next line. The journal is
   the paragraph's own link ([Journal Vol, Article](doi)); written as plain text it stays grey. */
.cv-ref .cv-t p { color: var(--ink-2); }
.cv-ref .cv-t p > em, .cv-ref .cv-t p > a { color: var(--ink); }
.cv-ref .cv-t p > a { white-space: nowrap; }
.cv-ref .cv-t p > a[href*="arxiv.org"] { color: var(--ink-2); }
.cv-ref .cv-t p > a:hover { color: var(--red); }
.cv-ref .cv-t strong { white-space: nowrap; }
.cv-n {
  position: absolute; right: 100%; margin-right: var(--hang);
  color: var(--ink-2); font-variant-numeric: tabular-nums; font-feature-settings: "case"; white-space: nowrap;   /* brackets centred on the figures */
}

/* Details and notes: smaller, grey. Lists have no bullets; a numbered list keeps its numbers,
   hanging grey left of the text; a list inside a list is indented. */
.cv-t ul, .cv-t ol {
  padding: 0; margin-top: var(--gap-d); max-width: var(--measure);
  font-size: var(--fs-s); line-height: var(--lh-s); color: var(--ink-2); letter-spacing: -0.004em;
}
.cv ul { list-style: none; }
.cv ol { list-style: decimal outside; }
.cv ol > li::marker { color: var(--ink-2); font-variant-numeric: tabular-nums; }
.cv li :is(ul, ol) { padding-left: 1em; }
.cv-t li + li { margin-top: var(--gap-d); }
.cv-t li { text-wrap: pretty; }
.cv blockquote { color: var(--ink-2); font-size: var(--fs-s); line-height: var(--lh-s); letter-spacing: -0.004em; max-width: var(--measure); }
.cv blockquote p + p { margin-top: var(--gap-d); }
/* a list straight under a section's name: its items are entries */
:where(.cv-body, .cv-first) > :is(ul, ol) { padding: 0; max-width: var(--measure); }
:where(.cv-body, .cv-first) > :is(ul, ol) > li + li { margin-top: var(--gap-e); }
:where(.cv-body, .cv-first) > :is(ul, ol) > li { text-wrap: pretty; }
:where(.cv-body, .cv-first) > p { max-width: var(--measure); }

/* Links in sentences (details, notes) carry a hairline underline on screen */
.cv-t li a, .cv blockquote a { text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 0.2em; text-decoration-color: var(--ink-3); }
.cv-t li a:hover, .cv blockquote a:hover { text-decoration-color: var(--red); }

/* Anything else Markdown can make stays quiet: a rule (---) only adds space (rules belong to the
   bands), a picture fits its column */
.cv hr { border: 0; height: 0; margin: 0; }
.cv img { max-width: 100%; height: auto; }

/* Foot of the screen page: the date of the last update */
.cv-foot { border-top: 1px solid var(--rule); padding: var(--band) 0; font-size: var(--fs-s); line-height: var(--lh-s); color: var(--ink-2); }

/* Screen: the grid by width */
@media screen and (max-width: 1199px) {
  :root { --c-label: 1 / span 3; --c-body: 4 / -1; --c-lab2: 1 / span 5; --c-text: 6 / -1; }
}
@media screen and (max-width: 899px) {
  /* labels stand above their content */
  :root { --c-label: 1 / -1; --c-body: 1 / -1; --b-date: 1 / span 3; --b-text: 4 / -1; --lh-l: 1.32; --c-lab2: 1 / -1; --c-text: 1 / -1; }
  .cv-sec { row-gap: var(--gap-l); }
  .cv-sec > h2 + .cv-body > .cv-first, .cv-sec > h3 + .cv-body > .cv-first { padding-top: 0; }
  .cv-sec > h3 { padding-top: calc(var(--gap-g) - var(--gap-l)); }
  .cv-sec > .cv-lead + .cv-body { margin-top: 0; }
  .cv-head > h3 + .cv-e { margin-top: var(--gap-l); }
}
@media screen and (max-width: 699px) {
  /* dates stand above their entries; numbers run in */
  :root { --b-date: 1 / -1; --b-text: 1 / -1; }
  .cv-e { row-gap: 4px; }
  .cv-d { line-height: var(--lh-s); }
  .cv-n { position: static; margin: 0; }
  .cv ol { padding-left: 1.5em; }
}
@media screen and (max-width: 359px) {
  .cv-ref .cv-t p > a { white-space: normal; }   /* the narrowest phones: a reference may wrap rather than push the page sideways */
  .cv-print-more { display: none; }              /* "Print" alone, so the top bar keeps one line */
}

/* Print */
@media print {
  :root {
    --fs-xl: 28pt;
    --fs-l: 11.5pt;
    --fs: 9pt;     --lh: 17px;      /* 12.75pt */
    --fs-s: 8pt;   --lh-s: 17px;    /* one leading for every line of the text */
    --lh-lede: 20px;                /* 15pt */
    --g: 3.5mm;
    /* every vertical step a whole number of pixels, so no line drifts off the rhythm */
    --band: 11px;       /* 8.25pt */
    --sec: 16px;        /* 12pt */
    --gap-e: 5px;       /* 3.75pt: a little under a third of a line, so the last page keeps room to grow */
    --gap-g: 12px;
    --gap-d: 0px;
    --gap-h: 6px;
    --gap-i: 12px;
    --measure: none;
    /* three tracks: the label column, the date column ("Nov 2024 – now" at 8pt fits), the text */
    --w-label: 26mm;
    --w-date: 22.6mm;
    --c-label: 1 / 2; --c-body: 2 / -1; --b-date: 1 / 2; --b-text: 2 / -1; --c-lab2: 1 / 3; --c-text: 3 / -1;
  }
  .cv-head, .cv-sec { grid-template-columns: var(--w-label) var(--w-date) minmax(0, 1fr); }
  /* The date starts with its entry. In a 17px line box Chrome sets 8pt text 1px higher than 9pt
     text, so dates, details and notes move down 1px (it takes no room): every baseline of the date
     and text columns then stands on the same 17px pitch. */
  .cv-e { align-items: start; }
  .cv-d, .cv-t ul, .cv-t ol, .cv blockquote { position: relative; top: 1px; }
  .cv-bar, .cv-foot { display: none !important; }
  .cv { max-width: none; padding: 0; }
  .cv-head { padding-top: 0; }
  .cv > .cv-sec:first-child { margin-top: 0; }
  /* The space under a band's content is a margin on paper, not padding: a margin is dropped at a
     page break, so a section's last entries may end a page; padding would have to fit on that page
     too, and the whole section would move on, leaving the foot of the page empty. */
  .cv-sec { padding-bottom: 0; margin-bottom: var(--band); }
  a { text-decoration: none !important; }   /* links stay clickable in the PDF, without lines */
  .cv-head, .cv-sec > h2, .cv-sec > h3, .cv-first, .cv-lead, .cv-e, .cv blockquote,
  :where(.cv-body, .cv-first) > :is(ul, ol) > li { break-inside: avoid; }
  .cv-sec::before { transform: scaleY(0.667); transform-origin: 0 0; }   /* a 0.5pt hairline on paper */
}

@page {
  size: A4;   /* US Letter: `paper: letter` in the front matter of cv/index.md, or size: letter here */
  margin: 15mm 15mm 17mm;
  /* empty boxes at the top: the browser prints no date, title or address there, even with the
     print dialog's "Headers and footers" ticked; the footer is ours */
  @top-left { content: ""; }
  @top-center { content: ""; }
  @top-right { content: ""; }
  @bottom-left { font-family: "Inter", "Helvetica Neue", Helvetica, Arial, sans-serif; font-size: 8pt; color: #6b6b6b; letter-spacing: -0.004em; vertical-align: middle; }
  @bottom-right { font-family: "Inter", "Helvetica Neue", Helvetica, Arial, sans-serif; font-size: 8pt; color: #6b6b6b; letter-spacing: -0.004em; vertical-align: middle; font-variant-numeric: tabular-nums; }
}