.community-page {
  --community-deep: var(--purple-deep);
}

.community-page .hero,
.community-page .page-hero {
  color: #fff;
  background: var(--purple);
  overflow: hidden;
  position: relative;
}

.community-page .hero {
  display: flex;
  align-items: center;
  padding: clamp(24px, 6vh, 54px) 0;
  min-height: min(calc(50vh - var(--nav-height)), calc(var(--hero-max-height) / 2));
  min-height: min(calc(50svh - var(--nav-height)), calc(var(--hero-max-height) / 2));
}

.community-page .hero::after {
  content: "";
  position: absolute;
  width: 320px;
  height: 320px;
  right: -120px;
  top: -160px;
  border: 44px solid var(--cyan);
  border-radius: var(--radius-round);
}

.community-page .hero-grid {
  display: grid;
  grid-template-columns: 1.12fr .88fr;
  gap: 45px;
  align-items: end;
  position: relative;
  z-index: 1;
}

.community-page .hero h1,
.community-page .page-hero h1 {
  max-width: 760px;
  margin: 0 0 20px;
  font-size: var(--text-display);
  line-height: .98;
}

.community-page .hero p:not(.eyebrow),
.community-page .page-hero p:not(.eyebrow) {
  max-width: 610px;
  margin: 0;
  color: var(--on-dark);
  font-size: var(--text-lead);
}

/* Eyebrows: purple on light sections (components.css), cyan on the dark ones. */
.community-page .hero .eyebrow,
.community-page .page-hero .eyebrow,
.community-page .impact .eyebrow,
.community-page .band .eyebrow {
  color: var(--cyan);
}

.community-page .actions {
  margin-top: 28px;
}

.community-page .hero-art {
  height: 180px;
  position: relative;
}

.community-page .bubble {
  position: absolute;
  display: grid;
  place-items: center;
  border-radius: var(--radius-round);
  text-align: center;
  font-weight: 700;
  line-height: 1.12;
}

.community-page .bubble.one {
  width: 88px;
  height: 88px;
  top: 4px;
  left: 7%;
  font-size: var(--text-sm);
  color: var(--purple);
  background: #fff;
}

.community-page .bubble.two {
  width: 106px;
  height: 106px;
  right: 6%;
  top: 34px;
  font-size: var(--text-sm);
  color: #fff;
  background: var(--orange);
}

.community-page .bubble.three {
  width: 64px;
  height: 64px;
  left: 36%;
  bottom: 0;
  font-size: var(--text-xs);
  color: var(--purple);
  background: var(--cyan);
}

.community-page main > section:not(.hero):not(.page-hero):not(.co) {
  padding: 76px 0;
}

.community-page .heading {
  display: flex;
  align-items: end;
  justify-content: space-between;
  gap: 32px;
  margin-bottom: 36px;
}

.community-page .heading > p {
  max-width: 390px;
  margin: 0;
  color: var(--muted);
}

.community-page main h2 {
  max-width: 720px;
  margin: 0;
  color: var(--community-deep);
  font-size: var(--text-h2);
  line-height: 1.08;
}

.community-page h3 {
  margin: 0 0 10px;
  color: var(--community-deep);
  font-size: var(--text-lg);
  line-height: 1.2;
}

.community-page .routes {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 12px;
}

.community-page .route,
.community-page .story,
.community-page .tile {
  border: 1px solid var(--line);
  background: #fff;
}

.community-page .route {
  min-height: 236px;
  display: flex;
  flex-direction: column;
  padding: 22px;
  border-top: 4px solid var(--cyan);
  transition: transform .18s, box-shadow .18s;
}

.community-page .route:hover,
.community-page .route:focus-visible,
.community-page .story:hover,
.community-page .story:focus-visible {
  transform: translateY(-3px);
  box-shadow: var(--shadow);
}

.community-page .route p,
.community-page .story p,
.community-page .tile p {
  margin: 0;
  color: var(--muted);
}

.community-page .route .icon {
  display: grid;
  place-items: center;
  width: var(--ds-icon-sm);
  height: var(--ds-icon-sm);
  margin-bottom: 20px;
  border-radius: var(--radius-md);
  background: var(--purple-tint);
  color: var(--purple);
}

.community-page .route .icon svg {
  width: 22px;
  height: 22px;
}

.community-page .route:nth-child(2) .icon { background: var(--cyan-tint); color: var(--cyan-ink); }
.community-page .route:nth-child(3) .icon { background: var(--orange-tint); color: var(--orange-deep); }
.community-page .route:nth-child(4) .icon { background: var(--purple-tint); color: var(--purple); }
.community-page .route:nth-child(5) .icon { background: var(--cyan-tint); color: var(--cyan-ink); }

.community-page .link {
  display: flex;
  align-items: flex-end;
  min-height: 3.1em;
  margin-top: auto;
  padding-top: 20px;
  color: var(--purple);
  font-weight: 700;
}

.community-page .impact {
  color: #fff;
  background: var(--purple);
}

.community-page .band,
.community-page .cta {
  color: #fff;
  background: var(--purple);
}

.community-page .impact h2,
.community-page .band h2,
.community-page .cta h2 {
  color: #fff;
}

.community-page .impact p:not(.eyebrow),
.community-page .band p:not(.eyebrow),
.community-page .cta p:not(.eyebrow) {
  color: var(--on-dark);
}

.community-page .impact-grid {
  display: grid;
  grid-template-columns: 1.15fr .85fr;
  gap: 48px;
  align-items: center;
}

.community-page .impact-card,
.community-page .quote,
.community-page .notice {
  padding: 30px;
  border: 1px solid rgba(255, 255, 255, .22);
  background: rgba(255, 255, 255, .08);
}

.community-page blockquote,
.community-page .quote {
  margin: 0;
  font-size: var(--text-quote);
  line-height: 1.12;
}

.community-page .impact-card small {
  display: block;
  margin-top: 24px;
  color: var(--on-dark);
}

.community-page .stories,
.community-page .tiles {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 14px;
}

.community-page .story {
  min-height: 210px;
  padding: 25px;
  transition: transform .18s, box-shadow .18s;
}

.community-page .story .eyebrow {
  color: var(--orange);
}

.community-page .band,
.community-page .cta {
  text-align: center;
}

.community-page .band h2,
.community-page .cta h2 {
  margin: auto;
}

.community-page .page-hero {
  padding: 54px 0 70px;
}

.community-page .crumbs {
  margin-bottom: 36px;
  color: var(--on-dark);
  font-size: var(--text-md);
}

.community-page .crumbs a {
  color: #fff;
  text-decoration: underline;
}

.community-page .content {
  padding-top: 76px;
  padding-bottom: 76px;
}

.community-page .split {
  display: grid;
  grid-template-columns: .7fr 1.3fr;
  gap: 60px;
}

.community-page .side-label {
  max-width: 220px;
  margin: 0;
  color: var(--purple);
  font-size: var(--text-lead);
  font-weight: 700;
}

.community-page .split aside img {
  display: block;
  width: 100%;
  aspect-ratio: 4 / 5;
  object-fit: cover;
  border-radius: var(--radius-lg);
  margin-bottom: 16px;
}

.community-page .split h2 {
  margin-bottom: 18px;
}

.community-page .list {
  margin-top: 30px;
  border-top: 1px solid var(--line);
}

.community-page .item {
  display: grid;
  grid-template-columns: .75fr 1.25fr;
  gap: 20px;
  padding: 18px 0;
  border-bottom: 1px solid var(--line);
}

.community-page .item span {
  color: var(--muted);
}

.community-page .tiles {
  grid-template-columns: repeat(2, 1fr);
  margin-top: 30px;
}

.community-page .tile {
  padding: 21px;
}

.community-page .form-card {
  display: grid;
  gap: 9px;
  padding: 28px;
  color: var(--ink);
  background: #fff;
}

.community-page .form-card label {
  margin-top: 5px;
  font-size: var(--text-md);
  font-weight: 700;
}

.community-page .form-card input,
.community-page .form-card select,
.community-page .form-card textarea {
  width: 100%;
  min-height: var(--ds-button-sm);
  padding: 10px 12px;
  border: 1px solid var(--line);
  border-radius: var(--radius-xs);
  color: var(--ink);
  background: #fff;
  font: inherit;
}

.community-page .form-card textarea {
  min-height: 110px;
  resize: vertical;
}

.community-page .form-card .button {
  justify-self: start;
  margin-top: 10px;
}

.community-page .notice {
  color: #fff;
}

.community-page .notice p {
  margin-bottom: 0;
  color: var(--on-dark);
}

@media (max-width: 1000px) {
  .community-page .routes {
    grid-template-columns: repeat(3, 1fr);
  }
}

@media (max-width: 760px) {
  .community-page .hero-grid,
  .community-page .impact-grid,
  .community-page .split {
    grid-template-columns: 1fr;
    gap: 34px;
  }

  .community-page .hero-art {
    max-width: 410px;
  }

  .community-page .heading {
    display: block;
  }

  .community-page .heading > p {
    margin-top: 16px;
  }

  .community-page .routes,
  .community-page .stories,
  .community-page .tiles {
    grid-template-columns: 1fr 1fr;
  }

  .community-page .item {
    grid-template-columns: 1fr;
    gap: 5px;
  }
}

@media (max-width: 500px) {
  .community-page .page-hero h1 {
    font-size: var(--text-4xl);
  }

  .community-page .hero-art {
    height: 150px;
  }

  .community-page .bubble.two {
    right: 0;
  }

  .community-page .routes,
  .community-page .stories,
  .community-page .tiles {
    grid-template-columns: 1fr;
  }

  .community-page .form-card {
    padding: 20px;
  }
}

/* Half-height hero variant (plain page-hero pages only, not the community.html hero-grid) */
.community-page .page-hero--half {
  display: flex;
  align-items: center;
  padding: clamp(24px, 6vh, 54px) 0;
  min-height: min(calc(50vh - var(--nav-height)), calc(var(--hero-max-height) / 2));
  min-height: min(calc(50svh - var(--nav-height)), calc(var(--hero-max-height) / 2));
}

.community-page .page-hero--half h1 {
  font-size: var(--text-h1);
}

.community-page .page-hero--half p:not(.eyebrow) {
  font-size: var(--text-base);
}

@media (max-width: 500px) {
  .community-page .page-hero--half h1 {
    font-size: var(--text-3xl);
  }
}

/* WordPress version: the Volunteer form is sent (inc/contact-handler.php)
   and reports its outcome; text links inside copy. */
.community-page .split--no-photo {
  grid-template-columns: minmax(0, 860px);
}

.community-page .split-more a,
.community-page .split p a,
.community-page .item span a {
  color: var(--purple);
  font-weight: 700;
  text-decoration: underline;
  text-underline-offset: 3px;
}

.community-page .impact .impact-note {
  margin-top: 18px;
  font-size: var(--text-base);
}

.community-page .impact-note a {
  color: #fff;
  font-weight: 700;
  text-decoration: underline;
  text-underline-offset: 3px;
}

.community-page .form-card {
  border-radius: var(--radius-lg);
}

.community-page .form-card .optional {
  color: var(--muted);
  font-weight: 400;
}

.community-page .form-card input:focus-visible,
.community-page .form-card select:focus-visible,
.community-page .form-card textarea:focus-visible {
  outline: 3px solid var(--cyan);
  outline-offset: 1px;
}

.community-page .form-card .consent {
  display: flex;
  gap: 10px;
  align-items: flex-start;
  margin: 8px 0 4px;
  font-weight: 400;
}

.community-page .form-card .consent input {
  flex: 0 0 auto;
  width: 19px;
  min-height: 0;
  height: 19px;
  margin: 2px 0 0;
  padding: 0;
  accent-color: var(--purple);
}

.community-page .honeypot {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip-path: inset(50%);
}

.community-page .turnstile {
  min-height: 65px;
}

.community-page .form-status {
  min-height: 0;
  font-size: var(--text-md);
}

.community-page .form-status.is-sent {
  padding: 12px 14px;
  border-left: 4px solid var(--cyan-deep);
  background: var(--cyan-tint);
}

.community-page .form-status.is-error {
  padding: 12px 14px;
  border-left: 4px solid var(--orange-deep);
  background: var(--orange-tint);
}

.community-page .form-status:empty {
  display: none;
}

/* Community overview: route cards and "Community in action" stories are
   links; stories are real Chapter News (photo, "Topic آ· date"). */
.community-page .route,
.community-page .story {
  border-radius: var(--radius-lg);
  color: inherit;
  text-decoration: none;
}

.community-page .route:focus-visible,
.community-page .story:focus-visible {
  outline: 3px solid var(--cyan);
  outline-offset: 2px;
}

.community-page .story--news {
  display: flex;
  flex-direction: column;
  padding: 0;
  overflow: hidden;
}

.community-page .story--news > :not(.story-photo) {
  margin-left: 24px;
  margin-right: 24px;
}

/* Darker orange: the brand orange is too light for small text on white. */
.community-page .story .eyebrow {
  color: var(--orange-deep);
}

.community-page .story--news .eyebrow {
  display: block;
  margin-top: 20px;
  margin-bottom: 8px;
}

.community-page .story--news .link {
  min-height: 0;
  margin-bottom: 22px;
}

.community-page .story-photo {
  display: block;
  aspect-ratio: 16 / 9;
  overflow: hidden;
  background: var(--purple);
}

.community-page .story-photo img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.community-page .story-photo--logo {
  display: grid;
  place-items: center;
}

.community-page .story-photo--logo img {
  width: 58%;
  height: auto;
  object-fit: contain;
}

.community-page .band .actions {
  justify-content: center;
}

/* Phones: keep the hero's cyan ring in the corner, clear of the heading. */
@media (max-width: 760px) {
  .community-page .hero::after {
    width: 200px;
    height: 200px;
    right: -120px;
    top: -130px;
    border-width: 28px;
  }
}

/* Outreach & Partnerships: audience tiles each link to the form with their
   interest pre-selected. */
.community-page .tile {
  display: flex;
  flex-direction: column;
  border-radius: var(--radius-lg);
}

.community-page .tile-link {
  margin-top: auto;
  padding-top: 16px;
  color: var(--purple);
  font-weight: 700;
}

.community-page .tile-link:hover,
.community-page .tile-link:focus-visible {
  text-decoration: underline;
  text-underline-offset: 3px;
}

.community-page .split-more {
  margin: 24px 0 0;
  color: var(--muted);
}

/* Students & Early Career: upcoming academic events, student-member figure. */
.community-page .campus-events {
  display: grid;
  gap: 10px;
  margin: 0 0 24px;
  padding: 0;
  list-style: none;
}

.community-page .campus-events li {
  display: flex;
  flex-wrap: wrap;
  gap: 6px 16px;
  align-items: baseline;
  padding: 18px 22px;
  border: 1px solid var(--line);
  border-left: 4px solid var(--orange);
  border-radius: var(--radius-lg);
  background: #fff;
}

.community-page .campus-events a {
  color: var(--community-deep);
  font-size: var(--text-lead);
  font-weight: 700;
}

.community-page .campus-events a:hover,
.community-page .campus-events a:focus-visible {
  text-decoration: underline;
  text-underline-offset: 3px;
}

.community-page .campus-events-label {
  color: var(--orange-deep);
  font-size: var(--text-xs);
  font-weight: 700;
  letter-spacing: var(--tracking-label);
  text-transform: uppercase;
}

.community-page .campus-events-meta {
  color: var(--muted);
}

.community-page .impact-grid--single {
  grid-template-columns: minmax(0, 760px);
}

.community-page .impact-card--stat {
  border-radius: var(--radius-lg);
}

.community-page .impact-card--stat b {
  display: block;
  color: var(--cyan);
  font-size: var(--text-number);
  line-height: 1;
}

.community-page .impact .impact-card--stat p {
  margin: 10px 0 18px;
  color: #fff;
  font-size: var(--text-lg);
  font-weight: 700;
}

.community-page .impact-card--stat a {
  color: #fff;
  font-weight: 700;
  text-decoration: underline;
  text-underline-offset: 3px;
}

/* Photo caption, numbered plan cards and the story quote (first written for the
   old PMWB page; still used by the other Community subpages and search). */
.community-page .split-photo {
  margin: 0 0 16px;
}

.community-page .split-photo img {
  margin-bottom: 8px;
}

.community-page .split-photo figcaption {
  color: var(--muted);
  font-size: var(--text-md);
}

.community-page .pmwb-plan {
  background: var(--mist);
}

.community-page .plan-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 14px;
}

.community-page .plan-card {
  padding: 26px;
  border: 1px solid var(--line);
  border-top: 4px solid var(--cyan);
  border-radius: var(--radius-lg);
  background: #fff;
}

.community-page .plan-card:nth-child(2) { border-top-color: var(--orange); }
.community-page .plan-card:nth-child(3) { border-top-color: var(--purple); }

.community-page .plan-card p {
  margin: 0;
  color: var(--muted);
}

.community-page .plan-number {
  display: block;
  margin-bottom: 14px;
  color: var(--purple);
  font-size: var(--text-sm);
  font-weight: 700;
  letter-spacing: var(--tracking-label);
}

.community-page .plan-note {
  max-width: 860px;
  margin: 30px 0 0;
  color: var(--muted);
}

.community-page .quote--story {
  border-radius: var(--radius-lg);
}

.community-page .impact .quote--story blockquote p {
  margin: 0;
  color: #fff;
  font-size: inherit;
}

.community-page .quote--story figcaption {
  display: grid;
  gap: 10px;
  margin-top: 22px;
  font-size: var(--text-base);
  line-height: 1.4;
}

.community-page .quote--story figcaption span {
  color: var(--on-dark);
}

.community-page .quote--story figcaption a {
  justify-self: start;
  color: #fff;
  font-weight: 700;
  text-decoration: underline;
  text-underline-offset: 3px;
}

@media (max-width: 900px) {
  .community-page .plan-grid {
    grid-template-columns: 1fr;
  }
}

/* community.html's own two-column hero (bubble art), scaled to match the half-height treatment */
.community-page .hero h1 {
  font-size: var(--text-h1);
}

.community-page .hero p:not(.eyebrow) {
  font-size: var(--text-base);
}

@media (max-width: 760px) {
  .community-page .hero-grid {
    align-items: center;
  }
}

@media (max-width: 500px) {
  .community-page .hero h1 {
    font-size: var(--text-3xl);
  }

  .community-page .hero-art {
    margin-top: 18px;
  }
}
/* "Page not found" and search results (404.php, search.php). */
.community-page .routes--4 {
  grid-template-columns: repeat(4, 1fr);
}


.community-page .search-results .campus-events-label {
  flex-basis: 100%;
}

.community-page .search-results .campus-events-meta {
  flex-basis: 100%;
}

.community-page .search-none {
  margin: 0;
  color: var(--muted);
  font-size: var(--text-lead);
}

.community-page .search-pagination ul {
  display: flex;
  gap: 8px;
  margin: 24px 0 0;
  padding: 0;
  list-style: none;
}

.community-page .search-pagination a,
.community-page .search-pagination span {
  display: inline-block;
  padding: 8px 12px;
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  background: #fff;
  color: var(--purple);
  font-weight: 700;
}

.community-page .search-pagination .current {
  background: var(--purple);
  color: #fff;
}

@media (max-width: 1000px) {
  .community-page .routes--4 {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (max-width: 500px) {
  .community-page .routes--4 {
    grid-template-columns: 1fr;
  }
}

/* ==========================================================================
   Community overview (page-community.php, 2026 redesign: Community.dc.html).
   Own .co-* classes so the subpages' styles above are untouched.
   ========================================================================== */
.community-page .co {
  color: var(--ink-strong);
  font-family: var(--font-ui);
  background: #fff;
}

.community-page .co-inner {
  width: min(var(--max-wide), calc(100% - 42px));
}

.community-page .co :focus-visible {
  outline: 3px solid var(--focus-ring);
  outline-offset: 2px;
  box-shadow: none;
}

.community-page .co h2 {
  max-width: none;
  margin: 0;
  color: var(--ink-strong);
  font-family: var(--font-display);
  font-size: var(--text-section);
  font-weight: 700;
  line-height: 1.15;
  letter-spacing: -.02em;
}

.community-page .co h3 {
  margin: 0;
  color: var(--ink-strong);
  font-family: var(--font-display);
  font-weight: 700;
  line-height: 1.3;
}

.community-page .co-label {
  color: var(--purple);
  font-size: var(--text-ui-xs);
  font-weight: 700;
  letter-spacing: .12em;
  text-transform: uppercase;
}

.community-page .co-head {
  display: flex;
  flex-direction: column;
  gap: 14px;
  max-width: 800px;
}

.community-page .co-head p {
  margin: 0;
  color: var(--muted-ui);
  font-size: var(--text-ui-md);
  line-height: 1.6;
}

.community-page .co-head--row {
  flex-direction: row;
  align-items: flex-end;
  justify-content: space-between;
  gap: 24px;
  max-width: none;
}

.community-page .co .pill-button svg {
  width: 16px;
  height: 16px;
}

/* Orange "join" button (always dark text) and the frosted white one. */
.community-page .co-join {
  background: var(--join);
  color: var(--night-deep);
}

.community-page .co-join:hover {
  background: var(--join-hover);
  color: var(--night-deep);
}

/* .co-glass ("Upcoming events"): the standard secondary pill (pill-button--secondary). It was see-through white with no visible edge (UI/UX audit). */

.community-page .co-blur {
  position: absolute;
  border-radius: var(--radius-round);
  filter: blur(70px);
  pointer-events: none;
}

/* Hero ------------------------------------------------------------------ */
.community-page .co-hero {
  overflow: hidden;
  padding: 40px 0 96px;
  background: var(--surface-soft);
}

.community-page .co-hero-inner {
  display: flex;
  flex-direction: column;
  gap: 40px;
}

.community-page .co-hero-grid {
  display: grid;
  grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr);
  align-items: center;
  gap: 72px;
}

.community-page .co-hero-grid--single {
  grid-template-columns: minmax(0, 1fr);
}

.community-page .co-hero-text {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 24px;
  padding-top: 55px; /* The prototype's pill (31px + 24px gap), not used. */
}

.community-page .co-hero h1 {
  max-width: none;
  margin: 0;
  color: var(--ink-strong);
  font-family: var(--font-display);
  font-size: var(--text-hero);
  font-weight: 700;
  line-height: 1.05;
  letter-spacing: -.035em;
}

.community-page .co-accent {
  color: var(--purple);
}

.community-page .co-hero-lead {
  max-width: 560px;
  margin: 0;
  color: var(--muted-ui);
  font-size: var(--text-ui-xl);
  line-height: 1.6;
}

.community-page .co-hero-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
}

.community-page .co-hero-actions .pill-button--primary {
  padding: 0 26px;
}

.community-page .co-hero-media {
  position: relative;
}

.community-page .co-hero-media .co-blur.is-violet {
  left: -40px;
  top: -40px;
  width: 260px;
  height: 260px;
  background: var(--violet);
  opacity: .45;
}

.community-page .co-hero-media .co-blur.is-orange {
  right: -30px;
  bottom: -40px;
  width: 240px;
  height: 240px;
  background: var(--join);
  opacity: .35;
}

.community-page .co-hero-photo {
  position: relative;
  display: block;
  width: 100%;
  height: 460px;
  object-fit: cover;
  border-radius: var(--radius-card);
  box-shadow: var(--shadow-menu);
}

.community-page .co-chip {
  position: absolute;
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 12px 18px;
  border: 1px solid rgba(255, 255, 255, .9);
  border-radius: var(--radius-pill);
  background: rgba(255, 255, 255, .8);
  -webkit-backdrop-filter: blur(16px);
  backdrop-filter: blur(16px);
  box-shadow: var(--shadow-chip);
  color: var(--ink-strong);
  font-size: var(--text-ui-sm);
  font-weight: 700;
  white-space: nowrap;
}

.community-page .co-chip::before {
  content: "";
  flex: 0 0 auto;
  width: 10px;
  height: 10px;
  border-radius: var(--radius-round);
  background: var(--purple);
}

.community-page .co-chip--1 { left: -24px; top: 48px; }
.community-page .co-chip--2 { right: -20px; top: 200px; }
.community-page .co-chip--2::before { background: var(--highlight); }
.community-page .co-chip--3 { left: 36px; bottom: -22px; }
/* Overview: the second label straddles the photo's top edge, over the trees, not the roll-up banner's text. */
.community-page .co-hero--overview .co-chip--2 { right: 40px; top: -22px; }
.community-page .co-chip--3::before,
.community-page .co-chip--all::before { background: var(--join); }

.community-page .co-chip--all {
  display: none;
}

/* Ways to take part ------------------------------------------------------- */
.community-page .co-ways {
  padding: 96px 0;
}

.community-page .co-ways .co-inner {
  display: flex;
  flex-direction: column;
  gap: 44px;
}

.community-page .co-ways .co-head {
  gap: 14px;
}

.community-page .co-ways .co-head h2 {
  max-width: 640px;
}

/* Audience filter: radios styled as pills (the checked one filled). */
.community-page .co-ways-filter {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
  min-width: 0;
  margin: -12px 0 0;
  padding: 0;
  border: 0;
}

.community-page .co-ways-filter legend {
  float: left; /* Keeps the legend on the buttons' line. */
  margin-right: 6px;
  color: var(--muted-ui);
  font-size: var(--text-ui-sm);
  font-weight: 700;
}

.community-page .co-ways-filter label {
  position: relative;
  cursor: pointer;
}

.community-page .co-ways-filter input {
  position: absolute;
  inset: 0;
  opacity: 0;
  cursor: pointer;
}

.community-page .co-ways-filter span {
  display: inline-flex;
  align-items: center;
  height: 38px;
  padding: 0 16px;
  border: 1px solid var(--line-control);
  border-radius: var(--radius-pill);
  background: #fff;
  color: var(--ink-strong);
  font-size: var(--text-ui-sm);
  font-weight: 700;
  transition: background-color .15s ease, border-color .15s ease, color .15s ease;
}

.community-page .co-ways-filter label:hover span {
  border-color: var(--purple);
  color: var(--purple);
}

.community-page .co-ways-filter input:checked + span {
  border-color: var(--purple);
  background: var(--purple);
  color: #fff;
}

.community-page .co-ways-filter input:focus-visible + span {
  outline: 2px solid var(--purple);
  outline-offset: 3px;
}

/* Ripple map: "You" at the center, four rings reaching further out (1 Grow yourself, orange;
   2 Connect with members, cyan; 3 Power the Chapter, purple; 4 Reach beyond, violet), each
   route a pill on its ring; beside it, a card per ring with the real links. */
.community-page .co-ripple-map {
  display: grid;
  grid-template-columns: minmax(0, 560px) minmax(0, 1fr);
  align-items: center;
  gap: 64px;
}

.community-page .co-ripple {
  position: relative;
  width: 100%;
  aspect-ratio: 1;
}

.community-page .co-ring {
  position: absolute;
  left: 50%;
  top: 50%;
  border-radius: var(--radius-round);
  transform: translate(-50%, -50%);
}

.community-page .co-ring--4 { width: 100%; height: 100%; border: 1px dashed var(--line-control); background: var(--purple-wash-hover); }
.community-page .co-ring--3 { width: 78%; height: 78%; border: 1px solid var(--line-control); background: var(--purple-tint); }
.community-page .co-ring--2 { width: 54%; height: 54%; border: 1px solid rgba(5, 191, 224, .3); background: var(--cyan-wash); }
.community-page .co-ring--1 { width: 34%; height: 34%; border: 1px solid rgba(255, 97, 15, .25); background: var(--orange-wash); }

/* Ring names at the top of each band. */
.community-page .co-ring-name {
  position: absolute;
  left: 50%;
  font-size: var(--text-ui-3xs);
  font-weight: 700;
  letter-spacing: .1em;
  text-transform: uppercase;
  white-space: nowrap;
  transform: translateX(-50%);
}

.community-page .co-ring-name--1 { top: 35.4%; color: var(--orange-ink); }
.community-page .co-ring-name--2 { top: 25.4%; color: var(--cyan-ink-strong); }
.community-page .co-ring-name--3 { top: 13.4%; color: var(--purple); }
.community-page .co-ring-name--4 { top: 2.4%; color: var(--muted-ui); }

.community-page .co-you {
  position: absolute;
  left: 50%;
  top: 50%;
  display: grid;
  place-items: center;
  width: 60px;
  height: 60px;
  border-radius: var(--radius-round);
  background: var(--night);
  box-shadow: 0 0 0 8px rgba(34, 16, 67, .08);
  color: #fff;
  font-family: var(--font-display);
  font-size: var(--text-ui);
  font-weight: 700;
  transform: translate(-50%, -50%);
}

.community-page .co-pill {
  --ring-tone: var(--orange);
  position: absolute;
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 7px 13px 7px 10px;
  border: 1px solid var(--line-soft);
  border-radius: var(--radius-pill);
  background: #fff;
  box-shadow: 0 6px 18px rgba(42, 12, 102, .1);
  color: var(--ink-strong);
  font-size: var(--text-ui-xs);
  font-weight: 700;
  white-space: nowrap;
  transform: translate(-50%, -50%);
  transition: opacity .2s ease, border-color .15s ease, color .15s ease;
}

.community-page .co-pill--2 { --ring-tone: var(--cyan); }
.community-page .co-pill--3 { --ring-tone: var(--purple); }
.community-page .co-pill--4 { --ring-tone: var(--violet); }

.community-page .co-pill::before {
  content: "";
  flex: 0 0 auto;
  width: 9px;
  height: 9px;
  border-radius: var(--radius-round);
  background: var(--ring-tone);
}

.community-page .co-pill:hover {
  border-color: var(--purple);
  color: var(--purple);
}

/* "Open" (Chapter awards) and "Forming" (Interest groups), as in the Community menu. */
.community-page .co-badge {
  display: inline-flex;
  padding: 2px 7px;
  border-radius: var(--radius-pill);
  background: var(--orange-tint);
  color: var(--orange-ink);
  font-size: var(--text-ui-3xs);
  font-weight: 700;
  letter-spacing: .04em;
  line-height: 1.4;
  text-transform: uppercase;
}

.community-page .co-ring-cards {
  display: grid;
  gap: 14px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.community-page .co-ring-card {
  --ring-tone: var(--orange);
  display: grid;
  grid-template-columns: 44px minmax(0, 1fr);
  gap: 16px;
  padding: 18px 20px;
  border: 1px solid var(--line-soft);
  border-radius: var(--radius-xl);
  background: #fff;
  box-shadow: var(--shadow-card);
  transition: opacity .2s ease;
}

.community-page .co-ring-card--2 { --ring-tone: var(--cyan); }
.community-page .co-ring-card--3 { --ring-tone: var(--purple); }
.community-page .co-ring-card--4 { --ring-tone: var(--violet); }

.community-page .co-ring-glyph {
  width: 44px;
  height: 44px;
}

.community-page .co-ring-glyph .is-off {
  stroke: var(--line-control);
  stroke-width: 1.2;
}

.community-page .co-ring-glyph .is-on {
  stroke: var(--ring-tone);
}

.community-page .co-ring-card--1 .co-ring-glyph .is-on {
  fill: var(--ring-tone);
  stroke: none;
}

.community-page .co-ring-glyph .is-you {
  fill: var(--night);
}

.community-page .co-ring-body h3 {
  margin: 0 0 4px;
  color: var(--ink-strong);
  font-family: var(--font-display);
  font-size: var(--text-ui-lg);
  font-weight: 700;
}

.community-page .co-ring-body h3 small {
  margin-left: 6px;
  color: var(--muted-strong);
  font-family: var(--font-ui);
  font-size: var(--text-ui-2xs);
  font-weight: 600;
}

.community-page .co-ring-body p {
  margin: 0;
  color: var(--muted-strong);
  font-size: var(--text-ui-sm);
  line-height: 1.55;
}

.community-page .co-ring-routes {
  display: flex;
  flex-wrap: wrap;
  gap: 6px 20px;
  margin: 10px 0 0;
  padding: 0;
  list-style: none;
}

.community-page .co-ring-routes li {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  transition: opacity .2s ease;
}

.community-page .co-ring-routes a {
  color: var(--purple);
  font-size: var(--text-ui-sm);
  font-weight: 700;
  transition: color .15s ease;
}

.community-page .co-ring-routes a:hover {
  color: var(--purple-press);
}

/* Filter: fade the routes (pills and links) that are not for the chosen visitor, and a ring's
   card when none of its routes is; outline the matching pills. */
.community-page .co-ways:has(input[value="member"]:checked) :is(.co-pill, .co-ring-routes li):not([data-for~="member"]),
.community-page .co-ways:has(input[value="student"]:checked) :is(.co-pill, .co-ring-routes li):not([data-for~="student"]),
.community-page .co-ways:has(input[value="org"]:checked) :is(.co-pill, .co-ring-routes li):not([data-for~="org"]) {
  opacity: .3;
}

.community-page .co-ways:has(input[value="member"]:checked) .co-ring-card:not(:has([data-for~="member"])),
.community-page .co-ways:has(input[value="student"]:checked) .co-ring-card:not(:has([data-for~="student"])),
.community-page .co-ways:has(input[value="org"]:checked) .co-ring-card:not(:has([data-for~="org"])) {
  opacity: .5;
}

.community-page .co-ways:has(input[value="member"]:checked) .co-pill[data-for~="member"],
.community-page .co-ways:has(input[value="student"]:checked) .co-pill[data-for~="student"],
.community-page .co-ways:has(input[value="org"]:checked) .co-pill[data-for~="org"] {
  border-color: var(--purple);
}

@media (prefers-reduced-motion: reduce) {
  .community-page .co-pill,
  .community-page .co-ring-card,
  .community-page .co-ring-routes li {
    transition: none;
  }
}

/* Small laptops: diagram and cards share the width; smaller pills and centre. */
@media (max-width: 1180px) {
  .community-page .co-ripple-map {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 40px;
  }

  .community-page .co-pill {
    gap: 6px;
    padding: 6px 11px 6px 9px;
    font-size: var(--text-ui-2xs);
  }

  .community-page .co-pill::before {
    width: 8px;
    height: 8px;
  }

  .community-page .co-you {
    width: 50px;
    height: 50px;
    font-size: var(--text-ui-sm);
  }
}

/* Tablets: the whole diagram centred above the cards, two across. */
@media (min-width: 768px) and (max-width: 999px) {
  .community-page .co-ripple-map {
    grid-template-columns: minmax(0, 1fr);
    gap: 40px;
  }

  .community-page .co-ripple {
    width: min(100%, 520px);
    margin: 0 auto;
  }

  .community-page .co-ring-cards {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

.community-page .co-icon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: var(--ds-icon-sm);
  height: var(--ds-icon-sm);
  border-radius: var(--radius-round);
}

.community-page .co-icon svg {
  width: 20px;
  height: 20px;
}

.community-page .co-icon.is-purple { background: var(--purple-tint-ui); color: var(--purple); }
.community-page .co-icon.is-cyan { background: var(--cyan-wash); color: var(--cyan-ink-strong); }
.community-page .co-icon.is-orange { background: var(--orange-wash); color: var(--orange-ink); }

/* Community in action ----------------------------------------------------- */
.community-page .co-action {
  padding: 0 0 96px;
}

/* Member insights' list follows the hero directly, so it needs its own top
   space (the Community page's "in action" follows a padded section). */
.community-page .co-insights-list {
  padding-top: 96px;
}

.community-page .co-action .co-inner {
  display: flex;
  flex-direction: column;
  gap: 32px;
}

.community-page .co-all {
  flex-shrink: 0;
  height: var(--ds-button-sm);
  padding: 0 20px;
  font-size: var(--text-ui-sm);
}

.community-page .co-stories {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 20px;
}

/* Two stories (Students "On campus"): side by side, filling the row. */
.community-page .co-stories--two {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.community-page .co-stories .story {
  display: flex;
  flex-direction: column;
  min-height: 0;
  overflow: hidden;
  padding: 24px;
  border: 1px solid var(--line-soft);
  border-radius: var(--radius-xl);
  background: #fff;
  color: var(--ink-strong);
  transition: border-color .15s ease, box-shadow .15s ease;
}

.community-page .co-stories .story:hover,
.community-page .co-stories .story:focus-visible {
  transform: none;
  border-color: var(--line-control);
  box-shadow: var(--shadow-card);
}

.community-page .co-stories .story--news {
  padding: 0;
}

.community-page .co-stories .story--news > :not(.story-photo) {
  margin-left: 24px;
  margin-right: 24px;
}

.community-page .co-stories .story .eyebrow {
  display: block;
  margin-top: 0;
  margin-bottom: 10px; /* Left/right: the card's 24px inset (.story--news > *). */
  color: var(--orange-ink);
  font-family: var(--font-ui);
  font-size: var(--text-ui-2xs);
  font-weight: 700;
  letter-spacing: .1em;
  text-transform: uppercase;
}

.community-page .co-stories .story--news .eyebrow {
  margin-top: 22px;
}

.community-page .co-stories .story h3 {
  margin: 0 0 10px;
  font-size: var(--text-story-title);
  transition: color .15s ease;
}

.community-page .co-stories .story:hover h3 {
  color: var(--purple);
}

.community-page .co-stories .story p {
  margin: 0;
  color: var(--muted-strong);
  font-size: var(--text-ui);
  line-height: 1.55;
}

.community-page .co-stories .story .link {
  min-height: 0;
  margin: auto 24px 24px;
  padding-top: 18px;
  color: var(--purple);
  font-size: var(--text-ui-sm);
  font-weight: 700;
}

/* Community overview: a soft band between the white "Choose your place" and closing panel, so
   the sections alternate (hero soft, routes white, stories soft, panel white). */
.community-page .co-action--overview {
  padding: 96px 0;
  background: var(--surface-soft);
}

.community-page .co-action--overview + .co-cta,
.community-page .co-hero + .co-cta {
  padding-top: 96px;
}

/* Tablets: the newest story large on the left, the other two stacked beside it as text cards
   (the story pictures are designed tiles with words, so they are not cropped to fit), instead
   of three narrow tall cards or a lone third card. */
@media (min-width: 768px) and (max-width: 1180px) {
  .community-page .co-stories--lead {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .community-page .co-stories--lead > :first-child {
    grid-row: span 2;
  }

  .community-page .co-stories--lead > .story--news:not(:first-child) .story-photo {
    display: none;
  }

  .community-page .co-stories--lead > .story--news:not(:first-child) .eyebrow {
    margin-top: 24px;
  }

  .community-page .co-stories--lead > .story--news:not(:first-child) h3 {
    font-size: var(--text-ui-lg);
  }
}

/* Closing call to action ---------------------------------------------------- */
.community-page .co-cta {
  padding: 0 0 96px;
}

.community-page .co-cta-panel {
  position: relative;
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 64px;
  padding: 64px;
  border-radius: var(--radius-card);
  background: var(--purple-wash-hover);
}

.community-page .co-cta-panel .co-blur {
  filter: blur(80px);
}

.community-page .co-cta-panel .co-blur.is-violet {
  left: -40px;
  top: -60px;
  width: 320px;
  height: 320px;
  background: var(--violet);
  opacity: .45;
}

.community-page .co-cta-panel .co-blur.is-orange {
  right: 120px;
  bottom: -120px;
  width: 320px;
  height: 320px;
  background: var(--join);
  opacity: .35;
}

.community-page .co-cta-panel .co-blur.is-cyan {
  right: -60px;
  top: -40px;
  width: 260px;
  height: 260px;
  background: var(--highlight);
  opacity: .4;
}

.community-page .co-cta-text {
  position: relative;
  max-width: 700px;
  display: flex;
  flex-direction: column;
  gap: 14px;
}

.community-page .co-cta h2 {
  font-size: var(--text-cta);
  line-height: 1.2;
}

.community-page .co-cta-text p {
  margin: 0;
  color: var(--muted-ui);
  font-size: var(--text-ui-md);
  line-height: 1.6;
}

.community-page .co-cta-actions {
  position: relative;
  flex-shrink: 0;
  display: flex;
  flex-direction: column;
  gap: 12px;
  min-width: 260px;
}

.community-page .co-cta-actions .pill-button {
  justify-content: center;
}

/* Responsive ---------------------------------------------------------------- */
@media (max-width: 1180px) {
  .community-page .co-hero-grid {
    grid-template-columns: minmax(0, 1fr);
    gap: 56px;
  }

  .community-page .co-hero-text {
    max-width: 720px;
  }

  .community-page .co-hero-media {
    max-width: 640px;
    margin: 0 24px;
  }


}

/* Overview / Member insights (.co-hero--split) / Students and PMWB (.co-hero--tall), stacked on small tablets: the
   photo or card spans the column instead of stopping at 640px. */
@media (min-width: 768px) and (max-width: 899px) {
  .community-page :is(.co-hero--overview, .co-hero--split, .co-hero--tall) .co-hero-media {
    max-width: none;
  }

  /* .co-hero--tall.co-hero--note: weighty enough to win over the taller photo's 480px (PMWB block). */
  .community-page :is(.co-hero--overview, .co-hero--tall.co-hero--note) .co-hero-photo {
    height: 420px;
  }

  .community-page .co-hero--split .co-insight-hero > * {
    flex: 1;
    max-width: none;
  }

  /* Member insights and Volunteer spotlights: the card spans the width here, so its picture fills the card's left
     side, edge to edge, beside the text instead of above it. */
  .community-page .co-hero--split .nlx-latest--story.nlx-latest--photo {
    flex-direction: row;
    align-items: stretch;
    padding: 0;
  }

  .community-page .co-hero--split .nlx-latest-photo {
    flex: 0 0 44%;
  }

  /* Cropped from the right: the story pictures carry the logo top left, the portrait in the middle. */
  .community-page .co-hero--split .nlx-latest-photo img {
    height: 100%;
    aspect-ratio: auto;
    object-position: left center;
  }

  .community-page .co-hero--split .nlx-latest--photo .nlx-latest-text {
    align-self: center;
    padding: 26px 28px 26px 0;
  }
}

/* Overview / Member insights / Students and PMWB on tablets: text and photo (or card) stay side by side down to 900px,
   so the hero fits one screen (UI/UX review: stacked, 1,006px tall at 1024px; Students and PMWB 1,068px). */
@media (min-width: 900px) and (max-width: 1180px) {
  .community-page :is(.co-hero--overview, .co-hero--split, .co-hero--tall) .co-hero-grid:not(.co-hero-grid--single) {
    grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr);
    gap: 48px;
  }

  .community-page :is(.co-hero--overview, .co-hero--split, .co-hero--tall) .co-hero-grid:not(.co-hero-grid--single) .co-hero-text {
    padding-top: 0;
  }

  .community-page :is(.co-hero--overview, .co-hero--split, .co-hero--tall) .co-hero-grid:not(.co-hero-grid--single) h1 {
    font-size: clamp(2.5rem, 4.4vw, 3.25rem);
  }

  .community-page :is(.co-hero--overview, .co-hero--split, .co-hero--tall) .co-hero-media {
    margin: 0;
  }

  .community-page .co-hero--split .co-insight-hero {
    justify-content: flex-end;
  }

  .community-page :is(.co-hero--overview, .co-hero--tall.co-hero--note) .co-hero-photo {
    height: 400px;
  }
}

@media (max-width: 1000px) {
  .community-page .co-cta-panel {
    flex-direction: column;
    align-items: flex-start;
    gap: 28px;
    padding: 48px;
  }

  .community-page .co-cta-actions {
    flex-direction: row;
    flex-wrap: wrap;
    min-width: 0;
  }

  .community-page .co-stories {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 767px) {
  .community-page .co-hero {
    padding: 24px 0 36px;
  }

  .community-page .co-hero-inner {
    gap: 18px;
  }

  .community-page .co-hero-grid {
    gap: 20px;
  }

  .community-page .co-hero-text {
    gap: 18px;
    padding-top: 0;
  }

  .community-page .co-hero h1 {
    line-height: 1.08;
    letter-spacing: -.03em;
  }

  .community-page .co-hero-lead {
    font-size: var(--text-ui-md);
  }

  /* Phones (mobile prototype): photo under the intro, buttons full width below it. */
  .community-page .co-hero-grid:not(.co-hero-grid--single) .co-hero-actions {
    order: 2;
  }

  .community-page .co-hero-grid {
    display: flex;
    flex-direction: column;
    align-items: stretch;
  }

  .community-page .co-hero-text {
    display: contents;
  }

  .community-page .co-hero h1,
  .community-page .co-hero-lead {
    order: 0;
  }

  .community-page .co-hero-media {
    order: 1;
    max-width: none;
    margin: 0;
  }

  /* Member insights and Mentorship: the buttons before the card, as on the News page (UI/UX review: "Read the
     insights" was pushed 650px down, "Find a mentor" 950px). */
  .community-page :is(.co-hero--split, .co-hero--mentor) .co-hero-grid:not(.co-hero-grid--single) .co-hero-actions {
    order: 1;
  }

  .community-page :is(.co-hero--split, .co-hero--mentor) .co-hero-media {
    order: 2;
  }

  .community-page .co-hero-actions {
    flex-direction: column;
    gap: 10px;
  }

  .community-page .co-hero-actions .pill-button {
    height: var(--ds-button-md);
  }

  .community-page .co-hero-photo {
    height: 220px;
    border-radius: var(--radius-xl);
    box-shadow: none;
  }

  .community-page .co-hero-media .co-blur.is-violet {
    left: -30px;
    top: -60px;
    width: 200px;
    height: 200px;
    filter: blur(55px);
  }

  .community-page .co-hero-media .co-blur.is-orange {
    display: none;
  }

  .community-page .co-chip--1,
  .community-page .co-chip--2,
  .community-page .co-chip--3 {
    display: none;
  }

  .community-page .co-chip--all {
    display: flex;
    left: 12px;
    bottom: 12px;
    gap: 8px;
    padding: 8px 14px;
    border: 0;
    background: rgba(255, 255, 255, .85);
    box-shadow: none;
    font-size: var(--text-ui-xs);
  }

  .community-page .co-chip--all::before {
    width: 8px;
    height: 8px;
  }

  .community-page .co-label {
    font-size: var(--text-ui-2xs); /* 12px: the 11px step was hard to read on phones (UI/UX review). */
  }

  .community-page .co-head p {
    font-size: var(--text-ui);
  }

  .community-page .co-head--row {
    flex-direction: column;
    align-items: flex-start;
  }

  .community-page .co-ways {
    padding: 40px 0;
  }

  .community-page .co-ways .co-inner {
    gap: 20px;
  }

  .community-page .co-stories {
    grid-template-columns: minmax(0, 1fr);
    gap: 12px;
  }

  /* Phones: one column of compact rows. */
  .community-page .co-ways-filter {
    margin-top: 0;
    gap: 6px;
  }

  .community-page .co-ways-filter legend {
    float: none;
    width: 100%;
    margin: 0 0 4px;
  }

  .community-page .co-ways-filter span {
    height: 36px;
    padding: 0 13px;
  }

  /* Phones: the rings as a half-circle illustration (no pills or names: too small to read), above
     the four ring cards, which hold the links. */
  .community-page .co-ripple-map {
    grid-template-columns: minmax(0, 1fr);
    gap: 4px;
  }

  .community-page .co-ripple {
    width: 270px;
    margin: 4px auto -108px;
    clip-path: inset(-12px -12px 108px -12px);
  }

  .community-page .co-pill,
  .community-page .co-ring-name {
    display: none;
  }

  .community-page .co-you {
    width: 44px;
    height: 44px;
    box-shadow: 0 0 0 6px rgba(34, 16, 67, .08);
    font-size: var(--text-ui-2xs);
  }

  .community-page .co-ring-cards {
    gap: 10px;
  }

  .community-page .co-ring-card {
    grid-template-columns: 36px minmax(0, 1fr);
    gap: 12px;
    padding: 16px;
    box-shadow: none;
  }

  .community-page .co-ring-glyph {
    width: 36px;
    height: 36px;
  }

  .community-page .co-ring-body h3 {
    font-size: var(--text-ui-md);
  }

  .community-page .co-ring-body p {
    font-size: var(--text-ui-xs);
    line-height: 1.5;
  }

  .community-page .co-ring-routes {
    flex-direction: column;
    gap: 4px;
    margin-top: 8px;
  }

  .community-page .co-action {
    padding: 0 0 40px;
  }

  .community-page .co-action--overview {
    padding: 40px 0;
  }

  .community-page .co-action--overview + .co-cta {
    padding-top: 40px;
  }

  /* Overview stories swipe sideways (as the Learning Resources recaps), the next one peeking in. */
  .community-page .co-stories--lead {
    grid-auto-columns: 84%;
    grid-auto-flow: column;
    grid-template-columns: none;
    margin: 0 -21px;
    padding: 2px 21px 10px;
    overflow-x: auto;
    overscroll-behavior-x: contain;
    scroll-padding: 0 21px;
    scroll-snap-type: x mandatory;
    scrollbar-width: none;
  }

  .community-page .co-stories--lead::-webkit-scrollbar {
    display: none;
  }

  .community-page .co-stories--lead > * {
    scroll-snap-align: start;
  }

  .community-page .co-insights-list {
    padding-top: 40px;
  }

  .community-page .co-action .co-inner {
    gap: 20px;
  }

  .community-page .co-stories .story h3 {
    font-size: var(--text-ui-lg);
  }

  .community-page .co-stories .story p {
    font-size: var(--text-ui); /* 15px: the design system's minimum for body text (was 13px). */
  }

  .community-page .co-cta {
    padding: 8px 0 44px;
  }

  .community-page .co-hero + .co-cta {
    padding-top: 40px;
  }

  .community-page .co-cta-panel {
    gap: 18px;
    padding: 28px 22px;
    border-radius: var(--radius-xl);
  }

  .community-page .co-cta-panel .co-blur {
    filter: blur(60px);
  }

  .community-page .co-cta-panel .co-blur.is-cyan {
    display: none;
  }

  .community-page .co-cta-text p {
    font-size: var(--text-ui-sm);
  }

  .community-page .co-cta-actions {
    flex-direction: column;
    align-self: stretch;
  }

  .community-page .co-cta-actions .pill-button {
    height: var(--ds-button-md);
    font-size: var(--text-ui);
  }
}
/* ==========================================================================
   Volunteer (page-volunteer.php, 2026 redesign: Volunteer.dc.html). The hero
   reuses the Community overview's .co-hero; here its photo note, "Why
   volunteer" and the expression-of-interest band with the form card.
   ========================================================================== */
.community-page .co-hero--note .co-hero-photo {
  height: 440px;
}

.community-page .co-hero--note .co-hero-media .co-blur.is-cyan {
  right: -40px;
  top: -40px;
  width: 260px;
  height: 260px;
  background: var(--highlight);
  opacity: .35;
}

.community-page .co-hero--note .co-hero-media .co-blur.is-violet {
  left: -30px;
  top: auto;
  bottom: -40px;
  width: 240px;
  height: 240px;
}

.community-page .co-note {
  position: absolute;
  left: -28px;
  bottom: 32px;
  max-width: 280px;
  display: flex;
  align-items: center;
  gap: 12px;
  margin: 0;
  padding: 18px 20px;
  border: 1px solid rgba(255, 255, 255, .9);
  border-radius: var(--radius-xl);
  background: rgba(255, 255, 255, .82);
  -webkit-backdrop-filter: blur(18px);
  backdrop-filter: blur(18px);
  box-shadow: var(--shadow-chip);
  color: var(--ink-strong);
  font-family: var(--font-display);
  font-size: var(--text-ui-md);
  font-weight: 700;
  line-height: 1.3;
}

.community-page .co-note .co-icon {
  flex-shrink: 0;
  width: 40px;
  height: 40px;
}

.community-page .co-note .co-icon svg {
  width: 18px;
  height: 18px;
}

/* Why volunteer ------------------------------------------------------------- */
.community-page .co-strengths {
  padding: 96px 0;
}

.community-page .co-strengths-inner {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.25fr);
  align-items: start;
  gap: 80px;
}

.community-page .co-strengths .co-head {
  gap: 16px;
}

.community-page .co-strengths .co-head p {
  line-height: 1.7;
}

.community-page .co-head p a,
.community-page .co-step p a {
  color: var(--purple);
  font-weight: 700;
  text-decoration: underline;
  text-underline-offset: 3px;
}

.community-page .co-steps {
  margin: 0;
  padding: 0;
  border-top: 1px solid var(--line-soft);
  list-style: none;
}

.community-page .co-step {
  display: grid;
  grid-template-columns: 64px minmax(0, 1fr) minmax(0, 1.2fr);
  align-items: baseline;
  gap: 24px;
  padding: 28px 0;
  border-bottom: 1px solid var(--line-soft);
}

/* --orange-ink: the brand orange is only 2.6:1 on white, too light for text. */
.community-page .co-step-number {
  color: var(--orange-ink);
  font-family: var(--font-display);
  font-size: var(--text-ui-lg);
  font-weight: 700;
}

.community-page .co-step h3 {
  font-size: var(--text-ui-step);
}

.community-page .co-step p {
  margin: 0;
  color: var(--muted-strong);
  font-size: var(--text-ui);
  line-height: 1.6;
}

/* Volunteer "Why volunteer" as give and get (UI/UX review): the heading on
   top, then what volunteers put in (orange panel) exchanged (the arrows) for
   what they gain (purple panel, a tile per point, two a row). Colour tells
   the sides apart: orange = give, purple = get. Tablets: the panels stack,
   the arrows turn; phones: one tile a row. */
.community-page .co-why-inner {
  display: flex;
  flex-direction: column;
  gap: 40px;
}

/* Wide screens: the heading on the left, the intro beside it (UI/UX review: the section was tall). */
@media (min-width: 1181px) {
  .community-page .co-why .co-head {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    align-items: end;
    gap: 16px 64px;
    max-width: none;
  }

  .community-page .co-why .co-head > p {
    grid-column: 2;
    grid-row: 1 / span 2;
  }
}

.community-page .co-exchange {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 56px minmax(0, 2.3fr);
  align-items: stretch;
  gap: 20px;
}

.community-page .co-give,
.community-page .co-get {
  display: flex;
  flex-direction: column;
  gap: 18px;
  padding: 28px;
  border-radius: var(--radius-card);
}

.community-page .co-give {
  background: var(--orange-wash);
}

.community-page .co-get {
  background: var(--purple-wash);
}

.community-page .co-exchange-label {
  margin: 0;
  color: var(--orange-ink);
  font-family: var(--font-ui);
  font-size: var(--text-ui-xs);
  font-weight: 700;
  letter-spacing: .12em;
  text-transform: uppercase;
}

.community-page .co-get .co-exchange-label {
  color: var(--purple);
}

/* The points spread over the panel's height, level with the tiles beside it. */
.community-page .co-give-list {
  flex: 1 1 auto;
  display: flex;
  flex-direction: column;
  justify-content: space-around;
  gap: 18px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.community-page .co-give-list li {
  display: flex;
  align-items: center;
  gap: 14px;
  color: var(--ink-strong);
  font-family: var(--font-display);
  font-size: var(--text-ui-lg);
  font-weight: 700;
  line-height: 1.3;
}

.community-page .co-give-icon {
  flex-shrink: 0;
  display: grid;
  place-items: center;
  width: var(--ds-icon-sm);
  height: var(--ds-icon-sm);
  border-radius: var(--radius-round);
  background: #fff;
  color: var(--orange-ink);
}

.community-page .co-give-icon svg {
  width: 20px;
  height: 20px;
}

/* The arrows: a white disc on the line between the two panels. */
.community-page .co-exchange-arrow {
  align-self: center;
  display: grid;
  place-items: center;
  width: 56px;
  height: 56px;
  border: 1px solid var(--line-soft);
  border-radius: var(--radius-round);
  background: #fff;
  box-shadow: var(--shadow-card);
  color: var(--purple);
}

.community-page .co-exchange-arrow svg {
  width: 24px;
  height: 24px;
}

.community-page .co-get-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
  margin: 0;
  padding: 0;
  list-style: none;
}

/* A tile: the icon beside the title, the text under both. */
.community-page .co-get-tile {
  display: grid;
  grid-template-columns: 40px minmax(0, 1fr);
  align-content: start;
  align-items: center;
  gap: 10px 14px;
  padding: 20px;
  border-radius: var(--radius-xl);
  background: #fff;
  box-shadow: var(--shadow-card);
}

.community-page .co-get-tile .co-icon {
  width: 40px;
  height: 40px;
}

.community-page .co-get-tile .co-icon svg {
  width: 20px;
  height: 20px;
}

.community-page .co-get-tile h4 {
  margin: 0;
  color: var(--ink-strong);
  font-family: var(--font-display);
  font-size: var(--text-ui-lg);
  font-weight: 700;
  line-height: 1.3;
}

.community-page .co-get-tile p {
  grid-column: 1 / -1;
  margin: 0;
  color: var(--muted-strong);
  font-size: var(--text-ui);
  line-height: 1.6;
}

.community-page .co-get-tile p a {
  color: var(--purple);
  font-weight: 700;
  text-decoration: underline;
  text-underline-offset: 3px;
}

/* Tablets: give on top (its points side by side), the arrows turned, get below. */
@media (max-width: 1180px) {
  .community-page .co-why-inner {
    gap: 36px;
  }

  .community-page .co-exchange {
    grid-template-columns: minmax(0, 1fr);
    justify-items: stretch;
    gap: 14px;
  }

  .community-page .co-give-list {
    flex-direction: row;
    flex-wrap: wrap;
    gap: 14px 28px;
  }

  .community-page .co-exchange-arrow {
    justify-self: center;
    transform: rotate(90deg);
  }
}

/* Phones: the give points one under the other, one tile a row. */
@media (max-width: 767px) {
  .community-page .co-why-inner {
    gap: 24px;
  }

  .community-page .co-give,
  .community-page .co-get {
    gap: 14px;
    padding: 20px;
    border-radius: var(--radius-xl);
  }

  .community-page .co-give-list {
    flex-direction: column;
    gap: 12px;
  }

  .community-page .co-give-list li {
    font-size: var(--text-ui-md);
  }

  .community-page .co-give-icon {
    width: 36px;
    height: 36px;
  }

  .community-page .co-give-icon svg {
    width: 18px;
    height: 18px;
  }

  .community-page .co-exchange-arrow {
    width: 44px;
    height: 44px;
  }

  .community-page .co-exchange-arrow svg {
    width: 20px;
    height: 20px;
  }

  .community-page .co-get-grid {
    grid-template-columns: minmax(0, 1fr);
    gap: 10px;
  }

  .community-page .co-get-tile {
    grid-template-columns: 36px minmax(0, 1fr);
    gap: 6px 12px;
    padding: 16px;
  }

  .community-page .co-get-tile .co-icon {
    width: 36px;
    height: 36px;
  }

  .community-page .co-get-tile .co-icon svg {
    width: 18px;
    height: 18px;
  }

  .community-page .co-get-tile h4 {
    font-size: var(--text-ui-md);
  }
}

/* Expression of interest ---------------------------------------------------- */
.community-page .co-interest {
  position: relative;
  overflow: hidden;
  padding: 96px 0;
  scroll-margin-top: var(--nav-height); /* An area card's link stops the band just under the sticky menu. */
  background: var(--purple);
  color: var(--on-purple);
}

.community-page .co-interest > .co-blur {
  filter: blur(90px);
}

.community-page .co-interest > .co-blur.is-cyan {
  left: -80px;
  top: -80px;
  width: 380px;
  height: 380px;
  background: var(--highlight);
  opacity: .3;
}

.community-page .co-interest > .co-blur.is-orange {
  left: 380px;
  bottom: -160px;
  width: 320px;
  height: 320px;
  background: var(--join);
  opacity: .35;
}

.community-page .co-interest-inner {
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  align-items: center;
  gap: 80px;
}

/* Member insights: the band as a rounded purple panel inside the white page, with white space before the footer
   (UI/UX review: the full-width purple band ran straight into the navy footer); its blurs inside the panel. */
.community-page .co-interest--panel {
  overflow: visible;
  padding: 0 0 96px;
  background: #fff;
}

.community-page .co-interest--panel .co-interest-inner {
  overflow: hidden;
  padding: 64px;
  border-radius: var(--radius-card);
  background: var(--purple);
  color: var(--on-purple);
}

.community-page .co-interest--panel .co-interest-inner > .co-blur {
  filter: blur(90px);
}

.community-page .co-interest--panel .co-interest-inner > .co-blur.is-cyan {
  left: -80px;
  top: -80px;
  width: 380px;
  height: 380px;
  background: var(--highlight);
  opacity: .3;
}

.community-page .co-interest--panel .co-interest-inner > .co-blur.is-orange {
  left: 300px;
  bottom: -160px;
  width: 320px;
  height: 320px;
  background: var(--join);
  opacity: .35;
}

.community-page .co-interest--panel .co-interest-text,
.community-page .co-interest--panel .co-form {
  position: relative;
}

.community-page .co-interest-text {
  display: flex;
  flex-direction: column;
  gap: 18px;
}

.community-page .co-interest .co-label {
  color: var(--cyan-light);
}

.community-page .co-interest h2 {
  color: #fff;
  font-size: var(--text-band);
  line-height: 1.12;
}

.community-page .co-interest-text p {
  max-width: 520px;
  margin: 0;
  color: var(--on-purple);
  font-size: var(--text-ui-lead);
  line-height: 1.7;
}

/* Volunteer hero note: its "·"-separated parts, one per line beside the photo; on one line on phones (below). */
.community-page .co-note-part {
  display: block;
  white-space: nowrap;
}

.community-page .co-note-sep {
  display: none;
}

@media (max-width: 767px) {
  .community-page .co-note-part {
    display: inline;
  }

  .community-page .co-note-sep {
    display: inline;
  }
}

/* Volunteer: when people hear back (optional wording), in bold under the steps. */
.community-page .co-interest-text .co-reply-note {
  color: #fff;
  font-size: var(--text-ui);
  font-weight: 700;
}

/* Volunteer: "What happens next", numbered steps under the intro (cyan figures, as the band's label). */
.community-page .co-next-steps {
  display: flex;
  flex-direction: column;
  gap: 18px;
  max-width: 520px;
  margin: 4px 0 0;
  padding: 0;
  list-style: none;
  counter-reset: next-step;
}

.community-page .co-next-steps li {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 4px;
  min-height: 34px;
  padding-left: 52px;
  counter-increment: next-step;
}

.community-page .co-next-steps li::before {
  content: counter(next-step);
  position: absolute;
  left: 0;
  top: 0;
  display: grid;
  place-items: center;
  width: 34px;
  height: 34px;
  border: 1px solid rgba(255, 255, 255, .3);
  border-radius: var(--radius-round);
  background: rgba(255, 255, 255, .1);
  color: var(--cyan-light);
  font-family: var(--font-display);
  font-size: var(--text-ui);
  font-weight: 700;
}

.community-page .co-next-title {
  color: #fff;
  font-size: var(--text-ui-md);
  font-weight: 700;
  line-height: 1.4;
}

.community-page .co-next-text {
  color: var(--on-purple);
  font-size: var(--text-ui);
  line-height: 1.55;
}

/* Volunteer spotlight: the latest spotlight as one wide card, picture left, text right; the title's link covers the card. */
.community-page .co-feature {
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr);
  overflow: hidden;
  border: 1px solid var(--line-soft);
  border-radius: var(--radius-xl);
  background: #fff;
  color: var(--ink-strong);
  transition: border-color .15s ease, box-shadow .15s ease;
}

.community-page .co-feature:hover,
.community-page .co-feature:focus-within {
  border-color: var(--line-control);
  box-shadow: var(--shadow-card);
}

.community-page .co-feature-photo {
  display: block;
  min-height: 100%;
  background: var(--purple);
}

.community-page .co-feature-photo img {
  display: block;
  width: 100%;
  height: 100%;
  aspect-ratio: 16 / 9;
  object-fit: cover;
}

.community-page .co-feature-photo--logo {
  display: grid;
  place-items: center;
  padding: 48px;
  background: var(--surface-soft);
}

.community-page .co-feature-photo--logo img {
  width: auto;
  max-width: 70%;
  height: auto;
  aspect-ratio: auto;
  object-fit: contain;
}

.community-page .co-feature-body {
  display: flex;
  flex-direction: column;
  gap: 14px;
  padding: 36px 40px;
}

.community-page .co-feature-meta {
  color: var(--orange-ink);
  font-size: var(--text-ui-2xs);
  font-weight: 700;
  letter-spacing: .1em;
  text-transform: uppercase;
}

.community-page .co-feature h3 {
  margin: 0;
  font-size: var(--text-story-title);
  line-height: 1.3;
}

.community-page .co-feature-link {
  color: inherit;
  text-decoration: none;
  transition: color .15s ease;
}

.community-page .co-feature-link::after {
  content: "";
  position: absolute;
  inset: 0;
}

.community-page .co-feature:hover .co-feature-link,
.community-page .co-feature-link:focus-visible {
  color: var(--purple);
}

.community-page .co-feature-text {
  margin: 0;
  color: var(--muted-strong);
  font-size: var(--text-ui);
  line-height: 1.6;
}

.community-page .co-feature-quote {
  margin: 4px 0 0;
  padding-left: 18px;
  border-left: 3px solid var(--cyan);
}

.community-page .co-feature-quote blockquote {
  margin: 0;
  padding: 0;
  border: 0;
  background: none;
}

.community-page .co-feature-quote blockquote p {
  margin: 0;
  color: var(--ink-strong);
  font-family: var(--font-display);
  font-size: var(--text-ui-lg);
  font-weight: 600;
  line-height: 1.45;
}

.community-page .co-feature-quote figcaption {
  margin-top: 8px;
  color: var(--muted-strong);
  font-size: var(--text-ui-sm);
}

.community-page .co-feature-quote figcaption strong {
  color: var(--ink-strong);
}

.community-page .co-feature-more {
  margin-top: auto;
  padding-top: 6px;
  color: var(--purple);
  font-size: var(--text-ui);
  font-weight: 700;
}

@media (max-width: 1000px) {
  .community-page .co-feature {
    grid-template-columns: minmax(0, 1fr);
  }

  .community-page .co-feature-photo,
  .community-page .co-feature-photo img {
    min-height: 0;
    height: auto;
  }
}

@media (max-width: 767px) {
  .community-page .co-feature-body {
    gap: 12px;
    padding: 22px 20px 24px;
  }

  .community-page .co-feature h3 {
    font-size: var(--text-ui-lg);
  }

  .community-page .co-feature-quote blockquote p {
    font-size: var(--text-ui-md);
  }

  .community-page .co-next-steps {
    gap: 14px;
  }
}

.community-page .co-interest :focus-visible {
  outline-color: var(--cyan-light);
}

/* Volunteer and Mentorship: the band in light lilac (the user's request; the
   other pages keep it purple). Dark text, purple label, the glows fainter;
   the white form card gets a hairline and a soft shadow in place of the
   purple one. */
.community-page .co-interest--light {
  background: var(--purple-wash);
  color: var(--ink-strong);
}

.community-page .co-interest--light > .co-blur.is-cyan {
  opacity: .18;
}

.community-page .co-interest--light > .co-blur.is-orange {
  opacity: .16;
}

.community-page .co-interest--light .co-label {
  color: var(--purple);
}

.community-page .co-interest--light h2 {
  color: var(--ink-strong);
}

.community-page .co-interest--light .co-interest-text p,
.community-page .co-interest--light .co-next-text {
  color: var(--muted-ui);
}

.community-page .co-interest--light .co-interest-text .co-reply-note,
.community-page .co-interest--light .co-next-title {
  color: var(--ink-strong);
}

.community-page .co-interest--light .co-next-steps li::before {
  border-color: rgba(79, 23, 168, .2);
  background: #fff;
  color: var(--purple);
}

.community-page .co-interest--light .co-form {
  border: 1px solid var(--line-soft);
  box-shadow: var(--shadow-menu);
}

.community-page .co-interest--light :focus-visible {
  outline-color: var(--focus-ring);
}

/* Students: the closing band's checklist card on the light band (white card, purple label and ticks, dark text). */
.community-page .co-interest--light .co-band-quote {
  border-color: var(--line-soft);
  background: rgba(255, 255, 255, .8);
  box-shadow: var(--shadow-card);
}

.community-page .co-interest--light .co-band-card .co-quote-label,
.community-page .co-interest--light .co-band-quote .co-quote-label {
  color: var(--purple);
}

/* PMWB: the "A shared belief" statement on the light band. */
.community-page .co-interest--light .co-band-quote-text {
  color: var(--ink-strong);
}

.community-page .co-interest--light .co-checklist li {
  color: var(--ink-strong);
}

.community-page .co-interest--light .co-check {
  background: var(--purple-tint-ui);
  color: var(--purple);
}

.community-page .co-interest--light .co-band-card-note {
  color: var(--muted-ui);
}

/* Volunteer "Where you can help" (UI/UX review): one card per area of the
   form; each opens the form with that area chosen. Follows .co-strengths,
   whose bottom padding is the space above. */
.community-page .co-areas {
  padding: 0 0 96px;
}

.community-page .co-areas .co-inner {
  display: flex;
  flex-direction: column;
  gap: 32px;
}

.community-page .co-areas-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 16px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.community-page .co-area {
  display: flex;
  flex-direction: column;
  gap: 8px;
  height: 100%;
  padding: 22px 24px;
  border: 1px solid var(--line-soft);
  border-radius: var(--radius-xl);
  background: #fff;
  box-shadow: var(--shadow-card);
  color: var(--ink-strong);
  transition: border-color .15s ease;
}

.community-page .co-area:hover {
  border-color: var(--line-control);
}

.community-page .co-area-title {
  font-family: var(--font-display);
  font-size: var(--text-ui-lg);
  font-weight: 700;
  line-height: 1.3;
  transition: color .15s ease;
}

.community-page .co-area:hover .co-area-title {
  color: var(--purple);
}

.community-page .co-area-text {
  flex-grow: 1;
  color: var(--muted-strong);
  font-size: var(--text-ui);
  line-height: 1.55;
}

.community-page .co-area-link {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  color: var(--purple);
  font-size: var(--text-ui);
  font-weight: 700;
}

.community-page .co-area-link svg {
  flex-shrink: 0;
  width: 16px;
  height: 16px;
  transition: transform .15s ease;
}

.community-page .co-area:hover .co-area-link svg {
  transform: translateX(3px);
}

/* The area's typical time (optional "Text | Time" wording), with a clock. */
.community-page .co-area-time {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  color: var(--ink-strong);
  font-size: var(--text-ui);
  font-weight: 600;
}

.community-page .co-area-time svg {
  flex-shrink: 0;
  width: 16px;
  height: 16px;
  color: var(--purple);
}

@media (max-width: 1000px) {
  .community-page .co-areas-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 767px) {
  .community-page .co-areas {
    padding: 0 0 40px;
  }

  .community-page .co-areas .co-inner {
    gap: 20px;
  }

  .community-page .co-areas-grid {
    grid-template-columns: minmax(0, 1fr);
    gap: 8px;
  }

  /* Phones: compact cards; the arrow, in a small circle, beside the title, and the text under both at full width. */
  .community-page .co-area {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: center;
    gap: 4px 12px;
    padding: 14px 16px;
    box-shadow: none;
  }

  .community-page .co-area > :not(.co-area-link):not(.co-area-title) {
    grid-column: 1 / -1;
  }

  .community-page .co-area-title {
    grid-column: 1;
    grid-row: 1;
    font-size: var(--text-ui-md);
  }

  .community-page .co-area-text {
    line-height: 1.45;
  }

  .community-page .co-area-link {
    grid-column: 2;
    grid-row: 1;
    display: grid;
    place-items: center;
    width: 32px;
    height: 32px;
    border: 1px solid var(--line-control);
    border-radius: var(--radius-round);
  }

  .community-page .co-area-link-text {
    display: none;
  }
}

.community-page .co-form :focus-visible {
  outline-color: var(--focus-ring);
}

.community-page .co-form {
  display: flex;
  flex-direction: column;
  gap: 16px;
  padding: 36px;
  border-radius: var(--radius-card);
  background: #fff;
  box-shadow: var(--shadow-on-purple);
  color: var(--ink-strong);
}

/* Volunteer: the card holds the form and the thank-you panel (Volunteer.dc.html). */
.community-page .co-form-fields {
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.community-page .co-form [hidden] {
  display: none;
}

.community-page .co-sent {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 14px;
}

.community-page .co-sent:focus {
  outline: none;
}

.community-page .co-sent-icon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 56px;
  height: 56px;
  border-radius: var(--radius-round);
  background: var(--purple-tint-ui);
  color: var(--purple);
}

.community-page .co-sent-icon svg {
  width: 26px;
  height: 26px;
}

.community-page .co-sent h3 {
  font-size: var(--text-ui-panel);
  line-height: 1.25;
}

.community-page .co-sent p {
  margin: 0;
  color: var(--muted-ui);
  font-size: var(--text-ui);
  line-height: 1.6;
}

.community-page .co-sent-again {
  height: var(--ds-button-md);
  padding: 0 22px;
  font-size: var(--text-ui);
}
.community-page .co-field {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

/* Labels and the consent line at 14px (UI/UX review: 13px was small for form text). */
.community-page .co-field label {
  color: var(--ink-strong);
  font-size: var(--text-ui-sm);
  font-weight: 700;
}

/* "* Required", at the top of the form. */
.community-page .co-form-note {
  margin: 0;
  color: var(--muted-strong);
  font-size: var(--text-ui-sm);
}

.community-page .co-required {
  color: var(--orange-ink);
}

.community-page .co-optional {
  color: var(--muted-strong);
  font-weight: 600;
}

.community-page .co-field input,
.community-page .co-field select,
.community-page .co-field textarea {
  width: 100%;
  height: 50px;
  padding: 0 14px;
  border: 1px solid var(--line-control);
  border-radius: var(--radius-ui);
  background: var(--surface-soft);
  color: var(--ink-strong);
  font-family: var(--font-ui);
  font-size: var(--text-ui);
}

.community-page .co-field textarea {
  height: auto;
  min-height: 96px;
  padding: 12px 14px;
  resize: vertical;
}

.community-page .co-field ::placeholder {
  color: var(--muted-strong);
  opacity: .8;
}

.community-page .co-field input:focus-visible,
.community-page .co-field select:focus-visible,
.community-page .co-field textarea:focus-visible {
  border-color: var(--purple);
  outline: 3px solid var(--focus-ring);
  outline-offset: 1px;
}

.community-page .co-consent {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  color: var(--muted-ui);
  font-size: var(--text-ui-sm);
  line-height: 1.5;
}

.community-page .co-consent input {
  flex-shrink: 0;
  width: 20px;
  height: 20px;
  margin: 0;
  accent-color: var(--purple);
}

.community-page .co-consent a {
  color: var(--purple);
  font-weight: 700;
  text-decoration: underline;
}

.community-page .co-form .form-status {
  border-radius: var(--radius-ui);
  font-size: var(--text-ui-sm);
}

.community-page .co-submit {
  justify-content: center;
  height: var(--ds-button-lg);
  width: 100%;
  cursor: pointer;
}

.community-page .co-submit:disabled {
  opacity: .6;
  cursor: progress;
}

/* Responsive ---------------------------------------------------------------- */
@media (max-width: 1000px) {
  .community-page .co-strengths-inner,
  .community-page .co-interest-inner {
    grid-template-columns: minmax(0, 1fr);
    gap: 40px;
  }

  .community-page .co-interest--panel .co-interest-inner {
    padding: 48px;
  }
}

@media (max-width: 767px) {
  /* The mobile prototype has the main button only. */
  .community-page .co-hero-more {
    display: none;
  }

  .community-page .co-hero--note .co-hero-photo {
    height: 220px;
  }

  .community-page .co-hero--note .co-hero-media .co-blur.is-cyan {
    right: -40px;
    top: -40px;
    width: 200px;
    height: 200px;
    filter: blur(55px);
  }

  .community-page .co-hero--note .co-hero-media .co-blur.is-violet {
    display: none;
  }

  .community-page .co-note {
    left: 12px;
    right: 12px;
    bottom: 12px;
    max-width: none;
    padding: 12px 14px;
    border: 0;
    border-radius: var(--radius-ui);
    background: rgba(255, 255, 255, .85);
    box-shadow: none;
    font-size: var(--text-ui-sm);
  }

  .community-page .co-note .co-icon {
    display: none;
  }

  .community-page .co-strengths {
    padding: 40px 0;
  }

  .community-page .co-strengths-inner {
    gap: 18px;
  }

  .community-page .co-strengths .co-head {
    gap: 12px;
  }

  .community-page .co-strengths h2 {
    font-size: var(--text-section-sm);
    line-height: 1.2;
  }

  .community-page .co-step {
    grid-template-columns: 28px minmax(0, 1fr);
    gap: 6px 14px;
    padding: 18px 0;
  }

  .community-page .co-step-number {
    grid-row: span 2;
    font-size: var(--text-ui);
  }

  .community-page .co-step h3 {
    font-size: var(--text-ui-lead);
  }

  .community-page .co-step p {
    font-size: var(--text-ui); /* 15px: the design system's minimum for body text. */
  }

  .community-page .co-interest {
    padding: 40px 0;
  }

  .community-page .co-interest > .co-blur.is-cyan {
    left: -60px;
    top: -60px;
    width: 220px;
    height: 220px;
    filter: blur(60px);
  }

  .community-page .co-interest > .co-blur.is-orange {
    display: none;
  }

  .community-page .co-interest-inner {
    gap: 20px;
  }

  .community-page .co-interest--panel {
    padding: 0 0 40px;
  }

  .community-page .co-interest--panel .co-interest-inner {
    padding: 28px 20px;
    border-radius: var(--radius-xl);
  }

  .community-page .co-interest--panel .co-interest-inner > .co-blur.is-cyan {
    left: -60px;
    top: -60px;
    width: 220px;
    height: 220px;
    filter: blur(60px);
  }

  .community-page .co-interest--panel .co-interest-inner > .co-blur.is-orange {
    display: none;
  }

  .community-page .co-interest-text {
    gap: 14px;
  }

  .community-page .co-interest h2 {
    line-height: 1.2;
  }

  .community-page .co-interest-text p {
    font-size: var(--text-ui);
    line-height: 1.65;
  }

  .community-page .co-form {
    padding: 20px;
    border-radius: var(--radius-xl);
  }
}
/* ==========================================================================
   PMWB (page-pmwb.php, 2026 redesign: PMWB.dc.html). Hero = .co-hero--note
   (Volunteer block); here the taller photo, "The initiative" as The Blueprint
   and the closing band with its frosted quote card
   (the band reuses .co-interest).
   ========================================================================== */
.community-page .co-hero--tall .co-hero-photo {
  height: 480px;
  object-position: center 30%;
}

/* Hero card "Across the border" (0.9.236, the user's choice after the UI/UX review): skills (left)
   cross a dashed "Without borders" line along curves to an NGO (right); the note at the foot.
   On load the skills slide in, the routes draw across and the NGO's windows light up, once. */
.community-page .co-crossing {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 24px;
  min-height: 460px;
  padding: 32px;
  border: 1px solid rgba(255, 255, 255, .9);
  border-radius: var(--radius-card);
  background: rgba(255, 255, 255, .72);
  -webkit-backdrop-filter: blur(18px);
  backdrop-filter: blur(18px);
  box-shadow: var(--shadow-menu);
}

.community-page .co-crossing-map {
  flex: 1;
  display: grid;
  grid-template-columns: auto minmax(56px, 1fr) auto;
  grid-template-rows: auto 1fr;
  gap: 16px 12px;
}

.community-page .co-crossing-side,
.community-page .co-crossing-border-label {
  align-self: end;
  font-size: var(--text-ui-2xs);
  font-weight: 700;
  letter-spacing: .1em;
  text-transform: uppercase;
}

.community-page .co-crossing-side.is-from { color: var(--purple); }

.community-page .co-crossing-side.is-to {
  justify-self: center;
  color: var(--orange-ink);
}

/* The sign on the line. */
.community-page .co-crossing-border-label {
  justify-self: center;
  padding: 4px 10px;
  border: 1px solid var(--line-control);
  border-radius: var(--radius-pill);
  background: #fff;
  color: var(--purple);
  letter-spacing: .06em;
  white-space: nowrap;
}

.community-page .co-crossing-skills {
  display: flex;
  flex-direction: column;
  justify-content: space-around;
  align-items: stretch; /* One width, so every route starts at a pill's edge. */
  gap: 10px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.community-page .co-crossing-skills li {
  padding: 10px 18px;
  border-radius: var(--radius-pill);
  background: var(--purple-tint-ui);
  color: var(--purple);
  font-size: var(--text-ui);
  font-weight: 700;
  line-height: 1.2;
  white-space: nowrap;
}

.community-page .co-crossing-skills li:nth-child(even) {
  background: var(--cyan-wash);
  color: var(--cyan-ink-strong);
}

.community-page .co-crossing-lines {
  width: 100%;
  height: 100%;
  overflow: visible;
}

.community-page .co-crossing-lines path {
  fill: none;
  stroke: var(--purple);
  stroke-width: 1.5;
}

.community-page .co-crossing-route {
  stroke-opacity: .45;
}

.community-page .co-crossing-border {
  stroke-dasharray: 6 6;
}

.community-page .co-crossing-ngo {
  display: grid;
  place-items: center;
  align-self: center;
  width: 112px;
  height: 112px;
  border-radius: var(--radius-xl);
  background: var(--orange-wash);
  color: var(--orange-ink);
}

.community-page .co-crossing-ngo svg {
  width: 64px;
  height: 64px;
}

.community-page .co-crossing-window {
  fill: var(--join);
}

/* The note sits in the card's foot rather than floating over a photo. */
.community-page .co-crossing .co-note {
  position: static;
  max-width: none;
  padding: 18px 0 0;
  border: 0;
  border-top: 1px solid var(--line-soft);
  border-radius: 0;
  background: none;
  -webkit-backdrop-filter: none;
  backdrop-filter: none;
  box-shadow: none;
}

@media (prefers-reduced-motion: no-preference) {
  .community-page .co-crossing-skills li {
    animation: co-cross-in .5s ease-out both;
    animation-delay: calc(var(--i) * .12s + .2s);
  }

  .community-page .co-crossing-route {
    animation: co-cross-route .8s ease-out both;
    animation-delay: calc(var(--i) * .15s + .6s);
  }

  .community-page .co-crossing-window {
    animation: co-cross-light .5s ease-out 1.7s both;
  }
}

@keyframes co-cross-in {
  from { opacity: 0; transform: translateX(-14px); }
}

@keyframes co-cross-route {
  from { clip-path: inset(0 100% 0 0); }
  to { clip-path: inset(0 0 0 0); }
}

@keyframes co-cross-light {
  from { fill: transparent; }
}

@media (min-width: 900px) and (max-width: 1180px) {
  .community-page .co-crossing {
    min-height: 400px;
    padding: 28px;
  }

  .community-page .co-crossing-skills li {
    padding: 9px 14px;
  }

  .community-page .co-crossing-ngo {
    width: 88px;
    height: 88px;
  }

  /* The three labels share a narrower card: the sign on two lines, as on phones. */
  .community-page .co-crossing-border-label {
    border-radius: var(--radius-ui);
    letter-spacing: .04em;
    line-height: 1.25;
    text-align: center;
    white-space: normal;
  }

  .community-page .co-crossing-side.is-to {
    text-align: center;
  }
}

@media (max-width: 767px) {
  .community-page .co-crossing {
    min-height: 0;
    gap: 16px;
    padding: 20px;
    border-radius: var(--radius-xl);
  }

  .community-page .co-crossing-map {
    gap: 12px 8px;
  }

  .community-page .co-crossing-skills {
    gap: 8px;
  }

  .community-page .co-crossing-skills li {
    padding: 8px 12px;
    font-size: var(--text-ui-sm);
  }

  .community-page .co-crossing-ngo {
    width: 68px;
    height: 68px;
    border-radius: var(--radius-ui);
  }

  .community-page .co-crossing-ngo svg {
    width: 44px;
    height: 44px;
  }

  /* Two lines, so it stays within the narrow middle column. */
  .community-page .co-crossing-border-label {
    padding: 3px 8px;
    border-radius: var(--radius-ui);
    letter-spacing: .04em;
    line-height: 1.25;
    text-align: center;
    white-space: normal;
  }

  .community-page .co-crossing-side.is-to {
    text-align: center;
  }

  .community-page .co-crossing .co-note {
    padding-top: 14px;
  }
}

/* The initiative as "The Blueprint" (UI/UX review, 2026-10-27): a Night drafting
   sheet with a cyan grid. Text and the NGO request on the left; on the right the
   Center drawn as a building (gable, roof, floors, columns) on foundation stones
   (the organisations supported, then a dashed orange stone for the next one),
   a dimension line and an architect's title block. Phones: the same building,
   narrower, under the text. */
.community-page .co-blueprint {
  padding: 96px 0;
  background-color: var(--night-deep);
  background-image:
    linear-gradient(var(--blueprint-grid) 1px, transparent 1px),
    linear-gradient(90deg, var(--blueprint-grid) 1px, transparent 1px);
  background-size: 24px 24px;
  color: var(--on-night);
}

.community-page .co-blueprint-inner {
  display: grid;
  grid-template-columns: minmax(0, .9fr) minmax(0, 1.1fr);
  align-items: start; /* The label at the section's top, as on every page. */
  gap: 80px;
}

.community-page .co-blueprint-text {
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.community-page .co-blueprint .co-label {
  color: var(--highlight);
}

.community-page .co-blueprint h2 {
  margin: 0;
  color: #fff;
  font-size: var(--text-section);
  line-height: 1.15;
}

.community-page .co-blueprint-text > p {
  margin: 0;
  color: var(--on-night);
  font-size: var(--text-ui-lead);
  line-height: 1.7;
}

.community-page .co-blueprint-ngo {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 10px;
  margin-top: 16px;
  padding-top: 28px;
  border-top: 1px solid var(--night-line);
}

.community-page .co-blueprint-ngo h3 {
  margin: 0;
  color: #fff;
  font-size: var(--text-ui-step);
}

.community-page .co-blueprint-ngo p {
  margin: 0;
  font-size: var(--text-ui);
  line-height: 1.6;
}

.community-page .co-blueprint-ngo .pill-button {
  margin-top: 8px;
}

.community-page .co-blueprint :focus-visible {
  outline: 3px solid var(--highlight);
  outline-offset: 3px;
}

.community-page .co-blueprint-sheet {
  display: flex;
  flex-direction: column;
  gap: 32px;
}

/* Side room for the gable's eaves and the ground line. */
.community-page .co-building {
  display: flex;
  flex-direction: column;
  padding: 0 24px;
}

.community-page .co-gable {
  display: block;
  width: calc(100% + 32px);
  height: 64px;
  margin: 0 -16px -1px;
  overflow: visible;
}

.community-page .co-gable path {
  fill: var(--blueprint-paper);
  stroke: var(--blueprint-line);
  stroke-width: 1.5;
  stroke-linejoin: round;
}

.community-page .co-levels {
  display: flex;
  flex-direction: column;
  margin: 0;
  padding: 0;
  list-style: none;
}

.community-page .co-level {
  position: relative;
  padding: 22px 28px;
  border: 1.5px solid var(--blueprint-line);
  background: var(--blueprint-paper);
  text-align: center;
}

.community-page .co-level + .co-level {
  border-top: 0;
}

.community-page .co-level h3 {
  margin: 0;
  color: #fff;
  font-size: var(--text-ui-step);
  line-height: 1.3;
}

.community-page .co-level p {
  max-width: 44ch;
  margin: 6px auto 0;
  color: var(--on-night);
  font-size: var(--text-ui);
  line-height: 1.55;
}

/* The roof's text sits under the gable, which closes the box. */
.community-page .co-level.is-roof {
  border-top: 0;
  padding-top: 6px;
}

/* A floor: a window drawn on each side. */
.community-page .co-level.is-floor {
  padding-left: 92px;
  padding-right: 92px;
}

.community-page .co-level.is-floor::before,
.community-page .co-level.is-floor::after {
  content: "";
  position: absolute;
  top: 50%;
  width: 44px;
  height: 30px;
  margin-top: -15px;
  border: 1.5px solid var(--blueprint-line);
  opacity: .6;
}

.community-page .co-level.is-floor::before { left: 24px; }
.community-page .co-level.is-floor::after { right: 24px; }

/* The columns: an open colonnade (no side walls), its title on a plate hung across them. */
.community-page .co-level.is-columns {
  display: grid;
  place-items: center;
  min-height: 160px;
  padding: 24px 0;
  border: 0;
  background: none;
}

.community-page .co-pillars {
  position: absolute;
  inset: 0;
  display: flex;
  justify-content: space-between;
  pointer-events: none;
}

.community-page .co-pillars i {
  width: 18px;
  border: 1.5px solid var(--blueprint-line);
  border-top: 0;
  border-bottom: 0;
  background: var(--blueprint-paper);
}

.community-page .co-level.is-columns .co-level-text {
  position: relative;
  max-width: min(78%, 380px);
  padding: 14px 20px;
  border: 1.5px solid var(--blueprint-line);
  border-radius: var(--radius-ui);
  background: var(--night-deep);
}

.community-page .co-stones {
  position: relative;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(110px, 1fr));
  gap: 6px;
  margin: 0;
  padding: 0;
  list-style: none;
}

/* The ground line, wider than the building. */
.community-page .co-stones::after {
  content: "";
  position: absolute;
  left: -24px;
  right: -24px;
  bottom: -8px;
  height: 2px;
  background: var(--highlight);
}

.community-page .co-stone {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 2px;
  min-height: 64px;
  padding: 10px 8px;
  border: 1.5px solid var(--blueprint-line);
  background: var(--blueprint-fill);
  color: #fff;
  font-size: var(--text-ui);
  font-weight: 700;
  line-height: 1.25;
  text-align: center;
}

.community-page .co-stone-year {
  color: var(--cyan-light);
  font-size: var(--text-ui-2xs);
  letter-spacing: .08em;
}

.community-page .co-stone.is-next {
  padding: 0;
  border: 1.5px dashed var(--join);
  background: none;
}

.community-page .co-stone.is-next a {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 2px;
  width: 100%;
  height: 100%;
  padding: 10px 8px;
  color: var(--join);
  text-decoration: none;
  transition: background-color .15s ease, color .15s ease;
}

.community-page .co-stone.is-next a span {
  font-size: var(--text-ui-2xs);
}

.community-page .co-stone.is-next a:hover {
  background: var(--join);
  color: var(--night-deep);
}

/* The dimension line, with a tick at each end. */
.community-page .co-dimension {
  position: relative;
  margin: 30px 0 0;
  padding-top: 12px;
  border-top: 1px solid var(--blueprint-line);
  color: var(--cyan-light);
  font-size: var(--text-ui-xs);
  font-weight: 700;
  letter-spacing: .06em;
  text-align: center;
}

.community-page .co-dimension::before,
.community-page .co-dimension::after {
  content: "";
  position: absolute;
  top: -7px;
  width: 1px;
  height: 13px;
  background: var(--blueprint-line);
}

.community-page .co-dimension::before { left: 0; }
.community-page .co-dimension::after { right: 0; }

/* Built from the ground up, once, when the foundation comes into view (page-pmwb.php's script adds
   .is-waiting, then .is-shown; wide screens only, where the whole drawing fits the screen). Waiting,
   the levels are a faint sketch; without JavaScript or with reduced motion the drawing is simply there. */
.community-page .co-blueprint-sheet.is-waiting :is(.co-stone, .co-level, .co-gable, .co-dimension) {
  opacity: .14;
  transform: translateY(14px);
  transition: opacity .6s ease, transform .6s ease;
}

.community-page .co-blueprint-sheet.is-shown :is(.co-stone, .co-level, .co-gable, .co-dimension) {
  opacity: 1;
  transform: none;
}

.community-page .co-blueprint-sheet.is-shown .co-level.is-columns { transition-delay: .3s; }
.community-page .co-blueprint-sheet.is-shown .co-level.is-floor { transition-delay: .6s; }
.community-page .co-blueprint-sheet.is-shown :is(.co-level.is-roof, .co-gable) { transition-delay: .9s; }
.community-page .co-blueprint-sheet.is-shown .co-dimension { transition-delay: 1.2s; }

/* The volunteers teaser (or the full team) after the dark sheet: the same space as between the other sections. */
.community-page .co-blueprint + .volunteer-team-teaser {
  padding: 96px 0;
}

.community-page .co-blueprint + .co-action {
  padding-top: 96px;
}

@media (max-width: 1000px) {
  .community-page .co-blueprint-inner {
    grid-template-columns: minmax(0, 1fr);
    gap: 56px;
  }

  .community-page .co-blueprint-sheet {
    width: 100%;
    max-width: 640px;
    margin: 0 auto;
  }
}

@media (max-width: 767px) {
  .community-page .co-blueprint {
    padding: 40px 0 48px; /* Top: as after every hero on phones. */
    background-size: 20px 20px;
  }

  .community-page .co-blueprint-inner {
    gap: 40px;
  }

  .community-page .co-blueprint-text > p {
    font-size: var(--text-ui-md);
  }

  .community-page .co-blueprint-ngo .pill-button {
    align-self: stretch;
  }

  .community-page .co-building {
    padding: 0 8px;
  }

  .community-page .co-gable {
    width: calc(100% + 16px);
    height: 44px;
    margin: 0 -8px -1px;
  }

  .community-page .co-level,
  .community-page .co-level.is-floor {
    padding: 18px 16px;
  }

  .community-page .co-level.is-roof {
    padding-top: 4px;
  }

  .community-page .co-level.is-floor::before,
  .community-page .co-level.is-floor::after {
    display: none;
  }

  .community-page .co-level h3 {
    font-size: var(--text-ui-lead);
  }

  .community-page .co-level.is-columns {
    min-height: 140px;
    padding: 20px 0;
  }

  .community-page .co-pillars i {
    width: 12px;
  }

  .community-page .co-level.is-columns .co-level-text {
    max-width: 90%;
    padding: 12px;
  }

  .community-page .co-stones {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .community-page .co-stones::after {
    left: -8px;
    right: -8px;
  }

  .community-page .co-blueprint + .volunteer-team-teaser {
    padding: 48px 0;
  }

  .community-page .co-blueprint + .co-action {
    padding-top: 48px;
  }
}

/* A single PMWB story: one wide card, the picture beside the text (UI/UX review: a lone
   card in the three-column row left two thirds of it empty). The picture keeps its 16:9 (story
   pictures are designed tiles with words). Tablets and phones: the usual card, full width. */
.community-page .co-stories--single {
  grid-template-columns: minmax(0, 1fr);
}

@media (min-width: 1001px) {
  .community-page .co-stories--single .story--news {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    grid-template-rows: 1fr auto auto auto auto 1fr;
  }

  .community-page .co-stories--single .story-photo {
    grid-row: 1 / -1;
    align-self: center;
  }

  .community-page .co-stories--single .story--news > :not(.story-photo) {
    grid-column: 2;
    margin-left: 40px;
    margin-right: 40px;
  }

  .community-page .co-stories--single .story--news .eyebrow { grid-row: 2; margin-top: 32px; }
  .community-page .co-stories--single .story h3 { grid-row: 3; font-size: var(--text-ui-panel); }
  .community-page .co-stories--single .story p { grid-row: 4; font-size: var(--text-ui-md); }
  .community-page .co-stories--single .story .link { grid-row: 5; margin: 0 40px 32px; }
}

/* Closing band ---------------------------------------------------------------- */
.community-page .co-band-inner {
  grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr);
  gap: 72px;
}

.community-page .co-band .co-interest-text p {
  max-width: 560px;
}

.community-page .co-band-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  padding-top: 6px;
}

.community-page .co-outline-light {
  border-color: rgba(255, 255, 255, .6);
  color: #fff;
}

.community-page .co-outline-light:hover {
  border-color: #fff;
  background: rgba(255, 255, 255, .1);
  color: #fff;
}

.community-page .co-band-quote {
  display: flex;
  flex-direction: column;
  gap: 16px;
  margin: 0;
  padding: 40px;
  border: 1px solid rgba(255, 255, 255, .2);
  border-radius: var(--radius-card);
  background: rgba(255, 255, 255, .1);
  -webkit-backdrop-filter: blur(24px);
  backdrop-filter: blur(24px);
}

.community-page .co-quote-label {
  color: var(--cyan-light);
  font-size: var(--text-ui-2xs);
  font-weight: 700;
  letter-spacing: .12em;
  text-transform: uppercase;
}

.community-page .co-band-quote-text {
  margin: 0;
  color: #fff;
  font-family: var(--font-display);
  font-size: var(--text-ui-tile-md);
  font-weight: 500;
  line-height: 1.3;
}

/* Tablets: text above the card (UI/UX review: side by side at 768px, the card's statement
   wrapped onto five short lines). */
@media (max-width: 1000px) {
  .community-page .co-band-inner {
    grid-template-columns: minmax(0, 1fr);
    gap: 40px;
  }
}

@media (max-width: 767px) {
  .community-page .co-hero--tall .co-hero-photo {
    height: 260px;
  }

  /* Phones (mobile prototype): label, heading, text, quote card, then the buttons. */
  .community-page .co-band-inner {
    display: flex;
    flex-direction: column;
    align-items: stretch;
    gap: 14px;
  }

  .community-page .co-band-text {
    display: contents;
  }

  .community-page .co-band-quote {
    order: 1;
    gap: 16px;
    margin-top: 4px;
    padding: 20px;
    border-radius: var(--radius-xl);
  }

  .community-page .co-band-quote-text {
    font-size: var(--text-ui-tile-sm);
  }

  .community-page .co-band-actions {
    order: 2;
    flex-direction: column;
    gap: 10px;
    padding-top: 4px;
  }

  .community-page .co-band-actions .pill-button {
    justify-content: center;
    height: var(--ds-button-md);
  }

  .community-page .co-band-actions .co-outline-light {
    height: var(--ds-button-md);
  }
}
/* Stacked tablets (768–899px): the "Across the border" card at a card's width, not stretched to about 700px with
   small pills on the left and long curves across the middle. */
@media (min-width: 768px) and (max-width: 899px) {
  .community-page .co-hero--pmwb .co-crossing {
    max-width: 560px;
  }

  /* In line with the heading and buttons above it (the media's 24px margins centered the full-width card). */
  .community-page .co-hero--pmwb .co-hero-media {
    margin-left: 0;
  }
}

/* ==========================================================================
   Students & Early Career (page-students.php, 2026 redesign:
   Students.dc.html). Hero = .co-hero--note.co-hero--tall, "Why join early"
   = the campus-to-career path below, band = .co-interest.co-band (PMWB
   block); here "On campus" (story cards) and the band's checklist card.
   ========================================================================== */

/* Why join early (UI/UX review): a path from "Campus" to "Your career" (the
   hero's "From campus to community"), the line running purple → cyan →
   orange as the Learning page's, three numbered stops on it, each with a
   small label, its point and a link. Across on wide screens; down the left
   up to 1000px. */
.community-page .co-journey-inner {
  display: flex;
  flex-direction: column;
  gap: 48px;
}

.community-page .co-path {
  --dot: 48px;
  position: relative;
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: start;
  gap: 0 32px;
}

/* The line, level with the stops' numbers. */
.community-page .co-path::before {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  top: calc(var(--dot) / 2 - 3px);
  height: 6px;
  border-radius: var(--radius-pill);
  background: linear-gradient(90deg, var(--line-control) 0, var(--purple) 14%, var(--highlight) 50%, var(--join) 86%, var(--purple) 100%);
}

.community-page .co-path-end {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  height: var(--dot);
  padding: 0 18px;
  border-radius: var(--radius-pill);
  font-family: var(--font-display);
  font-size: var(--text-ui);
  font-weight: 700;
  white-space: nowrap;
}

.community-page .co-path-end svg {
  width: 18px;
  height: 18px;
}

.community-page .co-path-end.is-start {
  border: 1px solid var(--line-control);
  background: #fff;
  color: var(--ink-strong);
}

.community-page .co-path-end.is-finish {
  background: var(--purple);
  color: #fff;
}

.community-page .co-path-stops {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 32px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.community-page .co-path-stop {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  text-align: center;
}

.community-page .co-path-dot {
  display: grid;
  place-items: center;
  width: var(--dot);
  height: var(--dot);
  margin-bottom: 10px;
  border: 4px solid #fff;
  border-radius: var(--radius-round);
  box-shadow: var(--shadow-card);
  font-family: var(--font-display);
  font-size: var(--text-ui-md);
  font-weight: 700;
}

.community-page .co-path-stop.is-purple .co-path-dot { background: var(--purple); color: #fff; }
.community-page .co-path-stop.is-cyan .co-path-dot { background: var(--highlight); color: var(--night-deep); }
.community-page .co-path-stop.is-orange .co-path-dot { background: var(--join); color: var(--night-deep); }

.community-page .co-path-kicker {
  font-size: var(--text-ui-xs);
  font-weight: 700;
  letter-spacing: .12em;
  text-transform: uppercase;
}

.community-page .co-path-stop.is-purple .co-path-kicker { color: var(--purple); }
.community-page .co-path-stop.is-cyan .co-path-kicker { color: var(--cyan-ink-strong); }
.community-page .co-path-stop.is-orange .co-path-kicker { color: var(--orange-ink); }

.community-page .co-path-stop h3 {
  margin: 0;
  font-size: var(--text-ui-step);
  line-height: 1.25;
}

.community-page .co-path-stop p {
  max-width: 320px;
  margin: 0;
  color: var(--muted-ui);
  font-size: var(--text-ui);
  line-height: 1.6;
}

.community-page .co-path-stop p a {
  color: var(--purple);
  font-weight: 700;
  text-decoration: underline;
}

/* margin-top: auto lines the three links up whatever the length of the text above them. */
.community-page .co-path-link {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  margin-top: auto;
  padding-top: 4px;
  color: var(--purple);
  font-size: var(--text-ui);
  font-weight: 700;
}

.community-page .co-path-link svg {
  width: 16px;
  height: 16px;
  transition: transform .15s ease;
}

.community-page .co-path-link:hover {
  color: var(--purple-press);
}

.community-page .co-path-link:hover svg {
  transform: translateX(3px);
}

/* Up to 1000px: the path runs down the left, the start above the stops and the end below them. */
@media (max-width: 1000px) {
  .community-page .co-journey-inner {
    gap: 36px;
  }

  .community-page .co-path {
    --dot: 44px;
    grid-template-columns: minmax(0, 1fr);
    gap: 28px;
  }

  .community-page .co-path::before {
    left: calc(var(--dot) / 2 - 3px);
    right: auto;
    top: calc(var(--dot) / 2);
    bottom: calc(var(--dot) / 2);
    width: 6px;
    height: auto;
    background: linear-gradient(180deg, var(--line-control) 0, var(--purple) 14%, var(--highlight) 50%, var(--join) 86%, var(--purple) 100%);
  }

  .community-page .co-path-end {
    justify-self: start;
  }

  .community-page .co-path-stops {
    grid-template-columns: minmax(0, 1fr);
    gap: 28px;
  }

  .community-page .co-path-stop {
    display: grid;
    grid-template-columns: var(--dot) minmax(0, 1fr);
    align-items: start;
    gap: 6px 18px;
    text-align: left;
  }

  .community-page .co-path-dot {
    grid-row: 1 / span 4;
    margin: 0;
  }

  .community-page .co-path-stop > :not(.co-path-dot) {
    grid-column: 2;
    justify-self: start;
  }

  .community-page .co-path-kicker {
    padding-top: 2px;
  }

  .community-page .co-path-stop p {
    max-width: 560px;
  }
}

@media (max-width: 767px) {
  .community-page .co-journey-inner {
    gap: 24px;
  }

  .community-page .co-path {
    --dot: 40px;
    gap: 22px;
  }

  .community-page .co-path-end {
    padding: 0 14px;
    font-size: var(--text-ui-sm);
  }

  .community-page .co-path-stop {
    column-gap: 14px;
  }

  .community-page .co-path-stop h3 {
    font-size: var(--text-ui-lead);
  }
}

@media (prefers-reduced-motion: reduce) {
  .community-page .co-path-link svg {
    transition: none;
  }

  .community-page .co-path-link:hover svg {
    transform: none;
  }
}

.community-page .co-band-card .co-quote-label {
  margin: 0;
  color: var(--cyan-light);
  font-family: var(--font-ui);
  font-size: var(--text-ui-2xs);
  font-weight: 700;
  line-height: 1.4;
}

.community-page .co-checklist {
  display: flex;
  flex-direction: column;
  gap: 14px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.community-page .co-checklist li {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  color: #fff;
  font-size: var(--text-ui-lead);
  font-weight: 600;
  line-height: 1.5;
}

.community-page .co-check {
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 24px;
  height: 24px;
  margin-top: 1px;
  border-radius: var(--radius-round);
  background: var(--highlight-glass);
  color: var(--cyan-light);
}

.community-page .co-check svg {
  width: 14px;
  height: 14px;
}

.community-page .co-band-card-note {
  margin: 0;
  color: var(--on-purple);
  font-size: var(--text-ui-xs);
  line-height: 1.6;
}

@media (max-width: 767px) {
  .community-page .co-checklist li {
    font-size: var(--text-ui);
  }
}

/* Student Board (page-students.php; cards: volunteers.css) on a light lilac band, between the white path and "On
   campus" (UI/UX review: four white sections in a row); "On campus" then needs its own top space. */
.community-page .student-board {
  background: var(--purple-wash);
}

.community-page .student-board + .co-action {
  padding-top: 96px;
}

@media (max-width: 767px) {
  .community-page .student-board + .co-action {
    padding-top: 40px;
  }

  /* Phones: the buttons before the photo (Students) or the "Across the border" card (PMWB), so they stay on screen
     on small phones (UI/UX reviews). */
  .community-page :is(.co-hero--students, .co-hero--pmwb) .co-hero-grid:not(.co-hero-grid--single) .co-hero-actions {
    order: 1;
  }

  .community-page :is(.co-hero--students, .co-hero--pmwb) .co-hero-media {
    order: 2;
  }

  /* The path's heading and labels at the page's other phone sizes (UI/UX review: 28px against 26px, 13px against 12px). */
  .community-page .co-journey h2 {
    font-size: var(--text-section);
    line-height: 1.15;
  }

  .community-page .co-path-kicker {
    font-size: var(--text-ui-2xs);
  }
}
/* ==========================================================================
   Outreach & Partnerships (page-outreach.php, 2026 redesign:
   Partnerships.dc.html). Hero = .co-hero--note, form band = .co-interest +
   .co-form (Volunteer block), stories = .co-action; here the photo size,
   "Ways to partner" layout and the audience tiles.
   ========================================================================== */
.community-page .co-hero--partners .co-hero-photo {
  height: 460px;
}

.community-page .co-hero--partners .co-note {
  max-width: 300px;
}

.community-page .co-ways-partner .co-strengths-inner {
  gap: 72px;
}

/* Ways to partner as "The Connection Puzzle" (UI/UX review, 2026-10-27): four audience pieces in a
   2 × 2 jigsaw around a PMI Lebanon hub. Each piece is one link (the form below, its interest
   chosen); a round tab (the li's ::after, above every piece) fits into the next piece clockwise.
   Pointed at or focused, the piece lifts out (above the others); pressed, it goes back in. */
.community-page .co-puzzle {
  position: relative;
}

.community-page .co-puzzle-pieces {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 8px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.community-page .co-piece {
  --piece-bg: var(--purple-tint-ui);
  --piece-ink: var(--purple);
  --piece-text: var(--muted-ui);
  position: relative;
  transition: transform .25s ease;
}

.community-page .co-piece.is-cyan { --piece-bg: var(--cyan-wash); --piece-ink: var(--cyan-ink-strong); }
.community-page .co-piece.is-orange { --piece-bg: var(--orange-wash); --piece-ink: var(--orange-ink); }
.community-page .co-piece.is-night { --piece-bg: var(--night-deep); --piece-ink: var(--highlight); --piece-text: var(--on-night); }

.community-page .co-piece a {
  position: relative;
  z-index: 1;
  display: flex;
  flex-direction: column;
  gap: 10px;
  height: 100%;
  min-height: 230px;
  padding: 32px;
  background: var(--piece-bg);
  color: var(--piece-text);
  text-decoration: none;
  transition: box-shadow .25s ease;
}

/* Room for the hub at the puzzle's centre: the top row's lower corners, the bottom row's upper ones. */
.community-page .co-piece:nth-child(-n+2) a { padding-bottom: 56px; }
.community-page .co-piece:nth-child(n+3) a { padding-top: 56px; }

.community-page .co-piece:nth-child(1) a { border-radius: var(--radius-card) 0 0 0; }
.community-page .co-piece:nth-child(2) a { border-radius: 0 var(--radius-card) 0 0; }
.community-page .co-piece:nth-child(3) a { border-radius: 0 0 0 var(--radius-card); }
.community-page .co-piece:nth-child(4) a { border-radius: 0 0 var(--radius-card) 0; }

.community-page .co-piece h3 {
  margin: 0;
  color: var(--piece-ink);
  font-size: var(--text-ui-step);
  line-height: 1.3;
}

.community-page .co-piece.is-night h3 {
  color: #fff;
}

.community-page .co-piece p {
  margin: 0;
  font-size: var(--text-ui);
  line-height: 1.6;
}

.community-page .co-piece-go {
  margin-top: auto;
  color: var(--piece-ink);
  font-size: var(--text-ui-sm);
  font-weight: 700;
}

/* The tabs, clockwise: 1 → 2 → 4 → 3 → 1 (centred 4px past the edge, in the gap). */
.community-page .co-piece::after {
  content: "";
  position: absolute;
  z-index: 2;
  width: 36px;
  height: 36px;
  border-radius: var(--radius-round);
  background: var(--piece-bg);
  pointer-events: none;
}

.community-page .co-piece:nth-child(1)::after { top: calc(50% - 18px); right: -22px; }
.community-page .co-piece:nth-child(2)::after { bottom: -22px; left: calc(50% - 18px); }
.community-page .co-piece:nth-child(4)::after { top: calc(50% - 18px); left: -22px; }
.community-page .co-piece:nth-child(3)::after { top: -22px; left: calc(50% - 18px); }

.community-page .co-puzzle-hub {
  position: absolute;
  top: 50%;
  left: 50%;
  z-index: 4;
  display: grid;
  place-items: center;
  width: 96px;
  height: 96px;
  border: 6px solid #fff;
  border-radius: var(--radius-round);
  background: var(--purple);
  box-shadow: var(--shadow-card);
  color: #fff;
  font-family: var(--font-display);
  font-size: var(--text-ui-sm);
  font-weight: 700;
  line-height: 1.15;
  text-align: center;
  transform: translate(-50%, -50%);
  pointer-events: none;
}

.community-page .co-piece a:focus-visible {
  outline: 3px solid var(--focus-ring);
  outline-offset: 3px;
}

.community-page .co-piece.is-night a:focus-visible {
  outline-color: var(--highlight);
}

@media (hover: hover) and (prefers-reduced-motion: no-preference) {
  .community-page .co-piece:nth-child(1) { --lift: -8px, -8px; }
  .community-page .co-piece:nth-child(2) { --lift: 8px, -8px; }
  .community-page .co-piece:nth-child(3) { --lift: -8px, 8px; }
  .community-page .co-piece:nth-child(4) { --lift: 8px, 8px; }

  .community-page .co-piece:is(:hover, :focus-within) {
    z-index: 3;
    transform: translate(var(--lift));
  }

  .community-page .co-piece:is(:hover, :focus-within) a {
    box-shadow: var(--shadow-menu);
  }

  /* Pressed: it goes back into its place. */
  .community-page .co-piece:active {
    transform: none;
    transition-duration: .08s;
  }
}

@media (max-width: 767px) {
  .community-page .co-hero--partners .co-hero-photo {
    height: 240px;
  }

  .community-page .co-hero--partners .co-note {
    max-width: none;
  }

  .community-page .co-ways-partner .co-strengths-inner {
    gap: 24px;
  }

  /* Phones: one column, each piece's tab fitting into the one below; no hub. */
  .community-page .co-puzzle-pieces {
    grid-template-columns: minmax(0, 1fr);
  }

  .community-page .co-piece a,
  .community-page .co-piece:nth-child(n) a {
    min-height: 0;
    padding: 24px 22px;
    border-radius: 0;
  }

  .community-page .co-piece:first-child a { border-radius: var(--radius-xl) var(--radius-xl) 0 0; }
  .community-page .co-piece:last-child a { border-radius: 0 0 var(--radius-xl) var(--radius-xl); }

  .community-page .co-piece:nth-child(n)::after {
    top: auto;
    right: auto;
    bottom: -22px;
    left: calc(50% - 18px);
  }

  .community-page .co-piece:last-child::after {
    display: none;
  }

  .community-page .co-piece h3 {
    font-size: var(--text-ui-lead);
  }

  .community-page .co-puzzle-hub {
    display: none;
  }
}

/* ==========================================================================
   Mentorship (page-mentorship.php): the Volunteer page's hero and form band,
   "How it works" as a cycle ring, the two application cards, the FAQs and
   the form's application choice.
   ========================================================================== */

/* How it works (UI/UX review): the About page's "What we do" ring, as a
   cycle. Four coloured segments with an arrowhead in each gap, the goals at
   the centre, and the steps placed clockwise around it: 01 top left, 02 top
   right, 03 bottom right, 04 bottom left. Tablets: the ring above, two steps
   a row; phones: one a row. */
.community-page .co-cycle-inner {
  display: flex;
  flex-direction: column;
  gap: 48px;
}

.community-page .co-cycle .co-head {
  align-self: center;
  align-items: center;
  text-align: center;
}

.community-page .co-cycle .co-head h2,
.community-page .co-cycle .co-head p {
  text-wrap: balance;
}

.community-page .co-cycle-map {
  position: relative;
}

.community-page .co-cycle-hub {
  position: absolute;
  left: 50%;
  top: 50%;
  width: 300px;
  aspect-ratio: 1;
  transform: translate(-50%, -50%);
}

.community-page .co-cycle-hub svg {
  display: block;
  width: 100%;
  height: 100%;
  overflow: visible;
}

.community-page .co-cycle-arc {
  fill: none;
  stroke-width: 22;
}

.community-page .co-cycle-arrow {
  fill: none;
  stroke-width: 3.5;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.community-page .co-cycle-arc.is-purple,
.community-page .co-cycle-arrow.is-purple { stroke: var(--purple); }
.community-page .co-cycle-arc.is-cyan,
.community-page .co-cycle-arrow.is-cyan { stroke: var(--highlight); }
.community-page .co-cycle-arc.is-orange,
.community-page .co-cycle-arrow.is-orange { stroke: var(--join); }
.community-page .co-cycle-arc.is-night,
.community-page .co-cycle-arrow.is-night { stroke: var(--ds-night); }

.community-page .co-cycle-badge circle {
  fill: #fff;
  stroke-width: 3;
}

.community-page .co-cycle-badge text {
  font-family: var(--font-display);
  font-size: 11px;
  font-weight: 700;
  text-anchor: middle;
}

.community-page .co-cycle-badge.is-purple circle { stroke: var(--purple); }
.community-page .co-cycle-badge.is-cyan circle { stroke: var(--highlight); }
.community-page .co-cycle-badge.is-orange circle { stroke: var(--join); }
.community-page .co-cycle-badge.is-night circle { stroke: var(--ds-night); }
.community-page .co-cycle-badge.is-purple text { fill: var(--purple); }
.community-page .co-cycle-badge.is-cyan text { fill: var(--cyan-ink-strong); }
.community-page .co-cycle-badge.is-orange text { fill: var(--orange-ink); }
.community-page .co-cycle-badge.is-night text { fill: var(--ds-night); }

.community-page .co-cycle-hub-text {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 4px;
  padding: 0 70px;
  color: var(--ink-strong);
  font-family: var(--font-display);
  font-size: var(--text-ui-step);
  font-weight: 700;
  line-height: 1.2;
  text-align: center;
}

.community-page .co-cycle-hub-text small {
  color: var(--purple);
  font-family: var(--font-ui);
  font-size: var(--text-ui-2xs);
  letter-spacing: .12em;
  text-transform: uppercase;
}

/* The steps: the ring's column in the middle, kept empty. */
.community-page .co-cycle-list {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 340px minmax(0, 1fr);
  grid-template-rows: auto auto;
  align-items: start;
  gap: 64px 48px;
  min-height: 340px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.community-page .co-cycle-item {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: 6px 16px;
  max-width: 400px;
}

/* Clockwise: 01 top left, 02 top right, 03 bottom right, 04 bottom left. */
.community-page .co-cycle-item:nth-child(1) { grid-area: 1 / 1; justify-self: end; }
.community-page .co-cycle-item:nth-child(2) { grid-area: 1 / 3; }
.community-page .co-cycle-item:nth-child(3) { grid-area: 2 / 3; }
.community-page .co-cycle-item:nth-child(4) { grid-area: 2 / 1; justify-self: end; }

.community-page .co-cycle-num {
  grid-row: 1 / span 2;
  min-width: 2.4ch;
  font-family: var(--font-display);
  font-variant-numeric: tabular-nums;
  font-size: var(--text-ui-tile-md);
  font-weight: 700;
  line-height: 1;
  letter-spacing: -.02em;
}

.community-page .co-cycle-item.is-purple .co-cycle-num { color: var(--purple); }
.community-page .co-cycle-item.is-cyan .co-cycle-num { color: var(--cyan-ink-strong); }
.community-page .co-cycle-item.is-orange .co-cycle-num { color: var(--orange-ink); }
.community-page .co-cycle-item.is-night .co-cycle-num { color: var(--ds-night); }

.community-page .co-cycle-item h3 {
  margin: 0;
  font-size: var(--text-ui-step);
  line-height: 1.25;
}

.community-page .co-cycle-item p {
  grid-column: 2;
  margin: 0;
  color: var(--muted-ui);
  font-size: var(--text-ui);
  line-height: 1.6;
}

@media (max-width: 1180px) {
  .community-page .co-cycle-hub {
    position: relative;
    left: auto;
    top: auto;
    width: 260px;
    margin: 0 auto 48px;
    transform: none;
  }

  .community-page .co-cycle-hub-text {
    padding: 0 60px;
    font-size: var(--text-ui-lg);
  }

  .community-page .co-cycle-list {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 40px 48px;
    min-height: 0;
  }

  .community-page .co-cycle-item:nth-child(n) {
    grid-area: auto;
    justify-self: stretch;
    max-width: none;
  }
}

@media (max-width: 767px) {
  .community-page .co-cycle-inner {
    gap: 24px;
  }

  .community-page .co-cycle .co-head {
    align-self: stretch;
    align-items: flex-start;
    text-align: left;
  }

  .community-page .co-cycle-hub {
    width: 220px;
    margin-bottom: 32px;
  }

  .community-page .co-cycle-hub-text {
    padding: 0 52px;
    font-size: var(--text-ui-md);
  }

  .community-page .co-cycle-list {
    grid-template-columns: minmax(0, 1fr);
    gap: 28px;
  }

  .community-page .co-cycle-num {
    font-size: var(--text-ui-tile);
  }
}

.community-page .co-mentor-paths {
  padding: 96px 0;
  background: var(--surface-soft);
}

.community-page .co-mentor-paths .co-head {
  margin-bottom: 36px;
}

.community-page .co-mentor-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 24px;
}

.community-page .co-mentor-card {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 16px;
  padding: 32px;
  border: 1px solid var(--line-soft);
  border-radius: var(--ds-radius-lg);
  background: #fff;
  box-shadow: var(--shadow-card);
}

.community-page .co-mentor-card h3 {
  font-size: var(--text-ui-panel);
}

.community-page .co-mentor-card > p {
  margin: 0;
  color: var(--muted-ui);
  font-size: var(--text-ui-md);
  line-height: 1.6;
}

.community-page .co-mentor-points {
  display: flex;
  flex-direction: column;
  gap: 10px;
  margin: 0 0 8px;
  padding: 0;
  list-style: none;
}

.community-page .co-mentor-points li {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  color: var(--ink-strong);
  font-size: var(--text-ui);
  font-weight: 600;
  line-height: 1.5;
}

.community-page .co-mentor-tick {
  flex-shrink: 0;
  display: grid;
  place-items: center;
  width: 22px;
  height: 22px;
  margin-top: 1px;
  border-radius: var(--radius-round);
  background: var(--cyan-wash);
  color: var(--cyan-ink-strong);
}

.community-page .co-mentor-card.is-orange .co-mentor-tick {
  background: var(--orange-wash);
  color: var(--orange-ink);
}

.community-page .co-mentor-tick svg {
  width: 12px;
  height: 12px;
}

.community-page .co-mentor-card .pill-button {
  margin-top: auto;
}

/* FAQs: the heading beside the questions (also the Students page's "Good to know"). */
.community-page .co-mentor-faq {
  padding: 96px 0;
}

.community-page .co-mentor-faq-inner {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.6fr);
  align-items: start;
  gap: 80px;
}

.community-page .co-mentor-faq-list {
  border-top: 1px solid var(--line-soft);
}

.community-page .co-mentor-faq-item {
  border-bottom: 1px solid var(--line-soft);
}

.community-page .co-mentor-faq-item summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 22px 0;
  color: var(--ink-strong);
  font-family: var(--font-display);
  font-size: var(--text-ui-step);
  font-weight: 700;
  list-style: none;
  cursor: pointer;
}

.community-page .co-mentor-faq-item summary::-webkit-details-marker {
  display: none;
}

.community-page .co-mentor-faq-sign {
  position: relative;
  flex-shrink: 0;
  width: 32px;
  height: 32px;
  border-radius: var(--radius-round);
  background: var(--purple-tint-ui);
}

.community-page .co-mentor-faq-sign::before,
.community-page .co-mentor-faq-sign::after {
  content: "";
  position: absolute;
  left: 50%;
  top: 50%;
  width: 12px;
  height: 2px;
  border-radius: 2px;
  background: var(--purple);
  transform: translate(-50%, -50%);
}

.community-page .co-mentor-faq-sign::after {
  transform: translate(-50%, -50%) rotate(90deg);
}

.community-page .co-mentor-faq-item[open] .co-mentor-faq-sign::after {
  display: none;
}

.community-page .co-mentor-faq-item p {
  margin: 0;
  padding: 0 48px 22px 0;
  color: var(--muted-ui);
  font-size: var(--text-ui-md);
  line-height: 1.7;
}

.community-page .co-mentor-faq-item p a {
  color: var(--purple);
  font-weight: 700;
  text-decoration: underline;
}

/* The form's application choice: two large radio pills. */
.community-page .co-mentor-roles {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
  margin: 0;
  padding: 0;
  border: 0;
}

.community-page .co-mentor-roles legend {
  grid-column: 1 / -1;
  margin-bottom: 6px;
  padding: 0;
  color: var(--ink-strong);
  font-size: var(--text-ui-sm); /* As the form's labels. */
  font-weight: 700;
}

.community-page .co-mentor-role {
  position: relative;
  display: flex;
  cursor: pointer;
}

.community-page .co-mentor-role input {
  position: absolute;
  opacity: 0;
}

.community-page .co-mentor-role span {
  flex: 1;
  display: grid;
  place-items: center;
  min-height: var(--ds-button-md);
  padding: 8px 14px;
  border: 1px solid var(--line-control);
  border-radius: var(--radius-pill);
  background: var(--surface-soft);
  color: var(--ink-strong);
  font-size: var(--text-ui-sm);
  font-weight: 700;
  text-align: center;
  transition: background-color .15s ease, border-color .15s ease, color .15s ease;
}

.community-page .co-mentor-role input:checked + span {
  border-color: var(--purple);
  background: var(--purple);
  color: #fff;
}

.community-page .co-mentor-role input:focus-visible + span {
  outline: 3px solid var(--focus-ring);
  outline-offset: 2px;
}

.community-page .co-mentor-row {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 16px;
}

.community-page .co-mentor-closed p {
  color: var(--ink-strong);
  font-size: var(--text-ui-md);
}

.community-page .co-mentor-closed p a {
  color: var(--purple);
  font-weight: 700;
  text-decoration: underline;
}

@media (max-width: 1000px) {
  .community-page .co-mentor-faq-inner {
    grid-template-columns: minmax(0, 1fr);
    gap: 28px;
  }
}

@media (max-width: 767px) {
  .community-page .co-mentor-paths,
  .community-page .co-mentor-faq {
    padding: 56px 0;
  }

  .community-page .co-mentor-grid,
  .community-page .co-mentor-row {
    grid-template-columns: minmax(0, 1fr);
  }

  .community-page .co-mentor-card {
    padding: 22px;
  }

  .community-page .co-mentor-card .pill-button {
    justify-content: center;
    width: 100%;
  }

  .community-page .co-mentor-faq-item p {
    padding-right: 0;
  }

  /* Questions at 17px (UI/UX review: at 20px most wrapped to two lines, about 106px each). */
  .community-page .co-mentor-faq-item summary {
    padding: 18px 0;
    font-size: var(--text-ui-lead);
    line-height: 1.4;
  }
}
/* Mentorship hero, wide screens: a little more room for the heading, sized with the screen up to its usual 64px (from
   about 1360px), and balanced lines, so it breaks between its two sentences ("Grow with a mentor. / Grow as a
   mentor.") instead of "Grow with a / mentor. Grow / as a mentor." */
@media (min-width: 1181px) {
  .community-page .co-hero--mentor .co-hero-grid {
    grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr);
  }

  .community-page .co-hero--mentor h1 {
    font-size: min(4.7vw, var(--text-hero));
    text-wrap: balance;
  }
}

/* Mentorship hero card (page-mentorship.php): a match as a graphic. */
.community-page .co-mentor-hero {
  position: relative;
  display: flex;
  justify-content: flex-end;
}

.community-page .co-mentor-match {
  display: flex;
  flex-direction: column;
  gap: 18px;
  margin: 0;
}

.community-page .co-mentor-graphic {
  display: block;
  width: 100%;
  height: auto;
  overflow: visible;
}

.community-page .co-mentor-arc-track {
  fill: none;
  stroke: var(--line-control);
  stroke-width: 3;
  stroke-linecap: round;
  stroke-dasharray: 1 9;
}

/* A short purple pulse travels from the mentee to the mentor. */
.community-page .co-mentor-arc-flow {
  fill: none;
  stroke: var(--purple);
  stroke-width: 3.5;
  stroke-linecap: round;
  stroke-dasharray: 16 100;
  stroke-dashoffset: 116;
  animation: co-mentor-flow 3.6s linear infinite;
}

@keyframes co-mentor-flow {
  to { stroke-dashoffset: 0; }
}

.community-page .co-mentor-marker circle {
  fill: #fff;
  stroke: var(--purple);
  stroke-width: 2.5;
}

.community-page .co-mentor-marker text {
  fill: var(--purple);
  font-family: var(--font-display);
  font-size: 12px;
  font-weight: 700;
}

.community-page .co-mentor-marker.is-last circle {
  fill: var(--join);
  stroke: var(--join);
}

.community-page .co-mentor-marker.is-last text {
  fill: var(--night-deep);
}

/* Markers appear one after another, once. */
.community-page .co-mentor-marker {
  transform-box: fill-box;
  transform-origin: center;
  animation: co-mentor-pop .45s ease-out both;
  animation-delay: calc(var(--i) * .14s + .2s);
}

@keyframes co-mentor-pop {
  from { opacity: 0; transform: scale(.4); }
  to { opacity: 1; transform: scale(1); }
}

.community-page .co-mentor-bubble rect,
.community-page .co-mentor-bubble path {
  fill: var(--purple);
}

.community-page .co-mentor-bubble circle {
  fill: #fff;
}

.community-page .co-mentor-person > circle {
  stroke-width: 2.5;
}

.community-page .co-mentor-person.is-mentee {
  color: var(--cyan-ink-strong);
}

.community-page .co-mentor-person.is-mentee > circle {
  fill: var(--cyan-wash);
  stroke: var(--highlight);
}

.community-page .co-mentor-person.is-mentor {
  color: var(--orange-ink);
}

.community-page .co-mentor-person.is-mentor > circle {
  fill: var(--orange-wash);
  stroke: var(--join);
}

.community-page .co-mentor-person text {
  fill: var(--ink-strong);
  font-family: var(--font-display);
  font-size: 15px;
  font-weight: 700;
}

.community-page .co-mentor-focus {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 8px;
  margin: 0;
  padding: 0;
  list-style: none;
}

/* 13px (UI/UX review: 12px was at the bottom of the comfortable range). */
.community-page .co-mentor-focus li {
  padding: 4px 12px;
  border-radius: var(--radius-pill);
  font-size: var(--text-ui-xs);
  font-weight: 700;
}

.community-page .co-mentor-focus .is-ways { background: var(--cyan-wash); color: var(--cyan-ink-strong); }
.community-page .co-mentor-focus .is-power { background: var(--orange-wash); color: var(--orange-ink); }
.community-page .co-mentor-focus .is-acumen { background: var(--purple-tint-ui); color: var(--purple); }

.community-page .co-mentor-stages {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 10px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.community-page .co-mentor-stages li {
  display: flex;
  flex-direction: column;
  gap: 4px;
  padding: 14px;
  border-radius: var(--ds-radius-sm);
  background: rgba(255, 255, 255, .72);
}

.community-page .co-mentor-stages .co-mentor-stage-n {
  display: grid;
  place-items: center;
  width: 26px;
  height: 26px;
  margin-bottom: 4px;
  border-radius: var(--radius-round);
  background: var(--purple);
  color: #fff;
  font-family: var(--font-display);
  font-size: var(--text-ui-2xs);
  font-weight: 700;
}

.community-page .co-mentor-stages li:last-child .co-mentor-stage-n {
  background: var(--join);
  color: var(--night-deep);
}

.community-page .co-mentor-stages b {
  color: var(--ink-strong);
  font-family: var(--font-display);
  font-size: var(--text-ui-sm);
  line-height: 1.3;
}

.community-page .co-mentor-stages li > span:not(.co-mentor-stage-n) {
  color: var(--muted-ui);
  font-size: var(--text-ui-xs);
  font-weight: 600;
}

.community-page .co-mentor-close {
  margin: 0;
  color: var(--muted-ui);
  font-size: var(--text-ui-sm);
  font-weight: 600;
  text-align: center;
}

@media (prefers-reduced-motion: reduce) {
  .community-page .co-mentor-arc-flow {
    animation: none;
    stroke-dasharray: none;
    opacity: .35;
  }

  .community-page .co-mentor-marker {
    animation: none;
  }
}

@media (max-width: 1180px) {
  .community-page .co-mentor-hero {
    justify-content: flex-start;
  }
}

/* Tablets (UI/UX review: stacked at 540px wide, the hero was 1,190px tall): the card spans the width, the drawing on
   the left and the focus areas, stages and closing line beside it, as the Learning pages' hero cards. */
@media (min-width: 768px) and (max-width: 1180px) {
  .community-page .co-hero--mentor .co-hero-grid {
    gap: 40px;
  }

  .community-page .co-hero-media.co-mentor-hero {
    max-width: none;
    margin: 0;
  }

  .community-page .co-mentor-match {
    display: grid;
    grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr);
    grid-template-areas:
      "label label"
      "graphic focus"
      "graphic stages"
      "graphic close";
    grid-template-rows: auto auto auto auto;
    align-items: center;
    gap: 14px 36px;
    max-width: none;
  }

  .community-page .co-mentor-match > .glass-card-label { grid-area: label; }
  .community-page .co-mentor-graphic { grid-area: graphic; }
  .community-page .co-mentor-focus { grid-area: focus; justify-content: flex-start; }
  .community-page .co-mentor-stages { grid-area: stages; }
  .community-page .co-mentor-close { grid-area: close; text-align: left; }

  /* The stages one under the other beside the drawing, the number on the left. */
  .community-page .co-mentor-stages {
    grid-template-columns: minmax(0, 1fr);
    gap: 8px;
  }

  .community-page .co-mentor-stages li {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr);
    align-items: center;
    column-gap: 12px;
    padding: 10px 14px;
  }

  .community-page .co-mentor-stages .co-mentor-stage-n {
    grid-row: span 2;
    margin: 0;
  }
}

@media (max-width: 767px) {
  /* The card's label stays at 12px (the site's glass cards drop to 11px on phones). */
  .community-page .co-mentor-match .glass-card-label {
    font-size: var(--text-ui-2xs);
  }

  .community-page .co-mentor-stages {
    grid-template-columns: minmax(0, 1fr);
  }

  .community-page .co-mentor-stages li {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr);
    align-items: center;
    column-gap: 12px;
    padding: 10px 12px;
  }

  .community-page .co-mentor-stages .co-mentor-stage-n {
    grid-row: span 2;
    margin: 0;
  }
}
/* ==========================================================================
   Member insights (page-insights.php): the hero's "Write for us" card (the
   Membership "How to join" card's design: numbered circles in purple, cyan
   and orange joined by a thin line, Sora step titles), then all the insights
   as author-led cards.
   ========================================================================== */
.community-page .co-insight-hero {
  position: relative;
  display: flex;
  justify-content: flex-end;
}

.community-page .co-write-card {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.community-page .co-write-card h2 {
  margin: 0 0 12px;
  font-size: var(--text-ui-panel);
  line-height: 1.25;
}

.community-page .co-write-steps {
  margin: 0;
  padding: 0;
  list-style: none;
  counter-reset: write-step;
}

.community-page .co-write-steps li {
  position: relative;
  min-height: 40px;
  display: flex;
  flex-direction: column;
  gap: 4px;
  padding: 0 0 22px 58px;
  counter-increment: write-step;
}

.community-page .co-write-steps li::before {
  content: counter(write-step);
  position: absolute;
  left: 0;
  top: 0;
  width: 40px;
  height: 40px;
  display: grid;
  place-items: center;
  border-radius: var(--radius-round);
  background: var(--purple);
  color: #fff;
  font-family: var(--font-display);
  font-size: var(--text-ui-md);
  font-weight: 700;
}

.community-page .co-write-steps li:nth-child(2)::before {
  background: var(--highlight);
  color: var(--night-deep);
}

.community-page .co-write-steps li:nth-child(3)::before {
  background: var(--join);
  color: var(--night-deep);
}

/* The line from one step to the next. */
.community-page .co-write-steps li::after {
  content: "";
  position: absolute;
  left: 19px;
  top: 46px;
  bottom: 6px;
  width: 2px;
  background: rgba(79, 23, 168, .2);
}

.community-page .co-write-steps li:last-child {
  padding-bottom: 0;
}

.community-page .co-write-steps li:last-child::after {
  display: none;
}

.community-page .co-write-step-title {
  color: var(--ink-strong);
  font-family: var(--font-display);
  font-size: var(--text-ui-lg);
  font-weight: 700;
  line-height: 1.3;
}

.community-page .co-write-step-text {
  color: var(--muted-ui);
  font-size: var(--text-ui-sm);
  line-height: 1.55;
}

/* A hero card with the story's picture (hero-latest-story.php 'photo' => true): a card-sized title, over the section
   headings' size (.co h2); smaller on phones. */
.community-page .co .nlx-latest--photo h2 {
  font-size: var(--text-ui-panel);
  line-height: 1.25;
}

@media (max-width: 767px) {
  .community-page .co .nlx-latest--photo h2 {
    font-size: var(--text-ui-tile-sm);
  }
}

/* Volunteer spotlights: become the next spotlight: the heading beside the "Your turn" steps in a white card, on a soft band. */
.community-page .co-turn {
  padding: 96px 0;
  background: var(--surface-soft);
}

.community-page .co-turn-inner {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.2fr);
  align-items: center;
  gap: 64px;
}

.community-page .co-turn-steps {
  padding: 36px;
  border-radius: var(--radius-card);
  background: #fff;
  box-shadow: var(--shadow-card);
}

/* The closing panel after the steps (when the volunteer teams' strip is hidden) keeps the usual space above it. */
.community-page .co-turn + .co-cta {
  padding-top: 96px;
}

@media (max-width: 1000px) {
  .community-page .co-turn-inner {
    grid-template-columns: minmax(0, 1fr);
    gap: 28px;
  }
}

@media (max-width: 767px) {
  .community-page .co-turn {
    padding: 40px 0;
  }

  .community-page .co-turn-steps {
    padding: 22px;
    border-radius: var(--radius-xl);
  }

  .community-page .co-turn + .co-cta {
    padding-top: 40px;
  }
}

/* Author: photo or initials, name and title. */
.community-page .co-insight-author {
  display: flex;
  align-items: center;
  gap: 12px;
}

/* A larger author (UI/UX review: the name and role read small next to the title). */
.community-page .co-insight-avatar {
  flex-shrink: 0;
  width: 56px;
  height: 56px;
  border-radius: var(--radius-round);
  object-fit: cover;
}

.community-page .co-insight-avatar.is-initials {
  display: grid;
  place-items: center;
  background: var(--purple);
  color: #fff;
  font-family: var(--font-display);
  font-size: var(--text-ui-sm);
  font-weight: 700;
}

.community-page .co-insight-byline {
  display: flex;
  flex-direction: column;
  min-width: 0;
}

.community-page .co-insight-byline b {
  color: var(--ink-strong);
  font-family: var(--font-display);
  font-size: var(--text-ui-md);
}

.community-page .co-insight-byline small {
  color: var(--muted-ui);
  font-size: var(--text-ui-xs);
  font-weight: 600;
  line-height: 1.4;
}

.community-page .co-insights-list .co-head--row {
  margin-bottom: 36px;
}

.community-page .co-insights {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 24px;
}

.community-page .co-insight {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 14px;
  padding: 28px;
  border: 1px solid var(--line-soft);
  border-top: 4px solid var(--purple);
  border-radius: var(--ds-radius-lg);
  background: #fff;
  box-shadow: var(--shadow-card);
  transition: box-shadow .15s ease, transform .15s ease;
}

.community-page .co-insight:hover {
  transform: translateY(-2px);
}

.community-page .co-insight h3 {
  font-size: var(--text-ui-step);
}

.community-page .co-insight h3 a {
  color: var(--ink-strong);
}

.community-page .co-insight h3 a::after {
  content: "";
  position: absolute;
  inset: 0;
}

.community-page .co-insight:hover h3 a {
  color: var(--purple);
}

.community-page .co-insight > p {
  margin: 0;
  color: var(--muted-ui);
  font-size: var(--text-ui);
  line-height: 1.6;
}

.community-page .co-insight > .co-insight-meta {
  margin-top: auto;
  color: var(--purple);
  font-size: var(--text-ui-xs);
  font-weight: 700;
}

/* Member insights "voices wall" (template-parts/insight-voice.php): each insight a speech bubble with one lesson in
   the member's words, its tail pointing down to the author, then the story. Bubbles in lilac, cyan or soft orange by
   topic. The dashed "You" bubble fills the space left in the last row (--rest3 columns with three across, --rest2 with
   two, set by the template). The story's title is the link, stretched over the whole voice. */
.community-page .co-voices {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  align-items: start;
  gap: 48px 28px;
}

.community-page .co-voice {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 24px;
  color: var(--ink-strong);
}

/* Within a row, every voice shares one bubble height, so the authors and titles line up (subgrid: the voice's three
   parts are rows of the wall). Browsers without subgrid keep the stacked layout. */
@supports (grid-template-rows: subgrid) {
  .community-page .co-voices {
    align-items: stretch;
  }

  .community-page .co-voice {
    display: grid;
    grid-row: span 3;
    grid-template-rows: subgrid;
    row-gap: 22px;
  }

  .community-page .co-voice-who {
    align-self: start;
  }
}

.community-page .co-voice-bubble {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 12px;
  min-height: 190px;
  margin: 0;
  padding: 26px 26px 22px;
  border-radius: var(--radius-xl);
  background: var(--purple-wash-hover);
  transition: transform .15s ease;
}

/* The tail, pointing down to the author's photo. */
.community-page .co-voice-bubble::after {
  content: "";
  position: absolute;
  left: 38px;
  bottom: -13px;
  width: 26px;
  height: 26px;
  border-radius: 0 0 6px 0;
  background: inherit;
  transform: rotate(45deg);
}

.community-page .co-voice.is-cyan .co-voice-bubble { background: var(--cyan-wash); }
.community-page .co-voice.is-orange .co-voice-bubble { background: var(--orange-wash); }

.community-page .co-voice:hover .co-voice-bubble {
  transform: translateY(-2px);
}

.community-page .co-voice-mark {
  height: 20px;
  color: var(--join);
  font-family: var(--font-display);
  font-size: 44px;
  font-weight: 700;
  line-height: .9;
}

/* The lesson reads as a quote, not a headline: the reading font at medium weight, with room between lines, so the
   author's name stays the card's one strong line (UI/UX review, 2026-10-30: three bold lines per card were heavy). */
.community-page .co-voice-bubble p,
.community-page .co-voice-lesson {
  margin: 0;
  color: var(--ink);
  font-family: var(--font-ui);
  font-size: var(--text-ui-lead);
  font-weight: 500;
  line-height: 1.6;
}

.community-page .co-voice-topic {
  margin-top: auto;
  color: var(--purple);
  font-size: var(--text-ui-2xs);
  font-weight: 600;
  letter-spacing: .1em;
  text-transform: uppercase;
}

.community-page .co-voice.is-cyan .co-voice-topic { color: var(--cyan-ink-strong); }
.community-page .co-voice.is-orange .co-voice-topic { color: var(--orange-ink); }

.community-page .co-voice-who {
  display: grid;
  grid-template-columns: 56px minmax(0, 1fr);
  align-items: center;
  gap: 2px 14px;
  padding-left: 22px;
}

.community-page .co-voice-avatar {
  grid-row: 1 / span 2;
  width: 56px;
  height: 56px;
  border-radius: var(--radius-round);
  box-shadow: 0 0 0 4px #fff, 0 0 0 5px var(--line-control);
  object-fit: cover;
}

.community-page .co-voice-avatar.is-initials {
  display: grid;
  place-items: center;
  background: var(--purple);
  color: #fff;
  font-family: var(--font-display);
  font-size: var(--text-ui-sm);
  font-weight: 700;
}

.community-page .co-voice-name {
  align-self: end;
  color: var(--ink-strong);
  font-family: var(--font-display);
  font-size: var(--text-ui-md);
  font-weight: 600;
}

.community-page .co-voice-role {
  align-self: start;
  color: var(--muted-ui);
  font-size: var(--text-ui-xs);
  font-weight: 400;
  line-height: 1.4;
}

/* The story under the author, on a thin line down from the photo. */
.community-page .co-voice-story {
  display: flex;
  flex-direction: column;
  gap: 6px;
  margin-left: 49px;
  padding: 2px 0 2px 20px;
  border-left: 2px solid var(--line-soft);
}

.community-page .co-voice-story h3 {
  margin: 0;
  font-size: var(--text-ui-md);
  font-weight: 600;
  line-height: 1.4;
}

.community-page .co-voice-story h3 a {
  color: var(--ink-strong);
  transition: color .15s ease;
}

.community-page .co-voice-story h3 a::after {
  content: "";
  position: absolute;
  inset: 0;
}

.community-page .co-voice:hover h3 a {
  color: var(--purple);
}

.community-page .co-voice-story h3 a:focus-visible {
  outline: none;
}

.community-page .co-voice:has(h3 a:focus-visible) {
  border-radius: var(--radius-xl);
  outline: 3px solid var(--focus-ring);
  outline-offset: 6px;
}

.community-page .co-voice-meta {
  margin: 0;
  color: var(--muted-ui);
  font-size: var(--text-ui-xs);
  font-weight: 400;
}

.community-page .co-voice-meta b {
  color: var(--purple);
  font-weight: 600;
}

/* "You": a dashed, empty bubble for the next member, across the space left in the row. */
.community-page .co-voice.is-you {
  grid-column: span var(--rest3, 1);
}

.community-page .co-voice.is-you .co-voice-bubble {
  justify-content: center;
  border: 2px dashed var(--line-control);
  background: #fff;
}

.community-page .co-voice.is-you .co-voice-bubble::after {
  bottom: -15px;
  border-right: 2px dashed var(--line-control);
  border-bottom: 2px dashed var(--line-control);
  background: #fff;
}

.community-page .co-voice.is-you:hover .co-voice-bubble {
  border-color: var(--purple);
}

/* "Your story could be next": an invitation, so a heading (display font), unlike the members' quotes. */
.community-page .co-voice.is-you .co-voice-lesson {
  color: var(--muted-strong);
  font-family: var(--font-display);
  font-size: var(--text-ui-lg);
  font-weight: 600;
  line-height: 1.35;
}

.community-page .co-voice-text {
  max-width: 52ch;
  color: var(--muted-ui);
  font-size: var(--text-ui);
  line-height: 1.55;
}

.community-page .co-voice-cta {
  display: inline-flex;
  align-items: center;
  width: max-content;
  min-height: var(--ds-button-sm);
  margin-top: 4px;
  padding: 0 18px;
  border-radius: var(--radius-pill);
  background: var(--purple);
  color: #fff;
  font-size: var(--text-ui-sm);
  font-weight: 700;
}

.community-page .co-voice-avatar.is-you {
  display: grid;
  place-items: center;
  border: 2px dashed var(--purple);
  background: #fff;
  box-shadow: none;
  color: var(--purple);
  font-family: var(--font-display);
  font-size: 24px;
  font-weight: 700;
}

.community-page .co-voice.is-you:focus-visible {
  border-radius: var(--radius-xl);
  outline: 3px solid var(--focus-ring);
  outline-offset: 6px;
}

@media (prefers-reduced-motion: reduce) {
  .community-page .co-voice-bubble,
  .community-page .co-voice-story h3 a {
    transition: none;
  }
}

/* Volunteer spotlights "stage" (template-parts/spotlight-stage.php, assets/js/spotlight-stage.js): one volunteer at a
   time on a large tinted card (portrait, quote, name, role, one link), chosen from a row of faces with first names
   (UI/UX review, 2026-10-30: the voices wall showed nine quotes, titles and dates at once, too much text). */
.community-page .co-stage {
  display: grid;
  gap: 32px;
}

.community-page .co-stage-card {
  display: grid;
  grid-template-columns: 340px minmax(0, 1fr);
  align-items: center;
  gap: 64px;
  min-height: 420px;
  padding: 40px 64px 40px 40px;
  border-radius: var(--radius-xl);
  background: var(--purple-wash-hover);
}

.community-page .co-stage-card[hidden] {
  display: none;
}

.community-page .co-stage-card.is-cyan { background: var(--cyan-wash); }
.community-page .co-stage-card.is-orange { background: var(--orange-wash); }

.community-page .co-stage-card.is-entering {
  animation: co-stage-in .35s ease both;
}

@keyframes co-stage-in {
  from { opacity: 0; transform: translateY(6px); }
  to { opacity: 1; transform: none; }
}

.community-page .co-stage-photo img,
.community-page .co-stage-initials {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 1;
  border-radius: var(--radius-xl);
  box-shadow: 0 0 0 6px #fff;
  object-fit: cover;
  object-position: center top;
}

.community-page .co-stage-initials {
  display: grid;
  place-items: center;
  background: var(--purple);
  color: #fff;
  font-family: var(--font-display);
  font-size: 3rem;
  font-weight: 700;
}

.community-page .co-stage-body {
  display: flex;
  flex-direction: column;
  gap: 20px;
  max-width: 680px;
}

.community-page .co-stage-mark {
  height: 28px;
  color: var(--join);
  font-family: var(--font-display);
  font-size: 64px;
  font-weight: 700;
  line-height: .9;
}

.community-page .co-stage-quote {
  margin: 0;
}

.community-page .co-stage-quote p {
  margin: 0;
  color: var(--ink-strong);
  font-family: var(--font-display);
  font-size: clamp(1.25rem, 1rem + .9vw, 1.625rem);
  font-weight: 500;
  line-height: 1.45;
}

.community-page .co-stage-who {
  display: flex;
  flex-direction: column;
  gap: 2px;
  margin: 0;
}

.community-page .co-stage-name {
  color: var(--ink-strong);
  font-family: var(--font-display);
  font-size: var(--text-ui-md);
  font-weight: 600;
}

.community-page .co-stage-role {
  color: var(--muted-ui);
  font-size: var(--text-ui-xs);
}

.community-page .co-stage-link {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  width: max-content;
  min-height: 44px;
  color: var(--purple);
  font-size: var(--text-ui);
  font-weight: 600;
}

.community-page .co-stage-link svg {
  width: 18px;
  height: 18px;
  transition: transform .15s ease;
}

.community-page .co-stage-link:hover {
  text-decoration: underline;
  text-underline-offset: 4px;
}

.community-page .co-stage-link:hover svg {
  transform: translateX(3px);
}

/* The faces: photo and first name; the chosen one ringed in purple. */
.community-page .co-stage-faces {
  position: relative;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 12px 20px;
  padding: 6px;
}

.community-page .co-stage-face {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  width: 80px;
  color: var(--muted-ui);
  font-size: var(--text-ui-xs);
  font-weight: 500;
  text-align: center;
  text-decoration: none;
}

.community-page .co-stage-face-img {
  width: 64px;
  height: 64px;
  border-radius: var(--radius-round);
  box-shadow: 0 0 0 3px #fff, 0 0 0 4px var(--line-control);
  object-fit: cover;
  object-position: center top;
  opacity: .78;
  transition: opacity .15s ease, box-shadow .15s ease;
}

.community-page .co-stage-face-img.is-initials {
  display: grid;
  place-items: center;
  background: var(--purple);
  color: #fff;
  font-family: var(--font-display);
  font-size: var(--text-ui-sm);
  font-weight: 700;
}

.community-page .co-stage-face:hover .co-stage-face-img,
.community-page .co-stage-face[aria-selected="true"] .co-stage-face-img,
.community-page .co-stage-face[aria-current="true"] .co-stage-face-img {
  opacity: 1;
}

.community-page .co-stage-face[aria-selected="true"] .co-stage-face-img,
.community-page .co-stage-face[aria-current="true"] .co-stage-face-img {
  box-shadow: 0 0 0 3px #fff, 0 0 0 6px var(--purple);
}

.community-page .co-stage-face:hover,
.community-page .co-stage-face[aria-selected="true"],
.community-page .co-stage-face[aria-current="true"] {
  color: var(--ink-strong);
}

.community-page .co-stage-face[aria-selected="true"],
.community-page .co-stage-face[aria-current="true"] {
  font-weight: 600;
}

.community-page .co-stage-face:focus-visible {
  outline: none;
}

.community-page .co-stage-face:focus-visible .co-stage-face-img {
  box-shadow: 0 0 0 3px #fff, 0 0 0 6px var(--focus-ring);
}

.community-page .co-stage-face-img.is-you {
  display: grid;
  place-items: center;
  border: 2px dashed var(--purple);
  background: #fff;
  box-shadow: none;
  color: var(--purple);
  font-family: var(--font-display);
  font-size: 24px;
  font-weight: 700;
  opacity: 1;
}

.community-page .co-stage-face.is-you {
  color: var(--purple);
  font-weight: 600;
}

@media (prefers-reduced-motion: reduce) {
  .community-page .co-stage-card.is-entering {
    animation: none;
  }

  .community-page .co-stage-link svg,
  .community-page .co-stage-face-img {
    transition: none;
  }
}

/* Words from the Board "letterbox" (page-words.php): a wall of quarterly mail slots, one row per year, a column per
   quarter; each letter an envelope (template-parts/board-letter.php). Built on the letters, not on the current Board,
   so it keeps every letter when the Board changes. The section is a full-width lilac band (the owner's request). */
.community-page .co-words-list {
  padding: 96px 0;
  background: var(--purple-wash-hover);
}

/* The closing panel after the band: its own space above, off the band's edge. */
.community-page .co-words-list + .co-cta {
  padding-top: 96px;
}

.community-page .co-lbox {
  padding: 0;
}

.community-page .co-lbox-cols,
.community-page .co-lbox-year {
  display: grid;
  grid-template-columns: 96px minmax(0, 1fr);
  gap: 16px;
}

.community-page .co-lbox-cols {
  grid-template-columns: 96px repeat(4, minmax(0, 1fr));
  margin-bottom: 12px;
}

.community-page .co-lbox-cols span {
  color: var(--muted-strong);
  font-size: var(--text-ui-2xs);
  font-weight: 700;
  letter-spacing: .12em;
  text-align: center;
  text-transform: uppercase;
}

.community-page .co-lbox-year + .co-lbox-year {
  margin-top: 16px;
}

.community-page .co-lbox-year-label {
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 2px;
  margin: 0;
  color: var(--ink-strong);
  font-family: var(--font-display);
  font-size: var(--text-ui-panel);
  font-weight: 700;
}

.community-page .co-lbox-year-label small {
  color: var(--muted-strong);
  font-family: var(--font-ui);
  font-size: var(--text-ui-xs);
  font-weight: 600;
}

.community-page .co-lbox-slots {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 16px;
  margin: 0;
  padding: 0;
  list-style: none;
}

/* A slot: the recess of a mail slot (inner shadow at the top), with its letters, or empty. */
.community-page .co-lbox-slot {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 12px;
  min-height: 240px;
  padding: 16px;
  border-radius: 18px;
  background: #fff;
  box-shadow: inset 0 6px 0 rgba(26, 11, 69, .06), inset 0 0 0 1px var(--line-soft);
}

.community-page .co-lbox-slot.is-empty,
.community-page .co-lbox-slot.is-next,
.community-page .co-lbox-slot.is-later {
  align-items: center;
  justify-content: center;
  text-align: center;
}

.community-page .co-lbox-slot.is-empty {
  border: 2px dashed var(--line-control);
  background: transparent;
  box-shadow: none;
  color: var(--muted-strong);
  font-size: var(--text-ui-xs);
}

.community-page .co-lbox-slot.is-later {
  border: 2px dashed var(--line-soft);
  background: transparent;
  box-shadow: none;
}

.community-page .co-lbox-slot.is-next {
  border: 2px dashed var(--purple);
  box-shadow: none;
}

.community-page .co-lbox-slot.is-next b {
  color: var(--purple);
  font-family: var(--font-display);
  font-size: var(--text-ui-md);
}

.community-page .co-lbox-slot.is-next span:not(.visually-hidden) {
  max-width: 22ch;
  color: var(--muted-strong);
  font-size: var(--text-ui-xs);
}

/* The envelope: a flap drawn with two lines, a round seal with the author's initials, a tilted postmark. */
.community-page .co-env {
  position: relative;
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding: 132px 18px 16px;
  overflow: hidden;
  border: 1px solid var(--line-control);
  border-radius: 12px;
  background: #fff;
  box-shadow: 0 10px 24px rgba(42, 12, 102, .1);
  transition: transform .15s ease;
}

.community-page .co-env::before {
  content: "";
  position: absolute;
  top: 0;
  right: 0;
  left: 0;
  height: 72px;
  background:
    linear-gradient(to bottom right, transparent 49.5%, var(--line-control) 50%, transparent 51%) left / 50% 100% no-repeat,
    linear-gradient(to bottom left, transparent 49.5%, var(--line-control) 50%, transparent 51%) right / 50% 100% no-repeat;
}

.community-page .co-env:hover {
  transform: translateY(-3px);
}

/* The seal on the flap: the author's photo (else initials), in a white and purple ring; large, the owner's request. */
.community-page .co-env-seal {
  position: absolute;
  top: 24px;
  left: 50%;
  display: grid;
  place-items: center;
  width: 92px;
  height: 92px;
  margin-left: -46px;
  border-radius: var(--radius-round);
  background: var(--purple);
  box-shadow: 0 0 0 4px #fff, 0 0 0 7px var(--purple);
  color: #fff;
  font-family: var(--font-display);
  font-size: var(--text-ui-xl);
  font-weight: 700;
  object-fit: cover;
  object-position: 50% 12%; /* A portrait: keep the whole head in the circle (UI/UX review: hair clipped at the top). */
}

.community-page .co-env-post {
  position: absolute;
  top: 12px;
  right: 12px;
  display: grid;
  place-content: center;
  width: 48px;
  height: 48px;
  border: 2px dashed var(--orange-ink);
  border-radius: var(--radius-round);
  background: #fff;
  color: var(--orange-ink);
  font-size: var(--text-ui-3xs);
  font-weight: 700;
  line-height: 1.05;
  text-align: center;
  transform: rotate(-12deg);
}

.community-page .co-env-post b {
  font-family: var(--font-display);
  font-size: var(--text-ui-sm);
}

.community-page .co-env h4 {
  margin: 0;
  font-family: var(--font-display);
  font-size: var(--text-ui-lg);
  line-height: 1.3;
}

.community-page .co-env h4 a {
  color: var(--ink-strong);
  transition: color .15s ease;
}

.community-page .co-env h4 a::after {
  content: "";
  position: absolute;
  inset: 0;
}

.community-page .co-env:hover h4 a {
  color: var(--purple);
}

.community-page .co-env h4 a:focus-visible {
  outline: none;
}

.community-page .co-env:has(h4 a:focus-visible) {
  outline: 3px solid var(--focus-ring);
  outline-offset: 2px;
}

/* The signature under a dashed rule, as at the foot of a letter. */
.community-page .co-env-sign {
  display: flex;
  flex-direction: column;
  margin: auto 0 0;
  padding-top: 10px;
  border-top: 1px dashed var(--line-control);
  color: var(--muted-ui);
  font-size: var(--text-ui-xs);
}

.community-page .co-env-sign b {
  color: var(--ink-strong);
  font-family: var(--font-display);
  font-size: var(--text-ui-sm);
}

.community-page .co-env-go {
  margin: 0;
  color: var(--purple);
  font-size: var(--text-ui-xs);
  font-weight: 700;
}

@media (prefers-reduced-motion: reduce) {
  .community-page .co-env {
    transition: none;
  }
}

/* Narrower envelopes (four slots on small laptops): a slightly smaller photo, the postmark tucked into the corner. */
@media (max-width: 1180px) {
  .community-page .co-env {
    padding-top: 116px;
  }

  .community-page .co-env-seal {
    width: 76px;
    height: 76px;
    margin-left: -38px;
  }

  .community-page .co-env-post {
    top: 4px;
    right: 4px;
    width: 36px;
    height: 36px;
    font-size: 9px;
  }
}

.community-page .co-insights-empty {
  max-width: 640px;
  margin: 0;
  color: var(--muted-ui);
  font-size: var(--text-ui-md);
}

.community-page .co-insights-empty a {
  color: var(--purple);
  font-weight: 700;
  text-decoration: underline;
}

.community-page .co-insights-list .news-pagination {
  margin-top: 36px;
}

@media (max-width: 1180px) {
  .community-page .co-insight-hero {
    justify-content: flex-start;
  }
}

@media (max-width: 1000px) {
  .community-page .co-insights {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .community-page .co-voices {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .community-page .co-voice.is-you {
    grid-column: span var(--rest2, 1);
  }

  /* Spotlight stage on tablets: a smaller portrait. */
  .community-page .co-stage-card {
    grid-template-columns: 220px minmax(0, 1fr);
    gap: 36px;
    min-height: 0;
    padding: 32px;
  }

  /* Letterbox on small laptops: the year above its row of slots. */
  .community-page .co-lbox-year {
    grid-template-columns: minmax(0, 1fr);
    gap: 10px;
  }

  .community-page .co-lbox-year-label {
    flex-direction: row;
    align-items: baseline;
    gap: 10px;
  }

  .community-page .co-lbox-cols {
    display: none;
  }

  .community-page .co-lbox-slot::before {
    content: attr(data-q);
    position: absolute;
    top: -9px;
    left: 14px;
    padding: 0 6px;
    background: var(--purple-wash-hover);
    color: var(--muted-strong);
    font-size: var(--text-ui-3xs);
    font-weight: 700;
    letter-spacing: .1em;
  }

  .community-page .co-lbox-year + .co-lbox-year {
    margin-top: 24px;
  }
}

/* Letterbox on tablets and phones: the four quarters two by two. */
@media (max-width: 899px) {
  .community-page .co-lbox-slots {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 18px 12px;
  }
}

@media (max-width: 767px) {
  .community-page .co-insights {
    grid-template-columns: minmax(0, 1fr);
    gap: 14px;
  }

  /* Letterbox on phones: slimmer envelopes. */
  .community-page .co-words-list {
    padding: 40px 0;
  }

  .community-page .co-words-list + .co-cta {
    padding-top: 40px;
  }

  .community-page .co-lbox-slot {
    min-height: 170px;
    padding: 10px;
    border-radius: 14px;
  }

  .community-page .co-env {
    padding: 100px 10px 10px;
  }

  .community-page .co-env-post {
    top: 4px;
    right: 4px;
    width: 30px;
    height: 30px;
    font-size: 8px;
  }

  .community-page .co-env-post b {
    font-size: var(--text-ui-3xs);
  }

  .community-page .co-env-seal {
    top: 20px;
    width: 62px;
    height: 62px;
    margin-left: -31px;
  }

  .community-page .co-env h4 {
    font-size: var(--text-ui-sm);
  }

  .community-page .co-env-sign span {
    display: none;
  }

  /* Phones: the stage's portrait above the quote; the faces one row to swipe. */
  .community-page .co-stage {
    gap: 24px;
  }

  .community-page .co-stage-card {
    grid-template-columns: minmax(0, 1fr);
    gap: 20px;
    padding: 24px;
  }

  .community-page .co-stage-photo {
    width: 120px;
  }

  .community-page .co-stage-body {
    gap: 14px;
  }

  .community-page .co-stage-mark {
    height: 20px;
    font-size: 48px;
  }

  .community-page .co-stage-quote p {
    font-size: var(--text-ui-lg);
  }

  .community-page .co-stage-faces {
    flex-wrap: nowrap;
    justify-content: flex-start;
    gap: 12px;
    margin: 0 -16px;
    padding: 6px 16px 10px;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    scrollbar-width: thin;
  }

  .community-page .co-stage-face {
    flex: 0 0 72px;
    width: 72px;
    scroll-snap-align: start;
  }

  .community-page .co-stage-face-img {
    width: 56px;
    height: 56px;
  }

  /* Phones: the bubbles stack, "You" last. */
  .community-page .co-voices {
    grid-template-columns: minmax(0, 1fr);
    gap: 36px;
  }

  .community-page .co-voice.is-you {
    grid-column: auto;
  }

  .community-page .co-voice-bubble {
    min-height: 0;
    padding: 22px;
  }

  .community-page .co-voice-bubble p,
  .community-page .co-voice-lesson {
    font-size: var(--text-ui-md);
  }

  .community-page .co-voice-avatar {
    width: 48px;
    height: 48px;
  }

  .community-page .co-voice-who {
    grid-template-columns: 48px minmax(0, 1fr);
    padding-left: 18px;
  }

  .community-page .co-voice-story {
    margin-left: 41px;
  }

  .community-page .co-insight-avatar {
    width: 48px;
    height: 48px;
  }

  .community-page .co-insight {
    padding: 22px;
  }

  .community-page .co-write-card h2 {
    margin-bottom: 8px;
  }

  .community-page .co-write-steps li {
    min-height: 34px;
    gap: 3px;
    padding: 0 0 18px 48px;
  }

  .community-page .co-write-steps li::before {
    width: 34px;
    height: 34px;
  }

  .community-page .co-write-steps li::after {
    left: 16px;
    top: 38px;
    bottom: 4px;
  }

  .community-page .co-write-steps li:last-child {
    padding-bottom: 0;
  }

  .community-page .co-write-step-title {
    font-size: var(--text-ui-md);
  }

  .community-page .co-write-step-text {
    font-size: var(--text-ui-xs);
    line-height: 1.5;
  }
}
/* ==========================================================================
   Interest groups (page-groups.php): the glance card and the group cards.
   ========================================================================== */
.community-page .co-group-hero {
  position: relative;
  display: flex;
  justify-content: flex-end;
}

.community-page .co-group-glance {
  display: flex;
  flex-direction: column;
  gap: 14px;
}

.community-page .co-group-counts {
  margin: 0;
  color: var(--muted-ui);
  font-size: var(--text-ui);
  font-weight: 600;
  text-align: center;
}

.community-page .co-group-counts b {
  color: var(--ink-strong);
  font-family: var(--font-display);
  font-size: var(--text-ui-lg);
}

.community-page .co-group-names {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 8px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.community-page .co-group-names li {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 6px 12px;
  border-radius: var(--radius-pill);
  background: rgba(255, 255, 255, .78);
  color: var(--ink-strong);
  font-size: var(--text-ui-xs);
  font-weight: 700;
}

.community-page .co-group-names li::before {
  content: "";
  width: 8px;
  height: 8px;
  border-radius: var(--radius-round);
  background: var(--purple);
}

.community-page .co-group-names li.is-tone-0::before { background: var(--highlight); }
.community-page .co-group-names li.is-tone-1::before { background: var(--join); }
.community-page .co-group-names li.is-more::before { content: none; }

.community-page .co-group-empty {
  margin: 0;
  color: var(--muted-ui);
  font-size: var(--text-ui-sm);
  text-align: center;
}

/* The groups come straight after the hero (UI/UX review: "How it works" pushed them two screens down), on white;
   "How it works" follows on the soft band. */
.community-page .co-groups-list {
  padding: 96px 0;
  background: #fff;
}

.community-page .co-hero--fit + .co-groups-list {
  padding-top: 96px; /* As after every hero (was 72px). */
}

.community-page .co-groups-list .co-head {
  margin-bottom: 36px;
}

.community-page .co-groups {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 24px;
}

.community-page .co-group {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 14px;
  padding: 28px;
  border: 1px solid var(--line-soft);
  border-radius: var(--ds-radius-lg);
  background: #fff;
  box-shadow: var(--shadow-card);
}

.community-page .co-group:target {
  outline: 3px solid var(--focus-ring);
  outline-offset: 2px;
}

.community-page .co-group-top {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}

.community-page .co-group-status,
.community-page .co-group-pillar {
  padding: 3px 10px;
  border-radius: var(--radius-pill);
  font-size: var(--text-ui-2xs);
  font-weight: 700;
}

.community-page .co-group-status.is-active { background: var(--purple); color: #fff; }
.community-page .co-group-status.is-forming { border: 1px dashed var(--purple); color: var(--purple); }
.community-page .co-group-pillar.is-ways { background: var(--cyan-wash); color: var(--cyan-ink-strong); }
.community-page .co-group-pillar.is-power { background: var(--orange-wash); color: var(--orange-ink); }
.community-page .co-group-pillar.is-acumen { background: var(--purple-tint-ui); color: var(--purple); }

.community-page .co-group h3 {
  font-size: var(--text-ui-panel);
}

.community-page .co-group > p {
  margin: 0;
  color: var(--muted-ui);
  font-size: var(--text-ui);
  line-height: 1.6;
}

.community-page .co-group-facts {
  display: flex;
  flex-direction: column;
  gap: 6px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.community-page .co-group-facts li {
  display: flex;
  align-items: center;
  gap: 8px;
  color: var(--ink-strong);
  font-size: var(--text-ui-sm);
  font-weight: 600;
}

.community-page .co-group-facts svg {
  flex-shrink: 0;
  width: 16px;
  height: 16px;
  color: var(--purple);
}

.community-page .co-group-leads {
  display: flex;
  align-items: center;
  gap: 10px;
}

.community-page .co-group-avatars {
  display: flex;
}

.community-page .co-group-avatars img,
.community-page .co-group-avatars span {
  width: 36px;
  height: 36px;
  border: 2px solid #fff;
  border-radius: var(--radius-round);
  object-fit: cover;
}

.community-page .co-group-avatars > * + * {
  margin-left: -10px;
}

.community-page .co-group-avatars span {
  display: grid;
  place-items: center;
  background: var(--purple);
  color: #fff;
  font-family: var(--font-display);
  font-size: 12px;
  font-weight: 700;
}

.community-page .co-group-led {
  display: flex;
  flex-direction: column;
  color: var(--ink-strong);
  font-size: var(--text-ui-sm);
  font-weight: 700;
  line-height: 1.35;
}

.community-page .co-group-led small {
  color: var(--muted-ui);
  font-size: var(--text-ui-2xs);
  font-weight: 600;
}

/* A 44px tap area without moving the line (padding with a matching negative margin). */
.community-page .co-group-more summary {
  padding-block: 11px;
  margin-block: -11px;
  color: var(--purple);
  font-size: var(--text-ui-sm);
  font-weight: 700;
  cursor: pointer;
}

.community-page .co-group-more p {
  margin: 8px 0 0;
  color: var(--muted-ui);
  font-size: var(--text-ui-sm);
  line-height: 1.6;
}

.community-page .co-group-join {
  margin-top: auto;
}

.community-page .co-group-closed {
  margin: auto 0 0;
  color: var(--muted-strong);
  font-size: var(--text-ui-sm);
  font-weight: 600;
}

.community-page .co-groups-empty {
  max-width: 640px;
  margin: 0;
  color: var(--muted-ui);
  font-size: var(--text-ui-md);
}

.community-page .co-groups-empty a {
  color: var(--purple);
  font-weight: 700;
  text-decoration: underline;
}

@media (max-width: 1180px) {
  .community-page .co-group-hero {
    justify-content: flex-start;
  }
}

@media (max-width: 1000px) {
  .community-page .co-groups {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 767px) {
  .community-page .co-groups-list {
    padding: 56px 0;
  }

  .community-page .co-groups {
    grid-template-columns: minmax(0, 1fr);
    gap: 14px;
  }

  .community-page .co-group {
    padding: 22px;
  }

  .community-page .co-group-join {
    justify-content: center;
    width: 100%;
  }
}

/* UI/UX review, 2026-10-27 ------------------------------------------------------------------------------------------ */
/* Hero fitted to its content (as the list pages' .hero--fit), side by side down to 900px (was 975px tall at 1024). */
@media (min-width: 768px) {
  main > .co-hero.co-hero--fit { min-height: 0; } /* Foot: every hero's 96px (was 72px; uniform heroes, 2026-10-27). */
  .community-page .co-hero--fit .co-hero-text { padding-top: 16px; }
}
/* Text and card side by side down to 768px (UI/UX review: stacked at 820px the hero was about 800px tall). */
@media (min-width: 768px) and (max-width: 1180px) {
  .community-page .co-hero--fit .co-hero-grid:not(.co-hero-grid--single) { grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr); gap: 32px; }
  .community-page .co-hero--fit .co-hero-text { max-width: none; padding-top: 0; }
  .community-page .co-hero--fit h1 { font-size: clamp(2.5rem, 4.4vw, 3.25rem); } /* As the other side-by-side heroes (was 36px at 768px). */
  .community-page .co-hero--fit .co-hero-lead { font-size: var(--text-ui-md); }
  .community-page .co-hero--fit .co-hero-media { max-width: none; margin: 0; }
  .community-page .co-hero--fit .co-group-hero { justify-content: flex-end; }
  .community-page .co-hero--fit .glass-card { padding: 22px; }
}

/* Glance card: left-aligned; with groups, a rotator showing every group in turn (its photo whole at 16:10, its name and
   status on a solid Night label under it, never over the photo), dots to pick one and a pause button, then the counts;
   without groups, a dashed "+" frame. 16px text, a 12px label on phones too. Nothing tied to the PMI Talent Triangle®:
   groups can be just for fun. */
.community-page .co-group-glance { align-items: flex-start; }
.community-page .co-group-glance .glass-card-label { font-size: var(--text-ui-2xs); }
.community-page .co-rotator { display: flex; flex-direction: column; gap: 12px; width: 100%; }
.community-page .co-rotator-slides { display: grid; }
.community-page .co-rotator-slide { grid-area: 1 / 1; display: flex; flex-direction: column; overflow: hidden; border-radius: var(--radius-xl); background: var(--night-deep); box-shadow: var(--shadow-card); color: #fff; text-decoration: none; opacity: 0; visibility: hidden; transition: opacity .6s ease, visibility 0s .6s; }
.community-page .co-rotator-slide.is-current { opacity: 1; visibility: visible; transition: opacity .6s ease; }
.community-page .co-rotator-slide:hover { color: #fff; }
.community-page .co-rotator-slide:focus-visible { outline: 3px solid var(--focus-ring); outline-offset: 3px; }
.community-page .co-rotator-photo { position: relative; overflow: hidden; aspect-ratio: 16 / 10; }
.community-page .co-rotator-photo .co-strip-img { transition: transform .5s ease; }
.community-page .co-rotator-slide:hover .co-strip-img { transform: scale(1.04); }
.community-page .co-rotator-photo .co-strip-none span { font-size: 3rem; }
.community-page .co-rotator-caption { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 12px 16px; }
.community-page .co-rotator-caption b { display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; min-width: 0; overflow: hidden; font: 700 var(--text-ui-md)/1.3 var(--font-display); }
.community-page .co-rotator-state { flex-shrink: 0; padding: 2px 9px; border: 1px solid rgba(255, 255, 255, .45); border-radius: var(--radius-pill); color: var(--on-night); font: 700 var(--text-ui-2xs) var(--font-ui); }
.community-page .co-rotator-state.is-active { border-color: transparent; background: var(--cyan-light); color: var(--night-deep); }
.community-page .co-rotator-controls { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.community-page .co-rotator-dots { display: flex; flex-wrap: wrap; }
.community-page .co-rotator-dot { display: grid; place-items: center; width: 28px; height: 28px; padding: 0; border: 0; background: transparent; cursor: pointer; }
.community-page .co-rotator-dot::before { content: ""; width: 10px; height: 10px; border-radius: var(--radius-pill); background: var(--line-control); transition: width .3s ease, background-color .3s ease; }
.community-page .co-rotator-dot:hover::before { background: var(--violet); }
.community-page .co-rotator-dot[aria-current="true"]::before { width: 24px; background: var(--purple); }
.community-page .co-rotator-pause { display: grid; place-items: center; width: 36px; height: 36px; padding: 0; border: 1px solid var(--line-control); border-radius: var(--radius-round); background: #fff; color: var(--purple); cursor: pointer; }
.community-page .co-rotator-pause:hover { border-color: var(--purple); }
.community-page .co-rotator-pause svg { width: 16px; height: 16px; }
.community-page .co-rotator-pause .is-play, .community-page .co-rotator-pause.is-stopped .is-pause { display: none; }
.community-page .co-rotator-pause.is-stopped .is-play { display: block; }
.community-page :is(.co-rotator-dot, .co-rotator-pause):focus-visible { outline: 3px solid var(--focus-ring); outline-offset: 2px; border-radius: var(--radius-pill); }
.community-page .co-glance-photo.is-new { display: grid; place-items: center; width: 96px; height: 96px; border: 2px dashed var(--line-control); border-radius: var(--radius-xl); background: rgba(255, 255, 255, .6); color: var(--purple); font: 700 2rem/1 var(--font-display); }
.community-page .co-group-glance .co-group-counts { text-align: left; font-size: var(--text-ui-md); }
.community-page .co-group-empty { color: var(--muted-ui); font-size: var(--text-ui-md); line-height: 1.55; text-align: left; }
@media (prefers-reduced-motion: reduce) {
  .community-page .co-rotator-slide, .community-page .co-rotator-slide.is-current, .community-page .co-rotator-photo .co-strip-img, .community-page .co-rotator-dot::before { transition: none; }
}

/* How it works: the Round Table. The steps beside one large table that follows the step being read (.is-live, from
   900px, page-groups.php's script); on phones, smaller screens and without JavaScript a small table beside each step. */
.community-page .co-table { padding: 88px 0; background: var(--surface-soft); }
.community-page .co-table-inner { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 500px); align-items: start; gap: 72px; }
.community-page .co-table-text { display: flex; flex-direction: column; gap: 32px; }
.community-page .co-table .co-head p a { padding-block: 4px; } /* A 30px target for the inline link. */
.community-page .co-table-steps { display: flex; flex-direction: column; gap: 12px; margin: 0; padding: 0; list-style: none; }
.community-page .co-table-step { display: grid; grid-template-columns: 132px minmax(0, 1fr); align-items: center; gap: 22px; padding: 18px 22px; border: 1px solid var(--line-soft); border-radius: var(--radius-xl); background: #fff; transition: background-color .3s ease, border-color .3s ease; }
.community-page .co-table-step-text { display: grid; grid-template-columns: auto minmax(0, 1fr); align-items: start; gap: 4px 14px; }
.community-page .co-table-number { grid-row: span 2; display: grid; place-items: center; width: 40px; height: 40px; border-radius: var(--radius-round); background: var(--orange-wash); color: var(--orange-ink); font-family: var(--font-display); font-size: var(--text-ui); font-weight: 700; transition: background-color .3s ease, color .3s ease; }
.community-page .co-table-step h3 { align-self: center; font-size: var(--text-ui-step); }
.community-page .co-table-step p { margin: 0; color: var(--muted-ui); font-size: var(--text-ui); line-height: 1.6; }
.community-page .co-table-stage { position: relative; display: none; }
.community-page .co-table-stage .co-blur.is-violet { left: 10%; top: 10%; width: 260px; height: 260px; background: var(--violet); opacity: .22; }
.community-page .co-table-stage .co-blur.is-orange { right: 6%; bottom: 8%; width: 220px; height: 220px; background: var(--join); opacity: .18; }
@media (min-width: 900px) {
  /* The heading across the top; the steps and the table side by side under it, both in view (a sticky table had too
     little room to stay pinned and slid under the menu at the third step). */
  .community-page .co-table.is-live .co-table-inner { grid-template-columns: minmax(0, 1fr) minmax(0, 440px); row-gap: 36px; }
  .community-page .co-table.is-live .co-table-text { display: contents; }
  .community-page .co-table.is-live .co-head { grid-column: 1 / -1; }
  .community-page .co-table.is-live .co-table-steps { grid-column: 1; align-self: center; }
  .community-page .co-table.is-live .co-table-stage { grid-column: 2; align-self: center; display: block; }
  .community-page .co-table.is-live .co-table-mini { display: none; }
  .community-page .co-table.is-live .co-table-step { grid-template-columns: minmax(0, 1fr); min-height: 132px; border-color: transparent; background: transparent; cursor: default; }
  .community-page .co-table.is-live .co-table-step.is-current { border-color: var(--line-soft); background: var(--surface-soft); }
  .community-page .co-table.is-live .co-table-step.is-current .co-table-number { background: var(--join); color: var(--night-deep); }
}
@media (max-width: 899px) {
  .community-page .co-table-inner { grid-template-columns: minmax(0, 1fr); gap: 0; }
}
@media (max-width: 767px) {
  .community-page .co-table { padding: 48px 0; }
  .community-page .co-hero--fit + .co-groups-list { padding-top: 40px; }
  .community-page .co-table-text { gap: 24px; }
  .community-page .co-table-step { grid-template-columns: 116px minmax(0, 1fr); gap: 14px; padding: 14px; }
  .community-page .co-table-step-text { grid-template-columns: minmax(0, 1fr); }
  .community-page .co-table-number { grid-row: auto; width: 32px; height: 32px; font-size: var(--text-ui-sm); }
  .community-page .co-table-step h3 { font-size: var(--text-ui-lg); }
}

/* The table itself (SVG, 400 × 400): scene 1 empty dashed seats and "You"; 2 the members and the conversation lines;
   3 the guest speaker, a new seat and the wider dashed circle. */
.co-table-svg { display: block; position: relative; width: 100%; height: auto; overflow: visible; }
.co-table-ring { fill: none; stroke: var(--line-control); stroke-width: 1.5; stroke-dasharray: 3 7; opacity: 0; transform-origin: 200px 200px; transform: scale(.88); transition: opacity .5s ease, transform .6s ease; }
.co-table-top { fill: var(--purple-wash-hover); stroke: var(--line-control); stroke-width: 1.5; }
/* A halo in the table's colour keeps the words readable where the conversation lines cross them. */
.co-table-topic, .co-table-sub { stroke: var(--purple-wash-hover); stroke-width: 6px; stroke-linejoin: round; paint-order: stroke; }
.co-table-topic { fill: var(--ink-strong); font-family: var(--font-display); font-size: 24px; font-weight: 700; }
.co-table-sub { fill: var(--muted-ui); font-family: var(--font-ui); font-size: 14px; font-weight: 600; }
.co-table-talk path { fill: none; stroke: var(--violet); stroke-width: 2; stroke-linecap: round; stroke-dasharray: 420; stroke-dashoffset: 420; opacity: .55; transition: stroke-dashoffset 1s ease; }
.co-table-empty { fill: #fff; stroke: var(--line-control); stroke-width: 1.5; stroke-dasharray: 4 4; }
.co-table-member, .co-table-head, .co-table-body { opacity: 0; transition: opacity .4s ease calc(var(--i, 0) * 70ms); }
.co-table-member { stroke-width: 3; }
.co-table-seat.is-ways .co-table-member { fill: var(--cyan-wash); stroke: var(--highlight); }
.co-table-seat.is-power .co-table-member { fill: var(--orange-wash); stroke: var(--join); }
.co-table-seat.is-acumen .co-table-member { fill: var(--purple-tint-ui); stroke: var(--purple); }
.co-table-head { fill: var(--muted-ui); }
.co-table-body { fill: none; stroke: var(--muted-ui); stroke-width: 2.5; stroke-linecap: round; }
.co-table-speaker, .co-table-new { opacity: 0; transition: opacity .4s ease, transform .5s ease; }
.co-table-speaker circle { fill: none; stroke: var(--join); stroke-width: 2.5; stroke-dasharray: 5 4; }
.co-table-speaker text { fill: var(--orange-ink); font-family: var(--font-ui); font-size: 14px; font-weight: 700; }
.co-table-new { transform-origin: 306px 306px; transform: scale(.6); }
.co-table-new circle { fill: #fff; stroke: var(--purple); stroke-width: 2.5; stroke-dasharray: 5 4; }
.co-table-new path { stroke: var(--purple); stroke-width: 3; stroke-linecap: round; }
.co-table-you circle { fill: var(--join); }
.co-table-you text { fill: var(--night-deep); font-family: var(--font-ui); font-size: 13px; font-weight: 800; }
.co-table-glow { opacity: .25; transform-origin: 200px 350px; animation: co-table-pulse 2.4s ease-in-out infinite; }
@keyframes co-table-pulse { 0%, 100% { opacity: .3; transform: scale(1); } 50% { opacity: 0; transform: scale(1.35); } }
.co-table-svg:is(.is-scene-2, .is-scene-3) .co-table-talk path { stroke-dashoffset: 0; }
.co-table-svg:is(.is-scene-2, .is-scene-3) :is(.co-table-member, .co-table-head, .co-table-body) { opacity: 1; }
.co-table-svg.is-scene-3 :is(.co-table-ring, .co-table-speaker) { opacity: 1; transform: none; }
.co-table-svg.is-scene-3 .co-table-new { opacity: 1; transform: none; }
/* The small tables beside the steps: a lighter drawing. */
.co-table-mini { width: 132px; }
.co-table-mini .co-table-sub, .co-table-mini .co-table-speaker text { display: none; }
@media (max-width: 767px) { .co-table-mini { width: 116px; } } /* 120px-ish, so the small scene reads (was 96px). */
@media (prefers-reduced-motion: reduce) {
  .co-table-glow { animation: none; }
  .co-table-svg *, .community-page .co-table-step, .community-page .co-table-number { transition: none !important; }
}

/* No group yet: topic ideas that open the form as a proposal, and "Your own topic". */
.community-page .co-groups-list .co-head p { max-width: 640px; }
.community-page .co-topic-ideas { display: grid; grid-template-columns: repeat(auto-fit, minmax(210px, 1fr)); gap: 16px; margin: 0; padding: 0; list-style: none; }
.community-page .co-topic-idea { display: flex; flex-direction: column; align-items: flex-start; gap: 12px; height: 100%; padding: 22px; border: 1px solid var(--line-soft); border-radius: var(--radius-xl); background: #fff; color: var(--ink-strong); text-decoration: none; transition: border-color .15s ease, box-shadow .15s ease; }
.community-page .co-topic-idea:hover { border-color: var(--line-control); box-shadow: var(--shadow-card); color: var(--ink-strong); }
.community-page .co-topic-idea:hover .co-topic-name { color: var(--purple); }
.community-page .co-topic-name { font-family: var(--font-display); font-size: var(--text-ui-lg); font-weight: 700; line-height: 1.3; transition: color .15s ease; }
.community-page .co-topic-cta { margin-top: auto; color: var(--purple); font-size: var(--text-ui-sm); font-weight: 700; }
.community-page .co-topic-idea.is-own { border: 1.5px dashed var(--line-control); background: transparent; }
.community-page .co-topic-plus { display: grid; place-items: center; width: 34px; height: 34px; border-radius: var(--radius-round); background: var(--purple-wash); color: var(--purple); font: 700 1.375rem/1 var(--font-display); }

/* The groups as expanding photo strips: each group's Group photo (what it does together: playing, meeting, building).
   From 900px with JavaScript (.is-live) a row of photo strips, one open (wide, its photo whole at 16:10), the others
   narrow with their name on a small tab at their foot, and the open group's details in a white panel under the row;
   below 900px, and without JavaScript, a photo card per group. A placeholder in one of three brand tones with the
   group's initials stands in until a photo is uploaded. */
.community-page .co-strips { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: 20px; }
.community-page .co-strip { position: relative; display: flex; flex-direction: column; overflow: hidden; border: 1px solid var(--line-soft); border-radius: var(--radius-card); background: #fff; box-shadow: var(--shadow-card); }
.community-page .co-strip-photo { position: relative; flex: none; overflow: hidden; aspect-ratio: 16 / 10; background: var(--night-deep); }
.community-page .co-strip-img { position: absolute; inset: 0; display: block; width: 100%; height: 100%; object-fit: cover; }
.community-page .co-strip-none { display: grid; place-items: center; background: linear-gradient(135deg, var(--purple) 0%, var(--night-deep) 100%); }
.community-page .co-strip-none.is-tone-0 { background: linear-gradient(135deg, #0B8FB0 0%, var(--night-deep) 100%); }
.community-page .co-strip-none.is-tone-1 { background: linear-gradient(135deg, #E0611A 0%, var(--night-deep) 100%); }
.community-page .co-strip-none span { color: rgba(255, 255, 255, .85); font: 700 clamp(2.5rem, 6vw, 4.5rem)/1 var(--font-display); letter-spacing: -.02em; }
.community-page .co-strip-tab { display: none; }
.community-page .co-strip-body.co-group { flex: 1; border: 0; border-radius: 0; box-shadow: none; }
.community-page .co-strip-body h3:focus { outline: none; }
.community-page .co-strip-new { align-items: center; justify-content: center; gap: 8px; min-height: 200px; padding: 28px; border: 2px dashed var(--line-control); background: transparent; box-shadow: none; color: var(--ink-strong); text-align: center; text-decoration: none; transition: border-color .15s ease, background-color .15s ease; }
.community-page .co-strip-new:hover { border-color: var(--purple); background: #fff; color: var(--ink-strong); }
.community-page .co-strip-new-plus { display: grid; place-items: center; width: 52px; height: 52px; border-radius: var(--radius-round); background: var(--purple-wash); color: var(--purple); font: 700 1.75rem/1 var(--font-display); }
.community-page .co-strip-new-name { font-family: var(--font-display); font-size: var(--text-ui-lg); font-weight: 700; }
.community-page .co-strip-new-text { color: var(--purple); font-size: var(--text-ui-sm); font-weight: 700; }

@media (min-width: 900px) {
  /* Photos only (the user's request, 2026-10-27: text over the photos hid them): the row is as tall as the open strip's
     photo at 16:10 (open strip about 6/9 of the width left by the gaps and "Start a new group"), so it shows whole. */
  .community-page .co-strips.is-live { display: flex; gap: 12px; height: calc((min(1280px, 100vw - 42px) - 198px) * .4167); }
  .community-page .co-strips.is-live .co-strip { flex: 1 1 0; min-width: 88px; border: 0; background: var(--night-deep); transition: flex-grow .55s cubic-bezier(.2, .7, .2, 1); }
  .community-page .co-strips.is-live .co-strip.is-current { flex-grow: 6; outline: 3px solid var(--purple); outline-offset: 3px; }
  .community-page .co-strips.is-live .co-strip-photo { position: absolute; inset: 0; aspect-ratio: auto; }
  .community-page .co-strips.is-live .co-strip:not(.is-current) .co-strip-img { filter: saturate(.85) brightness(.85); transition: filter .3s ease; }
  .community-page .co-strips.is-live .co-strip:not(.is-current):hover .co-strip-img { filter: none; }
  /* Placeholder (no photo yet): plain colour while closed; the initials in the middle when open. */
  .community-page .co-strips.is-live .co-strip:not(.is-current) .co-strip-none span { display: none; }
  .community-page .co-strips.is-live .co-strip.is-current .co-strip-none span { font-size: 5rem; opacity: .5; }
  /* Closed: the whole strip is the name button; the name on a small solid tab at its foot, not over the picture. */
  .community-page .co-strips.is-live .co-strip-tab { position: absolute; inset: 0; z-index: 2; display: block; padding: 0; border: 0; background: transparent; cursor: pointer; }
  .community-page .co-strips.is-live .co-strip-tab-name { position: absolute; left: 6px; right: 6px; bottom: 6px; display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 3; overflow: hidden; padding: 8px 6px; border-radius: var(--radius-sm); background: var(--night-deep); color: #fff; font: 700 var(--text-ui-xs)/1.25 var(--font-display); text-align: center; }
  .community-page .co-strips.is-live .co-strip-tab-state { display: none; }
  .community-page .co-strips.is-live .co-strip-tab:focus-visible { outline: 3px solid var(--focus-ring); outline-offset: -4px; border-radius: var(--radius-card); }
  .community-page .co-strips.is-live .co-strip.is-current .co-strip-tab { display: none; }
  /* "Start a new group": a dark strip like its neighbours, with a dashed outline. */
  .community-page .co-strips.is-live .co-strip.co-strip-new { flex: 0 0 150px; min-height: 0; border: 2px dashed rgba(255, 255, 255, .35); border-radius: var(--radius-card); background: var(--night-deep); color: #fff; }
  .community-page .co-strips.is-live .co-strip.co-strip-new:hover { border-color: var(--highlight); background: #241257; color: #fff; }
  .community-page .co-strips.is-live .co-strip-new-plus { background: rgba(255, 255, 255, .12); color: #fff; }
  .community-page .co-strips.is-live .co-strip-new-text { color: var(--cyan-light); }
  /* The details of the open group, on white under the row (page-groups.php's script moves each group's details here):
     status and focus areas, name, description and "More about this group" on the left; when and how it meets, its
     leads and "Join this group" on the right. */
  .community-page .co-strip-details { margin-top: 24px; }
  .community-page .co-strip-details .co-strip-body.co-group { display: none; }
  .community-page .co-strip-details .co-strip-body.co-group.is-current { display: grid; grid-template-columns: minmax(0, 1.6fr) minmax(0, 1fr); grid-auto-flow: row dense; align-items: start; gap: 12px 56px; padding: 32px 36px; border: 1px solid var(--line-soft); border-radius: var(--radius-card); background: #fff; box-shadow: var(--shadow-card); }
  .community-page .co-strip-details .co-strip-body > .co-group-top { grid-area: 1 / 1; }
  .community-page .co-strip-details .co-strip-body > h3 { grid-area: 2 / 1; }
  .community-page .co-strip-details .co-strip-body > p { grid-area: 3 / 1; }
  .community-page .co-strip-details .co-strip-body > .co-group-more { grid-area: 4 / 1; }
  .community-page .co-strip-details .co-strip-body > .co-group-facts { grid-area: 1 / 2; }
  .community-page .co-strip-details .co-strip-body > .co-group-leads { grid-area: 2 / 2; }
  .community-page .co-strip-details .co-strip-body > :is(.co-group-join, .co-group-closed) { grid-area: 3 / 2; justify-self: start; }
  .community-page .co-strip-details .co-strip-body h3 { font-size: 2rem; line-height: 1.15; }
  .community-page .co-strip-details .co-strip-body .co-group-join { margin-top: 6px; }
}
/* Phones: one row that swipes sideways, the next card peeking in, "Start a new group" last (UI/UX review: as a list,
   four groups took 2,868px; the Volunteer teams page uses the same pattern). */
@media (max-width: 767px) {
  .community-page .co-strips { grid-auto-flow: column; grid-auto-columns: 82%; grid-template-columns: none; gap: 12px; margin: 0 -21px; padding: 2px 21px 14px; overflow-x: auto; overscroll-behavior-x: contain; scroll-padding: 0 21px; scroll-snap-type: x mandatory; scrollbar-width: none; }
  .community-page .co-strips::-webkit-scrollbar { display: none; }
  .community-page .co-strips > * { scroll-snap-align: start; }
  .community-page .co-strip-body.co-group { gap: 10px; padding: 18px; }
  .community-page .co-strip-body h3 { font-size: var(--text-ui-lg); }
  .community-page .co-strip-body > p { display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 3; overflow: hidden; }
  .community-page .co-strip-body .co-group-join { width: 100%; }
  .community-page .co-strip-new { min-height: 0; }
}
@media (prefers-reduced-motion: reduce) {
  .community-page .co-strips.is-live .co-strip, .community-page .co-strips.is-live .co-strip-img, .community-page .co-strips.is-live .co-strip-body.co-group { transition: none; }
}

/* Form band: the text at the top beside the form (was centred in an 811px band), with "What happens next". */
.community-page .co-interest--top .co-interest-inner { align-items: start; }
@media (min-width: 900px) { .community-page .co-interest--top .co-interest-text { padding-top: 24px; } }
/* ==========================================================================
   Chapter awards (page-awards.php): the trophy card, the category cards and
   the winners by year.
   ========================================================================== */
.community-page .co-award-hero {
  position: relative;
  display: flex;
  justify-content: flex-end;
}

.community-page .co-award-card {
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.community-page .co-award-trophy-row {
  display: flex;
  align-items: center;
  gap: 16px;
}

.community-page .co-award-trophy {
  flex-shrink: 0;
  width: 92px;
  height: 92px;
}

.community-page .co-award-laurel,
.community-page .co-award-handles {
  fill: none;
  stroke: var(--purple);
  stroke-width: 3.5;
  stroke-linecap: round;
}

.community-page .co-award-laurel {
  stroke: var(--highlight);
  stroke-dasharray: 2 7;
}

.community-page .co-award-cup,
.community-page .co-award-stem {
  fill: var(--purple);
}

.community-page .co-award-star {
  fill: var(--join);
}

.community-page .co-award-edition {
  display: block;
  color: var(--ink-strong);
  font-family: var(--font-display);
  font-size: var(--text-ui-panel);
  line-height: 1.2;
}

.community-page .co-award-status {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  margin-top: 6px;
  color: var(--muted-strong);
  font-size: var(--text-ui-xs);
  font-weight: 700;
}

.community-page .co-award-status::before {
  content: "";
  width: 8px;
  height: 8px;
  border-radius: var(--radius-round);
  background: var(--muted-ui);
}

.community-page .co-award-status.is-open {
  color: var(--purple);
}

.community-page .co-award-status.is-open::before {
  background: var(--join);
  box-shadow: 0 0 0 4px var(--orange-wash);
}

.community-page .co-award-date {
  display: flex;
  align-items: center;
  gap: 8px;
  margin: 0;
  color: var(--ink-strong);
  font-size: var(--text-ui-sm);
  font-weight: 600;
}

.community-page .co-award-date svg {
  flex-shrink: 0;
  width: 18px;
  height: 18px;
  color: var(--purple);
}

/* Hero card: a link to the categories section, which lists them once with their descriptions. */
.community-page .co-award-count {
  display: inline-flex;
  align-items: center;
  align-self: flex-start;
  min-height: 44px;
  color: var(--purple);
  font-size: var(--text-ui-sm);
  font-weight: 700;
}

.community-page .co-award-count:hover {
  color: var(--purple-press);
}

.community-page .co-award-winners {
  padding: 96px 0;
}

.community-page .co-award-winners .co-head {
  margin-bottom: 36px;
}

.community-page .co-award-year + .co-award-year {
  margin-top: 48px;
}

.community-page .co-award-year-title {
  display: flex;
  align-items: center;
  gap: 16px;
  margin: 0 0 20px;
  color: var(--purple);
  font-family: var(--font-display);
  font-size: var(--text-ui-panel);
}

.community-page .co-award-year-title::after {
  content: "";
  flex: 1;
  height: 1px;
  background: var(--line-soft);
}

.community-page .co-award-people {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 24px;
}

.community-page .co-award-winner {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
  padding: 28px 22px;
  border: 1px solid var(--line-soft);
  border-radius: var(--ds-radius-lg);
  background: #fff;
  box-shadow: var(--shadow-card);
  text-align: center;
}

.community-page .co-award-photo {
  width: 104px;
  height: 104px;
  border: 4px solid #fff;
  border-radius: var(--radius-round);
  box-shadow: 0 0 0 3px var(--join);
  object-fit: cover;
}

.community-page .co-award-photo.is-initials {
  display: grid;
  place-items: center;
  background: var(--purple);
  color: #fff;
  font-family: var(--font-display);
  font-size: 30px;
  font-weight: 700;
}

.community-page .co-award-photo.is-long {
  font-size: 22px;
  letter-spacing: -.02em;
}

.community-page .co-award-chip {
  margin-top: 6px;
  padding: 3px 10px;
  border-radius: var(--radius-pill);
  font-size: var(--text-ui-2xs);
  font-weight: 700;
}

.community-page .co-award-chip.is-purple { background: var(--purple-tint-ui); color: var(--purple); }
.community-page .co-award-chip.is-cyan { background: var(--cyan-wash); color: var(--cyan-ink-strong); }
.community-page .co-award-chip.is-orange { background: var(--orange-wash); color: var(--orange-ink); }

.community-page .co-award-winner h4 {
  margin: 0;
  color: var(--ink-strong);
  font-family: var(--font-display);
  font-size: var(--text-ui-lg);
  line-height: 1.25;
}

.community-page .co-award-org {
  color: var(--muted-strong);
  font-size: var(--text-ui-sm);
  font-weight: 600;
}

.community-page .co-award-winner p {
  margin: 4px 0 0;
  color: var(--muted-ui);
  font-size: var(--text-ui-sm);
  line-height: 1.6;
}

@media (max-width: 1180px) {
  .community-page .co-award-people {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 767px) {
  .community-page .co-award-winners {
    padding: 56px 0;
  }

  .community-page .co-award-people {
    grid-template-columns: minmax(0, 1fr);
    gap: 14px;
  }

  .community-page .co-award-trophy {
    width: 80px;
    height: 80px;
  }
}

/* UI/UX review, 2026-10-27 ------------------------------------------------------------------------------------------ */
/* Hero (.co-hero--fit): the card filled out, a larger trophy, and a "when" row that always says something: the closing
   day with the days left, the key date, or "Key dates to be announced". Phones: the buttons before the card. */
.community-page .co-award-card { gap: 18px; min-width: min(100%, 420px); }
.community-page .co-award-card .glass-card-label { font-size: var(--text-ui-2xs); }
.community-page .co-award-trophy { width: 112px; height: 112px; }
.community-page .co-award-edition { font-size: var(--text-ui-tile); }
.community-page .co-award-when { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 10px; padding: 14px 0; border-block: 1px solid var(--line-soft); }
.community-page .co-award-when svg { flex-shrink: 0; width: 20px; height: 20px; color: var(--purple); }
.community-page .co-award-when .co-award-date { flex: 1 1 auto; font-size: var(--text-ui); }
.community-page .co-award-date.is-tba { color: var(--muted-strong); font-weight: 600; }
.community-page .co-award-days { padding: 4px 10px; border-radius: var(--radius-pill); background: var(--orange-wash); color: var(--orange-ink); font-size: var(--text-ui-2xs); font-weight: 700; white-space: nowrap; }
.community-page .co-award-count { margin-block: -8px; }
@media (max-width: 767px) {
  .community-page .co-hero--awards .co-hero-grid:not(.co-hero-grid--single) .co-hero-actions { order: 1; }
  .community-page .co-hero--awards .co-hero-media { order: 2; }
  .community-page .co-award-card { min-width: 0; }
  .community-page .co-award-edition { font-size: var(--text-ui-panel); }
}

/* The Medal Bar (Award categories): the hero's "raise the bar" made literal. One orange bar, drawn by each medal's
   ::before so that a row of two (tablets) still reads as one bar; from it, a ribbon in the category's colour (a white
   centre stripe) and a medal with the category's icon; under it, the name, the description and "Nominate". The rows
   line up across medals (subgrid). When the list comes into view the bar draws left to right and the medals drop in
   one after another (.is-waiting → .is-shown, page-awards.php's script); on hover the medal swings. Phones: the bar
   runs down the left and each medal hangs sideways off it, its text beside it. */
.community-page .co-medals { --bar: 12px; padding: 96px 0; background: var(--surface-soft); }
.community-page .co-hero--fit + .co-medals { padding-top: 96px; } /* As after every hero (was 72px). */
.community-page .co-medals .co-head { margin-bottom: 40px; }
.community-page .co-medal-list { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); grid-auto-rows: auto; column-gap: 28px; row-gap: 56px; margin: 0; padding: 0; list-style: none; }
.community-page .co-medal { --tone: var(--purple); --ink: var(--purple); position: relative; display: grid; grid-row: span 4; grid-template-rows: subgrid; justify-items: center; row-gap: 12px; padding-top: var(--bar); text-align: center; }
.community-page .co-medal.is-orange { --tone: var(--orange); --ink: var(--orange-ink); }
.community-page .co-medal.is-cyan { --tone: var(--cyan-deep); --ink: var(--cyan-ink); }
.community-page .co-medal.is-night { --tone: var(--night); --ink: var(--night); }
/* The bar: this medal's stretch of it, reaching half the gap on each side; rounded at the ends of each row. */
.community-page .co-medal::before { content: ""; position: absolute; top: 0; left: -14px; right: -14px; height: var(--bar); background: var(--join); box-shadow: 0 6px 14px rgba(255, 97, 15, .25); transform-origin: left center; transition: transform .35s linear calc(var(--i) * .3s); }
.community-page .co-medal:nth-child(4n + 1)::before { left: 0; border-radius: var(--radius-pill) 0 0 var(--radius-pill); }
.community-page .co-medal:nth-child(4n)::before, .community-page .co-medal:last-child::before { right: 0; border-radius: 0 var(--radius-pill) var(--radius-pill) 0; }
.community-page .co-medal-hang { display: flex; flex-direction: column; align-items: center; margin-top: -4px; color: inherit; text-decoration: none; transform-origin: top center; transition: transform .55s cubic-bezier(.3, 1.4, .5, 1) calc(1.2s + var(--i) * .15s), opacity .3s ease calc(1.2s + var(--i) * .15s); }
.community-page a.co-medal-hang { cursor: pointer; }
.community-page .co-medal-ribbon { width: 40px; height: 64px; background: linear-gradient(90deg, var(--tone) 0 34%, #fff 34% 66%, var(--tone) 66%); clip-path: polygon(0 0, 100% 0, 100% 100%, 50% 82%, 0 100%); }
.community-page .co-medal-disc { position: relative; display: grid; place-items: center; width: 112px; height: 112px; margin-top: -18px; border-radius: var(--radius-round); background: radial-gradient(circle at 32% 28%, rgba(255, 255, 255, .45), transparent 45%), var(--tone); box-shadow: 0 0 0 5px #fff, 0 0 0 7px var(--tone), 0 18px 32px rgba(42, 12, 102, .2); color: #fff; }
.community-page .co-medal-disc::after { content: ""; position: absolute; inset: 12px; border: 2px dashed rgba(255, 255, 255, .55); border-radius: inherit; }
.community-page .co-medal-disc svg { width: 44px; height: 44px; }
.community-page .co-medal h3 { margin: 12px 0 0; align-self: end; color: var(--ink-strong); font-size: var(--text-ui-lg); line-height: 1.3; text-wrap: balance; }
.community-page .co-medal p { max-width: 30ch; margin: 0; color: var(--muted-ui); font-size: var(--text-ui); line-height: 1.6; text-wrap: pretty; }
.community-page .co-medal-nominate { display: inline-flex; align-items: center; align-self: start; gap: 8px; min-height: 44px; padding: 0 20px; border: 1.5px solid var(--line-control); border-radius: var(--radius-pill); background: #fff; color: var(--purple); font-size: var(--text-ui-sm); font-weight: 700; transition: border-color .15s ease, background .15s ease; }
.community-page .co-medal-nominate svg { width: 16px; height: 16px; transition: transform .2s ease; }
.community-page .co-medal-nominate:hover, .community-page .co-medal-nominate:focus-visible { border-color: var(--purple); background: var(--purple-wash); }
.community-page .co-medal-nominate:hover svg, .community-page .co-medal-nominate:focus-visible svg { transform: translateX(3px); }
.community-page .co-medal-list.is-waiting:not(.is-shown) .co-medal::before { transform: scaleX(0); }
.community-page .co-medal-list.is-waiting:not(.is-shown) .co-medal-hang { opacity: 0; transform: translateY(-36px); }
@media (hover: hover) and (prefers-reduced-motion: no-preference) {
  .community-page .co-medal-list:not(.is-waiting) .co-medal:hover .co-medal-hang,
  .community-page .co-medal-list.is-shown .co-medal:hover .co-medal-hang { animation: co-medal-swing 1.1s ease-in-out; }
}
@keyframes co-medal-swing { 0%, 100% { transform: rotate(0); } 25% { transform: rotate(5deg); } 55% { transform: rotate(-3.5deg); } 80% { transform: rotate(1.5deg); } }
/* No winners yet: one line under the medals instead of an empty section. */
.community-page .co-medal-note { display: flex; align-items: center; justify-content: center; gap: 10px; margin: 56px 0 0; color: var(--muted-strong); font-size: var(--text-ui-md); font-weight: 600; text-align: center; }
.community-page .co-medal-note svg { flex-shrink: 0; width: 22px; height: 22px; color: var(--orange-ink); }
.community-page .co-medals + .co-strengths, .community-page .co-award-winners + .co-strengths { padding-top: 88px; }
@media (min-width: 960px) and (max-width: 1180px) {
  .community-page .co-medal-disc { width: 96px; height: 96px; }
  .community-page .co-medal-disc svg { width: 38px; height: 38px; }
  .community-page .co-medal h3 { font-size: var(--text-ui-md); }
}
@media (max-width: 959px) {
  .community-page .co-medal-list { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .community-page .co-medal:nth-child(odd)::before { left: 0; border-radius: var(--radius-pill) 0 0 var(--radius-pill); }
  .community-page .co-medal:nth-child(even)::before { right: 0; border-radius: 0 var(--radius-pill) var(--radius-pill) 0; }
  .community-page .co-medal:nth-child(4n)::before { left: -14px; }
}
@media (max-width: 767px) {
  .community-page .co-medals { --bar: 8px; padding: 48px 0; }
  .community-page .co-hero--fit + .co-medals { padding-top: 40px; }
  .community-page .co-medals .co-head { margin-bottom: 28px; }
  .community-page .co-medal-list { grid-template-columns: minmax(0, 1fr); row-gap: 0; }
  .community-page .co-medal { grid-row: auto; grid-template-rows: none; grid-template-columns: 96px minmax(0, 1fr); justify-items: start; align-items: start; column-gap: 14px; row-gap: 6px; padding: 0 0 26px var(--bar); text-align: left; }
  .community-page .co-medal::before, .community-page .co-medal:nth-child(n)::before { top: 0; bottom: 0; left: 0; right: auto; width: var(--bar); height: auto; border-radius: 0; transform-origin: center top; }
  .community-page .co-medal:first-child::before { top: 6px; border-radius: var(--radius-pill) var(--radius-pill) 0 0; }
  .community-page .co-medal:last-child::before { bottom: 0; border-radius: 0 0 var(--radius-pill) var(--radius-pill); }
  .community-page .co-medal-hang { grid-row: 1 / span 3; flex-direction: row; margin: 6px 0 0; transform-origin: left center; }
  .community-page .co-medal-ribbon { width: 30px; height: 26px; background: linear-gradient(180deg, var(--tone) 0 34%, #fff 34% 66%, var(--tone) 66%); clip-path: polygon(0 0, 100% 0, 82% 50%, 100% 100%, 0 100%); }
  .community-page .co-medal-disc { width: 64px; height: 64px; margin: 0 0 0 -8px; box-shadow: 0 0 0 3px #fff, 0 0 0 5px var(--tone), 0 10px 20px rgba(42, 12, 102, .18); }
  .community-page .co-medal-disc::after { inset: 7px; }
  .community-page .co-medal-disc svg { width: 28px; height: 28px; }
  .community-page .co-medal h3 { grid-column: 2; margin: 8px 0 0; align-self: start; font-size: var(--text-ui-md); text-wrap: wrap; }
  .community-page .co-medal p { grid-column: 2; max-width: none; font-size: var(--text-ui); }
  .community-page .co-medal-nominate { grid-column: 2; margin: -6px 0 -10px; padding: 0; border: 0; background: none; }
  .community-page .co-medal-nominate:hover, .community-page .co-medal-nominate:focus-visible { background: none; text-decoration: underline; text-underline-offset: 4px; }
  .community-page .co-medal-list.is-waiting:not(.is-shown) .co-medal::before { transform: scaleY(0); }
  .community-page .co-medal-list.is-waiting:not(.is-shown) .co-medal-hang { transform: translateX(-24px); }
  .community-page .co-medal-note { justify-content: flex-start; margin-top: 28px; font-size: var(--text-ui); text-align: left; }
  .community-page .co-medals + .co-strengths, .community-page .co-award-winners + .co-strengths { padding-top: 48px; }
}
@media (prefers-reduced-motion: reduce) {
  .community-page .co-medal::before, .community-page .co-medal-hang { transition: none; }
}
/* ==========================================================================
   Connect Beyond PM (page-connect.php), UI/UX review 2026-10-27: the hero's
   "Next get-together" card, The Other Agenda, the get-togethers list and the
   form band's quiet links.
   ========================================================================== */
/* Hero: fitted to its content (.co-hero--fit, Interest groups block); a shorter photo while side by side. */
@media (min-width: 768px) and (max-width: 1180px) {
  .community-page .co-hero--fit.co-hero--partners .co-hero-photo { height: 340px; }
}
.community-page .co-connect-next { display: flex; justify-content: flex-end; }
.community-page .co-connect-next .glass-card { display: flex; flex-direction: column; gap: 14px; }
.community-page .co-connect-next .glass-card-label { font-size: var(--text-ui-2xs); }
.community-page .co-connect-next .ev-desc { display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 3; overflow: hidden; }
.community-page .co-hero--fit + .co-agenda { padding-top: 96px; } /* As after every hero (was 72px). */

/* The Other Agenda: a meeting agenda on paper, slightly turned, with a margin line; each timed item struck through by a
   hand-drawn orange line and replaced, in handwriting, by a get-together idea (a link that fills in the form). The
   strike-throughs draw in one after another when the sheet comes into view (.is-waiting → .is-shown, page-connect.php's
   script); without JavaScript or with reduced motion they are simply there. Handwriting and typewriter faces are the
   reader's own system fonts (no font download). */
.community-page .co-agenda { --hand: "Segoe Print", "Bradley Hand", "Chalkboard SE", "Comic Neue", cursive; --type: "Courier New", Courier, ui-monospace, monospace; padding: 88px 0; background: #fff; }
.community-page .co-agenda-inner { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 580px); align-items: start; gap: 72px; } /* Text at the top: the section's label starts where every section's does. */
.community-page .co-agenda .co-head p a { padding-block: 4px; color: var(--purple); font-weight: 700; }
.community-page .co-agenda-hint { color: var(--orange-ink); font-size: var(--text-ui-sm); font-weight: 700; }
.community-page .co-agenda-sheet { position: relative; padding: 30px 32px 22px 72px; border: 1px solid var(--line-soft); border-radius: 6px; background: #fff; box-shadow: var(--shadow-menu); transform: rotate(-1.2deg); }
.community-page .co-agenda-sheet::before { content: ""; position: absolute; top: 0; bottom: 0; left: 52px; width: 2px; background: rgba(255, 122, 26, .35); }
.community-page .co-agenda-title { margin: 0 0 8px; padding-bottom: 12px; border-bottom: 3px double var(--line-control); color: var(--ink-strong); font: 700 var(--text-ui-sm)/1.4 var(--font-display); letter-spacing: .08em; text-transform: uppercase; }
.community-page .co-agenda-list { margin: 0; padding: 0; list-style: none; }
.community-page .co-agenda-item { position: relative; display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); align-items: center; gap: 4px 18px; min-height: 60px; border-bottom: 1px solid var(--line-soft); }
.community-page .co-agenda-time { position: absolute; left: -62px; top: 50%; width: 46px; transform: translateY(-50%); color: var(--muted-ui); font: 700 var(--text-ui-xs)/1 var(--type); text-align: right; }
.community-page .co-agenda-old { justify-self: start; color: var(--muted-strong); font: 400 var(--text-ui)/1.35 var(--type); text-decoration: none; background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 10' preserveAspectRatio='none'%3E%3Cpath d='M1 6 C 18 3, 36 8, 55 5 S 88 4, 99 6' stroke='%23FF7A1A' stroke-width='2.6' fill='none' stroke-linecap='round'/%3E%3C/svg%3E") left 55% / 100% .7em no-repeat; transition: background-size .5s ease calc(var(--i, 0) * .35s); }
.community-page .co-agenda-new { display: inline-flex; align-items: center; justify-self: start; min-height: 44px; color: var(--purple); text-decoration: none; transform: rotate(-2deg); transition: color .15s ease, opacity .4s ease calc(var(--i, 0) * .35s + .35s); }
.community-page .co-agenda-new ins { font: 700 1.5rem/1.15 var(--hand); text-decoration: none; }
.community-page .co-agenda-new:hover ins, .community-page .co-agenda-new:focus-visible ins { text-decoration: underline wavy var(--join); text-underline-offset: 6px; }
.community-page .co-agenda-new:focus-visible { outline: 3px solid var(--focus-ring); outline-offset: 2px; border-radius: 6px; }
.community-page .co-agenda-item.is-own .co-agenda-blank { height: 1px; align-self: center; border-bottom: 2px dashed var(--line-control); }
.community-page .co-agenda-item.is-own .co-agenda-new { color: var(--orange-ink); }
.community-page .co-agenda-sheet.is-waiting:not(.is-shown) .co-agenda-old { background-size: 0 .7em; }
.community-page .co-agenda-sheet.is-waiting:not(.is-shown) .co-agenda-item:not(.is-own) .co-agenda-new { opacity: 0; }
.community-page .co-agenda-sheet.is-shown .co-agenda-old { background-size: 100% .7em; }
.community-page .co-agenda-sheet.is-shown .co-agenda-new { opacity: 1; }
@media (max-width: 1000px) {
  .community-page .co-agenda-inner { grid-template-columns: minmax(0, 1fr); gap: 40px; }
  .community-page .co-agenda-sheet { max-width: 620px; }
}
@media (max-width: 767px) {
  .community-page .co-agenda, .community-page .co-hero--fit + .co-agenda { padding: 48px 0; }
  .community-page .co-hero--fit + .co-agenda { padding-top: 40px; } /* As after every hero on phones. */
  .community-page .co-agenda-sheet { padding: 22px 18px 16px 58px; transform: none; }
  .community-page .co-agenda-sheet::before { left: 46px; }
  .community-page .co-agenda-item { grid-template-columns: minmax(0, 1fr); gap: 0; padding-block: 8px; }
  .community-page .co-agenda-time { left: -52px; top: 19px; width: 40px; transform: none; font-size: var(--text-ui-2xs); }
  .community-page .co-agenda-new ins { font-size: 1.375rem; }
  .community-page .co-agenda-item.is-own .co-agenda-blank { display: none; }
}

/* Get-togethers: the Community events, upcoming in the Events rows, then the latest held as recap cards. */
.community-page .co-connect-events { padding: 88px 0; background: var(--surface-soft); }
.community-page .co-connect-events .co-inner { display: flex; flex-direction: column; gap: 28px; }
.community-page .co-connect-list { display: flex; flex-direction: column; gap: 16px; }
.community-page .co-connect-sub { margin: 12px 0 0; font-size: var(--text-ui-step); }
.community-page .co-connect-held { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 20px; }
@media (max-width: 1000px) { .community-page .co-connect-held { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 767px) {
  .community-page .co-connect-events { padding: 48px 0; }
  .community-page .co-connect-held { grid-template-columns: minmax(0, 1fr); }
}

/* Form panel (.co-interest--panel): white space above it after the soft get-togethers band or the agenda. */
.community-page :is(.co-connect-events, .co-agenda) + .co-interest--panel { padding-top: 72px; }
@media (max-width: 767px) { .community-page :is(.co-connect-events, .co-agenda) + .co-interest--panel { padding-top: 40px; } }

/* Form band: quiet text links instead of two pill buttons (they competed with "Share your idea"). */
.community-page .co-connect-links { margin: 6px 0 0; color: var(--on-purple); font-size: var(--text-ui); }
.community-page .co-connect-links a { display: inline-block; padding-block: 8px; color: #fff; font-weight: 700; text-decoration: underline; text-underline-offset: 3px; }
.community-page .co-connect-links a:hover { color: var(--cyan-light); }
@media (max-width: 767px) {
  .community-page .co-connect-links { display: flex; flex-direction: column; align-items: flex-start; }
  .community-page .co-connect-links > span { display: none; }
}

@media (prefers-reduced-motion: reduce) {
  .community-page .co-agenda-old, .community-page .co-agenda-new { transition: none; }
}