/* === section: about — "Taste from México" ===
   Photo with big lettering on the left, logo-yellow panel cut on a diagonal on the right.
   Side by side at every width. */
.experience {
  --exp-ink: #3f2360;            /* deep sombrero purple for text on yellow */
  --wedge: 36px;                 /* how far the diagonal cuts into the photo */
  display: grid;
  grid-template-columns: 45fr 55fr;
  min-height: 420px;
  background: var(--color-sun);
  color: var(--exp-ink);
  scroll-margin-top: 64px;
  overflow: hidden;
}

/* photo side */
.exp-photo { position: relative; overflow: hidden; isolation: isolate; container-type: inline-size; }
.exp-photo img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; z-index: -2; }
.exp-photo::after { content: ''; position: absolute; inset: 0; z-index: -1; background: linear-gradient(180deg, rgba(31,26,23,.05), rgba(31,26,23,.35)); }
.exp-circle {
  position: absolute; z-index: -1;
  width: 86%; aspect-ratio: 1; border-radius: 50%;
  left: 4%; top: 50%; transform: translateY(-50%);
  background: rgba(45, 106, 51, .5);
}
/* lettering scales with the photo's own width (container units) */
.exp-lettering {
  position: absolute; left: 7%; top: 50%;
  transform: translateY(-50%) rotate(-8deg);
  margin: 0; display: flex; flex-direction: column; align-items: flex-start;
  font-family: var(--font-sign); text-transform: uppercase; line-height: .92;
  pointer-events: none;
}
.exp-lettering .l1 {
  font-size: clamp(18px, 13cqw, 76px); color: #fff; white-space: nowrap;
  text-shadow: 2px 2px 0 var(--color-logo-green), 0 6px 18px rgba(0,0,0,.35);
}
.exp-lettering .l2 {
  font-size: clamp(28px, 21cqw, 124px); color: var(--color-sun); white-space: nowrap;
  margin-left: .2em;
  text-shadow:
    0 -3px 0 var(--color-logo-green), 3px 0 0 var(--color-logo-green), 0 3px 0 var(--color-logo-green), -3px 0 0 var(--color-logo-green),
    2px 2px 0 var(--color-logo-green), -2px 2px 0 var(--color-logo-green), 2px -2px 0 var(--color-logo-green), -2px -2px 0 var(--color-logo-green),
    4px 6px 0 var(--color-red);
}
.exp-sample {
  position: absolute; left: 8px; bottom: 8px;
  font-size: 11px; color: var(--color-ink); background: rgba(250,246,239,.88);
  padding: 2px 8px; border-radius: var(--radius-pill);
}

/* yellow panel side */
.exp-panel {
  position: relative;
  display: flex; flex-direction: column; justify-content: center; align-items: flex-start;
  padding: var(--space-6) var(--gutter) var(--space-6) var(--space-3);
  background:
    radial-gradient(circle at 20% 15%, rgba(255,255,255,.35), transparent 45%),
    radial-gradient(circle at 85% 90%, rgba(242,165,22,.25), transparent 50%),
    var(--color-sun);
}
/* diagonal edge: slants from top-right to bottom-left over the photo */
.exp-panel::before {
  content: ''; position: absolute; top: 0; bottom: 0;
  left: calc(var(--wedge) * -1); width: calc(var(--wedge) + 1px);
  background: var(--color-sun);
  clip-path: polygon(100% 0, 100% 100%, 0 100%);
}
.exp-logo { width: clamp(72px, 18vw, 120px); height: auto; margin-bottom: var(--space-2); }
.experience .welcome { color: var(--color-red-dark); margin-bottom: var(--space-2); font-size: clamp(26px, 6vw, 48px); }
.exp-headline {
  font-family: 'Oswald', var(--font-body); font-weight: 700;
  transform: skewX(-8deg); transform-origin: left bottom;
  text-transform: uppercase; letter-spacing: 0;
  font-size: clamp(20px, 4.4vw, 46px); line-height: 1.08;
  color: var(--exp-ink); margin-bottom: var(--space-3);
}
.exp-body {
  font-family: 'Oswald', var(--font-body); font-weight: 400;
  font-size: clamp(15px, 2.4vw, 24px); line-height: 1.4; max-width: 30ch;
  margin-bottom: var(--space-4);
}
.exp-close {
  font-family: var(--font-script); color: var(--color-red-dark); /* deeper red: 4.5:1+ on the yellow */
  font-size: clamp(24px, 4vw, 42px); line-height: 1.1;
  transform: rotate(-3deg); transform-origin: left;
}

@media (min-width: 900px) {
  .experience { --wedge: 160px; grid-template-columns: 1.1fr 1fr; min-height: 640px; }
  .exp-panel { padding: var(--space-8) var(--space-7) var(--space-8) var(--space-6); }
}