/* Blackbox Sandwiches.

   Claire drew this design in Figma on 24 Sep 2026 and chose it the same day; the
   design that came before it was deleted.

   Everything here comes off her file, not off a guess:

     type     Bitter for display at 500, Karla for body at 400, both chosen
              on design/type-playground.html on 24 Sep 2026. Her values:
              display 103% leading and -0.002em tracking, body 16 / 160%.
              (Her Figma page was set in Young Serif and Epilogue; those
              read too cozy on the built pages.)
     color    the five fills in her SVG export, counted, no others:
              #181313 near-black, #FBE9CE cream, #D46917 orange,
              #A1A1A8 gray on the dark, #6E6B64 gray on the cream.
     photos   every one is the file she placed, matched back to the original
              in media/food-photos by fingerprint and cut by make-images.py. */

:root {
  --ink:    #181313;
  --cream:  #FBE9CE;
  --orange: #D46917;
  --dim:    #A1A1A8;   /* secondary type on the dark */
  --warm:   #6D6A63;   /* secondary type on the cream. One step darker than
                          #6E6B64, which measured 4.47:1 and missed the 4.5
                          contrast floor by a hair. This is 4.54:1. */
  --hair:   rgba(251, 233, 206, .16);   /* a rule on the dark */

  --display: "Bitter", Georgia, "Times New Roman", serif;
  --body:    "Karla", system-ui, -apple-system, sans-serif;

  --pad:  clamp(20px, 5vw, 72px);
  --wide: 1180px;
}

*, *::before, *::after { box-sizing: border-box; }
[hidden] { display: none !important; }

html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  background: var(--ink);
  color: var(--cream);
  font-family: var(--body);
  font-size: 16px;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
}
/* height:auto matters, and it is the one trap this repo keeps falling into. The
   width/height attributes on an <img> are presentational hints, and they beat
   aspect-ratio, so without this every photo renders at its own shape and every
   slot below is ignored. */
img { display: block; max-width: 100%; height: auto; }
a { color: inherit; }

.skip { position: absolute; left: -9999px; }
.skip:focus { left: 12px; top: 12px; z-index: 50; background: var(--cream);
              color: var(--ink); padding: 10px 16px; }
/* Hides a thing from the screen but not from a screen reader. The sizes are
   !important because this has to beat anything more specific: `.form input`
   sets width 100%, which silently stretched the spam-trap input on the contact
   and catering forms to the full page and made it scroll sideways at 390. */
.sr-only { position: absolute; width: 1px !important; height: 1px !important;
           padding: 0 !important; border: 0 !important; overflow: hidden;
           clip: rect(0 0 0 0); white-space: nowrap; }

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

/* ---------- the pieces every section is built from ---------- */

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

/* Claire set these on design/type-playground.html, 24 Sep 2026. */
.d { font-family: var(--display); font-weight: 500; line-height: 1.03;
     letter-spacing: -0.002em; margin: 0; }

.tiny { font-size: 11px; letter-spacing: .14em; text-transform: uppercase; }

.dark  { background: var(--ink);   color: var(--cream); }
.light { background: var(--cream); color: var(--ink); }
.light .muted { color: var(--warm); }
.dark  .muted { color: var(--dim); }

/* the checkerboard rule between sections. Two rows of squares, drawn rather
   than shipped as an image so it stays sharp at any width. */
.checker { height: 20px; background-color: var(--cream);
           background-image: repeating-conic-gradient(var(--ink) 0 25%, var(--cream) 0 50%);
           background-size: 20px 20px; }

/* ---------- the bar ---------- */

.topbar { background: var(--ink); padding: 22px var(--pad); }
.topbar nav { display: flex; gap: 26px; }
.topbar a { text-decoration: none; color: var(--cream); font-size: 11px;
            letter-spacing: .14em; text-transform: uppercase; }
.topbar a:hover { color: var(--orange); }
.topbar a[aria-current="page"] { color: var(--orange); }

/* ---------- the hero ---------- */

.hero { background: var(--ink); text-align: center;
        padding: clamp(50px, 9.3vw, 134px) var(--pad) clamp(44px, 8.2vw, 118px); }
.hero__mark { width: clamp(166px, 18.05vw, 260px); margin: 0 auto; }
.hero__btns { display: flex; gap: 17px; justify-content: center; flex-wrap: wrap;
              padding-top: clamp(30px, 4.3vw, 62px); }
.hero__line { max-width: 1320px; margin: clamp(28px, 3.5vw, 51px) auto 0;
              font-size: clamp(26px, 3.33vw, 48px); }   /* her Figma panel: 48 / 110% */

.btn { display: inline-flex; align-items: center; justify-content: center;
       min-height: 50px; padding: 0 26px; border-radius: 999px;
       font-size: 12px; letter-spacing: .1em; text-transform: uppercase;
       text-decoration: none; border: 1px solid var(--cream);
       background: none; color: var(--cream); }
.btn--fill { background: var(--cream); color: var(--ink); }
.btn--orange { background: var(--orange); border-color: var(--orange); color: var(--ink); }
.btn:hover { opacity: .85; }

/* the strip of facts under the hero */
.facts { background: var(--ink); padding: 9px var(--pad); display: flex; align-items: center; gap: 18px;
         font-size: 10.5px; letter-spacing: .12em; text-transform: uppercase; }
.facts .sp { flex: 1; }
.facts .hrs { color: var(--orange); }
.facts .star { color: var(--orange); }

/* ---------- the top three ---------- */

.three { padding: clamp(42px, 5.4vw, 76px) 0 clamp(46px, 6vw, 84px); }
.three__grid { display: grid; grid-template-columns: repeat(3, 1fr);
               gap: clamp(18px, 2.4vw, 34px); padding-top: clamp(28px, 3.4vw, 48px); }
.three img { width: 100%; height: auto; aspect-ratio: 410.667 / 320; object-fit: cover;
             object-position: 50% 50%; border-radius: 8px; }   /* her frame, off the SVG */
.three h3 { font-size: clamp(18px, 1.55vw, 22px); padding-top: 16px; }
.three h3 a { text-decoration: none; }
.three h3 a:hover { color: var(--orange); }
.three p  { font-size: 12.5px; line-height: 1.65; margin: 8px 0 0; }
/* the photo is a button now, so it has to shed every button default and keep
   looking like a photo. The cursor is the only hint until you hover. */
.zoom { display: block; width: 100%; padding: 0; border: 0; background: none;
        cursor: zoom-in; border-radius: 8px; overflow: hidden; line-height: 0; }
.zoom img { transition: transform .4s ease; }
.zoom:hover img { transform: scale(1.03); }
@media (prefers-reduced-motion: reduce) { .zoom img, .zoom:hover img { transition: none; transform: none; } }

/* ---------- the lightbox ---------- */

.lightbox { position: fixed; inset: 0; z-index: 90; display: flex;
            align-items: center; justify-content: center;
            padding: clamp(18px, 4vw, 56px); background: rgba(10, 8, 8, .93); }
.lightbox[hidden] { display: none; }
.lightbox__fig { margin: 0; max-width: min(1100px, 100%); max-height: 100%;
                 display: flex; flex-direction: column; gap: 14px; }
.lightbox__fig img { max-width: 100%; max-height: calc(100vh - 150px);
                     width: auto; height: auto; object-fit: contain; border-radius: 6px; }
.lightbox__fig figcaption { font-family: var(--display); color: var(--cream);
                            font-size: clamp(15px, 1.7vw, 20px); text-align: center; }
.lightbox__x { position: absolute; top: clamp(12px, 2vw, 26px); right: clamp(12px, 2vw, 26px);
               width: 46px; height: 46px; border-radius: 999px; cursor: pointer;
               border: 1px solid rgba(251, 233, 206, .3); background: rgba(24, 19, 19, .6);
               color: var(--cream); font-size: 26px; line-height: 1; }
.lightbox__x:hover { background: var(--orange); border-color: var(--orange); color: #fff; }

/* ---------- the line about the town ---------- */

.creed { text-align: center; padding: clamp(44px, 6vw, 92px) 0; }
.creed p { font-size: clamp(25px, 3.2vw, 42px); max-width: 15em; margin: 0 auto; }

/* ---------- the photo band with a line over it ---------- */

.band { position: relative; display: block; text-decoration: none;
        overflow: hidden; aspect-ratio: 1440 / 600; }
.band img { position: absolute; top: 0; left: 0; width: 108.95%; max-width: none; height: auto;
            transform-origin: 0 0;
            transform: translate(-20.45%, -16.81%) rotate(-18.71deg); }
.band__over { position: absolute; inset: 0; display: flex; flex-direction: column;
              align-items: flex-end; justify-content: center; gap: 18px; padding: var(--pad);
              text-align: right; }
/* A-4: the cream headline sat straight on the photo with a hard 2px offset
   shadow. Measured pixel by pixel, 27% of the area behind the words was under
   the 3:1 floor and the worst pixel was 1.00:1 — the white checker squares are
   exactly as bright as the cream. An offset shadow cannot fix that, because it
   only darkens one side of each letter. A scrim behind the text does. */
.band__over::before { content: ""; position: absolute; inset: 0; pointer-events: none;
  background: linear-gradient(255deg, rgba(24, 19, 19, .74) 0%,
                                      rgba(24, 19, 19, .60) 34%,
                                      rgba(24, 19, 19, .12) 62%,
                                      rgba(24, 19, 19, 0) 82%); }
.band__over > * { position: relative; }
.band__over .d { color: var(--cream); font-size: clamp(19px, 2.3vw, 31px); max-width: 15em;
                 text-shadow: 0 1px 10px rgba(24, 19, 19, .85); }
/* the link was cream type straight on the photo and could not be read. It is a
   solid pill now, which is the button language the rest of the page uses. */
.band__cta { background: var(--cream); color: var(--ink); font-size: 11.5px;
             letter-spacing: .1em; text-transform: uppercase; font-weight: 600;
             border-radius: 999px; padding: 11px 20px;
             transition: background .18s ease, color .18s ease,
                         box-shadow .22s ease, transform .18s ease; }
/* the pill lights up only when the cursor is on the pill itself, not anywhere on
   the photo. The ::after is an invisible 12px ring around it so the hover starts
   just before the cursor reaches the edge. */
.band__cta { position: relative; }
.band__cta::after { content: ""; position: absolute; inset: -12px; border-radius: 999px; }
.band__cta:hover,
.band:focus-visible .band__cta { background: var(--orange); color: #fff;
             transform: translateY(-2px); }
@media (prefers-reduced-motion: reduce) {
  .band__cta { transition: none; }
  .band__cta:hover, .band:focus-visible .band__cta { transform: none; }
}

/* ---------- the cookie ---------- */

.cookie { padding: clamp(36px, 4.6vw, 70px) 0; }
.cookie__grid { display: grid; grid-template-columns: 5fr 6fr;
                gap: clamp(26px, 4vw, 64px); align-items: center; }
.tilt { position: relative; overflow: hidden; border-radius: 8px; }
.tilt--cookie { aspect-ratio: 538 / 536; }
.tilt--cookie img { position: absolute; top: 0; left: 0; width: 146.1%; max-width: none; height: auto;
                    transform-origin: 0 0;
                    transform: translate(-32.1%, -25%) rotate(-8.06deg); }
.cookie h2 { font-size: clamp(25px, 2.6vw, 35px); max-width: 11em; }
.cookie p  { font-size: 13px; line-height: 1.7; max-width: 32em; margin: 16px 0 0; }
.stats { display: flex; gap: clamp(28px, 4vw, 56px); padding-top: clamp(20px, 2.4vw, 32px); }
.stats .n { font-family: var(--display); font-size: clamp(22px, 2vw, 28px); }
.stats .l { font-size: 10px; letter-spacing: .12em; text-transform: uppercase;
            padding-top: 5px; }

/* ---------- catering ---------- */

.cater { padding: clamp(44px, 5.6vw, 80px) 0 clamp(40px, 5vw, 72px); }
.cater .btn { display: flex; width: fit-content; margin-inline: auto; }
.cater__grid { display: grid; grid-template-columns: repeat(3, 1fr);
               gap: clamp(14px, 1.8vw, 26px); padding-top: clamp(26px, 3.2vw, 44px); }
/* a box only where her Figma draws one: the three catering cards. Everywhere
   else the group holds together on spacing. */
.card { border: 1px solid var(--rule); padding: clamp(18px, 2vw, 28px); }
.card--plain { border: 0; padding: 0; }
.card--plain + .card--plain { }
.card svg { width: 21px; height: 21px; stroke: var(--orange); fill: none;
            stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; }
.card h3 { font-family: var(--display); font-weight: 400; font-size: 16px;
           margin: 14px 0 0; }
.card p { font-size: 12.5px; line-height: 1.6; margin: 8px 0 0; }
.cater .btn { margin-top: clamp(26px, 3vw, 42px); }

/* ---------- come see us ---------- */

.visit { padding: clamp(42px, 5.4vw, 78px) 0; }
.visit__grid { display: grid; grid-template-columns: 1fr 1fr;
               gap: clamp(28px, 4vw, 64px); align-items: center; }
.visit h2 { font-size: clamp(27px, 3vw, 40px); }
/* These were scoped to the home page's section, and the contact page uses the
   same rows outside it: the icons came out as 300px black squares, because an
   <svg> with no width and no fill rule falls back to 300x150 and solid black. */
dl { margin: clamp(22px, 2.6vw, 36px) 0 0; display: grid; gap: 22px; }
/* The icon used to be a sibling of the dt/dd, which made the <dl> invalid: a
   dl's div may hold only dt then dd. The icon lives inside the dt now, and the
   dd is indented to the same 36px the grid column gave it, so nothing moved. */
.row dt { display: grid; grid-template-columns: 22px 1fr; gap: 14px; align-items: start; }
.row svg { width: 16px; height: 16px; stroke: var(--orange); fill: none;
           stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round;
           margin-top: 3px; }
dt { font-size: 13px; font-weight: 600; }
dd { margin: 3px 0 0 36px; font-size: 13px; }
.light dd { color: var(--warm); }
.dark  dd { color: var(--dim); }
dd a { color: inherit; }
.visit__map { border: 1px solid rgba(24, 19, 19, .18); border-radius: 8px; }

/* ---------- the footer ---------- */

.foot { background: var(--ink); color: var(--cream);
        padding: clamp(26px, 2.6vw, 40px) 0 0; }
/* the footer keeps the page's own 1180 measure. Run full width and the name
   ends up hard left with the links hard right, leaving a hole down the middle
   of a big screen. */
.foot__grid { display: grid; grid-template-columns: 1fr auto auto;
              gap: clamp(26px, 4vw, 60px) clamp(40px, 6vw, 110px); }
.foot__mark { margin: 0; }
.foot__mark a { display: block; }
.foot__mark img { display: block; width: min(100%, 380px); height: auto; }
.foot__blurb { font-size: 12.5px; line-height: 1.75; color: var(--dim);
               max-width: 26em; margin: 14px 0 0; }
.foot__col h3 { color: var(--orange); font-size: 10.5px; letter-spacing: .14em;
                text-transform: uppercase; font-weight: 600; margin: 0 0 12px; }
.foot__col a { display: block; text-decoration: none; font-size: 13px;
               color: var(--dim); padding: 3px 0; }
.foot__col a:hover { color: var(--cream); }
.foot__base { display: flex; gap: 20px; font-size: 10.5px; color: var(--dim);
              letter-spacing: .06em;
              /* its own padding, so it keeps the page's side gutter now that the
                 footer is not capped */
              padding: clamp(22px, 2.4vw, 34px) var(--pad) 22px; }
.foot__base .sp { flex: 1; }

/* ---------- narrow ---------- */

@media (max-width: 899px) {
  .three__grid, .cater__grid { grid-template-columns: 1fr 1fr; }
  .cookie__grid, .visit__grid { grid-template-columns: 1fr; }
  .foot__grid { grid-template-columns: 1fr 1fr; }
  .foot h2 + .foot__blurb { max-width: none; }
  .band__over { justify-content: center; }
}
/* A-3: on a phone every one of these was a 14 to 27px tap target, and the
   phone number is the most-tapped thing on a restaurant site. 44px is the
   comfortable minimum. The negative margin cancels the padding's push, so the
   text sits exactly where it did and only the hit area grows. */
@media (max-width: 719px) {
  .foot__col a { padding: 12px 0; }
  .foot__blurb a, dd a, .morelink,
  a[href^="tel:"], a[href^="mailto:"] {
    display: inline-block; padding: 13px 0; margin-top: -13px; margin-bottom: -13px;
  }
  .linkrow a { display: inline-block; padding: 16px 0 19px;
               margin-top: -16px; margin-bottom: -16px; }
}

@media (max-width: 599px) {
  .three__grid, .cater__grid, .foot__grid { grid-template-columns: 1fr; }
  .topbar nav { gap: 16px; flex-wrap: wrap; }
  .facts { display: block; text-align: center; line-height: 2; }
  .facts .sp { display: none; }
  .stats { flex-wrap: wrap; gap: 22px; }
  .foot__base { display: block; line-height: 2; }
}

/* ======================================================================
   The inside pages.

   Three of these patterns are taken back from the first design, on Claire's
   instruction: the page head, the rule head, and the wide photo between
   sections. The menu below is hers and is not restyled beyond color and
   type: three columns, a vertical rule between them, name and price on one
   line with a rule under it, then the description, then the bread.
   ====================================================================== */

.light { --rule: rgba(24, 19, 19, .22); }
.dark  { --rule: rgba(251, 233, 206, .20); }

/* the bar gains the phone menu and the mark */
.topbar { display: flex; align-items: center; gap: 20px; }
.topbar__mark { margin-left: auto; display: block; }
.topbar__mark img { width: 62px; height: auto; }   /* the head only: see img/gator-head.svg */
.navtoggle { display: none; min-width: 44px; min-height: 44px; background: none;
             border: 1px solid var(--hair); border-radius: 999px; color: var(--cream);
             font: inherit; font-size: 18px; cursor: pointer; }

/* ---------- the page head ---------- */

.pagehead { background: var(--ink); color: var(--cream);
            padding: clamp(40px, 5.6vw, 84px) 0 clamp(34px, 4.4vw, 62px); }
.pagehead h1 { font-size: clamp(44px, 7.6vw, 108px); line-height: 1; }
.pagehead__lede { font-size: clamp(16px, 1.5vw, 21px); color: var(--dim);
                  max-width: 40ch; margin: clamp(16px, 1.8vw, 26px) 0 0; }
.pagehead__lede strong { color: var(--cream); font-weight: 500; }
.pagehead__btns { margin: clamp(20px, 2.2vw, 30px) 0 0; }

/* ---------- a section of a page ---------- */

.sheet { padding: clamp(38px, 5vw, 74px) 0; }
.sheet.center { text-align: center; }
.sheet.cta { padding: clamp(22px, 2.2vw, 32px) 0; }

.rulehead { padding-bottom: clamp(26px, 3.2vw, 44px); }
.rulehead h2 { font-size: clamp(24px, 2.9vw, 38px); }

.note { font-size: 13.5px; line-height: 1.7; max-width: 62ch;
        margin: clamp(18px, 2vw, 28px) 0 0; }
.big { font-size: clamp(30px, 4.2vw, 62px); line-height: 1.05; }

.linkrow { display: flex; flex-wrap: wrap; gap: 26px;
           margin: clamp(22px, 2.6vw, 34px) 0 0; font-size: 13px; }
.linkrow a { text-decoration: none; border-bottom: 1px solid var(--rule); padding-bottom: 3px; }
.linkrow a:hover { color: var(--orange); border-color: var(--orange); }

/* a full-width photo that follows a checker straight away. Without this the
   photo starts on the checker's bottom edge, and a plain margin would show the
   body's near-black rather than the ground. */
.shotband { padding-top: clamp(28px, 3.6vw, 56px); }

/* a photo that stays inside the column instead of running to the window edge */
.inset { max-width: 620px; margin-inline: auto; }
/* square, not the 4/3 the other photos use: this one is a portrait shot and a
   landscape frame cuts the cookie off the bottom. Checked against 4/3 and 5/4
   on the real photo. */
.inset img { width: 100%; height: auto; aspect-ratio: 1 / 1; object-fit: cover;
             object-position: 50% 56%; border-radius: 8px; }

/* a photo the full width of the window, between two sections */
.wideshot { width: 100%; height: clamp(220px, 34vw, 480px); object-fit: cover;
            object-position: 50% 50%; }

/* ---------- the menu, her structure ---------- */

.menugrid { display: grid; grid-template-columns: repeat(3, 1fr); }
.menucol { padding-inline: clamp(14px, 2.2vw, 34px); border-left: 1px solid var(--rule); }
.menucol:first-child { padding-left: 0; border-left: 0; }
.menucol:last-child { padding-right: 0; }

/* The sandwich lists are one grid, not three columns running independently, so
   that every rule in a row sits on the same line the way it does on her
   printed menu. The dividing rules move onto the items, since there are no
   column boxes to carry them. align-items: start keeps a short item from
   stretching to its row's height. */
.menugrid--rows { align-items: start; }
.menugrid--rows > .item { padding-inline: clamp(14px, 2.2vw, 34px);
                          border-left: 1px solid var(--rule); }
.menugrid--rows > .item:nth-child(3n+1) { padding-left: 0; border-left: 0; }
.menugrid--rows > .item:nth-child(3n)   { padding-right: 0; }

/* the label over each column, straight off her printed menu: lowercase, one
   per column, never joined into a single heading. Smaller than a rulehead
   because three of them sit side by side. */
/* Straight off her printed menu: every label on it is lowercase, the same
   size, and CENTRED over the column it belongs to. "hot sandwiches" is
   centred over all three. No hairlines either side; she took those out of the
   site's headings and they stay out. Every other rulehead is unchanged. */
.menucol__label { font-size: clamp(19px, 2vw, 26px); font-weight: 500;
                  text-align: center; margin: 0 0 clamp(18px, 2.2vw, 30px); }
.menusheet .rulehead { text-align: center; padding-bottom: clamp(18px, 2.2vw, 30px); }
.menusheet .rulehead h2 { font-size: clamp(19px, 2vw, 26px); }

.item { padding-bottom: clamp(18px, 1.9vw, 26px); }
.item__top { display: flex; align-items: baseline; gap: 12px; }
/* the line height is fixed and tall enough for a mark, so a name carrying one
   is exactly as tall as a name without, and the rule under it lands on the
   same line as its neighbours'. Pulling the mark out of the line box with
   negative margins instead dropped it below the baseline. */
.item__name { font-family: var(--display); font-size: clamp(17px, 1.42vw, 20px);
              font-weight: 500; letter-spacing: -0.002em; line-height: 1.3; }
.item__price { margin-left: auto; font-size: 14px; font-variant-numeric: tabular-nums; }
.item__rule { height: 1px; background: var(--rule); margin: 8px 0 9px; }
.item__desc { font-size: 12px; line-height: 1.65; }
.light .item__desc { color: var(--warm); }
.dark  .item__desc { color: var(--dim); }
.item__bread { font-size: 11.5px; font-style: italic; padding-top: 6px; }
.light .item__bread { color: var(--warm); }
.dark  .item__bread { color: var(--dim); }
/* Her menu marks spicy and vegetarian with drawings. Her greens were picked
   for a black menu: #28B14A measures 2.36:1 on the cream, under the 3:1 a
   meaningful icon needs, so the cream uses the same hue darkened to #239A40
   and the dark sections keep her exact green. Her chilli red passes as is. */
:root { --veg: #239A40; --veg-text: #1C7A33; --hot: #CE2425; }
.dark { --veg: #28B14A; --veg-text: #28B14A; }

.mark { margin-right: 7px; }
.mark--icon { display: inline-block; width: 1.18em; height: 1.18em;
              vertical-align: -.22em; }
.mark--icon svg { width: 100%; height: 100%; display: block;
                  fill: none; stroke-width: 1.6;
                  stroke-linecap: round; stroke-linejoin: round; }
.m-veg  { stroke: var(--veg); }
.m-hot  { fill: var(--hot); stroke: none; }
.m-stem { stroke: var(--veg); stroke-width: 1.5; fill: none; }

/* her VEGAN stamp */
/* the word is read, so it needs 4.5:1 rather than the 3:1 a drawn mark needs.
   Same hue as her green, darker: #1C7A33 is 4.55:1 on the cream. The border
   keeps the brighter green, which only has to clear 3. */
.mark--vegan { display: inline-block; font-size: 8.5px; font-weight: 700;
               letter-spacing: .1em; color: var(--veg-text);
               border: 1.5px solid var(--veg); border-radius: 3px;
               padding: 1px 4px; vertical-align: 2px; }

/* ---------- catering ---------- */

.card__top { display: flex; align-items: baseline; gap: 12px; }
.card__top h3 { font-size: clamp(18px, 1.6vw, 22px); margin: 0; }
.card__price { margin-left: auto; font-size: 15px; }
.card__unit { font-size: 10.5px; letter-spacing: .12em; text-transform: uppercase;
              padding-top: 6px; }
a.card { text-decoration: none; display: block; }
.card.social { display: grid; grid-template-columns: 26px 1fr; gap: 16px; align-items: center; }
.card.social h3 { margin: 0; font-size: clamp(17px, 1.5vw, 21px); }
.card.social p { margin: 4px 0 0; font-size: 13px; }
.brandicon { width: 26px; height: 26px; fill: var(--orange); stroke: none; }
a.card:hover { border-color: var(--orange); }

.threebar { display: grid; grid-template-columns: repeat(2, 1fr); gap: clamp(14px, 1.8vw, 26px);
            margin-top: clamp(30px, 3.4vw, 46px); font-size: 12.5px; }
.threebar strong { color: var(--orange); font-weight: 600; }

/* ---------- words ---------- */

.twocol { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(24px, 3.6vw, 60px);
          font-size: clamp(15px, 1.25vw, 18px); line-height: 1.75; }
.twocol p { margin: 0; }

.halfsplit { display: grid; grid-template-columns: 1fr 1fr; align-items: center;
             padding-bottom: clamp(26px, 3.4vw, 52px); }
.halfsplit__shot { width: 100%; height: 100%; min-height: clamp(280px, 40vw, 560px);
                   object-fit: cover; }
.halfsplit__words { padding: clamp(26px, 4vw, 66px) clamp(22px, 4vw, 60px);
                    display: flex; flex-direction: column; gap: 20px;
                    font-size: clamp(15px, 1.3vw, 19px); line-height: 1.75; }
.halfsplit__words p { margin: 0; }

.support__lead { font-size: 13.5px; margin: clamp(26px, 3.2vw, 42px) 0 0; }
.support { display: grid; grid-template-columns: repeat(3, 1fr); gap: clamp(14px, 1.8vw, 26px);
           padding-top: clamp(12px, 1.4vw, 18px); }
.support h3 { margin: 0; font-size: clamp(17px, 1.5vw, 21px); }

/* ---------- the forms ---------- */

.form { margin-top: clamp(22px, 2.6vw, 34px); display: grid; gap: clamp(16px, 1.8vw, 24px); }
.fieldrow { display: grid; gap: clamp(14px, 1.6vw, 22px); align-items: end; }
.fieldrow--4 { grid-template-columns: repeat(4, 1fr); }
.fieldrow--3 { grid-template-columns: repeat(3, 1fr); }
.field { display: grid; gap: 7px; }
.form label, .form legend { font-size: 12.5px; font-weight: 600; padding: 0; }
.form .opt { font-weight: 400; opacity: .7; }
.form input, .form select, .form textarea {
  font: inherit; font-size: 15px; padding: 11px 13px; border-radius: 3px;
  border: 1px solid var(--rule); background: transparent; color: inherit; width: 100%;
}
.dark .form input, .dark .form select, .dark .form textarea { background: rgba(251,233,206,.04); }
.form fieldset { border: 0; padding: 0; margin: 0; }
.choice { display: flex; gap: 18px; padding-top: 9px; font-size: 14px; }
.choice label { display: flex; align-items: center; gap: 7px; font-weight: 400; }
.choice input { width: auto; }
.form .btn { width: fit-content; }
.formalt { font-size: 12px; margin: 0; }

/* ---------- narrow ---------- */

@media (max-width: 899px) {
  .menugrid { grid-template-columns: 1fr 1fr; }
  .twocol, .halfsplit, .threebar, .support { grid-template-columns: 1fr; }
  .fieldrow--4, .fieldrow--3 { grid-template-columns: 1fr 1fr; }
  .halfsplit__shot { min-height: 300px; }
}
@media (max-width: 719px) {
  .navtoggle { display: block; margin-left: auto; }
  .topbar { flex-wrap: wrap; }
  .topbar__mark { order: -1; margin-left: 0; }
  #nav { order: 3; flex-basis: 100%; flex-direction: column; gap: 4px; padding-top: 10px; }
  #nav a { padding: 9px 0; }
  .menugrid { grid-template-columns: 1fr; }
  .menucol { padding-inline: 0; border-left: 0; }
  .menucol + .menucol { border-top: 1px solid var(--rule); padding-top: clamp(18px, 3vw, 26px);
                        margin-top: clamp(4px, 1vw, 10px); }
  .fieldrow--4, .fieldrow--3 { grid-template-columns: 1fr; }
  /* her band is 1440x600. At 390 that is 163px tall, which the line covers
     completely, so the frame gets taller and the photo is re-fitted around the
     same rotation. The numbers were worked out so the turned photo still
     reaches all four corners. */
  .band { aspect-ratio: 5 / 6; }
  .band img { width: 200%; transform: translate(-32%, -22%) rotate(-18.71deg); }
  .band__over { align-items: center; text-align: center;
                background: linear-gradient(to bottom, rgba(24,19,19,.15), rgba(24,19,19,.55)); }
}

.formthanks { font-size: clamp(16px, 1.5vw, 20px); line-height: 1.6; margin: 0;
              padding: clamp(20px, 2.4vw, 32px) 0; }