<!DOCTYPE html>
<!-- ==================================================================
     DIAGRAM · Bar Chart (kami palette)
     Grouped bar chart for categorical comparison (revenue, market share, etc.)
     Up to 8 categories × 3 series. Demo: 4 quarters × 2 series.
     DATA START / DATA END marks the region Claude replaces when filling.
     ================================================================== -->
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Bar Chart · kami diagram</title>
<style>
  *, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

  :root {
    --parchment:    #f5f4ed;
    --ivory:        #faf9f5;
    --near-black:   #141413;
    --olive:        #504e49;
    --stone:        #6b6a64;
    --brand:        #1B365D;
    --brand-tint:   #EEF2F7;
    --border:       #e8e6dc;

    --serif: Charter, Georgia, Palatino, serif;
    --sans: var(--serif);
    --mono:  "JetBrains Mono", "SF Mono", Consolas, "TsangerJinKai02", "Source Han Serif SC", "Noto Serif CJK SC", "Songti SC", monospace;
  }

  body {
    font-family: var(--sans);
    background: var(--parchment);
    color: var(--near-black);
    min-height: 100vh;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 3rem 2rem;
  }

  .frame { max-width: 920px; width: 100%; }

  .eyebrow {
    font-family: var(--mono);
    font-size: 0.7rem;
    letter-spacing: 0.22em;
    text-transform: uppercase;
    color: var(--stone);
    margin-bottom: 0.5rem;
  }

  h1 {
    font-family: var(--serif);
    font-size: 1.9rem;
    font-weight: 500;
    letter-spacing: -0.3pt;
    line-height: 1.15;
    margin-bottom: 1.6rem;
  }

  svg { width: 100%; min-width: 640px; display: block; }

  .caption {
    font-family: var(--serif);
    font-size: 0.95rem;
    color: var(--olive);
    margin-top: 1rem;
    max-width: 52ch;
  }
</style>
</head>
<body>
  <div class="frame">
    <p class="eyebrow">Bar Chart · kami diagram</p>
    <h1>{{Chart Title}}</h1>

    <!-- ============================================================
         DATA START
         Chart area: x=60 y=40 w=560 h=280 · base y=320
         viewBox: 0 0 680 420
         Groups: 4 · group-width=140 · bar-width=32 · gap=8
         Scale: max=140 · 1 unit = 2px
         Y-axis labels: 0/20/40/60/80/100/120/140
         Series colors: brand=#1B365D  olive=#504e49
         ============================================================ -->
    <svg viewBox="0 0 680 420" xmlns="http://www.w3.org/2000/svg">

      <!-- Canvas -->
      <rect width="100%" height="100%" fill="#f5f4ed"/>

      <!-- Horizontal grid lines (y = 320 down to 40, step 40 = 20 units × 2px) -->
      <line x1="60" y1="320" x2="620" y2="320" stroke="#e8e7e1" stroke-width="0.8"/>
      <line x1="60" y1="280" x2="620" y2="280" stroke="#e8e7e1" stroke-width="0.8"/>
      <line x1="60" y1="240" x2="620" y2="240" stroke="#e8e7e1" stroke-width="0.8"/>
      <line x1="60" y1="200" x2="620" y2="200" stroke="#e8e7e1" stroke-width="0.8"/>
      <line x1="60" y1="160" x2="620" y2="160" stroke="#e8e7e1" stroke-width="0.8"/>
      <line x1="60" y1="120" x2="620" y2="120" stroke="#e8e7e1" stroke-width="0.8"/>
      <line x1="60" y1="80"  x2="620" y2="80"  stroke="#e8e7e1" stroke-width="0.8"/>
      <line x1="60" y1="40"  x2="620" y2="40"  stroke="#e8e7e1" stroke-width="0.8"/>

      <!-- Y-axis labels -->
      <text x="52" y="324" fill="#6b6a64" font-size="10" font-family="inherit" text-anchor="end">0</text>
      <text x="52" y="284" fill="#6b6a64" font-size="10" font-family="inherit" text-anchor="end">20</text>
      <text x="52" y="244" fill="#6b6a64" font-size="10" font-family="inherit" text-anchor="end">40</text>
      <text x="52" y="204" fill="#6b6a64" font-size="10" font-family="inherit" text-anchor="end">60</text>
      <text x="52" y="164" fill="#6b6a64" font-size="10" font-family="inherit" text-anchor="end">80</text>
      <text x="52" y="124" fill="#6b6a64" font-size="10" font-family="inherit" text-anchor="end">100</text>
      <text x="52" y="84"  fill="#6b6a64" font-size="10" font-family="inherit" text-anchor="end">120</text>
      <text x="52" y="44"  fill="#6b6a64" font-size="10" font-family="inherit" text-anchor="end">140</text>

      <!-- Y-axis unit label -->
      <text x="16" y="184" fill="#6b6a64" font-size="9" font-family="'JetBrains Mono', monospace" letter-spacing="0.12em" transform="rotate(-90 16 184)" text-anchor="middle">UNIT</text>

      <!-- X-axis baseline -->
      <line x1="60" y1="320" x2="620" y2="320" stroke="#141413" stroke-width="0.8"/>

      <!-- ==================================================
           BARS · replace values between DATA START / DATA END
           Group centers: 130, 270, 410, 550
           Series A (brand) bars at: 94/234/374/514 · h from base 320
           Series B (olive) bars at: 134/274/414/554 · h from base 320
           ================================================== -->

      <!-- Group 1: x-label "2021" -->
      <!-- Series A: value 44 → height 88, top y=232 -->
      <rect x="94"  y="232" width="32" height="88" fill="#1B365D" rx="2"/>
      <!-- Series B: value 32 → height 64, top y=256 -->
      <rect x="134" y="256" width="32" height="64" fill="#504e49" rx="2"/>

      <!-- Group 2: x-label "2022" -->
      <!-- Series A: value 60 → height 120, top y=200 -->
      <rect x="234" y="200" width="32" height="120" fill="#1B365D" rx="2"/>
      <!-- Series B: value 48 → height 96, top y=224 -->
      <rect x="274" y="224" width="32" height="96"  fill="#504e49" rx="2"/>

      <!-- Group 3: x-label "2023" (focal) -->
      <!-- Series A: value 72 → height 144, top y=176 -->
      <rect x="374" y="176" width="32" height="144" fill="#1B365D" rx="2"/>
      <!-- Series B: value 64 → height 128, top y=192 -->
      <rect x="414" y="192" width="32" height="128" fill="#504e49" rx="2"/>

      <!-- Group 4: x-label "2024" -->
      <!-- Series A: value 88 → height 176, top y=144 -->
      <rect x="514" y="144" width="32" height="176" fill="#1B365D" rx="2"/>
      <!-- Series B: value 76 → height 152, top y=168 -->
      <rect x="554" y="168" width="32" height="152" fill="#504e49" rx="2"/>

      <!-- Data labels (top of each bar) -->
      <text x="110" y="228" fill="#141413" font-size="10" font-family="inherit" font-weight="500" text-anchor="middle">44</text>
      <text x="150" y="252" fill="#141413" font-size="10" font-family="inherit" text-anchor="middle">32</text>

      <text x="250" y="196" fill="#141413" font-size="10" font-family="inherit" font-weight="500" text-anchor="middle">60</text>
      <text x="290" y="220" fill="#141413" font-size="10" font-family="inherit" text-anchor="middle">48</text>

      <text x="390" y="172" fill="#141413" font-size="10" font-family="inherit" font-weight="500" text-anchor="middle">72</text>
      <text x="430" y="188" fill="#141413" font-size="10" font-family="inherit" text-anchor="middle">64</text>

      <text x="530" y="140" fill="#141413" font-size="10" font-family="inherit" font-weight="500" text-anchor="middle">88</text>
      <text x="570" y="164" fill="#141413" font-size="10" font-family="inherit" text-anchor="middle">76</text>

      <!-- X-axis category labels (group centers) -->
      <text x="130" y="340" fill="#141413" font-size="11" font-family="inherit" text-anchor="middle">2021</text>
      <text x="270" y="340" fill="#141413" font-size="11" font-family="inherit" text-anchor="middle">2022</text>
      <text x="410" y="340" fill="#141413" font-size="11" font-family="inherit" text-anchor="middle">2023</text>
      <text x="550" y="340" fill="#141413" font-size="11" font-family="inherit" text-anchor="middle">2024</text>

      <!-- ================================================== DATA END -->

      <!-- Legend -->
      <line x1="60" y1="368" x2="620" y2="368" stroke="#e8e7e1" stroke-width="0.8"/>

      <rect x="60" y="380" width="12" height="12" fill="#1B365D" rx="2"/>
      <text x="78" y="391" fill="#504e49" font-size="10" font-family="inherit">{{Series A label}}</text>

      <rect x="200" y="380" width="12" height="12" fill="#504e49" rx="2"/>
      <text x="218" y="391" fill="#504e49" font-size="10" font-family="inherit">{{Series B label}}</text>

    </svg>

    <p class="caption">{{Caption text. The focal series in ink-blue carries the primary argument. State the takeaway here, not a description of what is plotted.}}</p>
  </div>
</body>
</html>
