/* ============================================================
   CSS CUSTOM PROPERTIES
   ============================================================ */

:root {
  /* Colours */
  --color-cream:  #FFF5E5;
  --color-red:    #881719;
  --color-blue:   #282A6C;
  --color-teal:   #023D53;
  --color-amber:  #E57125;

  /* Spacing */
  --space-section-desktop:  128px;
  --space-section-mobile:    64px;
  --space-internal:          64px;
  --space-component:         24px;
  --space-element:            8px;

  /* Type scale — sizes */
  --text-h1:       3.813rem; /* 61px  — Bourrasque  */
  --text-h2:       2.938rem; /* 47px  — Bourrasque  */
  --text-h3:       2.250rem; /* 36px  — Meursault VF */
  --text-h4:       1.688rem; /* 27px  — Meursault VF */
  --text-h5:       1.313rem; /* 21px  — Meursault VF */
  --text-body:     1.000rem; /* 16px  — Meursault VF */
  --text-small:    0.750rem; /* 12px  — Meursault VF */
  --text-caption:  0.563rem; /*  9px  — Meursault VF */

  /* Font families */
  --font-meursault: "meursault-variable", serif;
  /* Bourrasque is logo-only, delivered as SVG — no font-family needed */
}


/* ============================================================
   CSS RESET
   ============================================================ */

*,
*::before,
*::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

html {
  font-size: 16px;
  scroll-behavior: smooth;
  -webkit-text-size-adjust: 100%;
}

body {
  font-family: var(--font-meursault);
  font-size: var(--text-body);
  background-color: var(--color-cream);
  color: var(--color-red);
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

img,
video {
  display: block;
  max-width: 100%;
}

ul,
ol {
  list-style: none;
}

a {
  color: inherit;
  text-decoration: none;
}

button {
  font: inherit;
  cursor: pointer;
  border: none;
  background: none;
}


/* ============================================================
   TYPE SCALE CLASSES
   ============================================================ */

/* H1 and H2 use Bourrasque (SVG wordmark only — no live text class needed yet) */

.text-h3 {
  font-family: var(--font-meursault);
  font-size: var(--text-h3);
  font-variation-settings: "wght" 500, "wdth" 100;
  line-height: 1.1;
}

.text-h4 {
  font-family: var(--font-meursault);
  font-size: var(--text-h4);
  font-variation-settings: "wght" 500, "wdth" 100;
  line-height: 1.2;
}

.text-h5 {
  font-family: var(--font-meursault);
  font-size: var(--text-h5);
  font-variation-settings: "wght" 400, "wdth" 100;
  line-height: 1.3;
}

.text-body {
  font-family: var(--font-meursault);
  font-size: var(--text-body);
  font-variation-settings: "wght" 400, "wdth" 100;
  line-height: 1.5;
}

.text-small {
  font-family: var(--font-meursault);
  font-size: var(--text-small);
  font-variation-settings: "wght" 400, "wdth" 100;
  line-height: 1.4;
}

.text-caption {
  font-family: var(--font-meursault);
  font-size: var(--text-caption);
  font-variation-settings: "wght" 400, "wdth" 100;
  line-height: 1.4;
}

/* Condensed variant — used for tickers */
.text-condensed {
  font-variation-settings: "wght" 400, "wdth" 75;
}