/* ============================================================
   SHINYA SHOKUDO — design system v2 "sumi & shu"
   Palette: sumi-ink black, vermillion red (shu), gold hairlines
   Type: Cormorant Garamond (Latin display) · Shippori Mincho (JP)
         Yuji Syuku (brush calligraphy) · Inter (body)
   ============================================================ */

:root{
  --bg:        #0f0a06;
  --bg-2:      #171009;
  --bg-3:      #1e150c;
  --line:      rgba(239,232,219,.12);
  --line-soft: rgba(239,232,219,.07);
  --ink:       #efe8db;
  --ink-dim:   #a89f90;
  --ink-faint: #6f685c;
  --red:       #b30013;
  --red-bright:#cc0016;
  --red-deep:  #84000e;
  --gold:      #d99a4e;
  /* ---- 8pt spacing tokens (4px only as half-step) ---- */
  --space-05:  4px;
  --space-1:   8px;
  --space-2:   16px;
  --space-3:   24px;
  --space-4:   32px;
  --space-5:   40px;
  --space-6:   48px;
  --space-7:   56px;
  --space-8:   64px;
  --space-10:  80px;
  --space-12:  96px;
  --space-16:  128px;
  --section-pad:       var(--space-12);
  --section-pad-tight: var(--space-8);
  /* gap between a nav dropdown trigger and its menu (also the hover bridge) */
  --drop-gap:  12px;

  /* ---- shared type scale (line-heights on the 8pt rhythm) ---- */
  --text-h1:   36px;  --lh-h1: 40px;
  --text-h2:   32px;  --lh-h2: 40px;
  --text-h3:   24px;  --lh-h3: 32px;
  --text-lg:   20px;  --lh-lg: 32px;
  --text-body: 17px;  --lh-body: 28px;
  --text-sm:   14px;  --lh-sm: 24px;
  --ls-head:   .04em;
  --ls-label:  .28em;

  --max:       1280px;
  --gutter:    var(--space-3);
  --header-h:  88px;
  --serif:     "Marcellus", "Noto Serif JP", "Shippori Mincho", Georgia, serif;   /* display / headlines */
  --jp:        "Yuji Syuku", "Shippori Mincho", "Hiragino Mincho ProN", serif;    /* brush-stroke JP */
  --brush:     "Yuji Syuku", "Shippori Mincho", serif;
  --sans:      "EB Garamond", "Noto Serif JP", "Shippori Mincho", Georgia, serif; /* body / reading */
  --ui:        "EB Garamond", "Noto Serif JP", "Shippori Mincho", Georgia, serif;
}

@media (min-width:900px){
  :root{ --gutter:var(--space-8); }
}
@media (max-width:640px){
  :root{
    --text-h1:32px; --lh-h1:40px;
    --text-h2:28px; --lh-h2:32px;
    --text-h3:20px; --lh-h3:24px;
    --text-lg:18px; --lh-lg:28px;
    --section-pad:var(--space-8);
    --section-pad-tight:var(--space-6);
  }
}

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

html{ scroll-behavior:smooth; }
@media (prefers-reduced-motion: reduce){
  html{ scroll-behavior:auto; }
  *,*::before,*::after{ animation:none !important; transition:none !important; }
}

body{
  background:var(--bg);
  color:var(--ink);
  font-family:var(--sans);
  font-size:var(--text-body);
  line-height:var(--lh-body);
  font-weight:400;
  letter-spacing:.012em;
  -webkit-font-smoothing:antialiased;
}

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

::selection{ background:var(--red); color:#fff; }

a:focus-visible, button:focus-visible, input:focus-visible,
select:focus-visible, textarea:focus-visible{
  outline:2px solid var(--red-bright);
  outline-offset:3px;
  border-radius:2px;
}

.skip-link{
  position:absolute; left:-9999px; top:0; z-index:200;
  background:var(--red); color:#fff; padding:var(--space-2) var(--space-2);
  font-size:var(--text-sm); font-weight:600;
}
.skip-link:focus{ left:0; }

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

h1,h2,h3{ font-family:var(--serif); font-weight:400; letter-spacing:var(--ls-head); }

h1, .display-xl{ font-size:var(--text-h1); line-height:var(--lh-h1); }
h2, .display-lg, .display-md{ font-size:var(--text-h2); line-height:var(--lh-h2); }
h3, .display-sm{ font-size:var(--text-h3); line-height:var(--lh-h3); }

.kicker{
  display:inline-flex; align-items:center; gap:var(--space-2);
  font-size:var(--text-sm); line-height:var(--lh-sm); font-weight:500;
  letter-spacing:var(--ls-label);
  text-transform:uppercase; color:var(--red-bright);
}
.kicker::before{ content:""; width:2.4rem; height:1px; background:var(--gold); opacity:.65; }
.kicker--center::after{ content:""; width:2.4rem; height:1px; background:var(--gold); opacity:.65; }

.jp-accent{
  font-family:var(--jp); font-weight:400;
  color:var(--ink-faint); letter-spacing:.28em;
}

.brush{ font-family:var(--brush); font-weight:400; letter-spacing:.08em; }

.lede{
  font-size:var(--text-lg); line-height:var(--lh-lg);
  color:var(--ink-dim); font-weight:300;
}

.measure{ max-width:64ch; }

/* ---------- japanese design elements ---------- */

/* vertical red label — like a hanging tag beside a section */
.v-label{
  writing-mode:vertical-rl; text-orientation:mixed;
  font-family:var(--jp); font-size:var(--text-sm); letter-spacing:.5em;
  color:var(--red-bright);
  padding-top:var(--space-1); border-top:2px solid var(--red);
  min-height:9rem;
}

/* decorative vertical JP text column */
.v-col{
  writing-mode:vertical-rl; text-orientation:mixed;
  font-family:var(--jp); letter-spacing:.42em; line-height:2.4;
  color:var(--ink-dim);
}
.v-col--faint{ color:rgba(239,232,219,.28); }

/* huge kanji watermark behind a section */
.has-ghost{ position:relative; overflow:hidden; }
.has-ghost > .container{ position:relative; z-index:1; }
.ghost-kanji{
  position:absolute; z-index:0; pointer-events:none; user-select:none;
  font-family:var(--brush); line-height:.9;
  font-size:clamp(12rem, 30vw, 27rem);
  color:rgba(239,232,219,.045);
}
.ghost-kanji--right{ right:-.08em; top:50%; transform:translateY(-50%); }
.ghost-kanji--left{ left:-.08em; bottom:-.12em; }


/* gold corner bracket on a figure (like a framed takeout card) */
.corner{ position:relative; }
.corner::before{
  content:""; position:absolute; top:-12px; left:-12px; z-index:2;
  width:58px; height:58px;
  border-top:3px solid var(--gold); border-left:3px solid var(--gold);
}
.corner--red::before{ border-color:var(--red); }

/* overlapping photo collage */
.collage{ position:relative; padding-bottom:clamp(var(--space-6), 6vw, var(--space-10)); }
.collage .collage-main{ width:82%; }
.collage .collage-over{
  position:absolute; right:0; bottom:0; width:52%;
  border:7px solid var(--bg);
  box-shadow:0 18px 50px rgba(0,0,0,.55);
}
.section--alt .collage .collage-over{ border-color:var(--bg-2); }

/* ---------- layout ---------- */

.container{ max-width:var(--max); margin:0 auto; padding-inline:var(--gutter); }
.container--narrow{ max-width:880px; }

.section{
  padding-block:var(--section-pad);
  background-image:radial-gradient(90% 55% at 50% 118%, rgba(190,110,40,.05), transparent 70%);
}
.section--tight{ padding-block:var(--section-pad-tight); }
.section--alt{
  background-color:var(--bg-2);
  background-image:url('data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 width=%2260%22 height=%2230%22 viewBox=%220 0 60 30%22%3E%3Ccircle cx=%2230%22 cy=%22-15%22 r=%2228%22 fill=%22%23171009%22 stroke=%22%23efe8db%22 stroke-opacity=%220.03%22/%3E%3Ccircle cx=%2230%22 cy=%22-15%22 r=%2219%22 fill=%22none%22 stroke=%22%23efe8db%22 stroke-opacity=%220.027%22/%3E%3Ccircle cx=%2230%22 cy=%22-15%22 r=%2210%22 fill=%22none%22 stroke=%22%23efe8db%22 stroke-opacity=%220.024%22/%3E%3Ccircle cx=%220%22 cy=%220%22 r=%2228%22 fill=%22%23171009%22 stroke=%22%23efe8db%22 stroke-opacity=%220.03%22/%3E%3Ccircle cx=%220%22 cy=%220%22 r=%2219%22 fill=%22none%22 stroke=%22%23efe8db%22 stroke-opacity=%220.027%22/%3E%3Ccircle cx=%220%22 cy=%220%22 r=%2210%22 fill=%22none%22 stroke=%22%23efe8db%22 stroke-opacity=%220.024%22/%3E%3Ccircle cx=%2260%22 cy=%220%22 r=%2228%22 fill=%22%23171009%22 stroke=%22%23efe8db%22 stroke-opacity=%220.03%22/%3E%3Ccircle cx=%2260%22 cy=%220%22 r=%2219%22 fill=%22none%22 stroke=%22%23efe8db%22 stroke-opacity=%220.027%22/%3E%3Ccircle cx=%2260%22 cy=%220%22 r=%2210%22 fill=%22none%22 stroke=%22%23efe8db%22 stroke-opacity=%220.024%22/%3E%3Ccircle cx=%2230%22 cy=%2215%22 r=%2228%22 fill=%22%23171009%22 stroke=%22%23efe8db%22 stroke-opacity=%220.03%22/%3E%3Ccircle cx=%2230%22 cy=%2215%22 r=%2219%22 fill=%22none%22 stroke=%22%23efe8db%22 stroke-opacity=%220.027%22/%3E%3Ccircle cx=%2230%22 cy=%2215%22 r=%2210%22 fill=%22none%22 stroke=%22%23efe8db%22 stroke-opacity=%220.024%22/%3E%3Ccircle cx=%220%22 cy=%2230%22 r=%2228%22 fill=%22%23171009%22 stroke=%22%23efe8db%22 stroke-opacity=%220.03%22/%3E%3Ccircle cx=%220%22 cy=%2230%22 r=%2219%22 fill=%22none%22 stroke=%22%23efe8db%22 stroke-opacity=%220.027%22/%3E%3Ccircle cx=%220%22 cy=%2230%22 r=%2210%22 fill=%22none%22 stroke=%22%23efe8db%22 stroke-opacity=%220.024%22/%3E%3Ccircle cx=%2260%22 cy=%2230%22 r=%2228%22 fill=%22%23171009%22 stroke=%22%23efe8db%22 stroke-opacity=%220.03%22/%3E%3Ccircle cx=%2260%22 cy=%2230%22 r=%2219%22 fill=%22none%22 stroke=%22%23efe8db%22 stroke-opacity=%220.027%22/%3E%3Ccircle cx=%2260%22 cy=%2230%22 r=%2210%22 fill=%22none%22 stroke=%22%23efe8db%22 stroke-opacity=%220.024%22/%3E%3Ccircle cx=%2230%22 cy=%2245%22 r=%2228%22 fill=%22%23171009%22 stroke=%22%23efe8db%22 stroke-opacity=%220.03%22/%3E%3Ccircle cx=%2230%22 cy=%2245%22 r=%2219%22 fill=%22none%22 stroke=%22%23efe8db%22 stroke-opacity=%220.027%22/%3E%3Ccircle cx=%2230%22 cy=%2245%22 r=%2210%22 fill=%22none%22 stroke=%22%23efe8db%22 stroke-opacity=%220.024%22/%3E%3C/svg%3E');
  background-size:120px 60px;
  border-top:1px solid rgba(217,154,78,.12);
  border-bottom:1px solid rgba(217,154,78,.12);
}


.section-head{ margin-bottom:var(--space-6); }
.section-head .display-lg,.section-head .display-md{ margin-top:var(--space-2); }
.section-head--center{ text-align:center; }
.section-head--center .lede{ margin-inline:auto; }
.section-head .lede{ margin-top:var(--space-2); }

.grid-2{ display:grid; gap:var(--space-5); align-items:center; }
.grid-3{ display:grid; gap:var(--space-3); }
@media (min-width:820px){
  .grid-2{ grid-template-columns:1fr 1fr; gap:var(--space-8); }
  .grid-3{ grid-template-columns:repeat(3, 1fr); }
  .grid-2--wide-img{ grid-template-columns:1.2fr 1fr; }
}

.rule{ border:0; border-top:1px solid var(--line-soft); }

/* ---------- buttons ---------- */

.btn{
  display:inline-flex; align-items:center; justify-content:center; gap:8px;
  padding:16px 40px;
  font-family:var(--ui); font-size:var(--text-body); font-weight:500;
  letter-spacing:.05em; border-radius:6px;
  border:1px solid transparent; cursor:pointer;
  transition:background .3s ease, color .3s ease, border-color .3s ease,
             box-shadow .3s ease, transform .12s ease;
}
.btn--solid{ background:var(--red); color:#f6efe1; }
.btn--solid:hover{ background:var(--red-bright); }
.btn--solid:active{ background:var(--red-deep); transform:translateY(1px); }
.btn--ghost{ border-color:rgba(239,232,219,.4); color:var(--ink); background:transparent; }
.btn--ghost:hover{ border-color:var(--red-bright); background:rgba(179,0,19,.16); color:#fff; }
.btn--ghost:active{ background:rgba(179,0,19,.3); transform:translateY(1px); }
.btn--sm{ padding:8px 24px; font-size:var(--text-sm); }

.text-link{
  display:inline-flex; align-items:center; gap:var(--space-1);
  font-size:var(--text-body); font-weight:500; letter-spacing:.05em;
  color:var(--red-bright); padding-bottom:var(--space-05);
  border-bottom:1px solid rgba(204,0,22,.4);
  transition:border-color .3s ease, color .3s ease;
}
.text-link:hover{ color:var(--ink); border-color:var(--ink); }
.text-link::after{ content:"→"; font-size:.9em; transition:transform .3s ease; }
.text-link:hover::after{ transform:translateX(4px); }

/* ---------- header ---------- */

.utility-drop, .nav-drop{ position:relative; }
.btn--drop::after{ content:"▾"; font-size:.85em; transition:transform .3s ease; }
.btn--drop:hover::after{ transform:translateY(2px); }
.drop-menu{
  display:none; position:absolute; top:100%; right:0; z-index:120;
  min-width:200px; padding:var(--space-1) 0;
  background:#171009; border:1px solid var(--line);
  border-radius:8px; overflow:hidden;
  box-shadow:0 18px 50px rgba(0,0,0,.6);
}
/* The container's bottom padding is both the visual gap under the trigger and the
   hover bridge, so the menu never closes as the pointer travels down into it. */
.nav-drop, .utility-drop{ padding-bottom:var(--drop-gap); margin-bottom:calc(var(--drop-gap) * -1); }
.utility-drop:hover .drop-menu, .utility-drop:focus-within .drop-menu, .utility-drop.is-open .drop-menu,
.nav-drop:hover .drop-menu, .nav-drop:focus-within .drop-menu, .nav-drop.is-open .drop-menu{ display:block; }
.drop-menu a{
  display:block; padding:var(--space-1) var(--space-3); color:var(--ink-dim); white-space:nowrap;
  transition:color .25s ease, background .25s ease;
}
.drop-menu a:hover{ color:var(--ink); background:rgba(179,0,19,.16); }
/* Mark which location you are already on. */
.drop-menu a[aria-current="page"]{ color:var(--red-bright); }

.site-header{
  position:fixed; inset:0 0 auto 0; z-index:100;
  transition:background .4s ease, border-color .4s ease, backdrop-filter .4s ease;
  border-bottom:1px solid transparent;
}
/* soft top scrim so nav stays legible over bright heroes (fades out once the solid bg takes over) */
.site-header::before{
  content:""; position:absolute; inset:0 0 auto 0; height:160px; z-index:-1; pointer-events:none;
  background:linear-gradient(to bottom, rgba(9,6,3,.7), rgba(9,6,3,.28) 45%, transparent);
  transition:opacity .4s ease;
}
.site-header.is-scrolled::before{ opacity:0; }
.site-header.is-scrolled, .site-header.is-open{
  background:rgba(16,10,5,.93);
  -webkit-backdrop-filter:blur(14px); backdrop-filter:blur(14px);
  border-bottom-color:rgba(217,154,78,.16);
}
.header-inner{
  max-width:var(--max); margin:0 auto; padding:0 var(--gutter);
  display:flex; align-items:center; justify-content:space-between; gap:32px;
  height:88px;
}
.brand{ display:flex; align-items:center; gap:var(--space-2); line-height:1.2; }
.brand-logo{ height:52px; width:auto; }
.brand-text{ display:flex; flex-direction:column; }
.brand-name{
  font-family:var(--serif); font-size:1.35rem; font-weight:500; letter-spacing:.12em;
  text-transform:uppercase; color:var(--ink);
}
.brand-jp{ font-family:var(--jp); font-size:.6rem; letter-spacing:.55em; color:var(--red-bright); margin-top:var(--space-05); }

.nav-desktop{ display:none; align-items:center; gap:32px; }
/* Direct children only: these are the top-level nav links. Without the `>` this
   also matched the anchors inside .drop-menu and zeroed their side padding. */
.nav-desktop > a:not(.btn),
.nav-desktop .nav-drop > a:not(.btn){
  font-size:var(--text-body); font-weight:400; letter-spacing:.04em;
  color:var(--ink-dim); padding:var(--space-1) 0; position:relative;
  transition:color .3s ease;
}
.nav-desktop > a:not(.btn):hover,
.nav-desktop .nav-drop > a:not(.btn):hover{ color:var(--red-bright); }
.nav-desktop > a:not(.btn)[aria-current="page"],
.nav-desktop .nav-drop > a:not(.btn)[aria-current="page"]{ color:var(--red-bright); }
/* Keep the parent lit while you're on one of its location pages. */
.nav-drop:has(.drop-menu a[aria-current="page"]) > a{ color:var(--red-bright); }
/* Same caret as the button-style dropdown, on a plain nav link. */
.nav-drop-trigger::after{ content:"▾"; font-size:.85em; margin-left:.35em; display:inline-block; transition:transform .3s ease; }
.nav-drop:hover .nav-drop-trigger::after{ transform:translateY(2px); }
.nav-mobile-sub{ padding-left:var(--space-3)!important; font-size:var(--text-sm)!important; }
.nav-desktop .btn--solid{ margin-left:-24px; }  /* pull Reserve tight against Order Online (8px pair) */
@media (min-width:1080px){ .nav-desktop{ display:flex; } }

.nav-toggle{
  display:flex; flex-direction:column; justify-content:center; gap:var(--space-05);
  width:44px; height:44px; padding:var(--space-1);
  background:none; border:0; cursor:pointer;
}
.nav-toggle span{ display:block; height:1px; background:var(--ink); transition:transform .3s ease, opacity .3s ease; }
.nav-toggle[aria-expanded="true"] span:nth-child(1){ transform:translateY(7px) rotate(45deg); }
.nav-toggle[aria-expanded="true"] span:nth-child(2){ opacity:0; }
.nav-toggle[aria-expanded="true"] span:nth-child(3){ transform:translateY(-7px) rotate(-45deg); }
@media (min-width:1080px){ .nav-toggle{ display:none; } }

.nav-mobile{
  display:none; flex-direction:column; gap:var(--space-05);
  padding:var(--space-3) var(--gutter) var(--space-5);
  background:rgba(16,10,5,.97);
  border-bottom:1px solid var(--line-soft);
}
.site-header.is-open .nav-mobile{ display:flex; }
.nav-mobile a:not(.btn){
  font-family:var(--serif); font-size:var(--text-h3); padding:var(--space-1) 0;
  color:var(--ink-dim); border-bottom:1px solid var(--line-soft);
  display:flex; align-items:baseline; justify-content:space-between;
  transition:color .3s ease;
}
.nav-mobile a:not(.btn):hover, .nav-mobile a:not(.btn)[aria-current="page"]{ color:var(--red-bright); }
.nav-mobile .nav-mobile-ctas{ display:flex; gap:var(--space-2); margin-top:var(--space-4); flex-wrap:wrap; }
@media (min-width:1080px){ .site-header.is-open .nav-mobile{ display:none; } }

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

.hero{
  position:relative; display:flex; align-items:flex-end;
  min-height:100svh; overflow:hidden; isolation:isolate;
}
.hero--short{ min-height:72svh; align-items:flex-end; }
.hero-media{ position:absolute; inset:0; z-index:-2; }
.hero-media img{
  width:100%; height:112%; object-fit:cover; object-position:50% 48%; will-change:transform;
  filter:brightness(.78) saturate(1.08) contrast(1.02);
}
.hero::after{
  content:""; position:absolute; inset:0; z-index:-1;
  background:
    linear-gradient(to right, rgba(16,10,5,.72) 0%, rgba(16,10,5,.28) 45%, rgba(16,10,5,0) 70%),
    linear-gradient(to top, rgba(16,10,5,.97) 0%, rgba(16,10,5,.45) 38%, rgba(16,10,5,.25) 60%, rgba(16,10,5,.55) 100%);
}
.hero-content{
  width:100%; max-width:var(--max); margin:0 auto;
  padding:0 var(--gutter) clamp(var(--space-8), 9vh, 112px);
}
.hero-content .kicker{ margin-bottom:var(--space-3); }
.hero-tagline{ max-width:16em; }
.hero-sub{ margin-top:var(--space-3); max-width:44ch; color:var(--ink-dim); font-size:var(--text-lg); line-height:var(--lh-lg); }
.hero-ctas{ display:flex; gap:16px; margin-top:40px; flex-wrap:wrap; }

/* large brush calligraphy, vertical, hanging on the right */
.hero-jp-vertical{
  position:absolute; right:clamp(16px,4vw,72px); top:50%; transform:translateY(-50%);
  writing-mode:vertical-rl; text-orientation:upright;
  font-family:var(--brush);
  font-size:clamp(2.2rem, 4.5vw, 3.8rem); letter-spacing:.32em; line-height:1;
  color:rgba(246,239,225,.88);
  text-shadow:0 4px 30px rgba(0,0,0,.65);
  display:none;
}
.hero-jp-vertical::after{
  content:""; display:block; margin:var(--space-2) auto 0;
  width:2px; height:3.2rem; background:var(--red);
}
@media (min-width:820px){ .hero-jp-vertical{ display:block; } }

/* ---------- full-width image band ---------- */

.band{ position:relative; height:clamp(340px, 58vh, 620px); overflow:hidden; }
.band img{ width:100%; height:118%; object-fit:cover; will-change:transform; filter:brightness(.85) saturate(1.06); }
.band::after{
  content:""; position:absolute; inset:0;
  background:linear-gradient(to bottom, rgba(16,10,5,.5), rgba(16,10,5,.15) 45%, rgba(16,10,5,.55));
}
.band-caption{
  position:absolute; inset:auto 0 0 0; z-index:2;
  max-width:var(--max); margin:0 auto;
  padding:0 var(--gutter) var(--space-4);
}
.band-caption p{
  font-family:var(--sans); font-style:italic; font-size:clamp(1.2rem, 2.2vw, 1.75rem);
  color:var(--ink); max-width:28em; text-wrap:balance;
}
.band-caption .brush{ font-style:normal; }

/* ---------- figures / placeholders ---------- */

.figure{ position:relative; overflow:hidden; }
.figure img{ width:100%; height:100%; object-fit:cover; transition:transform 1.2s cubic-bezier(.2,.6,.2,1); }
.figure:hover img{ transform:scale(1.035); }
.figure--tall{ aspect-ratio:3/4; }
.figure--wide{ aspect-ratio:16/10; }
.figure--square{ aspect-ratio:1/1; }
.figure figcaption{
  margin-top:var(--space-2); font-size:var(--text-sm); letter-spacing:.18em; text-transform:uppercase;
  color:var(--ink-faint);
}

/* ---------- cards / featured dishes ---------- */

.dish-card{ display:flex; flex-direction:column; }
.dish-card .figure{ aspect-ratio:4/5; }
.dish-meta{ padding:24px 0 0; }
.dish-meta h3{ display:flex; align-items:baseline; gap:var(--space-2); flex-wrap:wrap; }
.dish-meta .jp-accent{ font-size:var(--text-sm); color:var(--red-bright); }
.dish-meta p{ margin-top:var(--space-1); color:var(--ink-dim); font-size:var(--text-body); line-height:var(--lh-body); }

/* ---------- gallery ---------- */

.gallery{ display:grid; gap:clamp(var(--space-2), 1.4vw, var(--space-3)); grid-template-columns:repeat(2, 1fr); }
@media (min-width:820px){ .gallery{ grid-template-columns:repeat(4, 1fr); } }
.gallery .figure{ aspect-ratio:1/1; }
.gallery .figure--feature{ grid-column:span 2; grid-row:span 2; aspect-ratio:auto; }

/* ---------- three pillars (food / drink / space) ---------- */

.pillars{ display:grid; gap:clamp(var(--space-4), 4vw, var(--space-7)); }
@media (min-width:820px){ .pillars{ grid-template-columns:repeat(3, 1fr); } }
.pillar{ border-top:1px solid var(--line-soft); padding-top:var(--space-4); position:relative; }
.pillar::before{
  content:""; position:absolute; top:-1px; left:0;
  width:56px; height:1px; background:var(--red);
}
.pillar-kanji{
  display:block; font-family:var(--brush); font-size:2.7rem; line-height:1;
  color:var(--red-bright); margin-bottom:var(--space-3);
}
.pillar h3{ font-size:clamp(1.35rem, 1.9vw, 1.6rem); margin:var(--space-1) 0 var(--space-2); }
.pillar p{ color:var(--ink-dim); font-size:var(--text-body); line-height:var(--lh-body); }

/* ---------- stats / info strips ---------- */

.info-strip{
  display:grid; gap:var(--space-4); padding-block:var(--space-6);
  border-top:1px solid var(--line-soft); border-bottom:1px solid var(--line-soft);
}
@media (min-width:820px){ .info-strip{ grid-template-columns:repeat(3, 1fr); } }
.info-strip h3{ font-size:var(--text-sm); font-family:var(--sans); font-weight:500; letter-spacing:.28em; text-transform:uppercase; color:var(--red-bright); margin-bottom:var(--space-2); }
.info-strip p, .info-strip li{ color:var(--ink-dim); font-size:var(--text-sm); }

/* ---------- menu ---------- */

.menu-nav{
  position:sticky; top:var(--header-h); z-index:50;
  background:rgba(16,10,5,.94);
  -webkit-backdrop-filter:blur(12px); backdrop-filter:blur(12px);
  border-bottom:1px solid var(--line-soft);
  overflow-x:auto; scrollbar-width:none;
}
.menu-nav::-webkit-scrollbar{ display:none; }
.menu-nav-inner{
  max-width:var(--max); margin:0 auto; padding:0 var(--gutter);
  display:flex; gap:var(--space-4); white-space:nowrap;
}
.menu-nav a{
  padding:var(--space-2) 0; font-size:var(--text-sm); letter-spacing:.04em;
  color:var(--ink-dim); border-bottom:2px solid transparent; transition:color .3s, border-color .3s;
}
.menu-nav a:hover{ color:var(--red-bright); }

.menu-section{ scroll-margin-top:calc(var(--header-h) + var(--space-8)); }
.menu-cat-head{ display:flex; align-items:baseline; gap:var(--space-2); flex-wrap:wrap; margin-bottom:var(--space-1); }

.menu-cat-head .jp-accent{ font-family:var(--brush); font-size:1.25rem; color:var(--red-bright); letter-spacing:.15em; }
.menu-cat-note{ font-size:var(--text-sm); line-height:var(--lh-sm); font-style:italic; color:var(--ink-faint); margin-bottom:var(--space-4); }

.menu-items{ display:grid; gap:var(--space-3) var(--space-7); }
@media (min-width:820px){ .menu-items{ grid-template-columns:1fr 1fr; } }
.menu-item{ display:flex; flex-direction:column; gap:var(--space-05); }
.menu-item-line{ display:flex; align-items:baseline; gap:var(--space-2); flex-wrap:nowrap; }
.menu-item-line h3{ font-family:var(--serif); font-weight:400; white-space:nowrap; }
.menu-item-line .jp-accent{ font-size:var(--text-sm); letter-spacing:.1em; white-space:nowrap; }
.menu-item > p{ font-size:var(--text-sm); line-height:var(--lh-sm); color:var(--ink-dim); max-width:52ch; }
.menu-sub{
  grid-column:1 / -1; margin-top:var(--space-2);
  font-family:var(--ui); font-size:var(--text-sm); font-weight:500;
  letter-spacing:.3em; text-transform:uppercase; color:var(--red-bright);
  border-bottom:1px solid var(--line-soft); padding-bottom:var(--space-1);
}
.menu-sub:first-child{ margin-top:0; }

.menu-note{
  margin-top:var(--space-2); padding:var(--space-2) var(--space-3);
  border:1px dashed rgba(179,0,19,.55); color:var(--red-bright);
  font-size:var(--text-sm); line-height:var(--lh-sm); letter-spacing:.04em;
}

.menu-footnote{
  max-width:72ch; margin:0 auto; text-align:center;
  font-size:var(--text-sm); line-height:var(--lh-sm); color:var(--ink-faint);
}
.menu-footnote a{ color:var(--ink-dim); text-decoration:underline; transition:color .3s ease; }
.menu-footnote a:hover{ color:var(--red-bright); }

/* ---------- locations ---------- */

.location-card{ display:grid; gap:0; border:1px solid var(--line-soft); background:var(--bg-2); }
@media (min-width:920px){ .location-card{ grid-template-columns:1.1fr 1fr; } }
.location-card .figure{ aspect-ratio:16/10; }
@media (min-width:920px){ .location-card .figure{ aspect-ratio:auto; height:100%; } }
.location-body{ padding:clamp(var(--space-4), 4vw, var(--space-7)); }

.location-body h2 .jp-accent{ font-family:var(--brush); color:var(--red-bright); }
.location-body address{ font-style:normal; color:var(--ink-dim); margin-top:var(--space-2); line-height:1.8; }
.location-body address a{ color:var(--ink); border-bottom:1px solid rgba(239,232,219,.25); transition:border-color .3s, color .3s; }
.location-body address a:hover{ color:var(--red-bright); border-color:var(--red); }

.hours{ margin-top:var(--space-3); width:100%; border-collapse:collapse; font-size:var(--text-sm); }
.hours caption{ text-align:left; font-size:var(--text-sm); letter-spacing:.28em; text-transform:uppercase; color:var(--red-bright); padding-bottom:var(--space-1); }
.hours td{ padding:var(--space-1) 0; border-bottom:1px solid var(--line-soft); color:var(--ink-dim); }
.hours td:last-child{ text-align:right; color:var(--ink); }

.map-embed{ margin-top:0; border-top:1px solid var(--line-soft); }
.map-embed iframe{
  display:block; width:100%; height:320px; border:0;
  filter:grayscale(1) invert(.92) contrast(.9) sepia(.18);
}
.location-ctas{ display:flex; gap:var(--space-2); margin-top:var(--space-4); flex-wrap:wrap; }

/* ---------- reservations ---------- */

.res-options{ display:grid; gap:var(--space-3); }
@media (min-width:820px){ .res-options{ grid-template-columns:1fr 1fr; } }
.res-card{
  border:1px solid var(--line-soft); background:var(--bg-2);
  padding:clamp(var(--space-4), 3.5vw, var(--space-6));
  display:flex; flex-direction:column; gap:var(--space-2);
  position:relative;
}
.res-card::before{
  content:""; position:absolute; top:0; left:0;
  width:44px; height:44px;
  border-top:2px solid var(--red); border-left:2px solid var(--red);
}

.res-card .res-loc{ font-size:var(--text-sm); line-height:var(--lh-sm); letter-spacing:var(--ls-label); text-transform:uppercase; color:var(--red-bright); }
.res-card p{ color:var(--ink-dim); font-size:var(--text-body); flex:1; }
.res-card .btn{ align-self:flex-start; }

.policy-list{ display:grid; gap:var(--space-3); }
@media (min-width:820px){ .policy-list{ grid-template-columns:1fr 1fr; } }
.policy-list li{ padding-left:var(--space-3); position:relative; color:var(--ink-dim); font-size:var(--text-sm); }
.policy-list li::before{ content:"—"; position:absolute; left:0; color:var(--red-bright); }
.policy-list strong{ color:var(--ink); font-weight:500; }

/* ---------- careers ---------- */

.role-list{ display:flex; flex-direction:column; }
.role{ display:flex; align-items:center; gap:var(--space-3); padding:var(--space-4) 0; border-bottom:1px solid var(--line-soft); flex-wrap:wrap; }
.role:first-child{ border-top:1px solid var(--line-soft); }
.role h3{ flex:1 1 240px; }
.role .role-meta{ font-size:var(--text-sm); line-height:var(--lh-sm); letter-spacing:.16em; text-transform:uppercase; color:var(--ink-faint); }

.form{ display:grid; gap:var(--space-3); }
@media (min-width:720px){ .form{ grid-template-columns:1fr 1fr; } .form .form-full{ grid-column:1/-1; } }
.form label{ display:block; font-size:var(--text-sm); letter-spacing:.24em; text-transform:uppercase; color:var(--ink-dim); margin-bottom:var(--space-1); }
.form input, .form select, .form textarea{
  width:100%; padding:var(--space-2) var(--space-2);
  background:var(--bg-3); border:1px solid var(--line-soft);
  color:var(--ink); font-family:var(--ui); font-size:var(--text-sm);
  transition:border-color .3s ease;
}
.form input:hover, .form select:hover, .form textarea:hover{ border-color:var(--line); }
.form textarea{ min-height:140px; resize:vertical; }
.form select{ appearance:none; background-image:linear-gradient(45deg, transparent 50%, var(--ink-dim) 50%), linear-gradient(135deg, var(--ink-dim) 50%, transparent 50%); background-position:calc(100% - 20px) 50%, calc(100% - 15px) 50%; background-size:5px 5px; background-repeat:no-repeat; }

/* ---------- quote / pull sections ---------- */

.pull-quote{
  font-family:var(--sans); font-style:italic;
  font-size:clamp(1.5rem, 3vw, 2.3rem); line-height:1.45;
  color:var(--ink); text-wrap:balance;
}
.pull-quote .jp-accent{ display:block; font-style:normal; font-size:var(--text-sm); margin-top:var(--space-3); }

/* ---------- CTA banner ---------- */

.cta-banner{ position:relative; overflow:hidden; text-align:center; }
.cta-banner .band-media{ position:absolute; inset:0; }
.cta-banner .band-media img{ width:100%; height:100%; object-fit:cover; filter:brightness(.85) saturate(1.06); }
.cta-banner::after{ content:""; position:absolute; inset:0; background:rgba(16,10,5,.84); }
.cta-banner .cta-inner{ position:relative; z-index:2; padding:clamp(72px, 10vw, var(--space-16)) var(--gutter); }
.cta-banner .hero-ctas{ justify-content:center; }
.cta-brush{
  display:block; font-family:var(--brush); font-size:clamp(1.6rem, 3vw, 2.4rem);
  color:var(--red-bright); letter-spacing:.3em; margin-bottom:var(--space-2);
}

.cta-banner--embers::after{
  background:
    linear-gradient(to bottom, rgba(16,10,5,.88), rgba(16,10,5,.62) 50%, rgba(16,10,5,.86)),
    radial-gradient(90% 70% at 50% 55%, rgba(200,84,26,.22), transparent 70%);
}
.cta-banner--embers .band-media img{ filter:brightness(.9) saturate(1.1); }

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

.site-footer{
  background-color:#0a0704;
  background-image:
    repeating-linear-gradient(90deg, rgba(239,232,219,.022) 0 2px, transparent 2px 28px),
    linear-gradient(rgba(10,7,4,.9), rgba(10,7,4,.9)),
    url("../images/texture-dark-wood.jpg");
  /* Same texture at ~1/5 the bytes where image-set() is understood; the plain
     url() above stays as the fallback for browsers that skip this declaration. */
  background-image:
    repeating-linear-gradient(90deg, rgba(239,232,219,.022) 0 2px, transparent 2px 28px),
    linear-gradient(rgba(10,7,4,.9), rgba(10,7,4,.9)),
    image-set(url("../images/texture-dark-wood.avif") type("image/avif"),
              url("../images/texture-dark-wood.webp") type("image/webp"),
              url("../images/texture-dark-wood.jpg") type("image/jpeg"));
  background-size:auto, auto, cover;
  border-top:2px solid rgba(179,0,19,.45);
}
.footer-inner{
  max-width:var(--max); margin:0 auto; padding:var(--space-10) var(--gutter) var(--space-5);
  display:grid; gap:var(--space-6);
}
@media (min-width:920px){ .footer-inner{ grid-template-columns:1.4fr 1fr 1fr 1fr; } }
.footer-brand .brand-name{ font-size:1.6rem; }
.footer-brand .brand-jp{ font-size:.68rem; }
.footer-logo{ height:64px; width:auto; margin-bottom:var(--space-1); }
.footer-brand p{ margin-top:var(--space-3); color:var(--ink-dim); font-size:var(--text-sm); max-width:34ch; }
.footer-social{ display:flex; gap:var(--space-3); margin-top:var(--space-4); flex-wrap:wrap; }
.footer-social a{
  display:inline-flex; align-items:center; gap:var(--space-1);
  font-size:var(--text-sm); color:var(--ink-dim); transition:color .3s;
}
.footer-social svg{ width:20px; height:20px; flex:none; }
.footer-social a:hover{ color:var(--red-bright); }

.footer-col h3{ font-size:var(--text-sm); line-height:var(--lh-sm); font-family:var(--ui); font-weight:500; letter-spacing:.28em; text-transform:uppercase; color:var(--red-bright); margin-bottom:var(--space-3); }
.footer-col li{ margin-bottom:var(--space-1); }
.footer-col a{ color:var(--ink-dim); font-size:var(--text-sm); transition:color .3s; }
.footer-col a:hover{ color:var(--ink); }
.footer-col p{ color:var(--ink-dim); font-size:var(--text-sm); line-height:1.8; }

.footer-bottom{
  max-width:var(--max); margin:0 auto; padding:var(--space-3) var(--gutter) var(--space-4);
  border-top:1px solid var(--line-soft);
  display:flex; justify-content:space-between; gap:var(--space-2); flex-wrap:wrap;
  font-size:var(--text-sm); line-height:var(--lh-sm); color:var(--ink-faint);
}

/* ---------- UI micro-type: crisp sans for tracked caps ---------- */

.kicker, .btn, .text-link,
.nav-desktop a:not(.btn), .menu-nav a,
.res-loc, .role-meta, .hours caption,
.info-strip h3, .footer-col h3, .footer-social a, .footer-bottom,
.figure figcaption, .form label, .menu-note{
  font-family:var(--ui);
}

/* ============================================================
   v3 art direction — vertical type, layered depth, texture
   ============================================================ */

/* subtle seigaiha wave texture overlay */
.tex-wave::before{
  content:""; position:absolute; inset:0; z-index:1; pointer-events:none; opacity:.016;
  background-image:url('data:image/svg+xml,%3Csvg xmlns="http://www.w3.org/2000/svg" width="60" height="30" viewBox="0 0 60 30"%3E%3Cg fill="none" stroke="%23efe8db" stroke-opacity="0.022" stroke-width="1"%3E%3Cpath d="M2 30 A28 28 0 0 1 58 30 M10 30 A20 20 0 0 1 50 30 M18 30 A12 12 0 0 1 42 30 M26 30 A4 4 0 0 1 34 30"/%3E%3Cpath d="M-28 30 A28 28 0 0 1 28 30 M-20 30 A20 20 0 0 1 20 30 M-12 30 A12 12 0 0 1 12 30 M-4 30 A4 4 0 0 1 4 30" transform="translate(30 -15)"/%3E%3Cpath d="M32 30 A28 28 0 0 1 88 30 M40 30 A20 20 0 0 1 80 30 M48 30 A12 12 0 0 1 72 30 M56 30 A4 4 0 0 1 64 30" transform="translate(-30 -15)"/%3E%3C/g%3E%3C/svg%3E');
  background-size:72px 36px;
  -webkit-mask-image:linear-gradient(to bottom, transparent, #000 18%, #000 82%, transparent);
  mask-image:linear-gradient(to bottom, transparent, #000 18%, #000 82%, transparent);
}

/* ---------- hero: centered calligraphy stage ---------- */

.hero--stage{ align-items:center; text-align:center; }
.hero--stage::after{
  background:
    radial-gradient(120% 90% at 50% 112%, rgba(230,132,52,.38), transparent 58%),
    radial-gradient(65% 50% at 16% 80%, rgba(212,106,38,.14), transparent 70%),
    linear-gradient(to top, rgba(16,10,5,.97) 0%, rgba(16,10,5,.66) 28%, rgba(16,10,5,.38) 52%, rgba(16,10,5,.3) 70%, rgba(16,10,5,.58) 100%);
}
.hero-en, .hero--stage .hero-sub{ text-shadow:0 2px 24px rgba(0,0,0,.85); }

/* lantern-light flicker over the hero, under the text */
.hero--stage .hero-stage{ position:relative; z-index:2; }
.hero--stage::before{
  content:""; position:absolute; inset:0; z-index:1; pointer-events:none;
  background:radial-gradient(58% 44% at 68% 46%, rgba(255,176,88,.12), transparent 72%);
  animation:lantern-flicker 8s ease-in-out infinite;
}
@keyframes lantern-flicker{
  0%, 100%{ opacity:.5; }
  16%{ opacity:.92; }
  38%{ opacity:.62; }
  57%{ opacity:1; }
  79%{ opacity:.68; }
}
@media (prefers-reduced-motion: reduce){
  .hero--stage::before{ animation:none; opacity:.75; }
}

/* staged entrance: the room comes up first, then the words */
@keyframes hero-rise{ from{ opacity:0; transform:translateY(16px); } to{ opacity:1; transform:none; } }
.hero-stage > *, .hero--short .hero-content > *{
  animation:hero-rise .9s cubic-bezier(.2,.6,.2,1) both;
}
.hero-stage > :nth-child(1), .hero--short .hero-content > :nth-child(1){ animation-delay:.2s; }
.hero-stage > :nth-child(2), .hero--short .hero-content > :nth-child(2){ animation-delay:.4s; }
.hero-stage > :nth-child(3), .hero--short .hero-content > :nth-child(3){ animation-delay:.55s; }
.hero-stage > :nth-child(4), .hero--short .hero-content > :nth-child(4){ animation-delay:.7s; }
@media (prefers-reduced-motion: reduce){
  .hero-stage > *, .hero--short .hero-content > *{ animation:none; }
}
.hero-stage{
  width:100%; max-width:var(--max); margin:0 auto;
  padding:calc(var(--header-h) + clamp(16px, 3vh, 32px)) var(--gutter) clamp(40px, 6vh, 56px);
  display:flex; flex-direction:column; align-items:center;
}
.calli{
  display:flex; align-items:flex-start; justify-content:center;
  gap:clamp(var(--space-3), 3.2vw, var(--space-6));
  margin:0 0 clamp(16px, 2.5vh, 24px);
}
.calli-main{
  writing-mode:vertical-rl; text-orientation:upright;
  font-family:var(--brush); font-size:clamp(3.4rem, 7.5vw, 5.8rem);
  line-height:1; letter-spacing:.14em; color:#f4ecdc;
  text-shadow:0 8px 48px rgba(0,0,0,.8);
}
.calli-side{
  writing-mode:vertical-rl; text-orientation:upright;
  font-family:var(--brush); font-size:clamp(.9rem, 1.3vw, 1.1rem);
  letter-spacing:.42em; color:rgba(244,236,220,.72);
  padding-top:1.4em;
}
.calli-side::before{ content:""; display:block; height:2.2rem; width:2px; background:var(--red); margin:0 auto var(--space-2); }
.calli-side--en{
  font-family:var(--ui); text-transform:uppercase;
  font-size:clamp(.82rem, 1.15vw, 1rem); letter-spacing:.34em;
  color:rgba(244,236,220,.82); font-weight:500;
}
@media (max-width:600px){ .calli-side{ display:none; } }
.hero-en{ font-size:var(--text-h1); line-height:var(--lh-h1); max-width:24em; }
.hero--stage .hero-sub{ margin:16px auto 0; }
.hero--stage .hero-ctas{ justify-content:center; }

/* ---------- layered full-bleed section ---------- */

.layered{ position:relative; overflow:hidden; padding-block:clamp(var(--space-10), 11vw, 144px); }
.layered-bg{ position:absolute; inset:0; z-index:0; }
.layered-bg img{ width:100%; height:100%; object-fit:cover; filter:brightness(.85) saturate(1.06); }
.layered-bg::after{
  content:""; position:absolute; inset:0;
  background:linear-gradient(100deg, rgba(16,10,5,.97) 32%, rgba(16,10,5,.78) 58%, rgba(16,10,5,.5) 100%);
}
.layered-inner{
  position:relative; z-index:2;
  max-width:var(--max); margin:0 auto; padding-inline:var(--gutter);
  display:grid; gap:var(--space-7); align-items:center;
}
@media (min-width:900px){ .layered-inner{ grid-template-columns:1.1fr .9fr; } }
.layered-copy .btn{ margin-top:var(--space-5); }

.tate-art{ display:flex; justify-content:center; align-items:flex-start; gap:clamp(var(--space-4), 3vw, var(--space-6)); }
.tate-art .big-kanji{
  font-family:var(--brush); font-size:clamp(7rem, 13vw, 11.5rem); line-height:1;
  color:rgba(244,236,220,.94); text-shadow:0 12px 70px rgba(0,0,0,.75);
}
.tate-art .tate-col{
  writing-mode:vertical-rl; text-orientation:upright;
  font-family:var(--jp); font-size:clamp(.95rem, 1.15vw, 1.05rem);
  letter-spacing:.48em; line-height:2.1; color:rgba(239,232,219,.6);
  padding-top:1.2em;
}
@media (max-width:899px){ .tate-art{ display:none; } }

/* ---------- kanji photo cards ---------- */

.kanji-cards{ display:grid; gap:var(--space-4); }
@media (min-width:820px){ .kanji-cards{ grid-template-columns:repeat(3, 1fr); } }
.kanji-card-media{ position:relative; overflow:hidden; aspect-ratio:3/4; }
.kanji-card-media img{ width:100%; height:100%; object-fit:cover; transition:transform 1.1s cubic-bezier(.2,.6,.2,1); }
.kanji-card:hover .kanji-card-media img{ transform:scale(1.045); }
.kanji-card-media::after{
  content:""; position:absolute; inset:0;
  background:linear-gradient(to bottom, rgba(16,10,5,.2), rgba(16,10,5,.3) 55%, rgba(16,10,5,.76));
}
.kanji-card-media .k{
  position:absolute; left:50%; top:50%; transform:translate(-50%,-50%); z-index:2;
  writing-mode:vertical-rl; font-family:var(--brush);
  font-size:clamp(3rem, 4.8vw, 4.4rem); color:#f4ecdc;
  text-shadow:0 6px 38px rgba(0,0,0,.85);
}
.kanji-card-media .en{
  position:absolute; left:0; right:0; bottom:1.15rem; z-index:2; text-align:center;
  font-family:var(--ui); font-size:var(--text-sm); letter-spacing:.34em; text-transform:uppercase;
  color:rgba(239,232,219,.78);
}
.kanji-card h3{ margin:var(--space-3) 0 var(--space-1); }
.kanji-card p{ color:var(--ink-dim); font-size:var(--text-body); line-height:var(--lh-body); }

/* ---------- band with vertical calligraphy ---------- */

.band--tate .band-tate{
  position:absolute; top:50%; right:clamp(1.5rem, 6vw, 5rem); transform:translateY(-50%); z-index:2;
  writing-mode:vertical-rl; text-orientation:upright;
  font-family:var(--brush); font-size:clamp(1.9rem, 4.2vw, 3.4rem);
  letter-spacing:.18em; color:#f4ecdc;
  text-shadow:0 6px 42px rgba(0,0,0,.85);
}
.band--tate .band-caption p{ max-width:20em; }

/* ---------- ghost latin display ---------- */

.ghost-latin{
  position:absolute; z-index:0; pointer-events:none; user-select:none;
  left:clamp(1rem,4vw,3rem); top:1rem;
  font-family:var(--serif); font-size:clamp(4.5rem, 11vw, 9rem); line-height:1;
  color:rgba(239,232,219,.05); white-space:nowrap;
}

/* ---------- photo strip ---------- */

.strip-head{
  display:flex; align-items:flex-end; justify-content:space-between;
  gap:var(--space-4); margin-bottom:var(--space-6); flex-wrap:wrap;
}
.strip-head-title{ display:flex; align-items:flex-start; gap:clamp(var(--space-2),2vw,var(--space-4)); }
.strip-head .tate-label{
  writing-mode:vertical-rl; text-orientation:upright;
  font-family:var(--brush); font-size:1.4rem; letter-spacing:.26em;
  color:var(--red-bright); padding-top:var(--space-05);
}
.strip{ display:grid; grid-template-columns:repeat(2, 1fr); gap:var(--space-2); }
@media (min-width:820px){ .strip{ grid-template-columns:repeat(4, 1fr); } }
.strip .figure{ aspect-ratio:4/5; }

/* ---------- page transitions (seamless page-to-page) ---------- */

@view-transition{ navigation:auto; }
::view-transition-old(root){ animation:vt-out .3s ease both; }
::view-transition-new(root){ animation:vt-in .5s ease both; }
@keyframes vt-out{ to{ opacity:0; } }
@keyframes vt-in{ from{ opacity:0; } }

/* fallback fade for browsers without view transitions */
html.no-vt body{ animation:page-in .45s ease both; }
body.page-exit{ opacity:0; transition:opacity .22s ease; }
@keyframes page-in{ from{ opacity:0; } }

@media (prefers-reduced-motion: reduce){
  ::view-transition-old(root), ::view-transition-new(root){ animation:none; }
  html.no-vt body{ animation:none; }
  body.page-exit{ opacity:1; transition:none; }
}

/* ---------- red ribbon banner CTA (Shamojiya) ---------- */

.ribbon-cta{ display:flex; justify-content:center; }
.ribbon-cta a{
  display:block; width:min(640px, 100%); text-align:center;
  padding:16px 48px;
  background:linear-gradient(180deg, #b30013, #84000e);
  color:#f6efe1; font-family:var(--ui); font-size:var(--text-body); letter-spacing:.06em;
  clip-path:polygon(20px 0, calc(100% - 20px) 0, 100% 50%, calc(100% - 20px) 100%, 20px 100%, 0 50%);
  transition:filter .3s ease, transform .12s ease;
}
.ribbon-cta a::before{ content:"\300B "; opacity:.75; }
.ribbon-cta a:hover{ filter:brightness(1.14); }
.ribbon-cta a:active{ transform:translateY(1px); }



/* ============================================================
   v5 editorial brush pass — tategaki, painted type, layered comps
   ============================================================ */

.brush-b{ font-family:"Yuji Boku","Yuji Syuku",serif; font-weight:400; }

/* hero: painted mark */
.calli-pre{
  font-family:"Yuji Boku","Yuji Syuku",serif;
  font-size:clamp(1rem, 1.6vw, 1.3rem); letter-spacing:.5em;
  color:rgba(244,236,220,.85); text-shadow:0 2px 16px rgba(0,0,0,.8);
  margin-bottom:8px;
}
.calli-main{ font-family:"Yuji Boku","Yuji Syuku",serif; font-size:clamp(3.2rem, 6.5vw, 5rem); letter-spacing:.08em; }

/* painted section head: big brush kanji on a red ink swash */
.head-brush{ display:flex; align-items:center; gap:24px; margin-bottom:clamp(32px, 4vw, 48px); }
.head-brush .k{
  flex:none; position:relative; padding-bottom:var(--space-2);
  font-family:"Yuji Syuku","Yuji Boku",serif;
  font-size:clamp(3rem, 6vw, 4.8rem); line-height:1.05;
  color:rgba(239,232,219,.94); letter-spacing:.04em;
}
.head-brush .k::after{
  content:""; position:absolute; left:2%; right:2%; bottom:0; height:10px;
  background:url('data:image/svg+xml,%3Csvg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 200 14" preserveAspectRatio="none"%3E%3Cpath d="M2 9 C30 3 62 8 92 6 C132 3 168 9 198 5 L197 9 C158 13 122 9 86 11 C52 13 18 13 3 11 Z" fill="%23b30013" fill-opacity="0.9"/%3E%3Cpath d="M8 12 C20 11 30 12 38 11 L37 13 C28 14 16 14 8 13 Z" fill="%23b30013" fill-opacity="0.5"/%3E%3C/svg%3E') center/100% 100% no-repeat;
}
.head-brush .hb-txt p{ font-family:var(--ui); font-size:var(--text-sm); line-height:var(--lh-sm); letter-spacing:var(--ls-label); text-transform:uppercase; color:var(--red-bright); margin-bottom:var(--space-05); }
.head-brush--center{ flex-direction:column; text-align:center; align-items:center; gap:8px; margin-bottom:8px; }
.head-brush--stack{ flex-direction:column; align-items:flex-start; text-align:left; gap:8px; margin-bottom:16px; }
.head-brush--stack .k{ font-size:clamp(2.4rem, 4.6vw, 3.6rem); }
.head-brush--center .k{ font-size:clamp(2.4rem, 4.6vw, 3.6rem); }

/* tategaki section divider */
.divider-tate{
  position:relative; padding:clamp(56px, 8vw, 88px) 0; text-align:center;
}
.divider-tate .t{
  display:inline-block; writing-mode:vertical-rl; text-orientation:upright;
  font-family:"Yuji Boku","Yuji Syuku",serif;
  font-size:clamp(1.5rem, 2.6vw, 2.1rem); letter-spacing:.4em; color:var(--gold);
}
.divider-tate::before, .divider-tate::after{
  content:""; position:absolute; left:50%; width:1px; height:clamp(24px, 4vw, 40px); opacity:.5;
}
.divider-tate::before{ top:0; background:linear-gradient(var(--gold), transparent); }
.divider-tate::after{ bottom:0; background:linear-gradient(transparent, var(--gold)); }

/* stacked dark CTA bars with chevrons */
.cta-stack{ display:flex; flex-direction:column; gap:16px; max-width:440px; }
.cta-stack a{
  display:flex; align-items:center; justify-content:space-between; gap:16px;
  padding:16px 24px; border-radius:6px;
  background:rgba(10,7,4,.82); border:1px solid rgba(239,232,219,.16);
  color:var(--ink); font-family:var(--ui); font-size:var(--text-body); letter-spacing:.04em;
  transition:background .3s ease, border-color .3s ease;
}
.cta-stack a::after{ content:"\203A"; color:var(--red-bright); font-size:1.5em; line-height:1; transition:transform .3s ease; }
.cta-stack a:hover{ background:rgba(179,0,19,.5); border-color:rgba(204,0,22,.55); }
.cta-stack a:hover::after{ transform:translateX(5px); color:#fff; }

/* kushiyaki showcase: ink ground, bleeding image, giant vertical title */
.kushi{
  position:relative; overflow:hidden;
  padding-block:clamp(72px, 10vw, 128px);
  background:
    radial-gradient(70% 90% at 85% 15%, rgba(239,232,219,.05), transparent 60%),
    linear-gradient(120deg, #0f0a06 40%, #17110a);
}
.kushi::before{
  content:""; position:absolute; right:-12%; top:50%; transform:translateY(-50%);
  width:min(72vw, 780px); aspect-ratio:1; border-radius:50%;
  background:radial-gradient(circle, rgba(239,232,219,.045) 61%, rgba(239,232,219,.09) 63%, transparent 66%);
}
.kushi-img{
  position:absolute; right:-6%; top:50%; width:58%; min-width:460px; z-index:0; opacity:.92;
  transform:translateY(-50%) rotate(-5deg);
  -webkit-mask-image:radial-gradient(75% 75% at 50% 50%, #000 50%, transparent 98%);
  mask-image:radial-gradient(75% 75% at 50% 50%, #000 50%, transparent 98%);
}
.kushi-tate{
  position:absolute; right:clamp(16px, 4vw, 56px); top:50%; transform:translateY(-50%); z-index:2;
  writing-mode:vertical-rl; text-orientation:upright;
  font-family:"Yuji Boku","Yuji Syuku",serif;
  font-size:clamp(2.4rem, 4.6vw, 3.8rem); letter-spacing:.16em;
  color:#f4ecdc; text-shadow:0 6px 40px rgba(0,0,0,.9);
}
.kushi-inner{ position:relative; z-index:2; max-width:var(--max); margin:0 auto; padding-inline:var(--gutter); }
.kushi-copy{ max-width:520px; }
@media (max-width:899px){
  .kushi-img{ position:relative; right:auto; top:auto; transform:none; width:100%; min-width:0; margin:32px 0; -webkit-mask-image:none; mask-image:none; }
  .kushi-tate{ display:none; }
}

/* asymmetric editorial cluster with overlap and depth */
.cluster{ position:relative; }
.cluster figure{ position:relative; margin:0; }
.cluster .tag{
  position:absolute; top:10px; left:-20px; z-index:4;
  writing-mode:vertical-rl; text-orientation:upright;
  font-family:"Yuji Boku","Yuji Syuku",serif;
  font-size:clamp(1.4rem, 2vw, 1.9rem); letter-spacing:.28em;
  color:var(--red-bright); text-shadow:0 2px 14px rgba(0,0,0,.8);
}
.cluster figure img{ width:100%; height:100%; object-fit:cover; display:block; }
@media (min-width:820px){
  .cluster{ display:grid; grid-template-columns:repeat(12, 1fr); padding-bottom:152px; }
  .cluster .cl-main{ grid-column:1/8; grid-row:1/3; aspect-ratio:4/3; }
  .cluster .cl-a{ grid-column:7/11; grid-row:1; z-index:2; transform:translateY(56px); border:8px solid var(--bg); box-shadow:0 20px 50px rgba(0,0,0,.5); aspect-ratio:1; }
  .cluster .cl-b{ grid-column:8/13; grid-row:2; z-index:3; transform:translate(7%, 112px); border:8px solid var(--bg); box-shadow:0 24px 60px rgba(0,0,0,.55); aspect-ratio:4/3; }
  .cluster .cl-text{ grid-column:1/7; grid-row:3; padding-top:104px; }
}
@media (max-width:819px){
  .cluster{ display:flex; flex-direction:column; gap:16px; }
  .cluster .tag{ left:auto; right:10px; }
}
.pillar-line{ display:flex; gap:16px; align-items:baseline; margin-top:24px; }
.pillar-line .pk{ font-family:"Yuji Boku","Yuji Syuku",serif; font-size:1.9rem; color:var(--red-bright); flex:none; line-height:1; }
.pillar-line h3{ margin-bottom:var(--space-05); }
.pillar-line p{ font-size:var(--text-sm); color:var(--ink-dim); }

/* vertical reading columns layered over the story image */
.tate-overlay{
  position:absolute; top:50%; right:clamp(24px, 6vw, 88px); transform:translateY(-50%);
  z-index:2; display:flex; gap:clamp(var(--space-2), 1.8vw, var(--space-3)); align-items:flex-start;
}
.tate-overlay .lead{
  writing-mode:vertical-rl; text-orientation:upright;
  font-family:"Yuji Boku","Yuji Syuku",serif;
  font-size:clamp(2.6rem, 4.4vw, 3.8rem); letter-spacing:.14em;
  color:#f4ecdc; text-shadow:0 6px 44px rgba(0,0,0,.9);
}
.tate-overlay .col{
  writing-mode:vertical-rl; text-orientation:upright;
  font-family:var(--jp); font-size:clamp(.95rem, 1.2vw, 1.1rem);
  letter-spacing:.4em; line-height:2; color:rgba(244,236,220,.8);
  padding-top:var(--space-2); text-shadow:0 2px 20px rgba(0,0,0,.85);
}
@media (max-width:899px){ .tate-overlay{ display:none; } }
.layered-inner--solo{ display:block; }
.layered-inner--solo .layered-copy{ max-width:560px; }

/* whole-bird: giant kanji column + offset tilted illustration */
.bird-wrap{ display:flex; gap:clamp(24px, 4vw, 56px); align-items:center; }
.bird-kanji{
  flex:none; writing-mode:vertical-rl; text-orientation:upright;
  font-family:"Yuji Boku","Yuji Syuku",serif;
  font-size:clamp(4rem, 8vw, 7rem); line-height:1; color:rgba(239,232,219,.16);
}
.bird-copy{ max-width:500px; }
.bird-fig{ flex:1; }
@media (max-width:899px){
  .bird-wrap{ flex-direction:column; align-items:flex-start; }
  .bird-fig{ width:100%; }
}

/* staggered photo strip */
@media (min-width:820px){
  .strip--stagger{ padding-bottom:48px; }
  .strip--stagger .figure:nth-child(2){ transform:translateY(28px); }
  .strip--stagger .figure:nth-child(3){ transform:translateY(-14px); }
  .strip--stagger .figure:nth-child(4){ transform:translateY(44px); }
}

/* ornamented seal Reserve button + phone */
.btn--seal{
  gap:var(--space-2); padding:var(--space-1) var(--space-2);
  background:linear-gradient(180deg, #b30013, #84000e); color:#f6efe1;
  border-radius:6px; box-shadow:0 6px 22px rgba(179,0,19,.35);
}
.btn--seal::after{ content:none; }
.btn--seal .kj{
  writing-mode:vertical-rl; text-orientation:upright;
  font-family:"Yuji Boku","Yuji Syuku",serif;
  font-size:var(--text-sm); line-height:1; letter-spacing:.1em;
  border-right:1px solid rgba(246,239,225,.35); padding-right:var(--space-1);
}
.btn--seal:hover{ filter:brightness(1.12); }
.nav-desktop .btn--solid{ margin-left:-24px; }

.nav-tel:hover{ color:var(--red-bright); }

/* washi paper grain ground */
.tex-washi{ position:relative; }
.tex-washi::before{
  content:""; position:absolute; inset:0; pointer-events:none; z-index:0;
  background-image:url('data:image/svg+xml,%3Csvg xmlns="http://www.w3.org/2000/svg" width="240" height="240"%3E%3Cfilter id="n"%3E%3CfeTurbulence type="fractalNoise" baseFrequency="0.85" numOctaves="2" stitchTiles="stitch"/%3E%3CfeColorMatrix values="0 0 0 0 0.94 0 0 0 0 0.91 0 0 0 0 0.86 0 0 0 0.02 0"/%3E%3C/filter%3E%3Crect width="240" height="240" filter="url(%23n)"/%3E%3C/svg%3E');
}
.tex-washi > *{ position:relative; z-index:1; }

/* ---------- gallery carousel ---------- */

.gallery-wrap{ position:relative; }
.gallery-track{
  display:flex; gap:var(--space-2);
  overflow-x:auto; scroll-snap-type:x mandatory;
  scroll-behavior:smooth; scrollbar-width:none;
  padding-bottom:var(--space-1);
}
.gallery-track::-webkit-scrollbar{ display:none; }
.gallery-track:focus-visible{ outline:2px solid var(--red-bright); outline-offset:4px; }
.gal-item{
  flex:0 0 74%; scroll-snap-align:start;
  aspect-ratio:4/5; overflow:hidden; margin:0;
}
@media (min-width:640px){ .gal-item{ flex-basis:38%; } }
@media (min-width:1024px){ .gal-item{ flex-basis:24%; } }
.gal-item img{ width:100%; height:100%; object-fit:cover; transition:transform 1s cubic-bezier(.2,.6,.2,1); }
.gal-item:hover img{ transform:scale(1.04); }

.gal-arrow{
  position:absolute; top:50%; transform:translateY(-50%); z-index:3;
  width:48px; height:48px; display:flex; align-items:center; justify-content:center;
  border:1px solid rgba(239,232,219,.28); border-radius:50%;
  background:rgba(15,10,6,.82); color:var(--ink);
  cursor:pointer; transition:background .3s ease, border-color .3s ease, opacity .3s ease;
  -webkit-backdrop-filter:blur(6px); backdrop-filter:blur(6px);
}
.gal-arrow:hover{ background:var(--red); border-color:var(--red); color:#f6efe1; }
.gal-arrow[disabled]{ opacity:.25; cursor:default; }
.gal-arrow[disabled]:hover{ background:rgba(15,10,6,.82); border-color:rgba(239,232,219,.28); color:var(--ink); }
.gal-prev{ left:calc(var(--space-3) * -1); }
.gal-next{ right:calc(var(--space-3) * -1); }
@media (max-width:900px){ .gal-prev{ left:var(--space-1); } .gal-next{ right:var(--space-1); } }
@media (prefers-reduced-motion: reduce){ .gallery-track{ scroll-behavior:auto; } }

/* ---------- quote panel on a seigaiha ground ---------- */

.quote-panel{
  position:relative;
  margin-top:clamp(var(--space-6), 6vw, var(--space-10));
  padding:clamp(var(--space-6), 6vw, var(--space-10)) var(--space-6);
  background-color:var(--bg-2);
  background-image:url('data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 width=%2260%22 height=%2230%22 viewBox=%220 0 60 30%22%3E%3Ccircle cx=%2230%22 cy=%22-15%22 r=%2228%22 fill=%22%23171009%22 stroke=%22%23efe8db%22 stroke-opacity=%220.03%22/%3E%3Ccircle cx=%2230%22 cy=%22-15%22 r=%2219%22 fill=%22none%22 stroke=%22%23efe8db%22 stroke-opacity=%220.027%22/%3E%3Ccircle cx=%2230%22 cy=%22-15%22 r=%2210%22 fill=%22none%22 stroke=%22%23efe8db%22 stroke-opacity=%220.024%22/%3E%3Ccircle cx=%220%22 cy=%220%22 r=%2228%22 fill=%22%23171009%22 stroke=%22%23efe8db%22 stroke-opacity=%220.03%22/%3E%3Ccircle cx=%220%22 cy=%220%22 r=%2219%22 fill=%22none%22 stroke=%22%23efe8db%22 stroke-opacity=%220.027%22/%3E%3Ccircle cx=%220%22 cy=%220%22 r=%2210%22 fill=%22none%22 stroke=%22%23efe8db%22 stroke-opacity=%220.024%22/%3E%3Ccircle cx=%2260%22 cy=%220%22 r=%2228%22 fill=%22%23171009%22 stroke=%22%23efe8db%22 stroke-opacity=%220.03%22/%3E%3Ccircle cx=%2260%22 cy=%220%22 r=%2219%22 fill=%22none%22 stroke=%22%23efe8db%22 stroke-opacity=%220.027%22/%3E%3Ccircle cx=%2260%22 cy=%220%22 r=%2210%22 fill=%22none%22 stroke=%22%23efe8db%22 stroke-opacity=%220.024%22/%3E%3Ccircle cx=%2230%22 cy=%2215%22 r=%2228%22 fill=%22%23171009%22 stroke=%22%23efe8db%22 stroke-opacity=%220.03%22/%3E%3Ccircle cx=%2230%22 cy=%2215%22 r=%2219%22 fill=%22none%22 stroke=%22%23efe8db%22 stroke-opacity=%220.027%22/%3E%3Ccircle cx=%2230%22 cy=%2215%22 r=%2210%22 fill=%22none%22 stroke=%22%23efe8db%22 stroke-opacity=%220.024%22/%3E%3Ccircle cx=%220%22 cy=%2230%22 r=%2228%22 fill=%22%23171009%22 stroke=%22%23efe8db%22 stroke-opacity=%220.03%22/%3E%3Ccircle cx=%220%22 cy=%2230%22 r=%2219%22 fill=%22none%22 stroke=%22%23efe8db%22 stroke-opacity=%220.027%22/%3E%3Ccircle cx=%220%22 cy=%2230%22 r=%2210%22 fill=%22none%22 stroke=%22%23efe8db%22 stroke-opacity=%220.024%22/%3E%3Ccircle cx=%2260%22 cy=%2230%22 r=%2228%22 fill=%22%23171009%22 stroke=%22%23efe8db%22 stroke-opacity=%220.03%22/%3E%3Ccircle cx=%2260%22 cy=%2230%22 r=%2219%22 fill=%22none%22 stroke=%22%23efe8db%22 stroke-opacity=%220.027%22/%3E%3Ccircle cx=%2260%22 cy=%2230%22 r=%2210%22 fill=%22none%22 stroke=%22%23efe8db%22 stroke-opacity=%220.024%22/%3E%3Ccircle cx=%2230%22 cy=%2245%22 r=%2228%22 fill=%22%23171009%22 stroke=%22%23efe8db%22 stroke-opacity=%220.03%22/%3E%3Ccircle cx=%2230%22 cy=%2245%22 r=%2219%22 fill=%22none%22 stroke=%22%23efe8db%22 stroke-opacity=%220.027%22/%3E%3Ccircle cx=%2230%22 cy=%2245%22 r=%2210%22 fill=%22none%22 stroke=%22%23efe8db%22 stroke-opacity=%220.024%22/%3E%3C/svg%3E');
  background-size:120px 60px;
  border-top:1px solid rgba(217,154,78,.12);
  border-bottom:1px solid rgba(217,154,78,.12);
}
.quote-panel .pull-quote{ margin:0 auto; max-width:34em; text-align:center; }

/* ---------- ambient motion ---------- */

/* 1. hero: slow ken-burns drift on the container (parallax owns the img transform) */
@keyframes hero-drift{
  from{ transform:scale(1); }
  to{ transform:scale(1.06); }
}
.hero--stage .hero-media{
  animation:hero-drift 32s ease-in-out infinite alternate;
  transform-origin:55% 50%;
}

/* 2. embers rising off the grill in the closing CTA */
.embers{ position:absolute; inset:0; z-index:1; pointer-events:none; overflow:hidden; }
.embers span{
  position:absolute; bottom:-12px;
  width:3px; height:3px; border-radius:50%;
  background:radial-gradient(circle, rgba(255,186,110,.95), rgba(214,96,30,.25) 60%, transparent 70%);
  opacity:0;
  animation:ember-rise linear infinite;
}
@keyframes ember-rise{
  0%{ transform:translate3d(0,0,0) scale(.7); opacity:0; }
  12%{ opacity:.9; }
  70%{ opacity:.55; }
  100%{ transform:translate3d(var(--dx, 14px), -320px, 0) scale(1.15); opacity:0; }
}
.embers span:nth-child(1){ left:8%;  animation-duration:9s;  animation-delay:0s;   --dx:18px; }
.embers span:nth-child(2){ left:17%; animation-duration:11s; animation-delay:1.4s; --dx:-12px; }
.embers span:nth-child(3){ left:26%; animation-duration:8s;  animation-delay:3.1s; --dx:22px; }
.embers span:nth-child(4){ left:35%; animation-duration:12s; animation-delay:.6s;  --dx:-18px; width:2px; height:2px; }
.embers span:nth-child(5){ left:44%; animation-duration:10s; animation-delay:4.2s; --dx:10px; }
.embers span:nth-child(6){ left:53%; animation-duration:9.5s;animation-delay:2.2s; --dx:-24px; width:4px; height:4px; }
.embers span:nth-child(7){ left:62%; animation-duration:13s; animation-delay:5.5s; --dx:16px; }
.embers span:nth-child(8){ left:71%; animation-duration:8.5s;animation-delay:3.8s; --dx:-14px; width:2px; height:2px; }
.embers span:nth-child(9){ left:80%; animation-duration:11.5s;animation-delay:1s;  --dx:20px; }
.embers span:nth-child(10){ left:89%;animation-duration:10.5s;animation-delay:6.1s;--dx:-10px; }
.embers span:nth-child(11){ left:31%;animation-duration:14s; animation-delay:7.3s; --dx:26px; width:2px; height:2px; }
.embers span:nth-child(12){ left:68%;animation-duration:12.5s;animation-delay:8.4s;--dx:-20px; }
.cta-banner .cta-inner{ position:relative; z-index:2; }

/* 3. red brush stroke paints itself in when a section head arrives */
.head-brush .k::after{ transform-origin:left center; transform:scaleX(0); transition:transform .8s cubic-bezier(.2,.7,.3,1) .15s; }
.reveal.is-visible .head-brush .k::after,
.is-visible.head-brush .k::after,
.section-head.is-visible .head-brush .k::after{ transform:scaleX(1); }

/* 4. photos wipe up into view */
.reveal .figure img, .reveal .gal-item img, .reveal .kanji-card-media img{
  clip-path:inset(14% 0 0 0); transition:clip-path 1s cubic-bezier(.2,.7,.3,1);
}
.reveal.is-visible .figure img, .reveal.is-visible .gal-item img, .reveal.is-visible .kanji-card-media img{
  clip-path:inset(0 0 0 0);
}

@media (prefers-reduced-motion: reduce){
  .hero--stage .hero-media{ animation:none; }
  .embers{ display:none; }
  .head-brush .k::after{ transform:scaleX(1); transition:none; }
  .reveal .figure img, .reveal .gal-item img, .reveal .kanji-card-media img{ clip-path:none; transition:none; }
}

/* ---------- reveal animation ---------- */

.reveal{ transform:translateY(16px); transition:transform .6s cubic-bezier(.2,.6,.2,1); }
.reveal.is-visible{ transform:none; }
.reveal-d1{ transition-delay:.12s; }
.reveal-d2{ transition-delay:.24s; }
.reveal-d3{ transition-delay:.36s; }
@media (prefers-reduced-motion: reduce){ .reveal{ transform:none; } }