/* ── Print: Chrome → Ctrl+P → Save as PDF · Margins: Default · Background graphics: ON ── */
/* Tokens follow the site palette (palette.js sets --dk/--lime/--hero/--text/--text-2
   inline on <html>); the hex fallbacks apply when palette.js is absent. */
:root {
  --ink:    var(--text, #1E2422);
  --green:  var(--dk, #1A3D2C);
  --lime:   #A8CE2E; /* overridden by palette.js inline --lime */
  --lime-soft: var(--hero, #F3F8E2);
  --muted:  var(--text-2, #6B7570);
  --rule:   rgba(var(--dk-rgb, 30, 36, 34), .16);
}

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

html { -webkit-print-color-adjust: exact; print-color-adjust: exact; }

body {
  font-family: 'Poppins', Arial, sans-serif;
  font-size: 9.6pt;
  font-weight: 400;
  color: var(--ink);
  line-height: 1.5;
  background: var(--bg2, #E9ECE9);
}

/* ── Screen preview: white sheet on gray ── */
.sheet {
  max-width: 210mm;
  margin: 24px auto;
  background: #FFFFFF;
  padding: 13mm 16mm 16mm;
  box-shadow: 0 2px 24px rgba(0,0,0,.14);
}

@media print {
  body { background: #FFFFFF; }
  .sheet { max-width: none; margin: 0; padding: 0 16mm; box-shadow: none; }
  a { color: inherit; }
}

a { color: var(--green); text-decoration: none; }

/* ── Header ── */
.cv-header { border-bottom: 2.2pt solid var(--lime); padding-bottom: 10pt; }
.cv-name {
  font-size: 24pt;
  font-weight: 700;
  color: var(--green);
  letter-spacing: -0.01em;
  line-height: 1.15;
}
.cv-role {
  font-size: 12pt;
  font-weight: 500;
  color: var(--ink);
  margin-top: 2pt;
}
.cv-role em { font-style: normal; color: var(--muted); font-weight: 400; }
.cv-contact {
  margin-top: 7pt;
  font-size: 8.8pt;
  color: var(--ink);
  display: flex;
  flex-wrap: wrap;
  gap: 3pt 14pt;
}
.cv-contact span { white-space: nowrap; }
.cv-contact svg { width: 8.5pt; height: 8.5pt; vertical-align: -1.2pt; margin-right: 3.5pt; color: var(--green); }

/* ── Sections ── */
section { margin-top: 14pt; }
.sec-title {
  font-size: 10.5pt;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .13em;
  color: var(--green);
  border-bottom: .8pt solid var(--rule);
  padding-bottom: 3pt;
  margin-bottom: 8pt;
  break-after: avoid;
}
.sec-title b { color: var(--lime); font-weight: 700; }

/* ── Summary ── */
.summary p { margin-bottom: 5pt; text-align: justify; }
.summary p:last-child { margin-bottom: 0; }
.stats {
  display: flex;
  gap: 26pt;
  margin-top: 8pt;
  padding: 7pt 12pt;
  background: var(--lime-soft);
  border-left: 2.5pt solid var(--lime);
}
.stat-val { font-size: 13pt; font-weight: 700; color: var(--green); line-height: 1.1; }
.stat-lbl { font-size: 7.8pt; text-transform: uppercase; letter-spacing: .08em; color: var(--muted); }

/* ── Expertise grid ── */
.exp-grid {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  gap: 7pt 12pt;
}
.exp-item { break-inside: avoid; }
.exp-name { font-weight: 600; font-size: 9.2pt; color: var(--green); }
.exp-name svg { width: 10.5pt; height: 10.5pt; vertical-align: -2pt; margin-right: 4.5pt; color: var(--lime); }
.exp-desc { font-size: 8.3pt; color: var(--muted); line-height: 1.42; margin-top: 1pt; }

/* ── Experience (vertical timeline) ──
   No positioned elements here: position:relative/absolute reorders the PDF
   text stream (positioned boxes paint in a later phase), which scrambles
   text-extraction order for ATS. The node circle is an in-flow inline-block
   pulled into the gutter with negative margin instead. */
.job {
  border-left: 1.2pt solid var(--rule);
  padding-left: 14pt;
  padding-bottom: 12pt;
}
.job:last-child { padding-bottom: 2pt; }
.job-company::before {
  content: '';
  display: inline-block;
  width: 8.4pt;
  height: 8.4pt;
  border-radius: 50%;
  background: var(--white, #FFFFFF);
  border: 1.8pt solid var(--green);
  margin-left: -18.8pt;
  margin-right: 10.4pt;
  vertical-align: -0.6pt;
}
.job--current .job-company::before { background: var(--lime); }
.job-head { break-inside: avoid; break-after: avoid; }
.job-line1 { display: flex; justify-content: space-between; align-items: baseline; gap: 10pt; }
.job-company { font-size: 11pt; font-weight: 600; color: var(--green); }
.job-period { font-size: 9pt; font-weight: 600; color: var(--ink); white-space: nowrap; }
.job-line2 { display: flex; justify-content: space-between; align-items: baseline; gap: 10pt; margin-top: 1pt; }
.job-role { font-size: 9.6pt; font-weight: 500; }
.job-loc { font-size: 8.6pt; color: var(--muted); white-space: nowrap; }
.job-summary { margin-top: 4pt; text-align: justify; }

.proj { margin-top: 7pt; padding-left: 10pt; border-left: 1.6pt solid var(--lime); break-inside: avoid; }
.proj-name { font-weight: 600; font-size: 9.3pt; }
.proj-meta { font-size: 8.3pt; color: var(--muted); margin-top: .5pt; }
.proj-meta b { color: var(--ink); font-weight: 500; }
.proj ul { margin: 2.5pt 0 0 11pt; }
.proj li { margin-bottom: 1.2pt; }
.proj li::marker { color: var(--lime); }

/* ── Education ── */
.edu-item { display: flex; justify-content: space-between; align-items: baseline; gap: 10pt; margin-bottom: 5pt; break-inside: avoid; }
.edu-deg { font-weight: 600; }
.edu-school { font-size: 8.8pt; color: var(--muted); }
.edu-year { font-weight: 600; font-size: 9.6pt; white-space: nowrap; }

/* ── Skills ── */
.skill-cat { margin-bottom: 6.5pt; break-inside: avoid; }
.skill-cat-name { font-weight: 600; font-size: 9.2pt; color: var(--green); margin-bottom: 2.5pt; }
.tags { display: flex; flex-wrap: wrap; gap: 3pt 4pt; }
.tag {
  font-size: 8pt;
  padding: 1.2pt 6pt;
  border: .8pt solid var(--rule);
  border-radius: 8pt;
  color: var(--ink);
}
.tag.hi {
  border-color: var(--lime);
  background: var(--lime-soft);
  font-weight: 600;
}

/* ── Languages ── */
.langs { display: flex; gap: 24pt; }
.lang b { font-weight: 600; }
.lang span { color: var(--muted); font-size: 8.8pt; }

/* ── Mobile screen layout (print output unaffected) ── */
@media screen and (max-width: 840px) {
  .sheet { margin: 0 auto; padding: 24px 22px; box-shadow: none; }
  .exp-grid { grid-template-columns: 1fr 1fr; }
}
@media screen and (max-width: 560px) {
  body { font-size: 10.5pt; }
  .sheet { padding: 20px 14px; }
  .cv-name { font-size: 20pt; }
  .cv-role { font-size: 11pt; }
  .cv-contact { gap: 4pt 12pt; }
  .exp-grid { grid-template-columns: 1fr; gap: 8pt; }
  .exp-desc { font-size: 9pt; }
  .stats { flex-wrap: wrap; gap: 10pt 22pt; }
  .job-line1, .job-line2, .edu-item { flex-wrap: wrap; }
  .langs { gap: 16pt; }
}