/*
 * style.css, Mabrok Lab.
 *
 * ## The idea
 *
 * A sheet of warm paper on a desk, with the type doing the work. Academic
 * sites go wrong in one of two directions: a 2004 department page, or a
 * startup landing page wearing a university logo. The way out of both is
 * editorial. Real hierarchy, hairlines instead of boxes, one accent used
 * rarely, and enough room around a figure that it reads as evidence rather
 * than decoration.
 *
 * Nothing here is a card with an icon and three words in it. Sections are
 * numbered and ruled, the way a paper is, because that is the visual language
 * the reader of this site already knows.
 *
 * ## The constraints, kept on purpose
 *
 * No web fonts, no framework, no build step, no third party. It loads
 * instantly on a phone on campus wifi, which is where most people who follow
 * a link to this site will open it, and there is nobody else to trust with
 * who reads it.
 *
 * Every colour is a variable, which is what makes dark mode one block near
 * the bottom rather than a second stylesheet.
 */

:root {
  /* Paper and ink. Warm rather than grey: the whole site is one sheet. */
  --desk: #efe9e0;
  --sheet: #fffdf9;
  --card: #fbf7f1;
  --ink: #26231f;
  --ink-soft: #4a443d;
  --muted: #6b635b;
  --faint: #948b82;
  --line: #e2d9cd;
  --line-soft: #eee7dd;
  --hairline: #d8cec0;

  /* One accent. Used for links, the rules under section numbers, and almost
     nothing else, so that when it does appear it means something. */
  --accent: #3d4ea8;
  --accent-ink: #2f3d86;
  --accent-soft: #eaecf7;
  --warm: #b1560a;
  --warm-soft: #fbeedd;

  /* A colour per kind of publication, so 88 entries can be scanned by eye. */
  --journal: #3d4ea8;
  --conference: #0f766e;
  --chapter: #7c3aed;
  --preprint: #b1560a;
  --on-accent: #ffffff;

  --bar: #221f1c;
  --bar-ink: #f6f2ec;
  --bar-dim: #a79d93;
  --bar-accent: #e39355;

  --radius: 4px;
  --measure: 68ch;
  --wide: 1180px;
  --gutter: 28px;

  --font: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --serif: "Iowan Old Style", "Palatino Linotype", Palatino, "Book Antiqua", Georgia, serif;
  --mono: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
}

* { box-sizing: border-box; }

html { scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  * { animation: none !important; transition: none !important; }
}

body {
  margin: 0;
  background: var(--desk);
  color: var(--ink);
  font-family: var(--serif);
  font-size: 19px;
  line-height: 1.62;
  -webkit-text-size-adjust: 100%;
  text-rendering: optimizeLegibility;
}

/* Anything that is interface rather than prose: nav, labels, meta, buttons.
   The serif is for reading; the sans is for everything you look at rather
   than read. */
.ui, .bar, .eyebrow, .pub-head, .pub-meta, .stat-label, .stat-note,
.filters, .figcredit, .news time, .code, .foot, button, input, select, textarea {
  font-family: var(--font);
}

/* ------------------------------------------------------------- masthead */

.bar { background: var(--bar); color: var(--bar-ink); }
.bar-inner {
  max-width: var(--wide); margin: 0 auto;
  display: flex; align-items: center; gap: 22px;
  padding: 0 var(--gutter); height: 58px;
}
.brand {
  font-family: var(--serif); font-weight: 700; font-size: 1.14rem;
  color: var(--bar-ink); text-decoration: none; white-space: nowrap; letter-spacing: -.01em;
}
.brand span { color: var(--bar-accent); }
.bar nav { margin-left: auto; display: flex; gap: 4px; align-items: center; flex-wrap: wrap; }
.bar nav a, .bar nav .here {
  color: var(--bar-dim); text-decoration: none;
  padding: 6px 10px; border-radius: var(--radius);
  font-size: .78rem; letter-spacing: .07em; text-transform: uppercase; font-weight: 600;
  white-space: nowrap;
}
.bar nav a:hover { color: var(--bar-ink); background: rgba(255, 255, 255, .08); }
.bar nav .here { color: var(--bar-ink); box-shadow: inset 0 -2px 0 var(--bar-accent); border-radius: 0; }

/* ----------------------------------------------------------------- hero */

.hero {
  max-width: var(--wide); margin: 0 auto;
  display: grid; grid-template-columns: minmax(0, 1fr) 260px; gap: 56px;
  align-items: start;
  padding: 76px var(--gutter) 56px;
}
.eyebrow {
  margin: 0 0 1.1em; font-family: var(--font);
  font-size: .74rem; letter-spacing: .14em; text-transform: uppercase;
  color: var(--muted); font-weight: 700;
}
.hero h1 {
  font-family: var(--serif);
  font-size: clamp(2.1rem, 5vw, 3.4rem); line-height: 1.06;
  margin: 0 0 .45em; letter-spacing: -.025em; font-weight: 700;
  max-width: 15ch;
}
.lede {
  font-size: 1.14rem; line-height: 1.58; color: var(--ink-soft);
  margin: 0 0 1.5em; max-width: 52ch;
}
.lede-page { font-size: 1.2rem; color: var(--muted); margin-bottom: 1.9em; }

.hero-actions { display: flex; gap: 10px; flex-wrap: wrap; margin: 0; align-items: center; }
.button {
  display: inline-block; padding: 10px 20px; border-radius: var(--radius);
  background: var(--accent); color: var(--on-accent); text-decoration: none;
  font-family: var(--font); font-weight: 600; font-size: .9rem; letter-spacing: .01em;
  border: 1px solid var(--accent);
}
.button:hover { background: var(--accent-ink); border-color: var(--accent-ink); }
.button-quiet { background: transparent; color: var(--accent-ink); border-color: var(--hairline); }
.button-quiet:hover { background: var(--accent-soft); border-color: var(--accent); color: var(--accent-ink); }

.hero-portrait { display: grid; gap: 14px; justify-items: start; }
.portrait {
  width: 100%; max-width: 260px; aspect-ratio: 4 / 5; object-fit: cover; object-position: center 22%;
  border-radius: 2px; filter: grayscale(.16) contrast(1.02);
  box-shadow: 0 1px 0 var(--hairline), 0 18px 40px -22px rgba(40, 28, 16, .55);
}
.portrait-initials {
  display: grid; place-items: center; background: var(--accent-soft); color: var(--accent-ink);
  font-family: var(--serif); font-size: 3.4rem; font-weight: 700;
}

/* What he is working on now. The most personal thing on the page, and the
   part a returning reader checks. */
.now {
  border-top: 2px solid var(--ink); padding-top: 12px;
  font-family: var(--font); font-size: .84rem; line-height: 1.5; color: var(--muted);
  max-width: 260px;
}
.now b { display: block; color: var(--ink); font-size: .72rem;
  letter-spacing: .14em; text-transform: uppercase; margin-bottom: .5em; }
.now ul { list-style: none; margin: 0; padding: 0; }
.now li { padding: .4em 0; border-bottom: 1px solid var(--line-soft); }
.now li:last-child { border-bottom: 0; }

/* -------------------------------------------------------------- reading */

main.wrap {
  max-width: calc(var(--measure) + 160px); margin: 0 auto;
  background: var(--sheet);
  border: 1px solid var(--line); border-bottom: 0;
  border-radius: 2px 2px 0 0;
  padding: 60px 68px 88px;
  min-height: 40vh;
  box-shadow: 0 -1px 0 rgba(255, 255, 255, .7) inset;
}
main.wrap-wide { max-width: var(--wide); padding-left: 76px; padding-right: 76px; }

h1, h2, h3, h4 { font-family: var(--serif); line-height: 1.2; letter-spacing: -.015em; }
main h1 { font-size: 2.4rem; margin: 0 0 .55em; font-weight: 700; }

/* A section opens like a section of a paper: a hairline above it, and a
   counter in the margin. Numbered by CSS, so nothing has to be renumbered
   when a section moves. */
main { counter-reset: section; }
main h2 {
  counter-increment: section;
  font-size: 1.62rem; margin: 2.6em 0 .7em; padding-top: 1.1em;
  border-top: 1px solid var(--hairline); position: relative;
}
main h2::before {
  content: counter(section, decimal-leading-zero);
  position: absolute; top: 1.5em; left: -2.9em;
  font-family: var(--font); font-size: .74rem; font-weight: 700;
  letter-spacing: .1em; color: var(--warm);
}
@media (max-width: 900px) { main h2::before { display: none; } }
main h2:first-child { border-top: 0; padding-top: 0; margin-top: 0; }

main h3 { font-size: 1.2rem; margin: 2em 0 .4em; }
main h4 {
  font-family: var(--font); font-size: .78rem; margin: 1.8em 0 .4em;
  letter-spacing: .1em; text-transform: uppercase; color: var(--muted);
}

p { margin: 0 0 1.15em; }
main > p:first-of-type { font-size: 1.06rem; }

a { color: var(--accent-ink); text-decoration-thickness: 1px; text-underline-offset: 3px;
    text-decoration-color: var(--hairline); }
a:hover { text-decoration-color: var(--accent); text-decoration-thickness: 2px; }

ul, ol { margin: 0 0 1.3em; padding-left: 1.25em; }
li { margin: .5em 0; padding-left: .15em; }
li::marker { color: var(--faint); }

hr { border: 0; border-top: 1px solid var(--hairline); margin: 3em 0; }

blockquote {
  margin: 1.8em 0; padding: .1em 0 .1em 1.4em;
  border-left: 2px solid var(--warm); color: var(--ink-soft);
  font-size: 1.06rem;
}
blockquote p:last-child { margin-bottom: 0; }

code {
  font-family: var(--mono); font-size: .84em;
  background: var(--card); color: var(--accent-ink);
  padding: 1px 5px; border-radius: 3px; border: 1px solid var(--line-soft);
}
img { max-width: 100%; height: auto; }

/* A photograph dropped into prose with `![alt](/portrait.jpg)`. */
main p > img:only-child { display: block; max-width: 260px; margin: .4em 0 1.6em; border-radius: 2px; }
@media (min-width: 820px) {
  main p > img:only-child { float: right; margin: .3em 0 1.4em 2.4em; max-width: 230px; }
}

/* -------------------------------------------------------------- figures */

/* A figure is evidence. It gets the full width of the column, a rule under
   it, and a caption in interface type so it is never mistaken for the prose
   around it. */
figure {
  margin: 2.4em 0; padding: 0;
}
figure img, figure svg { display: block; width: 100%; height: auto; border-radius: 2px; }
figure img { border: 1px solid var(--line); background: var(--card); }
figcaption {
  margin-top: .8em; padding-top: .7em; border-top: 1px solid var(--line);
  font-family: var(--font); font-size: .84rem; line-height: 1.5; color: var(--muted);
}
figcaption b {
  color: var(--ink); font-weight: 700; margin-right: .5em;
  font-size: .74rem; letter-spacing: .1em; text-transform: uppercase;
}
.figcredit { display: block; margin-top: .4em; color: var(--faint); font-size: .78rem; }
.figcredit a { color: var(--faint); }

/* A drawn diagram is inlined rather than linked, so it takes the page's own
   colours and follows dark mode. */
.diagram { margin: 2.4em 0; }
.diagram svg { width: 100%; height: auto; display: block; }
.diagram-ink { stroke: var(--ink); }
.diagram text { font-family: var(--font); fill: var(--ink); }

/* -------------------------------------------------------------- figures */

.stats {
  display: flex; flex-wrap: wrap; gap: 0;
  margin: 0 0 2.6em; border-top: 2px solid var(--ink);
}
.stat {
  flex: 1 1 130px; padding: 16px 20px 18px 0;
  border-right: 1px solid var(--line);
}
.stat:last-child { border-right: 0; }
.stat-n {
  font-family: var(--serif); font-size: 2.1rem; font-weight: 700; line-height: 1;
  color: var(--ink); letter-spacing: -.03em;
}
.stat-label { font-size: .82rem; margin-top: .5em; color: var(--ink-soft); font-weight: 600; }
.stat-note { font-size: .74rem; color: var(--faint); margin-top: .2em; }

/* ---------------------------------------------------------------- areas */

/* Research areas as a ruled list rather than a grid of boxes. A box with an
   icon in it is what every generated site does; a numbered, ruled list is
   what a contents page does. */
.areas { margin: 1.6em 0 2.4em; border-top: 1px solid var(--hairline); }
.area {
  display: grid; grid-template-columns: 2.4rem minmax(0, 1fr);
  gap: 0 20px; padding: 22px 0; border-bottom: 1px solid var(--line-soft);
  align-items: baseline;
}
.area-mark {
  font-family: var(--serif); font-size: 1.5rem; color: var(--warm);
  line-height: 1; text-align: center;
}
.area h3 { margin: 0 0 .25em; font-size: 1.16rem; }
.area h3 a { color: var(--ink); text-decoration: none; }
.area h3 a:hover { color: var(--accent-ink); text-decoration: underline;
  text-decoration-thickness: 2px; text-underline-offset: 3px; }
.area p { margin: 0; font-size: .96rem; color: var(--muted); line-height: 1.55; max-width: 60ch; }

/* --------------------------------------------------------------- course */

.courses { margin: 1.4em 0 2em; border-top: 1px solid var(--hairline); }
.course {
  display: flex; gap: 18px; align-items: baseline;
  padding: 12px 0; border-bottom: 1px solid var(--line-soft);
}
.course .code {
  font-family: var(--mono); font-size: .78rem; font-weight: 600;
  color: var(--warm); letter-spacing: .02em; white-space: nowrap; min-width: 6.5em;
}
.course h3 { margin: 0; font-size: 1rem; font-weight: 400; }
.course p { margin: 0 0 0 auto; font-size: .82rem; color: var(--faint);
  font-family: var(--font); text-align: right; }

/* --------------------------------------------------------- publications */

.pub-tools {
  display: flex; flex-wrap: wrap; gap: 8px; align-items: center;
  margin: 1.6em 0 .4em; padding-bottom: 1.2em; border-bottom: 1px solid var(--hairline);
}
.filters { display: flex; flex-wrap: wrap; gap: 6px; }
.filters button {
  font-size: .76rem; letter-spacing: .06em; text-transform: uppercase; font-weight: 700;
  padding: 6px 12px; border-radius: 100px; cursor: pointer;
  background: transparent; color: var(--muted); border: 1px solid var(--line);
}
.filters button:hover { border-color: var(--faint); color: var(--ink); }
.filters button[aria-pressed="true"] { background: var(--ink); border-color: var(--ink); color: var(--sheet); }
.pub-count { margin-left: auto; font-family: var(--font); font-size: .8rem; color: var(--faint); }

/* Works per year, drawn from the list itself. His own record as the only
   chart on the site, and it is honest because nothing feeds it but the data
   the page already shows. */
.years {
  display: flex; align-items: flex-end; gap: 3px;
  margin: 1.8em 0 2.6em; padding-bottom: 4px;
  border-bottom: 1px solid var(--hairline);
}
.years .yr { flex: 1 1 0; display: flex; flex-direction: column; justify-content: flex-end;
  align-items: center; min-height: 58px; position: relative; }
.years .bar-y { width: 100%; background: var(--accent-soft); border-top: 2px solid var(--accent);
  border-radius: 1px 1px 0 0; }
.years .yr:hover .bar-y { background: var(--accent); }
.years .lbl { font-family: var(--font); font-size: .6rem; color: var(--faint);
  position: absolute; bottom: -1.5em; white-space: nowrap; }
@media (max-width: 620px) { .years { display: none; } }

.pub-year-group { margin: 2.4em 0 0; }
.year-heading {
  display: flex; align-items: baseline; gap: 12px;
  font-family: var(--font) !important; font-size: .82rem !important;
  letter-spacing: .14em; text-transform: uppercase; font-weight: 700;
  color: var(--muted); border-top: 1px solid var(--hairline) !important;
  padding-top: .9em !important; margin: 2.2em 0 .2em !important;
  counter-increment: none;
}
.year-heading::before { content: none !important; }
.year-count { color: var(--faint); font-weight: 400; letter-spacing: 0; }
.year-count::before { content: ""; display: inline-block; width: 0; }

.pubs { list-style: none; margin: 0; padding: 0; }
.pub {
  padding: 16px 0 16px 16px; border-bottom: 1px solid var(--line-soft);
  border-left: 3px solid var(--line);
  margin: 0;
}
.pub-journal { border-left-color: var(--journal); }
.pub-conference { border-left-color: var(--conference); }
.pub-chapter { border-left-color: var(--chapter); }
.pub-preprint { border-left-color: var(--preprint); }

.pub-head { display: flex; gap: 10px; align-items: baseline; font-size: .7rem;
  letter-spacing: .1em; text-transform: uppercase; font-weight: 700; margin-bottom: .3em; }
.pub-kind { color: var(--muted); }
.pub-journal .pub-kind { color: var(--journal); }
.pub-conference .pub-kind { color: var(--conference); }
.pub-chapter .pub-kind { color: var(--chapter); }
.pub-preprint .pub-kind { color: var(--preprint); }
.pub-year { color: var(--faint); margin-left: auto; }

.pub-title { font-size: 1.04rem; margin: 0 0 .25em; line-height: 1.35; font-weight: 600; }
.pub-title a { color: var(--ink); text-decoration: none; }
.pub-title a:hover { color: var(--accent-ink); text-decoration: underline;
  text-decoration-thickness: 2px; text-underline-offset: 3px; }
.pub-meta { margin: 0; font-size: .88rem; color: var(--muted); line-height: 1.45; }
.pub-venue { color: var(--ink-soft); font-style: italic; }
.pub-doi { margin: .3em 0 0; font-family: var(--mono); font-size: .74rem; }
.pub-doi a { color: var(--faint); text-decoration: none; }
.pub-doi a:hover { color: var(--accent-ink); text-decoration: underline; }
.pub-nodoi { color: var(--faint); font-family: var(--font); font-style: italic; }

.pubs-featured .pub { border-left-width: 3px; padding-top: 18px; padding-bottom: 18px; }
.pubs-featured .pub-title { font-size: 1.12rem; }

/* ----------------------------------------------------------------- news */

.news { list-style: none; margin: 1.4em 0 2em; padding: 0; border-top: 1px solid var(--hairline); }
.news-item {
  display: grid; grid-template-columns: 8.5rem minmax(0, 1fr); gap: 0 22px;
  padding: 18px 0; border-bottom: 1px solid var(--line-soft); margin: 0;
}
.news-item time {
  font-size: .76rem; letter-spacing: .06em; text-transform: uppercase;
  color: var(--faint); font-weight: 600; padding-top: .25em;
}
.news-item h3 { margin: 0 0 .2em; font-size: 1.04rem; }
.news-item h3 a { color: var(--ink); text-decoration: none; }
.news-item h3 a:hover { color: var(--accent-ink); text-decoration: underline; }
.news-item p { margin: 0; font-size: .94rem; color: var(--muted); line-height: 1.5; }
.news-upcoming time { color: var(--warm); }
.news-upcoming h3::after {
  content: "upcoming"; font-family: var(--font); font-size: .62rem; font-weight: 700;
  letter-spacing: .12em; text-transform: uppercase; color: var(--warm);
  background: var(--warm-soft); padding: 2px 7px; border-radius: 100px;
  margin-left: .7em; vertical-align: .18em;
}
@media (max-width: 620px) {
  .news-item { grid-template-columns: 1fr; gap: 4px; }
}

/* ----------------------------------------------------------------- team */

/* A team page is the page a prospective student reads hardest. It goes wrong
   in one of two ways: a wall of identical grey silhouettes, or a grid of
   circular avatars so small that nobody is recognisable. So: one person per
   row, a portrait large enough to be a portrait, and the same shape and weight
   for everyone, because a page where one person's photograph is bigger than
   another's is a page that has said something it did not mean to. */
.team { border-top: 2px solid var(--ink); margin: 1.6em 0 2.4em; }
.member {
  display: grid; grid-template-columns: 132px minmax(0, 1fr); gap: 0 28px;
  padding: 26px 0; border-bottom: 1px solid var(--line-soft); align-items: start;
}
.member-photo {
  width: 132px; height: 165px; object-fit: cover; object-position: center 22%;
  border-radius: 2px; display: block;
  filter: grayscale(.14) contrast(1.02);
  box-shadow: 0 1px 0 var(--hairline), 0 10px 24px -16px rgba(40, 28, 16, .5);
}
.member-initials {
  display: grid; place-items: center; background: var(--accent-soft); color: var(--accent-ink);
  font-family: var(--serif); font-size: 2.2rem; font-weight: 700; filter: none;
}
.member-text { min-width: 0; }
.member h3 { margin: 0 0 .1em; font-size: 1.2rem; letter-spacing: -.01em; }
.member-role {
  margin: 0 0 .7em; font-family: var(--font); font-size: .74rem; font-weight: 700;
  letter-spacing: .12em; text-transform: uppercase; color: var(--warm);
}
.member-degree { color: var(--faint); font-weight: 600; }
.member-degree::before { content: " · "; color: var(--faint); }
.member-bio { margin: 0 0 .7em; font-size: .98rem; line-height: 1.6; color: var(--ink-soft); }
.member-project {
  margin: 0; font-size: .92rem; color: var(--muted); line-height: 1.5;
  padding-left: 12px; border-left: 2px solid var(--line);
}
.member-project b {
  display: block; font-family: var(--font); font-size: .68rem; font-weight: 700;
  letter-spacing: .12em; text-transform: uppercase; color: var(--faint); margin-bottom: .15em;
}
.member-links { margin: .7em 0 0; display: flex; gap: 14px; flex-wrap: wrap; }
.member-links a { font-family: var(--font); font-size: .84rem; }

@media (max-width: 620px) {
  .member { grid-template-columns: 96px minmax(0, 1fr); gap: 0 18px; }
  .member-photo { width: 96px; height: 120px; }
  .member-initials { font-size: 1.6rem; }
}

/* ------------------------------------------------------------- feedback */

/* What students said, in their words. Nothing is written here: every quote
   comes from data/feedback.json, and the section renders nothing at all when
   that file is empty, so an invented quote cannot reach the page. */
.voices { display: grid; gap: 0; margin: 1.6em 0 2.4em; border-top: 2px solid var(--ink); }
.voice { padding: 24px 0; border-bottom: 1px solid var(--line-soft); margin: 0; border-left: 0; }
.voice p {
  margin: 0 0 .6em; font-size: 1.04rem; line-height: 1.55; color: var(--ink);
  text-indent: -.42em;
}
.voice p::before { content: "\201C"; }
.voice p::after { content: "\201D"; }

/* The words as the student wrote them, above the translation. Set slightly
   quieter, because the English is what most readers of this page will read,
   and larger, because Arabic at the same point size reads smaller. */
.voice-original {
  font-size: 1.12rem !important; color: var(--muted) !important;
  line-height: 1.9; margin-bottom: .5em !important; text-indent: 0 !important;
}
.voice-original[dir="rtl"] { text-align: right; }
.voice-original::before, .voice-original::after { content: none !important; }

.voice cite {
  display: block;
  font-family: var(--font); font-style: normal; font-size: .78rem;
  letter-spacing: .06em; text-transform: uppercase; color: var(--faint); font-weight: 600;
}
.voice-note {
  text-transform: none; letter-spacing: 0; font-weight: 400; font-style: italic;
  color: var(--faint);
}
.voice-note::before { content: " · "; }

/* -------------------------------------------------------------- callout */

.callout {
  margin: 1.8em 0; padding: 18px 22px; border-radius: var(--radius);
  background: var(--card); border: 1px solid var(--line); border-left: 3px solid var(--accent);
  font-size: .96rem;
}
.callout p:last-child { margin-bottom: 0; }
.callout-todo { background: var(--warm-soft); border-color: var(--warm); border-left-color: var(--warm); }
.callout-warn { background: var(--warm-soft); border-left-color: var(--warm); }

/* --------------------------------------------------------------- footer */

footer { background: var(--desk); }
.foot {
  max-width: calc(var(--measure) + 160px); margin: 0 auto;
  display: grid; grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); gap: 28px;
  padding: 40px var(--gutter) 56px;
  font-family: var(--font); font-size: .86rem; color: var(--muted); line-height: 1.6;
  border-top: 1px solid var(--hairline);
}
.foot strong { color: var(--ink); }
.foot a { color: var(--muted); text-decoration-color: var(--hairline); }
.foot a:hover { color: var(--accent-ink); }
.elsewhere { display: flex; flex-direction: column; gap: .35em; align-items: flex-start; }

/* ------------------------------------------------------------ responsive */

@media (max-width: 900px) {
  body { font-size: 18px; }
  .hero {
    grid-template-columns: 1fr; gap: 32px; padding: 44px var(--gutter) 36px;
  }
  .hero h1 { max-width: none; }
  .hero-portrait { grid-auto-flow: column; align-items: start; gap: 20px; }
  .portrait { max-width: 150px; }
  .now { max-width: none; }
  main.wrap, main.wrap-wide { padding: 36px 24px 60px; border-radius: 0; border-left: 0; border-right: 0; }
  main h1 { font-size: 1.9rem; }
  main h2 { font-size: 1.34rem; }
}
@media (max-width: 520px) {
  .hero-portrait { grid-auto-flow: row; }
  .portrait { max-width: 130px; }
  .stat { flex-basis: 45%; border-right: 0; }
  .area { grid-template-columns: 1fr; gap: 4px; }
  .area-mark { text-align: left; }
  .course { flex-wrap: wrap; gap: 4px 14px; }
  .course p { margin-left: 0; text-align: left; }
}

/* ------------------------------------------------------------- dark mode */

@media (prefers-color-scheme: dark) {
  :root {
    --desk: #14120f;
    --sheet: #1b1815;
    --card: #221e1a;
    --ink: #f0ebe4;
    --ink-soft: #cdc5bb;
    --muted: #a9a096;
    --faint: #7d746a;
    --line: #332e28;
    --line-soft: #29241f;
    --hairline: #3d372f;

    --accent: #8f9ff0;
    --accent-ink: #a9b5f5;
    --accent-soft: #23253c;
    --warm: #e0954f;
    --warm-soft: #2e2318;

    --journal: #8f9ff0;
    --conference: #45c0b0;
    --chapter: #b28bf5;
    --preprint: #e0954f;
    --on-accent: #14120f;

    --bar: #0e0d0b;
    --bar-ink: #f0ebe4;
    --bar-dim: #9a9188;
    --bar-accent: #e0954f;
  }
  .portrait { filter: grayscale(.16) contrast(1.02) brightness(.92); }
  .filters button[aria-pressed="true"] { color: var(--desk); }
}

/* ----------------------------------------------------------------- print */

@media print {
  body { background: #fff; color: #000; font-size: 11pt; }
  .bar, .hero-actions, .pub-tools, .years, .now { display: none; }
  main.wrap { max-width: none; border: 0; padding: 0; box-shadow: none; }
  .pub, .news-item, .area, .member { break-inside: avoid; }
  a { text-decoration: none; color: #000; }
  .pub-doi::after { content: ""; }
}