/* ========================================================================== Base — document, typography, links, forms. Global styles stay limited to what 08 §8.3 allows. ========================================================================== */ html { /* scroll-padding keeps anchor targets clear of the sticky header (07 §8.2) */ scroll-padding-top: calc(var(--header-height, 4.5rem) + var(--space-4)); /* Safety net added 2026-08-04 AFTER fixing the real containment gaps in .portfolio-carousel and .review-collection-wrap — not a substitute for them. , not , is the element whose scrollWidth actually drives page-wide horizontal scroll on a real device; body's own overflow-x:hidden below propagates to the viewport in the common case, but doesn't stop a future un-contained wide descendant from inflating 's own scrollWidth the same way this bug did. clip (not hidden) since this is a hard backstop, never meant to be scrolled into. */ overflow-x: clip; } body { margin: 0; background-color: var(--surface-base); color: var(--text-body); font-family: var(--font-body); font-size: var(--text-base); font-weight: 400; line-height: var(--leading-body); font-synthesis-weight: none; -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; /* Never let a wide element scroll the whole page sideways (AGENTS §13) */ overflow-x: hidden; } /* --- Headings ------------------------------------------------------------- Only the visual scale lives here. Semantic level and visual size are independent (07 §7.4): use the .h-* classes to size, the tag to structure. -------------------------------------------------------------------------- */ .h-display, .h-1, .h-2, .h-3, .h-4 { font-family: var(--font-display); color: var(--text-strong); margin: 0; } .h-display { font-size: var(--text-display); line-height: var(--leading-display); font-weight: 700; letter-spacing: -0.015em; } .h-1 { font-size: var(--text-h1); line-height: var(--leading-h1); font-weight: 700; letter-spacing: -0.012em; } .h-2 { font-size: var(--text-h2); line-height: var(--leading-h2); font-weight: 600; letter-spacing: -0.008em; } .h-3 { font-size: var(--text-h3); line-height: var(--leading-h3); font-weight: 600; } .h-4 { font-size: var(--text-h4); line-height: var(--leading-h3); font-weight: 600; } /* Unclassed headings still need a sane default so a missing class never renders as body copy. */ h1 { font: 700 var(--text-h1) / var(--leading-h1) var(--font-display); color: var(--text-strong); } h2 { font: 600 var(--text-h2) / var(--leading-h2) var(--font-display); color: var(--text-strong); } h3 { font: 600 var(--text-h3) / var(--leading-h3) var(--font-display); color: var(--text-strong); } h4 { font: 600 var(--text-h4) / var(--leading-h3) var(--font-display); color: var(--text-strong); } /* --- Eyebrow — 03 §6.9, 07 §7.3 ------------------------------------------- */ .eyebrow { display: block; font-family: var(--font-body); font-size: var(--text-sm); font-weight: 500; line-height: var(--leading-tight); letter-spacing: var(--tracking-eyebrow); text-transform: uppercase; color: var(--text-muted); } /* --- Links — 03 §15.3: affordance must not rely on colour alone ------------ */ a { color: var(--text-accent); text-decoration-thickness: 1px; text-underline-offset: 0.18em; } a:hover { color: var(--color-cta-hover); text-decoration-thickness: 2px; } /* --- Focus — 03 §19.2. Always paired with an offset. ---------------------- */ :focus-visible { outline: var(--focus-ring-width) solid var(--focus-ring); outline-offset: var(--focus-ring-offset); border-radius: var(--radius-sm); } .surface-dark :focus-visible { outline-color: var(--focus-ring-on-dark); } /* --- Text helpers --------------------------------------------------------- */ .text-muted { color: var(--text-muted); } .lead { font-size: var(--text-md); color: var(--text-muted); max-width: var(--measure-emphasis); } /* --- Base form controls — 03 §16.1 ---------------------------------------- */ label { display: block; font-size: var(--text-sm); font-weight: 500; color: var(--text-strong); } input, textarea, select { width: 100%; /* 16px minimum on mobile, otherwise iOS zooms the viewport on focus */ font-size: var(--text-base); padding: var(--space-3) var(--space-4); min-height: var(--touch-target); background-color: var(--surface-base); color: var(--text-body); border: 1px solid var(--border-subtle); border-radius: var(--radius-control); transition: border-color var(--transition-fast); } input:hover, textarea:hover, select:hover { border-color: var(--border-active); } textarea { resize: vertical; } /* --- Figures and captions — 03 §11.6 -------------------------------------- */ figure { margin: 0; } figcaption { margin-top: var(--space-3); font-size: var(--text-sm); line-height: var(--leading-tight); color: var(--text-muted); } /* --- Quotes — 07 §11.12 --------------------------------------------------- */ blockquote { margin: 0; font-family: var(--font-display); font-size: var(--text-h3); line-height: var(--leading-h3); color: var(--text-strong); max-width: var(--measure-emphasis); } /* --- Definition lists, used for technical metadata — 07 §11.11 ------------- */ dl { margin: 0; } dt { font-size: var(--text-sm); font-weight: 500; color: var(--text-muted); } dd { margin: 0 0 var(--space-4); color: var(--text-body); } /* --- Horizontal rule — 03 §14.1 ------------------------------------------- */ hr { border: 0; border-top: 1px solid var(--border-subtle); margin: var(--space-7) 0; } /* --- Selection ------------------------------------------------------------ */ ::selection { background-color: var(--color-papel-oscuro); color: var(--color-tinta); }