:root {
  --paper: #F7F1E6;
  --paper-2: #EDE4D3;
  --ink: #1A1A26;
  --ink-dim: #5E5C6A;
  --line: #E4DBC9;
  --cobalt: #1A3BC2;
  --cobalt-deep: #12288A;
  --cobalt-soft: #2E4FD6;
  --night: #0F1736;
  --night-2: #16215A;
  --night-deep: #0A0F26;
  --night-card: #141C40;
  --night-ink: #F4EFE4;
  --night-dim: #B4B8D0;
  --night-line: rgba(244,239,228,.14);
  --seal: #C8362B;
  --gold: #D9A63A;
  --moon: #F3C85C;
  --font-display: "Shippori Mincho", "Hiragino Mincho ProN", "Yu Mincho", Georgia, serif;
  --font-body: "Instrument Sans", "Helvetica Neue", Arial, sans-serif;
  --gutter-l: max(20px, env(safe-area-inset-left, 0px));
  --gutter-r: max(20px, env(safe-area-inset-right, 0px));
  --ease-out: cubic-bezier(.2,.8,.2,1);
  --fg: var(--ink);
  --fg-dim: var(--ink-dim);
  --card: #fff;
  --card-line: var(--line);
  --accent: var(--cobalt);
  color-scheme: light;
}
.hero, .on-night, .on-deep, .moon-sky, .strip, footer, .page-head.dark { --fg: var(--night-ink); --fg-dim: var(--night-dim); --card: var(--night-card); --card-line: var(--night-line); --accent: var(--moon); color: var(--fg); }
* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body { margin: 0; background: var(--paper); color: var(--ink); font-family: var(--font-body); font-size: 17px; line-height: 1.5; overflow-x: hidden; }
img { max-width: 100%; height: auto; display: block; }
h1, h2, h3, h4 { font-family: var(--font-display); font-weight: 500; line-height: 1.1; margin: 0; text-wrap: balance; letter-spacing: -.01em; }
h1 { font-size: clamp(2.6rem, 6.4vw, 5.2rem); }
h2 { font-size: clamp(2rem, 4.4vw, 3.4rem); }
h3 { font-size: 1.6rem; }
h4, .h4 { font-size: 1.25rem; }
.h3 { font-size: 1.6rem; }
p { margin: 0; }
a { color: inherit; }
button { font: inherit; cursor: pointer; }
:focus-visible { outline: 3px solid var(--accent); outline-offset: 3px; }
.wrap { padding-left: var(--gutter-l); padding-right: var(--gutter-r); max-width: 1200px; margin-inline: auto; width: 100%; }
.narrow { max-width: 760px; }
.dim { color: var(--fg-dim); }

/* surfaces */
.on-paper { background: var(--paper); color: var(--ink); }
.on-white { background: #fff; color: var(--ink); }
.on-night { background: var(--night); color: var(--night-ink); }
.on-deep { background: var(--night-deep); color: var(--night-ink); }

/* buttons + links */
.btn { display: inline-flex; align-items: center; justify-content: center; gap: .5rem; padding: .85rem 1.4rem; border-radius: 999px; border: 1px solid transparent; font-weight: 600; text-decoration: none; transition: transform .2s var(--ease-out), background .2s, box-shadow .2s; }
.btn:hover { transform: translateY(-2px); }
.btn:active { transform: scale(.98); }
.btn-cobalt { background: var(--cobalt); color: #fff; }
.btn-cobalt:hover { background: var(--cobalt-soft); box-shadow: 0 10px 24px rgba(26,59,194,.35); }
.btn-seal { background: var(--seal); color: #fff; }
.btn-seal:hover { background: #D8463A; box-shadow: 0 10px 24px rgba(200,54,43,.35); }
.btn-ghost { background: #fff; color: var(--ink); border-color: var(--line); }
.btn-ghost:hover { background: var(--paper-2); }
.on-night .btn-ghost, .on-deep .btn-ghost, .moon-sky .btn-ghost, .strip .btn-ghost { background: rgba(255,255,255,.06); color: var(--night-ink); border-color: rgba(255,255,255,.22); }
.on-night .btn-ghost:hover, .on-deep .btn-ghost:hover, .moon-sky .btn-ghost:hover, .strip .btn-ghost:hover { background: rgba(255,255,255,.14); }
.link { color: var(--accent); text-decoration: none; font-weight: 600; border-bottom: 2px solid transparent; transition: border-color .2s; }
.link:hover { border-color: var(--accent); }

/* eyebrow with the red seal */
.eyebrow { display: flex; align-items: center; gap: .6rem; font-family: var(--font-display); font-size: 1.05rem; color: var(--fg-dim); margin-bottom: .9rem; }
.eyebrow::before { content: ""; width: 12px; height: 22px; background: url(../img/seal.png) center / contain no-repeat; flex: 0 0 auto; }
.eyebrow span { color: var(--seal); }
.on-night .eyebrow span, .on-deep .eyebrow span, .moon-sky .eyebrow span { color: var(--moon); }

/* big kanji decoration */
.kanji { position: relative; overflow: hidden; }
.kanji::before { content: attr(data-kanji); position: absolute; right: var(--gutter-r); top: 50%; transform: translateY(-50%); font-family: var(--font-display); font-size: clamp(9rem, 22vw, 20rem); line-height: 1; color: currentColor; opacity: .06; pointer-events: none; writing-mode: vertical-rl; letter-spacing: .08em; white-space: nowrap; }
.on-paper.kanji::before, .on-white.kanji::before { display: none; }
.kanji > .wrap { position: relative; z-index: 1; }

[hidden] { display: none !important; }

/* reveal on scroll */
.reveal { opacity: 0; transform: translateY(22px); transition: opacity .7s var(--ease-out), transform .7s var(--ease-out); }
.reveal.in { opacity: 1; transform: none; }
.reveal[data-delay="1"] { transition-delay: .1s; } .reveal[data-delay="2"] { transition-delay: .2s; } .reveal[data-delay="3"] { transition-delay: .3s; }

/* header */
.top { position: fixed; top: 0; left: 0; right: 0; z-index: 9; background: transparent; transition: background .35s, box-shadow .35s; }
.top.solid { background: rgba(247,241,230,.94); backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); box-shadow: 0 1px 0 var(--line), 0 6px 24px -18px rgba(26,26,38,.35); }
body.has-hero .top:not(.solid) nav a, body.dark-head .top:not(.solid) nav a { color: #fff; }
body.dark-head .top:not(.solid) .brand .blue { display: none; }
body.dark-head .top:not(.solid) .brand .white { display: block; }
.top .wrap { display: flex; align-items: center; gap: 1.5rem; min-height: 72px; }
.brand { display: block; height: 40px; text-decoration: none; }
.brand img { height: 40px; width: auto; }
.brand img { transform-origin: left top; transition: transform .45s var(--ease-out); }
body.has-hero .top:not(.solid) .brand img { transform: translateY(10px) scale(1.8); }
@media (max-width: 900px) { body.has-hero .top:not(.solid) .brand img { transform: translateY(6px) scale(1.35); } body.has-hero .hero-grid { padding-top: 6.5rem; } }
@media (prefers-reduced-motion: reduce) { .brand img { transition: none; } }
/* light pages: blue logo and dark nav from the start; only the home hero gets the white set while transparent */
.brand .white { display: none; }
.brand .blue { display: block; }

.top nav { display: flex; gap: .8rem; margin-left: auto; }
.top nav a { text-decoration: none; color: var(--ink); font-weight: 500; position: relative; padding: .7rem .5rem; display: inline-block; min-width: 44px; text-align: center; }

.top nav a::after { content: ""; position: absolute; left: 0; right: 0; bottom: -2px; height: 2px; background: currentColor; transform: scaleX(0); transform-origin: left; transition: transform .3s var(--ease-out); }
.top nav a:hover::after, .top nav a.here::after { transform: scaleX(1); }
.top .btn { padding: .6rem 1.1rem; }
@media (max-width: 820px) { .top .top-cta { display: none; } }
@media (max-width: 820px) { .top nav { display: none; } }

/* hero: cream left, dark curve right, the four bowls along the curve */
.hero { position: relative; min-height: min(100svh, 880px); background: var(--paper) url(../img/backdrop.webp) 44% 50% / cover no-repeat; color: var(--ink); overflow: hidden; display: flex; align-items: center; --fg: var(--ink); --fg-dim: var(--ink-dim); --accent: var(--cobalt); }
.hero .curve { position: absolute; inset: 0; width: 100%; height: 100%; }
.hero .curve .dark { fill: var(--night); }
.hero .curve .brush { stroke: var(--cobalt); stroke-width: 54; stroke-linecap: round; opacity: .9; stroke-dasharray: 1400; stroke-dashoffset: 1400; animation: draw 1.6s var(--ease-out) .2s forwards; }
@keyframes draw { to { stroke-dashoffset: 0; } }
.hero-grid { display: grid; grid-template-columns: 36% 1fr; gap: 2rem; align-items: center; padding-block: 7rem 3.5rem; position: relative; z-index: 2; width: 100%; }
.hero h1 { max-width: 9em; font-size: clamp(2.6rem, 4.6vw, 3.85rem); }
.hero h1 em { font-style: normal; color: var(--cobalt); }
.hero h1 .w { display: inline-block; overflow: hidden; vertical-align: bottom; padding-block: .1em .18em; margin-block: -.1em -.18em; }
.hero h1 .w span { display: inline-block; transform: translateY(110%); animation: rise .9s var(--ease-out) forwards; }
@keyframes rise { to { transform: none; } }
.hero h1.shown .w span { transform: none; animation: none; }
.hero h1.shown .w { overflow: visible; }
.hero p.lead { font-size: 1.1rem; max-width: 28em; margin-top: 1.3rem; color: var(--ink-dim); }
.hero .cta { display: flex; flex-wrap: wrap; gap: .8rem; margin-top: 2rem; }
.status { display: inline-flex; align-items: center; gap: .5rem; font-size: .95rem; }
.status i { width: 9px; height: 9px; border-radius: 50%; background: #3DBA6E; box-shadow: 0 0 0 0 rgba(61,186,110,.6); animation: pulse 2s infinite; }
.status.closed i { background: var(--seal); }
@keyframes pulse { 70% { box-shadow: 0 0 0 9px rgba(61,186,110,0); } 100% { box-shadow: 0 0 0 0 rgba(61,186,110,0); } }
.hero .status { margin-top: 1.6rem; color: var(--ink-dim); }
.stage { position: relative; height: clamp(600px, 74vh, 780px); width: 100%; color: var(--night-ink); }
.dish { position: absolute; left: var(--x); top: var(--y); width: max-content; display: flex; align-items: center; gap: 1rem; text-decoration: none; color: var(--night-ink); animation: slidein 1s var(--ease-out) both; animation-delay: var(--d); }

@keyframes slidein { from { opacity: 0; transform: translate(80px, 20px); } to { opacity: 1; transform: none; } }
.dish img { width: clamp(170px, 14vw, 215px); flex: 0 0 auto; height: auto; filter: drop-shadow(0 28px 34px rgba(0,0,0,.6)); transition: transform .5s var(--ease-out); }
.dish:hover img { transform: translateY(-8px) rotate(-3deg) scale(1.04); }
.dish .lbl { display: grid; gap: .15rem; min-width: 0; width: 9.5rem; }
.dish .lbl b { font-family: var(--font-display); font-size: 1.5rem; font-weight: 500; }
.dish .lbl i { font-style: normal; color: var(--night-dim); font-size: .85rem; line-height: 1.3; }
.dish .lbl em { font-style: normal; color: var(--moon); font-family: var(--font-display); font-size: 1.05rem; padding-top: .15rem; }
.stage .bit { position: absolute; left: var(--x); top: var(--y); width: calc(var(--w) * 1.5); transform: rotate(var(--r)); filter: drop-shadow(0 10px 12px rgba(0,0,0,.35)); animation: bitin .8s var(--ease-out) 1.2s both; }
@keyframes bitin { from { opacity: 0; transform: rotate(var(--r)) scale(.5); } to { opacity: 1; transform: rotate(var(--r)); } }
.stage.settled .dish, .stage.settled .bit { animation: none; opacity: 1; transform: none; }
.stage.settled .bit { transform: rotate(var(--r)); }
.scroll-cue { position: absolute; right: var(--gutter-r); bottom: 2rem; padding: .5rem; z-index: 2; color: var(--night-dim); font-size: .85rem; display: flex; flex-direction: column; align-items: center; gap: .4rem; text-decoration: none; }
.scroll-cue i { width: 1px; height: 44px; background: linear-gradient(var(--night-dim), transparent); display: block; animation: drip 1.8s infinite var(--ease-out); transform-origin: top; }
@keyframes drip { 0% { transform: scaleY(0); } 50% { transform: scaleY(1); } 100% { transform: scaleY(0); transform-origin: bottom; } }
@media (max-width: 1100px) { .hero-grid { grid-template-columns: 44% 1fr; } .dish .lbl i { display: none; } .dish { width: 46%; } }
@media (max-width: 900px) {
  .hero { min-height: 0; align-items: flex-start; }
  .hero { background-image: none; }
  .hero-grid { grid-template-columns: 1fr; gap: 0; padding-block: 5rem 0; }
  .hero h1 { font-size: 2.3rem; }
  .hero p.lead { font-size: .95rem; margin-top: 1rem; }
  .hero .cta { margin-top: 1.2rem; }
  .hero .cta .btn-ghost { display: none; }
  .hero .status { margin-top: 1rem; margin-bottom: 1.6rem; }
  .stage { height: auto; background: var(--night); margin-inline: calc(-1 * var(--gutter-l)) calc(-1 * var(--gutter-r)); padding: 1.6rem var(--gutter-r) 1.6rem var(--gutter-l); display: grid; grid-template-columns: 1fr 1fr; gap: 1rem; border-radius: 28px 28px 0 0; }
  .dish { position: static; width: auto; flex-direction: column; align-items: flex-start; gap: .4rem; }
  .dish img { width: 78%; }
  .dish .lbl i { display: none; }
  .stage .bit { display: none; }
  .scroll-cue { display: none; }
}

/* facts row */
.facts { border-bottom: 1px solid var(--line); }
.facts-row { display: grid; grid-template-columns: repeat(4, 1fr); gap: 1.5rem; padding-block: 1.4rem; }
.fact { display: flex; align-items: center; gap: .8rem; min-width: 0; }
.fact .ico { width: 40px; height: 40px; border-radius: 12px; background: var(--paper); color: var(--cobalt); display: grid; place-items: center; flex: 0 0 auto; }
.fact .ico svg { width: 22px; height: 22px; }
.fact b { display: block; font-weight: 600; line-height: 1.2; }
.fact span:not(.ico) { color: var(--ink-dim); font-size: .9rem; }
@media (max-width: 900px) { .facts-row { grid-template-columns: 1fr 1fr; gap: 1rem; } }
@media (max-width: 480px) { .facts-row { grid-template-columns: 1fr; gap: .8rem; } }

/* top list tiles with haze */
.toplist { position: relative; overflow: hidden; background: var(--paper); }
.toplist .haze { position: absolute; inset: 0; background: url(../img/haze.webp) center / cover no-repeat; opacity: .55; filter: saturate(1.1); pointer-events: none; }
.toplist::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(247,241,230,.85) 0%, rgba(247,241,230,.35) 40%, rgba(247,241,230,.9) 100%); pointer-events: none; }
.toplist .wrap { position: relative; z-index: 1; }
.tiles { display: grid; grid-template-columns: repeat(4, 1fr); gap: 1.4rem; padding-top: 4.5rem; }
.tile { position: relative; display: block; text-decoration: none; color: var(--ink); background: rgba(255,255,255,.72); backdrop-filter: blur(14px); border: 1px solid rgba(255,255,255,.8); border-radius: 22px; padding: 6.5rem 1.2rem 1.3rem; box-shadow: 0 20px 40px -24px rgba(26,26,38,.35); transition: transform .35s var(--ease-out), box-shadow .35s; }
.tile:hover { transform: translateY(-6px); box-shadow: 0 30px 50px -24px rgba(26,26,38,.45); }
.tile-bowl { position: absolute; left: 50%; top: -4.5rem; width: 86%; max-width: 250px; transform: translateX(-50%); filter: drop-shadow(0 24px 24px rgba(26,26,38,.35)); transition: transform .5s var(--ease-out); }
.tile:hover .tile-bowl { transform: translateX(-50%) translateY(-10px) scale(1.04) rotate(-2deg); }
.tile-body h3 { font-size: 1.35rem; }
.tile-body p { color: var(--ink-dim); font-size: .92rem; margin-top: .3rem; min-height: 2.8em; }
.tile-row { display: flex; align-items: center; justify-content: space-between; margin-top: .9rem; }
.tile-row .price { font-family: var(--font-display); font-size: 1.35rem; }
.tile-row .heat { color: var(--seal); }
@media (max-width: 1000px) { .tiles { grid-template-columns: 1fr 1fr; row-gap: 5.5rem; } }
@media (max-width: 480px) { .tiles { grid-template-columns: 1fr; row-gap: 5rem; } .tile-bowl { max-width: 230px; } }

/* menu board (dark, four columns, gold prices) */
.board { padding-block: 5rem; position: relative; overflow: hidden; }
.board::before { content: "献立"; position: absolute; right: var(--gutter-r); top: 50%; transform: translateY(-50%); font-family: var(--font-display); font-size: clamp(9rem, 20vw, 18rem); line-height: 1; color: #fff; opacity: .04; writing-mode: vertical-rl; pointer-events: none; }
.board .wrap { position: relative; z-index: 1; }
.board-head { margin-bottom: 2.2rem; }
.board-grid { display: grid; grid-template-columns: 300px 1fr; gap: 2.5rem; align-items: start; }
.board-pics { display: grid; gap: 1rem; }
.ptile { position: relative; border-radius: 18px; overflow: hidden; aspect-ratio: 4 / 3; }
.ptile img { width: 100%; height: 100%; object-fit: cover; transition: transform 1s var(--ease-out); }
.ptile:hover img { transform: scale(1.05); }
.ptile span { position: absolute; left: .9rem; bottom: .8rem; color: #fff; font-weight: 600; font-size: .95rem; text-shadow: 0 2px 10px rgba(0,0,0,.5); }
.board-cols { display: grid; grid-template-columns: repeat(2, 1fr); gap: 2rem 3rem; }
.bcol h3 { font-size: 1.5rem; color: var(--moon); margin-bottom: .6rem; padding-bottom: .5rem; border-bottom: 1px solid var(--night-line); }
.bcol ul { list-style: none; margin: 0; padding: 0; }
.bcol li { display: flex; align-items: baseline; gap: .6rem; padding: .45rem 0; }
.bcol li span { flex: 0 1 auto; }
.bcol li i { flex: 1; border-bottom: 1px dotted rgba(244,239,228,.3); transform: translateY(-.25em); min-width: 1rem; }
.bcol li b { font-family: var(--font-display); font-size: 1.1rem; color: var(--moon); font-variant-numeric: tabular-nums; white-space: nowrap; }
.board-foot { margin-top: 2rem; }
@media (max-width: 1000px) { .board-grid { grid-template-columns: 1fr; } .board-pics { grid-template-columns: 1fr 1fr; } }
@media (max-width: 600px) { .board { padding-block: 3.2rem; } .board-cols { grid-template-columns: 1fr; gap: 1.4rem; } .board-pics { grid-template-columns: 1fr 1fr; gap: .7rem; } }

/* menu page: chips + grid + lists */
.chipbar { display: flex; gap: .5rem; flex-wrap: wrap; margin-bottom: 1.6rem; position: sticky; top: 72px; z-index: 5; background: rgba(247,241,230,.92); backdrop-filter: blur(10px); padding: .8rem 0; }
.chip-btn { text-decoration: none; display: inline-flex; align-items: center; min-height: 44px; border: 1px solid var(--line); background: #fff; color: var(--ink); border-radius: 999px; padding: .55rem 1rem; font-weight: 500; transition: background .2s, color .2s, border-color .2s; }
.chip-btn.on { background: var(--cobalt); color: #fff; border-color: var(--cobalt); }
.mgrid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1.2rem; }
.mcard { background: #fff; border: 1px solid var(--line); border-radius: 18px; overflow: hidden; display: flex; flex-direction: column; min-width: 0; }
.mcard img { aspect-ratio: 4 / 3; object-fit: cover; width: 100%; }
.mbody { padding: 1rem 1.1rem 1.1rem; display: flex; flex-direction: column; gap: .5rem; flex: 1; }
.mtop { display: flex; justify-content: space-between; gap: .8rem; align-items: baseline; }
.mtop h3 { font-size: 1.2rem; }
.mtop .jp { display: block; font-family: var(--font-body); font-size: .8rem; color: var(--ink-dim); letter-spacing: .12em; margin-top: .15rem; }
.mtop .price { font-family: var(--font-display); font-size: 1.25rem; white-space: nowrap; }
.mbody p { color: var(--ink-dim); font-size: .92rem; }
.mrow { display: flex; gap: .5rem; flex-wrap: wrap; align-items: center; margin-top: auto; padding-top: .4rem; }
.mrow .heat { color: var(--seal); margin-right: .3rem; }
@media (max-width: 1000px) { .mgrid { grid-template-columns: 1fr 1fr; } }
.glists { display: grid; grid-template-columns: repeat(4, 1fr); gap: 1.2rem; margin-top: 1.2rem; }
.glist { background: #fff; border: 1px solid var(--line); border-radius: 18px; padding: 1.2rem 1.3rem 1rem; min-width: 0; }
.glist h3 { font-size: 1.4rem; margin-bottom: .6rem; }
.glist ul { list-style: none; margin: 0; padding: 0; }
.glist li { display: flex; justify-content: space-between; gap: .8rem; padding: .6rem 0; border-top: 1px solid var(--line); align-items: baseline; }
.glist li small { display: block; color: var(--ink-dim); font-size: .85rem; }
.glist li b { font-weight: 600; font-variant-numeric: tabular-nums; white-space: nowrap; }
.glist.hide, .mgrid.hide { display: none; }
.glists.single .glist { grid-column: span 2; }
@media (max-width: 1000px) { .glists { grid-template-columns: 1fr 1fr; } }
@media (max-width: 600px) { .mgrid { grid-template-columns: 1fr; } .chipbar { top: 64px; } .glists { grid-template-columns: 1fr; } }

/* page header (subpages) */
.page-head { background: #fff; color: var(--ink); padding-top: 72px; position: relative; overflow: hidden; border-bottom: 1px solid var(--line); }
.page-head .wrap { padding-block: 5rem 4rem; position: relative; }
.page-head p { color: var(--ink-dim); max-width: 36em; margin-top: 1rem; font-size: 1.1rem; }
.page-head.kanji::before { display: block; }
@media (max-width: 760px) { .page-head .wrap { padding-block: 3rem 2.5rem; } }
.page-head.with-art { background: var(--night); color: var(--night-ink); --fg: var(--night-ink); --fg-dim: var(--night-dim); --accent: var(--moon); border-bottom: 0; }
.page-head.with-art p { color: var(--night-dim); }
.page-head.with-art .eyebrow span { color: var(--moon); }
.head-grid { display: grid; grid-template-columns: 1fr 400px; gap: 2rem; align-items: center; padding-block: 2rem 3.5rem !important; }
.head-grid .art { width: 100%; height: auto; max-height: 520px; object-fit: contain; justify-self: end;
  -webkit-mask-image: linear-gradient(to right, transparent, #000 9%, #000 91%, transparent), linear-gradient(to bottom, transparent, #000 9%, #000 91%, transparent);
  -webkit-mask-composite: source-in; mask-image: linear-gradient(to right, transparent, #000 9%, #000 91%, transparent), linear-gradient(to bottom, transparent, #000 9%, #000 91%, transparent); mask-composite: intersect; }
@media (max-width: 860px) { .head-grid { grid-template-columns: 1fr; padding-top: 1.5rem !important; } .head-grid .art { max-height: 360px; justify-self: center; margin-top: .5rem; } .head-grid { padding-bottom: 2rem !important; } }

/* ticker */
.ticker { background: var(--cobalt); color: #fff; overflow: hidden; white-space: nowrap; padding-block: .85rem; font-family: var(--font-display); font-size: 1.05rem; letter-spacing: .02em; }
.ticker .track { display: flex; gap: 2.2rem; width: max-content; animation: slide 45s linear infinite; }
.ticker:hover .track { animation-play-state: paused; }
.ticker .item { white-space: nowrap; }
.ticker em { font-style: normal; color: rgba(255,255,255,.55); }
@keyframes slide { to { transform: translateX(-50%); } }

/* sections */
.sec { padding-block: 5.5rem; }
.sec-tight { padding-block: 3.5rem; }
.grid-2 { display: grid; grid-template-columns: 1fr 1fr; gap: 3.5rem; align-items: center; }
.sec .sub { margin-top: .8rem; max-width: 36em; }
.sec-head { display: flex; align-items: end; justify-content: space-between; gap: 1.5rem; flex-wrap: wrap; margin-bottom: 2rem; }
@media (max-width: 760px) { .sec { padding-block: 3.4rem; } .grid-2 { grid-template-columns: 1fr; gap: 1.6rem; } }

/* pot + steam + stats */
.pot { position: relative; border-radius: 20px; overflow: hidden; aspect-ratio: 1; }
.pot img { width: 100%; height: 100%; object-fit: cover; transform: scale(1.02); transition: transform 1.2s var(--ease-out); }
.pot:hover img { transform: scale(1.08); }
.pot .steam { position: absolute; inset: 0; pointer-events: none; }
.pot .steam i { position: absolute; bottom: 30%; width: 22%; height: 40%; border-radius: 50%; background: radial-gradient(closest-side, rgba(255,255,255,.55), rgba(255,255,255,0)); filter: blur(10px); opacity: 0; animation: steam 5s infinite ease-in-out; }
.pot .steam i:nth-child(1) { left: 18%; }
.pot .steam i:nth-child(2) { left: 42%; animation-delay: 1.6s; width: 28%; }
.pot .steam i:nth-child(3) { left: 62%; animation-delay: 3.1s; }
@keyframes steam { 0% { transform: translateY(10%) scaleX(.8); opacity: 0; } 25% { opacity: .9; } 100% { transform: translateY(-120%) scaleX(1.4); opacity: 0; } }
.stats { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1rem; margin: 2.2rem 0 0; }
.stats dt { font-family: var(--font-display); font-size: 2.3rem; font-variant-numeric: tabular-nums; }
.stats dd { margin: 0; font-size: .92rem; color: var(--fg-dim); }
@media (max-width: 760px) { .stats dt { font-size: 1.7rem; } }

/* flip cards */
.hint { font-size: .92rem; margin: 0 0 1rem; display: flex; align-items: center; gap: .5rem; color: var(--fg-dim); }
.hint::before { content: ""; width: 10px; height: 10px; border-radius: 50%; background: var(--accent); animation: pulse2 1.8s infinite; }
@keyframes pulse2 { 0% { box-shadow: 0 0 0 0 rgba(26,59,194,.45); } 100% { box-shadow: 0 0 0 10px rgba(26,59,194,0); } }
.cards { display: grid; grid-template-columns: repeat(4, 1fr); gap: 1.2rem; }
.flip { perspective: 1400px; min-width: 0; }
.flip button { all: unset; display: block; width: 100%; cursor: pointer; border-radius: 20px; }
.flip button:focus-visible { outline: 3px solid var(--accent); outline-offset: 4px; }
.flip .inner { position: relative; width: 100%; aspect-ratio: 3 / 4; transform-style: preserve-3d; transition: transform .8s var(--ease-out); }
.flip:hover .inner, .flip.on .inner, .flip button:focus-visible .inner { transform: rotateY(180deg); }
.flip.back-off .inner { transform: none; }
.face { position: absolute; inset: 0; backface-visibility: hidden; -webkit-backface-visibility: hidden; border-radius: 20px; overflow: hidden; }
.front { background: var(--card); border: 1px solid var(--card-line); color: var(--fg); display: flex; flex-direction: column; }
.front img { width: 100%; flex: 1; min-height: 0; object-fit: cover; }
.front .body { padding: .9rem 1rem 1rem; display: flex; align-items: baseline; justify-content: space-between; gap: .6rem; }
.front h4 { font-size: 1.15rem; }
.front .price { font-weight: 600; font-variant-numeric: tabular-nums; color: var(--accent); }
.back { transform: rotateY(180deg); color: #fff; padding: 1.3rem 1.2rem; display: flex; flex-direction: column; gap: .7rem; }
.back h4 { font-size: 1.4rem; }
.back .tag { font-size: .85rem; opacity: .8; }
.back ul { list-style: none; margin: .2rem 0 0; padding: 0; display: grid; gap: .3rem; font-size: .95rem; }
.back li::before { content: "·"; margin-right: .5rem; opacity: .6; }
.heat { display: inline-flex; align-items: center; gap: .4rem; font-size: .85rem; }
.heat i { width: 9px; height: 9px; border-radius: 50%; background: currentColor; opacity: .25; display: inline-block; }
.heat i.on { opacity: 1; }
.back .heat { margin-top: auto; opacity: .9; }
.back .price { font-family: var(--font-display); font-size: 1.5rem; }
.back-classic { background: linear-gradient(160deg, #B98A4A, #7A5424); }
.back-red { background: linear-gradient(160deg, #C8382A, #7A1B12); }
.back-black { background: linear-gradient(160deg, #3A3230, #15110F); }
.back-green { background: linear-gradient(160deg, #6F9A3A, #3A5A1E); }
@media (max-width: 1000px) { .cards { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 480px) { .cards { grid-template-columns: 1fr; } .flip .inner { aspect-ratio: 4 / 4.4; } }

/* spread photo, shown whole */
.spread { background: var(--night-deep); color: var(--night-ink); }
.spread .wrap { padding-block: 0 5rem; }
.spread figure { margin: 0; border-radius: 24px; overflow: hidden; position: relative; }
.spread figure img { width: 100%; height: auto; display: block; }
.spread figcaption { position: absolute; left: 0; right: 0; bottom: 0; padding: 4rem 2rem 2rem; background: linear-gradient(180deg, rgba(10,15,38,0), rgba(10,15,38,.88)); color: #fff; }
.spread figcaption h2 { max-width: 14em; }
.spread figcaption p { color: var(--night-dim); margin-top: .5rem; }
@media (max-width: 760px) { .spread figure { border-radius: 16px; } .spread figcaption { padding: 2.5rem 1.2rem 1.2rem; } .spread figcaption h2 { font-size: 1.5rem; } .spread figcaption p { font-size: .9rem; } }

/* name section */
.moon-sky { position: relative; overflow: hidden; background: radial-gradient(90% 60% at 80% 20%, var(--night-2) 0%, var(--night-deep) 60%); }
.moon-sky .moon { position: absolute; right: 8%; top: 12%; width: clamp(160px, 20vw, 300px); height: auto; filter: drop-shadow(0 0 40px rgba(243,200,92,.35)) drop-shadow(0 0 120px rgba(243,200,92,.15)); animation: float 8s ease-in-out infinite; }
@keyframes float { 50% { transform: translateY(-14px); } }
.moon-sky .stars { position: absolute; inset: 0; pointer-events: none; }
.name-grid { display: grid; grid-template-columns: 1.1fr .9fr; gap: 3rem; align-items: center; position: relative; z-index: 2; }
.name-grid .big { font-family: var(--font-display); font-size: clamp(5rem, 14vw, 11rem); line-height: 1; color: var(--night-ink); opacity: .9; letter-spacing: .05em; }
.name-grid .big small { display: block; font-size: 1rem; letter-spacing: .3em; color: var(--night-dim); margin-top: .6rem; }
@media (max-width: 860px) { .name-grid { grid-template-columns: 1fr; } .moon-sky .moon { width: 120px; right: 8%; top: auto; bottom: 6%; } .name-grid .big { font-size: 5rem; position: relative; } }

/* steps */
.steps { display: grid; grid-template-columns: repeat(4, 1fr); gap: 1.2rem; }
@media (max-width: 1100px) { .steps { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 560px) { .steps { grid-template-columns: 1fr; } }
.step { background: #fff; border: 1px solid var(--line); border-radius: 20px; overflow: hidden; display: flex; flex-direction: column; min-width: 0; transition: transform .3s var(--ease-out), box-shadow .3s; color: var(--ink); }
.step:hover { transform: translateY(-6px); box-shadow: 0 24px 40px -24px rgba(26,26,38,.35); }
.step img { aspect-ratio: 4 / 3; object-fit: cover; width: 100%; }
.step .body { padding: 1.1rem 1.2rem 1.3rem; display: flex; flex-direction: column; gap: .4rem; }
.step .n { font-family: var(--font-display); color: var(--seal); font-size: 1rem; }
.step h4, .h4 { font-size: 1.25rem; }
.h3 { font-size: 1.6rem; }
.step p { color: var(--ink-dim); font-size: .95rem; }
.step .t { margin-top: auto; padding-top: .6rem; font-size: .85rem; color: var(--ink-dim); font-variant-numeric: tabular-nums; }

/* chips + lists */
.chips { display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); gap: .7rem; }
.chip { background: #fff; border: 1px solid var(--line); border-radius: 14px; padding: .9rem 1rem; display: flex; align-items: baseline; justify-content: space-between; gap: .8rem; color: var(--ink); transition: transform .25s var(--ease-out), box-shadow .25s; }
.chip:hover { transform: translateY(-3px); box-shadow: 0 14px 28px -16px rgba(26,26,38,.35); }
.chip b { font-weight: 600; font-variant-numeric: tabular-nums; color: var(--cobalt); }
.list .li { display: flex; align-items: baseline; gap: 1rem; padding: .75rem .4rem; border-bottom: 1px solid var(--line); transition: background .25s, padding-left .25s var(--ease-out); border-radius: 8px; }
.list .li:hover { background: #fff; padding-left: .9rem; }
.list .li span { flex: 1; }
.list .li small { display: block; color: var(--ink-dim); }
.list .li .price { font-variant-numeric: tabular-nums; color: var(--ink-dim); min-width: 3.6em; text-align: right; flex: 0 0 auto; }
.list h4 { margin: 1.6rem 0 .3rem; }
.list h4:first-child { margin-top: 0; }
.teas { display: grid; grid-template-columns: minmax(260px, 2fr) 3fr; gap: 2.5rem; align-items: start; }
.groups { display: grid; grid-template-columns: 1fr 1fr; gap: 1.2rem 2.5rem; align-content: start; }
.groups .group h4 { margin: 0 0 .2rem; }
.groups .note { grid-column: 1 / -1; font-size: .95rem; margin-top: .4rem; }
.tilt { border-radius: 20px; overflow: hidden; transform-style: preserve-3d; transition: transform .25s var(--ease-out), box-shadow .25s; will-change: transform; aspect-ratio: 1; }
.tilt img { width: 100%; height: 100%; object-fit: cover; }
.tilt:hover { box-shadow: 0 30px 50px -20px rgba(26,26,38,.35); }
.notice { background: #fff; border: 1px solid var(--line); border-radius: 16px; padding: 1.3rem 1.4rem; font-size: .92rem; color: var(--ink-dim); display: grid; gap: .6rem; }
.notice b { color: var(--ink); }
@media (max-width: 760px) { .teas { grid-template-columns: 1fr; gap: 1.4rem; } .groups { grid-template-columns: 1fr; } .tilt { aspect-ratio: 4 / 3; } .chips { grid-template-columns: 1fr 1fr; } }

/* splash image block */
.splash img { width: 100%; height: auto; border-radius: 24px; }

/* guide */
.guide { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1.5rem; }
.gcard { border: 1px solid var(--card-line); border-radius: 20px; padding: 1.6rem; background: var(--card); display: flex; flex-direction: column; gap: .8rem; }
.gcard h3 { font-size: 1.4rem; }
.gcard ol, .gcard ul { margin: 0; padding-left: 1.2rem; color: var(--fg-dim); display: grid; gap: .4rem; }
.picker { display: grid; gap: .5rem; }
.picker a { display: flex; justify-content: space-between; align-items: center; text-decoration: none; padding: .7rem .9rem; border-radius: 12px; border: 1px solid var(--card-line); transition: background .2s, transform .2s var(--ease-out); }
.picker a:hover { background: var(--paper); transform: translateX(4px); }
.picker a b { font-weight: 600; }
.picker a span { color: var(--accent); font-size: .9rem; }
@media (max-width: 860px) { .guide { grid-template-columns: 1fr; } }

/* instagram grid */
.ig { display: grid; grid-template-columns: repeat(6, 1fr); gap: .6rem; }
.ig a { position: relative; display: block; aspect-ratio: 1; overflow: hidden; border-radius: 10px; }
.ig img { width: 100%; height: 100%; object-fit: cover; transition: transform .8s var(--ease-out); }
.ig a:hover img { transform: scale(1.08); }
.ig a::after { content: "@tsukimiramen"; position: absolute; inset: 0; display: grid; place-items: center; background: rgba(10,15,38,.55); color: #fff; font-weight: 600; font-size: .9rem; opacity: 0; transition: opacity .3s; }
.ig a:hover::after { opacity: 1; }
@media (max-width: 760px) { .ig { grid-template-columns: repeat(3, 1fr); } }

/* reviews / rating */
.rating { display: grid; grid-template-columns: auto 1fr; gap: 2rem; align-items: center; border: 1px solid var(--card-line); border-radius: 20px; padding: 2rem; background: var(--card); }
.rating .num { font-family: var(--font-display); font-size: 4.5rem; line-height: 1; color: var(--gold); }
.rating .stars { color: var(--gold); letter-spacing: .1em; font-size: 1.1rem; }
.rating p { color: var(--fg-dim); margin-top: .4rem; }
.rating .acts { display: flex; gap: .7rem; flex-wrap: wrap; margin-top: 1rem; }
@media (max-width: 600px) { .rating { grid-template-columns: 1fr; gap: 1rem; } }

/* cta band */
.cta-band { background: var(--cobalt); color: #fff; }
.cta-band .wrap { padding-block: 4rem; display: flex; align-items: center; justify-content: space-between; gap: 2rem; flex-wrap: wrap; }
.cta-band p { color: rgba(255,255,255,.75); margin-top: .5rem; }
.cta-band .btn-ghost { background: rgba(255,255,255,.1); color: #fff; border-color: rgba(255,255,255,.35); }
.cta-band .btn-ghost:hover { background: rgba(255,255,255,.2); }
.cta-band .btn-paper { background: var(--paper); color: var(--cobalt); }
.cta-band .btn-paper:hover { background: #fff; }

/* visit */
.visit-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 2.5rem; align-items: start; }
.hours { width: 100%; border-collapse: collapse; font-variant-numeric: tabular-nums; }
.hours td { padding: .5rem 0; border-bottom: 1px solid var(--line); }
.hours td:last-child { text-align: right; color: var(--ink-dim); }
.hours tr.today td { color: var(--cobalt); font-weight: 600; }
.hours tr.today td:first-child::before { content: ""; display: inline-block; width: 8px; height: 8px; border-radius: 50%; background: currentColor; margin-right: .6rem; }
.map { border-radius: 20px; overflow: hidden; border: 1px solid var(--line); aspect-ratio: 4 / 3; background: var(--paper-2); }
.map iframe { width: 100%; height: 100%; border: 0; display: block; }
address { font-style: normal; line-height: 1.6; }
.contact-lines { display: grid; gap: .4rem; margin-top: 1rem; }
.contact-lines a { text-decoration: none; display: inline-block; padding: .5rem 0; }
.form { display: grid; gap: .8rem; }
.form label { display: grid; gap: .35rem; font-size: .92rem; color: var(--ink-dim); }
.form input, .form textarea { font: inherit; font-size: 1rem; padding: .75rem .9rem; border-radius: 12px; border: 1px solid var(--line); background: #fff; color: var(--ink); width: 100%; }
.form textarea { min-height: 120px; resize: vertical; }
.form .fine { font-size: .82rem; color: var(--ink-dim); }
.form .ok { display: none; background: #fff; border: 1px solid var(--line); border-radius: 12px; padding: .9rem 1rem; }
.form.sent .ok { display: block; }
.form.sent .fields { display: none; }
.socials { display: flex; gap: 1rem; flex-wrap: wrap; }
.socials a { text-decoration: none; border: 1px solid var(--line); border-radius: 999px; padding: .5rem 1rem; font-size: .95rem; transition: background .2s; }
.socials a:hover { background: #fff; }
@media (max-width: 860px) { .visit-grid { grid-template-columns: 1fr; } }

/* visit strip */
.strip { background: var(--night); color: var(--night-ink); border-top: 1px solid var(--night-line); }
.strip .wrap { padding-block: 3.5rem; display: grid; grid-template-columns: 1.2fr 1fr 1fr; gap: 2rem; align-items: start; }
.strip h3 { margin-bottom: .6rem; }
.strip p { color: var(--night-dim); }
.strip a { text-decoration: none; }
@media (max-width: 860px) { .strip .wrap { grid-template-columns: 1fr; gap: 1.6rem; } }

/* footer */
footer { background: #070B1C; color: var(--night-dim); border-top: 1px solid var(--night-line); }
footer .wrap { padding-block: 2.5rem; display: flex; flex-wrap: wrap; gap: 1.5rem 3rem; align-items: center; justify-content: space-between; font-size: .92rem; }
footer img { height: 34px; width: auto; }
footer nav { display: flex; gap: 1.2rem; flex-wrap: wrap; }
footer nav a { text-decoration: none; display: inline-block; padding: .6rem .3rem; min-width: 44px; }
footer nav a:hover { color: var(--night-ink); }

/* sticky phone bar */
.phone-bar { display: none; }
@media (max-width: 760px) {
  .phone-bar { display: flex; position: fixed; left: 0; right: 0; bottom: 0; z-index: 8; padding: .7rem var(--gutter-r) calc(.7rem + env(safe-area-inset-bottom, 0px)) var(--gutter-l); background: rgba(247,241,230,.92); backdrop-filter: blur(14px); border-top: 1px solid var(--line); align-items: center; gap: .8rem; color: var(--ink); }
  .phone-bar .st { flex: 1; font-size: .9rem; color: var(--ink-dim); line-height: 1.3; min-width: 0; }
  .phone-bar .st b { display: block; color: var(--ink); }
  .phone-bar .btn { padding: .7rem .9rem; white-space: nowrap; }
  .phone-bar .st { font-size: .85rem; }
  body { padding-bottom: 84px; }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .hero .hero-still { clip-path: none; transition: none; }
  .hero .hero-still .sharp { transition: none; transform: none; }
  .reveal { opacity: 1; transform: none; transition: none; }
  .hero h1 .w span { animation: none; transform: none; }
  .ticker .track, .pot .steam i, .scroll-cue i, .status i, .hint::before, .moon-sky .moon { animation: none; }
  .flip .inner, .tilt, .btn, .pot img, .step, .chip, .ig img { transition: none; }
  .stage .bowl, .stage .top, .stage .top img, .stage .steam i { animation: none; opacity: 1; transform: rotate(var(--r, 0deg)); }
}

.visually-hidden { position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }

/* phone menu */
.menu-btn, .sheet { display: none; }
@media (max-width: 820px) {
  .menu-btn { display: inline-flex; flex-direction: column; justify-content: center; gap: 6px; margin-left: auto; width: 44px; height: 44px; padding: 0 10px; margin-right: -10px; background: none; border: 0; color: var(--ink); cursor: pointer; touch-action: manipulation; transition: transform .45s var(--ease-out); }
  .menu-btn i { display: block; height: 2px; background: currentColor; border-radius: 2px; transition: transform .3s var(--ease-out); }
  .top.open .menu-btn i:first-child { transform: translateY(4px) rotate(45deg); }
  .top.open .menu-btn i:last-child { transform: translateY(-4px) rotate(-45deg); }
  body.dark-head .top:not(.solid) .menu-btn { color: #fff; }
  body.has-hero .top:not(.solid) .menu-btn { transform: translateY(13px); }
  .sheet:not([hidden]) { display: block; background: var(--paper); border-top: 1px solid var(--line); box-shadow: 0 24px 40px -24px rgba(26,26,38,.4); }
  .sheet .wrap { display: grid; padding-block: .4rem 1.4rem; }
  .top .sheet a::after { display: none; }
  .top .sheet a:not(.btn) { text-align: left; min-width: 0; display: block; padding: .85rem 0; font-family: var(--font-display); font-size: 1.45rem; color: var(--ink); text-decoration: none; border-bottom: 1px solid var(--line); }
  .top .sheet a.here { color: var(--cobalt); }
  .top .sheet .btn { margin-top: 1.2rem; justify-content: center; color: #fff; padding: .95rem 1.2rem; font-size: 1.05rem; }
}
@media (prefers-reduced-motion: reduce) { .menu-btn, .menu-btn i { transition: none; } }

/* big screens: give the hero more room so the headline keeps three lines */
@media (min-width: 1600px) { .hero .wrap.hero-grid { max-width: 1400px; } .hero h1 { font-size: 4.3rem; max-width: 7.6em; } }

/* Google reviews marquee */
.g-score { display: flex; align-items: center; gap: .8rem; }
.g-score b { font-family: var(--font-display); font-size: 3.4rem; line-height: 1; color: var(--ink); font-weight: 500; }
.g-score small { display: block; color: var(--ink-dim); font-size: .9rem; margin-top: .2rem; }
.rv-stars { color: #E2A821; letter-spacing: .12em; font-size: 1.05rem; }
.marquee { display: flex; overflow: hidden; gap: 1.25rem; margin-top: 2.2rem; padding-block: .6rem 1.4rem;
  -webkit-mask-image: linear-gradient(to right, transparent, #000 7%, #000 93%, transparent); mask-image: linear-gradient(to right, transparent, #000 7%, #000 93%, transparent); }
.marquee .track { display: flex; gap: 1.25rem; flex: 0 0 auto; animation: rv-scroll 70s linear infinite; }
.marquee:hover .track, .marquee:focus-within .track { animation-play-state: paused; }
@keyframes rv-scroll { to { transform: translateX(calc(-100% - 1.25rem)); } }
.rv { width: 340px; flex: 0 0 auto; margin: 0; background: #fff; border: 1px solid var(--line); border-radius: 18px; padding: 1.4rem 1.4rem 1.2rem; display: flex; flex-direction: column; gap: .8rem; box-shadow: 0 14px 30px -22px rgba(26,26,38,.35); }
.rv blockquote { margin: 0; color: var(--ink); font-size: 1.02rem; line-height: 1.55; flex: 1; }
.rv blockquote::before { content: "\201C"; } .rv blockquote::after { content: "\201D"; }
.rv figcaption { display: flex; justify-content: space-between; align-items: center; gap: 1rem; font-size: .92rem; }
.rv figcaption b { color: var(--ink); font-weight: 600; }
.rv figcaption span { color: var(--ink-dim); }
.rv-acts { display: flex; gap: .7rem; flex-wrap: wrap; justify-content: center; margin-top: 1.2rem; }
@media (max-width: 600px) { .rv { width: 280px; padding: 1.2rem; } .g-score b { font-size: 2.6rem; } }
@media (prefers-reduced-motion: reduce) {
  .marquee { flex-wrap: wrap; justify-content: center; -webkit-mask-image: none; mask-image: none; }
  .marquee .track { animation: none; flex-wrap: wrap; justify-content: center; }
  .marquee .track[aria-hidden] { display: none; }
  .marquee .rv:nth-child(n+4) { display: none; }
}
.g-logo { width: 1.1em; height: 1.1em; flex: 0 0 auto; }
.g-score .g-logo { width: 2.6rem; height: 2.6rem; margin-right: .2rem; }
.rv .g-src { display: inline-flex; align-items: center; gap: .4rem; color: var(--ink-dim); }
@media (max-width: 600px) { .g-score .g-logo { width: 2rem; height: 2rem; } }

/* Menu page: ramen as bowl tiles with full details */
.mtiles.hide { display: none; }
.mtiles { margin-bottom: 2.4rem; }
.mtile { scroll-margin-top: 170px; }
.mtile .jp { display: block; font-family: var(--font-body); font-size: .74rem; color: var(--ink-dim); letter-spacing: .08em; margin-top: .25rem; }
.mtile .tile-body p { min-height: 0; line-height: 1.5; }
.mtags { list-style: none; margin: .9rem 0 0; padding: .8rem 0 0; border-top: 1px solid var(--line); display: grid; gap: .25rem; font-size: .82rem; color: var(--ink-dim); }
/* filter bar on the Menu page: one full-width band, not a floating box */
#menu-grid .chipbar { background: rgba(247,241,230,.94); box-shadow: 0 0 0 100vmax rgba(247,241,230,.94); clip-path: inset(0 -100vmax); }
#menu-grid .wrap { position: relative; z-index: 2; }
#menu-grid.toplist { overflow: visible; }
.mtile { scroll-margin-top: 236px; }
@media (max-width: 600px) { .mtile { scroll-margin-top: 280px; } }
.glist { scroll-margin-top: 170px; }
@media (max-width: 600px) { .glist { scroll-margin-top: 220px; } }

/* Menu page: extras and drinks on a dark board (gold prices, dotted leaders) */
.mboard { position: relative; background: var(--night); color: var(--night-ink); border-radius: 26px; padding: 2.4rem 2.4rem 2rem; display: grid; grid-template-columns: repeat(4, 1fr); gap: 2rem 2.6rem; overflow: hidden; box-shadow: 0 30px 60px -36px rgba(10,15,38,.6); }
.mboard::before { content: "献立"; position: absolute; right: 1.5rem; bottom: -1.5rem; font-family: var(--font-display); font-size: 9rem; line-height: 1; color: #fff; opacity: .04; pointer-events: none; }
.mcol { min-width: 0; position: relative; scroll-margin-top: 170px; }
.mcol h3 { font-size: 1.45rem; color: var(--moon); margin-bottom: .5rem; padding-bottom: .5rem; border-bottom: 1px solid var(--night-line); }
.mcol ul { list-style: none; margin: 0; padding: 0; }
.mcol li { padding: .5rem 0; }
.mcol .ln { display: flex; align-items: baseline; gap: .55rem; }
.mcol .ln span { flex: 0 1 auto; min-width: 0; }
.mcol .ln i { flex: 1; border-bottom: 1px dotted rgba(244,239,228,.3); transform: translateY(-.25em); min-width: .8rem; }
.mcol .ln b { font-family: var(--font-display); font-size: 1.1rem; color: var(--moon); font-variant-numeric: tabular-nums; white-space: nowrap; font-weight: 500; }
.mcol small { display: block; color: var(--night-dim); font-size: .84rem; margin-top: .15rem; }
@media (max-width: 1499px) { .mboard { grid-template-columns: 1fr 1fr; gap: 2.2rem 3.4rem; } }
@media (max-width: 600px) { .mboard { grid-template-columns: 1fr; padding: 1.6rem 1.3rem 1.4rem; border-radius: 20px; gap: 1.6rem; } .mcol { scroll-margin-top: 220px; } }

/* press line under the facts row */
.press { display: flex; align-items: center; gap: .6rem 1.6rem; flex-wrap: wrap; padding-block: 0 1.3rem; color: var(--ink-dim); font-size: .9rem; }
.press span { letter-spacing: .02em; }
.press a { font-family: var(--font-display); font-size: 1.12rem; color: var(--ink); text-decoration: none; border-bottom: 1px solid var(--line); padding-block: .75rem .3rem; min-height: 44px; display: inline-flex; align-items: flex-end; }
.press a:hover { color: var(--cobalt); border-color: var(--cobalt); }
/* good to know row and storefront in the visit band */
.cta-band .good { list-style: none; margin: 1.2rem 0 0; padding: 0; display: flex; flex-wrap: wrap; gap: .5rem 1.4rem; }
.cta-band .good li { display: flex; align-items: center; gap: .5rem; color: #fff; font-weight: 500; font-size: .98rem; }
.cta-band .good .ico { width: 1.25rem; height: 1.25rem; display: inline-flex; color: rgba(255,255,255,.85); }
.cta-band .good .ico svg { width: 100%; height: 100%; }
.cta-band .storefront { width: 260px; aspect-ratio: 4 / 3; object-fit: cover; border-radius: 18px; flex: 0 0 auto; }
.cta-copy { flex: 1 1 22rem; min-width: 0; }
@media (max-width: 700px) { .cta-band .storefront { width: 100%; } }

/* Home: the five milk teas in a row */
.teas-row { display: grid; grid-template-columns: repeat(5, 1fr); gap: 1rem; margin-top: 3rem; }
.tea { display: flex; flex-direction: column; align-items: center; gap: .6rem; text-decoration: none; color: var(--ink); text-align: center; }
.tea img { width: 100%; max-width: 220px; aspect-ratio: 4 / 5; object-fit: cover; border-radius: 18px; transition: transform .45s var(--ease-out); }
.tea:hover img { transform: translateY(-6px); }
.tea span { font-family: var(--font-display); font-size: 1.05rem; line-height: 1.3; max-width: 12em; }
@media (max-width: 900px) { .teas-row { grid-template-columns: repeat(3, 1fr); row-gap: 1.6rem; } }
@media (max-width: 560px) { .teas-row { display: flex; flex-wrap: wrap; justify-content: center; gap: 1.4rem .9rem; } .tea { width: calc(50% - .5rem); } }

/* Menu: milk tea cups between the bowls and the board */
.mteas { margin: 0 0 2.6rem; scroll-margin-top: 170px; }
.mteas .tea b { font-family: var(--font-display); font-weight: 500; font-size: 1.15rem; color: var(--ink); margin-top: -.2rem; }
@media (max-width: 600px) { .mteas { scroll-margin-top: 220px; } }

/* ===== Phone and tablet translations of the laptop design (approved Oct 31) ===== */

/* 2. Menu bowl cards: two across on phones so the four read as one set */
@media (max-width: 560px) {
  .mtiles { grid-template-columns: 1fr 1fr; gap: 3.4rem .7rem; padding-top: 3.4rem; }
  .mtile { padding: 4.6rem .8rem .9rem; border-radius: 18px; }
  .mtile .tile-bowl { top: -3rem; width: 96%; max-width: 170px; }
  .mtile .tile-body h3 { font-size: 1.15rem; }
  .mtile .jp { font-size: .62rem; letter-spacing: .04em; }
  .mtile .tile-body p { font-size: .78rem; line-height: 1.45; }
  .mtile .tile-row { margin-top: .6rem; flex-wrap: wrap; gap: .2rem .5rem; }
  .mtile .tile-row .price { font-size: 1.1rem; }
  .mtile .heat { font-size: .78rem; }
  .mtags { font-size: .72rem; padding-top: .55rem; margin-top: .6rem; }
}

/* 3. Milk tea cups: five in a row on tablets, three over two on phones */
@media (max-width: 900px) and (min-width: 701px) { .teas-row { grid-template-columns: repeat(5, 1fr); gap: .7rem; } .tea span { font-size: .9rem; } }
@media (max-width: 700px) {
  .teas-row { display: flex; flex-wrap: wrap; justify-content: center; gap: 1.2rem .6rem; }
  .tea { width: calc((100% - 1.2rem) / 3); }
  .tea img { border-radius: 14px; }
  .tea span { font-size: .8rem; line-height: 1.25; }
  .mteas .tea b { font-size: .95rem; }
}

/* 4. Four steps: 2 by 2 on phones */
@media (max-width: 560px) {
  .steps { grid-template-columns: 1fr 1fr; gap: .7rem; }
  .step { border-radius: 16px; }
  .step .body { padding: .75rem .8rem .9rem; gap: .25rem; }
  .step .n { font-size: .8rem; }
  .step h3, .step .h4 { font-size: 1rem; line-height: 1.25; }
  .step p { font-size: .76rem; line-height: 1.45; }
  .step .t { font-size: .72rem; padding-top: .35rem; }
}

/* 5. Spread photo: on phones the headline sits below the photo, never on the food */
@media (max-width: 760px) {
  .spread figure { background: var(--night); }
  .spread figcaption { position: static; background: none; padding: 1.2rem 1.2rem 1.4rem; }
}

/* 6. Moon section: the big kanji and its caption fit the phone width */
@media (max-width: 560px) {
  .name-grid .big { font-size: 4.2rem; }
  .name-grid .big small { font-size: .7rem; letter-spacing: .18em; white-space: normal; }
}

/* 7. Facts row: 2 by 2 on phones, press line on one row */
@media (max-width: 560px) {
  .facts-row { grid-template-columns: 1fr 1fr; gap: .9rem .7rem; padding-block: 1.1rem; }
  .fact { gap: .55rem; align-items: flex-start; }
  .fact .ico { width: 32px; height: 32px; border-radius: 10px; }
  .fact .ico svg { width: 18px; height: 18px; }
  .fact b { font-size: .88rem; }
  .fact span:not(.ico) { font-size: .76rem; line-height: 1.3; display: block; }
  .press { flex-wrap: nowrap; gap: .9rem; font-size: .76rem; padding-bottom: .9rem; }
  .press a { font-size: .92rem; white-space: nowrap; }
}
@media (max-width: 380px) { .press span { display: none; } }
.press span { white-space: nowrap; }

/* Menu chips on phones: one segmented bar, always one line */
@media (max-width: 700px) {
  #menu-grid .chipbar { flex-wrap: nowrap; gap: 0; padding: .55rem 0; margin-bottom: 1.2rem; }
  #menu-grid .chipbar .chip-btn { flex: 1 1 0; min-width: 0; justify-content: center; text-align: center; white-space: nowrap; min-height: 44px; padding: 0 .2rem; font-size: clamp(.74rem, 3.4vw, .95rem); border-radius: 0; border-left-width: 0; }
  #menu-grid .chipbar .chip-btn:first-child { border-left-width: 1px; border-radius: 999px 0 0 999px; }
  #menu-grid .chipbar .chip-btn:last-child { border-radius: 0 999px 999px 0; }
  /* landing spots under the shorter bar: header 64 + bar about 56 + breathing room */
  .mtile { scroll-margin-top: 190px; }
  .mteas, .mcol, .glist { scroll-margin-top: 140px; }
}

/* Spread: room above the photo, caption on the section's own navy on phones */
.spread .wrap { padding-block: 4rem 5rem; }
@media (max-width: 760px) {
  .spread .wrap { padding-block: 2.6rem 3rem; }
  .spread figure { background: none; border-radius: 18px; overflow: visible; }
  .spread figure img { border-radius: 18px; }
  .spread figcaption { padding: 1.2rem 0 0; }
}

/* Contact block: three tappable rows (TruHint pattern) */
.strip .wrap { display: block; padding-block: 3.2rem 3rem; }
.strip-h { font-size: clamp(1.6rem, 3vw, 2.2rem); margin-bottom: 1.4rem; }
.crows { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1rem; }
.crow { display: flex; align-items: center; gap: .9rem; padding: 1rem 1.1rem; border-radius: 16px; background: rgba(255,255,255,.05); border: 1px solid var(--night-line); color: var(--night-ink); text-decoration: none; min-width: 0; transition: background .2s; }
.crow:hover { background: rgba(255,255,255,.09); }
.crow .ico { width: 40px; height: 40px; border-radius: 12px; background: rgba(243,200,92,.12); color: var(--moon); display: grid; place-items: center; flex: 0 0 auto; }
.crow .ico svg { width: 20px; height: 20px; }
.crow .ct { display: flex; flex-direction: column; min-width: 0; flex: 1; }
.crow b { font-weight: 600; font-size: 1.02rem; }
.crow small { color: var(--night-dim); font-size: .86rem; line-height: 1.35; }
.crow .go { width: 18px; height: 18px; color: var(--night-dim); flex: 0 0 auto; }
.crow .go svg { width: 100%; height: 100%; }
@media (max-width: 900px) { .crows { grid-template-columns: 1fr; gap: 0; border-top: 1px solid var(--night-line); }
  .crow { border: 0; border-bottom: 1px solid var(--night-line); border-radius: 0; background: none; padding: 1rem 0; } }

/* Footer: brand and tagline, socials, two link columns, legal line */
footer .wrap.foot-grid { display: grid; grid-template-columns: 1.6fr 1fr 1fr; gap: 2rem; align-items: start; padding-block: 2.8rem 1.6rem; font-size: .95rem; }
.foot-brand img { height: 40px; width: auto; }
.foot-brand p { margin-top: .8rem; color: var(--night-dim); max-width: 22em; }
.social { display: flex; gap: .5rem; flex-wrap: wrap; margin-top: 1rem; }
.social a { display: inline-flex; align-items: center; min-height: 44px; padding: 0 1rem; border-radius: 999px; border: 1px solid var(--night-line); color: var(--night-ink); text-decoration: none; font-size: .9rem; }
.social a:hover { background: rgba(255,255,255,.08); }
.foot-col { display: flex; flex-direction: column; }
.foot-col h3 { font-size: 1.05rem; color: var(--moon); margin-bottom: .3rem; }
.foot-col a { color: var(--night-dim); text-decoration: none; padding: .55rem 0; min-height: 44px; display: flex; align-items: center; }
.foot-col a:hover { color: var(--night-ink); }
footer .wrap.foot-legal { display: block; border-top: 1px solid var(--night-line); padding-block: 1.2rem 1.6rem; font-size: .82rem; color: var(--night-dim); }
@media (max-width: 700px) {
  footer .wrap.foot-grid { grid-template-columns: 1fr 1fr; gap: 1.6rem 1rem; padding-block: 2.2rem 1.2rem; }
  .foot-brand { grid-column: 1 / -1; }
  footer .wrap.foot-legal { text-align: center; padding-bottom: 1.4rem; }
}
.foot-col { gap: 0; }
footer .wrap.foot-legal { border-top: 0; padding-top: 0; }
.foot-legal span { display: block; border-top: 1px solid var(--night-line); padding-top: 1.2rem; }

/* ===== Phone and tablet hero: the portrait painting, bowls riding the curve (approved Oct 31) ===== */
@media (max-width: 900px) {
  .hero { background: var(--paper); }
  .hero-copy { position: relative; z-index: 2; }
  .hero .status { margin-bottom: 0; }
  .stage {
    position: relative; display: block; border-radius: 0; padding: 0;
    height: var(--art-h, 860px);
    margin: var(--art-pull, -170px) calc(-1 * var(--gutter-r)) 0 calc(-1 * var(--gutter-l));
    background: url(../img/hero-portrait-800.webp) center var(--art-y, top) / cover no-repeat;
    -webkit-mask-image: linear-gradient(to bottom, transparent 0, #000 140px); mask-image: linear-gradient(to bottom, transparent 0, #000 140px);
  }
  .stage .dish { position: absolute; left: var(--px); top: var(--py); width: var(--dw, 44%); flex-direction: column; align-items: flex-start; gap: .25rem; }
  .stage .dish img { width: 100%; max-width: none; }
  .stage .dish .lbl { width: auto; padding-left: .4rem; }
  .stage .dish .lbl b { font-size: 1.2rem; }
  /* zigzag down the navy, right column lower, like the curve on the laptop */
  .stage .dish:nth-child(1) { --px: 4%;  --py: 49%; }
  .stage .dish:nth-child(2) { --px: 52%; --py: 55%; }
  .stage .dish:nth-child(3) { --px: 4%;  --py: 71%; }
  .stage .dish:nth-child(4) { --px: 52%; --py: 77%; }
}
@media (max-width: 900px) and (min-width: 701px) {
  .stage { --art-h: 1100px; --art-pull: -200px; --art-y: 50%; background-image: url(../img/hero-portrait-1200.webp); }
  .stage .dish { --dw: 30%; }
  .stage .dish:nth-child(1) { --px: 10%; --py: 50%; }
  .stage .dish:nth-child(2) { --px: 58%; --py: 55%; }
  .stage .dish:nth-child(3) { --px: 10%; --py: 72%; }
  .stage .dish:nth-child(4) { --px: 58%; --py: 77%; }
  .stage .dish .lbl b { font-size: 1.45rem; }
}
@media (max-width: 900px) {
  .hero .wrap.hero-grid { display: block; }
  .stage { --art-pull: -250px; width: auto; }
}
@media (max-width: 900px) and (min-width: 701px) {
  .stage { --art-pull: -230px; }
  .hero h1 { font-size: 3.2rem; }
  .hero p.lead { font-size: 1.1rem; max-width: 30em; }
}
@media (max-width: 900px) { .stage .dish { width: min(var(--dw, 44%), 172px); } }
@media (max-width: 900px) and (min-width: 701px) { .stage .dish { width: min(30%, 228px); } }
/* Phone and tablet hero: button and open status share one row */
@media (max-width: 900px) {
  .hero .cta { display: inline-flex; vertical-align: middle; margin-top: 1.3rem; }
  .hero .status { display: inline-flex; align-items: center; vertical-align: middle; margin: 1.3rem 0 0 1rem; max-width: calc(100% - 11rem); line-height: 1.3; }
  .stage { --art-pull: -235px; }
}
@media (max-width: 900px) and (min-width: 701px) { .stage { --art-pull: -215px; } }
@media (max-width: 900px) { .hero .status { max-width: none; white-space: nowrap; } }
@media (max-width: 380px) {
  .hero .cta .btn { padding-inline: 1.1rem; font-size: .95rem; }
  .hero .status { margin-left: .75rem; font-size: .84rem; }
}
.press { align-items: baseline; }

/* Phones and tablets: once scrolled, the header floats as a rounded card (truhint.com pattern) */
@media (max-width: 900px) {
  .top { transition: top .3s var(--ease-out), left .3s var(--ease-out), right .3s var(--ease-out), border-radius .3s var(--ease-out), background .35s, box-shadow .35s; }
  .top.solid { top: 10px; left: max(10px, env(safe-area-inset-left, 0px)); right: max(10px, env(safe-area-inset-right, 0px)); border-radius: 22px; overflow: hidden; border: 1px solid var(--line); box-shadow: 0 12px 30px -18px rgba(26,26,38,.4); }
  .top.solid .wrap { padding-left: 14px; padding-right: 14px; }
  .top.solid .sheet .wrap { padding-left: 16px; padding-right: 16px; }
  #menu-grid .chipbar { top: 84px; }
  #menu-grid .chipbar { box-shadow: 0 0 0 100vmax rgba(247,241,230,.94); }
}
@media (prefers-reduced-motion: reduce) { .top { transition: none; } }

/* Phone bar: three floating buttons, no band behind them */
@media (max-width: 900px) {
  .phone-bar { background: none; border: 0; -webkit-backdrop-filter: none; backdrop-filter: none; box-shadow: none; gap: .5rem; align-items: center;
    padding: 0 max(12px, env(safe-area-inset-right, 0px)) calc(12px + env(safe-area-inset-bottom, 0px)) max(12px, env(safe-area-inset-left, 0px)); pointer-events: none; }
  .phone-bar > * { pointer-events: auto; box-shadow: 0 10px 26px -10px rgba(10,15,38,.5); }
  .phone-bar .pill { margin-right: auto; display: inline-flex; align-items: center; gap: .5rem; min-height: 46px; padding: 0 1rem; border-radius: 999px; background: rgba(255,255,255,.96); border: 1px solid var(--line); color: var(--ink); font-size: .86rem; white-space: nowrap; text-decoration: none; margin-top: 0; }
  .phone-bar .pill b { font-weight: 600; }
  .phone-bar .btn { min-height: 46px; padding: 0 1.1rem; }
  .phone-bar .btn-ghost { background: #fff; color: var(--ink); border-color: var(--line); }
}
@media (max-width: 370px) { .phone-bar .pill { padding: 0 .8rem; font-size: .8rem; } .phone-bar .btn { padding: 0 .9rem; } }
@media (max-width: 900px) { #menu-grid .chipbar { top: 76px; padding-top: 1rem; padding-bottom: .6rem; } }

/* Drifting toppings on the phone and tablet hero (approved Oct 31): bob along the curve, one lifts into the cream every 3 s */
.drift { display: none; }
@media (max-width: 900px) {
  .stage .drift { display: block; position: absolute; left: var(--x); top: var(--y); width: var(--w, 30px); z-index: 1; pointer-events: none;
    animation: drift-lift 18s cubic-bezier(.45,0,.25,1) infinite; animation-delay: var(--ld, 0s); }
  .stage .drift .bob { display: block; animation: drift-bob var(--bt, 3.4s) ease-in-out infinite alternate; }
  .stage .drift img { width: 100%; height: auto; display: block; filter: drop-shadow(0 3px 3px rgba(10,15,38,.35)); }
  .stage .drift.ring i { display: block; width: 100%; aspect-ratio: 1.1; border-radius: 50%; border: 5px solid #5d9a2c; background: radial-gradient(circle, rgba(232,244,205,.95) 0 38%, rgba(160,200,90,.9) 39%); box-shadow: inset 0 0 0 1px rgba(255,255,255,.4), 0 3px 4px rgba(10,15,38,.3); }
  .stage .drift.drop i { display: block; width: 100%; aspect-ratio: 1; border-radius: 50%; background: radial-gradient(circle at 35% 30%, #ffd9a0 0 12%, #c8611a 35%, #6e2108 80%); box-shadow: 0 2px 4px rgba(10,15,38,.35); }
  /* phone: just above the stroke, left high, dipping in the middle */
  .stage .drift:nth-of-type(1) { --x: 6%;  --y: 30.5%; --w: 26px; --ld: 0s;   --dx: 14px;  --rot: 160deg; --bt: 3.1s; }
  .stage .drift:nth-of-type(2) { --x: 21%; --y: 33.5%; --w: 24px; --ld: -3s;  --dx: -10px; --rot: -120deg; --bt: 3.6s; }
  .stage .drift:nth-of-type(3) { --x: 36%; --y: 38.5%; --w: 14px; --ld: -6s;  --dx: 8px;   --rot: 90deg;  --bt: 2.8s; }
  .stage .drift:nth-of-type(4) { --x: 52%; --y: 40.5%; --w: 44px; --ld: -9s;  --dx: -12px; --rot: 70deg;  --bt: 3.9s; }
  .stage .drift:nth-of-type(5) { --x: 70%; --y: 42%;   --w: 26px; --ld: -12s; --dx: 10px;  --rot: -150deg; --bt: 3.3s; }
  .stage .drift:nth-of-type(6) { --x: 86%; --y: 38.5%; --w: 24px; --ld: -15s; --dx: -14px; --rot: 130deg; --bt: 3.7s; }
}
@media (max-width: 900px) and (min-width: 701px) {
  .stage .drift:nth-of-type(1) { --y: 24%; } .stage .drift:nth-of-type(2) { --y: 27.5%; } .stage .drift:nth-of-type(3) { --y: 33%; }
  .stage .drift:nth-of-type(4) { --y: 37%; } .stage .drift:nth-of-type(5) { --y: 38%; } .stage .drift:nth-of-type(6) { --y: 34%; }
}
@keyframes drift-bob { from { transform: translateY(0) rotate(-6deg); } to { transform: translateY(-5px) rotate(6deg); } }
@keyframes drift-lift {
  0%, 74% { transform: translate(0, 0) rotate(0); }
  81% { transform: translate(var(--dx, 0), var(--lh, -96px)) rotate(var(--rot, 90deg)); }
  86% { transform: translate(calc(var(--dx, 0) * 1.15), calc(var(--lh, -96px) * 1.06)) rotate(calc(var(--rot, 90deg) * 1.1)); }
  95% { transform: translate(0, 3px) rotate(0); }
  100% { transform: translate(0, 0) rotate(0); }
}
@media (prefers-reduced-motion: reduce) { .stage .drift, .stage .drift .bob { animation: none; } }
@media (max-width: 700px) { #tea .more { text-align: right; } }
/* the floating pill at the bottom already shows open or closed on phones */
@media (max-width: 760px) { .hero .status { display: none; } }
@media (max-width: 900px) {
  /* left side sits under the button: short hops drifting right; middle and right rise into the empty cream */
  .stage .drift:nth-of-type(1) { --lh: -38px; --dx: 26px; }
  .stage .drift:nth-of-type(2) { --lh: -48px; --dx: 22px; }
}
@media (max-width: 760px) {
  .stage .drift:nth-of-type(-n+3) { animation: none; }
  .stage .drift:nth-of-type(n+4) { animation-duration: 9s; }
  .stage .drift:nth-of-type(4) { --ld: 0s; } .stage .drift:nth-of-type(5) { --ld: -3s; } .stage .drift:nth-of-type(6) { --ld: -6s; }
}