/* ==========================================================================
   bryanelzey.com — Articles Components
   Built on css/tokens.css + css/styles.css. Load after both.
   ========================================================================== */

/* ---- Articles index ---------------------------------------------------- */
.articles-list { max-width: 46rem; }
.article-row {
  display: block;
  padding-block: 2rem;
  border-top: 1px solid var(--greige-border);
}
.article-row:first-of-type { padding-top: 0; border-top: none; }
.article-row-title {
  color: var(--espresso);
  font-weight: 600;
  letter-spacing: -0.015em;
  transition: color var(--duration-hover) ease;
}
.article-row:hover .article-row-title { color: var(--umber-muted); }
.article-row-deck {
  margin-top: 0.5rem;
  color: var(--espresso-soft);
  max-width: 42rem;
}
.article-row-meta {
  margin-top: 0.75rem;
  display: flex;
  flex-wrap: wrap;
  column-gap: 1.25rem;
  row-gap: 0.25rem;
  color: var(--umber-muted);
  letter-spacing: 0.05em;
}

/* ---- Article page ------------------------------------------------------ */
.article-header {
  padding-block: var(--section-pad) 0;
}
@media (min-width: 768px) {
  .article-header { padding-block: var(--section-pad-desktop) 0; }
}
.article-header .container { max-width: calc(46rem + 2 * var(--gutter)); }
.article-title {
  font-size: var(--headline-lg-m-size);
  line-height: var(--headline-lg-m-lh);
  letter-spacing: var(--headline-lg-m-ls);
  font-weight: var(--headline-lg-w);
  color: var(--espresso);
  margin-top: 0.25rem;
}
@media (min-width: 768px) {
  .article-title {
    font-size: var(--headline-lg-size);
    line-height: var(--headline-lg-lh);
    letter-spacing: var(--headline-lg-ls);
  }
}
.article-deck {
  margin-top: 1.25rem;
  color: var(--umber-muted);
  max-width: 42rem;
}
.article-meta {
  margin-top: 1.5rem;
  padding-bottom: 2rem;
  border-bottom: 1px solid var(--greige-border);
  display: flex;
  flex-wrap: wrap;
  column-gap: 1.25rem;
  row-gap: 0.25rem;
  color: var(--umber-muted);
  letter-spacing: 0.05em;
}

.article-body {
  padding-block: 3rem var(--section-pad);
}
@media (min-width: 768px) {
  .article-body { padding-block: 3.5rem var(--section-pad-desktop); }
}
.article-body .container { max-width: calc(46rem + 2 * var(--gutter)); }
.article-prose > p { color: var(--espresso-soft); }
.article-prose > p + p { margin-top: 1.375rem; }
.article-prose > p.lede { color: var(--espresso); }

/* Numbered essay sections */
.essay-part {
  margin-top: 3.5rem;
  border-top: 2px solid var(--espresso);
  padding-top: 1.5rem;
}
.essay-part-kicker {
  display: block;
  color: var(--umber-muted);
  letter-spacing: 0.08em;
  margin-bottom: 0.5rem;
}
.essay-part h2 {
  color: var(--espresso);
  font-weight: 600;
  margin-bottom: 1.25rem;
}
.essay-part > p { color: var(--espresso-soft); }
.essay-part > p + p { margin-top: 1.375rem; }

/* Callout line (pull-quote treatment) */
.essay-callout {
  margin-top: 1.75rem;
  color: var(--espresso) !important;
  font-weight: 500;
  border-left: 2px solid var(--espresso);
  padding-left: 1rem;
}
p + .essay-callout { margin-top: 1.75rem; }
.essay-part > .essay-callout + p { margin-top: 1.75rem; }

/* Positions list (Owner Positions essay) */
.position { margin-top: 2.25rem; }
.position h2 {
  color: var(--espresso);
  font-weight: 600;
  margin-bottom: 0.75rem;
}
.position > p { color: var(--espresso-soft); }
.position > p + p { margin-top: 1rem; }

/* Closing note */
.article-note {
  margin-top: 3.5rem;
  padding-top: 1.5rem;
  border-top: 1px solid var(--greige-border);
  color: var(--umber-muted);
}

/* Back link */
.article-back {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  color: var(--umber-muted);
  letter-spacing: 0.06em;
  transition: color var(--duration-hover) ease;
}
.article-back:hover { color: var(--espresso); }