/* article.css — shared styling for long-form guide/blog pages.
   Builds on tokens.css + main.css (nav, page-hero, footer reused). */

.article-body { padding: 56px var(--side-pad) 96px; background: var(--paper); }
.article-content { max-width: 720px; margin: 0 auto; }

/* Meta row under the hero title */
.article-meta {
  display: flex; flex-wrap: wrap; align-items: center; gap: 10px;
  font-family: var(--font-ui); font-size: 13.5px; font-weight: 600;
  color: var(--ink2); margin-top: 18px;
}
.article-meta__dot { width: 3px; height: 3px; border-radius: 50%; background: var(--ink2); opacity: 0.5; }

/* Lead paragraph */
.article-lead {
  font-family: var(--font-body); font-size: 21px; line-height: 1.6;
  color: var(--ink); margin: 0 0 28px;
}

/* Prose */
.article-content h2 {
  font-size: 27px; font-weight: 700; letter-spacing: -0.024em; color: var(--ink);
  line-height: 1.15; margin: 52px 0 16px; scroll-margin-top: 90px;
}
.article-content h3 {
  font-size: 19px; font-weight: 700; letter-spacing: -0.014em; color: var(--ink);
  margin: 32px 0 10px; scroll-margin-top: 90px;
}
.article-content p {
  font-family: var(--font-body); font-size: 17.5px; color: var(--ink2);
  line-height: 1.75; margin: 0 0 18px;
}
.article-content ul, .article-content ol { margin: 0 0 22px 24px; }
.article-content li {
  font-family: var(--font-body); font-size: 17.5px; color: var(--ink2);
  line-height: 1.7; margin-bottom: 9px;
}
.article-content ul li { list-style: disc; }
.article-content ol li { list-style: decimal; }
.article-content li strong { color: var(--ink); font-weight: 600; }
.article-content p strong { color: var(--ink); font-weight: 600; }
.article-content a {
  color: var(--red); text-decoration: underline; text-underline-offset: 3px;
  text-decoration-thickness: 1.5px;
}
.article-content a:hover { color: var(--red2); }
.article-content code {
  font-family: var(--font-mono, ui-monospace, Menlo, monospace);
  font-size: 0.86em; background: var(--paper3); padding: 2px 6px;
  border-radius: 6px; color: var(--ink);
}
.article-divider { border: none; border-top: 1px solid var(--rule); margin: 44px 0; }

/* Table of contents */
.article-toc {
  background: var(--tint); border: 1px solid var(--rule);
  border-radius: var(--radius); padding: 22px 26px; margin: 0 0 40px;
}
.article-toc__title {
  font-family: var(--font-ui); font-size: 12px; font-weight: 700;
  letter-spacing: 0.09em; text-transform: uppercase; color: var(--amber-text);
  margin: 0 0 12px;
}
.article-toc ol { margin: 0 0 0 18px; }
.article-toc li {
  font-family: var(--font-ui); font-size: 15px; line-height: 1.5;
  margin-bottom: 7px; list-style: decimal; color: var(--ink2);
}
.article-toc a { color: var(--ink); text-decoration: none; }
.article-toc a:hover { color: var(--red); text-decoration: underline; text-underline-offset: 3px; }

/* Formatted comic-script example block */
.script-example {
  background: #FFFDFA; border: 1px solid var(--rule);
  border-left: 3px solid var(--amber); border-radius: var(--radius);
  padding: 24px 26px; margin: 8px 0 26px; box-shadow: var(--shadow-sm);
  font-family: var(--font-mono, ui-monospace, "SF Mono", Menlo, monospace);
  font-size: 13.5px; line-height: 1.7; color: var(--ink);
  white-space: pre-wrap; overflow-x: auto;
}
.script-example .se-page { font-weight: 700; color: var(--red2); }
.script-example .se-panel { font-weight: 700; color: var(--ink); }
.script-example .se-cue { font-weight: 700; color: var(--amber-text); }
.script-example .se-sfx { font-weight: 700; color: var(--orange-text); font-style: italic; }
.script-example .se-cap { color: var(--ink2); }
.script-example .se-comment { color: #8A7E6F; font-style: italic; }

/* Callout / tip box */
.callout {
  display: flex; gap: 14px; align-items: flex-start;
  background: var(--tint); border: 1px solid var(--rule);
  border-radius: var(--radius); padding: 18px 22px; margin: 8px 0 26px;
}
.callout__icon { flex-shrink: 0; font-size: 20px; line-height: 1.4; }
.callout__body { margin: 0; }
.callout__body p { margin: 0; font-size: 16px; }
.callout__body strong { color: var(--ink); }

/* Key takeaways box */
.key-takeaways {
  background: var(--charcoal3); border-radius: var(--radius-lg);
  padding: 26px 30px; margin: 36px 0;
}
.key-takeaways h2 {
  color: #F3E7D6; font-size: 15px; font-family: var(--font-ui);
  letter-spacing: 0.08em; text-transform: uppercase; margin: 0 0 14px;
}
.key-takeaways ul { margin: 0 0 0 20px; }
.key-takeaways li {
  font-family: var(--font-body); font-size: 16.5px; color: #E5D9C8;
  line-height: 1.65; margin-bottom: 10px; list-style: none; position: relative;
}
.key-takeaways li::before {
  content: "→"; position: absolute; left: -22px; color: var(--amber); font-weight: 700;
}
/* On the dark box the global light-bg defaults (--ink strong, --red links) go
   near-invisible. Amber passes AA on --charcoal3 and matches the arrows. */
.key-takeaways li strong { color: var(--amber); }
.key-takeaways a { color: var(--amber); text-underline-offset: 3px; }
.key-takeaways a:hover { color: #F3B24E; }

/* Inline FAQ */
.faq-inline { margin-top: 12px; }
.faq-inline__item { border-top: 1px solid var(--rule); padding: 20px 0; }
.faq-inline__item:last-child { border-bottom: 1px solid var(--rule); }
.faq-inline__q {
  font-family: var(--font-head); font-size: 18px; font-weight: 700;
  color: var(--ink); margin: 0 0 8px;
}
.faq-inline__a { font-family: var(--font-body); font-size: 16.5px; color: var(--ink2); line-height: 1.7; margin: 0; }

/* End-of-article CTA */
.article-cta {
  margin: 48px 0 0; padding: 40px; text-align: center;
  background: linear-gradient(160deg, #241a0f 0%, var(--charcoal3) 100%);
  border-radius: var(--radius-lg); box-shadow: var(--shadow);
}
.article-cta h2 { color: #FBF6EE; font-size: 26px; margin: 0 0 10px; letter-spacing: -0.02em; }
.article-cta p { color: #D8CCBB; font-family: var(--font-body); font-size: 17px; margin: 0 auto 22px; max-width: 30em; line-height: 1.6; }
.article-cta p strong { color: #FBF6EE; }
.article-cta p a { color: var(--amber); }
.article-cta .btn-primary { display: inline-flex; }

/* Related links */
.article-related { margin-top: 44px; }
.article-related__title {
  font-family: var(--font-ui); font-size: 12px; font-weight: 700;
  letter-spacing: 0.09em; text-transform: uppercase; color: var(--amber-text); margin: 0 0 14px;
}
.article-related ul { margin: 0; }
.article-related li { list-style: none; margin-bottom: 8px; }
.article-related a {
  font-family: var(--font-head); font-weight: 600; font-size: 16px;
  color: var(--ink); text-decoration: none;
}
.article-related a:hover { color: var(--red); text-decoration: underline; text-underline-offset: 3px; }

/* ── Guides hub ─────────────────────────────────────────── */
.guides-body { padding: 56px var(--side-pad) 96px; background: var(--paper); }
.guides-inner { max-width: 1000px; margin: 0 auto; }
.guide-grid {
  display: grid; grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
  gap: 22px;
}
.guide-card {
  display: flex; flex-direction: column; background: #FFFDFA;
  border: 1px solid var(--rule); border-radius: var(--radius-lg);
  padding: 26px 28px; text-decoration: none; box-shadow: var(--shadow-sm);
  transition: transform 0.18s ease, box-shadow 0.18s ease, border-color 0.18s ease;
}
.guide-card:hover { transform: translateY(-3px); box-shadow: var(--shadow); border-color: rgba(227,137,28,0.5); }
.guide-card__tag {
  font-family: var(--font-ui); font-size: 11px; font-weight: 700;
  letter-spacing: 0.08em; text-transform: uppercase; color: var(--amber-text); margin: 0 0 12px;
}
.guide-card__title {
  font-family: var(--font-head); font-size: 21px; font-weight: 700;
  letter-spacing: -0.02em; color: var(--ink); line-height: 1.2; margin: 0 0 10px;
}
.guide-card__excerpt {
  font-family: var(--font-body); font-size: 16px; color: var(--ink2);
  line-height: 1.6; margin: 0 0 18px; flex: 1;
}
.guide-card__meta {
  display: flex; align-items: center; gap: 8px; font-family: var(--font-ui);
  font-size: 13px; font-weight: 600; color: var(--red);
}
.guide-card__meta svg { transition: transform 0.18s ease; }
.guide-card:hover .guide-card__meta svg { transform: translateX(3px); }

@media (max-width: 640px) {
  .guide-grid { grid-template-columns: 1fr; }
  .article-content h2 { font-size: 23px; }
  .article-lead { font-size: 19px; }
  .article-content p, .article-content li { font-size: 16.5px; }
  .script-example { font-size: 12px; padding: 18px; }
  .article-cta { padding: 30px 22px; }
}