@janga/norna 0.7.8 → 0.7.10

package/docs/theme.md

@@ -1,20 +1,19 @@
 # Theme
 
-`site/theme.md` defines optional site-wide visual defaults for a `norna` site.
-It uses YAML frontmatter and does not need a Markdown body. If the file is
-missing, built-in engine defaults are used.
+`site/theme.md` defines the site-wide visual theme for a `norna` site. It uses
+YAML frontmatter and does not need a Markdown body. The root theme file is
+required, but every setting inside it is optional and falls back to an engine
+default.
 
-Page-level presentation in `site/content.md` and route page files is always an
-override on top of `site/theme.md`. Section-level presentation is an override
-on top of the resolved page presentation. Use those overrides for focused
-exceptions; the normal place for shared visual choices is `site/theme.md`.
+An optional `theme.md` inside a route directory replaces the root visual theme
+for that route. Route themes do not merge with the root theme: omitted values
+use engine defaults. Shared identity such as brand and logo remains site-wide
+and belongs in `sitewide-content.md`.
 
 ## Minimal Theme
 
 ```yaml
 ---
-navigation:
-  brand: Example Site
 layout:
   density: normal
   pageWidth: 1180px
@@ -34,10 +33,10 @@ typography:
   preset: quiet-gallery
   rhythm: normal
 presentation:
-  backgroundColor: "#000000"
-  textColor: "#f7f4ee"
-frame:
-  colors: presentation
+  palette: dark  # Alternatives: light, paper
+  sectionSurfaces:
+    mode: cycle
+    sequence: [base, soft, emphasis]
 ---
 ```
 
@@ -46,23 +45,8 @@ Starter sites include a marked comment block such as
 explorable help text; YAML comments do not affect rendering. The active
 configuration is the uncommented YAML below it.
 
-## Navigation
-
-`navigation` is optional. It currently supports:
-
-- `brand`: optional site-wide brand or home-link text shown in the site
-  navigation.
-
-If `navigation.brand` is omitted, Norna uses the homepage `title` from
-`site/content.md`. Use `navigation.brand` when the homepage title is editorial
-or route-specific, but the navigation should keep a stable site name.
-
-Example:
-
-```yaml
-navigation:
-  brand: Norna
-```
+Site identity is not part of the visual theme. Define the optional navigation
+brand and logo settings in `site/sitewide-content.md`; see [Sitewide Content](sitewide-content.md).
 
 ## Layout
 
@@ -74,9 +58,9 @@ navigation:
   `desktop` / `mobile` values.
 - `density`: default structural spacing profile. Allowed values are `compact`,
   `normal`, and `airy`.
-- `spacing`: optional structural spacing overrides for sections and Norna
-  managed media blocks. Every spacing value accepts either one CSS length for all
-  viewports or `desktop` / `mobile` values.
+- `spacing`: optional spacing overrides for sections and content blocks. Every
+  spacing value accepts either one CSS length for all viewports or `desktop` /
+  `mobile` values.
 
 Example:
 
@@ -94,6 +78,12 @@ layout:
     sectionGap:
       desktop: clamp(1.4rem, 3vw, 2.75rem)
       mobile: 1.5rem
+    headingToBlock:
+      desktop: 0.75em
+      mobile: 0.7em
+    blockGap:
+      desktop: 1.5em
+      mobile: 1.25em
 ```
 
 If omitted, Norna uses `1180px` for `pageWidth`, desktop
@@ -105,11 +95,20 @@ Spacing keys:
 - `firstSectionTop`: space above the first section heading.
 - `sectionGap`: space above each following section.
 - `finalSectionBottom`: space below the final section.
-- `bodyToImages`: space from section body text to Norna managed media blocks.
+- `headingToBlock`: space between a section heading and its first visual content
+  block, such as an image stack, carousel, or card list.
+- `blockGap`: space between content blocks in a section. It applies between
+  Markdown, image, carousel, and card-list blocks, but not after the final block.
 - `imageGap`: space between stacked images or carousel blocks.
 
-Text-near spacing, such as spacing after headings, spacing before Markdown
-subheadings, paragraph spacing, and caption spacing, belongs to
+The default `compact`, `normal`, and `airy` density profiles provide values for
+these spacing keys. The `em` values for `headingToBlock` and `blockGap` are
+relative to the relevant text size, so the rhythm follows typography changes.
+Use `sectionGap` and the other structural keys when the distance should describe
+the page layout rather than the size of nearby text.
+
+Text-near spacing inside Markdown, such as spacing after headings, spacing
+before Markdown subheadings, paragraph spacing, and caption spacing, belongs to
 `typography.rhythm` and typography overrides.
 
 ## Image Sizing
@@ -153,18 +152,20 @@ Example:
 ```yaml
 typography:
   fontFamily: "Arial, 'Helvetica Neue', Helvetica, sans-serif"
-  preset: quiet-gallery
+  preset: text-forward
   rhythm: normal
   overrides:
     headings:
       h2:
         size: medium
+        weight: 600
         spacingAfter: 0.55em
       h3:
         size: medium
         spacingBefore: 1.5em
         spacingAfter: 0.5em
     body:
+      width: narrow
       lineHeight: 1.55
 ```
 
@@ -174,107 +175,39 @@ selected site. See [Typography](typography.md).
 
 ## Presentation
 
-`presentation` is optional. It can contain:
+`presentation` is optional. It selects a small built-in visual palette for the
+page frame and defines how section surfaces are assigned:
 
-- `backgroundColor`: optional quoted hex color in `#rgb`, `#rrggbb`, or
-  `#rrggbbaa` form.
-- `textColor`: optional quoted hex color in `#rgb`, `#rrggbb`, or
-  `#rrggbbaa` form.
-- `inlineStyles`: optional named inline text styles.
+- `palette`: `dark`, `light`, or `paper`. The palette controls the page,
+  navigation, footer, and section colors.
+- `sectionSurfaces.mode`: `none` or `cycle`.
+- `sectionSurfaces.sequence`: optional sequence of `base`, `soft`, and
+  `emphasis`. Each surface may occur at most once.
 
 Example:
 
 ```yaml
 presentation:
-  backgroundColor: "#101418"
-  textColor: "#f4f1ea"
-```
-
-## Page And Section Overrides
-
-Site-wide presentation belongs in `site/theme.md`. Page-level presentation in a
-page file is always an override on top of the theme:
-
-```yaml
-presentation:
-  typography:
-    overrides:
-      headings:
-        h2:
-          size: large
-          spacingAfter: 0.6em
-      body:
-        paragraphSpacing: 1em
-```
-
-Section-specific presentation belongs under
-`sections.<section-id>.presentation`. Use it when one section genuinely needs
-different presentation; do not use `sections` to define section order or normal
-Markdown structure.
-
-```yaml
-sections:
-  intro:
-    presentation:
-      backgroundColor: "#161616"
-      textColor: "#ffffff"
-      typography:
-        preset: statement
-```
-
-If a page omits `presentation`, it uses the theme presentation unchanged. If a
-section omits `presentation`, it uses the resolved page presentation.
-
-Configured section backgrounds render as full-width horizontal bands while the
-section content keeps the normal page and image widths. The top spacing
-before the first heading, the spacing between sections, and the spacing after
-the final section are part of the section background.
-
-Configured section text colors apply to section headings, Markdown text,
-Markdown subheadings, and image captions. Links keep the global accent color.
-
-## Frame Colors
-
-`frame.colors` controls the sticky navigation and footer colors.
-
-Allowed values:
-
-- `presentation`: use the resolved presentation colors for this level.
-- `theme`: use the site theme frame colors. This is useful in page-level
-  frontmatter.
-- explicit colors:
-
-```yaml
-frame:
-  colors:
-    backgroundColor: "#111111"
-    textColor: "#eeeeee"
+  palette: paper  # Alternatives: dark, light
+  sectionSurfaces:
+    mode: cycle
+    sequence: [base, soft, emphasis]
 ```
 
-The sticky section navigation row and footer use the resolved frame colors, not
-section-specific presentation.
+## Route Themes
 
-## Inline Styles
+Add `theme.md` to a route directory when that route should have a different
+visual expression:
 
-`presentation.inlineStyles` defines named inline text styles that can be used
-from Markdown:
-
-```yaml
-presentation:
-  inlineStyles:
-    highlight:
-      color: "#ffd84d"
+```text
+site/routes/010-guide/theme.md
 ```
 
-Inline style names must match `^[a-z][a-z0-9-]*$`. Each style currently
-supports a required `color` field using the same quoted hex color format as
-`textColor`.
-
-Apply an inline style in Markdown with `[text]{.style-name}`:
-
-```md
-This sentence contains [highlighted text]{.highlight}.
-```
+The route theme uses the same visual schema as the root theme. It completely
+replaces the root visual theme for that route, so include every non-default
+visual choice the route needs. It cannot define navigation, brand, logo, or
+technical configuration.
 
-`content:check` fails if Markdown uses an inline style that is not defined in
-`site/theme.md` `presentation.inlineStyles`.
+Section surfaces render as full-width horizontal bands while the section
+content keeps the normal page and image widths. Links keep the palette's global
+accent color.

package/docs/typography.md

@@ -23,11 +23,21 @@ Available presets:
 
 If theme typography is omitted, `quiet-gallery` is used.
 
-Presets define alignment, size, and line height for `headings.h1` through
-`headings.h4`, `body`, and `caption`. Built-in presets use `medium` as the
-default size for every text role. Visual heading hierarchy comes from the
-Markdown heading level, so `h1` is larger than `h2`, `h2` is larger than `h3`,
-and so on.
+Presets define alignment, size, weight, and line height for `headings.h1`
+through `headings.h4`, `body`, and `caption`. They also choose a readable body
+text width. Built-in presets use `medium` as the default size for every text
+role. Visual heading hierarchy comes from the Markdown heading level, so `h1`
+is larger than `h2`, `h2` is larger than `h3`, and so on.
+
+The presets use these controls deliberately:
+
+- `quiet-gallery` uses restrained heading weights and a normal reading width.
+- `compact-gallery` uses stronger headings and a wider text column for short,
+  scannable content.
+- `text-forward` uses a narrower reading width and more generous body line
+  height.
+- `statement` uses the strongest heading weights and a narrow text column for
+  short, declarative content.
 
 `rhythm` defines text-near spacing for headings, paragraphs, and captions.
 Available rhythms are `compact`, `normal`, and `airy`. Built-in rhythm values
@@ -62,12 +72,14 @@ typography:
     headings:
       h2:
         size: medium
+        weight: 600
         spacingAfter: 0.55em
       h3:
         size: medium
         spacingBefore: 1.5em
         spacingAfter: 0.5em
     body:
+      width: narrow
       paragraphSpacing: 0.8em
     caption:
       spacingBefore: 0.5em
@@ -104,21 +116,31 @@ follows the Markdown level the user wrote: `##` uses `headings.h2`.
 `spacingAfter`, and `paragraphSpacing` are CSS lengths such as `0`, `0.8em`,
 `1rem`, or `12px`. Use `em` for spacing that should track the text size.
 
+`weight` is a controlled heading weight. Allowed values are `400`, `500`,
+`600`, and `700`. `body.width` is the readable text width and accepts
+`narrow`, `normal`, or `wide`. It controls the prose column, not the page's
+maximum width or the width of image blocks.
+
 Supported override fields:
 
-- `headings.h1.align`, `headings.h1.size`, `headings.h1.lineHeight`,
+- `headings.h1.align`, `headings.h1.size`, `headings.h1.weight`,
+  `headings.h1.lineHeight`,
   `headings.h1.spacingBefore`, `headings.h1.spacingAfter`
-- `headings.h2.align`, `headings.h2.size`, `headings.h2.lineHeight`,
+- `headings.h2.align`, `headings.h2.size`, `headings.h2.weight`,
+  `headings.h2.lineHeight`,
   `headings.h2.spacingBefore`, `headings.h2.spacingAfter`
-- `headings.h3.align`, `headings.h3.size`, `headings.h3.lineHeight`,
+- `headings.h3.align`, `headings.h3.size`, `headings.h3.weight`,
+  `headings.h3.lineHeight`,
   `headings.h3.spacingBefore`, `headings.h3.spacingAfter`
-- `headings.h4.align`, `headings.h4.size`, `headings.h4.lineHeight`,
+- `headings.h4.align`, `headings.h4.size`, `headings.h4.weight`,
+  `headings.h4.lineHeight`,
   `headings.h4.spacingBefore`, `headings.h4.spacingAfter`
-- `body.align`, `body.size`, `body.lineHeight`, `body.paragraphSpacing`
+- `body.align`, `body.size`, `body.width`, `body.lineHeight`,
+  `body.paragraphSpacing`
 - `caption.align`, `caption.size`, `caption.lineHeight`,
   `caption.spacingBefore`
 
-## Inheritance
+## Route Themes
 
 Theme typography is the site-wide base:
 
@@ -130,30 +152,20 @@ typography:
   rhythm: normal
 ```
 
-A page-level `presentation.typography.preset` changes the typographic character
-for that page. A section-level
-`sections.<section-id>.presentation.typography.preset` changes the typographic
-character for that section. `rhythm` is inherited separately, so changing
-preset does not change spacing unless `rhythm` is also set.
-
-If a section sets `typography.rhythm`, that section changes text-near spacing.
-If a section only sets `typography.overrides`, it keeps the resolved page
-preset and rhythm and changes only the specified values.
+A route-local `theme.md` can give that route a different typographic character.
+The route theme replaces the root visual theme rather than inheriting from it,
+so repeat any non-default `fontFamily`, `rhythm`, or `overrides` that the route
+still needs.
 
-Example section override:
+Example route theme:
 
 ```yaml
-sections:
-  intro:
-    presentation:
-      typography:
-        preset: statement
-        overrides:
-          body:
-            paragraphSpacing: 0.7em
+# site/routes/010-introduction/theme.md
+typography:
+  preset: statement
+  rhythm: normal
 ```
 
-Centered text uses narrower text widths. Left- or right-aligned heading and body
-text use the calculated image layout width so text edges line up with images
-after layout gutters and image limits are applied. Captions are normally
-centered.
+The `body.width` value controls the prose column independently of the page and
+image widths. Captions are normally centered, but `text-forward` uses
+left-aligned captions to support longer explanatory text.

package/examples/001-dog-shelter-single-page/README.md

@@ -0,0 +1,9 @@
+# Dog Shelter single-page example
+
+A small Norna site with two homepage sections and no routes.
+
+Run it from the Norna repository root:
+
+```sh
+node bin/norna.mjs --site-dir examples/001-dog-shelter-single-page/site dev:local
+```

package/examples/001-dog-shelter-single-page/site/config.mjs

@@ -0,0 +1,27 @@
+export default {
+	site: {
+		url: 'http://localhost:4321/',
+		basePath: '/',
+	},
+	navigation: {
+		smoothScroll: {
+			enabled: true,
+			minimumDurationMs: 600,
+			maximumDurationMs: 1_200,
+			durationPerPixelMs: 0.2,
+		},
+	},
+	locale: {
+		lang: 'en',
+		labels: {
+			skipToContent: 'Skip to content',
+			sectionNavigation: 'Sections',
+			gallery: 'Images',
+		},
+	},
+	github: {
+		repo: 'owner/dog-shelter',
+		branch: 'main',
+		pagesWorkflow: 'Deploy to GitHub Pages',
+	},
+};

package/examples/001-dog-shelter-single-page/site/content.md

@@ -0,0 +1,38 @@
+---
+title: Home
+description: A single-page dog shelter website built with Norna.
+---
+
+## What we do {#what-we-do}
+
+We rescue and rehome dogs.
+
+<!-- norna-image-provenance:
+image: dog-house.svg
+source: AI-assisted, hand-authored SVG
+prompt: Draw a simple flat vector dog house with a friendly dog at the entrance,
+using a small paper, red and dark-brown palette. No text and no external assets.
+-->
+
+```norna-image-stack
+- image: dog-house.svg
+  alt: A brown dog standing at the entrance to a red dog house.
+  caption: Time to recover before adoption.
+```
+
+## You can help {#you-can-help}
+
+Adopt. Foster. Donate.
+
+<!-- norna-image-provenance:
+image: heart.svg
+source: AI-assisted, hand-authored SVG
+prompt: Draw two simple hands holding a red heart as a flat vector illustration,
+using a small paper, red and dark-brown palette. No text or external assets.
+-->
+
+```norna-image-stack
+- image: heart.svg
+  alt: Two open hands holding a red heart.
+  caption: Foster care helps another dog.
+```

package/examples/001-dog-shelter-single-page/site/images/what-we-do/dog-house.svg

@@ -0,0 +1,25 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 800 520" role="img" aria-labelledby="title desc">
+  <title id="title">Dog at a shelter house</title>
+  <desc id="desc">A friendly brown dog stands at the entrance to a red wooden dog house.</desc>
+  <rect width="800" height="520" rx="32" fill="#eef3ef"/>
+  <path d="M0 405 Q180 365 380 405 T800 390 V520 H0Z" fill="#cad8bd"/>
+  <g stroke="#493c2b" stroke-width="8" stroke-linejoin="round">
+    <path d="M190 247 L400 82 L610 247" fill="#9f493a"/>
+    <path d="M236 222 H564 V432 H236Z" fill="#c8674f"/>
+    <path d="M327 432 V300 Q327 234 400 234 Q473 234 473 300 V432Z" fill="#332d29"/>
+    <path d="M213 244 L400 94 L587 244" fill="none" stroke="#7f3f32" stroke-width="24" stroke-linecap="round"/>
+  </g>
+  <g transform="translate(310 250)" stroke="#493c2b" stroke-width="6" stroke-linejoin="round">
+    <path d="M40 119 C47 80 93 64 142 76 C181 86 196 119 184 158 H58 C42 151 34 135 40 119Z" fill="#b8794d"/>
+    <path d="M62 94 C45 61 58 23 96 13 C133 3 169 27 168 64 C167 93 145 108 112 109 H76Z" fill="#b8794d"/>
+    <path d="M76 32 L53 3 L98 17" fill="#8c573a"/>
+    <path d="M143 25 L171 3 L164 46" fill="#8c573a"/>
+    <circle cx="92" cy="53" r="6" fill="#272522" stroke="none"/>
+    <circle cx="140" cy="53" r="6" fill="#272522" stroke="none"/>
+    <ellipse cx="116" cy="76" rx="25" ry="19" fill="#dca477"/>
+    <circle cx="116" cy="70" r="7" fill="#272522" stroke="none"/>
+    <path d="M105 84 Q116 96 129 84" fill="none" stroke-linecap="round"/>
+    <path d="M59 154 V188 M94 154 V188 M145 154 V188" fill="none" stroke-linecap="round"/>
+    <path d="M177 105 Q220 80 211 39" fill="none" stroke-linecap="round"/>
+  </g>
+</svg>

package/examples/001-dog-shelter-single-page/site/images/you-can-help/heart.svg

@@ -0,0 +1,13 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 800 520" role="img" aria-labelledby="title desc">
+  <title id="title">Hands holding a heart</title>
+  <desc id="desc">Two open hands support a large red heart.</desc>
+  <rect width="800" height="520" rx="32" fill="#f3eee5"/>
+  <circle cx="400" cy="250" r="176" fill="#e5dccd"/>
+  <path d="M400 354 C368 316 263 252 263 166 C263 108 309 79 354 92 C379 99 394 116 400 135 C406 116 421 99 446 92 C491 79 537 108 537 166 C537 252 432 316 400 354Z" fill="#b84f45" stroke="#493c2b" stroke-width="8" stroke-linejoin="round"/>
+  <g fill="#d5a071" stroke="#493c2b" stroke-width="7" stroke-linecap="round" stroke-linejoin="round">
+    <path d="M74 368 C144 330 211 328 291 365 L363 407 C382 420 373 451 350 450 L268 426 C228 414 191 421 154 451 L92 502 L30 429Z"/>
+    <path d="M726 368 C656 330 589 328 509 365 L437 407 C418 420 427 451 450 450 L532 426 C572 414 609 421 646 451 L708 502 L770 429Z"/>
+    <path d="M290 365 L350 349 C369 344 383 360 376 378 L363 407"/>
+    <path d="M510 365 L450 349 C431 344 417 360 424 378 L437 407"/>
+  </g>
+</svg>

package/examples/001-dog-shelter-single-page/site/public/favicon.svg

@@ -0,0 +1,10 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 64 64" role="img" aria-label="Dog Shelter paw mark">
+  <rect width="64" height="64" rx="12" fill="#f8f5ee"/>
+  <g fill="#7f3f32">
+    <ellipse cx="32" cy="39" rx="16" ry="13"/>
+    <circle cx="16" cy="25" r="7"/>
+    <circle cx="29" cy="18" r="7"/>
+    <circle cx="43" cy="20" r="7"/>
+    <circle cx="50" cy="32" r="7"/>
+  </g>
+</svg>

package/examples/001-dog-shelter-single-page/site/public/robots.txt

@@ -0,0 +1,2 @@
+User-agent: *
+Allow: /

package/examples/001-dog-shelter-single-page/site/sitewide-content.md

@@ -0,0 +1,6 @@
+---
+navigation:
+  brand: Dog Shelter
+footer:
+  copyrightMessage: Dog Shelter example site.
+---

package/examples/001-dog-shelter-single-page/site/theme.md

@@ -0,0 +1,25 @@
+---
+layout:
+  density: normal
+  pageWidth: 1180px
+  gutter:
+    desktop: clamp(1.25rem, 4vw, 3rem)
+    mobile: 1rem
+gallery:
+  width: 760px
+  maxAvailableWidthPercent:
+    desktop: 100
+    mobile: 100
+  maxAvailableHeightPercent:
+    desktop: 72
+    mobile: 68
+typography:
+  fontFamily: "Arial, 'Helvetica Neue', Helvetica, sans-serif"
+  preset: text-forward
+  rhythm: normal
+presentation:
+  palette: paper
+  sectionSurfaces:
+    mode: cycle
+    sequence: [base, soft]
+---

package/examples/002-dog-shelter-multi-page/README.md

@@ -0,0 +1,9 @@
+# Dog Shelter multi-page example
+
+A small Norna site with a homepage and ordered routes for dogs and adoption.
+
+Run it from the Norna repository root:
+
+```sh
+node bin/norna.mjs --site-dir examples/002-dog-shelter-multi-page/site dev:local
+```

package/examples/002-dog-shelter-multi-page/site/config.mjs

@@ -0,0 +1,27 @@
+export default {
+	site: {
+		url: 'http://localhost:4321/',
+		basePath: '/',
+	},
+	navigation: {
+		smoothScroll: {
+			enabled: true,
+			minimumDurationMs: 600,
+			maximumDurationMs: 1_200,
+			durationPerPixelMs: 0.2,
+		},
+	},
+	locale: {
+		lang: 'en',
+		labels: {
+			skipToContent: 'Skip to content',
+			sectionNavigation: 'Sections',
+			gallery: 'Images',
+		},
+	},
+	github: {
+		repo: 'owner/dog-shelter',
+		branch: 'main',
+		pagesWorkflow: 'Deploy to GitHub Pages',
+	},
+};

package/examples/002-dog-shelter-multi-page/site/content.md

@@ -0,0 +1,12 @@
+---
+title: Home
+description: A multi-page dog shelter website built with Norna.
+---
+
+## Dog Shelter {#intro}
+
+We rescue dogs, help them recover and introduce them to families ready to give
+them a permanent home.
+
+Visit **Dogs** to meet two current residents, or **Adopt** to learn how the
+adoption process works.

package/examples/002-dog-shelter-multi-page/site/public/favicon.svg

@@ -0,0 +1,10 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 64 64" role="img" aria-label="Dog Shelter paw mark">
+  <rect width="64" height="64" rx="12" fill="#f8f5ee"/>
+  <g fill="#7f3f32">
+    <ellipse cx="32" cy="39" rx="16" ry="13"/>
+    <circle cx="16" cy="25" r="7"/>
+    <circle cx="29" cy="18" r="7"/>
+    <circle cx="43" cy="20" r="7"/>
+    <circle cx="50" cy="32" r="7"/>
+  </g>
+</svg>

package/examples/002-dog-shelter-multi-page/site/public/robots.txt

@@ -0,0 +1,2 @@
+User-agent: *
+Allow: /

package/examples/002-dog-shelter-multi-page/site/routes/010-dogs/images/dogs/rex.svg

@@ -0,0 +1,19 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 800 560" role="img" aria-labelledby="title desc">
+  <title id="title">Rex</title>
+  <desc id="desc">A gentle golden dog with one floppy ear and a curved tail.</desc>
+  <rect width="800" height="560" rx="32" fill="#f3eee3"/>
+  <ellipse cx="404" cy="462" rx="270" ry="36" fill="#ddd1b8"/>
+  <g stroke="#493c2b" stroke-width="9" stroke-linejoin="round">
+    <path d="M218 316 C265 240 386 219 527 258 C594 277 623 343 589 404 H278 C221 391 196 354 218 316Z" fill="#e3c681"/>
+    <path d="M274 275 C237 202 279 112 370 91 C458 71 538 132 528 218 C520 285 464 318 389 317 H307Z" fill="#e3c681"/>
+    <path d="M309 134 L264 52 L365 91" fill="#c49b51"/>
+    <path d="M465 111 Q560 96 551 181 Q529 214 488 197Z" fill="#c49b51"/>
+    <circle cx="346" cy="187" r="11" fill="#272522" stroke="none"/>
+    <circle cx="451" cy="187" r="11" fill="#272522" stroke="none"/>
+    <ellipse cx="399" cy="239" rx="61" ry="45" fill="#f1dca9"/>
+    <circle cx="399" cy="225" r="14" fill="#272522" stroke="none"/>
+    <path d="M377 254 Q399 280 427 254" fill="none" stroke-linecap="round"/>
+    <path d="M281 400 V479 M374 400 V479 M511 400 V479" fill="none" stroke-linecap="round"/>
+    <path d="M568 294 Q676 330 642 420" fill="none" stroke-linecap="round"/>
+  </g>
+</svg>