@import url("https://fonts.googleapis.com/css2?family=Lora:wght@500;600;700&display=swap");
  /* One palette across print and web. The greens and cream come off the jar label;
     the accent green is the rule under every heading. */
  :root {
    --green:      #1F4733;
    --green-deep: #143024;
    --accent:     #5E8C3F;
    --olive:      #8A7B2F;
    --sage:       #CFE3D0;
    --gold:       #8A7B2F;
    --cream:      #F7F3E8;
    --paper:      #FFFDF7;
    --ink:        #15130F;
    --ink-2:      #55534A;
    --ink-3:      #726F62;
    --line:       #E0DAC8;
    --dot:        #C8C3B2;
    --soft:       #F2F5EC;
  }

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

  body {
    margin: 0;
    background: var(--cream);
    color: var(--ink);
    font: 400 17px/1.62 Inter, ui-sans-serif, system-ui, -apple-system, "Segoe UI", sans-serif;
    -webkit-font-smoothing: antialiased;
  }

  h1, h2 { font-family: Lora, Georgia, "Times New Roman", serif; font-weight: 400; line-height: 1.04;
            letter-spacing: -.01em; text-wrap: balance; margin: 0; color: var(--green); }
  h3 { font-family: Inter, ui-sans-serif, system-ui, sans-serif; font-weight: 700; line-height: 1.2;
       text-wrap: balance; margin: 0; }
  p { margin: 0; }
  img { max-width: 100%; display: block; }
  a { color: var(--green); }

  /* The rule that opens every section, as on the printed menus. */
  .rule { height: 4px; width: 118px; background: var(--accent); margin-top: 12px; border-radius: 2px; }
  .kicker { font-family: Inter, sans-serif; font-size: 12.5px; font-weight: 700; letter-spacing: .14em;
            text-transform: uppercase; color: var(--accent); }
  a:focus-visible, .btn:focus-visible { outline: 3px solid var(--green); outline-offset: 3px; border-radius: 4px; }

  .skip { position: absolute; left: -9999px; background: var(--green); color: #fff;
          padding: 10px 16px; border-radius: 6px; z-index: 100; text-decoration: none; }
  .skip:focus { left: 12px; top: 12px; }

  .wrap { width: 100%; max-width: 1260px; margin-inline: auto; padding-inline: 28px; }
  .eyebrow { font-size: 12.5px; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; color: var(--accent); }

  /* ---------- header ---------- */
  header { padding-block: 12px; position: sticky; top: 0; z-index: 50;
           background: rgba(247,243,232,.94); backdrop-filter: blur(8px);
           border-bottom: 1px solid var(--line); }
  .bar .btns { margin-left: 14px; display: flex; gap: 8px; }
  .bar .order-btn { background: var(--green); color: #fff; font-weight: 700;
                    font-size: 14.5px; padding: 11px 16px; border-radius: 6px; text-decoration: none;
                    white-space: nowrap; animation: order-glow 2.8s ease-out infinite; }
  .bar .order-btn:hover { background: var(--green-deep); animation: none;
                          box-shadow: 0 0 0 4px rgba(94,140,63,.32); }
  /* The one piece of motion on the site, and it is on the one thing we most
     want tapped. A ring that breathes outwards rather than a flashing colour. */
  @keyframes order-glow {
    0%   { box-shadow: 0 0 0 0 rgba(94,140,63,.60); }
    70%  { box-shadow: 0 0 0 13px rgba(94,140,63,0); }
    100% { box-shadow: 0 0 0 0 rgba(94,140,63,0); }
  }
  @media (prefers-reduced-motion: reduce) {
    .bar .order-btn { animation: none; box-shadow: 0 0 0 4px rgba(94,140,63,.32); }
  }
  /* Phone orders are still how most catering starts, so the number is a
     button in the bar rather than a line buried in the footer. */
  .bar .call-btn { background: transparent; color: var(--green); font-weight: 700;
                   font-size: 14.5px; padding: 9px 14px; border-radius: 6px;
                   text-decoration: none; border: 2px solid var(--green); }
  .bar .call-btn:hover { background: var(--green); color: #fff; }

  .bar { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; }
  .bar .brand { display: flex; align-items: center; gap: 14px; text-decoration: none; }
  .bar img { width: 62px; height: 62px; border-radius: 50%; }
  .bar .name { font-family: Lora, Georgia, serif; font-weight: 400; font-size: 24px; color: var(--green); }
  .bar .tag { font-size: 13.5px; color: var(--ink-2); font-style: italic; }
  nav { margin-left: auto; display: flex; gap: 15px; flex-wrap: wrap; }
  nav a { font-size: 14.5px; font-weight: 600; color: var(--ink-2); text-decoration: none;
          padding-block: 10px; }
  nav a.on { color: var(--accent); }
  nav a:hover { color: var(--accent); }

  /* ---------- hero ---------- */
  /* The sign fills 57% of the photograph's height, so a very wide short banner
     can show it whole or show it right of centre, but not both. The band is
     given a taller aspect and the crop is wider, which buys room for both. */
  .hero-band { position: relative; background: var(--green-deep); overflow: hidden;
               min-height: clamp(480px, 50vw, 950px); display: grid; align-items: center; }
  .hero-band > img { position: absolute; inset: 0; width: 100%; height: 100%;
                     object-fit: cover; object-position: 50% 50%; }
  /* The photograph is cropped so the sign hangs on the right and the dark
     ceiling fills the left, under the words. That does most of the work, so the
     scrim is lighter than it was and the sign stays bright. */
  .hero-band::after { content: ''; position: absolute; inset: 0;
    background: linear-gradient(95deg, rgba(20,48,36,.92) 0%, rgba(20,48,36,.86) 44%,
                                rgba(20,48,36,.40) 70%, rgba(20,48,36,.10) 100%); }
  .hero { position: relative; z-index: 2; padding-block: 56px; }
  .hero .eyebrow { color: var(--sage); }
  .hero h1 { font-size: clamp(40px, 6vw, 66px); color: var(--paper); max-width: 15ch; }
  .hero h1 em { font-style: normal; color: #A9CE86; }
  .hero .rule { background: #A9CE86; }
  .hero .lede { margin-top: 18px; font-size: 19px; color: #DDE8D9; max-width: 40ch; }

  .cta-row { display: flex; gap: 12px; flex-wrap: wrap; margin-top: 26px; }
  .btn { display: inline-block; padding: 14px 24px; border-radius: 6px; font-weight: 700; font-size: 16px; text-decoration: none; border: 2px solid transparent; }
  .btn-main { background: var(--green); color: #fff; }
  .btn-main:hover { background: var(--green-deep); }
  .btn-ghost { border-color: var(--green); color: var(--green); background: transparent; }
  .btn-ghost:hover { background: var(--green); color: #fff; }
  /* On the photographic hero the green buttons disappear, so the pair inverts. */
  .btn-light { background: var(--paper); color: var(--green-deep); }
  .btn-light:hover { background: #fff; }
  .btn-outline { border-color: rgba(255,255,255,.62); color: #fff; background: transparent; }
  .btn-outline:hover { background: rgba(255,255,255,.14); border-color: #fff; }

  /* ---------- sections ---------- */
  section { padding-block: 52px; }
  /* Pages that open straight on a section, with no hero above it. */
  main > section:first-child { padding-top: 40px; }
  /* The banner is no longer the first thing, so it needs air above it. */
  .hero-band { margin-top: 8px; }
  #cat-menu { background: var(--paper); border-block: 1px solid var(--line); }
  #cat-terms { padding-top: 0; }
  section > .wrap > h2 { font-size: clamp(30px, 4vw, 44px); }
  section > .wrap > h2.big { font-size: clamp(44px, 6.6vw, 78px); line-height: 1; }
  .sub { margin-top: 10px; color: var(--ink-2); max-width: 58ch; }

  .cards { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 18px; margin-top: 30px; }
  .card { background: var(--paper); border: 1px solid var(--line); border-radius: 8px; padding: 24px; }
  .card h3 { font-size: 20px; }
  .card p { margin-top: 8px; color: var(--ink-2); font-size: 15.5px; }

  .card .shot { aspect-ratio: 4 / 3; overflow: hidden; border-radius: 6px; margin-bottom: 14px; }
  .card .shot img { width: 100%; height: 100%; object-fit: cover; }
  .card h3 { margin-bottom: 2px; }

  .hours { margin-top: 12px; padding-top: 12px; border-top: 1px solid var(--line);
           font-size: 15.5px; color: var(--ink-2); }
  .hours b { color: var(--ink); }
  .hours .today { color: var(--accent); font-weight: 700; }

  .ig { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 12px; margin-top: 26px; }
  .ig a { display: block; aspect-ratio: 1; overflow: hidden; border-radius: 8px; }
  .ig img { width: 100%; height: 100%; object-fit: cover; }

  /* Photo frames used by the slideshows. */
  .pic { aspect-ratio: 4 / 3; overflow: hidden; border-radius: 10px; background: var(--sage); }
  .pic img { width: 100%; height: 100%; object-fit: cover; }

  /* Horizontal scroll-snap gives native swiping on a phone for free; the script
     only nudges it along on a timer. */
  .slides { display: flex; gap: 14px; overflow-x: auto; scroll-snap-type: x mandatory;
            scroll-behavior: smooth; margin-top: 30px; padding-bottom: 4px;
            scrollbar-width: none; }
  .slides::-webkit-scrollbar { display: none; }
  .slides figure { margin: 0; flex: 0 0 clamp(260px, 42%, 460px); scroll-snap-align: center; }
  .slides .pic { aspect-ratio: 4 / 3; overflow: hidden; border-radius: 10px; background: var(--sage); }
  .slides .pic img { width: 100%; height: 100%; object-fit: cover; }
  /* Centre-focus: the middle card is full size, its neighbours sit back so the
     eye lands on one dish at a time. Must come after .slides figure — same
     specificity, so it only wins on source order. */
  .favs { --w: clamp(230px, 26vw, 330px); gap: 20px; align-items: center;
          padding-inline: calc(50% - var(--w) / 2); }
  .favs figure { flex: 0 0 var(--w); transform: scale(.84); opacity: .4;
                 transition: transform .45s ease, opacity .45s ease; }
  .favs figure.is-current { transform: scale(1); opacity: 1; }
  .favs h3 { font-size: 18.5px; margin-top: 12px; text-align: center; }
  .favs h3 a { color: var(--green); text-decoration: none; }
  .favs h3 a:hover, .favs h3 a:focus-visible { text-decoration: underline; }
  @media (prefers-reduced-motion: reduce) { .favs figure { transition: none; } }
  @media (prefers-reduced-motion: reduce) { .slides { scroll-behavior: auto; } }

  .dots { display: flex; gap: 8px; justify-content: center; margin-top: 18px; }
  .dots button { width: 9px; height: 9px; padding: 0; border-radius: 50%; border: 0;
                 background: var(--line); cursor: pointer; flex: none; }
  .dots button[aria-current="true"] { background: var(--green); }

  /* Each location as one editorial card: a tall photograph beside the practical
     detail, sides alternating. The old version stacked a 4:3 photo over a wall
     of text and read like a directory listing. */
  /* Each row is a photograph beside a block of text. The photograph stretches to
     whatever height the text needs, so neither ever leaves a band of cream
     stranded beside the other — the two cards carry different amounts of copy
     and a fixed aspect ratio left the shorter one floating. */
  .loc { display: grid; grid-template-columns: 1.06fr 1fr; gap: 0 48px;
         align-items: stretch; margin-top: 34px; }
  .loc.flip { grid-template-columns: 1fr 1.06fr; }
  .loc + .loc { margin-top: 56px; padding-top: 52px; border-top: 1px solid var(--line); }
  .loc-shot { position: relative; min-height: 340px; border-radius: 14px;
              overflow: hidden; background: var(--sage); }
  .loc-shot img { position: absolute; inset: 0; width: 100%; height: 100%;
                  object-fit: cover; object-position: center; display: block; }
  .loc-body { padding: 4px 0; display: flex; flex-direction: column; justify-content: center; }
  .loc.flip .loc-shot { order: 2; }
  .loc h3 { font-family: Lora, Georgia, serif; font-weight: 400; font-size: clamp(26px, 2.6vw, 34px);
            color: var(--green); margin-top: 6px; }
  .loc-addr { margin-top: 6px; font-size: 15px; color: var(--ink-3); }
  .loc p { margin-top: 14px; font-size: 15.5px; color: var(--ink-2); line-height: 1.55; max-width: 44ch; }
  .loc .cta-row { margin-top: 22px; }

  /* Hours as a definition list so the days and the times line up. */
  .hrs { margin: 18px 0 0; border-top: 1px solid var(--line); }
  .hrs > div { display: flex; justify-content: space-between; gap: 18px;
               padding: 9px 0; border-bottom: 1px solid var(--line); }
  .hrs dt { font-size: 14.5px; color: var(--ink-2); }
  .hrs dd { margin: 0; font-size: 14.5px; font-weight: 700; color: var(--ink); white-space: nowrap; }

  @media (max-width: 820px) {
    .loc, .loc.flip { grid-template-columns: 1fr; gap: 20px; }
    .loc.flip .loc-shot { order: 0; }
    .loc-shot { height: 230px; min-height: 0; }
    .loc + .loc { margin-top: 40px; padding-top: 36px; }
  }

  .contact { background: var(--green); color: #fff; border-radius: 10px; padding: 52px 32px; text-align: center; }
  .contact h2 { font-size: clamp(28px, 3.6vw, 38px); color: #fff; }
  .contact p { margin-top: 12px; color: #D8E4D4; }
  .contact .mail { margin-top: 20px; font-size: 20px; font-weight: 600; }
  .contact .mail a { text-decoration: none; color: #fff; }
  .socials { display: flex; gap: 12px; justify-content: center; margin-top: 24px; flex-wrap: wrap; }
  .socials a { font-weight: 600; text-decoration: none; padding: 11px 20px; border-radius: 6px; background: transparent; border: 2px solid rgba(255,255,255,.4); color: #fff; }
  .socials a:hover { border-color: #fff; background: rgba(255,255,255,.12); }

  /* ---------- menu ---------- */
  #menu { background: var(--paper); border-block: 1px solid var(--line); }
  .menu-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
               gap: 34px 48px; margin-top: 34px; }
  .mgroup h3 { font-family: Lora, Georgia, serif; font-weight: 400; font-size: 25px; color: var(--green); }
  .mgroup .head { font-size: 12px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase;
                  color: var(--accent); margin-top: 4px; }
  .mrow { display: flex; align-items: baseline; gap: 8px; margin-top: 13px; }
  .mrow .nm { font-weight: 700; font-size: 16.5px; }
  .mrow .dots { flex: 1; border-bottom: 2px dotted var(--dot); transform: translateY(-4px); }
  .mrow .pr { font-weight: 700; font-size: 16.5px; color: var(--green); white-space: nowrap; }
  .mgroup .sub2 { font-size: 14.5px; color: var(--ink-2); margin-top: 5px; line-height: 1.5; }
  .mnote { margin-top: 30px; font-size: 14.5px; color: var(--ink-2); }

  /* ---------- catering ---------- */
  #catering { background: var(--green); color: #fff; }
  #catering h2 { color: #fff; }
  #catering .rule { background: #A9CE86; }
  #catering .eyebrow { color: var(--sage); }
  .cat-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 34px 54px;
              margin-top: 32px; align-items: center; }
  .cat-grid .shot img { width: 100%; height: 100%; object-fit: cover;
                        border-radius: 10px; aspect-ratio: 4 / 3; }
  .cat-list { margin: 0; padding: 0; list-style: none; }
  .cat-list li { border-top: 1px solid rgba(255,255,255,.22); padding-block: 15px; }
  .cat-list li:last-child { border-bottom: 1px solid rgba(255,255,255,.22); }
  .cat-list b { display: block; font-size: 17.5px; }
  .cat-list span { display: block; font-size: 15px; color: #CFDDC9; margin-top: 3px; line-height: 1.5; }
  #catering .lede { color: #DDE8D9; max-width: 50ch; }

  /* ---------- weekday lunch ---------- */
  .lunch { background: var(--green); color: #fff; border-radius: 10px; padding: 24px 28px;
           margin-top: 30px; display: grid; grid-template-columns: auto 1fr; gap: 8px 36px;
           align-items: start; }
  .lunch .when { font-family: Lora, Georgia, serif; font-size: 23px; line-height: 1.15; }
  .lunch .when span { display: block; font-family: Inter, sans-serif; font-size: 13px;
                      font-weight: 700; letter-spacing: .12em; text-transform: uppercase;
                      color: var(--sage); margin-top: 7px; }
  .lunch p { color: #E2EBDE; font-size: 16px; max-width: 56ch; }

  /* Real Google reviews, in the same scroll-snap track as the photographs. */
  .quotes { margin-top: 34px; }
  .quotes figure { flex: 0 0 clamp(268px, 44%, 420px); display: flex; flex-direction: column; }
  .quotes blockquote { margin: 0; flex: 1; background: var(--paper); border: 1px solid var(--line);
                       border-top: 4px solid var(--accent); border-radius: 8px; padding: 20px 22px;
                       font-size: 16.5px; line-height: 1.55; }
  .quotes .stars { display: block; color: var(--olive); font-size: 13px; letter-spacing: 3px;
                   margin-bottom: 10px; }
  .quotes figcaption { margin-top: 11px; font-weight: 700; font-size: 14.5px; color: var(--ink-2); }

  /* Open or closed, worked out in Fort Wayne time rather than the visitor's. */
  .openpill { display: inline-flex; align-items: center; gap: 8px; font-weight: 700;
              font-size: 14.5px; padding: 7px 13px; border-radius: 999px; margin-bottom: 12px; }
  .openpill .dot { width: 9px; height: 9px; border-radius: 50%; background: currentColor; flex: none; }
  .openpill.on  { background: #E3EFDB; color: #2C5520; }
  .openpill.off { background: #EFE8D7; color: #5F5122; }

  /* A star beside the four best sellers, explained once under the grid. */
  .mrow .bs { color: var(--olive); font-size: 13px; margin-left: 6px; }
  .mlegend { margin-top: 26px; font-size: 14.5px; color: var(--ink-2); }
  .mlegend .bs { color: var(--olive); margin-right: 6px; }

  /* The review ask was the one unstyled block on the page. The elephant gives
     it a right-hand edge and stops the line running the full column width. */
  .review { display: grid; grid-template-columns: 1fr auto; gap: 24px 54px; align-items: center;
            margin-top: 40px; border-top: 1px solid var(--line); padding-top: 30px; }
  .review h3 { font-family: Lora, Georgia, serif; font-weight: 400; font-size: 27px; color: var(--green); }
  .review p { margin-top: 12px; color: var(--ink-2); max-width: 42ch; }
  .review .btn { margin-top: 22px; }
  .review img { width: min(250px, 38vw); height: auto; mix-blend-mode: multiply; }

  /* ---------- made from scratch: the wok ---------- */
  .wok { position: relative; overflow: hidden; background: var(--green-deep);
         min-height: clamp(340px, 34vw, 520px); display: grid; align-items: center; }
  .wok > video { position: absolute; inset: 0; width: 100%; height: 100%;
                 object-fit: cover; }
  .wok::after { content: ''; position: absolute; inset: 0;
    background: linear-gradient(95deg, rgba(20,48,36,.92) 0%, rgba(20,48,36,.80) 42%,
                                rgba(20,48,36,.46) 74%, rgba(20,48,36,.24) 100%); }
  .wok .wrap { position: relative; z-index: 2; }
  .wok h2 { color: var(--paper); max-width: 16ch; }
  .wok .rule { background: #A9CE86; }
  .wok .eyebrow { color: var(--sage); }
  .wok p { margin-top: 16px; color: #DDE8D9; font-size: 18px; max-width: 44ch; line-height: 1.55; }
  /* No autoplaying footage for anyone who has asked motion to stop. */
  @media (prefers-reduced-motion: reduce) {
    .wok > video { display: none; }
    .wok { background: var(--green-deep) url("place/../video/wok-poster.jpg") center/cover; }
  }

  /* ---------- catering menu, same shape as the printed card layout ---------- */
  .cgrid { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; margin-top: 32px; }
  .ccard { background: var(--paper); border: 1px solid var(--line); border-radius: 10px;
           padding: 22px 24px 22px; display: flex; flex-direction: column; }
  .ccard.dark { background: var(--green); border-color: var(--green); }
  .ccard .cmh { font-size: 21px; font-weight: 700; color: var(--green); letter-spacing: -.3px; }
  .ccard .cq { font-size: 11.5px; font-weight: 700; color: var(--accent); letter-spacing: .09em;
               text-transform: uppercase; margin-top: 4px; }
  .ccard.dark .cmh { color: #fff; } .ccard.dark .cq { color: #9CC47F; }
  .cr { display: flex; align-items: baseline; gap: 8px; margin-top: 9px; }
  .cn { font-size: 16px; font-weight: 700; }
  .cn em { font-style: normal; font-weight: 400; font-size: 13.5px; color: var(--ink-3); }
  .cd { flex: 1; border-bottom: 2px dotted var(--dot); transform: translateY(-4px); }
  .cp { font-size: 16px; font-weight: 700; color: var(--green); white-space: nowrap; }
  .cp s { text-decoration: none; font-weight: 400; font-size: 13px; color: var(--ink-3); }
  .ccard.dark .cn, .ccard.dark .cp { color: #fff; }
  .ccard.dark .cd { border-bottom-color: #4E7050; }
  .ccard.dark .cp s { color: #9CC47F; }
  .cnote { margin-top: 10px; font-size: 14px; color: var(--ink-2); line-height: 1.45; }
  .ccard.dark .cnote { color: #CBDCC2; }
  /* The choices, labelled, so they read as something to pick rather than
     something the dish arrives with. */
  .cpro { margin-top: 12px; border-top: 1px solid var(--line); padding-top: 10px;
          font-size: 14.5px; font-weight: 700; color: var(--green); }
  .cpro + .cpro { margin-top: 8px; }
  .clbl { display: block; font-size: 10.5px; font-weight: 700; color: var(--accent);
          letter-spacing: .09em; text-transform: uppercase; margin-bottom: 5px; }
  .copt { display: inline-block; }
  .copt + .copt { margin-left: 12px; padding-left: 12px; border-left: 1px solid var(--line); }
  .copt span { font-weight: 400; color: var(--ink-3); }
  @media (max-width: 760px) { .cgrid { grid-template-columns: 1fr; } }

  /* ---------- join our family ---------- */
  #apply { padding-top: 46px; }
  .applyform { display: grid; grid-template-columns: 1fr 1fr; gap: 16px 20px; margin-top: 26px;
               max-width: 720px; }
  .applyform label { display: block; font-size: 13.5px; font-weight: 700; color: var(--green); }
  .applyform .wide { grid-column: 1 / -1; }
  .applyform input, .applyform select, .applyform textarea {
      display: block; width: 100%; margin-top: 6px; font: 400 16px Inter, sans-serif;
      color: var(--ink); background: var(--paper); border: 1px solid var(--line);
      border-radius: 7px; padding: 12px 13px; }
  .applyform input:focus, .applyform select:focus, .applyform textarea:focus {
      outline: 3px solid var(--green); outline-offset: 1px; border-color: var(--green); }
  .applyform textarea { resize: vertical; }
  .formnote { margin-top: 12px; font-size: 14px; color: var(--ink-2); max-width: 52ch; line-height: 1.5; }
  @media (max-width: 620px) { .applyform { grid-template-columns: 1fr; } }

  #join-top { background: var(--paper); border-block: 1px solid var(--line); }
  .roles { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
           gap: 18px; margin-top: 28px; }
  .role { border-top: 4px solid var(--accent); padding-top: 14px; }
  .role h3 { font-size: 19px; color: var(--green); }
  .role p { margin-top: 7px; font-size: 15px; color: var(--ink-2); line-height: 1.5; }

  /* Translate. Google's proxy re-serves the whole site in the chosen language;
     it takes a few seconds to swap over, so the button has to look worth the
     wait. Same breathing ring as the order button, staggered so the two do not
     pulse in unison. */
  .xlate { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; margin-bottom: 26px; }
  .xlate-lbl { display: inline-flex; align-items: center; gap: 7px; font-size: 12.5px;
               font-weight: 700; letter-spacing: .12em; text-transform: uppercase;
               color: var(--ink-3); }
  .xlate a { background: var(--green); color: #fff; text-decoration: none; font-weight: 700;
             font-size: 17px; line-height: 1.5; padding: 11px 20px; border-radius: 8px;
             animation: order-glow 2.8s ease-out infinite; }
  .xlate a:hover, .xlate a:focus-visible { background: var(--green-deep); animation: none;
             box-shadow: 0 0 0 4px rgba(94,140,63,.32); }
  .xlate a:nth-of-type(2) { animation-delay: .9s; }
  .xlate a:nth-of-type(3) { animation-delay: 1.8s; }
  .xlate .th { font-family: "Noto Sans Thai", "Thonburi", "Sukhumvit Set", sans-serif; }
  .xlate .my { font-family: "Noto Sans Myanmar", "Myanmar Text", "Myanmar Sangam MN", sans-serif; }
  @media (prefers-reduced-motion: reduce) {
    .xlate a { animation: none; box-shadow: 0 0 0 4px rgba(94,140,63,.32); }
  }

  /* ---------- about ---------- */
  #about { background: var(--paper); border-block: 1px solid var(--line); }
  .about-grid { display: grid; grid-template-columns: 1.25fr .85fr; gap: 38px 54px;
                margin-top: 32px; align-items: start; }
  .about-shot { margin: 0; }
  .about-shot img { width: 100%; height: auto; border-radius: 10px; display: block; }
  .about-shot figcaption { margin-top: 10px; font-size: 14px; color: var(--ink-3); }
  .story p { max-width: 60ch; }
  .story p + p { margin-top: 15px; }
  /* The one loud line on the page. Everything around it stays quiet. */
  .pull { font-family: Lora, Georgia, serif; font-size: clamp(21px, 2.3vw, 27px);
          line-height: 1.32; color: var(--green); margin-top: 26px;
          padding-left: 20px; border-left: 4px solid var(--accent); }
  /* Years, because this genuinely is a sequence. */
  .years { margin: 0; border-top: 1px solid var(--line); }
  .yr { display: grid; grid-template-columns: 68px 1fr; gap: 16px; align-items: baseline;
        padding-block: 15px; border-bottom: 1px solid var(--line); }
  .yr dt { font-family: Lora, Georgia, serif; font-size: 20px; color: var(--accent); }
  .yr dd { margin: 0; font-size: 15.5px; color: var(--ink-2); line-height: 1.5; }

  /* ---------- order online ---------- */
  /* Two ways to get the food, asked as one question, the way a counter would.
     The four equal cards before this did not distinguish pickup from delivery. */
  .choose { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; margin-top: 30px; }
  .ch { background: var(--paper); border: 1px solid var(--line); border-radius: 10px;
        padding: 26px 26px 24px; display: flex; flex-direction: column; }
  .ch:first-child { background: var(--green); border-color: var(--green); color: #fff; }
  .ch-k { font-family: Lora, Georgia, serif; font-size: 27px; color: var(--green); }
  .ch:first-child .ch-k { color: #fff; }
  .ch p { margin-top: 10px; font-size: 15.5px; color: var(--ink-2); line-height: 1.5; max-width: 40ch; }
  .ch:first-child p { color: #D8E4D4; }
  .ch .btn { margin-top: 18px; align-self: flex-start; }
  .ch:first-child .btn-main { background: var(--paper); color: var(--green-deep); }
  .ch:first-child .btn-main:hover { background: #fff; }
  .ch-apps { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 18px; }
  .ch-apps a { font-weight: 700; font-size: 15.5px; text-decoration: none; color: var(--green);
               border: 2px solid var(--green); border-radius: 6px; padding: 11px 16px; }
  .ch-apps a:hover { background: var(--green); color: #fff; }
  .ch-note { margin-top: auto; padding-top: 16px; font-size: 13.5px; color: var(--ink-3); }
  .ch:first-child .ch-note { color: #A9C4A6; }
  @media (max-width: 760px) { .choose { grid-template-columns: 1fr; } }

  .order-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(218px, 1fr));
                gap: 16px; margin-top: 30px; align-items: start; }
  .ord { display: block; background: var(--paper); border: 1px solid var(--line); border-radius: 8px;
         padding: 20px 22px; text-decoration: none; color: var(--ink); }
  .ord:hover { border-color: var(--accent); }
  .ord .who { font-family: Inter, sans-serif; font-weight: 700; font-size: 18.5px; color: var(--green); }
  .ord .what { font-size: 14.5px; color: var(--ink-2); margin-top: 5px; line-height: 1.45; }
  .ord .go { font-size: 14px; font-weight: 700; color: var(--accent); margin-top: 12px; }
  .ord.house { background: var(--green); border-color: var(--green); }
  .ord.house .who, .ord.house .go { color: #fff; }
  .ord.house .what { color: #D8E4D4; }


  footer { padding-block: 34px 48px; color: var(--ink-3); font-size: 14px; text-align: center; }
  footer a { color: var(--ink-2); display: inline-block; padding-block: 11px; }

  /* Narrow enough and the sign creeps under the headline, so the scrim firms up
     and the crop pushes the sign to the edge. Contrast stays above 6:1 even over
     the brightest part of the disc. */
  @media (max-width: 660px) {
    .hero-band { min-height: 420px; }
    .hero-band > img { object-position: 80% 36%; }
    .hero-band::after {
      background: linear-gradient(95deg, rgba(20,48,36,.94) 0%, rgba(20,48,36,.88) 50%,
                                  rgba(20,48,36,.70) 100%);
    }
  }

  @media (max-width: 820px) {
    /* A sticky header that wraps to three lines eats a third of a phone screen,
       so on small screens it scrolls away and the Order button rides up beside
       the logo rather than sitting on a line of its own. */
    header { position: static; padding-block: 14px; }
    /* Two buttons plus six nav items wanted three rows on a phone, which ate
       half the screen. Everything shrinks just enough to sit on two. */
    .bar .btns { order: 1; margin-left: auto; gap: 6px; }
    .bar img { width: 48px; height: 48px; }
    .bar .name { font-size: 20px; }
    .bar .order-btn { font-size: 13.5px; padding: 10px 12px; }
    .bar .call-btn { font-size: 13.5px; padding: 8px 11px; }
    .bar { gap: 10px; }
    nav { order: 2; }
    .hero { padding-block: 40px; }
    .review { grid-template-columns: 1fr; }
    .review img { width: 170px; justify-self: end; margin-top: -10px; }
    .about-grid { grid-template-columns: 1fr; }
    .cat-grid { grid-template-columns: 1fr; }
    .lunch { grid-template-columns: 1fr; }
    nav { width: 100%; margin-left: 0; gap: 16px; }
  }

  /* Catering request builder. The guest assembles the order themselves so the
     enquiry arrives with every choice already made and nothing has to be asked
     back. Prices mirror the printed catering menu; the total is an estimate
     only, which the copy under it says plainly. */
  .bld { border: 1px solid var(--line); border-radius: 10px; padding: 18px 16px; background: var(--paper); }
  .bld-h { font-size: 17px; color: var(--green); }
  .bld-h span { display: block; margin-top: 5px; font-size: 13.5px; font-weight: 400;
                color: var(--ink-2); line-height: 1.5; }
  .bld-sec { margin-top: 18px; }
  .bld-t { display: flex; align-items: center; justify-content: space-between; gap: 12px;
           font-size: 12.5px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase;
           color: var(--ink-3); border-bottom: 1px solid var(--line); padding-bottom: 7px; }
  .bld-add { font: 700 14px Inter, sans-serif; color: var(--green); background: none;
             border: 1px solid var(--green); border-radius: 7px; padding: 5px 11px; cursor: pointer; }
  .bld-add:hover { background: var(--green); color: #fff; }
  .bld-row { display: grid; grid-template-columns: 64px repeat(4, 1fr) 34px; gap: 8px;
             align-items: end; margin-top: 10px; }
  .bld-row.tray { grid-template-columns: 64px repeat(3, 1fr) 34px; }
  .bld-row .nm { grid-column: 1 / -1; margin-top: 2px; }
  .bld-row .nm i { font-style: normal; font-weight: 400; text-transform: none;
                   letter-spacing: 0; color: var(--ink-3); }
  .bld-row select, .bld-row input { margin-top: 4px; padding: 9px 10px; font-size: 15px; }
  .bld-row .lb { font-size: 11.5px; font-weight: 700; letter-spacing: .06em;
                 text-transform: uppercase; color: var(--ink-3); }
  .bld-del { font: 700 18px/1 Inter, sans-serif; color: var(--ink-3); background: none;
             border: 1px solid var(--line); border-radius: 7px; height: 40px; cursor: pointer; }
  .bld-del:hover { color: #b5563c; border-color: #b5563c; }
  .bld-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(230px, 1fr));
              gap: 10px 16px; margin-top: 12px; }
  .bld-x { display: grid; grid-template-columns: 1fr 70px; gap: 10px; align-items: center;
           font-size: 14.5px; color: var(--ink); }
  .bld-x input { margin-top: 0; padding: 8px 9px; font-size: 15px; }
  .bld-x em { display: block; font-style: normal; font-size: 12.5px; color: var(--ink-3); }
  .bld-empty { margin-top: 10px; font-size: 14px; color: var(--ink-3); }
  .bld-tot { margin-top: 20px; padding-top: 14px; border-top: 2px solid var(--green);
             font-size: 19px; font-weight: 700; color: var(--green); }
  .bld-tot span { display: block; margin-top: 5px; font-size: 13px; font-weight: 400;
                  color: var(--ink-2); line-height: 1.5; }
  @media (max-width: 620px) {
    .bld-row, .bld-row.tray { grid-template-columns: 1fr 1fr; }
    .bld-row .del-wrap { grid-column: 1 / -1; }
    .bld-del { width: 100%; }
  }

  /* Visit Us. Labelled blocks on the left, map on the right -- the pattern
     reads fastest for the three things people actually arrive wanting: where
     it is, when it is open, and where to put the car. Parking gets its own
     block because the Electric Works garage is genuinely hard to find and the
     street-parking question comes up every week.

     The labels are small Lora in sentence case, not the uppercase .eyebrow
     treatment -- four tracked-out caps stacked down a column read as a form
     and fight the one real eyebrow at the top of the section. Hairlines carry
     the rhythm instead. */
  .visit { display: grid; grid-template-columns: minmax(270px, 360px) 1fr; gap: 40px;
           margin-top: 28px; align-items: stretch; }
  .visit-info .openpill { margin-bottom: 20px; }
  .vb { padding-block: 15px; border-top: 1px solid var(--line); }
  .vb:first-of-type { border-top: 0; padding-top: 0; }
  .vb h4 { font-family: Lora, Georgia, "Times New Roman", serif; font-weight: 400;
           font-size: 20px; line-height: 1.2; letter-spacing: -.01em; color: var(--green);
           margin-bottom: 7px; }
  .vb p { font-size: 15.5px; line-height: 1.65; color: var(--ink-2); }
  .vb p b { color: var(--ink); font-weight: 700; }
  .vb a { color: var(--green); font-weight: 700; }
  .vb-note { display: inline-block; margin-top: 3px; color: var(--ink-3); font-size: 14.5px; }
  .vb ul { list-style: none; }
  .vb ul li { position: relative; padding-left: 15px; margin-bottom: 8px;
              font-size: 15.5px; line-height: 1.6; color: var(--ink-2); }
  .vb ul li:last-child { margin-bottom: 0; }
  .vb ul li::before { content: ""; position: absolute; left: 0; top: .62em;
                      width: 5px; height: 5px; border-radius: 50%; background: var(--accent); }
  .vb ul li b { color: var(--ink); font-weight: 700; }
  .visit-info .cta-row { margin-top: 22px; }
  .visit-map { border: 1px solid var(--line); border-radius: 10px; overflow: hidden;
               background: var(--paper); min-height: 470px; }
  .visit-map iframe { display: block; width: 100%; height: 100%; min-height: 470px; border: 0; }
  @media (max-width: 860px) {
    .visit { grid-template-columns: 1fr; gap: 26px; }
    .visit-map, .visit-map iframe { min-height: 320px; height: 320px; }
  }

/* Temporary closure notice. Sits above the sticky header so it scrolls away
   once read rather than eating height on every screen -- the dead order
   buttons further down carry the message after that.

   Deep brand green rather than a warning red: we are shut for a few days, not
   broken, and red would read as an error on the page. */
.closed-bar { background: var(--green-deep); color: var(--cream); }
.closed-bar .wrap { padding-block: 11px; font-size: 15px; line-height: 1.5; }
.closed-bar b { color: #fff; font-weight: 700; }
.closed-bar a { color: var(--sage); font-weight: 700;
                text-underline-offset: 3px; text-decoration: underline; }
.closed-bar a:hover { color: #fff; }

/* A button that has been taken out of service. It keeps the shape of the
   control it replaced so the layout does not shift, but loses the pointer and
   the contrast so it plainly is not waiting to be pressed. */
.is-closed { opacity: .45; cursor: not-allowed; text-decoration: line-through;
             text-decoration-thickness: 1px; }
@media (max-width: 860px) {
  .closed-bar .wrap { padding-block: 10px; font-size: 14px; }
}

/* In-page anchor targets. The header is sticky and 87px tall, so a jump to
   #find or #contact used to land with the section heading tucked underneath
   it. Below 820px the header scrolls away, so the offset comes back off. */
section[id] { scroll-margin-top: 100px; }
@media (max-width: 820px) { section[id] { scroll-margin-top: 14px; } }

/* The Saturday stall band. It borrows .hero-band wholesale -- same scrim, same
   crop behaviour -- and then steps everything down a size, because it sits
   directly above the real hero and two bands shouting at the same volume would
   leave the page with no clear opening. Shorter, smaller type, same voice.

   The crop sits right of centre: the tent and the banners live there, and the
   neighbouring canopy on the left goes dark under the words. */
.band-market { min-height: clamp(360px, 34vw, 560px); }
.band-market > img { object-position: 62% 50%; }
/* The hero's scrim assumes a photograph that is already dark down its left
   side. This one is bright corner to corner, so inheriting that gradient
   turned the whole tent a flat green. This one is heavy under the words and
   then gets out of the way fast, which leaves the iced-tea banners on the
   right in their own colour -- they are the best thing in the picture. */
.band-market::after {
  background: linear-gradient(95deg, rgba(20,48,36,.90) 0%, rgba(20,48,36,.84) 28%,
                              rgba(20,48,36,.46) 46%, rgba(20,48,36,.12) 68%,
                              rgba(20,48,36,0) 88%); }
.band-market .hero { padding-block: 40px; }
.band-market .hero h2 { font-size: clamp(32px, 4.4vw, 50px); color: var(--paper);
                        max-width: 14ch; line-height: 1.06; letter-spacing: -.015em; }
.band-market .hero h2 em { font-style: normal; color: #A9CE86; }
.band-market .hero .lede { font-size: 17.5px; max-width: 34ch; }

/* A ghost button that reads on a dark photograph. The stock .btn-ghost is
   green-on-cream and vanishes here. */
.btn-ghost-light { border-color: rgba(255,255,255,.72); color: #fff; background: transparent; }
.btn-ghost-light:hover { background: #fff; color: var(--green-deep); border-color: #fff; }

@media (max-width: 660px) {
  .band-market { min-height: 340px; }
  .band-market > img { object-position: 64% 42%; }
}

/* The address and hours under the hero lede. Quieter than the lede so the
   brand line still lands first, but it is the thing a visitor has actually
   come for, so it sits above the buttons rather than down in the footer. */
.hero .hero-where { margin-top: 14px; font-size: 16px; line-height: 1.6;
                    color: #C9D9C6; max-width: 40ch; }
.hero .hero-where b { color: var(--paper); font-weight: 700; }

  /* =====================================================================
     2026-11 refresh. Layout, type and spacing take a cue from a warm,
     editorial restaurant look: a centred masthead under a slim info bar,
     tracked uppercase nav, pill buttons and pill eyebrows, rounder photo
     frames with a soft lift, bigger serif headings and more air between
     sections. Every colour below is one already in the palette above.
     ===================================================================== */

  body { font-family: Inter, ui-sans-serif, system-ui, -apple-system, "Segoe UI", sans-serif;
         font-size: 16.5px; }
  h1, h2 { font-weight: 600; letter-spacing: -.012em; line-height: 1.06; }
  h1 { font-weight: 500; }

  /* ---------- slim info bar ---------- */
  .topbar { background: var(--green-deep); color: var(--sage); font-size: 13px; }
  .topbar .wrap { display: flex; justify-content: space-between; align-items: center;
                  gap: 16px; padding-block: 7px; flex-wrap: wrap; }
  .topbar a { color: var(--cream); text-decoration: none; }
  .topbar a:hover { text-decoration: underline; }
  .tb-l, .tb-r { display: flex; gap: 22px; align-items: center; flex-wrap: wrap; }
  .tb-addr, .tb-hours { color: var(--sage); }
  @media (max-width: 720px) { .tb-addr { display: none; } }

  /* ---------- centred masthead ---------- */
  header { padding-block: 18px 12px; border-bottom: 1px solid var(--line);
           box-shadow: 0 10px 24px -20px rgba(20,48,36,.45); }
  /* Logo and name on their own line, then nav and the two buttons share one. */
  .bar { flex-direction: row; flex-wrap: wrap; justify-content: center; gap: 6px 28px; }
  .bar .brand { flex: 1 0 100%; flex-direction: column; justify-content: center; gap: 6px;
                text-align: center; margin-bottom: 4px; }
  .bar img { width: 58px; height: 58px; }
  .bar .name { font-size: 28px; font-weight: 600; line-height: 1; }
  nav { margin-left: 0; justify-content: center; gap: 26px; align-items: center; }
  nav a { font-size: 13.5px; font-weight: 600; letter-spacing: .07em; text-transform: uppercase;
          color: var(--ink-2); position: relative; padding-block: 8px; }
  nav a::after { content: ''; position: absolute; left: 0; right: 0; bottom: 2px; height: 2px;
                 background: var(--accent); border-radius: 2px; transform: scaleX(0);
                 transition: transform .2s ease; }
  nav a:hover::after, nav a.on::after { transform: scaleX(1); }
  nav a.on { color: var(--green); }
  .bar .btns { margin-left: 0; gap: 10px; }
  .bar .order-btn, .bar .call-btn { border-radius: 999px; padding: 11px 24px; }
  .bar .call-btn { padding: 9px 22px; }
  @media (prefers-reduced-motion: reduce) { nav a::after { transition: none; } }

  /* ---------- pills ---------- */
  .btn { border-radius: 999px; padding: 14px 28px; font-weight: 600; letter-spacing: .01em; }
  .btn-main, .btn-light { box-shadow: 0 10px 22px -12px rgba(20,48,36,.55); }
  .socials a, .ch-apps a, .bld-add { border-radius: 999px; }
  .xlate a { border-radius: 999px; }

  .eyebrow, .kicker { display: inline-flex; align-items: center; gap: 8px;
                      padding: 6px 14px 6px 12px; border-radius: 999px;
                      background: rgba(94,140,63,.12); border: 1px solid rgba(94,140,63,.28);
                      font-size: 12px; letter-spacing: .14em; }
  .eyebrow::before, .kicker::before { content: ''; width: 6px; height: 6px; border-radius: 50%;
                                       background: currentColor; flex: none; }
  /* On the photographs and the green bands the pill goes glassy instead. */
  .hero .eyebrow, .wok .eyebrow, #catering .eyebrow, .ccard.dark .eyebrow {
      background: rgba(255,255,255,.10); border-color: rgba(207,227,208,.35); }

  /* The pill now opens each section, so the rule under the heading steps back. */
  .rule { width: 64px; height: 3px; margin-top: 16px; }

  /* ---------- sections: more air, bigger heads ---------- */
  section { padding-block: 84px; }
  main > section:first-child { padding-top: 60px; }
  section > .wrap > h2 { font-size: clamp(34px, 4.6vw, 54px); }
  .sub { font-size: 17.5px; line-height: 1.6; margin-top: 14px; }
  .hero h1 { font-size: clamp(44px, 6.6vw, 76px); line-height: 1.02; }
  .hero .lede { font-size: 19.5px; }

  /* Best sellers and similar heads read centred, like a menu board. */
  #food > .wrap, #wild > .wrap, #reviews > .wrap { text-align: center; }
  #food .rule, #wild .rule, #reviews .rule { margin-inline: auto; }
  #food .sub, #wild .sub, #reviews .sub { margin-inline: auto; }

  /* ---------- photo frames: rounder, with a soft lift ---------- */
  .pic, .slides .pic, .card .shot, .loc-shot, .about-shot img, .cat-grid .shot img,
  .ig a { border-radius: 20px; }
  .pic, .loc-shot, .about-shot img, .cat-grid .shot img {
      box-shadow: 0 22px 44px -22px rgba(20,48,36,.55); }
  .card, .ccard, .ch, .ord, .bld, .quotes blockquote { border-radius: 18px; }
  .card, .ch, .ord, .quotes blockquote { box-shadow: 0 14px 30px -24px rgba(20,48,36,.5); }
  .favs h3 { font-family: Lora, Georgia, serif; font-weight: 600; font-size: 21px; margin-top: 16px; }
  .contact { border-radius: 24px; padding: 64px 32px; }
  .lunch { border-radius: 18px; }

  /* ---------- ticker ---------- */
  .ticker { background: var(--green); color: var(--cream); overflow: hidden;
            border-block: 1px solid var(--green-deep); }
  .ticker-track { display: flex; width: max-content; animation: tick 38s linear infinite; }
  .ticker span { font-family: Lora, Georgia, serif; font-weight: 600; font-size: 19px;
                 padding: 16px 0; white-space: nowrap; display: inline-flex; align-items: center; }
  .ticker span::after { content: ''; width: 6px; height: 6px; border-radius: 50%;
                        background: #A9CE86; margin-inline: 30px; }
  @keyframes tick { to { transform: translateX(-50%); } }
  @media (prefers-reduced-motion: reduce) {
    .ticker-track { animation: none; flex-wrap: wrap; width: auto; justify-content: center; }
  }

  /* ---------- footer: a dark band to close the page ---------- */
  footer { background: var(--green-deep); color: var(--sage); padding-block: 44px 52px;
           font-size: 14.5px; line-height: 1.7; }
  footer a { color: var(--cream); }

  @media (max-width: 820px) {
    .tb-addr { display: none; }
    header { padding-block: 14px 8px; }
    .bar { flex-direction: row; flex-wrap: wrap; justify-content: space-between; }
    .bar .brand { flex-direction: row; gap: 10px; }
    .bar .name { font-size: 22px; }
    .bar .btns { margin-left: auto; }
    .bar .order-btn, .bar .call-btn { padding: 9px 14px; }
    nav { gap: 6px 18px; justify-content: flex-start; }
    nav a { font-size: 12.5px; letter-spacing: .05em; }
    section { padding-block: 60px; }
  }

  /* The review ask keeps its own left alignment inside the centred section. */
  .review { text-align: left; }
  .review .rule { margin-inline: 0; }
  /* A tall centred masthead is a lot to keep pinned, so it tightens a little. */
  header { padding-block: 12px 8px; }
  .bar img { width: 48px; height: 48px; }
  .bar .name { font-size: 25px; }

  /* Phone: logo and the two buttons share the first line, nav wraps tight below. */
  @media (max-width: 820px) {
    .bar { justify-content: space-between; gap: 8px 10px; }
    .bar .brand { flex: 0 1 auto; flex-direction: row; margin-bottom: 0; text-align: left; }
    .bar img { width: 40px; height: 40px; }
    .bar .name { font-size: 21px; }
    nav { gap: 0 16px; }
    nav a { padding-block: 6px; }
  }
  @media (max-width: 360px) {
    .bar .name { display: none; }
  }

  /* =====================================================================
     2026-11 round 2. Tyla wanted it closer to the warm editorial reference:
     a solid coloured masthead, a LIGHT opening with a rounded photo card,
     two-column story sections, tall photo category cards, a three-step
     how-to, a big closing footer and a back-to-top button. Same greens and
     cream as above -- the reference's red becomes our deep green.
     ===================================================================== */

  h1, h2 { color: var(--green-deep); }

  /* ---------- solid green masthead ---------- */
  .topbar { background: var(--green); border-bottom: 1px solid rgba(255,255,255,.08); }
  header.mast { background: var(--green); border-bottom: 0; backdrop-filter: none;
                box-shadow: 0 12px 26px -16px rgba(20,48,36,.7); }
  .brand-txt { display: flex; flex-direction: column; align-items: center; }
  .mast .name { color: var(--paper); }
  .sub-tag { display: block; margin-top: 5px; font: 700 10.5px/1 Inter, sans-serif;
             letter-spacing: .2em; text-transform: uppercase; color: #A9CE86; }
  .mast .bar img { box-shadow: 0 0 0 2px rgba(247,243,232,.6); }
  .mast nav a { color: rgba(247,243,232,.8); }
  .mast nav a:hover, .mast nav a.on { color: #fff; }
  .mast nav a::after { background: #A9CE86; }
  .mast .call-btn { color: var(--paper); border-color: rgba(247,243,232,.5);
                    background: rgba(255,255,255,.08); }
  .mast .call-btn:hover { background: var(--paper); color: var(--green); border-color: var(--paper); }
  .mast .order-btn { background: var(--accent); }
  .mast .order-btn:hover { background: #6E9C4D; }
  .mast a:focus-visible { outline-color: #A9CE86; }

  /* ---------- light hero with the photo in a rounded card ---------- */
  .hero-light { padding-block: 60px 76px; }
  .hl-grid { display: grid; grid-template-columns: 1.05fr .95fr; gap: 56px; align-items: center; }
  .hero-light h1 { font-size: clamp(44px, 6.4vw, 80px); line-height: 1.03; margin-top: 18px; max-width: 12ch; }
  .hero-light h1 em { font-style: normal; color: var(--accent); }
  .hero-light .lede { margin-top: 20px; font-size: 19.5px; color: var(--ink-2); max-width: 40ch; }
  .hero-light .hero-where { margin-top: 14px; font-size: 16px; line-height: 1.6; color: var(--ink-2); max-width: 42ch; }
  .hero-light .hero-where b { color: var(--ink); }
  .proof { margin-top: 24px; display: flex; align-items: center; gap: 8px;
           font-size: 14.5px; color: var(--ink-3); }
  .proof-ic { color: var(--olive); font-size: 16px; }
  .hl-shot { margin: 0; border-radius: 30px; overflow: hidden; aspect-ratio: 1 / 1;
             box-shadow: 0 34px 64px -30px rgba(20,48,36,.6); background: var(--sage); }
  .hl-shot img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 50%; }

  /* ---------- tinted bands between the cream ones ---------- */
  .tint { background: var(--soft, #F2F5EC); border-block: 1px solid var(--line); }

  /* ---------- two-column story sections ---------- */
  .split-grid { display: grid; grid-template-columns: 1fr 1.05fr; gap: 56px; align-items: center; }
  .split-grid.flip .split-shot { order: 2; }
  .split-shot { border-radius: 30px; overflow: hidden; aspect-ratio: 4 / 3; background: var(--green-deep);
                box-shadow: 0 30px 60px -30px rgba(20,48,36,.6); }
  .split-shot img, .split-shot video { width: 100%; height: 100%; object-fit: cover; display: block; }
  .split-body h2 { font-size: clamp(32px, 4vw, 50px); margin-top: 16px; }
  .split-body .sub { color: var(--ink-2); }
  @media (prefers-reduced-motion: reduce) {
    #wok .split-shot video { display: none; }
    #wok .split-shot { background: var(--green-deep) url("video/wok-poster.jpg") center/cover; }
  }
  .stats { display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; margin-top: 30px; }
  .stat { background: var(--paper); border-radius: 18px; padding: 22px 10px; text-align: center;
          box-shadow: 0 16px 32px -24px rgba(20,48,36,.55); }
  .stat b { display: block; font-family: Lora, Georgia, serif; font-weight: 600; line-height: 1;
            font-size: clamp(30px, 3.4vw, 42px); color: var(--green); }
  .stat span { display: block; margin-top: 9px; font-size: 11px; font-weight: 700; letter-spacing: .12em;
               text-transform: uppercase; color: var(--ink-3); }

  /* ---------- centred section heads ---------- */
  .head-c { text-align: center; }
  .head-c h2 { margin-top: 14px; font-size: clamp(34px, 4.6vw, 54px); }

  /* ---------- tall photo category cards ---------- */
  .cats { display: grid; grid-template-columns: repeat(4, 1fr); gap: 22px; margin-top: 42px; }
  .cat { position: relative; display: block; overflow: hidden; border-radius: 26px; aspect-ratio: 3 / 4;
         text-align: left; text-decoration: none; background: var(--sage);
         box-shadow: 0 24px 46px -26px rgba(20,48,36,.65); }
  .cat img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover;
             transition: transform .5s ease; }
  .cat::after { content: ''; position: absolute; inset: 0;
                background: linear-gradient(180deg, rgba(20,48,36,0) 38%, rgba(20,48,36,.9) 100%); }
  .cat-t { position: absolute; left: 20px; right: 20px; bottom: 20px; z-index: 2; color: #fff;
           font-family: Lora, Georgia, serif; font-weight: 600; font-size: 25px; line-height: 1.1; }
  .cat-t small { display: block; margin-top: 7px; font: 400 13.5px/1.4 Inter, sans-serif; color: #DDE8D9; }
  .cat:hover img { transform: scale(1.05); }
  .cat:focus-visible { outline: 3px solid var(--green); outline-offset: 4px; }
  @media (prefers-reduced-motion: reduce) { .cat img { transition: none; } }
  .cta-row.center { justify-content: center; margin-top: 36px; }

  /* ---------- three steps ---------- */
  .steps { list-style: none; padding: 0; margin: 42px 0 0; display: grid;
           grid-template-columns: repeat(3, 1fr); gap: 22px; }
  .step { background: var(--paper); border-radius: 24px; padding: 34px 26px 30px; text-align: center;
          box-shadow: 0 18px 36px -26px rgba(20,48,36,.55); }
  .step-n { display: inline-grid; place-items: center; width: 48px; height: 48px; border-radius: 50%;
            background: var(--green); color: #fff; font: 600 21px/1 Lora, Georgia, serif; }
  .step h3 { font-family: Lora, Georgia, serif; font-weight: 600; font-size: 23px;
             color: var(--green-deep); margin-top: 16px; }
  .step p { margin-top: 9px; color: var(--ink-2); font-size: 15.5px; line-height: 1.55; }
  .step a { font-weight: 700; }

  /* ---------- big closing footer ---------- */
  footer.site-foot { background: var(--green); color: #CFDDC9; padding-block: 66px 28px;
                     text-align: left; font-size: 15px; }
  .foot-line { font-family: Lora, Georgia, serif; font-weight: 600; text-align: center;
               font-size: clamp(28px, 3.8vw, 46px); line-height: 1.15; color: var(--paper);
               padding-bottom: 38px; border-bottom: 1px solid rgba(255,255,255,.16); }
  .foot-cols { display: grid; grid-template-columns: repeat(3, 1fr); gap: 34px;
               padding-block: 38px; border-bottom: 1px solid rgba(255,255,255,.16); }
  .site-foot h4 { margin: 0 0 12px; font: 700 12.5px Inter, sans-serif; letter-spacing: .16em;
                  text-transform: uppercase; color: var(--paper); }
  .site-foot p { line-height: 1.75; }
  .site-foot a { color: var(--paper); display: inline; padding: 0; }
  .foot-go { display: inline-block !important; margin-top: 10px; text-underline-offset: 4px; }
  .foot-hrs { margin: 0; }
  .foot-hrs div { display: flex; justify-content: space-between; gap: 14px; padding: 8px 0;
                  border-bottom: 1px dotted rgba(255,255,255,.25); }
  .foot-hrs dt { font-size: 14.5px; }
  .foot-hrs dd { margin: 0; font-size: 14.5px; font-weight: 700; color: var(--paper); white-space: nowrap; }
  .foot-soc { display: flex; gap: 10px; flex-wrap: wrap; margin-top: 14px; }
  .site-foot .foot-soc a { display: inline-block; border: 1px solid rgba(255,255,255,.35);
                           border-radius: 999px; padding: 7px 15px; font-size: 13.5px; text-decoration: none; }
  .site-foot .foot-soc a:hover { background: var(--paper); color: var(--green); }
  .foot-bot { display: flex; justify-content: space-between; flex-wrap: wrap; gap: 12px;
              padding-top: 22px; font-size: 13px; }
  .foot-links { display: flex; gap: 20px; flex-wrap: wrap; }
  .site-foot .foot-links a { color: #CFDDC9; text-decoration: none; }
  .site-foot .foot-links a:hover { color: #fff; text-decoration: underline; }

  /* ---------- back to top ---------- */
  .totop { position: fixed; right: 22px; bottom: 22px; z-index: 60; width: 50px; height: 50px;
           border-radius: 50%; display: grid; place-items: center; background: var(--green); color: #fff;
           box-shadow: 0 14px 28px -12px rgba(20,48,36,.7); opacity: 0; pointer-events: none;
           transform: translateY(10px); transition: opacity .25s ease, transform .25s ease; }
  .totop.show { opacity: 1; pointer-events: auto; transform: none; }
  .totop { border: 2px solid rgba(247,243,232,.55); }
  .totop:hover { background: var(--green-deep); }
  .totop:focus-visible { opacity: 1; pointer-events: auto; transform: none; }
  @media (prefers-reduced-motion: reduce) { .totop { transition: none; } }

  @media (max-width: 960px) {
    .hl-grid, .split-grid { grid-template-columns: 1fr; gap: 34px; }
    .split-grid.flip .split-shot { order: 0; }
    .hero-light { padding-block: 36px 56px; }
    .hl-shot { aspect-ratio: 1 / 1; max-width: 520px; margin-inline: auto; }
    .cats { grid-template-columns: repeat(2, 1fr); gap: 14px; }
    .steps { grid-template-columns: 1fr; }
    .foot-cols { grid-template-columns: 1fr; gap: 26px; }
  }
  @media (max-width: 820px) {
    .brand-txt { align-items: flex-start; }
    .sub-tag { font-size: 9px; letter-spacing: .14em; }
  }
  @media (max-width: 520px) {
    .cat { border-radius: 20px; }
    .cat-t { left: 14px; right: 14px; bottom: 14px; font-size: 19px; }
    .cat-t small { font-size: 12px; }
    .stats { gap: 8px; }
    .stat { padding: 16px 6px; }
    .stat span { font-size: 9.5px; letter-spacing: .08em; }
    .totop { right: 14px; bottom: 14px; width: 44px; height: 44px; }
  }

  .hero-deliver { margin-top: 14px; font-size: 15px; color: var(--ink-soft, #4a5a50); }
  .hero-deliver a { color: var(--green); font-weight: 600; }

  /* ---------- info bar, tidy ---------- */
  .topbar { font-size: 13px; letter-spacing: .01em; }
  .topbar .wrap { display: flex; justify-content: space-between; align-items: center; gap: 12px 28px;
                  padding-block: 9px; flex-wrap: wrap; }
  .tb-l, .tb-r { display: flex; align-items: center; gap: 26px; flex-wrap: wrap; }
  .tb-item { display: inline-flex; align-items: center; gap: 8px; color: rgba(245,241,228,.86); }
  a.tb-item:hover { color: #fff; text-decoration: none; }
  .tb-ic { width: 14px; height: 14px; fill: var(--sage, #b9cf9a); flex: none; }
  .tb-hours, .tb-addr { color: rgba(245,241,228,.86); }
  .tb-soc { display: inline-flex; width: 28px; height: 28px; align-items: center; justify-content: center;
            border-radius: 50%; border: 1px solid rgba(245,241,228,.22); }
  .tb-soc .tb-ic { width: 14px; height: 14px; fill: rgba(245,241,228,.9); }
  .tb-soc:hover { background: rgba(255,255,255,.1); }
  .tb-r { gap: 14px; }
  .tb-r .tb-addr { margin-right: 10px; }
  @media (max-width: 860px) { .tb-addr { display: none; } }
  @media (max-width: 520px) { .tb-hours { display: none; } .topbar .wrap { justify-content: space-between; } }

  /* bigger info bar */
  .topbar { font-size: 15px; }
  .topbar .wrap { padding-block: 13px; }
  .tb-ic { width: 17px; height: 17px; }
  .tb-soc { width: 34px; height: 34px; }
  .tb-soc .tb-ic { width: 16px; height: 16px; }

  /* ---------- photo menu ---------- */
  .dsec-jump { display: flex; flex-wrap: wrap; gap: 10px; margin: 30px 0 8px; }
  .dsec-jump a { padding: 8px 18px; border-radius: 999px; background: var(--soft); color: var(--green);
                 border: 1px solid var(--line); font-weight: 600; font-size: 15px; text-decoration: none; }
  .dsec-jump a:hover { background: var(--sage); }
  .dsec { margin-top: 46px; scroll-margin-top: 190px; }
  .dsec-h { display: flex; justify-content: space-between; align-items: flex-end; gap: 16px;
            flex-wrap: wrap; padding-bottom: 14px; border-bottom: 1px solid var(--line); margin-bottom: 24px; }
  .dsec-h h3 { font-family: Lora, Georgia, serif; font-weight: 600; font-size: clamp(28px, 3.4vw, 38px);
               color: var(--green); margin: 0; line-height: 1.1; }
  .dsec-sub { margin: 6px 0 0; color: var(--ink-3); font-size: 15px; }
  .dsec-go { border-radius: 999px; padding: 11px 22px; font-size: 15px; }
  .dsec-note { margin: 16px 2px 0; color: var(--ink-3); font-size: 14.5px; }
  .dish-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 22px; }
  .dish { background: var(--paper); border-radius: 22px; overflow: hidden; display: flex; flex-direction: column;
          box-shadow: 0 18px 36px -26px rgba(20,48,36,.45); border: 1px solid rgba(31,71,51,.06); }
  .dish-ph { aspect-ratio: 4 / 3; background: var(--soft); overflow: hidden; }
  .dish-ph img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform .4s ease; }
  .dish:hover .dish-ph img { transform: scale(1.04); }
  .dish-ph--none { display: flex; align-items: center; justify-content: center;
                   background: linear-gradient(135deg, var(--soft), var(--sage)); }
  .dish-ph--none span { font-family: Lora, Georgia, serif; font-size: 22px; color: rgba(31,71,51,.35); }
  .dish-b { padding: 16px 18px 20px; display: flex; flex-direction: column; gap: 6px; flex: 1; }
  .dish-top { display: flex; justify-content: space-between; align-items: baseline; gap: 10px; }
  .dish h4 { margin: 0; font-family: Lora, Georgia, serif; font-weight: 600; font-size: 19px;
             line-height: 1.2; color: var(--ink); }
  .dish-pr { font-weight: 700; color: var(--green); font-size: 16px; white-space: nowrap; }
  .dish-d { margin: 0; color: var(--ink-2); font-size: 14.5px; line-height: 1.5; }
  @media (max-width: 640px) {
    .dish-grid { grid-template-columns: 1fr 1fr; gap: 12px; }
    .dish { border-radius: 16px; }
    .dish-b { padding: 11px 12px 14px; }
    .dish-top { flex-direction: column; gap: 2px; }
    .dish h4 { font-size: 16px; }
    .dish-pr { font-size: 14.5px; }
    .dish-d { font-size: 13px; }
    .dsec-go { width: 100%; text-align: center; }
    .dsec { scroll-margin-top: 20px; }
  }

  .dish h4 .bs { margin-left: 5px; font-size: .8em; color: var(--olive); }

  .dish-tag { display: inline-block; margin: 0 4px 4px 0; padding: 2px 9px; border-radius: 999px;
              font-size: 11px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase;
              background: #f3e3b5; color: #7a5a12; }
  .dish-d a { color: var(--green); font-weight: 600; }

  /* social pills with names */
  .tb-soc { width: auto; height: 34px; padding: 0 14px 0 11px; gap: 8px; border-radius: 999px;
            color: rgba(245,241,228,.9); font-size: 14px; }
  .tb-soc:hover { color: #fff; text-decoration: none; }
  @media (max-width: 520px) { .tb-soc span { display: none; } .tb-soc { width: 34px; padding: 0; } }

  /* join page, flyer style */
  .role h3 { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; flex-wrap: wrap; }
  .role-pay { font-family: Inter, system-ui, sans-serif; font-size: 16px; font-weight: 700; color: var(--green);
              background: #e7efdc; padding: 4px 12px; border-radius: 999px; white-space: nowrap; }
  .role-list { margin: 12px 0 0; padding-left: 20px; line-height: 1.55; }
  .role-list li { margin-bottom: 6px; }
  .perks { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 22px; }
  .perks span { padding: 7px 16px; border-radius: 999px; background: var(--green); color: #f5f1e4;
                font-weight: 600; font-size: 14px; }

  /* calmer Lora: lower optical size = plainer "f", less swash */
  h1, h2, h3, h4, .bar .name, .brand .name, .lunch .when, .cat-t, .foot-line {  }

  .head-center { text-align: center; }
  .head-center .rule { margin-inline: auto; }

  /* ---------- centered layout, site-wide ---------- */
  section > .wrap > .eyebrow { display: table; margin-inline: auto; }
  section > .wrap > h1, section > .wrap > h2, section > .wrap > h3 { text-align: center; }
  section > .wrap > .rule, .rule { margin-inline: auto; }
  section > .wrap > .sub, section > .wrap > p.sub, .mnote, .mlegend, .formnote { text-align: center; margin-inline: auto; }
  .cta-row, .perks, .ch-apps { justify-content: center; }
  .dsec-h { flex-direction: column; align-items: center; text-align: center; gap: 12px; }
  .ch { text-align: center; }
  .ch .btn { margin-inline: auto; }
  .role { text-align: center; }
  .role h3 { justify-content: center; }
  .role-list { list-style-position: inside; padding-left: 0; }
  .hl-copy, .split-body { text-align: center; }
  .hl-copy .eyebrow, .split-body .eyebrow { margin-inline: auto; }
  .hl-copy .proof { justify-content: center; }
  .site-foot .foot-cols { text-align: center; }
  .site-foot .foot-cols .hours-row, .site-foot .foot-cols dl { margin-inline: auto; }
  .foot-soc, .site-foot .pills { justify-content: center; }
  .head-c, .head-center { text-align: center; }
  .hl-copy p, .split-body p, .ch p, section > .wrap > .sub { margin-inline: auto; }
  /* catering: no dead gap between the header and the trays */
  #cat-top { padding-bottom: 18px; border-bottom: 0; }
  #cat-menu { padding-top: 18px; border-top: 0; }
  .applyform { margin-inline: auto; } .applyform div.wide { text-align: center; }

/* specialties split into one row per dish */
.dline { font-family: Lora, Georgia, serif; font-weight: 600; font-size: 22px; color: var(--green);
  text-align: center; margin: 30px 0 14px; }
.dsec-h + .dline { margin-top: 6px; }
@media (min-width: 761px) { #entrees .dish-grid { grid-template-columns: repeat(3, 1fr); } }
#sweets .dish-grid { grid-template-columns: repeat(2, minmax(0, 300px)); justify-content: center; }
/* bigger delivery app buttons */
#delivery .ch-apps { flex-direction: column; align-items: stretch; gap: 12px; margin-top: 20px; }
#delivery .ch-apps a { font-size: 19px; padding: 16px 28px; text-align: center; }

/* food-first video hero + flyer banner */
.vhero { position: relative; height: min(calc(100vh - 230px), 760px); min-height: 380px; overflow: hidden; background: #1b2a20; }
.vhero video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.vhero::after { content: ''; position: absolute; inset: 0;
  background: linear-gradient(to top, rgba(10,20,14,.72) 0%, rgba(10,20,14,.15) 45%, rgba(10,20,14,0) 70%); }
.vhero-copy { position: absolute; left: 0; right: 0; bottom: 48px; z-index: 1; text-align: center; padding: 0 16px; }
.vhero-copy h1 { color: #fff; font-family: Lora, Georgia, serif; font-weight: 600;
  font-size: clamp(34px, 5vw, 60px); line-height: 1.08; margin: 0 0 22px; text-shadow: 0 2px 18px rgba(0,0,0,.35); }
.vhero-copy .cta-row { justify-content: center; }
.vhero-copy .btn-ghost { background: rgba(255,255,255,.92); color: var(--green); border-color: transparent; }
.table-banner img { display: block; width: 100%; height: clamp(150px, 22vw, 340px); object-fit: cover; }
#wok .split-shot img { width: 100%; height: auto; border-radius: 24px; display: block; }
@media (max-width: 640px) { .vhero { height: 66vh; } .vhero-copy { bottom: 30px; } }
/* banner as a rounded card like on the flyer, full photo, no crop */
.table-banner { padding: 40px 0 8px; background: var(--paper, #fbfaf4); }
.table-banner img { height: auto; aspect-ratio: 2000 / 539; border-radius: 22px;
  box-shadow: 0 14px 36px rgba(20,40,28,.14); }
@media (max-width: 640px) { .table-banner { padding: 22px 0 4px; } .table-banner img { border-radius: 16px; aspect-ratio: 3 / 2; object-position: 50% 50%; } }
/* banner flows into the section below — same tint, no seam */
.table-banner { background: var(--soft, #F2F5EC); padding: 44px 0 0; }
.table-banner + #wok { border-top: 0; }
/* hero shows the key info, centered */
.vhero-copy h1 { max-width: none; margin-inline: auto; font-size: clamp(28px, 4vw, 48px); margin-bottom: 10px; }
.vhero-info { color: #fff; font-size: clamp(15px, 1.6vw, 19px); font-weight: 600; margin: 0 auto 22px;
  text-shadow: 0 1px 10px rgba(0,0,0,.45); }
#wok .split-grid { align-items: center; }
#wok .split-shot img { aspect-ratio: 4 / 3; object-fit: cover; }
/* hero text centered in the middle of the video, both ways */
.vhero-copy { top: 0; bottom: 0; display: flex; flex-direction: column; justify-content: center; align-items: center; }
.vhero::after { background: rgba(10,20,14,.38); }
@media (max-width: 640px) { .vhero-copy { bottom: 0; } }

/* ---- compact mobile/tablet header: one brand row + one swipeable nav row ---- */
@media (max-width: 900px) {
  .topbar { display: none; }
  header.mast { position: sticky; top: 0; padding-block: 8px 0; }
  header.mast .bar { display: grid; grid-template-columns: 1fr auto; grid-template-areas: "brand btns" "nav nav";
    align-items: center; gap: 6px 10px; text-align: left; }
  header.mast .brand { grid-area: brand; flex-direction: row; justify-content: flex-start; gap: 10px; margin: 0; }
  header.mast .brand img { width: 38px; height: 38px; }
  header.mast .brand-txt { align-items: flex-start; text-align: left; }
  header.mast .brand .name { font-size: 19px; }
  header.mast .sub-tag { display: none; }
  header.mast .btns { grid-area: btns; display: flex; gap: 8px; margin: 0; }
  header.mast .btns a { padding: 8px 14px; font-size: 13.5px; }
  header.mast nav { grid-area: nav; display: flex; flex-wrap: nowrap; justify-content: flex-start; gap: 18px;
    overflow-x: auto; -webkit-overflow-scrolling: touch; scrollbar-width: none; padding: 6px 2px 10px; margin: 0; }
  header.mast nav::-webkit-scrollbar { display: none; }
  header.mast nav a { white-space: nowrap; font-size: 12.5px; flex: 0 0 auto; }
  .vhero { height: 58vh; min-height: 300px; }
}
@media (max-width: 420px) { header.mast .call-btn { display: none; } }
@media (max-width: 520px) {
  .vhero-copy .cta-row { flex-wrap: nowrap; gap: 10px; }
  .vhero-copy .cta-row .btn { padding: 12px 16px; font-size: 14.5px; white-space: nowrap; }
  .vhero-copy h1 { font-size: 26px; }
  .vhero-info { font-size: 14px; }
}
@media (max-width: 640px) { .vhero-info span { display: block; } .vhero-info .vi-sep { display: none; } }
/* lunch section */
.lunch-when { text-align: center; margin: 4px 0 0; color: var(--green); font-weight: 700; font-size: 15px; }
.lunch-more { text-align: center; margin: 14px auto 0; max-width: 62ch; color: var(--ink-2); font-size: 15px; line-height: 1.6; }
@media (min-width: 761px) { #lunch .lunch-deals { grid-template-columns: repeat(3, 1fr); } }
@media (max-width: 760px) {
  .dish-grid > .dish:last-child:nth-child(odd) { grid-column: 1 / -1; justify-self: center; width: calc(50% - 6px); }
}

/* mobile header v2: social icons in the top row, nav wraps so every link shows */
.hd-soc { display: none; }
@media (max-width: 900px) {
  header.mast .btns { align-items: center; gap: 6px; }
  .hd-soc { display: inline-flex; align-items: center; justify-content: center; width: 34px; height: 34px;
    border-radius: 999px; border: 1px solid rgba(255,255,255,.35); color: var(--cream, #f6f1e4); }
  .hd-soc svg { width: 16px; height: 16px; fill: currentColor; }
  header.mast nav { flex-wrap: wrap; justify-content: center; overflow: visible; gap: 4px 16px; padding: 6px 0 10px; }
  header.mast nav a { font-size: 12px; }
}
@media (max-width: 420px) { header.mast .brand .name { font-size: 17px; } header.mast .brand img { width: 34px; height: 34px; } }
@media (max-width: 900px) {
  header.mast .hd-soc svg { width: 17px !important; height: 17px !important; fill: #f6f1e4 !important; display: block; }
  header.mast .brand .name { white-space: nowrap; }
}
@media (max-width: 900px) { header.mast .btns a.hd-soc { padding: 0; flex: 0 0 34px; } }

/* mobile header v3: brand centered, then icons + buttons centered, then all nav links */
@media (max-width: 900px) {
  header.mast .bar { grid-template-columns: 1fr; grid-template-areas: "brand" "btns" "nav"; justify-items: center; gap: 8px; }
  header.mast .brand { justify-content: center; }
  header.mast .btns { justify-content: center; flex-wrap: nowrap; gap: 8px; }
  header.mast .btns a.call-btn, header.mast .btns a.order-btn { display: inline-flex; align-items: center; white-space: nowrap; padding: 8px 16px; font-size: 13.5px; }
  header.mast nav { padding-top: 2px; }
}
@media (max-width: 420px) { header.mast .call-btn { display: inline-flex !important; } }

/* menu page: tighter top, less empty space */
#menu { padding-top: 34px; }
#menu > .wrap > h2.big { font-size: clamp(38px, 4.6vw, 56px); }
#menu > .wrap > .rule { margin-top: 12px; margin-bottom: 0; }
#menu .dsec { margin-top: 30px; }
#menu .dsec-h { gap: 8px; padding-bottom: 12px; margin-bottom: 4px; }
#menu .dsec-h h3 { font-size: clamp(26px, 3vw, 34px); }
#menu .dsec-go { padding: 8px 18px; font-size: 14px; }
#menu .lunch-when { margin-top: 2px; }
#menu .dline { margin: 18px 0 12px; }
@media (max-width: 640px) { #menu { padding-top: 22px; } #menu .dsec-go { width: auto; } }
/* form honeypot (hidden from people) + sent state */
.applyform .hp { position: absolute !important; left: -9999px !important; width: 1px; height: 1px; overflow: hidden; }
.formnote.sent { color: var(--green); font-weight: 700; font-size: 16px; }
.applyform input[type=file] { padding: 10px; background: #fff; }
.holiday-bar .wrap { text-align: center; }
@media (max-width: 900px) { .holiday-bar { display: block; } }
/* homepage lunch promo */
.lunch-promo { display: grid; grid-template-columns: 1.1fr 1fr; gap: 0; align-items: stretch; text-decoration: none; color: inherit;
  background: #fff; border-radius: 22px; overflow: hidden; box-shadow: 0 12px 30px rgba(20,40,28,.12); margin: 6px 0 26px; }
.lunch-promo img { width: 100%; height: 100%; object-fit: cover; display: block; min-height: 240px; }
.lunch-promo .lp-t { display: flex; flex-direction: column; justify-content: center; align-items: center; text-align: center; gap: 8px; padding: 26px 22px; }
.lp-k { font-size: 12.5px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--green); }
.lp-h { font-family: Lora, Georgia, serif; font-weight: 600; font-size: clamp(24px, 2.8vw, 34px); line-height: 1.15; color: var(--ink); }
.lp-s { font-size: 15px; color: var(--ink-2); max-width: 34ch; }
.lunch-promo .btn { margin-top: 6px; }
@media (max-width: 700px) { .lunch-promo { grid-template-columns: 1fr; } .lunch-promo img { min-height: 0; aspect-ratio: 4/3; } }
/* commission-free DoorDash Direct button on the delivery card */
#delivery .direct-dd { display: block; width: 100%; text-align: center; font-size: 18px; padding: 16px 24px; margin-top: 18px; }
#delivery .direct-note { margin-top: 8px; }
#delivery .ch-or { margin: 14px 0 -6px; font-size: 13px; letter-spacing: .06em; text-transform: uppercase; color: var(--ink-3); text-align: center; }
/* lunch promo v2: a slim strip, so the Fan Favorites stay on screen */
.lunch-promo { grid-template-columns: 220px 1fr; border-radius: 18px; margin: 0 0 22px; }
.lunch-promo img { min-height: 0; height: 150px; }
.lunch-promo .lp-t { flex-direction: row; flex-wrap: wrap; justify-content: space-between; align-items: center; text-align: left; gap: 6px 18px; padding: 16px 24px; }
.lunch-promo .lp-t > span:not(.btn) { flex: 1 1 100%; }
.lunch-promo .lp-k, .lunch-promo .lp-h, .lunch-promo .lp-s { flex: 0 0 auto !important; }
.lunch-promo .lp-h { font-size: clamp(20px, 2.2vw, 26px); }
.lunch-promo .lp-s { font-size: 14px; max-width: none; }
.lunch-promo .btn { margin: 0; padding: 10px 18px; font-size: 14px; }
@media (max-width: 700px) {
  .lunch-promo { grid-template-columns: 110px 1fr; }
  .lunch-promo img { height: 100%; min-height: 110px; aspect-ratio: auto; }
  .lunch-promo .lp-t { padding: 12px 14px; gap: 4px; }
  .lunch-promo .lp-s { display: none; }
  .lunch-promo .btn { padding: 8px 14px; font-size: 13px; }
}
.lunch-promo .lp-t { display: grid; grid-template-columns: 1fr auto; align-content: center; justify-items: start; gap: 2px 20px; }
.lunch-promo .lp-t > .lp-k, .lunch-promo .lp-t > .lp-h, .lunch-promo .lp-t > .lp-s { grid-column: 1; }
.lunch-promo .lp-t > .btn { grid-column: 2; grid-row: 1 / span 3; align-self: center; }
@media (max-width: 700px) { .lunch-promo .lp-t { grid-template-columns: 1fr; } .lunch-promo .lp-t > .btn { grid-column: 1; grid-row: auto; margin-top: 6px; } }
#food .head-c + .lunch-promo { margin-top: 26px; }
/* bigger logo */
header.mast .brand img { width: 88px !important; height: 88px !important; }
@media (max-width: 900px) { header.mast .brand img { width: 56px !important; height: 56px !important; } header.mast .brand .name { font-size: 22px; } }
@media (max-width: 420px) { header.mast .brand img { width: 50px !important; height: 50px !important; } header.mast .brand .name { font-size: 20px; } }

/* community page */
.feature-video { max-width: 900px; margin: 26px auto 0; text-align: center; }
.vid16x9 { position: relative; aspect-ratio: 16/9; border-radius: 20px; overflow: hidden; box-shadow: 0 14px 36px rgba(20,40,28,.16); margin-top: 12px; background: #000; }
.vid16x9 iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }
.comm-split { display: grid; grid-template-columns: minmax(0, 420px) 1fr; gap: 36px; align-items: center; max-width: 960px; margin: 56px auto 0; }
.comm-txt { text-align: left; }
.comm-txt h3 { font-family: Lora, Georgia, serif; font-size: clamp(26px, 3vw, 34px); margin: 10px 0 8px; color: var(--ink); }
.comm-txt p { color: var(--ink-2); font-size: 17px; line-height: 1.6; }
.comm-h { font-family: Lora, Georgia, serif; font-size: clamp(26px, 3vw, 34px); text-align: center; margin: 60px 0 18px; color: var(--ink); }
.ig-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: 18px; align-items: start; }
.ig-grid .instagram-media, .comm-ig .instagram-media { min-width: 0 !important; width: 100% !important; margin: 0 !important; }
.press { list-style: none; padding: 0; margin: 0 auto; max-width: 760px; }
.press li { display: flex; justify-content: space-between; gap: 16px; padding: 14px 4px; border-bottom: 1px solid var(--line); }
.press a { color: var(--green); font-weight: 600; text-decoration: none; }
.press a:hover { text-decoration: underline; }
.press span { color: var(--ink-3); font-size: 14px; white-space: nowrap; }
@media (max-width: 760px) { .comm-split { grid-template-columns: 1fr; } .comm-txt { text-align: center; } .press li { flex-direction: column; gap: 2px; text-align: center; } }
.comm-sub { text-align: center; color: var(--ink-2); margin: -6px auto 22px; max-width: 60ch; }
.comm-sub a { color: var(--green); font-weight: 600; }
.ev-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(320px, 1fr)); gap: 22px; align-items: start; }
.ev { background: #fff; border-radius: 20px; box-shadow: 0 10px 28px rgba(20,40,28,.10); padding: 18px 16px 16px; }
.ev-t { text-align: left; padding: 0 4px 12px; }
.ev-k { font-size: 12px; font-weight: 700; letter-spacing: .07em; text-transform: uppercase; color: var(--green); }
.ev h4 { font-family: Lora, Georgia, serif; font-size: 22px; line-height: 1.2; margin: 6px 0 6px; color: var(--ink); }
.ev p { margin: 0; color: var(--ink-2); font-size: 15px; line-height: 1.55; }
.ev .instagram-media { min-width: 0 !important; width: 100% !important; margin: 0 !important; box-shadow: none !important; border: 1px solid var(--line) !important; }

/* Instagram embeds: crop to header + media so like counts/comments stay hidden */
.igcrop { position: relative; width: 100%; max-width: 400px; margin: 0 auto; overflow: hidden; border-radius: 12px; border: 1px solid var(--line); background: #fff; }
.igcrop::before { content: ""; display: block; padding-top: calc(54px + var(--r) * 100%); }
.igcrop iframe { position: absolute; top: 0; left: 0; width: 100%; height: 1200px; border: 0; }