:root {
    color-scheme: dark;

    --bg: #11130f;
    --panel: #1b1e18;

    --text: #f2efe7;
    --muted: #b7b0a3;
    --accent: #c9a86a;
}

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

body {

    min-height: 100vh;

    display: flex;
    flex-direction: column;
    justify-content: center;

    padding: 3rem;

    background:
        radial-gradient(circle at top left,
            #24281f 0%,
            var(--bg) 60%);

    color: var(--text);

    font-family:
        Inter,
        system-ui,
        -apple-system,
        BlinkMacSystemFont,
        "Segoe UI",
        sans-serif;

    line-height: 1.6;
}

main {

    width: 100%;
    max-width: 760px;

    margin: auto;
}

.eyebrow {

    color: var(--accent);

    text-transform: uppercase;
    letter-spacing: .22em;

    font-size: .85rem;
    font-weight: 700;

    margin-bottom: 1rem;
}

h1 {

    font-size: clamp(2.5rem, 7vw, 5rem);

    line-height: .95;

    margin-bottom: 2rem;
}

.lead {

    color: var(--muted);

    font-size: 1.2rem;

    margin-bottom: 2.5rem;

    max-width: 60ch;
}

section {

    background: var(--panel);

    border: 1px solid rgba(201,168,106,.25);

    border-radius: 16px;

    padding: 1.5rem;

    margin-bottom: 1.5rem;
}

section h2 {

    color: var(--accent);

    margin-bottom: 1rem;

    font-size: 1rem;

    text-transform: uppercase;
    letter-spacing: .08em;
}

ul {

    list-style: none;
}

li {

    padding: .35rem 0;
}

.links {

    display: flex;

    gap: 1.5rem;

    flex-wrap: wrap;
}

.links a {

    color: var(--accent);

    text-decoration: none;

    transition: opacity .2s ease;
}

.links a:hover {

    opacity: .7;
}

footer {

    text-align: center;

    margin-top: 2rem;

    color: var(--muted);

    font-size: .9rem;
}