/* 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;
  }

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

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

  h1, h2 { font-family: Gloock, 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: Outfit, 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: Outfit, 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: 1040px; margin-inline: auto; padding-inline: 20px; }
  .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: Gloock, 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: 20px; flex-wrap: wrap; }
  nav a { font-size: 15px; 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: 46px; }
  #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; }

  .find { display: grid; grid-template-columns: repeat(auto-fit, minmax(290px, 1fr)); gap: 18px; margin-top: 30px; }
  .place { background: var(--paper); border: 1px solid var(--line); border-top: 4px solid var(--green); border-radius: 8px; padding: 24px; }
  .place .pic { aspect-ratio: 4 / 3; overflow: hidden; border-radius: 6px; margin-bottom: 16px; }
  .place .pic img { width: 100%; height: 100%; object-fit: cover; }
  .place h3 { font-size: 20px; }

  /* 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; }
  /* Best sellers ride the same track, four across on a desktop, one swipe on a
     phone instead of six screens of scrolling. Must sit after .slides figure:
     same specificity, so it only wins on source order. */
  /* Centre-focus: the middle card is full size, its neighbours sit back so the
     eye lands on one dish at a time. The side padding is what lets the first
     and last cards reach the middle of the track. */
  .favs { --w: clamp(230px, 34vw, 380px); 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; } }
  .slides .pic { aspect-ratio: 4 / 3; overflow: hidden; border-radius: 10px; background: var(--sage); }
  .slides .pic img { width: 100%; height: 100%; object-fit: cover; }
  .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; }
  .dots button[aria-current="true"] { background: var(--green); }
  @media (prefers-reduced-motion: reduce) { .slides { scroll-behavior: auto; } }
  .place p { margin-top: 8px; color: var(--ink-2); font-size: 15.5px; }
  .place .row { margin-top: 8px; display: flex; flex-direction: column; font-size: 15.5px; }
  .place .row a { font-weight: 600; text-decoration: none; padding-block: 10px; }

  .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: Gloock, 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: Gloock, Georgia, serif; font-size: 23px; line-height: 1.15; }
  .lunch .when span { display: block; font-family: Outfit, 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: Gloock, 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(186px, 32vw); height: auto; mix-blend-mode: multiply; }

  /* ---------- 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: Gloock, 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: Gloock, 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 ---------- */
  .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: Outfit, 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: 132px; 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; }
  }