/* Bright Greens compositions; shared visual roles live in design-system.css. */
@layer layout {
.participation-flow {
  list-style: none; max-width: var(--w-content); margin: 0 auto;
  padding: 0 clamp(20px,4vw,48px) var(--pad-bottom);
  display: grid; grid-template-columns: repeat(4,minmax(0,1fr)); gap: 28px;
}
.participation-flow li { border-top: 1px solid var(--hair); padding-top: 22px; }
.participation-number { display: block; color: var(--gold-ink); font-family: var(--font-display); font-style: italic; font-size: 1.6rem; margin-bottom: 22px; }
.participation-flow h3 { font-family: var(--font-display); font-size: clamp(1.3rem,1.7vw,1.65rem); font-weight: 500; line-height: 1.25; color: var(--forest); margin-bottom: 14px; }
.participation-flow p { color: var(--stone); line-height: 1.7; }
.page-bg #participate + #how-made { --pad-top: 0px; }
.page-bg #what .media img { object-position: center 52%; }
.page-bg .walk-card .illustration-note { margin-top: 12px; font-size: .78rem; line-height: 1.55; color: var(--stone); }
.page-bg .walk-media figcaption { font-size: .64rem; letter-spacing: .08em; }
.page-bg .moora-portrait { margin: 0; display: flex; flex-direction: column; align-self: center; min-height: 0; background: transparent; overflow: visible; }
.page-bg .moora-portrait picture { display: block; width: 100%; border-radius: var(--r-media); overflow: hidden; }
.page-bg .moora-portrait img { position: static; display: block; width: 100%; height: auto; aspect-ratio: 1; object-fit: cover; border-radius: 0; }
.page-bg .moora-portrait figcaption { margin-top: 14px; font-size: .8rem; color: var(--stone); line-height: 1.5; }
.page-bg #moora { padding-bottom: 0; }
.page-bg #moora-films { --pad-top: var(--gap-half); --pad-bottom: var(--gap-half); }
.farm-films { max-width: var(--w-content); margin: 0 auto; padding: 0 clamp(20px,4vw,48px) var(--pad-bottom); display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 28px; }
.farm-films figure { margin: 0; min-width: 0; }
.farm-films video { display: block; width: 100%; aspect-ratio: 16/9; object-fit: contain; border-radius: var(--r-media); background: var(--deep); }
.farm-films figcaption { padding: 18px 4px 0; color: var(--stone); line-height: 1.6; font-size: .85rem; }
.farm-films figcaption strong { display: block; color: var(--forest); font-size: 1.05rem; font-weight: 500; margin-bottom: 5px; }
.page-bg #community .media img { object-position: center 65%; }
.page-bg #community .caption h2 { max-width: 20ch; }
.page-bg #community .caption .support { max-width: 52ch; }
.page-bg #buy-now .caption h2 { max-width: 20ch; }
.page-bg #buy-now .media img { object-position: center 42%; }
@media (max-width: 900px) {
  .participation-flow { grid-template-columns: repeat(2,minmax(0,1fr)); }
}
@media (max-width: 700px) {
  .participation-flow { grid-template-columns: 1fr; gap: 24px; }
  .participation-flow li { display: grid; grid-template-columns: 40px 1fr; column-gap: 16px; }
  .participation-number { grid-row: 1/3; margin: 0; }
  .participation-flow h3 { margin-bottom: 8px; }
  .participation-flow p { grid-column: 2; }
  .farm-films { grid-template-columns: 1fr; gap: 36px; }
  .page-bg .moora-portrait { max-width: 560px; width: 100%; margin: 0 auto; }
  .page-bg #community .media img { object-position: 75% center; }
}

}