TITLE: Alpen Post — Front Page, Late Edition

PROMPT: Build a single self-contained HTML page that is a Swiss-editorial newspaper front page. Palette: newsprint #f5f1e8, ink #15140f, spot red #c8102e, grey rule #8a8578, panel #e8e2d2. Background: two soft radial tints (a grey wash top-left, a 4.5% red wash top-right) over two repeating-linear-gradients that fake paper grain at 1px and 4px. Type: masthead Georgia 900 uppercase at clamp(2.5rem,9.4vw,7.1rem) with -.035em tracking and the second word in spot red; headlines Georgia 700 at clamp(1.85rem,4.7vw,3.55rem) with -.022em tracking and text-wrap:balance; deck Georgia italic; body Georgia 400 at ~0.95rem, line-height 1.64, text-align:justify with hyphens:auto and a 3.15em drop cap; all kickers, bylines, captions, tables and the ticker in ui-monospace 600 uppercase at .2em+. Structure top to bottom: (1) a full-bleed ink ticker with a red LIVE chip whose dot pulses via transform/opacity, and a masked rail of mono headlines scrolling on an infinite translateX(-50%) loop with duplicated content; (2) a masthead with a meta row (date, cities, price, issue number), a hairline rule, the giant brand with a right-hand edition block, then a 3px and a 1px rule; (3) the front grid, 3.05fr / 1.18fr with a vertical hairline between: left is the lead story — red mono kicker with a rule, the headline (each phrase is a span with a red highlighter gradient that wipes in from 0% to 100% background-size on hover/focus), a Georgia italic deck, a mono byline row, a 2px red rule that draws itself with scaleX over 1.3s, then a 3-column CSS multi-column body with column-rule hairlines, a column-span:all pull quote between two ink rules, and a click-to-expand continuation using grid-template-rows 0fr to 1fr; right is a rail of three blocks — a weather panel on #e8e2d2 with an inline SVG sun-and-cloud icon whose ray group rotates 26s and whose cloud drifts, a big serif temperature, a °C/°F segmented toggle and four forecast rows; a markets table with mono figures and red/ink deltas; and a sport brief; (4) a lower band split 1.6fr/1fr by a 3px ink rule — left a snowfall data graphic as inline SVG: four hairline gridlines, a 1.5px baseline, thirteen 22px bars (ink for 1990-2014, red for the last four) and a dashed red trend polyline, with mono axis labels; right an "In brief" list of three dotted-rule items each with a red mono tag; (5) a footer row with page furniture. The columns block has a press-run entrance: translateY(14px) to 0 plus the red rule drawing. Responsive: 900px collapses the front and band to single columns and drops the body to 2 columns; 620px drops to 1 column and shrinks the masthead; prefers-reduced-motion stops the ticker, the icon animations and the entrance transforms.

DESCRIPTION: A broadsheet front page built the way a Swiss editor would set it: a huge 900-weight masthead over a hairline-and-thick rule stack, one dominant lead story set in three justified columns with a drop cap and a spanning pull quote, a narrow weather-and-markets rail, and a data graphic that reads like a printed chart rather than a dashboard. The only colour is one spot red used as punctuation — the LIVE chip, the kicker, the drawing rule, the highlighter sweep, the last four bars, the trend line — so the page feels printed rather than rendered.

TECHNIQUES: CSS multi-column with column-rule and column-span:all; drop cap via ::first-letter; background-size highlighter wipe on hover; scaleX red rule draw with a delayed keyframe; grid-template-rows 0fr to 1fr disclosure; duplicated-content infinite ticker with mask fades; inline SVG weather icon animated with transform-only ray rotation and cloud drift; inline SVG bar chart with a dashed trend polyline; dotted-rule tables and lists; layered paper-grain gradients; text-wrap:balance; tabular-nums; :focus-visible red rings; prefers-reduced-motion media query.

INTERACTION: Hover or focus any phrase of the lead headline to wipe a red highlighter across it. Click the headline or the "Full story +" button to expand the article inline — the hidden paragraphs slide open on a grid-template-rows transition and the button's plus sign rotates into a cross; both controls stay in sync via aria-expanded. Click °C or °F in the weather panel to convert the current, peak and valley temperatures and swap the active chip. The LIVE dot pulses, the top ticker scrolls continuously, the sun rays rotate, the cloud drifts, the red rule draws in on load and the three columns rise into place. Hovering the headline area does not move the layout; resizing reflows the front and lower bands to two then one column.