:root {
    --paper: #f3efe4;
    --surface: #fffdf7;
    --ink: #1d2925;
    --muted: #68736e;
    --navy: #173f36;
    --copper: #b66f38;
    --stone: #d8d0bd;
    --line: rgba(29, 41, 37, .16);
    --shadow: 0 22px 60px rgba(23, 63, 54, .13);
}

:root[data-theme=dark] {
    --paper: #101a17;
    --surface: #192923;
    --ink: #edf2ec;
    --muted: #bdc9c2;
    --navy: #91c8b8;
    --copper: #e2ae73;
    --stone: #40564e;
    --line: rgba(237, 242, 236, .15);
    --shadow: 0 22px 60px rgba(0, 0, 0, .3);
}

.hero {
    background:
        radial-gradient(circle at 50% 36%, color-mix(in srgb, var(--copper) 18%, transparent), transparent 34%),
        repeating-linear-gradient(135deg, transparent 0 38px, color-mix(in srgb, var(--navy) 4%, transparent) 39px 40px);
}

@media (max-width: 580px) {
    .hero,
    .hero .subtitle,
    .hero blockquote {
        min-width: 0;
        max-width: 100%;
        overflow-wrap: anywhere;
    }

    .architecture {
        display: grid;
        grid-template-columns: 1fr 1fr;
        gap: .8rem;
        padding: 1rem .35rem;
    }

    .architecture i {
        display: none;
    }
}