@layer components {
    /*
     * The challenge page in the home page's Broadsheet look: newsprint serif, the second spot colour
     * (magenta — the generator's and the challenge's) for the kicker, the step numbers and the hashtag,
     * white space as the only separator. Mobile first: one reading column; from 64rem the hero sets
     * the text beside the sample story, like the home page's deck.
     */
    .contest-page {
        display: flex;
        flex-direction: column;
        padding-block: var(--space-4) var(--space-8);
    }

    .contest-page__hero {
        display: flex;
        flex-direction: column;
        gap: var(--space-6);
    }

    .contest-page__intro {
        display: flex;
        flex-direction: column;
        gap: var(--space-3);
        max-inline-size: var(--measure);

        & > * {
            margin: 0;
        }
    }

    .contest-page__kicker {
        color: var(--color-accent-2-700);
    }

    .contest-page__title {
        font-size: clamp(2.5rem, 2rem + 2.5vw, 3.5rem);
        line-height: 1;
    }

    .contest-page__lede {
        font-size: var(--text-l);
        line-height: 1.45;
        text-wrap: pretty;
    }

    /* The first sentence carries the idea, as on the home page. */
    .contest-page__lede-lead {
        display: block;
        margin-block-end: var(--space-2);
        font-size: 1.15em;
        font-weight: 600;
        line-height: 1.25;
        text-wrap: balance;
    }

    .contest-page__when {
        font-weight: 600;
    }

    .contest-page__actions {
        display: flex;
        flex-wrap: wrap;
        gap: var(--space-2);
        margin: 0;
    }

    /* The draw's public counter: a quiet line in the second spot colour, never a box. */
    .contest-page__counter {
        color: var(--color-accent-2-700);
        font-weight: 600;
    }

    .contest-page__note {
        color: var(--color-text-muted);
        font-size: var(--text-s);
        font-style: italic;
    }

    /* The author's own story (UI/StoryVideo) at a phone's size. */
    .contest-page__sample {
        max-inline-size: 16rem;
    }

    .contest-page__section {
        display: flex;
        flex-direction: column;
        gap: var(--space-3);
        max-inline-size: var(--measure);
        padding-block-start: var(--space-8);
    }

    .contest-page__heading {
        margin: 0;
        font-size: var(--text-h2);
    }

    /* Three steps: a large magenta numeral beside each, no list markers. */
    .contest-page__steps {
        display: flex;
        flex-direction: column;
        gap: var(--space-4);
        margin: 0;
        padding: 0;
        list-style: none;
    }

    .contest-page__step {
        display: grid;
        grid-template-columns: 2.5rem minmax(0, 1fr);
        column-gap: var(--space-3);
        align-items: baseline;
    }

    .contest-page__step-number {
        color: var(--color-accent-2-700);
        font-family: var(--font-display, var(--font-heading));
        font-size: 2.25rem;
        font-weight: 600;
        line-height: 1;
        text-align: end;
    }

    .contest-page__step-body > * {
        margin: 0;
    }

    .contest-page__step-title {
        margin-block-end: var(--space-1);
        font-size: var(--text-h4);
    }

    /* The panorama a ridge joins: a printed picture under step 2, no frame. */
    .contest-page__panorama {
        margin: var(--space-3) 0 0;

        & img {
            display: block;
            inline-size: 100%;
            block-size: auto;
        }

        & figcaption {
            margin-block-start: var(--space-1);
            color: var(--color-text-muted);
            font-size: var(--text-s);
            font-style: italic;
        }
    }

    .contest-page__tag {
        color: var(--color-accent-2-700);
        white-space: nowrap;
    }

    .contest-page__prizes {
        display: flex;
        flex-direction: column;
        gap: var(--space-2);
        margin: 0;
        padding-inline-start: 1.25em;
    }

    /* When the prize arrives: right under the prizes, a plain sentence. */
    .contest-page__arrives {
        margin: 0;
        font-weight: 600;
    }

    .contest-page__dates {
        margin: 0;
        color: var(--color-text-muted);
    }

    /* The questions are run-in labels of the answers, not section headings: small and quiet. */
    .contest-page__faq {
        display: flex;
        flex-direction: column;

        & p {
            margin: 0 0 var(--space-4);
        }
    }

    .contest-page__question {
        margin: 0 0 var(--space-1);
        font-size: var(--text-h5);
        line-height: 1.3;
    }

    .contest-page__foot {
        display: flex;
        flex-direction: column;
        gap: var(--space-3);
        max-inline-size: var(--measure);
        padding-block-start: var(--space-6);

        & a {
            min-block-size: 44px;
        }
    }

    .contest-page__rules {
        margin: 0;
        color: var(--color-text-muted);
        font-size: var(--text-s);
    }

    @media (min-width: 64rem) {
        .page:has(> .page__main > .contest-page) {
            max-inline-size: calc(980px + 2 * var(--gutter));
        }

        .contest-page__hero {
            display: grid;
            grid-template-columns: minmax(0, 7fr) minmax(0, 4fr);
            column-gap: var(--space-8);
            align-items: start;
        }

        .contest-page__title {
            font-size: clamp(3.5rem, 2rem + 3vw, 4.75rem);
            line-height: 0.95;
        }

        .contest-page__sample {
            justify-self: end;
            max-inline-size: 17rem;
        }
    }
}