/* ==========================================================================
   Typography
   Variable WOFF2 — replaces 1.07 MB of static TTFs with 80 KB, and gains
   weights 200 and 900 the old files never had. Weight 200 at large sizes is
   what makes Unbounded look expensive rather than chunky.
   ========================================================================== */

@font-face {
  font-family: 'Unbounded';
  src: url('../assets/fonts/unbounded-var.woff2') format('woff2');
  font-weight: 200 900;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: 'Instrument Sans';
  src: url('../assets/fonts/instrument-sans-var.woff2') format('woff2');
  font-weight: 400 700;
  font-style: normal;
  font-display: swap;
}

/* Metric-matched fallbacks so the swap causes no layout shift.
   Values are a measured starting point — re-check with the Capsize method
   if the headline visibly reflows on a throttled first load. */
@font-face {
  font-family: 'Unbounded Fallback';
  src: local('Arial');
  size-adjust: 128%;
  ascent-override: 78%;
  descent-override: 20%;
  line-gap-override: 0%;
}

@font-face {
  font-family: 'Instrument Sans Fallback';
  src: local('Arial');
  size-adjust: 96%;
  ascent-override: 97%;
  descent-override: 25%;
  line-gap-override: 0%;
}

/* ---- Display ------------------------------------------------------------
   Tight tracking on huge type, loose tracking on tiny caps. That tension is
   most of the luxury read. */

.display {
  font-family: var(--font-display);
  font-weight: 300;
  line-height: .95;
  letter-spacing: -.03em;
  color: var(--text-1);
  text-wrap: balance;
}

h1, .h1 { font: 400 var(--step-9)/.98 var(--font-display); letter-spacing: -.035em; }
h2, .h2 { font: 400 var(--step-6)/1.08 var(--font-display); letter-spacing: -.03em; }
h3, .h3 { font: 500 var(--step-3)/1.25 var(--font-display); letter-spacing: -.02em; }
h4, .h4 { font: 500 var(--step-1)/1.4 var(--font-display); letter-spacing: -.01em; }

h1, h2, h3, h4 { text-wrap: balance; }

/* ---- Micro-caps / telemetry --------------------------------------------- */

.label,
.eyebrow {
  font-family: var(--font-mono);
  font-size: var(--step--1);
  font-weight: 400;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: var(--text-3);
  line-height: 1.4;
}

.mono {
  font-family: var(--font-mono);
  font-size: var(--step--1);
  letter-spacing: .08em;
  color: var(--text-3);
}

/* ---- Body --------------------------------------------------------------- */

.lede {
  font-size: var(--step-1);
  line-height: 1.55;
  color: var(--text-2);
  max-width: 54ch;
  text-wrap: pretty;
}

p { max-width: var(--measure); color: var(--text-2); text-wrap: pretty; }

strong, b { font-weight: 600; color: var(--text-1); }

/* ---- Gold text ----------------------------------------------------------
   @property lets the sheen angle animate smoothly instead of stepping —
   gold that catches the light as you move. Non-essential, so no @supports
   guard is needed: without it the gradient simply sits still. */

@property --gold-angle {
  syntax: '<angle>';
  inherits: false;
  initial-value: 105deg;
}

.gold {
  background: linear-gradient(var(--gold-angle), #8A6526, #F7E3BC 45%, #E5B45F 60%, #8A6526);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  transition: --gold-angle var(--dur-3) var(--ease);
}

.gold-flat { color: var(--gold-500); }