/* =========================================================================
   style.css - design tokens, reset, base typography, layout primitives.
   Values traceable to /research (Wope measurements) + Ryan Vinz logo palette.
   ========================================================================= */

:root {
  /* Force dark native form controls/scrollbars regardless of OS theme;
     theme.css flips this to light only when [data-theme="light"] is set. */
  color-scheme: dark;

  /* --- Color: surfaces (deep navy, from logo navy darkened) --- */
  --bg:            #070b14;   /* deepest page background */
  --bg-alt:        #0a1020;   /* alternating section bg */
  --surface:       #0e1526;   /* raised section surface */
  --card:          rgba(255, 255, 255, 0.035);
  --card-2:        rgba(255, 255, 255, 0.05);
  --border:        rgba(255, 255, 255, 0.08);
  --border-strong: rgba(255, 255, 255, 0.14);

  /* --- Color: brand (sampled from logo) --- */
  --navy:          #2b3a66;   /* logo navy */
  --navy-600:      #38497d;
  --gold:          #c3a368;   /* logo gold - primary accent */
  --gold-bright:   #d9be83;
  --gold-soft:     rgba(195, 163, 104, 0.14);

  /* --- Color: text --- */
  --text:          #c7cedc;   /* body */
  --text-strong:   #ffffff;   /* headings */
  --text-muted:    #8a95ac;   /* captions, meta */

  /* --- Typography ---
     One family site-wide: IBM Plex Sans (an engineering/technical face with a
     matching mono, chosen for a consistent electro-mechanical voice). Hierarchy
     is carried by SIZE + WEIGHT + TRACKING, not by mixing typefaces. The two
     variables are kept (display vs body) so intent stays readable in the CSS,
     but both now resolve to the same family. */
  --font-display: "IBM Plex Sans", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --font-body:    "IBM Plex Sans", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;

  /* fluid type scale (measured desktop maxima) */
  --fs-hero:    clamp(2.5rem, 6vw, 4.5rem);   /* 40 → 72 */
  --fs-h2:      clamp(1.875rem, 4vw, 3.5rem); /* 30 → 56 */
  --fs-h3:      clamp(1.5rem, 2.4vw, 2rem);   /* 24 → 32 */
  --fs-faq:     1.25rem;                       /* 20 → 24 question */
  --fs-lead:    clamp(1.0625rem, 1.4vw, 1.25rem);
  --fs-body:    1rem;
  --fs-small:   0.875rem;

  /* line-height scale - the taller the text, the tighter it leads; long-form
     body copy gets generous leading for readability. Applied consistently so
     vertical rhythm reads as intentional across every page. */
  --lh-hero:    1.04;   /* hero / largest display */
  --lh-heading: 1.12;   /* section headings (h2) */
  --lh-snug:    1.25;   /* sub-headings (h3/h4) */
  --lh-lead:    1.55;   /* intro / lead paragraphs */
  --lh-body:    1.7;    /* long-form body copy */

  /* tracking scale - larger display text is tightened; small uppercase labels
     are opened up. Keeps the single family looking deliberate at every size. */
  --ls-hero:    -0.03em;
  --ls-heading: -0.02em;
  --ls-snug:    -0.01em;
  --ls-label:   0.14em;  /* uppercase eyebrows / kickers */

  /* --- Spacing (4px base; section rhythm 124px measured) --- */
  --section-y:  clamp(4.5rem, 9vw, 7.75rem);  /* ~72 → 124 */
  --container:  1248px;
  --container-md: 1128px;
  --container-sm: 984px;
  --gutter:     clamp(1.25rem, 4vw, 2rem);

  /* --- Radius (measured) --- */
  --r-pill: 999px;
  --r-card: 16px;
  --r-sm:   10px;

  /* --- Effects --- */
  --shadow-card: 0 1px 0 rgba(255,255,255,0.04) inset, 0 24px 60px -30px rgba(0,0,0,0.8);
  --ease: cubic-bezier(0.22, 1, 0.36, 1);
}

/* --- Reset --------------------------------------------------------------- */
*, *::before, *::after { box-sizing: border-box; }
* { margin: 0; }
/* Root size bumped to 106.25% (1rem = 17px). IBM Plex Sans has a smaller
   x-height than Inter, so it reads smaller at the same px; this nudges the
   whole rem-based scale up uniformly to optically match the old sizing while
   preserving every proportion in the hierarchy. */
html { font-size: 106.25%; -webkit-text-size-adjust: 100%; scroll-behavior: smooth; background: var(--bg); }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }

body {
  font-family: var(--font-body);
  font-size: var(--fs-body);
  line-height: var(--lh-body);
  color: var(--text);
  /* transparent so the fixed #site-bg ambient field shows through and every
     section blends into one continuous space (no solid section seams). */
  background: transparent;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  overflow-x: hidden;
}

img, svg, video { display: block; max-width: 100%; }
img { height: auto; }
a { color: inherit; text-decoration: none; }
button, input, textarea, select { font: inherit; color: inherit; }
ul { list-style: none; padding: 0; }

/* --- Headings ------------------------------------------------------------
   Single family, so hierarchy is built from weight + size + leading + tracking.
   Leading tightens as text grows; tracking follows the scale tokens. */
h1, h2, h3, h4 {
  font-family: var(--font-display);
  color: var(--text-strong);
  font-weight: 700;
  line-height: var(--lh-snug);
  letter-spacing: var(--ls-heading);
  text-wrap: balance; /* even, deliberate line breaks on multi-line headings */
}
h1 { font-size: var(--fs-hero); line-height: var(--lh-hero);    letter-spacing: var(--ls-hero); }
h2 { font-size: var(--fs-h2);   line-height: var(--lh-heading); letter-spacing: var(--ls-heading); }
h3 { font-size: var(--fs-h3);   line-height: var(--lh-snug);    letter-spacing: var(--ls-snug); }
h4 { font-weight: 600;          line-height: var(--lh-snug);    letter-spacing: var(--ls-snug); }

/* body copy: generous, consistent leading; a comfortable measure so long
   paragraphs read cleanly rather than stretching edge-to-edge. */
p { color: var(--text); line-height: var(--lh-body); }
p + p { margin-top: 0.9em; }

/* --- Layout primitives --------------------------------------------------- */
.container    { width: min(100% - (var(--gutter) * 2), var(--container)); margin-inline: auto; }
.container-md { width: min(100% - (var(--gutter) * 2), var(--container-md)); margin-inline: auto; }
.container-sm { width: min(100% - (var(--gutter) * 2), var(--container-sm)); margin-inline: auto; }

.section { padding-block: var(--section-y); position: relative; }
/* "surface" sections are styled in components.css as a soft, edge-fading wash
   over the global #site-bg field (no solid fill, no hard seams). */

.section-head { max-width: 720px; margin-inline: auto; text-align: center; margin-bottom: clamp(2.5rem, 5vw, 4rem); }
.section-head .eyebrow { margin-bottom: 1rem; }
.section-head p { color: var(--text-muted); font-size: var(--fs-lead); margin-top: 1rem; }

/* eyebrow / kicker label */
.eyebrow {
  display: inline-flex; align-items: center; gap: 0.5rem;
  font-family: var(--font-body); font-size: 0.75rem; font-weight: 600;
  letter-spacing: 0.14em; text-transform: uppercase; color: var(--gold);
}
.eyebrow::before {
  content: ""; width: 1.5rem; height: 1px; background: var(--gold); opacity: 0.6;
}
.section-head .eyebrow { justify-content: center; }

/* --- Utilities ----------------------------------------------------------- */
.text-muted { color: var(--text-muted); }
.text-gold  { color: var(--gold); }
.lead { font-size: var(--fs-lead); line-height: var(--lh-lead); color: var(--text-muted); }
.visually-hidden {
  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 */
.skip-link {
  position: absolute; left: 1rem; top: -3rem; z-index: 200;
  background: var(--gold); color: #1a1407; padding: 0.5rem 1rem;
  border-radius: var(--r-sm); font-weight: 600; transition: top 0.2s var(--ease);
}
.skip-link:focus { top: 1rem; }

/* focus visibility */
:focus-visible { outline: 2px solid var(--gold); outline-offset: 3px; border-radius: 4px; }