/* ======== Print styles for V2 Editorial Portal CV ========
   Mirrors the on-screen editorial portal look, compacted to A4.
========================================================= */

@page {
  size: A4;
  margin: 14mm 14mm 16mm;
}

:root {
  --ink: #0a0a0a;
  --ink-1: #1b1a19;
  --ink-2: #3a3836;
  --ink-3: #605e5c;
  --ink-4: #8a8886;
  --accent: #0078d4;
  --accent-deep: #004578;
  --accent-tint: #f3f9fd;
  --border: #ebeae7;
  --border-2: #d6d3cf;
  --canvas: #f7f6f4;
  --font-sans: "Segoe UI Variable","Segoe UI","Inter",ui-sans-serif,system-ui,-apple-system,Roboto,sans-serif;
  --font-display: "Inter","Segoe UI Variable",sans-serif;
  --font-mono: "JetBrains Mono","Consolas",ui-monospace,monospace;
}

* {
  -webkit-print-color-adjust: exact !important;
  print-color-adjust: exact !important;
  color-adjust: exact !important;
}

html, body {
  background: #fff !important;
  color: var(--ink) !important;
  font-family: var(--font-sans);
  font-size: 9.75pt;
  line-height: 1.5;
  margin: 0 !important;
}

/* ----- Hide live-only chrome ----- */
.no-print,
.appbar,
.siderail,
.crumb,
.command-row { display: none !important; }

/* ----- Layout ----- */
.shell {
  display: block !important;
  min-height: 0 !important;
  grid-template-columns: none !important;
}
.workspace {
  padding: 0 !important;
  max-width: none !important;
  width: 100% !important;
}

/* ======================================================================
   Hero
====================================================================== */
.hero {
  padding: 0 !important;
  background: #fff !important;
  border-bottom: 0.5pt solid var(--border-2) !important;
  margin: 0 0 6mm !important;
  padding-bottom: 5mm !important;
}
.hero-grid {
  display: grid !important;
  grid-template-columns: 1fr 32mm !important;
  gap: 8mm !important;
  align-items: end !important;
}
.hero-right {
  order: 0 !important;
  flex-direction: row !important;
  align-items: flex-end !important;
}
.hero-photo,
.resource-icon {
  width: 32mm !important; height: 42mm !important;
  border-radius: 0.5mm !important;
  box-shadow: none !important;
  border: 0.3pt solid var(--border-2) !important;
  background: var(--canvas) !important;
  overflow: hidden !important;
  position: relative !important;
}
.hero-photo img, .resource-icon img {
  width: 100% !important; height: 100% !important; object-fit: cover !important;
}
.hero-photo::after { display: none !important; }

.hero-left .kind,
.hero-left .resource-kind {
  display: inline-flex !important; align-items: center !important; gap: 2mm !important;
  font: 600 7.5pt var(--font-sans) !important;
  letter-spacing: 0.12em !important; text-transform: uppercase !important;
  color: var(--accent-deep) !important;
  margin-bottom: 2mm !important;
}
.hero-left .kind::before,
.hero-left .resource-kind::before {
  content: "" !important; width: 6mm; height: 0.3pt; background: var(--accent);
  display: inline-block !important;
}

.hero-left .name,
.hero-left h1 {
  font-family: var(--font-display) !important;
  font-size: 32pt !important; font-weight: 700 !important;
  letter-spacing: -0.045em !important; line-height: 0.96 !important;
  margin: 0 0 2mm !important; color: var(--ink) !important;
}
.hero-left .name br { display: none !important; }
.hero-left .name .n-part { display: inline !important; }
.hero-left .name .n-part + .n-part { margin-left: 0.25em !important; }
.hero-left .name .dot { color: var(--accent) !important; }

.hero-left .role-lede,
.hero-left .subtitle {
  font-size: 11pt !important; color: var(--ink-2) !important;
  font-weight: 400 !important; line-height: 1.35 !important;
  letter-spacing: -0.01em !important;
  max-width: none !important; margin: 0 0 3mm !important;
}
.hero-left .role-lede b, .hero-left .subtitle b {
  color: var(--ink) !important; font-weight: 600 !important;
}

.meta-row {
  display: flex !important; flex-wrap: wrap !important;
  gap: 2mm 5mm !important; margin-top: 3mm !important;
  font-size: 8.5pt !important; color: var(--ink-3) !important;
  align-items: center !important;
}
.meta-row .item {
  display: inline-flex !important; align-items: center !important; gap: 1.5mm !important;
  color: var(--ink-3) !important; text-decoration: none !important;
  background: transparent !important; border: none !important; padding: 0 !important;
  font-weight: 500 !important;
}
.meta-row .status {
  display: inline-flex !important; align-items: center !important; gap: 2mm !important;
  padding: 1mm 3mm !important;
  background: #e6f5e6 !important; border: 0.3pt solid #b6daae !important;
  border-radius: 99px !important;
  font: 500 8pt var(--font-sans) !important; color: #0b5e0b !important;
}
.meta-row .status .dot2 {
  width: 1.6mm !important; height: 1.6mm !important; border-radius: 50% !important;
  background: #107c10 !important; display: inline-block !important;
}
.meta-row svg { width: 2.8mm !important; height: 2.8mm !important; color: var(--accent) !important; }

/* ======================================================================
   Article — single column for print, section caps flattened inline
====================================================================== */
.article { padding: 0 !important; }
.row {
  display: block !important;
  grid-template-columns: none !important;
  gap: 0 !important;
  break-inside: avoid; page-break-inside: avoid;
}

.sidecap {
  position: static !important;
  display: flex !important; align-items: center !important; gap: 3mm !important;
  margin: 0 0 3mm !important;
  padding: 0 0 2mm !important;
  border-bottom: 0.8pt solid var(--ink) !important;
  color: var(--ink) !important;
}
.sidecap .n {
  display: inline-block !important;
  padding: 0.6mm 2mm !important;
  background: var(--ink) !important; color: #fff !important;
  border-radius: 0.5mm !important;
  font: 600 8pt var(--font-mono) !important;
  letter-spacing: 0.1em !important;
  margin: 0 !important;
}
.sidecap .title {
  display: inline !important; margin: 0 !important;
  font-family: var(--font-sans) !important; font-weight: 600 !important;
  font-size: 12pt !important; letter-spacing: -0.015em !important;
  color: var(--ink) !important;
}
.sidecap .sub {
  display: inline !important; margin-left: auto !important;
  font: 500 8pt var(--font-mono) !important;
  color: var(--ink-3) !important;
  letter-spacing: 0.06em !important; text-transform: uppercase !important;
}

.row > .sidecap + * {
  border-bottom: none !important;
  padding-bottom: 0 !important;
  margin-bottom: 6mm !important;
}
.row:last-child > .sidecap + * { margin-bottom: 0 !important; }

section {
  padding: 0 !important; background: transparent !important;
  border: none !important; border-radius: 0 !important;
  box-shadow: none !important;
  break-inside: avoid; page-break-inside: avoid;
}

p { margin: 1.5mm 0; color: var(--ink-2); font-size: 9.25pt; max-width: none; }
p.lead {
  font-family: var(--font-sans); font-weight: 400;
  font-size: 11pt; line-height: 1.35; letter-spacing: -0.01em;
  color: var(--ink-1);
  margin: 0 0 2mm; max-width: none;
}

/* ======================================================================
   Role cards
====================================================================== */
.role-card, .role {
  display: block !important;
  padding: 3mm 0 !important;
  border-top: 0.3pt solid var(--border) !important;
  break-inside: avoid; page-break-inside: avoid;
  margin: 0 !important;
}
.role-card *, .role * { text-decoration: none !important; }
.role-list > .role-card:first-child,
.role:first-of-type {
  border-top: none !important; padding-top: 1mm !important;
}
.role-year, .role-when {
  display: block !important;
  font: 600 8pt var(--font-mono) !important;
  letter-spacing: 0.12em !important; text-transform: uppercase !important;
  color: var(--ink-3) !important;
  margin: 0 0 1.5mm !important;
  padding: 0 !important;
}
.role-year .y-from, .role-when .y-from,
.role-year .y-to, .role-when .y-to {
  display: inline !important;
  font: inherit !important; letter-spacing: inherit !important;
  margin: 0 !important; padding: 0 !important;
  white-space: nowrap !important;
}
.role-year .y-from, .role-when .y-from,
.role-year .y-to, .role-when .y-to { color: var(--ink-3) !important; }
.role-year .y-from::after, .role-when .y-from::after {
  content: " \2014  " !important;
  color: var(--accent) !important;
  font-weight: 700 !important;
}
.role-year .y-to::before, .role-when .y-to::before { display: none !important; }
.role-body h3 {
  font-family: var(--font-sans); font-weight: 600;
  font-size: 11.5pt; margin: 0; color: var(--ink);
  letter-spacing: -0.015em;
}
.role-body .where, .role-body .role-where {
  font-size: 9pt; color: var(--accent-deep);
  font-weight: 600; margin: 0.5mm 0 2mm;
}

.bullets {
  list-style: none; padding: 0; margin: 1.5mm 0 0;
  display: flex; flex-direction: column; gap: 0.8mm;
}
.bullets li {
  font-size: 9pt; padding-left: 4mm;
  position: relative; color: var(--ink-2); line-height: 1.45;
  margin: 0;
}
.bullets li::before {
  content: "→" !important; position: absolute; left: 0; top: 0;
  color: var(--accent) !important; font-weight: 600;
  background: transparent !important;
  width: auto !important; height: auto !important;
  border-radius: 0 !important;
}

/* ======================================================================
   Tags — mono square pills matching the web
====================================================================== */
.tags {
  margin: 2.5mm 0 0; gap: 1.2mm; display: flex; flex-wrap: wrap;
  list-style: none; padding: 0;
}
.tags li {
  font: 500 7.5pt var(--font-mono) !important;
  padding: 0.6mm 2mm !important;
  border: 0.3pt solid var(--border-2) !important;
  border-radius: 0.5mm !important;
  color: var(--ink-2) !important;
  background: var(--canvas) !important;
}
.skill-groups .tags li { font-size: 8.5pt !important; padding: 1mm 2.5mm !important; }

/* ======================================================================
   Employers — hide horizontal row, show vertical timeline for print
====================================================================== */
.employers { padding: 0 !important; }
.employers::before { display: none !important; }
.employers-row { display: none !important; }
.print-only { display: block !important; }

.timeline { list-style: none; padding: 0; margin: 0; }
.timeline li {
  display: flex; justify-content: space-between; align-items: baseline;
  padding: 1.8mm 0; border-bottom: 0.3pt solid var(--border);
  font-size: 9.25pt; gap: 3mm;
}
.timeline li:last-child { border-bottom: none; }
.timeline .where { color: var(--ink); font-weight: 600; }
.timeline .when {
  color: var(--ink-3); font: 500 7.5pt var(--font-mono);
  letter-spacing: 0.06em; text-transform: uppercase;
  white-space: nowrap;
}

/* ======================================================================
   Skills
====================================================================== */
.skill-groups {
  display: grid !important; grid-template-columns: 1fr 1fr !important;
  gap: 8mm !important;
}
.skill-groups h3 {
  font-family: var(--font-sans); font-size: 7.5pt; font-weight: 700;
  letter-spacing: 0.12em; text-transform: uppercase;
  color: var(--ink-3); margin: 0 0 2mm;
}

/* ======================================================================
   Languages
====================================================================== */
.lang-list { list-style: none; padding: 0; margin: 0; }
.lang-list li {
  display: grid !important;
  grid-template-columns: 32mm 1fr 28mm !important;
  gap: 5mm !important; align-items: center !important;
  padding: 2.5mm 0 !important;
  border-top: 0.3pt solid var(--border) !important;
  font-size: 9.25pt !important;
}
.lang-list li:first-child { border-top: none !important; }
.lang-list .lang-name {
  font-size: 10pt !important; font-weight: 600 !important; color: var(--ink) !important;
  letter-spacing: -0.005em !important;
  display: block !important;
}
.lang-list .lang-bar {
  display: block !important;
  height: 1.4mm !important; background: var(--border) !important;
  max-width: none !important; border-radius: 0.7mm !important;
  overflow: hidden !important;
}
.lang-list .lang-bar span {
  background: var(--accent) !important;
  display: block !important; height: 100% !important;
}
.lang-list .lang-level {
  display: block !important; text-align: right !important;
}
.lang-list .lang-level {
  font: 500 7.5pt var(--font-mono) !important;
  letter-spacing: 0.06em !important; text-transform: uppercase !important;
  color: var(--ink-3) !important;
}

/* ======================================================================
   Footer
====================================================================== */
.page-footer {
  margin-top: 6mm !important;
  padding: 2mm 0 0 !important;
  border-top: 0.3pt solid var(--border) !important;
  font-size: 7.5pt !important;
  color: var(--ink-3) !important;
  text-align: center !important;
  display: block !important;
}
.page-footer a { color: var(--ink-3); text-decoration: none; border: none; }

a { color: var(--ink) !important; text-decoration: none; }