:root {
  /* Brand */
  --orange: #FF8400;
  --orange-dark: #D97000;
  --white: #FFFFFF;
  --almost-black: #0A0A0A;
  --black: #000000;
  --card-bg: #0A0A0A;
  --card-border: #3A2800;

  /* Typography */
  --font-sans: 'Geist', sans-serif;
  --font-mono: 'Geist Mono', monospace;
  --font-pixel-square:   'GeistPixelSquare',   monospace;
  --font-pixel-grid:     'GeistPixelGrid',     monospace;
  --font-pixel-circle:   'GeistPixelCircle',   monospace;
  --font-pixel-triangle: 'GeistPixelTriangle', monospace;
  --font-pixel-line:     'GeistPixelLine',     monospace;
  --font-pixel: var(--font-pixel-square);

  /* ═══ THE H1 ═══════════════════════════════════════════════════════════
     Every H1 on the site is ONE look, and this is the only place it is defined.
     Do not set font-family / size / weight / line-height / letter-spacing on an
     H1 in a component file — reference these instead. A per-page override is how
     this drifted apart in the first place.

     It really was every property, not just one: hero H1s were Geist 500 while
     blog-post, case-study and glossary titles were GeistPixelSquare 400 — a
     different typeface entirely — across seven sizes (120/72/64/56/54/52/40),
     three leadings (1.32/1.08/1.04) and two trackings.

     --h1-size is one fluid clamp rather than a breakpoint ladder on purpose: it
     removes every @media font-size override, and with them the specificity bugs
     those overrides kept causing. It hits the 72px cap at ~1385px wide and floors
     at 32px below ~615px.

     --h1-leading at 1.32 sits just under Geist's own line box (~1.30em), so a
     wrapped heading never collides with itself. */
  --h1-font:     var(--font-sans);
  --h1-weight:   500;
  --h1-size:     clamp(2rem, 5.2vw, 72px);
  --h1-leading:  1.32;
  --h1-tracking: -0.01em;
  --h1-color:    var(--white);

  /* Optical inset for a square eyebrow marker sitting above an H1.
     Glyphs carry a left side bearing, so H1 ink starts a little inside its own
     text box — 0.078em for Geist's straight-stem capitals (B D E F H I K L M
     N P R), which is 5.6px at the 72px cap. A square eyebrow is a
     pseudo-element with no bearing at all, so an eyebrow and an H1 that are
     flush-left in the layout still render with the square hanging left of the
     heading. This puts the square on the heading's own left edge.
     Derived from --h1-size so it stays correct across the whole clamp; a fixed
     px nudge would only be right at one viewport width.
     The bearing depends on the heading's FIRST CHARACTER, so this default (the
     straight-stem value) is only right for those. Templates that pair an
     eyebrow with an H1 retune it per heading from src/lib/optical.ts — without
     that, a heading starting with a round or diagonal cap (O C G Q / A V X Z)
     ends up over-nudged by up to 4px. */
  --h1-optical-inset: calc(var(--h1-size) * 0.078);

  /* Layout */
  --col-width: 1252px;
  /* Faint vertical tram lines sit on their own (wider) box so they can be
     pushed toward the edges without moving the content column. */
  --rail-width: 1500px;
  /* Minimum gutter the tram lines — and everything aligned to the rail (corner
     brackets, nav, footer) — keep from the viewport edges on narrow screens.
     Change here to retune the whole rail at once. */
  --rail-min-margin: 43px;
  /* Inset of a tram line from the viewport centre, for corner brackets that
     must sit ON the lines. Clamps to (edge − --rail-min-margin) on narrow
     viewports, so the lines/brackets never get closer than that to the edge.
     Use as `left:` or `right:` on a bracket inside a centred column box. */
  --rail-edge: calc(50% - min(var(--rail-width) / 2, 50vw - var(--rail-min-margin)));

  /* Horizontal inset of page CONTENT from the viewport edge. Content does NOT
     run all the way out to the vertical tram lines (--rail-edge); it sits
     inside the centred content column (--col-width) plus the section padding,
     which is exactly where the hero text begins. Use this (as left/right
     padding on a full-bleed section's inner) to line content up with the hero.
     On 1512px → 130px column gutter + 38px = 168px. */
  --content-pad: 38px;
  --content-edge: calc(50% - min(var(--col-width) / 2, 50vw) + var(--content-pad));
  --nav-height: 64px;


  /* Corner bracket size */
  --bracket: 10px;
  --bracket-w: 4px;
}

/* Note: the content column (--col-width) and tram lines (--rail-width) are held
   at their base sizes on all screens >=1920px too — the column stays centred and
   the side margins simply widen, matching the sub-1920 look. (Earlier this grew
   the column to 1845px, but that left too little gutter near 1920 and felt too
   wide overall.) */