/* Article + stub page presentation (web-design mission C13–C16) — the
 * WIREFRAMES §6 article spine (68ch measure, breadcrumb, h2 anchors,
 * prev/next) plus the stub-page layout the C13/C14 surfaces share. Tokens
 * only; components (cards, pills, banners) come from app.css untouched.
 * Mobile-first; no new breakpoints. */

/* ---- the article spine ------------------------------------------------------ */
.article {
  max-width: 68ch;
  margin-inline: auto;
}
.article > * + * {
  margin-top: var(--sp-4);
}
.article h2 {
  margin-top: var(--sp-6);
  padding-bottom: var(--sp-2);
  border-bottom: 1px solid var(--line);
  scroll-margin-top: 72px; /* #anchors clear the sticky header */
}
.article h3 {
  margin-top: var(--sp-5);
}
.article ul,
.article ol {
  padding-left: var(--sp-5);
  display: grid;
  gap: var(--sp-2);
}
.article li > ul,
.article li > ol {
  margin-top: var(--sp-2);
}
.article blockquote {
  padding: var(--sp-3) var(--sp-4);
  background: var(--surface-1);
  border-left: 3px solid var(--line-strong);
  border-radius: var(--r-sm);
  color: var(--text-dim);
  font-size: var(--fs-sm);
}
.article blockquote > * + * {
  margin-top: var(--sp-3);
}
.article code {
  padding: 1px var(--sp-1);
  background: var(--surface-sunken);
  border: 1px solid var(--line);
  border-radius: var(--r-sm);
  font-size: 0.92em;
}
.article hr {
  border: 0;
  border-top: 1px solid var(--line);
}

/* ---- breadcrumb --------------------------------------------------------------- */
.breadcrumb {
  font-size: var(--fs-sm);
}
.breadcrumb ol {
  list-style: none;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  gap: var(--sp-1);
  color: var(--text-dim);
}
.breadcrumb li + li::before {
  content: '/';
  margin-right: var(--sp-1);
  color: var(--line-strong);
}
.breadcrumb a {
  color: var(--text-dim);
}
.breadcrumb a:hover {
  color: var(--text);
}

/* ---- prev / next ------------------------------------------------------------------ */
.prevnext {
  display: flex;
  justify-content: space-between;
  gap: var(--sp-3);
  margin-top: var(--sp-6);
  padding-top: var(--sp-4);
  border-top: 1px solid var(--line);
}
.prevnext a {
  display: inline-flex;
  align-items: center;
  min-height: 44px; /* touch target floor */
  text-decoration: none;
  font-weight: 700;
}
.prevnext a:hover {
  text-decoration: underline;
}
.prevnext .next {
  margin-left: auto;
  text-align: right;
}

/* ---- card grids (docs index, supporter tier list) ----------------------------------- */
.card-grid {
  display: grid;
  gap: var(--sp-3);
  grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
}
.card-grid .card h3 {
  margin-bottom: var(--sp-1);
}
a.card-link {
  display: block;
  color: var(--text);
  text-decoration: none;
}
a.card-link:hover {
  border-color: var(--line-strong);
  background: var(--surface-2);
}

/* ---- stub pages (STUB-STANDARD shape) -------------------------------------------------- */
.stub-page {
  display: grid;
  gap: var(--sp-4);
  justify-items: start;
  max-width: 68ch;
  margin-inline: auto;
}
.stub-page .stub-line {
  font-size: var(--fs-md);
}
.stub-page .stub-icon {
  width: 56px;
  height: 56px;
  color: var(--line-strong);
}
.stub-page .today {
  color: var(--text-dim);
}
.stub-page .card-grid {
  justify-self: stretch;
}