/* ============================================================
   VOZIQA V2 — Base (typography, a11y, primitives)
   Reset + base typography + a11y for the design system.
   ============================================================ */

/* Reset — these pages don't load a legacy reset, so set the essentials here. */
*, *::before, *::after { box-sizing: border-box; }
html, body { margin: 0; padding: 0; }
body { overflow-x: clip; }   /* belt-and-braces against stray horizontal scroll */
img, picture, svg, video { max-width: 100%; }

body {
    background: var(--vz-ivory);
    color: var(--vz-ink);
    font-family: var(--font-body);
    font-size: var(--fs-base);
    line-height: 1.6;
    -webkit-font-smoothing: antialiased;
    text-rendering: optimizeLegibility;
}

/* ─── Headings ─── */
h1, h2, h3,
.display, .title {
    font-family: var(--font-heading);
    color: var(--vz-plum);
    font-weight: var(--fw-regular);
    line-height: var(--vz-lh-display);
    letter-spacing: var(--vz-tracking-display);
}
.display {
    font-size: var(--vz-fs-5xl);
}
h1 { font-size: var(--fs-3xl); }
h2 { font-size: var(--fs-2xl); }
h3 { font-size: var(--fs-xl); }

/* Same-family italic emphasis — the only accent inside a headline */
.display em, h1 em, h2 em {
    font-style: italic;
    color: var(--vz-gold);
    line-height: 1.1;             /* italic descender clearance */
}

p { max-width: 65ch; }
a { color: inherit; text-decoration: none; }

/* ─── Utility label (the disciplined eyebrow) ─── */
.label {
    display: inline-block;
    font-family: var(--font-body);
    font-size: var(--fs-xs);
    font-weight: var(--fw-medium);
    text-transform: uppercase;
    letter-spacing: var(--vz-tracking-label);
    color: var(--vz-ink-muted);
}
.label--gold { color: var(--vz-gold-hover); }
.label--on-plum { color: var(--vz-gold-soft); }

/* Numbers read as data */
.num { font-variant-numeric: tabular-nums; }

/* ─── Accessibility ─── */
:focus-visible {
    outline: 2px solid var(--vz-gold);
    outline-offset: 2px;
}
.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;
}

/* ─── The Gold Thread (draws left-to-right) ─── */
.thread-rule {
    display: inline-block;
    width: var(--vz-thread-rule);
    height: var(--vz-thread);
    background: var(--vz-thread-color);
    vertical-align: middle;
    transform-origin: left center;
    animation: vz-thread-draw var(--vz-dur-thread) var(--vz-ease-line) both;
}

@keyframes vz-thread-draw {
    from { transform: scaleX(0); }
    to   { transform: scaleX(1); }
}

/* Vertical stitch between major sections (replaces diamond dividers) */
.thread-divider {
    display: block;
    width: var(--vz-thread);
    height: var(--sp-7);
    margin: 0 auto;
    background: linear-gradient(var(--vz-gold), transparent);
    opacity: 0.55;
}