:root {
    --paper: #f5eee5;
    --surface: #fffaf3;
    --ink: #2b201d;
    --muted: #786a64;
    --navy: #5b241c;
    --copper: #bd5a2e;
    --stone: #ddcdbd;
    --line: rgba(60, 32, 25, .17);
    --shadow: 0 22px 60px rgba(91, 36, 28, .13);
}

:root[data-theme=dark] {
    --paper: #1c1210;
    --surface: #2b1b17;
    --ink: #f5eee8;
    --muted: #d2c0b7;
    --navy: #efbc8b;
    --copper: #f18a51;
    --stone: #65473d;
    --line: rgba(245, 238, 232, .15);
    --shadow: 0 22px 60px rgba(0, 0, 0, .32);
}

.hero {
    background:
        radial-gradient(ellipse at 50% 35%, color-mix(in srgb, var(--copper) 18%, transparent), transparent 33%),
        linear-gradient(135deg, transparent 0 46%, color-mix(in srgb, var(--navy) 5%, transparent) 46% 54%, transparent 54%);
}

@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;
    }
}