/* about page: only what Webflow classes cannot express; layout lives in the Designer (mm2a_*) */
.mm2a_prose h3 { font-family: var(--_🔠-typography---font--heading-serif); font-weight: 400; font-size: 1.5rem; line-height: 1.2; letter-spacing: 0; margin: 2.5rem 0 .75rem; }
.mm2a_prose h3:first-child { margin-top: 0; }
.mm2a_prose p { margin: 0 0 1.1rem; } .mm2a_prose p:last-child { margin-bottom: 0; }
.mm2a_prose a { color: #0b1f33; text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: .18em; text-decoration-color: rgba(11,31,51,.4); }
.mm2a_member-link:hover { text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: .18em; }
.mm2a_portrait, .mm2a_member-img { transition: transform .8s cubic-bezier(.16,1,.3,1); }
.mm2a_member:hover .mm2a_member-img { transform: scale(1.02); }
@media (max-width: 991px) { .mm2a_bio-side { position: static; } }
@media (prefers-reduced-motion: reduce) { .mm2a_portrait, .mm2a_member-img { transition: none; } }

/* Rhythm: a page head and the content it introduces are one group. The head's 3.5rem
   bottom padding is the interval; the following white section drops its own top padding so
   the two do not stack into a 184px hole. Tinted bands keep theirs (the color break separates). */
.mm2n_head + .mm2_section:not(.mm2_section-tint), .mm2r_head + .mm2_section:not(.mm2_section-tint) { padding-top: 0; }

/* Press rows (9/30): outlet logo replaces the typed source when a Source Logo exists; the
   typed badge is the fallback for items without one. Date sits in the third column. */
.mm2_press-card:has(.mm2_press-logo:not(.w-dyn-bind-empty)) .mm2_badge { display: none; }
.mm2_press-logo.w-dyn-bind-empty { display: none; }
.mm2_press-card:hover .mm2_press-logo { opacity: 1; }
.mm2_press-logo { transition: opacity .25s; }

/* ── Team: social buttons ─────────────────────────────────────────────── */
.mm2a_member-social-link { transition: color .25s, background-color .25s, border-color .25s; }
.mm2a_member-social-link:hover, .mm2a_member-social-link:focus-visible { color: #fff; background-color: #0b1f33; border-color: #0b1f33; }
.mm2a_member-social-link svg { display: block; }

/* ── Team: expanding bios (10/14) ─────────────────────────────────────────
   No popups. "Full bio" turns the card into a full-width profile at the foot of the grid
   (image left, bio right) and the other three tiles close ranks into one row above it, so the
   section grows in place and the page reflows around it. about.js does the motion as a FLIP:
   one layout change, then every card and portrait is translated/scaled back to where it was
   and released, while the profile text fades in. Without JS, :target shows the bio inline.
   Classes/layout are Webflow (mm2a_*); only states and motion live here. */
.mm2a_member { scroll-margin-top: 7.5rem; }
#team { scroll-margin-top: 6.5rem; } /* /team 301 lands here */
.mm2a_member-full { display: none; }
.mm2a_member-more { display: inline-flex; align-items: center; column-gap: .45rem; }
.mm2a_member-more::after { content: ""; width: .5rem; height: .5rem; border-right: 1px solid currentColor; border-bottom: 1px solid currentColor; transform: translateY(-2px) rotate(45deg); transition: transform .3s; }
.mm2a_member-more:hover { text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: .22em; }
.mm2a_member.is-open .mm2a_member-more::after, .mm2a_team:not(.is-js) .mm2a_member:target .mm2a_member-more::after { transform: translateY(2px) rotate(-135deg); }
.mm2a_member.is-open .mm2a_member-full, .mm2a_team:not(.is-js) .mm2a_member:target .mm2a_member-full { display: block; }
.mm2a_member.is-open .mm2a_member-bio, .mm2a_team:not(.is-js) .mm2a_member:target .mm2a_member-bio { display: none; }
.mm2a_member-full-text p { margin: 0 0 1rem; } .mm2a_member-full-text p:last-child { margin-bottom: 0; }
.mm2a_member-full-link { display: inline-block; margin-top: 1rem; color: #0b1f33; font-size: .9rem; text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: .2em; text-decoration-color: rgba(11,31,51,.4); }
.mm2a_member.is-open .mm2a_member-img { transform: none; } /* no hover zoom on the open portrait */

@media (min-width: 992px) {
  /* The open card drops to the end of the grid and spans it; the rest share one row. */
  .mm2a_team.has-open { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .mm2a_member.is-open, .mm2a_team:not(.is-js) .mm2a_member:target { order: 1; grid-column: 1 / -1; display: grid; grid-template-columns: minmax(0, 17rem) minmax(0, 1fr); column-gap: var(--spacing--space-large); row-gap: .85rem; align-items: start; padding-top: var(--spacing--space-small); border-top: 1px solid rgba(11,31,51,.14); margin-top: var(--spacing--space-tiny); }
  .mm2a_member.is-open > *, .mm2a_team:not(.is-js) .mm2a_member:target > * { grid-column: 2; }
  .mm2a_member.is-open > .mm2a_member-img, .mm2a_team:not(.is-js) .mm2a_member:target > .mm2a_member-img { grid-column: 1; grid-row: 1 / span 9; position: sticky; top: 7rem; }
  .mm2a_member.is-open .mm2a_member-full-text, .mm2a_team:not(.is-js) .mm2a_member:target .mm2a_member-full-text { max-width: 44rem; font-size: 1.02rem; line-height: 1.7; }
  .mm2a_member.is-open .mm2a_member-name, .mm2a_team:not(.is-js) .mm2a_member:target .mm2a_member-name { font-size: 2rem; }
  /* Tiles that are not open while another is: a quiet "tab" treatment. */
  .mm2a_team.has-open .mm2a_member:not(.is-open) .mm2a_member-img { filter: saturate(.85); transition: filter .4s, transform .8s cubic-bezier(.16,1,.3,1); }
  .mm2a_team.has-open .mm2a_member:not(.is-open):hover .mm2a_member-img { filter: none; }
}
@media (min-width: 768px) and (max-width: 991px) {
  .mm2a_member.is-open, .mm2a_team:not(.is-js) .mm2a_member:target { grid-column: 1 / -1; display: grid; grid-template-columns: minmax(0, 14rem) minmax(0, 1fr); column-gap: var(--spacing--space-small); row-gap: .75rem; align-items: start; }
  .mm2a_member.is-open > *, .mm2a_team:not(.is-js) .mm2a_member:target > * { grid-column: 2; }
  .mm2a_member.is-open > .mm2a_member-img, .mm2a_team:not(.is-js) .mm2a_member:target > .mm2a_member-img { grid-column: 1; grid-row: 1 / span 9; }
}
/* While about.js is animating, transforms come from the Web Animations API; keep CSS out of the way. */
.mm2a_member.is-flipping, .mm2a_member.is-flipping .mm2a_member-img { transition: none; }
.mm2a_member.is-flipping > :not(.mm2a_member-img) { transition: none; }
@media (prefers-reduced-motion: reduce) { .mm2a_member-more::after { transition: none; } }