:root {
  --page-bg: #ececec;
  --paper: #ffffff;
  --ink: #1f2933;
  --muted: #586472;
  --line: #d6dbe1;
  --navy: #17233a;
  --navy-2: #23304a;
  --side-text: #f6f7f9;
  --side-muted: #c4ccd8;
  --soft: #f5f6f8;
  --accent: #7a642f;
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
  margin: 0;
  background: var(--page-bg);
  color: var(--ink);
  font-family: Arial, Helvetica, sans-serif;
  font-size: 10.3pt;
  line-height: 1.32;
}
a { color: inherit; text-decoration: none; }
a:hover { text-decoration: underline; }

.document {
  width: 210mm;
  margin: 14mm auto;
}
.cv-page {
  width: 210mm;
  min-height: 297mm;
  background: var(--paper);
  display: flex;
  align-items: stretch;
  box-shadow: 0 4px 18px rgba(31, 41, 51, 0.18);
  break-after: page;
  page-break-after: always;
}
.cv-page + .cv-page { margin-top: 12mm; }
.cv-page:last-child { break-after: auto; page-break-after: auto; }

.side {
  flex: 0 0 60mm;
  width: 60mm;
  background: var(--navy);
  color: var(--side-text);
  padding: 10.5mm 7.5mm 8mm;
  min-height: 297mm;
}
.side.second { background: var(--navy-2); }
.main {
  flex: 1 1 auto;
  width: 150mm;
  padding: 10mm 11mm 8mm;
  min-height: 297mm;
}

.lang-switch {
  text-align: right;
  margin: -2mm 0 4mm;
  font-size: 8pt;
  color: var(--muted);
}
.lang-switch a,
.lang-switch span { margin-left: 6px; }
.lang-switch .active { font-weight: 700; color: var(--ink); }

.identity { margin-bottom: 7mm; }
.identity h1 {
  margin: 0;
  font-size: 25pt;
  line-height: 0.98;
  letter-spacing: 0.02em;
  font-weight: 700;
}
.identity .title {
  margin: 3mm 0 0;
  color: var(--side-muted);
  font-size: 9.6pt;
  line-height: 1.22;
}

.photo {
  width: 45mm;
  height: 45mm;
  object-fit: cover;
  object-position: center 15%; /* keep as fallback safety, crop is already square */
  border: 1px solid rgba(255,255,255,0.55);
  margin: 0 0 6mm;
  image-rendering: auto; /* let the browser pick the best downscale algorithm */
}

.side-section { margin-top: 6.2mm; }
.side-section h2 {
  margin: 0 0 2.5mm;
  font-size: 7.7pt;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--side-muted);
  font-weight: 700;
  border-bottom: 1px solid rgba(255,255,255,0.24);
  padding-bottom: 1.5mm;
}
.side-list,
.detail-list,
.plain-list {
  margin: 0;
  padding: 0;
  list-style: none;
}
.side-list li { margin-bottom: 2.1mm; }
.side-label {
  display: block;
  color: var(--side-muted);
  font-size: 7pt;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  margin-bottom: 0.3mm;
}
.side-value { font-size: 8.2pt; word-break: break-word; }
.plain-list li,
.detail-list li {
  margin-bottom: 1.15mm;
  font-size: 8.15pt;
  line-height: 1.27;
}
.detail-list li::before { content: "- "; color: var(--side-muted); }

.hero {
  border-bottom: 1px solid var(--line);
  padding-bottom: 4.2mm;
  margin-bottom: 5.4mm;
}
.hero h2 {
  margin: 0 0 2.6mm;
  font-size: 16pt;
  line-height: 1.13;
  font-weight: 700;
  color: var(--navy);
}
.hero p {
  margin: 0;
  color: #394454;
  font-size: 9.3pt;
  line-height: 1.34;
}
.section { margin-top: 5.5mm; }
.section-title {
  margin: 0 0 3.2mm;
  font-size: 8.4pt;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--navy);
  font-weight: 700;
  border-bottom: 1px solid var(--line);
  padding-bottom: 1.45mm;
}
.role { margin-bottom: 4.8mm; }
.role.compact { margin-bottom: 3.8mm; }
.role-head,
.education .topline {
  display: flex;
  justify-content: space-between;
  gap: 5mm;
  align-items: baseline;
}
.role h3,
.education h3,
.skill-group h3 {
  margin: 0;
  font-size: 10.5pt;
  line-height: 1.16;
  font-weight: 700;
  color: #1d2634;
}
.date {
  color: var(--muted);
  font-size: 8.2pt;
  white-space: nowrap;
  font-weight: 700;
}
.company {
  margin: 0.5mm 0 1.5mm;
  color: #4d5665;
  font-size: 8.8pt;
  font-weight: 700;
}
ul.bullets {
  margin: 0;
  padding-left: 4.2mm;
}
ul.bullets li {
  margin-bottom: 0.8mm;
  line-height: 1.29;
}

.callout {
  margin: 3mm 0 4mm;
  padding: 3mm 3.5mm;
  background: var(--soft);
  border-left: 3px solid var(--accent);
  color: #303948;
  font-size: 8.8pt;
  line-height: 1.35;
}
.two-col {
  display: flex;
  gap: 5mm;
}
.two-col > div {
  flex: 1 1 0;
  min-width: 0;
}
.skill-group {
  border: 1px solid var(--line);
  background: #fff;
  padding: 3mm;
  break-inside: avoid;
  page-break-inside: avoid;
}
.skill-group + .skill-group { margin-top: 3mm; }
.skill-group h3 {
  font-size: 9.2pt;
  margin-bottom: 1.3mm;
  color: var(--navy);
}
.skill-group p {
  margin: 0;
  font-size: 8.35pt;
  line-height: 1.32;
  color: #394454;
}
.education {
  border: 1px solid var(--line);
  padding: 3mm;
  margin-bottom: 3mm;
  break-inside: avoid;
  page-break-inside: avoid;
}
.education p {
  margin: 0.9mm 0 0;
  font-size: 8.75pt;
  line-height: 1.3;
  color: #3f4857;
}
.badge {
  display: inline-block;
  border: 1px solid var(--accent);
  color: var(--accent);
  font-size: 7.8pt;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  padding: 1mm 2mm;
  margin-right: 2mm;
  font-weight: 700;
}
.footer-note {
  margin-top: 4mm;
  color: var(--muted);
  font-size: 8pt;
  border-top: 1px solid var(--line);
  padding-top: 2.5mm;
}

@media screen and (max-width: 900px) {
  .document { width: 100%; margin: 0; }
  .cv-page {
    width: 100%;
    min-height: auto;
    display: block;
    box-shadow: none;
  }
  .cv-page + .cv-page { margin-top: 0; }
  .side,
  .main {
    width: auto;
    min-height: auto;
    padding: 28px 24px;
  }
  .photo { width: 108px; height: 108px; }
  .role-head,
  .education .topline,
  .two-col { display: block; }
  .date { display: block; margin-top: 2px; }
  .two-col > div + div { margin-top: 3mm; }
}

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

@media print {
  html,
  body {
    width: 210mm;
    min-height: 297mm;
    margin: 0;
    background: #fff;
  }

  body {
    font-size: 9.9pt;
    line-height: 1.28;
    -webkit-print-color-adjust: exact;
    print-color-adjust: exact;
  }

  .document {
    width: 210mm;
    margin: 0;
  }

  .cv-page {
    width: 210mm;
    height: 297mm;
    min-height: 297mm;
    display: flex;
    box-shadow: none;
    overflow: hidden;
    break-after: page;
    page-break-after: always;
  }

  .cv-page + .cv-page { margin-top: 0; }
  .cv-page:last-child { break-after: auto; page-break-after: auto; }

  .side {
    flex: 0 0 60mm;
    width: 60mm;
    height: 297mm;
    min-height: 297mm;
    padding: 9.5mm 7mm 7mm;
  }

  .main {
    width: 150mm;
    height: 297mm;
    min-height: 297mm;
    padding: 9mm 10mm 7mm;
  }

  .lang-switch { display: none; }
  .identity { margin-bottom: 6.2mm; }
  .identity h1 { font-size: 24pt; }
  .identity .title { font-size: 9.1pt; margin-top: 2.6mm; }
  .photo { width: 30mm; height: 30mm; margin-bottom: 5.5mm; }
  .side-section { margin-top: 5.7mm; }
  .side-section h2 { font-size: 7.3pt; margin-bottom: 2.2mm; padding-bottom: 1.25mm; }
  .side-list li { margin-bottom: 1.8mm; }
  .side-value { font-size: 7.9pt; }
  .plain-list li,
  .detail-list li { font-size: 7.85pt; margin-bottom: 0.95mm; }

  .hero { padding-bottom: 3.7mm; margin-bottom: 4.8mm; }
  .hero h2 { font-size: 15.2pt; margin-bottom: 2.2mm; }
  .hero p { font-size: 8.8pt; line-height: 1.3; }
  .section { margin-top: 4.9mm; }
  .section-title { font-size: 8pt; margin-bottom: 2.8mm; padding-bottom: 1.25mm; }
  .role { margin-bottom: 4.3mm; }
  .role.compact { margin-bottom: 3.2mm; }
  .role h3,
  .education h3,
  .skill-group h3 { font-size: 10pt; }
  .date { font-size: 7.8pt; }
  .company { font-size: 8.4pt; margin: 0.4mm 0 1.3mm; }
  ul.bullets { padding-left: 3.8mm; }
  ul.bullets li { margin-bottom: 0.65mm; line-height: 1.24; }
  .education { padding: 2.8mm; margin-bottom: 2.6mm; }
  .education p { font-size: 8.35pt; line-height: 1.26; }
  .skill-group { padding: 2.7mm; }
  .skill-group + .skill-group { margin-top: 2.5mm; }
  .skill-group h3 { font-size: 8.8pt; }
  .skill-group p { font-size: 8pt; line-height: 1.27; }
  .callout { font-size: 8.35pt; padding: 2.7mm 3.2mm; }

  a { text-decoration: none; }
}