@font-face {
  font-family: 'Rubik';
  src: url('../../fonts/Rubik.ttf') format('truetype-variations'),
       url('../../fonts/Rubik.ttf') format('truetype');
  font-weight: 100 900;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: 'Rubik';
  src: url('../../fonts/Rubik-Italic.ttf') format('truetype-variations'),
       url('../../fonts/Rubik-Italic.ttf') format('truetype');
  font-weight: 100 900;
  font-style: italic;
  font-display: swap;
}

@theme {
  --color-brand-red: #B9271A;
  --color-brand-black: #180101;
  --color-brand-bg: #F0F1F3;
  --font-sans: 'Rubik', ui-sans-serif, system-ui, sans-serif;
}

html { font-family: 'Rubik', ui-sans-serif, system-ui, sans-serif; }
body {
  color: #180101;
  background: #FFFFFF;
  font-size: 14px;
  line-height: 1.5;
}
@media (min-width: 768px)  { body { font-size: 15px; } }
@media (min-width: 1024px) { body { font-size: 16px; } }

/* Tile collage helpers used by the hero */
.tile-grid { display: grid; gap: 8px; }

/* Smooth scroll inside-page anchors */
html { scroll-behavior: smooth; }

/* Default size for Phosphor fill icons */
.ph-fill { font-size: 24px; }