.poker-page {
  overflow: clip;
}

.poker-page .eyebrow {
  margin-block-end: var(--space-4);
}

.poker-page .eyebrow::before {
  background: var(--color-sun-baked-ochre);
}

.poker-hero__grid {
  display: grid;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  gap: var(--space-5);
  align-items: start;
}

.poker-hero__content {
  grid-column: 1 / span 6;
  min-width: 0;
  padding-block-start: var(--space-5);
}

.poker-hero__content h1 {
  max-width: 720px;
  font-size: clamp(4rem, 7.5vw, 6rem);
  line-height: .94;
}

.poker-hero__lead {
  max-width: 470px;
  font-size: var(--text-lead);
  line-height: var(--leading-lead);
}

.poker-hero__actions,
.poker-final__actions {
  display: flex;
  min-width: 0;
  flex-wrap: wrap;
  gap: var(--space-3);
  align-items: center;
}

.poker-hero__actions > *,
.poker-final__actions > * {
  min-width: 0;
  width: auto;
}

.poker-hero__figure {
  grid-column: 8 / span 5;
  min-width: 0;
  margin-block: var(--space-6) 0;
}

.poker-hero__media {
  aspect-ratio: 4 / 5;
  border-radius: 0 var(--radius-organic-large) 0 var(--radius-organic);
}

.poker-hero__figure figcaption {
  max-width: 280px;
  margin: calc(var(--space-4) * -1) 0 0 calc(var(--space-5) * -1);
  position: relative;
  padding: var(--space-3) var(--space-4);
  background: var(--color-plaster-ivory);
}

.poker-philosophy__heading {
  display: grid;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  gap: var(--space-5);
  align-items: end;
  margin-block-end: var(--space-8);
}

.poker-philosophy__heading > * {
  min-width: 0;
}

.poker-philosophy__heading > :first-child {
  grid-column: 1 / span 5;
}

.poker-philosophy__intro {
  grid-column: 7 / span 5;
  max-width: 520px;
  font-size: var(--text-lead);
  line-height: var(--leading-lead);
  margin-block-end: 0;
}

.poker-philosophy__fragments {
  display: grid;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  gap: var(--space-5);
}

.poker-fragment {
  min-width: 0;
  border-top: 1px solid color-mix(in srgb, var(--color-line-warm) 80%, transparent);
  padding-top: var(--space-4);
}

.poker-fragment--one { grid-column: 1 / span 3; }
.poker-fragment--two { grid-column: 5 / span 3; margin-top: var(--space-5); }
.poker-fragment--three { grid-column: 9 / span 3; margin-top: var(--space-7); }

.poker-fragment__number,
.poker-step > span,
.poker-private__intentions span,
.poker-path > span {
  display: block;
  color: var(--color-clay-red);
  font-family: var(--font-heading);
  font-size: 1.75rem;
  line-height: 1;
  margin-block-end: var(--space-4);
}

.poker-fragment h3 {
  font-size: 1.75rem;
}

.poker-fragment p {
  max-width: 370px;
}

.poker-scene__figure {
  margin: 0;
}

.poker-scene__media {
  aspect-ratio: 16 / 9;
}

.poker-scene__quote {
  width: min(100%, 580px);
  margin: calc(var(--space-8) * -1) 0 var(--space-7) var(--space-6);
  position: relative;
  z-index: 1;
  border-inline-start: 0;
  padding: var(--space-6);
  background: var(--color-plaster-ivory);
  font-size: clamp(2rem, 3.3vw, 2.5rem);
}

.poker-scene__quote::before {
  display: block;
  width: 38px;
  height: 3px;
  margin-bottom: var(--space-4);
  background: var(--color-clay-red);
  content: "";
}

.poker-scene__copy {
  display: grid;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  gap: var(--space-5);
}

.poker-scene__copy > * {
  min-width: 0;
}

.poker-scene__copy > :first-child { grid-column: 1 / span 4; }
.poker-scene__copy > :last-child { grid-column: 7 / span 4; }
.poker-scene__copy p:not(.eyebrow) { max-width: 430px; }

.poker-rhythm__intro {
  width: min(100%, 560px);
  margin-inline: auto;
  text-align: center;
}

.poker-rhythm__intro .eyebrow {
  justify-content: center;
}

.poker-rhythm__steps {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--space-6);
  margin-top: var(--space-8);
}

.poker-step {
  min-width: 0;
  border-inline-start: 2px solid var(--color-ultramarine);
  padding-inline-start: var(--space-4);
}

.poker-step--raised {
  margin-top: calc(var(--space-5) * -1);
}

.poker-step p {
  max-width: 330px;
}

.poker-groups__heading {
  width: min(100%, 590px);
  margin-bottom: var(--space-8);
}

.poker-groups__layout {
  display: grid;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  gap: var(--space-6);
  align-items: start;
}

.poker-groups__figure {
  grid-column: 8 / span 4;
  min-width: 0;
  margin: 0;
  order: 2;
}

.poker-groups__media {
  aspect-ratio: 3 / 4;
  border-radius: var(--radius-organic-large) 0 var(--radius-organic) 0;
}

.poker-groups__articles {
  grid-column: 1 / span 6;
  min-width: 0;
  order: 1;
}

.poker-groups__articles article {
  max-width: 520px;
  border-top: 1px solid var(--color-line-warm);
  padding-block: var(--space-5);
}

.poker-groups__articles article:last-child {
  border-bottom: 1px solid var(--color-line-warm);
}

.poker-groups__articles p {
  max-width: 520px;
}

.poker-codes .eyebrow,
.poker-final .eyebrow {
  color: var(--color-chalk-white);
}

.poker-codes__layout {
  display: grid;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  gap: var(--space-6);
  align-items: start;
}

.poker-codes__heading {
  grid-column: 1 / span 6;
  min-width: 0;
}

.poker-codes__heading p:not(.eyebrow) {
  max-width: 540px;
}

.poker-codes__list {
  grid-column: 7 / span 6;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  min-width: 0;
  gap: var(--space-5);
}

.poker-codes__list article {
  min-width: 0;
  border-top: 1px solid rgb(244 240 231 / 35%);
  padding-top: var(--space-4);
}

.poker-codes__list span {
  display: block;
  margin-bottom: var(--space-3);
  color: var(--color-sun-baked-ochre);
  font-size: 1.5rem;
}

.poker-codes__list h3 {
  font-family: var(--font-body);
  font-size: var(--text-lead);
  font-weight: var(--weight-medium);
  letter-spacing: 0;
}

.poker-codes__list p {
  max-width: 300px;
}

.poker-private__panel {
  display: grid;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  gap: var(--space-6);
  min-width: 0;
  padding: var(--space-8);
  background: var(--color-plaster-ivory);
  position: relative;
}

.poker-private__panel::after {
  position: absolute;
  right: var(--space-5);
  top: var(--space-5);
  width: 72px;
  height: 22px;
  background: var(--color-sun-baked-ochre);
  content: "";
  transform: rotate(-4deg);
}

.poker-private__intro {
  grid-column: 1 / span 5;
  min-width: 0;
}

.poker-private__intro p:not(.eyebrow) {
  max-width: 520px;
}

.poker-private__intentions {
  grid-column: 7 / span 5;
  min-width: 0;
}

.poker-private__intentions article {
  border-top: 1px solid var(--color-line-warm);
  padding-block: var(--space-4);
}

.poker-private__intentions article:last-child {
  border-bottom: 1px solid var(--color-line-warm);
}

.poker-private__intentions article p {
  max-width: 310px;
}

.poker-paths__heading {
  width: min(100%, 520px);
  margin-bottom: var(--space-7);
}

.poker-paths__grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  min-width: 0;
  gap: 1px;
  background: var(--color-line-warm);
}

.poker-path {
  display: flex;
  min-width: 0;
  min-height: 390px;
  flex-direction: column;
  align-items: flex-start;
  padding: var(--space-6);
  background: var(--color-plaster-ivory);
  text-decoration: none;
}

.poker-path--accent {
  padding-top: var(--space-8);
  background: color-mix(in srgb, var(--color-travertine) 64%, var(--color-chalk-white));
}

.poker-path p {
  max-width: 340px;
}

.poker-path strong {
  margin-top: auto;
  padding-top: var(--space-5);
  font-size: var(--text-small);
  font-weight: var(--weight-medium);
  text-decoration: underline;
  text-decoration-color: var(--color-sun-baked-ochre);
  text-underline-offset: .22em;
}

.poker-path:hover {
  background: var(--color-chalk-white);
}

.poker-details__heading {
  width: min(100%, 580px);
  margin-bottom: var(--space-8);
}

.poker-detail {
  display: grid;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  gap: var(--space-6);
  align-items: center;
}

.poker-detail + .poker-detail {
  margin-top: var(--space-9);
}

.poker-detail > * {
  min-width: 0;
  margin: 0;
}

.poker-detail--material .poker-detail__copy { grid-column: 1 / span 4; }
.poker-detail--material figure { grid-column: 6 / span 5; }
.poker-detail--gestures figure { grid-column: 1 / span 6; }
.poker-detail--gestures .poker-detail__copy { grid-column: 8 / span 4; }

.poker-detail__copy p {
  max-width: 420px;
}

.poker-detail__arch-media {
  aspect-ratio: 4 / 5;
  border-radius: 50% 50% 0 0 / 15% 15% 0 0;
}

.poker-detail__wide-media {
  aspect-ratio: 4 / 3;
}

.poker-final__panel {
  display: grid;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  gap: var(--space-5);
  align-items: center;
  position: relative;
}

.poker-final__content {
  grid-column: 1 / span 7;
  min-width: 0;
}

.poker-final__content h2 {
  max-width: 580px;
}

.poker-final__content > p:not(.eyebrow):not(.poker-final__links) {
  max-width: 500px;
  font-size: 1.125rem;
  line-height: 1.5;
}

.poker-final__links {
  max-width: 580px;
  border-top: 1px solid rgb(244 240 231 / 30%);
  padding-top: var(--space-4);
  color: color-mix(in srgb, var(--color-chalk-white) 82%, transparent);
  font-size: var(--text-small);
}

.poker-final__shape {
  grid-column: 9 / span 3;
  min-width: 0;
  aspect-ratio: 1;
  border: 1px solid rgb(244 240 231 / 22%);
  border-radius: 48% 52% 43% 57%;
  position: relative;
}

.poker-final__shape::before {
  position: absolute;
  inset: 18%;
  border: 1px solid rgb(244 240 231 / 20%);
  border-radius: 50%;
  content: "";
}

@media (max-width: 64rem) {
  .poker-hero__grid,
  .poker-philosophy__heading,
  .poker-philosophy__fragments,
  .poker-scene__copy,
  .poker-groups__layout,
  .poker-codes__layout,
  .poker-private__panel,
  .poker-detail,
  .poker-final__panel {
    grid-template-columns: repeat(8, minmax(0, 1fr));
  }

  .poker-hero__content { grid-column: 1 / span 8; }
  .poker-hero__figure { grid-column: 1 / span 8; margin-top: 0; }
  .poker-hero__media { aspect-ratio: 3 / 4; }
  .poker-philosophy__heading > :first-child,
  .poker-philosophy__intro { grid-column: 1 / span 8; }
  .poker-philosophy__intro { margin-top: var(--space-3); }
  .poker-fragment--one, .poker-fragment--two { grid-column: span 4; margin-top: 0; }
  .poker-fragment--three { grid-column: 1 / span 4; margin-top: 0; }
  .poker-scene__quote { margin: var(--space-5) 0 var(--space-7); }
  .poker-scene__copy > :first-child, .poker-scene__copy > :last-child { grid-column: span 4; }
  .poker-rhythm__steps { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .poker-step--raised { margin-top: 0; }
  .poker-step:last-child { grid-column: 1 / span 1; }
  .poker-groups__figure { grid-column: 1 / span 8; order: 1; }
  .poker-groups__media { aspect-ratio: 4 / 3; }
  .poker-groups__articles { grid-column: 1 / span 8; order: 2; }
  .poker-codes__heading { grid-column: 1 / span 8; }
  .poker-codes__list { grid-column: 1 / span 8; }
  .poker-private__intro { grid-column: 1 / span 8; }
  .poker-private__intentions { grid-column: 1 / span 8; }
  .poker-paths__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .poker-path:last-child { grid-column: 1 / span 1; }
  .poker-detail--material .poker-detail__copy,
  .poker-detail--material figure,
  .poker-detail--gestures figure,
  .poker-detail--gestures .poker-detail__copy { grid-column: 1 / span 8; }
  .poker-detail--material figure { order: 1; }
  .poker-detail--material .poker-detail__copy { order: 2; }
  .poker-detail--gestures figure { order: 1; }
  .poker-detail--gestures .poker-detail__copy { order: 2; }
  .poker-final__content { grid-column: 1 / span 8; }
  .poker-final__shape { display: none; }
}

@media (max-width: 48rem) {
  .poker-hero__content { padding-block-start: 0; }
  .poker-hero__content h1 { font-size: 2.625rem; line-height: 1.02; }
  .poker-hero__lead { font-size: 1.125rem; line-height: 1.5; }
  .poker-hero__actions,
  .poker-final__actions { flex-direction: column; align-items: stretch; }
  .poker-hero__actions > *,
  .poker-final__actions > * { width: 100%; }
  .poker-hero__figure figcaption { margin: var(--space-3) 0 0; }
  .poker-philosophy__heading,
  .poker-philosophy__fragments,
  .poker-scene__copy,
  .poker-groups__layout,
  .poker-codes__layout,
  .poker-private__panel,
  .poker-detail,
  .poker-final__panel { grid-template-columns: 1fr; }
  .poker-philosophy__heading > :first-child,
  .poker-philosophy__intro,
  .poker-fragment--one,
  .poker-fragment--two,
  .poker-fragment--three,
  .poker-scene__copy > :first-child,
  .poker-scene__copy > :last-child,
  .poker-groups__figure,
  .poker-groups__articles,
  .poker-codes__heading,
  .poker-codes__list,
  .poker-private__intro,
  .poker-private__intentions,
  .poker-detail--material .poker-detail__copy,
  .poker-detail--material figure,
  .poker-detail--gestures figure,
  .poker-detail--gestures .poker-detail__copy,
  .poker-final__content { grid-column: 1; }
  .poker-philosophy__heading { margin-bottom: var(--space-6); }
  .poker-fragment--two,
  .poker-fragment--three { margin-top: 0; }
  .poker-fragment { padding-block: var(--space-4); }
  .poker-scene__media { aspect-ratio: 4 / 3; }
  .poker-scene__quote { width: 100%; padding: var(--space-5); font-size: 2rem; line-height: 1.1; }
  .poker-scene__copy { gap: var(--space-6); }
  .poker-rhythm__intro { width: 100%; margin-inline: 0; text-align: left; }
  .poker-rhythm__intro .eyebrow { justify-content: flex-start; }
  .poker-rhythm__steps { grid-template-columns: 1fr; gap: var(--space-5); margin-top: var(--space-6); }
  .poker-step:last-child { grid-column: 1; }
  .poker-codes__list { grid-template-columns: 1fr; }
  .poker-private__panel { padding: var(--space-5); }
  .poker-private__panel::after { width: 48px; height: 16px; right: var(--space-4); top: var(--space-4); }
  .poker-paths__grid { grid-template-columns: 1fr; }
  .poker-path,
  .poker-path:last-child { grid-column: 1; min-height: 0; }
  .poker-path--accent { padding-top: var(--space-6); }
  .poker-detail + .poker-detail { margin-top: var(--space-7); }
  .poker-detail { gap: var(--space-4); }
  .poker-detail__arch-media,
  .poker-detail__wide-media { aspect-ratio: 4 / 3; }
  .poker-final { padding-inline: var(--container-padding-mobile); }
  .poker-final .container { padding-inline: 0; }
  .poker-final__panel { padding: var(--space-6) var(--space-5); }
}

@media (prefers-reduced-motion: reduce) {
  .poker-page .media-frame img { transform: none !important; }
}
