:root{
  --rosso:#C8102E; --rosso-vivo:#E31B23; --vino:#6B0F1A; --vino-deep:#4A0A12;
  --ink:#1A1315; --ink-2:#4A3B3E; --stone:#8C7A7D; --line:#E9DCDA;
  --ground:#FFFCFA; --paper:#F7EFEC; --paper-2:#F1E4E0; --basil:#1E7A46;
  --font-display:"Fraunces", "Georgia", serif;
  --font-body:"Manrope", "Noto Sans Thai", system-ui, -apple-system, "Segoe UI", sans-serif;
  --maxw:1180px; --pad:clamp(20px,4vw,48px);
  color-scheme: light;
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{margin:0;background:var(--ground);color:var(--ink);font-family:var(--font-body);font-size:16px;line-height:1.55;-webkit-font-smoothing:antialiased}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto} *{animation:none!important;transition:none!important}}
img{max-width:100%;display:block}
a{color:inherit}
h1,h2,h3,h4{margin:0;font-weight:600;text-wrap:balance}
.wrap{max-width:var(--maxw);margin:0 auto;padding:0 var(--pad)}
.eyebrow{font-size:12px;letter-spacing:.14em;text-transform:uppercase;color:var(--rosso);font-weight:700}
:focus-visible{outline:3px solid var(--rosso-vivo);outline-offset:3px;border-radius:4px}

/* ---- top bar ---- */
.topbar{position:sticky;top:0;z-index:50;background:rgba(255,252,250,.92);backdrop-filter:blur(10px);border-bottom:1px solid var(--line)}
.topbar .wrap{display:flex;align-items:center;justify-content:space-between;gap:24px;height:74px}
.brand img{height:44px;width:auto}
.nav{display:flex;gap:6px;align-items:center}
.nav a{text-decoration:none;font-weight:600;font-size:14px;padding:9px 14px;border-radius:999px;color:var(--ink-2)}
.nav a:hover{background:var(--paper);color:var(--rosso)}
.open-pill{display:inline-flex;align-items:center;gap:8px;font-size:13px;font-weight:700;color:var(--basil);padding:8px 12px;border:1px solid #CFE7D8;border-radius:999px;background:#F2FAF5;white-space:nowrap}
.open-pill i{width:8px;height:8px;border-radius:50%;background:var(--basil);box-shadow:0 0 0 0 rgba(30,122,70,.5);animation:pulse 2s infinite}
@keyframes pulse{0%{box-shadow:0 0 0 0 rgba(30,122,70,.45)}70%{box-shadow:0 0 0 9px rgba(30,122,70,0)}100%{box-shadow:0 0 0 0 rgba(30,122,70,0)}}
.menu-btn{display:none}
@media (max-width:860px){
  .nav{display:none}
  .topbar .wrap{height:64px}
  .brand img{height:38px}
}

/* ---- hero ---- */
.hero{position:relative;overflow:hidden;background:var(--ground)}
.hero .wrap{display:grid;grid-template-columns:1.05fr .95fr;gap:clamp(28px,5vw,72px);align-items:center;padding-top:clamp(40px,7vw,96px);padding-bottom:clamp(40px,7vw,96px)}
.hero h1{font-family:var(--font-display);font-weight:700;font-size:clamp(44px,6.4vw,88px);line-height:.98;letter-spacing:-.02em;color:var(--ink)}
.hero h1 em{font-style:italic;color:var(--rosso);font-weight:600}
.hero .lede{font-size:clamp(17px,1.5vw,20px);color:var(--ink-2);max-width:52ch;margin:24px 0 32px}
.cta-row{display:flex;flex-wrap:wrap;gap:12px;align-items:center}
.btn{display:inline-flex;align-items:center;gap:10px;text-decoration:none;font-weight:700;font-size:15px;padding:14px 22px;border-radius:999px;border:2px solid transparent;transition:transform .15s ease,background .15s ease}
.btn:hover{transform:translateY(-1px)}
.btn-primary{background:var(--rosso);color:#fff}
.btn-primary:hover{background:var(--rosso-vivo)}
.btn-ghost{border-color:var(--line);color:var(--ink)}
.btn-ghost:hover{border-color:var(--rosso);color:var(--rosso)}
.hero-facts{display:flex;gap:28px;margin-top:36px;padding-top:24px;border-top:1px solid var(--line);flex-wrap:wrap}
.fact b{display:block;font-family:var(--font-display);font-size:26px;font-weight:600;color:var(--rosso);line-height:1}
.fact span{font-size:13px;color:var(--stone);font-weight:600}
.hero-visual{position:relative}
.hero-visual .photo{margin:0;position:relative;z-index:1;border-radius:18px;overflow:hidden;box-shadow:0 30px 60px -30px rgba(74,10,18,.45)}
.hero-visual::before{content:"";position:absolute;inset:18px -18px -18px 18px;background:var(--rosso);border-radius:18px;z-index:0;opacity:.95}
.hero-visual::after{content:"";position:absolute;right:-14px;top:-14px;width:120px;height:120px;border-radius:50%;background:repeating-conic-gradient(var(--rosso) 0 12deg,#fff 12deg 24deg);opacity:.14;z-index:0}
.photo img{width:100%;height:100%;object-fit:cover;aspect-ratio:var(--ar,1.5)}
.photo figcaption{display:none}
.photo.placeholder .ph{aspect-ratio:var(--ar,1.5);display:flex;flex-direction:column;align-items:center;justify-content:center;gap:4px;background:linear-gradient(135deg,var(--paper-2),var(--paper));color:var(--stone);font-weight:600;text-align:center;padding:16px}
.photo.placeholder .ph small{font-size:11px;letter-spacing:.14em;text-transform:uppercase}
@media (max-width:860px){
  .hero .wrap{grid-template-columns:1fr;padding-top:28px;gap:26px}
  .hero-visual{order:-1;margin-top:0}
  .hero .lede{margin:18px 0 26px}
  .hero-facts{gap:16px;margin-top:28px;padding-top:20px}
  .fact b{font-size:21px}
  .fact span{font-size:12px}
}

/* ---- 24 ore strip ---- */
.giorno{background:var(--vino);color:#fff;padding:36px 0}
.giorno .wrap{display:grid;grid-template-columns:auto 1fr;gap:32px;align-items:center}
.giorno h2{font-family:var(--font-display);font-size:clamp(26px,3vw,36px);font-weight:600;line-height:1.05}
.giorno h2 small{display:block;font-family:var(--font-body);font-size:12px;letter-spacing:.14em;text-transform:uppercase;font-weight:700;color:#F3B4BB;margin-bottom:8px}
.timeline{display:grid;grid-template-columns:repeat(6,1fr);gap:0;position:relative;list-style:none;margin:0;padding:0}
.timeline::before{content:"";position:absolute;left:0;right:0;top:9px;height:2px;background:rgba(255,255,255,.28)}
.slot{position:relative;padding-top:24px;padding-right:12px}
.slot::before{content:"";position:absolute;left:0;top:3px;width:14px;height:14px;border-radius:50%;background:#fff;border:3px solid var(--vino)}
.slot time{display:block;font-variant-numeric:tabular-nums;font-weight:800;font-size:15px;letter-spacing:.02em}
.slot span{display:block;font-size:13px;color:#F3D6DA;margin-top:2px}
.slot.is-live::before{background:#F3B4BB;box-shadow:0 0 0 4px rgba(243,180,187,.25)}
.slot.is-live time{color:#FFD3D8}
@media (max-width:860px){.giorno .wrap{grid-template-columns:1fr}.timeline{grid-template-columns:repeat(2,1fr);row-gap:14px}.timeline::before{display:none}}

/* ---- sections ---- */
.section{padding:clamp(56px,8vw,104px) 0}
.section-head{display:flex;align-items:end;justify-content:space-between;gap:24px;margin-bottom:36px;flex-wrap:wrap}
.section-head h2{font-family:var(--font-display);font-size:clamp(34px,4.4vw,56px);font-weight:600;letter-spacing:-.015em;line-height:1}
.section-head p{margin:10px 0 0;color:var(--ink-2);max-width:56ch}

/* ---- intro trio ---- */
.trio{display:grid;grid-template-columns:repeat(4,1fr);gap:22px}
.trio article.live{background:var(--rosso);color:#fff}
.trio article.live .glyph{color:#FFD3D8}
.trio article.live p{color:#FBE3E6}
.trio article{padding:28px;border-radius:16px;background:var(--paper);position:relative}
.trio article h3{font-family:var(--font-display);font-size:24px;font-weight:600;margin-bottom:10px}
.trio article p{margin:0;color:var(--ink-2);font-size:15px}
.trio article .glyph{font-family:var(--font-display);font-style:italic;font-size:22px;color:var(--rosso);line-height:1;margin-bottom:14px;font-weight:400}
@media (max-width:860px){.trio{grid-template-columns:1fr 1fr}}

/* ---- menu ---- */
.menu-section{background:var(--paper);border-top:1px solid var(--line);border-bottom:1px solid var(--line)}
.tabs{display:flex;gap:8px;overflow-x:auto;padding:6px 0 14px;scrollbar-width:thin;-webkit-overflow-scrolling:touch;position:sticky;top:74px;z-index:5;background:var(--paper)}
.tab{flex:0 0 auto;font:inherit;font-weight:700;font-size:14px;padding:10px 16px;border-radius:999px;border:1px solid var(--line);background:#fff;color:var(--ink-2);cursor:pointer;white-space:nowrap}
.tab:hover{border-color:var(--rosso);color:var(--rosso)}
.tab.is-active{background:var(--rosso);border-color:var(--rosso);color:#fff}
@media (max-width:860px){.tabs{top:64px}}
.menu-panel{background:#fff;border:1px solid var(--line);border-radius:18px;padding:clamp(22px,3.5vw,44px);margin-top:16px}
.panel-head{display:flex;justify-content:space-between;align-items:baseline;gap:20px;flex-wrap:wrap;border-bottom:2px solid var(--rosso);padding-bottom:14px;margin-bottom:24px}
.panel-head h3{font-family:var(--font-display);font-size:clamp(28px,3.2vw,40px);font-weight:600}
.panel-head h3 .it{font-family:var(--font-display);font-style:italic;font-weight:400;color:var(--stone);font-size:.62em;margin-left:14px}
.panel-note{margin:0;color:var(--ink-2);font-size:14px;max-width:60ch}
.dish-list{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:1fr 1fr;column-gap:44px;row-gap:22px}
.dish-list.compact{row-gap:10px;column-gap:32px}
.dish-head{display:flex;align-items:baseline;gap:10px}
.dish-name{font-size:17px;font-weight:700;margin:0;line-height:1.3}
.compact .dish-name{font-size:15px;font-weight:600}
.dots{flex:1;border-bottom:2px dotted var(--line);min-width:18px;transform:translateY(-5px)}
.price{font-variant-numeric:tabular-nums;font-weight:800;color:var(--rosso);font-size:16px;white-space:nowrap}
.price::after{content:" ฿";font-weight:600;color:var(--stone);font-size:.8em}
.dish-desc{margin:5px 0 0;color:var(--ink-2);font-size:14px;line-height:1.5;max-width:46ch}
.sub-title{font-size:12px;letter-spacing:.14em;text-transform:uppercase;color:var(--rosso);font-weight:800;margin:30px 0 14px}
.drink-groups{display:grid;grid-template-columns:1fr 1fr;column-gap:44px}
.drink-groups .dish-list{grid-template-columns:1fr}
.drink-group .sub-title{margin-top:8px}
.flat-list{list-style:none;padding:0;margin:0;display:grid;grid-template-columns:repeat(4,1fr);gap:10px 24px}
.flat-list li{font-weight:600;padding:10px 0;border-bottom:1px solid var(--line)}
.menu-foot{margin-top:24px;font-size:13px;color:var(--stone)}
@media (max-width:860px){.dish-list,.drink-groups{grid-template-columns:1fr}.flat-list{grid-template-columns:1fr 1fr}}

/* ---- gallery ---- */
.gallery{display:flex;flex-direction:column;gap:14px}
.g-row{display:flex;gap:14px}
.g-row .photo{position:relative;margin:0;min-width:0;flex:var(--ar) 1 0;border-radius:14px;overflow:hidden;background:var(--paper-2)}
.g-row .photo img,.g-row .photo .ph{width:100%;height:auto;aspect-ratio:var(--ar)}
.g-row figcaption{display:block;position:absolute;left:0;right:0;bottom:0;padding:34px 16px 13px;
  font-size:13px;font-weight:700;color:#fff;line-height:1.35;
  background:linear-gradient(to top,rgba(26,19,21,.82),rgba(26,19,21,.35) 55%,rgba(26,19,21,0));
  opacity:0;transition:opacity .25s ease}
.g-row .photo:hover figcaption,.g-row .photo:focus-within figcaption{opacity:1}
@media (hover:none){.g-row figcaption{opacity:1}}
@media (max-width:760px){
  .g-row{flex-direction:column}
  .g-row .photo img{max-height:64vh;object-fit:cover}
}

/* ---- contact ---- */
.contact{background:var(--ink);color:#fff}
.contact .wrap{display:grid;grid-template-columns:1.1fr .9fr;gap:clamp(28px,5vw,72px);align-items:start}
.contact h2{font-family:var(--font-display);font-size:clamp(34px,4.4vw,56px);font-weight:600;line-height:1;letter-spacing:-.015em}
.contact .eyebrow{color:#F3B4BB}
.contact-grid{display:grid;grid-template-columns:1fr 1fr;gap:22px 32px;margin-top:30px}
.contact-grid h4{font-size:12px;letter-spacing:.14em;text-transform:uppercase;color:#C9B4B8;margin-bottom:6px}
.contact-grid p{margin:0;font-size:16px;line-height:1.5}
.contact-grid a{color:#fff;text-decoration:none;border-bottom:1px solid rgba(255,255,255,.35)}
.contact-grid a:hover{border-color:var(--rosso-vivo);color:#FFB3B8}
.map{border-radius:16px;overflow:hidden;background:#2A1E21;border:1px solid rgba(255,255,255,.08);display:flex;flex-direction:column}
.map-frame{position:relative;flex:1;min-height:320px}
.map-frame iframe{width:100%;height:100%;min-height:340px;border:0;display:block}
.map-bar{display:flex;align-items:center;justify-content:space-between;gap:14px;flex-wrap:wrap;padding:14px 16px;background:rgba(255,255,255,.05);border-top:1px solid rgba(255,255,255,.08)}
.map-bar span{font-size:14px;font-weight:600;color:#E8D9DC}
.map-bar .btn{padding:10px 18px;font-size:14px}
.map-fallback{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:10px;text-align:center;padding:24px;color:#C9B4B8;background:
  radial-gradient(circle at 60% 40%, rgba(200,16,46,.35), transparent 40%),
  repeating-linear-gradient(0deg, rgba(255,255,255,.05) 0 1px, transparent 1px 40px),
  repeating-linear-gradient(90deg, rgba(255,255,255,.05) 0 1px, transparent 1px 40px)}
.map-fallback .pin{width:18px;height:18px;border-radius:50% 50% 50% 0;background:var(--rosso-vivo);transform:rotate(-45deg);box-shadow:0 0 0 6px rgba(227,27,35,.25)}
.map .map-fallback strong{color:#fff;font-size:17px}
.social{display:flex;gap:10px;margin-top:30px;flex-wrap:wrap}
.social a{display:inline-flex;align-items:center;gap:8px;text-decoration:none;color:#fff;border:1px solid rgba(255,255,255,.25);padding:10px 16px;border-radius:999px;font-weight:700;font-size:14px}
.social a:hover{background:var(--rosso);border-color:var(--rosso)}
.social svg{width:18px;height:18px;fill:currentColor}
@media (max-width:860px){.contact .wrap{grid-template-columns:1fr}.contact-grid{grid-template-columns:1fr}}

/* ---- footer ---- */
.footer{background:var(--rosso);color:#fff;padding:26px 0;font-size:13px}
.footer .wrap{display:flex;justify-content:space-between;gap:16px;flex-wrap:wrap;align-items:center}
.footer strong{font-family:var(--font-display);font-size:18px;font-weight:600}
.footer a{color:#fff;text-decoration:none;margin-left:16px;font-weight:600}