/* Portfolio design system, copied in from the Settle site (24 Oct 2026, owner-approved redesign).
   Only the parts this site uses: the heading face, the homepage hero and the site nav.
   No Tailwind here; static/css/cgt.css adds this site's pages built on it. */

/* Borrow ONLY the letter "f" from Source Serif 4 (portfolio design system): Fraunces' f curls over
   the next letter. unicode-range limits this face to U+0066, so every other letter stays Fraunces. */
@font-face {
  font-family: 'BenSerifF';
  src: url('/static/fonts/sourceserif4-latin.woff2') format('woff2');
  font-weight: 300 700; font-style: normal; font-display: swap;
  unicode-range: U+0066;
}

/* ── One heading family site-wide (owner, 21 Oct 2026) ──────────────────────
   Every h1 and h2 (and .font-display / card titles) is Fraunces; body text stays DM Sans.
   'opsz' 24 pins the optical size; 'WONK' 0 / 'SOFT' 0 give the upright classic forms.
   (Newsreader was tried and reverted at the owner's request.) :where() keeps specificity
   at zero so page classes still set size and weight. */
:where(h1, h2:not(.uppercase):not(.text-xs):not(.text-sm)), .font-display, .sp-title {
  font-family: 'BenSerifF', 'Fraunces', Georgia, serif;
  font-variation-settings: 'opsz' 24, 'WONK' 0, 'SOFT' 0;
  /* No fi/ff/fl ligatures: the joined "fi" in "first" looked wrong to the owner. */
  font-variant-ligatures: no-common-ligatures no-discretionary-ligatures;
  font-feature-settings: 'liga' 0, 'clig' 0, 'dlig' 0;
}

/* Fraunces/DM Sans set wider than the system fallback: balance headings. */
h1, h2, h3 { text-wrap: balance; }
p { text-wrap: pretty; }

/* ── Homepage hero (owner refinement, 21 Oct 2026) ─────────────────────────
   Natural height (no forced 100vh). Fraunces headline, regular weight. */

.hh { padding-top: 44px; padding-bottom: 40px; }
.hh__inner { max-width: 56rem; margin: 0 auto; }
.hh__badge {
  display: inline-flex; align-items: center; gap: 8px; height: 36px; padding: 0 16px;
  border-radius: 999px; background: #E8F5F5; color: #1B6B6B;
  font-size: .90625rem; font-weight: 500; line-height: 1; letter-spacing: .005em;
}
.hh__dot { width: 7px; height: 7px; border-radius: 50%; background: #1B6B6B; flex-shrink: 0; }
.hh__title {
  margin: 24px auto 0; max-width: 16ch; color: #1A1A18;
  font-weight: 400;
  font-size: clamp(2.625rem, 1rem + 4.8vw, 5rem); line-height: 1.05; letter-spacing: -0.025em;
}
.hh__lede {
  margin: 24px auto 0; max-width: 730px; color: #6B6860;
  font-size: clamp(1.0625rem, .9rem + .6vw, 1.375rem); font-weight: 400; line-height: 1.48;
  text-wrap: balance;
}
.hh__ctas { margin-top: 30px; display: flex; flex-direction: column; align-items: stretch; gap: 14px; max-width: 440px; margin-left: auto; margin-right: auto; }
.hh__btn {
  display: inline-flex; align-items: center; justify-content: center; min-height: 58px; padding: 0 28px;
  border-radius: 13px; border: 1px solid transparent; font-size: 1.0625rem; line-height: 1.2; text-align: center;
  text-decoration: none; transition: background-color .15s ease, border-color .15s ease, color .15s ease, box-shadow .15s ease;
}
.hh__btn:focus { outline: none; }
.hh__btn:focus-visible { outline: 3px solid rgba(27,107,107,.38); outline-offset: 3px; }
.hh__btn--primary { background: #1B6B6B; border-color: #1B6B6B; color: #fff; font-weight: 600; box-shadow: 0 1px 2px rgba(14,74,71,.18); }
.hh__btn--primary:hover { background: #155A5A; border-color: #155A5A; box-shadow: 0 2px 6px -1px rgba(14,74,71,.28); }
.hh__btn--secondary { background: #fff; border-color: #D9D5CC; color: #3F3D38; font-weight: 500; }
.hh__btn--secondary:hover { border-color: #B9B4A9; background: #FCFBF9; color: #1A1A18; }
.hh__reassure { margin: 18px 0 0; font-size: .8125rem; line-height: 1.4; color: #75716A; }
@media (min-width: 640px) {
  .hh__ctas { flex-direction: row; justify-content: center; align-items: stretch; max-width: none; gap: 15px; }
}
@media (min-width: 768px) {
  .hh { padding-top: 64px; padding-bottom: 48px; }
  .hh__title { margin-top: 26px; line-height: 1.05; }
  .hh__lede { margin-top: 26px; }
  .hh__ctas { margin-top: 32px; }
  .hh__btn { min-height: 60px; padding: 0 32px; font-size: 1.125rem; }
  .hh__reassure { font-size: .875rem; }
}
@media (prefers-reduced-motion: reduce) { .hh__btn { transition: none; } }
/* Phones (owner, 21 Oct 2026): the hero fills the first screen on its own, so the next section
   below starts under the fold instead of peeking in. 64px = .site-nav__bar. Desktop unchanged. */
@media (max-width: 767px) { .hh { min-height: calc(100vh - 64px); min-height: calc(100svh - 64px); } }

/* ── Site nav (owner refinement, 21 Oct 2026) ── 64px on phones, 72px from 768px */
.site-nav__bar { height: 64px; }
.site-nav__links { gap: 18px; }
.site-nav__link { font-size: .9375rem; font-weight: 500; line-height: 1.2; padding: 6px 0; border-radius: 6px; }
.site-nav__cta {
  display: inline-flex; align-items: center; min-height: 46px; padding: 0 20px; border-radius: 12px;
  font-size: .9375rem; font-weight: 600; line-height: 1; box-shadow: 0 1px 2px rgba(14,74,71,.18);
}
.site-nav__link:focus-visible, .site-nav__cta:focus-visible { outline: 3px solid rgba(27,107,107,.38); outline-offset: 3px; }
@media (min-width: 768px) { .site-nav__bar { height: 72px; } }
@media (min-width: 1024px) and (max-width: 1279px) { .site-nav__cta { padding: 0 16px; } }
@media (min-width: 1280px) { .site-nav__links { gap: 28px; } }