/* Cards & Empires — landing page. Colors from the visual guide v1; system fonts only, no external resources. */
:root {
    color-scheme: dark;
    --royal: #1f3d73;
    --royal-deep: #10213d;
    --wine: #6a2737;
    --gold: #b49a63;
    --gold-soft: #d3bd88;
    --charcoal: #17191b;
    --stone: #202428;
    --ink: #f2eadc;
    --muted: #c9c1b4;
    --line: rgba(211, 189, 136, .32);
    --panel: rgba(23, 25, 27, .9);
    --page: #0f1a2d;
    --pattern: rgba(211, 189, 136, .06);
    --display: Georgia, 'Times New Roman', serif;
    --text: ui-sans-serif, system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
}

@media (prefers-color-scheme: light) {
    :root {
        color-scheme: light;
        --gold: #8a6d33;
        --gold-soft: #7a5e28;
        --ink: #23201b;
        --muted: #4f493f;
        --line: rgba(110, 75, 49, .3);
        --panel: rgba(250, 245, 236, .94);
        --page: #e7dcc8;
        --pattern: rgba(31, 61, 115, .07);
    }
}

*, *::before, *::after { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; }

body {
    min-height: 100vh;
    min-height: 100dvh;
    margin: 0;
    background-color: var(--page);
    color: var(--ink);
    font-family: var(--text);
    line-height: 1.6;
}

.landing {
    display: grid;
    min-height: 100vh;
    min-height: 100dvh;
    grid-template-rows: 1fr auto;
    place-items: center;
    padding: clamp(24px, 6vw, 72px) 16px 16px;
}

.panel {
    width: min(100%, 640px);
    border: 1px solid var(--line);
    padding: clamp(32px, 6vw, 64px) clamp(24px, 6vw, 64px);
    background: var(--panel);
    box-shadow: 0 24px 64px rgba(0, 0, 0, .35);
}

.mark img { display: block; width: 72px; height: 72px; }

.kicker {
    margin: 28px 0 8px;
    color: var(--gold-soft);
    font-size: 13px;
    font-weight: 700;
    letter-spacing: .16em;
    text-transform: uppercase;
}

h1 {
    margin: 0;
    font-family: var(--display);
    font-size: clamp(36px, 7vw, 56px);
    font-weight: 400;
    line-height: 1.1;
    text-wrap: balance;
}

.lead {
    max-width: 52ch;
    margin: 16px 0 0;
    color: var(--muted);
    font-size: clamp(17px, 2.2vw, 19px);
}

.pillars {
    display: grid;
    gap: 1px;
    margin: 32px 0 0;
    padding: 0;
    list-style: none;
    background: var(--line);
    border: 1px solid var(--line);
}

.pillars li {
    display: grid;
    gap: 2px;
    padding: 16px 18px;
    background: var(--panel);
}

.pillars strong { font-family: var(--display); font-size: 19px; font-weight: 400; }

.pillars span { color: var(--muted); font-size: 15px; }

.note { margin: 28px 0 0; color: var(--muted); font-size: 14px; }

.footer { padding: 24px 0 8px; color: #e7dfd2; font-size: 13px; text-shadow: 0 1px 2px rgba(0, 0, 0, .6); }

.footer p { margin: 0; }

@media (min-width: 720px) {
    .pillars { grid-template-columns: repeat(3, 1fr); }
}

/* Rotating card artwork behind the panel, in CSS only (the CSP allows no scripts).
   Seven images, 8 s each with a 2 s crossfade; a still image when the visitor prefers reduced motion. */
.backdrop { position: fixed; inset: 0; z-index: -1; overflow: hidden; background: #10213d; }
.backdrop::after { position: absolute; inset: 0; background: radial-gradient(ellipse at center, rgba(8, 14, 25, .3), rgba(8, 14, 25, .5) 80%); content: ""; }
.backdrop span { position: absolute; inset: 0; background-position: center; background-size: cover; opacity: 0; animation: backdrop-fade 56s linear infinite; }
.backdrop span:nth-child(1) { background-image: url("/assets/art/cavalry-knight.webp"); animation-delay: -2s; }
.backdrop span:nth-child(2) { background-image: url("/assets/art/longbow-archers.webp"); animation-delay: 6s; }
.backdrop span:nth-child(3) { background-image: url("/assets/art/hill-castle.webp"); animation-delay: 14s; }
.backdrop span:nth-child(4) { background-image: url("/assets/art/blacksmith-forge.webp"); animation-delay: 22s; }
.backdrop span:nth-child(5) { background-image: url("/assets/art/battering-ram.webp"); animation-delay: 30s; }
.backdrop span:nth-child(6) { background-image: url("/assets/art/village-militia.webp"); animation-delay: 38s; }
.backdrop span:nth-child(7) { background-image: url("/assets/art/village-crafts.webp"); animation-delay: 46s; }
@keyframes backdrop-fade {
    0% { opacity: 0; }
    3.57% { opacity: 1; }
    14.29% { opacity: 1; }
    17.86% { opacity: 0; }
    100% { opacity: 0; }
}
@media (prefers-reduced-motion: reduce) {
    .backdrop span { animation: none; }
    .backdrop span:nth-child(1) { opacity: 1; }
}