/* menu.css — Hotori menu pages. Relies on styles.css design tokens; fallbacks included. */

/* sub-nav tabs */
.menu-subnav{display:flex;flex-wrap:wrap;justify-content:center;gap:var(--s2,.75rem);
  margin:0 auto var(--s6,3rem);padding:0 var(--s3,1rem);}
.menu-subnav a{font-family:"Inter Tight",sans-serif;font-size:.82rem;letter-spacing:.12em;
  text-transform:uppercase;text-decoration:none;color:var(--sumi-60,#6b6259);
  padding:.55rem .95rem;border:1px solid var(--rule,#e0d7c6);border-radius:2px;
  transition:color .25s,border-color .25s,background .25s;}
.menu-subnav a:hover{color:var(--sumi,#1A1512);border-color:var(--gold,#C8A35A);}
.menu-subnav a.active{color:var(--paper,#F3EDE2);background:var(--sumi,#1A1512);border-color:var(--sumi,#1A1512);}

/* a page section */
.msec{max-width:60ch;margin:0 auto var(--s7,4.5rem);}
.msec:last-of-type{margin-bottom:0;}
.msec-head{display:flex;align-items:baseline;justify-content:space-between;gap:1rem;
  border-bottom:1px solid var(--gold,#C8A35A);padding-bottom:.4rem;margin-bottom:var(--s3,1rem);}
.msec-head h2{font-family:"Cormorant Garamond",serif;font-weight:500;
  font-size:clamp(1.4rem,3vw,1.9rem);color:var(--gold,#C8A35A);margin:0;letter-spacing:.01em;}
.msec-pricehead{font-family:"Inter Tight",sans-serif;font-size:.7rem;letter-spacing:.08em;
  text-transform:uppercase;color:var(--sumi-60,#6b6259);text-align:right;white-space:nowrap;line-height:1.3;}
.msec-note{font-family:"Inter Tight",sans-serif;font-weight:300;font-style:italic;
  font-size:.85rem;color:var(--sumi-60,#6b6259);margin:0 0 var(--s3,1rem);max-width:58ch;}
.msec-note.after{margin:var(--s3,1rem) 0 0;}

/* a menu row */
.mrow{display:flex;align-items:baseline;gap:.75rem;padding:.5rem 0;}
.mrow.stacked{align-items:flex-start;}
.mtext{flex:1 1 auto;min-width:0;}
.mname{font-family:"Inter Tight",sans-serif;font-weight:500;font-size:1rem;color:var(--sumi,#1A1512);}
.mdesc{font-family:"Inter Tight",sans-serif;font-weight:300;font-size:.92rem;color:var(--sumi-60,#6b6259);}
.mrow.inline .mdesc::before{content:"\2003\2013\2002";color:var(--sumi-40,#9b9389);}
.mrow.stacked .mdesc{display:block;margin-top:.2rem;font-size:.88rem;line-height:1.5;}
.mrow.sets .mdesc{display:block;margin-top:.25rem;font-size:.82rem;font-style:italic;line-height:1.55;}
.mprice{font-family:"Inter Tight",sans-serif;font-size:1rem;color:var(--sumi,#1A1512);
  white-space:nowrap;flex:0 0 auto;text-align:right;}
.mprice .cur{color:var(--sumi-60,#6b6259);margin-right:.05rem;}

/* divider (e.g. Dinner Specials) */
.msec-divider{text-align:center;font-family:"Cormorant Garamond",serif;font-style:italic;
  font-size:1.3rem;color:var(--sumi,#1A1512);margin:0 auto var(--s5,2.25rem);
  letter-spacing:.04em;max-width:60ch;}
.msec-divider::before,.msec-divider::after{content:"\2009/\2009";color:var(--gold,#C8A35A);}

/* boxed feature (experiences, sake flight, beak-to-tail) */
.mbox{background:var(--paper-deep,#ECE4D4);border:1px solid var(--rule,#e0d7c6);border-radius:3px;
  padding:var(--s5,2.25rem);margin:0 auto var(--s7,4.5rem);max-width:60ch;text-align:center;}
.mbox h2{font-family:"Cormorant Garamond",serif;font-weight:500;color:var(--gold,#C8A35A);
  font-size:clamp(1.4rem,3vw,1.9rem);margin:0 0 .2rem;}
.mbox .msec-note{text-align:center;max-width:none;margin:.1rem auto var(--s4,1.75rem);}
.mbox-item{padding:.7rem 0;border-top:1px solid var(--rule,#ded5c4);}
.mbox-item:first-of-type{border-top:none;}
.mbox-name{font-family:"Inter Tight",sans-serif;font-weight:500;font-size:1.02rem;color:var(--sumi,#1A1512);}
.mbox-name .cur{color:var(--sumi-60,#6b6259);}
.mbox-desc{font-family:"Inter Tight",sans-serif;font-weight:300;font-size:.88rem;
  color:var(--sumi-60,#6b6259);margin:.25rem auto 0;max-width:52ch;line-height:1.5;}
.mbox-cuts{font-family:"Inter Tight",sans-serif;font-weight:300;font-style:italic;font-size:.78rem;
  color:var(--sumi-60,#6b6259);margin:.5rem auto 0;max-width:54ch;line-height:1.6;}

/* hub cards */
.menu-hub-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));
  gap:var(--s3,1rem);max-width:64ch;margin:0 auto;}
.menu-card{display:block;text-decoration:none;padding:var(--s5,2.25rem) var(--s4,1.75rem);
  border:1px solid var(--rule,#e0d7c6);border-radius:3px;background:var(--paper,#F3EDE2);text-align:center;
  transition:border-color .25s,transform .25s,box-shadow .25s;}
.menu-card:hover{border-color:var(--gold,#C8A35A);transform:translateY(-3px);box-shadow:0 10px 30px -18px rgba(26,21,18,.4);}
.menu-card .jp{display:block;font-family:"Shippori Mincho",serif;color:var(--gold,#C8A35A);font-size:1.1rem;margin-bottom:.4rem;}
.menu-card h2{font-family:"Cormorant Garamond",serif;font-weight:500;font-size:1.5rem;margin:0 0 .3rem;color:var(--sumi,#1A1512);}
.menu-card p{font-family:"Inter Tight",sans-serif;font-weight:300;font-size:.85rem;color:var(--sumi-60,#6b6259);margin:0;}

/* download button */
.menu-download-wrap{text-align:center;margin-top:var(--s6,3rem);}
.menu-download{display:inline-flex;align-items:center;gap:.5rem;text-decoration:none;
  font-family:"Inter Tight",sans-serif;font-weight:500;font-size:.82rem;letter-spacing:.1em;
  text-transform:uppercase;color:var(--sumi,#1A1512);border:1px solid var(--sumi,#1A1512);
  border-radius:2px;padding:.7rem 1.3rem;transition:color .25s,background .25s;}
.menu-download:hover{background:var(--sumi,#1A1512);color:var(--paper,#F3EDE2);}
.menu-download svg{width:1rem;height:1rem;stroke:currentColor;fill:none;stroke-width:1.5;}

/* faq (hub) */
.menu-faq{max-width:60ch;margin:0 auto;}
.menu-faq-item{padding:var(--s3,1rem) 0;border-bottom:1px solid var(--rule,#e8e0d1);}
.menu-faq-item:last-child{border-bottom:none;}
.menu-faq-item h3{font-family:"Inter Tight",sans-serif;font-weight:500;font-size:1rem;margin:0 0 .35rem;color:var(--sumi,#1A1512);}
.menu-faq-item p{font-family:"Inter Tight",sans-serif;font-weight:300;font-size:.92rem;line-height:1.55;color:var(--sumi-60,#6b6259);margin:0;}

.menu-footnote{font-family:"Inter Tight",sans-serif;font-weight:300;font-style:italic;font-size:.82rem;
  color:var(--sumi-60,#6b6259);text-align:center;max-width:62ch;margin:var(--s6,3rem) auto 0;line-height:1.6;}

@media (max-width:560px){
  .mrow.inline{flex-wrap:wrap;}
  .mrow.inline .mprice{margin-left:auto;}
}