/* =========================================================
   GN SCALES — GUIDES
   guides.html and the articles. Loaded after legal.css, which
   supplies the narrow reading column; this adds what an article
   needs on top of it: a byline, the "In short" box, lists, a
   worked-example table and the guide cards on the index.
   ========================================================= */

.article-crumb { font-family: var(--font-mono); font-size: 0.625rem; letter-spacing: 0.2em; text-transform: uppercase; }
.article-crumb a { color: var(--gold-500); }
.article-crumb a:hover { color: var(--gold-200); }

.legal-head h1.article-title { font-size: clamp(2.4rem, 5.4vw, 4rem); line-height: 1.04; }

.article-byline { font-size: 0.9rem; line-height: 1.6; color: var(--ink-3); }
.article-byline a { color: var(--gold-500); border-bottom: 1px solid rgba(210, 173, 92, 0.4); }
.article-byline a:hover { color: var(--gold-200); border-color: var(--gold-200); }

.article-short { display: flex; flex-direction: column; gap: 1rem; }
.article-short:hover { transform: none; }

/* Plain lists inside an article section; classed lists (.ticks) keep their own look. */
.legal-section ul:not([class]), .legal-section ol:not([class]) {
  display: flex; flex-direction: column; gap: 0.55rem;
  padding-left: 1.25rem; color: var(--ink-2); line-height: 1.7; max-width: 62ch;
}
.legal-section ul:not([class]) { list-style: disc; }
.legal-section ol:not([class]) { list-style: decimal; }
.legal-section li::marker { color: var(--gold-500); }

.article-formula {
  font-family: var(--font-mono); font-size: 0.8125rem; line-height: 1.7; color: var(--ink);
  border-left: 2px solid var(--gold-500); background: rgba(210, 173, 92, 0.05);
  padding: 0.9rem 1.1rem; max-width: 62ch;
}

.article-example { display: flex; flex-direction: column; gap: 1rem; }
.article-example:hover { transform: none; }
.article-example-label {
  font-family: var(--font-mono); font-size: 0.625rem;
  letter-spacing: 0.2em; text-transform: uppercase; color: var(--gold-500);
}
.article-table-wrap { overflow-x: auto; }
.article-table { width: 100%; border-collapse: collapse; font-size: 0.95rem; }
.article-table th, .article-table td { padding: 0.75rem 0.5rem; border-bottom: 1px solid var(--line); text-align: left; vertical-align: top; }
.article-table thead th {
  font-family: var(--font-mono); font-size: 0.625rem; font-weight: 400;
  letter-spacing: 0.16em; text-transform: uppercase; color: var(--ink-3);
}
.article-table tbody th { font-weight: 500; color: var(--ink); }
.article-table td { color: var(--ink-2); }
.article-table td:last-child { text-align: right; white-space: nowrap; color: var(--ink); }

.article-next { padding-top: clamp(1.25rem, 2.4vw, 1.75rem); border-top: 1px solid var(--line); }

/* ---------- guides.html ---------- */
.guide-list { display: flex; flex-direction: column; gap: 1rem; }
.guide-card { display: flex; flex-direction: column; gap: 0.8rem; align-items: flex-start; }
.guide-card h2 { font-size: clamp(1.5rem, 2.6vw, 2rem); line-height: 1.12; }
.guide-card h2 a:hover { color: var(--gold-200); }
.guide-card p { color: var(--ink-2); line-height: 1.68; }
.guide-meta { font-family: var(--font-mono); font-size: 0.625rem; letter-spacing: 0.16em; text-transform: uppercase; color: var(--ink-3); }

@media (max-width: 560px) {
  .article-table th, .article-table td { padding: 0.65rem 0.35rem; font-size: 0.9rem; }
}