/* BeargrassAI brand kit · tokens (drawn from the anchor at 03a45d0).
   Every custom property the kit uses. Colours by time of day, gold for light and "confirmed", barn for the one action,
   the three type families and the type scale, spacing, the hairline, and the surveyor's marks. */
:root {
  /* night */
  --canvas: #0a1024; --night: #16212e; --night-2: #1d2a3a; --indigo: #2b4563; --cream: #f0e6cf; --cream-2: #c9c0ad; --white: #f7efdc;
  /* day */
  --paper: #f4ebd7; --paper-hi: #faf5ea; --ink: #231f1a; --ink-2: #4d453c; --ink-3: #776e62; --olive: #859160;
  /* light, confirmed, and the one action */
  --gold: #d4a25a; --gold-bright: #f4c45a; --gold-ink: #7d5a1a; --barn: #a64b3b;
  /* dawn: the sunrise behind a card, indigo to paper */
  --dawn: linear-gradient(180deg, var(--indigo) 0%, #3d4c70 16%, #6f6577 32%, #b98063 47%, #e2ac68 58%, #f1cf92 70%, #f5e3bd 84%, var(--paper) 100%);
  /* glass and rules */
  --glass: rgba(11, 18, 37, 0.95); --rule: rgba(240, 230, 207, 0.18); --rule-ink: rgba(35, 31, 26, 0.16);
  /* type */
  --display: "Libre Caslon Display", "Libre Caslon Text", Georgia, "Times New Roman", serif;
  --sans: "Archivo", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --mono: "IBM Plex Mono", ui-monospace, "SFMono-Regular", Menlo, monospace;
  --fs-body: 17px; --fs-kicker: 12px; --fs-button: 13px; --fs-lead: 18px; --fs-prose: 19px;
  --fs-h1: clamp(34px, 7.2vw, 52px); --fs-h2: clamp(32px, 6.4vw, 56px); --fs-pull: clamp(26px, 6.6vw, 38px);
  /* spacing */
  --s-1: 4px; --s-2: 8px; --s-3: 12px; --s-4: 16px; --s-5: 24px; --s-6: 32px; --s-7: 48px; --s-8: 64px;
  --gut: max(16px, env(safe-area-inset-left, 0px));
  --gut-r: max(16px, env(safe-area-inset-right, 0px));
  --max: 1240px;
  /* the hairline and the surveyor's marks: corner L-ticks (length, offset) and the "+" */
  --hair: 1px; --cm-len: 7px; --cm-off: 5px; --cm: rgba(240, 230, 207, 0.62);
  --x: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 11 11'%3E%3Cpath d='M5.5 0v11M0 5.5h11' stroke='%23f0e6cf' stroke-width='1.2'/%3E%3C/svg%3E");
  --x-ink: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 11 11'%3E%3Cpath d='M5.5 0v11M0 5.5h11' stroke='%23231f1a' stroke-width='1.2'/%3E%3C/svg%3E");
  color-scheme: dark light;
  /* Hero, measured on About at 1440×900, BGA 2.0.0-preview.30 (ce3abfa), 2026-10-26.
     The bracketed estimates on the hero sheet are replaced by these. */
  --hero-col: 1240px;
  --hero-h: 100svh;
  --hero-h-min: 640px;
  --hero-h-max: 1100px;
  --hero-art-w: 74.3226%;
  --hero-art-max: 921.6px;
  /* Art's left edge on About at 1440: 518.4px, 418.4px into the 1240 column (33.7419% of it). */
  --hero-art-left: 0.337419;
  --hero-fade: 32%;
  --hero-fade-mid: 13%;
  --hero-text-w: 700px;
  --hero-h1: 108px;
  --hero-h1-measure: 10.13ch;
  /* Below 1024, measured on About at 390×844 and 768×1024 (ce3abfa). */
  --hero-narrow-min: 560px;
  --hero-narrow-focus: 50% 50%;
  --hero-narrow-pad-top: 80px;
  --hero-narrow-pad-bottom: 18px;
  --hero-narrow-pad-x: 16px;
  --hero-narrow-h1: clamp(46px, 15.2vw, 108px);
  --hero-narrow-lead: 18px;
  --hero-tablet-lead: 19px;
  /* Darker over the words (top and bottom), clearer through the middle so the picture still shows. Navy is --canvas. */
  --hero-narrow-scrim: linear-gradient(180deg, rgba(10, 16, 36, 0.9) 0%, rgba(10, 16, 36, 0.86) 16%, rgba(10, 16, 36, 0.78) 30%, rgba(10, 16, 36, 0.5) 42%, rgba(10, 16, 36, 0.18) 50%, rgba(10, 16, 36, 0.72) 62%, rgba(10, 16, 36, 0.9) 74%, rgba(10, 16, 36, 0.95) 86%, #0a1024 100%);
  /* Behind the cream menu on a dark hero. 82% navy at the top, clear by 160px. */
  --hero-top-scrim: linear-gradient(180deg, rgba(10, 16, 36, 0.82) 0px, rgba(10, 16, 36, 0.62) 64px, rgba(10, 16, 36, 0) 160px);
  /* The same fade in paper, for a light hero, so the dark logo and menu read. Paper is --paper. */
  --hero-top-scrim-light: linear-gradient(180deg, rgba(244, 235, 215, 0.9) 0px, rgba(244, 235, 215, 0.62) 64px, rgba(244, 235, 215, 0) 160px);
}
/* Laptops: the headline steps with the window, as the home always has, so a half-width column keeps three lines (BGA 60). */
@media (min-width: 900px) { :root { --fs-h1: clamp(40px, 3.2vw, 64px); } }