/* Styles for published article pages (/articles/<slug>.html).

   The publish Lambda (infra/lambda/article-template.mjs) links this file
   rather than inlining a <style> block, so a change here reaches every
   published article on the next deploy without republishing any of them.
   Taken from the hand-written article page it replaced; the block at the
   end covers what Markdown produces (headings, lists, images, code, tables). */

:root {
  --ink: #12161c;
  --body: #4a525e;
  --mute: #7b8593;
  --paper: #fbf9f6;
  --card: #ffffff;
  --line: #e4e0d9;
  --accent: #c2410c;
  --accent-soft: #fdf2ec;
  --deep: #16202b;
  --sans: -apple-system, BlinkMacSystemFont, "Segoe UI", Inter, Roboto, sans-serif;
  --serif: "Iowan Old Style", Georgia, "Times New Roman", serif;
}

* { box-sizing: border-box; }

body {
  margin: 0;
  background: var(--paper);
  color: var(--body);
  font-family: var(--sans);
  font-size: 16px;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
}

.wrap { max-width: 1008px; margin: 0 auto; padding: 0 24px; }

header.masthead {
  border-bottom: 1px solid var(--line);
  background: var(--card);
}

.masthead .wrap {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding-top: 18px;
  padding-bottom: 18px;
}

.brand { display: flex; align-items: center; gap: 10px; text-decoration: none; }
.brand span { font-weight: 600; color: var(--ink); letter-spacing: -0.01em; }

/* Same masthead nav as every other page. The current page is left out of
   its own nav. */
.masthead nav { display: flex; gap: 18px; align-items: center; flex-wrap: wrap; }
.masthead nav a { color: var(--body); text-decoration: none; font-size: 15px;
  font-weight: 500; }
.masthead nav a.cta { color: var(--accent); }
.masthead nav a:hover { text-decoration: underline; }

h1 {
  font-weight: 400;
  font-family: var(--serif);
  font-size: clamp(34px, 5.4vw, 56px);
  line-height: 1.1;
  color: var(--ink);
  margin: 0 0 12px;
  letter-spacing: -0.02em;
}

.eyebrow {
  font-size: 13px;
  font-weight: 500;
  letter-spacing: 0.09em;
  text-transform: uppercase;
  color: var(--accent);
  margin: 0 0 20px;
}

.standfirst { font-size: 19px; color: var(--body); margin: 0 0 8px; max-width: 62ch; }

p { margin: 0 0 15px; max-width: 68ch; }
a { color: var(--accent); }

nav.toc {
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: 10px;
  padding: 18px 22px;
  margin: 30px 0 8px;
}

nav.toc p { font-size: 13px; text-transform: uppercase; letter-spacing: 0.07em;
  color: var(--mute); margin: 0 0 12px; }

nav.toc ol { list-style: none; margin: 0; padding: 0; counter-reset: toc; }

nav.toc li {
  counter-increment: toc;
  display: grid;
  grid-template-columns: 28px 1fr;
  gap: 0 6px;
  padding: 7px 0;
  border-top: 1px solid var(--line);
}
nav.toc li:first-child { border-top: none; padding-top: 0; }

nav.toc li::before {
  content: counter(toc, decimal-leading-zero);
  color: var(--mute);
  font-size: 13px;
  font-variant-numeric: tabular-nums;
  padding-top: 2px;
}

nav.toc a { text-decoration: none; font-weight: 500; color: var(--ink); }
nav.toc a:hover { text-decoration: underline; }
nav.toc .sub { grid-column: 2; color: var(--mute); font-size: 14px; }

/* ---------- articles ---------- */

article {
  border-top: 1px solid var(--line);
  margin-top: 64px;
  padding-top: 40px;
  scroll-margin-top: 24px;
}

.kicker {
  font-size: 12px;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: var(--accent);
  margin: 0 0 10px;
  font-weight: 600;
}

article h2 {
  font-weight: 400;
  font-family: var(--serif);
  font-size: clamp(26px, 3.4vw, 34px);
  line-height: 1.2;
  color: var(--ink);
  margin: 0 0 10px;
  letter-spacing: -0.015em;
  max-width: 20ch;
}

.byline {
  font-size: 14px;
  color: var(--mute);
  margin: 0 0 26px;
  padding-bottom: 22px;
  border-bottom: 1px solid var(--line);
}

/* The opening line of each piece carries the hook, so it is set larger —
   it is what a reader arriving from a LinkedIn post sees first. */
.opener { font-size: 18px; color: var(--ink); }

/* The two estimates, given voices. Set as a script rather than as prose
   so a reader skimming knows immediately that it is not the article
   talking — and so it screenshots cleanly for the LinkedIn post. The
   speaker names are the app's own column labels, deliberately. */
.skit {
  background: var(--card);
  border: 1px solid var(--line);
  border-left: 3px solid var(--accent);
  border-radius: 8px;
  padding: 20px 24px;
  margin: 0 0 28px;
}
.skit p { margin: 0 0 13px; max-width: none; color: var(--ink); }
.skit p:last-child { margin-bottom: 0; }
.skit .who {
  display: block;
  font-size: 11.5px;
  text-transform: uppercase;
  letter-spacing: 0.09em;
  color: var(--mute);
  font-weight: 600;
  margin-bottom: 2px;
}

article p strong { color: var(--ink); }
article em { color: var(--ink); }

.signoff {
  margin: 26px 0 0;
  padding-top: 18px;
  border-top: 1px solid var(--line);
  font-size: 14px;
  color: var(--mute);
}

.pull {
  font-family: var(--serif);
  font-size: 21px;
  line-height: 1.4;
  color: var(--ink);
  border-left: 3px solid var(--accent);
  padding: 2px 0 2px 20px;
  margin: 26px 0;
  max-width: 54ch;
}

.figure {
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: 8px;
  padding: 18px 22px;
  margin: 24px 0;
  font-size: 15px;
}
.figure p:last-child { margin-bottom: 0; }
.figure .cap { color: var(--mute); font-size: 13.5px; }

/* Bars are inline SVG rather than a coloured background, because a
   browser drops background graphics when printing unless the reader has
   opted in — a PDF of this page came out with the labels and the numbers
   but no chart at all. An SVG fill is content and always prints.

   Rows are stacked (label and figure over the bar) rather than a
   three-column grid, because the labels are now the full field names from
   the conversation above and will not fit a fixed label column. */
.bars { display: grid; gap: 15px; margin: 6px 0 16px; }
.bar .head { display: flex; justify-content: space-between; align-items: baseline;
  gap: 12px; margin-bottom: 5px; }
.bar .lbl { font-size: 15px; color: var(--body); }
.bar .num { font-size: 15px; color: var(--ink); font-weight: 600;
  font-variant-numeric: tabular-nums; }
.bar svg { display: block; }

.end {
  border-top: 1px solid var(--line);
  margin-top: 64px;
  padding-top: 32px;
}

.end h2 { font-family: var(--serif); font-size: 26px; color: var(--ink); margin: 0 0 10px; }

.cta-row { display: flex; gap: 14px; flex-wrap: wrap; align-items: center; margin-top: 20px; }

.btn {
  display: inline-block;
  background: var(--accent);
  color: #fff;
  text-decoration: none;
  font-weight: 600;
  font-size: 15px;
  padding: 12px 22px;
  border-radius: 7px;
}

.btn.ghost { background: transparent; color: var(--accent); border: 1px solid var(--line); }

footer {
  border-top: 1px solid var(--line);
  margin-top: 72px;
  padding: 28px 0 56px;
  color: var(--mute);
  font-size: 14px;
}
footer .wrap { display: flex; flex-wrap: wrap; gap: 8px 28px; align-items: baseline; }

footer .legal {
  flex: 1 1 100%;
  margin: 14px 0 0;
  max-width: 62ch;
  font-size: 13px;
  line-height: 1.55;
}

/* Browsers drop background graphics when printing unless the reader opts
   in, which turns the filled primary button into white text on white
   paper — it disappeared entirely from a PDF of this page. Print it as an
   outlined button instead, so the call to action always survives. The
   same reasoning is why the chart bars are SVG rather than a background. */
@media print {
  .btn {
    background: transparent;
    color: var(--accent);
    border: 1px solid var(--accent);
  }
}

@media (max-width: 620px) {
  h1 { font-size: 31px; }
  article h2 { font-size: 24px; max-width: none; }
  .pull { font-size: 19px; }
}

/* ---------- Markdown content ---------- */

.article-body h2 {
  font-weight: 400;
  font-family: var(--serif);
  font-size: clamp(24px, 3vw, 30px);
  line-height: 1.25;
  color: var(--ink);
  margin: 36px 0 12px;
  letter-spacing: -0.01em;
}
.article-body h3 { font-size: 19px; color: var(--ink); margin: 28px 0 8px; }
.article-body ul, .article-body ol { margin: 0 0 15px; padding-left: 22px; max-width: 66ch; }
.article-body li { margin: 0 0 6px; }
.article-body blockquote {
  font-family: var(--serif);
  font-size: 21px;
  line-height: 1.4;
  color: var(--ink);
  border-left: 3px solid var(--accent);
  padding: 2px 0 2px 20px;
  margin: 26px 0;
  max-width: 54ch;
}
.article-body blockquote p { margin: 0; }
.article-body img { max-width: 100%; height: auto; border-radius: 8px; display: block; margin: 24px 0; }
.article-body figure { margin: 24px 0; }
.article-body figcaption { color: var(--mute); font-size: 13.5px; margin-top: 8px; }
.article-body hr { border: none; border-top: 1px solid var(--line); margin: 32px 0; }
.article-body code {
  font-family: ui-monospace, SFMono-Regular, Consolas, monospace;
  font-size: 0.9em;
  background: var(--accent-soft);
  border-radius: 4px;
  padding: 1px 5px;
}
.article-body pre {
  background: var(--deep);
  color: #e8edf2;
  border-radius: 8px;
  padding: 16px 18px;
  overflow-x: auto;
  font-size: 14px;
  margin: 0 0 18px;
}
.article-body pre code { background: none; padding: 0; color: inherit; }
.article-body table { border-collapse: collapse; margin: 0 0 18px; font-size: 15px; display: block; overflow-x: auto; }
.article-body th, .article-body td { border: 1px solid var(--line); padding: 8px 12px; text-align: left; }
.article-body th { background: var(--card); color: var(--ink); }