/* Home page. Shared site styles are in /css/style.css. */

:root {
    --page-glow: rgba(232, 89, 12, 0.14);
    --page-glow-2: rgba(255, 179, 102, 0.18);
    --page-top: #fff6ef;
    --page-bottom: #eef1f6;
}

@media (prefers-color-scheme: dark) {
    :root {
        --page-glow: rgba(255, 122, 51, 0.16);
        --page-glow-2: rgba(255, 179, 102, 0.06);
        --page-top: #1a1512;
        --page-bottom: #0b0d11;
    }
}

body {
    background:
        radial-gradient(ellipse 80% 50% at 50% -10%, var(--page-glow), transparent 70%),
        radial-gradient(ellipse 60% 40% at 100% 100%, var(--page-glow-2), transparent 70%),
        linear-gradient(180deg, var(--page-top) 0%, var(--bg) 45%, var(--page-bottom) 100%);
    background-attachment: fixed;
}

.home-hero { padding: 56px 0 16px; text-align: center; }
.home-hero h1 {
    margin: 6px 0 12px; font-size: clamp(2.2rem, 6vw, 3.25rem); line-height: 1.1; letter-spacing: -0.02em;
}
.home-hero .lede { max-width: 600px; font-size: 1.1rem; }
.signature {
    margin: 18px 0 0; font: 700 2.6rem/1 var(--script);
    color: var(--muted);
}

.note { margin-top: 32px; text-align: center; }

@media (max-width: 480px) {
    .home-hero { padding: 40px 0 8px; }
}