/* ────────────────────────────────────────────────────────────── TicketHub base — chrome shared by every public page. Merged from the old base-dark.css (595 lines) + base-light.css (512), which were ~97% identical and differed almost only in their :root block. Colour now comes from tokens.css via data-surface, so a single page can run a black hero into a concrete band without swapping stylesheets. Load order: tokens.css -> fonts.css -> components.css -> base.css ────────────────────────────────────────────────────────────── */ *, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; } html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; } body { font-family: var(--font-ui); background-color: var(--bg); color: var(--text); min-height: 100vh; display: flex; flex-direction: column; line-height: 1.6; overflow-x: clip; -webkit-font-smoothing: antialiased; } /* min-width:0 matters: body is a flex column, so main defaults to min-width:auto and refuses to shrink below its widest content. A horizontal scroller inside it (the browse filter row is overflow-x:auto and nowrap on mobile) would otherwise stretch main past the viewport and drag every sibling — including the events grid — wide with it. */ main { flex: 1; min-width: 0; } h1, h2, h3, h4 { color: var(--text); } img { max-width: 100%; } :focus-visible { outline: 2px solid var(--red); outline-offset: 2px; } .page-wrap { max-width: 1100px; margin: 0 auto; padding: 80px 20px; } @media (max-width: 640px) { .page-wrap { padding: 70px 16px 80px; } } /* ══════════════════════════════════════════════════════════════ Navigation ══════════════════════════════════════════════════════════════ */ /* Nav colour as one token set, switched by the data-nav attribute that base.html writes from the {% block nav_theme %} block. The light defaults sit on :root, not on .site-nav, because two pieces of nav render OUTSIDE