/* DejaVu Sans Mono (Bitstream Vera / DejaVu licence, fonts/DejaVu-LICENSE.txt): a monospaced font with mathematical symbols, for the landscape. */
@font-face {
  font-family: "Landscape Mono";
  src: url("../fonts/DejaVuSansMono.ttf") format("truetype");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

/* Alte DIN 1451 Mittelschrift (Peter Wiegel, CC BY-SA); files are in the fonts folder, see fonts/README.txt.
   If a file is not found the page falls back to Helvetica. */
@font-face {
  font-family: "Alte DIN 1451";
  src: local("Alte DIN 1451 Mittelschrift"),
       url("../fonts/AlteDIN1451Mittelschrift.ttf") format("truetype");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}
/* the embossed ("gepraegt") cut, used for the name */
@font-face {
  font-family: "Alte DIN 1451 Name";
  src: local("Alte DIN 1451 Mittelschrift gepraegt"),
       url("../fonts/AlteDIN1451MittelschriftGepraegt.ttf") format("truetype");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}
/* Inter (SIL OFL) for the text block: one variable font file covers every weight. */
@font-face {
  font-family: "Inter";
  src: url("../fonts/Inter-Variable.ttf") format("truetype");
  font-weight: 100 900;
  font-style: normal;
  font-display: swap;
}

:root {
  --paper: #f6f5f1;
  --ink: #1b1b19;
  --ink-soft: #6c6a63;
  --neon: #eaff00;
  --sans: "Helvetica Neue", Helvetica, Arial, "Inter", system-ui, "Segoe UI Symbol", "Apple Symbols", "STIX Two Math", "Cambria Math", sans-serif;
  --display: "Alte DIN 1451", var(--sans);
  --display-name: "Alte DIN 1451 Name", "Alte DIN 1451", var(--sans);
  --symbols: "Apple Symbols", "Segoe UI Symbol", "STIX Two Math", "Cambria Math", "Noto Sans Math", "DejaVu Sans", "Helvetica Neue", Arial, sans-serif;
  --text-font: "Inter", "Helvetica Neue", Helvetica, Arial, sans-serif;
  --mono: ui-monospace, "SF Mono", Menlo, Consolas, "Courier New", monospace;
}

* { box-sizing: border-box; }

html, body {
  margin: 0;
  height: 100%;
  background: var(--paper);
  color: var(--ink);
  overflow: hidden;
}

body { font-family: var(--sans); }

/* ------------------------------------------------------------------ landscape */

#ascii,
.ascii-layer {
  position: fixed;
  inset: 0;
  z-index: 0;
  margin: 0;
  overflow: hidden;
  font-family: "Landscape Mono", "DejaVu Sans Mono", Menlo, Consolas, monospace;
  font-size: var(--cell, 9.5px);
  line-height: calc(var(--cell, 9.5px) * 1.105);
  letter-spacing: 0;
  pointer-events: none;
  user-select: none;
  opacity: 0;
}

.wire {
  position: fixed;
  left: 0;
  top: 0;
  z-index: 0;
  opacity: 0;
  pointer-events: none;
}
.relief {
  position: fixed;
  left: 0;
  top: 0;
  z-index: 0;
  opacity: 0;
  pointer-events: none;
}

/* Landscape interface: opacity follows --ui, which main.js sets from the scroll progress. */
.masthead,
.peaks,
.field-panel {
  z-index: 10;
  opacity: var(--ui, 0);
  visibility: hidden;
}
body[data-ui="on"] .masthead,
body[data-ui="on"] .peaks,
body[data-ui="on"] .field-panel { visibility: visible; }
body:not([data-view="landscape"]) .peak,
body:not([data-view="landscape"]) .alt,
body:not([data-view="landscape"]) .field-panel { pointer-events: none; }

.masthead {
  position: fixed;
  top: calc(34px + 3.6vw);
  left: 24px;
  right: 32px;
  max-width: 34rem;
}
.masthead h2 {
  display: none;
  margin: 0;
  font-family: var(--display-name);
  font-synthesis: none;
  font-size: clamp(1.7rem, 3.4vw, 2.5rem);
  font-weight: 400;
  letter-spacing: -0.01em;
  line-height: 1.05;
  text-shadow: 0 0 4px var(--paper), 0 0 10px var(--paper), 0 0 18px var(--paper);
}
.masthead p {
  margin: 0 0 0 -0.042em;      /* the ink of the "T" (left bearing 0.042em) sits on the margin */
  text-box: trim-both cap alphabetic;   /* the box is exactly as tall as the capital letters */
  line-height: 16px;
  font-family: var(--text-font);
  font-size: 13px;
  font-weight: 500;
  letter-spacing: 0;
  color: var(--ink);
  width: fit-content;
  position: relative;
  isolation: isolate;
}
/* the yellow field is as tall as the labels and reaches well to the right; the text itself does not move */
.masthead p::before {
  content: "";
  position: absolute;
  z-index: -1;
  left: -9px;
  right: -64px;
  top: 50%;
  height: 30px;
  transform: translateY(-50%);
  background: var(--neon);
}

/* Peak pointers */
.peaks {
  position: fixed;
  inset: 0;
  pointer-events: none;
}
.peaks a { color: inherit; text-decoration: none; }
.peak {
  position: fixed;
  left: 0;
  top: 0;
  width: 0;
  height: 0;
  pointer-events: auto;
  font-family: var(--text-font);
  font-size: 13px;
  font-weight: 500;
  line-height: 16px;
  transition: opacity 0.4s;
}
.peak::after {
  content: "";
  position: absolute;
  left: -5px;
  top: -9px;
  width: 10px;
  height: 9px;
  clip-path: polygon(0 0, 100% 0, 50% 100%);       /* a black triangle, its point on the peak */
  background: var(--ink);
  transition: opacity 0.2s ease;
}
.peak.is-behind::after { opacity: 0; }              /* the peak is behind a mountain */
/* hairline up from the bullet, bending into a horizontal hairline under the text */
.peak__stem {
  position: absolute;
  left: 0;
  bottom: 0;
  width: 0;
  height: calc(38px + var(--lift, 0px));
  border-left: 1.5px solid var(--ink);
  margin-left: -0.75px;
  clip-path: inset(0 0 var(--hid, 0px) 0);       /* the part behind a mountain is cut off */
}
.peak__text {
  position: absolute;
  left: -0.75px;
  bottom: calc(38px + var(--lift, 0px));
  padding: 6px calc(42px - 33px * var(--s, 0)) 6px calc(9px + 33px * var(--s, 0));   /* --s: 0 box to the right of the pole, 1 to the left; set by peaks.js */
  transform: translateX(calc(var(--s, 0) * (-100% + 1.5px)));
  border-bottom: 1.5px solid var(--ink);
  white-space: nowrap;
  background: var(--neon, #eaff00);
}
.peak__n { color: var(--ink-soft); margin-right: 0.7em; font-variant-numeric: tabular-nums; }
.peak--left .peak__text { left: auto; right: -0.75px; padding: 6px 9px 6px 42px; }
/* hover: a black fill sweeps in from the left and leaves to the right */
.peak__text { isolation: isolate; transition: color 0.3s ease, border-color 0.3s ease, opacity 0.25s ease; }
.peak.is-boxhid .peak__text { opacity: 0; }              /* the flag itself is behind a mountain */
.peak__text::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background: var(--ink);
  transform: scaleX(0);
  transform-origin: right center;
  transition: transform 0.38s cubic-bezier(0.65, 0, 0.2, 1);
}
.peak__n { transition: color 0.3s ease; }
.peak:hover .peak__text,
.peak.is-hot .peak__text,
.peak:focus-visible .peak__text { color: var(--paper); border-bottom-color: var(--neon); }
.peak:hover .peak__text::before,
.peak.is-hot .peak__text::before,
.peak:focus-visible .peak__text::before { transform: scaleX(1); transform-origin: left center; }
.peak:hover .peak__n,
.peak.is-hot .peak__n,
.peak:focus-visible .peak__n { color: #a9a79f; }
.peak:focus-visible { outline: none; }

/* Field panel: a black button at the bottom right. Open, the button and the box above it turn light grey with black text. */
.field-panel {
  --serif: "KaTeX_Main", "STIX Two Text", "Latin Modern Roman", "Times New Roman", Georgia, serif;
  position: fixed;
  right: 24px;
  bottom: 24px;
  font-family: var(--serif);
  font-size: 16px;
  line-height: 1.42;
  color: #000;
  text-align: left;
}
.field-panel summary {
  position: relative;
  isolation: isolate;
  display: block;
  cursor: pointer;
  list-style: none;
  padding: 6px 28px 7px;
  line-height: 16px;
  color: #fff;
  font-family: var(--text-font);
  font-size: 13px;
  font-weight: 500;
  letter-spacing: 0.01em;
  text-align: center;
  -webkit-backdrop-filter: blur(6px);
  backdrop-filter: blur(6px);
  transition: color 0.3s ease;
}
.field-panel summary::-webkit-details-marker { display: none; }
/* two layers wipe past each other: the black one leaves to the right, the light one comes in from the left (and back) */
.field-panel summary::before,
.field-panel summary::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  transition: transform 0.38s cubic-bezier(0.65, 0, 0.2, 1);
}
.field-panel summary::before { background: #000; transform: scaleX(1); transform-origin: right center; }
.field-panel summary::after { background: rgba(232, 232, 228, 0.86); transform: scaleX(0); transform-origin: left center; }
/* light grey when open, or closed and hovered; black otherwise */
.field-panel[open] summary,
.field-panel summary:hover { color: #000; }
.field-panel[open] summary::before,
.field-panel summary:hover::before { transform: scaleX(0); }
.field-panel[open] summary::after,
.field-panel summary:hover::after { transform: scaleX(1); }
.field-panel__body {
  position: absolute;
  right: 0;
  bottom: 100%;
  margin-bottom: 6px;
  padding: 1.1rem 1.2rem 1.2rem;
  background: rgba(232, 232, 228, 0.86);
  -webkit-backdrop-filter: blur(6px);
  backdrop-filter: blur(6px);
  color: #000;
  width: 31rem;
  max-width: calc(100vw - 48px);
  max-height: calc(100vh - 150px);
  overflow-y: auto;
  overscroll-behavior: contain;
  animation: fp-in 0.25s ease both;
}
@keyframes fp-in { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } }
.fp-text { margin: 0 0 0.85rem; color: #000; }
.fp-label { margin: 1.1rem 0 0.35rem; font-style: italic; font-weight: 700; color: #000; }
.fp-refs { font-size: 12px; line-height: 1.4; }
.fp-label:first-child { margin-top: 0; }
.field-panel .katex { font-size: 1em; }
/* link between the two views of the field panel: the model and how the picture is computed */
.fp-more { margin: 1rem 0 1.1rem; }
.fp-more--top { margin-top: 0; }
.fp-more a { color: #000; text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 3px; }
.fp-more a:hover { background: #000; color: #e8e8e4; text-decoration: none; }
.fp-view[hidden] { display: none; }
.fp-refs p { margin: 0 0 0.4rem; padding-left: 1em; text-indent: -1em; color: #000; }
.fp-refs { margin-bottom: 0.85rem; }
.fp-refs a { color: #000; text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 2px; overflow-wrap: anywhere; }
.fp-refs a:hover { background: #000; color: #e8e8e4; text-decoration: none; }
.field-panel__row[hidden] { display: none; }
.fp-group { margin-top: 1.3rem; padding-top: 0.6rem; border-top: 1px solid rgba(0, 0, 0, 0.25); }
.fp-group:first-of-type { margin-top: 1rem; }
.field-panel code { font-family: "Landscape Mono", "DejaVu Sans Mono", Menlo, monospace; font-size: 0.82em; }
.field-panel .katex-display { margin: 0.7em 0; overflow-x: auto; overflow-y: hidden; padding: 0.15em 0; }
.field-panel__row {
  display: grid;
  grid-template-columns: 4.4rem 1fr 2.8rem;
  align-items: center;
  gap: 0.6rem;
  margin-top: 0.5rem;
}
.field-panel__row output { text-align: right; color: #000; font-variant-numeric: tabular-nums; }
.field-panel input[type="range"] { width: 100%; accent-color: #000; }
.field-panel input[type="checkbox"] { justify-self: start; margin: 0; accent-color: #000; }
.field-panel select { font: inherit; font-size: 13px; padding: 2px 4px; background: #fff; color: #000; border: 1px solid #000; border-radius: 0; justify-self: start; }

/* ------------------------------------------------------------------ front page */

.front {
  --g: 24px;
  position: fixed;
  inset: 0;
  z-index: 20;
  display: flex;
  flex-direction: column;
  padding: 14px var(--g) 28px;
  background: transparent;
  font-family: var(--display);
  font-synthesis: none;
  font-size: 14px;
  line-height: 1.55;
}

/* the random walk of neon cells (walk.js), behind the symbols and the text */
.front__walk {
  position: absolute;
  left: 0;
  top: 0;
  pointer-events: none;
  opacity: calc(1 - var(--f, 0) * 1.5);
}

/* tiny mathematical marks: 2 rows of 6, top and bottom, equally spaced edge to edge, behind the text */
.front__marks {
  position: absolute;
  top: 16px;
  bottom: 16px;
  left: calc(var(--g) + 5px);
  right: calc(var(--g) + 5px);
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  pointer-events: none;
  user-select: none;
  font-family: var(--symbols);
  font-size: 12px;
  -webkit-text-stroke: 0.6px currentColor;
  opacity: calc((1 - var(--f, 0) * 1.5) * 0.8);
}
.front__marks-row {
  display: grid;
  grid-template-columns: repeat(6, 0);
  justify-content: space-between;
  line-height: 1;
}
.front__marks-row span {
  transition: opacity 0.6s ease;
  display: flex;
  justify-content: center;
  width: 0;
  white-space: nowrap;
}

.front__word {
  font-family: var(--display-name);
  position: relative;
  margin: 3.2vh 0 0 -0.073em;
  /* the name is shrunk by its font size, not by a transform: the text is drawn at its true size in every frame (a scaled bitmap of the text can jump when the browser redraws it sharp), and the box keeps its height so that nothing below moves */
  --fs: 13.2vw;
  font-size: calc(var(--fs) * (1 - var(--f, 0) * var(--shrink, 0.75)));
  height: calc(var(--fs) * 0.86);
  font-weight: 400;
  letter-spacing: -0.02em;
  line-height: 0.86;
  white-space: nowrap;
  transform-origin: 0 0;
  /* shrinks to a quarter of the page width and rises to the top, staying visible as the header */
  transform: translate(calc(var(--f, 0) * var(--shrink, 0.75) * var(--ink, 0px)), calc(var(--f, 0) * var(--ty, 0px)));
  text-shadow: 0 0 2px var(--paper);
}

.front__body {
  position: relative;
  margin-top: 5vh;
  display: flex;                       /* text, photo, contact: see "About" below */
  flex-wrap: wrap;
  align-items: flex-start;
  align-content: flex-start;
  column-gap: 12px;
  row-gap: 1.4rem;
  transform: translateY(calc(var(--f, 0) * -20vh));
  opacity: calc(1 - var(--f, 0) * 1.6);
  will-change: transform, opacity;
}
.front__about {
  flex: 8 1 36rem;                      /* up to 40rem wide (max-width) and the first to grow */
  min-width: 0;
  max-width: 40rem;
  font-family: var(--text-font);
  font-size: clamp(16px, 1.42vw, 21px);
  font-weight: 500;
  letter-spacing: -0.005em;
  -webkit-font-smoothing: antialiased;
  line-height: 1.34;
}
.front__about p { margin: 0 0 0.8em -0.079em; }   /* ink of the first letter (bearing 0.079em) on the margin */
.front__lead strong { font-weight: 700; background: var(--neon); padding: 0.06em 0.45em 0.1em; margin-left: -0.45em; box-decoration-break: clone; -webkit-box-decoration-break: clone; }
.front__lead { margin-bottom: 0.9em; }
.front__note { color: #8b8984; }
.front__muted { color: #8b8984; }

.front__index {
  grid-column: 4;
  margin: 0;
  padding: 0;
  list-style: none;
}
.front__index li {
  display: grid;
  grid-template-columns: 3.1rem 1fr;
  padding: 0.42rem 0;
  border-top: 1px solid rgba(27, 27, 25, 0.16);
}
.front__index { font-family: var(--text-font); font-weight: 500; font-size: 14px; }
.front__index li span { color: #8b8984; font-variant-numeric: tabular-nums; }

.front__go {
  position: absolute;
  left: 0;
  right: 0;
  bottom: calc(40px + 5mm);
  margin: 0 auto;
  width: min(18vw, 168px);
  height: 14px;
  color: var(--ink);
  opacity: calc(1 - var(--f, 0) * 3);
  animation: nudge 2.4s ease-in-out infinite;
}
/* a larger area to click, around the small V */
.front__go::before { content: ""; position: absolute; inset: -26px -40px; }
.front__go svg { display: block; width: 100%; height: 100%; overflow: visible; }
.front__go polyline {
  fill: none;
  stroke: currentColor;
  stroke-width: 9px;
  stroke-linejoin: miter;
  stroke-miterlimit: 10;
  vector-effect: non-scaling-stroke;
}
/* a yellow hairline along the upper edge of the V */
.front__go .front__go-hair { stroke: var(--neon); stroke-width: 1.5px; transform: translateY(-6px); }
.front__go:hover { animation-play-state: paused; transform: translateY(8px); }
.front__go:focus-visible { outline: 2px solid var(--ink); outline-offset: 12px; }

@keyframes nudge {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(13px); }
}

/* Walk panel: a black button at the bottom right. Open, the button and the box above it turn light grey with black text. */
.walk-panel {
  --serif: "KaTeX_Main", "STIX Two Text", "Latin Modern Roman", "Times New Roman", Georgia, serif;
  position: fixed;
  right: 24px;
  bottom: 24px;
  font-family: var(--serif);
  font-size: 16px;
  line-height: 1.42;
  color: #000;
  text-align: left;
}
.walk-panel summary {
  position: relative;
  isolation: isolate;
  display: block;
  cursor: pointer;
  list-style: none;
  padding: 6px 28px 7px;
  line-height: 16px;
  color: #fff;
  font-family: var(--text-font);
  font-size: 13px;
  font-weight: 500;
  letter-spacing: 0.01em;
  text-align: center;
  -webkit-backdrop-filter: blur(6px);
  backdrop-filter: blur(6px);
  transition: color 0.3s ease;
}
.walk-panel summary::-webkit-details-marker { display: none; }
/* two layers wipe past each other: the black one leaves to the right, the light one comes in from the left (and back) */
.walk-panel summary::before,
.walk-panel summary::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  transition: transform 0.38s cubic-bezier(0.65, 0, 0.2, 1);
}
.walk-panel summary::before { background: #000; transform: scaleX(1); transform-origin: right center; }
.walk-panel summary::after { background: rgba(232, 232, 228, 0.86); transform: scaleX(0); transform-origin: left center; }
/* light grey when open, or closed and hovered; black otherwise */
.walk-panel[open] summary,
.walk-panel summary:hover { color: #000; }
.walk-panel[open] summary::before,
.walk-panel summary:hover::before { transform: scaleX(0); }
.walk-panel[open] summary::after,
.walk-panel summary:hover::after { transform: scaleX(1); }
.walk-panel__body {
  position: absolute;
  right: 0;
  bottom: 100%;
  margin-bottom: 6px;
  padding: 1.1rem 1.2rem 1.2rem;
  background: rgba(232, 232, 228, 0.86);
  -webkit-backdrop-filter: blur(6px);
  backdrop-filter: blur(6px);
  color: #000;
  width: 31rem;
  max-width: calc(100vw - 48px);
  max-height: calc(100vh - 150px);
  overflow-y: auto;
  overscroll-behavior: contain;
  animation: wp-in 0.25s ease both;
}
@keyframes wp-in { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } }
.fp-text { margin: 0 0 0.85rem; color: #000; }
.fp-label { margin: 1.1rem 0 0.35rem; font-style: italic; font-weight: 700; color: #000; }
.fp-refs { font-size: 12px; line-height: 1.4; }
.fp-label:first-child { margin-top: 0; }
.walk-panel__row {
  display: grid;
  grid-template-columns: 5.4rem 1fr 2.6rem;
  align-items: center;
  gap: 0.6rem;
  margin-top: 0.5rem;
}
.walk-panel__row output { text-align: right; color: #000; font-variant-numeric: tabular-nums; }
.walk-panel__row output { white-space: nowrap; }
#walk-panel .walk-panel__row { grid-template-columns: 5.4rem 1fr 3.2rem; }
.walk-memo { margin: 0.25rem 0 0; font-size: 13px; line-height: 1.35; color: #000; }
.walk-memo[hidden] { display: none; }
.walk-panel input[type="range"] { width: 100%; accent-color: #000; }
.walk-panel input[type="checkbox"] { justify-self: start; margin: 0; accent-color: #000; }
.walk-panel select { font: inherit; font-size: 13px; padding: 2px 4px; background: #fff; color: #000; border: 1px solid #000; border-radius: 0; justify-self: start; }

/* the walk box lives on the front page: it fades with the front page (--f) and is not clickable once the page has dissolved */
.walk-panel { z-index: 30; opacity: calc(1 - var(--f, 0) * 3); }
body:not([data-view="front"]) .walk-panel { visibility: hidden; pointer-events: none; }
.walk-panel__body { width: 22rem; }
.walk-panel__body .fp-text { margin: 0.6rem 0 0.4rem; font-size: 14px; line-height: 1.35; }
.walk-panel__row[hidden] { display: none; }
.walk-panel__body .katex { font-size: 1em; }
.walk-panel select { width: 100%; }
.walk-panel button { margin-top: 0.7rem; margin-right: 0.5rem; font: inherit; font-size: 13px; padding: 3px 14px; background: #fff; color: #000; border: 1px solid #000; border-radius: 0; cursor: pointer; }
.walk-panel button:hover { background: #000; color: #fff; }
html:not(.js) .walk-panel { display: none; }
@media (max-width: 760px) {
  .walk-panel__body { width: calc(100vw - 32px); }
  .walk-panel { right: 12px; bottom: 10px; }
}

/* Without JavaScript only the front page exists. */
html:not(.js) .masthead,
html:not(.js) .peaks,
html:not(.js) .field-panel { display: none; }

@media (max-width: 760px) {
  .field-panel__body { width: calc(100vw - 32px); }
  .field-panel .katex-display > .katex { font-size: 0.78em; }
  .front { --g: 16px; font-size: 12.5px; }
  .front__body { margin-top: 3.5vh; }
  .front__about { font-size: 16px; }
  .masthead { left: 16px; right: 16px; }
  .field-panel { right: 12px; bottom: 10px; }
}

@media (prefers-reduced-motion: reduce) {
  .front__go { animation: none; }
  .peak { transition: none; }
}

/* ------------------------------------------------------------------ Research, Teaching, CV
   The front-page view (faint landscape from above) with the name as the small header of the landscape page,
   the navigation on the left and the content on the right. --sub (0..1) is set by main.js. */

.subpages {
  --hair: #888887;                 /* opaque, so that the parts of the hairline can overlap without showing */
  position: fixed;
  inset: 0;
  z-index: 19;
  pointer-events: none;
  opacity: var(--sub, 0);
}
.subpage {
  position: absolute;
  inset: 0;
  visibility: hidden;
  opacity: 0;
  transition: opacity 0.28s ease, visibility 0s linear 0.28s;     /* the page that is left fades out, then the new one fades in */
}
.subpage.is-active { visibility: visible; opacity: 1; transition: opacity 0.4s ease 0.2s, visibility 0s; }
@media (prefers-reduced-motion: reduce) { .subpage, .subpage.is-active { transition: none; } }
body[data-sub="on"] .subpage.is-active .subnav { pointer-events: auto; }

.subnav {
  position: absolute;
  left: calc(var(--g, 24px) + 40px);
  top: var(--sub-top, 150px);
  width: min(22rem, 70vw);
  font-family: var(--text-font);
  font-weight: 500;
  font-size: 14px;
  line-height: 1.55;
}
.subnav ol { margin: 0; padding: 0; list-style: none; }
.subnav__row { position: relative; }
.subnav__row a {
  display: grid;
  grid-template-columns: 3.1rem 1fr;
  padding: 0.42rem 0.55rem;
  color: var(--ink);
  text-decoration: none;
  transition: background-color 0.2s ease, padding-left 0.2s ease;
}
.subnav__n { color: #8b8984; font-variant-numeric: tabular-nums; transition: color 0.2s ease; }
.subnav__row.is-current { background: var(--neon); }
.subnav__row a:focus-visible { outline: 2px solid var(--ink); outline-offset: -2px; }

/* hover: the row is tinted grey, the text moves in, the hairline grows by 12 px and the arrow follows it */
.subnav__row:hover a { background: rgba(27, 27, 25, 0.07); padding-left: 0.9rem; }
.subnav__row.is-current a, .subnav__row.is-current:hover a { background: transparent; padding-left: 0.55rem; cursor: default; }   /* the present page has no hover action */

/* the hairline and the arrow are one drawing (pages.js) */
.subnav__hl {
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 1px;
  overflow: visible;
  fill: none;
  stroke: var(--hair);
  stroke-width: 1;
  pointer-events: none;
  transition: stroke 0.2s ease;
}
.subnav__hl line { shape-rendering: crispEdges; }
.subnav__arrow { overflow: visible; }

.subnav__head { transition: transform 0.2s ease; }
.subnav__head path { stroke-linecap: butt; stroke-linejoin: miter; }
.subnav__hl line { transition: stroke-width 0.15s ease, transform 0.15s ease; }
.subnav__row:hover .subnav__hl { stroke: var(--ink); }
.subnav__row:hover .subnav__head--right { transform: translateX(12px); }
.subnav__row:hover .subnav__head--left { transform: translateX(-12px); }
/* the present page: its hairline is 3 px thick */
.subnav__row.is-current .subnav__hl { stroke: var(--ink); }
.subnav__row.is-current .subnav__hl line { stroke-width: 3; transform: translateY(1px); }

.subpage__content {
  position: absolute;
  left: calc(var(--g, 24px) + 40px + min(22rem, 70vw) + 72px);
  right: var(--g, 24px);
  top: var(--sub-top, 150px);
  bottom: 0;
  padding: 0 0.5rem 6rem 0;
  overflow-y: auto;
  overscroll-behavior: contain;
  scrollbar-width: none;
  font-family: var(--text-font);
  font-weight: 500;
  font-size: 14px;
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
  max-width: 44rem;
}
.subpage__content::-webkit-scrollbar { display: none; }
body[data-sub="on"] .subpage.is-active .subpage__content { pointer-events: auto; }
/* every scrolling page: the text fades out at the top and at the bottom instead of being cut off (the CV list does the same on its own) */
.subpage:not(.subpage--cv) .subpage__content { top: calc(var(--sub-top, 150px) - 1.6rem); padding-top: 1.6rem;
  -webkit-mask-image: linear-gradient(to bottom, transparent 0, #000 2.2rem, #000 calc(100% - 2.2rem), transparent 100%);
  mask-image: linear-gradient(to bottom, transparent 0, #000 2.2rem, #000 calc(100% - 2.2rem), transparent 100%); }
.pg-h { margin: 2.2rem 0 0.9rem; font-size: 12px; font-weight: 600; letter-spacing: 0.08em; text-transform: uppercase; color: #8b8984; }
.pg-h:first-child { margin-top: 0.1rem; }
.pg-item { display: grid; grid-template-columns: 5.2rem 1fr; column-gap: 1rem; padding: 0.95rem 0 1.05rem; border-top: 1px solid rgba(27,27,25,0.14); }
.pg-item__when { color: #8b8984; font-variant-numeric: tabular-nums; }
.pg-item__title { margin: 0 0 0.35rem; font-size: 16px; font-weight: 700; line-height: 1.3; }
.pg-item__people { margin: -0.05rem 0 0.55rem; font-size: 16px; font-weight: 500; }
.pg-item__people b { font-weight: 600; }
.pg-item__abs { margin: 0; }
.pg-item__meta { margin: 0.25rem 0 0; }
.pg-item__links { margin: 0.55rem 0 0; }
.pg-item__links a { color: inherit; text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 2px; margin-right: 1.1rem; }
.pg-item__links a:hover { background: rgba(234,255,0,0.55); }
.pg-item.is-past, .pg-item.is-past .pg-item__title, .pg-item.is-past .pg-item__people, .pg-item.is-past .pg-item__people b, .pg-item.is-past .pg-item__links a { color: #9a988f; font-weight: inherit; }
.pg-item.is-past .pg-item__title { font-weight: 600; }
.pg-item.is-past .pg-item__people b { background: none; font-weight: 500; }
.pg-item.is-past .pg-item__abs { color: #9a988f; }

/* the name and the tagline stay as on the landscape page */
body[data-sub="on"] .masthead { visibility: visible; opacity: var(--sub, 0); }
body[data-page] .walk-panel { visibility: hidden; pointer-events: none; }


/* on Research, Teaching and CV the tagline under the name is not shown */
body[data-sub="on"] .masthead p { display: none; }

/* formulas on the pages: Computer Modern next to Inter, scaled to the x-height of the text */
.subpage__content .katex { font-size: 1.06em; }
.subpage__content .pg-item__title .katex { font-size: 1.08em; }
.subpage__content .katex-display { margin: 0.7em 0; overflow-x: auto; overflow-y: hidden; }
.pg-item.is-past .katex { color: inherit; }

/* EB Garamond (SIL Open Font License), for the text blocks: textFont: "garamond" in js/content.js and js/pagedata.js */
@font-face { font-family: "EB Garamond"; font-style: normal; font-weight: 400 800; font-display: swap; src: url("../fonts/EBGaramond-latin-ext.woff2") format("woff2"); unicode-range: U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF; }
@font-face { font-family: "EB Garamond"; font-style: normal; font-weight: 400 800; font-display: swap; src: url("../fonts/EBGaramond-latin.woff2") format("woff2"); unicode-range: U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD; }
@font-face { font-family: "EB Garamond"; font-style: italic; font-weight: 400 800; font-display: swap; src: url("../fonts/EBGaramond-italic-latin-ext.woff2") format("woff2"); unicode-range: U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF; }
@font-face { font-family: "EB Garamond"; font-style: italic; font-weight: 400 800; font-display: swap; src: url("../fonts/EBGaramond-italic-latin.woff2") format("woff2"); unicode-range: U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD; }

/* the text blocks in Garamond (class font-garamond, set by front.js and pages.js) */
.front__about.font-garamond { font-family: "EB Garamond", Garamond, "Iowan Old Style", Georgia, serif; font-weight: 400; font-size: clamp(18px, 1.62vw, 24px); letter-spacing: 0; line-height: 1.3; }
.front__about.font-garamond .front__lead strong { font-weight: 600; }
.front__about.font-garamond .katex { font-size: 1em; }
.subpage__content.font-garamond .pg-item__abs, .subpage__content.font-garamond .pg-item__meta { font-family: "EB Garamond", Garamond, "Iowan Old Style", Georgia, serif; font-weight: 400; font-size: 17px; line-height: 1.38; }
.subpage__content.font-garamond .pg-item__abs .katex, .subpage__content.font-garamond .pg-item__meta .katex { font-size: 1em; }

/* ------------------------------------------------------------------ CV page: tile map, list of stages, Game of Life */
.life-canvas { position: absolute; left: 0; top: 0; z-index: 0; pointer-events: none; touch-action: none; }
body[data-sub="on"] .subpage.is-active .life-canvas { pointer-events: auto; cursor: crosshair; }
body[data-sub="on"] .subpage.is-active .life-panel { pointer-events: auto; }
body[data-page] .walk-panel.life-panel { visibility: visible; opacity: 1; }
.life-panel { z-index: 30; }
.life-panel__body { width: 21rem; }
.life-panel__info { margin: 0.45rem 0 0; font-size: 13px; color: #444; }
.life-panel__buttons { margin-top: 0.3rem; }
.life-panel select, .life-panel input { grid-column: 2 / span 2; }
.life-panel .walk-panel__row { grid-template-columns: 6.4rem 1fr; }
.life-panel .walk-panel__row select { width: 100%; }
.subnav, .subpage__content { z-index: 1; }

.pg-map { position: relative; margin: 0 0 1.4rem; }
.pg-map__svg { display: block; width: 100%; height: auto; overflow: visible; }
.pg-map__land rect { fill: #262624; }
.pg-map__stage { cursor: pointer; outline: none; }
.pg-map__stage rect.pg-map__tile { fill: var(--neon); stroke: var(--ink); stroke-width: 1px; vector-effect: non-scaling-stroke; }
.pg-map__tip { position: absolute; transform: translate(-50%, -150%); padding: 0.15rem 0.5rem; background: var(--ink); color: #fff; font-size: 12px; white-space: pre; text-align: left; line-height: 1.5; pointer-events: none; opacity: 0; transition: opacity 0.12s ease; }
.pg-map__tip.is-on { opacity: 1; }
.pg-stage { cursor: pointer; transition: background-color 0.15s ease; }
.pg-stage.is-hot { background: rgba(234, 255, 0, 0.5); }
.pg-n { display: inline-block; min-width: 2.4rem; color: #8b8984; font-weight: 500; font-variant-numeric: tabular-nums; }
.pg-item.is-past .pg-n { color: #b0aea6; }

/* CV page: the map spans the width, the navigation sits below it and stays in view while the list scrolls */
.subpage--cv .subpage__content { left: calc(var(--g, 24px) + 40px); max-width: none; }
.pg-map { max-width: calc((100vh - var(--sub-top, 150px) - 13rem) * 150 / 59); min-width: min(100%, 520px); }
.pg-map__stage { transform-box: fill-box; transform-origin: center; transition: transform 0.15s ease; }
.pg-map__stage .pg-map__tile { transform: none !important; }
.pg-map__stage.is-hot, .pg-map__stage:focus-visible { transform: scale(2.2); }
.pg-map__edge { fill: var(--ink); }
.cv-cols { display: grid; grid-template-columns: min(22rem, 70vw) minmax(0, 44rem); column-gap: 72px; align-items: start; }
.cv-cols__nav { align-self: stretch; }
.subpage--cv .subnav { position: sticky; left: auto; top: 1rem; width: 100%; }

/* CV page, fixed layout: the map stays, only the list scrolls; map and list end at the same right edge */
.subpage--cv .subpage__content {
  --mapw: min(calc(100vw - var(--g, 24px) * 2 - 40px), 1128px, calc(48vh * 150 / 59));
  width: var(--mapw);
  right: auto;
  top: calc(var(--sub-top, 150px) - 56px);
  box-sizing: content-box;
  padding: 0 0 0 40px;                                   /* room for the arrow at the left end of the first row of the navigation */
  margin-left: -40px;
  overflow: hidden;
  display: flex;
  flex-direction: column;
}
.subpage--cv .pg-map { max-width: none; min-width: 0; width: 100%; flex: none; margin: 0 0 1.2rem; }
.subpage--cv .cv-cols { flex: 1; min-height: 0; grid-template-columns: min(22rem, 40%) minmax(0, 1fr); column-gap: 2.5rem; }
.subpage--cv .cv-cols__nav { align-self: start; }
.subpage--cv .subnav { position: static; width: 100%; }
.subpage--cv .pg-stages { height: 100%; overflow-y: auto; overscroll-behavior: contain; scrollbar-width: none; padding-bottom: 4rem; }
.subpage--cv .pg-stages::-webkit-scrollbar { display: none; }
body[data-sub="on"] .subpage.is-active .pg-stages { pointer-events: auto; }

.pg-city { margin-left: 0.7rem; font-size: 13px; font-weight: 500; color: #8b8984; }
.pg-item.is-past .pg-city { color: #b0aea6; }

/* the magnified tile is a copy in the top layer; the tile itself keeps its size */
.pg-map__stage.is-hot, .pg-map__stage:focus-visible { transform: none; }
.pg-map__lift { fill: var(--neon); stroke: var(--ink); stroke-width: 1px; vector-effect: non-scaling-stroke; opacity: 0; transform-box: fill-box; transform-origin: center; transition: transform 0.15s ease, opacity 0.1s ease; }
.pg-map__lift.is-hot { opacity: 1; transform: scale(2.2); }

/* CV list: the top and the bottom fade out, the text of an entry is indented from its hover field */
.subpage--cv .pg-stages { margin-top: -1.6rem; padding-top: 1.6rem; height: calc(100% + 1.6rem);
  -webkit-mask-image: linear-gradient(to bottom, transparent 0, #000 2.2rem, #000 calc(100% - 2.2rem), transparent 100%);
  mask-image: linear-gradient(to bottom, transparent 0, #000 2.2rem, #000 calc(100% - 2.2rem), transparent 100%); }
.pg-stage { padding-left: 0.9rem; padding-right: 0.9rem; }
.pg-pdf { display: grid; grid-template-columns: 3.1rem 1fr; box-sizing: border-box; width: 100%; margin: calc(0.9rem + 7mm) 0 0; padding: 0.42rem 0.55rem; font-family: var(--text-font); font-size: 14px; font-weight: 500; line-height: 1.55; color: var(--ink); background: var(--neon); border-top: 1px solid var(--ink); text-decoration: none; transition: background-color 0.2s ease, color 0.2s ease, padding-left 0.2s ease; }
.pg-pdf__n { color: rgba(27, 27, 25, 0.55); }
.pg-pdf:hover { background: var(--ink); color: var(--neon); padding-left: 0.9rem; }
.pg-pdf:hover .pg-pdf__n { color: var(--neon); }
body[data-sub="on"] .subpage.is-active .pg-pdf { pointer-events: auto; }

/* photo next to the text block of the front page: its natural size is set by front.js (as high as the text, at most 24rem wide);
   it shrinks only when its own row is narrower */
.front__photo { flex: 0 1 17rem; min-width: 0; width: auto; height: auto; display: block; }

.front__index:empty { display: none; }

/* contact information (front page, right column) */
.front__contact { flex: 1 1 17rem; min-width: 0; max-width: 22rem; margin-left: var(--contact-shift, 34px); font-family: var(--text-font); font-weight: 500; font-size: 14px; line-height: 1.5; border-top: 1px solid rgba(27, 27, 25, 0.16); }
.front__contact p { margin: 0; }
.front__contact-h { padding: 0.42rem 0 0.55rem; color: #8b8984; border-bottom: 1px solid rgba(27, 27, 25, 0.16); margin-bottom: 0.6rem !important; }
.front__contact-t { margin-bottom: 0.8rem !important; }
.front__contact a { color: inherit; text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 3px; }
.front__contact a:hover { background: rgba(234, 255, 0, 0.7); }
.front__contact.is-below { position: relative; left: calc(-1 * var(--contact-shift, 34px)); }       /* at the start of a row, not beside the photo */
.pg-item__abs { white-space: pre-line; }

/* list of the heights of the flags, bottom left (peaks.js) */
.alt { position: fixed; left: 24px; bottom: 24px; width: 19.5rem; pointer-events: auto; font-family: var(--text-font); font-size: 13px; font-weight: 500; line-height: 1.5; isolation: isolate; }
.alt__row:first-child { border-top: 0; }
.alt__row { display: grid; grid-template-columns: 2.5rem 1fr 64px 3.6rem; column-gap: 0.4rem; align-items: center; padding: 0.3rem 0.55rem; color: var(--ink); text-decoration: none; border-top: 1px solid rgba(27, 27, 25, 0.4); transition: background-color 0.2s ease; }
.alt__row:hover, .alt__row.is-hot, .alt__row:focus-visible { background: var(--neon); outline: none; }
.alt__n { color: #3a3935; font-variant-numeric: tabular-nums; }
.alt__v { text-align: right; font-variant-numeric: tabular-nums; }
.alt__spark { width: 64px; height: 14px; overflow: visible; }
.alt__spark path { fill: none; stroke: var(--ink); stroke-width: 1; stroke-linejoin: round; vector-effect: non-scaling-stroke; }

/* ---- Reading order and fit, on every screen size ----
   The front-page text scrolls inside its own box when it does not fit between the name and the bottom controls;
   when it fits nothing changes. main.js passes the scroll to this box first and starts the transition at its end. */
html, body { overscroll-behavior-y: none; }
.front__body {
  flex: 1 1 auto;
  min-height: 0;
  align-content: start;
  margin-left: -12px; margin-right: -12px; margin-bottom: 56px;          /* the padding makes room for the ribbon and the first letters that stand left of the margin */
  padding: 0 12px 3rem;
  overflow-x: hidden;
  overflow-y: auto;
  overscroll-behavior: contain;
  scrollbar-width: none;
}
.front__body::-webkit-scrollbar { display: none; }
.front__body.has-more {
  -webkit-mask-image: linear-gradient(to bottom, #000 calc(100% - 3rem), transparent);
  mask-image: linear-gradient(to bottom, #000 calc(100% - 3rem), transparent);
}
/* 100dvh is the visible height while a browser toolbar is showing */
.walk-panel__body, .field-panel__body { max-height: calc(100vh - 150px); max-height: calc(100dvh - 150px); }

/* ---- Research, Teaching, CV: where the two columns do not fit, one scrolling column (navigation first, then the content) ---- */
@media (max-width: 880px) {
  .subpage {
    display: flex;
    flex-direction: column;
    overflow-x: hidden;
    overflow-y: auto;
    overscroll-behavior: contain;
    scrollbar-width: none;
    padding: var(--sub-top, 110px) 16px 7rem;
    -webkit-mask-image: linear-gradient(to bottom, transparent 0, transparent calc(var(--sub-top, 110px) - 26px), #000 calc(var(--sub-top, 110px) - 4px));
    mask-image: linear-gradient(to bottom, transparent 0, transparent calc(var(--sub-top, 110px) - 26px), #000 calc(var(--sub-top, 110px) - 4px));
  }
  .subpage::-webkit-scrollbar { display: none; }
  .subpage > * { flex: none; }
  .subpage > .subnav { order: -1; }
  body[data-sub="on"] .subpage.is-active { pointer-events: auto; }
  .subnav { position: relative; left: auto; top: auto; margin-left: 28px; width: calc(100% - 56px); }       /* the arrows of the hairlines reach 26 px beyond both ends */
  .subpage__content,
  .subpage:not(.subpage--cv) .subpage__content {
    position: relative;
    left: auto; right: auto; top: auto; bottom: auto;
    display: block;
    max-width: none;
    margin: 2.4rem 0 0;
    padding: 0;
    overflow: visible;
    -webkit-mask-image: none;
    mask-image: none;
  }
  .pg-item { grid-template-columns: 1fr; row-gap: 0.15rem; }

  /* CV: navigation, map, list */
  .subpage--cv .subpage__content { position: relative; left: auto; top: auto; width: auto; margin: 0; padding: 0; overflow: visible; display: flex; flex-direction: column; }
  .subpage--cv .cv-cols { display: contents; }
  .subpage--cv .cv-cols__nav { order: 1; }
  .subpage--cv .subnav { margin-left: 28px; width: calc(100% - 56px); }
  .subpage--cv .pg-map { order: 2; margin: 2.4rem 0 1.4rem; }
  .subpage--cv .pg-stages { order: 3; height: auto; margin-top: 0; padding: 0 0 2rem; overflow: visible; -webkit-mask-image: none; mask-image: none; }
  .life-canvas { position: fixed; }
}
/* a finger that paints cells would fight with the scrolling of the page */
@media (max-width: 880px) and (pointer: coarse) {
  body[data-sub="on"] .subpage.is-active .life-canvas { pointer-events: none; }
}

/* ---- Front page on narrow screens ---- */
@media (max-width: 760px) {
  /* the list of heights above the button at the bottom right */
  .alt { display: block; left: 12px; bottom: 52px; width: min(19.5rem, calc(100vw - 24px)); }
  /* the V in the middle of the space between the left margin and the Random walk button (141 px wide, 12 px from the edge) */
  .front__go { --gow: min(22vw, 84px); width: var(--gow); height: 12px; right: auto; margin: 0; bottom: 40px; left: calc(50vw - 68.5px - var(--gow) / 2); }
}

/* ---- CV navigation on narrow screens ---- */
@media (max-width: 880px) {
  .subpage--cv .cv-cols__nav { align-self: stretch; }
  .subpage--cv .cv-cols__nav .pg-pdf { margin-left: 28px; width: calc(100% - 56px); }
}

/* the line below the title (venue, advisors) and the abstract that follows it */
.pg-item__meta + .pg-item__meta { margin-top: 0.15em; }
.pg-item__meta + .pg-item__abs { margin-top: 0.7em; }