/* 靜 SEI — stillness, ma, wabi-sabi restraint */

:root{
  --washi:    #ece7dd;
  --washi-2:  #e2dccf;
  --sumi:     #2a2823;
  --sumi-dim: #6f6a5f;
  --sage:     #97a087;
  --vermilion:#c0432d;
  --line:     rgba(42,40,35,.16);
  --line-soft:rgba(42,40,35,.08);

  --ja: "Shippori Mincho", serif;
  --latin: "Spectral", Georgia, serif;

  /* fluid spacing — ma grows on big screens */
  --gap-s: clamp(1.5rem, 3vw, 3rem);
  --gap-m: clamp(4rem, 9vw, 9rem);
  --gap-l: clamp(8rem, 18vw, 20rem);

  --maxw: 1200px;
  --pad: clamp(1.5rem, 6vw, 7rem);

  --ease: cubic-bezier(.22,.61,.36,1);
}

*{ box-sizing: border-box; }
html{ scroll-behavior: smooth; }

body{
  margin: 0;
  background: var(--washi);
  color: var(--sumi);
  font-family: var(--latin);
  font-weight: 300;
  font-size: 17px;
  line-height: 1.85;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  overflow-x: hidden;
  /* faint paper grain */
  background-image:
    radial-gradient(rgba(42,40,35,.018) 1px, transparent 1px);
  background-size: 3px 3px;
}

img{ display:block; max-width:100%; height:auto; }
a{ color: inherit; text-decoration: none; }
em{ font-style: italic; }

/* helpers */
.ja{ font-family: var(--ja); font-weight: 400; }
.sc{
  font-family: var(--latin);
  font-variant: small-caps;
  letter-spacing: .3em;
  text-transform: lowercase;
}
.nobr{ white-space: nowrap; }
.muted{ color: var(--sumi-dim); }

/* seal marks (vermilion appears sparingly) */
.seal-dot{
  display:inline-block; width:.42em; height:.42em;
  background: var(--vermilion);
  border-radius: 1px;
  margin-right:.55em; vertical-align: middle;
  transform: translateY(-.05em);
}
.seal-tick{
  display:inline-block; width:.34em; height:.34em;
  background: var(--vermilion);
  margin-right:.7em; vertical-align: middle;
  transform: translateY(-.08em);
}

/* kicker label */
.kicker{
  font-family: var(--latin);
  font-size: .72rem;
  letter-spacing: .34em;
  text-transform: lowercase;
  font-variant: small-caps;
  color: var(--sumi-dim);
  margin: 0 0 var(--gap-s);
  display:flex; align-items:center;
}
.kicker .ja, .kicker{ }

/* ---------- decorative vertical spines ---------- */
.spine{
  position: fixed;
  top: 0; bottom: 0;
  display:flex; align-items:center;
  writing-mode: vertical-rl;
  font-family: var(--ja);
  color: var(--sumi);
  opacity: .14;
  font-size: clamp(.85rem, 1vw, 1.05rem);
  letter-spacing: .5em;
  pointer-events: none;
  z-index: 1;
}
.spine--left{ left: clamp(.4rem, 2.2vw, 3rem); }

.vspine{
  writing-mode: vertical-rl;
  font-family: var(--ja);
  letter-spacing: .6em;
  color: var(--sumi);
  opacity: .2;
  font-size: clamp(1rem, 1.4vw, 1.4rem);
}

.vcap{
  writing-mode: vertical-rl;
  font-family: var(--ja);
  letter-spacing: .55em;
  color: var(--sage);
  opacity: .85;
  font-size: .95rem;
}

/* ---------- nav ---------- */
.nav{
  position: sticky; top: 0; z-index: 50;
  display:flex; align-items:center; justify-content:space-between;
  gap: var(--gap-s);
  padding: clamp(1.1rem,2vw,1.7rem) var(--pad);
  background: color-mix(in srgb, var(--washi) 86%, transparent);
  backdrop-filter: blur(8px) saturate(115%);
  border-bottom: 1px solid var(--line-soft);
}
.nav__mark{ display:flex; align-items: baseline; gap:.55em; }
.nav__ja{ font-family: var(--ja); font-weight: 600; font-size: 1.5rem; }
.nav__latin{
  font-family: var(--latin); font-variant: small-caps;
  letter-spacing: .4em; font-size: .78rem; color: var(--sumi-dim);
}
.nav__links{ display:flex; gap: clamp(1.2rem, 2.6vw, 3rem); }
.nav__links a{
  position: relative; display:flex; align-items: baseline; gap:.5em;
  padding: .2rem 0;
}
.nav__links .ja{ font-family: var(--ja); font-size: .98rem; }
.nav__links .en{
  font-family: var(--latin); font-variant: small-caps;
  letter-spacing: .26em; font-size: .68rem; color: var(--sumi-dim);
}
.nav__links a::after{
  content:""; position:absolute; left:0; right:100%; bottom:-.35em;
  height:1px; background: var(--sage);
  transition: right .7s var(--ease);
}
.nav__links a:hover::after{ right: 0; }

.nav__cta{
  display:flex; align-items:center; gap:.5em;
  border:1px solid var(--line);
  padding:.55em 1.2em;
  font-family: var(--latin); font-variant: small-caps; letter-spacing:.2em;
  font-size:.74rem;
  transition: border-color .6s var(--ease), background .6s var(--ease);
}
.nav__cta .ja{ font-family: var(--ja); font-size: .9rem; letter-spacing: normal; }
.nav__cta:hover{ border-color: var(--vermilion); background: color-mix(in srgb, var(--vermilion) 6%, transparent); }

/* ---------- layout shells ---------- */
section{ padding-left: var(--pad); padding-right: var(--pad); }
.menu__inner, .about__inner, .visit__inner{ max-width: var(--maxw); margin: 0 auto; }

/* ---------- HERO ---------- */
.hero{
  position: relative;
  min-height: 92vh;
  padding-top: var(--gap-m);
  padding-bottom: var(--gap-l);
  display: grid;
  grid-template-columns: minmax(0,1fr);
  align-content: center;
  max-width: 1320px; margin: 0 auto;
}
/* glyph font-size lives on the wrapper so the seal's em offsets track it */
.hero__char{
  position: relative;
  display: inline-block;
  width: max-content;        /* shrink-wrap to the glyph so the seal couples to it */
  justify-self: start;       /* grid item: don't stretch to the cell */
  line-height: .8;
  font-size: clamp(8rem, 30vw, 24rem);
}
.hero__glyph{
  font-family: var(--ja); font-weight: 600;
  font-size: 1em;
  color: var(--sumi);
  display:block;
  letter-spacing: -.02em;
}
/* vermilion seal square overlapping the glyph (offsets in glyph-em) */
.hero__seal{
  position:absolute;
  right: -.04em; bottom: .12em;   /* em = glyph-em (set on .hero__char) → couples to glyph */
  width: clamp(2.6rem, 7vw, 5.6rem);
  height: clamp(2.6rem, 7vw, 5.6rem);
  background: var(--vermilion);
  color: var(--washi);
  font-family: var(--ja); font-weight: 600;
  font-size: clamp(1.5rem, 4vw, 3.2rem);
  line-height: 1;
  display:flex; align-items:center; justify-content:center;
  border-radius: 2px;
  box-shadow: 0 1px 0 rgba(42,40,35,.12);
}
.hero__text{ margin-top: var(--gap-s); max-width: 30ch; }
.hero__label{
  font-family: var(--ja); font-size: clamp(1.05rem,1.6vw,1.45rem);
  letter-spacing:.12em; margin:0 0 .5rem;
}
.hero__promise{
  font-family: var(--latin); font-style: italic; font-weight:300;
  font-size: clamp(1.05rem,1.6vw,1.4rem); color: var(--sumi-dim);
  margin:0 0 1.4rem;
}
.hero__meta{
  font-size:.74rem; letter-spacing:.22em; color: var(--sumi-dim);
  font-variant: small-caps;
}
.hero__meta .ja{ font-variant: normal; letter-spacing:.12em; }

.hero__img{
  margin: 0;
  position: absolute;
  top: clamp(2rem, 6vw, 4rem); right: 0;
  width: clamp(150px, 26vw, 360px);
}
.hero__img img{
  border-radius: 2px;
  box-shadow: 0 24px 60px -38px rgba(42,40,35,.5);
}

/* ---------- ABOUT ---------- */
.about{ padding-top: var(--gap-m); padding-bottom: var(--gap-m); }
.about__head{
  font-family: var(--ja); font-weight: 500;
  font-size: clamp(3.5rem, 10vw, 7.5rem);
  line-height: .95; margin: 0 0 var(--gap-m);
  letter-spacing: .04em;
}
.about__sub{
  display:block; font-family: var(--latin); font-style: italic;
  font-weight: 300; font-size: clamp(1.1rem,2vw,1.6rem);
  color: var(--sumi-dim); letter-spacing: 0; margin-top:.6rem;
}
.about__cols{
  display:grid; grid-template-columns: repeat(2, minmax(0,1fr));
  gap: clamp(2.5rem, 6vw, 7rem);
  max-width: 56rem; margin-left: auto; /* asymmetric, pushed right */
}
.about__col .ja{
  font-family: var(--ja); font-size: 1.05rem; line-height: 2.1;
  margin: 0 0 1.5rem; color: var(--sumi);
}
.about__col .en{
  font-size: .98rem; line-height: 1.95; color: var(--sumi-dim);
  margin: 0;
}

/* ---------- MENU ---------- */
.menu{
  position: relative;
  padding-top: var(--gap-m); padding-bottom: var(--gap-m);
}
.menu .vspine{
  position: absolute; top: var(--gap-m); left: clamp(1rem, 3.5vw, 4rem);
  height: 14em;
}
.menu__inner{ }
.menu__group{ margin-bottom: var(--gap-m); }
.menu__group:last-of-type{ margin-bottom: var(--gap-s); }
.menu__cat{
  display:flex; align-items: baseline; gap: 1.2em;
  margin: 0 0 var(--gap-s);
  padding-bottom: 1rem;
  border-bottom: 1px solid var(--line-soft);
}
.menu__cat .ja{ font-family: var(--ja); font-weight:500; font-size: clamp(1.8rem,3.4vw,2.6rem); }
.menu__cat .sc{ font-size:.74rem; color: var(--sage); }
.menu__list{ list-style:none; margin:0; padding:0; }
.menu__list li{
  display:flex; align-items: baseline; justify-content: space-between;
  gap: 2rem;
  padding: clamp(1.3rem,2.4vw,2rem) 0;
  border-bottom: 1px solid var(--line-soft);
}
.menu__list li:last-child{ border-bottom: none; }
.m__name{ display:flex; flex-direction:column; gap:.35rem; }
.m__name .ja{ font-family: var(--ja); font-size: 1.18rem; }
.m__en{ font-size:.86rem; color: var(--sumi-dim); font-style: italic; }
.m__price{
  font-family: var(--latin); font-weight:400; font-size:1.02rem;
  color: var(--sumi); white-space: nowrap;
  font-feature-settings: "tnum" 1;
}
.menu__note{
  font-size:.92rem; color: var(--sumi-dim); margin-top: var(--gap-s);
  max-width: 46ch;
}
.menu__note em{ color: var(--sumi-dim); }

/* ---------- SPACE ---------- */
.space{
  padding-top: var(--gap-m); padding-bottom: var(--gap-m);
  display:grid;
  grid-template-columns: 1.5fr 1fr;
  gap: clamp(2rem, 6vw, 6rem);
  align-items: center;
  max-width: 1320px; margin: 0 auto;
}
.space__img{ margin:0; }
.space__img img{
  border-radius: 2px;
  box-shadow: 0 30px 70px -44px rgba(42,40,35,.5);
}
.space__cap{ position: relative; }
.space__cap .vcap{
  position:absolute; top:0; right:-1.5rem; height: 9em;
}
.space__head{
  font-family: var(--ja); font-weight:500;
  font-size: clamp(2.4rem, 5vw, 4rem); line-height:1.05;
  margin: 0 0 1.4rem;
}
.space__body{ font-size:1rem; color: var(--sumi-dim); max-width: 34ch; line-height: 1.95; margin:0; }

/* ---------- CRAFT ---------- */
.craft{
  padding-top: var(--gap-m); padding-bottom: var(--gap-m);
  display:grid; grid-template-columns: 1fr 1fr;
  gap: clamp(2rem, 6vw, 6rem);
  align-items: center;
  max-width: 1320px; margin: 0 auto;
}
.craft__head{
  font-family: var(--ja); font-weight:500;
  font-size: clamp(2.2rem, 4.5vw, 3.6rem); line-height:1.1; margin:0 0 1.4rem;
}
.craft__sub{
  display:block; font-family: var(--latin); font-style: italic;
  font-weight:300; font-size: clamp(1rem,1.7vw,1.4rem);
  color: var(--sumi-dim); margin-top:.5rem;
}
.craft__sub .ja{ font-style: normal; }
.craft__body{ font-size:1rem; color: var(--sumi-dim); max-width: 38ch; line-height:1.95; margin:0; }
.craft__img{ margin:0; }
.craft__img img{
  border-radius: 2px;
  box-shadow: 0 30px 70px -44px rgba(42,40,35,.5);
}

/* ---------- VISIT ---------- */
.visit{
  position: relative;
  padding-top: var(--gap-m); padding-bottom: var(--gap-l);
}
.visit .vspine--visit{
  position:absolute; top: var(--gap-m); right: clamp(1rem,3.5vw,4rem); height: 13em;
}
.visit__head{
  font-family: var(--ja); font-weight:500;
  font-size: clamp(2.6rem, 6vw, 5rem); line-height:1.18; margin:0 0 1.2rem;
  letter-spacing:.03em;
}
.visit__sub{ font-family: var(--latin); font-style: italic; color: var(--sumi-dim); margin:0 0 var(--gap-m); }
.visit__grid{
  display:grid; grid-template-columns: repeat(2, minmax(0,1fr));
  gap: clamp(2rem, 5vw, 4rem);
  max-width: 52rem;
}
.visit__item dt{
  display:flex; align-items: baseline; gap:.8em;
  font-family: var(--latin); font-variant: small-caps; letter-spacing:.24em;
  font-size:.74rem; color: var(--sumi-dim);
  padding-bottom:.8rem; margin-bottom:.8rem;
  border-bottom:1px solid var(--line-soft);
}
.visit__item dt .ja{ font-family: var(--ja); font-variant: normal; letter-spacing:.1em; color: var(--sumi); font-size:.92rem; }
.visit__item dd{ margin:0; font-size:1rem; line-height:1.8; }
.visit__item dd .muted{ font-size:.84rem; }
.visit__link{ position: relative; }
.visit__link::after{
  content:""; position:absolute; left:0; right:0; bottom:-2px; height:1px;
  background: var(--line); transition: background .5s var(--ease);
}
.visit__link:hover::after{ background: var(--vermilion); }

/* ---------- FOOTER ---------- */
.foot{
  text-align:center;
  padding: var(--gap-m) var(--pad) var(--gap-m);
  border-top:1px solid var(--line-soft);
}
.foot__seal{
  font-family: var(--ja); font-weight:600;
  font-size: clamp(3rem,7vw,5rem); color: var(--sumi);
  position: relative; display:inline-block; margin-bottom: var(--gap-s);
}
.foot__seal::after{
  content:""; position:absolute; right:-.35em; bottom:.2em;
  width:.34em; height:.34em; background: var(--vermilion); border-radius:1px;
}
.foot__line{ font-size:.86rem; letter-spacing:.06em; margin:0 0 .8rem; }
.foot__line .ja{ font-family: var(--ja); }
.foot__fine{ font-size:.74rem; color: var(--sumi-dim); margin:0; }

/* ---------- motion: the slowest, quietest ---------- */
.reveal{ opacity: 0; transform: translateY(8px); }
.reveal.is-in{
  opacity: 1; transform: none;
  transition: opacity 1.4s var(--ease), transform 1.4s var(--ease);
}
/* hero staggers slower + longer */
.hero .reveal.is-in{ transition-duration: 1.9s; }
.hero__char{ transition-delay: .1s; }
.hero__label.is-in{ transition-delay: .5s; }
.hero__promise.is-in{ transition-delay: .75s; }
.hero__meta.is-in{ transition-delay: 1s; }
.hero__img.is-in{ transition-delay: .35s; }

@media (prefers-reduced-motion: reduce){
  html{ scroll-behavior: auto; }
  .reveal, .hero .reveal{ opacity:1 !important; transform:none !important; transition:none !important; }
  .nav__links a::after, .nav__cta, .visit__link::after{ transition:none !important; }
}

/* ---------- responsive ---------- */
@media (max-width: 900px){
  .about__cols{ grid-template-columns: 1fr; margin-left: 0; }
  .space{ grid-template-columns: 1fr; }
  .craft{ grid-template-columns: 1fr; }
  .craft__img{ order: -1; max-width: 30rem; }
  .space__cap .vcap{ position: static; height:auto; margin-bottom:1rem; writing-mode: horizontal-tb; letter-spacing:.4em; }
  .visit__grid{ grid-template-columns: 1fr; }
}

@media (max-width: 640px){
  body{ font-size: 16px; }
  .nav{ flex-wrap: wrap; gap: .8rem 1.2rem; }
  .nav__links{ order: 3; width: 100%; justify-content: space-between; gap: .6rem; }
  .nav__links .en{ display:none; }
  .nav__cta{ padding:.45em .9em; }
  .spine--left{ display: none; }            /* guard vertical-rl overflow on mobile */
  .menu .vspine{ display:none; }
  .visit .vspine--visit{ display:none; }
  .hero{ min-height: auto; padding-top: var(--gap-s); }
  .hero__img{
    position: static; width: clamp(150px, 56vw, 240px);
    margin-top: var(--gap-s);
  }
  .hero__seal{ right: 4%; }
  .hero__text{ max-width: none; }
  .menu__list li{ flex-direction: column; gap:.5rem; }
  .m__price{ align-self: flex-start; }
}

/* 4K — emptiness grows, content stays small & centered */
@media (min-width: 2200px){
  :root{ --maxw: 1200px; }
  body{ font-size: 19px; }
  .hero, .space, .craft{ max-width: 1320px; }
}