/* ============================================================================
   W4M · Research Notes — standardized blog design system
   Editorial-technical: authoritative serif body, sans labels, restrained palette.
   One stylesheet for every post. Self-host the two fonts for production.
   ============================================================================ */

@import url('https://fonts.googleapis.com/css2?family=Source+Serif+4:opsz,wght@8..60,400;8..60,600;8..60,700&family=Inter:wght@400;500;600;700&display=swap');

:root {
  /* W4M brand palette — warm paper, teal-blue accent (#11739B) */
  --bg:        #f5f2ea;   /* warm paper */
  --ink:       #1b1814;   /* warm near-black */
  --muted:     #6e685d;
  --faint:     #9a9382;
  --rule:      #e7e2d6;
  --navy:      #11739b;   /* PRIMARY ACCENT — teal-blue (var name kept for compatibility) */
  --navy-deep: #0e5e7e;   /* deep accent — headings / CTA background / small text */
  --emerald:   #0f8a5f;   /* positive / "what we win" */
  --amber:     #8a5d00;   /* honest-note text */
  --amber-bg:  #faf3e0;
  --amber-br:  #ecd9a6;
  --code-bg:   #efece2;

  --serif: "Source Serif 4", "Iowan Old Style", Charter, Georgia, serif;
  --sans:  "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  --mono:  "SFMono-Regular", "JetBrains Mono", Menlo, Consolas, monospace;

  --measure: 44rem;       /* body line length */
  --wide:    60rem;       /* hero, tables, demo */
}

* { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; }

body {
  margin: 0;
  background: var(--bg);
  color: var(--ink);
  font-family: var(--serif);
  font-size: 1.19rem;
  line-height: 1.7;
  font-feature-settings: "kern", "liga";
  -webkit-font-smoothing: antialiased;
}

/* ---- top bar ---- */
.topbar {
  max-width: var(--wide);
  margin: 0 auto;
  padding: 1.6rem 1.5rem 0;
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  font-family: var(--sans);
}
.topbar .brand {
  font-weight: 700; font-size: .82rem; letter-spacing: .14em;
  text-transform: uppercase; color: var(--navy-deep); text-decoration: none;
}
.topbar .back { font-size: .82rem; color: var(--muted); text-decoration: none; }
.topbar .back:hover { color: var(--navy); }
/* top nav — home + prev/next, mirrors the bottom seriesnav */
.topbar .topnav { display: flex; gap: 1.1rem; align-items: baseline; }
.topbar .topnav a { font-size: .82rem; color: var(--muted); text-decoration: none; white-space: nowrap; }
.topbar .topnav a:hover { color: var(--navy); }
.topbar .topnav .tn-prev::before { content: "← "; color: var(--faint); }
.topbar .topnav .tn-next::after  { content: " →"; color: var(--faint); }
.topbar .topnav .tn-home { color: var(--navy-deep); font-weight: 600; }
@media (max-width: 40rem){
  .topbar { flex-wrap: wrap; gap: .5rem .9rem; }
  .topbar .topnav { gap: .9rem; font-size: .78rem; }
  .topbar .topnav .tn-label { display: none; }  /* show arrows/home only on small screens */
}

/* figure headline for static charts */
.figbar-head {
  font-family: var(--sans); font-weight: 700; font-size: .95rem;
  color: var(--navy-deep); margin: 0 0 .7rem; letter-spacing: .01em;
}

/* ---- layout ---- */
.wrap { max-width: var(--wide); margin: 0 auto; padding: 0 1.5rem; }
article { max-width: var(--measure); margin: 0 auto; padding: 0 1.5rem 5rem; }
article > .full { max-width: var(--wide); margin-left: calc((var(--measure) - var(--wide)) / 2); }
@media (max-width: 64rem){ article > .full { max-width: 100%; margin-left: 0; } }

/* ---- hero ---- */
.hero { max-width: var(--wide); margin: 2.4rem auto .5rem; padding: 0 1.5rem; }
.kicker {
  font-family: var(--sans); font-size: .78rem; font-weight: 600;
  letter-spacing: .12em; text-transform: uppercase; color: var(--navy);
  margin: 0 0 1rem;
}
.kicker .seq { color: var(--faint); }
h1.title {
  font-family: var(--serif); font-weight: 700; font-size: clamp(2.1rem, 5vw, 3.3rem);
  line-height: 1.08; letter-spacing: -0.012em; margin: 0 0 1rem; max-width: 22ch;
}
.lede {
  font-size: 1.32rem; line-height: 1.55; color: var(--muted); font-weight: 400;
  max-width: 40rem; margin: 0 0 1.4rem;
}
.byline {
  font-family: var(--sans); font-size: .85rem; color: var(--faint);
  border-top: 1px solid var(--rule); padding-top: 1rem;
}
.byline b { color: var(--muted); font-weight: 600; }

/* ---- stat band (the result-forward hook) ---- */
.stats {
  max-width: var(--wide); margin: 2rem auto 2.4rem; padding: 1.6rem 1.5rem;
  display: grid; grid-template-columns: repeat(3, 1fr); gap: 1.5rem;
  border-top: 1px solid var(--rule); border-bottom: 1px solid var(--rule);
}
@media (max-width: 40rem){ .stats { grid-template-columns: 1fr; gap: 1.1rem; } }
.stat .num {
  font-family: var(--sans); font-weight: 700; font-size: 2.1rem; line-height: 1;
  letter-spacing: -0.02em; color: var(--navy-deep); font-variant-numeric: tabular-nums;
}
.stat .num .pos { color: var(--emerald); }
.stat .lbl {
  font-family: var(--sans); font-size: .82rem; color: var(--muted);
  margin-top: .5rem; line-height: 1.35;
}

/* ---- body typography ---- */
article p { margin: 0 0 1.25rem; }
article h2 {
  font-family: var(--serif); font-weight: 700; font-size: 1.7rem; line-height: 1.2;
  letter-spacing: -0.01em; margin: 2.8rem 0 1rem;
}
article h3 {
  font-family: var(--sans); font-weight: 600; font-size: 1.06rem; letter-spacing: .005em;
  margin: 1.8rem 0 .6rem; color: var(--navy-deep);
}
article a { color: var(--navy); text-decoration: none; border-bottom: 1px solid var(--amber-br); }
article a:hover { border-bottom-color: var(--navy); }
article strong { font-weight: 700; }
article em { font-style: italic; }
ul, ol { padding-left: 1.3rem; margin: 0 0 1.25rem; }
li { margin: .35rem 0; }
hr { border: 0; border-top: 1px solid var(--rule); margin: 2.4rem 0; }

/* ---- pull quote ---- */
.pull {
  font-family: var(--serif); font-size: 1.5rem; line-height: 1.4; font-weight: 600;
  color: var(--navy-deep); margin: 2rem 0; padding-left: 1.3rem;
  border-left: 3px solid var(--navy);
}

/* ---- audience-layer callouts: exec (green) + technical (blue) ---- */
.exec {
  background: #e9f5ef; border: 1px solid #bfe0cf; border-radius: 10px;
  padding: 1.1rem 1.3rem; margin: 1.8rem 0; font-size: 1.02rem; line-height: 1.55;
}
.exec .tag {
  font-family: var(--sans); font-size: .72rem; font-weight: 700; letter-spacing: .1em;
  text-transform: uppercase; color: var(--emerald); display: block; margin-bottom: .35rem;
}
.tech {
  background: #e8f1f7; border: 1px solid #c5dbe8; border-radius: 10px;
  padding: 1.1rem 1.3rem; margin: 1.8rem 0; font-size: .95rem; line-height: 1.55;
  font-family: var(--sans);
}
.tech .tag {
  font-size: .72rem; font-weight: 700; letter-spacing: .1em;
  text-transform: uppercase; color: var(--navy-deep); display: block; margin-bottom: .35rem;
}

/* ---- honest-note callout (the credibility device) ---- */
.note {
  background: var(--amber-bg); border: 1px solid var(--amber-br); border-radius: 10px;
  padding: 1.1rem 1.3rem; margin: 1.8rem 0; font-size: 1.02rem; line-height: 1.55;
}
.note .tag {
  font-family: var(--sans); font-size: .72rem; font-weight: 700; letter-spacing: .1em;
  text-transform: uppercase; color: var(--amber); display: block; margin-bottom: .35rem;
}

/* ---- comparison table ---- */
.tablewrap { overflow-x: auto; margin: 1.6rem 0; }
table.cmp {
  width: 100%; border-collapse: collapse; font-family: var(--sans); font-size: .95rem;
}
table.cmp th, table.cmp td { text-align: left; padding: .7rem .9rem; border-bottom: 1px solid var(--rule); }
table.cmp thead th {
  font-size: .76rem; letter-spacing: .06em; text-transform: uppercase; color: var(--muted);
  border-bottom: 1.5px solid var(--ink);
}
table.cmp tbody tr:last-child td { border-bottom: 1.5px solid var(--ink); }
table.cmp .win { color: var(--emerald); font-weight: 700; }
table.cmp .row-h { font-family: var(--serif); font-weight: 600; }

/* ---- demo card ("Watch it") ---- */
.demo {
  display: block; margin: 2rem 0; padding: 1.4rem 1.5rem; text-decoration: none;
  border: 1px solid var(--rule); border-radius: 12px; background: #fff;
  transition: border-color .15s, transform .15s;
}
.demo:hover { border-color: var(--navy); transform: translateY(-1px); }
.demo .eyebrow {
  font-family: var(--sans); font-size: .74rem; font-weight: 700; letter-spacing: .12em;
  text-transform: uppercase; color: var(--navy);
}
.demo .dt { font-family: var(--serif); font-size: 1.25rem; font-weight: 700; color: var(--ink); margin: .35rem 0 .2rem; }
.demo .dd { font-family: var(--sans); font-size: .92rem; color: var(--muted); }
.demo .go { font-family: var(--sans); font-size: .9rem; font-weight: 600; color: var(--navy); margin-top: .6rem; display: inline-block; }
.demo .badge {
  font-family: var(--sans); font-size: .68rem; font-weight: 600; letter-spacing: .06em;
  text-transform: uppercase; color: var(--muted); background: var(--code-bg);
  border-radius: 999px; padding: .15rem .6rem; float: right;
}

/* ---- figures / footnotes ---- */
figure { margin: 2rem 0; }
figure img { width: 100%; border: 1px solid var(--rule); border-radius: 8px; }
figcaption { font-family: var(--sans); font-size: .85rem; color: var(--muted); margin-top: .6rem; }
.footnote { font-family: var(--sans); font-size: .85rem; color: var(--muted); line-height: 1.55; }

/* ---- series nav + CTA footer ---- */
.seriesnav {
  max-width: var(--wide); margin: 0 auto; padding: 2.4rem 1.5rem 1rem;
  border-top: 1px solid var(--rule); display: flex; gap: 1rem; flex-wrap: wrap;
  font-family: var(--sans); font-size: .9rem;
}
.seriesnav a { color: var(--navy); text-decoration: none; font-weight: 600; }
.seriesnav .prev::before { content: "← "; color: var(--faint); }
.seriesnav .next::after { content: " →"; color: var(--faint); }
.seriesnav .next { margin-left: auto; }
.cta {
  background: var(--navy-deep); color: #eaf1f8; max-width: var(--wide);
  margin: 1.5rem auto 3rem; padding: 2rem 2rem; border-radius: 14px;
  font-family: var(--sans);
}
.cta h3 { font-family: var(--serif); color: #fff; font-size: 1.4rem; margin: 0 0 .5rem; }
.cta p { color: #c3d2e2; margin: 0 0 1rem; font-size: 1rem; }
.cta a { color: #fff; font-weight: 600; text-decoration: none; border-bottom: 1px solid #5b7da3; }

/* ---- partner contact form ---- */
.contact {
  max-width: var(--measure); margin: 0 auto 3rem; padding: 1.6rem 1.7rem 1.4rem;
  background: #fff; border: 1px solid var(--rule); border-radius: 12px;
}
.contact .tag {
  font-family: var(--sans); font-size: .72rem; font-weight: 700; letter-spacing: .1em;
  text-transform: uppercase; color: var(--navy); display: block; margin-bottom: .35rem;
}
.contact h3 { font-family: var(--serif); font-size: 1.3rem; margin: 0 0 .4rem; }
.contact > p { font-family: var(--sans); font-size: .95rem; color: var(--muted); margin: 0 0 1.1rem; line-height: 1.55; }
.contact form { font-family: var(--sans); }
.contact .row { display: grid; grid-template-columns: repeat(auto-fit, minmax(13rem, 1fr)); gap: .8rem; margin-bottom: .8rem; }
.contact label { display: block; font-size: .8rem; font-weight: 600; color: var(--navy-deep); }
.contact input, .contact textarea {
  display: block; width: 100%; margin-top: .3rem; padding: .55rem .7rem;
  font: inherit; font-weight: 400; font-size: .95rem; color: var(--ink);
  background: var(--bg); border: 1px solid var(--rule); border-radius: 8px;
}
.contact input:focus, .contact textarea:focus { outline: none; border-color: var(--navy); }
.contact textarea { resize: vertical; }
.contact .hp { position: absolute; left: -9999px; width: 1px; height: 1px; opacity: 0; }
.contact .catlab { display: block; font-size: .8rem; font-weight: 600; color: var(--navy-deep); margin: .2rem 0 .35rem; }
.contact .cats { display: flex; flex-wrap: wrap; gap: .45rem; margin: 0 0 .9rem; }
.contact .cats label { display: inline-flex; align-items: center; gap: .4rem; font-size: .84rem; font-weight: 500; color: var(--ink); background: var(--bg); border: 1px solid var(--rule); border-radius: 999px; padding: .35rem .8rem; cursor: pointer; }
.contact .cats input { accent-color: var(--navy); margin: 0; }
.contact .cats label:has(input:checked) { border-color: var(--navy); background: #e3eef4; color: var(--navy-deep); }
.contact .foot { display: flex; align-items: center; gap: .8rem; margin-top: .9rem; flex-wrap: wrap; }
.contact button {
  font-family: var(--sans); font-size: .9rem; font-weight: 600; color: #fff;
  background: var(--navy); border: 1px solid var(--navy); border-radius: 999px;
  padding: .5rem 1.3rem; cursor: pointer; transition: background .15s;
}
.contact button:hover { background: var(--navy-deep); }
.contact button[disabled] { opacity: .5; cursor: default; }
.contact .status { font-size: .88rem; color: var(--muted); }
.contact .status a { color: var(--navy); font-weight: 600; }

.sitefoot {
  max-width: var(--wide); margin: 0 auto; padding: 2rem 1.5rem 3rem;
  border-top: 1px solid var(--rule); font-family: var(--sans); font-size: .8rem; color: var(--faint);
}