/* ==========================================================================
   Evis Plaku: the engineering notebook
   1. Fonts                 6. Links and highlighter   11. Home: doors
   2. Tokens: day           7. Buttons and tags        12. Home: moves and notes
   3. Tokens: night         8. Header and tabs         13. Footer
   4. Theme mapping         9. Home: hero              14. Responsive
   5. Paper and type       10. Home: the board         15. Motion
  16. Inner pages          18. Publications            20. CV
  17. Research directions  19. About                   21. Contact
  22. Teaching             23. Mentoring               24. Initiatives
  25. Writing              26. Manuscript (Ancient Algorithms)
  28. Filter chips         29. About: one page         30. Teaching header
  31. Teaching & Mentoring  32. About: tracks and thread
  33. Initiatives: reach and RoboTech  34. Home: now and closing
  35. Refinement: ink panels, doors, rhythm
  36. Home: roles line, door pills, milestone
  37. Research: dissertation, media, invitation
  38. Teaching: philosophy loop
   ========================================================================== */

/* 1. Fonts (self-hosted, SIL Open Font License) ---------------------------- */

@font-face {
  font-family: "Source Serif 4";
  src: url("../assets/fonts/source-serif-4.woff2") format("woff2");
  font-weight: 200 900;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "Source Serif 4";
  src: url("../assets/fonts/source-serif-4-italic.woff2") format("woff2");
  font-weight: 200 900;
  font-style: italic;
  font-display: swap;
}

@font-face {
  font-family: "IBM Plex Sans";
  src: url("../assets/fonts/ibm-plex-sans.woff2") format("woff2");
  font-weight: 100 700;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "IBM Plex Mono";
  src: url("../assets/fonts/ibm-plex-mono.woff2") format("woff2");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

:root {
  --ev-serif: "Source Serif 4", Georgia, "Times New Roman", serif;
  --ev-sans: "IBM Plex Sans", "Segoe UI", system-ui, sans-serif;
  --ev-mono: "IBM Plex Mono", ui-monospace, Consolas, monospace;
  --md-text-font: "IBM Plex Sans";
  --md-code-font: "IBM Plex Mono";
  --ev-radius: 10px;
  --ev-r: 14px;        /* cards and panels */
  --ev-r-sm: 8px;      /* icon tiles, small boxes */
  --ev-grid-size: 24px;
}

/* 2. Tokens: day notebook ---------------------------------------------------
   Pale engineering-pad paper, navy ink, a mint highlighter,
   and a red pen kept for chess annotations only. */

[data-md-color-scheme="default"] {
  --ev-paper: #F3F7F5;
  --ev-paper-glass: rgba(243, 247, 245, 0.86);
  --ev-sheet: #FFFFFF;
  --ev-grid: rgba(11, 110, 99, 0.05);
  --ev-line: #D6E1DD;
  --ev-line-strong: #B7C8C2;

  --ev-ink: #16213A;
  --ev-ink-2: #3A4660;
  --ev-muted: #5B6577;

  --ev-mint: #B9F5E9;
  --ev-mint-soft: #E3F6F1;
  --ev-teal-ink: #0B6E63;
  --ev-oxblood: #8B2E2E;

  --ev-board-dark: #E3F1ED;
  --ev-board-seen: #CCDAD5;
  --ev-board-light: #FFFFFF;

  --ev-tag-program-bg: #E3F6F1;  --ev-tag-program: #0B5E55;
  --ev-tag-paper-bg: #E9EDFB;    --ev-tag-paper: #2C3E8F;
  --ev-tag-talk-bg: #F8ECE9;     --ev-tag-talk: #8B2E2E;

  /* Site-wide meaning of the three accents */
  --ev-research: var(--ev-tag-paper);      --ev-research-bg: var(--ev-tag-paper-bg);
  --ev-learning: var(--ev-tag-program);    --ev-learning-bg: var(--ev-tag-program-bg);
  --ev-building: var(--ev-tag-talk);       --ev-building-bg: var(--ev-tag-talk-bg);

  /* The ink panel: one focal element per page */
  --ev-panel: #16213A;
  --ev-panel-ink: #F3F7F5;
  --ev-panel-muted: #B9C3D6;
  --ev-panel-line: rgba(243, 247, 245, 0.16);
}

/* 3. Tokens: night notebook ------------------------------------------------ */

[data-md-color-scheme="slate"] {
  --ev-paper: #121C30;
  --ev-paper-glass: rgba(18, 28, 48, 0.86);
  --ev-sheet: #18243D;
  --ev-grid: rgba(185, 245, 233, 0.035);
  --ev-line: #26344F;
  --ev-line-strong: #34456A;

  --ev-ink: #E9EEF6;
  --ev-ink-2: #C3CCDD;
  --ev-muted: #93A0B8;

  --ev-mint: #B9F5E9;
  --ev-mint-soft: rgba(185, 245, 233, 0.1);
  --ev-teal-ink: #7FE0CF;
  --ev-oxblood: #F09A8E;

  --ev-board-dark: #1F3050;
  --ev-board-seen: #2C3F63;
  --ev-board-light: #18243D;

  --ev-tag-program-bg: rgba(127, 224, 207, 0.14);  --ev-tag-program: #8FE7D8;
  --ev-tag-paper-bg: rgba(150, 170, 255, 0.14);    --ev-tag-paper: #B8C5FF;
  --ev-tag-talk-bg: rgba(240, 154, 142, 0.14);     --ev-tag-talk: #F5B3AA;

  --ev-research: var(--ev-tag-paper);      --ev-research-bg: var(--ev-tag-paper-bg);
  --ev-learning: var(--ev-tag-program);    --ev-learning-bg: var(--ev-tag-program-bg);
  --ev-building: var(--ev-tag-talk);       --ev-building-bg: var(--ev-tag-talk-bg);

  --ev-panel: #0B1222;
  --ev-panel-ink: #E9EEF6;
  --ev-panel-muted: #A9B5CB;
  --ev-panel-line: rgba(233, 238, 246, 0.14);
}

/* 4. Theme mapping: Zensical variables read from our tokens ---------------- */

[data-md-color-scheme="default"],
[data-md-color-scheme="slate"] {
  --md-default-bg-color: var(--ev-paper);
  --md-default-bg-color--light: var(--ev-paper-glass);
  --md-default-fg-color: var(--ev-ink);
  --md-default-fg-color--light: var(--ev-muted);
  --md-default-fg-color--lighter: var(--ev-line-strong);
  --md-default-fg-color--lightest: var(--ev-line);
  --md-typeset-color: var(--ev-ink);
  --md-typeset-a-color: var(--ev-teal-ink);
  --md-typeset-mark-color: transparent;
  --md-primary-fg-color: var(--ev-ink);
  --md-primary-bg-color: var(--ev-paper);
  --md-accent-fg-color: var(--ev-teal-ink);
  --md-accent-fg-color--transparent: var(--ev-mint-soft);
  --md-code-bg-color: var(--ev-sheet);
  --md-footer-bg-color: var(--ev-paper);
  --md-footer-fg-color: var(--ev-muted);
}

/* 5. Paper and type -------------------------------------------------------- */

body {
  background-color: var(--ev-paper);
}

/* The notebook grid: full strength around the page header, then it fades
   to a whisper behind the reading content. */
.md-main {
  position: relative;
  isolation: isolate;
}

.md-main::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background-image:
    linear-gradient(var(--ev-grid) 1px, transparent 1px),
    linear-gradient(90deg, var(--ev-grid) 1px, transparent 1px);
  background-size: var(--ev-grid-size) var(--ev-grid-size);
  background-position: -1px -1px;
  -webkit-mask-image: linear-gradient(#000 0, #000 30rem, rgba(0, 0, 0, 0.3) 46rem, rgba(0, 0, 0, 0.3) 100%);
  mask-image: linear-gradient(#000 0, #000 30rem, rgba(0, 0, 0, 0.3) 46rem, rgba(0, 0, 0, 0.3) 100%);
  pointer-events: none;
}

.md-typeset {
  font-family: var(--ev-serif);
  font-size: 0.9rem;
  line-height: 1.65;
  font-optical-sizing: auto;
}

.md-typeset h1,
.md-typeset h2,
.md-typeset h3,
.md-typeset h4 {
  font-family: var(--ev-sans);
  color: var(--ev-ink);
  letter-spacing: -0.015em;
}

.md-typeset h1 {
  font-size: 1.9rem;
  font-weight: 600;
  line-height: 1.12;
}

.md-typeset h2 {
  font-size: 1.3rem;
  font-weight: 600;
  line-height: 1.25;
}

.md-typeset h3 {
  font-size: 0.95rem;
  font-weight: 600;
  line-height: 1.35;
}

.md-typeset code,
.md-typeset pre {
  font-family: var(--ev-mono);
}

/* 6. Links and highlighter ------------------------------------------------- */

.md-typeset a {
  text-decoration: underline;
  text-decoration-color: color-mix(in srgb, var(--ev-teal-ink) 40%, transparent);
  text-decoration-thickness: 1px;
  text-underline-offset: 0.2em;
}

.md-typeset a:hover {
  text-decoration-color: currentColor;
}

.md-typeset a:focus-visible {
  outline: 2px solid var(--ev-teal-ink);
  outline-offset: 3px;
  border-radius: 4px;
}

/* The highlighter. Write ==words== in Markdown. */
.md-typeset mark {
  color: inherit;
  background-color: transparent;
  background-image: linear-gradient(
    100deg,
    rgba(185, 245, 233, 0) 0.5%,
    rgba(185, 245, 233, 0.95) 2.5%,
    #A4F0E0 14%,
    rgba(185, 245, 233, 0.9) 86%,
    rgba(185, 245, 233, 0.4) 97%,
    rgba(185, 245, 233, 0) 99.5%
  );
  background-repeat: no-repeat;
  background-size: 100% 58%;
  background-position: 0 84%;
  padding: 0 0.22em 0 0.14em;
  margin: 0 -0.04em;
  border-radius: 0.35em 0.15em 0.45em 0.2em;
  -webkit-box-decoration-break: clone;
  box-decoration-break: clone;
}

[data-md-color-scheme="slate"] .md-typeset mark {
  background-image: linear-gradient(
    100deg,
    rgba(185, 245, 233, 0) 0.5%,
    rgba(185, 245, 233, 0.3) 3%,
    rgba(185, 245, 233, 0.3) 97%,
    rgba(185, 245, 233, 0) 99.5%
  );
  background-size: 100% 40%;
  background-position: 0 92%;
}

.md-typeset a.ev-textlink {
  font-family: var(--ev-sans);
  font-size: 0.78rem;
  font-weight: 600;
  color: var(--ev-ink);
  text-decoration-color: var(--ev-teal-ink);
  text-decoration-thickness: 2px;
  text-underline-offset: 0.35em;
}

.md-typeset a.ev-textlink:hover {
  color: var(--ev-teal-ink);
}

/* 7. Buttons and tags ------------------------------------------------------ */

.md-typeset a.ev-btn {
  display: inline-flex;
  align-items: center;
  min-height: 2.3rem;
  padding: 0.5rem 1.1rem;
  border: 1px solid transparent;
  border-radius: var(--ev-radius);
  font-family: var(--ev-sans);
  font-size: 0.78rem;
  font-weight: 600;
  line-height: 1.2;
  white-space: nowrap;
  text-decoration: none;
  transition: background-color 0.15s ease, border-color 0.15s ease, color 0.15s ease;
}

.md-typeset a.ev-btn--primary,
.md-typeset a.ev-btn--primary:hover {
  background-color: var(--ev-ink);
  color: var(--ev-paper);
}

.md-typeset a.ev-btn--primary:hover {
  background-color: var(--ev-ink-2);
}

.md-typeset a.ev-btn--ghost {
  border-color: var(--ev-line-strong);
  background-color: var(--ev-sheet);
  color: var(--ev-ink);
}

.md-typeset a.ev-btn--ghost:hover {
  border-color: var(--ev-teal-ink);
  color: var(--ev-teal-ink);
}

.md-typeset .ev-tag {
  display: inline-block;
  padding: 0.12rem 0.55rem;
  border-radius: 999px;
  font-family: var(--ev-sans);
  font-size: 0.7rem;
  font-weight: 600;
  line-height: 1.5;
  white-space: nowrap;
}

.md-typeset .ev-tag--program { background-color: var(--ev-building-bg); color: var(--ev-building); }
.md-typeset .ev-tag--paper   { background-color: var(--ev-research-bg); color: var(--ev-research); }
.md-typeset .ev-tag--talk    { background-color: var(--ev-research-bg); color: var(--ev-research); }

/* 8. Header and tabs ------------------------------------------------------- */

.md-header {
  box-shadow: 0 1px 0 var(--ev-line);
}

.md-header__title {
  font-weight: 600;
  letter-spacing: -0.01em;
}

.md-header__button.md-logo {
  color: var(--ev-teal-ink);
}

.md-tabs {
  background-color: var(--ev-paper-glass);
  -webkit-backdrop-filter: blur(8px);
  backdrop-filter: blur(8px);
}

.md-tabs__link {
  font-size: 0.72rem;
  font-weight: 500;
}

/* 9. Home: hero ------------------------------------------------------------ */

.md-typeset .ev-hero {
  display: grid;
  grid-template-columns: minmax(0, 1.55fr) minmax(0, 1fr);
  gap: 3rem;
  align-items: center;
  margin: -0.6rem 0 3.6rem;
}

.md-typeset .ev-kicker {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  margin: 0 0 1.1rem;
  font-family: var(--ev-sans);
  font-size: 0.74rem;
  font-weight: 500;
  color: var(--ev-teal-ink);
}

.md-typeset .ev-kicker::before {
  content: "";
  flex: none;
  width: 0.45rem;
  height: 0.45rem;
  border-radius: 50%;
  background-color: var(--ev-teal-ink);
  box-shadow: 0 0 0 0.25rem var(--ev-mint-soft);
}

.md-typeset .ev-hero h1 {
  margin: 0;
  font-size: clamp(2rem, 1.3rem + 1.7vw, 2.55rem);
  font-weight: 600;
  line-height: 1.06;
  letter-spacing: -0.032em;
}

.md-typeset .ev-hero h1 .headerlink {
  display: none;
}

.md-typeset .ev-hero h1 mark {
  animation: ev-draw 0.9s 0.35s cubic-bezier(0.2, 0.7, 0.2, 1) both;
}

.md-typeset .ev-lead {
  max-width: 33em;
  margin: 1.2rem 0 0;
  font-size: 0.95rem;
  line-height: 1.65;
  color: var(--ev-ink-2);
}

.md-typeset .ev-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 0.7rem;
  margin: 1.6rem 0 0;
}

/* 10. Home: the board -------------------------------------------------------
   A knight crosses the board one move at a time. Everything already visited
   is muted; only the knight and its last few moves are highlighted. Visitors
   with reduced motion see the finished board. */

.md-typeset figure.ev-board {
  width: 100%;
  max-width: 19.5rem;
  margin: 0 0 0 auto;
}

.ev-board__svg {
  --ev-step: 0.075s;
  --ev-t0: 0.6s;
  display: block;
  width: 100%;
  height: auto;
  overflow: visible;
}

.ev-board__svg rect { shape-rendering: crispEdges; }

.ev-board__dark rect {
  fill: var(--ev-board-dark);
  opacity: 0.75;
}

.ev-board__svg rect.ev-board__edge {
  fill: none;
  stroke: var(--ev-line-strong);
  stroke-width: 1;
}

.ev-board__files text,
.ev-board__ranks text {
  font-family: var(--ev-sans);
  font-size: 10px;
  font-weight: 500;
  fill: var(--ev-muted);
  text-anchor: middle;
  opacity: 0.35;
}

/* Visited squares: a brief mint flash when the knight lands, then muted */
.ev-board__seen rect {
  fill: var(--ev-board-seen);
  opacity: 0.5;
  animation: ev-seen calc(var(--ev-step) * 7) calc(var(--ev-t0) + var(--i) * var(--ev-step)) linear both;
}

@keyframes ev-seen {
  0%   { fill: var(--ev-mint); opacity: 0; }
  5%   { fill: var(--ev-mint); opacity: 0.95; }
  100% { fill: var(--ev-board-seen); opacity: 0.5; }
}

/* Past moves fade to grey; the last four stay teal */
.ev-board__path line {
  fill: none;
  stroke: var(--ev-line-strong);
  stroke-width: 1;
  stroke-linecap: round;
  stroke-dasharray: 1;
  stroke-dashoffset: 0;
  animation: ev-trail calc(var(--ev-step) * 5) calc(var(--ev-t0) + var(--i) * var(--ev-step)) linear both;
}

.ev-board__path line.is-recent {
  stroke: var(--ev-teal-ink);
  stroke-width: 1.8;
  animation-name: ev-trail-keep;
}

@keyframes ev-trail {
  0%   { stroke-dashoffset: 1; stroke: var(--ev-teal-ink); stroke-width: 1.8; }
  20%  { stroke-dashoffset: 0; stroke: var(--ev-teal-ink); stroke-width: 1.8; }
  55%  { stroke: var(--ev-teal-ink); stroke-width: 1.8; }
  100% { stroke-dashoffset: 0; stroke: var(--ev-line-strong); stroke-width: 1; }
}

@keyframes ev-trail-keep {
  0%   { stroke-dashoffset: 1; }
  20%  { stroke-dashoffset: 0; }
  100% { stroke-dashoffset: 0; }
}

.ev-board__start {
  fill: var(--ev-sheet);
  stroke: var(--ev-muted);
  stroke-width: 1.2;
}

/* The knight: the one highlighted thing on the board */
.ev-board__knight {
  offset-rotate: 0deg;
  offset-distance: 100%;
  animation: ev-knight calc(var(--ev-step) * 63) var(--ev-t0) linear both;
}

@keyframes ev-knight {
  from { offset-distance: 0%; }
  to   { offset-distance: 100%; }
}

.ev-board__halo {
  fill: var(--ev-mint);
  opacity: 0.85;
}

.ev-board__piece {
  fill: var(--ev-ink);
}

.md-typeset .ev-board figcaption {
  max-width: none;
  margin: 0.9rem 0 0 1.6rem;
  padding-left: 0.8rem;
  border-left: 2px solid var(--ev-mint);
  font-size: 0.74rem;
  font-style: italic;
  line-height: 1.5;
  text-align: left;
  color: var(--ev-muted);
}

/* 11. Home: doors ---------------------------------------------------------- */

.md-typeset .ev-section {
  margin: 0 0 4rem;
}

.md-typeset .ev-section h2 {
  margin: 0 0 1.1rem;
}

.md-typeset .ev-section .headerlink {
  display: none;
}

.md-typeset .ev-doors {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  border: 1px solid var(--ev-line);
  border-radius: var(--ev-r);
  background-color: var(--ev-sheet);
}

.md-typeset .ev-door {
  display: flex;
  flex-direction: column;
  padding: 1.5rem 1.5rem 1.4rem;
}

.md-typeset .ev-door + .ev-door {
  border-left: 1px solid var(--ev-line);
}

.md-typeset .ev-door > p:first-child {
  margin: 0 0 1rem;
}

.md-typeset .ev-door .twemoji.ev-door__piece {
  display: grid;
  place-items: center;
  width: 2.4rem;
  height: 2.4rem;
  border-radius: 50%;
  background-color: var(--ev-mint-soft);
  color: var(--ev-teal-ink);
}

.md-typeset .ev-door .ev-door__piece svg {
  width: 1.25rem;
  height: 1.25rem;
  max-height: none;
}

.md-typeset .ev-door h3 {
  margin: 0 0 0.35rem;
  font-size: 1rem;
}

.md-typeset .ev-door > p:not(:first-child) {
  margin: 0 0 1rem;
  font-size: 0.8rem;
  line-height: 1.55;
  color: var(--ev-muted);
}

.md-typeset .ev-door > ul {
  margin: auto 0 0;
  padding: 0.9rem 0 0;
  border-top: 1px solid var(--ev-line);
  list-style: none;
}

.md-typeset .ev-door > ul li {
  margin: 0;
  padding: 0.12rem 0;
}

.md-typeset .ev-door > ul a {
  font-family: var(--ev-sans);
  font-size: 0.76rem;
  font-weight: 600;
  color: var(--ev-ink);
  text-decoration: none;
}

.md-typeset .ev-door > ul a:hover {
  color: var(--ev-teal-ink);
  text-decoration: underline;
  text-decoration-color: var(--ev-teal-ink);
}

/* 12. Home: recent moves and notes ----------------------------------------- */

.md-typeset ol.ev-moves {
  margin: 0;
  padding: 0;
  list-style: none;
  border-top: 1px solid var(--ev-line-strong);
}

.md-typeset ol.ev-moves li {
  display: grid;
  grid-template-columns: 4.6rem 4.8rem minmax(0, 1fr);
  gap: 0.2rem 0.9rem;
  align-items: baseline;
  margin: 0;
  padding: 0.85rem 0;
  border-bottom: 1px solid var(--ev-line);
}

.md-typeset .ev-moves time,
.md-typeset .ev-moves__when {
  font-family: var(--ev-sans);
  font-size: 0.72rem;
  font-weight: 600;
  color: var(--ev-ink);
  font-variant-numeric: tabular-nums;
}

.md-typeset .ev-moves .ev-tag {
  justify-self: start;
}

.md-typeset .ev-moves p {
  margin: 0;
  font-size: 0.82rem;
  line-height: 1.55;
  color: var(--ev-ink-2);
}

/* 13. Footer --------------------------------------------------------------- */

.md-footer,
.md-footer-meta {
  background-color: transparent;
  color: var(--ev-muted);
}

.md-footer-meta {
  border-top: 1px solid var(--ev-line);
  font-family: var(--ev-sans);
}

.md-footer .md-social__link {
  color: var(--ev-ink-2);
}

.md-footer .md-social__link:hover {
  color: var(--ev-teal-ink);
}

/* 14. Responsive ----------------------------------------------------------- */

@media screen and (max-width: 60em) {
  .md-typeset .ev-hero {
    grid-template-columns: minmax(0, 1fr);
    gap: 2.4rem;
    margin-bottom: 3.2rem;
  }

  .md-typeset figure.ev-board {
    margin: 0;
  }
}

@media screen and (max-width: 44.9375em) {
  .md-typeset .ev-doors {
    grid-template-columns: minmax(0, 1fr);
  }

  .md-typeset .ev-door + .ev-door {
    border-left: 0;
    border-top: 1px solid var(--ev-line);
  }

  .md-typeset ol.ev-moves li {
    grid-template-columns: auto minmax(0, 1fr);
  }

  .md-typeset .ev-moves p {
    grid-column: 1 / -1;
  }

  .md-typeset .ev-board figcaption {
    margin-left: 0;
  }
}

/* 15. Motion --------------------------------------------------------------- */

@keyframes ev-draw {
  from { background-size: 0% 58%; }
  to   { background-size: 100% 58%; }
}

@keyframes ev-tour {
  from { stroke-dashoffset: 1; }
  to   { stroke-dashoffset: 0; }
}

@keyframes ev-arrive {
  from { opacity: 0; transform: scale(0.6); }
  to   { opacity: 1; transform: scale(1); }
}

@media (prefers-reduced-motion: reduce) {
  .md-typeset .ev-hero h1 mark,
  .ev-board__path line,
  .ev-board__seen rect,
  .ev-board__knight {
    animation: none;
  }

  .md-typeset a.ev-btn {
    transition: none;
  }
}

/* 16. Inner pages ---------------------------------------------------------- */

.md-typeset .ev-pagehead {
  margin: 0 0 2.4rem;
  padding-bottom: 1.8rem;
  border-bottom: 1px solid var(--ev-line);
}

.md-typeset .ev-pagehead h1 {
  margin: 0 0 0.9rem;
  font-size: clamp(1.8rem, 1.3rem + 1.6vw, 2.4rem);
  line-height: 1.08;
  letter-spacing: -0.03em;
}

.md-typeset .ev-pagehead h1 .headerlink {
  display: none;
}

.md-typeset .ev-pagehead .ev-lead {
  margin-top: 0;
}

.md-typeset .ev-pagehead .ev-actions {
  margin-top: 1.4rem;
}

.md-typeset h2 {
  margin: 2.6rem 0 1rem;
}

.md-typeset .ev-note {
  max-width: 36em;
  padding-left: 0.9rem;
  border-left: 2px solid var(--ev-mint);
  font-size: 0.78rem;
  font-style: italic;
  line-height: 1.6;
  color: var(--ev-muted);
}

.md-typeset .ev-callout,
.md-typeset .ev-empty {
  margin: 2.6rem 0 1rem;
  padding: 1.2rem 1.4rem 1.1rem;
  border-radius: var(--ev-r);
}

.md-typeset h2 + .ev-empty,
.md-typeset h2 + .ev-callout {
  margin-top: 0;
}

.md-typeset .ev-callout {
  background-color: var(--ev-mint-soft);
  box-shadow: inset 3px 0 0 var(--ev-teal-ink);
}

.md-typeset .ev-empty {
  border: 1px dashed var(--ev-line-strong);
  background-color: var(--ev-sheet);
}

.md-typeset .ev-callout p,
.md-typeset .ev-empty p {
  margin: 0 0 0.8rem;
  font-size: 0.86rem;
}

.md-typeset .ev-callout p:last-child,
.md-typeset .ev-empty p:last-child {
  margin: 0;
}

.md-typeset .ev-callout strong,
.md-typeset .ev-empty strong {
  font-family: var(--ev-sans);
  font-weight: 600;
}

/* Collapsible blocks (BibTeX, bios) as quiet notebook tabs */
.md-typeset details.cite,
.md-typeset details.quote {
  padding: 0;
  margin: 0.7rem 0 0;
  border: 1px solid var(--ev-line);
  border-radius: var(--ev-r-sm);
  background-color: var(--ev-sheet);
  box-shadow: none;
  font-size: 0.78rem;
}

.md-typeset details.cite > summary,
.md-typeset details.quote > summary {
  margin: 0;
  padding: 0.5rem 2rem 0.5rem 0.9rem;
  line-height: 1.4;
  border-radius: var(--ev-r-sm);
  background-color: transparent;
  font-family: var(--ev-sans);
  font-size: 0.72rem;
  font-weight: 600;
  color: var(--ev-ink-2);
}

.md-typeset details.cite > summary::before,
.md-typeset details.quote > summary::before {
  display: none;
}

.md-typeset details.cite > summary::after,
.md-typeset details.quote > summary::after {
  top: 0.5rem;
  background-color: var(--ev-teal-ink);
}

.md-typeset details.cite .highlight,
.md-typeset details.quote .highlight {
  margin: 0 0.6rem 0.6rem;
}

.md-typeset details.quote .language-text code {
  white-space: pre-wrap;
  font-family: var(--ev-serif);
  font-size: 0.82rem;
  line-height: 1.6;
}

/* 17. Research: direction cards and question cards ------------------------
   Content comes from data/research.yml. Each direction has one accent colour,
   shared with its tag on the Publications page. */

.ev-dir--motion,
.ev-dir--safety,
.ev-dir--control,
.ev-dir--perception { --dir: var(--ev-research); --dir-bg: var(--ev-research-bg); }

.md-typeset .ev-dirs {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 0.7rem;
  margin: 0 0 2.2rem;
}

.md-typeset a.ev-dir {
  position: relative;
  display: flex;
  flex-direction: column;
  padding: 1.05rem 1rem 0.9rem;
  border: 1px solid var(--ev-line);
  border-radius: var(--ev-r);
  background-color: var(--ev-sheet);
  color: var(--ev-ink);
  text-decoration: none;
  transition: border-color 0.15s ease, box-shadow 0.15s ease;
}

/* a thin accent along the top edge */
.md-typeset a.ev-dir::before {
  content: "";
  position: absolute;
  top: -1px;
  left: 1rem;
  right: 1rem;
  height: 3px;
  border-radius: 0 0 3px 3px;
  background-color: var(--dir);
  opacity: 0.85;
}

.md-typeset a.ev-dir:hover {
  border-color: var(--dir);
}

.md-typeset a.ev-dir.is-active {
  border-color: var(--dir);
  box-shadow: 0 0 0 1px var(--dir), 0 14px 28px -20px rgba(15, 27, 61, 0.45);
}

/* a small pointer from the selected card down to its questions */
.md-typeset a.ev-dir.is-active::after {
  content: "";
  position: absolute;
  bottom: -0.45rem;
  left: 1.6rem;
  width: 0.8rem;
  height: 0.8rem;
  border-right: 1px solid var(--dir);
  border-bottom: 1px solid var(--dir);
  background-color: var(--ev-sheet);
  box-shadow: 1px 1px 0 0 var(--dir);
  transform: rotate(45deg);
}

.md-typeset a.ev-dir:focus-visible {
  outline: 2px solid var(--dir);
  outline-offset: 3px;
}

.md-typeset .ev-dir__icon {
  display: grid;
  place-items: center;
  width: 2.2rem;
  height: 2.2rem;
  margin: 0 0 0.9rem;
  border-radius: var(--ev-r-sm);
  background-color: var(--dir-bg);
  color: var(--dir);
}

.md-typeset .ev-dir__icon svg {
  width: 1.15rem;
  height: 1.15rem;
}

.md-typeset .ev-dir__name {
  font-family: var(--ev-sans);
  font-size: 0.9rem;
  font-weight: 600;
  line-height: 1.3;
}

.md-typeset .ev-dir__line {
  margin-top: 0.2rem;
  font-size: 0.76rem;
  line-height: 1.45;
  color: var(--ev-muted);
}

.md-typeset .ev-dir__count {
  margin-top: auto;
  padding-top: 0.8rem;
  font-family: var(--ev-sans);
  font-size: 0.7rem;
  font-weight: 600;
  color: var(--dir);
}

/* One direction's questions */
.md-typeset .ev-dirpanel {
  margin: 0 0 2.4rem;
  scroll-margin-top: 6rem;
}

.md-typeset .ev-dirpanel[hidden] {
  display: none;
}

.md-typeset .ev-dirpanel__head {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 0.2rem 0.9rem;
  margin: 0 0 1rem;
  padding-bottom: 0.7rem;
  border-bottom: 1px solid var(--ev-line);
}

.md-typeset .ev-dirpanel__head h2 {
  margin: 0;
  font-size: 1.2rem;
}

.md-typeset .ev-dirpanel__head p {
  margin: 0;
  font-size: 0.82rem;
  color: var(--ev-muted);
}

.md-typeset .ev-qs {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0.8rem;
}

.md-typeset .ev-q {
  display: flex;
  flex-direction: column;
  padding: 1.05rem 1.2rem 1rem;
  border: 1px solid var(--ev-line);
  border-radius: var(--ev-r);
  background-color: var(--ev-sheet);
}

.md-typeset .ev-q p {
  margin: 0;
}

.md-typeset .ev-q__status {
  display: flex;
  align-items: center;
  gap: 0.45rem;
  font-family: var(--ev-sans);
  font-size: 0.7rem;
  font-weight: 600;
  color: var(--ev-muted);
}

.md-typeset .ev-q__glyph {
  display: inline-grid;
  place-items: center;
  min-width: 1.3rem;
  height: 1.3rem;
  padding: 0 0.25rem;
  border-radius: 5px;
  font-size: 0.7rem;
  font-weight: 700;
  line-height: 1;
}

.md-typeset .ev-q__glyph { background-color: var(--ev-board-dark); color: var(--ev-oxblood); }

.md-typeset h3.ev-q__title {
  margin: 0.55rem 0 0.4rem;
  font-size: 0.98rem;
  font-weight: 600;
  line-height: 1.35;
  letter-spacing: -0.01em;
}

.md-typeset .ev-q__finding {
  font-size: 0.8rem;
  line-height: 1.55;
  color: var(--ev-ink-2);
}

.md-typeset ul.ev-q__papers {
  margin: auto 0 0;
  padding: 0.8rem 0 0;
  list-style: none;
}

.md-typeset ul.ev-q__papers li {
  margin: 0;
  padding: 0;
}

.md-typeset ul.ev-q__papers li:first-child {
  margin-top: 0.1rem;
  border-top: 1px solid var(--ev-line);
}

.md-typeset ul.ev-q__papers a {
  display: grid;
  grid-template-columns: 2.2rem auto minmax(0, 1fr);
  align-items: baseline;
  gap: 0.6rem;
  padding: 0.5rem 0;
  border-bottom: 1px solid var(--ev-line);
  color: var(--ev-ink);
  text-decoration: none;
}

.md-typeset ul.ev-q__papers li:last-child a {
  border-bottom: 0;
  padding-bottom: 0;
}

.md-typeset .ev-q__year {
  font-family: var(--ev-sans);
  font-size: 0.7rem;
  font-weight: 600;
  color: var(--ev-muted);
  font-variant-numeric: tabular-nums;
}

.md-typeset .ev-q__venue {
  padding: 0.02rem 0.45rem;
  border-radius: 999px;
  box-shadow: inset 0 0 0 1px var(--ev-line-strong);
  font-family: var(--ev-sans);
  font-size: 0.7rem;
  font-weight: 600;
  white-space: nowrap;
  color: var(--ev-ink-2);
}

.md-typeset .ev-q__ptitle {
  overflow: hidden;
  font-family: var(--ev-sans);
  font-size: 0.72rem;
  font-weight: 500;
  white-space: nowrap;
  text-overflow: ellipsis;
}

.md-typeset ul.ev-q__papers a:hover .ev-q__ptitle {
  color: var(--ev-teal-ink);
  text-decoration: underline;
  text-underline-offset: 0.2em;
}

/* If a direction ever ends on a single card, let it span the full row */
.md-typeset .ev-q:last-child:nth-child(odd) {
  grid-column: 1 / -1;
}

/* Research header: statement on the left, a small planning sketch on the right */
.md-typeset .ev-pagehead--split {
  display: grid;
  grid-template-columns: minmax(0, 1.35fr) minmax(0, 1fr);
  gap: 2.4rem;
  align-items: center;
}

.md-typeset .ev-pagehead--split .ev-lead {
  max-width: 34em;
}

.md-typeset figure.ev-illus {
  display: block;
  width: 100%;
  max-width: 22rem;
  margin: 0 0 0 auto;
}

.ev-illus__svg {
  display: block;
  width: 100%;
  height: auto;
}

/* The roadmap story: obstacles, then sampled points, then edges that stay
   clear of the safety zones, then the shortest route, then the robot drives it. */
.ev-illus__edges line {
  stroke: var(--ev-line-strong);
  stroke-width: 1;
  stroke-dasharray: 1;
  stroke-dashoffset: 0;
  animation: ev-tour 0.35s calc(0.8s + var(--i) * 0.018s) ease-out both;
}

.ev-illus__nodes circle {
  fill: var(--ev-ink);
  opacity: 0.35;
  transform-box: fill-box;
  transform-origin: center;
  animation: ev-node 0.3s calc(0.2s + var(--i) * 0.025s) ease-out both;
}

@keyframes ev-node {
  from { opacity: 0; transform: scale(0.3); }
  to   { opacity: 0.35; transform: scale(1); }
}

.ev-illus__obstacle {
  fill: var(--ev-board-dark);
  stroke: var(--ev-line-strong);
}

.ev-illus__zone {
  fill: none;
  stroke: var(--ev-teal-ink);
  stroke-width: 1.2;
  stroke-dasharray: 4 4;
  opacity: 0.55;
}

.ev-illus__path {
  fill: none;
  stroke: var(--ev-ink);
  stroke-width: 2.4;
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-dasharray: 1;
  stroke-dashoffset: 0;
  animation: ev-tour 0.9s 2.1s cubic-bezier(0.45, 0.05, 0.35, 1) both;
}

.ev-illus__start {
  fill: var(--ev-sheet);
  stroke: var(--ev-ink);
  stroke-width: 2;
}

.ev-illus__goal circle {
  fill: var(--ev-ink);
}

.ev-illus__goal circle.ev-illus__halo {
  fill: var(--ev-mint);
}

.ev-illus__goal {
  transform-box: fill-box;
  transform-origin: center;
  animation: ev-arrive 0.5s 2.8s ease-out both;
}

/* the robot follows the route once, then waits at the goal */
.ev-illus__robot {
  offset-rotate: 0deg;
  offset-distance: 100%;
  animation: ev-drive 2s 3.1s cubic-bezier(0.45, 0.05, 0.35, 1) both;
}

@keyframes ev-drive {
  from { offset-distance: 0%; }
  to   { offset-distance: 100%; }
}

.ev-illus__robot-halo {
  fill: var(--ev-mint);
  opacity: 0.9;
}

.ev-illus__robot-body {
  fill: var(--ev-teal-ink);
}

@media screen and (max-width: 60em) {
  .md-typeset .ev-pagehead--split {
    grid-template-columns: minmax(0, 1fr);
    gap: 1.4rem;
  }

  .md-typeset figure.ev-illus {
    max-width: 18rem;
    margin: 0;
  }
}

@media (prefers-reduced-motion: reduce) {
  .ev-illus__path,
  .ev-illus__goal,
  .ev-illus__edges line,
  .ev-illus__nodes circle,
  .ev-illus__robot {
    animation: none;
  }
}

/* Open questions: no fill, dashed, and an invitation instead of papers */
.md-typeset .ev-q--open {
  border-style: dashed;
  border-color: var(--ev-line-strong);
  background-color: transparent;
}

.md-typeset .ev-q__invite {
  margin-top: auto !important;
  padding-top: 0.7rem;
  font-size: 0.78rem;
  font-style: italic;
  color: var(--ev-muted);
}

@media screen and (max-width: 60em) {
  .md-typeset .ev-dirs {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media screen and (max-width: 44.9375em) {
  .md-typeset .ev-qs {
    grid-template-columns: minmax(0, 1fr);
  }

  .md-typeset .ev-dirs {
    gap: 0.5rem;
  }

  .md-typeset a.ev-dir {
    padding: 0.85rem 0.85rem 0.75rem;
  }

  .md-typeset .ev-dir__line {
    display: none;
  }

  .md-typeset .ev-dir__icon {
    margin-bottom: 0.6rem;
  }
}

@media (prefers-reduced-motion: reduce) {
  .md-typeset a.ev-dir {
    transition: none;
  }
}

/* 18. Publications --------------------------------------------------------- */

/* BibTeX sits as a small pill until opened */
.md-typeset .ev-pub details.cite:not([open]) {
  display: inline-block;
  margin-top: 0.55rem;
  border-radius: 999px;
}

.md-typeset .ev-pub details.cite:not([open]) > summary {
  padding: 0.2rem 1.7rem 0.2rem 0.75rem;
  font-size: 0.7rem;
}

.md-typeset .ev-pub details.cite:not([open]) > summary::after {
  top: 0.24rem;
  right: 0.45rem;
  width: 0.8rem;
  height: 0.8rem;
}

.md-typeset .ev-pub {
  margin: 0;
  padding: 1.1rem 0 1.2rem;
  border-top: 1px solid var(--ev-line);
  scroll-margin-top: 6rem;
}

.md-typeset .ev-pub:target {
  margin: 0 -1rem;
  padding: 1.1rem 1rem 1.2rem;
  border-radius: var(--ev-r);
  background-color: var(--ev-mint-soft);
}

.md-typeset .ev-pub p {
  margin: 0;
}

.md-typeset .ev-pub__meta {
  display: flex;
  align-items: center;
  gap: 0.7rem;
  margin-bottom: 0.4rem !important;
}

.md-typeset .ev-pub__year {
  font-family: var(--ev-sans);
  font-size: 0.72rem;
  font-weight: 600;
  color: var(--ev-ink);
  font-variant-numeric: tabular-nums;
}

.md-typeset .ev-pub__title {
  font-family: var(--ev-sans);
  font-size: 0.92rem;
  font-weight: 600;
  line-height: 1.35;
  color: var(--ev-ink);
}

.md-typeset .ev-pub__authors {
  margin-top: 0.3rem !important;
  font-size: 0.8rem;
  color: var(--ev-ink-2);
}

.md-typeset .ev-pub__venue {
  font-size: 0.8rem;
  font-style: italic;
  color: var(--ev-muted);
}

.md-typeset .ev-pub__links {
  margin-top: 0.35rem !important;
}

.md-typeset .ev-pub__links a {
  font-family: var(--ev-sans);
  font-size: 0.7rem;
  font-weight: 600;
}

.md-typeset .ev-tag--motion { background-color: var(--ev-research-bg); color: var(--ev-research); }
.md-typeset .ev-tag--safety { background-color: var(--ev-research-bg); color: var(--ev-research); }
.md-typeset .ev-tag--control { background-color: var(--ev-research-bg); color: var(--ev-research); }
.md-typeset .ev-tag--perception { background-color: var(--ev-research-bg); color: var(--ev-research); }
.md-typeset .ev-tag--learning { background-color: var(--ev-research-bg); color: var(--ev-research); }

/* 19. About ---------------------------------------------------------------- */

.md-typeset .ev-about {
  display: grid;
  grid-template-columns: minmax(0, 1.5fr) minmax(0, 1fr);
  gap: 2.4rem;
  align-items: start;
}

.md-typeset .ev-about__text > p:first-child {
  margin-top: 0;
}

/* The key-facts card: a chess scoresheet with a tear-off stub. */
.md-typeset .ev-sheet {
  --notch: 4.4rem;
  position: sticky;
  top: 7rem;
  overflow: hidden;
  border-radius: var(--ev-r);
  background-color: var(--ev-sheet);
  filter: drop-shadow(0 0 1px var(--ev-line-strong));
  -webkit-mask:
    radial-gradient(circle at 0 calc(100% - var(--notch)), transparent 0.6rem, #000 calc(0.6rem + 0.5px)) left / 51% 100% no-repeat,
    radial-gradient(circle at 100% calc(100% - var(--notch)), transparent 0.6rem, #000 calc(0.6rem + 0.5px)) right / 51% 100% no-repeat;
  mask:
    radial-gradient(circle at 0 calc(100% - var(--notch)), transparent 0.6rem, #000 calc(0.6rem + 0.5px)) left / 51% 100% no-repeat,
    radial-gradient(circle at 100% calc(100% - var(--notch)), transparent 0.6rem, #000 calc(0.6rem + 0.5px)) right / 51% 100% no-repeat;
}

.md-typeset .ev-sheet__head {
  display: flex;
  justify-content: space-between;
  gap: 1rem;
  padding: 1rem 1.2rem 0.8rem;
  border-bottom: 2px solid var(--ev-ink);
  font-family: var(--ev-sans);
  font-size: 0.72rem;
}

.md-typeset .ev-sheet__head span:first-child {
  font-weight: 700;
  color: var(--ev-ink);
}

.md-typeset .ev-sheet__head span:last-child {
  color: var(--ev-muted);
}

.md-typeset dl.ev-sheet__rows {
  margin: 0;
  padding: 0 1.2rem;
}

.md-typeset .ev-sheet__rows > div {
  display: grid;
  grid-template-columns: 5rem minmax(0, 1fr);
  gap: 0.8rem;
  padding: 0.65rem 0;
  border-bottom: 1px solid var(--ev-line);
}

.md-typeset .ev-sheet__rows > div:last-child {
  border-bottom: 0;
}

.md-typeset .ev-sheet__rows dt {
  font-family: var(--ev-sans);
  font-size: 0.7rem;
  font-weight: 600;
  line-height: 1.6;
  color: var(--ev-muted);
}

.md-typeset .ev-sheet__rows dd {
  margin: 0;
  font-size: 0.78rem;
  line-height: 1.5;
  color: var(--ev-ink);
}

.md-typeset .ev-sheet__stub {
  display: flex;
  align-items: center;
  gap: 1rem;
  box-sizing: border-box;
  height: var(--notch);
  padding: 1rem 1.2rem;
  border-top: 2px dashed var(--ev-line-strong);
  background-color: var(--ev-mint-soft);
}

.md-typeset .ev-sheet__stub .ev-textlink {
  font-size: 0.72rem;
  white-space: nowrap;
}

/* 20. CV: career lanes ----------------------------------------------------
   Bars are positioned from data/cv.yml as percentages of the axis. */

.md-typeset figure.ev-lanes-fig {
  display: block;
  width: auto;
  max-width: none;
}

.md-typeset .ev-lanes-fig {
  margin: 0 0 2.4rem;
  padding: 1.2rem 1.3rem 0.9rem;
  border: 1px solid var(--ev-line);
  border-radius: var(--ev-r);
  background-color: var(--ev-sheet);
}

.ev-lanes-scroll {
  overflow-x: auto;
  padding-bottom: 0.3rem;
}

.ev-lanes {
  --name: 9.5rem;
  min-width: 40rem;
}

.ev-lanes__axis {
  position: relative;
  height: 1.4rem;
  margin-left: var(--name);
  font-family: var(--ev-sans);
  font-size: 0.7rem;
  font-weight: 600;
  color: var(--ev-muted);
  font-variant-numeric: tabular-nums;
}

.ev-lanes__axis span {
  position: absolute;
  top: 0;
  transform: translateX(-50%);
}

.ev-lanes__axis .ev-lanes__now {
  color: var(--ev-teal-ink);
}

.ev-lanes__axis span:first-child {
  transform: none;
}

.ev-lane {
  display: grid;
  grid-template-columns: var(--name) minmax(0, 1fr);
  align-items: center;
  min-height: 3.1rem;
  border-top: 1px solid var(--ev-line);
}

.ev-lane__name {
  padding-right: 1rem;
  text-align: left;
  font-family: var(--ev-sans);
  font-size: 0.72rem;
  font-weight: 600;
  line-height: 1.3;
  color: var(--ev-ink);
}

.ev-lane__track {
  position: relative;
  height: 3.1rem;
}

.ev-lane__tick {
  position: absolute;
  top: 0;
  bottom: 0;
  width: 1px;
  background-color: var(--ev-line);
}

.ev-bar {
  --bar: var(--ev-ink);
  --bar-ink: var(--ev-paper);
  position: absolute;
  top: 50%;
  display: flex;
  align-items: center;
  height: 1.6rem;
  min-width: 0.6rem;
  padding: 0 0.5rem;
  transform: translateY(-50%);
  box-sizing: border-box;
  border-radius: 6px;
  background-color: var(--bar);
  color: var(--bar-ink);
  cursor: default;
  outline: none;
}

.ev-lane--education .ev-bar { --bar: var(--ev-mint); --bar-ink: #0B4F47; }
.ev-lane--academia .ev-bar  { --bar: var(--ev-learning); --bar-ink: #FFFFFF; }
.ev-lane--programs .ev-bar  { --bar: var(--ev-building); --bar-ink: #FFFFFF; }

[data-md-color-scheme="slate"] .ev-lane--academia .ev-bar,
[data-md-color-scheme="slate"] .ev-lane--programs .ev-bar { --bar-ink: #121C30; }

/* Ongoing roles run off the end of the axis with an arrow */
.ev-bar--ongoing {
  border-top-right-radius: 0;
  border-bottom-right-radius: 0;
}

.ev-bar--ongoing::after {
  content: "";
  position: absolute;
  top: 0;
  right: -0.7rem;
  border-top: 0.8rem solid transparent;
  border-bottom: 0.8rem solid transparent;
  border-left: 0.7rem solid var(--bar);
}

.ev-bar__label {
  overflow: hidden;
  font-family: var(--ev-sans);
  font-size: 0.7rem;
  font-weight: 600;
  white-space: nowrap;
  text-overflow: clip;
}

.ev-bar--short .ev-bar__label {
  position: absolute;
  left: calc(100% + 0.35rem);
  overflow: visible;
  color: var(--ev-ink-2);
}

.ev-bar__tip {
  position: absolute;
  bottom: calc(100% + 0.5rem);
  left: 0;
  z-index: 3;
  display: flex;
  flex-direction: column;
  gap: 0.1rem;
  width: max-content;
  max-width: 16rem;
  padding: 0.55rem 0.75rem;
  border-radius: var(--ev-r-sm);
  background-color: var(--ev-ink);
  box-shadow: 0 10px 24px -12px rgba(15, 27, 61, 0.5);
  font-family: var(--ev-sans);
  font-size: 0.7rem;
  line-height: 1.45;
  color: var(--ev-paper);
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.12s ease;
  pointer-events: none;
}

.ev-bar__tip strong {
  font-size: 0.72rem;
}

.ev-bar:hover .ev-bar__tip,
.ev-bar:focus-visible .ev-bar__tip {
  opacity: 1;
  visibility: visible;
}

.ev-bar:focus-visible {
  box-shadow: 0 0 0 2px var(--ev-paper), 0 0 0 4px var(--ev-teal-ink);
}

.md-typeset .ev-lanes-fig figcaption {
  max-width: none;
  margin: 0.6rem 0 0;
  font-family: var(--ev-sans);
  font-size: 0.7rem;
  text-align: left;
  color: var(--ev-muted);
}

/* The detail lists under the chart, side by side */
.md-typeset .ev-cvcols {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 2.4rem;
}

.md-typeset .ev-cvcols h2 {
  margin: 0 0 0.8rem;
  font-size: 1.05rem;
}

.md-typeset .ev-cvcols h2 + ul {
  margin-top: 0;
}

.md-typeset ul.ev-cvlist {
  margin: 0 0 1.8rem;
  padding: 0;
  list-style: none;
}

.md-typeset ul.ev-cvlist li {
  display: grid;
  grid-template-columns: 6.6rem minmax(0, 1fr);
  column-gap: 0.8rem;
  margin: 0;
  padding: 0.55rem 0;
  border-top: 1px solid var(--ev-line);
}

.md-typeset .ev-cvlist__when {
  grid-row: span 2;
  font-family: var(--ev-sans);
  font-size: 0.7rem;
  font-weight: 600;
  line-height: 1.9;
  color: var(--ev-teal-ink);
  font-variant-numeric: tabular-nums;
}

.md-typeset ul.ev-cvlist strong {
  font-family: var(--ev-sans);
  font-size: 0.8rem;
  font-weight: 600;
  line-height: 1.4;
}

.md-typeset .ev-cvlist__where {
  font-size: 0.76rem;
  font-style: italic;
  color: var(--ev-muted);
}

.md-typeset .ev-langline {
  display: flex;
  flex-wrap: wrap;
  gap: 0.4rem;
  margin: 0;
}

.md-typeset .ev-langline span {
  padding: 0.2rem 0.7rem;
  border-radius: 999px;
  box-shadow: inset 0 0 0 1px var(--ev-line-strong);
  font-family: var(--ev-sans);
  font-size: 0.7rem;
  color: var(--ev-ink-2);
}

.md-typeset .ev-langline strong {
  color: var(--ev-ink);
}

.md-typeset blockquote.ev-bio {
  margin: 0;
  padding: 0.9rem 1.1rem;
  border-left: 3px solid var(--ev-mint);
  border-radius: 0 var(--ev-r) var(--ev-r) 0;
  background-color: var(--ev-sheet);
  font-size: 0.86rem;
  color: var(--ev-ink-2);
}

/* 21. Contact -------------------------------------------------------------- */

.md-typeset .ev-rows {
  overflow: hidden;
  border: 1px solid var(--ev-line);
  border-radius: var(--ev-r);
  background-color: var(--ev-sheet);
}

.md-typeset .ev-rows__row {
  display: grid;
  grid-template-columns: 9rem minmax(0, 1fr);
  gap: 1rem;
  padding: 0.95rem 1.2rem;
  border-top: 1px solid var(--ev-line);
}

.md-typeset .ev-rows__row:first-child {
  border-top: 0;
}

.md-typeset .ev-rows__who {
  font-family: var(--ev-sans);
  font-size: 0.78rem;
  font-weight: 600;
  color: var(--ev-ink);
}

.md-typeset .ev-rows__what {
  font-size: 0.82rem;
  line-height: 1.6;
  color: var(--ev-ink-2);
}

.md-typeset .ev-profiles {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 0.7rem;
  margin: 0 0 1.4rem;
}

.md-typeset .ev-profiles a {
  display: flex;
  flex-direction: column;
  gap: 0.15rem;
  padding: 0.85rem 1rem;
  border: 1px solid var(--ev-line);
  border-radius: var(--ev-r);
  background-color: var(--ev-sheet);
  color: var(--ev-ink);
  text-decoration: none;
  transition: border-color 0.15s ease;
}

.md-typeset .ev-profiles a:hover {
  border-color: var(--ev-teal-ink);
}

.md-typeset .ev-profiles strong {
  font-family: var(--ev-sans);
  font-size: 0.82rem;
  font-weight: 600;
}

.md-typeset .ev-profiles span {
  font-family: var(--ev-sans);
  font-size: 0.7rem;
  color: var(--ev-muted);
}

/* Responsive for sections 16 to 21 */

@media screen and (max-width: 76.1875em) {
  .md-typeset .ev-about {
    grid-template-columns: minmax(0, 1fr);
  }

  .md-typeset .ev-sheet {
    position: static;
    max-width: 26rem;
  }
}

@media screen and (max-width: 44.9375em) {
  /* On phones: lane names above their track, whole chart fits the screen,
     labels move into the tap tooltips. */
  .ev-lanes {
    --name: 0rem;
    min-width: 0;
  }

  .ev-lane {
    grid-template-columns: minmax(0, 1fr);
    padding-top: 0.5rem;
  }

  .ev-lane__track {
    height: 2.2rem;
  }

  .ev-bar {
    height: 1.1rem;
    padding: 0;
  }

  .ev-bar__label {
    display: none;
  }

  .ev-bar__tip {
    left: auto;
    right: 0;
  }

  .ev-lanes {
    padding: 0 0.8rem 0 0.4rem;
  }

  .ev-bar--ongoing::after {
    right: -0.5rem;
    border-top-width: 0.55rem;
    border-bottom-width: 0.55rem;
    border-left-width: 0.5rem;
  }

  .ev-lanes__axis .ev-lanes__now {
    display: none;
  }

  .md-typeset .ev-profiles,
  .md-typeset .ev-cvcols {
    grid-template-columns: minmax(0, 1fr);
    gap: 0;
  }

  .md-typeset .ev-rows__row {
    grid-template-columns: minmax(0, 1fr);
    gap: 0.3rem;
  }
}

@media (prefers-reduced-motion: reduce) {
  .md-typeset .ev-profiles a,
  .ev-bar__tip {
    transition: none;
  }
}

/* 22. Teaching ------------------------------------------------------------- */

.md-typeset .ev-courses-row {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 0.8rem;
}

/* A course card reads left to right, like the order students take them */
.md-typeset .ev-course {
  position: relative;
  display: flex;
  flex-direction: column;
  padding: 1.1rem 1.15rem 1.1rem;
  border: 1px solid var(--ev-line);
  border-radius: var(--ev-r);
  background-color: var(--ev-sheet);
}

.md-typeset .ev-course p {
  margin: 0;
}

.md-typeset .ev-course__where {
  font-family: var(--ev-sans);
  font-size: 0.7rem;
  font-weight: 600;
  color: var(--ev-teal-ink);
}

.md-typeset .ev-course h3 {
  margin: 0.4rem 0 0.3rem;
  font-size: 0.95rem;
  line-height: 1.3;
}

.md-typeset .ev-course__line {
  font-size: 0.8rem;
  line-height: 1.5;
  color: var(--ev-ink-2);
}

.md-typeset .ev-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 0.3rem;
  margin-top: auto !important;
  padding-top: 0.9rem;
}

.md-typeset .ev-chips span,
.md-typeset .ev-topic__skills span {
  padding: 0.05rem 0.5rem;
  border-radius: 999px;
  box-shadow: inset 0 0 0 1px var(--ev-line);
  font-family: var(--ev-sans);
  font-size: 0.7rem;
  font-weight: 500;
  line-height: 1.7;
  color: var(--ev-ink-2);
}

.md-typeset .ev-principles {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 0.8rem;
  margin: 1rem 0 0;
}

.md-typeset .ev-principles p {
  margin: 0;
  padding: 0.2rem 0 0 0.9rem;
  border-left: 2px solid var(--ev-mint);
  font-size: 0.8rem;
  line-height: 1.5;
  color: var(--ev-ink-2);
}

.md-typeset .ev-principles strong {
  display: block;
  font-family: var(--ev-sans);
  font-weight: 600;
  color: var(--ev-ink);
}

.md-typeset .ev-students {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 1rem;
  align-items: stretch;
}

.md-typeset .ev-students__card {
  display: flex;
  flex-direction: column;
}

.md-typeset .ev-students__card dl.ev-mini {
  flex: 1;
}

.md-typeset .ev-students__label {
  margin: 0 0 0.6rem;
  font-family: var(--ev-sans);
  font-size: 0.72rem;
  font-weight: 600;
  color: var(--ev-teal-ink);
}

.md-typeset .ev-students__small {
  margin: 0.6rem 0 0;
  font-size: 0.74rem;
  font-style: italic;
  color: var(--ev-muted);
}

.md-typeset .ev-hours {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 0.5rem;
}

.md-typeset .ev-hours > div {
  display: flex;
  flex-direction: column;
  gap: 0.15rem;
  padding: 0.8rem 0.9rem;
  border: 1px solid var(--ev-line);
  border-radius: var(--ev-r);
  background-color: var(--ev-sheet);
}

.md-typeset .ev-hours > .ev-hours__where {
  background-color: var(--ev-mint-soft);
}

.md-typeset .ev-hours span {
  font-family: var(--ev-sans);
  font-size: 0.7rem;
  font-weight: 600;
  color: var(--ev-muted);
}

.md-typeset .ev-hours strong {
  font-family: var(--ev-sans);
  font-size: 0.9rem;
  font-weight: 600;
  line-height: 1.3;
  color: var(--ev-ink);
  font-variant-numeric: tabular-nums;
}

.md-typeset dl.ev-mini {
  margin: 0;
  border: 1px solid var(--ev-line);
  border-radius: var(--ev-r);
  background-color: var(--ev-sheet);
}

.md-typeset .ev-mini > div {
  display: grid;
  grid-template-columns: 4.4rem minmax(0, 1fr);
  gap: 0.8rem;
  padding: 0.55rem 0.9rem;
  border-top: 1px solid var(--ev-line);
}

.md-typeset .ev-mini > div:first-child {
  border-top: 0;
}

.md-typeset .ev-mini dt {
  font-family: var(--ev-sans);
  font-size: 0.7rem;
  font-weight: 600;
  line-height: 1.8;
  color: var(--ev-muted);
}

.md-typeset .ev-mini dd {
  margin: 0;
  font-size: 0.8rem;
  line-height: 1.55;
}

/* 23. Mentoring ------------------------------------------------------------ */

.md-typeset .ev-topics {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 0.8rem;
}

.md-typeset .ev-topic {
  display: flex;
  flex-direction: column;
  padding: 1rem 1.1rem 1.1rem;
  border: 1px solid var(--ev-line);
  border-radius: var(--ev-r);
  background-color: var(--ev-sheet);
}

.md-typeset .ev-topic[hidden] {
  display: none;
}

.md-typeset .ev-topic p {
  margin: 0;
}

.md-typeset .ev-topic__meta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.6rem;
}

.md-typeset .ev-topic__level,
.md-typeset .ev-topic__status {
  font-family: var(--ev-sans);
  font-size: 0.7rem;
  font-weight: 600;
  color: var(--ev-muted);
}

.md-typeset .ev-topic__status {
  color: var(--ev-oxblood);
}

.md-typeset h3.ev-topic__title {
  margin: 0.6rem 0 0.35rem;
  font-size: 0.88rem;
  line-height: 1.35;
}

.md-typeset .ev-topic__summary {
  font-size: 0.78rem;
  line-height: 1.55;
  color: var(--ev-ink-2);
}

.md-typeset .ev-topic__skills {
  display: flex;
  flex-wrap: wrap;
  gap: 0.3rem;
  margin-top: auto !important;
  padding-top: 0.8rem;
}

.md-typeset .ev-topic--taken {
  opacity: 0.6;
  background-color: transparent;
}

.md-typeset .ev-tag--agents { background-color: var(--ev-learning-bg); color: var(--ev-learning); }
.md-typeset .ev-tag--rag { background-color: var(--ev-learning-bg); color: var(--ev-learning); }
.md-typeset .ev-tag--robotics { background-color: var(--ev-learning-bg); color: var(--ev-learning); }

/* The thesis process as one horizontal line of five waypoints */
.md-typeset ol.ev-stepper {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 0.6rem;
  margin: 0.4rem 0 1.4rem;
  padding: 0;
  list-style: none;
  counter-reset: step;
}

.md-typeset ol.ev-stepper li {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 0.2rem;
  margin: 0;
  padding: 1.7rem 0.4rem 0 0;
  counter-increment: step;
}

.md-typeset ol.ev-stepper li::before {
  content: counter(step);
  position: absolute;
  top: 0;
  left: 0;
  z-index: 1;
  display: grid;
  place-items: center;
  width: 1.3rem;
  height: 1.3rem;
  border: 2px solid var(--ev-ink);
  border-radius: 50%;
  background-color: var(--ev-paper);
  font-family: var(--ev-sans);
  font-size: 0.7rem;
  font-weight: 700;
  color: var(--ev-ink);
}

.md-typeset ol.ev-stepper li:last-child::before {
  background-color: var(--ev-ink);
  color: var(--ev-paper);
  box-shadow: 0 0 0 0.25rem var(--ev-mint);
}

.md-typeset ol.ev-stepper li:not(:last-child)::after {
  content: "";
  position: absolute;
  top: 0.64rem;
  left: 1.3rem;
  right: -0.6rem;
  border-top: 2px dashed var(--ev-line-strong);
}

.md-typeset ol.ev-stepper strong {
  font-family: var(--ev-sans);
  font-size: 0.8rem;
  font-weight: 600;
}

.md-typeset ol.ev-stepper span {
  font-size: 0.74rem;
  line-height: 1.45;
  color: var(--ev-muted);
}

.md-typeset .ev-two {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0.8rem;
  margin-bottom: 1rem;
}

.md-typeset .ev-two__col {
  padding: 0.9rem 1.1rem;
  border: 1px solid var(--ev-line);
  border-radius: var(--ev-r);
  background-color: var(--ev-sheet);
}

.md-typeset .ev-two__col p {
  margin: 0;
  font-size: 0.8rem;
  line-height: 1.55;
}

.md-typeset .ev-two__col p.ev-students__label {
  margin-bottom: 0.3rem;
  font-size: 0.72rem;
}

/* 24. Initiatives ---------------------------------------------------------- */

.md-typeset .ev-programs {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0.8rem;
}

.md-typeset .ev-program {
  display: flex;
  flex-direction: column;
  padding: 1.1rem 1.2rem 1rem;
  border: 1px solid var(--ev-line);
  border-radius: var(--ev-r);
  background-color: var(--ev-sheet);
}

.md-typeset .ev-program > p {
  margin: 0;
  font-size: 0.82rem;
  line-height: 1.6;
  color: var(--ev-ink-2);
}

.md-typeset .ev-program__meta {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  font-family: var(--ev-sans);
  font-size: 0.66rem !important;
  font-weight: 600;
  color: var(--ev-muted) !important;
}

.md-typeset .ev-program h3 {
  margin: 0.6rem 0 0.4rem;
  font-size: 1rem;
}

.md-typeset dl.ev-program__facts {
  margin: auto 0 0;
  padding-top: 0.9rem;
}

.md-typeset .ev-program__facts > div {
  display: grid;
  grid-template-columns: 3.6rem minmax(0, 1fr);
  gap: 0.6rem;
  padding: 0.45rem 0;
  border-top: 1px solid var(--ev-line);
}

.md-typeset .ev-program__facts dt {
  font-family: var(--ev-sans);
  font-size: 0.7rem;
  font-weight: 600;
  line-height: 1.7;
  color: var(--ev-muted);
}

.md-typeset .ev-program__facts dd {
  margin: 0;
  font-size: 0.78rem;
  line-height: 1.5;
}

.md-typeset .ev-programs > .ev-program:only-child {
  grid-column: 1 / -1;
  display: grid;
  grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr);
  column-gap: 2rem;
}

.md-typeset .ev-program:only-child > :not(dl) {
  grid-column: 1;
}

.md-typeset .ev-program:only-child > dl.ev-program__facts {
  grid-column: 2;
  grid-row: 1 / span 3;
  align-self: end;
  margin: 0;
}

/* Responsive for sections 22 to 24 */

@media screen and (max-width: 76.1875em) {
  .md-typeset .ev-topics {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .md-typeset .ev-students {
    grid-template-columns: minmax(0, 1fr);
  }
}

@media screen and (max-width: 60em) {
  .md-typeset .ev-courses-row,
  .md-typeset .ev-principles {
    grid-template-columns: minmax(0, 1fr);
  }

  .md-typeset ol.ev-stepper {
    grid-template-columns: minmax(0, 1fr);
    gap: 0;
  }

  .md-typeset ol.ev-stepper li {
    padding: 0 0 1rem 2.1rem;
  }

  .md-typeset ol.ev-stepper li:not(:last-child)::after {
    top: 1.3rem;
    bottom: 0;
    left: 0.6rem;
    right: auto;
    border-top: 0;
    border-left: 2px dashed var(--ev-line-strong);
  }
}

@media screen and (max-width: 44.9375em) {
  .md-typeset .ev-programs > .ev-program:only-child {
    display: flex;
  }

  .md-typeset .ev-program:only-child > dl.ev-program__facts {
    margin-top: 0.9rem;
  }

  .md-typeset .ev-hours,
  .md-typeset .ev-two,
  .md-typeset .ev-topics,
  .md-typeset .ev-programs {
    grid-template-columns: minmax(0, 1fr);
  }
}

/* 25. Writing -------------------------------------------------------------- */

/* The list of posts reads like dated notebook entries */
.md-typeset + .md-post--excerpt,
.md-post--excerpt {
  margin: 0;
  padding: 1.4rem 0 1.5rem;
  border-top: 1px solid var(--ev-line);
}

.md-post--excerpt:first-of-type {
  border-top: 0;
  padding-top: 0.4rem;
}

.md-post--excerpt .md-post__authors {
  display: none;
}

.md-post__meta .md-meta__list {
  font-family: var(--ev-sans);
  font-size: 0.7rem;
  color: var(--ev-muted);
}

.md-post__meta .md-meta__link {
  font-weight: 600;
  color: var(--ev-teal-ink);
}

.md-draft {
  padding: 0.05rem 0.5rem;
  border-radius: 999px;
  background-color: var(--ev-tag-talk-bg);
  font-family: var(--ev-sans);
  font-size: 0.7rem;
  font-weight: 600;
  color: var(--ev-oxblood);
}

.md-post--excerpt .md-post__content h2 {
  margin: 0.5rem 0 0.5rem;
  font-size: 1.15rem;
  line-height: 1.3;
}

.md-post--excerpt .md-post__content h2 a {
  color: var(--ev-ink);
  text-decoration: none;
}

.md-post--excerpt .md-post__content h2 a:hover {
  color: var(--ev-teal-ink);
}

.md-post--excerpt .md-post__content > p {
  max-width: 36em;
  margin: 0;
  font-size: 0.86rem;
  color: var(--ev-ink-2);
}

.md-post__action {
  margin-top: 0.8rem;
}

.md-typeset .md-post__action a {
  font-family: var(--ev-sans);
  font-size: 0.74rem;
  font-weight: 600;
  color: var(--ev-ink);
  text-decoration-color: var(--ev-teal-ink);
  text-decoration-thickness: 2px;
  text-underline-offset: 0.35em;
}

/* A single post */
.md-content--post .md-typeset h1 {
  font-size: clamp(1.7rem, 1.2rem + 1.5vw, 2.3rem);
  letter-spacing: -0.03em;
}

.md-content--post .md-typeset > p,
.md-content--post .md-typeset > ul,
.md-content--post .md-typeset > ol {
  max-width: 34em;
  font-size: 0.92rem;
  line-height: 1.75;
}

.md-post__title {
  text-transform: none;
  font-family: var(--ev-sans);
  color: var(--ev-muted);
}

/* Margin notes: in the right margin on wide screens, inline on small ones.
   Write <aside class="ev-margin" markdown> ... </aside> after a paragraph. */
.md-typeset aside.ev-margin {
  margin: 0 0 1em;
  padding-left: 0.9rem;
  border-left: 2px solid var(--ev-mint);
  font-size: 0.74rem;
  font-style: italic;
  line-height: 1.55;
  color: var(--ev-muted);
}

.md-typeset aside.ev-margin p {
  margin: 0;
}

@media screen and (min-width: 76.25em) {
  .md-typeset aside.ev-margin {
    float: right;
    clear: right;
    width: 11rem;
    margin: -4.2rem -13.5rem 0 0;
  }
}

/* 26. Manuscript: Ancient Algorithms only -----------------------------------
   Applied automatically to posts in the Ancient Algorithms series. */

.md-content--post:has(a[href*="category/ancient-algorithms"]) .md-typeset h1 + p::first-letter {
  float: left;
  margin: 0.08em 0.14em 0 0;
  padding: 0.12em 0.14em 0.02em;
  border-radius: 6px;
  background-color: var(--ev-mint-soft);
  box-shadow: inset 0 0 0 1px var(--ev-mint);
  font-family: var(--ev-serif);
  font-size: 3.3em;
  font-weight: 600;
  font-style: normal;
  line-height: 0.8;
  color: var(--ev-oxblood);
}

.md-content--post:has(a[href*="category/ancient-algorithms"]) .md-typeset h1 {
  font-family: var(--ev-serif);
  font-weight: 600;
  letter-spacing: -0.015em;
}

.md-content--post:has(a[href*="category/ancient-algorithms"]) .md-typeset h1 + p {
  font-size: 1rem;
}

/* 28. Filter chips --------------------------------------------------------- */

.md-typeset .ev-filter {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.4rem;
  margin: 0 0 1.1rem;
}

.md-typeset .ev-filter button {
  padding: 0.3rem 0.8rem;
  border: 1px solid var(--ev-line-strong);
  border-radius: 999px;
  background-color: var(--ev-sheet);
  font-family: var(--ev-sans);
  font-size: 0.7rem;
  font-weight: 600;
  color: var(--ev-ink-2);
  cursor: pointer;
  transition: background-color 0.12s ease, color 0.12s ease, border-color 0.12s ease;
}

.md-typeset .ev-filter button:hover {
  border-color: var(--ev-teal-ink);
  color: var(--ev-teal-ink);
}

.md-typeset .ev-filter button[aria-pressed="true"] {
  border-color: var(--ev-ink);
  background-color: var(--ev-ink);
  color: var(--ev-paper);
}

.md-typeset .ev-filter button:focus-visible {
  outline: 2px solid var(--ev-teal-ink);
  outline-offset: 2px;
}

.md-typeset .ev-filter__count {
  margin-left: 0.4rem;
  font-family: var(--ev-sans);
  font-size: 0.7rem;
  color: var(--ev-muted);
}

.md-typeset [data-filter-section][hidden],
.md-typeset .ev-pub[hidden] {
  display: none;
}

@media (prefers-reduced-motion: reduce) {
  .md-typeset .ev-filter button {
    transition: none;
  }
}

/* 29. About: one page ------------------------------------------------------ */

/* Profile links as small chips under the lead */
.md-typeset .ev-chips-row {
  display: flex;
  flex-wrap: wrap;
  gap: 0.4rem;
  margin: 1.2rem 0 0;
}

.md-typeset a.ev-chip {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  height: 1.7rem;
  padding: 0 0.75rem 0 0.6rem;
  border: 1px solid var(--ev-line-strong);
  border-radius: 999px;
  background-color: var(--ev-sheet);
  font-family: var(--ev-sans);
  font-size: 0.7rem;
  font-weight: 600;
  color: var(--ev-ink);
  text-decoration: none;
  transition: border-color 0.12s ease, color 0.12s ease;
}

.md-typeset a.ev-chip:hover {
  border-color: var(--ev-teal-ink);
  color: var(--ev-teal-ink);
}

.md-typeset a.ev-chip .twemoji,
.md-typeset a.ev-chip .twemoji svg {
  width: 0.85rem;
  height: 0.85rem;
  max-height: none;
}

.md-typeset a.ev-chip .twemoji svg {
  fill: currentColor;
}

.md-typeset a.ev-chip .twemoji svg.lucide {
  fill: none;
  stroke: currentColor;
}

.md-typeset .ev-alsoon {
  margin: 1rem 0 0;
  font-size: 0.8rem;
  color: var(--ev-muted);
}

.md-typeset .ev-alsoon a.ev-textlink {
  font-size: 0.76rem;
}

.md-typeset .ev-sheet__updated {
  font-family: var(--ev-sans);
  font-size: 0.7rem;
  color: var(--ev-muted);
}

/* Sections on the About page */
.md-typeset .ev-section-block {
  margin-top: 3.4rem;
  padding-top: 0.2rem;
}

.md-typeset .ev-section-block > h2 {
  margin: 0 0 0.3rem;
}

.md-typeset .ev-sublead {
  max-width: 36em;
  margin: 0 0 1.2rem;
  font-size: 0.86rem;
  color: var(--ev-ink-2);
}

.md-typeset h2[id] {
  scroll-margin-top: 6rem;
}

/* The collapsed list of all roles */
.md-typeset details.ev-roles {
  margin: -1.4rem 0 0;
  padding: 0;
  border: 0;
  border-radius: 0;
  background: none;
  box-shadow: none;
  font-size: inherit;
}

.md-typeset details.ev-roles > summary {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  margin: 0;
  padding: 0.35rem 0.9rem 0.35rem 0.8rem;
  border: 1px solid var(--ev-line-strong);
  border-radius: 999px;
  background-color: var(--ev-sheet);
  font-family: var(--ev-sans);
  font-size: 0.7rem;
  font-weight: 600;
  color: var(--ev-ink);
  cursor: pointer;
  list-style: none;
}

.md-typeset details.ev-roles > summary::-webkit-details-marker {
  display: none;
}

.md-typeset details.ev-roles > summary::before {
  content: "+";
  position: static;
  width: auto;
  height: auto;
  background: none;
  -webkit-mask: none;
  mask: none;
  font-weight: 700;
  color: var(--ev-teal-ink);
  transform: none;
}

.md-typeset details.ev-roles[open] > summary::before {
  content: "\2212";
}

.md-typeset details.ev-roles > summary::after {
  display: none;
}

.md-typeset details.ev-roles > summary:hover {
  border-color: var(--ev-teal-ink);
}

.md-typeset details.ev-roles[open] > .ev-cvcols {
  margin-top: 1.2rem;
}

.md-typeset .ev-roles__head {
  margin: 0 0 0.5rem;
  font-family: var(--ev-sans);
  font-size: 0.72rem;
  font-weight: 600;
  color: var(--ev-teal-ink);
}

/* Get in touch */
.md-typeset .ev-email {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.6rem 1rem;
  margin: 0.8rem 0 1.6rem;
}

.md-typeset a.ev-email__address {
  font-family: var(--ev-sans);
  font-size: clamp(1.4rem, 1rem + 1.6vw, 2.2rem);
  font-weight: 600;
  letter-spacing: -0.025em;
  line-height: 1.15;
  color: var(--ev-ink);
  text-decoration: none;
  background-image: linear-gradient(var(--ev-mint), var(--ev-mint));
  background-repeat: no-repeat;
  background-size: 100% 0.28em;
  background-position: 0 92%;
  transition: background-size 0.2s ease;
}

.md-typeset a.ev-email__address:hover {
  background-size: 100% 0.55em;
}

.md-typeset .ev-copy {
  padding: 0.3rem 0.8rem;
  border: 1px solid var(--ev-line-strong);
  border-radius: 999px;
  background-color: var(--ev-sheet);
  font-family: var(--ev-sans);
  font-size: 0.7rem;
  font-weight: 600;
  color: var(--ev-ink-2);
  cursor: pointer;
}

.md-typeset .ev-copy:hover {
  border-color: var(--ev-teal-ink);
  color: var(--ev-teal-ink);
}

.md-typeset .ev-copy:focus-visible {
  outline: 2px solid var(--ev-teal-ink);
  outline-offset: 2px;
}

.md-typeset .ev-copy.is-copied {
  border-color: var(--ev-teal-ink);
  background-color: var(--ev-mint-soft);
  color: var(--ev-teal-ink);
}

.md-typeset .ev-audiences {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  border-top: 1px solid var(--ev-line-strong);
  border-bottom: 1px solid var(--ev-line-strong);
}

.md-typeset .ev-audiences > div {
  display: flex;
  flex-direction: column;
  gap: 0.2rem;
  padding: 0.9rem 1.1rem 0.95rem 0;
}

.md-typeset .ev-audiences > div + div {
  padding-left: 1.1rem;
  border-left: 1px solid var(--ev-line);
}

.md-typeset .ev-audiences strong {
  font-family: var(--ev-sans);
  font-size: 0.76rem;
  font-weight: 600;
}

.md-typeset .ev-audiences span {
  font-size: 0.8rem;
  line-height: 1.5;
  color: var(--ev-ink-2);
}

.md-typeset .ev-hoursline {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 0.3rem 0.8rem;
  margin: 1rem 0 0;
  font-size: 0.82rem;
  color: var(--ev-ink-2);
}

.md-typeset .ev-hoursline span {
  font-family: var(--ev-sans);
  font-size: 0.7rem;
  font-weight: 600;
  color: var(--ev-teal-ink);
}

.md-typeset .ev-orgbio {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  gap: 0.2rem 1rem;
  margin: 1.8rem 0 0;
  padding: 0.9rem 1.1rem;
  border-left: 3px solid var(--ev-mint);
  border-radius: 0 var(--ev-r) var(--ev-r) 0;
  background-color: var(--ev-sheet);
}

.md-typeset .ev-orgbio p {
  margin: 0;
}

.md-typeset .ev-orgbio__label {
  grid-column: 1 / -1;
  font-family: var(--ev-sans);
  font-size: 0.7rem;
  font-weight: 600;
  color: var(--ev-muted);
}

.md-typeset .ev-orgbio__text {
  font-size: 0.84rem;
  line-height: 1.55;
  color: var(--ev-ink-2);
}

@media screen and (max-width: 44.9375em) {
  .md-typeset .ev-audiences {
    grid-template-columns: minmax(0, 1fr);
  }

  .md-typeset .ev-audiences > div + div {
    padding-left: 0;
    border-left: 0;
    border-top: 1px solid var(--ev-line);
  }

  .md-typeset .ev-orgbio {
    grid-template-columns: minmax(0, 1fr);
  }

  .md-typeset .ev-orgbio .ev-copy {
    justify-self: start;
  }
}

@media (prefers-reduced-motion: reduce) {
  .md-typeset a.ev-chip,
  .md-typeset a.ev-email__address {
    transition: none;
  }
}

/* 30. Teaching header and course path -------------------------------------- */

.md-typeset figure.ev-grow {
  display: block;
  width: 100%;
  max-width: 15rem;
  margin: 0 1.5rem 0 auto;
}

.ev-grow__svg {
  display: block;
  width: 100%;
  height: auto;
  overflow: visible;
}

.ev-grow__svg rect { shape-rendering: crispEdges; }
.ev-grow__dark rect { fill: var(--ev-board-dark); }

.ev-grow__svg rect.ev-grow__edge {
  fill: none;
  stroke: var(--ev-line-strong);
  stroke-width: 1;
}

.ev-grow__files text,
.ev-grow__ranks text {
  font-family: var(--ev-sans);
  font-size: 9px;
  font-weight: 500;
  fill: var(--ev-muted);
  text-anchor: middle;
}

.ev-grow__trail {
  stroke: var(--ev-teal-ink);
  stroke-width: 1.4;
  stroke-dasharray: 1;
  stroke-dashoffset: 0;
  opacity: 0.55;
  animation: ev-tour 0.9s calc(0.3s + var(--i) * 0.12s) cubic-bezier(0.45, 0.05, 0.35, 1) both;
}

.ev-grow__origin {
  fill: var(--ev-sheet);
  stroke: var(--ev-teal-ink);
  stroke-width: 1.2;
  opacity: 0.7;
}

.ev-grow__pawn {
  fill: var(--ev-sheet);
  stroke: var(--ev-ink);
  stroke-width: 2.2;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.ev-grow__qicon {
  fill: var(--ev-mint);
  stroke: #16213A;
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.ev-grow__halo {
  fill: var(--ev-mint);
  opacity: 0.9;
}

.ev-grow__queen {
  transform-box: fill-box;
  transform-origin: center;
  animation: ev-arrive 0.5s 1.6s ease-out both;
}

.ev-grow__note {
  font-family: var(--ev-sans);
  font-size: 10px;
  font-weight: 700;
  fill: var(--ev-oxblood);
}

.md-typeset .ev-grow figcaption {
  max-width: none;
  margin: 0.8rem 0 0 1.4rem;
  padding-left: 0.7rem;
  border-left: 2px solid var(--ev-mint);
  font-size: 0.7rem;
  font-style: italic;
  line-height: 1.5;
  text-align: left;
  color: var(--ev-muted);
}

/* Office hours at a glance, right under the lead */
.md-typeset .ev-hourspill {
  display: inline-flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.3rem 0.7rem;
  margin: 1.3rem 0 0;
  padding: 0.45rem 0.9rem 0.45rem 0.5rem;
  border: 1px solid var(--ev-line-strong);
  border-radius: 999px;
  background-color: var(--ev-sheet);
  font-family: var(--ev-sans);
  font-size: 0.72rem;
  color: var(--ev-ink-2);
}

.md-typeset .ev-hourspill span {
  padding: 0.1rem 0.55rem;
  border-radius: 999px;
  background-color: var(--ev-mint-soft);
  font-size: 0.7rem;
  font-weight: 600;
  color: var(--ev-teal-ink);
}

.md-typeset .ev-hourspill a {
  font-weight: 600;
  color: var(--ev-ink);
  text-decoration-color: var(--ev-teal-ink);
  text-decoration-thickness: 2px;
  text-underline-offset: 0.3em;
}

/* Courses read as a path: small chevrons between the cards */
.md-typeset .ev-courses-row--path {
  gap: 1.4rem;
}

.md-typeset .ev-courses-row--path .ev-course:not(:last-child)::after {
  content: "";
  position: absolute;
  top: 50%;
  right: -0.95rem;
  width: 0.5rem;
  height: 0.5rem;
  border-top: 2px solid var(--ev-line-strong);
  border-right: 2px solid var(--ev-line-strong);
  transform: translateY(-50%) rotate(45deg);
}

.md-typeset .ev-course__links {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 0.4rem 1rem;
  margin-top: 1rem !important;
  padding-top: 0.8rem;
  border-top: 1px solid var(--ev-line);
}

.md-typeset .ev-course__links a.ev-textlink {
  font-size: 0.74rem;
}

.md-typeset a.ev-course__alt {
  font-family: var(--ev-sans);
  font-size: 0.7rem;
  font-weight: 500;
  color: var(--ev-muted);
}

.md-typeset .ev-course .ev-chips {
  margin-top: auto !important;
}

@media screen and (max-width: 60em) {
  .md-typeset figure.ev-grow {
    max-width: 12rem;
    margin: 0;
  }

  .md-typeset .ev-courses-row--path .ev-course:not(:last-child)::after {
    top: auto;
    right: auto;
    bottom: -0.95rem;
    left: 50%;
    transform: translateX(-50%) rotate(135deg);
  }
}

@media screen and (max-width: 44.9375em) {
  .md-typeset .ev-students {
    grid-template-columns: minmax(0, 1fr);
  }

  .md-typeset .ev-hourspill {
    display: flex;
    border-radius: var(--ev-r);
    padding: 0.6rem 0.8rem;
  }
}

@media (prefers-reduced-motion: reduce) {
  .ev-grow__trail,
  .ev-grow__queen {
    animation: none;
  }
}

/* 31. Teaching & Mentoring: one page ---------------------------------------- */

/* In-page menu under the header */
.md-typeset .ev-pagenav {
  display: flex;
  flex-wrap: wrap;
  gap: 0.4rem;
  margin: -1.2rem 0 2.4rem;
}

.md-typeset .ev-pagenav a {
  padding: 0.3rem 0.85rem;
  border: 1px solid var(--ev-line-strong);
  border-radius: 999px;
  background-color: var(--ev-sheet);
  font-family: var(--ev-sans);
  font-size: 0.7rem;
  font-weight: 600;
  color: var(--ev-ink-2);
  text-decoration: none;
  transition: border-color 0.12s ease, color 0.12s ease;
}

.md-typeset .ev-pagenav a:hover {
  border-color: var(--ev-teal-ink);
  color: var(--ev-teal-ink);
}

.md-typeset h2#courses,
.md-typeset h2#thesis,
.md-typeset h2#process,
.md-typeset h2#for-students {
  scroll-margin-top: 6rem;
}

/* Four cards in a row: three courses, then the thesis they lead to */
.md-typeset .ev-courses-row--path {
  grid-template-columns: repeat(4, minmax(0, 1fr));
}



/* Four topic cards per row, with the open invitation as the last one */
.md-typeset .ev-topics {
  grid-template-columns: repeat(4, minmax(0, 1fr));
}

.md-typeset .ev-topic--own {
  border-style: dashed;
  border-color: var(--ev-line-strong);
  background-color: transparent;
}

.md-typeset .ev-topic--own .ev-topic__skills a {
  font-size: 0.72rem;
}

/* Expectations as one quiet line each */
.md-typeset .ev-expect {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0.8rem 1.6rem;
  margin: 0 0 0.6rem;
}

.md-typeset .ev-expect p {
  margin: 0;
  padding-left: 0.9rem;
  border-left: 2px solid var(--ev-mint);
  font-size: 0.8rem;
  line-height: 1.55;
  color: var(--ev-ink-2);
}

.md-typeset .ev-expect span {
  display: block;
  font-family: var(--ev-sans);
  font-size: 0.7rem;
  font-weight: 600;
  color: var(--ev-teal-ink);
}

@media screen and (max-width: 76.1875em) {
  .md-typeset .ev-courses-row--path,
  .md-typeset .ev-topics {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .md-typeset .ev-courses-row--path .ev-course:not(:last-child)::after {
    display: none;
  }
}

@media screen and (max-width: 44.9375em) {
  .md-typeset .ev-courses-row--path,
  .md-typeset .ev-topics,
  .md-typeset .ev-expect {
    grid-template-columns: minmax(0, 1fr);
  }

  .md-typeset .ev-pagenav {
    margin-top: -0.6rem;
  }
}

@media (prefers-reduced-motion: reduce) {
  .md-typeset .ev-pagenav a {
    transition: none;
  }
}

/* 32. About: three tracks, one thread --------------------------------------- */

.md-typeset figure.ev-loop {
  display: block;
  width: 100%;
  max-width: 17rem;
  margin: 0 1rem 0 auto;
}

.ev-loop__svg {
  display: block;
  width: 100%;
  height: auto;
  overflow: visible;
}

.ev-loop__spokes line {
  stroke: var(--ev-line-strong);
  stroke-width: 1;
  stroke-dasharray: 3 4;
}

.ev-loop__thread {
  fill: none;
  stroke: var(--ev-teal-ink);
  stroke-width: 1.8;
  stroke-linecap: round;
  stroke-dasharray: 1;
  stroke-dashoffset: 0;
  opacity: 0.8;
  animation: ev-tour 2.4s 0.3s cubic-bezier(0.45, 0.05, 0.35, 1) both;
}

/* a small dot travels the thread once, then rests at Research */
.ev-loop__traveler {
  fill: var(--ev-oxblood);
  offset-rotate: 0deg;
  offset-distance: 0%;
  animation: ev-travel 3.2s 2.7s ease-in-out both;
}

@keyframes ev-travel {
  from { offset-distance: 0%; }
  to   { offset-distance: 100%; }
}

.ev-loop__hub circle {
  fill: #16213A;
  stroke: var(--ev-teal-ink);
  stroke-width: 1.5;
}

.ev-loop__hub text {
  font-family: var(--ev-sans);
  font-size: 11px;
  font-weight: 700;
  text-anchor: middle;
  fill: #B9F5E9;
}

.ev-loop__halo {
  fill: var(--ev-mint);
  opacity: 0.45;
}

.ev-loop__disc {
  fill: var(--ev-sheet);
  stroke: var(--ev-ink);
  stroke-width: 1.4;
}

.ev-loop__icon {
  fill: none;
  stroke: var(--ev-ink);
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.ev-loop__label {
  font-family: var(--ev-sans);
  font-size: 11.5px;
  font-weight: 600;
  text-anchor: middle;
  fill: var(--ev-ink);
}

.ev-loop__node {
  transform-box: fill-box;
  transform-origin: center;
  animation: ev-arrive 0.5s ease-out both;
}

.ev-loop__node--research  { animation-delay: 0.2s; }
.ev-loop__node--teaching  { animation-delay: 0.9s; }
.ev-loop__node--mentoring { animation-delay: 1.6s; }

.md-typeset .ev-loop figcaption {
  max-width: none;
  margin: 0.6rem 0 0 1rem;
  padding-left: 0.7rem;
  border-left: 2px solid var(--ev-mint);
  font-size: 0.7rem;
  font-style: italic;
  line-height: 1.5;
  text-align: left;
  color: var(--ev-muted);
}

/* The three tracks as connected cards */
.ev-track--research  { --tr: var(--ev-research); --tr-bg: var(--ev-research-bg); }
.ev-track--teaching,
.ev-track--mentoring { --tr: var(--ev-learning); --tr-bg: var(--ev-learning-bg); }

.md-typeset .ev-tracks {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 6.5rem minmax(0, 1fr) 6.5rem minmax(0, 1fr);
  align-items: stretch;
  margin-top: 1rem;
}

.md-typeset a.ev-track {
  position: relative;
  display: flex;
  flex-direction: column;
  padding: 1.1rem 1.1rem 1rem;
  border: 1px solid var(--ev-line);
  border-radius: var(--ev-r);
  background-color: var(--ev-sheet);
  color: var(--ev-ink);
  text-decoration: none;
  transition: border-color 0.15s ease;
}

.md-typeset a.ev-track::before {
  content: "";
  position: absolute;
  top: -1px;
  left: 1rem;
  right: 1rem;
  height: 3px;
  border-radius: 0 0 3px 3px;
  background-color: var(--tr);
}

.md-typeset a.ev-track:hover {
  border-color: var(--tr);
}

.md-typeset a.ev-track:focus-visible {
  outline: 2px solid var(--tr);
  outline-offset: 3px;
}

.md-typeset .ev-track__icon {
  display: grid;
  place-items: center;
  width: 2.2rem;
  height: 2.2rem;
  margin-bottom: 0.8rem;
  border-radius: var(--ev-r-sm);
  background-color: var(--tr-bg);
  color: var(--tr);
}

.md-typeset .ev-track__icon svg {
  width: 1.15rem;
  height: 1.15rem;
}

.md-typeset a.ev-track strong {
  font-family: var(--ev-sans);
  font-size: 0.95rem;
  font-weight: 600;
}

.md-typeset .ev-track__line {
  margin-top: 0.25rem;
  font-size: 0.8rem;
  line-height: 1.5;
  color: var(--ev-ink-2);
}

.md-typeset .ev-track__fact {
  margin-top: auto;
  padding-top: 0.8rem;
  font-family: var(--ev-sans);
  font-size: 0.7rem;
  font-weight: 600;
  color: var(--tr);
}

/* The connector between two cards: a line with what flows along it */
.md-typeset .ev-track__link {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
}

.md-typeset .ev-track__link::before {
  content: "";
  position: absolute;
  top: 50%;
  left: 0;
  right: 0.3rem;
  border-top: 2px solid var(--ev-teal-ink);
  opacity: 0.6;
}

.md-typeset .ev-track__link::after {
  content: "";
  position: absolute;
  top: 50%;
  right: 0.1rem;
  width: 0.45rem;
  height: 0.45rem;
  border-top: 2px solid var(--ev-teal-ink);
  border-right: 2px solid var(--ev-teal-ink);
  opacity: 0.6;
  transform: translateY(-50%) rotate(45deg);
}

.md-typeset .ev-track__link span {
  position: relative;
  z-index: 1;
  padding: 0.12rem 0.5rem;
  border-radius: 999px;
  background-color: var(--ev-paper);
  font-family: var(--ev-sans);
  font-size: 0.7rem;
  font-weight: 600;
  line-height: 1.3;
  text-align: center;
  color: var(--ev-teal-ink);
}

/* The way back: a dashed return line under the row */
.md-typeset .ev-tracks__return {
  position: relative;
  height: 2.6rem;
  margin: 0 calc(100% / 6) 0;
  border: 2px solid var(--ev-line-strong);
  border-top: 0;
  border-radius: 0 0 16px 16px;
}

.md-typeset .ev-tracks__return::before {
  content: "";
  position: absolute;
  top: -0.1rem;
  left: -0.42rem;
  width: 0.55rem;
  height: 0.55rem;
  border-top: 2px solid var(--ev-line-strong);
  border-left: 2px solid var(--ev-line-strong);
  transform: rotate(45deg);
}

.md-typeset .ev-tracks__return span {
  position: absolute;
  bottom: -0.75rem;
  left: 50%;
  padding: 0.12rem 0.7rem;
  border-radius: 999px;
  background-color: var(--ev-paper);
  font-family: var(--ev-sans);
  font-size: 0.7rem;
  font-weight: 600;
  white-space: nowrap;
  color: var(--ev-ink-2);
  transform: translateX(-50%);
}

@media screen and (max-width: 60em) {
  .md-typeset figure.ev-loop {
    max-width: 14rem;
    margin: 0;
  }

  .md-typeset .ev-tracks {
    grid-template-columns: minmax(0, 1fr);
  }

  .md-typeset .ev-track__link {
    height: 2.4rem;
  }

  .md-typeset .ev-track__link::before {
    top: 0;
    bottom: 0.3rem;
    left: 50%;
    right: auto;
    border-top: 0;
    border-left: 2px solid var(--ev-teal-ink);
  }

  .md-typeset .ev-track__link::after {
    top: auto;
    bottom: 0.15rem;
    right: auto;
    left: calc(50% - 0.2rem);
    transform: rotate(135deg);
  }

  .md-typeset .ev-tracks__return {
    height: auto;
    margin: 1rem 0 0;
    border: 0;
  }

  .md-typeset .ev-tracks__return::before {
    display: none;
  }

  .md-typeset .ev-tracks__return span {
    position: static;
    display: inline-block;
    transform: none;
    white-space: normal;
  }
}

@media (prefers-reduced-motion: reduce) {
  .ev-loop__thread,
  .ev-loop__traveler,
  .ev-loop__node {
    animation: none;
  }

  .ev-loop__traveler {
    offset-distance: 0%;
  }

  .md-typeset a.ev-track {
    transition: none;
  }
}

/* 33. Initiatives: reach graphic and RoboTech feature ----------------------- */

.md-typeset figure.ev-reach {
  display: block;
  width: 100%;
  max-width: 17rem;
  margin: 0 1rem 0 auto;
}

.ev-reach__svg {
  display: block;
  width: 100%;
  height: auto;
  overflow: visible;
}

.ev-reach__rings circle {
  fill: none;
  stroke: var(--ev-line-strong);
  stroke-width: 1;
  stroke-dasharray: 3 5;
}

.ev-reach__e1 line,
.ev-reach__e2 line {
  stroke: var(--ev-teal-ink);
  stroke-width: 1.5;
  stroke-linecap: round;
  stroke-dasharray: 1;
  stroke-dashoffset: 0;
  opacity: 0.7;
}

.ev-reach__e1 line {
  animation: ev-tour 0.5s calc(0.3s + var(--i) * 0.15s) ease-out both;
}

.ev-reach__e2 line {
  stroke-width: 1.1;
  opacity: 0.5;
  animation: ev-tour 0.4s calc(1.1s + var(--i) * 0.07s) ease-out both;
}

.ev-reach__n1 circle {
  fill: var(--ev-teal-ink);
  stroke: var(--ev-paper);
  stroke-width: 2;
  transform-box: fill-box;
  transform-origin: center;
  animation: ev-arrive 0.4s calc(0.7s + var(--i) * 0.15s) ease-out both;
}

.ev-reach__n2 circle {
  fill: var(--ev-sheet);
  stroke: var(--ev-ink);
  stroke-width: 1.4;
  transform-box: fill-box;
  transform-origin: center;
  animation: ev-arrive 0.35s calc(1.4s + var(--i) * 0.07s) ease-out both;
}

.ev-reach__core circle {
  fill: var(--ev-ink);
}

.ev-reach__core circle.ev-reach__halo {
  fill: var(--ev-mint);
  opacity: 0.8;
}

.ev-reach__label {
  font-family: var(--ev-sans);
  font-size: 10px;
  font-weight: 600;
  text-anchor: middle;
  fill: var(--ev-muted);
}

.md-typeset .ev-reach figcaption {
  max-width: none;
  margin: 0.6rem 0 0 1rem;
  padding-left: 0.7rem;
  border-left: 2px solid var(--ev-mint);
  font-size: 0.7rem;
  font-style: italic;
  line-height: 1.5;
  text-align: left;
  color: var(--ev-muted);
}

/* Audiences, from first robot to the workplace */
.md-typeset .ev-audience {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.3rem;
  margin: 1.2rem 0 0;
}

.md-typeset .ev-audience span {
  position: relative;
  padding: 0.2rem 0.7rem;
  border: 1px solid var(--ev-line-strong);
  border-radius: 999px;
  background-color: var(--ev-sheet);
  font-family: var(--ev-sans);
  font-size: 0.7rem;
  font-weight: 600;
  color: var(--ev-ink-2);
}

.md-typeset .ev-audience span + span {
  margin-left: 0.9rem;
}

.md-typeset .ev-audience span + span::before {
  content: "";
  position: absolute;
  top: 50%;
  left: -0.85rem;
  width: 0.6rem;
  border-top: 2px solid var(--ev-line-strong);
}

/* RoboTech: one wide featured card */
.md-typeset .ev-feature {
  display: grid;
  grid-template-columns: minmax(0, 1.5fr) minmax(0, 1fr);
  gap: 2rem;
  margin: 0 0 1rem;
  padding: 1.5rem 1.6rem 1.4rem;
  border: 1px solid var(--ev-line);
  border-radius: var(--ev-r);
  background-color: var(--ev-sheet);
  box-shadow: inset 0 3px 0 var(--ev-building);
}

.md-typeset .ev-feature p {
  margin: 0;
}

.md-typeset h2.ev-feature__title {
  margin: 0.6rem 0 0.5rem;
  font-size: 1.6rem;
  letter-spacing: -0.025em;
}

.md-typeset .ev-feature__lead {
  font-size: 0.88rem;
  line-height: 1.6;
  color: var(--ev-ink-2);
}

.md-typeset .ev-feature__role {
  margin-top: 0.9rem !important;
  padding: 0.7rem 0.9rem;
  border-radius: var(--ev-r-sm);
  background-color: var(--ev-mint-soft);
  font-size: 0.82rem;
  line-height: 1.55;
}

.md-typeset .ev-feature__role strong {
  font-family: var(--ev-sans);
  font-weight: 600;
  color: var(--ev-teal-ink);
}

.md-typeset dl.ev-feature__facts {
  align-self: center;
  margin: 0;
}

.md-typeset .ev-feature__facts > div {
  display: grid;
  grid-template-columns: 5.4rem minmax(0, 1fr);
  gap: 0.8rem;
  padding: 0.6rem 0;
  border-top: 1px solid var(--ev-line);
}

.md-typeset .ev-feature__facts > div:last-child {
  border-bottom: 1px solid var(--ev-line);
}

.md-typeset .ev-feature__facts dt {
  font-family: var(--ev-sans);
  font-size: 0.7rem;
  font-weight: 600;
  line-height: 1.8;
  color: var(--ev-muted);
}

.md-typeset .ev-feature__facts dd {
  margin: 0;
  font-size: 0.8rem;
  line-height: 1.55;
}

.md-typeset .ev-programs--three {
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

.md-typeset .ev-programs--three .ev-course__links {
  margin-top: 0.6rem !important;
}

.md-typeset .ev-program > p.ev-course__links {
  margin-top: 0.6rem;
}

@media screen and (max-width: 60em) {
  .md-typeset figure.ev-reach {
    max-width: 13rem;
    margin: 0;
  }

  .md-typeset .ev-feature,
  .md-typeset .ev-programs--three {
    grid-template-columns: minmax(0, 1fr);
  }
}

@media screen and (max-width: 44.9375em) {
  .md-typeset .ev-audience span + span {
    margin-left: 0;
  }

  .md-typeset .ev-audience span + span::before {
    display: none;
  }
}

@media (prefers-reduced-motion: reduce) {
  .ev-reach__e1 line,
  .ev-reach__e2 line,
  .ev-reach__n1 circle,
  .ev-reach__n2 circle {
    animation: none;
  }
}

/* 34. Home: Now and closing line -------------------------------------------- */

.md-typeset .ev-tag--event { background-color: var(--ev-building-bg); color: var(--ev-building); }

.md-typeset .ev-now {
  display: grid;
  grid-template-columns: minmax(0, 1.55fr) minmax(0, 1fr);
  gap: 2rem;
  align-items: start;
}

.md-typeset .ev-now__label {
  display: block;
  margin: 0 0 0.6rem;
  font-family: var(--ev-sans);
  font-size: 0.7rem;
  font-weight: 600;
  color: var(--ev-teal-ink);
}

.md-typeset .ev-moves p a {
  color: var(--ev-ink-2);
  text-decoration: none;
}

.md-typeset .ev-moves p a:hover {
  color: var(--ev-teal-ink);
  text-decoration: underline;
  text-decoration-color: var(--ev-teal-ink);
}

.md-typeset .ev-now__side {
  display: grid;
  gap: 0.8rem;
}

.md-typeset a.ev-nowcard {
  display: flex;
  flex-direction: column;
  gap: 0.35rem;
  padding: 1rem 1.1rem;
  border: 1px solid var(--ev-line);
  border-radius: var(--ev-r);
  background-color: var(--ev-sheet);
  color: var(--ev-ink);
  text-decoration: none;
  transition: border-color 0.15s ease;
}

.md-typeset a.ev-nowcard:hover {
  border-color: var(--ev-teal-ink);
}

.md-typeset a.ev-nowcard .ev-now__label {
  margin: 0;
}

.md-typeset .ev-nowcard__meta {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  font-family: var(--ev-sans);
  font-size: 0.7rem;
  font-weight: 600;
  color: var(--ev-muted);
}

.md-typeset a.ev-nowcard strong {
  font-family: var(--ev-sans);
  font-size: 0.9rem;
  font-weight: 600;
  line-height: 1.35;
}

.md-typeset .ev-nowcard__line {
  font-size: 0.78rem;
  line-height: 1.5;
  color: var(--ev-ink-2);
}

.md-typeset .ev-nowcard__more {
  margin-top: 0.3rem;
  font-family: var(--ev-sans);
  font-size: 0.7rem;
  font-weight: 600;
  color: var(--ev-teal-ink);
}

.md-typeset a.ev-nowcard--call {
  border-style: dashed;
  border-color: var(--ev-teal-ink);
  background-color: var(--ev-mint-soft);
}

/* Closing line */
.md-typeset .ev-closing {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 1rem 2rem;
  margin: 0 0 3rem;
  padding: 1.4rem 1.6rem;
  border-radius: var(--ev-r);
  background-color: var(--ev-sheet);
  border: 1px solid var(--ev-line);
}

.md-typeset .ev-closing__title {
  margin: 0;
  font-family: var(--ev-sans);
  font-size: 1.15rem;
  font-weight: 600;
  letter-spacing: -0.015em;
  color: var(--ev-ink);
}

.md-typeset .ev-closing .ev-chips-row {
  align-items: center;
  margin: 0;
}

.md-typeset .ev-closing .ev-chips-row a.ev-textlink {
  margin-left: 0.4rem;
  font-size: 0.72rem;
}

@media screen and (max-width: 60em) {
  .md-typeset .ev-now {
    grid-template-columns: minmax(0, 1fr);
  }
}

@media (prefers-reduced-motion: reduce) {
  .md-typeset a.ev-nowcard {
    transition: none;
  }
}

/* 35. Refinement: the ink panel and small hierarchy fixes -------------------
   Three levels across the site: paper (no box), sheet (white card) and ink
   (dark panel). Ink is used at most once per page, for its focal element. */

.md-typeset .ev-ink {
  border-color: var(--ev-panel) !important;
  background: var(--ev-panel) !important;
  box-shadow: 0 18px 40px -28px rgba(15, 27, 61, 0.55) !important;
  color: var(--ev-panel-ink);
}

.md-typeset .ev-ink h2,
.md-typeset .ev-ink h3,
.md-typeset .ev-ink strong,
.md-typeset .ev-ink .ev-closing__title {
  color: var(--ev-panel-ink);
}

.md-typeset .ev-ink p,
.md-typeset .ev-ink dd,
.md-typeset .ev-ink .ev-course__line,
.md-typeset .ev-ink .ev-feature__lead {
  color: var(--ev-panel-muted);
}

.md-typeset .ev-ink dt,
.md-typeset .ev-ink .ev-course__where,
.md-typeset .ev-ink .ev-program__meta {
  color: var(--ev-mint) !important;
}

.md-typeset .ev-ink a,
.md-typeset .ev-ink a.ev-textlink {
  color: var(--ev-panel-ink);
  text-decoration-color: var(--ev-mint);
}

.md-typeset .ev-ink a:hover,
.md-typeset .ev-ink a.ev-textlink:hover {
  color: var(--ev-mint);
}

.md-typeset .ev-ink .ev-chips span {
  box-shadow: inset 0 0 0 1px var(--ev-panel-line);
  color: var(--ev-panel-muted);
}

.md-typeset .ev-ink .ev-course__links,
.md-typeset .ev-ink .ev-feature__facts > div,
.md-typeset .ev-ink .ev-feature__facts > div:last-child {
  border-color: var(--ev-panel-line);
}

.md-typeset .ev-ink .ev-feature__role {
  background-color: rgba(185, 245, 233, 0.1);
  color: var(--ev-panel-ink);
}

.md-typeset .ev-ink .ev-feature__role strong {
  color: var(--ev-mint);
}

.md-typeset .ev-ink .ev-tag {
  background-color: rgba(240, 154, 142, 0.18);
  color: #F5B3AA;
}

.md-typeset .ev-ink a.ev-chip {
  border-color: var(--ev-panel-line);
  background-color: transparent;
  color: var(--ev-panel-ink);
}

.md-typeset .ev-ink a.ev-chip:hover {
  border-color: var(--ev-mint);
  color: var(--ev-mint);
}

/* the research callout as an ink panel: no side bar */
.md-typeset .ev-callout.ev-ink {
  box-shadow: 0 18px 40px -28px rgba(15, 27, 61, 0.55) !important;
}

/* home doors: each audience in its site-wide colour */
.md-typeset .ev-door:nth-child(1) .twemoji.ev-door__piece { background-color: var(--ev-research-bg); color: var(--ev-research); }
.md-typeset .ev-door:nth-child(2) .twemoji.ev-door__piece { background-color: var(--ev-learning-bg); color: var(--ev-learning); }
.md-typeset .ev-door:nth-child(3) .twemoji.ev-door__piece { background-color: var(--ev-building-bg); color: var(--ev-building); }

/* the doors divide with plain hairlines now */
.md-typeset .ev-door + .ev-door {
  border-left-style: solid;
  border-left-color: var(--ev-line);
}

/* In the night notebook the ink panel sits darker than the page, with a mint edge */
[data-md-color-scheme="slate"] .md-typeset .ev-ink {
  border-color: rgba(185, 245, 233, 0.28) !important;
  box-shadow: none !important;
}

/* 36. Home: roles line, door pills, milestone tag --------------------------- */

.md-typeset .ev-kicker--roles {
  gap: 0.7rem;
  font-weight: 600;
}

.md-typeset .ev-kicker--roles span + span {
  padding-left: 0.7rem;
  border-left: 1px solid var(--ev-line-strong);
}

/* "Where to start": shorter cards, links as a row of pills */
.md-typeset .ev-door {
  padding: 1.3rem 1.4rem 1.3rem;
}

.md-typeset .ev-door > p:first-child {
  margin-bottom: 0.8rem;
}

.md-typeset .ev-door > p:not(:first-child) {
  margin-bottom: 0.2rem;
}

.md-typeset .ev-door > ul {
  display: flex;
  flex-wrap: wrap;
  gap: 0.4rem;
  margin: auto 0 0;
  padding: 1rem 0 0;
  border-top: 0;
}

.md-typeset .ev-door > ul li {
  margin: 0;
  padding: 0;
}

.md-typeset .ev-door > ul a {
  display: inline-flex;
  align-items: center;
  height: 1.75rem;
  padding: 0 0.8rem;
  border: 1px solid var(--ev-line-strong);
  border-radius: 999px;
  background-color: var(--ev-paper);
  font-size: 0.7rem;
  text-decoration: none;
  transition: border-color 0.12s ease, color 0.12s ease;
}

.md-typeset .ev-door > ul a:hover {
  border-color: var(--ev-teal-ink);
  color: var(--ev-teal-ink);
  text-decoration: none;
}

/* Milestones use the ink colour, so they stand apart from papers and programs */
.md-typeset .ev-tag--milestone {
  background-color: var(--ev-panel);
  color: var(--ev-mint);
}

.md-typeset ol.ev-moves li {
  grid-template-columns: 4.6rem 5.8rem minmax(0, 1fr);
}

@media screen and (max-width: 44.9375em) {
  .md-typeset ol.ev-moves li {
    grid-template-columns: auto minmax(0, 1fr);
  }
}

@media (prefers-reduced-motion: reduce) {
  .md-typeset .ev-door > ul a {
    transition: none;
  }
}

/* 37. Research: dissertation, media and the closing invitation ------------- */

/* The dissertation, as one quiet line of record under the page head */
.md-typeset .ev-thesis {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: center;
  gap: 0.6rem 1.6rem;
  margin: -0.8rem 0 2.2rem;
  padding: 1rem 1.3rem;
  border: 1px solid var(--ev-line);
  border-left: 3px solid var(--ev-research);
  border-radius: var(--ev-r);
  background-color: var(--ev-sheet);
}

.md-typeset .ev-thesis p {
  margin: 0;
}

.md-typeset .ev-thesis__label {
  font-family: var(--ev-sans);
  font-size: 0.7rem;
  font-weight: 600;
  color: var(--ev-research);
  white-space: nowrap;
}

.md-typeset .ev-thesis__title {
  font-family: var(--ev-sans);
  font-size: 0.92rem;
  font-weight: 600;
  line-height: 1.35;
  color: var(--ev-ink);
}

.md-typeset .ev-thesis__sub {
  margin-top: 0.15rem !important;
  font-size: 0.84rem;
  font-style: italic;
  color: var(--ev-ink-2);
}

.md-typeset .ev-thesis__meta {
  font-family: var(--ev-sans);
  font-size: 0.7rem;
  line-height: 1.5;
  text-align: right;
  color: var(--ev-muted);
}

/* Media on a question card: a picture that becomes a video when clicked */
.md-typeset .ev-q--media {
  padding-top: 0.75rem;
}

.md-typeset figure.ev-media {
  display: block;
  width: auto;
  max-width: none;
  margin: 0 -0.45rem 0.9rem;
}

.md-typeset .ev-media__frame {
  position: relative;
  display: block;
  width: 100%;
  aspect-ratio: 16 / 9;
  overflow: hidden;
  padding: 0;
  border: 1px solid var(--ev-line);
  border-radius: var(--ev-r-sm);
  background-color: var(--ev-board-dark);
  cursor: pointer;
}

.md-typeset div.ev-media__frame {
  cursor: default;
}

.md-typeset .ev-media__frame img,
.md-typeset .ev-media__frame video,
.md-typeset .ev-media__frame iframe {
  display: block;
  width: 100%;
  height: 100%;
  border: 0;
  object-fit: cover;
}

.md-typeset .ev-media__play {
  position: absolute;
  top: 50%;
  left: 50%;
  display: grid;
  place-items: center;
  width: 3rem;
  height: 3rem;
  border-radius: 50%;
  background-color: rgba(22, 33, 58, 0.82);
  box-shadow: 0 0 0 0.35rem rgba(185, 245, 233, 0.5);
  transform: translate(-50%, -50%);
  transition: transform 0.15s ease, box-shadow 0.15s ease;
}

.md-typeset .ev-media__play svg {
  width: 1.2rem;
  height: 1.2rem;
  margin-left: 0.15rem;
  fill: #F3F7F5;
}

.md-typeset button.ev-media__frame:hover .ev-media__play,
.md-typeset button.ev-media__frame:focus-visible .ev-media__play {
  box-shadow: 0 0 0 0.5rem rgba(185, 245, 233, 0.75);
  transform: translate(-50%, -50%) scale(1.06);
}

.md-typeset button.ev-media__frame:focus-visible {
  outline: 2px solid var(--ev-teal-ink);
  outline-offset: 3px;
}

.md-typeset .ev-media__length {
  position: absolute;
  right: 0.5rem;
  bottom: 0.5rem;
  padding: 0.1rem 0.45rem;
  border-radius: 6px;
  background-color: rgba(22, 33, 58, 0.82);
  font-family: var(--ev-sans);
  font-size: 0.7rem;
  font-weight: 600;
  color: #F3F7F5;
}

/* The closing invitation, in three clear lines */
.md-typeset .ev-invite {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  gap: 0.2rem 2rem;
  padding: 1.4rem 1.6rem;
}

.md-typeset .ev-invite p {
  margin: 0;
}

.md-typeset .ev-invite__title {
  font-family: var(--ev-sans);
  font-size: 1.1rem;
  font-weight: 600;
  letter-spacing: -0.01em;
  color: var(--ev-panel-ink) !important;
}

.md-typeset .ev-invite__text {
  grid-column: 1;
  font-size: 0.9rem;
}

.md-typeset .ev-invite__actions {
  grid-column: 2;
  grid-row: 1 / span 2;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.6rem 1.2rem;
}

.md-typeset .ev-invite a.ev-btn--light {
  background-color: var(--ev-mint);
  color: #16213A;
  text-decoration: none;
}

.md-typeset .ev-invite a.ev-btn--light:hover {
  background-color: #FFFFFF;
  color: #16213A;
}

@media screen and (max-width: 60em) {
  .md-typeset .ev-thesis {
    grid-template-columns: minmax(0, 1fr);
    margin-top: 0;
  }

  .md-typeset .ev-thesis__meta {
    text-align: left;
  }

  .md-typeset .ev-invite {
    grid-template-columns: minmax(0, 1fr);
  }

  .md-typeset .ev-invite__actions {
    grid-column: 1;
    grid-row: auto;
    margin-top: 0.8rem !important;
  }
}

@media (prefers-reduced-motion: reduce) {
  .md-typeset .ev-media__play {
    transition: none;
  }
}

/* 38. Teaching: the philosophy loop ----------------------------------------- */

.md-typeset h2#how-i-teach {
  scroll-margin-top: 6rem;
}

.md-typeset .ev-teach {
  display: grid;
  grid-template-columns: minmax(0, 20rem) minmax(0, 1fr);
  grid-template-areas: "fig steps" "fig note";
  gap: 0.6rem 3rem;
  align-items: center;
  margin: 0 0 1rem;
}

.md-typeset figure.ev-teach__fig {
  grid-area: fig;
  display: block;
  width: 100%;
  max-width: 20rem;
  margin: 0;
}

.ev-teach__svg {
  display: block;
  width: 100%;
  height: auto;
  overflow: visible;
}

/* AI: a dashed ring around the whole loop, present but outside it */
.ev-teach__ring {
  fill: none;
  stroke: var(--ev-teal-ink);
  stroke-width: 1.3;
  stroke-dasharray: 5 6;
  opacity: 0.55;
  animation: ev-fade-in 0.8s 1.9s ease-out both;
}

.ev-teach__loop {
  fill: none;
  stroke: var(--ev-line-strong);
  stroke-width: 2;
  stroke-dasharray: 1;
  stroke-dashoffset: 0;
  animation: ev-tour 1.3s 0.3s cubic-bezier(0.45, 0.05, 0.35, 1) both;
}

.ev-teach__chev path {
  fill: none;
  stroke: var(--ev-muted);
  stroke-width: 1.6;
  stroke-linecap: round;
  stroke-linejoin: round;
  animation: ev-fade-in 0.4s 1.5s ease-out both;
}

.ev-teach__core circle {
  fill: #B9F5E9;
  opacity: 0.6;
}

[data-md-color-scheme="slate"] .ev-teach__core circle {
  opacity: 0.9;
}

.ev-teach__core text {
  font-family: var(--ev-sans);
  font-size: 10.5px;
  font-weight: 600;
  text-anchor: middle;
  fill: #16213A;
}

.ev-teach__step {
  transform-box: fill-box;
  transform-origin: center;
  animation: ev-arrive 0.4s calc(0.4s + var(--i) * 0.22s) ease-out both;
}

.ev-teach__step rect {
  fill: var(--ev-sheet);
  stroke: var(--ev-line-strong);
}

.ev-teach__step circle {
  fill: var(--ev-ink);
}

.ev-teach__num {
  font-family: var(--ev-sans);
  font-size: 10px;
  font-weight: 700;
  text-anchor: middle;
  fill: var(--ev-paper);
}

.ev-teach__name {
  font-family: var(--ev-sans);
  font-size: 11px;
  font-weight: 600;
  fill: var(--ev-ink);
}

.ev-teach__ai {
  animation: ev-fade-in 0.6s 2.2s ease-out both;
}

.ev-teach__ai rect {
  fill: var(--ev-paper);
  stroke: var(--ev-teal-ink);
  stroke-dasharray: 4 4;
}

.ev-teach__ai text {
  font-family: var(--ev-sans);
  font-size: 11px;
  font-weight: 600;
  text-anchor: middle;
  fill: var(--ev-teal-ink);
}

@keyframes ev-fade-in {
  from { opacity: 0; }
}

/* The five steps in words, beside the diagram */
.md-typeset ol.ev-teach__steps {
  grid-area: steps;
  align-self: end;
  margin: 0;
  padding: 0;
  list-style: none;
  counter-reset: teach;
}

.md-typeset ol.ev-teach__steps li {
  display: grid;
  grid-template-columns: 1.8rem 8.5rem minmax(0, 1fr);
  align-items: baseline;
  gap: 0.6rem;
  margin: 0;
  padding: 0.55rem 0;
  border-top: 1px solid var(--ev-line);
  counter-increment: teach;
}

.md-typeset ol.ev-teach__steps li::before {
  content: counter(teach);
  display: grid;
  place-items: center;
  width: 1.35rem;
  height: 1.35rem;
  border-radius: 50%;
  background-color: var(--ev-ink);
  font-family: var(--ev-sans);
  font-size: 0.7rem;
  font-weight: 700;
  color: var(--ev-paper);
}

.md-typeset ol.ev-teach__steps strong {
  font-family: var(--ev-sans);
  font-size: 0.86rem;
  font-weight: 600;
}

.md-typeset ol.ev-teach__steps span {
  font-size: 0.84rem;
  line-height: 1.5;
  color: var(--ev-ink-2);
}

.md-typeset .ev-teach__ai-note {
  grid-area: note;
  align-self: start;
  margin: 0.4rem 0 0;
  padding: 0.75rem 1rem;
  border: 1px dashed var(--ev-teal-ink);
  border-radius: var(--ev-r);
  background-color: var(--ev-mint-soft);
  font-size: 0.84rem;
  line-height: 1.55;
  color: var(--ev-ink-2);
}

.md-typeset .ev-teach__ai-note strong {
  font-family: var(--ev-sans);
  color: var(--ev-teal-ink);
}

@media screen and (max-width: 60em) {
  .md-typeset .ev-teach {
    grid-template-columns: minmax(0, 1fr);
    grid-template-areas: "fig" "steps" "note";
  }

  .md-typeset figure.ev-teach__fig {
    max-width: 17rem;
    margin: 0 auto 0.6rem;
  }

  .md-typeset ol.ev-teach__steps li {
    grid-template-columns: 1.8rem minmax(0, 1fr);
  }

  .md-typeset ol.ev-teach__steps span {
    grid-column: 2;
  }
}

@media (prefers-reduced-motion: reduce) {
  .ev-teach__ring,
  .ev-teach__loop,
  .ev-teach__chev path,
  .ev-teach__step,
  .ev-teach__ai {
    animation: none;
  }
}