/* Design tokens: colours, type families and page gutter shared by every section. */
:root {
  color-scheme: dark;
  --ink: #fff;
  --mute: #c9d6e6;
  --bg: #000;
  --circle-base: #61bff5;
  --circle-purple: #2865fe;
  --btn: #e3e0dc;
  --btn-ink: #000;
  --line: rgba(201, 214, 230, .18);
  --line-strong: rgba(201, 214, 230, .35);
  --glow: rgba(97, 191, 245, .14);
  --shade: 1, 5, 12;
  --vignette: rgba(1, 8, 20, .92);
  --edge-glow: color-mix(in srgb, var(--circle-purple) 20%, transparent); /* faint light some black sections take from a page edge */
  /* one gradient from the middle of Us in action (black) to the contact section's end (vivid orange-red, after the angry-eyes reference):
     a vertical ladder (field bottom = glow-1, contact bottom = glow-2) under --glow-side, the same left-to-right lift in every section,
     so together they run dark at the left to bright at the right and meet without seams; --dark-sweep then darkens it into --glow-dark */
  --glow-red: #ff4306;
  --glow-1: color-mix(in srgb, var(--glow-red) 14%, var(--bg));
  --glow-2: color-mix(in srgb, var(--glow-red) 38%, var(--bg));
  --glow-dark: #2a0604;
  /* the closing darkening: dark red, full on the left and lighter to the right; contact and footer each fade it in from top to bottom
     with matching strength at their shared edge, so it sweeps in diagonally from mid-contact to the bottom of the page */
  --dark-sweep: linear-gradient(to right, var(--glow-dark) 35%, color-mix(in srgb, var(--glow-dark) 75%, transparent));
  --dark-seam: rgb(0 0 0 / .6);
  --glow-side: linear-gradient(to right, transparent 15%, color-mix(in srgb, var(--glow-red) 35%, transparent));

  --font-body: 'Space Grotesk', system-ui, sans-serif;
  --font-display: 'Staff X Wide Test', 'Unbounded', 'Arial Black', sans-serif;

  /* the page's side inset: --gutter-base per breakpoint, widened to clear a notch or rounded corner in landscape (the same on both sides,
     so centred layouts stay centred) */
  --gutter-base: 20px;
  --gutter: max(var(--gutter-base), env(safe-area-inset-left, 0px), env(safe-area-inset-right, 0px));
  /* hero stat labels and key figures (25+ km …), on phones also the section item titles and their text: fixed on phones, where the
     window-relative sizes below bottom out too small to read */
  --text-detail: 17px;
  --text-figure: 26px;
  --text-title: 26px; /* on phones the section item titles (Why Sentry, spec groups); their own sizes from tablets up */
  --text-nav: clamp(15px, 1.25vw, 20px); /* the header links and button, a step under the key figures */
}

@media (min-width: 761px) {
  :root {
    --gutter-base: 48px;
    --text-detail: clamp(13px, 1.15vw, 17px);
    --text-figure: clamp(17px, 2vw, 32px);
  }
}

/* phones held upright: the sizes the hero's figures are fitted to (hero.css). Labels: the widest line, "with 1.5 kg payload" (9.455em
   with its column's share), ends short of the Y of the gutter-wide "SENTRY" (its T at 49.11% across). Figures: the widest, "up to
   500 m" (5.9em), fits its column under 26px, beside an 8px indent and a 28px gap */
@media (orientation: portrait) and (max-width: 760px) {
  :root {
    --text-detail: calc((100vw - 2 * var(--gutter)) * (.5089 - .06 / 6.577) / 9.455);
    --text-figure: min(26px, ((100vw - 2 * var(--gutter)) * .4911 - 36px) / 5.9);
  }
}

/* wide screens: the page's side inset grows with the window, so header, hero and every section keep text and media the same distance
   from the edges */
@media (min-width: 1024px) {
  :root { --gutter-base: max(48px, 6vw); }
}