# Hero 23 — Waterline Editorial: Replication Prompt

Optimized for AI code builders (Claude, Cursor, v0). Paste the block below, then attach or link the artwork asset.

```
Build a fine-art editorial newsletter hero as a single self-contained HTML file (inline CSS, no frameworks, no JS dependencies). The mood is "gallery watercolor": a vast pale sage-green sky, and below a sharp horizon line, a woman half-submerged in deep green water, her copper-orange hair spreading along the waterline in expressive ink strokes.

ARTWORK (generate first, then reference as a fixed full-bleed background)
- Image prompt: "Watercolor and ink fine-art illustration of a woman half-submerged in calm water, face emerging from the waterline, coppery orange-ginger hair spreading horizontally along the water surface in expressive fluid brushstrokes, a single tiny bird in the upper sky. Palette: pale sage-eucalyptus green sky above the waterline, deeper muted teal-green water below. Freckled skin, rounder face, fuller lips, eyes just hidden at the waterline under the floating hair mass. Visible watercolor paper texture, pigment blooms, granulation, small drips. Huge expanse of empty pale green sky in the upper two-thirds, kept clean for typography. Muted, atmospheric, editorial fine-art illustration."
- Serve as a fixed, full-viewport <img> with object-fit: cover, centered. Add a "veil" overlay div: a linear gradient from rgba(233,240,229,0.62) at the top to transparent by 62% height, so text over the sky stays readable without ever touching the artwork below. On mobile, raise the veil opacity (0.78 → 0.55 → transparent by 68%).

PALETTE
- Ink: #17321f (deep green, lifted from the waterline). Dim ink: rgba(23,50,31,0.72). Faint: rgba(23,50,31,0.52).
- Paper: #e9f0e5 (pale sage). Accent: #c4672a (copper, matching the hair).

TYPOGRAPHY
- Fonts via Google Fonts: "Cormorant Garamond" (500, italic 500) for display, "Inter" (400/500/600) for UI, "Caveat" (600) for hand-lettered notes.
- Kicker: 11px, weight 600, uppercase, letter-spacing 0.34em, faint ink, centered.
- Headline: two lines, centered, Cormorant Garamond 500, clamp(46px, 6.8vw, 88px), line-height 1.02, letter-spacing -0.015em, max-width 14ch. Line 1 solid ink. Line 2 is italic and carries the signature "waterline type" effect: two stacked copies of the phrase — the base copy is transparent with -webkit-text-stroke: 1.2px ink, clipped with clip-path: inset(0 0 54% 0) so only its top shows; an absolutely positioned identical copy in solid ink is clipped with inset(46% 0 0 0) so only its bottom shows. Result: outlined letters appear to dip below a waterline and emerge solid. Do NOT use a pseudo-element with different text content — use two identical spans for pixel-perfect alignment.
- Subhead: 16px, line-height 1.7, dim ink, max-width 540px, centered.

CONTENT (use exactly)
- Nav: wordmark "dispatch" (lowercase, Cormorant Garamond 21px) with a small 2×2 grid SVG logo (rounded squares, two solid #17321f, two at 55% opacity). Right: uppercase links (Latest Issue / Archive / About / Manifesto) at 12.5px, letter-spacing 0.16em, dim ink, hover turns copper; plus "Get started" with a 1.5px copper underline. Hide links below 760px.
- Kicker: "The Weekly Dispatch · Issue N°142"
- Headline: "The ideas worth" / "your inbox." (second line italic with the waterline effect)
- Subhead: "One email every Friday. Big ideas, clear thinking, and zero noise — for 24,000 readers who like their insights sharp and their inboxes calm."
- Signup: centered pill form, max-width 480px, frosted paper glass (rgba(255,255,255,0.72), 1px rgba(23,50,31,0.18) border, 14px backdrop blur, soft green drop shadow). Transparent input, placeholder "you@example.com" in faint ink. Button: solid ink background, #f4f8f1 text, 13.5px semibold, fully rounded; hover lifts 1px and turns copper. Below: microcopy "Free forever. Unsubscribe anytime." in Caveat 21px, rotated -1.2deg, on a small frosted-paper pill (rgba(233,240,229,0.55), 8px blur) so it reads over the artwork.
- Stats: a centered row of 4 "margin notes", each slightly rotated (-1.6deg, 1.2deg, -0.9deg, 1.5deg) and straightening with a 3px lift on hover. Value: Cormorant Garamond italic, clamp(26px, 2.6vw, 34px), ink. Label: Caveat 20px, copper. Stats: "24,000+ / Subscribers", "Weekly / Every Friday", "5 min / Average read", "100% / Free, no ads". The stats section sits on a gradient that fades from transparent to solid paper (#e9f0e5), so the artwork dissolves into the page.
- Footer: tiny centered line, 12px, faint ink, on a paper gradient: "© Dispatch — The ideas worth your inbox. · Painted, not photographed."

RESPONSIVE
- Below 640px: form stacks vertically (24px radius, full-width button, centered input), stats wrap 2 per row, hero min-height ~78vh.
- No horizontal scroll at any width; text must never lose contrast against the artwork — the veil and the microcopy pill handle this.

DETAILS
- All glass surfaces use backdrop-filter with the -webkit- prefix.
- The waterline headline effect is the signature move — keep the two-span structure and the 54%/46% clip split.
- Everything hand-lettered (microcopy, stat labels) uses Caveat; everything editorial uses Cormorant Garamond; everything functional uses Inter. Do not mix roles.
```