/* ==========================================================================
   Ikura Sushi Bar · concept
   Tokens first; every size and colour below comes from here.
   Cherry-blossom pink base with a washi-paper grain; chapters sit on it as white
   or deeper-pink panels. Near-black type, orange only where the ikura pearl shows up.
   ========================================================================== */

:root {
  /* colour */
  --sakura: #fbeff1;          /* page base */
  --sakura-deep: #f5dde3;     /* alternate panels, footer */
  --paper: #ffffff;           /* main panels */
  --blossom: #f3b4c3;         /* petals */
  --blossom-ink: #c95a76;     /* petal edges, branch blossoms */
  --branch: #3a2a26;          /* sumi ink for branches and brushstrokes */
  --branch-wash: #6b4a3e;     /* watercolour branches: a warmer, lighter ink */
  --ink: #1f1a18;
  --ink-2: #554a46;           /* 7.9:1 on sakura, 7.1:1 on sakura-deep */
  --ink-3: #665954;           /* 6.1:1 on sakura, 5.4:1 on sakura-deep */
  --line: rgba(31, 26, 24, 0.12);
  --line-strong: rgba(31, 26, 24, 0.26);
  --accent: #e8551e;          /* ikura orange: dots, stars, pearls, focus */
  --accent-ink: #a93c0c;      /* orange for small text (5.2:1 on sakura-deep) */
  --on-ink: #ffffff;

  /* type */
  --font-display: "Shippori Mincho", "Hiragino Mincho ProN", "Times New Roman", serif;
  --font-jp-thin: "Noto Serif JP", "Hiragino Mincho ProN", serif;
  --font-text: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  --fs-hero: clamp(2.75rem, 5.6vw + 0.6rem, 6rem);     /* 44 → 96 */
  --fs-l: clamp(2.25rem, 3.4vw + 0.6rem, 3.75rem);     /* 36 → 60 */
  --fs-m: clamp(1.75rem, 2.2vw + 0.6rem, 2.75rem);     /* 28 → 44 */
  --fs-s: 1.5rem;
  --fs-body: 1.0625rem;
  --fs-small: 0.875rem;
  --fs-micro: 0.8125rem;

  /* space: 8px grid */
  --s1: 8px; --s2: 16px; --s3: 24px; --s4: 32px; --s5: 40px; --s6: 48px;
  --s8: 64px; --s10: 80px; --s12: 96px; --s16: 128px;
  --gutter: clamp(20px, 4vw, 48px);
  --max: 1200px;
  --chapter: clamp(72px, 9vw, 128px);     /* vertical padding inside every chapter */
  --tile-gap: clamp(8px, 1.4vw, 18px);    /* space around panels */
  --tile-radius: clamp(22px, 3vw, 36px);

  /* shape + motion */
  --radius: 10px;
  --ease-out: cubic-bezier(0.22, 1, 0.36, 1);
  --ease-in-out: cubic-bezier(0.65, 0, 0.35, 1);
  --t-fast: 160ms;
  --t-ui: 240ms;
  --nav-h: 72px;
  --jump-h: 60px;
  --shadow-card: 0 1px 2px rgba(74, 32, 40, 0.06), 0 22px 44px -28px rgba(74, 32, 40, 0.38);
}

/* ---------- noren: the split doorway curtain between the front page and the menu ----------
   Closed by js/noren.js on our own links (html.noren-out); parted by CSS alone on the next
   page (html.noren-in, set in the <head>), so it can never be left on screen. */
.noren { position: fixed; inset: 0; z-index: 300; display: flex; pointer-events: none; visibility: hidden; }
.noren__panel {
  position: relative; width: 50%; height: 100%; overflow: hidden;
  transform-origin: 50% 0;
  background:
    linear-gradient(180deg, #b9566f 0, #b9566f 10px, rgba(185, 86, 111, 0.35) 10px, rgba(185, 86, 111, 0) 26px),
    radial-gradient(60% 40% at 30% 70%, rgba(201, 90, 118, 0.14), transparent 70%),
    radial-gradient(50% 35% at 75% 25%, rgba(255, 255, 255, 0.35), transparent 70%),
    repeating-linear-gradient(90deg, rgba(255, 255, 255, 0) 0 46px, rgba(150, 50, 80, 0.06) 46px 70px, rgba(255, 255, 255, 0.12) 70px 92px),
    linear-gradient(180deg, #f6d2db, #efbfcc);
  box-shadow: inset 0 -1px 0 rgba(150, 50, 80, 0.2);
  will-change: transform;
}
.noren__panel--l { transform: translateX(-101%); }
.noren__panel--r { transform: translateX(101%); }
/* an ikura pearl split down the middle of the two panels */
.noren__mark {
  position: absolute; top: 50%; width: 112px; height: 112px; margin-top: -56px; border-radius: 50%;
  background: radial-gradient(circle at 36% 32%, #ffe1c8 0 7%, #f58a4a 22%, #e2551d 58%, #b63d12 100%);
  box-shadow: inset -6px -10px 18px rgba(120, 30, 0, 0.35);
}
.noren__panel--l .noren__mark { right: -56px; }
.noren__panel--r .noren__mark { left: -56px; }

.noren-out .noren { visibility: visible; pointer-events: auto; }
.noren-out .noren__panel--l { animation: noren-close-l 460ms cubic-bezier(0.22, 1, 0.36, 1) both; }
.noren-out .noren__panel--r { animation: noren-close-r 460ms cubic-bezier(0.22, 1, 0.36, 1) both; }
.noren-in .noren { visibility: visible; }
.noren-in .noren__panel--l { animation: noren-open-l 620ms 140ms cubic-bezier(0.65, 0, 0.35, 1) both; }
.noren-in .noren__panel--r { animation: noren-open-r 620ms 140ms cubic-bezier(0.65, 0, 0.35, 1) both; }

/* the bottom edge lags behind and swings a little, like hanging fabric */
@keyframes noren-close-l { 0% { transform: translateX(-101%) skewX(0); } 45% { transform: translateX(-28%) skewX(-4deg); } 80% { transform: translateX(0.5%) skewX(1.5deg); } 100% { transform: translateX(0) skewX(0); } }
@keyframes noren-close-r { 0% { transform: translateX(101%) skewX(0); } 45% { transform: translateX(28%) skewX(4deg); } 80% { transform: translateX(-0.5%) skewX(-1.5deg); } 100% { transform: translateX(0) skewX(0); } }
@keyframes noren-open-l { 0% { transform: translateX(0) skewX(0); } 35% { transform: translateX(-22%) skewX(3deg); } 100% { transform: translateX(-101%) skewX(0); } }
@keyframes noren-open-r { 0% { transform: translateX(0) skewX(0); } 35% { transform: translateX(22%) skewX(-3deg); } 100% { transform: translateX(101%) skewX(0); } }
@media (prefers-reduced-motion: reduce) { .noren { display: none; } }

/* petals that drift once through a container (photo viewer, phone menu) */
.drift-petal { position: absolute; left: 0; top: 0; width: 16px; height: 14px; pointer-events: none; mix-blend-mode: multiply; will-change: transform, opacity; }
.drift-petal svg { width: 100%; height: 100%; }

/* ---------- base ---------- */

*, *::before, *::after { box-sizing: border-box; }

html {
  -webkit-text-size-adjust: 100%;
  scroll-padding-top: calc(var(--nav-h) + var(--jump-h) + var(--s2));
  background: var(--sakura);
}
html:not(.lenis) { scroll-behavior: smooth; }
html.lenis, html.lenis body { height: auto; }
.lenis.lenis-stopped { overflow: hidden; }

body {
  margin: 0;
  color: var(--ink);
  background: var(--sakura);
  font-family: var(--font-text);
  font-size: var(--fs-body);
  line-height: 1.55;
  font-feature-settings: "cv11", "ss03";
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
  overflow-x: clip;
}

/* washi paper: a faint fibre grain over the whole page, painted once */
body::before {
  content: ""; position: fixed; inset: 0; z-index: 0; pointer-events: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='220' height='220'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9 0.35' numOctaves='3' seed='7'/%3E%3CfeColorMatrix values='0 0 0 0 0.45  0 0 0 0 0.25  0 0 0 0 0.3  0 0 0 0.09 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  background-size: 220px 220px;
}

img, svg, canvas { display: block; max-width: 100%; }
img { height: auto; }
a { color: inherit; text-decoration: none; }
button { font: inherit; color: inherit; background: none; border: 0; padding: 0; cursor: pointer; }
h1, h2, h3, p, ol, ul, dl, dd, figure { margin: 0; padding: 0; }
ol, ul { list-style: none; }
address { font-style: normal; }
table { border-collapse: collapse; }

::selection { background: var(--blossom); color: var(--ink); }

:focus { outline: none; }
:focus-visible { outline: 2px solid var(--accent); outline-offset: 4px; border-radius: 6px; }

.visually-hidden {
  position: absolute !important; width: 1px; height: 1px; overflow: hidden;
  clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap;
}

.skip-link {
  position: fixed; top: var(--s2); left: var(--s2); z-index: 200;
  padding: var(--s1) var(--s2); border-radius: 999px;
  background: var(--ink); color: var(--on-ink); font-weight: 500;
  transform: translateY(-200%);
  transition: transform var(--t-ui) var(--ease-out);
}
.skip-link:focus-visible { transform: none; }

.container {
  width: 100%;
  max-width: calc(var(--max) + var(--gutter) * 2);
  margin-inline: auto;
  padding-inline: var(--gutter);
}

.tnum, .price, .hours, .reviews__num, .cat__meta { font-variant-numeric: tabular-nums; }

main, .footer { position: relative; z-index: 1; }

/* ---------- type ---------- */

.display {
  font-family: var(--font-display);
  font-weight: 500;
  font-size: var(--fs-l);
  line-height: 1.05;
  letter-spacing: -0.03em;
  text-wrap: balance;
}
.display--m { font-size: var(--fs-m); line-height: 1.08; letter-spacing: -0.025em; }

.label { font-size: var(--fs-micro); font-weight: 500; color: var(--ink-3); margin-bottom: var(--s2); }

.lede {
  font-size: clamp(1.0625rem, 0.5vw + 0.95rem, 1.25rem);
  line-height: 1.5;
  color: var(--ink-2);
  max-width: 36ch;
  text-wrap: pretty;
}
p { text-wrap: pretty; }

/* masked word reveal: each word sits inside an overflow mask */
.split-word { display: inline-block; overflow: hidden; vertical-align: top; padding-bottom: 0.1em; margin-bottom: -0.1em; }
.split-word > span { display: inline-block; }

/* ---------- chapters ---------- */

.tile {
  position: relative;
  margin: var(--tile-gap);
  border-radius: var(--tile-radius);
  background: var(--paper);
}
.tile--deep { background: var(--sakura-deep); }

.chapter { position: relative; padding-block: var(--chapter); }

.chapter__head { margin-bottom: clamp(var(--s6), 6vw, var(--s10)); }
.chapter__no {
  display: block;
  font-family: var(--font-jp-thin); font-weight: 200;
  font-size: 1.75rem; line-height: 1;
  color: var(--blossom-ink);
  margin-bottom: var(--s2);
}
.chapter__head .display { max-width: 16ch; }
.chapter__head .lede { margin-top: var(--s2); }
/* a short sumi brushstroke under each chapter title */
.brush { width: 132px; height: 14px; margin-top: var(--s3); color: var(--branch); opacity: 0.85; }
.brush path { fill: currentColor; }

/* vertical Japanese label at the panel's edge, desktop only */
.vlabel {
  position: absolute; top: var(--chapter); right: clamp(14px, 2vw, 28px);
  writing-mode: vertical-rl;
  font-family: var(--font-jp-thin); font-weight: 200;
  font-size: 1.125rem; letter-spacing: 0.4em;
  color: var(--ink-3);
  pointer-events: none;
}

/* ---------- logo ---------- */

.logo { display: inline-flex; align-items: center; min-height: 44px; transform-origin: left center; transition: transform var(--t-ui) var(--ease-out); }
.logo img { width: auto; height: 46px; }
.logo--l img { height: 84px; }

/* ---------- buttons & links ---------- */

.pill {
  display: inline-flex; align-items: center; justify-content: center; gap: var(--s1);
  min-height: 44px;
  padding: 0 var(--s3);
  border-radius: 999px;
  font-size: var(--fs-small);
  font-weight: 500;
  white-space: nowrap;
  transition: background-color var(--t-fast) ease, box-shadow var(--t-fast) ease, color var(--t-fast) ease, transform var(--t-fast) var(--ease-out);
}
.pill:active { transform: scale(0.97); }
.pill--lg { min-height: 52px; padding: 0 var(--s4); font-size: 0.9375rem; }
.pill--accent { background: var(--ink); color: var(--on-ink); }
.pill--accent:hover { background: #3d3330; }
.pill--ghost { box-shadow: inset 0 0 0 1px var(--line-strong); color: var(--ink); background: rgba(255, 255, 255, 0.7); }
.pill--ghost:hover { box-shadow: inset 0 0 0 1px var(--ink); }
.pill svg, .link-arrow svg, .cat__all svg, .icon-btn svg, .map__cta svg, .info svg, .jump svg {
  width: 16px; height: 16px; flex: none; fill: none; stroke: currentColor; stroke-width: 1.4; stroke-linecap: round; stroke-linejoin: round;
}

.link-arrow {
  display: inline-flex; align-items: center; gap: var(--s1);
  min-height: 44px;
  font-size: var(--fs-small); font-weight: 500;
  background-image: linear-gradient(var(--accent), var(--accent));
  background-size: 0% 1px; background-repeat: no-repeat; background-position: 0 calc(50% + 0.8em);
  transition: background-size var(--t-ui) var(--ease-out);
}
.link-arrow svg { transition: transform var(--t-ui) var(--ease-out); }
.link-arrow:hover { background-size: calc(100% - 24px) 1px; }
.link-arrow:hover svg { transform: translateX(3px); }

.icon-btn {
  display: grid; place-items: center;
  width: 44px; height: 44px; border-radius: 50%;
  box-shadow: inset 0 0 0 1px var(--line-strong);
  background: rgba(255, 255, 255, 0.7);
  transition: box-shadow var(--t-fast) ease, transform var(--t-fast) var(--ease-out), opacity var(--t-fast) ease;
}
.icon-btn:hover { box-shadow: inset 0 0 0 1px var(--ink); }
.icon-btn:active { transform: scale(0.94); }
.icon-btn:disabled { opacity: 0.3; cursor: default; }

.discount {
  display: inline-flex; align-items: center; gap: 10px;
  padding: 8px 14px 8px 12px;
  border-radius: 999px;
  background: var(--paper);
  box-shadow: inset 0 0 0 1px rgba(232, 85, 30, 0.35);
  font-size: var(--fs-small); font-weight: 500; color: var(--ink);
}
.discount::before { content: ""; width: 8px; height: 8px; border-radius: 50%; background: var(--accent); box-shadow: 0 0 0 4px rgba(232, 85, 30, 0.14); }

/* ---------- loader: once per visit, at most ~1.5 s ---------- */

.loader {
  position: fixed; inset: 0; z-index: 150;
  display: none; place-items: center;
  background: var(--sakura);
  transition: opacity 350ms var(--ease-out), visibility 0s linear 350ms;
  animation: loader-out 350ms var(--ease-out) 1.5s forwards; /* fail-safe if scripts never run */
}
.intro .loader { display: grid; }
.loader.is-done { opacity: 0; visibility: hidden; }
/* the logo leaves first, so it never sits on top of the headline while the page shows through */
.loader__mark { transition: opacity 180ms ease-out, transform 180ms ease-out; }
.loader.is-leaving .loader__mark { opacity: 0; transform: scale(0.96); }
@keyframes loader-out { to { opacity: 0; visibility: hidden; } }
.loader__mark { display: grid; justify-items: center; gap: var(--s3); }
.loader__logo { width: 180px; height: auto; animation: loader-logo 600ms var(--ease-out) both; }
.loader__bar { width: 120px; height: 1px; background: var(--line); overflow: hidden; }
.loader__bar::after {
  content: ""; display: block; height: 100%; background: var(--accent);
  transform: scaleX(0); transform-origin: left;
  animation: loader-bar 1s var(--ease-in-out) forwards;
}
@keyframes loader-logo { from { opacity: 0; transform: translateY(8px); } }
@keyframes loader-bar { to { transform: scaleX(1); } }

/* ---------- 3D stage, petals, branches ---------- */

/* The canvas sits above the page but only ever draws inside empty "stage" boxes in the
   layout, and is fully transparent in between, so it can't cover text or catch clicks. */
.stage {
  position: fixed; inset: 0; z-index: 2;
  width: 100%; height: 100%;
  pointer-events: none;
  opacity: 0;
}
.no-3d .stage, .no-3d .layer-labels { display: none; }
.static-render { display: none; }
.no-3d .static-render { display: block; }

.layer-labels { position: fixed; inset: 0; z-index: 3; pointer-events: none; }
.layer-label {
  position: absolute; left: 0; top: 0;
  display: flex; align-items: center; gap: var(--s1);
  font-size: var(--fs-micro); color: var(--ink-2);
  opacity: 0;
}
.layer-label::before { content: ""; width: 32px; height: 1px; background: var(--line-strong); }

.petals { position: fixed; inset: 0; z-index: 0; pointer-events: none; overflow: hidden; }
.petal { position: absolute; left: 0; top: 0; width: 16px; height: 14px; will-change: transform; mix-blend-mode: multiply; }
.petal svg { width: 100%; height: 100%; }
.reduced-motion .petals { display: none; }

/* watercolour (filters live in the SVG defs in index.html); multiply lets the paper show through */
.branch { position: absolute; pointer-events: none; color: var(--branch-wash); mix-blend-mode: multiply; overflow: visible; }
.branch .twig { fill: currentColor; }
.branch .bloom { transform-box: fill-box; transform-origin: center; }
.branch--hero { top: calc(var(--nav-h) - 8px); right: 0; width: clamp(220px, 30vw, 440px); }
.branch--name { bottom: 0; right: 0; width: clamp(200px, 24vw, 340px); transform: scaleY(-1); opacity: 0.9; }
.branch--footer { left: 0; bottom: 0; width: clamp(200px, 26vw, 360px); transform: scale(-1, -1); opacity: 0.8; }

/* ---------- nav ---------- */

.nav { position: fixed; inset: 0 0 auto 0; z-index: 50; height: var(--nav-h); }
.nav::before {
  content: ""; position: absolute; inset: 0;
  background: rgba(251, 239, 241, 0.94);
  -webkit-backdrop-filter: saturate(160%) blur(18px);
  backdrop-filter: saturate(160%) blur(18px);
  border-bottom: 1px solid var(--line);
  opacity: 0;
  transition: opacity var(--t-ui) ease;
}
.nav.is-scrolled::before, .nav--solid::before { opacity: 1; }
.nav__inner {
  position: relative;
  display: flex; align-items: center; gap: var(--s4);
  height: 100%;
  max-width: calc(var(--max) + var(--gutter) * 2);
  margin-inline: auto;
  padding-inline: var(--gutter);
}
.nav.is-scrolled .logo { transform: scale(0.88); }
.nav__links { display: flex; gap: var(--s4); margin-left: auto; }
.nav__links a {
  font-size: var(--fs-small); color: var(--ink-2);
  min-height: 44px; display: inline-flex; align-items: center;
  transition: color var(--t-fast) ease;
}
.nav__links a:hover, .nav__links a[aria-current] { color: var(--ink); }
.nav__petals { position: absolute; inset: 0; z-index: 0; pointer-events: none; overflow: hidden; }
.nav__actions { display: flex; align-items: center; gap: var(--s2); }
.nav__order { min-height: 40px; padding: 0 var(--s2); font-size: 0.8125rem; }

.lang-toggle {
  display: inline-flex; align-items: center; gap: 4px;
  min-height: 44px; padding: 0 var(--s1);
  font-size: var(--fs-micro); letter-spacing: 0.06em; font-weight: 500;
  color: var(--ink-3);
}
.lang-toggle [data-lang].is-active { color: var(--ink); }
.lang-toggle__sep { opacity: 0.4; }

.nav__burger { display: none; width: 44px; height: 44px; position: relative; }
.nav__burger span {
  position: absolute; left: 13px; width: 18px; height: 1.5px; background: var(--ink);
  transition: transform var(--t-ui) var(--ease-out);
}
.nav__burger span:first-child { top: 18px; }
.nav__burger span:last-child { top: 25px; }
.nav__burger[aria-expanded="true"] span:first-child { transform: translateY(3.5px) rotate(45deg); }
.nav__burger[aria-expanded="true"] span:last-child { transform: translateY(-3.5px) rotate(-45deg); }

/* ---------- hero ---------- */

.hero {
  position: relative;
  min-height: 100vh; min-height: 100svh;
  display: grid; grid-template-rows: minmax(0, 1fr) auto;
  padding: calc(var(--nav-h) + var(--s2)) 0 var(--s8);
  text-align: center;
}
.hero__stage { position: relative; min-height: 34vh; }
.hero__static {
  position: absolute; inset: 0; margin: auto;
  width: min(80%, 520px); height: 100%; max-height: 420px;
  border-radius: var(--tile-radius); overflow: hidden;
  box-shadow: var(--shadow-card);
}
.hero__static img { width: 100%; height: 100%; object-fit: cover; }
.hero__content { position: relative; display: grid; justify-items: center; }
.hero__title { font-size: var(--fs-hero); line-height: 1.02; letter-spacing: -0.035em; margin-bottom: var(--s3); }
.hero__lede { margin: 0 auto var(--s4); max-width: 40ch; }
.hero__ctas { display: flex; flex-wrap: wrap; justify-content: center; gap: var(--s2); margin-bottom: var(--s3); }

.status {
  display: inline-flex; align-items: center; gap: 10px;
  font-size: var(--fs-small); color: var(--ink-2);
  font-variant-numeric: tabular-nums;
}
.status__dot { width: 8px; height: 8px; border-radius: 50%; background: var(--ink-3); flex: none; }
.status.is-open .status__dot { background: #2f9a4a; box-shadow: 0 0 0 4px rgba(47, 154, 74, 0.14); }
.status.is-soon .status__dot { background: var(--accent); box-shadow: 0 0 0 4px rgba(232, 85, 30, 0.16); }

@media (min-width: 900px) {
  .hero__title br { display: none; }
}

/* ---------- quick-jump bar ---------- */

.jump {
  position: sticky; top: var(--nav-h); z-index: 45;
  height: var(--jump-h);
  transition: transform 320ms var(--ease-out);
}
.jump::before {
  content: ""; position: absolute; inset: 0;
  background: var(--sakura);
  border-bottom: 1px solid transparent;
  transition: border-color var(--t-ui) ease;
}
.jump.is-stuck::before { border-bottom-color: var(--line); }
.jump.is-hidden { transform: translateY(calc(-100% - var(--nav-h))); }
.jump__track {
  position: relative;
  display: flex; align-items: center; gap: var(--s1);
  height: 100%;
  overflow-x: auto; scrollbar-width: none;
  overscroll-behavior-x: contain;
}
.jump__track::-webkit-scrollbar { display: none; }
.jump--center .jump__track { justify-content: center; }
.chip {
  flex: none;
  display: inline-flex; align-items: center; gap: var(--s1);
  min-height: 44px; padding: 0 var(--s2);
  border-radius: 999px;
  background: var(--paper);
  box-shadow: inset 0 0 0 1px var(--line);
  font-size: var(--fs-small); font-weight: 500; color: var(--ink-2); white-space: nowrap;
  transition: background-color var(--t-fast) ease, color var(--t-fast) ease, box-shadow var(--t-fast) ease, transform var(--t-fast) var(--ease-out), opacity var(--t-fast) ease;
}
.chip:hover { color: var(--ink); box-shadow: inset 0 0 0 1px var(--line-strong); }
.chip:active { transform: scale(0.96); }
.chip[aria-current="true"] { background: var(--ink); color: var(--on-ink); box-shadow: none; }
.chip svg { color: var(--blossom-ink); }
.chip[aria-current="true"] svg { color: currentColor; }

/* ---------- info bar ---------- */

.info { padding: var(--s3) 0; }
.info__grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--s2); }
.info__item {
  display: flex; align-items: center; gap: 14px;
  min-height: 64px; padding: var(--s1) var(--s2);
  border-radius: 14px;
  transition: background-color var(--t-fast) ease;
}
a.info__item:hover { background: var(--sakura); }
.info__icon {
  flex: none; display: grid; place-items: center;
  width: 40px; height: 40px; border-radius: 50%;
  background: var(--sakura); color: var(--blossom-ink);
}
.info__icon svg { width: 18px; height: 18px; }
.info__text { display: grid; line-height: 1.35; min-width: 0; }
.info__text strong { font-weight: 500; font-size: 0.9375rem; }
.info__text span { font-size: var(--fs-micro); color: var(--ink-3); }

/* ---------- popular dishes ---------- */

/* one dish, one photo, one button */
.popular__feature { display: grid; justify-items: center; gap: var(--s5); max-width: 920px; margin-inline: auto; }
.feature {
  display: block; width: 100%;
  border-radius: var(--tile-radius); overflow: hidden;
  background: var(--paper); box-shadow: var(--shadow-card);
  transition: transform 600ms var(--ease-out), box-shadow 600ms var(--ease-out);
}
.feature__media { position: relative; aspect-ratio: 16 / 9; overflow: hidden; background: var(--sakura-deep); }
.feature__media img { width: 100%; height: 100%; object-fit: cover; transition: transform 1200ms var(--ease-out); }
.feature__body { display: flex; align-items: baseline; justify-content: space-between; gap: var(--s3); padding: var(--s3) var(--s4); }
.feature__name { font-family: var(--font-display); font-weight: 500; font-size: clamp(1.625rem, 1.4vw + 0.9rem, 2.25rem); letter-spacing: -0.02em; line-height: 1.1; }
@media (hover: hover) {
  .feature:hover { transform: translateY(-4px); box-shadow: 0 1px 2px rgba(74, 32, 40, 0.06), 0 34px 60px -30px rgba(74, 32, 40, 0.45); }
  .feature:hover .feature__media img { transform: scale(1.035); }
}
.badge {
  position: absolute; top: var(--s2); left: var(--s2);
  display: inline-flex; align-items: center; gap: 8px;
  padding: 6px 12px 6px 10px; border-radius: 999px;
  background: rgba(255, 255, 255, 0.94);
  font-size: var(--fs-micro); font-weight: 600; color: var(--ink);
}
.badge::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: var(--accent); }
.price { font-size: 1.125rem; font-weight: 600; letter-spacing: -0.01em; }

/* ---------- menu teaser: a calm list of categories, one photo ---------- */

.menu__body { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: var(--s3); align-items: stretch; }
.menu__photo { aspect-ratio: 1; border-radius: var(--tile-radius); overflow: hidden; background: var(--sakura-deep); }
.menu__photo img { width: 100%; height: 100%; object-fit: cover; }
.menu__cta {
  display: flex; align-items: center; justify-content: center; gap: var(--s2);
  padding: var(--s5);
  text-align: center;
  border-radius: var(--tile-radius);
  background: var(--ink); color: var(--on-ink);
  font-family: var(--font-display); font-size: var(--fs-l); letter-spacing: -0.03em; line-height: 1;
  transition: background-color var(--t-ui) ease, transform 600ms var(--ease-out);
}
.menu__cta svg { width: clamp(32px, 4vw, 52px); height: clamp(32px, 4vw, 52px); flex: none; fill: none; stroke: currentColor; stroke-width: 1.2; stroke-linecap: round; stroke-linejoin: round; transition: transform 600ms var(--ease-out); }
.menu__cta-label { white-space: nowrap; }
.menu__cta:active { transform: scale(0.985); }
@media (hover: hover) {
  .menu__cta:hover { background: #3d3330; }
  .menu__cta:hover svg { transform: translateX(8px); }
}

/* ---------- how to get your food ---------- */

.services__grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--s3); }
.svc { display: flex; flex-direction: column; border-radius: 22px; background: var(--paper); overflow: hidden; }
.svc__body { display: flex; flex-direction: column; align-items: flex-start; flex: 1; padding: var(--s4); }
.svc__title { font-family: var(--font-display); font-weight: 500; font-size: 1.875rem; letter-spacing: -0.02em; line-height: 1.1; margin-bottom: var(--s1); }
.svc__text { color: var(--ink-2); margin-bottom: var(--s3); }
.svc__actions { display: flex; flex-wrap: wrap; align-items: center; gap: var(--s2); margin-top: auto; }
.services__note { margin-top: var(--s4); display: flex; flex-wrap: wrap; align-items: center; gap: var(--s2); }

/* ---------- reviews ---------- */

.reviews { text-align: center; }
.reviews__stage { height: clamp(220px, 34vh, 340px); }
.reviews__inner { display: flex; flex-direction: column; align-items: center; }
.reviews__score { display: flex; align-items: baseline; gap: var(--s2); margin-bottom: var(--s3); }
.reviews__num { font-family: var(--font-display); font-weight: 500; font-size: clamp(6.5rem, 15vw, 14rem); line-height: 0.85; letter-spacing: -0.05em; }
.reviews__outof { font-size: var(--fs-small); color: var(--ink-3); }
.stars { width: 144px; margin-bottom: var(--s3); }
.stars svg { width: 100%; height: auto; overflow: visible; }
.stars__outline use { fill: none; stroke: var(--line-strong); stroke-width: 1; }
.stars__fill use { fill: var(--accent); }
.reviews__count { font-size: 1.125rem; margin-bottom: var(--s1); font-variant-numeric: tabular-nums; }
.reviews__text { color: var(--ink-3); font-size: var(--fs-small); max-width: 32ch; margin-bottom: var(--s3); }
.reviews .chapter__head { display: grid; justify-items: center; margin-bottom: var(--s4); }

/* ---------- the name ---------- */

.name { overflow: hidden; }
.name__pin { min-height: 100vh; min-height: 100svh; display: flex; align-items: center; padding-block: var(--s10); }
.name__grid { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 6fr); gap: var(--s4); align-items: center; width: 100%; }
.name__jp {
  font-family: var(--font-jp-thin); font-weight: 200;
  font-size: clamp(4.5rem, 11vw, 10rem);
  line-height: 1; letter-spacing: 0.04em;
  white-space: nowrap; margin-left: -0.06em;
}
.name__sub { margin-top: var(--s2); font-size: var(--fs-small); color: var(--ink-2); letter-spacing: 0.02em; }
.name__pearls { display: flex; gap: 6px; height: 14px; margin: var(--s5) 0 var(--s4); }
.pearl {
  width: 14px; height: 14px; border-radius: 50%;
  background: radial-gradient(circle at 34% 30%, #fff3e8 0 9%, #ff9a5c 22%, var(--accent) 52%, #a7310a 100%);
  box-shadow: 0 2px 3px -1px rgba(167, 49, 10, 0.45);
}
.name__line { font-family: var(--font-display); font-size: clamp(1.25rem, 1vw + 0.9rem, 1.625rem); line-height: 1.35; letter-spacing: -0.01em; max-width: 26ch; }
.name__stage { position: relative; height: min(64vh, 560px); }
.name__static { position: absolute; inset: 0; margin: auto; width: 80%; height: 70%; border-radius: var(--tile-radius); overflow: hidden; }
.name__static img { width: 100%; height: 100%; object-fit: cover; }

/* ---------- find us ---------- */

.visit__grid {
  display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--s4);
  grid-template-areas:
    "info info info info info plate plate plate plate plate plate plate"
    "hours hours hours hours hours plate plate plate plate plate plate plate"
    "map map map map map map map map map map map map";
}
.visit__info { grid-area: info; padding-bottom: var(--s6); }
.visit__hours { grid-area: hours; padding-bottom: var(--s8); }
.visit__stage { grid-area: plate; position: relative; min-height: 60vh; }
.visit__static { position: absolute; inset: 0; margin: auto; width: 80%; height: 70%; border-radius: var(--tile-radius); overflow: hidden; }
.visit__static img { width: 100%; height: 100%; object-fit: cover; }

.facts { display: grid; gap: var(--s3); margin-bottom: var(--s5); }
.facts__row { display: grid; grid-template-columns: 112px 1fr; gap: var(--s2); padding-top: var(--s2); border-top: 1px solid var(--line); }
.facts dt { font-size: var(--fs-micro); color: var(--ink-3); padding-top: 3px; }
.facts dd a { text-decoration: underline; text-decoration-color: var(--line-strong); text-underline-offset: 4px; }
.facts dd a:hover { text-decoration-color: var(--accent); }
.visit__ctas { display: flex; flex-wrap: wrap; gap: var(--s2); }

.hours { width: 100%; margin-bottom: var(--s3); font-size: 0.9375rem; }
.hours th, .hours td { padding: 12px 0; border-top: 1px solid var(--line); text-align: left; font-weight: 400; color: var(--ink-2); }
.hours tr:last-child th, .hours tr:last-child td { border-bottom: 1px solid var(--line); }
.hours td { text-align: right; }
.hours tr.is-today th, .hours tr.is-today td { color: var(--ink); font-weight: 600; }
.hours tr.is-today th::after { content: attr(data-today); margin-left: var(--s1); font-size: var(--fs-micro); font-weight: 500; color: var(--accent-ink); }

.map {
  grid-area: map;
  position: relative; display: block;
  height: clamp(240px, 26vw, 340px);
  border-radius: 22px; overflow: hidden;
  background: #fbf3f4;
  box-shadow: inset 0 0 0 1px var(--line);
}
.map__svg { width: 100%; height: 100%; }
.map__blocks path { fill: #f4e3e7; }
.map__roads path { fill: none; stroke: #ffffff; stroke-width: 14; stroke-linecap: round; }
.map__roads .minor { stroke-width: 6; }
.map__street { fill: var(--ink-3); font: 500 11px/1 var(--font-text); letter-spacing: 0.2em; }
.map__pin text { fill: var(--ink); font: 500 13px/1 var(--font-text); }
.map__dot { fill: var(--accent); }
.map__halo { fill: rgba(232, 85, 30, 0.12); stroke: rgba(232, 85, 30, 0.4); stroke-width: 1; }
.map__cta {
  position: absolute; right: var(--s2); bottom: var(--s2);
  display: inline-flex; align-items: center; gap: var(--s1);
  min-height: 44px; padding: 0 var(--s2);
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.95);
  font-size: var(--fs-small);
  box-shadow: inset 0 0 0 1px var(--line-strong);
}

/* ---------- footer ---------- */

.footer {
  margin: var(--tile-gap); border-radius: var(--tile-radius);
  background: var(--sakura-deep);
  padding: var(--s12) 0 var(--s5);
  font-size: var(--fs-small); color: var(--ink-2);
  overflow: hidden;
}
.footer__grid { position: relative; display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--s3); row-gap: var(--s6); padding-bottom: var(--s10); }
.footer__brand { grid-column: 1 / span 5; }
.footer__grid > div:nth-child(2) { grid-column: 7 / span 2; }
.footer__grid > div:nth-child(3) { grid-column: 9 / span 2; }
.footer__grid > div:nth-child(4) { grid-column: 11 / span 2; }
.footer .label { color: var(--ink); }
.footer__allergen { margin-top: var(--s3); max-width: 32ch; }
.footer__list { line-height: 1.8; }
.footer a:hover { color: var(--ink); }
.footer__links li + li { margin-top: 4px; }
.footer__base { position: relative; display: grid; grid-template-columns: 1fr auto; gap: var(--s2) var(--s4); align-items: start; padding-top: var(--s4); border-top: 1px solid var(--line); color: var(--ink-3); font-size: var(--fs-micro); }
.footer__concept { color: var(--ink-2); }
.credits p { max-width: 70ch; line-height: 1.7; }
.footer__end { grid-column: 1 / -1; display: flex; align-items: center; gap: var(--s4); }
.footer__end .lang-toggle { margin-left: calc(var(--s1) * -1); }
.footer__end p { margin-left: auto; }
.footer__end a { min-height: 44px; display: inline-flex; align-items: center; }

/* ---------- mobile action bar ---------- */

.actionbar { display: none; }

/* ==========================================================================
   Responsive
   ========================================================================== */

@media (max-width: 1023px) {
  .info__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .services__grid { grid-template-columns: 1fr; }
  .menu__body { grid-template-columns: 1fr; }
  .menu__photo { aspect-ratio: 16 / 9; }
  .menu__cta { min-height: 140px; }
  .vlabel { display: none; }
}

@media (max-width: 767px) {
  :root { --nav-h: 60px; --jump-h: 60px; }
  .logo img { height: 38px; }

  .nav__links {
    position: fixed; inset: var(--nav-h) 0 auto 0;
    flex-direction: column; gap: 0;
    padding: var(--s2) var(--gutter) var(--s3);
    background: var(--sakura);
    border-bottom: 1px solid var(--line);
    opacity: 0; transform: translateY(-8px); visibility: hidden;
    transition: opacity var(--t-ui) var(--ease-out), transform var(--t-ui) var(--ease-out), visibility 0s linear var(--t-ui);
  }
  .nav__links a { font-family: var(--font-display); font-size: var(--fs-s); color: var(--ink); min-height: 56px; border-bottom: 1px solid var(--line); }
  .nav__links a:last-child { border-bottom: 0; }
  .nav__links { overflow: hidden; }
  .nav__links > a { position: relative; z-index: 1; }
  .nav.is-open::before { opacity: 1; }
  .nav.is-open .nav__links { opacity: 1; transform: none; visibility: visible; transition-delay: 0s; }
  .nav__burger { display: block; margin-right: calc(var(--s1) * -1); }
  .nav__actions { margin-left: auto; gap: var(--s1); }

  .hero { padding-bottom: var(--s5); }
  .hero__stage { min-height: 32vh; }
  .hero__ctas { width: 100%; }
  .hero__ctas { display: grid; grid-template-columns: 1fr 1fr; gap: var(--s1); }
  .hero__ctas .pill { padding: 0 var(--s2); }
  .hero__ctas .pill:first-child { grid-column: 1 / -1; }

  .jump--center .jump__track { justify-content: flex-start; }

  .info__grid { grid-template-columns: 1fr; gap: 0; }
  .info__item { border-bottom: 1px solid var(--line); border-radius: 0; }
  .info__item:last-child { border-bottom: 0; }


  .feature__body { padding: var(--s2) var(--s3); }
  .popular__all { width: 100%; }
  .menu__cta { padding: var(--s4); font-size: var(--fs-m); }
  .svc__body { padding: var(--s3); }

  .reviews__stage { height: 26vh; }

  .name__pin { align-items: stretch; padding-block: var(--s6); }
  .name__grid { grid-template-columns: 1fr; grid-template-rows: auto auto; gap: var(--s2); align-content: center; }
  .name__stage { order: -1; height: 34vh; }
  .branch--name { width: 160px; }

  .visit__grid { grid-template-areas: "info" "hours" "plate" "map"; grid-template-columns: 1fr; }
  .visit__stage { min-height: 46vh; margin-bottom: var(--s4); }
  .facts__row { grid-template-columns: 96px 1fr; }

  .branch--hero { width: 180px; opacity: 0.85; }

  .footer { padding-bottom: calc(var(--s12) + env(safe-area-inset-bottom)); }
  .footer__grid { row-gap: var(--s5); }
  .footer__brand { grid-column: 1 / -1; }
  .footer__grid > div:nth-child(2), .footer__grid > div:nth-child(3) { grid-column: span 6; }
  .footer__grid > div:nth-child(4) { grid-column: 1 / -1; }
  .footer__base { grid-template-columns: 1fr; }
  .footer__end { flex-wrap: wrap; gap: var(--s2) var(--s4); }
  .logo--l img { height: 64px; }

  .actionbar {
    position: fixed; left: var(--s1); right: var(--s1); bottom: calc(var(--s1) + env(safe-area-inset-bottom)); z-index: 40;
    display: grid; grid-template-columns: repeat(3, 1fr);
    padding: 4px;
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.94);
    -webkit-backdrop-filter: saturate(160%) blur(18px);
    backdrop-filter: saturate(160%) blur(18px);
    box-shadow: inset 0 0 0 1px var(--line), 0 12px 32px -16px rgba(74, 32, 40, 0.4);
  }
  .actionbar a {
    display: flex; align-items: center; justify-content: center; gap: var(--s1);
    min-height: 48px; border-radius: 999px;
    font-size: var(--fs-small); font-weight: 500;
    transition: transform var(--t-fast) var(--ease-out);
  }
  .actionbar a:first-child { background: var(--ink); color: var(--on-ink); }
  .actionbar a:active { transform: scale(0.96); }
  .actionbar svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 1.4; stroke-linejoin: round; stroke-linecap: round; }
}

@media (max-width: 380px) {
  .nav__order { display: none; }
}

@media (prefers-reduced-motion: reduce) {
  html:not(.lenis) { scroll-behavior: auto; }
  *, *::before, *::after { animation-duration: 1ms !important; animation-iteration-count: 1 !important; transition-duration: 1ms !important; }
}