:root{
  --ink:#221c16;
  --ink-soft:#7a6d5e;
  --paper:#fdf7ee;
  --paper-deep:#f5e9d8;
  --sakura:#f3c3cd;
  --sakura-wash:#fbeef1;
  --sakura-deep:#d97b8f;
  --vermillion:#9c2b1f;
  --vermillion-deep:#6f1d14;
  --gold:#b8892f;
  --gold-soft:#e6cd97;
  --matcha:#4f6b52;
  --indigo:#1f2c33;
  --line: rgba(34,28,22,0.15);
}
*{box-sizing:border-box;}
html,body{margin:0;padding:0;}
body{
  font-family:'Jost', system-ui, sans-serif;
  background:var(--indigo);
  color:var(--ink);
  -webkit-font-smoothing:antialiased;
}
.serif{font-family:'Cormorant Garamond', Georgia, serif;}
:focus-visible{outline:2px solid var(--vermillion);outline-offset:2px;}

.app{
  max-width:520px; margin:0 auto; min-height:100vh; position:relative;
  background:
    radial-gradient(ellipse at 15% 8%, rgba(243,195,205,0.35) 0%, rgba(243,195,205,0) 30%),
    repeating-linear-gradient(115deg, rgba(184,137,47,0.035) 0px, rgba(184,137,47,0.035) 1px, transparent 1px, transparent 26px),
    var(--paper);
  box-shadow:0 0 60px rgba(0,0,0,0.35);
}

/* wandering sakura petals: transform-only animation, so they stay on the GPU */
.petal-field{position:fixed; inset:0; pointer-events:none; z-index:1; overflow:hidden; max-width:520px; margin:0 auto; contain:strict;}
.petal{position:absolute; top:-8%; opacity:.55; will-change:transform; animation:petal-fall linear infinite;}
@keyframes petal-fall{
  0%{transform:translate3d(0,0,0) rotate(0deg);}
  100%{transform:translate3d(24px,112vh,0) rotate(300deg);}
}
@media (prefers-reduced-motion: reduce){ .petal{animation:none; display:none;} }

/* ---------- home ---------- */
.home-hero{
  background:
    radial-gradient(circle at 82% -12%, var(--sakura) 0%, var(--sakura-wash) 42%, transparent 68%),
    radial-gradient(circle at -8% 30%, var(--sakura-wash) 0%, transparent 45%),
    var(--paper);
  padding:34px 26px 22px;
  text-align:center;
  position:relative;
  overflow:hidden;
  border-bottom:1px solid var(--line);
}
.home-hero::after{
  content:""; position:absolute; left:0; right:0; bottom:-1px; height:1px;
  background:linear-gradient(90deg, transparent, var(--gold-soft), transparent);
}
.home-hero::before{
  content:"春";
  position:absolute; top:-38px; right:-14px;
  font-family:'Cormorant Garamond', serif;
  font-size:170px; font-weight:600; line-height:1;
  color:rgba(156,43,31,0.07);
  pointer-events:none;
}
.branch{position:absolute; left:-18px; top:6px; width:120px; opacity:.85; pointer-events:none;}
.hanko{
  position:absolute; top:20px; right:20px;
  width:34px; height:34px; border-radius:6px;
  background:var(--vermillion); color:#fff;
  display:flex; align-items:center; justify-content:center;
  font-family:'Cormorant Garamond', serif; font-size:15px; font-weight:600;
  box-shadow:0 2px 6px rgba(111,29,20,0.35);
  transform:rotate(-4deg);
}
.mark{font-size:24px; color:var(--vermillion-deep); margin-bottom:4px; position:relative; z-index:1;}
.home-hero h1{
  font-family:'Cormorant Garamond', serif;
  font-size:42px; letter-spacing:.16em; font-weight:600;
  margin:0 0 4px; position:relative; z-index:1;
  color:var(--ink);
}
.home-hero .kicker{
  font-size:10px; letter-spacing:.32em; text-transform:uppercase;
  color:var(--gold); font-weight:600; margin-bottom:8px; position:relative; z-index:1;
}
.home-hero .sub{font-size:12.5px; color:var(--ink-soft); letter-spacing:.03em; position:relative; z-index:1;}
.home-hero .contact{
  margin-top:14px; font-size:11.5px; color:var(--ink-soft);
  display:flex; justify-content:center; gap:16px; position:relative; z-index:1;
}
.home-hero .contact a{color:inherit; text-decoration:none;}
.home-hero .contact a:not(:first-child){position:relative; padding-left:16px;}
.home-hero .contact a:not(:first-child)::before{
  content:"❁"; position:absolute; left:0; top:50%; transform:translateY(-50%);
  font-size:8px; color:var(--gold);
}
.gold-rule{height:1px; background:linear-gradient(90deg, transparent, var(--gold), transparent); margin:16px auto 0; width:70%; position:relative; z-index:1;}

/* ---------- quick nav: swipeable category strip ---------- */
.quicknav-wrap{
  position:sticky; top:0; z-index:6;
  background:rgba(253,247,238,0.98);   /* solid: no backdrop blur, which was very costly on phones */
  border-bottom:1px solid var(--line);
  box-shadow:0 6px 14px -6px rgba(34,20,18,0.18);
}
.quicknav{
  position:relative;
  display:flex; gap:16px; overflow-x:auto;
  padding:14px 20px 12px;
  scroll-snap-type:x proximity;
  scrollbar-width:none;
  -webkit-overflow-scrolling:touch;
}
.quicknav::-webkit-scrollbar{display:none;}
.qn-chip{
  flex:0 0 auto; scroll-snap-align:start;
  display:flex; flex-direction:column; align-items:center; gap:7px;
  width:66px;
  text-decoration:none;
  -webkit-tap-highlight-color:transparent;
}
.qn-thumb{
  position:relative; width:58px; height:58px; border-radius:50%;
  overflow:hidden; background:linear-gradient(135deg, var(--sakura-wash), var(--sakura));
  border:2px solid transparent;
  box-shadow:0 3px 8px rgba(34,20,18,0.16);
  transition:transform .2s ease, border-color .2s ease;
}
.qn-thumb img{position:absolute; inset:0; width:100%; height:100%; object-fit:cover;}
.qn-thumb .qn-fallback{
  position:absolute; inset:0; display:flex; align-items:center; justify-content:center;
  font-size:20px; color:var(--vermillion-deep);
}
.qn-label{
  font-size:10.5px; font-weight:500; letter-spacing:.01em; text-align:center;
  color:var(--ink-soft); line-height:1.2; max-width:70px;
  transition:color .2s ease;
}
.qn-chip.active .qn-thumb{border-color:var(--vermillion); transform:scale(1.08);}
.qn-chip.active .qn-label{color:var(--vermillion-deep); font-weight:600;}
.quicknav-hint{
  text-align:center; font-size:9.5px; letter-spacing:.14em; text-transform:uppercase;
  color:var(--ink-soft); opacity:.65; padding:0 0 9px;
}
.quicknav-hint::before, .quicknav-hint::after{content:"—"; margin:0 6px; opacity:.6;}

.group-label{
  padding:22px 26px 8px;
  font-family:'Cormorant Garamond', serif;
  font-size:13px; letter-spacing:.24em; text-transform:uppercase;
  color:var(--vermillion); font-weight:600;
  display:flex; align-items:center; gap:8px;
}
.group-label::before{content:"❁"; font-size:11px; color:var(--gold);}
.group-label::after{content:""; flex:1; height:1px; background:linear-gradient(90deg, var(--line), transparent); margin-left:4px;}

.home-footer{
  text-align:center; padding:22px 24px 46px; color:var(--ink-soft); font-size:11px;
  position:relative; line-height:1.8;
}
.home-footer::before{
  content:""; display:block; width:100%; height:14px; margin:0 auto 18px;
  background-image:repeating-radial-gradient(circle at 8px -2px, transparent 0 6px, var(--line) 7px 8px);
  background-size:16px 16px; background-repeat:repeat-x; opacity:.6;
}
.home-footer a{color:var(--vermillion); font-size:11px; text-decoration:underline; font-family:inherit;}

/* ---------- category sections ---------- */
main#menuContent{position:relative; z-index:2;}
.cat-section{scroll-margin-top:136px; margin-top:26px;}
.group-label + .cat-section{margin-top:14px;}
.cat-header{
  position:relative; overflow:hidden;
  margin:0 18px;
  border-radius:22px;
  min-height:148px;
  display:flex; flex-direction:column; justify-content:flex-end;
  padding:18px 20px 16px;
  background:linear-gradient(135deg, var(--vermillion-deep), var(--sakura-deep));
  box-shadow:0 8px 20px rgba(34,20,18,0.18);
}
.cat-header .bg-img{position:absolute; inset:0; width:100%; height:100%; object-fit:cover;}
.cat-header .overlay{
  position:absolute; inset:0;
  background:linear-gradient(190deg, rgba(28,16,14,0.08) 0%, rgba(28,16,14,0.3) 48%, rgba(28,16,14,0.8) 100%);
}
.cat-header.no-photo{
  background:radial-gradient(circle at 88% -25%, var(--sakura) 0%, var(--sakura-deep) 55%, var(--vermillion-deep) 100%);
}
.cat-header.no-photo .overlay{background:none;}
.cat-header .cat-mark{position:absolute; top:14px; right:16px; z-index:1; font-size:13px; color:rgba(255,255,255,0.55);}
.cat-header .head-text{position:relative; z-index:1;}
.cat-header h2{
  font-family:'Cormorant Garamond', serif;
  font-size:29px; letter-spacing:.06em; margin:0; font-weight:600;
  color:#fff; text-shadow:0 2px 10px rgba(0,0,0,0.35);
}
.cat-header .jp{font-size:11px; color:rgba(255,255,255,0.85); margin-top:3px; letter-spacing:.06em;}

.cat-body{
  padding:16px 22px 32px;
  content-visibility:auto;             /* off-screen categories skip layout & paint */
  contain-intrinsic-size:auto 1800px;  /* replaced per category in script.js */
}

/* allergy notice: first thing under every category banner */
.allergy{
  display:flex; align-items:center; gap:9px;
  margin:0 0 20px; padding:10px 14px;
  background:var(--sakura-wash);
  border:1px solid rgba(217,123,143,0.35);
  border-radius:14px;
  font-size:12px; line-height:1.4; color:var(--vermillion-deep);
}
.allergy::before{content:"❁"; font-size:12px; color:var(--sakura-deep); flex:none;}

.group{margin-top:26px;}
.allergy + .group{margin-top:0;}
.group-title{
  font-family:'Cormorant Garamond', serif;
  font-size:16px; letter-spacing:.14em; text-transform:uppercase;
  font-weight:600; color:var(--vermillion);
  padding-bottom:7px; border-bottom:1px solid var(--gold-soft);
  margin-bottom:14px;
  display:flex; align-items:center; gap:6px;
}
.group-title::before{content:"❁"; color:var(--gold); font-size:11px;}

.item-grid{display:grid; grid-template-columns:1fr 1fr; gap:16px;}
.item{
  background:#fffefb; border:1px solid var(--line); border-radius:18px;
  overflow:hidden; display:flex; flex-direction:column;
  box-shadow:0 3px 10px rgba(34,28,22,0.08);
}
.item-media{
  position:relative; width:100%; aspect-ratio:1/1;
  background:radial-gradient(circle at 32% 28%, var(--sakura-wash), var(--sakura) 85%);
  display:flex; align-items:center; justify-content:center;
  overflow:hidden;
}
.item-media img{position:absolute; inset:0; width:100%; height:100%; object-fit:cover; display:block;}
.item-media .fallback{font-size:26px; opacity:.75; position:relative; z-index:0;}
.item-media .badge{
  position:absolute; left:8px; top:8px; z-index:2;
  background:var(--vermillion); color:#fff; font-size:9px; font-weight:600;
  letter-spacing:.04em; text-transform:uppercase;
  padding:4px 8px; border-radius:999px;
  box-shadow:0 2px 6px rgba(111,29,20,0.35);
}
.item-body{flex:1; min-width:0; padding:10px 11px 12px; display:flex; flex-direction:column;}
.item .name{font-family:'Cormorant Garamond', serif; font-size:16.5px; font-weight:600; line-height:1.2; display:block;}
.item .veg-mark{
  display:inline-flex; align-items:center; justify-content:center;
  width:14px; height:14px; border-radius:50%; margin-right:5px;
  background:var(--matcha); color:#fff; font-size:8.5px; font-weight:700;
  font-family:'Jost',sans-serif; vertical-align:middle; position:relative; top:-1px;
}
.item .price{
  font-size:14px; font-weight:600; font-family:'Jost',sans-serif; color:var(--vermillion-deep);
  margin-top:auto; padding-top:6px; display:block;
}
.item .sizes{margin-top:auto; padding-top:6px; display:flex; flex-direction:column; gap:2px;}
.item .size-row{display:flex; align-items:baseline; justify-content:space-between; gap:6px;}
.item .size-label{font-size:10px; color:var(--ink-soft); letter-spacing:.02em; white-space:nowrap;}
.item .size-price{font-size:12.5px; font-weight:600; color:var(--vermillion-deep); white-space:nowrap;}
/* descriptions show in full: no line clamp, so nothing is cut off on narrow phone cards */
.item .desc{
  font-size:11.5px; color:var(--ink-soft); margin-top:3px; line-height:1.4;
  overflow-wrap:anywhere;
}
.item .note{font-size:10.5px; color:var(--vermillion); margin-top:2px; font-style:italic;}

.extra-note{
  margin-top:16px; padding-top:12px; border-top:1px dashed var(--line);
  font-size:11.5px; color:var(--ink-soft); line-height:1.6;
}