/* Mobile refinements — hero, reservation block, footer.
   Every rule here MUST sit inside a max-width media query so the desktop is untouched. */

/* ═══ PHONES, PORTRAIT (≤639px) ═══════════════════════════════════════
   The complaint: the type is dumped across the middle of the frame and covers
   the photograph. Cure: the words gather at the FOOT of the frame, compacted,
   and the photograph keeps the whole top of the screen to itself. */
@media (max-width: 639px) {

  /* the slide frame fills the hero, so "bottom of the slide" is the bottom
     of the photograph rather than the middle of it */
  .hero { place-items: stretch; }
  /* the first slide is position:relative and auto-height, so flex-end on the
     slide itself cannot move it — the inner pushes it down instead */
  .hero__inner { min-height: 0; display: flex; flex-direction: column; justify-content: flex-end; }
  /* 8.6rem clears the dash picker (bottom 6.4rem + 24px of hit area) */
  .hero__slide { justify-content: flex-end !important; padding-bottom: 8.6rem; }

  /* The foot of the frame now carries ALL the words — and in three of the five
     photographs that foot is laid tables and white napkins (measured: 54-57% of
     the text box brighter than 120; glyph against halo only ~2:1). The same
     narrow feather the reservation section uses, from below: the top 58% of the
     photograph stays exactly as shot. */
  .hero__stage::after { content: ""; position: absolute; inset: 0;
    background: linear-gradient(to top,
      color-mix(in oklab, var(--bg-deep) 88%, transparent),
      color-mix(in oklab, var(--bg-deep) 52%, transparent) 30%,
      transparent 58%); }

  /* the brand frame, tightened: same parts, less air between them */
  .hero .eyebrow { font-size: .6rem; letter-spacing: .24em; }  /* one line at 360px */
  .wordmark { margin: .9rem 0 .4rem; }
  .wordmark__sub { margin-bottom: .9rem; }

  /* the four photo frames: one claim line, a small paragraph, compact buttons */
  .hero__claim { font-size: 1.35rem; }
  .hero__sub { font-size: .84rem; line-height: 1.55; margin-top: .5rem; max-width: 46ch; }
  .hero__cta { margin-top: 1rem; gap: .6rem; }
  .hero__cta .btn { padding: .66rem 1.05rem; font-size: .62rem; letter-spacing: .14em; }

  /* ── reservation: the photograph becomes a photograph again ──
     Desktop keeps all type in the top half so the laid table below stays clear.
     A 3:2 picture in a phone-tall cover box loses two thirds of its width — the
     "cropped tables". So on the phone the split becomes literal: the words first,
     on the section's own dark ground, and the photograph below them as a full-width
     3:2 band — the entire frame visible, nothing over it, no halo needed. */
  .section--reserve { min-height: 0; padding-top: 2.4rem; }
  .reserve { order: -1; margin-bottom: 1.8rem; }
  .reserve .lead { margin-bottom: 1.6rem; }
  .reserve .h2, .reserve .lead, .reserve .kicker { text-shadow: none; }
  .reserve__bg {
    position: relative; inset: auto; z-index: auto; order: 1;
    aspect-ratio: 2200 / 1467;                 /* the photograph's own ratio — shown whole */
    margin-inline: calc(var(--pad) * -1);      /* full bleed across the section padding */
  }
  /* ::before (the picture) and ::after (the top/bottom feathers) keep their
     absolute inset:0 and now fill the band instead of the whole screen. */
}

/* ═══ PHONES, LANDSCAPE (short viewports) ═════════════════════════════
   844x390 and friends: 100svh-based frames leave ~330px of stage. The full
   brand stack filled 74% of it and the buttons sat on the rail. Everything
   shrinks, the paragraph goes (its facts repeat in the footer), and the rail
   is hidden — three stacked address lines have no room on a 330px photograph.
   max-width 1023px keeps this out of every desktop viewport by definition. */
@media (max-width: 1023px) and (max-height: 500px) {

  .hero { place-items: stretch; }
  .hero__inner { min-height: 0; display: flex; flex-direction: column; justify-content: flex-end; }
  .hero__slide { justify-content: flex-end !important; padding-bottom: 5.6rem; }

  .eyebrow { font-size: .6rem; }
  .wordmark { margin: .4rem 0 .2rem; gap: .4rem; }
  .wordmark em { font-size: 2.6rem; }
  .wordmark__sub { margin-bottom: .6rem; }
  .hero__claim { font-size: 1.25rem; }
  .hero__sub { display: none; }
  .hero__cta { margin-top: .8rem; gap: .6rem; }
  .hero__cta .btn { padding: .55rem 1rem; font-size: .6rem; letter-spacing: .14em; }

  .hero__rail { display: none; }        /* address/hours/phone live in the footer */
  .hero__dots { bottom: 1.4rem; }

  /* reservation: same stacked cure as portrait, with the band capped so the
     section is not taller than two screens; a wide band crops sky, not tables */
  .section--reserve { min-height: 0; padding-top: 2rem; }
  .reserve { order: -1; margin-bottom: 1.6rem; }
  .reserve .lead { margin-bottom: 1.4rem; }
  .reserve .h2, .reserve .lead, .reserve .kicker { text-shadow: none; }
  .reserve__bg {
    position: relative; inset: auto; z-index: auto; order: 1;
    aspect-ratio: 2200 / 1467; max-height: 80svh;
    margin-inline: calc(var(--pad) * -1);
  }
}