/* =====================================================================
   VSG Tech — Design Tokens
   colors_and_type.css

   Editorial light mode. Type-led. Restrained palette.
   Reference vibe: Anthropic.com / Linear / a premium publication.
   Never: SaaS dashboard chrome.
   ===================================================================== */

/* Geist Sans — loaded from local variable font file the brand provided. */
@font-face {
  font-family: "Geist";
  src: url("./fonts/Geist-VariableFont_wght.ttf") format("truetype-variations"),
       url("./fonts/Geist-VariableFont_wght.ttf") format("truetype");
  font-weight: 100 900;
  font-style: normal;
  font-display: swap;
}
/* Synthetic italic — Geist VariableFont ships roman only.
   The browser slants on its own, which is acceptable for the geometric italic
   register the system calls for. Flag: drop in a real Geist-Italic.ttf if available. */
@font-face {
  font-family: "Geist";
  src: url("./fonts/Geist-VariableFont_wght.ttf") format("truetype-variations"),
       url("./fonts/Geist-VariableFont_wght.ttf") format("truetype");
  font-weight: 100 900;
  font-style: italic;
  font-display: swap;
}

/* Geist Mono — no file supplied; loaded from Google Fonts.
   Flag: stakeholder to supply Geist Mono .ttf for full self-host parity. */
@import url('https://fonts.googleapis.com/css2?family=Geist+Mono:wght@500&display=swap');

:root {
  /* ---------- Color: surfaces ---------- */
  --paper:            #F5F0E8;  /* main canvas — warm cream */
  --paper-2:          #FBF7EF;  /* alternating section — lighter cream */
  --surface-white:    #FFFFFF;  /* pure white card */

  /* ---------- Color: ink (foreground) ---------- */
  --ink-1:            #1A1612;  /* primary text, warm near-black */
  --ink-2:            #3D362E;  /* mid-tone, sub-heads, body emphasis */
  --ink-3:            #6B6358;  /* body */
  --ink-4:            #9C9387;  /* muted caption */

  /* ---------- Color: lines ---------- */
  --hairline:         #E5DDCC;  /* 1px borders, section dividers */
  --divider-strong:   #C9BFA9;  /* hover/active border darken */

  /* ---------- Color: accent (coral) ---------- */
  --coral:            #C9633A;  /* THE accent. used sparingly. */
  --coral-soft:       rgba(201, 99, 58, 0.10);

  /* ---------- Color: semantic ---------- */
  --success:          #0E7A5A;
  --success-soft:     rgba(14, 122, 90, 0.10);

  /* ---------- Font families ---------- */
  /* Geist Sans for display + body; Geist Mono for captions/labels. */
  --font-display:     "Geist", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  --font-body:        "Geist", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  --font-mono:        "Geist Mono", ui-monospace, "SF Mono", Menlo, Consolas, monospace;

  /* ---------- Font sizes ---------- */
  --fs-eyebrow:       11px;
  --fs-caption:       13px;
  --fs-body-sm:       15px;
  --fs-body:          17px;
  --fs-body-lg:       19px;
  --fs-lead:          22px;
  --fs-h4:            28px;
  --fs-h3:            40px;
  --fs-h2:            56px;
  --fs-h1:            80px;
  --fs-display:       112px;

  /* ---------- Line heights ---------- */
  --lh-display:       1.0;
  --lh-headline:      1.05;
  --lh-subhead:       1.25;
  --lh-body:          1.65;
  --lh-body-loose:    1.7;

  /* ---------- Tracking ---------- */
  --track-display:    -0.035em;
  --track-headline:   -0.025em;
  --track-body:        0;
  --track-mono:        0.28em;

  /* ---------- Spacing scale (4px base) ---------- */
  --sp-1:  4px;
  --sp-2:  8px;
  --sp-3:  12px;
  --sp-4:  16px;
  --sp-5:  24px;
  --sp-6:  32px;     /* canonical headline → body gap */
  --sp-7:  48px;
  --sp-8:  64px;
  --sp-9:  96px;
  --sp-10: 144px;    /* section vertical padding */

  /* ---------- Radii ---------- */
  --r-card:    20px;
  --r-tile:    12px;
  --r-input:    8px;
  --r-pill:   999px;

  /* ---------- Components ---------- */
  --btn-h:           50px;
  --btn-px:          28px;
  --card-pad:        40px;
  --container:      1200px;
  --container-wide: 1320px;

  /* ---------- Motion ---------- */
  --ease-standard:   cubic-bezier(0.2, 0.0, 0.0, 1);
  --ease-out:        cubic-bezier(0.16, 1, 0.3, 1);
  --dur-fast:        140ms;
  --dur-base:        220ms;
  --dur-slow:        420ms;

  /* ---------- Semantic role aliases ---------- */
  --bg:              var(--paper);
  --bg-alt:          var(--paper-2);
  --fg:              var(--ink-1);
  --fg-muted:        var(--ink-3);
  --border:          var(--hairline);
  --accent:          var(--coral);
}

/* =====================================================================
   Base + Semantic Type
   ===================================================================== */

html, body {
  background: var(--paper);
  color: var(--ink-2);
  font-family: var(--font-body);
  font-size: var(--fs-body);
  line-height: var(--lh-body);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
}

/* Eyebrow — sits above every big serif headline.
   Mono, coral, 11px, all-caps, .28em tracking. */
.eyebrow,
[data-style="eyebrow"] {
  font-family: var(--font-mono);
  font-weight: 500;
  font-size: var(--fs-eyebrow);
  letter-spacing: var(--track-mono);
  text-transform: uppercase;
  color: var(--coral);
  line-height: 1;
  display: inline-block;
}

/* Display headlines — Geist Sans, heavy weight (700), tight tracking. */
h1, .h1, h2, .h2, h3, .h3, h4, .h4 {
  font-family: var(--font-display);
  font-weight: 700;       /* heavy sans display. 800 for max-impact hero. */
  line-height: var(--lh-headline);
  letter-spacing: var(--track-headline);
  color: var(--ink-1);
  margin: 0;
}
h1, .h1 {
  font-size: var(--fs-h1);
  line-height: var(--lh-display);
  letter-spacing: var(--track-display);
}
h2, .h2 { font-size: var(--fs-h2); }
h3, .h3 { font-size: var(--fs-h3); }
h4, .h4 { font-size: var(--fs-h4); }

/* Italic emphasis inside headlines — keep weight 300, switch to italic. */
/* Italic emphasis inside headlines — keep weight 700, switch to italic.
   In a sans display this reads as a subtle inflection, not a swoop. */
h1 em, h1 i, .h1 em, .h1 i,
h2 em, h2 i, .h2 em, .h2 i,
h3 em, h3 i, .h3 em, .h3 i {
  font-style: italic;
  font-weight: 700;
  color: var(--ink-1);
}

/* Body text — Inter, generous leading. */
p, .body {
  font-family: var(--font-body);
  font-size: var(--fs-body-lg);
  line-height: var(--lh-body-loose);
  color: var(--ink-3);
  margin: 0;
  text-wrap: pretty;
}
.body-sm   { font-size: var(--fs-body-sm); line-height: var(--lh-body); }
.lead      { font-size: var(--fs-lead);    line-height: 1.5; color: var(--ink-2); }
.caption   { font-size: var(--fs-caption); line-height: 1.45; color: var(--ink-4); }

/* Mono utility (captions, source notes, code) — note: NOT colored coral by default;
   only the .eyebrow variant is coral. */
.mono, code, kbd {
  font-family: var(--font-mono);
  font-weight: 500;
  font-size: var(--fs-caption);
  letter-spacing: 0.04em;
  color: var(--ink-3);
}
.mono-caps {
  font-family: var(--font-mono);
  font-weight: 500;
  font-size: var(--fs-eyebrow);
  letter-spacing: var(--track-mono);
  text-transform: uppercase;
  color: var(--ink-4);
}

/* Links — ink color, coral underline. */
a {
  color: var(--ink-1);
  text-decoration: underline;
  text-decoration-color: var(--coral);
  text-decoration-thickness: 1.5px;
  text-underline-offset: 4px;
  transition: text-decoration-thickness var(--dur-fast) var(--ease-standard);
}
a:hover { text-decoration-thickness: 2.5px; }

/* Hairline horizontal rule */
hr.hairline {
  border: none;
  border-top: 1px solid var(--hairline);
  margin: 0;
}

/* Section utility — alternating cream backgrounds, 144px vertical padding. */
.section {
  padding-top: var(--sp-10);
  padding-bottom: var(--sp-10);
  background: var(--paper);
}
.section--alt { background: var(--paper-2); }
.container {
  max-width: var(--container);
  margin: 0 auto;
  padding-left: var(--sp-7);
  padding-right: var(--sp-7);
}

/* Canonical headline → body gap: 32px on both sides of the headline. */
.eyebrow + h1, .eyebrow + h2, .eyebrow + h3,
.eyebrow + .h1, .eyebrow + .h2, .eyebrow + .h3 { margin-top: var(--sp-6); }
h1 + p, h2 + p, h3 + p,
.h1 + p, .h2 + p, .h3 + p { margin-top: var(--sp-6); }

/* Selection */
::selection { background: var(--coral-soft); color: var(--ink-1); }


/* =====================================================================
   RESPONSIVE — mobile / tablet overrides for inline-styled JSX
   ─────────────────────────────────────────────────────────────────────
   The JSX uses inline `style={{...}}` everywhere, which has the highest
   CSS specificity (except for !important). To override layouts on small
   viewports we use attribute selectors targeting the rendered DOM style
   attribute + `!important`.
   ===================================================================== */

/* ── TABLET (≤ 1024px) ─────────────────────────────────────────────── */
@media (max-width: 1024px) {
  /* Collapse 3-col grids to 2-col on tablet */
  [style*="grid-template-columns: repeat(3, 1fr)"],
  [style*="grid-template-columns: repeat(4, 1fr)"] {
    grid-template-columns: repeat(2, 1fr) !important;
  }
  /* Side-by-side flex layouts that need to wrap */
  [style*="display: grid"][style*="gridTemplateColumns: 1fr 1.4fr"],
  [style*="display: grid"][style*="grid-template-columns: 1fr 1.4fr"] {
    grid-template-columns: 1fr !important;
  }
  /* Trim outsized gaps */
  [style*="gap: 80px"]   { gap: 48px !important; }
  [style*="gap: 64px"]   { gap: 40px !important; }
  /* Container side padding */
  [style*="padding: 18px 48px"] { padding-left: 28px !important; padding-right: 28px !important; }
}

/* ── MOBILE (≤ 768px) ──────────────────────────────────────────────── */
@media (max-width: 768px) {
  /* HARD RULE: every multi-column grid collapses to a single column */
  [style*="grid-template-columns"] {
    grid-template-columns: 1fr !important;
  }

  /* Reduce all big gaps */
  [style*="gap: 80px"], [style*="gap: 64px"], [style*="gap: 48px"] {
    gap: 24px !important;
  }
  [style*="gap: 32px"] { gap: 18px !important; }

  /* Body section padding */
  section { padding-left: 20px !important; padding-right: 20px !important; }

  /* Header / nav internal padding */
  [style*="padding: 18px 48px"] { padding: 14px 20px !important; }

  /* Containers with max-width fit naturally with the section padding */

  /* Hero typography down-sizes — affects every h1/h2/h3 with inline font-size */
  h1[style*="font-size: 112px"],
  h1[style*="font-size: 104px"],
  h1[style*="font-size: 96px"],
  h1[style*="font-size: 88px"] {
    font-size: clamp(40px, 11vw, 56px) !important;
    line-height: 1.05 !important;
    letter-spacing: -0.03em !important;
  }

  h1[style*="font-size: 80px"],
  h2[style*="font-size: 80px"] {
    font-size: clamp(36px, 10vw, 48px) !important;
    line-height: 1.08 !important;
  }

  h2[style*="font-size: 72px"],
  h2[style*="font-size: 64px"],
  h2[style*="font-size: 56px"] {
    font-size: clamp(32px, 9vw, 42px) !important;
    line-height: 1.1 !important;
  }

  h2[style*="font-size: 48px"],
  h3[style*="font-size: 48px"],
  h2[style*="font-size: 42px"],
  h3[style*="font-size: 42px"] {
    font-size: clamp(26px, 7vw, 32px) !important;
    line-height: 1.15 !important;
  }

  h3[style*="font-size: 36px"],
  h3[style*="font-size: 32px"],
  h3[style*="font-size: 28px"],
  h3[style*="font-size: 26px"],
  h3[style*="font-size: 24px"],
  h3[style*="font-size: 22px"] {
    font-size: clamp(18px, 5vw, 22px) !important;
    line-height: 1.25 !important;
  }

  /* Body / large paragraphs */
  p[style*="font-size: 22px"],
  p[style*="font-size: 21px"],
  p[style*="font-size: 20px"],
  p[style*="font-size: 19px"] {
    font-size: 16px !important;
    line-height: 1.6 !important;
  }

  /* Pull-quote big paragraphs (Essay opener, founder note) */
  p[style*="font-size: 36px"],
  p[style*="font-size: 32px"],
  p[style*="font-size: 30px"] {
    font-size: clamp(20px, 5.6vw, 26px) !important;
    line-height: 1.35 !important;
  }

  /* Trim huge vertical padding on hero sections */
  section[style*="padding-top: 144px"] { padding-top: 72px !important; }
  section[style*="padding-top: 120px"] { padding-top: 64px !important; }
  section[style*="padding-top: 96px"]  { padding-top: 56px !important; }
  section[style*="padding-bottom: 144px"] { padding-bottom: 72px !important; }
  section[style*="padding-bottom: 96px"]  { padding-bottom: 56px !important; }
  section[style*="padding: 144px 0"]      { padding: 72px 20px !important; }
  section[style*="padding: 96px 0 80px"]  { padding: 56px 20px 48px !important; }

  /* Section component shared padding (uses --sp-* tokens with large values) */
  .section { padding-top: var(--sp-8) !important; padding-bottom: var(--sp-8) !important; }

  /* CTA button row — stack buttons full-width on phone */
  [style*="display: flex"][style*="gap: 16"][style*="flex-wrap: wrap"] > a,
  [style*="display: flex"][style*="gap: 16"][style*="flex-wrap: wrap"] > button {
    width: 100% !important;
    justify-content: center !important;
  }

  /* Stack the founder note avatar block neatly */
  [style*="inline-flex"][style*="gap: 14"] {
    flex-wrap: wrap;
    justify-content: center;
  }

  /* Nav: hide desktop links + top-right contact on phones, show hamburger.
     The full mobile menu (full-screen overlay) is rendered by Nav.jsx
     and triggered by the hamburger. */
  .vsg-nav-desktop { display: none !important; }
  .vsg-nav-cta     { display: none !important; }
  .vsg-nav-burger  { display: inline-flex !important; }

  /* Source-page hero mockup overlapping into the next section overflows
     on mobile — undo the negative margin */
  [style*="margin-bottom: -140px"] { margin-bottom: 0 !important; }
  [style*="margin-bottom: -120px"] { margin-bottom: 0 !important; }

  /* Source page mockup max-width should be 100% on mobile */
  [style*="maxWidth: 1100"] { max-width: 100% !important; }
  [style*="maxWidth: 980"]  { max-width: 100% !important; }
  [style*="maxWidth: 920"]  { max-width: 100% !important; }
  [style*="maxWidth: 880"]  { max-width: 100% !important; }
  [style*="maxWidth: 800"]  { max-width: 100% !important; }
  [style*="maxWidth: 760"]  { max-width: 100% !important; }
  [style*="maxWidth: 720"]  { max-width: 100% !important; }

  /* Reduce card padding */
  [style*="padding: 56px 64px"] { padding: 32px 24px !important; }
  [style*="padding: 48px 56px"] { padding: 28px 22px !important; }
  [style*="padding: 36px"]      { padding: 24px !important; }
  [style*="padding: 32px"]      { padding: 20px !important; }

  /* Mockups that have fixed pixel widths/heights */
  [style*="height: 460"], [style*="height: 540"] { height: auto !important; min-height: 320px; }
}

/* ── SMALL PHONE (≤ 480px) ─────────────────────────────────────────── */
@media (max-width: 480px) {
  /* Tighten body text */
  body { font-size: 15px; }

  /* Tighten massive hero h1 even further */
  h1[style*="font-size"] {
    font-size: clamp(32px, 9vw, 40px) !important;
    letter-spacing: -0.025em !important;
  }
  h2[style*="font-size"] {
    font-size: clamp(26px, 7.5vw, 34px) !important;
  }

  /* Even smaller section padding */
  section { padding-left: 16px !important; padding-right: 16px !important; }
  section[style*="padding-top"] { padding-top: 48px !important; }
  section[style*="padding-bottom"] { padding-bottom: 48px !important; }

  /* Hide breadcrumb on very small screens */
  [style*="textTransform: uppercase"][style*="letter-spacing: 0.22em"]:has(a[href*=".html"]) { display: none !important; }
}

/* ── PREVENT HORIZONTAL OVERFLOW ───────────────────────────────────── */
html, body { overflow-x: hidden; }
img, svg, video { max-width: 100%; height: auto; }