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/biennale-yellow/frame-showcase.html ADDED Viewed

@@ -0,0 +1,1214 @@
+<!doctype html>
+<html lang="en">
+  <head>
+    <meta charset="utf-8" />
+    <meta name="viewport" content="width=device-width,initial-scale=1" />
+    <title>Biennale Yellow</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=Instrument+Serif:ital@0;1&family=Archivo:wght@400;600&family=JetBrains+Mono:wght@400&display=swap"
+      rel="stylesheet"
+    />
+    <style id="ds-tokens">
+      :root {
+        --paper: #e9e5db;
+        --paper-deep: #dcd6c4;
+        --sun: #f1ee2e;
+        --sun-soft: #f8f39b;
+        --haze: #f0da7c;
+        --ink: #1b2566;
+        --ember: #e26b4a;
+        --serif: "Instrument Serif", Georgia, serif;
+        --sans: "Archivo", sans-serif;
+        --mono: "JetBrains Mono", ui-monospace, monospace;
+        --bloom: radial-gradient(
+          circle at 50% 50%,
+          rgba(241, 238, 46, 0.92) 0%,
+          rgba(241, 238, 46, 0.5) 30%,
+          rgba(240, 218, 124, 0.22) 55%,
+          rgba(233, 229, 219, 0) 78%
+        );
+      }
+      * {
+        margin: 0;
+        padding: 0;
+        box-sizing: border-box;
+      }
+      html {
+        background: #0c0d1a;
+      }
+      body {
+        background: var(--paper);
+        color: var(--ink);
+        font-family: var(--sans);
+        -webkit-font-smoothing: antialiased;
+      }
+      .serif {
+        font-family: var(--serif);
+        font-weight: 400;
+        letter-spacing: -0.018em;
+        line-height: 0.9;
+      }
+      .micro {
+        font-family: var(--sans);
+        font-weight: 600;
+        text-transform: uppercase;
+        letter-spacing: 0.18em;
+        font-size: 13px;
+      }
+      section {
+        padding: 120px 76px;
+        position: relative;
+        overflow: hidden;
+      }
+      .sec-head {
+        display: flex;
+        align-items: baseline;
+        gap: 24px;
+        border-bottom: 1px solid var(--ink);
+        padding-bottom: 18px;
+        margin-bottom: 56px;
+        position: relative;
+        z-index: 2;
+      }
+      .sec-head .micro {
+        color: var(--ink);
+      }
+      .sec-head h2 {
+        font-family: var(--serif);
+        font-weight: 400;
+        font-size: 56px;
+        line-height: 1;
+        letter-spacing: -0.01em;
+      }
+      .sec-head .sp {
+        flex: 1;
+      }
+      /* COVER */
+      .cover {
+        min-height: 100vh;
+        padding: 0;
+        display: flex;
+        flex-direction: column;
+        justify-content: center;
+        position: relative;
+        overflow: hidden;
+      }
+      .cover .bloom {
+        position: absolute;
+        width: 62%;
+        height: 70%;
+        left: 8%;
+        top: 14%;
+        background: var(--bloom);
+        z-index: 0;
+        pointer-events: none;
+      }
+      .cover .ember {
+        position: absolute;
+        width: 36%;
+        height: 40%;
+        right: -6%;
+        bottom: -6%;
+        background: radial-gradient(
+          circle at 60% 60%,
+          rgba(226, 107, 74, 0.2) 0%,
+          rgba(226, 107, 74, 0) 70%
+        );
+        z-index: 0;
+        pointer-events: none;
+      }
+      .cover .daterail {
+        position: absolute;
+        top: 64px;
+        right: 76px;
+        font-family: var(--serif);
+        font-weight: 400;
+        font-size: clamp(48px, 5.2vw, 84px);
+        line-height: 0.96;
+        text-align: right;
+        letter-spacing: -0.005em;
+        z-index: 2;
+      }
+      .cover .inner {
+        padding: 0 76px;
+        position: relative;
+        z-index: 2;
+      }
+      .cover .micro {
+        margin-bottom: 28px;
+      }
+      .cover h1 {
+        font-family: var(--serif);
+        font-weight: 400;
+        font-size: clamp(110px, 15vw, 230px);
+        line-height: 0.84;
+        letter-spacing: -0.018em;
+      }
+      .cover h1 em {
+        font-style: italic;
+        letter-spacing: -0.005em;
+      }
+      .cover .footer {
+        position: absolute;
+        bottom: 0;
+        left: 0;
+        right: 0;
+        display: grid;
+        grid-template-columns: 1.1fr 1fr 1.4fr 2fr;
+        gap: 36px;
+        padding: 0 76px 56px;
+        z-index: 2;
+      }
+      .cover .fcell {
+        border-top: 1px solid var(--ink);
+        padding-top: 14px;
+      }
+      .cover .fcell .t {
+        font-family: var(--sans);
+        font-weight: 600;
+        text-transform: uppercase;
+        letter-spacing: 0.16em;
+        font-size: 11px;
+        margin-bottom: 8px;
+      }
+      .cover .fcell .b {
+        font-family: var(--sans);
+        font-weight: 400;
+        font-size: 13px;
+        line-height: 1.5;
+        color: var(--ink);
+      }
+      .cover .pagenum {
+        position: absolute;
+        bottom: 30px;
+        right: 48px;
+        font-family: var(--mono);
+        font-size: 13px;
+        letter-spacing: 0.08em;
+        opacity: 0.75;
+        z-index: 2;
+      }
+      /* PALETTE */
+      .swatches {
+        display: grid;
+        grid-template-columns: repeat(4, 1fr);
+        gap: 28px;
+        position: relative;
+        z-index: 2;
+      }
+      .sw .chip {
+        height: 130px;
+        border: 1px solid var(--ink);
+      }
+      .sw .name {
+        font-family: var(--serif);
+        font-size: 26px;
+        margin-top: 14px;
+      }
+      .sw .hex {
+        font-family: var(--mono);
+        font-size: 12px;
+        color: var(--ink);
+        opacity: 0.7;
+        margin-top: 6px;
+      }
+      .sw .role {
+        font-family: var(--sans);
+        font-size: 12px;
+        line-height: 1.5;
+        color: var(--ink);
+        margin-top: 8px;
+      }
+      /* TYPE */
+      .type-row {
+        display: grid;
+        grid-template-columns: 220px 1fr;
+        align-items: center;
+        padding: 26px 0;
+        border-bottom: 1px solid rgba(27, 37, 102, 0.2);
+      }
+      .type-row .tok {
+        font-family: var(--sans);
+        font-weight: 600;
+        text-transform: uppercase;
+        letter-spacing: 0.16em;
+        font-size: 11px;
+      }
+      .type-row .m {
+        font-family: var(--mono);
+        font-size: 11px;
+        color: var(--ink);
+        opacity: 0.65;
+        margin-top: 8px;
+        line-height: 1.5;
+      }
+      .type-row .spec {
+        overflow: hidden;
+      }
+      /* COMPONENTS */
+      .cnote {
+        font-family: var(--sans);
+        font-weight: 600;
+        text-transform: uppercase;
+        letter-spacing: 0.16em;
+        font-size: 12px;
+        margin-bottom: 22px;
+      }
+      .cgrid {
+        display: grid;
+        grid-template-columns: repeat(12, 1fr);
+        gap: 48px;
+        margin-bottom: 56px;
+      }
+      .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;
+      }
+      .ledger .row {
+        display: grid;
+        grid-template-columns: 92px 1.6fr 0.9fr 80px;
+        gap: 24px;
+        padding: 14px 0;
+        border-bottom: 1px solid rgba(27, 37, 102, 0.2);
+        align-items: baseline;
+      }
+      .ledger .dt {
+        font-family: var(--mono);
+        font-size: 14px;
+      }
+      .ledger .ti {
+        font-family: var(--serif);
+        font-size: 26px;
+        line-height: 1.1;
+      }
+      .ledger .vn {
+        font-family: var(--sans);
+        font-size: 13px;
+        color: var(--ink);
+      }
+      .ledger .du {
+        font-family: var(--mono);
+        font-size: 13px;
+        text-align: right;
+      }
+      .strand .row {
+        display: grid;
+        grid-template-columns: 56px 1fr;
+        gap: 20px;
+        padding: 14px 0;
+        border-bottom: 1px solid rgba(27, 37, 102, 0.2);
+        align-items: baseline;
+      }
+      .strand .nm {
+        font-family: var(--serif);
+        font-size: 34px;
+        line-height: 1;
+      }
+      .strand .ti {
+        font-family: var(--serif);
+        font-size: 24px;
+        line-height: 1.1;
+      }
+      .strand .bd {
+        font-family: var(--sans);
+        font-size: 13px;
+        line-height: 1.5;
+        color: var(--ink);
+        margin-top: 4px;
+      }
+      .bars .row {
+        display: grid;
+        grid-template-columns: 60px 1fr 60px;
+        gap: 16px;
+        align-items: center;
+        margin-bottom: 14px;
+      }
+      .bars .yr {
+        font-family: var(--mono);
+        font-size: 13px;
+      }
+      .bars .bar {
+        height: 20px;
+        background: var(--ink);
+      }
+      .bars .bar.lit {
+        background: var(--sun);
+        border: 1px solid var(--ink);
+      }
+      .bars .vl {
+        font-family: var(--mono);
+        font-size: 13px;
+        text-align: right;
+      }
+      .ypanel {
+        background: var(--sun);
+        padding: 36px;
+        color: var(--ink);
+      }
+      .ypanel .l {
+        font-family: var(--sans);
+        font-weight: 600;
+        text-transform: uppercase;
+        letter-spacing: 0.16em;
+        font-size: 11px;
+      }
+      .ypanel .h {
+        font-family: var(--serif);
+        font-size: 44px;
+        line-height: 0.95;
+        margin-top: 12px;
+      }
+      /* COMPOSITIONS */
+      .gallery {
+        display: grid;
+        grid-template-columns: 1fr 1fr;
+        gap: 48px;
+        position: relative;
+        z-index: 2;
+      }
+      .fw .flabel {
+        display: flex;
+        gap: 14px;
+        align-items: baseline;
+        margin-bottom: 16px;
+        font-family: var(--sans);
+        font-weight: 600;
+        text-transform: uppercase;
+        letter-spacing: 0.14em;
+        font-size: 12px;
+        color: var(--ink);
+        opacity: 0.6;
+      }
+      .fw .flabel b {
+        opacity: 1;
+      }
+      .frame {
+        aspect-ratio: 16/9;
+        container-type: size;
+        position: relative;
+        overflow: hidden;
+        background: var(--paper);
+        box-shadow: 0 0 0 1px rgba(27, 37, 102, 0.15);
+      }
+      .frame > .body {
+        position: absolute;
+        inset: 0;
+        z-index: 3;
+      }
+      .frame .bloom {
+        position: absolute;
+        background: var(--bloom);
+        z-index: 1;
+        pointer-events: none;
+      }
+      .frame .pn {
+        position: absolute;
+        right: 3cqw;
+        bottom: 2.6cqw;
+        font-family: var(--mono);
+        font-size: 1cqw;
+        opacity: 0.75;
+        z-index: 4;
+      }
+      /* f1 cover */
+      .yf1 .bloom {
+        width: 58%;
+        height: 64%;
+        left: 6%;
+        top: 16%;
+      }
+      .yf1 .body {
+        display: flex;
+        flex-direction: column;
+        justify-content: center;
+        padding: 0 5cqw;
+      }
+      .yf1 .micro {
+        font-family: var(--sans);
+        font-weight: 600;
+        text-transform: uppercase;
+        letter-spacing: 0.3cqw;
+        font-size: 1cqw;
+        margin-bottom: 1.8cqw;
+      }
+      .yf1 h3 {
+        font-family: var(--serif);
+        font-weight: 400;
+        font-size: 13cqw;
+        line-height: 0.84;
+        letter-spacing: -0.018em;
+      }
+      .yf1 h3 em {
+        font-style: italic;
+      }
+      .yf1 .dr {
+        position: absolute;
+        top: 4cqw;
+        right: 4cqw;
+        font-family: var(--serif);
+        font-size: 5cqw;
+        line-height: 0.96;
+        text-align: right;
+        letter-spacing: -0.005em;
+        z-index: 4;
+      }
+      /* f2 chapter divider */
+      .yf2 .bloom {
+        width: 60%;
+        height: 80%;
+        right: -10%;
+        top: -10%;
+        left: auto;
+      }
+      .yf2 .rail {
+        position: absolute;
+        left: 3cqw;
+        top: 50%;
+        transform: rotate(-90deg) translateX(50%);
+        transform-origin: left center;
+        font-family: var(--sans);
+        font-weight: 600;
+        text-transform: uppercase;
+        letter-spacing: 0.32em;
+        font-size: 1cqw;
+        white-space: nowrap;
+        z-index: 4;
+      }
+      .yf2 .body {
+        display: flex;
+        flex-direction: column;
+        justify-content: center;
+        padding: 0 5cqw 0 9cqw;
+      }
+      .yf2 .num {
+        font-family: var(--serif);
+        font-weight: 400;
+        font-size: 38cqw;
+        line-height: 0.84;
+        letter-spacing: -0.04em;
+        color: var(--ink);
+      }
+      .yf2 .ti {
+        font-family: var(--serif);
+        font-size: 3.6cqw;
+        line-height: 1.05;
+        margin-top: -2cqw;
+        max-width: 46cqw;
+      }
+      /* f3 ledger */
+      .yf3 .body {
+        padding: 6cqw 5cqw;
+        display: flex;
+        flex-direction: column;
+      }
+      .yf3 .top {
+        display: flex;
+        justify-content: space-between;
+        align-items: baseline;
+        border-bottom: 1px solid var(--ink);
+        padding-bottom: 1.2cqw;
+        margin-bottom: 1.6cqw;
+      }
+      .yf3 .top h4 {
+        font-family: var(--serif);
+        font-size: 3.6cqw;
+        line-height: 1;
+      }
+      .yf3 .top .micro {
+        font-family: var(--sans);
+        font-weight: 600;
+        text-transform: uppercase;
+        letter-spacing: 0.2cqw;
+        font-size: 0.9cqw;
+      }
+      .yf3 .row {
+        display: grid;
+        grid-template-columns: 8cqw 1.6fr 0.9fr 6cqw;
+        gap: 1.6cqw;
+        padding: 1cqw 0;
+        border-bottom: 1px solid rgba(27, 37, 102, 0.2);
+        align-items: baseline;
+      }
+      .yf3 .dt {
+        font-family: var(--mono);
+        font-size: 1cqw;
+      }
+      .yf3 .ti {
+        font-family: var(--serif);
+        font-size: 1.9cqw;
+        line-height: 1.1;
+      }
+      .yf3 .vn {
+        font-family: var(--sans);
+        font-size: 0.95cqw;
+      }
+      .yf3 .du {
+        font-family: var(--mono);
+        font-size: 0.95cqw;
+        text-align: right;
+      }
+      /* f4 manifesto */
+      .yf4 .bloom {
+        width: 54%;
+        height: 60%;
+        left: 50%;
+        top: 50%;
+        transform: translate(-50%, -50%);
+      }
+      .yf4 .body {
+        display: flex;
+        flex-direction: column;
+        justify-content: center;
+        align-items: center;
+        text-align: center;
+        padding: 0 9cqw;
+      }
+      .yf4 .qm {
+        font-family: var(--serif);
+        font-size: 14cqw;
+        line-height: 0.5;
+        height: 7cqw;
+      }
+      .yf4 .q {
+        font-family: var(--serif);
+        font-style: italic;
+        font-size: 5cqw;
+        line-height: 1.04;
+        letter-spacing: -0.005em;
+      }
+      .yf4 .at {
+        font-family: var(--sans);
+        font-weight: 600;
+        text-transform: uppercase;
+        letter-spacing: 0.25cqw;
+        font-size: 1cqw;
+        margin-top: 2.4cqw;
+      }
+      /* PRINCIPLES */
+      .dos {
+        display: grid;
+        grid-template-columns: 1fr 1fr;
+        gap: 56px;
+        position: relative;
+        z-index: 2;
+      }
+      .do-card h4 {
+        font-family: var(--serif);
+        font-size: 34px;
+        margin-bottom: 8px;
+      }
+      .do-card .rule {
+        height: 1px;
+        background: var(--ink);
+        margin-bottom: 22px;
+      }
+      .do-card ul {
+        list-style: none;
+      }
+      .do-card li {
+        font-family: var(--sans);
+        font-size: 14px;
+        line-height: 1.6;
+        padding-left: 22px;
+        position: relative;
+        margin-bottom: 13px;
+        color: var(--ink);
+      }
+      .do-card li::before {
+        position: absolute;
+        left: 0;
+        font-family: var(--serif);
+      }
+      .do-card.do li::before {
+        content: "\2014";
+      }
+      .do-card.dont li::before {
+        content: "\00d7";
+        color: var(--ember);
+      }
+      .foot {
+        padding: 64px 76px;
+        border-top: 1px solid var(--ink);
+        display: flex;
+        justify-content: space-between;
+        align-items: center;
+      }
+      .foot .l {
+        font-family: var(--serif);
+        font-size: 30px;
+      }
+      .foot .r {
+        font-family: var(--sans);
+        font-weight: 600;
+        text-transform: uppercase;
+        letter-spacing: 0.16em;
+        font-size: 11px;
+      }
+      @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=Instrument+Serif:ital,wght@0,400;1,400&display=swap"
+    />
+    <link
+      rel="stylesheet"
+      href="https://fonts.googleapis.com/css2?family=Archivo:wght@400;500;600;700&display=swap"
+    />
+    <style id="ft-override">
+      :root {
+        --primary: #e9e5db !important;
+        --secondary: #1b2566 !important;
+        --tertiary: #dcd6c4 !important;
+        --accent: #f1ee2e !important;
+        --f-disp: "Instrument Serif", sans-serif !important;
+        --f-body: "Archivo", sans-serif !important;
+        --paper: #e9e5db !important;
+        --paper-deep: #dcd6c4 !important;
+        --sun: #f1ee2e !important;
+        --ink: #1b2566 !important;
+        --serif: "Instrument Serif", sans-serif !important;
+        --sans: "Archivo", sans-serif !important;
+        --sun-soft: #f8f39b !important;
+        --haze: #f0da7c !important;
+        --ember: #e26b4a !important;
+      }
+    </style>
+  </head>
+  <body>
+    <!-- COVER -->
+    <section class="cover">
+      <div class="bloom"></div>
+      <div class="ember"></div>
+      <div class="daterail">2026<br />—2027</div>
+      <div class="inner">
+        <div class="micro">Frame System · Vol. 01</div>
+        <h1>Paper, ink<br />&amp; <em>yellow.</em></h1>
+      </div>
+      <div class="footer">
+        <div class="fcell">
+          <div class="t">Register</div>
+          <div class="b">Literary-editorial, biennale catalogue.</div>
+        </div>
+        <div class="fcell">
+          <div class="t">Ground</div>
+          <div class="b">Warm parchment, never white.</div>
+        </div>
+        <div class="fcell">
+          <div class="t">Type</div>
+          <div class="b">Instrument Serif · Archivo · JetBrains Mono.</div>
+        </div>
+        <div class="fcell">
+          <div class="t">Depth</div>
+          <div class="b">Atmospheric blooms, no shadows, hairline rules.</div>
+        </div>
+      </div>
+      <div class="pagenum">01 / 06</div>
+    </section>
+    <!-- PALETTE -->
+    <section>
+      <div class="sec-head">
+        <span class="micro">01</span>
+        <h2>Palette</h2>
+        <span class="sp"></span><span class="micro">Paper · Ink · Yellow</span>
+      </div>
+      <div class="swatches">
+        <div class="sw">
+          <div class="chip" style="background: var(--paper)"></div>
+          <div class="name">Paper</div>
+          <div class="hex">#E9E5DB</div>
+          <div class="role">The warm parchment ground.</div>
+        </div>
+        <div class="sw">
+          <div class="chip" style="background: var(--ink)"></div>
+          <div class="name">Ink</div>
+          <div class="hex">#1B2566</div>
+          <div class="role">The single text + rule color.</div>
+        </div>
+        <div class="sw">
+          <div class="chip" style="background: var(--sun)"></div>
+          <div class="name">Sun</div>
+          <div class="hex">#F1EE2E</div>
+          <div class="role">Panel, bloom, tile underprint.</div>
+        </div>
+        <div class="sw">
+          <div class="chip" style="background: var(--ember)"></div>
+          <div class="name">Ember</div>
+          <div class="hex">#E26B4A</div>
+          <div class="role">Subordinate counter-bloom only.</div>
+        </div>
+        <div class="sw">
+          <div class="chip" style="background: var(--paper-deep)"></div>
+          <div class="name">Paper Deep</div>
+          <div class="hex">#DCD6C4</div>
+          <div class="role">Secondary parchment band.</div>
+        </div>
+        <div class="sw">
+          <div class="chip" style="background: var(--sun-soft)"></div>
+          <div class="name">Sun Soft</div>
+          <div class="hex">#F8F39B</div>
+          <div class="role">Mid stop in sun blooms.</div>
+        </div>
+        <div class="sw">
+          <div class="chip" style="background: var(--haze)"></div>
+          <div class="name">Haze</div>
+          <div class="hex">#F0DA7C</div>
+          <div class="role">Outer stop in sun blooms.</div>
+        </div>
+        <div class="sw">
+          <div class="chip" style="background: var(--bloom), var(--paper)"></div>
+          <div class="name">Sun Bloom</div>
+          <div class="hex">radial · atmosphere</div>
+          <div class="role">The primary depth layer.</div>
+        </div>
+      </div>
+    </section>
+    <!-- TYPOGRAPHY -->
+    <section>
+      <div class="sec-head">
+        <span class="micro">02</span>
+        <h2>Typography</h2>
+        <span class="sp"></span><span class="micro">Serif · Sans · Mono</span>
+      </div>
+      <div class="type-row">
+        <div>
+          <div class="tok">display</div>
+          <div class="m">Instrument Serif 400 · line 0.86 · −0.018em</div>
+        </div>
+        <div class="spec"><span class="serif" style="font-size: 104px">Biennale</span></div>
+      </div>
+      <div class="type-row">
+        <div>
+          <div class="tok">display-it</div>
+          <div class="m">Instrument Serif italic · slow-reading</div>
+        </div>
+        <div class="spec">
+          <span class="serif" style="font-style: italic; font-size: 72px; line-height: 1.04"
+            >quietly,</span
+          >
+        </div>
+      </div>
+      <div class="type-row">
+        <div>
+          <div class="tok">numeral-md</div>
+          <div class="m">Instrument Serif 400 · hero stat</div>
+        </div>
+        <div class="spec">
+          <span class="serif" style="font-size: 96px; letter-spacing: -0.04em">240</span>
+        </div>
+      </div>
+      <div class="type-row">
+        <div>
+          <div class="tok">body</div>
+          <div class="m">Archivo 400 · line 1.5 · ink</div>
+        </div>
+        <div class="spec">
+          <p style="font-family: var(--sans); font-size: 16px; line-height: 1.5; max-width: 620px">
+            Archivo carries every paragraph — the quiet sans beneath the serif display, always in
+            ink.
+          </p>
+        </div>
+      </div>
+      <div class="type-row" style="border-bottom: 0">
+        <div>
+          <div class="tok">micro-label</div>
+          <div class="m">Archivo 600 · uppercase · 0.18em</div>
+        </div>
+        <div class="spec">
+          <span class="micro">Programme · Section</span> &nbsp;
+          <span
+            class="serif"
+            style="font-family: var(--mono); font-size: 14px; letter-spacing: 0.04em"
+            >12 — 14 JUN</span
+          >
+        </div>
+      </div>
+    </section>
+    <!-- COMPONENTS -->
+    <section>
+      <div class="sec-head">
+        <span class="micro">03</span>
+        <h2>Components</h2>
+        <span class="sp"></span><span class="micro">Hairlines · Blooms · Panels</span>
+      </div>
+      <div class="cgrid">
+        <div class="s7">
+          <div class="cnote">
+            Ledger rows — mono date · serif title · sans venue · mono duration
+          </div>
+          <div class="ledger">
+            <div class="row">
+              <span class="dt">12 JUN</span><span class="ti">Opening Address</span
+              ><span class="vn">Giardini Pavilion</span><span class="du">45m</span>
+            </div>
+            <div class="row">
+              <span class="dt">13 JUN</span><span class="ti">On Slow Reading</span
+              ><span class="vn">Arsenale Hall</span><span class="du">90m</span>
+            </div>
+            <div class="row">
+              <span class="dt">14 JUN</span><span class="ti">Closing Colophon</span
+              ><span class="vn">Central Library</span><span class="du">30m</span>
+            </div>
+          </div>
+        </div>
+        <div class="s5">
+          <div class="cnote">Strand list + chart bars</div>
+          <div class="strand">
+            <div class="row">
+              <span class="nm">01</span>
+              <div><div class="ti">Parchment</div></div>
+            </div>
+            <div class="row">
+              <span class="nm">02</span>
+              <div><div class="ti">Ink</div></div>
+            </div>
+          </div>
+          <div class="bars" style="margin-top: 20px">
+            <div class="row">
+              <span class="yr">'24</span><span class="bar" style="width: 60%"></span
+              ><span class="vl">60</span>
+            </div>
+            <div class="row">
+              <span class="yr">'25</span><span class="bar lit" style="width: 88%"></span
+              ><span class="vl">88</span>
+            </div>
+          </div>
+        </div>
+      </div>
+      <div class="cgrid" style="margin-bottom: 0">
+        <div class="s5">
+          <div class="cnote">Yellow panel — strongest color statement</div>
+          <div class="ypanel">
+            <div class="l">Poster Fill</div>
+            <div class="h">Ink on Sun.</div>
+          </div>
+        </div>
+        <div class="s7">
+          <div class="cnote">Sun bloom + ember counter-bloom</div>
+          <div
+            style="
+              position: relative;
+              height: 170px;
+              border: 1px solid rgba(27, 37, 102, 0.2);
+              overflow: hidden;
+            "
+          >
+            <div
+              style="
+                position: absolute;
+                width: 60%;
+                height: 130%;
+                left: 6%;
+                top: -15%;
+                background: var(--bloom);
+              "
+            ></div>
+            <div
+              style="
+                position: absolute;
+                width: 40%;
+                height: 90%;
+                right: -8%;
+                bottom: -20%;
+                background: radial-gradient(circle, rgba(226, 107, 74, 0.22), transparent 70%);
+              "
+            ></div>
+            <div style="position: absolute; left: 24px; bottom: 20px" class="serif">
+              <span style="font-size: 40px">atmosphere.</span>
+            </div>
+          </div>
+        </div>
+      </div>
+    </section>
+    <!-- COMPOSITIONS -->
+    <section>
+      <div class="sec-head">
+        <span class="micro">04</span>
+        <h2>Frame Compositions</h2>
+        <span class="sp"></span><span class="micro">True 16:9 · cqw</span>
+      </div>
+      <div class="gallery">
+        <div class="fw">
+          <div class="flabel"><b>Cover</b><span>· identity · sun bloom · date rail</span></div>
+          <div class="frame yf1">
+            <div class="bloom"></div>
+            <div class="dr">2026<br />—27</div>
+            <div class="body">
+              <div class="micro">Frame System</div>
+              <h3>Paper, ink<br />&amp; <em>yellow.</em></h3>
+            </div>
+            <div class="pn">01 / 06</div>
+          </div>
+        </div>
+        <div class="fw">
+          <div class="flabel">
+            <b>Chapter Divider</b><span>· section · jumbo numeral · vertical rail</span>
+          </div>
+          <div class="frame yf2">
+            <div class="bloom"></div>
+            <div class="rail">Section — Two</div>
+            <div class="body">
+              <div class="num">02</div>
+              <div class="ti">On measure &amp; the slow page.</div>
+            </div>
+            <div class="pn">02 / 06</div>
+          </div>
+        </div>
+        <div class="fw">
+          <div class="flabel">
+            <b>Ledger</b><span>· catalog · hairline rows · the dense frame</span>
+          </div>
+          <div class="frame yf3">
+            <div class="body">
+              <div class="top">
+                <h4>Programme</h4>
+                <span class="micro">12 — 14 JUN</span>
+              </div>
+              <div class="row">
+                <span class="dt">12 JUN</span><span class="ti">Opening Address</span
+                ><span class="vn">Giardini</span><span class="du">45m</span>
+              </div>
+              <div class="row">
+                <span class="dt">13 JUN</span><span class="ti">On Slow Reading</span
+                ><span class="vn">Arsenale</span><span class="du">90m</span>
+              </div>
+              <div class="row">
+                <span class="dt">14 JUN</span><span class="ti">Closing Colophon</span
+                ><span class="vn">Library</span><span class="du">30m</span>
+              </div>
+            </div>
+            <div class="pn">03 / 06</div>
+          </div>
+        </div>
+        <div class="fw">
+          <div class="flabel">
+            <b>Manifesto</b><span>· quote · italic serif · centered bloom</span>
+          </div>
+          <div class="frame yf4">
+            <div class="bloom"></div>
+            <div class="body">
+              <div class="qm">&ldquo;</div>
+              <div class="q">Read it slowly,<br />or not at all.</div>
+              <div class="at">— The System Voice</div>
+            </div>
+            <div class="pn">04 / 06</div>
+          </div>
+        </div>
+      </div>
+    </section>
+    <!-- PRINCIPLES -->
+    <section>
+      <div class="sec-head">
+        <span class="micro">05</span>
+        <h2>Frame Rules</h2>
+        <span class="sp"></span><span class="micro">Restraint</span>
+      </div>
+      <div class="dos">
+        <div class="do-card do">
+          <h4>Do</h4>
+          <div class="rule"></div>
+          <ul>
+            <li>Start on warm parchment; add at least one sun bloom for atmosphere.</li>
+            <li>
+              Set every line in ink — display, body, label, mono; contrast is size, not color.
+            </li>
+            <li>Use Instrument Serif 400, tight line-height, negative tracking, for display.</li>
+            <li>
+              Make every separator a 1px ink hairline; flood a yellow panel for poster moments.
+            </li>
+            <li>Reserve JetBrains Mono for dates, numerals, and the bottom-right pagenum.</li>
+          </ul>
+        </div>
+        <div class="do-card dont">
+          <h4>Don't</h4>
+          <div class="rule"></div>
+          <ul>
+            <li>No drop shadows, no rounded corners, no bordered cards.</li>
+            <li>No second text color; no bold Instrument Serif.</li>
+            <li>No borders thicker than 1px; no inverted ink grounds.</li>
+            <li>No mono for body or headlines; no font substitutes.</li>
+            <li>Don't crowd the canvas — sparse reads as elegant.</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(--ink);
+        --cap-canvas: var(--paper);
+        --cap-accent: var(--sun);
+        --cap-accent-2: var(--ember);
+      }
+      .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: 1px solid var(--cap-ink);
+        border-radius: 0;
+      }
+      .capdemo .line {
+        display: flex;
+        flex-wrap: wrap;
+        justify-content: center;
+        gap: 0.1em 0.34em;
+        font-family: var(--serif);
+        font-weight: 400;
+        font-size: 3.4cqw;
+        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-ink);
+        background: var(--cap-accent);
+        box-shadow: 0 0 0 0.06em var(--cap-accent);
+      }
+      .capdemo .bandline {
+        position: absolute;
+        left: 0;
+        right: 0;
+        bottom: 16.67cqh;
+        border-top: 1px dashed rgba(27, 37, 102, 0.28);
+        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(--ink);
+        opacity: 0.5;
+        z-index: 4;
+      }
+    </style>
+    <section>
+      <div class="sec-head">
+        <span class="micro">06</span>
+        <h2>Captions</h2>
+        <span class="sp"></span><span class="micro">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="bloom" style="width: 54%; height: 60%; left: 10%; top: 12%"></div>
+            <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="pn">05 / 06</div>
+          </div>
+        </div>
+        <div class="fw">
+          <div class="flabel">
+            <b>Settled line</b><span>· all spoken · underprint cleared</span>
+          </div>
+          <div class="frame capdemo">
+            <div
+              class="bloom"
+              style="width: 50%; height: 58%; right: -6%; bottom: -6%; left: auto"
+            ></div>
+            <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="pn">06 / 06</div>
+          </div>
+        </div>
+      </div>
+    </section>
+    <div class="foot">
+      <span class="l">Biennale Yellow</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="#E9E5DB" />
+        <circle cx="42" cy="42" r="34" fill="#F1EE2E" opacity="0.55" />
+        <text x="14" y="64" font-family="Georgia" font-size="30" fill="#1B2566">Aa</text>
+        <rect x="14" y="74" width="60" height="1.5" fill="#1B2566" />
+      </svg>
+    </template>
+  </body>
+</html>