/*
 * UCCS — components.css — v5
 *
 * Sections:
 *   8.  Page titles & section intro
 *   9.  Article meta
 *   10. Article list (section pages)
 *   11. Homepage grid
 *   12. Article page
 *   13. Author bio
 *   14. Reading progress
 *   15. Responsive — grid & list
 *   16. Standalone pages (Despre / Contact / Donează)
 *   17. Featured hero (homepage top story)
 *   18. Page header (section list pages) — legacy stub
 *   19. Section strip (homepage bottom nav)
 *   20. Shortcode components — lead, contact-info
 *   21. Section card & sections grid
 *   22. Pull quote
 *   23. Team member
 *   24. CTA box
 *   25. Shortcode — box
 *   26. Shortcode — cols layout
 *   27. Nerdnote — coloured callout boxes
 *   28. Section header (canonical editorial header)
 */

/* ============================================================
 *  8. PAGE TITLES & SECTION INTRO
 * ============================================================ */

.section-intro {
  font-family: var(--font-ui);
  font-size: var(--text-sm);
  color: var(--color-text-muted);
  margin-bottom: var(--space-10);
  padding-bottom: var(--space-6);
  border-bottom: 1px solid var(--color-divider);
  line-height: 1.6;
}

main > h1 {
  font-family: var(--font-display);
  font-size: var(--text-2xl);
  font-weight: 400;
  letter-spacing: -0.01em;
  margin-bottom: var(--space-4);
}

/* ============================================================
 * 9. ARTICLE META
 * ============================================================ */

.article-meta {
  font-family: var(--font-ui);
  font-size: var(--text-xs);
  color: var(--color-text-muted);
  letter-spacing: 0.04em;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-1) var(--space-2);
  margin-top: var(--space-1);
}

.article-meta .meta-section {
  text-transform: uppercase;
  letter-spacing: 0.07em;
  font-weight: 600;
}

.article-meta a          { color: var(--color-text-muted); text-decoration: none; }
.article-meta a:hover    { color: var(--color-primary); }
.article-meta .meta-sep  { color: var(--color-text-faint); user-select: none; }

/* Author byline — used on cards (both grid and list) */
.article-author {
  font-family: var(--font-ui);
  font-size: var(--text-xs);
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--color-primary);
  text-decoration: none;
  position: relative; /* lifts above card overlay */
  z-index: 1;
  transition: color var(--transition-fast);
}

a.article-author:hover {
  color: var(--color-text);
  text-decoration: underline;
}

/* Subtitle — list cards only */
.article-subtitle {
  font-family: var(--font-body);
  font-size: var(--text-sm);
  font-style: italic;
  font-weight: 400;
  color: var(--color-text-muted);
  line-height: 1.5;
  margin: 0;
}

/* ============================================================
 * 10. ARTICLE LIST — section pages
 * ============================================================ */

.article-list,
.articles-list {
  list-style: none;
  margin-top: var(--space-6);
}

/* Card shell — position:relative needed for stretched-link overlay */
.article-list li,
.articles-list > article,
.article-card {
  position: relative;
  display: flex;
  flex-direction: row;
  min-height: unset; /* image aspect ratio drives card height now */
  gap: 0;
  margin-bottom: var(--space-5);
  background: var(--color-surface);
  border: 1px solid var(--color-divider);
  border-radius: var(--radius-lg);
  overflow: hidden;
  transition:
  border-color var(--transition-interactive),
  box-shadow var(--transition-interactive),
  transform var(--transition-interactive);
}

.article-list li:hover,
.article-card:hover {
  border-color: var(--color-primary);
  box-shadow: var(--shadow-lg);
  transform: translateY(-2px);
}

/* Thumbnail */
.article-thumb-link {
  display: block;
  width: 35%;
  flex-shrink: 0;
  overflow: hidden;
  aspect-ratio: 16 / 9;
  align-self: flex-start; /* don't stretch — let aspect-ratio control height */
}

.article-thumb {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.article-thumb-placeholder {
  width: 35%;
  aspect-ratio: 16 / 9;
  background: linear-gradient(135deg, var(--color-surface-offset) 0%, var(--color-divider) 100%);
}

/* Info panel */
.article-list .article-info,
.articles-list .article-info {
  flex: 1;
  min-width: 0;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: var(--space-4) var(--space-5);
  gap: var(--space-1);
}

/* Title */
.article-title {
  font-family: var(--font-display);
  font-size: clamp(var(--text-lg), 2vw, var(--text-xl));
  font-weight: 500;
  line-height: 1.2;
  margin: 0;
}

.article-title a {
  color: var(--color-text);
  text-decoration: none;
  transition: color var(--transition-fast);
}

.article-title a:hover { color: var(--color-primary); }

/* Stretched-link overlay — makes full card clickable via the title anchor */
.article-title a::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 0;
}

/* Excerpt — kept for backwards compatibility */
.article-excerpt {
  font-size: var(--text-sm);
  color: var(--color-text-muted);
  line-height: 1.5;
  margin: 0;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

/* ============================================================
 * 11. HOMEPAGE GRID
 * ============================================================ */

/* Optional section label above a grid block */
.grid-section-header {
  display: flex;
  align-items: center;
  gap: var(--space-4);
  margin-bottom: var(--space-6);
  padding-top: var(--space-2);
}

.grid-section-title,
.articles-heading {
  font-family: var(--font-ui);
  font-size: var(--text-xs);
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--color-text);
  margin: 0 0 var(--space-6);
}

.grid-section-title::after {
  content: '';
  display: inline-block;
  width: 2rem;
  height: 1px;
  background: var(--color-divider);
  margin-left: var(--space-3);
  vertical-align: middle;
}

/* Grid wrapper */
.article-grid,
.articles-grid {
  list-style: none;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--space-6) var(--space-5);
  margin-top: 0;
}

/* Card shell — position:relative needed for stretched-link overlay */
.article-grid-item,
.articles-grid > article,
.article-grid-card {
  position: relative;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  border-radius: var(--radius-lg);
  border: 1px solid var(--color-divider);
  background: var(--color-surface);
  transition:
  border-color var(--transition-interactive),
  box-shadow var(--transition-interactive),
  transform var(--transition-interactive);
}

.article-grid-item:hover,
.article-grid-card:hover {
  border-color: var(--color-primary);
  box-shadow: var(--shadow-lg);
  transform: translateY(-2px);
}

/* Thumbnail */
.article-grid-thumb-link {
  display: block;
  width: 100%;
  overflow: hidden;
  aspect-ratio: 16 / 9;
  flex-shrink: 0;
}

.article-grid-thumb {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.article-grid-thumb-placeholder {
  width: 100%;
  aspect-ratio: 16 / 9;
  background: linear-gradient(135deg, var(--color-surface-offset) 0%, var(--color-divider) 100%);
  display: block;
}

/* Info panel */
.article-grid-info {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
  padding: var(--space-5);
  flex: 1;
}

/* Title */
.article-grid-title {
  font-family: var(--font-display);
  font-size: clamp(var(--text-lg), 2vw, var(--text-xl));
  font-weight: 500;
  line-height: 1.2;
  margin: 0;
}

.article-grid-title a {
  color: var(--color-text);
  text-decoration: none;
  transition: color var(--transition-fast);
}

.article-grid-title a:hover { color: var(--color-primary); }

/* Stretched-link overlay — makes full card clickable via the title anchor */
.article-grid-title a::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 0;
}

/* ============================================================
 *  13. AUTHOR BIO
 * ============================================================ */

.author-header {
  display: flex;
  gap: var(--space-5);
  align-items: flex-start;
  margin-bottom: var(--space-10);
  padding-bottom: var(--space-8);
  border-bottom: 1px solid var(--color-divider);
}

.author-avatar {
  width: 112px;
  height: 112px;
  object-fit: cover;
  border-radius: var(--radius-full);
  flex-shrink: 0;
  border: 2px solid var(--color-border);
}

.author-bio h1 { font-family: var(--font-display); font-size: var(--text-xl); font-weight: 500; margin-bottom: var(--space-2); }
.author-bio p  { font-family: var(--font-ui); font-size: var(--text-sm); color: var(--color-text-muted); line-height: 1.6; margin-bottom: 0; max-width: 52ch; }

.author-social { display: flex; flex-wrap: wrap; gap: var(--space-2); margin-top: var(--space-3); }

.author-social-link {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 34px;
  height: 34px;
  border-radius: var(--radius-md);
  border: 1px solid var(--color-border);
  color: var(--color-text-muted);
  text-decoration: none;
  flex-shrink: 0;
  transition: color var(--transition-fast), border-color var(--transition-fast), background var(--transition-fast);
}

.author-social-link:hover {
  color: var(--color-primary);
  border-color: var(--color-primary);
  background: var(--color-primary-highlight);
}

.author-social-link svg { width: 16px; height: 16px; display: block; flex-shrink: 0; }

.author-social-link--cv {
  width: auto;
  padding-inline: var(--space-3);
  gap: var(--space-1);
  font-family: var(--font-ui);
  font-size: var(--text-xs);
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

.author-content { margin-top: var(--space-10); max-width: var(--content-default); }
.author-content p  { margin-bottom: var(--space-5); }
.author-content h2 { font-family: var(--font-display); font-size: var(--text-xl); font-weight: 500; margin-top: var(--space-10); margin-bottom: var(--space-3); }
.author-content a  { color: var(--color-primary); }

.author-metrics {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: var(--space-4);
  margin-top: var(--space-10);
  margin-bottom: var(--space-10);
}

.author-metric {
  display: flex;
  flex-direction: column;
  gap: var(--space-1);
  padding: var(--space-5) var(--space-6);
  background: var(--color-surface);
  border: 1px solid var(--color-divider);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-sm);
}

.author-metric-value { font-family: var(--font-display); font-size: var(--text-2xl); font-weight: 500; letter-spacing: -0.02em; color: var(--color-text); line-height: 1; }
.author-metric-label { font-family: var(--font-ui); font-size: var(--text-xs); font-weight: 600; letter-spacing: 0.08em; text-transform: uppercase; color: var(--color-text-muted); }

/* ============================================================
 *  14. READING PROGRESS
 * ============================================================ */

.reading-progress {
  position: fixed;
  top: 0; left: 0;
  width: calc(var(--progress, 0) * 100%);
  height: 2px;
  background: var(--color-primary);
  z-index: 100;
  pointer-events: none;
  transition: width 0.1s linear;
}

/* ============================================================
 * 15. RESPONSIVE — grid & list
 * ============================================================ */

@media (min-width: 768px) {
  .article-grid,
  .articles-grid { gap: var(--space-8) var(--space-6); }
}

@media (max-width: 767px) and (min-width: 480px) {
  .article-grid,
  .articles-grid { grid-template-columns: repeat(2, 1fr); }
}

@media (max-width: 479px) {
  .article-grid,
  .articles-grid { grid-template-columns: 1fr; }

  .article-list li,
  .articles-list > article,
  .article-card {
    flex-direction: column;
    min-height: unset;
  }

  .article-thumb-link {
    width: 100%;
    aspect-ratio: 16 / 9;
    align-self: auto;
    order: -1;
  }
}

@media (max-width: 640px) { .author-metrics { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 380px) { .author-metrics { grid-template-columns: 1fr; } }

@media (max-width: 600px) {
  article > h1 { font-size: var(--text-xl); }
  .author-header { flex-direction: column; }
}

@media (hover: none) { tbody tr:hover td { background: transparent; } }

/* ============================================================
 *  17. FEATURED HERO — top of homepage
 * ============================================================ */

.featured-hero {
  display: grid;
  grid-template-columns: 1fr 1fr;
  min-height: 400px;
  border: 1px solid var(--color-divider);
  border-radius: var(--radius-lg);
  overflow: hidden;
  text-decoration: none;
  color: inherit;
  background: var(--color-surface);
  margin-bottom: var(--space-12);
  transition: box-shadow var(--transition-interactive);
}

.featured-hero:hover { box-shadow: var(--shadow-lg); }

.featured-hero--text { grid-template-columns: 1fr; min-height: 280px; }

.featured-hero--text .featured-hero-body { padding: var(--space-12) var(--space-10); max-width: var(--content-article); }
.featured-hero--text .featured-hero-title { font-size: var(--text-3xl); }

.featured-hero-media { overflow: hidden; position: relative; background: var(--color-surface-offset); }

.featured-hero-img {
  width: 100%; height: 100%;
  object-fit: cover; display: block;
  transition: opacity var(--transition-interactive);
}

.featured-hero:hover .featured-hero-img { opacity: 0.92; }

.featured-hero-body {
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: var(--space-4);
  padding: var(--space-10);
}

.featured-hero-eyebrow { display: flex; align-items: center; gap: var(--space-3); }

.featured-hero-label {
  font-family: var(--font-ui);
  font-size: var(--text-xs);
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--color-primary);
}

.featured-hero-badge {
  font-family: var(--font-ui);
  font-size: var(--text-xs);
  font-weight: 600;
  letter-spacing: 0.07em;
  color: var(--color-text-faint);
  background: var(--color-surface-offset);
  padding: 2px var(--space-2);
  border-radius: var(--radius-full);
}

.featured-hero-title {
  font-family: var(--font-display);
  font-size: var(--text-2xl);
  font-weight: 500;
  line-height: 1.15;
  letter-spacing: -0.01em;
  color: var(--color-text);
  text-wrap: balance;
  margin: 0;
  transition: color var(--transition-fast);
}

.featured-hero:hover .featured-hero-title { color: var(--color-primary); }

.featured-hero-desc {
  font-family: var(--font-body);
  font-size: var(--text-base);
  color: var(--color-text-muted);
  line-height: 1.65;
  margin: 0;
  max-width: 44ch;
}

.featured-hero-footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-4);
  margin-top: var(--space-2);
}

.featured-hero-meta {
  font-family: var(--font-ui);
  font-size: var(--text-xs);
  color: var(--color-text-faint);
  letter-spacing: 0.03em;
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-1) var(--space-2);
  align-items: center;
}

.featured-hero-cta {
  font-family: var(--font-ui);
  font-size: var(--text-sm);
  font-weight: 600;
  color: var(--color-primary);
  letter-spacing: 0.02em;
  white-space: nowrap;
  flex-shrink: 0;
  transition: color var(--transition-fast);
}

.featured-hero:hover .featured-hero-cta { color: var(--color-primary-hover); }

@media (max-width: 767px) {
  .featured-hero { grid-template-columns: 1fr; min-height: 0; }
  .featured-hero-media { aspect-ratio: 16 / 9; }
  .featured-hero-body  { padding: var(--space-6); gap: var(--space-3); }
  .featured-hero-title { font-size: var(--text-xl); }
  .featured-hero-desc  { display: none; }
  .featured-hero-badge { display: none; }
  .featured-hero--text .featured-hero-body  { padding: var(--space-8) var(--space-6); }
  .featured-hero--text .featured-hero-title { font-size: var(--text-xl); }
}

/* ============================================================
 *  18. PAGE HEADER — legacy stub (real styles in section 28)
 * ============================================================ */

/* ============================================================
 *  19. SECTION STRIP — editorial section nav (bottom of homepage)
 * ============================================================ */

.section-strip {
  display: flex;
  align-items: center;
  gap: var(--space-5);
  padding-block: var(--space-6);
  border-top: 1px solid var(--color-divider);
  margin-top: var(--space-10);
  flex-wrap: wrap;
}

.section-strip-heading { font-family: var(--font-ui); font-size: var(--text-xs); font-weight: 700; letter-spacing: 0.12em; text-transform: uppercase; color: var(--color-text-faint); flex-shrink: 0; }
.section-strip-list    { display: flex; flex-wrap: wrap; gap: var(--space-2); list-style: none; padding: 0; margin: 0; }

.section-strip-item {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  text-decoration: none;
  padding: var(--space-2) var(--space-4);
  border: 1px solid var(--color-divider);
  border-radius: var(--radius-full);
  transition: border-color var(--transition-fast), background var(--transition-fast);
}

.section-strip-item:hover { border-color: var(--color-primary); background: var(--color-primary-highlight); }

.section-strip-name {
  font-family: var(--font-ui);
  font-size: var(--text-xs);
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--color-text-muted);
  transition: color var(--transition-fast);
}

.section-strip-item:hover .section-strip-name { color: var(--color-primary); }

.section-strip-count {
  font-family: var(--font-ui);
  font-size: var(--text-xs);
  color: var(--color-text-faint);
  background: var(--color-surface-offset);
  padding: 1px var(--space-2);
  border-radius: var(--radius-full);
  min-width: 1.4rem;
  text-align: center;
}

/* ============================================================
 *  20. SHORTCODE COMPONENTS — lead, contact-info
 * ============================================================ */

.sc-lead {
  font-family: var(--font-display);
  font-size: var(--text-xl);
  font-weight: 400;
  line-height: 1.55;
  color: var(--color-text);
  max-width: 54ch;
  text-wrap: pretty;
  margin-bottom: var(--space-10);
  padding-bottom: var(--space-8);
  border-bottom: 1px solid var(--color-divider);
}

.sc-contact-row {
  display: flex;
  align-items: baseline;
  gap: var(--space-4);
  padding-block: var(--space-4);
  border-bottom: 1px solid var(--color-divider);
}

.sc-contact-row:first-of-type { border-top: 1px solid var(--color-divider); }

.sc-contact-label {
  font-family: var(--font-ui);
  font-size: var(--text-xs);
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--color-text-faint);
  flex-shrink: 0;
  min-width: 8rem;
}

.sc-contact-value {
  font-family: var(--font-body);
  font-size: var(--text-base);
  color: var(--color-text);
  text-decoration: none;
  transition: color var(--transition-fast);
}

.sc-contact-value:hover { color: var(--color-primary); }

@media (max-width: 480px) {
  .sc-contact-row { flex-direction: column; gap: var(--space-1); }
  .sc-contact-label { min-width: 0; }
}

/* ============================================================
 *  21. SECTION CARD & SECTIONS GRID
 * ============================================================ */

.sections-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(min(280px, 100%), 1fr));
  gap: var(--space-4);
  margin-block: var(--space-8);
}

.section-card {
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
  padding: var(--space-6);
  background: var(--color-surface);
  border: 1px solid var(--color-divider);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-sm);
  transition: box-shadow var(--transition-interactive), background var(--transition-interactive);
}

.section-card:hover { background: var(--color-surface-2); box-shadow: var(--shadow-md); }
.section-card--link { text-decoration: none; color: inherit; cursor: pointer; }
.section-card--link:hover { color: inherit; }

.section-card[data-section]::before {
  content: '';
  display: block;
  width: 2rem;
  height: 2px;
  background: var(--color-primary);
  border-radius: var(--radius-full);
  opacity: 0.5;
}

.section-label { font-family: var(--font-body, sans-serif); font-size: var(--text-xs); font-weight: 600; letter-spacing: 0.08em; text-transform: uppercase; color: var(--color-primary); }
.section-card .section-title { font-family: var(--font-display, serif); font-size: var(--text-lg); font-weight: 500; line-height: 1.2; color: var(--color-text); text-wrap: balance; }
.section-card .section-desc  { font-family: var(--font-body, sans-serif); font-size: var(--text-base); line-height: 1.65; color: var(--color-text-muted); max-width: 48ch; flex: 1; }

.section-card-cta { font-family: var(--font-ui); font-size: var(--text-xs); font-weight: 600; letter-spacing: 0.06em; color: var(--color-primary); margin-top: var(--space-1); transition: color var(--transition-fast); }
.section-card--link:hover .section-card-cta { color: var(--color-primary-hover); }

@media (max-width: 640px) { .sections-grid { grid-template-columns: 1fr; gap: var(--space-3); } .section-card { padding: var(--space-5); } }

/* ============================================================
 *  22. PULL QUOTE
 * ============================================================ */

.pull-quote {
  margin-block: var(--space-10);
  padding-inline-start: var(--space-6);
  border-left: 2px solid var(--color-primary);
}

.pull-quote p { font-family: var(--font-display, serif); font-size: var(--text-xl); font-weight: 400; font-style: italic; line-height: 1.3; color: var(--color-text); max-width: 42ch; text-wrap: balance; }
.pull-quote cite { display: block; margin-top: var(--space-3); font-family: var(--font-body, sans-serif); font-size: var(--text-sm); font-style: normal; color: var(--color-text-muted); letter-spacing: 0.02em; }

/* ============================================================
 *  25. SHORTCODE — box
 * ============================================================ */

.sc-box { padding: var(--space-6); background: var(--color-surface); border: 1px solid var(--color-divider); border-radius: var(--radius-lg); margin-block: var(--space-6); font-size: var(--text-sm); line-height: 1.7; color: var(--color-text-muted); }
.sc-box--warning { background: color-mix(in srgb, var(--color-gold) 8%, var(--color-bg)); border-color: color-mix(in srgb, var(--color-gold) 30%, var(--color-divider)); }
.sc-box--info    { background: color-mix(in srgb, var(--color-primary) 6%, var(--color-bg)); border-color: color-mix(in srgb, var(--color-primary) 20%, var(--color-divider)); color: var(--color-text); }

/* ============================================================
 *  26. SHORTCODE — cols layout
 * ============================================================ */

.sc-cols { display: grid; grid-template-columns: var(--col-left, 50%) var(--col-right, 50%); gap: var(--space-8); margin-block: var(--space-6); align-items: start; }
.sc-col > *:first-child { margin-top: 0; }
.sc-col > *:last-child  { margin-bottom: 0; }

@media (max-width: 640px) { .sc-cols { grid-template-columns: 1fr; } }

/* ============================================================
 *  27. NERDNOTE — coloured callout boxes
 * ============================================================ */

.nerdnote { margin-block: var(--space-6); border-radius: var(--radius-lg); border: 1px solid var(--color-border); overflow: hidden; }

.nerdnote__label { display: flex; align-items: center; gap: var(--space-2); padding: var(--space-2) var(--space-4); background: var(--color-surface-offset); font-family: var(--font-ui); font-size: var(--text-sm); font-weight: 700; color: var(--color-text); margin: 0; }
.nerdnote__label::before { content: 'ⓘ'; font-size: 1em; line-height: 1; color: var(--color-text-muted); }

.nerdnote__body { padding: var(--space-3) var(--space-4); background: var(--color-surface); font-family: var(--font-ui); font-size: var(--text-sm); line-height: 1.65; color: var(--color-text); }
.nerdnote__body > *:last-child { margin-bottom: 0; }
.nerdnote__body p { margin-bottom: var(--space-2); max-width: unset; }
.nerdnote__body ul, .nerdnote__body ol { margin-bottom: var(--space-2); padding-left: var(--space-4); }
.nerdnote__body li { margin-bottom: var(--space-1); }
.article-body .nerdnote p { margin-bottom: 0; }

.nerdnote--info    { border-color: color-mix(in srgb, var(--color-primary) 25%, var(--color-border)); }
.nerdnote--info .nerdnote__label { background: var(--color-primary-highlight); color: var(--color-primary); }
.nerdnote--info .nerdnote__label::before { color: var(--color-primary); }
.nerdnote--info .nerdnote__body { background: color-mix(in srgb, var(--color-primary-highlight) 30%, var(--color-surface)); }

.nerdnote--warning { border-color: color-mix(in srgb, var(--color-gold) 30%, var(--color-border)); }
.nerdnote--warning .nerdnote__label { background: color-mix(in srgb, var(--color-gold) 15%, var(--color-surface-offset)); color: var(--color-gold); }
.nerdnote--warning .nerdnote__label::before { content: '⚠'; color: var(--color-gold); }
.nerdnote--warning .nerdnote__body { background: color-mix(in srgb, var(--color-gold) 6%, var(--color-surface)); }

.nerdnote--error { border-color: color-mix(in srgb, var(--color-error) 30%, var(--color-border)); }
.nerdnote--error .nerdnote__label { background: color-mix(in srgb, var(--color-error) 12%, var(--color-surface-offset)); color: var(--color-error); }
.nerdnote--error .nerdnote__label::before { content: '✕'; color: var(--color-error); }
.nerdnote--error .nerdnote__body { background: color-mix(in srgb, var(--color-error) 5%, var(--color-surface)); }

.nerdnote--success, .nerdnote--tip { border-color: color-mix(in srgb, var(--color-success) 30%, var(--color-border)); }
.nerdnote--success .nerdnote__label, .nerdnote--tip .nerdnote__label { background: color-mix(in srgb, var(--color-success) 12%, var(--color-surface-offset)); color: var(--color-success); }
.nerdnote--success .nerdnote__label::before, .nerdnote--tip .nerdnote__label::before { content: '✓'; color: var(--color-success); }
.nerdnote--success .nerdnote__body, .nerdnote--tip .nerdnote__body { background: color-mix(in srgb, var(--color-success) 5%, var(--color-surface)); }

/* ============================================================
 *  28. SECTION HEADER — canonical editorial header
 * ============================================================ */

.section-header {
  border-bottom: 2px solid var(--color-text);
  padding-bottom: var(--space-8);
  margin-bottom: var(--space-10);
}

.section-header__eyebrow { font-family: var(--font-body); font-size: var(--text-xs); font-weight: 600; letter-spacing: 0.12em; text-transform: uppercase; color: var(--color-gold); margin-bottom: var(--space-2); }
.section-header__title   { font-family: var(--font-display); font-size: var(--text-3xl); font-weight: 500; color: var(--color-text); line-height: 1.08; letter-spacing: -0.01em; margin-bottom: var(--space-3); text-wrap: balance; }
.section-header__lead    { font-size: var(--text-base); color: var(--color-text-muted); max-width: 58ch; line-height: 1.7; margin-bottom: var(--space-6); }
.section-header__lead p  { margin: 0; }

.section-header__stats { display: flex; align-items: center; gap: var(--space-5); flex-wrap: wrap; }

.stat-item  { display: flex; flex-direction: column; gap: 1px; }
.stat-value { font-family: var(--font-display); font-size: var(--text-xl); font-weight: 500; color: var(--color-primary); line-height: 1.1; }
.stat-label { font-family: var(--font-body); font-size: var(--text-xs); color: var(--color-text-faint); letter-spacing: 0.06em; text-transform: uppercase; }

/* Editor stat — links to author page */
.stat-editor-link {
  color: var(--color-primary);
  text-decoration: none;
  font-family: var(--font-display);
  font-size: var(--text-xl);
  font-weight: 500;
  line-height: 1.1;
  transition: color var(--transition-fast);
}

.stat-editor-link:hover {
  color: var(--color-primary-hover);
  text-decoration: underline;
  text-underline-offset: 3px;
}

.stat-divider { width: 1px; height: 2.5rem; background: var(--color-divider); flex-shrink: 0; }

@media (max-width: 640px) { .section-header__title { font-size: var(--text-2xl); } }

@media (max-width: 520px) {
  .section-header__stats { display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-4); }
  .stat-divider { display: none; }
}

/* ============================================================
 *  29. VALUES SHORTCODE — sc-values
 * ============================================================ */

.sc-values {
  display: flex;
  flex-direction: column;
  gap: 0;
  margin-block: var(--space-8);
}

.sc-values-item {
  display: grid;
  grid-template-columns: 14ch 1fr;
  gap: var(--space-6) var(--space-10);
  align-items: baseline;
  padding-block: var(--space-6);
  border-bottom: 1px solid var(--color-divider);
}

.sc-values-item:first-child { border-top: 1px solid var(--color-divider); }

.sc-values-title {
  font-family: var(--font-display);
  font-size: var(--text-lg);
  font-weight: 500;
  color: var(--color-text);
  margin: 0;
  line-height: 1.2;
}

.sc-values-body {
  font-family: var(--font-body);
  font-size: var(--text-base);
  line-height: 1.75;
  color: var(--color-text-muted);
  margin: 0;
  max-width: 62ch;
}

@media (max-width: 640px) {
  .sc-values-item {
    grid-template-columns: 1fr;
    gap: var(--space-2);
  }
}

/* ============================================================
 *  30. SECTIONS-ABOUT SHORTCODE — sc-sections-about
 * ============================================================ */

.sc-sections-about {
  display: flex;
  flex-direction: column;
  gap: 0;
  margin-block: var(--space-8);
}

.sc-sections-about-row {
  display: grid;
  grid-template-columns: 14ch 1fr;
  grid-template-rows: auto auto;
  gap: var(--space-1) var(--space-10);
  align-items: baseline;
  padding-block: var(--space-6);
  border-bottom: 1px solid var(--color-divider);
}

.sc-sections-about-row:first-child { border-top: 1px solid var(--color-divider); }

.sc-sections-about-meta {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  grid-row: 1;
  grid-column: 1;
}

.sc-sections-about-name {
  font-family: var(--font-display);
  font-size: var(--text-lg);
  font-weight: 500;
  color: var(--color-text);
  text-decoration: none;
  transition: color var(--transition-fast);
}

.sc-sections-about-name:hover { color: var(--color-primary); }

.sc-sections-about-count {
  font-family: var(--font-ui);
  font-size: var(--text-xs);
  color: var(--color-text-faint);
  background: var(--color-surface-offset);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-full);
  padding: 1px var(--space-2);
}

.sc-sections-about-tagline {
  font-family: var(--font-display);
  font-size: var(--text-base);
  font-style: italic;
  color: var(--color-text-muted);
  margin: 0;
  grid-row: 1;
  grid-column: 2;
  align-self: center;
}

.sc-sections-about-desc {
  font-family: var(--font-body);
  font-size: var(--text-sm);
  line-height: 1.7;
  color: var(--color-text-faint);
  margin: 0;
  max-width: 62ch;
  grid-row: 2;
  grid-column: 2;
}

@media (max-width: 640px) {
  .sc-sections-about-row {
    grid-template-columns: 1fr;
    grid-template-rows: auto auto auto;
    gap: var(--space-1);
  }
  .sc-sections-about-meta     { grid-column: 1; }
  .sc-sections-about-tagline  { grid-column: 1; grid-row: 2; }
  .sc-sections-about-desc     { grid-column: 1; grid-row: 3; }
}