/* The CV is a sheet of paper on every screen and in every theme: it gets
   printed and handed out, so it reads the same wherever it ends up. Only the
   backdrop around it follows the visitor's light or dark preference.
   It is written to be read in ten seconds at a stand: big name, four numbers,
   three projects, and a QR code for everything else. */
:root {
  --paper: #fff;
  --ink: #11161D;
  --ink-muted: #4A5666;
  --rule: #D5DCE5;
  --accent: #EA580C;      /* rules and markers */
  --accent-ink: #B9450A;  /* accent as text: 5.6:1 on white */
  --backdrop: #E9EDF2;
  --bar-text: #3A4553;
  --font-sans: 'IBM Plex Sans', 'Segoe UI', sans-serif;
  --font-mono: 'IBM Plex Mono', Consolas, monospace;
}
@media (prefers-color-scheme: dark) {
  :root { --backdrop: #0F1318; --bar-text: #B7C1CF; }
}

* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0; background: var(--backdrop); color: var(--ink);
  font-family: var(--font-sans); line-height: 1.45;
}
a { color: inherit; text-decoration-color: var(--rule); text-underline-offset: 2px; }
a:hover { text-decoration-color: var(--accent); }

.cv-bar {
  display: flex; flex-wrap: wrap; align-items: center; gap: .5rem 1rem;
  max-width: 210mm; margin: 0 auto; padding: 14px 16px;
  font-size: 14px; color: var(--bar-text);
}
.cv-bar__home { font-family: var(--font-mono); font-weight: 600; }
.cv-bar__hint { flex: 1 1 14rem; }
.cv-bar__print {
  font: 600 14px var(--font-sans); color: #fff; background: var(--accent-ink);
  border: 0; border-radius: 8px; padding: .55rem 1rem; cursor: pointer;
}
.cv-bar__print:hover { background: #9A3A08; }
.cv-bar__print:focus-visible, .cv-bar a:focus-visible, .cv-qr:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }

.sheet {
  width: 210mm; min-height: 297mm; margin: 0 auto 40px; padding: 16mm 17mm 12mm;
  background: var(--paper); box-shadow: 0 1px 3px rgb(0 0 0 / .12), 0 12px 40px rgb(0 0 0 / .12);
  /* The same size as on paper, so the screen shows what prints. */
  font-size: 16.8px;
  display: flex; flex-direction: column;
}

.cv-head {
  display: flex; justify-content: space-between; align-items: flex-start; gap: 1.5rem;
  border-bottom: 2px solid var(--ink); padding-bottom: 14px;
}
.cv-head h1 { margin: 0; font-size: 2.6em; line-height: 1.05; letter-spacing: -.01em; }
.cv-role {
  margin: 8px 0 12px; font: 600 .8em var(--font-mono); letter-spacing: .08em;
  text-transform: uppercase; color: var(--accent-ink);
}
.cv-contact { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 2px 11px; font-size: .8em; color: var(--ink-muted); }

/* The QR code keeps a white quiet zone around it (four modules is the
   standard), or phone cameras struggle to find its edges. */
.cv-qr { flex: none; display: flex; flex-direction: column; align-items: center; gap: 4px; text-decoration: none; }
.cv-qr__code { display: block; width: 27mm; height: 27mm; padding: 3.5mm; background: #fff; }
.cv-qr span { font: .7em var(--font-mono); letter-spacing: .04em; color: var(--ink-muted); }

.cv-lead { margin: 16px 0 14px; font-size: 1.12em; }

.cv-numbers {
  display: grid; grid-template-columns: repeat(4, 1fr);
  margin: 0 0 20px; border-block: 1px solid var(--rule);
}
.cv-numbers div { padding: 9px 12px; border-left: 1px solid var(--rule); }
.cv-numbers div:first-child { border-left: 0; padding-left: 0; }
.cv-numbers dt { font: .72em var(--font-mono); letter-spacing: .06em; text-transform: uppercase; color: var(--ink-muted); }
.cv-numbers dd { margin: 2px 0 0; font-size: 1.9em; font-weight: 700; line-height: 1.1; }

.cv-cols { display: grid; grid-template-columns: minmax(0, 1fr) 32%; gap: 0 26px; margin-bottom: 18px; }

h2 {
  margin: 0 0 8px; font: 600 .78em var(--font-mono); letter-spacing: .1em;
  text-transform: uppercase; color: var(--accent-ink);
  border-bottom: 1px solid var(--rule); padding-bottom: 4px;
}
.cv-side h2 { margin-top: 18px; }
.cv-side h2:first-child { margin-top: 0; }

.cv-proj { margin: 0 0 14px; break-inside: avoid; }
.cv-proj h3 { margin: 0; font-size: 1.12em; }
.cv-stack { margin: 1px 0 4px; font: .8em var(--font-mono); color: var(--ink-muted); }
.cv-proj ul, .cv-bring { margin: 0; padding-left: 1.05em; }
.cv-proj li, .cv-bring li { margin: 0 0 3px; }
.cv-proj li::marker, .cv-bring li::marker { color: var(--accent); }

.cv-side p { margin: 0 0 5px; }

.cv-foot {
  margin-top: auto; padding-top: 6px; border-top: 1px solid var(--rule);
  font: .74em var(--font-mono); color: var(--ink-muted);
}

/* Phones: the sheet becomes the page, and the columns stack. A QR code to
   the page you are already on is no use there, so it goes. */
@media screen and (max-width: 820px) {
  .sheet { width: auto; min-height: 0; margin: 0 0 24px; padding: 20px 16px; box-shadow: none; font-size: 15px; }
  .cv-qr { display: none; }
  .cv-contact li { overflow-wrap: anywhere; }
  .cv-numbers { grid-template-columns: repeat(2, 1fr); }
  .cv-numbers div, .cv-numbers div:first-child { border-left: 0; padding-left: 0; }
  .cv-cols { grid-template-columns: 1fr; }
  .cv-side h2:first-child { margin-top: 18px; }
}

@page { size: A4; margin: 0; }
@media print {
  body { background: #fff; }
  .cv-bar { display: none; }
  .sheet { width: 210mm; min-height: 0; margin: 0; padding: 16mm 17mm 12mm; box-shadow: none; font-size: 12.6pt; }
  a { text-decoration: none; }
  * { -webkit-print-color-adjust: exact; print-color-adjust: exact; }
}