/* Patchwell media site — holding-page stylesheet.
 *
 * Every colour here is a token from the canonical design system
 * (`patchwell/docs/design-system.md` § Palette), not a choice made in this
 * repo. Both themes are the ones defined there. The type is a system stack
 * rather than the canonical Mona Sans: shipping a webfont is a real design
 * decision with a real byte cost, and this page is a placeholder.
 *
 * This file is the whole visual layer and is meant to be replaced wholesale
 * once the site has a design. See `static/CONTEXT.md`.
 */

:root {
    --ink: #1A1D21;
    --blue: #0B5FD0;
    --surface: #FFFFFF;
    --page: #F6F7F9;
    --rule: #D8DCE1;
    --muted: #606A75;
    --stitch: #9AA2AA;
}

@media (prefers-color-scheme: dark) {
    :root {
        --ink: #E4E7EA;
        --blue: #5B9DFF;
        --surface: #151719;
        --page: #0E1013;
        --rule: #2A2F35;
        --muted: #8B949E;
        --stitch: #525B65;
    }
}

*, *::before, *::after { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; }

body {
    margin: 0;
    min-height: 100vh;
    display: flex;
    flex-direction: column;
    background: var(--page);
    color: var(--ink);
    font-family: ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto,
        "Helvetica Neue", Arial, sans-serif;
    font-size: 17px;
    line-height: 1.6;
    -webkit-font-smoothing: antialiased;
}

/* Visible only once focused — keyboard users get a way past the header the
 * moment this page grows one. */
.skip-link {
    position: absolute;
    left: -9999px;
    top: 0;
    padding: 0.5rem 1rem;
    background: var(--surface);
    color: var(--ink);
}
.skip-link:focus {
    left: 0;
    z-index: 1;
}

main {
    flex: 1 0 auto;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 4rem 1.5rem;
}

.splash {
    width: 100%;
    max-width: 34rem;
    text-align: center;
}

.wordmark {
    margin: 0;
    font-size: clamp(2.5rem, 9vw, 4rem);
    font-weight: 600;
    letter-spacing: -0.02em;
    line-height: 1.1;
}

/* The one detail, and the only one the design system asks for: a running
 * stitch. Neutral on purpose — blue means "you can interact with it". */
.stitch {
    width: 4rem;
    margin: 1.75rem auto;
    border: 0;
    border-top: 2px dashed var(--stitch);
}

.lede {
    margin: 0;
    color: var(--muted);
    font-size: clamp(1.05rem, 2.6vw, 1.25rem);
    text-wrap: balance;
}

.actions {
    margin: 2.25rem 0 0;
}

a {
    color: var(--blue);
    text-decoration-thickness: 1px;
    text-underline-offset: 3px;
}

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

.site-footer {
    flex: 0 0 auto;
    padding: 1.5rem;
    border-top: 1px solid var(--rule);
    color: var(--muted);
    font-size: 0.85rem;
    text-align: center;
}

.site-footer p { margin: 0; }