/* ==========================================================================
   Long-form pages: blog index, blog articles, and the editorial pages that
   share the article layout (about, contact, legal, comparisons).
   Forge design system: Sora headings, 64ch prose, mono meta lines, formula
   blocks on the inverse ink surface. Everything here uses variables.css
   tokens, so the dark theme needs no rules of its own.
   ========================================================================== */

.blog-article {
  max-width: 46rem;
  min-width: 0;
}

/* ------------------------------------------------------------------ header */

.blog-header {
  padding-bottom: 0;
  margin-bottom: var(--space-8);
  border-bottom: 0;
}

.blog-eyebrow {
  margin: 0 0 var(--space-4);
  font-family: var(--font-mono);
  font-size: var(--text-eyebrow);
  font-weight: var(--weight-medium);
  letter-spacing: var(--tracking-eyebrow);
  text-transform: uppercase;
  color: var(--text-highlight);
}

.blog-header h1 {
  margin: 0 0 var(--space-5);
  font-size: clamp(2rem, 4vw, 3rem);
  font-weight: var(--weight-black);
  line-height: var(--leading-tight);
  letter-spacing: var(--tracking-display);
  max-width: 22ch;
  text-wrap: balance;
}

.blog-standfirst {
  margin: 0 0 var(--space-6);
  font-size: var(--text-md);
  line-height: var(--leading-relaxed);
  color: var(--text-body);
  max-width: var(--measure-lede);
}

/* Byline row: avatar, author, date, reading time between two hairlines. */
.blog-byline {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  padding: var(--space-4) 0;
  border-top: 1px solid var(--border-hairline);
  border-bottom: 1px solid var(--border-hairline);
}

.blog-byline .author-avatar {
  width: 36px;
  height: 36px;
  font-size: var(--text-sm);
}

.blog-header .tool-meta {
  margin: 0;
}

.blog-header > .tool-meta {
  padding: var(--space-4) 0;
  border-top: 1px solid var(--border-hairline);
  border-bottom: 1px solid var(--border-hairline);
}

/* ------------------------------------------------------ table of contents */

.blog-toc {
  padding: var(--space-5);
  margin-bottom: var(--space-8);
  background: var(--surface-band);
  border: 1px solid var(--border-hairline);
  border-radius: var(--radius-card);
}

.blog-toc-title {
  margin: 0 0 var(--space-3);
  font-family: var(--font-mono);
  font-size: var(--text-eyebrow);
  font-weight: var(--weight-medium);
  letter-spacing: var(--tracking-eyebrow);
  text-transform: uppercase;
  color: var(--text-muted);
}

.blog-toc ol {
  margin: 0;
  padding: 0;
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
}

.blog-toc li {
  margin: 0;
}

.blog-toc a {
  font-size: var(--text-sm);
  color: var(--text-body);
  text-decoration: none;
}

.blog-toc a:hover,
.blog-toc a:focus-visible {
  color: var(--text-link);
  text-decoration: underline;
}

/* The contents list sits in the sidebar on wide screens and inline above
   the body on narrow ones, where the sidebar would push it below the article. */
.blog-toc-side { display: none; }

@media (min-width: 1025px) {
  .blog-toc-inline { display: none; }
  .blog-toc-side {
    display: block;
    margin: 0;
  }
}

/* -------------------------------------------------------------------- body */

.blog-body {
  font-size: var(--text-md);
  line-height: var(--leading-relaxed);
  color: var(--text-body);
  max-width: var(--measure-prose);
}

.blog-body > p {
  margin: 0 0 var(--space-5);
}

.blog-body h2 {
  margin: var(--space-10) 0 var(--space-4);
  font-size: var(--text-h3);
  line-height: var(--leading-snug);
  letter-spacing: var(--tracking-display);
  scroll-margin-top: var(--space-6);
}

.blog-body > h2:first-child {
  margin-top: 0;
}

.blog-body h3 {
  margin: var(--space-8) 0 var(--space-3);
  font-size: var(--text-lg);
  scroll-margin-top: var(--space-6);
}

.blog-body ul,
.blog-body ol {
  margin: 0 0 var(--space-5);
  padding-left: var(--space-6);
}

.blog-body li {
  margin-bottom: var(--space-2);
}

.blog-body li::marker {
  color: var(--text-subtle);
}

.blog-body a {
  color: var(--text-link);
  text-underline-offset: 3px;
}

.blog-body strong {
  font-weight: var(--weight-semibold);
  color: var(--text-strong);
}

/* Inline + block code. */
.blog-body code {
  padding: 0.12em 0.38em;
  font-family: var(--font-mono);
  font-size: 0.88em;
  background: var(--surface-sunken);
  border-radius: var(--radius-xs);
}

.blog-body pre {
  padding: var(--space-5) 1.375rem;
  margin: 0 0 var(--space-5);
  overflow-x: auto;
  font-size: var(--text-sm);
  line-height: 1.65;
  color: var(--ink-100);
  background: var(--surface-inverse);
  border: 0;
  border-radius: var(--radius-md);
}

.blog-body pre code {
  padding: 0;
  font-size: inherit;
  color: inherit;
  background: none;
}

.blog-body .formula-box {
  margin: var(--space-5) 0;
}

/* Tables can be wider than the measure, so they scroll inside themselves. */
.blog-body .data-table {
  display: block;
  width: 100%;
  margin: 0 0 var(--space-6);
  overflow-x: auto;
  font-size: var(--text-sm);
  border-collapse: collapse;
  white-space: nowrap;
  border: 1px solid var(--border-hairline);
  border-radius: var(--radius-card);
  box-shadow: var(--shadow-sm);
}

.blog-body .data-table thead {
  background: var(--surface-band);
}

.blog-body .data-table th,
.blog-body .data-table td {
  padding: 0.6875rem 0.875rem;
  text-align: left;
  border-bottom: 1px solid var(--border-hairline);
}

.blog-body .data-table th {
  font-family: var(--font-sans);
  font-size: var(--text-xs);
  font-weight: var(--weight-semibold);
  letter-spacing: var(--tracking-eyebrow);
  text-transform: uppercase;
  color: var(--text-muted);
}

.blog-body .data-table tbody th {
  font-size: var(--text-sm);
  letter-spacing: 0;
  text-transform: none;
  color: var(--text-strong);
}

.blog-body .data-table tbody tr:last-child td,
.blog-body .data-table tbody tr:last-child th {
  border-bottom: 0;
}

/* ----------------------------------------------------------------- callout */

/* Pull fact: the accent tint with a 3px amber rule, the one place Forge
   draws a coloured edge (a quotation, not a card). */
.callout {
  padding: var(--space-5) var(--space-6);
  margin: 0 0 var(--space-6);
  background: var(--surface-accent-soft);
  border-left: 3px solid var(--amber-500);
  border-radius: var(--radius-sm);
}

.callout p {
  margin: 0;
  font-family: var(--font-display);
  font-size: var(--text-md);
  line-height: var(--leading-relaxed);
  color: var(--text-strong);
}

.callout p + p {
  margin-top: var(--space-3);
}

.callout-warning {
  background: var(--status-warning-soft);
  border-left-color: var(--status-warning);
}

/* ------------------------------------------------------------ tool + related */

/* "Run it on your own numbers": the tools a piece uses, as a brand-soft panel. */
.blog-tools,
.blog-related {
  padding-top: 0;
  margin-top: var(--space-12);
  border-top: 0;
}

.blog-tools h2,
.blog-related h2 {
  margin: 0 0 var(--space-4);
  font-size: var(--text-h4);
}

.blog-tools {
  padding: var(--card-pad);
  background: var(--surface-brand-soft);
  border: 1px solid var(--border-brand);
  border-radius: var(--radius-card);
}

.blog-tools-list {
  display: grid;
  gap: var(--space-2);
  padding: 0;
  margin: 0;
  list-style: none;
}

.blog-tools-list a {
  display: block;
  padding: var(--space-3) var(--space-4);
  text-decoration: none;
  background: var(--surface-card);
  border: 1px solid var(--border-hairline);
  border-radius: var(--radius-md);
  transition: box-shadow var(--dur-base) var(--ease-out), transform var(--dur-base) var(--ease-out);
}

.blog-tools-list a:hover,
.blog-tools-list a:focus-visible {
  box-shadow: var(--shadow-card);
  transform: var(--lift-hover);
  text-decoration: none;
}

.blog-tools-list strong {
  display: block;
  margin-bottom: 2px;
  font-family: var(--font-display);
  font-weight: var(--weight-semibold);
  color: var(--text-strong);
}

.blog-tools-list span {
  font-size: var(--text-sm);
  color: var(--text-muted);
}

/* Sidebar variant: a compact link list. */
.blog-sidebar .sidebar-widget .sidebar-links span {
  display: block;
  font-size: var(--text-xs);
  color: var(--text-muted);
}

.blog-related .blog-grid {
  grid-template-columns: repeat(auto-fill, minmax(min(100%, 14rem), 1fr));
}

/* --------------------------------------------------------------- index page */

.blog-index-head .blog-index-intro {
  margin: 0;
}

.blog-index-intro {
  max-width: var(--measure-lede);
  margin: 0 0 var(--space-8);
  font-size: var(--text-md);
  line-height: var(--leading-relaxed);
  color: var(--text-body);
}

.blog-index-main {
  padding-block: var(--space-12) var(--section-y);
}

/* Featured (latest) piece on the inverse surface. */
.blog-featured {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-10);
  padding: 2.25rem;
  margin-bottom: var(--space-10);
  background: var(--surface-inverse);
  border-radius: var(--radius-panel);
  color: var(--ink-300);
}

[data-theme="dark"] .blog-featured {
  border: 1px solid var(--border-hairline);
}

.blog-featured-copy {
  flex: 2 1 24rem;
  min-width: 0;
}

.blog-featured-meta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-3);
  margin-bottom: var(--space-4);
  font-family: var(--font-mono);
  font-size: var(--text-xs);
  color: var(--ink-400);
}

.blog-featured-badge {
  padding: 3px 10px;
  border-radius: var(--radius-pill);
  background: #fff;
  color: var(--ink-950);
  font-family: var(--font-sans);
  font-weight: var(--weight-semibold);
}

.blog-featured h2 {
  margin-bottom: var(--space-4);
  font-size: var(--text-h2);
  line-height: var(--leading-snug);
  color: #fff;
}

.blog-featured h2 a {
  color: #fff;
}

.blog-featured h2 a:hover {
  color: #fff;
  text-decoration-color: var(--amber-400);
}

.blog-featured p {
  font-size: var(--text-md);
  line-height: var(--leading-relaxed);
  color: var(--ink-300);
  max-width: 52ch;
}

.blog-featured-action {
  flex: 1 1 12rem;
}

/* Post cards: category eyebrow, title, blurb, and a mono date line pinned
   to the bottom so a row of cards lines up. */
.blog-index-grid .blog-card .card-body {
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
  height: 100%;
}

.blog-index-grid .blog-card-meta,
.blog-index-grid .blog-card-title,
.blog-index-grid .blog-card-excerpt {
  margin: 0;
}

.blog-card-foot {
  margin-top: auto;
  padding-top: var(--space-2);
  font-family: var(--font-mono);
  font-size: var(--text-xs);
  color: var(--text-subtle);
}

/* --------------------------------------------------------------- responsive */

@media (max-width: 768px) {
  .blog-body {
    font-size: var(--text-base);
  }

  .blog-toc {
    padding: var(--space-4);
  }

  .blog-body pre {
    padding: var(--space-3) var(--space-4);
  }

  .blog-featured {
    padding: var(--space-6);
  }

  .blog-featured h2 {
    font-size: var(--text-h3);
  }
}

/* ------------------------------------------------------ contact form status */

.contact-status {
  padding: var(--space-3) var(--space-4);
  margin: var(--space-4) 0 0;
  font-size: var(--text-base);
  border-radius: var(--radius-md);
}

.contact-status-pending {
  color: var(--text-body);
  background: var(--surface-band);
}

.contact-status-ok {
  color: var(--status-success-text);
  background: var(--status-success-soft);
}

.contact-status-error {
  color: var(--status-danger-text);
  background: var(--status-danger-soft);
}

.blog-body .form-group small {
  display: block;
  margin-top: var(--space-1);
  font-size: var(--text-sm);
  color: var(--text-muted);
}

/* Comparison pages (alternatives.html and the /vs/ set).
   A four-column comparison table cannot shrink to a 360px phone without either
   wrapping every cell to one word per line or pushing the whole page sideways.
   Scrolling the table inside its own box is the only option that leaves the
   rest of the article readable. */
.blog-body .table-scroll {
  overflow-x: auto;
  margin: var(--space-6) 0;
  border: 1px solid var(--border-hairline);
  border-radius: var(--radius-card);
  box-shadow: var(--shadow-sm);
}

.blog-body .table-scroll .data-table {
  margin: 0;
  min-width: 34rem;
  border: 0;
  border-radius: 0;
  box-shadow: none;
}

.blog-body .table-scroll .data-table th:first-child {
  white-space: normal;
  min-width: 11rem;
}

.comparison-checked {
  margin-top: var(--space-8);
  padding-top: var(--space-4);
  border-top: 1px solid var(--border-hairline);
  font-family: var(--font-mono);
  font-size: var(--text-xs);
  color: var(--text-muted);
}