/* chrome.css — styles for the site chrome shared by EVERY surface: the full-screen menu ([data-menu]), the desktop drawer ([data-drawer]), and the footer ([data-footer-cta]/[data-footer-meta]). Loaded by both shells (see fragments.mjs) so there is one copy. The masthead is NOT here — its markup + CSS differ between the shells (index uses
, the article wraps it in a .stack with the reading-morph header), so it stays per-shell. Base geometry for [data-menu], [data-drawer], [data-footer-cta], [data-footer-meta] lives inline on the markup (see tools/build/chrome.mjs); this file holds the responsive tweaks + the desktop drawer's full styling. */ /* ---- --tileborder ---- The drawer draws every one of its dividers with this token, and it was defined only in index.css, on #site-root. Article pages have no #site-root, so on an article the var() was invalid, the whole border-top declaration was dropped, and the drawer opened with no rules at all — the divider between the Latest column and the nav, the lines between entries, the rules above the social row and the theme toggle. Nothing failed; the lines were simply absent. It is a deliberately stronger line than --border, which is why it cannot just fall back to it. Defined here at :root because chrome.css is what consumes it; index.css's #site-root block is more specific, so the homepage keeps its own values and the [data-tilestroke="prev"] variant still works. */ :root { --tileborder: #CCCCCC; } :root[data-theme="dark"] { --tileborder: rgba(255,255,255,0.24); } :root[data-theme="paper"] { --tileborder: #C6B591; } /* ---- selection ---- The site never defined one, so every selection anywhere — body copy, a headline, text inside the search field — painted in the browser's default blue. That blue belongs to no palette on this page. A wash of the accent at low alpha reads as ours and still clears the AA contrast bar against the text it sits behind, in either theme. Kept out of the per-shell sheets so articles and index pages cannot drift apart on it. */ ::selection { background: rgba(227, 66, 52, 0.20); color: var(--fg); } :root[data-theme="dark"] ::selection { background: rgba(227, 66, 52, 0.38); color: #FFFFFF; } /* ---- search fields ---- input[type=search] keeps its native appearance in Chromium and Safari, which adds a clear button drawn in the OS accent colour — another blue we do not own, sitting inside a field we drew ourselves. The field is styled end to end here; Escape still clears it. */ input[type="search"] { appearance: none; -webkit-appearance: none; } input[type="search"]::-webkit-search-cancel-button, input[type="search"]::-webkit-search-decoration { -webkit-appearance: none; appearance: none; display: none; } /* ---- autofill ---- Picking a remembered query from the browser's own dropdown does not just put text in the field: Chrome repaints it. A pale blue ground, its own glyph colour and its own face — none of them ours, and all of it landing on the one control the reader types their own words into. background-color cannot take it back; the UA style outranks an author one. So the ground is masked with an inset shadow the width of any field, the glyph colour goes through -webkit-text-fill-color (which autofill does honour), and the family is restated because autofill drops to a UA default. The 5000s transition is the known trick, not an accident: Chrome applies the autofill background through a transition, so giving ours one that effectively never arrives keeps our shadow on top. */ input[type="search"]:-webkit-autofill, input[type="search"]:-webkit-autofill:hover, input[type="search"]:-webkit-autofill:focus, input[type="search"]:-webkit-autofill:active { -webkit-text-fill-color: var(--fg); -webkit-box-shadow: 0 0 0 100px var(--bg) inset; box-shadow: 0 0 0 100px var(--bg) inset; caret-color: var(--fg); font-family: 'Newsreader', Georgia, serif; transition: background-color 5000s ease-in-out 0s; } /* ---- search fields, all five ---- The drawer, the full-screen menu, both header bars and /search/. Written once against [data-search-form] rather than five times against five layouts, because the behaviour is the field's, not the panel's. The magnifier is BLACK and goes accent once there is a query. It used to be accent unconditionally, which spends the colour on nothing and leaves it saying nothing when it matters. Keyed to content rather than focus: an empty field you happen to be in is not a state worth marking, and the signal earns its keep exactly when you have looked AWAY with something typed and unsubmitted — the moment a focus-keyed one would have gone out. :has(), because /search/ puts its icon BEFORE the input while the others put it after; a sibling selector can only reach one of those. Where :has() is missing the icon simply stays black, which is the old behaviour and not a broken one. The placeholder clears when you focus an untouched field. Left up, it sits at exactly the x the caret does, so the bar lands against the S of "Search" with nothing between them. It comes back once you have typed something and deleted it again: an emptied field otherwise reads as broken rather than empty, and by then the caret is established — knowing where you are is what the blank was buying. The flag is set on the first keystroke in chrome.js; :placeholder-shown cannot tell the two blanks apart, and :user-valid, which would have said "touched" here, is only applied by Chrome to inputs carrying an actual constraint. With no script the placeholder stays hidden while focused, as it did before. */ [data-search-form] input:focus::placeholder { color: transparent; } [data-search-form][data-search-touched] input:focus::placeholder { color: var(--faded); } [data-search-form] [type="submit"], [data-search-form] .search-lead-icon { color: var(--fg); transition: color 0.16s ease; } [data-search-form]:has(input[type="search"]:not(:placeholder-shown)) [type="submit"], [data-search-form]:has(input[type="search"]:not(:placeholder-shown)) .search-lead-icon { color: var(--accent); } /* Clear. Shown only once there is something to clear — :placeholder-shown is true exactly while the field is empty, so it keeps in step with no script. type="reset" empties the form, and every one of these forms is a single field. --faded so the accent stays with the primary action; tabindex -1 keeps it out of the path from the field to Submit, where Escape already clears. */ [data-search-form] [data-search-clear] { display: inline-flex; align-items: center; flex: none; padding: 4px; margin: 0; appearance: none; background: none; border: none; cursor: pointer; color: var(--faded); transition: color 0.16s ease; } [data-search-form] input[type="search"]:placeholder-shown ~ [data-search-clear] { display: none; } @media (hover: hover) { [data-search-form] [data-search-clear]:hover { color: var(--fg); } } [data-search-form] [data-search-clear]:active { color: var(--fg); } /* ---- top nav ---- Three items: Search, Subscribe, About. Archive and Topics used to sit here too, and the four-item set collided with the centred wordmark below 1440 — Archive was hidden under a breakpoint to buy room. Three items clear the wordmark at every width, so that breakpoint is gone, and both routes are still one click away in the desktop drawer. Subscribe carries no box. The bordered call-to-action was the convention for a nav whose job was conversion; this nav's job is navigation. It is "Subscribe" and not "Newsletter" because the drawer and the footer both already say Subscribe, and the page it opens is /subscribe/ titled Subscribe. One destination, one name, in all three places. */ @media (hover: hover) { [data-site] .topnav-link:hover { color: var(--accent) !important; } } [data-site] .topnav-link:active { color: var(--accent) !important; } [data-site] .topnav-link { transition: color 0.18s ease; } /* Optical alignment with the wordmark, and the 40px before the hamburger. The nav's ink sat 2px BELOW the wordmark's ink centre. That is not the nav's fault: the wordmark carries line-height:1 while its ink measures 55px at 45px type, so its ink overflows its own line box and its optical centre is not its box centre. The two are centred independently by the header, so the discrepancy shows up as a 2px drop on the nav. line-height CANNOT fix it — the ink stays centred in whatever line box it is given, so changing the nav's line-height moves box and ink together. Measured: normal -> 2.0, 1.1 -> 1.95, 1.0 -> 2.0, 0.9 -> 1.05. Hence a measured nudge. Re-measure if the wordmark's size or line-height changes; this number belongs to the wordmark's metrics, not the nav's. inline-block because a transform does not apply to a non-replaced inline box, which is what an is by default. SCOPED TO header#masthead, i.e. the index-family shell, because the article masthead is a different structure (its links sit inside