/* ─────────────────────────────────────────────────────────────
   blog.css — The Signal

   Read mode, not Persuade. The marketing bands argue; these pages
   are read, so they take the reading measure the rest of the site
   uses — the same min(74ch, --page-max) as about.css — rather than
   the full page-max width of a magazine layout.

   Still no cards. A single hairline-ruled list makes a company
   with a handful of posts look like a company with a handful of
   posts, instead of padding the page with a boxed grid.
   ───────────────────────────────────────────────────────────── */

.signal-index,
.signal-post {
  padding-block: clamp(56px, 9vh, 104px) var(--section-y);
}

.signal-index__wrap,
.signal-post__wrap { max-width: min(74ch, var(--page-max)); }

/* ── Masthead ─────────────────────────────────────────────────
   Kicker, title, lede — stacked in one column, same rhythm as
   about.css's page header. */
.signal-index__kicker {
  margin: 0 0 var(--space-4);
  font-size: var(--t-meta);
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--signal-ink);
}

.signal-index__title {
  margin: 0;
  font-family: var(--font-display);
  font-weight: 400;
  font-size: clamp(34px, 4vw, 54px);
  line-height: 1.04;
  letter-spacing: -0.015em;
  color: var(--ink);
}

.signal-index__title em {
  font-style: italic;
  color: var(--signal);
}

.signal-index__lede {
  margin: var(--space-5) 0 0;
  max-width: 36em;
  font-family: var(--font-display);
  font-size: var(--t-lede);
  line-height: 1.55;
  color: var(--ink-soft);
}

/* ── The list ─────────────────────────────────────────────────
   Hairline-ruled entries, one column, full post list. */
.signal-grid {
  margin: var(--space-4) 0 0;
  padding: 0;
  list-style: none;
}

.signal-grid__item {
  border-top: 1px solid var(--rule);
  padding-block: var(--space-5);
}

.signal-grid__link {
  display: block;
  color: inherit;
  text-decoration: none;
}

.signal-grid__date {
  display: block;
  font-size: var(--t-meta);
  letter-spacing: 0.04em;
  color: var(--ink-muted);
}

.signal-grid__title {
  margin: 10px 0 0;
  font-family: var(--font-display);
  font-weight: 400;
  font-size: clamp(23px, 2.2vw, 31px);
  line-height: 1.18;
  letter-spacing: -0.012em;
  color: var(--ink);
  text-wrap: balance;
  transition: color var(--dur-fast) var(--ease);
}

.signal-grid__link:hover .signal-grid__title { color: var(--signal-ink); }

.signal-grid__standfirst {
  margin: var(--space-3) 0 0;
  max-width: 40em;
  font-size: var(--t-body);
  line-height: 1.62;
  color: var(--ink-soft);
}

.signal-grid__read {
  display: inline-block;
  margin-top: var(--space-3);
  font-size: var(--t-meta);
  font-weight: 600;
  letter-spacing: 0.03em;
  color: var(--signal-ink);
}

/* ── Empty state ──────────────────────────────────────────────
   An index with nothing in it still has to say something true. It
   states the position rather than promising a schedule the company
   has not committed to. */
.signal-empty {
  margin-top: var(--space-7);
  padding-top: var(--space-5);
  border-top: 1px solid var(--rule);
}

.signal-empty p {
  margin: 0;
  max-width: 40em;
  font-size: var(--t-body);
  line-height: 1.66;
  color: var(--ink-soft);
}

.signal-empty p + p { margin-top: var(--space-4); }

.signal-empty a {
  color: var(--signal);
  text-decoration: underline;
  text-underline-offset: 0.18em;
  text-decoration-thickness: 1px;
}

.signal-empty a:hover { color: var(--signal-deep); }

/* ── A post ───────────────────────────────────────────────────
   The masthead strip repeats the index's wordmark at reading scale
   and puts the way back to the index on the same line — a reader
   two paragraphs into an article should not have to hunt for the
   nav bar or hit the browser's back button to see what else is
   here. Then the header runs the full page-max width — date, a
   large display title, a wide standfirst — before the body drops
   onto a 68ch reading column. Wide to set the scene, narrow to
   read. */
.post__masthead {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: var(--space-3) var(--space-5);
  margin-bottom: var(--space-6);
}

.post__wordmark {
  font-family: var(--font-display);
  font-weight: 400;
  font-size: clamp(26px, 2.6vw, 34px);
  letter-spacing: -0.012em;
  color: var(--ink);
  text-decoration: none;
}

.post__wordmark em {
  font-style: italic;
  color: var(--signal);
}

.post__wordmark:hover em { color: var(--signal-deep); }

.post__back {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  font-size: var(--t-sm);
  font-weight: 600;
  color: var(--signal-ink);
  text-decoration: none;
}

.post__back svg {
  width: 14px;
  height: 14px;
  transition: transform var(--dur-fast) var(--ease);
}

.post__back:hover svg { transform: translateX(-3px); }
.post__back:hover { text-decoration: underline; text-underline-offset: 0.18em; }

.post__head {
  padding-bottom: var(--space-5);
  border-bottom: 1px solid var(--rule);
}

.post__date {
  margin: 0;
  font-size: var(--t-meta);
  letter-spacing: 0.04em;
  color: var(--ink-muted);
}

.post__date-sep { margin: 0 6px; }

.post__author {
  color: var(--ink-soft);
  font-weight: 600;
  text-decoration: underline;
  text-decoration-color: var(--rule-strong);
  text-underline-offset: 0.18em;
}

.post__author:hover { color: var(--signal-ink); text-decoration-color: currentColor; }

.post__title {
  margin: var(--space-3) 0 0;
  max-width: 20ch;
  font-family: var(--font-display);
  font-weight: 400;
  font-size: clamp(36px, 5vw, 64px);
  line-height: 1.04;
  letter-spacing: -0.018em;
  color: var(--ink);
  text-wrap: balance;
}

.post__standfirst {
  margin: var(--space-4) 0 0;
  max-width: 38em;
  font-size: var(--t-lede);
  line-height: 1.5;
  color: var(--ink-soft);
}

/* Body copy is set on a 68ch measure inside the full-width page: the rules
   and headings above span the page, the prose does not, the same
   relationship a section rule holds with its text elsewhere on the site. */
.post__body {
  margin-top: var(--space-6);
  max-width: 68ch;
}

.post__body p,
.post__body li {
  font-size: var(--t-body);
  line-height: 1.7;
  color: var(--ink-soft);
}

.post__body p { margin: 0 0 var(--space-4); }

.post__body h2 {
  margin: var(--space-6) 0 var(--space-3);
  font-family: var(--font-display);
  font-weight: 400;
  font-size: clamp(22px, 1.9vw, 28px);
  line-height: 1.2;
  letter-spacing: -0.01em;
  color: var(--ink);
}

.post__body h3 {
  margin: var(--space-5) 0 var(--space-2);
  font-family: var(--font-display);
  font-weight: 400;
  font-size: clamp(19px, 1.5vw, 22px);
  line-height: 1.25;
  color: var(--ink);
}

.post__body ul,
.post__body ol { margin: 0 0 var(--space-4); padding-left: 1.25em; }
.post__body li { margin-bottom: 8px; }

.post__body a {
  color: var(--signal);
  text-decoration: underline;
  text-underline-offset: 0.18em;
  text-decoration-thickness: 1px;
}

.post__body a:hover { color: var(--signal-deep); }

/* Pulled quotes sit on the accent rule rather than in a tinted box — the page
   has no other filled containers and one would read as a component from a
   different system. */
.post__body blockquote {
  margin: var(--space-5) 0;
  padding-left: var(--space-4);
  border-left: 2px solid var(--signal-soft);
  font-family: var(--font-display);
  font-size: clamp(18px, 1.5vw, 22px);
  font-style: italic;
  line-height: 1.4;
  color: var(--ink);
}

.post__body blockquote p { font: inherit; color: inherit; margin: 0; }

.post__body code {
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: 0.9em;
  background: var(--surface);
  padding: 0.12em 0.35em;
  border-radius: 3px;
}

.post__body pre {
  margin: 0 0 var(--space-4);
  padding: var(--space-4);
  overflow-x: auto;
  background: var(--surface);
  border-radius: 4px;
}

.post__body pre code { background: none; padding: 0; }

.post__body img {
  max-width: 100%;
  height: auto;
  margin: var(--space-5) 0;
  border-radius: 4px;
}

/* ── End-of-post CTA ──────────────────────────────────────────
   Every piece ends at the same door. Set on the 68ch reading
   column like the body above it — a full-width band here would
   read as a marketing interruption rather than the article's own
   closing line. */
.post__cta {
  margin-top: var(--space-7);
  padding-top: var(--space-6);
  max-width: 68ch;
  border-top: 1px solid var(--rule-strong);
}

.post__cta-kicker {
  margin: 0 0 var(--space-3);
  font-size: var(--t-meta);
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--signal-ink);
}

.post__cta-title {
  margin: 0;
  font-family: var(--font-display);
  font-weight: 400;
  font-size: clamp(26px, 2.6vw, 34px);
  line-height: 1.15;
  letter-spacing: -0.012em;
  color: var(--ink);
  text-wrap: balance;
}

.post__cta-body {
  margin: var(--space-3) 0 var(--space-5);
  max-width: 42em;
  font-size: var(--t-body);
  line-height: 1.6;
  color: var(--ink-soft);
}

/* Same treatment as legal.css's back link, and for the same reason: a
   standalone control does not get 2.5.8's inline exemption. */
.post__foot {
  margin-top: var(--space-6);
  padding-top: var(--space-4);
  border-top: 1px solid var(--rule);
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-3) var(--space-5);
  align-items: baseline;
}

.post__foot a {
  display: inline-block;
  padding: 4px 0;
  font-size: var(--t-sm);
  color: var(--signal);
  text-decoration: underline;
  text-underline-offset: 0.18em;
}

.post__foot a:hover { color: var(--signal-deep); }