/* Crashola base theme.
 *
 * TOKEN NAMES ARE INHERITED FROM THE CROPSICLES BASE AND MUST NOT BE RENAMED
 * (GDD s8: "retheme by palette token values, never by renaming tokens"). So
 * --sky is a dusty turquoise here and --magenta is a burnt orange: the names are
 * the fleet's shared contract, the values are what makes this crashola. Rename
 * them and every sister stylesheet we ever pull a block from stops applying.
 *
 * Values are GDD s5.1 verbatim.
 *
 * SHADOWS ARE WARM BROWN, NEVER BLUE-BLACK. GDD s5.1 calls this the one choice
 * that separates us from every competitor at thumbnail size, so it gets a token
 * of its own rather than being hand-written per rule - a stray rgba(0,0,0,...)
 * is the easiest way to lose the whole look by accident.
 */
:root {
    --sky: #5fa8a0;          /* dusty turquoise, evening sky accent */
    --grape: #7a2e2a;        /* oxblood */
    --grape-deep: #2e1512;   /* oxblood shadow */
    --lime: #9bb03f;         /* avocado, period accent */
    --magenta: #d94f2b;      /* burnt orange, the chute, primary CTA */
    --corn: #e8a93c;         /* harvest gold, headings */
    --tangerine: #c4551f;    /* canyon red */
    --berry: #8c5a7d;        /* dusty plum */

    --cream: #f2e2c4;
    --dust: #c9a87c;
    --chrome: #d8dde2;
    --asphalt: #241a16;

    --text: var(--cream);
    --text-dim: rgba(242, 226, 196, 0.76);
    --card: rgba(242, 226, 196, 0.06);
    --card-line: rgba(201, 168, 124, 0.28);

    --shadow: 0 10px 30px rgba(46, 21, 18, 0.55);
    --shadow-tight: 0 4px 0 var(--grape-deep);
    --radius: 14px;
    --measure: 1140px;
}

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

body {
    margin: 0;
    font-family: 'Outfit', system-ui, -apple-system, 'Segoe UI', sans-serif;
    color: var(--text);
    background: var(--asphalt);
    line-height: 1.6;
    -webkit-font-smoothing: antialiased;
}

h1, h2, h3 {
    font-family: 'Alfa Slab One', 'Outfit', Georgia, serif;
    font-weight: 400;
    line-height: 1.1;
    letter-spacing: 0.01em;
    margin: 0 0 0.6rem;
    color: var(--corn);
}

a { color: var(--sky); }
p { margin: 0 0 1rem; }

.wrap { max-width: var(--measure); margin: 0 auto; padding: 0 1.5rem; }

/* ── Brand bar ──
 * Deliberately NOT a nav. There is one page, and a bar of links to routes that
 * do not exist yet would 404 into this same page (server/index.js catch-all).
 * Links go in as the pages land.
 */
.brandbar {
    display: flex; align-items: center; gap: 0.6rem;
    padding: 1.1rem 1.5rem;
    border-bottom: 1px solid var(--card-line);
    background: linear-gradient(180deg, rgba(46, 21, 18, 0.9), rgba(36, 26, 22, 0));
}
.brandbar .mark {
    font-family: 'Alfa Slab One', 'Outfit', serif;
    font-size: 1.35rem; color: var(--cream);
    text-decoration: none; letter-spacing: 0.02em;
}
.brandbar .mark b { color: var(--magenta); }
.brandbar .tag {
    font-size: 0.8rem; color: var(--text-dim); letter-spacing: 0.08em;
    text-transform: uppercase;
}

/* ── Buttons ──
 * The primary CTA is burnt orange because that is the chute (GDD s5.1), so the
 * one button on the page is the one decision in the game.
 */
.btn {
    display: inline-block; padding: 0.85rem 1.7rem;
    border-radius: 999px; border: 2px solid var(--grape-deep);
    background: var(--magenta); color: var(--asphalt);
    font-weight: 700; font-size: 1.05rem; text-decoration: none;
    box-shadow: var(--shadow-tight);
}
.btn:hover { transform: translateY(-1px); }
.btn.ghost {
    background: transparent; color: var(--cream);
    border-color: var(--card-line); box-shadow: none;
}

/* A status chip, not a button: it is not clickable because there is nothing
 * behind it yet. Looking like a button would be the lie.
 */
.chip {
    display: inline-flex; align-items: center; gap: 0.55rem;
    padding: 0.5rem 1rem; border-radius: 999px;
    border: 1px dashed var(--card-line);
    background: var(--card); color: var(--text-dim);
    font-size: 0.9rem; letter-spacing: 0.02em;
}
.chip::before {
    content: ''; width: 9px; height: 9px; border-radius: 50%;
    background: var(--corn);
}

/* ── Hero ──
 * CSS ONLY, NO IMAGE, ON PURPOSE. The one splash we have on the CDN is a render
 * from the abandoned jukebox theme (docs/ART-PROMPTS.md), and a dead-theme hero
 * is worse than none. The <img> goes in here when the approved splash is
 * uploaded, behind the same gradient.
 */
.hero {
    position: relative; overflow: hidden;
    padding: 5.5rem 0 4rem;
    background:
        radial-gradient(1100px 420px at 70% -10%, rgba(232, 169, 60, 0.22), transparent 70%),
        linear-gradient(180deg, #1d3a39 0%, var(--sky) 38%, var(--corn) 62%, var(--tangerine) 100%);
}
/* The canyon floor: a hard horizon, because flat graphic shapes are the style
 * (GDD s5.1) and a soft blend reads as a photograph.
 */
.hero::after {
    content: ''; position: absolute; inset: auto 0 0 0; height: 32%;
    background: linear-gradient(180deg, var(--grape) 0%, var(--grape-deep) 100%);
    clip-path: polygon(0 38%, 18% 22%, 34% 34%, 52% 14%, 70% 30%, 86% 18%, 100% 32%, 100% 100%, 0 100%);
}
.hero .wrap { position: relative; z-index: 1; max-width: 780px; }
.hero h1 {
    font-size: clamp(2.6rem, 7vw, 4.6rem);
    color: var(--cream);
    text-shadow: 0 4px 0 var(--grape-deep), var(--shadow);
    margin-bottom: 1rem;
}
.hero .lede {
    font-size: clamp(1.05rem, 2.2vw, 1.3rem);
    color: var(--cream); max-width: 46ch;
    text-shadow: 0 2px 6px rgba(46, 21, 18, 0.5);
}
.hero .actions { display: flex; flex-wrap: wrap; gap: 0.9rem; align-items: center; margin-top: 1.6rem; }

/* ── Bands and cards ── */
.band { padding: 4rem 0; border-top: 1px solid var(--card-line); }
.band.alt { background: rgba(46, 21, 18, 0.45); }
.band h2 { font-size: clamp(1.7rem, 4vw, 2.4rem); }
.band .sub { color: var(--text-dim); max-width: 60ch; }

.grid { display: grid; gap: 1.2rem; margin-top: 2rem; }
.grid.three { grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); }
.grid.four { grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); }

.card {
    background: var(--card); border: 1px solid var(--card-line);
    border-radius: var(--radius); padding: 1.4rem;
    box-shadow: var(--shadow);
}
.card h3 { font-size: 1.15rem; color: var(--corn); }
.card p { color: var(--text-dim); margin: 0; }
.card .step {
    display: inline-block; font-family: 'Alfa Slab One', serif;
    color: var(--magenta); font-size: 1.6rem; line-height: 1; margin-bottom: 0.5rem;
}
.card.keystone { border-color: var(--magenta); }
.card.keystone h3 { color: var(--magenta); }

/* The show ladder. Eight rows, the last one has no rival (GDD s4.2). */
.ladder { list-style: none; margin: 2rem 0 0; padding: 0; }
.ladder li {
    display: flex; gap: 1rem; align-items: baseline;
    padding: 0.7rem 0; border-bottom: 1px dashed var(--card-line);
}
.ladder .n {
    font-family: 'Alfa Slab One', serif; color: var(--dust);
    min-width: 2.2rem;
}
.ladder .who { color: var(--cream); font-weight: 600; min-width: 13rem; }
.ladder .what { color: var(--text-dim); }
.ladder li.finale .who, .ladder li.finale .n { color: var(--tangerine); }

/* ── Footer ── */
footer.site {
    padding: 2.5rem 0 3rem; border-top: 1px solid var(--card-line);
    background: var(--grape-deep); color: var(--text-dim); font-size: 0.92rem;
}
footer.site a { color: var(--dust); text-decoration: none; }
footer.site a:hover { text-decoration: underline; }
footer.site .links { display: flex; flex-wrap: wrap; gap: 1.2rem; margin-bottom: 0.9rem; }
footer.site .fine { max-width: 70ch; margin: 0; }

/* ── Legal pages (terms, privacy, cookies) ── */
.legal { max-width: 760px; margin: 0 auto; padding: 3.5rem 1.5rem 4rem; }
.legal h1 { font-size: clamp(2rem, 5vw, 2.8rem); }
.legal h2 { font-size: 1.25rem; margin-top: 2.2rem; color: var(--cream); }
.legal p, .legal li { color: var(--text-dim); }
.legal ul { padding-left: 1.2rem; }
.legal .updated { color: var(--dust); font-size: 0.9rem; letter-spacing: 0.04em; text-transform: uppercase; }

/*
  The storage table on the cookie page. It goes BORDERLESS AND STACKED on a phone
  rather than scrolling sideways: a four-column table of legal text at 360px is
  either unreadable or off the edge of the screen, and a compliance page that
  cannot be read on the device most people will read it on has not complied with
  much. Each cell carries its own heading from a data-attribute below that width.
*/
.legal table.storage { width: 100%; border-collapse: collapse; margin: 1.2rem 0 1rem; font-size: 0.95rem; }
.legal table.storage th,
.legal table.storage td { padding: 0.7rem 0.8rem; text-align: left; vertical-align: top; border-bottom: 1px solid var(--card-line); color: var(--text-dim); }
.legal table.storage th { color: var(--corn); font-size: 0.78rem; letter-spacing: 0.14em; text-transform: uppercase; }
.legal table.storage code { color: var(--cream); font-size: 0.9em; }

@media (max-width: 620px) {
    .legal table.storage thead { display: none; }
    .legal table.storage tr { display: block; padding: 0.9rem 0; border-bottom: 1px solid var(--card-line); }
    .legal table.storage td { display: block; border: 0; padding: 0.15rem 0; }
    .legal table.storage td::before {
        content: attr(data-label);
        display: block;
        color: var(--corn);
        font-size: 0.72rem;
        letter-spacing: 0.14em;
        text-transform: uppercase;
    }
}

/* ── The switched-off page ── */
.off { max-width: 560px; margin: 0 auto; padding: 7rem 1.5rem 4rem; text-align: center; }
.off h1 { font-size: 2.3rem; }
.off p { color: var(--text-dim); }

@media (prefers-reduced-motion: reduce) {
    .btn:hover { transform: none; }
}