/* ============================================================
   BASE — element defaults built on the tokens.
   Light-touch reset + sensible typographic defaults.
   ============================================================ */

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

html { -webkit-text-size-adjust: 100%; }

body {
  margin: 0;
  font-family: var(--font-body);
  font-size: var(--text-body);
  line-height: var(--leading-normal);
  color: var(--text-body);
  background: var(--surface-page);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

h1, h2, h3, h4 {
  font-family: var(--font-display);
  color: var(--text-heading);
  font-weight: var(--fw-bold);
  line-height: var(--leading-tight);
  letter-spacing: var(--tracking-tight);
  margin: 0 0 var(--space-4);
  text-wrap: balance;
}
h1 { font-size: var(--text-h1); }
h2 { font-size: var(--text-h2); }
h3 { font-size: var(--text-h3); line-height: var(--leading-snug); }
h4 { font-size: var(--text-h4); font-family: var(--font-body); font-weight: var(--fw-semibold); letter-spacing: 0; }

p { margin: 0 0 var(--space-4); text-wrap: pretty; }

a { color: var(--text-link); text-decoration-color: var(--gold-400); text-underline-offset: 3px; }
a:hover { color: var(--gold-700); }

strong, b { font-weight: var(--fw-semibold); }

/* Gold highlight for emphasised words (e.g. place names in headings) */
.u-accent { color: var(--text-accent); }
.on-navy .u-accent { color: var(--gold-400); }

/* Eyebrow / overline label */
.eyebrow {
  font-family: var(--font-body);
  font-size: var(--text-small);
  font-weight: var(--fw-semibold);
  letter-spacing: var(--tracking-wide);
  text-transform: uppercase;
  color: var(--text-accent);
  margin: 0 0 var(--space-3);
}

/* The signature framing rule from the logo */
.rule-gold {
  height: 3px;
  width: 64px;
  background: var(--divider-gold);
  border: 0;
  border-radius: var(--radius-pill);
}

/* Inverse (navy) sections flip text colours */
.on-navy { color: var(--text-on-navy); background: var(--surface-inverse); }
.on-navy h1, .on-navy h2, .on-navy h3 { color: var(--text-on-navy); }
.on-navy p { color: var(--text-on-navy-muted); }

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

:focus-visible { outline: none; box-shadow: var(--focus-ring); border-radius: var(--radius-sm); }