/* ========================================================================= TRENDING — the owner's mock, ported verbatim by scripts/build_trending_sheet.py. DO NOT hand-edit: edit specimens/trending-mock/index.html (or the transformer) and rebuild. The sheet's inline icons are Font Awesome Free 5.15.3 glyph paths (fontawesome.com), CC BY 4.0 — this comment is the attribution. ========================================================================= */ /* Compact chrome — the house desk numbers (ent/sports/food/opinion), on donor-identical markup. The owner named Opinion as the reference for this page's masthead: same band heights, same wordmark, same file. */ .trlight .band.utility { height: 30px; } .trlight .brand-band.small { height: 58px; } .trlight .brand-band.small .wordmark { width: 290px; } .trlight nav.sections { height: 32px; } /* ---- WIDTH — owner's call, 2026-08-15: '30% wider, and therefore bigger on all text, shapes etc, so it takes up more of the screen … the same width and sizing as the opinions page.' Opinion's law, applied to this drawing. The sheet is a fixed 1024px mock: every measure in it is an absolute px the owner approved at that size, and a 6.7px label stretched into a wider container is still 6.7px. So the drawing is SCALED, not stretched — one --trz, driving `zoom` on the sheet and the house tail's width below it so the two stay flush. The rungs are Opinion's rungs, to the number, because he asked for the two pages to match. The cap is 1.3 — 30%, which is also the step at which Opinion's type stops growing — and it lands this 1024px drawing at 1331px against Opinion's 1313px. The ladder is stepped because CSS cannot divide a viewport width by a px length to get a unitless zoom; every rung keeps the scaled sheet above its own 1024px drawing width, so no rung starts the page panning sideways. Under 1080px nothing scales and the mock's own responsive block takes over. */ .trlight { max-width: none; border-radius: 0; box-shadow: none; } .trlight { --trz: 1; } @media (min-width:1080px){ .trlight { --trz: 1.02; } } @media (min-width:1180px){ .trlight { --trz: 1.12; } } @media (min-width:1280px){ .trlight { --trz: 1.22; } } @media (min-width:1380px){ .trlight { --trz: 1.3; } } .trlight .trsheet { zoom: var(--trz); } /* FACES: Oswald and Permanent Marker are the mock's, kept. Unlike the Opinion port — which swapped Archivo Black and Caveat for house faces — this page's whole voice IS its condensed display type, and the owner's order was 'make it look exactly the same'. The families load from the host the donor head already preconnects to; the link is added in scripts/sections.py beside the Opinion precedent. */ /* The mock's own ground, moved off `body` (which the port does not own) and onto the sheet. The 1024px drawing centres itself exactly as its .site-shell did; the frame comes off on the wide desks' terms, so no border, no radius, no shadow. */ .trsheet{width:min(1024px,100%);margin:0 auto;background:#fff;color:#050505;font-family:Inter,Arial,sans-serif;font-size:16px;line-height:1.5;-webkit-font-smoothing:antialiased} /* ---- THE PREFLIGHT, and why it is not optional. The mock's own stylesheet resets almost nothing, because its loaded the Tailwind CDN and inherited Tailwind's preflight for free. It uses exactly two Tailwind utility classes, both in the dropped utility bar — so what that