*, *::before, *::after { margin: 0; padding: 0; box-sizing: border-box; }
body {
  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;
  font-size: 12pt;
  line-height: 1.35;
  color: #1a1a1a;
  background: #fff;
}

.page {
  max-width: 190mm;
  margin: 0 auto;
  padding: 12mm 14mm 8mm 14mm;
}

/* ── Header ── */
.header {
  display: flex;
  align-items: flex-start;
  gap: 4mm;
  padding-bottom: 3mm;
  margin-bottom: 4mm;
  border-bottom: 1.5px solid #1a1a1a;
}
.header .photo {
  flex-shrink: 0;
}
.header .photo img {
  width: 28mm;
  height: 28mm;
  border-radius: 50%;
  object-fit: cover;
}
.header .identity {
  flex: 1;
}
.header .identity h1 {
  font-size: 23pt;
  font-weight: 700;
  letter-spacing: 0.5pt;
  margin-bottom: 1mm;
}
.header .identity .tagline {
  font-size: 11pt;
  color: #444;
  font-style: italic;
}
.header .contact {
  flex-shrink: 0;
  font-size: 10.5pt;
  line-height: 1.5;
  text-align: right;
  min-width: 42mm;
}
.header .contact a {
  color: #1a1a1a;
  text-decoration: none;
}

/* ── Sections ── */
section { margin-bottom: 3.5mm; }
h2 {
  font-size: 12pt;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 1pt;
  color: #2a2a2a;
  margin-bottom: 2mm;
  padding-bottom: 1mm;
  border-bottom: 0.5px solid #ccc;
}
.profile p { margin-bottom: 1.5mm; }

.goal {
  margin-bottom: 3mm;
}
.goal p {
  font-size: 11pt;
  font-style: italic;
  color: #333;
  padding-left: 4mm;
  border-left: 2px solid #ccc;
}

/* ── Work experience ── */
.role {
  display: flex;
  gap: 3mm;
  margin-bottom: 2.5mm;
  break-inside: avoid;
  page-break-inside: avoid;
}
.role .when {
  flex-shrink: 0;
  width: 22mm;
  font-size: 9.5pt;
  color: #555;
  padding-top: 0.5mm;
}
.role .what { flex: 1; }
.role .what h3 {
  font-size: 12pt;
  font-weight: 600;
  margin-bottom: 1mm;
}
.role .what h3 .career-arrow {
  font-size: 10.5pt;
  font-weight: 400;
}
.role .what .org {
  font-size: 11pt;
  color: #333;
  margin-bottom: 1mm;
}
.role .what ul {
  list-style: none;
  padding: 0;
}
.role .what ul li {
  font-size: 11pt;
  padding-left: 3mm;
  position: relative;
  margin-bottom: 0.8mm;
}
.role .what ul li::before {
  content: '•';
  position: absolute;
  left: 0;
  color: #888;
}
.role.condensed .when { width: 18mm; font-size: 9pt; }
.role.condensed .what h3 { font-size: 11pt; }
.role.condensed .what .org { font-size: 10pt; }

/* ── Two-column grid ── */
.cols {
  display: flex;
  gap: 6mm;
  break-inside: avoid;
  page-break-inside: avoid;
}
.cols > div { flex: 1; }

/* ── Conferences ── */
.conf-line { font-size: 9pt; color: #555; margin-top: 2mm; }

/* ── Lists ── */
.cert-list, .edu-list { list-style: none; font-size: 10.5pt; }
.cert-list li, .edu-list li { margin-bottom: 1.2mm; padding-left: 3mm; position: relative; }
.cert-list li::before, .edu-list li::before {
  content: '•';
  position: absolute;
  left: 0;
  color: #888;
}
.edu-list .edu-year { font-size: 9pt; color: #555; }

/* ── Volunteer ── */
.volunteer {
  break-inside: avoid;
  page-break-inside: avoid;
}
.volunteer p {
  font-size: 10.5pt;
}

/* ── Reference ── */
.reference blockquote {
  font-size: 10.5pt;
  font-style: italic;
  color: #333;
  padding-left: 4mm;
  border-left: 2px solid #ccc;
  margin-bottom: 1mm;
}
.reference .attr {
  font-size: 9.5pt;
  color: #555;
  padding-left: 4mm;
  margin-bottom: 0.5mm;
}
.reference .attr + blockquote {
  margin-top: 4mm;
}

/* ── Print ── */
@media print {
  @page { margin: 12mm 14mm; size: A4; }
  .page { max-width: none; margin: 0; padding: 0; }

  /* Font sizes – scaled down to fit 2 pages */
  body                              { font-size: 10.5pt; }
  .header .identity h1              { font-size: 20pt; }
  .header .identity .tagline        { font-size: 9.5pt; }
  .header .contact                  { font-size: 9pt; }
  h2                                { font-size: 10.5pt; }
  .goal p                           { font-size: 9.5pt; }
  .role .when                       { font-size: 8.5pt; }
  .role .what h3                    { font-size: 10.5pt; }
  .role .what h3 .career-arrow      { font-size: 9pt; }
  .role .what .org                  { font-size: 9.5pt; }
  .role .what ul li                 { font-size: 9.5pt; }
  .role.condensed .when             { font-size: 8pt; }
  .role.condensed .what h3          { font-size: 9.5pt; }
  .role.condensed .what .org        { font-size: 8.5pt; }
  .conf-line                        { font-size: 8pt; }
  .cert-list, .edu-list             { font-size: 9pt; }
  .edu-list .edu-year               { font-size: 8pt; }
  .volunteer p                      { font-size: 9pt; }
  .reference blockquote             { font-size: 9pt; }
  .reference .attr                  { font-size: 8.5pt; }

  /* Tighter spacing */
  section                           { margin-bottom: 2.5mm; }
  .header                           { padding-bottom: 1.5mm; margin-bottom: 2.5mm; }
  .role                             { margin-bottom: 2mm; }
  .role .what ul li                 { margin-bottom: 0.5mm; }
  .profile p                        { margin-bottom: 1mm; }
  .goal                             { margin-bottom: 2mm; }
  .cert-list li, .edu-list li       { margin-bottom: 0.8mm; }
  .reference .attr + blockquote     { margin-top: 3mm; }
  .reference blockquote             { margin-bottom: 0.5mm; }
  .reference .attr                  { margin-bottom: 0.3mm; }

  /* Keep break rules */
  .role { break-inside: avoid; }
  h2 { break-after: avoid; page-break-after: avoid; }
}


@media screen {
  .page {
    margin: 1rem auto;
    background: #fff;
    box-shadow: 0 1px 6px rgba(0,0,0,0.08);
  }
}

/* ── Tablet (≤ 900px) ── */
@media screen and (max-width: 900px) {
  .page {
    max-width: none;
    padding: 8mm 6mm 6mm 6mm;
    margin: 0;
    box-shadow: none;
  }

  /* Header: stack photo + identity, contact below */
  .header {
    flex-wrap: wrap;
    gap: 2.5mm;
    padding-bottom: 2.5mm;
    margin-bottom: 3mm;
  }
  .header .photo img {
    width: 22mm;
    height: 22mm;
  }
  .header .contact {
    width: 100%;
    min-width: 0;
    text-align: left;
    font-size: 10pt;
  }

  /* Work experience: narrower date column */
  .role .when { width: 18mm; font-size: 9pt; }
  .role .what h3 { font-size: 11pt; }
  .role .what h3 .career-arrow { font-size: 10pt; }
  .role .what .org { font-size: 10.5pt; }
  .role .what ul li { font-size: 10.5pt; }
  .role.condensed .when { width: 16mm; font-size: 8.5pt; }

  /* Two-column: slightly narrower gap */
  .cols { gap: 4mm; }
}

/* ── Phone (≤ 600px) ── */
@media screen and (max-width: 600px) {
  body { font-size: 11pt; }

  .page {
    padding: 5mm 4mm 4mm 4mm;
  }

  /* Header: full stack */
  .header {
    flex-direction: column;
    align-items: center;
    text-align: center;
    gap: 2mm;
    padding-bottom: 2mm;
    margin-bottom: 2.5mm;
  }
  .header .photo img {
    width: 24mm;
    height: 24mm;
  }
  .header .identity h1 {
    font-size: 18pt;
  }
  .header .identity .tagline {
    font-size: 10pt;
  }
  .header .contact {
    text-align: center;
    font-size: 10pt;
  }

  h2 {
    font-size: 11pt;
    margin-bottom: 1.5mm;
  }

  section { margin-bottom: 2.5mm; }

  .profile p { margin-bottom: 1mm; }

  .goal p {
    font-size: 10.5pt;
  }

  /* Work experience: date above content */
  .role {
    flex-direction: column;
    gap: 0.5mm;
    margin-bottom: 2.5mm;
  }
  .role .when {
    width: auto;
    font-size: 9.5pt;
    padding-top: 0;
  }
  .role .what h3 {
    font-size: 11pt;
    margin-bottom: 0.5mm;
  }
  .role .what h3 .career-arrow {
    font-size: 9.5pt;
  }
  .role .what .org {
    font-size: 10.5pt;
    margin-bottom: 0.5mm;
  }
  .role .what ul li {
    font-size: 10.5pt;
    margin-bottom: 0.6mm;
  }
  .role.condensed .when {
    font-size: 9pt;
  }
  .role.condensed .what h3 {
    font-size: 10.5pt;
  }
  .role.condensed .what .org {
    font-size: 10pt;
  }

  /* Two-column: stack */
  .cols {
    flex-direction: column;
    gap: 0;
  }
  .cols > div { flex: none; }

  .cert-list, .edu-list { font-size: 10pt; }
  .cert-list li, .edu-list li { margin-bottom: 1mm; }

  .volunteer p { font-size: 10pt; }

  .reference blockquote {
    font-size: 10pt;
  }
  .reference .attr {
    font-size: 9pt;
  }
  .reference .attr + blockquote {
    margin-top: 3mm;
  }

  .conf-line { font-size: 8pt; }
}