:root {
  --content-max: 1220px;
  --page-gutter: 48px;
  --grid-gap: 24px;
  --section-space: 104px;
  --block-space: 48px;
  --card-space: 24px;
  --day-date-width: 192px;
}
.wrap,
.header {
  width: min(var(--content-max), calc(100% - var(--page-gutter) * 2));
  margin-inline: auto;
}
.section { padding-block: var(--section-space); }
.eyebrow { margin-bottom: 24px; }
.caption { margin-top: 16px; }
.recognition-grid,
.method-grid,
.reflection-grid,
.split,
.community-heading,
.faq-grid,
.section-top,
.community-invite,
.footer {
  display: grid;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  gap: var(--grid-gap);
  align-items: start;
}
.recognition-grid > :first-child,
.method-grid > :first-child,
.reflection-grid > :first-child,
.split > :first-child,
.community-heading > :first-child,
.faq-grid > :first-child,
.section-top > :first-child,
.community-invite > :first-child {
  grid-column: 1 / span 5;
}
.recognition-grid > :last-child,
.method-grid > :last-child,
.reflection-grid > :last-child,
.split > :last-child,
.community-heading > :last-child,
.faq-grid > :last-child,
.section-top > :last-child,
.community-invite > :last-child {
  grid-column: 7 / -1;
}
.recognition-grid > *,
.method-grid > *,
.reflection-grid > *,
.split > *,
.community-heading > *,
.faq-grid > *,
.section-top > *,
.community-invite > *,
.footer > * {
  min-width: 0;
}
.section-top > :only-child { grid-column: 1 / -1; }
.section-top .muted { text-align: right; }
.recognition h2,
.method h2 { margin-bottom: var(--block-space); }
.split h2,
.reflection h2 { margin-bottom: 24px; }
.community-heading > div,
.author .split > div:last-child { padding: 0; }
.intro-copy,
.split p,
.community-heading p,
.reflection .lead { max-width: 58ch; }
.recognition-grid > .intro-copy,
.method-grid > .intro-copy { margin: 0; }
.line-note { display: flex; margin-top: var(--block-space); padding-top: 24px; gap: var(--grid-gap); }
.situations article { gap: 24px; padding-block: 24px; }
.method-list article { padding-block: 24px; }
.situations article:first-child,
.method-list article:first-child { padding-top: 0; border-top: 0; }
.method-list article:first-child::before { top: 6px; }
.author-image {
  width: 100%;
  height: auto;
  aspect-ratio: 4 / 5;
}
.author-image { position: relative; top: auto; }
.author-line { margin-top: 32px; }
.community-facts,
.take-grid {
  display: grid;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  gap: var(--grid-gap);
}
.community-facts { margin-block: var(--block-space); padding-block: 24px; }
.community-facts > div { grid-column: span 4; min-width: 0; gap: 16px; }
.community-main figcaption { margin: 16px 0 24px; }
.community-invite { margin-top: var(--block-space); padding-top: var(--block-space); align-items: center; }
.community-invite .btn { justify-self: end; margin: 0; }
.take-grid { margin-top: var(--block-space); }
.take-grid article { grid-column: span 4; min-width: 0; padding: var(--card-space); }
.take-grid h3 { margin: 32px 0 16px; }
.take-grid p { max-width: 38ch; }
.quiz { padding: var(--card-space); }
.quiz-progress { margin-bottom: 24px; }
.quiz h3 { margin-bottom: 24px; }
.final h2 { max-width: 960px; margin-inline: auto; }
.final .lead { margin: 32px auto; max-width: 58ch; }
.final .caption { margin-top: 24px; }
.footer { align-items: center; min-height: 144px; padding-block: 40px; }
.footer > :first-child { grid-column: 1 / span 4; }
.footer > :nth-child(2) { grid-column: 5 / span 5; }
.footer > :last-child { grid-column: 10 / -1; justify-self: end; }

@media (max-width: 1100px) {
:root { --page-gutter: 32px; --section-space: 88px; --block-space: 40px; --day-date-width: 152px; }
.recognition-grid > :first-child,
.method-grid > :first-child,
.reflection-grid > :first-child,
.split > :first-child,
.community-heading > :first-child,
.faq-grid > :first-child,
.section-top > :first-child,
.community-invite > :first-child { grid-column: 1 / span 6; }
.section-top > :only-child { grid-column: 1 / -1; }
.community-facts > div { display: block; }
.community-facts span { display: block; margin-top: 8px; }

}

@media (max-width: 820px) {
:root { --page-gutter: 20px; --grid-gap: 16px; --section-space: 64px; --block-space: 32px; --card-space: 20px; --day-date-width: 64px; }
.recognition-grid,
.method-grid,
.reflection-grid,
.split,
.community-heading,
.faq-grid,
.section-top,
.community-invite,
.footer,
.community-facts,
.take-grid {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }
.recognition-grid,
.method-grid,
.reflection-grid,
.split,
.community-heading,
.faq-grid { row-gap: 32px; }
.recognition-grid > :first-child,
.recognition-grid > :last-child,
.method-grid > :first-child,
.method-grid > :last-child,
.reflection-grid > :first-child,
.reflection-grid > :last-child,
.split > :first-child,
.split > :last-child,
.community-heading > :first-child,
.community-heading > :last-child,
.faq-grid > :first-child,
.faq-grid > :last-child,
.section-top > :first-child,
.section-top > :last-child,
.community-invite > :first-child,
.community-invite > :last-child,
.take-grid article {
    grid-column: 1 / -1;
  }
.section-top { gap: 0; }
.section-top .muted { text-align: left; margin: -8px 0 24px; }
h2,
.method h2,
.community-heading h2,
.final h2 { font-size: clamp(34px, 7vw, 48px); letter-spacing: -.035em; }
.eyebrow { margin-bottom: 24px; }
.split h2,
.reflection h2 { margin-bottom: 24px; }
.split p,
.intro-copy,
.community-heading p,
.reflection .lead { max-width: 58ch; }
.line-note { flex-direction: column; gap: 16px; }
.author-image { aspect-ratio: 4 / 5; max-height: 640px; }
.community-facts { grid-template-columns: repeat(3, minmax(0, 1fr)); padding-block: 24px; }
.community-facts > div { grid-column: auto; }
.community-facts strong { font-size: clamp(22px, 5.8vw, 36px); }
.community-invite { gap: 24px; }
.community-invite .btn { justify-self: stretch; width: 100%; }
.take-grid h3 { margin-top: 24px; }
.take-grid p { max-width: 58ch; }
.quiz { min-height: 0; }
.quiz h3 { font-size: 24px; }
.footer { row-gap: 24px; padding: 32px 0 112px; }
.footer > :first-child,
.footer > :nth-child(2) { grid-column: 1 / -1; }
.footer > a:last-child { grid-column: 1 / -1; justify-self: start; display: block; }

}

@media (max-width: 359px) {
:root { --page-gutter: 16px; --card-space: 16px; }

}
.hero {
  display: grid;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  column-gap: var(--grid-gap);
  row-gap: 0;
  padding-block: 48px 0;
}
.hero-copy { grid-column: 1 / span 6; min-width: 0; padding: 0 0 32px; }
.hero .move-title { font-size: clamp(64px, 8vw, 116px); letter-spacing: -.06em; }
.hero .move-title em { letter-spacing: -.06em; }
.hero-visual.gallery-stage { grid-column: 7 / -1; min-width: 0; min-height: 0; height: clamp(540px, 48vw, 640px); }
.hero-footer { grid-column: 1 / -1; padding-block: 24px; gap: var(--grid-gap); }
.hero .lead { max-width: 43ch; }
.hero .actions { gap: 16px; }
.hero .gallery-frame { inset-inline: 16px; }
.hero .gallery-controls { left: 16px; right: 16px; }
.hero .gallery-tag { left: 0; }
.hero-steps { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; }
.hero-steps li { min-width: 0; line-height: 1.5; }

@media (max-width: 1100px) {
.hero { padding-top: 40px; }
.hero-visual.gallery-stage { height: 600px; }
}
@media (max-width: 900px) {
.hero { grid-template-columns: repeat(4, minmax(0, 1fr)); padding-top: 32px; }
.hero-copy,
.hero-visual.gallery-stage { grid-column: 1 / -1; }
.hero-copy { padding-bottom: 32px; }
.hero .move-title { font-size: clamp(76px, 17vw, 120px); }
.hero .actions { align-items: center; flex-direction: row; }
.hero-visual.gallery-stage { height: clamp(440px, 90vw, 620px); width: 100%; margin: 0; }
.hero-steps { gap: 12px; }
.hero .lead { max-width: 58ch; }
}
@media (max-width: 359px) {
.hero .move-title { font-size: 72px; }
}