:root {
    --paper: #F6F4F4;
    --ink: #241C20;
    --muted: #6E6266;
    --accent: #7A1F35;
    --line: #E0D8DA;
    --wave: #7A1F35;
    --node: #9C6B76;
    --serif: Charter, "Bitstream Charter", "Sitka Text", Cambria, Georgia, serif;
  }
  @media (prefers-color-scheme: dark) {
    :root {
      --paper: #1C1719;
      --ink: #EDE6E8;
      --muted: #A99CA0;
      --accent: #D9899B;
      --line: #3A2F33;
      --wave: #D9899B;
      --node: #B8939C;
    }
  }
  * { box-sizing: border-box; }
  html { -webkit-text-size-adjust: 100%; }
  body {
    margin: 0;
    background: var(--paper);
    color: var(--ink);
    font-family: var(--serif);
    font-size: 1.0625rem;
    line-height: 1.65;
  }
  a { color: var(--accent); text-decoration-thickness: 1px; text-underline-offset: 0.18em; }
  a:hover { text-decoration-thickness: 2px; }
  a:focus-visible, button:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; border-radius: 2px; }

  .page { max-width: 54rem; margin: 0 auto; padding: 3.5rem 1.5rem 4rem; }

  .top { display: flex; }
  .lang button {
    font: inherit; font-size: 0.9rem; background: none; border: 0; padding: 0.2rem 0.35rem;
    color: var(--muted); cursor: pointer;
  }
  .lang button[aria-pressed="true"] { color: var(--ink); text-decoration: underline; text-underline-offset: 0.25em; }

  header { margin: 2rem 0 3.5rem; }
  .motif { width: 100%; max-width: 28rem; height: auto; display: block; margin-bottom: 2rem; }
  .motif .edges line { stroke: var(--wave); stroke-width: 0.8; }
  .motif .node { fill: var(--paper); stroke: var(--node); stroke-width: 1.5; }
  .motif .node.in { fill: var(--node); }
  .motif .node.out { fill: var(--wave); stroke: var(--wave); }
  .motif .node, .motif .edges line { transition: fill 0.35s ease, stroke-width 0.35s ease, stroke-opacity 0.35s ease; }
  .motif .node.lit { fill: var(--wave); stroke: var(--wave); }
  .motif .edges line.hot { stroke-opacity: 1; stroke-width: 1.5; }
  .motif .pulse { fill: var(--wave); }
  h1 { font-size: clamp(2.2rem, 6vw, 3.4rem); font-weight: 400; line-height: 1.1; margin: 0 0 0.75rem; letter-spacing: -0.01em; }
  .role { color: var(--muted); font-size: 1.15rem; margin: 0; max-width: 36rem; }

  section { display: grid; grid-template-columns: 11rem 1fr; gap: 0 2.5rem; padding: 2rem 0; border-top: 1px solid var(--line); }
  h2 { font-size: 1rem; font-weight: 400; font-style: italic; color: var(--muted); margin: 0.2rem 0 1rem; }
  .body { max-width: 38rem; }
  .body p { margin: 0 0 1rem; }
  .body p:last-child { margin-bottom: 0; }
  .thesis { font-size: 1.2rem; line-height: 1.45; margin: 0 0 0.5rem; }
  .meta { color: var(--muted); }

  ol.path { list-style: none; margin: 0; padding: 0; }
  ol.path li { display: grid; grid-template-columns: 5.5rem 1fr; gap: 1rem; padding: 0.35rem 0; }
  ol.path .when { color: var(--muted); font-variant-numeric: oldstyle-nums; }

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

  footer { border-top: 1px solid var(--line); padding-top: 1.5rem; margin-top: 1rem; color: var(--muted); font-size: 0.9rem; }

  [data-lang] { display: none; }
  html[lang="en"] [data-lang="en"], html[lang="fr"] [data-lang="fr"] { display: revert; }

  @media (max-width: 40rem) {
    .page { padding-top: 2rem; }
    section { grid-template-columns: 1fr; }
    ol.path li { grid-template-columns: 4.5rem 1fr; }
  }

  @media (prefers-reduced-motion: no-preference) {
    .motif .edges, .motif .layer { opacity: 0; animation: appear 0.6s ease-out var(--d) forwards; }
    @keyframes appear { to { opacity: 1; } }
  }

  /* Navigation */
  .top { justify-content: space-between; align-items: baseline; gap: 1rem; flex-wrap: wrap; }
  nav a { color: var(--muted); text-decoration: none; margin-right: 1.25rem; }
  nav a:hover { color: var(--ink); }
  nav a[aria-current="page"] { color: var(--ink); text-decoration: underline; text-underline-offset: 0.25em; }

  /* Teaching page */
  header.small { margin: 2rem 0 2.5rem; }
  header.small h1 { font-size: clamp(1.9rem, 5vw, 2.6rem); }
  .course + .course { margin-top: 2.5rem; }
  h3 { font-size: 1.25rem; font-weight: 400; margin: 0 0 0.25rem; }
  ol.sessions { list-style: none; margin: 1rem 0 0; padding: 0; }
  ol.sessions li { padding: 0.6rem 0; border-top: 1px solid var(--line); }
  ol.sessions li:last-child { border-bottom: 1px solid var(--line); }
  ol.sessions .name { display: block; }
  ol.sessions .docs { display: flex; flex-wrap: wrap; gap: 0.25rem 1.25rem; font-size: 0.95rem; }
  .empty { color: var(--muted); font-style: italic; }
  /* The "materials will appear" note hides itself as soon as a session is listed */
  html .sessions:has(li) ~ .empty { display: none; }