# Centered colophon footer > **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 The last screen of a long essay in *Quarterly 41*, a fictional Lisbon literary magazine. The article is a scrollable column above a footer that never moves: centered italic wordmark "Quarterly", the issue name "Forty-one" in 13px uppercase grotesk, three text links, "Lisbon · MMXXVI", and a back-to-top control. The last paragraph of the essay is masked with a linear fade to paper so the type dissolves before the colophon. Back-to-top smoothly scrolls the article to its heading. The feeling is a printed magazine closing its last page — quiet, centered, no sitemap. ## Reference behaviour 1. Initial state: cool olive paper (`#e8e4d6`). The article column (`#top`) is `overflow-y: auto` in the space above the footer. On load, JS sets `essay.scrollTop = essay.scrollHeight`, so the first frame is the faded last paragraph sitting on the colophon, not the title. 2. The last `

` uses a CSS mask `linear-gradient(180deg, #000 0%, transparent 92%)` so the type fades into the paper. 3. Footer is centered, full width, not a grid of columns. A 48×1px ink rule at 45% opacity sits 36px above the wordmark. 4. Wordmark is italic 52px EB Garamond "Quarterly". Under it, "Forty-one" is 13px Hanken Grotesk, uppercase, letter-spacing 0.16em, colour `--ink-2`. 5. Three links in a row, 28px apart: Index, Masthead, Submit. Hover: colour `--ink`, 1px ink underline. No current-route state. 6. Place line: italic 16px serif "Lisbon · MMXXVI", `--ink-2`, 36px above the button. 7. Back-to-top is a `