/* ============ About-Seite (about.html) ============
   Ergänzt css/case.css — von dort kommen Grundschrift, Farben, Nav-Pille und
   der Look. Hier steht nur, was es auf den Case Studies nicht gibt:
   der aufgefächerte Kartenstapel und die Textspalte darunter.
   Vorbild: Nicklas' Referenz-Screenshot (xhulia.co/about). */

.about-hero {
  padding: 96px 24px 0;
  text-align: center;
}

.about-hero h1 {
  font-family: "Trovical", Georgia, serif;
  font-weight: 400;
  font-size: clamp(34px, 6vw, 68px);
  line-height: 1.08;
  letter-spacing: -0.01em;
  color: #111;
  margin: 0;
}

.about-hero h1 em { font-style: italic; }

/* Das Kamera-Emoji in der Überschrift. Es kommt aus der Emoji-Schrift des
   Systems (Trovical hat keine Emojis) und wirkt bei gleicher Punktgröße
   deutlich größer als die Buchstaben — deshalb auf 0,72em heruntergesetzt und
   ein Stück abgesenkt, damit es auf der Grundlinie sitzt statt zu schweben. */
.emoji-cam {
  font-family: "Apple Color Emoji", "Segoe UI Emoji", "Noto Color Emoji", sans-serif;
  font-size: 0.72em;
  line-height: 1;
  vertical-align: -0.04em;
  margin: 0 0.06em;
}

/* ---------- Textspalte ---------- */
.about-body {
  max-width: 620px;
  margin: clamp(56px, 8vw, 104px) auto 0;
  padding: 0 24px;
  font-size: 16.5px;
  line-height: 1.62;
  color: #33332f;
}

.about-body p { margin: 0 0 20px; }
/* Luft zum schwarzen Footer darunter — die kam bis v37 von der Knopfleiste */
.about-body > p:last-child { margin-bottom: clamp(72px, 12vh, 130px); }
.about-body p strong { color: #111; font-weight: 600; }

.about-body h2 {
  margin: 44px 0 10px;
  font-family: "IBM Plex Mono", monospace;
  font-weight: 500;
  font-size: 12px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: #111;
}

/* ---------- Schmale Schirme ----------
   Der volle Fächer hat auf dem Handy keinen Platz. js/about.js zeigt dort nur
   noch drei Karten (Zahl in CARDS_MOBILE) und rechnet den Fächer enger.
   In der Referenz bleibt sogar nur eine übrig — drei zeigen den Effekt besser,
   lässt sich in about.js in einer Zeile ändern. */
@media (max-width: 760px) {
  .about-hero { padding-top: 76px; }
  .about-body { font-size: 16px; }
}