/* ==========================================================================
   UMBRA — responsive.css
   Desktop-first refinements down to 320px, plus input-mode & motion prefs.
   ========================================================================== */

/* Large screens ----------------------------------------------------------- */
@media (min-width: 1200px) {
  .progress { display: flex; }
}

@media (min-width: 1800px) {
  :root { --gutter: 88px; }
}

/* ≤ 1200 ------------------------------------------------------------------ */
@media (max-width: 1200px) {
  .sig__body { grid-column: 7 / 13; }
  .house__right { grid-column: 6 / 13; }
  .story__text { grid-column: 1 / 7; }
  .story__comp { grid-column: 7 / 13; }
  .reserve__info { grid-column: 1 / 6; }
  .booking { grid-column: 6 / 13; }
}

/* ≤ 1024 ------------------------------------------------------------------ */
@media (max-width: 1024px) {
  :root { --fs-display: clamp(2.75rem, min(13.2vw, 14.5vh), 11.5rem); }
  .hero__content { grid-template-columns: minmax(0, 1fr); }
  .hero__aside { max-width: 460px; grid-column: 1; grid-row: 2; }

  .house__label { grid-column: 1 / 13; padding-top: 0; margin-bottom: 36px; }
  .house__statement { grid-column: 1 / 13; }
  .house__fig { grid-column: 1 / 6; }
  .house__right { grid-column: 7 / 13; }
  .house__facts { grid-template-columns: minmax(0, 1fr); row-gap: 36px; }

  .sig__head-left { grid-column: 1 / 13; }
  .sig__head-right { grid-column: 1 / 9; margin-top: 32px; }

  .menu__head-left { grid-column: 1 / 13; }
  .menu__head-right { grid-column: 1 / 9; margin-top: 32px; }

  .gallery__head-left { grid-column: 1 / 13; }
  .gallery__head-right { grid-column: 1 / 9; margin-top: 32px; }

  .footer__statement { grid-column: 1 / 13; }
  .footer__cta { grid-column: 1 / 13; justify-self: start; margin-top: 48px; }
  .footer__cols { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

/* ≤ 900 (tablet portrait & phones) ---------------------------------------- */
@media (max-width: 900px) {
  .nav__links, .nav__cta { display: none; }
  .nav__toggle { display: inline-flex; }
  .nav__inner { padding-block: 20px; }
  .nav.is-scrolled .nav__inner { padding-block: 12px; }

  .sig__item { padding-bottom: clamp(88px, 16vw, 140px); }
  .sig__media { grid-column: 1 / 13; aspect-ratio: 4 / 4.4; }
  .sig__body { grid-column: 1 / 13; max-width: 620px; margin-top: 8px; }
  .sig__num { margin-top: -0.42em; position: relative; z-index: 2; padding-left: 12px; }
  .sig__tag { top: 16px; bottom: auto; left: 16px; }

  .menu-row {
    grid-template-columns: 64px minmax(0, 1fr) auto;
    grid-template-areas:
      "thumb name price"
      "thumb desc desc";
    gap: 6px 18px;
    padding: 20px 0;
    align-items: start;
  }
  .menu-row__idx { display: none; }
  .menu-row__thumb {
    grid-area: thumb;
    display: block;
    width: 64px;
    height: 80px;
    object-fit: cover;
    filter: var(--grade);
    background: var(--bg-3);
  }
  .menu-row__name { grid-area: name; font-size: 1.6rem; }
  .menu-row__desc { grid-area: desc; }
  .menu-row__price { grid-area: price; font-size: 1.35rem; padding-top: 2px; }
  .menu-row__name .mark { display: block; margin: 6px 0 0; vertical-align: 0; font-size: 0.55em; }
  .menu-preview { display: none; }

  .atmos { min-height: 92vh; }
  .atmos__corner--tl { top: 10vh; }
  .atmos__corner--br { bottom: 10vh; }

  .story__text, .story__comp { grid-column: 1 / 13; }
  .story__comp { max-width: 680px; width: 100%; margin: 72px auto 0; }
  .story__quote { grid-column: 1 / 13; }

  .exp__intro { width: 84vw; max-width: 520px; padding-right: 0; }
  .moment { width: 72vw; max-width: 420px; }
  .moment:nth-of-type(even) { margin-top: 48px; }
  .exp__timeline { display: none; }

  .g1 { grid-column: 1 / 13; aspect-ratio: 4 / 4.4; }
  .g2 { grid-column: 1 / 7; aspect-ratio: 3 / 4; margin-top: 0; }
  .g3 { grid-column: 7 / 13; aspect-ratio: 3 / 4; margin-top: 22%; }
  .g4 { grid-column: 1 / 13; aspect-ratio: 16 / 11; }
  .g5 { grid-column: 1 / 8; aspect-ratio: 4 / 5; margin-top: 0; }
  .g6 { grid-column: 8 / 13; aspect-ratio: 1 / 1; margin-top: 40%; }
  .g7 { grid-column: 1 / 13; aspect-ratio: 16 / 10; }

  .reserve__info { grid-column: 1 / 13; position: static; }
  .booking { grid-column: 1 / 13; margin-top: 64px; }
}

/* ≤ 700 ------------------------------------------------------------------- */
@media (max-width: 700px) {
  .house__fig { grid-column: 1 / 13; max-width: 420px; }
  .house__right { grid-column: 1 / 13; margin-top: 56px; }

  .sig__head-right, .menu__head-right, .gallery__head-right { grid-column: 1 / 13; }

  .pillars { grid-template-columns: minmax(0, 1fr); }

  .times { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .inputs { grid-template-columns: minmax(0, 1fr); row-gap: 28px; }
}

/* ≤ 560 (phones) ---------------------------------------------------------- */
@media (max-width: 560px) {
  :root { --section: 104px; }

  .brand__word { font-size: 1.3rem; }
  .brand__mark { width: 26px; height: 26px; }

  .hero { min-height: 560px; }
  .hero__title .line--indent { padding-left: 0.55em; }
  .hero__lede { font-size: 0.925rem; margin-bottom: 26px; }
  .hero__cta { gap: 14px 24px; }
  .hero__foot { margin-top: 28px; }
  .hero__foot-inner { grid-template-columns: auto 1fr; gap: 16px; padding-bottom: 20px; }
  .hero__foot-inner > :first-child { display: none; }
  .hero__eyebrow .idx, .hero__eyebrow .rule { display: none; }

  .eyebrow { letter-spacing: 0.22em; gap: 12px; }
  .eyebrow .rule { width: 26px; }

  .house__statement { font-size: clamp(1.8rem, 8.2vw, 2.4rem); line-height: 1.14; }

  .sig__meta div { grid-template-columns: 88px 1fr; }
  .sig__foot { flex-wrap: wrap; }

  .tab { padding-bottom: 16px; }

  .atmos__corner { display: none; }

  .story__comp { aspect-ratio: 5 / 7; }
  .story__comp .c1 { width: 66%; }
  .story__comp .c2 { width: 50%; top: 20%; }
  .story__comp .c3 { width: 46%; left: 4%; }
  .story__comp .c4 { width: 36%; right: 2%; }
  .story__comp .frame figcaption { display: none; }

  .moment { width: 78vw; }

  .gallery__grid { row-gap: 20px; }
  .g-item__label { opacity: 1; transform: none; left: 14px; right: 14px; bottom: 12px; }
  .g-item::after { opacity: 0.9; }
  .g-item__place { font-size: 1.1rem; }
  .g-item__time { display: none; }

  .dates .choice__box { width: 64px; height: 84px; }
  .date__num { font-size: 1.75rem; }
  .guests { flex-wrap: wrap; }
  .booking__foot .btn { width: 100%; }

  .reserve__details div { grid-template-columns: 96px 1fr; }

  .footer__cols { grid-template-columns: minmax(0, 1fr); gap: 36px; }
  .footer__bottom { flex-direction: column; }

  .lb__bottom { flex-direction: column; align-items: flex-start; }
  .lb__caption { flex-direction: column; gap: 6px; }
}

/* ≤ 380 ------------------------------------------------------------------- */
@media (max-width: 380px) {
  .times { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .stepper__val { min-width: 72px; }
  .btn { padding: 0 22px; }
  .hero__cta .btn { width: 100%; }
}

/* Short landscape screens ------------------------------------------------- */
@media (max-height: 560px) and (orientation: landscape) {
  .hero { min-height: 480px; height: auto; padding-top: 110px; }
  .hero__foot { margin-top: 24px; }
}

/* Touch / coarse pointers ------------------------------------------------- */
@media (hover: none), (pointer: coarse) {
  .cursor, .menu-preview { display: none !important; }
  .g-item__label { opacity: 1; transform: none; }
  .g-item::after { opacity: 0.85; }
}

/* Reduced motion ---------------------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    transition-delay: 0s !important;
  }
  .scroll-ind__line::after { animation: none; transform: translateY(60%); }
}