/* ========================================
   MMGD BRANDING PROJECT SURFACES
======================================== */

.brand-project-index {
  display: grid;
  gap: var(--brand-section-gap);
}

.brand-project-index .project-archive__masthead {
  display: grid;
  gap: 18px;
  padding-bottom: 20px;
  border-bottom: var(--brand-border-width) solid var(--brand-panel-line);
}

.brand-project-index .project-archive__masthead-copy {
  max-width: 50rem;
}

.brand-project-index .page-title {
  font-family: var(--brand-title-font);
  font-size: clamp(2.8rem, 5vw, 4.8rem);
  letter-spacing: var(--brand-title-tracking);
  line-height: 0.96;
}

.brand-project-index .page-text {
  max-width: 38rem;
  font-family: var(--brand-body-font);
  font-size: var(--brand-body-size);
  line-height: var(--brand-body-line-height);
}

.brand-project-index .project-archive__tools {
  display: grid;
  gap: 18px;
}

.brand-project-index .project-archive-list {
  display: grid;
  gap: 14px;
}

.brand-project-card .project-archive-entry__link {
  display: grid;
  gap: var(--brand-card-gap);
  min-height: 100%;
  text-decoration: none;
}

.brand-project-card.brand-card--framed .project-archive-entry__link,
.brand-project-card.brand-card--poster .project-archive-entry__link {
  min-height: var(--brand-card-min-height);
}

.brand-project-card.brand-card--lined {
  border-left-width: max(4px, var(--brand-border-width));
}

.brand-project-card.brand-card--poster .project-archive-entry__title {
  max-width: 16ch;
}

.brand-project-card.brand-card--poster .project-archive-entry__summary {
  max-width: 34rem;
}

.brand-showcase {
  display: grid;
  gap: clamp(22px, 3vw, 34px);
}

.brand-showcase__header {
  display: grid;
  gap: 14px;
  padding-bottom: 18px;
  border-bottom: var(--brand-border-width) solid var(--brand-panel-line);
}

.brand-showcase__grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 18px;
}

.brand-showcase-card__inner {
  min-height: 100%;
}

.brand-showcase-card__copy {
  display: grid;
  gap: 12px;
}

.brand-showcase-card__projects {
  display: grid;
  gap: 8px;
  padding-top: 8px;
  border-top: var(--brand-border-width) solid color-mix(in srgb, var(--brand-panel-line) 74%, transparent);
}

.brand-showcase-card__projects a {
  color: var(--text);
  text-decoration: none;
}

.brand-showcase-card__projects a:hover,
.brand-showcase-card__projects a:focus-visible {
  color: var(--brand-accent-strong);
}

@media (max-width: 900px) {
  .brand-showcase__grid {
    grid-template-columns: 1fr;
  }
}