/* Reset + base typography + layout primitives */ *, *::before, *::after { box-sizing: border-box; } html, body { margin: 0; padding: 0; } html { -webkit-text-size-adjust: 100%; } body { font-family: var(--font-body); font-size: var(--text-body-size); line-height: var(--text-body-line); color: var(--color-text); background: var(--color-cream); min-width: 320px; } /* News articles read as a document rather than a band of sections, so they sit on white. Set on rather than on .article so a short article does not leave a strip of cream between it and the footer. */ body.page--article { background: var(--color-white); } img { max-width: 100%; display: block; } /* Keep the first viewport from collapsing before content arrives. */ #main-content { min-height: 80vh; } /* Both landmarks below ship empty and are filled by chrome.js, and each needed a different fix to stop it costing layout shift. The header sits ABOVE main, so it pushes the whole page down when it appears. The nav bar measures a fixed 74px at every breakpoint, so reserving exactly that makes the first paint's layout match the final one. Re-measure if the bar's padding, logo size or font changes. The footer is LAST, so nothing below it can be pushed — but it used to paint at the bottom of an empty 80vh main and then travel the full height of the real content, which was the entire 0.1 CLS the 2026-07 review measured. A reserve cannot fix that (content height is unknown until it renders), so instead the empty footer is simply not painted. :empty stops matching the moment chrome.js fills it, and it then appears in its final position. Keep the shells' footer markup free of whitespace or :empty will not match. */ #site-header { min-height: 74px; } #site-footer:empty { display: none; } h1, h2, h3, h4 { font-family: var(--font-heading); font-weight: 700; color: var(--color-text); margin: 0 0 var(--space-4); } h1 { font-size: var(--text-hero-size-mobile); line-height: var(--text-hero-line-mobile); } @media (min-width: 960px) { h1 { font-size: var(--text-hero-size); line-height: var(--text-hero-line); } } h2 { font-size: var(--text-h2-size); line-height: var(--text-h2-line); } h3 { font-size: var(--text-h3-size); line-height: var(--text-h3-line); } p { margin: 0 0 var(--space-4); } ul, ol { margin: 0 0 var(--space-4); padding-left: var(--space-5); } a { color: inherit; } button { font-family: var(--font-body); } .container { max-width: var(--container-max-width); margin: 0 auto; padding-left: var(--container-pad-mobile); padding-right: var(--container-pad-mobile); } @media (min-width: 960px) { .container { padding-left: var(--container-pad-desktop); padding-right: var(--container-pad-desktop); } } /* Skip link */ .skip-link { position: absolute; left: var(--space-3); top: -80px; background: var(--color-white); color: var(--color-text); padding: var(--space-3) var(--space-4); border-radius: var(--radius-sm); z-index: 1000; text-decoration: none; font-weight: 700; box-shadow: var(--shadow-card); transition: top 0.15s ease; } .skip-link:focus { top: var(--space-3); } /* Focus ring — double ring, used everywhere interactive */ a:focus-visible, button:focus-visible, input:focus-visible, select:focus-visible, textarea:focus-visible, [tabindex]:focus-visible { outline: 2px solid var(--color-focus-outer); outline-offset: 2px; box-shadow: 0 0 0 4px var(--color-focus-inner); border-radius: var(--radius-sm); } @media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation-duration: 0.001ms !important; animation-iteration-count: 1 !important; transition-duration: 0.001ms !important; scroll-behavior: auto !important; } } /* Buttons */ .btn { display: inline-flex; align-items: center; justify-content: center; gap: var(--space-2); font-family: var(--font-body); font-size: var(--text-body-size); font-weight: 700; text-decoration: none; border-radius: var(--radius-pill); padding: var(--space-3) var(--space-5); border: none; cursor: pointer; transition: background-color 0.15s ease; line-height: 1.2; } /* Primary = the rust CTA from the mockup ("Hear Our Latest Concert"). White on --color-rust is 4.68:1; the brighter mockup rust is reserved for display type, so never swap it in here. */ .btn--primary { background: var(--color-rust); color: var(--color-white); } .btn--primary:hover { background: var(--color-rust-hover); } /* Secondary sits on both cream sections and navy bands, so it carries its own border rather than relying on contrast with the surface behind it. */ .btn--secondary { background: var(--color-white); color: var(--color-navy); box-shadow: inset 0 0 0 2px var(--color-navy); } .btn--secondary:hover { background: var(--color-slate-pale); } .btn:disabled, .btn[aria-disabled="true"] { opacity: 0.5; cursor: not-allowed; } /* Cards */ .card { background: var(--color-white); border: 1px solid var(--color-border); border-radius: var(--radius-md); box-shadow: var(--shadow-card); padding: var(--space-4); } /* Visually-hidden utility (for sr-only text) */ .visually-hidden { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0; } /* Generic loading / error / status text inside

*/ .page-status { padding: var(--space-8) var(--space-4); text-align: center; color: var(--color-text-muted); } .page-status--error { color: var(--color-error); }