/**
 * Typography — scale taken from the design (1440px artboards), made fluid
 * down to ~360px with clamp().
 */
:root {
    --font-family-text: 'Brandon Grotesque', 'Jost', system-ui, sans-serif;
    --font-family-hand: 'Caveat', 'Segoe Script', 'Bradley Hand', cursive;

    --font-weight-text: 400;
    --font-weight-bold: 700;
    --font-weight-headline: 700;
    --font-weight-hand: 600;

    /* Headlines */
    --fs-h1: clamp(2.5rem, 1.6rem + 3.9vw, 4.875rem);      /* 40 → 78 */
    --fs-h2: clamp(2rem, 1.55rem + 1.9vw, 2.875rem);       /* 32 → 46 */
    --fs-h3: clamp(1.375rem, 1.2rem + .6vw, 1.5rem);       /* 22 → 24 */
    --fs-h4: 1.3125rem;                                    /* 21 */
    --fs-h5: 1.125rem;                                     /* 18 */

    /* Body */
    --fs-tiny: .75rem;                                     /* 12 */
    --fs-small: .90625rem;                                 /* 14.5 */
    --fs-base: 1.09375rem;                                 /* 17.5 */
    --fs-big: 1.21875rem;                                  /* 19.5 */
    --fs-lead: clamp(1.5rem, 1.3rem + .9vw, 1.625rem);     /* 24 → 26 */
    --fs-hand: clamp(1.5rem, 1.3rem + .9vw, 1.875rem);     /* 24 → 30 */
    --fs-kicker: .71875rem;                                /* 11.5 — uppercase label */

    --lh-tight: 1.05;
    --lh-heading: 1.1;
    --lh-text: 1.7;

    --ls-heading: -.026em;
    --ls-h1: -.03em;
    --ls-kicker: .2em;
}

body {
    font-family: var(--font-family-text);
    font-weight: var(--font-weight-text);
    font-size: var(--fs-base);
    line-height: var(--lh-text);
    color: var(--color-text);
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

h1, .h1,
h2, .h2,
h3, .h3,
h4, .h4,
h5, .h5 {
    margin: 0 0 .6em;
    font-weight: var(--font-weight-headline);
    line-height: var(--lh-heading);
    letter-spacing: var(--ls-heading);
    color: inherit;
    text-wrap: balance;
}

h1, .h1 { font-size: var(--fs-h1); line-height: var(--lh-tight); letter-spacing: var(--ls-h1); }
h2, .h2 { font-size: var(--fs-h2); }
h3, .h3 { font-size: var(--fs-h3); line-height: 1.26; letter-spacing: -.012em; }
h4, .h4 { font-size: var(--fs-h4); line-height: 1.24; letter-spacing: -.012em; }
h5, .h5 { font-size: var(--fs-h5); line-height: 1.3; letter-spacing: 0; }

p {
    margin: 0 0 1em;
    text-wrap: pretty;
}

strong, b {
    font-weight: var(--font-weight-bold);
}

/* Body sizes (TinyMCE style formats) */
.tiny  { font-size: var(--fs-tiny); }
.small { font-size: var(--fs-small); }
.big   { font-size: var(--fs-big); }
.lead  { font-size: var(--fs-lead); line-height: 1.42; }

/* Handwritten chalk accent */
.hand,
.font-hand {
    font-family: var(--font-family-hand);
    font-weight: var(--font-weight-hand);
    letter-spacing: 0;
}
.hand {
    display: block;
    font-size: var(--fs-hand);
    line-height: 1.2;
    color: var(--color-accent-text);
    transform: rotate(-1.6deg);
    transform-origin: left;
}

/* Uppercase kicker above headlines */
.kicker {
    display: block;
    margin-bottom: 1rem;
    font-size: var(--fs-kicker);
    font-weight: var(--font-weight-bold);
    letter-spacing: var(--ls-kicker);
    line-height: 1.4;
    text-transform: uppercase;
    color: var(--color-text-muted);
}

.font-text { font-family: var(--font-family-text); }

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