/* ============================================================
   Aurevon Studio: guide and article pages
   Loads after site.css. A reading column, the short answer as an
   ink card, plain tables, related guides in the site's list style.
   ============================================================ */

.article-page main { padding-top: clamp(128px, 10vh + 80px, 184px); }
.wrap-narrow { width: 100%; max-width: calc(720px + var(--gutter) * 2); margin-inline: auto; padding-inline: var(--gutter); }

/* ---------- head ---------- */
.crumb { font-size: var(--fs-sm); color: var(--muted); margin-bottom: 28px; }
.crumb a { color: var(--ink-2); text-decoration: underline; text-decoration-color: var(--line-strong); }
.crumb a:hover { color: var(--ink); text-decoration-color: currentColor; }
.article-head h1 {
  font-size: clamp(2.5rem, 1.55rem + 3.7vw, 4.25rem); font-weight: 500;
  letter-spacing: -0.035em; line-height: 1.02; text-wrap: balance;
}
.article-lede { margin-top: 26px; font-size: var(--fs-lead); color: var(--ink-2); line-height: 1.5; text-wrap: pretty; }
.article-meta { margin-top: 22px; padding-bottom: 40px; border-bottom: 1px solid var(--line); font-size: var(--fs-sm); color: var(--muted); }
.article .article-meta { max-width: none; }
.guides-index .article-meta { padding-bottom: 0; border-bottom: 0; }

/* ---------- body copy ---------- */
.article { padding-bottom: 24px; }
.article h2 {
  margin: 60px 0 14px; font-size: clamp(1.5rem, 1.28rem + 0.9vw, 1.95rem); font-weight: 500;
  letter-spacing: -0.025em; line-height: 1.15; text-wrap: balance;
}
.article h3 { margin: 34px 0 10px; font-size: var(--fs-h3); font-weight: 600; letter-spacing: -0.02em; }
.article p, .article li { color: var(--ink-2); line-height: 1.7; }
.article p { margin-bottom: 16px; max-width: 68ch; }
.article ul { margin: 0 0 22px 1.15em; list-style: disc; }
.article li { margin-bottom: 9px; padding-left: 4px; }
.article li::marker { color: var(--orange-ink); }
.article strong { color: var(--ink); font-weight: 600; }
.article a { color: var(--orange-ink); text-decoration: underline; text-decoration-thickness: 1px; }
.article a:hover { color: var(--ink); }

/* the block an assistant lifts: one direct answer, numbers first */
.answer {
  margin: 44px 0 8px; padding: clamp(26px, 4vw, 38px);
  background: var(--night); color: var(--night-ink); border-radius: var(--radius);
}
.article .answer h2 { margin: 0 0 14px; font-size: var(--fs-h3); font-weight: 500; color: var(--night-ink); }
.article .answer p { color: #ddd6cd; margin-bottom: 0; }
.article .answer p + p { margin-top: 12px; }
.article .answer strong { color: #fff; }

/* ---------- tables ---------- */
.tablewrap {
  margin: 26px 0 34px; overflow-x: auto;
  border: 1px solid var(--line); border-radius: var(--radius-sm);
  scrollbar-width: thin; scrollbar-color: var(--line-strong) transparent;
}
.article table { width: 100%; border-collapse: collapse; font-size: var(--fs-sm); min-width: 420px; }
.article th { text-align: left; background: var(--band); color: var(--ink); font-weight: 600; }
.article th, .article td { padding: 13px 16px; border-bottom: 1px solid var(--line); vertical-align: top; color: var(--ink-2); line-height: 1.5; }
.article tr:last-child td { border-bottom: 0; }
.article td strong { color: var(--ink); font-variant-numeric: tabular-nums; }

/* ---------- questions ---------- */
.article-faq { margin-top: 64px; padding-top: 44px; border-top: 1px solid var(--line); }
.article .article-faq h2 { margin-top: 0; }
.article .q { margin: 30px 0 6px; color: var(--ink); font-weight: 600; }

/* ---------- related guides and the guides index ---------- */
.related { margin-top: 56px; }
.related-title { font-size: var(--fs-h3); font-weight: 500; letter-spacing: -0.02em; margin-bottom: 20px; }
.related .guide-list a { grid-template-columns: minmax(0, 1fr) 24px; gap: 6px 24px; }
.related .guide-list p { grid-column: 1; }
.related .guide-list svg { grid-row: 1 / span 2; grid-column: 2; }
.guide-list h2 { font-size: var(--fs-h3); font-weight: 500; letter-spacing: -0.02em; }
.guide-list a:hover h2 { color: var(--orange-ink); }
.guides-index .guide-list { margin-top: 48px; }
.guides-index .guide-list a { grid-template-columns: minmax(0, 1fr) 24px; gap: 8px 24px; }
.guides-index .guide-list p { grid-column: 1; }
.guides-index .guide-list svg { grid-row: 1 / span 2; grid-column: 2; }