/* ── Variables ───────────────────────────────────────────────────────────────── */
:root {
  --accent:       #d97706;
  --accent-dark:  #1e293b;
  --accent-light: #fef3c7;
  --white:      #ffffff;
  --text:       #1c1917;
  --text-light: #4a4a4a;

  /* A4 dimensions */
  --a4-w: 210mm;
  --a4-h: 297mm;
  --margin: 0mm;          /* managed by @page */
  --sidebar-top:    #1e293b;
  --sidebar-bottom: #0f172a;
  --sidebar-text:   #ffffff;
  --sidebar-w: 58mm;
}

/* ── Private field placeholder ───────────────────────────────────────────────── */
.private-field { font-style: italic; color: #888; font-size: 0.85em; }

/* ── Contact links ───────────────────────────────────────────────────────────── */
.contact-link {
  color: inherit;
  text-decoration: none;
  border-bottom: 0.2mm solid rgba(255, 255, 255, 0.4);
}

/* ── @page rule ──────────────────────────────────────────────────────────────── */
@page {
  size: A4 portrait;
  margin: 10mm 12mm;
}

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

html, body {
  background: #c8bfb0;
  font-family: 'Inter', 'Segoe UI', Arial, sans-serif;
  font-size: 10px;
  color: var(--text);
  line-height: 1.5;
}

/* ── Toolbar (screen only) ───────────────────────────────────────────────────── */
.toolbar {
  position: sticky;
  top: 0;
  z-index: 100;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 10px 24px;
  background: #1e293b;
  color: #fff;
}

.btn-back {
  color: #f0c27a;
  text-decoration: none;
  font-size: 13px;
}
.btn-back:hover { color: #fff; }

.btn-print {
  background: var(--accent);
  color: var(--white);
  border: none;
  padding: 8px 20px;
  border-radius: 6px;
  font-size: 13px;
  cursor: pointer;
  font-family: inherit;
}
.btn-print:hover { background: var(--accent-dark); }

/* ── Page wrapper (screen centering) ────────────────────────────────────────── */
.page-wrapper {
  display: flex;
  justify-content: center;
  padding: 20px 0 40px;
}

/* ── A4 card ─────────────────────────────────────────────────────────────────── */
.cv-a4 {
  width: var(--a4-w);
  min-height: var(--a4-h);
  background: var(--white);
  box-shadow: 0 4px 24px rgba(0,0,0,0.3);
  display: flex;
  overflow: hidden;
}

/* ── Sidebar ─────────────────────────────────────────────────────────────────── */
.sidebar {
  width: var(--sidebar-w);
  flex-shrink: 0;
  background: linear-gradient(180deg, var(--sidebar-top) 0%, var(--sidebar-bottom) 100%);
  color: var(--sidebar-text);
  display: flex;
  flex-direction: column;
}

.photo-wrap {
  width: 100%;
  height: var(--sidebar-w); /* square */
  overflow: hidden;
  background: var(--accent-dark);
  flex-shrink: 0;
  position: relative;
}

.photo-wrap::after {
  content: '';
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  height: 0.8mm;
  background: rgba(255, 255, 255, 0.35);
}

.photo-wrap img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.sidebar-body {
  padding: 6mm 5mm;
  display: flex;
  flex-direction: column;
  gap: 6mm;
}

.s-section { display: flex; flex-direction: column; gap: 3mm; }

.s-title {
  font-size: 7px;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  padding-bottom: 1.5mm;
  border-bottom: 0.3mm solid rgba(255,255,255,0.25);
  margin-bottom: 1mm;
  display: flex;
  align-items: center;
  gap: 1.5mm;
}

.s-title::before {
  content: '';
  width: 0.5mm;
  height: 2mm;
  background: rgba(255, 255, 255, 0.6);
  border-radius: 0.3mm;
  flex-shrink: 0;
}

/* Contact items */
.contact-item {
  display: flex;
  align-items: flex-start;
  gap: 2.5mm;
  font-size: 8.5px;
  line-height: 1.4;
}

.contact-item .icon {
  font-size: 10px;
  opacity: 0.85;
  flex-shrink: 0;
  width: 4mm;
  text-align: center;
}

.contact-item div {
  display: flex;
  flex-direction: column;
}

.contact-item strong {
  font-size: 6.5px;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  opacity: 0.7;
}

.contact-item span { white-space: pre-line; }

/* Sidebar list */
.s-list {
  list-style: none;
  display: flex;
  flex-wrap: wrap;
  gap: 1.5mm;
}

.s-list li {
  display: inline-block;
  font-size: 7.5px;
  line-height: 1.4;
  padding: 0.5mm 2mm;
  border-radius: 1.5mm;
  background: rgba(255, 255, 255, 0.15);
  border: 0.2mm solid rgba(255, 255, 255, 0.25);
}

.s-list li::before {
  content: none;
}

/* ── Main content ────────────────────────────────────────────────────────────── */
.main {
  flex: 1;
  padding: 8mm 9mm 8mm 8mm;
  display: flex;
  flex-direction: column;
  gap: 6mm;
  min-width: 0;
  position: relative;
}

.main::before {
  content: '';
  display: block;
  height: 0.5mm;
  background: linear-gradient(90deg, var(--accent) 0%, var(--accent-mid) 60%, transparent 100%);
  margin-top: -8mm;
  margin-left: -8mm;
  margin-right: -9mm;
  margin-bottom: 5mm;
}

/* Header */
.cv-header {
  padding-bottom: 4mm;
  border-bottom: 0.6mm solid var(--accent);
}

.cv-header h1 {
  font-size: 18px;
  font-weight: 300;
  line-height: 1.15;
  color: var(--text);
}

.cv-header h1 span { font-weight: 800; }

.cv-title-line {
  font-size: 8.5px;
  font-weight: 700;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--accent);
  margin-top: 2mm;
}

/* Sections */
.m-section { display: flex; flex-direction: column; gap: 3mm; }

.m-title {
  font-size: 7.5px;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--accent);
  display: flex;
  align-items: center;
  gap: 2mm;
}

.m-title::before {
  content: '';
  width: 0.8mm;
  height: 2.5mm;
  background: var(--accent);
  border-radius: 0.3mm;
  flex-shrink: 0;
}

.m-title::after {
  content: none;
}

/* Bio */
#cv-bio { font-size: 8.5px; color: var(--text-light); }

/* Experience entry */
.exp-entry {
  display: flex;
  gap: 3mm;
  padding-bottom: 3.5mm;
  border-bottom: 0.2mm solid #e8e1d4;
}

.exp-entry:last-child { border-bottom: none; padding-bottom: 0; }

.exp-dot {
  width: 3mm;
  height: 3mm;
  border-radius: 50%;
  background: var(--accent);
  flex-shrink: 0;
  margin-top: 1mm;
}

.exp-body { flex: 1; min-width: 0; }

.exp-header {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 1.5mm;
  margin-bottom: 1.2mm;
}

.exp-role {
  font-size: 9px;
  font-weight: 700;
}

.exp-employer {
  font-size: 8px;
  color: var(--text-light);
}

.exp-date {
  font-size: 7.5px;
  font-weight: 600;
  color: var(--accent);
  background: var(--accent-light);
  padding: 0.3mm 2mm;
  border-radius: 2mm;
  white-space: nowrap;
  margin-left: auto;
}

.exp-desc {
  font-size: 8px;
  color: var(--text-light);
  line-height: 1.35;
}
.exp-desc p { margin: 0; }
.exp-desc p + p { margin-top: 1px; }
.exp-desc ul, .exp-desc ol { padding-left: 1.2em; margin: 1px 0; }
.exp-desc li { margin: 0; }

/* Education entry */
.edu-entry {
  display: flex;
  gap: 3mm;
}

.edu-dot {
  width: 3mm;
  height: 3mm;
  border-radius: 50%;
  background: var(--accent);
  flex-shrink: 0;
  margin-top: 1mm;
}

.edu-body { flex: 1; }

.edu-degree {
  font-size: 9px;
  font-weight: 700;
}

.edu-institution {
  font-size: 8px;
  color: var(--text-light);
  margin-top: 1mm;
}

.edu-year {
  font-size: 7.5px;
  font-weight: 600;
  color: var(--accent);
  background: var(--accent-light);
  padding: 0.3mm 2mm;
  border-radius: 2mm;
  display: inline-block;
  margin-top: 1.2mm;
}

.edu-desc {
  color: var(--text-light);
  font-size: 7.5px;
  white-space: pre-line;
  margin-top: 1mm;
}

/* ── Dark mode ───────────────────────────────────────────────────────────────── */
[data-theme="dark"] body {
  background: var(--bg);
}

/* ── Print overrides ─────────────────────────────────────────────────────────── */
@media print {
  html { -webkit-print-color-adjust: exact; print-color-adjust: exact; }
  html, body { background: none; height: 100%; }

  .no-print { display: none !important; }

  .page-wrapper {
    display: block;
    padding: 0;
    height: 100%;
  }

  .cv-a4 {
    width: 100%;
    min-height: 100%;
    box-shadow: none;
  }
}