/* One editorial opening: personal words, athletic movement, the real practitioner. */
.activity-stage {
  container: activity-stage / inline-size;
  color: var(--ink);
}
.activity-stage .activity-stage-composition {
  --stage-photo-height: clamp(27rem, 46cqi, 39rem);
  display: grid;
  grid-template-columns: .9fr 1.25fr .82fr;
  grid-template-areas: 'copy athlete practitioner' 'copy choice .';
  gap: 1.25rem clamp(1rem, 2.1cqi, 2rem);
  align-items: start;
}
.activity-stage .activity-stage-editorial {
  grid-area: copy;
  padding-block-start: clamp(.5rem, 2.7cqi, 2.5rem);
  padding-inline-end: clamp(0rem, 1cqi, 1rem);
}
.activity-stage .activity-stage-kicker {
  margin-block: 0 2rem;
  color: var(--muted);
  font-size: .8rem;
  font-weight: 500;
}
.activity-stage h1 {
  font-size: clamp(3.2rem, 5.5cqi, 5rem);
  font-weight: 700;
  line-height: 1.04;
  letter-spacing: -.055em;
  text-wrap: balance;
}
.activity-stage h1 > span { display: block; }
.activity-stage h1 > span:last-child { color: var(--accent); margin-block-start: .12em; }
.activity-stage .hero-description {
  max-inline-size: 29ch;
  margin-block: 2rem 1.1rem;
  color: var(--body);
  font-size: clamp(1rem, .9rem + .25cqi, 1.15rem);
  line-height: 1.7;
}
.activity-stage .hero-context {
  max-inline-size: 32ch;
  margin-block: 0 1.5rem;
  color: var(--muted);
  font-size: .85rem;
  line-height: 1.6;
}
.activity-stage .hero-actions { margin-block-start: 1.75rem; }
.activity-stage .hero-actions .button {
  inline-size: min(100%, 16rem);
  min-inline-size: 0;
  min-block-size: 3.6rem;
  border-radius: 0;
  background: var(--accent);
  color: var(--white);
}
.activity-stage .activity-stage-invitation {
  max-inline-size: 20ch;
  margin-block: clamp(2.5rem, 7cqi, 6rem) 0;
  padding-block-start: 1rem;
  border-block-start: 1px solid var(--line);
  color: var(--muted);
  font-size: .9rem;
}
.activity-stage .activity-stage-media { grid-area: athlete; margin: 0; }
.activity-stage .activity-stage-picture {
  display: grid;
  block-size: var(--stage-photo-height);
  overflow: clip;
  background: var(--surface);
}
.activity-stage .activity-stage-picture > * { grid-area: 1 / 1; }
.activity-stage .activity-stage-picture img {
  inline-size: 100%;
  block-size: 100%;
  min-block-size: 0;
  object-fit: cover;
  object-position: 18% center;
}
.activity-stage .activity-stage-media figcaption {
  padding-block-start: .5rem;
  color: var(--muted);
  font-size: .7rem;
  line-height: 1.5;
}
.activity-stage .activity-stage-image-note {
  place-self: center;
  margin: 1.5rem;
  color: var(--body);
  font-size: 1rem;
  text-align: center;
}
.activity-stage .activity-stage-practitioner {
  grid-area: practitioner;
  align-self: end;
  margin: 0;
  padding-block-end: 1.2rem;
}
.activity-stage .activity-stage-portrait {
  block-size: calc(var(--stage-photo-height) * .72);
  overflow: clip;
  background: var(--surface);
}
.activity-stage .activity-stage-portrait img {
  inline-size: 100%;
  block-size: 100%;
  object-fit: cover;
  object-position: 36% center;
}
.activity-stage .activity-stage-practitioner figcaption { padding-block-start: 1.25rem; }
.activity-stage .activity-stage-practitioner figcaption > span {
  display: block;
  font-size: clamp(1.6rem, 2.5cqi, 2.4rem);
  font-weight: 500;
  line-height: 1.2;
  letter-spacing: -.035em;
}
.activity-stage .activity-stage-practitioner figcaption > span:last-of-type { color: var(--accent); }
.activity-stage .activity-stage-practitioner figcaption p {
  margin-block: .85rem 0;
  color: var(--body);
  font-size: .85rem;
  line-height: 1.55;
}
.activity-stage .activity-stage-choice { grid-area: choice; }
.activity-stage .activity-stage-picker,
.activity-stage .activity-stage-picker fieldset { margin: 0; padding: 0; border: 0; }
.activity-stage .activity-stage-picker legend {
  padding: 0;
  margin-block-end: .75rem;
  color: var(--body);
  font-size: .85rem;
  font-weight: 500;
}
.activity-stage .activity-stage-options {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  border-block-start: 1px solid var(--line);
}
.activity-stage .activity-stage-option {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: .5rem;
  min-block-size: 3.3rem;
  padding-block: .7rem;
  padding-inline: .8rem;
  border: 0;
  border-block-end: 1px solid var(--line);
  border-radius: 0;
  background: transparent;
  color: var(--ink);
  font: 500 .95rem/1.35 Heebo, Arial, sans-serif;
  text-align: start;
  cursor: pointer;
}
.activity-stage .activity-stage-option:nth-child(odd) { border-inline-end: 1px solid var(--line); }
.activity-stage .activity-stage-option > svg { flex: none; inline-size: 1.1em; block-size: 1.1em; }
.activity-stage .activity-stage-option[aria-pressed=true] { background: var(--accent); color: var(--white); border-color: var(--accent); }
.activity-stage .activity-stage-response {
  margin-block-start: 1rem;
  min-block-size: 5rem;
  color: var(--body);
  font-size: .9rem;
  line-height: 1.6;
}
.activity-stage .activity-stage-response > span { color: var(--ink); font-weight: 600; }
.activity-stage .activity-stage-response p { margin-block: .2rem 0; max-inline-size: 46ch; }
.activity-stage :is(button, a):focus-visible { outline: 3px solid var(--accent); outline-offset: .25rem; }
.activity-stage .activity-stage-option[aria-pressed=true]:focus-visible { outline-color: var(--ink); }
.activity-stage :is(button, a):active { opacity: .78; }
.activity-stage [hidden] { display: none; }
@container activity-stage (width < 57rem) {
  .activity-stage .activity-stage-composition {
    --stage-photo-height: clamp(18rem, 64cqi, 32rem);
    grid-template-columns: 1.5fr 1fr;
    grid-template-areas: 'copy copy' 'athlete practitioner' 'choice choice';
    gap: 1.25rem 1rem;
  }
  .activity-stage .activity-stage-editorial { padding: 0; padding-block-end: 1rem; }
  .activity-stage .activity-stage-kicker { margin-block-end: 1rem; font-size: .75rem; }
  .activity-stage h1 { font-size: clamp(2.85rem, 10cqi, 4.7rem); line-height: 1.05; }
  .activity-stage h1 > span:last-child { margin-inline-start: 13%; margin-block-start: 0; }
  .activity-stage .hero-description { max-inline-size: 43ch; margin-block: 1.5rem 1rem; font-size: 1rem; }
  .activity-stage .hero-context { margin-block-end: 1rem; max-inline-size: none; }
  .activity-stage .hero-actions { margin-block-start: 1.25rem; }
  .activity-stage .hero-actions .button { inline-size: 100%; }
  .activity-stage .activity-stage-invitation { display: none; }
  .activity-stage .activity-stage-practitioner { align-self: end; padding: 0; }
  .activity-stage .activity-stage-portrait { block-size: calc(var(--stage-photo-height) * .66); }
  .activity-stage .activity-stage-practitioner figcaption { padding-block-start: .65rem; }
  .activity-stage .activity-stage-practitioner figcaption > span { font-size: clamp(1.25rem, 4.4cqi, 2rem); }
  .activity-stage .activity-stage-practitioner figcaption p { margin-block-start: .5rem; font-size: .72rem; }
  .activity-stage .activity-stage-choice { margin-block-start: .25rem; }
  .activity-stage .activity-stage-option { min-block-size: 3.4rem; font-size: 1rem; }
  .activity-stage .activity-stage-response { min-block-size: 4.5rem; }
}
@media (hover: hover) and (pointer: fine) {
  .activity-stage .activity-stage-option:hover { background: color-mix(in oklch, var(--accent) 8%, var(--white)); }
  .activity-stage .activity-stage-option[aria-pressed=true]:hover,
  .activity-stage .hero-actions .button:hover { background: color-mix(in oklch, var(--accent) 85%, var(--ink)); color: var(--white); }
}
@media (prefers-reduced-motion: no-preference) {
  .activity-stage .activity-stage-option,
  .activity-stage .hero-actions .button { transition: background-color 160ms cubic-bezier(.16, 1, .3, 1), color 160ms cubic-bezier(.16, 1, .3, 1); }
}