/* The Vectrex palette (ADR-114), copied from ArenaScene's four constants so the
   site and the game are the same object. Bright lines on true black; nothing is
   filled.

   Every byte this site needs is served from this origin. No fonts, no
   analytics, no frameworks, no third-party anything — a page whose whole claim
   is "nothing leaves your device" cannot itself reach out to a CDN to say so. */

:root {
    --background: #000205;
    --player: #4cfff0;
    --hostile: #ff2e88;
    --structure: #3b4a57;
    --text: #d6e2ea;
    --dim: #8496a3;
    --measure: 34rem;
}

* { box-sizing: border-box; }

html {
    background: var(--background);
    /* Prevents iOS Safari inflating type in landscape. */
    -webkit-text-size-adjust: 100%;
}

body {
    margin: 0 auto;
    padding: 3.5rem 1.5rem 5rem;
    max-width: var(--measure);
    background: var(--background);
    color: var(--text);
    font-family: ui-sans-serif, -apple-system, BlinkMacSystemFont, "Segoe UI",
                 Helvetica, Arial, sans-serif;
    font-size: 1rem;
    line-height: 1.65;
    -webkit-font-smoothing: antialiased;
}

header { margin-bottom: 3rem; }

h1 {
    margin: 0 0 0.75rem;
    font-size: 1.5rem;
    font-weight: 600;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--player);
}

.tagline {
    margin: 0;
    color: var(--dim);
    font-style: italic;
}

h2 {
    margin: 2.75rem 0 0.75rem;
    font-size: 0.8rem;
    font-weight: 600;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    color: var(--hostile);
}

h3 {
    margin: 1.75rem 0 0.5rem;
    font-size: 1rem;
    font-weight: 600;
    color: var(--text);
}

p, li { margin: 0 0 1rem; }

ul { padding-left: 1.25rem; }

li::marker { color: var(--structure); }

a {
    color: var(--player);
    text-underline-offset: 0.2em;
    text-decoration-color: var(--structure);
}

a:hover, a:focus { text-decoration-color: var(--player); }

/* The statement MASTER_SPEC §23 requires word for word. Set apart because it is
   a quotation of the app, not a paraphrase of it. */
.statement {
    margin: 1.5rem 0;
    padding: 1rem 1.25rem;
    border-left: 2px solid var(--player);
    background: rgba(76, 255, 240, 0.04);
    color: var(--text);
}

.lede {
    font-size: 1.1rem;
    color: var(--text);
}

hr {
    margin: 3.5rem 0 1.5rem;
    border: 0;
    border-top: 1px solid var(--structure);
}

footer {
    color: var(--dim);
    font-size: 0.85rem;
    line-height: 1.6;
}

footer a { color: var(--dim); }

/* Hairlines and dim text lose too much contrast when the viewer has asked for
   more. Rule 9's spirit: never let one channel carry the whole signal. */
@media (prefers-contrast: more) {
    :root {
        --dim: #b9c8d3;
        --structure: #6f8394;
    }
}