/* ==========================================================================
   Design tokens — the single source of truth for the visual language.
   Every section stylesheet consumes these; nothing hard-codes a raw value.
   ========================================================================== */

:root {
  /* ---------- Colour: rosé-tinted paper, plum ink, one accent ---------- */
  --c-cream: #fcf8f7; /* page base */
  --c-cream-raised: #fffdfd; /* cards, raised surfaces */
  --c-cream-deep: #f5edec; /* alternating bands */
  --c-sand: #ecdfde; /* subtle fills, dividers on deep bands */

  --c-ink: #241c1e; /* headlines — 15.8:1 on cream */
  --c-ink-soft: #57494c; /* body copy — 8.1:1 on cream */
  --c-ink-muted: #776a6c; /* captions, meta, eyebrows — 4.9:1 on cream (AA) */

  /*
     Transparent twins of the two page surfaces. A gradient that ends at the
     keyword `transparent` is a gradient to transparent *black*, so a cream
     fade would pass through grey on the way out.
  */
  --c-cream-fade: rgba(252, 248, 247, 0);
  --c-cream-deep-fade: rgba(245, 237, 236, 0);

  --c-line: rgba(36, 28, 30, 0.1);
  --c-line-strong: rgba(36, 28, 30, 0.18);

  /* The one accent: Pantone 18-1852 Rose Red — 5.2:1 on cream */
  --c-accent: #c92351;
  --c-accent-deep: #9e1638;
  --c-accent-soft: rgba(201, 35, 81, 0.12);
  --c-accent-softer: rgba(201, 35, 81, 0.07);
  --c-accent-on: #fff6f8;

  /* ---------- Typography ------------------------------------------------ */
  --font-display: 'Playfair Display', 'Iowan Old Style', Georgia, serif;
  --font-text: 'Hanken Grotesk', -apple-system, BlinkMacSystemFont, 'Segoe UI',
    system-ui, sans-serif;

  /*
     Fluid display scale.

     Every ceiling here is set for a large desktop, not for the 1320 px
     container — the vw factor decides when each one is reached, so nothing
     below roughly 1400 px moves, and a 1920 or 2560 px screen keeps growing
     instead of freezing into an oversized tablet layout.
  */
  /*
     The hero fills one viewport, so its headline answers to height as well as
     width — on a 720 px-tall laptop a width-only scale pushed the foot bar
     off the bottom edge. On wide screens the vw branch still wins.
  */
  --fs-hero: clamp(3.1rem, min(10.5vw, 15vh), 11rem);
  --fs-display: clamp(2.4rem, 5.6vw, 5.4rem);
  --fs-section: clamp(2rem, 4.2vw, 4.2rem);
  --fs-title: clamp(1.35rem, 2.1vw, 2.2rem);

  /* Text scale */
  --fs-lead: clamp(1.05rem, 1.35vw, 1.5rem);
  --fs-body: clamp(0.975rem, 1.05vw, 1.15rem);
  /* The small steps track the body copy, so the hierarchy holds at 2560 px
     instead of shrinking into footnotes beside an 18 px paragraph. */
  --fs-small: clamp(0.9375rem, 0.95vw, 1.05rem);
  --fs-meta: clamp(0.8125rem, 0.82vw, 0.9rem);
  --fs-eyebrow: clamp(0.7rem, 0.7vw, 0.8rem);

  --lh-tight: 1;
  --lh-display: 1.06;
  --lh-snug: 1.32;
  --lh-body: 1.68;

  --ls-hero: -0.035em;
  --ls-display: -0.02em;
  --ls-eyebrow: 0.24em;

  /* ---------- Space ------------------------------------------------------ */
  --sp-2: 0.5rem;
  --sp-3: 0.75rem;
  --sp-4: 1rem;
  --sp-5: 1.5rem;
  --sp-6: 2rem;
  --sp-7: 2.75rem;
  --sp-8: 3.5rem;
  --sp-9: 5rem;
  --sp-10: 7rem;

  --section-y: clamp(5.5rem, 11vw, 11rem);
  /* For seams where two sections belong together and full air reads as a gap. */
  --section-y-tight: clamp(3.5rem, 7.5vw, 7rem);
  /* One step up, for a section that carries more than copy. */
  --section-y-roomy: clamp(7rem, 13vw, 13rem);
  /* Grows past the 1320 px design width so a wide screen is filled, not
     framed by 300 px of empty page on either side. */
  --container: clamp(1320px, 84vw, 1560px);
  /* Reading measure — stays far narrower on purpose. */
  --container-narrow: clamp(940px, 58vw, 1060px);
  --gutter: clamp(1.4rem, 5vw, 6rem);

  /* ---------- Shape ------------------------------------------------------ */
  --r-sm: 10px;
  --r-md: 18px;
  --r-lg: 28px;
  --r-xl: clamp(22px, 2.6vw, 38px);
  --r-pill: 999px;

  /* ---------- Elevation: soft, rosé-tinted, never hard ------------------ */
  --shadow-sm: 0 1px 2px rgba(58, 30, 38, 0.04),
    0 10px 26px -14px rgba(58, 30, 38, 0.12);
  --shadow-md: 0 2px 6px rgba(58, 30, 38, 0.04),
    0 28px 60px -30px rgba(58, 30, 38, 0.2);
  --shadow-lg: 0 4px 14px rgba(58, 30, 38, 0.05),
    0 52px 110px -44px rgba(58, 30, 38, 0.28);
  --shadow-accent: 0 12px 30px -12px rgba(201, 35, 81, 0.42);

  /* ---------- Motion ----------------------------------------------------- */
  --ease-out: cubic-bezier(0.16, 1, 0.3, 1); /* expo-out: reveals */
  --ease-out-soft: cubic-bezier(0.22, 1, 0.36, 1); /* quint-out: hovers */
  --ease-in-out: cubic-bezier(0.65, 0, 0.35, 1); /* layout changes */

  --dur-hover: 420ms;
  --dur-image-hover: 300ms; /* direct pointer feedback on imagery */
  --dur-fast: 520ms;
  --dur-base: 600ms;
  --dur-slow: 760ms;
  --dur-slower: 900ms;
  --dur-cinematic: 1700ms; /* hero image settle only */

  --reveal-shift: 26px;
  /* Horizontal entrances travel further — they read as arriving, not settling. */
  --reveal-shift-x: clamp(52px, 6vw, 92px);

  /*
     Vertical slack inside a .reveal-line mask. Playfair's ascenders and
     descenders overflow the line box at tight leading, so the mask needs
     head- and footroom — and the slide-up needs to start below all of it.
  */
  --mask-pad-top: 0.22em;
  --mask-pad-bottom: 0.3em;
  --mask-travel: 145%;

  /* ---------- Bruchstellen ------------------------------------------------ */
  /*
     Fünf Stufen, jede mit einer Aufgabe. Medienabfragen können keine
     Variablen lesen, also ist das hier eine Vereinbarung und keine
     Deklaration — sie steht trotzdem bei den Token, weil sie genauso
     verbindlich ist wie eine Farbe.

       1080px  Desktop → großes Tablet (quer). Das Zwölfspaltenraster bleibt,
               nur die Spannen rücken zusammen.
       900px   großes Tablet → Tablet (hoch). Zwölf Spalten tragen hier nicht
               mehr: elf Spaltenabstände fressen ein Drittel der Breite. Ab
               hier zwei Spuren mit eigenen Proportionen — nicht eine. Auf
               derselben Stufe stapelt sich der Abschnittskopf, klappt die
               Navigation ins Menü und legen sich die Karten übereinander.
       720px   Tablet → Telefon. Erst hier stapelt sich alles auf volle Breite.
       640px   Telefon: Formularknöpfe über die ganze Breite, zwei Fußspalten
               statt drei, Seiten ohne Hero mit knapperem Kopfpolster.
       480px   Kleines Telefon: die Merkmalpillen der Karten eine Stufe
               kleiner, damit sie nicht dreireihig über das Bild wachsen.

     Warum bei 900 nicht gleich gestapelt wird, ist der Kern der Sache: ein
     Bild mit `max-width` in einer vollbreiten Spur füllt sein Rechteck nur
     halb, während der Text daneben über die ganze Breite läuft. Zwei Maße im
     selben Feld — das liest sich als Lücke, nicht als Luft. Genau daran
     krankten "Das Haus Mali", "Das ist Heiligenberg", die Gastgeberin und
     der Einstieg der Unterseiten, bis sie zwischen 720 und 900 wieder zwei
     echte Spuren bekamen.

     Eine einzige Abweichung steht noch im Haus: die Galerie geht erst bei
     520px von zwei Kacheln auf eine. Das ist Absicht und in
     styles/sections/gallery.css begründet — neun hochformatige Aufnahmen in
     voller Breite wären eine sehr lange Seite.
  */

  /* ---------- Layers ----------------------------------------------------- */
  --z-base: 1;
  --z-sticky: 60;
  --z-header: 80;
  --z-overlay: 100;
}

@media (prefers-reduced-motion: reduce) {
  :root {
    --reveal-shift: 0px;
    --reveal-shift-x: 0px;
  }
}