/* Dark Japanese layout. One typeface (Manrope, self hosted, SIL OFL, see fonts/LICENSES.txt).
   Every font value resolves to a named text style, every padding, margin and gap to a spacing token,
   every radius to a Tailwind radius, every transition to the base curve. */
@font-face{font-family:"Manrope";font-style:normal;font-weight:400;font-display:swap;src:url(fonts/manrope-latin-400-normal.woff2) format("woff2")}
@font-face{font-family:"Manrope";font-style:normal;font-weight:500;font-display:swap;src:url(fonts/manrope-latin-500-normal.woff2) format("woff2")}
@font-face{font-family:"Manrope";font-style:normal;font-weight:600;font-display:swap;src:url(fonts/manrope-latin-600-normal.woff2) format("woff2")}

:root{
  /* surfaces: only the approved dark backgrounds */
  --bg:#131209; --surface:#181818; --surface-2:#1F1F1F; --surface-3:#272727; --surface-4:#313131; --black:#000000;
  --ink:#F3ECDD; --ink-dim:#BDB3A3; --ink-faint:#9A8F7E;
  --accent:#C9A774; --accent-hover:#D8B881; --gold-ink:#131209;
  --line:#313131;
  --todo-ink:#ffd978; --todo-rule:#d9a930;

  --font:"Manrope","PingFang SC","Microsoft YaHei",-apple-system,sans-serif;
  /* text styles */
  --heading-1:600 60px/60px var(--font); --heading-2:600 48px/48px var(--font); --heading-3:600 36px/40px var(--font);
  --heading-4:600 30px/36px var(--font); --heading-5:600 24px/32px var(--font); --heading-6:600 20px/28px var(--font);
  --title-1:500 20px/28px var(--font); --title-2:500 18px/28px var(--font); --title-3:500 16px/24px var(--font);
  --title-4:500 14px/20px var(--font); --title-5:500 12px/16px var(--font);
  --body-1:600 16px/24px var(--font); --body-2:500 16px/24px var(--font); --body-3:400 16px/24px var(--font);
  --body-4:600 14px/20px var(--font); --body-5:500 14px/20px var(--font); --body-6:400 14px/20px var(--font);
  --button-lg:600 18px/28px var(--font); --button-md:600 16px/24px var(--font); --button-sm:600 14px/20px var(--font); --button-xsm:600 12px/16px var(--font);
  --caption-1:500 14px/20px var(--font); --caption-2:400 14px/20px var(--font); --caption-3:600 12px/16px var(--font);
  --caption-4:500 12px/16px var(--font); --caption-5:400 12px/16px var(--font);
  /* radius */
  --r-sm:2px; --r:4px; --r-md:6px; --r-lg:8px; --r-xl:12px; --r-2xl:16px; --r-full:9999px;
  /* motion */
  --ease:cubic-bezier(0.22,1,0.36,1);
  --t-color:color 300ms var(--ease),background-color 300ms var(--ease),border-color 300ms var(--ease),opacity 300ms var(--ease);
  --t-move:transform 500ms var(--ease);
  --maxw:1200px;
}
*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth;scroll-padding-top:96px;-webkit-text-size-adjust:100%}
body{background:var(--bg);color:var(--ink);font:var(--body-3);-webkit-font-smoothing:antialiased;overflow-x:clip}
h1,h2,h3,h4{font-weight:600;text-wrap:balance}
.sig-frame{display:block;overflow:hidden;border-radius:var(--r-lg)}
p,li,summary,figcaption,small{text-wrap:pretty}
em,i,cite,address{font-style:normal}
h1 em,h2 em,h3 em{color:var(--accent)}
a{color:inherit;text-decoration:none}
img{display:block;max-width:100%;height:auto}
button{font:inherit;color:inherit}
small{font:inherit}
b{font-weight:600}
svg.ph{display:block;width:20px;height:20px;flex:none;fill:currentColor}
:focus-visible{outline:2px solid var(--accent);outline-offset:2px}
.wrap{max-width:var(--maxw);margin:0 auto;padding:0 24px}
.eyebrow{display:inline-block;font:var(--caption-3);color:var(--accent)}
.vh{position:absolute!important;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.skip{position:absolute;left:16px;top:-64px;z-index:300;background:var(--accent);color:var(--gold-ink);padding:8px 12px;border-radius:var(--r-lg);font:var(--button-md);transition:var(--t-move)}
.skip:focus{top:16px}
.todo{background:var(--surface-3);color:var(--todo-ink);border:1px dashed var(--todo-rule);border-radius:var(--r);padding:0 4px;font:var(--caption-1);white-space:normal}

/* ---------- buttons ---------- */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;cursor:pointer;font:var(--button-md);padding:8px 12px;border-radius:var(--r-lg);border:1px solid transparent;background:transparent;text-align:center;transition:var(--t-color),var(--t-move)}
.btn:active{transform:scale(.98)}
.btn-primary{background:var(--accent);color:var(--gold-ink)}
.btn-primary:hover{background:var(--accent-hover);transform:translateY(-2px)}
.btn-ghost{border-color:var(--surface-4);color:var(--ink)}
.btn-ghost:hover{border-color:var(--accent);background:var(--surface-3);transform:translateY(-2px)}
.btn-primary:active,.btn-ghost:active{transform:scale(.98)}
.cta-row{display:flex;gap:12px;flex-wrap:wrap;align-items:center}

/* ---------- floating navigation ----------
   The surface sits on ::before: backdrop-filter on the header itself would capture the fixed full height panel. */
header.nav{position:fixed;top:16px;left:0;right:0;z-index:100;margin:0 auto;width:fit-content;max-width:calc(100% - 32px);display:flex;align-items:center;gap:24px;padding:8px 8px 8px 12px;border-radius:var(--r-2xl)}
header.nav::before{content:"";position:absolute;inset:0;z-index:-1;border-radius:var(--r-2xl);background:rgba(19,18,9,.72);border:1px solid rgba(243,236,221,.1);-webkit-backdrop-filter:blur(12px);backdrop-filter:blur(12px)}
.brand{position:relative;z-index:1;display:flex;align-items:center;gap:8px;min-width:0;border-radius:var(--r-lg);transition:var(--t-color)}
.brand:hover{color:var(--accent)}
.brand-mono{flex:none;display:grid;place-items:center;width:32px;height:32px;border:1px solid var(--accent);border-radius:var(--r-full);font:var(--title-4);color:var(--accent)}
.brand-name{font:var(--title-3);white-space:nowrap}
.nav-links{display:flex;align-items:center;gap:24px;font:var(--title-4)}
.nav-links>a{color:var(--ink-dim);border-radius:var(--r);transition:var(--t-color)}
.nav-links>a:hover{color:var(--ink)}
.nav-links>a[aria-current="page"]{color:var(--accent)}
.nav-links .nav-extra{display:none}
.nav-actions{position:relative;z-index:1;display:flex;align-items:center;gap:8px;flex:none}
.nav-actions .btn{font:var(--button-sm);padding:8px 12px}
.lang{display:flex;gap:2px;border:1px solid var(--line);border-radius:var(--r-lg);padding:2px}
.lang a{font:var(--caption-4);color:var(--ink-dim);padding:8px;border-radius:var(--r-md);transition:var(--t-color)}
.lang a:hover{color:var(--ink);background:var(--surface-3)}
.lang a[aria-current="true"]{background:var(--accent);color:var(--gold-ink)}
.nav-toggle{display:none;position:relative;background:none;border:1px solid var(--line);border-radius:var(--r-lg);width:40px;height:40px;cursor:pointer;transition:var(--t-color)}
.nav-toggle:hover{background:var(--surface-3)}
.nav-toggle span{position:absolute;inset:0}
.nav-toggle span::before,.nav-toggle span::after{content:"";position:absolute;left:10px;top:18px;width:18px;height:2px;border-radius:var(--r-full);background:var(--ink);transition:var(--t-move)}
.nav-toggle span::before{transform:translateY(-4px)}
.nav-toggle span::after{transform:translateY(4px)}
.nav-toggle[aria-expanded="true"] span::before{transform:rotate(45deg)}
.nav-toggle[aria-expanded="true"] span::after{transform:rotate(-45deg)}

/* ---------- reveals (only site.js arms them, below the fold, when the motion libraries are missing) ---------- */
.reveal.rv-armed{opacity:0;transform:translateY(32px);transition:opacity 700ms var(--ease),transform 700ms var(--ease)}
.reveal.rv-armed.is-in{opacity:1;transform:none}

/* ---------- sections ---------- */
section{padding:96px 0;position:relative}
.sec-head{margin-bottom:48px;max-width:680px}
.sec-head h2{font:var(--heading-3);margin-top:12px}
.sec-sub{margin-top:16px;color:var(--ink-dim);font:var(--body-3)}

/* ---------- signature dishes ---------- */
.sig-row{display:grid;grid-template-columns:1.05fr 1fr;align-items:center;gap:64px;margin:0 0 64px}
.sig-row:last-child{margin-bottom:0}
.sig-row:nth-child(even) .sig-img{order:2}
.sig-img{padding:8px;background:var(--surface-2);border:1px solid var(--line);border-radius:var(--r-2xl)}
.sig-img img{width:100%;aspect-ratio:3/2;object-fit:cover;border-radius:var(--r-lg)}
.sig-copy .num{font:var(--caption-3);color:var(--ink-faint);display:block;margin-bottom:8px}
.sig-copy h3{font:var(--heading-4);margin:8px 0 12px}
.sig-copy p{color:var(--ink-dim);max-width:44ch;margin-bottom:12px}
.sig-meta{display:flex;flex-wrap:wrap;align-items:baseline;gap:8px 24px}
.sig-meta .moon{color:var(--accent);font:var(--caption-1)}
.sig-meta .pr{font:var(--heading-5);color:var(--ink)}

/* ---------- about ---------- */
.about{background:var(--surface)}
.about-inner{max-width:680px}
.about h2{font:var(--heading-3);margin:12px 0 24px}
.about p{color:var(--ink-dim);margin-bottom:16px}

/* ---------- buffet ---------- */
.buffet{background:var(--surface)}
.buffet-intro{margin-top:16px;color:var(--ink-dim);max-width:60ch}
.buffet-grid{list-style:none;display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));gap:16px}
.price-card{background:var(--surface-2);border:1px solid var(--line);border-radius:var(--r-2xl);padding:24px;display:flex;flex-direction:column;gap:8px;transition:var(--t-color),var(--t-move)}
.price-card:hover{transform:translateY(-2px);border-color:var(--accent)}
.price-card .pc-label{font:var(--caption-1);color:var(--ink-dim)}
.price-card .pc-when{font:var(--title-1)}
/* DOM order is label, when, price, note (what the prelaunch audit reads); the note shows above the price */
.price-card .pc-note{font:var(--body-6);color:var(--ink-dim);order:1}
.price-card .pc-price{order:2;margin-top:auto;padding-top:12px;font:var(--heading-2);color:var(--ink)}
.price-card .pc-price small,.extras-list .ex-price small,.strip-list .p small,.hero-proof small{font:inherit;margin-left:4px}
.buffet-extras{margin-top:32px;display:grid;grid-template-columns:minmax(0,.7fr) minmax(0,1.3fr);gap:24px;align-items:start}
.extras-list{list-style:none}
.extras-list li{display:flex;justify-content:space-between;align-items:baseline;gap:16px;padding:12px 0;border-bottom:1px solid var(--line)}
.extras-list .ex-name small{display:block;color:var(--ink-dim);font:var(--body-6);margin-top:2px}
.extras-list .ex-price{white-space:nowrap;font:var(--title-2);color:var(--accent)}
.buffet-foot{margin-top:24px;font:var(--body-6);color:var(--ink-dim);max-width:70ch}
.buffet .cta-row{margin-top:32px}
.buffet-free{color:var(--accent)}

/* ---------- menu teaser ---------- */
#menu{background:var(--surface)}
.menu-cols{display:grid;grid-template-columns:1fr 1fr;gap:4px 64px}
.dish{display:flex;justify-content:space-between;align-items:baseline;gap:16px;padding:12px 0;border-bottom:1px solid var(--line)}
.dish-main{min-width:0}
.dish-name{font:var(--title-3);color:var(--ink)}
.dish-name abbr{text-decoration:none;font:var(--caption-4);color:var(--accent);border:1px solid var(--accent);border-radius:var(--r-full);padding:0 4px;margin-left:8px;cursor:help}
.dish-desc{color:var(--ink-dim);font:var(--body-6);margin-top:4px}
.dish-price{color:var(--accent);font:var(--body-5);font-variant-numeric:tabular-nums;white-space:nowrap}
.menu-more{margin-top:40px}

/* ---------- gallery: varied grid on wide screens, swipe strip on phones ---------- */
.gallery-grid{display:grid;grid-template-columns:repeat(6,1fr);gap:24px}
.g-item{margin:0;grid-column:span 2}
.g-item:nth-child(5n+1),.g-item:nth-child(5n+2){grid-column:span 3}
.g-item:last-child:nth-child(5n+1){grid-column:span 6}
.g-item:last-child:nth-child(5n+1) img{aspect-ratio:21/9}
.g-frame{overflow:hidden;border-radius:var(--r-xl);border:1px solid var(--line);background:var(--surface-2)}
.g-item img{width:100%;aspect-ratio:4/3;object-fit:cover;transition:var(--t-move)}
.g-item:hover img{transform:scale(1.03)}
.g-item figcaption{margin-top:12px}
.g-item figcaption b{display:block;font:var(--title-2);color:var(--ink)}
.g-item figcaption span{display:block;color:var(--ink-dim);font:var(--body-6);margin-top:4px}
.g-n{font:var(--caption-3)!important;display:inline!important;color:var(--accent)!important;margin-right:8px}

/* ---------- evening band ---------- */
.evening{padding:0;min-height:560px;display:flex;align-items:flex-end;overflow:hidden}
.evening img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.evening::after{content:"";position:absolute;inset:0;background:rgba(0,0,0,.62)}
.evening .wrap{position:relative;z-index:1;padding-top:96px;padding-bottom:64px;width:100%}
.evening h2{font:var(--heading-3);margin:12px 0;max-width:680px}
.evening p{color:var(--ink);max-width:52ch}
.evening .caption{margin-top:16px;font:var(--caption-5);color:var(--ink-dim)}

/* ---------- visit ---------- */
.visit-grid{display:grid;grid-template-columns:1fr 1fr;gap:48px;align-items:start}
.visit-info .row{display:flex;gap:16px;padding:16px 0;border-bottom:1px solid var(--line)}
.visit-info .row .k{width:120px;flex:none;color:var(--accent);font:var(--caption-1)}
.visit-info .row .v{color:var(--ink);font:var(--body-3);min-width:0;flex:1}
.visit-info .row .v a{transition:var(--t-color)}
.visit-info .row .v a:hover{color:var(--accent)}
.visit-info .row .v small{color:var(--ink-dim);display:block;font:var(--body-6);margin-top:4px}
.hours-list{list-style:none;width:100%}
.hours-list li{display:flex;justify-content:space-between;gap:12px;padding:2px 0;font:var(--body-6)}
.hours-list li span:first-child{color:var(--ink-dim)}
.hours-list li span:last-child{text-align:right;font-variant-numeric:tabular-nums}
.hours-list li.closed span:last-child{color:var(--ink-faint)}
.visit-info .cta-row{margin-top:24px}
.map-card{position:relative;border-radius:var(--r-2xl);overflow:hidden;border:1px solid var(--line);min-height:384px;background:var(--surface)}
.map-card iframe{position:absolute;inset:0;width:100%;height:100%;border:0;filter:invert(.92) hue-rotate(180deg) brightness(.92) contrast(.9) saturate(.8)}
.map-consent{position:absolute;inset:0;z-index:2;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:12px;cursor:pointer;background:var(--surface);border:0;color:var(--ink-dim);font:var(--body-5);text-align:center;padding:32px;transition:var(--t-color)}
.map-consent:hover{color:var(--ink);background:var(--surface-2)}
.map-consent small{max-width:40ch;font:var(--caption-5);color:var(--ink-faint)}
.map-consent .pin{width:40px;height:40px;border:1px solid var(--accent);border-radius:var(--r-full);display:grid;place-items:center;color:var(--accent)}
.map-card.loaded .map-consent{display:none}
.map-static{display:flex;flex-direction:column;justify-content:center;gap:12px;padding:32px;min-height:384px}
.map-static p{font:var(--title-1)}

/* ---------- footer ---------- */
footer.ft{background:var(--black);padding:64px 0 24px}
.ft-main{display:flex;flex-direction:column;gap:40px}
@media(min-width:900px){.ft-main{flex-direction:row;align-items:flex-start;gap:96px}}
.ft-brand-col{display:flex;flex-direction:column;align-items:flex-start;gap:12px;max-width:320px;flex:0 0 auto}
.ft-wordmark{font:var(--heading-5)}
.ft-desc{font:var(--body-6);color:var(--ink-dim)}
.ft-cols{display:grid;grid-template-columns:1fr 1fr;gap:32px}
@media(min-width:560px){.ft-cols{grid-template-columns:repeat(3,1fr);gap:40px;flex:1}}
.ft-col h3{font:var(--caption-3);color:var(--accent);margin-bottom:16px}
.ft-col ul{list-style:none;display:flex;flex-direction:column;gap:8px}
.ft-col li,.ft-col a{font:var(--body-6);color:var(--ink-dim);overflow-wrap:anywhere}
.ft-col a{transition:var(--t-color)}
.ft-col a:hover{color:var(--ink)}
.ft-bar{display:flex;flex-direction:column;gap:12px;border-top:1px solid var(--line);margin-top:40px;padding-top:24px}
@media(min-width:760px){.ft-bar{flex-direction:row;justify-content:space-between;align-items:center}}
.ft-copy{font:var(--caption-5);color:var(--ink-faint)}
.ft-legal{display:flex;flex-wrap:wrap;gap:8px 16px;list-style:none;align-items:center}
.ft-legal a{font:var(--caption-5);color:var(--ink-dim);text-underline-offset:4px;transition:var(--t-color)}
.ft-legal a:hover{text-decoration:underline;color:var(--ink)}
.ft-legal .oko{color:var(--accent)}

/* ---------- inner pages ---------- */
.page-head{padding:96px 0 48px;background:var(--bg)}
.page-head h1{font:var(--heading-2);margin:12px 0;max-width:680px}
.page-head p{color:var(--ink-dim);max-width:60ch}
.page-head .cta-row{margin-top:24px}
.buffet-strip{padding:32px 0;background:var(--surface)}
.buffet-strip h2{font:var(--heading-5);margin:8px 0 16px}
.strip-list{list-style:none;display:grid;grid-template-columns:repeat(auto-fill,minmax(256px,1fr));gap:4px 32px}
.strip-list li{display:flex;justify-content:space-between;align-items:baseline;gap:12px;padding:8px 0;border-bottom:1px solid var(--line)}
.strip-list li>span:first-child{font:var(--body-5)}
.strip-list li small{display:block;color:var(--ink-dim);font:var(--caption-5)}
.strip-list .p{white-space:nowrap;font:var(--title-2);color:var(--accent)}
.strip-list .p small{display:inline;font:inherit;color:var(--accent)}
.strip-foot{margin-top:12px;font:var(--body-6);color:var(--ink-dim)}
.menu-tabs{position:sticky;top:80px;z-index:50;padding:16px 24px 0;max-width:calc(var(--maxw));margin:0 auto}
.menu-tabs-track{display:flex;gap:8px;overflow-x:auto;padding:8px;background:var(--surface);border:1px solid var(--line);border-radius:var(--r-2xl);scrollbar-width:none}
.menu-tabs-track::-webkit-scrollbar{display:none}
.menu-tabs a{flex:none;font:var(--title-5);color:var(--ink-dim);border-radius:var(--r-lg);padding:8px 12px;white-space:nowrap;transition:var(--t-color)}
.menu-tabs a:hover{color:var(--ink);background:var(--surface-3)}
.menu-tabs a.on{color:var(--gold-ink);background:var(--accent)}
.menu-body{padding:48px 0 96px}
.menu-cat{padding:0;margin-bottom:64px;scroll-margin-top:160px}
.menu-cat-head{display:flex;align-items:baseline;gap:12px;margin-bottom:8px;border-bottom:1px solid var(--line);padding-bottom:12px}
.menu-cat-head .n{font:var(--caption-3);color:var(--accent)}
.menu-cat-head h2{font:var(--heading-5);color:var(--ink)}
.menu-cat-desc{color:var(--ink-dim);font:var(--body-6);margin:8px 0 4px}
.menu-notes{border-top:1px solid var(--line);padding-top:24px;color:var(--ink-dim);font:var(--body-6)}
.menu-notes p{margin-bottom:8px}
.menu-notes .closing{color:var(--accent);font:var(--title-1);margin-top:16px}
.menu-empty{padding:48px 24px;text-align:center;background:var(--surface);border:1px solid var(--line);border-radius:var(--r-2xl);color:var(--ink-dim)}
.menu-empty p{margin-bottom:16px}
.legal-wrap{max-width:820px;margin:0 auto;padding:48px 24px 96px}
.legal-updated{color:var(--ink-faint);font:var(--caption-2)}
.legal-body{color:var(--ink-dim);font:var(--body-3);overflow-wrap:anywhere}
.legal-body h2{font:var(--heading-5);color:var(--ink);margin:40px 0 12px}
.legal-body h3{font:var(--heading-6);color:var(--ink);margin:24px 0 8px}
.legal-body p,.legal-body ul,.legal-body ol{margin-bottom:16px}
.legal-body ul,.legal-body ol{padding-left:24px}
.legal-body a{color:var(--accent);text-decoration:underline;text-underline-offset:2px}
.legal-body strong,.legal-body b{color:var(--ink);font-weight:500;font:var(--body-2)}
.legal-body table{display:block;overflow-x:auto;border-collapse:collapse;margin:16px 0;font:var(--body-6);max-width:100%}
.legal-body th,.legal-body td{border:1px solid var(--line);padding:8px 12px;text-align:left;vertical-align:top;font:var(--body-6)}
.legal-body th{color:var(--ink);background:var(--surface);font:var(--body-4)}
.legal-nav{margin-top:40px;padding-top:24px;border-top:1px solid var(--line);display:flex;flex-wrap:wrap;gap:8px}
.legal-nav a{font:var(--title-5);border:1px solid var(--line);border-radius:var(--r-lg);padding:8px 12px;color:var(--ink-dim);transition:var(--t-color)}
.legal-nav a:hover{color:var(--ink);background:var(--surface-3)}
.legal-nav a[aria-current="page"]{color:var(--gold-ink);background:var(--accent);border-color:var(--accent)}
.nf{min-height:80vh;display:flex;align-items:center;padding:96px 0 64px}
.nf .wrap{max-width:728px;width:100%}
.nf h1{font:var(--heading-2);margin:16px 0}
.nf p{color:var(--ink-dim);margin-bottom:32px;max-width:680px}

/* ---------- function dialog ---------- */
.modal-back{position:fixed;inset:0;background:rgba(0,0,0,.88);z-index:1000;display:none;align-items:center;justify-content:center;padding:24px}
.modal-back.open{display:flex}
.modal{background:var(--surface);border:1px solid var(--line);border-radius:var(--r-2xl);width:min(860px,100%);height:min(88vh,820px);display:flex;flex-direction:column;overflow:hidden}
.modal-head{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:12px 16px;border-bottom:1px solid var(--line)}
.modal-title{font:var(--title-2)}
.modal-acts{display:flex;gap:8px}
.modal-acts a,.modal-acts button{background:none;border:1px solid var(--line);color:var(--ink-dim);width:40px;height:40px;border-radius:var(--r);cursor:pointer;display:grid;place-items:center;transition:var(--t-color)}
.modal-acts a:hover,.modal-acts button:hover{color:var(--ink);border-color:var(--accent);background:var(--surface-3)}
.modal-body{flex:1;position:relative;background:var(--surface)}
.modal-body iframe{position:absolute;inset:0;width:100%;height:100%;border:0;background:transparent;z-index:1}
/* loading: skeleton shaped like the booking page it stands in for */
.modal-skel{position:absolute;inset:0;padding:32px;display:flex;flex-direction:column;gap:16px;animation:skel 1200ms var(--ease) infinite alternate}
.modal-skel i{display:block;background:var(--surface-3);border-radius:var(--r-lg);height:48px}
.modal-skel i:first-child{height:32px;width:40%}
.modal-skel i:last-child{width:160px;height:40px;margin-top:8px;background:var(--surface-4)}
.modal-body.ready .modal-skel{display:none}
@keyframes skel{from{opacity:.45}to{opacity:1}}
.modal-fallback{position:absolute;inset:0;z-index:2;display:none;flex-direction:column;align-items:center;justify-content:center;gap:16px;text-align:center;padding:32px;color:var(--ink-dim);background:var(--surface)}
.modal-fallback.show{display:flex}

/* ---------- consent card + mobile bar ---------- */
.cookie-bar{position:fixed;left:16px;right:16px;bottom:16px;z-index:1100;display:none;gap:12px 24px;align-items:center;justify-content:space-between;flex-wrap:wrap;max-width:880px;margin:0 auto;padding:16px;background:var(--surface-2);border:1px solid var(--line);border-radius:var(--r-2xl)}
.cookie-bar.show{display:flex}
.cookie-txt{font:var(--body-6);color:var(--ink-dim);flex:1 1 320px}
.cookie-txt a{color:var(--accent);text-decoration:underline;text-underline-offset:2px}
.cookie-acts{display:flex;gap:8px}
.cookie-acts .btn{font:var(--button-sm)}
.mcta{position:fixed;left:0;right:0;bottom:0;z-index:90;display:none;transform:translateY(110%);transition:var(--t-move);background:var(--surface-2);padding-bottom:env(safe-area-inset-bottom)}
.mcta.show{transform:none}
.mcta a{flex:1;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:4px;padding:12px 4px;color:var(--ink-dim);font:var(--caption-4);transition:var(--t-color)}
.mcta a:active{background:var(--surface-3)}
.mcta .primary{background:var(--accent);color:var(--gold-ink)}

/* ---------- hero: the layout's video under a flat overlay; the heading carries the only gradient on the page ---------- */
.hero{min-height:100vh;min-height:100svh;display:flex;align-items:center;overflow:hidden;padding:96px 0 64px;background:var(--black)}
.hero-video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;z-index:0;animation:fadeIn 800ms var(--ease) both}
.hero-overlay{position:absolute;inset:0;z-index:1;background:rgba(0,0,0,.6)}
.hero .wrap{position:relative;z-index:2;width:100%}
.hero-copy{max-width:680px}
.hero-copy>*{animation:fadeUp 700ms var(--ease) both}
/* CSS entrance = the fallback when the motion script is late or missing. Heading late on purpose: motion.js gets 900ms to take it over without re-hiding anything; the button and price never wait longer than 350ms. */
.hero-copy>:nth-child(1),.hero-copy>h1{animation-delay:900ms}.hero-copy>.hero-sub,.hero-copy>.cta-row,.hero-copy>.hero-proof{animation-delay:350ms}
.motion-on .hero-copy>*{animation:none}
/* entrance hold (2026-11-03): with motion allowed, partials/head.html marks <html class="entrance-pending"> before the body is parsed; the hero text then
   waits in the entrance's first frame until motion.js claims it (claimEntrance, same task as the entrance starts). If motion.js never comes, the hold
   lets go by itself at 2.9 s and fades the text in — nothing stays hidden. Replaces the old load-time gate (performance.now() < 900 / 350). */
@keyframes entrance-hold{0%,80%{opacity:0;transform:var(--eh-t,translateY(28px));animation-timing-function:cubic-bezier(.22,1,.36,1)}to{opacity:1;transform:none}}
.entrance-pending .hero .hero-copy>*{animation:entrance-hold 3.6s linear both}
.entrance-pending .hero .hero-copy>.hero-eyebrow{--eh-t:translateX(-28px)}
.entrance-pending .hero .hero-copy>h1{--eh-t:none}
.entrance-done .hero .hero-copy>*{animation:none}
@keyframes fadeUp{from{opacity:0;transform:translateY(32px)}to{opacity:1;transform:none}}
@keyframes fadeIn{from{opacity:0}to{opacity:1}}
.hero-eyebrow{display:block;margin-bottom:16px;color:var(--ink)}
.hero h1{font:var(--heading-1);letter-spacing:-.02em;background:linear-gradient(90deg,#FFFFFF,#9B9B9B);-webkit-background-clip:text;background-clip:text;color:transparent;-webkit-text-fill-color:transparent;max-width:680px}
.hero h1 .ln{display:block}
.hero-sub{margin-top:24px;max-width:680px;color:var(--ink);font:var(--body-3)}
.hero .cta-row{margin-top:32px}
.hero-proof{margin-top:16px;display:flex;flex-wrap:wrap;gap:4px 16px;font:var(--body-5);color:var(--ink)}
.hero-proof b{color:var(--accent)}
.hero-proof small{color:var(--accent)}

/* ---------- benefits ---------- */
.benefits-grid{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,7fr);gap:64px;align-items:start}
.benefits-grid .sec-head{margin-bottom:0;position:sticky;top:96px}
.benefits{list-style:none}
.benefit{display:flex;gap:16px;padding:24px 0;border-bottom:1px solid var(--line)}
.benefit:first-child{padding-top:0}
.benefit:last-child{border-bottom:0;padding-bottom:0}
.benefit-ic{flex:none;width:40px;height:40px;display:grid;place-items:center;border-radius:var(--r-lg);background:var(--surface-2);color:var(--accent)}
.benefit h3{font:var(--title-2)}
.benefit p{margin-top:4px;color:var(--ink-dim)}

/* ---------- tagline reveal: words light up one at a time on scroll ---------- */
.tagline{padding:96px 0}
.tagline-text{font:var(--heading-2);max-width:680px;color:var(--ink)}
.tagline-text .ln{display:block}
.tagline-text .w{opacity:1}
.js .tagline-text.armed .w{opacity:.3;transition:opacity 500ms var(--ease)}
.js .tagline-text.armed .w.on{opacity:1}

/* ---------- how it works ---------- */
.how{background:var(--surface)}
.how-steps{list-style:none;display:grid;grid-template-columns:repeat(3,1fr);gap:16px}
.how-step{padding:24px;background:var(--surface-2);border:1px solid var(--line);border-radius:var(--r-2xl);transition:var(--t-color),var(--t-move)}
.how-step:hover{border-color:var(--accent);transform:translateY(-2px)}
.how-n{display:grid;place-items:center;width:40px;height:40px;border-radius:var(--r-full);background:var(--accent);color:var(--gold-ink);font:var(--body-1);margin-bottom:16px}
.how-step h3{font:var(--title-1)}
.how-step p{margin-top:8px;color:var(--ink-dim)}

/* ---------- proof ---------- */
.proof-grid{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,7fr);gap:64px;align-items:start}
.proof-grid .sec-head{margin-bottom:0}
.proof-card{padding:32px;background:var(--surface-2);border:1px solid var(--line);border-radius:var(--r-2xl)}
.proof-quote{font:var(--title-1)}
.proof-text{margin:16px 0 24px;color:var(--ink-dim)}

/* ---------- FAQ ---------- */
.faq{background:var(--surface)}
.faq-list{max-width:800px}
.faq details{border-bottom:1px solid var(--line)}
.faq summary{cursor:pointer;list-style:none;display:flex;justify-content:space-between;align-items:center;gap:16px;padding:16px 0;font:var(--title-3);color:var(--ink);border-radius:var(--r);transition:var(--t-color)}
.faq summary::-webkit-details-marker{display:none}
.faq summary:hover{color:var(--accent)}
.faq-ic{flex:none;color:var(--accent);transition:var(--t-move)}
.faq details[open] .faq-ic{transform:rotate(45deg)}
.faq details p{padding-bottom:16px;color:var(--ink-dim);max-width:72ch}

/* ---------- final CTA ---------- */
.final h2{font:var(--heading-2);margin:12px 0 16px;max-width:680px}
.final-text{color:var(--ink);max-width:680px}
.final .cta-row{margin-top:24px}
.final-risk{margin-top:16px;font:var(--body-6);color:var(--ink-dim);max-width:680px}

/* ---------- responsive ---------- */
@media(max-width:1099px){
  /* full height panel, opened by the toggle */
  .nav-links{position:fixed;inset:0;height:100vh;height:100dvh;z-index:0;flex-direction:column;align-items:flex-start;gap:16px;padding:96px 24px 32px;background:rgba(19,18,9,.94);-webkit-backdrop-filter:blur(24px);backdrop-filter:blur(24px);overflow:auto;opacity:0;visibility:hidden;transition:opacity 300ms var(--ease),visibility 300ms var(--ease)}
  header.nav.open .nav-links{opacity:1;visibility:visible}
  .nav-links>a{font:var(--heading-4);color:var(--ink)}
  .nav-links>*{opacity:0;transform:translateY(24px);transition:opacity 500ms var(--ease),transform 500ms var(--ease),color 300ms var(--ease);transition-delay:0ms}
  header.nav.open .nav-links>*{opacity:1;transform:none;transition-delay:min(calc(var(--i,0) * 60ms),400ms)}
  .nav-links .nav-extra{display:flex;flex-wrap:wrap;gap:8px;margin-top:8px}
  .nav-toggle{display:block}
}
@media(max-width:900px){
  section{padding:64px 0}
  .sec-head{margin-bottom:40px}
  .sig-row{grid-template-columns:1fr;gap:24px}
  .sig-row:nth-child(even) .sig-img{order:0}
  .menu-cols,.visit-grid,.buffet-extras{grid-template-columns:1fr}
  .visit-grid{gap:32px}
  .gallery-grid{grid-template-columns:repeat(2,1fr);gap:16px}
  .g-item,.g-item:nth-child(5n+1),.g-item:nth-child(5n+2){grid-column:span 1}
  .g-item:last-child:nth-child(5n+1){grid-column:span 1}
  .g-item:last-child:nth-child(5n+1) img{aspect-ratio:4/3}
  .g-item:nth-child(3n+1){grid-column:span 2}
}
@media(max-width:640px){
  header.nav{gap:12px}
  .wrap{padding:0 16px}
  .nav-actions .btn{display:none}
  .sec-head h2,.about h2,.evening h2{font:var(--heading-4)}
  .page-head{padding:96px 0 40px}
  .page-head h1,.nf h1{font:var(--heading-3)}
  .cta-row .btn{flex:1 1 100%}
  .price-card .pc-price{font:var(--heading-3)}
  .visit-info .row{flex-direction:column;gap:4px}
  .visit-info .row .k{width:auto}
  .mcta{display:flex}
  .menu-tabs{padding:12px 16px 0}
  body.has-mcta footer.ft{padding-bottom:96px}
  .sig-copy h3{font:var(--heading-5)}
  .legal-wrap{padding:40px 16px 64px}
}
/* movement becomes a plain opacity change */
@media(prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  .reveal.rv-armed,.reveal.rv-armed.is-in{transform:none}
  .btn:hover,.btn:active,.price-card:hover,.g-item:hover img{transform:none}
  .nav-links>*,header.nav.open .nav-links>*{transform:none}
  .nav-toggle span::before,.nav-toggle span::after{transition:none}
  .mcta{transition:opacity 300ms var(--ease)}
  .modal-skel{animation:none}
}
@media(prefers-reduced-motion:reduce){
  .hero-copy>*{animation-name:fadeIn}
}
@media(max-width:640px){
  .hero{align-items:flex-start;padding:96px 0 64px}
  .hero h1{font:var(--heading-3)}
  .hero h1 .ln{display:inline}
  .hero .cta-row .btn{flex:1 1 100%}
}
@media(max-width:900px){
  .benefits-grid{grid-template-columns:1fr;gap:32px}
  .benefits-grid .sec-head{position:static}
}
@media(max-width:640px){
  .tagline{padding:64px 0}
  .tagline-text{font:var(--heading-3)}
  .tagline-text .ln{display:inline}
}
@media(max-width:900px){.how-steps{grid-template-columns:1fr}}
@media(prefers-reduced-motion:reduce){.how-step:hover{transform:none}}
@media(max-width:900px){.proof-grid{grid-template-columns:1fr;gap:32px}}
@media(max-width:640px){.proof-card{padding:24px}}
@media(max-width:640px){.final h2{font:var(--heading-3)}}

/* ---------- motion (motion.js adds .motion-on only when GSAP loaded and motion is allowed) ---------- */
html.lenis,html.lenis body{height:auto}
html.lenis{scroll-behavior:auto}
.lenis.lenis-stopped{overflow:clip}
/* elements waiting off to the side must not widen the page (a phone would zoom out to fit them) */
main,footer.ft{overflow-x:clip}
#gallery.h-on{scroll-margin-top:-96px}
/* word masks: the word rises from behind its own line */
.wm{display:inline-block;overflow:hidden;vertical-align:top;padding-bottom:.16em;margin-bottom:-.16em}
.wi{display:inline-block;padding-bottom:.16em;margin-bottom:-.16em}
/* a transformed child drops out of the parent's background-clip:text, so while the words move each one paints its own slice of the gradient */
.hero h1.split{background:none;-webkit-text-fill-color:currentColor;color:#fff}
.hero h1.split .wi{background-image:linear-gradient(90deg,#FFFFFF,#9B9B9B);background-repeat:no-repeat;-webkit-background-clip:text;background-clip:text;color:transparent;-webkit-text-fill-color:transparent}
.scroll-bar{position:fixed;top:0;left:0;right:0;height:2px;z-index:120;background:var(--accent);transform:scaleX(0);transform-origin:0 50%;pointer-events:none}
.motion-on header.nav{animation:navIn 800ms var(--ease) both;transition:transform 450ms var(--ease)}
.motion-on header.nav.nav-up{transform:translateY(calc(-100% - 24px))}
@keyframes navIn{from{transform:translateY(calc(-100% - 24px))}to{transform:none}}
.motion-on .no-t{transition:none!important}
.motion-on .price-card{position:relative;overflow:hidden}
.price-card::after{content:"";position:absolute;left:0;right:0;top:0;height:2px;background:var(--accent);transform:scaleX(0);transform-origin:0 50%;opacity:0;pointer-events:none}
.price-card.lit::after{animation:cardLine 1400ms var(--ease) both}
@keyframes cardLine{0%{transform:scaleX(0);opacity:1}60%{transform:scaleX(1);opacity:1}100%{transform:scaleX(1);opacity:0}}
.how-steps{position:relative}
.how-n{position:relative;z-index:1}
.how-step{position:relative}
.how-seg{position:absolute;top:43px;left:0;right:-17px;height:2px;background:var(--accent);transform:scaleX(0);transform-origin:0 50%;pointer-events:none}
.how-step:first-child .how-seg{left:44px}
.how-step:last-child .how-seg{right:auto;width:24px}
.faq details p{overflow:hidden}
.menu-tabs-track{position:relative}
.menu-tabs a{position:relative;z-index:1}
.tab-pill{position:absolute;left:0;top:0;border-radius:var(--r-lg);background:var(--accent);pointer-events:none;opacity:0}
.pill-on .menu-tabs a.on{background:transparent}
/* pinned horizontal gallery, wide screens with a mouse only (class set by motion.js) */
#gallery.h-on{padding:0;height:100vh;overflow:hidden;display:flex;align-items:center}
#gallery.h-on .wrap{display:flex;align-items:center;gap:64px;max-width:none;width:max-content;margin:0;padding:0 6vw;will-change:transform}
#gallery.h-on .sec-head{flex:none;width:min(30vw,420px);margin:0}
#gallery.h-on .sec-head h2{font:var(--heading-2)}
#gallery.h-on .gallery-grid{display:flex;align-items:center;gap:48px}
#gallery.h-on .g-item{flex:none;width:min(40vw,calc(62vh * 1.33))}
#gallery.h-on .g-item:nth-child(even){width:min(28vw,calc(44vh * 1.33));margin-top:10vh}
#gallery.h-on .g-item:nth-child(3n){margin-top:-8vh}
#gallery.h-on .g-item img{aspect-ratio:4/3;transition:none;transform-origin:50% 50%}
.g-progress{position:absolute;left:6vw;right:6vw;bottom:32px;display:flex;align-items:center;gap:16px;font:var(--caption-3);color:var(--ink-dim);font-variant-numeric:tabular-nums}
.g-progress i{display:block;flex:1;height:2px;background:var(--line);overflow:hidden}
.g-progress i b{display:block;height:100%;background:var(--accent);transform:scaleX(0);transform-origin:0 50%}
/* phones and tablets: no blur behind fixed layers (it has made phones stutter on this site) */
@media(hover:none),(max-width:900px){
  header.nav::before{background:rgba(19,18,9,.94);-webkit-backdrop-filter:none;backdrop-filter:none}
  .nav-links{background:rgb(19,18,9);-webkit-backdrop-filter:none;backdrop-filter:none}
}
@media(max-width:900px){.how-seg{display:none}}
@media(prefers-reduced-motion:reduce){.scroll-bar{display:none}}
@media print{.wi,.reveal,.benefit,.dish,.g-item{opacity:1!important;transform:none!important}}
button[data-cookie-settings]{margin:8px 0 16px;padding:8px 16px;font:var(--button-sm);color:var(--ink);background:transparent;border:1px solid var(--line);border-radius:var(--r-lg);cursor:pointer}
button[data-cookie-settings][hidden]{display:none}

/* ---------- phone hero: video visible, copy at the bottom, one primary action ---------- */
@media(max-width:640px){
  .hero{align-items:flex-end;padding:96px 0 32px}
  .hero-video{filter:brightness(.8) saturate(1.08)}
  .hero-overlay{background:linear-gradient(0deg,rgba(8,6,5,.96) 0%,rgba(8,6,5,.78) 34%,rgba(8,6,5,.15) 62%,rgba(8,6,5,.45) 100%)}
  .hero-phone-cut .hero-video{filter:brightness(.62) saturate(1.05);inset:-12svh 0 auto;height:auto;aspect-ratio:9/16;-webkit-mask-image:linear-gradient(180deg,#000 62%,transparent 96%);mask-image:linear-gradient(180deg,#000 62%,transparent 96%)}
  .hero-phone-cut .hero-overlay{background:linear-gradient(0deg,rgba(8,6,5,.96) 0%,rgba(8,6,5,.8) 34%,rgba(8,6,5,.28) 62%,rgba(8,6,5,.62) 100%)}
  .hero-eyebrow{margin-bottom:8px}
  .hero-sub{display:none}
  .hero .cta-row{margin-top:24px}
  .cookie-bar{left:8px;right:8px;bottom:8px;padding:12px;gap:8px}
  .cookie-txt{font:var(--body-5);line-height:1.35}
  .cookie-acts .btn{padding:8px 12px}
}

/* ---------- marquee and kanji watermark ---------- */
.marquee{position:relative;z-index:2;border-top:1px solid var(--line);border-bottom:1px solid var(--line);padding:16px 0;overflow:hidden;white-space:nowrap;background:var(--surface)}
.marquee-track{display:inline-flex;animation:scrollx 70s linear infinite;font:var(--title-4);color:var(--ink-dim)}
.marquee-track span{display:inline-flex;gap:40px;align-items:center;padding-right:40px}
.marquee .dot{color:var(--accent);font-style:normal;font-size:.6em}
@keyframes scrollx{to{transform:translateX(-50%)}}
.kanji-host,#buffet{position:relative;overflow:hidden}
.kanji-host>.wrap,#buffet>.wrap{position:relative;z-index:1}
.kanji-mark{position:absolute;top:96px;right:max(16px,calc((100vw - 1320px)/2));z-index:0;writing-mode:vertical-rl;font-family:"Hiragino Mincho ProN","Yu Mincho","Noto Serif CJK JP","Songti SC",serif;font-size:clamp(32px,4.4vw,64px);font-weight:300;line-height:1;letter-spacing:.14em;color:transparent;-webkit-text-stroke:.75px rgba(201,167,116,.62);padding-right:.45em;border-right:1px solid rgba(201,167,116,.28);pointer-events:none;user-select:none;white-space:nowrap}
@media(min-width:1401px){#buffet .kanji-mark{font-size:44px}#buffet .sec-head{min-height:240px}}
@media(max-width:1400px){.kanji-mark{top:72px;font-size:36px}.kanji-host .sec-head,#buffet .sec-head{padding-right:72px}#buffet .sec-head{min-height:190px}}
@media(max-width:640px){.kanji-mark{top:56px;font-size:24px}.kanji-host .sec-head,#buffet .sec-head{padding-right:48px}#buffet .sec-head{min-height:120px}}
@media(prefers-reduced-motion:reduce){.marquee-track{animation:none}}

/* ==========================================================================================================
   [CENTRED HOME] 2026-11-03 首页居中排版（Stephan 定稿方案 D：「可以的，好多了，就要这个」）。第 1 段：对齐。
   只作用于首页（body.home），菜单页 / 法律页 / 404 不变；不动首屏视频、导航栏、配色。
   规则：文字块本身 margin-inline:auto 居中，块内 text-align:center；flex 行改 justify-content:center；
   图片排布保留（菜品图左右交替、画廊网格 / 电脑横向画廊、地图）。
   配套：adapter.mjs 的菜品卡 step 去重（纯数字的 step 与编号 n 重复，不再显示）+ index.html 的 #if。
   ========================================================================================================== */
body.home main{text-align:center}
body.home .cta-row{justify-content:center}
/* hero */
body.home .hero-copy{margin-inline:auto}
body.home .hero h1,body.home .hero-sub{margin-inline:auto}
body.home .hero-proof{justify-content:center}
/* every section head + welcome */
body.home .sec-head,body.home .about-inner{margin-inline:auto}
body.home .sec-sub,body.home .buffet-intro,body.home .buffet-foot{margin-inline:auto}
/* kanji watermark sits on the right: pad both sides the same so the heading stays on the page axis */
@media(max-width:1400px){body.home .kanji-host .sec-head,body.home #buffet .sec-head{padding-left:72px}}
@media(max-width:640px){body.home .kanji-host .sec-head,body.home #buffet .sec-head{padding-left:48px}}
/* benefits: head above the list, each item stacked icon over text */
body.home .benefits-grid{grid-template-columns:1fr;gap:40px}
body.home .benefits-grid .sec-head{position:static;margin-bottom:0}
body.home .benefits{max-width:680px;margin-inline:auto}
body.home .benefit{flex-direction:column;align-items:center;gap:12px}
/* buffet price cards and extras */
body.home .price-card{align-items:center}
body.home .buffet-extras{grid-template-columns:1fr;max-width:680px;margin-inline:auto;justify-items:center}
body.home .buffet-extras>div{width:100%}
/* tagline */
body.home .tagline-text{margin-inline:auto}
/* how it works: centred numbers, the connecting line runs from the first number to the last */
body.home .how-n{margin-inline:auto}
body.home .how-step:first-child .how-seg{left:50%}
body.home .how-step:last-child .how-seg{left:0;right:50%;width:auto}
/* signature dishes: photo/text alternation kept, the text column is centred */
body.home .sig-copy{display:flex;flex-direction:column;align-items:center}
body.home .sig-copy p{margin-inline:auto}
body.home .sig-meta{justify-content:center}
/* menu teaser: name, description and price stacked and centred in each column */
body.home .dish{flex-direction:column;align-items:center;justify-content:flex-start;gap:4px}
body.home .dish-main{width:100%}
/* gallery captions */
body.home .g-item figcaption{text-align:center}
/* evening band */
body.home .evening h2,body.home .evening p{margin-inline:auto}
/* proof: head above the card */
body.home .proof-grid{grid-template-columns:1fr;gap:32px}
body.home .proof-card{max-width:760px;margin-inline:auto;width:100%}
/* visit: info block centred above the map (the map keeps its full width) */
body.home .visit-grid{grid-template-columns:1fr;gap:40px}
body.home .visit-info{max-width:560px;width:100%;margin-inline:auto}
body.home .visit-info .row{flex-direction:column;align-items:center;gap:4px}
body.home .visit-info .row .k{width:auto}
body.home .visit-info .row .v{width:100%}
body.home .hours-list{max-width:360px;margin-inline:auto}
body.home .map-static{align-items:center}
/* FAQ */
body.home .faq-list{margin-inline:auto}
body.home .faq summary{justify-content:center;text-align:center}
body.home .faq details p{margin-inline:auto}
/* final CTA */
body.home .final h2,body.home .final-text,body.home .final-risk{margin-inline:auto}
/* footer on the home page */
body.home footer.ft{text-align:center}
body.home .ft-main{align-items:center}
@media(min-width:900px){body.home .ft-main{flex-direction:column;gap:48px}}
body.home .ft-brand-col{align-items:center;margin-inline:auto}
body.home .ft-cols{width:100%;max-width:760px;margin-inline:auto}
body.home .ft-col ul{align-items:center}
body.home .ft-bar{align-items:center}
@media(min-width:760px){body.home .ft-bar{flex-direction:column;justify-content:center}}
body.home .ft-legal{justify-content:center}
/* [CENTRED HOME] 第 1 段结束 */

/* ==========================================================================================================
   [CENTRED HOME] 第 2 段：字体、字号阶梯、按钮组（方案 D）。
   字体：Playfair Display Italic 400/500/600（SIL OFL 1.1，fonts/licenses/playfairdisplay-OFL.txt，自托管 woff2，见 FONT-LICENSES.md），
   只用在首屏店名、区块大标题、菜名、招牌菜编号；眉标、正文、价格、按钮、营业信息仍是 Manrope。只作用于首页 body.home。按钮无箭头。
   居中后的字号阶梯（电脑 / 手机）：
     首屏店名 158/84（第二行 74/40）· 招牌菜编号 64/52 金色斜体 · 区块标题 60/40 · 菜名（招牌）36/30 · 菜名（菜单节选）26/23 —— Playfair Italic
     说明段 19/17 限 36–46ch · 正文 16 限 34–48ch · 眉标 12/11 全大写 +.26em · 价格 18 · 按钮 13 全大写
   按钮组（首屏、菜单、到店、结尾全部同一套）：电脑并排、每个 280px 等宽、52px 高、间距 16px；手机上下叠放、320px（或屏宽减边距）。
   营业时间：居中两列表（日期 / 时间各自对齐）。FAQ：列表 600px，问题居中，+ 在问题正下方的小圆圈里。
   菜单节选：电脑两栏按行对齐，单数时最后一道居中独占一行；手机单栏。电脑横向画廊：标题独占第一屏、整屏居中。
   ========================================================================================================== */
@font-face{font-family:"Playfair Display";font-style:italic;font-weight:400;font-display:swap;src:url(fonts/playfair-display-latin-400-italic.woff2) format("woff2")}
@font-face{font-family:"Playfair Display";font-style:italic;font-weight:500;font-display:swap;src:url(fonts/playfair-display-latin-500-italic.woff2) format("woff2")}
@font-face{font-family:"Playfair Display";font-style:italic;font-weight:600;font-display:swap;src:url(fonts/playfair-display-latin-600-italic.woff2) format("woff2")}
body.home{
  --cd-serif:"Playfair Display",Georgia,"Times New Roman",serif;
  --cd-h1:italic 500 120px/.98 var(--cd-serif);
  --cd-h2:italic 400 60px/1.1 var(--cd-serif);
  --cd-h3:italic 400 36px/1.2 var(--cd-serif);
  --cd-dish:italic 400 26px/1.25 var(--cd-serif);
  --cd-lead:400 19px/1.7 var(--font);
  --cd-body:400 16px/1.8 var(--font);
  --cd-small:400 14px/1.65 var(--font);
  --cd-eyebrow:600 12px/16px var(--font);
  --cd-price:500 18px/1.4 var(--font);
  --cd-btn:600 15px/20px var(--font);
  --cd-sec:128px;
}
@media(max-width:640px){
  body.home{
    --cd-h1:italic 500 64px/1 var(--cd-serif);
    --cd-h2:italic 400 40px/1.12 var(--cd-serif);
    --cd-h3:italic 400 30px/1.2 var(--cd-serif);
    --cd-dish:italic 400 23px/1.25 var(--cd-serif);
    --cd-lead:400 17px/1.65 var(--font);
    --cd-eyebrow:600 11px/16px var(--font);
    --cd-sec:88px;
  }
}
/* the serif headings: italic is wanted here (the base sheet turns <em> upright, which stays true inside) */
body.home .hero h1,body.home .sec-head h2,body.home .about h2,body.home .evening h2,body.home .final h2,body.home .tagline-text,body.home .sig-copy h3,body.home .dish-name{font-variant-numeric:lining-nums;font-kerning:normal}
body.home .hero h1 em,body.home main h2 em,body.home main h3 em{font-style:italic}

/* ---------- rhythm ---------- */
body.home section:not(.hero):not(.evening):not(#gallery.h-on){padding:var(--cd-sec) 0}
body.home .sec-head{max-width:820px;margin-bottom:64px}
@media(max-width:640px){body.home .sec-head{margin-bottom:44px}}

/* ---------- eyebrow: small caps, wide tracking, a short gold rule either side ---------- */
body.home main .eyebrow{display:inline-flex;align-items:center;gap:14px;font:var(--cd-eyebrow);letter-spacing:.26em;text-transform:uppercase;color:var(--accent);padding-left:.26em}
body.home main .eyebrow::before,body.home main .eyebrow::after{content:"";width:28px;height:1px;background:currentColor;opacity:.55;flex:none}
body.home .hero-eyebrow{color:var(--ink);margin-bottom:28px}
@media(max-width:640px){
  body.home main .eyebrow{letter-spacing:.2em;gap:10px;padding-left:.2em}
  body.home main .eyebrow::before,body.home main .eyebrow::after{width:16px}
  body.home .hero-eyebrow{font-size:10px;letter-spacing:.03em;margin-bottom:18px;white-space:nowrap;padding-left:0}
  /* the base sheet hides the line under the name on phones; the centred home shows it (size and measure come from the lead rule below) */
  body.home .hero-sub{display:block}
  body.home .hero-eyebrow::before,body.home .hero-eyebrow::after{display:none}
}

/* ---------- headings ---------- */
/* italic overhang would be cut by the gradient's background box: give the glyphs room */
body.home .hero h1{font:var(--cd-h1);letter-spacing:-.01em;max-width:none;padding:0 .12em .06em}
/* the name carries the screen; the district is the second, quieter line of the same title */
body.home .hero h1 .ln:first-child{font-size:1.32em;line-height:.92}
body.home .hero h1 .ln+.ln{font-size:.62em;font-weight:400;line-height:1.2;margin-top:.18em;letter-spacing:.01em}
body.home .sec-head h2,body.home .about h2,body.home .evening h2,body.home .final h2,body.home #gallery.h-on .sec-head h2{font:var(--cd-h2);letter-spacing:-.005em;margin:22px auto 0;max-width:17ch}
body.home .tagline-text{font:var(--cd-h2)}
@media(max-width:640px){
  body.home .hero h1 .ln{display:block}
  body.home .sec-head h2,body.home .about h2,body.home .evening h2,body.home .final h2{max-width:13ch;margin-top:16px}
}

/* ---------- lead + body, always measured ---------- */
body.home .hero-sub{font:var(--cd-lead);color:var(--ink);max-width:36ch;margin-top:28px}
body.home .sec-sub{font:var(--cd-lead);color:var(--ink-dim);max-width:44ch;margin:22px auto 0}
body.home .about p{font:var(--cd-lead);max-width:46ch;margin:28px auto 0}
body.home main p{text-wrap:balance}
@media(max-width:640px){body.home .about p,body.home .sec-sub{max-width:32ch}}
body.home .evening p{font:var(--cd-lead);max-width:40ch;margin-top:24px;text-wrap:balance}
body.home .evening .caption{font:400 12px/1.6 var(--font);letter-spacing:.04em;color:var(--ink-dim);max-width:52ch;margin-top:48px;padding-top:16px;position:relative}
body.home .evening .caption::before{content:"";position:absolute;top:0;left:50%;width:32px;margin-left:-16px;height:1px;background:var(--ink-faint);opacity:.6}
body.home .final-text{font:var(--cd-lead);max-width:36ch;margin-top:24px}
body.home .final-risk{font:var(--cd-small)}
body.home .hero-proof{font:var(--cd-eyebrow);letter-spacing:.26em;text-transform:uppercase;color:var(--ink-dim);margin-top:24px}

/* ---------- buttons: one system for every group on the page (hero, menu, visit, final) ----------
   Desktop: the group is an inline grid centred on the axis; primary first, outline second, both the same width
   (one fixed 280px column each), 52px tall, 12px apart. Phones: stacked, every button 320px (or the screen width minus the gutters).
   Caps with the eyebrow's tracking, existing gold fill and outline colours, 8px radius like the nav button. No arrows. */
body.home main .cta-row{display:inline-grid;grid-auto-flow:column;grid-auto-columns:280px;gap:16px;margin-top:40px;vertical-align:top}
body.home main .cta-row .btn{width:100%;min-width:0;min-height:52px;padding:0 24px;font:600 13px/20px var(--font);letter-spacing:.16em;text-transform:uppercase;border-radius:var(--r-lg);transition:var(--t-color),var(--t-move),box-shadow 300ms var(--ease)}
body.home main .cta-row .btn-primary:hover{transform:translateY(-2px);box-shadow:0 14px 30px -14px rgba(201,167,116,.7)}
body.home main .cta-row .btn-ghost{border-color:rgba(243,236,221,.45)}
body.home main .cta-row .btn-ghost:hover{transform:translateY(-2px);border-color:var(--accent);color:var(--accent);background:rgba(201,167,116,.06)}
body.home main .cta-row .btn:active{transform:translateY(0) scale(.98);box-shadow:none;transition-duration:120ms}
body.home main .cta-row .btn:focus-visible{outline:2px solid var(--accent);outline-offset:3px}
/* the group sits on its own line under the text block */
body.home .hero .cta-row,body.home .menu-more,body.home .visit-info .cta-row,body.home .final .cta-row{display:inline-grid}
body.home .hero-copy,body.home .visit-info,body.home .final .wrap,body.home #menu .wrap{text-align:center}
body.home .menu-more{margin-top:56px}
body.home .visit-info .cta-row{margin-top:32px}
@media(max-width:640px){
  body.home main .cta-row,body.home .hero .cta-row,body.home .menu-more,body.home .visit-info .cta-row,body.home .final .cta-row{display:grid;grid-auto-flow:row;grid-template-columns:1fr;grid-auto-columns:auto;width:320px;max-width:100%;margin:32px auto 0}
  body.home main .cta-row .btn{width:100%;min-height:52px;padding:0 20px}
}
@media(prefers-reduced-motion:reduce){body.home main .cta-row .btn:hover{transform:none}}

/* ---------- signature dishes ---------- */
body.home .sig-row{gap:80px;margin-bottom:112px}
body.home .sig-row:last-child{margin-bottom:0}
body.home .sig-copy .num{font:italic 400 64px/1 var(--cd-serif);letter-spacing:0;color:var(--accent);opacity:.55;margin-bottom:14px;font-variant-numeric:lining-nums}
@media(max-width:640px){body.home .sig-copy .num{font-size:52px}}
body.home .sig-copy h3{font:var(--cd-h3);margin:2px 0 18px}
body.home .sig-copy p{font:var(--cd-body);max-width:34ch;margin-bottom:24px}
body.home .sig-meta{display:contents}
body.home .sig-copy .num{order:0}body.home .sig-meta .moon{order:1;margin-bottom:10px}body.home .sig-copy h3{order:2}body.home .sig-copy>p:not(.sig-meta){order:3}body.home .sig-meta .pr{order:4}
body.home .sig-meta .moon{font:var(--cd-eyebrow);letter-spacing:.22em;text-transform:uppercase}
body.home .sig-meta .pr{font:var(--cd-price);letter-spacing:.02em;color:var(--accent);font-variant-numeric:normal}
@media(max-width:900px){body.home .sig-row{gap:28px;margin-bottom:76px}}

/* ---------- menu teaser: one centred column, like a printed carte ---------- */
body.home .menu-cols{display:grid;grid-template-columns:1fr 1fr;column-gap:96px;row-gap:0;max-width:960px;margin:0 auto}
/* rows pair up and line up; an odd last dish takes the whole row on the axis instead of leaving a hole */
body.home .menu-cols .dish:last-child:nth-child(odd){grid-column:1/-1}
@media(min-width:901px){body.home .menu-cols .dish::before{display:none}body.home .menu-cols .dish{border-top:1px solid var(--line);justify-content:center}body.home .menu-cols .dish:nth-child(-n+2){border-top:0}}
@media(max-width:900px){body.home .menu-cols{grid-template-columns:1fr;max-width:560px}}
body.home .dish{padding:28px 0;gap:8px;border-bottom:0;position:relative}
body.home .dish+.dish::before{content:"";position:absolute;top:0;left:50%;width:48px;height:1px;margin-left:-24px;background:var(--surface-4)}
body.home .dish-name{font:var(--cd-dish)}
body.home .dish-desc{font:400 15px/1.65 var(--font);max-width:40ch;margin:6px auto 2px}
body.home .dish-price{font:var(--cd-price);letter-spacing:.02em;color:var(--accent);font-variant-numeric:normal}

/* ---------- gallery: captions, and the wide pinned version opens on a centred title screen ---------- */
body.home .g-item figcaption b{font:500 15px/1.5 var(--font)}
@media(max-width:900px){body.home .g-item figcaption{margin-top:8px}body.home .g-item figcaption b{font:400 13px/1.45 var(--font);color:var(--ink-dim)}}
body.home #gallery.h-on .sec-head{width:88vw;max-width:none}
body.home #gallery.h-on .sec-head h2{max-width:12ch}

/* ---------- evening band ---------- */
body.home .evening::after{background:linear-gradient(0deg,rgba(0,0,0,.86) 0%,rgba(0,0,0,.62) 55%,rgba(0,0,0,.5) 100%)}
body.home .evening .wrap{padding-top:168px;padding-bottom:100px;text-shadow:0 1px 24px rgba(0,0,0,.55)}
@media(max-width:640px){body.home .evening .wrap{padding-top:120px;padding-bottom:64px}}

/* ---------- visit ---------- */
body.home .visit-info{max-width:600px}
body.home .map-card{max-width:600px;width:100%;margin:0 auto;min-height:320px}
body.home .visit-info .row{padding:24px 0;gap:10px}
body.home .visit-info .row .k{font:var(--cd-eyebrow);letter-spacing:.26em;text-transform:uppercase}
body.home .visit-info .row .v{font:500 18px/1.5 var(--font)}
body.home .visit-info .row .v small{font:var(--cd-small);margin-top:2px}
/* hours: one table centred as a block; days and times line up in their own columns */
body.home .visit-info .hours-list{display:grid;grid-template-columns:auto auto;justify-content:center;column-gap:40px;row-gap:12px;max-width:none;width:auto;margin:4px auto 0}
body.home .hours-list li{display:contents}
body.home .hours-list li span{font:400 15px/1.5 var(--font);text-align:left}
body.home .hours-list li span:first-child{color:var(--ink-dim)}
body.home .hours-list li span:last-child{color:var(--ink);font-variant-numeric:normal}
@media(max-width:640px){body.home .visit-info .hours-list{column-gap:16px}body.home .hours-list li span{font-size:14px}}

/* ---------- FAQ: question centred, the + pinned to the right edge of the list ---------- */
body.home .faq-list{max-width:600px}
body.home .faq summary{display:flex;flex-direction:column;align-items:center;gap:12px;padding:26px 0 22px;font:500 18px/1.45 var(--font)}
body.home .faq summary .faq-ic{width:28px;height:28px;display:grid;place-items:center;border:1px solid rgba(201,167,116,.5);border-radius:var(--r-full);transition:var(--t-move),var(--t-color)}
body.home .faq summary .faq-ic svg{width:14px;height:14px}
body.home .faq summary:hover .faq-ic{border-color:var(--accent);background:rgba(201,167,116,.1)}
body.home .faq details p{font:var(--cd-body);max-width:48ch;padding:0 0 24px}
@media(max-width:640px){body.home .faq summary{gap:10px;font-size:16px;padding:22px 0 18px}body.home .faq summary .faq-ic{width:24px;height:24px}}

/* ---------- final + footer ---------- */
body.home .final h2{max-width:14ch}
body.home .ft-wordmark{font:600 16px/1.4 var(--font);letter-spacing:.32em;padding-left:.32em}
body.home .ft-col h3{font:var(--cd-eyebrow);letter-spacing:.26em;text-transform:uppercase}
@media(max-width:559px){body.home .ft-cols{grid-template-columns:1fr;gap:32px}}
/* [CENTRED HOME] 第 2 段结束 */

/* [OKO-2110 local hero paint fix]
   One bounded local correction: solid ink survives mobile background-clip/transform repaint.
   Keep the existing entrance, word masks, type and layout; cover both plain and split-word text. */
body.home #hero-title,
body.home #hero-title *{
  background-image:none;
  -webkit-background-clip:border-box;
  background-clip:border-box;
  -webkit-text-fill-color:currentColor;
}
body.home #hero-title{color:var(--ink)}
body.home #hero-title *{color:inherit}

/* ---------- gallery as one frame: swipe / arrows / autoplay (Nobi Ramen 11-05: «一个格子就够了») ---------- */
#gallery .g-intro{margin:22px auto 0;max-width:60ch;font:400 17px/1.7 var(--font);color:var(--ink-dim);text-wrap:pretty}
body.home #gallery .sec-head{max-width:760px;margin-left:auto;margin-right:auto;text-align:center}
body.home #gallery .sec-head h2{max-width:22ch}
.g-carousel{position:relative;max-width:900px;margin:0 auto}
.g-carousel .g-track{display:flex;gap:0;overflow-x:auto;overflow-y:hidden;scroll-snap-type:x mandatory;scroll-behavior:smooth;overscroll-behavior-x:contain;scrollbar-width:none;border-radius:var(--r-xl)}
.g-carousel .g-track::-webkit-scrollbar{display:none}
.g-carousel .g-track:focus-visible{outline:2px solid var(--accent);outline-offset:4px}
.g-carousel .g-slide,.g-carousel .g-slide:nth-child(n){flex:0 0 100%;grid-column:auto;margin:0;scroll-snap-align:center;scroll-snap-stop:always}
.g-carousel .g-slide img,.g-carousel .g-slide:last-child:nth-child(5n+1) img{aspect-ratio:16/10}
.g-carousel .g-slide:hover img{transform:none}
.g-nav{display:flex;align-items:center;justify-content:center;gap:24px;margin-top:20px}
.g-btn{width:48px;height:48px;border-radius:50%;border:1px solid var(--line);background:transparent;color:var(--ink);display:grid;place-items:center;cursor:pointer;transition:var(--t-color)}
.g-btn:hover{border-color:var(--accent);color:var(--accent)}
.g-btn:focus-visible{outline:2px solid var(--accent);outline-offset:3px}
.g-count{min-width:72px;text-align:center;font:var(--caption-2);letter-spacing:.08em;color:var(--ink-dim)}
.g-count b{font-weight:inherit;color:var(--ink)}
@media(max-width:900px){.g-carousel .g-slide img,.g-carousel .g-slide:last-child:nth-child(5n+1) img{aspect-ratio:4/3}#gallery .g-intro{font:400 15px/1.65 var(--font)}}
/* Nobi Ramen 11-05（b1f879c49f）：订位块背景是老板的竖版插画，宽屏时取景上移，露出人物面部 */
@media(min-width:901px){.evening img{object-position:50% 28%}}