@import url('./ambient-gradient.css?v=15e172f9b3');
@import url('./redesign.css?v=680663b928');

/* About the people making the club; portraits carry the page's personality. */
.about-redesign .home-footer-links {
  gap: 0;
}

.about-redesign .home-footer-links :is(a, button) {
  min-height: var(--touch-target);
  padding-block: var(--space-2xs);
}

.home-redesign main > .about-intro {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: var(--about-column-gap);
  align-items: start;
  padding-block: var(--layout-page-top) var(--layout-chapter);
}

.about-intro h1 {
  margin: 0;
  font-size: var(--nd-hero-size);
  font-weight: 500;
  letter-spacing: -0.057em;
  line-height: var(--leading-tight);
  text-wrap: balance;
}

.about-story-copy {
  max-width: var(--about-copy-width);
  color: var(--nd-muted);
}

.about-story-copy .about-intro-lead {
  color: var(--nd-text);
  font-size: var(--text-lg);
}

.home-redesign main > .about-team {
  padding-block: 0 var(--layout-chapter);
}

.about-team h2 {
  margin-bottom: var(--layout-head-gap);
}

.about-team-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: var(--spacing-fields);
}

.about-portrait {
  overflow: hidden;
  aspect-ratio: 1;
  border-radius: var(--radius-md);
  background:
    radial-gradient(ellipse at var(--about-light-x) var(--about-light-y),
      rgb(var(--ambient-mint-rgb) / 32%), transparent 62%),
    radial-gradient(ellipse at 8% 110%, var(--about-light-lime), transparent 72%),
    var(--nd-panel);
}

.about-avatar {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 1;
  object-fit: cover;
}

.about-person h3 {
  margin-top: var(--spacing-content);
  font-size: var(--text-2xl);
}

.about-person p {
  margin-top: var(--spacing-related);
  color: var(--nd-muted);
  font-size: var(--text-sm);
}

.about-person .about-person-role {
  margin-top: var(--spacing-label);
  color: var(--nd-text);
}

.home-redesign main > .about-join {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  gap: var(--about-column-gap);

  /* Divider spans the text column, like the rules on the home page and the
     guide list; a border would also cover the side gutters of the section. */
  background: linear-gradient(var(--nd-line), var(--nd-line)) top center / calc(100% - 2 * var(--nd-gutter)) 1px no-repeat;
  padding-block: var(--spacing-groups) var(--layout-page-bottom);
}

.about-join p {
  max-width: var(--about-copy-width);
  margin-top: var(--spacing-related);
  color: var(--nd-muted);
}

.about-story-copy p + p {
  margin-top: var(--spacing-related);
}

/* Legacy bookmarks retain a usable fixed destination even without JavaScript. */
.about-rules-redirect {
  display: none;
  max-width: var(--home-width);
  margin: 0 auto;
  padding: var(--space-xs) var(--nd-gutter);
}

.about-rules-redirect:target {
  display: block;
}

.about-rules-redirect a {
  text-decoration: underline;
}

@media (width > 768px) {
  .about-redesign .nav a {
    padding-block: var(--space-2xs);
  }
}

@media (width <= 900px) {
  .home-redesign main > :is(.about-intro, .about-join) {
    grid-template-columns: minmax(0, 1fr);
    gap: var(--space-xs);
  }

  .about-team-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    row-gap: var(--spacing-fields);
  }

  .about-join > button {
    justify-self: start;
  }
}

@media (width <= 600px) {
  .about-team-grid {
    grid-template-columns: minmax(0, 1fr);
    row-gap: var(--spacing-content);
  }

  .about-person {
    display: grid;
    grid-template-columns: var(--about-mobile-avatar) minmax(0, 1fr);
    gap: var(--spacing-related) var(--spacing-content);
    align-items: center;
  }

  .about-person h3 {
    margin-top: 0;
    font-size: var(--text-2xl);
  }

  .about-person > p {
    grid-column: 1 / -1;
    margin-top: 0;
    font-size: var(--text-base);
  }
}

@media (width <= 1200px) {
  .about-redesign { --about-column-gap: var(--spacing-groups); }
}

@media (width <= 900px) {
  .about-redesign { --about-column-gap: var(--spacing-content); }
}