/* ==========================================================================
   Mokhtar Z. Alaya — homepage stylesheet
   --------------------------------------------------------------------------
   Contents
     1. Fonts            5. Header (identity + menu)       9. Papers
     2. Design tokens    6. Sections and prose            10. Other sections
     3. Base             7. Time axis (dated lists)       11. Narrow screens
     4. Shared pieces    8. Opening figure                12. Print

   To restyle the site, change the tokens in section 2: every colour, font
   and width used below is defined there.
   ========================================================================== */


/* 1. Fonts ------------------------------------------------------------------
   Text is set in Gill Sans. It comes with macOS, iOS and Microsoft Office, and
   its licence does not allow serving it from here: where it is missing, the
   nearest humanist sans of the system takes its place (see --sans below).
   Mathematical symbols are set in Pagella (a Palatino), and Heros (a Helvetica)
   is the last fallback; both come from the TeX Gyre project and are served
   from css/fonts/ — see css/fonts/README.txt for their licence. */

@font-face { font-family: "Pagella Web"; font-style: normal; font-weight: 400; font-display: swap;
  src: url("fonts/pagella-web-regular.woff2") format("woff2"); }
@font-face { font-family: "Pagella Web"; font-style: italic; font-weight: 400; font-display: swap;
  src: url("fonts/pagella-web-italic.woff2") format("woff2"); }
@font-face { font-family: "Pagella Web"; font-style: normal; font-weight: 700; font-display: swap;
  src: url("fonts/pagella-web-bold.woff2") format("woff2"); }
@font-face { font-family: "Pagella Web"; font-style: italic; font-weight: 700; font-display: swap;
  src: url("fonts/pagella-web-bolditalic.woff2") format("woff2"); }
@font-face { font-family: "Heros Web"; font-style: normal; font-weight: 400; font-display: swap;
  src: url("fonts/heros-web-regular.woff2") format("woff2"); }
@font-face { font-family: "Heros Web"; font-style: italic; font-weight: 400; font-display: swap;
  src: url("fonts/heros-web-italic.woff2") format("woff2"); }
@font-face { font-family: "Heros Web"; font-style: normal; font-weight: 700; font-display: swap;
  src: url("fonts/heros-web-bold.woff2") format("woff2"); }


/* 2. Design tokens ---------------------------------------------------------- */

:root {
  color-scheme: light;

  /* Type */
  --sans: "Gill Sans", "Gill Sans MT", "Gill Sans Nova", Calibri, Carlito, "Segoe UI", Roboto, "Heros Web", "Helvetica Neue", Arial, sans-serif;
  --serif: "Pagella Web", "Palatino Linotype", Palatino, "Book Antiqua", "URW Palladio L", P052, Georgia, serif;   /* mathematical symbols */
  /* Gill Sans has a small x-height: each size is a pixel above what a Palatino or a
     Helvetica would need to look as large (20px of Gill Sans = 19px of Palatino) */
  --fs-small: 0.875rem;    /* 14px  fine print */
  --fs-label: 0.9375rem;   /* 15px  dates, buttons */
  --fs-meta: 1rem;         /* 16px  navigation, author lines */
  --fs-note: 1.125rem;     /* 18px  abstracts, descriptions */
  --fs-body: 1.25rem;      /* 20px  running text */
  --fs-lede: var(--fs-body);   /* opening paragraph: the size of the text since 11 October 2026, 12:12, at the author's
                                  request ("not in the same font" as the next one); it was 25px, then 22px from 10 October, 23:50 */
  --fs-h3: 1.625rem;       /* 26px */
  --fs-h2: 2.5rem;         /* 40px */

  /* Colour: the palette of utc.fr — petrol blue, teal and the yellow of the UTC logo — on a white page.
     Read on www.utc.fr on 9 October 2026: #184E5B (menu, headings, buttons), #016A7D (links),
     #FFD500 (logo; #FFD700 on its buttons). The other values are tints and shades of these. */
  --paper: #ffffff;
  --surface: #f1f6f7;
  --surface-2: #e2ecee;
  --ink: #1b2a2f;
  --ink-2: #4b5f66;
  --ink-3: #7b8b91;
  --rule: #d9e3e6;
  --rule-strong: #bacacf;
  --heading: #184e5b;      /* section titles: UTC petrol (the yellow of the dark theme cannot be read on white) */
  --link: #016a7d;         /* UTC teal */
  --link-line: rgba(1, 106, 125, 0.35);
  --accent: #ffd500;       /* UTC yellow, for marks and rules only: too light for text on white */
  --accent-ink: #7a6100;   /* the yellow darkened enough to be read on white */
  --alert: #b3261e;
  --focus: #016a7d;

  /* The rail and the opening figure share one dark plate: a deeper shade of the UTC petrol */
  --plate: #0f3a44;
  --plate-ink: #ffffff;
  --plate-ink-2: #bcd5da;
  --plate-rule: rgba(255, 255, 255, 0.18);
  --plate-accent: #ffd500;
  --mu: #ffd500;           /* figure: source points, and what a model answers */
  --nu: #62cfe8;           /* figure: target points, and what is observed */
  --flag: #ffab94;         /* figure: stretch flagged as an anomaly */

  /* Layout */
  --page-w: 62rem;
  --measure: 66ch;
  --sticky-top: 4rem;      /* height of the row of page links, stuck to the top */
}

:root[data-theme="dark"] {
  color-scheme: dark;
  --paper: #0e1b1f;
  --surface: #15282d;
  --surface-2: #1d353b;
  --ink: #e5eef0;
  --ink-2: #a8bec4;
  --ink-3: #7d959b;
  --rule: #213940;
  --rule-strong: #33515a;
  --heading: #ffd500;      /* section titles: UTC yellow */
  --link: #74d2e3;
  --link-line: rgba(116, 210, 227, 0.4);
  --accent: #ffd500;
  --accent-ink: #ffd500;
  --alert: #ff8e80;
  --focus: #ffd500;
  --plate: #0f3a44;
  --plate-rule: rgba(255, 255, 255, 0.18);
}

/* Same values again for visitors whose system is in dark mode and who have
   not chosen a theme with the button. Keep the two blocks identical. */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    color-scheme: dark;
    --paper: #0e1b1f;
    --surface: #15282d;
    --surface-2: #1d353b;
    --ink: #e5eef0;
    --ink-2: #a8bec4;
    --ink-3: #7d959b;
    --rule: #213940;
    --rule-strong: #33515a;
    --heading: #ffd500;      /* section titles: UTC yellow */
    --link: #74d2e3;
    --link-line: rgba(116, 210, 227, 0.4);
    --accent: #ffd500;
    --accent-ink: #ffd500;
    --alert: #ff8e80;
    --focus: #ffd500;
    --plate: #0f3a44;
    --plate-rule: rgba(255, 255, 255, 0.18);
  }
}


/* 3. Base ------------------------------------------------------------------- */

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

html {
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
  scroll-behavior: smooth;
  scroll-padding-top: var(--sticky-top);
}

body {
  margin: 0;
  background: var(--paper);
  color: var(--ink);
  font-family: var(--sans);
  font-size: var(--fs-body);
  line-height: 1.58;
  font-kerning: normal;
  font-variant-ligatures: common-ligatures;
  text-rendering: optimizeLegibility;
  overflow-wrap: break-word;
}

h1, h2, h3, h4, p, ul, ol, figure, address { margin: 0; }
ul, ol { padding: 0; list-style: none; }
h1, h2, h3, h4 { font-weight: 400; text-wrap: balance; }
h4 { text-wrap: pretty; }
address { font-style: normal; }
img, svg { display: block; max-width: 100%; }
img { height: auto; }
b, strong { font-weight: 600; }   /* Gill Sans SemiBold; the bold where there is no semibold */
button, input { font: inherit; color: inherit; }
button { cursor: pointer; }

a {
  color: var(--link);
  text-decoration: underline;
  text-decoration-color: var(--link-line);
  text-decoration-thickness: 0.06em;
  text-underline-offset: 0.2em;
  transition: text-decoration-color 0.15s;
}
a:hover { text-decoration-color: currentColor; }

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

::selection { background: var(--plate); color: var(--plate-ink); }

[hidden]:not([hidden="until-found"]) { display: none !important; }

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

.skip-link {
  position: absolute; left: 1rem; top: -4rem; z-index: 100;
  padding: 0.6rem 0.9rem; border-radius: 3px;
  background: var(--paper); color: var(--link);
  font: 600 var(--fs-label)/1 var(--sans);
}
.skip-link:focus { top: 1rem; }

.sc { font-variant-caps: small-caps; }   /* small capitals, e.g. Screenkhorn */


/* 4. Shared pieces ---------------------------------------------------------- */

/* Icons are inline SVGs sized by the text around them */
.icon { width: 1em; height: 1em; flex: none; }

/* Small bordered button, used for links to files and for controls */
.chip {
  display: inline-flex; align-items: center; gap: 0.45em;
  padding: 0.48em 0.72em;
  border: 1px solid var(--rule-strong); border-radius: 3px;
  background: transparent; color: var(--ink);
  font: 400 var(--fs-label)/1 var(--sans);
  text-decoration: none; white-space: nowrap;
  transition: border-color 0.15s, color 0.15s, background-color 0.15s;
}
.chip:hover { border-color: var(--link); color: var(--link); }
.chip .icon { color: var(--ink-2); transition: color 0.15s; }
.chip:hover .icon { color: inherit; }

.chips { display: flex; flex-wrap: wrap; gap: 0.5rem; }

/* White card behind paper figures, which are drawn for a white page */
.plate {
  display: block; padding: 0.5rem;
  background: #fff; border: 1px solid var(--rule); border-radius: 4px;
}
.plate img { margin-inline: auto; }


/* 5. Header (identity + menu) ---------------------------------------------
   The same on every page and at every width, as on a phone: the identity
   across the top (round photo, then name, title, laboratory and Google
   Scholar, as on Philippe Rigollet's page), the row of profiles, then the
   row of page links, which stays stuck to the top while the page scrolls and
   scrolls sideways when it does not fit. Everything lines up with the text. */

.shell { display: flex; flex-direction: column; min-height: 100vh; }
.rail { display: contents; }
.rail__id, .rail__foot, .rail__nav {
  --edge: max(clamp(1.25rem, 5vw, 4.5rem), calc((100% - var(--page-w)) / 2));   /* left edge of the text */
  background: var(--plate); color: var(--plate-ink);
  -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale;
}
.rail :focus-visible { outline-color: var(--plate-accent); }

.rail__id { order: 1; display: flex; align-items: center; gap: 1.25rem; padding: 1.5rem var(--edge) 0.75rem; }
.rail__portrait {
  flex: none; width: 7rem; margin-left: 0.3rem;
  aspect-ratio: 1; border-radius: 50%; overflow: hidden;
  box-shadow: 0 0 0 3px var(--plate), 0 0 0 5px var(--plate-accent);
}
.rail__portrait img { width: 100%; height: 100%; object-fit: cover; }
.rail__name { padding-right: 2.75rem; font-size: clamp(1.75rem, 6.5vw, 2.25rem); line-height: 1.1; letter-spacing: -0.005em; }   /* the first line may run beside the switch */
.rail__role { margin-top: 0.5rem; color: var(--plate-ink-2); font: 400 var(--fs-meta)/1.4 var(--sans); }
.rail__org { margin-top: 0.1rem; font: 600 var(--fs-meta)/1.4 var(--sans); }
.rail__org a { color: var(--plate-accent); text-decoration: none; }
.rail__org a:hover { text-decoration: underline; text-underline-offset: 0.2em; }
.rail__scholar { display: flex; margin-top: 0.6rem; }
.rail__scholar a {
  display: grid; place-items: center; width: 2.5rem; height: 2.5rem;
  border: 1px solid rgba(255, 255, 255, 0.35); border-radius: 6px;
  color: var(--plate-ink); font-size: 1.25rem;
  transition: background-color 0.15s, border-color 0.15s;
}
.rail__scholar a:hover { background: rgba(255, 255, 255, 0.1); border-color: var(--plate-accent); }
@media (min-width: 60em) {
  .rail__portrait { width: 8rem; }
}

.rail__foot { order: 2; display: flex; align-items: center; gap: 0.5rem; padding: 0.25rem var(--edge) 0.5rem; }
.social { display: flex; gap: 0.15rem; margin-left: -0.5rem; }
.social a {
  display: grid; place-items: center; width: 2.25rem; height: 2.25rem;
  border-radius: 3px; color: var(--plate-ink-2); font-size: 1.0625rem;
  transition: color 0.15s, background-color 0.15s;
}
.social a:hover { color: #fff; background: rgba(255, 255, 255, 0.1); }

/* The row of page links; the current page is underlined in yellow */
.rail__nav {
  order: 3; position: sticky; top: 0; z-index: 20;
  overflow-x: auto; scrollbar-width: none;
  border-top: 1px solid var(--plate-rule);
  padding-inline: calc(var(--edge) - 0.6rem) 4.5rem;   /* the first word lines up with the text; room for the switch at the end */
}
.rail__nav::-webkit-scrollbar { display: none; }
.rail__nav ul { display: flex; width: max-content; }
.rail__nav a {
  position: relative; display: block; padding: 0.95rem 0.6rem;
  color: var(--plate-ink-2); font: 400 var(--fs-meta)/1.3 var(--sans);
  text-decoration: none; white-space: nowrap;
  transition: color 0.15s;
}
.rail__nav a::before {
  content: ""; position: absolute; left: 0.6rem; right: 0.6rem; bottom: 0; height: 2px;
  background: transparent; transition: background-color 0.2s;
}
.rail__nav a:hover { color: var(--plate-ink); }
.rail__nav a[aria-current] { color: #fff; font-weight: 600; }
.rail__nav a[aria-current]::before { background: var(--plate-accent); }

/* Light/dark switch: a small square fixed at the top right, as on Philippe
   Rigollet's homepage, in line with the right edge of the text; once the row of
   page links sticks to the top, it sits at the end of that row, and the links
   fade out before it. On the dark page it is yellow with a sun (click for the
   light page); on the light page, petrol with a yellow moon. */
.theme-toggle {
  position: fixed; top: 0.5rem; right: max(0.75rem, calc((100% - var(--page-w)) / 2)); z-index: 30;
  display: grid; place-items: center; width: 2.25rem; height: 2.25rem; padding: 0;
  border: 1px solid rgba(255, 255, 255, 0.28); border-radius: 6px;
  background: var(--plate); color: var(--plate-accent); font-size: 1.0625rem;
  box-shadow: 0 0 0 0.5rem var(--plate), 0.75rem 0 0 0.5rem var(--plate), -0.9rem 0 0.6rem 0.3rem var(--plate);
  clip-path: inset(-0.5rem -2.5rem);   /* the fade stops at the top and bottom of the row of links */
  transition: background-color 0.15s, border-color 0.15s;
}
.theme-toggle:focus-visible { outline-color: var(--plate-accent); }
.theme-toggle:hover { background: #184e5b; }
.theme-toggle .icon--sun { display: none; }
:root[data-theme="dark"] .theme-toggle { background: var(--accent); border-color: var(--accent); color: var(--plate); }
:root[data-theme="dark"] .theme-toggle:hover { background: #ffe24d; border-color: #ffe24d; }
:root[data-theme="dark"] .theme-toggle .icon--sun { display: block; }
:root[data-theme="dark"] .theme-toggle .icon--moon { display: none; }
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .theme-toggle { background: var(--accent); border-color: var(--accent); color: var(--plate); }
  :root:not([data-theme="light"]) .theme-toggle:hover { background: #ffe24d; border-color: #ffe24d; }
  :root:not([data-theme="light"]) .theme-toggle .icon--sun { display: block; }
  :root:not([data-theme="light"]) .theme-toggle .icon--moon { display: none; }
}
html:not(.js) .theme-toggle { display: none; }

/* 6. Sections and prose ----------------------------------------------------- */

/* Under the header; on a short page the footer goes down to the bottom of the window */
main { order: 4; flex: 1 0 auto; display: flex; flex-direction: column; padding-inline: clamp(1.25rem, 5vw, 4.5rem); container: main / inline-size; }
main > .section, main > .colophon { width: 100%; }
main > .colophon { margin-top: auto; }

.section, .colophon { max-width: var(--page-w); margin-inline: auto; }
.section { padding-block: clamp(2.75rem, 5vw, 4rem); border-top: 1px solid var(--rule); }
.section:first-child { border-top: 0; padding-top: 2rem; }

.section__title { font-size: var(--fs-h2); line-height: 1.1; letter-spacing: -0.012em; margin-bottom: 1.4rem; color: var(--heading); }
.sub__title { font-size: var(--fs-h3); line-height: 1.2; margin: 2.5rem 0 0.9rem; color: var(--heading); }
.section__title + .sub__title { margin-top: 0; }

/* Running text: 66 characters to the line, old-style figures */
.prose { font-variant-numeric: oldstyle-nums proportional-nums; }
.prose p { max-width: var(--measure); }
.prose p + p { margin-top: 0.85em; }
.section__intro { max-width: var(--measure); margin-bottom: 2rem; font-variant-numeric: oldstyle-nums proportional-nums; }



/* 7. Time axis (dated lists) ------------------------------------------------
   News, positions, degrees, courses and students all hang off the same
   device: a vertical axis with the date as a tick label on its left.

     <ul class="axis">
       <li class="axis__row">
         <span class="axis__label">Jun. 2026</span>
         <div class="axis__body"> … </div>
       </li>
     </ul>                                                                    */

.axis, .years { --label-w: 6.5rem; --gap: 2.5rem; position: relative; }
.axis::before, .years::before {
  content: ""; position: absolute; top: 0.4rem; bottom: 0.4rem;
  left: calc(var(--label-w) + var(--gap) / 2);
  width: 1px; background: var(--rule-strong);
}

.axis__row {
  display: grid; grid-template-columns: var(--label-w) minmax(0, 1fr);
  column-gap: var(--gap); align-items: first baseline;
  padding-block: 0.55rem;
}
.axis__label, .year__label {
  position: relative; text-align: right; white-space: nowrap;
  color: var(--ink-2);
  font: 400 var(--fs-label)/1.3 var(--sans);
  font-variant-numeric: tabular-nums lining-nums;
}
.axis__label::after, .year__label::after {
  content: ""; position: absolute; top: 0.62em;
  left: calc(100% + var(--gap) / 2 - 0.45rem);
  width: 0.45rem; height: 1px; background: var(--ink-3);
}
.axis__body { min-width: 0; max-width: 50rem; }
.axis__body > * + * { margin-top: 0.3rem; }

/* Lists grouped by year (papers, talks): the year is the tick label and
   stays in view while its group scrolls past */
.years { --label-w: 3.25rem; }
.year { display: grid; grid-template-columns: var(--label-w) minmax(0, 1fr); column-gap: var(--gap); align-items: start; }
.year + .year { margin-top: 0.5rem; }
.year__label {
  position: sticky; top: var(--sticky-top);
  padding-top: 1.22rem;
  color: var(--ink); font-size: 1rem; font-weight: 600;
}
.year__label::after { top: calc(1.22rem + 0.62em); background: var(--ink-2); }
.year__items { min-width: 0; }


/* 8. Opening paragraph and animated figure ---------------------------------- */
/* Until 10 October 2026 the animated figure (.live) stood beside the biography of the home page (.hero, a
   grid of two columns), its three drawings on one plate. They are now on the Research page, one in each theme
   (see "Research" below), and the home page has one column (the rule .hero:not(:has(.live)) below). The rules
   of .hero are kept, to put a figure back there if wanted. */

.hero { display: grid; grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr); gap: clamp(2rem, 4vw, 3.5rem); align-items: start; }
/* The opening paragraph has the size, line height and spacing of the paragraphs after it (11 October 2026); until
   then it was larger (line-height 1.38, letter-spacing -0.003em, margin-top -0.3rem, 1.1em before the next one). */
.hero .lede { font-size: var(--fs-lede); }
/* Links of the opening paragraph (10 October): the colour of the other links, without underline; the
   underline comes back on hover, as for "LMAC – UTC" in the header. Before: the colour of the text with a
   teal underline, teal on hover; then, for an hour, UTC yellow (color: var(--accent-ink)), found ugly. */
/* the links of the opening paragraphs: blue, underlined on hover only (since 11 October 2026 for every paragraph of
   the opening, so that the link of the sentence on collaborations looks like those of the first paragraph) */
.hero .prose a { color: var(--link); text-decoration-line: none; }
.hero .prose a:hover { text-decoration-line: underline; }
html:not(.js) .hero { grid-template-columns: minmax(0, 1fr); }
.hero:not(:has(.live)) { grid-template-columns: minmax(0, 1fr); }   /* figure removed from the page: one column */
html:not(.js) .live { display: none; }

/* Call for students and collaborations, under the biography */
.prose .notice {
  margin-top: 1.5rem; padding: 0.85rem 1.15rem 0.95rem;
  border-left: 4px solid var(--accent); border-radius: 0 4px 4px 0;
  background: var(--surface);
  line-height: 1.5;
}

/* An animated figure: its drawing (optimal transport, deep learning or structured
   learning; or several, sharing one slider) on a dark plate, with its controls under
   it. js/site.js computes and draws them (section 4 of the script). */
.live { margin-top: 0; }
.live__stage {
  background: var(--plate); color: var(--plate-ink);
  border-radius: 6px; overflow: hidden;
  -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale;
  container: live / inline-size;
}
.live__track + .live__track { border-top: 1px solid var(--plate-rule); }
.live__head {
  display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: 0 0.9rem;
  padding: 0.65rem 0.85rem 0;
  font: 400 var(--fs-small)/1.35 var(--sans);
}
/* On a narrow plate the numbers always go under the name: the lines must not
   jump when a number gets longer or shorter during the animation */
@container live (max-width: 22rem) {
  .live__head { flex-direction: column; align-items: flex-start; }
}
@supports not (container-type: inline-size) {   /* older browsers: always under the name */
  .live__head { flex-direction: column; align-items: flex-start; }
}
/* With a contrast theme (Windows) the plate keeps its own colours, which contrast well:
   otherwise the slider and the faint lines of the drawings would disappear */
@media (forced-colors: active) {
  .live__stage { forced-color-adjust: none; }
}
.live__name { font-weight: 600; letter-spacing: 0.01em; }
.live__value { color: var(--plate-ink-2); font-variant-numeric: lining-nums tabular-nums; white-space: nowrap; }
.live__value i { font-family: var(--serif); font-size: 1.12em; line-height: 0; }
.live__value sub { font-size: 0.75em; line-height: 0; }
.live__alert { color: var(--flag); }
.live__svg { width: 100%; height: auto; }

/* (a) points, their paths and the two clouds */
.live__link { stroke: rgba(255, 255, 255, 0.17); stroke-width: 0.9; }
.live__ring { fill: none; stroke-width: 1.2; }
.live__ring--mu { stroke: var(--mu); opacity: 0.55; }
.live__ring--nu { stroke: var(--nu); opacity: 0.6; }
.live__sym { font: italic 400 21px var(--serif); }
.live__sym--mu { fill: var(--mu); }
.live__sym--nu { fill: var(--nu); }

/* (b) and (c): what is observed is light blue, what the model answers is yellow */
.live__data { fill: none; stroke: var(--nu); stroke-width: 3.4; stroke-linejoin: round; stroke-linecap: round; opacity: 0.5; }
.live__obs { fill: var(--nu); opacity: 0.85; }
.live__fit { fill: none; stroke: var(--mu); stroke-width: 1.5; stroke-linejoin: round; stroke-linecap: round; }
.live__split { stroke: rgba(255, 255, 255, 0.4); stroke-width: 1; stroke-dasharray: 3 4; }
.live__error { fill: rgba(255, 255, 255, 0.34); }
.live__limit { stroke: rgba(255, 255, 255, 0.5); stroke-width: 0.8; stroke-dasharray: 2 3; }
.live__flag { fill: var(--flag); fill-opacity: 0.22; stroke: var(--flag); stroke-width: 1; }

.live__controls {
  display: flex; align-items: center; gap: 0.75rem;
  padding: 0.55rem 0.8rem 0.7rem;
  border-top: 1px solid var(--plate-rule);
  font: 400 var(--fs-label)/1 var(--sans);
}
.live__btn {
  display: inline-flex; align-items: center; gap: 0.4em;
  height: 2rem; padding: 0 0.6rem;
  border: 1px solid var(--plate-rule); border-radius: 3px;
  background: none; color: var(--plate-ink);
  white-space: nowrap;
  transition: background-color 0.15s, border-color 0.15s;
}
.live__btn:hover { background: rgba(255, 255, 255, 0.1); border-color: rgba(255, 255, 255, 0.45); }
.live__btn--icon { width: 2rem; padding: 0; justify-content: center; }
.live .live__controls :focus-visible { outline-color: var(--plate-accent); }
.live__play .icon--play { display: none; }
.live__play[data-state="paused"] .icon--play { display: block; }
.live__play[data-state="paused"] .icon--pause { display: none; }

/* One slider for the three drawings: time t, training epoch, penalty lambda.
   The handle is a white dot of 0.8rem inside a transparent box of 1.75rem, easier to
   catch with a finger; the line stops where the dot stops. */
.live__p {
  --line: linear-gradient(to right, transparent 0.475rem, rgba(255, 255, 255, 0.45) 0.475rem, rgba(255, 255, 255, 0.45) calc(100% - 0.475rem), transparent calc(100% - 0.475rem));
  flex: 1; min-width: 4rem; height: 2rem; margin: 0; background: none; -webkit-appearance: none; appearance: none; cursor: pointer;
}
.live__p::-webkit-slider-runnable-track { height: 1px; background: var(--line); }
.live__p::-moz-range-track { height: 1px; background: var(--line); }
.live__p::-webkit-slider-thumb {
  -webkit-appearance: none; appearance: none; box-sizing: border-box;
  width: 1.75rem; height: 1.75rem; margin-top: calc(-0.875rem + 0.5px);
  border: 0.475rem solid transparent; border-radius: 50%; background: #fff; background-clip: padding-box;
}
.live__p::-moz-range-thumb {
  box-sizing: border-box; width: 1.75rem; height: 1.75rem;
  border: 0.475rem solid transparent; border-radius: 50%; background: #fff; background-clip: padding-box;
}

.live__caption { margin-top: 0.7rem; color: var(--ink-2); font-size: 1rem; line-height: 1.5; font-variant-numeric: oldstyle-nums proportional-nums; }
.live__caption i { font-family: var(--serif); font-size: 1.04em; }
.live__caption b { color: var(--ink); }


/* 9. Papers ----------------------------------------------------------------- */

.pub-tools { display: flex; flex-wrap: wrap; align-items: center; gap: 0.6rem 2rem; margin-bottom: 1.25rem; font: 400 var(--fs-label)/1 var(--sans); }
html:not(.js) .pub-tools { display: none; }
.pub-tools__group { display: flex; flex-wrap: wrap; align-items: center; gap: 0.5rem; }
.pub-tools__label { color: var(--ink-2); margin-right: 0.15rem; }
.pub-tools .chip[aria-pressed="true"] { background: var(--heading); border-color: var(--heading); color: var(--paper); }
.pub-tools .count { color: var(--ink-2); font-variant-numeric: tabular-nums lining-nums; }   /* ink-3 until 10 October: 3.5:1 on white */
.pub-tools .chip[aria-pressed="true"] .count { color: inherit; opacity: 0.7; }

.pub { padding-block: 1.05rem 1.15rem; }
.pub + .pub { border-top: 1px solid var(--rule); }
/* The picture of each paper on its left (10 October 2026, evening) was taken out the same night, at the author's
   request; the figure stays in the abstract. */
.pub__title { font-size: 1.3125rem; line-height: 1.3; }
.pub__authors { margin-top: 0.35rem; color: var(--ink-2); font: 400 var(--fs-meta)/1.5 var(--sans); }
.pub__authors strong { color: var(--ink); }
.pub__venue { margin-top: 0.2rem; font-size: var(--fs-note); line-height: 1.45; font-variant-numeric: oldstyle-nums proportional-nums; }
.pub__venue cite { font-style: italic; }
/* The theme of the paper (10 October 2026), linked to its place on the Research page */
.pub__project { margin-top: 0.2rem; color: var(--ink-2); font: 400 var(--fs-meta)/1.45 var(--sans); }
.pub__project a { color: var(--ink); text-decoration: none; }
.pub__project a:hover { color: var(--link); text-decoration: underline; text-underline-offset: 0.15em; }

/* Kind of paper, in small letter-spaced capitals: journal, conference or preprint.
   Real capitals made smaller, because Gill Sans has no small capitals of its own. */
.tag { margin-right: 0.5em; text-transform: uppercase; font-size: 0.8em; font-weight: 600; letter-spacing: 0.07em; white-space: nowrap; }
.tag--journal { color: var(--link); }
.tag--conference { color: var(--accent-ink); }
.tag--preprint { color: var(--ink-2); }

.pub__actions { margin-top: 0.65rem; }
.pub__toggle .icon { transition: transform 0.2s; }
.pub__toggle[aria-expanded="true"] { background: var(--surface-2); border-color: var(--surface-2); }
.pub__toggle[aria-expanded="true"] .icon { transform: rotate(180deg); }
html:not(.js) .pub__toggle { display: none; }

.pub__abstract {
  display: grid; grid-template-columns: minmax(0, 1fr); gap: 1.1rem 1.5rem; align-items: start;
  margin-top: 0.9rem; padding: 1.15rem 1.3rem 1.25rem;
  background: var(--surface); border-radius: 4px;
  font-size: var(--fs-note); line-height: 1.55;
  font-variant-numeric: oldstyle-nums proportional-nums;
}
/* An abstract that comes with a figure gets a second column for it */
.pub__abstract:has(> .plate) { grid-template-columns: minmax(0, 1fr) minmax(0, 17rem); }
.pub__abstract:has(> .plate) > .plate { grid-column: 2; grid-row: 1; }
.pub__abstract:has(> .plate) > p { grid-column: 1; grid-row: 1; }
.pub__abstract > p { max-width: 44rem; }
.pub__abstract[hidden="until-found"] { margin: 0; padding: 0; }
.js .pub__abstract:not([hidden]) { animation: reveal 0.22s ease-out; }
@keyframes reveal { from { opacity: 0; transform: translateY(-0.25rem); } }

.pub-empty { padding: 1.5rem 0; color: var(--ink-2); font-size: var(--fs-note); }


/* 10. Other sections -------------------------------------------------------- */

/* News */
.news .axis__body { max-width: 44rem; font-size: var(--fs-note); line-height: 1.5; }
.news b { font-weight: 600; }
.news s { text-decoration-thickness: 0.06em; color: var(--ink-2); }
.news s a { color: inherit; }
.status { color: var(--alert); font: 600 var(--fs-label)/1 var(--sans); white-space: nowrap; }

/* CV */
.cv-files { display: flex; flex-wrap: wrap; align-items: center; gap: 0.35rem 0.55rem; margin-bottom: 0.5rem; }
.entry__title { font-size: 1.3125rem; line-height: 1.3; }
.entry__lines { color: var(--ink-2); font: 400 var(--fs-meta)/1.5 var(--sans); }
.entry__lines li + li { margin-top: 0.05rem; }
.entry__detail { max-width: var(--measure); font-size: var(--fs-note); line-height: 1.5; font-variant-numeric: oldstyle-nums proportional-nums; }
.axis__body > .chips { margin-top: 0.6rem; }

/* Teaching */
.course__title { font-size: 1.3125rem; line-height: 1.3; }
.course__title + .course__title { margin-top: 0.1rem; }
.course__text { max-width: 40rem; color: var(--ink-2); font-size: 1.0625rem; line-height: 1.5; }
.course__text p + p { margin-top: 0.2rem; }
.course__file { display: flex; flex-wrap: wrap; align-items: center; gap: 0.6rem; font-size: var(--fs-note); }

/* Research */
.research-top { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 19rem); gap: 2rem 3.5rem; align-items: start; }
.research-top .section__title { grid-column: 1 / -1; margin-bottom: 0; }
.interests__title { font: 600 var(--fs-label)/1.3 var(--sans); color: var(--ink-2); margin-bottom: 0.6rem; }
.interests li { position: relative; padding: 0.42rem 0 0.42rem 1.25rem; border-top: 1px solid var(--rule); font-size: var(--fs-note); line-height: 1.35; }
.interests li:last-child { border-bottom: 1px solid var(--rule); }
.interests li::before { content: ""; position: absolute; left: 0.1rem; top: 1.02rem; width: 0.4rem; height: 0.4rem; border-radius: 50%; background: var(--link); }

/* The themes of the Research page (10 October 2026). Under the summary, a row of links to the themes; then
   one block per theme, with its text and its papers on the left and its figures on the right; on a narrow text
   column, the text, the figures, then the papers. The third row of a block takes what the figures need beyond
   the text, so that the papers stay right under it. Until then the page had two project cards side by side
   (.projects, .project), each with its title, its figure and its paragraph. */
.themes { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 12.5rem), 1fr)); gap: 0.75rem; margin-top: 2.5rem; }
.themes a {
  display: flex; flex-direction: column; gap: 0.2rem; padding: 0.8rem 1rem 0.85rem;
  border: 1px solid var(--rule); border-radius: 6px; background: var(--surface);
  color: var(--ink); text-decoration: none; transition: border-color 0.15s;
}
.themes a:hover { border-color: var(--link); }
.themes b { font-weight: 600; line-height: 1.3; color: var(--heading); }
.themes span { color: var(--ink-2); font: 400 var(--fs-meta)/1.35 var(--sans); }
.theme { display: grid; grid-template-columns: minmax(0, 1fr); gap: 1.5rem 2.75rem; align-items: start; margin-top: 3.25rem; }
.theme__title { margin: 0; }
.theme__figs { display: grid; grid-template-columns: minmax(0, 1fr); gap: 1.75rem; }
.theme__figs > .rfig, .theme__figs > .live { max-width: 30rem; }
@container main (min-width: 58rem) {
  .theme { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); grid-template-rows: auto auto 1fr; }
  .theme__title { grid-column: 1 / -1; }
  .theme__text { grid-column: 1; grid-row: 2; }
  .theme__papers { grid-column: 1; grid-row: 3; }
  .theme__figs { grid-column: 2; grid-row: 2 / span 2; }
  .theme__figs > .rfig, .theme__figs > .live { max-width: none; }
}
.project__text { max-width: var(--measure); font-size: var(--fs-note); line-height: 1.55; font-variant-numeric: oldstyle-nums proportional-nums; }
/* The papers of a theme: title (a link to the paper, underlined on hover only), then where it appeared */
.theme__label { margin-bottom: 0.55rem; font: 600 var(--fs-label)/1.3 var(--sans); color: var(--ink-2); }
.plist li { padding: 0.55rem 0 0.6rem; border-top: 1px solid var(--rule); font-size: 1.0625rem; line-height: 1.4; }
.plist li:last-child { border-bottom: 1px solid var(--rule); }
.plist a, .inter__paper a { text-decoration-line: none; }
.plist a:hover, .inter__paper a:hover { text-decoration-line: underline; }
.plist cite { display: block; margin-top: 0.15rem; color: var(--ink-2); font: italic 400 var(--fs-small)/1.45 var(--sans); }
.inter__paper { margin-top: 0.9rem; font-size: var(--fs-meta); line-height: 1.45; }
.inter__paper .theme__label { margin-right: 0.5rem; }
.inter__paper cite { color: var(--ink-2); }
.inter__paper cite::before { content: " · "; font-style: normal; }
.inter__papers { margin-top: 1.1rem; max-width: var(--measure); }

/* An interdisciplinary project: its figure stands to the right of the text when
   the entry is wide enough, and under the title otherwise */
.inter__title { font-size: 1.3125rem; line-height: 1.3; }
.axis__body:has(> .inter__body) { container: inter / inline-size; }
.inter__body { display: grid; grid-template-columns: minmax(0, 1fr); gap: 0.9rem 1.75rem; align-items: start; }
.inter__body:has(> .plate) { grid-template-columns: minmax(0, 11rem) minmax(0, 1fr); }
.inter__body > .rfig { max-width: 24rem; }
.inter__text { max-width: var(--measure); font-size: var(--fs-note); line-height: 1.55; font-variant-numeric: oldstyle-nums proportional-nums; }
@container inter (min-width: 46rem) {
  .inter__body:has(> .rfig) { grid-template-columns: minmax(0, 1fr) minmax(0, 22rem); }
  .inter__body > .rfig { grid-column: 2; grid-row: 1; max-width: none; }
  .inter__body:has(> .rfig) > .inter__text { grid-column: 1; grid-row: 1; }
}

/* Figures of the projects: inline SVG drawn for the page by figures.py. Their
   colours and fonts come from the tokens of section 2 and, like the opening
   figure, they sit on the dark plate in both themes. */
.rfig { margin: 0; }
.rfig__plate {
  padding: 0.55rem 0.6rem 0.4rem; border-radius: 6px;
  background: var(--plate); color: var(--plate-ink);
  -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale;
}
.rfig__plate--pair { display: flex; flex-wrap: wrap; justify-content: center; align-items: flex-end; gap: 0.25rem 0.75rem; }
.rfig__panel { flex: 1 1 12rem; max-width: 17.5rem; }
.rfig__svg { width: 100%; height: auto; }
.rfig__caption { margin-top: 0.6rem; color: var(--ink-2); font-size: 1rem; line-height: 1.5; font-variant-numeric: oldstyle-nums proportional-nums; }
.rfig__caption i { font-family: var(--serif); font-size: 1.04em; }
.rfig__caption sub, .rfig__caption sup { line-height: 0; }
.rfig__caption b { color: var(--ink); }      /* the first words of a caption, which say what the drawing shows (11 October 2026) */
@media (forced-colors: active) {
  .rfig__plate { forced-color-adjust: none; }
}
/* In between, when a figure stands alone on its line, its caption sits beside it */
@container main (min-width: 40rem) and (max-width: 57.99rem) {
  .theme__figs > .rfig, .theme__figs > .live { display: grid; grid-template-columns: minmax(0, 1.9fr) minmax(0, 1fr); column-gap: 1.75rem; align-items: start; max-width: none; }
  .theme__figs > .rfig > .rfig__caption, .theme__figs > .live > .live__caption { margin-top: 0; }
}
@container inter (min-width: 40rem) and (max-width: 45.99rem) {
  .inter__body > .rfig { display: grid; grid-template-columns: minmax(0, 24rem) minmax(0, 1fr); column-gap: 1.5rem; align-items: start; max-width: none; }
  .inter__body > .rfig > .rfig__caption { margin-top: 0; }
}

/* Text inside the figures */
.rf-t { fill: var(--plate-ink); font: 400 16px var(--sans); }
.rf-t--s { font-size: 14px; }
.rf-t--2 { fill: var(--plate-ink-2); }
.rf-t--b { font-weight: 600; }
.rf-t--mu { fill: var(--mu); }
.rf-t--nu { fill: var(--nu); }
.rf-math { fill: var(--plate-ink); font: italic 400 22px var(--serif); }
.rf-math--s { font-size: 17px; }
.rf-math--mu { fill: var(--mu); }
.rf-math--nu { fill: var(--nu); }
.rf-sub { fill: inherit; font: italic 400 12px var(--serif); }
.rf-sub-t { font-size: 11px; }
.rf-hat { fill: none; stroke: var(--plate-ink); stroke-width: 1.2; stroke-linejoin: round; }
/* Frames, axes and arrows */
.rf-frame { fill: none; stroke: rgba(255, 255, 255, 0.22); stroke-width: 1; }
.rf-axis { stroke: rgba(255, 255, 255, 0.32); stroke-width: 1; }
.rf-arrow { fill: none; stroke: var(--plate-ink-2); stroke-width: 1.5; }
.rf-arrow--load { stroke: var(--plate-ink); stroke-width: 1.8; }
.rf-arrow--dash { stroke-dasharray: 5 4; }
.rf-ahead { fill: var(--plate-ink-2); }
/* Optimal transport: the two densities, the plan and the map */
.rf-mu-area { fill: var(--mu); fill-opacity: 0.09; }
.rf-mu-line { fill: none; stroke: var(--mu); stroke-width: 1.6; stroke-linejoin: round; }
.rf-nu-area { fill: var(--nu); fill-opacity: 0.16; }
.rf-nu-line { fill: none; stroke: var(--nu); stroke-width: 1.6; stroke-linejoin: round; }
.rf-map { fill: none; stroke: var(--mu); stroke-width: 1.7; stroke-dasharray: 5 4; }
.rf-key-plan { fill: #fff; fill-opacity: 0.75; }
/* Sparsity: the two balls, the loss contours and the Lasso path */
.rf-l1 { fill: var(--mu); fill-opacity: 0.08; stroke: var(--mu); stroke-width: 1.6; stroke-linejoin: round; }
.rf-l2 { fill: none; stroke: var(--nu); stroke-width: 1.4; stroke-dasharray: 5 4; }
.rf-level { fill: none; stroke: rgba(255, 255, 255, 0.28); stroke-width: 1; }
.rf-level--l1 { stroke: var(--mu); stroke-opacity: 0.9; stroke-width: 1.3; }
.rf-level--l2 { stroke: var(--nu); stroke-opacity: 0.85; stroke-width: 1.1; stroke-dasharray: 3 3; }
.rf-dot { fill: #fff; }
.rf-dot--l1 { fill: var(--mu); stroke: var(--plate); stroke-width: 1.5; }
.rf-dot--l2 { fill: var(--nu); stroke: var(--plate); stroke-width: 1.5; }
/* Moving drawings (11 October 2026): grains of mass, sparks of data on the move (each with a glow, two faint rings,
   and a tail of three smaller dots), the contour that grows, the cursor of the Lasso path, the ripples of a
   contact; and the bar that js/site.js (section 7) adds under each moving drawing, with its pause button, as under
   the animated figures */
.rf-grain { fill: var(--mu); stroke: var(--plate); stroke-width: 0.8; }
.rf-spark__core { fill: #fff; }
.rf-spark__halo { fill: #fff; fill-opacity: 0.13; }
.rf-spark__tail { fill: #fff; }
.rf-level--grow { stroke: #fff; stroke-opacity: 0.85; stroke-width: 1.4; }
.rf-cursor { stroke: rgba(255, 255, 255, 0.55); stroke-width: 1; stroke-dasharray: 3 3; }
.rf-ripple { fill: none; stroke-width: 1.6; }
.rf-ripple--mu { stroke: var(--mu); }
.rf-ripple--nu { stroke: var(--nu); }
.rfig__controls { display: flex; align-items: center; gap: 0.6rem; margin: 0.35rem -0.6rem -0.4rem; padding: 0.45rem 0.6rem 0.5rem; border-top: 1px solid var(--plate-rule); }
.rfig__plate--pair > .rfig__controls { flex: 1 1 100%; }
.rfig__play:focus-visible { outline-color: var(--plate-accent); }
.rf-path { fill: none; stroke: var(--nu); stroke-opacity: 0.55; stroke-width: 1.1; stroke-linejoin: round; }
.rf-path--active { stroke: var(--mu); stroke-opacity: 1; stroke-width: 2.2; }
.rf-path:hover { stroke-opacity: 1; stroke-width: 2.8; }
/* Diagrams of the interdisciplinary projects */
.rf-plate { fill: rgba(255, 255, 255, 0.1); stroke: rgba(255, 255, 255, 0.55); stroke-width: 1.2; }
.rf-ply { stroke: rgba(255, 255, 255, 0.22); stroke-width: 1; }
.rf-pzt { fill: var(--mu); stroke: var(--plate); stroke-width: 1.5; }
.rf-pvdf { fill: var(--nu); }
.rf-wave { fill: none; stroke-width: 1.6; stroke-linejoin: round; }
.rf-wave--mu { stroke: var(--mu); }
.rf-wave--nu { stroke: var(--nu); }
.rf-merge { fill: none; stroke: rgba(255, 255, 255, 0.4); stroke-width: 1.2; }
.rf-node { fill: var(--plate-ink); }
.rf-net { fill: rgba(255, 255, 255, 0.1); stroke: rgba(255, 255, 255, 0.6); stroke-width: 1.2; stroke-linejoin: round; }
.rf-net--dec { stroke-dasharray: 4 3; }
.rf-code { fill: rgba(255, 213, 0, 0.16); stroke: var(--mu); stroke-width: 1.3; }
.rf-latent { fill: rgba(255, 255, 255, 0.05); stroke: rgba(255, 255, 255, 0.3); stroke-width: 1; }
.rf-pt { stroke: var(--plate); stroke-width: 0.8; }
.rf-pt--mu { fill: var(--mu); }
.rf-pt--nu { fill: var(--nu); }
.rf-pt--w { fill: #fff; }
.rf-box { fill: rgba(255, 255, 255, 0.07); stroke: rgba(255, 255, 255, 0.45); stroke-width: 1.2; }
.rf-gen { fill: rgba(255, 255, 255, 0.08); stroke: var(--nu); stroke-width: 1.4; }
.rf-bond { stroke: rgba(255, 255, 255, 0.35); stroke-width: 1.2; }
.rf-atom { fill: var(--nu); stroke: var(--plate); stroke-width: 1; }
.rf-atom--b { fill: #fff; }
.rf-curve { fill: none; stroke: var(--mu); stroke-width: 1.8; stroke-linejoin: round; }
.rf-wellplate { fill: rgba(255, 255, 255, 0.05); stroke: rgba(255, 255, 255, 0.35); stroke-width: 1.2; }
.rf-well { fill: none; stroke: rgba(255, 255, 255, 0.32); stroke-width: 1; }
.rf-well--on { fill: var(--mu); stroke: none; }
.rf-next { fill: none; stroke: #fff; stroke-width: 1.8; }

/* Grants and funded positions: cards, after the grants page of Jordan Patracone.
   A grant's colour says the role: PI on the petrol plate with a yellow title,
   co-PI in teal, partner or member on the plain surface. */
.cards { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 21rem), 1fr)); gap: 1.25rem; align-items: stretch; }
.card {
  display: flex; flex-direction: column; gap: 0.6rem;
  padding: 1.15rem 1.3rem 0; border: 1px solid var(--rule); border-radius: 12px;
  background: var(--surface); color: var(--ink);
  box-shadow: 0 8px 22px rgba(0, 0, 0, 0.14);
  --card-ink-2: var(--ink-2); --card-ink-3: var(--ink-2); --card-rule: var(--rule-strong);
}
.card > :last-child:not(.card__foot) { padding-bottom: 1.15rem; }
.card__title { font-size: 1.625rem; line-height: 1.15; font-weight: 600; letter-spacing: 0.005em; }
.card__title--long { font-size: 1.25rem; line-height: 1.3; letter-spacing: 0; }
.card__title a { color: inherit; text-decoration-color: var(--card-rule); }
.card__title a:hover { text-decoration-color: currentColor; }
.card__name { margin-top: -0.25rem; color: var(--card-ink-2); font-size: var(--fs-note); line-height: 1.4; }
.card__tags { display: flex; flex-wrap: wrap; gap: 0.4rem; }
.card__tag {
  padding: 0.14rem 0.5rem; border: 1px solid var(--card-rule); border-radius: 4px;
  font: 600 var(--fs-small)/1.35 var(--sans); white-space: nowrap;
}
.card__tag--open { background: var(--accent); border-color: var(--accent); color: var(--plate); }
.card__meta, .card__text { color: var(--card-ink-2); font-size: var(--fs-meta); line-height: 1.45; }
.card__meta a, .card__text a { color: inherit; text-decoration-color: var(--card-rule); }
.card__meta a:hover, .card__text a:hover { text-decoration-color: currentColor; }
.card__label { margin-right: 0.45em; color: var(--card-ink-3); font-size: 0.8em; font-weight: 600; letter-spacing: 0.06em; text-transform: uppercase; }
.card__foot {
  display: flex; flex-wrap: wrap; justify-content: space-between; gap: 0.25rem 1rem;
  margin-top: auto; padding: 0.75rem 0 0.85rem; border-top: 1px solid var(--card-rule);
  font: 600 var(--fs-label)/1.35 var(--sans); font-variant-numeric: lining-nums tabular-nums;
}
.grant--lead {
  background: var(--plate); color: var(--plate-ink); border-color: var(--plate);
  --card-ink-2: var(--plate-ink-2); --card-ink-3: var(--plate-ink-2); --card-rule: rgba(255, 255, 255, 0.3);
}
.grant--lead .card__title { color: var(--plate-accent); }
.grant--co {
  background: #016a7d; color: #fff; border-color: #016a7d;
  --card-ink-2: #dcf1f5; --card-ink-3: #dcf1f5; --card-rule: rgba(255, 255, 255, 0.35);
}
.position--filled .card__title, .position--filled .card__tags { opacity: 0.85; }
.talk { padding-block: 1.05rem 1.15rem; }
.talk + .talk { border-top: 1px solid var(--rule); }
.talk__title { font-size: 1.3125rem; line-height: 1.3; }
.talk__event { margin-top: 0.3rem; color: var(--ink-2); font: 400 var(--fs-meta)/1.5 var(--sans); }
.talk__event a { color: inherit; }
.talk__event a:hover { color: var(--link); }
.talk__where { color: var(--ink-2); font: 400 var(--fs-meta)/1.5 var(--sans); }
.talk .chips { margin-top: 0.65rem; }

/* Students */
.person__name { font-size: 1.3125rem; line-height: 1.3; }
.person__note { color: var(--ink-2); font: 400 var(--fs-meta)/1.5 var(--sans); }
.person__facts { color: var(--ink-2); font: 400 var(--fs-meta)/1.5 var(--sans); }
.person__facts li + li { margin-top: 0.05rem; }
.person__facts i { color: var(--ink); font: italic 400 var(--fs-note)/1.4 var(--sans); }
.team__title { font-size: var(--fs-note); line-height: 1.4; }
.team__title b { font-weight: 400; font-size: 1.3125rem; line-height: 1.3; }

/* Services */
.service { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)) auto; gap: 2rem 3rem; align-items: start; }
.service .sub__title { margin-top: 0; }
.ledger li { padding: 0.45rem 0; border-top: 1px solid var(--rule); color: var(--ink-2); font: 400 var(--fs-meta)/1.45 var(--sans); font-variant-numeric: tabular-nums lining-nums; }
.ledger li:last-child { border-bottom: 1px solid var(--rule); }
.ledger b { color: var(--ink); }
.service__badge { width: 9.5rem; height: auto; border-radius: 50%; }

/* Contact */
.contact { display: grid; grid-template-columns: minmax(0, 1.35fr) minmax(0, 1fr); gap: 2rem 3.5rem; align-items: start; }
.contact__list { margin-top: 1.25rem; font: 400 1.0625rem/1.4 var(--sans); }
.contact__list li { display: flex; align-items: center; gap: 0.65rem; padding: 0.3rem 0; }
.contact__list .icon { color: var(--ink-2); }
.contact .sub__title { margin-top: 2.25rem; margin-bottom: 0.6rem; }
.contact address { color: var(--ink-2); font: 400 var(--fs-meta)/1.6 var(--sans); }
.contact__photo img { width: 100%; border-radius: 6px; }

/* Colophon */
.colophon {
  display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: 0.5rem 2rem;
  padding-block: 1.75rem 2.5rem; border-top: 1px solid var(--rule);
  color: var(--ink-2); font: 400 var(--fs-small)/1.5 var(--sans);
}
.colophon a { color: inherit; }
.colophon__name { color: var(--ink); font: 400 1.0625rem/1.3 var(--sans); }

/* KaTeX: match the size of the surrounding text (its own stylesheet says 1.21em) */
body .katex { font-size: 1.08em; }


/* 11. Narrow screens ---------------------------------------------------------
   The header is the same at every width (section 5); below, the blocks that
   stand side by side on a wide screen are stacked. */

/* When the text column gets narrow, the side-by-side blocks stack. The rule is
   written twice: once for the width of the text column, once for the width of
   the screen (for older browsers). */
@container main (max-width: 50rem) {
  .hero, .research-top, .contact { grid-template-columns: minmax(0, 1fr); }
  .live, .contact__photo { max-width: 30rem; }
  .service { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 56em) {
  .hero, .research-top, .contact { grid-template-columns: minmax(0, 1fr); }
  .live, .contact__photo { max-width: 30rem; }
  .service { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
/* In between (tablets, narrow windows) the caption of the animated figure sits beside it.
   This rule comes after the two above so that it has the last word. */
@container main (min-width: 40rem) and (max-width: 50rem) {
  .live { max-width: none; display: grid; grid-template-columns: minmax(0, 1.9fr) minmax(0, 1fr); column-gap: 1.75rem; align-items: start; }
  .live__caption { margin-top: 0; }
}

@media (max-width: 40em) {
  :root { --fs-body: 1.1875rem; --fs-lede: var(--fs-body); --fs-h2: 2rem; --fs-h3: 1.4375rem; }   /* opening paragraph: the size of the text */

  /* The axis moves to the left edge and the labels sit above their entries */
  .axis, .years { --label-w: 0rem; --gap: 2.2rem; }
  .axis::before, .years::before { left: 0; }
  .axis__row, .year { grid-template-columns: minmax(0, 1fr); padding-left: 1.1rem; row-gap: 0.2rem; }
  .axis__label, .year__label { text-align: left; }
  .axis__label::after, .year__label::after { left: -1.1rem; width: 0.55rem; }
  .year__label { position: relative; top: auto; padding-top: 0.9rem; }
  .year__label::after { top: calc(0.9rem + 0.62em); }
  .year__items .pub:first-child, .year__items .talk:first-child { padding-top: 0.4rem; }

  .pub__abstract:has(> .plate) { grid-template-columns: minmax(0, 1fr); }
  .pub__abstract:has(> .plate) > .plate, .pub__abstract:has(> .plate) > p { grid-column: 1; grid-row: auto; }
  .inter__body:has(> .plate) { grid-template-columns: minmax(0, 1fr); }
  .inter__body .plate { max-width: 14rem; }
  .service { grid-template-columns: minmax(0, 1fr); }
  .rail__portrait { width: 5.5rem; }
  .live__btn--new span { display: none; }
  /* each filter of the Papers page on one row of buttons that scrolls sideways, rather than eight rows of them;
     the padding keeps the focus ring of a button inside its row, the negative margin keeps the row in place, and
     the containment keeps the length of the row from widening the page */
  .pub-tools { flex-direction: column; align-items: stretch; gap: 0.6rem; }
  .pub-tools__group {
    flex-wrap: nowrap; overflow-x: auto; overscroll-behavior-x: contain; scrollbar-width: thin;
    contain: inline-size; min-width: 0; padding: 6px; margin: -6px;
  }
  .pub-tools__group > * { flex: none; }
}


/* 12. Reduced motion and print ---------------------------------------------- */

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

@media print {
  /* Printed on white whatever the theme on screen (":root[data-theme]" outranks the dark values) */
  :root, :root[data-theme] {
    color-scheme: light;
    --paper: #fff; --ink: #000; --ink-2: #333; --ink-3: #555; --link: #000; --heading: #000; --accent-ink: #000;
    --rule: #bbb; --rule-strong: #888; --surface: #fff; --surface-2: #eee;
  }
  .rfig { display: none; }
  .shell { display: block; min-height: 0; }
  .rail { position: static; width: auto; display: block; padding: 0 0 1rem; background: none; color: #000; }
  .rail__id { display: block; padding: 0; background: none; color: #000; }
  .rail__portrait, .rail__scholar, .rail__nav, .rail__foot, .theme-toggle, .skip-link, .live, .pub-tools, .pub__toggle, .contact__photo { display: none !important; }
  .rail__id { text-align: left; }
  .rail__role, .rail__org a { color: #333; }
  main { margin-left: 0; padding: 0; }
  .section { padding-block: 1.25rem; break-inside: auto; }
  .hero { grid-template-columns: 1fr; }
  .research-top { grid-template-columns: minmax(0, 1fr); }
  .themes { display: none; }
  .theme { grid-template-columns: minmax(0, 1fr); grid-template-rows: none; break-inside: auto; }   /* the figures are not printed */
  .theme > * { grid-column: auto; grid-row: auto; }
  .pub, .talk, .axis__row { break-inside: avoid; }
  .pub__abstract { display: none; }
  .year__label { position: static; }
  a { text-decoration: none; }
}