/* newz.audio-palette.com — dense terminal reader. Optimised for headlines-per-screen and fast scanning, not for lingering. */ :root { --bg: #0c0d10; --bg-alt: #131519; --line: #23262d; --fg: #dfe3ea; --fg-dim: #8b93a3; --fg-faint: #5b6272; --accent: #e8b34a; --accent-2: #5fd3a6; --link: #cfd6e3; --link-hover:#ffffff; --hot: #ff6b5e; --mono: ui-monospace, "SF Mono", SFMono-Regular, Menlo, Consolas, "DejaVu Sans Mono", "Liberation Mono", monospace; /* Indirection so a theme can leave monospace behind without lying about what --mono means. The punk theme is the only one that does. */ --body-font: var(--mono); --row-gap: 2px; --pad: 14px; /* The page's reading measure — the width the centred furniture shares. A CEILING, not a layout: everything that uses it is fluid below this width and stops growing above it, so the slack on a wide screen goes to the margins rather than to the line length. That is the whole of the page's responsiveness for width, and it needs no resize listener — `100%` and `max()` are re-evaluated by the browser on every resize for free. JS measuring is reserved for what CSS genuinely cannot express, which here is only --head-h (a wrapping bar's height). 1440 is derived rather than chosen: at that width the lead's 0.92fr art track computes to 677px, which is the picture's own natural width, so the hole between the photograph and its headline closes. If .lead-art's `max-height: 380px` ever moves, this moves with it — see `.story.lead`. Three things now share it (the lead, the section bar, and the lockbar pair by centring on the same midline). They are deliberately CONCENTRIC rather than edge-matched: forcing the lockbar to exactly 1440 would mean stretching it, and stretching a centred group is the bug that caused every alignment complaint this file records. Sharing a centre is what reads as aligned. */ --measure: 1440px; /* Height of the sticky masthead. Everything that sticks *under* it — the rail, and every section heading — offsets by this, so a theme that changes the header's size has one number to move instead of five. Themes that grow it should pin it with min-height rather than trusting content to measure. */ --head-h: 41px; /* Height of the page bar that sticks under the masthead. Pinned, not measured — which is exactly what forces .secnav to be a single row that scrolls sideways instead of wrapping. See the rule. */ --nav-h: 32px; /* Height of the LOCKED BAR — brief and weather together — in its compact form, which is the only form that is ever sticky. At full height it is ~144px, a quarter of a 900px laptop screen to hold open permanently, so it shrinks to one line the moment it starts sticking (body.wx-stuck) and this is what it shrinks to. Both halves obey it: the brief clamps to one line under the same class, or the bar is 34px on the right and five lines tall on the left. That is what lets --stick-h stay a constant. By the time the page has scrolled far enough for anything else to stick, the weather is already compact, so this number is the one actually on screen. The alternative is measuring a bar whose height changes, on scroll, and writing it back into a custom property — which is a resize loop waiting to happen. */ --wx-h: 34px; /* What anything sticking under ALL THREE answers to: the scroll-margin a page turn has to clear, and anything a future page pins. A theme that resizes any of the bars moves this on its own. */ --stick-h: calc(var(--head-h) + var(--nav-h) + var(--wx-h)); } @media (prefers-reduced-motion: no-preference) { /* Jumping between sections is a lot less disorienting when you can see which direction you went. */ html { scroll-behavior: smooth; } } @media (prefers-color-scheme: light) { :root { --bg: #f7f7f4; --bg-alt: #ffffff; --line: #dcdcd4; --fg: #1a1c20; --fg-dim: #5c6270; --fg-faint: #8b909c; --accent: #9a6a00; --accent-2: #10745a; --link: #1a1c20; --link-hover:#000000; --hot: #b3251a; /* Light-mode accent is dark enough that button labels need white. */ --btn-fg: #ffffff; } } /* ---------- the palettes ---------- `[data-theme=…]`, NOT `:root[data-theme=…]` — dropped 2026-08-12 so a palette can be applied to a nested element as well as to . That is the whole mechanism behind the theme picker: a tile carrying `data-theme="newzpaper"` gets the entire palette, the fonts and `color-scheme`, and its subtree inherits them, so a preview is the real thing rather than a hand-painted swatch that can drift. Nothing else needed changing to make that work. **These must still beat the `prefers-color-scheme` media query above, and what carries that is now SOURCE ORDER rather than specificity.** `:root[…]` was (0,2,0) against the media query's (0,1,0); a bare `[data-theme=…]` is (0,1,0), i.e. a tie, broken by these blocks being written below it. So the media query has to stay above the palettes. Moving it below would leave a reader whose OS is in light mode seeing light colours under every theme — which looks like a broken palette, not like a rule-ordering mistake. One consequence to know when using a palette on a nested element: it inherits any variable the page's own theme sets that the applied one doesn't. That is harmless for the core contract, because every theme defines all of it — but it is another reason the punk-only keys (--ink, --outline, --shadow, --paper, --dot, --pop*) must stay inside punk-scoped rules, where a non-punk tile cannot match them however they were inherited. */ [data-theme="dark"] { /* Also pins the UA's own chrome — the search input and scrollbars would otherwise follow the OS and render light behind a dark page. */ color-scheme: dark; --bg: #0c0d10; --bg-alt: #131519; --line: #23262d; --fg: #dfe3ea; --fg-dim: #8b93a3; --fg-faint: #5b6272; --accent: #e8b34a; --accent-2: #5fd3a6; --link: #cfd6e3; --link-hover: #ffffff; --hot: #ff6b5e; /* Must be reset explicitly: a light-mode OS with the dark toggle on would otherwise inherit white from the media query and wash out on amber. */ --btn-fg: #0c0d10; /* The two terminal themes are the ones that keep the :root default, so these restate it rather than change it — and they have to, now that a palette can be applied to a nested element. An unset variable INHERITS, so the `dark` tile in the picker was picking up whatever the page around it was wearing: Times inside a newzpaper reader, Arial Black inside a punk one. It looked like a font bug and was a scoping one. Anything a palette leaves unset is a hole for the page's own theme to fall through, which is why these two are part of the contract now and not an indirection with a default. */ --body-font: var(--mono); --display: var(--body-font); } [data-theme="light"] { color-scheme: light; --bg: #f7f7f4; --bg-alt: #ffffff; --line: #dcdcd4; --fg: #1a1c20; --fg-dim: #5c6270; --fg-faint: #8b909c; --accent: #9a6a00; --accent-2: #10745a; --link: #1a1c20; --link-hover: #000000; --hot: #b3251a; --btn-fg: #ffffff; /* Same reason as dark, above. */ --body-font: var(--mono); --display: var(--body-font); } /* Pop-punk, in two. Both keep the same variable contract as the terminal themes, so every rule below works untouched, and both share one decoration layer at the foot of the file selected with [data-theme^="punk"] — only the palette below differs. Adding a third variant means adding a palette block here and nothing else. Everything that lands on text clears 4.5:1 against its own --bg. That is why bubblegum's --accent is #d01565 rather than the brighter #ff2d87 it wants to be: that pink is 3.2:1 on pink and unreadable at 11px. The bright one lives on as --pop, restricted to fills, borders and shadows where contrast is not a question. Keep that split if you retune these. Pink on pink is unforgiving and eyeballing it does not work — #e0186f looks plenty dark and lands at 4.20. `node test-contrast.mjs` checks every pair in both variants; run it rather than trusting the swatch. */ /* Shared: type, the three shout colours, and the geometry. */ [data-theme^="punk"] { --body-font: ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif; /* No webfont: the CSP has no font-src, so it falls back to default-src 'self' and anything hosted elsewhere is blocked. These are all installed by default on Windows and macOS, and a heavy condensed grotesque is the right face for this look anyway. */ --display: "Arial Black", "Arial Bold", Impact, Haettenschweiler, "Franklin Gothic Heavy", var(--body-font); --pop: #ff2d87; /* decorative only — see the note above */ --pop-2: #23e0d8; --pop-3: #ffd93d; /* The colour of text printed *on* a --pop-2 or --pop-3 fill. Those fills are bright in both variants, so this stays dark in both — it is not "the dark colour", it's the ink. Sticker outlines use --outline instead, which does flip. */ --ink: #1b0f1a; } /* Bubblegum — daylight. */ [data-theme="punk"] { color-scheme: light; --bg: #fff0f6; --bg-alt: #ffffff; --line: #1b0f1a; --fg: #1b0f1a; --fg-dim: #6d4763; --fg-faint: #8a6382; --accent: #d01565; --accent-2: #0a7d72; --link: #1b0f1a; --link-hover: #d01565; --hot: #d90b3c; --btn-fg: #ffffff; --outline: var(--ink); --shadow: 2px 2px 0 var(--ink); --paper: #fffbe6; --warn-bg: #fff3b0; --dot: rgba(255, 45, 135, 0.16); --row-hover: rgba(255, 45, 135, 0.12); } /* Blacklight — the same stickers under a UV lamp. Two flips matter. The sticker outline goes near-white, because a black outline on a dark page is just a missing edge; and --btn-fg goes dark, because the pinks bright enough to read on black are too bright to carry white text — #ff5fa8 under white is 2.8:1, under ink it's 6.8:1. Anything filled with --accent or --accent-2 gets ink, not paper. The hard shadow goes cyan rather than black: an offset black shadow is invisible here, and the pink/cyan misregistration is the look anyway. */ [data-theme="punk-dark"] { color-scheme: dark; --bg: #140d1a; --bg-alt: #1f1528; --line: #4a2f57; --fg: #f6ecfa; --fg-dim: #b99ec8; --fg-faint: #8f75a0; --accent: #ff5fa8; --accent-2: #34e0d4; --link: #f6ecfa; --link-hover: #ff5fa8; --hot: #ff4d6d; --btn-fg: #140d1a; --outline: #f7e8ff; --shadow: 2px 2px 0 var(--pop-2); --paper: #241733; --warn-bg: #2e2113; --dot: rgba(255, 45, 135, 0.22); --row-hover: rgba(255, 45, 135, 0.20); } /* ---------- newzpaper ---------- Black ink on aged newsprint, set in Times. The fifth theme, and the one that tests whether the "a theme is a palette block" claim above is true: it needed a palette, two font variables, and a decoration layer for the things a newspaper does that no other theme here does — double rules, reverse-type section flags, a drop cap. **It is monochrome on purpose, and that is safe here for a documented reason.** Severity in the weather bar is carried by the event's own NAME and by the ⚠ glyph as well as by colour — the alerts code was written that way so it survives a colour-blind reader, and a one-ink theme is the same problem from the other side. The single exception is --hot, which is an aged red rather than black: a spot colour for what is urgent is period-correct (papers printed one), and it keeps "fresh", the hazard chips and the today marker legible as a class rather than as more black type. --accent is pure ink and --accent-2 a sepia, so section flags and the events ones are told apart by hue as well as by position, the way a two-plate press would have done it. Both are dark enough to carry paper-coloured text. The paper is #e9e2d0 rather than white. Newsprint yellows, and a pure white ground under a Times face reads as a word processor rather than as a page. */ [data-theme="newzpaper"] { color-scheme: light; /* Times first, then the metric-compatible clones so Linux gets the same measure rather than falling back to a wider default serif. No webfont: the CSP has no font-src, so it falls back to default-src 'self' and anything hosted elsewhere is blocked — same constraint the punk display face works under. */ --body-font: "Times New Roman", Times, "Liberation Serif", "Nimbus Roman", "DejaVu Serif", Georgia, serif; --display: var(--body-font); /* Two newzpaper-only faces, used only inside newzpaper-scoped rules — the same arrangement as punk's --ink and --outline, and the reason a new theme can still skip them. --nameplate is the blackletter for the masthead, which is the single thing that says "newspaper" before a word is read. Every entry is a face that ships with an OS or with Office; there is no webfont because the CSP has no font-src and falls back to default-src 'self'. We could serve one from our own origin under that rule, and chose not to: it would be the first binary in the repo and a request on every first load, to fix a nameplate that already degrades to the ruled serif caps this theme shipped with. A reader without a blackletter sees the old masthead, not a broken one. --woodtype is the heavy condensed face for the lead headline — the poster wood type a front page shouts in. Impact is the one that carries it on macOS as well as Windows; Haettenschweiler is narrower and better where it exists, so it goes first. */ --nameplate: "Old English Text MT", "Cloister Black", "UnifrakturMaguntia", "Blackadder ITC", var(--display); --woodtype: "Haettenschweiler", "Impact", "Franklin Gothic Medium Cond", "Arial Narrow", "Liberation Sans Narrow", var(--display); --bg: #e9e2d0; --bg-alt: #f2ecdd; --line: #2a251c; --fg: #14110b; --fg-dim: #4a4336; --fg-faint: #6b6355; --accent: #14110b; --accent-2: #46392a; --link: #14110b; --link-hover: #8c2016; --hot: #8c2016; --btn-fg: #f2ecdd; /* The one number a theme may want that isn't colour: Times runs smaller than the monospace and sans faces at the same px, so the whole page is set a touch larger to keep the same reading size. */ --paper-size: 14.5px; } * { box-sizing: border-box; } /* Any class rule setting `display` outsmarts the UA stylesheet's [hidden] { display: none }, so state it once, loudly. */ [hidden] { display: none !important; } body { margin: 0; background: var(--bg); color: var(--fg); font-family: var(--body-font); font-size: 13px; line-height: 1.45; -webkit-font-smoothing: antialiased; } a { color: var(--link); text-decoration: none; } a:hover, a:focus-visible { color: var(--link-hover); text-decoration: underline; } :focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; } /* ---------- header ---------- */ .masthead { position: sticky; top: 0; z-index: 20; display: flex; align-items: baseline; gap: 14px; flex-wrap: wrap; padding: 10px var(--pad); background: var(--bg); border-bottom: 1px solid var(--line); } .brand { font-weight: 700; letter-spacing: 0.14em; color: var(--accent); white-space: nowrap; /* The source string is natural case ("The Valley Bulletin") and the caps are put on here, so newzpaper can have the mixed-case form a blackletter nameplate needs without either theme fighting the markup. */ text-transform: uppercase; } .brand span { color: var(--fg-faint); font-weight: 400; } /* The dateline, in the masthead where a paper puts it (moved out of the weather bar on 2026-08-11 — see renderBrandDate in app.js for why). It needs no rule drawn beside it up here. In the weather bar it had to have one or it read as a fourth weather field; against the brand it is obviously the paper's own date, and the "//" the brand already used as a separator does the whole job. Deliberately NOT `--fg-faint` like the old "// TREASURE VALLEY" it replaces. That was a subtitle and could recede; this is information a reader might actually come here for, and at 0.14em tracking in 11px faint grey it was unreadable at arm's length. */ .brand-date { font-variant-numeric: tabular-nums; /* The name is uppercased, the date is not — it inherits otherwise, and "THURSDAY AUGUST 13TH" shouts a fact nobody is reading the masthead for. */ text-transform: none; } .brand .bd-ord { font-size: 0.6em; vertical-align: 0.45em; letter-spacing: 0.03em; color: var(--fg-faint); } /* Both forms live in the DOM and CSS picks one — see renderBrandDate. The short one is hidden by default so the full date is what a wide screen gets without a media query having to fire. */ .bd-short { display: none; } .masthead .spacer { flex: 1 1 auto; } /* The filter and the three buttons, as one object. Its whole job in the four terminal/punk themes is to be invisible: the same 14px gap the masthead uses and `align-items: baseline` reproduce exactly what the four loose children did, so nothing about those mastheads changed when the wrapper went in. It exists for the themes that need to place the controls against a centred nameplate — see newzpaper. */ .masthead .tools { display: flex; align-items: baseline; gap: 14px; flex-wrap: wrap; } .meta { color: var(--fg-faint); font-size: 11px; white-space: nowrap; } .meta b { color: var(--fg-dim); font-weight: 400; } button, .btn { font: inherit; font-size: 11px; color: var(--fg-dim); background: var(--bg-alt); border: 1px solid var(--line); border-radius: 3px; padding: 3px 9px; cursor: pointer; white-space: nowrap; } button:hover:not(:disabled) { color: var(--fg); border-color: var(--fg-faint); } button:disabled { opacity: 0.5; cursor: default; } button.primary { color: var(--btn-fg, var(--bg)); background: var(--accent); border-color: var(--accent); font-weight: 700; } button.primary:hover:not(:disabled) { color: var(--btn-fg, var(--bg)); filter: brightness(1.12); } #filter { font: inherit; font-size: 11px; color: var(--fg); background: var(--bg-alt); border: 1px solid var(--line); border-radius: 3px; padding: 3px 8px; width: 150px; } #filter::placeholder { color: var(--fg-faint); } /* ---------- section jump bar ---------- */ /* Real anchors to real section ids, so this works with the keyboard, survives middle-click, and needs no JS to do the scrolling. The one rule that matters: it never wraps. Every sticky heading on the page offsets by --stick-h, and a bar that grew to two lines on a narrow screen would leave story rows scrolling up through the gap — the same trap --head-h already carries a warning about. Out of room it scrolls sideways instead, and the half-cut chip at the edge is what says so. The bar is full-bleed and its CONTENT sits in --measure, which is the same relationship `.page` has with `.story.lead`. It was ranged to the screen edge until 2026-08-12 — the last thing on the page that was, once the lockbar and the lead were centred. On a 2560px screen that put TREASURE VALLEY at x=14 while everything under it centred on x=1280. The padding is the gutter and the centring at once: `max()` picks whichever is larger, so above --measure it is the leftover margin and below it collapses to the page gutter and the bar goes fluid edge to edge. Nothing here is pinned to a viewport size and there is no breakpoint — the browser re-evaluates `100%` on every resize. */ .secnav { position: sticky; top: var(--head-h); /* Under the masthead (20), over the section headings (5). */ z-index: 19; display: flex; flex-wrap: nowrap; align-items: center; gap: 6px; /* `safe`, because this is a scroll container: unqualified `center` pushes the first chip off the scrollable origin when the chips overflow, and there is no way to scroll back to it. `safe` falls back to flex-start exactly then. */ justify-content: safe center; min-height: var(--nav-h); padding: 0 max(var(--pad), calc((100% - var(--measure)) / 2)); background: var(--bg); border-bottom: 1px solid var(--line); overflow-x: auto; overscroll-behavior-x: contain; /* Hidden rather than thin: a scrollbar appearing on some platforms and not others would make --nav-h true on some platforms and not others. */ scrollbar-width: none; } .secnav::-webkit-scrollbar { display: none; } /* Nothing has rendered yet — don't reserve a bar for it. */ .secnav:empty { display: none; } /* Spread across the measure, so the bar reads as a newspaper's section index: TREASURE VALLEY on the left rim, EVENTS on the right, the rest evenly spaced between. Set by `renderNav` and only when there are enough chips to carry it — see NAV_SPREAD_MIN. **The count has to come from JS, because CSS cannot spread with a ceiling.** Filling a fixed measure needs the free space divided by (chips − 1), and `space-between` is the only thing that does that division — it has no maximum. The obvious guard, a large `gap` capped by `width: fit-content`, does not work: `gap` is a hard MINIMUM in flexbox, so a gap wide enough to fill 1440px simply overflows it (measured: 6 chips ran 40px past the group) rather than compressing. So the spacing is all-or-nothing, and the thing that decides is a count — which CSS has no way to ask about and JS has for free. Same split as `.drop-ok` in the newzpaper theme: JS states a fact about the content, CSS decides what to do with it. Left ungated it degrades badly, and /admin can get you there — NATIONAL and WORLD are already unticked, which is why there are 6 chips and not 8. Gaps at 2560px: 8 chips 101px 6 chips 172px ← today, reads as a bar 7 chips 131px 5 chips 241px ← loose, still reads as a bar 4 chips 347px ← two words and a lot of paper 2 chips 1190px ← marooned Below the threshold the bar falls back to the `safe center` above: a tight centred group, still concentric with everything else, just not touching the rims. No narrow-screen override is needed, and that is a property of `space-between` rather than an oversight. Once the chips overflow, the free space is negative and there is none to distribute, so it behaves exactly like flex-start and the gaps sit at the 6px floor — which is the phone bar this file already describes, scrolling sideways with a half-cut chip at the edge. Verified at 390px: first chip at the gutter, scrollable, unchanged. */ .secnav.spread { justify-content: space-between; } .chip { display: flex; flex: 0 0 auto; align-items: baseline; gap: 5px; padding: 2px 8px; border: 1px solid transparent; border-radius: 3px; font-size: 10.5px; letter-spacing: 0.1em; color: var(--fg-dim); white-space: nowrap; } .chip:hover, .chip:focus-visible { color: var(--fg); border-color: var(--line); text-decoration: none; } .chip-count { color: var(--fg-faint); font-size: 10px; letter-spacing: 0; font-variant-numeric: tabular-nums; } /* The page you are on. Exactly one at a time now — the bar is the router, and this is the only "you are here" on the screen, which is why the page's own heading doesn't need to be sticky. It used to be `.inview` and could be true of several chips at once, back when every section was on one scrolling page. Underlined as well as coloured: current-page is navigation state, and it has to survive a colour-blind reader the same way the ♪ on an event row does. */ .chip.current, .chip.current .chip-count { color: var(--accent); } .chip.current { border-color: var(--line); box-shadow: inset 0 -2px 0 var(--accent); } /* The events page. Coloured like its own headings, so the bar reads as sections-then-what's-on rather than as one undifferentiated list. */ .chip-events, .chip-events .chip-count { color: var(--accent-2); } .chip-events.current, .chip-events.current .chip-count { color: var(--accent-2); } .chip-events.current { box-shadow: inset 0 -2px 0 var(--accent-2); } /* No matches on that page under the current filter. Dimmed rather than hidden: a bar that loses chips as you type reflows under the pointer, and "IDAHO 0" is a more useful answer than a gap. */ .chip.nomatch { opacity: 0.38; } /* ---------- brief ---------- */ /* ---------- weather ---------- */ /* Three blocks side by side: now-and-the-week, the forecaster's paragraph, and the hazards stacked beside it. `order` rather than DOM order, because the two disagree on purpose — the hazards are written first (see renderWeather) and read last. Nothing here grows. An earlier pass let the paragraph take all the slack so the hazards sat flush right, which on a 2500px screen put them a clear 1500px from anything they related to — reading as three unconnected widgets on one rule rather than as a weather bar. The paragraph is capped instead so the three blocks stay a group, and the group is centred on the bar. Centring is only safe BECAUSE nothing grows: with an elastic member the three would spread to the full width and `justify-content` would have nothing left to centre. The two rules are one decision, not two. Reading order is now conditions → hazards → prose, which is also severity order: the temperature is what you came for, an advisory is what might change your afternoon, and the forecaster's paragraph is the elaboration. The hazards sit in the middle rather than at either end so they touch the block they qualify. */ /* ---------- the locked bar ---------- Sticky under the masthead and the page bar, and the only thing on the page that never scrolls away: the brief ranged left, the weather ranged right. What changes is how much of it there is — see --wx-h and the compact rules below. z-index above the page content and below the two bars it sits under. The brief is the elastic member and the weather is rigid, which is what puts one at each end. The old bar centred the weather and had a rule that NOTHING in it could grow, because a single `flex: 1` would spread the blocks to the full width and leave the hazard chips a clear 1500px from the temperature they qualify. That rule is retired rather than broken: there is a deliberate left occupant now, so the weather group is pushed right as a group and its four blocks keep their own gap. Give anything INSIDE .weather a flex-grow and the old failure comes straight back. */ #lockbar { position: sticky; top: calc(var(--head-h) + var(--nav-h)); z-index: 6; display: flex; /* Top-anchored, not vertically centred. The bar's height is set by whichever panel is taller — normally the brief, at six clamped lines — and centring left the shorter one (the weather, almost always) floating in the middle with air above it while the brief started hard at the top. Two panels side by side that begin at different heights read as two unrelated things, which is the same complaint centring the bar horizontally was fixing. `body.wx-stuck #lockbar` restates `center` for the compact line and must keep doing so: that bar is one fixed --wx-h row, where centring is the correct answer and top-anchoring would hang the text off the ceiling. */ align-items: flex-start; /* Centred as a PAIR, not ranged to the two edges — changed 2026-08-11. `space-between` is only a layout while the two halves are wide enough to meet in the middle, and on a 2560px screen they are not: the weather slot grew to 1965px with its content ranged left inside it, the brief was capped at 78ch and pinned to the far rim, and ~1200px of nothing sat between them. The brief didn't read as the right-hand half of a bar, it read as marooned. Centred, the two travel together and the slack goes to the outside where nobody has to read across it. */ justify-content: center; gap: 10px 34px; padding: 0 var(--pad); background: var(--bg); border-bottom: 1px solid var(--line); } /* A proportional split, and both halves have to be allowed to shrink. The first attempt made the weather rigid (`flex: 0 0 auto`) on the grounds that nothing in it may grow — which is a rule about the weather's own INTERNAL layout and does not mean the bar can't resize it. Rigid, it claimed its full natural width, which is about 1076px once the forecast paragraph is included, and left the brief **28 pixels** on a 1024px screen. Not broken, not an error: a single column of letters. 40/60 rather than auto, so the split is the same shape at every width, and the weather absorbs it by wrapping — its four blocks already wrap, so a narrow bar puts the forecast paragraph on a second row instead of squeezing everything. The cap stops the brief becoming one 1900px line of 12px text on an ultrawide, which is a measure nobody can track across; the gap that leaves in the middle is also what makes "left" and "right" read as two ranged blocks rather than one stretched row. **The proportional split is gone (2026-08-11, same day it arrived).** `1 1 60%` and `1 1 40%` are grow factors, and growing is exactly what stranded the brief: the weather half claimed 1965px on an ultrawide and then ranged its content left inside it, so the "split" described two boxes and not two blocks of type. Both slots size to their content now and `#lockbar` centres the pair, which is the same anti-stretch rule `.weather` has always had one level down, finally applied to the level above it too. They keep shrink and `min-width: 0` because shrinking is still needed — a narrow screen has to be able to squeeze them before the bar wraps. It is only the growing that was wrong. The brief's cap survives unchanged: it is what stops a paragraph running to a measure nobody can track across. **The brief shrinks twice as fast, and that number is measured.** Flex distributes shrink in proportion to base size, and the brief's 78ch cap makes its base the SMALLER of the two — so at equal shrink factors the paragraph held its width and the weather was crushed to 191px at an 800px bar, which is the "single column of letters" failure this file already records happening to the brief, now pointed the other way. Measured across 800/900/1000/1200: brief-shrink 800px 900px 1000px 1200px 1 191/547 h353 291/547 h292 391/547 h292 591/547 h192 2 433/305 h198 441/397 h192 449/489 h192 591/547 h192 3 553/185 h242 558/280 h198 564/375 h192 591/547 h192 The column that decides it is `h`, the bar's HEIGHT, because this bar is locked to the top of every page and every pixel of it is charged to all of them. 2 is the only weighting that keeps the bar at its natural 192px all the way down to 900 and costs 6px at 800; 1 and 3 both crush one panel, and a crushed panel is tall — it wraps. So this is a height rule wearing a width rule's clothes, which is why it isn't obviously arbitrary. */ #weather-slot { flex: 0 1 auto; min-width: 0; } #brief-slot { flex: 0 2 auto; min-width: 0; max-width: 78ch; } /* Either half can be missing, and neither may leave a hole. `renderBrief` leaves its slot childless when the payload carries no brief, which is a supported state rather than a fault — see Secrets in CLAUDE.md, "no Anthropic key hides the brief", and it is also what a fresh deploy shows until the home box posts its first one. `renderWeather` does the same when nothing at all came back. An empty flex item does not collapse: the bases already sum to 100%, so there is no positive free space for flex-grow to redistribute and the empty half sits there at ~546px wide. `:empty` matches because replaceChildren() leaves zero children and the markup has no whitespace inside the div — same prior art as `.secnav:empty`. **Hiding it is only half the fix**, which is worth stating because hiding it alone looks like it worked. With one slot gone the survivor grows to the full width and its own ranging then holds it against the outer edge — the identical void, now on the other side with nothing to blame it on. Alone in the bar each one centres, which is what the weather did before the brief moved in beside it. Both directions are stated because the weather one is no longer theoretical: the render can now produce an empty slot on a bad-payload day, which is the whole point of the change that allowed it. **Hiding is now the whole fix**, where it used to be half of one. Under `space-between` an emptied slot left the survivor ranged against an outer edge and the void simply moved; the `:has()` rules below existed to undo that. With the bar centred, one slot alone centres on its own and there is nothing left to correct. */ #brief-slot:empty, #weather-slot:empty { display: none; } /* 1px, invisible, and the only thing that knows when the bar started sticking. A stuck sticky element never stops intersecting the viewport, so it cannot observe itself; this sits immediately above it in normal flow and leaves the observed area at exactly that scroll position. */ #wx-sentinel { height: 1px; margin-bottom: -1px; } /* Ranged LEFT, inside the locked bar — it was ranged right until 2026-08-11, when the two halves swapped ends. The three blocks keep their own 22px gap and stay a group; `flex-start` is what ranges the group rather than spreading it, and is the reason nothing in here may grow. The gutter moved to `#lockbar` when the bar became centred. While the halves were ranged to the edges each one carried `var(--pad)` on its outward side; centred, that padding is no longer a gutter at all — it is asymmetric space inside a centred group, which pushes the pair off centre by half of it. The bar takes the gutter now (it only matters at narrow widths anyway, as the floor before content touches the screen edge) and these two keep vertical padding only. `justify-content` here is about the group's own rows when it wraps, not about where the group sits. */ .weather { display: flex; /* Top-anchored like the bar itself, so the three blocks start on one line instead of centring against the tallest of them. Centred, `.wx-main` is the tallest (temperature over the four-day strip) and the forecast paragraph began 14px below the temperature it describes — a ragged top edge inside a panel whose neighbour starts flush. `body.wx-stuck .weather` restates `center`, which is right there: the compact bar is one row and has no top to anchor to. */ align-items: flex-start; justify-content: flex-start; gap: 8px 22px; flex-wrap: wrap; padding: 8px 0; } /* ---------- the compact bar ---------- Both forms are built on every render and CSS picks one, rather than the bar being rebuilt on scroll: there is then no state to keep in sync and no work on the scroll path at all. The class lives on because the observer that sets it is watching a sentinel, not the bar. The height is PINNED, not left to content, for the same reason --nav-h is: --stick-h is a promise about how much of the viewport is covered, and a bar that wrapped to two lines on a narrow screen would quietly make it a lie. BOTH halves have to obey it — the brief is clamped to one line by the same class, or the bar is --wx-h on the right and five lines on the left. */ .wx-compact { display: none; } body.wx-stuck #lockbar { min-height: var(--wx-h); height: var(--wx-h); align-items: center; } /* Give back, at the foot of the page, exactly the height the bar just gave up. The bar is `position: sticky` and therefore still in normal flow, so its height is part of the DOCUMENT's height — compacting it doesn't only free viewport, it makes the page ~120px shorter. Without this the browser has to claw back any scroll position that no longer exists, which reads as a lurch backwards mid-gesture, and on a page whose whole overflow was about that much it became a closed loop: the collapse destroyed the scroll that triggered it, the clamp brought the sentinel back into view, the bar reopened. Measured strobing 12 times in 130ms. --wx-collapse is written by syncBarCollapse, which is the only place that can measure it: the bar's full height is unknowable while it is compact. The 0px fallback is the honest answer before the first measurement, not a guess. This is only half the fix and the smaller half — see canCompact in app.js for why a page that CAN'T afford the collapse must not be given a reserve instead, and simply doesn't compact. */ body.wx-stuck { padding-bottom: var(--wx-collapse, 0px); } body.wx-stuck .weather > :not(.wx-compact) { display: none; } /* `justify-content` and `padding` both date from when the weather was the bar's RIGHT-hand panel: it ranged its compact line to the right and carried the page gutter on that side. It is the left panel of a centred pair now, so flex-end pushed the line away from the brief and the padding opened a second gap beside the bar's own 34px one — the compact twin of the leftover the brief had. */ body.wx-stuck .weather { display: flex; justify-content: flex-start; flex-wrap: nowrap; padding: 0; height: 100%; align-items: center; } body.wx-stuck .wx-compact { display: flex; align-items: center; gap: 7px; min-width: 0; overflow: hidden; white-space: nowrap; font-size: 12px; } .wx-c-sep { color: var(--fg-faint); } .wx-c-temp { font-size: 15px; font-weight: 700; font-variant-numeric: tabular-nums; } .wx-c-cond { color: var(--fg-dim); } .wx-c-range { display: flex; gap: 5px; font-size: 11px; font-variant-numeric: tabular-nums; } /* The forecast paragraph is the first thing to go and the hazard the last: on a line this short, what could change your afternoon outranks the prose describing it. Both are still one scroll up. */ .wx-compact .wx-alert { padding: 1px 6px; } .wx-compact .wx-aqi { padding: 1px 6px; } /* Orders start at 1 because the dateline used to be 0 — left as they are rather than renumbered, so the hazards-before-prose intent stays legible against the note above and in git. */ .wx-main { order: 1; display: flex; flex-direction: column; gap: 7px; } .wx-hazards { order: 2; display: flex; flex-direction: column; align-items: flex-start; gap: 5px; } .wx-today { order: 3; flex: 0 1 auto; min-width: 0; } .wx-now { display: flex; align-items: center; gap: 9px; } .wx-temp { font-size: 26px; line-height: 1; color: var(--fg); font-variant-numeric: tabular-nums; } .wx-head { display: flex; align-items: baseline; gap: 9px; } .wx-cond { color: var(--fg-dim); font-size: 12px; } .wx-sub { color: var(--fg-faint); font-size: 10px; } /* Today's high and low, beside the condition. Same two colours the day cells below use for the same two numbers, so the strip reads as one thing continued rather than as a second opinion. */ .wx-range { display: flex; gap: 7px; font-size: 11px; font-variant-numeric: tabular-nums; } .wx-hi { color: var(--fg); } .wx-lo { color: var(--fg-faint); } /* The forecast paragraph, and on Fridays the weekend under it. 62ch is two lines of a typical NWS paragraph and puts the block at about the height of the temperature and the day strip beside it, which is the whole reason for a cap rather than a clamp doing the work: the three blocks should read as one bar, not as a long sentence with things parked at each end. The clamp is a guard against a talkative forecaster and lives on the LINE rather than the block — `-webkit-box` only clamps its own text, so putting it on the container would collapse the two lines into one clamp between them. The full paragraph is on the title attribute either way. */ .wx-today { color: var(--fg-dim); font-size: 11px; max-width: 62ch; display: flex; flex-direction: column; gap: 4px; } .wx-line { display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 3; line-clamp: 3; overflow: hidden; } /* Tomorrow is clamped a line tighter than today. 62ch × 2 is ~124 characters against a typical NWS paragraph of ~117, so this normally shows the whole thing — it is the talkative-forecaster guard, one notch earlier, because the second-order fact should not be able to out-type the first. */ .wx-next { -webkit-line-clamp: 2; line-clamp: 2; } .wx-weekend { -webkit-line-clamp: 2; line-clamp: 2; } /* The day is what this line is scanned for — two conditions run together otherwise, and there's no punctuation strong enough at 11px to separate them. Same brightness the day strip gives its own names. */ .wx-wk-day { color: var(--fg); } .wx-wk-sep { color: var(--fg-faint); } .wx-today-label { color: var(--fg-faint); } /* The AQI chip is the one element allowed to shout — in an Idaho August it's the number most likely to change what someone does with their afternoon. */ .wx-aqi { display: flex; align-items: baseline; gap: 6px; padding: 3px 8px; border: 1px solid currentColor; border-radius: 2px; color: var(--fg-dim); } .wx-aqi-value { font-size: 14px; font-variant-numeric: tabular-nums; } .wx-aqi-label { font-size: 10px; letter-spacing: 0.04em; } .wx-aqi.aqi-good { color: var(--accent-2); } .wx-aqi.aqi-moderate { color: var(--accent); } .wx-aqi.aqi-usg, .wx-aqi.aqi-unhealthy, .wx-aqi.aqi-very-unhealthy, .wx-aqi.aqi-hazardous { color: var(--hot); } /* Past "unhealthy" a coloured outline is too easy to skim past. */ .wx-aqi.aqi-unhealthy, .wx-aqi.aqi-very-unhealthy, .wx-aqi.aqi-hazardous { background: color-mix(in srgb, var(--hot) 14%, transparent); } /* Active NWS alerts. Deliberately built from the same parts as the AQI chip — this bar now has two elements allowed to shout and they had better read as siblings rather than as two people's work. The colours are the themes' existing --accent / --hot rather than new palette entries, which is why adding this needed no work in any of the four themes and can't drift from them. */ .wx-alert { display: flex; align-items: baseline; gap: 6px; padding: 3px 8px; border: 1px solid currentColor; border-radius: 2px; font-size: 11px; color: var(--fg-dim); } .wx-alert-mark { font-size: 11px; line-height: 1; } .wx-alert-event { letter-spacing: 0.02em; } .wx-alert-when { font-size: 10px; opacity: 0.75; } .wx-alert.alert-minor { color: var(--fg-dim); } .wx-alert.alert-moderate { color: var(--accent); } .wx-alert.alert-severe, .wx-alert.alert-extreme { color: var(--hot); } /* Past "advisory" a coloured outline is too easy to skim past — the same escalation the AQI chip makes at "unhealthy", for the same reason. */ .wx-alert.alert-severe, .wx-alert.alert-extreme { background: color-mix(in srgb, var(--hot) 14%, transparent); } .wx-alert.alert-extreme { font-weight: 700; } .wx-alert.alert-more { color: var(--fg-faint); border-style: dashed; } /* The chips link to the NWS point forecast, which lists every active hazard with a link to its full text. Two things the global `a` rules would otherwise do to them: repaint the chip `--link-hover` (the grade colour is the whole signal, so it has to survive the hover) and underline it, which on a pill with a glyph in it reads as damage rather than as a link. The grade colours are all two-class selectors so they already outrank `a:hover` on specificity; the underline needs saying out loud. The affordance is a tint of the chip's OWN colour via currentColor, which means it follows the grade for free. */ a.wx-alert { cursor: pointer; } a.wx-alert:hover, a.wx-alert:focus-visible { text-decoration: none; background: color-mix(in srgb, currentColor 16%, transparent); } .wx-days { display: flex; gap: 14px; } .wx-day { text-align: center; min-width: 34px; font-variant-numeric: tabular-nums; } .wx-day-name { color: var(--fg-faint); font-size: 10px; letter-spacing: 0.06em; } .wx-day-hi { color: var(--fg); font-size: 12px; } .wx-day-lo { color: var(--fg-faint); font-size: 10px; } .wx-day-precip { color: var(--accent-2); font-size: 9px; } /* Narrow screens: the narrative is the first thing to go — the numbers either side of it carry the same information in less room. With it gone there is no elastic member left to push the hazards right, and "ranged right" stops meaning anything on a column 380px wide anyway. They take the top instead, which is where the DOM already has them: an advisory is the one thing in this bar that might change what someone does in the next hour, and it should not be below the four-day strip on the screen with the least of it visible. */ @media (max-width: 700px) { .weather { gap: 10px 12px; } .wx-today { display: none; } .wx-days { gap: 10px; } .wx-hazards { /* First in the bar on a phone — the dateline that used to share this argument lives in the masthead now, so the only question left is whether an advisory outranks a temperature, and it does. */ order: -2; width: 100%; flex-direction: row; flex-wrap: wrap; align-items: flex-start; /* Centred to match the bar. These chips take a full-width row of their own here, so left-aligning them put a flush-left row directly above a centred temperature — two axes in a bar 144px tall. */ justify-content: center; } /* An alert's timing goes the same way, and for the same reason the narrative does: "⚠ Heat Advisory" is the fact, "until Sat 9pm" is the detail. Two alerts with their timings took two extra rows on a 380px screen (measured at +92px against a bar already 164px tall); without them the chips share a line and it costs nothing. Note this is the one place the timing is genuinely gone rather than moved — the full text lives on the title attribute, and a touch device has no hover. Judged worth it: a reader who can see there IS a heat advisory has the part that changes their afternoon. */ .wx-alert-when { display: none; } } /* The brief, at the RIGHT end of the locked bar (it was the left end until 2026-08-11). It has no background or border of its own — it is a half of that bar rather than a band under it, and a filled panel inside a filled bar reads as two bars. The text stays ranged left inside its own block: the BLOCK sits to the right of the weather, which is not the same thing as setting a paragraph rag-left — and centring the bar changed where the block sits, not how the type is set. A centred paragraph here would be six ragged lines of 12px text. */ .brief { margin: 0; padding: 8px 0; display: flex; gap: 12px; align-items: flex-start; min-width: 0; } /* flex: 0 0 auto, or it shrinks. `white-space: nowrap` stops the words wrapping but does nothing about the BOX, and a flex item's default `flex-shrink: 1` squeezed this to about 30px in a 40%-wide bar — "THE BRIEF" clipped to "TH" with the paragraph apparently sitting on top of it. */ .brief-label { flex: 0 0 auto; color: var(--accent-2); font-size: 10px; letter-spacing: 0.12em; white-space: nowrap; padding-top: 2px; } .brief > div { min-width: 0; } /* Clamped, not merely capped. The brief runs 500–900 characters depending on the day, and the locked bar has to be a predictable height whichever it is — otherwise the page under it steps up and down between rebuilds. The full text stays on the title attribute, the same guard the forecast paragraph uses. **Sixteen lines, and it is a guard rather than a measure.** This shipped at six on the reasoning that six is about as tall as the weather beside it, so neither half drove the bar alone — a good rule about the BAR that was never checked against the brief's own budget. `config.brief.maxWords` is 130 and has been since the first commit, so the clamp was set to a little over half of what the model is asked for, and every brief that came in near budget was silently cut mid-sentence — reported 2026-08-11 on a 119-word one, five days after the bar was built. Size it from a measurement, not from the character count, because the brief's box is 40% of the bar capped at 78ch and therefore NARROWER on a smaller screen — which is the direction that needs more lines, not fewer: 131 words / 859 chars @ 2560px wide → 69 ch/line → 13 lines @ 1362px wide → 62 ch/line → 14 lines Twelve was tried first, from an estimate rather than a measurement, and still clipped both. Sixteen covers a full 130-word brief down to about a 1000px viewport with margin for a wordy one. **So there are two clamps, and the reader picks.** Sixteen lines is the right ceiling for "never cut a sentence" and the wrong default for a bar that is locked to the top of every page — measured at 293px, 37% of a 788px laptop. Six is the paragraph's shape and what the bar was designed around. Collapsed is the default and `body.brief-open` is the other one, remembered in localStorage; `.brief-more` only exists when the text actually overflows the collapsed clamp, because a control that opens nothing is worse than none. That is what makes truncation legitimate here. A paragraph cut with no affordance is indistinguishable from a broken one — which is exactly how this was reported — and the same cut with a control beside it is a reader's choice. It only looked fine at six for five days because a short brief fits either number, and because the bar compacted away the moment anyone scrolled. It does not compact on a short page any more (see canCompact in app.js), so a truncated brief now stays truncated on screen. The ceiling and maxWords have to be changed together. If maxWords moves, the 16 moves with it. */ .brief-text { margin: 0; color: var(--fg); font-size: 12px; line-height: 1.45; display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 6; line-clamp: 6; overflow: hidden; } /* `:not(.wx-stuck)` rather than trusting source order. The compact bar's one-line clamp lives above this, but the narrow-screen override lives in a media query BELOW it at equal specificity — so an open brief on a phone would have won and made the compact bar twelve lines tall, which is exactly the promise --wx-h exists to keep. Stating it here means compact wins from wherever the other rule is written. */ body.brief-open:not(.wx-stuck) .brief-text { -webkit-line-clamp: 16; line-clamp: 16; } /* Deliberately a plain