/* ============================================================
   Stavros Orfanoudakis — Design tokens + site styles
   ============================================================ */

@import url('https://fonts.googleapis.com/css2?family=Fraunces:opsz,wght@9..144,400;9..144,500;9..144,600;9..144,700&family=Instrument+Serif:ital@0;1&family=IBM+Plex+Sans:wght@300;400;500;600;700&family=IBM+Plex+Mono:wght@400;500;600&display=swap');

:root {
  --nav-h:        72px;
  --foot-h:       80px;
  --paper:        #f4f1e8;
  --paper-2:      #eae5d6;
  --paper-3:      #ded7c3;
  --surface:      #ffffff;
  --rule:         #c9c2ad;
  --ink:          #18201c;
  --ink-2:        #2c362f;
  --ink-3:        #5a6459;
  --ink-4:        #8a907f;

  --grid-green:   #1f7a4c;
  --grid-green-2: #2f9b62;
  --grid-green-3: #d5e7dc;
  --delft-blue:   #00539b;
  --delft-blue-2: #1e78c9;

  --signal-amber: #b8861c;
  --signal-rust:  #9a3b1f;
  --signal-ink:   #1f7a4c;

  --font-display: 'Fraunces', 'Times New Roman', Georgia, serif;
  --font-accent:  'Instrument Serif', 'Times New Roman', Georgia, serif;
  --font-body:    'IBM Plex Sans', 'Segoe UI', system-ui, -apple-system, sans-serif;
  --font-mono:    'IBM Plex Mono', 'SF Mono', Menlo, Consolas, monospace;

  --fs-eyebrow:   0.72rem;
  --fs-xs:        0.8125rem;
  --fs-sm:        0.9375rem;
  --fs-base:      1.0625rem;
  --fs-lg:        1.25rem;
  --fs-h4:        1.375rem;
  --fs-h3:        1.75rem;
  --fs-h2:        2.5rem;
  --fs-h1:        3.75rem;

  --sp-1: 4px;  --sp-2: 8px;  --sp-3: 12px; --sp-4: 16px;
  --sp-5: 24px; --sp-6: 32px; --sp-7: 48px; --sp-8: 64px;
  --sp-9: 96px; --sp-10: 128px;

  --r-sm: 2px;  --r-md: 4px;  --r-lg: 8px;  --r-xl: 14px;  --r-pill: 999px;

  --sh-hair:  0 1px 0 rgba(24, 32, 28, 0.08);
  --sh-sm:    0 1px 2px rgba(24, 32, 28, 0.06), 0 1px 3px rgba(24, 32, 28, 0.04);
  --sh-md:    0 4px 12px rgba(24, 32, 28, 0.08), 0 1px 2px rgba(24, 32, 28, 0.04);
  --sh-lg:    0 12px 28px rgba(24, 32, 28, 0.12), 0 2px 6px rgba(24, 32, 28, 0.06);

  --ease-standard: cubic-bezier(0.2, 0.6, 0.2, 1);
  --ease-out:      cubic-bezier(0.16, 1, 0.3, 1);
  --dur-fast:      140ms;
  --dur-normal:    220ms;

  --container:        1040px;
  --container-wide:   1240px;
  --container-narrow: 720px;
}

html[data-theme="dark"] {
  color-scheme: dark;
  --paper:        #131816;
  --paper-2:      #1b2320;
  --paper-3:      #24302b;
  --surface:      #0f1412;
  --rule:         #334039;
  --ink:          #e7ece8;
  --ink-2:        #d2dbd4;
  --ink-3:        #aab6ae;
  --ink-4:        #7f8b84;

  --grid-green:   #44b874;
  --grid-green-2: #68cb90;
  --grid-green-3: #1f3529;
  --delft-blue:   #71b6ff;
  --delft-blue-2: #9dceff;

  --signal-amber: #d6a13a;
  --signal-rust:  #d16a4a;
  --signal-ink:   #5fc487;

  --sh-hair:  0 1px 0 rgba(0, 0, 0, 0.22);
  --sh-sm:    0 1px 2px rgba(0, 0, 0, 0.26), 0 1px 3px rgba(0, 0, 0, 0.18);
  --sh-md:    0 8px 18px rgba(0, 0, 0, 0.28), 0 1px 2px rgba(0, 0, 0, 0.14);
  --sh-lg:    0 14px 32px rgba(0, 0, 0, 0.34), 0 2px 6px rgba(0, 0, 0, 0.18);
}

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

html, body {
  margin: 0; padding: 0;
  background: var(--paper);
  color: var(--ink);
  font-family: var(--font-body);
  font-size: var(--fs-base);
  line-height: 1.55;
  -webkit-font-smoothing: antialiased;
}

html { scroll-behavior: smooth; }

a {
  color: var(--delft-blue);
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 3px;
  text-decoration-color: color-mix(in oklch, var(--delft-blue) 40%, transparent);
  transition: color var(--dur-fast) var(--ease-standard),
              text-decoration-color var(--dur-fast) var(--ease-standard);
}
a:hover { color: var(--delft-blue-2); text-decoration-color: var(--delft-blue-2); }

::selection { background: var(--grid-green-3); color: var(--ink-2); }

.so-root {
  min-height: 100vh;
  padding-top: var(--nav-h);
  padding-bottom: var(--foot-h);
  scroll-snap-type: y proximity;
}

/* ---------- Top nav ---------- */
.so-nav {
  position: fixed; top: 0; left: 0; right: 0; z-index: 50;
  background: color-mix(in oklch, var(--paper) 92%, transparent);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  border-bottom: 1px solid var(--rule);
}
.so-nav__inner {
  max-width: var(--container); margin: 0 auto;
  padding: 14px 28px;
  display: flex; align-items: center; justify-content: space-between;
  gap: 24px;
}
.so-nav__brand {
  display: flex; align-items: center; gap: 14px;
  text-decoration: none; color: var(--ink-2);
}
.so-nav__mono {
  font-family: var(--font-display);
  font-size: 30px; font-weight: 600; line-height: 1;
  letter-spacing: -0.04em;
  font-variation-settings: "opsz" 144;
}
.so-nav__word { display: flex; flex-direction: column; gap: 2px; }
.so-nav__name {
  font-family: var(--font-display);
  font-size: 15px; font-weight: 600;
  color: var(--ink-2); line-height: 1;
  letter-spacing: -0.005em;
}
.so-nav__sub {
  font-family: var(--font-mono);
  font-size: 10px; color: var(--ink-3);
  letter-spacing: 0.1em; text-transform: uppercase;
}
.so-nav__actions { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.so-nav__tabs { display: flex; gap: 4px; flex-wrap: wrap; align-items: center; }
.so-nav__tab {
  background: transparent; border: 0;
  padding: 8px 14px;
  font-family: var(--font-body); font-size: 14px; font-weight: 500;
  color: var(--ink-3); cursor: pointer;
  border-radius: var(--r-md);
  letter-spacing: -0.005em;
  text-decoration: none;
  transition: color var(--dur-fast) var(--ease-standard),
              background var(--dur-fast) var(--ease-standard);
}
.so-nav__tab:hover { color: var(--ink-2); background: var(--paper-2); text-decoration: none; }
.so-nav__tab.is-active { color: var(--ink-2); background: var(--paper-3); }
.so-theme-toggle { min-width: 122px; justify-content: center; }

/* ---------- Footer ---------- */
.so-foot {
  position: fixed; bottom: 0; left: 0; right: 0; z-index: 50;
  background: color-mix(in oklch, var(--paper) 92%, transparent);
  backdrop-filter: blur(10px);
  border-top: 1px solid var(--rule);
}
.so-foot__inner {
  max-width: var(--container); margin: 0 auto;
  padding: 14px 28px;
  display: flex; justify-content: space-between; align-items: center;
  gap: 20px;
  font-family: var(--font-mono);
  font-size: 11.5px; color: var(--ink-3);
  letter-spacing: 0.02em;
}
.so-foot__social { display: flex; gap: 16px; }
.so-foot__social a {
  color: var(--ink-3);
  font-size: 18px;
  text-decoration: none;
  transition: color var(--dur-fast) var(--ease-standard);
}
.so-foot__social a:hover { color: var(--grid-green); }
.so-foot__upd { color: var(--ink-4); }

/* ---------- Page / layout ---------- */
.so-page {
  max-width: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 0;
  animation: so-fade 0.35s var(--ease-out);
}
@keyframes so-fade { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } }

.so-panel {
  position: relative;
  width: 100vw;
  margin-inline: calc(50% - 50vw);
  min-height: calc(100vh - var(--nav-h) - var(--foot-h));
  padding: 34px 28px 36px;
  border: 1px solid color-mix(in oklch, var(--rule) 86%, transparent);
  border-left: 0;
  border-right: 0;
  border-radius: 0;
  scroll-margin-top: 92px;
  scroll-snap-align: start;
  scroll-snap-stop: always;
  box-shadow: var(--sh-sm);
  overflow: clip;
  opacity: 0.76;
  transform: translateY(12px);
  transition: opacity 420ms var(--ease-out),
              transform 420ms var(--ease-out),
              box-shadow var(--dur-normal) var(--ease-standard);
}
.so-panel::before {
  content: '';
  position: absolute;
  inset: 0;
  pointer-events: none;
  opacity: 0.9;
}
.so-panel > * {
  position: relative;
  z-index: 1;
  max-width: var(--container);
  margin-left: auto;
  margin-right: auto;
  width: 100%;
}
.so-panel.is-visible,
.so-panel--active {
  opacity: 1;
  transform: none;
}

.so-panel--home {
  background:
    radial-gradient(1200px 360px at -12% 8%, color-mix(in oklch, var(--grid-green) 13%, transparent) 0%, transparent 54%),
    linear-gradient(180deg, color-mix(in oklch, var(--paper) 92%, white) 0%, var(--paper-2) 100%);
}
.so-panel--home::before {
  background:
    linear-gradient(115deg, color-mix(in oklch, var(--delft-blue) 8%, transparent) 0%, transparent 34%),
    radial-gradient(700px 180px at 92% -8%, color-mix(in oklch, var(--grid-green) 9%, transparent) 0%, transparent 70%);
}

.so-panel--publications {
  background:
    radial-gradient(1000px 320px at -8% -12%, color-mix(in oklch, var(--delft-blue) 12%, transparent) 0%, transparent 66%),
    radial-gradient(760px 240px at 108% 12%, color-mix(in oklch, var(--signal-amber) 9%, transparent) 0%, transparent 70%),
    linear-gradient(180deg, color-mix(in oklch, var(--paper) 92%, white) 0%, color-mix(in oklch, var(--paper-2) 88%, white) 100%);
}

.so-panel--highlights {
  background:
    radial-gradient(900px 250px at 98% 8%, color-mix(in oklch, var(--signal-amber) 10%, transparent) 0%, transparent 65%),
    linear-gradient(180deg, color-mix(in oklch, var(--paper-2) 84%, white) 0%, color-mix(in oklch, var(--paper-3) 86%, var(--paper)) 100%);
}
.so-panel--highlights::before {
  background:
    linear-gradient(110deg, color-mix(in oklch, var(--signal-rust) 7%, transparent) 0%, transparent 40%),
    radial-gradient(560px 180px at -8% 102%, color-mix(in oklch, var(--grid-green) 8%, transparent) 0%, transparent 70%);
}
.so-panel--publications::before {
  background:
    linear-gradient(165deg, color-mix(in oklch, var(--delft-blue) 8%, transparent) 0%, transparent 38%),
    radial-gradient(680px 230px at 78% 102%, color-mix(in oklch, var(--grid-green) 8%, transparent) 0%, transparent 72%);
}

.so-panel--projects {
  background:
    linear-gradient(140deg, color-mix(in oklch, var(--signal-amber) 12%, var(--paper)) 0%, color-mix(in oklch, var(--paper-2) 86%, white) 48%, color-mix(in oklch, var(--signal-rust) 10%, var(--paper)) 100%);
}
.so-panel--projects::before {
  background:
    linear-gradient(160deg, transparent 0%, color-mix(in oklch, var(--signal-rust) 7%, transparent) 34%, transparent 66%),
    radial-gradient(560px 220px at 8% -10%, color-mix(in oklch, var(--signal-amber) 11%, transparent) 0%, transparent 70%);
}

.so-panel--teaching {
  background:
    radial-gradient(circle at 1px 1px, color-mix(in oklch, var(--rule) 24%, transparent) 1px, transparent 1.3px),
    linear-gradient(180deg, color-mix(in oklch, var(--paper) 90%, white) 0%, color-mix(in oklch, var(--grid-green-3) 32%, var(--paper-2)) 100%);
  background-size: 14px 14px, auto;
}
.so-panel--teaching::before {
  background: linear-gradient(110deg, color-mix(in oklch, var(--grid-green) 8%, transparent) 0%, transparent 45%);
}

.so-panel--cv {
  background:
    linear-gradient(180deg, color-mix(in oklch, var(--paper-2) 82%, white) 0%, color-mix(in oklch, var(--paper-3) 82%, var(--paper)) 100%);
}
.so-panel--cv::before {
  background: linear-gradient(90deg, color-mix(in oklch, var(--delft-blue) 6%, transparent) 0%, transparent 26%, color-mix(in oklch, var(--grid-green) 4%, transparent) 100%);
}

.so-pagehead { margin-bottom: 48px; max-width: 780px; }
.so-pagehead .so-eyebrow { margin-bottom: 10px; }
.so-pagehead__actions { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 18px; }
.so-panel .so-pagehead { margin-top: 0; }

.so-rule { border: 0; border-top: 1px solid var(--rule); margin: 64px 0; }
.so-section { margin: 48px 0; }
.so-home .so-rule { margin: 36px 0 28px; }
.so-home .so-section { margin: 0; }
.so-sectionhead { margin-bottom: 28px; }
.so-sectionhead--split { display: flex; justify-content: space-between; align-items: flex-end; }

/* ---------- Type primitives ---------- */
.so-eyebrow {
  font-family: var(--font-body);
  font-size: 11px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  font-weight: 600;
  color: var(--grid-green);
}
.so-h1 {
  font-family: var(--font-display);
  font-size: 64px; font-weight: 600;
  line-height: 1.02; letter-spacing: -0.03em;
  color: var(--ink-2);
  margin: 0 0 14px;
  font-variation-settings: "opsz" 144, "SOFT" 50;
}
.so-h1 em { font-family: var(--font-accent); font-style: italic; font-weight: 400; color: var(--grid-green); letter-spacing: -0.01em; }
.so-h2 { font-family: var(--font-display); font-size: 36px; font-weight: 600; line-height: 1.1; letter-spacing: -0.02em; color: var(--ink-2); margin: 0; }
.so-h3 { font-family: var(--font-display); font-size: 22px; font-weight: 600; line-height: 1.2; letter-spacing: -0.01em; color: var(--ink-2); margin: 0 0 10px; }
.so-lead { font-size: 18px; line-height: 1.5; color: var(--ink-3); margin: 0; max-width: 640px; }
.so-meta { font-family: var(--font-mono); font-size: 12px; color: var(--ink-3); letter-spacing: 0.02em; }

/* ---------- Buttons ---------- */
.so-btn {
  display: inline-flex; align-items: center; gap: 8px;
  padding: 9px 16px;
  border-radius: var(--r-md);
  font-family: var(--font-body); font-size: 14px; font-weight: 500;
  cursor: pointer; border: 1px solid transparent;
  text-decoration: none;
  transition: all var(--dur-fast) var(--ease-standard);
}
.so-btn--primary { background: var(--grid-green); color: var(--paper); border-color: var(--grid-green); }
.so-btn--primary:hover { background: var(--grid-green-2); color: var(--paper); }
.so-btn--secondary { background: var(--paper-2); color: var(--ink-2); border-color: var(--rule); }
.so-btn--secondary:hover { background: var(--paper-3); color: var(--ink-2); }
.so-btn--ghost { background: transparent; color: var(--ink-2); }
.so-btn--ghost:hover { color: var(--grid-green); text-decoration: none; }
.so-btn--sm { padding: 7px 12px; font-size: 13px; }
.so-btn i { font-size: 0.95em; }

/* ---------- Intro ---------- */
.so-intro {
  display: grid;
  grid-template-columns: 300px 1fr;
  grid-template-areas:
    "portrait text"
    "interests edu"
    "quote quote";
  gap: 56px;
  align-items: flex-start;
  padding: 24px 0 32px;
}
.so-intro__portrait {
  grid-area: portrait;
  width: 248px;
  height: 312px;
  border-radius: 28px;
  border: 1px solid var(--rule);
  overflow: hidden;
  margin: 0 auto;
  padding: 10px;
  background:
    linear-gradient(180deg, color-mix(in oklch, var(--paper) 88%, white) 0%, var(--paper-2) 100%);
  box-shadow: var(--sh-md);
}
.so-intro__portrait img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center 18%;
  display: block;
  border-radius: 20px;
}
.so-intro__interests ul {
  list-style: none; padding: 0; margin: 12px 0 0;
  display: flex; flex-direction: column; gap: 6px;
}
.so-intro__interests { grid-area: interests; }
.so-intro__interests li {
  font-size: 14.5px;
  color: var(--ink);
  padding-left: 14px;
  position: relative;
  line-height: 1.45;
}
.so-intro__interests li::before {
  content: ''; position: absolute; left: 0; top: 10px;
  width: 6px; height: 1px; background: var(--grid-green);
}
.so-intro__text { grid-area: text; padding-top: 8px; }
.so-intro__role {
  font-family: var(--font-accent);
  font-style: italic;
  font-size: 20px;
  color: var(--ink-2);
  margin: -4px 0 22px;
}
.so-intro__text p {
  font-size: 17px;
  line-height: 1.68;
  color: var(--ink);
  margin: 0 0 14px;
  max-width: 660px;
  text-wrap: pretty;
}
.so-intro__text p em { font-family: var(--font-accent); font-style: italic; }
.so-intro__edu {
  grid-area: edu;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 12px;
  max-width: 760px;
}
.so-intro__edu-item {
  display: flex;
  gap: 12px;
  align-items: flex-start;
  padding: 14px 16px;
  background: var(--paper-2);
  border: 1px solid var(--rule);
  border-radius: var(--r-md);
  box-shadow: var(--sh-sm);
}
.so-intro__edu-icon {
  width: 34px;
  height: 34px;
  border-radius: 999px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 34px;
  background: color-mix(in oklch, var(--grid-green) 14%, var(--paper));
  color: var(--grid-green);
}
.so-intro__edu-text {
  display: flex;
  flex-direction: column;
  gap: 3px;
  min-width: 0;
}
.so-intro__edu-degree {
  font-size: 13.5px;
  line-height: 1.4;
  color: var(--ink-2);
  font-weight: 600;
}
.so-intro__edu-meta {
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.04em;
  color: var(--ink-3);
}
.so-intro__quote {
  grid-column: 1 / -1;
  grid-area: quote;
  margin: 10px 0 0;
  width: 100%;
  max-width: none;
  padding: 18px 22px 18px 24px;
  border-left: 3px solid var(--grid-green);
  background: var(--paper-2);
  border-radius: 0 var(--r-md) var(--r-md) 0;
  box-shadow: var(--sh-sm);
  text-align: center;
}
.so-intro__quote blockquote {
  margin: 0;
  font-family: var(--font-display);
  font-size: 26px;
  line-height: 1.35;
  letter-spacing: -0.015em;
  color: var(--ink-2);
}
.so-intro__contact { margin-top: 18px !important; }

/* ---------- Timeline (news) ---------- */
.so-timeline { position: relative; padding-left: 36px; }
.so-timeline::before {
  content: ''; position: absolute; left: 10px; top: 8px; bottom: 8px;
  width: 1px; background: var(--rule);
}
.so-tl-item { position: relative; margin-bottom: 22px; }
.so-tl-item:last-child { margin-bottom: 0; }
.so-tl-item::before {
  content: ''; position: absolute; left: -30px; top: 7px;
  width: 9px; height: 9px; border-radius: 50%;
  background: var(--grid-green);
  border: 2px solid var(--paper);
  box-shadow: 0 0 0 1px var(--grid-green);
}
.so-tl-year {
  font-family: var(--font-mono); font-size: 11px;
  color: var(--ink-3); letter-spacing: 0.1em;
  margin-bottom: 3px;
}
.so-tl-body { font-size: 15.5px; line-height: 1.5; color: var(--ink); max-width: 640px; }
.so-home .so-timeline { width: 100%; max-width: none; }
.so-home .so-tl-body { width: 100%; max-width: none; }
.so-tl-body em { font-family: var(--font-accent); font-style: italic; color: var(--ink-2); }
.so-tl-body a { color: var(--delft-blue); }

/* ---------- Highlights panel alignment ---------- */
.so-panel--highlights .so-section {
  max-width: 980px;
  margin-left: auto;
  margin-right: auto;
}
.so-panel--highlights .so-sectionhead {
  text-align: center;
}
.so-panel--highlights .so-sectionhead--split {
  justify-content: center;
  align-items: center;
  flex-direction: column;
  gap: 14px;
}
.so-panel--highlights .so-timeline {
  padding-left: 0;
  max-width: 900px;
  margin-left: auto;
  margin-right: auto;
}
.so-panel--highlights .so-timeline::before,
.so-panel--highlights .so-tl-item::before {
  display: none;
}
.so-panel--highlights .so-tl-item {
  margin-bottom: 12px;
  padding: 12px 14px;
  border: 1px solid color-mix(in oklch, var(--rule) 74%, transparent);
  background: color-mix(in oklch, var(--paper) 82%, white);
  border-radius: var(--r-md);
  box-shadow: var(--sh-sm);
  text-align: center;
}
.so-panel--highlights .so-tl-year,
.so-panel--highlights .so-tl-body {
  text-align: center;
  margin-left: auto;
  margin-right: auto;
}
.so-panel--highlights .so-pub {
  grid-template-columns: 1fr;
  grid-template-areas:
    "tags"
    "title"
    "byline"
    "links";
  justify-items: center;
  text-align: center;
}
.so-panel--highlights .so-pub__tags,
.so-panel--highlights .so-pub__links {
  justify-content: center;
}
.so-panel--highlights .so-pub__title,
.so-panel--highlights .so-pub__byline {
  max-width: 860px;
}

/* ---------- Publication list ---------- */
.so-publist { display: flex; flex-direction: column; }
.so-pub {
  padding: 20px 0;
  border-bottom: 1px solid var(--rule);
  display: grid;
  grid-template-columns: 1fr auto;
  grid-template-areas: "tags tags" "title links" "byline links";
  row-gap: 6px; column-gap: 20px;
}
.so-pub:last-child { border: 0; }
.so-pub__tags { grid-area: tags; display: flex; gap: 6px; margin-bottom: 2px; flex-wrap: wrap; }
.so-pub__title {
  grid-area: title;
  font-family: var(--font-display);
  font-size: 18.5px;
  font-weight: 600;
  line-height: 1.3;
  letter-spacing: -0.005em;
  color: var(--ink-2);
  margin: 0;
  max-width: 720px;
}
.so-pub__title a {
  color: inherit;
  text-decoration: none;
  transition: color var(--dur-fast);
}
.so-pub__title a:hover {
  color: var(--delft-blue);
}
.so-pub__byline {
  grid-area: byline;
  font-size: 14px;
  line-height: 1.55;
  color: var(--ink-3);
  max-width: 720px;
}
.so-pub__byline u { color: var(--ink-2); text-decoration-thickness: 1px; text-underline-offset: 3px; }
.so-pub__byline em { font-family: var(--font-accent); font-style: italic; color: var(--ink-2); }
.so-pub__links { grid-area: links; display: flex; align-items: center; justify-content: flex-end; gap: 10px; padding-top: 4px; flex-wrap: wrap; }
.so-pub__links:empty { display: none; }
.so-pub__links a:not(.so-btn) { color: var(--delft-blue); text-decoration: none; font-size: 15px; transition: color var(--dur-fast); }
.so-pub__links a:not(.so-btn):hover { color: var(--delft-blue-2); }
.so-pub__links .so-btn { white-space: nowrap; }
.so-arxiv { height: 14px; vertical-align: middle; }

.so-publications .so-publist {
  --pub-rail-offset: 96px;
  --pub-rail-x: 64px;
  --pub-year-gap: 18px;
  position: relative;
  padding-left: var(--pub-rail-offset);
}
.so-publications .so-publist::before {
  content: '';
  position: absolute;
  left: var(--pub-rail-x);
  top: 8px;
  bottom: 8px;
  width: 1px;
  background: var(--rule);
}
.so-publications .so-pubyear {
  position: relative;
  width: var(--pub-rail-offset);
  min-height: 0;
  line-height: 1;
  margin: 0 0 -4px calc(-1 * var(--pub-rail-offset));
  padding-right: calc(var(--pub-rail-offset) - var(--pub-rail-x) + var(--pub-year-gap));
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.1em;
  color: var(--ink-3);
  text-align: right;
  text-transform: uppercase;
}
.so-publications .so-pubyear::after {
  content: '';
  position: absolute;
  left: var(--pub-rail-x);
  top: 0;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  transform: translate(-50%, 1px);
  background: var(--grid-green);
  box-shadow: 0 0 0 3px var(--paper);
}
.so-publications .so-pub {
  padding: 13px 0 14px;
  grid-template-areas: "tags links" "title links" "byline links";
  row-gap: 4px;
  column-gap: 18px;
}
.so-publications .so-pub__tags {
  margin-bottom: 0;
  align-self: center;
}
.so-publications .so-pub__tags .so-tag {
  padding: 2px 8px;
  font-size: 10px;
}
.so-publications .so-pub__title {
  font-size: 17px;
  max-width: none;
}
.so-publications .so-pub__byline {
  font-size: 13.5px;
  line-height: 1.5;
  max-width: none;
}
.so-publications .so-pub__links {
  padding-top: 0;
}
.so-publications .so-pub__links .so-btn {
  padding: 6px 10px;
  font-size: 12px;
  border-width: 1px;
  box-shadow: none;
}
.so-pub__links a.so-btn:not([href*="arxiv.org"]):not([href*="github.com"]):not([href*="repository.tudelft.nl"]):not([href$=".pdf"]):not([href*="/files/"]),
.so-project__links a.so-btn:not([href*="arxiv.org"]):not([href*="github.com"]):not([href*="repository.tudelft.nl"]):not([href$=".pdf"]):not([href*="/files/"]) {
  background: color-mix(in oklch, var(--delft-blue) 14%, var(--paper));
  color: color-mix(in oklch, var(--delft-blue) 76%, var(--ink));
  border-color: color-mix(in oklch, var(--delft-blue) 28%, var(--rule));
}
.so-pub__links a.so-btn:not([href*="arxiv.org"]):not([href*="github.com"]):not([href*="repository.tudelft.nl"]):not([href$=".pdf"]):not([href*="/files/"]):hover,
.so-project__links a.so-btn:not([href*="arxiv.org"]):not([href*="github.com"]):not([href*="repository.tudelft.nl"]):not([href$=".pdf"]):not([href*="/files/"]):hover {
  background: color-mix(in oklch, var(--delft-blue) 22%, var(--paper));
  color: color-mix(in oklch, var(--delft-blue) 86%, var(--ink));
}
.so-pub__links a.so-btn[href*="arxiv.org"],
.so-project__links a.so-btn[href*="arxiv.org"] {
  background: color-mix(in oklch, var(--signal-amber) 18%, var(--paper));
  color: color-mix(in oklch, var(--signal-amber) 82%, var(--ink));
  border-color: color-mix(in oklch, var(--signal-amber) 34%, var(--rule));
}
.so-pub__links a.so-btn[href*="arxiv.org"]:hover,
.so-project__links a.so-btn[href*="arxiv.org"]:hover {
  background: color-mix(in oklch, var(--signal-amber) 26%, var(--paper));
}
.so-pub__links a.so-btn[href*="github.com"],
.so-project__links a.so-btn[href*="github.com"] {
  background: color-mix(in oklch, var(--grid-green) 16%, var(--paper));
  color: color-mix(in oklch, var(--grid-green) 82%, var(--ink));
  border-color: color-mix(in oklch, var(--grid-green) 32%, var(--rule));
}
.so-pub__links a.so-btn[href*="github.com"]:hover,
.so-project__links a.so-btn[href*="github.com"]:hover {
  background: color-mix(in oklch, var(--grid-green) 24%, var(--paper));
}
.so-pub__links a.so-btn[href$=".pdf"],
.so-pub__links a.so-btn[href*="/files/"],
.so-pub__links a.so-btn[href*="repository.tudelft.nl"],
.so-project__links a.so-btn[href$=".pdf"],
.so-project__links a.so-btn[href*="/files/"],
.so-project__links a.so-btn[href*="repository.tudelft.nl"] {
  background: color-mix(in oklch, var(--signal-rust) 14%, var(--paper));
  color: color-mix(in oklch, var(--signal-rust) 84%, var(--ink));
  border-color: color-mix(in oklch, var(--signal-rust) 30%, var(--rule));
}
.so-pub__links a.so-btn[href$=".pdf"]:hover,
.so-pub__links a.so-btn[href*="/files/"]:hover,
.so-pub__links a.so-btn[href*="repository.tudelft.nl"]:hover,
.so-project__links a.so-btn[href$=".pdf"]:hover,
.so-project__links a.so-btn[href*="/files/"]:hover,
.so-project__links a.so-btn[href*="repository.tudelft.nl"]:hover {
  background: color-mix(in oklch, var(--signal-rust) 22%, var(--paper));
}
.so-pub__links .so-cite-trigger {
  background: color-mix(in oklch, #8b4ab8 16%, var(--paper));
  color: color-mix(in oklch, #8b4ab8 78%, var(--ink));
  border-color: color-mix(in oklch, #8b4ab8 32%, var(--rule));
}
.so-pub__links .so-cite-trigger:hover {
  background: color-mix(in oklch, #8b4ab8 24%, var(--paper));
}

/* ---------- Tags ---------- */
.so-tag {
  display: inline-flex; align-items: center;
  padding: 3px 9px;
  border-radius: var(--r-pill);
  font-family: var(--font-body);
  font-size: 10.5px;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  line-height: 1.4;
}
.so-tag--pub { background: var(--grid-green-3); color: var(--signal-ink); }
.so-tag--pre { background: color-mix(in oklch, var(--signal-amber) 18%, var(--paper)); color: var(--signal-amber); }
.so-tag--honor { background: color-mix(in oklch, #8b4ab8 18%, var(--paper)); color: color-mix(in oklch, #8b4ab8 78%, var(--ink)); }
.so-tag--year {
  background: transparent; color: var(--ink-3);
  border: 1px solid var(--rule);
  font-family: var(--font-mono);
  text-transform: none; letter-spacing: 0.02em;
  font-weight: 500;
}

/* ---------- Year section (publications page) ---------- */
.so-year { margin-bottom: 56px; }
.so-year__head {
  display: flex; align-items: baseline; justify-content: space-between;
  padding-bottom: 10px;
  border-bottom: 2px solid var(--ink-2);
  margin-bottom: 8px;
}
.so-year__num {
  font-family: var(--font-display);
  font-size: 44px; font-weight: 600;
  letter-spacing: -0.03em;
  color: var(--ink-2);
  line-height: 1;
}
.so-year__count {
  font-family: var(--font-mono);
  font-size: 11px;
  color: var(--ink-3);
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

/* ---------- Projects ---------- */
.so-projects { display: flex; flex-direction: column; gap: 28px; }
.so-project {
  display: grid;
  grid-template-columns: 360px 1fr;
  gap: 32px;
  padding: 28px;
  background: var(--paper-2);
  border: 1px solid var(--rule);
  border-radius: var(--r-md);
  box-shadow: var(--sh-sm);
  align-items: center;
  transition: box-shadow var(--dur-normal) var(--ease-standard);
}
.so-project:hover { box-shadow: var(--sh-md); }
.so-project__thumb {
  aspect-ratio: 16 / 10;
  background: var(--surface);
  border: 1px solid var(--rule);
  border-radius: var(--r-md);
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 18px;
  text-decoration: none;
}
.so-project__thumb img { max-width: 100%; max-height: 100%; object-fit: contain; }
.so-project__placeholder {
  font-family: var(--font-display);
  font-size: 28px; font-weight: 600;
  color: var(--ink-3);
  letter-spacing: -0.01em;
}
.so-project__info { display: flex; flex-direction: column; gap: 8px; }
.so-project__meta { display: flex; gap: 6px; margin-bottom: 4px; flex-wrap: wrap; }
.so-project__info p { font-size: 15px; line-height: 1.6; color: var(--ink); margin: 0 0 8px; max-width: 540px; }
.so-project__links { display: flex; gap: 18px; font-size: 14px; }
.so-project__links a { text-decoration: none; }
.so-project__links a:hover { text-decoration: underline; }

/* ---------- Students / rows ---------- */
.so-students { display: flex; flex-direction: column; }
.so-student {
  display: flex; justify-content: space-between; align-items: center;
  padding: 18px 0; border-bottom: 1px solid var(--rule);
  gap: 20px;
}
.so-student:last-child { border: 0; }
.so-student__name {
  font-family: var(--font-display);
  font-size: 19px;
  font-weight: 600;
  color: var(--ink-2);
  letter-spacing: -0.005em;
  margin-bottom: 2px;
}
.so-student__l { flex: 1 1 auto; min-width: 0; }
.so-student__thesis { font-size: 14.5px; color: var(--ink-3); line-height: 1.5; max-width: 640px; }
.so-student__thesis em { font-family: var(--font-accent); font-style: italic; color: var(--ink); }
.so-student__actions { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 12px; justify-content: flex-end; }
.so-student__r { display: flex; flex-direction: column; align-items: flex-end; gap: 12px; flex-shrink: 0; }
.so-student__meta { display: flex; align-items: center; justify-content: flex-end; gap: 16px; }

/* ---------- Courses section ---------- */
.so-courses .so-students { gap: 14px; }
.so-courses .so-student {
  padding: 18px 20px;
  border: 1px solid var(--rule);
  border-left: 4px solid color-mix(in oklch, var(--grid-green) 52%, var(--rule));
  border-radius: var(--r-md);
  background: linear-gradient(180deg, color-mix(in oklch, var(--paper-2) 92%, white), var(--paper-2));
  box-shadow: var(--sh-sm);
  transition: box-shadow var(--dur-fast) var(--ease-standard), border-color var(--dur-fast) var(--ease-standard);
}
.so-courses .so-student:hover {
  box-shadow: var(--sh-md);
  border-color: color-mix(in oklch, var(--grid-green) 24%, var(--rule));
}
.so-courses .so-student:last-child { border-color: var(--rule); }
.so-courses .so-student__name { margin-bottom: 4px; }
.so-courses .so-student__thesis { margin-bottom: 6px; }
.so-courses .so-student__note {
  font-size: 14px;
  line-height: 1.5;
  color: var(--ink-3);
  max-width: 760px;
}

/* ---------- MSc theses section ---------- */
.so-theses .so-student__thesis {
  font-size: 16px;
  line-height: 1.6;
  color: var(--ink-2);
  max-width: 760px;
}
.so-theses .so-student__thesis em {
  color: var(--ink-2);
}
.so-theses .so-student__actions .so-btn {
  border-width: 1px;
  box-shadow: none;
}
.so-theses .so-student__actions a.so-btn[href*="publications.html"],
.so-theses .so-student__actions a.so-btn[href^="#pub-"] {
  background: color-mix(in oklch, var(--delft-blue) 14%, var(--paper));
  color: color-mix(in oklch, var(--delft-blue) 80%, var(--ink));
  border-color: color-mix(in oklch, var(--delft-blue) 30%, var(--rule));
}
.so-theses .so-student__actions a.so-btn[href*="publications.html"]:hover,
.so-theses .so-student__actions a.so-btn[href^="#pub-"]:hover {
  background: color-mix(in oklch, var(--delft-blue) 22%, var(--paper));
}
.so-theses .so-student__actions a.so-btn[href*="repository.tudelft.nl"],
.so-theses .so-student__actions a.so-btn[href*="dias.library.tuc.gr"] {
  background: color-mix(in oklch, var(--signal-rust) 14%, var(--paper));
  color: color-mix(in oklch, var(--signal-rust) 82%, var(--ink));
  border-color: color-mix(in oklch, var(--signal-rust) 30%, var(--rule));
}
.so-theses .so-student__actions a.so-btn[href*="repository.tudelft.nl"]:hover,
.so-theses .so-student__actions a.so-btn[href*="dias.library.tuc.gr"]:hover {
  background: color-mix(in oklch, var(--signal-rust) 22%, var(--paper));
}

/* ---------- Citations page ---------- */
.so-citelist { display: flex; flex-direction: column; gap: 22px; }
.so-citeitem {
  padding: 22px;
  background: var(--paper-2);
  border: 1px solid var(--rule);
  border-radius: var(--r-md);
  box-shadow: var(--sh-sm);
}
.so-citeitem__citation {
  margin: 0 0 16px;
  font-size: 15px;
  line-height: 1.65;
  color: var(--ink);
}
.so-codeblock {
  margin: 0;
  padding: 16px 18px;
  background: var(--surface);
  border: 1px solid var(--rule);
  border-radius: var(--r-md);
  overflow-x: auto;
  font-family: var(--font-mono);
  font-size: 12.5px;
  line-height: 1.65;
  color: var(--ink-2);
  white-space: pre;
}
.so-cite-trigger { appearance: none; }
.so-cite-dialog {
  width: min(680px, calc(100vw - 32px));
  margin: auto;
  padding: 24px;
  border: 1px solid var(--rule);
  border-radius: var(--r-md);
  background: var(--paper);
  box-shadow: var(--sh-md);
}
.so-cite-dialog::backdrop { background: rgba(24, 32, 28, 0.28); backdrop-filter: blur(2px); }
.so-cite-dialog__head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 16px;
  margin-bottom: 16px;
}
.so-cite-dialog__head .so-eyebrow { margin-bottom: 8px; }
.so-cite-dialog__close {
  width: 36px;
  height: 36px;
  border: 1px solid var(--rule);
  border-radius: 999px;
  background: var(--paper-2);
  color: var(--ink-2);
  font-size: 22px;
  line-height: 1;
  cursor: pointer;
}
.so-cite-dialog__close:hover { background: var(--paper-3); }
.so-cite-dialog__code {
  max-height: 340px;
  margin-bottom: 14px;
}
.so-cite-dialog__actions {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  flex-wrap: wrap;
}
.so-cite-dialog__status {
  font-family: var(--font-mono);
  font-size: 12px;
  color: var(--ink-3);
}

/* ---------- Service prose ---------- */
.so-prose { font-size: 16px; line-height: 1.65; color: var(--ink); max-width: 780px; }
.so-prose em { font-family: var(--font-accent); font-style: italic; color: var(--ink-2); }

/* ---------- Responsive ---------- */
@media (max-width: 880px) {
  .so-nav__inner { padding: 12px 20px; gap: 12px; flex-wrap: wrap; }
  .so-nav__sub { display: none; }
  .so-nav__actions { width: 100%; justify-content: flex-start; }
  .so-nav__tabs { flex-wrap: wrap; gap: 2px; }
  .so-nav__tab { padding: 6px 10px; font-size: 13px; }
  .so-theme-toggle { min-width: 0; }
  .so-foot__inner { padding: 12px 20px; flex-wrap: wrap; gap: 10px; }
  .so-foot__upd { display: none; }
  .so-page { padding: 0; }
  .so-page { gap: 0; }
  .so-panel {
    min-height: calc(100vh - var(--nav-h) - var(--foot-h));
    padding: 24px 18px 26px;
    border-radius: 0;
    scroll-margin-top: 84px;
  }
  .so-panel--teaching { background-size: 11px 11px, auto; }
  .so-intro {
    grid-template-columns: 1fr;
    grid-template-areas:
      "portrait"
      "text"
      "edu"
      "interests"
      "quote";
    gap: 32px;
  }
  .so-home .so-rule { margin: 28px 0 22px; }
  .so-intro__portrait { width: 220px; height: 280px; padding: 8px; }
  .so-intro__edu { grid-template-columns: 1fr; max-width: 640px; }
  .so-intro__quote { padding: 16px 18px 16px 20px; }
  .so-intro__quote blockquote { font-size: 21px; }
  .so-project { grid-template-columns: 1fr; padding: 20px; gap: 20px; }
  .so-h1 { font-size: 44px; }
  .so-h2 { font-size: 28px; }
  .so-year__num { font-size: 32px; }
  .so-student { flex-direction: column; align-items: flex-start; gap: 8px; }
  .so-student__r { align-items: flex-start; width: 100%; }
  .so-student__meta { justify-content: flex-start; }
  .so-student__actions { justify-content: flex-start; }
  .so-pub { grid-template-columns: 1fr; grid-template-areas: "tags" "title" "byline" "links"; }
  .so-pub__links { padding-top: 0; }
  .so-publications .so-publist { padding-left: 0; }
  .so-publications .so-publist::before { display: none; }
  .so-publications .so-pubyear {
    width: auto;
    margin: 8px 0 2px;
    min-height: 0;
    padding-right: 0;
    text-align: left;
  }
  .so-publications .so-pubyear::after { display: none; }
  .so-publications .so-pub { grid-template-areas: "title" "byline" "links"; }
  .so-sectionhead--split { flex-direction: column; align-items: flex-start; gap: 12px; }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .so-panel { transition: none; opacity: 1; transform: none; }
}