howone 0.1.19 → 0.1.22

package/templates/vite/.howone/skills/hallmark/site/_tests/02-streampipe-cli/style.css

@@ -0,0 +1,250 @@
+/* Hallmark · macrostructure: Long Document · H5 hero knobs: salutation=command, body=2 paragraphs, signoff=mit-license
+ * theme: Terminal · accent: phosphor-green ~6% (functional, not decorative)
+ * enrichment: Tier-A inline CSS-art terminal blocks (no sticky pin, no Lottie)
+ * studied: no · context: explicit · v0.6.0
+ */
+
+:root {
+  --color-paper: oklch(13% 0.020 150);
+  --color-paper-2: oklch(17% 0.022 150);
+  --color-rule: oklch(28% 0.025 150);
+  --color-ink: oklch(86% 0.040 150);
+  --color-ink-soft: oklch(62% 0.040 150);
+  --color-accent: oklch(82% 0.20 150);
+  --color-accent-dim: oklch(58% 0.16 150);
+  --color-amber: oklch(78% 0.18 80);
+
+  --font-mono: "IBM Plex Mono", "JetBrains Mono", ui-monospace, SFMono-Regular, Menlo, monospace;
+
+  --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;
+
+  --measure-prose: 64ch;
+
+  --ease-out: cubic-bezier(0.2, 0.8, 0.2, 1);
+  --dur-micro: 100ms;
+}
+
+* { box-sizing: border-box; }
+
+html, body { overflow-x: clip; }
+
+body {
+  margin: 0;
+  background: var(--color-paper);
+  color: var(--color-ink);
+  font-family: var(--font-mono);
+  font-size: 0.9375rem;
+  line-height: 1.6;
+  -webkit-font-smoothing: antialiased;
+}
+
+.page {
+  max-width: 56rem;
+  margin: 0 auto;
+  padding: var(--space-2xl) var(--space-lg) var(--space-3xl);
+}
+
+/* Masthead */
+.masthead {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  border-block-end: 1px solid var(--color-rule);
+  padding-block-end: var(--space-sm);
+  margin-block-end: var(--space-2xl);
+  font-size: 0.8125rem;
+  text-transform: uppercase;
+  letter-spacing: 0.06em;
+  color: var(--color-ink-soft);
+}
+
+.masthead__brand { color: var(--color-accent); }
+.masthead__meta { font-variant-numeric: tabular-nums; }
+
+/* Lede — the salutation-as-command */
+.lede {
+  font-size: clamp(1.25rem, 2.2vw, 1.75rem);
+  line-height: 1.4;
+  margin: 0 0 var(--space-xl);
+  color: var(--color-ink);
+  max-width: var(--measure-prose);
+}
+
+.lede__prompt {
+  color: var(--color-accent);
+  margin-inline-end: 0.5ch;
+}
+
+.lede__caret {
+  display: inline-block;
+  width: 0.55ch;
+  height: 1.15em;
+  background: var(--color-accent);
+  vertical-align: -0.18em;
+  margin-inline-start: 0.15em;
+  animation: caret 1s steps(2, jump-none) infinite;
+}
+
+@keyframes caret {
+  0%, 50% { opacity: 1; }
+  50.01%, 100% { opacity: 0; }
+}
+
+@media (prefers-reduced-motion: reduce) {
+  .lede__caret { animation: none; opacity: 0.7; }
+}
+
+/* Body prose */
+.prose {
+  max-width: var(--measure-prose);
+  font-size: 0.9375rem;
+  line-height: 1.7;
+}
+
+.prose p {
+  margin: 0 0 var(--space-md);
+  color: var(--color-ink);
+}
+
+.prose strong { color: var(--color-accent); font-weight: 500; }
+
+.prose a {
+  color: var(--color-accent);
+  text-decoration: underline;
+  text-decoration-color: var(--color-accent-dim);
+  text-underline-offset: 3px;
+  transition: text-decoration-color var(--dur-micro) var(--ease-out);
+}
+
+.prose a:hover, .prose a:focus-visible {
+  text-decoration-color: var(--color-accent);
+}
+
+.prose a:focus-visible {
+  outline: 2px solid var(--color-accent);
+  outline-offset: 3px;
+}
+
+/* Inline terminal blocks */
+.term {
+  background: var(--color-paper-2);
+  border: 1px solid var(--color-rule);
+  border-radius: 4px;
+  padding: var(--space-md);
+  margin: var(--space-lg) 0;
+  font-size: 0.875rem;
+  line-height: 1.55;
+  overflow-x: auto;
+  position: relative;
+}
+
+.term__line { display: block; white-space: pre; color: var(--color-ink); }
+.term__line .term__prompt { color: var(--color-accent); }
+.term__line .term__flag { color: var(--color-amber); }
+.term__line .term__comment { color: var(--color-ink-soft); }
+.term__line.term__line--out { color: var(--color-ink-soft); }
+
+/* Section headings */
+.section {
+  margin-block-start: var(--space-2xl);
+  padding-block-start: var(--space-md);
+  border-block-start: 1px solid var(--color-rule);
+}
+
+.section__head {
+  display: flex;
+  justify-content: space-between;
+  align-items: baseline;
+  margin: 0 0 var(--space-md);
+  font-size: 0.8125rem;
+  text-transform: uppercase;
+  letter-spacing: 0.08em;
+  color: var(--color-ink-soft);
+}
+
+.section__num {
+  color: var(--color-accent);
+  font-weight: 500;
+}
+
+/* Numbered note rows (How it works) */
+.notes { display: grid; gap: var(--space-md); }
+.note {
+  display: grid;
+  grid-template-columns: 4ch 1fr;
+  gap: var(--space-md);
+  align-items: baseline;
+}
+.note__num {
+  color: var(--color-accent);
+  font-variant-numeric: tabular-nums;
+}
+.note__body {
+  color: var(--color-ink);
+  max-width: var(--measure-prose);
+}
+.note__body strong { color: var(--color-accent); font-weight: 500; }
+
+/* Flag spec table */
+.flags {
+  width: 100%;
+  border-collapse: collapse;
+  font-size: 0.8125rem;
+}
+.flags th, .flags td {
+  text-align: start;
+  padding: var(--space-2xs) var(--space-sm) var(--space-2xs) 0;
+  border-block-end: 1px solid var(--color-rule);
+  vertical-align: baseline;
+}
+.flags th {
+  font-weight: 500;
+  color: var(--color-ink-soft);
+  text-transform: uppercase;
+  letter-spacing: 0.06em;
+}
+.flags td:first-child { color: var(--color-accent); width: 18ch; }
+
+/* Colophon */
+.colophon {
+  margin-block-start: var(--space-3xl);
+  padding-block-start: var(--space-md);
+  border-block-start: 1px solid var(--color-rule);
+  display: flex;
+  flex-wrap: wrap;
+  gap: var(--space-md) var(--space-xl);
+  font-size: 0.8125rem;
+  text-transform: uppercase;
+  letter-spacing: 0.06em;
+  color: var(--color-ink-soft);
+}
+
+.colophon a {
+  color: var(--color-ink-soft);
+  text-decoration: none;
+  transition: color var(--dur-micro) var(--ease-out);
+}
+
+.colophon a:hover, .colophon a:focus-visible {
+  color: var(--color-accent);
+}
+
+.colophon a:focus-visible {
+  outline: 2px solid var(--color-accent);
+  outline-offset: 3px;
+}
+
+/* Mobile */
+@media (max-width: 40rem) {
+  .page { padding: var(--space-xl) var(--space-md) var(--space-2xl); }
+  .lede { font-size: 1.125rem; }
+  .note { grid-template-columns: 3ch 1fr; gap: var(--space-sm); }
+}

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

@@ -0,0 +1,64 @@
+# 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

@@ -0,0 +1,131 @@
+<!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

@@ -0,0 +1,240 @@
+/* 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; }
+}