.corazon-experience {
  --experience-bg: #a34f3b;
  --experience-ink: #f5ead7;
  min-height: 100svh;
  overflow: visible;
  background: var(--experience-bg);
  color: var(--experience-ink);
  padding: clamp(30px, 3.2vw, 48px) clamp(30px, 3.7vw, 56px) clamp(34px, 3.4vw, 52px);
  display: grid;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  grid-template-rows: auto minmax(120px, .65fr) minmax(170px, 1fr) minmax(175px, 1.05fr) minmax(92px, .45fr);
  gap: clamp(10px, 1.2vw, 18px);
}

.experience-heading {
  grid-column: 1 / 5;
  grid-row: 1;
  align-self: start;
  z-index: 4;
}

.experience-heading h2 {
  margin: 0;
  font: 600 clamp(13px, 1.05vw, 16px) / 1.25 Source, Georgia, serif;
  letter-spacing: .16em;
  text-transform: uppercase;
  text-wrap: balance;
}

.experience-manifesto {
  display: contents;
  margin: 0;
}

.experience-theme {
  position: relative;
  z-index: 4;
  color: var(--experience-ink);
  font-family: Brasilero, Georgia, serif;
  font-weight: 400;
  line-height: .82;
  white-space: nowrap;
}

.experience-theme--music {
  grid-column: 1 / 5;
  grid-row: 2;
  align-self: center;
  justify-self: center;
  font-size: clamp(78px, 7.6vw, 110px);
}

.experience-theme--people {
  grid-column: 1 / 5;
  grid-row: 3;
  align-self: start;
  justify-self: start;
  font-size: clamp(62px, 6.5vw, 92px);
}

.experience-theme--places {
  grid-column: 3 / 8;
  grid-row: 5;
  align-self: start;
  justify-self: start;
  font-size: clamp(72px, 7.1vw, 102px);
}

.experience-theme--hospitality {
  grid-column: 7 / 13;
  grid-row: 5;
  align-self: end;
  justify-self: end;
  font-size: clamp(58px, 5.7vw, 82px);
}

.experience-photo {
  margin: 0;
  min-width: 0;
  overflow: hidden;
  background: #241c19;
}

.experience-photo img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.experience-photo--anchor {
  grid-column: 4 / 11;
  grid-row: 2 / 5;
  z-index: 1;
  min-height: clamp(490px, 58vh, 650px);
}

.experience-photo--anchor img { object-position: 50% 50%; }

.experience-photo--music {
  grid-column: 10 / 13;
  grid-row: 1 / 3;
  z-index: 2;
  align-self: start;
  max-height: 310px;
  aspect-ratio: 3 / 4;
}

.experience-photo--music img { object-position: 50% 36%; }

.experience-photo--people {
  grid-column: 1 / 4;
  grid-row: 3 / 5;
  z-index: 2;
  align-self: end;
  max-height: 330px;
  aspect-ratio: 4 / 5;
}

.experience-photo--people img { object-position: 51% 50%; }

.experience-photo--hospitality {
  grid-column: 10 / 13;
  grid-row: 4 / 6;
  z-index: 3;
  align-self: end;
  justify-self: end;
  width: 88%;
  max-height: 285px;
  margin-left: -22px;
  aspect-ratio: 3 / 4;
}

.experience-photo--hospitality img { object-position: 50% 57%; }

/* The three approved one-shot motion behaviors. Content remains visible without JS. */
.corazon-experience.is-motion-ready:not(.is-entered) .experience-photo--anchor {
  opacity: 0;
  transform: translateY(12px) scale(.985);
}

.corazon-experience.is-motion-ready .experience-photo--anchor {
  transition: opacity 620ms cubic-bezier(.22, 1, .36, 1), transform 620ms cubic-bezier(.22, 1, .36, 1);
}

.corazon-experience.is-motion-ready:not(.is-entered) .experience-photo--music {
  opacity: 0;
  transform: translate(-10px, 10px);
}

.corazon-experience.is-motion-ready:not(.is-entered) .experience-photo--people {
  opacity: 0;
  transform: translate(12px, -8px);
}

.corazon-experience.is-motion-ready:not(.is-entered) .experience-photo--hospitality {
  opacity: 0;
  transform: translate(-10px, -8px);
}

.corazon-experience.is-motion-ready .experience-photo--music,
.corazon-experience.is-motion-ready .experience-photo--people,
.corazon-experience.is-motion-ready .experience-photo--hospitality {
  transition: opacity 520ms cubic-bezier(.22, 1, .36, 1) 140ms, transform 520ms cubic-bezier(.22, 1, .36, 1) 140ms;
}

.corazon-experience.is-motion-ready:not(.is-entered) .experience-theme {
  opacity: 0;
  transform: translateY(8px);
}

.corazon-experience.is-motion-ready .experience-theme {
  transition: opacity 440ms cubic-bezier(.25, 1, .5, 1) 400ms, transform 440ms cubic-bezier(.25, 1, .5, 1) 400ms;
}

@media (max-width: 900px) {
  .corazon-experience {
    padding: 30px 28px 38px;
    grid-template-columns: repeat(8, minmax(0, 1fr));
    grid-template-rows: auto minmax(185px, .85fr) minmax(185px, .9fr) minmax(170px, .8fr) minmax(120px, .55fr) auto;
    gap: 12px;
  }

  .experience-heading { grid-column: 1 / 6; grid-row: 1; }
  .experience-theme--music { grid-column: 1 / 5; grid-row: 2; align-self: start; justify-self: start; font-size: clamp(68px, 10.5vw, 86px); }
  .experience-theme--people { grid-column: 1 / 5; grid-row: 4; align-self: start; font-size: clamp(58px, 9vw, 76px); }
  .experience-theme--places { grid-column: 2 / 6; grid-row: 5; align-self: center; font-size: clamp(64px, 9.5vw, 82px); }
  .experience-theme--hospitality { grid-column: 3 / 9; grid-row: 6; align-self: end; font-size: clamp(54px, 8vw, 70px); }
  .experience-photo--anchor { grid-column: 2 / 8; grid-row: 2 / 4; min-height: 0; aspect-ratio: 16 / 10; }
  .experience-photo--music { grid-column: 7 / 9; grid-row: 1 / 3; align-self: end; max-height: none; }
  .experience-photo--people { grid-column: 1 / 4; grid-row: 3 / 5; align-self: end; max-height: none; }
  .experience-photo--hospitality { grid-column: 6 / 9; grid-row: 4 / 6; width: 100%; max-height: none; margin-left: -12px; }
}

@media (max-width: 600px) {
  .corazon-experience {
    padding: 24px 18px 34px;
    grid-template-columns: repeat(6, minmax(0, 1fr));
    grid-template-rows: auto auto minmax(112px, auto) minmax(130px, auto) minmax(112px, auto) minmax(148px, auto);
    gap: 10px;
  }

  .experience-heading { grid-column: 1 / 7; grid-row: 1; margin-bottom: 4px; }
  .experience-heading h2 { font-size: 13px; letter-spacing: .13em; }
  .experience-photo--anchor { grid-column: 1 / 7; grid-row: 2; min-height: 0; aspect-ratio: 16 / 10; }
  .experience-theme--music { grid-column: 1 / 5; grid-row: 3; align-self: center; font-size: clamp(51px, 15vw, 62px); }
  .experience-photo--music { grid-column: 5 / 7; grid-row: 3 / 5; align-self: stretch; aspect-ratio: auto; }
  .experience-photo--people { grid-column: 1 / 4; grid-row: 4 / 6; align-self: stretch; aspect-ratio: auto; }
  .experience-theme--people { grid-column: 3 / 7; grid-row: 4; align-self: start; justify-self: end; font-size: clamp(47px, 13.5vw, 56px); }
  .experience-theme--places { grid-column: 3 / 7; grid-row: 5; align-self: end; justify-self: end; font-size: clamp(48px, 14vw, 58px); }
  .experience-photo--hospitality { grid-column: 4 / 7; grid-row: 6; align-self: start; width: 100%; height: auto; min-height: 148px; margin: 0; aspect-ratio: 3 / 4; }
  .experience-theme--hospitality { grid-column: 1 / 6; grid-row: 6; align-self: center; justify-self: start; font-size: clamp(42px, 12.5vw, 52px); }

  .corazon-experience.is-motion-ready:not(.is-entered) .experience-photo--anchor {
    transform: translateY(6px);
  }

  .corazon-experience.is-motion-ready .experience-photo--anchor {
    transition-duration: 360ms;
  }

  .corazon-experience.is-motion-ready:not(.is-entered) .experience-photo--music,
  .corazon-experience.is-motion-ready:not(.is-entered) .experience-photo--people,
  .corazon-experience.is-motion-ready:not(.is-entered) .experience-photo--hospitality,
  .corazon-experience.is-motion-ready:not(.is-entered) .experience-theme {
    transform: none;
  }

  .corazon-experience.is-motion-ready .experience-photo--music,
  .corazon-experience.is-motion-ready .experience-photo--people,
  .corazon-experience.is-motion-ready .experience-photo--hospitality {
    transition: opacity 320ms cubic-bezier(.25, 1, .5, 1);
  }

  .corazon-experience.is-motion-ready .experience-theme {
    transition: opacity 280ms cubic-bezier(.25, 1, .5, 1);
  }
}

@media (prefers-reduced-motion: reduce) {
  .corazon-experience,
  .corazon-experience * {
    transition: none !important;
    animation: none !important;
  }

  .corazon-experience .experience-photo,
  .corazon-experience .experience-theme {
    opacity: 1 !important;
    transform: none !important;
  }
}