/* =========================================================
   銀座桐山 GINZA KIRIYAMA — Brand Site
   Design system : 黒基調 × 銅色アクセント / 余白 / 静けさ
   ========================================================= */

/* ---------- Fonts ---------- */
/* Loaded via <link> in <head>:
   Cormorant Garamond (display serif, EN)
   Shippori Mincho     (JA serif)
   Jost                (EN labels / UI)
   Zen Kaku Gothic New (JA UI / body sans) */

/* ---------- Tokens ---------- */
:root{
  --ink:        #0b0b0c;
  --ink-2:      #101011;
  --noir:       #16161a;
  --noir-2:     #1d1d22;
  --line:       rgba(255,255,255,.12);
  --line-soft:  rgba(255,255,255,.07);

  --text:       #e9e4da;
  --text-dim:   #b3ada3;
  --text-faint: #837d73;

  --copper:        #9e6446;
  --copper-bright: #c08765;
  --copper-deep:   #6e4a34;
  --copper-glow:   rgba(158,100,70,.5);

  --maxw: 1280px;
  --gutter: clamp(1.25rem, 5vw, 5rem);
  --section-y: clamp(5rem, 12vw, 11rem);

  --serif-en: "Cormorant Garamond", "Shippori Mincho", serif;
  --serif-ja: "Shippori Mincho", "Cormorant Garamond", serif;
  --sans-en:  "Jost", "Zen Kaku Gothic New", sans-serif;
  --sans-ja:  "Zen Kaku Gothic New", "Jost", sans-serif;

  --ease: cubic-bezier(.22,.61,.36,1);
  --header-h: 84px;
  color-scheme: dark;
}

/* ---------- Reset ---------- */
*,*::before,*::after{ box-sizing:border-box; margin:0; padding:0; }
html{ -webkit-text-size-adjust:100%; scroll-behavior:smooth; }
@media (prefers-reduced-motion: reduce){ html{ scroll-behavior:auto; } }
body{
  font-family:var(--sans-ja);
  background:var(--ink);
  color:var(--text);
  line-height:1.8;
  font-size:16px;
  letter-spacing:.02em;
  overflow-x:hidden;
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
}
img{ display:block; max-width:100%; height:auto; }
a{ color:inherit; text-decoration:none; }
button{ font-family:inherit; cursor:pointer; border:none; background:none; color:inherit; }
ul{ list-style:none; }
::selection{ background:var(--copper); color:#0b0b0c; }

/* ---------- Layout helpers ---------- */
.wrap{ max-width:var(--maxw); margin:0 auto; padding-inline:var(--gutter); }
.wrap-narrow{ max-width:880px; margin:0 auto; padding-inline:var(--gutter); }
section{ position:relative; }

/* ---------- Type ---------- */
.eyebrow{
  font-family:var(--sans-en);
  font-size:.6rem;
  letter-spacing:.5em;
  text-transform:uppercase;
  color:var(--copper);
  font-weight:400;
  display:inline-flex;
  align-items:center;
  gap:1.1em;
  opacity:.92;
}
.eyebrow::before{
  content:"";
  width:26px; height:1px;
  background:rgba(158,100,70,.5);
}
.eyebrow.center{ justify-content:center; }
.eyebrow.center::after{
  content:"";
  width:26px; height:1px;
  background:rgba(158,100,70,.5);
}

h1,h2,h3{ font-weight:400; line-height:1.22; letter-spacing:.04em; }
.display{
  font-family:var(--serif-en);
  font-weight:300;
  line-height:1.06;
  letter-spacing:.02em;
}
.h-xl{ font-family:var(--serif-ja); font-size:clamp(1.65rem,5.2vw,4rem); font-weight:300; }
.br-sp{ display:none; }
.h-lg{ font-family:var(--serif-ja); font-size:clamp(1.6rem,3vw,2.35rem); font-weight:300; letter-spacing:.02em; }
.h-md{ font-family:var(--serif-ja); font-size:clamp(1.3rem,2.4vw,1.8rem); font-weight:400; }
.h-sm{ font-family:var(--serif-ja); font-size:1.08rem; font-weight:400; letter-spacing:.06em; color:var(--copper-bright); }
.rsv-block + .rsv-block{ margin-top:clamp(2.4rem,5vw,3.6rem); padding-top:clamp(2.4rem,5vw,3.6rem); border-top:1px solid var(--line-soft); }
.lead{ font-size:clamp(1rem,1.4vw,1.18rem); color:var(--text-dim); line-height:2.1; font-weight:300; }
.muted{ color:var(--text-dim); }
.faint{ color:var(--text-faint); }
.serif{ font-family:var(--serif-ja); }
.en{ font-family:var(--sans-en); }

/* vertical rhythm */
.stack > * + *{ margin-top:1.4em; }

/* ---------- Buttons ---------- */
.btn{
  display:inline-flex; align-items:center; justify-content:center; gap:.8em;
  font-family:var(--sans-en);
  font-size:.68rem; letter-spacing:.34em; text-transform:uppercase; font-weight:400;
  padding:1.3em 3.2em;
  border:1px solid rgba(158,100,70,.55);
  color:var(--copper-bright);
  background:transparent;
  border-radius:0;
  transition:color .6s var(--ease), background-color .6s var(--ease), border-color .6s var(--ease);
  white-space:nowrap;
}
.btn:hover{ color:#0b0b0c; background-color:var(--copper-bright); border-color:var(--copper-bright); }
.btn--solid{ color:var(--copper-bright); background:transparent; border-color:rgba(158,100,70,.55); }
.btn--solid:hover{ color:#0b0b0c; background-color:var(--copper-bright); border-color:var(--copper-bright); }
.btn--ghost{ border-color:rgba(255,255,255,.35); color:var(--text); }
.btn--ghost:hover{ color:#0b0b0c; background-color:var(--text); border-color:var(--text); }
.btn--lg{ padding:1.45em 3.6em; }

.textlink{
  font-family:var(--sans-en); font-size:.8rem; letter-spacing:.2em; text-transform:uppercase;
  color:var(--copper-bright); display:inline-flex; align-items:center; gap:.7em;
  padding-bottom:.3em; border-bottom:1px solid var(--line);
  transition:gap .4s var(--ease), border-color .4s var(--ease);
}
.textlink .arw{ transition:transform .4s var(--ease); }
.textlink:hover{ border-color:var(--copper); }
.textlink:hover .arw{ transform:translateX(6px); }

/* =========================================================
   HEADER
   ========================================================= */
.site-header{
  position:fixed; inset:0 0 auto 0; z-index:120;
  height:var(--header-h);
  display:flex; align-items:center;
  transition:background .5s var(--ease), backdrop-filter .5s var(--ease), height .5s var(--ease), border-color .5s var(--ease);
  border-bottom:1px solid transparent;
}
.site-header .wrap{ display:flex; align-items:center; justify-content:space-between; gap:1.5rem; width:100%; }
.site-header.scrolled,
.site-header.solid{
  background:rgba(11,11,12,.82);
  backdrop-filter:blur(14px) saturate(120%);
  border-bottom-color:var(--line-soft);
  height:68px;
}

/* logo */
.brand{ display:flex; align-items:center; gap:.7rem; flex-shrink:0; }
.brand__mark{ width:34px; height:34px; flex:none; }
.brand__txt{ display:flex; flex-direction:column; line-height:1; }
.brand__ja{ font-family:var(--serif-ja); font-size:1.18rem; letter-spacing:.18em; color:var(--text); }
.brand__en{ font-family:var(--sans-en); font-size:.52rem; letter-spacing:.46em; text-transform:uppercase; color:var(--copper-bright); margin-top:.45em; }

/* desktop nav */
.nav{ display:flex; align-items:center; gap:clamp(1rem,2vw,2rem); }
.nav__links{ display:flex; align-items:center; gap:clamp(1rem,2vw,2.1rem); }
.nav__links a{
  font-family:var(--sans-en); font-size:.74rem; letter-spacing:.2em; text-transform:uppercase;
  color:var(--text-dim); position:relative; padding:.3em 0;
  transition:color .35s var(--ease);
}
.nav__links a::after{
  content:""; position:absolute; left:0; bottom:0; width:0; height:1px;
  background:var(--copper); transition:width .35s var(--ease);
}
.nav__links a:hover,.nav__links a[aria-current="page"]{ color:var(--text); }
.nav__links a:hover::after,.nav__links a[aria-current="page"]::after{ width:100%; }

.nav__tools{ display:flex; align-items:center; gap:1.1rem; }

/* language switch */
.lang{ display:flex; align-items:center; gap:.1rem; font-family:var(--sans-en); font-size:.72rem; letter-spacing:.12em; white-space:nowrap; }
.lang button{ color:var(--text-faint); padding:.35em .55em; transition:color .3s var(--ease); border-radius:2px; }
.lang button[aria-pressed="true"]{ color:var(--copper-bright); }
.lang button:hover{ color:var(--text); }
.lang .sep{ color:var(--line); }

.header-reserve{ display:inline-flex; }

/* hamburger */
.burger{
  display:none; width:auto; height:auto; position:relative; z-index:130;
  flex:none; padding:.4em 0; background:none;
}
.burger span{ display:none; }
.burger::after{
  content:"Menu";
  font-family:var(--sans-en); font-size:.7rem; letter-spacing:.34em; text-transform:uppercase;
  color:var(--text); transition:color .3s var(--ease);
}
body.menu-open .burger::after{ content:"Close"; color:var(--text); }

/* full-screen overlay menu */
.drawer{
  position:fixed; inset:0; z-index:115;
  background:radial-gradient(120% 90% at 70% 0%, #15110e 0%, #0c0b0c 42%, #070708 100%);
  display:flex; flex-direction:column; justify-content:flex-start;
  padding:calc(var(--header-h) + clamp(2rem,7vh,4.5rem)) var(--gutter) 3rem;
  overflow-y:auto; -webkit-overflow-scrolling:touch;
  opacity:0; visibility:hidden; transform:translateY(-2%);
  transition:opacity .6s var(--ease), transform .6s var(--ease), visibility .6s;
}
.drawer__links{ flex:none; }
.drawer__foot{ flex:none; }
body.menu-open .drawer{ opacity:1; visibility:visible; transform:translateY(0); }
.drawer__links{ display:flex; flex-direction:column; }
.drawer__links a{
  font-family:var(--serif-ja); font-size:clamp(1.45rem,6vw,1.95rem); font-weight:300;
  letter-spacing:.1em; color:#e9e3d7; padding:.78em 0; display:flex; align-items:center;
  border-bottom:1px solid rgba(255,255,255,.06);
  opacity:0; transform:translateY(14px);
  transition:color .45s var(--ease), letter-spacing .55s var(--ease);
}
.drawer__links a:hover{ color:var(--copper-bright); letter-spacing:.2em; }
body.menu-open .drawer__links a{ animation:drawerIn .6s var(--ease) forwards; }
.drawer__links a .idx{ display:none; }   /* numbers removed for a quieter, more elegant list */
.drawer__foot{ margin-top:clamp(2.2rem,5vh,3.4rem); display:flex; flex-direction:column; gap:1.5rem; }
@keyframes drawerIn{ to{ opacity:1; transform:translateY(0); } }

/* =========================================================
   HERO (TOP)
   ========================================================= */
.hero{ position:relative; height:100svh; min-height:600px; overflow:hidden; background:var(--ink); }
.hero__video{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; z-index:0; }
.hero__slides{ position:absolute; inset:0; z-index:0; overflow:hidden; }
.hero__slide{
  position:absolute; inset:0; opacity:0;
  background-size:cover; background-position:center;
  transition:opacity 1.7s cubic-bezier(.4,0,.3,1);   /* soft dissolve (~staging xfade) */
  will-change:opacity;
}
.hero__slide.active{ opacity:1; }
.hero__v{ width:100%; height:100%; object-fit:cover; display:block; }
/* counter slide only: smooth zoom-OUT Ken Burns (GPU transform, no jitter) */
.hero__slide--zoom{ transform:scale(1.16); transform-origin:center; will-change:opacity, transform; }
.hero__slide--zoom.active{ animation:kenburns 7s ease-out forwards; }
@keyframes kenburns{ from{ transform:scale(1.16);} to{ transform:scale(1.0);} }
.hero::after{ /* readability veil */
  content:""; position:absolute; inset:0;
  background:
    linear-gradient(180deg, rgba(8,8,9,.55) 0%, rgba(8,8,9,.15) 30%, rgba(8,8,9,.35) 70%, rgba(8,8,9,.85) 100%),
    radial-gradient(120% 80% at 50% 40%, transparent 40%, rgba(8,8,9,.5) 100%);
  z-index:1; pointer-events:none;
}
.hero__inner{
  position:relative; z-index:2; height:100%;
  display:flex; flex-direction:column; align-items:center; justify-content:center;
  text-align:center; padding:var(--header-h) var(--gutter) clamp(6rem,14vh,9rem);
}
.hero__emblem{ width:54px; height:54px; margin-bottom:1.8rem; opacity:0; animation:fadeUp 1.2s var(--ease) .3s forwards; }
.hero__logo{ width:min(78vw,560px); height:auto; margin:0 auto; filter:drop-shadow(0 2px 16px rgba(0,0,0,.92)) drop-shadow(0 0 4px rgba(0,0,0,.6)); opacity:0; animation:heroLogoIn 3.4s cubic-bezier(.16,.55,.2,1) .7s forwards; }
@keyframes heroLogoIn{ from{ opacity:0; transform:translateY(16px) scale(1.012); } to{ opacity:1; transform:translateY(0) scale(1); } }
h1.hero__h1{ margin:0; }
.hero__title{
  font-family:var(--serif-ja); font-weight:300;
  font-size:clamp(2.6rem,8vw,6rem); letter-spacing:.16em; line-height:1.1;
  text-shadow:0 4px 40px rgba(0,0,0,.5);
  opacity:0; animation:fadeUp 1.3s var(--ease) .5s forwards;
}
.hero__en{
  font-family:var(--sans-en); font-size:clamp(.7rem,1.6vw,.92rem);
  letter-spacing:.6em; text-transform:uppercase; color:var(--copper-bright);
  margin-top:1.6rem; padding-left:.6em;
  opacity:0; animation:fadeUp 1.3s var(--ease) .7s forwards;
}
.hero__tag{
  font-family:var(--serif-ja); font-size:clamp(.9rem,1.6vw,1.08rem); color:var(--text-dim);
  margin-top:2.2rem; font-weight:300; letter-spacing:.28em; padding-left:.28em;
  opacity:0; animation:fadeUp 1.3s var(--ease) .9s forwards;
}
.hero__cta{ margin-top:3.2rem; display:flex; gap:1rem; flex-wrap:wrap; justify-content:center;
  opacity:0; animation:fadeUp 1.3s var(--ease) 1.1s forwards; }
.hero__scroll{
  position:absolute; bottom:1.8rem; left:50%; transform:translateX(-50%); z-index:2;
  display:flex; flex-direction:column; align-items:center; gap:.8rem;
  font-family:var(--sans-en); font-size:.6rem; letter-spacing:.3em; text-transform:uppercase; color:var(--text-faint);
  opacity:0; animation:fadeUp 1.3s var(--ease) 1.4s forwards;
}
.hero__scroll .bar{ width:1px; height:46px; background:linear-gradient(var(--copper),transparent); position:relative; overflow:hidden; }
.hero__scroll .bar::after{ content:""; position:absolute; top:-50%; left:0; width:100%; height:50%; background:var(--copper-bright); animation:scrolldot 2.2s var(--ease) infinite; }
@keyframes scrolldot{ 0%{ top:-50%;} 60%,100%{ top:100%;} }

/* hero slide indicators */
.hero__dots{ position:absolute; bottom:2rem; right:var(--gutter); z-index:2; display:flex; gap:.6rem; }
.hero__dots button{ width:28px; height:2px; background:var(--line); transition:background .4s; }
.hero__dots button[aria-pressed="true"]{ background:var(--copper-bright); }

@keyframes fadeUp{ from{ opacity:0; transform:translateY(24px);} to{ opacity:1; transform:translateY(0);} }

/* =========================================================
   PAGE HERO (sub pages)
   ========================================================= */
.page-hero{ position:relative; min-height:62vh; display:flex; align-items:flex-end; overflow:hidden; }
.page-hero__bg{ position:absolute; inset:0; background-size:cover; background-position:center; transform:scale(1.05); }
.page-hero::after{ content:""; position:absolute; inset:0; background:linear-gradient(180deg,rgba(8,8,9,.6),rgba(8,8,9,.35) 45%,rgba(11,11,12,.95)); }
.page-hero__inner{ position:relative; z-index:2; padding-bottom:clamp(2.5rem,6vw,5rem); padding-top:calc(var(--header-h) + 2rem); width:100%; }
.page-hero__inner .eyebrow{ margin-bottom:1.2rem; }
.page-hero__title .en{ display:block; font-family:var(--serif-en); font-weight:300; font-size:clamp(2.6rem,7vw,5rem); letter-spacing:.05em; line-height:1; }
.page-hero__title .ja{ display:block; font-family:var(--serif-ja); font-size:clamp(1rem,2vw,1.4rem); color:var(--text-dim); margin-top:1rem; letter-spacing:.2em; font-weight:300; }

/* =========================================================
   Reusable section bits
   ========================================================= */
.section{ padding-block:var(--section-y); }
.section--tight{ padding-block:clamp(3.5rem,8vw,7rem); }
.bg-noir{ background:var(--noir); }
.bg-ink2{ background:var(--ink-2); }
.divider{ height:1px; background:var(--line-soft); border:0; }

.section-head{ max-width:720px; }
.section-head.center{ margin-inline:auto; text-align:center; }
.section-head .eyebrow{ margin-bottom:1.4rem; }
.section-head h2{ margin-bottom:1.4rem; }

/* split (image + text) */
.split{ display:grid; grid-template-columns:1fr 1fr; gap:clamp(2rem,6vw,6rem); align-items:center; }
.split--rev .split__media{ order:2; }
.split__media{ position:relative; }
.split__media img{ width:100%; aspect-ratio:4/5; object-fit:cover; }
.split__media.wide img{ aspect-ratio:3/4; }
.media-cap{ position:absolute; bottom:1rem; left:1rem; font-family:var(--sans-en); font-size:.62rem; letter-spacing:.28em; text-transform:uppercase; color:var(--text); background:rgba(11,11,12,.5); backdrop-filter:blur(6px); padding:.5em .9em; border-left:2px solid var(--copper); }
.frame{ position:relative; }
.frame::before{ content:""; position:absolute; inset:14px; border:1px solid rgba(255,255,255,.18); z-index:2; pointer-events:none; }

/* full-bleed quote / statement */
.statement{ text-align:center; }
.statement .big{ font-family:var(--serif-ja); font-weight:300; font-size:clamp(1.3rem,2.4vw,1.8rem); line-height:1.8; letter-spacing:.02em; }
.statement .big .accent{ color:var(--copper-bright); }

/* feature grid (concept values) */
.feature-grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:1px; background:var(--line-soft); border:1px solid var(--line-soft); }
.feature{ background:var(--ink); padding:clamp(2rem,3.5vw,3rem); }
.feature .no{ font-family:var(--serif-en); font-size:1.1rem; color:var(--copper); letter-spacing:.1em; }
.feature h3{ font-family:var(--serif-ja); font-size:1.25rem; margin:.8rem 0 1rem; }
.feature p{ color:var(--text-dim); font-size:.92rem; line-height:1.95; }

/* image with caption block (concept word+photo) */
.word-photo{ position:relative; }
.word-photo img{ width:100%; aspect-ratio:16/10; object-fit:cover; }
.word-photo__cap{ margin-top:1.2rem; }
.word-photo__cap .w{ font-family:var(--serif-ja); font-size:1.35rem; }
.word-photo__cap .d{ color:var(--text-dim); font-size:.9rem; margin-top:.5rem; }

/* gallery / dishes */
.dish-grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:clamp(1rem,2vw,1.6rem); }
.dish{ position:relative; overflow:hidden; }
.dish img{ width:100%; aspect-ratio:1/1; object-fit:cover; transition:transform 1.1s var(--ease); }
.dish:hover img{ transform:scale(1.06); }
.dish__cap{ position:absolute; left:0; right:0; bottom:0; padding:1.4rem; background:linear-gradient(transparent,rgba(8,8,9,.88)); opacity:1; transition:background .5s var(--ease); }
.dish:hover .dish__cap{ background:linear-gradient(transparent,rgba(8,8,9,.96)); }
.dish__cap .t{ font-family:var(--serif-ja); font-size:1.05rem; }
.dish__cap .s{ font-family:var(--sans-en); font-size:.62rem; letter-spacing:.24em; text-transform:uppercase; color:var(--copper-bright); }

/* course list */
.course{ display:grid; grid-template-columns:auto 1fr auto; gap:1.5rem; align-items:baseline; padding:1.6rem 0; border-bottom:1px solid var(--line-soft); }
.course .no{ font-family:var(--serif-en); color:var(--copper); font-size:1.1rem; }
.course .name{ font-family:var(--serif-ja); font-size:1.15rem; }
.course .name small{ display:block; font-family:var(--sans-en); font-size:.62rem; letter-spacing:.24em; text-transform:uppercase; color:var(--text-faint); margin-top:.4rem; }
.course .price{ font-family:var(--serif-en); color:var(--text-dim); font-size:1.05rem; }

/* info table */
.info-table{ width:100%; border-top:1px solid var(--line-soft); }
.info-table div{ display:grid; grid-template-columns:170px 1fr; gap:1.5rem; padding:1.25rem 0; border-bottom:1px solid var(--line-soft); }
.info-table dt{ font-family:var(--sans-en); font-size:.72rem; letter-spacing:.22em; text-transform:uppercase; color:var(--copper-bright); }
.info-table dd{ color:var(--text); }

/* stat / timeline (chef) */
.timeline{ position:relative; padding-left:2rem; }
.timeline::before{ content:""; position:absolute; left:0; top:.4rem; bottom:.4rem; width:1px; background:var(--line); }
.tl{ position:relative; padding:0 0 2.4rem; }
.tl::before{ content:""; position:absolute; left:-2rem; top:.55rem; width:9px; height:9px; border-radius:50%; background:var(--copper); transform:translateX(-4px); box-shadow:0 0 0 4px var(--ink); }
.tl .yr{ font-family:var(--serif-en); color:var(--copper-bright); font-size:1.05rem; letter-spacing:.08em; }
.tl h4{ font-family:var(--serif-ja); font-weight:400; font-size:1.15rem; margin:.4rem 0 .5rem; }
.tl p{ color:var(--text-dim); font-size:.92rem; }

/* =========================================================
   Forms
   ========================================================= */
.form{ display:grid; gap:1.6rem; }
.field{ display:flex; flex-direction:column; gap:.6rem; }
.field.row2{ display:grid; grid-template-columns:1fr 1fr; gap:1.2rem; }
.field label, .field > .lbl{ font-family:var(--sans-en); font-size:.72rem; letter-spacing:.2em; text-transform:uppercase; color:var(--copper-bright); }
.field label .req{ color:var(--copper); }
.input,.select,.textarea{
  width:100%; background:var(--noir); border:1px solid var(--line); color:var(--text);
  padding:1em 1.1em; font-family:var(--sans-ja); font-size:.95rem; letter-spacing:.02em;
  transition:border-color .35s var(--ease), background .35s var(--ease);
}
.input:focus,.select:focus,.textarea:focus{ outline:none; border-color:var(--copper); background:var(--ink-2); }
.textarea{ min-height:140px; resize:vertical; }
select.select{ appearance:none; background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1l5 5 5-5' stroke='%23c08a55' fill='none' stroke-width='1.4'/%3E%3C/svg%3E"); background-repeat:no-repeat; background-position:right 1.1em center; padding-right:2.6em; }
.hint{ font-size:.8rem; color:var(--text-faint); }
.choice{ display:flex; flex-wrap:wrap; gap:.7rem; }
.choice label{ display:inline-flex; align-items:center; gap:.5em; padding:.7em 1.1em; border:1px solid var(--line); cursor:pointer; font-family:var(--sans-ja); font-size:.85rem; text-transform:none; letter-spacing:.02em; color:var(--text-dim); transition:.3s var(--ease); }
.choice input{ accent-color:var(--copper); }
.choice label:has(input:checked){ border-color:var(--copper); color:var(--text); background:var(--noir); }
.form-note{ font-size:.85rem; color:var(--text-faint); line-height:1.9; }
.form-msg{ padding:1.2em 1.4em; border:1px solid var(--copper); background:rgba(158,100,70,.08); color:var(--copper-bright); font-size:.92rem; display:none; }
.form-msg.show{ display:block; animation:fadeUp .5s var(--ease); }

/* CTA band */
.cta-band{ position:relative; overflow:hidden; text-align:center; }
.cta-band__bg{ position:absolute; inset:0; background-size:cover; background-position:center; }
.cta-band::after{ content:""; position:absolute; inset:0; background:rgba(8,8,9,.74); }
.cta-band__in{ position:relative; z-index:2; padding-block:clamp(4rem,9vw,7rem); }

/* =========================================================
   FOOTER
   ========================================================= */
.site-footer{ background:#070708; border-top:1px solid var(--line-soft); padding-block:clamp(3.5rem,7vw,6rem) 2.5rem; }
.footer-grid{ display:grid; grid-template-columns:1.4fr 1fr 1fr; gap:clamp(2rem,5vw,4rem); }
.footer-brand .brand{ margin-bottom:1.4rem; }
.footer-brand p{ color:var(--text-faint); font-size:.88rem; line-height:1.95; max-width:30ch; }
.footer-col h4{ font-family:var(--sans-en); font-size:.7rem; letter-spacing:.24em; text-transform:uppercase; color:var(--copper-bright); margin-bottom:1.3rem; }
.footer-col a, .footer-col li{ display:block; color:var(--text-dim); font-size:.9rem; padding:.35em 0; transition:color .3s; }
.footer-col a:hover{ color:var(--text); }
.footer-bottom{ display:flex; justify-content:space-between; align-items:center; gap:1rem; flex-wrap:wrap; margin-top:clamp(2.5rem,5vw,4rem); padding-top:1.8rem; border-top:1px solid var(--line-soft); }
.footer-bottom small, .footer-bottom a{ color:var(--text-faint); font-size:.76rem; letter-spacing:.06em; }
.footer-legal{ display:flex; gap:1.6rem; flex-wrap:wrap; }

/* =========================================================
   Legal / prose
   ========================================================= */
.prose{ max-width:760px; }
.prose .lawblock{ padding:2rem 0; border-bottom:1px solid var(--line-soft); }
.prose h2{ font-family:var(--serif-ja); font-size:1.3rem; font-weight:500; margin-bottom:1rem; display:flex; gap:.7em; align-items:baseline; }
.prose h2 .n{ font-family:var(--serif-en); color:var(--copper); font-size:1rem; }
.prose h3{ font-family:var(--sans-ja); font-size:1rem; color:var(--copper-bright); margin:1.4rem 0 .5rem; font-weight:500; }
.prose p{ color:var(--text-dim); font-size:.95rem; line-height:2; margin-bottom:.8rem; }
.prose ul{ margin:.4rem 0 .8rem; }
.prose ul li{ color:var(--text-dim); font-size:.95rem; line-height:1.95; padding-left:1.3em; position:relative; }
.prose ul li::before{ content:""; position:absolute; left:0; top:.85em; width:5px; height:1px; background:var(--copper); }
.prose .updated{ color:var(--text-faint); font-size:.84rem; margin-bottom:2rem; }

/* =========================================================
   Scroll reveal
   ========================================================= */
.reveal{ opacity:0; transform:translateY(30px); transition:opacity 1s var(--ease), transform 1s var(--ease); }
.reveal.in{ opacity:1; transform:none; }
.reveal.d1{ transition-delay:.12s; }
.reveal.d2{ transition-delay:.24s; }
.reveal.d3{ transition-delay:.36s; }
@media (prefers-reduced-motion: reduce){
  .reveal{ opacity:1; transform:none; transition:none; }
  .hero__slide.active{ animation:none; }
  [class*="animation"]{ animation:none !important; }
}

/* =========================================================
   i18n visibility
   ========================================================= */
[data-lang-show]{ display:none; }
html[lang="ja"] [data-lang-show~="ja"],
html[lang="en"] [data-lang-show~="en"],
html[lang="zh"] [data-lang-show~="zh"]{ display:revert; }

/* =========================================================
   Responsive
   ========================================================= */
@media (max-width: 1024px){
  .nav__links{ display:none; }
  .nav .lang{ display:inline-flex; }   /* language switch stays on the page, not in the menu */
  .burger{ display:block; }
  .header-reserve{ display:inline-flex; }
  .feature-grid{ grid-template-columns:1fr 1fr; }
}
@media (max-width: 760px){
  :root{ --header-h:68px; }
  .br-sp{ display:inline; }
  /* mobile header: hide the logo, spread language ↔ Menu with generous edge margins */
  .site-header .brand{ display:none; }
  .site-header .wrap{ justify-content:space-between; gap:.85rem; padding-inline:clamp(1.7rem,7vw,2.4rem); }
  .nav{ margin-left:0; gap:.85rem; }
  .nav__tools{ gap:.9rem; }
  body .header-reserve{ display:inline-flex; align-items:center; padding:0 0 .42em 0; font-size:.64rem; letter-spacing:.12em; }
  body .burger{ margin-left:.85rem; }
  body .burger::before{ display:none !important; }   /* drop the hairline; give that width back to the margins */
  body .burger::after{ letter-spacing:.2em; font-size:.62rem; }
  .lang{ font-size:.68rem; letter-spacing:.03em; }
  .lang button{ padding:.35em .36em; }
  /* mobile typography: left-align long JA text, shrink big headings to fit */
  .statement .big{ text-align:left; }
  .statement .big.intro-center{ text-align:center; }
  .lead{ text-align:left; }
  .h-lg{ font-size:1.35rem; }
  .h-xl{ font-size:1.5rem; }
  /* keep the scroll cue perfectly centered on mobile */
  .hero__scroll{ left:50%; right:auto; transform:translateX(-50%); text-align:center; }
  .split{ grid-template-columns:1fr; gap:2rem; }
  .split--rev .split__media{ order:0; }
  .split__media img, .split__media.wide img{ aspect-ratio:4/3; }
  .feature-grid{ grid-template-columns:1fr; }
  .dish-grid{ grid-template-columns:1fr 1fr; }
  .footer-grid{ grid-template-columns:1fr; gap:2.5rem; }
  .field.row2{ grid-template-columns:1fr; }
  .info-table div{ grid-template-columns:1fr; gap:.4rem; }
  .course{ grid-template-columns:auto 1fr; gap:.2rem 1.2rem; padding-block:1.3rem; }
  .course .price{ grid-column:2; margin-top:-.3rem; }
  .form-note{ text-align:left !important; }
  .hero__dots{ display:none; }
  .lang{ font-size:.8rem; }
}
@media (max-width: 420px){
  .dish-grid{ grid-template-columns:1fr; }
}

/* Signature headings: scale with column width so they stay on one line */
.h-sig{ font-size:clamp(1.3rem, 2.9vw, 2rem); }

/* =========================================================
   Image-led layout (Space page)
   ========================================================= */
.media-band{ position:relative; width:100%; height:clamp(58vh,78vh,86vh); overflow:hidden; }
.media-band img{ width:100%; height:100%; object-fit:cover; }
.media-band figcaption{ position:absolute; left:var(--gutter); bottom:clamp(2.2rem,3.2vw,3.4rem); margin:0;
  font-family:var(--sans-en); font-size:.6rem; letter-spacing:.34em; text-transform:uppercase; color:var(--text);
  text-shadow:0 1px 14px rgba(0,0,0,.6); }
.media-duo{ display:grid; grid-template-columns:1fr 1fr; gap:clamp(.5rem,1.2vw,1rem); }
.media-duo .media-band{ height:clamp(46vh,62vh,70vh); }
.media-band--slim{ height:clamp(34vh,42vh,48vh); }
@media (max-width:760px){ .media-duo{ grid-template-columns:1fr; } .media-band{ height:62vh; } }

/* =========================================================
   Chef page — smaller, simpler
   ========================================================= */
body[data-page="chef"] .lead{ font-size:.92rem; line-height:2; }
.chef-name{ font-family:var(--serif-ja); font-size:1.5rem; font-weight:400; letter-spacing:.08em; }
.chef-name small{ display:block; font-family:var(--sans-en); font-size:.6rem; letter-spacing:.28em; text-transform:uppercase; color:var(--copper-bright); margin-top:.6rem; }
/* centered portrait + name */
.chef-portrait{ margin:0 auto; max-width:460px; }
.chef-portrait img{ width:100%; display:block; }
.chef-sign--center{ display:block; margin-top:1.6rem; text-align:center; }

/* clean horizontal timeline (year | detail) */
.chef-career{ margin-top:2.6rem; border-top:1px solid var(--line-soft); text-align:left; }
.chef-career div{
  display:grid; grid-template-columns:minmax(110px,180px) 1fr; gap:clamp(1rem,3vw,2.4rem);
  align-items:baseline; padding:1.35rem 0; border-bottom:1px solid var(--line-soft);
}
.chef-career .yr{ font-family:var(--sans-en); font-size:1rem; letter-spacing:.04em; color:var(--copper-bright); font-weight:500; margin:0; white-space:nowrap; }
.chef-career .t{ font-family:var(--serif-ja); font-size:1.02rem; color:var(--text); line-height:1.75; }
@media (max-width:600px){ .chef-career div{ grid-template-columns:1fr; gap:.35rem; } }
.chef-sign{ font-family:var(--serif-ja); font-size:1.15rem; font-weight:400; letter-spacing:.1em; color:var(--text); }
.chef-sign .accent{ color:var(--copper-bright); font-size:1.35rem; margin-left:.2em; }
.chef-sign small{ display:block; font-family:var(--sans-en); font-size:.58rem; letter-spacing:.28em; text-transform:uppercase; color:var(--text-faint); margin-top:.7rem; }

/* Gallery grid (menu) */
.gallery-grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:clamp(.5rem,1.4vw,1rem); }
.gallery-grid figure{ margin:0; overflow:hidden; aspect-ratio:4/5; }
.gallery-grid img{ width:100%; height:100%; object-fit:cover; display:block; transition:transform 1.2s cubic-bezier(.2,.7,.2,1); }
.gallery-grid figure:hover img{ transform:scale(1.05); }
@media (max-width:760px){ .gallery-grid{ grid-template-columns:repeat(2,1fr); } }

/* =========================================================
   Brand logo (header / footer) — uses the real FV logo
   ========================================================= */
.brand{ gap:0; }
.brand__logo{ height:clamp(42px,4vw,52px); width:auto; display:block; }
.site-header.scrolled .brand__logo,
.site-header.solid .brand__logo{ height:44px; }
.site-footer .brand__logo{ height:58px; margin-bottom:1.2rem; }
@media (max-width:760px){
  .brand__logo{ height:42px; }
  .site-header.scrolled .brand__logo,
  .site-header.solid .brand__logo{ height:40px; }
}

/* =========================================================
   Site-wide — 茶禅華-style minimal header + overlay menu
   Logo / language / refined reserve / "Menu" trigger only.
   Full navigation lives in an elegant full-screen overlay.
   ========================================================= */
@media (min-width:761px){
  /* cluster tools + Menu on the right, hide the inline nav links */
  body .site-header .wrap{ justify-content:flex-start; }
  body .nav{ margin-left:auto; gap:1.9rem; }
  body .nav__links{ display:none; }
  body .header-reserve{ display:inline-flex; align-items:center; padding:0 0 .5em 0; font-size:.72rem; letter-spacing:.24em; }
  body .nav__tools{ gap:2.6rem; }               /* set language apart from the reserve+Menu group */
  body .burger{ display:inline-flex; align-items:center; margin-left:1.1rem; }  /* reserve sits close to Menu */

  /* hide the TOP header logo — only language + Menu remain on the hero */
  body.is-home .site-header .brand{ display:none; }

  /* overlay menu on desktop: single elegant column, reserve at the top */
  body .drawer{ backdrop-filter:blur(6px); padding-top:calc(var(--header-h) + clamp(2.5rem,9vh,6rem)); }
  body .drawer__reserve,
  body .drawer__links{ width:min(560px,84vw); margin-inline:auto; }
  body .drawer__links a{ font-size:clamp(1.6rem,2.6vw,2.15rem); padding:.62em 0; }
  body .drawer__reserve{ font-size:clamp(1.55rem,2.5vw,2rem); padding:.62em 0; }
}

/* understated reserve link — no box, hairline + arrow.
   Shared by the overlay-menu reserve and inline .btn--quiet links (e.g. Access). */
.drawer__foot .btn,
.btn--quiet{
  align-self:flex-start; width:auto;
  background:none !important; border:0; border-radius:0;
  padding:0 0 .6em 0; min-height:0;
  font-family:var(--serif-ja); text-transform:none; font-weight:400;
  font-size:1.05rem; letter-spacing:.3em;
  color:var(--copper-bright); position:relative; gap:0;
  transition:color .45s var(--ease), letter-spacing .55s var(--ease);
}
.drawer__foot .btn::after,
.btn--quiet::after{
  content:"\2192"; margin-left:1em; font-family:var(--sans-en);
  display:inline-block; transition:transform .45s var(--ease);
}
.drawer__foot .btn::before,
.btn--quiet::before{
  content:""; position:absolute; left:0; bottom:0; height:1px; width:100%;
  background:linear-gradient(90deg,var(--copper) 0%,var(--copper) 55%,rgba(158,100,70,0) 100%);
  transform-origin:left; transition:opacity .45s var(--ease);
}
.drawer__foot .btn:hover,
.btn--quiet:hover{ color:#fff; letter-spacing:.36em; background:none; }
.drawer__foot .btn:hover::after,
.btn--quiet:hover::after{ transform:translateX(8px); }

/* reserve link at the very top of the overlay menu */
.drawer__reserve{
  display:flex; align-items:center;
  font-family:var(--serif-ja); font-weight:300; letter-spacing:.1em;
  color:var(--copper-bright); padding:.78em 0;
  font-size:clamp(1.45rem,6vw,1.95rem);
  border-bottom:1px solid rgba(158,100,70,.22);
  opacity:0; transform:translateY(14px);
  transition:color .45s var(--ease), letter-spacing .55s var(--ease);
}
body.menu-open .drawer__reserve{ animation:drawerIn .6s var(--ease) .06s forwards; }
.drawer__reserve::after{
  content:"\2192"; margin-left:.9em; font-family:var(--sans-en); font-size:.62em;
  color:var(--copper); transition:transform .45s var(--ease);
}
.drawer__reserve:hover{ color:#fff; letter-spacing:.18em; }
.drawer__reserve:hover::after{ transform:translateX(8px); }

/* hide TOP header logo at all widths — hero shows the logo, language + Menu stay */
body.is-home .site-header .brand{ display:none; }

/* elegant "Menu" trigger — hairline that extends on hover */
body .burger{ padding:.5em 0; }
body .burger::before{
  content:""; width:26px; height:1px; background:var(--copper);
  display:inline-block; vertical-align:middle; margin-right:.9em;
  transition:width .5s var(--ease), background .4s var(--ease);
}
body .burger:hover::before{ width:44px; background:var(--copper-bright); }
body .burger::after{ font-size:.66rem; letter-spacing:.4em; color:var(--text); }
body.menu-open .burger::before{ width:44px; }

/* refined focus: no blunt box on click, subtle copper ring for keyboard */
.burger:focus,
.lang button:focus,
.header-reserve:focus{ outline:none; }
.burger:focus-visible{ outline:1px solid var(--copper); outline-offset:6px; }
.lang button:focus-visible{ outline:1px solid var(--copper); outline-offset:3px; }

/* header reserve — understated text link: label + arrow + hairline underline (matches Access .btn--quiet) */
body .header-reserve{
  align-self:center; width:auto; min-height:0;
  border:0 !important; border-radius:0;
  background:none !important;
  padding:0 0 .5em 0 !important;
  font-family:var(--serif-ja); text-transform:none; font-weight:400;
  color:var(--copper-bright) !important;
  position:relative; gap:0;
  transition:color .45s var(--ease), letter-spacing .55s var(--ease);
}
body .header-reserve::after{
  content:"\2192" !important; margin-left:.85em; font-family:var(--sans-en);
  display:inline-block !important; transition:transform .45s var(--ease);
}
body .header-reserve::before{
  content:"" !important; display:block !important;
  position:absolute; left:0; bottom:0; height:1px; width:100%;
  background:linear-gradient(90deg,var(--copper) 0%,var(--copper) 55%,rgba(158,100,70,0) 100%);
}
body .header-reserve:hover{
  color:#fff !important; letter-spacing:.34em; background:none !important; border-color:transparent !important;
}
body .header-reserve:hover::after{ transform:translateX(8px); }

/* opening date under the TOP logo */
.hero__open{
  margin:clamp(1.8rem,3.4vw,2.6rem) 0 0; padding-left:.34em;
  font-family:var(--serif-en); font-weight:400;
  font-size:clamp(.92rem,1.5vw,1.2rem); letter-spacing:.34em;
  color:var(--copper-bright); text-shadow:0 1px 14px rgba(0,0,0,.9);
  font-variant-numeric:lining-nums; font-feature-settings:"lnum" 1;
  opacity:0; animation:fadeUp 1.4s var(--ease) 2.8s forwards;
}

/* =========================================================
   SPACE — 入店動画（1回だけ再生し、終わると写真へ切り替わる）
   ========================================================= */
.space-intro{ position:relative; height:100svh; min-height:560px; overflow:hidden; background:var(--ink); display:flex; align-items:flex-end; }
.space-intro__video,
.space-intro__still{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; z-index:0; }
.space-intro__still{ opacity:0; transition:opacity 1.6s var(--ease); }
.space-intro__video{ opacity:1; transition:opacity 1.6s var(--ease); }
.space-intro.is-ended .space-intro__video{ opacity:0; }
.space-intro.is-ended .space-intro__still{ opacity:1; }
.space-intro::after{ content:""; position:absolute; inset:0; z-index:1;
  background:linear-gradient(180deg,rgba(8,8,9,.55),rgba(8,8,9,.25) 45%,rgba(11,11,12,.92)); }
.space-intro__inner{ position:relative; z-index:2; width:100%; padding-bottom:clamp(2.5rem,6vw,5rem); padding-top:calc(var(--header-h) + 2rem); }

/* =========================================================
   CHEF — 経歴（年号なし。番号と縦線で上から下への流れを示す）
   ========================================================= */
.chef-path{ position:relative; max-width:640px; margin:2.4rem auto 0; padding-left:3rem; list-style:none; text-align:left; }
.chef-path::before{
  content:""; position:absolute; left:.9rem; top:.7em; bottom:.7em; width:1px;
  background:linear-gradient(180deg,rgba(158,100,70,0),var(--copper) 9%,var(--copper) 91%,rgba(158,100,70,0));
}
.chef-path li{
  position:relative; display:grid; grid-template-columns:auto 1fr; column-gap:1.2rem;
  align-items:baseline; padding-bottom:clamp(1.5rem,3.2vw,2.1rem);
}
.chef-path li:last-child{ padding-bottom:0; }
.chef-path li::before{                       /* 縦線の上に置く点 */
  content:""; position:absolute; left:-2.15rem; top:.72em;
  width:6px; height:6px; margin-left:-3px; border-radius:50%; background:var(--copper-bright);
}
.chef-path li:last-child::before{ background:#fff; box-shadow:0 0 0 3px rgba(158,100,70,.25); }
.chef-path .n{ font-family:var(--sans-en); font-size:.72rem; letter-spacing:.2em; color:var(--copper-bright); opacity:.85; }
.chef-path .t{ font-family:var(--serif-ja); font-size:clamp(1rem,1.5vw,1.1rem); line-height:1.95; color:var(--text); }
@media (max-width:600px){
  .chef-path{ padding-left:2.3rem; }
  .chef-path::before{ left:.7rem; }
  .chef-path li{ column-gap:.9rem; }
  .chef-path li::before{ left:-1.6rem; }
}

/* =========================================================
   CUISINE — コース（写真の上に名前・品数・料金・一言）
   ========================================================= */
.course-list{ border-top:1px solid var(--line-soft); }
.course{ padding:clamp(1.6rem,3.2vw,2.2rem) 0; border-bottom:1px solid var(--line-soft);
  display:grid; grid-template-columns:1fr auto; gap:.4rem clamp(1.5rem,4vw,3rem); align-items:baseline; }
.course__name{ font-family:var(--serif-en); font-weight:300; letter-spacing:.06em;
  font-size:clamp(1.3rem,2.4vw,1.75rem); color:var(--text); grid-column:1; }
.course__meta{ grid-column:2; grid-row:1; justify-self:end; white-space:nowrap;
  font-family:var(--sans-en); font-size:clamp(.74rem,1.1vw,.82rem); letter-spacing:.14em; color:var(--copper-bright); }
.course__desc{ grid-column:1 / -1; margin-top:.5rem;
  font-family:var(--serif-ja); font-size:clamp(.95rem,1.4vw,1.04rem); line-height:1.95; color:var(--text-dim); }
.course-note{ margin-top:clamp(1.2rem,2.6vw,1.8rem); font-size:.84rem; line-height:1.9; color:var(--text-dim); }
@media (max-width:600px){
  .course{ grid-template-columns:1fr; }
  .course__meta{ grid-column:1; grid-row:2; justify-self:start; }
  .course__desc{ margin-top:.7rem; }
}

/* =========================================================
   TEASER — images not yet cleared for use shown as "Coming Soon"
   ========================================================= */
.page-hero{ background:var(--noir); }
.soon{ display:flex; align-items:center; justify-content:center; background:var(--noir); margin:0; }
.soon__label{
  font-family:var(--serif-en); font-weight:400;
  font-size:clamp(1.15rem,1.9vw,1.55rem); letter-spacing:.24em;
  color:var(--copper-bright); opacity:.92; white-space:nowrap;
}
.soon--portrait{ width:100%; aspect-ratio:4/5; }
.gallery-grid .soon .soon__label, .news-row .thumb.soon .soon__label{ font-size:clamp(.9rem,1.3vw,1.1rem); letter-spacing:.18em; }


/* =========================================================
   追加 2026-10-23 — コース本文 / 電話リンク / フッターSNS
   ========================================================= */
.course__body{
  grid-column:1 / -1; margin-top:.85rem;
  font-family:var(--sans-ja);
  font-size:clamp(.82rem,1.15vw,.88rem); line-height:2.05; letter-spacing:.02em;
  color:#9a948a; max-width:72ch;
}
@media (max-width:600px){
  .course__body{ margin-top:.65rem; line-height:1.95; }
}

.tel-link{
  display:inline;
  color:inherit; border-bottom:1px solid var(--line); padding-bottom:.08em;
  transition:color .3s var(--ease), border-color .3s var(--ease);
}
.tel-link:hover{ color:var(--copper-bright); border-color:var(--copper); }
/* .footer-col a が display:block のため、フッターの電話だけ上書き */
.site-footer .tel-link{ display:inline; }

.footer-sns{ margin-top:1.5rem; }
.footer-sns .sns-link{
  display:inline-flex; align-items:center; gap:.7em;
  color:var(--text-faint); font-size:.82rem; letter-spacing:.08em;
  transition:color .3s var(--ease);
}
.footer-sns .sns-link:hover{ color:var(--copper-bright); }
.footer-sns .sns-ico{ width:18px; height:18px; flex:none; }