/* ==========================================================================
   INFO MEMA — Base: reset, typography, layout primitives
   Mobile-first throughout.
   ========================================================================== */

/* Only the weights actually used in the CSS below are requested — Fraunces
   500/600 (h1/h2/h5/.pull-quote/h3), IBM Plex Sans 400/600/700 (body/h4/bold
   UI text), IBM Plex Mono 400/600 (figures + <strong class="mono">). Loading
   unused weights (previously Fraunces 700, Plex Sans 500, Plex Mono 500) just
   adds bytes nothing on the page renders with. */
@import url("https://fonts.googleapis.com/css2?family=Fraunces:opsz,wght@9..144,500;9..144,600&family=IBM+Plex+Sans:wght@400;600;700&family=IBM+Plex+Mono:wght@400;600&display=swap");

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

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

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}

body {
  margin: 0;
  background: var(--c-paper);
  color: var(--c-ink);
  font-family: var(--font-body);
  font-size: var(--fs-body);
  line-height: var(--lh-body);
  -webkit-font-smoothing: antialiased;
}

img, svg, picture, video { display: block; max-width: 100%; height: auto; }
img { border-radius: var(--radius-image); }

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

ul, ol { margin: 0; padding: 0; list-style: none; }
p { margin: 0 0 var(--sp-3); }
p:last-child { margin-bottom: 0; }

button, input, select, textarea { font: inherit; color: inherit; }
button { cursor: pointer; }

h1, h2, h3, h4, h5 { margin: 0; font-family: var(--font-display); font-weight: 600; line-height: var(--lh-heading); }

h1 { font-size: var(--fs-h1); letter-spacing: var(--tracking-tight); line-height: var(--lh-tight); }
h2 { font-size: var(--fs-h2); }
h3 { font-size: var(--fs-h3); font-weight: 500; }
h4 {
  font-family: var(--font-body);
  font-size: var(--fs-h4);
  font-weight: 700;
}

.lede { font-size: var(--fs-body-lg); }

/* Pull-quote — gives the display serif a moment at mid-size, for the one
   sentence per page that should outweigh the surrounding prose. */
.pull-quote {
  font-family: var(--font-display);
  font-style: italic;
  font-weight: 500;
  font-size: clamp(1.3rem, 1.05rem + 1vw, 1.7rem);
  line-height: 1.4;
  color: var(--c-navy);
  max-width: 32ch;
  margin: 0 0 var(--sp-4);
}

/* Eyebrow label — annual-report convention: context before the headline */
.eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 0.5em;
  font-family: var(--font-body);
  font-size: var(--fs-eyebrow);
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: var(--tracking-eyebrow);
  color: var(--c-navy);
  margin: 0 0 var(--sp-2);
}
.eyebrow::before {
  content: "";
  display: inline-block;
  width: 1.5em;
  height: 1px;
  background: currentColor;
}
.on-dark .eyebrow, [data-surface="dark"] .eyebrow { color: var(--c-sky); }
[data-surface="navy"] .eyebrow { color: var(--c-sky-on-navy); }

/* Figures / measured facts — always monospace */
.mono, .stat-figure, time, .data { font-family: var(--font-mono); font-variant-numeric: tabular-nums; }
/* <strong> inside mono content (e.g. registration numbers) would otherwise
   request a synthetic/faux bold, since the browser's default "bolder" lands
   on a weight the font family doesn't have loaded. Map it to the loaded 600. */
strong.mono, .mono strong { font-weight: 600; }

.sr-only {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; border: 0;
}

.skip-link {
  position: absolute; left: var(--sp-2); top: var(--sp-2);
  background: var(--c-navy); color: #fff; padding: var(--sp-2) var(--sp-3);
  z-index: 200; border-radius: var(--radius-btn);
  transform: translateY(-160%);
  transition: transform var(--dur-fast) var(--ease-out);
}
.skip-link:focus { transform: translateY(0); }

/* Sky blue alone fails the WCAG 3:1 non-text-contrast minimum against white
   (2.53:1) — a two-tone ring guarantees at least one ring is visible on any
   surface the site uses (white, mint, navy, deep navy). */
:focus-visible {
  outline: 2px solid #fff;
  outline-offset: 1px;
  box-shadow: 0 0 0 4px var(--c-navy);
  border-radius: 1px;
}

/* ---- Layout primitives -------------------------------------------------- */
.container {
  max-width: var(--content-max);
  margin-inline: auto;
  padding-inline: var(--gutter);
}

.section {
  padding-block: var(--section-space);
}

.section--tight { padding-block: var(--sp-5); }

[data-surface="dark"] {
  background: var(--c-deep-navy);
  color: #fff;
}
[data-surface="navy"] {
  background: var(--c-navy);
  color: #fff;
}
[data-surface="tint"] {
  background: var(--c-mint);
  color: var(--c-ink);
}
[data-surface="light"] {
  background: var(--c-paper);
  color: var(--c-ink);
}
[data-surface="dark"] h1, [data-surface="dark"] h2, [data-surface="dark"] h3,
[data-surface="navy"] h1, [data-surface="navy"] h2, [data-surface="navy"] h3 {
  color: #fff;
}
[data-surface="dark"] a:not(.btn) { color: var(--c-sky); }
[data-surface="navy"] a:not(.btn) { color: var(--c-sky-on-navy); }

/* Brand-motif watermark — quotes the logo's arch geometry as a quiet corner
   graphic on dark/navy sections, instead of leaving them as flat colour fields. */
.has-motif { position: relative; overflow: hidden; }
.has-motif::after {
  content: "";
  position: absolute;
  right: -8%; bottom: -22%;
  width: 46%; max-width: 460px; aspect-ratio: 1 / 1;
  background-color: rgba(255,255,255,0.045);
  -webkit-mask-image: url(/assets/mark-motif.svg);
  mask-image: url(/assets/mark-motif.svg);
  -webkit-mask-size: contain; mask-size: contain;
  -webkit-mask-repeat: no-repeat; mask-repeat: no-repeat;
  pointer-events: none;
  z-index: 0;
}
.has-motif > .container { position: relative; z-index: 1; }
@media (max-width: 620px) {
  .has-motif::after { width: 70%; bottom: -18%; }
}

.rule {
  border: none;
  height: 1px;
  background: var(--c-navy-12);
  margin: var(--sp-5) 0;
}
[data-surface="dark"] .rule, [data-surface="navy"] .rule { background: var(--c-white-12); }

.rule--accent {
  width: 64px;
  height: 2px;
  background: var(--c-sky);
  border: none;
  margin: 0 0 var(--sp-4);
}

/* Grid helpers */
.grid { display: grid; gap: var(--sp-4); }
.grid-2 { grid-template-columns: 1fr; }
.grid-3 { grid-template-columns: 1fr; }
.grid-4 { grid-template-columns: repeat(2, 1fr); }
@media (min-width: 700px) {
  .grid-2 { grid-template-columns: repeat(2, 1fr); }
  .grid-3 { grid-template-columns: repeat(3, 1fr); }
  .grid-4 { grid-template-columns: repeat(4, 1fr); }
}

.measure { max-width: 68ch; }
.measure-narrow { max-width: var(--measure-narrow); }

.text-center { text-align: center; }
.visually-hide { display: none; }
@media (min-width: 700px) { .show-desktop { display: initial !important; } .hide-desktop { display: none !important; } }
@media (max-width: 699px) { .hide-mobile { display: none !important; } }

/* Fade-up entry animation, triggered by JS adding .is-visible */
[data-animate] {
  opacity: 0;
  transform: translateY(10px);
  transition: opacity var(--dur-entry) var(--ease-out), transform var(--dur-entry) var(--ease-out);
}
[data-animate].is-visible { opacity: 1; transform: translateY(0); }