/* desk.css
   A name and a row of plain links on top,
   a relaxed column of writing below, one red accent and quiet inline links (layout after aliciadevos.com, Cornell carnelian red). */
:root {
  --accent: #b31b1b;
  --link-line: rgba(179, 27, 27, .4);
  --paper: #fff;
  --ink: #000;
  --soft: #555;
  --muted: #6b6b6b;
  --line: #e6e6e6;
  --sans: -apple-system, BlinkMacSystemFont, "Helvetica Neue", Helvetica, Arial, sans-serif;
  --zh: "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", sans-serif;
  --zh-serif: "Songti SC", "STSong", "Noto Serif SC", "SimSun", serif;
}
* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body { margin: 0; background: var(--paper); color: var(--soft); font: 400 .9375rem/1.6 var(--sans); -webkit-font-smoothing: antialiased; overflow-wrap: anywhere; }
::selection { background: #000; color: #fff; }
img { display: block; max-width: 100%; height: auto; }
p { margin: 0 0 18px; }
strong, b { color: var(--ink); font-weight: 700; }
[lang="zh"] { font-family: var(--zh); }
[id] { scroll-margin-top: 20px; }

a { color: var(--accent); text-decoration: none; text-decoration-color: var(--link-line); text-underline-offset: 3px; }
a:hover { background: var(--accent); color: var(--paper); text-decoration: none; }
/* Links in the writing are soft chips that fill with the accent on hover (after aliciadevos.com). */
main a:not(.back-link) { padding: 0 .25em; border-radius: .25em; background: rgba(122, 122, 122, .145); color: var(--ink); text-decoration: none; text-decoration-color: currentColor; -webkit-box-decoration-break: clone; box-decoration-break: clone; transition: background-color .15s, color .15s; }
main a:not(.back-link):hover { background: var(--accent); color: var(--paper); }
main a.paper-title:not(.back-link) { padding: 0; background: none; color: var(--ink); }
main a.paper-title:not(.back-link):hover { background: var(--accent); color: var(--paper); }
:focus-visible { outline: 2px solid var(--ink); outline-offset: 3px; }

h1, h2, h3 { margin: 0; line-height: 1.3; }

.skip-link { position: fixed; left: 12px; top: 12px; z-index: 100; padding: 6px 12px; background: #000; color: #fff; transform: translateY(-200%); }
.skip-link:focus { transform: none; }
.visually-hidden { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

/* ---------- Page: the masthead on top, one column below ---------- */
.page { width: min(720px, calc(100% - 48px)); margin: 0 auto; padding-top: 64px; }
.site-header { padding-bottom: 16px; }
.masthead { display: flex; align-items: baseline; justify-content: space-between; gap: 16px 28px; }
.name { display: block; color: var(--ink); font-size: 24px; font-weight: 700; line-height: 1.25; text-decoration: none; }
.name:hover { background: none; color: var(--accent); }
.name [lang] { font-family: var(--zh); font-weight: 600; }
.slash { margin: 0 .12em; font-weight: 400; color: var(--muted); }
.tree { display: flex; flex-wrap: wrap; gap: 4px 20px; }
.tree a { position: relative; display: inline-block; padding: 8px 0; color: var(--muted); font-size: 14px; text-decoration: none; transition: color .2s ease; }
.tree a::after { content: ""; position: absolute; right: 0; bottom: 3px; left: 0; height: 1px; background: var(--accent); transform: scaleX(0); transform-origin: left center; opacity: 0; transition: transform .2s ease, opacity .2s ease; }
.tree a:hover, .tree a:focus-visible { background: none; color: var(--accent); text-decoration: none; }
.tree a:hover::after, .tree a:focus-visible::after, .tree a:is([aria-current="page"], [aria-current="location"])::after { transform: scaleX(1); opacity: .65; }
.tree a:is([aria-current="page"], [aria-current="location"]) { color: var(--accent); }

main { padding-top: 32px; }

/* ---------- Home ---------- */
/* The introduction leads; the archival photograph is a small supporting image. */
.intro-photo { width: 100%; margin: 22px 0 0; }
.intro-photo img { display: block; width: 100%; max-width: 100%; height: clamp(150px, 20vw, 240px); object-fit: cover; object-position: center 42%; }
.photo-credit { margin-top: 8px; font-size: 11.5px; line-height: 1.45; color: var(--muted); }
main .photo-credit a:not(.back-link) { padding: 0; background: none; color: var(--muted); text-decoration: none; text-decoration-color: var(--line); text-underline-offset: 2px; }
main .photo-credit a:not(.back-link):hover { background: none; color: var(--accent); }
.photo-credit summary { width: fit-content; min-height: 24px; margin-top: 2px; cursor: pointer; }
.photo-credit details p { margin: 6px 0 0; }

/* Helena's own photo, set inline in the sentence; hover or tap to zoom. */
.inline-me { position: relative; display: inline-block; width: 2.35em; height: 2.35em; margin: -.4em .25em -.4em .35em; padding: 0; border: 0; border-radius: 50%; background: none; vertical-align: -.75em; cursor: zoom-in; z-index: 2; }
.inline-me img { position: absolute; left: 50%; top: 0; width: 100%; height: 100%; max-width: none !important; min-width: 0; border-radius: 50%; object-fit: cover; object-position: 48% 38%; transform: translateX(-50%); transform-origin: center; box-shadow: none; transition: width .25s ease, height .25s ease, border-radius .25s ease, box-shadow .25s ease; }
.inline-me:hover img, .inline-me[aria-expanded="true"] img { width: min(200px, 55vw); height: min(200px, 55vw); border-radius: 50%; box-shadow: 0 16px 36px rgba(0, 0, 0, .22); }
.inline-me[data-dismissed="true"] img { width: 100%; height: 100%; box-shadow: none; }
.inline-me[aria-expanded="true"] { cursor: zoom-out; }
.inline-me:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; }

/* Intro levels: red greeting; facts about me (bio, what I'm looking for) in ink; the statement in soft grey; small grey contact lines. */
.journal-bio { margin-bottom: 20px; color: var(--ink); font-size: 1rem; line-height: 1.6; }
.journal-bio .greeting { color: var(--accent); }
.journal-interests p { color: var(--soft); }
.research-highlight { background: none; color: inherit; }
/* Job-search line: same type as the bio, set in ink so it reads above the grey statement. */
.seeking-mark { background: none; color: var(--ink); }
.journal-contact, .journal-crosslinks { font-size: 15px; color: var(--muted); }
.journal-crosslinks { margin-top: 28px; margin-bottom: 6px; }
/* Small line icons inside the contact chips; they take the link colour, so they turn white on hover. */
.link-icon { width: 1em; height: 1em; margin-right: .3em; vertical-align: -.14em; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.link-icon--fill { fill: currentColor; stroke: none; }
.journal-contact { margin-bottom: 0; }

/* Plain headings and open lists keep the page close to a written document. */
.section { clear: both; margin-top: 52px; }
.section > h2 { margin-bottom: 20px; color: var(--ink); font-size: 16px; font-weight: 700; letter-spacing: .025em; text-transform: uppercase; }
main a.section-link:not(.back-link) { padding: 0; border-radius: 0; background: none; color: inherit; text-decoration: none; }
main a.section-link:not(.back-link):hover { background: none; color: var(--accent); }

/* Updates: small grey date above each line, a thin bar. */
.updates, .papers { list-style: none; margin: 0; padding: 0; }
.updates li { margin: 0 0 18px; padding: 0; }
.updates time { display: block; margin-bottom: 3px; font-size: 13px; font-weight: 400; color: var(--muted); }
.more { margin-top: 4px; font-size: 13px; }
.more-toggle { padding: 0 .25em; border: 0; border-radius: .25em; background: rgba(122, 122, 122, .145); color: var(--ink); font: inherit; cursor: pointer; transition: background-color .15s, color .15s; }
.more-toggle:hover { background: var(--accent); color: var(--paper); }

/* Research: title is the strongest line; authors and venue step down. */
.papers li { margin: 0 0 24px; padding: 0; }
.paper-title { font-size: 16px; font-weight: 700; line-height: 1.5; }
.journal-meta { margin: 4px 0 0; font-size: 14px; color: var(--muted); }
.paper-links { margin: 6px 0 0; font-size: 14px; color: var(--muted); }

/* About + hover notes */
.about-grid p { margin-bottom: 14px; }
/* About: a small fixed square photo beside the writing, top-aligned with the first line. */
.about-row { display: grid; grid-template-columns: 112px minmax(0, 1fr); gap: 0 28px; align-items: start; }
.about-grid p:last-child { margin-bottom: 0; }
.about-photo { margin: 5px 0 0; }
.about-photo .photo-frame { display: block; aspect-ratio: 1; overflow: hidden; }
.about-photo img { display: block; width: 100%; height: 100%; object-fit: cover; filter: grayscale(1); transition: filter .4s ease; }
.about-photo:hover img { filter: none; }
.about-photo figcaption { margin-top: 6px; font-size: 10px; line-height: 1.4; color: var(--muted); white-space: nowrap; }
.popup-word { position: relative; text-decoration: underline dotted; text-underline-offset: 2px; cursor: help; }
.popup-word:hover, .popup-word:focus { background: var(--ink); color: #fff; text-decoration: none; }
.popup-card { position: absolute; z-index: 10; bottom: calc(100% + 10px); left: -12px; width: min(280px, 80vw); padding: 12px 14px; background: #fff; color: var(--ink); border: 1px solid var(--line); box-shadow: 0 12px 30px rgba(0, 0, 0, .14); font: 400 13px/1.5 var(--sans); opacity: 0; visibility: hidden; transition: opacity .12s; cursor: default; }
.popup-card::after { content: ""; position: absolute; left: 0; top: 100%; width: 100%; height: 12px; }
.popup-card > span { display: block; }
.popup-card > span + span { margin-top: 8px; }
.popup-card img { margin-bottom: 8px; }
.popup-card--right { left: auto; right: -12px; }
.popup-word:hover .popup-card, .popup-word:focus .popup-card, .popup-word:focus-within .popup-card { opacity: 1; visibility: visible; }
.popup-word[data-dismissed="true"] .popup-card { opacity: 0; visibility: hidden; pointer-events: none; }

/* Quotes */
blockquote, .research-note { margin: 48px 0 14px; padding-left: 14px; border-left: 1px solid #e0e0e0; color: var(--soft); font-style: italic; }
.research-note + .research-note { margin-top: 0; }
.research-note p { margin: 0; }
.research-note .quote-attribution { margin-top: 4px; font-size: 12.5px; font-style: normal; color: var(--muted); }
.research-note.chinese-quote { font-style: normal; }
.research-note.chinese-quote p:first-child { font-family: var(--zh-serif); letter-spacing: .06em; }

/* Footer: the date, with the same space below it as the header has above */
.site-footer { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: 8px 20px; margin-top: 56px; padding: 18px 0 64px; border-top: 1px solid var(--line); font-size: 13px; color: var(--muted); }
.site-footer p { margin: 0; }

/* ---------- Inner pages ---------- */
.research-page, .updates-page, .project-page, .simple-page, .listing-page { min-height: 45vh; }
.research-page-header, .updates-page > header { margin-bottom: 20px; }
.research-page-header h1, .simple-page h1, .updates-page h1, .project-abstract h2 { color: var(--ink); font-size: 11.5px; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; }
.research-page-header > p:last-child { margin-top: 6px; color: var(--soft); }

.back-link { font-size: 13px; color: var(--muted); }
.project-header { padding: 12px 0 4px; }
.eyebrow { margin: 0 0 6px; font-size: 12.5px; color: var(--muted); }
.project-header h1 { font-size: 18px; font-weight: 700; }
.project-authors { margin: 8px 0 0; color: var(--soft); }
.project-header .work-links { display: flex; gap: 14px; margin: 4px 0 0; }
.project-figure { margin: 24px 0; }
.project-figure video { display: block; width: 100%; height: auto; aspect-ratio: 16 / 9; background: #000; }
.pdf-figure object { display: block; width: 100%; height: min(82vh, 900px); border: 1px solid var(--line); }
.project-abstract { margin-top: 30px; }
.project-abstract h2 { margin-bottom: 12px; }

.post-index { display: grid; }
.post-index a { display: grid; grid-template-columns: 90px 1fr auto; gap: 12px; padding: 8px 0; text-decoration: none; border-bottom: 1px solid var(--line); }
.post-index time { color: var(--muted); }

/* ---------- Small screens ---------- */
@media (max-width: 560px) {
  .page { width: calc(100% - 40px); padding-top: 32px; }
  .site-footer { padding-bottom: 32px; }
  .masthead { flex-direction: column; align-items: flex-start; gap: 10px; }
  .tree { gap: 4px 16px; }
  .tree a { padding: 10px 0; }
  .about-row { grid-template-columns: 1fr; }
  .about-photo { width: 112px; margin: 0 0 18px; }
  .popup-card, .popup-card--right { position: fixed; left: 16px; right: 16px; bottom: 16px; width: auto; max-height: 65vh; overflow-y: auto; }
}
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } *, *::before, *::after { transition: none !important; } }

/* ---------- Layout after dylanwootton.com ----------
   One wide justified column, one text size throughout, the name as small as the text,
   generous space between paragraphs and blocks, and a soft fade-in on load.
   Colours, chips, popups and the red accent stay as they were. */
:root { --text-size: clamp(1.0625rem, .98vw, 1.1875rem); --space-paragraph: clamp(1.5rem, 1.75vw, 2rem); --space-section: clamp(3rem, 4vw, 4rem); --space-item: clamp(1.75rem, 2.25vw, 2.5rem); }
body { font-size: var(--text-size); line-height: 1.58; letter-spacing: -.016em; }
.page { width: min(46rem, calc(100% - 48px)); padding-top: clamp(6rem, 6vw, 7.5rem); }

/* Header: the name at text size, the menu beside it. */
.site-header { padding-bottom: 0; }
.name { font-size: var(--text-size); font-weight: 600; letter-spacing: -.03em; line-height: 1.1; }
.tree a { font-size: var(--text-size); }
main { padding-top: var(--space-paragraph); }

/* Intro: every paragraph the same size, justified, separated by a full blank line. */
.intro p, .journal-bio { margin: 0; font-size: var(--text-size); line-height: 1.58; }
.intro p + p, .intro p + div, .intro div + p, .intro div + div, .journal-about p + p { margin-top: var(--space-paragraph); }
.journal-interests p, .journal-about p { text-align: justify; text-justify: inter-word; }
.journal-crosslinks { margin-top: var(--space-paragraph); margin-bottom: 0; }
.journal-crosslinks + .journal-contact { margin-top: .4rem; }
.journal-contact, .journal-crosslinks { font-size: var(--text-size); }

/* Sections: a plain heading at text size, items spaced like Wootton's projects. */
.section { margin-top: var(--space-section); }
.section > h2 { margin-bottom: var(--space-item); font-size: var(--text-size); font-weight: 600; letter-spacing: -.03em; text-transform: none; }
.updates li { margin: 0 0 1.25rem; }
.updates time { margin-bottom: .2rem; font-size: .875em; }
.more { font-size: .875em; }
.papers li { margin: 0 0 var(--space-item); }
.paper-title { font-size: var(--text-size); font-weight: 500; letter-spacing: -.028em; line-height: 1.3; }
.journal-meta, .paper-links { margin-top: .5rem; font-size: .875em; line-height: 1.5; }

/* Footer: no rule, just the date under a blank line. */
.site-footer { margin-top: var(--space-section); padding: 0 0 6rem; border-top: 0; font-size: .875em; }

.site-header, .intro-text > *, .section, .site-footer, .research-page, .updates-page, .project-page, .simple-page { opacity: 0; animation: fade-in 300ms ease-out forwards; animation-delay: var(--fade-delay, 0ms); }
.intro-text > :nth-child(1) { --fade-delay: 60ms; }
.intro-text > :nth-child(2) { --fade-delay: 120ms; }
.intro-text > :nth-child(3) { --fade-delay: 180ms; }
.intro-text > :nth-child(n+4) { --fade-delay: 240ms; }
.section { --fade-delay: 300ms; }
.section + .section { --fade-delay: 360ms; }
.site-footer { --fade-delay: 420ms; }
.research-page, .updates-page, .project-page, .simple-page { --fade-delay: 60ms; }
@keyframes fade-in { to { opacity: 1; } }
@media (max-width: 560px) {
  .page { width: calc(100% - 40px); padding-top: clamp(3.5rem, 12vw, 5rem); }
  .site-footer { padding-bottom: 4.5rem; }
  .journal-interests p, .journal-about p { hyphens: auto; }
}
@media (prefers-reduced-motion: reduce) {
  .site-header, .intro-text > *, .section, .site-footer, .research-page, .updates-page, .project-page, .simple-page { opacity: 1; animation: none; }
}

/* On wide screens the larger photo opens in the empty left margin, beside the bio,
   so it never covers the writing; narrow screens keep the in-place zoom. */
.margin-me { display: none; }
@media (min-width: 1200px) {
  .intro { position: relative; }
  .margin-me { display: block; position: absolute; top: -6px; right: calc(100% + 36px); width: 190px; height: 190px; border-radius: 50%; object-fit: cover; object-position: 48% 38%; opacity: 0; transform: translateX(8px); transition: opacity .2s ease, transform .2s ease; pointer-events: none; }
  .intro:has(.inline-me:hover) .margin-me, .intro:has(.inline-me[aria-expanded="true"]:not([data-dismissed="true"])) .margin-me { opacity: 1; transform: none; }
  .inline-me:hover img, .inline-me[aria-expanded="true"] img { width: 100%; height: 100%; box-shadow: none; }
  .inline-me { cursor: default; }
}

/* The small in-text portrait is black and white; the enlarged one is full colour. */
.inline-me img { filter: grayscale(1); transition: width .25s ease, height .25s ease, border-radius .25s ease, box-shadow .25s ease, filter .25s ease; }
.margin-me { filter: none; }
@media (max-width: 1199px) {
  .inline-me:hover img, .inline-me[aria-expanded="true"]:not([data-dismissed="true"]) img { filter: none; }
}

/* About paragraphs stay ragged-right: their long words and popup links open wide gaps when justified. */
.journal-about p { text-align: left; }
.nowrap { white-space: nowrap; }
/* Hidden notes are taken out of the text flow, so copying a sentence doesn't pick up their line breaks. */
.popup-card { display: none; }
.popup-word:hover .popup-card, .popup-word:focus .popup-card, .popup-word:focus-within .popup-card { display: block; }
.popup-word[data-dismissed="true"] .popup-card { display: none; }

/* ---------- Refinement ----------
   Pure white page, the original system sans. Left-aligned, slightly narrower column
   (about 75 characters a line), and a little more contrast between levels:
   a confident name, small spaced-caps section labels, prose a step lighter than ink. */
:root { --paper: #fff; --soft: #666; --text-size: 16px; --space-paragraph: 1.35rem; --space-section: 4.5rem; --space-item: 1.75rem; }
.page { width: min(40rem, calc(100% - 48px)); padding-top: clamp(5rem, 7vw, 7rem); }
body { letter-spacing: -.005em; }
.journal-interests p, .journal-about p { text-align: left; hyphens: manual; }

.name { font-size: 22px; font-weight: 700; letter-spacing: -.02em; }
.name [lang] { font-weight: 600; }
.tree a { font-size: 14px; }
main { padding-top: 2.25rem; }

.journal-bio { color: var(--ink); }
.journal-crosslinks, .journal-contact { font-size: 15px; }

.section > h2 { margin-bottom: 1.5rem; color: var(--ink); font-size: 12px; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; }
.updates li { margin-bottom: 1.4rem; }
.updates time, .journal-meta, .paper-links, .more { font-size: 13.5px; }
.papers li { margin-bottom: 1.9rem; }
.paper-title { font-weight: 600; letter-spacing: -.01em; line-height: 1.4; }
.site-footer { font-size: 13px; }

/* Popup words: an even dotted line that runs under descenders instead of breaking around them. */
.popup-word { text-decoration: underline dotted; text-decoration-thickness: 1px; text-decoration-skip-ink: none; text-underline-offset: .22em; text-decoration-color: #8a8a8a; }

/* Intro rhythm: every block in the introduction sits on the same gap,
   and the two link lines below it read as one small group. */
.intro-text { display: grid; row-gap: var(--space-paragraph); }
.intro .intro-text > *, .intro .intro-text p { margin: 0; }
.journal-about { display: grid; row-gap: var(--space-paragraph); }
.intro .intro-text .journal-crosslinks { margin-top: .6rem; }
.intro .intro-text .journal-contact { margin-top: calc(.4rem - var(--space-paragraph)); }

/* The in-text portrait fits inside the line, so the first line keeps the same leading as the rest. */
.inline-me { width: 1.55em; height: 1.55em; margin: -.3em .2em 0 .25em; vertical-align: -.38em; }

/* ---------- Geometry ----------
   One 8px grid for every space, one 24px line for body text, one type scale (13 / 16 / 24),
   one left edge for everything, and the right edge shared by the menu and the text. */
:root { --u: 8px; --line: 24px; --space-paragraph: 24px; --space-section: 72px; --space-item: 24px; }
body { font-size: 16px; line-height: var(--line); }
.page { width: min(640px, calc(100% - 48px)); padding-top: 96px; }
.site-header { padding-bottom: 0; }
.masthead { align-items: baseline; }
.name { font-size: 24px; line-height: 32px; }
.tree { gap: 0 24px; }
.tree a { padding: 4px 0; font-size: 14px; line-height: 24px; }
main { padding-top: 48px; }

/* Intro: every block on the same 24px gap; the two link lines read as one group 8px apart. */
.intro p, .journal-bio, .journal-interests p, .journal-about p { font-size: 16px; line-height: var(--line); }
.intro .intro-text .journal-crosslinks { margin-top: 16px; }
.intro .intro-text .journal-contact { margin-top: calc(8px - var(--space-paragraph)); }
.journal-crosslinks, .journal-contact { font-size: 15px; line-height: var(--line); }

/* The in-text portrait is exactly one line tall, so it never pushes the leading. */
.inline-me { font: inherit; width: 22px; height: 22px; margin: 0 4px; vertical-align: -5px; }

/* On wide screens the enlarged photo sits in the left margin, its top on the first line of the intro. */
@media (min-width: 1200px) {
  .margin-me { top: 0; right: calc(100% + 48px); width: 192px; height: 192px; }
}

/* Sections: a 13px spaced-caps label, 24px to the list, 24px between items. */
.section { margin-top: var(--space-section); }
.section > h2 { margin: 0 0 24px; font-size: 13px; line-height: 16px; }
.updates li { margin: 0 0 24px; line-height: var(--line); }
.updates time { display: block; margin: 0 0 4px; font-size: 13px; line-height: 16px; }
.more { margin: 0; font-size: 13px; line-height: 16px; }
.papers li { margin: 0 0 32px; }
.paper-title { font-size: 16px; line-height: var(--line); }
.journal-meta { margin: 8px 0 0; font-size: 13px; line-height: 20px; }
.paper-links { margin: 8px 0 0; font-size: 13px; line-height: 20px; }
.site-footer { margin-top: var(--space-section); padding: 0 0 96px; font-size: 13px; line-height: 16px; }

@media (max-width: 560px) {
  .page { width: calc(100% - 48px); padding-top: 48px; }
  main { padding-top: 32px; }
  .masthead { gap: 8px; }
  .site-footer { padding-bottom: 48px; }
}
/* Chinese glyphs come from a fallback font with taller metrics; keep them on the 24px line. */
main [lang="zh"], .name [lang="zh"] { line-height: 1; }

/* The job-search line stays on one line wherever the column is wide enough. */
.page { width: min(736px, calc(100% - 48px)); }
/* No nowrap: at the default spacing it already fits on one line at 736px, and it must still wrap when readers enlarge letter or word spacing (WCAG 1.4.12). */


/* ---------- Accent marks ----------
   The accent marks structure and things you can open: the slash in the name, the section labels,
   the update dates, and the dotted line under words that open a note. Body text stays black and grey. */
.slash { color: var(--accent); }
.section > h2, main a.section-link:not(.back-link) { color: var(--accent); }
main a.section-link:not(.back-link):hover { color: var(--ink); }
.updates time { color: var(--accent); }
.popup-word { text-decoration-color: var(--accent); }

/* Same level, same colour: every section label (home and inner pages) and every
   "when / where" line (update dates, paper venues, the venue above a project title) uses the accent;
   people and body text stay grey and black. */
.research-page-header h1, .simple-page h1, .updates-page h1, .project-abstract h2 { color: var(--accent); font-size: 13px; line-height: 16px; letter-spacing: .14em; }
.venue, .eyebrow { color: var(--accent); }
/* Project pages use the same levels as the research list: black bold title, grey 13px people, 13px link chips. */
.project-header h1 { color: var(--ink); font-size: 16px; font-weight: 700; line-height: var(--line); }
.project-header .eyebrow { margin: 0 0 8px; font-size: 13px; line-height: 16px; }
.project-authors { margin: 8px 0 0; color: var(--muted); font-size: 13px; line-height: 20px; }
.project-authors strong { color: inherit; font-weight: inherit; }
.project-header .work-links { margin: 8px 0 0; font-size: 13px; line-height: 20px; }

/* Name: the Chinese name follows after a word space, a step lighter and smaller so the CJK glyphs
   (which run larger and heavier than Latin at the same size) sit level with "Helena Huang". */
.name [lang="zh"] { margin-left: .2em; font-size: 21px; font-weight: 400; color: var(--ink); }

/* School mascots: small marks after a school's name, one line tall so they don't push the leading. */
.mascot { display: inline-block; width: auto; height: 22px; margin: 0 2px 0 5px; vertical-align: -5px; }

/* The intro grid never grows wider than the column, whatever a single line asks for. */
.intro .intro-text { grid-template-columns: minmax(0, 1fr); }

/* Abstracts in the research list: an "abstract" chip beside pdf/video opens the text below.
   Without JavaScript the abstract is simply shown and the chip stays hidden. */
.abstract-toggle { padding: 0 .25em; border: 0; border-radius: .25em; background: rgba(122, 122, 122, .145); color: var(--ink); font: inherit; line-height: inherit; cursor: pointer; transition: background-color .15s, color .15s; }
.abstract-toggle:hover, .abstract-toggle[aria-expanded="true"] { background: var(--accent); color: var(--paper); }
.paper-abstract { margin: 8px 0 0; color: var(--soft); font-size: 16px; line-height: var(--line); }
/* The avatar is followed by a real space (so copied text reads "Helena (she/her)"), so it only needs a left margin. */
.inline-me { margin: 0 0 0 4px; }

/* Centered masthead (after katygero.com): the name stands alone in the middle.
   No nav row: the homepage links to updates/research in its intro, inner pages carry a back link. */
.masthead { justify-content: center; text-align: center; }
.tree { display: none; }
/* Every page starts the same distance under the name; a back link sits one small step above its page's heading. */
.back-link { display: inline-block; margin-bottom: 16px; }
.project-header { padding-top: 0; }
.simple-page h1 { margin-bottom: 20px; }
.site-footer a { color: inherit; }
.site-footer a:hover { background: none; color: var(--accent); }