howone 0.1.20 → 0.1.22

package/templates/vite/.howone/skills/hallmark/site/css/sections.css

@@ -0,0 +1,2072 @@
+/* Hallmark — sections (with per-theme structural overrides) */
+
+/* — Page scaffold ——————————————————————————————————— */
+.page {
+  max-width: var(--page-max);
+  margin-inline: auto;
+  display: grid;
+  gap: var(--section-gap);
+  /* No bottom padding — the colophon owns its own end-spacing.
+     A page-level bottom padding stacks on top of the footer's own
+     padding and reads as dead space below "Made by Together AI". */
+  padding-block: var(--space-2xl) 0;
+  padding-inline: var(--page-gutter);
+}
+
+/* — Slot — a region whose component archetype swaps per theme ————— */
+.slot {
+  display: block;
+  min-height: 1px; /* keeps reveal animation valid before populated */
+}
+
+/* — Section container ——————————————————————————————— */
+.section {
+  display: grid;
+  gap: var(--space-xl);          /* tightened from 2xl in v0.9 — content sits closer to its head */
+  position: relative;            /* anchors absolute children (hidden radios) */
+}
+
+/* Section head — single-column always. Section label stacks ABOVE
+   the title, separated by a small gap. No more 10rem fixed sidebar
+   that forced the section label ("ANTI-PATTERNS") to wrap on
+   themes that needed wider title columns. Section titles can grow
+   bigger now since they have full width. */
+/* Single-column always — label sits ABOVE title across every theme.
+   No theme override should put the label in a left gutter (caused
+   uncomfortable wrapping + alignment drift between sections). */
+.section__head,
+[data-theme] .section__head {
+  display: grid;
+  grid-template-columns: 1fr !important;
+  gap: var(--space-sm);
+  padding-bottom: var(--section-head-gap);
+  border-bottom: var(--rule-hair) solid var(--color-rule-2);
+}
+
+/* Section label — small mono uppercase coordinate above the title.
+   Hard rule: never wrap. White-space: nowrap forces single-line at
+   every viewport. The label is short ("05 / Foundations") so this
+   is safe. */
+.section-label,
+.section__head .section-label {
+  white-space: nowrap;
+}
+
+.section__title {
+  font-family: var(--font-display);
+  font-weight: var(--display-weight, 400);
+  font-style: var(--display-style, normal);
+  font-size: clamp(2rem, 4vw + 0.5rem, 3.5rem);
+  line-height: var(--lh-tight);
+  letter-spacing: var(--tracking-display);
+  max-width: 28ch;
+  color: var(--color-ink);
+  font-optical-sizing: auto;
+  margin: 0;
+}
+
+/* Narrow viewports — let headings wrap freely + cap display sizes so
+   a long title fits at 320–480 px without being clipped by body's
+   overflow-x: hidden. */
+@media (max-width: 30rem) {
+  .opening__title,
+  .hero__display {
+    font-size: clamp(1.75rem, 9vw, 2.75rem) !important;
+    max-width: 12ch;
+    overflow-wrap: break-word;
+    word-wrap: break-word;
+    hyphens: auto;
+  }
+  .section__title {
+    font-size: clamp(1.375rem, 5.5vw, 1.875rem) !important;
+    max-width: 100%;
+    overflow-wrap: break-word;
+  }
+  .hero__lede,
+  .opening__sub {
+    font-size: 1rem !important;
+    max-width: 100%;
+  }
+}
+
+/* — 01 · Opening ——————————————————————————————————— */
+.opening {
+  display: grid;
+  grid-template-columns: 8fr 4fr;
+  gap: var(--space-2xl);
+  padding-block: var(--space-xl) var(--space-lg);
+  align-items: end;
+}
+
+@media (max-width: 60rem) {
+  .opening { grid-template-columns: 1fr; gap: var(--space-xl); align-items: start; }
+}
+
+.opening__eyebrow {
+  font-family: var(--font-label);
+  font-size: var(--text-xs);
+  letter-spacing: var(--tracking-label);
+  text-transform: uppercase;
+  color: var(--color-muted);
+  margin-bottom: var(--space-lg);
+  display: inline-flex;
+  align-items: center;
+  gap: 0.55em;
+}
+
+.opening__title {
+  font-family: var(--font-display);
+  font-weight: var(--display-weight, 400);
+  font-style: var(--display-style, normal);
+  font-size: var(--text-display);
+  line-height: var(--lh-tight);
+  letter-spacing: var(--tracking-display);
+  color: var(--color-ink);
+  max-width: 15ch;
+  font-optical-sizing: auto;
+  font-variation-settings:
+    "opsz" var(--display-optical, 144),
+    "SOFT" var(--display-soft, 0);
+}
+
+.opening__title em {
+  font-family: var(--font-serif);
+  font-style: italic;
+  font-weight: 400;
+  color: var(--color-ink);
+}
+
+.opening__sub {
+  font-family: var(--font-body);
+  font-weight: 400;
+  font-size: var(--text-md);
+  line-height: var(--lh-normal);
+  color: var(--color-ink-2);
+  max-width: 42ch;
+  margin-top: var(--space-lg);
+}
+
+.opening__aside {
+  display: grid;
+  gap: var(--space-md);
+  padding-top: var(--space-xl);
+}
+
+.opening__rule {
+  height: 0.5rem;
+  width: 3rem;
+  background: var(--color-accent);
+}
+
+.opening__cta {
+  display: grid;
+  gap: var(--space-sm);
+  padding-top: var(--space-md);
+  border-top: var(--rule-hair) solid var(--color-rule);
+}
+
+/* — 02 · Examples rail (full-bleed) ——————————————————— */
+/* The rail escapes the page gutter on both sides so tiles can flow
+   past the max-width. The header above stays inside the gutter. */
+.examples__intro {
+  font-family: var(--font-serif);
+  font-size: var(--text-md);
+  line-height: var(--lh-snug);
+  color: var(--color-ink-2);
+  max-width: 60ch;
+  margin: 0;
+}
+
+
+[data-theme="brutal"] .examples__intro,
+[data-theme="manifesto"] .examples__intro,
+[data-theme="terminal"] .examples__intro,
+[data-theme="sport"] .examples__intro,
+[data-theme="almanac"] .examples__intro {
+  font-family: var(--font-body);
+  font-style: normal;
+}
+
+.examples-rail {
+  display: flex;
+  gap: var(--space-lg);
+  overflow-x: auto;
+  overflow-y: visible;
+  scroll-snap-type: x mandatory;
+  /* Full-bleed: rail spans the full viewport. But the FIRST card
+     starts aligned with the page content (same left edge as the
+     section header), not flush against the viewport. As the user
+     scrolls horizontally, cards travel through the full bleed
+     including the viewport edges — only the initial position
+     respects the page's content gutter. */
+  width: 100vw;
+  margin-inline: calc(50% - 50vw);
+  --rail-edge: max(var(--page-gutter), calc((100vw - var(--page-max)) / 2 + var(--page-gutter)));
+  padding-inline: var(--rail-edge);
+  padding-block: var(--space-md) var(--space-lg);
+  scroll-padding-inline: var(--rail-edge);
+  scrollbar-width: none;
+}
+.examples-rail::-webkit-scrollbar { display: none; }
+
+/* Reserve trailing whitespace inside the rail so the last card snaps
+   clean to the same content edge as the first. */
+.examples-rail::after {
+  content: "";
+  flex: 0 0 var(--rail-edge);
+}
+
+/* — 03 · Without / With (parity panels, four pairs) ——————
+   The section holds four W/W pairs that swap based on which toggle
+   radio is :checked. Pure CSS, no JS.
+
+   Scroll-jump fix: the radio inputs sit in normal document flow
+   with zero size + opacity 0 (no position:absolute). When the user
+   clicks a label, the browser focuses the input — but because the
+   input is already in view (right above the toggle), no scroll
+   happens. Earlier versions used position:absolute which positioned
+   the input at top:0 of the viewport; clicking a label far below
+   would scroll the page back to the top. */
+.vs-toggle__input {
+  /* Pulled out of the section's grid (otherwise each hidden radio plus each
+     hidden .vs panel adds a `var(--space-2xl)` phantom gap between the
+     section header and the first visible child). Anchored absolute inside
+     the section (which is position: relative) so focus doesn't scroll the
+     page back to the viewport top. */
+  position: absolute;
+  top: 0;
+  left: 0;
+  appearance: none;
+  -webkit-appearance: none;
+  width: 0;
+  height: 0;
+  margin: 0;
+  padding: 0;
+  border: 0;
+  outline: 0;
+  opacity: 0;
+  pointer-events: none;
+}
+
+.vs-toggle {
+  display: inline-flex;
+  flex-wrap: wrap;
+  align-items: center;
+  gap: 0;
+  padding: 0.25rem;
+  background: var(--color-paper-2);
+  border: 1px solid var(--color-rule);
+  border-radius: var(--radius-pill, 999px);
+  margin-block-end: var(--space-xl);
+  align-self: start;
+  max-width: 100%;
+}
+
+.vs-toggle__btn {
+  display: inline-flex;
+  align-items: center;
+  gap: 0.4em;
+  padding: 0.45rem 0.95rem;
+  font-family: var(--font-label);
+  font-size: var(--text-xs);
+  letter-spacing: var(--tracking-label);
+  text-transform: uppercase;
+  color: var(--color-muted);
+  cursor: pointer;
+  border-radius: var(--radius-pill, 999px);
+  transition: background-color var(--dur-micro) var(--ease-out),
+              color var(--dur-micro) var(--ease-out);
+  user-select: none;
+  white-space: nowrap;
+}
+
+.vs-toggle__btn:hover { color: var(--color-ink); }
+
+.vs-toggle__num {
+  font-family: var(--font-mono);
+  font-size: 0.75em;
+  letter-spacing: 0.04em;
+  color: inherit;
+  opacity: 0.6;
+  font-feature-settings: "tnum";
+}
+
+.vs-toggle__label {
+  font-weight: 500;
+}
+
+/* Focus ring on whichever button corresponds to the focused input. */
+#vs-notes:focus-visible ~ .vs-toggle .vs-toggle__btn[for="vs-notes"],
+#vs-dashboard:focus-visible ~ .vs-toggle .vs-toggle__btn[for="vs-dashboard"],
+#vs-pricing:focus-visible ~ .vs-toggle .vs-toggle__btn[for="vs-pricing"],
+#vs-personal:focus-visible ~ .vs-toggle .vs-toggle__btn[for="vs-personal"] {
+  outline: 2px solid var(--color-focus);
+  outline-offset: 3px;
+}
+
+#vs-notes:checked ~ .vs-toggle .vs-toggle__btn[for="vs-notes"],
+#vs-dashboard:checked ~ .vs-toggle .vs-toggle__btn[for="vs-dashboard"],
+#vs-pricing:checked ~ .vs-toggle .vs-toggle__btn[for="vs-pricing"],
+#vs-personal:checked ~ .vs-toggle .vs-toggle__btn[for="vs-personal"] {
+  background: var(--color-ink);
+  color: var(--color-paper);
+}
+
+#vs-notes:checked ~ .vs-toggle .vs-toggle__btn[for="vs-notes"] .vs-toggle__num,
+#vs-dashboard:checked ~ .vs-toggle .vs-toggle__btn[for="vs-dashboard"] .vs-toggle__num,
+#vs-pricing:checked ~ .vs-toggle .vs-toggle__btn[for="vs-pricing"] .vs-toggle__num,
+#vs-personal:checked ~ .vs-toggle .vs-toggle__btn[for="vs-personal"] .vs-toggle__num {
+  opacity: 0.85;
+}
+
+.vs-pairs { display: contents; }
+
+.vs {
+  display: none;
+  grid-template-columns: 1fr 1fr;
+  gap: var(--space-lg);
+}
+
+#vs-notes:checked ~ .vs-pairs .vs--notes,
+#vs-dashboard:checked ~ .vs-pairs .vs--dashboard,
+#vs-pricing:checked ~ .vs-pairs .vs--pricing,
+#vs-personal:checked ~ .vs-pairs .vs--personal {
+  display: grid;
+}
+
+@media (max-width: 50rem) {
+  .vs { grid-template-columns: 1fr; }
+}
+
+.vs__col {
+  display: grid;
+  grid-template-rows: auto 1fr auto;
+  gap: var(--space-md);
+}
+
+.vs__head {
+  padding-bottom: var(--space-sm);
+  border-bottom: var(--rule-hair) solid var(--color-rule);
+}
+
+.vs__label {
+  font-family: var(--font-label);
+  font-size: var(--text-xs);
+  letter-spacing: var(--tracking-label);
+  text-transform: uppercase;
+  color: var(--color-muted);
+}
+
+.vs__caption {
+  font-family: var(--font-body);
+  font-size: var(--text-sm);
+  color: var(--color-neutral);
+  line-height: var(--lh-normal);
+}
+
+/* — 04 · Foundations mosaic ——————————————————————————
+   Auto-fit grid with feature cards (F/01 Type, F/02 Colour) and the
+   closing strip (F/08 Anti-patterns) spanning the full row for breathing
+   room on their richer illustrations. Other cards pack 2-3 per row
+   depending on viewport. */
+.foundations {
+  display: grid;
+  grid-template-columns: repeat(auto-fit, minmax(18rem, 1fr));
+  gap: var(--space-xl) var(--space-2xl);
+}
+
+.spec--feature,
+.spec--strip {
+  grid-column: 1 / -1;
+}
+
+@media (max-width: 56rem) {
+  .foundations { grid-template-columns: 1fr; gap: 0; }
+  .spec--feature, .spec--strip { grid-column: auto; }
+}
+
+/* — 05 · Foundations as vertical list + active panel ———————
+   Five clickable names on the left; the active card's rule + visual
+   demo on the right. Pure CSS via :checked + sibling selectors —
+   the radios sit absolutely-positioned (out of flow, like the W/W
+   toggle radios). Fits in ~one viewport on desktop. */
+.found-toggle__input {
+  position: absolute;
+  top: 0;
+  left: 0;
+  appearance: none;
+  -webkit-appearance: none;
+  width: 0;
+  height: 0;
+  margin: 0;
+  padding: 0;
+  border: 0;
+  outline: 0;
+  opacity: 0;
+  pointer-events: none;
+}
+
+.found-grid {
+  display: grid;
+  grid-template-columns: 14rem 1fr;
+  gap: var(--space-2xl);
+  align-items: start;
+}
+
+@media (max-width: 60rem) {
+  .found-grid {
+    grid-template-columns: 1fr;
+    gap: 0;
+  }
+}
+
+.found-nav {
+  list-style: none;
+  margin: 0;
+  padding: 0;
+  display: grid;
+  gap: 0;
+  border-block-start: var(--rule-hair) solid var(--color-rule);
+}
+
+.found-nav li { margin: 0; }
+
+@media (max-width: 60rem) {
+  .found-nav { display: contents; }
+}
+
+/* — 05 · How it works ——————————————————————————————— */
+.how { display: grid; gap: var(--space-xl); }
+
+.step {
+  display: grid;
+  grid-template-columns: 3rem 1fr 2fr;
+  gap: var(--space-lg);
+  align-items: start;
+  padding-top: var(--space-lg);
+  border-top: var(--rule-hair) solid var(--color-rule);
+}
+
+@media (max-width: 50rem) {
+  .step { grid-template-columns: 1fr; gap: var(--space-sm); }
+}
+
+.step__num {
+  font-family: var(--font-label);
+  font-weight: 500;
+  font-size: var(--text-md);
+  color: var(--color-ink);
+  letter-spacing: 0.08em;
+}
+
+.step__head {
+  font-family: var(--font-display);
+  font-weight: var(--display-weight, 400);
+  font-style: var(--display-style, normal);
+  font-size: var(--text-lg);
+  line-height: var(--lh-snug);
+  letter-spacing: var(--tracking-tight);
+  color: var(--color-ink);
+  font-optical-sizing: auto;
+}
+
+.step__sub {
+  font-family: var(--font-body);
+  font-size: var(--text-sm);
+  color: var(--color-neutral);
+  margin-top: var(--space-xs);
+  max-width: 40ch;
+  line-height: var(--lh-normal);
+}
+
+.step__body { display: grid; gap: var(--space-sm); }
+
+/* — 03 · Study — DNA extraction gallery —————————————————
+   Four tiles. Each pairs a video-shaped media slot (poster image
+   when no <source> is supplied, otherwise an autoplay-muted-loop
+   screen recording) with the structured 10-field DNA panel. The
+   panel is a tabular key/value layout — mono key, body value. */
+.study__intro {
+  margin: 0 0 var(--space-2xl);
+  font-family: var(--font-serif);
+  font-size: var(--text-md);
+  line-height: var(--lh-snug);
+  color: var(--color-ink-2);
+  max-width: 60ch;
+}
+
+.study__intro code {
+  font-family: var(--font-mono);
+  font-style: normal;
+  font-size: 0.875em;
+  background: var(--color-paper-2);
+  padding: 0.05em 0.35em;
+  border: var(--rule-hair) solid var(--color-rule);
+  color: var(--color-ink);
+}
+
+[data-theme="brutal"] .study__intro,
+[data-theme="manifesto"] .study__intro,
+[data-theme="terminal"] .study__intro,
+[data-theme="sport"] .study__intro,
+[data-theme="almanac"] .study__intro,
+[data-theme="quiet"] .study__intro,
+[data-theme="bloom"] .study__intro {
+  font-family: var(--font-body);
+  font-style: normal;
+}
+
+.study-grid {
+  display: grid;
+  grid-template-columns: 1fr 1fr;
+  gap: var(--space-2xl) var(--space-xl);
+}
+
+@media (max-width: 60rem) {
+  .study-grid { grid-template-columns: 1fr; gap: var(--space-2xl); }
+}
+
+/* — 03 · Skills — five things Hallmark does ——————————————————
+   Vertical editorial list, scroll-only. No tabs, no carousel, no JS
+   state. Each row: roman numeral marginalia → title + lede → demo +
+   structured list. Each demo is structurally different from the others
+   on purpose — the section practises what the skill preaches. */
+
+.skills__intro {
+  margin: 0 0 var(--space-2xl);
+  font-family: var(--font-serif);
+  font-size: var(--text-md);
+  line-height: var(--lh-snug);
+  color: var(--color-ink-2);
+  max-width: 60ch;
+}
+
+[data-theme="brutal"] .skills__intro,
+[data-theme="manifesto"] .skills__intro,
+[data-theme="terminal"] .skills__intro,
+[data-theme="sport"] .skills__intro,
+[data-theme="almanac"] .skills__intro,
+[data-theme="quiet"] .skills__intro,
+[data-theme="bloom"] .skills__intro,
+[data-theme="riso"] .skills__intro {
+  font-family: var(--font-body);
+  font-style: normal;
+}
+
+.skills-list {
+  list-style: none;
+  margin: 0;
+  padding: 0;
+  display: grid;
+  gap: var(--space-3xl);
+}
+
+.skill-row {
+  display: grid;
+  gap: var(--space-lg);
+}
+
+.skill-row__head {
+  display: grid;
+  grid-template-columns: 1fr;
+  gap: var(--space-xs);
+  margin-block-end: var(--space-md);
+}
+
+.skill-row__head-body {
+  display: grid;
+  gap: var(--space-sm);
+  max-width: 64ch;
+}
+
+.skill-row__title {
+  font-family: var(--font-display);
+  font-size: clamp(1.4rem, 1.6vw + 0.6rem, 2rem);
+  font-weight: 500;
+  line-height: var(--lh-tight);
+  letter-spacing: var(--tracking-display);
+  color: var(--color-ink);
+  margin: 0;
+  display: flex;
+  align-items: baseline;
+  flex-wrap: wrap;
+  gap: 0.4em;
+}
+
+.skill-row__title-meta {
+  font-family: var(--font-serif);
+  font-weight: 400;
+  font-size: 0.5em;
+  letter-spacing: 0;
+  color: var(--color-muted);
+}
+
+[data-theme="brutal"] .skill-row__title-meta,
+[data-theme="manifesto"] .skill-row__title-meta,
+[data-theme="terminal"] .skill-row__title-meta,
+[data-theme="sport"] .skill-row__title-meta,
+[data-theme="almanac"] .skill-row__title-meta,
+[data-theme="quiet"] .skill-row__title-meta,
+[data-theme="bloom"] .skill-row__title-meta {
+  font-family: var(--font-mono);
+  font-style: normal;
+  text-transform: uppercase;
+  letter-spacing: 0.04em;
+}
+
+[data-theme="manifesto"] .skill-row__title,
+[data-theme="brutal"] .skill-row__title {
+  text-transform: uppercase;
+  letter-spacing: var(--tracking-tight);
+}
+
+/* Skill-row lede matches the hero lede + examples intro: same role, same
+   typographic treatment per theme. All ledes are roman (no italic) — the
+   curly single-storey italic "a" was unanimously bad to read. */
+.skill-row__lede {
+  font-family: var(--font-serif);
+  font-size: var(--text-md);
+  line-height: var(--lh-normal);
+  color: var(--color-ink-2);
+  margin: 0;
+  max-width: 60ch;
+}
+
+[data-theme="brutal"] .skill-row__lede,
+[data-theme="manifesto"] .skill-row__lede,
+[data-theme="terminal"] .skill-row__lede,
+[data-theme="sport"] .skill-row__lede,
+[data-theme="almanac"] .skill-row__lede,
+[data-theme="studio"] .skill-row__lede,
+[data-theme="quiet"] .skill-row__lede,
+[data-theme="bloom"] .skill-row__lede,
+[data-theme="aurora"] .skill-row__lede,
+[data-theme="plume"] .skill-row__lede,
+[data-theme="halo"] .skill-row__lede,
+[data-theme="coral"] .skill-row__lede,
+[data-theme="violet"] .skill-row__lede {
+  font-family: var(--font-body);
+  font-style: normal;
+}
+
+/* Studio: examples intro stays sans to match hero + verb ledes. */
+[data-theme="studio"] .examples__intro {
+  font-family: var(--font-body);
+  font-style: normal;
+}
+
+.skill-row__lede strong {
+  font-weight: 600;
+  color: var(--color-ink);
+}
+
+.skill-row__body {
+  display: grid;
+  grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr);
+  gap: var(--space-xl);
+  align-items: start;
+}
+
+@media (max-width: 60rem) {
+  .skill-row__body {
+    grid-template-columns: 1fr;
+    gap: var(--space-lg);
+  }
+}
+
+/* Full-width body — no right info column. Used by Redesign so the
+   before/after diptych takes the whole row width. */
+.skill-row__body--full {
+  grid-template-columns: 1fr;
+}
+
+.skill-row__demo {
+  position: relative;
+  margin: 0;
+  display: block;
+}
+
+.skill-row__demo img {
+  display: block;
+  width: 100%;
+  height: auto;
+  background: var(--color-paper-2);
+}
+
+/* Structured list to the right of each demo (reuses .dna__row from
+   .study-card__dna). Editorial card-on-paper container. */
+.skill-row__list {
+  list-style: none;
+  margin: 0;
+  padding: var(--space-md) var(--space-lg);
+  display: grid;
+  gap: 0;
+  background: var(--color-paper);
+  border: var(--rule-card, 1px) solid var(--color-rule);
+  border-radius: var(--radius-card, 0);
+}
+
+[data-theme="atelier"] .skill-row__list,
+[data-theme="salon"] .skill-row__list {
+  border: 0;
+  background: transparent;
+  padding: 0;
+  border-block-start: var(--rule-hair) solid var(--color-rule);
+  border-radius: 0;
+}
+
+[data-theme="brutal"] .skill-row__list,
+[data-theme="manifesto"] .skill-row__list { border-width: 2px; }
+
+.skill-row__list code {
+  font-family: var(--font-mono);
+  font-size: 0.8125em;
+  background: var(--color-paper-2);
+  padding: 0.05em 0.35em;
+  border: var(--rule-hair) solid var(--color-rule);
+  color: var(--color-ink);
+}
+
+/* Row I — Build demo: brief pill → arrow → output thumb stacked */
+.skill-row__demo--build {
+  display: grid;
+  gap: var(--space-sm);
+  justify-items: start;
+}
+
+.brief-pill {
+  display: inline-block;
+  padding: var(--space-xs) var(--space-md);
+  background: var(--color-paper-2);
+  border: var(--rule-hair) solid var(--color-rule);
+  border-radius: 999px;
+  font-family: var(--font-mono);
+  font-size: var(--text-xs);
+  color: var(--color-ink-2);
+  max-width: 100%;
+}
+
+[data-theme="brutal"] .brief-pill,
+[data-theme="manifesto"] .brief-pill,
+[data-theme="terminal"] .brief-pill,
+[data-theme="newsprint"] .brief-pill,
+[data-theme="atelier"] .brief-pill {
+  border-radius: 0;
+  font-style: normal;
+}
+
+.brief-arrow {
+  font-family: var(--font-mono);
+  font-size: var(--text-md);
+  color: var(--color-rule-2);
+  user-select: none;
+  padding-inline-start: var(--space-md);
+}
+
+.brief-output {
+  display: block;
+  width: 100%;
+  aspect-ratio: 16 / 10;
+  overflow: hidden;
+  border: var(--rule-card, 1px) solid var(--color-rule);
+}
+
+.brief-output img,
+.brief-output video {
+  display: block;
+  width: 100%;
+  height: 100%;
+  object-fit: cover;
+  object-position: top left;
+}
+
+/* — Per-theme .brief-output framing —————————————————————————
+   The same demo media reads differently when the FRAME reacts to the
+   theme. Border weight, corner style, optional shadow, optional
+   per-theme caption. Frame, not content. */
+
+/* HARD EDGES + heavier border. */
+[data-theme="brutal"] .brief-output {
+  border: 2px solid var(--color-ink);
+  border-radius: 0;
+}
+[data-theme="manifesto"] .brief-output {
+  border: 3px solid var(--color-ink);
+  border-radius: 0;
+}
+[data-theme="terminal"] .brief-output {
+  border: 1px solid var(--color-accent);
+  border-radius: 0;
+  box-shadow: inset 0 0 0 1px color-mix(in oklch, var(--color-accent) 25%, transparent);
+}
+[data-theme="newsprint"] .brief-output {
+  border: 2px double var(--color-ink);
+  border-radius: 0;
+}
+[data-theme="editorial"] .brief-output {
+  border: 0.5px solid var(--color-rule);
+  border-radius: 0;
+}
+
+/* SLIGHT-RADIUS group (4–6px). */
+[data-theme="sport"] .brief-output {
+  border: 1.5px solid var(--color-accent);
+  border-radius: 4px;
+}
+[data-theme="almanac"] .brief-output {
+  border: 1px solid var(--color-rule);
+  border-radius: 4px;
+}
+[data-theme="garden"] .brief-output {
+  border: 1px solid var(--color-rule);
+  border-radius: 6px;
+}
+[data-theme="halo"] .brief-output {
+  border: 1px solid var(--color-rule-2);
+  border-radius: 6px;
+  box-shadow: 0 0 0 1px color-mix(in oklch, var(--color-accent) 22%, transparent),
+              0 0 32px -8px color-mix(in oklch, var(--color-accent) 28%, transparent);
+}
+[data-theme="violet"] .brief-output {
+  border: 1px solid var(--color-rule);
+  border-radius: 6px;
+}
+[data-theme="studio"] .brief-output {
+  border: 0.5px solid var(--color-rule-2);
+  border-radius: 6px;
+}
+
+/* SOFT-CARD group (8–14px). */
+[data-theme="quiet"] .brief-output { border-radius: 8px; }
+[data-theme="coral"] .brief-output { border-radius: 8px; }
+[data-theme="aurora"] .brief-output {
+  border: 1px solid var(--color-rule-2);
+  border-radius: 12px;
+  box-shadow: 0 0 24px -10px color-mix(in oklch, var(--color-accent) 35%, transparent);
+}
+[data-theme="plume"] .brief-output {
+  border: 1px solid var(--color-rule);
+  border-radius: 12px;
+}
+[data-theme="bloom"] .brief-output {
+  border: 1px solid var(--color-rule);
+  border-radius: 14px;
+  box-shadow: 0 6px 24px -14px color-mix(in oklch, var(--color-accent) 22%, transparent);
+}
+
+/* Atelier / Salon / Linen — hairline only, no radius, optional caption. */
+[data-theme="atelier"] .brief-output,
+[data-theme="salon"] .brief-output,
+[data-theme="linen"] .brief-output {
+  border: 1px solid var(--color-rule-2);
+  border-radius: 0;
+}
+
+/* Riso — duotone offset shadow, hard 0 radius. */
+[data-theme="riso"] .brief-output {
+  border: 2px solid var(--color-ink);
+  border-radius: 0;
+  box-shadow: 3px 3px 0 var(--color-accent-2, var(--color-accent));
+}
+
+/* Midnight — inner glow ring on dark paper. */
+[data-theme="midnight"] .brief-output {
+  border: 1px solid var(--color-rule-2);
+  box-shadow: inset 0 0 0 1px color-mix(in oklch, var(--color-paper) 25%, transparent);
+}
+
+
+/* Row III — Audit demo: a CSS-only inline slop hero. Built deliberately
+   to LOOK like every default AI hero — purple-pink gradient, centered,
+   Inter, ✨ badge, gradient pill CTA. Lives outside theme tokens
+   intentionally — it's the negative example. The checklist on the
+   right names every tell + its fix. */
+.skill-row__demo--audit { aspect-ratio: 16 / 10; }
+
+.audit-slop {
+  position: relative;
+  width: 100%;
+  height: 100%;
+  display: grid;
+  place-items: center;
+  text-align: center;
+  background: linear-gradient(135deg, #a855f7 0%, #ec4899 55%, #f59e0b 100%);
+  border-radius: 14px;
+  overflow: hidden;
+  font-family: "Inter", system-ui, sans-serif;
+  color: #ffffff;
+  /* Deliberate AI-hero clichés: gradient corners, centered, Inter. */
+}
+
+.audit-slop::before {
+  content: "";
+  position: absolute;
+  inset: -20%;
+  background: radial-gradient(circle at 30% 20%, rgba(255,255,255,0.18) 0%, transparent 50%),
+              radial-gradient(circle at 80% 80%, rgba(255,255,255,0.10) 0%, transparent 60%);
+  pointer-events: none;
+}
+
+.audit-slop__inner {
+  position: relative;
+  display: grid;
+  gap: 0.6rem;
+  justify-items: center;
+  padding: var(--space-md);
+  max-width: 28ch;
+}
+
+.audit-slop__badge {
+  display: inline-block;
+  padding: 0.22rem 0.7rem;
+  font-family: "Inter", system-ui, sans-serif;
+  font-size: 0.625rem;
+  font-weight: 600;
+  letter-spacing: 0.06em;
+  text-transform: uppercase;
+  color: #ffffff;
+  background: rgba(255,255,255,0.18);
+  border: 1px solid rgba(255,255,255,0.28);
+  border-radius: 999px;
+  backdrop-filter: blur(6px);
+  -webkit-backdrop-filter: blur(6px);
+}
+
+.audit-slop__title {
+  margin: 0;
+  font-family: "Inter", system-ui, sans-serif;
+  font-weight: 700;
+  font-size: clamp(1.1rem, 2.4vw + 0.4rem, 2rem);
+  line-height: 1.1;
+  letter-spacing: -0.025em;
+  background: linear-gradient(135deg, #ffffff 0%, rgba(255,255,255,0.78) 100%);
+  -webkit-background-clip: text;
+  -webkit-text-fill-color: transparent;
+  background-clip: text;
+}
+
+.audit-slop__lede {
+  margin: 0;
+  font-family: "Inter", system-ui, sans-serif;
+  font-size: 0.8125rem;
+  font-weight: 400;
+  line-height: 1.4;
+  color: rgba(255,255,255,0.92);
+}
+
+.audit-slop__cta {
+  display: inline-block;
+  margin-block-start: 0.4rem;
+  padding: 0.55rem 1.1rem;
+  font-family: "Inter", system-ui, sans-serif;
+  font-size: 0.75rem;
+  font-weight: 600;
+  letter-spacing: 0.005em;
+  background: linear-gradient(135deg, #ffffff 0%, #fef3c7 100%);
+  color: #6b21a8;
+  border-radius: 999px;
+  user-select: none;
+}
+
+/* Caption above the slop card — frames the gradient as a quoted artifact, not
+   a card competing with the page. Mono caps, theme-coloured. */
+.audit-slop__caption {
+  display: block;
+  margin: 0 0 var(--space-sm) 0;
+  font-family: var(--font-label);
+  font-size: var(--text-xs);
+  letter-spacing: var(--tracking-label);
+  text-transform: uppercase;
+  color: var(--color-muted);
+}
+
+/* Tint the slop card down on dark / charged themes so it stops winning the
+   visual contest against the surrounding theme. The card still reads as AI
+   slop — purpose retained. */
+[data-theme="midnight"] .audit-slop,
+[data-theme="manifesto"] .audit-slop,
+[data-theme="halo"] .audit-slop,
+[data-theme="aurora"] .audit-slop,
+[data-theme="riso"] .audit-slop,
+[data-theme="terminal"] .audit-slop,
+[data-theme="brutal"] .audit-slop {
+  filter: saturate(0.55) brightness(0.82);
+}
+
+/* Audit checklist — replaces the old 4-row info panel. Each row reads:
+   ✗ <problem> → <fix>. Slop is muted; fix is ink. */
+.audit-check {
+  list-style: none;
+  margin: 0;
+  padding: var(--space-md) var(--space-lg);
+  display: grid;
+  gap: 0;
+  background: var(--color-paper);
+  border: var(--rule-card, 1px) solid var(--color-rule);
+}
+
+[data-theme="atelier"] .audit-check,
+[data-theme="salon"] .audit-check {
+  border: 0;
+  background: transparent;
+  padding: 0;
+  border-block-start: var(--rule-hair) solid var(--color-rule);
+}
+
+[data-theme="brutal"] .audit-check,
+[data-theme="manifesto"] .audit-check { border-width: 2px; }
+
+.audit-check__row {
+  display: grid;
+  grid-template-columns: 1.2rem 1fr 1.2rem 1fr;
+  gap: 0.6rem;
+  align-items: baseline;
+  padding-block: var(--space-sm);
+  border-block-end: var(--rule-hair) solid var(--color-rule);
+  font-size: 0.8125rem;
+  line-height: 1.4;
+}
+
+.audit-check__row:last-child { border-block-end: 0; }
+
+.audit-check__cross {
+  font-family: var(--font-mono);
+  font-weight: 600;
+  color: var(--color-accent);
+  text-align: center;
+}
+
+.audit-check__problem {
+  font-family: var(--font-body);
+  color: var(--color-muted);
+  text-decoration: line-through;
+  text-decoration-thickness: 1px;
+  text-decoration-color: var(--color-rule-2);
+}
+
+.audit-check__arrow {
+  font-family: var(--font-mono);
+  color: var(--color-rule-2);
+  text-align: center;
+}
+
+.audit-check__fix {
+  font-family: var(--font-body);
+  color: var(--color-ink);
+  font-weight: 500;
+}
+
+@media (max-width: 36rem) {
+  .audit-check__row {
+    grid-template-columns: 1.2rem 1fr;
+    gap: 0.4rem 0.6rem;
+  }
+  .audit-check__arrow { display: none; }
+  .audit-check__fix {
+    grid-column: 2;
+    font-size: 0.875rem;
+  }
+}
+
+/* Rows IV & V — Diptych: before / after side-by-side thumbnails */
+.skill-row__demo--diptych {
+  display: grid;
+  grid-template-columns: 1fr 1fr;
+  gap: var(--space-sm);
+  margin: 0;
+}
+
+.diptych__half {
+  margin: 0;
+  display: grid;
+  gap: var(--space-xs);
+}
+
+.diptych__half > .fig-corners {
+  display: block;
+  aspect-ratio: 16 / 10;
+  overflow: hidden;
+  border: var(--rule-hair) solid var(--color-rule);
+}
+
+.diptych__half img,
+.diptych__half video {
+  display: block;
+  width: 100%;
+  height: 100%;
+  object-fit: cover;
+  object-position: top left;
+}
+
+.diptych__cap {
+  font-family: var(--font-label);
+  font-size: var(--text-xs);
+  letter-spacing: var(--tracking-label);
+  text-transform: uppercase;
+  color: var(--color-muted);
+  font-feature-settings: "tnum";
+}
+
+.diptych__half[data-state="after"] .diptych__cap {
+  color: var(--color-accent);
+}
+
+@media (max-width: 48rem) {
+  .skill-row__demo--diptych {
+    grid-template-columns: 1fr;
+    gap: var(--space-md);
+  }
+}
+
+/* — 06 · Install pane ——————————————————————————————
+   A single bordered "manual page" card with three numbered rows —
+   I · Run, II · In, III · Then. Replaces the old 4-card grid. The
+   pane uses theme tokens for colour/border/typography so it adapts
+   when T cycles themes. */
+.install-pane {
+  display: grid;
+  border: var(--rule-card, 1px) solid var(--color-rule);
+  border-radius: var(--radius-card, 0);
+  background: var(--color-paper);
+  box-shadow: var(--shadow-card, none);
+  overflow: hidden;
+}
+
+.install-pane__row {
+  display: grid;
+  grid-template-columns: 9rem 1fr;
+  gap: var(--space-xl);
+  padding: var(--space-xl) var(--space-2xl);
+  align-items: start;
+}
+
+.install-pane__row + .install-pane__row {
+  border-block-start: var(--rule-hair) solid var(--color-rule);
+}
+
+@media (max-width: 50rem) {
+  .install-pane__row {
+    grid-template-columns: 1fr;
+    gap: var(--space-md);
+    padding: var(--space-lg);
+  }
+}
+
+/* — Before / After Hallmark ————————————————————————————
+   Two screenshots side by side — the same prompt, run two ways. The
+   "before" panel is what Sonnet 4.6 alone produces; the "after" is
+   the same model with Hallmark loaded. The shared prompt sits above. */
+.ba__prompt {
+  margin: 0 0 var(--space-2xl);
+  padding: var(--space-md) var(--space-lg);
+  background: var(--color-paper-2);
+  border: var(--rule-hair) solid var(--color-rule);
+  font-family: var(--font-mono);
+  font-size: var(--text-sm);
+  color: var(--color-ink-2);
+  line-height: 1.4;
+  font-feature-settings: "tnum";
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+  border-radius: var(--radius-input, 0);
+  max-width: 100%;
+}
+.ba__prompt-mark {
+  color: var(--color-accent);
+  font-weight: 500;
+  margin-inline-end: 0.5em;
+}
+
+.ba {
+  display: grid;
+  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
+  gap: var(--space-xl);
+}
+
+@media (max-width: 56rem) {
+  .ba { grid-template-columns: 1fr; gap: var(--space-2xl); }
+}
+
+.ba__panel {
+  margin: 0;
+  display: grid;
+  gap: var(--space-md);
+}
+
+.ba__panel-label {
+  margin: 0;
+  font-family: var(--font-label);
+  font-size: var(--text-xs);
+  letter-spacing: var(--tracking-label);
+  text-transform: uppercase;
+  color: var(--color-muted);
+}
+
+.ba__panel-tag {
+  display: inline-block;
+  padding: 0.3rem 0.75rem;
+  border: var(--rule-hair) solid var(--color-rule-2);
+  border-radius: 999px;
+  background: var(--color-paper);
+  color: var(--color-ink-2);
+  letter-spacing: var(--tracking-label);
+}
+
+.ba__panel-tag--accent {
+  background: var(--color-ink);
+  color: var(--color-paper);
+  border-color: var(--color-ink);
+}
+
+.ba__frame {
+  display: block;
+  aspect-ratio: 16 / 10;
+  overflow: hidden;
+  border: var(--rule-hair) solid var(--color-rule);
+  background: var(--color-paper-2);
+  border-radius: var(--radius-card, 0);
+}
+
+.ba__frame img {
+  width: 100%;
+  height: 100%;
+  object-fit: cover;
+  object-position: center;
+  display: block;
+}
+
+.ba__panel-cap {
+  margin: 0;
+  font-family: var(--font-serif);
+  font-size: var(--text-md);
+  line-height: var(--lh-snug);
+  color: var(--color-ink-2);
+  max-width: 48ch;
+}
+
+[data-theme="brutal"] .ba__panel-cap,
+[data-theme="manifesto"] .ba__panel-cap,
+[data-theme="terminal"] .ba__panel-cap,
+[data-theme="sport"] .ba__panel-cap,
+[data-theme="almanac"] .ba__panel-cap,
+[data-theme="quiet"] .ba__panel-cap,
+[data-theme="bloom"] .ba__panel-cap {
+  font-family: var(--font-body);
+}
+
+/* — 07 · Footer ————————————————————————————————————— */
+/* The "Powered by" accent dot — used by the editorial colophon. */
+.foot__powered-mark {
+  display: inline-flex;
+  align-items: center;
+  gap: 0.4em;
+  color: var(--color-ink);
+  font-weight: 500;
+  letter-spacing: 0.12em;
+  text-transform: uppercase;
+  font-size: var(--text-xs);
+}
+
+.foot__powered-mark::before {
+  content: "";
+  width: 0.55em;
+  height: 0.55em;
+  background: var(--color-accent);
+}
+
+/* — Dimension callout ——————————————————————————————— */
+.dim {
+  display: inline-flex;
+  align-items: center;
+  gap: 0.5em;
+  font-family: var(--font-label);
+  font-size: var(--text-xs);
+  letter-spacing: var(--tracking-label);
+  text-transform: uppercase;
+  color: var(--color-muted);
+}
+
+/* ════════════════════════════════════════════════════════════ */
+/*  STRUCTURAL FINGERPRINTS — per-theme overrides                */
+/*  Each theme picks distinct values across six axes:             */
+/*  heading placement · body composition · divider · button       */
+/*  · image · reveal                                              */
+/* ════════════════════════════════════════════════════════════ */
+
+/* ── ATELIER — generous spacing, narrow measure, left-aligned ─── */
+[data-theme="atelier"] .opening {
+  grid-template-columns: 1fr;
+  padding-block: var(--space-3xl) var(--space-xl);
+}
+[data-theme="atelier"] .opening__title {
+  max-width: 16ch;
+}
+[data-theme="atelier"] .opening__sub {
+  margin-top: var(--space-xl);
+}
+[data-theme="atelier"] .opening__aside {
+  display: none;
+}
+[data-theme="atelier"] .section__head {
+  grid-template-columns: 1fr;
+  border-bottom: 0;
+  padding-bottom: var(--space-2xl);
+}
+/* Negative space carries the rhythm — no rules between sections. */
+[data-theme="atelier"] .section + .section {
+  padding-block-start: var(--space-3xl);
+}
+[data-theme="atelier"] .section__title {
+  max-width: 22ch;
+}
+[data-theme="atelier"] .foundations {
+  grid-template-columns: 1fr;
+  max-width: 38rem;
+}
+[data-theme="atelier"] .spec {
+  border-top: 0;
+  border-bottom: var(--rule-hair) solid var(--color-rule);
+  padding: var(--space-2xl) 0;
+}
+[data-theme="atelier"] .spec__head {
+  gap: var(--space-md);
+}
+[data-theme="atelier"] .step {
+  grid-template-columns: 1fr;
+}
+[data-theme="atelier"] .vs { grid-template-columns: 1fr; border: 0; }
+[data-theme="atelier"] .vs__col:first-child {
+  border-right: 0;
+  border-bottom: var(--rule-hair) solid var(--color-rule-2);
+}
+
+/* ── NEWSPRINT — bottom-aligned head, multi-column body, double rule, drop cap ── */
+[data-theme="newsprint"] .opening {
+  grid-template-columns: 1fr;
+  border-top: 4px double var(--color-ink);
+  border-bottom: 1px solid var(--color-ink);
+  padding-block: var(--space-md);
+  align-items: start;
+}
+[data-theme="newsprint"] .opening__aside {
+  border-top: var(--rule-hair) solid var(--color-rule);
+  margin-top: var(--space-md);
+  padding-top: var(--space-md);
+}
+[data-theme="newsprint"] .opening__title {
+  max-width: none;
+  font-weight: 700;
+  margin-block: var(--space-md);
+}
+[data-theme="newsprint"] .opening__sub {
+  column-count: 2;
+  column-gap: 2.5rem;
+  column-rule: 0.5px solid var(--color-rule-2);
+  hyphens: auto;
+  text-align: justify;
+  max-width: none;
+  margin-top: var(--space-md);
+}
+/* Signature drop cap — first letter of the lede */
+[data-theme="newsprint"] .opening__sub::first-letter {
+  font-family: var(--font-display);
+  font-weight: 700;
+  font-size: 4.2em;
+  line-height: 0.85;
+  float: left;
+  margin: 0.08em 0.12em 0 0;
+  color: var(--color-accent);
+}
+@media (max-width: 50rem) {
+  [data-theme="newsprint"] .opening__sub { column-count: 1; }
+}
+[data-theme="newsprint"] .section__head {
+  grid-template-columns: 1fr;
+  border-bottom: 1px solid var(--color-ink);
+  padding-block: 0.5rem;
+  align-items: baseline;
+}
+[data-theme="newsprint"] .foundations {
+  grid-template-columns: repeat(3, 1fr);
+  column-gap: var(--space-xl);
+  row-gap: 0;
+}
+@media (max-width: 70rem) {
+  [data-theme="newsprint"] .foundations { grid-template-columns: repeat(2, 1fr); }
+}
+@media (max-width: 50rem) {
+  [data-theme="newsprint"] .foundations { grid-template-columns: 1fr; }
+}
+[data-theme="newsprint"] .spec {
+  border-top: 1px solid var(--color-ink);
+  padding: var(--space-lg) 0;
+}
+
+/* ── TERMINAL — inline `>` headings, mono everywhere ────────── */
+[data-theme="terminal"] .opening {
+  grid-template-columns: 1fr;
+  padding-block: var(--space-xl) var(--space-md);
+}
+[data-theme="terminal"] .opening__aside {
+  display: grid;
+  grid-template-columns: 1fr;
+  padding-top: var(--space-md);
+  border-top: var(--rule-hair) dashed var(--color-rule-2);
+}
+[data-theme="terminal"] .opening__title {
+  text-transform: uppercase;
+  font-weight: 500;
+  letter-spacing: 0.02em;
+  max-width: none;
+}
+[data-theme="terminal"] .opening__title::before {
+  content: "$ ";
+  color: var(--color-accent);
+}
+[data-theme="terminal"] .opening__title em {
+  font-family: var(--font-display);
+  font-style: normal;
+  text-decoration: underline;
+  text-decoration-color: var(--color-accent);
+  text-underline-offset: 0.15em;
+}
+[data-theme="terminal"] .section__head {
+  grid-template-columns: 1fr;
+  border-bottom: var(--rule-hair) dashed var(--color-rule-2);
+}
+[data-theme="terminal"] .section__title {
+  text-transform: uppercase;
+  letter-spacing: 0.04em;
+  font-weight: 500;
+}
+[data-theme="terminal"] .section__title::before {
+  content: "// ";
+  color: var(--color-accent);
+}
+[data-theme="terminal"] .opening__rule {
+  height: 1rem;
+  width: 0.6rem;
+  background: var(--color-accent);
+  animation: blink 1.05s steps(2) infinite;
+}
+@keyframes blink { 50% { opacity: 0; } }
+[data-theme="terminal"] .step__num::before { content: "[ "; color: var(--color-accent); }
+[data-theme="terminal"] .step__num::after  { content: " ]"; color: var(--color-accent); }
+
+/* ── MANIFESTO — full-bleed, ALL CAPS, colour blocks ────────── */
+[data-theme="manifesto"] .opening {
+  grid-template-columns: 1fr;
+  padding-block: var(--space-2xl) var(--space-xl);
+}
+[data-theme="manifesto"] .opening__aside { display: none; }
+[data-theme="manifesto"] .opening__title {
+  text-transform: uppercase;
+  font-weight: 800;
+  max-width: 11ch;
+  font-style: normal;
+}
+[data-theme="manifesto"] .opening__title em {
+  font-family: var(--font-display);
+  font-style: normal;
+  font-weight: 800;
+  background: var(--color-accent);
+  color: var(--color-paper);
+  padding: 0 0.12em;
+  box-decoration-break: clone;
+  -webkit-box-decoration-break: clone;
+}
+[data-theme="manifesto"] .opening__sub {
+  text-transform: uppercase;
+  font-weight: 500;
+  letter-spacing: 0.02em;
+  max-width: 56ch;
+}
+[data-theme="manifesto"] .section__head {
+  grid-template-columns: 1fr;
+  border-bottom: 3px solid var(--color-ink);
+  padding-bottom: var(--space-sm);
+}
+[data-theme="manifesto"] .section__title {
+  text-transform: uppercase;
+  max-width: 18ch;
+  font-weight: 800;
+}
+[data-theme="manifesto"] .step { border-top: 3px solid var(--color-ink); }
+
+/* Manifesto — oversized declarative phrases punctuate the rhythm
+   between sections. Cycles through 3 statements via :nth-of-type. */
+[data-theme="manifesto"] .section + .section::before {
+  display: block;
+  margin: var(--space-3xl) 0 var(--space-2xl);
+  padding-block: var(--space-md);
+  border-block: 4px solid var(--color-ink);
+  font-family: var(--font-display);
+  font-size: clamp(2rem, 5vw, 4rem);
+  line-height: 0.95;
+  letter-spacing: -0.02em;
+  text-transform: uppercase;
+  color: var(--color-ink);
+  text-align: center;
+}
+[data-theme="manifesto"] .section:nth-of-type(3)::before { content: "WE DO NOT REPEAT."; }
+[data-theme="manifesto"] .section:nth-of-type(4)::before { content: "TYPE FIRST."; }
+[data-theme="manifesto"] .section:nth-of-type(5)::before { content: "NO GRADIENTS."; }
+[data-theme="manifesto"] .section:nth-of-type(6)::before { content: "DEFAULT IS THE ENEMY."; }
+[data-theme="manifesto"] .section:nth-of-type(7)::before { content: "EVERY DECISION VISIBLE."; }
+[data-theme="manifesto"] .section:nth-of-type(8)::before { content: "THE PAGE IS A POSITION."; }
+
+/* ── SALON — italic display, fleuron divider, left-aligned ───── */
+[data-theme="salon"] .opening {
+  grid-template-columns: 1fr;
+  padding-block: var(--space-3xl) var(--space-xl);
+}
+[data-theme="salon"] .opening__title {
+  font-style: italic;
+  font-weight: 400;
+  max-width: 14ch;
+}
+[data-theme="salon"] .opening__title em {
+  font-style: normal;
+  font-family: var(--font-display);
+}
+[data-theme="salon"] .opening__sub {
+  margin-top: var(--space-xl);
+  font-family: var(--font-serif);
+  font-style: italic;
+}
+[data-theme="salon"] .opening__aside { display: none; }
+[data-theme="salon"] .section__head {
+  grid-template-columns: 1fr;
+  border-bottom: 0;
+  padding-bottom: var(--space-md);
+}
+[data-theme="salon"] .section__head::after {
+  content: "❦";
+  display: block;
+  color: var(--color-accent);
+  font-size: 1.2rem;
+  margin-top: var(--space-md);
+  font-family: var(--font-serif);
+}
+[data-theme="salon"] .foundations {
+  grid-template-columns: 1fr;
+  max-width: 36rem;
+}
+
+/* ── LINEN — hanging headings, two-column asymmetric, woven texture ─── */
+[data-theme="linen"] .opening { grid-template-columns: 7fr 5fr; gap: var(--space-3xl); }
+/* Section heads hang the label in a left gutter, title in the body column.
+   Reads like a printed manuscript margin note + heading. */
+[data-theme="linen"] .section__head {
+  grid-template-columns: 1fr;
+  gap: var(--space-sm);
+  border-bottom: 0;
+  padding-bottom: 0;
+}
+[data-theme="linen"] .section__title { margin-bottom: var(--space-2xl); }
+[data-theme="linen"] .section-label { margin-bottom: var(--space-sm); }
+[data-theme="linen"] .foundations {
+  grid-template-columns: 5fr 7fr;
+  gap: var(--space-xl) var(--space-2xl);
+}
+@media (max-width: 56rem) { [data-theme="linen"] .foundations { grid-template-columns: 1fr; } }
+[data-theme="linen"] .spec { border-top: 0; border-bottom: var(--rule-hair) solid var(--color-rule); }
+
+/* Signature: barely-visible woven texture — checkerboard at 3% opacity */
+html[data-theme="linen"] body {
+  background-image:
+    linear-gradient(45deg, oklch(20% 0.025 90 / 0.018) 25%, transparent 25%, transparent 75%, oklch(20% 0.025 90 / 0.018) 75%),
+    linear-gradient(45deg, oklch(20% 0.025 90 / 0.018) 25%, transparent 25%, transparent 75%, oklch(20% 0.025 90 / 0.018) 75%);
+  background-size: 6px 6px;
+  background-position: 0 0, 3px 3px;
+}
+
+/* ── ALMANAC — sticky labels, 3-col equal, dense, faint grid bg ────── */
+/* Signature: faint vertical grid running the full page (graph-paper) */
+html[data-theme="almanac"] body {
+  background-image:
+    linear-gradient(to right, oklch(38% 0.018 240 / 0.05) 0, oklch(38% 0.018 240 / 0.05) 1px, transparent 1px);
+  background-size: calc(100% / 12) 100%;
+  background-attachment: fixed;
+}
+
+[data-theme="almanac"] .section__head {
+  position: sticky;
+  /* Dock BELOW the .banner (sticky top:0, height: var(--banner-height)).
+     Both elements are sticky; without this offset, the section head bleeds
+     over the banner because both start at top:0. */
+  top: var(--banner-height);
+  /* --z-sticky (200) sits beneath --z-sticky-nav (300) so the banner
+     out-paints the section head even when their boxes overlap mid-scroll. */
+  z-index: var(--z-sticky);
+  background: var(--color-paper);
+  /* Solid paper background (no transparency) so the 12-column body grid
+     visible behind doesn't show through during the scroll transition. */
+  padding-block: var(--space-sm);
+  border-bottom: 1px solid var(--color-ink);
+  grid-template-columns: 1fr;
+  gap: var(--space-sm);
+}
+[data-theme="almanac"] .section__title { font-size: var(--text-xl); }
+/* Almanac calls itself indexed — push the §-number into every section label. */
+[data-theme="almanac"] .section-label::before {
+  content: "§ ";
+  color: var(--color-accent);
+  font-feature-settings: "tnum";
+}
+[data-theme="almanac"] .foundations {
+  grid-template-columns: repeat(3, 1fr);
+  gap: 0;
+  border-left: var(--rule-hair) solid var(--color-rule);
+}
+@media (max-width: 70rem) {
+  [data-theme="almanac"] .foundations { grid-template-columns: repeat(2, 1fr); }
+}
+@media (max-width: 50rem) {
+  [data-theme="almanac"] .foundations { grid-template-columns: 1fr; border-left: 0; }
+}
+[data-theme="almanac"] .spec {
+  border-top: 0;
+  border-right: var(--rule-hair) solid var(--color-rule);
+  padding: var(--space-md) var(--space-md);
+}
+[data-theme="almanac"] .opening { grid-template-columns: 6fr 6fr; }
+[data-theme="almanac"] .opening__title { max-width: 18ch; }
+
+/* ── SPORT — italic display, asymmetric spans, bleed-colour ── */
+[data-theme="sport"] .opening {
+  grid-template-columns: 9fr 3fr;
+  align-items: end;
+  padding-block: var(--space-2xl) var(--space-xl);
+}
+[data-theme="sport"] .opening__title {
+  font-style: italic;
+  font-weight: 700;
+  text-transform: uppercase;
+  max-width: 14ch;
+}
+[data-theme="sport"] .opening__title em {
+  font-family: var(--font-display);
+  font-style: italic;
+  color: var(--color-accent);
+  font-weight: 700;
+}
+[data-theme="sport"] .opening__sub { font-weight: 500; }
+[data-theme="sport"] .section__head {
+  grid-template-columns: 1fr;
+  border-bottom: 2px solid var(--color-rule-2);
+  padding-bottom: var(--space-md);
+}
+[data-theme="sport"] .section__title {
+  font-style: italic;
+  font-weight: 700;
+  text-transform: uppercase;
+  letter-spacing: -0.02em;
+}
+[data-theme="sport"] .foundations {
+  grid-template-columns: 7fr 5fr;
+  gap: var(--space-xl) var(--space-2xl);
+}
+@media (max-width: 56rem) { [data-theme="sport"] .foundations { grid-template-columns: 1fr; } }
+[data-theme="sport"] .spec { border-top: var(--rule-hair) solid var(--color-rule-2); }
+[data-theme="sport"] .step__num {
+  font-style: italic;
+  color: var(--color-accent);
+  font-weight: 700;
+}
+
+/* ── BRUTAL existing — augment with structural overrides ───── */
+[data-theme="brutal"] .opening__title em {
+  font-style: normal;
+  text-decoration: underline;
+  text-decoration-thickness: 4px;
+  text-underline-offset: 0.12em;
+  text-decoration-color: var(--color-accent);
+}
+[data-theme="brutal"] .section__head {
+  border-bottom: 3px solid var(--color-ink);
+}
+
+/* ── GARDEN existing — augment ──────────────────────────────── */
+[data-theme="garden"] .section__head {
+  grid-template-columns: 1fr;
+  border-bottom: 0;
+  padding-bottom: var(--space-lg);
+}
+[data-theme="garden"] .section__title { margin-top: var(--space-md); }
+[data-theme="garden"] .foundations { grid-template-columns: 5fr 7fr; }
+@media (max-width: 56rem) { [data-theme="garden"] .foundations { grid-template-columns: 1fr; } }
+
+/* ── MIDNIGHT existing — numbered display style ─────────────── */
+[data-theme="midnight"] .section-label .num {
+  color: var(--color-accent);
+}
+[data-theme="midnight"] .opening__title em {
+  font-family: var(--font-serif);
+  font-style: italic;
+  color: var(--color-accent);
+}
+
+/* — 04 · Anti-patterns — Slop, by name ——————————————————
+   Five-row editorial list: number · slop name (struck-through,
+   muted) · fix label + body (clean, ink). Side-by-side typography
+   so the contrast IS the design. Hairline rules between rows. */
+
+.anti__intro {
+  margin: 0 0 var(--space-2xl);
+  font-family: var(--font-serif);
+  font-size: var(--text-md);
+  line-height: var(--lh-snug);
+  color: var(--color-ink-2);
+  max-width: 60ch;
+}
+
+[data-theme="brutal"] .anti__intro,
+[data-theme="manifesto"] .anti__intro,
+[data-theme="terminal"] .anti__intro,
+[data-theme="sport"] .anti__intro,
+[data-theme="almanac"] .anti__intro,
+[data-theme="quiet"] .anti__intro,
+[data-theme="bloom"] .anti__intro,
+[data-theme="riso"] .anti__intro {
+  font-family: var(--font-body);
+  font-style: normal;
+}
+
+.anti__intro code {
+  font-family: var(--font-mono);
+  font-style: normal;
+  font-size: 0.875em;
+  background: var(--color-paper-2);
+  padding: 0.05em 0.35em;
+  border: var(--rule-hair) solid var(--color-rule);
+  color: var(--color-ink);
+}
+
+.anti-list {
+  list-style: none;
+  margin: 0;
+  padding: 0;
+  display: grid;
+  gap: 0;
+}
+
+.anti-row {
+  display: grid;
+  grid-template-columns: 3.5rem minmax(0, 1.3fr) minmax(0, 1fr);
+  gap: var(--space-xl);
+  padding-block: var(--space-xl);
+  border-block-start: var(--rule-hair) solid var(--color-rule);
+  align-items: start;
+}
+
+.anti-row:first-child {
+  border-block-start: 0;
+  padding-block-start: 0;
+}
+
+@media (max-width: 60rem) {
+  .anti-row {
+    grid-template-columns: 1fr;
+    gap: var(--space-md);
+  }
+}
+
+.anti-row__num {
+  margin: 0;
+  font-family: var(--font-mono);
+  font-size: var(--text-xs);
+  letter-spacing: var(--tracking-label);
+  text-transform: uppercase;
+  color: var(--color-muted);
+  padding-block-start: 0.45em;
+  font-feature-settings: "tnum" 1;
+}
+
+.anti-row__name {
+  margin: 0 0 var(--space-sm) 0;
+  font-family: var(--font-display);
+  font-style: italic;
+  font-weight: var(--display-weight, 500);
+  font-size: clamp(1.25rem, 1.5vw + 0.75rem, 1.75rem);
+  line-height: var(--lh-tight);
+  letter-spacing: var(--tracking-tight);
+  color: var(--color-rule-2);
+  text-decoration: line-through;
+  text-decoration-thickness: 1px;
+  text-decoration-color: var(--color-rule-2);
+  font-optical-sizing: auto;
+}
+
+[data-theme="brutal"] .anti-row__name,
+[data-theme="manifesto"] .anti-row__name,
+[data-theme="sport"] .anti-row__name {
+  text-transform: uppercase;
+  font-style: normal;
+}
+
+[data-theme="terminal"] .anti-row__name {
+  font-family: var(--font-mono);
+  font-style: normal;
+}
+
+.anti-row__desc {
+  margin: 0;
+  font-family: var(--font-serif);
+  font-size: 0.9375rem;
+  line-height: var(--lh-relaxed);
+  color: var(--color-muted);
+  max-width: 50ch;
+}
+
+[data-theme="brutal"] .anti-row__desc,
+[data-theme="manifesto"] .anti-row__desc,
+[data-theme="terminal"] .anti-row__desc,
+[data-theme="sport"] .anti-row__desc,
+[data-theme="almanac"] .anti-row__desc,
+[data-theme="quiet"] .anti-row__desc,
+[data-theme="bloom"] .anti-row__desc {
+  font-family: var(--font-body);
+  font-style: normal;
+}
+
+.anti-row__fix-label {
+  margin: 0 0 var(--space-2xs) 0;
+  font-family: var(--font-label);
+  font-size: var(--text-xs);
+  letter-spacing: var(--tracking-label);
+  text-transform: uppercase;
+  color: var(--color-accent);
+  font-feature-settings: "tnum";
+}
+
+.anti-row__fix-body {
+  margin: 0;
+  font-family: var(--font-body);
+  font-size: var(--text-base);
+  line-height: var(--lh-relaxed);
+  color: var(--color-ink);
+  max-width: 45ch;
+}
+
+/* — 05 · Foundations — eight compact cards in a 4×2 desktop grid.
+   Each card pairs a hand-drawn monoline SVG (currentColor stroke,
+   theme-aware) with a one-word title and a single line of body
+   copy. Stacks cleanly on mobile. */
+
+.found__intro {
+  margin: 0 0 var(--space-2xl);
+  font-family: var(--font-serif);
+  font-size: var(--text-md);
+  line-height: var(--lh-snug);
+  color: var(--color-ink-2);
+  max-width: 60ch;
+}
+
+[data-theme="brutal"] .found__intro,
+[data-theme="manifesto"] .found__intro,
+[data-theme="terminal"] .found__intro,
+[data-theme="sport"] .found__intro,
+[data-theme="almanac"] .found__intro,
+[data-theme="quiet"] .found__intro,
+[data-theme="bloom"] .found__intro,
+[data-theme="riso"] .found__intro {
+  font-family: var(--font-body);
+  font-style: normal;
+}
+
+/* Foundations cards — explicit per-card right + bottom borders so
+   every column gap renders crisp at every theme + viewport. The
+   prior gap-as-border pattern (gap: 0.5px, parent bg showing
+   through) sub-pixel-rounded inconsistently — col 2/3 gaps
+   sometimes vanished. The new approach uses real 1px borders on
+   each card, parent gives top + left, cards give right + bottom.
+   Result: every divider renders. */
+.found-cards {
+  list-style: none;
+  margin: 0;
+  padding: 0;
+  display: grid;
+  grid-template-columns: repeat(4, minmax(0, 1fr));
+  border-block-start: 1px solid var(--color-rule);
+  border-inline-start: 1px solid var(--color-rule);
+}
+
+.found-card {
+  background: var(--color-paper);
+  padding: var(--space-lg) var(--space-md);
+  display: grid;
+  gap: var(--space-sm);
+  align-content: start;
+  min-height: 12rem;
+  border-block-end: 1px solid var(--color-rule);
+  border-inline-end: 1px solid var(--color-rule);
+}
+
+.found-card__icon {
+  display: block;
+  width: 48px;
+  height: 48px;
+  color: var(--color-ink);
+  margin-block-end: var(--space-xs);
+}
+
+.found-card__icon svg {
+  display: block;
+  width: 100%;
+  height: 100%;
+}
+
+.found-card__name {
+  margin: 0;
+  font-family: var(--font-display);
+  font-weight: var(--display-weight, 500);
+  font-style: var(--display-style, normal);
+  font-size: var(--text-lg);
+  line-height: var(--lh-tight);
+  letter-spacing: var(--tracking-tight);
+  color: var(--color-ink);
+  font-optical-sizing: auto;
+}
+
+[data-theme="manifesto"] .found-card__name,
+[data-theme="brutal"] .found-card__name,
+[data-theme="sport"] .found-card__name {
+  text-transform: uppercase;
+}
+
+[data-theme="terminal"] .found-card__name {
+  font-family: var(--font-mono);
+  font-style: normal;
+}
+
+.found-card__body {
+  margin: 0;
+  font-family: var(--font-body);
+  font-size: 0.875rem;
+  line-height: var(--lh-relaxed);
+  color: var(--color-ink-2);
+  max-width: 28ch;
+}
+
+[data-theme="atelier"] .found-card,
+[data-theme="salon"] .found-card {
+  background: transparent;
+  border-inline-end: 0;
+  border-block-end: var(--rule-hair) dashed var(--color-rule);
+}
+
+[data-theme="atelier"] .found-cards,
+[data-theme="salon"] .found-cards {
+  background: transparent;
+  border: 0;
+  border-block-start: var(--rule-hair) solid var(--color-rule);
+  padding-block-start: var(--space-md);
+}
+
+@media (max-width: 60rem) {
+  .found-cards {
+    grid-template-columns: repeat(2, minmax(0, 1fr));
+  }
+}
+
+@media (max-width: 36rem) {
+  .found-cards {
+    grid-template-columns: 1fr;
+  }
+  .found-card { min-height: auto; }
+}
+
+/* — Section pull-arrow ————————————————————————————————————
+   Editorial "continued on p. 12" cue at the end of each section.
+   Italic serif label + arrow, biased left or right per section
+   for rhythm. Hover nudges the arrow forward. Pulls the eye into
+   the next section instead of stopping cold. */
+
+/* — Interlude — full-bleed typographic moment between sections —
+   One declarative phrase set in the active theme's display face,
+   centered on a contrasting paper band. Punctuates the scroll;
+   resets attention before the next section. Zero motion, pure type. */
+.interlude {
+  margin-inline: calc(-1 * var(--page-gutter));
+  padding-block: var(--space-3xl);
+  padding-inline: var(--page-gutter);
+  background: var(--color-paper-2);
+  border-block: var(--rule-hair) solid var(--color-rule);
+  display: grid;
+  place-items: center;
+  text-align: center;
+}
+
+.interlude__phrase {
+  margin: 0;
+  font-family: var(--font-display);
+  font-weight: var(--display-weight, 500);
+  font-style: var(--display-style, normal);
+  font-size: clamp(2.25rem, 6vw + 1rem, 5rem);
+  line-height: var(--lh-tight);
+  letter-spacing: var(--tracking-display);
+  color: var(--color-ink);
+  font-optical-sizing: auto;
+  max-width: 22ch;
+  /* Long-word safety inherited from base.css */
+}
+
+.interlude__phrase em {
+  font-style: italic;
+  /* Accent itself, not accent-ink: this <em> sits on the paper band,
+     not on an accent fill. --color-accent-ink is "text over accent",
+     which is paper-coloured on most themes and disappears here. */
+  color: var(--color-accent);
+  font-weight: 500;
+}
+
+[data-theme="brutal"] .interlude__phrase,
+[data-theme="manifesto"] .interlude__phrase,
+[data-theme="sport"] .interlude__phrase {
+  text-transform: uppercase;
+  letter-spacing: -0.01em;
+}
+
+[data-theme="brutal"] .interlude__phrase em,
+[data-theme="manifesto"] .interlude__phrase em,
+[data-theme="sport"] .interlude__phrase em {
+  font-style: normal;
+  color: var(--color-accent);
+}
+
+[data-theme="terminal"] .interlude__phrase {
+  font-family: var(--font-mono);
+}
+
+[data-theme="terminal"] .interlude__phrase em {
+  font-style: normal;
+  color: var(--color-accent);
+}
+
+@media (max-width: 48rem) {
+  .interlude { padding-block: var(--space-2xl); }
+}
+
+/* ──────────────────────────────────────────────────────────────
+   Mobile collapse — section-head one-column on narrow viewports.
+   Many themes override `.section__head`'s `grid-template-columns`
+   (e.g. sport: 6rem 1fr · atelier: custom · linen: 6rem 1fr · …).
+   Per-theme overrides have specificity (0, 2, 0); the original
+   mobile collapse rule was (0, 1, 0) and lost the cascade — the
+   fixed-column heads stayed 2-column on mobile, causing the title
+   to overlap the section label (most visible on Sport: italic
+   Anton title wrapped onto the "02 / EXAMPLES" label).
+
+   This rule restores single-column collapse with matching
+   specificity so it wins source-order against every per-theme
+   head override above. Keep this block last in the file. */
+@media (max-width: 48rem) {
+  [data-theme] .section__head {
+    grid-template-columns: 1fr;
+    gap: var(--space-md);
+    align-items: start;
+  }
+}
+