npm - howone - Versions diffs - 0.1.28 → 0.1.30 - Mend

howone 0.1.28 → 0.1.30

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

package/templates/vite/.howone/skills/hallmark/site/_tests/03-maple-bakery/brief.md DELETED Viewed

@@ -1,64 +0,0 @@
-# Test 03 v2 — Maple Street Bread (artisan bakery)
-## The prompt (verbatim, same as v1)
-> "Landing page for Maple Street Bread. Audience: locals who want to buy bread. Use: see what's available + visit. Tone: warm, hand-set, considered."
-## Step 0 · Pre-flight
-> *"No pre-flight signals — proceeding with full Hallmark stack."*
-## Step 1 · Design-context gate — fully answered
-Audience, use, tone all explicit.
-## Step 2.5 · Project memory rotation
-> *"Previous run on this brief picked Long Document + Linen + Tier-B SVG loaf. Picking from {Catalogue, Photographic, Letter} this time — Catalogue wins because the brief says 'see what's available' (the user is shopping a board, not reading a story)."*
->
-> *"Theme rotation: Linen (light · geometric-sans · warm-amber) → Almanac (light · roman-serif · warm-amber). Differs on display style. Passes."*
-## Step 3 · Visual ruleset loaded
-`macrostructures.md` (Catalogue), `component-cookbook.md` (item-card archetypes, market-board headings), `typography.md` (Almanac pairing — IM Fell Display + Source Serif body), `color.md` (warm parchment palette), `microinteractions.md` (single primitive: hover line-rule on item rows), `anti-patterns.md`.
-## Step 4 · Hero enrichment
-> *"Enrichment: Tier-A pure-CSS bread silhouettes per item. Each row has a small (96 px) hand-drawn loaf shape rendered as inline SVG with a single accent stroke. No photography (raw bread photos read as Midjourney). No Lottie. Eight breads × eight tiny SVGs = ~140 lines of inline SVG total."*
-## Step 5 · Preview
-```markdown
-**Hallmark · v0.6.0**
-- **Macrostructure** · Catalogue
-- **Theme** · Almanac (warm parchment paper · IM Fell Display roman-serif · warm-amber accent ~3%)
-- **Enrichment** · Tier-A pure-CSS / inline-SVG bread silhouettes (one per item, 96px)
-- **Sections** · Masthead · Today's bake (8-item catalogue grid) · Visit · Colophon
-- **Motion** · row hover-rule (1 primitive)
-- **Slop test** · 38 / 38 ✓
-- **Diversification** · differs from v1 (Long Document/Linen) on macrostructure + display style
-```
-## Step 6 · Macrostructure stamp
-```
-/* Hallmark · macrostructure: Catalogue · F1 catalogue knobs: tiles=8, columns=2, rule=hairline-between
- * theme: Almanac · accent: warm-amber ~3% · enrichment: tier-A inline SVG bread silhouettes
- * studied: no · context: explicit · v0.6.0
- */
-```
-## What changed vs v1
-- **Macro:** Long Document → Catalogue. v1 was a prose-led page with the menu as a quiet aside; v2 makes the menu the hero. The brief says "see what's available + visit" — Catalogue answers it more directly.
-- **Theme:** Linen → Almanac. Both warm-paper, both light. Linen is geometric-sans display; Almanac is roman-serif display (IM Fell, period almanac feel). Display style differs.
-- **Enrichment:** v1's single hand-built loaf with a `@property --rise` breathing loop becomes eight smaller item-level silhouettes, no animation. The page is busier, which Catalogue can carry; the v1 page would have been overloaded.
-- **Voice:** v1 opened with a time-stamped salutation ("Saturday, 6:14 a.m."); v2 opens with a market-board "Today's bake" with date and a count.
-## What stayed the same
-- Brand: Maple Street Bread, Lisbon.
-- Tier-A/B custom-craft (no Lottie, no Midjourney).
-- Slop test: 38 / 38 ✓.
-- Footer: visit and hours (no online ordering — same as the brief).

package/templates/vite/.howone/skills/hallmark/site/_tests/03-maple-bakery/index.html DELETED Viewed

@@ -1,131 +0,0 @@
-<!doctype html>
-<html lang="en">
-<head>
-  <meta charset="utf-8" />
-  <meta name="viewport" content="width=device-width, initial-scale=1" />
-  <title>Maple Street Bread — daily catalogue</title>
-  <meta name="description" content="A small artisan bakery in Lisbon. Sourdough, slow, by hand. Open at seven, thirty loaves, gone by noon, no online orders." />
-  <link rel="preconnect" href="https://fonts.googleapis.com" />
-  <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
-  <link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=IM+Fell+English+SC&family=IM+Fell+English:ital@0;1&family=Source+Serif+4:ital,wght@0,400;0,500;1,400&display=swap" />
-  <link rel="stylesheet" href="style.css" />
-</head>
-<body>
-  <main class="page">
-    <header class="masthead">
-      <hr class="masthead__rule" />
-      <h1 class="masthead__brand">Maple Street Bread</h1>
-      <p class="masthead__sub">Lisbon · est. 2026 · n.º 47 · sourdough <strong>by hand</strong></p>
-    </header>
-    <section class="todays">
-      <h2 class="todays__head">Today's bake</h2>
-      <p class="todays__date">Saturday — 6:14 a.m. — eight breads, gone by noon</p>
-    </section>
-    <ul class="catalogue" role="list" aria-label="Today's breads">
-      <!-- 1 -->
-      <li class="bread">
-        <span class="bread__shape bread__shape--accent" aria-hidden="true">
-          <svg viewBox="0 0 96 96"><ellipse cx="48" cy="52" rx="36" ry="22"/><path d="M22 50 q12 -16 26 -16 t26 16"/><path d="M30 50 q4 -8 18 -8" /></svg>
-        </span>
-        <div class="bread__body">
-          <h3 class="bread__name">Country sourdough</h3>
-          <p class="bread__desc">Wild starter, 80 % white, 20 % wholewheat, twenty-four hour cold proof.</p>
-        </div>
-        <span class="bread__price">€5.50</span>
-      </li>
-      <!-- 2 -->
-      <li class="bread">
-        <span class="bread__shape" aria-hidden="true">
-          <svg viewBox="0 0 96 96"><path d="M14 48 L82 48 M14 48 q4 -10 8 0 M30 48 q4 -10 8 0 M46 48 q4 -10 8 0 M62 48 q4 -10 8 0"/><ellipse cx="48" cy="48" rx="38" ry="6"/></svg>
-        </span>
-        <div class="bread__body">
-          <h3 class="bread__name">Baguette tradition</h3>
-          <p class="bread__desc">T65 flour, four hours bulk, scored deep. Two per customer.</p>
-        </div>
-        <span class="bread__price">€2.80</span>
-      </li>
-      <!-- 3 -->
-      <li class="bread">
-        <span class="bread__shape" aria-hidden="true">
-          <svg viewBox="0 0 96 96"><rect x="20" y="32" width="56" height="32" rx="4"/><circle cx="34" cy="44" r="2"/><circle cx="48" cy="40" r="2"/><circle cx="62" cy="48" r="2"/><circle cx="42" cy="56" r="2"/><circle cx="58" cy="52" r="2"/></svg>
-        </span>
-        <div class="bread__body">
-          <h3 class="bread__name">Focaccia, rosemary</h3>
-          <p class="bread__desc">Twenty-eight squares, olive oil, sea-salt, herb from the garden behind.</p>
-        </div>
-        <span class="bread__price">€4.20</span>
-      </li>
-      <!-- 4 -->
-      <li class="bread">
-        <span class="bread__shape bread__shape--accent" aria-hidden="true">
-          <svg viewBox="0 0 96 96"><circle cx="48" cy="48" r="32"/><circle cx="48" cy="48" r="20"/><path d="M48 16 L48 80 M16 48 L80 48"/></svg>
-        </span>
-        <div class="bread__body">
-          <h3 class="bread__name">Boule, miche</h3>
-          <p class="bread__desc">A 2 kg round, kept overnight, eats for three meals. Slice across the grain.</p>
-        </div>
-        <span class="bread__price">€11.00</span>
-      </li>
-      <!-- 5 -->
-      <li class="bread">
-        <span class="bread__shape" aria-hidden="true">
-          <svg viewBox="0 0 96 96"><path d="M16 56 q16 -32 32 -32 t32 32"/><path d="M22 50 L32 50 M40 44 L50 44 M58 48 L68 48"/></svg>
-        </span>
-        <div class="bread__body">
-          <h3 class="bread__name">Rye, dark</h3>
-          <p class="bread__desc">100 % rye, no wheat. Caraway and treacle. Keeps a week, slices thin.</p>
-        </div>
-        <span class="bread__price">€6.20</span>
-      </li>
-      <!-- 6 -->
-      <li class="bread">
-        <span class="bread__shape" aria-hidden="true">
-          <svg viewBox="0 0 96 96"><path d="M20 50 q14 -20 28 -20 t28 20" /><path d="M20 50 q14 18 28 18 t28 -18"/><path d="M48 30 L48 68"/></svg>
-        </span>
-        <div class="bread__body">
-          <h3 class="bread__name">Brioche feuilletée</h3>
-          <p class="bread__desc">Laminated brioche, Friday only. Six per bake.</p>
-        </div>
-        <span class="bread__price bread__price--out">sold out</span>
-      </li>
-      <!-- 7 -->
-      <li class="bread">
-        <span class="bread__shape bread__shape--accent" aria-hidden="true">
-          <svg viewBox="0 0 96 96"><path d="M16 70 L48 24 L80 70 Z"/><path d="M30 70 L48 44 L66 70"/></svg>
-        </span>
-        <div class="bread__body">
-          <h3 class="bread__name">Walnut levain</h3>
-          <p class="bread__desc">Sourdough, eight per cent walnut, baked dark. Cheese-board bread.</p>
-        </div>
-        <span class="bread__price">€7.40</span>
-      </li>
-      <!-- 8 -->
-      <li class="bread">
-        <span class="bread__shape" aria-hidden="true">
-          <svg viewBox="0 0 96 96"><circle cx="32" cy="48" r="14"/><circle cx="64" cy="48" r="14"/><path d="M32 34 L32 62 M64 34 L64 62"/></svg>
-        </span>
-        <div class="bread__body">
-          <h3 class="bread__name">Bola d'óleo, twins</h3>
-          <p class="bread__desc">Two small soft rolls, olive oil, salt-flaked. Sold paired.</p>
-        </div>
-        <span class="bread__price">€3.00</span>
-      </li>
-    </ul>
-    <section class="visit">
-      <h2 class="visit__head">Visit</h2>
-      <div class="visit__lines">
-        <span><strong>Rua dos Anjos 92, Lisbon</strong></span>
-        <span><em>Tuesday – Saturday, 7 a.m. until the loaves are gone (usually noon)</em></span>
-        <span><em>No online orders. Bring a bag.</em></span>
-      </div>
-    </section>
-    <footer class="colophon">
-      <span>Maple Street · Saturday, May the first · the year twenty twenty-six</span>
-    </footer>
-  </main>
-</body>
-</html>

package/templates/vite/.howone/skills/hallmark/site/_tests/03-maple-bakery/style.css DELETED Viewed

@@ -1,240 +0,0 @@
-/* Hallmark · macrostructure: Catalogue · F1 catalogue knobs: tiles=8, columns=2, rule=hairline-between
- * theme: Almanac · accent: warm-amber ~3% · enrichment: tier-A inline SVG bread silhouettes
- * studied: no · context: explicit · v0.6.0
- */
-:root {
-  --color-paper: oklch(94% 0.022 80);
-  --color-paper-2: oklch(91% 0.024 80);
-  --color-ink: oklch(24% 0.020 50);
-  --color-ink-soft: oklch(40% 0.020 55);
-  --color-rule: oklch(78% 0.020 70);
-  --color-accent: oklch(58% 0.14 50);
-  --font-display: "IM Fell English SC", "IM Fell English", "EB Garamond", "Cormorant Garamond", Georgia, serif;
-  --font-body: "Source Serif 4", "Iowan Old Style", Georgia, serif;
-  --space-3xs: 0.25rem;
-  --space-2xs: 0.5rem;
-  --space-xs: 0.75rem;
-  --space-sm: 1rem;
-  --space-md: 1.5rem;
-  --space-lg: 2rem;
-  --space-xl: 3rem;
-  --space-2xl: 4.5rem;
-  --space-3xl: 6.5rem;
-  --ease-out: cubic-bezier(0.2, 0.8, 0.2, 1);
-  --dur-micro: 140ms;
-}
-* { box-sizing: border-box; }
-html, body { overflow-x: clip; }
-body {
-  margin: 0;
-  background: var(--color-paper);
-  background-image:
-    radial-gradient(circle at 20% 10%, oklch(92% 0.026 75 / 0.5), transparent 40%),
-    radial-gradient(circle at 80% 90%, oklch(92% 0.026 60 / 0.4), transparent 50%);
-  color: var(--color-ink);
-  font-family: var(--font-body);
-  font-size: 1.0625rem;
-  line-height: 1.55;
-  -webkit-font-smoothing: antialiased;
-}
-.page {
-  max-width: 64rem;
-  margin: 0 auto;
-  padding: var(--space-2xl) var(--space-lg) var(--space-3xl);
-}
-/* Masthead — almanac plate-banner */
-.masthead {
-  text-align: center;
-  border-block-end: 2px double var(--color-rule);
-  padding-block-end: var(--space-lg);
-  margin-block-end: var(--space-2xl);
-}
-.masthead__rule {
-  width: 4ch;
-  border: 0;
-  border-block-start: 1px solid var(--color-ink);
-  margin: 0 auto var(--space-md);
-}
-.masthead__brand {
-  font-family: var(--font-display);
-  font-size: clamp(2.5rem, 6vw, 4.5rem);
-  font-weight: 400;
-  letter-spacing: 0.02em;
-  margin: 0 0 var(--space-2xs);
-  color: var(--color-ink);
-  line-height: 1;
-}
-.masthead__sub {
-  font-family: var(--font-display);
-  font-size: 0.875rem;
-  letter-spacing: 0.16em;
-  text-transform: uppercase;
-  color: var(--color-ink-soft);
-  margin: 0;
-}
-.masthead__sub strong { color: var(--color-accent); font-weight: 400; }
-/* Today's bake — section heading */
-.todays {
-  text-align: center;
-  margin-block-end: var(--space-xl);
-}
-.todays__head {
-  font-family: var(--font-display);
-  font-size: clamp(1.5rem, 3vw, 2.25rem);
-  font-weight: 400;
-  letter-spacing: 0.02em;
-  margin: 0 0 var(--space-2xs);
-  color: var(--color-ink);
-}
-.todays__date {
-  font-family: var(--font-body);
-  font-style: italic;
-  font-size: 1rem;
-  color: var(--color-ink-soft);
-  margin: 0;
-}
-/* Catalogue grid */
-.catalogue {
-  display: grid;
-  grid-template-columns: repeat(2, 1fr);
-  gap: 0;
-  border-block-start: 1px solid var(--color-rule);
-}
-.bread {
-  display: grid;
-  grid-template-columns: 96px 1fr auto;
-  align-items: center;
-  gap: var(--space-md);
-  padding: var(--space-lg) var(--space-md);
-  border-block-end: 1px solid var(--color-rule);
-  position: relative;
-  transition: background var(--dur-micro) var(--ease-out);
-}
-.bread:nth-child(odd) {
-  border-inline-end: 1px solid var(--color-rule);
-}
-.bread:hover { background: var(--color-paper-2); }
-.bread__shape {
-  width: 96px;
-  height: 96px;
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  color: var(--color-ink-soft);
-}
-.bread__shape svg {
-  width: 100%;
-  height: 100%;
-  fill: none;
-  stroke: currentColor;
-  stroke-width: 1.5;
-  stroke-linecap: round;
-  stroke-linejoin: round;
-}
-.bread__shape--accent svg { stroke: var(--color-accent); }
-.bread__body { min-width: 0; }
-.bread__name {
-  font-family: var(--font-display);
-  font-size: 1.375rem;
-  font-weight: 400;
-  letter-spacing: 0.01em;
-  margin: 0 0 var(--space-3xs);
-  color: var(--color-ink);
-}
-.bread__desc {
-  font-family: var(--font-body);
-  font-style: italic;
-  font-size: 0.9375rem;
-  color: var(--color-ink-soft);
-  margin: 0;
-  line-height: 1.4;
-}
-.bread__price {
-  font-family: var(--font-display);
-  font-size: 1.125rem;
-  font-variant-numeric: tabular-nums;
-  color: var(--color-ink);
-  white-space: nowrap;
-}
-.bread__price--out {
-  color: var(--color-ink-soft);
-  font-style: italic;
-  font-family: var(--font-body);
-  font-size: 0.9375rem;
-}
-/* Visit */
-.visit {
-  margin-block-start: var(--space-2xl);
-  padding: var(--space-xl) var(--space-md);
-  border-block-start: 2px double var(--color-rule);
-  border-block-end: 2px double var(--color-rule);
-  text-align: center;
-}
-.visit__head {
-  font-family: var(--font-display);
-  font-size: 1.5rem;
-  font-weight: 400;
-  margin: 0 0 var(--space-md);
-}
-.visit__lines {
-  display: grid;
-  gap: var(--space-2xs);
-  font-family: var(--font-body);
-  font-size: 1rem;
-  color: var(--color-ink);
-}
-.visit__lines em {
-  font-style: italic;
-  color: var(--color-ink-soft);
-}
-/* Colophon */
-.colophon {
-  margin-block-start: var(--space-2xl);
-  text-align: center;
-  font-family: var(--font-display);
-  font-size: 0.75rem;
-  letter-spacing: 0.16em;
-  text-transform: uppercase;
-  color: var(--color-ink-soft);
-}
-/* Mobile */
-@media (max-width: 48rem) {
-  .catalogue { grid-template-columns: 1fr; }
-  .bread:nth-child(odd) { border-inline-end: none; }
-  .bread { grid-template-columns: 64px 1fr auto; gap: var(--space-sm); padding: var(--space-md) var(--space-2xs); }
-  .bread__shape { width: 64px; height: 64px; }
-  .bread__name { font-size: 1.125rem; }
-}

package/templates/vite/.howone/skills/hallmark/site/_tests/04-meridian-manifesto/brief.md DELETED Viewed

@@ -1,67 +0,0 @@
-# Test 04 v2 — Meridian (studio manifesto)
-## The prompt (verbatim, same as v1)
-> "Make me a manifesto for my new studio called Meridian. We work on environmental products. No flashy stuff."
-## Step 0 · Pre-flight
-> *"No pre-flight signals — proceeding with full Hallmark stack."*
-## Step 1 · Design-context gate — partial → inferred
-User gave audience-implied + tone (declarative, no flash). Skill infers:
-> *"Going with: audience = potential clients and collaborators · use = read our position · tone = declarative, polemical, restrained. If any of those is wrong, redirect."*
-## Step 2.5 · Project memory rotation
-> *"Previous run on this brief picked Manifesto + Manifesto + none. Picking from {Quote-Led, Stat-Led, Numbered Theses} for the macro this time — Quote-Led wins because a manifesto can be one sentence as easily as it can be five, and the rotation rule pushes away from the Manifesto-named-twice pattern."*
->
-> *"Theme rotation: Manifesto (dark · Inter Tight 900 display-heavy · red bleed) → Brutal (dark · Druk-condensed display · single yellow strike). Differs on display style and accent hue. Passes."*
-## Step 3 · Visual ruleset loaded
-`macrostructures.md` (Quote-Led), `component-cookbook.md` (H3 pull-quote hero), `typography.md` (display-heavy condensed), `color.md` (Brutal palette: dark, single bold accent), `microinteractions.md` (none — manifesto is typography-only), `anti-patterns.md`.
-## Step 4 · Hero enrichment
-> *"Enrichment: none. Quote-Led + Brutal is already loud; adding any visual would dilute the polemic. The 'no flashy stuff' constraint maps directly here — voice is the design."*
-## Step 5 · Preview
-```markdown
-**Hallmark · v0.6.0**
-- **Macrostructure** · Quote-Led
-- **Theme** · Brutal (near-black paper · Druk-condensed display · yellow strike accent)
-- **Enrichment** · none (typography only — voice is the design)
-- **Sections** · Masthead · Pull-quote (the hero) · Four principles · Working rules · Colophon
-- **Motion** · none — typography only
-- **Slop test** · 38 / 38 ✓
-- **Diversification** · differs from v1 (Manifesto/Manifesto) on macrostructure + display style + accent hue
-```
-## Step 6 · Macrostructure stamp
-```
-/* Hallmark · macrostructure: Quote-Led · H3 hero knobs: weight=display-condensed-bold, attribution=under-quote, length=20-words
- * theme: Brutal · accent: strike-yellow ~3% (used as bleed-rule + one struck word)
- * enrichment: none (typography only — voice is the design)
- * studied: no · context: partial, inferred (audience + use) · v0.6.0
- */
-```
-## What changed vs v1
-- **Macro:** Manifesto → Quote-Led. v1 leads with five numbered declarations + a bleed band; v2 leads with one twenty-word pull-quote + three supporting principles. Different rhetoric, same brief.
-- **Theme:** Manifesto (Inter Tight 900) → Brutal (Druk-condensed). Both dark, both display-heavy, but Brutal's condensed cap-height reads sharper for a single-quote hero. Accent shifts from red to yellow.
-- **Voice:** v1 says "WE ARE A STUDIO. WE ARE NOT A PLATFORM." (one of five lines); v2 stakes the page on "We make products that don't outlive their use" as the single hero claim.
-- **Section count:** v1 had ~9 sections; v2 has 5. Quote-Led wants brevity — the quote is the page.
-## What stayed the same
-- Brand and tone: Meridian, environmental products, "no flashy stuff."
-- Enrichment: none on both. Voice is the design.
-- Slop test: 38 / 38 ✓.
-- Dark paper. Single accent. No gradients. No rounded corners.

package/templates/vite/.howone/skills/hallmark/site/_tests/04-meridian-manifesto/index.html DELETED Viewed

@@ -1,86 +0,0 @@
-<!doctype html>
-<html lang="en">
-<head>
-  <meta charset="utf-8" />
-  <meta name="viewport" content="width=device-width, initial-scale=1" />
-  <title>Meridian — environmental product practice</title>
-  <meta name="description" content="A small environmental products design practice. We make products that don't outlive their use." />
-  <link rel="preconnect" href="https://fonts.googleapis.com" />
-  <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
-  <link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Bebas+Neue&family=Inter+Tight:wght@400;500;600&family=JetBrains+Mono:wght@400;500&display=swap" />
-  <link rel="stylesheet" href="style.css" />
-</head>
-<body>
-  <main class="page">
-    <header class="masthead">
-      <span class="masthead__brand">MERIDIAN <strong>·</strong> environmental product practice</span>
-      <span class="masthead__meta">Lisbon · est. 2026 · n.º I</span>
-    </header>
-    <section class="hero">
-      <h1 class="quote">
-        We make products that don't <span class="quote__strike">outlive</span> their use.
-        <span class="quote__attr">— The studio · the position we open with · this is the page.</span>
-      </h1>
-    </section>
-    <section class="principles" aria-labelledby="principles-h">
-      <h2 class="principles__head" id="principles-h">§ Four principles</h2>
-      <ol class="principles__list">
-        <li class="principle">
-          <span class="principle__num">01.</span>
-          <h3 class="principle__head">Fewer things, made well</h3>
-          <p class="principle__body">
-            We don't pitch ranges. We don't pitch families. The studio works on one product at a
-            time, finishes it, and starts the next. <strong>If we can't end-of-life it cleanly, we
-            don't make it.</strong>
-          </p>
-        </li>
-        <li class="principle">
-          <span class="principle__num">02.</span>
-          <h3 class="principle__head">Material is the brief</h3>
-          <p class="principle__body">
-            Every project starts with the material accounting — what it's made of, where it comes
-            from, how it returns. <strong>Form follows the spec, not the visual mood-board.</strong>
-            We send the LCA before we send the render.
-          </p>
-        </li>
-        <li class="principle">
-          <span class="principle__num">03.</span>
-          <h3 class="principle__head">Repair before replace</h3>
-          <p class="principle__body">
-            Every product ships with a service manual, an exploded BOM, and the tools to take it
-            apart. <strong>If it can't be opened, fixed, and closed again, it's not finished.</strong>
-            Repair is a feature, not a footnote.
-          </p>
-        </li>
-        <li class="principle">
-          <span class="principle__num">04.</span>
-          <h3 class="principle__head">Slow is the deliverable</h3>
-          <p class="principle__body">
-            We work with three clients a year. We turn the rest down. <strong>Slow is a craft
-            position before it is a marketing one</strong> — fast, in this practice, is what you do
-            when you don't yet know what you're making.
-          </p>
-        </li>
-      </ol>
-    </section>
-    <section class="rules" aria-labelledby="rules-h">
-      <h2 class="rules__head" id="rules-h">§ Working rules</h2>
-      <ol class="rules__list">
-        <li class="rules__item"><span class="rules__num">i.</span><span>The shop runs on a four-day week. Friday is for the workshop.</span></li>
-        <li class="rules__item"><span class="rules__num">ii.</span><span>We answer the email ourselves. There is no account manager.</span></li>
-        <li class="rules__item"><span class="rules__num">iii.</span><span>The first thing we send is the spec. The render comes after.</span></li>
-        <li class="rules__item"><span class="rules__num">iv.</span><span>We don't sign NDAs that prevent us from naming the material.</span></li>
-        <li class="rules__item"><span class="rules__num">v.</span><span>We publish what we learn. The notes are the practice.</span></li>
-      </ol>
-    </section>
-    <footer class="colophon">
-      <span>Meridian · Rua dos Anjos 38, Lisbon · the year twenty twenty-six</span>
-      <span><a href="mailto:hello@meridian.studio">hello@meridian.studio</a></span>
-    </footer>
-  </main>
-</body>
-</html>