/* Amazónico Garden. Split stage: two grounds held for the whole page,
   Healthy on the left, Guilty on the right, the "&" as the divider.
   Tokens from the menú digital (paleta.json): forest, gold, cream.       */

:root {
  --sc-canvas: #1C4436;
  --sc-surface: #143327;
  --sc-ink: #F3E9D2;
  --sc-ink-soft: #C9D3C4;
  --sc-accent: #D9A21B;
  --sc-accent-ink: #0E241C;
  --sc-font-display: "Lora", Georgia, serif;
  --sc-font-text: "Work Sans", system-ui, sans-serif;
  --sc-shadow-color: 160 45% 5%;

  --h: #1C4436;          /* healthy ground   */
  --h-deep: #0E241C;
  --g: #2A1710;          /* guilty ground    */
  --g-deep: #170C08;
  --g-soft: #E2CDB8;     /* ink-soft on cacao, tinted warm */
  --gold-ink: #F0BC32;   /* gold as text: 5.2:1+ on both grounds */
  --script: "Pinyon Script", cursive;
  --amp: italic 500 1em/1 "Lora", Georgia, serif;

  --split: 50;           /* divider position, % from the left. JS drives it in the balanza. */
  --vine-o: 1;           /* chrome opacity, collapses in the close */
}

html { background: var(--h-deep); }
body {
  background: linear-gradient(90deg, var(--h) 0 50%, var(--g) 50% 100%);
  color: var(--sc-ink);
  overflow-x: clip;
}
::selection { background: var(--sc-accent); color: var(--sc-accent-ink); }
.sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
.skip { position: fixed; left: 1rem; top: -4rem; z-index: 100; background: var(--sc-accent); color: var(--sc-accent-ink); padding: .6rem 1rem; border-radius: var(--sc-r-pill); }
.skip:focus-visible { top: 1rem; }
:focus-visible { outline: 2px solid var(--gold-ink); outline-offset: 3px; }

/* ------------------------------------------------------------------ CTA */
.cta {
  display: inline-flex; align-items: center; justify-content: center;
  min-height: 48px; padding: 0 1.5rem;
  border-radius: var(--sc-r-pill);
  background: var(--sc-accent); color: var(--sc-accent-ink);
  font-weight: 600; font-size: var(--sc-t-sm); letter-spacing: .01em;
  text-decoration: none; white-space: nowrap;
  box-shadow: var(--sc-e2), inset 0 1px 0 rgb(255 240 200 / .45);
  transition: transform 140ms var(--sc-ease-out), background-color 160ms var(--sc-ease-out);
}
@media (hover: hover) and (pointer: fine) { .cta:hover { background: #E8B22A; } }
.cta:active { transform: scale(.97); }
.cta--big { min-height: 56px; padding: 0 2rem; font-size: var(--sc-t-base); }

/* ---------------------------------------------------------------- VINE
   Fixed chrome on the divider. Everything sits at left: var(--split)%.   */
.vine { position: fixed; inset: 0; z-index: var(--sc-z-chrome); pointer-events: none; opacity: var(--vine-o); }
.vine > * { pointer-events: auto; }
.vine__line {
  position: absolute; top: 0; bottom: 0; left: calc(var(--split) * 1%);
  width: 1px; translate: -.5px 0;
  background: linear-gradient(to bottom, transparent 0 7.5rem, rgb(217 162 27 / .55) 7.5rem calc(100% - 6.5rem), transparent calc(100% - 6.5rem));
  transform-origin: 50% 50%;
  scale: 1 var(--vine-o);
  pointer-events: none;
}
.vine__mark {
  position: absolute; top: 1.1rem; left: calc(var(--split) * 1%); translate: -50% 0;
  display: grid; justify-items: center; text-decoration: none; line-height: 1;
  padding: .3rem .9rem .45rem; border-radius: var(--sc-r-md);
}
.vine__word { font-family: var(--sc-font-display); font-weight: 500; font-size: 1.6rem; letter-spacing: -.01em; color: var(--sc-accent); }
.vine__sub { font-family: var(--script); font-size: 1.15rem; color: var(--gold-ink); margin-top: .1rem; }
.vine__label {
  position: absolute; top: 2.1rem; font-size: var(--sc-t-xs); font-weight: 600;
  text-transform: uppercase; letter-spacing: .18em; color: var(--sc-ink-soft);
  pointer-events: none;
}
.vine__label--h { right: calc((100 - var(--split)) * 1% + 7rem); }
.vine__label--g { left: calc(var(--split) * 1% + 7rem); color: var(--g-soft); }
.vine__knot {
  position: absolute; left: calc(var(--split) * 1%);
  top: 7.5rem; will-change: transform; /* JS slides it down the line with page progress */
  translate: -50% -50%;
  font: var(--amp); font-size: 2.4rem; color: var(--gold-ink);
  text-shadow: 0 2px 8px rgb(10 28 21 / .6);
  pointer-events: none;
  transition: opacity 240ms var(--sc-ease-out);
}
.vine__book {
  position: absolute; top: 1.6rem; right: var(--sc-gutter);
  font-size: var(--sc-t-sm); font-weight: 500; color: var(--sc-ink); text-decoration: none;
  padding: .55rem 1rem; border-radius: var(--sc-r-pill);
  border: 1px solid rgb(243 233 210 / .35);
  transition: background-color 160ms var(--sc-ease-out);
}
@media (hover: hover) and (pointer: fine) { .vine__book:hover { background: rgb(243 233 210 / .1); } }
.vine__cta { position: absolute; bottom: 1.4rem; left: calc(var(--split) * 1%); translate: -50% 0; }
.is-bal .vine__knot { opacity: 0; }

/* ------------------------------------------------------------- shared cols */
.cols { display: grid; grid-template-columns: 1fr 1fr; }
.col { min-width: 0; padding-inline: clamp(1.25rem, 5vw, 6rem); }
.col--h { background: var(--h); }
.col--g { background: var(--g); color: var(--sc-ink); }
.col--g .sc-body, .col--g .label__desc { color: var(--g-soft); }

/* ---------------------------------------------------------------- 1 HERO */
.hero__stage { display: block; }
.half { position: absolute; top: 0; bottom: 0; width: 50%; overflow: clip; }
.half--h { left: 0; background: var(--h-deep); }
.half--g { right: 0; background: var(--g-deep); }
.hero__plane { position: absolute; inset: -8% -2%; }
.hero__photo {
  width: 100%; height: 100%; max-width: none; object-fit: cover;
  transform: scale(1.14); /* JS eases it to 1.04 across the hero */
}
.half--h .hero__photo { object-position: 38% 40%; }
.half--g .hero__photo { object-position: 62% 40%; }
.hero__scrim {
  position: absolute; inset: auto 0 0 0; height: 70%; pointer-events: none;
  background: linear-gradient(to top, rgb(9 20 15 / .9) 0%, rgb(9 20 15 / .78) 42%, rgb(9 20 15 / .4) 70%, transparent 100%);
}
.hero__copy { position: absolute; inset: auto 0 clamp(6rem, 15vh, 9rem) 0; z-index: 4; pointer-events: none; }
.hero__title {
  display: grid; grid-template-columns: 1fr auto 1fr; align-items: end;
  font-family: var(--sc-font-display); font-weight: 500;
  font-size: clamp(3rem, 1.4rem + 6vw, 7.4rem); line-height: .95; letter-spacing: -.035em;
  margin: 0; text-wrap: balance;
}
.hero__w--h { text-align: right; padding-right: .18em; }
.hero__w--g { text-align: left; padding-left: .18em; font-style: italic; }
.hero__amp {
  font: var(--amp); font-size: 1.05em; color: var(--gold-ink); letter-spacing: 0;
}
.hero__pl {
  grid-column: 1 / -1; justify-self: center;
  font-family: var(--script); font-weight: 400; letter-spacing: 0;
  font-size: .5em; line-height: 1; color: var(--gold-ink); margin-top: .1em;
}
.hero__lede {
  margin: var(--sc-5) 0 0 50%; width: 50%; padding: 0 2.5rem 0 .35em; max-width: 36rem;
  font-size: var(--sc-t-base); color: var(--sc-ink); text-wrap: balance;
}

/* foreground foliage: out of focus, closest plane, fastest. The blur is baked
   into the images (lab/leaves.mjs): a live filter on a moving layer stutters on phones. */
.leaf { position: absolute; z-index: 6; pointer-events: none; max-width: none; height: auto; will-change: transform; }
.leaf--a { width: 49vw; left: -16vw; bottom: -21vw; }
.leaf--b { width: 32vw; right: -11vw; top: -10vw; }
.leaf--c { width: 26vw; left: 40vw; bottom: -15vw; }
.leaf--d { width: 19vw; left: -6vw; top: 6vh; }
.hero__plane, .hero__photo { will-change: transform; }

/* Entrance, once, on load: the two halves open out from the divider and the
   title rises into place. Opacity and transform only. */
@media (prefers-reduced-motion: no-preference) {
  .half { animation: half-in 1100ms var(--sc-ease-out) both; }
  .half--h { --from: 6%; }
  .half--g { --from: -6%; animation-delay: 90ms; }
  .hero__w, .hero__amp, .hero__pl, .hero__lede { animation: rise-in 900ms var(--sc-ease-out) both; }
  .hero__w--h { animation-delay: 380ms; }
  .hero__amp { animation-delay: 470ms; }
  .hero__w--g { animation-delay: 520ms; }
  .hero__pl { animation-delay: 640ms; }
  .hero__lede { animation-delay: 760ms; }
  .leaf { animation: leaf-in 1400ms var(--sc-ease-out) both 120ms; }
}
@keyframes half-in { from { opacity: 0; transform: translate3d(var(--from), 0, 0) scale(1.04); } }
@keyframes rise-in { from { opacity: 0; transform: translate3d(0, 18px, 0); } }
@keyframes leaf-in { from { opacity: 0; } }

/* ---------------------------------------------------------------- 2 MAÑANA */
.manana .col { padding-block: clamp(3rem, 8vh, 6rem) clamp(4rem, 10vh, 8rem); }
.manana__q {
  font-size: clamp(2.6rem, 1.4rem + 4vw, 5.2rem); line-height: 1; letter-spacing: -.03em;
  margin: 0 0 var(--sc-6);
}
.col--h .manana__q { text-align: right; }
.col--g .manana__q { font-style: italic; }
.plate { margin: 0; border-radius: var(--sc-r-lg); overflow: hidden; aspect-ratio: 4 / 3.4; box-shadow: var(--sc-e3); }
.plate img { width: 100%; height: 100%; object-fit: cover; }
.label { display: grid; grid-template-columns: 1fr auto; column-gap: 1rem; margin: var(--sc-5) 0 0; max-width: 34rem; }
.col--h .label { margin-left: auto; }
.label dt { font-family: var(--sc-font-display); font-size: var(--sc-t-xl); font-weight: 500; letter-spacing: -.01em; }
.label__price { margin: 0; font-family: var(--sc-font-display); font-size: var(--sc-t-xl); color: var(--gold-ink); font-variant-numeric: tabular-nums; }
.label__desc { grid-column: 1 / -1; margin: .4rem 0 0; color: var(--sc-ink-soft); font-size: var(--sc-t-sm); line-height: 1.55; max-width: 44ch; }
.manana__coda { margin: var(--sc-8) 0 0; font-family: var(--script); font-size: clamp(2rem, 1.4rem + 1.6vw, 3rem); color: var(--gold-ink); line-height: 1.1; }

/* ---------------------------------------------------------------- 3 BALANZA */
.bal__stage { background: var(--g); }
/* Every moving part here is a transform, so the phone composites it on the GPU.
   Each side is a full-width layer slid out by the divider; its contents slide
   back the same amount, so the photos never reflow while the "&" moves.     */
.bal__side { position: absolute; inset: 0; overflow: hidden; will-change: transform; }
.bal__side--h { z-index: 1; background: var(--h); transform: translate3d(-50%, 0, 0); }
.bal__side--g { background: var(--g); transform: translate3d(50%, 0, 0); }
.bal__side--h .bal__dishes { transform: translate3d(50%, 0, 0); }
.bal__side--g .bal__dishes { transform: translate3d(-50%, 0, 0); }
.bal__line { position: absolute; z-index: 7; top: 0; bottom: 0; left: 0; width: 1px; margin-left: -.5px; background: rgb(217 162 27 / .6); will-change: transform; transform: translate3d(50vw, 0, 0); }
.is-bal .vine__line, .is-bal .vine__label { opacity: 0; }
.bal__t {
  position: absolute; z-index: 3; top: 6.2rem; left: clamp(1.25rem, 4vw, 4rem); margin: 0;
  font-family: var(--sc-font-display); font-weight: 500; font-size: var(--sc-t-2xl); letter-spacing: -.02em;
  padding: .35rem 1rem .5rem; border-radius: var(--sc-r-md);
  background: rgb(14 36 28 / .9); box-shadow: var(--sc-e2), var(--sc-edge);
  white-space: nowrap;
}
.bal__dishes { position: absolute; inset: 0; will-change: transform; }
.dish {
  position: absolute; inset: 0; margin: 0; opacity: 0;
  transform: translate3d(0, 3%, 0);
  transition: opacity 520ms var(--sc-ease-out), transform 820ms var(--sc-ease-out);
}
.dish.is-on { opacity: 1; transform: none; }
.dish img { /* 62% wide, pinned to its outer edge; the winner scales up to fill its room */
  position: absolute; top: 0; height: 100%; width: 62%; object-fit: cover; will-change: transform;
}
[data-side="h"] .dish img { left: 0; transform-origin: 0 50%; }
[data-side="g"] .dish img { right: 0; transform-origin: 100% 50%; }
.dish__dim { position: absolute; inset: 0; background: rgb(6 12 9); opacity: 0; pointer-events: none; will-change: opacity; }
.dish figcaption {
  will-change: opacity;
  position: absolute; z-index: 2; bottom: 7.2rem; max-width: min(26rem, 80%);
  padding: 1rem 1.15rem; border-radius: var(--sc-r-md);
  background: rgb(14 36 28 / .88); box-shadow: var(--sc-e2), var(--sc-edge);
}
[data-side="h"] .dish figcaption { left: clamp(1rem, 3vw, 3rem); }
[data-side="g"] .dish figcaption { right: clamp(1rem, 3vw, 3rem); background: rgb(23 12 8 / .88); }
.dish__n { display: block; font-family: var(--sc-font-display); font-size: var(--sc-t-xl); font-weight: 500; line-height: 1.15; }
.dish__p { color: var(--gold-ink); font-family: var(--sc-font-display); font-variant-numeric: tabular-nums; }
.dish__d { display: block; margin-top: .3rem; font-size: var(--sc-t-sm); color: var(--sc-ink-soft); line-height: 1.45; }
[data-side="g"] .dish__d { color: var(--g-soft); }

.bal__handle {
  position: absolute; z-index: 8; top: 50%; left: 0; margin: -3.75rem 0 0 -3.75rem; will-change: transform; transform: translate3d(50vw, 0, 0);
  width: 7.5rem; height: 7.5rem; border-radius: 50%;
  display: grid; place-items: center; align-content: center;
  border: 1px solid rgb(240 188 50 / .7);
  background: radial-gradient(circle at 50% 40%, #1C4436 0 55%, #0E241C 100%);
  color: var(--gold-ink); cursor: grab; touch-action: none;
  box-shadow: 0 10px 30px rgb(4 10 7 / .55), inset 0 1px 0 rgb(240 188 50 / .35);
  transition: box-shadow 160ms var(--sc-ease-out);
}
.bal__handle:active { cursor: grabbing; }
.bal__amp { font: var(--amp); font-size: 3.6rem; line-height: .8; display: inline-block; will-change: transform; }
.bal__handle { transition: box-shadow 160ms var(--sc-ease-out), scale 180ms var(--sc-ease-out); }
.bal__handle.is-held { scale: 1.07; box-shadow: 0 16px 40px rgb(4 10 7 / .6), 0 0 0 8px rgb(240 188 50 / .14); }
.bal__hint { font-size: var(--sc-t-xs); letter-spacing: .14em; text-transform: uppercase; color: var(--sc-ink-soft); margin-top: .5rem; transition: opacity 300ms; }
.has-dragged .bal__hint { opacity: 0; }
@media (hover: hover) and (pointer: fine) { .bal__handle:hover { box-shadow: 0 14px 36px rgb(4 10 7 / .6), 0 0 0 6px rgb(240 188 50 / .12); } }

.tray {
  position: absolute; z-index: 7; left: 50%; bottom: 1.3rem; translate: -50% 0;
  display: flex; align-items: center; gap: .9rem;
  padding: .55rem .7rem .55rem 1.1rem; border-radius: var(--sc-r-pill);
  background: rgb(14 36 28 / .9); box-shadow: var(--sc-e3), var(--sc-edge);
}
.tray__t { white-space: nowrap; font-family: var(--script); font-size: 1.5rem; color: var(--gold-ink); line-height: 1; }
.tray__slots { display: flex; gap: .45rem; margin: 0; padding: 0; list-style: none; }
.tray__slots li {
  width: 2.75rem; height: 2.75rem; border-radius: 50%; overflow: hidden; position: relative;
  border: 1px dashed rgb(243 233 210 / .35); background: rgb(243 233 210 / .04);
}
.tray__slots li.is-full { border: 1px solid var(--gold-ink); animation: plop 420ms var(--sc-ease-out); }
.tray__slots img { position: absolute; top: 0; height: 100%; width: 100%; object-fit: cover; }
.tray__slots li.is-both img:first-child { width: 50%; left: 0; }
.tray__slots li.is-both img:last-child { width: 50%; left: 50%; }
@keyframes plop { from { scale: .8; } to { scale: 1; } }
/* the bottom CTA would sit on top of the tray: lift it while the balanza is live */
.is-bal .vine__cta { bottom: 5.6rem; }

/* ---------------------------------------------------------------- 4 JARDÍN */
.jardin .col { padding-block: clamp(5rem, 14vh, 9rem) clamp(4rem, 10vh, 7rem); display: grid; align-content: start; gap: var(--sc-7); }
.jardin__t { font-size: var(--sc-t-2xl); margin: 0; }
.col--g .jardin__t { font-style: italic; }
.jardin__big { margin: 0; font-family: var(--sc-font-display); font-size: clamp(3.2rem, 1.6rem + 5vw, 6rem); line-height: 1; letter-spacing: -.03em; color: var(--gold-ink); font-variant-numeric: tabular-nums; }
.jardin__copy .sc-body { max-width: 34ch; }
.col--h .jardin__copy, .col--h .info { justify-items: end; text-align: right; }
.jardin__copy { display: grid; gap: var(--sc-3); }
.jardin__media { margin: 0; aspect-ratio: 3 / 4; border-radius: 999px 999px var(--sc-r-lg) var(--sc-r-lg); overflow: hidden; box-shadow: var(--sc-e3); width: min(100%, 26rem); }
.col--h .jardin__media { justify-self: end; }
.jardin__media > div { height: 116%; margin-top: -8%; }
.jardin__media img { width: 100%; height: 100%; object-fit: cover; }
.info { display: grid; gap: .3rem; font-style: normal; font-size: var(--sc-t-base); line-height: 1.5; }
.info p { margin: 0; }
.info__k { font-size: var(--sc-t-xs); font-weight: 600; text-transform: uppercase; letter-spacing: .16em; color: var(--sc-ink-soft); margin-top: var(--sc-4); }
.col--g .info__k { color: var(--g-soft); }
.info a { color: var(--sc-ink); text-underline-offset: .2em; text-decoration-thickness: 1px; text-decoration-color: rgb(240 188 50 / .7); }
@media (hover: hover) and (pointer: fine) { .info a:hover { color: var(--gold-ink); } }

/* ---------------------------------------------------------------- 5 MESA
   The close: the two grounds part, the "&" opens into the table.          */
.mesa__stage { background: var(--h-deep); }
.mesa__ground { position: absolute; top: 0; bottom: 0; width: 50%; z-index: 2; }
.mesa__ground--h { left: 0; background: var(--h); translate: calc(var(--open) * -100%) 0; }
.mesa__ground--g { right: 0; background: var(--g); translate: calc(var(--open) * 100%) 0; }
.mesa { --open: clamp(0, (var(--sc-p, 0) - .04) * 3.2, 1); }
.mesa__photo { position: absolute; inset: 0; z-index: 1; }
.mesa__photo img { width: 100%; height: 100%; object-fit: cover; scale: calc(1.12 - var(--open) * .12); }
.mesa__amp {
  position: absolute; z-index: 3; left: 50%; top: 46%; translate: -50% -50%;
  font: var(--amp); color: var(--gold-ink); pointer-events: none;
  font-size: 9rem;
  scale: calc(1 + var(--open) * 5);
  opacity: calc(1 - var(--open) * 1.4);
}
.mesa__band {
  position: absolute; z-index: 4; left: 0; right: 0; bottom: 0;
  padding: clamp(1.5rem, 4vh, 2.6rem) var(--sc-gutter) clamp(1.2rem, 3vh, 1.8rem);
  padding-top: 4.5rem;
}
.mesa__scrim { /* sibling of the copy, so the band is measured with the photo under it */
  position: absolute; z-index: 4; left: 0; right: 0; bottom: 0; height: calc(var(--band-h, 24rem) + 3.5rem); pointer-events: none;
  background: linear-gradient(to bottom, rgb(14 36 28 / 0) 0, var(--h-deep) 3.5rem);
  opacity: var(--open);
}
.mesa__band { z-index: 5; }
@media (min-width: 761px) {
  .mesa__scrim {
    top: 0; bottom: 0; right: auto; height: auto; width: min(52rem, 62vw);
    background: linear-gradient(to right, var(--h-deep) 0 72%, rgb(14 36 28 / 0) 100%);
  }
  .mesa__band {
    top: 0; right: auto; width: min(42rem, 52vw);
    display: flex; flex-direction: column; justify-content: center;
    padding: 6rem var(--sc-gutter) 3rem;
  }
}
.mesa__t {
  margin: 0; max-width: 18ch;
  font-family: var(--sc-font-display); font-weight: 500; font-size: var(--sc-t-3xl);
  line-height: 1.02; letter-spacing: -.03em; text-wrap: balance;
}
.mesa__picks { margin: var(--sc-3) 0 0; color: var(--sc-ink-soft); font-size: var(--sc-t-base); max-width: 60ch; }
.mesa__list { color: var(--sc-ink); }
.mesa__actions { display: flex; align-items: center; gap: 1.4rem; margin-top: var(--sc-5); flex-wrap: wrap; }
.mesa__book { color: var(--sc-ink); font-weight: 500; text-underline-offset: .25em; text-decoration-color: rgb(240 188 50 / .7); }
.mesa__foot { margin: var(--sc-6) 0 0; font-size: var(--sc-t-xs); color: var(--sc-ink-soft); letter-spacing: .02em; }
.mesa__foot a { color: inherit; }
.mesa__greet {
  position: absolute; z-index: 3; left: 0; right: 0; top: 62%; margin: 0; text-align: center;
  font-family: var(--script); font-size: clamp(2rem, 1.4rem + 2vw, 3.2rem); color: var(--gold-ink); line-height: 1.1;
  pointer-events: none;
}
.is-close .vine__cta, .is-close .vine__book { opacity: 0; pointer-events: none; }

/* ============================================================== PHONE
   The split holds on a phone where it carries meaning (hero, balanza,
   close) and stacks where it is reading (mañana, jardín).                */
@media (max-width: 760px) {
  .vine__label { display: none; }
  .vine__mark { top: .6rem; padding: .3rem .9rem .4rem; background: var(--h-deep); box-shadow: var(--sc-e2), var(--sc-edge); }
  .vine__word { font-size: 1.3rem; }
  .vine__sub { font-size: 1rem; }
  .vine__book { top: auto; bottom: 1rem; right: 1rem; background: rgb(14 36 28 / .85); }
  .vine__cta { left: 1rem; translate: none; bottom: 1rem; min-height: 46px; padding: 0 1.2rem; }
  .vine__knot { display: none; }
  .vine__line { background: linear-gradient(to bottom, transparent 0 5.4rem, rgb(217 162 27 / .5) 5.4rem calc(100% - 5rem), transparent calc(100% - 5rem)); }

  .hero__title { font-size: clamp(2.3rem, 11vw, 3.4rem); }
  .hero__lede { width: auto; margin-left: 0; padding: 0 1.25rem; font-size: var(--sc-t-sm); }
  .hero__copy { bottom: 6.2rem; }
  .leaf--a { width: 100vw; left: -38vw; bottom: -44vw; }
  .leaf--b { width: 64vw; right: -26vw; top: -20vw; }
  .leaf--c { display: none; }
  .leaf--d { width: 44vw; }

  body { background: var(--h); }
  .cols { grid-template-columns: 1fr; }
  .col { padding-inline: 1.25rem; }
  .col--h .manana__q, .col--h .label, .col--h .jardin__copy, .col--h .info { text-align: left; justify-items: start; margin-left: 0; }
  .col--h .jardin__media { justify-self: start; }
  .manana .col--h { padding-bottom: 3rem; }
  .manana .col--g { padding-top: 3rem; }

  .bal__t { top: 5.2rem; left: 1rem; font-size: 1.25rem; }
  .bal__handle { width: 5.6rem; height: 5.6rem; margin: -2.8rem 0 0 -2.8rem; }
  .bal__amp { font-size: 3.4rem; }
  .bal__hint { font-size: .6rem; }
  .dish figcaption { bottom: 9.2rem; padding: .7rem .8rem; max-width: 44vw; }
  .dish__n { font-size: 1rem; }
  .dish__d { display: none; }
  .tray { bottom: 4.6rem; }
  .tray__slots li { width: 2.3rem; height: 2.3rem; }
  .is-bal .vine__cta { bottom: 1rem; }

  .mesa__amp { font-size: 6rem; }
  .mesa__t { font-size: clamp(1.6rem, 7vw, 2.2rem); }
  .mesa__picks { font-size: var(--sc-t-sm); line-height: 1.45; }
  .mesa__actions { margin-top: var(--sc-4); }
  .mesa__foot { margin-top: var(--sc-4); }
  .mesa__band { padding-bottom: 1.5rem; }
  .cta--big { min-height: 52px; padding: 0 1.4rem; }
}

@media (prefers-reduced-motion: reduce) {
  .hero__photo, .mesa__photo img { scale: 1; }
  .dish { transition: none; transform: none; }
  .tray__slots li.is-full { animation: none; }
}