.homepage {
  min-inline-size: 0;
}

.home-feature__grid {
  display: grid;
  grid-template-columns: minmax(0, 1.85fr) minmax(18rem, 1fr);
  align-items: start;
  gap: clamp(var(--space-24), 3vw, var(--space-48));
}

.home-feature__grid--lead-only {
  grid-template-columns: minmax(0, 1fr);
}

.home-lead-story {
  min-inline-size: 0;
}

.home-lead-story__link {
  display: block;
  color: inherit;
  text-decoration: none;
}

.home-lead-story__media {
  overflow: hidden;
  background: var(--color-surface-strong);
}

.home-lead-story__image {
  aspect-ratio: var(--card-image-ratio);
  inline-size: 100%;
  object-fit: cover;
}

/*
 * Homepage-only card-ratio override. This file is enqueued exclusively on
 * the front page (see editorial_core_enqueue_assets()), so this rule never
 * reaches Archive/Search/Tag or Single Article, which keep the frozen 16:10
 * card ratio from components.css regardless of the active profile.
 */
.article-card__media {
  aspect-ratio: var(--card-image-ratio);
}

.home-lead-story__body {
  padding-block: var(--space-24);
}

.home-story-context,
.home-section__eyebrow,
.home-story-date,
.home-digest__item time {
  color: var(--color-text-muted);
  font-size: 0.8125rem;
  font-weight: 700;
}

.home-story-context,
.home-section__eyebrow {
  margin: 0 0 var(--space-8);
  letter-spacing: 0.05em;
  text-transform: uppercase;
}

.home-lead-story__title {
  max-inline-size: 18ch;
  margin: 0;
  font-size: clamp(2rem, 4vw, 3.75rem);
  line-height: 1.05;
  letter-spacing: -0.04em;
}

.home-lead-story__excerpt {
  max-inline-size: 58ch;
  margin: var(--space-16) 0;
  color: var(--color-text-muted);
  font-size: 1.125rem;
  line-height: 1.55;
}

.home-secondary {
  padding-inline-start: clamp(var(--space-16), 2vw, var(--space-32));
  border-inline-start: 1px solid var(--color-border);
}

.home-secondary__title {
  margin: 0 0 var(--space-16);
  font-size: 1.25rem;
}

.home-secondary__list {
  display: grid;
  gap: var(--space-24);
}

.home-deep-archive__categories,
.home-digest__list {
  margin: 0;
  padding: 0;
  list-style: none;
}

.home-section + .home-section {
  margin-block-start: var(--space-96);
}

.home-section__heading {
  display: flex;
  align-items: end;
  justify-content: space-between;
  gap: var(--space-24);
  margin-block-end: var(--space-24);
}

.home-section__heading h2,
.home-deep-archive h2 {
  margin: 0;
  font-size: clamp(1.75rem, 3vw, 2.5rem);
  line-height: 1.1;
  letter-spacing: -0.03em;
}

.home-card-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--space-24);
}

.home-card-grid--count-1 {
  grid-template-columns: minmax(0, 32rem);
}

.home-card-grid--count-2 {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

/*
 * Side-by-side comparison card pattern (Editorial Core 0.3.0, Phase 9 Run
 * 004B). An allowlisted alternate Homepage card arrangement selected only
 * via `homepage.card_pattern` ("side-by-side-comparison") — never a public
 * or per-request choice. Declared after the count modifiers above so it
 * always wins the single-column full-width layout regardless of item count.
 */
.home-card-grid--comparison {
  grid-template-columns: minmax(0, 1fr);
  gap: var(--space-16);
}

.article-card--comparison .article-card__link {
  display: grid;
  grid-template-columns: minmax(10rem, 22rem) minmax(0, 1fr);
  gap: var(--space-24);
  align-items: start;
}

.article-card--comparison .article-card__media {
  margin: 0;
}

.article-card--comparison .article-card__body {
  padding-block: 0;
  min-inline-size: 0;
}

.article-card--comparison .article-card__title,
.article-card--comparison .article-card__excerpt {
  max-inline-size: none;
}

.home-lead-story__link:hover .home-lead-story__title {
  color: var(--color-link-hover);
}

.home-digest {
  display: grid;
  grid-template-columns: minmax(12rem, 0.7fr) minmax(0, 1.3fr);
  gap: var(--space-48);
  margin-block-start: var(--space-96);
  padding-block: var(--space-48);
  border-block: 1px solid var(--color-border);
}

.home-digest .home-section__heading {
  display: block;
  margin: 0;
}

.home-digest__item {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: var(--space-16);
  align-items: baseline;
  padding-block: var(--space-12);
  border-block-end: 1px solid var(--color-border);
}

.home-digest__item:first-child {
  padding-block-start: 0;
}

.home-digest__item a {
  color: var(--color-text);
  font-weight: 700;
}

/*
 * Explore the Archive Visual De-emphasis (PART 1 Capability Revision 007,
 * Editorial Core 0.5.5): was a bordered, filled-background card
 * (`border` + `background: var(--color-surface)` + `padding`) with a
 * 4-column grid of bordered/filled category tiles -- read as a detached,
 * visually-loud promotional CTA rather than a natural continuation of the
 * section above it. Replaced with a quiet hairline separator in the same
 * spirit as the existing `.home-digest` continuation block immediately
 * above this section (which uses a full `border-block`; this section
 * uses only `border-block-start` since it is the page's last section, so
 * the whitespace below it is left open rather than closed off) and plain
 * inline text navigation for the categories -- no outer box, no
 * filled panel, no per-category border/background, no shadow/gradient/
 * pill. Archive discovery purpose, category/archive links, the
 * older-content CTA, heading structure, and the underlying category/
 * archive query/data are all unchanged; only these presentation rules
 * changed.
 */
.home-deep-archive {
  display: grid;
  grid-template-columns: minmax(12rem, 0.7fr) minmax(0, 1.3fr);
  gap: var(--space-48);
  margin-block-start: var(--space-96);
  padding-block-start: var(--space-48);
  border-block-start: 1px solid var(--color-border);
}

.home-deep-archive__lede {
  margin: var(--space-8) 0 0;
  max-inline-size: 32rem;
  color: var(--color-text-muted);
}

.home-deep-archive__content {
  min-inline-size: 0;
}

.home-deep-archive__categories {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-8);
}

.home-deep-archive__categories a {
  font-weight: 600;
}

.home-deep-archive__categories li span[aria-hidden] {
  margin-inline-start: var(--space-8);
  color: var(--color-text-muted);
}

.home-deep-archive__link {
  display: inline-block;
  margin-block-start: var(--space-24);
  font-weight: 700;
}

.home-deep-archive__link::after {
  content: " \2192";
}

.home-empty-state {
  margin: 0;
  color: var(--color-text-muted);
}

@media (max-width: 64rem) {
  .home-feature__grid,
  .home-digest,
  .home-deep-archive {
    grid-template-columns: minmax(0, 1fr);
  }

  .home-secondary {
    padding-block-start: var(--space-24);
    padding-inline-start: 0;
    border-block-start: 1px solid var(--color-border);
    border-inline-start: 0;
  }

  .home-secondary__list {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .home-card-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  /*
   * Fix 001 (Run 004C): without this, the generic two-column rule above
   * and `.home-card-grid--comparison` (home.css, outside any media query)
   * share equal specificity, and this rule's later position in the
   * cascade let it silently win at tablet widths — forcing side-by-side
   * comparison cards into a two-column grid they were never designed for
   * and producing real content collision/horizontal overflow under actual
   * content (Run 004C Homepage tablet finding). Re-asserting the
   * single-column intent here, after the generic rule within the same
   * media query, restores it at this breakpoint without raising
   * specificity or touching the generic rule's own behavior for the
   * standard card pattern.
   */
  .home-card-grid--comparison {
    grid-template-columns: minmax(0, 1fr);
  }
}

@media (max-width: 48rem) {
  .home-card-grid,
  .home-secondary__list {
    grid-template-columns: minmax(0, 1fr);
  }

  .article-card--comparison .article-card__link {
    grid-template-columns: minmax(0, 1fr);
  }
}

@media (max-width: 40rem) {
  .home-taxonomy {
    margin-block: var(--space-32) var(--space-48);
  }

  .home-section + .home-section,
  .home-digest,
  .home-deep-archive {
    margin-block-start: var(--space-64);
  }

  .home-digest,
  .home-deep-archive {
    gap: var(--space-24);
  }

  .home-deep-archive {
    padding-block-start: var(--space-24);
  }

  .home-digest__item {
    grid-template-columns: minmax(0, 1fr);
    gap: var(--space-8);
  }
}