/* ═══════════════════════════════════════════════════════
    simpleSoundbank — the paper pages
    The guides and the About page in the homepage's world: oat paper,
    brown-black ink, Archivo, ruled lists and a moss green accent. Loaded
    after styles.css, it re-sets that file's tokens and restyles the parts
    of the legal and guide layout these pages use.

    A plugin keeps its own colours where it appears: the download box at
    the end of a guide is a panel in its plugin's world (simpleSF2's navy,
    simpleSPU's cream), as the plugins are on the homepage, and the guides
    index marks each guide with its plugin's dot. Gold isn't used.
    ═══════════════════════════════════════════════════════ */

@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;
}

:root {
    color-scheme: light;

    --font-title:   "Archivo", -apple-system, "Segoe UI", Roboto, sans-serif;
    --font-body:    "Archivo", -apple-system, "Segoe UI", Roboto, sans-serif;

    --bg:           oklch(0.948 0.016 78);
    --surface:      oklch(0.968 0.012 80);
    --surface-2:    oklch(0.912 0.021 75);
    --surface-3:    oklch(0.88 0.024 75);
    --border:       oklch(0.225 0.018 50 / 0.14);
    --border-hover: oklch(0.225 0.018 50 / 0.26);
    --border-accent:oklch(0.48 0.11 140 / 0.35);

    --text:         oklch(0.225 0.018 50);
    --text-secondary: oklch(0.39 0.018 50);
    --text-muted:   oklch(0.48 0.016 55);
    --text-dim:     oklch(0.48 0.016 55);

    /* styles.css calls its accent "gold"; here it's the homepage's moss green. */
    --gold:         oklch(0.48 0.11 140);
    --gold-light:   oklch(0.4 0.1 140);
    --gold-subtle:  oklch(0.48 0.11 140 / 0.08);
    --gold-glow:    oklch(0.48 0.11 140 / 0.12);

    --green:        #2f7d3c;
    --red-muted:    #a6493b;

    --shadow-sm:    0 1px 2px oklch(0.3 0.04 55 / 0.08);
    --shadow-card:  0 1px 2px oklch(0.3 0.04 55 / 0.06), 0 0 0 1px var(--border);
    --shadow-card-hover: 0 8px 20px -10px oklch(0.3 0.05 55 / 0.3), 0 0 0 1px var(--border-hover);

    --lift:         0 1px 2px oklch(0.3 0.04 55 / 0.08), 0 14px 30px -18px oklch(0.3 0.05 55 / 0.45);
}

body {
    font-size: 16px;
}

/* The site's paper grain, turned up as on the homepage. */
body::before {
    opacity: 0.05;
}

::selection {
    background: var(--gold);
    color: var(--bg);
}

/* ── Header and footer: the site's black, with the homepage's greys in place
   of gold, and the Download pill in paper. ── */
.site-header {
    --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);
}

.site-header[data-cta="sf2"] .nav-cta,
.site-header[data-cta="sf2"] .nav-cta:hover,
.site-header[data-cta="sf2"] .nav-cta:focus-visible {
    background: #f2f0ea;
    border-color: transparent;
    color: #1b1c22;
    box-shadow: none;
}

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

/* ═════ The page head ═════ */
.legal-header {
    padding-bottom: 1.5rem;
    border-bottom: 1px solid var(--text);
}

/* The label over the title, in sentence case with the accent's dot. */
.section-label {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    color: var(--text-muted);
    font-stretch: 88%;
    font-size: 0.85rem;
    font-weight: 560;
    letter-spacing: 0;
    text-transform: none;
}

.section-label::before {
    content: "";
    width: 0.5rem;
    height: 0.5rem;
    border-radius: 50%;
    background: var(--gold);
}

.legal-header h1 {
    margin-top: 0.6rem;
    color: var(--text);
    font-stretch: 114%;
    font-size: clamp(2.1rem, 1.3rem + 3vw, 3.25rem);
    font-weight: 760;
    line-height: 1.02;
    letter-spacing: -0.03em;
    text-wrap: balance;
}

.guide-lede {
    margin-top: 1.1rem;
    font-size: 1.125rem;
    line-height: 1.55;
    text-wrap: pretty;
}

.legal-updated {
    margin-top: 0.9rem;
    font-size: 0.875rem;
    color: var(--text-muted);
}

/* ═════ The body ═════ */
.legal-body h2 {
    margin-top: 2.25rem;
    margin-bottom: 0.7rem;
    color: var(--text);
    font-stretch: 106%;
    font-size: 1.5rem;
    font-weight: 700;
    line-height: 1.15;
    letter-spacing: -0.02em;
}

.legal-body section:first-child h2,
.legal-body > h2:first-child {
    margin-top: 0;
}

.legal-body h3 {
    font-size: 1.1rem;
    font-weight: 650;
}

.legal-body p,
.legal-body li {
    font-size: 1rem;
    line-height: 1.65;
}

.legal-body li::before {
    content: "";
    top: 0.85em;
    left: 0.25rem;
    width: 0.4rem;
    height: 0.4rem;
    border-radius: 50%;
    background: var(--gold);
}

/* Numbered steps: ink numbers in a ruled circle. */
.guide-body ol li::before {
    top: 0.35rem;
    left: 0;
    width: 1.45rem;
    height: 1.45rem;
    border-radius: 50%;
    background: transparent;
    border: 1px solid var(--text);
    color: var(--text);
    font-size: 0.78rem;
    font-weight: 650;
    line-height: 1.35rem;
    font-variant-numeric: tabular-nums;
}

/* Links read as ink and answer in the accent, as on the homepage. */
.legal-body a:not(.button),
.legal-updated a {
    color: var(--text);
    text-decoration-color: var(--border-hover);
    text-decoration-thickness: from-font;
    text-underline-offset: 3px;
}

.legal-body a:not(.button):hover,
.legal-updated a:hover {
    color: var(--text);
    text-decoration-color: var(--gold);
}

.guide-body code {
    background: var(--surface-2);
    border-color: transparent;
}

.guide-shot img {
    border: 0;
    outline: 1px solid oklch(0 0 0 / 0.1);
    outline-offset: -1px;
    border-radius: 12px;
}

.guide-shot figcaption {
    font-size: 0.875rem;
}

/* Tables: ruled, opened by an ink line, no box. */
.legal-table-wrap {
    border: 0;
    border-radius: 0;
    border-top: 1px solid var(--text);
    border-bottom: 1px solid var(--border);
}

.legal-body table {
    font-size: 0.95rem;
}

.legal-body thead {
    background: transparent;
}

.legal-body th {
    padding: 0.7rem 0.85rem 0.7rem 0;
    color: var(--text-muted);
    font-stretch: 88%;
    font-size: 0.85rem;
    font-weight: 560;
    letter-spacing: 0;
    text-transform: none;
}

.legal-body td {
    padding: 0.7rem 0.85rem 0.7rem 0;
}

.quick-answer th[scope="row"] {
    font-size: 0.9rem;
}

/* ═════ Buttons ═════
   The SF2 downloads in simpleSF2's blue, as on the homepage; simpleSPU's
   keep their coral. Square-shouldered, with a press. */
.button {
    border-radius: 10px;
    font-family: var(--font-sheet, var(--font-body));
}

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

.button-primary,
.legal-body .quick-answer-cta .button-primary,
.legal-body .quick-answer-cta .button-primary:hover {
    background: #5b8cf5;
    color: #0b1020;
    border-color: color-mix(in oklch, #5b8cf5, black 25%);
    box-shadow: none;
}

.button-primary:hover {
    background: #86aaf9;
    box-shadow: none;
    filter: none;
}

.button-ghost {
    background: transparent;
    color: var(--text);
    border-color: var(--text);
}

.button-ghost:hover {
    background: var(--text);
    color: var(--bg);
    border-color: var(--text);
}

.guide-download-spu .button-primary,
.legal-body .quick-answer-cta-spu .button-primary,
.legal-body .quick-answer-cta-spu .button-primary:hover,
.legal-body .unlock-next-spu .button-primary {
    background: #e8704a;
    color: #292432;
    border-color: color-mix(in oklch, #e8704a, black 25%);
    box-shadow: none;
}

.guide-download-spu .button-primary:hover {
    background: #f08a66;
}

/* ── The one-line prompt under the quick answer, tinted by its plugin ── */
.legal-body .quick-answer-cta {
    border-radius: 12px;
    background: oklch(0.62 0.15 262 / 0.1);
    border-color: oklch(0.62 0.15 262 / 0.35);
    font-size: 0.95rem;
}

.legal-body .quick-answer-cta-spu {
    background: rgba(232, 112, 74, 0.1);
    border-color: rgba(232, 112, 74, 0.38);
}

.legal-body .unlock-next {
    border-radius: 12px;
}

/* ── The card pointing an SF2 guide at the PS1 guide: simpleSPU's cream ── */
.legal-body a.related-guide-card {
    border-radius: 14px;
    background: #efe1c0;
    border-color: transparent;
    box-shadow: var(--lift);
    transition: transform 200ms ease-out;
}

.legal-body a.related-guide-card:hover,
.legal-body a.related-guide-card:focus-visible {
    background: #efe1c0;
    border-color: transparent;
    transform: translateY(-2px);
}

.related-guide-text,
.related-guide-text strong {
    color: #292432;
}

.related-guide-link {
    color: #a8401f;
}

/* ═════ The download box at the end of a guide ═════
   A panel in its plugin's world. Each re-sets the ink tokens, so the
   heading, text and ghost buttons inside follow. */
.guide-download .download-inner {
    --text: #eef1f8;
    --text-secondary: #b9c0d0;
    --text-muted: #b9c0d0;
    --border: rgba(255, 255, 255, 0.14);
    --border-hover: rgba(255, 255, 255, 0.26);
    --bg: #161a24;
    border: 0;
    border-radius: 20px;
    background: #161a24;
    box-shadow: var(--lift);
}

.guide-download-spu .download-inner {
    --text: #292432;
    --text-secondary: #4a4352;
    --text-muted: #4a4352;
    --border: rgba(41, 36, 50, 0.16);
    --border-hover: rgba(41, 36, 50, 0.3);
    --bg: #efe1c0;
    background: #efe1c0;
}

.download-inner h2 {
    color: var(--text);
    font-stretch: 110%;
    font-weight: 740;
}

.guide-download-more a {
    color: #93b4ff;
}

.guide-download-more a:hover {
    color: #b8cdff;
}

.guide-download-spu .guide-download-more a,
.guide-download-spu .guide-download-more a:hover {
    color: #a8401f;
}

.download-inner .linux-vst3-alt {
    color: var(--text-muted);
    text-decoration-color: var(--border-hover);
}

/* ═════ The guides index: a table of contents ═════
   Each guide is a ruled row, its title marked with its plugin's dot
   (simpleSPU's coral for the PS1 guides, simpleSF2's blue for SoundFonts,
   the accent for the free tool). */
/* The page head's ink rule already opens the list. */
.guide-index {
    display: block;
}

.guide-index .product-card {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    grid-template-areas:
        "title link"
        "desc link";
    column-gap: 2rem;
    row-gap: 0.25rem;
    padding: 1.1rem 0;
    border: 0;
    border-bottom: 1px solid var(--border);
    border-radius: 0;
    background: transparent;
    box-shadow: none;
}

.guide-index .product-card:hover {
    border-color: var(--border);
    box-shadow: none;
}

.guide-index .product-card h3 {
    grid-area: title;
    color: var(--text);
    font-stretch: 104%;
    font-size: 1.2rem;
    font-weight: 650;
    line-height: 1.25;
}

.guide-index .product-card h3::before {
    content: "";
    display: inline-block;
    width: 0.5rem;
    height: 0.5rem;
    margin-inline-end: 0.6rem;
    border-radius: 50%;
    background: var(--dot, #5b8cf5);
    vertical-align: 0.12em;
}

.guide-index .product-card[href*="ps1"] { --dot: #e8704a; }
.guide-index .product-card[href*="/tools/"] { --dot: var(--gold); }

.guide-index .product-card p {
    grid-area: desc;
    padding-inline-start: 1.1rem;
    color: var(--text-secondary);
    font-size: 0.95rem;
    line-height: 1.5;
}

.guide-index .product-link {
    grid-area: link;
    align-self: center;
    color: var(--text-muted);
    font-size: 0.9rem;
    font-weight: 600;
    white-space: nowrap;
    transition: color 150ms ease-out, transform 150ms ease-out;
}

.guide-index .product-card:hover h3 {
    text-decoration: underline;
    text-decoration-thickness: from-font;
    text-underline-offset: 3px;
    text-decoration-color: var(--gold);
}

.guide-index .product-card:hover .product-link {
    color: var(--gold);
    transform: translateX(3px);
}

@media (max-width: 600px) {
    .guide-index .product-card {
        grid-template-columns: minmax(0, 1fr);
        grid-template-areas:
            "title"
            "desc"
            "link";
    }

    .guide-index .product-link {
        justify-self: start;
        padding-inline-start: 1.1rem;
        margin-top: 0.2rem;
    }
}

@media (prefers-reduced-motion: reduce) {
    .legal-body a.related-guide-card,
    .guide-index .product-link {
        transition: none;
    }

    .legal-body a.related-guide-card:hover,
    .guide-index .product-card:hover .product-link {
        transform: none;
    }
}

/* ── The email sign-up inside the after-download banner ──
   site-footer.css draws the form for the footer's black; inside a banner on
   paper it takes the page's ink. The footer's own form stays as it is. */
.unlock-next .email-signup-label {
    color: var(--text);
}

.unlock-next .email-signup input {
    border-color: var(--border-hover);
    background: var(--surface);
    color: var(--text);
}

.unlock-next .email-signup input::placeholder {
    color: var(--text-muted);
}

.unlock-next .email-signup input:focus-visible {
    border-color: var(--gold);
}

.unlock-next .email-signup button {
    border-color: var(--text);
    background: transparent;
    color: var(--text);
}

.unlock-next .email-signup button:hover,
.unlock-next .email-signup button:focus-visible {
    border-color: var(--text);
    background: var(--text);
    color: var(--bg);
}

.unlock-next .email-signup-status {
    color: var(--text-muted);
}

.unlock-next .email-signup.is-error .email-signup-status {
    color: var(--red-muted);
}

.unlock-next .email-signup.is-done .email-signup-status {
    color: var(--green);
}