/*
 * Ember Orange accent layer
 *
 * Orange guides the eye through editorial structure. Gold remains the signal
 * for measurements, proof, citations, and links. Major section headings use
 * the deeper Ember Orange so long reading pages have a decorative rhythm.
 */

/* Editorial page openings */
:is(
  .article-hub-hero,
  .case-hub-hero,
  .system-hub-hero,
  .experiment-hub-hero,
  .proof-hub-hero,
  .use-case-hub-hero,
  .use-case-taxonomy-header,
  .stats-hub-hero,
  .stat-detail-hero,
  .glossary-hub-hero,
  .glossary-term-hero,
  .about-hero,
  .member-detail-hero,
  .art-header,
  .case-detail-hero,
  .system-detail-hero,
  .experiment-detail-hero,
  .use-case-detail-hero
) {
  border-top-color: var(--ember-orange);
}

/* Older layouts get the same opening cue without changing their structure. */
:is(
  .archive-header,
  .contact-hero,
  .fieldnote-hub-hero,
  .fl-hero,
  .prop-header
) {
  padding-left: var(--space-5);
  border-left: 3px solid var(--ember-orange);
}

/* Small orange text on light surfaces uses a darker accessible companion. */
:is(
  .article-hub-hero__eyebrow,
  .case-hub-hero__eyebrow,
  .system-hub-hero__eyebrow,
  .experiment-hub-hero__eyebrow,
  .proof-hub-hero__eyebrow,
  .use-case-hub-hero__eyebrow,
  .use-case-taxonomy-header__eyebrow,
  .stats-hub-hero__eyebrow,
  .stat-detail-hero__eyebrow,
  .glossary-hub-hero__eyebrow,
  .glossary-term-hero__eyebrow,
  .about-hero__eyebrow,
  .member-detail-hero__eyebrow,
  .art-header__type,
  .case-detail-hero__eyebrow,
  .system-detail-hero__eyebrow,
  .experiment-detail-hero__eyebrow,
  .use-case-detail-hero__eyebrow,
  .archive-header__eyebrow,
  .contact-hero__eyebrow,
  .fieldnote-hub-hero__eyebrow,
  .fl-hero__eyebrow,
  .dir-hero__eyebrow
) {
  color: var(--ember-ink);
}

/* Major H2s pair a strong editorial color with a restrained rule flourish. */
:is(
  .home-section__label,
  .article-hub-section__title,
  .case-hub-section__title,
  .system-hub-section__title,
  .experiment-hub-section__title,
  .proof-hub-section__title,
  .use-case-hub-section__title,
  .stats-hub-section__title,
  .stat-detail-section__title,
  .about-section__title,
  .member-detail-section__title,
  .case-detail-section__title,
  .system-detail-section__title,
  .experiment-detail-section__title,
  .use-case-detail-section__title,
  .glossary-term-section__title,
  .art-section__heading,
  .week-section__title,
  .week-detail-section h2,
  .week-two-reads h2,
  .fl-section__heading
) {
  position: relative;
  padding-left: var(--space-4);
  border-left: 3px solid currentColor;
  color: var(--ember-ink);
  letter-spacing: -0.015em;
  text-wrap: balance;
}

:is(
  .home-section__label,
  .article-hub-section__title,
  .case-hub-section__title,
  .system-hub-section__title,
  .experiment-hub-section__title,
  .proof-hub-section__title,
  .use-case-hub-section__title,
  .stats-hub-section__title,
  .stat-detail-section__title,
  .about-section__title,
  .member-detail-section__title,
  .case-detail-section__title,
  .system-detail-section__title,
  .experiment-detail-section__title,
  .use-case-detail-section__title,
  .glossary-term-section__title,
  .art-section__heading,
  .week-section__title,
  .week-detail-section h2,
  .week-two-reads h2,
  .fl-section__heading
)::after {
  content: "";
  display: block;
  width: clamp(3.75rem, 9vw, 7rem);
  height: 2px;
  margin-top: 0.38em;
  background: linear-gradient(90deg, currentColor, rgba(166, 75, 26, 0.08));
}

.art-section__subheading {
  color: var(--forest-heading);
}

/* The home page carries the accent through both light and dark sections. */
.home-hero__eyebrow {
  color: var(--ember-ink);
}

:is(
  .home-weekly-feature__label,
  .home-proof-feature__kicker,
  .home-field-note__label,
  .home-proof-feature__evidence span,
  .week-hub-hero__eyebrow,
  .week-detail-hero__eyebrow
) {
  color: var(--ember-orange);
}

.home-metric {
  position: relative;
  overflow: hidden;
  border-top: 3px solid var(--gold-primary);
}

.home-metric:nth-child(even) {
  border-top-color: var(--ember-orange);
}

.home-prop-grid .case-study-card:nth-child(even) {
  border-top-color: var(--ember-orange);
}

.home-featured-article {
  border-left-color: var(--ember-orange);
}

/* Repeat the two-color rhythm in hub metric rows without recoloring the data. */
:is(
  .article-hub-metric,
  .case-hub-metric,
  .system-hub-metric,
  .experiment-hub-metric,
  .proof-hub-metric,
  .use-case-hub-metric,
  .stats-hub-metric
) {
  border-top: 3px solid var(--gold-primary);
}

:is(
  .article-hub-metric,
  .case-hub-metric,
  .system-hub-metric,
  .experiment-hub-metric,
  .proof-hub-metric,
  .use-case-hub-metric,
  .stats-hub-metric
):nth-child(even) {
  border-top-color: var(--ember-orange);
}

@media (max-width: 640px) {
  :is(
    .archive-header,
    .contact-hero,
    .fieldnote-hub-hero,
    .fl-hero,
    .prop-header
  ) {
    padding-left: var(--space-4);
  }

  :is(
    .home-section__label,
    .article-hub-section__title,
    .case-hub-section__title,
    .system-hub-section__title,
    .experiment-hub-section__title,
    .proof-hub-section__title,
    .use-case-hub-section__title,
    .stats-hub-section__title,
    .stat-detail-section__title,
    .about-section__title,
    .member-detail-section__title,
    .case-detail-section__title,
    .system-detail-section__title,
    .experiment-detail-section__title,
    .use-case-detail-section__title,
    .glossary-term-section__title,
    .art-section__heading,
    .week-section__title,
    .week-detail-section h2,
    .week-two-reads h2,
    .fl-section__heading
  ) {
    padding-left: var(--space-3);
  }
}