/* ─── Kotori menu page ───────────────────────────────────────────────────
   Sections stack vertically. Items inside a section are a horizontal rail
   you scroll sideways, each card with its picture above it.

   Built on the site's existing custom properties (--washi, --gold,
   --vermillion, --display, --body …) rather than hard-coded colours, so each
   variant's palette styles this page for free.
──────────────────────────────────────────────────────────────────────── */

.menu-page {
  padding: calc(var(--deck-h) + clamp(38px, 6vw, 78px)) 0 clamp(70px, 10vw, 130px);
  max-width: 1180px;
  margin: 0 auto;
}
.menu-page > .mn-masthead,
.menu-page > #menu-root > .mn-notices,
.menu-page > #menu-root > .mn-footnote,
.menu-page > #menu-root > .mn-updated,
.menu-page > #menu-root > .mn-empty { padding-left: clamp(20px,5vw,56px); padding-right: clamp(20px,5vw,56px); }

/* ─── masthead ─── */
.mn-masthead { text-align: center; margin-bottom: clamp(40px, 6vw, 76px); }
.mn-masthead .mn-eyebrow {
  display: block; font-family: var(--body); font-size: .68rem;
  letter-spacing: .34em; text-transform: uppercase; color: var(--gold); margin-bottom: 16px;
}
.mn-masthead h1 {
  font-family: var(--display); font-weight: 500;
  font-size: clamp(2.1rem, 6vw, 3.5rem); line-height: 1.1; color: var(--washi); margin: 0;
}
.mn-masthead .mn-sub {
  font-family: var(--body); font-size: .95rem; color: var(--washi-dim); margin-top: 14px;
}
.mn-rule { width: 54px; height: 1px; background: var(--gold); margin: clamp(22px,3vw,32px) auto 0; opacity: .75; }

/* ─── section ─── */
.mn-section { margin-bottom: clamp(46px, 6vw, 82px); }
.mn-section:last-of-type { margin-bottom: 0; }

.mn-head {
  margin-bottom: clamp(18px, 2.6vw, 26px);
  padding: 0 clamp(20px, 5vw, 56px);
}
.mn-kicker {
  display: block; font-family: var(--body); font-size: .64rem; letter-spacing: .3em;
  text-transform: uppercase; color: var(--gold-soft); margin-bottom: 10px;
}
.mn-title-row {
  display: flex; align-items: baseline; justify-content: space-between; gap: 18px;
  flex-wrap: wrap; border-bottom: 1px solid var(--gold); padding-bottom: 12px;
}
.mn-title {
  font-family: var(--display); font-weight: 500;
  font-size: clamp(1.35rem, 3.2vw, 1.95rem); line-height: 1.15; color: var(--washi); margin: 0;
}
.mn-section-price {
  font-family: var(--body); font-size: .82rem; letter-spacing: .12em; text-transform: uppercase;
  color: var(--vermillion-2, var(--vermillion)); white-space: nowrap; font-weight: 600;
}
.mn-jp {
  font-family: var(--display); font-size: .95rem; color: var(--washi-dim);
  margin: 12px 0 0; letter-spacing: .08em;
}
.mn-blurb {
  font-family: var(--body); font-size: .92rem; line-height: 1.7;
  color: var(--washi-dim); margin: 12px 0 0; max-width: 62ch;
}

/* ─── horizontal rail ─── */
.mn-rail-wrap { position: relative; }

.mn-rail {
  list-style: none; margin: 0;
  padding: 6px clamp(20px, 5vw, 56px) 18px;
  display: flex; gap: 18px;
  overflow-x: auto; overflow-y: hidden;
  scroll-snap-type: x proximity;
  scroll-padding-left: clamp(20px, 5vw, 56px);
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
}
.mn-rail::-webkit-scrollbar { display: none; }
.mn-rail:focus-visible { outline: 1px solid var(--gold); outline-offset: -4px; }

.mn-card {
  flex: 0 0 auto;
  align-self: stretch;
  width: clamp(170px, 21vw, 226px);
  scroll-snap-align: start;
  display: flex; flex-direction: column;
}

/* the picture — transparent PNG, so it sits on the page with no plate/box */
.mn-shot {
  width: 100%; aspect-ratio: 1;
  display: flex; align-items: center; justify-content: center;
  margin-bottom: 12px;
  position: relative;
}
/* Taken out of flow deliberately.
   In normal flow the picture's max-height:100% resolves against a height that
   is itself being computed from the picture — circular, and the box loses the
   argument: a tall dish photo stretched this square to 170x850, five times its
   height, and dragged the whole card with it. Positioned absolutely the image
   cannot contribute to its parent's size at all, so aspect-ratio:1 always
   holds and any shape of photo simply sits inside it. margin:auto centres it
   in both directions. */
.mn-shot img {
  position: absolute; inset: 0; margin: auto;
  max-width: 100%; max-height: 100%; width: auto; height: auto;
  display: block;
  filter: drop-shadow(0 12px 18px rgba(0,0,0,.34));
  transition: transform .5s var(--ease);
}
.mn-card:hover .mn-shot img { transform: translateY(-4px) scale(1.03); }
/* graceful hole if a picture is missing or fails to load */
.mn-shot.is-missing::after {
  content: '';
  position: absolute; inset: 14%;
  border: 1px dashed var(--mn-hairline, rgba(184,153,104,.30));
  border-radius: 50%;
}



/* ─── the plaque ───────────────────────────────────────────────────────
   Name and price share the top line with a dotted leader between them;
   the description sits beneath. A raised panel with a brass hairline so it
   reads as a small engraved sign under each dish. */
.mn-plaque {
  background: var(--mn-plaque-bg, rgba(255,247,229,.045));
  border: 1px solid var(--mn-hairline, rgba(184,153,104,.26));
  border-top-color: var(--mn-plaque-lip, rgba(255,214,158,.22));
  border-radius: 3px;
  padding: 12px 13px 13px;
  box-shadow: var(--mn-plaque-shadow, inset 0 1px 0 rgba(255,214,158,.10), 0 6px 14px -8px rgba(0,0,0,.55));
  display: flex; flex-direction: column; gap: 6px;
  flex: 1 1 auto;
  transition: border-color .35s var(--ease), background .35s var(--ease);
}
.mn-card:hover .mn-plaque {
  border-color: var(--gold);
  background: var(--mn-plaque-bg-hover, rgba(255,247,229,.075));
}
.mn-plaque-top {
  display: flex; align-items: baseline; gap: 6px;
}
.mn-plaque-leader {
  flex: 1 1 auto; min-width: 10px;
  border-bottom: 1px dotted var(--mn-hairline, rgba(184,153,104,.42));
  transform: translateY(-3px);
}
.mn-item-name {
  font-family: var(--body); font-size: .92rem; font-weight: 600;
  color: var(--washi); line-height: 1.25; margin: 0; flex: 0 1 auto;
}
.mn-item-price {
  font-family: var(--body); font-size: .92rem; font-weight: 700;
  color: var(--gold); margin: 0; white-space: nowrap; flex: 0 0 auto;
  letter-spacing: .02em;
}
.mn-item-jp {
  font-family: var(--display); font-size: .78rem; color: var(--washi-dim);
  letter-spacing: .06em; margin: 0;
}
.mn-item-desc {
  font-family: var(--body); font-size: .78rem; color: var(--washi-dim);
  line-height: 1.55; margin: 0;
}

/* ─── arrows ─── */
.mn-arrow {
  position: absolute; top: calc(clamp(170px, 21vw, 226px) / 2);
  transform: translateY(-50%);
  z-index: 3;
  width: 38px; height: 38px; border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  font-family: var(--body); font-size: 1.4rem; line-height: 1;
  color: var(--washi);
  background: var(--mn-arrow-bg, rgba(20,14,8,.72));
  border: 1px solid var(--mn-hairline, rgba(184,153,104,.34));
  backdrop-filter: blur(6px);
  cursor: pointer;
  transition: opacity .3s var(--ease), background .3s var(--ease), color .3s var(--ease);
}
.mn-prev { left: clamp(6px, 1.6vw, 18px); }
.mn-next { right: clamp(6px, 1.6vw, 18px); }
.mn-arrow:hover:not(:disabled) { background: var(--vermillion); border-color: var(--vermillion); color: #fff; }
.mn-arrow:disabled { opacity: .22; cursor: default; }
.mn-rail-wrap.no-scroll .mn-arrow { display: none; }
@media (hover: none) { .mn-arrow { display: none; } }  /* touch: just swipe */

/* ─── notices / footnotes ─── */
.mn-notices {
  margin-top: clamp(34px, 5vw, 56px); padding-top: clamp(20px, 3vw, 28px);
  border-top: 1px solid var(--mn-hairline, rgba(184,153,104,.20));
}
.mn-notice {
  font-family: var(--display); font-size: 1rem; color: var(--gold);
  margin: 0 0 8px; text-align: center;
}
.mn-footnote, .mn-updated {
  font-family: var(--body); font-size: .78rem; color: var(--washi-dim);
  text-align: center; margin: 14px 0 0; line-height: 1.6;
}
.mn-updated { font-size: .7rem; letter-spacing: .16em; text-transform: uppercase; opacity: .7; }
.mn-empty {
  font-family: var(--display); font-size: 1.15rem; color: var(--washi-dim);
  text-align: center; padding: 40px 0;
}

@media (max-width: 560px) {
  .mn-card { width: 62vw; max-width: 240px; }
}
@media (prefers-reduced-motion: reduce) {
  .mn-rail { scroll-behavior: auto; }
  .mn-shot img, .mn-card:hover .mn-shot img { transition: none; transform: none; }
}

/* The number in the "menu is being updated" message. Underlined so it reads as
   something to tap, not as part of the sentence. */
.mn-empty-tel {
  color: var(--gold, #b89968);
  text-decoration: underline;
  text-underline-offset: 3px;
  white-space: nowrap;
}