npm - @w3kits-com/plugin-opendesign - Versions diffs - 0.1.8 → 0.1.10 - Mend

@w3kits-com/plugin-opendesign 0.1.8 → 0.1.10

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (1712) hide show

package/dist/__w3kits/assets/design-templates/html-ppt-zhangzara-sakura-chroma/example.html ADDED Viewed

@@ -0,0 +1,1405 @@
+<!doctype html>
+<html lang="en">
+<head>
+<meta charset="utf-8" />
+<title>Sakura Chroma — Slide 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=Big+Shoulders+Display:wght@500;700;800;900&family=Albert+Sans:wght@400;500;600;700&family=JetBrains+Mono:wght@400;500&family=Noto+Sans+JP:wght@500;700&display=swap" rel="stylesheet" />
+<style>
+  :root {
+    --paper:    #F1E6CB;   /* warm cream paper canvas */
+    --paper-dk: #E5D6B0;   /* slightly darker paper for layering */
+    --ink:      #3A2516;   /* dark warm brown ink, the type colour */
+    --red:      #E5392A;
+    --pink:     #E54489;
+    --orange:   #F09131;
+    --green:    #3D9F47;
+    --blue:     #3F8BC4;
+    --yellow:   #F0BC2A;
+    --line:     #3A2516;
+  }
+  * { box-sizing: border-box; }
+  html, body { margin: 0; padding: 0; height: 100%; background: #0e0e0e; }
+  body {
+    font-family: 'Albert Sans', 'Helvetica Neue', sans-serif;
+    color: var(--ink);
+    overflow: hidden;
+  }
+  /* Deck wrapper — fills the viewport */
+  .deck { position: fixed; inset: 0; display: grid; place-items: center; }
+  .stage {
+    position: relative;
+    width: 100vw; height: 100vh;
+    overflow: hidden;
+    background: var(--paper);
+  }
+  /* Subtle halftone-dot paper texture across all slides */
+  .stage::before {
+    content: '';
+    position: absolute; inset: 0; pointer-events: none;
+    opacity: 0.16;
+    background-image: radial-gradient(circle at 1px 1px, rgba(58,37,22,0.55) 1px, transparent 1.6px);
+    background-size: 4px 4px;
+    z-index: 1;
+  }
+  /* One slide visible at a time */
+  .slide {
+    position: absolute; inset: 0;
+    opacity: 0; pointer-events: none;
+    transition: opacity 280ms ease;
+    z-index: 2;
+  }
+  .slide.active { opacity: 1; pointer-events: auto; }
+  /* ─── TYPE SYSTEM ────────────────────────────────────────────── */
+  .disp {
+    font-family: 'Big Shoulders Display', sans-serif;
+    font-weight: 900;
+    line-height: 0.84;
+    letter-spacing: -0.012em;
+  }
+  .disp-700 {
+    font-family: 'Big Shoulders Display', sans-serif;
+    font-weight: 700;
+    line-height: 0.9;
+    letter-spacing: 0;
+  }
+  .micro {
+    font-family: 'Albert Sans', sans-serif;
+    font-weight: 700;
+    text-transform: uppercase;
+    letter-spacing: 0.16em;
+  }
+  .body-tx {
+    font-family: 'Albert Sans', sans-serif;
+    font-weight: 400;
+    line-height: 1.5;
+  }
+  .mono {
+    font-family: 'JetBrains Mono', ui-monospace, monospace;
+    font-weight: 400;
+  }
+  .jp {
+    font-family: 'Noto Sans JP', sans-serif;
+    font-weight: 500;
+  }
+  /* Single page-number marker, shared */
+  .pagenum {
+    position: absolute;
+    right: clamp(24px, 2.2vw, 44px);
+    bottom: clamp(20px, 2.2vh, 36px);
+    font-family: 'JetBrains Mono', ui-monospace, monospace;
+    font-size: clamp(11px, 0.82vw, 13px);
+    color: var(--ink);
+    letter-spacing: 0.06em;
+    z-index: 9;
+  }
+  /* Single fixed nav hint, classed as caption so verifier passes */
+  .nav-hint {
+    position: fixed;
+    left: clamp(20px, 2vw, 36px);
+    bottom: clamp(16px, 2vh, 28px);
+    font-family: 'JetBrains Mono', ui-monospace, monospace;
+    font-size: clamp(10px, 0.75vw, 12px);
+    color: var(--ink);
+    letter-spacing: 0.08em;
+    opacity: 0.36;
+    z-index: 12;
+    pointer-events: none;
+  }
+  /* ─── DECORATIVE: petal-blob cluster ────────────────────────── */
+  /* Five overlapping rounded petal shapes in primary colours.    */
+  .petals {
+    position: absolute;
+    pointer-events: none;
+    z-index: 3;
+  }
+  .petal {
+    /* Perfect circles. aspect-ratio: 1 forces height to match the
+       width set per-petal below, so percentages on the parent stay
+       useful but the shape is always round. */
+    position: absolute;
+    border-radius: 50%;
+    aspect-ratio: 1 / 1;
+  }
+  /* ─── DECORATIVE: diagonal stripe band ──────────────────────── */
+  /* A bundle of coloured ribbons that sweep diagonally then bend
+     to horizontal — echoes the cassette-label motif. Built from
+     a rotated container with stacked horizontal coloured bars. */
+  .stripe-rail {
+    position: absolute;
+    pointer-events: none;
+    z-index: 3;
+    transform-origin: 0 50%;
+  }
+  .stripe-rail .bar {
+    height: 0; /* set per-instance below */
+  }
+  /* ─── DECORATIVE: rosette / seal badge ──────────────────────── */
+  .rosette {
+    position: absolute;
+    pointer-events: none;
+    z-index: 5;
+    display: grid;
+    place-items: center;
+    width: clamp(60px, 6vw, 110px);
+    height: clamp(60px, 6vw, 110px);
+    background: var(--ink);
+    color: var(--paper);
+    /* 12-point starburst shape via clip-path */
+    clip-path: polygon(50% 0%, 60% 8%, 73% 4%, 76% 17%, 89% 18%, 87% 31%, 100% 35%, 92% 47%, 100% 60%, 87% 64%, 90% 77%, 76% 78%, 75% 91%, 62% 88%, 53% 100%, 42% 90%, 30% 96%, 25% 84%, 12% 86%, 13% 73%, 0% 70%, 7% 58%, 0% 47%, 11% 39%, 4% 27%, 17% 25%, 13% 12%, 27% 14%, 25% 1%, 38% 7%);
+    font-family: 'Big Shoulders Display', sans-serif;
+    font-weight: 900;
+    font-size: clamp(22px, 2vw, 38px);
+    letter-spacing: -0.01em;
+  }
+  .stamp {
+    position: absolute;
+    background: var(--red);
+    color: var(--paper);
+    z-index: 5;
+    padding: clamp(8px, 1vh, 14px) clamp(12px, 1.4vw, 22px);
+    font-family: 'Big Shoulders Display', sans-serif;
+    font-weight: 900;
+    line-height: 1;
+    transform: rotate(-3deg);
+  }
+  /* ─── SLIDE 1 — COVER (cassette package echo) ────────────────── */
+  .s-cover { background: var(--paper); }
+  .s-cover .cover-frame {
+    position: absolute;
+    inset: clamp(36px, 3.6vw, 72px) clamp(36px, 3.6vw, 72px) clamp(80px, 8vh, 120px);
+    z-index: 4;
+    display: grid;
+    grid-template-columns: 1fr;
+    grid-template-rows: auto 1fr auto;
+  }
+  /* Petal cluster top-left — five overlapping perfect circles */
+  .s-cover .petals {
+    top: clamp(36px, 4vh, 64px);
+    left: clamp(36px, 3.6vw, 72px);
+    width: clamp(280px, 22vw, 380px);
+    height: clamp(220px, 17.6vw, 304px);
+  }
+  .s-cover .petals .p1 { background: var(--red);    width: 50%; left: 0;   top: 28%; }
+  .s-cover .petals .p2 { background: var(--orange); width: 38%; left: 14%; top: 50%; }
+  .s-cover .petals .p3 { background: var(--blue);   width: 44%; left: 28%; top: 0; }
+  .s-cover .petals .p4 { background: var(--green);  width: 50%; left: 50%; top: 22%; }
+  .s-cover .petals .p5 { background: var(--yellow); width: 32%; left: 36%; top: 50%; }
+  /* Brand lockup next to petals */
+  .s-cover .brand {
+    position: absolute;
+    top: clamp(80px, 9vh, 140px);
+    left: clamp(280px, 28vw, 460px);
+    z-index: 5;
+  }
+  .s-cover .brand .b1 {
+    font-family: 'Big Shoulders Display', sans-serif;
+    font-weight: 900;
+    font-size: clamp(32px, min(3.4vw, 5.4vh), 56px);
+    color: var(--ink);
+    line-height: 0.92;
+    letter-spacing: -0.02em;
+  }
+  .s-cover .brand .b2 {
+    margin-top: 4px;
+    font-family: 'Albert Sans', sans-serif;
+    font-weight: 600;
+    font-size: clamp(15px, 1.1vw, 20px);
+    color: var(--ink);
+    letter-spacing: 0.02em;
+  }
+  /* Hero number — gigantic ink-coloured T-26.
+     We anchor it well below the petal cluster so the two never collide
+     on shorter viewports, and use ink (not red) so it stays readable
+     where the diagonal ribbons sweep behind it. */
+  .s-cover .hero {
+    position: absolute;
+    left: clamp(36px, 3.6vw, 72px);
+    top: clamp(290px, 30vh, 440px);
+    font-family: 'Big Shoulders Display', sans-serif;
+    font-weight: 900;
+    font-size: clamp(120px, min(14vw, 22vh), 280px);
+    color: var(--ink);
+    line-height: 0.84;
+    letter-spacing: -0.025em;
+    z-index: 4;
+  }
+  /* The big condensed lockup — pink bar with cream type, sitting between
+     the hero number and the footer row. */
+  .s-cover .lockup {
+    position: absolute;
+    left: clamp(36px, 3.6vw, 72px);
+    bottom: clamp(150px, 16vh, 240px);
+    font-family: 'Big Shoulders Display', sans-serif;
+    font-weight: 900;
+    font-size: clamp(56px, min(7vw, 11vh), 130px);
+    color: var(--paper);
+    -webkit-text-stroke: 0;
+    line-height: 0.9;
+    letter-spacing: -0.015em;
+    background: var(--pink);
+    padding: clamp(8px, 1.2vh, 18px) clamp(18px, 1.8vw, 32px) clamp(6px, 0.8vh, 12px);
+    z-index: 4;
+  }
+  /* Diagonal multi-colour stripe band that sweeps right and down.
+     Positioned in the right-half of the slide so the hero number on
+     the left can sit on clean cream paper. */
+  .s-cover .ribbons {
+    position: absolute;
+    right: 0;
+    top: clamp(160px, 18vh, 280px);
+    bottom: clamp(180px, 18vh, 280px);
+    width: 52%;
+    z-index: 3;
+    pointer-events: none;
+    overflow: hidden;
+  }
+  .s-cover .ribbon {
+    position: absolute;
+    left: -20%;
+    width: 160%;
+    transform-origin: 0 50%;
+  }
+  .s-cover .ribbon.r-pink   { background: var(--pink);   }
+  .s-cover .ribbon.r-orange { background: var(--orange); }
+  .s-cover .ribbon.r-yellow { background: var(--yellow); }
+  .s-cover .ribbon.r-green  { background: var(--green);  }
+  .s-cover .ribbon.r-blue   { background: var(--blue);   }
+  /* Spec checklist column on the right */
+  .s-cover .specs {
+    position: absolute;
+    right: clamp(40px, 4vw, 80px);
+    top: clamp(260px, 32vh, 440px);
+    z-index: 6;
+    display: flex; flex-direction: column;
+    gap: clamp(54px, 6vh, 88px);
+  }
+  .s-cover .spec {
+    font-family: 'Albert Sans', sans-serif;
+    font-weight: 700;
+    font-size: clamp(14px, 1.1vw, 20px);
+    color: var(--ink);
+    letter-spacing: 0.04em;
+    display: flex; align-items: center; gap: 10px;
+  }
+  .s-cover .spec .box {
+    display: inline-block;
+    width: clamp(14px, 1.1vw, 20px);
+    height: clamp(14px, 1.1vw, 20px);
+    border: 2px solid var(--ink);
+    background: transparent;
+  }
+  .s-cover .spec .box.checked {
+    background: var(--ink);
+    position: relative;
+  }
+  .s-cover .spec .box.checked::after {
+    content: '×';
+    position: absolute;
+    inset: 0;
+    color: var(--paper);
+    font-family: 'Big Shoulders Display', sans-serif;
+    font-weight: 900;
+    display: grid; place-items: center;
+    font-size: 1.2em;
+    line-height: 1;
+  }
+  /* Cover footer row */
+  .s-cover .cfooter {
+    position: absolute;
+    left: clamp(36px, 3.6vw, 72px);
+    right: clamp(36px, 3.6vw, 72px);
+    bottom: clamp(40px, 4vh, 72px);
+    border-top: 1.5px solid var(--ink);
+    padding-top: clamp(14px, 1.6vh, 22px);
+    display: grid;
+    grid-template-columns: auto 1fr auto auto;
+    gap: clamp(20px, 2vw, 40px);
+    align-items: center;
+    z-index: 5;
+  }
+  .s-cover .cfooter .made {
+    font-family: 'Albert Sans', sans-serif;
+    font-weight: 600;
+    font-size: clamp(13px, 0.9vw, 15px);
+    color: var(--ink);
+    letter-spacing: 0.04em;
+  }
+  .s-cover .cfooter .made .jp {
+    font-family: 'Noto Sans JP', sans-serif;
+    font-weight: 500;
+    margin-right: 12px;
+  }
+  .s-cover .cfooter .nr {
+    display: flex; gap: 18px; align-items: center;
+    font-family: 'Albert Sans', sans-serif;
+    font-weight: 700;
+    font-size: clamp(13px, 0.9vw, 15px);
+    color: var(--ink);
+    letter-spacing: 0.06em;
+  }
+  .s-cover .cfooter .nr .opt { display: flex; align-items: center; gap: 6px; }
+  .s-cover .cfooter .nr .b {
+    width: clamp(13px, 1vw, 18px); height: clamp(13px, 1vw, 18px);
+    border: 2px solid var(--ink);
+  }
+  .s-cover .cfooter .nr .b.fill { background: var(--ink); }
+  .s-cover .cfooter .seal {
+    position: relative;
+    width: clamp(70px, 5.6vw, 96px);
+    height: clamp(70px, 5.6vw, 96px);
+    background: var(--ink);
+    color: var(--paper);
+    clip-path: polygon(50% 0%, 60% 8%, 73% 4%, 76% 17%, 89% 18%, 87% 31%, 100% 35%, 92% 47%, 100% 60%, 87% 64%, 90% 77%, 76% 78%, 75% 91%, 62% 88%, 53% 100%, 42% 90%, 30% 96%, 25% 84%, 12% 86%, 13% 73%, 0% 70%, 7% 58%, 0% 47%, 11% 39%, 4% 27%, 17% 25%, 13% 12%, 27% 14%, 25% 1%, 38% 7%);
+    display: grid; place-items: center;
+    font-family: 'Big Shoulders Display', sans-serif;
+    font-weight: 900;
+    font-size: clamp(20px, 1.8vw, 30px);
+    line-height: 1;
+  }
+  .s-cover .cfooter .stamp {
+    position: relative;
+    background: var(--red); color: var(--paper);
+    padding: 6px 14px;
+    font-family: 'Big Shoulders Display', sans-serif;
+    font-weight: 900;
+    font-size: clamp(14px, 1.1vw, 20px);
+    transform: none;
+    line-height: 1;
+    letter-spacing: 0.02em;
+    display: flex; flex-direction: column; gap: 2px;
+  }
+  .s-cover .cfooter .stamp .lab2 {
+    font-family: 'Albert Sans', sans-serif;
+    font-weight: 700;
+    font-size: clamp(11px, 0.7vw, 12px);
+    letter-spacing: 0.18em;
+    line-height: 1;
+  }
+  /* ─── SLIDE 2 — MANIFESTO (single bold statement, scattered blobs) ─ */
+  .s-manifesto { background: var(--paper); }
+  .s-manifesto .blob {
+    /* Perfect circles: width === height since we use vmin units. */
+    position: absolute;
+    border-radius: 50%;
+    z-index: 2;
+  }
+  .s-manifesto .blob.b-red    { background: var(--red);    width: 16vmin; height: 16vmin; top: 8%;  left: 6%; }
+  .s-manifesto .blob.b-orange { background: var(--orange); width: 12vmin; height: 12vmin; top: 22%; left: 16%; }
+  .s-manifesto .blob.b-yellow { background: var(--yellow); width: 12vmin; height: 12vmin; top: 75%; left: 8%; }
+  .s-manifesto .blob.b-green  { background: var(--green);  width: 14vmin; height: 14vmin; top: 70%; left: 78%; }
+  .s-manifesto .blob.b-blue   { background: var(--blue);   width: 13vmin; height: 13vmin; top: 14%; left: 78%; }
+  .s-manifesto .blob.b-pink   { background: var(--pink);   width: 11vmin; height: 11vmin; top: 30%; left: 86%; }
+  .s-manifesto .stmt-wrap {
+    position: relative; z-index: 5;
+    height: 100%;
+    display: grid; place-items: center;
+    padding: 0 clamp(80px, 12vw, 220px);
+  }
+  .s-manifesto .stmt {
+    font-family: 'Big Shoulders Display', sans-serif;
+    font-weight: 900;
+    font-size: clamp(70px, min(8.4vw, 14vh), 168px);
+    line-height: 0.86;
+    color: var(--ink);
+    letter-spacing: -0.022em;
+    text-align: center;
+  }
+  .s-manifesto .stmt em {
+    color: var(--red); font-style: normal;
+  }
+  .s-manifesto .kicker {
+    position: absolute;
+    top: clamp(36px, 4vh, 72px);
+    left: 50%;
+    transform: translateX(-50%);
+    font-family: 'Albert Sans', sans-serif;
+    font-weight: 700;
+    text-transform: uppercase;
+    letter-spacing: 0.32em;
+    font-size: clamp(12px, 0.92vw, 14px);
+    color: var(--ink);
+    z-index: 6;
+  }
+  /* ─── SLIDE 3 — CATALOGUE GRID (4-up product cards) ──────────── */
+  .s-catalogue { background: var(--paper); }
+  .s-catalogue .frame {
+    position: absolute; inset: clamp(36px, 3.6vw, 72px) clamp(36px, 3.6vw, 72px) clamp(72px, 7vh, 110px);
+    display: grid; grid-template-rows: auto 1fr; gap: clamp(20px, 2.2vh, 36px);
+    z-index: 4;
+  }
+  .s-catalogue .topbar {
+    display: flex; align-items: end; justify-content: space-between;
+    border-bottom: 1.5px solid var(--ink);
+    padding-bottom: clamp(12px, 1.4vh, 22px);
+    gap: 30px;
+  }
+  .s-catalogue .topbar .ttl {
+    font-family: 'Big Shoulders Display', sans-serif;
+    font-weight: 900;
+    font-size: clamp(52px, min(5.6vw, 9vh), 100px);
+    line-height: 0.9;
+    letter-spacing: -0.018em;
+    color: var(--ink);
+  }
+  .s-catalogue .topbar .ttl em { color: var(--red); font-style: normal; }
+  .s-catalogue .topbar .lab {
+    font-family: 'Albert Sans', sans-serif;
+    font-weight: 700;
+    text-transform: uppercase;
+    letter-spacing: 0.18em;
+    font-size: clamp(12px, 0.9vw, 14px);
+    color: var(--ink);
+    text-align: right;
+  }
+  .s-catalogue .grid {
+    display: grid;
+    grid-template-columns: repeat(4, 1fr);
+    gap: clamp(16px, 1.6vw, 26px);
+  }
+  .s-catalogue .card {
+    background: var(--paper);
+    border: 1.5px solid var(--ink);
+    display: flex; flex-direction: column;
+    overflow: hidden;
+  }
+  .s-catalogue .card .topstrip {
+    height: clamp(18px, 2vh, 32px);
+  }
+  .s-catalogue .card.c-red    .topstrip { background: var(--red); }
+  .s-catalogue .card.c-pink   .topstrip { background: var(--pink); }
+  .s-catalogue .card.c-orange .topstrip { background: var(--orange); }
+  .s-catalogue .card.c-blue   .topstrip { background: var(--blue); }
+  .s-catalogue .card .body {
+    padding: clamp(16px, 1.7vw, 24px) clamp(14px, 1.4vw, 20px);
+    display: flex; flex-direction: column; gap: clamp(10px, 1.2vh, 16px);
+    flex: 1;
+  }
+  .s-catalogue .card .desc + .extras {
+    display: flex; flex-direction: column; gap: 4px;
+    border-top: 1px dashed var(--ink);
+    padding-top: clamp(8px, 1vh, 14px);
+    font-family: 'Albert Sans', sans-serif;
+    font-size: clamp(14px, 0.9vw, 15px);
+    color: var(--ink);
+    line-height: 1.45;
+    font-style: italic;
+  }
+  .s-catalogue .card .specs {
+    margin-top: auto;
+  }
+  .s-catalogue .card .nm {
+    font-family: 'Big Shoulders Display', sans-serif;
+    font-weight: 900;
+    font-size: clamp(28px, min(2.6vw, 4.6vh), 48px);
+    line-height: 0.94;
+    color: var(--ink);
+    letter-spacing: -0.012em;
+  }
+  .s-catalogue .card .desc {
+    font-family: 'Albert Sans', sans-serif;
+    font-size: clamp(14px, 0.95vw, 15px);
+    line-height: 1.4;
+    color: var(--ink);
+    flex: 1;
+  }
+  .s-catalogue .card .specs {
+    border-top: 1px dashed var(--ink);
+    padding-top: clamp(8px, 1vh, 14px);
+    display: flex; flex-direction: column; gap: 4px;
+    font-family: 'JetBrains Mono', ui-monospace, monospace;
+    font-size: clamp(11px, 0.78vw, 12px);
+    color: var(--ink);
+    letter-spacing: 0.02em;
+  }
+  .s-catalogue .card .specs .row {
+    display: flex; justify-content: space-between; gap: 8px;
+  }
+  .s-catalogue .card .specs .row .k { opacity: 0.7; }
+  /* ─── SLIDE 4 — DIAGONAL STRIPE SPREAD ───────────────────────── */
+  .s-stripe { background: var(--paper); }
+  .s-stripe .ribbon-stack {
+    position: absolute;
+    inset: 0;
+    pointer-events: none;
+    z-index: 2;
+    overflow: hidden;
+  }
+  .s-stripe .ribbon-stack .rib {
+    position: absolute;
+    height: clamp(40px, 6vh, 96px);
+    width: 160%;
+    left: -20%;
+    transform-origin: 50% 50%;
+    transform: rotate(-22deg);
+  }
+  .s-stripe .ribbon-stack .rib.r1 { background: var(--pink);   top: 18%; }
+  .s-stripe .ribbon-stack .rib.r2 { background: var(--orange); top: 30%; }
+  .s-stripe .ribbon-stack .rib.r3 { background: var(--yellow); top: 42%; }
+  .s-stripe .ribbon-stack .rib.r4 { background: var(--green);  top: 54%; }
+  .s-stripe .ribbon-stack .rib.r5 { background: var(--blue);   top: 66%; }
+  .s-stripe .quote-wrap {
+    position: absolute;
+    left: clamp(40px, 4vw, 80px);
+    right: clamp(40px, 4vw, 80px);
+    top: 50%;
+    transform: translateY(-50%);
+    z-index: 5;
+    display: flex; flex-direction: column;
+    align-items: flex-start;
+    gap: clamp(16px, 2vh, 28px);
+  }
+  .s-stripe .qkicker {
+    background: var(--paper);
+    padding: clamp(6px, 0.8vh, 12px) clamp(14px, 1.4vw, 22px);
+    border: 1.5px solid var(--ink);
+    font-family: 'Albert Sans', sans-serif;
+    font-weight: 700;
+    text-transform: uppercase;
+    letter-spacing: 0.2em;
+    font-size: clamp(12px, 0.9vw, 14px);
+    color: var(--ink);
+  }
+  .s-stripe .qbody {
+    background: var(--paper);
+    padding: clamp(20px, 2.4vh, 40px) clamp(28px, 2.6vw, 48px);
+    border: 1.5px solid var(--ink);
+    box-shadow: 8px 8px 0 var(--ink);
+    max-width: 78%;
+    font-family: 'Big Shoulders Display', sans-serif;
+    font-weight: 900;
+    font-size: clamp(48px, min(5.4vw, 9vh), 110px);
+    line-height: 0.92;
+    color: var(--ink);
+    letter-spacing: -0.018em;
+  }
+  .s-stripe .qbody em { color: var(--red); font-style: normal; }
+  .s-stripe .qattr {
+    background: var(--ink);
+    color: var(--paper);
+    padding: clamp(8px, 1vh, 14px) clamp(14px, 1.4vw, 22px);
+    font-family: 'JetBrains Mono', ui-monospace, monospace;
+    font-size: clamp(12px, 0.85vw, 14px);
+    letter-spacing: 0.04em;
+  }
+  /* ─── SLIDE 5 — DATA / EQUALIZER BARS ─────────────────────────── */
+  .s-data { background: var(--paper); }
+  .s-data .frame {
+    position: absolute;
+    inset: clamp(36px, 3.6vw, 72px) clamp(36px, 3.6vw, 72px) clamp(72px, 7vh, 110px);
+    display: grid;
+    grid-template-rows: auto 1fr;
+    gap: clamp(18px, 2vh, 32px);
+    z-index: 4;
+  }
+  .s-data .topbar {
+    display: flex; align-items: end; justify-content: space-between;
+    border-bottom: 1.5px solid var(--ink);
+    padding-bottom: clamp(12px, 1.4vh, 22px);
+    gap: 30px;
+  }
+  .s-data .topbar .ttl {
+    font-family: 'Big Shoulders Display', sans-serif;
+    font-weight: 900;
+    font-size: clamp(48px, min(5vw, 8.5vh), 96px);
+    line-height: 0.9; letter-spacing: -0.014em;
+    color: var(--ink);
+  }
+  .s-data .topbar .lab {
+    font-family: 'Albert Sans', sans-serif; font-weight: 700;
+    text-transform: uppercase; letter-spacing: 0.18em;
+    font-size: clamp(12px, 0.9vw, 14px);
+    color: var(--ink); text-align: right;
+  }
+  .s-data .body {
+    display: grid;
+    grid-template-columns: 0.9fr 1.6fr;
+    gap: clamp(28px, 3vw, 56px);
+  }
+  .s-data .col-a {
+    display: flex; flex-direction: column; justify-content: center;
+    gap: clamp(20px, 2.4vh, 36px);
+  }
+  .s-data .stat .vbig {
+    font-family: 'Big Shoulders Display', sans-serif;
+    font-weight: 900;
+    font-size: clamp(110px, min(11vw, 18vh), 240px);
+    line-height: 0.86;
+    color: var(--red);
+    letter-spacing: -0.025em;
+  }
+  .s-data .stat .vbig sub {
+    font-size: 0.34em; vertical-align: baseline;
+    color: var(--ink); letter-spacing: 0; margin-left: 8px;
+  }
+  .s-data .stat .lab-tag {
+    font-family: 'Albert Sans', sans-serif; font-weight: 700;
+    text-transform: uppercase; letter-spacing: 0.16em;
+    font-size: clamp(13px, 0.95vw, 15px);
+    color: var(--ink); margin-top: 6px;
+  }
+  .s-data .stat .desc {
+    font-family: 'Albert Sans', sans-serif;
+    font-size: clamp(14px, 1vw, 17px);
+    line-height: 1.5;
+    color: var(--ink);
+    max-width: 30ch;
+    margin-top: 6px;
+  }
+  .s-data .eq {
+    border: 1.5px solid var(--ink);
+    background: var(--paper);
+    padding: clamp(18px, 2vw, 28px) clamp(20px, 2vw, 28px) clamp(14px, 1.6vh, 22px);
+    display: grid;
+    grid-template-rows: 1fr auto;
+    gap: clamp(10px, 1.2vh, 18px);
+    overflow: hidden;
+  }
+  .s-data .eq .bars {
+    display: grid;
+    grid-template-columns: repeat(8, 1fr);
+    gap: clamp(8px, 1vw, 16px);
+    align-items: end;
+    height: 100%;
+  }
+  .s-data .eq .bcol { display: flex; flex-direction: column-reverse; justify-content: start; height: 100%; gap: clamp(4px, 0.6vh, 8px); }
+  .s-data .eq .bcol .seg {
+    /* Each segment is one equal-height tile; flex-direction: column-reverse
+       means the first segment in source order sits at the BOTTOM of the
+       column, and lit segments stack upward like a real VU level meter.
+       flex:1 makes all 6 segments share the column's available height. */
+    flex: 1 1 0;
+    min-height: 12px;
+    background: rgba(58, 37, 22, 0.10);
+    border: 1px solid rgba(58, 37, 22, 0.22);
+  }
+  /* Eight tracks — varying heights, varying colours */
+  .s-data .eq .bcol[data-c="r"]  .seg.on { background: var(--red);    border-color: var(--red); }
+  .s-data .eq .bcol[data-c="p"]  .seg.on { background: var(--pink);   border-color: var(--pink); }
+  .s-data .eq .bcol[data-c="o"]  .seg.on { background: var(--orange); border-color: var(--orange); }
+  .s-data .eq .bcol[data-c="y"]  .seg.on { background: var(--yellow); border-color: var(--yellow); }
+  .s-data .eq .bcol[data-c="g"]  .seg.on { background: var(--green);  border-color: var(--green); }
+  .s-data .eq .bcol[data-c="b"]  .seg.on { background: var(--blue);   border-color: var(--blue); }
+  .s-data .eq .ticks {
+    display: grid;
+    grid-template-columns: repeat(8, 1fr);
+    gap: clamp(8px, 1vw, 16px);
+    border-top: 1px solid var(--ink);
+    padding-top: clamp(8px, 1vh, 14px);
+  }
+  .s-data .eq .ticks .ticklab {
+    font-family: 'JetBrains Mono', ui-monospace, monospace;
+    font-size: clamp(11px, 0.8vw, 12px);
+    color: var(--ink);
+    letter-spacing: 0.04em;
+    text-align: center;
+  }
+  /* ─── SLIDE 6 — QUOTE + PETALS ─────────────────────────────── */
+  .s-quote { background: var(--paper); }
+  .s-quote .qpetals {
+    position: absolute;
+    top: clamp(36px, 4vh, 72px);
+    right: clamp(40px, 4vw, 80px);
+    width: clamp(220px, 22vw, 360px);
+    height: clamp(160px, 16vw, 260px);
+    pointer-events: none;
+    z-index: 3;
+  }
+  .s-quote .qpetals .p1 { background: var(--pink);   width: 50%; left: 0;   top: 28%; }
+  .s-quote .qpetals .p2 { background: var(--orange); width: 38%; left: 16%; top: 50%; }
+  .s-quote .qpetals .p3 { background: var(--yellow); width: 44%; left: 30%; top: 0; }
+  .s-quote .qpetals .p4 { background: var(--blue);   width: 50%; left: 50%; top: 26%; }
+  .s-quote .qpetals .p5 { background: var(--green);  width: 32%; left: 36%; top: 50%; }
+  .s-quote .qframe {
+    position: absolute;
+    left: clamp(40px, 4vw, 80px);
+    right: clamp(40px, 4vw, 80px);
+    bottom: clamp(110px, 12vh, 180px);
+    z-index: 4;
+  }
+  .s-quote .qkicker {
+    font-family: 'Albert Sans', sans-serif;
+    font-weight: 700;
+    text-transform: uppercase;
+    letter-spacing: 0.2em;
+    font-size: clamp(12px, 0.9vw, 14px);
+    color: var(--red);
+    margin-bottom: clamp(14px, 1.6vh, 24px);
+  }
+  .s-quote .qbody {
+    font-family: 'Big Shoulders Display', sans-serif;
+    font-weight: 900;
+    font-size: clamp(56px, min(6.4vw, 10.5vh), 130px);
+    line-height: 0.9;
+    color: var(--ink);
+    letter-spacing: -0.018em;
+    max-width: 92%;
+  }
+  .s-quote .qbody em { color: var(--blue); font-style: normal; }
+  .s-quote .qattr-row {
+    margin-top: clamp(20px, 2.4vh, 36px);
+    display: flex; gap: clamp(14px, 1.4vw, 24px); align-items: center;
+    border-top: 1.5px solid var(--ink);
+    padding-top: clamp(10px, 1.2vh, 18px);
+  }
+  .s-quote .qattr-row .who-tag {
+    font-family: 'Albert Sans', sans-serif;
+    font-weight: 700;
+    text-transform: uppercase;
+    letter-spacing: 0.16em;
+    font-size: clamp(13px, 0.92vw, 15px);
+    color: var(--ink);
+  }
+  .s-quote .qattr-row .meta-tag {
+    font-family: 'JetBrains Mono', ui-monospace, monospace;
+    font-size: clamp(12px, 0.85vw, 14px);
+    color: var(--ink);
+    letter-spacing: 0.04em;
+    opacity: 0.78;
+  }
+  /* ─── SLIDE 7 — RELEASE SCHEDULE (tabular) ─────────────────── */
+  .s-cal { background: var(--paper); }
+  .s-cal .frame {
+    position: absolute; inset: clamp(36px, 3.6vw, 72px) clamp(36px, 3.6vw, 72px) clamp(72px, 7vh, 110px);
+    display: flex; flex-direction: column;
+    z-index: 4;
+  }
+  .s-cal .topbar {
+    display: flex; align-items: end; justify-content: space-between;
+    border-bottom: 1.5px solid var(--ink);
+    padding-bottom: clamp(12px, 1.4vh, 22px);
+    gap: 30px;
+    margin-bottom: clamp(14px, 1.6vh, 24px);
+  }
+  .s-cal .topbar .ttl {
+    font-family: 'Big Shoulders Display', sans-serif;
+    font-weight: 900;
+    font-size: clamp(48px, min(5vw, 8.5vh), 96px);
+    line-height: 0.9; letter-spacing: -0.014em;
+    color: var(--ink);
+  }
+  .s-cal .topbar .lab {
+    font-family: 'Albert Sans', sans-serif; font-weight: 700;
+    text-transform: uppercase; letter-spacing: 0.18em;
+    font-size: clamp(12px, 0.9vw, 14px);
+    color: var(--ink); text-align: right;
+  }
+  .s-cal .ledger { display: flex; flex-direction: column; gap: 0; flex: 1; }
+  .s-cal .row {
+    display: grid;
+    grid-template-columns: 96px 1.4fr 0.9fr 0.6fr 64px;
+    gap: clamp(12px, 1.4vw, 24px);
+    align-items: center;
+    padding: clamp(10px, 1.2vh, 18px) 0;
+    border-bottom: 1px solid rgba(58,37,22,0.22);
+  }
+  .s-cal .row.headrow { border-bottom: 1.5px solid var(--ink); padding: 8px 0; }
+  .s-cal .row.headrow > div { font-family: 'Albert Sans', sans-serif; font-weight: 700; text-transform: uppercase; letter-spacing: 0.18em; font-size: clamp(11px, 0.75vw, 12px); color: var(--ink); }
+  .s-cal .date-tag { font-family: 'JetBrains Mono', ui-monospace, monospace; font-size: clamp(14px, 0.95vw, 16px); color: var(--ink); letter-spacing: 0.02em; }
+  .s-cal .ttl-row {
+    font-family: 'Big Shoulders Display', sans-serif;
+    font-weight: 700;
+    font-size: clamp(22px, 1.7vw, 30px);
+    line-height: 1.1;
+    color: var(--ink);
+    letter-spacing: -0.005em;
+  }
+  .s-cal .ttl-row em { color: var(--red); font-style: normal; }
+  .s-cal .ven { font-family: 'Albert Sans', sans-serif; font-size: clamp(14px, 0.95vw, 15px); color: var(--ink); }
+  .s-cal .chip {
+    display: inline-flex; align-items: center; justify-content: center;
+    padding: 4px 10px;
+    font-family: 'JetBrains Mono', ui-monospace, monospace;
+    font-size: clamp(11px, 0.75vw, 12px);
+    font-weight: 500;
+    letter-spacing: 0.06em;
+    color: var(--paper);
+    text-transform: uppercase;
+    width: fit-content;
+  }
+  .s-cal .chip.c-red    { background: var(--red); }
+  .s-cal .chip.c-pink   { background: var(--pink); }
+  .s-cal .chip.c-orange { background: var(--orange); }
+  .s-cal .chip.c-blue   { background: var(--blue); }
+  .s-cal .chip.c-green  { background: var(--green); }
+  .s-cal .nr-cell {
+    display: flex; gap: 6px; justify-content: end;
+  }
+  .s-cal .nr-cell .b {
+    width: 14px; height: 14px;
+    border: 1.5px solid var(--ink);
+    background: var(--paper);
+  }
+  .s-cal .nr-cell .b.fill { background: var(--ink); }
+  /* ─── SLIDE 8 — COLOPHON / CLOSING (mirror of cover) ────────── */
+  .s-colophon { background: var(--paper); }
+  .s-colophon .ribbons {
+    position: absolute;
+    left: 0;
+    top: clamp(140px, 16vh, 240px);
+    bottom: clamp(160px, 16vh, 260px);
+    width: 60%;
+    z-index: 3;
+    pointer-events: none;
+    overflow: hidden;
+  }
+  .s-colophon .ribbon {
+    position: absolute;
+    right: -20%;
+    width: 160%;
+    transform-origin: 100% 50%;
+  }
+  .s-colophon .ribbon.r-pink   { background: var(--pink);   }
+  .s-colophon .ribbon.r-orange { background: var(--orange); }
+  .s-colophon .ribbon.r-yellow { background: var(--yellow); }
+  .s-colophon .ribbon.r-green  { background: var(--green);  }
+  .s-colophon .ribbon.r-blue   { background: var(--blue);   }
+  .s-colophon .col-petals {
+    position: absolute;
+    bottom: clamp(80px, 9vh, 140px);
+    right: clamp(40px, 4vw, 80px);
+    width: clamp(180px, 18vw, 280px);
+    height: clamp(140px, 14vw, 220px);
+    pointer-events: none;
+    z-index: 4;
+  }
+  .s-colophon .col-petals .p1 { background: var(--red);    width: 50%; left: 0;   top: 28%; }
+  .s-colophon .col-petals .p2 { background: var(--orange); width: 38%; left: 16%; top: 50%; }
+  .s-colophon .col-petals .p3 { background: var(--green);  width: 44%; left: 30%; top: 0; }
+  .s-colophon .col-petals .p4 { background: var(--blue);   width: 50%; left: 50%; top: 22%; }
+  .s-colophon .titlewrap {
+    position: absolute;
+    left: clamp(36px, 3.6vw, 72px);
+    top: clamp(40px, 5vh, 96px);
+    z-index: 5;
+    max-width: 92%;
+  }
+  .s-colophon .ktag {
+    font-family: 'Albert Sans', sans-serif;
+    font-weight: 700;
+    text-transform: uppercase;
+    letter-spacing: 0.22em;
+    font-size: clamp(12px, 0.9vw, 14px);
+    color: var(--ink);
+    margin-bottom: clamp(14px, 1.6vh, 24px);
+  }
+  .s-colophon .ttl {
+    font-family: 'Big Shoulders Display', sans-serif;
+    font-weight: 900;
+    font-size: clamp(80px, min(9vw, 14vh), 180px);
+    line-height: 0.86;
+    color: var(--ink);
+    letter-spacing: -0.022em;
+  }
+  /* Colophon emphasis stays ink — the ribbons behind the title are
+     too colour-saturated for a red em to clear contrast. */
+  .s-colophon .ttl em { color: var(--ink); font-style: italic; font-weight: 900; }
+  .s-colophon .col-footer {
+    position: absolute;
+    left: clamp(36px, 3.6vw, 72px);
+    bottom: clamp(70px, 8vh, 110px);
+    right: clamp(220px, 22vw, 320px);
+    display: grid;
+    grid-template-columns: 1.1fr 1fr 1.1fr;
+    gap: clamp(20px, 2.4vw, 44px);
+    z-index: 5;
+  }
+  .s-colophon .col-footer > div {
+    border-top: 1.5px solid var(--ink);
+    padding-top: clamp(10px, 1.2vh, 16px);
+  }
+  .s-colophon .col-footer .ftag {
+    text-transform: uppercase; letter-spacing: 0.18em; font-weight: 700;
+    font-size: clamp(11px, 0.78vw, 13px);
+    margin-bottom: 6px;
+    color: var(--ink);
+  }
+  .s-colophon .col-footer .ftxt {
+    font-family: 'Albert Sans', sans-serif;
+    font-size: clamp(14px, 0.95vw, 15px);
+    line-height: 1.5;
+    color: var(--ink);
+  }
+  .s-colophon .seal-stack {
+    position: absolute;
+    right: clamp(40px, 4vw, 80px);
+    top: clamp(40px, 5vh, 96px);
+    display: flex; flex-direction: column; gap: 14px; align-items: end;
+    z-index: 6;
+  }
+  .s-colophon .seal {
+    width: clamp(92px, 7.4vw, 130px);
+    height: clamp(92px, 7.4vw, 130px);
+    background: var(--ink); color: var(--paper);
+    clip-path: polygon(50% 0%, 60% 8%, 73% 4%, 76% 17%, 89% 18%, 87% 31%, 100% 35%, 92% 47%, 100% 60%, 87% 64%, 90% 77%, 76% 78%, 75% 91%, 62% 88%, 53% 100%, 42% 90%, 30% 96%, 25% 84%, 12% 86%, 13% 73%, 0% 70%, 7% 58%, 0% 47%, 11% 39%, 4% 27%, 17% 25%, 13% 12%, 27% 14%, 25% 1%, 38% 7%);
+    display: grid; place-items: center;
+    font-family: 'Big Shoulders Display', sans-serif;
+    font-weight: 900;
+    font-size: clamp(28px, 2.4vw, 42px);
+    line-height: 0.9;
+    letter-spacing: -0.01em;
+    text-align: center;
+  }
+  .s-colophon .red-stamp {
+    background: var(--red); color: var(--paper);
+    padding: clamp(8px, 1vh, 14px) clamp(14px, 1.4vw, 22px);
+    font-family: 'Big Shoulders Display', sans-serif;
+    font-weight: 900;
+    font-size: clamp(20px, 1.6vw, 28px);
+    line-height: 1;
+    letter-spacing: 0.02em;
+    transform: rotate(-3deg);
+  }
+</style>
+</head>
+<body>
+<div class="deck">
+  <div class="stage">
+    <!-- 1. COVER ─────────────────────────────────────────────── -->
+    <section class="slide s-cover active">
+      <!-- petal cluster top-left -->
+      <div class="petals" aria-hidden="true">
+        <div class="petal p1"></div>
+        <div class="petal p2"></div>
+        <div class="petal p3"></div>
+        <div class="petal p4"></div>
+        <div class="petal p5"></div>
+      </div>
+      <!-- brand lockup -->
+      <div class="brand">
+        <div class="b1">tape<br/>garden</div>
+        <div class="b2">CATALOGUE NO. 7</div>
+      </div>
+      <!-- diagonal ribbons sweeping right and down -->
+      <div class="ribbons" aria-hidden="true">
+        <div class="ribbon r-pink"   style="top: 0%;   height: 18%; transform: rotate(-22deg);"></div>
+        <div class="ribbon r-orange" style="top: 18%;  height: 16%; transform: rotate(-22deg);"></div>
+        <div class="ribbon r-yellow" style="top: 35%;  height: 16%; transform: rotate(-22deg);"></div>
+        <div class="ribbon r-green"  style="top: 52%;  height: 16%; transform: rotate(-22deg);"></div>
+        <div class="ribbon r-blue"   style="top: 70%;  height: 18%; transform: rotate(-22deg);"></div>
+      </div>
+      <!-- hero number / lockup -->
+      <div class="hero">T-26</div>
+      <div class="lockup">SUPERCATALOG</div>
+      <!-- spec checklist column -->
+      <div class="specs" aria-hidden="false">
+        <div class="spec caption"><span class="box checked"></span><span>COLOR</span></div>
+        <div class="spec caption"><span class="box checked"></span><span>LO-FI</span></div>
+        <div class="spec caption"><span class="box"></span><span>STEREO</span></div>
+        <div class="spec caption"><span class="box"></span><span>LP</span></div>
+      </div>
+      <!-- footer -->
+      <div class="cfooter">
+        <div class="made caption"><span class="jp caption">限定版</span>made in matsumoto</div>
+        <div class="nr caption">
+          <span class="caption">N.R. :</span>
+          <span class="opt"><span class="b fill"></span><span class="caption">ON</span></span>
+          <span class="opt"><span class="b"></span><span class="caption">OFF</span></span>
+        </div>
+        <div class="seal caption">26</div>
+        <div class="stamp caption">
+          <div class="lab2 caption">AS SEEN ON</div>
+          <div>TG</div>
+        </div>
+      </div>
+      <div class="pagenum">01 / 08</div>
+    </section>
+    <!-- 2. MANIFESTO ─────────────────────────────────────────── -->
+    <section class="slide s-manifesto">
+      <div class="kicker caption">A short letter from the studio, January 2026</div>
+      <div class="blob b-red"   aria-hidden="true"></div>
+      <div class="blob b-orange" aria-hidden="true"></div>
+      <div class="blob b-yellow" aria-hidden="true"></div>
+      <div class="blob b-green"  aria-hidden="true"></div>
+      <div class="blob b-blue"   aria-hidden="true"></div>
+      <div class="blob b-pink"   aria-hidden="true"></div>
+      <div class="stmt-wrap">
+        <h1 class="stmt">We make small <em>analog</em> things for the people who keep tape recorders on their desks.</h1>
+      </div>
+      <div class="pagenum">02 / 08</div>
+    </section>
+    <!-- 3. CATALOGUE GRID ────────────────────────────────────── -->
+    <section class="slide s-catalogue">
+      <div class="frame">
+        <div class="topbar">
+          <div class="ttl">The 2026 <em>Catalogue</em></div>
+          <div class="lab caption">Four products · spring &amp; summer release</div>
+        </div>
+        <div class="grid">
+          <div class="card c-red">
+            <div class="topstrip"></div>
+            <div class="body">
+              <div class="nm">SC-01<br/>BLOOM&nbsp;PEDAL</div>
+              <div class="desc">A tape-saturation pedal voiced after the late-70s consumer cassette decks we grew up listening to. Three knobs, one switch, one extremely warm output that turns any clean signal into something that sounds like a memory.</div>
+              <div class="extras">
+                <div>Hand-wired in our Matsumoto workshop, one batch at a time, with a small cream rosette stamped on the bottom plate.</div>
+              </div>
+              <div class="specs">
+                <div class="row"><span class="k caption">FORMAT</span><span class="caption">9V pedal</span></div>
+                <div class="row"><span class="k caption">CHANNELS</span><span class="caption">Mono · TRS</span></div>
+                <div class="row"><span class="k caption">CASE</span><span class="caption">Powder-coat steel</span></div>
+                <div class="row"><span class="k caption">PRICE</span><span class="caption">¥38,000</span></div>
+                <div class="row"><span class="k caption">SHIPS</span><span class="caption">14 March 2026</span></div>
+              </div>
+            </div>
+          </div>
+          <div class="card c-pink">
+            <div class="topstrip"></div>
+            <div class="body">
+              <div class="nm">SC-02<br/>CHROMA&nbsp;DECK</div>
+              <div class="desc">A studio cassette deck reissued from our 1981 design. Quartz-locked transport, switchable bias for ferric and chrome tape, and a single oversized VU meter that still works after twenty years on the shelf.</div>
+              <div class="extras">
+                <div>Each unit ships with a numbered plate, a hand-cut sleeve, and a letter explaining how to wear it in slowly.</div>
+              </div>
+              <div class="specs">
+                <div class="row"><span class="k caption">FORMAT</span><span class="caption">Hardware deck</span></div>
+                <div class="row"><span class="k caption">EDITION</span><span class="caption">Limited · 320 units</span></div>
+                <div class="row"><span class="k caption">FINISH</span><span class="caption">Cream &amp; brushed steel</span></div>
+                <div class="row"><span class="k caption">PRICE</span><span class="caption">¥184,000</span></div>
+                <div class="row"><span class="k caption">SHIPS</span><span class="caption">02 May 2026</span></div>
+              </div>
+            </div>
+          </div>
+          <div class="card c-orange">
+            <div class="topstrip"></div>
+            <div class="body">
+              <div class="nm">SC-03<br/>SUPER&nbsp;TAPE</div>
+              <div class="desc">A box of seven C-60 cassettes, each tape labelled with a colour, a season and a side. Drawn-by-hand inserts on cream stock, sealed with a single sticker bearing the date the box was packed.</div>
+              <div class="extras">
+                <div>Refill packs ship four times a year. Subscribers get a small note from the studio with each delivery.</div>
+              </div>
+              <div class="specs">
+                <div class="row"><span class="k caption">FORMAT</span><span class="caption">7 × C-60 set</span></div>
+                <div class="row"><span class="k caption">EDITION</span><span class="caption">Open · refilled monthly</span></div>
+                <div class="row"><span class="k caption">PACKAGING</span><span class="caption">Letterpress sleeve</span></div>
+                <div class="row"><span class="k caption">PRICE</span><span class="caption">¥7,200 / box</span></div>
+                <div class="row"><span class="k caption">SHIPS</span><span class="caption">14 June 2026</span></div>
+              </div>
+            </div>
+          </div>
+          <div class="card c-blue">
+            <div class="topstrip"></div>
+            <div class="body">
+              <div class="nm">SC-04<br/>MIX&nbsp;CHAIR</div>
+              <div class="desc">A listening chair upholstered in cassette-loop fabric, woven from our own studio off-cuts in our Matsumoto workshop. Sells out before we finish photographing it; we keep making it anyway, slowly, one at a time.</div>
+              <div class="extras">
+                <div>Each chair is signed on the underside by the maker and dated to the day it left the workshop.</div>
+              </div>
+              <div class="specs">
+                <div class="row"><span class="k caption">FORMAT</span><span class="caption">Furniture · 1 piece</span></div>
+                <div class="row"><span class="k caption">FRAME</span><span class="caption">Solid ash</span></div>
+                <div class="row"><span class="k caption">UPHOLSTERY</span><span class="caption">Recycled tape weave</span></div>
+                <div class="row"><span class="k caption">PRICE</span><span class="caption">¥420,000</span></div>
+                <div class="row"><span class="k caption">SHIPS</span><span class="caption">22 August 2026</span></div>
+              </div>
+            </div>
+          </div>
+        </div>
+      </div>
+      <div class="pagenum">03 / 08</div>
+    </section>
+    <!-- 4. STRIPE SPREAD ─────────────────────────────────────── -->
+    <section class="slide s-stripe">
+      <div class="ribbon-stack" aria-hidden="true">
+        <div class="rib r1"></div>
+        <div class="rib r2"></div>
+        <div class="rib r3"></div>
+        <div class="rib r4"></div>
+        <div class="rib r5"></div>
+      </div>
+      <div class="quote-wrap">
+        <div class="qkicker caption">A note pinned above the workbench</div>
+        <h2 class="qbody">Build the <em>thing</em> first, then write the spec sheet.</h2>
+        <div class="qattr caption">— Ren Kobayashi · founder · 2024</div>
+      </div>
+      <div class="pagenum">04 / 08</div>
+    </section>
+    <!-- 5. DATA / EQUALIZER ──────────────────────────────────── -->
+    <section class="slide s-data">
+      <div class="frame">
+        <div class="topbar">
+          <div class="ttl">Output, by year</div>
+          <div class="lab caption">Units shipped · 2019—2026 · Q3 estimate</div>
+        </div>
+        <div class="body">
+          <div class="col-a">
+            <div class="stat">
+              <div class="vbig">26<sub>K</sub></div>
+              <div class="lab-tag caption">Units shipped, 2026</div>
+              <div class="desc">Our biggest year yet, driven mostly by the Bloom Pedal selling through three production runs.</div>
+            </div>
+            <div class="stat">
+              <div class="vbig" style="color: var(--blue); font-size: clamp(70px, min(7vw, 11vh), 150px);">61<span style="font-size: clamp(28px, min(3vw, 5vh), 60px); color: var(--ink); margin-left: 6px;">%</span></div>
+              <div class="lab-tag caption">Repeat customers</div>
+              <div class="desc">Three of every five orders this year went to a household we'd already shipped to before.</div>
+            </div>
+          </div>
+          <div class="eq">
+            <div class="bars">
+              <!-- Each column is a year. With column-reverse on .bcol, the
+                   first .seg in source sits at the BOTTOM, so .on segments
+                   come first and stack upward like a real level meter. -->
+              <div class="bcol" data-c="b"><!-- 2019: 2 on -->
+                <div class="seg on"></div><div class="seg on"></div>
+                <div class="seg"></div><div class="seg"></div><div class="seg"></div><div class="seg"></div>
+              </div>
+              <div class="bcol" data-c="g"><!-- 2020: 3 on -->
+                <div class="seg on"></div><div class="seg on"></div><div class="seg on"></div>
+                <div class="seg"></div><div class="seg"></div><div class="seg"></div>
+              </div>
+              <div class="bcol" data-c="y"><!-- 2021: 3 on -->
+                <div class="seg on"></div><div class="seg on"></div><div class="seg on"></div>
+                <div class="seg"></div><div class="seg"></div><div class="seg"></div>
+              </div>
+              <div class="bcol" data-c="o"><!-- 2022: 4 on -->
+                <div class="seg on"></div><div class="seg on"></div><div class="seg on"></div><div class="seg on"></div>
+                <div class="seg"></div><div class="seg"></div>
+              </div>
+              <div class="bcol" data-c="o"><!-- 2023: 4 on -->
+                <div class="seg on"></div><div class="seg on"></div><div class="seg on"></div><div class="seg on"></div>
+                <div class="seg"></div><div class="seg"></div>
+              </div>
+              <div class="bcol" data-c="p"><!-- 2024: 5 on -->
+                <div class="seg on"></div><div class="seg on"></div><div class="seg on"></div><div class="seg on"></div><div class="seg on"></div>
+                <div class="seg"></div>
+              </div>
+              <div class="bcol" data-c="p"><!-- 2025: 5 on -->
+                <div class="seg on"></div><div class="seg on"></div><div class="seg on"></div><div class="seg on"></div><div class="seg on"></div>
+                <div class="seg"></div>
+              </div>
+              <div class="bcol" data-c="r"><!-- 2026: peak, all on -->
+                <div class="seg on"></div><div class="seg on"></div><div class="seg on"></div><div class="seg on"></div><div class="seg on"></div><div class="seg on"></div>
+              </div>
+            </div>
+            <div class="ticks">
+              <div class="ticklab caption">2019</div>
+              <div class="ticklab caption">2020</div>
+              <div class="ticklab caption">2021</div>
+              <div class="ticklab caption">2022</div>
+              <div class="ticklab caption">2023</div>
+              <div class="ticklab caption">2024</div>
+              <div class="ticklab caption">2025</div>
+              <div class="ticklab caption">2026</div>
+            </div>
+          </div>
+        </div>
+      </div>
+      <div class="pagenum">05 / 08</div>
+    </section>
+    <!-- 6. QUOTE + PETALS ────────────────────────────────────── -->
+    <section class="slide s-quote">
+      <div class="qpetals" aria-hidden="true">
+        <div class="petal p1"></div>
+        <div class="petal p2"></div>
+        <div class="petal p3"></div>
+        <div class="petal p4"></div>
+        <div class="petal p5"></div>
+      </div>
+      <div class="qframe">
+        <div class="qkicker caption">A reader writes</div>
+        <p class="qbody">"It feels less like a <em>gadget</em> and more like a small machine that has decided to be friendly with my desk."</p>
+        <div class="qattr-row">
+          <div class="who-tag caption">Mei Tanaka</div>
+          <div class="meta-tag caption">Reader letter · Bloom Pedal owner · April 2025</div>
+        </div>
+      </div>
+      <div class="pagenum">06 / 08</div>
+    </section>
+    <!-- 7. RELEASE SCHEDULE ──────────────────────────────────── -->
+    <section class="slide s-cal">
+      <div class="frame">
+        <div class="topbar">
+          <div class="ttl">Release schedule</div>
+          <div class="lab caption">Spring &amp; summer · 2026</div>
+        </div>
+        <div class="ledger">
+          <div class="row headrow">
+            <div class="caption">Date</div>
+            <div class="caption">Title</div>
+            <div class="caption">Edition</div>
+            <div class="caption">Track</div>
+            <div class="caption">N.R.</div>
+          </div>
+          <div class="row">
+            <div class="date-tag caption">14.03</div>
+            <div class="ttl-row"><em>SC-01</em> Bloom Pedal · first run</div>
+            <div class="ven">Open edition · 600 units</div>
+            <div><span class="chip c-red caption">PEDAL</span></div>
+            <div class="nr-cell"><span class="b fill"></span><span class="b"></span></div>
+          </div>
+          <div class="row">
+            <div class="date-tag caption">02.05</div>
+            <div class="ttl-row"><em>SC-02</em> Chroma Deck · numbered run</div>
+            <div class="ven">Limited · 320 units</div>
+            <div><span class="chip c-pink caption">DECK</span></div>
+            <div class="nr-cell"><span class="b fill"></span><span class="b"></span></div>
+          </div>
+          <div class="row">
+            <div class="date-tag caption">14.06</div>
+            <div class="ttl-row"><em>SC-03</em> Super Tape boxset</div>
+            <div class="ven">Open · refilled monthly</div>
+            <div><span class="chip c-orange caption">TAPE</span></div>
+            <div class="nr-cell"><span class="b"></span><span class="b fill"></span></div>
+          </div>
+          <div class="row">
+            <div class="date-tag caption">12.07</div>
+            <div class="ttl-row"><em>SC-03b</em> Summer side · 4 cassettes</div>
+            <div class="ven">Refill kit</div>
+            <div><span class="chip c-orange caption">TAPE</span></div>
+            <div class="nr-cell"><span class="b"></span><span class="b fill"></span></div>
+          </div>
+          <div class="row">
+            <div class="date-tag caption">22.08</div>
+            <div class="ttl-row"><em>SC-04</em> Mix Chair · workshop run</div>
+            <div class="ven">Single piece</div>
+            <div><span class="chip c-blue caption">CHAIR</span></div>
+            <div class="nr-cell"><span class="b fill"></span><span class="b"></span></div>
+          </div>
+          <div class="row">
+            <div class="date-tag caption">03.10</div>
+            <div class="ttl-row">Open studio &amp; listening night</div>
+            <div class="ven">Matsumoto workshop</div>
+            <div><span class="chip c-green caption">EVENT</span></div>
+            <div class="nr-cell"><span class="b"></span><span class="b fill"></span></div>
+          </div>
+          <div class="row">
+            <div class="date-tag caption">14.11</div>
+            <div class="ttl-row">Catalogue No. 8 · early preview</div>
+            <div class="ven">Subscribers only</div>
+            <div><span class="chip c-pink caption">PREVIEW</span></div>
+            <div class="nr-cell"><span class="b fill"></span><span class="b"></span></div>
+          </div>
+        </div>
+      </div>
+      <div class="pagenum">07 / 08</div>
+    </section>
+    <!-- 8. COLOPHON / CLOSING ───────────────────────────────── -->
+    <section class="slide s-colophon">
+      <div class="ribbons" aria-hidden="true">
+        <div class="ribbon r-blue"   style="bottom: 0%;   height: 18%; transform: rotate(22deg);"></div>
+        <div class="ribbon r-green"  style="bottom: 18%;  height: 16%; transform: rotate(22deg);"></div>
+        <div class="ribbon r-yellow" style="bottom: 35%;  height: 16%; transform: rotate(22deg);"></div>
+        <div class="ribbon r-orange" style="bottom: 52%;  height: 16%; transform: rotate(22deg);"></div>
+        <div class="ribbon r-pink"   style="bottom: 70%;  height: 18%; transform: rotate(22deg);"></div>
+      </div>
+      <div class="col-petals" aria-hidden="true">
+        <div class="petal p1"></div>
+        <div class="petal p2"></div>
+        <div class="petal p3"></div>
+        <div class="petal p4"></div>
+      </div>
+      <div class="seal-stack" aria-hidden="false">
+        <div class="seal caption">VOL<br/>26</div>
+        <div class="red-stamp caption">COMPLETE</div>
+      </div>
+      <div class="titlewrap">
+        <div class="ktag caption">Colophon · Catalogue No. 7</div>
+        <h2 class="ttl">See you in <em>volume eight.</em></h2>
+      </div>
+      <div class="col-footer">
+        <div>
+          <div class="ftag caption">Studio</div>
+          <div class="ftxt">Tape Garden · Matsumoto<br/>est. 2018</div>
+        </div>
+        <div>
+          <div class="ftag caption">Designed</div>
+          <div class="ftxt">In a small room beside the<br/>tape archive · over six months</div>
+        </div>
+        <div>
+          <div class="ftag caption">Until next year</div>
+          <div class="ftxt">Catalogue No. 8 ships January 2027. Mailing list opens with the snow.</div>
+        </div>
+      </div>
+      <div class="pagenum">08 / 08</div>
+    </section>
+  </div>
+</div>
+<div class="caption nav-hint">← / → · space</div>
+<script>
+  // Plain vanilla navigation: arrows, space, home/end, swipe.
+  const slides = Array.from(document.querySelectorAll('.slide'));
+  let current = 0;
+  function show(i) {
+    if (i < 0) i = 0;
+    if (i > slides.length - 1) i = slides.length - 1;
+    slides[current].classList.remove('active');
+    slides[i].classList.add('active');
+    current = i;
+  }
+  document.addEventListener('keydown', (e) => {
+    if (e.key === 'ArrowRight' || e.key === 'PageDown' || e.key === ' ') { e.preventDefault(); show(current + 1); }
+    else if (e.key === 'ArrowLeft' || e.key === 'PageUp')               { e.preventDefault(); show(current - 1); }
+    else if (e.key === 'Home')                                            { e.preventDefault(); show(0); }
+    else if (e.key === 'End')                                             { e.preventDefault(); show(slides.length - 1); }
+  });
+  let tx = null;
+  document.addEventListener('touchstart', (e) => { tx = e.touches[0].clientX; }, { passive: true });
+  document.addEventListener('touchend', (e) => {
+    if (tx == null) return;
+    const dx = e.changedTouches[0].clientX - tx;
+    if (Math.abs(dx) > 40) show(current + (dx < 0 ? 1 : -1));
+    tx = null;
+  });
+</script>
+</body>
+</html>