/* ===========================================================================
   Home page
   =========================================================================== */

.hero {
    width: 100%;
    max-width: var(--wide-max);
    margin-inline: auto;
}

.hero picture,
.hero img {
    width: 100%;
    height: auto;
}

/* --- What is ------------------------------------------------------------- */

/* Centred as a block: heading, pull-quote and the three paragraphs all sit on
   the same axis, so the section reads as one introduction rather than a
   left-aligned column of text. */
.what-is {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: var(--space-lg);
    text-align: center;
}

.what-is__title {
    font-size: var(--text-3xl);
    letter-spacing: var(--tracking-wide);
    text-transform: uppercase;
}

/* The crimson rule moves from the left edge to underneath: a border on one
   side of centred text reads as a mistake. */
.what-is__quote {
    font-family: var(--font-display);
    font-style: italic;
    font-weight: var(--weight-light);
    font-size: var(--text-xl);
    line-height: var(--leading-snug);
    color: var(--color-crimson);
    max-width: var(--measure);
    padding-bottom: var(--space-sm);
    border-bottom: 3px solid var(--color-crimson);
}

.what-is__body {
    display: flex;
    flex-direction: column;
    gap: var(--space-sm);
    max-width: var(--measure);
    font-family: var(--font-ui);
    font-weight: var(--weight-light);
    font-size: var(--text-base);
    line-height: var(--leading-relaxed);
    color: var(--color-ink);
}

/* --- Section headings with a marked word --------------------------------- */

.heading-pair {
    font-size: var(--text-3xl);
    letter-spacing: var(--tracking-wide);
    text-transform: uppercase;
    margin-bottom: var(--space-xl);
}

/* --- Prizes intro column -------------------------------------------------- */

.prizes__intro {
    display: flex;
    flex-direction: column;
    gap: var(--space-sm);
}

.prizes__intro p {
    font-family: var(--font-ui);
    font-weight: var(--weight-light);
    font-size: var(--text-base);
    line-height: var(--leading-relaxed);
    color: var(--color-ink);
    max-width: 32ch;
}