/* Printable CV. The paper always uses the light palette; the backdrop
   around it follows the visitor's theme. */

@font-face { font-family: "LM Display"; src: url("../assets/fonts/lm-display.woff2") format("woff2"); font-weight: 400; font-display: swap; }
@font-face { font-family: "LM Display"; src: url("../assets/fonts/lm-italic.woff2") format("woff2"); font-weight: 400; font-style: italic; font-display: swap; }
@font-face { font-family: "Instrument Sans"; src: url("../assets/fonts/instrument-sans.woff2") format("woff2"); font-weight: 400 700; font-display: swap; }

:root {
  --backdrop: #e9e8f1;
  --tb-ink: #150f30;
  --tb-rule: #cfcbe0;
  /* Paper (fixed) */
  --paper: #ffffff;
  --ink: #150f30;
  --ink-2: #3a3460;
  --muted: #5f5a7f;
  --rule: #e1deec;
  --lane-1: #4c1db4;
  --lane-2: #b0208c;
  --lane-3: #d4541c;
  --lane-4: #a57800;
  --accent: var(--lane-1);
  color-scheme: light;
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) { --backdrop: #0c0a1d; --tb-ink: #eeebf8; --tb-rule: #2b2552; color-scheme: dark; }
}
:root[data-theme="dark"] { --backdrop: #0c0a1d; --tb-ink: #eeebf8; --tb-rule: #2b2552; color-scheme: dark; }

*, *::before, *::after { box-sizing: border-box; }
h1, h2, h3, p, ul, dl, dd { margin: 0; }
ul { padding: 0; list-style: none; }
a { color: inherit; }

html { background: var(--backdrop); }
body {
  margin: 0;
  background: var(--backdrop);
  color: var(--ink);
  font-family: "Instrument Sans", ui-sans-serif, system-ui, sans-serif;
  -webkit-font-smoothing: antialiased;
}
:focus-visible { outline: 2.5px solid var(--accent); outline-offset: 3px; border-radius: 6px; }
.icon { width: 1.1em; height: 1.1em; flex: none; }
.noscript { padding: 24px; text-align: center; }

/* ── Screen: toolbar and paper ─────────────────────────────────────────── */

.toolbar {
  position: sticky; top: 0; z-index: 2;
  display: flex; justify-content: space-between; gap: 12px;
  max-width: calc(210mm + 32px);
  margin: 0 auto;
  padding: 16px;
}
.tb-btn {
  display: inline-flex; align-items: center; gap: 8px;
  min-height: 44px;
  padding: 0 18px 0 14px;
  border: 1.5px solid var(--tb-rule);
  border-radius: 999px;
  background: var(--backdrop);
  color: var(--tb-ink);
  font: inherit;
  font-size: 0.875rem;
  font-weight: 600;
  text-decoration: none;
  cursor: pointer;
  transition: border-color 0.2s;
}
.tb-btn:hover { border-color: var(--tb-ink); }
.tb-primary { background: var(--tb-ink); border-color: var(--tb-ink); color: var(--backdrop); }

.sheet-page { padding: 0 16px 64px; }
.paper {
  width: 210mm;
  max-width: 100%;
  min-height: 297mm;
  margin: 0 auto;
  padding: 16mm 15mm;
  background: var(--paper);
  border-radius: 6px;
  box-shadow: 0 1px 2px rgb(20 24 51 / 0.08), 0 30px 80px -30px rgb(20 24 51 / 0.45);
  font-size: 9.5pt;
  line-height: 1.5;
}

/* ── CV layout ─────────────────────────────────────────────────────────── */

.cv-top {
  display: flex; justify-content: space-between; gap: 8mm;
  padding-bottom: 7mm;
  margin-bottom: 7mm;
  border-bottom: 1.5pt solid var(--ink);
}
.cv-name { font-family: "LM Display", "Latin Modern Roman", serif; font-size: 32pt; font-weight: 400; line-height: 1; letter-spacing: -0.015em; }
.cv-headline { max-width: 60ch; margin-top: 3mm; font-size: 10.5pt; color: var(--ink-2); }
.cv-contact { display: flex; flex-wrap: wrap; gap: 1.5mm 5mm; margin-top: 4mm; font-size: 8.5pt; color: var(--ink-2); }
.cv-contact li { display: inline-flex; align-items: center; gap: 1.6mm; }
.cv-contact .icon { width: 3.4mm; height: 3.4mm; color: var(--muted); }
.cv-contact a { text-decoration: none; }
.cv-photo { width: 28mm; height: 35mm; object-fit: cover; border-radius: 3mm; }

.cv-cols { display: grid; grid-template-columns: minmax(0, 1fr) 52mm; gap: 9mm; }
@media (max-width: 720px) {
  .cv-cols { grid-template-columns: 1fr; }
  .cv-top { flex-direction: column-reverse; }
  .paper { padding: 24px 20px; min-height: 0; }
}
.cv-main, .cv-aside { display: grid; gap: 6.5mm; align-content: start; }

.cv-h {
  display: flex; align-items: center; gap: 2.2mm;
  margin-bottom: 3mm;
  font-family: "LM Display", "Latin Modern Roman", serif;
  font-size: 14pt;
  font-weight: 400;
}
.cv-h i { width: 2.6mm; height: 2.6mm; border-radius: 50%; border: 0.7mm solid var(--tc, var(--ink)); }

/* Entries hang off a thin branch line, echoing the graph on the site. */
.cv-entries { display: grid; gap: 3.5mm; }
.cv-entries[style] { padding-left: 4.4mm; border-left: 0.6mm solid color-mix(in oklab, var(--tc) 55%, white); margin-left: 1.05mm; }
.cv-entries[style] .cv-entry { position: relative; }
.cv-entries[style] .cv-entry::before {
  content: "";
  position: absolute;
  left: calc(-4.4mm - 0.3mm - 1.1mm);
  top: 1.6mm;
  width: 2.2mm; height: 2.2mm;
  border-radius: 50%;
  background: var(--tc);
  box-shadow: 0 0 0 0.6mm var(--paper);
  print-color-adjust: exact;
  -webkit-print-color-adjust: exact;
}
.cv-entry { break-inside: avoid; }
.cv-entry header { display: flex; justify-content: space-between; align-items: baseline; gap: 4mm; }
.cv-entry h3 { font-size: 10pt; font-weight: 700; line-height: 1.35; }
.cv-stack { margin-left: 2mm; font-weight: 400; font-size: 8.5pt; color: var(--muted); }
.cv-when { flex: none; font-size: 8.5pt; color: var(--muted); font-variant-numeric: tabular-nums; white-space: nowrap; }
.cv-org { color: var(--ink-2); font-weight: 550; }
.cv-venue { font-family: "LM Display", serif; font-style: italic; font-size: 10pt; color: var(--muted); }
.cv-pub .cv-text .me { font-weight: 700; color: var(--ink); }
.katex { font-size: 1.05em; }
.example-tag {
  display: inline-block; margin-left: 2mm; padding: 0 1.8mm;
  border: 0.3mm dashed var(--lane-2); border-radius: 99px;
  font-size: 7pt; font-weight: 600; color: var(--lane-2); vertical-align: 0.3em;
}
.cv-text { color: var(--ink-2); }
.cv-profile { font-size: 10pt; }
.cv-text a, .cv-link a { text-decoration: none; }
.cv-link { font-size: 8.5pt; color: var(--accent); }
.cv-points { display: grid; gap: 0.6mm; margin-top: 1mm; color: var(--ink-2); }
.cv-points li { position: relative; padding-left: 3.2mm; }
.cv-points li::before { content: ""; position: absolute; left: 0; top: 0.75em; width: 1.6mm; height: 0.35mm; background: var(--muted); }

.cv-skills, .cv-langs { display: grid; gap: 2.4mm; }
.cv-skills dt, .cv-langs dt { font-weight: 700; }
.cv-skills dd { color: var(--ink-2); }
.cv-langs div { display: flex; justify-content: space-between; gap: 3mm; }
.cv-langs dd { color: var(--muted); text-align: right; }

@view-transition { navigation: auto; }

/* ── Print ─────────────────────────────────────────────────────────────── */

@page { size: A4; margin: 14mm 14mm 14mm; }
@media print {
  html, body { background: #fff; }
  .toolbar { display: none; }
  .sheet-page { padding: 0; }
  .paper { width: auto; min-height: 0; padding: 0; box-shadow: none; border-radius: 0; }
  .cv-cols { grid-template-columns: minmax(0, 1fr) 50mm; }
  a { text-decoration: none; }
}