/*  Neuralectic
 *  Layout in the spirit of ssi.inc (minimal, single column, manifesto).
 *  Palette drawn from Physical Intelligence (pi.website): warm cream paper,
 *  near-black ink, golden-amber accent.
 */

:root {
    /* Physical Intelligence palette */
    --paper: #F5F4EF;
    /* primary cream background */
    --paper-warm: #EEECE4;
    /* deeper cream, used for subtle fills */
    --ink: #1b1a16;
    /* warm near-black body text */
    --ink-strong: #111111;
    /* headings */
    --ink-muted: #6f6a5c;
    /* footer / meta, warm grey */
    --rule: #d9d5c6;
    /* hairline dividers */
    --link: #9a6a14;
    /* readable deep amber for links */
    --link-hover: #6f4c0c;
    /* darker amber on hover */
    --gold: #e0bc4e;
    /* bright decorative gold accent */

    --maxw: 39rem;
}

* {
    box-sizing: border-box;
}

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

body {
    margin: 0;
    padding: 0;
    background-color: var(--paper);
    color: var(--ink);
    font-family: "Source Sans 3", -apple-system, BlinkMacSystemFont, "Segoe UI", system-ui, sans-serif;
    font-size: 1.0625rem;
    line-height: 1.62;
    font-weight: 400;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    text-rendering: optimizeLegibility;
}

#maincontent {
    max-width: var(--maxw);
    margin: 0 auto;
    padding: clamp(3.5rem, 9vh, 7rem) 1.5rem 4rem;
}

/* ---- Masthead --------------------------------------------------------- */

.masthead {
    margin-bottom: 2.4rem;
}

.wordmark {
    font-family: "Source Serif 4", Georgia, "Times New Roman", serif;
    font-weight: 600;
    font-size: 1.55rem;
    letter-spacing: -0.01em;
    color: var(--ink-strong);
    margin: 0;
    line-height: 1;
}

/* ---- Body copy -------------------------------------------------------- */

p {
    margin: 0 0 1.25rem;
    max-width: 34rem;
}

.lead {
    font-family: "Source Serif 4", Georgia, serif;
    font-weight: 500;
    font-size: 1.5rem;
    line-height: 1.32;
    letter-spacing: -0.012em;
    color: var(--ink-strong);
    margin-bottom: 1.9rem;
    /* warm amber underscore, an echo of PI's gold */
    display: inline-block;
    position: relative;
}

.lead::after {
    content: "";
    position: absolute;
    left: 0;
    bottom: -0.55rem;
    width: 2.4rem;
    height: 2px;
    background: var(--gold);
    border-radius: 1px;
}

.closing {
    font-weight: 600;
    color: var(--ink-strong);
    margin-top: 1.9rem;
}

.signoff {
    color: var(--ink-muted);
    font-style: italic;
    margin-bottom: 2.6rem;
}

/* ---- Links ------------------------------------------------------------ */

a {
    color: var(--link);
    text-decoration: none;
    border-bottom: 1px solid transparent;
    transition: color 0.15s ease, border-color 0.15s ease;
}

a:hover,
a:focus-visible {
    color: var(--link-hover);
    border-bottom-color: currentColor;
}

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

.links {
    display: flex;
    flex-wrap: wrap;
    gap: 1.6rem;
    padding-top: 1.6rem;
    border-top: 1px solid var(--rule);
}

.links a {
    font-family: ui-monospace, "SF Mono", "SFMono-Regular", Menlo, Consolas, monospace;
    font-size: 0.85rem;
    letter-spacing: 0.02em;
    text-transform: lowercase;
}

/* ---- Colophon --------------------------------------------------------- */

.colophon {
    margin-top: 3.5rem;
}

.colophon small {
    font-family: ui-monospace, "SF Mono", "SFMono-Regular", Menlo, Consolas, monospace;
    font-size: 0.78rem;
    letter-spacing: 0.03em;
    color: var(--ink-muted);
}

/* ---- Motion ----------------------------------------------------------- */

@media (prefers-reduced-motion: no-preference) {
    #maincontent {
        animation: rise 0.7s cubic-bezier(0.22, 1, 0.36, 1) both;
    }

    @keyframes rise {
        from {
            opacity: 0;
            transform: translateY(8px);
        }

        to {
            opacity: 1;
            transform: translateY(0);
        }
    }
}

/* ---- Small screens ---------------------------------------------------- */

@media (max-width: 480px) {
    body {
        font-size: 1.02rem;
    }

    .lead {
        font-size: 1.32rem;
    }

    .wordmark {
        font-size: 1.4rem;
    }
}