/* fatih.ai design prototype, 25 Oct 2026.
   Values follow the DeepMind Institute pages as measured on 25 Oct 2026:
   pastel blue, green and pink; hairlines; one serif for reading, one sans for
   labels; a spacing unit of 2.1% of the window. Source Serif 4 stands in for
   Google Serif: at 17px its letters are as tall as Google Serif's at 16px. */

:root {
  --blue-100: #bae1ff;
  --blue-50: #e7f3fe;
  --green-100: #bef2b8;
  --green-50: #e5fae3;
  --pink-100: #ffdeec;
  --pink-50: #fdf2f7;
  --grey-50: #fafafa;
  --grey-100: #f4f4f5;
  --grey-200: #eaeaea;
  --grey-300: #d6d6d6;
  --grey-500: #747476;
  --grey-700: #57585b;
  --grey-800: #2f3034;
  --grey-900: #18181b;

  --ink: var(--grey-800);
  --ink-2: #66676b;
  --ink-3: var(--grey-500);
  --line: var(--grey-300);
  --line-strong: rgba(47, 48, 52, 0.5);
  --surface: #ffffff;
  --surface-2: var(--grey-50);
  --surface-3: var(--grey-100);

  --data-1: #2a6fc9;
  --data-2: #c53a7a;
  --tok-keyword: #1d5fb0;
  --tok-string: #1f7a45;
  --tok-number: #b0306b;
  --tok-comment: #66676b;
  --tok-function: #6b3fa0;

  --serif: "Source Serif 4", Georgia, serif;
  --sans: "Google Sans Flex", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  --mono: "Google Sans Code", ui-monospace, "SFMono-Regular", Menlo, monospace;

  --fs-body: 1.0275rem;
  --fs-abstract: 1.156rem;
  --fs-small: 0.875rem;
  --fs-meta: 0.8125rem;
  --fs-h3: max(1.156rem, min(1.285vw, 1.413rem));
  --fs-h2: max(1.156rem, min(1.54vw, 1.67rem));
  --fs-title: max(1.4rem, min(2.055vw, 2.055rem));
  --fs-hero: max(1.875rem, min(3.2vw, 3.25rem));

  --u: max(27px, min(2.1vw, 60px));
  --max: max(64rem, min(80vw, 110rem));
  --measure: 38.4rem;
  --side: minmax(15rem, 1fr);
  --bar: 3.5rem;
  --hair: 1px;

  --cat: var(--blue-100);
  --cat-soft: var(--blue-50);
  --accent: #1d5fb0;
}

@media (min-resolution: 2dppx) {
  :root { --hair: 0.5px; }
}

@media (max-width: 768px) and (orientation: portrait) {
  :root { --u: max(16px, min(1.1vw, 34px)); }
}

/* Colour follows the subject, as each DeepMind essay has its own pastel:
   blue for central banks and monetary policy, green for finance, banking and
   climate, pink for AI, data and economic history. An entry page takes its
   colour in the bar, the end band and the footer; a card shows it in its
   swatch and drawing. Pages without a subject use blue. */
[data-colour="blue"] { --cat: var(--blue-100); --cat-soft: var(--blue-50); --accent: #1d5fb0; }
[data-colour="green"] { --cat: var(--green-100); --cat-soft: var(--green-50); --accent: #1f7a45; }
[data-colour="pink"] { --cat: var(--pink-100); --cat-soft: var(--pink-50); --accent: #b0306b; }

:root, [data-colour] {
  --cat-surface: color-mix(in oklch, var(--cat) 40%, white);
  --cat-line: color-mix(in oklch, var(--cat) 62%, white);
}

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

html {
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
  scroll-behavior: smooth;
}

body {
  margin: 0;
  background: var(--surface);
  color: var(--ink);
  font-family: var(--serif);
  font-size: var(--fs-body);
  font-weight: 430;
  line-height: 1.508;
  letter-spacing: 0.01em;
  font-optical-sizing: auto;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

img, svg { display: block; max-width: 100%; }
img { height: auto; }

a { color: inherit; }

:focus-visible { outline: 2px solid var(--ink); outline-offset: 2px; }

.skip {
  position: absolute; left: var(--u); top: -4rem; z-index: 300;
  padding: 0.5rem 0.75rem; background: var(--surface); border: var(--hair) solid var(--ink);
  font: 400 var(--fs-small)/1 var(--sans); text-decoration: none;
}
.skip:focus { top: 0.75rem; }

.wrap {
  width: 100%; max-width: var(--max);
  margin: 0 auto; padding: 0 var(--u);
}

/* ---------------------------------------------------------------- top bar */

.bar {
  position: fixed; inset: 0 0 auto 0; z-index: 100;
  height: var(--bar);
  background: var(--cat-surface);
  border-bottom: 1px solid var(--cat-line);
  transition: border-color 0.3s ease;
}
.bar[data-top] { border-bottom-color: transparent; }

.bar__inner { display: flex; align-items: center; justify-content: space-between; gap: 1rem; height: 100%; }

/* wide screens show the name alone; phones show the mark alone: a pastel
   swatch, like the ones beside every label, carrying the initials in the
   colour of the page */
.brand { display: inline-flex; align-items: center; min-width: 0; text-decoration: none; }
.brand__mark {
  display: none; place-items: center; flex: none; width: 2rem; height: 2rem;
  background: var(--cat); border: var(--hair) solid var(--line-strong);
  font: 500 0.8125rem/1 var(--serif); letter-spacing: 0.06em; padding-left: 0.06em;
  transition: background-color 0.15s ease;
}
.brand:hover .brand__mark { background: var(--surface); }
.brand__name {
  font: 400 max(1.125rem, min(1.4vw, 1.375rem))/1 var(--serif);
  letter-spacing: -0.01em; white-space: nowrap;
}

.nav { display: flex; align-items: center; }
.nav__list { display: flex; align-items: center; gap: 0.25rem; margin: 0; padding: 0; list-style: none; }

.nav__link {
  display: block; padding: 1.25rem 0.5rem;
  font: 400 var(--fs-small)/1 var(--sans); letter-spacing: 0.01em;
  text-decoration: underline; text-decoration-color: transparent;
  text-decoration-thickness: var(--hair); text-underline-offset: 0.3em;
  transition: text-decoration-color 0.15s ease;
}
.nav__link:hover, .nav__link[aria-current] { text-decoration-color: currentColor; }
.nav__list li:last-child .nav__link { padding-right: 0; }

/* phones: the mark alone takes you home, and all four sections stay in the bar */
.brand:hover .brand__name { text-decoration: underline; text-decoration-thickness: var(--hair); text-underline-offset: 0.18em; }

@media (max-width: 720px) {
  .brand__mark { display: grid; }
  .brand__name { display: none; }
  .nav__list { gap: 0; }
  .nav__link { padding: 1.25rem 0.45rem; }
}
@media (max-width: 350px) {
  .nav__link { padding-inline: 0.3rem; font-size: 0.8125rem; }
}

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

.hero {
  background: var(--cat-surface);
  padding: calc(var(--bar) + max(3rem, 4.2vw)) 0 max(2.5rem, 5.5vw);
}

.hero__eyebrow {
  margin: 0 0 calc(var(--u) * 0.75);
  color: var(--ink-2); font: 400 var(--fs-small)/1.3 var(--sans); letter-spacing: 0.01em;
}

.hero__title {
  margin: 0;
  font: 400 var(--fs-hero)/1.12 var(--serif); letter-spacing: -0.01em;
}

.hero__lede {
  margin: calc(var(--u) * 0.75) 0 0;
  color: var(--ink-2); font: 400 var(--fs-abstract)/1.4 var(--serif);
}

/* ---------------------------------------------------------------- shared grid
   Sidebar and text: the text runs to the right edge of the page, never to a fixed
   reading width with empty space beside it (his rule, 12 and 26 Oct 2026). The
   sidebar appears only when the screen has room for it. */

.grid { display: grid; grid-template-columns: minmax(0, 1fr); }

@media (min-width: 1100px) {
  .grid {
    grid-template-columns: var(--side) minmax(0, 1fr);
    column-gap: var(--u);
  }
  .grid > .col-side { grid-column: 1; }
  .grid > .col-main { grid-column: 2; }
  .grid > .col-wide { grid-column: 2 / -1; }
  .grid > .col-all { grid-column: 1 / -1; }
}


.section { padding-block: calc(var(--u) * 2); }

.section-head {
  display: flex; align-items: baseline; justify-content: space-between; gap: 1rem;
  margin: 0 0 calc(var(--u) * 0.75); padding-bottom: calc(var(--u) * 0.5);
  border-bottom: var(--hair) solid var(--line-strong);
}
.section-head h2 {
  margin: 0; font: 400 var(--fs-title)/1.185 var(--serif); letter-spacing: -0.01em;
}
.section-head a, .section-head span {
  color: var(--ink-2); font: 400 var(--fs-small)/1.3 var(--sans); letter-spacing: 0.01em;
}
.section-head a { text-underline-offset: 0.25em; text-decoration-thickness: var(--hair); }

/* labels with a pastel swatch, as in the DeepMind table legends */
.kicker {
  display: flex; align-items: flex-start; gap: 0.5rem;
  margin: 0; color: var(--ink-2); font: 400 var(--fs-meta)/1.3 var(--sans); letter-spacing: 0.01em;
}
.kicker::before {
  content: ""; width: 0.6rem; height: 0.6rem; flex: none; margin-top: 0.2em;
  background: var(--cat); border: var(--hair) solid var(--line-strong);
}
.kicker--plain::before { display: none; }

/* text links in the small sans: the site has no framed buttons in content */
.links { display: flex; flex-wrap: wrap; gap: 0.35rem 1.25rem; margin: 0; padding: 0; list-style: none; }
.links a {
  font: 400 var(--fs-small)/1.3 var(--sans); letter-spacing: 0.01em;
  text-decoration: underline; text-decoration-thickness: var(--hair);
  text-decoration-color: var(--line-strong); text-underline-offset: 0.3em;
  transition: text-decoration-color 0.15s ease;
}
.links a:hover { text-decoration-color: currentColor; }
.links a[rel~="external"]::after { content: " \2197"; font-size: 0.85em; }

/* line icons: one stroke, one size per use, the colour of the text beside them */
.icon {
  display: block; flex: none; width: 1.125rem; height: 1.125rem;
  fill: none; stroke: currentColor; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round;
}

/* ---------------------------------------------------------------- drawings */

.media {
  position: relative; overflow: hidden;
  aspect-ratio: 1.3; background: var(--surface-2);
  border: var(--hair) solid var(--line);
}
.media svg, .media img { width: 100%; height: 100%; }
.media--wide { aspect-ratio: 16 / 9; }

/* Line weights, dashes and dots are in screen pixels (non-scaling strokes), so a drawing reads
   the same on a 120-pixel course plate, a 240-pixel list plate and a 600-pixel cover. Until
   26 Oct 2026 they were in drawing units and shrank with the plate: on Teaching and Research an
   edge came out under a pixel wide and the plates looked empty. */
.drawing :is(.dr-e, .dr-t, .dr-h, .dr-c, .dr-o, .dr-r, .dr-k) { vector-effect: non-scaling-stroke; }
.drawing .dr-e { fill: none; stroke: #46474b; stroke-width: 1.3; stroke-linecap: round; stroke-linejoin: round; }
.drawing .dr-t { fill: none; stroke: #7a7b7f; stroke-width: 0.95; stroke-linecap: round; }
.drawing .dr-h { fill: none; stroke: #7a7b7f; stroke-width: 0.75; stroke-linecap: round; opacity: 0.75; }
.drawing .dr-c { fill: none; stroke: #a6a7aa; stroke-width: 0.95; stroke-dasharray: 3.5 4; }
.drawing .dr-o { fill: none; stroke: #7a7b7f; stroke-width: 1.6; stroke-linecap: round; stroke-dasharray: 0.01 4; }
/* a dot keeps a visible size on the smallest plate: a stroke in screen pixels round it */
.drawing .dr-k { fill: var(--ink); stroke: var(--ink); stroke-width: 1.4; }
.drawing .dr-r { stroke: #46474b; stroke-width: 0.95; }
/* once drawn in, lines are plain solid lines, whatever a browser makes of pathLength dashes */
.drawing.is-done .dr-dw { stroke-dasharray: none; animation: none; }

@media (prefers-reduced-motion: no-preference) {
  .drawing.is-drawing .dr-dw { stroke-dasharray: 1 1; stroke-dashoffset: 1; animation: dr-draw 1.5s cubic-bezier(0.33, 0, 0.15, 1) forwards; }
  .drawing.is-drawing .dr-fd { opacity: 0; animation: dr-fade 0.9s ease-out forwards; }
  .drawing.is-drawing .dr-h { animation-name: dr-hatch; }
}
@keyframes dr-draw { to { stroke-dashoffset: 0; } }
@keyframes dr-fade { to { opacity: 1; } }
@keyframes dr-hatch { to { opacity: 0.75; } }

/* the actor: the one part of a drawing that carries its idea. It moves when the
   reader points at the card, loops slowly on covers and featured items, and
   moves once on touch screens when the card comes into view. Nothing moves
   for readers who ask for reduced motion. */
.drawing .dr-actor { transform-box: view-box; }
@media (prefers-reduced-motion: no-preference) {
  .drawing .dr-actor { transition: transform 0.9s cubic-bezier(0.3, 0, 0.1, 1); }
  .card:hover .dr-actor, .card:focus-within .dr-actor, .media:hover .dr-actor, .drawing.is-nudge .dr-actor {
    transform: translate(var(--dx), var(--dy)) rotate(var(--rot)) scale(var(--sc));
  }
  .drawing--live.is-drawn .dr-actor { animation: dr-idle 5s cubic-bezier(0.45, 0, 0.55, 1) infinite alternate; }
}
@keyframes dr-idle {
  0%, 18% { transform: none; }
  82%, 100% { transform: translate(var(--dx), var(--dy)) rotate(var(--rot)) scale(var(--sc)); }
}

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

.card {
  position: relative; display: flex; flex-direction: column; gap: calc(var(--u) * 0.5);
  padding: calc(var(--u) * 0.75);
  background: var(--surface); border: var(--hair) solid var(--line);
  transition: border-color 0.2s ease;
}
.card:hover { border-color: var(--line-strong); }

.card__title { margin: 0; font: 400 var(--fs-h2)/1.185 var(--serif); letter-spacing: -0.01em; }
.card__title a { text-decoration: none; }
.card__title a::after { content: ""; position: absolute; inset: 0; }
.card:hover .card__title a { text-decoration: underline; text-decoration-thickness: var(--hair); text-underline-offset: 0.18em; }

.card__abstract {
  margin: 0; color: var(--ink-2); font: 400 1rem/1.45 var(--serif);
  display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 4; overflow: hidden;
}
.card__meta { margin: 0; color: var(--ink-3); font: 400 var(--fs-small)/1.35 var(--sans); letter-spacing: 0.01em; }

.card--feature { gap: calc(var(--u) * 0.6); }
.card--feature .card__title { font-size: var(--fs-title); }
.card--feature .card__abstract { font-size: var(--fs-abstract); line-height: 1.4; -webkit-line-clamp: 5; }
.card--feature .card__meta { margin-top: auto; padding-top: calc(var(--u) * 0.75); }
.card--feature .media { aspect-ratio: 1.15; }

.card--row { display: grid; grid-template-columns: minmax(0, 1fr) 42%; column-gap: calc(var(--u) * 0.75); align-items: stretch; }
.card--row .card__text { display: flex; flex-direction: column; gap: calc(var(--u) * 0.4); min-width: 0; }
.card--row .card__title { font-size: var(--fs-h3); }
.card--row .card__abstract { font-size: 0.9375rem; -webkit-line-clamp: 4; }

/* a drawing beside text is a plate as tall as the text, with the drawing
   centred on it, so no blank space opens under a short drawing */
.card--row > .media, .card--wide > .media { aspect-ratio: auto; height: 100%; min-height: 11rem; }
.card--row > .media > svg, .card--wide > .media > svg { position: absolute; inset: 0; }
.media img { object-fit: contain; }

@media (max-width: 560px) {
  .card--row { grid-template-columns: minmax(0, 1fr); row-gap: calc(var(--u) * 0.75); }
  .card--row > .media { order: -1; aspect-ratio: 1.6; height: auto; min-height: 0; }
}

/* one paper across the full width: a reading-width column of text beside its plate */
.card--wide { display: grid; grid-template-columns: minmax(0, 40rem) minmax(14rem, 1fr); column-gap: calc(var(--u) * 1.25); align-items: stretch; }
.card--wide .card__text { display: flex; flex-direction: column; gap: calc(var(--u) * 0.45); min-width: 0; padding-block: calc(var(--u) * 0.2); }
.card--wide > .media { min-height: 14rem; }
@media (max-width: 860px) {
  .card--wide { grid-template-columns: minmax(0, 1fr); row-gap: calc(var(--u) * 0.6); }
  .card--wide > .media { order: -1; aspect-ratio: 1.8; height: auto; min-height: 0; }
}

.spotlight { display: grid; gap: var(--u); }
.spotlight__list { display: flex; flex-direction: column; gap: var(--u); }

@media (min-width: 1024px) {
  .spotlight { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); align-items: stretch; }
}

/* ---------------------------------------------------------------- home: about */

.about { padding-block: calc(var(--u) * 2) calc(var(--u) * 1.5); }
.about .grid { row-gap: var(--u); }

.portrait {
  width: 100%; max-width: 15rem; aspect-ratio: 4 / 5; object-fit: cover; object-position: 50% 18%;
  background: var(--surface-2); border: var(--hair) solid var(--line);
}

.about__name { margin: 0 0 0.35rem; font: 400 var(--fs-title)/1.185 var(--serif); letter-spacing: -0.01em; }
.about__role { margin: 0 0 calc(var(--u) * 0.75); color: var(--ink-2); font: 400 var(--fs-small)/1.45 var(--sans); letter-spacing: 0.01em; }
.about__role a { text-decoration: underline; text-decoration-thickness: var(--hair); text-decoration-color: var(--line-strong); text-underline-offset: 0.25em; }

@media (max-width: 1099px) {
  .about .grid { grid-template-columns: 9rem minmax(0, 1fr); column-gap: var(--u); }
  .about .col-side { grid-row: 1; }
  .about .col-main { grid-row: 1 / span 2; }
}
@media (max-width: 600px) {
  .about .grid { grid-template-columns: minmax(0, 1fr); }
  .about .col-main { grid-row: auto; }
  .portrait { max-width: 8rem; }
}

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

.prose p, .prose ul, .prose ol { margin: 0 0 1.375em; }
.prose a {
  text-decoration: underline; text-decoration-thickness: var(--hair); text-underline-offset: 0.2em;
  transition: opacity 0.15s ease;
}
.prose a:hover { opacity: 0.7; }
.prose strong { font-weight: 650; }
.prose em { font-style: italic; }

.prose h2 {
  margin: calc(var(--u) * 1.5) 0 calc(var(--u) * 0.75);
  padding-top: calc(var(--u) * 0.6);
  border-top: var(--hair) solid var(--line);
  font: 400 var(--fs-h2)/1.12 var(--serif); letter-spacing: -0.01em;
  scroll-margin-top: calc(var(--bar) + 2rem);
}

.prose h3 { margin: 1.4em 0 0.4em; font: 400 var(--fs-h3)/1.15 var(--serif); letter-spacing: -0.01em; }

.prose code {
  padding: 0.12em 0.32em; border-radius: 2px; background: var(--surface-3);
  font-family: var(--mono); font-size: 0.86em; letter-spacing: 0;
}

/* a sentence set apart at display size, as in the DeepMind pull quotes */
.statement {
  margin: calc(var(--u) * 2) 0; padding: calc(var(--u) * 0.5) var(--u) var(--u) calc(var(--u) * 2);
  font: 400 var(--fs-title)/1.15 var(--serif); letter-spacing: -0.01em;
}
.prose p.statement { margin: calc(var(--u) * 2) 0; }
@media (max-width: 768px) { .statement { padding-right: 0; } }

/* numbered findings under hairlines */
.findings { margin: 0 0 1.375em; padding: 0; list-style: none; counter-reset: finding; }
.findings li {
  position: relative; display: block;
  margin: 0; padding: calc(var(--u) * 0.6) 0 calc(var(--u) * 0.6) 3rem; border-top: var(--hair) solid var(--line);
  counter-increment: finding;
}
.findings li::before {
  content: counter(finding, decimal-leading-zero);
  position: absolute; left: 0; top: calc(var(--u) * 0.6 + 0.25rem);
  color: var(--ink-3); font: 400 var(--fs-meta)/1.3 var(--sans);
}
.findings h3 { margin: 0 0 0.35rem; font: 400 var(--fs-h3)/1.2 var(--serif); letter-spacing: -0.01em; }
.findings p { margin: 0; color: var(--ink-2); }

/* ---------------------------------------------------------------- figures and tables */

.figure { margin: calc(var(--u) * 1.25) 0 calc(var(--u) * 1.5); }
.figure__title { margin: 0 0 0.3rem; font: 400 var(--fs-h3)/1.2 var(--serif); letter-spacing: -0.01em; }
.figure__subtitle { margin: 0 0 calc(var(--u) * 0.6); color: var(--ink-2); font: 400 1rem/1.4 var(--serif); }
.figure__notes { margin: calc(var(--u) * 0.5) 0 0; color: var(--ink-2); font: 400 var(--fs-meta)/1.45 var(--sans); letter-spacing: 0.01em; }

.legend { display: flex; flex-wrap: wrap; gap: 0.4rem 1.25rem; margin: 0 0 0.75rem; padding: 0; list-style: none; }
.legend li { display: inline-flex; align-items: center; gap: 0.45rem; color: var(--ink); font: 400 var(--fs-meta)/1.3 var(--sans); }
.legend svg { width: 28px; height: 12px; flex: none; }

.chart { position: relative; overflow-x: auto; }
.chart svg { width: 100%; min-width: 34rem; height: auto; overflow: visible; }
.chart text { font-family: var(--sans); fill: var(--ink-2); letter-spacing: 0.01em; }
.chart .panel-title { fill: var(--ink); font-family: var(--serif); }
.chart .grid-line { stroke: var(--grey-200); stroke-width: 1; }
.chart .zero-line { stroke: var(--grey-500); stroke-width: 1; }
.chart .row-hit { fill: transparent; cursor: default; }
.chart .row:hover .row-hit, .chart .row:focus .row-hit { fill: var(--surface-3); }
.chart .row:focus { outline: none; }
.chart .row:focus-visible .row-hit { stroke: var(--ink); stroke-width: 1; }

.tip {
  position: absolute; z-index: 5; pointer-events: none; min-width: 12rem;
  padding: 0.55rem 0.7rem; background: var(--surface); border: var(--hair) solid var(--line-strong);
  box-shadow: 0 4px 16px rgba(24, 24, 27, 0.08);
  font: 400 var(--fs-meta)/1.4 var(--sans); color: var(--ink);
}
.tip[hidden] { display: none; }
.tip strong { display: block; margin-bottom: 0.15rem; font-weight: 500; }

.numbers { margin-top: calc(var(--u) * 0.6); }
.numbers summary {
  width: max-content; cursor: pointer; color: var(--ink-2);
  font: 400 var(--fs-small)/1.3 var(--sans); text-decoration: underline;
  text-decoration-thickness: var(--hair); text-underline-offset: 0.3em;
}

.table-wrap { overflow-x: auto; margin: calc(var(--u) * 0.6) 0 0; }
.table { width: 100%; border-collapse: collapse; font: 400 0.875rem/1.4 var(--serif); font-variant-numeric: tabular-nums; }
.table caption { caption-side: top; padding-bottom: 0.6rem; text-align: left; }
.table th, .table td { padding: 0.55rem 0.7rem; text-align: left; vertical-align: top; border-bottom: var(--hair) solid var(--line); }
.table thead th { background: var(--grey-900); color: #fff; font-weight: 400; border-bottom: 0; }
.table td.num, .table th.num { text-align: right; white-space: nowrap; }

/* ---------------------------------------------------------------- code */

.code { margin: calc(var(--u) * 0.6) 0 1.375em; border: var(--hair) solid var(--line); background: var(--surface-2); }
.code__bar {
  display: flex; align-items: center; justify-content: space-between; gap: 1rem;
  padding: 0.45rem 0.75rem; border-bottom: var(--hair) solid var(--line);
  color: var(--ink-2); font: 400 var(--fs-meta)/1.2 var(--sans); letter-spacing: 0.01em;
}
.code__lang { display: inline-flex; align-items: center; gap: 0.45rem; color: var(--ink); }
.code__lang::before { content: ""; width: 0.5rem; height: 0.5rem; background: var(--cat); border: var(--hair) solid var(--line-strong); }
.code__copy {
  padding: 0.2rem 0; border: 0; background: none; color: var(--ink-2); cursor: pointer;
  font: inherit; text-decoration: underline; text-decoration-thickness: var(--hair); text-underline-offset: 0.3em;
}
.code__copy:hover { color: var(--ink); }
.code pre { margin: 0; padding: 0.85rem 0.75rem 1rem; overflow-x: auto; font: 400 0.84rem/1.65 var(--mono); }
.code pre code { padding: 0; background: none; font: 400 0.84rem/1.65 var(--mono); letter-spacing: 0; white-space: pre; }
.tok-keyword { color: var(--tok-keyword); }
.tok-string { color: var(--tok-string); }
.tok-number { color: var(--tok-number); }
.tok-comment { color: var(--tok-comment); font-style: italic; }

/* ---------------------------------------------------------------- paper page */

.article { padding-top: calc(var(--bar) + max(1.5rem, 4.5vw)); }
.article .grid { row-gap: var(--u); }

.date { margin: 0; color: var(--ink-2); font: 400 var(--fs-meta)/1.25 var(--sans); letter-spacing: 0.01em; }
.title { margin: 0; font: 400 var(--fs-title)/1.185 var(--serif); letter-spacing: -0.01em; }
.abstract { margin: 0; color: var(--ink-2); font: 400 var(--fs-abstract)/1.4 var(--serif); }
.facts { margin: 0; color: var(--ink-2); font: 400 var(--fs-small)/1.45 var(--sans); letter-spacing: 0.01em; }
.facts span + span::before { content: "\00b7"; margin: 0 0.5rem; color: var(--ink-3); }

.article__head > * { margin: 0; }
.article__head > * + * { margin-top: calc(var(--u) * 0.75); }
.article__head > .abstract + * { margin-top: var(--u); }
.article__head > .cover { margin-top: var(--u); }

.cover { margin-top: var(--u); }

.authors { display: flex; flex-direction: column; gap: calc(var(--u) * 0.5); }
.author { display: flex; align-items: flex-start; gap: 0.9rem; }
.avatar {
  flex: none; width: 2.75rem; height: 2.75rem; border-radius: 50%;
  object-fit: cover; object-position: 50% 18%;
  background: var(--surface-2); border: var(--hair) solid var(--line);
}
.avatar--initials { display: grid; place-items: center; color: var(--ink); font: 400 0.95rem/1 var(--serif); letter-spacing: 0.02em; }
.author__name { margin: 0; font: 400 1rem/1.35 var(--serif); }
.author__role { margin: 0.1rem 0 0; color: var(--ink-3); font: 400 var(--fs-small)/1.35 var(--sans); letter-spacing: -0.01em; }

.subhead {
  margin: 0 0 calc(var(--u) * 0.5); padding-bottom: calc(var(--u) * 0.5);
  border-bottom: var(--hair) solid var(--line);
  font: 400 1.5rem/1.12 var(--serif); letter-spacing: -0.01em;
}

.toc { margin: 0; padding: 0; list-style: none; }
.toc a {
  position: relative; display: block; padding: 12px 0;
  color: var(--ink-3); font: 400 var(--fs-small)/1.4 var(--serif); text-decoration: none;
  transition: color 0.15s cubic-bezier(0.2, 0, 0, 1);
}
.toc a:hover, .toc a[aria-current] { color: var(--ink); }
.toc a::before, .toc a::after { content: ""; position: absolute; top: 0; left: 0; right: 0; height: var(--hair); }
.toc a::before { background: var(--line); }
.toc a::after { background: var(--ink-2); transform: scaleX(var(--p, 0)); transform-origin: left; }

.side { display: none; }
.head-authors { display: flex; }
.contents-inline { display: block; }

@media (min-width: 1100px) {
  .side { display: grid; grid-column: 1; grid-row: 1 / span 2; grid-template-rows: subgrid; align-self: start; max-width: 17rem; }
  .side__authors, .side__top { grid-row: 1; align-self: start; margin-top: calc(var(--fs-meta) * 0.7 + var(--u) * 0.75); }
  .side__contents { grid-row: 2; align-self: start; position: sticky; top: calc(var(--bar) + 2rem); max-height: calc(100vh - var(--bar) - 4rem); overflow-y: auto; }
  .head-authors { display: none; }
  .contents-inline { display: none; }
  .article__head { grid-column: 2; grid-row: 1; }
  .article__body { grid-column: 2; grid-row: 2; }
}

.contents-inline {
  margin: var(--u) 0 0; border-top: var(--hair) solid var(--line); border-bottom: var(--hair) solid var(--line);
}
.contents-inline summary { padding: 0.8rem 0; cursor: pointer; font: 400 var(--fs-small)/1.3 var(--sans); letter-spacing: 0.01em; }
.contents-inline .toc { padding-bottom: 0.5rem; }

.callout { margin: calc(var(--u) * 0.6) 0 1.375em; padding-top: calc(var(--u) * 0.6); border-top: var(--hair) solid var(--line); }
.prose h2 + .callout { padding-top: 0; border-top: 0; }
.callout__eyebrow { margin: 0 0 0.5rem; color: var(--ink-3); font: 400 var(--fs-small)/1.3 var(--sans); }
.prose .callout p { margin: 0; }

.refs { margin: 0; padding: 0; list-style: none; font-size: 0.9375rem; line-height: 1.5; }
.refs li { margin: 0 0 0.6rem; padding-left: 1.5rem; text-indent: -1.5rem; }

/* ---------------------------------------------------------------- entry lists (research, teaching, news) */

.filters { display: flex; flex-wrap: wrap; align-items: baseline; gap: 0.3rem 0.95rem; margin: 0; padding: 0; list-style: none; }
.filters__label { color: var(--ink-3); font: 400 var(--fs-small)/1.3 var(--sans); }
.filters a {
  display: inline-block; padding: 0.35rem 0;
  color: var(--ink-2); font: 400 var(--fs-small)/1.3 var(--sans); letter-spacing: 0.01em;
  text-decoration: underline; text-decoration-color: transparent; text-decoration-thickness: var(--hair); text-underline-offset: 0.3em;
}
.filters a:hover { color: var(--ink); text-decoration-color: var(--line-strong); }
.filters a[aria-current] { color: var(--ink); text-decoration-color: currentColor; }

.entry-list { margin: 0; padding: 0; list-style: none; }
.entry {
  display: grid; grid-template-columns: 5.5rem minmax(0, 1fr) 15rem; column-gap: var(--u);
  padding: var(--u) 0; border-top: var(--hair) solid var(--line);
}
.entry[hidden] { display: none; }
.entry__year { color: var(--ink-3); font: 400 var(--fs-small)/1.5 var(--sans); letter-spacing: 0.01em; }
.entry__body { display: flex; flex-direction: column; gap: 0.5rem; min-width: 0; }
.entry__title { margin: 0; font: 400 var(--fs-h3)/1.25 var(--serif); letter-spacing: -0.01em; }
.entry__title a { text-decoration: none; }
.entry__title a:hover { text-decoration: underline; text-decoration-thickness: var(--hair); text-underline-offset: 0.18em; }
.entry__meta { margin: 0; color: var(--ink-2); font: 400 var(--fs-small)/1.45 var(--sans); letter-spacing: 0.01em; }
.entry__abstract {
  margin: 0; color: var(--ink-2); font: 400 1rem/1.5 var(--serif);
  display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 3; overflow: hidden;
}
.entry__note { margin: 0; color: var(--ink-3); font: 400 var(--fs-small)/1.4 var(--sans); }
.entry .links { margin-top: 0.15rem; }
.entry--wide { grid-template-columns: minmax(0, 1fr) 15rem; }

@media (max-width: 1023px) {
  .entry, .entry--wide { grid-template-columns: minmax(0, 1fr) 11rem; }
  .entry__year { grid-column: 1 / -1; margin-bottom: 0.35rem; }
}
@media (max-width: 640px) {
  .entry, .entry--wide { grid-template-columns: minmax(0, 1fr); }
  .entry .media { display: none; }
}

.group + .group { margin-top: calc(var(--u) * 2); }
.group-empty { color: var(--ink-2); font: 400 1rem/1.5 var(--serif); }

/* ---------------------------------------------------------------- band and footer */

.band {
  background: var(--cat-surface);
  box-shadow: 0 0 0 100vmax var(--cat-surface);
  clip-path: inset(0 -100vmax);
  padding: calc(var(--u) * 1.5) 0 calc(var(--u) * 2);
}
.band .section-head { border-bottom-color: var(--line-strong); }

.sections-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--u); margin: 0; padding: 0; list-style: none; }
.sections-grid li { padding-top: calc(var(--u) * 0.5); border-top: var(--hair) solid var(--line-strong); }
.sections-grid a { display: block; text-decoration: none; }
.sections-grid h3 { display: flex; align-items: center; gap: 0.55rem; margin: 0 0 0.35rem; font: 400 var(--fs-h3)/1.2 var(--serif); }
.sections-grid h3::before { content: ""; width: 0.6rem; height: 0.6rem; flex: none; background: var(--cat); border: var(--hair) solid var(--line-strong); }
.sections-grid li:not([data-colour]) h3::before { background: var(--surface); }
.sections-grid a:hover h3 { text-decoration: underline; text-decoration-thickness: var(--hair); text-underline-offset: 0.18em; }
.sections-grid p { margin: 0; color: var(--ink-2); font: 400 0.9375rem/1.45 var(--serif); }
@media (max-width: 900px) { .sections-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 520px) { .sections-grid { grid-template-columns: minmax(0, 1fr); } }

.related { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--u); }
@media (max-width: 900px) { .related { grid-template-columns: minmax(0, 1fr); } }

.footer { background: var(--cat-surface); border-top: var(--hair) solid var(--cat-line); }
.footer__inner {
  display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 1rem 2rem;
  padding: 1.5rem var(--u); max-width: var(--max); margin: 0 auto;
}
.footer__id { display: flex; flex-direction: column; gap: 0.3rem; }
.footer__name { color: var(--ink); font: 400 1.25rem/1.1 var(--serif); letter-spacing: -0.01em; text-decoration: none; }
.footer__name:hover { text-decoration: underline; text-decoration-thickness: var(--hair); text-underline-offset: 0.18em; }
.footer__role { color: var(--ink-2); font: 400 0.75rem/1.3 var(--sans); letter-spacing: 0.01em; }
.footer .links { gap: 0.35rem 1.1rem; }
.footer .links a { color: var(--ink-2); font-size: 0.75rem; }
.footer__oxford { display: block; flex: none; }
.footer__oxford img { width: 156px; height: auto; }

/* phones: the name and the university only */
@media (max-width: 720px) {
  .footer__inner { flex-wrap: nowrap; padding-block: 1.25rem; }
  .footer__role, .footer__links { display: none; }
  .footer__oxford img { width: 138px; }
}

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

@media print {
  .bar, .side, .band, .footer, .contents-inline, .code__copy { display: none !important; }
  .article, .hero { padding-top: 0; }
  .grid { display: block; }
}

/* ---------------------------------------------------------------- course and CV components */

.factlist { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: var(--u); margin: 0; }
.factlist > div { padding: 0.6rem 0 0.7rem; border-top: var(--hair) solid var(--line); }
.factlist dt { color: var(--ink-3); font: 400 var(--fs-meta)/1.3 var(--sans); letter-spacing: 0.01em; }
.factlist dd { margin: 0.15rem 0 0; font: 400 1rem/1.4 var(--serif); }
@media (max-width: 520px) { .factlist { grid-template-columns: minmax(0, 1fr); } }

.rows { margin: 0 0 1.375em; padding: 0; list-style: none; }
.rows li { padding: calc(var(--u) * 0.5) 0 calc(var(--u) * 0.55); border-top: var(--hair) solid var(--line); }
.rows li:last-child { border-bottom: var(--hair) solid var(--line); }
.rows a { font: 400 var(--fs-h3)/1.25 var(--serif); letter-spacing: -0.01em; text-decoration: none; }
.rows a::after { content: " \2192"; font-size: 0.85em; color: var(--ink-3); }
.rows a:hover { text-decoration: underline; text-decoration-thickness: var(--hair); text-underline-offset: 0.18em; }
.prose .rows a:hover { opacity: 1; }
.rows p { margin: 0.25rem 0 0; color: var(--ink-2); font: 400 1rem/1.45 var(--serif); }

.stages { margin: calc(var(--u) * 0.75) 0 1.375em; padding: 0; list-style: none; }
.stages li { display: grid; grid-template-columns: 6rem minmax(0, 1fr); column-gap: 1rem; padding: 0.7rem 0; border-top: var(--hair) solid var(--line); }
.stages li:last-child { border-bottom: var(--hair) solid var(--line); }
.stages .stage__when { padding-top: 0.15rem; color: var(--ink-3); font: 400 var(--fs-meta)/1.3 var(--sans); letter-spacing: 0.01em; }
.stages strong { display: block; font: 400 var(--fs-h3)/1.25 var(--serif); letter-spacing: -0.01em; }
.stages span.stage__text { color: var(--ink-2); }

.outcomes { padding-left: 1.25rem; }
.outcomes li { margin-bottom: 0.6em; }
.outcomes li::marker { color: var(--ink-3); }

.tools { display: flex; flex-wrap: wrap; gap: 0.35rem 0; margin: 0 0 1.375em; padding: 0; list-style: none; color: var(--ink-2); font: 400 var(--fs-small)/1.4 var(--sans); }
.tools li + li::before { content: "\00b7"; margin: 0 0.6rem; color: var(--ink-3); }

.schedule td.day { white-space: nowrap; }
.schedule td.day span { display: block; color: var(--ink-3); font: 400 var(--fs-meta)/1.3 var(--sans); }
.schedule tr.band td { background: var(--cat-surface); color: var(--ink); font: 400 var(--fs-meta)/1.3 var(--sans); letter-spacing: 0.01em; padding-top: 0.45rem; padding-bottom: 0.45rem; }
.schedule a { text-decoration: underline; text-decoration-thickness: var(--hair); text-decoration-color: var(--line-strong); text-underline-offset: 0.2em; }
.schedule td.col-question { color: var(--ink-2); }
/* phones: each day becomes a short block, its question under the topic */
@media (max-width: 640px) {
  .schedule thead { display: none; }
  .schedule tr { display: grid; grid-template-columns: 6rem minmax(0, 1fr); border-bottom: var(--hair) solid var(--line); }
  .schedule tr.band { display: block; }
  .schedule td { border-bottom: 0; }
  .schedule td.col-question { grid-column: 2; padding-top: 0; }
}
.table-after { margin-top: calc(var(--u) * 0.6); font: 400 var(--fs-small)/1.4 var(--sans); }

.code__source { color: var(--ink-3); }
.tok-function { color: var(--tok-function); }

.cv-entries { margin: 0 0 1.375em; padding: 0; list-style: none; }
.cv-entry { display: grid; grid-template-columns: 8.5rem minmax(0, 1fr); column-gap: var(--u); padding: calc(var(--u) * 0.55) 0; border-top: var(--hair) solid var(--line); }
.cv-entry:last-child { border-bottom: var(--hair) solid var(--line); }
.cv-entry__when { color: var(--ink-2); font: 400 var(--fs-small)/1.45 var(--sans); letter-spacing: 0.01em; }
.cv-entry__when span { display: block; color: var(--ink-3); }
.cv-entry h3 { margin: 0; font: 400 var(--fs-h3)/1.25 var(--serif); letter-spacing: -0.01em; }
.cv-entry p { margin: 0.2rem 0 0; color: var(--ink-2); font: 400 var(--fs-small)/1.45 var(--sans); letter-spacing: 0.01em; }
@media (max-width: 560px) { .cv-entry { grid-template-columns: minmax(0, 1fr); row-gap: 0.3rem; } }

.field { margin: 0 0 calc(var(--u) * 1.25); }
.field h3 { margin: 0; font: 400 var(--fs-h3)/1.25 var(--serif); letter-spacing: -0.01em; }
.field > p { margin: 0.25rem 0 0.6rem; color: var(--ink-2); font: 400 1rem/1.45 var(--serif); }
.field .cv-entry { grid-template-columns: minmax(0, 1fr) 9rem; }
.field .cv-entry h4 { margin: 0; font: 400 1.0625rem/1.35 var(--serif); }
.field .cv-entry__side { color: var(--ink-2); font: 400 var(--fs-meta)/1.45 var(--sans); text-align: right; }
@media (max-width: 560px) { .field .cv-entry { grid-template-columns: minmax(0, 1fr); } .field .cv-entry__side { text-align: left; } }

.button-link {
  padding: 0; border: 0; background: none; color: inherit; cursor: pointer;
  font: 400 var(--fs-small)/1.3 var(--sans); letter-spacing: 0.01em;
  text-decoration: underline; text-decoration-thickness: var(--hair); text-decoration-color: var(--line-strong); text-underline-offset: 0.3em;
}
.button-link:hover { text-decoration-color: currentColor; }

/* ---------------------------------------------------------------- teaching, course, CV and news pages */

/* teaching: a course catalogue. A map of subjects by level, one row per course with its own
   pages beside it, open materials, and earlier teaching as a table */
.page-head__note {
  margin: calc(var(--u) * 0.6) 0 0;
  color: var(--ink); font: 400 var(--fs-small)/1.5 var(--sans); letter-spacing: 0.01em;
}
.page-head__note a { text-decoration: underline; text-decoration-thickness: var(--hair); text-underline-offset: 0.25em; }

.teaching { padding-block: calc(var(--u) * 1.5) calc(var(--u) * 2.5); }
.teaching .subject { padding-top: calc(var(--u) * 2.2); scroll-margin-top: calc(var(--bar) + 0.5rem); }
.teaching .section-head { margin-bottom: 0; }
.teaching .section-head span, .teaching .section-head a { white-space: nowrap; }

/* ---------------------------------------------------------------- map of teaching */

.tmap {
  --cols: 15rem repeat(3, minmax(0, 1fr));
  position: relative; margin-top: calc(var(--u) * 0.2);
}
.tmap__head, .tmap__row, .tmap__guides { display: grid; grid-template-columns: var(--cols); column-gap: 0.75rem; }
.tmap__guides { position: absolute; inset: 0; pointer-events: none; }
.tmap__guides span + span { border-left: var(--hair) dashed var(--line); margin-left: -0.375rem; }
.tmap__head span {
  padding: 0.6rem 0 0.5rem; color: var(--ink-2);
  font: 400 var(--fs-meta)/1.3 var(--sans); letter-spacing: 0.01em;
}
.tmap__row {
  grid-auto-flow: row dense; row-gap: 0.45rem;
  padding: 0.65rem 0; border-top: var(--hair) solid var(--line);
}
.tmap__row:last-child { border-bottom: var(--hair) solid var(--line); }
.tmap__subject { grid-column: 1; grid-row: 1; margin: 0; padding-top: 0.35rem; font: 400 1.0625rem/1.3 var(--serif); letter-spacing: -0.005em; }
.tmap__subject a { text-decoration: none; }
.tmap__subject a:hover { text-decoration: underline; text-decoration-thickness: var(--hair); text-underline-offset: 0.18em; }
.tmap__list { display: contents; list-style: none; margin: 0; padding: 0; }
.tmap__item { grid-column: var(--a) / var(--b); position: relative; list-style: none; }
.tmap__bar {
  display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: 0.1rem 0.75rem;
  height: 100%; padding: 0.42rem 0.6rem;
  background: var(--cat-surface); border: var(--hair) solid var(--cat-line);
  color: var(--ink); text-decoration: none; transition: border-color 0.15s ease;
}
.tmap__bar:hover, .tmap__bar:focus-visible { border-color: var(--line-strong); }
.tmap__bar:hover .tmap__name { text-decoration: underline; text-decoration-thickness: var(--hair); text-underline-offset: 0.18em; }
.tmap__name { font: 400 0.9375rem/1.3 var(--serif); }
.tmap__where { color: var(--ink-2); font: 400 0.75rem/1.3 var(--sans); letter-spacing: 0.01em; white-space: nowrap; }
.tmap__lvl { display: none; }
.is-unstated .tmap__bar { background: var(--surface); border-style: dashed; border-color: var(--line-strong); }
.is-unstated .tmap__lvl { display: inline; }

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

.course {
  display: grid; grid-template-columns: 7.5rem minmax(0, 1fr) 14rem; column-gap: var(--u);
  padding: calc(var(--u) * 0.65) 0; border-top: var(--hair) solid var(--line);
  scroll-margin-top: calc(var(--bar) + 0.5rem);
}
.section-head + .course { border-top: 0; }
.course:target { background: linear-gradient(var(--cat-surface), var(--cat-surface)) no-repeat; background-size: 100% 100%; }
.course__media { aspect-ratio: 1.3; align-self: start; }
.course__body { display: flex; flex-direction: column; gap: 0.3rem; min-width: 0; }
.course__title { margin: 0.1rem 0 0; font: 400 var(--fs-h3)/1.25 var(--serif); letter-spacing: -0.01em; }
.course__title a { text-decoration: none; }
.course__title a:hover { text-decoration: underline; text-decoration-thickness: var(--hair); text-underline-offset: 0.18em; }
.course__facts { margin: 0; color: var(--ink-2); font: 400 var(--fs-small)/1.45 var(--sans); letter-spacing: 0.01em; }
.course__text { margin: 0.15rem 0 0; color: var(--ink-2); font: 400 1rem/1.5 var(--serif); }
.course__note { margin: 0; color: var(--ink-3); font: 400 var(--fs-small)/1.45 var(--sans); letter-spacing: 0.01em; }
.course__note a { text-decoration: underline; text-decoration-thickness: var(--hair); text-underline-offset: 0.2em; }
/* the course's own pages: a column on the right, one name per line, its rule running the full
   height of the row so the text beside it reaches the rule; plain names while the sites are closed */
.course__links {
  grid-column: 3; align-self: stretch; display: flex; flex-direction: column; gap: 0.3rem;
  margin: 0; padding: 0.15rem 0 0 calc(var(--u) * 0.75); list-style: none;
  border-left: var(--hair) solid var(--line);
}
.course__links li { white-space: nowrap; }
.course__links :is(a, span) { font: 400 var(--fs-small)/1.3 var(--sans); letter-spacing: 0.01em; }
.course__links span { color: var(--ink-2); }
.course__links a {
  text-decoration: underline; text-decoration-thickness: var(--hair);
  text-decoration-color: var(--line-strong); text-underline-offset: 0.3em;
}
.course__links a:hover { text-decoration-color: currentColor; }
.subject__note { margin: 0; padding: 0.7rem 0 0; border-top: var(--hair) solid var(--line); color: var(--ink-2); font: 400 var(--fs-small)/1.45 var(--sans); }
.subject__note a { text-decoration: underline; text-decoration-thickness: var(--hair); text-underline-offset: 0.2em; }

@media (prefers-reduced-motion: no-preference) {
  .course:hover .dr-actor, .course:focus-within .dr-actor {
    transform: translate(var(--dx), var(--dy)) rotate(var(--rot)) scale(var(--sc));
  }
}

/* ---------------------------------------------------------------- open materials */

.materials {
  --per-row: 3;
  display: flex; flex-wrap: wrap; gap: calc(var(--u) * 0.9) var(--u);
  margin: calc(var(--u) * 0.8) 0 0; padding: 0; list-style: none;
}
/* items grow, so a short last row fills the row */
.material { flex: 1 1 calc((100% - (var(--per-row) - 1) * var(--u)) / var(--per-row)); min-width: 0; }
.material { display: flex; flex-direction: column; gap: 0.3rem; padding-bottom: 0.8rem; border-bottom: var(--hair) solid var(--line); }
.material__title { margin: 0; font: 400 1.0625rem/1.3 var(--serif); letter-spacing: -0.005em; }
.material__title a { text-decoration: underline; text-decoration-thickness: var(--hair); text-decoration-color: var(--line-strong); text-underline-offset: 0.2em; }
.material__title a:hover { text-decoration-color: currentColor; }
.material__text { margin: 0; color: var(--ink-2); font: 400 0.9375rem/1.45 var(--serif); }
@media (min-width: 1280px) { .materials { --per-row: 4; } }

/* ---------------------------------------------------------------- earlier teaching */

.record { margin-top: calc(var(--u) * 0.8); }
.record th, .record td { padding-top: 0.42rem; padding-bottom: 0.42rem; }
.record tbody th { font-weight: 400; text-align: left; }
.record tbody tr:not(.band) th { font: 400 0.9375rem/1.4 var(--serif); }
.record tr.band th {
  background: var(--cat-surface); color: var(--ink);
  font: 400 var(--fs-meta)/1.3 var(--sans); letter-spacing: 0.01em; padding-top: 0.45rem; padding-bottom: 0.45rem;
}
.record .record__code, .record .record__where, .record .record__role { color: var(--ink-2); font: 400 var(--fs-small)/1.4 var(--sans); letter-spacing: 0.01em; }
.record .record__code { white-space: nowrap; }

/* ---------------------------------------------------------------- narrower screens */

@media (max-width: 1023px) {
  .course { grid-template-columns: 7.5rem minmax(0, 1fr); }
  .course__links { grid-column: 2; align-self: start; flex-direction: row; flex-wrap: wrap; gap: 0.35rem 1.2rem; margin-top: 0.7rem; padding: 0; border-left: 0; }
  .tmap { --cols: 12rem repeat(3, minmax(0, 1fr)); }
  .materials { --per-row: 2; }
}

@media (max-width: 760px) {
  .tmap__head, .tmap__guides { display: none; }
  .tmap__row { grid-template-columns: minmax(0, 1fr); }
  .tmap__subject { grid-row: auto; padding-top: 0; margin-bottom: 0.15rem; }
  .tmap__item { grid-column: 1; }
  .tmap__lvl { display: inline; }
}

@media (max-width: 600px) {
  .course { grid-template-columns: 4.75rem minmax(0, 1fr); column-gap: 0.9rem; }
  .course__links { grid-column: 1 / -1; }
  .materials { --per-row: 1; }
  .record thead { display: none; }
  .record tr { display: grid; grid-template-columns: minmax(0, 1fr) auto; border-bottom: var(--hair) solid var(--line); }
  .record tr.band { display: block; }
  .record th, .record td { border-bottom: 0; }
  .record tbody tr:not(.band) th { grid-column: 1 / -1; padding-bottom: 0.1rem; }
  .record .record__code { grid-column: 2; grid-row: 2; text-align: right; }
  .record .record__where { grid-column: 1; grid-row: 2; padding-top: 0; }
  .record .record__role { grid-column: 1 / -1; padding-top: 0; }
}

/* a worked example: question, relation, code */
.formula { margin: 0 0 calc(var(--u) * 0.5); font: italic 400 1.0625rem/1.5 var(--serif); }
.formula var { font-style: italic; }
.formula sub, .formula sup { font-size: 0.7em; }
.formula__gap { display: inline-block; width: 2.5rem; }
.figure--code .code { margin-bottom: 0; }
.figure--code .figure__notes code { font-size: 0.92em; }
.code__bar .code__source { margin-left: auto; margin-right: 0.75rem; }

/* CV */
.cv-actions { font: 400 var(--fs-small)/1.3 var(--sans); }
.contact--cv { gap: 0.6rem 1.5rem; }
.factlist--one { grid-template-columns: minmax(0, 1fr); }
.cv .cv-entries + h2, .cv .factlist + h2, .cv .pubs + h2 { margin-top: calc(var(--u) * 1.5); }
.cv-sub { margin: calc(var(--u) * 0.9) 0 calc(var(--u) * 0.35); font: 400 var(--fs-h3)/1.2 var(--serif); letter-spacing: -0.01em; }
.prose h2 + .cv-sub { margin-top: 0; }
.pubs { margin: 0 0 1.375em; padding: 0; list-style: none; }
.pubs li { display: flex; flex-direction: column; gap: 0.2rem; padding: 0.7rem 0; border-top: var(--hair) solid var(--line); }
.pubs li:last-child { border-bottom: var(--hair) solid var(--line); }
.pub__title { font: 400 1.0625rem/1.4 var(--serif); }
.pub__detail { color: var(--ink-2); font: 400 var(--fs-small)/1.45 var(--sans); letter-spacing: 0.01em; }
.cv-lede { color: var(--ink-2); }

@media print {
  .paper-grid { display: block; }
  .share, .cv-actions, .cv-print, .head-meta__actions { display: none !important; }
  .contact a[href^="http"]::after { content: none; }
  .field, .cv-entry, .pubs li { break-inside: avoid; }
}

/* ================================================================ second pass, 25 Oct 2026
   Home opening, card system (lead, row, stack, small), research head,
   paper page with side details and margin notes. */

/* ---------------------------------------------------------------- home opening */

.intro { padding-block: calc(var(--bar) + max(2.25rem, 3.6vw)) calc(var(--u) * 1.5); }

.intro__grid { display: grid; grid-template-columns: auto minmax(0, 1fr); column-gap: 1.1rem; row-gap: var(--u); align-items: center; }
/* on narrow screens the card dissolves: the photo sits beside the name and the
   contact list follows the biography */
.intro__card { display: contents; }
.intro__photo {
  grid-column: 1; grid-row: 1;
  width: 5.25rem; height: 5.25rem; border-radius: 50%;
  object-fit: cover; object-position: 50% 16%;
  background: var(--surface-2); border: var(--hair) solid var(--line);
}
.intro__id { grid-column: 2; grid-row: 1; min-width: 0; }
.intro__bio { grid-column: 1 / -1; grid-row: 2; }
.intro .contact { grid-column: 1 / -1; grid-row: 3; padding-top: calc(var(--u) * 0.75); border-top: var(--hair) solid var(--line); }

/* contact and profiles: line icons with their names, never icons alone */
.contact { display: flex; flex-wrap: wrap; gap: 0.7rem 1.4rem; margin: 0; padding: 0; list-style: none; }
.contact a {
  display: inline-flex; align-items: center; gap: 0.55rem;
  color: var(--ink-2); font: 400 var(--fs-small)/1.3 var(--sans); letter-spacing: 0.01em; text-decoration: none;
  transition: color 0.15s ease;
}
.contact .icon { width: 1rem; height: 1rem; }
.contact a:hover { color: var(--ink); }
.contact a:hover span { text-decoration: underline; text-decoration-thickness: var(--hair); text-underline-offset: 0.25em; }
@media (max-width: 520px) {
  .contact { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

.intro__name { margin: 0; font: 400 max(1.875rem, min(2.6vw, 2.625rem))/1.1 var(--serif); letter-spacing: -0.015em; }
.intro__role { margin: 0.45rem 0 0; font: 400 var(--fs-small)/1.45 var(--sans); letter-spacing: 0.01em; }
.intro__role span { color: var(--ink-2); }
.intro__role a { color: var(--ink-2); text-decoration: underline; text-decoration-thickness: var(--hair); text-decoration-color: var(--line-strong); text-underline-offset: 0.25em; }
.intro__role a:hover { color: var(--ink); }
.intro__bio p:last-child { margin-bottom: 0; }

/* wide screens: photo and contact list form one card in the side column, as
   the authors do on a paper page. The columns are the paper page's, so the photo
   sits under the name in the bar and the text starts where every page's text
   starts and runs to the right edge (26 Oct 2026: two equal columns had pushed
   the whole block into the right half). */
@media (min-width: 1100px) {
  .intro__grid { grid-template-columns: minmax(12rem, 15rem) minmax(0, 1fr); column-gap: calc(var(--u) * 1.4); row-gap: calc(var(--u) * 0.9); align-items: start; }
  .intro__card {
    display: flex; flex-direction: column; gap: calc(var(--u) * 0.75);
    grid-column: 1; grid-row: 1 / span 2; justify-self: start; width: 10rem;
  }
  .intro__photo { width: 10rem; height: 10rem; }
  .intro .contact { flex-direction: column; flex-wrap: nowrap; gap: 0.7rem; padding-top: calc(var(--u) * 0.6); }
  .intro__id { grid-column: 2; grid-row: 1; }
  .intro__bio { grid-column: 2; grid-row: 2; }
}

/* ---------------------------------------------------------------- card system */

.card .links { position: relative; z-index: 1; }

/* lead: one item across the full width, drawing beside the text */
.lead {
  position: relative; display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
  column-gap: var(--u); align-items: center;
  padding: calc(var(--u) * 0.75); background: var(--surface);
  border: var(--hair) solid var(--line); transition: border-color 0.2s ease;
}
.lead:hover { border-color: var(--line-strong); }
.lead__text { display: flex; flex-direction: column; gap: calc(var(--u) * 0.5); min-width: 0; padding-block: calc(var(--u) * 0.5); }
.lead .card__title { font-size: var(--fs-title); }
.lead .card__abstract { font-size: var(--fs-abstract); line-height: 1.4; -webkit-line-clamp: 5; }
.lead .media { aspect-ratio: 1.45; }
@media (max-width: 860px) {
  .lead { grid-template-columns: minmax(0, 1fr); row-gap: calc(var(--u) * 0.5); }
  .lead .media { order: -1; }
  .lead__text { padding-block: 0; }
}

/* two wider cards per row under the lead */
.cards-2 { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--u); margin-top: var(--u); }
@media (max-width: 860px) { .cards-2 { grid-template-columns: minmax(0, 1fr); } }
.cards-2 .card--row { grid-template-columns: minmax(0, 1fr) 40%; }
.cards-2 .card--row .card__abstract { -webkit-line-clamp: 3; }
@media (max-width: 560px) {
  .cards-2 .card--row { grid-template-columns: minmax(0, 1fr); }
}

/* one card per row; older work a size smaller */
.cards-1 { display: flex; flex-direction: column; gap: var(--u); }
.card--compact .card__title { font-size: var(--fs-h3); }
.card--compact .card__abstract { font-size: 0.9375rem; }
.card--compact > .media { min-height: 11rem; }

/* stacked cards: drawing on top, for grids of three */
.cards-3 { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--u); }
@media (max-width: 1099px) { .cards-3 { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 640px) { .cards-3 { grid-template-columns: minmax(0, 1fr); } }

.card--stack { gap: calc(var(--u) * 0.45); }
.card--stack .media { aspect-ratio: 1.5; margin-bottom: calc(var(--u) * 0.15); }
.card--stack .card__title { font-size: var(--fs-h3); display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 3; overflow: hidden; }
.card--stack .card__meta { display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; overflow: hidden; }
.card--stack .card__abstract { font-size: 0.9375rem; -webkit-line-clamp: 3; }
.card--stack .links { margin-top: auto; padding-top: 0.35rem; }
.card[hidden] { display: none; }
.card__note { margin: 0; color: var(--ink-3); font: 400 var(--fs-small)/1.4 var(--sans); }

/* small cards for the mosaic: drawing and title only */
.card--small { gap: calc(var(--u) * 0.35); }
.card--small .media { aspect-ratio: 1.45; }
.card--small .card__title { font-size: var(--fs-h3); }

.mosaic { display: grid; gap: var(--u); grid-template-columns: repeat(2, minmax(0, 1fr)); }
.mosaic > .card--feature { grid-column: 1 / -1; }
@media (min-width: 1100px) {
  .mosaic { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .mosaic > .card--feature { grid-column: 1 / span 2; grid-row: 1 / span 2; }
  .mosaic > .card--feature .card__meta { margin-top: 0; padding-top: 0; }
  .mosaic > .card--feature .media { aspect-ratio: 1.3; margin-top: auto; }
}
@media (max-width: 640px) { .mosaic { grid-template-columns: minmax(0, 1fr); } }

.by-section { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--u); }
@media (max-width: 1023px) { .by-section { grid-template-columns: minmax(0, 1fr); } }
.by-section__col { display: flex; flex-direction: column; gap: calc(var(--u) * 0.5); }
.by-section__head { display: flex; align-items: baseline; justify-content: space-between; padding-bottom: 0.5rem; border-bottom: var(--hair) solid var(--line-strong); }
.by-section__head h3 { display: flex; align-items: center; gap: 0.55rem; margin: 0; font: 400 var(--fs-h3)/1.2 var(--serif); }
.by-section__head h3::before { content: ""; width: 0.6rem; height: 0.6rem; background: var(--cat); border: var(--hair) solid var(--line-strong); }
.by-section__head a { color: var(--ink-2); font: 400 var(--fs-small)/1.3 var(--sans); }
.by-section .card { flex: 1; }

.variant { padding-block: calc(var(--u) * 1.5); border-top: var(--hair) solid var(--line); }
.variant:first-of-type { border-top: 0; }
.variant__label { margin: 0 0 0.35rem; color: var(--ink-3); font: 400 var(--fs-small)/1.3 var(--sans); }
.variant__title { margin: 0 0 0.3rem; font: 400 var(--fs-title)/1.15 var(--serif); }
.variant__why { margin: 0 0 var(--u); color: var(--ink-2); font: 400 1rem/1.5 var(--serif); }

/* ---------------------------------------------------------------- page head (research list) */

.page-head { padding-block: calc(var(--bar) + max(2.25rem, 3.6vw)) var(--u); }
.page-head__title { margin: 0; font: 400 max(2rem, min(2.8vw, 2.75rem))/1.1 var(--serif); letter-spacing: -0.015em; }
.page-head__lede { margin: 0.6rem 0 0; color: var(--ink-2); font: 400 var(--fs-abstract)/1.4 var(--serif); }
.page-head .filters { margin-top: var(--u); padding-top: calc(var(--u) * 0.5); border-top: var(--hair) solid var(--line); }

/* a list page opens on the pastel of the bar, as the DeepMind home does */
.page-band { background: var(--cat-surface); }
.page-band .page-head { padding-bottom: calc(var(--u) * 0.6); }
.page-band .filters { border-top-color: var(--cat-line); }
.page-band .filters__label, .page-band .filters a { color: var(--ink); }

/* the topic filters are also the colour key */
.filters a[data-colour]::before {
  content: ""; display: inline-block; width: 0.55rem; height: 0.55rem; margin-right: 0.45rem;
  background: var(--cat); border: var(--hair) solid var(--line-strong); vertical-align: 0.02em;
}

/* list pages (research, teaching, news): whole abstracts, since the list is where a reader chooses */
.listing { padding-block: calc(var(--u) * 1.5) calc(var(--u) * 2); }
.listing-groups { margin-top: calc(var(--u) * 2); }
.listing .card__abstract { display: block; -webkit-line-clamp: unset; overflow: visible; }

/* ---------------------------------------------------------------- paper page: grid with a notes column */

.wrap--paper { max-width: max(64rem, min(94vw, 86rem)); }
/* without margin notes the page keeps the width of the bar, so the text ends under its right edge */
.wrap--paper.paper-grid--plain { max-width: var(--max); }
.paper-grid { display: grid; grid-template-columns: minmax(0, 1fr); row-gap: var(--u); }

@media (min-width: 1100px) {
  .paper-grid { grid-template-columns: minmax(12rem, 15rem) minmax(0, 1fr); column-gap: var(--gap-paper); }
  .paper-grid > .side { display: grid; grid-column: 1; grid-row: 1 / span 2; grid-template-rows: subgrid; align-self: start; }
  .paper-grid > .article__head { grid-column: 2; grid-row: 1; }
  .paper-grid > .article__body { grid-column: 2; grid-row: 2; }
}
.paper-grid { --note: 13rem; --gap-paper: calc(var(--u) * 1.4); }
@media (min-width: 1400px) { .paper-grid { --note: 15rem; } }
@media (min-width: 1240px) {
  .paper-grid { grid-template-columns: minmax(12rem, 15rem) minmax(0, 1fr) var(--note); column-gap: var(--gap-paper); }
  /* no notes stand beside the title and abstract, so the head runs across the notes column */
  .paper-grid:not(.paper-grid--plain) > .article__head { grid-column: 2 / -1; }
  /* pages without margin notes (posts, most papers, the CV): sidebar and text only */
  .paper-grid--plain { grid-template-columns: minmax(12rem, 15rem) minmax(0, 1fr); }
}

.side__top { display: flex; flex-direction: column; gap: calc(var(--u) * 0.9); }
.side__block .subhead { margin-bottom: calc(var(--u) * 0.45); }

.details { margin: 0; }
.details > div { padding: 0.45rem 0 0.55rem; border-top: var(--hair) solid var(--line); }
.details > div:first-child { border-top: 0; padding-top: 0; }
.details dt { color: var(--ink-3); font: 400 var(--fs-meta)/1.3 var(--sans); letter-spacing: 0.01em; }
.details dd { margin: 0.1rem 0 0; font: 400 0.9375rem/1.4 var(--serif); }

.downloads { margin: 0; padding: 0; list-style: none; }
.downloads li { display: flex; align-items: baseline; justify-content: space-between; gap: 0.75rem; padding: 0.45rem 0; border-top: var(--hair) solid var(--line); }
.downloads li:first-child { border-top: 0; padding-top: 0; }
.downloads a { font: 400 0.9375rem/1.35 var(--serif); text-decoration: underline; text-decoration-thickness: var(--hair); text-decoration-color: var(--line-strong); text-underline-offset: 0.2em; }
.downloads a:hover { text-decoration-color: currentColor; }
.downloads a[href^="#"]::after { content: "\2009\2193"; display: inline-block; color: var(--ink-3); }
.downloads span { color: var(--ink-3); font: 400 var(--fs-meta)/1.3 var(--sans); white-space: nowrap; }

/* share: four plain line icons in the text colour; a pastel disc on hover */
.share { display: flex; flex-wrap: wrap; align-items: center; column-gap: 0.6rem; }
.share__list { display: flex; gap: 0.2rem; margin: 0 0 0 -0.5rem; padding: 0; list-style: none; }
.share__btn {
  display: grid; place-items: center; width: 2.25rem; height: 2.25rem; padding: 0;
  border: 0; border-radius: 50%; background: none; color: var(--ink-2); cursor: pointer;
  transition: background-color 0.15s ease, color 0.15s ease;
}
.share__btn:hover, .share__btn:focus-visible { background: var(--cat); color: var(--ink); }
.share__btn .icon--check { display: none; }
.share__btn.is-done .icon--link { display: none; }
.share__btn.is-done .icon--check { display: block; }
.share__status { margin: 0; min-width: 0; color: var(--ink-2); font: 400 var(--fs-meta)/1.3 var(--sans); letter-spacing: 0.01em; overflow-wrap: anywhere; }

.head-meta__actions { display: flex; flex-direction: column; gap: calc(var(--u) * 0.6); }

.head-meta { display: grid; gap: var(--u); grid-template-columns: repeat(2, minmax(0, 1fr)); padding-top: calc(var(--u) * 0.75); border-top: var(--hair) solid var(--line); }
.head-meta .authors { grid-column: 1 / -1; }
@media (max-width: 560px) { .head-meta { grid-template-columns: minmax(0, 1fr); } }
@media (min-width: 1100px) { .head-meta { display: none; } }

/* margin notes, after Tufte's sidenotes: in the right column when there is room,
   opened in place by the note number when there is not */
.sn-ref {
  position: relative; top: -0.45em; margin-left: 0.08em; padding: 0 0.12em;
  border: 0; border-radius: 2px; background: none; cursor: pointer;
  color: var(--accent); font: 600 0.68em/1 var(--sans);
}
.sn-ref:hover, .sn-ref.is-hot { background: var(--cat-soft); }

.sidenote, .marginfig {
  display: none; margin: 0.65rem 0 0.9rem; padding: 0.6rem 0.75rem;
  border-left: 2px solid var(--cat); background: var(--surface-2);
  color: var(--ink-2); font: 400 0.84375rem/1.5 var(--sans); letter-spacing: 0.005em; text-align: left;
}
.sidenote.is-open, .marginfig.is-open { display: block; }
.sidenote__num { margin-right: 0.35em; color: var(--accent); font-weight: 600; }
.sidenote a.cite, .marginfig a {
  color: var(--ink); text-decoration: underline; text-decoration-thickness: var(--hair);
  text-decoration-color: var(--line-strong); text-underline-offset: 0.2em;
}
.sidenote a.cite:hover { text-decoration-color: currentColor; }
.marginfig svg { width: 100%; height: auto; margin-bottom: 0.4rem; }
.marginfig text { font-family: var(--sans); fill: var(--ink-2); }

@media (min-width: 1240px) {
  .sidenote, .marginfig {
    display: block; float: right; clear: right; box-sizing: border-box;
    width: var(--note); margin: 0.2rem calc(-1 * (var(--note) + var(--gap-paper))) 1rem 0; padding: 0 0 0 0.75rem;
    background: none; border-left: 1px solid var(--line);
    transition: border-color 0.15s ease, color 0.15s ease;
  }
  .sidenote.is-hot, .marginfig.is-hot { border-left-color: var(--accent); color: var(--ink); }
  .sidenote.is-flash { animation: note-flash 1.2s ease-out; }
}
@keyframes note-flash { 0% { background: var(--cat-soft); } 100% { background: transparent; } }

.cite-pop {
  position: absolute; z-index: 60; max-width: 22rem; padding: 0.6rem 0.75rem;
  background: var(--surface); border: var(--hair) solid var(--line-strong);
  box-shadow: 0 6px 20px rgba(24, 24, 27, 0.1);
  color: var(--ink); font: 400 0.84375rem/1.45 var(--serif);
}
.cite-pop[hidden] { display: none; }

.refs li { scroll-margin-top: calc(var(--bar) + 2rem); transition: background-color 0.6s ease; }
.refs li:target, .refs li.is-hot { background: var(--cat-soft); }
.ref__back { margin-left: 0.4rem; color: var(--ink-3); font: 400 var(--fs-meta)/1 var(--sans); text-decoration: none; white-space: nowrap; }
.ref__back:hover { color: var(--ink); text-decoration: underline; }

/* sticky part of the paper sidebar: share, downloads and contents stay in reach while reading */
.side__contents { display: flex; flex-direction: column; gap: calc(var(--u) * 0.9); }

/* ================================================================ live site, 25 Oct 2026
   Parts the prototype did not need: image figures on paper pages, plain
   reference lists, and the blocks of the news posts, whose bodies are kept
   as they were written. */

/* paper pages: figures and result tables that are images */
.figure--image a { display: block; border: var(--hair) solid var(--line); background: var(--surface); }
.figure--image img { width: 100%; height: auto; }
.figure--image a:hover { border-color: var(--line-strong); }
.refs--plain li { padding-left: 0; text-indent: 0; }
.prose .callout + .callout { margin-top: 0; }
.prose .copy-status { margin: 0; min-height: 1.2em; font: 400 var(--fs-meta)/1.3 var(--sans); color: var(--ink-2); }

/* news posts */
.article__head > .links { margin-top: calc(var(--u) * 0.6); }
.post figure { margin: calc(var(--u) * 1.2) 0 calc(var(--u) * 1.4); }
.post figure img { width: 100%; height: auto; border: var(--hair) solid var(--line); background: var(--surface); }
.post figure a:has(img) { display: block; }
.post figcaption { margin: calc(var(--u) * 0.5) 0 0; color: var(--ink-2); font: 400 var(--fs-meta)/1.45 var(--sans); letter-spacing: 0.01em; }
.post figcaption a { color: inherit; }
.post ul, .post ol:not(.flow) { padding-left: 1.25rem; }
.post li { margin-bottom: 0.45em; }
.post li::marker { color: var(--ink-3); }
.post blockquote { margin: 0 0 1.375em; padding: 0.2rem 0 0.2rem 1rem; border-left: 2px solid var(--cat); color: var(--ink-2); }
.post blockquote p { margin: 0; }
.post .small-note { color: var(--ink-2); font: 400 var(--fs-small)/1.5 var(--sans); letter-spacing: 0.01em; }
.post .reading-step { padding: 0.75rem 0.9rem; background: var(--cat-surface); border-left: 2px solid var(--cat-line); }
.post .table-wrap table { width: 100%; border-collapse: collapse; font: 400 0.9375rem/1.4 var(--serif); }
.post .table-wrap th, .post .table-wrap td { padding: 0.5rem 0.7rem; text-align: left; border-bottom: var(--hair) solid var(--line); }
.post .table-wrap thead th { background: var(--grey-900); color: #fff; font-weight: 400; }
.post .table-wrap caption { caption-side: top; padding-bottom: 0.5rem; text-align: left; }

/* a worked record, set apart */
.post .record-example { padding: calc(var(--u) * 0.8); border: var(--hair) solid var(--line); background: var(--surface-2); }
.post .record-example h3 { margin-top: 0; }
.post .record-example .table-wrap { margin-top: 0.6rem; }

/* a four-step flow, in the manner of the course stages */
.post ol.flow { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 0; margin: calc(var(--u) * 0.8) 0 1.375em; padding: 0; list-style: none; counter-reset: none; }
.post ol.flow li { margin: 0; padding: 0.7rem 0.8rem 0.8rem 0; border-top: 2px solid var(--cat); }
.post ol.flow li + li { padding-left: 0.8rem; border-left: var(--hair) solid var(--line); }
.post ol.flow strong { display: block; font: 400 var(--fs-h3)/1.2 var(--serif); }
.post ol.flow span { display: block; margin-top: 0.25rem; color: var(--ink-2); font: 400 var(--fs-small)/1.4 var(--sans); }
@media (max-width: 640px) {
  .post ol.flow { grid-template-columns: repeat(2, minmax(0, 1fr)); row-gap: 0.8rem; }
  .post ol.flow li:nth-child(3) { padding-left: 0; border-left: 0; }
}

/* quiet text links for downloads inside a post */
.post .download-list { display: flex; flex-wrap: wrap; gap: 0.4rem 1.25rem; margin: 0 0 1.375em; }
.post .download-list a { font: 400 var(--fs-small)/1.3 var(--sans); letter-spacing: 0.01em; }

/* code in posts: the same box as on paper pages, with token colours by grammar */
.post .code-example { margin: calc(var(--u) * 0.6) 0 1.375em; border: var(--hair) solid var(--line); background: var(--surface-2); }
.post .code-label {
  display: flex; align-items: center; justify-content: space-between; gap: 1rem;
  padding: 0.45rem 0.75rem; border-bottom: var(--hair) solid var(--line);
  color: var(--ink); font: 400 var(--fs-meta)/1.2 var(--sans); letter-spacing: 0.01em;
}
.post .code-label span { display: inline-flex; align-items: center; gap: 0.45rem; }
.post .code-label span::before { content: ""; width: 0.5rem; height: 0.5rem; background: var(--cat); border: var(--hair) solid var(--line-strong); }
.post .code-label button {
  padding: 0.2rem 0; border: 0; background: none; color: var(--ink-2); cursor: pointer;
  font: inherit; text-decoration: underline; text-decoration-thickness: var(--hair); text-underline-offset: 0.3em;
}
.post .code-label button:hover { color: var(--ink); }
.post .code-example pre { margin: 0; padding: 0.85rem 0.75rem 1rem; overflow-x: auto; }
.post .code-example code { padding: 0; background: none; font: 400 0.84rem/1.65 var(--mono); letter-spacing: 0; white-space: pre; }
.syn-k, .syn-kn, .syn-kd, .syn-kc, .syn-kr, .syn-ow { color: var(--tok-keyword); }
.syn-s, .syn-s1, .syn-s2, .syn-sd, .syn-se, .syn-sa, .syn-sb { color: var(--tok-string); }
.syn-c, .syn-c1, .syn-cm, .syn-ch { color: var(--tok-comment); font-style: italic; }
.syn-m, .syn-mi, .syn-mf { color: var(--tok-number); }
.syn-nf, .syn-nb, .syn-nc, .syn-ne, .syn-nn { color: var(--tok-function); }

/* ---------------------------------------------------------------- open materials: case studies and illustrations
   Pages under Teaching that stand apart from the closed course sites (26 Oct 2026), set a little
   larger than the other pages, at his request. */

.prose--large { font-size: 1.125rem; line-height: 1.55; }
.prose--large .table { font-size: 0.9375rem; }
.date a { text-decoration: underline; text-decoration-thickness: var(--hair); text-decoration-color: var(--line-strong); text-underline-offset: 0.25em; }

/* maths: KaTeX, set off by a rule in the subject colour; long displays scroll rather than spill */
.maths { margin: 0 0 1.375em; padding: 0.15rem 0 0.15rem 1rem; border-left: 2px solid var(--cat); }
.maths p { margin: 0 0 0.9em; }
.maths p:last-child { margin-bottom: 0; }
.katex { font-size: 1.06em; }
.katex-display { margin: 0.7em 0; padding: 0.15rem 0; overflow-x: auto; overflow-y: hidden; }

.table--facts { table-layout: fixed; }
.table--facts th:nth-child(1) { width: 36%; }
.table--facts th:nth-child(2) { width: 30%; }
.table--timeline td:first-child, .table--facts td:first-child { white-space: nowrap; color: var(--ink-2); font-family: var(--sans); font-size: var(--fs-small); }
.lessons { padding-left: 1.25rem; }
.lessons li { margin-bottom: 0.6em; }
.lessons li::marker { color: var(--ink-3); }
.callout--think h3 { margin: 0 0 0.5rem; font: 400 var(--fs-h3)/1.25 var(--serif); }
.callout--think ol { margin: 0; padding-left: 1.25rem; }
.callout--think li { margin-bottom: 0.6em; }

/* Python, coloured by Prism with the site's token colours */
.code .token.keyword, .code .token.builtin { color: var(--tok-keyword); }
.code .token.string { color: var(--tok-string); }
.code .token.number, .code .token.boolean { color: var(--tok-number); }
.code .token.comment { color: var(--tok-comment); font-style: italic; }
.code .token.function { color: var(--tok-function); }
.code .token.operator, .code .token.punctuation { color: var(--ink-2); }
.code--output pre code { color: var(--ink-2); }

/* the case list: year beside the entry, no empty media column */
.case-entry { grid-template-columns: 5.5rem minmax(0, 1fr); }
.case-entry .entry__abstract { display: block; -webkit-line-clamp: unset; overflow: visible; }
@media (max-width: 1023px) { .case-entry { grid-template-columns: minmax(0, 1fr); } }

/* the essay pages under Teaching: a larger title, lead and headings; the facts of a case in the text column */
.essay .title { font-size: max(1.6rem, min(2.6vw, 2.5rem)); line-height: 1.1; }
.essay .abstract { font-size: max(1.156rem, min(1.45vw, 1.3rem)); line-height: 1.45; }
.prose--large h2 { font-size: max(1.3rem, min(1.9vw, 1.875rem)); }
.prose--large h3 { margin: 1.6em 0 0.45em; font-size: 1.3rem; font-weight: 600; line-height: 1.25; letter-spacing: -0.005em; }
.glance { display: grid; grid-template-columns: 7.5rem minmax(0, 1fr); margin: 0 0 calc(var(--u) * 1.5); border-top: var(--hair) solid var(--line); }
.glance dt, .glance dd { margin: 0; padding: 0.6rem 0; border-bottom: var(--hair) solid var(--line); }
.glance dt { padding-top: 0.75rem; color: var(--ink-2); font: 400 var(--fs-small)/1.5 var(--sans); letter-spacing: 0.01em; }
.glance dd { font-size: 1rem; line-height: 1.5; }
@media (max-width: 640px) {
  .glance { grid-template-columns: minmax(0, 1fr); }
  .glance dt { padding-bottom: 0; border-bottom: 0; }
  .glance dd { padding-top: 0.15rem; }
}
/* on a phone a long display equation breaks after = or + (KaTeX's own break points) instead of running off the side */
@media (max-width: 640px) {
  .prose .katex { font-size: 0.98em; }
  .prose .katex-display > .katex { white-space: normal; text-align: left; }
  .prose .katex-display > .katex > .katex-html > .base { margin: 0.2em 0; }
  .prose .katex-display > .katex > .katex-html > .tag { position: static; display: block; text-align: right; }
}

/* the central banking drawings: each one a section with its picture, caption, text and maths */
/* named "illustration", never "drawing": .drawing is every SVG drawing on the site, and a margin
   set here on 26 Oct 2026 pushed all of them out of their plates until it was renamed */
.illustration { margin-top: calc(var(--u) * 2.4); }
.illustration > h3 { margin-top: 0; }
.illustration__figure { margin: 0.9rem 0 1.5rem; }
.illustration__figure img { display: block; width: 100%; height: auto; }
.illustration__figure figcaption { margin-top: 0.7rem; color: var(--ink-2); font: 400 var(--fs-small)/1.5 var(--sans); letter-spacing: 0.01em; }
.maths__display { margin: 0.2rem 0 0.9em; }
.maths__display .katex-display { margin: 0; }