/* Our food & drink — Figma "route 21" (node 1333:211), 1999×1032, navy. Absolute
   layout at EXACT Figma coords scaled by --px inside a 1999-wide centred frame. */
.fd {
  position: relative;
  height: calc(1040.6 * var(--px));   /* 1032 + 8.6 (section-spacing standard) */
  background: #253b5b;
  overflow: hidden;
  color: #fff;
}
.fd__frame {
  /* top shifted so the first text sits 65px from the section top (standard). */
  position: absolute; left: 50%; top: calc(8.6 * var(--px)); transform: translateX(-50%);
  width: calc(1999 * var(--px)); height: 100%;
}
.fd__frame > * {
  position: absolute;
  left: calc(var(--x) * var(--px));
  top:  calc(var(--y) * var(--px));
  margin: 0;
}

/* ---- header ---- */
.fd__title { font-family: var(--font-display); font-weight: 700; font-size: calc(60 * var(--px)); transform: translateY(-50%); white-space: nowrap; }
.fd__rule  { width: calc(var(--w) * var(--px)); height: 1px; background: rgba(255,255,255,.8); }
.fd__intro { transform: translateX(-50%); text-align: center; font-family: var(--font-sans); font-weight: 400; font-size: calc(18.576 * var(--px)); line-height: 1.1; white-space: nowrap; }

/* ---- photos: fixed frame, image cropped inside (Figma "crop" fill) ---- */
.fd-crop { width: calc(var(--w) * var(--px)); height: calc(var(--h) * var(--px)); overflow: hidden; }
.fd-crop img {
  position: absolute;
  left: calc(var(--il) * 1%); top: calc(var(--it) * 1%);
  width: calc(var(--iw) * 1%); height: calc(var(--ih) * 1%);
  max-width: none; display: block;
}
.fd-cover img { position: static; left: auto; top: auto; width: 100%; height: 100%; object-fit: cover; }

/* hand-drawn white accent lines around the storefront (default stroke = white) */
img.fd-vec { width: calc(var(--w) * var(--px)); height: calc(var(--h) * var(--px)); display: block; }

/* ---- copy + MENU + venue name ---- */
.fd__copy {
  transform: translate(-50%, -50%);
  width: calc(var(--w) * var(--px)); text-align: center;
  font-family: var(--font-sans); font-weight: 400;
  font-size: calc(var(--fs) * var(--px)); line-height: 1.4;
}
.fd__menu {
  width: calc(124.596 * var(--px)); height: calc(34.056 * var(--px));
  display: inline-flex; align-items: center; justify-content: center;
  background: #fff; color: #000; border-radius: calc(21.846 * var(--px));
  font-family: var(--font-ui); font-size: calc(12.828 * var(--px));
  letter-spacing: 0.25em; text-indent: 0.25em; text-decoration: none;
}
.fd__venue { transform: translate(-50%, -50%); text-align: center; font-family: var(--font-display); line-height: 1; white-space: nowrap; }
.fd__venue strong { display: block; font-weight: 700; font-size: calc(34.357 * var(--px)); }
.fd__venue span   { display: block; font-weight: 400; font-size: calc(var(--ss) * var(--px)); margin-top: calc(5 * var(--px)); }

/* ---- MOBILE Our food & drink (Figma "food & drink" 1313:329, 421×927). Same navy
   and the same photos/crops as desktop, but the two venues stack. The desktop copy
   is hidden below 600 so it doesn't show twice. ---- */
.fd-m { display: none; }

@media (max-width: 600px) {
  .fd--desktop-only { display: none; }

  .fd-m {
    display: block; position: relative;
    height: calc(927 * var(--mpx));
    background: #253b5b;
    overflow: hidden; color: #fff;
  }
  .fd-m__frame {
    position: absolute; left: 50%; top: 0; transform: translateX(-50%);
    width: calc(421 * var(--mpx)); height: 100%;
  }
  .fd-m__frame > * {
    position: absolute;
    left: calc(var(--x) * var(--mpx));
    top:  calc(var(--y) * var(--mpx));
    margin: 0;
  }

  /* photos reuse .fd-crop / .fd-cover / .fd-vec, resized to --mpx */
  .fd-m .fd-crop { width: calc(var(--w) * var(--mpx)); height: calc(var(--h) * var(--mpx)); }
  .fd-m img.fd-vec { width: calc(var(--w) * var(--mpx)); height: calc(var(--h) * var(--mpx)); }

  /* ---- header ---- */
  .fm__title { transform: translateY(-50%); font-family: var(--font-display); font-weight: 700; font-size: calc(32 * var(--mpx)); white-space: nowrap; }
  .fm__hook  { transform: translate(-50%, -50%); font-family: var(--font-display); font-style: italic; font-weight: 400; font-size: calc(17.735 * var(--mpx)); white-space: nowrap; }
  .fm__rule  { width: calc(var(--w) * var(--mpx)); height: 1px; background: rgba(255,255,255,.8); }
  .fm__intro {
    transform: translateX(-50%); width: calc(var(--w) * var(--mpx)); text-align: center;
    font-family: var(--font-sans); font-weight: 400;
    font-size: calc(10.874 * var(--mpx)); line-height: 1.1;
  }

  /* ---- copy + MENU pill + venue name ---- */
  .fm__copy {
    transform: translate(-50%, -50%);
    width: calc(var(--w) * var(--mpx)); text-align: center;
    font-family: var(--font-sans); font-weight: 400;
    font-size: calc(var(--fs) * var(--mpx)); line-height: 1.4;
  }
  .fm__menu {
    width: calc(84.061 * var(--mpx)); height: calc(22.977 * var(--mpx));
    display: inline-flex; align-items: center; justify-content: center;
    background: #fff; color: #000; border-radius: calc(14.739 * var(--mpx));
    font-family: var(--font-ui); font-size: calc(8.655 * var(--mpx));
    letter-spacing: calc(2.164 * var(--mpx)); text-indent: calc(2.164 * var(--mpx));
    text-decoration: none;
  }
  .fm__venue { transform: translate(-50%, -50%); text-align: center; font-family: var(--font-display); line-height: 1; white-space: nowrap; }
  .fm__venue strong { display: block; font-weight: 700; font-size: calc(var(--ns) * var(--mpx)); }
  .fm__venue span   { display: block; font-weight: 400; font-size: calc(var(--ss) * var(--mpx)); margin-top: calc(4 * var(--mpx)); }
}