.brand { gap: 11px; }
.brand-logo {
  width: 54px;
  height: 54px;
  border-radius: 50%;
  object-fit: cover;
  border: 1px solid #c99a55;
  box-shadow: 0 2px 12px #0005;
}
.footer-logo { width: 64px; height: 64px; }
.nav-highlights { display: grid; grid-template-columns: repeat(3, auto); align-items: center; margin: 0 auto 0 30px; overflow: hidden; border: 1px solid #d9a14e88; border-radius: 12px; background: #0b0907aa; backdrop-filter: blur(6px); }
.nav-highlights div { display: grid; grid-template-columns: auto auto; align-items: center; column-gap: 7px; min-width: 120px; padding: 8px 12px; }
.nav-highlights div + div { border-left: 1px solid #d9a14e55; }
.nav-highlights span { grid-row: 1 / 3; color: #f5c45d; font-size: 22px; }
.nav-highlights strong { color: #ffe5b0; font-size: 12px; line-height: 1.15; }
.nav-highlights small { color: #bfb5a5; font-size: 8px; line-height: 1.2; white-space: nowrap; }
.feature-symbol { display: block; width: 42px; height: 42px; color: #f4bd56; filter: drop-shadow(0 0 5px #e2a63f33); }
.feature-symbol svg { display: block; width: 100%; height: 100%; overflow: visible; fill: none; stroke: currentColor; stroke-width: 2.5; stroke-linecap: round; stroke-linejoin: round; }
.nav-highlights .feature-symbol { grid-row: 1 / 3; font-size: 0; }
.contact-features .feature-symbol { width: 62px; height: 62px; font-size: 0; }
.hero-store-logo {
  position: absolute;
  z-index: 2;
  top: 96px;
  left: clamp(24px, 7vw, 110px);
  width: clamp(190px, 17vw, 270px);
  aspect-ratio: 1;
  object-fit: cover;
  border-radius: 50%;
  filter: drop-shadow(0 12px 24px #0009);
}
.nav .brand span[data-store-name] {
  font-family: "IBM Plex Sans Thai Looped", sans-serif;
  font-size: clamp(28px, 2.5vw, 40px);
  font-weight: 700;
  line-height: 1;
  letter-spacing: -.035em;
  text-shadow: 0 4px 16px #000a;
}
.hero-brand-story {
  position: absolute;
  z-index: 2;
  top: clamp(300px, 25vw, 385px);
  left: clamp(24px, 7vw, 110px);
  width: min(430px, 36vw);
  margin: 0;
  color: #e6ded3;
  font-size: 15px;
  line-height: 1.85;
  text-wrap: pretty;
}
.hero { min-height: 1080px; }
.hero-inner {
  position: absolute;
  z-index: 1;
  top: 525px;
  left: clamp(24px, 8vw, 130px);
  width: min(620px, calc(100% - 48px));
  padding-top: 0;
}
.atmosphere-section {
  padding: 110px clamp(24px, 8vw, 130px);
  background: #171713;
  color: #fff;
}
.atmosphere-heading {
  display: flex;
  justify-content: space-between;
  align-items: end;
  gap: 50px;
  margin-bottom: 46px;
}
.atmosphere-heading > p {
  max-width: 430px;
  margin: 0 0 8px;
  color: #aaa59c;
  line-height: 1.85;
}
.atmosphere-gallery {
  display: grid;
  grid-template-columns: 1.2fr .8fr;
  gap: 18px;
}
.atmosphere-photo { margin: 0; position: relative; overflow: hidden; min-height: 520px; }
.atmosphere-photo img { width: 100%; height: 100%; position: absolute; inset: 0; object-fit: cover; transition: transform .6s ease; }
.atmosphere-photo:hover img { transform: scale(1.025); }
.atmosphere-photo::after { content: ""; position: absolute; inset: 50% 0 0; background: linear-gradient(transparent, #000b); }
.atmosphere-photo figcaption { position: absolute; z-index: 1; left: 24px; bottom: 22px; display: flex; gap: 14px; align-items: center; font-weight: 600; }
.atmosphere-photo figcaption span { color: #f6a27c; font-size: 12px; }
.atmosphere-photo.live-music { grid-column: 1 / -1; min-height: 620px; }
.atmosphere-photo.parking { grid-column: 1 / -1; min-height: 560px; }
.map-wrap.with-qr { display: grid; position: relative; grid-template-rows: minmax(380px, 1fr) 170px; background: #0e0d0b; }
.map-wrap.with-qr iframe { height: 100%; }
.map-pin-name { position: absolute; z-index: 2; top: calc((100% - 170px) / 2 - 50px); left: calc(50% + 20px); padding: 8px 15px; border: 2px solid #d99b3d; border-radius: 12px; background: #17120eef; color: #fff3d6; box-shadow: 0 8px 22px #0007; font-size: 18px; font-weight: 800; line-height: 1.2; white-space: nowrap; pointer-events: none; }
.map-pin-name::before { content: ""; position: absolute; top: 50%; left: -9px; width: 14px; height: 14px; border-left: 2px solid #d99b3d; border-bottom: 2px solid #d99b3d; background: #17120e; transform: translateY(-50%) rotate(45deg); }
.qr-route { display: flex; align-items: center; gap: 20px; padding: 14px 24px; color: #f5ead7; overflow: hidden; }
.qr-crop { position: relative; display: block; flex: 0 0 140px; width: 140px; height: 140px; overflow: hidden; background: #fff; border: 5px solid #e1aa51; }
.qr-crop img { display: block; width: 100%; height: 100%; object-fit: contain; }
.qr-copy { display: flex; flex-direction: column; gap: 4px; }
.qr-copy strong { font-size: 20px; }
.qr-copy small { color: #aaa59c; }
.qr-arrow { margin-left: auto; color: #f25c27; font-size: 26px; }
.hero-contact { position: absolute; z-index: 3; top: 100px; right: clamp(24px, 5vw, 80px); display: grid; grid-template-columns: auto auto; overflow: hidden; border: 1px solid #e4ad55; border-radius: 16px; background: #0a0908e8; box-shadow: 0 12px 32px #0008; backdrop-filter: blur(8px); }
.hero-contact > a, .hero-contact > div { display: flex; align-items: center; gap: 11px; padding: 12px 16px; color: #fff; text-align: left; }
.hero-contact > div { border-left: 1px solid #e4ad5544; }
.hero-contact span:last-child { display: flex; flex-direction: column; }
.hero-contact small { color: #d9b978; font-size: 9px; letter-spacing: .12em; text-transform: uppercase; }
.hero-contact strong { font-size: 17px; white-space: nowrap; }
.mini-icon { display: grid; width: 35px; height: 35px; place-items: center; border-radius: 50%; color: #fff; font: 800 20px Arial, sans-serif; }
.contact-inner { width: min(100%, 900px); margin: auto; }
.contact-kicker { color: #ffe1a5; font-weight: 700; }
.contact-panel { margin: 38px auto 0; overflow: hidden; border: 1px solid #e4ad55; border-radius: 22px; background: linear-gradient(145deg, #17130f, #080807); box-shadow: 0 22px 55px #721e0955; }
.contact-details { display: grid; grid-template-columns: 1fr 1fr; border-bottom: 1px solid #e4ad5544; }
.contact-row { display: flex; align-items: center; justify-content: center; gap: 18px; min-height: 126px; padding: 24px; color: #fff; text-align: left; }
.contact-row + .contact-row { border-left: 1px solid #e4ad5544; }
.contact-row span:last-child { display: flex; flex-direction: column; }
.contact-row small { margin-bottom: 3px; color: #d9b978; font-size: 12px; letter-spacing: .12em; text-transform: uppercase; }
.contact-row strong { font-size: clamp(22px, 3vw, 34px); line-height: 1.25; }
.contact-icon { display: grid; flex: 0 0 56px; width: 56px; height: 56px; place-items: center; border-radius: 50%; color: #fff; font: 800 30px Arial, sans-serif; }
.phone-icon { background: #e9a928; }
.facebook-icon { background: #2867b2; }
.contact-features { display: grid; grid-template-columns: repeat(3, 1fr); padding: 26px 18px 30px; }
.contact-features div { display: flex; flex-direction: column; align-items: center; padding: 0 12px; }
.contact-features div + div { border-left: 1px solid #e4ad5533; }
.contact-features span { color: #f5c45d; font-size: 34px; line-height: 1; }
.contact-features strong { margin-top: 10px; color: #ffe9ba; font-size: 16px; }
.contact-features small { margin-top: 3px; color: #a79d8e; font-size: 12px; }
.full-menu { margin-top: 90px; }
.full-menu-heading { display: flex; justify-content: space-between; align-items: end; gap: 30px; margin-bottom: 30px; }
.full-menu-heading h3 { margin: 0; font-size: clamp(30px, 4vw, 52px); }
.full-menu-heading > p { max-width: 340px; color: #746f66; line-height: 1.7; }
.food-gallery { display: grid; grid-template-columns: repeat(4, 1fr); gap: 14px; }
.food-card { position: relative; padding: 0; border: 0; background: #171713; color: #fff; cursor: zoom-in; aspect-ratio: 1; overflow: hidden; }
.food-card img { width: 100%; height: 100%; object-fit: cover; transition: transform .4s ease; }
.food-card:hover img { transform: scale(1.045); }
.food-card span { position: absolute; left: 0; right: 0; bottom: 0; display: flex; justify-content: space-between; padding: 34px 14px 12px; background: linear-gradient(transparent, #000c); font: 600 12px "Anuphan", sans-serif; }
.food-card span b { color: #f6a27c; }
.menu-more { display: flex; margin: 28px auto 0; border: 0; font-family: inherit; font-size: 15px; }
.menu-lightbox { width: min(92vw, 780px); max-height: 92vh; padding: 16px; border: 0; background: #11110f; color: #fff; box-shadow: 0 24px 80px #000b; }
.menu-lightbox::backdrop { background: #000d; backdrop-filter: blur(5px); }
.menu-lightbox img { display: block; width: 100%; max-height: 78vh; object-fit: contain; }
.menu-lightbox p { margin: 12px 4px 2px; color: #aaa59c; }
.lightbox-close { position: absolute; z-index: 2; top: 22px; right: 22px; width: 42px; height: 42px; border: 0; border-radius: 50%; background: #000c; color: #fff; font-size: 28px; cursor: pointer; }
@media (max-width: 760px) {
  .brand-logo { width: 46px; height: 46px; }
  .brand { font-size: 18px; }
  .hero-store-logo { top: 84px; width: 150px; left: 24px; }
  .hero-brand-story {
    top: 250px;
    left: 24px;
    width: calc(100% - 48px);
    font-size: 14px;
    line-height: 1.75;
  }
  .hero { min-height: 1120px; }
  .hero-inner {
    top: 455px;
    left: 24px;
    width: calc(100% - 48px);
    padding-top: 0;
  }
  .atmosphere-section { padding: 78px 18px; }
  .atmosphere-heading { display: block; }
  .atmosphere-heading > p { margin-top: 22px; }
  .atmosphere-gallery { display: flex; overflow-x: auto; scroll-snap-type: x mandatory; }
  .atmosphere-photo { min-width: 88vw; min-height: 430px; scroll-snap-align: center; }
  .atmosphere-photo.live-music { min-height: 430px; }
  .atmosphere-photo.parking { min-height: 430px; }
  .map-wrap.with-qr { grid-template-rows: 400px 150px; }
  .qr-route { padding: 10px 14px; gap: 14px; }
  .qr-crop { flex-basis: 120px; width: 120px; height: 120px; }
  .qr-copy strong { font-size: 17px; }
  .full-menu { margin-top: 70px; }
  .full-menu-heading { display: block; }
  .full-menu-heading > p { margin-top: 12px; }
  .food-gallery { grid-template-columns: repeat(2, 1fr); gap: 8px; }
  .food-card span { padding: 28px 10px 9px; font-size: 11px; }
  .menu-lightbox { width: 94vw; padding: 10px; }
}
.hero{background-image:linear-gradient(90deg,rgba(12,11,8,.94) 0%,rgba(12,11,8,.76) 34%,rgba(12,11,8,.08) 72%),url('assets/hero-black-gold.png')}
@media (max-width: 760px) {
  body { overflow-x: hidden; }
  .nav { height: 64px; padding: 0 16px; }
  .brand { gap: 8px; font-size: 17px; }
  .brand-logo { width: 42px; height: 42px; }
  .nav .brand span[data-store-name] { font-size: 22px; }
  .nav-highlights { margin: 0 6px; border-radius: 9px; }
  .nav-highlights div { display: flex; min-width: 0; flex-direction: column; gap: 1px; padding: 5px 7px; text-align: center; }
  .nav-highlights span { font-size: 15px; line-height: 1; }
  .nav-highlights .feature-symbol { width: 28px; height: 28px; }
  .nav-highlights strong { font-size: 8px; white-space: nowrap; }
  .nav-highlights small { display: none; }
  .nav-cta { padding: 8px 12px; font-size: 12px; }
  .hero { min-height: 1030px; padding: 0 18px 44px; background-color: #090806; background-position: center 292px; background-size: 100% auto; background-repeat: no-repeat; background-image: url('assets/hero-black-gold.png'); }
  .hero-contact { top: 76px; right: 12px; left: 12px; grid-template-columns: 1fr 1fr; border-radius: 13px; }
  .hero-contact > a, .hero-contact > div { justify-content: flex-start; gap: 8px; padding: 10px; }
  .hero-contact strong { font-size: 14px; }
  .hero-contact small { font-size: 8px; }
  .mini-icon { flex: 0 0 31px; width: 31px; height: 31px; font-size: 17px; }
  .hero-store-logo { top: 162px; left: 18px; width: 108px; }
  .hero-brand-story { top: 160px; left: 138px; width: calc(100% - 156px); padding: 8px 0; background: transparent; font-size: 11px; line-height: 1.65; }
  .hero-inner { top: 535px; left: 18px; display: flex; width: calc(100% - 36px); flex-direction: column; padding: 18px; border-radius: 14px; background: linear-gradient(180deg, #090806e8, #090806 35%); }
  .eyebrow { order: 0; margin: 0 0 10px; font-size: 11px; }
  .quick-facts { order: 1; }
  .hero-inner h1 { order: 2; }
  .hero-copy { order: 3; }
  .hero-actions { order: 4; }
  h1 { margin: 16px 0; font-size: clamp(48px, 15vw, 62px); }
  .hero-copy { font-size: 14px; line-height: 1.65; }
  .hero-actions { display: grid; grid-template-columns: 1fr; margin-top: 22px; }
  .button { width: 100%; min-height: 50px; padding: 13px 18px; }
  .quick-facts { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin: 0 0 12px; }
  .quick-facts div { padding: 12px; border: 1px solid #ffffff22; background: #0004; }
  .quick-facts strong { font-size: 21px; }
  .atmosphere-section, .menu-section { padding: 64px 16px; }
  .atmosphere-heading h2, .full-menu-heading h3 { font-size: 34px; }
  .atmosphere-gallery { gap: 10px; margin-right: -16px; padding-right: 16px; }
  .atmosphere-photo { min-width: 84vw; min-height: 390px; }
  .full-menu { margin-top: 0; }
  .food-gallery { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 7px; }
  .food-card span { font-size: 10px; }
  .location-copy { padding: 64px 20px; }
  .location-copy h2 { font-size: 48px; }
  .location-copy dl div { grid-template-columns: 95px 1fr; }
  .map-wrap.with-qr { grid-template-rows: 350px auto; min-height: 0; }
  .map-pin-name { top: 135px; left: calc(50% + 10px); padding: 7px 11px; font-size: 14px; }
  .qr-route { min-height: 132px; padding: 10px 12px; }
  .qr-crop { flex-basis: 104px; width: 104px; height: 104px; }
  .qr-copy small { font-size: 11px; }
  .contact { padding: 64px 14px 92px; }
  .contact h2 { font-size: 46px; }
  .contact-panel { margin-top: 28px; border-radius: 16px; }
  .contact-details { grid-template-columns: 1fr; }
  .contact-row { justify-content: flex-start; min-height: 94px; padding: 17px 18px; gap: 14px; }
  .contact-row + .contact-row { border-top: 1px solid #e4ad5544; border-left: 0; }
  .contact-row strong { font-size: 22px; }
  .contact-icon { flex-basis: 48px; width: 48px; height: 48px; font-size: 25px; }
  .contact-features { gap: 6px; padding: 20px 7px 22px; }
  .contact-features div { padding: 0 4px; }
  .contact-features span { font-size: 27px; }
  .contact-features .feature-symbol { width: 46px; height: 46px; }
  .contact-features strong { font-size: 13px; }
  .contact-features small { font-size: 9px; line-height: 1.4; }
  .contact-actions { display: grid; grid-template-columns: 1fr; gap: 9px; margin-top: 20px; }
  footer { align-items: center; gap: 14px; padding: 38px 20px 94px; text-align: center; }
  footer p { margin: 0; }
  .mobile-book { bottom: 8px; left: 8px; right: 8px; }
}