/* =====================================================================
   Worksmith Marine — brand layer (Logo guidelines v1.0, October 2026)
   Loaded last on every page. Owns the colour tokens, type stack, nav,
   footer and buttons so one edit here updates the whole site.
   Four colours: clay tile, navy, cream, white. Georgia Bold for display
   (the family the survey reports are set in), Inter for everything else.
   ===================================================================== */

:root {
  color-scheme: light;
  --navy: #0B1F3B;
  --navy-soft: #16305A;
  --cream: #F6F2EE;
  --cream-deep: #ECE6DD;
  --paper: #FFFFFF;
  --clay: #B8676F;
  --clay-deep: #9A545B;
  --blush: #F3E4E5;
  --rule: #E2DBD0;
  --rule-soft: #EFEAE1;
  --line: #E2DBD0;
  --line-soft: #EFEAE1;
  --ink: #18202B;
  --ink-soft: #4A5462;
  --ink-mute: #8A9099;
  --muted: #5E6B7A;
  --mute-2: #8B97A4;
  --serif: Georgia, 'Times New Roman', serif;
  --sans: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif;
  --mono: 'Inter', -apple-system, sans-serif;
  --r-tile: 22%;      /* the logo tile: corners of ~3.8x on a 17x square */
  --r-card: 16px;
  --r-btn: 12px;
}

/* ---------- display type ---------- */
.wm-display, h1, .section-title, .final h2, .strip h2, .hub-hero h1, h1.article-title,
.art-head h1, .dir-head h1, .ws-cta h3, .post h3, .post-card.feature h3, .demo-end-title,
.stat-num, .price-amount, .feature-stat .fs-num, .stats .s .v, .mk-rank, .dir-stats .d b, .pull {
  font-family: Georgia, 'Times New Roman', serif !important;
  font-weight: 700 !important;
  letter-spacing: -0.015em !important;
}
.prose h2, .art-body h2, .faq h2, .content h2, .fig-title, .mk-top h3 { font-family: Georgia, 'Times New Roman', serif !important; font-weight: 700 !important; letter-spacing: -0.01em !important; }
.section-label, .kicker, .problem-label, .eyebrow, .cat-label, .hub-section > h2, .related h2,
.post .tag, .post-card .pc-cat, .related-card .rc-cat, .ws-cta .eyebrow, .ws-card-cta .eyebrow,
.region-links .rl-t, .idea .meta, .surv .sfirmtag, footer.ws-foot .col-t, .glance-card h2 {
  font-family: 'Inter', -apple-system, sans-serif !important;
  text-transform: uppercase; letter-spacing: 0.12em;
}
.section-label, .kicker, .hub-section > h2, .related h2 { color: var(--clay) !important; font-size: 12.5px !important; font-weight: 700 !important; }
.eyebrow { font-family: 'Inter', sans-serif !important; letter-spacing: 0.08em !important; font-size: 12px !important; }

/* ---------- nav (homepage + blog markup) ---------- */
.nav { position: sticky; top: 0; z-index: 50; background: rgba(255,255,255,0.92);
  -webkit-backdrop-filter: saturate(140%) blur(8px); backdrop-filter: saturate(140%) blur(8px);
  border-bottom: 1px solid var(--rule); }
.nav-inner { max-width: 1140px; margin: 0 auto; padding: 14px 32px; display: flex; align-items: center; justify-content: space-between; }
.brand { display: flex; align-items: center; }
.brand img { height: 32px; width: auto; display: block; }
.nav-links { display: flex; align-items: center; }
.nav-link + .nav-link { margin-left: 28px; }
.nav-link { color: var(--navy) !important; font-weight: 600; font-size: 14px; white-space: nowrap; }
.nav-link:hover, .nav-link.active, .nav-link[aria-current="page"] { color: var(--clay) !important; }
.nav-cta { background: var(--navy); color: #fff !important; padding: 9px 20px; border-radius: 999px; font-weight: 600; font-size: 14px; }
.nav-cta:hover { background: var(--clay); color: #fff !important; }
@media (max-width: 680px) {
  .nav-inner { flex-wrap: wrap; row-gap: 11px; }
  .brand { order: 1; } .nav-cta { order: 2; margin-left: auto; }
  .nav-links { order: 3; width: 100%; justify-content: center; border-top: 1px solid var(--rule); padding-top: 11px; }
}
@media (max-width: 520px) { .nav-inner { padding: 12px 20px; } }

/* ---------- nav (ws.js markup) ---------- */
header.ws-nav { background: rgba(255,255,255,0.92); border-bottom: 1px solid var(--rule); }
header.ws-nav .wrap { height: 62px; }
.ws-brand img { height: 32px; width: auto; }
.ws-nav nav a { color: var(--navy); }
.ws-nav nav a[aria-current="page"] { color: var(--clay); }
.ws-nav nav a.is-cta { background: var(--navy); color: #fff; border-radius: 999px; }
.ws-nav nav a.is-cta:hover { background: var(--clay); color: #fff; }
@media (max-width: 760px) { .ws-nav nav { top: 62px; } }

/* ---------- buttons ---------- */
.btn-primary, .btn.btn-primary { border-radius: var(--r-btn); font-family: var(--sans); }
.btn { border-radius: var(--r-btn); }
.ws-strip { background: var(--clay); }

/* ---------- footer (shared markup, rendered by ws.js or inline) ---------- */
footer.wm-foot { background: var(--navy); border-top: 1px solid rgba(255,255,255,0.10); color: rgba(246,242,238,0.72); margin-top: 0; padding: 56px 32px 32px; font-size: 14.5px; }
footer.wm-foot a { color: rgba(246,242,238,0.78); font-weight: 500; }
footer.wm-foot a:hover { color: #fff; }
.wm-foot-inner { max-width: 1140px; margin: 0 auto; display: grid; grid-template-columns: 1.7fr 1fr 1fr 1fr; gap: 40px; }
.wm-foot-brand img { height: 40px; width: auto; display: block; margin-bottom: 18px; }
.wm-foot-brand p { margin: 0; max-width: 36ch; line-height: 1.6; color: rgba(246,242,238,0.72); }
.wm-foot-col h4 { font-family: var(--sans); color: #fff; font-weight: 700; font-size: 12px; letter-spacing: 0.12em; text-transform: uppercase; margin: 6px 0 14px; }
.wm-foot-col a { display: block; margin: 0 0 10px; line-height: 1.4; }
.wm-foot-bottom { max-width: 1140px; margin: 44px auto 0; padding-top: 22px; border-top: 1px solid rgba(255,255,255,0.12);
  display: flex; justify-content: space-between; gap: 12px 24px; flex-wrap: wrap; font-size: 13px; color: rgba(246,242,238,0.55); }
.wm-foot-bottom a { color: rgba(246,242,238,0.7); }
.wm-foot-bottom .heart { color: var(--clay); }
@media (max-width: 860px) { .wm-foot-inner { grid-template-columns: 1fr 1fr; gap: 32px; } .wm-foot-brand { grid-column: 1 / -1; } }
@media (max-width: 520px) { footer.wm-foot { padding: 44px 22px 28px; } .wm-foot-inner { grid-template-columns: 1fr; gap: 26px; } }

/* ---------- navy CTA band keeps the on-navy logo language ---------- */
.final { background: var(--navy); }
.final .btn-primary { background: var(--clay); }
.final .btn-primary:hover { background: #fff; color: var(--navy) !important; }

/* ---------- force light in dark-mode webviews (brand colours hardcoded) ---------- */
@media (prefers-color-scheme: dark) {
  html, body, .page { background: #FFFFFF !important; color: #18202B !important; }
  h1, h2, h3, .nav-link, .brand, .section-title, .stat-num, .price-amount { color: #0B1F3B !important; }
  .section-label, .kicker, .brand span, .footer-love .heart, .final-meta .check { color: #B8676F !important; }
  .nav, header.ws-nav { background: rgba(255,255,255,0.95) !important; }
  .final, footer.wm-foot, footer.ws-foot { background: #0B1F3B !important; }
  .final h2, footer.wm-foot h4 { color: #ffffff !important; }
  .final p { color: rgba(246,242,238,0.82) !important; }
  footer.wm-foot, footer.wm-foot a, footer.wm-foot p { color: rgba(246,242,238,0.75) !important; }
  .nav-cta, .btn-primary, .ws-nav nav a.is-cta { color: #ffffff !important; }
  .strip, .why, .glance-card, .prose .note, .post-card.feature, .page-head, .toc { background: #F6F2EE !important; }
  .step, .why-card, .price, .stat, .post-card, .related-card, .faq details, .feature-stat, .card, .surv, .state-tile, .post { background: #FFFFFF !important; }
}

.eyebrow .dot { flex: none; }
.eyebrow { text-align: left; }