:root {
  /* ═══════════════════════════════════════════════════════════════════════
     Raw Color Palette (light)
     ═══════════════════════════════════════════════════════════════════════ */
  --palette-primary: #130043;
  --palette-primary-light: #c4b1ff;
  --palette-secondary: #00ab82;
  --palette-secondary-dark: #006c53;
  --palette-accent: #b3003c;
  --palette-accent-light: #ffd0e0;
  --palette-accent-mid: #ff0055;
  --palette-accent-dark: #7a002a;
  --palette-warning: #ffbf00;
  --palette-success: #b5e800;
  --palette-inverse: #ffffff;

  --palette-neutral-50: #f8f7f3; /* Background secondary */
  --palette-neutral-100: #fffffa; /* Background primary */
  --palette-neutral-200: #e8ecef;
  --palette-neutral-300: #d7dfe5;
  --palette-neutral-400: #c5ced5;
  --palette-neutral-500: #9a9faa;
  --palette-neutral-600: #5d626d;
  --palette-neutral-700: #3d424b;
  --palette-neutral-800: #1e2a33;
  --palette-neutral-900: #0f1a22;

  /* ═══════════════════════════════════════════════════════════════════════
     Semantic Color Tokens
     ═══════════════════════════════════════════════════════════════════════ */
  --color-bg-page: var(--palette-neutral-100);
  --color-bg-surface: var(--palette-neutral-50);
  --color-bg-elevated: var(--palette-inverse);

  --color-text-primary: var(--palette-primary);
  --color-text-secondary: var(--palette-neutral-700);
  --color-text-muted: var(--palette-neutral-500);
  --color-text-inverse: var(--palette-inverse);

  --color-interactive: var(--palette-secondary);
  --color-interactive-hover: var(--palette-secondary-dark);
  --color-interactive-active: var(--palette-accent);

  --color-border: var(--palette-neutral-400);
  --color-border-light: var(--palette-neutral-300);
  --color-divider: var(--palette-neutral-200);

  --color-feedback-success: var(--palette-success);
  --color-feedback-warning: var(--palette-warning);
  --color-feedback-error: var(--palette-accent);

  --shadow-sm: 0 2px 4px rgba(8, 26, 42, 0.06);
  --shadow-md: 0 6px 14px rgba(8, 26, 42, 0.12);
  --shadow-lg: 0 9px 20px rgba(0, 0, 0, 0.14);

  /* ═══════════════════════════════════════════════════════════════════════
     Component-Specific Color Tokens
     ═══════════════════════════════════════════════════════════════════════ */
  --header-banner-bg: var(--palette-accent);
  --header-banner-text: var(--color-text-inverse);
  --header-banner-hover: var(--palette-inverse);

  --header-nav-bg: var(--color-bg-surface);
  --header-nav-link: var(--color-text-secondary);
  --header-nav-link-hover-bg: var(--palette-accent-light);
  --header-nav-link-hover-text: var(--color-text-primary);
  --header-border-color: var(--color-border);
  --header-shadow: var(--shadow-md);

 /* ═══════════════════════════════════════════════════════════════════════
     Icons
     The library: https://remixicon.com/icon/keynote-fill
     ═══════════════════════════════════════════════════════════════════════ */
  --icon-nav-home: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='black' d='M20 20C20 20.5523 19.5523 21 19 21H5C4.44772 21 4 20.5523 4 20V11L1 11L11.3273 1.6115C11.7087 1.26475 12.2913 1.26475 12.6727 1.6115L23 11L20 11V20ZM11 13V19H13V13H11Z'/%3E%3C/svg%3E");
  --icon-nav-cv: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='black' d='M12 2 0 9 12 16 22 10.1667V17.5H24V9L12 2ZM3.99902 13.4905V18.0001C5.82344 20.429 8.72812 22.0001 11.9998 22.0001 15.2714 22.0001 18.1761 20.429 20.0005 18.0001L20.0001 13.4913 12.0003 18.1579 3.99902 13.4905Z'/%3E%3C/svg%3E");
  --icon-nav-publications: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='black' d='M20 22H6.5C4.567 22 3 20.433 3 18.5V5C3 3.34315 4.34315 2 6 2H20C20.5523 2 21 2.44772 21 3V21C21 21.5523 20.5523 22 20 22ZM19 20V17H6.5C5.67157 17 5 17.6716 5 18.5C5 19.3284 5.67157 20 6.5 20H19Z'/%3E%3C/svg%3E");
  --icon-nav-teaching: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='black' d='M12.8995 6.85453L17.1421 11.0972L7.24264 20.9967H3V16.754L12.8995 6.85453ZM14.3137 5.44032L16.435 3.319C16.8256 2.92848 17.4587 2.92848 17.8492 3.319L20.6777 6.14743C21.0682 6.53795 21.0682 7.17112 20.6777 7.56164L18.5563 9.68296L14.3137 5.44032Z'/%3E%3C/svg%3E");
  --icon-nav-outreach: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='black' d='M5.23379 7.72989C6.65303 5.48625 9.15342 4 12.0002 4C14.847 4 17.3474 5.48625 18.7667 7.72989L20.4569 6.66071C18.6865 3.86199 15.5612 2 12.0002 2C8.43928 2 5.31393 3.86199 3.54356 6.66071L5.23379 7.72989ZM12.0002 20C9.15342 20 6.65303 18.5138 5.23379 16.2701L3.54356 17.3393C5.31393 20.138 8.43928 22 12.0002 22C15.5612 22 18.6865 20.138 20.4569 17.3393L18.7667 16.2701C17.3474 18.5138 14.847 20 12.0002 20ZM12 12C13.6569 12 15 10.6569 15 9C15 7.34315 13.6569 6 12 6C10.3431 6 9 7.34315 9 9C9 10.6569 10.3431 12 12 12ZM12 13C14.2091 13 16 14.7909 16 17H8C8 14.7909 9.79086 13 12 13ZM6 12C6 13.6569 4.65685 15 3 15C1.34315 15 0 13.6569 0 12C0 10.3431 1.34315 9 3 9C4.65685 9 6 10.3431 6 12ZM21 15C22.6569 15 24 13.6569 24 12C24 10.3431 22.6569 9 21 9C19.3431 9 18 10.3431 18 12C18 13.6569 19.3431 15 21 15Z' /%3E%3C/svg%3E");
  --icon-nav-blog: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='black' d='M7.29117 20.8242L2 22L3.17581 16.7088C2.42544 15.3056 2 13.7025 2 12C2 6.47715 6.47715 2 12 2C17.5228 2 22 6.47715 22 12C22 17.5228 17.5228 22 12 22C10.2975 22 8.6944 21.5746 7.29117 20.8242Z'/%3E%3C/svg%3E");
  --icon-nav-talks: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='black' d='M18.9992 2C19.552 2 20.086 2.42969 20.1955 2.97705L21.8047 11.023C21.9126 11.5626 21.5448 12 21.0083 12H12.9998V20H17.0001V22H7.00006V20H10.9998V12H2.99187C2.44411 12 2.086 11.5703 2.19547 11.023L3.80465 2.97705C3.91258 2.43744 4.4447 2 5.00094 2H18.9992Z'/%3E%3C/svg%3E");
  --icon-nav-projects: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='black' d='M8.5 2C6.567 2 5 3.567 5 5.5C5 5.68016 5.01364 5.85714 5.03993 6.02997C3.32436 6.25523 2 7.72295 2 9.5C2 10.4793 2.40223 11.3647 3.05051 12C2.40223 12.6353 2 13.5207 2 14.5C2 15.9018 2.82359 17.1104 4.01353 17.6693C4.00457 17.7785 4 17.8888 4 18C4 20.2091 5.79086 22 8 22C9.19469 22 10.2671 21.4762 11 20.6458V3.05051C10.3647 2.40223 9.47934 2 8.5 2ZM13 3.05051V20.6458C13.7329 21.4762 14.8053 22 16 22C18.2091 22 20 20.2091 20 18C20 17.8888 19.9954 17.7785 19.9865 17.6693C21.1764 17.1104 22 15.9018 22 14.5C22 13.5207 21.5978 12.6353 20.9495 12C21.5978 11.3647 22 10.4793 22 9.5C22 7.72295 20.6756 6.25523 18.9601 6.02997C18.9864 5.85714 19 5.68016 19 5.5C19 3.567 17.433 2 15.5 2C14.5207 2 13.6353 2.40223 13 3.05051Z'/%3E%3C/svg%3E");
  
  --icon-theme-toggle: var(--icon-theme-toggle-light);
  --icon-theme-toggle-dark: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='black' d='M11.3807 2.01886C9.91573 3.38768 9 5.3369 9 7.49999C9 11.6421 12.3579 15 16.5 15C18.6631 15 20.6123 14.0843 21.9811 12.6193C21.6613 17.8537 17.3149 22 12 22C6.47715 22 2 17.5228 2 12C2 6.68514 6.14629 2.33869 11.3807 2.01886Z'/%3E%3C/svg%3E");
  --icon-theme-toggle-light: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='black' d='M12 18C8.68629 18 6 15.3137 6 12C6 8.68629 8.68629 6 12 6C15.3137 6 18 8.68629 18 12C18 15.3137 15.3137 18 12 18ZM11 1H13V4H11V1ZM11 20H13V23H11V20ZM3.51472 4.92893L4.92893 3.51472L7.05025 5.63604L5.63604 7.05025L3.51472 4.92893ZM16.9497 18.364L18.364 16.9497L20.4853 19.0711L19.0711 20.4853L16.9497 18.364ZM19.0711 3.51472L20.4853 4.92893L18.364 7.05025L16.9497 5.63604L19.0711 3.51472ZM5.63604 16.9497L7.05025 18.364L4.92893 20.4853L3.51472 19.0711L5.63604 16.9497ZM23 11V13H20V11H23ZM4 11V13H1V11H4'/%3E%3C/svg%3E");

  --content-max-width: 70rem;
  --content-inline-padding: 1.1rem;

  /* ═══════════════════════════════════════════════════════════════════════
     TIER 4: Font Sizes
     Adjust these to rescale text across the entire site.
     ═══════════════════════════════════════════════════════════════════════ */
  --fs-section: 3rem;
  --fs-subsection: 1.3rem;
  --fs-item-title: 1.2rem;
  --fs-content: 1.1rem;
  --fs-item-info: 1rem;

  /* Layout sizes */
  --fs-header-title: clamp(3rem, 2.6vw, 1.8rem);
  --fs-header-nav: 1.5rem;
  --fs-header-nav-icon: 0.92em;
  --fs-header-nav-icon-gap: 0.5em;
  --fs-header-nav-icon-baseline: -0.12em;
  --fs-header-controls: 0.78rem;    /* theme toggle, lang button */
  --fs-nav-dropdown-arrow: 0.85em;  /* dropdown arrow suffix */

}

:root[data-theme="dark"] {
  color-scheme: dark;
  --icon-theme-toggle: var(--icon-theme-toggle-dark);

  --palette-primary: #f1eaff;
  --palette-primary-light: #a58dff;
  --palette-secondary: #27d5aa;
  --palette-secondary-dark: #17b892;
  --palette-accent: #ff6b9a;
  --palette-accent-light: #5c1f37;
  --palette-accent-mid: #ff4d86;
  --palette-accent-dark: #ffc1d6;
  --palette-warning: #ffd166;
  --palette-success: #b9f06b;
  --palette-inverse: #0f1a22;

  --palette-neutral-50: #0b0e13;
  --palette-neutral-100: #121923;
  --palette-neutral-200: #1b2430;
  --palette-neutral-300: #2a3442;
  --palette-neutral-400: #3a4656;
  --palette-neutral-500: #8a95a6;
  --palette-neutral-600: #b6c0cf;
  --palette-neutral-700: #d5dde8;
  --palette-neutral-800: #e6ecf4;
  --palette-neutral-900: #f4f7fb;
}

:root[data-theme="light"] {
  color-scheme: light;
  --icon-theme-toggle: var(--icon-theme-toggle-light);
}

/* Global theme overrides for tufte.css */
html,
body {
  background-color: var(--color-bg-page);
  color: var(--color-text-primary);
}

#content {
  background: transparent;
  max-width: var(--content-max-width);
  margin-left: auto;
  margin-right: auto;
  padding-left: var(--content-inline-padding);
  padding-right: var(--content-inline-padding);
}

h1,
h2,
h3,
h4,
h5,
h6 {
  color: var(--color-text-primary);
}

p,
li,
dd,
dt,
blockquote,
.subtitle,
.timestamp,
.timestamp-kwd {
  color: var(--color-text-primary);
}

a,
a:link,
a:visited {
  color: var(--color-interactive);
}

a:hover,
a:focus-visible {
  color: var(--color-interactive-hover);
}

hr {
  border-color: var(--color-divider);
}

/* Replace Org's default "Footnotes:" heading with a simple separator line. */
#footnotes {
  margin-top: 2rem;
  padding-top: 1rem;
  border-top: 1px solid var(--color-divider);
}

#footnotes > h2.footnotes {
  display: none;
}

pre,
code,
kbd,
samp {
  background: var(--color-bg-elevated);
  color: var(--color-text-primary);
}

/* Polished Org table styling across pages. */
table {
  width: 100%;
  margin: 1.4rem 0;
  border-collapse: separate;
  border-spacing: 0;
  border: 1px solid var(--color-border-light);
  border-radius: 0.75rem;
  overflow: hidden;
  background: var(--color-bg-elevated);
  box-shadow: var(--shadow-sm);
}

th,
td {
  border-color: var(--color-border-light);
  border-bottom: 1px solid var(--color-divider);
  padding: 0.62rem 0.78rem;
  line-height: 1.45;
}

th {
  background: color-mix(in srgb, var(--color-interactive) 12%, var(--color-bg-elevated));
  color: var(--color-text-primary);
  font-weight: 700;
}

tbody tr:nth-child(even) {
  background: color-mix(in srgb, var(--color-bg-page) 65%, var(--color-bg-elevated));
}

tbody tr:hover {
  background: color-mix(in srgb, var(--color-interactive) 8%, var(--color-bg-elevated));
}

tbody tr:last-child td {
  border-bottom: 0;
}

@media (max-width: 52rem) {
  table {
    display: block;
    overflow-x: auto;
    white-space: nowrap;
  }
}

#preamble {
  margin: 0;
  padding: 0;
  width: 100vw;
  position: relative;
  left: 50%;
  right: 50%;
  margin-left: -50vw;
  margin-right: -50vw;
}

.site-header {
  width: 100%;
  margin: 0;
  padding: 0;
  border: none;
  box-shadow: none;
}

.site-banner {
  background: linear-gradient(110deg, var(--header-banner-bg) 0%, var(--color-bg-page) 100%);
  padding: 0.85rem 0;
  display: flex;
  align-items: center;
  justify-content: center;
}

.site-banner-inner {
  width: 100%;
  max-width: var(--content-max-width);
  padding-left: var(--content-inline-padding);
  padding-right: var(--content-inline-padding);
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.site-title-link,
.site-title-link:link,
.site-title-link:visited {
  color: var(--header-banner-text);
  text-decoration: none;
  font-weight: 700;
  font-size: var(--fs-header-title);
  letter-spacing: 0.02em;
}

.site-title-link:hover,
.site-title-link:focus-visible {
  color: var(--header-banner-hover);
  text-decoration: none;
}

.site-header-actions {
  display: flex;
  align-items: center;
  gap: 0.35rem;
  flex-shrink: 0;
}

.theme-toggle {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0.14rem 0;
  border: 0;
  background: transparent;
  color: var(--header-banner-text);
  font: inherit;
  font-size: var(--fs-header-controls);
  font-weight: 700;
  letter-spacing: 0.04em;
  cursor: pointer;
  transition: color 0.15s ease;
  margin-left: 0.72rem;
}

.theme-toggle:hover,
.theme-toggle:focus-visible {
  color: var(--header-banner-hover);
}

.theme-toggle:focus-visible {
  outline: 2px solid color-mix(in srgb, var(--header-banner-text) 44%, transparent);
  outline-offset: 2px;
}

.theme-toggle:only-child {
  margin-left: 0;
}

.theme-toggle-track {
  width: 2.2rem;
  height: 1.22rem;
  border-radius: 999px;
  border: 1px solid color-mix(in srgb, var(--header-banner-text) 70%, transparent);
  background: rgba(255, 255, 255, 0.18);
  position: relative;
  transition: background 0.2s ease, border-color 0.2s ease;
}

.theme-toggle-thumb {
  position: absolute;
  top: 50%;
  left: 0.08rem;
  width: 0.9rem;
  height: 0.9rem;
  border-radius: 50%;
  transform: translateY(-50%);
  background: var(--header-banner-text);
  display: inline-block;
  transition: left 0.2s ease, background 0.2s ease;
}

.theme-toggle-thumb::before {
  content: "";
  position: absolute;
  inset: 0.18rem;
  background-color: var(--header-banner-bg);
  mask: var(--icon-theme-toggle) center / contain no-repeat;
  -webkit-mask: var(--icon-theme-toggle) center / contain no-repeat;
}

.theme-toggle[aria-checked="true"] .theme-toggle-track {
  background: color-mix(in srgb, var(--palette-accent-mid) 56%, transparent);
  border-color: color-mix(in srgb, var(--palette-accent-mid) 90%, transparent);
}

.theme-toggle[aria-checked="true"] .theme-toggle-thumb {
  left: calc(100% - 0.98rem);
}

.theme-toggle[aria-checked="true"] .theme-toggle-thumb::before {
  background-color: var(--palette-accent-dark);
}

.lang-switcher {
  display: flex;
  gap: 0.3rem;
  align-items: center;
  flex-shrink: 0;
}

.lang-btn,
.lang-btn:link,
.lang-btn:visited {
  display: inline-block;
  padding: 0.18rem 0.5rem;
  border: 1px solid var(--color-text-primary);
  border-radius: 3px;
  color: var(--color-text-primary);
  text-decoration: none;
  font-size: var(--fs-header-controls);
  font-weight: 700;
  letter-spacing: 0.06em;
  opacity: 0.6;
  transition: opacity 0.15s ease, background 0.15s ease;
}

.lang-btn:hover,
.lang-btn:focus-visible {
  opacity: 1;
  background: rgba(255, 255, 255, 0.18);
  color: var(--header-banner-bg);
}

.lang-btn.lang-active,
.lang-btn.lang-active:link,
.lang-btn.lang-active:visited {
  opacity: 1;
  background: rgba(255, 255, 255, 0.25);
  cursor: default;
  pointer-events: none;
}

.site-nav {
  background: linear-gradient(110deg, var(--header-nav-bg) 0%, var(--color-bg-page) 100%);
  border-top: none;
  width: 100%;
}

.site-menu {
  margin: 0 auto;
  padding: 0;
  list-style: none;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0;
  max-width: var(--content-max-width);
  width: 100%;
  padding-left: var(--content-inline-padding);
  padding-right: var(--content-inline-padding);
}

.site-menu > li {
  position: relative;
}

.site-menu > li > a,
.site-menu > li > a:link,
.site-menu > li > a:visited {
  display: block;
  padding: 0.7rem 0.95rem;
  color: var(--header-nav-link);
  text-decoration: none;
  font-size: var(--fs-header-nav);
}

.site-menu > li > a:hover,
.site-menu > li > a:focus-visible {
  background: var(--header-nav-link-hover-bg);
  color: var(--header-nav-link-hover-text);
}

.dropdown > a::after {
  content: " ▾";
  font-size: var(--fs-nav-dropdown-arrow);
}

.site-menu > li > a[href="/"]::before,
.site-menu > li > a[href$="cv-en.pdf"]::before,
.site-menu > li > a[href$="cv-fr.pdf"]::before,
.site-menu > li > a[href="/pages/en/publications.html"]::before,
.site-menu > li > a[href="/pages/fr/publications.html"]::before,
.site-menu > li > a[href="/pages/en/talks.html"]::before,
.site-menu > li > a[href="/pages/fr/talks.html"]::before,
.site-menu > li > a[href="/pages/en/projects.html"]::before,
.site-menu > li > a[href="/pages/fr/projects.html"]::before,
.site-menu > li > a[href="/pages/en/teaching.html"]::before,
.site-menu > li > a[href="/pages/fr/teaching.html"]::before,
.site-menu > li > a[href="/pages/en/outreach.html"]::before,
.site-menu > li > a[href="/pages/fr/outreach.html"]::before,
.site-menu > li > a[href="/pages/en/perso.html"]::before,
.site-menu > li > a[href="/pages/fr/perso.html"]::before {
  --nav-icon: var(--icon-nav-home);
  content: "";
  display: inline-block;
  width: var(--fs-header-nav-icon);
  height: var(--fs-header-nav-icon);
  margin-right: var(--fs-header-nav-icon-gap);
  vertical-align: var(--fs-header-nav-icon-baseline);
  background-color: currentColor;
  -webkit-mask-repeat: no-repeat;
  -webkit-mask-position: center;
  -webkit-mask-size: contain;
  -webkit-mask-image: var(--nav-icon);
  mask-repeat: no-repeat;
  mask-position: center;
  mask-size: contain;
  mask-image: var(--nav-icon);
}

.site-menu > li > a[href="/"]::before { --nav-icon: var(--icon-nav-home); }
.site-menu > li > a[href$="cv-en.pdf"]::before,
.site-menu > li > a[href$="cv-fr.pdf"]::before { --nav-icon: var(--icon-nav-cv); }
.site-menu > li > a[href="/pages/en/publications.html"]::before,
.site-menu > li > a[href="/pages/fr/publications.html"]::before { --nav-icon: var(--icon-nav-publications); }
.site-menu > li > a[href="/pages/en/talks.html"]::before,
.site-menu > li > a[href="/pages/fr/talks.html"]::before { --nav-icon: var(--icon-nav-talks); }
.site-menu > li > a[href="/pages/en/projects.html"]::before,
.site-menu > li > a[href="/pages/fr/projects.html"]::before { --nav-icon: var(--icon-nav-projects); }
.site-menu > li > a[href="/pages/en/teaching.html"]::before,
.site-menu > li > a[href="/pages/fr/teaching.html"]::before { --nav-icon: var(--icon-nav-teaching); }
.site-menu > li > a[href="/pages/en/outreach.html"]::before,
.site-menu > li > a[href="/pages/fr/outreach.html"]::before { --nav-icon: var(--icon-nav-outreach); }
.site-menu > li > a[href="/pages/en/perso.html"]::before,
.site-menu > li > a[href="/pages/fr/perso.html"]::before { --nav-icon: var(--icon-nav-blog); }

.dropdown-content {
  display: none;
  position: absolute;
  top: 100%;
  left: 0;
  z-index: 20;
  min-width: 18rem;
  margin: 0;
  padding: 0.3rem 0;
  list-style: none;
  background: var(--color-bg-elevated);
  border: 1px solid var(--color-border);
  box-shadow: var(--shadow-lg);
}

.dropdown-content li a,
.dropdown-content li a:link,
.dropdown-content li a:visited {
  display: block;
  padding: 0.5rem 0.8rem;
  color: var(--color-text-secondary);
  text-decoration: none;
}

.dropdown-content li a:hover,
.dropdown-content li a:focus-visible {
  background: var(--header-nav-link-hover-bg);
}

.nav-project-link {
  display: inline-flex;
  align-items: flex-end;
  gap: 0.45rem;
}

.nav-project-logo {
  height: 1.5em;
  width: auto;
  align-self: flex-end;
  margin-bottom: -.3em;
  flex-shrink: 0;
}

.dropdown:hover > .dropdown-content,
.dropdown:focus-within > .dropdown-content {
  display: block;
}

/* Home page intro layout: profile column + biography column */
.intro-top {
  display: grid;
  grid-template-columns: minmax(12rem, 18rem) minmax(0, 1fr);
  gap: 1.75rem;
  align-items: start;
  margin-bottom: 1.5rem;
}

.intro-profile {
  margin-top: 0.4rem;
}

.intro-profile p {
  margin-bottom: 0.6rem;
}

.intro-profile img {
  display: block;
  width: 100%;
  max-width: 18rem;
  height: auto;
}

.intro-profile ul {
  margin-top: 0.55rem;
  padding-left: 1.25rem;
}

.intro-bio {
  min-width: 0;
}

@media (max-width: 760px) {
  .site-menu {
    flex-direction: column;
    align-items: stretch;
  }

  .site-menu > li > a {
    border-top: 1px solid var(--header-border-color);
  }

  .dropdown-content {
    position: static;
    min-width: 0;
    border: 0;
    border-top: 1px solid var(--header-border-color);
    box-shadow: none;
    padding: 0;
  }

  .dropdown-content li a {
    padding-left: 1.5rem;
  }

  .intro-top {
    grid-template-columns: 1fr;
    gap: 1rem;
  }

  .intro-profile img {
    max-width: 14rem;
  }
}

/* ═══════════════════════════════════════════════════════════════════════
   CV page elements
   ═══════════════════════════════════════════════════════════════════════ */

.cvsection {
  margin-top: 2rem;
  margin-bottom: 0.5rem;
}

.cvsection h2 {
  border-bottom: 2px solid var(--color-divider);
  padding-bottom: 0.3rem;
  margin-bottom: 0.75rem;
  font-size: var(--fs-section);
}

.cvsubsection {
  margin-top: 1.25rem;
  margin-bottom: 0.25rem;
}

.cvsubsection h3 {
  font-size: var(--fs-subsection);
  font-weight: 600;
  color: var(--color-text-muted);
  font-style: normal;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  margin-bottom: 0.5rem;
}

/* ── course metadata block ─────────────────────────────────────────────── */
.course-meta {
  margin: 0.95rem 0 1.2rem;
  padding: 1rem 1.05rem;
  border: 1px solid color-mix(in srgb, var(--color-border) 74%, transparent);
  border-left: 5px solid var(--color-interactive);
  border-radius: 10px;
  background:
    radial-gradient(100% 120% at 100% 0, color-mix(in srgb, var(--palette-accent-light) 26%, transparent), transparent 58%),
    linear-gradient(145deg, var(--color-bg-elevated) 0%, var(--color-bg-surface) 100%);
  box-shadow: var(--shadow-sm);
}

.course-meta-row {
  display: grid;
  grid-template-columns: minmax(7rem, 8.5rem) 1fr;
  gap: 0.75rem;
  align-items: start;
  padding: 0.34rem 0;
  border-bottom: 1px solid var(--color-divider);
}

.course-meta-row:last-child {
  border-bottom: none;
}

.course-meta-row-wide {
  grid-template-columns: 1fr;
  gap: 0.2rem;
  padding-top: 0.55rem;
}

/* .course-meta-key {
  font-size: var(--fs-course-meta-key);
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--color-text-secondary);
  width: fit-content;
  padding: 0.05rem 0.45rem;
  border-radius: 999px;
  background: var(--palette-accent-light);
} */

.course-meta-value {
  color: var(--color-text-primary);
  line-height: 1.5;
}

.course-meta-value p {
  margin: 0;
}

.course-meta-row[data-course-field="level"] .course-meta-value,
.course-meta-row[data-course-field="degree"] .course-meta-value,
.course-meta-row[data-course-field="location"] .course-meta-value,
.course-meta-row[data-course-field="date"] .course-meta-value {
  font-weight: 500;
}

.course-meta-row[data-course-field="description"] .course-meta-value,
.course-meta-row[data-course-field="context"] .course-meta-value {
  color: var(--color-text-secondary);
}

@media (max-width: 760px) {
  .course-meta-row {
    grid-template-columns: 1fr;
    gap: 0.3rem;
  }
}

/* ── project index cards ──────────────────────────────────────────────── */
.project-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(18rem, 1fr));
  gap: 1.2rem;
  margin-top: 1rem;
}

.project-card {
  display: flex;
  flex-direction: column;
  gap: 0.85rem;
  padding: 1rem 1.05rem;
  border: 1px solid color-mix(in srgb, var(--color-border) 74%, transparent);
  border-radius: 12px;
  background:
    radial-gradient(100% 140% at 100% 0, color-mix(in srgb, var(--palette-accent-light) 24%, transparent), transparent 58%),
    linear-gradient(145deg, var(--color-bg-elevated) 0%, var(--color-bg-surface) 100%);
  box-shadow: var(--shadow-sm);
}

.project-card-header {
  display: flex;
  justify-content: space-between;
  align-items: start;
  gap: 0.75rem;
}

.project-card-title-wrap {
  display: inline-flex;
  align-items: center;
  gap: 0.6rem;
}

.project-card-logo {
  width: 2.2rem;
  height: 2.2rem;
  flex-shrink: 0;
}

.project-card-title {
  margin: 0;
  font-size: var(--fs-subsection);
  line-height: 1.2;
  font-style: normal;
}

.project-card-title a,
.project-card-title a:link,
.project-card-title a:visited {
  color: var(--color-text-primary);
  text-decoration: none;
}

.project-card-title a:hover,
.project-card-title a:focus-visible {
  color: var(--color-interactive-hover);
}

.project-card-date {
  flex-shrink: 0;
  white-space: nowrap;
  padding: 0.2rem 0.5rem;
  border-radius: 999px;
  background: var(--palette-accent-light);
  color: var(--color-text-secondary);
  font-size: var(--fs-item-info);
  font-weight: 700;
  letter-spacing: 0.05em;
  text-transform: uppercase;
}

.project-card-status {
  width: fit-content;
  padding: 0.16rem 0.52rem;
  border-radius: 999px;
  background: color-mix(in srgb, var(--palette-secondary) 18%, white);
  color: var(--color-interactive-hover);
  font-size: var(--fs-item-info);
  font-weight: 600;
}

.project-card-summary,
.project-card-summary p {
  margin: 0;
  color: var(--color-text-secondary);
  font-size: var(--fs-content);
  line-height: 1.55;
}

.project-card-footer {
  margin-top: auto;
}

.project-card-link,
.project-card-link:link,
.project-card-link:visited {
  font-weight: 600;
}

.project-index-empty {
  color: var(--color-text-muted);
}

/* ── project detail logo figure ──────────────────────────────────────── */
.project-page-figure {
  float: right;
  width: clamp(8rem, 20vw, 12rem);
  margin: 0.25rem 0 0.9rem 1.1rem;
  opacity: 0.18;
  pointer-events: none;
}

.project-page-logo {
  width: 100%;
  height: auto;
  display: block;
}

/* ── Two-column layout ───────────────────────────────────────────────── */
.two-col {
  --left-col-width: minmax(0, 1fr);
  --right-col-width: 16rem;
  --two-col-align: start;
  display: grid;
  grid-template-columns: var(--left-col-width) var(--right-col-width);
  gap: 1.5rem;
  align-items: var(--two-col-align);
}

.left-col,
.right-col {
  min-width: 0;
}

/* Org may emit an empty <p> at block start; hide it so columns stay aligned */
.two-col > p {
  display: none;
}

/* Images inside columns fill their column, no floating */
.left-col p > img,
.right-col p > img,
.left-col > img,
.right-col > img {
  display: block;
  float: none;
  width: 100%;
  max-width: 100%;
  height: auto;
  margin: 0.55rem 0 1rem;
  border-radius: 0.7rem;
  border: 1px solid color-mix(in srgb, var(--color-border) 70%, transparent);
  box-shadow: var(--shadow-sm);
}

@media (max-width: 760px) {
  .two-col {
    grid-template-columns: 1fr;
  }
}

.figure > p > img {
  display: block;
  width: 100%;
  max-width: 100%;
  height: auto;
  margin: 0.55rem auto 1rem;
  border-radius: 0.7rem;
  border: 1px solid color-mix(in srgb, var(--color-border) 70%, transparent);
  box-shadow: var(--shadow-sm);
}

.figure > p:has(> img) {
  margin-bottom: 0.3rem;
}

.figure p:not(:has(> img)) {
  margin: 0;
  font-size: 0.92em;
  line-height: 1.35;
  color: var(--color-text-muted);
}

.figure .figure-number {
  display: none;
}

#content h2,
#content h3,
#content h4 {
  clear: both;
}

@media (max-width: 760px) {
  .project-page-figure {
    float: none;
    margin: 0.35rem auto 0.8rem;
    width: min(40vw, 9rem);
    opacity: 0.32;
  }

  #content .outline-text-2 > p > img,
  #content .outline-text-3 > p > img,
  #content .outline-text-4 > p > img,
  #content .outline-text-2 > p > img + img,
  #content .outline-text-3 > p > img + img,
  #content .outline-text-4 > p > img + img,
  #content .outline-text-2 > img,
  #content .outline-text-3 > img,
  #content .outline-text-4 > img {
    float: none;
    display: block;
    width: min(100%, 32rem);
    margin: 0.55rem auto 1rem;
  }
}

@media (max-width: 760px) {
  .project-grid {
    grid-template-columns: 1fr;
  }

  .project-card-header {
    flex-direction: column;
  }
}

/* ── cvcourse ─────────────────────────────────────────────────────────── */
.cvcourse {
  padding: 0.45rem 0;
  border-bottom: 1px solid var(--color-divider);
  font-size: var(--fs-item-title);
}

.cvcourse:last-child {
  border-bottom: none;
}

.cvcourse-main {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 1rem;
}

.cvcourse-title {
  font-weight: 500;
}

.cvcourse-date {
  white-space: nowrap;
  color: var(--color-text-muted);
  font-size: var(--fs-item-info);
}

.cvcourse-extra {
  color: var(--color-text-muted);
  font-size: var(--fs-item-info);
}

.cvcourse-meta {
  display: flex;
  gap: 1.25rem;
  margin-top: 0.15rem;
  font-size: var(--fs-item-info);
  color: var(--color-text-secondary);
}

.cvcourse-time::before { content: "⏱ "; }
.cvcourse-supports::before { content: "✎ "; }

/* ── cventry / cvpro ──────────────────────────────────────────────────── */
.cventry {
  padding: 0.6rem 0;
  border-bottom: 1px solid var(--color-divider);
  font-size: var(--fs-item-title);
}

.cventry:last-child { border-bottom: none; }

.cventry-main {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 1rem;
  font-size: var(--fs-item-title);
}

.cventry-title { font-weight: 600; }

.cventry-date {
  white-space: nowrap;
  color: var(--color-text-muted);
  font-size: var(--fs-item-info);
}

.cventry-sub {
  display: flex;
  gap: 1rem;
  font-size: var(--fs-item-info);
  color: var(--color-text-secondary);
  margin-top: 0.1rem;
  margin-bottom: .5rem;
}

.cventry-institution { font-style: italic; }

.cventry-description,
.cventry-body {
  margin-top: 0rem;
  font-size: var(--fs-content);
}

.cvcourse p,
.cventry p,
.cvmentor p,
.cvmisc p,
.cvskills p {
  margin: 0;
  padding: 0;
  font-size: inherit;
  font-weight: inherit;
  line-height: inherit;
  color: inherit;
}

.cventry li > p,
.cvmentor li > p,
.cvmisc li > p,
.cvskills li > p {
  display: inline;
}

.cventry li {
  font-size: var(--fs-content);
  margin-top: -1rem;
  padding-left: 1.25rem;
}

.cventry li + li {
  margin-top: -5px;
}

/* ── cvmentor ─────────────────────────────────────────────────────────── */
.cvmentor {
  padding: 0.6rem 0;
  border-bottom: 1px solid var(--color-divider);
  font-size: var(--fs-item-title);
}

.cvmentor:last-child { border-bottom: none; }

.cvmentor-main {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 1rem;
}

.cvmentor-title { font-weight: 600; }

.cvmentor-date {
  white-space: nowrap;
  color: var(--color-text-muted);
  font-size: var(--fs-item-info);
}

.cvmentor-sub {
  display: flex;
  gap: 1rem;
  font-size: var(--fs-content);
  color: var(--color-text-secondary);
  margin-top: 0.1rem;
}

.cvmentor-description,
.cvmentor-body {
  margin-top: 0.3rem;
  font-size: var(--fs-content);
}


/* ── cvmisc ───────────────────────────────────────────────────────────── */
.cvmisc {
  padding: 0.6rem 0;
  border-bottom: 1px solid var(--color-divider);
  font-size: var(--fs-item-title);
}

.cvmisc:last-child { border-bottom: none; }

.cvmisc-main {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 1rem;
}

.cvmisc-title { 
  font-weight: 500;
  font-size: var(--fs-item-title);
}

.cvmisc-title a,
.cvmisc-title a:link,
.cvmisc-title a:visited {
  color: inherit;
  text-decoration: underline;
  text-decoration-color: color-mix(in srgb, var(--color-text-primary) 35%, transparent);
  text-underline-offset: 0.12em;
}

.cvmisc-title a:hover,
.cvmisc-title a:focus-visible {
  color: var(--color-interactive-hover);
  text-decoration-color: currentColor;
}

.cvmisc-date {
  white-space: nowrap;
  color: var(--color-text-muted);
  font-size: var(--fs-item-info);
}

.cvmisc-location,
.cvmisc-description,
.cvmisc-body {
  font-size: var(--fs-content);
  color: var(--color-text-secondary);
  margin-top: 0.15rem;
}

.cvmisc li {
  font-size: var(--fs-content);
  margin-top: -1rem;
  padding-left: 1.25rem;
}

.cvmisc li + li {
  margin-top: -5px;
}

/* ── cvskills ─────────────────────────────────────────────────────────── */
.cvskills {
  margin-bottom: 0.75rem;
  font-size: var(--fs-item-title);
}

.cvskills h3 {
  font-size: var(--fs-item-title);
  margin-bottom: 0.3rem;
}

/* ── Bibliography entries (.bib-list / .bib-entry) ───────────────────── */

.bib-list {
  margin: 0.25rem 0 0.5rem;
}

.bib-entry {
  padding: 0.65rem 0;
  border-bottom: 1px solid var(--color-divider);
}

.bib-entry:last-child {
  border-bottom: none;
}

a.bib-title,
span.bib-title {
  display: block;
  font-weight: 600;
  font-size: var(--fs-item-title);
  color: var(--color-text-primary);
  text-decoration: none;
  margin-bottom: 0.2rem;
  line-height: 1.4;
}

a.bib-title:hover {
  color: var(--color-interactive);
  text-decoration: underline;
}

.bib-authors {
  font-size: var(--fs-content);
  color: var(--color-text-secondary);
  margin-bottom: 0.15rem;
}

.bib-self {
  font-weight: bold;
  color: var(--palette-accent);
}

.bib-meta {
  font-size: var(--fs-item-info);
  color: var(--color-text-muted);
  font-style: italic;
  margin-bottom: 0.2rem;
}

.bib-links {
  margin-top: 0.3rem;
  display: flex;
  gap: 0.5rem;
  align-items: center;
}

.bib-pdf,
.bib-copy {
  display: inline-block;
  font-size: var(--fs-item-info);
  padding: 0.1rem 0.5rem;
  border: 1px solid var(--color-interactive);
  border-radius: 3px;
  color: var(--color-interactive);
  background: transparent;
  text-decoration: none;
  cursor: pointer;
  font-family: inherit;
  transition: all 0.2s ease;
}

.bib-pdf {
  text-decoration: none;
}

.bib-copy {
  border-style: solid;
  padding: 0.15rem 0.6rem;
}

.bib-pdf:hover,
.bib-pdf:focus-visible,
.bib-copy:hover,
.bib-copy:focus-visible {
  background: var(--color-interactive);
  color: var(--color-text-inverse);
  outline: none;
}