/* =========================================================
   TRVECOLOR · base.css
   Reset, Elemente und die drei Schrift-Rollen:
   .display (Headline) · .label (Versal-Label) · Fließtext
   ========================================================= */

@layer reset {
  *, *::before, *::after { box-sizing: border-box; }
  html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; }
  body, h1, h2, h3, p, figure, blockquote, ul, ol, dl, dd { margin: 0; }
  ul[class], ol[class] { list-style: none; padding: 0; }
  img, svg { display: block; max-width: 100%; }
  button, input, select, textarea { font: inherit; color: inherit; }
  button { background: none; border: 0; padding: 0; cursor: pointer; }
  [hidden] { display: none !important; }
  @media (prefers-reduced-motion: reduce) {
    *, *::before, *::after { transition: none !important; animation: none !important; scroll-behavior: auto !important; }
  }
}

@layer base {
  html, body { transition: background-color var(--dur-slow), color var(--dur-slow); }
  /* Hintergrund, Farbe, Schrift und Rand von body: siehe main.css (außerhalb der Ebenen) */
  body {
    min-height: 100dvh;
    font-synthesis: none;
    text-rendering: optimizeLegibility;
  }
  a, button, input, label { touch-action: manipulation; -webkit-tap-highlight-color: transparent; }
  a { color: inherit; text-decoration: none; }
  a:hover, a:focus-visible { color: var(--color-accent); }
  :focus-visible { outline: 2px solid var(--color-accent); outline-offset: 3px; }
  /* Sprungmarken nicht unter den klebenden Kopf scrollen */
  [id] { scroll-margin-block-start: calc(var(--chrome-top, 4.5rem) + var(--gap-item)); }
  small { display: block; font-size: var(--step--1); color: var(--color-muted); }
  b, strong { font-weight: var(--weight-label); }
  ::selection { background: var(--color-accent); color: var(--color-on-accent); }

  /* ---------- Rolle 1: Display ---------- */
  /* Versalien, feste schmale Breite, Gewicht aus den Daten (--weight),
     Größe setzt die Fit-Engine (js/core/fit.js) pro Zeile. */
  .display {
    font-size: var(--step-5);
    font-weight: var(--weight, var(--weight-black));
    font-stretch: var(--width-display);
    line-height: var(--leading-tight);
    letter-spacing: -0.01em;
    text-transform: uppercase;
    text-wrap: balance;
  }
  .fit { inline-size: 100%; min-inline-size: 0; }
  .fit .line {
    display: block;
    inline-size: max-content;
    max-inline-size: 100%;
    white-space: nowrap;
    animation: weigh 0.9s var(--ease-out) both;
    animation-delay: calc(var(--i, 0) * 70ms);
  }
  .fit.no-anim .line { animation: none; }
  .fit[data-waiting] { visibility: hidden; }   /* wartet auf die Webschrift (js/core/fit.js) */
  @keyframes weigh { from { font-weight: 100; letter-spacing: 0.02em; } }

  /* Abschnitts-Headline: dieselbe Rolle wie .display, kleiner – Records, Members, Close in color …
     Fett, schmal, Versalien; die Zahl dahinter klein als Label. Baut sich wie die Seiten-Headline auf. */
  .section-head {
    font-size: clamp(2.3rem, 9cqi, 4.75rem);
    font-weight: 900;
    font-stretch: var(--width-display);
    line-height: 0.88;
    letter-spacing: -0.01em;
    text-transform: uppercase;
    text-wrap: balance;
    color: var(--color-fg);
    animation: weigh 0.9s var(--ease-out) both;
  }
  .section-head .count { margin-inline-start: 0.35em; vertical-align: top; font-size: var(--step--1); font-weight: var(--weight-label); font-stretch: var(--width-label); letter-spacing: var(--tracking-label); color: var(--color-muted); }

  /* ---------- Rolle 2: Label ---------- */
  :where(.label, .kicker, .h-section, .tag, label) {
    font-size: var(--step--1);
    font-weight: var(--weight-label);
    font-stretch: var(--width-label);
    text-transform: uppercase;
    letter-spacing: var(--tracking-label);
  }
  .kicker { color: var(--color-muted); }
  .h-section { font-stretch: var(--width-tight); color: var(--color-fg); }

  /* ---------- Rolle 3: Text ---------- */
  .lede { font-size: var(--step-1); line-height: 1.45; max-inline-size: var(--measure); text-wrap: pretty; }
  .fine { font-size: var(--step--1); color: var(--color-muted); letter-spacing: 0.02em; }
  .muted { color: var(--color-muted); }
}