/* ==========================================================================
   Typography
   --------------------------------------------------------------------------
   Two families, clearly distinct roles: Fraunces (serif) carries headline
   moments; Inter (sans) carries everything else — body copy, labels, nav,
   buttons. Fonts are loaded via <link> in each page's <head>.
   ========================================================================== */

body{
    font-family:var(--font-body);
    color:var(--text);
    line-height:1.7;
    font-size:16px;
}

h1,h2,h3,.section-title{
    font-family:var(--font-display);
    color:var(--text);
    font-weight:600;
    letter-spacing:-0.01em;
}

h1{
    font-size:3.2rem;
    font-weight:600;
    line-height:1.1;
}

h2{
    font-size:2.2rem;
    margin-bottom:1rem;
    line-height:1.2;
}

h3{
    font-size:1.3rem;
    line-height:1.35;
}

p{
    color:var(--text-light);
}

/* Small eyebrow label used above a section heading. Sentence case with a
   short gold rule, rather than tracked-out all-caps — a quieter way to
   mark a section header as a header. */
.section-kicker{

    display:flex;

    align-items:center;

    gap:.6rem;

    font-family:var(--font-body);

    font-size:.85rem;

    font-weight:600;

    color:var(--gold-soft);

    margin-bottom:.75rem;
}

.section-kicker::before{

    content:"";

    display:inline-block;

    width:22px;

    height:2px;

    background:var(--gold);

    border-radius:2px;
}

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