/* ============================================================
   SHARED THEME · 2B design system (blog + legal pages)
   ------------------------------------------------------------
   Loaded AFTER styles.css. The legacy blog/post/legal rules
   consume token variables (--serif/--sans/--mono, --paper*,
   --accent*, --line, --radius); this file remaps those tokens
   to the homepage system, then overrides the few voices the
   tokens can't reach (uppercase serif titles, hovers, chrome).
   Palette: ink #14171F · medical blue #246085 · navy #10172A ·
   warm gray #F4F4F2 · periwinkle #E9EEFB. Teal only on .nav-book.
   (index.html and team.html carry the same system inline.)
   ============================================================ */

/* ---- 1 · tokens ---- */
:root{
  --serif:'Newsreader',Georgia,'Times New Roman',serif;
  --sans:'Instrument Sans','Inter',system-ui,sans-serif;
  --mono:'Instrument Sans','Inter',system-ui,sans-serif; /* dates/kickers: tracked sans */
  --paper:#fff;
  --paper-2:#F4F4F2;
  --paper-3:#E7E8E4;
  --card:#fff;
  --ink:#14171F;
  --ink-soft:#4A5160;
  --muted:#7C8595;
  --faint:#AEB5C0;
  --line:rgba(16,23,42,.08);
  --line-2:rgba(16,23,42,.14);
  --radius:14px;
  --radius-lg:26px;
}
/* accent remap: same var names the legacy blog/post rules consume; this
   beats the steel remap in styles.css because this sheet loads later */
.blog-page,.post-page,.legal{
  --accent:       #3E7396; /* markers, dates, flow arrows */
  --accent-700:   #246085; /* check marks, bar gradients */
  --accent-deep:  #246085; /* links, kickers, CTAs */
  --accent-bright:#8FB8D8;
  --accent-mid:   #CCD9E5; /* soft borders */
  --accent-soft:  #E9EEFB; /* chip + panel fills: periwinkle */
}

/* ---- 2 · chrome: wordmark, nav, footer ---- */
.wm-text{font-family:"Geist",system-ui,sans-serif;font-weight:400} /* wordmark stays exactly as on glace.sh */
.nav-link:hover{color:#246085}
.nav-dot{background:#246085}
.nav-login:hover{color:#246085;border-color:#c6d4e2}
.nav-book:hover{transform:none}
.nav-link--active{color:#14171F}
.footer{border-top:1px solid rgba(233,238,251,.1);padding-block:clamp(56px,7vw,84px) 32px}
.footer-inner{padding-bottom:clamp(36px,4.5vw,56px)}
.footer-brand p{
  font-family:var(--serif);font-weight:500;font-optical-sizing:auto;
  font-size:1.12rem;letter-spacing:-.008em;line-height:1.5;color:var(--on-deep);
  margin-top:16px;max-width:32ch;
}
.footer-cols{gap:clamp(40px,5vw,80px)}
.fcol{gap:12px}
.fcol-h{font-size:.7rem;font-weight:600;letter-spacing:.12em;margin-bottom:8px;color:rgba(233,238,251,.55)}
.fcol a{font-size:.92rem}
.fcol a[aria-current="page"]{color:var(--on-deep-soft);font-weight:400} /* no bold current-page highlight: all footer links uniform */
.fcol a:hover{color:#E9EEFB}
.footer-base{font-size:.8rem;color:rgba(233,238,251,.55)}

/* ---- 3 · display voice: sentence-case Newsreader 500 two-tone ---- */
.blog-h1,.blog-featured-title,.blog-card-title,.post-title,.blog-cta-h,.post-cta-h,.post-body h2{
  font-weight:500;font-optical-sizing:auto;text-transform:none;letter-spacing:-.012em;
}
.blog-h1{font-size:clamp(1.9rem,3.8vw,3rem);line-height:1.1}
.blog-featured-title{font-size:clamp(1.4rem,2.4vw,2rem);line-height:1.15}
.blog-card-title{font-size:clamp(1.15rem,1.4vw,1.35rem);line-height:1.25}
.post-title{font-size:clamp(1.9rem,4vw,2.9rem);line-height:1.12}
.blog-h1 .t-mut,.blog-featured-title .t-mut,.blog-card-title .t-mut,.post-title .t-mut{color:#14171F}
.blog-h1 .t-ink,.blog-featured-title .t-ink,.blog-card-title .t-ink,.post-title .t-ink{color:#246085}
.blog-featured-link:hover .blog-featured-title .t-ink,
.blog-card-link:hover .blog-card-title .t-ink{color:#10172A}

/* ---- 4 · flat, calm surfaces (no lift-on-hover) ---- */
.blog-featured:hover,.blog-card:hover{transform:none;border-color:var(--accent-mid)}
.blog-featured,.blog-card{box-shadow:0 24px 60px -36px rgba(16,23,42,.35)}
.blog-featured:hover,.blog-card:hover{box-shadow:0 24px 60px -36px rgba(16,23,42,.35)}
.post-banner{box-shadow:0 24px 60px -36px rgba(16,23,42,.35)}
.blog-featured-rule{border-top-color:var(--line-2)}

/* ---- 5 · buttons: primary matches the site's teal Book-a-call pills ---- */
.btn:hover{transform:none}
.btn-primary{background:oklch(0.50 0.115 222);box-shadow:none}
.btn-primary:hover{background:oklch(0.43 0.115 222);box-shadow:none}

/* ---- 6 · post tail: read-next, about, refs, share, faq ---- */
.post-related-title{
  font-weight:500;font-optical-sizing:auto;text-transform:none;
  font-size:1.08rem;line-height:1.3;letter-spacing:-.01em;
}
.post-related-title .t-mut{color:#14171F}
.post-related-title .t-ink{color:#246085}
.post-related-card:hover .post-related-title .t-ink{color:#10172A}
.post-related h2,.post-about h2,.post-refs h2{font-weight:500;letter-spacing:-.012em;font-optical-sizing:auto}
.post-related-card:hover,.post-share-btn:hover{transform:none}
.post-share-btn:hover{border-color:#CCD9E5;color:#246085}
.post-back:hover{color:#10172A} /* deepen on hover like every other link, never lighten */
/* faq blocks match the homepage FAQ voice: serif questions, navy plus circles */
.post-faq .faq-item summary{
  font-family:var(--serif);font-weight:500;font-optical-sizing:auto;
  font-size:clamp(1.05rem,1.4vw,1.25rem);letter-spacing:-.008em;color:#14171F;
}
.post-faq .faq-item summary:hover{color:#246085}
.post-faq .faq-icon{width:30px;height:30px;border:none;background:#10172A}
.post-faq .faq-item summary:hover .faq-icon{background:#246085}
.post-faq .faq-icon::before,.post-faq .faq-icon::after{width:11px;height:1.6px;background:#fff}

/* ---- 7 · legal pages: sober single-tone version of the display voice ---- */
.legal-title{font-weight:500;font-optical-sizing:auto;text-transform:none;letter-spacing:-.012em;line-height:1.1}
.legal h2{font-weight:500;letter-spacing:-.012em;font-optical-sizing:auto}
.legal a:hover{color:#10172A} /* deepen, never lighten */

/* ---- 8 · mobile parity with the homepage header scale ---- */
@media (max-width:920px){
  .nav-link:hover{background:#E9EEFB}
}
@media (max-width:820px){
  .blog-h1,.post-title,.legal-title{font-size:clamp(1.4rem,6.2vw,3rem)}
}