/* =========================================================
   SHOGUN — Japanese Restaurant, Accra
   Design language: sumi ink, hinoki timber, lantern gold, shu vermilion
   ========================================================= */

/* ---------- TOKENS ---------- */
:root{
  /* ink & paper */
  --sumi:      #0E0C0A;   /* deepest ink   */
  --kuro:      #16130F;   /* section black */
  --charcoal:  #1F1A15;
  --timber:    #2C2218;   /* dark wood     */
  --timber-lt: #3E3021;

  --washi:     #F6F1E7;   /* paper         */
  --washi-2:   #EFE8DA;
  --line:      #E2D9C7;

  /* accents */
  --gold:      #C9942F;
  --gold-lt:   #E3B75C;
  --gold-glow: rgba(227,183,92,.35);
  --shu:       #B23A28;   /* vermilion     */
  --matcha:    #7C8B5B;

  /* text */
  --t-dark:    #17130F;
  --t-mid:     #5A5248;
  --t-light:   #F6F1E7;
  --t-mute:    rgba(246,241,231,.62);

  /* system */
  --f-display: 'Shippori Mincho', 'Noto Serif JP', Georgia, serif;
  --f-body:    'Inter', 'Noto Sans JP', system-ui, sans-serif;
  --f-jp:      'Shippori Mincho', 'Noto Sans JP', serif;

  --wrap: 1280px;
  --ease: cubic-bezier(.22,.61,.36,1);
  --nav-h: 84px;
}

/* ---------- RESET ---------- */
*,*::before,*::after{ box-sizing:border-box; margin:0; padding:0; }
html{ scroll-behavior:smooth; -webkit-text-size-adjust:100%; }
body{
  font-family:var(--f-body);
  background:var(--washi);
  color:var(--t-dark);
  line-height:1.7;
  font-weight:300;
  overflow-x:hidden;
  -webkit-font-smoothing:antialiased;
}
img{ display:block; max-width:100%; height:auto; }
a{ color:inherit; text-decoration:none; }
button{ font:inherit; color:inherit; background:none; border:none; cursor:pointer; }
ul{ list-style:none; }
::selection{ background:var(--gold); color:var(--sumi); }

/* thin japanese-feeling scrollbar */
::-webkit-scrollbar{ width:9px; }
::-webkit-scrollbar-track{ background:var(--kuro); }
::-webkit-scrollbar-thumb{ background:var(--timber-lt); border-radius:9px; }
::-webkit-scrollbar-thumb:hover{ background:var(--gold); }

.wrap{ width:100%; max-width:var(--wrap); margin-inline:auto; padding-inline:24px; }

/* ---------- TYPE ---------- */
.h2{
  font-family:var(--f-display);
  font-weight:500;
  font-size:clamp(2rem,4.4vw,3.4rem);
  line-height:1.18;
  letter-spacing:-.01em;
}
.section-label{
  display:inline-block;
  font-family:var(--f-jp);
  font-size:.82rem;
  letter-spacing:.32em;
  text-transform:uppercase;
  color:var(--gold);
  margin-bottom:20px;
}
.section-label::before{
  content:''; display:inline-block; width:26px; height:1px;
  background:var(--gold); vertical-align:middle; margin-right:12px;
}
.section-head{ margin-bottom:56px; max-width:720px; }
.section-head--center{ margin-inline:auto; text-align:center; }
.section-lede{ color:var(--t-mid); margin-top:18px; font-size:1.05rem; }

/* ---------- BUTTONS ---------- */
.btn{
  --pad:15px 34px;
  display:inline-flex; align-items:center; justify-content:center; gap:10px;
  padding:var(--pad);
  font-size:.9rem; font-weight:500; letter-spacing:.06em;
  border:1px solid transparent;
  position:relative; overflow:hidden;
  transition:color .45s var(--ease), border-color .45s var(--ease),
             background .45s var(--ease), box-shadow .45s var(--ease);
}
.btn--gold{ background:var(--gold); color:var(--sumi); }
.btn--gold:hover{ background:var(--gold-lt); box-shadow:0 10px 34px -12px var(--gold-glow); }
.btn--ghost{ border-color:rgba(246,241,231,.35); color:var(--t-light); }
.btn--ghost:hover{ border-color:var(--gold); color:var(--gold-lt); background:rgba(201,148,47,.08); }
.btn--dark{ background:var(--sumi); color:var(--washi); }
.btn--dark:hover{ background:var(--shu); box-shadow:0 14px 34px -14px rgba(178,58,40,.8); }
.btn--full{ width:100%; }

/* =========================================================
   PLACEHOLDER IMAGE SYSTEM
   Every photo slot renders a hand-built kanji/wood plate.
   When a real photo exists in assets/images/ it covers it.
   ========================================================= */
.ph{
  position:relative;
  overflow:hidden;
  background:
    radial-gradient(120% 90% at 30% 15%, rgba(227,183,92,.16), transparent 60%),
    repeating-linear-gradient(90deg,
      rgba(0,0,0,.34) 0 2px, transparent 2px 11px),
    linear-gradient(160deg, #2E2318 0%, #17120D 55%, #241B12 100%);
  isolation:isolate;
}
.ph::after{
  content:attr(data-kanji);
  position:absolute; inset:0;
  display:flex; align-items:center; justify-content:center;
  font-family:var(--f-jp);
  font-size:clamp(3rem,9vw,7rem);
  color:rgba(227,183,92,.20);
  letter-spacing:.1em;
  text-shadow:0 0 42px rgba(227,183,92,.28);
  pointer-events:none;
}
.ph img{
  position:absolute; inset:0;
  width:100%; height:100%;
  object-fit:cover;
  z-index:2;
  transition:transform .9s var(--ease), opacity .5s ease;
}
.ph img.is-broken{ opacity:0; }

/* =========================================================
   PRELOADER
   ========================================================= */
.preloader{
  position:fixed; inset:0; z-index:9999;
  background:var(--sumi);
  display:grid; place-items:center;
  transition:opacity .7s ease, visibility .7s ease;
}
.preloader.is-done{ opacity:0; visibility:hidden; }
.preloader__inner{ position:relative; display:grid; place-items:center; }
.preloader__kanji{
  position:absolute;
  font-family:var(--f-jp);
  font-size:1.5rem; letter-spacing:.2em;
  color:var(--gold-lt);
  animation:fadeIn 1.1s .5s both;
}
.enso{ width:130px; height:130px; }
.enso__ring{
  fill:none;
  stroke:var(--gold);
  stroke-width:3.2;
  stroke-linecap:round;
  stroke-dasharray:239;
  stroke-dashoffset:239;
  transform:rotate(-115deg);
  transform-origin:center;
  animation:draw 1.6s var(--ease) forwards;
}
@keyframes draw{ to{ stroke-dashoffset:24; } }
@keyframes fadeIn{ from{opacity:0} to{opacity:1} }

/* =========================================================
   SAKURA CANVAS
   ========================================================= */
.sakura{
  position:fixed; inset:0;
  width:100%; height:100%;
  pointer-events:none;
  z-index:60;
}

/* =========================================================
   HEADER / NAV
   ========================================================= */
.header{
  position:fixed; top:0; left:0; width:100%;
  z-index:200;
  padding:22px 0;
  transition:padding .4s var(--ease), background .4s var(--ease), box-shadow .4s var(--ease);
}
.header::after{
  content:''; position:absolute; inset:0;
  background:rgba(14,12,10,.86);
  backdrop-filter:blur(14px);
  border-bottom:1px solid rgba(201,148,47,.18);
  opacity:0; transition:opacity .4s var(--ease);
  z-index:-1;
}
.header.is-stuck{ padding:12px 0; }
.header.is-stuck::after{ opacity:1; }

.header__inner{
  max-width:var(--wrap); margin-inline:auto; padding-inline:24px;
  display:flex; align-items:center; justify-content:space-between; gap:24px;
}

.brand{ display:flex; align-items:center; gap:14px; }
.brand__seal{
  width:42px; height:42px; flex:none;
  display:grid; place-items:center;
  font-family:var(--f-jp); font-size:1.25rem;
  color:var(--washi);
  background:var(--shu);
  border-radius:4px;
  box-shadow:0 6px 20px -8px rgba(178,58,40,.8);
  transition:transform .5s var(--ease);
}
.brand:hover .brand__seal{ transform:rotate(-6deg) scale(1.06); }
.brand__seal--lg{ width:56px; height:56px; font-size:1.6rem; }
.brand__text{ display:flex; flex-direction:column; line-height:1.15; }
.brand__name{
  font-family:var(--f-display); font-weight:600;
  font-size:1.3rem; letter-spacing:.24em;
  color:var(--washi);
}
.brand__sub{
  font-family:var(--f-jp);
  font-size:.66rem; letter-spacing:.22em;
  color:var(--gold);
}

.nav{ display:flex; align-items:center; gap:36px; }
.nav__list{ display:flex; align-items:center; gap:30px; }
.nav__link{
  position:relative;
  font-size:.86rem; letter-spacing:.08em;
  color:rgba(246,241,231,.78);
  padding-bottom:4px;
  transition:color .35s var(--ease);
}
.nav__link em{
  font-family:var(--f-jp); font-style:normal;
  display:block;
  font-size:.62rem; letter-spacing:.2em;
  color:var(--gold);
  opacity:0; transform:translateY(4px);
  transition:opacity .35s var(--ease), transform .35s var(--ease);
  height:0;
}
.nav__link::after{
  content:''; position:absolute; left:0; bottom:0;
  width:100%; height:1px; background:var(--gold);
  transform:scaleX(0); transform-origin:right;
  transition:transform .4s var(--ease);
}
.nav__link:hover,.nav__link.is-active{ color:var(--gold-lt); }
.nav__link:hover::after,.nav__link.is-active::after{ transform:scaleX(1); transform-origin:left; }
.nav__link:hover em{ opacity:1; transform:translateY(0); }
.nav__cta{ --pad:11px 26px; font-size:.8rem; }

.burger{ display:none; width:34px; height:24px; position:relative; }
.burger span{
  position:absolute; left:0; width:100%; height:1.5px;
  background:var(--washi); transition:.4s var(--ease);
}
.burger span:nth-child(1){ top:0; }
.burger span:nth-child(2){ top:11px; }
.burger span:nth-child(3){ top:22px; }
.burger.is-open span:nth-child(1){ top:11px; transform:rotate(45deg); background:var(--gold); }
.burger.is-open span:nth-child(2){ opacity:0; }
.burger.is-open span:nth-child(3){ top:11px; transform:rotate(-45deg); background:var(--gold); }

/* =========================================================
   HERO
   ========================================================= */
.hero{
  position:relative;
  min-height:100vh;
  display:flex; align-items:center;
  padding:calc(var(--nav-h) + 60px) 0 90px;
  background:var(--sumi);
  overflow:hidden;
}
/* The facade photograph.
   The source is only 614px wide, so it is deliberately NOT stretched across
   the full viewport — it occupies the right ~64% and dissolves into the ink
   on the left, where the wordmark sits. That roughly halves the enlargement
   factor, and because a 2000px file is then drawn into a ~1230px slot the
   browser downsamples it, which reads sharp instead of soft. */
.hero__media{
  position:absolute; top:0; right:0; bottom:0;
  width:64%;
  z-index:0; overflow:hidden;
  -webkit-mask-image:linear-gradient(90deg, transparent 0%, #000 36%);
          mask-image:linear-gradient(90deg, transparent 0%, #000 36%);
}
.ph--hero{ width:100%; height:100%; }
.ph--hero::after{ font-size:clamp(8rem,26vw,22rem); color:rgba(227,183,92,.07); }
.ph--hero img{
  opacity:.95;
  object-position:center 45%;   /* hold the roofline and the lit entrance */
  transform-origin:65% 50%;
  animation:kenburns 30s ease-in-out infinite alternate;
}
/* kept shallow — zooming an upscaled photo only softens it further */
@keyframes kenburns{ from{ transform:scale(1); } to{ transform:scale(1.04); } }

/* Scrim. Now that the photo is masked away from the left, this is much
   lighter over the building itself — it only needs to seat the image into
   the header and the marquee, and hold the text side dark. */
.hero__glow{
  position:absolute; inset:0; z-index:2;
  background:
    /* lift the existing amber uplighting a little */
    radial-gradient(46% 55% at 72% 56%, rgba(227,183,92,.12), transparent 68%),
    /* legibility ramp across the text side */
    linear-gradient(90deg,
      rgba(14,12,10,.92) 0%,
      rgba(14,12,10,.70) 38%,
      rgba(14,12,10,.24) 62%,
      rgba(14,12,10,.10) 100%),
    /* seat it into the header and the marquee below */
    linear-gradient(to bottom, rgba(14,12,10,.72) 0%, transparent 15%),
    linear-gradient(to top, var(--sumi) 1%, transparent 30%);
}

.hero__body{
  position:relative; z-index:5;
  width:100%; max-width:var(--wrap);
  margin-inline:auto; padding-inline:24px;
}
.eyebrow{
  display:flex; align-items:center; gap:12px; flex-wrap:wrap;
  font-size:.76rem; letter-spacing:.28em; text-transform:uppercase;
  color:var(--gold);
  margin-bottom:26px;
}
.eyebrow .sep{ color:rgba(246,241,231,.4); }
.dot{ width:7px; height:7px; border-radius:50%; background:var(--gold); position:relative; }
.dot::after{
  content:''; position:absolute; inset:0; border-radius:50%;
  background:var(--gold); animation:ping 1.9s infinite;
}
@keyframes ping{ 0%{transform:scale(1);opacity:.8} 80%,100%{transform:scale(3);opacity:0} }

.hero__title{
  font-family:var(--f-display);
  font-weight:500;
  font-size:clamp(3.6rem,12vw,10rem);
  line-height:.92;
  color:var(--washi);
  letter-spacing:.04em;
  margin-bottom:30px;
}
.hero__title .line{ display:block; }
.line--outline{
  color:transparent;
  -webkit-text-stroke:1.4px rgba(227,183,92,.85);
  letter-spacing:.12em;
  font-size:.72em;
  margin-top:6px;
}
.hero__lede{
  max-width:520px;
  font-size:clamp(1rem,1.6vw,1.2rem);
  color:rgba(246,241,231,.78);
  margin-bottom:38px;
}
.hero__actions{ display:flex; flex-wrap:wrap; gap:16px; margin-bottom:64px; }

.hero__meta{
  display:flex; flex-wrap:wrap; gap:44px;
  padding-top:28px;
  border-top:1px solid rgba(246,241,231,.14);
  max-width:640px;
}
.hero__meta div{ display:flex; flex-direction:column; }
.hero__meta strong{
  font-family:var(--f-display); font-weight:500;
  font-size:1.15rem; color:var(--gold-lt); letter-spacing:.04em;
}
.hero__meta span{ font-size:.74rem; letter-spacing:.18em; text-transform:uppercase; color:var(--t-mute); }

/* Noren curtain — currently NOT in the markup. It was hanging over the
   facade photo's signage and colliding with the nav. To bring it back,
   restore the .noren block in index.html above .hero__body. */
.noren{
  position:absolute; top:0; right:6%;
  display:flex; gap:4px; z-index:4;
  pointer-events:none;
}
.noren__panel{
  width:58px; height:210px;
  background:linear-gradient(180deg, #7E2418 0%, #5E1B12 100%);
  border-radius:0 0 3px 3px;
  display:flex; justify-content:center; padding-top:52px;
  box-shadow:inset 0 -30px 40px -30px rgba(0,0,0,.7), 0 14px 30px -18px rgba(0,0,0,.9);
  transform-origin:top center;
  animation:sway 6s ease-in-out infinite;
}
.noren__panel:nth-child(2){ animation-delay:.4s; }
.noren__panel:nth-child(3){ animation-delay:.8s; }
.noren__panel:nth-child(4){ animation-delay:1.2s; }
.noren__panel i{
  font-family:var(--f-jp); font-style:normal;
  font-size:1.5rem; color:rgba(246,241,231,.9);
  writing-mode:vertical-rl;
}
@keyframes sway{ 0%,100%{ transform:rotate(0) } 50%{ transform:rotate(.9deg) } }

.scroll-cue{
  position:absolute; bottom:34px; left:50%; transform:translateX(-50%);
  z-index:6; display:grid; justify-items:center; gap:10px;
}
.scroll-cue__jp{
  writing-mode:vertical-rl; font-family:var(--f-jp);
  font-size:.7rem; letter-spacing:.3em; color:var(--gold);
}
.scroll-cue__line{ width:1px; height:56px; background:linear-gradient(var(--gold), transparent); }
.scroll-cue__line::after{
  content:''; display:block; width:1px; height:18px; background:var(--washi);
  animation:drop 2s infinite;
}
@keyframes drop{ 0%{transform:translateY(0);opacity:0} 40%{opacity:1} 100%{transform:translateY(40px);opacity:0} }

/* =========================================================
   MARQUEE
   ========================================================= */
.marquee{
  background:var(--shu);
  color:var(--washi);
  padding:14px 0;
  overflow:hidden;
  border-block:1px solid rgba(0,0,0,.25);
}
.marquee__track{
  display:flex; align-items:center; gap:34px;
  width:max-content;
  animation:scroll 30s linear infinite;
}
.marquee__track span{
  font-family:var(--f-jp);
  font-size:.9rem; letter-spacing:.24em; white-space:nowrap;
}
.marquee .mk{ color:rgba(246,241,231,.55); }
@keyframes scroll{ to{ transform:translateX(-50%); } }

/* =========================================================
   PHILOSOPHY
   ========================================================= */
.philosophy{
  padding:120px 0;
  background:var(--washi);
  position:relative;
}
/* asanoha-ish paper texture */
.philosophy::before{
  content:''; position:absolute; inset:0; pointer-events:none;
  background-image:
    linear-gradient(30deg, rgba(23,19,15,.035) 1px, transparent 1px),
    linear-gradient(-30deg, rgba(23,19,15,.035) 1px, transparent 1px);
  background-size:44px 26px;
}
.phil__grid{
  position:relative;
  display:grid; grid-template-columns:.85fr 1.15fr;
  gap:80px; align-items:center;
}
.phil__art{ position:relative; display:grid; place-items:center; aspect-ratio:1; }
.enso--lg{ width:100%; max-width:400px; height:auto; }
.enso--lg .enso__ring{ stroke:rgba(178,58,40,.55); stroke-width:5; stroke-dasharray:478; stroke-dashoffset:478; }
.phil__art.is-in .enso--lg .enso__ring{ animation:draw2 2.2s var(--ease) forwards; }
@keyframes draw2{ to{ stroke-dashoffset:46; } }
.phil__kanji{
  position:absolute;
  font-family:var(--f-jp);
  font-size:clamp(3rem,7vw,5.4rem);
  color:var(--t-dark);
}
.phil__text p{ color:var(--t-mid); margin-top:20px; max-width:56ch; }
.phil__text .h2{ margin-bottom:6px; }

.stats{ display:flex; flex-wrap:wrap; gap:52px; margin-top:44px; padding-top:34px; border-top:1px solid var(--line); }
.stat{ display:flex; flex-direction:column; }
.stat b{
  font-family:var(--f-display); font-weight:500;
  font-size:2.6rem; line-height:1; color:var(--shu);
}
.stat b::after{ content:'+'; font-size:.6em; color:var(--gold); }
.stat span{ font-size:.74rem; letter-spacing:.18em; text-transform:uppercase; color:var(--t-mid); margin-top:8px; }

/* =========================================================
   MENU PAGE
   ========================================================= */
/* page header band */
.pagehead{
  position:relative;
  padding:calc(var(--nav-h) + 90px) 0 80px;
  background:var(--sumi);
  color:var(--t-light);
  overflow:hidden;
}
.pagehead__pattern{
  position:absolute; inset:0;
  background:
    repeating-linear-gradient(90deg,
      rgba(62,48,33,.55) 0 5px, transparent 5px 22px);
  opacity:.5;
  mask-image:linear-gradient(to bottom, #000, transparent 85%);
  -webkit-mask-image:linear-gradient(to bottom, #000, transparent 85%);
}
.pagehead__inner{ position:relative; z-index:2; max-width:760px; }
.crumbs{
  display:flex; align-items:center; gap:12px;
  font-size:.76rem; letter-spacing:.16em; text-transform:uppercase;
  color:var(--t-mute); margin-bottom:28px;
}
.crumbs a{ transition:color .3s ease; }
.crumbs a:hover{ color:var(--gold); }
.crumbs b{ color:var(--gold); font-weight:500; }
.pagehead__jp{
  display:block;
  font-family:var(--f-jp);
  font-size:.9rem; letter-spacing:.4em;
  color:var(--gold); margin-bottom:16px;
}
.pagehead h1{
  font-family:var(--f-display); font-weight:500;
  font-size:clamp(2.8rem,7vw,5rem);
  line-height:1.05; color:var(--washi);
  margin-bottom:22px;
}
.pagehead p{ color:var(--t-mute); font-size:1.05rem; max-width:56ch; }

/* sticky category rail — sits directly under the stuck header (66px) */
.rail{
  position:sticky; top:66px; z-index:150;
  background:rgba(246,241,231,.94);
  backdrop-filter:blur(12px);
  border-bottom:1px solid var(--line);
  transition:box-shadow .4s var(--ease);
}
.rail.is-stuck{ box-shadow:0 14px 30px -22px rgba(23,19,15,.6); }
.rail__inner{
  display:flex; align-items:center; justify-content:space-between; gap:24px;
  padding-block:10px;
}
.rail__links{
  display:flex; gap:4px;
  overflow-x:auto; scrollbar-width:none;
}
.rail__links::-webkit-scrollbar{ display:none; }
.rail__link{
  display:flex; align-items:center; gap:8px;
  padding:11px 16px; white-space:nowrap;
  font-size:.85rem; color:var(--t-mid);
  border-bottom:2px solid transparent;
  transition:.35s var(--ease);
}
.rail__link em{
  font-family:var(--f-jp); font-style:normal; font-size:1.05rem;
  color:var(--gold); opacity:.55; transition:opacity .35s var(--ease);
}
.rail__link:hover{ color:var(--t-dark); }
.rail__link.is-active{ color:var(--t-dark); font-weight:500; border-bottom-color:var(--shu); }
.rail__link.is-active em{ opacity:1; }

.rail__search{ flex:none; }
.rail__search input{
  width:220px;
  background:transparent;
  border:1px solid var(--line);
  padding:10px 16px;
  font-family:var(--f-body); font-size:.86rem; font-weight:300;
  color:var(--t-dark);
  transition:.4s var(--ease);
}
.rail__search input::placeholder{ color:var(--t-mid); }
.rail__search input:focus{
  outline:none; border-color:var(--gold);
  background:#fff; width:260px;
}

/* course sections */
.course{ padding:90px 0 30px; background:var(--washi-2); scroll-margin-top:130px; }
.course:nth-of-type(even){ background:var(--washi); }
.course.is-empty{ display:none; }
.course__head{
  display:flex; align-items:center; gap:26px;
  padding-bottom:26px; margin-bottom:34px;
  border-bottom:1px solid var(--line);
}
.course__kanji{
  width:74px; height:74px; flex:none;
  display:grid; place-items:center;
  font-family:var(--f-jp); font-size:2.1rem;
  color:var(--washi); background:var(--shu);
  box-shadow:0 14px 30px -14px rgba(178,58,40,.7);
}
.course__head h2{
  font-family:var(--f-display); font-weight:500;
  font-size:clamp(1.7rem,3.4vw,2.5rem);
  line-height:1.15;
}
.course__jp{
  font-size:.88rem; color:var(--t-mid); margin-top:5px;
}
.course__grid{
  display:grid; grid-template-columns:repeat(2,1fr);
  gap:14px 56px;
}

/* no search results */
.noresults{
  padding:90px 24px; text-align:center;
  background:var(--washi-2);
  color:var(--t-mid);
}
.noresults em{
  display:block;
  font-family:var(--f-jp); font-style:normal;
  font-size:3rem; color:var(--line); margin-bottom:14px;
}
.noresults button{
  color:var(--shu); border-bottom:1px solid currentColor; padding-bottom:1px;
}

/* dietary / allergen notes */
.notes{ padding:80px 0; background:var(--washi); border-top:1px solid var(--line); }
.notes__grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:44px; }
.notes__grid em{
  font-family:var(--f-jp); font-style:normal;
  font-size:1.5rem; color:var(--gold);
  display:block; margin-bottom:14px;
}
.notes__grid h3{ font-family:var(--f-display); font-weight:500; font-size:1.2rem; margin-bottom:8px; }
.notes__grid p{ font-size:.9rem; color:var(--t-mid); }

/* dark variant, used for the seatings block on the reservation page */
.notes--dark{
  background:var(--kuro); color:var(--t-light);
  border-top-color:rgba(246,241,231,.1);
}
.notes--dark .h2{ color:var(--washi); }
.notes--dark .notes__grid h3{ color:var(--washi); }
.notes--dark .notes__grid p{ color:var(--t-mute); }

.dish{
  padding:22px 0;
  border-bottom:1px dashed rgba(226,217,199,.9);
  position:relative;
  opacity:0; transform:translateY(14px);
  animation:dishIn .5s var(--ease) forwards;
}
@keyframes dishIn{ to{ opacity:1; transform:none; } }
.dish.is-hidden{ display:none; }
.dish__head{ display:flex; align-items:baseline; gap:12px; }
.dish__head h3{
  font-family:var(--f-display); font-weight:500;
  font-size:1.14rem; white-space:nowrap;
}
.dish__head h3 em{
  font-family:var(--f-jp); font-style:normal;
  font-size:.9rem; color:var(--gold); margin-left:6px;
}
.dot-lead{ flex:1; border-bottom:1px dotted rgba(90,82,72,.45); transform:translateY(-4px); }
.dish__head b{ font-family:var(--f-display); font-weight:500; color:var(--shu); white-space:nowrap; }
.dish p{ font-size:.9rem; color:var(--t-mid); margin-top:6px; max-width:48ch; }
.dish__tag{
  display:inline-block; margin-top:9px;
  font-size:.62rem; letter-spacing:.18em; text-transform:uppercase;
  padding:3px 10px;
  background:rgba(178,58,40,.1); color:var(--shu);
  border:1px solid rgba(178,58,40,.25);
}
.dish__tag--veg{ background:rgba(124,139,91,.12); color:#5F6E42; border-color:rgba(124,139,91,.3); }

/* =========================================================
   SIGNATURES
   ========================================================= */
.signatures{ padding:120px 0; background:var(--kuro); color:var(--t-light); }
.signatures .h2{ color:var(--washi); }

.sig__grid{
  display:grid; grid-template-columns:repeat(4,1fr);
  gap:18px;
}
.sig{ position:relative; overflow:hidden; cursor:pointer; }
.sig .ph{ aspect-ratio:3/4; }
.sig--wide{ grid-column:span 4; }
.sig--wide .ph{ aspect-ratio:16/6; }
.sig::before{
  content:''; position:absolute; inset:0; z-index:3;
  background:linear-gradient(to top, rgba(14,12,10,.9) 8%, transparent 55%);
  transition:opacity .5s var(--ease);
}
.sig:hover img{ transform:scale(1.07); }
.sig__body{
  position:absolute; left:0; bottom:0; z-index:4;
  padding:26px;
  transform:translateY(8px); opacity:.92;
  transition:transform .5s var(--ease), opacity .5s var(--ease);
}
.sig:hover .sig__body{ transform:translateY(0); opacity:1; }
.sig__body h3{ font-family:var(--f-display); font-weight:500; font-size:1.2rem; }
.sig__body span{ color:var(--gold-lt); font-size:.86rem; letter-spacing:.08em; }
.sig::after{
  content:''; position:absolute; inset:12px; z-index:4;
  border:1px solid rgba(227,183,92,.0);
  transition:border-color .5s var(--ease);
  pointer-events:none;
}
.sig:hover::after{ border-color:rgba(227,183,92,.45); }

/* =========================================================
   EXPERIENCE
   ========================================================= */
.experience{ padding:120px 0; background:var(--washi-2); }
.exp__grid{ display:grid; grid-template-columns:1.05fr .95fr; gap:80px; align-items:center; }
.exp__text > p{ color:var(--t-mid); margin-top:18px; max-width:52ch; }
.exp__cards{ display:grid; gap:12px; margin:36px 0 34px; }
.exp-card{
  position:relative;
  display:grid; grid-template-columns:auto 1fr; column-gap:20px;
  align-items:start; text-align:left;
  padding:22px 24px;
  background:var(--washi-2);
  border:1px solid var(--line);
  border-left:2px solid transparent;
  transition:.45s var(--ease);
}
.exp-card em{
  grid-row:span 2;
  font-family:var(--f-jp); font-style:normal;
  font-size:1.7rem; color:var(--gold);
  width:52px; height:52px; display:grid; place-items:center;
  background:var(--washi); border:1px solid var(--line);
  transition:.45s var(--ease);
}
.exp-card h4{ font-family:var(--f-display); font-weight:500; font-size:1.12rem; }
.exp-card p{ font-size:.88rem; color:var(--t-mid); margin-top:4px; }
.exp-card:hover, .exp-card.is-active{
  background:#fff;
  border-left-color:var(--shu);
  transform:translateX(6px);
  box-shadow:0 18px 40px -30px rgba(23,19,15,.7);
}
.exp-card.is-active em{ background:var(--shu); color:var(--washi); border-color:var(--shu); }

.exp__media{ position:relative; z-index:0; }
.ph--tall{ aspect-ratio:4/5; }
.exp__media::before{
  content:''; position:absolute; inset:-14px -14px 14px 14px;
  border:1px solid var(--line); z-index:-1;
}
.exp__stamp{
  position:absolute; right:-26px; bottom:34px;
  width:112px; height:112px;
  background:var(--shu); color:var(--washi);
  display:grid; place-items:center; align-content:center; gap:2px;
  border-radius:50%;
  box-shadow:0 20px 40px -18px rgba(178,58,40,.75);
  z-index:5;
}
.exp__stamp span{ font-family:var(--f-jp); font-size:1.9rem; line-height:1; }
.exp__stamp small{ font-size:.6rem; letter-spacing:.14em; text-align:center; line-height:1.3; }

/* =========================================================
   OMAKASE
   ========================================================= */
.omakase{
  position:relative;
  padding:130px 0;
  background:var(--timber);
  color:var(--t-light);
  text-align:center;
  overflow:hidden;
}
/* seigaiha (wave) pattern */
.omakase__pattern{
  position:absolute; inset:0;
  background-image:
    radial-gradient(circle at 50% 100%, transparent 22px, rgba(227,183,92,.09) 23px, rgba(227,183,92,.09) 24px, transparent 25px),
    radial-gradient(circle at 0 100%,   transparent 22px, rgba(227,183,92,.09) 23px, rgba(227,183,92,.09) 24px, transparent 25px),
    radial-gradient(circle at 100% 100%,transparent 22px, rgba(227,183,92,.09) 23px, rgba(227,183,92,.09) 24px, transparent 25px);
  background-size:56px 28px;
  opacity:.9;
}
.omakase__inner{ position:relative; z-index:2; max-width:720px; }
.omakase .h2{ color:var(--washi); }
.omakase p{ color:var(--t-mute); margin-top:20px; }
.omakase__price{ font-family:var(--f-display); font-size:1.15rem; color:var(--washi) !important; margin:26px 0 32px !important; }
.omakase__price b{ color:var(--gold-lt); font-size:1.7rem; }
.omakase .section-label::before{ display:none; }

/* =========================================================
   RESERVE BAND  (homepage — the form lives on reserve.html)
   ========================================================= */
.band{
  position:relative;
  padding:90px 0;
  background:var(--timber);
  color:var(--t-light);
  overflow:hidden;
}
.band__pattern{
  position:absolute; inset:0;
  background:repeating-linear-gradient(90deg,
    rgba(62,48,33,.9) 0 5px, transparent 5px 24px);
  opacity:.45;
  -webkit-mask-image:linear-gradient(90deg, #000, transparent 72%);
          mask-image:linear-gradient(90deg, #000, transparent 72%);
}
.band__inner{
  position:relative; z-index:2;
  display:flex; align-items:center; justify-content:space-between;
  gap:48px; flex-wrap:wrap;
}
.band .h2{ color:var(--washi); }
.band p{ color:var(--t-mute); margin-top:14px; max-width:46ch; }
.band__actions{ display:flex; gap:14px; flex-wrap:wrap; }

/* =========================================================
   REVIEWS
   ========================================================= */
.reviews{ padding:120px 0; background:var(--washi); }
.slider{ max-width:940px; margin-inline:auto; }
.slider__viewport{ overflow:hidden; }
.slider__track{ display:flex; transition:transform .65s var(--ease); }
.review{
  flex:0 0 100%;
  padding:0 8px;
  text-align:center;
}
.review__mark{
  display:block;
  font-family:var(--f-display);
  font-size:5rem; line-height:.6;
  color:var(--gold); opacity:.5;
  margin-bottom:26px;
}
.review blockquote{
  font-family:var(--f-display);
  font-size:clamp(1.15rem,2.3vw,1.65rem);
  line-height:1.6; font-weight:400;
  color:var(--t-dark);
  max-width:44ch; margin-inline:auto;
}
.review figcaption{ margin-top:30px; display:grid; gap:2px; }
.review figcaption b{ font-weight:500; letter-spacing:.06em; }
.review figcaption span{ font-size:.74rem; letter-spacing:.18em; text-transform:uppercase; color:var(--t-mid); }

.slider__nav{ display:flex; align-items:center; justify-content:center; gap:26px; margin-top:48px; }
.slider__btn{
  width:46px; height:46px;
  border:1px solid var(--line);
  display:grid; place-items:center;
  color:var(--t-mid);
  transition:.4s var(--ease);
}
.slider__btn:hover{ background:var(--shu); border-color:var(--shu); color:var(--washi); }
.slider__dots{ display:flex; gap:9px; }
.slider__dots button{
  width:26px; height:2px; background:var(--line);
  transition:.4s var(--ease);
}
.slider__dots button.is-active{ background:var(--shu); width:40px; }

/* =========================================================
   GALLERY — shared
   ========================================================= */
.gallery{ padding:120px 0; background:var(--washi); }
.gal{ cursor:pointer; }
.gal::before{
  content:''; position:absolute; inset:0; z-index:3;
  background:rgba(14,12,10,.35);
  transition:opacity .5s var(--ease);
}
.gal:hover::before, .gal:focus-visible::before{ opacity:0; }
.gal:hover img{ transform:scale(1.08); }
.gal:focus-visible{ outline:2px solid var(--gold); outline-offset:3px; }

/* ---------- homepage carousel slideshow ----------
   A track of cards that advances itself on a timer. It runs in black and
   white; hovering a card brings its colour back, and hovering anywhere in
   the carousel pauses the advance so you can look properly. */
.gcar{
  --gcar-delay: 4s;
  position:relative;
  max-width:1600px; margin-inline:auto;
  padding-inline:24px;
}
.gcar__viewport{
  display:flex; gap:10px;
  overflow-x:auto;
  scroll-snap-type:x mandatory;
  scroll-behavior:smooth;
  scrollbar-width:none;
  padding-block:4px;              /* room for focus rings */
}
.gcar__viewport::-webkit-scrollbar{ display:none; }
.gcar__viewport:focus-visible{ outline:2px solid var(--gold); outline-offset:4px; }

.gcar__item{
  flex:0 0 clamp(230px, 24vw, 320px);
  aspect-ratio:3/4;
  scroll-snap-align:start;
}
/* black and white until you hover — colour is the reward */
.gcar__item img{
  filter:grayscale(1) contrast(1.06);
  transition:filter .7s var(--ease), transform .9s var(--ease);
}
.gcar__item:hover img,
.gcar__item:focus-visible img{ filter:grayscale(0) contrast(1); }
/* the dark veil lifts with the colour */
.gcar__item::before{ background:rgba(14,12,10,.45); }

.gcar__item figcaption{
  position:absolute; left:0; right:0; bottom:0; z-index:4;
  padding:44px 18px 16px;
  font-family:var(--f-display);
  font-size:.95rem;
  color:var(--washi);
  background:linear-gradient(to top, rgba(14,12,10,.9), transparent);
  opacity:0; transform:translateY(8px);
  transition:opacity .45s var(--ease), transform .45s var(--ease);
}
.gcar__item:hover figcaption,
.gcar__item:focus-visible figcaption{ opacity:1; transform:translateY(0); }

/* how long until the next advance */
.gcar__bar{
  position:relative;
  height:2px; margin:22px 0 0;
  background:var(--line);
}
.gcar__bar span{
  display:block; height:100%; width:0;
  background:var(--shu);
}
.gcar.is-playing .gcar__bar span{
  animation:gcarFill var(--gcar-delay) linear infinite;
}
.gcar:hover .gcar__bar span{ animation-play-state:paused; }
@keyframes gcarFill{ from{ width:0; } to{ width:100%; } }

.gcar__btn{
  position:absolute; top:calc(50% - 12px); z-index:10;
  transform:translateY(-50%);
  width:52px; height:52px;
  display:grid; place-items:center;
  background:var(--washi);
  border:1px solid var(--line);
  color:var(--t-dark); font-size:1.05rem;
  box-shadow:0 16px 34px -20px rgba(23,19,15,.8);
  transition:.4s var(--ease);
}
.gcar__btn:hover{ background:var(--shu); border-color:var(--shu); color:var(--washi); }
.gcar__btn--prev{ left:6px; }
.gcar__btn--next{ right:6px; }

.gallery__cta{ text-align:center; margin-top:30px; }
.gallery__cta p{ font-size:.94rem; color:var(--t-mid); }
.gallery__cta a{
  color:var(--shu);
  border-bottom:1px solid rgba(178,58,40,.35);
  padding-bottom:2px;
  transition:border-color .35s var(--ease);
}
.gallery__cta a:hover{ border-bottom-color:var(--shu); }

/* ---------- gallery page ---------- */
.gfilters{
  position:sticky; top:66px; z-index:150;
  background:rgba(246,241,231,.94);
  backdrop-filter:blur(12px);
  border-bottom:1px solid var(--line);
}
.gfilters__inner{
  display:flex; gap:4px; flex-wrap:wrap;
  justify-content:center;
  padding-block:10px;
}
.gfilter{
  display:flex; align-items:center; gap:8px;
  padding:11px 20px; white-space:nowrap;
  font-size:.85rem; color:var(--t-mid);
  border-bottom:2px solid transparent;
  transition:.35s var(--ease);
}
.gfilter em{
  font-family:var(--f-jp); font-style:normal; font-size:1.05rem;
  color:var(--gold); opacity:.55; transition:opacity .35s var(--ease);
}
.gfilter:hover{ color:var(--t-dark); }
.gfilter.is-active{ color:var(--t-dark); font-weight:500; border-bottom-color:var(--shu); }
.gfilter.is-active em{ opacity:1; }

.gpage{ padding:70px 0 110px; background:var(--washi); }
.gpage__grid{
  display:grid;
  grid-template-columns:repeat(4,1fr);
  gap:12px;
}
.gitem{ aspect-ratio:3/4; }
.gitem--wide{ grid-column:span 2; aspect-ratio:3/2; }
.gitem.is-hidden{ display:none; }
.gitem figcaption{
  position:absolute; left:0; right:0; bottom:0; z-index:4;
  padding:34px 20px 18px;
  font-size:.84rem; letter-spacing:.04em;
  color:var(--washi);
  background:linear-gradient(to top, rgba(14,12,10,.88), transparent);
  opacity:0; transform:translateY(8px);
  transition:opacity .45s var(--ease), transform .45s var(--ease);
}
.gitem:hover figcaption,
.gitem:focus-visible figcaption{ opacity:1; transform:translateY(0); }

/* =========================================================
   RESERVATION
   ========================================================= */
.reserve{ padding:120px 0; background:var(--kuro); color:var(--t-light); }
.reserve--page{ padding:100px 0 110px; }   /* sits under a page head */
.reserve .h2{ color:var(--washi); }
.reserve__grid{ display:grid; grid-template-columns:1fr 1.05fr; gap:80px; }
.reserve__intro > p{ color:var(--t-mute); margin-top:18px; max-width:44ch; }

.reserve__facts{ margin-top:44px; display:grid; gap:2px; }
.reserve__facts li{
  display:flex; align-items:center; gap:20px;
  padding:20px 0;
  border-bottom:1px solid rgba(246,241,231,.1);
}
.reserve__facts em{
  font-family:var(--f-jp); font-style:normal;
  font-size:1.25rem; color:var(--gold);
  width:48px; height:48px; flex:none;
  display:grid; place-items:center;
  border:1px solid rgba(227,183,92,.3);
}
.reserve__facts b{ display:block; font-weight:500; font-size:1.02rem; }
.reserve__facts span{ font-size:.8rem; color:var(--t-mute); }

.form{
  background:rgba(246,241,231,.04);
  border:1px solid rgba(246,241,231,.12);
  padding:38px;
  display:grid; gap:18px;
  align-content:start;
}
.form__row{ display:grid; grid-template-columns:1fr 1fr; gap:18px; }
.form__row--3{ grid-template-columns:1fr 1fr 1fr; }
.field{ display:grid; gap:7px; }
.field > span{
  font-size:.72rem; letter-spacing:.18em; text-transform:uppercase;
  color:var(--gold);
}
.field > span i{ font-style:normal; color:var(--t-mute); letter-spacing:.06em; text-transform:none; }
.field input,.field select,.field textarea{
  width:100%;
  background:rgba(14,12,10,.55);
  border:1px solid rgba(246,241,231,.16);
  color:var(--washi);
  padding:13px 15px;
  font-family:var(--f-body); font-size:.92rem; font-weight:300;
  transition:border-color .35s var(--ease), background .35s var(--ease);
}
.field textarea{ resize:vertical; }
.field input::placeholder,.field textarea::placeholder{ color:rgba(246,241,231,.32); }
.field input:focus,.field select:focus,.field textarea:focus{
  outline:none; border-color:var(--gold); background:rgba(14,12,10,.8);
}
.field select option{ background:var(--kuro); color:var(--washi); }
/* date pickers render dark on some browsers */
.field input[type="date"]::-webkit-calendar-picker-indicator{ filter:invert(1) sepia(1) saturate(3) hue-rotate(2deg); cursor:pointer; }
.err{ font-size:.72rem; color:#E0715C; min-height:0; opacity:0; transition:opacity .3s ease; }
.field.has-error input,.field.has-error select{ border-color:#E0715C; }
.field.has-error .err{ opacity:1; }
.form__note{
  font-family:var(--f-jp);
  font-size:.76rem; letter-spacing:.12em;
  color:var(--t-mute); text-align:center;
}

/* =========================================================
   CONTACT
   ========================================================= */
/* top padding matters now that this no longer sits under the booking form */
.contact{ padding:110px 0 120px; background:var(--kuro); color:var(--t-light); }
.contact__grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:2px; border:1px solid rgba(246,241,231,.1); }
.contact__card{
  padding:44px 38px;
  background:rgba(246,241,231,.02);
  border-right:1px solid rgba(246,241,231,.1);
  transition:background .45s var(--ease);
}
.contact__card:last-child{ border-right:none; }
.contact__card:hover{ background:rgba(227,183,92,.06); }
.contact__card em{
  font-family:var(--f-jp); font-style:normal;
  font-size:1.6rem; color:var(--gold);
  display:block; margin-bottom:18px;
}
.contact__card h3{ font-family:var(--f-display); font-weight:500; font-size:1.35rem; margin-bottom:10px; }
.contact__card p{ color:var(--t-mute); font-size:.95rem; }
.contact__card a{
  display:inline-block; margin-top:18px;
  font-size:.8rem; letter-spacing:.12em; color:var(--gold-lt);
  border-bottom:1px solid transparent; padding-bottom:2px;
  transition:border-color .35s var(--ease);
}
.contact__card a:hover{ border-color:var(--gold-lt); }

/* =========================================================
   404
   ========================================================= */
.e404{
  position:relative;
  min-height:100vh;
  display:grid; place-items:center;
  padding:calc(var(--nav-h) + 60px) 0 80px;
  background:var(--sumi);
  color:var(--t-light);
  text-align:center;
  overflow:hidden;
}
.e404__pattern{
  position:absolute; inset:0;
  background:repeating-linear-gradient(90deg,
    rgba(62,48,33,.75) 0 5px, transparent 5px 24px);
  opacity:.45;
  -webkit-mask-image:radial-gradient(70% 60% at 50% 50%, transparent, #000);
          mask-image:radial-gradient(70% 60% at 50% 50%, transparent, #000);
}
.e404__inner{ position:relative; z-index:2; max-width:620px; }
.e404__num{
  display:block;
  font-family:var(--f-jp);
  font-size:clamp(4rem,14vw,9rem);
  line-height:1;
  color:rgba(227,183,92,.16);
  letter-spacing:.1em;
  margin-bottom:18px;
}
.e404 h1{
  font-family:var(--f-display); font-weight:500;
  font-size:clamp(2rem,5vw,3.2rem);
  color:var(--washi);
  margin-bottom:18px;
}
.e404 p{ color:var(--t-mute); margin-bottom:34px; }
.e404__actions{ display:flex; gap:14px; justify-content:center; flex-wrap:wrap; }
.e404 .pagehead__jp{ margin-bottom:14px; }

/* =========================================================
   CONTACT PAGE
   ========================================================= */
.cdetails{ padding:90px 0 40px; background:var(--washi); }
.cdetails__grid{
  display:grid; grid-template-columns:repeat(4,1fr);
  gap:12px;
}
.ccard{
  display:flex; flex-direction:column;
  padding:34px 28px 28px;
  background:var(--washi-2);
  border:1px solid var(--line);
  border-top:2px solid transparent;
  transition:.45s var(--ease);
}
.ccard em{
  font-family:var(--f-jp); font-style:normal;
  font-size:1.6rem; color:var(--gold);
  width:52px; height:52px;
  display:grid; place-items:center;
  background:var(--washi); border:1px solid var(--line);
  margin-bottom:22px;
  transition:.45s var(--ease);
}
.ccard h3{
  font-family:var(--f-display); font-weight:500;
  font-size:1.25rem; margin-bottom:8px;
}
.ccard p{ color:var(--t-mid); font-size:.95rem; flex:1; }
.ccard__more,
.ccard__note{
  display:block; margin-top:18px;
  font-size:.78rem; letter-spacing:.14em;
  color:var(--gold);
}
.ccard__note{ color:var(--t-mid); letter-spacing:.04em; }
.ccard__note a{ color:var(--shu); }
a.ccard:hover{
  background:#fff;
  border-top-color:var(--shu);
  transform:translateY(-5px);
  box-shadow:0 26px 50px -34px rgba(23,19,15,.8);
}
a.ccard:hover em{ background:var(--shu); color:var(--washi); border-color:var(--shu); }
a.ccard:hover .ccard__more{ color:var(--shu); letter-spacing:.2em; }

/* map — the embed sits over a panel that shows if it cannot load */
.cmap{ padding:70px 0 100px; background:var(--washi); }
.cmap__frame{
  position:relative;
  aspect-ratio:16/7;
  overflow:hidden;
  border:1px solid var(--line);
  background:var(--kuro);
}
.cmap__fallback{
  position:absolute; inset:0; z-index:1;
  display:grid; place-content:center; justify-items:center; gap:14px;
  text-align:center; padding:24px;
  background:
    radial-gradient(120% 90% at 30% 15%, rgba(227,183,92,.14), transparent 60%),
    repeating-linear-gradient(90deg, rgba(0,0,0,.34) 0 2px, transparent 2px 11px),
    linear-gradient(160deg, #2E2318 0%, #17120D 55%, #241B12 100%);
}
.cmap__fallback span{
  font-family:var(--f-jp);
  font-size:4rem; color:rgba(227,183,92,.35);
  text-shadow:0 0 42px rgba(227,183,92,.3);
}
.cmap__fallback p{ color:var(--t-mute); letter-spacing:.06em; }
.cmap__frame iframe{
  position:absolute; inset:0; z-index:2;
  width:100%; height:100%;
  border:0;
  filter:grayscale(1) contrast(1.05) brightness(.92);
  transition:filter .6s var(--ease);
}
.cmap__frame:hover iframe{ filter:grayscale(0) contrast(1) brightness(1); }

/* =========================================================
   FOOTER
   ========================================================= */
.footer{ background:var(--sumi); color:var(--t-light); padding:90px 0 32px; }
.footer__grid{
  display:grid; grid-template-columns:1.6fr 1fr 1fr 1fr;
  gap:56px; padding-bottom:56px;
  border-bottom:1px solid rgba(246,241,231,.1);
}
.footer__brand h3{
  font-family:var(--f-display); font-weight:600;
  font-size:1.5rem; letter-spacing:.26em;
  margin:18px 0 12px;
}
.footer__brand p{ color:var(--t-mute); font-size:.92rem; max-width:34ch; }
.footer h4{
  font-size:.74rem; letter-spacing:.22em; text-transform:uppercase;
  color:var(--gold); margin-bottom:22px; font-weight:500;
}
.footer ul{ display:grid; gap:12px; }
.footer ul a{ color:var(--t-mute); font-size:.92rem; transition:color .35s var(--ease); }
.footer ul a:hover{ color:var(--gold-lt); }
.socials{ display:flex; gap:10px; }
.socials a{
  width:42px; height:42px; display:grid; place-items:center;
  border:1px solid rgba(246,241,231,.18);
  font-size:.72rem; letter-spacing:.08em; color:var(--t-mute);
  transition:.4s var(--ease);
}
.socials a:hover{ background:var(--shu); border-color:var(--shu); color:var(--washi); }
.footer__handle{ margin-top:18px; color:var(--t-mute); font-size:.88rem; }
.footer__base{
  display:flex; justify-content:space-between; flex-wrap:wrap; gap:14px;
  padding-top:28px;
  font-size:.8rem; color:rgba(246,241,231,.45);
}
.footer__base p:last-child{ font-family:var(--f-jp); letter-spacing:.1em; }

/* =========================================================
   LIGHTBOX
   ========================================================= */
.lightbox{
  position:fixed; inset:0; z-index:900;
  background:rgba(9,8,6,.95);
  display:flex; align-items:center; justify-content:center;
  opacity:0; visibility:hidden;
  transition:opacity .4s ease, visibility .4s ease;
}
.lightbox.is-open{ opacity:1; visibility:visible; }
.lightbox__stage{
  width:min(86vw,900px); max-height:82vh; aspect-ratio:4/3;
  position:relative; overflow:hidden;
}
.lightbox__stage .ph{ width:100%; height:100%; }
/* captions travel with the photo into the lightbox */
.lightbox__stage figcaption{
  position:absolute; left:0; right:0; bottom:0; z-index:5;
  padding:44px 26px 20px;
  font-size:.9rem; letter-spacing:.04em;
  color:var(--washi);
  background:linear-gradient(to top, rgba(14,12,10,.92), transparent);
}
.lightbox__close{
  position:absolute; top:26px; right:32px;
  font-size:2.4rem; line-height:1; color:var(--washi);
  transition:color .3s ease, transform .3s ease;
}
.lightbox__close:hover{ color:var(--gold); transform:rotate(90deg); }
.lightbox__nav{
  width:56px; height:56px; flex:none;
  border:1px solid rgba(246,241,231,.25);
  color:var(--washi); margin:0 22px;
  transition:.4s var(--ease);
}
.lightbox__nav:hover{ background:var(--gold); border-color:var(--gold); color:var(--sumi); }

/* =========================================================
   TOAST / BACK-TO-TOP
   ========================================================= */
.toast{
  position:fixed; right:28px; bottom:28px; z-index:800;
  display:flex; align-items:center; gap:16px;
  background:var(--kuro); color:var(--washi);
  border:1px solid rgba(227,183,92,.35);
  border-left:3px solid var(--gold);
  padding:18px 26px 18px 18px;
  box-shadow:0 26px 60px -24px rgba(0,0,0,.9);
  transform:translateY(150%); opacity:0;
  transition:transform .6s var(--ease), opacity .5s ease;
  max-width:calc(100vw - 56px);
}
.toast.is-visible{ transform:translateY(0); opacity:1; }
.toast__seal{
  width:44px; height:44px; flex:none;
  display:grid; place-items:center;
  font-family:var(--f-jp); font-size:1.3rem;
  background:var(--shu); color:var(--washi);
}
.toast b{ display:block; font-weight:500; font-size:.95rem; }
.toast small{ color:var(--t-mute); font-size:.82rem; }

.totop{
  position:fixed; left:28px; bottom:28px; z-index:700;
  width:48px; height:48px;
  background:var(--shu); color:var(--washi);
  font-family:var(--f-jp); font-size:1.15rem;
  display:grid; place-items:center;
  box-shadow:0 16px 34px -16px rgba(178,58,40,.85);
  opacity:0; visibility:hidden; transform:translateY(14px);
  transition:.45s var(--ease);
}
.totop.is-visible{ opacity:1; visibility:visible; transform:translateY(0); }
.totop:hover{ background:var(--gold); color:var(--sumi); }

/* =========================================================
   SCROLL REVEAL
   ========================================================= */
.reveal{
  opacity:0; transform:translateY(26px);
  transition:opacity .9s var(--ease), transform .9s var(--ease);
}
.reveal.is-in{ opacity:1; transform:none; }
.reveal[data-delay="1"]{ transition-delay:.12s; }
.reveal[data-delay="2"]{ transition-delay:.24s; }
.reveal[data-delay="3"]{ transition-delay:.36s; }
.reveal[data-delay="4"]{ transition-delay:.48s; }
.reveal[data-delay="5"]{ transition-delay:.60s; }
.reveal[data-delay="6"]{ transition-delay:.72s; }

/* =========================================================
   RESPONSIVE
   ========================================================= */
@media (max-width:1100px){
  .phil__grid,.exp__grid,.reserve__grid{ grid-template-columns:1fr; gap:56px; }
  .phil__art{ max-width:340px; margin-inline:auto; }
  .sig__grid{ grid-template-columns:repeat(2,1fr); }
  .sig--wide{ grid-column:span 2; }
  .gpage__grid{ grid-template-columns:repeat(3,1fr); }
  .footer__grid{ grid-template-columns:1fr 1fr; gap:44px; }
  .exp__stamp{ right:16px; }
  .notes__grid{ grid-template-columns:1fr; gap:32px; }
  .cdetails__grid{ grid-template-columns:repeat(2,1fr); }
}

@media (max-width:900px){
  .nav{
    position:fixed; inset:0 0 0 auto;
    width:min(84vw,380px);
    flex-direction:column; align-items:flex-start; justify-content:center;
    gap:22px;
    background:var(--sumi);
    border-left:1px solid rgba(227,183,92,.2);
    padding:0 40px;
    transform:translateX(100%);
    transition:transform .55s var(--ease);
    z-index:210;
  }
  .nav.is-open{ transform:translateX(0); }
  .nav::before{
    content:'将軍'; position:absolute; top:34px; left:40px;
    font-family:var(--f-jp); font-size:1.1rem; letter-spacing:.3em; color:var(--gold);
    writing-mode:vertical-rl; height:auto;
  }
  .nav__list{ flex-direction:column; align-items:flex-start; gap:24px; }
  .nav__link{ font-size:1.1rem; }
  .nav__link em{ height:auto; opacity:1; transform:none; margin-bottom:2px; }
  .burger{ display:block; z-index:220; }
  .course__grid{ grid-template-columns:1fr; gap:0; }
  .rail__inner{ flex-direction:column; align-items:stretch; gap:10px; padding-block:12px; }
  .rail__search input,.rail__search input:focus{ width:100%; }
  .contact__grid{ grid-template-columns:1fr; }
  .contact__card{ border-right:none; border-bottom:1px solid rgba(246,241,231,.1); }
  .noren{ right:4%; transform:scale(.8); transform-origin:top right; }
  .form{ padding:28px 22px; }
  .hero__meta{ gap:28px; }

  /* narrow screens: the photo goes full-bleed behind the text, so it needs
     the heavier scrim back to keep the wordmark legible */
  .hero__media{
    width:100%;
    -webkit-mask-image:none; mask-image:none;
  }
  .ph--hero img{ opacity:.8; }
  .hero__glow{
    background:
      radial-gradient(60% 50% at 60% 55%, rgba(227,183,92,.12), transparent 70%),
      linear-gradient(90deg, rgba(14,12,10,.88) 0%, rgba(14,12,10,.62) 100%),
      linear-gradient(to bottom, rgba(14,12,10,.8) 0%, transparent 18%),
      linear-gradient(to top, var(--sumi) 2%, transparent 42%);
  }
}

@media (max-width:640px){
  .wrap,.header__inner,.hero__body,.gcar{ padding-inline:18px; }
  .philosophy,.signatures,.experience,.reviews,.gallery,.reserve{ padding:80px 0; }
  .omakase{ padding:90px 0; }
  .contact{ padding:70px 0 80px; }
  .band{ padding:64px 0; }
  .band__inner{ gap:28px; }
  .band__actions .btn{ flex:1 1 100%; }
  .reserve--page{ padding:64px 0 70px; }
  .hero{ min-height:auto; padding:140px 0 90px; }
  .hero__actions{ margin-bottom:44px; }
  .hero__actions .btn{ flex:1 1 100%; }
  .sig__grid{ grid-template-columns:1fr; }
  .sig--wide{ grid-column:span 1; }
  .sig--wide .ph{ aspect-ratio:4/3; }
  .cdetails__grid{ grid-template-columns:1fr; }
  .cmap__frame{ aspect-ratio:4/3; }
  .cdetails{ padding:60px 0 24px; }
  .cmap{ padding:50px 0 70px; }
  .gpage__grid{ grid-template-columns:repeat(2,1fr); gap:8px; }
  .gitem--wide{ grid-column:span 2; }
  .gcar__item{ flex:0 0 74vw; }
  .gcar__btn{ width:44px; height:44px; }
  .gfilter{ padding:10px 14px; font-size:.8rem; }
  .form__row,.form__row--3{ grid-template-columns:1fr; }
  .footer__grid{ grid-template-columns:1fr; }
  .stats{ gap:30px; }
  .exp__stamp{ width:88px; height:88px; right:8px; bottom:-16px; }
  .rail__link{ padding:10px 13px; font-size:.8rem; }
  .pagehead{ padding:calc(var(--nav-h) + 60px) 0 60px; }
  .course{ padding:64px 0 24px; }
  .course__head{ gap:18px; }
  .course__kanji{ width:56px; height:56px; font-size:1.6rem; }
  .noren{ display:none; }
  .toast{ right:18px; left:18px; bottom:18px; }
  .totop{ left:18px; bottom:96px; }
  .lightbox__nav{ margin:0 8px; width:44px; height:44px; }
}

/* ---------- MOTION PREFERENCE ---------- */
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{
    animation-duration:.001ms !important;
    animation-iteration-count:1 !important;
    transition-duration:.001ms !important;
    scroll-behavior:auto !important;
  }
  .reveal{ opacity:1; transform:none; }
  .sakura{ display:none; }
}