/* ==========================================================================
   Group website — stylesheet

   The tokens, the typeface and the dark palette are the ones the course sites
   already use, on purpose: a reader who follows a link from here into a set of
   lecture notes should not feel they have left. What is new here is layout —
   a hub has cards, a people grid, a publication list and a CV timeline, none
   of which a book needs.

   The rules the design holds to:
     1. One accent, used sparingly. Colour marks a link or a state; it is
        never decoration.
     2. Nothing moves that the reader did not ask to move.
     3. Every measurement comes from the type. Spacing is in rem so a reader
        who enlarges their text gets a page that grows with it, not one that
        breaks.
     4. Both themes are first-class. Neither is an inverted afterthought.
   ========================================================================== */

:root {
  /* Ink and paper. The paper is a shade off white and the ink stops short of
     black: black on #ffffff is the highest contrast a screen can make, and
     over a long read that is a cost, not a virtue. */
  --ink: #1a1c1e;
  --ink-soft: #4a5057;
  --muted: #69707e;
  --line: #e3e6ea;
  --line-strong: #cfd4da;
  --paper: #fbfbfc;
  --wash: #f2f4f7;
  --on-accent: #ffffff;

  --accent: #0f5f66;
  --accent-soft: #e8f2f2;
  --accent-line: #a9cfd2;

  --sans: ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Inter, sans-serif;
  --serif: "Source Serif 4", Charter, "Iowan Old Style", Georgia, "Times New Roman", serif;
  --mono: ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, monospace;

  /* One page width for everything wide, one for prose. Cards, headers and
     footers share the first; a paragraph never exceeds the second, because a
     72-character line is where reading speed stops improving. */
  --page: 68rem;
  --prose: 41rem;

  --radius: 12px;
  --radius-sm: 8px;

  color-scheme: light dark;
}

/* screen, not all: a reader whose machine is in dark mode still prints onto
   white paper. Print keeps the light palette (see the print rules at the end). */
@media screen and (prefers-color-scheme: dark) {
  :root {
    --ink: #e4e7ec;
    --ink-soft: #b3bac5;
    --muted: #868e9c;
    --line: #272c34;
    --line-strong: #39404b;
    --paper: #14161a;
    --wash: #1b1e24;
    --on-accent: #0b0e11;

    --accent: #5fb6bd;
    --accent-soft: #14292c;
    --accent-line: #2b555a;
  }
}

/* ----------------------------------------------------------------- type -- */

/* One family, two axes (weight 300–700, optical size 8–60), split by script so
   a page of English pulls the latin file and nothing else. font-display: swap
   means text is readable in the fallback from the first paint. */

@font-face {
  font-family: "Source Serif 4";
  font-style: italic;
  font-weight: 300 700;
  font-display: swap;
  src: url("../fonts/source-serif-4-latin-italic.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: "Source Serif 4";
  font-style: normal;
  font-weight: 300 700;
  font-display: swap;
  src: url("../fonts/source-serif-4-latin-roman.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: "Source Serif 4";
  font-style: italic;
  font-weight: 300 700;
  font-display: swap;
  src: url("../fonts/source-serif-4-latin-ext-italic.woff2") format("woff2");
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: "Source Serif 4";
  font-style: normal;
  font-weight: 300 700;
  font-display: swap;
  src: url("../fonts/source-serif-4-latin-ext-roman.woff2") format("woff2");
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: "Source Serif 4";
  font-style: italic;
  font-weight: 300 700;
  font-display: swap;
  src: url("../fonts/source-serif-4-greek-italic.woff2") format("woff2");
  unicode-range: U+0370-0377, U+037A-037F, U+0384-038A, U+038C, U+038E-03A1, U+03A3-03FF;
}
@font-face {
  font-family: "Source Serif 4";
  font-style: normal;
  font-weight: 300 700;
  font-display: swap;
  src: url("../fonts/source-serif-4-greek-roman.woff2") format("woff2");
  unicode-range: U+0370-0377, U+037A-037F, U+0384-038A, U+038C, U+038E-03A1, U+03A3-03FF;
}

/* -------------------------------------------------------------- reset ---- */

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

html {
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
  scroll-padding-top: 5rem;   /* the sticky header, so an anchor is not hidden */
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    transition-duration: 0.01ms !important;
  }
}

body {
  margin: 0;
  background: var(--paper);
  color: var(--ink);
  font-family: var(--serif);
  font-size: 1.0625rem;
  line-height: 1.65;
  font-variant-numeric: oldstyle-nums proportional-nums;
  text-rendering: optimizeLegibility;
  -webkit-font-smoothing: antialiased;
}

h1, h2, h3, h4 {
  font-family: var(--serif);
  font-weight: 600;
  line-height: 1.2;
  letter-spacing: -0.011em;
  margin: 0;
  text-wrap: balance;
}

p { margin: 0 0 1em; }
p:last-child { margin-bottom: 0; }

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

img { max-width: 100%; height: auto; }

:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 3px;
  border-radius: 3px;
}

code, kbd, pre { font-family: var(--mono); font-size: 0.9em; }

.skip-link {
  position: absolute;
  left: -9999px;
  top: 0;
  background: var(--accent);
  color: var(--on-accent);
  padding: 0.6rem 1rem;
  z-index: 100;
  border-radius: 0 0 var(--radius-sm) 0;
}
.skip-link:focus { left: 0; }

/* ------------------------------------------------------------- header ---- */

.site-header {
  position: sticky;
  top: 0;
  z-index: 50;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem 2rem;
  padding: 0.85rem clamp(1rem, 4vw, 2.5rem);
  background: color-mix(in srgb, var(--paper) 88%, transparent);
  backdrop-filter: saturate(180%) blur(12px);
  border-bottom: 1px solid var(--line);
}

.brand {
  display: inline-flex;
  align-items: center;
  gap: 0.6rem;
  color: var(--ink);
  text-decoration: none;
  font-weight: 600;
  font-size: 1.05rem;
  letter-spacing: -0.01em;
}
.brand-mark { width: 1.6rem; height: 1.6rem; flex: none; }

.top-nav {
  display: flex;
  flex-wrap: wrap;
  gap: 0.25rem 0.35rem;
  font-family: var(--sans);
  font-size: 0.875rem;
}
.top-nav a {
  color: var(--ink-soft);
  text-decoration: none;
  padding: 0.35rem 0.7rem;
  border-radius: 999px;
  white-space: nowrap;
}
.top-nav a:hover { color: var(--ink); background: var(--wash); }
.top-nav a[aria-current="page"] {
  color: var(--accent);
  background: var(--accent-soft);
  font-weight: 600;
}

/* --------------------------------------------------------------- main ---- */

main {
  max-width: var(--page);
  margin: 0 auto;
  padding: clamp(2.5rem, 6vw, 4.5rem) clamp(1rem, 4vw, 2.5rem) 5rem;
}

.page-head { margin-bottom: 2.5rem; }
.page-head h1 { font-size: clamp(2rem, 4.5vw, 2.9rem); }

.kicker {
  font-family: var(--sans);
  font-size: 0.75rem;
  font-weight: 600;
  letter-spacing: 0.09em;
  text-transform: uppercase;
  color: var(--accent);
  margin: 0 0 0.7rem;
}

.lede {
  font-size: 1.2rem;
  line-height: 1.55;
  color: var(--ink-soft);
  max-width: var(--prose);
  margin: 1rem 0 0;
  text-wrap: pretty;
}

.empty, .notice, .section-note {
  font-family: var(--sans);
  font-size: 0.9rem;
  color: var(--muted);
}
.notice {
  background: var(--wash);
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  padding: 0.8rem 1rem;
}

.back {
  margin-top: 3.5rem;
  padding-top: 1.5rem;
  border-top: 1px solid var(--line);
  font-family: var(--sans);
  font-size: 0.9rem;
}
.back a { text-decoration: none; }
.back a:hover { text-decoration: underline; }

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

.hero {
  margin-bottom: clamp(3rem, 7vw, 5rem);
  max-width: 52rem;
}
.hero h1 {
  font-size: clamp(2.3rem, 6vw, 3.6rem);
  line-height: 1.08;
  margin-bottom: 0;
}
.hero .lede { font-size: clamp(1.15rem, 2.1vw, 1.35rem); }

.hero-with-portrait {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: clamp(1.5rem, 4vw, 3rem);
  align-items: center;
  max-width: none;
}
.hero-portrait {
  width: clamp(9rem, 18vw, 14rem);
  aspect-ratio: 1;
  object-fit: cover;
  border-radius: var(--radius);
  border: 1px solid var(--line);
}
@media (max-width: 46rem) {
  .hero-with-portrait { grid-template-columns: 1fr; }
  .hero-portrait { order: -1; width: 7.5rem; }
}

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

/* Every figure on this site was drawn for a paper, on white paper, and the
   colour in it carries meaning -- which channel, which delay, the sign of a
   field. Dimming them with a filter in dark mode would be a lie told for the
   sake of the theme, so they keep their white ground and are given a border
   instead, which reads as a plate laid on the page rather than as a hole
   burned in it. The explicit white background matters for the same reason: a
   transparent PNG would otherwise show dark-mode paper through the gaps and
   invert the meaning of the drawing. */
.figure {
  margin: 0 0 2rem;
  max-width: 100%;
}
.figure img {
  display: block;
  width: 100%;
  height: auto;
  background: #fff;
  border: 1px solid var(--line);
  border-radius: var(--radius);
}
.figure figcaption {
  margin-top: 0.7rem;
  max-width: var(--prose);
  font-size: 0.92rem;
  line-height: 1.55;
  color: var(--muted);
  text-wrap: pretty;
}

@media screen and (prefers-color-scheme: dark) {
  .figure img { border-color: var(--line-strong); }
}

.hero-figure { margin-bottom: 2.5rem; }

/* The figures that follow the prose on a research page. */
.figures { margin-top: 3rem; }
.figures h2 {
  font-family: var(--sans);
  font-size: 0.75rem;
  font-weight: 700;
  letter-spacing: 0.09em;
  text-transform: uppercase;
  color: var(--muted);
  padding-bottom: 0.6rem;
  border-bottom: 1px solid var(--line);
  margin-bottom: 1.75rem;
}

/* -------------------------------------------------------------- cards ---- */

.cards {
  display: grid;
  gap: 1rem;
  margin: 0 0 1rem;
}
.cards-2 { grid-template-columns: repeat(auto-fit, minmax(min(100%, 21rem), 1fr)); }
.cards-3 { grid-template-columns: repeat(auto-fit, minmax(min(100%, 15rem), 1fr)); }

.card {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  padding: 1.4rem 1.5rem 1.5rem;
  background: var(--paper);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  color: inherit;
  text-decoration: none;
  /* The one movement on the site, and it is 1px. A card that leaps under the
     cursor reads as a button on a marketing page. */
  transition: border-color 0.18s ease, transform 0.18s ease, background 0.18s ease;
}
.card:hover {
  border-color: var(--accent-line);
  background: var(--wash);
  transform: translateY(-1px);
}
.card h2, .card h3 { font-size: 1.2rem; }
.card h2 { font-size: 1.3rem; }

.card-meta {
  font-family: var(--sans);
  font-size: 0.8rem;
  color: var(--muted);
  margin: 0;
}
.card-text { color: var(--ink-soft); font-size: 0.98rem; margin: 0; text-wrap: pretty; }
.card-more {
  font-family: var(--sans);
  font-size: 0.83rem;
  color: var(--accent);
  margin-top: auto;
  padding-top: 0.6rem;
}
.card-image {
  width: calc(100% + 3rem);
  margin: -1.4rem -1.5rem 0.4rem;
  aspect-ratio: 16 / 9;
  object-fit: cover;
  border-radius: var(--radius) var(--radius) 0 0;
  border-bottom: 1px solid var(--line);
}

.highlight-card { min-height: 11rem; }

.tags { display: flex; flex-wrap: wrap; gap: 0.35rem; margin-top: auto; padding-top: 0.6rem; }
.tags span {
  font-family: var(--sans);
  font-size: 0.72rem;
  color: var(--muted);
  background: var(--wash);
  border: 1px solid var(--line);
  border-radius: 999px;
  padding: 0.15rem 0.55rem;
}
.tags-lg { margin: 0 0 2rem; padding: 0; }
.tags-lg span { font-size: 0.8rem; padding: 0.25rem 0.7rem; }

/* ------------------------------------------------------- home sections --- */

.home-section { margin: clamp(3rem, 6vw, 4.5rem) 0 0; }

.section-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 1rem;
  margin-bottom: 1.25rem;
  padding-bottom: 0.6rem;
  border-bottom: 1px solid var(--line);
}
.section-head h2 { font-size: 1.35rem; }
.section-head a {
  font-family: var(--sans);
  font-size: 0.85rem;
  text-decoration: none;
  white-space: nowrap;
}
.section-head a:hover { text-decoration: underline; }

.news { list-style: none; margin: 0; padding: 0; }
.news li {
  display: grid;
  grid-template-columns: 9.5rem 1fr;
  gap: 0.25rem 1.5rem;
  padding: 0.85rem 0;
  border-bottom: 1px solid var(--line);
}
.news li:last-child { border-bottom: 0; }
.news time {
  font-family: var(--sans);
  font-size: 0.82rem;
  color: var(--muted);
  padding-top: 0.2rem;
}
@media (max-width: 40rem) {
  .news li { grid-template-columns: 1fr; }
}

.home-prose { margin-top: clamp(3rem, 6vw, 4.5rem); }

/* -------------------------------------------------------------- prose ---- */

.prose { max-width: var(--prose); }
.prose h2 {
  font-size: 1.45rem;
  margin: 2.4rem 0 0.8rem;
}
.prose h3 { font-size: 1.15rem; margin: 1.8rem 0 0.6rem; }
.prose h2:first-child, .prose h3:first-child { margin-top: 0; }
.prose p { text-wrap: pretty; }
.prose ul, .prose ol { padding-left: 1.3rem; margin: 0 0 1.1em; }
.prose li { margin-bottom: 0.35em; }
.prose li > ul, .prose li > ol { margin: 0.35em 0 0; }

.prose blockquote {
  margin: 1.5rem 0;
  padding: 0.2rem 0 0.2rem 1.2rem;
  border-left: 2px solid var(--accent-line);
  color: var(--ink-soft);
}

.prose hr { border: 0; border-top: 1px solid var(--line); margin: 2.5rem 0; }

/* The permalink main.js hangs off every heading. Invisible until the heading
   is hovered or the link itself is focused, so it is there for the reader who
   wants it and absent for the one who is reading. */
.heading-anchor {
  margin-left: 0.4rem;
  color: var(--muted);
  text-decoration: none;
  font-weight: 400;
  opacity: 0;
  transition: opacity 0.15s ease;
}
h2:hover > .heading-anchor,
h3:hover > .heading-anchor,
.heading-anchor:focus-visible { opacity: 1; }
.heading-anchor:hover { color: var(--accent); }

.prose code {
  background: var(--wash);
  border: 1px solid var(--line);
  border-radius: 4px;
  padding: 0.1em 0.35em;
}
.prose pre {
  background: var(--wash);
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  padding: 1rem 1.1rem;
  overflow-x: auto;
  line-height: 1.5;
}
.prose pre code { background: none; border: 0; padding: 0; }

.table-wrap { overflow-x: auto; margin: 1.5rem 0; }
table { border-collapse: collapse; width: 100%; font-size: 0.95rem; }
th, td { text-align: left; padding: 0.55rem 0.8rem; border-bottom: 1px solid var(--line); }
th { font-family: var(--sans); font-size: 0.8rem; text-transform: uppercase; letter-spacing: 0.05em; color: var(--muted); }

.math-display { display: block; overflow-x: auto; margin: 1.2rem 0; }

/* ----------------------------------------------------- split (courses) --- */

.split {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 19rem;
  gap: clamp(2rem, 5vw, 3.5rem);
  align-items: start;
}
@media (max-width: 56rem) {
  .split { grid-template-columns: 1fr; }
}

.split-side { display: flex; flex-direction: column; gap: 1rem; position: sticky; top: 5rem; }
@media (max-width: 56rem) { .split-side { position: static; } }

.factbox {
  background: var(--wash);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 1.1rem 1.25rem 1.25rem;
  font-size: 0.94rem;
}
.factbox h2 {
  font-family: var(--sans);
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.09em;
  text-transform: uppercase;
  color: var(--muted);
  margin: 0 0 0.75rem;
}
.factbox dl { margin: 0; display: grid; grid-template-columns: auto 1fr; gap: 0.3rem 1rem; }
.factbox dt { font-family: var(--sans); font-size: 0.8rem; color: var(--muted); }
.factbox dd { margin: 0; }

.linklist { list-style: none; margin: 0; padding: 0; }
.linklist li { padding: 0.4rem 0; border-bottom: 1px solid var(--line); }
.linklist li:last-child { border-bottom: 0; }
.linklist li:first-child { padding-top: 0; }
.linklist span {
  display: block;
  font-family: var(--sans);
  font-size: 0.8rem;
  color: var(--muted);
}

/* ------------------------------------------------------------ chapters --- */

.chapter-list { margin-top: 3rem; }
.chapter-list h2 { font-size: 1.35rem; margin-bottom: 0.4rem; }
.chapters {
  list-style: none;
  margin: 1.2rem 0 0;
  padding: 0;
  counter-reset: chapter;
}
.chapters li { border-bottom: 1px solid var(--line); }
.chapters a {
  display: flex;
  flex-direction: column;
  padding: 0.7rem 0.6rem;
  margin: 0 -0.6rem;
  border-radius: var(--radius-sm);
  color: inherit;
  text-decoration: none;
}
.chapters a:hover { background: var(--wash); }
.chapters strong { font-weight: 500; }
.chapters span {
  font-family: var(--sans);
  font-size: 0.75rem;
  color: var(--muted);
  letter-spacing: 0.03em;
}

/* -------------------------------------------------------------- people --- */

.people-group { margin-top: 3rem; }
.people-group h2 {
  font-family: var(--sans);
  font-size: 0.75rem;
  font-weight: 700;
  letter-spacing: 0.09em;
  text-transform: uppercase;
  color: var(--muted);
  padding-bottom: 0.6rem;
  border-bottom: 1px solid var(--line);
  margin-bottom: 1.5rem;
}

.people { display: grid; gap: 1.75rem; }
.person { display: grid; grid-template-columns: 5.5rem 1fr; gap: 1.25rem; align-items: start; }
@media (max-width: 34rem) {
  .person { grid-template-columns: 1fr; }
}

.avatar {
  width: 5.5rem;
  height: 5.5rem;
  border-radius: 50%;
  object-fit: cover;
  border: 1px solid var(--line);
}
.avatar-initials {
  display: grid;
  place-items: center;
  background: var(--accent-soft);
  color: var(--accent);
  font-family: var(--sans);
  font-size: 1.35rem;
  font-weight: 600;
  letter-spacing: 0.02em;
  border-color: var(--accent-line);
}

.person h3 { font-size: 1.15rem; }
.person-title { font-family: var(--sans); font-size: 0.85rem; color: var(--muted); margin: 0.15rem 0 0.5rem; }
.person-bio { color: var(--ink-soft); font-size: 0.98rem; margin-bottom: 0.5rem; }
.person-links { font-family: var(--sans); font-size: 0.85rem; display: flex; flex-wrap: wrap; gap: 1rem; }
.person-links a { text-decoration: none; }
.person-links a:hover { text-decoration: underline; }

.callout {
  margin-top: 3.5rem;
  padding: 1.75rem clamp(1.25rem, 3vw, 2rem);
  background: var(--accent-soft);
  border: 1px solid var(--accent-line);
  border-radius: var(--radius);
  max-width: calc(var(--prose) + 4rem);
}
.callout h2 { font-size: 1.3rem; margin-bottom: 0.8rem; }
.callout p { color: var(--ink-soft); }

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

.pub-group { margin-top: 3rem; }
.pub-group h2 {
  font-family: var(--sans);
  font-size: 0.75rem;
  font-weight: 700;
  letter-spacing: 0.09em;
  text-transform: uppercase;
  color: var(--muted);
  padding-bottom: 0.6rem;
  border-bottom: 1px solid var(--line);
}

.pubs { list-style: none; margin: 0; padding: 0; counter-reset: pub; }
.pub {
  padding: 1.25rem 0;
  border-bottom: 1px solid var(--line);
  max-width: 48rem;
}
.pub:last-child { border-bottom: 0; }
.pub p { margin: 0; }
.pub-title { font-size: 1.05rem; font-weight: 600; line-height: 1.35; margin-bottom: 0.3rem !important; }
.pub-authors { color: var(--ink-soft); font-size: 0.95rem; }
.pub-authors strong { color: var(--ink); }
.pub-venue { color: var(--muted); font-size: 0.95rem; }
.pub-note {
  font-family: var(--sans);
  font-size: 0.72rem;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--accent);
}
.pub-links { font-family: var(--sans); font-size: 0.82rem; display: flex; gap: 0.9rem; margin-top: 0.4rem !important; }
.pub-links a { text-decoration: none; }
.pub-links a:hover { text-decoration: underline; }
.pub-links:empty { display: none; }

/* ------------------------------------------------------------------ cv --- */

.cv-section { margin-top: 3rem; max-width: 48rem; }
.cv-section h2 {
  font-family: var(--sans);
  font-size: 0.75rem;
  font-weight: 700;
  letter-spacing: 0.09em;
  text-transform: uppercase;
  color: var(--muted);
  padding-bottom: 0.6rem;
  border-bottom: 1px solid var(--line);
  margin-bottom: 1.25rem;
}

.timeline { margin: 0; display: grid; grid-template-columns: 9rem 1fr; gap: 0 1.75rem; }
.timeline dt {
  font-family: var(--sans);
  font-size: 0.85rem;
  color: var(--muted);
  padding: 0.55rem 0;
  font-variant-numeric: tabular-nums;
}
.timeline dd { margin: 0; padding: 0.55rem 0; }
.cv-title { display: block; font-weight: 600; }
.cv-org { display: block; color: var(--ink-soft); font-size: 0.95rem; }
.cv-note { display: block; color: var(--muted); font-size: 0.9rem; margin-top: 0.15rem; }

@media (max-width: 40rem) {
  .timeline { grid-template-columns: 1fr; }
  .timeline dt { padding-bottom: 0; }
  .timeline dd { padding-top: 0.15rem; border-bottom: 1px solid var(--line); padding-bottom: 0.9rem; }
}

/* ------------------------------------------------------------ buttons ---- */

.actions { display: flex; flex-wrap: wrap; gap: 0.7rem; margin: 0 0 2.5rem; }

.button {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  font-family: var(--sans);
  font-size: 0.9rem;
  font-weight: 500;
  padding: 0.55rem 1.1rem;
  border-radius: 999px;
  border: 1px solid var(--line-strong);
  color: var(--ink);
  background: var(--paper);
  text-decoration: none;
  transition: border-color 0.18s ease, background 0.18s ease;
}
.button:hover { border-color: var(--accent); background: var(--wash); }

.button-primary {
  background: var(--accent);
  border-color: var(--accent);
  color: var(--on-accent);
}
.button-primary:hover {
  background: color-mix(in srgb, var(--accent) 88%, var(--ink));
  border-color: transparent;
  color: var(--on-accent);
}

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

.site-footer {
  border-top: 1px solid var(--line);
  background: var(--wash);
  padding: 3rem clamp(1rem, 4vw, 2.5rem) 2.5rem;
  font-family: var(--sans);
  font-size: 0.9rem;
}
.footer-inner {
  max-width: var(--page);
  margin: 0 auto;
  display: flex;
  flex-wrap: wrap;
  gap: 2rem;
  justify-content: space-between;
}
.footer-name { font-weight: 600; color: var(--ink); margin: 0; }
.footer-org, .footer-address { color: var(--muted); margin: 0.2rem 0 0; max-width: 26rem; }
.footer-address { font-size: 0.85rem; }

.footer-links { display: flex; flex-direction: column; gap: 0.5rem; }
.footer-links a {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  color: var(--ink-soft);
  text-decoration: none;
}
.footer-links a:hover { color: var(--accent); }
.icon { width: 1.05rem; height: 1.05rem; flex: none; }

.footer-legal {
  max-width: var(--page);
  margin: 2.5rem auto 0;
  padding-top: 1.25rem;
  border-top: 1px solid var(--line);
  color: var(--muted);
  font-size: 0.8rem;
}

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

@media print {
  .site-header, .site-footer, .skip-link, .actions, .back { display: none; }
  body { background: #fff; color: #000; font-size: 11pt; }
  main { max-width: none; padding: 0; }
  .card, .factbox, .callout { break-inside: avoid; border: 1px solid #ccc; }
  .split { display: block; }
  a { color: #000; text-decoration: underline; }
}