/* ═══════════════════════════════════════════════════════
    simpleSoundbank — the homepage
    A spec sheet on warm, grainy paper: brown-black ink, ruled lists,
    numbered entries. Most of its colour belongs to the plugins: each entry
    is a panel in its plugin's own world (simpleSPU's cream and teal,
    simpleSF2's navy). A panel re-sets the page's ink and paper tokens, so
    everything inside it follows. The page's own accent is a moss green,
    used like a pen on the sheet: the headline's underline, the tape on the
    note, and what answers a pointer.

    The first view lays the plugins on the page as two prints. Under it,
    the lineup gives each plugin one ruled row: name and kind, what it
    does, then price and the way in. No panels and no pictures there; the
    prints already show them. The full details are on /plugins/.

    A new plugin: copy a .line in index.html, give it a data-product, and
    add a block of tokens here.
    ═══════════════════════════════════════════════════════ */

@font-face {
    font-family: "Archivo";
    font-style: normal;
    font-weight: 100 900;
    font-stretch: 62% 125%;
    font-display: block;
    src: url("/fonts/archivo-latin.woff2") format("woff2");
    unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

/* Only the headline's "on purpose." uses the italic, so it swaps in rather than
   holding the page back. */
@font-face {
    font-family: "Archivo";
    font-style: italic;
    font-weight: 100 900;
    font-stretch: 62% 125%;
    font-display: swap;
    src: url("/fonts/archivo-italic-latin.woff2") format("woff2");
    unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

/* ── The page's own colours and measures ──
   Oat paper and a brown-black ink, so nothing on the page is a cold grey.
   The header and footer stay the site's black: they are the same chrome on
   every page, the way they sit on simpleSPU's cream. */
body.home {
    --paper:       oklch(0.948 0.016 78);
    --paper-deep:  oklch(0.912 0.021 75);
    --ink:         oklch(0.225 0.018 50);
    --ink-soft:    oklch(0.39 0.018 50);
    --ink-quiet:   oklch(0.48 0.016 55);
    --rule:        oklch(0.225 0.018 50 / 0.16);
    --rule-strong: var(--ink);
    /* Moss green: no plugin owns it (coral, blue) and it isn't the old gold. */
    --accent:      oklch(0.48 0.11 140);
    --accent-wash: oklch(0.48 0.11 140 / 0.1);
    --lift:        0 1px 2px oklch(0.3 0.04 55 / 0.08), 0 14px 30px -18px oklch(0.3 0.05 55 / 0.45);

    --font-sheet:  "Archivo", -apple-system, "Segoe UI", Roboto, sans-serif;
    /* The header and footer's own measure, so the sheet shares their edges. */
    --sheet-w:     min(calc(100% - 2rem), 1080px);
    --gap:         2rem;

    /* 1-4-9: a breath, a component, a section. */
    --u1: 0.5rem;
    --u4: 2rem;
    --u9: 4.5rem;

    --ease-sheet:  cubic-bezier(0.2, 0, 0, 1);

    background: var(--paper);
    color: var(--ink);
    font-family: var(--font-sheet);
    font-size: 16px;
    line-height: 1.6;
}

/* The site's paper grain, turned up so the page feels printed. */
body.home::before {
    opacity: 0.05;
}

body.home ::selection {
    background: var(--accent);
    color: var(--paper);
}

.home .site-header {
    --header-text: #ececf1;
    --header-muted: #8a8a94;
    --header-gold: #c9c9d1;
    --header-gold-light: #f4f4f7;
    --header-gold-subtle: rgba(255, 255, 255, 0.05);
    --header-gold-border: rgba(255, 255, 255, 0.14);
}

.home .site-footer {
    --footer-text: #ececf1;
    --footer-muted: #8a8a94;
    --footer-dim: #5c5c66;
    --footer-gold: #f4f4f7;
}

.sheet ol {
    list-style: none;
}

.sprite {
    position: absolute;
    width: 0;
    height: 0;
    overflow: hidden;
}

/* ── Each plugin's colours ──
   --p-ink is the plugin's colour as text on paper; --p-dot marks the plugin in
   lists. A catalogue card (.pcard) also re-sets the ink and paper tokens to
   its panel. */
[data-product="spu"] {
    --p-dot: #e8704a;
    --p-art: #3f7378;
    --p-art-pattern: radial-gradient(rgba(255, 244, 216, 0.14) 1px, transparent 1.5px) 0 0 / 12px 12px;
    --p-ink: #a8401f;
    --p-button: #e8704a;
    --p-button-hover: #f08a66;
    --p-button-text: #292432;
    --wm-face: #292432;
    --wm-shadow: #e8704a;
}

[data-product="spc"] {
    --p-dot: #6c4fc9;
    --p-art: #2b2933;
    --p-art-pattern: radial-gradient(120% 90% at 50% 0%, rgba(127, 100, 216, 0.4), transparent 70%);
    --p-ink: #5a3fb6;
    --p-button: #6c4fc9;
    --p-button-hover: #7f64d8;
    --p-button-text: #f7f4ff;
    --wm-face: #292432;
    --wm-shadow: #6c4fc9;
}

[data-product="fm"] {
    --p-dot: #e0202f;
    --p-art: #0c0c0e;
    --p-art-pattern: repeating-linear-gradient(to bottom, rgba(0, 0, 0, 0.75) 0 2px, rgba(255, 255, 255, 0.06) 2px 3px, transparent 3px 4px),
        radial-gradient(120% 90% at 50% 0%, rgba(224, 32, 47, 0.35), transparent 70%);
    --p-ink: #b3131f;
    --p-button: #e0202f;
    --p-button-hover: #f5505b;
    --p-button-text: #fff7f4;
    --wm-face: #292432;
    --wm-shadow: #a8131f;
}

/* simpleSF2 in blue, from the navy of its own window. */
[data-product="sf2"] {
    --p-dot: #5b8cf5;
    --p-art: #222b40;
    --p-art-pattern: radial-gradient(120% 90% at 30% 0%, rgba(91, 140, 245, 0.32), transparent 70%);
    --p-ink: #2b58c4;
    --p-button: #5b8cf5;
    --p-button-hover: #86aaf9;
    --p-button-text: #0b1020;
}

/* Guides wear the dot of the plugin they're about. */
[data-topic="spu"] { --p-dot: #e8704a; }
[data-topic="sf2"] { --p-dot: #5b8cf5; }

/* The panels: simpleSPU on its own cream with its own ink, simpleSF2 on the
   navy of its window, where its blue lightens to read on the dark. */
.pcard[data-product="spu"] {
    --panel: #efe1c0;
    --ink: #292432;
    --ink-soft: #4a4352;
    --ink-quiet: #675d6d;
    --rule: rgba(41, 36, 50, 0.16);
}

.pcard[data-product="sf2"] {
    --panel: #161a24;
    --ink: #eef1f8;
    --ink-soft: #b9c0d0;
    --ink-quiet: #8f97aa;
    --rule: rgba(255, 255, 255, 0.12);
    --p-ink: #93b4ff;
}

/* ═════ Shared pieces ═════ */

/* Labels: Archivo pulled a little narrow, in sentence case so they read as
   words rather than stencils. */
.running-head,
.terms-list dt,
.guide-topic {
    font-stretch: 88%;
    font-weight: 560;
    font-size: 0.85rem;
    line-height: 1.3;
    color: var(--ink-quiet);
}

.sheet-heading {
    font-family: var(--font-sheet);
    font-stretch: 112%;
    font-weight: 720;
    font-size: clamp(1.75rem, 1.1rem + 2.2vw, 2.75rem);
    line-height: 1.02;
    letter-spacing: -0.02em;
    color: var(--ink);
    text-wrap: balance;
}

.sheet a:not(.cta) {
    text-decoration-line: underline;
    text-decoration-color: var(--rule);
    text-decoration-thickness: from-font;
    text-underline-offset: 3px;
    transition: text-decoration-color 150ms ease-out, color 150ms ease-out;
}

.sheet a:not(.cta):hover {
    text-decoration-color: var(--accent);
}

/* Inside a plugin's panel the plugin's own colour answers instead. */
.line a:not(.cta):hover {
    text-decoration-color: var(--p-ink);
}

/* The link rows carry their own hover, so their words go without underlines. */
.sheet .guide-list a,
.sheet .print,
.sheet .intro-link,
.sheet .entry-name a,
.sheet .entry-plate,
.sheet .line-link,
.sheet .lineup-all,
.sheet .guides-all {
    text-decoration: none;
}

.sheet a:focus-visible {
    outline: 2px solid var(--ink);
    outline-offset: 3px;
    border-radius: 2px;
}

/* ── Buttons: square-shouldered, one filled per entry in the plugin's colour,
   one drawn in ink. ── */
.cta {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 46px;
    padding: 0.6rem 1.15rem;
    border: 1px solid transparent;
    border-radius: 10px;
    font-family: var(--font-sheet);
    font-size: 0.95rem;
    font-weight: 620;
    line-height: 1.15;
    text-align: center;
    transition-property: background-color, border-color, color, transform;
    transition-duration: 150ms;
    transition-timing-function: ease-out;
}

.cta:active {
    transform: scale(0.98);
}

.cta-primary {
    background: var(--p-button, var(--ink));
    color: var(--p-button-text, var(--paper));
    border-color: color-mix(in oklch, var(--p-button, var(--ink)), var(--ink) 30%);
}

.cta-primary:hover {
    background: var(--p-button-hover, var(--ink-soft));
}

.cta-secondary {
    border-color: var(--ink);
    color: var(--ink);
}

.cta-secondary:hover {
    background: var(--ink);
    color: var(--panel, var(--paper));
}

/* ═════ Intro ═════ */
.intro {
    width: var(--sheet-w);
    margin: 0 auto;
    padding-top: var(--u4);
    display: grid;
    grid-template-columns: repeat(12, minmax(0, 1fr));
    column-gap: var(--gap);
}

.running-head {
    grid-column: 1 / -1;
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    gap: var(--u1) var(--u4);
    padding-bottom: var(--u1);
    border-bottom: 1px solid var(--rule-strong);
}

.running-head span:first-child {
    color: var(--ink);
}

.intro-title {
    grid-column: 1 / span 8;
    margin-top: var(--u9);
    font-family: var(--font-sheet);
    font-stretch: 118%;
    font-weight: 760;
    font-size: clamp(2.5rem, 1.1rem + 5vw, 5.25rem);
    line-height: 0.95;
    letter-spacing: -0.03em;
    color: var(--ink);
    text-wrap: balance;
}

.intro-title em {
    position: relative;
    font-style: italic;
    font-stretch: 108%;
    font-weight: 700;
}

/* A pen stroke under "on purpose.", drawn once when the page arrives. */
.scribble {
    position: absolute;
    inset-inline: 0.04em 0.3em;
    bottom: -0.16em;
    width: calc(100% - 0.34em);
    height: 0.24em;
    overflow: visible;
    fill: none;
    stroke: var(--accent);
    stroke-width: max(3px, 0.075em);
    stroke-linecap: round;
    vector-effect: non-scaling-stroke;
}

.intro-side {
    grid-column: 9 / -1;
    align-self: end;
    padding-top: var(--u4);
}

.intro-lede {
    max-width: 36ch;
    color: var(--ink-soft);
    font-size: 1.0625rem;
    line-height: 1.55;
    text-wrap: pretty;
}

/* ── The homepage's first view ──
   The claim on the left, and the plugins themselves on the right as two
   prints laid on the page, overlapping and a little askew, each with a
   price tag. They're the one thing the eye goes to; everything else is
   the headline, a line and a way in. */
.intro--hero {
    align-items: center;
    padding-top: 3.5rem;
}

.intro-copy {
    grid-column: 1 / span 6;
}

.intro--hero .intro-title {
    margin-top: 0;
    font-size: clamp(2.75rem, 1.4rem + 4.2vw, 5rem);
}

.intro--hero .intro-lede {
    max-width: 36ch;
    margin-top: 1.75rem;
    font-size: 1.125rem;
}

.intro-actions {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.75rem 1.5rem;
    margin-top: 2rem;
}

.cta-ink {
    background: var(--ink);
    color: var(--paper);
    border-color: var(--ink);
}

.cta-ink:hover {
    background: var(--ink-soft);
    border-color: var(--ink-soft);
}

.intro-link {
    font-weight: 620;
}

.intro-link span {
    display: inline-block;
    transition: transform 150ms ease-out, color 150ms ease-out;
}

.intro-link:hover span {
    transform: translateX(3px);
    color: var(--accent);
}

.stage {
    grid-column: 7 / -1;
    position: relative;
    aspect-ratio: 1.1 / 1;
}

.print {
    position: absolute;
    display: block;
    border-radius: 16px;
    box-shadow: 0 2px 4px oklch(0.3 0.04 55 / 0.1), 0 24px 44px -22px oklch(0.3 0.05 55 / 0.55);
}

.print--sf2 {
    top: 0;
    inset-inline-end: 0;
    width: 80%;
    rotate: 3deg;
    z-index: 1;
}

.print--spu {
    bottom: 0;
    inset-inline-start: 0;
    width: 76%;
    rotate: -2.5deg;
    z-index: 2;
}

/* The window sits in a mat of its plugin's colours. */
.print-plate {
    display: block;
    padding: 0.8rem;
    border-radius: 16px;
    background: var(--p-art-pattern), var(--p-art);
}

.print-plate img {
    width: 100%;
    border-radius: 8px;
    outline: 1px solid oklch(0 0 0 / 0.12);
    outline-offset: -1px;
}

/* The price tag, pinned to an edge of the print. */
.print-tag {
    position: absolute;
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.4rem 0.8rem 0.4rem 0.7rem;
    border-radius: 999px;
    background: var(--paper);
    color: var(--ink);
    box-shadow: 0 1px 2px oklch(0.3 0.04 55 / 0.15), 0 6px 14px -6px oklch(0.3 0.05 55 / 0.4);
    font-size: 0.9rem;
    line-height: 1.2;
    white-space: nowrap;
}

.print--sf2 .print-tag {
    top: -0.9rem;
    inset-inline-end: 1.25rem;
}

.print--spu .print-tag {
    bottom: -0.9rem;
    inset-inline-start: 1.25rem;
}

.print-name {
    font-weight: 650;
}

.print-name::before {
    content: "";
    display: inline-block;
    width: 0.5rem;
    height: 0.5rem;
    margin-inline-end: 0.45rem;
    border-radius: 50%;
    background: var(--p-dot);
    vertical-align: 0.08em;
}

.print-price {
    color: var(--ink-soft);
    font-weight: 600;
    font-variant-numeric: tabular-nums;
}

.print:focus-visible {
    outline: 2px solid var(--ink);
    outline-offset: 4px;
    border-radius: 18px;
}

.guide-topic::before {
    content: "";
    display: inline-block;
    width: 0.5rem;
    height: 0.5rem;
    margin-inline-end: 0.5rem;
    border-radius: 50%;
    background: var(--p-dot, var(--ink-quiet));
    vertical-align: 0.08em;
}

/* ═════ The lineup ═════
   One ruled row per plugin, in three parts: name and kind, what it does,
   price and the way in. The plugin's colour lives in its name, its dots
   and its button. The row itself isn't a link, so it doesn't react to the
   pointer; its name, button and link do. */
.lineup {
    width: var(--sheet-w);
    margin: var(--u9) auto 0;
    border-bottom: 1px solid var(--rule);
    scroll-margin-top: 4.5rem;
}

.lineup-head {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    justify-content: space-between;
    gap: var(--u1) var(--u4);
    padding-bottom: 1rem;
    border-bottom: 1px solid var(--rule-strong);
}

.lineup-all {
    font-weight: 620;
    white-space: nowrap;
}

.lineup-all span,
.line-link span {
    display: inline-block;
    transition: transform 150ms ease-out, color 150ms ease-out;
}

.lineup-all:hover span {
    transform: translateX(3px);
    color: var(--accent);
}

.line {
    display: grid;
    grid-template-columns: minmax(0, 3fr) minmax(0, 5fr) minmax(0, 3.4fr);
    column-gap: var(--gap);
    align-items: start;
    padding: 1.75rem 0;
}

.line + .line {
    border-top: 1px solid var(--rule);
}

.line-name .entry-name {
    line-height: 1;
}

.line-kind {
    margin-top: 0.55rem;
    color: var(--p-ink);
    font-weight: 600;
    font-size: 0.95rem;
}

.line-desc {
    max-width: 52ch;
    color: var(--ink-soft);
    font-size: 1.0625rem;
    line-height: 1.55;
    text-wrap: pretty;
}

.line-points {
    display: flex;
    flex-wrap: wrap;
    gap: 0.35rem 1.25rem;
    margin-top: 0.85rem;
}

.line-points li {
    display: inline-flex;
    align-items: baseline;
    gap: 0.5rem;
    color: var(--ink);
    font-size: 0.925rem;
    font-weight: 560;
}

.line-points li::before {
    content: "";
    flex: none;
    width: 0.4rem;
    height: 0.4rem;
    border-radius: 50%;
    background: var(--p-dot);
    translate: 0 -0.1em;
}

.line-price {
    line-height: 1;
    white-space: nowrap;
}

.line-price strong {
    font-stretch: 105%;
    font-size: 1.75rem;
    font-weight: 740;
    letter-spacing: -0.02em;
    font-variant-numeric: tabular-nums;
}

.line-price s {
    margin-inline-start: 0.3rem;
    color: var(--ink-quiet);
    font-variant-numeric: tabular-nums;
}

.line-note {
    margin-top: 0.5rem;
    color: var(--ink-quiet);
    font-size: 0.9rem;
    line-height: 1.45;
    text-wrap: pretty;
}

.line-actions {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.5rem 1.1rem;
    margin-top: 1rem;
}

.line-actions .cta {
    min-height: 42px;
    padding-block: 0.5rem;
}

.line-link {
    font-size: 0.95rem;
    font-weight: 620;
}

.line-link:hover span {
    transform: translateX(3px);
    color: var(--p-ink);
}

/* Shared with the catalogue's cards (/plugins/): a plugin's name, its sale
   tag, its price and the plate its window sits in. */
.entry-tag {
    padding: 0.2rem 0.6rem;
    border-radius: 999px;
    background: color-mix(in oklch, var(--p-dot), transparent 82%);
    color: var(--p-ink);
    font-size: 0.8rem;
    font-weight: 620;
    white-space: nowrap;
}

.entry-name a {
    display: inline-block;
}

.entry-name svg {
    display: block;
    width: auto;
    height: 34px;
}

.wm-face { fill: var(--wm-face); }
.wm-shadow { fill: var(--wm-shadow); }

/* simpleSF2 has no pixel wordmark; its name is set in the sheet's type. */
.entry-name--text {
    font-family: var(--font-sheet);
    font-stretch: 110%;
    font-size: 2.15rem;
    font-weight: 800;
    letter-spacing: -0.03em;
    color: var(--ink);
}

.entry-name--text span {
    color: var(--p-ink);
}

.entry-price {
    line-height: 1;
    white-space: nowrap;
}

.entry-price strong {
    font-stretch: 105%;
    font-size: 1.75rem;
    font-weight: 740;
    letter-spacing: -0.02em;
    font-variant-numeric: tabular-nums;
}

.entry-price s {
    margin-inline-start: 0.3rem;
    color: var(--ink-quiet);
    font-size: 1rem;
    font-variant-numeric: tabular-nums;
}

/* The plugin's window rises out of a plate in its own colours. */
.entry-plate {
    display: block;
    aspect-ratio: 16 / 10;
    padding: 1.4rem 1.4rem 0;
    overflow: hidden;
    border-radius: 12px;
    background: var(--p-art-pattern), var(--p-art);
    box-shadow: inset 0 0 0 1px oklch(0 0 0 / 0.1);
}

.entry-plate img {
    width: 100%;
    border-radius: 6px 6px 0 0;
    outline: 1px solid oklch(0 0 0 / 0.1);
    outline-offset: -1px;
    box-shadow: 0 -1px 18px oklch(0 0 0 / 0.28);
}

/* ═════ Terms ═════ */
.terms {
    width: var(--sheet-w);
    margin: var(--u9) auto 0;
    display: grid;
    grid-template-columns: repeat(12, minmax(0, 1fr));
    column-gap: var(--gap);
}

/* The heading over the terms on the left; Aiden's note on the right, spanning
   both and ending level with the last rule, so neither side leaves a hole. */
.terms .sheet-heading {
    grid-column: 1 / span 7;
    grid-row: 1;
}

/* A note in Aiden's own words, pinned slightly askew like a card left on the page. */
.maker-note {
    grid-column: 9 / -1;
    grid-row: 1 / span 2;
    align-self: end;
    position: relative;
    padding: 1.25rem 1.4rem 1.1rem;
    border-radius: 14px;
    background: var(--paper-deep);
    color: var(--ink-soft);
    font-size: 0.98rem;
    line-height: 1.55;
    rotate: -0.8deg;
}

/* A strip of tape holding it on. */
.maker-note::before {
    content: "";
    position: absolute;
    top: -0.6rem;
    inset-inline-start: 50%;
    width: 5.5rem;
    height: 1.3rem;
    translate: -50% 0;
    rotate: 3deg;
    background: oklch(0.8 0.08 140 / 0.62);
    box-shadow: 0 1px 1px oklch(0.3 0.04 55 / 0.08);
}

.maker-note p + p {
    margin-top: 0.7rem;
}

.maker-note a {
    color: var(--ink);
    overflow-wrap: anywhere;
}

.maker-sign {
    font-style: italic;
    font-weight: 620;
}

.maker-sign a {
    color: var(--accent);
}

.terms-list {
    grid-column: 1 / span 7;
    grid-row: 2;
    align-self: start;
    margin-top: var(--u4);
    border-top: 1px solid var(--rule-strong);
}

.terms-list > div {
    display: grid;
    grid-template-columns: 9rem minmax(0, 1fr);
    column-gap: var(--gap);
    align-items: baseline;
    padding: 1rem 0;
    border-bottom: 1px solid var(--rule);
}

.terms-list dd {
    max-width: 60ch;
    color: var(--ink-soft);
    text-wrap: pretty;
}

.terms-list dd a {
    color: var(--ink);
    overflow-wrap: anywhere;
}

/* ═════ Guides ═════ */
.guides {
    width: var(--sheet-w);
    margin: var(--u9) auto 0;
    scroll-margin-top: 4.5rem;
}

.guides-head {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    justify-content: space-between;
    gap: var(--u1) var(--u4);
    padding-bottom: 1rem;
    border-bottom: 1px solid var(--rule-strong);
}

.guides-all {
    font-weight: 620;
    white-space: nowrap;
}

.guides-all span {
    display: inline-block;
    transition: transform 150ms ease-out;
}

.guides-all:hover span {
    transform: translateX(3px);
    color: var(--accent);
}

.guide-list a {
    display: grid;
    grid-template-columns: 8rem minmax(0, 1.1fr) minmax(0, 1fr) 1.5rem;
    column-gap: var(--gap);
    align-items: baseline;
    /* The hover tint bleeds past the text edge; the rule below stays on it. */
    margin-inline: -0.75rem;
    padding: 1.1rem 0.75rem;
    transition: background-color 150ms ease-out;
}

.guide-list li {
    border-bottom: 1px solid var(--rule);
}

.guide-list a:hover {
    background: var(--accent-wash);
    border-radius: 10px;
}

.guide-title {
    font-stretch: 104%;
    font-size: 1.2rem;
    font-weight: 640;
    line-height: 1.25;
    text-wrap: balance;
}

.guide-desc {
    color: var(--ink-soft);
    font-size: 0.95rem;
    line-height: 1.5;
    text-wrap: pretty;
}

.guide-arrow {
    justify-self: end;
    transition: transform 150ms ease-out;
}

.guide-list a:hover .guide-arrow {
    transform: translateX(4px);
    color: var(--accent);
}

/* ═════ Colophon ═════ */
.colophon {
    width: var(--sheet-w);
    margin: var(--u9) auto 0;
    padding: 1rem 0 var(--u9);
    color: var(--ink-quiet);
    font-size: 0.875rem;
}

.colophon a {
    color: var(--ink);
}

/* ═════ Arrival ═════
   The first view sets itself once, in reading order: the headline and its
   line, then the two prints dropping onto the page, then the sheet below.
   Opt-in, so reduced motion simply gets the page. */
@media (prefers-reduced-motion: no-preference) {
    .intro-title,
    .intro-side,
    .intro--hero .intro-lede,
    .intro-actions {
        animation: sheet-set 520ms var(--ease-sheet) both;
    }

    .intro-side,
    .intro--hero .intro-lede {
        animation-delay: 100ms;
    }

    .intro-actions {
        animation-delay: 180ms;
    }

    .print {
        animation: print-drop 640ms var(--ease-sheet) both;
        transition: rotate 350ms var(--ease-sheet), translate 350ms var(--ease-sheet), box-shadow 350ms var(--ease-sheet);
    }

    .print--sf2 {
        animation-delay: 160ms;
    }

    .print--spu {
        animation-delay: 300ms;
    }

    /* Under the pointer a print lifts a little off the page and eases toward
       straight. The two keep their order, so nothing jumps in front. */
    .print--sf2:hover,
    .print--sf2:focus-visible {
        rotate: 1.5deg;
        translate: 0 -6px;
        box-shadow: 0 2px 4px oklch(0.3 0.04 55 / 0.1), 0 32px 56px -24px oklch(0.3 0.05 55 / 0.6);
    }

    .print--spu:hover,
    .print--spu:focus-visible {
        rotate: -1deg;
        translate: 0 -6px;
        box-shadow: 0 2px 4px oklch(0.3 0.04 55 / 0.1), 0 32px 56px -24px oklch(0.3 0.05 55 / 0.6);
    }

    .scribble path {
        stroke-dasharray: 1;
        animation: scribble-draw 650ms cubic-bezier(0.45, 0, 0.2, 1) 480ms both;
    }
}

@keyframes sheet-set {
    from {
        opacity: 0;
        transform: translateY(12px);
        filter: blur(4px);
    }
}

@keyframes sheet-fade {
    from { opacity: 0; }
}

@keyframes print-drop {
    from {
        opacity: 0;
        translate: 0 28px;
        rotate: 0deg;
    }
}

@keyframes scribble-draw {
    from { stroke-dashoffset: 1; }
    to { stroke-dashoffset: 0; }
}

/* ═════ Narrower screens ═════ */
@media (max-width: 1040px) {
    .intro-title {
        grid-column: 1 / -1;
    }

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

    .terms .sheet-heading,
    .terms-list,
    .maker-note {
        grid-column: 1 / -1;
    }

    .maker-note {
        grid-row: 3;
        align-self: start;
    }

    .maker-note {
        max-width: 36rem;
        margin-top: var(--u4);
    }

    .terms-list {
        margin-top: var(--u4);
    }

    .guide-list a {
        grid-template-columns: 7rem minmax(0, 1fr) 1.5rem;
        grid-template-areas:
            "topic title arrow"
            "topic desc arrow";
        row-gap: 0.3rem;
    }

    .guide-topic { grid-area: topic; }
    .guide-title { grid-area: title; }
    .guide-desc { grid-area: desc; }
    .guide-arrow { grid-area: arrow; align-self: center; }
}

/* The first view stacks: the claim, then the prints under it. */
@media (max-width: 900px) {
    .intro-copy,
    .stage {
        grid-column: 1 / -1;
    }

    .stage {
        width: min(100%, 560px);
        margin: 3rem auto 0;
    }
}

/* One column: the entries stack, each a complete sheet of its own. */
@media (max-width: 760px) {
    body.home {
        --gap: 1.25rem;
        --u9: 3.5rem;
    }

    .intro-title {
        margin-top: var(--u4);
    }

    .intro--hero {
        padding-top: 2rem;
    }

    .print-plate {
        padding: 0.55rem;
        border-radius: 12px;
    }

    .print {
        border-radius: 12px;
    }

    .print-tag {
        font-size: 0.8rem;
        padding: 0.3rem 0.65rem 0.3rem 0.55rem;
    }

    .intro-side {
        grid-template-columns: minmax(0, 1fr);
        padding-top: 1.5rem;
    }

    .line {
        grid-template-columns: minmax(0, 1fr);
        row-gap: 1rem;
    }

    .terms-list > div {
        grid-template-columns: minmax(0, 1fr);
        row-gap: 0.3rem;
    }

    .guide-list a {
        grid-template-columns: minmax(0, 1fr) 1.5rem;
        grid-template-areas:
            "topic arrow"
            "title arrow"
            "desc arrow";
    }
}