/* Donations page: how to give, and the two sheets to print.
 *
 * The numbered steps, the reveal over them and the dark panel are all
 * primitives from global.css — this file is only the two things no other page
 * draws: the "no money changes hands here" notice, and the document sheets.
 *
 * A sheet is a heading, a download, and the PDF's own pages as images. They
 * are the widest things on the site, so the grid is the one place here that
 * needs real layout: two pages side by side where there is room, stacked where
 * there is not, and never wider than a page of A4 looks sensible at.
 */

/* --- No payment gateway, said plainly ----------------------------------- */

/* A postscript to the lede, not a box and not a banner. It was bracketed by
   its own hairlines at first, which put two short rules directly above the
   full-width one that opens the steps — three dividers in 120px, none of them
   lining up. The change of voice from the serif lede to mono is the
   separation it needs; the page's own rule below does the dividing. */
.donate-notice {
    margin: var(--space-4) 0 0;
    font-size: 0.8rem;
    line-height: 1.7;
    color: var(--color-text-muted);
    max-width: 60ch;
}

/* --- Where it goes ------------------------------------------------------ */

.donate-support { margin-top: 64px; }

.donate-support__title {
    font-size: clamp(1.75rem, 4vw, 2.5rem);
    margin-bottom: 28px;
}

/* The same three-across shape as the tier strip, minus the numbers: these are
   three things Legacy does, not three values to compare. */
.donate-support__list {
    display: grid;
    grid-auto-flow: column;
    grid-auto-columns: minmax(0, 1fr);
    gap: 1px;
    background: rgba(240, 248, 234, 0.15);
    list-style: none;
    margin: 0;
    padding: 0;
}

.donate-support__item {
    background: var(--color-ink-dark);
    /* Three short phrases, so the band is shallower than the tier strip it
       borrows its shape from: at the strip's 24px the panel was mostly air. */
    padding: 20px;
    font-size: 0.75rem;
    line-height: 1.7;
    letter-spacing: 0.06em;
    color: rgba(240, 248, 234, 0.72);
}

.donate-support__item:first-child { padding-left: 0; }

@media (max-width: 640px) {
    .donate-support { padding: 34px 26px; }
    .donate-support__list {
        grid-auto-flow: row;
        grid-template-columns: minmax(0, 1fr);
    }
    .donate-support__item { padding-left: 0; }
}

/* --- The documents ------------------------------------------------------ */

.donate-documents__head { margin-top: 64px; }

.donate-documents__lede {
    max-width: 60ch;
    font-size: 0.8rem;
    line-height: 1.75;
    color: var(--color-text-muted);
    /* Clear of the first sheet's heavy rule, which is a section opening and
       not this paragraph's underline. */
    margin: 0 0 40px;
}

/* 64px is the page's own step between sections — the rule above the steps, the
   panel, the documents heading all use it — so two sheets are that far apart
   rather than a number of their own. */
.donate-documents {
    display: flex;
    flex-direction: column;
    gap: 64px;
}

.sheet {
    display: flex;
    flex-direction: column;
    gap: var(--space-5);
    padding-top: 28px;
    border-top: 1px solid var(--color-text);
}

.sheet__head {
    display: flex;
    flex-direction: column;
    gap: var(--space-3);
    max-width: 56ch;
}

.sheet__title {
    font-family: var(--font-serif);
    font-size: clamp(1.5rem, 3vw, 2rem);
    margin: 0;
}

.sheet__summary {
    margin: 0;
    font-size: 0.8rem;
    line-height: 1.75;
    color: var(--color-text-muted);
}

.sheet__actions {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--space-4);
    margin: var(--space-2) 0 0;
}

.sheet__file-note {
    font-size: 0.63rem;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--color-text-muted);
}

/* The tracks fill the column so the pages end where the rules and the prose
   above them end — at 320px fixed they stopped 170px short of the right edge,
   which read as a block that had failed to load rather than a deliberate
   margin. The cap on a figure is what keeps a one-page document from becoming
   a wall of scanned A4: it holds near the size of a page on a desk whether
   there are two of them or one. */
.sheet__pages {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
    gap: var(--space-5);
}

.sheet__page {
    margin: 0;
    max-width: 440px;
}

/* The page image is the link, so the focus ring has to be on something that
   has a shape — an inline <a> around a block image collapses to nothing. */
.sheet__page-link {
    display: block;
    border: 1px solid var(--color-border);
    background: #fff;
}

.sheet__page-link:hover { border-color: var(--color-text); }

.sheet__page-image {
    display: block;
    width: 100%;
    height: auto;
}

.sheet__page-caption {
    margin-top: 10px;
    font-size: 0.63rem;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--color-text-muted);
}