:root{
  --ink:#14151A;
  --ink-soft:#1C1E24;
  --ink-line: rgba(236,230,214,0.14);
  --bone:#ECE6D6;
  --bone-dim: rgba(236,230,214,0.62);
  --brass:#C4A03F;
  --brass-soft:#D9BE7C;
  --lacquer:#8C2A34;
  --lacquer-bright:#A5333F;
  --dusk: 0; /* 0 = quiet night, 1 = warm horizon — set by scroll in script.js */

  --font-display:'Shippori Mincho', serif;
  --font-body:'Noto Sans', sans-serif;
  --font-mono:'IBM Plex Mono', monospace;

  --container: 1120px;
  --nav-h: 76px;
}

*{ box-sizing:border-box; }

html{ scroll-behavior:smooth; }

body{
  margin:0;
  overflow-x:hidden;
  background:var(--ink);
  color:var(--bone);
  font-family:var(--font-body);
  font-weight:300;
  line-height:1.7;
  -webkit-font-smoothing:antialiased;
}

h1,h2,h3{
  font-family:var(--font-display);
  font-weight:600;
  margin:0;
  color:var(--bone);
}

a{ color:inherit; text-decoration:none; }
button{ font-family:inherit; background:none; border:none; color:inherit; cursor:pointer; }

/* ---------- dusk horizon wash ---------- */
.dusk-layer{
  position:fixed; inset:0; z-index:1; pointer-events:none;
  background:
    radial-gradient(ellipse 90% 45% at 50% 100%,
      rgba(140,42,52, calc(0.16 + var(--dusk) * 0.30)) 0%,
      rgba(196,160,63, calc(0.08 + var(--dusk) * 0.16)) 32%,
      transparent 68%),
    linear-gradient(to bottom, var(--ink) 0%, var(--ink) 100%);
  transition:background 0.2s linear;
}

/* ---------- ambient sakura drift ---------- */
#sakuraCanvas{
  position:fixed; inset:0;
  width:100%; height:100%;
  z-index:2;
  pointer-events:none;
}

/* ---------- topbar ---------- */
.topbar{
  position:sticky; top:0; z-index:20;
  height:var(--nav-h);
  display:flex; align-items:center; justify-content:space-between;
  padding:0 clamp(20px,4vw,56px);
  background:rgba(20,21,26,0.86);
  backdrop-filter:blur(10px);
  border-bottom:1px solid var(--ink-line);
}

.wordmark{ display:flex; flex-direction:column; line-height:1; gap:2px; }
.wordmark-jp{ font-family:var(--font-display); font-size:13px; color:var(--brass-soft); letter-spacing:0.08em; }
.wordmark-en{ font-family:var(--font-mono); font-size:14px; letter-spacing:0.22em; color:var(--bone); }

.mainnav{ display:flex; gap:clamp(18px,3vw,40px); }
.navlink{
  font-family:var(--font-mono);
  font-size:13px;
  letter-spacing:0.08em;
  color:var(--bone-dim);
  padding:8px 2px;
  position:relative;
  transition:color .25s ease;
}
.navlink::after{
  content:''; position:absolute; left:0; right:0; bottom:0; height:1px;
  background:var(--brass);
  transform:scaleX(0); transform-origin:left;
  transition:transform .3s ease;
}
.navlink:hover{ color:var(--bone); }
.navlink.is-active{ color:var(--bone); }
.navlink.is-active::after{ transform:scaleX(1); }

.topbar-actions{ display:flex; align-items:center; gap:20px; }

.cta-book{
  font-family:var(--font-mono); font-size:13px; letter-spacing:0.05em;
  border:1px solid var(--brass); color:var(--brass-soft);
  padding:9px 18px; border-radius:2px;
  display:flex; align-items:center; gap:8px;
  transition:background .25s ease, color .25s ease;
  white-space:nowrap;
}
.cta-book:hover{ background:var(--brass); color:var(--ink); }
.cta-arrow{ display:inline-block; transition:transform .25s ease; }
.cta-book:hover .cta-arrow{ transform:translateX(3px); }

.menu-toggle{ display:none; flex-direction:column; gap:5px; padding:8px; }
.menu-toggle span{ width:22px; height:1px; background:var(--bone); display:block; }

/* ---------- page sections ---------- */
main{ position:relative; z-index:10; }

.page{
  display:none;
  max-width:var(--container);
  margin:0 auto;
  padding:clamp(48px,8vw,96px) clamp(20px,4vw,56px) 80px;
  opacity:0; transform:translateY(10px);
}
.page.is-active{
  display:block;
  animation:pageIn .6s cubic-bezier(.22,.61,.36,1) forwards;
}
@keyframes pageIn{ to{ opacity:1; transform:translateY(0); } }

.page-title{ font-size:clamp(32px,4vw,46px); margin-bottom:10px; }
.page-subtitle{ color:var(--bone-dim); margin-bottom:48px; font-weight:300; }

/* ---------- gentle scroll reveal ---------- */
.reveal{
  opacity:0; transform:translateY(28px);
  transition:opacity 1s cubic-bezier(.22,.61,.36,1), transform 1s cubic-bezier(.22,.61,.36,1);
}
.reveal.is-visible{ opacity:1; transform:translateY(0); }

/* ---------- hero ---------- */
.hero{
  min-height:56vh;
  display:flex; flex-direction:column; justify-content:center;
  padding-top:6vh;
}
.hero-eyebrow{
  font-family:var(--font-mono); font-size:12px; letter-spacing:0.24em;
  color:var(--brass-soft); margin:0 0 22px;
}
.hero-title{ display:flex; flex-direction:column; gap:6px; margin-bottom:26px; }
.hero-title-jp{ font-size:clamp(20px,2.6vw,26px); color:var(--bone-dim); letter-spacing:0.1em; }
.hero-title-en{
  font-family:var(--font-display); font-weight:800;
  font-size:clamp(64px,13vw,168px);
  line-height:0.92; letter-spacing:0.01em;
  color:var(--bone);
}
.hero-tagline{
  max-width:520px; font-size:clamp(16px,1.6vw,19px); color:var(--bone-dim); margin-bottom:36px;
}
.hero-actions{ display:flex; gap:16px; flex-wrap:wrap; }

.btn{
  font-family:var(--font-mono); font-size:13px; letter-spacing:0.05em;
  padding:14px 26px; border-radius:2px; display:inline-flex; align-items:center; gap:8px;
  transition:all .25s ease;
}
.btn-ghost{ border:1px solid var(--ink-line); color:var(--bone); }
.btn-ghost:hover{ border-color:var(--bone); }
.btn-solid{ background:var(--lacquer); color:var(--bone); }
.btn-solid:hover{ background:var(--lacquer-bright); }

.section-divider{ height:1px; background:var(--ink-line); margin:64px 0 56px; }

.teaser-row{
  display:grid; grid-template-columns:repeat(3,1fr); gap:clamp(20px,3vw,40px);
}
.teaser-card{ border-top:1px solid var(--ink-line); padding-top:20px; }
.teaser-index{ font-family:var(--font-mono); font-size:12px; color:var(--brass); }
.teaser-card h3{ font-size:20px; margin:14px 0 10px; }
.teaser-card p{ color:var(--bone-dim); font-size:14.5px; margin:0; }
.teaser-row .teaser-card:nth-child(2){ transition-delay:.08s; }
.teaser-row .teaser-card:nth-child(3){ transition-delay:.16s; }

/* ---------- menu ---------- */
.jp-accent{ font-family:var(--font-display); color:var(--brass-soft); }

.menu-subnav{ display:flex; gap:8px; margin-bottom:40px; }
.menu-subnav-btn{
  font-family:var(--font-mono); font-size:13px; letter-spacing:0.06em;
  padding:10px 20px; border:1px solid var(--ink-line); border-radius:2px;
  color:var(--bone-dim); transition:all .2s ease;
}
.menu-subnav-btn.is-active{ border-color:var(--brass); color:var(--bone); background:rgba(196,160,63,0.08); }

.chef-note{
  border-left:2px solid var(--brass);
  padding:2px 0 2px 22px; margin-bottom:44px;
}
.chef-note-eyebrow{
  display:block; font-family:var(--font-display); font-style:italic; font-size:13px;
  color:var(--brass-soft); margin-bottom:6px; letter-spacing:0.02em;
}
.chef-note-text{ margin:0; font-size:14.5px; color:var(--bone-dim); line-height:1.7; max-width:640px; }

.menu-sub{ display:none; }
.menu-sub.is-active{ display:grid; grid-template-columns:repeat(2,1fr); gap:16px 56px; animation:pageIn .5s cubic-bezier(.22,.61,.36,1); }

.menu-group{ margin-bottom:8px; }
.menu-group-title{
  font-family:var(--font-display); font-size:20px;
  color:var(--brass-soft); margin-bottom:4px;
  padding-bottom:10px; border-bottom:1px solid rgba(196,160,63,0.35);
}
.menu-group-note{ color:var(--bone-dim); font-size:12.5px; font-family:var(--font-mono); margin:8px 0 4px; }

.menu-list{ list-style:none; margin:0; padding:0; }
.menu-item{
  padding:11px 0; border-bottom:1px solid var(--ink-line);
  font-size:15px; line-height:1.5;
}
.mi-tags{ font-family:var(--font-mono); font-size:10px; color:var(--brass); margin-left:8px; letter-spacing:0.04em; white-space:nowrap; }
.mi-rec{ margin-right:8px; font-size:12px; filter:saturate(0.9); }
.menu-legend{ display:inline-block; margin-top:6px; font-family:var(--font-mono); font-size:11.5px; color:var(--brass-soft); }

/* ---------- photo gallery (flowing marquee) ---------- */
.gallery-wrap{
  margin:0 -1px;
  overflow:hidden;
  -webkit-mask-image:linear-gradient(to right, transparent, black 6%, black 94%, transparent);
  mask-image:linear-gradient(to right, transparent, black 6%, black 94%, transparent);
}
.gallery-heading{
  display:flex; justify-content:space-between; align-items:baseline; flex-wrap:wrap; gap:10px;
  margin-bottom:18px;
}
.gallery-eyebrow{
  font-family:var(--font-mono); font-size:12px; letter-spacing:0.1em;
  color:var(--bone-dim); margin:0;
}
.ig-link{
  display:inline-flex; align-items:center; gap:8px;
  font-family:var(--font-mono); font-size:12px; letter-spacing:0.04em;
  color:var(--brass-soft); transition:color .2s ease;
}
.ig-link:hover{ color:var(--bone); }
.ig-dot{ width:6px; height:6px; border-radius:50%; background:var(--lacquer-bright); display:inline-block; }

.gallery-track{
  display:flex; gap:16px;
  width:max-content;
  animation:marquee 96s linear infinite;
}
.gallery-wrap:hover .gallery-track{ animation-play-state:paused; }
.gallery-tile{
  width:280px; height:200px; flex:0 0 auto;
  border-radius:2px; overflow:hidden; position:relative;
  background:var(--ink-soft); border:1px solid var(--ink-line);
  animation:tileFloat 6s ease-in-out infinite;
}
.gallery-tile:nth-child(odd){ animation-delay:-1.5s; }
.gallery-tile:nth-child(3n){ animation-delay:-3s; }
.gallery-tile img{ width:100%; height:100%; object-fit:cover; display:block; }
.gallery-tile.is-placeholder{
  display:flex; align-items:center; justify-content:center;
  border:1px dashed rgba(196,160,63,0.4);
}
.gallery-placeholder-label{
  font-family:var(--font-mono); font-size:12px; color:var(--brass-soft);
  text-align:center; padding:0 16px;
}
@keyframes marquee{
  from{ transform:translateX(0); }
  to{ transform:translateX(-50%); }
}
@keyframes tileFloat{
  0%,100%{ transform:translateY(0); }
  50%{ transform:translateY(-6px); }
}
@media (prefers-reduced-motion: reduce){
  .gallery-track{ animation:none; flex-wrap:wrap; width:100%; }
  .gallery-tile{ animation:none; }
}

/* ---------- about ---------- */
.about-grid{ display:grid; grid-template-columns:1fr 1.4fr; gap:56px; }
.about-lead{
  font-family:var(--font-display); font-size:clamp(22px,2.4vw,28px); line-height:1.55;
  color:var(--bone);
}
.about-body p{ color:var(--bone-dim); margin:0 0 20px; }
.about-body p:last-child{ margin-bottom:0; font-family:var(--font-display); color:var(--bone); font-size:17px; }

/* ---------- contact ---------- */
.contact-grid{
  display:grid; grid-template-columns:repeat(3,1fr); gap:40px; margin-bottom:48px;
}
.contact-block h3{ font-size:16px; margin-bottom:10px; color:var(--brass-soft); }
.contact-block p{ color:var(--bone-dim); margin:0; }
.contact-block .inline-link{ color:var(--brass-soft); }
.contact-block .inline-link:hover{ color:var(--bone); }
.mono-note{ font-family:var(--font-mono); font-size:13px; }
.hours-note{ display:inline-block; margin-top:6px; font-size:11px; color:rgba(236,230,214,0.4); font-style:italic; }
.contact-book{ display:inline-flex; }
.contact-grid .contact-block:nth-child(2){ transition-delay:.08s; }
.contact-grid .contact-block:nth-child(3){ transition-delay:.16s; }

/* ---------- footer ---------- */
.sitefooter{
  border-top:1px solid var(--ink-line);
  padding:28px clamp(20px,4vw,56px);
  display:flex; justify-content:space-between; align-items:center;
  font-family:var(--font-mono); font-size:12px; color:var(--bone-dim);
  position:relative; z-index:10;
}
.footer-links{ display:flex; gap:20px; }
.sitefooter a{ color:var(--brass-soft); }
.sitefooter a:hover{ color:var(--bone); }

/* ---------- responsive ---------- */
@media (max-width:860px){
  .mainnav{
    display:none;
    position:fixed; top:var(--nav-h); left:0; right:0; z-index:20;
    flex-direction:column; gap:0;
    background:rgba(20,21,26,0.98);
    border-bottom:1px solid var(--ink-line);
    padding:6px clamp(20px,4vw,56px) 16px;
  }
  body.nav-open .mainnav{ display:flex; }
  body.nav-open{ overflow:hidden; }
  .navlink{ padding:14px 0; border-bottom:1px solid var(--ink-line); text-align:left; width:100%; }
  .menu-toggle{ display:flex; }
  .teaser-row{ grid-template-columns:1fr; }
  .about-grid{ grid-template-columns:1fr; }
  .contact-grid{ grid-template-columns:1fr; gap:28px; }
  .menu-sub.is-active{ grid-template-columns:1fr; }
}

@media (prefers-reduced-motion: reduce){
  .page.is-active{ animation:none; opacity:1; transform:none; }
  .reveal{ opacity:1; transform:none; transition:none; }
  html{ scroll-behavior:auto; }
}