<!DOCTYPE html>
<!-- ==================================================================
     PORTFOLIO · English · parchment design system
     Multi-page A4 portfolio / case studies
     Structure: cover -> About -> project pages -> Contact
     Each project 1-2 pages, visuals over words
     ================================================================== -->
<html lang="en">
<head>
<meta charset="UTF-8">
<title>{{NAME}} · Portfolio</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: 12mm 15mm 12mm 15mm;
    background: #f5f4ed;
  }
  @page:first { margin: 0; }

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

  :root {
    --parchment: #f5f4ed;
    --ivory:     #faf9f5;
    --near-black:#141413;
    --dark-warm: #3d3d3a;
    --charcoal:  #4d4c48;
    --olive:     #5e5d59;
    --stone:     #87867f;
    --brand:     #1B365D;
    --brand-deep:#a64f33;
    --border:    #e8e6dc;
    --border-soft:#e5e3d8;
    --tag-bg:    #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;
  }

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

  body {
    color: var(--near-black);
    font-family: var(--serif);
    font-size: 10pt;
    line-height: 1.48;
  }

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

  /* COVER */
  .cover {
    width: 100%;
    height: 297mm;
    padding: 25mm 20mm;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    break-after: page;
  }
  .cover-top {
    font-family: var(--sans);
    font-size: 10pt;
    color: var(--brand);
    letter-spacing: 2.5pt;
    text-transform: uppercase;
    font-weight: 500;
  }
  .cover-center {
    display: flex;
    flex-direction: column;
    gap: 14pt;
  }
  .cover-name {
    font-family: var(--serif);
    font-size: 64pt;
    font-weight: 500;
    line-height: 1.02;
    color: var(--near-black);
    letter-spacing: -1pt;
  }
  .cover-tagline {
    font-family: var(--serif);
    font-size: 18pt;
    color: var(--olive);
    line-height: 1.4;
    max-width: 80%;
  }
  .cover-line {
    width: 80pt;
    height: 2pt;
    background: var(--brand);
    margin: 18pt 0 4pt 0;
  }
  .cover-meta {
    display: flex;
    justify-content: space-between;
    align-items: flex-end;
    font-size: 10pt;
    color: var(--stone);
    font-variant-numeric: tabular-nums;
  }
  .cover-meta strong {
    color: var(--dark-warm);
    font-weight: 500;
  }

  /* ABOUT */
  section.about {
    break-after: page;
    padding: 10mm 0;
  }
  .about-eyebrow {
    font-family: var(--sans);
    font-size: 9pt;
    color: var(--brand);
    letter-spacing: 1.5pt;
    text-transform: uppercase;
    font-weight: 500;
    margin-bottom: 8pt;
  }
  .about-title {
    font-family: var(--serif);
    font-size: 34pt;
    font-weight: 500;
    line-height: 1.15;
    letter-spacing: -0.5pt;
    margin-bottom: 20pt;
    border-left: 2.5pt solid var(--brand);
    border-radius: 1.5pt;
    padding-left: 8pt;
  }
  .about-lead {
    font-family: var(--serif);
    font-size: 15pt;
    line-height: 1.5;
    color: var(--dark-warm);
    margin-bottom: 24pt;
    max-width: 90%;
  }
  .about-body {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 24pt;
  }
  .about-body p { line-height: 1.5; margin-bottom: 10pt; }
  .about-body h3 {
    font-family: var(--serif);
    font-size: 13pt;
    font-weight: 500;
    color: var(--near-black);
    margin-bottom: 6pt;
  }

  /* PROJECT PAGE */
  .project {
    break-before: page;
    break-after: page;
    padding: 8mm 0;
  }
  .project-header {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    margin-bottom: 14pt;
    border-left: 2.5pt solid var(--brand);
    border-radius: 1.5pt;
    padding-left: 8pt;
  }
  .project-num {
    font-family: var(--serif);
    font-size: 48pt;
    font-weight: 500;
    color: var(--brand);
    line-height: 1;
    margin-right: 18pt;
    letter-spacing: -1pt;
  }
  .project-title-block { flex: 1; padding-top: 6pt; }
  .project-type {
    font-family: var(--sans);
    font-size: 8.5pt;
    color: var(--brand);
    letter-spacing: 1.5pt;
    text-transform: uppercase;
    font-weight: 500;
    margin-bottom: 3pt;
  }
  .project-title {
    font-family: var(--serif);
    font-size: 24pt;
    font-weight: 500;
    color: var(--near-black);
    line-height: 1.2;
    letter-spacing: -0.3pt;
    margin-bottom: 4pt;
  }
  .project-subtitle {
    font-size: 11pt;
    color: var(--olive);
    line-height: 1.4;
  }
  .project-date {
    text-align: right;
    font-size: 9pt;
    color: var(--stone);
    font-variant-numeric: tabular-nums;
    min-width: 80pt;
    padding-top: 10pt;
  }

  /* Tags */
  .project-tags {
    display: flex;
    flex-wrap: wrap;
    gap: 4pt;
    margin-bottom: 14pt;
  }
  .tag {
    background: var(--tag-bg);
    color: var(--brand);
    font-family: var(--sans);
    font-size: 8pt;
    font-weight: 600;
    padding: 2pt 8pt;
    border-radius: 3pt;
    letter-spacing: 0.4pt;
    text-transform: uppercase;
  }

  /* Hero image */
  .project-hero {
    width: 100%;
    height: 110mm;
    background: var(--ivory);
    border: 0.5pt solid var(--border-soft);
    border-radius: 6pt;
    margin-bottom: 14pt;
    overflow: hidden;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--stone);
    font-size: 10pt;
  }
  .project-hero img { width: 100%; height: 100%; object-fit: cover; }

  /* 3-column body */
  .project-body {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
    gap: 16pt;
  }
  .project-block h3 {
    font-family: var(--serif);
    font-size: 12pt;
    font-weight: 500;
    color: var(--brand);
    margin-bottom: 4pt;
    letter-spacing: 0.3pt;
  }
  .project-block p {
    font-size: 9.5pt;
    line-height: 1.5;
    color: var(--dark-warm);
  }
  .project-block .hl { color: var(--brand); font-weight: 500; }

  /* Results */
  .project-results {
    display: flex;
    gap: 14pt;
    margin-top: 14pt;
    padding-top: 10pt;
    border-top: 0.5pt dotted var(--border);
  }
  .result-item { flex: 1; }
  .result-value {
    font-family: var(--serif);
    font-size: 20pt;
    font-weight: 500;
    color: var(--brand);
    line-height: 1.1;
    font-variant-numeric: tabular-nums;
  }
  .result-label {
    font-size: 8.5pt;
    color: var(--olive);
    margin-top: 2pt;
    line-height: 1.3;
  }

  /* 2-image variant */
  .project-visuals-2col {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 10pt;
    margin-bottom: 14pt;
  }
  .project-visuals-2col .project-hero {
    height: 80mm;
    margin-bottom: 0;
  }

  /* SELECTED WORKS */
  section.more-works {
    break-before: page;
    padding-top: 10mm;
  }
  .more-works-title {
    font-family: var(--serif);
    font-size: 26pt;
    font-weight: 500;
    letter-spacing: -0.3pt;
    margin-bottom: 16pt;
    border-left: 2.5pt solid var(--brand);
    border-radius: 1.5pt;
    padding-left: 8pt;
  }
  .work-item {
    display: grid;
    grid-template-columns: 40pt 1fr 80pt;
    gap: 12pt;
    padding: 8pt 0;
    border-bottom: 0.3pt dotted var(--border);
    align-items: baseline;
  }
  .work-year {
    font-family: var(--serif);
    color: var(--brand);
    font-size: 11pt;
    font-variant-numeric: tabular-nums;
  }
  .work-title-block .title {
    font-family: var(--serif);
    font-size: 11pt;
    font-weight: 500;
    color: var(--near-black);
  }
  .work-title-block .desc {
    font-size: 9pt;
    color: var(--olive);
    margin-top: 1pt;
  }
  .work-link {
    text-align: right;
    font-size: 8.5pt;
    color: var(--stone);
    font-variant-numeric: tabular-nums;
  }

  /* CONTACT */
  section.contact {
    break-before: page;
    padding: 20mm 0;
    min-height: 230mm;
    display: flex;
    flex-direction: column;
    justify-content: center;
  }
  .contact-eyebrow {
    font-family: var(--sans);
    font-size: 10pt;
    color: var(--brand);
    letter-spacing: 2pt;
    text-transform: uppercase;
    font-weight: 500;
    margin-bottom: 12pt;
  }
  .contact-title {
    font-family: var(--serif);
    font-size: 52pt;
    font-weight: 500;
    line-height: 1.05;
    letter-spacing: -1pt;
    margin-bottom: 20pt;
    color: var(--near-black);
  }
  .contact-line {
    width: 80pt;
    height: 2pt;
    background: var(--brand);
    margin-bottom: 24pt;
  }
  .contact-list {
    font-size: 12pt;
    line-height: 1.55;
    color: var(--dark-warm);
  }
  .contact-list strong {
    font-family: var(--sans);
    color: var(--stone);
    font-weight: 500;
    font-size: 10pt;
    letter-spacing: 1pt;
    margin-right: 12pt;
    display: inline-block;
    min-width: 80pt;
    text-transform: uppercase;
  }
  .contact-list a {
    color: var(--brand);
    text-decoration: none;
  }
</style>
</head>
<body>

<!-- COVER -->
<div class="cover">
  <div class="cover-top">{{YEAR_RANGE — e.g. Selected Works 2023–2026}}</div>

  <div class="cover-center">
    <div class="cover-name">{{NAME}}<br>Portfolio</div>
    <div class="cover-tagline">{{One-line self-description or portfolio theme.}}</div>
    <div class="cover-line"></div>
  </div>

  <div class="cover-meta">
    <div>
      <strong>{{DISCIPLINE / ROLE}}</strong><br>
      {{LOCATION}}
    </div>
    <div style="text-align: right;">
      {{EMAIL}}<br>
      {{WEBSITE / SOCIAL}}
    </div>
  </div>
</div>

<!-- ABOUT -->
<section class="about">
  <div class="about-eyebrow">About</div>
  <div class="about-title">{{Single-line positioning headline.}}</div>
  <div class="about-lead">
    {{Two or three lines of introduction, serif italic. Not sales-y. Describe in your own words what you care about and what you do well.}}
  </div>
  <div class="about-body">
    <div>
      <h3>Background</h3>
      <p>{{A paragraph on your past experience.}}</p>
    </div>
    <div>
      <h3>Focus</h3>
      <p>{{A paragraph on your current focus or methodology.}}</p>
    </div>
  </div>
</section>

<!-- PROJECT 01 -->
<section class="project">
  <div class="project-header">
    <div class="project-num">01</div>
    <div class="project-title-block">
      <div class="project-type">{{PROJECT_TYPE — e.g. Product Design / Open Source}}</div>
      <div class="project-title">{{PROJECT_NAME}}</div>
      <div class="project-subtitle">{{One-line description of what this project did.}}</div>
    </div>
    <div class="project-date">{{DATE — e.g. 2025.04 — 2026.02}}</div>
  </div>

  <div class="project-tags">
    <span class="tag">{{Tag 1}}</span>
    <span class="tag">{{Tag 2}}</span>
    <span class="tag">{{Tag 3}}</span>
  </div>

  <div class="project-hero">
    <!-- Replace with: <img src="project-01-hero.png" alt=""> -->
    [hero image placeholder — replace with &lt;img&gt;]
  </div>

  <div class="project-body">
    <div class="project-block">
      <h3>Context</h3>
      <p>{{Why this project? What problem does it solve? Who is the user?}}</p>
    </div>
    <div class="project-block">
      <h3>Approach</h3>
      <p>{{How it was done — key decisions, design rationale, technical approach.}}</p>
    </div>
    <div class="project-block">
      <h3>Outcome</h3>
      <p>{{Results — <span class="hl">figures</span>, feedback, impact.}}</p>
    </div>
  </div>

  <div class="project-results">
    <div class="result-item">
      <div class="result-value">{{NUMBER}}</div>
      <div class="result-label">{{LABEL}}</div>
    </div>
    <div class="result-item">
      <div class="result-value">{{NUMBER}}</div>
      <div class="result-label">{{LABEL}}</div>
    </div>
    <div class="result-item">
      <div class="result-value">{{NUMBER}}</div>
      <div class="result-label">{{LABEL}}</div>
    </div>
  </div>
</section>

<!-- PROJECT 02 (2-image variant) -->
<section class="project">
  <div class="project-header">
    <div class="project-num">02</div>
    <div class="project-title-block">
      <div class="project-type">{{PROJECT_TYPE}}</div>
      <div class="project-title">{{PROJECT_NAME}}</div>
      <div class="project-subtitle">{{One-line description.}}</div>
    </div>
    <div class="project-date">{{DATE}}</div>
  </div>

  <div class="project-tags">
    <span class="tag">{{Tag}}</span>
    <span class="tag">{{Tag}}</span>
  </div>

  <div class="project-visuals-2col">
    <div class="project-hero">[left image]</div>
    <div class="project-hero">[right image]</div>
  </div>

  <div class="project-body">
    <div class="project-block">
      <h3>Context</h3>
      <p>{{Context.}}</p>
    </div>
    <div class="project-block">
      <h3>Approach</h3>
      <p>{{Approach.}}</p>
    </div>
    <div class="project-block">
      <h3>Outcome</h3>
      <p>{{Outcome.}}</p>
    </div>
  </div>
</section>

<!-- MORE WORKS -->
<section class="more-works">
  <div class="more-works-title">Selected Works</div>

  <div class="work-item">
    <span class="work-year">2025</span>
    <div class="work-title-block">
      <div class="title">{{WORK_TITLE}}</div>
      <div class="desc">{{One-line description.}}</div>
    </div>
    <div class="work-link">{{LINK / STATUS}}</div>
  </div>

  <div class="work-item">
    <span class="work-year">2024</span>
    <div class="work-title-block">
      <div class="title">{{WORK_TITLE}}</div>
      <div class="desc">{{One-line description.}}</div>
    </div>
    <div class="work-link">{{LINK / STATUS}}</div>
  </div>

  <div class="work-item">
    <span class="work-year">2023</span>
    <div class="work-title-block">
      <div class="title">{{WORK_TITLE}}</div>
      <div class="desc">{{One-line description.}}</div>
    </div>
    <div class="work-link">{{LINK / STATUS}}</div>
  </div>
</section>

<!-- CONTACT -->
<section class="contact">
  <div class="contact-eyebrow">Let's Talk</div>
  <div class="contact-title">{{One-line opening — e.g. "Open to new collaborations."}}</div>
  <div class="contact-line"></div>
  <div class="contact-list">
    <div><strong>Email</strong><a href="mailto:{{EMAIL}}">{{EMAIL}}</a></div>
    <div><strong>Phone</strong>{{PHONE}}</div>
    <div><strong>Website</strong><a href="{{URL}}">{{URL}}</a></div>
    <div><strong>{{PLATFORM}}</strong><a href="{{URL}}">@{{HANDLE}}</a></div>
  </div>
</section>

</body>
</html>
