/* ===========================================================
   The Artisan — Craft Kitchen | Terrace Bar
   Design system: "Arts District"
   Derived from the brand mark: stark ink block, double rule,
   geometric caps. Warmth comes from bone paper, brass, and
   the terrace green — never from a bright theme accent.
   =========================================================== */

@import url('https://fonts.googleapis.com/css2?family=Jost:wght@300;400;500;600&family=Inter:wght@300;400;500;600&display=swap');

:root {
  --ink: #12110f;
  --ink-soft: #2a2723;
  --bone: #f8f5f0;
  --sand: #ece5da;
  --sand-deep: #ddd3c4;
  --green: #2e4636;
  --green-deep: #22352a;
  --brass: #b4884a;
  --brass-light: #cba566;
  --mut: #6e6459;
  --rule: #d8cfc1;

  --display: 'Jost', 'Futura', 'Century Gothic', sans-serif;
  --body: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;

  --wrap: 1240px;
  --gut: clamp(1.25rem, 4vw, 3.5rem);
}

* { box-sizing: border-box; }

html { scroll-behavior: smooth; }

body {
  margin: 0;
  background: var(--bone);
  color: var(--ink);
  font-family: var(--body);
  font-size: 17px;
  line-height: 1.7;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}

img { max-width: 100%; display: block; }
a { color: inherit; }

.wrap { max-width: var(--wrap); margin: 0 auto; padding: 0 var(--gut); }
.wrap-wide { max-width: 1600px; margin: 0 auto; padding: 0 var(--gut); }

/* ---------- Type ---------- */

h1, h2, h3, h4 {
  font-family: var(--display);
  font-weight: 400;
  line-height: 1.08;
  letter-spacing: -0.015em;
  margin: 0;
}

h1 { font-size: clamp(2.6rem, 6.5vw, 5.2rem); }
h2 { font-size: clamp(2rem, 4.4vw, 3.4rem); }
h3 { font-size: clamp(1.3rem, 2.2vw, 1.75rem); }

p { margin: 0 0 1.1em; }
p:last-child { margin-bottom: 0; }

.lede {
  font-size: clamp(1.08rem, 1.6vw, 1.3rem);
  line-height: 1.65;
  color: var(--ink-soft);
}

/* Eyebrow: numbered section marker, brand-derived */
.eyebrow {
  font-family: var(--display);
  font-size: 0.72rem;
  font-weight: 500;
  letter-spacing: 0.26em;
  text-transform: uppercase;
  color: var(--brass);
  display: flex;
  align-items: center;
  gap: 0.85rem;
  margin: 0 0 1.4rem;
}
.eyebrow::after {
  content: '';
  flex: 1;
  height: 1px;
  background: var(--rule);
  max-width: 90px;
}
.eyebrow.center { justify-content: center; }
.eyebrow.center::before {
  content: '';
  flex: 1;
  height: 1px;
  background: var(--rule);
  max-width: 90px;
}

/* The double-rule motif, lifted straight off the logo */
.rules { margin: 0; border: 0; }
.rules::before,
.rules::after {
  content: '';
  display: block;
  background: var(--ink);
}
.rules::before { height: 2px; margin-bottom: 4px; }
.rules::after { height: 6px; }
.rules.brass::before, .rules.brass::after { background: var(--brass); }
.rules.light::before, .rules.light::after { background: rgba(255,255,255,.55); }

/* ---------- Buttons ---------- */

.btn {
  display: inline-flex;
  align-items: center;
  gap: .6rem;
  font-family: var(--display);
  font-size: .78rem;
  font-weight: 500;
  letter-spacing: .18em;
  text-transform: uppercase;
  text-decoration: none;
  padding: 1.05rem 2.1rem;
  border: 1px solid var(--ink);
  background: var(--ink);
  color: var(--bone);
  transition: background .18s ease, color .18s ease, border-color .18s ease;
  cursor: pointer;
}
.btn:hover { background: var(--brass); border-color: var(--brass); color: var(--ink); }

.btn-ghost { background: transparent; color: var(--ink); }
.btn-ghost:hover { background: var(--ink); color: var(--bone); border-color: var(--ink); }

.btn-light { background: transparent; color: #fff; border-color: rgba(255,255,255,.65); }
.btn-light:hover { background: #fff; color: var(--ink); border-color: #fff; }

.btn-solid-light { background: #fff; color: var(--ink); border-color: #fff; }
.btn-solid-light:hover { background: var(--brass); border-color: var(--brass); color: var(--ink); }

.btn-row { display: flex; flex-wrap: wrap; gap: .85rem; }

/* ---------- Header ---------- */

.topbar {
  background: var(--ink);
  color: rgba(255,255,255,.72);
  font-size: .78rem;
  letter-spacing: .04em;
}
.topbar .wrap-wide {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  min-height: 42px;
  flex-wrap: wrap;
}
.topbar a { text-decoration: none; }
.topbar a:hover { color: var(--brass-light); }
.topbar-info { display: flex; gap: 1.6rem; flex-wrap: wrap; align-items: center; }
.topbar-social { display: flex; gap: 1.1rem; align-items: center; }

/* backdrop-filter must NOT sit on the header itself: it would make the header
   a containing block for the fixed-position mobile drawer, clipping the drawer
   to the header's height. Put the effect on a pseudo-element instead. */
.site-header {
  position: sticky;
  top: 0;
  z-index: 60;
  background: transparent;
  border-bottom: 1px solid var(--rule);
}
.site-header::before {
  content: '';
  position: absolute; inset: 0; z-index: -1;
  background: rgba(248,245,240,.94);
  backdrop-filter: blur(10px);
}
.site-header .wrap-wide {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 2rem;
  min-height: 84px;
}
/* The supplied lockup is stacked and goes illegible at header size, so the
   header rebuilds it horizontally from the same artwork: mark + wordmark. */
.brand { display: flex; align-items: center; gap: 1.05rem; flex-shrink: 0; }
.brand-mark { height: 48px; width: auto; }
.brand-word { height: 25px; width: auto; }

.nav { display: flex; align-items: center; gap: 2.1rem; }
.nav a {
  font-family: var(--display);
  font-size: .8rem;
  font-weight: 500;
  letter-spacing: .16em;
  text-transform: uppercase;
  text-decoration: none;
  color: var(--ink);
  padding: .4rem 0;
  border-bottom: 1px solid transparent;
  transition: border-color .18s, color .18s;
  white-space: nowrap;
}
.nav a:hover { color: var(--brass); }
.nav a[aria-current="page"] { border-bottom-color: var(--brass); }
/* .nav a sets colour on every link, so the CTA must reassert its own. */
.nav .btn { padding: .8rem 1.5rem; color: var(--bone); border-bottom-color: var(--ink); }
.nav .btn:hover { color: var(--ink); }

.nav-toggle {
  display: none;
  background: none;
  border: 0;
  padding: .5rem;
  cursor: pointer;
  color: var(--ink);
}
.nav-toggle svg { display: block; }
.nav-toggle .ico-close { display: none; }
.nav-toggle[aria-expanded="true"] .ico-open { display: none; }
.nav-toggle[aria-expanded="true"] .ico-close { display: block; }

/* ---------- Hero ---------- */

.hero { position: relative; background: var(--ink); }
.hero-media { position: relative; height: clamp(460px, 74vh, 760px); overflow: hidden; }
.hero-media img { width: 100%; height: 100%; object-fit: cover; }
/* Two scrims: a vertical one for the header/footer edges, and a horizontal
   one because the copy is left-aligned — bright photos (the catering and
   events heroes) wash out the eyebrow and body text without it. */
.hero-media::after {
  content: '';
  position: absolute; inset: 0;
  background:
    linear-gradient(to right, rgba(18,17,15,.78) 0%, rgba(18,17,15,.55) 38%, rgba(18,17,15,.12) 72%, rgba(18,17,15,.05) 100%),
    linear-gradient(to bottom, rgba(18,17,15,.5) 0%, rgba(18,17,15,.2) 45%, rgba(18,17,15,.6) 100%);
}
.hero-inner {
  position: absolute; inset: 0; z-index: 2;
  display: flex; align-items: center;
}
.hero-inner .wrap { width: 100%; }
.hero-copy { max-width: 720px; color: #fff; }
.hero-copy .eyebrow { color: var(--brass-light); }
.hero-copy .eyebrow::after { background: rgba(255,255,255,.3); }
.hero-copy h1 { color: #fff; margin-bottom: 1.3rem; }
.hero-copy p { color: rgba(255,255,255,.86); font-size: clamp(1.05rem,1.5vw,1.25rem); max-width: 540px; }
.hero-copy .btn-row { margin-top: 2.2rem; }

/* Page hero (interior pages) — shorter */
.page-hero .hero-media { height: clamp(320px, 46vh, 460px); }
.page-hero .hero-copy h1 { margin-bottom: .8rem; }

/* ---------- Info strip ---------- */

.strip { background: var(--ink); color: var(--bone); }
.strip .wrap { display: grid; grid-template-columns: repeat(3, 1fr); }
.strip-item { padding: 2.4rem 1.6rem; border-right: 1px solid rgba(255,255,255,.13); }
.strip-item:first-child { padding-left: 0; }
.strip-item:last-child { border-right: 0; padding-right: 0; }
.strip-item h4 {
  font-size: .72rem; letter-spacing: .24em; text-transform: uppercase;
  color: var(--brass-light); font-weight: 500; margin-bottom: .7rem;
}
.strip-item p { font-size: .98rem; color: rgba(255,255,255,.82); line-height: 1.6; }
.strip-item a { color: #fff; text-decoration: none; border-bottom: 1px solid rgba(255,255,255,.3); }
.strip-item a:hover { border-color: var(--brass-light); color: var(--brass-light); }

/* ---------- Sections ---------- */

section { padding: clamp(4rem, 9vw, 7.5rem) 0; }
section.tight { padding: clamp(3rem, 6vw, 5rem) 0; }
.bg-sand { background: var(--sand); }
.bg-ink { background: var(--ink); color: var(--bone); }
.bg-ink h2, .bg-ink h3 { color: #fff; }
.bg-ink .lede, .bg-ink p { color: rgba(255,255,255,.8); }
.bg-ink .eyebrow::after, .bg-ink .eyebrow::before { background: rgba(255,255,255,.25); }
.bg-green { background: var(--green); color: #fff; }
.bg-green h2, .bg-green h3 { color: #fff; }
.bg-green p, .bg-green .lede { color: rgba(255,255,255,.84); }
.bg-green .eyebrow { color: var(--brass-light); }
.bg-green .eyebrow::after, .bg-green .eyebrow::before { background: rgba(255,255,255,.25); }

/* Two-column editorial split */
.split {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: clamp(2.5rem, 6vw, 5.5rem);
  align-items: center;
}
.split.reverse .split-media { order: 2; }
.split-copy h2 { margin-bottom: 1.3rem; }
.split-copy .btn-row { margin-top: 2rem; }
.split-media img { width: 100%; height: 100%; object-fit: cover; aspect-ratio: 4/5; }
.split-media.wide img { aspect-ratio: 4/3; }

/* Stacked/offset image pair — editorial signature */
.stack { position: relative; }
.stack img:first-child { width: 84%; aspect-ratio: 4/5; object-fit: cover; }
.stack img:last-child {
  position: absolute; right: 0; bottom: -12%;
  width: 52%; aspect-ratio: 1/1; object-fit: cover;
  border: 10px solid var(--bone);
}
.bg-sand .stack img:last-child { border-color: var(--sand); }

.section-head { max-width: 720px; margin-bottom: clamp(2.5rem, 5vw, 4rem); }
.section-head.center { margin-left: auto; margin-right: auto; text-align: center; }
.section-head h2 { margin-bottom: 1.1rem; }

/* ---------- Cards ---------- */

.cards { display: grid; grid-template-columns: repeat(3, 1fr); gap: clamp(1.5rem, 3vw, 2.5rem); }
.cards.two { grid-template-columns: repeat(2, 1fr); }

.card { background: var(--bone); display: flex; flex-direction: column; text-decoration: none; color: inherit; }
.bg-sand .card { background: var(--bone); }
.card-media { overflow: hidden; aspect-ratio: 3/2; }
.card-media img { width: 100%; height: 100%; object-fit: cover; transition: transform .6s cubic-bezier(.2,.7,.3,1); }
.card:hover .card-media img { transform: scale(1.05); }
.card-body { padding: 1.9rem 1.7rem 2.1rem; flex: 1; display: flex; flex-direction: column; }
.card-body h3 { margin-bottom: .7rem; }
.card-body p { font-size: .97rem; color: var(--mut); }
.card-link {
  margin-top: auto; padding-top: 1.3rem;
  font-family: var(--display); font-size: .74rem; font-weight: 500;
  letter-spacing: .2em; text-transform: uppercase; color: var(--brass);
}
.card:hover .card-link { color: var(--ink); }

/* ---------- Menu ---------- */

.menu-section { margin-bottom: clamp(3rem, 6vw, 5rem); }
.menu-section > .rules { margin-bottom: 2.2rem; }
.menu-head { display: flex; align-items: baseline; justify-content: space-between; gap: 1.5rem; flex-wrap: wrap; margin-bottom: 1rem; }
.menu-head h2 { font-size: clamp(1.7rem, 3.2vw, 2.5rem); }
.menu-note {
  font-family: var(--display); font-size: .76rem; letter-spacing: .2em;
  text-transform: uppercase; color: var(--brass);
}

.menu-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 0 clamp(2.5rem, 6vw, 5rem); }

.item { padding: 1.35rem 0; border-bottom: 1px solid var(--rule); }
.item:last-child { border-bottom: 0; }
.item-head { display: flex; align-items: baseline; gap: .9rem; margin-bottom: .35rem; }
.item-name {
  font-family: var(--display); font-size: 1.13rem; font-weight: 500;
  letter-spacing: .01em; flex-shrink: 0;
}
.item-dots { flex: 1; border-bottom: 1px dotted var(--sand-deep); transform: translateY(-4px); min-width: 18px; }
.item-price { font-family: var(--display); font-size: 1.05rem; font-weight: 500; color: var(--brass); white-space: nowrap; }
.item-desc { font-size: .93rem; line-height: 1.6; color: var(--mut); margin: 0; }

/* Simple list (soups, sides) */
.simple-list { list-style: none; margin: 0; padding: 0; }
.simple-list li {
  display: flex; align-items: baseline; gap: .8rem;
  padding: .72rem 0; border-bottom: 1px solid var(--rule);
  font-size: 1rem;
}
.simple-list li:last-child { border-bottom: 0; }
.simple-list .n { font-family: var(--display); font-weight: 500; }
.simple-list .d { flex: 1; border-bottom: 1px dotted var(--sand-deep); transform: translateY(-4px); min-width: 14px; }
.simple-list .p { font-family: var(--display); font-weight: 500; color: var(--brass); white-space: nowrap; }
.simple-list .day { color: var(--mut); font-size: .95rem; }

/* Feature panel (manager special) */
.panel { background: var(--ink); color: var(--bone); padding: clamp(2.2rem, 5vw, 3.5rem); }
.panel h3 { color: #fff; margin-bottom: .6rem; }
.panel .price-big {
  font-family: var(--display); font-size: clamp(2rem,4vw,2.8rem);
  color: var(--brass-light); line-height: 1; margin-bottom: 1.4rem;
}
.panel ul { list-style: none; margin: 0; padding: 0; columns: 2; column-gap: 2.5rem; }
.panel li {
  padding: .5rem 0; color: rgba(255,255,255,.85); font-size: .97rem;
  border-bottom: 1px solid rgba(255,255,255,.12); break-inside: avoid;
}

/* Menu nav pills */
.menu-nav { display: flex; flex-wrap: wrap; gap: .6rem; margin-top: 2rem; }
.menu-nav a {
  font-family: var(--display); font-size: .74rem; font-weight: 500;
  letter-spacing: .16em; text-transform: uppercase; text-decoration: none;
  padding: .7rem 1.25rem; border: 1px solid var(--rule); color: var(--ink);
  transition: all .18s;
}
.menu-nav a:hover { background: var(--ink); color: var(--bone); border-color: var(--ink); }

/* ---------- Gallery ---------- */

.gallery { display: grid; grid-template-columns: repeat(12, 1fr); gap: clamp(.6rem, 1.4vw, 1.1rem); }
.gallery img { width: 100%; height: 100%; object-fit: cover; }
.g-6 { grid-column: span 6; aspect-ratio: 3/2; }
.g-4 { grid-column: span 4; aspect-ratio: 1/1; }
.g-8 { grid-column: span 8; aspect-ratio: 16/9; }
.g-3 { grid-column: span 3; aspect-ratio: 3/4; }
.g-12 { grid-column: span 12; aspect-ratio: 21/9; }

/* ---------- Facts / list blocks ---------- */

.facts { list-style: none; margin: 2rem 0 0; padding: 0; }
.facts li {
  padding: .95rem 0 .95rem 1.9rem;
  border-bottom: 1px solid var(--rule);
  position: relative;
  font-size: 1.02rem;
}
.facts li::before {
  content: ''; position: absolute; left: 0; top: 1.5rem;
  width: 9px; height: 9px; background: var(--brass);
}
.bg-green .facts li, .bg-ink .facts li { border-color: rgba(255,255,255,.16); color: rgba(255,255,255,.88); }

/* ---------- Partner blocks ---------- */

.partner {
  display: grid; grid-template-columns: 230px 1fr;
  gap: clamp(2rem, 5vw, 3.5rem); align-items: center;
  padding: clamp(2rem, 4vw, 3rem) 0; border-bottom: 1px solid var(--rule);
}
.partner:last-of-type { border-bottom: 0; }
.partner-logo {
  background: #fff; padding: 1.4rem; display: flex;
  align-items: center; justify-content: center; min-height: 112px;
  border: 1px solid var(--rule);
}
.partner-logo img { max-height: 64px; width: auto; }
.partner h3 { margin-bottom: .9rem; }

/* ---------- Press ---------- */

/* Bordered cards, not a bg+gap grid — an odd item count would otherwise
   leave an empty cell showing the divider colour and read as broken. */
.press-list { display: grid; grid-template-columns: repeat(auto-fit, minmax(205px, 1fr)); gap: 1rem; }
.press-list a {
  background: var(--bone); border: 1px solid var(--rule);
  padding: 1.6rem 1.4rem; text-decoration: none;
  display: flex; flex-direction: column; gap: .45rem; transition: background .2s, border-color .2s;
}
.press-list a:hover { background: #fff; border-color: var(--brass); }
.press-src { font-family: var(--display); font-size: 1.05rem; font-weight: 500; }
.press-meta { font-size: .82rem; color: var(--mut); letter-spacing: .04em; }

/* ---------- Contact / form ---------- */

.contact-grid { display: grid; grid-template-columns: 1fr 1.15fr; gap: clamp(2.5rem, 6vw, 5rem); align-items: start; }

.contact-block { margin-bottom: 2.5rem; }
.contact-block h3 { font-size: 1.15rem; margin-bottom: .8rem; }
.contact-block p { font-size: 1rem; color: var(--mut); }
.contact-block a { color: var(--ink); text-decoration: none; border-bottom: 1px solid var(--brass); }
.contact-block a:hover { color: var(--brass); }

form { display: grid; gap: 1.2rem; }
.field-row { display: grid; grid-template-columns: 1fr 1fr; gap: 1.2rem; }
label {
  display: block; font-family: var(--display); font-size: .73rem; font-weight: 500;
  letter-spacing: .18em; text-transform: uppercase; color: var(--mut); margin-bottom: .5rem;
}
input, select, textarea {
  width: 100%; padding: .95rem 1.05rem;
  border: 1px solid var(--rule); background: var(--bone);
  font-family: var(--body); font-size: 1rem; color: var(--ink);
  border-radius: 0;
}
input:focus, select:focus, textarea:focus { outline: 2px solid var(--brass); outline-offset: -1px; border-color: var(--brass); }
textarea { min-height: 150px; resize: vertical; }
.form-note { font-size: .85rem; color: var(--mut); }

.map-embed { width: 100%; aspect-ratio: 16/10; border: 0; filter: grayscale(1) contrast(1.05); }

/* ---------- CTA band ---------- */

.cta-band { position: relative; }
.cta-band-media { position: absolute; inset: 0; }
.cta-band-media img { width: 100%; height: 100%; object-fit: cover; }
.cta-band-media::after { content: ''; position: absolute; inset: 0; background: rgba(18,17,15,.74); }
.cta-band .wrap { position: relative; z-index: 2; text-align: center; }
.cta-band h2 { color: #fff; margin-bottom: 1.2rem; }
.cta-band p { color: rgba(255,255,255,.82); max-width: 560px; margin: 0 auto 2.2rem; }
.cta-band .btn-row { justify-content: center; }

/* ---------- Footer ---------- */

.site-footer { background: var(--ink); color: rgba(255,255,255,.7); padding: clamp(3.5rem,6vw,5rem) 0 0; }
.footer-grid { display: grid; grid-template-columns: 1.4fr 1fr 1fr 1.2fr; gap: clamp(2rem,4vw,3.5rem); padding-bottom: 3.5rem; }
.site-footer img.f-logo { height: 108px; width: auto; margin-bottom: 1.4rem; }
.site-footer h4 {
  font-family: var(--display); font-size: .74rem; font-weight: 500;
  letter-spacing: .24em; text-transform: uppercase; color: var(--brass-light);
  margin-bottom: 1.2rem;
}
.site-footer p { font-size: .93rem; line-height: 1.75; }
.site-footer ul { list-style: none; margin: 0; padding: 0; }
.site-footer li { margin-bottom: .65rem; }
.site-footer a { color: rgba(255,255,255,.75); text-decoration: none; font-size: .93rem; }
.site-footer a:hover { color: var(--brass-light); }
.footer-bottom {
  border-top: 1px solid rgba(255,255,255,.13);
  padding: 1.8rem 0;
  display: flex; justify-content: space-between; gap: 1rem; flex-wrap: wrap;
  font-size: .82rem; color: rgba(255,255,255,.5);
}
.social-row { display: flex; gap: 1.1rem; }
.social-row a { display: inline-flex; }

/* ---------- Utility ---------- */

.sr-only {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; border: 0;
}
.skip-link {
  position: absolute; left: -9999px; top: 0; z-index: 200;
  background: var(--ink); color: #fff; padding: 1rem 1.5rem;
}
.skip-link:focus { left: 0; }

/* ---------- Reveal on scroll ---------- */

/* Progressive enhancement: content is visible by default and only starts
   hidden when JS is running to bring it back. Without the .js guard, any
   JS failure (or an observer that never fires) leaves sections blank. */
.js .reveal { opacity: 0; transform: translateY(22px); transition: opacity .7s ease, transform .7s ease; }
.js .reveal.in { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) {
  .js .reveal { opacity: 1; transform: none; transition: none; }
  html { scroll-behavior: auto; }
  .card-media img { transition: none; }
}

/* ---------- Responsive ---------- */

@media (max-width: 1000px) {
  .cards { grid-template-columns: repeat(2, 1fr); }
  .footer-grid { grid-template-columns: 1fr 1fr; }
  .partner { grid-template-columns: 1fr; }
  .partner-logo { max-width: 300px; }
}

@media (max-width: 860px) {
  /* Closed drawer must be display:none, not translateX(100%) — an off-screen
     fixed panel still widens the document and gives the page a horizontal
     scrollbar on mobile. Animate it in on open instead. */
  .nav {
    display: none;
    position: fixed; inset: 0 0 0 auto; width: min(80vw, 340px);
    background: var(--bone); flex-direction: column; align-items: flex-start;
    padding: 6rem 2rem 2rem; gap: 1.6rem;
    box-shadow: -14px 0 40px rgba(0,0,0,.14); overflow-y: auto;
  }
  .nav.open { display: flex; animation: navIn .28s ease both; }
  @keyframes navIn { from { transform: translateX(100%); } to { transform: none; } }
  .nav a { font-size: 1rem; }
  .nav .btn { width: 100%; justify-content: center; }
  .nav-toggle { display: block; position: relative; z-index: 70; }
  .split, .contact-grid { grid-template-columns: 1fr; }
  .split.reverse .split-media { order: 0; }
  .split-media img { aspect-ratio: 4/3; }
  .stack img:first-child { width: 100%; aspect-ratio: 4/3; }
  .stack img:last-child { position: static; width: 100%; aspect-ratio: 16/9; border: 0; margin-top: .8rem; }
  .menu-grid { grid-template-columns: 1fr; }
  .strip .wrap { grid-template-columns: 1fr; }
  .strip-item { border-right: 0; border-bottom: 1px solid rgba(255,255,255,.13); padding: 1.8rem 0; }
  .strip-item:last-child { border-bottom: 0; }
  .g-6, .g-4, .g-8, .g-3 { grid-column: span 6; }
  .g-3 { aspect-ratio: 1/1; }
  .panel ul { columns: 1; }
}

@media (max-width: 620px) {
  body { font-size: 16px; }
  .cards, .cards.two { grid-template-columns: 1fr; }
  .footer-grid { grid-template-columns: 1fr; }
  .field-row { grid-template-columns: 1fr; }
  .topbar-info { gap: .9rem; font-size: .74rem; }
  .g-6, .g-4, .g-8, .g-3, .g-12 { grid-column: span 12; aspect-ratio: 4/3; }
  .brand-mark { height: 38px; }
  .brand-word { height: 20px; }
  /* Long dual prices ("Chicken $12 / Beef $14") overflow a narrow viewport
     when the row cannot break. */
  .item-head { flex-wrap: wrap; }
  .item-name, .item-price { white-space: normal; }
  .btn { padding: .95rem 1.6rem; }
}