/* ─── Typography ────────────────────────────────────────────────────── */
/* .hzo-display is the one step above h1 — the top-of-page statement. Its size
   is now the --fs-display token (Wave S); the inline fallback below is the
   historical literal, so a checkout without the token renders identically and
   the computed value is unchanged either way. Tokenizing it is what lets an
   archetype, the design widget, or a client's custom.css retune the display
   step without re-declaring this whole rule. */
.hzo-display {
    font-family: var(--font-heading);
    font-weight: var(--font-weight-heading, 700);
    font-size: calc(var(--fs-display, clamp(2.25rem, 5vw, 5rem)) * var(--hzo-type-scale, 1) * var(--hzo-heading-scale, 1));
    line-height: 1.05;
    letter-spacing: var(--heading-letter-spacing, -0.015em);
    text-transform: var(--heading-transform, none);
    color: var(--text-heading);
    margin: 0 0 var(--space-lg);
}
.hzo-subtitle {
    font-family: var(--font-body);
    font-size: 1.25rem;
    font-weight: var(--fw-regular, 400);
    line-height: var(--lh-normal);
    color: var(--text-muted);
    margin: 0 0 var(--space-xl);
}
.hzo-lead {
    font-size: 1.25rem;
    line-height: var(--lh-normal);
    color: var(--text-body);
    margin: 0 0 var(--space-lg);
}
.hzo-small {
    font-size: 0.875rem;
    color: var(--text-muted);
    margin: 0 0 var(--space-md);
}
.hzo-eyebrow {
    display: inline-block;
    font-family: var(--font-body);
    font-size: var(--eyebrow-size, 15px);
    font-weight: var(--fw-semibold, 600);
    text-transform: uppercase;
    letter-spacing: var(--eyebrow-tracking, 0.7px);
    color: var(--accent-text);
    margin: 0 0 var(--space-md);
}
/* SEO pattern: eyebrows ARE the heading tags (h1-h6) for keyword placement.
   The class must fully override heading element defaults AND any theme.json
   heading styles. !important on every property a theme could set on
   headings (font-family, font-size, font-weight, color, line-height,
   text-transform, letter-spacing, margin). See quality-rules.md §6.2. */
h1.hzo-eyebrow, h2.hzo-eyebrow, h3.hzo-eyebrow,
h4.hzo-eyebrow, h5.hzo-eyebrow, h6.hzo-eyebrow {
    display: inline-block !important;
    font-family: var(--font-body) !important;
    font-size: var(--eyebrow-size, 15px) !important;
    font-weight: var(--fw-semibold, 600) !important;
    line-height: 1.4 !important;
    text-transform: uppercase !important;
    letter-spacing: var(--eyebrow-tracking, 0.7px) !important;
    color: var(--accent-text) !important;
    margin: 0 0 var(--space-md) !important;
}
.hzo-meta {
    font-family: var(--font-body);
    font-size: var(--fs-75);
    font-weight: var(--fw-medium, 500);
    color: var(--text-muted);
    line-height: var(--lh-normal);
}
.hzo-caption {
    font-family: var(--font-body);
    font-size: var(--fs-75);
    color: var(--text-muted);
    font-style: italic;
    line-height: var(--lh-normal);
    margin: var(--space-sm) 0 0;
}