/* Shared site chrome — makes the wordmark + header identical across every page,
   matching the homepage canonical. Loaded AFTER each platform stylesheet so it
   overrides the per-platform .brand styling. */

/* Brand wordmark: Fraunces serif, muted ".com" (the homepage logo) */
.brand { font-family: "Fraunces", var(--serif); font-weight: 500; font-size: 1.4rem; letter-spacing: -0.02em; }
.brand i { font-style: normal; font-weight: 400; color: var(--ink-soft); font-size: 0.64em; letter-spacing: 0; }
.on-dark .brand { color: var(--on-dark); }
.on-dark .brand i { color: var(--on-dark-soft); }
.site-footer .brand { color: #fff; font-size: 1.6rem; }
.site-footer .brand i { color: var(--on-dark-soft); }

/* == CANONICAL SITE-HEADER LAYOUT START ==
   Managed by scripts/sync_header_css.py. SOURCE = web/public/assets/chrome.css; this
   block is kept byte-identical there and in rebuild/assets/style.css, and verified
   against the homepage inline copy. Edit the source, not the copy.
   The selector groups BOTH wrapper classes (.bar = static pages + homepage; .navbar =
   SiteHeader.astro / platform generators) so the header can never collapse again
   regardless of which class a page uses. Enforced on every build via sync-to-rebuild.mjs. */
.site-header .bar, .site-header .navbar { max-width: var(--wide); margin-inline: auto; padding: 9px 24px; display: flex; align-items: center; justify-content: space-between; gap: 20px; min-height: 60px; }
@media (max-width: 640px) { .site-header .bar, .site-header .navbar { position: relative; flex-wrap: wrap; } }
/* == CANONICAL SITE-HEADER LAYOUT END == */

/* Section headings stay on a single line site-wide (per request). On narrow
   screens they fall back to balanced wrapping so long headings never overflow. */
h2 { text-wrap: nowrap; }
@media (max-width: 640px) { h2 { text-wrap: balance; } }
/* Article and hub headings are long-form: they must wrap (balanced) instead of
   overflowing the column. Overrides the site-wide single-line rule above (2026-07-11). */
.read h2, .art-sec h2, main h2.sec, .tldr h2, .takeaways h2 { text-wrap: balance; white-space: normal; max-width: none; }
/* Article section headings sized so a normal heading fits on one line of the column */
.read h2.sec { font-size: 1.45rem; }