/* Hierarchy comes from scale and whitespace, not weight. Headings are regular weight. */

h1,
h2,
h3,
h4 {
    font-weight: 400;
    text-wrap: balance;
}

.display,
.heading-lg,
.heading,
.subheading--serif,
.statement {
    font-family: var(--font-display);
}

.display {
    font-size: var(--text-display);
    line-height: var(--leading-display);
    letter-spacing: var(--tracking-display);
}

.heading-lg {
    font-size: var(--text-heading-lg);
    line-height: var(--leading-heading);
    letter-spacing: var(--tracking-display);
}

.heading {
    font-size: var(--text-heading);
    line-height: var(--leading-heading);
    letter-spacing: var(--tracking-heading);
}

.subheading,
.subheading--serif {
    font-size: var(--text-subheading);
    line-height: var(--leading-subheading);
}

/* Large editorial statement (mission). */
.statement {
    font-size: clamp(1.75rem, 3.2vw, 3rem);
    line-height: 1.18;
    letter-spacing: var(--tracking-heading);
    text-wrap: balance;
}

:root:lang(fa) .statement {
    line-height: 1.6;
}

.lead {
    font-size: var(--text-lead);
    line-height: var(--leading-lead);
    max-inline-size: 42em;
}

/* Eyebrow: small tracked label with a seal-red rule, like a pen stroke. */
.eyebrow {
    display: flex;
    align-items: center;
    gap: 14px;
    font-size: var(--text-label);
    line-height: var(--leading-caption);
    letter-spacing: var(--tracking-eyebrow);
    text-transform: var(--eyebrow-transform);
    color: var(--color-graphite);
}

.eyebrow::before {
    content: "";
    flex: 0 0 var(--rule-length);
    block-size: 1px;
    background: var(--color-accent);
}

/* Hero variant: the rule follows the label. */
.eyebrow--trailing::before {
    order: 1;
}

/* Plain labels (footer headings, card categories, form context) have no rule. */
.eyebrow--plain::before,
.site-footer .eyebrow::before,
.card .eyebrow::before,
.data-list .eyebrow::before {
    display: none;
}

.section--ink .eyebrow,
.site-footer .eyebrow {
    color: var(--color-stone);
}

/* Short quotation or tagline in serif italic (quote bands, footer). */
.quote {
    font-family: var(--font-display);
    font-style: italic;
    font-weight: 300;
    font-size: clamp(1.75rem, 3.2vw, 2.875rem);
    line-height: 1.2;
    letter-spacing: -0.01em;
    text-wrap: balance;
}

.quote__mark {
    color: var(--color-accent);
}

.section--ink .quote__mark {
    color: inherit;
}

:root:lang(fa) .quote {
    font-style: normal;
    font-weight: 400;
    line-height: 1.7;
}

.meta {
    font-size: var(--text-small);
    color: var(--color-graphite);
}

.small {
    font-size: var(--text-small);
}

.muted {
    color: var(--color-graphite);
}

/* Long-form text: reading width, comfortable rhythm. */
.prose {
    max-inline-size: var(--reading-width);
}

.prose > * + * {
    margin-block-start: 1.25em;
}

.prose h2,
.prose h3 {
    font-size: var(--text-subheading);
    line-height: var(--leading-subheading);
    margin-block-start: 2em;
}

.prose ul,
.prose ol {
    padding-inline-start: 1.25em;
}

.prose li + li {
    margin-block-start: 0.5em;
}