# Paper article reader > **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 long-read article page for *Tidewater Review*. Warm paper background, body set in Newsreader at 19px / 1.6 on a 66ch measure, a 92px drop cap on the first paragraph, an italic 30px pull quote with a 2px moss rule, a small data table, and three numbered margin notes that float into a 220px column to the right of the text when the viewport is at least 1100px wide (they fall inline below their reference otherwise). A 52px sticky header carries the masthead, section links, a percentage counter and a 2px moss progress hairline that scales with scroll. The detail worth copying is the margin note: it is placed in the paragraph immediately after its superscript, so the float lands on the same line as the reference and never drifts. ## Reference behaviour 1. Initial state: header at top with "0 %", progress bar at `scaleX(0)`; kicker, 56px title, italic dek, byline rule, then the article. Note 1 sits in the right margin level with the line that contains superscript 1. 2. Scroll the article (the scroll container is a full-height `div`, not the window): the header stays fixed at the top with a 92% paper, 6px blur backdrop; the progress bar's `scaleX` equals `scrollTop / (scrollHeight − clientHeight)`; the counter shows the rounded percentage with tabular figures. 3. Hover a section link in the header: colour `--ink-2` → `--ink`. 4. Hover the in-text link: its underline colour changes from `--line` to `--accent` over 160ms. 5. At the end, a small 8px rotated square marks the article end; progress reads "100 %". 6. Resize below 1100px: notes leave the margin and render as indented blocks (2px left rule) directly after the sentence that references them. 7. Reduced motion: smooth scrolling off; the progress bar still updates (transition 1ms). ## Structure ``` 1280 × 800 (scroll container fills the viewport) ┌──────────────────────────────────────────────────────────────────────────────┐ │ Tidewater Review Transit Cities Craft 37 % │ 52 sticky │▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬ (2px progress, scaleX) │ │ │ │ ── TRANSIT · LONG READ │ │ The paper timetable comes (56px, balance)│ │ back, one ferry line at a time │ │ Screens were meant to retire … (24px italic) │ │ ─────────────────────────────────────────────── │ │ Ines Halvorsen · Bergen · 21 September 2026 · 14 min read │ │ ─────────────────────────────────────────────── │ │ T he first thing you notice … ┆ 1 The current sheet is │ note: 220px, │ ▌ … on the back.¹ ┆ the 14th revision … │ 40px gap │ … ┆ │ │ ▎ "The screen was correct …" (pull quote) ┆ │ │ ┌ table ───────────────────────────────┐ ┆ │ │ └──────────────────────────────────────┘ ┆ │ │ ◆ │ └──────────────────────────────────────────────────────────────────────────────┘ article width = min(66ch, 100% − 80px); at ≥1100 the column is shifted left by (220 + 40) / 2 = 130px so text + notes are centred as a unit. ``` - `.scroll` — `height:100%; overflow-y:auto; scroll-behavior:smooth`. - `

` — `position:sticky; top:0`; `` masthead, `