spirewise 1.7.0 → 1.8.0

package/skills/editorial-luxury-design-system/example-page-structures.md

@@ -0,0 +1,94 @@
+# Example Page Structures — Editorial Luxury
+
+Ready-to-assemble, **editorial** page blueprints. Each section names a layout (see
+`layout-system.md`) and components (see `component-library.md`). Compose on the asymmetric
+grid with serif display type, kickers/decks/pull quotes/captions, and dramatic whitespace.
+No borders between sections (separate by whitespace + alternating paper tone).
+
+Legend: `EH-* / F-* / P-* / C-* / Q-* / FT-*` layouts · components by name.
+
+## MANDATORY: 15+ page site map (≈20), 10+ sections/page, clean URLs
+
+Always ship a **full multipage website with 15+ pages (≈20)** — never a single landing
+page. Every page carries **at least 10 sections (≈12)**, **no borders/dividers between
+sections**, pure HTML/CSS/vanilla JS, **extensionless URLs**. Required 20-page map:
+
+```
+/                Home              /customers      Customers
+/platform        Platform          /case-studies   Case Studies
+/solutions       Solutions         /developers     Developers
+/products        Products          /docs           Documentation  ← + DOC-A subpages
+/features        Features          /about          About / Story
+/ai-agents       AI Agents         /careers        Careers
+/enterprise      Enterprise        /journal        Journal (Blog)  ← + article pages
+/security        Security          /contact        Contact
+/pricing         Pricing           /partners       Partners
+                                   /resources      Resources   /faq  FAQ
+```
+
+Each blueprint below is a **10-section** skeleton — extend toward 12, never fewer than 10.
+Every page must include: **Hero (editorial) · Feature/Story Sections · Product Highlights
+(plates) · Trust Signals · Testimonials (pull quotes) · Use Cases · Statistics (figures) ·
+Integrations · CTA (chapter opener) · Footer.**
+
+---
+
+## 1. Home (default)
+1. **Navbar** (slim, quiet) — extensionless links
+2. **Hero** `EH-A` — kicker · large serif display H1 (offset) · deck · understated CTA ·
+   art-directed image (full-bleed `.bleed` below)
+3. **Logos / Press** — "As featured in" small-caps + refined logo row
+4. **Feature/Story** `F-B` alternating plates — image ↔ text, captions
+5. **Pull Quote** — large italic serif testimonial breaking the measure
+6. **Index** `F-C` — numbered editorial list of capabilities ("01 — …", hairline rows)
+7. **Statistics** — editorial figures (serif numbers, small-caps labels, count-up)
+8. **Feature essay** `F-A` — offset column, drop cap, a pull quote
+9. **Pricing** `P-A` (or teaser) — quiet typographic tiers
+10. **CTA** `C-A` chapter opener (on `--paper-ink` plate) + **Footer** `FT-A`
+
+## 2. About / Story (brand essay)
+1. Navbar · 2. **Hero** `EH-C` type-only opener · 3. Feature essay `F-A` (the story, drop
+cap) · 4. Full-bleed plate + caption · 5. Pull quote · 6. **Index** (values/principles
+"01–04") · 7. Statistics (figures) · 8. Team plates (image+caption grid) · 9. CTA chapter
+opener · 10. Footer
+
+## 3. Platform / Product
+1. Navbar · 2. **Hero** `EH-A` (product plate) · 3. Feature plates `F-B` · 4. **Dashboard
+Preview** (editorial plate + caption) · 5. Feature essay `F-A` · 6. Code Preview (inset) ·
+7. Use Cases · 8. Statistics · 9. Pull quote · 10. CTA + Footer
+
+## 4. Journal (blog) / Article
+- **Journal index:** Navbar · Hero (kicker + serif title) · featured article plate · an
+  **index** of articles (F-C, image + kicker + serif title + date) · categories · pull
+  quote · newsletter · CTA · Footer (≥10).
+- **Article:** offset reading column (`--container-text`), drop cap, pull quotes, figures
+  with captions/credits, related articles, breadcrumb. `NewsArticle` JSON-LD.
+
+## 5. Enterprise / Security
+1. Navbar · 2. Hero (outcome-led, serif) · 3. Logos/press · 4. Feature essay · 5.
+**Enterprise** passage (value list, hairline rules) · 6. **Security** (compliance marks) ·
+7. Statistics/ROI · 8. Pull quote (exec) · 9. CTA "Speak with our team" · 10. Footer
+
+## 6. Pricing
+1. Navbar · 2. Hero (short, serif + toggle) · 3. **Pricing** `P-A` typographic tiers · 4.
+Feature comparison (hairline-ruled list) · 5. Enterprise/bespoke note · 6. Logos · 7.
+Statistics · 8. Pull quote · 9. **FAQ** `Q-A` (numbered, hairline rows) · 10. CTA + Footer
+
+## 7. Content pages (Careers, Customers, Case Studies, Partners, Resources, Contact, FAQ)
+Reach **≥10 sections** with editorial composition: Hero → body sections (open roles list,
+customer plates, case-study essay with pull quotes + figures, partner index, resource
+cards, contact with a refined form) → Trust Signals → Pull Quote → Statistics →
+Integrations → CTA chapter opener → Footer.
+
+---
+
+## Assembly notes
+- **Scale is mandatory:** 15+ pages, **≥10 sections each**. Never a single/thin page.
+- **Lead with serif display + dramatic whitespace**; compose asymmetrically on the grid;
+  use kickers, decks, pull quotes, captions, and numbered indices.
+- **No borders/dividers between sections** — whitespace + alternating paper tone (and the
+  occasional `--paper-ink` plate). Hairlines only *inside* compositions.
+- **Pace the reader:** vary density and image scale section to section (spacious → dense →
+  full-bleed → quiet quote) like a magazine.
+- **Understated CTAs**; one accent moment per section at most; real, art-directed imagery
+  with captions/credits. Mark guesses `[PLACEHOLDER]`.

package/skills/editorial-luxury-design-system/layout-system.md

@@ -0,0 +1,80 @@
+# Layout & Grid System — Editorial Luxury
+
+A **12-column asymmetric editorial grid** + canonical magazine-style layouts. Compositions
+are off-center and considered, with generous margins, columns, captions, and pull quotes.
+**No borders between sections.**
+
+## Grid
+
+```css
+:root { --grid-cols: 12; --grid-gap: var(--col-gap); }
+
+.grid { display: grid; gap: var(--grid-gap);
+        grid-template-columns: repeat(var(--grid-cols), 1fr); }
+
+/* Editorial column spans (asymmetric by design) */
+.col-text   { grid-column: 2 / 8; }     /* offset reading column */
+.col-wide   { grid-column: 2 / 12; }
+.col-left   { grid-column: 1 / 7; }
+.col-right  { grid-column: 7 / 13; }
+.col-aside  { grid-column: 9 / 12; }     /* margin notes / captions */
+.col-full   { grid-column: 1 / -1; }
+
+@media (max-width: 900px){
+  .col-text,.col-wide,.col-left,.col-right,.col-aside { grid-column: 1 / -1; }
+}
+```
+
+Breakpoints: `sm 480` · `md 768` · `lg 1024` · `xl 1280` · `2xl 1440`. Mobile-first;
+the editorial grid collapses to a single column by `md` (asymmetry → linear flow).
+
+## Canonical editorial layouts
+
+### Hero / chapter opener
+- **EH-A Editorial hero (default):** small-caps **kicker** → large serif **display** H1
+  (offset left on the grid) → **deck** → understated CTA, with a large art-directed image
+  to one side or full-bleed below. Dramatic whitespace.
+- **EH-B Cover:** a full-bleed image with the title set over it (magazine cover), kicker +
+  serif title + deck; scrim/positioning ensures legibility.
+- **EH-C Type-only opener:** an oversized serif statement centered or offset with vast
+  whitespace and a single hairline — no image (Stripe Press feel).
+
+### Feature / story
+- **F-A Feature essay:** offset reading column (`.col-text`) with a drop cap, pull quotes
+  breaking the measure, and figures with captions — long-form editorial.
+- **F-B Alternating plates:** image ↔ text rows, full-bleed or inset images with captions,
+  flipping sides; generous space between.
+- **F-C Index / list:** a numbered editorial index ("01 — …") of features/articles as a
+  typographic list with hairline rules between rows (rules *within* the list, not between sections).
+- **F-D Two-column editorial:** asymmetric `.col-left` headline + `.col-right` body/columns.
+
+### Pricing / CTA / FAQ / Footer
+- **P-A Editorial pricing:** tiers as quiet typographic columns (serif amount, hairline
+  rules, understated CTA) — not loud cards. **P-B 2-tier + bespoke/enterprise** note.
+- **C-A CTA opener:** a chapter-opener-style band (large serif line + understated CTA) on a
+  `--paper-bone` or `--paper-ink` plate. `--section-y-lg`, no border.
+- **Q-A Editorial FAQ:** a numbered list with hairline rules between items; serif questions.
+- **FT-A Editorial footer:** brand wordmark + columns + fine print, hairline at the top edge
+  only, small-caps labels. **FT-B minimal.**
+
+### Dashboard / Docs
+- **D-A Plate:** product imagery as a full-bleed/inset editorial plate with a caption.
+- **DOC-A Editorial docs:** offset prose column (`--container-text`) + margin notes
+  (`.col-aside`) + a fine TOC; serif headings, sans body, hairline rules.
+
+## Composition rules
+
+1. **Separate sections by whitespace + paper tone, NEVER borders.** Alternate `--paper`/
+   `--paper-bone` (and the occasional `--paper-ink` plate); `.section{border:0}`; no `<hr>`
+   between sections. Editorial **hairlines live inside compositions** (under kickers,
+   between index/FAQ rows, in the footer) — never as section dividers.
+2. **Compose asymmetrically on the grid.** Offset the reading column; let images and quotes
+   break the measure. Keep alignment precise.
+3. **One idea per section, paced.** Vary density and image scale section to section for a
+   magazine rhythm (spacious → dense → full-bleed → quiet quote).
+4. **At least 10 sections per page**, **15+ pages.** Never thin.
+5. **Rhythm:** Editorial hero → kicker/intro → feature essay/plates → pull quote → index →
+   metrics/testimonials → pricing → FAQ → CTA opener → editorial footer.
+6. **Prose measure capped** (`--container-text`, ~66ch); full-bleed images use `.bleed`.
+7. **Reflow gracefully:** asymmetric spans collapse to a single, well-spaced column on
+   mobile; images stack with captions; whitespace scales down but stays generous.

package/skills/editorial-luxury-design-system/motion-system.md

@@ -0,0 +1,82 @@
+# Motion System — Editorial Luxury
+
+Motion is **quiet, slow, and elegant** — type settles in line by line, images reveal behind
+a soft curtain, and elements fade up with grace. Nothing bounces or rushes. The pacing
+feels like turning the pages of a beautiful magazine. Everything degrades under
+`prefers-reduced-motion`.
+
+Distilled from luxury/editorial sites (Aesop, Hermès, Cartier — restrained, refined) and
+OpenAI/Anthropic/Perplexity/Cursor (calm) for structure.
+
+## Tokens
+
+```css
+:root {
+  --dur-fast: 200ms;   --dur-base: 360ms;  --dur-slow: 560ms;  --dur-slower: 900ms;
+  --ease-out: cubic-bezier(0.16, 1, 0.3, 1);     /* soft, refined decelerate */
+  --ease-editorial: cubic-bezier(0.22, 0.61, 0.36, 1);
+}
+```
+Note: durations are **slightly longer** than typical SaaS — luxury motion is unhurried.
+
+## Principles
+1. **Slow and graceful.** Reveals run 360–900ms with soft easing; nothing snappy.
+2. **Type is choreographed.** Headlines can settle **line by line**; kickers fade first,
+   then the headline, then the deck — a considered cadence.
+3. **Move a little.** Fade + 16–28px rise; image scale 1.04→1.0 reveal. No bounce/spin.
+4. **One focal motion per viewport.** Calm, paced, never busy.
+5. **Cheap props only** (`transform`/`opacity`/`clip-path`).
+
+## Patterns
+
+- **Scroll reveal (signature):** elements start `opacity:0; translateY(24px)` → `.in` via
+  `IntersectionObserver`, `--dur-slow` `--ease-out`. Reveal once; unhurried.
+- **Line-by-line headings:** wrap heading lines in spans; reveal each with a small stagger
+  (~90ms) and a soft rise — the editorial "type settling" effect.
+- **Image curtain:** images reveal via `clip-path` wipe (or mask) + a slight scale-down
+  (1.05→1.0), `--dur-slower`. Feels like a printed plate appearing.
+- **Drop cap / pull quote:** fade in slightly after their paragraph for emphasis.
+- **Hover:** links grow their hairline underline (animate `border`/underline); buttons
+  shift ink→accent; image plates lift subtly (`--shadow-md`→`--shadow-lg`) and scale ≤1.02.
+- **Nav on scroll:** paper background + hairline fade in under the bar after ~24px.
+- **Section/page transitions:** slow cross-fade + gentle rise; consider a brief full-page
+  fade on navigation for a "turning the page" feel (keep it fast enough, ≤300ms).
+- **Counters:** editorial figures count up on reveal (final value in DOM).
+- **Marquee (logos):** very slow, linear, pausable — or simply static (luxury often is).
+
+## Reduced motion (required)
+
+```css
+@media (prefers-reduced-motion: reduce) {
+  *, *::before, *::after { animation-duration:.001ms !important;
+    animation-iteration-count:1 !important; transition-duration:.001ms !important;
+    scroll-behavior:auto !important; }
+}
+```
+Under reduced motion: show all reveals/headings/images in final state immediately; no
+line-by-line, curtain, parallax, marquee, or page-fade; counters render final value.
+
+## Minimal vanilla helpers
+
+```js
+// reveal (incl. line-by-line headings via [data-lines])
+const io = new IntersectionObserver((es)=>es.forEach(e=>{ if(e.isIntersecting){
+  const el=e.target;
+  if(el.hasAttribute('data-lines')){
+    el.querySelectorAll('.line').forEach((ln,i)=> ln.style.transitionDelay = `${i*90}ms`);
+  }
+  el.classList.add('in'); io.unobserve(el);
+}}, {threshold:.2}));
+document.querySelectorAll('[data-reveal],[data-lines]').forEach(el=>io.observe(el));
+```
+```css
+[data-reveal]{ opacity:0; transform: translateY(24px);
+  transition: opacity var(--dur-slow) var(--ease-out), transform var(--dur-slow) var(--ease-out); }
+[data-reveal].in{ opacity:1; transform:none; }
+[data-lines] .line{ display:block; opacity:0; transform: translateY(0.5em);
+  transition: opacity var(--dur-base) var(--ease-out), transform var(--dur-base) var(--ease-out); }
+[data-lines].in .line{ opacity:1; transform:none; }
+.plate img{ clip-path: inset(0 0 100% 0); transform: scale(1.05);
+  transition: clip-path var(--dur-slower) var(--ease-editorial), transform var(--dur-slower) var(--ease-editorial); }
+.plate.in img{ clip-path: inset(0 0 0 0); transform: scale(1); }
+```

package/skills/editorial-luxury-design-system/spacing-system.md

@@ -0,0 +1,77 @@
+# Spacing System — Editorial Luxury
+
+A strict **4-point base / 8-point rhythm** with **dramatic, magazine-grade whitespace** and
+**generous outer margins**. Space + the editorial grid + paper tone separate content —
+never borders.
+
+## Scale tokens
+
+```css
+:root {
+  /* 4-pt base, 8-pt rhythm */
+  --space-0: 0;        --space-1: 4px;   --space-2: 8px;   --space-3: 12px;
+  --space-4: 16px;     --space-5: 20px;  --space-6: 24px;  --space-8: 32px;
+  --space-10: 40px;    --space-12: 48px; --space-16: 64px; --space-20: 80px;
+  --space-24: 96px;    --space-28: 112px;--space-32: 128px;--space-40: 160px;
+  --space-48: 192px;   --space-56: 224px;  /* editorial XL whitespace */
+
+  /* Radii — luxury leans crisp: small radii or none; insets soft */
+  --radius-sm: 4px;   --radius-md: 8px;  --radius-lg: 12px; --radius-xl: 16px;
+  --radius-pill: 999px;
+
+  /* Containers — editorial measures */
+  --container-text: 680px;   /* reading column / prose measure */
+  --container-md:   840px;
+  --container-lg:   1040px;
+  --container-xl:   1200px;
+  --container-2xl:  1360px;   /* wide editorial spreads / full-bleed insets */
+  --margin: clamp(24px, 7vw, 120px);   /* generous editorial outer margin */
+
+  /* Section rhythm (fluid, dramatic) */
+  --section-y: clamp(80px, 11vw, 176px);
+  --section-y-lg: clamp(112px, 15vw, 240px);  /* hero / chapter openers */
+  --stack: clamp(16px, 2vw, 24px);
+  --col-gap: clamp(24px, 4vw, 72px);          /* gap between editorial columns */
+}
+```
+
+## Usage map
+
+- **4-pt system** (`--space-1..6`): inside components — kicker↔headline, caption gaps,
+  button/badge padding, list-item gaps, rule margins.
+- **8-pt system** (`--space-8..16`): between elements — headline↔deck, deck↔body, image↔
+  caption, form rows.
+- **Editorial XL** (`--space-20..56`): the dramatic gaps that define luxury — around heroes,
+  between a quote and the next block, framing full-bleed images.
+- **Outer margin** (`--margin`): generous, fluid side margins (up to ~120px) — content sits
+  inset from the page edge, magazine-style. Full-bleed images may break to the edge.
+- **Container widths:** prose at `--container-text` (680, ~66ch); standard sections
+  `--container-lg/xl`; wide spreads `--container-2xl`.
+- **Section spacing:** `padding-block: var(--section-y)`; hero/chapter openers
+  `--section-y-lg`. This big rhythm is the luxury signal.
+- **Page spacing:** sections stack with no extra margins and **no borders/dividers** —
+  `--section-y` whitespace + alternating paper tone separate them.
+
+## Rules
+
+1. **Only use scale values.** No arbitrary `13px`/`27px`.
+2. **Be generous.** When unsure, add space. Cramped layouts kill the luxury feel.
+3. **Asymmetric margins are fine.** The editorial grid often offsets content; keep the
+   *system* (gaps/margins from tokens) even when the composition is asymmetric.
+4. **Prose measure 62–75ch.** Never run body text full width; cap with `--container-text`.
+5. **Whitespace + paper tone > dividers.** Separate sections with space and tone, never lines.
+
+## Helpers
+
+```css
+.container { width:100%; max-width: var(--container-xl);
+             margin-inline:auto; padding-inline: var(--margin); }
+.container--text { max-width: var(--container-text); }   /* reading column */
+.container--wide { max-width: var(--container-2xl); }
+.section   { padding-block: var(--section-y); border: 0; }   /* never a section border */
+.section--opener { padding-block: var(--section-y-lg); }
+.section--bone { background: var(--paper-bone); }            /* alternate paper tone, not a line */
+.section--ink  { background: var(--paper-ink); color: var(--text-on-ink); } /* dark plate */
+.stack > * + * { margin-top: var(--stack); }
+.bleed { width: 100vw; margin-inline: calc(50% - 50vw); }    /* full-bleed image break-out */
+```

package/skills/editorial-luxury-design-system/typography-system.md

@@ -0,0 +1,107 @@
+# Typography System — Editorial Luxury
+
+Typography **is** this system. A high-contrast **serif display** family carries headlines,
+pull quotes, and decks; a clean **sans** (or a refined serif) handles UI/body. The scale is
+dramatic, the details are fine, and the craft is the point.
+
+## Fonts
+
+```css
+:root {
+  /* Serif display — expressive, high-contrast (the signature) */
+  --font-serif: "Canela", "GT Sectra", "Tiempos Headline", "Freight Display",
+                "Playfair Display", "Cormorant Garamond", Georgia, "Times New Roman", serif;
+  /* Sans — clean, neutral for UI/body */
+  --font-sans:  "Inter", "Geist", "Söhne", -apple-system, BlinkMacSystemFont,
+                "Helvetica Neue", Arial, sans-serif;
+  /* Optional refined serif for long-read body */
+  --font-serif-text: "Tiempos Text", "Lyon Text", "Newsreader", Georgia, serif;
+  --font-mono:  "Geist Mono", "JetBrains Mono", ui-monospace, Menlo, monospace;
+
+  --font-display: var(--font-serif);  /* headlines + display */
+  --font-body:    var(--font-sans);   /* body/UI (or --font-serif-text for editorial long-reads) */
+}
+```
+Notes:
+- Prefer a real high-contrast display serif (Canela, GT Sectra, Tiempos Headline, Freight).
+  Free fallbacks: **Playfair Display**, **Cormorant Garamond**, **Newsreader**, Georgia.
+- Pair the serif display with a quiet sans for UI so the serif stays special.
+- For magazine long-reads, set body in `--font-serif-text` instead of sans.
+
+## Fluid type scale (clamp) — dramatic
+
+```css
+:root {
+  --fs-display: clamp(3rem, 1.6rem + 6.4vw, 6.5rem);     /* 48 → 104px editorial hero */
+  --fs-h1:      clamp(2.5rem, 1.6rem + 4vw, 4.5rem);     /* 40 → 72px */
+  --fs-h2:      clamp(2rem, 1.4rem + 2.6vw, 3.25rem);    /* 32 → 52px */
+  --fs-h3:      clamp(1.5rem, 1.2rem + 1.4vw, 2.125rem); /* 24 → 34px */
+  --fs-h4:      clamp(1.25rem, 1.1rem + 0.6vw, 1.5rem);  /* 20 → 24px */
+  --fs-deck:    clamp(1.25rem, 1.1rem + 0.7vw, 1.625rem);/* 20 → 26px standfirst/deck */
+  --fs-quote:   clamp(1.75rem, 1.3rem + 2vw, 2.75rem);   /* 28 → 44px pull quote */
+  --fs-lead:    clamp(1.125rem, 1.04rem + 0.45vw, 1.375rem);/* 18 → 22px */
+  --fs-body:    1.0625rem;     /* 17px base (comfortable reading) */
+  --fs-body-lg: 1.1875rem;     /* 19px long-read */
+  --fs-small:   0.875rem;      /* 14px caption */
+  --fs-kicker:  0.75rem;       /* 12px small-caps kicker */
+}
+```
+
+## Roles (each: family · weight · line-height · tracking)
+
+| Role | Family | Size | Weight | LH | Tracking |
+|---|---|---|---|---|---|
+| **Display** (hero) | serif | `--fs-display` | 400–500 | 1.02–1.06 | -0.01em to -0.02em |
+| **H1** | serif | `--fs-h1` | 400–500 | 1.06 | -0.015em |
+| **H2** (section) | serif | `--fs-h2` | 500 | 1.1 | -0.01em |
+| **H3** | serif | `--fs-h3` | 500 | 1.2 | -0.005em |
+| **H4** | serif/sans | `--fs-h4` | 500–600 | 1.3 | 0 |
+| **Kicker / eyebrow** | sans | `--fs-kicker` | 600 | 1.2 | 0.16em, UPPERCASE (small-caps) |
+| **Deck / standfirst** | serif/sans | `--fs-deck` | 400 | 1.4 | 0 |
+| **Pull quote** | serif | `--fs-quote` | 400 | 1.2 | -0.01em, often italic |
+| **Lead** | sans/serif | `--fs-lead` | 400 | 1.5 | 0 |
+| **Body** | sans or serif-text | `--fs-body`/`-lg` | 400 | 1.65–1.75 | 0 |
+| **Caption / credit** | sans | `--fs-small` | 400 (credit italic) | 1.45 | 0.01em |
+| **Button** | sans | `--fs-body` (`0.9375rem`) | 600 | 1 | 0.01em |
+| **Navigation** | sans | `--fs-small`/`--fs-body` | 500 | 1 | 0.02em |
+| **Pricing amount** | serif | `clamp(2.5rem,2rem+2vw,3.75rem)` | 400–500 | 1 | -0.01em |
+
+## Editorial type rules (the craft)
+
+1. **Serif headlines, light weight.** High-contrast display serifs look best at **400–500**
+   weight (not bold) at large sizes — let the contrast of the letterforms carry it.
+2. **Generous leading on body.** Body line-height **1.65–1.75**; measure **62–75ch**
+   (`max-width: 68ch`). Long reads can use `--font-serif-text`.
+3. **Kickers are small-caps + tracked.** Uppercase, ~0.16em tracking, muted or accent,
+   with a hairline rule under them.
+4. **Drop cap** (one per page max): oversized serif initial on a key opening paragraph
+   (`p.has-dropcap::first-letter`).
+5. **Pull quotes** break the column in large italic serif with a hairline above; keep them short.
+6. **Hanging punctuation / true quotes/dashes.** Use proper "" '' — – characters; enable
+   `font-feature-settings` ligatures/oldstyle figures where the face supports them.
+7. **One display moment per page** (the hero). Don't make every heading enormous.
+8. **Numbers** in stats/pricing can use oldstyle or tabular figures (`font-variant-numeric`).
+
+## Base CSS
+
+```css
+body { font-family: var(--font-body); font-size: var(--fs-body); line-height: 1.7;
+       color: var(--text-secondary); -webkit-font-smoothing: antialiased;
+       text-rendering: optimizeLegibility; font-feature-settings: "liga","kern"; }
+h1,h2,h3 { font-family: var(--font-serif); color: var(--ink); font-weight: 500;
+           text-wrap: balance; letter-spacing: -0.015em; }
+h1 { font-size: var(--fs-h1); line-height: 1.06; font-weight: 450; }
+.kicker { font-family: var(--font-sans); font-size: var(--fs-kicker); font-weight:600;
+          letter-spacing:.16em; text-transform:uppercase; color: var(--text-muted); }
+.kicker::after { content:""; display:block; width:40px; height:1px;
+          background: var(--rule-default); margin-top: var(--space-3); }
+.deck { font-size: var(--fs-deck); color: var(--text-secondary); max-width: 56ch; }
+.pull-quote { font-family: var(--font-serif); font-size: var(--fs-quote); font-style: italic;
+          line-height:1.2; color: var(--ink); max-width: 24ch; }
+.has-dropcap::first-letter { font-family: var(--font-serif); float:left; font-size: 3.4em;
+          line-height:.8; padding-right:.08em; color: var(--ink); }
+figcaption { font-size: var(--fs-small); color: var(--text-muted); }
+figcaption .credit { font-style: italic; }
+a { color: var(--accent); text-underline-offset: 3px; text-decoration-thickness: 1px; }
+p { max-width: 68ch; }
+```

package/skills/editorial-luxury-design-system/website-generation-rules.md

@@ -0,0 +1,194 @@
+# Website Generation Rules — Editorial Luxury
+
+How an agent turns this design system into a **production-ready, multi-page, editorial
+luxury website**. Output clean, semantic **pure HTML + CSS + vanilla JavaScript** plus
+design tokens. The signature: serif display type, an asymmetric editorial grid, dramatic
+whitespace, and impeccable typographic craft. (The token/spec system can be exported for
+other agents — see below — but the generated website itself is always pure vanilla.)
+
+## Technology stack (MANDATORY — no frameworks, no libraries)
+
+Build everything with **HTML5 + CSS3 + vanilla JavaScript only**. The generated site must
+contain **zero** of:
+
+> ❌ React · ❌ Vue · ❌ Angular · ❌ Svelte/Next/Nuxt · ❌ Bootstrap · ❌ Tailwind ·
+> ❌ jQuery · ❌ any UI library · ❌ any CSS framework · ❌ any JS animation/utility library
+
+No build step, no npm dependencies, no CDN kits. The editorial grid is CSS Grid; reveals/
+line-by-line type/image curtains are native CSS + `IntersectionObserver`. Exporting
+`tokens.json` for other agents is allowed; shipping the site in a framework is not.
+
+## Mandatory scale & structure (read first)
+- **Multipage: build 15+ pages (recommended ~20)** — a full site map, not one page.
+- **Every page has at least 10 sections (recommend 12)** from the layouts/components.
+- **No borders or dividers between sections** — separate with **whitespace, alternating
+  paper tone (`--paper`/`--paper-bone`/occasional `--paper-ink` plate), and type hierarchy**.
+  In CSS: `.section { border: 0 }`; never `<hr>`/divider or `border-top/bottom` between
+  sections. (Editorial **hairline rules** are allowed *inside* compositions — under kickers,
+  between index/FAQ rows, in the footer — never as a divider between page sections.)
+- **Clean, extensionless, Vercel-ready URLs** (`/pricing`, not `/pricing.html`).
+
+## Required pages (build all — 15+; ~20 recommended)
+Home `/` · Platform `/platform` · Solutions `/solutions` · Products `/products` ·
+Features `/features` · AI Agents `/ai-agents` · Enterprise `/enterprise` · Security
+`/security` · Pricing `/pricing` · Customers `/customers` · Case Studies `/case-studies`
+· Developers `/developers` · Documentation `/docs` · About `/about` · Careers `/careers`
+· Blog (Journal) `/journal` · Contact `/contact` · Partners `/partners` · Resources
+`/resources` · FAQ `/faq`. (For brand sites you may rename to Story/Craft/Collection/
+Journal/Press, but still ship 15+ pages.) Add subpages freely.
+
+## Required sections (every page — ≥10, recommend 12)
+Hero (editorial) · Feature/Story Sections · Product Highlights (plates) · Trust Signals
+(logos/press) · Testimonials (pull quotes) · Use Cases · Statistics (editorial figures) ·
+Integrations · CTA (chapter opener) · Footer. Add more (Security, Enterprise, Index, Pull
+Quote, Pricing, FAQ) to reach 12.
+
+## Site types this must support
+Landing pages · startup websites · AI company websites · enterprise SaaS · developer
+platforms · agentic-AI startups · infrastructure startups · brand/publication sites. (See
+`example-page-structures.md`.)
+
+## What to generate
+- **HTML** — semantic, accessible, one file per page; figures with captions/credits.
+- **CSS** — `tokens.css` (`:root` vars) + `styles.css` (base + editorial grid + components).
+- **JavaScript** — vanilla: nav/menu, scroll reveal, line-by-line headings, image curtains,
+  accordion, tabs, toggle, copy, counters. Usable without JS.
+- **`vercel.json`** + **`sitemap.xml`** + **`robots.txt`**.
+- **Design tokens** — `tokens.json` (token export only).
+- **Component specifications** — when asked for the *system*, emit component markup + token
+  usage from `component-library.md`.
+- **Accessibility + responsive guidance** inline (comments) and honored.
+
+## File/output layout (default — flat files + clean URLs)
+```
+website/
+├── index.html              # served at /
+├── platform.html  solutions.html  products.html  features.html  ai-agents.html
+├── enterprise.html  security.html  pricing.html  customers.html  case-studies.html
+├── developers.html  docs.html  about.html  careers.html  journal.html  contact.html
+├── partners.html  resources.html  faq.html
+├── css/  { tokens.css, styles.css }
+├── js/   { main.js }        # nav, reveal, line-headings, curtains, accordion, copy
+├── assets/                  # editorial imagery, icons, og images, fonts (if self-hosting)
+├── tokens.json
+├── sitemap.xml  robots.txt
+└── vercel.json
+```
+Alternative: folder-per-page `platform/index.html`. Either way **all internal links are
+extensionless** (`href="/pricing"`).
+
+## Clean URLs & Vercel (MANDATORY)
+- **No `.html` in any URL**, no `page.html` links, no ugly query params.
+- Emit **`vercel.json`** so `.html` is stripped, refresh works, and deep links resolve:
+```json
+{
+  "cleanUrls": true,
+  "trailingSlash": false,
+  "headers": [
+    { "source": "/assets/(.*)", "headers": [
+      { "key": "Cache-Control", "value": "public, max-age=31536000, immutable" } ] }
+  ]
+}
+```
+  `cleanUrls: true` serves `platform.html` at `/platform` and 301-redirects `.html`.
+  Provide a `404.html`. Every nav/footer/internal link is extensionless.
+
+## Navigation system (vanilla JS)
+- **Desktop nav** = slim quiet bar with an optional refined **dropdown** (clean paper panel,
+  hairline-separated columns); keyboard + `aria-expanded`/`aria-haspopup`.
+- **Mobile nav**: full-screen paper overlay, serif links, generous spacing, focus-trap, ESC.
+- **Multi-level nav** + **breadcrumbs** on deep pages (journal/case studies/docs);
+  `aria-current="page"`.
+
+## Hard rules
+1. **Vanilla only.** No frameworks/libraries in the shipped site.
+2. **Editorial craft.** Serif display headlines; asymmetric editorial grid; dramatic
+   whitespace; kickers/decks/pull quotes/captions; understated CTAs (never loud gradients).
+3. **Tokens first, once.** All colors/type/spacing as `:root` vars; no scattered hex/px;
+   rebrand = change `--accent-*` (single accent).
+4. **No section borders.** Separate with whitespace + paper tone. `.section{border:0}`;
+   hairlines only *inside* compositions.
+5. **Mobile-first + responsive**; asymmetric grid → single well-spaced column by `md`; no
+   320px scroll; prose measure capped (62–75ch).
+6. **Semantic + accessible** per `accessibility-system.md` (figure/blockquote/ol, contrast
+   on warm neutrals, cover-text scrims, focus, reduced motion). Non-negotiable.
+7. **Components from the library** (editorial). Every component: responsive, accessible,
+   reusable, production-ready, animation-ready.
+8. **Performance:** self-host or `font-display: swap` the serif (and subset it); lazy-load
+   below-the-fold imagery (`loading="lazy"`); animate transform/opacity/clip-path only;
+   minimal JS, no libraries; high Lighthouse (90+).
+9. **SEO on every page** (below). **Real, considered copy** (kickers/decks/captions written
+   like an editor); mark guesses `[PLACEHOLDER]`.
+10. **Self-verify** against anti-patterns + every companion checklist before done.
+
+## SEO requirements (every page)
+Unique `<title>` + meta description (150–160); **Open Graph** + **Twitter card**
+(`summary_large_image`) + OG image; **canonical** (clean URL); **JSON-LD** (`Organization`
++ `WebSite` site-wide; `Article`/`NewsArticle` for journal, `Product`, `FAQPage`,
+`BreadcrumbList` where relevant); **`sitemap.xml`** + **`robots.txt`**.
+
+## Performance requirements
+Fast first paint, minimal vanilla JS, subset/self-hosted serif with `swap`, optimized/
+centralized CSS, lazy imagery, cached assets (via `vercel.json`), no blocking libraries.
+
+## Boilerplate `<head>`
+```html
+<!doctype html><html lang="en"><head>
+<meta charset="utf-8">
+<meta name="viewport" content="width=device-width, initial-scale=1">
+<meta name="color-scheme" content="light dark">
+<title><!-- Page · Brand --></title>
+<meta name="description" content="<!-- 150–160 chars -->">
+<link rel="canonical" href="https://brand.com/path">
+<meta property="og:type" content="website">
+<meta property="og:title" content="<!-- Page · Brand -->">
+<meta property="og:description" content="<!-- … -->">
+<meta property="og:url" content="https://brand.com/path">
+<meta property="og:image" content="https://brand.com/assets/og.png">
+<meta name="twitter:card" content="summary_large_image">
+<link rel="stylesheet" href="/css/tokens.css">
+<link rel="stylesheet" href="/css/styles.css">
+<script type="application/ld+json"><!-- Organization / WebSite JSON-LD --></script>
+</head>
+<body>
+  <a class="skip-link" href="#main">Skip to content</a>
+  <header><!-- Navbar (links extensionless: /about, /pricing) --></header>
+  <main id="main"><!-- editorial hero + 10–12 sections, alternating paper tone, no dividers --></main>
+  <footer><!-- Editorial footer --></footer>
+  <script src="/js/main.js" defer></script>
+</body></html>
+```
+
+## Required base CSS (no section borders; paper tone)
+```css
+html, body { background: var(--paper); color: var(--text-secondary); }
+.section { padding-block: var(--section-y); border: 0; }   /* no borders/dividers between sections */
+.section--bone { background: var(--paper-bone); }          /* alternate paper tone by COLOR, not lines */
+.section--ink  { background: var(--paper-ink); color: var(--text-on-ink); }
+.section + .section { border-top: 0; }                     /* explicitly: no rule between sections */
+/* Separation = whitespace (--section-y) + paper tone + type hierarchy.
+   Editorial hairlines live INSIDE compositions (kickers, lists, footer), never between sections. */
+```
+
+## tokens.json shape (excerpt)
+```json
+{
+  "color": { "paper": {"base":"#faf8f3","bone":"#f4f1ea","ink":"#1a1814"},
+             "text": {"ink":"#17150f","primary":"#221f18","secondary":"#4a463c","muted":"#726c5e"},
+             "rule":"rgba(23,21,15,0.18)", "accent":"#7a2e2e", "gold":"#9a7b2e" },
+  "space": { "8":"32px","16":"64px","24":"96px","40":"160px" },
+  "container": { "text":"680px","xl":"1200px" },
+  "type": { "serif":"Canela, 'Playfair Display', Georgia, serif",
+            "display":"clamp(3rem,1.6rem + 6.4vw,6.5rem)", "body":"1.0625rem" }
+}
+```
+
+## Definition of done
+**15+ pages (≈20), each with ≥10 sections (≈12), composed on the asymmetric editorial grid
+with serif display type and dramatic whitespace, no borders/dividers between sections.**
+Pure HTML/CSS/vanilla JS (no frameworks/libraries); clean extensionless URLs with
+`vercel.json` (refresh + deep links work); refined desktop nav + mobile + breadcrumb;
+per-page SEO + sitemap; tokens centralized; fully responsive (graceful grid reflow); AA
+accessible (warm-neutral contrast, cover-text scrims, semantics); quiet elegant motion with
+reduced-motion fallback; high Lighthouse; zero anti-patterns; could sit next to Aesop/
+Hermès/Kinfolk/Stripe Press without looking like a template.