/* ══════════════════════════════════════════════════════════════════════════ Meredith's List — design system Extracted from the MER-80 mockups (docs/design/mockups/mer-80-shell.css). Framework-free and self-contained: no build step, no bundler. ══════════════════════════════════════════════════════════════════════════ */ /* ── Type ────────────────────────────────────────────────────────────────── Self-hosted, subset, variable. Not a CDN: a third-party request on the critical path means losing the typography on a weak signal in the valley, and handing every visitor's IP to Google. Regenerate with scripts/subset_fonts.sh — the .woff2 files are committed assets. */ @font-face{ font-family:"Fraunces"; src:url("/static/fonts/fraunces-var.woff2") format("woff2-variations"), url("/static/fonts/fraunces-var.woff2") format("woff2"); font-weight:300 700; font-stretch:100%; font-style:normal; font-display:swap; } @font-face{ font-family:"Plus Jakarta Sans"; src:url("/static/fonts/jakarta-var.woff2") format("woff2-variations"), url("/static/fonts/jakarta-var.woff2") format("woff2"); font-weight:400 700; font-style:normal; font-display:swap; } *,*::before,*::after{box-sizing:border-box;margin:0;padding:0} /* Any author-level `display` (flex/grid/block) outranks the UA [hidden] rule, so a component with display:flex stays visible when hidden. Restore the intent once, globally, rather than patching each component. */ [hidden]{display:none !important} :root{ --font:"Plus Jakarta Sans",ui-sans-serif,system-ui,-apple-system,"Segoe UI",Roboto,sans-serif; --serif:"Fraunces",Georgia,"Iowan Old Style","Times New Roman",serif; --mono:ui-monospace,SFMono-Regular,"SF Mono",Menlo,Consolas,monospace; /* Squircle scale. --shell and --core are concentric on purpose: the inner radius is the outer minus the 6px tray, so the two curves stay parallel instead of pinching at the corners. Change one, change both. */ --r-xs:8px; --r-sm:12px; --r-md:18px; --r-lg:26px; --r-xl:32px; --shell:32px; --core:26px; /* top:22 + the pill's tallest state. It is 61px wide-screen and 62px below 860px, where the links and burger go to 40px for touch — so the band is sized against 84, not against what a 1440px window happens to show. */ --island-band:88px; /* The utility bar's unwrapped height: a 33.6px input inside 9px of padding, rounded up. It is the *fallback* for the sticky offset of anything that must clear that bar — stickBelow() overwrites it with a real measurement as soon as one exists, which matters only when the bar wraps. Defined once here so the bar's min-height and the offset cannot drift apart. */ --utilbar-h:52px; /* The sticky offset anything below that bar must clear. Declared here as the bar's own height so the stylesheet is self-contained and readable on its own; stickBelow() overrides it on the scroller — where it inherits down to the column row — once the bar has a measured height that differs, which happens when it wraps. */ --util-h:var(--utilbar-h); --swing:cubic-bezier(.32,.72,0,1); --ease:var(--swing); } /* color-scheme follows the chosen theme, not the OS. The declares both are supported, which leaves `color-scheme:normal` computed — so a user on a light-OS machine who picks dark in-app kept UA-painted chrome in light: the