# Newsletter fold inline > **Build brief for a coding agent.** Rebuild this piece in the reader's stack. If they haven't said which stack, ask once, then default to semantic HTML + CSS + a little vanilla JS. Match the numbers below; don't "improve" them. ## What it is A newsletter capture sitting **inside** an essay, not in a footer and not as a hero. The host is **The Loam Letter**, a monthly soil journal. The first frame is a 720px column on olive paper: masthead, a 34px Caslon headline, one drop-capped paragraph, then a fold band (`#F3EEE3`, 2px moss rule on top) with “No. 41”, the italic title, a one-sentence promise, and a hairline email + Subscribe row. On a valid submit the input and button hide and the italic line “You’re on the list” takes their place. A second paragraph continues under the fold so it reads as a mid-article interrupt. ## Reference behaviour 1. Initial state: masthead “THE LOAM LETTER / No. 41 · April 2026 / FIELD NOTES” with a 1px ink rule under it. Headline “What the frost left in the north bed”. Byline “By *Ida Marum* · 12 April 2026 · 9 min read”. Opening paragraph with a 62px moss drop cap. Fold already visible in the first 800px. Form empty, placeholder `you@garden.mail`, button “Subscribe”. Second paragraph visible below the fold. 2. Focus the input: default focus ring (2px moss, 3px offset). The hairline stays `--ink`. 3. Submit empty or invalid: `preventDefault`, form gets `.bad` (hairline `--rust` `#9A4A2C`), `#msg` reads “A full address, please — the letter does not go to a first name.” Focus returns to the input. Button still says “Subscribe”. 4. Submit a value matching `^[^\s@]+@[^\s@]+\.[^\s@]+$`: form gets `.done` (hairline moss), input and button `display:none`, `.done-label` displays as a flex row: italic 18px Caslon “You’re on the list”. Input is `disabled`. Live region: “You’re on the list. No. 42 leaves on 12 May.” 5. Hover Subscribe (enabled): colour `--ink` from `--moss`. 6. No other animation. The fold does not slide in. 7. Reduced motion: form border-color transition is 1ms. Morph is a class swap (no height animation), so it is already instant. ## Structure ``` 1280 × 800 ┌──────────────── 720px column ────────────────┐ │ THE LOAM LETTER No. 41 · April 2026 … │ mast + ink rule │ │ │ What the frost left in the north bed │ 34 / 700 │ By Ida Marum · 12 April 2026 · 9 min read │ │ │ │ [W]he cloches came off on a Tuesday that │ drop 62 moss │ still felt like March. Under the glass… │ │ │ │ ┌──────────┬───────────────────────────────┐ │ fold │ │ ISSUE │ The Loam Letter │ │ 2px moss top │ │ No. 41 │ Field notes on soil, once a │ │ │ │ │ month, from one garden. … │ │ │ │ │ you@garden.mail SUBSCRIBE │ │ 44 row │ └──────────┴───────────────────────────────┘ │ │ │ │ I left the chard. The mustard I thinned… │ └──────────────────────────────────────────────┘ page bg #E7E2D4 fold bg #F3EEE3 pad 36 top ``` - `

` width 720px, centered in the 1280 frame. - `

` three spans. - `h1`, `.by`, `.art` opening paragraph with `.drop`. - `