/* ════════════════════════════════════════════════════════════════════════
   Odisea Design System — BASE
   Font loading + reset + base element styles. Distributed to every site
   alongside tokens.css and components.css. Pair with a theme class
   (e.g. .theme-hub-light) on <body> or a wrapper to activate semantic colours.

   Fonts are SELF-HOSTED (Gate G1, 2026-08-25): the woff2 files live in the
   sibling fonts/ folder, distributed with this file, so every consumer —
   including the offline brochure and the static forms — renders the identity
   with no CDN and no bundler. Family names match tokens.json exactly; the
   'X Variable' names are deliberate (IDENTITY-BRIEF.md §8.5).
   ════════════════════════════════════════════════════════════════════════ */

/* Display — Fraunces, variable weight (used at 400; never above ~500) */
@font-face {
  font-family: 'Fraunces Variable';
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
  src: url('./fonts/fraunces-latin-wght-normal.woff2') format('woff2-variations');
}

/* Body + labels (dark canvases) — Inter, variable weight */
@font-face {
  font-family: 'Inter Variable';
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
  src: url('./fonts/inter-latin-wght-normal.woff2') format('woff2-variations');
}

/* Reading panels (light/cream surfaces only) — Newsreader, variable weight */
@font-face {
  font-family: 'Newsreader Variable';
  font-style: normal;
  font-weight: 200 800;
  font-display: swap;
  src: url('./fonts/newsreader-latin-wght-normal.woff2') format('woff2-variations');
}

/* Eyebrows + numerals — IBM Plex Mono (static; no variable release exists) */
@font-face {
  font-family: 'IBM Plex Mono';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('./fonts/ibm-plex-mono-latin-400-normal.woff2') format('woff2');
}
@font-face {
  font-family: 'IBM Plex Mono';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url('./fonts/ibm-plex-mono-latin-500-normal.woff2') format('woff2');
}

/* Academy numerals — B612 (George, 2026-09-18, replacing Overpass Mono of
   2026-09-17 and the Jersey 25 shirt numbers of 2026-09-15): the typeface
   Airbus commissioned for its cockpit displays, for the academy's
   navigation-and-journey theme. The proportional B612, not B612 Mono: the mono
   gives a comma or a point a full figure's width ("1, 000"). Its figures are
   tabular by default, so columns still align. The number role only (stat
   tiles, prices, badges, table figures); eyebrows and labels stay Plex Mono.
   Bound per product in components.css, not here.
   Fontsource (@fontsource/b612), SIL Open Font License 1.1. */
@font-face {
  font-family: 'B612';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('./fonts/b612-latin-400-normal.woff2') format('woff2');
}

/* Legacy print identity — the doc-* A4/brochure family only (carve-out,
   IDENTITY-BRIEF.md §8.7). Not referenced by any web component. */
@font-face {
  font-family: 'Anton';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('./fonts/anton-latin-400-normal.woff2') format('woff2');
}
@font-face {
  font-family: 'Roboto';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('./fonts/roboto-latin-400-normal.woff2') format('woff2');
}
@font-face {
  font-family: 'Roboto';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url('./fonts/roboto-latin-500-normal.woff2') format('woff2');
}
@font-face {
  font-family: 'Roboto';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url('./fonts/roboto-latin-700-normal.woff2') format('woff2');
}

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

/* ⚠ THE `hidden` ATTRIBUTE MUST WIN. It is only a UA-stylesheet rule
   (`display: none`), so ANY author rule that sets `display` outvotes it — and
   `.form-field`, `.sec-form__success` and `.info-banner` all set `display:
   flex`. Every form on the estate was therefore shipping its bot honeypot as a
   visible "Website" text field, plus a permanently visible success message and
   a permanently visible error banner, on /contact, both Summer Experience
   pages and both Tours pages (found 2026-09-09).

   `!important` is right here rather than a shortcut: `hidden` is a statement
   that the element is not relevant to the page yet, and no component's layout
   rule should be able to overrule that. Scripts toggle `.hidden = true/false`,
   so this is the single line that makes every one of those toggles real. */
[hidden] { display: none !important; }
html { font-size: var(--font-size-base); }
body {
  font-family: var(--font-family-body);
  font-size: var(--font-size-sm);
  line-height: var(--lh-xl);
  color: var(--gray-cool-800);
  background: var(--gray-warm-100);
  -webkit-font-smoothing: antialiased;
}
a { color: inherit; text-decoration: none; }
img { max-width: 100%; display: block; }