npm - takomi - Versions diffs - 2.1.41 → 2.1.42 - Mend

takomi 2.1.41 → 2.1.42

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 (597) hide show

package/assets/.agent/skills/hyperframes-creative/frame-presets/bold-poster/frame-showcase.html ADDED Viewed

@@ -0,0 +1,1140 @@
+<!doctype html>
+<html lang="en">
+  <head>
+    <meta charset="utf-8" />
+    <meta name="viewport" content="width=device-width,initial-scale=1" />
+    <title>Bold Poster</title>
+    <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=Shrikhand&family=Libre+Baskerville:ital,wght@0,400;0,700;1,400&family=Space+Grotesk:wght@400;600&display=swap"
+      rel="stylesheet"
+    />
+    <style id="ds-tokens">
+      :root {
+        --bg: #ffffff;
+        --dark: #1c1410;
+        --red: #d8000f;
+        --light: #f5f2ef;
+        --disp: "Shrikhand", cursive;
+        --body: "Libre Baskerville", serif;
+        --mono: "Space Grotesk", sans-serif;
+        --stack-shadow:
+          2px 2px 0 rgba(28, 20, 16, 0.25), 4px 4px 0 rgba(28, 20, 16, 0.2),
+          6px 6px 0 rgba(28, 20, 16, 0.15);
+      }
+      * {
+        margin: 0;
+        padding: 0;
+        box-sizing: border-box;
+      }
+      html {
+        background: #0c0a08;
+      }
+      body {
+        background: var(--bg);
+        color: var(--dark);
+        font-family: var(--body);
+        -webkit-font-smoothing: antialiased;
+      }
+      .disp {
+        font-family: var(--disp);
+        font-weight: 400;
+        color: var(--dark);
+      }
+      .label {
+        font-family: var(--mono);
+        font-weight: 600;
+        text-transform: uppercase;
+        letter-spacing: 2px;
+        font-size: 11px;
+        color: var(--red);
+      }
+      section {
+        padding: 100px 64px;
+        position: relative;
+      }
+      .sec-head {
+        display: flex;
+        align-items: baseline;
+        gap: 20px;
+        margin-bottom: 52px;
+        border-bottom: 3px solid var(--dark);
+        padding-bottom: 18px;
+      }
+      .sec-head .k {
+        font-family: var(--mono);
+        font-weight: 600;
+        text-transform: uppercase;
+        letter-spacing: 3px;
+        font-size: 12px;
+        color: var(--red);
+      }
+      .sec-head h2 {
+        font-family: var(--disp);
+        font-weight: 400;
+        font-size: 52px;
+        line-height: 1;
+        color: var(--dark);
+      }
+      .sec-head .sp {
+        flex: 1;
+      }
+      .sec-head .n {
+        font-family: var(--mono);
+        font-weight: 600;
+        text-transform: uppercase;
+        letter-spacing: 2px;
+        font-size: 11px;
+        color: var(--dark);
+      }
+      /* COVER */
+      .cover {
+        min-height: 100vh;
+        padding: 7vh 64px;
+        display: flex;
+        flex-direction: column;
+        justify-content: center;
+        position: relative;
+      }
+      .cover .meta {
+        font-family: var(--body);
+        font-size: 14px;
+        color: var(--dark);
+        margin-bottom: 24px;
+      }
+      .cover .meta .label {
+        display: inline-block;
+        margin-bottom: 8px;
+      }
+      .cover .stack h1 {
+        font-family: var(--disp);
+        font-weight: 400;
+        line-height: 0.84;
+      }
+      .cover .l1 {
+        font-size: clamp(60px, 12vw, 150px);
+        color: var(--dark);
+      }
+      .cover .l2 {
+        font-size: clamp(72px, 14vw, 180px);
+        color: var(--red);
+        transform: rotate(-4deg);
+        transform-origin: left;
+        display: inline-block;
+        margin: 4px 0;
+      }
+      .cover .l3 {
+        font-size: clamp(56px, 11vw, 140px);
+        color: var(--dark);
+        transform: rotate(2deg);
+        transform-origin: left;
+        display: inline-block;
+      }
+      .cover .tagline {
+        font-family: var(--body);
+        font-size: clamp(15px, 1.5vw, 19px);
+        line-height: 1.6;
+        color: var(--dark);
+        max-width: 560px;
+        margin-top: 36px;
+      }
+      .cover .pbar {
+        position: absolute;
+        bottom: 0;
+        left: 0;
+        height: 5px;
+        width: 16%;
+        background: var(--red);
+      }
+      .cover .counter {
+        position: absolute;
+        bottom: 20px;
+        right: 32px;
+        font-family: var(--mono);
+        font-weight: 600;
+        text-transform: uppercase;
+        letter-spacing: 2px;
+        font-size: 11px;
+        color: var(--dark);
+        opacity: 0.5;
+      }
+      /* PALETTE */
+      .swatches {
+        display: grid;
+        grid-template-columns: repeat(4, 1fr);
+        gap: 0;
+        border: 3px solid var(--dark);
+      }
+      .sw {
+        border-right: 1.5px solid var(--dark);
+      }
+      .sw:last-child {
+        border-right: 0;
+      }
+      .sw .chip {
+        height: 150px;
+        border-bottom: 1.5px solid var(--dark);
+      }
+      .sw .meta {
+        padding: 18px 20px;
+      }
+      .sw .name {
+        font-family: var(--disp);
+        font-size: 24px;
+        color: var(--dark);
+      }
+      .sw .hex {
+        font-family: var(--mono);
+        font-size: 11px;
+        letter-spacing: 0.06em;
+        color: var(--dark);
+        opacity: 0.6;
+        margin-top: 8px;
+      }
+      .sw .role {
+        font-family: var(--body);
+        font-size: 12px;
+        line-height: 1.5;
+        color: var(--dark);
+        margin-top: 10px;
+      }
+      /* TYPE */
+      .type-row {
+        display: grid;
+        grid-template-columns: 200px 1fr;
+        align-items: center;
+        padding: 26px 0;
+        border-bottom: 1.5px solid var(--dark);
+      }
+      .type-row .tok {
+        font-family: var(--mono);
+        font-weight: 600;
+        font-size: 11px;
+        letter-spacing: 2px;
+        text-transform: uppercase;
+        color: var(--red);
+      }
+      .type-row .m {
+        font-family: var(--body);
+        font-size: 12px;
+        color: var(--dark);
+        opacity: 0.65;
+        margin-top: 8px;
+        line-height: 1.5;
+      }
+      .type-row .spec {
+        overflow: hidden;
+      }
+      /* COMPONENTS */
+      .cnote {
+        font-family: var(--mono);
+        font-weight: 600;
+        text-transform: uppercase;
+        letter-spacing: 2px;
+        font-size: 11px;
+        color: var(--red);
+        margin-bottom: 20px;
+      }
+      .cgrid {
+        display: grid;
+        grid-template-columns: repeat(12, 1fr);
+        gap: 36px;
+        margin-bottom: 48px;
+      }
+      .s4 {
+        grid-column: span 4;
+      }
+      .s5 {
+        grid-column: span 5;
+      }
+      .s6 {
+        grid-column: span 6;
+      }
+      .s7 {
+        grid-column: span 7;
+      }
+      .s8 {
+        grid-column: span 8;
+      }
+      .fingrid {
+        border: 3px solid var(--dark);
+        display: grid;
+        grid-template-columns: repeat(3, 1fr);
+      }
+      .fingrid .cell {
+        border: 1.5px solid var(--dark);
+        padding: 22px 20px;
+      }
+      .fingrid .cell .num {
+        font-family: var(--disp);
+        font-size: 44px;
+        color: var(--red);
+        line-height: 1;
+      }
+      .fingrid .cell .lab {
+        font-family: var(--mono);
+        font-weight: 600;
+        text-transform: uppercase;
+        letter-spacing: 2px;
+        font-size: 10px;
+        color: var(--dark);
+        margin-top: 10px;
+      }
+      .fingrid .cell .bd {
+        font-family: var(--body);
+        font-size: 12px;
+        line-height: 1.55;
+        color: var(--dark);
+        margin-top: 8px;
+      }
+      .leftcard {
+        border-left: 4px solid var(--red);
+        padding-left: 18px;
+      }
+      .leftcard .t {
+        font-family: var(--disp);
+        font-size: 30px;
+        color: var(--dark);
+        line-height: 1.1;
+      }
+      .leftcard .bd {
+        font-family: var(--body);
+        font-size: 14px;
+        line-height: 1.6;
+        color: var(--dark);
+        margin-top: 10px;
+      }
+      .leftcard ul {
+        list-style: none;
+        margin-top: 14px;
+      }
+      .leftcard li {
+        font-family: var(--mono);
+        font-weight: 400;
+        font-size: 12px;
+        line-height: 1.5;
+        color: var(--dark);
+        padding-left: 16px;
+        position: relative;
+        margin-bottom: 6px;
+      }
+      .leftcard li::before {
+        content: "—";
+        position: absolute;
+        left: 0;
+        color: var(--red);
+        font-weight: 700;
+      }
+      .redpanel {
+        background: var(--red);
+        color: var(--bg);
+        padding: 48px;
+      }
+      .redpanel .q {
+        font-family: var(--disp);
+        font-size: 48px;
+        line-height: 1.15;
+        color: var(--bg);
+        text-shadow: var(--stack-shadow);
+      }
+      .redpanel .cite {
+        font-family: var(--body);
+        font-size: 14px;
+        color: var(--bg);
+        margin-top: 24px;
+        opacity: 0.85;
+      }
+      .tag {
+        display: inline-block;
+        font-family: var(--mono);
+        font-weight: 600;
+        text-transform: uppercase;
+        letter-spacing: 3px;
+        font-size: 11px;
+        color: var(--red);
+        border: 0;
+        padding: 0;
+      }
+      /* COMPOSITIONS */
+      .gallery {
+        display: grid;
+        grid-template-columns: 1fr 1fr;
+        gap: 48px;
+      }
+      .fw .flabel {
+        display: flex;
+        gap: 14px;
+        align-items: baseline;
+        margin-bottom: 16px;
+        font-family: var(--mono);
+        font-weight: 600;
+        text-transform: uppercase;
+        letter-spacing: 2px;
+        font-size: 11px;
+        color: var(--dark);
+        opacity: 0.55;
+      }
+      .fw .flabel b {
+        color: var(--dark);
+        opacity: 1;
+      }
+      .frame {
+        aspect-ratio: 16/9;
+        container-type: size;
+        position: relative;
+        overflow: hidden;
+        background: var(--bg);
+        border: 1.5px solid var(--dark);
+      }
+      .frame.red {
+        background: var(--red);
+      }
+      .frame.dark {
+        background: var(--dark);
+      }
+      .frame > .body {
+        position: absolute;
+        inset: 0;
+        z-index: 2;
+      }
+      .frame .pbar {
+        position: absolute;
+        bottom: 0;
+        left: 0;
+        height: 0.5cqw;
+        background: var(--red);
+        z-index: 5;
+      }
+      /* f1 hero stack */
+      .pf1 .body {
+        display: flex;
+        flex-direction: column;
+        justify-content: center;
+        padding: 0 5cqw;
+      }
+      .pf1 .label {
+        font-family: var(--mono);
+        font-weight: 600;
+        text-transform: uppercase;
+        letter-spacing: 0.25cqw;
+        font-size: 1cqw;
+        color: var(--red);
+        margin-bottom: 1.6cqw;
+      }
+      .pf1 h3 {
+        font-family: var(--disp);
+        font-weight: 400;
+        line-height: 0.84;
+      }
+      .pf1 .a {
+        font-size: 11cqw;
+        color: var(--dark);
+      }
+      .pf1 .b {
+        font-size: 13cqw;
+        color: var(--red);
+        transform: rotate(-4deg);
+        transform-origin: left;
+        display: inline-block;
+        margin: 0.3cqw 0;
+      }
+      .pf1 .c {
+        font-size: 10cqw;
+        color: var(--dark);
+        transform: rotate(2deg);
+        transform-origin: left;
+        display: inline-block;
+      }
+      /* f2 stat-big red panel */
+      .pf2 {
+        background: var(--red);
+      }
+      .pf2 .body {
+        display: flex;
+        flex-direction: column;
+        justify-content: center;
+        align-items: center;
+        text-align: center;
+        color: var(--bg);
+      }
+      .pf2 .label {
+        font-family: var(--mono);
+        font-weight: 600;
+        text-transform: uppercase;
+        letter-spacing: 0.3cqw;
+        font-size: 1.1cqw;
+        color: var(--bg);
+        opacity: 0.8;
+        margin-bottom: 1cqw;
+      }
+      .pf2 .big {
+        font-family: var(--disp);
+        font-weight: 400;
+        font-size: 30cqw;
+        line-height: 0.82;
+        color: var(--bg);
+        transform: rotate(-6deg);
+        text-shadow:
+          0.15cqw 0.15cqw 0 rgba(28, 20, 16, 0.25),
+          0.3cqw 0.3cqw 0 rgba(28, 20, 16, 0.2),
+          0.45cqw 0.45cqw 0 rgba(28, 20, 16, 0.15);
+      }
+      .pf2 .sub {
+        font-family: var(--body);
+        font-size: 1.6cqw;
+        color: var(--bg);
+        margin-top: 2cqw;
+        opacity: 0.9;
+      }
+      /* f3 financial grid */
+      .pf3 .body {
+        padding: 6cqw 5cqw;
+        display: flex;
+        flex-direction: column;
+      }
+      .pf3 .label {
+        font-family: var(--mono);
+        font-weight: 600;
+        text-transform: uppercase;
+        letter-spacing: 0.25cqw;
+        font-size: 0.95cqw;
+        color: var(--red);
+        margin-bottom: 0.8cqw;
+      }
+      .pf3 h3 {
+        font-family: var(--disp);
+        font-size: 4.4cqw;
+        color: var(--dark);
+        margin-bottom: 2cqw;
+      }
+      .pf3 .grid {
+        border: 0.3cqw solid var(--dark);
+        display: grid;
+        grid-template-columns: repeat(3, 1fr);
+        flex: 1;
+      }
+      .pf3 .cell {
+        border: 0.15cqw solid var(--dark);
+        padding: 1.6cqw;
+      }
+      .pf3 .cell .num {
+        font-family: var(--disp);
+        font-size: 4cqw;
+        color: var(--red);
+        line-height: 1;
+      }
+      .pf3 .cell .lab {
+        font-family: var(--mono);
+        font-weight: 600;
+        text-transform: uppercase;
+        letter-spacing: 0.15cqw;
+        font-size: 0.8cqw;
+        color: var(--dark);
+        margin-top: 0.8cqw;
+      }
+      .pf3 .cell .bd {
+        font-family: var(--body);
+        font-size: 0.95cqw;
+        line-height: 1.5;
+        color: var(--dark);
+        margin-top: 0.6cqw;
+      }
+      /* f4 quote red panel */
+      .pf4 {
+        background: var(--red);
+      }
+      .pf4 .body {
+        display: flex;
+        flex-direction: column;
+        justify-content: center;
+        padding: 0 7cqw;
+        color: var(--bg);
+      }
+      .pf4 .q {
+        font-family: var(--disp);
+        font-weight: 400;
+        font-size: 5.2cqw;
+        line-height: 1.15;
+        color: var(--bg);
+        text-shadow:
+          0.15cqw 0.15cqw 0 rgba(28, 20, 16, 0.25),
+          0.3cqw 0.3cqw 0 rgba(28, 20, 16, 0.2),
+          0.45cqw 0.45cqw 0 rgba(28, 20, 16, 0.15);
+      }
+      .pf4 .cite {
+        font-family: var(--body);
+        font-size: 1.3cqw;
+        color: var(--bg);
+        opacity: 0.85;
+        margin-top: 2.4cqw;
+      }
+      /* PRINCIPLES */
+      .dos {
+        display: grid;
+        grid-template-columns: 1fr 1fr;
+        gap: 0;
+        border: 3px solid var(--dark);
+      }
+      .do-card {
+        padding: 38px;
+      }
+      .do-card.do {
+        border-right: 1.5px solid var(--dark);
+      }
+      .do-card h4 {
+        font-family: var(--disp);
+        font-size: 34px;
+        color: var(--dark);
+        margin-bottom: 22px;
+      }
+      .do-card ul {
+        list-style: none;
+      }
+      .do-card li {
+        font-family: var(--body);
+        font-size: 14px;
+        line-height: 1.55;
+        padding-left: 24px;
+        position: relative;
+        margin-bottom: 13px;
+        color: var(--dark);
+      }
+      .do-card li::before {
+        position: absolute;
+        left: 0;
+        font-weight: 700;
+      }
+      .do-card.do li::before {
+        content: "—";
+        color: var(--red);
+      }
+      .do-card.dont li::before {
+        content: "\00d7";
+        color: var(--dark);
+        opacity: 0.4;
+      }
+      .foot {
+        padding: 48px 64px;
+        border-top: 3px solid var(--dark);
+        display: flex;
+        justify-content: space-between;
+        align-items: center;
+      }
+      .foot .l {
+        font-family: var(--disp);
+        font-size: 30px;
+        color: var(--dark);
+      }
+      .foot .r {
+        font-family: var(--mono);
+        font-weight: 600;
+        text-transform: uppercase;
+        letter-spacing: 2px;
+        font-size: 11px;
+        color: var(--dark);
+        opacity: 0.55;
+      }
+      @media (max-width: 1100px) {
+        .gallery {
+          grid-template-columns: 1fr;
+        }
+        .swatches {
+          grid-template-columns: 1fr 1fr;
+        }
+      }
+    </style>
+    <link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Shrikhand&display=swap" />
+    <link
+      rel="stylesheet"
+      href="https://fonts.googleapis.com/css2?family=Libre+Baskerville:ital,wght@0,400;0,700;1,400&display=swap"
+    />
+    <style id="ft-override">
+      :root {
+        --primary: #ffffff !important;
+        --secondary: #1c1410 !important;
+        --tertiary: #f5f2ef !important;
+        --accent: #d8000f !important;
+        --f-disp: "Shrikhand", sans-serif !important;
+        --f-body: "Libre Baskerville", sans-serif !important;
+        --bg: #ffffff !important;
+        --dark: #1c1410 !important;
+        --red: #d8000f !important;
+        --light: #f5f2ef !important;
+        --disp: "Shrikhand", sans-serif !important;
+        --body: "Libre Baskerville", sans-serif !important;
+      }
+    </style>
+  </head>
+  <body>
+    <!-- COVER -->
+    <section class="cover">
+      <div class="meta">
+        <span class="label">Frame System · Vol. 01</span><br />A populist editorial poster system —
+        printed, loud, unmistakable.
+      </div>
+      <div class="stack">
+        <h1 class="l1">ink,</h1>
+        <br />
+        <h1 class="l2">red &amp;</h1>
+        <br />
+        <h1 class="l3">paper.</h1>
+      </div>
+      <div class="tagline">
+        Vintage Italian sports-magazine display, classical serif body, one saturated tomato red, and
+        grids ruled in ink.
+      </div>
+      <div class="pbar"></div>
+      <div class="counter">01 / 06</div>
+    </section>
+    <!-- PALETTE -->
+    <section>
+      <div class="sec-head">
+        <span class="k">01</span>
+        <h2>Palette</h2>
+        <span class="sp"></span><span class="n">Four Colors, No More</span>
+      </div>
+      <div class="swatches">
+        <div class="sw">
+          <div
+            class="chip"
+            style="background: var(--bg); border-bottom: 1.5px solid var(--dark)"
+          ></div>
+          <div class="meta">
+            <div class="name">Paper</div>
+            <div class="hex">#FFFFFF</div>
+            <div class="role">Fresh newsprint canvas.</div>
+          </div>
+        </div>
+        <div class="sw">
+          <div class="chip" style="background: var(--dark)"></div>
+          <div class="meta">
+            <div class="name">Ink</div>
+            <div class="hex">#1C1410</div>
+            <div class="role">Warm brown-black — text + rules.</div>
+          </div>
+        </div>
+        <div class="sw">
+          <div class="chip" style="background: var(--red)"></div>
+          <div class="meta">
+            <div class="name">Red</div>
+            <div class="hex">#D8000F</div>
+            <div class="role">The only accent — numerals, rules, panels.</div>
+          </div>
+        </div>
+        <div class="sw">
+          <div class="chip" style="background: var(--light)"></div>
+          <div class="meta">
+            <div class="name">Off-White</div>
+            <div class="hex">#F5F2EF</div>
+            <div class="role">Alternating striped panels.</div>
+          </div>
+        </div>
+      </div>
+    </section>
+    <!-- TYPOGRAPHY -->
+    <section style="background: var(--light)">
+      <div class="sec-head">
+        <span class="k">02</span>
+        <h2>Typography</h2>
+        <span class="sp"></span><span class="n">Shrikhand · Baskerville · Grotesk</span>
+      </div>
+      <div class="type-row">
+        <div>
+          <div class="tok">stat-big</div>
+          <div class="m">Shrikhand 400 · rotated −6° · always red</div>
+        </div>
+        <div class="spec">
+          <span
+            class="disp"
+            style="
+              font-size: 110px;
+              color: var(--red);
+              display: inline-block;
+              transform: rotate(-6deg);
+            "
+            >94</span
+          >
+        </div>
+      </div>
+      <div class="type-row">
+        <div>
+          <div class="tok">section-header</div>
+          <div class="m">Shrikhand 400 · ink</div>
+        </div>
+        <div class="spec"><span class="disp" style="font-size: 60px">The Printed Page</span></div>
+      </div>
+      <div class="type-row">
+        <div>
+          <div class="tok">body</div>
+          <div class="m">Libre Baskerville 400 · line 1.75 · ink</div>
+        </div>
+        <div class="spec">
+          <p style="font-family: var(--body); font-size: 16px; line-height: 1.75; max-width: 640px">
+            Libre Baskerville carries every paragraph — the literary serif is what makes the system
+            feel printed, not digital.
+          </p>
+        </div>
+      </div>
+      <div class="type-row" style="border-bottom: 0">
+        <div>
+          <div class="tok">label</div>
+          <div class="m">Space Grotesk 600 · uppercase · 2–3px</div>
+        </div>
+        <div class="spec">
+          <span class="label" style="font-size: 13px; letter-spacing: 3px"
+            >Section Eyebrow / Metadata</span
+          >
+        </div>
+      </div>
+    </section>
+    <!-- COMPONENTS -->
+    <section>
+      <div class="sec-head">
+        <span class="k">03</span>
+        <h2>Components</h2>
+        <span class="sp"></span><span class="n">Heavy Rules · One Shadow</span>
+      </div>
+      <div class="cgrid">
+        <div class="s7">
+          <div class="cnote">Financial grid — 3px outer + 1.5px inner double border</div>
+          <div class="fingrid">
+            <div class="cell">
+              <div class="num">$24M</div>
+              <div class="lab">Revenue</div>
+              <div class="bd">Up across every region this year.</div>
+            </div>
+            <div class="cell">
+              <div class="num">+18%</div>
+              <div class="lab">Growth</div>
+              <div class="bd">Year over year, compounding.</div>
+            </div>
+            <div class="cell">
+              <div class="num">3.4×</div>
+              <div class="lab">Multiple</div>
+              <div class="bd">On invested capital to date.</div>
+            </div>
+          </div>
+        </div>
+        <div class="s5">
+          <div class="cnote">Red leftbar card</div>
+          <div class="leftcard">
+            <div class="t">Editorial Block</div>
+            <div class="bd">
+              Cantilevered off a 4px red rule — the card reads without an enclosing outline.
+            </div>
+            <ul>
+              <li>red em-dash bullets</li>
+              <li>capped at three</li>
+              <li>serif body, mono markers</li>
+            </ul>
+          </div>
+        </div>
+      </div>
+      <div class="cgrid" style="margin-bottom: 0">
+        <div class="s7">
+          <div class="cnote">Red panel — the one stacked text-shadow</div>
+          <div class="redpanel">
+            <div class="q">printed and pressed.</div>
+            <div class="cite">— White Shrikhand on red, stamped three times off-register.</div>
+          </div>
+        </div>
+        <div class="s5">
+          <div class="cnote">Tilted statement + tags</div>
+          <div style="display: flex; flex-direction: column; gap: 24px">
+            <span
+              class="disp"
+              style="
+                font-size: 80px;
+                color: var(--red);
+                transform: rotate(-5deg);
+                transform-origin: left;
+                display: inline-block;
+              "
+              >loud.</span
+            >
+            <div style="display: flex; gap: 18px">
+              <span class="tag">Sports Annual</span><span class="tag">Wine Catalogue</span>
+            </div>
+          </div>
+        </div>
+      </div>
+    </section>
+    <!-- COMPOSITIONS -->
+    <section style="background: var(--light)">
+      <div class="sec-head">
+        <span class="k">04</span>
+        <h2>Frame Compositions</h2>
+        <span class="sp"></span><span class="n">True 16:9 · cqw</span>
+      </div>
+      <div class="gallery">
+        <div class="fw">
+          <div class="flabel"><b>Hero Stack</b><span>· identity · 3-line tilted · left</span></div>
+          <div class="frame pf1">
+            <div class="body">
+              <div class="label">Frame System · Vol. 01</div>
+              <h3>
+                <span class="a">ink,</span><br /><span class="b">red &amp;</span><br /><span
+                  class="c"
+                  >paper.</span
+                >
+              </h3>
+            </div>
+            <div class="pbar" style="width: 16%"></div>
+          </div>
+        </div>
+        <div class="fw">
+          <div class="flabel"><b>Hero Stat</b><span>· statement · red panel · centered</span></div>
+          <div class="frame red pf2">
+            <div class="body">
+              <div class="label">Readership</div>
+              <div class="big">94</div>
+              <div class="sub">percent recall, unaided.</div>
+            </div>
+            <div class="pbar" style="width: 48%"></div>
+          </div>
+        </div>
+        <div class="fw">
+          <div class="flabel">
+            <b>Financial Grid</b><span>· data · double border · the dense frame</span>
+          </div>
+          <div class="frame pf3">
+            <div class="body">
+              <div class="label">By The Numbers</div>
+              <h3>The Annual</h3>
+              <div class="grid">
+                <div class="cell">
+                  <div class="num">$24M</div>
+                  <div class="lab">Revenue</div>
+                  <div class="bd">Up across every region.</div>
+                </div>
+                <div class="cell">
+                  <div class="num">+18%</div>
+                  <div class="lab">Growth</div>
+                  <div class="bd">Year over year.</div>
+                </div>
+                <div class="cell">
+                  <div class="num">3.4×</div>
+                  <div class="lab">Multiple</div>
+                  <div class="bd">On capital to date.</div>
+                </div>
+              </div>
+            </div>
+            <div class="pbar" style="width: 64%"></div>
+          </div>
+        </div>
+        <div class="fw">
+          <div class="flabel">
+            <b>Pull Quote</b><span>· quote · red panel · stacked shadow</span>
+          </div>
+          <div class="frame red pf4">
+            <div class="body">
+              <div class="q">type that<br />shouts.</div>
+              <div class="cite">— The system voice, printed and pressed.</div>
+            </div>
+            <div class="pbar" style="width: 82%"></div>
+          </div>
+        </div>
+      </div>
+    </section>
+    <!-- PRINCIPLES -->
+    <section>
+      <div class="sec-head">
+        <span class="k">05</span>
+        <h2>Frame Rules</h2>
+        <span class="sp"></span><span class="n">One Red · Square Corners</span>
+      </div>
+      <div class="dos">
+        <div class="do-card do">
+          <h4>Do</h4>
+          <ul>
+            <li>Stack hero titles in 3 Shrikhand lines — at least one tilted, one red.</li>
+            <li>Make every numeral red Shrikhand; tilt statement display −5° to −6°.</li>
+            <li>Set eyebrows in Space Grotesk 600 uppercase, 2–3px tracked, red.</li>
+            <li>Build data grids with 3px outer + 1.5px inner double borders.</li>
+            <li>Use red em-dash bullets, capped at three; serif body at line 1.75.</li>
+          </ul>
+        </div>
+        <div class="do-card dont">
+          <h4>Don't</h4>
+          <ul>
+            <li>No second accent color; no rounded corners (square only).</li>
+            <li>No drop shadows — the stacked text-shadow on red is the only one.</li>
+            <li>No font substitutes; no Shrikhand body, no Baskerville labels.</li>
+            <li>No default disc bullets; no untilted red statement display.</li>
+            <li>Don't crowd a statement frame — reserve the negative space.</li>
+          </ul>
+        </div>
+      </div>
+    </section>
+    <!-- CAPTIONS — preview of caption-skin.html (the preset's lower-third karaoke look) -->
+    <style>
+      /* mirrors caption-skin.html; the skin's --cap-* vocab mapped to this preset's tokens */
+      .capdemo {
+        --cap-ink: var(--dark);
+        --cap-canvas: var(--bg);
+        --cap-accent: var(--red);
+        --cap-accent-2: var(--light);
+      }
+      .capdemo .stage {
+        position: absolute;
+        left: 0;
+        right: 0;
+        bottom: 0;
+        height: 16.67cqh;
+        display: flex;
+        align-items: center;
+        justify-content: center;
+        z-index: 4;
+      }
+      .capdemo .pill {
+        max-width: 80cqw;
+        padding: 1.4cqw 3cqw 1.7cqw;
+        background: var(--cap-canvas);
+        border: 1.5px solid var(--cap-ink);
+        border-left: 0.35cqw solid var(--cap-accent);
+        border-radius: 0;
+      }
+      .capdemo .line {
+        display: flex;
+        flex-wrap: wrap;
+        justify-content: center;
+        gap: 0.1em 0.34em;
+        font-family: var(--body);
+        font-weight: 400;
+        font-size: 3.2cqw;
+        line-height: 1.16;
+        letter-spacing: -0.01em;
+      }
+      .capdemo .w {
+        display: inline-block;
+        padding: 0 0.06em;
+        color: color-mix(in srgb, var(--cap-ink) 42%, var(--cap-canvas));
+      }
+      .capdemo .w.spoken {
+        color: var(--cap-ink);
+      }
+      .capdemo .w.active {
+        color: var(--cap-canvas);
+        background: var(--cap-accent);
+        box-shadow: 0 0 0 0.06em var(--cap-accent);
+        text-shadow:
+          0.03em 0.03em 0 rgba(28, 20, 16, 0.25),
+          0.06em 0.06em 0 rgba(28, 20, 16, 0.2),
+          0.09em 0.09em 0 rgba(28, 20, 16, 0.15);
+      }
+      .capdemo .bandline {
+        position: absolute;
+        left: 0;
+        right: 0;
+        bottom: 16.67cqh;
+        border-top: 1px dashed rgba(28, 20, 16, 0.3);
+        z-index: 3;
+      }
+      .capdemo .bandtag {
+        position: absolute;
+        right: 3cqw;
+        bottom: calc(16.67cqh + 0.7cqw);
+        font-family: var(--mono);
+        font-size: 0.95cqw;
+        letter-spacing: 0.04em;
+        color: var(--dark);
+        opacity: 0.5;
+        z-index: 4;
+      }
+    </style>
+    <section>
+      <div class="sec-head">
+        <span class="k">06</span>
+        <h2>Captions</h2>
+        <span class="sp"></span><span class="n">Lower-third · Karaoke</span>
+      </div>
+      <div class="gallery">
+        <div class="fw">
+          <div class="flabel"><b>Active line</b><span>· spoken · current · upcoming</span></div>
+          <div class="frame capdemo">
+            <div class="bandline"></div>
+            <div class="bandtag">caption band · 16.7%</div>
+            <div class="stage">
+              <div class="pill">
+                <div class="line">
+                  <span class="w spoken">Built</span>
+                  <span class="w spoken">for</span>
+                  <span class="w active">teams</span>
+                  <span class="w">who</span>
+                  <span class="w">ship.</span>
+                </div>
+              </div>
+            </div>
+            <div class="pbar" style="width: 88%"></div>
+          </div>
+        </div>
+        <div class="fw">
+          <div class="flabel"><b>Settled line</b><span>· all spoken · red panel cleared</span></div>
+          <div class="frame capdemo">
+            <div class="stage">
+              <div class="pill">
+                <div class="line">
+                  <span class="w spoken">Ship</span>
+                  <span class="w spoken">faster</span>
+                  <span class="w spoken">today.</span>
+                </div>
+              </div>
+            </div>
+            <div class="pbar" style="width: 100%"></div>
+          </div>
+        </div>
+      </div>
+    </section>
+    <div class="foot">
+      <span class="l">Bold Poster</span>
+      <span class="r">Frame Showcase · Atoms Sacred · Composition Free</span>
+    </div>
+    <template id="__bundler_thumbnail">
+      <svg viewBox="0 0 100 100" xmlns="http://www.w3.org/2000/svg">
+        <rect width="100" height="100" fill="#FFFFFF" />
+        <text x="12" y="42" font-family="Georgia" font-weight="700" font-size="26" fill="#1C1410">
+          ink
+        </text>
+        <text
+          x="14"
+          y="70"
+          font-family="Georgia"
+          font-weight="700"
+          font-size="30"
+          fill="#D8000F"
+          transform="rotate(-5 14 70)"
+        >
+          red.
+        </text>
+        <rect x="0" y="96" width="58" height="4" fill="#D8000F" />
+      </svg>
+    </template>
+  </body>
+</html>