/* ==========================================================================
   Home page (pages/home.html) and "Our story" (pages/about.html,
   partials/journal.html): the front of the recipe box, in full colour.
   Owned by the home surface. Everything shared comes from styles.css and
   is used, not restyled, here: the tokens, the category classes and the
   section washes, the section opener on the red line, the search box, the
   cat-tab, the recipe cards and their grid, the status marks, the figures
   and their legend, the score scale, the tin and its dividers, the photo
   mount, the buttons. This file lays those parts out for these pages and
   builds the few variants the foundation leaves to them (the hand of
   cards, the lead pick, the small cards on their side, the journal, the
   three steps) from the same tokens; the Join card is /join's own
   (account.css).

   The home page, top to bottom: the head on paper (the title, the
   search, the counts as figures; beside it a hand of recipe cards in
   their categories' fills, fanned out); a member's Test Kitchen queue;
   the categories (the dividers standing in the teal tin, "Written in" on
   the opener's line); the editor's picks on the breakfast wash, the
   lead's card laid over the foot of its photo; "Our story" on the
   journal's wash; how a recipe gets proven on the lunch wash; every
   recipe as photo cards on paper; and the Join card on the dessert wash
   for anyone who isn't a member. Four washes at most, never two alike
   side by side. Searched or filtered, the head is compact and the
   results come first, washed in the chosen category's tint.

   Colour: the categories' fills on the cards, tabs, dividers and the
   Join card's tabs (ink on them, nothing else); the tints as section
   grounds; the testers' pen on their figures and ticks, and on the
   founder's words; the tin and the journal's blues in the drawings only.

   01  Head: title, search, counts
   02  The hand of cards
   03  Small cards on their side, the lead's card (shared parts)
   04  A member's Test Kitchen queue; the categories and "Written in"
   05  Editor's picks
   06  Our story, and the journal drawing
   07  How a recipe gets proven
   08  All recipes, the results of a search, the section rhythm
   09  Join
   10  "Our story" page (/about)
   11  Right to left, forced colours, print
   ========================================================================== */

/* Recipe titles carry the recipe's own language and direction; they still
   line up with the page, like the cards' titles. */
[dir="ltr"] :is(.home-card-title, .home-hand-title) { text-align: left; }
[dir="rtl"] :is(.home-card-title, .home-hand-title) { text-align: right; }

/* 01  Head ------------------------------------------------------------------
   The title is the label on the front of the box: Besley at its heaviest,
   set tight (styles.css section 17 loosens it for Arabic and Japanese).
   The search follows at once; the counts under it are figures, each over
   its glyph and word. Nothing above the search changes while a live
   search runs: the counts and the hand are swapped out (#hero-counts,
   #hero-hand), the grid keeps its columns, so the title never rewraps,
   and on wide screens the two columns stand from the top rather than
   centred, so the title and the box stay put when the hand goes. A
   filtered URL loaded in full is compact while it stays filtered
   (.is-compact with #hero-counts' is-filtered). */
.home-hero {
    padding-block: clamp(36px, 5vw, 72px) clamp(40px, 5vw, 80px);
    overflow: hidden;          /* the hand's tilted cards */
}

.home-hero-grid {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: var(--s-5);
    align-items: start;
}

.home-hero-main {
    min-width: 0;
}

.home-hero-title {
    max-width: 9.5em;
    font-size: clamp(2.75rem, 1.5rem + 3.4vw, 5rem);
    font-weight: 700;
    line-height: 1.02;
    letter-spacing: -0.025em;
}

/* Japanese breaks the title only where its translation marks a phrase's
   end (<wbr>), never inside a word. */
.home-hero-title:lang(ja) {
    word-break: keep-all;
}

.home-search {
    max-width: 35rem;
    margin-top: clamp(24px, 2.5vw, 36px);
}

/* The counts: the figure (the string's <b>) on its own line above the
   glyph and the words, whatever order a language puts them in. Each
   count is a little grid, so it is only as wide as its widest line and
   the three share one line on a phone. */
.home-counts {
    display: flex;
    flex-wrap: wrap;
    gap: var(--s-4) clamp(16px, 3vw, 44px);
    margin-top: clamp(28px, 3vw, 40px);
    padding: 0;
    list-style: none;
}

.home-counts li {
    display: grid;
    grid-template-columns: auto auto;
    justify-content: start;
    align-items: center;
    gap: 6px;
    font-size: var(--t-s);
    line-height: 1.2;
    color: var(--ink-2);
    white-space: nowrap;
}

.home-counts li > span {
    display: contents;
}

.home-counts b {
    grid-row: 1;
    grid-column: 1 / -1;
    font-family: var(--serif);
    font-size: clamp(2.375rem, 1.375rem + 2vw, 3.25rem);
    font-weight: 700;
    line-height: 1;
    letter-spacing: -0.02em;
    font-variant-numeric: lining-nums proportional-nums;
    color: var(--ink);
}

.home-counts .icon {
    width: 18px;
    height: 18px;
    color: var(--pen-2);
}

.home-hand-slot {
    min-width: 0;
}

/* Wide screens: the hand beside the words. Its cards stand well under
   the top of its box (the fan's tilt), so the words start lower too, by
   a fixed step: the title's top sits by the cards' tabs either way, and
   nothing moves when a live search puts the hand away. */
@media (min-width: 1000px) {
    .home-hero-grid {
        grid-template-columns: minmax(0, 1fr) minmax(0, 1.05fr);
        gap: var(--s-6);
    }

    .home-hero-main {
        padding-top: 32px;
    }
}

@media (min-width: 1200px) {
    .home-hero-main {
        padding-top: 40px;
    }
}

/* Compact: a searched or filtered listing loaded in full. The title steps
   down to a section opener's size, so the results sit near the top. */
.home-hero.is-compact:has(.home-counts-slot.is-filtered) {
    padding-block: clamp(24px, 3vw, 40px) clamp(8px, 1.5vw, 16px);
}

.home-hero.is-compact:has(.home-counts-slot.is-filtered) .home-hero-title {
    max-width: none;
    font-size: var(--t-head);
    line-height: 1.1;
    letter-spacing: -0.01em;
}

.home-hero.is-compact:has(.home-counts-slot.is-filtered) .home-search {
    margin-top: var(--s-4);
}

.home-hero.is-compact:has(.home-counts-slot.is-filtered) .home-hero-main {
    padding-top: 0;
}

/* 02  The hand of cards -------------------------------------------------------
   Up to four recipe cards held like a hand, fanned from one point below
   them, the newest at the front. Each card is in its category's fill
   (ink on it) with its 1px edge, the photo on it with the same edge, its
   tab standing on its top edge, the tabs stepped across the hand so every
   category's word stays readable. Only the front card's title and status
   mark show; the cards behind keep theirs for screen readers and show
   them when raised. Hover or focus raises a card out of the hand. Sizes
   run on one unit (--u), so the hand scales as a whole. */
.home-hand {
    --u: 1px;
    position: relative;
    width: 100%;
    max-width: 600px;
    height: calc(430 * var(--u));
    margin: 0 auto;
    padding: 0;
    list-style: none;
}

.home-hand-card {
    --x: 56;
    --rot: 0deg;
    --lift: 0;
    position: absolute;
    bottom: calc(24 * var(--u));
    left: 50%;
    width: calc(276 * var(--u));
    padding: calc(10 * var(--u)) calc(10 * var(--u)) calc(14 * var(--u));
    border: 1px solid var(--c-edge);
    border-radius: var(--corner);
    background: var(--c);
    color: var(--ink);
    transform-origin: 30% 150%;
    transform: translateX(-50%) translateX(calc(var(--x) * var(--u))) rotate(var(--rot)) translateY(calc(var(--lift) * var(--u)));
    transition: transform 200ms var(--ease);
}

.home-hand-card:nth-last-child(4) { --rot: -25deg; }
.home-hand-card:nth-last-child(3) { --rot: -15.5deg; }
.home-hand-card:nth-last-child(2) { --rot: -6deg; }
.home-hand-card:nth-last-child(1) { --rot: 3.5deg; }

.home-hand-card:hover,
.home-hand-card:focus-within {
    --lift: -14;
    z-index: 5;
}

.home-hand-card:has(.home-hand-link:focus-visible) {
    outline: var(--focus-width) solid var(--focus);
    outline-offset: 2px;
}

.home-hand-card img {
    display: block;
    width: 100%;
    aspect-ratio: 4 / 3;
    object-fit: cover;
    border: 1px solid var(--c-edge);
    border-radius: var(--photo-corner);
    background: var(--paper-3);
}

.home-hand-title {
    display: -webkit-box;
    min-height: 2.4em;
    margin-top: calc(10 * var(--u));
    overflow: hidden;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
    font-family: var(--serif);
    font-size: max(0.9375rem, calc(19 * var(--u)));
    font-weight: 600;
    line-height: 1.2;
}

.home-hand-title:is(:lang(ar), :lang(ja)) {
    font-weight: 700;
    line-height: var(--leading-tight);
}

.home-hand-link {
    color: inherit;
    text-decoration: none;
}

/* The title's link covers the card. */
.home-hand-link::after {
    content: "";
    position: absolute;
    inset: 0;
    z-index: 1;
}

.home-hand-link:focus-visible {
    outline: none;
}

.home-hand-card:hover .home-hand-link {
    text-decoration: underline;
    text-decoration-thickness: 1px;
    text-underline-offset: 3px;
}

.home-hand-status {
    margin-top: calc(8 * var(--u));
}

/* On a fill, the mark is ink, its glyph too (ink-2 and the pen are for
   white card stock and the washes). */
.home-hand-status .badge,
.home-hand-status .badge .icon {
    color: var(--ink);
}

.home-hand-card:not(:last-child):not(:hover):not(:focus-within) :is(.home-hand-title, .home-hand-status) {
    opacity: 0;
}

.home-hand-tab {
    position: absolute;
    bottom: 100%;
    min-height: calc(30 * var(--u));
    padding-inline: max(8px, calc(12 * var(--u)));
    font-size: max(0.875rem, calc(15 * var(--u)));
}

.home-hand-card:nth-last-child(4) .home-hand-tab { inset-inline-start: calc(14 * var(--u)); }
.home-hand-card:nth-last-child(3) .home-hand-tab { inset-inline-start: calc(72 * var(--u)); }
.home-hand-card:nth-last-child(2) .home-hand-tab { inset-inline-start: calc(130 * var(--u)); }
.home-hand-card:nth-last-child(1) .home-hand-tab { inset-inline-end: calc(14 * var(--u)); }

@media (min-width: 1000px) {
    .home-hand {
        margin-inline-end: -12px;
    }
}

@media (min-width: 1200px) {
    .home-hand {
        --u: 1.18px;
    }
}

@media (max-width: 600px) {
    .home-hand {
        --u: 0.62px;
        max-width: 390px;
        height: calc(415 * var(--u));
    }

    .home-hand-card {
        --x: 109;
    }

    .home-hand-card:nth-last-child(4) { --rot: -27deg; }
    .home-hand-card:nth-last-child(3) { --rot: -17deg; }
    .home-hand-card:nth-last-child(2) { --rot: -7deg; }
    .home-hand-card:nth-last-child(1) { --rot: 3deg; }

    .home-hand-tab {
        min-height: 24px;
    }

    .home-hand-card:nth-last-child(4) .home-hand-tab { inset-inline-start: 0; }
    .home-hand-card:nth-last-child(3) .home-hand-tab { inset-inline-start: 30px; }
    .home-hand-card:nth-last-child(2) .home-hand-tab { inset-inline-start: 76px; }
    .home-hand-card:nth-last-child(1) .home-hand-tab { inset-inline-end: 6px; }
}

/* The smallest phones: the hand a size down, so its outer cards stay on
   the screen. */
@media (max-width: 379px) {
    .home-hand {
        --u: 0.54px;
    }
}

/* 03  Small cards on their side, the lead's card ------------------------------
   Variants of the recipe card (styles.css section 09) built from its
   parts: white stock, a 1px edge, the category's 6px stripe along the
   top edge with its tab standing on it (in the same fill, so tab and
   stripe read as one piece), the title in Besley (its link covers the
   card), and on a ruled blue line the one status mark and the figures.
   .home-mini lays the photo at its start (the picks beside the lead, a
   member's queue); .home-lead-card is the lead pick's words, laid over
   the foot of its photo. */
.home-mini,
.home-lead-card {
    --ground: var(--card);
    position: relative;
    border: 1px solid var(--card-edge);
    border-top: var(--stripe) solid var(--c, var(--card-edge));
    border-radius: var(--corner);
    border-start-start-radius: 0;
    background: var(--card);
}

.home-mini {
    display: flex;
    min-height: 150px;
}

.home-mini:has(.home-card-link:focus-visible),
.home-lead:has(.home-card-link:focus-visible) .home-lead-card {
    outline: var(--focus-width) solid var(--focus);
    outline-offset: 2px;
}

/* The photo fills its side of the card, however tall the words make it;
   it never sets the card's height itself. */
.home-mini-photo {
    position: relative;
    flex: none;
    width: min(42%, 220px);
    overflow: hidden;
    background: var(--paper-3);
}

.home-mini-photo img,
.home-mini-photo .no-photo {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
}

.home-mini-photo img {
    display: block;
    object-fit: cover;
}

.home-mini-photo img,
.home-lead-photo img {
    outline: 1px solid var(--photo-edge);
    outline-offset: -1px;
}

.home-mini-body {
    display: flex;
    flex: 1;
    flex-direction: column;
    gap: 10px;
    min-width: 0;
    padding: 14px 16px;
}

.home-card-title {
    font-size: 1.1875rem;
    font-weight: 600;
    line-height: 1.22;
}

.home-card-title:is(:lang(ar), :lang(ja)) {
    font-weight: 700;
}

.home-card-link {
    color: inherit;
    text-decoration: none;
}

.home-card-link::after {
    content: "";
    position: absolute;
    inset: 0;
    z-index: 1;
}

.home-card-link:focus-visible {
    outline: none;
}

:is(.home-mini, .home-lead):hover .home-card-link {
    text-decoration: underline;
    text-decoration-thickness: 1px;
    text-underline-offset: 3px;
}

.home-card-tab {
    position: absolute;
    bottom: 100%;
    inset-inline-start: -1px;
    max-width: calc(100% + 2px);
    margin-bottom: var(--stripe);
    border-color: var(--c, var(--card-edge));
    background: var(--c, var(--card));
}

.home-card-foot {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 8px 12px;
    margin-top: auto;
    padding-top: 10px;
    border-top: 1px solid var(--rule);
}

/* The Cook it button sits above the title's link. */
.home-mini-action {
    position: relative;
    z-index: 2;
}

.home-minis {
    display: grid;
    gap: 46px;
    align-content: start;
    margin: 0;
    padding: 30px 0 0;         /* room for the first card's tab */
    list-style: none;
}

@media (max-width: 600px) {
    .home-mini {
        min-height: 120px;
    }

    .home-mini-photo {
        width: 120px;
    }

    .home-mini-body {
        gap: 8px;
        padding: 12px 12px 12px 14px;
    }

    .home-mini .home-card-title {
        font-size: 1.0625rem;
    }

    .home-mini .home-card-foot {
        flex-direction: column;
        align-items: flex-start;
        gap: 6px;
        padding-top: 8px;
    }

    .home-minis {
        gap: 42px;
    }
}

/* 04  A member's queue; the categories ----------------------------------------
   The queue: up to three small cards side by side where they fit, each
   with its Cook it button. The categories: the tin (styles.css section
   10) under its opener, "Written in" at the opener's end, its select
   sized to its words. */
.home-queue .home-minis {
    grid-template-columns: repeat(auto-fill, minmax(min(100%, 22rem), 1fr));
    gap: 46px var(--s-5);
    padding-top: var(--s-2);
}

/* Side by side, the cards in a row are one height. */
.home-queue .home-minis > li {
    display: grid;
}

.home-lang {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--s-2) var(--s-3);
}

.home-lang-label {
    font-size: var(--t-s);
    font-weight: 600;
    color: var(--ink-2);
}

.home-lang .select {
    width: auto;
    min-width: 11rem;
}

/* 05  Editor's picks ---------------------------------------------------------
   The lead pick (its photo, with its card laid over the photo's foot) and
   the others as small cards beside it on wide screens, under it on
   narrower ones. The photo is a second, hidden link to the recipe, so
   the whole pick opens it. */
.home-picks-grid {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: var(--s-7) var(--s-6);
}

.home-lead {
    position: relative;
    min-width: 0;
}

.home-lead-photo {
    display: block;
    aspect-ratio: 4 / 3;
    overflow: hidden;
    border-radius: var(--corner);
    background: var(--paper-3);
}

.home-lead-photo img,
.home-lead-photo .no-photo {
    width: 100%;
    height: 100%;
}

.home-lead-photo img {
    display: block;
    object-fit: cover;
}

.home-lead-card {
    display: flex;
    flex-direction: column;
    gap: 12px;
    margin: -56px 12px 0;
    padding: 18px 22px 20px;
}

.home-lead .home-card-title {
    font-size: clamp(1.5rem, 1.125rem + 1vw, 2rem);
    line-height: 1.15;
}

.home-lead .figures {
    font-size: 1.125rem;
}

@media (min-width: 601px) {
    .home-lead-card {
        margin: -96px 24px 0;
    }
}

@media (min-width: 900px) {
    .home-picks-grid {
        grid-template-columns: minmax(0, 7fr) minmax(0, 5fr);
    }

    .home-lead-photo {
        aspect-ratio: 11 / 9;
    }

    .home-lead-card {
        margin: -120px 32px 0;
    }
}

/* 06  Our story, and the journal ----------------------------------------------
   On the journal's wash: the drawing of the founder's blue journal beside
   a line from what they wrote, in the pen (it is their hand), with the
   way to the rest. The quotation marks are the page language's own; the
   opening one hangs in the margin where there is room. */
.home-story-grid {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: var(--s-6) 64px;
    align-items: center;
}

.home-story-text {
    min-width: 0;
}

.home-story-text .section-head {
    margin-bottom: 28px;
}

.home-quote {
    position: relative;
    max-width: 22em;
    font-family: var(--serif);
    font-size: clamp(1.625rem, 1.125rem + 1.4vw, 2.375rem);
    font-weight: 400;
    line-height: 1.28;
    letter-spacing: -0.005em;
    color: var(--pen);
    white-space: normal;
    quotes: "\201C" "\201D";
}

.home-quote:lang(fr) { quotes: "\00AB\202F" "\202F\00BB"; }
.home-quote:lang(es) { quotes: "\00AB" "\00BB"; }
.home-quote:lang(de) { quotes: "\201E" "\201C"; }
.home-quote:lang(ar) { quotes: "\00AB" "\00BB"; }
.home-quote:lang(ja) { quotes: "\300C" "\300D"; }

.home-quote p::before { content: open-quote; }
.home-quote p::after { content: close-quote; }

.home-story-text .link-arrow {
    margin-top: 28px;
}

@media (min-width: 900px) {
    .home-story-grid {
        grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
    }

    /* Left to right only: a mark alone in a box of its own isn't
       mirrored right to left, so Arabic keeps its opening mark inline. */
    [dir="ltr"] .home-quote p::before {
        position: absolute;
        right: 100%;
    }
}

/* The drawing: the colours come from the tokens through these classes
   (illustration only: the journal's blues, card stock, the category
   fills and edges, card red for the ribbon and the label's line). */
.journal {
    width: 100%;
    max-width: 440px;
    height: auto;
    margin-inline: auto;
    overflow: visible;
}

.journal-card { fill: var(--c); stroke: var(--c-edge); }
.journal-pages { fill: var(--card); stroke: var(--card-edge); }
.journal-page-edges { fill: none; stroke: var(--hairline); stroke-width: 1.5; }
.journal-cover { fill: var(--journal); }
.journal-spine { fill: var(--journal-spine); }
.journal-stitch { fill: none; stroke: color-mix(in srgb, var(--journal) 62%, var(--card)); stroke-width: 1.5; stroke-dasharray: 5 5; }
.journal-band { fill: var(--journal-band); }
.journal-label { fill: var(--card); }
.journal-label-line { fill: none; stroke: var(--card-red); stroke-width: 2; }
.journal-label-rules { fill: none; stroke: var(--rule); stroke-width: 1.5; }
.journal-ribbon { fill: var(--card-red); }

.journal-label-word {
    fill: var(--pen);
    font-family: var(--serif);
    font-size: 23px;
    font-weight: 600;
}

@media (max-width: 600px) {
    .home-story .journal {
        max-width: 320px;
    }
}

/* 07  How a recipe gets proven ---------------------------------------------
   Three pictures, each over a few words, an arrow between them (down the
   page on phones, across it on wide screens): a member's fresh card (the
   recipe's photo, the lines still to write, the pen), the photos of its
   first as-written cooks, each ticked in the pen, and the card it passed
   with (Proven, both averages on the score scale, pass zone on the
   highlighter). No numbers on the steps: the arrows give the order. */
.home-steps {
    --step-gap: clamp(48px, 7vw, 104px);
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    justify-items: center;
    gap: var(--s-3);
    margin: 0;
    padding: var(--s-4) 0 0;
    list-style: none;
}

.home-step {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
    width: 100%;
    max-width: 340px;
    text-align: center;
}

.home-step-pic {
    display: flex;
    align-items: center;
    justify-content: center;
    height: 190px;
}

.home-step-title {
    margin-top: 18px;
    font-size: 1.3125rem;
    font-weight: 600;
    line-height: 1.25;
    text-wrap: balance;
}

/* The arrow to the next step: the lunch tint's own edge, a drawing. */
.home-step-arrow {
    width: 44px;
    height: 44px;
    margin-top: var(--s-3);
    color: var(--lunch-edge);
    transform: rotate(90deg);
}

/* Step 1: a fresh index card, filed behind the recipe's category. */
.home-sheet {
    position: relative;
    display: grid;
    grid-template-columns: 76px minmax(0, 1fr);
    gap: 12px;
    width: 210px;
    padding: 12px;
    border: 1px solid var(--card-edge);
    border-top: 5px solid var(--c, var(--card-edge));
    border-radius: var(--corner);
    border-start-start-radius: 0;
    background: var(--card);
    transform: rotate(-3deg);
}

.home-sheet-tab {
    position: absolute;
    bottom: 100%;
    inset-inline-start: -1px;
    min-height: 26px;
    margin-bottom: 5px;
    border-color: var(--c);
}

.home-sheet img,
.home-sheet-photo {
    display: block;
    width: 76px;
    height: 76px;
    object-fit: cover;
    border-radius: var(--photo-corner);
    background: var(--paper-3);
}

.home-sheet-lines {
    display: grid;
    align-content: start;
    gap: 13px;
    padding-top: 6px;
}

.home-sheet-lines i {
    display: block;
    height: 2px;
    background: var(--rule);
}

.home-sheet-lines i:first-child {
    width: 90%;
    height: 8px;
    border-radius: 1px;
    background: var(--ink);
}

.home-sheet-lines i:nth-child(2) {
    background: var(--card-red);
}

.home-sheet-pen {
    position: absolute;
    bottom: -20px;
    inset-inline-end: -26px;
    width: 64px;
    height: 64px;
    color: var(--pen);
}

/* Step 2: the cooks' photos, prints on card stock, each ticked. */
.home-cooks {
    position: relative;
    width: 250px;
    height: 150px;
}

.home-cook {
    position: absolute;
    top: 14px;
    width: 104px;
    padding: 6px 6px 8px;
    border: 1px solid var(--card-edge);
    border-radius: var(--photo-corner);
    background: var(--card);
}

.home-cook:nth-child(1) { inset-inline-start: 0; transform: rotate(-7deg); }
.home-cook:nth-child(2) { inset-inline-start: 73px; top: 4px; z-index: 2; }
.home-cook:nth-child(3) { inset-inline-end: 0; z-index: 1; transform: rotate(6deg); }
.home-cook:only-child { inset-inline-start: 73px; transform: none; }
.home-cook:nth-child(2):last-child { inset-inline-start: auto; inset-inline-end: 24px; transform: rotate(5deg); }

.home-cook img,
.home-cook-photo {
    display: block;
    width: 100%;
    aspect-ratio: 1;
    object-fit: cover;
    background: var(--paper-3);
}

.home-cook .icon {
    display: block;
    width: 20px;
    height: 20px;
    margin: 6px auto 0;
    color: var(--pen);
}

/* Step 3: the card it passed with. */
.home-scores {
    --ground: var(--card);
    display: grid;
    gap: 10px;
    width: 250px;
    padding: 16px 18px 14px;
    border: 1px solid var(--card-edge);
    border-radius: var(--corner);
    background: var(--card);
    text-align: start;
}

.home-scores .badge {
    font-size: var(--t-m);
}

.home-score {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: start;
    gap: var(--s-3);
}

.home-score-figure {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    min-width: 3.4em;
    padding-top: 2px;
    font-family: var(--serif);
    font-size: 1.5rem;
    font-weight: 700;
    line-height: 1;
    font-variant-numeric: lining-nums proportional-nums;
    color: var(--pen);
}

.home-score-figure .icon {
    width: 17px;
    height: 17px;
    color: var(--pen-2);
}

@media (min-width: 900px) {
    .home-steps {
        grid-template-columns: repeat(3, minmax(0, 1fr));
        align-items: start;
        column-gap: var(--step-gap);
    }

    .home-step-pic {
        height: 224px;
    }

    .home-step-pic > * {
        scale: 1.16;
    }

    .home-step-arrow {
        position: absolute;
        top: 88px;
        inset-inline-start: calc(100% + (var(--step-gap) - 52px) / 2);
        width: 52px;
        height: 52px;
        margin: 0;
        transform: none;
    }

    [dir="rtl"] .home-step-arrow {
        transform: scaleX(-1);
    }
}

@media (max-width: 600px) {
    .home-step-pic {
        height: 168px;
    }
}

/* 08  All recipes, results, the rhythm -----------------------------------------
   Every recipe is the shared grid of photo cards. A search's or a
   filter's results come first, on the chosen category's wash (paper for
   a search alone), their summary (the shared live region, with the way
   back to every recipe) over the cards. The first section under the head
   starts close under it; paper sections in a row share one gap (their
   openers' red lines do the separating); and the last one on paper ends
   at the footer's own margin. */
#home-rest > .section:first-child {
    padding-top: clamp(24px, 3vw, 40px);
}

.home-queue,
.home-results:not(.ground-cat) {
    padding-bottom: 0;
}

#home-rest > .section:last-child:not([class*="ground-"]) {
    padding-bottom: 0;
}

.home-results .results-summary {
    font-size: var(--t-m);
}

/* "See all 17": a button under the first rows that opens the rest in
   place and steps aside, so the rows run on as one grid (the second
   list's own top padding plus this margin make one row gap). */
.home-more > summary {
    display: flex;
    width: fit-content;
    margin: var(--s-7) auto 0;
    list-style: none;
}

.home-more > summary::-webkit-details-marker {
    display: none;
}

.home-more[open] > summary {
    display: none;
}

.home-more > .recipe-index {
    margin-top: 18px;
}

/* 09  Join -------------------------------------------------------------------
   /join's card (account.css section 04: the eight dividers' tabs on its
   top edge, the price, the four perks with their glyphs, the one way on),
   on the dessert wash. The price is the section's heading here; the card
   stands at the top of the section, with room above it for its tabs. */
.home-join .join-card {
    margin-top: 22px;
}

/* 10  "Our story" (/about) ---------------------------------------------------
   The founder's words set large in the pen on the journal's wash, the
   title on the red line (.page-title), the journal drawn beside them (under them on
   phones); then a strip of real recipes' photos on paper, each mounted on
   its category's fill and tilted a little, as prints tucked into a
   journal; then the one way on. */
.about-grid {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: var(--s-7) var(--s-8);
    align-items: center;
}

.about-text {
    min-width: 0;
}

.about-words {
    display: grid;
    gap: 0.9em;
    max-width: 32em;
    margin-top: clamp(24px, 3vw, 40px);
    font-family: var(--serif);
    font-size: clamp(1.25rem, 1rem + 0.9vw, 1.75rem);
    font-weight: 400;
    line-height: 1.5;
    color: var(--pen);
}

.about-words:lang(ja) {
    word-break: auto-phrase;
}

.about-journal .journal {
    max-width: 380px;
}

@media (min-width: 900px) {
    .about-grid {
        grid-template-columns: minmax(0, 7fr) minmax(0, 5fr);
    }

    .about-journal .journal {
        max-width: 440px;
    }
}

.about-photos {
    padding-bottom: 0;
}

.about-strip {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: var(--s-5) var(--s-4);
    margin: 0;
    padding: 0;
    list-style: none;
}

.about-snap .photo-mount {
    display: block;
    padding: 8px;
    transform: rotate(-2deg);
    transition: transform 180ms var(--ease);
}

.about-snap:nth-child(even) .photo-mount {
    transform: rotate(1.5deg);
}

.about-snap:nth-child(3n) .photo-mount {
    transform: rotate(-1deg);
}

.about-snap .photo-mount:hover,
.about-snap .photo-mount:focus-visible {
    transform: translateY(-8px);
}

.about-snap img {
    aspect-ratio: 1;
    height: auto;
    object-fit: cover;
}

.about-on {
    display: flex;
    justify-content: center;
    padding-top: var(--section);
}

@media (min-width: 900px) {
    .about-strip {
        grid-template-columns: repeat(6, minmax(0, 1fr));
        gap: var(--s-5);
    }
}

/* 11  Right to left, forced colours, print -------------------------------------
   Right to left the hand fans the other way, from the same point. In
   forced colours the fills drop out: the cards, tabs and drawings keep
   their edges in CanvasText. Printed, the home page keeps its recipes,
   all of them: "See all" opens itself where the browser lets it
   (::details-content). */
[dir="rtl"] .home-hand-card {
    transform-origin: 70% 150%;
    transform: translateX(-50%) translateX(calc(var(--x) * var(--u) * -1)) rotate(calc(var(--rot) * -1)) translateY(calc(var(--lift) * var(--u)));
}

@media (forced-colors: active) {
    .home-hand-card,
    .home-mini,
    .home-lead-card,
    .home-sheet,
    .home-scores,
    .home-cook {
        border-color: CanvasText;
    }
}

@media print {
    .home-hero,
    .home-queue,
    .home-cats,
    .home-story,
    .home-how,
    .home-join,
    .about-photos,
    .about-on,
    .home-more > summary {
        display: none;
    }
}

@media print {
    .home-more::details-content {
        content-visibility: visible;
    }
}