/* The About-page invitation: people first, one clear route into the community. */
.about-community.about-community-invitation { padding: 80px 0; scroll-margin-top: 100px; }
.community-invite-grid { display: grid; grid-template-columns: minmax(0,.9fr) minmax(0,1.1fr); grid-template-areas: 'intro photos' 'action photos'; column-gap: 64px; row-gap: 28px; align-items: center; }
.community-invite-intro { grid-area: intro; align-self: end; }
.community-invite-kicker { display: flex; align-items: center; gap: 8px; color: var(--secondary); font-size: 13px; font-weight: 600; margin: 0 0 20px; }
.community-invite-kicker svg { width: 18px; height: 18px; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.about-community-invitation h2 { font-size: clamp(36px,4vw,54px); line-height: 1.1; letter-spacing: -.045em; margin: 0 0 24px; }
.about-community-invitation h2 span { display: block; color: var(--accent); }
.community-invite-description { max-width: 43ch; margin: 0; color: var(--muted); font-size: 17px; line-height: 1.75; }
.community-invite-action { grid-area: action; align-self: start; }
.community-invite-welcome { color: var(--ink); font-size: 14px; font-weight: 500; margin: 0 0 16px; }
.community-invite-action .community-invite-cta { min-height: 52px; padding: 16px 24px; gap: 12px; }
.community-invite-cta .ui-icon { width: 20px; height: 20px; flex-basis: 20px; }
.community-invite-cta:focus-visible { outline: 3px solid var(--secondary); outline-offset: 5px; }
.community-invite-host { max-width: 46ch; margin: 24px 0 0; color: var(--muted); font-size: 12px; line-height: 1.75; }
.community-invite-host strong { color: var(--ink); font-weight: 500; }
.community-invite-photo { grid-area: photos; margin: 0; min-width: 0; }
.community-invite-photo img { display: block; width: 100%; height: auto; border-radius: 10px; background: var(--surface); }
@media(max-width:1100px) {
  .community-invite-grid { column-gap: 36px; grid-template-columns: minmax(0,1fr) minmax(0,1fr); }
  .about-community-invitation h2 { font-size: clamp(34px,4vw,44px); }
  .community-invite-description { font-size: 16px; }
}
@media(max-width:760px) {
  .about-community.about-community-invitation { padding: 48px 0; }
  .community-invite-grid { grid-template-columns: 1fr; grid-template-areas: 'intro' 'action' 'photos'; gap: 28px; }
  .community-invite-kicker { margin-bottom: 16px; }
  .about-community-invitation h2 { font-size: clamp(34px,7.2vw,48px); margin-bottom: 20px; }
  .community-invite-description { max-width: 52ch; font-size: 16px; line-height: 1.7; }
  .community-invite-photo img { border-radius: 8px; }
  .community-invite-host { max-width: 52ch; margin-top: 20px; }
}
@media(max-width:420px) {
  .community-invite-action .community-invite-cta { width: 100%; }
  .community-invite-welcome { text-align: center; }
}
@media(forced-colors:active) {
  .community-invite-kicker,.about-community-invitation h2 span { color: CanvasText; }
  .community-invite-cta { border: 1px solid ButtonText; }
}