dreative 0.4.1 → 0.5.0

package/skill/dreative/skills/mobile.md

@@ -1,117 +1,117 @@
-# Dreative Specialist Skill — Mobile Excellence
-
-Load this file when `plan.skills` includes `mobile`, when the brief says
-mobile-first / most users are on phones / "make the mobile version great", or
-when an app-register product is primarily used on mobile. It EXTENDS DESIGN.md
-§13 (which governs how desktop effects DEGRADE); this file is about designing
-mobile as a first-class surface in its own right — clean, tidy, and still
-genuinely animated and premium, just calibrated to a 390px viewport, a thumb,
-and a battery. It STACKS with whatever treatments were chosen: motion/3d/
-immersive briefs get their mobile-native expression here, never a cropped
-desktop.
-
-## 0. The register: calm confidence, not shrunken desktop
-
-Mobile premium reads differently from desktop premium: less simultaneous
-motion, more focus per viewport, perfect ergonomics. The dial translation:
-desktop ambition N ≈ mobile ambition N−2. A desktop dial-8 site ships a
-dial-6 phone experience that feels JUST as crafted — one hero moment, silky
-scroll reveals, tactile presses — rather than a stuttering copy of the desktop
-choreography.
-
-- **One idea per viewport.** The phone viewport is a frame; compose each
-  screenful like one (hero = one headline + one visual + one CTA, nothing
-  else). If a desktop section held three things, the mobile version stacks
-  them as three clean beats or cuts to the strongest one.
-- **Tidy is the aesthetic.** Consistent gutters (20-24px), one column
-  discipline, generous vertical rhythm (56-80px between sections), no element
-  closer than 8px to another. Clutter reads twice as loud at 390px.
-- **Type recalibrated, not just clamped**: hero 2-3rem (2 lines max with the
-  REAL copy), body stays ≥16px, line-length falls out of the gutters — check
-  headlines don't orphan single words (`text-wrap: balance`).
-
-## 1. Layout patterns that are mobile-native
-
-- Asymmetric desktop grids collapse to intentional single-column ORDER
-  (decide what comes first — usually visual → headline → support → CTA), not
-  DOM-order accidents. Check the collapsed order reads as a story.
-- Horizontal scroll is mobile's extra axis: card shelves, galleries, and
-  chip rows as swipeable strips (`overflow-x-auto` + `scroll-snap-type: x
-  mandatory` on short strips, edge inset, visible peek of the next card —
-  the peek IS the affordance; no scrollbars, no arrows).
-- Sticky bottom bar for the primary action on conversion/product pages
-  (add-to-cart, main CTA): thumb-reach beats footer CTA; respect
-  `env(safe-area-inset-bottom)`.
-- Accordions/tabs for secondary density (specs, FAQs) instead of long walls;
-  tables become stacked cards or a scrollable container with sticky first
-  column — never squeezed 6-column tables.
-- Nav: the fullscreen menu is mobile's one theatrical moment — staggered
-  link entrance (line-mask, 60ms stagger), big touch-sized links (≥ 48px
-  rows), contact/socials in the footer of the overlay. Wired per ux.md §1
-  (focus trap, scroll lock, Esc/back closes).
-
-## 2. Motion on mobile (still premium, never crazy)
-
-The motion inventory scaled to touch (extends motion.md §9):
-
-- **Keep**: one composed hero entrance (≤ 600ms total), line-mask headline
-  reveals, in-view section reveals (2-3, `once: true`), press states on
-  EVERYTHING tappable (`active:scale-[0.98]` — on mobile this is the main
-  interaction feedback, since hover doesn't exist), marquees (pause
-  off-screen), counters, accordion springs.
-- **Translate**: parallax halves or dies (§13); pinned sequences → short
-  sticky sections (≤ 1.5 viewports) or plain stacked beats; hover-woken media
-  → in-view-woken (loop plays while ≥ 60% visible, pauses off-screen) or
-  tap-to-play; magnetic/cursor effects → gone entirely, replaced by press
-  feedback; drag-to-explore → swipe carousel or index list as PRIMARY
-  (DESIGN.md §13).
-- **Ban on mobile**: smooth-scroll libraries at full strength (Lenis: disable
-  or `syncTouch` carefully — fighting native momentum feels broken), more than
-  one scrubbed sequence, simultaneous animation of > 4 elements, any effect
-  that drops the scroll below 60fps on a mid-range phone.
-- Scroll reveals trigger earlier (`margin: "-10% 0px"` not -20%) — mobile
-  viewports are short and users scroll fast; late reveals = users see blank.
-
-## 3. 3D and heavy media on mobile
-
-- Default: replace live 3D with the poster or a pre-rendered loop (3d.md §7,
-  media.md). A generated video loop IS the mobile 3D strategy in most cases —
-  visually near-identical, thermally free.
-- If live 3D ships: dpr capped at 2, sim/particle counts halved, post-FX off,
-  `frameloop="demand"` where possible, pause on scroll-out and
-  `document.hidden`. Test the thermal story: 30s of idling must not heat the
-  phone (no full-rate rAF on static scenes).
-- Video: one playing loop per viewport, ≤ 2MB mobile variants
-  (`<source media>` or renditions), `playsinline` mandatory, poster always.
-- Images: serve mobile-sized renditions (`srcset/sizes`) — a 2400px hero on a
-  390px screen is a failed budget even when it looks fine.
-
-## 4. Ergonomics (the thumb is the cursor)
-
-- Tap targets ≥ 44px (48px preferred) with ≥ 8px gaps; small text links get
-  padded hit areas. Primary actions in the bottom half on app-register
-  screens; destructive actions OUT of easy thumb reach.
-- Respect the gesture map: horizontal edge swipes (back), bottom edge (home)
-  — don't hang custom gestures on them; carousels stop 16px short of edges.
-- Inputs: correct `type/inputmode/autocomplete` (ux.md §2), font-size ≥ 16px
-  (iOS zoom), the focused field scrolls above the keyboard, forms in one
-  column, no fixed elements covering inputs while the keyboard is up.
-- Safe areas: `viewport-fit=cover` + `env(safe-area-inset-*)` padding on
-  fixed bars/corners; nothing under the notch or home indicator.
-- No hover-dependent anything: whatever desktop hover revealed is visible by
-  default, in-view-triggered, or behind an explicit tap (DESIGN.md §13).
-
-## 5. Mobile verification (part of the runtime pass)
-
-At 390×844 (plus one small check at 320px):
-
-1. Walk every section: no horizontal body scroll, no clipped text/controls,
-   no element under fixed bars (DESIGN.md §15 at mobile widths).
-2. Run ux.md §7's audit at this width (menu, forms, taps, console).
-3. Scroll the full page fast: reveals keep up, nothing janks, sticky elements
-   behave through the URL-bar resize.
-4. Confirm the motion translation shipped (§2): press states everywhere, hero
-   ≤ 600ms, heavy effects swapped for their mobile strategy — name what runs
-   on mobile vs desktop in the final report.
-5. If media/3D shipped: posters load, loops play inline (not fullscreen),
-   pause off-screen.
+# Dreative Specialist Skill — Mobile Excellence
+
+Load this file when `plan.skills` includes `mobile`, when the brief says
+mobile-first / most users are on phones / "make the mobile version great", or
+when an app-register product is primarily used on mobile. It EXTENDS DESIGN.md
+§13 (which governs how desktop effects DEGRADE); this file is about designing
+mobile as a first-class surface in its own right — clean, tidy, and still
+genuinely animated and premium, just calibrated to a 390px viewport, a thumb,
+and a battery. It STACKS with whatever treatments were chosen: motion/3d/
+immersive briefs get their mobile-native expression here, never a cropped
+desktop.
+
+## 0. The register: calm confidence, not shrunken desktop
+
+Mobile premium reads differently from desktop premium: less simultaneous
+motion, more focus per viewport, perfect ergonomics. The dial translation:
+desktop ambition N ≈ mobile ambition N−2. A desktop dial-8 site ships a
+dial-6 phone experience that feels JUST as crafted — one hero moment, silky
+scroll reveals, tactile presses — rather than a stuttering copy of the desktop
+choreography.
+
+- **One idea per viewport.** The phone viewport is a frame; compose each
+  screenful like one (hero = one headline + one visual + one CTA, nothing
+  else). If a desktop section held three things, the mobile version stacks
+  them as three clean beats or cuts to the strongest one.
+- **Tidy is the aesthetic.** Consistent gutters (20-24px), one column
+  discipline, generous vertical rhythm (56-80px between sections), no element
+  closer than 8px to another. Clutter reads twice as loud at 390px.
+- **Type recalibrated, not just clamped**: hero 2-3rem (2 lines max with the
+  REAL copy), body stays ≥16px, line-length falls out of the gutters — check
+  headlines don't orphan single words (`text-wrap: balance`).
+
+## 1. Layout patterns that are mobile-native
+
+- Asymmetric desktop grids collapse to intentional single-column ORDER
+  (decide what comes first — usually visual → headline → support → CTA), not
+  DOM-order accidents. Check the collapsed order reads as a story.
+- Horizontal scroll is mobile's extra axis: card shelves, galleries, and
+  chip rows as swipeable strips (`overflow-x-auto` + `scroll-snap-type: x
+  mandatory` on short strips, edge inset, visible peek of the next card —
+  the peek IS the affordance; no scrollbars, no arrows).
+- Sticky bottom bar for the primary action on conversion/product pages
+  (add-to-cart, main CTA): thumb-reach beats footer CTA; respect
+  `env(safe-area-inset-bottom)`.
+- Accordions/tabs for secondary density (specs, FAQs) instead of long walls;
+  tables become stacked cards or a scrollable container with sticky first
+  column — never squeezed 6-column tables.
+- Nav: the fullscreen menu is mobile's one theatrical moment — staggered
+  link entrance (line-mask, 60ms stagger), big touch-sized links (≥ 48px
+  rows), contact/socials in the footer of the overlay. Wired per ux.md §1
+  (focus trap, scroll lock, Esc/back closes).
+
+## 2. Motion on mobile (still premium, never crazy)
+
+The motion inventory scaled to touch (extends motion.md §9):
+
+- **Keep**: one composed hero entrance (≤ 600ms total), line-mask headline
+  reveals, in-view section reveals (2-3, `once: true`), press states on
+  EVERYTHING tappable (`active:scale-[0.98]` — on mobile this is the main
+  interaction feedback, since hover doesn't exist), marquees (pause
+  off-screen), counters, accordion springs.
+- **Translate**: parallax halves or dies (§13); pinned sequences → short
+  sticky sections (≤ 1.5 viewports) or plain stacked beats; hover-woken media
+  → in-view-woken (loop plays while ≥ 60% visible, pauses off-screen) or
+  tap-to-play; magnetic/cursor effects → gone entirely, replaced by press
+  feedback; drag-to-explore → swipe carousel or index list as PRIMARY
+  (DESIGN.md §13).
+- **Ban on mobile**: smooth-scroll libraries at full strength (Lenis: disable
+  or `syncTouch` carefully — fighting native momentum feels broken), more than
+  one scrubbed sequence, simultaneous animation of > 4 elements, any effect
+  that drops the scroll below 60fps on a mid-range phone.
+- Scroll reveals trigger earlier (`margin: "-10% 0px"` not -20%) — mobile
+  viewports are short and users scroll fast; late reveals = users see blank.
+
+## 3. 3D and heavy media on mobile
+
+- Default: replace live 3D with the poster or a pre-rendered loop (3d.md §7,
+  media.md). A generated video loop IS the mobile 3D strategy in most cases —
+  visually near-identical, thermally free.
+- If live 3D ships: dpr capped at 2, sim/particle counts halved, post-FX off,
+  `frameloop="demand"` where possible, pause on scroll-out and
+  `document.hidden`. Test the thermal story: 30s of idling must not heat the
+  phone (no full-rate rAF on static scenes).
+- Video: one playing loop per viewport, ≤ 2MB mobile variants
+  (`<source media>` or renditions), `playsinline` mandatory, poster always.
+- Images: serve mobile-sized renditions (`srcset/sizes`) — a 2400px hero on a
+  390px screen is a failed budget even when it looks fine.
+
+## 4. Ergonomics (the thumb is the cursor)
+
+- Tap targets ≥ 44px (48px preferred) with ≥ 8px gaps; small text links get
+  padded hit areas. Primary actions in the bottom half on app-register
+  screens; destructive actions OUT of easy thumb reach.
+- Respect the gesture map: horizontal edge swipes (back), bottom edge (home)
+  — don't hang custom gestures on them; carousels stop 16px short of edges.
+- Inputs: correct `type/inputmode/autocomplete` (ux.md §2), font-size ≥ 16px
+  (iOS zoom), the focused field scrolls above the keyboard, forms in one
+  column, no fixed elements covering inputs while the keyboard is up.
+- Safe areas: `viewport-fit=cover` + `env(safe-area-inset-*)` padding on
+  fixed bars/corners; nothing under the notch or home indicator.
+- No hover-dependent anything: whatever desktop hover revealed is visible by
+  default, in-view-triggered, or behind an explicit tap (DESIGN.md §13).
+
+## 5. Mobile verification (part of the runtime pass)
+
+At 390×844 (plus one small check at 320px):
+
+1. Walk every section: no horizontal body scroll, no clipped text/controls,
+   no element under fixed bars (DESIGN.md §15 at mobile widths).
+2. Run ux.md §7's audit at this width (menu, forms, taps, console).
+3. Scroll the full page fast: reveals keep up, nothing janks, sticky elements
+   behave through the URL-bar resize.
+4. Confirm the motion translation shipped (§2): press states everywhere, hero
+   ≤ 600ms, heavy effects swapped for their mobile strategy — name what runs
+   on mobile vs desktop in the final report.
+5. If media/3D shipped: posters load, loops play inline (not fullscreen),
+   pause off-screen.

package/skill/dreative/skills/refined.md

@@ -1,102 +1,102 @@
-# Dreative Specialist Skill — Refined Clean Business
-
-Load this file when `plan.skills` includes `refined`, or the brief/prompt asks
-for a "clean modern business site", premium-but-calm marketing, DTC/e-commerce
-polish, "professional, not flashy", or names references like ch.maswitzerland.com
-or lovvelavva.com. This is the OPPOSITE pole from immersive/cinematic: quality
-expressed through restraint — spacing, photography, and type doing all the work,
-with motion barely above zero. Most real client work lands here; treat it as a
-craft discipline, not the absence of one.
-
-It EXTENDS DESIGN.md (everything applies; this file tightens the dials). It does
-NOT stack with `immersive`/`cinematic` — those are different registers. It pairs
-well with a light dose of `interaction` (press states, underline draws), the
-first tier of `motion` (one hero sequence, 2-3 in-view reveals), `ux` (this
-register's audience punishes broken function hardest), and media.md's quiet
-treatments only (ken-burns, curtain reveals, one hover-woken loop — imagery
-here is generated/sourced to ONE photographic grade, media.md §1).
-
-## 0. The register: expensive silence
-
-What separates premium-clean from generic-clean is not any element — it's the
-ratios:
-
-- **Whitespace is the brand.** Section padding 96-160px desktop / 56-80px
-  mobile; content max-width 1200-1320px with WIDE outer gutters; one idea per
-  viewport. If a section feels empty, that's the look working — resist filling.
-- **Photography carries the emotion.** Real product/lifestyle imagery, art-
-  directed to one consistent grade (one light temperature, one background
-  family). Full-bleed image sections alternate with contained text sections —
-  the rhythm image / text / image IS the page structure. Never decorate around
-  weak imagery; demand or generate better imagery instead.
-- **Type does hierarchy, color stays out of the way.** Near-monochrome palette:
-  warm or cool neutral family + ONE accent used almost exclusively on the
-  primary CTA and links. Backgrounds shift between 2-3 tints of the neutral
-  (e.g. white / #f6f5f2 / #111) to separate sections without borders.
-- **Motion whispers.** Motion dial effectively ≤ 4: fade-rise entrances
-  (300-400ms, once), a sticky nav that gains a hairline+blur, underline draws,
-  press states. No parallax beyond 4%, no pinning, no canvas. A single
-  restrained signature (a slow ken-burns on the hero image, or a marquee of
-  press logos) is the ceiling.
-
-## 1. Page anatomy (marketing/DTC form)
-
-The proven skeleton — vary the composition per DESIGN.md §5, not the order
-logic:
-
-1. **Hero**: one full-width image or split layout; headline ≤ 8 words stating
-   the value in plain language; one CTA. No feature bullets in the hero.
-2. **Credibility strip**: press/client logos, real marks, grayscale or
-   single-tint (lovvelavva runs Forbes/Women's Health/Real Simple here —
-   this section converts and belongs high on DTC pages).
-3. **Value sections** (2-4): alternating image/text, each making ONE claim
-   with 1-2 sentences of support. Icons only if custom-drawn; three-generic-
-   icon-cards is the tell this register must avoid most.
-4. **Product/collection grid**: large images, generous gaps (24-32px), minimal
-   card chrome — image, name, price/one-liner; hover = image swap or subtle
-   zoom-crop INSIDE a fixed frame (no card growth).
-5. **Social proof**: 1-3 real testimonials with names/photos, editorial layout
-   (big quote type), never a 3-card testimonial row.
-6. **Closing CTA**: calm full-width section, one sentence, one button.
-7. **Footer**: structured, generous, quiet — the footer's polish is a trust
-   signal in this register; give it real columns, legal, newsletter.
-
-E-commerce specifics: sticky add-to-cart on product pages (mobile bottom bar),
-price always visible, shipping/returns reassurance near the CTA, cart as a
-slide-over drawer not a page.
-
-## 2. The discovery-grid variant (cosmos.so-like)
-
-For content/discovery products (galleries, moodboards, catalogs): near-zero
-chrome around a masonry/justified image grid; dark or paper-white surface;
-images at native aspect ratios (never uniform crops); hover = slight lift +
-metadata fade-in on top of the image; infinite scroll with a sentinel loader;
-the search/filter bar is the only persistent UI. The product IS the grid —
-navigation, branding, and controls stay almost invisible until needed.
-
-## 3. What "modern" means here (2024+, not 2016 flat)
-
-- Hairline borders (1px, 8-12% alpha) instead of shadows for structure; the
-  2-3 stacked tinted shadows (interaction.md §3) reserved for genuinely
-  floating elements (dropdowns, drawers).
-- Larger type than feels safe: body 17-18px on marketing pages, display
-  clamped 2.5-4.5rem, tight leading. Small timid type is the #1 dated tell.
-- Radius system: one value family — either near-square (2-4px, editorial/
-  luxury) or soft (12-16px, DTC/consumer) — never mixed.
-- Buttons: solid accent primary + quiet text-link secondary. Pill shape only
-  in the consumer/DTC variant. No outlined-button armies.
-- Real `<img>`/`<picture>` with proper aspect-ratio boxes; no CSS-drawn
-  product mockups; `object-fit: cover` with art-directed focal points.
-
-## 4. Guardrails
-
-- If you're adding an effect to make a section interesting, the section's
-  content or imagery is the problem — fix that instead.
-- No gradient meshes, no glassmorphism cards, no floating blob backgrounds,
-  no emoji in UI copy: all instantly cheapen this register.
-- Accessibility floor is easy here — don't squander it: AA contrast on the
-  tinted neutrals (test the #767676-gray-on-white trap), visible focus,
-  semantic landmarks.
-- Performance IS the aesthetic: LCP image preloaded, fonts ≤ 2 files,
-  zero animation libraries unless motion is actually used — a clean site
-  that loads instantly reads as more premium than any effect.
+# Dreative Specialist Skill — Refined Clean Business
+
+Load this file when `plan.skills` includes `refined`, or the brief/prompt asks
+for a "clean modern business site", premium-but-calm marketing, DTC/e-commerce
+polish, "professional, not flashy", or names references like ch.maswitzerland.com
+or lovvelavva.com. This is the OPPOSITE pole from immersive/cinematic: quality
+expressed through restraint — spacing, photography, and type doing all the work,
+with motion barely above zero. Most real client work lands here; treat it as a
+craft discipline, not the absence of one.
+
+It EXTENDS DESIGN.md (everything applies; this file tightens the dials). It does
+NOT stack with `immersive`/`cinematic` — those are different registers. It pairs
+well with a light dose of `interaction` (press states, underline draws), the
+first tier of `motion` (one hero sequence, 2-3 in-view reveals), `ux` (this
+register's audience punishes broken function hardest), and media.md's quiet
+treatments only (ken-burns, curtain reveals, one hover-woken loop — imagery
+here is generated/sourced to ONE photographic grade, media.md §1).
+
+## 0. The register: expensive silence
+
+What separates premium-clean from generic-clean is not any element — it's the
+ratios:
+
+- **Whitespace is the brand.** Section padding 96-160px desktop / 56-80px
+  mobile; content max-width 1200-1320px with WIDE outer gutters; one idea per
+  viewport. If a section feels empty, that's the look working — resist filling.
+- **Photography carries the emotion.** Real product/lifestyle imagery, art-
+  directed to one consistent grade (one light temperature, one background
+  family). Full-bleed image sections alternate with contained text sections —
+  the rhythm image / text / image IS the page structure. Never decorate around
+  weak imagery; demand or generate better imagery instead.
+- **Type does hierarchy, color stays out of the way.** Near-monochrome palette:
+  warm or cool neutral family + ONE accent used almost exclusively on the
+  primary CTA and links. Backgrounds shift between 2-3 tints of the neutral
+  (e.g. white / #f6f5f2 / #111) to separate sections without borders.
+- **Motion whispers.** Motion dial effectively ≤ 4: fade-rise entrances
+  (300-400ms, once), a sticky nav that gains a hairline+blur, underline draws,
+  press states. No parallax beyond 4%, no pinning, no canvas. A single
+  restrained signature (a slow ken-burns on the hero image, or a marquee of
+  press logos) is the ceiling.
+
+## 1. Page anatomy (marketing/DTC form)
+
+The proven skeleton — vary the composition per DESIGN.md §5, not the order
+logic:
+
+1. **Hero**: one full-width image or split layout; headline ≤ 8 words stating
+   the value in plain language; one CTA. No feature bullets in the hero.
+2. **Credibility strip**: press/client logos, real marks, grayscale or
+   single-tint (lovvelavva runs Forbes/Women's Health/Real Simple here —
+   this section converts and belongs high on DTC pages).
+3. **Value sections** (2-4): alternating image/text, each making ONE claim
+   with 1-2 sentences of support. Icons only if custom-drawn; three-generic-
+   icon-cards is the tell this register must avoid most.
+4. **Product/collection grid**: large images, generous gaps (24-32px), minimal
+   card chrome — image, name, price/one-liner; hover = image swap or subtle
+   zoom-crop INSIDE a fixed frame (no card growth).
+5. **Social proof**: 1-3 real testimonials with names/photos, editorial layout
+   (big quote type), never a 3-card testimonial row.
+6. **Closing CTA**: calm full-width section, one sentence, one button.
+7. **Footer**: structured, generous, quiet — the footer's polish is a trust
+   signal in this register; give it real columns, legal, newsletter.
+
+E-commerce specifics: sticky add-to-cart on product pages (mobile bottom bar),
+price always visible, shipping/returns reassurance near the CTA, cart as a
+slide-over drawer not a page.
+
+## 2. The discovery-grid variant (cosmos.so-like)
+
+For content/discovery products (galleries, moodboards, catalogs): near-zero
+chrome around a masonry/justified image grid; dark or paper-white surface;
+images at native aspect ratios (never uniform crops); hover = slight lift +
+metadata fade-in on top of the image; infinite scroll with a sentinel loader;
+the search/filter bar is the only persistent UI. The product IS the grid —
+navigation, branding, and controls stay almost invisible until needed.
+
+## 3. What "modern" means here (2024+, not 2016 flat)
+
+- Hairline borders (1px, 8-12% alpha) instead of shadows for structure; the
+  2-3 stacked tinted shadows (interaction.md §3) reserved for genuinely
+  floating elements (dropdowns, drawers).
+- Larger type than feels safe: body 17-18px on marketing pages, display
+  clamped 2.5-4.5rem, tight leading. Small timid type is the #1 dated tell.
+- Radius system: one value family — either near-square (2-4px, editorial/
+  luxury) or soft (12-16px, DTC/consumer) — never mixed.
+- Buttons: solid accent primary + quiet text-link secondary. Pill shape only
+  in the consumer/DTC variant. No outlined-button armies.
+- Real `<img>`/`<picture>` with proper aspect-ratio boxes; no CSS-drawn
+  product mockups; `object-fit: cover` with art-directed focal points.
+
+## 4. Guardrails
+
+- If you're adding an effect to make a section interesting, the section's
+  content or imagery is the problem — fix that instead.
+- No gradient meshes, no glassmorphism cards, no floating blob backgrounds,
+  no emoji in UI copy: all instantly cheapen this register.
+- Accessibility floor is easy here — don't squander it: AA contrast on the
+  tinted neutrals (test the #767676-gray-on-white trap), visible focus,
+  semantic landmarks.
+- Performance IS the aesthetic: LCP image preloaded, fonts ≤ 2 files,
+  zero animation libraries unless motion is actually used — a clean site
+  that loads instantly reads as more premium than any effect.