/* vitaliilavelin.com shared layer: tokens, fonts, nav, footer, testimonial cards.
   Loaded by every page (home, /career-strategy/, /first-quarter/, /testimonials/, /newsletter/).
   Pages keep their own layout CSS or Tailwind; this file owns only what is shared. */

:root {
  --vl-surface: #1c1c19;
  --vl-cream: #f7f5f0;
  --vl-paper: #ffffff;
  --vl-ink: #1c1c19;
  --vl-ink-2: #2a2925;
  --vl-muted: #9a9288;      /* decorative only on light backgrounds (2.9:1) */
  --vl-muted-text: #6b655c; /* 5.3:1 on cream, use for small text */
  --vl-line: rgba(28, 28, 25, 0.14);
  --vl-line-dark: rgba(247, 245, 240, 0.16);
  --vl-serif: "Playfair Display", Georgia, "Times New Roman", serif;
  --vl-sans: "Manrope", system-ui, -apple-system, "Segoe UI", sans-serif;
}

/* ---------- Line breaks ----------
   No line may end on a single word. Headlines, short lines and labels balance their lines;
   body copy avoids a 1-word last line. Browsers without support ignore these (progressive). */
h1, h2, h3, h4, blockquote, figcaption, summary, .lead, .eyebrow, .btn-note { text-wrap: balance; }
p, li, dd { text-wrap: pretty; }

/* ---------- Nav ---------- */
.sn {
  position: fixed; top: 0; left: 0; right: 0; z-index: 50;
  background: rgba(247, 245, 240, 0.86);
  -webkit-backdrop-filter: blur(14px) saturate(140%);
  backdrop-filter: blur(14px) saturate(140%);
  border-bottom: 1px solid var(--vl-line);
  font-family: var(--vl-sans);
}
.sn__bar {
  max-width: 1200px; margin: 0 auto; padding: 0 1.25rem;
  height: 64px; display: flex; align-items: center; justify-content: space-between; gap: 1rem;
}
.sn__brand {
  font-family: var(--vl-serif); font-style: italic; font-weight: 500; font-size: 1.25rem;
  color: var(--vl-ink); text-decoration: none; letter-spacing: -0.01em; white-space: nowrap;
}
.sn__links { display: none; align-items: center; gap: 1.75rem; }
.sn__links a {
  font-size: 0.9rem; font-weight: 500; color: var(--vl-muted-text); text-decoration: none;
  letter-spacing: -0.01em; transition: color .15s ease;
}
.sn__links a:hover, .sn__links a[aria-current="page"] { color: var(--vl-ink); }
.sn__cta {
  display: none; font-size: 0.9rem; font-weight: 600; text-decoration: none;
  background: var(--vl-surface); color: var(--vl-cream);
  padding: 0.6rem 1.15rem; border-radius: 999px; white-space: nowrap; transition: opacity .15s ease;
}
.sn__cta:hover { opacity: 0.86; }
.sn__toggle {
  display: inline-flex; align-items: center; justify-content: center;
  width: 40px; height: 40px; margin-right: -8px; background: none; border: 0; color: var(--vl-ink); cursor: pointer;
}
.sn__toggle svg { width: 22px; height: 22px; }
.sn__toggle .close { display: none; }
.sn[data-open="true"] .sn__toggle .open { display: none; }
.sn[data-open="true"] .sn__toggle .close { display: block; }
.sn__menu { display: none; border-top: 1px solid var(--vl-line); }
.sn[data-open="true"] .sn__menu { display: block; }
.sn__menu div { max-width: 1200px; margin: 0 auto; padding: 1rem 1.25rem 1.5rem; display: flex; flex-direction: column; gap: 0.25rem; }
.sn__menu a { font-size: 1rem; font-weight: 500; color: var(--vl-ink); text-decoration: none; padding: 0.6rem 0; }
/* Restate the cream text: `.sn__menu a` above outranks `.sn__cta` and would paint the label ink on ink. */
.sn__menu a.sn__cta { display: inline-flex; justify-content: center; margin-top: 0.75rem; padding: 0.8rem 1.25rem; color: var(--vl-cream); }
@media (min-width: 900px) {
  .sn__links, .sn__cta { display: inline-flex; }
  .sn__toggle, .sn__menu { display: none !important; }
}
.sn-offset { padding-top: 64px; }

/* ---------- Footer ---------- */
.sf {
  font-family: var(--vl-sans); background: var(--vl-cream); border-top: 1px solid var(--vl-line);
  padding: 4rem 1.25rem 2rem; color: var(--vl-ink-2);
}
.sf__grid { max-width: 1200px; margin: 0 auto 3rem; display: grid; grid-template-columns: 1fr; gap: 2.5rem; }
@media (min-width: 720px) { .sf__grid { grid-template-columns: 1.4fr 1fr 1fr; gap: 3rem; } }
.sf__brand { font-family: var(--vl-serif); font-style: italic; font-size: 1.25rem; color: var(--vl-ink); margin: 0 0 0.9rem; }
.sf p { margin: 0 0 0.5rem; font-size: 0.92rem; line-height: 1.6; }
.sf__label { font-size: 0.68rem; font-weight: 700; letter-spacing: 0.22em; text-transform: uppercase; color: var(--vl-muted-text); margin: 0 0 1rem; }
.sf ul { list-style: none; margin: 0; padding: 0; }
.sf li { margin: 0 0 0.6rem; font-size: 0.92rem; }
.sf a { color: var(--vl-ink); text-decoration: none; }
.sf a:hover { text-decoration: underline; text-underline-offset: 4px; }
.sf__bottom {
  max-width: 1200px; margin: 0 auto; padding-top: 1.5rem; border-top: 1px solid var(--vl-line);
  display: flex; flex-direction: column; gap: 0.6rem; font-size: 0.78rem; color: var(--vl-muted-text);
}
.sf__bottom a { color: var(--vl-muted-text); }
.sf__bottom nav { display: flex; gap: 1.25rem; }
@media (min-width: 640px) { .sf__bottom { flex-direction: row; align-items: center; justify-content: space-between; } }

/* ---------- Testimonials ---------- */
.tq-grid { display: grid; grid-template-columns: 1fr; gap: 1.5rem; }
@media (min-width: 720px) { .tq-grid--2 { grid-template-columns: 1fr 1fr; } }
.tq { border-top: 1px solid var(--vl-ink); padding-top: 1.1rem; font-family: var(--vl-sans); }
.tq blockquote { margin: 0 0 0.9rem; }
.tq blockquote p {
  margin: 0 0 0.6rem; font-family: var(--vl-serif); font-size: 1.12rem; line-height: 1.5; color: var(--vl-ink);
}
.tq__by { font-size: 0.9rem; color: var(--vl-muted-text); line-height: 1.5; }
.tq__by a { color: var(--vl-ink); text-decoration: none; border-bottom: 1px solid var(--vl-line); font-weight: 600; }
.tq__by a:hover { border-bottom-color: var(--vl-ink); }
.tq__by .li { display: inline-block; width: 0.85em; height: 0.85em; vertical-align: -0.1em; margin-left: 0.3em; }
.tq__by .anon { font-style: italic; }
.tq-more { display: inline-block; margin-top: 2rem; font-family: var(--vl-sans); font-weight: 600; color: var(--vl-ink); text-decoration: none; border-bottom: 1px solid var(--vl-ink); }