/* Shared article column for inner pages (/trailblazers, /whats-new). Loads
   after style.css and uses only the tokens declared there. */

/* ── Article column ── */
.guide {
  max-width: var(--maxw);
  margin: 0 auto;
  padding: clamp(24px, 6vw, 48px) var(--gutter) 0;
}

.guide h1 { margin: 0 0 var(--s-3); }
.intro {
  margin: 0 0 var(--s-3);
  font-family: var(--font-display);
  font-size: var(--fs-lead);
  color: var(--text-soft);
}
.intro a { font-weight: 700; }

.guide h2 { margin: var(--s-7) 0 var(--s-2); }
.h2-aside { font-weight: 400; font-size: 0.72em; color: var(--text-soft); }

.guide h3 {
  margin: var(--s-5) 0 var(--s-1);
  font-size: var(--fs-h3);
  font-weight: 700;
  color: var(--primary);
}

.guide p, .guide li { color: var(--text-soft); }
.guide strong { color: var(--text); }
.guide ul { padding-left: 22px; margin: var(--s-3) 0; }

/* ── Changelog (/whats-new) ── */
.log { list-style: none; padding: 0; margin: var(--s-3) 0 0; }
.log li {
  display: grid;
  grid-template-columns: 2.4em 1fr;
  gap: 0 var(--s-3);
  margin: 0;
  padding: 9px 0;
  border-top: 1px solid var(--line);
}
.log li:last-child { border-bottom: 1px solid var(--line); }
.log__ver {
  font-family: var(--font-display);
  font-size: 0.85rem;
  font-weight: 400;
  color: var(--earth-ink);
  letter-spacing: 0.02em;
  line-height: 1.6;
  white-space: nowrap;
}
.log__release {
  margin: var(--s-4) 0 0;
  font-size: var(--fs-small);
  color: var(--text-soft);
}
.log-close { margin: var(--s-7) 0 0; font-weight: 700; }

/* Release-state badge: text carries the meaning, the border keeps the
   badge legible as a shape against the page (a flat gold or tinted-green
   fill alone reads too close to --bg). */
.badge {
  display: inline-flex;
  align-items: center;
  margin-left: var(--s-2);
  padding: 0.1em var(--s-2);
  border: 1px solid;
  border-radius: var(--radius);
  font-family: var(--font-body);
  font-size: var(--fs-small);
  font-weight: 700;
  line-height: 1.5;
  white-space: nowrap;
}
.badge--live {
  background: color-mix(in srgb, var(--primary) 8%, var(--surface));
  border-color: var(--line-strong);
  color: var(--primary);
}
.badge--testing {
  background: var(--gold);
  border-color: var(--gold-deep);
  color: var(--primary);
}

/* Tester invite: the site's existing smaller-italic caption style
   (see .plate figcaption / .placeholder-shot in style.css). */
.tester-invite {
  margin: var(--s-2) 0 0;
  font-family: var(--font-display);
  font-style: italic;
  font-size: var(--fs-caption);
  color: var(--text-soft);
}