.dining-experience {
  width: 100%;
  background:
    radial-gradient(ellipse at 85% 10%, rgba(124, 139, 110, 0.08), transparent 55%),
    var(--bg);
  padding: var(--spacing-2xl) clamp(1.25rem, 4vw, 4rem);
  overflow: hidden;
}

/* ============ Overlapping collage — big photo + stacked pair + quote ============ */
.experience-collage {
  position: relative;
  max-width: var(--max-width);
  margin: 0 auto;
  display: grid;
  grid-template-columns: repeat(12, 1fr);
  grid-auto-rows: clamp(64px, 7.5vw, 104px);
}

.xp-photo {
  margin: 0;
  border: 9px solid var(--surface);
  border-radius: var(--radius-md);
  overflow: hidden;
  box-shadow: var(--shadow-soft), var(--shadow-lift);
  background: var(--surface);
}
.xp-photo img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  filter: saturate(0.92);
  transition: transform 0.8s var(--ease-out-expo), filter 0.5s ease;
}
.experience-collage .xp-photo:hover {
  z-index: 4;
}
.experience-collage .xp-photo:hover img {
  transform: scale(1.05);
  filter: saturate(1.05);
}

.xp-a { grid-column: 1 / 8; grid-row: 1 / 5; z-index: 1; }
.xp-b { grid-column: 8 / 13; grid-row: 1 / 3; margin-top: 14px; z-index: 2; }
.xp-c { grid-column: 8 / 13; grid-row: 3 / 6; margin-bottom: 10px; z-index: 2; }

/* Center quote card floating over the collage */
.xp-quote {
  position: absolute;
  z-index: 3;
  left: 50%;
  top: 50%;
  translate: -50% -50%;
  width: min(400px, 84%);
  margin: 0;
  background: rgba(255, 255, 255, 0.94);
  border: 1.5px dashed rgba(174, 139, 74, 0.55);
  border-radius: var(--radius-lg);
  padding: 1.9rem 2.1rem 1.6rem;
  text-align: center;
  box-shadow: var(--shadow-soft), var(--shadow-lift);
}
.xp-quote p {
  font-family: var(--font-serif);
  font-style: italic;
  font-size: clamp(1.5rem, 1.15rem + 1.4vw, 2rem);
  line-height: 1.3;
  color: var(--ink);
  margin-bottom: 0.6rem;
  max-width: none;
}
.xp-quote cite {
  font-family: var(--font-body);
  font-style: normal;
  font-size: 0.72rem;
  letter-spacing: 0.26em;
  text-transform: uppercase;
  color: var(--gold);
}

/* Washi tape on the quote card */
.xp-quote::before {
  content: '';
  position: absolute;
  top: -12px;
  left: 50%;
  width: 88px;
  height: 24px;
  transform: translateX(-50%) rotate(calc(var(--tilt, 0deg) * -1.5));
  background: repeating-linear-gradient(45deg, rgba(232, 80, 58, 0.28) 0 6px, rgba(255, 255, 255, 0.6) 6px 12px);
  border-left: 1px dashed rgba(255, 255, 255, 0.65);
  border-right: 1px dashed rgba(255, 255, 255, 0.65);
  box-shadow: 0 3px 8px -3px rgba(38, 37, 28, 0.35);
  pointer-events: none;
}

@media (max-width: 720px) {
  .experience-collage {
    grid-template-rows: repeat(5, clamp(52px, 11vw, 70px)) auto;
  }
  .xp-quote {
    position: static;
    translate: none;
    grid-column: 1 / -1;
    grid-row: 6;
    margin: 1.4rem auto 0;
    width: min(420px, 100%);
    --tilt: -1.5deg;
  }
  .xp-a { grid-column: 1 / 13; grid-row: auto / span 4; }
  .xp-b { grid-column: 1 / 7; grid-row: auto / span 3; margin-top: 10px; }
  .xp-c { grid-column: 7 / 13; grid-row: auto / span 3; }
}