/* ==========================================================================
   Klikka — base.css
   Tokens, reset, typography primitives. Bound by klikka-brand-spec.md v1.0
   and klikka-brand/brand-guidelines.md v1.0.

   Colour rules enforced here:
   - One accent: Coastal Teal. Sand is a fill only and never carries type.
   - Coastal Teal is never type on Deep Navy (measures 2.84:1).
   - Muted body text uses #656F76, not Stone #6E7A82 (Stone on Shell is 4.01:1).
   ========================================================================== */

/* --- Fonts: self-hosted. Fontshare rate-limited during an earlier build and
       silently fell back to Georgia, so nothing here touches a third party. --- */
@font-face {
  font-family: "Bespoke Serif";
  src: url("fonts/bespoke-serif-variable.woff2") format("woff2");
  font-weight: 300 800;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Satoshi";
  src: url("fonts/satoshi-variable.woff2") format("woff2");
  font-weight: 300 900;
  font-style: normal;
  font-display: swap;
}

:root {
  /* Brand palette — verbatim from the brand system */
  --k-navy: #0c2231;
  --k-navy-deep: #081925;
  --k-teal: #1e6e8c;
  --k-teal-deep: #155066;
  --k-sand: #f2d492;
  --k-shell: #f6f4ef;
  --k-white: #ffffff;
  --k-mist: #dcd9d1;
  --k-slate-line: #1f3a4c;
  --k-stone: #6e7a82;      /* 18px+ only, per measured contrast */
  --k-pale: #e4ebef;
  --k-sea-green: #2e7d5b;
  --k-amber: #b4761a;
  --k-coral: #d4553c;

  /* Type roles — every one of these is measured in the build report */
  --k-text: var(--k-navy);            /* on Shell / White */
  --k-text-muted: #656f76;            /* AA-safe replacement for Stone */
  --k-text-on-navy: var(--k-pale);
  --k-text-on-navy-strong: var(--k-white);
  --k-link: var(--k-teal);
  --k-link-hover: var(--k-teal-deep);

  /* Type families */
  --k-display: "Bespoke Serif", Georgia, "Times New Roman", serif;
  --k-ui: "Satoshi", system-ui, -apple-system, "Segoe UI", Helvetica, sans-serif;

  /* 8px spacing grid */
  --s1: 4px;
  --s2: 8px;
  --s3: 12px;
  --s4: 16px;
  --s5: 24px;
  --s6: 32px;
  --s7: 48px;
  --s8: 64px;
  --s9: 96px;
  --s10: 128px;

  /* Radii + elevation (one shadow token only) */
  --r-card: 14px;
  --r-btn: 12px;
  --shadow: 0 1px 2px rgba(12, 34, 49, 0.06), 0 8px 24px rgba(12, 34, 49, 0.06);

  /* Type scale: fluid, no breakpoint steps. 12px is the hard floor.
     Measured at 320 / 390 / 768 / 1440 CSS px in the build report. */
  --t-hero: clamp(1.75rem, 1.19rem + 3.82vw, 4.25rem);   /* 28 → 68px */
  --t-h2: clamp(1.375rem, 1.12rem + 1.57vw, 2.375rem);   /* 22 → 38px */
  --t-h3: clamp(1.0625rem, 1.03rem + 0.2vw, 1.125rem);   /* 17 → 18px */
  --t-body: clamp(1rem, 0.98rem + 0.1vw, 1.0625rem);     /* 16 → 17px */
  --t-sec: clamp(0.875rem, 0.86rem + 0.08vw, 0.9375rem); /* 14 → 15px */
  --t-cap: 0.75rem;                                      /* 12px floor */
  --t-eyebrow: 0.75rem;                                  /* 12px floor */

  --measure: 34rem;      /* ~62 characters at body size */
  --wrap: 1160px;
  --pad: var(--s5);      /* gutter, stepped up at wider viewports */
}

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

html {
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
  -webkit-tap-highlight-color: rgba(30, 110, 140, 0.18);
}

body {
  margin: 0;
  background: var(--k-shell);
  color: var(--k-text);
  font-family: var(--k-ui);
  font-size: var(--t-body);
  line-height: 1.55;
  font-weight: 400;
  font-synthesis-weight: none;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  overflow-x: hidden;
}

h1, h2, h3, h4 {
  margin: 0;
  overflow-wrap: break-word;
  font-family: var(--k-display);
  font-weight: 600;
  line-height: 1.15;
  letter-spacing: -0.01em;
  text-wrap: balance;
}
h1 { font-size: var(--t-hero); }
h2 { font-size: var(--t-h2); line-height: 1.2; }
h3 {
  font-family: var(--k-ui);
  font-size: var(--t-h3);
  font-weight: 700;
  line-height: 1.3;
  letter-spacing: 0;
}
h4 {
  font-family: var(--k-ui);
  font-size: var(--t-body);
  font-weight: 700;
  line-height: 1.35;
  letter-spacing: 0;
}

p, ul, ol, dl, table, figure { margin: 0 0 var(--s4); }
p, li, dd, dt, td, th, caption, blockquote { overflow-wrap: break-word; }
p:last-child { margin-bottom: 0; }

a {
  color: var(--k-link);
  overflow-wrap: break-word;
  text-decoration: underline;
  text-underline-offset: 0.18em;
  text-decoration-thickness: from-font;
}
a:hover { color: var(--k-link-hover); }

strong { font-weight: 700; }
small { font-size: var(--t-cap); }

img, svg { max-width: 100%; height: auto; }

table { border-collapse: collapse; width: 100%; }

/* Numerals: tabular lining for money, counts and dates */
.num, td, th, time, .price { font-variant-numeric: tabular-nums lining-nums; }

button { font: inherit; color: inherit; }

/* 16px minimum on anything focusable and typable: iOS Safari zooms below it */
input, select, textarea { font-family: inherit; font-size: max(1rem, 16px); }

/* Tap targets: 44px minimum on the links people actually miss */
.header-nav a,
.footer-nav a,
.footer-nav button,
.doc__toc a,
.notfound__links a {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
}

/* --- Focus: visible on every interactive element ------------------------- */
:focus { outline: none; }
:focus-visible {
  outline: 3px solid var(--k-teal);
  outline-offset: 3px;
  border-radius: 4px;
}
.on-navy :focus-visible,
.band-navy :focus-visible {
  outline-color: var(--k-sand); /* fill/edge use, not type */
}

/* --- Utilities ----------------------------------------------------------- */
.wrap {
  width: 100%;
  max-width: var(--wrap);
  margin-inline: auto;
  padding-left: calc(var(--pad) + env(safe-area-inset-left));
  padding-right: calc(var(--pad) + env(safe-area-inset-right));
}
.visually-hidden {
  position: absolute !important;
  width: 1px; height: 1px;
  margin: -1px; padding: 0;
  overflow: hidden;
  clip: rect(0 0 0 0);
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}
.skip-link {
  position: absolute;
  left: var(--s4);
  top: -100px;
  z-index: 100;
  background: var(--k-white);
  color: var(--k-navy);
  padding: var(--s3) var(--s4);
  border-radius: var(--r-btn);
  font-weight: 700;
  text-decoration: none;
  box-shadow: var(--shadow);
  transition: top 180ms ease-out;
}
.skip-link:focus { top: var(--s4); }

.eyebrow {
  font-family: var(--k-ui);
  font-size: var(--t-eyebrow);
  font-weight: 500;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  margin: 0 0 var(--s3);
  color: var(--k-text-muted);
}
.band-navy .eyebrow { color: var(--k-pale); }

.lede {
  font-size: 1.0625rem;
  line-height: 1.55;
  max-width: var(--measure);
}

@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;
  }
}

/* --- Tablet / desktop type steps ---------------------------------------- */
@media (min-width: 48rem) {
  :root { --pad: var(--s6); }
}
@media (min-width: 68.75rem) {
  :root { --pad: var(--s7); }
}