/* ============================================================================ niswosakit — base.css · the structural floor Import order, every page: brand.css → base.css → the page's own CSS • brand.css owns every TOKEN (color, type, the locked logo, the scale). • base.css owns the STRUCTURE every page shares: the reset, the page container, the shared helpers, the responsive defaults. • the page's own CSS overrides only what it must. PLAIN and UNLAYERED on purpose. A prior @layer rebuild silently broke the logo and Support colors (any unlayered rule beats all layered CSS), so this file no longer uses @layer. It stays out of a page's way by convention instead: low-specificity selectors (elements + single classes), loaded BEFORE the page's own CSS, so the page always wins a tie by source order. It is palette-agnostic: it reads only the semantic aliases (--bg, --fg, --focus…) from brand.css, so a page can retheme by redefining --bg / --fg. ============================================================================ */ /* -------------------------------------------------------------------- reset -- */ *, *::before, *::after { box-sizing: border-box; } * { margin: 0; } html { -webkit-text-size-adjust: 100%; /* stop iOS bumping text on rotate */ scroll-behavior: smooth; scroll-padding-top: var(--space-5); /* anchor jumps clear the running head */ } body { background: var(--bg, #0B0B0C); color: var(--fg, #EBEBEB); /* var() fallback: even if brand.css itself fails to load, body still lands on a sans-serif, never Times. Belt-and-suspenders against a missing stylesheet. */ font-family: var(--font-body, system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif); font-size: var(--step-0, 1rem); line-height: 1.58; -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; min-height: 100vh; min-height: 100dvh; /* dvh: honest height on mobile with the URL bar */ } /* the standard single-column page shell. Opt-in via so full-bleed pages (a map, a magazine cover) are never force-padded. */ body.page { padding: var(--pad-block) var(--gutter); display: flex; flex-direction: column; } /* media never overflows its column — the #1 cause of mobile side-scroll */ img, svg, video, canvas { display: block; max-width: 100%; } img { height: auto; } p { text-wrap: pretty; } /* no orphans/rivers where supported */ h1, h2, h3, h4 { text-wrap: balance; } /* even heading line breaks */ a { color: inherit; text-underline-offset: 0.18em; } :focus-visible { outline: 2px solid var(--focus); outline-offset: 3px; border-radius: 4px; } /* respect the OS "reduce motion" switch, everywhere at once */ @media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } *, *::before, *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; scroll-behavior: auto !important; } } /* --------------------------------------------------------------- container -- */ /* the shared page container: one width, centered. Content and chrome align to this so the whole site sits on a consistent measure (per WEB-DESIGN). */ .wrap { width: 100%; max-width: var(--wrap); margin-inline: auto; } /* inside the flex shell, let the main column grow so footers sit at the bottom */ body.page > .wrap { flex: 1 0 auto; display: flex; flex-direction: column; } /* readable prose block: a comfortable measure with vertical rhythm */ .prose { max-width: var(--measure); } .prose > * + * { margin-top: var(--space-3); } /* the forensic mono voice: caps, tracked, light (labels, sources, meta) */ .mono { font-family: var(--font-mono); font-weight: 300; text-transform: uppercase; letter-spacing: .14em; font-size: var(--step--1); color: var(--muted); } /* tabular figures for anything that should line up in a column ($, counts) */ .num { font-family: var(--font-mono); font-variant-numeric: tabular-nums; } /* --------------------------------------------------------------- utilities -- */ .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; } .center { text-align: center; } .stack > * + * { margin-top: var(--space-3); } /* quick vertical rhythm helper */ /* show/hide by breakpoint — for the rare element that only makes sense at one size (a phone-only menu row, a desktop-only aside). */ @media (max-width: 560px) { .hide-phone { display: none !important; } } @media (min-width: 561px) { .only-phone { display: none !important; } }