:root {
    --parchment: #f0ddb3;
    --ink: #47321f;
    --gold: #f2c66c;
    --purple: #7651aa;
    --wood: #936c35;
}

* {
    box-sizing: border-box;
}

body {
    margin: 0;
    min-height: 100vh;
    color: #f7e9c8;
    font-family: system-ui, sans-serif;
    background:
        linear-gradient(
            rgba(20, 13, 31, .50),
            rgba(20, 13, 31, .75)
        ),
        url('/static/backgrounds/starchhaven-sunset.png')
        center / cover fixed;
}

.site-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-wrap: wrap;
    gap: 20px;
    padding: 20px 5%;
    background: rgba(25, 16, 29, .9);
    border-bottom: 2px solid #b28b4f;
}

.site-brand {
    display: flex;
    align-items: center;
    gap: 10px;
    color: var(--gold);
    font-size: 1.3rem;
    font-weight: 800;
    text-decoration: none;
}

.site-navigation {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 18px;
}

.site-navigation a {
    color: #f7e9c8;
    text-decoration: none;
}

.site-navigation a:hover {
    color: var(--gold);
}

.nav-citizen,
.button {
    display: inline-block;
    padding: 12px 20px;
    border-radius: 9px;
    background: var(--purple);
    color: white;
    text-decoration: none;
    font-weight: 700;
}

.nav-citizen:hover,
.button:hover {
    filter: brightness(1.15);
}

.page-shell {
    width: min(1100px, 92%);
    margin: 65px auto;
}

.page-panel {
    padding: clamp(24px, 5vw, 55px);
    background: rgba(25, 17, 28, .85);
    border: 2px solid #b28b4f;
    border-radius: 18px;
}

.page-panel h1 {
    color: var(--gold);
    font-size: clamp(2rem, 5vw, 4rem);
}

.page-panel p {
    line-height: 1.75;
    font-size: 1.1rem;
}

.card-grid {
    display: grid;
    grid-template-columns:
        repeat(auto-fit, minmax(240px, 1fr));
    gap: 22px;
    margin-top: 30px;
}

.parchment-card {
    padding: 26px;
    border: 2px solid #a47a45;
    border-radius: 12px;
    background: var(--parchment);
    color: var(--ink);
}

.parchment-card h2 {
    margin-top: 0;
}

.site-footer {
    padding: 30px;
    text-align: center;
    background: rgba(25, 16, 29, .92);
}

.site-footer a {
    color: var(--gold);
}

@media (max-width: 700px) {
    .site-header {
        justify-content: center;
    }

    .site-navigation {
        justify-content: center;
        gap: 12px;
    }

    body {
        background-attachment: scroll;
    }
}