<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8" />
<title>Editorial Deck Template</title>
<meta name="viewport" content="width=device-width, initial-scale=1" />
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Bricolage+Grotesque:opsz,wght@12..96,400;12..96,500;12..96,600;12..96,700;12..96,800&family=Instrument+Serif:ital@0;1&family=JetBrains+Mono:wght@400;500&display=swap" rel="stylesheet">
<script src="deck-stage.js"></script>
<style>
  :root{
    --pink:#F2B6C6;
    --pink-deep:#F2B6C6;
    --cream:#F2D86A;
    --navy:#7A1F35;
    --forest:#7A1F35;
    --burgundy:#7A1F35;
    --lime:#F2D86A;
    --sky:#F2B6C6;
    --terracotta:#F2D86A;
    --butter:#F2D86A;
    --ink:#7A1F35;
  }
  html, body { margin:0; padding:0; background:#7A1F35; }
  body { font-family: "Bricolage Grotesque", sans-serif; color: var(--ink); }

  deck-stage section {
    width:1920px; height:1080px;
    position:relative;
    overflow:hidden;
    box-sizing:border-box;
  }

  .mono { font-family:"JetBrains Mono", monospace; }
  .serif { font-family:"Instrument Serif", serif; font-weight:400; }
  .grotesk { font-family:"Bricolage Grotesque", sans-serif; }

  .pill {
    display:inline-flex; align-items:center; justify-content:center;
    padding: 0.35em 0.9em;
    border-radius: 999px;
    font-family:"Bricolage Grotesque", sans-serif;
    font-weight:500;
    line-height:1;
    white-space:nowrap;
  }

  .label {
    font-family:"JetBrains Mono", monospace;
    font-size:24px;
    letter-spacing: 0.15em;
    text-transform: uppercase;
  }

  .footer {
    position:absolute; left:64px; right:64px; bottom:36px;
    display:flex; justify-content:space-between; align-items:center;
    font-family:"JetBrains Mono", monospace;
    font-size:16px;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    opacity:0.75;
  }
  .footer .dotrow { display:flex; gap:8px; }
  .footer .dotrow i { width:8px; height:8px; border-radius:999px; background: currentColor; opacity:0.3; display:inline-block; }
  .footer .dotrow i.on { opacity:1; }

  /* ========== SLIDE 1: COVER ========== */
  .s-cover { background: var(--pink); color: var(--ink); }
  .s-cover .pill-cluster {
    position:absolute;
    top:120px; left:64px; right:64px;
    display:flex; flex-wrap:wrap; gap: 22px;
    max-width: 1500px;
  }
  .s-cover .pill-cluster .pill { font-size: 44px; padding: 16px 38px; }
  .s-cover .wordmark {
    position:absolute;
    left:64px; right:64px; bottom:80px;
    font-family:"Bricolage Grotesque", sans-serif;
    font-weight:800;
    font-size: 300px;
    line-height: 0.82;
    letter-spacing:-0.04em;
    color: var(--burgundy);
    display:flex;
    align-items:flex-end;
    flex-wrap:nowrap;
  }
  .s-cover .wordmark .amp { font-family:"Instrument Serif", serif; font-weight:400; font-stretch:normal; }
  .s-cover .meta {
    position:absolute; top:64px; left:64px; right:64px;
    display:flex; justify-content:space-between;
    font-family:"JetBrains Mono", monospace;
    font-size:24px; letter-spacing:0.15em; text-transform:uppercase;
  }

  /* ========== SLIDE 2: MANIFESTO ========== */
  .s-manifesto { background: var(--cream); color: var(--ink); display:grid; grid-template-columns: 1fr 1fr; }
  .s-manifesto .left { padding: 96px 64px; display:flex; flex-direction:column; justify-content:space-between; }
  .s-manifesto .right {
    background: var(--forest); color: var(--cream);
    padding: 96px 80px;
    display:flex; flex-direction:column; justify-content:space-between;
    position:relative;
  }
  .s-manifesto .chapter {
    font-family:"Instrument Serif", serif; 
    font-size: 240px; line-height:0.9;
    color: var(--burgundy);
  }
  .s-manifesto .chapter sup { font-size: 0.35em; vertical-align: super; opacity:0.6; }
  .s-manifesto .lede {
    font-family:"Bricolage Grotesque", sans-serif;
    font-size: 56px; line-height:1.05;
    font-weight:500; letter-spacing:-0.02em;
    max-width: 720px;
  }
  .s-manifesto .lede em { font-family:"Instrument Serif", serif; font-weight:400; color:var(--terracotta); }
  .s-manifesto .right h3 {
    font-family:"JetBrains Mono", monospace;
    font-size: 24px; letter-spacing:0.18em; text-transform:uppercase;
    margin: 0 0 32px; color: var(--butter); font-weight:500;
  }
  .s-manifesto .right p {
    font-size: 28px; line-height:1.45; max-width:540px; margin:0 0 24px;
  }
  .s-manifesto .right .signature {
    font-family:"Instrument Serif", serif; 
    font-size: 64px; line-height:1;
    color: var(--lime);
  }

  /* ========== SLIDE 3: GRID OF VALUES ========== */
  .s-grid { background: var(--pink); padding: 72px 64px 80px; }
  .s-grid h2 {
    margin:0 0 32px; font-size: 76px; line-height:1;
    font-family:"Bricolage Grotesque", sans-serif; font-weight:700;
    letter-spacing:-0.02em; color: var(--burgundy);
    max-width: 1100px;
  }
  .s-grid h2 em { font-family:"Instrument Serif", serif; font-weight:400; color: var(--navy); }
  .s-grid .grid {
    display:grid; grid-template-columns: repeat(4, 1fr);
    gap: 24px;
  }
  .s-grid .card {
    border-radius: 28px;
    padding: 28px 28px 30px;
    height: 340px;
    display:flex; flex-direction:column; justify-content:space-between;
    position:relative; overflow:hidden;
  }
  .s-grid .card .num {
    font-family:"JetBrains Mono", monospace;
    font-size: 24px; letter-spacing:0.15em;
    opacity:0.7;
  }
  .s-grid .card h4 {
    font-size: 40px; line-height:1; margin: 0;
    font-weight:600; letter-spacing:-0.02em;
  }
  .s-grid .card p { font-size: 24px; line-height:1.4; margin:0; opacity:0.85; }
  .s-grid .c1, .s-grid .c3, .s-grid .c5, .s-grid .c7 { background: var(--burgundy); color: var(--butter); }
  .s-grid .c2, .s-grid .c4, .s-grid .c6, .s-grid .c8 { background: var(--butter); color: var(--burgundy); }

  /* ========== SLIDE 4: BIG STAT / EDITORIAL ========== */
  .s-stat { background: var(--burgundy); color: var(--cream); padding: 96px 64px; position:relative; }
  .s-stat .toprow { display:flex; justify-content:space-between; align-items:flex-start; }
  .s-stat .kicker { font-family:"JetBrains Mono", monospace; font-size:24px; letter-spacing:0.18em; text-transform:uppercase; color: var(--butter); }
  .s-stat .swatches { display:flex; gap:10px; }
  .s-stat .swatches i { width:36px; height:36px; border-radius:999px; display:block; }
  .s-stat .figure {
    margin-top: 20px;
    font-family:"Bricolage Grotesque", sans-serif;
    font-weight:700;
    font-size: 540px;
    line-height: 0.78;
    letter-spacing: -0.06em;
    color: var(--pink);
    display:flex; align-items:flex-start;
  }
  .s-stat .figure .pct { font-family:"Instrument Serif", serif; font-weight:400; font-size:220px; color: var(--lime); margin-top: 60px; margin-left: 20px; }
  .s-stat .breakdown {
    position:absolute; right:64px; bottom:80px;
    width: 600px;
  }
  .s-stat .breakdown .row {
    display:grid; grid-template-columns: 150px 1fr 90px;
    gap: 16px; align-items:center; padding: 14px 0;
    border-top: 1px solid rgba(246,237,220,0.25);
    font-size: 24px;
  }
  .s-stat .breakdown .row:last-child { border-bottom: 1px solid rgba(246,237,220,0.25); }
  .s-stat .breakdown .row .lbl { font-family:"JetBrains Mono", monospace; font-size:24px; letter-spacing:0.1em; text-transform:uppercase; opacity:0.7; }
  .s-stat .breakdown .row .bar { height:10px; border-radius:999px; background: rgba(246,237,220,0.15); position:relative; overflow:hidden; }
  .s-stat .breakdown .row .bar i { display:block; height:100%; border-radius:999px; }
  .s-stat .breakdown .row .val { font-family:"JetBrains Mono", monospace; font-size:24px; text-align:right; }

  /* ========== SLIDE 5: TIMELINE ========== */
  .s-timeline { background: var(--butter); padding: 96px 80px; }
  .s-timeline .head { display:flex; justify-content:space-between; align-items:flex-start; gap: 48px; margin-bottom: 48px; }
  .s-timeline .head h2 {
    margin:0; font-size: 76px; line-height:0.95;
    font-weight:700; letter-spacing:-0.02em; color: var(--burgundy);
    max-width: 1100px;
  }
  .s-timeline .head h2 em { font-family:"Instrument Serif", serif; font-weight:400; color: var(--burgundy); }
  .s-timeline .head .meta { font-family:"JetBrains Mono", monospace; font-size:24px; letter-spacing:0.15em; text-transform:uppercase; text-align:right; line-height:1.5; color: var(--burgundy); flex-shrink:0; }
  .s-timeline .head .meta span { display:block; opacity:0.55; margin-top: 4px; }
  .s-timeline .track {
    position:relative;
    padding: 60px 0 40px;
  }
  .s-timeline .axis {
    position:absolute; left:0; right:0; top: 110px;
    height: 4px; background: var(--ink); opacity:0.15;
  }
  .s-timeline .stops {
    display:grid; grid-template-columns: repeat(5, 1fr);
    gap: 24px; position:relative;
  }
  .s-timeline .stop { position:relative; padding-top: 90px; }
  .s-timeline .stop .dot {
    position:absolute; top: 90px; left: 0;
    width: 28px; height: 28px; border-radius: 999px;
    transform: translateY(-50%);
    border: 4px solid var(--butter);
    background: var(--burgundy);
    display: none;
  }
  .s-timeline .stop .yr {
    font-family:"Instrument Serif", serif; 
    font-size: 56px; line-height:1; margin-bottom: 12px;
    color: var(--burgundy);
  }
  .s-timeline .stop h5 {
    margin:0 0 12px; font-size:28px; font-weight:600; letter-spacing:-0.01em; color: var(--burgundy);
  }
  .s-timeline .stop p { margin:0; font-size:24px; line-height:1.45; color: var(--burgundy); opacity:0.8; }

  .s-timeline .ribbon {
    margin-top: 56px;
    background: var(--burgundy); color: var(--butter);
    border-radius: 999px;
    padding: 24px 44px;
    display:flex; justify-content:space-between; align-items:center;
    font-family:"JetBrains Mono", monospace; font-size: 24px; letter-spacing:0.15em; text-transform:uppercase;
  }
  .s-timeline .ribbon strong { font-family:"Instrument Serif", serif; font-weight:400; font-size:30px; letter-spacing:0; text-transform:none; color: var(--pink); }

  /* ========== SLIDE 6: CHART ========== */
  .s-chart { background: var(--navy); color: var(--cream); padding: 88px 64px; display:grid; grid-template-columns: 1.1fr 1fr; gap:64px; }
  .s-chart .l h2 {
    margin:0 0 24px; font-size: 84px; line-height:0.95;
    font-weight:700; letter-spacing:-0.02em;
  }
  .s-chart .l h2 em { font-family:"Instrument Serif", serif; font-weight:400; color: var(--butter); }
  .s-chart .l .lede { font-size: 24px; line-height:1.5; max-width: 640px; opacity:0.85; }
  .s-chart .l .legend {
    margin-top: 56px;
    display:flex; flex-direction:column; gap: 16px;
  }
  .s-chart .l .legend .item { display:flex; align-items:center; gap: 14px; font-size:24px; }
  .s-chart .l .legend .item i { width:14px; height:14px; border-radius:4px; display:block; }
  .s-chart .l .legend .item .cat { font-family:"JetBrains Mono", monospace; font-size:24px; letter-spacing:0.1em; text-transform:uppercase; opacity:0.7; margin-left:auto; }
  .s-chart .r {
    background: var(--cream); color: var(--ink);
    border-radius: 32px;
    padding: 48px 48px 56px;
    display:flex; flex-direction:column;
    position:relative;
  }
  .s-chart .r .head { display:flex; justify-content:space-between; align-items:center; margin-bottom: 32px; }
  .s-chart .r .head .ttl { font-family:"Instrument Serif", serif; font-size: 40px; }
  .s-chart .r .head .unit { font-family:"JetBrains Mono", monospace; font-size:24px; letter-spacing:0.1em; text-transform:uppercase; opacity:0.6; }
  .s-chart svg.chart { width:100%; flex:0 0 auto; max-height: 480px; }
  .s-chart .r .xax { display:grid; grid-template-columns: repeat(6, 1fr); margin-top: 12px; font-family:"JetBrains Mono", monospace; font-size:24px; opacity:0.6; letter-spacing:0.1em; }

  /* ========== SLIDE 7: QUOTE / EDITORIAL SPLIT ========== */
  .s-quote { background: var(--lime); color: var(--ink); padding: 0; display:grid; grid-template-columns: 0.95fr 1fr; }
  .s-quote .l { padding: 80px 56px 80px 80px; display:flex; flex-direction:column; justify-content:space-between; gap: 24px; position:relative; }
  .s-quote .l .top { display:flex; flex-direction:column; gap: 12px; }
  .s-quote .l .mark { font-family:"Instrument Serif", serif; font-size: 200px; line-height:0.6; color: var(--burgundy); margin: 80px 0 0 0; }
  .s-quote .l blockquote {
    margin: 0;
    font-family:"Instrument Serif", serif; 
    font-size: 64px; line-height:1.1;
    color: var(--ink);
    max-width: 760px;
  }
  .s-quote .l blockquote b { font-family:"Bricolage Grotesque", sans-serif; font-style:normal; font-weight:600; color: var(--burgundy); }
  .s-quote .l .attribution { display:flex; align-items:center; gap:20px; }
  .s-quote .l .avatar { width:72px; height:72px; border-radius:999px; background: var(--burgundy); border:3px solid var(--burgundy); }
  .s-quote .l .who { font-size:26px; font-weight:600; }
  .s-quote .l .who small { display:block; font-family:"JetBrains Mono", monospace; font-size:24px; letter-spacing:0.1em; text-transform:uppercase; opacity:0.65; font-weight:400; margin-top:4px; }
  .s-quote .r {
    background: var(--burgundy); color: var(--butter);
    padding: 96px 80px;
    display:flex; flex-direction:column; gap: 28px;
    position:relative;
  }
  .s-quote .r h3 { margin:0; font-size: 56px; font-weight:600; line-height:1; letter-spacing:-0.02em; }
  .s-quote .r .endorsements { display:flex; flex-direction:column; gap: 20px; margin-top: 8px; }
  .s-quote .r .endorsements .row {
    display:grid; grid-template-columns: 80px 1fr;
    gap: 20px; align-items:center;
    padding: 20px 0; border-top: 1px solid rgba(246,237,220,0.3);
  }
  .s-quote .r .endorsements .row:last-child { border-bottom: 1px solid rgba(246,237,220,0.3); }
  .s-quote .r .endorsements .num { font-family:"Instrument Serif", serif; font-size: 56px; line-height:1; color: var(--pink); }
  .s-quote .r .endorsements .txt { font-size: 26px; line-height:1.4; }
  .s-quote .r .endorsements .txt strong { font-weight:600; display:block; margin-bottom: 4px; }

  /* ========== SLIDE 8: CLOSER / INDEX ========== */
  .s-closer { background: var(--ink); color: var(--cream); padding: 96px 64px; position:relative; }
  .s-closer .top { display:flex; justify-content:space-between; align-items:flex-start; }
  .s-closer .top .kicker { font-family:"JetBrains Mono", monospace; font-size:24px; letter-spacing:0.18em; text-transform:uppercase; color: var(--lime); }
  .s-closer .big {
    margin-top: 40px;
    font-family:"Bricolage Grotesque", sans-serif;
    font-weight:700;
    font-size: 320px;
    line-height: 0.82;
    letter-spacing: -0.05em;
    color: var(--pink);
    max-width: 800px;
  }
  .s-closer .big em { display:inline-block; margin-left: -20px; }
  .s-closer .big em { font-family:"Instrument Serif", serif; font-weight:400; color: var(--butter); }
  .s-closer .grid {
    position:absolute; left:64px; right:64px; bottom: 120px;
    display:grid; grid-template-columns: repeat(4, 1fr); gap: 24px;
  }
  .s-closer .grid .col h6 {
    margin: 0 0 16px;
    font-family:"JetBrains Mono", monospace;
    font-size:24px; letter-spacing:0.15em; text-transform:uppercase;
    color: var(--lime); font-weight:500;
  }
  .s-closer .grid .col p { margin:0; font-size: 24px; line-height:1.45; }
  .s-closer .grid .col p + p { margin-top: 8px; }
  .s-closer .corner-pills {
    position:absolute; right:64px; top: 200px;
    display:flex; flex-direction:column; gap: 12px; align-items:flex-end;
  }
  .s-closer .corner-pills .pill { font-size:22px; padding: 10px 24px; }
</style>
</head>
<body>
<deck-stage>

  <!-- ============ SLIDE 1: COVER ============ -->
  <section class="s-cover" data-screen-label="01 Cover">
    <div class="meta">
      <span>Vol. 04 &mdash; Editorial Brief</span>
      <span>Spring / Summer Edition</span>
      <span>FW · 2026</span>
    </div>

    <div class="pill-cluster">
      <span class="pill" style="background:var(--burgundy); color:var(--pink)">focus</span>
      <span class="pill" style="background:var(--butter); color:var(--burgundy)">tech-equipped</span>
      <span class="pill" style="background:var(--burgundy); color:var(--butter)">creativity</span>
      <span class="pill" style="background:var(--butter); color:var(--burgundy)">coffee</span>
      <span class="pill" style="background:var(--burgundy); color:var(--pink)">community</span>
      <span class="pill" style="background:var(--butter); color:var(--burgundy)">coworking</span>
      <span class="pill" style="background:var(--burgundy); color:var(--butter)">productivity</span>
      <span class="pill" style="background:var(--butter); color:var(--burgundy)">inspiration</span>
      <span class="pill" style="background:var(--burgundy); color:var(--pink)">flexible</span>
      <span class="pill" style="background:var(--butter); color:var(--burgundy)">workshops</span>
      <span class="pill" style="background:var(--burgundy); color:var(--butter)">collaboration</span>
      <span class="pill" style="background:var(--butter); color:var(--burgundy)">studio</span>
    </div>

    <div class="wordmark">
      <span>Studio</span>
      <span class="amp" style="color:var(--butter); margin: 0 24px 24px;">&amp;</span>
      <span>Salon</span>
    </div>
  </section>

  <!-- ============ SLIDE 2: MANIFESTO ============ -->
  <section class="s-manifesto" data-screen-label="02 Manifesto">
    <div class="left">
      <div>
        <div class="label" style="margin-bottom:32px; color: var(--burgundy);">Chapter One · Manifesto</div>
        <div class="chapter">01<sup></sup></div>
      </div>
      <div class="lede">
        Placeholder lede sets the tone for the whole document. A short, declarative sentence followed by an aside in italic that carries the warmth.
      </div>
      <div class="mono" style="font-size:24px; letter-spacing:0.12em; opacity:0.6; text-transform:uppercase;">Page 002 / 016 &nbsp;·&nbsp; Read Time 04:30</div>
    </div>
    <div class="right">
      <div>
        <h3>An opening note</h3>
        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed posuere consectetur est at lobortis. Cras justo odio, dapibus ac facilisis in, egestas eget quam.</p>
        <p>Maecenas faucibus mollis interdum. Nullam quis risus eget urna mollis ornare vel eu leo. Donec ullamcorper nulla non metus auctor fringilla.</p>
        <p>Vestibulum id ligula porta felis euismod semper. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus.</p>
      </div>
      <div>
        <div class="signature">— with warmth,</div>
        <div style="font-family:'JetBrains Mono', monospace; font-size:24px; letter-spacing:0.18em; text-transform:uppercase; margin-top: 12px; color: var(--butter);">The Editorial Desk</div>
      </div>
    </div>
  </section>

  <!-- ============ SLIDE 3: VALUES GRID ============ -->
  <section class="s-grid" data-screen-label="03 Principles">
    <div style="display:flex; justify-content:space-between; align-items:flex-end; margin-bottom: 24px;">
      <h2>Eight principles, loosely held.</h2>
      <div class="mono" style="font-size:24px; letter-spacing:0.15em; text-transform:uppercase; color: var(--burgundy);">§ 03 — Principles</div>
    </div>
    <div class="grid">
      <div class="card c1">
        <div class="num">/ 01</div>
        <h4>Slow looking</h4>
        <p>A short paragraph describing the principle in plain language. Two sentences is plenty.</p>
      </div>
      <div class="card c2">
        <div class="num">/ 02</div>
        <h4>Open kitchen</h4>
        <p>Process in public. Show the seams, the sketches, the half-formed thoughts before they harden.</p>
      </div>
      <div class="card c3">
        <div class="num">/ 03</div>
        <h4>Borrowed light</h4>
        <p>Cite generously. The best ideas always belong to a lineage; name the room you walked into.</p>
      </div>
      <div class="card c4">
        <div class="num">/ 04</div>
        <h4>Quiet defaults</h4>
        <p>Restraint as a posture. Loud only when the moment earns it; otherwise, a soft shoulder.</p>
      </div>
      <div class="card c5">
        <div class="num">/ 05</div>
        <h4>Fewer, finer</h4>
        <p>Pare back the pile. Three considered objects beat thirty hurried ones, every single time.</p>
      </div>
      <div class="card c6">
        <div class="num">/ 06</div>
        <h4>Generous edges</h4>
        <p>Margins are mercy. Leave white space for the reader to breathe and bring their own.</p>
      </div>
      <div class="card c7">
        <div class="num">/ 07</div>
        <h4>Hand in it</h4>
        <p>A trace of the maker, on purpose. Polish should never quite hide the fingerprints.</p>
      </div>
      <div class="card c8">
        <div class="num">/ 08</div>
        <h4>To be added</h4>
        <p>A placeholder principle, awaiting the next conversation. The list is not yet finished.</p>
      </div>
    </div>
  </section>

  <!-- ============ SLIDE 4: BIG STAT ============ -->
  <section class="s-stat" data-screen-label="04 Headline figure">
    <div class="toprow">
      <div>
        <div class="kicker">§ 04 — Headline Figure</div>
        <div class="serif" style="font-size: 48px; margin-top: 16px; color: var(--pink);">A portrait, in numbers.</div>
      </div>
      <div class="swatches">
        <i style="background:var(--pink)"></i>
        <i style="background:var(--lime)"></i>
        <i style="background:var(--butter)"></i>
        <i style="background:var(--terracotta)"></i>
        <i style="background:var(--sky)"></i>
      </div>
    </div>

    <div class="figure" style="margin-left:0px; max-width: 900px;">
      <span>72</span><span class="pct">%</span>
    </div>
    <div style="position:absolute; left:64px; bottom:80px; max-width: 900px;">
      <div class="kicker" style="color:var(--butter);">What this measures</div>
      <p style="font-size:24px; line-height:1.45; margin-top:18px; opacity:0.9;">Placeholder annotation. A short, candid sentence about what the figure means and, more importantly, what it doesn't. Survey of n=842, fielded in placeholder month, weighted to placeholder population.</p>
    </div>

    <div class="breakdown">
      <div class="kicker" style="margin-bottom:12px;">Composition</div>
      <div class="row">
        <span class="lbl">Segment A</span>
        <span class="bar"><i style="width:82%; background:var(--lime)"></i></span>
        <span class="val">82.4</span>
      </div>
      <div class="row">
        <span class="lbl">Segment B</span>
        <span class="bar"><i style="width:64%; background:var(--butter)"></i></span>
        <span class="val">63.9</span>
      </div>
      <div class="row">
        <span class="lbl">Segment C</span>
        <span class="bar"><i style="width:48%; background:var(--terracotta)"></i></span>
        <span class="val">48.1</span>
      </div>
      <div class="row">
        <span class="lbl">Segment D</span>
        <span class="bar"><i style="width:31%; background:var(--sky)"></i></span>
        <span class="val">31.0</span>
      </div>
    </div>
  </section>

  <!-- ============ SLIDE 5: TIMELINE ============ -->
  <section class="s-timeline" data-screen-label="05 Trajectory">
    <div class="head">
      <h2>A short trajectory, told in five stops.</h2>
      <div class="meta">
        § 05 — Trajectory<br/>
        <span style="opacity:0.5;">2019 → present</span>
      </div>
    </div>

    <div class="track">
      <div class="axis"></div>
      <div class="stops">
        <div class="stop">
          <span class="dot"></span>
          <div class="yr">'19</div>
          <h5>The first prototype</h5>
          <p>A short caption per milestone, written in plain prose. One observation, one consequence.</p>
        </div>
        <div class="stop">
          <span class="dot"></span>
          <div class="yr">'21</div>
          <h5>Quiet expansion</h5>
          <p>Placeholder copy describing a turning point. Keep the writing concrete, never abstract.</p>
        </div>
        <div class="stop">
          <span class="dot"></span>
          <div class="yr">'23</div>
          <h5>A new house style</h5>
          <p>Type, color, voice — re-cast around a single editorial premise; everything else followed.</p>
        </div>
        <div class="stop">
          <span class="dot"></span>
          <div class="yr">'25</div>
          <h5>The salon, formalized</h5>
          <p>Monthly gatherings became a fixture, then a discipline, then the work's center of gravity.</p>
        </div>
        <div class="stop">
          <span class="dot"></span>
          <div class="yr">'26</div>
          <h5>Where we sit now</h5>
          <p>Present tense. A brief, honest description of the shape of the practice today, in two breaths.</p>
        </div>
      </div>
    </div>

    <div class="ribbon">
      <span>Next chapter loading</span>
      <strong>— and the work continues, gently.</strong>
      <span>Vol. 05 / Autumn</span>
    </div>
  </section>

  <!-- ============ SLIDE 6: CHART ============ -->
  <section class="s-chart" data-screen-label="06 Composition">
    <div class="l">
      <div class="label" style="color:var(--butter); margin-bottom: 20px;">§ 06 — Composition</div>
      <h2>How the days arrange themselves.</h2>
      <p class="lede">A placeholder description for the chart on the right. Speak to the shape of the data — what rises, what plateaus — not the precise figures. Methodology and a one-line caveat live at the bottom.</p>
      <div class="legend">
        <div class="item"><i style="background:var(--pink); border:1px solid var(--burgundy);"></i> Studio hours, deep work <span class="cat">Series A</span></div>
        <div class="item"><i style="background:var(--butter); border:2px solid var(--burgundy); border-radius:999px;"></i> Salon &amp; conversation <span class="cat">Series B</span></div>
        <div class="item"><i style="background:var(--burgundy);"></i> Reading, drift, walking <span class="cat">Series C</span></div>
        <div class="item"><i style="background:transparent; border-top: 3px dotted var(--butter); border-radius:0; height: 0;"></i> Correspondence, admin <span class="cat">Series D</span></div>
      </div>
      <div class="mono" style="margin-top: 40px; font-size:24px; letter-spacing:0.1em; text-transform:uppercase; opacity:0.5;">Source: internal logs · self-reported · n = 24 weeks</div>
    </div>
    <div class="r">
      <div class="head">
        <span class="ttl">Hours per week, by mode</span>
        <span class="unit">Hrs / wk</span>
      </div>
      <svg class="chart" viewBox="0 0 720 380" preserveAspectRatio="none">
        <!-- gridlines -->
        <g stroke="#7A1F35" stroke-opacity="0.15" stroke-width="1">
          <line x1="60" y1="40"  x2="720" y2="40"  />
          <line x1="60" y1="125" x2="720" y2="125" />
          <line x1="60" y1="210" x2="720" y2="210" />
          <line x1="60" y1="295" x2="720" y2="295" />
          <line x1="60" y1="380" x2="720" y2="380" />
        </g>
        <!-- y labels -->
        <g font-family="JetBrains Mono, monospace" font-size="24" fill="#7A1F35" fill-opacity="0.6">
          <text x="0" y="48">40</text>
          <text x="0" y="133">30</text>
          <text x="0" y="218">20</text>
          <text x="0" y="303">10</text>
          <text x="8" y="380">0</text>
        </g>

        <!-- Series A (pink area, burgundy stroke) -->
        <path d="M 60 230 Q 120 200 180 180 T 300 145 T 420 120 T 540 100 T 660 80 L 660 380 L 60 380 Z"
              fill="#F2B6C6" fill-opacity="0.85"/>
        <path d="M 60 230 Q 120 200 180 180 T 300 145 T 420 120 T 540 100 T 660 80"
              fill="none" stroke="#7A1F35" stroke-width="3"/>

        <!-- Series C bars (burgundy, dark on yellow) -->
        <g fill="#7A1F35">
          <rect x="80"  y="320" width="22" height="60" rx="4"/>
          <rect x="190" y="300" width="22" height="80" rx="4"/>
          <rect x="300" y="285" width="22" height="95" rx="4"/>
          <rect x="410" y="275" width="22" height="105" rx="4"/>
          <rect x="520" y="260" width="22" height="120" rx="4"/>
          <rect x="630" y="245" width="22" height="135" rx="4"/>
        </g>

        <!-- Series B (yellow circles + burgundy line) -->
        <path d="M 90 280 L 200 250 L 310 235 L 420 215 L 530 200 L 640 175"
              fill="none" stroke="#7A1F35" stroke-width="3"/>
        <g fill="#F2D86A" stroke="#7A1F35" stroke-width="3">
          <circle cx="90" cy="280" r="8"/>
          <circle cx="200" cy="250" r="8"/>
          <circle cx="310" cy="235" r="8"/>
          <circle cx="420" cy="215" r="8"/>
          <circle cx="530" cy="200" r="8"/>
          <circle cx="640" cy="175" r="8"/>
        </g>

        <!-- Series D (burgundy dotted) -->
        <path d="M 90 350 L 200 345 L 310 348 L 420 338 L 530 340 L 640 332"
              fill="none" stroke="#7A1F35" stroke-width="3" stroke-dasharray="2 10" stroke-linecap="round" stroke-opacity="0.6"/>
      </svg>
      <div class="xax">
        <span>W·01</span><span>W·05</span><span>W·09</span><span>W·13</span><span>W·17</span><span>W·24</span>
      </div>
    </div>
  </section>

  <!-- ============ SLIDE 7: QUOTE / SPLIT ============ -->
  <section class="s-quote" data-screen-label="07 In their words">
    <div class="l">
      <div class="top">
        <div class="mono" style="font-size:24px; letter-spacing:0.18em; text-transform:uppercase; color: var(--burgundy);">§ 07 — In their words</div>
        <div class="mark">&ldquo;</div>
      </div>
      <blockquote>
        A placeholder pull-quote, set in italic with one phrase rendered as <b>bold sans</b> for emphasis, the way good editorial designers have always done it.
      </blockquote>
      <div class="attribution">
        <div class="avatar"></div>
        <div class="who">
          A. Placeholder-Surname
          <small>Editor-at-large · Sister Publication</small>
        </div>
      </div>
    </div>
    <div class="r">
      <div class="label" style="color: var(--butter);">Three short reads</div>
      <h3>Voices, lightly edited &mdash; from the readership.</h3>
      <div class="endorsements">
        <div class="row">
          <span class="num">i.</span>
          <div class="txt">
            <strong>On the rhythm</strong>
            A two-line testimonial that reads as if spoken aloud across a small kitchen table.
          </div>
        </div>
        <div class="row">
          <span class="num">ii.</span>
          <div class="txt">
            <strong>On the company</strong>
            Another short note, three or four beats long, useful and specific without being precious about it.
          </div>
        </div>
        <div class="row">
          <span class="num">iii.</span>
          <div class="txt">
            <strong>On returning</strong>
            A closing testimonial — the one that comes after the others have already convinced the reader.
          </div>
        </div>
      </div>
    </div>
  </section>

  <!-- ============ SLIDE 8: CLOSER / INDEX ============ -->
  <section class="s-closer" data-screen-label="08 Colophon">
    <div class="top">
      <div>
        <div class="kicker">§ 08 — Colophon &amp; Index</div>
        <div class="serif" style="font-size:48px; color:var(--pink); margin-top:12px;">Until the next volume.</div>
      </div>
      <div class="mono" style="font-size:24px; letter-spacing:0.15em; text-transform:uppercase; opacity:0.7; text-align:right; line-height:1.4;">
        End of issue<br/>
        <span style="opacity:0.5;">No. 04 · 016 pp.</span>
      </div>
    </div>

    <div class="big">
      Fin.
    </div>

    <div class="corner-pills">
      <span class="pill" style="background:var(--burgundy); color:var(--cream); font-size:24px; padding: 12px 28px;">issue 04</span>
      <span class="pill" style="background:var(--lime); color:var(--ink); font-size:24px; padding: 12px 28px;">spring volume</span>
      <span class="pill" style="background:var(--butter); color:var(--ink); font-size:24px; padding: 12px 28px;">colophon</span>
    </div>

    <div class="grid">
      <div class="col">
        <h6>Editorial</h6>
        <p>A. Placeholder</p>
        <p>B. Placeholder</p>
        <p>C. Placeholder</p>
      </div>
      <div class="col">
        <h6>Type</h6>
        <p>Bricolage Grotesque</p>
        <p>Instrument Serif</p>
        <p>JetBrains Mono</p>
      </div>
      <div class="col">
        <h6>Printed by</h6>
        <p>Placeholder Press</p>
        <p>City &amp; State</p>
        <p>Recycled stock, 120gsm</p>
      </div>
      <div class="col">
        <h6>Correspondence</h6>
        <p>desk@placeholder.studio</p>
        <p>P.O. Box 0000</p>
        <p>Routing No. 04 / 26</p>
      </div>
    </div>
  </section>

</deck-stage>
</body>
</html>
