/* ============================================================================
   VALUE SOLUTIONS — SHARED DESIGN SYSTEM
   ============================================================================
   ONE source of truth for tokens + nav. Every page links this file.

   WHY THIS EXISTS (2026-07-31 audit): every page hand-rolled its own :root and
   its own <header>. Tokens happened to match hex-for-hex, but that was
   discipline, not a system — and /workshop/ drifted anyway (border 3px vs 2px,
   no image mark, and a nav with ZERO links back into the site). Dock O9.

   ADDITIVE BY DESIGN — this file is loaded BEFORE each page's inline <style>,
   so any rule a page already defines still wins. Linking this file cannot
   restyle an existing page; it only supplies what a page doesn't define.

   Nav markup is injected by vs-nav.js. Nav lives OUTSIDE <main class="page">,
   so it never affects cl13nt3d1t editor keys (pid:tag:index).
   ============================================================================ */

/* ---- TOKENS (verbatim from index.html:417-427 — no value changed) ---- */
:root{
  --abyss:#0A0A0B;       /* black */
  --ink:#161618;         /* near-black surface */
  --mid:#232326;         /* dark gray */
  --steel:#3A3A3E;
  --sky:#C9CDD2;         /* light neutral accent (no blue anywhere) */
  --brass:#C22B34;       /* VS crimson — CTAs, marks */
  --brass-deep:#820004;  /* JB official logo red — on light bg */
  --paper:#F6F5F4;
  --paper-dim:#E5E3E1;
  --text-dark:#141416;
  --text-mute:#66666B;
  --ok:#2E7D4F;

  /* ---- TYPE SCALE (NEW — 1.25 major third, 17px base) ----
     Nothing consumes these yet. Introduced here so the scale EXISTS and is
     reproducible (the one-pager could not be rebuilt from the system before).
     Pages adopt it one at a time, reviewed individually — never wholesale. */
  --t-xs:12px;      /* mono labels, eyebrows */
  --t-sm:13.5px;    /* captions, fine print */
  --t-base:17px;    /* body */
  --t-md:19px;      /* lede */
  --t-lg:24px;      /* card headings */
  --t-xl:clamp(28px,3.6vw,40px);   /* section heads */
  --t-2xl:clamp(34px,4.4vw,52px);  /* page heads */
  --t-3xl:clamp(40px,6vw,80px);    /* hero */

  --nav-h:68px;
}

/* ---- NAV (verbatim from index.html:450-461, plus the a11y fix) ---- */
.vs-nav{position:sticky;top:0;z-index:50;background:rgba(10,10,11,.96);backdrop-filter:blur(8px);border-bottom:2px solid var(--brass)}
.vs-nav .nav-inner{display:flex;align-items:center;justify-content:space-between;height:var(--nav-h);max-width:1280px;margin:0 auto;padding:0 28px}

/* LOGO — D1 (Travis 2026-07-31): ONE lockup, "Value Solutions".
   Replaces the three-way split (JB icon / "JUSTIN BROWN" / "VALUE SOLUTIONS").
   Mark + wordmark, identical on every page. */
.vs-nav .logo{display:flex;align-items:center;gap:10px;text-decoration:none;cursor:pointer}
.vs-nav .logo img{height:26px;width:auto;display:block}
.vs-nav .logo .wordmark{font-family:'Anton',sans-serif;font-size:19px;color:#fff;text-transform:uppercase;letter-spacing:.06em;line-height:1}

/* nowrap: "The Framework" and "Book a Call" must never break mid-label.
   Wrapping is what produced the two-line nav + clipped CTA at ~1080px. */
.vs-nav .nav-links{display:flex;gap:22px;align-items:center;list-style:none;margin:0;padding:0}
.vs-nav .nav-links a{white-space:nowrap}
.vs-nav .logo .wordmark{white-space:nowrap}
.vs-nav .nav-links a{font-family:'IBM Plex Mono',monospace;font-size:12px;letter-spacing:.1em;text-transform:uppercase;color:rgba(255,255,255,.75);text-decoration:none;cursor:pointer;padding:6px 0;border-bottom:2px solid transparent}
.vs-nav .nav-links a:hover{color:#fff}
.vs-nav .nav-links a.active{color:#E85560;border-bottom-color:#E85560;font-weight:700}
.vs-nav .nav-cta{background:var(--brass);color:#fff!important;padding:10px 18px!important;border-bottom:none!important;font-weight:500}
.vs-nav .nav-cta:hover{background:var(--brass-deep)}
.vs-nav .burger{display:none;background:none;border:none;color:#fff;font-size:26px;cursor:pointer;min-width:44px;min-height:44px;padding:8px}
.vs-nav a:focus-visible,.vs-nav button:focus-visible{outline:2px solid var(--brass);outline-offset:3px}

/* Between 1100px and 1240px the 9-item bar is tight but fits — shave the gap
   and tracking slightly rather than dropping to a hamburger too early. */
@media(min-width:1101px) and (max-width:1240px){
  .vs-nav .nav-links{gap:16px}
  .vs-nav .nav-links a{font-size:11.5px;letter-spacing:.06em}
  .vs-nav .nav-cta{padding:10px 14px!important}
}

/* HAMBURGER BREAKPOINT — 1100px, NOT 900px.
   Measured: 8 links + CTA + logo + padding needs ~1131px at the default gap.
   The old 900px value was inherited from the pre-shared nav and was never
   valid for this item count: between 901px and ~1130px the bar overflowed —
   "The Framework" wrapped to two lines and "Book a Call" clipped off the right
   edge on a vertical/portrait monitor (Travis, from device, 2026-07-31).
   Verify with a width sweep, never by eyeballing one desktop size. */
@media(max-width:1100px){
  .vs-nav .nav-links{display:none;position:absolute;top:var(--nav-h);left:0;right:0;background:var(--abyss);flex-direction:column;padding:20px 28px;gap:4px;border-bottom:1px solid rgba(194,43,52,.4);max-height:calc(100vh - var(--nav-h));overflow-y:auto}
  /* FIXED (dock O10): links measured 29px — under the 44px WCAG/iOS floor.
     The finding was recorded in index.html:705 but the CSS fix was never applied. */
  .vs-nav .nav-links a{display:flex;align-items:center;min-height:44px;padding:8px 0;font-size:13px}
  .vs-nav .nav-links.open{display:flex}
  .vs-nav .burger{display:block}
}

/* 320px is the narrowest phone still in real use — the wordmark must not
   push the hamburger off-screen or wrap to two lines. */
@media(max-width:380px){
  .vs-nav .nav-inner{padding:0 16px}
  .vs-nav .logo{gap:7px}
  .vs-nav .logo img{height:22px}
  .vs-nav .logo .wordmark{font-size:16px;letter-spacing:.04em}
}
@media (prefers-reduced-motion:reduce){
  .vs-nav *{transition:none!important;animation:none!important}
}