:root {
    color-scheme: light;
    --bg: #f7f5ef;
    --surface: #fffefa;
    --ink: #272a24;
    --muted: #74776d;
    --gold: #dc7048;
    --green: #355d4a;
    --line: #e6e3d8;
    --r: 18px;
    --serif: 'Fraunces', Georgia, serif;
    --sans: 'Inter', system-ui, sans-serif;
    --shadow: 0 18px 50px rgba(48, 57, 46, .08)
}

@media (prefers-color-scheme: dark) {
    :root {
        color-scheme: dark;
        --bg: #151a17;
        --surface: #202823;
        --ink: #f1f3ed;
        --muted: #b2bcb2;
        --gold: #f09a72;
        --green: #9bc4a5;
        --line: #3b4940;
        --shadow: 0 14px 36px rgba(0, 0, 0, .24)
    }

    body {
        background: var(--bg)
    }

    ::selection {
        background: #355d4a;
        color: #fff
    }
}

* {
    box-sizing: border-box
}

body {
    margin: 0;
    background:
        radial-gradient(ellipse at 82% 7%, rgba(234, 212, 152, .18), transparent 28rem),
        var(--bg);
    color: var(--ink);
    font: 16px/1.6 var(--sans);
    min-height: 100vh
}

h1,
h2,
h3 {
    font-family: var(--serif);
    font-weight: 600;
    line-height: 1.2;
    margin: .2em 0
}

a {
    color: var(--gold)
}

.muted {
    color: var(--muted)
}

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

[hidden] {
    display: none !important
}

main {
    max-width: 1180px;
    margin: auto;
    padding: 1.2rem 1.5rem 5rem
}

::selection {
    background: #dce8d9;
    color: var(--ink)
}

@media (prefers-reduced-motion:reduce) {
    * {
        animation: none !important;
        transition: none !important
    }
}