/* PAGE HEADER
   The title at the top of every page, with an optional summary and meta line underneath.
   Shared by standard pages (base.njk), blog posts and case studies, so they all match.
   Every value comes from tokens.css.

   Style          Class           Size                 Weight  Line height
   Page title     .page-title     2XL 40px (XL 32px)   L 600   S 1.2
   Page summary   .page-summary   M 20px (S 18px)      M 400   L 1.6
   Page meta      .page-meta      2XS 14px             M 400   L 1.6

   Sizes in brackets are for small screens */

.page-header {
    margin: 3rem 0 4rem;
}

.page-title {
    margin: 0;
    font-family: var(--font-family-body);
    font-size: var(--font-size-2xl);
    font-weight: var(--font-weight-l);
    line-height: var(--line-height-s);
    letter-spacing: var(--letter-spacing-s);
    color: var(--color-text-primary);
    text-wrap: balance;
}

.page-summary {
    margin: 1rem 0 0;
    font-family: var(--font-family-body);
    font-size: var(--font-size-m);
    font-weight: var(--font-weight-m);
    line-height: var(--line-height-l);
    letter-spacing: var(--letter-spacing-m);
    color: var(--color-text-secondary);
    text-wrap: pretty;
}

/* Dates, reading time, back links and other small supporting text */
.page-meta {
    font-family: var(--font-family-body);
    font-size: var(--font-size-2xs);
    font-weight: var(--font-weight-m);
    line-height: var(--line-height-l);
    letter-spacing: var(--letter-spacing-m);
    color: var(--color-text-secondary);
}

@media (max-width: 768px) {
    .page-title {
        font-size: var(--font-size-xl);
    }

    .page-summary {
        font-size: var(--font-size-s);
    }
}