/* ==========================================================================
   Demo's Greek Food — menu pages
   HTML-only build. Section markers like {{ ... }} note future EE integration
   points but are plain comments here.
   ========================================================================== */

/* Trade Gothic is self-hosted; the Adobe kit remains available for Permanent
   Marker Pro and Myriad Pro. Bebas Neue and Permanent Marker are loaded from
   Google as resilient fallbacks. */
@import url('https://fonts.googleapis.com/css2?family=Bebas+Neue&family=Permanent+Marker&display=swap');

@font-face {
  font-family: 'TradeGothic LT CondEighteen';
  src: url('../fonts/tradegothic/TradeGothicLT-BoldCondTwenty.woff2') format('woff2'),
       url('../fonts/tradegothic/TradeGothicLT-BoldCondTwenty.woff') format('woff');
  font-weight: bold;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: 'TradeGothic LT';
  src: url('../fonts/tradegothic/TradeGothicLT-Oblique.woff2') format('woff2'),
       url('../fonts/tradegothic/TradeGothicLT-Oblique.woff') format('woff');
  font-weight: normal;
  font-style: italic;
  font-display: swap;
}

@font-face {
  font-family: 'TradeGothic LT';
  src: url('../fonts/tradegothic/TradeGothicLT.woff2') format('woff2'),
       url('../fonts/tradegothic/TradeGothicLT.woff') format('woff');
  font-weight: normal;
  font-style: normal;
  font-display: swap;
}

:root {
  color-scheme: light;

  --blue: #1b3aa6;
  --blue-deep: #16307f;
  --gold: #d7a53a;
  --gold-soft: #e9c877;
  --ink: #2c2c2c;
  --ink-bold: #111111;
  --ink-soft: #5a5a5a;
  --paper: #ffffff;
  --scale: #f6f2e6;      /* fish-scale cream band */
  --rule: #cfcabb;

  --trade-gothic: 'TradeGothic LT', 'Myriad Pro', Arial, sans-serif;
  --trade-gothic-condensed: 'TradeGothic LT CondEighteen', 'Arial Narrow', Arial, sans-serif;
  --trade-gothic-compressed: 'TradeGothic LT CondEighteen', 'Arial Narrow', Arial, sans-serif;
  --permanent-marker: 'permanent-marker-pro', 'Permanent Marker', 'Comic Sans MS', cursive;
  --myriad: 'myriad-pro', 'Myriad Pro', Arial, sans-serif;
  --bebas: 'Bebas Neue', 'Bebas PSD', 'Arial Narrow', sans-serif;

  --display: var(--trade-gothic-compressed);
  --script: var(--permanent-marker);
  --body: var(--trade-gothic);

  --wrap: 1120px;
  --gutter: clamp(1.25rem, 4vw, 3rem);
}

*, *::before, *::after { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }

body {
  margin: 0;
  font-family: var(--body);
  color: var(--ink);
  background: var(--paper);
  line-height: 1.55;
  -webkit-font-smoothing: antialiased;
}

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

.wrap { max-width: var(--wrap); margin-inline: auto; padding-inline: var(--gutter); }

.visually-hidden {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}

:focus-visible {
  outline: 3px solid var(--gold);
  outline-offset: 2px;
  border-radius: 2px;
}

/* ==========================================================================
   Top utility bar + header
   ========================================================================== */
.util {
  background: var(--paper);
  font-family: var(--display);
  font-size: .78rem;
  letter-spacing: .12em;
  text-transform: uppercase;
}
.util .wrap {
  display: flex; gap: 1.5rem; justify-content: center; align-items: center;
  padding-block: .55rem;
  flex-wrap: wrap;
}
.util strong { font-weight: 600; }
.util .sep { color: var(--rule); }
.util-links { display: flex; gap: .9rem; }
.util-links a { text-decoration: none; }
.util-links a:hover,
.util-links a:focus-visible { color: var(--blue); }

.site-header {
  position: sticky; top: 0; z-index: 50;
  background: var(--paper);
  border-bottom: 1px solid var(--rule);
}
.site-header .wrap {
  display: flex; align-items: center; justify-content: space-between;
  gap: 1.5rem;
  padding-block: 1rem;
}
.brand img { height: clamp(46px, 7vw, 66px); width: auto; }

.nav-toggle {
  display: none;
  background: none; border: 0; cursor: pointer;
  width: 44px; height: 44px; padding: 8px;
  color: var(--blue);
}
.nav-toggle svg { width: 100%; height: 100%; }

.main-nav ul {
  list-style: none; margin: 0; padding: 0;
  display: flex; gap: clamp(1rem, 3vw, 2.75rem);
}
.main-nav a {
  font-family: var(--display);
  font-weight: 500;
  font-size: 1.06rem;
  letter-spacing: .13em;
  text-transform: uppercase;
  text-decoration: none;
  color: var(--ink);
  padding-block: .35rem;
  border-bottom: 3px solid transparent;
}
.main-nav a:hover,
.main-nav a:focus-visible { color: var(--blue); }
.main-nav a[aria-current="page"] {
  color: var(--blue);
  border-bottom-color: var(--gold);
}

/* ==========================================================================
   Page title + hero banner
   ========================================================================== */
.page-title {
  display:flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  padding-block: clamp(.6rem, 2vw, 1.15rem);
  background: url(../assets/square-pattern.png) repeat;
  margin-top: -10px;
  height: 104px;
}
.page-title h1 {
  font-family: var(--display);
  font-weight: 600;
  letter-spacing: .32em;
  text-transform: uppercase;
  font-size: clamp(1.9rem, 5vw, 3rem);
  color: var(--ink);
  margin: 0;
  text-indent: .32em; /* optical centering for tracked caps */
}

/* Hero photos are 1440x319; show them close to that ratio so nothing important
   is cropped, and let the fish-scale bands above and below frame the image. */
.hero-banner {
  height: clamp(190px, 24vw, 340px);
  overflow: hidden;
}
.hero-banner img { width: 100%; height: 100%; object-fit: cover; object-position: center; }

.scale-band {
  background:url(../assets/bottom-pattern.png) repeat-x;
}

/* ==========================================================================
   Tab selector — octagonal gold frame
   ========================================================================== */
.menu-tabs {
  padding-block: clamp(2rem, 5vw, 3.5rem);
  display: flex; justify-content: center;
}
.menu-tabs nav {
  --notch: 16px;
  border: 2px solid var(--gold);
  padding: .9rem clamp(1rem, 3vw, 2rem);
  clip-path: polygon(
    var(--notch) 0, calc(100% - var(--notch)) 0, 100% var(--notch),
    100% calc(100% - var(--notch)), calc(100% - var(--notch)) 100%,
    var(--notch) 100%, 0 calc(100% - var(--notch)), 0 var(--notch)
  );
  max-width: 100%;
}
.menu-tabs ul {
  list-style: none; margin: 0; padding: 0;
  display: flex; flex-wrap: wrap; justify-content: center;
  gap: clamp(.6rem, 2.5vw, 2rem);
}
.menu-tabs a {
  font-family: var(--display);
  font-weight: 500;
  font-size: clamp(.82rem, 2vw, 1rem);
  letter-spacing: .12em;
  text-transform: uppercase;
  text-decoration: none;
  color: var(--ink);
  white-space: nowrap;
  padding: .25rem .3rem;
}
.menu-tabs a:hover,
.menu-tabs a:focus-visible { color: var(--blue); }
.menu-tabs a[aria-current="page"] {
  color: var(--gold);
  font-weight: 600;
}

/* ==========================================================================
   Menu body
   ========================================================================== */
.menu-body {
  padding-bottom: clamp(3rem, 7vw, 6rem);
  position: relative;
}
.menu-intro {
  max-width: 46ch;
  margin: 0 auto clamp(2rem, 5vw, 3.5rem);
  text-align: center;
  font-style: italic;
  color: var(--ink-soft);
}

/* brush-script section header with wave underline */
.section-head {
  text-align: center;
  margin: clamp(2.5rem, 6vw, 4rem) 0 clamp(1.5rem, 4vw, 2.5rem);
}
.section-head .kicker {
  display: block;
  font-family: var(--display);
  font-weight: 400;
  letter-spacing: .3em;
  text-transform: uppercase;
  font-size: clamp(1rem, 2.6vw, 1.35rem);
  color: var(--blue);
  text-indent: .3em;
  margin-bottom: .1em;
}
.section-head .brush {
  display: block;
  font-family: var(--script);
  font-weight: 700;
  color: var(--blue);
  font-size: clamp(2.4rem, 7vw, 4rem);
  line-height: 1;
}
.section-head .note {
  display: block;
  font-style: italic;
  color: var(--ink-soft);
  font-size: .95rem;
  margin-top: .4rem;
}
.section-head .wave {
  display: block;
  width: min(320px, 70%);
  height: 12px;
  margin: .6rem auto 0;
  color: var(--blue);
}
.section-head.plain .brush {
  font-family: var(--display);
  font-weight: 600;
  letter-spacing: .14em;
  text-transform: uppercase;
  font-size: clamp(1.6rem, 4.5vw, 2.4rem);
  text-indent: .14em;
}
.section-head.plain .brush::before,
.section-head.plain .brush::after {
  content: "\2248"; /* ≈ decorative flourish, mirrors the printed menu */
  color: var(--blue);
  font-weight: 400;
  margin: 0 .5em;
  vertical-align: .1em;
}

/* two-column item grid */
.items {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: clamp(1.5rem, 3vw, 2.5rem) clamp(2rem, 6vw, 5rem);
  max-width: 960px;
  margin-inline: auto;
}
.items.single { grid-template-columns: 1fr; max-width: 640px; }

.item { break-inside: avoid; }
.item-line {
  display: flex;
  align-items: baseline;
  gap: .5rem;
  font-family: var(--display);
  font-weight: 500;
  letter-spacing: .04em;
}
.item-line .name {
  text-transform: lowercase;
  font-size: 1.12rem;
}
.item-line .name.caps { text-transform: uppercase; letter-spacing: .08em; }
.item-line .leader {
  flex: 1;
  border-bottom: 2px dotted var(--rule);
  transform: translateY(-.18em);
  min-width: 1.5rem;
}
.item-line .price {
  font-weight: 600;
  white-space: nowrap;
}
.item .desc {
  font-family: var(--body);
  font-style: italic;
  color: var(--ink-soft);
  font-size: .9rem;
  margin-top: .25rem;
  max-width: 100%;
}

/* multi-price rows (e.g. tarama pint / half-pint) */
.price-rows {
  margin-top: .4rem;
  display: grid;
  gap: .2rem;
  font-size: .88rem;
  color: var(--ink-soft);
}
.price-rows .row {
  display: flex; align-items: baseline; gap: .4rem;
}
.price-rows .row .leader {
  flex: 1; border-bottom: 1px dotted var(--rule);
  transform: translateY(-.28em); min-width: 1rem;
}
.price-rows .row .price { font-weight: 600; color: var(--ink); }

/* size/style variants for wraps (micro / regular / double) */
.variant-row {
  display: flex; flex-wrap: wrap; gap: 1.25rem;
  margin-top: .5rem;
  font-family: var(--display);
  font-size: .95rem;
}
.variant-row span { display: inline-flex; gap: .35rem; }
.variant-row span b { font-weight: 600; }
.variant-row span em {
  font-style: normal; text-transform: uppercase;
  letter-spacing: .08em; color: var(--ink-soft);
}

/* callout box (hand-crafted badge / serving note) */
.menu-note-box {
  border: 1px solid var(--rule);
  padding: clamp(1rem, 3vw, 1.5rem);
  max-width: 360px;
  font-style: italic;
  color: var(--ink-soft);
  font-size: .92rem;
  margin: clamp(2rem, 5vw, 3rem) auto 0;
}

.emphasis-line {
  text-align: center;
  font-family: var(--display);
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--blue);
  margin: clamp(2rem, 5vw, 3rem) 0 1rem;
  font-size: .95rem;
}

/* disclaimers */
.disclaimers {
  max-width: 760px;
  margin: clamp(1rem, 3vw, 2rem) auto 0;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: .25rem 2rem;
  color: var(--blue);
  font-size: .82rem;
  font-style: italic;
}
.disclaimers h2 {
  grid-column: 1 / -1;
  font-family: var(--display);
  font-style: normal;
  font-size: .85rem;
  letter-spacing: .12em;
  margin: 0 0 .25rem;
}
.disclaimers ul { margin: 0; padding-left: 1.1rem; }

/* decorative olive-branch watermark slot (background image from live site) */
.watermark {
  position: absolute;
  right: 2%;
  top: 12%;
  width: min(340px, 30%);
  opacity: .5;
  pointer-events: none;
  z-index: -1;
}

/* ==========================================================================
   Footer
   ========================================================================== */
.site-footer {
  background: var(--blue);
  color: #fff;
  padding-block: clamp(2rem, 5vw, 3rem);
  font-family: var(--display);
}
.site-footer .wrap {
  display: flex; align-items: center; gap: 2rem; flex-wrap: wrap;
  justify-content: space-between;
}
.site-footer .f-brand img {
  height: 58px;
  width: auto;
  /* demo-logo.svg is the blue mark; render it white on the blue footer band. */
  filter: brightness(0) invert(1);
}
.site-footer .f-nav {
  display: flex; gap: 1.5rem;
  letter-spacing: .14em; text-transform: uppercase;
}
.site-footer .f-nav a { text-decoration: none; }
.site-footer .f-nav a:hover,
.site-footer .f-nav a:focus-visible { color: var(--gold-soft); }
.site-footer .f-locations {
  width: 100%;
  text-align: center;
  color: var(--gold-soft);
  font-size: .82rem;
  letter-spacing: .06em;
  border-top: 1px solid rgba(255,255,255,.2);
  padding-top: 1.25rem;
  margin-top: .5rem;
  line-height: 1.9;
}
.site-footer .f-locations a { color: var(--gold-soft); text-decoration: none; }
.site-footer .f-locations a:hover,
.site-footer .f-locations a:focus-visible { color: #fff; }

/* ==========================================================================
   Responsive
   ========================================================================== */
@media (max-width: 860px) {
  .nav-toggle { display: block; }
  /* drop the dangling divider once the utility bar wraps */
  .util .sep { display: none; }
  .util .wrap { gap: .3rem 1.1rem; }
  .main-nav {
    position: absolute;
    left: 0; right: 0; top: 100%;
    background: var(--paper);
    border-bottom: 1px solid var(--rule);
    display: none;
  }
  .main-nav.open { display: block; }
  .main-nav ul {
    flex-direction: column;
    gap: 0;
    padding: .5rem var(--gutter) 1rem;
  }
  .main-nav a {
    display: block;
    padding-block: .75rem;
    border-bottom: 1px solid var(--rule);
  }
  .main-nav a[aria-current="page"] { border-bottom-color: var(--gold); }

  .items, .items.single { grid-template-columns: 1fr; max-width: 480px; }
  .disclaimers { grid-template-columns: 1fr; }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  * { animation-duration: .001ms !important; transition-duration: .001ms !important; }
}

/* The menu renders as a fixed "printed menu" — always the light palette,
   regardless of the viewer's OS theme. */

/* ==========================================================================
   PSD-faithful menu bodies
   The source PSDs contain separate 1440px desktop and 366px mobile artboards.
   The menu bodies keep the embedded artwork and exact artboard rhythm at those
   two reference widths inside fixed containers. The surrounding shell — utility
   bar, header, greek-key pattern, hero image and footer — is full-width and
   fluid, using the shared rules higher up in this file.
   ========================================================================== */
@font-face {
  font-family: "Bebas PSD";
  src: url("../assets/BebasNeue-Regular.ttf") format("truetype");
  font-display: swap;
}

.page {
  --blue: #0756a8;
  --gold: #f5b323;
  --ink: #444;
  --ink-soft: #515151;
  --rule: #888;
  --menu-item-size: 20px;
  --menu-price-size: 20px;
  --menu-pita-size: 14px;
  --menu-description-size: 14px;
  --menu-note-size: 12px;
  min-width: 320px;
  color: var(--ink);
  background: #fff;
  font-family: var(--trade-gothic);
  line-height: 1.25;
}

/*
  Full-width fluid shell. `display: contents` dissolves the masthead wrapper so
  the utility bar, header, greek-key pattern, page title and hero image flow as
  full-width <body> siblings, and the sticky header keeps working past the hero.
  The redesigned menu bodies below keep their fixed PSD containers.
*/
.page .page-masthead { display: contents; }

/* Header compacts slightly once the page is scrolled (toggled by the inline script). */
.site-header { transition: box-shadow .25s ease; }
.site-header .wrap { transition: padding .25s ease; }
.site-header .brand img { transition: height .25s ease; }
.site-header.is-scrolled { box-shadow: 0 3px 16px rgba(0, 0, 0, .13); }
.site-header.is-scrolled .wrap { padding-block: .6rem; }
.site-header.is-scrolled .brand img { height: clamp(40px, 5.5vw, 52px); }

.page .menu-tabs {
  width: 100%;
  height: auto;
  padding: clamp(1rem, 3vw, 2rem) 0 clamp(1.5rem, 4vw, 3rem);
  display: block;
}
.page .menu-tabs nav {
  width: min(768px, 100% - 2rem);
  height: auto;
  aspect-ratio: 768 / 83;
  max-width: none;
  margin: 0 auto;
  padding: 0;
  border: 0;
  clip-path: none;
  display: flex;
  align-items: center;
  justify-content: center;
  background: url("../assets/tab-frame-desktop.png") center / 100% 100% no-repeat;
}
.page .menu-tabs ul {
  width: min(650px, 100% - 3rem);
  display: flex;
  flex-wrap: nowrap;
  justify-content: space-between;
  align-items: center;
  gap: clamp(.4rem, 1.5vw, 1rem);
}
.page .menu-tabs a {
  padding: 0;
  font-family: var(--bebas);
  font-size: clamp(13px, 2.7vw, 25px);
  font-weight: 400;
  line-height: 1;
  letter-spacing: .015em;
  color: #494949;
  white-space: nowrap;
}
.page .menu-tabs a[aria-current="page"] {
  color: #494949;
  font-weight: 400;
  text-shadow: 2px 2px 0 rgba(245,179,35,.55);
}

.page .menu-body {
  position: relative;
  padding: 0;
  overflow: hidden;
}
.page .menu-body > .wrap {
  position: relative;
  width: 932px;
  max-width: none;
  height: 100%;
  margin: 0 auto;
  padding: 0;
}
.page .menu-body section { position: relative; z-index: 1; }
.page .menu-body .items,
.page .menu-body .items.single {
  width: 100%;
  max-width: none;
  margin: 0;
  gap: 10px 29px;
  grid-template-columns: repeat(2, 451px);
}
.page .item-line {
  gap: 5px;
  font-family: var(--trade-gothic-compressed);
  font-size: var(--menu-item-size);
  font-weight: 700;
  line-height: 1.15;
  letter-spacing: .015em;
}
.page .item-line .name {
  font-size: inherit;
  font-weight: 700;
  text-transform: lowercase;
}
.page .item-line .leader,
.page .price-rows .row .leader {
  border-bottom: 2px dotted #777;
  transform: translateY(-3px);
}
.page .item .desc {
  margin: 3px 0 0;
  color: #4c4c4c;
  font-family: var(--trade-gothic);
  font-size: var(--menu-description-size);
  font-style: italic;
  line-height: 1.25;
}
.page .price-rows {
  margin-top: 4px;
  gap: 1px;
  color: #444;
  font-size: var(--menu-description-size);
  line-height: 1.2;
}
.page .price-rows .row { gap: 4px; }
.page .variant-row {
  margin-top: 4px;
  gap: 10px;
  font-size: var(--menu-description-size);
}
.page :is(.item-line .price, .price-rows .price, .pp .price, .variant-row b),
.page-lunch-dinner .appetizers .cell .amt {
  font-family: var(--trade-gothic-compressed);
  font-size: var(--menu-price-size);
  font-style: normal;
  font-weight: 700;
  line-height: 1;
}

/* Embedded PSD heading art replaces font approximations without sacrificing headings in the DOM. */
.page .asset-heading,
.page .menu-body section > .section-head {
  background-position: center;
  background-repeat: no-repeat;
  background-size: contain;
}
.page .menu-body section > .section-head > .kicker,
.page .menu-body section > .section-head > .brush,
.page .menu-body section > .section-head > .wave {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
  border: 0;
}

.page .watermark {
  pointer-events: none;
  z-index: 0;
  max-width: none;
  opacity: .24;
}
/* denser engravings dialled back so every page's watermark reads the same weight */
.page-kids .watermark { opacity: .14; }
.page-lunch-dinner .watermark { opacity: .17; }
.page .emphasis-line {
  margin: 0;
  color: #004b9b;
  font-family: var(--trade-gothic);
  font-size: 13px;
  font-style: italic;
  letter-spacing: .015em;
  line-height: 1;
}
.page .disclaimers {
  margin: 0;
  color: #004b9b;
  font-family: var(--trade-gothic);
  font-size: 12px;
  font-style: italic;
  line-height: 1.35;
}
.page .disclaimers h2 {
  font-family: inherit;
  font-size: 12px;
  font-style: italic;
  letter-spacing: 0;
  text-transform: uppercase;
}
.page .disclaimers ul { padding-left: 0; list-style-position: inside; }

/* ==========================================================================
   Lunch Specials / Kid's Menu / Desserts / Beverages — fluid layouts
   Same approach as Lunch & Dinner: one fluid centred column, no fixed heights,
   no absolute layout. Two-column zones engage at >=900px (specials list|note)
   and >=720px (kids/desserts item grids, beverages beer|wine). The mobile
   breakpoint at 640px aligns with the site chrome (responsive-screen.css).
   ========================================================================== */

/* -- shared shell ------------------------------------------------------- */
.page-specials .menu-body,
.page-kids .menu-body,
.page-desserts .menu-body,
.page-beverages .menu-body {
  --pad: clamp(1rem, 5vw, 2.5rem);
  height: auto;
  padding: clamp(1.25rem, 4vw, 2rem) 0 clamp(7rem, 18vw, 9rem);
  overflow-x: clip;
  overflow-y: visible;
}
.page-specials  .menu-body { --maxw: 900px; }
.page-kids      .menu-body { --maxw: 760px; }
.page-desserts  .menu-body { --maxw: 760px; }
.page-beverages .menu-body { --maxw: 900px; }
.page-specials .menu-body > .wrap,
.page-kids .menu-body > .wrap,
.page-desserts .menu-body > .wrap,
.page-beverages .menu-body > .wrap {
  width: auto;
  max-width: calc(var(--maxw) + var(--pad) + var(--pad));
  height: auto;
  margin-inline: auto;
  padding-inline: var(--pad);
}
.page-specials .menu-body > .wrap > *,
.page-kids .menu-body > .wrap > *,
.page-desserts .menu-body > .wrap > *,
.page-beverages .menu-body > .wrap > * { position: relative; z-index: 1; }

/* un-absolute every section + reset the artboard section rule */
.page-specials .menu-body section,
.page-kids .menu-body section,
.page-desserts .menu-body section,
.page-beverages .menu-body section {
  position: static;
  inset: auto;
  width: auto;
  margin: 0 0 clamp(2rem, 5vw, 3rem);
}
.page-desserts .menu-body section[aria-labelledby="desserts-head"] { margin-bottom: 0; }

/* -- headings: PSD art on ::before, the sub-note flows beneath --------- */
.page-specials .menu-body section > .section-head,
.page-kids .menu-body section > .section-head,
.page-desserts .menu-body section > .section-head,
.page-beverages section[aria-labelledby="beverages-head"] > .section-head {
  position: static;
  display: flex;
  flex-direction: column;
  align-items: center;
  width: auto;
  height: auto;
  margin: 0 auto clamp(1rem, 3vw, 1.75rem);
  background: none;
}
.page-specials .menu-body section > .section-head::before,
.page-kids .menu-body section > .section-head::before,
.page-desserts .menu-body section > .section-head::before,
.page-beverages section[aria-labelledby="beverages-head"] > .section-head::before {
  content: "";
  display: block;
  width: var(--art-w);
  max-width: 100%;
  aspect-ratio: var(--art-ar);
  background: var(--art) center / contain no-repeat;
}
.page-specials  section[aria-labelledby="specials-head"]  > .section-head { --art-w: 206px; --art-ar: 206 / 71; --art: url("../assets/heading-specials-page.png"); }
.page-kids      section[aria-labelledby="kids-head"]      > .section-head { --art-w: 272px; --art-ar: 272 / 33; --art: url("../assets/heading-kids.png"); }
.page-desserts  section[aria-labelledby="desserts-head"]  > .section-head { --art-w: 262px; --art-ar: 262 / 33; --art: url("../assets/heading-desserts.png"); }
.page-beverages section[aria-labelledby="beverages-head"] > .section-head { --art-w: 179px; --art-ar: 179 / 46; --art: url("../assets/heading-beverages.png"); }

.page-specials section[aria-labelledby="specials-head"] > .section-head {
  position: relative;
  width: 100%;
}
.page-specials .section-head .side-waves {
  position: absolute;
  z-index: 0;
  top: 54px;
  right: -15px;
  left: -15px;
  height: 6px;
  pointer-events: none;
}
.page-specials .section-head .side-waves::before,
.page-specials .section-head .side-waves::after {
  content: "";
  position: absolute;
  top: 0;
  width: calc(50% - 134px);
  height: 6px;
  background: #fff url("../assets/wave-pattern.png") left center / 28px 5.5px repeat-x;
}
.page-specials .section-head .side-waves::before { left: 0; }
.page-specials .section-head .side-waves::after { right: 0; }

@media (max-width: 640px) {
  .page-specials .section-head .side-waves { display: none; }
  .page-specials .menu-body { --pad: 26px; }
}

.page-specials .section-head .note,
.page-kids .section-head .note {
  position: static;
  width: auto;
  margin: .5rem 0 0;
  text-align: center;
  color: #4d4d4d;
  font-size: clamp(.72rem, 1.7vw, .82rem);
  font-style: italic;
  line-height: 1.25;
  text-transform:uppercase;
}

/* -- item lists (single column by default) ---------------------------- */
.page-specials .menu-body .items,
.page-kids .menu-body .items,
.page-desserts .menu-body .items,
.page-beverages .menu-body .items {
  position: static;
  width: 100%;
  grid-template-columns: 1fr;
  gap: clamp(.7rem, 2vw, 1.1rem);
}
.page-specials .price-rows,
.page-kids .price-rows,
.page-desserts .price-rows,
.page-beverages .price-rows { grid-template-columns: 1fr; }

/* -- footnotes (specials + kids) ------------------------------------- */
.page-specials .emphasis-line,
.page-kids .emphasis-line {
  position: static;
  width: 100%;
  margin: clamp(2rem, 5vw, 3rem) 0 clamp(1rem, 2vw, 1.25rem);
  text-align: center;
}
.page-specials .disclaimers,
.page-kids .disclaimers {
  position: static;
  width: 100%;
  max-width: 620px;
  margin-inline: auto;
  grid-template-columns: 1fr;
  gap: .35rem 3rem;
}
.page-specials .disclaimers h2,
.page-kids .disclaimers h2 { position: static; grid-column: 1 / -1; margin: 0 0 .25rem; }
.page-specials .disclaimers ul,
.page-kids .disclaimers ul { grid-column: auto; margin-top: 0; }

/* -- decorative watermarks (aria-hidden) ---------------------------- */
.page-specials .menu-body > .wrap > .watermark,
.page-kids .menu-body > .wrap > .watermark,
.page-desserts .menu-body > .wrap > .watermark,
.page-beverages .menu-body > .wrap > .watermark {
  position: absolute;
  top: clamp(32px, 10vw, 96px);
  width: min(300px, 40vw);
  opacity: .07;
  z-index: 0;
}
.page-specials .menu-body > .wrap > .watermark  {top: 0;width: min(425px, 40vw);opacity: .07;z-index: 0;transform: translate(61%, -22%) !important;}
.page-kids .menu-body > .wrap > .watermark {
  top: -62px;
  left: calc((100% - 100vw) / 2 - 74px);
  width: 484px;
  max-width: none !important;
  opacity: .07;
  transform: none;
}
.page-desserts .menu-body > .wrap > .watermark {
  top: -75px;
  right: 0;
  width: 589px;
  max-width: none !important;
  opacity: .07;
  transform: translateX(77%);
}
.page-beverages .menu-body > .wrap > .watermark {
  top: 58px;
  left: calc((100% - 100vw) / 2 - 74px);
  width: 525px;
  max-width: none !important;
  opacity: .07;
  transform: none;
}

@media (max-width: 640px) {
  .page-specials .menu-body > .wrap > .watermark {
    top: 17px;
    right: auto;
    left: 23%;
    width: 425px;
    max-width: none !important;
    opacity: .07;
    transform: none !important;
  }
  .page-kids .menu-body > .wrap > .watermark {
    top: 90px;
    left: 0;
    transform: translateX(-50%);
  }
  .page-desserts .menu-body > .wrap > .watermark {
    top: 64px;
    right: 0;
    transform: translateX(46%);
  }
  .page-beverages .menu-body > .wrap > .watermark {
    top: 270px;
    left: 0;
    transform: translateX(-18%);
  }
}

/* ================= Lunch Specials: list | note-box ================= */
.page-specials .menu-body .items.single { max-width: 460px; margin-inline: auto; }
.page-specials .items.single .price-rows { margin-top: 6px; gap: 4px; }
.page-specials .menu-note-box {
  position: relative;
  width: 100%;
  max-width: 460px;
  height: auto;
  margin: clamp(2rem, 5vw, 3rem) auto 0;
  padding: clamp(1.25rem, 3vw, 1.75rem) clamp(1.5rem, 3.5vw, 2.25rem);
  border: 1px solid #c9b99b;
  color: #4b4b4b;
  font-size: clamp(.8rem, 1.7vw, .9rem);
  font-style: italic;
  line-height: 1.5;
  background: rgba(255,255,255,0.65);
}
.page-specials .menu-note-box::after {
  content: "";
  position: absolute;
  top: -16px;
  right: -18px;
  width: clamp(54px, 9vw, 84px);
  height: auto;
  aspect-ratio: 1;
  background: url("../assets/badge-handcrafted-desktop.png") center / contain no-repeat;
}

/* ================= Beverages: main list + beer | wine ============= */
.page-beverages section[aria-labelledby="beverages-head"] > .items { gap: clamp(.7rem, 2vw, 1.1rem) clamp(2rem, 5vw, 4rem); }
.page-beverages .bev-split {
  display: grid;
  grid-template-columns: 1fr;
  gap: clamp(2rem, 5vw, 3rem);
  margin-top: clamp(1.5rem, 4vw, 2.5rem);
}
.page-beverages section[aria-labelledby="beer-head"],
.page-beverages section[aria-labelledby="wine-head"] { margin: 0; }
.page-beverages section[aria-labelledby="beer-head"] > .section-head,
.page-beverages section[aria-labelledby="wine-head"] > .section-head {
  display: block;
  width: 100%;
  height: auto;
  margin: 0 0 .6rem;
  background: none;
  text-align: left;
}
.page-beverages section[aria-labelledby="beer-head"] .section-head .brush,
.page-beverages section[aria-labelledby="wine-head"] .section-head .brush {
  position: static;
  display: block;
  width: auto;
  height: auto;
  margin: 0;
  overflow: visible;
  clip: auto;
  color: #0756a8;
  font-family: var(--trade-gothic-compressed);
  font-size: 22px !important;
  font-style: normal;
  font-weight: 700;
  line-height: 1;
  letter-spacing: 0;
  text-transform: none;
}
.page-beverages section[aria-labelledby="beer-head"] .items,
.page-beverages section[aria-labelledby="wine-head"] .items { width: 100%; gap: 10px; }
.page-beverages section[aria-labelledby="beer-head"] .item:nth-child(1) { order: 1; }
.page-beverages section[aria-labelledby="beer-head"] .item:nth-child(2) { order: 3; }
.page-beverages section[aria-labelledby="beer-head"] .item:nth-child(3) { order: 2; }
.page-beverages section[aria-labelledby="beer-head"] .item:nth-child(4) { order: 4; }
.page-beverages section[aria-labelledby="wine-head"] .item { display: flex; align-items: baseline; gap: 5px; }
.page-beverages section[aria-labelledby="wine-head"] .item-line { flex: 0 0 auto; }
.page-beverages section[aria-labelledby="wine-head"] .price-rows { flex: 1; display: flex; align-items: baseline; gap: 5px; margin: 0; }
.page-beverages section[aria-labelledby="wine-head"] .price-rows .row { flex: 1; }

/* ================= two-column zones ============================== */
@media (min-width: 720px) {
  .page-kids .menu-body .items,
  .page-desserts .menu-body .items { grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: clamp(2rem, 5vw, 3.5rem); }
  .page-beverages section[aria-labelledby="beverages-head"] > .items { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .page-beverages .bev-split { grid-template-columns: 1fr 1fr; column-gap: clamp(2rem, 5vw, 4rem); align-items: start; }
}
@media (min-width: 900px) {
  .page-specials section[aria-labelledby="specials-head"] {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 390px;
    column-gap: clamp(2rem, 5vw, 4rem);
    align-items: start;
  }
  .page-specials section[aria-labelledby="specials-head"] > .section-head { grid-column: 1 / -1; }
  .page-specials .menu-body .items.single { grid-column: 1; max-width: none; margin: 0; }
  .page-specials .menu-note-box {
    grid-column: 2;
    max-width: none;
    margin: 0;
    padding: 20px 42px 20px 34px;
    font-size: 14px;
  }
  .page-specials .menu-note-box::after { right: -44px; }

  .page-specials .disclaimers,
  .page-kids .disclaimers { grid-template-columns: 261px 212px; justify-content: center; column-gap: 99px; }
  .page-specials .disclaimers ul:first-of-type,
  .page-kids .disclaimers ul:first-of-type { grid-column: 1; }
  .page-specials .disclaimers ul:last-of-type,
  .page-kids .disclaimers ul:last-of-type { grid-column: 2; }
}

/* Footer: shared full-width blue band with contained content (see the "Footer" section above). */

@media (max-width: 600px) {
  .page {
    --menu-item-size: clamp(16px, 5vw, 20px);
    --menu-price-size: clamp(16px, 5vw, 20px);
    --menu-pita-size: clamp(13px, 3.8vw, 14px);
    --menu-description-size: clamp(13px, 3.8vw, 14px);
    --menu-note-size: clamp(11px, 3.2vw, 12px);
  }

  /* thinner meander + shorter hero to match the mobile masthead artboard */
  .greek-key { height: 15px; background-size: 26px 15px; }
  .hero-banner { height: clamp(150px, 42vw, 190px); }

  .page .menu-tabs {
    height: 327px;
    padding: 17px 0 43px;
  }
  .page .menu-tabs nav {
    width: 198px;
    height: 267px;
    background-image: url("../assets/tab-frame-mobile.png");
    background-size: 198px 267px;
  }
  .page .menu-tabs ul {
    width: 198px;
    height: 214px;
    flex-direction: column;
    justify-content: space-between;
  }
  .page .menu-tabs a { font-size: 24px; }

  .page .menu-body > .wrap { width: 316px; }
  .page .menu-body .items,
  .page .menu-body .items.single {
    grid-template-columns: 316px;
    gap: 11px;
  }
  .page .item .desc { line-height: 1.45; }
  .page .disclaimers { grid-template-columns: 1fr; }

  /* Lunch Specials / Kid's Menu / Desserts / Beverages are fluid — just undo
     the shared artboard mobile overrides that would otherwise pin them. */
  .page-specials .menu-body > .wrap,
  .page-kids .menu-body > .wrap,
  .page-desserts .menu-body > .wrap,
  .page-beverages .menu-body > .wrap { width: auto; }
  .page-specials .menu-body .items,
  .page-specials .menu-body .items.single,
  .page-kids .menu-body .items,
  .page-desserts .menu-body .items,
  .page-beverages .menu-body .items { grid-template-columns: 1fr; }
  .page-specials .menu-note-box::after { background-image: url("../assets/badge-handcrafted-mobile.png"); }
  .page-specials .disclaimers,
  .page-kids .disclaimers { display: block; }
}

/* ==========================================================================
  Lunch & Dinner — fluid layout
   ========================================================================== */

.page-lunch-dinner .menu-body {
  --pad: clamp(1rem, 5vw, 2.5rem);
  --maxw: 932px;
  height: auto;
  padding: clamp(1.25rem, 4vw, 2rem) 0 clamp(7rem, 18vw, 9rem);
  overflow-x: clip;          /* contains the olive-branch bleed + 100vw bands  */
  overflow-y: visible;       /* `clip` is the exception that leaves y alone    */
}
.page-lunch-dinner .menu-body > .wrap {
  position: relative;
  width: auto;
  max-width: calc(var(--maxw) + var(--pad) + var(--pad));
  height: auto;
  margin-inline: auto;
  padding-inline: var(--pad);
}
.page-lunch-dinner .menu-body > .wrap > * { position: relative; z-index: 1; }

/* section vertical rhythm (margin-block only — bands set their own margin-inline) */
.page-lunch-dinner .menu-body section,
.page-lunch-dinner .menu-body > .wrap > .menu-split { margin-block: 0 clamp(2rem, 4.5vw, 3rem); }
.page-lunch-dinner .menu-body .menu-split section { margin-block: 0; }

/* -- headings: the PSD art rides on ::before so an optional .note can flow
      beneath it; the art scales down by aspect-ratio on narrow screens ------ */
.page-lunch-dinner .menu-body section > .section-head,
.page-lunch-dinner .menu-body .band-inner > .section-head {
  position: static;
  display: flex;
  flex-direction: column;
  align-items: center;
  width: auto;
  height: auto;
  margin: 0 auto clamp(.9rem, 2.5vw, 1.5rem);
  background: none;
}
.page-lunch-dinner .menu-body section > .section-head::before,
.page-lunch-dinner .menu-body .band-inner > .section-head::before {
  content: "";
  display: block;
  width: var(--art-w);
  max-width: 100%;
  aspect-ratio: var(--art-ar);
  background: var(--art) center / contain no-repeat;
}
.page-lunch-dinner section[aria-labelledby="wraps-head"] {margin-top:55px;}
.page-lunch-dinner section[aria-labelledby="appetizers-head"]  > .section-head { --art-w: 268px; --art-ar: 268 / 33; --art: url("../assets/heading-appetizers.png"); }
.page-lunch-dinner section[aria-labelledby="side-orders-head"] > .section-head { --art-w: 289px; --art-ar: 289 / 52; --art: url("../assets/heading-side-orders.png"); }
.page-lunch-dinner section[aria-labelledby="salads-head"]      > .section-head { --art-w: 359px; --art-ar: 359 / 33; --art: url("../assets/heading-salads.png"); }
.page-lunch-dinner section[aria-labelledby="fish-head"]        > .section-head { --art-w: 173px; --art-ar: 173 / 33; --art: url("../assets/heading-fish.png"); }
.page-lunch-dinner .inline-specials .band-inner > .section-head { --art-w: 206px; --art-ar: 206 / 71; --art: url("../assets/heading-lunch-inline.png"); }
.page-lunch-dinner section[aria-labelledby="wraps-head"]       > .section-head { --art-w: 466px; --art-ar: 466 / 36; --art: url("../assets/heading-wraps.png"); }
.page-lunch-dinner section[aria-labelledby="specialties-head"] .band-inner > .section-head { --art-w: 254px; --art-ar: 254 / 93; --art: url("../assets/heading-homemade.png"); }
.page-lunch-dinner section[aria-labelledby="entrees-head"]     > .section-head { --art-w: 237px; --art-ar: 237 / 35; --art: url("../assets/heading-entrees.png"); }

/* the band section-heads live under .band-inner, so the shared sr-only rule
   (which keys off `section > .section-head`) misses their kicker/brush — hide
   those here; the PSD art carries the wording and the .note stays visible */
.page-lunch-dinner .band-inner > .section-head > .kicker,
.page-lunch-dinner .band-inner > .section-head > .brush {
  position: absolute;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0);
  white-space: nowrap; border: 0;
}

/* section-head sub-notes ("daily 11am – 2pm" etc.) flow under the art */
.page-lunch-dinner .menu-body .section-head .note {
  position: static;
  width: auto;
  margin: .5rem 0 0;
  text-align: center;
  color: #444;
  font-size: clamp(.68rem, 1.6vw, .75rem);
  font-style: italic;
  line-height: 1.2;
  text-transform: none;
}
.page-lunch-dinner section[aria-labelledby="wraps-head"] .section-head .note,
.page-lunch-dinner section[aria-labelledby="specialties-head"] .section-head .note,
.page-lunch-dinner .inline-specials .section-head .note { text-transform: uppercase; letter-spacing: .04em; }
.page-lunch-dinner section[aria-labelledby="fish-head"] .item .desc { line-height: 1.12; }

/* lunch-specials band: the four prices fill a 2×2 grid, column-first
   (gyro/chicken | beef/lamb) to match the printed layout */
.page-lunch-dinner .inline-specials .price-rows {
  margin-top: clamp(.9rem, 2.5vw, 1rem);
  grid-template-columns: repeat(2, minmax(0, 1fr));
  grid-template-rows: repeat(2, auto);
  grid-auto-flow: column;
  column-gap: clamp(2rem, 6vw, 4.5rem);
  row-gap: .4rem;
  font-size: var(--menu-description-size);
}
.page-lunch-dinner .inline-specials .price-rows .row .price { font-weight: 700; }

/* -- item lists: single column for this page ------------------------------ */
.page-lunch-dinner .menu-body .items {
  grid-template-columns: 1fr;
  gap: clamp(.5rem, 2vw, 1rem);
  width: 100%;
}
.page-lunch-dinner .price-rows { grid-template-columns: 1fr; }
.page-lunch-dinner section[aria-labelledby="entrees-head"] .price-rows {
  grid-template-columns: repeat(2, minmax(0, 1fr));
  column-gap: clamp(1rem, 4vw, 3.5rem);
  row-gap: clamp(.3rem, .9vw, .5rem);
  margin-top: clamp(.35rem, 1vw, .5rem);
  padding-top: clamp(.35rem, 1vw, .5rem);
  border-top: 1px solid #c0a87c;
}
.page-lunch-dinner .entrees .price-rows .row > span:first-of-type {
  font-family: var(--trade-gothic);
  font-style: italic;
  font-weight: 400;
}
.page-lunch-dinner .entrees .item-line .name.caps { text-transform: uppercase; letter-spacing: .05em; }
.page-lunch-dinner .entrees .price-rows .row .veg-icon { height: 1.35em; align-self: center; margin: 0 .3em 0 -1.5em !important; }
.page-lunch-dinner .entrees .price-rows .row .veg-icon,
.page-lunch-dinner .wrap-list .item-line > .veg-icon { order: -1; }
.page-lunch-dinner .entrees .item + .item { margin-top: clamp(.6rem, 2vw, 1.35rem); }

/* -- salads + soups and side orders: sizes/portions run inline on the name line -- */
.page-lunch-dinner :is(.salads, .sides, .wrap-list.solos) .item-line { flex-wrap: wrap; gap: .25rem .55rem; }
.page-lunch-dinner :is(.salads, .sides, .wrap-list.solos) .item-line > .name { flex: 0 0 auto; }
.page-lunch-dinner :is(.salads, .sides, .wrap-list.solos) .pp {
  display: flex;
  align-items: baseline;
  gap: .3rem;
  flex: 1 1 auto;
  min-width: max-content;
  color: #333;
  font-family: var(--trade-gothic-compressed);
  font-size: var(--menu-description-size);
  font-weight: 400;
}
.page-lunch-dinner :is(.salads, .sides, .wrap-list.solos) .pp .leader { flex: 1 1 auto; min-width: 1.4rem; }
.page-lunch-dinner :is(.salads, .sides, .wrap-list.solos) .pp .lbl { white-space: nowrap; }
.page-lunch-dinner :is(.salads, .sides, .wrap-list.solos) .pp .price { font-weight: 700; color: #111; }
.page-lunch-dinner :is(.salads, .sides, .wrap-list.solos) .item .desc { max-width: none; }

/* Side Orders use one long leader after the item name; later size/price pairs
   stay compact at the end of the row instead of dividing the space evenly. */
.page-lunch-dinner .sides .item-line > .pp { flex: 0 0 auto; }
.page-lunch-dinner .sides .item-line > .name + .pp { flex: 1 1 auto; }

/* Wraps distribute each available size across its own dotted segment. The
   template can add more .pp groups and they will share the remaining row. */
@media (min-width: 641px) {
  .page-lunch-dinner .wrap-list.solos .item-line { flex-wrap: nowrap; }
  .page-lunch-dinner .wrap-list.solos .item-line > .pp { flex: 1 1 auto; }
}

/* -- appetizers: 4-column pita price grid ------------------------------- */
.page-lunch-dinner .appetizers .ap-table { width: 100%; }
.page-lunch-dinner .appetizers .ap-row {
  display: grid;
  grid-template-columns: minmax(0, 1.6fr) repeat(4, minmax(0, 1fr));
  align-items: baseline;
}
.page-lunch-dinner .appetizers .ap-row + .ap-row { margin-top: clamp(1rem, 2.6vw, 1rem); }

.page-lunch-dinner .appetizers .ap-colhead {
  margin-bottom: clamp(.6rem, 1.6vw, 1rem);
  color: var(--ink-bold);
  font-family: var(--trade-gothic-compressed);
  font-size: clamp(11px, 1.5vw, 13px);
  font-style: italic;
  font-weight: 700;
  letter-spacing: .03em;
  text-transform: uppercase;
}
.page-lunch-dinner .appetizers .ap-colhead .ap-col { white-space: nowrap; text-align: right;}
.page-lunch-dinner .appetizers .ap-note {
  align-self: end;
  color: #4c4c4c;
  font-family: var(--trade-gothic);
  font-size: 12px;
  font-style: italic;
  font-weight: 400;
  letter-spacing: 0;
  text-transform: none;
  line-height: 1.2;
}

.page-lunch-dinner .appetizers .name {
  display: flex;
  align-items: baseline;
  gap: 8px;
  font-family: var(--trade-gothic-compressed);
  font-size: var(--menu-item-size);
  font-weight: 700;
  text-transform: lowercase;
  color: #1a1a1a;
  margin-right: -2px;
}
.page-lunch-dinner .appetizers .cell {
  display: flex;
  align-items: flex-end;
  gap: 5px;
  color: #333;
  font-family: var(--trade-gothic-compressed);
  font-size: var(--menu-description-size);
  white-space: nowrap;
}
.page-lunch-dinner .appetizers .cell .q { font-family:var(--trade-gothic); font-size: 14px; }
.page-lunch-dinner .appetizers .cell .amt { font-weight: 700; color: #111; }
.page-lunch-dinner .appetizers .lead {
  flex: 1 1 auto;
  align-self: auto;
  border-bottom: 2px dotted #777;
}
.page-lunch-dinner .appetizers .desc {
  grid-column: 1 / -1;
  margin: 3px 0 0;
  color: #4c4c4c;
  font-family: var(--trade-gothic);
  font-size: var(--menu-description-size);
  font-style: italic;
  line-height: 1.25;
}

/* -- top zone: appetizers / salads / fish  |  side-orders box ------------- */
.page-lunch-dinner .menu-split { display: grid; grid-template-columns: 1fr; gap: clamp(2rem, 5vw, 3rem); }
.page-lunch-dinner section[aria-labelledby="side-orders-head"] {
  border: 1px solid #d8c7a7;
  padding: clamp(1.25rem, 3vw, 1.75rem) clamp(1.25rem, 3vw, 2.5rem);
}
.page-lunch-dinner section[aria-labelledby="side-orders-head"] > .section-head { margin-top: -54px; }
.page-lunch-dinner .menu-body section[aria-labelledby="side-orders-head"] .items { gap: clamp(1rem, 2.4vw, 1.5rem); }

/* -- lunch-specials / homemade-specialties: full-bleed bands, wavy rule top & bottom -- */
.page-lunch-dinner .menu-body .inline-specials,
.page-lunch-dinner .menu-body section[aria-labelledby="specialties-head"] {
  width: 100vw;
  margin-inline: calc(50% - 50vw);
  margin-block: clamp(1.5rem, 3.5vw, 2.5rem);
  padding-block: clamp(1.75rem, 4vw, 2.5rem);
  background:
    left top / 35px 11px repeat-x url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='42' height='11' viewBox='0 0 42 11'%3E%3Cpath d='M0 5.5 Q10.5 -1 21 5.5 T42 5.5' fill='none' stroke='%239aceeb' stroke-width='1.6'/%3E%3C/svg%3E"),
    left bottom / 35px 11px repeat-x url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='42' height='11' viewBox='0 0 42 11'%3E%3Cpath d='M0 5.5 Q10.5 -1 21 5.5 T42 5.5' fill='none' stroke='%239aceeb' stroke-width='1.6'/%3E%3C/svg%3E"),
    #fff;
}
.page-lunch-dinner .band-inner {
  max-width: calc(var(--maxw) + var(--pad) + var(--pad));
  margin-inline: auto;
  padding-inline: var(--pad);
}
.page-lunch-dinner .band-inner > .section-head { margin-bottom: clamp(1rem, 3vw, 1.5rem); }

/* homemade specialties: two single-price items, description runs full column width */
.page-lunch-dinner section[aria-labelledby="specialties-head"] .item .desc { max-width: none; }
.page-lunch-dinner section[aria-labelledby="specialties-head"] .items { gap: clamp(1rem, 2.6vw, 1.5rem); max-width: 382px;}

/* -- pita wraps: 4-up styles row on a wave band + two price lists -------- */
.page-lunch-dinner .menu-body .wrap-styles {
  position: relative;
  z-index: 0;
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 0;
  margin-top: clamp(1rem, 3vw, 1.5rem);
  padding: 18px 0;
}
.page-lunch-dinner .menu-body .wrap-styles::before {
  content: "";
  position: absolute;
  z-index: -1;
  inset-block: 0;
  left: 50%;
  width: 100vw;
  transform: translateX(-50%);
  background: #fff url("../assets/light-wave-pattern-tile.png") repeat;
}
.page-lunch-dinner .menu-body .wrap-styles .item {
  padding: 0 clamp(.75rem, 2vw, 1.2rem);
  text-align: center;
}
.page-lunch-dinner .menu-body .wrap-styles .item:nth-child(odd) { border-right: 1px solid var(--ink-bold); }
.page-lunch-dinner .menu-body .wrap-styles .item-line { justify-content: center; }
.page-lunch-dinner .menu-body .wrap-styles .name {
  font-family: var(--script);
  font-weight: 400;
  font-size: var(--menu-pita-size);
  letter-spacing: .01em;
  text-transform: uppercase;
  color: var(--ink-bold);
}
.page-lunch-dinner .menu-body .wrap-styles .desc { margin-top: .35rem; max-width: 30ch; margin-inline: auto;font-size: 12px;}

/* price lists */
.page-lunch-dinner .wrap-list { margin-top: clamp(1.5rem, 4vw, 2.5rem); }
.page-lunch-dinner .wrap-list .item + .item { margin-top: clamp(1rem, 2.6vw, 1.5rem); }
.page-lunch-dinner .wrap-list .item-line { position: relative; display: flex; flex-wrap: wrap; align-items: baseline; gap: .25rem .5rem; }
.page-lunch-dinner .wrap-list .name.caps { text-transform: uppercase; letter-spacing: .05em; }

/* the five "styles" wraps: name+desc | micro/regular/double, divider between */
.page-lunch-dinner .wrap-list.triples .variant-row {
  position: static;
  display: flex;
  flex-wrap: nowrap;
  gap: clamp(.6rem, 2vw, 1.5rem);
  margin-top: .5rem;
  font-family: var(--trade-gothic-compressed);
  font-size: var(--menu-description-size);
  color: #333;
}
.page-lunch-dinner .wrap-list.triples .variant-row .v { display: flex; align-items: baseline; gap: .3rem; flex: 1 1 0; min-width: 0; white-space: nowrap; }
.page-lunch-dinner .wrap-list.triples .variant-row .v .leader { flex: 1 1 auto; min-width: .35rem; border-bottom: 2px dotted #777; transform: translateY(-4px); }
.page-lunch-dinner .wrap-list.triples .variant-row .v em { font-style: normal;text-transform:none; }
.page-lunch-dinner .wrap-list.triples .variant-row .v b { font-weight: 700; color: #111; }

/* salata / greekburger / hamburger: single-line, name … price(s) */
.page-lunch-dinner .wrap-list.solos { border-top: 1px solid #c0a87c; margin-top: clamp(1.5rem, 4vw, 1.5rem); padding-top: clamp(1.5rem, 4vw, 1.5rem); }

.page-lunch-dinner .wrap-list .item-line .veg-icon {
  position: absolute;
  top: 50%;
  right: calc(100% + .3rem);
  height: 17px;
  margin: 0 !important;
  transform: translateY(-50%);
}

.page-lunch-dinner .wraps-note { margin-top: clamp(1.75rem, 4vw, 2.75rem); text-align: center; }

/* -- footnotes ---------------------------------------------------------- */
.page-lunch-dinner .vegetarian-note {
  position: static;
  width: 100%;
  max-width: none;
  margin: clamp(1.5rem, 4vw, 2.5rem) auto 0;
  text-align: center;
  color: #0756a8;
  font-family: var(--trade-gothic);
  font-size: var(--menu-note-size);
  font-style: italic;
  font-weight: 400;
  text-transform: uppercase;
  letter-spacing: .04em;
}
/* the site chrome sets `#inner-container img { border:1px; margin:0 auto 0 0 }`
   (ID selector) — override hard so the sprite sits inline with no border/auto-margin */
.page-lunch-dinner .veg-icon {
  display: inline-block !important;
  width: auto;
  border: 0 !important;
  margin: 0 .45em 0 0 !important;
}
.page-lunch-dinner .vegetarian-note .veg-icon {
  height: 1.8em;
  vertical-align: -0.55em;
}
.page-lunch-dinner .emphasis-line {
  position: static;
  width: 100%;
  margin: clamp(2rem, 5vw, 3rem) 0 clamp(1rem, 2vw, 1.25rem);
  text-align: center;
  color: var(--blue);
  font-size: 12px;
}
.page-lunch-dinner .disclaimers {
  position: static;
  width: 100%;
  max-width: 620px;
  margin-inline: auto;
  grid-template-columns: 1fr;
  gap: .35rem 3rem;
  color: var(--blue);
  font-size: 12px;
}
.page .disclaimers h2 { position: static; grid-column: 1 / -1; margin: 0; color: var(--blue); }
/* neutralise the artboard placement still grouped under .page-specials/.page-kids */
.page .disclaimers ul:first-of-type,
.page .disclaimers ul:last-of-type { grid-column: auto; margin-top: 0; }
/* blue bullet markers */
.page .disclaimers ul { padding-left: 0; list-style: none; }
.page .disclaimers li {
  position: relative;
  padding: 0 0 0 .85em;
  color: var(--blue);
  font-family: var(--trade-gothic);
  font-size: 12px;
  font-style: italic;
  font-weight: 400;
  line-height: 1.35;
}
.page .disclaimers li::before {
  content: "\2022";
  position: absolute;
  left: 0;
  color: var(--blue);
  font-style: normal;
}

/* -- decorative line art (aria-hidden) --------------------------------- */
.page-lunch-dinner .menu-body > .wrap > .watermark {
  position: absolute;
  top: 301px;
  left: 0;
  width: min(638px, 100vw);
  transform: translateX(-56%);
  opacity: .08;
  z-index: 0;
}
.page-lunch-dinner .menu-body > .wrap::before {
  content: "";
  position: absolute;
  left: calc(100% - var(--pad) - 98px);
  bottom: calc(clamp(150px, 20vw, 280px) - clamp(7rem, 18vw, 9rem));
  width: min(400px, 40vw);
  aspect-ratio: 535 / 481;
  background: url("../assets/art-lunch-entrees.png") center / contain no-repeat;
  opacity: .07;
  pointer-events: none;
  z-index: 0;
}
.page-lunch-dinner .menu-body::after,
.page-specials .menu-body::after,
.page-kids .menu-body::after,
.page-desserts .menu-body::after,
.page-beverages .menu-body::after {
  content: "";
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  width: 100%;
  height: 104px;
  background: url('../assets/bottom-pattern.png') repeat-x;
  pointer-events: none;
  transform: scaleY(-1);
  z-index: 0;
}
.page-lunch-dinner .emphasis-line,
.page-lunch-dinner .disclaimers { z-index: 2; }

/* ======================= >= 900px : two-column zones ==================== */
@media (min-width: 900px) {
  .page-lunch-dinner .menu-split {
    grid-template-columns: minmax(0, 1fr) 372px;
    column-gap: clamp(2rem, 4vw, 3rem);
    align-items: start;
  }
  .page-lunch-dinner .menu-split > section[aria-labelledby="appetizers-head"] { grid-column: 1; grid-row: 1; }
  .page-lunch-dinner .menu-split > section[aria-labelledby="salads-head"]     { grid-column: 1; grid-row: 2; }
  .page-lunch-dinner .menu-split > section[aria-labelledby="fish-head"]       { grid-column: 1; grid-row: 3; }
  .page-lunch-dinner .menu-split > section[aria-labelledby="side-orders-head"] { grid-column: 2; grid-row: 1 / span 3; }

  .page-lunch-dinner .band-inner {
    display: grid;
    grid-template-columns: max-content minmax(0, 1fr);
    column-gap: clamp(2rem, 5vw, 4rem);
    align-items: center;
  }
  .page-lunch-dinner .band-inner > .section-head { align-items: flex-start; margin: .25rem 0 0; }
  .page-lunch-dinner .inline-specials .band-inner > .section-head { align-self: center; margin-bottom:0; }
  .page-lunch-dinner .band-inner > .section-head .note { text-align: left; }

  /* Center the capped Homemade Specialties composition as one unit. */
  .page-lunch-dinner section[aria-labelledby="specialties-head"] .band-inner {
    max-width: calc(254px + 382px + clamp(2rem, 5vw, 4rem) + var(--pad) + var(--pad));
    grid-template-columns: max-content minmax(0, 382px);
  }

  .page-lunch-dinner .menu-body .wrap-styles { grid-template-columns: repeat(4, 1fr); }
  .page-lunch-dinner .menu-body .wrap-styles .item { border-bottom: 0; }
  .page-lunch-dinner .menu-body .wrap-styles .item:not(:last-child) { border-right: 1px solid var(--ink-bold); }

  /* triples: name/desc | price cluster, with one continuous divider between */
  .page-lunch-dinner .wrap-list.triples { position: relative; }
  .page-lunch-dinner .wrap-list.triples::before {
    content: "";
    position: absolute;
    top: .4rem;
    bottom: .4rem;
    right: calc(clamp(300px, 30vw, 380px) + clamp(1.5rem, 4vw, 3rem) / 2);
    width: 1px;
    background: #c4d9e3;
  }
  .page-lunch-dinner .wrap-list.triples .item {
    display: grid;
    grid-template-columns: minmax(0, 1fr) clamp(300px, 30vw, 380px);
    column-gap: clamp(1.5rem, 4vw, 3rem);
    align-content: center;
    padding-block: clamp(.55rem, 1.8vw, 0rem);
  }
  .page-lunch-dinner .wrap-list.triples .item + .item { margin-top: 0; }
  .page-lunch-dinner .wrap-list.triples .item > .item-line,
  .page-lunch-dinner .wrap-list.triples .item > .desc { grid-column: 1; }
  .page-lunch-dinner .wrap-list.triples .item > .variant-row {
    grid-column: 2;
    grid-row: 1 / span 2;
    align-self: center;
    align-items: center;
    margin: 0;
    padding-left: 0;
  }

  .page-lunch-dinner .disclaimers { grid-template-columns: 261px 212px; justify-content: center; column-gap: 99px; }
  .page-lunch-dinner .disclaimers h2 { grid-column: 1; }
  .page-lunch-dinner .disclaimers ul:first-of-type { grid-column: 1; }
  .page-lunch-dinner .disclaimers ul:last-of-type  { grid-column: 2; }
}

/* ============================ <= 640px : mobile ======================== */
@media (max-width: 640px) {
  .page-lunch-dinner .menu-body { --pad: 26px; }

  .page-lunch-dinner section[aria-labelledby="appetizers-head"]  > .section-head { --art-w: 273px; --art-ar: 273 / 33; --art: url("../assets/heading-appetizers-mobile.png"); }
  .page-lunch-dinner section[aria-labelledby="side-orders-head"] > .section-head { --art-w: 261px; --art-ar: 261 / 48; --art: url("../assets/heading-side-orders-mobile.png"); }
  .page-lunch-dinner section[aria-labelledby="salads-head"]      > .section-head { --art-w: 227px; --art-ar: 227 / 74; --art: url("../assets/heading-salads-mobile.png"); }
  .page-lunch-dinner section[aria-labelledby="fish-head"]        > .section-head { --art-w: 173px; --art-ar: 173 / 33; --art: url("../assets/heading-fish-mobile.png"); }
  .page-lunch-dinner .inline-specials .band-inner > .section-head { --art-w: 184px; --art-ar: 184 / 64; --art: url("../assets/heading-lunch-inline-mobile.png"); }
  .page-lunch-dinner section[aria-labelledby="wraps-head"]       > .section-head { --art-w: 243px; --art-ar: 243 / 81; --art: url("../assets/heading-wraps-mobile.png"); }
  .page-lunch-dinner section[aria-labelledby="specialties-head"] .band-inner > .section-head { --art-w: 242px; --art-ar: 242 / 88; --art: url("../assets/heading-homemade-mobile.png"); }

  .page-lunch-dinner section[aria-labelledby="entrees-head"] .price-rows { grid-template-columns: 1fr; }
  .page-lunch-dinner .entrees .price-rows .row .veg-icon {
    order: initial;
    margin: 0 5px 0 3px !important;
  }
  .page-lunch-dinner .wrap-list .item-line > .veg-icon {
    position: static;
    order: initial;
    top: auto;
    right: auto;
    height: 16px;
    align-self: center;
    margin: 0 -3px !important;
    transform: none;
  }

  .page-lunch-dinner .menu-body > .wrap::before {
    left: 19%;
    bottom: 130px;
    width: 535px;
    max-width: none;
    opacity: .08;
  }

  /* The mobile artboard reads each appetizer as a compact menu card: name and
     description first, followed by four fully labelled dotted price rows. */
  .page-lunch-dinner .appetizers .ap-row {
    display: flex;
    flex-direction: column;
    align-items: stretch;
  }
  .page-lunch-dinner .appetizers .ap-row + .ap-row { margin-top: 12px; }
  .page-lunch-dinner .appetizers .ap-colhead { margin-bottom: 12px; }
  .page-lunch-dinner .appetizers .ap-colhead .ap-col { display: none; }
  .page-lunch-dinner .appetizers .ap-note {
    display: block;
    width: 100%;
    text-align: center;
  }
  .page-lunch-dinner .appetizers .name {
    display: block;
    order: 1;
    margin-bottom: 1px;
    line-height: 1.15;
  }
  .page-lunch-dinner .appetizers .name .lead { display: none; }
  .page-lunch-dinner .appetizers .desc {
    order: 2;
    max-width: 270px;
    margin: 0 0 7px;
  }
  .page-lunch-dinner .appetizers .cell {
    order: 3;
    min-height: 28px;
    justify-content: flex-start;
    align-items: baseline;
    gap: 0;
    color: #444;
    font-family: var(--trade-gothic);
    font-size: var(--menu-description-size);
    line-height: 28px;
  }
  .page-lunch-dinner .appetizers .cell .q {
    order: 1;
    flex: 0 0 auto;
    font-size: inherit;
    line-height: inherit;
  }
  .page-lunch-dinner .appetizers .cell::before {
    order: 2;
    flex: 0 0 auto;
    margin-left: .25em;
    color: inherit;
    font-style: normal;
    font-weight: 400;
    text-transform: none;
  }
  .page-lunch-dinner .appetizers .cell .lead {
    order: 3;
    flex: 1 1 auto;
    min-width: 10px;
    margin: 0 5px;
    transform: translateY(-3px);
  }
  .page-lunch-dinner .appetizers .cell .amt {
    order: 4;
    flex: 0 0 auto;
  }
  .page-lunch-dinner .appetizers .cell:nth-of-type(2)::before { content: "without pita"; }
  .page-lunch-dinner .appetizers .cell:nth-of-type(3)::before { content: "with 1 pita"; }
  .page-lunch-dinner .appetizers .cell:nth-of-type(4)::before { content: "with 2 pitas"; }
  .page-lunch-dinner .appetizers .cell:nth-of-type(5)::before { content: "with 3 pitas"; }

  .page-lunch-dinner .menu-body > .wrap > .watermark {
    top: 245px;
    left: 50%;
    width: 638px;
    transform: translateX(-50%);
  }

  .page-lunch-dinner section[aria-labelledby="side-orders-head"] > .section-head {
    margin-top: -45px;
  }

  .page-lunch-dinner .menu-split { gap: 48px; }

  .page-lunch-dinner .menu-body .wrap-styles {
    grid-template-columns: 1fr;
    padding-bottom: 24px;
  }
  .page-lunch-dinner .menu-body .wrap-styles .item,
  .page-lunch-dinner .menu-body .wrap-styles .item:nth-child(odd) {
    border-right: 0;
    border-bottom: 0;
  }
  .page-lunch-dinner .menu-body .wrap-styles .name {
    font-size: 18px;
    line-height: 1.15;
  }
  .page-lunch-dinner .menu-body .wrap-styles .desc {
    margin-top: 2px;
    color: #111;
    line-height: 1.3;
  }
  .page-lunch-dinner .menu-body .wrap-styles .wrap-style-desktop-extra { display: none; }
  .page-lunch-dinner .menu-body .wrap-styles .item:nth-child(1) .desc { max-width: 120px; }
  .page-lunch-dinner .menu-body .wrap-styles .item:nth-child(2) .desc { max-width: 135px; }
  .page-lunch-dinner .menu-body .wrap-styles .item:nth-child(3) .desc { max-width: 190px; }
  .page-lunch-dinner .menu-body .wrap-styles .item:nth-child(4) .desc { max-width: 170px; }
  .page-lunch-dinner .menu-body .wrap-styles .item:not(:last-child)::after {
    content: "";
    display: block;
    width: 132px;
    height: 1px;
    margin: 12px auto;
    background: #484848;
  }

  .page-lunch-dinner .wrap-list.triples .variant-row { flex-wrap: wrap; column-gap: clamp(1rem, 5vw, 2rem); }
  .page-lunch-dinner .wrap-list.triples .variant-row .v { flex: 1 1 40%; }

  .page-lunch-dinner .inline-specials .price-rows { grid-template-columns: 1fr; grid-auto-flow: row; }
}

/* ==========================================================================
   Menu hub (index.html)
   No PSD source artboard exists for the landing page. It shares the fluid shell
   and reuses the Lunch & Dinner hero image; the section list below is styled
   live to match the redesign's type, colour and rhythm.
   ========================================================================== */
.page-menu .menu-body { padding: 14px 0 0; }
.page-menu .menu-body > .wrap { height: auto; }

.page-menu .menu-intro {
  max-width: 620px;
  margin: 0 auto 40px;
  color: #4c4c4c;
  font-family: var(--trade-gothic);
  font-size: 15px;
  font-style: italic;
  line-height: 1.5;
  text-align: center;
}

.page-menu .section-head.plain {
  margin: 0 0 30px;
  text-align: center;
}
.page-menu .section-head.plain .brush {
  font-family: var(--bebas);
  font-weight: 400;
  font-size: 30px;
  letter-spacing: .04em;
  text-transform: uppercase;
  text-indent: 0;
  color: #0756a8;
}
.page-menu .section-head.plain .brush::before,
.page-menu .section-head.plain .brush::after {
  content: "\2248";
  margin: 0 .45em;
  color: var(--gold);
  font-weight: 400;
  vertical-align: .06em;
}

.page-menu .menu-body .items {
  grid-template-columns: repeat(2, 451px);
  gap: 26px 29px;
  padding-bottom: 72px;
}
.page-menu .item {
  padding: 18px 22px;
  border: 1px solid #d8c7a7;
}
.page-menu .item-line { display: block; }
.page-menu .item-line .name,
.page-menu .item-line .name.caps {
  font-family: var(--bebas);
  font-size: 24px;
  font-weight: 400;
  letter-spacing: .02em;
  text-transform: uppercase;
}
.page-menu .item-line .name a {
  color: #0756a8;
  text-decoration: none;
}
.page-menu .item-line .name a:hover,
.page-menu .item-line .name a:focus-visible { color: var(--gold); }
.page-menu .item .desc {
  margin-top: 6px;
  max-width: none;
  color: #4c4c4c;
  font-family: var(--trade-gothic);
  font-size: var(--menu-description-size);
  font-style: italic;
  line-height: 1.35;
}

@media (max-width: 600px) {
  .page-menu .menu-body { padding: 8px 0 0; }
  .page-menu .menu-intro { font-size: 14px; margin-bottom: 28px; }
  .page-menu .section-head.plain { margin-bottom: 24px; }
  .page-menu .section-head.plain .brush { font-size: 26px; }
  .page-menu .menu-body .items {
    grid-template-columns: 316px;
    gap: 14px;
    padding-bottom: 44px;
  }
  .page-menu .item { padding: 15px 18px; }
  .page-menu .item-line .name,
  .page-menu .item-line .name.caps { font-size: 22px; }
}