<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>{{NAME}} · Resume</title>
<style>
  @font-face { font-family: "Newsreader"; src: url("../fonts/Newsreader.woff2") format("woff2"); font-weight: 400; font-style: normal; }
  @font-face { font-family: "Newsreader"; src: url("../fonts/Newsreader.woff2") format("woff2"); font-weight: 500; font-style: normal; }
  @font-face { font-family: "Inter"; src: url("../fonts/Inter.woff2") format("woff2"); font-weight: 400; font-style: normal; }
  @font-face { font-family: "Inter"; src: url("../fonts/Inter-500.woff2") format("woff2"); font-weight: 500; font-style: normal; }
  @font-face { font-family: "Inter"; src: url("../fonts/Inter-600.woff2") format("woff2"); font-weight: 600; font-style: normal; }
  @font-face { font-family: "JetBrains Mono"; src: url("../fonts/JetBrainsMono.woff2") format("woff2"); font-weight: 400; font-style: normal; }
  @font-face { font-family: "JetBrains Mono"; src: url("../fonts/JetBrainsMono.woff2") format("woff2"); font-weight: 500; font-style: normal; }

  @page {
    size: A4;
    margin: 11mm 13mm 11mm 13mm;
    background: #f5f4ed;
  }

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

  :root {
    --parchment: #f5f4ed;
    --ivory:     #faf9f5;
    --sand:      #e8e6dc;
    --border:    #e8e6dc;
    --border-soft: #e5e3d8;
    --near-black: #141413;
    --dark-warm: #3d3d3a;
    --olive:     #5e5d59;
    --stone:     #87867f;
    --brand:     #1B365D;
    --brand-tint: #EEF2F7;
    --brand-tint-strong: #E4ECF5;

    --serif: "Newsreader", "Source Serif 4", "Source Serif Pro", "Charter",
             Georgia, "Times New Roman", serif;
    --sans:  "Inter", -apple-system, BlinkMacSystemFont,
             "Helvetica Neue", Arial, sans-serif;
    --mono:  "JetBrains Mono", "SF Mono", "Fira Code",
             Consolas, Monaco, monospace;
  }

  html, body { background: var(--parchment); }

  body {
    color: var(--near-black);
    font-family: var(--serif);
    font-size: 9.4pt;
    line-height: 1.42;
    letter-spacing: 0;
  }

  .serif { font-family: var(--serif); }
  .mono  { font-family: var(--mono); }

  a { color: var(--brand); text-decoration: none; }

  /* HEADER */
  .header {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    margin-bottom: 3mm;
    border-left: 2.5pt solid var(--brand);
    border-radius: 1.5pt;
    padding-left: 8pt;
  }
  .header > div:first-child { flex-shrink: 0; }
  .name {
    font-family: var(--serif);
    font-size: 26pt;
    font-weight: 500;
    letter-spacing: -0.2pt;
    color: var(--near-black);
    line-height: 1;
    display: flex;
    align-items: baseline;
    gap: 3mm;
    white-space: nowrap;
  }
  .alias {
    font-size: 12.5pt;
    font-weight: 400;
    color: var(--stone);
  }
  .contact {
    text-align: right;
    font-size: 9pt;
    color: var(--stone);
    line-height: 1.5;
  }
  .contact .role {
    color: var(--brand);
    font-size: 10.5pt;
    font-weight: 500;
  }
  .contact .sep { color: var(--border); margin: 0 0.4em; }
  .contact a { color: var(--dark-warm); }
  .contact .loc { color: var(--olive); font-weight: 500; }

  /* METRICS */
  .metrics { display: flex; gap: 7mm; margin-bottom: 3mm; }
  .metric {
    flex: 1;
    padding: 1mm 0;
    display: flex;
    align-items: baseline;
    gap: 2mm;
    break-inside: avoid;
  }
  .metric-value {
    font-family: var(--serif);
    font-size: 14pt;
    font-weight: 500;
    color: var(--brand);
    line-height: 1;
    font-variant-numeric: tabular-nums;
  }
  .metric-value .unit {
    font-size: 10.5pt;
    margin-left: 0.5mm;
    font-weight: 500;
    color: var(--brand);
  }
  .metric-label { font-size: 8.8pt; color: var(--olive); line-height: 1.2; }

  /* SECTION TITLE */
  .section-title {
    font-family: var(--serif);
    font-size: 13pt;
    font-weight: 500;
    color: var(--near-black);
    border-left: 2.5pt solid var(--brand);
    border-radius: 1.5pt;
    padding: 0 0 0 8pt;
    margin: 5mm 0 2mm 0;
    display: flex;
    align-items: baseline;
    gap: 2.5mm;
  }
  .section-title .sub {
    margin-left: auto;
    font-family: var(--sans);
    font-weight: 400;
    font-size: 9pt;
    color: var(--stone);
    letter-spacing: 0.2pt;
  }
  section:first-of-type .section-title { margin-top: 0; }
  .page-break > .section-title { margin-top: 0; }

  /* SUMMARY */
  .summary { font-size: 9.4pt; line-height: 1.48; color: var(--near-black); }
  .summary .hl { color: var(--brand); }

  /* TIMELINE */
  .timeline { display: flex; gap: 7mm; margin-bottom: 2.5mm; }
  .tl-step { flex: 1; padding: 0.8mm 0; break-inside: avoid; }
  .tl-top {
    display: flex; align-items: baseline; gap: 2mm;
    margin-bottom: 0.6mm;
  }
  .tl-year {
    font-family: var(--serif);
    font-size: 11pt; font-weight: 500;
    color: var(--brand); line-height: 1;
  }
  .tl-head {
    font-size: 11pt; font-weight: 500;
    color: var(--near-black);
  }
  .tl-body { font-size: 8.8pt; color: var(--olive); line-height: 1.45; }

  /* PROJECTS */
  .project {
    padding: 1.6mm 0;
    border-top: 0.4pt solid var(--border-soft);
    break-inside: avoid;
  }
  .project:first-of-type {
    border-top: 0.4pt solid var(--border);
    padding-top: 1.6mm;
  }
  .proj-head {
    display: flex; align-items: baseline;
    gap: 2mm; margin-bottom: 0.9mm;
  }
  .proj-name {
    font-family: var(--serif);
    font-size: 11pt; font-weight: 500; color: var(--near-black);
  }
  .proj-kind { font-size: 11pt; color: var(--olive); }
  .proj-role {
    font-size: 8.4pt; color: var(--brand); font-weight: 600;
    margin-left: auto; background: #EEF2F7;
    padding: 0.4mm 1.6mm; border-radius: 2pt; letter-spacing: 0.3pt;
    text-transform: uppercase;
  }
  .proj-lines { display: table; width: 100%; }
  .proj-row { display: table-row; }
  .proj-label {
    display: table-cell; width: 16mm;
    font-size: 8.5pt; color: var(--brand);
    font-weight: 600; letter-spacing: 0.4pt;
    text-transform: uppercase;
    padding: 0.4mm 0 0.4mm 0; vertical-align: top;
  }
  .proj-text {
    display: table-cell; font-size: 9.2pt;
    color: var(--near-black); line-height: 1.45;
    padding: 0 0 0.4mm 1mm;
  }
  .proj-text .hl { color: var(--brand); }

  /* PAGE 2 FORCE BREAK */
  .page-break { break-before: page; }

  /* OPEN SOURCE */
  .os-intro {
    font-size: 9.4pt; line-height: 1.45;
    color: var(--near-black);
    margin: 1.6mm 0 2.4mm 0;
    break-inside: avoid;
  }
  .os-intro .hl { color: var(--brand); }
  .os-intro .strong { color: var(--near-black); font-weight: 500; }

  .os-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    column-gap: 9mm; row-gap: 1.2mm;
  }
  .os-item {
    display: flex; align-items: baseline;
    gap: 2.5mm; padding: 1.2mm 0;
    border-bottom: 0.3pt dotted var(--border);
    break-inside: avoid;
  }
  .os-name {
    font-family: var(--serif);
    font-size: 10.5pt; font-weight: 500;
    flex-shrink: 0; min-width: 18mm;
  }
  .os-name a { color: var(--brand); }
  .os-desc { font-size: 9pt; color: var(--olive); line-height: 1.4; flex: 1; }
  .os-star {
    font-size: 8.8pt; color: var(--dark-warm);
    font-weight: 600; white-space: nowrap;
    flex-shrink: 0; min-width: 10mm; text-align: right;
    font-variant-numeric: tabular-nums;
  }
  .os-star.big { color: var(--brand); font-size: 9.2pt; }

  .os-highlight {
    margin-top: 2.5mm;
    padding: 1.8mm 3mm;
    background: var(--brand-tint);
    border-left: 1.4pt solid var(--brand);
    border-radius: 2pt;
    font-size: 9pt; line-height: 1.45;
    color: var(--near-black);
    break-inside: avoid;
  }
  .os-highlight .hl { color: var(--brand); }
  .os-highlight .tag {
    display: inline-block;
    background: var(--brand); color: var(--ivory);
    font-size: 7.6pt; font-weight: 600;
    padding: 0.2mm 1.6mm; border-radius: 2pt;
    margin-right: 1.5mm; letter-spacing: 0.5pt;
    text-transform: uppercase;
    transform: translateY(-0.2mm);
  }

  /* CONVICTIONS */
  .convictions {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
    gap: 3mm;
    margin-top: 1.4mm;
  }
  .conv-card { padding: 0 2mm 0 0; break-inside: avoid; }
  .conv-head {
    font-family: var(--serif);
    font-size: 10pt; font-weight: 500;
    color: var(--near-black); margin-bottom: 1mm;
    display: flex; align-items: baseline; gap: 2mm;
  }
  .conv-head .year {
    color: var(--brand); font-weight: 600;
    font-size: 9pt;
    font-variant-numeric: tabular-nums;
  }
  .conv-body {
    font-size: 9pt; color: var(--olive);
    line-height: 1.45;
  }
  .conv-body .hl { color: var(--brand); }

  /* IMPACT */
  .handle-strip {
    padding: 0; margin: 1.4mm 0 2mm 0;
    display: flex; align-items: baseline; gap: 3.5mm;
    break-inside: avoid;
  }
  .handle-strip .handle {
    font-family: var(--serif);
    font-size: 10pt; font-weight: 500; color: var(--brand);
    flex-shrink: 0;
  }
  .handle-strip .follower { font-size: 8.8pt; color: var(--stone); flex-shrink: 0; font-variant-numeric: tabular-nums; }
  .handle-strip .desc { font-size: 8.8pt; color: var(--olive); line-height: 1.45; flex: 1; }

  .impact-grid { display: grid; grid-template-columns: 1.15fr 1fr; gap: 6mm; }
  .inf-block-title {
    margin-top: 2.5mm;
    font-family: var(--serif);
    font-size: 10pt; font-weight: 500;
    color: var(--near-black);
    margin-bottom: 1.5mm; padding-bottom: 0.5mm;
    border-bottom: 0.3pt dotted var(--border);
    display: flex; align-items: baseline; gap: 2mm;
  }
  .inf-block-title .small {
    font-family: var(--sans);
    font-size: 8.5pt; color: var(--stone);
    font-weight: 400;
  }
  .art-row {
    padding: 1.8mm 0;
    border-bottom: 0.3pt dotted var(--border-soft);
  }
  .talk-row {
    display: flex; justify-content: space-between;
    align-items: flex-start;
    gap: 2mm; padding: 1.8mm 0;
    border-bottom: 0.3pt dotted var(--border-soft);
  }
  .art-row:last-of-type, .talk-row:last-of-type { border-bottom: none; }
  .art-header {
    display: flex; align-items: baseline;
    justify-content: space-between;
    gap: 2mm;
  }
  .art-title, .talk-title {
    font-size: 9.2pt; color: var(--near-black);
    font-weight: 500; line-height: 1.4;
    flex: 1 1 auto; min-width: 0;
  }
  .art-stats, .talk-venue {
    font-size: 8.8pt; color: var(--stone);
    line-height: 1.4; margin-top: 0.6mm;
  }
  .art-stats .em-brand { color: var(--brand); }
  .art-date, .talk-date {
    font-size: 8.8pt; color: var(--stone);
    font-variant-numeric: tabular-nums;
    font-weight: 400;
    white-space: nowrap;
  }

  /* SKILLS */
  .skill-row {
    display: flex; gap: 3mm; padding: 1.8mm 0;
    border-bottom: 0.3pt dotted var(--border);
    align-items: baseline;
  }
  .skill-row:last-of-type { border-bottom: none; }
  .skill-label {
    font-size: 8.6pt; font-weight: 600;
    color: var(--brand); letter-spacing: 0.5pt;
    text-transform: uppercase;
    width: 32mm; flex-shrink: 0;
    line-height: 1.35;
  }
  .skill-body { font-size: 9.2pt; color: var(--near-black); line-height: 1.45; flex: 1; }
  .skill-body .em-brand { color: var(--brand); }

  /* EDUCATION */
  .edu-row {
    display: flex; justify-content: space-between;
    align-items: baseline; padding: 1.8mm 0;
  }
  .edu-row .school {
    font-family: var(--serif);
    font-weight: 500; font-size: 11pt;
  }
  .edu-row .major { color: var(--olive); font-size: 9.4pt; }
  .edu-row .date { color: var(--stone); font-variant-numeric: tabular-nums; font-size: 9pt; }
</style>
</head>
<body>

<!-- =====================================================================
     Usage:
     - Replace all {{VAR}} placeholders with real content
     - Drop sections that don't apply (e.g. no open source -> remove that block)
     - Each project strictly three-part: ROLE / ACTIONS / IMPACT
     - Must verify: 2 pages exactly (strict)
       python3 scripts/build.py resume-en
     - Content strategy: references/writing.en.md
     ===================================================================== -->


<!-- ═══════════ PAGE 1 ═══════════ -->

<div class="header">
  <div>
    <div class="name serif">{{NAME}}<span class="alias">{{ALIAS_OR_PREFERRED_NAME}}</span></div>
  </div>
  <div class="contact">
    <span class="role">{{ROLE_TITLE — e.g. AI / Agent Engineer}}</span>
    <br>
    <a href="{{GITHUB_URL}}">github.com/{{GITHUB_ID}}</a>
    <span class="sep">·</span>
    <a href="{{X_URL}}">x.com/{{X_ID}}</a>
    <span class="sep">·</span>
    <a href="mailto:{{EMAIL}}">{{EMAIL}}</a>
    <span class="sep">·</span>
    <span class="loc">{{CITY}}, {{COUNTRY_OR_REGION}}</span>
  </div>
</div>

<!-- Four strongest numeric badges -->
<div class="metrics">
  <div class="metric"><span class="metric-value serif">{{NUMBER}}<span class="unit">{{UNIT}}</span></span><span class="metric-label">{{LABEL}}</span></div>
  <div class="metric"><span class="metric-value serif">{{NUMBER}}<span class="unit">{{UNIT}}</span></span><span class="metric-label">{{LABEL}}</span></div>
  <div class="metric"><span class="metric-value serif">{{NUMBER}}<span class="unit">{{UNIT}}</span></span><span class="metric-label">{{LABEL}}</span></div>
  <div class="metric"><span class="metric-value serif">{{NUMBER}}<span class="unit">{{UNIT}}</span></span><span class="metric-label">{{LABEL}}</span></div>
</div>

<section>
  <div class="section-title">Summary</div>
  <div class="summary">
    {{~50 words. Structure: current role + seniority + tenure. Team composition (size, seniority mix, cross-functional collaborators). Long-term direction. Three to five core areas of depth.}}
  </div>
</section>

<section>
  <div class="section-title">Experience<span class="sub">{{START_DATE}} — Present · {{KEY_MILESTONE}}</span></div>

  <!-- Timeline: three-step long-range arc -->
  <div class="timeline">
    <div class="tl-step">
      <div class="tl-top"><div class="tl-year serif">{{YEAR}}</div><div class="tl-head">{{STAGE_TITLE}}</div></div>
      <div class="tl-body">{{One sentence on what this stage meant.}}</div>
    </div>
    <div class="tl-step">
      <div class="tl-top"><div class="tl-year serif">{{YEAR}}</div><div class="tl-head">{{STAGE_TITLE}}</div></div>
      <div class="tl-body">{{One sentence on what this stage meant.}}</div>
    </div>
    <div class="tl-step">
      <div class="tl-top"><div class="tl-year serif">{{YEAR}}</div><div class="tl-head">{{STAGE_TITLE}}</div></div>
      <div class="tl-body">{{One sentence on what this stage meant.}}</div>
    </div>
  </div>

  <!-- Project block — repeat 3–5 times -->
  <div class="project">
    <div class="proj-head">
      <span class="proj-name serif">{{PROJECT_NAME}}</span>
      <span class="proj-kind">· {{PROJECT_TYPE}}</span>
      <span class="proj-role">{{ROLE — e.g. tech lead}}</span>
    </div>
    <div class="proj-lines">
      <div class="proj-row">
        <div class="proj-label">Role</div>
        <div class="proj-text">{{~40 words: what the project is, why it existed, what your seat at the table was.}}</div>
      </div>
      <div class="proj-row">
        <div class="proj-label">Actions</div>
        <div class="proj-text">{{~55 words: technical approach, key decisions, execution path.}}</div>
      </div>
      <div class="proj-row">
        <div class="proj-label">Impact</div>
        <div class="proj-text">{{~65 words: numbers-first. Highlight <span class="hl">1-2 key figures</span>.}}</div>
      </div>
    </div>
  </div>

  <div class="project">
    <div class="proj-head">
      <span class="proj-name serif">{{PROJECT_NAME}}</span>
      <span class="proj-kind">· {{PROJECT_TYPE}}</span>
      <span class="proj-role">{{ROLE}}</span>
    </div>
    <div class="proj-lines">
      <div class="proj-row">
        <div class="proj-label">Role</div>
        <div class="proj-text">{{~40 words.}}</div>
      </div>
      <div class="proj-row">
        <div class="proj-label">Actions</div>
        <div class="proj-text">{{~55 words.}}</div>
      </div>
      <div class="proj-row">
        <div class="proj-label">Impact</div>
        <div class="proj-text">{{~65 words, include <span class="hl">key figures</span>.}}</div>
      </div>
    </div>
  </div>

  <div class="project">
    <div class="proj-head">
      <span class="proj-name serif">{{PROJECT_NAME}}</span>
      <span class="proj-kind">· {{PROJECT_TYPE}}</span>
      <span class="proj-role">{{ROLE}}</span>
    </div>
    <div class="proj-lines">
      <div class="proj-row">
        <div class="proj-label">Role</div>
        <div class="proj-text">{{Project context and your seat.}}</div>
      </div>
      <div class="proj-row">
        <div class="proj-label">Actions</div>
        <div class="proj-text">{{Execution path.}}</div>
      </div>
      <div class="proj-row">
        <div class="proj-label">Impact</div>
        <div class="proj-text">{{Quantifiable outcome with <span class="hl">key figures</span>.}}</div>
      </div>
    </div>
  </div>
</section>


<!-- ═══════════ PAGE 2 ═══════════ -->

<section class="page-break">
  <div class="section-title">Open Source &amp; Indie Work<span class="sub">{{TIME_RANGE}} · {{SUBTITLE}}</span></div>

  <div class="os-intro">
    <span class="hl">{{One-line positioning statement.}}</span> {{Short sketch of your indie developer identity: design instinct, solo end-to-end delivery, cross-language range, user reception.}} Cumulative GitHub: <span class="strong">{{STARS_TOTAL}} stars · {{FORKS_TOTAL}} forks · {{FOLLOWERS_TOTAL}} followers</span>.
  </div>

  <div class="os-grid">
    <div class="os-item">
      <span class="os-name serif"><a href="{{URL}}">{{PROJECT}}</a></span>
      <span class="os-desc">{{Stack + core positioning + platform.}}</span>
      <span class="os-star big">★ {{STARS}}</span>
    </div>
    <div class="os-item">
      <span class="os-name serif"><a href="{{URL}}">{{PROJECT}}</a></span>
      <span class="os-desc">{{Description.}}</span>
      <span class="os-star big">★ {{STARS}}</span>
    </div>
    <div class="os-item">
      <span class="os-name serif"><a href="{{URL}}">{{PROJECT}}</a></span>
      <span class="os-desc">{{Description.}}</span>
      <span class="os-star">★ {{STARS}}</span>
    </div>
    <div class="os-item">
      <span class="os-name serif"><a href="{{URL}}">{{PROJECT}}</a></span>
      <span class="os-desc">{{Description.}}</span>
      <span class="os-star">★ {{STARS}}</span>
    </div>
    <div class="os-item">
      <span class="os-name serif"><a href="{{URL}}">{{PROJECT}}</a></span>
      <span class="os-desc">{{Description.}}</span>
      <span class="os-star">★ {{STARS}}</span>
    </div>
    <div class="os-item">
      <span class="os-name serif"><a href="{{URL}}">{{PROJECT}}</a></span>
      <span class="os-desc">{{Description.}}</span>
      <span class="os-star">★ {{STARS}}</span>
    </div>
  </div>

  <div class="os-highlight">
    <span class="tag">{{HIGHLIGHT}}</span>{{A single anecdote that sets your work apart: the moment it went viral, the notable person who shared it, the community that formed around it.}}
  </div>
</section>

<section>
  <div class="section-title">Judgment &amp; Conviction</div>
  <div class="convictions">
    <div class="conv-card">
      <div class="conv-head"><span class="year">{{DATE}}</span>{{EVENT_TITLE}}</div>
      <div class="conv-body">
        {{Specific call you made or action you took, and the downstream evidence that the judgment was right.}}
      </div>
    </div>
    <div class="conv-card">
      <div class="conv-head"><span class="year">{{DATE}}</span>{{EVENT_TITLE}}</div>
      <div class="conv-body">
        {{Specific call or action.}}
      </div>
    </div>
    <div class="conv-card">
      <div class="conv-head"><span class="year">{{DATE}}</span>{{EVENT_TITLE}}</div>
      <div class="conv-body">
        {{Specific call or action.}}
      </div>
    </div>
  </div>
</section>

<section>
  <div class="section-title">Public Impact</div>

  <div class="handle-strip">
    <span class="handle serif">{{PLATFORM}} · <a href="{{URL}}" style="color: var(--brand); border-bottom: none;">@{{HANDLE}}</a></span>
    <span class="follower">{{FOLLOWERS}} followers</span>
    <span class="desc">{{Blog / newsletter / other content product.}}</span>
  </div>

  <div class="impact-grid">
    <div>
      <div class="inf-block-title">Selected writing<span class="small">{{SUBTITLE}}</span></div>
      <div class="art-row">
        <div class="art-header">
          <a class="art-title" href="{{URL}}" style="text-decoration: none;">{{ARTICLE_TITLE}}</a>
          <span class="art-date">{{DATE}}</span>
        </div>
        <div class="art-stats">{{Views / likes / impact metric.}}</div>
      </div>
      <div class="art-row">
        <div class="art-header">
          <a class="art-title" href="{{URL}}" style="text-decoration: none;">{{ARTICLE_TITLE}}</a>
          <span class="art-date">{{DATE}}</span>
        </div>
        <div class="art-stats">{{Views / likes.}}</div>
      </div>
    </div>

    <div>
      <div class="inf-block-title">Invited talks<span class="small">{{SUBTITLE}}</span></div>
      <div class="talk-row">
        <div>
          <div class="talk-title">{{TALK_TITLE}}</div>
          <div class="talk-venue">{{HOST / VENUE}}</div>
        </div>
        <div class="talk-date">{{DATE}}</div>
      </div>
      <div class="talk-row">
        <div>
          <div class="talk-title">{{TALK_TITLE}}</div>
          <div class="talk-venue">{{HOST / VENUE}}</div>
        </div>
        <div class="talk-date">{{DATE}}</div>
      </div>
    </div>
  </div>
</section>

<section>
  <div class="section-title">Core Skills</div>
  <!-- Five fixed rows, each with at least one brand-color emphasis -->
  <div class="skill-row">
    <div class="skill-label">{{SKILL_LABEL_1}}</div>
    <div class="skill-body">{{Description with at least <span class="em-brand">one emphasis</span>.}}</div>
  </div>
  <div class="skill-row">
    <div class="skill-label">{{SKILL_LABEL_2}}</div>
    <div class="skill-body">{{Description with at least <span class="em-brand">one emphasis</span>.}}</div>
  </div>
  <div class="skill-row">
    <div class="skill-label">{{SKILL_LABEL_3}}</div>
    <div class="skill-body">{{Description with at least <span class="em-brand">one emphasis</span>.}}</div>
  </div>
  <div class="skill-row">
    <div class="skill-label">{{SKILL_LABEL_4}}</div>
    <div class="skill-body">{{Description with at least <span class="em-brand">one emphasis</span>.}}</div>
  </div>
  <div class="skill-row">
    <div class="skill-label">{{SKILL_LABEL_5}}</div>
    <div class="skill-body">{{Description with at least <span class="em-brand">one emphasis</span>.}}</div>
  </div>
</section>

<section style="break-inside: avoid;">
  <div class="section-title">Education</div>
  <div class="edu-row">
    <div>
      <span class="school serif">{{SCHOOL}}</span>
      <span class="major"> · {{COLLEGE}} · {{MAJOR}} · {{One-line judgment-flavored note, e.g. "declined grad school, went straight to industry".}}</span>
    </div>
    <div class="date">{{DATE_RANGE}}</div>
  </div>
</section>

</body>
</html>
