/* ==========================================================================
   Amami Italia — /menu/ (and /it/menu/), from the client's comp
   "amami web - menu page DESK / MOB" (2026-09-24).
   Desktop artboard 2880 wide, phone 1366: page lengths are comp units over
   that width as vw (u/28.8 desktop, u/13.66 phone). Each menu card is a size
   container and everything inside it is cqw of the card (card = 554.7u), so a
   card keeps the comp's proportions at any width. px floors only where type
   would become unreadable. Loaded after amami-pages.css.
   ========================================================================== */
body.is-menu{--mn-sand:#ddd7c7;--mn-mist:#cdd6e2}

/* --- hero: red ground, the dish on the right, the title across both ------ */
.mn-hero{position:relative;isolation:isolate;overflow:hidden;margin:76px 0 0;padding:0;
  height:42.361vw;min-height:380px;background:var(--hm-red)}
.mn-hero__img{position:absolute;top:0;right:0;width:47.704vw;height:100%;object-fit:cover;z-index:-1}
.mn-hero__copy{position:absolute;left:0;top:13.9vw;width:52.296vw;text-align:center;color:var(--hm-cream)}
.mn-hero__p{margin:0 auto;font-family:var(--accent);font-size:max(11px,1.173vw);
  letter-spacing:.08em;line-height:2.13}
.mn-hero__p span,.mn-order__h span{display:block}
.mn-hero__apci{margin:12.2vw 0 0;font-family:var(--sans);font-weight:400;font-size:max(8px,.875vw);
  letter-spacing:.2em;text-transform:uppercase}
.mn-hero__h{position:absolute;left:0;bottom:0;margin:0;
  font-family:var(--serif);font-weight:300;color:var(--hm-cream);text-transform:uppercase;
  font-size:11.389vw;line-height:.913;letter-spacing:-.05em;white-space:nowrap;
  /* bleeds off the bottom edge exactly as the home title does (its baseline
     .0135em below the edge) */
  transform:translateY(.152em)}

/* --- the four menus: black cards ---------------------------------------- */
.mn-cards{display:grid;grid-template-columns:repeat(4,19.26vw);grid-auto-rows:1fr;column-gap:4.167vw;justify-content:center;
  padding:9.47vw 0 10.96vw}
/* every card the same size: at least the comp's proportion, and when a longer
   (e.g. Italian) description needs more room, all four grow together */
.mn-card{container-type:inline-size;display:flex;flex-direction:column;aspect-ratio:554.7/998.38;align-self:stretch;
  background:var(--hm-panel);color:var(--hm-cream)}
.mn-card__bar{display:flex;justify-content:space-between;align-items:center;margin:0;
  height:13.97cqw;padding:0 3.79cqw;box-sizing:border-box;
  font-family:var(--sans);font-weight:300;font-size:max(8px,3.606cqw);letter-spacing:.2em;text-transform:uppercase}
.mn-card__photo{position:relative;aspect-ratio:554.7/509}
.mn-card__photo > picture img,.mn-card__photo > img:not(.mn-card__icon){display:block;width:100%;height:100%;object-fit:cover}
.mn-card__icon{position:absolute;right:8.06cqw;bottom:-7.03cqw;width:14.06cqw;height:auto;z-index:1}
.mn-card__h{margin:9.6cqw 0 0;padding:0 6.4cqw;font-family:var(--serif);font-weight:300;color:var(--mn-mist);
  font-size:13.9cqw;line-height:.913;letter-spacing:-.03em;text-transform:uppercase}
.mn-card__p{margin:6cqw 0 0;padding:0 6.4cqw;max-width:62cqw;font-family:var(--sans);font-weight:300;font-style:italic;
  font-size:max(10px,3.245cqw);line-height:1.39}
.mn-card__btn{align-self:flex-end;display:inline-flex;align-items:center;justify-content:center;box-sizing:border-box;
  margin:auto 6.3cqw 6.67cqw 0;min-width:30.41cqw;height:max(26px,8.16cqw);padding:0 3cqw;
  border:1px solid #fff;color:#fff;text-decoration:none;
  font-family:var(--sans);font-weight:300;font-size:max(8px,2.935cqw);letter-spacing:.2em;text-indent:.2em;text-transform:uppercase;
  transition:background .25s ease-out,color .25s ease-out}
.mn-card__btn:hover,.mn-card__btn:focus-visible{background:var(--hm-cream);border-color:var(--hm-cream);color:var(--hm-panel)}

/* --- what people order: photograph left, sand panel right ---------------- */
.mn-order{display:grid;grid-template-columns:47.704vw 1fr;height:42.361vw;padding:0;background:var(--mn-sand)}
.mn-order__img{width:100%;height:100%;object-fit:cover}
.mn-order__panel{display:flex;flex-direction:column;justify-content:space-between;padding:4.6vw 4vw 4.3vw 5.7vw}
.mn-order__p{margin:0;max-width:40vw;font-family:var(--accent);font-size:max(12px,1.217vw);
  letter-spacing:.08em;line-height:1.89}
.mn-order__h{margin:0;font-family:var(--serif);font-weight:300;text-transform:uppercase;
  font-size:6.122vw;line-height:.913;letter-spacing:-.05em;color:var(--hm-panel)}

/* --- phone: the 1366 artboard ------------------------------------------ */
@media (max-width:760px){
  /* the phone comp shows the whole frame (1366x1077), wine glass included,
     with both lines of copy over the dark plate */
  .mn-hero{height:78.85vw;min-height:0}
  .mn-hero__img{width:100%;object-position:50% 0}
  .mn-hero__copy{left:0;right:0;width:auto;top:25.5vw;padding:0 4vw;text-shadow:0 1px 8px rgba(22,22,22,.6)}
  .mn-hero__p{font-size:max(10.5px,2.244vw);line-height:1.75;letter-spacing:.05em}
  .mn-hero__apci{margin-top:max(16px,23.5vw);font-size:max(8px,1.672vw)}
  .mn-hero__h{font-size:21.78vw}

  /* the comp's phone card: 554.7 of 1366 wide, stacked, 7.3vw apart; the small
     button keeps the comp's size and gets a 44px invisible tap area */
  .mn-cards{grid-template-columns:40.61vw;row-gap:7.3vw;padding:14.4vw 0 12vw}
  /* the card keeps the column's width; legible text makes it taller, not wider */
  .mn-card{min-width:0;width:100%;aspect-ratio:auto;min-height:calc(40.61vw * 998.38 / 554.7)}
  .mn-card__btn{position:relative}
  .mn-card__btn::after{content:"";position:absolute;inset:-14px -8px}

  .mn-order{display:block;height:auto}
  .mn-order__img{display:block;height:62.96vw}
  .mn-order__panel{display:flex;flex-direction:column;padding:7.3vw 8vw 9vw 8.35vw}
  .mn-order__h{order:-1;font-size:11.772vw;max-width:none}
  .mn-order__p{margin-top:5vw;max-width:none;font-size:max(12px,2.567vw);line-height:1.8}
}
@media (prefers-reduced-motion:reduce){.mn-card__btn{transition:none}}