/* ==========================================================================
   The Ambered Jack - shared stylesheet (extracted from the single-file mockup)
   Design system preserved exactly: ink/amber/gold/cream palette, Playfair/Inter/Caveat.
   ========================================================================== */
:root{
  --ink:#1b1511;--ink-2:#241c16;--ink-3:#2e241c;
  --amber:#c5641b;--amber-lt:#e08a3c;--gold:#d99a4e;
  --amber-text:#9c4a0d; /* AA-safe amber for small text on light backgrounds (>=4.5:1 on cream/cream-2/white) */
  --cream:#f5efe3;--cream-2:#e9ddc8;--stone:#b9a98f;
  --line:rgba(245,239,227,.14);--maxw:1180px;--shadow:0 18px 50px rgba(0,0,0,.45);
}
*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth}
body{font-family:'Inter',system-ui,sans-serif;color:#322a22;background:var(--cream);line-height:1.65;-webkit-font-smoothing:antialiased}
h1,h2,h3,h4{font-family:'Playfair Display',serif;line-height:1.12;color:#1f1812;font-weight:800}
a{color:inherit;text-decoration:none}
img{display:block;max-width:100%}
.wrap{max-width:var(--maxw);margin:0 auto;padding:0 24px}
.eyebrow{font-family:'Inter';font-weight:700;letter-spacing:.22em;text-transform:uppercase;font-size:.72rem;color:var(--amber-text)}
.script{font-family:'Caveat',cursive;color:var(--amber-lt)}
.ic{width:1.05em;height:1.05em;display:inline-block;vertical-align:-.16em;stroke:currentColor;fill:none;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}

/* accessibility: skip link + visible focus */
.skip-link{position:absolute;left:-999px;top:0;z-index:200;background:var(--amber);color:#fff;padding:10px 16px;border-radius:0 0 8px 0;font-weight:700}
.skip-link:focus{left:0}
a:focus-visible,button:focus-visible,input:focus-visible,select:focus-visible,textarea:focus-visible{outline:3px solid var(--amber-lt);outline-offset:2px;border-radius:4px}

.btn{display:inline-flex;align-items:center;gap:.55em;font-weight:700;font-size:.92rem;padding:.85em 1.5em;border-radius:999px;cursor:pointer;border:2px solid transparent;transition:.2s;letter-spacing:.01em}
.btn .ic{width:1.1em;height:1.1em}
.btn-amber{background:var(--amber);color:#fff}
.btn-amber:hover{background:#ad5312;transform:translateY(-2px)}
.btn-ghost{background:transparent;border-color:rgba(255,255,255,.5);color:#fff}
.btn-ghost:hover{background:rgba(255,255,255,.12);border-color:#fff}
.btn-dark{background:var(--ink);color:var(--cream)}
.btn-dark:hover{background:#000;transform:translateY(-2px)}
.btn-outline-dark{border-color:var(--ink);color:var(--ink)}
.btn-outline-dark:hover{background:var(--ink);color:var(--cream)}

/* ---------- TOP BAR ---------- */
.topbar{background:#120e0a;color:var(--cream);font-size:.8rem}
.topbar .wrap{display:flex;justify-content:space-between;align-items:center;gap:16px;padding-top:7px;padding-bottom:7px}
.topbar a{color:var(--cream-2);display:inline-flex;align-items:center;gap:.45em}
.topbar a:hover{color:#fff}
.topbar .ic{color:var(--gold)}
.reviews-badge{display:inline-flex;align-items:center;gap:.5em;background:rgba(255,255,255,.08);padding:3px 11px;border-radius:999px;border:1px solid rgba(255,255,255,.12)}
.stars{color:var(--gold);letter-spacing:1px}
.topbar .tb-right{display:flex;gap:18px;align-items:center}

/* ---------- HEADER ---------- */
/* z-index 120 keeps the header (and the mobile drawer nested inside it) ABOVE the
   .drawer-backdrop (z-index 110). nav.links is trapped in this header's stacking
   context, so the header itself must outrank the backdrop or the backdrop covers
   the open drawer and the links become untappable. (See LLM-README Pitfall #11.) */
/* NOTE: no backdrop-filter here. A backdrop-filter establishes a containing block
   for fixed-position descendants, which threw the nested mobile nav drawer off the
   left edge of the screen (worse under mobile emulation). The header background is
   ~96% opaque, so the blur was invisible anyway. (See LLM-README Pitfall #14.) */
header.nav{position:sticky;top:0;z-index:120;background:rgba(20,15,11,.97);border-bottom:1px solid var(--line)}
.nav .wrap{display:flex;align-items:center;justify-content:space-between;padding-top:12px;padding-bottom:12px;gap:20px}
.brand{display:flex;align-items:center;gap:12px;cursor:pointer}
.brand img{height:54px;width:54px;border-radius:50%;object-fit:cover;border:2px solid var(--amber)}
.brand .bt{font-family:'Playfair Display';color:var(--cream);font-weight:800;font-size:1.15rem;line-height:1}
.brand .bs{font-family:'Caveat';color:var(--amber-lt);font-size:1rem;line-height:1}
nav.links{display:flex;gap:6px;align-items:center}
nav.links a{color:var(--cream-2);font-weight:600;font-size:.92rem;padding:.5em .9em;border-radius:8px;transition:.18s;letter-spacing:.02em;cursor:pointer}
nav.links a:hover{color:#fff;background:rgba(255,255,255,.07)}
nav.links a[aria-current="page"]{color:var(--amber-lt)}

/* ---------- HERO ---------- */
.hero{position:relative;color:var(--cream);padding:90px 0 96px;overflow:hidden;
      background:radial-gradient(820px 460px at 78% -5%,rgba(197,100,27,.32),transparent 62%),
                 linear-gradient(158deg,#211a14 0%,#16100b 60%,#120d09 100%)}
.hero::after{content:"";position:absolute;inset:0;opacity:.05;pointer-events:none;
      background-image:repeating-linear-gradient(135deg,#fff 0 1px,transparent 1px 22px)}
.hero .wrap{position:relative;display:grid;grid-template-columns:1.08fr .92fr;gap:54px;align-items:center}
.hero .eyebrow{color:var(--gold);margin-bottom:18px}
.hero h1{font-size:clamp(2.5rem,5vw,4.1rem);color:#fff;font-weight:900;letter-spacing:-.01em}
.hero h1 .amb{color:var(--amber-lt)}
.hero p.lead{max-width:520px;margin:20px 0 4px;font-size:1.13rem;color:var(--cream-2)}
.hero .hero-cta{display:flex;gap:14px;flex-wrap:wrap;margin-top:30px}
.hero .meta-strip{display:flex;gap:14px 26px;flex-wrap:wrap;margin-top:34px;color:var(--cream-2);font-size:.9rem;font-weight:500}
.hero .meta-strip span{display:inline-flex;align-items:center;gap:.55em}
.hero .meta-strip span::before{content:"";width:8px;height:8px;background:var(--amber);transform:rotate(45deg);flex:none}
.hero .meta-strip b{color:#fff;font-weight:600}
.hero-photo{position:relative;border-radius:18px;overflow:hidden;border:1px solid rgba(255,255,255,.14);box-shadow:var(--shadow);aspect-ratio:4/5;background:#000}
.hero-photo img.main{width:100%;height:100%;object-fit:cover}
.hero-photo img.badge{position:absolute;left:18px;bottom:18px;width:96px;height:96px;border-radius:50%;object-fit:cover;background:#000;border:3px solid var(--amber);box-shadow:0 10px 26px rgba(0,0,0,.55)}

/* ---------- SECTION SHELLS ---------- */
section{padding:84px 0}
.sec-head{text-align:center;max-width:680px;margin:0 auto 50px}
.sec-head h2{font-size:clamp(2rem,4vw,2.9rem);margin:12px 0 14px}
.sec-head p{color:#5e5346;font-size:1.05rem}
.on-dark{background:var(--ink);color:var(--cream)}
.on-dark h2,.on-dark h3{color:#fff}
.on-dark .sec-head p{color:var(--stone)}
.on-dark .eyebrow{color:var(--amber)} /* keep the brighter amber for eyebrows on dark sections */
.cream-2-bg{background:var(--cream-2)}
.rule{height:3px;width:64px;background:var(--amber);border-radius:3px;margin:0 auto}

/* story teaser */
.story{display:grid;grid-template-columns:1.05fr .95fr;gap:54px;align-items:center}
.story img{border-radius:14px;box-shadow:var(--shadow);width:100%;height:430px;object-fit:cover;object-position:center 38%}
.story h2{font-size:clamp(1.9rem,3.6vw,2.7rem);margin:14px 0 16px}
.story p{margin-bottom:14px;color:#4d4337}

/* featured dishes */
.dish-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:24px}
.dish{background:var(--ink-3);border-radius:14px;overflow:hidden;box-shadow:0 10px 30px rgba(0,0,0,.18);transition:.25s;border:1px solid var(--line)}
.dish:hover{transform:translateY(-6px);box-shadow:0 20px 44px rgba(0,0,0,.30)}
.dish img{height:210px;width:100%;object-fit:cover}
.dish .db{padding:18px 20px 22px}
.dish h3{font-size:1.25rem;margin-bottom:6px;color:#fff}
.dish p{font-size:.9rem;color:var(--stone);margin:0}
.dish .price{color:var(--amber-lt);font-weight:700;font-family:'Playfair Display';font-size:1.05rem;float:right}

/* info strip */
.infogrid{display:grid;grid-template-columns:repeat(3,1fr);gap:22px}
.infocard{background:#fff;border-radius:14px;padding:30px 28px;box-shadow:0 10px 30px rgba(0,0,0,.08);text-align:center}
.infocard .ic{width:30px;height:30px;color:var(--amber);margin-bottom:10px}
.infocard h3{font-size:1.2rem;margin-bottom:8px}
.infocard p{color:#5e5346;font-size:.95rem;margin:0}
.infocard p b{color:#2b231b}

/* reviews */
.rev-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:24px}
.rev{background:var(--ink-3);border:1px solid var(--line);border-radius:14px;padding:28px 26px}
.rev .stars{font-size:1.05rem;margin-bottom:10px}
.rev p{color:var(--cream-2);font-size:.98rem;font-style:italic;margin-bottom:16px}
.rev .who{color:#fff;font-weight:700;font-size:.9rem;display:flex;align-items:center;gap:10px}
.rev .who .av{width:34px;height:34px;border-radius:50%;background:var(--amber);color:#fff;display:flex;align-items:center;justify-content:center;font-family:'Playfair Display';font-size:.95rem;flex:none}
.rev .who small{display:block;color:var(--stone);font-weight:500;font-style:normal;font-size:.78rem}

/* CTA band */
.ctaband{background:linear-gradient(120deg,rgba(120,55,12,.55),transparent),var(--amber);color:#fff;text-align:center;padding:70px 0}
.ctaband h2{color:#fff;font-size:clamp(1.9rem,4vw,2.7rem)}
.ctaband p{max-width:560px;margin:14px auto 26px;color:#fff;opacity:.92}
.ctaband .btn-dark{background:#1b1511}
.ctaband .pill{display:inline-block;background:rgba(0,0,0,.18);color:#fff;font-size:.74rem;font-weight:700;letter-spacing:.14em;text-transform:uppercase;padding:5px 14px;border-radius:999px;margin-bottom:14px}

/* ---------- PAGE HEADERS ---------- */
.pagehead{color:var(--cream);text-align:center;padding:66px 0 60px;position:relative;overflow:hidden;
      background:radial-gradient(700px 380px at 50% -20%,rgba(197,100,27,.30),transparent 60%),
                 linear-gradient(160deg,#211a14,#130e0a)}
.pagehead::after{content:"";position:absolute;inset:0;opacity:.05;pointer-events:none;background-image:repeating-linear-gradient(135deg,#fff 0 1px,transparent 1px 22px)}
.pagehead .wrap{position:relative}
.pagehead h1{color:#fff;font-size:clamp(2.2rem,5vw,3.4rem)}
.pagehead p{color:var(--stone);max-width:560px;margin:12px auto 0}
.menu-actions{display:flex;gap:14px;justify-content:center;flex-wrap:wrap;margin-top:26px}

/* ---------- MENU ---------- */
.menu-cat{margin-bottom:54px}
.menu-cat-head{display:flex;align-items:center;gap:16px;margin-bottom:24px}
.menu-cat-head h2{font-size:1.9rem;white-space:nowrap}
.menu-cat-head .ln{height:2px;background:linear-gradient(90deg,var(--amber),transparent);flex:1;border-radius:2px}
.menu-cat-head .note{font-size:.82rem;color:#7a6e5e;font-weight:600;white-space:nowrap}
.mlist{display:grid;grid-template-columns:1fr 1fr;gap:6px 46px}
.mitem{padding:13px 0;border-bottom:1px dashed rgba(0,0,0,.12)}
.mitem .mtop{display:flex;align-items:baseline}
.mitem .mname{font-family:'Playfair Display';font-weight:700;font-size:1.08rem;color:#241c14;flex:0 1 auto}
.mitem .mprice{font-family:'Playfair Display';font-weight:700;color:var(--amber-text);white-space:nowrap;flex:none;order:3}
/* dotted leader connecting each item name to its price (printed-menu style);
   :has() scopes it so items WITHOUT a price don't get a trailing dotted line. */
.mitem .mtop:has(.mprice)::after{content:"";order:2;flex:1 1 12px;min-width:14px;align-self:baseline;margin:0 .45em;border-bottom:2px dotted rgba(70,45,20,.32);transform:translateY(-.22em)}
.mitem .mdesc{font-size:.88rem;color:#6a5e50;margin-top:2px}
.mitem .gf{display:inline-block;font-size:.62rem;font-weight:800;letter-spacing:.08em;color:#3c7a3c;border:1px solid rgba(60,122,60,.4);border-radius:4px;padding:0 5px;margin-left:6px;vertical-align:middle}
.subnote{font-size:.86rem;color:#6a5e50;background:#fff;border-left:3px solid var(--amber);padding:12px 16px;border-radius:0 8px 8px 0;margin-bottom:22px;box-shadow:0 6px 18px rgba(0,0,0,.05)}
.chips{display:flex;flex-wrap:wrap;gap:8px;margin-top:6px}
.chip{background:#fff;border:1px solid rgba(0,0,0,.1);border-radius:999px;padding:4px 12px;font-size:.8rem;color:#4d4337;font-weight:500}
.toppings-box{background:#fff;border-radius:14px;padding:24px 26px;box-shadow:0 8px 24px rgba(0,0,0,.06)}
.toppings-box h4{font-size:1rem;margin-bottom:4px;color:var(--amber-text)}
.tgrid{display:grid;grid-template-columns:repeat(3,1fr);gap:18px}

/* ---------- ABOUT ---------- */
.about-lede{font-size:1.3rem;color:#3c332a;font-family:'Playfair Display';font-weight:600;max-width:760px;margin:0 auto 10px;text-align:center;line-height:1.4}
.timeline{max-width:760px;margin:46px auto 0;position:relative}
.timeline::before{content:"";position:absolute;left:26px;top:8px;bottom:8px;width:2px;background:linear-gradient(var(--amber),var(--cream-2))}
.tl{position:relative;padding:0 0 34px 74px}
.tl .dot{position:absolute;left:17px;top:2px;width:20px;height:20px;border-radius:50%;background:var(--amber);border:4px solid var(--cream);box-shadow:0 0 0 2px var(--amber)}
.tl .yr{font-family:'Caveat';color:var(--amber);font-size:1.5rem;font-weight:700;line-height:1}
.tl h3{font-size:1.3rem;margin:2px 0 6px}
.tl p{color:#5b5044}
.owner-figure{display:flex;align-items:center;gap:30px;max-width:740px;margin:48px auto 0}
.owner-figure img{width:290px;flex:none;height:auto;border-radius:14px;box-shadow:var(--shadow)}
.owner-figure figcaption{color:#5b5044;font-size:1.05rem;font-style:italic;line-height:1.6;font-family:'Playfair Display',serif}
@media(max-width:600px){.owner-figure{flex-direction:column;text-align:center;gap:16px;margin-top:36px}.owner-figure img{width:100%;max-width:280px}}
.about-strip{display:grid;grid-template-columns:repeat(3,1fr);gap:16px;max-width:820px;margin:8px auto 0}
.about-strip img{height:215px;width:100%;object-fit:cover;border-radius:12px;box-shadow:0 10px 26px rgba(0,0,0,.12)}

/* ---------- CATERING ---------- */
.cat-grid{display:grid;grid-template-columns:1.05fr .95fr;gap:46px;align-items:start}
.cat-grid h2{font-size:clamp(2rem,4vw,2.7rem);margin:10px 0 14px}
.cat-list{list-style:none;margin:18px 0 26px}
.cat-list li{padding:9px 0 9px 30px;position:relative;color:#4d4337}
.cat-list li::before{content:"";position:absolute;left:2px;top:14px;width:9px;height:9px;background:var(--amber);transform:rotate(45deg)}
.cat-card{background:var(--ink);color:var(--cream);border-radius:18px;padding:34px 32px;box-shadow:var(--shadow)}
.cat-card h3{color:#fff;font-size:1.4rem;margin-bottom:4px}
.cat-card .sub{color:var(--stone);font-size:.9rem;margin-bottom:18px}
.step{display:flex;gap:16px;padding:18px 0;border-bottom:1px solid var(--line)}
.step:last-child{border-bottom:none;padding-bottom:0}
.step .n{width:38px;height:38px;border-radius:50%;border:2px solid var(--amber);color:var(--amber-lt);display:flex;align-items:center;justify-content:center;font-family:'Playfair Display';font-weight:800;flex:none}
.step h4{color:#fff;font-size:1.05rem;margin-bottom:2px}
.step p{color:var(--stone);font-size:.9rem;margin:0}

/* ---------- CONTACT ---------- */
.contact-grid{display:grid;grid-template-columns:1fr 1fr;gap:48px;align-items:start}
.contact-info h2{font-size:2rem;margin-bottom:6px}
.ci-row{display:flex;gap:16px;padding:18px 0;border-bottom:1px solid rgba(0,0,0,.08)}
.ci-row .ic{width:24px;height:24px;color:var(--amber);flex:none;margin-top:2px}
.ci-row h4{font-size:1.05rem;margin-bottom:2px}
.ci-row p{color:#5b5044;font-size:.96rem;margin:0}
.ci-row a{color:var(--amber-text);font-weight:600}
.hours-table{width:100%;border-collapse:collapse;margin-top:4px}
.hours-table td{padding:7px 0;font-size:.95rem;border-bottom:1px dashed rgba(0,0,0,.1)}
.hours-table td:last-child{text-align:right;font-weight:600;color:#2b231b}
.hours-table tr.closed td{color:#8a7d6b}
.map-wrap{border-radius:16px;overflow:hidden;box-shadow:var(--shadow);height:300px}
.map-wrap iframe{width:100%;height:100%;border:0}
.callahead-box{background:var(--ink);color:var(--cream);border-radius:16px;padding:30px;text-align:center;margin-top:22px}
.callahead-box h3{color:#fff;font-size:1.4rem;margin-bottom:6px}
.callahead-box .num{font-family:'Playfair Display';font-size:2rem;color:var(--amber-lt);font-weight:800;display:inline-flex;align-items:center;gap:.35em;margin:8px 0 4px}
.callahead-box .num .ic{width:.8em;height:.8em}
.callahead-box small{display:block;margin-top:8px;color:var(--stone)}

/* ---------- CONTACT FORM ---------- */
.cform{background:#fff;border-radius:16px;padding:32px;box-shadow:0 12px 34px rgba(0,0,0,.09)}
.cform h3{font-size:1.6rem;margin-bottom:6px}
.cform .lead{color:#5e5346;font-size:.95rem;margin-bottom:20px}
.field{margin-bottom:14px}
.field label{display:block;font-size:.72rem;font-weight:700;letter-spacing:.06em;text-transform:uppercase;color:#7a6e5e;margin-bottom:5px}
.field input,.field select,.field textarea{width:100%;border:1.5px solid #e2d8c4;border-radius:9px;padding:11px 13px;font-family:inherit;font-size:.95rem;color:#322a22;background:#fdfbf6;transition:.18s}
.field input:focus,.field select:focus,.field textarea:focus{outline:none;border-color:var(--amber);box-shadow:0 0 0 3px rgba(197,100,27,.13)}
.field textarea{resize:vertical;min-height:120px}
.field .err{display:none;color:#a32d2d;font-size:.74rem;margin-top:5px;font-weight:600}
.field.invalid .err{display:block}
.field.invalid input,.field.invalid select,.field.invalid textarea{border-color:#e24b4a;background:#fdf3f2}
.frow{display:grid;grid-template-columns:1fr 1fr;gap:14px}
.cform button.btn{width:100%;justify-content:center;margin-top:6px;font-size:1rem;padding:.95em}
.cform .formnote{font-size:.76rem;color:#8a7d6b;margin-top:11px;text-align:center}
.hp-field{position:absolute!important;left:-9999px;width:1px;height:1px;overflow:hidden}
.form-success{display:none;background:#eaf3de;border:1px solid #97c459;color:#27500a;border-radius:12px;padding:20px 22px;font-size:.98rem;line-height:1.5}
.form-success.show{display:block}
.form-success strong{display:block;font-family:'Playfair Display';font-size:1.15rem;color:#173404;margin-bottom:4px}
.info-card{background:#fff;border-radius:16px;padding:6px 26px;box-shadow:0 12px 34px rgba(0,0,0,.09);margin-bottom:20px}

/* ---------- MENU + GALLERY RAIL ---------- */
.menu-layout{display:grid;grid-template-columns:1fr 300px;gap:46px;align-items:start}
.menu-gallery{position:relative}
.menu-gallery h3{font-size:.82rem;color:var(--amber-text);text-transform:uppercase;letter-spacing:.14em;margin-bottom:14px;font-family:'Inter';font-weight:700}
.menu-gallery .gg{display:grid;grid-template-columns:1fr 1fr;gap:11px}
.menu-gallery .gg img{width:100%;height:118px;object-fit:cover;border-radius:11px;box-shadow:0 8px 20px rgba(0,0,0,.13);transition:.2s}
.menu-gallery .gg img:hover{transform:scale(1.03)}
.menu-gallery .gg img.wide{grid-column:span 2;height:160px}
.menu-gallery .cap{font-size:.78rem;color:#8a7d6b;margin-top:12px;text-align:center;font-style:italic}

/* ---------- SPECIALS BOARD ---------- */
.specials-sec{background:var(--cream-2);padding:72px 0}
.specials-head{text-align:center;max-width:680px;margin:0 auto 36px}
.specials-head h2{font-size:clamp(2rem,4vw,2.8rem);margin:10px 0 12px}
.specials-head p{color:#5e5346;font-size:1.02rem}
.board{background:linear-gradient(160deg,#241c16,#15100b);border:1px solid var(--line);border-radius:18px;box-shadow:var(--shadow);padding:40px 36px;max-width:940px;margin:0 auto;position:relative;overflow:hidden}
.board::before{content:"";position:absolute;inset:10px;border:1px dashed rgba(217,154,78,.32);border-radius:12px;pointer-events:none}
/* Specials as a weekly schedule: one full-width row per day (day name on the
   left, that day's items on the right). Stays aligned and symmetric no matter
   how many items a day has, with no dead column space. */
.specials-board{position:relative}
.day-row{display:grid;grid-template-columns:165px 1fr;gap:10px 32px;padding:20px 2px;border-top:1px dashed rgba(217,154,78,.3)}
.day-row:first-child{border-top:none;padding-top:2px}
.day-row .day-label{font-family:'Caveat',cursive;color:var(--gold);font-size:1.95rem;font-weight:700;line-height:1.05;margin:0}
.day-items{min-width:0}
.day-items .sp-cat{font-family:'Inter';font-weight:700;letter-spacing:.14em;text-transform:uppercase;font-size:.64rem;color:var(--amber-lt);margin:13px 0 1px}
.day-items > .sp-cat:first-child{margin-top:0}
.day-items .sp-line{display:flex;justify-content:space-between;align-items:baseline;gap:14px;margin-top:8px}
.day-items > .sp-line:first-child{margin-top:0}
.day-items .sp-item{font-family:'Playfair Display',serif;color:#fff;font-weight:700;font-size:1.06rem;line-height:1.25}
.day-items .sp-price{color:var(--gold);font-family:'Playfair Display',serif;font-weight:700;font-size:1rem;white-space:nowrap;flex:none}
.day-items .sp-note{color:var(--stone);font-size:.85rem;margin-top:1px;line-height:1.4}
.day-items .kids-free{display:inline-flex;align-items:center;gap:.5em;margin-top:14px;background:rgba(197,100,27,.18);border:1px solid rgba(224,138,60,.45);color:#f1c79c;font-weight:600;font-size:.8rem;padding:7px 13px;border-radius:999px;line-height:1.2}
.day-items .kids-free .ic{color:var(--gold);width:16px;height:16px;flex:none}
@media(max-width:600px){
  .day-row{grid-template-columns:1fr;gap:6px;padding:18px 2px}
  .day-row .day-label{font-size:1.7rem}
}
.specials-cta{text-align:center;margin-top:30px}
.specials-note{text-align:center;color:#8a7d6b;font-size:.8rem;margin-top:14px}

/* ---------- FOOTER ---------- */
footer{background:#100c08;color:var(--cream-2);padding:60px 0 26px}
.foot-grid{display:grid;grid-template-columns:1.4fr 1fr 1fr;gap:40px;padding-bottom:40px;border-bottom:1px solid var(--line)}
footer .brand .bt{color:#fff}
footer h4{color:#fff;font-family:'Inter';font-weight:700;letter-spacing:.1em;text-transform:uppercase;font-size:.8rem;margin-bottom:16px}
footer a{color:var(--cream-2);display:block;padding:5px 0;font-size:.92rem;cursor:pointer}
footer a:hover{color:var(--amber-lt)}
footer p.desc{font-size:.92rem;color:var(--stone);margin-top:14px;max-width:300px}
.foot-bottom{display:flex;align-items:center;flex-wrap:wrap;gap:10px 18px;padding-top:22px;font-size:.82rem;color:var(--stone)}
.foot-copy{margin-right:auto}
.foot-social{display:flex;gap:10px;align-items:center;order:1}
.foot-social a{display:inline-flex;align-items:center;justify-content:center;width:40px;height:40px;border-radius:50%;background:rgba(245,239,227,.07);border:1px solid var(--line);color:var(--cream-2);padding:0;transition:.2s}
.foot-social a:hover{background:var(--amber);border-color:var(--amber);color:#fff;transform:translateY(-2px)}
.foot-social .ic{width:18px;height:18px}
/* small "Website by Ridgeline Marketing" credit, tucked into the bottom-right
   corner of the footer (order:2 puts it after the social icon). */
.foot-credit{order:2;font-size:.78rem;color:var(--stone);letter-spacing:.02em}
.foot-credit a{color:var(--cream-2);font-weight:600;border-bottom:1px solid rgba(245,239,227,.22);padding-bottom:1px;transition:.18s}
.foot-credit a:hover{color:var(--amber-lt);border-color:var(--amber-lt)}
/* Mobile footer: stack into one centered column so the brand, link lists and
   bottom row line up symmetrically instead of cramming into 3 uneven columns. */
@media(max-width:700px){
  .foot-grid{grid-template-columns:1fr;gap:30px;text-align:center;padding-bottom:32px}
  footer .brand{justify-content:center}
  footer .foot-hours{display:flex;justify-content:center;flex-wrap:wrap;gap:.1em .45em}
  .foot-bottom{justify-content:center;text-align:center;gap:8px 16px}
  .foot-copy{margin-right:0}
  .foot-social{order:0}
  .foot-credit{order:0}
}

/* ==========================================================================
   SITE INTERACTIONS (site.js) — sticky-header state, nav drawer, status chip,
   scroll reveal, menu chip bar, event modal. Uses the existing design tokens.
   ========================================================================== */

/* sticky-header scroll state: solidify + lift once the page is scrolled */
header.nav{transition:background .25s ease,box-shadow .25s ease,border-color .25s ease}
header.nav.is-scrolled{background:rgba(15,11,7,.98);box-shadow:0 10px 30px rgba(0,0,0,.35)}

/* hamburger toggle (hidden on desktop; shown in the drawer breakpoint below) */
.nav-toggle{display:none;align-items:center;justify-content:center;width:46px;height:42px;border:1px solid var(--line);border-radius:10px;background:rgba(255,255,255,.05);cursor:pointer;color:var(--cream);flex:none}
.nav-toggle:hover{background:rgba(255,255,255,.1)}
.nav-toggle-bars,.nav-toggle-bars::before,.nav-toggle-bars::after{display:block;width:22px;height:2px;background:currentColor;border-radius:2px;transition:transform .25s ease,opacity .2s ease}
.nav-toggle-bars{position:relative}
.nav-toggle-bars::before,.nav-toggle-bars::after{content:"";position:absolute;left:0}
.nav-toggle-bars::before{top:-7px}
.nav-toggle-bars::after{top:7px}
.nav-toggle[aria-expanded="true"] .nav-toggle-bars{background:transparent}
.nav-toggle[aria-expanded="true"] .nav-toggle-bars::before{transform:translateY(7px) rotate(45deg)}
.nav-toggle[aria-expanded="true"] .nav-toggle-bars::after{transform:translateY(-7px) rotate(-45deg)}

/* drawer backdrop (only visible when the drawer is open on mobile) */
.drawer-backdrop{position:fixed;inset:0;background:rgba(8,5,3,.55);backdrop-filter:blur(2px);opacity:0;pointer-events:none;transition:opacity .25s ease;z-index:110}
.drawer-backdrop.is-open{opacity:1;pointer-events:auto}

/* live OPEN NOW / CLOSED status chip (hidden until site.js computes status;
   static hours text remains as the no-JS / crawler fallback). */
.status-chip{display:none;align-items:center;gap:.45em;font-weight:600;white-space:nowrap}
.status-chip.is-open,.status-chip.is-closed{display:inline-flex}
.status-chip .sc-dot{width:9px;height:9px;border-radius:50%;background:var(--stone);flex:none}
.status-chip.is-open .sc-dot{background:#4ec06a;box-shadow:0 0 0 3px rgba(78,192,106,.22)}
.status-chip.is-closed .sc-dot{background:#e0664a;box-shadow:0 0 0 3px rgba(224,102,74,.20)}
.status-chip [data-status-label]{font-weight:700}
.status-chip [data-status-detail]{opacity:.78;font-weight:500}
.status-chip.is-open [data-status-label]{color:#7fdc93}
/* when the live chip is showing, hide the redundant static hours next to it */
.status-chip.is-open ~ .tb-hours-static,.status-chip.is-closed ~ .tb-hours-static,
.status-chip.is-open ~ .foot-hours-static,.status-chip.is-closed ~ .foot-hours-static{display:none}
.foot-hours{padding:5px 0;font-size:.92rem;color:var(--cream-2)}
.foot-hours .status-chip.is-closed [data-status-label]{color:#f0a08c}

/* scroll-reveal: only hide content when JS is on AND motion is allowed, so
   JS-off and reduced-motion visitors always see everything immediately. */
@media (prefers-reduced-motion:no-preference){
  html.js .reveal{opacity:0;transform:translateY(20px);transition:opacity .6s ease,transform .6s ease}
  html.js .reveal.is-in{opacity:1;transform:none}
}

/* ---------- MENU: STICKY JUMP-TO-SECTION CHIP BAR ---------- */
.menu-chipbar{position:sticky;top:74px;z-index:40;background:rgba(245,239,227,.94);backdrop-filter:blur(8px);border-bottom:1px solid rgba(0,0,0,.08);box-shadow:0 6px 16px rgba(0,0,0,.05)}
.menu-chipbar .wrap{display:flex;gap:8px;overflow-x:auto;padding-top:12px;padding-bottom:12px;scrollbar-width:thin;-webkit-overflow-scrolling:touch}
.menu-chipbar a{flex:none;display:inline-block;padding:7px 15px;border-radius:999px;background:#fff;border:1px solid rgba(0,0,0,.1);color:#4d4337;font-size:.86rem;font-weight:600;letter-spacing:.01em;transition:.18s;white-space:nowrap}
.menu-chipbar a:hover{border-color:var(--amber);color:var(--amber-text)}
.menu-chipbar a.is-active{background:var(--amber);border-color:var(--amber);color:#fff}
.menu-cat[id]{scroll-margin-top:140px}
.menu-cat h2:focus-visible{outline:3px solid var(--amber-lt);outline-offset:4px;border-radius:4px}

/* ---------- EVENT POP-UP (dormant; built by site.js only when enabled) ---------- */
.aj-modal-backdrop{position:fixed;inset:0;z-index:200;display:flex;align-items:center;justify-content:center;padding:24px;background:rgba(10,7,4,.6);backdrop-filter:blur(3px);animation:aj-fade .25s ease}
.aj-modal{position:relative;max-width:440px;width:100%;background:linear-gradient(160deg,#241c16,#15100b);color:var(--cream);border:1px solid var(--line);border-radius:18px;box-shadow:var(--shadow);padding:34px 32px 32px;text-align:center;animation:aj-rise .28s ease}
.aj-modal h2{color:#fff;font-size:1.6rem;margin-bottom:10px}
.aj-modal p{color:var(--cream-2);font-size:1rem;margin-bottom:22px}
.aj-modal .btn{justify-content:center}
.aj-modal-close{position:absolute;top:10px;right:14px;background:transparent;border:none;color:var(--stone);font-size:1.8rem;line-height:1;cursor:pointer;padding:4px 8px;border-radius:8px}
.aj-modal-close:hover{color:#fff}
@keyframes aj-fade{from{opacity:0}to{opacity:1}}
@keyframes aj-rise{from{opacity:0;transform:translateY(14px)}to{opacity:1;transform:none}}
@media (prefers-reduced-motion:reduce){.aj-modal-backdrop,.aj-modal{animation:none}}

/* ---------- MOBILE QUICK-ACTION BAR ---------- */
.mobile-bar{display:none}
.mobile-hours{display:none}

/* ---------- RESPONSIVE ---------- */
@media(max-width:900px){
  .menu-layout{grid-template-columns:1fr}
  .menu-gallery{position:static;margin-top:36px}
  .menu-gallery .gg img{height:150px}
  .nav .wrap{justify-content:space-between;gap:12px}
  .nav-toggle{display:inline-flex}
  /* Drawer slides in from the LEFT. An off-LEFT fixed element (translateX(-100%))
     does NOT create horizontal page overflow, so no overflow-x clip is needed on the
     root — which avoids the iOS Safari "overflow:clip freezes vertical scroll" bug. */
  nav.links{position:fixed;inset:0 auto 0 0;width:min(82vw,320px);height:100dvh;max-height:100vh;flex-direction:column;align-items:stretch;justify-content:flex-start;gap:4px;padding:88px 18px 28px;background:#15100b;border-right:1px solid var(--line);box-shadow:12px 0 40px rgba(0,0,0,.5);transform:translateX(-100%);transition:transform .28s ease;z-index:120;overflow-y:auto}
  nav.links.is-open{transform:translateX(0)}
  nav.links a{font-size:1.05rem;padding:.75em .85em;width:100%;border-radius:10px}
  nav.links a[aria-current="page"]{background:rgba(197,100,27,.16)}
  .hero .wrap,.story,.cat-grid,.contact-grid{grid-template-columns:1fr;gap:34px}
  .dish-grid,.infogrid,.rev-grid,.tgrid{grid-template-columns:1fr 1fr}
  .mlist{grid-template-columns:1fr}
  .hero-photo{max-width:380px;aspect-ratio:4/5;margin:0 auto}
}
@media(max-width:620px){.board{padding:30px 22px}}
@media(max-width:700px){
  .topbar{display:none}
  .mobile-hours{display:flex;align-items:center;justify-content:center;gap:.5em;background:#120e0a;color:var(--cream-2);font-size:.78rem;font-weight:600;letter-spacing:.02em;padding:8px 14px;text-align:center;border-bottom:1px solid var(--line)}
  .mobile-hours .ic{width:15px;height:15px;color:var(--gold);flex:none}
  .mobile-hours b{color:#fff;font-weight:700}
  .mobile-bar{display:grid;grid-template-columns:repeat(3,1fr);position:fixed;left:0;right:0;bottom:0;z-index:90;background:#120e0a;border-top:1px solid var(--line);box-shadow:0 -6px 20px rgba(0,0,0,.34)}
  .mobile-bar a{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:3px;padding:9px 4px;color:var(--cream-2);font-size:.7rem;font-weight:700;letter-spacing:.03em;text-transform:uppercase}
  .mobile-bar a + a{border-left:1px solid rgba(245,239,227,.1)}
  .mobile-bar a .ic{width:21px;height:21px;color:var(--gold)}
  .mobile-bar a:active{background:rgba(255,255,255,.07)}
  body{padding-bottom:58px}
}
@media(max-width:560px){
  .dish-grid,.infogrid,.rev-grid,.tgrid,.about-strip{grid-template-columns:1fr}
  section{padding:60px 0}
}

/* ---------- MENU: keep everything inside the phone, no sideways scroll ----------
   On phones the category headers (h2 + the "Build your own…" note) were forced
   nowrap; their combined min-width pushed the menu column — and every price —
   wider than the viewport, so prices fell off the right edge. Let the header wrap
   (note drops to its own line) and clamp the column so the price always rides
   beside its item, fully visible without horizontal scrolling. */
@media(max-width:700px){
  .menu-layout,.menu-main,.menu-cat,.mlist,.mitem{min-width:0;max-width:100%}
  .menu-cat-head{flex-wrap:wrap;gap:10px 14px;margin-bottom:18px}
  .menu-cat-head h2{font-size:1.55rem;white-space:normal}
  .menu-cat-head .ln{min-width:24px}
  .menu-cat-head .note{white-space:normal;flex:1 0 100%;order:3;margin-top:-2px}
  /* Let a long item name shrink/break instead of forcing the row (and its price)
     past the viewport edge on a sub-360px screen (Pitfall #16 hardening). */
  .mitem .mname{font-size:1.02rem;min-width:0;overflow-wrap:anywhere}
}

/* Reduced motion: the nav drawer, backdrop, and hamburger morph appear
   instantly (no slide/fade) for visitors who opt out of motion. */
@media (prefers-reduced-motion:reduce){
  nav.links,.drawer-backdrop,
  .nav-toggle-bars,.nav-toggle-bars::before,.nav-toggle-bars::after{transition:none}
}

/* END OF STYLESHEET */