/* ============================================================ Lectio v3 — Base Styles Modern reset, typography scale, utility classes. Depends on tokens.css being loaded first. ============================================================ */ /* ----- Reset ------------------------------------------------ */ *, *::before, *::after { box-sizing: border-box; } body, h1, h2, h3, h4, h5, h6, p, figure, blockquote, dl, dd { margin: 0; } ul[role="list"], ol[role="list"] { list-style: none; } img, picture, video, canvas, svg { max-width: 100%; display: block; } input, button, textarea, select { font: inherit; } /* ----- Document -------------------------------------------- */ html, body { height: 100%; } html { font-size: 16px; -webkit-text-size-adjust: 100%; } body { background: var(--canvas); color: var(--ink); font-family: var(--font-body); line-height: 1.6; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; text-rendering: optimizeLegibility; } /* ----- Typography Scale ------------------------------------ */ .h-hero { font-family: var(--font-display); font-size: 64px; font-weight: 500; line-height: 1.05; } .h-screen { font-family: var(--font-display); font-size: 40px; font-weight: 500; line-height: 1.1; } .h-section { font-family: var(--font-display); font-size: 24px; font-weight: 500; line-height: 1.3; } .body { font-family: var(--font-body); font-size: 16px; line-height: 1.65; } .mono-label { font-family: var(--font-mono); font-size: 10px; font-weight: 500; text-transform: uppercase; letter-spacing: 1.8px; } .microcopy { font-family: var(--font-body); font-size: 13px; line-height: 1.5; color: var(--ink-muted); } /* ----- Font Utility Classes -------------------------------- */ .serif-display { font-family: var(--font-display); } .serif-body { font-family: var(--font-body); } .ui { font-family: var(--font-ui); } .mono { font-family: var(--font-mono); } /* ----- Color Utility Classes ------------------------------- */ .ink { color: var(--ink); } .ink-muted { color: var(--ink-muted); } .ink-faint { color: var(--ink-faint); } .accent { color: var(--accent); } /* ----- Links ----------------------------------------------- */ a { color: var(--ink); text-decoration: none; transition: color 0.15s ease; } a:hover { color: var(--accent); } /* ----- Texture Layer --------------------------------------- */ /* Place as first child of . Renders a paper-grain SVG noise overlay that respects the --texture-opacity token. Warm theme: visible (0.07). Minimal/Dark: hidden (0). */ .texture-layer { position: fixed; inset: 0; pointer-events: none; mix-blend-mode: multiply; opacity: var(--texture-opacity); z-index: 0; background-image: url("data:image/svg+xml;utf8,"); } /* ----- App Root -------------------------------------------- */ /* Wraps all page content to sit above the fixed texture layer. */ .app-root { position: relative; z-index: 1; }