/* 喰心 design system tokens (paper mode) */
:root{
  --ink-900:#0E0B08; --ink-800:#1A1410; --ink-700:#241A14; --ink-600:#3B2F26; --ink-500:#5C4E42; --ink-400:#7C6A5C;
  --paper-50:#FDFAF4; --paper-100:#FAF7F1; --paper-200:#F6EFE3;
  --gold:#B89D52; --gold-deep:#8F7A3C; --shu:#A0352E;
  --bg:var(--paper-100); --surface:var(--paper-50); --text:var(--ink-800); --text-muted:var(--ink-400);
  --line:rgba(36,26,20,.13); --line-strong:rgba(36,26,20,.28); --rule:var(--gold);
  --font-mincho:"Noto Serif JP","Hiragino Mincho ProN","Yu Mincho",YuMincho,serif;
  --font-gothic:"Noto Sans JP","Hiragino Sans","Yu Gothic",YuGothic,sans-serif;
  --font-latin:"Playfair Display","Noto Serif JP",Georgia,serif;
  --s-2:8px; --s-3:12px; --s-4:16px; --s-5:24px; --s-6:32px; --s-7:48px; --s-8:64px; --s-9:96px;
}
*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{margin:0; background:var(--bg); color:var(--text); font-family:var(--font-mincho); font-size:15px; line-height:1.75; letter-spacing:.04em;
  background-image:radial-gradient(ellipse at 50% -10%, rgba(184,157,82,.10) 0%, rgba(184,157,82,0) 55%)}
a{color:inherit; text-decoration:none}
.wrap{max-width:560px; margin:0 auto; padding:var(--s-8) var(--s-4) var(--s-9)}
@media (min-width:600px){.wrap{padding-top:var(--s-9)}}

/* header */
.hero{text-align:center; margin-bottom:var(--s-8)}
.hero img{height:min(170px,40vw); width:auto; display:block; margin:0 auto var(--s-6)}
.hero h1{font-weight:500; font-size:26px; letter-spacing:.22em; margin:0 0 var(--s-2); line-height:1.3}
.hero .latin{display:block; font-family:var(--font-latin); font-style:italic; font-weight:400; font-size:14px; letter-spacing:.14em; color:var(--text-muted); margin-top:6px}
.hero p{margin:var(--s-4) 0 0; color:var(--ink-600); font-size:14px; letter-spacing:.1em; line-height:2}
.hero .place{color:var(--rule); font-size:12px; letter-spacing:.28em; margin-top:var(--s-2)}

/* compact hero: reservations above the fold on phones */
.hero-compact{margin-bottom:var(--s-5)}
.hero-compact img{height:min(104px,26vw); margin-bottom:var(--s-4)}
.hero-compact h1{font-size:22px}
.hero-compact .tag{margin-top:var(--s-3); font-size:13px}
.sns-mini{display:flex; justify-content:center; gap:22px; margin:var(--s-5) 0 0; padding:0; list-style:none}
.sns-mini img{display:block; width:26px; height:26px; border-radius:6px; opacity:.9; transition:opacity .2s,transform .2s}
.sns-mini a:hover img{opacity:1; transform:translateY(-1px)}
@media (max-width:599px){.wrap{padding-top:var(--s-5)}}

/* quick reservation list */
.sec.quick{margin-top:var(--s-3)}
.quick + .sec{margin-top:var(--s-6)}
.quick-list{margin:0; padding:0; list-style:none; display:grid}
.quick-list li{display:grid; grid-template-columns:1fr auto; align-items:center; gap:var(--s-4); padding:14px 0; border-bottom:1px solid var(--line)}
.quick-list li:first-child{border-top:1px solid var(--line)}
.q-name{display:flex; flex-direction:column; min-width:0}
.q-name .kind{font-size:11px; letter-spacing:.24em; color:var(--rule)}
.q-name strong{font-weight:500; font-size:17px; letter-spacing:.1em; line-height:1.4}
.q-name .more{font-family:var(--font-gothic); font-size:11px; color:var(--text-muted); letter-spacing:.04em; margin-top:2px}
.btn-sm{width:auto; padding:11px 16px; font-size:14px; white-space:nowrap}
.btn-sm::after{font-size:14px}

/* scroll cue: fixed to the bottom of the viewport until the first scroll */
.scroll-cue{position:fixed; left:0; right:0; bottom:0; z-index:5; display:flex; flex-direction:column; align-items:center; gap:6px; margin:0; padding:34px 0 calc(12px + env(safe-area-inset-bottom)); color:var(--ink-600); font-family:var(--font-gothic); font-size:11px; letter-spacing:.14em; background:linear-gradient(to bottom, rgba(250,247,241,0) 0%, var(--paper-100) 45%); transition:opacity .5s}
.scroll-cue i{display:block; width:9px; height:9px; border-right:1px solid var(--gold-deep); border-bottom:1px solid var(--gold-deep); transform:rotate(45deg); animation:cue 1.8s ease-in-out infinite}
.scroll-cue.gone{opacity:0; pointer-events:none}
@keyframes cue{0%,100%{transform:translateY(0) rotate(45deg); opacity:.55}50%{transform:translateY(6px) rotate(45deg); opacity:1}}
@media (prefers-reduced-motion:reduce){.scroll-cue i{animation:none}}
@media (min-width:600px){.scroll-cue{display:none}}
html{scroll-behavior:smooth}

/* section title with gold hairlines */
.sec{margin-top:var(--s-8)}
.sec-title{display:flex; align-items:center; gap:var(--s-4); font-size:12px; letter-spacing:.3em; color:var(--rule); font-weight:500; margin:0 0 var(--s-5); text-indent:.3em}
.sec-title::before,.sec-title::after{content:""; flex:1; height:1px; background:var(--rule); opacity:.6}

/* SNS row */
.sns{display:grid; grid-template-columns:repeat(2,1fr); gap:var(--s-3) var(--s-4); margin:0; padding:0; list-style:none; text-align:center}
@media (min-width:480px){.sns{grid-template-columns:repeat(4,auto); justify-content:center; gap:var(--s-2) var(--s-6)}}
.sns a{display:inline-block}
.sns .ic{display:block; width:22px; height:22px; margin:0 auto 6px; border-radius:5px}
.sns a{font-family:var(--font-latin); font-style:italic; font-size:17px; letter-spacing:.06em; padding:6px 2px; border-bottom:1px solid transparent; transition:border-color .2s,color .2s}
.sns a:hover{border-bottom-color:var(--rule); color:var(--gold-deep)}
.sns .h{display:block; font-family:var(--font-gothic); font-style:normal; font-size:11px; color:var(--text-muted); letter-spacing:.04em; text-align:center; line-height:1.3}

/* buttons */
.btn{display:flex; align-items:center; justify-content:flex-start; gap:var(--s-3); width:100%; padding:14px 18px; border:1px solid var(--text); background:transparent; color:var(--text); font-family:var(--font-mincho); font-size:15px; letter-spacing:.12em; line-height:1.2; transition:background .2s,color .2s,border-color .2s}
.btn:hover{background:var(--text); color:var(--bg)}
.btn::after{content:"→"; font-family:var(--font-latin); font-size:16px; opacity:.55}
.btn .ic{width:20px; height:20px; flex:0 0 20px; object-fit:contain; border-radius:4px}
.btn .tx{display:flex; flex-direction:column; gap:2px; min-width:0; flex:1}
.btn .sub{font-family:var(--font-gothic); font-size:11px; letter-spacing:.04em; color:var(--text-muted); white-space:nowrap; overflow:hidden; text-overflow:ellipsis}
.btn:hover .sub{color:inherit; opacity:.7}
.btn-primary{background:var(--ink-800); color:var(--paper-100); border-color:var(--ink-800)}
.btn-primary:hover{background:var(--ink-600); border-color:var(--ink-600)}
.btn-primary .sub{color:rgba(250,247,241,.6)}
.btn-gold{border-color:var(--rule); color:var(--gold-deep)}
.btn-gold:hover{background:var(--rule); color:var(--ink-900); border-color:var(--rule)}
.btns{display:grid; gap:10px}
.btns.two{grid-template-columns:repeat(2,minmax(0,1fr))}
.btns.two .btn{padding:12px 14px; font-size:14px; min-height:58px}
.btns.two .btn::after{display:none}
.btns.two .btn .ic{width:18px; height:18px; flex-basis:18px}
.btns.two .btn .tx > span:first-child{letter-spacing:.08em}
.btns.two .btn .sub{font-size:10px; letter-spacing:0}
@media (max-width:380px){.btns.two{grid-template-columns:1fr}}

/* venue card */
.venue{background:var(--surface); border:1px solid var(--line); padding:var(--s-6) var(--s-5); margin-top:var(--s-5); position:relative}
.venue::before{content:""; position:absolute; left:var(--s-5); right:var(--s-5); top:0; height:1px; background:var(--rule)}
.venue-head{display:grid; grid-template-columns:auto 1fr; gap:var(--s-5); align-items:start; margin-bottom:var(--s-5)}
.venue-head img{height:132px; width:auto; display:block}
.venue-head h2{margin:0; font-size:21px; font-weight:500; letter-spacing:.14em; line-height:1.4}
.venue-head .kind{display:block; font-size:12px; letter-spacing:.24em; color:var(--rule); margin-bottom:4px}
.venue-head .en{display:block; font-family:var(--font-latin); font-style:italic; font-size:13px; letter-spacing:.08em; color:var(--text-muted); margin-top:4px}
.facts{margin:0 0 var(--s-5); padding:var(--s-4) 0 0; border-top:1px solid var(--line); font-family:var(--font-gothic); font-size:13px; line-height:1.9; color:var(--ink-600); letter-spacing:.02em}
.facts div{display:grid; grid-template-columns:3.2em 1fr; gap:var(--s-3)}
.facts dt,.facts .l{color:var(--text-muted); font-family:var(--font-mincho); letter-spacing:.2em; font-size:12px; padding-top:2px}
.facts .v a{border-bottom:1px solid var(--line-strong)}
.facts .off{color:var(--shu)}
.venue .btns + .btns{margin-top:10px}

/* footer */
footer{margin-top:var(--s-9); text-align:center; color:var(--text-muted); font-size:11px; letter-spacing:.18em; line-height:2.2}
footer .mark{width:1px; height:40px; background:var(--rule); margin:0 auto var(--s-5); opacity:.7}
footer .latin{font-family:var(--font-latin); font-style:italic; letter-spacing:.1em; font-size:12px}

/* venue page */
.hero-venue .venue-logo{height:min(190px,46vw); width:auto; display:block; margin:0 auto var(--s-6)}
.hero-venue .kind{display:block; font-size:12px; letter-spacing:.28em; color:var(--rule); margin-bottom:var(--s-2)}
.hero-venue h1{font-size:24px; letter-spacing:.18em}
.hero-venue h1 .latin{margin-top:8px}
.venue-solo{margin-top:0}
.nav{margin:0; padding:0; list-style:none; display:grid; gap:10px}
.nav a{display:flex; align-items:baseline; justify-content:space-between; gap:var(--s-3); padding:14px 18px; border:1px solid var(--line-strong); letter-spacing:.12em; font-size:15px; transition:border-color .2s,background .2s}
.nav a:hover{border-color:var(--text); background:var(--surface)}
.nav .h{font-family:var(--font-gothic); font-size:11px; color:var(--text-muted); letter-spacing:.06em; white-space:nowrap}
.nav a::after{content:"→"; font-family:var(--font-latin); font-size:16px; opacity:.55; margin-left:var(--s-2)}
.venue-solo .facts{border-top:0; padding-top:0}
.nav a > span:first-child{flex:1}