/* =====================================================================
   MOON BAR — Milestone 9B guest-menu design (owner-approved 2026-11-01; integrated from the isolated preview, unchanged).
   Original owner-approved ChatGPT graphics: A1/A2 hero scene, A3 gold logo, B1 natural dark wood,
   C-series category banners; one hibiscus/plumeria/monstera cluster cut cleanly from A3.
   Fonts: Cinzel (titles) and Great Vibes (tagline), both SIL Open Font License, served locally.
   Composition reference: K2-moon-bar-desktop-layout-mockup.
   ===================================================================== */
@font-face{font-family:"Cinzel";src:url(assets/m9b/cinzel-latin-500-normal.woff2) format("woff2");font-weight:500;font-display:swap}
@font-face{font-family:"Cinzel";src:url(assets/m9b/cinzel-latin-600-normal.woff2) format("woff2");font-weight:600;font-display:swap}
@font-face{font-family:"Cinzel";src:url(assets/m9b/cinzel-latin-700-normal.woff2) format("woff2");font-weight:700;font-display:swap}
@font-face{font-family:"Great Vibes";src:url(assets/m9b/great-vibes-latin-400-normal.woff2) format("woff2");font-weight:400;font-display:swap}

:root{
  --gold:#f3c56a; --gold-2:#e0a43c; --gold-deep:#b97a22; --cream:#fbeed2; --cream-2:#e8d4ae;
  --glass:rgba(16,9,4,.78); --hair:rgba(243,197,106,.30);
  --title:"Cinzel",Georgia,"Times New Roman",serif; --script:"Great Vibes","Brush Script MT",cursive;
}

/* ---------- B1: one photographic wooden surface behind the whole page, never tiled ----------
   A fixed layer (not background-attachment:fixed, which iOS ignores) keeps B1 at screen size on every device. */
html,body{background:#140a05}
body{background:none}
body::before{content:"";position:fixed;inset:0;z-index:-2;background:#140a05 url(assets/m9b/B1-1672.webp) center/cover no-repeat}
body::after{content:"";position:fixed;inset:0;z-index:-1;pointer-events:none;
  background:radial-gradient(ellipse 120% 85% at 50% 40%,rgba(10,5,2,.10),rgba(10,5,2,.55))}
@media (max-width:699px){body::before{background-image:url(assets/m9b/B1-1100.webp)}}

/* ---------- header: A1 tropical bar at sunset + A3 gold logo + real text ---------- */
.hero9{position:relative;overflow:hidden;height:clamp(250px,36vh,300px);display:flex;align-items:center;justify-content:center;text-align:center}
.hero9-bg img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:50% 58%}
.hero9::after{content:"";position:absolute;inset:0;pointer-events:none;
  background:linear-gradient(180deg,rgba(12,6,2,.18) 0%,rgba(12,6,2,0) 35%,rgba(12,6,2,.30) 72%,rgba(20,10,5,.95) 100%)}
.hero9-brand{position:relative;z-index:1;display:flex;flex-direction:column;align-items:center;padding:6px 16px 22px}
.hero9-logo{margin:0;line-height:0}
.hero9-logo img{width:auto;height:clamp(120px,19vh,160px);filter:drop-shadow(0 10px 18px rgba(0,0,0,.55))}
.hero9-sub{margin:2px 0 0;font:600 15px/1.2 var(--title);letter-spacing:.34em;text-transform:uppercase;color:var(--cream);
  text-shadow:0 2px 10px rgba(0,0,0,.85),0 0 2px rgba(0,0,0,.9)}
.hero9-tag{margin:0;font:400 31px/1.05 var(--script);color:var(--gold);text-shadow:0 2px 12px rgba(0,0,0,.9),0 0 2px rgba(0,0,0,.8)}
@media (max-width:699px){
  .hero9{height:330px}
  .hero9-bg img{object-position:50% 62%}
  .hero9-logo img{height:150px}
  .hero9-sub{font-size:13px;letter-spacing:.28em}
  .hero9-tag{font-size:29px}
}

/* ---------- how to order: a slim caption, no plank ---------- */
.howto{margin:-6px auto 0;max-width:820px;padding:0 14px;position:relative;z-index:2}
.plaque{width:fit-content;max-width:100%;margin:0 auto;display:flex;flex-wrap:wrap;align-items:baseline;justify-content:center;gap:2px 14px;
  padding:8px 20px 9px;border-radius:999px;background:var(--glass);border:1px solid var(--hair);box-shadow:0 10px 26px -10px rgba(0,0,0,.8)}
.plaque p{margin:0;font:400 15px/1.3 var(--sans);letter-spacing:.03em;color:var(--cream)}
.plaque .hl{font:600 14px/1 var(--title);letter-spacing:.14em;text-transform:uppercase;color:var(--gold)}
.plaque .small{margin:0;font-size:11.5px;letter-spacing:.2em;color:var(--cream-2)}
@media (max-width:699px){.plaque{border-radius:16px;padding:8px 12px}.plaque p{font-size:13.5px}}

/* ---------- category bar: gold pills (K2) ---------- */
.catnav{margin-top:14px;background:rgba(14,8,3,.86);border:0;border-top:1px solid var(--hair);border-bottom:1px solid var(--hair);box-shadow:0 12px 24px -12px rgba(0,0,0,.8)}
.catnav-track{padding:9px 14px;gap:9px}
.chip{font:600 13px/1 var(--title);letter-spacing:.1em;color:var(--cream);border:1px solid rgba(243,197,106,.45);background:rgba(255,226,170,.04);padding:10px 15px;min-height:40px}
.chip.active{background:linear-gradient(180deg,#ffd982,#e9a73d);color:#2a1606;border-color:#ffd982;box-shadow:0 3px 14px rgba(233,167,61,.45)}

/* ---------- section headings ----------
   banner sections: the original C-series banner (its own lettering) at one consistent size;
   other sections: Cinzel title in gold between two flower clusters cut from A3 (same height band) */
.menu{max-width:1320px;padding:6px 14px 34px}
.mc-section{margin-top:30px;scroll-margin-top:66px}
.mc-section:first-child{margin-top:18px}
.mc-banner{max-width:540px;margin:0 auto;border-radius:12px;overflow:hidden;box-shadow:0 14px 30px -12px rgba(0,0,0,.85),0 0 0 1px var(--hair)}
.mc-banner img{aspect-ratio:3/1}
.mc-sub{margin:10px auto 16px;font:500 12.5px/1.3 var(--sans);letter-spacing:.24em;color:var(--cream-2)}
.sign9{display:flex;align-items:center;justify-content:center;gap:clamp(6px,2vw,20px);margin:0 auto 18px;min-height:120px}
.sign9-t{text-align:center;max-width:min(78vw,720px)}
.sign9 h2{margin:0;font:700 clamp(24px,3.3vw,38px)/1.1 var(--title);letter-spacing:.06em;text-transform:uppercase;
  color:var(--gold);background:linear-gradient(180deg,#ffe7a6 0%,#f3c56a 45%,#c98a2c 100%);-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;
  filter:drop-shadow(0 2px 3px rgba(0,0,0,.85))}
.sign9 p{margin:8px 0 0;font:500 12.5px/1.3 var(--sans);letter-spacing:.24em;text-transform:uppercase;color:var(--cream-2);text-shadow:0 1px 4px rgba(0,0,0,.9)}
.fl9{flex:0 0 auto;width:clamp(58px,7vw,92px);aspect-ratio:400/499;background:url(assets/m9b/flower-cluster.webp) center/contain no-repeat;filter:drop-shadow(0 6px 10px rgba(0,0,0,.6))}
.fl9-l{transform:scaleX(-1) rotate(-8deg)}
.fl9-r{transform:rotate(-8deg)}
@media (max-width:699px){.sign9{min-height:96px}.fl9{width:52px}.sign9 h2{font-size:23px}.sign9 p{font-size:11px;letter-spacing:.18em}}

/* ---------- product cards: the photograph leads, no brown frame ---------- */
.mc-grid{max-width:440px;gap:20px}
.mc{background:var(--glass);border-radius:14px;box-shadow:0 0 0 1px rgba(243,197,106,.20),0 18px 36px -16px rgba(0,0,0,.9)}
.mc-photo{background:#0d0703}
.mc-photo::after{height:1px;background:linear-gradient(90deg,transparent,rgba(243,197,106,.7),transparent);box-shadow:none}
.mc-num{background:linear-gradient(180deg,#ffd982,#e9a73d);color:#2a1606;box-shadow:0 2px 8px rgba(0,0,0,.5);font-weight:600;border-radius:8px}
.mc-body{text-align:center;align-items:center;padding:14px 16px 16px}
.mc-name{font:600 clamp(18px,1.1vw + 10px,22px)/1.15 var(--title);letter-spacing:.05em;color:var(--cream)}
.mc-desc{font:italic 400 15px/1.4 Georgia,"Times New Roman",serif;color:#dcc6a0}
.mc-foot{width:100%;justify-content:center;flex-direction:column;gap:6px;border-top:0;padding-top:12px}
.mc-price{display:inline-block;min-width:96px;padding:6px 18px 5px;border-radius:999px;background:linear-gradient(180deg,#ffd982,#e9a73d);
  color:#2a1606;font:700 24px/1 var(--sans);letter-spacing:.01em;box-shadow:0 4px 12px rgba(0,0,0,.45),inset 0 1px 0 rgba(255,255,255,.4)}
.mc-avail{font-size:11.5px;letter-spacing:.14em;color:#cbb48a}
.is-soldout .mc-price{background:#5a4a35;color:#e9dcc2}
/* beverage lists (soft drinks, beer, wine): same glass surface */
.mc-list{background:var(--glass);box-shadow:0 0 0 1px rgba(243,197,106,.20),0 18px 36px -16px rgba(0,0,0,.9)}
.mc-r__name{font-family:var(--title);font-weight:600;letter-spacing:.04em;font-size:17px}
.mc-r .mc-price{min-width:0;padding:5px 12px 4px;font-size:18px}
.mc-r__wp span{color:var(--gold)}

/* grid: phones 1 column, portrait tablets 3, landscape tablets / desktop 4 (from 9A, accepted) */
@media (min-width:700px){
  .mc-grid{max-width:1000px;gap:18px}
  .mc-grid > *{flex-basis:calc((100% - 36px) / 3)}
  .mc-body{padding:12px 14px 14px}
  .mc-desc{font-size:14.5px;line-height:1.36}
  .mc-price{font-size:21px;min-width:84px}
}
@media (min-width:1000px){.mc-grid{max-width:1320px;gap:20px}.mc-grid > *{flex-basis:calc((100% - 60px) / 4)}}

/* ---------- footer ---------- */
.foot{background:linear-gradient(180deg,rgba(12,6,2,.4),rgba(12,6,2,.92));border-top:1px solid var(--hair)}
.foot .fl{font:400 36px/1.1 var(--script);color:var(--gold)}
.foot p{color:var(--cream-2)}

/* ---- preview tuning (round 2): price + availability on one line; tighter headings so a full card fits the Lenovo screen ---- */
.mc-foot{flex-direction:row;flex-wrap:wrap;gap:6px 12px}
.sign9{min-height:96px;margin-bottom:14px}
.mc-section{margin-top:24px}
@media (min-width:700px) and (max-height:760px){.sign9 h2{font-size:30px}.fl9{width:66px}.mc-section:first-child{margin-top:12px}}
@media (max-width:699px){
  .hero9{height:300px}
  .hero9-logo img{height:140px}
  .plaque p{font-size:13px;letter-spacing:0}
  .sign9{min-height:80px;gap:4px}
  .fl9{width:44px}
  .sign9 h2{font-size:21px}
}