/* ============================================================
   HISASHII RAMEN — « Le Voyage dans le Bol »
   Expérience immersive haut de gamme
   ============================================================ */

:root{
  --ink:        #0e0c0b;   /* noir d'encre, chaud */
  --ink-2:      #141110;
  --ink-3:      #1b1715;
  --sumi:       #080706;   /* le plus sombre */
  --broth:      #d99a5b;   /* ambre tonkotsu */
  --broth-deep: #8a4a22;
  --broth-glow: #e9b06a;
  --vermillon:  #c8392f;   /* 朱 — accents/sceau */
  --vermillon-2:#a82b24;
  --indigo:     #1d2b3a;   /* 藍 — noren */
  --indigo-2:   #24384c;
  --gold:       #c9a24b;   /* or muté, filets fins */
  --gold-soft:  #e0c98a;
  --cream:      #f2ece0;
  --paper:      #efe6d6;
  --text:       #ece4d6;
  --text-dim:   #b3a896;
  --text-faint: #6f655a;
  --line:       rgba(236,228,214,.14);

  --serif: "Cormorant Garamond", "Shippori Mincho B1", serif;
  --mincho:"Shippori Mincho B1", "Hiragino Mincho ProN", serif;
  --brush: "Yuji Syuku", "Shippori Mincho B1", serif;
  --sans:  "Zen Kaku Gothic New", ui-sans-serif, system-ui, sans-serif;

  --maxw: 1280px;
  --pad: clamp(22px, 5.5vw, 80px);
  --ease: cubic-bezier(.19,1,.22,1);
  --ease-soft: cubic-bezier(.4,0,.2,1);
}

*{margin:0;padding:0;box-sizing:border-box}
html{-webkit-text-size-adjust:100%;background:var(--ink)}
body{
  background:var(--ink);
  color:var(--text);
  font-family:var(--sans);
  font-weight:400;
  line-height:1.6;
  overflow-x:hidden;
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
}
body.lock{overflow:hidden;height:100vh}
img{display:block;max-width:100%}
a{color:inherit;text-decoration:none}

.jp{font-family:var(--mincho)}
.vert{writing-mode:vertical-rl;text-orientation:upright;font-family:var(--mincho)}

/* sceau hanko */
.hanko{
  display:inline-grid;place-content:center;
  width:2.4em;height:2.4em;border-radius:7px;
  background:var(--vermillon);color:var(--cream);
  font-family:var(--brush);font-size:.5em;line-height:1;
  box-shadow:0 0 0 1px rgba(0,0,0,.2) inset;
  transform:rotate(-3deg);
}

/* filets fins dorés */
.rule{width:1px;background:linear-gradient(var(--gold),transparent);}
.rule-h{height:1px;background:linear-gradient(90deg,transparent,var(--gold),transparent);opacity:.5}

/* ============================================================
   COUCHES ANIMÉES (fixes, plein écran)
   ============================================================ */
#sky{position:fixed;inset:0;z-index:0;pointer-events:none}
#petals{position:fixed;inset:0;z-index:3;pointer-events:none}
/* lueur ambrée du bol, en bas */
.amber-glow{
  position:fixed;left:50%;bottom:-30vh;z-index:1;
  width:140vw;height:80vh;transform:translateX(-50%);
  background:radial-gradient(50% 60% at 50% 100%,
     rgba(233,176,106,.34) 0%, rgba(217,154,91,.16) 32%,
     rgba(138,74,34,.08) 55%, transparent 75%);
  pointer-events:none;filter:blur(6px);
  transition:opacity .6s var(--ease);
}
/* vignette globale */
.vignette{position:fixed;inset:0;z-index:2;pointer-events:none;
  background:radial-gradient(120% 90% at 50% 35%, transparent 50%, rgba(0,0,0,.5) 100%);}

/* vapeur (wisps) */
.steam-field{position:fixed;left:0;right:0;bottom:0;height:70vh;z-index:2;pointer-events:none;overflow:hidden}
.wisp{position:absolute;bottom:-12%;width:min(34vw,360px);height:120%;
  background:radial-gradient(50% 40% at 50% 80%, rgba(242,236,224,.10), transparent 70%);
  filter:blur(26px);opacity:0;border-radius:50%;
  animation:steamRise var(--dur,13s) ease-in infinite;animation-delay:var(--d,0s)}
@keyframes steamRise{
  0%{opacity:0;transform:translateY(10%) scale(.7) }
  18%{opacity:.7}
  70%{opacity:.5}
  100%{opacity:0;transform:translateY(-70%) scale(1.25)}
}

/* ============================================================
   LAMPIONS — chōchin 提灯
   ============================================================ */
#lanterns{position:fixed;inset:0;z-index:1;pointer-events:none;overflow:hidden}
body.no-lanterns #lanterns{display:none}
.lantern-amb{position:absolute;will-change:transform}

.chochin{position:relative;width:var(--lw,90px)}
.chochin .cord{position:absolute;left:50%;top:calc(-1*var(--cord,24px));width:1px;height:var(--cord,24px);
  background:linear-gradient(var(--gold),#5a4327);transform:translateX(-50%)}
.chochin .cap{position:absolute;left:50%;transform:translateX(-50%);width:34%;height:6px;
  background:#140f0d;border-radius:2px;z-index:3}
.chochin .cap.t{top:-3px}.chochin .cap.b{bottom:-3px}
.chochin .body{width:100%;aspect-ratio:.82;border-radius:48%/30%;position:relative;
  background:
   repeating-linear-gradient(180deg,rgba(0,0,0,.17) 0 1px,transparent 1px 9px),
   radial-gradient(58% 48% at 45% 42%, #ff8052, var(--lc,#df4029) 56%, #a8231a 100%);
  box-shadow:inset -12px 0 26px rgba(80,8,0,.55),inset 9px 2px 18px rgba(255,170,100,.22),
    0 0 var(--glow,46px) rgba(226,67,43,.42)}
.chochin .body::after{content:var(--mk,"\200B");position:absolute;inset:0;display:grid;place-items:center;
  font-family:var(--brush);font-size:calc(var(--lw,90px)*.42);line-height:1;color:rgba(58,10,0,.5)}
.chochin .tassel{position:absolute;left:50%;bottom:calc(-1*var(--cord,24px)*.55);transform:translateX(-50%);
  width:2px;height:calc(var(--cord,24px)*.55);background:var(--gold);opacity:.8}
.chochin.cream .body{background:
   repeating-linear-gradient(180deg,rgba(0,0,0,.07) 0 1px,transparent 1px 9px),
   radial-gradient(58% 48% at 45% 42%,#fff7ea,#f1e7d3 60%,#dccdb2 100%);
  box-shadow:inset -10px 0 22px rgba(120,90,50,.22),0 0 var(--glow,38px) rgba(240,225,200,.28)}
.chochin.cream .body::after{color:rgba(150,40,60,.55)}
.chochin.sway{transform-origin:top center;animation:lsway var(--sw,6s) ease-in-out infinite var(--sd,0s)}
@keyframes lsway{0%{transform:rotate(-4.5deg)}50%{transform:rotate(4.5deg) translateY(-4px)}100%{transform:rotate(-4.5deg)}}
.chochin .body{animation:lanternFlicker var(--fl,5s) ease-in-out infinite var(--sd,0s)}
@keyframes lanternFlicker{0%,100%{filter:brightness(1)}40%{filter:brightness(1.12)}55%{filter:brightness(.96)}72%{filter:brightness(1.06)}}

/* guirlande */
.garland{position:relative;display:flex;justify-content:center;align-items:flex-start;
  gap:clamp(16px,4.5vw,46px);padding-top:34px;margin-bottom:clamp(40px,7vw,70px)}
.garland::before{content:"";position:absolute;left:4%;right:4%;top:30px;height:34px;
  border-top:1.5px solid #5a4327;border-radius:50% 50% 0 0/100% 100% 0 0}
.garland .lantern-g{position:relative;z-index:1;margin-top:var(--mt,0)}

/* ============================================================
   INTRO — rideau noren + trait de pinceau
   ============================================================ */
#intro{position:fixed;inset:0;z-index:200;background:var(--sumi);
  display:grid;place-items:center;overflow:hidden;
  transition:opacity .8s var(--ease)}
#intro.done{opacity:0;pointer-events:none}
.noren{position:absolute;top:0;height:100%;width:52%;background:
   linear-gradient(180deg,var(--indigo-2),var(--indigo) 22%,var(--indigo) 100%);
  box-shadow:0 0 60px rgba(0,0,0,.6);
  transition:transform 1.15s var(--ease) .15s}
.noren::before{content:"";position:absolute;inset:0;opacity:.5;
  background:repeating-linear-gradient(90deg,transparent 0 calc(50% - .5px),rgba(0,0,0,.25) calc(50% - .5px) calc(50% + .5px),transparent calc(50% + .5px))}
.noren.l{left:0;border-right:1px solid rgba(0,0,0,.4)}
.noren.r{right:0}
.noren-mark{position:absolute;top:14%;left:50%;transform:translateX(-50%);
  font-family:var(--brush);color:var(--cream);font-size:clamp(40px,9vw,90px);opacity:.92;white-space:nowrap}
.noren.r .noren-mark{color:var(--gold-soft)}
#intro.open .noren.l{transform:translateX(-102%)}
#intro.open .noren.r{transform:translateX(102%)}
/* trait de pinceau central qui dessine 久 puis disparaît */
.intro-brush{position:relative;z-index:2;font-family:var(--brush);
  color:var(--cream);font-size:clamp(80px,22vw,220px);line-height:1;
  -webkit-text-stroke:0;opacity:0;
  clip-path:inset(0 100% 0 0);
  animation:brushDraw 1.1s var(--ease) .25s forwards, brushFade .5s ease 1.7s forwards}
@keyframes brushDraw{from{opacity:0;clip-path:inset(0 100% 0 0)}10%{opacity:1}to{opacity:1;clip-path:inset(0 0 0 0)}}
@keyframes brushFade{to{opacity:0;transform:scale(1.08)}}
.intro-skip{position:absolute;bottom:26px;right:28px;z-index:3;
  font-family:var(--sans);font-size:12px;letter-spacing:.18em;text-transform:uppercase;
  color:var(--text-faint);background:none;border:0;cursor:pointer;transition:color .25s}
.intro-skip:hover{color:var(--cream)}

/* ============================================================
   NAV
   ============================================================ */
.nav{position:fixed;top:0;left:0;right:0;z-index:80;
  display:flex;align-items:center;justify-content:space-between;
  padding:18px var(--pad);
  transition:background .5s var(--ease),padding .5s var(--ease),backdrop-filter .5s;
  mix-blend-mode:normal}
.nav.scrolled{background:linear-gradient(180deg,rgba(14,12,11,.82),rgba(14,12,11,0));
  -webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);padding-top:12px;padding-bottom:12px}
.nav-logo{display:flex;align-items:center;gap:.5em}
.nav-logo .mk{font-family:var(--brush);font-size:30px;color:var(--gold-soft);line-height:1}
.nav-logo .wd{font-family:var(--serif);font-size:20px;letter-spacing:.32em;color:var(--cream);
  text-transform:uppercase;font-weight:500;padding-left:.1em}
.nav-right{display:flex;align-items:center;gap:26px}
.nav-links{display:none;gap:30px}
.nav-links a{font-family:var(--sans);font-size:12.5px;letter-spacing:.16em;text-transform:uppercase;
  color:var(--text-dim);position:relative;padding:4px 0;transition:color .3s}
.nav-links a span.jp{display:block;font-family:var(--mincho);font-size:9px;letter-spacing:.2em;color:var(--gold);opacity:.7;margin-top:2px}
.nav-links a:hover{color:var(--cream)}
.nav-links a::after{content:"";position:absolute;left:0;bottom:-2px;height:1px;width:0;background:var(--gold);transition:width .35s var(--ease)}
.nav-links a:hover::after{width:100%}
.nav-cta{font-family:var(--sans);font-size:12px;letter-spacing:.14em;text-transform:uppercase;
  color:var(--cream);border:1px solid var(--line);padding:11px 22px;border-radius:2px;
  transition:border-color .3s,background .3s,color .3s}
.nav-cta:hover{border-color:var(--gold);background:var(--gold);color:var(--ink)}
/* bascule de langue FR/EN */
.lang-toggle{font-family:var(--sans);font-size:12px;letter-spacing:.14em;text-transform:uppercase;
  color:var(--cream);background:none;border:1px solid var(--line);padding:10px 14px;border-radius:2px;
  cursor:pointer;transition:border-color .3s,color .3s;min-width:48px;text-align:center}
.lang-toggle:hover{border-color:var(--gold);color:var(--gold-soft)}
.drawer .lang-toggle{margin-top:20px;font-size:15px;padding:12px 26px;align-self:center}
.i18n-en{display:none}
html[data-lang="en"] .i18n-fr{display:none}
html[data-lang="en"] .i18n-en{display:inline}
.nav-burger{display:grid;gap:5px;background:none;border:0;cursor:pointer;padding:8px}
.nav-burger span{display:block;width:26px;height:1.5px;background:var(--cream);transition:.3s var(--ease)}
.nav-burger[aria-expanded="true"] span:nth-child(1){transform:translateY(6.5px) rotate(45deg)}
.nav-burger[aria-expanded="true"] span:nth-child(2){opacity:0}
.nav-burger[aria-expanded="true"] span:nth-child(3){transform:translateY(-6.5px) rotate(-45deg)}

.drawer{position:fixed;inset:0;z-index:79;background:rgba(8,7,6,.94);
  -webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);
  display:grid;place-content:center;gap:6px;opacity:0;pointer-events:none;transition:opacity .4s var(--ease)}
.drawer.open{opacity:1;pointer-events:auto}
.drawer nav{display:flex;flex-direction:column;gap:22px;text-align:center}
.drawer a{font-family:var(--serif);font-size:clamp(32px,8vw,52px);color:var(--cream);font-weight:400;
  transform:translateY(20px);opacity:0;transition:transform .6s var(--ease),opacity .6s var(--ease),color .25s}
.drawer a span.jp{font-family:var(--mincho);font-size:.3em;color:var(--gold);letter-spacing:.3em;display:block}
.drawer.open a{transform:none;opacity:1}
.drawer.open a:nth-child(2){transition-delay:.05s}.drawer.open a:nth-child(3){transition-delay:.1s}
.drawer.open a:nth-child(4){transition-delay:.15s}.drawer.open a:nth-child(5){transition-delay:.2s}
.drawer a:hover{color:var(--gold-soft)}

/* ============================================================
   STRUCTURE
   ============================================================ */
main{position:relative;z-index:5}
.act{position:relative;padding:clamp(90px,16vh,170px) var(--pad)}
.wrap{max-width:var(--maxw);margin-inline:auto}
.center{text-align:center}

/* libellés de section (kicker) */
.kicker{display:inline-flex;align-items:center;gap:14px;
  font-family:var(--sans);font-size:11px;letter-spacing:.34em;text-transform:uppercase;color:var(--gold)}
.kicker::before,.kicker.both::after{content:"";width:34px;height:1px;background:var(--gold);opacity:.6}
.kicker .j{font-family:var(--mincho);letter-spacing:.1em;color:var(--gold-soft);font-size:13px}

.h-display{font-family:var(--serif);font-weight:400;line-height:1.04;letter-spacing:.005em;
  font-size:clamp(38px,7vw,86px)}
.h-2{font-family:var(--serif);font-weight:400;font-size:clamp(30px,5vw,58px);line-height:1.1}
.body-lg{font-size:clamp(16px,2vw,19px);line-height:1.85;color:var(--text-dim);max-width:54ch;font-weight:400}
.body-lg.tight{max-width:42ch}

/* bouton */
.btn{display:inline-flex;align-items:center;gap:12px;font-family:var(--sans);
  font-size:12.5px;letter-spacing:.16em;text-transform:uppercase;color:var(--cream);
  padding:15px 32px;border:1px solid var(--gold);border-radius:2px;background:transparent;cursor:pointer;
  transition:background .35s var(--ease),color .35s var(--ease),letter-spacing .35s}
.btn:hover{background:var(--gold);color:var(--ink);letter-spacing:.2em}
.btn--solid{background:var(--vermillon);border-color:var(--vermillon);color:var(--cream)}
.btn--solid:hover{background:var(--vermillon-2);border-color:var(--vermillon-2);color:#fff}
.btn .arr{width:18px;height:1px;background:currentColor;position:relative}
.btn .arr::after{content:"";position:absolute;right:0;top:-3px;width:7px;height:7px;border-top:1px solid currentColor;border-right:1px solid currentColor;transform:rotate(45deg)}

/* ============================================================
   ACTE 0 — HÉRO
   ============================================================ */
.hero{position:relative;height:100svh;min-height:640px;display:grid;place-items:center;overflow:hidden}
.hero-inner{position:relative;z-index:6;text-align:center;display:grid;justify-items:center;gap:30px;
  padding:0 var(--pad);transform:translateY(var(--heroShift,0))}
.hero-mk{font-family:var(--brush);font-size:clamp(54px,11vw,120px);line-height:1;color:var(--gold-soft);
  text-shadow:0 0 40px rgba(217,154,91,.35)}
.hero-title{font-family:var(--serif);font-weight:300;letter-spacing:.42em;text-transform:uppercase;
  font-size:clamp(30px,6.5vw,72px);color:var(--cream);padding-left:.42em}
.hero-sub{font-family:var(--mincho);font-size:clamp(13px,1.7vw,16px);letter-spacing:.5em;color:var(--gold);text-transform:none}
.hero-line{font-family:var(--serif);font-style:italic;font-size:clamp(17px,2.2vw,23px);color:var(--text-dim);max-width:30ch;line-height:1.6}
/* tategaki latéral */
.hero-vert{position:absolute;right:clamp(16px,4vw,54px);top:50%;transform:translateY(-50%);z-index:6;
  font-family:var(--mincho);font-size:clamp(15px,2vw,20px);letter-spacing:.28em;color:var(--text-dim);
  height:auto}
.hero-vert .em{color:var(--gold-soft)}

/* indice scroll */
.cue{position:absolute;left:50%;bottom:30px;transform:translateX(-50%);z-index:6;
  display:grid;justify-items:center;gap:10px}
.cue span{font-family:var(--sans);font-size:10px;letter-spacing:.3em;text-transform:uppercase;color:var(--text-faint)}
.cue i{display:block;width:1px;height:46px;background:linear-gradient(var(--gold),transparent);position:relative;overflow:hidden}
.cue i::after{content:"";position:absolute;top:-46px;left:0;width:1px;height:46px;background:var(--cream);animation:cueRun 2.4s var(--ease) infinite}
@keyframes cueRun{0%{transform:translateY(0)}60%,100%{transform:translateY(92px)}}

/* ============================================================
   ANIMATIONS DE RÉVÉLATION
   ============================================================ */
[data-rise]{opacity:0;transform:translateY(38px);transition:opacity 1.1s var(--ease),transform 1.1s var(--ease)}
[data-rise].in{opacity:1;transform:none}
[data-fade]{opacity:0;transition:opacity 1.4s var(--ease)}
[data-fade].in{opacity:1}
[data-ink]{opacity:0;clip-path:inset(0 100% 0 0);transition:clip-path 1.2s var(--ease),opacity .6s ease}
[data-ink].in{opacity:1;clip-path:inset(0 0 0 0)}
[data-scale]{opacity:0;transform:scale(.92);transition:opacity 1.3s var(--ease),transform 1.3s var(--ease)}
[data-scale].in{opacity:1;transform:none}
.stagger>*{opacity:0;transform:translateY(30px);transition:opacity 1s var(--ease),transform 1s var(--ease)}
.stagger.in>*{opacity:1;transform:none}
/* verrou d'état final (anti-gel des transitions en onglet inactif) */
.settled{transition:none!important}
.stagger.settled>*{transition:none!important}
.stagger.in>*:nth-child(2){transition-delay:.08s}
.stagger.in>*:nth-child(3){transition-delay:.16s}
.stagger.in>*:nth-child(4){transition-delay:.24s}
.stagger.in>*:nth-child(5){transition-delay:.32s}
.stagger.in>*:nth-child(6){transition-delay:.4s}
[data-delay="1"]{transition-delay:.15s}[data-delay="2"]{transition-delay:.3s}[data-delay="3"]{transition-delay:.45s}

/* ============================================================
   ACTE — DESCENTE (sticky, le bol monte)
   ============================================================ */
.descent{height:200vh;position:relative}
.descent-sticky{position:sticky;top:0;height:100svh;display:grid;place-items:center;overflow:hidden}
.descent-vert{position:relative;z-index:6;font-family:var(--mincho);
  font-size:clamp(26px,5vw,54px);letter-spacing:.34em;color:var(--cream);text-align:center;
  text-shadow:0 2px 30px rgba(0,0,0,.6)}
.descent-vert small{display:block;font-family:var(--serif);font-style:italic;font-size:.34em;
  letter-spacing:.04em;color:var(--text-dim);margin-top:18px}
.descent-bowl{position:absolute;left:50%;bottom:-46vh;z-index:4;width:min(150vw,1100px);aspect-ratio:1/1;
  transform:translateX(-50%) translateY(var(--bowlY,0)) scale(var(--bowlS,1));
  border-radius:50%;
  background:
    radial-gradient(circle at 50% 42%, rgba(233,176,106,.42), rgba(217,154,91,.22) 38%, transparent 62%);
  filter:blur(2px)}
.ripple{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);border-radius:50%;
  border:1px solid rgba(217,154,91,.25)}

/* ============================================================
   ACTE — HISTOIRE (éditorial)
   ============================================================ */
.story-grid{display:grid;gap:clamp(34px,6vw,70px);align-items:center;grid-template-columns:1fr}
.story-figs{position:relative}
.story-figs image-slot{display:block;height:auto;width:100%}
.story-figs .f1{aspect-ratio:4/5}
.story-figs .f2{position:absolute;right:-6%;bottom:-12%;width:50%;aspect-ratio:1/1;
  border:6px solid var(--ink);box-shadow:0 30px 60px rgba(0,0,0,.5)}
.story-figs .seal{position:absolute;left:-12px;top:-12px;z-index:3;font-size:34px}
.story-copy{display:grid;gap:26px}
.story-quote{font-family:var(--serif);font-style:italic;font-size:clamp(22px,3.4vw,38px);line-height:1.35;color:var(--cream)}
.story-quote .q{color:var(--gold)}
.story-by{font-family:var(--sans);font-size:12px;letter-spacing:.2em;text-transform:uppercase;color:var(--text-faint)}

/* ============================================================
   ACTE — INGRÉDIENTS (planche anatomique)
   ============================================================ */
.ingredients{position:relative;overflow:hidden}
.anatomy{display:grid;grid-template-columns:1fr;gap:clamp(36px,5vw,64px);
  margin-top:clamp(46px,8vw,86px);align-items:center;text-align:left}

/* --- vitrine (gauche) --- */
.spec{position:relative}
.spec-kanji{position:absolute;left:50%;top:42%;transform:translate(-50%,-50%);z-index:0;
  font-family:var(--brush);font-size:clamp(150px,30vw,320px);line-height:.8;white-space:nowrap;
  color:rgba(217,154,91,.10);pointer-events:none;transition:opacity .6s var(--ease)}
.spec-frame{position:relative;z-index:1;width:100%;aspect-ratio:4/5;
  border:1px solid var(--line);background:rgba(0,0,0,.25)}
.spec-layer{position:absolute;inset:10px;opacity:0;
  transition:opacity .7s var(--ease)}
.spec-layer.on{opacity:1}
.spec-layer image-slot{width:100%;height:100%;pointer-events:none}
.spec-tick{position:absolute;width:13px;height:13px;border:1px solid var(--gold);z-index:3;opacity:.55}
.spec-tick.tl{top:-1px;left:-1px;border-right:0;border-bottom:0}
.spec-tick.tr{top:-1px;right:-1px;border-left:0;border-bottom:0}
.spec-tick.bl{bottom:-1px;left:-1px;border-right:0;border-top:0}
.spec-tick.br{bottom:-1px;right:-1px;border-left:0;border-top:0}
.spec-meta{display:flex;align-items:baseline;gap:18px;margin-top:22px}
.spec-no{font-family:var(--mincho);font-size:clamp(26px,4vw,40px);color:var(--gold);
  line-height:1;letter-spacing:.04em;min-width:1.6em}
.spec-name{font-family:var(--serif);font-size:clamp(24px,3.4vw,34px);color:var(--cream);line-height:1.05}
.spec-rom{font-family:var(--mincho);font-size:13px;letter-spacing:.16em;color:var(--gold);margin-top:4px}
.spec-desc{font-family:var(--sans);font-size:14px;color:var(--text-dim);line-height:1.6;
  margin:10px 0 0;max-width:42ch}

/* --- index (droite) --- */
.idx{list-style:none;margin:0;padding:0;border-top:1px solid var(--line)}
.idx-row{display:grid;grid-template-columns:auto 1fr auto;align-items:center;gap:clamp(16px,3vw,30px);
  padding:clamp(15px,2.4vw,22px) 6px;border-bottom:1px solid var(--line);cursor:pointer;
  position:relative;transition:padding-left .45s var(--ease),background .45s var(--ease)}
.idx-row::before{content:"";position:absolute;left:0;top:0;bottom:0;width:2px;
  background:var(--gold);transform:scaleY(0);transform-origin:top;transition:transform .45s var(--ease)}
.idx-no{font-family:var(--mincho);font-size:14px;letter-spacing:.1em;color:var(--text-faint);
  transition:color .4s;font-variant-numeric:tabular-nums}
.idx-name{font-family:var(--serif);font-size:clamp(22px,2.9vw,32px);color:var(--text-dim);
  line-height:1;transition:color .4s,letter-spacing .45s var(--ease)}
.idx-rom{font-family:var(--brush);font-size:clamp(24px,3.4vw,40px);color:rgba(236,228,214,.18);
  line-height:1;transition:color .4s}
.idx-row:hover,.idx-row.on{padding-left:22px}
.idx-row:hover::before,.idx-row.on::before{transform:scaleY(1)}
.idx-row:hover .idx-no,.idx-row.on .idx-no{color:var(--gold)}
.idx-row:hover .idx-name,.idx-row.on .idx-name{color:var(--cream);letter-spacing:.01em}
.idx-row:hover .idx-rom,.idx-row.on .idx-rom{color:var(--gold-soft)}

@media (min-width:860px){
  .anatomy{grid-template-columns:0.92fr 1.08fr;gap:clamp(50px,7vw,100px)}
  .spec{position:sticky;top:90px}
}

/* ============================================================
   ACTE — PHILOSOPHIE (umami + seigaiha animée)
   ============================================================ */
.umami{position:relative;text-align:center;overflow:hidden;padding-block:clamp(120px,20vh,220px)}
.umami .big{font-family:var(--serif);font-style:italic;font-weight:300;
  font-size:clamp(28px,5.2vw,66px);line-height:1.3;color:var(--cream);max-width:18ch;margin-inline:auto}
.umami .big em{font-style:normal;color:var(--gold-soft)}
.seigaiha-anim{position:absolute;left:0;right:0;bottom:0;height:42%;z-index:-1;opacity:.5;
  background-repeat:repeat;background-position:0 0;
  background-size:120px 60px;
  -webkit-mask-image:linear-gradient(transparent,#000 60%);mask-image:linear-gradient(transparent,#000 60%);
  animation:waveShift 26s linear infinite}
@keyframes waveShift{to{background-position:1200px 0}}

/* ============================================================
   ACTE — MENU (お品書き)
   ============================================================ */
.menu-head{display:flex;align-items:flex-end;justify-content:space-between;gap:30px;flex-wrap:wrap;margin-bottom:clamp(40px,7vw,70px)}
.menu-cols{display:grid;grid-template-columns:1fr;gap:clamp(40px,5vw,64px)}
.menu-cat{display:grid;gap:22px}
.menu-cat-h{display:flex;align-items:baseline;gap:16px;padding-bottom:14px;border-bottom:1px solid var(--line)}
.menu-cat-h .vj{font-family:var(--mincho);font-size:14px;letter-spacing:.2em;color:var(--gold)}
.menu-cat-h h3{font-family:var(--serif);font-size:clamp(24px,3vw,34px);font-weight:400;color:var(--cream)}
.menu-cat-h .from{margin-left:auto;font-family:var(--sans);font-size:12px;letter-spacing:.1em;color:var(--text-faint);white-space:nowrap}
.dish{display:grid;grid-template-columns:1fr auto;gap:6px 18px;align-items:baseline;padding:8px 0}
.dish .dn{font-family:var(--serif);font-size:clamp(18px,2.2vw,22px);color:var(--cream)}
.dish .dn small{font-family:var(--mincho);font-size:.6em;color:var(--gold);letter-spacing:.12em;margin-left:.7em}
.dish .dp{font-family:var(--sans);font-size:15px;color:var(--gold-soft);font-variant-numeric:tabular-nums;white-space:nowrap}
.dish .dd{grid-column:1/-1;font-family:var(--sans);font-size:13.5px;color:var(--text-dim);line-height:1.55;max-width:52ch}
.dish .dx{grid-column:1/-1;font-family:var(--mincho);font-size:12px;letter-spacing:.08em;
  color:var(--gold);margin-top:2px}
.dish .dot{display:none}

/* compléments / toppings + note */
.menu-extra{margin-top:clamp(48px,7vw,80px)}
.topping-grid{list-style:none;margin:26px 0 0;padding:0;display:grid;
  grid-template-columns:1fr;gap:0}
.topping-grid li{display:flex;align-items:baseline;justify-content:space-between;gap:14px;
  padding:11px 2px;border-bottom:1px solid var(--line)}
.topping-grid span{font-family:var(--serif);font-size:16px;color:var(--text)}
.topping-grid b{font-family:var(--sans);font-weight:400;font-size:14px;color:var(--gold-soft);
  font-variant-numeric:tabular-nums;white-space:nowrap}
.menu-note{margin-top:30px;font-family:var(--sans);font-size:13px;line-height:1.7;
  color:var(--text-faint);max-width:70ch}
.drinks-sub{display:block;margin:24px 0 4px;font-family:var(--mincho);font-size:12px;
  letter-spacing:.18em;text-transform:uppercase;color:var(--gold)}
.menu-note .jp{font-family:var(--mincho);color:var(--gold);letter-spacing:.12em}
@media (min-width:680px){.topping-grid{grid-template-columns:1fr 1fr;column-gap:clamp(40px,6vw,80px)}}
@media (min-width:1040px){.topping-grid{grid-template-columns:1fr 1fr 1fr;column-gap:clamp(40px,5vw,70px)}}

/* ============================================================
   ACTE — GALERIE
   ============================================================ */
.gal-grid{display:grid;grid-template-columns:repeat(6,1fr);grid-auto-rows:clamp(86px,12vw,150px);gap:clamp(8px,1.4vw,14px);grid-auto-flow:dense}
.gal-grid image-slot{width:100%;height:100%;cursor:zoom-in}
.gw2{grid-column:span 2}.gw3{grid-column:span 3}.gw4{grid-column:span 4}
.gh2{grid-row:span 2}.gh3{grid-row:span 3}

/* ============================================================
   FOOTER / RÉSERVATION
   ============================================================ */
.foot{position:relative;z-index:5;background:var(--sumi);padding:clamp(80px,12vw,140px) var(--pad) 0;overflow:hidden}
.foot-top{display:grid;gap:clamp(40px,6vw,70px);grid-template-columns:1fr;align-items:start}
.foot-mk{font-family:var(--brush);font-size:clamp(44px,8vw,88px);color:var(--gold-soft);line-height:1}
.foot-name{font-family:var(--serif);letter-spacing:.34em;text-transform:uppercase;font-size:18px;color:var(--cream);margin-top:8px}
.foot-block h4{font-family:var(--sans);font-size:11px;letter-spacing:.26em;text-transform:uppercase;color:var(--gold);margin-bottom:14px}
.foot-block p{color:var(--text-dim);line-height:1.9}
.foot-block .vj{font-family:var(--mincho);color:var(--text-faint);font-size:13px}
.foot-hours div{display:flex;justify-content:space-between;gap:20px;max-width:360px;padding:7px 0;border-bottom:1px dotted var(--line)}
.foot-hours b{color:var(--cream);font-weight:500}
.foot-bar{margin-top:clamp(60px,9vw,90px);padding:24px 0;border-top:1px solid var(--line);
  display:flex;justify-content:space-between;gap:16px;flex-wrap:wrap;
  font-family:var(--sans);font-size:11.5px;letter-spacing:.12em;color:var(--text-faint)}

/* ============================================================
   LIGHTBOX
   ============================================================ */
.lightbox{position:fixed;inset:0;z-index:150;background:rgba(6,5,4,.95);display:grid;place-items:center;
  padding:28px;opacity:0;pointer-events:none;transition:opacity .35s var(--ease)}
.lightbox.open{opacity:1;pointer-events:auto}
.lightbox img{max-width:92vw;max-height:86vh;box-shadow:0 40px 90px rgba(0,0,0,.7)}
.lightbox .x{position:absolute;top:20px;right:22px;width:46px;height:46px;border:1px solid var(--line);
  background:none;color:var(--cream);font-size:18px;cursor:pointer;border-radius:50%}

/* ============================================================
   PLACEHOLDERS image-slot
   ============================================================ */
image-slot{color:var(--text-faint)}
image-slot:not([data-filled]){
  background:
    radial-gradient(circle at 50% 42%, rgba(233,176,106,.07), transparent 60%),
    repeating-linear-gradient(135deg, rgba(236,228,214,.05) 0 11px, transparent 11px 22px),
    rgba(236,228,214,.035);
  box-shadow:inset 0 0 0 1px var(--line)}
image-slot[shape="circle"]{border-radius:50%}
image-slot[data-filled]{background:none;box-shadow:none}

/* ===== HÉRO : image de fond + Ken Burns ===== */
.hero-bg{position:absolute;inset:0;z-index:0;overflow:hidden}
.hero-bg img,.hero-bg video{width:100%;height:100%;object-fit:cover;opacity:.6}
.hero-bg img{animation:kenburns 28s ease-in-out infinite alternate}
.hero-bg::after{content:"";position:absolute;inset:0;background:
  linear-gradient(180deg,rgba(14,12,11,.62),rgba(14,12,11,.5) 38%,rgba(14,12,11,.86) 100%),
  radial-gradient(120% 80% at 50% 32%,transparent 42%,rgba(14,12,11,.72))}
@keyframes kenburns{from{transform:scale(1.08)}to{transform:scale(1.22) translate(-2%,-2%)}}
.hero-garland{position:absolute;top:0;left:0;right:0;z-index:6;margin:0;pointer-events:none}

/* ===== PRELOADER LAMPION — dépliage & allumage ===== */
#intro{flex-direction:column;gap:0}
.intro-stage{position:relative;display:grid;place-items:center;margin-bottom:48px}

/* halo de lumière qui éclôt quand la lanterne s'allume */
.intro-bloom{position:absolute;left:50%;top:46%;width:560px;height:560px;transform:translate(-50%,-50%) scale(.2);
  border-radius:50%;pointer-events:none;opacity:0;
  background:radial-gradient(circle, rgba(255,150,80,.55) 0%, rgba(226,67,43,.28) 32%, rgba(226,67,43,0) 66%);
  filter:blur(6px)}
#intro.igniting .intro-bloom{animation:bloom 2.4s var(--ease) 1s both}
@keyframes bloom{0%{opacity:0;transform:translate(-50%,-50%) scale(.2)}
  22%{opacity:1;transform:translate(-50%,-50%) scale(1.06)}
  100%{opacity:.55;transform:translate(-50%,-50%) scale(1)}}

/* la lanterne : pliée puis dépliée verticalement */
.intro-lantern{position:relative;z-index:2;filter:drop-shadow(0 14px 30px rgba(0,0,0,.5))}
.intro-lantern .chochin{transform-origin:top center}
.intro-lantern .chochin .cap.b{transform:translateX(-50%) translateY(-118px);opacity:0}
.intro-lantern .chochin .tassel{opacity:0}

#intro.igniting .intro-lantern .chochin .body{transform-origin:top center;
  animation:unfold 1.5s cubic-bezier(.22,1.5,.4,1) .35s both, ignite 1.7s var(--ease) .55s both}
#intro.igniting .intro-lantern .chochin .cap.b{
  animation:capDrop 1.5s cubic-bezier(.22,1.5,.4,1) .35s both}
#intro.igniting .intro-lantern .chochin .tassel{animation:tasselIn .6s var(--ease) 1.6s both}

/* corps : compressé en accordéon -> déployé, avec léger rebond */
@keyframes unfold{
  0%{transform:scaleY(.045);border-radius:48%/6%}
  55%{transform:scaleY(1.08);border-radius:48%/34%}
  78%{transform:scaleY(.97)}
  100%{transform:scaleY(1);border-radius:48%/30%}}
/* lumière : papier sombre & froid -> braise chaude qui palpite */
@keyframes ignite{
  0%{filter:brightness(.12) saturate(.25)}
  38%{filter:brightness(.5) saturate(.7)}
  64%{filter:brightness(1.5) saturate(1.15)}
  82%{filter:brightness(.92) saturate(.98)}
  100%{filter:brightness(1) saturate(1)}}
@keyframes capDrop{0%{transform:translateX(-50%) translateY(-118px);opacity:0}
  35%{opacity:1}100%{transform:translateX(-50%) translateY(0);opacity:1}}
@keyframes tasselIn{from{opacity:0;transform:translateX(-50%) scaleY(.2)}to{opacity:.8;transform:translateX(-50%) scaleY(1)}}

/* oscillation douce une fois allumée */
#intro.lit .intro-lantern .chochin{animation:lsway 5s ease-in-out infinite}
#intro.lit .intro-lantern .chochin .body{animation:lanternFlicker 4s ease-in-out infinite}

/* braises qui montent */
.intro-embers{position:absolute;left:50%;top:50%;width:200px;height:240px;transform:translate(-50%,-40%);pointer-events:none;z-index:1}
.intro-embers i{position:absolute;bottom:0;width:3px;height:3px;border-radius:50%;
  background:radial-gradient(circle,#ffd9a0,#e2432b);opacity:0}
#intro.igniting .intro-embers i{animation:ember 2.6s ease-out var(--ed,1.2s) infinite}
@keyframes ember{0%{opacity:0;transform:translateY(0) scale(.6)}
  12%{opacity:.9}70%{opacity:.5}100%{opacity:0;transform:translateY(-180px) translateX(var(--ex,10px)) scale(.2)}}

.intro-word{font-family:var(--serif);letter-spacing:.32em;text-transform:uppercase;
  font-size:clamp(17px,3.4vw,25px);color:var(--cream);opacity:0;animation:fadeUp .9s var(--ease) 1.55s both}
.intro-sub{font-family:var(--mincho);letter-spacing:.42em;font-size:11.5px;color:var(--gold);
  margin-top:12px;opacity:0;animation:fadeUp .9s var(--ease) 1.75s both}
.intro-bar{margin-top:30px;width:min(220px,52vw);height:1px;background:rgba(236,228,214,.16);overflow:hidden;opacity:0;animation:fadeUp .6s var(--ease) 1.9s both}
.intro-bar i{display:block;height:100%;width:0;background:linear-gradient(90deg,var(--gold),var(--gold-soft))}
@keyframes fadeUp{from{opacity:0;transform:translateY(14px)}to{opacity:1;transform:none}}
#intro.done{transform:translateY(-100%);transition:transform 1s var(--ease),opacity .7s ease;opacity:.5}

/* ===== GALERIE : survol ===== */
.gal-grid image-slot{overflow:hidden;transition:transform .5s var(--ease),box-shadow .5s var(--ease)}
.gal-grid image-slot::part(image){transition:transform .9s var(--ease)}
.gal-grid image-slot:hover{transform:translateY(-4px);box-shadow:0 24px 50px rgba(0,0,0,.5);z-index:2}
.gal-grid image-slot:hover::part(image){transform:scale(1.09)}

/* ===== INGRÉDIENTS : survol ===== */
.ingr .disc{transition:transform .5s var(--ease),box-shadow .5s var(--ease),border-color .5s}
.ingr:hover .disc{transform:scale(1.06);border-color:var(--gold);box-shadow:0 0 40px rgba(217,154,91,.42)}
.ingr .nm{transition:color .35s}
.ingr:hover .nm{color:var(--gold-soft)}
.story-figs img,.story-figs image-slot{will-change:transform}

/* ===== MENU : survol plat ===== */
.dish{transition:transform .35s var(--ease)}
.dish:hover{transform:translateX(7px)}
.dish .dn{transition:color .35s}
.dish:hover .dn{color:var(--gold-soft)}

/* toggles tweaks */
body.no-petals #petals{display:none}
body.no-steam .steam-field{display:none}

/* progression latérale */
.scroll-rail{position:fixed;right:18px;top:50%;transform:translateY(-50%);z-index:70;
  height:140px;width:2px;background:var(--line);display:none}
.scroll-rail i{position:absolute;left:0;top:0;width:2px;background:var(--gold);height:var(--sp,0%)}

/* ============================================================
   RESPONSIVE
   ============================================================ */
@media (min-width:860px){
  .nav-links{display:flex}
  .nav-burger{display:none}
  .story-grid{grid-template-columns:1fr 1fr}
  .story-grid.rev .story-figs{order:2}
  .menu-cols{grid-template-columns:1fr 1fr;column-gap:clamp(50px,7vw,110px)}
  .foot-top{grid-template-columns:1.2fr 1fr 1fr}
  .scroll-rail{display:block}
}
@media (max-width:859px){
  .hero-vert{display:none}
  .constellation{min-height:0;display:grid;grid-template-columns:1fr 1fr;gap:30px 18px;margin-top:40px}
  .const-center{position:static;transform:none;grid-column:1/-1;width:min(70vw,300px);margin:0 auto 20px}
  .ingr{position:static!important;width:auto;animation:none!important}
}

@media (prefers-reduced-motion:reduce){
  *{animation-duration:.001ms!important;animation-iteration-count:1!important;
    transition-duration:.2s!important;scroll-behavior:auto!important}
  [data-rise],[data-fade],[data-ink],[data-scale],.stagger>*{opacity:1!important;transform:none!important;clip-path:none!important}
  #petals,.wisp{display:none}
}