/* ==========================================================================
   AEO Pro Lab — Universal Article Stylesheet
   --------------------------------------------------------------------------
   This file controls the visual design of EVERY article under /articles/.
   Editing this file updates ALL articles globally. Do not inline article
   styles in individual HTML files unless absolutely necessary.

   Sections:
   1. Reset & base
   2. Site chrome (nav, breadcrumb, footer)
   3. Article header (h1, subtitle, meta strip)
   4. Article summary block
   5. Table of contents
   6. Key takeaways block
   7. Article body (paragraphs, headings, lists, tables, blockquote, figure)
   8. Reusable components (callout, cta, code)
   9. FAQ block
   10. About author block
   11. Related articles block
   12. Responsive
   ========================================================================== */

/* 1. Reset & base ---------------------------------------------------------- */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html { -webkit-text-size-adjust: 100%; }
body {
  font-family: Georgia, 'Times New Roman', serif;
  font-size: 18px;
  line-height: 1.75;
  color: #1a1a1a;
  background: #fff;
}
a { color: #1a1a1a; }
a:hover { color: #555; }
img { max-width: 100%; height: auto; display: block; }

/* 2. Site chrome ----------------------------------------------------------- */
.site-nav { border-bottom: 1px solid #e0e0e0; padding: 0 24px; }
.site-nav-inner { max-width: 860px; margin: 0 auto; display: flex; align-items: center; flex-wrap: wrap; }
.nav-brand {
  font-family: 'Helvetica Neue', Arial, sans-serif;
  font-weight: 700; font-size: 14px; letter-spacing: 0.04em; text-transform: uppercase;
  padding: 16px 20px 16px 0; margin-right: 8px;
  border-right: 1px solid #e0e0e0;
  text-decoration: none; color: #1a1a1a; white-space: nowrap;
}
.nav-links { display: flex; flex-wrap: wrap; }
.nav-links a {
  font-family: 'Helvetica Neue', Arial, sans-serif;
  font-size: 13px; color: #444; text-decoration: none;
  padding: 16px 12px; white-space: nowrap;
}
.nav-links a:hover { color: #1a1a1a; }

.breadcrumb {
  max-width: 860px; margin: 0 auto;
  padding: 16px 24px 0;
  font-family: 'Helvetica Neue', Arial, sans-serif;
  font-size: 13px; color: #888;
}
.breadcrumb a { color: #888; text-decoration: none; }
.breadcrumb span { margin: 0 6px; }

.page-main { max-width: 860px; margin: 0 auto; padding: 0 24px 80px; }

.site-footer { border-top: 1px solid #e0e0e0; padding: 32px 24px; margin-top: 60px; }
.site-footer-inner { max-width: 860px; margin: 0 auto; font-family: 'Helvetica Neue', Arial, sans-serif; font-size: 13px; color: #444; }
.footer-links { font-size: 12px; color: #888; margin-top: 10px; }
.footer-links a { color: #888; text-decoration: none; margin: 0 6px; }
.footer-copy { font-size: 12px; color: #bbb; margin-top: 8px; }

/* 3. Article header -------------------------------------------------------- */
.article-header { padding: 40px 0 32px; border-bottom: 1px solid #e8e8e8; margin-bottom: 32px; }
.article-header h1 {
  font-family: Georgia, serif;
  font-size: 2.4rem; font-weight: normal; line-height: 1.25;
  margin-bottom: 12px;
}
.article-subtitle {
  font-family: Georgia, serif; font-style: italic;
  font-size: 1.1rem; color: #666;
  margin-bottom: 28px;
}
.author-row { display: flex; align-items: center; gap: 12px; }
.author-avatar {
  width: 38px; height: 38px; border-radius: 50%;
  background: #1a1a1a; color: #fff;
  display: flex; align-items: center; justify-content: center;
  font-family: 'Helvetica Neue', Arial, sans-serif;
  font-size: 13px; font-weight: 700; flex-shrink: 0;
}
.author-meta { font-family: 'Helvetica Neue', Arial, sans-serif; font-size: 13px; color: #666; line-height: 1.4; }
.author-meta a { color: #1a1a1a; text-decoration: none; font-weight: 600; }
.author-meta .meta-line { color: #999; }

/* 4. Article summary block ------------------------------------------------- */
.article-summary {
  background: #faf8f4;
  border-left: 3px solid #c8943e;
  padding: 22px 26px;
  margin: 0 0 32px;
  font-size: 1.02rem;
  line-height: 1.7;
}
.article-summary p { margin: 0; }
.article-summary p + p { margin-top: 0.8em; }

/* 5. Table of contents ----------------------------------------------------- */
.toc {
  background: #f8f8f8;
  padding: 20px 24px;
  margin: 0 0 36px;
  font-family: 'Helvetica Neue', Arial, sans-serif;
}
.toc-label {
  font-size: 11px; font-weight: 700;
  text-transform: uppercase; letter-spacing: 0.08em;
  color: #666; margin-bottom: 12px;
}
.toc ol { list-style: none; padding: 0; counter-reset: toc; }
.toc ol li {
  counter-increment: toc;
  font-size: 14px; line-height: 1.5;
  padding: 5px 0;
}
.toc ol li::before {
  content: counter(toc, decimal-leading-zero);
  color: #c8943e; font-weight: 700;
  margin-right: 10px;
}
.toc ol li a { color: #1a1a1a; text-decoration: none; }
.toc ol li a:hover { text-decoration: underline; }

/* 6. Key takeaways --------------------------------------------------------- */
.key-takeaways {
  border: 1px solid #e8e8e8;
  border-top: 3px solid #1a1a1a;
  padding: 22px 26px;
  margin: 0 0 36px;
}
.key-takeaways .takeaways-label {
  font-family: 'Helvetica Neue', Arial, sans-serif;
  font-size: 11px; font-weight: 700;
  text-transform: uppercase; letter-spacing: 0.08em;
  color: #666; margin-bottom: 12px;
}
.key-takeaways ul { list-style: none; padding: 0; }
.key-takeaways ul li {
  font-size: 1rem; line-height: 1.6;
  padding: 8px 0 8px 24px;
  position: relative;
}
.key-takeaways ul li::before {
  content: "→";
  position: absolute; left: 0; top: 8px;
  color: #c8943e; font-weight: 700;
}

/* 7. Article body ---------------------------------------------------------- */
.article-body p { margin-bottom: 1.4em; font-size: 1rem; }
.article-body h2 {
  font-family: Georgia, serif;
  font-size: 1.55rem; font-weight: normal;
  margin: 2.4em 0 0.7em;
  padding-top: 0.4em;
  border-top: 1px solid #e8e8e8;
  scroll-margin-top: 20px;
}
.article-body h3 {
  font-family: 'Helvetica Neue', Arial, sans-serif;
  font-size: 1rem; font-weight: 700;
  margin: 1.8em 0 0.5em;
}
.article-body ul, .article-body ol { padding-left: 1.4em; margin-bottom: 1.4em; }
.article-body ul li, .article-body ol li { margin-bottom: 0.5em; font-size: 1rem; line-height: 1.65; }
.article-body strong { font-weight: 700; }
.article-body a { text-decoration: underline; text-underline-offset: 3px; }
.article-body table { width: 100%; border-collapse: collapse; margin: 1.5em 0; font-size: 0.92em; }
.article-body th, .article-body td { padding: 12px 16px; text-align: left; border-bottom: 1px solid #e8e8e8; vertical-align: top; }
.article-body th {
  font-family: 'Helvetica Neue', Arial, sans-serif;
  font-weight: 700; font-size: 0.85em;
  text-transform: uppercase; letter-spacing: 0.04em;
  background: #f8f8f8;
}
.article-body blockquote {
  border-left: 3px solid #c8943e;
  padding: 8px 0 8px 22px;
  margin: 1.8em 0;
  font-style: italic; color: #444;
  font-size: 1.05rem; line-height: 1.65;
}
.article-body figure { margin: 1.8em 0; }
.article-body figcaption {
  font-family: 'Helvetica Neue', Arial, sans-serif;
  font-size: 13px; color: #777; text-align: center;
  margin-top: 10px; font-style: italic;
}

/* 8. Reusable components --------------------------------------------------- */
.callout-box {
  background: #f8f7f4;
  border-left: 3px solid #1a1a1a;
  padding: 20px 24px;
  margin: 2em 0;
  font-size: 0.95rem;
}
.callout-box p { margin: 0 0 8px; }
.callout-box p:last-child { margin-bottom: 0; }
.callout-label {
  font-family: 'Helvetica Neue', Arial, sans-serif;
  font-weight: 700; font-size: 0.85em;
  text-transform: uppercase; letter-spacing: 0.04em;
  margin-bottom: 8px;
}
.cta-box {
  background: #f4f4f4;
  border-left: 3px solid #1a1a1a;
  padding: 24px 28px;
  margin: 2.4em 0;
  font-size: 0.95rem;
}
.cta-box p { margin-bottom: 12px; }
.cta-box p:last-child { margin-bottom: 0; }
.cta-box a { color: #1a1a1a; font-weight: 700; }

.article-body pre {
  background: #1a1a1a; color: #f4f4f4;
  padding: 18px 22px; border-radius: 4px;
  overflow-x: auto;
  font-family: ui-monospace, 'SF Mono', Menlo, Consolas, monospace;
  font-size: 13px; line-height: 1.55;
  margin: 1.6em 0;
}
.article-body code {
  font-family: ui-monospace, 'SF Mono', Menlo, Consolas, monospace;
  font-size: 0.92em;
  background: #f4f4f4; padding: 2px 6px; border-radius: 3px;
}
.article-body pre code { background: none; padding: 0; color: inherit; font-size: inherit; }

/* 9. FAQ block ------------------------------------------------------------- */
.faq { margin-top: 3em; }
.faq h2 {
  font-family: Georgia, serif;
  font-size: 1.55rem; font-weight: normal;
  margin-bottom: 1em;
  padding-top: 0.4em;
  border-top: 1px solid #e8e8e8;
}
.faq-item { padding: 18px 0; border-bottom: 1px solid #f0f0f0; }
.faq-item h3 {
  font-family: 'Helvetica Neue', Arial, sans-serif;
  font-size: 1.05rem; font-weight: 700;
  margin-bottom: 8px;
}
.faq-item p { margin: 0; font-size: 1rem; line-height: 1.65; }

/* 10. About author --------------------------------------------------------- */
.about-author {
  margin-top: 3em;
  padding: 26px 28px;
  background: #fafafa;
  border: 1px solid #e8e8e8;
  display: flex; gap: 18px; align-items: flex-start;
}
.about-author .avatar {
  width: 56px; height: 56px; border-radius: 50%;
  background: #1a1a1a; color: #fff;
  display: flex; align-items: center; justify-content: center;
  font-family: 'Helvetica Neue', Arial, sans-serif;
  font-size: 18px; font-weight: 700; flex-shrink: 0;
}
.about-author .about-body { flex: 1; }
.about-author .about-name {
  font-family: 'Helvetica Neue', Arial, sans-serif;
  font-size: 14px; font-weight: 700;
  margin-bottom: 2px;
}
.about-author .about-name a { color: #1a1a1a; text-decoration: none; }
.about-author .about-title {
  font-family: 'Helvetica Neue', Arial, sans-serif;
  font-size: 12px; color: #888; text-transform: uppercase; letter-spacing: 0.04em;
  margin-bottom: 10px;
}
.about-author .about-bio {
  font-size: 0.95rem; line-height: 1.6; color: #333;
}

/* 11. Related articles ----------------------------------------------------- */
.internal-links { margin-top: 2.8em; padding-top: 1.6em; border-top: 1px solid #e8e8e8; }
.internal-links h2 {
  font-family: Georgia, serif;
  font-size: 1.2rem; font-weight: normal;
  margin-bottom: 1.2em;
  border-top: none; padding-top: 0;
}
.internal-links ul { list-style: none; padding: 0; }
.internal-links ul li {
  padding: 12px 0; border-bottom: 1px solid #f0f0f0; font-size: 0.92rem;
}
.internal-links ul li:last-child { border-bottom: none; }
.internal-links ul li a {
  font-family: 'Helvetica Neue', Arial, sans-serif;
  font-weight: 700; text-decoration: none;
}
.internal-links ul li a:hover { text-decoration: underline; }
.internal-links ul li span { display: block; font-size: 0.87rem; color: #777; font-style: italic; margin-top: 2px; }

/* Articles index page ------------------------------------------------------ */
.articles-index { padding: 32px 0 0; }
.articles-index .index-intro {
  font-family: Georgia, serif;
  font-size: 1.1rem; color: #555; font-style: italic;
  max-width: 640px; margin-bottom: 36px;
}
.article-card {
  padding: 22px 0;
  border-bottom: 1px solid #e8e8e8;
}
.article-card:last-child { border-bottom: none; }
.article-card h2 {
  font-family: Georgia, serif;
  font-size: 1.4rem; font-weight: normal; line-height: 1.3;
  margin-bottom: 6px;
}
.article-card h2 a { color: #1a1a1a; text-decoration: none; }
.article-card h2 a:hover { text-decoration: underline; }
.article-card .card-meta {
  font-family: 'Helvetica Neue', Arial, sans-serif;
  font-size: 12px; color: #888;
  text-transform: uppercase; letter-spacing: 0.04em;
  margin-bottom: 10px;
}
.article-card .card-summary { font-size: 1rem; color: #444; line-height: 1.6; }

/* 12. Responsive ----------------------------------------------------------- */
@media (max-width: 600px) {
  .article-header h1 { font-size: 1.7rem; }
  .article-header { padding: 24px 0 20px; margin-bottom: 24px; }
  .article-subtitle { font-size: 1rem; margin-bottom: 16px; }
  .page-main { padding: 0 16px 60px; }
  .breadcrumb { padding: 12px 16px 0; }
  .site-nav { padding: 0 16px; }
  .article-summary, .key-takeaways, .toc, .callout-box, .cta-box { padding: 16px 18px; }
  .about-author { padding: 18px 20px; flex-direction: column; }
  .article-body table { display: block; overflow-x: auto; -webkit-overflow-scrolling: touch; }
  .article-body pre, .article-body code { word-break: break-all; overflow-wrap: break-word; }
  .internal-links ul li { font-size: 0.88rem; }
  .article-card h2 { font-size: 1.2rem; }
}