/* ------------------------------------------------------------------
   Matter at Hand Records — design tokens · BLOCK B (Marke)
   Block A (Familie: Raster, Abstände, Typo-Skala, Mono, Bewegung)
   kommt aus assets/shared/tokens.css und wird davor geladen.
   Die Aliase hängen die hier gewachsenen Namen an Block A.
   ------------------------------------------------------------------ */

/* --- fonts (self-hosted, no external requests) --------------------- */
@font-face{font-family:"Young Serif";src:url("../fonts/YoungSerif-400.woff2") format("woff2");font-weight:400;font-style:normal;font-display:swap}
@font-face{font-family:"Archivo";src:url("../fonts/Archivo-400.woff2") format("woff2");font-weight:400;font-style:normal;font-display:swap}
@font-face{font-family:"Archivo";src:url("../fonts/Archivo-600.woff2") format("woff2");font-weight:600;font-style:normal;font-display:swap}
@font-face{font-family:"Archivo";src:url("../fonts/Archivo-800.woff2") format("woff2");font-weight:800;font-style:normal;font-display:swap}

:root{
  /* --- colour: one ground, one accent. No third colour. ----------- */
  --ink:    #2B1300;          /* warm near-black */
  --flame:  #F26A00;          /* bright orange   */

  /* --- type ------------------------------------------------------- */
  --display: "Young Serif", "Iowan Old Style", Georgia, serif;
  --text:    "Archivo", "Helvetica Neue", Arial, sans-serif;
  --mono:    var(--font-mono);

  --t-hero: clamp(3.1rem, 11.6vw, 11.5rem);
  --t-xxl:  clamp(2.6rem, 8vw,  7rem);
  --t-xl:   clamp(2rem,   5.2vw, 4rem);
  --t-l:    clamp(1.5rem, 3vw,  2.4rem);
  --t-m:    clamp(1.02rem,1.25vw,1.22rem);
  --t-s:    clamp(.86rem, 1vw,  .95rem);
  --t-mono: clamp(.7rem,  .82vw,.8rem);

  --lh-tight: .86;
  --lh-body:  1.5;
  --tr-mono:  var(--mono-track);

  /* --- rhythm ----------------------------------------------------- */
  --gut:    clamp(1.25rem, 4vw, 3rem);
  --sp-1:   clamp(.5rem, 1vw, .75rem);
  --sp-2:   clamp(1rem, 2vw, 1.5rem);
  --sp-3:   clamp(2rem, 4vw, 3.5rem);
  --sp-4:   clamp(3.5rem, 8vw, 7rem);
  --sp-5:   clamp(6rem, 14vw, 12rem);
  --max:    var(--container);

  /* --- lines ------------------------------------------------------ */
  --hair:   1px;
  --staff:  2px;

  /* --- motion ----------------------------------------------------- */
  --ease:   cubic-bezier(.22,.61,.36,1);
  --grain:  .04;

  color-scheme: only light;
}

/* Inversion system: every section declares one of these two.
   Everything inside uses currentColor, so the whole page flips. */
.s--ink   { background: var(--ink);   color: var(--flame); }
.s--flame { background: var(--flame); color: var(--ink);   }