/* Make the photo galleries one step smaller. */
.activity-block > .content-slider {
  width: 70%;
  margin-inline: auto;
}

/* CSS ratios are width / height: horizontal 4, vertical 3. */
.content-slider .swiper-slide {
  aspect-ratio: 4 / 3;
}

.activity-swiper {
  --swiper-theme-color: var(--crimson);
  --swiper-navigation-size: 20px;
  touch-action: pan-y;
}

.activity-swiper .swiper-button-prev,
.activity-swiper .swiper-button-next {
  width: 44px;
  height: 44px;
  margin-top: -22px;
  padding: 0;
  border: 1px solid var(--border);
  border-radius: 50%;
  background: rgba(255, 255, 255, .94);
  color: var(--crimson);
  box-shadow: var(--shadow-sm);
  cursor: pointer;
}

.activity-swiper button:focus-visible {
  outline: 3px solid var(--crimson);
  outline-offset: 3px;
}

.year-grid,
.role-grid {
  display: grid;
  gap: 32px;
}

.year-card--photos,
.role-card--photos {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, .65fr);
  column-gap: 28px;
}

.year-card--photos h3,
.role-card--photos h3 { grid-column: 1 / -1; }
.year-card--photos p,
.role-card--photos p { margin: 0; }

.role-card--photos p,
.role-card--photos .role-slider { align-self: center; }

.activity-block--years { padding-top: 32px; }

.role-card--photos:nth-child(even) {
  grid-template-columns: minmax(0, .65fr) minmax(0, 1fr);
}
.role-card--photos:nth-child(even) p { grid-column: 2; grid-row: 2; }
.role-card--photos:nth-child(even) .role-slider { grid-column: 1; grid-row: 2; }

/* All four year galleries use the same ratio, independent of text length. */
.year-slider,
.role-slider {
  position: relative;
  min-width: 0;
  width: 87.5%;
  aspect-ratio: 4 / 3;
  align-self: start;
  margin: 0;
  justify-self: center;
}

.year-slider .activity-swiper,
.role-slider .activity-swiper {
  position: absolute;
  inset: 0;
  height: 100%;
}

.year-slider .swiper-slide,
.role-slider .swiper-slide { aspect-ratio: auto; height: 100%; }

@media (max-width: 768px) {
  .year-card--photos,
  .role-card--photos,
  .role-card--photos:nth-child(even) { grid-template-columns: minmax(0, 1fr); row-gap: 16px; }
  .year-card--photos h3,
  .role-card--photos h3 { margin-bottom: 0; }
  .role-card--photos:nth-child(even) p,
  .role-card--photos:nth-child(even) .role-slider { grid-column: auto; grid-row: auto; }
}

/* Typography emphasis and spacing for the activities page only. */
.activities-main {
  font-family: var(--body-font), "Yu Gothic", "Meiryo", sans-serif;
  color: #222;
}

.activities-main .page-title {
  font-weight: 800;
  line-height: 1.3;
  letter-spacing: .06em;
}

.activities-main .page-lead {
  line-height: 1.9;
  font-weight: 500;
  max-width: 48em;
}

.activities-main .section-title {
  font-weight: 800;
  line-height: 1.45;
  border-bottom-width: 3px;
  margin-bottom: 32px;
}

.activities-main .activity-text {
  max-width: 960px;
}

.activities-main .activity-text p,
.activities-main .section-intro,
.activities-main .role-card p,
.activities-main .year-card p {
  line-height: 2;
  letter-spacing: .025em;
  overflow-wrap: anywhere;
}

.activities-main .activity-text p {
  margin-bottom: 30px;
}

.activities-main .section-intro {
  margin-bottom: 36px;
}

.activities-main .role-card h3,
.activities-main .year-card h3 {
  line-height: 1.5;
  font-weight: 800;
  margin-bottom: 18px;
}

.activities-main .role-card {
  padding: 28px 32px;
  border-left: 5px solid var(--crimson);
  background: #f7f5f3;
}

.activities-main .role-card p {
  margin: 0;
}

.activities-main .role-card strong {
  color: var(--crimson);
  font-weight: 800;
}

.activities-main .activity-block + .activity-block {
  margin-top: 76px;
  padding-top: 60px;
}

@media (max-width: 768px) {
  .activities-main .role-card {
    padding: 22px 20px;
  }

  .activities-main .activity-block + .activity-block {
    margin-top: 52px;
    padding-top: 40px;
  }

  .activities-main .year-card--photos {
    row-gap: 22px;
  }
}