/* =========================================================
   Dios y Razón — long-form article styles
   Loaded after styles.css on individual article pages.
   ========================================================= */

.article-shell {
  padding-top: var(--s-4);
  padding-bottom: var(--s-6);
}

.article-header {
  max-width: var(--reading);
  margin: 0 auto var(--s-4);
}
.article-header .eyebrow { color: var(--brown); }
.article-header h1 {
  font-size: clamp(2rem, 4vw + 1rem, 3.5rem);
  line-height: 1.1;
  margin: var(--s-1) 0 var(--s-2);
}
.article-header .article-subtitle {
  font-family: var(--ff-display);
  font-size: clamp(1.1rem, 1.4vw + 0.7rem, 1.5rem);
  line-height: 1.45;
  color: var(--charcoal);
  font-weight: 500;
  margin: 0 0 var(--s-3);
}
.article-meta {
  display: flex;
  flex-wrap: wrap;
  gap: var(--s-2);
  align-items: center;
  font-size: var(--fs-sm);
  color: var(--charcoal);
  padding-top: var(--s-2);
  border-top: 1px solid var(--rule);
}
.article-meta strong { color: var(--ink); font-weight: 600; }
.article-meta span.dot { color: var(--taupe); }

/* Layout: TOC sidebar + article body */
.article-layout {
  display: grid;
  gap: var(--s-5);
  grid-template-columns: 1fr;
}
@media (min-width: 1000px) {
  .article-layout {
    grid-template-columns: 220px minmax(0, var(--reading));
    justify-content: center;
    gap: var(--s-6);
  }
}

.toc {
  font-size: var(--fs-sm);
}
@media (min-width: 1000px) {
  .toc {
    position: sticky;
    top: 84px;
    align-self: start;
    max-height: calc(100vh - 100px);
    overflow-y: auto;
    padding-right: var(--s-2);
    border-right: 1px solid var(--rule);
  }
}
.toc h2 {
  font-family: var(--ff-body);
  font-size: var(--fs-xs);
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--brown);
  margin: 0 0 var(--s-2);
}
.toc ol {
  list-style: none;
  padding: 0;
  margin: 0;
  display: grid;
  gap: 0.5rem;
  counter-reset: toc;
}
.toc ol li { counter-increment: toc; }
.toc ol a {
  color: var(--charcoal);
  text-decoration: none;
  display: block;
  padding-block: 0.2rem;
  line-height: 1.4;
}
.toc ol a::before {
  content: counter(toc, decimal-leading-zero) "  ";
  color: var(--taupe);
  font-variant-numeric: tabular-nums;
  font-size: var(--fs-xs);
}
.toc ol a:hover { color: var(--brown); }

/* Article prose */
.prose {
  font-family: var(--ff-reading);
  font-size: 1.1875rem;
  line-height: 1.7;
  color: var(--ink);
  max-width: var(--reading);
  margin: 0 auto;
}
.prose > * + * { margin-top: 1.1em; }
.prose p { margin: 0; }
.prose h2 {
  font-family: var(--ff-display);
  font-size: clamp(1.5rem, 2vw + 0.8rem, 2rem);
  line-height: 1.2;
  margin-top: 2.2em !important;
  margin-bottom: 0.5em;
  color: var(--ink);
  scroll-margin-top: 90px;
}
.prose h3 {
  font-family: var(--ff-display);
  font-size: 1.4rem;
  margin-top: 1.8em !important;
  margin-bottom: 0.3em;
  color: var(--ink);
  scroll-margin-top: 90px;
}
.prose blockquote {
  margin: 1.4em 0;
  padding: 0.2em 0 0.2em var(--s-3);
  border-left: 3px solid var(--bronze);
  font-style: italic;
  color: var(--charcoal);
  font-size: 1.125rem;
}
.prose blockquote cite {
  display: block;
  margin-top: 0.5rem;
  font-style: normal;
  font-size: var(--fs-xs);
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--brown);
}
.prose ul, .prose ol {
  padding-left: 1.4rem;
  margin: 1em 0;
}
.prose li + li { margin-top: 0.4em; }
.prose strong { color: var(--ink); font-weight: 600; }
.prose em { font-style: italic; }
.prose a { color: var(--brown); text-decoration-color: var(--bronze); text-decoration-thickness: 1px; }
.prose a:hover { color: var(--bronze-deep); }
.prose hr {
  border: 0;
  border-top: 1px solid var(--rule);
  margin: 2.4em auto;
  width: 56px;
}
.prose .pull-quote {
  font-family: var(--ff-display);
  font-size: 1.6rem;
  line-height: 1.35;
  color: var(--brown);
  border: none;
  padding: 1.2em 0;
  text-align: center;
  font-style: italic;
}

.related {
  max-width: var(--container);
  margin: var(--s-7) auto var(--s-4);
}
.related h2 {
  text-align: center;
  margin-bottom: var(--s-3);
}