@font-face {
  font-family: "Bodoni Moda";
  src: url("../assets/fonts/bodoni-moda-latin-opsz-normal.woff2") format("woff2");
  font-weight: 400 900;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Bodoni Moda";
  src: url("../assets/fonts/bodoni-moda-latin-opsz-italic.woff2") format("woff2");
  font-weight: 400 900;
  font-style: italic;
  font-display: swap;
}
@font-face {
  font-family: "Inter Tight";
  src: url("../assets/fonts/inter-tight-latin-wght-normal.woff2") format("woff2");
  font-weight: 100 900;
  font-style: normal;
  font-display: swap;
}

:root {
  --cream: #F3EEE6;
  --paper: #FBF8F3;
  --ink: #141313;
  --ace-red: #9E1B2B;
  --ace-red-deep: #6E0F1C;
  --line: rgba(20, 19, 19, .12);
  --ink-soft: rgba(20, 19, 19, .62);

  --ease-out: cubic-bezier(.16, 1, .3, 1);
  --ease-card: cubic-bezier(.65, 0, .35, 1);

  --font-display: "Bodoni Moda", "Playfair Display", "Didot", Georgia, serif;
  --font-body: "Inter Tight", "Manrope", system-ui, -apple-system, sans-serif;

  --gutter: clamp(20px, 3.2vw, 56px);
  --header-h: 72px;
  --bar-h: 56px;

  /* Kartenmass: 5:7, skaliert mit dem Viewport */
  --card-w: clamp(150px, 19vw, 300px);
  --card-ratio: 5 / 7;
  --card-radius: 4.5% / 3.2%;

  --label: 600 10.5px/1 var(--font-body);
  --label-track: .14em;
}