/* ------------------------------------------------------------------
   Printable CV (A4). One accent, dates in a left gutter, plain bullets.
   Screen shows the same sheet on a grey backdrop.
   ------------------------------------------------------------------ */

:root {
  --ink: #111827;
  --ink-2: #374151;
  --ink-3: #5b6472;
  --rule: #d1d5db;
  --accent: #15803d;
  --font-sans: "Inter", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
}

@page { size: A4; margin: 0; }

* { box-sizing: border-box; }
html, body { margin: 0; }
body {
  font-family: var(--font-sans);
  color: var(--ink);
  background: #e9ecef;
  font-size: 10pt;
  line-height: 1.42;
  -webkit-font-smoothing: antialiased;
  -webkit-print-color-adjust: exact; print-color-adjust: exact;
}
a { color: inherit; text-decoration: none; }
p, ul, h1, h2, h3 { margin: 0; }
ul { padding: 0; list-style: none; }

/* ---------- on-screen toolbar (hidden when printing) ---------- */
.toolbar {
  position: sticky; top: 0; z-index: 10;
  display: flex; align-items: center; gap: 18px;
  padding: 10px 20px; background: #111827; color: #e5e7eb; font-size: 13px;
}
.toolbar__spacer { flex: 1; }
.toolbar__link { color: #e5e7eb; font-weight: 600; }
.toolbar__link:hover { color: #fff; text-decoration: underline; }
.toolbar__btn {
  font: inherit; font-weight: 700; color: #052e16; background: #7cf29a;
  border: 0; border-radius: 999px; padding: 8px 16px; cursor: pointer;
}
.toolbar__btn:hover { filter: brightness(1.05); }

/* ---------- the sheet ---------- */
.page {
  width: 210mm; min-height: 297mm; margin: 24px auto;
  padding: 15mm 16mm 12mm;
  background: #fff;
  box-shadow: 0 10px 40px rgba(0, 0, 0, .18);
}
@media screen and (max-width: 820px) { .page { width: 100%; margin: 0; padding: 20px 16px; } }

/* ---------- header ---------- */
.cv-head { display: flex; gap: 6mm; align-items: center; padding-bottom: 3.5mm; margin-bottom: 4mm; border-bottom: 1.5pt solid var(--ink); }
.cv-head__photo { width: 22mm; height: 22mm; border-radius: 50%; object-fit: cover; flex: none; }
.cv-head h1 { font-size: 22pt; font-weight: 800; letter-spacing: -0.025em; line-height: 1.05; }
.cv-head__headline { margin-top: 2px; font-size: 11.5pt; font-weight: 600; color: var(--ink); }
.cv-head__contact { margin-top: 2.2mm; display: flex; flex-wrap: wrap; gap: 1mm 0; font-size: 8.8pt; color: var(--ink-2); }
.cv-head__contact li:not(:last-child)::after { content: "·"; margin: 0 2mm; color: var(--ink-3); }
.cv-head__contact a:hover { color: var(--accent); }

/* ---------- body columns ---------- */
.cv-body { display: grid; grid-template-columns: 1fr 52mm; gap: 9mm; }
@media screen and (max-width: 820px) { .cv-body { grid-template-columns: 1fr; } }

.cv-section + .cv-section { margin-top: 4mm; }
.cv-section h2 {
  font-size: 8.2pt; font-weight: 700; letter-spacing: .12em; text-transform: uppercase;
  color: var(--ink); padding-bottom: 1.6mm; margin-bottom: 2.8mm; border-bottom: 0.75pt solid var(--ink);
}

.cv-prose p + p { margin-top: 1.8mm; }
.cv-prose { color: var(--ink-2); font-size: 9.3pt; }
.cv-looking { color: var(--ink); }
.cv-looking b { font-weight: 600; }

/* jobs: date gutter on the left */
.cv-job { display: grid; grid-template-columns: 24mm 1fr; gap: 0 4mm; break-inside: avoid; }
.cv-job + .cv-job { margin-top: 4mm; }
.cv-job__when { font-size: 8.6pt; color: var(--ink-3); padding-top: 1.1pt; line-height: 1.35; }
.cv-job__role { font-size: 11pt; font-weight: 700; letter-spacing: -0.01em; }
.cv-job__company { font-size: 9.4pt; font-weight: 600; color: var(--ink-2); }
.cv-job__company span { font-weight: 400; color: var(--ink-3); }
.cv-job__intro { margin-top: 1.2mm; color: var(--ink-2); font-size: 9.1pt; }
.cv-job__products { margin-top: 1.4mm; font-size: 9.1pt; color: var(--ink-2); }
.cv-job__products b { color: var(--ink); font-weight: 600; }
.cv-job__bullets { margin-top: 1.8mm; display: grid; gap: 1.1mm; }
.cv-job__bullets li { position: relative; padding-left: 3.4mm; color: var(--ink-2); font-size: 9.1pt; }
.cv-job__bullets li::before { content: "–"; position: absolute; left: 0; color: var(--ink-3); }
.cv-side .cv-job { grid-template-columns: 1fr; gap: 0; }
.cv-side .cv-job__when { font-size: 8.4pt; }
.cv-job--edu b { font-size: 9.4pt; }
.cv-job--edu .cv-job__company { font-weight: 400; }

/* sidebar */
.cv-skill-group + .cv-skill-group { margin-top: 2mm; }
.cv-skill-group h3 { font-size: 8.6pt; font-weight: 700; color: var(--ink); margin-bottom: .6mm; break-after: avoid; }
.cv-skill-group p { font-size: 8.5pt; color: var(--ink-2); line-height: 1.38; }
.cv-skill-group { break-inside: avoid; }

.cv-langs li { font-size: 9pt; color: var(--ink-2); display: flex; justify-content: space-between; gap: 6px; }
.cv-langs b { color: var(--ink); font-weight: 600; }

.cv-foot { margin-top: 2.5mm; padding-top: 1.5mm; border-top: 0.5pt solid var(--rule); font-size: 7.4pt; color: var(--ink-3); }

/* ---------- print ---------- */
@media print {
  body { background: #fff; }
  .toolbar { display: none !important; }
  .page { width: auto; min-height: 0; margin: 0; padding: 11mm 15mm 8mm; box-shadow: none; }
  .cv-head { break-inside: avoid; }
  .cv-section h2 { break-after: avoid; }
}