/* =====================================================================
   VectorShift — Colors & Type
   Editorial / financial-paper aesthetic. Warm cream surfaces, deep ink,
   espresso accent. Source Serif 4 + Public Sans + JetBrains Mono.
   ===================================================================== */

@import url("https://fonts.googleapis.com/css2?family=Source+Serif+4:opsz,ital,wght@8..60,0,300..700;8..60,1,300..700&family=Public+Sans:wght@300;400;500;600&family=JetBrains+Mono:wght@400;500&display=swap");

:root {

  /* ─── SURFACE / NEUTRALS ───────────────────────────────────────────
     Warm off-whites layered to feel like printed paper. Use --bg as
     the page; --bg-alt for alternating sections; --paper for cards
     and elevated surfaces. NEVER use pure #FFFFFF.                    */
  --bg:           #FFFFFF;   /* page background — pure white           */
  --bg-alt:       #FFFFFF;   /* alternating section — white (no cream) */
  --paper:        #FFFFFF;   /* cards / panels — white                 */

  /* ─── INK / TEXT ───────────────────────────────────────────────────
     Near-black with a hint of cool. ink-soft for body text feels
     less harsh than full ink. muted for labels, dim for tertiary.    */
  --ink:          #0B0E12;   /* primary text, headings — deep, cool   */
  --ink-soft:     #23272E;   /* body copy                             */
  --muted:        #5C626B;   /* labels, eyebrows, captions (cool gray) */
  --dim:          #969BA3;   /* tertiary, deemphasized (cool gray)     */

  /* ─── RULES / BORDERS ──────────────────────────────────────────────
     Warm beige hairlines — never use cool gray borders. rule for
     standard 1px dividers; rule-dk for slightly stronger frames.     */
  --rule:         #E6E7EA;   /* cool neutral hairline (not warm beige) */
  --rule-dk:      #CCCFD5;   /* stronger cool-neutral frame            */

  /* ─── ACCENT ───────────────────────────────────────────────────────
     Espresso brown for ALL accent moments on light surfaces — italic
     em words, link hover, citation chips, dots, sec-col-badges, etc.
     accent-gold is the SAME accent shifted lighter so it reads as
     warm metallic on the dark hero/CTA backgrounds.                  */
  --accent:        #14181E;   /* light surfaces: monochrome ink accent */
  --accent-soft:   rgba(20,24,30,0.05);
  --accent-gold:   #C5A562;   /* warm gold — DARK surfaces only        */
  --accent-highlight: rgba(197,165,98,0.42);
  --brand:         #5B4824;   /* espresso — wordmark only              */

  /* ─── DARK SURFACES ────────────────────────────────────────────────
     Heroes + CTA bands use ink as base. midnight-blue is layered as
     a hard-light blend over desaturated photography to produce the
     signature blue-tinted dusk look.                                  */
  --dark-bg:        #06080b;
  --dark-blend:     #14245a;
  --on-dark:        var(--paper);

  /* ─── FONTS ────────────────────────────────────────────────────────
     Serif = Source Serif 4 (variable, optical 8-60).
     Sans  = Public Sans for UI / labels / body in dense layouts.
     Mono  = JetBrains Mono (Product page only).
     System fallbacks selected to match metrics.                       */
  --serif:        'Source Serif 4', 'Times New Roman', Georgia, serif;
  --sans:         'Public Sans', 'Helvetica Neue', Helvetica, Arial, sans-serif;
  --mono:         'JetBrains Mono', ui-monospace, Menlo, monospace;

  /* ─── TYPE SCALE — DISPLAY (serif) ─────────────────────────────────
     Almost everything large is serif, weight 400, italics in accent.
     Letter-spacing is tight: -0.025em to -0.04em as size grows.       */
  --t-display:    clamp(40px, 5.2vw, 80px);  /* hero / cta band heads */
  --t-h1:         clamp(38px, 4.6vw, 68px);  /* section headings       */
  --t-h2:         clamp(32px, 3.8vw, 56px);  /* sub-section            */
  --t-h3:         28px;                      /* card title             */
  --t-h4:         24px;                      /* small card title       */
  --t-h5:         22px;                      /* stack layer title      */
  --t-lede:       19px;                      /* section-sub serif      */

  /* ─── TYPE SCALE — TEXT (sans) ─────────────────────────────────────  */
  --t-body:       16px;     /* default body / paragraph                */
  --t-body-sm:    15px;     /* dense body                              */
  --t-ui:         14px;     /* nav links, buttons, ui                  */
  --t-meta:       13px;     /* metadata, hero link                     */
  --t-label:      12px;     /* uppercase tracked label                 */
  --t-micro:      11px;     /* image-break captions, footer copy       */
  --t-mini:       10px;     /* doc-head, status                        */
  --t-cite:       9px;      /* citation chip                           */

  /* ─── LINE / TRACKING ──────────────────────────────────────────────  */
  --lh-display:   1.02;
  --lh-heading:   1.06;
  --lh-card:      1.15;
  --lh-body:      1.65;
  --lh-ui:        1.55;
  --tr-display:   -0.028em;
  --tr-heading:   -0.025em;
  --tr-tight:     -0.018em;
  --tr-label:     0.18em;   /* uppercase labels                        */
  --tr-eyebrow:   0.22em;   /* hero eyebrows                           */

  /* ─── SPACING ──────────────────────────────────────────────────────
     8px base, larger jumps on the editorial end. --pad-page is the
     container side padding at desktop (compresses to 32 at <1024).   */
  --s-1:          4px;
  --s-2:          8px;
  --s-3:          12px;
  --s-4:          16px;
  --s-5:          24px;
  --s-6:          32px;
  --s-7:          40px;
  --s-8:          56px;
  --s-9:          64px;
  --s-10:         80px;
  --s-11:         96px;
  --s-12:         140px;     /* between major sections                  */

  --pad-page:     64px;
  --container:    1320px;
  --container-wide: 1440px;

  /* ─── BORDERS / RADII / ELEVATION ──────────────────────────────────
     This is a HAIRLINE design system. Borders default to 1px solid
     --rule. Radius is almost always 0 — squared cards, squared
     buttons. The only rounded thing is the citation chip (2px) and
     dots/avatars. Shadows are used sparingly; rely on borders +
     subtle color contrast for separation.                              */
  --bw:           1px;
  --bw-strong:    2px;
  --r-none:       0;
  --r-chip:       2px;
  --r-full:       9999px;

  --shadow-text-dark:   0 2px 32px rgba(0,0,0,0.55);
  --shadow-text-soft:   0 2px 18px rgba(0,0,0,0.35);

  /* ─── MOTION ───────────────────────────────────────────────────────
     Slow and confident. Reveals 1s, ken-burns 32s, no bounces.        */
  --ease-out:     cubic-bezier(.16, 1, .3, 1);
  --ease-std:     cubic-bezier(.4, 0, .2, 1);
  --t-fast:       0.2s;
  --t-med:        0.6s;
  --t-slow:       1s;
  --t-reveal:     1s;

  /* ─── NAV (fixed) ──────────────────────────────────────────────────  */
  --nav-h:        56px;
  --nav-bg:       rgba(255,255,255,0.85);

}


/* =====================================================================
   BASE
   ===================================================================== */
html { font-size: 16px; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; }
body {
  background: var(--bg);
  color: var(--ink);
  font-family: var(--sans);
  font-weight: 400;
  font-size: var(--t-body);
  line-height: var(--lh-ui);
}


/* =====================================================================
   SEMANTIC TYPE CLASSES
   Use these directly on elements to apply the canonical treatment.
   ===================================================================== */

/* DISPLAY — hero headlines, CTA band, image-break quotes ------------- */
.vs-display {
  font-family: var(--serif);
  font-weight: 400;
  font-size: var(--t-display);
  line-height: var(--lh-display);
  letter-spacing: var(--tr-display);
  color: var(--ink);
}
.vs-display em { font-style: italic; color: var(--accent); font-weight: 300; }
.vs-display.on-dark { color: var(--paper); text-shadow: var(--shadow-text-dark); }
.vs-display.on-dark em { color: var(--accent-gold); }

/* H1 — section heading ---------------------------------------------- */
.vs-h1 {
  font-family: var(--serif);
  font-weight: 400;
  font-size: var(--t-h1);
  line-height: var(--lh-heading);
  letter-spacing: var(--tr-heading);
  color: var(--ink);
}
.vs-h1 em { font-style: italic; color: var(--accent); }

/* H2 — sub-section / page sub-head ---------------------------------- */
.vs-h2 {
  font-family: var(--serif);
  font-weight: 400;
  font-size: var(--t-h2);
  line-height: var(--lh-heading);
  letter-spacing: var(--tr-heading);
  color: var(--ink);
}
.vs-h2 em { font-style: italic; color: var(--accent); }

/* H3 — card / capability cell title --------------------------------- */
.vs-h3 {
  font-family: var(--serif);
  font-weight: 400;
  font-size: var(--t-h3);
  line-height: var(--lh-card);
  letter-spacing: var(--tr-tight);
  color: var(--ink);
}

/* H4 — small card title --------------------------------------------- */
.vs-h4 {
  font-family: var(--serif);
  font-weight: 400;
  font-size: var(--t-h4);
  line-height: var(--lh-card);
  letter-spacing: var(--tr-tight);
  color: var(--ink);
}

/* H5 — stack layer title (slightly heavier) ------------------------- */
.vs-h5 {
  font-family: var(--serif);
  font-weight: 500;
  font-size: var(--t-h5);
  line-height: var(--lh-card);
  letter-spacing: -0.012em;
  color: var(--ink);
}

/* LEDE — serif intro paragraph under a section heading -------------- */
.vs-lede {
  font-family: var(--serif);
  font-weight: 300;
  font-size: var(--t-lede);
  line-height: 1.5;
  letter-spacing: -0.005em;
  color: var(--ink-soft);
}

/* BODY — default sans paragraph ------------------------------------- */
.vs-body {
  font-family: var(--sans);
  font-weight: 400;
  font-size: var(--t-body);
  line-height: var(--lh-body);
  color: var(--ink-soft);
}

/* META — small sans body / row body --------------------------------- */
.vs-meta {
  font-family: var(--sans);
  font-weight: 400;
  font-size: var(--t-body-sm);
  line-height: 1.6;
  color: var(--muted);
}

/* LABEL — uppercase tracked tag (section labels, eyebrows) ---------- */
.vs-label {
  font-family: var(--sans);
  font-weight: 500;
  font-size: var(--t-ui);
  letter-spacing: var(--tr-label);
  text-transform: uppercase;
  color: var(--muted);
}

/* EYEBROW — heroic uppercase, paired with hairline rules ------------ */
.vs-eyebrow {
  font-family: var(--sans);
  font-weight: 500;
  font-size: var(--t-meta);
  letter-spacing: var(--tr-eyebrow);
  text-transform: uppercase;
  color: rgba(251,249,244,0.92);
}

/* NUM-IT — italic serif numeral (01, 02, …) ------------------------- */
.vs-num-it {
  font-family: var(--serif);
  font-style: italic;
  font-weight: 400;
  font-size: 17px;
  color: var(--accent);
}

/* MARKER — italic serif inline accent ("ambitious funds") ----------- */
.vs-marker {
  font-family: var(--serif);
  font-style: italic;
  color: var(--accent);
}
.vs-marker.on-dark { color: var(--accent-gold); }

/* CODE — JetBrains Mono inline -------------------------------------- */
.vs-code {
  font-family: var(--mono);
  font-weight: 400;
  font-size: 13px;
  color: var(--ink-soft);
}

/* CITE — superscript citation chip ---------------------------------- */
.vs-cite {
  font-family: var(--sans);
  font-weight: 600;
  font-size: var(--t-cite);
  vertical-align: super;
  color: var(--paper);
  background: var(--accent);
  padding: 1px 5px;
  border-radius: var(--r-chip);
  letter-spacing: 0.04em;
}