@font-face {
  font-family: FoglihtenNo06;
  src:
    url("/01_assets/fonts/FoglihtenNo06_076.woff2") format("woff2"),
    url("/01_assets/fonts/FoglihtenNo06_076.otf") format("opentype");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: OliverGillSans;
  src: url("/01_assets/fonts/GillSansLightC.ttf") format("truetype");
  font-weight: 300;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: OliverGillSans;
  src: url("/01_assets/fonts/GillSansLightC.ttf") format("truetype");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

:root {
  /* Independent palette. */
  --color-red: #960000;
  --color-navy: #00223d;
  --color-yellow: #eefa4b;
  --color-cream: #ebe1d7;
  --color-black: #000000;
  --color-white: #ffffff;

  /* Derived palette. */
  --color-transparent: rgb(from var(--color-black) r g b / 0);
  --color-white-a001: rgb(from var(--color-white) r g b / 0.001);
  --color-black-a12: rgb(from var(--color-black) r g b / 0.12);
  --color-navy-a30: rgb(from var(--color-navy) r g b / 0.3);
  --color-cream-a50: rgb(from var(--color-cream) r g b / 0.5);
  --color-cream-a75: rgb(from var(--color-cream) r g b / 0.75);
  --color-red-dark: color-mix(in srgb, var(--color-red) 86%, var(--color-black));
  --color-red-admin: color-mix(in srgb, var(--color-red) 97%, var(--color-black));
  --color-red-deep: color-mix(in srgb, var(--color-red) 70%, var(--color-black));
  --color-gray-light: color-mix(in srgb, var(--color-white) 85%, var(--color-black));
  --color-gray-mid: color-mix(in srgb, var(--color-white) 59%, var(--color-black));
  --color-gray-dark: color-mix(in srgb, var(--color-white) 28%, var(--color-black));
  --color-wave-mist: color-mix(in srgb, var(--color-navy) 33%, var(--color-white));
  --color-wave-slate: color-mix(in srgb, var(--color-navy) 62%, var(--color-white));
  --color-blue-gray-mid: color-mix(in srgb, var(--color-navy) 52%, var(--color-white));
  --color-blue-gray-strong: color-mix(in srgb, var(--color-navy) 64%, var(--color-white));
  --color-blue-gray-deep: color-mix(in srgb, var(--color-navy) 80%, var(--color-white));
  --color-button-hover: color-mix(in srgb, var(--color-navy) 25%, var(--color-white));
  --color-ink: color-mix(in srgb, var(--color-black) 90%, var(--color-cream));
  --color-focus: color-mix(in srgb, var(--color-navy) 55%, var(--color-white));
  --color-text-muted: var(--color-gray-dark);
  --color-principle-inactive: var(--color-cream);
  --color-principle-active: var(--color-navy);

  /* Header runtime masks. Values are supplied by JavaScript. */
  --header-mask-image: none;
  --header-camera-blur-near-mask: linear-gradient(to bottom, black 0%, black 22%, transparent 58%);
  --header-camera-blur-mid-mask: linear-gradient(to bottom, black 0%, transparent 72%);
  --header-camera-blur-far-mask: linear-gradient(to bottom, rgb(from var(--color-black) r g b / 0.72) 0%, transparent 100%);

  /* Admin semantic colors. */
  --admin-color-page: color-mix(in srgb, var(--color-cream) 50%, var(--color-white));
  --admin-color-panel: color-mix(in srgb, var(--color-cream) 85%, var(--color-white));
  --admin-color-muted: color-mix(in srgb, var(--color-navy) 70%, var(--color-white));
  --admin-color-subtle: color-mix(in srgb, var(--color-white) 47%, var(--color-black));
  --admin-color-border: color-mix(in srgb, var(--color-cream) 90%, var(--color-black));
  --admin-color-field-border: color-mix(in srgb, var(--color-cream) 86%, var(--color-black));
  --admin-color-field-bg: color-mix(in srgb, var(--color-cream) 25%, var(--color-white));
  --admin-color-focus: var(--color-focus);
  --admin-color-success-seed: color-mix(in oklch, var(--color-navy) 68%, var(--color-yellow));
  --admin-color-success-bg: color-mix(in srgb, var(--admin-color-success-seed) 12%, var(--color-white));
  --admin-color-success-text: color-mix(in srgb, var(--admin-color-success-seed) 75%, var(--color-black));
  --admin-color-error-bg: color-mix(in srgb, var(--color-red) 12%, var(--color-white));
  --admin-color-error-text: var(--color-red-deep);

  /* Typography. */
  --font-family-display: FoglihtenNo06, Georgia, serif;
  --font-family-body: OliverGillSans, "Gill Sans MT", "Gill Sans", Arial, sans-serif;
  --font-family-admin: Inter, Arial, sans-serif;
  --font-size-hero-title: 3.75rem;
  --font-size-section-title: 2.5rem;
  --font-size-card-title: 2rem;
  --font-size-body-large: 1.875rem;
  --font-size-body: 1.5rem;
  --font-size-body-small: 1.1875rem;
  --font-size-nav: 1rem;
  --font-size-button: 1.5625rem;
  --font-size-admin: 0.9375rem;
  --font-weight-light: 300;
  --font-weight-regular: 400;
  --font-weight-bold: 700;
  --line-height-tight: 1;
  --line-height-heading: 1.275;
  --line-height-body: 1.4;

  /* Spacing scale. */
  --space-2xs: 0.25rem;
  --space-xs: 0.5rem;
  --space-sm: 0.875rem;
  --space-md: 1.25rem;
  --space-lg: 2rem;
  --space-xl: 3rem;
  --space-2xl: 4rem;
  --space-section: 6rem;

  /* Layout and geometry. */
  --layout-max-width: 100vw;
  --layout-content-width: 92.6875rem;
  --layout-page-padding: clamp(1.75rem, 2.1vw, 2.25rem);
  --layout-page-padding-mobile: 1.75rem;
  --desktop-logo-collapse: 0;
  --layout-breakpoint: 900px;
  --radius-card: 1rem;
  --radius-control: 0.625rem;
  --radius-pill: 999px;
  --border-thin: 1px;
  --border-strong: 2px;
  --control-height: 3.4375rem;

  /* Mobile composition tokens. The 390px SVG is a reference, not a scaled page canvas. */
  --mobile-content-max: 35rem;
  --mobile-page-padding: clamp(1.25rem, 7.18vw, 3.5rem);
  --mobile-section-title: clamp(1.375rem, 1.1rem + 1.1vw, 2rem);
  --mobile-body: clamp(0.9375rem, 0.86rem + 0.3vw, 1.0625rem);
  --mobile-card-title: clamp(1.25rem, 1.12rem + 0.5vw, 1.5rem);

  /* Motion. */
  --duration-fast: 0.2s;
  --duration-normal: 0.34s;
  --duration-slow: 0.7s;
  --duration-reveal: 1.32s;
  --ease-standard: ease;
  --ease-emphasized: cubic-bezier(0.16, 1, 0.3, 1);
  --ease-carousel: cubic-bezier(0.22, 0.61, 0.36, 1);
  --ease-button: cubic-bezier(0.25, 1, 0.5, 1);

  /* Layers. */
  --z-background: 0;
  --z-decoration-back: 1;
  --z-decoration-front: 2;
  --z-visual: 3;
  --z-copy: 4;
  --z-header: 1000;
  --z-overlay: 2000;
  --z-modal: 3000;

  /* Visual recipes. */
  --gradient-threats: linear-gradient(90deg, var(--color-wave-mist) 21.6058%, var(--color-navy) 100%);
  --gradient-hero-wave-back: linear-gradient(90deg, var(--color-navy) 0%, var(--color-gray-light) 100%);
  --gradient-hero-wave-front: linear-gradient(90deg, var(--color-wave-mist) 22.3847%, var(--color-navy) 98.594%);
  --gradient-threats-mobile: linear-gradient(180deg, var(--color-cream) 0%, var(--color-blue-gray-mid) 50%, var(--color-navy) 100%);
  --gradient-mobile-depth: linear-gradient(90deg, var(--color-blue-gray-strong) 0 16%, var(--color-blue-gray-deep) 22%, var(--color-navy) 28% 100%);
  --gradient-hero-gutter: linear-gradient(to bottom, var(--color-transparent) 0 56.9375rem, var(--color-wave-mist) 56.9375rem 100%);
  --gradient-hero-wave-wide: linear-gradient(90deg, var(--color-navy) 0%, var(--color-gray-light) 72%, var(--color-wave-slate) 88%, var(--color-navy) 100%);
  --gradient-threats-wide: linear-gradient(90deg, var(--color-wave-mist) 0 calc(50% - 54rem), var(--color-wave-mist) calc(50% - 54rem), var(--color-navy) calc(50% + 54rem), var(--color-navy) 100%);

  --admin-shadow: 0 18px 45px var(--color-black-a12);
}

@media (max-width: 899px) {
  :root {
    --layout-page-padding: var(--layout-page-padding-mobile);
  }
}