/*
 * Grundlage: Reset, Schrift, Grund und Raster.
 *
 * Was hier steht, gilt für jede Ansicht dieses Hauses – Startseite, Lobby,
 * Station, Abrechnung. Es kleidet ELEMENTE, keine Blöcke: Jede Klasse steht in
 * comic.css, lobby.css, game.css oder terminal.css.
 *
 * Der Grund ist ein Rechenzentrum um drei Uhr nachts. Nichts ist Druckerschwärze
 * und nichts leuchtet von selbst: Was hell wirkt, wird von einer
 * Leuchtstoffröhre angeleuchtet, und die hängt oben.
 */

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

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

body {
    margin: 0;
    min-height: 100dvh;
    font-family: var(--wr-font-doc);
    font-size: clamp(15px, 0.9rem + 0.25vw, 18px);
    line-height: 1.55;
    color: var(--wr-paper);
    background-color: var(--wr-ink);
    /* Drei Lagen: Korn, Halbtonraster, Kaltlicht von der Decke. */
    background-image:
        var(--wr-grain),
        radial-gradient(circle at center, rgba(230, 220, 196, 0.055) 1px, transparent 1.5px),
        radial-gradient(ellipse 130% 80% at 50% 0%, #17262b 0%, var(--wr-ink) 64%);
    background-size: 140px 140px, var(--wr-halftone-size) var(--wr-halftone-size), 100% 100%;
    background-attachment: fixed;
}

h1,
h2,
h3 {
    margin: 0;
    font-weight: 400;
    line-height: 1.05;
    text-wrap: balance;
}

h1 {
    font-family: var(--wr-font-display);
    font-size: clamp(2.1rem, 1.1rem + 4.6vw, 4.4rem);
    letter-spacing: var(--wr-tracking-display);
    text-transform: uppercase;
    /* Der Zeilenversatz einer schlecht justierten Bildröhre: die Farbauszüge
       stehen waagerecht nebeneinander, nicht diagonal wie im Vierfarbdruck. */
    text-shadow:
        2px 0 0 var(--wr-signal-deep),
        -2px 0 0 rgba(47, 79, 120, 0.7);
}

h2 {
    font-family: var(--wr-font-amt);
    font-size: clamp(1.02rem, 0.9rem + 0.55vw, 1.4rem);
    letter-spacing: var(--wr-tracking-amt);
    text-transform: uppercase;
    color: var(--wr-gold);
}

h3 {
    font-family: var(--wr-font-amt);
    font-size: 0.92rem;
    letter-spacing: var(--wr-tracking-amt);
    text-transform: uppercase;
    color: var(--wr-paper-dim);
}

p {
    /* Das Zeilenmaß ist eine Grundregel, keine Zutat. Wer es aufhebt,
       schreibt `max-width: none` und schreibt daneben, warum. */
    margin: 0 0 var(--wr-gap-3);
    max-width: var(--wr-mass);
}

/*
 * KEIN EINZELNES WORT AUF DER SCHLUSSZEILE.
 *
 * `text-wrap: pretty` stand im ganzen Projekt null Mal, und deshalb endete
 * fast jeder Satz, der seinen Kasten um weniger als ein Wort überschreitet,
 * auf einer Waise. Die Eigenschaft ist kein Effekt und kein Weichzeichner:
 * Sie ändert nur, an welcher Leerstelle der Browser bricht, und fällt in
 * älteren Browsern folgenlos auf `wrap` zurück. Die Überschriften darüber
 * tragen seit je `balance` — dies ist dieselbe Zeile eine Stufe kleiner.
 */
p,
li {
    text-wrap: pretty;
}

a {
    color: var(--wr-gold);
    text-underline-offset: 3px;
}

ul,
ol {
    margin: 0;
    padding: 0;
    list-style: none;
}

button,
input,
textarea {
    font: inherit;
    color: inherit;
}

input,
textarea {
    width: 100%;
    /* Jede Tippfläche wird in BEIDE Richtungen gemessen. Das Maß steht hier als
       ELEMENTregel, damit eine Klasse es überschreiben kann: Eine Ausnahme über
       :not([type=…]) wäre spezifischer als jede Klasse im Haus und hätte das
       48px-Zählwerk der Reglerbank still auf 44 gestutzt. */
    min-height: 44px;
    padding: 0.6em 0.75em;
    font-family: var(--wr-font-doc);
    font-size: 1.05rem;
    color: var(--wr-ink);
    background: var(--wr-paper);
    border: var(--wr-border) solid var(--wr-ink);
    border-radius: 0;
    box-shadow: inset 0 2px 0 rgba(0, 0, 0, 0.22);
}

textarea {
    display: block;
    resize: vertical;
}

/* Das Ankreuzfeld ist die Ausnahme: Angetippt wird seine Beschriftung. */
input[type='checkbox'],
input[type='radio'] {
    width: auto;
    min-height: 0;
    padding: 0;
    box-shadow: none;
}

input::placeholder,
textarea::placeholder {
    color: rgba(13, 18, 20, 0.45);
}

input:focus-visible,
textarea:focus-visible,
button:focus-visible,
summary:focus-visible,
a:focus-visible {
    /* Bernstein statt Phosphor: Das Grün gehört den Terminals, und eine
       Fokusmarke steht überall – auch auf Papier. */
    outline: var(--wr-border) solid var(--wr-bernstein);
    outline-offset: 3px;
}

label {
    display: block;
    margin-bottom: var(--wr-gap-1);
    font-family: var(--wr-font-amt);
    font-size: 0.8rem;
    letter-spacing: var(--wr-tracking-amt);
    text-transform: uppercase;
    color: var(--wr-paper-dim);
}

img {
    max-width: 100%;
}

/* Der Schalter des ganzen Hauses. Ansichten gehen über `hidden`, nie über
   `visibility` – das behielte die Maße und liefe in jede Überlaufprüfung. */
[hidden] {
    display: none !important;
}

@media (prefers-reduced-motion: reduce) {
    *,
    *::before,
    *::after {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
    }
}