/* * Pitru Theme v2 — base.css * * Typography + body surface. Reads every colour/font/radius from * tokens.css — NO hardcoded values. If a value needs to change * globally, it changes in tokens.css and cascades everywhere. */ /* Defensive: decorative `position: absolute` descendants (e.g. * .pps-home-hero__backdrop--top with right: -120px) can extend past the * viewport edge even when their parent has `overflow: hidden`, because * scrollWidth tracks the abs-positioned box in the global coord system. * `overflow-x: clip` prevents a horizontal scrollbar without establishing * a new scroll context. Applied to BOTH html and body — browsers measure * `documentElement.scrollWidth`, which tracks , not . * Caught in C.20 browser-verify wave. */ html, body { overflow-x: clip; } body { font-family: var(--font-body); color: var(--ink); background: var(--ivory); font-size: 17px; line-height: 1.55; -webkit-font-smoothing: antialiased; } h1, h2, h3, h4, h5, h6 { font-family: var(--font-display); font-weight: 500; letter-spacing: 0; line-height: 1.1; color: var(--ink); } p { font-family: var(--font-body); } em, i { font-family: var(--font-display); font-style: italic; color: var(--gold-deep); } /* Mono "eyebrow" label — used above titles, in footer rows, on counts. */ .eyebrow, .mono { font-family: var(--font-mono); font-size: 11px; letter-spacing: 0.18em; text-transform: uppercase; color: var(--stone); } .eyebrow { color: var(--ink-soft); } /* Screen-reader-only helper (for labels that are visually hidden). */ .pps-sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0; } /* Selection colour that matches the palette. */ ::selection { background: var(--gold-soft); color: var(--ink); } /* Focus ring — visible, brand-on-brand. */ :where(a, button, input, select, textarea, [tabindex]):focus-visible { outline: 2px solid var(--gold-deep); outline-offset: 2px; }