FP58 | The Margin | FIT=C | Creators & personal | Editorial
TECHNIQUES: scroll pin hover focus rotate card front back gallery filter mask motion responsive font hero gsap lenis
BORN_HOOD_ADVICE: Newsprint editorial look at odds with premium dark streetwear.
DESIGN_SIGNATURE: 's colors] The design A Sunday broadsheet's opinion page on screen: newsprint, black ink, hairline rules and one editor's red pencil. Fonts: Source Serif 4 for nameplate, headlines and body, extra-bold and tightly tracked when large; Inter Tight for small spaced capitals and figures. Colors: newsprint #F5F2EA, ink #121212, editor red #C8102E, rule grey #CFCAC0, press grey #5F5B53, and salmon #F1DDCD for the paid section, like the money pages. Square corners, faint paper grain, no rounded cards. In order: a slim nav whose date becomes a small nameplate once you scroll; a front page with two boxed ears, the name set edge to edge, a date line between double rules, an index, a headline with one phrase struck out in red and corrected, and a dashed clip-out subscribe coupon; a ticker of everyday prices; this week's issue in three ruled columns with drop cap, pull quote, line chart and halftone photo, fading into a subscribe prompt; five numbers that count up; the archive; the writer with a corrections box; letters under readership figures; a three-tier comparison table with a monthly or yearly switch; a boxed house ad holding the coupon; a black footer. Motion: the nameplate prints letter by letter, each stamped down with a soft ink bleed, then the date line types out. Rules draw across as each column arrives, and photos print in as halftone dots. Signature: the archive holds still as a grid of issue cards, then reflows into a front page of columns with drop caps as you scroll. Scissors cut around the last coupon until it lifts free.
HTML_SURFACE: headings=The Margin; What things are worth cost, and why we pay it.; This week; The Ledger; The archive; The writer; Letters; Editions; Sunday, 7 a.m.A coffee's worth of reading. | ids=n, ink, i-arrow, i-check, i-scis, nav, menu, main, top, sub-top, e-top, issue, issue-h, ledger, ledger-h, archive, archive-h, writer, writer-h, letters, letters-h, editions, editions-h, subscribe, sub-h, coupon, c-name, c-email | functions=safe, clamp, sstep, eio, navH, fitNp, fitFoot, rng, ell, tone, band, half, xl, xr, tri, makePlate, screen, set, scrollToY, openMenu, closeMenu, upd, setP, exOf, measure, viewState, render, clearPress, flowPress, pinPress
ORIGINAL_PROMPT: prompt/the-margin.md (SHA256 0bb9f7bd48530d098cb8d43bc644609203654192eebb7ecc75c117b492910378)
EXAMPLE_SOURCE: example/the-margin.html (SHA256 1f22d144abb1dc174afc42b033c39099f580f3fe55a3fbf6c5b7abaa05fbbcdf)
FULL_RUNNABLE_OFFLINE_EXAMPLE: C:\Users\usapr\Documents\Reference Libraries\Futurepedia Claude Website Library\offline_examples\the-margin\index.html
DO_NOT_COPY: Demo facts/images/prices/logos; use only proven techniques respecting current BORN HOOD constraints.
