@layer components {
    /*
     * The landing page.
     *
     * The palette and the typefaces are the book ones (`body.public` — see
     * assets/styles/app.css); the layout is not. This page is the only screen in the app written
     * for somebody who has never heard of it, so it is built the way a product page is built:
     * a wide page with a hero, sections that alternate shape, and cards that can be skimmed.
     *
     * The rule that keeps it from falling apart — and the one the first version got wrong by
     * applying it to the whole page rather than to the text — is this: **prose has one measure,
     * the layout has another.** Headings, leads and paragraphs are capped at `--home-measure`
     * wherever they stand; grids, figures and the page itself use `--home-column`. A sentence
     * that runs the full width of a 1600px monitor is unreadable no matter how modern the grid
     * around it looks.
     */
    .home {
        /* The page. Wide enough for four cards in a row, not so wide the hero loses its middle. */
        --home-column: 72rem;
        /* Any run of prose. ~70 characters of Inter at this size. */
        --home-measure: 36rem;
        --home-gutter: clamp(var(--space-m), 4vw, var(--space-xl));

        margin-inline: auto;
        max-inline-size: var(--home-column);
        padding-inline: var(--home-gutter);
    }

    /* ---- top bar ---------------------------------------------------------------- */

    .home__bar {
        display: flex;
        flex-wrap: wrap;
        align-items: center;
        gap: var(--space-s) var(--space-l);
        padding-block: var(--space-l);
    }

    /* With the nav hidden (below), nothing is left to push the button to the right edge. */
    @media (max-width: 34rem) {
        .home__bar-cta {
            margin-inline-start: auto;
        }
    }

    .home__brand {
        font-family: var(--font-display);
        font-variation-settings: 'opsz' 20;
        font-size: var(--text-l);
        font-weight: 650;
        color: inherit;
        text-decoration: none;
        letter-spacing: -0.01em;
    }

    .home__nav {
        display: flex;
        flex-wrap: wrap;
        gap: var(--space-m);
        /* Pushes itself and the button to the right edge, and on a phone simply wraps under
           the brand instead of squeezing. */
        margin-inline-start: auto;
        font-size: var(--text-s);

        /* On a phone the three anchors wrap onto a line of their own and push the sign-in
           button onto a third — three rows of chrome above the headline. The links only skip
           ahead on a page that is one scroll long anyway, so below this width they go. */
        @media (max-width: 34rem) {
            display: none;
        }

        & a {
            color: var(--color-text-muted);
            text-decoration: none;
        }

        & a:hover {
            color: var(--color-text);
        }
    }

    /* ---- hero ------------------------------------------------------------------- */

    .home__hero {
        display: grid;
        gap: var(--space-xl);
        align-items: center;
        /* No bottom padding: the next section brings its own `--space-2xl`, and two of them
           stacked left a hole under the hero big enough to look like the page had ended. */
        padding-block: clamp(var(--space-xl), 7vh, 5rem) 0;
    }

    .home__eyebrow {
        margin: 0 0 var(--space-m);
        color: var(--color-accent);
        font-size: var(--text-s);
        font-weight: 600;
        text-transform: uppercase;
        letter-spacing: 0.18em;
    }

    .home__title {
        margin: 0;
        font-size: var(--text-display);
        /* The optical-size axis goes up with the type size: at display sizes Fraunces wants
           thinner serifs, and left at the body setting it looks like a heading that was simply
           scaled up. */
        font-variation-settings: 'opsz' 100;
        letter-spacing: -0.03em;

        & em {
            font-style: italic;
            /* The italic is the hook of this typeface — the one line that says a person made
               this rather than a template. */
            color: var(--color-accent);
        }
    }

    .home__lead {
        margin: var(--space-l) 0 0;
        max-inline-size: var(--home-measure);
        font-size: var(--text-lead);
        color: var(--color-text-muted);
    }

    .home__cta {
        margin-block-start: var(--space-xl);
    }

    .home__button {
        min-block-size: 3.5rem;
        padding-inline: var(--space-xl);
        border: 0;
        border-radius: var(--radius-full);
        background-color: var(--color-accent);
        color: var(--color-accent-contrast);
        font-family: var(--font-body);
        font-size: var(--text-m);
        font-weight: 600;
        cursor: pointer;
        transition: transform 0.15s ease, box-shadow 0.15s ease;
    }

    .home__button:hover {
        transform: translateY(-1px);
        box-shadow: 0 10px 24px -12px var(--color-accent);
    }

    /* The one in the top bar: the same destination, a quarter of the weight. The hero's button
       is the offer; this one is for somebody who already knows and just wants the way in. */
    .home__button--ghost {
        min-block-size: 2.5rem;
        padding-inline: var(--space-m);
        border: 1px solid var(--color-border);
        background-color: transparent;
        color: var(--color-text);
        font-size: var(--text-s);
    }

    .home__button--ghost:hover {
        border-color: var(--color-accent);
        box-shadow: none;
    }

    .home__cta-note {
        margin: var(--space-m) 0 0;
        max-inline-size: var(--home-measure);
        color: var(--color-text-muted);
        font-size: var(--text-s);

        & a {
            color: inherit;
            text-decoration: underline;
            text-decoration-color: var(--color-border);
            text-underline-offset: 0.2em;
        }

        & a:hover {
            color: var(--color-text);
        }
    }

    /* Three words about what this actually is, for the reader who skips prose. Not buttons and
       not links — a chip that looks clickable and is not is worse than no chip. */
    .home__chips {
        display: flex;
        flex-wrap: wrap;
        gap: var(--space-xs);
        margin: var(--space-xl) 0 0;
        padding: 0;
        list-style: none;
        font-size: var(--text-s);
        color: var(--color-text-muted);

        & li {
            padding: 0.3rem var(--space-s);
            border: 1px solid var(--color-border);
            border-radius: var(--radius-full);
            background-color: var(--color-surface);
        }
    }

    .home__hero-visual {
        display: flex;
        justify-content: center;
    }

    /* ---- sections --------------------------------------------------------------- */

    .home__section {
        padding-block-start: var(--space-2xl);
    }

    .home__kicker {
        margin: 0 0 var(--space-s);
        color: var(--color-accent);
        font-size: var(--text-s);
        font-weight: 600;
        letter-spacing: 0.08em;
        text-transform: uppercase;
    }

    .home__section-title {
        margin: 0;
        max-inline-size: 22ch;
        font-size: var(--text-title);
    }

    .home__section-lead {
        margin: var(--space-m) 0 0;
        max-inline-size: var(--home-measure);
        color: var(--color-text-muted);
        font-size: var(--text-lead);
    }

    .home__note {
        margin: var(--space-m) 0 0;
        max-inline-size: var(--home-measure);
        color: var(--color-text-muted);
        font-size: var(--text-s);
    }

    /* ---- who it is for ---------------------------------------------------------- */

    .home__audience {
        display: grid;
        /* auto-fit, so the row is four on a desktop, two on a tablet and one on a phone without
           a single media query — and nothing is ever narrower than a readable card. */
        grid-template-columns: repeat(auto-fit, minmax(15rem, 1fr));
        gap: var(--space-m);
        margin: var(--space-xl) 0 0;
        padding: 0;
        list-style: none;
    }

    .home__card {
        padding: var(--space-l);
        border: 1px solid var(--color-border);
        border-radius: var(--radius-l);
        background-color: var(--color-surface);

        & h3 {
            margin: 0;
            font-size: var(--text-m);
            font-variation-settings: 'opsz' 20;
            font-weight: 650;
        }

        & p {
            margin: var(--space-s) 0 0;
            color: var(--color-text-muted);
            font-size: var(--text-s);
        }
    }

    /* ---- the four steps --------------------------------------------------------- */

    /*
     * Numbered by a counter rather than by a list marker: the number is display type here, part
     * of the look, and `list-style` gives no way to style it that far.
     */
    .home__steps {
        counter-reset: step;
        display: grid;
        /* Explicit counts rather than `auto-fit`: four steps must break 4 / 2 / 1, and an
           auto-fit track that happens to fit three leaves one step alone on a second row,
           which reads as "and then something else" instead of as a fourth step. */
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: var(--space-l);
        margin: var(--space-xl) 0 0;
        padding: 0;
        list-style: none;
    }

    @media (max-width: 34rem) {
        .home__steps {
            grid-template-columns: minmax(0, 1fr);
        }
    }

    .home__step {
        counter-increment: step;
        padding-block-start: var(--space-m);
        /* The rule above each step is the only decoration here. Four cards would make the steps
           look like four alternatives rather than one sequence. */
        border-block-start: 2px solid var(--color-border);
    }

    .home__step::before {
        content: counter(step);
        display: block;
        margin-block-end: var(--space-xs);
        font-family: var(--font-display);
        font-size: var(--text-section);
        font-variation-settings: 'opsz' 30;
        color: var(--color-accent);
        line-height: 1.1;
    }

    .home__step-kicker {
        margin: 0;
        font-weight: 650;
    }

    .home__step p + p {
        margin: var(--space-2xs) 0 0;
        color: var(--color-text-muted);
        font-size: var(--text-s);
    }

    /* ---- text beside a picture -------------------------------------------------- */

    .home__split {
        display: grid;
        gap: var(--space-xl);
        align-items: center;
    }

    .home__figure {
        margin: 0;
    }

    /*
     * The screenshot frame. A hairline and a soft shadow on the paper ground — enough to read
     * as "a picture of a screen" without a fake phone bezel, which always looks like a stock
     * asset borrowed from a different product.
     */
    .home__shot {
        overflow: hidden;
        border: 1px solid var(--color-border);
        border-radius: var(--radius-l);
        background-color: var(--paper-sunken);
        box-shadow: 0 24px 60px -32px rgb(0 0 0 / 45%);

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

    /* The player is a phone screen: given the full width of a column it would be a tower. */
    .home__shot--phone {
        max-inline-size: 16rem;
    }

    .home__caption {
        margin: var(--space-m) 0 0;
        max-inline-size: var(--home-measure);
        color: var(--color-text-muted);
        font-size: var(--text-s);
    }

    /* ---- the honest section ----------------------------------------------------- */

    /*
     * A definition list because that is what it is — a term and what it means — and because the
     * alternative shape, four reassuring cards, is how a page says this sort of thing without
     * anybody reading it.
     */
    .home__facts {
        display: grid;
        /* Two columns at most, for the same reason as the steps, and because these are the
           paragraphs somebody actually has to read before granting access to a document. */
        grid-template-columns: repeat(auto-fit, minmax(min(100%, 22rem), 1fr));
        gap: var(--space-l) var(--space-2xl);
        margin: var(--space-xl) 0 0;
        max-inline-size: 58rem;
    }

    .home__fact {
        padding-block-start: var(--space-m);
        border-block-start: 1px solid var(--color-border);

        & dt {
            font-family: var(--font-display);
            font-size: var(--text-m);
            font-variation-settings: 'opsz' 20;
            font-weight: 650;
        }

        & dd {
            margin: var(--space-2xs) 0 0;
            color: var(--color-text-muted);
            font-size: var(--text-s);
        }

        & code {
            padding: 0.1em 0.35em;
            border-radius: 0.3rem;
            background-color: var(--paper-sunken);
            font-family: var(--font-mono);
            font-size: 0.875em;
        }

        & a {
            color: var(--color-text);
            text-decoration: underline;
            text-decoration-color: var(--color-accent);
            text-underline-offset: 0.2em;
        }
    }

    /* ---- the last way in -------------------------------------------------------- */

    .home__closing {
        margin-block-start: var(--space-2xl);
        padding: var(--space-2xl) var(--home-gutter);
        border-radius: var(--radius-l);
        background-color: var(--paper-sunken);
        text-align: center;
    }

    .home__closing-line {
        margin: 0 auto;
        max-inline-size: 24ch;
        font-size: var(--text-section);
        font-variation-settings: 'opsz' 40;
    }

    .home__closing .home__cta {
        margin-block-start: var(--space-l);
    }

    .home__closing .home__cta-note {
        margin-inline: auto;
    }

    /* ---- two columns, once there is room for two columns ------------------------ */

    /*
     * One breakpoint for the whole page, and it is the width at which a 36rem text column and a
     * picture can stand side by side with air between them. Everything else is `auto-fit`.
     */
    @media (min-width: 60rem) {
        .home__hero {
            grid-template-columns: minmax(0, 1.15fr) minmax(0, 0.85fr);
            gap: var(--space-2xl);
        }

        .home__split {
            grid-template-columns: minmax(0, 1fr) minmax(0, 1.1fr);
            gap: var(--space-2xl);
        }

        .home__steps {
            grid-template-columns: repeat(4, minmax(0, 1fr));
        }
    }

    @media (prefers-reduced-motion: reduce) {
        .home__button {
            transition: none;
        }

        .home__button:hover {
            transform: none;
        }
    }
}