:root {
  --bg: #f7f8f6;
  --panel: #fff;
  --ink: #17211d;
  --muted: #737c77;
  --line: #e4e9e5;
  --green: #087653;
  --green2: #dcefe7;
  --dark: #26332e;
  --shadow: 0 10px 32px rgba(23, 33, 29, .045);
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body { margin: 0; background: #e9ece9; color: var(--ink); font-family: "DM Sans", Arial, sans-serif; font-size: 15px; padding: 28px 20px; }
a { color: inherit; text-decoration: none; }
button, input, textarea { font: inherit; }

.layout { min-height: 1120px; display: grid; grid-template-columns: 248px minmax(0, 1fr); width: min(100%, 1180px); margin: 0 auto; background: var(--panel); border: 1px solid #dde2dd; box-shadow: 0 18px 65px rgba(25, 38, 20, .10); overflow: hidden; }
.sidebar { position: sticky; top: 0; height: 100%; min-height: 1120px; padding: 28px 22px; background: linear-gradient(160deg, #f1f5f2, #fff 65%, #e8f1ec); border-right: 1px solid var(--line); display: flex; flex-direction: column; }
.portrait { display: block; width: 100%; height: auto; aspect-ratio: 3/3.7; object-fit: cover; object-position: center 24%; border-radius: 9px; box-shadow: var(--shadow); filter: saturate(.86); }
.person { font: 800 24px/1.1 Manrope, sans-serif; letter-spacing: -1.2px; margin: 18px 0 7px; }
.role { font-size: 13px; line-height: 1.6; color: var(--muted); margin: 0 0 22px; }
.nav { display: grid; gap: 5px; }
.nav a { padding: 11px 12px; border-radius: 7px; color: #34413b; font-size: 13px; display: flex; align-items: center; gap: 12px; transition: .18s; }
.nav a span { width: 18px; text-align: center; font-size: 16px; color: var(--green); }
.nav a:hover, .nav a.active { background: #dcece5; color: #075b41; }
.side-contact { margin-top: auto; padding-top: 18px; border-top: 1px solid var(--line); display: grid; gap: 12px; font-size: 12.5px; color: #3f4a44; overflow-wrap: anywhere; }
.side-contact a:hover { color: var(--green); }
.social { display: flex; gap: 12px; margin-top: 6px; }

.main { padding: 0 clamp(24px, 4vw, 64px) 28px; min-width: 0; }
.topbar { height: 65px; display: flex; align-items: center; justify-content: space-between; gap: 12px; border-bottom: 1px solid var(--line); font-size: 11px; letter-spacing: .1em; text-transform: uppercase; color: #6f7972; }
.topbar .status { display: flex; align-items: center; gap: 8px; }
.pulse { width: 6px; height: 6px; background: var(--green); border-radius: 50%; }

.hero { padding: 40px 0 30px; display: grid; grid-template-columns: minmax(0, 1.35fr) minmax(220px, .85fr); gap: 26px; align-items: center; }
.eyebrow { font-size: 11px; text-transform: uppercase; letter-spacing: .14em; color: var(--green); font-weight: 700; margin: 0 0 17px; }
.hero h1 { font: 800 clamp(34px, 4vw, 54px)/1.03 Manrope, sans-serif; letter-spacing: -2.8px; margin: 0 0 8px; }
.hero h2 { font: 700 17px Manrope, sans-serif; color: #4a544e; margin: 0 0 14px; }
.hero-copy { font-size: 15px; line-height: 1.75; color: #3f4a44; max-width: 600px; margin: 0 0 20px; }
.actions { display: flex; gap: 9px; flex-wrap: wrap; }
.btn { display: inline-flex; align-items: center; justify-content: center; gap: 10px; background: var(--green); color: #fff; padding: 12px 15px; border-radius: 6px; font-size: 13px; font-weight: 700; font-family: inherit; cursor: pointer; box-shadow: 0 4px 10px #08765320; border: 1px solid var(--green); transition: .2s; }
.btn:hover { transform: translateY(-1px); background: #056346; }
.btn.light { background: #fff; color: #24332c; border-color: var(--line); box-shadow: var(--shadow); }
.btn.light:hover { border-color: #a8c9b9; color: var(--green); }

.info-card { background: rgba(236, 243, 239, .85); border: 1px solid #e6eeea; border-radius: 9px; padding: 18px 19px; display: grid; gap: 17px; }
.info-row { display: grid; grid-template-columns: 18px 78px 1fr; gap: 9px; align-items: center; font-size: 12.5px; }
.info-row .ico { font-size: 15px; color: var(--green); }
.info-row .label { color: #66706a; }
.info-row .value { font-weight: 600; overflow-wrap: anywhere; }

.section { padding: 24px 0 26px; border-top: 1px solid var(--line); scroll-margin-top: 15px; }
.section-heading { display: flex; align-items: center; gap: 18px; margin-bottom: 21px; }
.section-heading h2 { font: 800 19px Manrope, sans-serif; letter-spacing: -.5px; margin: 0; white-space: nowrap; }
.section-heading .rule { height: 1px; background: var(--line); flex: 1; }
.section-heading .number { font: 11px "DM Sans", sans-serif; letter-spacing: .12em; color: #6f9483; white-space: nowrap; }

.skills-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 14px 42px; }
.skill-head { display: flex; justify-content: space-between; gap: 10px; font-size: 13px; margin-bottom: 7px; }
.skill-head span:last-child { color: #56625b; }
.track { height: 6px; border-radius: 20px; background: #e9ece9; overflow: hidden; }
.track i { display: block; height: 100%; border-radius: 20px; background: linear-gradient(90deg, #0b7655, #176148); }

.timeline { display: grid; gap: 0; }
.job { display: grid; grid-template-columns: 130px 1fr; gap: 20px; padding: 0 0 22px; position: relative; }
.job:last-child { padding-bottom: 0; }
.job-date { font-size: 12px; color: #66706a; padding-top: 3px; }
.job-body { padding-left: 17px; border-left: 1px solid var(--line); position: relative; }
.job-body:before { content: ""; position: absolute; width: 8px; height: 8px; border-radius: 50%; background: #a9b4ad; left: -4.5px; top: 4px; }
.job:first-child .job-body:before { background: var(--green); }
.job h3 { font: 800 15px Manrope, sans-serif; margin: 0 0 4px; }
.company { font-size: 13px; color: var(--green); font-weight: 600; margin-bottom: 7px; }
.job p { font-size: 13.5px; line-height: 1.7; color: #4a544e; margin: 0; max-width: 800px; }
.job-desc p { margin: 0 0 8px; }
.job-desc p:last-child { margin-bottom: 0; }
.desc-list { margin: 6px 0 0; padding: 0; list-style: none; max-width: 800px; }
.desc-list li { position: relative; padding-left: 16px; margin: 0 0 6px; font-size: 13.5px; line-height: 1.6; color: #4a544e; }
.desc-list li:last-child { margin-bottom: 0; }
.desc-list li::before { content: ""; position: absolute; left: 2px; top: .62em; width: 5px; height: 5px; border-radius: 50%; background: var(--green); }
.desc-list strong { color: var(--ink); font-weight: 700; }

.focus-grid { display: grid; grid-template-columns: repeat(5, 1fr); gap: 10px; }
.focus-card { padding: 15px 12px; background: #fff; border: 1px solid #edf0ed; border-radius: 7px; min-height: 116px; box-shadow: 0 5px 18px #17211d05; }
.focus-icon { font-size: 22px; color: var(--green); display: block; margin-bottom: 11px; }
.focus-card h3 { font: 700 13px Manrope, sans-serif; margin: 0 0 6px; }
.focus-card p { font-size: 12px; line-height: 1.5; color: #55605a; margin: 0; }

.contact-box { background: linear-gradient(110deg, #e4f1eb, #f0f7f3); border: 1px solid #dcece4; border-radius: 9px; padding: 25px 26px; display: flex; align-items: center; justify-content: space-between; gap: 20px; }
.contact-box h2 { font: 800 clamp(23px, 3vw, 33px) Manrope, sans-serif; letter-spacing: -1.3px; margin: 0 0 8px; }
.contact-box p { font-size: 13.5px; color: #4f5c55; margin: 0; line-height: 1.7; }
.contact-actions { display: flex; gap: 8px; flex-wrap: wrap; }

.footer { padding: 18px 0 0; display: flex; justify-content: space-between; gap: 12px; font-size: 11px; letter-spacing: .08em; text-transform: uppercase; color: #7d857f; }

@media(max-width:1050px) {
  body { padding: 18px 12px; }
  .layout { grid-template-columns: 210px 1fr; min-height: 100vh; }
  .sidebar { padding: 22px 16px; }
  .hero { grid-template-columns: 1fr; }
  .info-card { grid-template-columns: 1fr 1fr; }
  .focus-grid { grid-template-columns: repeat(3, 1fr); }
}

@media(max-width:760px) {
  body { padding: 0; background: var(--panel); }
  .layout { display: block; width: 100%; min-height: 100vh; border: 0; box-shadow: none; }
  .sidebar { position: relative; height: auto; min-height: 0; border-right: 0; border-bottom: 1px solid var(--line); padding: 16px 20px; display: grid; grid-template-columns: 72px 1fr; column-gap: 15px; align-items: center; }
  .portrait { grid-row: 1/3; width: 72px; height: 90px; aspect-ratio: auto; }
  .person { font-size: 20px; margin: 0 0 4px; }
  .role { margin: 0; }
  .nav { grid-column: 1/-1; display: flex; overflow: auto; margin-top: 16px; gap: 4px; }
  .nav a { white-space: nowrap; padding: 9px; }
  .side-contact { display: none; }
  .main { padding: 0 20px 24px; }
  .topbar { height: 52px; }
  .hero { padding: 30px 0 25px; }
  .hero h1 { font-size: 43px; }
  .info-card { grid-template-columns: 1fr; }
  .skills-grid { gap: 14px 20px; }
  .focus-grid { grid-template-columns: repeat(2, 1fr); }
  .contact-box { align-items: flex-start; flex-direction: column; }
  .footer { flex-wrap: wrap; }
}

@media(max-width:480px) {
  .hero h1 { font-size: 37px; letter-spacing: -2px; }
  .job { grid-template-columns: 1fr; gap: 4px; }
  .job-body { padding-left: 0; border-left: 0; }
  .job-body:before { display: none; }
  .skills-grid { grid-template-columns: 1fr; }
  .focus-grid { grid-template-columns: 1fr 1fr; }
  .section-heading .number { font-size: 8px; }
  .info-row { grid-template-columns: 18px 65px 1fr; }
}

#content-error { padding: 12px; margin-top: 12px; background: #fff0e8; color: #8d351b; border-radius: 6px; }
@media(max-width:760px) { .topbar > span:first-child { display: none; } .topbar { justify-content: flex-end; } }

/* =========================================================
   Printable CV (Download CV / Ctrl+P)
   Same design as the website, sized for A4 and readable.
   Screen: hidden. Print: only this is shown.
   ========================================================= */
#print-cv { display: none; }

@media print {
  @page { size: A4 portrait; margin: 0; }

  html, body { background: #fff !important; margin: 0 !important; padding: 0 !important; }
  #site { display: none !important; }

  #print-cv {
    display: block !important;
    font-family: "DM Sans", Arial, Helvetica, sans-serif;
    font-size: 11pt;
    line-height: 1.5;
    color: #1a231f;
    -webkit-print-color-adjust: exact;
    print-color-adjust: exact;
  }
  #print-cv a { color: inherit; text-decoration: none; }

  /* Sidebar background: fixed, so it repeats edge-to-edge on every page */
  .p-stripe {
    position: fixed; left: 0; top: 0; bottom: 0; width: 58mm;
    background: linear-gradient(165deg, #eef4f0 0%, #f8faf8 55%, #e6f0ea 100%);
    border-right: 1px solid #dfe6e1;
  }
  .p-layout { position: relative; display: grid; grid-template-columns: 58mm 1fr; }

  /* ---- Sidebar ---- */
  .p-side { padding: 9mm 6mm 9mm; }
  .p-portrait { display: block; width: 100%; aspect-ratio: 1 / 1.08; object-fit: cover; object-position: center 22%; border-radius: 7px; }
  .p-person { font: 800 18pt/1.15 Manrope, "DM Sans", Arial, sans-serif; letter-spacing: -.02em; color: #17211d; margin: 5mm 0 1.5mm; }
  .p-side-role { font-size: 11pt; line-height: 1.4; color: #38433d; margin: 0 0 5mm; }
  .p-contact { border-top: 1px solid #d9e2dc; padding-top: 4.5mm; display: grid; gap: 3.2mm; font-size: 10pt; color: #1f2924; }
  .p-contact-item { display: grid; grid-template-columns: 5.5mm 1fr; align-items: baseline; overflow-wrap: anywhere; }
  .p-nb { white-space: nowrap; }
  .p-contact-item .p-ico { color: #087653; font-weight: 700; font-size: 10pt; }

  /* ---- Main ---- */
  .p-main {
    padding: 11mm 11mm 11mm 9mm;
    -webkit-box-decoration-break: clone;
    box-decoration-break: clone;
  }
  .p-eyebrow { font-size: 9pt; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; color: #087653; margin: 0 0 2.5mm; }
  .p-name { font: 800 30pt/1.05 Manrope, "DM Sans", Arial, sans-serif; letter-spacing: -.035em; color: #121a16; margin: 0 0 1.5mm; }
  .p-role { font: 700 14pt/1.3 Manrope, "DM Sans", Arial, sans-serif; color: #2f3a34; margin: 0 0 3.5mm; }
  .p-summary { font-size: 11.5pt; line-height: 1.55; color: #1f2924; margin: 0 0 5mm; }

  .p-info { background: #edf4f0; border: 1px solid #e0ebe5; border-radius: 7px; padding: 4mm 5mm; display: grid; grid-template-columns: 1fr 1fr; gap: 2.5mm 5mm; margin-bottom: 1mm; }
  .p-info-row { display: grid; grid-template-columns: 5.5mm 18mm 1fr; align-items: baseline; font-size: 10pt; }
  .p-info-row .p-ico { color: #087653; }
  .p-label { color: #4f5a54; }
  .p-value { font-weight: 600; color: #17211d; }

  .p-section { margin-top: 7mm; }
  .p-heading { display: flex; align-items: center; gap: 4mm; margin-bottom: 4mm; break-after: avoid; page-break-after: avoid; }
  .p-heading h2 { font: 800 15pt/1.2 Manrope, "DM Sans", Arial, sans-serif; letter-spacing: -.01em; color: #17211d; margin: 0; white-space: nowrap; }
  .p-rule { flex: 1; height: 1px; background: #dfe6e1; }
  .p-num { font-size: 9pt; letter-spacing: .12em; color: #5f8f79; }

  .p-side-sec { margin-top: 6mm; padding-top: 4.5mm; border-top: 1px solid #d9e2dc; }
  .p-side-h { font: 800 11pt/1.2 Manrope, "DM Sans", Arial, sans-serif; color: #17211d; margin: 0 0 3.5mm; }
  .p-skills { display: grid; grid-template-columns: 1fr; gap: 3mm; }
  .p-skill-head { display: flex; justify-content: space-between; align-items: baseline; gap: 2mm; font-size: 10pt; line-height: 1.3; color: #1a231f; margin-bottom: 1.2mm; }
  .p-skill-head span:last-child { color: #38433d; }
  .p-track { height: 1.6mm; background: #dde4e0 !important; border-radius: 2mm; background: #e3e8e5; overflow: hidden; }
  .p-track i { display: block; height: 100%; border-radius: 2mm; background: #087653; }

  .p-job { display: grid; grid-template-columns: 25mm 1fr; gap: 4mm; }
  .p-job-date { font-size: 9.5pt; line-height: 1.4; color: #38433d; padding-top: .8mm; }
  .p-job-body { position: relative; padding: 0 0 5mm 5mm; border-left: 1px solid #d5ddd8; }
  .p-job:last-child .p-job-body { padding-bottom: 0; }
  .p-job-body::before { content: ""; position: absolute; left: -1.4mm; top: 1.7mm; width: 2.8mm; height: 2.8mm; border-radius: 50%; background: #a9b4ad; }
  .p-job.is-current .p-job-body::before { background: #087653; }
  .p-job h3 { font: 800 12.5pt/1.3 Manrope, "DM Sans", Arial, sans-serif; color: #121a16; margin: 0; }
  .p-company { font-size: 11pt; font-weight: 700; color: #087653; margin: .6mm 0 1.8mm; }
  .p-job p { font-size: 11pt; line-height: 1.5; color: #1f2924; margin: 0; }
  .p-job h3, .p-company { break-after: avoid; page-break-after: avoid; }
  .p-desc p { margin: 0 0 1.5mm; }
  .p-desc p:last-child { margin-bottom: 0; }
  .p-desc .desc-list li { font-size: 10.5pt; line-height: 1.45; color: #1f2924; padding-left: 4mm; margin: 0 0 1.2mm; break-inside: avoid; page-break-inside: avoid; }
  .p-desc .desc-list li::before { left: .5mm; top: .6em; width: 1.6mm; height: 1.6mm; }

  .p-focus { display: grid; grid-template-columns: repeat(2, 1fr); gap: 3mm; break-inside: avoid; page-break-inside: avoid; }
  .p-focus-card { border: 1px solid #e3e9e5; border-radius: 6px; padding: 3.5mm; background: #fff; }
  .p-focus-icon { display: block; font-size: 14pt; line-height: 1; color: #087653; margin-bottom: 2mm; }
  .p-focus-card h3 { font: 700 11.5pt/1.3 Manrope, "DM Sans", Arial, sans-serif; color: #17211d; margin: 0 0 1mm; }
  .p-focus-card p { font-size: 10.5pt; line-height: 1.45; color: #2f3a34; margin: 0; }

  .p-footer { margin-top: 7mm; padding-top: 3mm; border-top: 1px solid #dfe6e1; display: flex; justify-content: space-between; font-size: 8.5pt; letter-spacing: .08em; text-transform: uppercase; color: #4f5a54; }
}