:root {
  --ink: #1a1a1a;
  --paper: #f5f0e8;
  --accent: #c23616;
  --muted: #8a8575;
  --grid: rgba(26,26,26,0.04);
  --card-bg: rgba(255,255,255,0.45);
  --page-w: 210mm;
  --page-h: 297mm;
}
* { margin: 0; padding: 0; box-sizing: border-box; }
body {
  font-family: 'Courier New', 'Courier', monospace;
  background: #d5d0c8;
  color: var(--ink);
  line-height: 1.5;
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 32px 16px 80px;
}

/* ─── A4 PAGE ─── */
.a4 {
  width: var(--page-w);
  height: var(--page-h);
  background: var(--paper);
  position: relative;
  overflow: hidden;
  box-shadow: 0 4px 24px rgba(0,0,0,0.12);
  padding: 10mm 14mm 16mm;
  background-image:
    linear-gradient(var(--grid) 1px, transparent 1px),
    linear-gradient(90deg, var(--grid) 1px, transparent 1px);
  background-size: 20px 20px;
  display: flex;
  flex-direction: column;
}

/* ─── HEADER ─── */
.header {
  position: relative;
  z-index: 1;
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  margin-bottom: 4mm;
  padding-bottom: 3mm;
  border-bottom: 1.5px solid var(--ink);
}
.header-left { position: relative; z-index: 2; }
.header-left h1 {
  font-family: Georgia, 'Times New Roman', serif;
  font-size: 32px;
  font-weight: 400;
  line-height: 1.1;
  letter-spacing: -1px;
}
.header-left h1 em { font-style: italic; color: var(--accent); }
.header-title {
  font-size: 10px;
  text-transform: uppercase;
  letter-spacing: 3px;
  color: var(--muted);
  margin-top: 3px;
}
.header-right {
  position: relative;
  z-index: 2;
  text-align: right;
  font-size: 10px;
  line-height: 1.8;
  color: var(--muted);
  background: linear-gradient(to right, transparent, var(--paper) 20%);
  padding-left: 14mm;
}
.header-right a { color: var(--ink); text-decoration: none; }
.header-stamp {
  position: absolute;
  top: 4mm;
  left: 14mm;
  font-family: Georgia, serif;
  font-size: 96px;
  color: rgba(194,54,22,0.06);
  font-style: italic;
  pointer-events: none;
  user-select: none;
  z-index: 0;
  letter-spacing: -3px;
}

/* ─── TAGS ─── */
.tags-row {
  display: flex;
  flex-wrap: wrap;
  gap: 3px;
  margin-bottom: 3.5mm;
  align-items: center;
}
.tags-row span {
  padding: 3px 9px;
  border: 0.5px solid rgba(26,26,26,0.12);
  font-size: 8px;
  text-transform: uppercase;
  letter-spacing: 1.5px;
}
.tags-row span.hl { border-color: var(--accent); color: var(--accent); }
.tags-row span.senior {
  background: var(--ink); color: var(--paper); border-color: var(--ink);
  padding: 4px 11px; font-size: 9px; letter-spacing: 2px;
}

/* ─── SECTION HEADERS ─── */
.sec-head {
  display: flex;
  align-items: center;
  gap: 6px;
  margin-bottom: 2mm;
  margin-top: 2.5mm;
}
.sec-head h2 {
  font-family: Georgia, serif;
  font-size: 10px;
  font-weight: 400;
  text-transform: uppercase;
  letter-spacing: 3px;
  color: var(--muted);
  white-space: nowrap;
}
.sec-num { color: var(--accent); font-family: Georgia, serif; font-size: 10px; margin-right: 2px; }
.sec-head::after { content: ''; flex: 1; height: 0.5px; background: var(--ink); opacity: 0.12; }

/* ─── CONTENT ─── */
.content { flex: 1; display: flex; flex-direction: column; }

/* ─── TWO-COL ROW ─── */
.row-2col {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 5mm;
}
.row-2col.split-asym {
  grid-template-columns: 0.78fr 1.22fr;
}
.col { min-width: 0; }

/* ─── APPROACH ─── */
.approach-row {
  display: flex;
  flex-direction: column;
  gap: 2mm;
  margin-bottom: 2mm;
}
.approach-card {
  padding: 3mm;
  border: 0.5px solid rgba(26,26,26,0.08);
  background: var(--card-bg);
  position: relative;
  overflow: hidden;
}
.approach-card .a-num {
  position: absolute; top: 0.5mm; right: 1.5mm;
  font-family: Georgia, serif; font-size: 17px;
  color: rgba(194,54,22,0.08);
}
.approach-card h3 {
  font-size: 9px; text-transform: uppercase; letter-spacing: 1.5px;
  color: var(--accent); font-weight: 400; margin-bottom: 1.1mm;
  padding-right: 5mm;
}
.approach-card p { font-size: 8px; color: var(--muted); line-height: 1.45; }

/* ─── SHOWCASE ─── */
.showcase-col {
  display: flex;
  flex-direction: column;
  gap: 2mm;
  margin-bottom: 2mm;
}
.sc-card {
  border: 0.5px solid rgba(26,26,26,0.08);
  background: var(--card-bg);
  overflow: hidden;
  display: flex;
}
.sc-preview {
  width: 24mm;
  height: 24mm;
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
}
.sc-image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
.sc-info {
  padding: 2mm 2.5mm;
  display: flex;
  flex-direction: column;
  justify-content: center;
}
.sc-type {
  font-size: 7px; text-transform: uppercase;
  letter-spacing: 2px; color: var(--accent); margin-bottom: 0.7mm;
}
.sc-name {
  font-family: Georgia, serif; font-size: 11px;
  font-weight: 400; margin-bottom: 0.7mm;
}
.sc-desc {
  font-size: 8px; color: var(--ink); line-height: 1.45;
  margin-bottom: 1.2mm;
}
.sc-tech { font-size: 8px; color: var(--muted); line-height: 1.4; }

/* Mini mocks */
.prev-mobile { background: #f5f0e5; }
.pm-circles { display: flex; justify-content: center; gap: 2px; align-items: center; }
.pm-c { width: 14px; height: 14px; border-radius: 50%; display: flex; align-items: center; justify-content: center; font-size: 7px; color: white; }
.pm-c.dk { background: #1a1a1a; }
.pm-c.rs { background: #b5553a; }
.pm-arr { font-size: 6px; color: #b5553a; }
.pm-hl { font-family: Georgia, serif; font-size: 7px; font-style: italic; text-align: center; margin-top: 1.5mm; }

.prev-desktop { background: #1a1a2e; }
.pd-wrap { width: 20mm; height: 16mm; display: flex; border-radius: 2px; overflow: hidden; }
.pd-sb { width: 5mm; background: #16162a; padding: 1mm 0.5mm; }
.pd-dots { display: flex; gap: 1px; margin-bottom: 1.5mm; padding-left: 0.5mm; }
.pd-dots span { width: 2.5px; height: 2.5px; border-radius: 50%; }
.pd-dots .r { background: #ff5f57; }
.pd-dots .y { background: #febc2e; }
.pd-dots .g { background: #28c840; }
.pd-nav { color: rgba(255,255,255,0.3); font-size: 3px; padding: 0.3px 0.5mm; }
.pd-nav.on { color: #ff6b3d; }
.pd-mn { flex: 1; background: #1e1e36; padding: 1mm; }
.pd-mh { color: white; font-size: 4px; margin-bottom: 1mm; }
.pd-cols { display: flex; gap: 0.5mm; }
.pd-cl { flex: 1; }
.pd-tk { background: rgba(255,255,255,0.06); height: 2mm; margin-bottom: 0.5mm; border-left: 0.5px solid rgba(255,255,255,0.1); }

.prev-shopify { background: #faf8f5; }
.ps-wrap { text-align: center; font-family: Georgia, serif; }
.ps-nav { font-size: 5px; letter-spacing: 1px; text-transform: uppercase; margin-bottom: 1.5mm; }
.ps-hero { font-size: 9px; font-style: italic; margin-bottom: 1.5mm; }
.ps-prods { display: flex; gap: 1mm; justify-content: center; }
.ps-prod { width: 6mm; height: 8mm; background: linear-gradient(145deg, #e8e2d8, #d5cfc3); border: 0.5px solid rgba(26,26,26,0.05); }

/* ─── MANIFESTO ─── */
.manifesto {
  text-align: center;
  padding: 3mm 4mm 0 4mm;
}
.manifesto p {
  font-family: Georgia, serif;
  font-size: 12px;
  font-style: italic;
  line-height: 1.5;
  color: var(--ink);
}
.manifesto p span { color: var(--accent); }

/* ─── TIMELINE ─── */
.timeline {
  position: relative;
  padding-left: 12mm;
  margin-bottom: 4mm;
  display: flex;
  flex-direction: column;
}
.timeline::before {
  content: ''; position: absolute; left: 4mm; top: 0; bottom: 0;
  width: 1px; background: rgba(26,26,26,0.12);
}
.tl-item {
  position: relative;
  margin-bottom: 2mm;
  display: grid;
  grid-template-columns: 36mm 1fr;
  gap: 3mm;
  align-items: start;
}
.tl-meta { min-width: 0; }
.tl-body { min-width: 0; }
.tl-item.future .tl-body {
  border: 0.5px dashed var(--accent);
  padding: 1.5mm 2mm;
  background: rgba(194,54,22,0.025);
}
.tl-item:last-child { margin-bottom: 0; }
.timeline-grow { gap: 2.5mm; }
.timeline-grow .tl-item { margin-bottom: 0; }
.tl-dot {
  position: absolute;
  left: -9.2mm;
  top: 3px;
  width: 10px;
  height: 10px;
  border: 1.5px solid var(--accent); border-radius: 50%;
  background: var(--paper);
}
.tl-dot::after {
  content: ''; position: absolute; top: 1.5px; left: 1.5px;
  width: 4px; height: 4px; background: var(--accent); border-radius: 50%;
}
.tl-dot.future { border-style: dashed; }
.tl-dot.future::after { background: transparent; }
.tl-year {
  font-family: Georgia, serif; font-size: 14px;
  line-height: 1; letter-spacing: -0.3px;
}
.tl-type-badge {
  display: inline-block; margin-top: 1.2mm;
  padding: 2px 5px; font-size: 7px;
  text-transform: uppercase; letter-spacing: 0.8px;
  border: 0.5px solid;
  max-width: 100%;
  line-height: 1.4;
}
.tl-type-badge.alternance { color: #2d6a4f; border-color: #2d6a4f; }
.tl-type-badge.cdi { color: #1d3557; border-color: #1d3557; }
.tl-type-badge.entrepreneur { color: var(--accent); border-color: var(--accent); }
.tl-type-badge.together { border-color: var(--ink); background: var(--ink); color: var(--paper); }
.tl-body h4 { font-size: 10px; font-weight: 400; margin-bottom: 0.5mm; color: var(--accent); }
.tl-body p { font-size: 9px; color: var(--muted); line-height: 1.45; }
.tl-body p em { font-style: normal; color: var(--ink); }
.tl-compact { opacity: 0.7; }
.tl-compact .tl-year { font-size: 12px; }
.tl-compact .tl-body h4 { font-size: 8px; }
.tl-compact .tl-body p { font-size: 8px; }

/* ─── EDUCATION ─── */
.education-row {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  gap: 2.5mm;
  margin-bottom: 1mm;
}
.edu-item {
  display: flex;
  flex-direction: column;
  gap: 0.3mm;
  padding: 1.8mm 2.5mm;
  border: 0.5px solid rgba(26,26,26,0.08);
  background: var(--card-bg);
  border-left: 1.5px solid var(--accent);
}
.edu-year {
  font-family: Georgia, serif;
  font-size: 10px;
  color: var(--accent);
  letter-spacing: -0.3px;
}
.edu-title {
  font-size: 7px;
  text-transform: uppercase;
  letter-spacing: 1px;
  color: var(--ink);
  line-height: 1.35;
}
.edu-title em {
  font-family: Georgia, serif;
  font-style: normal;
  text-transform: none;
  letter-spacing: 0;
  font-size: 9px;
  color: var(--accent);
}
.edu-school {
  font-family: Georgia, serif;
  font-style: italic;
  font-size: 8px;
  color: var(--muted);
  line-height: 1.3;
}
.edu-school em {
  font-weight: 700;
}

/* ─── STACK ─── */
.stack-simple {
  padding: 2.5mm;
  border: 0.5px solid rgba(26,26,26,0.08);
  background: var(--card-bg);
}
.stack-simple p {
  font-size: 9px; line-height: 1.5; color: var(--ink);
}
.stack-simple p em { font-style: normal; color: var(--accent); }
.stack-pills {
  display: flex; flex-wrap: wrap; gap: 3px; margin-top: 2mm;
}
.stack-pills span {
  padding: 1.5px 6px; font-size: 8px; border: 0.5px solid rgba(26,26,26,0.1);
  text-transform: uppercase; letter-spacing: 0.5px; color: var(--muted);
}
.stack-pills span.core {
  background: var(--ink); color: var(--paper); border-color: var(--ink);
}

/* ─── INTERESTS ─── */
.interests-compact {
  display: flex;
  flex-direction: column;
  gap: 1.2mm;
}
.int-item {
  display: flex;
  align-items: center;
  gap: 2mm;
  padding: 2mm;
  border: 0.5px solid rgba(26,26,26,0.08);
  background: var(--card-bg);
}
.int-icon {
  font-size: 4mm;
    width: 6.8mm;
    height: 6.8mm;
  border: 0.5px solid rgba(26,26,26,0.08);
  display: flex; align-items: center; justify-content: center;
  background: var(--paper);
  flex-shrink: 0;
  color: var(--accent);
}
.int-icon svg {
  width: 70%;
  height: 70%;
  display: block;
}
.int-icon img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  display: block;
}
.int-text { display: flex; flex-direction: column; gap: 0.2mm; min-width: 0; }
.int-label {
  font-size: 9px;
  text-transform: uppercase;
  letter-spacing: 1.2px;
  color: var(--ink);
}
.int-sub {
  font-family: Georgia, serif;
  font-style: italic;
  font-size: 7px;
  color: var(--muted);
  line-height: 1.3;
}

/* ─── FOOTER ─── */
.page-footer {
  position: absolute;
  bottom: 6mm; left: 14mm; right: 14mm;
  display: flex;
  justify-content: space-between;
  align-items: center;
  border-top: 0.5px solid rgba(26,26,26,0.08);
  padding-top: 1.5mm;
  font-size: 8px;
  color: var(--muted);
}
.page-footer a { color: var(--ink); text-decoration: none; margin-left: 3mm; font-size: 8px; }

/* ─── PRINT ─── */
@page {
  size: 210mm 297mm;
  margin: 0;
}
@media print {
  html, body {
    background: white;
    margin: 0 !important;
    padding: 0 !important;
    width: 210mm;
    height: 297mm;
    max-width: 210mm;
    max-height: 297mm;
    overflow: hidden !important;
  }
  body {
    display: block;
  }
  .a4 {
    box-shadow: none;
    margin: 0 !important;
    width: 210mm;
    height: 297mm;
    max-height: 297mm;
    overflow: hidden !important;
    page-break-after: avoid !important;
    page-break-inside: avoid !important;
    break-inside: avoid !important;
    break-after: avoid !important;
  }
  * {
    -webkit-print-color-adjust: exact !important;
    print-color-adjust: exact !important;
  }
  a { color: inherit; text-decoration: none; }
}
@media (max-width: 800px) {
  .a4 { width: 100%; height: auto; padding: 6mm; }
  .row-2col { grid-template-columns: 1fr; }
}