<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>{{ header.name }} -- Resume</title>
<style>
@import url('https://fonts.googleapis.com/css2?family=Crimson+Pro:ital,wght@0,400;0,500;0,600;0,700;1,400&family=Lato:wght@400;700&display=swap');

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

@page {
  size: {{ 'letter' if page_format == 'letter' else 'A4' }};
  margin: 0;
}

html, body {
  font-family: 'Crimson Pro', 'Palatino Linotype', 'Book Antiqua', Palatino, serif;
  font-size: 10.5pt;
  line-height: 1.2;
  color: #1a1a1a;
  background: #fff;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

.page {
  width: {{ '8.5in' if page_format == 'letter' else '210mm' }};
  padding: 0.5in 0.6in;
  margin: 0 auto;
}

/* --- Header: centered, double rule --- */
.header {
  text-align: center;
  border-top: 2px solid #1a1a1a;
  border-bottom: 0.5px solid #1a1a1a;
  padding: 8pt 0 6pt;
  margin-bottom: 8pt;
}

.header h1 {
  font-size: 17pt;
  font-weight: 600;
  letter-spacing: 3px;
  text-transform: uppercase;
  margin-bottom: 2pt;
}

.header .title-line {
  font-family: 'Lato', sans-serif;
  font-size: 9pt;
  color: #555;
  letter-spacing: 1px;
  margin-bottom: 4pt;
}

.header .contact {
  font-family: 'Lato', sans-serif;
  font-size: 8pt;
  color: #666;
  letter-spacing: 0.5px;
}

.header .contact a { color: #666; text-decoration: none; }
.header .contact .sep { margin: 0 6pt; color: #ccc; }

/* --- Section --- */
.section { margin-top: 8pt; }

.section-title {
  font-size: 10pt;
  font-weight: 600;
  font-variant: small-caps;
  letter-spacing: 1.5px;
  color: #333;
  border-bottom: 0.5px solid #ccc;
  padding-bottom: 2pt;
  margin-bottom: 5pt;
}

/* --- Summary --- */
.summary-text {
  font-size: 10pt;
  line-height: 1.3;
  color: #333;
  text-align: justify;
}

/* --- Experience --- */
.entry { margin-bottom: 6pt; }

.entry-row {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
}

.entry-primary {
  font-weight: 700;
  font-size: 10.5pt;
}
.entry-date {
  font-family: 'Lato', sans-serif;
  font-size: 8.5pt;
  color: #666;
  text-align: right;
  white-space: nowrap;
  margin-left: 8pt;
}
.entry-secondary {
  font-style: italic;
  font-size: 10pt;
  color: #444;
}
.entry-location {
  font-family: 'Lato', sans-serif;
  font-size: 8.5pt;
  color: #666;
  text-align: right;
  white-space: nowrap;
  margin-left: 8pt;
}

.entry-description {
  margin-top: 2pt;
  font-size: 9.5pt;
  color: #444;
}

.entry-url {
  font-family: 'Lato', sans-serif;
  font-size: 8pt;
  color: #666;
  margin-top: 1pt;
}
.entry-url a { color: #666; text-decoration: none; }

ul.bullets {
  list-style: disc;
  margin-left: 15pt;
  margin-top: 2pt;
}

ul.bullets li {
  margin-bottom: 1.5pt;
  font-size: 10pt;
  line-height: 1.15;
}

/* --- Skills --- */
.skill-line {
  font-size: 9.5pt;
  margin-bottom: 1pt;
  line-height: 1.2;
}
.skill-label {
  font-weight: 600;
  font-variant: small-caps;
  letter-spacing: 0.5px;
}

/* --- Education --- */
.edu-entry { margin-bottom: 4pt; }
.edu-row {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
}
.edu-school { font-weight: 600; font-size: 10pt; }
.edu-location {
  font-family: 'Lato', sans-serif;
  font-size: 8.5pt;
  color: #666;
  text-align: right;
  white-space: nowrap;
  margin-left: 8pt;
}
.edu-degree { font-size: 9.5pt; color: #444; }
</style>
</head>
<body>
<div class="page">

  {% if header %}
  <div class="header">
    <h1>{{ header.name }}</h1>
    {% if header.title %}<div class="title-line">{{ header.title }}</div>{% endif %}
    <div class="contact">
      {% set contact_parts = [] %}
      {% for item in (header.contact_items or []) %}
        {% if item.url %}
          {% set href = item.url if (item.url.startswith('http') or item.url.startswith('mailto')) else 'https://' ~ item.url %}
          {% set _ = contact_parts.append('<a href="' ~ href ~ '">' ~ item.text ~ '</a>') %}
        {% else %}
          {% set _ = contact_parts.append(item.text) %}
        {% endif %}
      {% endfor %}
      {{ contact_parts | join('<span class="sep">&middot;</span>') }}
    </div>
  </div>
  {% endif %}

  {% if summary %}
  <div class="section" style="margin-top: 0">
    <div class="section-title">Summary</div>
    <div class="summary-text">{{ summary }}</div>
  </div>
  {% endif %}

  {% if experience %}
  <div class="section">
    <div class="section-title">Experience</div>
    {% for job in experience %}
    <div class="entry">
      <div class="entry-row">
        <span class="entry-primary">{{ job.company }}</span>
        <span class="entry-date">{{ job.dates }}</span>
      </div>
      <div class="entry-row">
        <span class="entry-secondary">{{ job.title }}</span>
        <span class="entry-location">{{ job.location }}</span>
      </div>
      {% if job.description %}
      <div class="entry-description">{{ job.description }}</div>
      {% endif %}
      {% if job.bullets %}
      <ul class="bullets">
        {% for bullet in job.bullets %}
        <li>{{ bullet | bold }}</li>
        {% endfor %}
      </ul>
      {% endif %}
    </div>
    {% endfor %}
  </div>
  {% endif %}

  {% if skills %}
  <div class="section">
    <div class="section-title">Skills</div>
    {% if skills is mapping %}
      {% for label, value in skills.items() %}
      <div class="skill-line"><span class="skill-label">{{ label }}:</span> {{ value }}</div>
      {% endfor %}
    {% else %}
      {% for sk in skills %}
      <div class="skill-line"><span class="skill-label">{{ sk.category }}:</span> {{ sk.items }}</div>
      {% endfor %}
    {% endif %}
  </div>
  {% endif %}

  {% if education %}
  <div class="section">
    <div class="section-title">Education</div>
    {% for edu in education %}
    <div class="edu-entry">
      <div class="edu-row">
        <span class="edu-school">{{ edu.school }}</span>
        <span class="edu-location">{{ edu.location }}</span>
      </div>
      {% if edu.degree %}
      <div class="edu-degree">{{ edu.degree }}</div>
      {% endif %}
    </div>
    {% endfor %}
  </div>
  {% endif %}

  {% if projects %}
  <div class="section">
    <div class="section-title">Projects</div>
    {% for project in projects %}
    <div class="entry">
      <div class="entry-primary">{{ project.name or project.title }}</div>
      {% if project.url %}<div class="entry-url"><a href="{{ project.url }}">{{ project.url }}</a></div>{% endif %}
      {% if project.description %}<div class="entry-description">{{ project.description }}</div>{% endif %}
      {% if project.bullets %}
      <ul class="bullets">
        {% for bullet in project.bullets %}<li>{{ bullet | bold }}</li>{% endfor %}
      </ul>
      {% endif %}
    </div>
    {% endfor %}
  </div>
  {% endif %}

  {% if publications %}
  <div class="section">
    <div class="section-title">Publications</div>
    {% for pub in publications %}
    <div class="entry">
      <div class="entry-primary">{{ pub.name or pub.title }}</div>
      {% if pub.description %}<div class="entry-description">{{ pub.description }}</div>{% endif %}
      {% if pub.bullets %}
      <ul class="bullets">
        {% for bullet in pub.bullets %}<li>{{ bullet | bold }}</li>{% endfor %}
      </ul>
      {% endif %}
    </div>
    {% endfor %}
  </div>
  {% endif %}

</div>
</body>
</html>
