/*
 * The gift guides, which the server renders and the bundle never touches.
 *
 * **A stylesheet of its own, at a path that does not move.** Everything the application wears is
 * built by Vite and comes out with a hash in its name, which is right for an asset a built document
 * references and useless to a document written by Rust: the server would have to know this build's
 * hash. This file sits in `public/`, so it is copied to `dist/` under exactly this name.
 *
 * The colours are the `stall` palette from `app.css`, written out rather than imported for the same
 * reason the mail templates repeat their shell: nothing here can reach a token defined there.
 * `app.css` is the original. If a colour moves there, it moves here in the same commit.
 */

/*
 * **Copied to the decimal, and six of these had drifted.** The promise above is the whole reason
 * this block is allowed to exist, and it was not being kept: the ground, the card, the ink, the
 * soft ink and the hairline were each a little off `app.css`, and `--ink-soft` at L 0.48 had walked
 * back most of the correction `theme.css` records against its own value ("L 0.46, not 0.5: at 0.5
 * the long paragraph on kraft measured 4.45:1, under the floor"). A copy nobody checks is a second
 * palette, which is what these four public pages were wearing.
 *
 * `--band-deep` is the awning's shadowed fold, which is what a filled button is everywhere else in
 * this product. There is no twelfth colour here: the accent that used to sit in this block was one,
 * and it is gone.
 */
:root {
    --band: oklch(0.32 0.055 155);
    --band-deep: oklch(0.25 0.045 155);
    --band-ink: oklch(0.96 0.015 120);
    --ground: oklch(0.95 0.006 145);
    --card: oklch(0.985 0.008 95);
    --ink: oklch(0.24 0.02 155);
    --ink-soft: oklch(0.46 0.02 155);
    --rule: oklch(0.86 0.012 145);

    /* The tarpaulin's own weave, the same 96deg stripe `theme.css` names. */
    --tarpaulin: repeating-linear-gradient(
        96deg,
        transparent 0 3.25rem,
        oklch(1 0 0 / 0.075) 3.25rem 6.5rem
    );
    --radius-card: 0.25rem;
}

/*
 * **The display face, which these pages were not wearing at all.** This file carried exactly one
 * `font-family` declaration and it was the system stack, so every heading on the four pages the
 * whole search-engine effort exists for was set in whatever the reader's machine has, while the
 * three woff2 files were already sitting in `public/fonts/` for the bundle. The weights are the two
 * this stylesheet letters with; the light 300 is the application's and is not needed here.
 */
@font-face {
    font-family: "Cabinet Grotesk";
    font-style: normal;
    font-weight: 500;
    font-display: swap;
    src: url("/fonts/cabinet-grotesk-500.woff2") format("woff2");
}

@font-face {
    font-family: "Cabinet Grotesk";
    font-style: normal;
    font-weight: 700;
    font-display: swap;
    src: url("/fonts/cabinet-grotesk-700.woff2") format("woff2");
}

* {
    box-sizing: border-box;
}

body {
    margin: 0;
    background: var(--ground);
    color: var(--ink);
    font-family: ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
    line-height: 1.6;
}

/*
 * **The stripe and the scalloped valance, because a band without them is a coloured header.**
 * DESIGN.md calls the valance "the single silhouette that makes a stall a stall rather than a
 * coloured header, so it is not optional decoration", and these four pages had neither it nor the
 * tarpaulin's weave: a flat green rectangle where every other page in the product carries a
 * market awning. Same radius, same mask geometry and same stripe as `.awning` in
 * `frontend/src/styles/surfaces.css`, written out for the reason the palette above is.
 *
 * The bottom padding clears the notches, so a scallop never reaches the mark hanging above it.
 */
.band {
    background-color: var(--band);
    background-image: var(--tarpaulin);
    color: var(--band-ink);
    padding-top: 1.25rem;
    padding-bottom: 2.35rem;
    mask-image: radial-gradient(0.85rem 0.85rem at 50% 100%, transparent 98%, black 100%);
    mask-size: 1.7rem 100%;
    mask-repeat: repeat-x;
    -webkit-mask-image: radial-gradient(0.85rem 0.85rem at 50% 100%, transparent 98%, black 100%);
    -webkit-mask-size: 1.7rem 100%;
    -webkit-mask-repeat: repeat-x;
}


/*
 * The same tarpaulin closing the page from below, with its scalloped edge along the *top*.
 *
 * **A footer wearing `.band` wears the header's valance upside down**, which is what these four
 * pages did: the last element in the document had notches chewed out of its own bottom edge with
 * the ground showing through them, and a flat join where it met the content above. The clearance
 * was on the wrong side too, so the mark sat against the notches instead of clear of them.
 * `surfaces.css` states the reason the valance turns over rather than repeating: the notches point
 * back at the thing they hang under, which is what stops a foot reading as a header that has fallen
 * down the page.
 */
.band-foot {
    background-color: var(--band);
    background-image: var(--tarpaulin);
    color: var(--band-ink);
    /* Mirrors the header's rule: the notches must not reach the text below them. */
    padding-top: 2.35rem;
    padding-bottom: 1.25rem;
    mask-image: radial-gradient(0.85rem 0.85rem at 50% 0%, transparent 98%, black 100%);
    mask-size: 1.7rem 100%;
    mask-repeat: repeat-x;
    -webkit-mask-image: radial-gradient(0.85rem 0.85rem at 50% 0%, transparent 98%, black 100%);
    -webkit-mask-size: 1.7rem 100%;
    -webkit-mask-repeat: repeat-x;
}

.band a,
.band-foot a {
    color: var(--band-ink);
}

/*
 * The mark, in the band's colourway. The two fills are `--color-brand-onband` and
 * `--color-brand-mark-onband` from `app.css`, written out because nothing here can reach a token
 * defined there. `app.css` is the original.
 *
 * 96 is the floor `Wordmark.svelte` documents: Big Caslon is a display cut whose hairlines are
 * thinner than a rendered pixel below about that, where a stroke landing on half a pixel is drawn
 * grey rather than thin, and the logo reads as blurred.
 */
.mark {
    display: inline-block;
    text-decoration: none;
}

.wordmark {
    display: block;
    width: auto;
    height: 96px;
}

.wordmark-letters {
    fill: oklch(0.96 0.015 120);
}

.wordmark-y {
    stroke: oklch(0.985 0.008 95);
}

/*
 * **96 in the foot as well, which is the floor eighteen lines above this.** It stood at 72 with an
 * opacity on it, which is below the size at which Big Caslon's hairlines land on a whole pixel: the
 * mark closing these pages was the blurred one the comment above exists to prevent, and a logo at
 * nine tenths opacity is a logo in a colour nobody chose.
 */
footer .wordmark {
    height: 96px;
}

/*
 * The band's contents stand in the same column `main` does.
 *
 * They used to be flush against the page edge while the article was a centred 42rem column, so on
 * anything wider than a phone the mark sat out on its own in the corner and nothing lined up with
 * anything. The padding moves off the band and onto its children, which is what makes the two one
 * column rather than two columns of the same width.
 *
 * **After `.mark`, and that is the whole of why it works.** Both selectors are one class, so the
 * later one wins — written above, `.mark`'s own `display: inline-block` beat the `block` here and
 * `margin-inline: auto` centres nothing on an inline box. The rule was in the file and did nothing.
 */
.band > *,
.band-foot > * {
    display: block;
    max-width: 42rem;
    margin-inline: auto;
    padding-inline: 1.5rem;
}

main {
    max-width: 42rem;
    margin: 0 auto;
    padding: 2rem 1.5rem 3rem;
}

h1,
h2,
.guides strong,
.press {
    font-family: "Cabinet Grotesk", ui-sans-serif, system-ui, sans-serif;
}

h1 {
    font-size: 1.9rem;
    font-weight: 700;
    line-height: 1.2;
    margin: 0 0 0.75rem;
    text-wrap: balance;
}

h2 {
    font-size: 1.375rem;
    font-weight: 700;
    margin: 0 0 0.35rem;
}

.lead {
    font-size: 1.05rem;
    color: var(--ink-soft);
    margin: 0 0 2rem;
}

section {
    background: var(--card);
    border: 1px solid var(--rule);
    border-radius: var(--radius-card);
    padding: 1.25rem;
    margin: 0 0 1rem;
}

section p {
    margin: 0;
}

section p + p {
    margin-top: 0.75rem;
}

/*
 * **An ordinary link is the soft ink, underlined.** It was painted in a colour this file invented
 * and put in a slot called `--accent`, at oklch(0.55 0.15 40), which is the brick `theme.css`
 * reserves for a refusal: "A refusal is legible before it is tasteful, and is never the colour of
 * an ordinary link." Every link on all four of these pages wore it, and so did every card title on
 * the index. This is what `.quiet` is everywhere else.
 */
a {
    color: var(--ink-soft);
}

a:hover {
    color: var(--ink);
}

/*
 * Every control gets a thumb's worth of height where a thumb is what is pointing, which is the same
 * rule `app.css` states for the application and the same reason: these pages are read on a phone.
 */
.shop,
footer a {
    display: inline-flex;
    align-items: center;
    text-decoration: underline;
}

@media (pointer: coarse) {
    .shop,
    footer a,
    .mark,
    .guides a {
        min-height: 2.75rem;
    }
}

.guides {
    list-style: none;
    margin: 0;
    padding: 0;
}

.guides li + li {
    margin-top: 0.75rem;
}

.guides a {
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
    background: var(--card);
    border: 1px solid var(--rule);
    border-radius: var(--radius-card);
    padding: 1.25rem;
    text-decoration: none;
    color: inherit;
}

.guides strong {
    color: var(--ink);
}

.guides span {
    color: var(--ink-soft);
    font-size: 0.95rem;
}

/*
 * The rest of the guides, under the one just read. It borrows `.guides` for the list itself, which
 * is the same component the index draws, so a card looks the same in both places and there is one
 * set of rules to keep.
 */
.others {
    margin-top: 2.5rem;
    border-top: 1px solid var(--rule);
    padding-top: 1.5rem;
}

.others h2 {
    font-size: 1.05rem;
    margin: 0 0 1rem;
}

.closing {
    border-top: 1px solid var(--rule);
    padding-top: 1.25rem;
    color: var(--ink-soft);
}

footer {
    font-size: 0.9rem;
}

footer p {
    max-width: 42rem;
    margin: 0 auto 0.5rem;
}

/*
 * The terms and the privacy statement.
 *
 * They share this stylesheet with the guides because they share the shell, and because a legal
 * document that looks like a different site is one somebody trusts less rather than more. What they
 * add is a list — a guide has none, and the sequence a non-payment clause describes is the one
 * place in this product where the order of the steps is the meaning.
 */
.legal .updated {
    font-size: 0.875rem;
    color: var(--ink-soft);
    margin: -1.5rem 0 0.25rem;
}

/*
 * The list of clauses at the top of a legal document.
 *
 * **Quiet, and not a card**, because it is a way in rather than a thing to read: the same hairline
 * the sections are separated by, the numbers the document is cited by, and no fill. On a phone it is
 * one column and about a screen tall, which is the price of not having to scroll nine of them.
 */
.legal .contents {
    margin: 0 0 2rem;
    border-top: 1px solid var(--rule);
    border-bottom: 1px solid var(--rule);
    padding: 1rem 0;
}

.legal .contents ol {
    margin: 0;
    padding-left: 1.4rem;
}

.legal .contents li + li {
    margin-top: 0.4rem;
}

.legal .contents a {
    text-decoration: none;
}

.legal .contents a:hover,
.legal .contents a:focus-visible {
    text-decoration: underline;
}

/*
 * A clause the reader was sent to should not sit against the top of the window, and a heading with
 * the band's own valance over it is a heading half read.
 */
.legal section[id] {
    scroll-margin-top: 1.5rem;
}

.legal .other-language {
    font-size: 0.875rem;
    margin: 0 0 2rem;
}

.legal section ul {
    margin: 0.75rem 0 0;
    padding-left: 1.25rem;
}

.legal section p + ul {
    margin-top: 0.75rem;
}

.legal section li + li {
    margin-top: 0.5rem;
}

/* The one block on either page that is about us rather than about the reader. */
.legal .seller p {
    margin-top: 0.35rem;
}

.legal .pending {
    margin-top: 0.75rem;
    color: var(--ink-soft);
}

/*
 * Scoped to the two links that are controls, never to `.legal a`. A link inside a paragraph given a
 * 2.75rem floor inflates the line box it sits in, so a sentence with a link in it gets a gap above
 * and below it — the touch rule is about something a thumb reaches for, not about every anchor.
 */
@media (pointer: coarse) {
    .legal .other-language a,
    .legal .seller a {
        min-height: 2.75rem;
        display: inline-flex;
        align-items: center;
    }
}

/*
 * The one thing a finished guide asks for.
 *
 * **This stylesheet is the whole of what a guide page loads.** The bundle never runs here, so
 * `app.css` and every class in it is out of reach: the ask was written with `class="ask"` and
 * `class="press"` on the reasoning that those exist, and on these pages neither does. What a reader
 * got was an unstyled paragraph and a bare blue link at the end of a thousand words.
 *
 * The sentence sits against the closing paragraph rather than under a rule of its own, because it
 * is the last line of the piece and not a footer.
 */
.ask {
    margin-top: 1.25rem;
}

/*
 * The band's own colours, which is what a press is everywhere else in this product: tarpaulin green
 * with the near-white that carries on it. Written out here rather than reached for, since this file
 * has no access to the application's tokens and defines its own.
 */
.press {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 3.25rem;
    padding: 0 1.4rem;
    border-radius: var(--radius-card);
    /* The fold, not the band: "the band overhead is never a control." */
    background: var(--band-deep);
    color: var(--card);
    font-weight: 700;
    text-decoration: none;
}

.press:hover,
.press:focus-visible {
    background: var(--band);
}

/*
 * The day a guide last changed, under its title. Quiet, because it answers "is this current" and
 * nothing more.
 */
.dated {
    margin: 0 0 1rem;
    font-size: 0.9rem;
    color: var(--ink-soft);
}

/*
 * The questions, each a heading with its answer directly under it, before the suggestions. Not
 * cards: they are the short version of the guide, read straight through.
 */
.questions {
    margin: 0 0 2rem;
}

.questions p {
    margin: 0 0 1.25rem;
}

/*
 * Going from one guide to the next is a page load, and both pages opting in is what lets the browser
 * crossfade them with no script. The application's own stylesheet says the same, so the way between
 * a guide and the front page fades too. Left out for a reader who asked for reduced motion.
 */
@media (prefers-reduced-motion: no-preference) {
    @view-transition {
        navigation: auto;
    }
}