@layer components {
    .home {
        display: flex;
        flex-direction: column;
    }

    .home__hero {
        padding-block-start: var(--space-4);
    }

    .home__title {
        margin: 0 0 var(--space-2);
        font-size: clamp(2.5rem, 2rem + 2.5vw, 3.5rem);
    }

    .home__eyebrow {
        margin: 0 0 var(--space-2);
        color: var(--color-accent-700);
        font-size: var(--text-xs, 0.75rem);
        font-weight: 600;
        letter-spacing: 0.12em;
        text-transform: uppercase;
    }

    .home__about {
        display: flex;
        flex-direction: column;
        gap: var(--space-4);
        max-inline-size: 36ch;
        padding-block-start: var(--space-3);
    }

    .home__lede {
        margin: 0;
        font-size: var(--text-l, 1.25rem);
        line-height: 1.45;
        text-wrap: pretty;
    }

    /* The first sentence carries the idea; it reads as the deck's headline. */
    .home__lede-lead {
        display: block;
        margin-block-end: var(--space-2);
        font-size: 1.15em;
        font-weight: 600;
        line-height: 1.25;
        text-wrap: balance;
    }

    .home__note {
        margin: 0;
        color: var(--color-text-muted);
        font-style: italic;
        line-height: 1.5;
        text-wrap: pretty;
    }

    .home__book {
        margin: 0;
    }

    /* White space is the only separator between sections. */
    .home__section {
        display: flex;
        flex-direction: column;
        gap: var(--space-3);
        max-inline-size: var(--measure);
        padding-block-start: var(--space-8);
    }

    .home__kicker {
        margin: 0;
        color: var(--color-accent-700);
    }

    /* The generator is the second spot colour's one appearance on the screen. */
    .home__kicker--second {
        color: var(--color-accent-2-700);
    }

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

    .home__text {
        margin: 0;
    }

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

    /* The challenge teaser under the generator's button: one whole link (a finger finds it) with a
       small print of the sample story beside it — the thing one makes — its name in the generator's
       spot colour, a size above the text. No box. */
    .home__challenge {
        margin: var(--space-2) 0 0;
    }

    .home__challenge-link {
        display: grid;
        grid-template-columns: 4rem minmax(0, 1fr);
        grid-template-rows: auto 1fr;
        column-gap: var(--space-3);
        row-gap: var(--space-1);
        align-items: start;
        padding-block: var(--space-2);
        color: var(--color-text);
        text-decoration: none;
    }

    .home__challenge-sample {
        grid-row: 1 / span 2;
        inline-size: 4rem;
        block-size: auto;
        box-shadow: 0 1px 2px oklch(0 0 0 / 0.12), 0 4px 12px oklch(0 0 0 / 0.1);
    }

    .home__challenge-name {
        color: var(--color-accent-2-700);
        font-size: var(--text-h4);
        font-weight: 600;
        line-height: 1.2;
        text-decoration: underline;
        text-decoration-thickness: 1px;
        text-underline-offset: 0.2em;
    }

    .home__challenge-link:hover .home__challenge-name {
        text-decoration-thickness: 2px;
    }

    /*
     * Desktop. The mock is a phone only; on a wide screen the main page is laid out as a broadsheet
     * instead of a phone column with a void beside it: the page widens to the whole route (980 px,
     * no sideways scrolling), the lede stands beside the title as a deck, and the sections below
     * run in two columns. Still flush left (app.css `.page`), no boxes, white space only.
     */
    @media (min-width: 64rem) {
        .page:has(> .page__main > .home) {
            max-inline-size: calc(980px + 2 * var(--gutter));
        }

        .home {
            display: grid;
            grid-template-columns: repeat(2, minmax(0, 1fr));
            column-gap: var(--space-8);
            align-items: start;
        }

        /* The owner's content preview wraps parts in `.owner-preview-region` (display: contents): their
           children are the grid items then, so they take the same placement as direct children. */
        .home > *,
        .home > .owner-preview-region > * {
            grid-column: 1 / -1;
        }

        .home > :is(.home__section, .donio-bar, .latest-lanterns, .campaign-tally),
        .home > .owner-preview-region > :is(.home__section, .donio-bar, .latest-lanterns, .campaign-tally) {
            grid-column: auto;
        }

        .home__hero {
            display: grid;
            grid-template-columns: minmax(0, 5fr) minmax(0, 6fr);
            column-gap: var(--space-8);
            align-items: start;
        }

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

        .home__title {
            margin-block-end: 0;
        }

        /* The deck fills its column (a 40ch measure stacked it into a tall block that pushed the
           route's dates and zoom controls under the fold and the sticky Donio bar — QA 2026-10-31). */
        .home__about {
            gap: var(--space-3);
            max-inline-size: var(--measure);
            padding-block-start: var(--space-3);
        }
    }
}