/* Handgeschrieben, ohne Build-Schritt. Werte kommen als Custom Properties aus /css/tokens.css. */

/* UI-Schrift: Z-Unito, abgewandelt von Nunito (im Repo nunito-mod), mit Hand-z (ss04) und geteiltem
   z (ss03). Feste Schnitte, je Gewicht eine Datei; nur die, die hier vorkommen. Der Browser lädt
   nur, was eine Seite braucht. */
@font-face {
  font-family: "Z-Unito";
  font-style: normal;
  font-weight: 200;
  font-display: swap;
  src: url("/fonts/z-unito-latin-200-normal.woff2") format("woff2");
}

@font-face {
  font-family: "Z-Unito";
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("/fonts/z-unito-latin-400-normal.woff2") format("woff2");
}

@font-face {
  font-family: "Z-Unito";
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url("/fonts/z-unito-latin-500-normal.woff2") format("woff2");
}

@font-face {
  font-family: "Z-Unito";
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url("/fonts/z-unito-latin-600-normal.woff2") format("woff2");
}

@font-face {
  font-family: "Z-Unito";
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url("/fonts/z-unito-latin-700-normal.woff2") format("woff2");
}

@font-face {
  font-family: "Z-Unito";
  font-style: normal;
  font-weight: 900;
  font-display: swap;
  src: url("/fonts/z-unito-latin-900-normal.woff2") format("woff2");
}

/* Textschrift mit Achse für die optische Größe: der Browser stellt sie auf die Schriftgröße ein. */
@font-face {
  font-family: "Source Serif 4";
  font-style: normal;
  font-weight: 200 900;
  font-display: swap;
  src: url("/fonts/source-serif-4-latin-opsz-normal.woff2") format("woff2");
}

@font-face {
  font-family: "Source Serif 4";
  font-style: italic;
  font-weight: 200 900;
  font-display: swap;
  src: url("/fonts/source-serif-4-latin-opsz-italic.woff2") format("woff2");
}

/* Plakatschrift: optische Größe bis 1200, für sehr große Titel gezeichnet. */
@font-face {
  font-family: "Playfair";
  font-style: normal;
  font-weight: 300 900;
  font-display: swap;
  src: url("/fonts/playfair-latin-opsz-normal.woff2") format("woff2");
}

@font-face {
  font-family: "IBM Plex Mono";
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("/fonts/ibm-plex-mono-latin-400-normal.woff2") format("woff2");
}

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

html {
  font-family: var(--font-body);
  font-size: 100%;
  color: var(--color-ink);
  background: var(--color-paper);
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
}

body {
  margin: 0;
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  font-size: var(--text-body);
}

/* Zeilenabstand: Schriftgröße plus fester Zuschlag (nach Chris Morgan). Große Schrift steht dadurch
   relativ enger als kleine. Der Wert wird als fertige Länge vererbt, deshalb steht er an jedem
   Textblock und nicht nur an body. Inline-Elemente erben ihn von ihrem Block. */
:where(body, h1, h2, h3, h4, h5, h6, p, li, dt, dd, blockquote, figcaption, address, pre, th, td) {
  line-height: calc(1em + var(--leading-gap));
}

/* Hochgestelltes wie Fußnotenzeichen soll den Zeilenabstand nicht aufreißen. */
sup,
sub {
  line-height: 0;
}

/* Fest statt „bolder“, damit Fett nicht vom Grundgewicht abhängt (von 300 aus wäre „bolder“ nur 400). */
strong,
b {
  font-weight: 700;
}

code,
kbd,
samp,
pre {
  font-family: var(--font-mono);
}

main {
  flex: 1;
  width: 100%;
  max-width: var(--measure);
  margin-inline: auto;
  padding: var(--space-3) var(--space-2);
}

/* Als kleiner Gag ist der Zeiger über Links die obere Hand aus dem Hand-z, gedreht und so groß wie
   der Handzeiger von Windows, Hotspot an der Fingerspitze. Wer kein SVG als Zeiger kann, nimmt das
   PNG, sonst bleibt die normale Hand. */
a {
  color: var(--color-accent);
  text-underline-offset: 0.15em;
  cursor: url("/img/cursor-hand.svg") 8 1, url("/img/cursor-hand.png") 8 1, pointer;
}

a:hover {
  text-decoration-thickness: 2px;
}

:focus-visible {
  outline: 2px solid var(--color-accent);
  outline-offset: 2px;
}

/* Navigation, Kontakt und andere UI-Texte */
.site-header,
.site-footer,
.wordmark {
  font-family: var(--font-ui);
}

/* Kopf */

.site-header {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--space-2);
  max-width: var(--measure);
  width: 100%;
  margin-inline: auto;
  padding: var(--space-2);
}

.brand {
  color: inherit;
  text-decoration: none;
}

.site-header ul {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2);
  margin: 0;
  padding: 0;
  list-style: none;
}

.site-header [aria-current="page"] {
  color: inherit;
  text-decoration: none;
  font-weight: 600;
}

.skip-link {
  position: absolute;
  left: -9999px;
}

.skip-link:focus {
  left: var(--space-2);
  top: var(--space-1);
  background: var(--color-paper);
  padding: var(--space-1);
}

/* Fließtext in Source Serif 4, kräftig genug neben den fetten Playfair-Titeln. Der Zeilenabstand
   wächst mit der Spaltenbreite, siehe leading-text in Tokens.hs. Dafür ist .prose der Container,
   auf den sich cqi bezieht. */

.prose {
  container-type: inline-size;
}

.prose :where(p, li, dd) {
  line-height: var(--leading-text);
}

.prose :where(p, ul, ol, dl, blockquote, figure, table, pre) {
  margin-block: 0;
}

.prose > * + * {
  margin-block-start: var(--space-2);
}

/* Titel in Playfair 900, Zwischentitel serifenlos und schwer wie 2015 (damals Gentona 900). */

.prose :where(h1, h2, h3, h4) {
  margin-block: var(--space-3) 0;
}

.prose h1 {
  font-family: var(--font-display);
  font-size: var(--text-h1);
  font-weight: 900;
  letter-spacing: -0.015em;
  margin-block-start: 0;
}

.prose :where(h2, h3, h4) {
  font-family: var(--font-ui);
  font-weight: 900;
  letter-spacing: -0.01em;
}

.prose h2 {
  font-size: var(--text-h2);
}

.prose h3 {
  font-size: var(--text-h3);
}

/* Vorspann, im Markdown als ::: lead. Wie 2015: serifenlos, sehr leicht, grau. */
.prose .lead {
  font-family: var(--font-ui);
  font-size: var(--text-lead);
  font-weight: 200;
  color: var(--color-muted);
}

/* Autorenzeile unter dem Titel, wie in der Zeitung: serifenlos, in Versalien, leicht gesperrt. */
.prose .byline {
  font-family: var(--font-ui);
  font-size: var(--text-small);
  font-weight: 500;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}

.prose blockquote {
  padding-inline-start: var(--space-2);
  border-inline-start: 3px solid var(--color-rule);
  color: var(--color-muted);
}

.prose img {
  max-width: 100%;
  height: auto;
}

.prose pre {
  overflow-x: auto;
  padding: var(--space-2);
  background: var(--color-rule);
}

.prose table {
  border-collapse: collapse;
  width: 100%;
}

.prose :where(th, td) {
  padding: var(--space-1);
  border-bottom: 1px solid var(--color-rule);
  text-align: start;
  vertical-align: top;
}

.prose hr {
  border: 0;
  border-top: 1px solid var(--color-rule);
}

.align-right {
  text-align: end;
}

.align-center {
  text-align: center;
}

.footnotes {
  font-size: var(--text-small);
  color: var(--color-muted);
  border-top: 1px solid var(--color-rule);
  padding-top: var(--space-2);
}

/* Impressum im Stil der Startseite: Titel in Playfair, aber klein, Text in Spalten im Blocksatz.
   Anders als dort blendet nichts aus, Pflichtangaben müssen lesbar bleiben. */

.legal {
  columns: 15em 4;
  column-gap: 2em;
  column-rule: 1px solid var(--color-rule);
}

.legal h1 {
  column-span: all;
  font-size: var(--text-h2);
  margin-block: max(6rem, 22vh) var(--space-3);
}

.legal h2 {
  break-after: avoid;
}

.legal h2 + * {
  margin-block-start: var(--space-1);
}

.legal p {
  line-height: calc(1em + var(--leading-gap));
  text-align: justify;
  hyphens: manual;
  orphans: 2;
  widows: 2;
}

.legal address {
  break-inside: avoid;
}

/* Kleine Auszeichnung in Versalien: der Claim und die Zwischentitel im Impressum */
.label,
.legal h2 {
  font-family: var(--font-mono);
  font-size: 0.7rem;
  font-weight: 400;
  line-height: 1.4;
  letter-spacing: 0.25em;
  text-transform: uppercase;
}

/* Fuß: nur der Link zum Impressum */

.site-footer {
  color: var(--color-muted);
  font-size: var(--text-small);
  text-align: center;
}

.site-footer > * {
  max-width: var(--measure);
  margin: var(--space-2) auto;
  padding-inline: var(--space-2);
}

address {
  font-style: normal;
}

/* Startseite als Ankündigung: Logo und Wortmarke oben, „Bald.“ in der Mitte des ersten Bildschirms,
   darunter der Fließtext. Am Ende der Seite das Impressum mittig und das Bild rechts. Das Bild ist
   höchstens 18 % so hoch wie das Fenster, rechts davon bleiben 2 % der Breite frei. */

.coming-soon {
  display: grid;
  grid-template-columns: 10% 1fr auto 2%;
  grid-template-rows: 1fr auto;
  min-height: 100dvh;
}

/* Wortmarke und darunter der Claim wie im Brand-Board. Liegt über dem Inhalt, damit „Bald.“ von
   der Fensteroberkante aus gemessen in der Mitte stehen kann. */
.coming-soon .lockup {
  position: absolute;
  inset-block-start: 0;
  inset-inline-start: 10%;
  padding-block-start: var(--space-3);
  /* Die Wortmarke ist ein Link auf die Startseite, aber schwarz und ohne Unterstreichung. */
  color: inherit;
  text-decoration: none;
}

.lockup p {
  margin: 0;
}

/* Die Wortmarke ist das Logo: Z-Unito Medium mit geteiltem z (ss03). Beim Darüberfahren wird das z
   zum Hand-z mit Kontur (ss05); es hat dieselbe Laufweite und dasselbe Kerning, nichts verrutscht. */
.wordmark {
  font-size: 1.8rem;
  font-weight: 500;
  font-feature-settings: "ss03";
  line-height: 1.1;
  letter-spacing: -0.01em;
  text-transform: lowercase;
}

:is(.brand, .lockup):is(:hover, :focus-visible) .wordmark {
  font-feature-settings: "ss03", "ss05";
}

.lockup .label {
  margin-block-start: 0.35rem;
  color: var(--color-muted);
}

/* Rechts 8vw mehr Rand, damit der Text wie links 10 % Abstand hat. Die 2 % gelten nur fürs Bild. */
.coming-soon main {
  grid-row: 1;
  grid-column: 2 / 4;
  max-width: none;
  margin: 0;
  padding: 0 8vw var(--space-4) 0;
}

/* Fließtext unter „Bald.“ im Zeitungssatz: so viele Spalten von mindestens 15em, wie die Breite
   hergibt (höchstens vier), Blocksatz mit Silbentrennung, Absätze mit Einzug statt Leerzeile.
   Eine Maske blendet ihn nach unten aus: oben voll lesbar, am Ende durchsichtig. Sie wirkt auf
   die Deckkraft des Textes selbst, deshalb passt sie auf jeden Hintergrund. */
.coming-soon .text {
  columns: 15em 4;
  column-gap: 2em;
  column-rule: 1px solid var(--color-rule);
  -webkit-mask-image: linear-gradient(to bottom, #000 15%, transparent 95%);
  mask-image: linear-gradient(to bottom, #000 15%, transparent 95%);
}

/* Kurze Spaltenzeilen brauchen weniger Zeilenabstand als der Molten-Wert, der sich nach der
   Breite des ganzen Textblocks richtet: daher die Grundregel Schriftgröße plus Zuschlag. */
.coming-soon .text > p {
  margin-block-start: 0;
  line-height: calc(1em + var(--leading-gap));
  text-align: justify;
  /* Getrennt wird nur an den weichen Trennstrichen aus Zw.Hyphenate, in jedem Browser gleich. */
  hyphens: manual;
  orphans: 2;
  widows: 2;
}

.coming-soon .text > p + p {
  text-indent: 1.2em;
}

/* Jedes Wort ein anderes Grau, den Anteil würfelt Zw.Shade: 0 % ist Tinte, 100 % ein helles Grau
   aus 70 % Papier. */
.coming-soon .text span {
  color: color-mix(in oklab, var(--color-ink), var(--color-paper) calc(var(--shade) * 0.7));
}

.coming-soon .byline {
  margin-block: var(--space-2);
}

.coming-soon .home h1 {
  font-family: var(--font-display);
  font-size: var(--text-display);
  font-weight: 900;
  letter-spacing: -0.02em;
  /* Leerraum über den Versalien und unter der Grundlinie abschneiden: Der Kasten ist dann genau
     eine Versalhöhe (1cap) hoch, und der Abstand oben setzt seine Mitte auf 40 % der Fensterhöhe,
     etwas über die Mitte. Mindestens 6rem, damit „Bald.“ auf flachen Bildschirmen nicht unter das
     Logo rutscht. */
  text-box: trim-both cap alphabetic;
  margin-block: max(6rem, calc(40vh - 0.5cap)) var(--space-3);
  margin-block-start: max(6rem, calc(40dvh - 0.5cap));
}

.coming-soon .site-footer {
  grid-row: 2;
  grid-column: 1 / -1;
  align-self: end;
  padding-block-end: var(--space-2);
}

.coming-soon .site-footer > * {
  max-width: none;
  margin: 0;
  padding: 0;
}

.coming-soon-image {
  grid-row: 2;
  grid-column: 3;
  align-self: end;
  justify-self: end;
  display: block;
  width: auto;
  height: auto;
  max-width: 100%;
  max-height: 18vh;
  max-height: 18dvh;
}

/* Fehlerseiten im selben Rahmen, alles mittig: oben groß die Figur, darunter die Fehlernummer in
   Playfair 900 und die Art des Fehlers, der Weg zurück und ein Zitat. Die Figur wächst mit der
   Fensterhöhe, so passt alles auf einen Bildschirm. */

.error-page main {
  grid-column: 1 / -1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 6rem var(--space-2) var(--space-3);
  text-align: center;
}

.error-image {
  display: block;
  width: auto;
  height: min(41vh, 90vw);
  height: min(41dvh, 90vw);
}

.error-page h1 {
  margin-block: var(--space-3) 0;
  font-weight: 900;
}

/* Versalziffern: Playfair setzt sonst Mediävalziffern, deren 4 unter die Grundlinie hängt. Leerraum
   über den Ziffern und unter der Grundlinie wird abgeschnitten, damit die Abstände genau stimmen. */
.error-code {
  display: block;
  font-family: var(--font-display);
  font-size: var(--text-h1);
  font-variant-numeric: lining-nums;
  letter-spacing: -0.02em;
  line-height: 1;
  text-box: trim-both cap alphabetic;
}

.error-name {
  display: block;
  margin-block-start: var(--space-1);
  font-family: var(--font-ui);
  font-size: var(--text-h3);
  letter-spacing: -0.01em;
}

.error-home {
  margin-block: var(--space-2) 0;
  font-family: var(--font-ui);
}

/* Zitat leise: abgesetzt durch eine kurze Linie, das Original kursiv in Textgröße, darunter klein
   die Übersetzung, dann die Quelle als Label. */
.error-quote {
  max-width: var(--measure);
  margin: var(--space-3) 0 0;
}

.error-quote::before {
  content: "";
  display: block;
  width: 3rem;
  margin: 0 auto var(--space-2);
  border-top: 1px solid var(--color-rule);
}

.error-quote blockquote {
  margin: 0;
  font-style: italic;
  text-wrap: balance;
}

.error-quote blockquote p {
  margin: 0;
}

.error-quote .translation {
  margin: var(--space-1) 0 0;
  font-size: var(--text-small);
  color: var(--color-muted);
  text-wrap: balance;
}

.error-quote figcaption {
  margin-block-start: var(--space-2);
  color: var(--color-muted);
}