# Hero #23 — Frosted Cat — Replication Prompt

Build a minimalist, conceptual newsletter hero as a single self-contained HTML file (inline CSS, vanilla, no frameworks, no JS dependencies). The mood is "contemporary arts-festival poster": an off-white frosted surface filling the page, a solid black cat emerging through it, and a single vibrant yellow accent reserved for the wordmark.

## BACKGROUND

- Page background is a full-bleed photograph, `object-fit: cover`, centered. The photo: a solid black cat pushing through a translucent frosted off-white surface — the cat's head seen from directly above (two pointed ears, whiskers, closed eyes) and two front paws with claws protruding through the frosted sheet, with a soft blurred grey shadow of the cat's body visible behind the translucent layer. Deep solid black for the protruding parts, soft mid-grey internal shadow, diffused front lighting with backlighting casting the shadow against the frosted screen. Off-white / light-grey background, high contrast, extensive negative space. The cat sits on the left third; the right two-thirds is clean empty negative space for typography. No text in the photo.
- Image generation prompt for the photo: "A solid black cat pushing through a translucent frosted off-white surface: the cat head seen from directly above (two pointed ears, whiskers, closed eyes) and two front paws with claws protruding through the frosted surface, with a soft blurred grey shadow of the cat body visible behind the translucent sheet. Deep solid black for the protruding parts, soft mid-grey internal shadow, diffused front lighting with backlighting casting the shadow against the frosted screen. Off-white / light grey background, high contrast, extensive negative space. Modern, conceptual, minimalist arts-festival branding aesthetic. Landscape composition: the cat emerging through the frosted surface on the left third, clean empty negative space on the right for typography. No text, no words, no letters."
- Overlay a soft white scrim over the right side so text stays crisp: a linear gradient (90deg) from transparent at 0% and 42%, to rgba(244,243,239,0.55) at 68%, to rgba(244,243,239,0.82) at 100%. On mobile (below 860px) switch to a vertical gradient (180deg): transparent to 30%, rgba(244,243,239,0.55) at 58%, rgba(244,243,239,0.86) at 100%.

## TYPOGRAPHY

- Single font: Inter (400/500/600/700/800) via Google Fonts.
- Ink: #0a0a0a (near black). Soft ink: #3a3a3a. Faint ink: #6b6b6b. Accent yellow: #ffd400. Paper: #f4f3ef.
- Wordmark: lowercase "dispatch", Inter 800, clamp(72px, 11vw, 150px), letter-spacing -0.045em, line-height 0.9, color #ffd400, with a faint 0 1px 0 rgba(0,0,0,0.06) text-shadow.
- Kicker: 11.5px, weight 600, uppercase, letter-spacing 0.32em, color #6b6b6b.
- Headline: clamp(24px, 2.6vw, 32px), weight 700, letter-spacing -0.025em, line-height 1.12, color #0a0a0a, max-width 22ch.
- Subhead: 15px, weight 400, line-height 1.65, color #3a3a3a, max-width 46ch.

## LAYOUT

- Nav: wordmark left ("Dispatch" + a small 2×2 grid logo — four 7px rounded squares: top-left #0a0a0a, top-right #ffd400, bottom-left #ffd400 at 0.55 opacity, bottom-right #0a0a0a at 0.35 opacity). Right side: four text links (Archive / About / Manifesto / Contact), 13px, weight 500, color #3a3a3a, gap 34px. Hide the last two links below 480px.
- Hero: a flex column filling the viewport (nav auto, hero flex:1, stats auto). The content block is right-aligned, width min(560px, 100%), vertically centered.
- Content order (top to bottom): kicker, yellow wordmark, headline, subhead, signup form, microcopy.
- Signup form: flex row, gap 10px, max-width 460px. Input: flex:1, 15px, padding 15px 20px, 1.5px rgba(10,10,10,0.18) border, 999px radius, rgba(255,255,255,0.55) background, placeholder "you@example.com" in #6b6b6b. On focus, border darkens to #0a0a0a and background brightens. Button: 15px weight 700, padding 15px 30px, solid #0a0a0a background, white text, 999px radius, hover translateY(-1px).
- Microcopy: 12.5px, color #6b6b6b.
- Stats strip: top-bordered row (1px rgba(10,10,10,0.14)), 4 columns, each separated by a 1px left border. Value: clamp(22px, 2.2vw, 30px), weight 800, letter-spacing -0.02em, color #0a0a0a. Label: 12.5px, weight 500, uppercase, letter-spacing 0.04em, color #6b6b6b. Stats: "24,000+ / Subscribers", "Weekly / Every Friday", "5 min / Average read", "100% / Free, no ads".

## CONTENT (use exactly)

- Wordmark: "Dispatch"
- Kicker: "The Weekly Dispatch · Issue N°142"
- Headline: "The ideas worth your inbox."
- 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."
- Input placeholder: "you@example.com"
- Button: "Subscribe"
- Microcopy: "Free forever. Unsubscribe anytime."
- Stat 1: "24,000+" / "Subscribers"
- Stat 2: "Weekly" / "Every Friday"
- Stat 3: "5 min" / "Average read"
- Stat 4: "100%" / "Free, no ads"

## RESPONSIVE

- Below 860px: nav padding tightens to 22px 24px; hero content left-aligns and sits lower (padding 26vh 24px 40px, align-items flex-end) so it clears the cat's head; stats go 2 columns with 20px row gap, third item loses its left border.
- Below 480px: signup stacks vertically (full-width button); wordmark clamps to clamp(64px, 21vw, 96px); stats stack to 1 column with top borders instead of left borders.
- No horizontal scroll at any width. The yellow wordmark must never clip the viewport.

## DETAILS

- The yellow accent appears exactly once as a large element (the wordmark) plus the two logo squares — matching the poster's restraint. Do not add yellow anywhere else.
- Buttons lift on hover (translateY(-1px)).
- Keep the whole composition airy — generous negative space is the point.