/* ==========================================================================
   Dishes: a marigold tablecloth seen from above, set with everything I've
   cooked. Plates, bowls, a skillet, a pie dish and a board hold the photos;
   gallery.js lets you pick a plate up and slide it across the table.
   Every rule is scoped to #dishes.

   Geometry lives in table units: 1cqw = 1% of the table's width, so the
   whole spread scales as one picture. Each dish sets its centre (--x, --y)
   and diameter (--d) per layout: wide (1000px and up), medium, narrow.
   ========================================================================== */

#dishes {
  --cloth: var(--marigold);
  --shade: 122, 64, 0;          /* shadows tint toward the cloth's deep, never grey */
  --shade-ink: 70, 28, 44;
  --pad: clamp(22px, 3vw, 36px);
  position: relative;
  isolation: isolate;
  padding-block: var(--pad);
  background-color: var(--cloth);
  color: var(--ink-fixed);
  /* a fine linen weave (one small tile, cheap to draw in any engine) and the
     soft pool of light over a dinner table */
  background-image:
    radial-gradient(120% 90% at 50% 40%, rgba(255, 246, 220, .3), rgba(255, 246, 220, 0) 62%),
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='20' height='20'%3E%3Cg fill='rgb(143,91,0)' fill-opacity='.05'%3E%3Crect y='0' width='20' height='1'/%3E%3Crect y='4' width='20' height='1'/%3E%3Crect y='8' width='20' height='1'/%3E%3Crect y='12' width='20' height='1'/%3E%3Crect y='16' width='20' height='1'/%3E%3C/g%3E%3Cg fill='%23fff' fill-opacity='.07'%3E%3Crect x='0' width='1' height='20'/%3E%3Crect x='5' width='1' height='20'/%3E%3Crect x='10' width='1' height='20'/%3E%3Crect x='15' width='1' height='20'/%3E%3C/g%3E%3C/svg%3E");
  background-size: auto, 20px 20px;
  overflow: clip;
  contain: layout paint;        /* repaints inside never spread to the page; it clips already */
}

/* The table: --th is its height in table units (width is 100). On wide
   screens it fits the viewport under the header, so the whole spread is
   seen at once. */
#dishes .dishes__table {
  position: relative;
  width: var(--table-w);
  aspect-ratio: 100 / var(--th);
  margin-inline: auto;
  container-type: inline-size;
}

/* ---------- The line, set as the table's centrepiece ---------- */
#dishes .dishes__title {
  position: absolute;
  left: calc(var(--hx) * 1cqw); top: calc(var(--hy) * 1cqw);
  width: calc(var(--hw) * 1cqw);
  margin: 0;
  font: 700 calc(var(--hf) * 1cqw)/.9 var(--font-display);
  letter-spacing: -.04em;
  text-align: var(--ha, center);
  color: var(--ink-fixed);
  z-index: 0;
}

#dishes .dishes__spread { position: absolute; inset: 0; margin: 0; padding: 0; list-style: none; }

/* ---------- A dish: the vessel, and the photograph in its well ---------- */
#dishes .dish {
  position: absolute;
  left: calc((var(--x) - var(--d) / 2) * 1cqw);
  top: calc((var(--y) - var(--d) / 2) * 1cqw);
  width: calc(var(--d) * 1cqw);
  aspect-ratio: 1;
  z-index: 1;
  touch-action: pan-y;
  -webkit-tap-highlight-color: transparent;
}
/* The dish's shadow on the cloth: a soft round shadow painted as a radial
   gradient rather than a blur, so it costs almost nothing to draw in any
   engine. Lifting a dish moves and spreads it: transform and opacity only. */
#dishes .dish::after {
  content: ""; position: absolute; z-index: -2;
  inset: -16%;
  border-radius: 50%;
  background: radial-gradient(closest-side circle,
    rgba(var(--shade-ink), .36) 0 58%,
    rgba(var(--shade-ink), .27) 66%,
    rgba(var(--shade), .16) 74%,
    rgba(var(--shade), .07) 82%,
    rgba(var(--shade), .02) 92%,
    rgba(var(--shade), 0) 100%);
  opacity: var(--sh-o, .9);
  transform: translate(3.4%, 7.6%);
  transition: transform var(--dur-ui) var(--ease-out), opacity var(--dur-ui) var(--ease-out);
  pointer-events: none;
}
#dishes .dish--bowl, #dishes .dish--skillet { --sh-o: 1; }
#dishes .dish--tart { --sh-o: .85; }
/* a lifted dish rises above its neighbours, so its shadow falls over them.
   .is-hover is set by gallery.js on real mouse movement only (no :hover, so
   scrolling past a still pointer never restyles a dish). */
#dishes .dish.is-hover { z-index: 2; }
#dishes .dish.is-hover::after { transform: translate(5.2%, 11%) scale(1.05); opacity: calc(var(--sh-o, .9) * .9); }
#dishes .dish:focus-within { z-index: 2; }
#dishes .dish:focus-within::after { transform: translate(5.2%, 11%) scale(1.05); opacity: calc(var(--sh-o, .9) * .9); }
#dishes .dish.is-held { z-index: 5; }
#dishes .dish.is-held::after { transform: translate(7%, 14.5%) scale(1.09); opacity: calc(var(--sh-o, .9) * .82); transition-duration: var(--dur-micro); }
/* moving plates get their own layers only while they move */
#dishes .dish.is-held, #dishes .dish.is-moving { will-change: transform; }

/* Glazed ceramic seen from above, key light top-left: a groove where the
   well meets the rim, the rim rising into the light, a soft outer lip, the
   far side in warm shade, and a sheen along the top-left of the rim. The
   photo covers the well, so the sheen only ever shows on the rim. No blurs
   and no masks: everything is gradients. */
#dishes .dish__vessel {
  --rim: 10.5%;
  --well-r: calc(100% - 2 * var(--rim));      /* the photo's radius, as a share of the dish's */
  --glaze: #fcf5ea;
  --glaze-hi: #ffffff;
  --glaze-lo: #e2cfb0;
  --edge: #d3bc96;
  --well: #e3d2b5;
  --spec: rgba(255, 255, 255, .6);
  --sheen: conic-gradient(from 250deg, rgba(255, 255, 255, 0), var(--spec) 62deg, rgba(255, 255, 255, 0) 124deg);
  position: absolute; inset: 0;
  display: block;
  border-radius: 50%;
  background:
    var(--sheen),
    linear-gradient(135deg, rgba(255, 255, 255, .45) 0%, rgba(255, 255, 255, 0) 38%, rgba(150, 92, 24, 0) 52%, rgba(150, 92, 24, .24) 100%),
    radial-gradient(closest-side circle, var(--glaze-lo) 0 calc(var(--well-r) + .6%), var(--glaze) calc(var(--well-r) + 2.6%), var(--glaze-hi) calc(var(--well-r) + 6%), var(--glaze) calc(var(--well-r) + 10.5%), var(--glaze) 95.5%, var(--edge) 98.8%);
  box-shadow: 0 1px 2px rgba(var(--shade), .3);            /* where it touches the cloth */
  cursor: pointer;
  transition: transform var(--dur-ui) var(--ease-out);
  -webkit-user-drag: none;
  -webkit-touch-callout: none;
  user-select: none;
}
#dishes .dish__vessel img {
  position: absolute;
  left: var(--rim); top: var(--rim);
  width: calc(100% - 2 * var(--rim)); height: calc(100% - 2 * var(--rim));
  max-width: none;
  border-radius: 999px;          /* px, not %, so the lightbox flight starts as a circle */
  object-fit: cover;
  background: var(--well);
  -webkit-user-drag: none;
  user-select: none;
  pointer-events: none;
}
/* the lip of the vessel shading the food along its top-left edge */
#dishes .dish__vessel::after {
  content: ""; position: absolute;
  left: var(--rim); top: var(--rim); right: var(--rim); bottom: var(--rim);
  border-radius: 50%;
  background: radial-gradient(64% 64% at 58% 62%, rgba(70, 34, 6, 0) 84%, rgba(70, 34, 6, .18) 93%, rgba(70, 34, 6, .38) 100%);
  box-shadow: inset 0 0 0 1px rgba(70, 34, 6, .16);
  pointer-events: none;
}

/* Lift on hover and keyboard focus; picked up while held. Transform only:
   the shadow that spreads is the dish's ::after moving away. */
#dishes .dish.is-hover .dish__vessel { transform: translate(-1px, -3px); }
#dishes .dish__vessel:focus-visible {
  outline: 3px solid var(--ink-fixed);
  outline-offset: 5px;
  transform: translate(-1px, -3px);
}
/* a press settles the dish onto the cloth before it lifts or opens */
#dishes .dish:not(.is-held) .dish__vessel:active { transform: translate(0, -1px); transition-duration: 90ms; }
#dishes.is-live .dish__vessel { cursor: grab; }       /* only when plates can move */
#dishes .dish.is-held .dish__vessel {
  cursor: grabbing;
  transform: translate(-2px, -5px);
  transition-duration: var(--dur-micro);
}

/* ---------- Vessels ---------- */
/* Bowls: a narrow rim and a deep well */
#dishes .dish--bowl .dish__vessel {
  --rim: 7%;
  background:
    var(--sheen),
    linear-gradient(135deg, rgba(255, 255, 255, .55) 0%, rgba(255, 255, 255, 0) 40%, rgba(150, 92, 24, 0) 55%, rgba(150, 92, 24, .22) 100%),
    radial-gradient(closest-side circle, var(--glaze-lo) 0 calc(var(--well-r) + .6%), var(--glaze) calc(var(--well-r) + 2.4%), var(--glaze-hi) calc(var(--well-r) + 5.5%), var(--glaze) calc(var(--well-r) + 9%), var(--glaze) 96.5%, var(--edge) 99%);
  box-shadow: 0 2px 3px rgba(var(--shade), .32);
}
#dishes .dish--bowl .dish__vessel::after {
  background: radial-gradient(64% 64% at 58% 62%, rgba(60, 28, 4, 0) 80%, rgba(60, 28, 4, .24) 91%, rgba(60, 28, 4, .48) 100%);
  box-shadow: inset 0 0 0 1px rgba(60, 28, 4, .2);
}

/* Glazes true to the photographs: dark stoneware, a deep blue bowl, a sky-blue plate */
#dishes .is-stone .dish__vessel  { --glaze: #3d3a42; --glaze-hi: #5b5762; --glaze-lo: #262429; --edge: #1f1d22; --well: #29272d; --spec: rgba(255, 255, 255, .26); }
#dishes .is-indigo .dish__vessel { --glaze: #2c3c86; --glaze-hi: #4a5fb3; --glaze-lo: #1c2860; --edge: #18214f; --well: #1f2b66; --spec: rgba(255, 255, 255, .3); }
#dishes .is-sky .dish__vessel    { --glaze: #a9d8f0; --glaze-hi: #d4eef9; --glaze-lo: #7fb8d8; --edge: #6aa6c8; --well: #84bfdd; --spec: rgba(255, 255, 255, .55); }
/* the tandoori plate: white with a teal and yellow band, like the plate in the photo */
#dishes .is-pattern .dish__vessel {
  background:
    var(--sheen),
    linear-gradient(135deg, rgba(255, 255, 255, .45) 0%, rgba(255, 255, 255, 0) 38%, rgba(150, 92, 24, 0) 52%, rgba(150, 92, 24, .24) 100%),
    radial-gradient(closest-side circle, var(--glaze-lo) 0 calc(var(--well-r) + .6%), var(--glaze) calc(var(--well-r) + 2.6%), var(--glaze-hi) calc(var(--well-r) + 6%), var(--glaze) calc(var(--well-r) + 8.5%), var(--glaze) 86.5%, transparent 86.5% 92.5%, var(--glaze) 92.5% 95.5%, var(--edge) 98.8%),
    repeating-conic-gradient(from 3deg, #2f9f9a 0 5deg, var(--glaze) 5deg 9deg, #f0b23a 9deg 11.5deg, var(--glaze) 11.5deg 15deg);
}

/* Cast-iron skillet, with its handle */
#dishes .dish--skillet .dish__vessel {
  --rim: 8.5%;
  --spec: rgba(255, 255, 255, .2);
  background:
    var(--sheen),
    linear-gradient(135deg, rgba(255, 255, 255, .22), rgba(255, 255, 255, 0) 40%),
    radial-gradient(closest-side circle, #1c1a1f 0 80%, #2b2830 84%, #46424c 92%, #2a272e 100%);
}
/* The handle pivots on the pan's centre and runs out through the rim; its
   shadow offset is counter-rotated so the light stays top-left. */
#dishes .dish--skillet::before {
  --a: var(--handle, -30deg);
  content: ""; position: absolute; z-index: -1;
  left: 50%; top: 44.5%; width: 92%; height: 11%;
  border-radius: 0 999px 999px 0;
  background:
    radial-gradient(circle at calc(100% - 1.5em) 50%, var(--cloth) 0 .32em, transparent .36em),
    linear-gradient(180deg, #4d4953, #2a272e 55%, #1c1a1f);
  font-size: calc(var(--d) * .1cqw);
  box-shadow:
    calc(3px * cos(var(--a)) + 8px * sin(var(--a))) calc(-3px * sin(var(--a)) + 8px * cos(var(--a))) 10px -3px rgba(var(--shade-ink), .42);
  transform-origin: 0 50%;
  transform: rotate(var(--a));
}

/* Fluted pie dish */
#dishes .dish--tart .dish__vessel {
  --rim: 13%;
  border-radius: 50%;
  background: no-repeat center / 100% 100% url("data:image/svg+xml,%3Csvg xmlns=%27http://www.w3.org/2000/svg%27 viewBox=%270 0 100 100%27%3E%3Cdefs%3E%3CradialGradient id=%27g%27%3E%3Cstop offset=%27.78%27 stop-color=%27%23e8d9bf%27/%3E%3Cstop offset=%27.86%27 stop-color=%27%23fbf4e7%27/%3E%3Cstop offset=%27.95%27 stop-color=%27%23fffdf8%27/%3E%3Cstop offset=%271%27 stop-color=%27%23eadbc2%27/%3E%3C/radialGradient%3E%3ClinearGradient id=%27l%27 x2=%271%27 y2=%271%27%3E%3Cstop stop-color=%27%23fff%27 stop-opacity=%27.75%27/%3E%3Cstop offset=%27.5%27 stop-color=%27%23fff%27 stop-opacity=%270%27/%3E%3Cstop offset=%271%27 stop-color=%27%237a4a10%27 stop-opacity=%27.14%27/%3E%3C/linearGradient%3E%3C/defs%3E%3Cpath d=%27M50.00 2.60A11.02 11.02 0 0 1 62.27 4.22A11.02 11.02 0 0 1 73.70 8.95A11.02 11.02 0 0 1 83.52 16.48A11.02 11.02 0 0 1 91.05 26.30A11.02 11.02 0 0 1 95.78 37.73A11.02 11.02 0 0 1 97.40 50.00A11.02 11.02 0 0 1 95.78 62.27A11.02 11.02 0 0 1 91.05 73.70A11.02 11.02 0 0 1 83.52 83.52A11.02 11.02 0 0 1 73.70 91.05A11.02 11.02 0 0 1 62.27 95.78A11.02 11.02 0 0 1 50.00 97.40A11.02 11.02 0 0 1 37.73 95.78A11.02 11.02 0 0 1 26.30 91.05A11.02 11.02 0 0 1 16.48 83.52A11.02 11.02 0 0 1 8.95 73.70A11.02 11.02 0 0 1 4.22 62.27A11.02 11.02 0 0 1 2.60 50.00A11.02 11.02 0 0 1 4.22 37.73A11.02 11.02 0 0 1 8.95 26.30A11.02 11.02 0 0 1 16.48 16.48A11.02 11.02 0 0 1 26.30 8.95A11.02 11.02 0 0 1 37.73 4.22A11.02 11.02 0 0 1 50.00 2.60Z%27 fill=%27url(%23g)%27/%3E%3Cpath d=%27M50.00 2.60A11.02 11.02 0 0 1 62.27 4.22A11.02 11.02 0 0 1 73.70 8.95A11.02 11.02 0 0 1 83.52 16.48A11.02 11.02 0 0 1 91.05 26.30A11.02 11.02 0 0 1 95.78 37.73A11.02 11.02 0 0 1 97.40 50.00A11.02 11.02 0 0 1 95.78 62.27A11.02 11.02 0 0 1 91.05 73.70A11.02 11.02 0 0 1 83.52 83.52A11.02 11.02 0 0 1 73.70 91.05A11.02 11.02 0 0 1 62.27 95.78A11.02 11.02 0 0 1 50.00 97.40A11.02 11.02 0 0 1 37.73 95.78A11.02 11.02 0 0 1 26.30 91.05A11.02 11.02 0 0 1 16.48 83.52A11.02 11.02 0 0 1 8.95 73.70A11.02 11.02 0 0 1 4.22 62.27A11.02 11.02 0 0 1 2.60 50.00A11.02 11.02 0 0 1 4.22 37.73A11.02 11.02 0 0 1 8.95 26.30A11.02 11.02 0 0 1 16.48 16.48A11.02 11.02 0 0 1 26.30 8.95A11.02 11.02 0 0 1 37.73 4.22A11.02 11.02 0 0 1 50.00 2.60Z%27 fill=%27url(%23l)%27/%3E%3Cpath d=%27M50.00 9.40A12.30 12.30 0 0 1 60.51 10.78A12.30 12.30 0 0 1 70.30 14.84A12.30 12.30 0 0 1 78.71 21.29A12.30 12.30 0 0 1 85.16 29.70A12.30 12.30 0 0 1 89.22 39.49A12.30 12.30 0 0 1 90.60 50.00A12.30 12.30 0 0 1 89.22 60.51A12.30 12.30 0 0 1 85.16 70.30A12.30 12.30 0 0 1 78.71 78.71A12.30 12.30 0 0 1 70.30 85.16A12.30 12.30 0 0 1 60.51 89.22A12.30 12.30 0 0 1 50.00 90.60A12.30 12.30 0 0 1 39.49 89.22A12.30 12.30 0 0 1 29.70 85.16A12.30 12.30 0 0 1 21.29 78.71A12.30 12.30 0 0 1 14.84 70.30A12.30 12.30 0 0 1 10.78 60.51A12.30 12.30 0 0 1 9.40 50.00A12.30 12.30 0 0 1 10.78 39.49A12.30 12.30 0 0 1 14.84 29.70A12.30 12.30 0 0 1 21.29 21.29A12.30 12.30 0 0 1 29.70 14.84A12.30 12.30 0 0 1 39.49 10.78A12.30 12.30 0 0 1 50.00 9.40Z%27 fill=%27none%27 stroke=%27%23dcc9a8%27 stroke-width=%27.7%27/%3E%3C/svg%3E");
  box-shadow: none;             /* its shadow is the dish's ::after, like every other vessel */
}

/* End-grain wooden board */
#dishes .dish--board .dish__vessel {
  --rim: 6.5%;
  --well: #b97a3f;
  background:
    radial-gradient(circle at 30% 26%, rgba(255, 236, 205, .5), rgba(255, 236, 205, 0) 46%),
    repeating-radial-gradient(circle at 47% 53%, #cf9356 0 1.1%, #d9a466 1.1% 2.6%, #c98a4c 2.6% 3.3%),
    #cf9356;
  box-shadow:                    /* the board's thickness, then where it meets the cloth */
    1px 2px 0 #a8692f,
    3px 5px 0 #8f5726,
    3px 6px 3px rgba(var(--shade), .3);
}

/* ---------- Layouts (table units) ----------
   wide: the whole table fits the screen under the header, the line is its
   centrepiece; medium: the same idea, taller; narrow: the table runs down
   the phone, two plates above the line. */
/* @layout:begin (written by build/layout.mjs) */
@media (min-width: 1000px) {
  #dishes { --layout: wide; --th: 58; --table-w: max(min(100% - 2 * var(--gutter), 900px), min(100% - 2 * var(--gutter), 1480px, (100svh - var(--chrome-h) - 2 * var(--pad)) * 100 / 58));
    --hx: 25; --hy: 21.5; --hw: 50; --hf: 5.6; --ha: center; }
  #dishes .d-creampuff { --x: 8.7; --y: 8.8; --d: 13.4; }
  #dishes .d-beefstew { --x: 23.2; --y: 7.5; --d: 11; }
  #dishes .d-tandoori { --x: 37.8; --y: 11.8; --d: 14.6; }
  #dishes .d-chickenyoghurt { --x: 52.4; --y: 7.5; --d: 11; }
  #dishes .d-curry { --x: 65.7; --y: 11.7; --d: 12.2; }
  #dishes .d-popcorn { --x: 79.1; --y: 7.5; --d: 11; }
  #dishes .d-brisketsandwich { --x: 92.5; --y: 7.5; --d: 11; }
  #dishes .d-cupcakes { --x: 75; --y: 22.9; --d: 12.2; }
  #dishes .d-gyoza { --x: 90.2; --y: 21.9; --d: 13.4; --handle: -40deg; }
  #dishes .d-padthai { --x: 91.9; --y: 37; --d: 12.2; }
  #dishes .d-samosas { --x: 77.9; --y: 36.6; --d: 11; }
  #dishes .d-yakiudon { --x: 85; --y: 49.9; --d: 12.2; }
  #dishes .d-fusiondinner { --x: 68.6; --y: 48.7; --d: 14.6; }
  #dishes .d-ribs { --x: 52.9; --y: 49.9; --d: 12.2; }
  #dishes .d-poke { --x: 38.3; --y: 45.6; --d: 13.4; }
  #dishes .d-salmonorzo { --x: 23.7; --y: 49.9; --d: 12.2; }
  #dishes .d-beefbowl { --x: 7.5; --y: 50.5; --d: 11; }
  #dishes .d-quiche { --x: 14.6; --y: 37.8; --d: 13.4; }
  #dishes .d-pasta { --x: 8.1; --y: 24; --d: 12.2; }
  #dishes .d-steakdinner { --x: 23.8; --y: 22.7; --d: 14.6; }
}
@media (min-width: 600px) and (max-width: 999.98px) {
  #dishes { --layout: medium; --th: 128; --table-w: min(100% - 2 * var(--gutter), 860px);
    --hx: 22; --hy: 53; --hw: 56; --hf: 7.5; --ha: center; }
  #dishes .d-creampuff { --x: 12.9; --y: 115.1; --d: 20; }
  #dishes .d-beefstew { --x: 36.5; --y: 85.2; --d: 16.8; }
  #dishes .d-tandoori { --x: 13.9; --y: 90.3; --d: 22; }
  #dishes .d-chickenyoghurt { --x: 69.2; --y: 85.2; --d: 16.8; }
  #dishes .d-curry { --x: 52.9; --y: 99; --d: 18.4; }
  #dishes .d-popcorn { --x: 11.3; --y: 66.7; --d: 16.8; }
  #dishes .d-brisketsandwich { --x: 88.7; --y: 116.7; --d: 16.8; }
  #dishes .d-cupcakes { --x: 87; --y: 73.3; --d: 18.4; }
  #dishes .d-gyoza { --x: 61; --y: 12.9; --d: 20; --handle: 135deg; }
  #dishes .d-padthai { --x: 87.9; --y: 95.4; --d: 18.4; }
  #dishes .d-samosas { --x: 53.8; --y: 40.8; --d: 16.8; }
  #dishes .d-yakiudon { --x: 33; --y: 35.9; --d: 18.4; }
  #dishes .d-fusiondinner { --x: 75.7; --y: 32.8; --d: 22; }
  #dishes .d-ribs { --x: 67.3; --y: 115.9; --d: 18.4; }
  #dishes .d-poke { --x: 37.2; --y: 12.9; --d: 20; }
  #dishes .d-salmonorzo { --x: 12.1; --y: 45.3; --d: 18.4; }
  #dishes .d-beefbowl { --x: 88.7; --y: 52; --d: 16.8; }
  #dishes .d-quiche { --x: 36.6; --y: 115.1; --d: 20; }
  #dishes .d-pasta { --x: 87.9; --y: 12.1; --d: 18.4; }
  #dishes .d-steakdinner { --x: 13.9; --y: 21.4; --d: 22; }
}
@media (max-width: 599.98px) {
  #dishes { --layout: narrow; --th: 494; --table-w: calc(100% - 2 * var(--gutter));
    --hx: 3; --hy: 50; --hw: 94; --hf: 13; --ha: center; }
  #dishes .d-creampuff { --x: 25.25; --y: 24.25; --d: 39.5; }
  #dishes .d-beefstew { --x: 77.75; --y: 26.25; --d: 33.5; }
  #dishes .d-tandoori { --x: 26; --y: 112.7; --d: 43; }
  #dishes .d-chickenyoghurt { --x: 71.8; --y: 131.7; --d: 33.5; }
  #dishes .d-curry { --x: 25.8; --y: 156.4; --d: 36.5; }
  #dishes .d-popcorn { --x: 68.8; --y: 175.4; --d: 33.5; }
  #dishes .d-brisketsandwich { --x: 22.3; --y: 195.3; --d: 33.5; }
  #dishes .d-cupcakes { --x: 71.3; --y: 214.4; --d: 36.5; }
  #dishes .d-gyoza { --x: 33.3; --y: 234.3; --d: 39.5; --handle: 135deg; }
  #dishes .d-padthai { --x: 75.3; --y: 254.7; --d: 36.5; }
  #dishes .d-samosas { --x: 29.3; --y: 274.6; --d: 33.5; }
  #dishes .d-yakiudon { --x: 73.3; --y: 295.1; --d: 36.5; }
  #dishes .d-fusiondinner { --x: 26; --y: 316.7; --d: 43; }
  #dishes .d-ribs { --x: 67.3; --y: 335.7; --d: 36.5; }
  #dishes .d-poke { --x: 29.3; --y: 361.8; --d: 39.5; }
  #dishes .d-salmonorzo { --x: 75.3; --y: 380.8; --d: 36.5; }
  #dishes .d-beefbowl { --x: 30.3; --y: 402.3; --d: 33.5; }
  #dishes .d-quiche { --x: 69.8; --y: 422.5; --d: 39.5; }
  #dishes .d-pasta { --x: 23.8; --y: 441.5; --d: 36.5; }
  #dishes .d-steakdinner { --x: 67; --y: 467.6; --d: 43; }
}
/* @layout:end */

/* ---------- Reduced motion: a still table ---------- */
@media (prefers-reduced-motion: reduce) {
  #dishes .dish__vessel { transition: none; }
}