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

:root {
  --accent:       #2563eb;
  --accent-dark:  #1d4ed8;
  --accent-light: #eff6ff;
  --text:         #1e293b;
  --muted:        #64748b;
  --border:       #e2e8f0;
  --bg:           #ffffff;
  --bg-alt:       #f8fafc;
  --radius:       6px;
  --font-sans: 'Inter', 'Segoe UI', system-ui, -apple-system, sans-serif;
  --font-mono: 'JetBrains Mono', 'Fira Code', ui-monospace, monospace;
}

html { font-size: 16px; }

body {
  font-family: var(--font-sans);
  color: var(--text);
  background: var(--bg-alt);
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
}

/* ── Page wrapper ──────────────────────────────────────── */
.page {
  max-width: 960px;
  margin: 2.5rem auto;
  background: var(--bg);
  border-radius: 12px;
  overflow: hidden;
  box-shadow: 0 4px 6px -1px rgb(0 0 0 / .07), 0 2px 4px -2px rgb(0 0 0 / .05);
}

@media print {
  @page {
    margin: 1.5cm 1.8cm;
    size: A4;
  }

  body { background: #fff; font-size: 10pt; }

  .page { margin: 0; border-radius: 0; box-shadow: none; max-width: 100%; }

  /* Keep accent colour — -webkit-print-color-adjust covers Chrome/Safari */
  * { -webkit-print-color-adjust: exact; print-color-adjust: exact; }

  /* Header: no background, dark text */
  .header {
    padding: 1.25cm 0 1cm;
    background: transparent !important;
    color: var(--text) !important;
    border-bottom: 2pt solid var(--accent);
  }
  .header__name { font-size: 22pt; }
  .header__title { font-size: 11pt; opacity: 1; color: var(--muted); }
  .header__summary { font-size: 9.5pt; margin-top: 0.5em; opacity: 1; }

  /* Single-column flow: experience → skills → contacts.
     display: block !important bypasses the grid entirely — Chrome doesn't
     reliably recalculate grid placement properties in print mode. */
  .body { display: block !important; }

  .main    { display: block !important; padding: 0.5cm 0 0.4cm; }

  .sidebar {
    display: block !important;
    padding: 0.4cm 0;
    background: transparent !important;
    border: none !important;
    break-inside: avoid;
  }

  .contacts {
    display: block !important;
    padding: 0.4cm 0 0;
    border-top: 1px solid var(--border);
  }

  /* Skill tags: no fill, just an outline */
  .skill-tag {
    background: transparent !important;
    color: var(--text) !important;
    border: 0.5pt solid var(--muted);
    padding: 0.15em 0.4em !important;
    border-radius: 3px !important;
  }

  /* Don't split a role across pages */
  .role { break-inside: avoid; }

  /* Links in contacts: plain text colour, no underline */
  .contact-item a { color: var(--muted); text-decoration: none; }
}

/* ── Header ────────────────────────────────────────────── */
.header {
  background: var(--accent);
  color: #fff;
  padding: 2.75rem 3rem 2.5rem;
}

.header__name {
  font-size: 2.4rem;
  font-weight: 700;
  letter-spacing: -0.02em;
  line-height: 1.1;
}

.header__title {
  font-size: 1.05rem;
  font-weight: 400;
  opacity: 0.88;
  margin-top: 0.4rem;
  letter-spacing: 0.01em;
}

.header__summary {
  font-size: 0.95rem;
  opacity: 0.82;
  margin-top: 1rem;
  line-height: 1.75;
  max-width: 80ch;
}

.header__summary p + p {
  margin-top: 0.75rem;
}

/* ── Contact strip ─────────────────────────────────────── */
.contacts {
  display: flex;
  flex-wrap: wrap;
  gap: 0.4rem 1.5rem;
  /* Screen: grid column 1, row 2 — sits below experience */
  grid-column: 1;
  padding: 1.5rem 3rem 2.5rem;
  border-top: 1px solid var(--border);
}

.contact-item {
  display: flex;
  align-items: center;
  gap: 0.4rem;
  font-size: 0.82rem;
  color: var(--muted);
  white-space: nowrap;
}

.contact-item a {
  color: var(--accent);
  text-decoration: none;
}

.contact-item a:hover { text-decoration: underline; }

.contact-icon {
  width: 14px;
  height: 14px;
  flex-shrink: 0;
  fill: currentColor;
  color: var(--muted);
}

/* ── Body layout ───────────────────────────────────────── */
.body {
  display: grid;
  grid-template-columns: 1fr 280px;
  /* sidebar spans both content rows so its background fills the height */
  grid-template-rows: 1fr auto;
}

.main { padding: 2.5rem 3rem 2rem; }
.sidebar {
  padding: 2.5rem 2rem 3rem;
  background: var(--bg-alt);
  border-left: 1px solid var(--border);
  grid-column: 2;
  grid-row: 1 / 3;
}

/* ── Section titles ────────────────────────────────────── */
.section-title {
  font-size: 0.7rem;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--accent);
  margin-bottom: 1.25rem;
  padding-bottom: 0.5rem;
  border-bottom: 2px solid var(--accent-light);
}

/* ── Experience timeline ───────────────────────────────── */
.roles { display: flex; flex-direction: column; gap: 2rem; }

.role {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 0 1.25rem;
}

/* Timeline dot + line */
.role__indicator {
  display: flex;
  flex-direction: column;
  align-items: center;
  padding-top: 0.2rem;
}

.role__dot {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: var(--accent);
  flex-shrink: 0;
}

.role:not(:last-child) .role__line {
  width: 2px;
  flex: 1;
  background: var(--border);
  margin-top: 4px;
  min-height: 24px;
}

.role__content {}

.role__header {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  flex-wrap: wrap;
  gap: 0.25rem 1rem;
  margin-bottom: 0.25rem;
}

.role__title {
  font-size: 1rem;
  font-weight: 600;
  color: var(--text);
}

.role__dates {
  font-size: 0.78rem;
  color: var(--muted);
  white-space: nowrap;
}

.role__meta {
  font-size: 0.85rem;
  color: var(--accent);
  font-weight: 500;
  margin-bottom: 0.7rem;
}

.role__location {
  color: var(--muted);
  font-weight: 400;
}

.role__location::before { content: ' · '; }

.role__body {
  font-size: 0.875rem;
  color: var(--text);
  line-height: 1.7;
}

.role__body p { margin-bottom: 0.6rem; }

.role__body ul {
  padding-left: 1.2rem;
  display: flex;
  flex-direction: column;
  gap: 0.3rem;
}

.role__body li::marker { color: var(--accent); }

/* ── Skills ────────────────────────────────────────────── */
.skill-groups { display: flex; flex-direction: column; gap: 1.5rem; }

.skill-group__name {
  font-size: 0.78rem;
  font-weight: 600;
  color: var(--muted);
  text-transform: uppercase;
  letter-spacing: 0.06em;
  margin-bottom: 0.55rem;
}

.skill-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 0.4rem;
}

.skill-tag {
  background: var(--accent-light);
  color: var(--accent-dark);
  font-size: 0.78rem;
  font-weight: 500;
  padding: 0.25rem 0.65rem;
  border-radius: 999px;
  line-height: 1;
}

/* ── Responsive ────────────────────────────────────────── */
@media (max-width: 680px) {
  .page { margin: 0; border-radius: 0; }
  .header { padding: 2rem 1.5rem 2rem; }
  .body { grid-template-columns: 1fr; }
  .sidebar { border-left: none; border-top: 1px solid var(--border); grid-row: unset; }
  .main { padding: 2rem 1.5rem 1.5rem; }
  .sidebar { padding: 2rem 1.5rem; }
  .contacts { padding: 1.5rem 1.5rem 2rem; }
}