/* Shared type scale, eyebrow spacing, card/image border and outcome-card type.
   One source of truth for every page: load LAST (after each page's inline <style> and site-theme.css).
   H1 / H2 / H3 values are the home page's: hero "Thoughtful design.", "My latest projects", project-card titles. */

:root {
  /* Card + image stroke (home's .w-case / .w-quote hairline) */
  --border-card: rgba(21, 17, 13, .06);
  --shot-border: 1px solid var(--border-card);

  /* H1 — home hero */
  --h1-size: clamp(40px, 8vw, 64px);   /* 64px from 800px wide up */
  /* H2 — home section titles */
  --h2-size: 44px;
  /* H3 — home project-card titles */
  --h3-size: 28px;
}
@media (max-width: 720px) {
  :root { --h2-size: 32px; --h3-size: 24px; }
}

/* ── Headings ── */
.hero h1, .w-hero h1, main h1 {
  font-family: 'Syne', sans-serif; font-weight: 500; font-size: var(--h1-size);
  line-height: 1.06; letter-spacing: -.026em; text-wrap: balance;
}
.w-h2, .cs-h2, .section-head h2, .outside h2 {
  font-family: 'Syne', sans-serif; font-weight: 500; font-size: var(--h2-size);
  line-height: 1.15; letter-spacing: -.01em;
}
.project h3, .w-case h3, .other-card h3, .cs-h3 {
  font-family: 'Syne', sans-serif; font-weight: 700; font-size: var(--h3-size);
  line-height: 1.14; letter-spacing: 0;
}

/* ── Eyebrow → title: no gap (eyebrow is a block so the margin can't collapse into the line box) ── */
.w-eyebrow, .cs .eyebrow:not(.eyebrow--plain), .hero .eyebrow, .section-head .eyebrow {
  display: block; width: fit-content;
  font-family: 'Outfit', sans-serif; font-size: 14px; font-weight: 600; letter-spacing: .02em; line-height: 1.6;
  text-transform: none; color: var(--orange-text);
  margin-bottom: 0;
}
.w-eyebrow::before, .cs .eyebrow::before, .hero .eyebrow::before, .section-head .eyebrow::before { display: none; }
/* "Outcome at a glance" sits above a card row, not a title: its spacing comes from the head wrapper */
.cs .hero-outcome .eyebrow { margin-bottom: 0; }
.w-section-head > div, .w-section-head__text { gap: 0; }

/* ── Cards + images: one border colour everywhere ── */
.w-case, .w-quote, .w-footer, .project, .card, .research-img, .goal-callout, .kw-search,
.cs-sidenav, .usercard, .impact-card, .call-card, .shot, .award-card, .reco, .tile {
  border-color: var(--border-card);
}
.research-img, .award-card, .reco, .tile { border: var(--shot-border); }

/* ── Outcome ("impact") cards: title (number + descriptor) 24 · body 16; card colours stay as each page defines them ── */
.impact-card { gap: 12px; border-radius: 16px; }
.impact-card .big {
  font-family: 'Outfit', sans-serif; font-weight: 600; font-size: 24px; line-height: 1.4; letter-spacing: 0;
}
/* number + descriptor read as one running title, not two stacked lines */
.impact-card .big b { display: inline; font: inherit; letter-spacing: inherit; margin: 0; }
.impact-card .big b::after { content: " "; }
.impact-card p { font-size: 16px; line-height: 1.6; }
@media (max-width: 720px) {
  .impact-card .big, article.impact-card .big { font-size: 24px; }
  .impact-card p { font-size: 16px; }
}

/* ── Case-study side rail: only when it fits ──
   The rail floats 40px from the screen edge, so it needs the gutter beside the 1280px content box
   (rail right edge 228px + 16px air ⇒ content must start at 244px ⇒ viewport ≥ ~1700px).
   It also needs enough height to show the full list under the sticky nav. */
@media (max-width: 1699px), (max-height: 620px) {
  .cs-sidenav { display: none; }
}