/* ============================================================================ base.css — reset, body texture, base typography, global a11y/motion rules. Depends on: css/tokens.css (all --tokens below), css/fonts.css (--font-*). Load order: fonts.css, tokens.css, base.css, components.css, views.css, decor.css, (print.css only inside @media print). Assumes from index.html (the orchestrator's markup): - is the direct scroll container (no extra fixed-height wrapper fighting it); real content sits in normal flow above the fixed body::before texture layer (z-index: var(--z-bg)). - #particleCanvas — a full-viewport , fixed position, that js/fx.js draws ambient particles into. This file only gives it a neutral fixed/inset-0 placement + pointer-events:none + the shared --z-bg layer so it sits behind content but above the plain surface color; js/fx.js owns everything drawn inside it. - No other element is required to exist for this file to be correct — base.css never queries an #id that might not be there yet. ============================================================================ */ /* ---------------------------------------------------------------------- */ /* 1. RESET */ /* ---------------------------------------------------------------------- */ *, *::before, *::after { box-sizing: border-box; } html, body, h1, h2, h3, h4, h5, h6, p, figure, blockquote, dl, dd, ul, ol { margin: 0; } ul[class], ol[class] { list-style: none; padding: 0; margin: 0; } html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; scroll-behavior: smooth; color-scheme: dark; } img, picture, svg, video, canvas { display: block; max-width: 100%; } img { height: auto; } button, input, select, textarea { font: inherit; color: inherit; letter-spacing: inherit; } button { background: none; border: none; cursor: pointer; text-align: inherit; } button:disabled { cursor: not-allowed; } a { color: inherit; text-decoration: none; } /* explicit — some downstream utility class (flex/grid on the same node) can otherwise out-specificity the UA default and make [hidden] visibly render */ [hidden] { display: none !important; } /* ---------------------------------------------------------------------- */ /* 2. BODY GROUND + REAL TEXTURE (grain + vignette, 0 network requests) */ /* ---------------------------------------------------------------------- */ html, body { min-height: 100%; } body { position: relative; background: var(--surface-1); color: var(--text-body); font-family: var(--font-sans); font-size: var(--fs-base); line-height: var(--lh-normal); min-height: 100vh; min-height: 100dvh; overflow-x: hidden; -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; } /* the actual grain+vignette: a fixed full-viewport layer sitting under all content (z-index: var(--z-bg)) but over the flat --surface-1 color. Two background-image layers + a matching background-blend-mode list: layer 1 (grain, on top) blends via 'overlay' against layer 2 (vignette) beneath it — that is what lets one pseudo-element carry both a raster-free grain AND a true dark vignette without fighting each other's blend mode. */ body::before { content: ""; position: fixed; inset: 0; z-index: var(--z-bg); pointer-events: none; background-image: var(--noise-grain), radial-gradient(ellipse 90% 80% at 50% 38%, transparent 40%, rgba(0,0,0,0.62) 100%); background-repeat: repeat, no-repeat; background-size: 180px 180px, cover; background-blend-mode: overlay, normal; opacity: 0.85; } /* faint warm gradient wash beneath the grain so the vellum isn't a flat black-brown — reads as candlelight falling from upper-left, scriptorium-style */ body::after { content: ""; position: fixed; inset: 0; z-index: var(--z-bg); pointer-events: none; background: radial-gradient(120% 90% at 15% 0%, color-mix(in oklab, var(--gold-dim) 16%, transparent) 0%, transparent 55%); } #particleCanvas { position: fixed; inset: 0; z-index: var(--z-bg); pointer-events: none; width: 100%; height: 100%; touch-action: none; } /* everything else authored (header, nav, main, modals...) rides above the background stack by simply being later in DOM flow + z-index: var(--z-app) applied by views.css/components.css on the actual layout containers. */ /* ---------------------------------------------------------------------- */ /* 3. TYPOGRAPHY BASE */ /* ---------------------------------------------------------------------- */ h1, h2, h3, h4, h5, h6 { font-family: var(--font-cinzel); color: var(--text-heading); font-weight: 700; line-height: var(--lh-tight); letter-spacing: var(--ls-wide); } p { color: var(--text-body); } small, .text-muted { color: var(--text-muted); } strong, b { color: var(--text-heading); font-weight: 700; } em, i { font-style: italic; } a { color: var(--text-accent); text-underline-offset: 3px; } a:hover, a:focus-visible { color: var(--gold-hi); text-decoration: underline; } code, kbd { font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; background: var(--surface-sunken); border: var(--border-hairline) solid var(--gold-dim); border-radius: var(--radius-sm); padding: 0.1em 0.4em; font-size: 0.9em; } blockquote { margin: var(--space-4) 0; padding: var(--space-3) var(--space-4); border-left: var(--border-thick) solid var(--gold-leaf); color: var(--text-muted); font-style: italic; } /* ---------------------------------------------------------------------- */ /* 3b. ICONS + NATIVE FORM CONTROLS */ /* A global fallback so any sizes sanely wherever it */ /* lands (AW.Icons.html() output is dropped into many different */ /* contexts — toasts, modal headers, plain prose); a more specific */ /* selector in components.css/views.css (.btn .icon, .nav-tab .icon…) */ /* still wins by specificity when one exists. Native checkbox/radio/ */ /* range inputs (settings.js uses plain