/*
  Participate: four ways in. Each card is <article><a>...<article>.
*/

.page-participate {
  background: var(--bg-darker);
  color: var(--ink-inverse);
  min-block-size: calc(100dvh - var(--nav-height));
  padding-block: var(--space-5xl);
  padding-inline: max(var(--space-md), calc((100vw - var(--width-content)) / 2));
}
.page-participate > h1 {
  color: color-mix(in oklch, var(--ink-inverse) 70%, var(--accent));
  margin-block-end: var(--space-xl);
}
.page-participate > .ways {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 15rem), 1fr));
  gap: var(--space-lg);
}
.page-participate > .ways > li > a {
  display: flex;
  flex-direction: column;
  gap: .7rem;
  padding: var(--space-xl) var(--space-lg);
  background: var(--bg-card);
  color: var(--ink-body);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-subtle);
  text-decoration: none;
  block-size: 100%;
  transition: box-shadow var(--duration-slow);
}
.page-participate > .ways > li > a:hover { box-shadow: var(--shadow-medium); }
.page-participate > .ways > li > a[aria-disabled="true"] { opacity: .55; cursor: not-allowed; pointer-events: none; }
.page-participate > .ways > li > a > .icon { font-size: 1.75rem; line-height: 1; }
.page-participate > .ways > li > a > h2 { color: var(--brand); margin: 0; font-size: 1.1rem; }
.page-participate > .ways > li > a > p { color: var(--ink-muted); font-size: .95rem; flex-grow: 1; }