/*
 * Grundlage: Reset, Typografie, Papier und Raster.
 * Hier entsteht die Atmosphäre, bevor irgendein Bild geladen ist.
 */

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

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

body {
    margin: 0;
    min-height: 100dvh;
    font-family: var(--bm-font-doc);
    font-size: clamp(15px, 0.9rem + 0.25vw, 18px);
    line-height: 1.55;
    color: var(--bm-paper);
    background-color: var(--bm-ink);
    /* Drei Lagen: Korn, Halbtonraster, Vignette. Zusammen ergibt das gedrucktes Papier. */
    background-image:
        var(--bm-grain),
        radial-gradient(circle at center, rgba(232, 220, 192, 0.07) 1px, transparent 1.5px),
        radial-gradient(ellipse 120% 90% at 50% 0%, #241f1a 0%, var(--bm-ink) 62%);
    background-size: 140px 140px, var(--bm-halftone-size) var(--bm-halftone-size), 100% 100%;
    background-attachment: fixed;
}

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

h1 {
    font-family: var(--bm-font-display);
    font-size: clamp(2.4rem, 1.2rem + 5vw, 5rem);
    letter-spacing: var(--bm-tracking-display);
    text-transform: uppercase;
    /* Fehlregister wie im billigen Vierfarbdruck: die Platten sitzen nicht exakt. */
    text-shadow:
        3px 3px 0 var(--bm-signal-deep),
        -2px -1px 0 rgba(79, 160, 190, 0.55);
}

h2 {
    font-family: var(--bm-font-amt);
    font-size: clamp(1.05rem, 0.9rem + 0.6vw, 1.45rem);
    letter-spacing: var(--bm-tracking-amt);
    text-transform: uppercase;
    color: var(--bm-gold);
}

p {
    margin: 0 0 var(--bm-gap-3);
    max-width: var(--bm-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(--bm-gold);
    text-underline-offset: 3px;
}

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

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

input {
    width: 100%;
    padding: 0.6em 0.75em;
    font-family: var(--bm-font-doc);
    font-size: 1.05rem;
    color: var(--bm-ink);
    background: var(--bm-paper);
    border: var(--bm-border) solid var(--bm-ink);
    border-radius: 0;
    box-shadow: inset 0 2px 0 rgba(18, 16, 14, 0.18);
}

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

input::placeholder {
    color: rgba(18, 16, 14, 0.42);
}

/*
  DER FOKUSRING GILT AUCH FUER LINKS, und das ist eine Reparatur.

  Hier standen nur `input` und `button`. Fuer ein <a> gab es in KEINEM
  Stilblatt dieses Hauses eine :focus-visible-Regel — wer mit der Tastatur
  ueber einen Link fuhr, sah hoechstens einen Farbwechsel, und "Keine Farbe
  als einziger Informationstraeger" (CLAUDE.md, Abschnitt 7) gilt fuer den
  Tastaturfokus genauso wie fuer alles andere.

  Aufgefallen ist es am Rueckweg des Kopfstreifens: Das Nachbarhaus fuehrt
  `a:focus-visible` in seiner base.css, dieses nicht — dieselbe Leiste
  verhielt sich in zwei Zimmern verschieden.
*/
a:focus-visible,
input:focus-visible,
textarea:focus-visible,
button:focus-visible,
summary:focus-visible {
    outline: var(--bm-border) solid var(--bm-gold);
    outline-offset: 3px;
}

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

[hidden] {
    display: none !important;
}

/* Wer Bewegung nicht verträgt, bekommt dieselbe Information ohne Wackeln. */
@media (prefers-reduced-motion: reduce) {
    *,
    *::before,
    *::after {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
    }
}