/* ============================================================
   CRISPY BIRD — FOLDED A4 TAKEAWAY MENU
   One A4 sheet, printed both sides, folded down the middle to
   make four A5 pages. Same brand and the same menu-data.js the
   boards and the website use.
   ============================================================ */

:root {
  --bg: #f7ecdb;
  --ink: #1d1d1b;
  --ink-dim: #6d6559;
  --red: #a3111c;
  --red-deep: #7d0c15;
  --gold: #e9b44c;
  --font-display: "Anton", Impact, sans-serif;
  --font-marker: "Permanent Marker", cursive;
  --font-body: "Archivo", system-ui, sans-serif;
}

* { margin: 0; padding: 0; box-sizing: border-box; }

/* A4 landscape, two A5 panels side by side */
@page { size: A4 landscape; margin: 0; }

html, body {
  font-family: var(--font-body);
  color: var(--ink);
  background: #58544e;                 /* only seen on screen, never printed */
  -webkit-print-color-adjust: exact;
  print-color-adjust: exact;
}

.sheet {
  width: 297mm; height: 210mm;
  display: flex;
  background: var(--bg);
  overflow: hidden;
  page-break-after: always;
  break-after: page;
  margin: 0 auto 8mm;                  /* the gap is a screen-only preview aid */
  position: relative;
}
.sheet:last-child { page-break-after: auto; break-after: auto; }

/* the fold, printed as a faint guide */
.sheet::after {
  content: ""; position: absolute; top: 0; bottom: 0; left: 50%;
  border-left: 0.4mm dashed rgba(29, 29, 27, 0.18);
}

/* ---------- Top ribbon ----------
   The website's torn brush-stroke band, run across the head of every
   panel: solid red at the top edge, ragged along the bottom. The mask
   sits on a pseudo-element so any text inside stays unmasked. */
.ribbon {
  position: absolute; top: 0; left: 0; right: 0; height: 9mm; z-index: 4;
}
.ribbon::before {
  content: ""; position: absolute; inset: 0;
  background: var(--red);
  -webkit-mask: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1200 90" preserveAspectRatio="none"><path d="M0 0 H1200 V38 q-80 22 -190 12 q-140 -14 -260 8 q-150 24 -300 2 Q300 44 160 58 Q60 68 0 50 Z"/></svg>') top/100% 100% no-repeat;
  mask: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1200 90" preserveAspectRatio="none"><path d="M0 0 H1200 V38 q-80 22 -190 12 q-140 -14 -260 8 q-150 24 -300 2 Q300 44 160 58 Q60 68 0 50 Z"/></svg>') top/100% 100% no-repeat;
}
.ribbon__text {
  position: relative; z-index: 1; display: block; text-align: center;
  padding-top: 1.6mm;
  font-weight: 800; font-size: 7pt; letter-spacing: 0.34em;
  text-transform: uppercase; color: var(--bg);
}

.panel {
  width: 148.5mm; height: 210mm;
  padding: 10mm 8mm 8mm;
  display: flex; flex-direction: column;
  position: relative;
  overflow: hidden;
  background-color: var(--bg);
  /* subtle crinkled-paper grain, same recipe as the website */
  background-image:
    radial-gradient(rgba(163, 17, 28, 0.05) 1px, transparent 1.4px),
    radial-gradient(rgba(29, 29, 27, 0.045) 1px, transparent 1.4px);
  background-size: 3.2mm 3.2mm, 5mm 5mm;
  background-position: 0 0, 1.6mm 2.2mm;
}

/* ---------- Category blocks ----------
   Headings are quiet — a big display name on a thin rule — so the one
   large photograph per panel stays the thing the eye lands on first. */
.cat { margin-bottom: 1.6mm; }
.cat:last-child { margin-bottom: 0; }

.cat__head {
  display: flex; align-items: baseline; gap: 3mm; flex-wrap: wrap;
  margin: 0 0 1.6mm;
}
.cat__name {
  font-family: var(--font-display);
  font-size: 19pt; letter-spacing: 0.005em; text-transform: uppercase;
  line-height: 0.92; color: var(--ink);
}
.cat__blurb {
  font-family: var(--font-marker);
  font-size: 7pt; color: var(--red); line-height: 1.15;
  margin-left: auto; text-align: right; max-width: 60mm;
}
/* a heading that sets its blurb underneath and left-aligned, the way the
   photo openers do, rather than pushing it out to the right margin */
.cat__head--stacked { display: block; }
.cat__head--stacked .cat__blurb {
  margin-left: 0; text-align: left; max-width: none; margin-top: 1.2mm;
}
/* pushes a section down into height freed further up the panel */
.cat--spaced { margin-top: 4mm; }

/* ---------- Mini-card grid ----------
   The print cousin of the website's menu-card grid: small white cards
   with the ink border + pop shadow, most carrying their own photo, each
   tilted a hair off square so the grid doesn't read as a spreadsheet. */
/* row gap clears the badges, which sit proud of each card top */
.cardgrid { display: grid; grid-template-columns: 1fr 1fr; gap: 2mm 2mm; padding-top: 1mm; }
.mcard {
  position: relative; background: #fff;
  border: 0.4mm solid var(--ink); border-radius: 2mm;
  box-shadow: 0.8mm 0.8mm 0 var(--ink);
  padding: 0.5mm 1.6mm;
  display: flex; gap: 2mm; align-items: center;
}
.cardgrid .mcard:nth-child(odd) { transform: rotate(-0.4deg); }
.cardgrid .mcard:nth-child(even) { transform: rotate(0.4deg); }
/* Photos that burst out of their card: the shot is grown well past the
   card's inner height and given negative vertical margins so it spills over
   the top and bottom edges onto the cream without changing the row height.
   The card stays the same size; only the food gets bigger. */
.cardgrid--pop .mcard__thumb {
  width: 15.5mm; height: 15.5mm;
  margin-top: -2.6mm; margin-bottom: -2.6mm;
}
.cardgrid--pop .mcard__thumb img {
  filter: drop-shadow(0 1.1mm 1mm rgba(29, 29, 27, 0.32));
}

/* Staggered grid: lift the left-hand column by one row so it climbs into
   the clear space under a flipped opener's heading — the photo sits on the
   other side, so nothing collides. Offset via `top`, not margin: the cards
   are already position:relative, and a negative margin would feed back into
   the auto row heights and buckle the grid. */
.cardgrid--stagger .mcard:nth-child(odd) { top: -14.8mm; }

/* an odd item count leaves a hole in a two-column grid, so the last card
   goes full width with a bigger photo and reads as the feature */
.mcard--wide { grid-column: 1 / -1; }
.mcard--wide .mcard__thumb { width: 15mm; height: 13mm; }
.mcard__thumb {
  width: 9.5mm; height: 9.5mm; flex: 0 0 auto;
  display: flex; align-items: center; justify-content: center;
}
.mcard__thumb img {
  max-width: 100%; max-height: 100%; object-fit: contain;
  filter: drop-shadow(0 0.8mm 0.8mm rgba(29, 29, 27, 0.28));
}
.mcard__body { flex: 1; min-width: 0; }
.mcard__row { display: flex; align-items: baseline; gap: 1.5mm; }
.mcard__name { font-weight: 800; font-size: 7.6pt; line-height: 1.1; }
.mcard__price { font-family: var(--font-display); font-size: 9.5pt; color: var(--red); margin-left: auto; white-space: nowrap; }
.mcard__desc { font-size: 6.1pt; line-height: 1.2; color: #4a453d; font-weight: 600; margin-top: 0.4mm; }
/* a service-window prefix ("From 5pm.", "11am–3pm only.") is a promise to
   the customer, not flavour text — it gets colour, not just prose, so the
   eye catches it before reading the rest of the line. */
.mcard__desc b, .item__desc b, .sized__desc b { color: var(--red); font-weight: 800; }
.mcard__badge {
  position: absolute; top: -1.8mm; right: 2mm;
  font-weight: 800; font-size: 4.6pt; letter-spacing: 0.08em; text-transform: uppercase;
  background: var(--red); color: var(--bg);
  border: 0.3mm solid var(--ink); border-radius: 10mm;
  padding: 0.3mm 1.4mm 0.5mm;
  box-shadow: 0.4mm 0.4mm 0 var(--ink);
  transform: rotate(2deg);
}

/* ---------- Sized items ----------
   Chicken sold by the piece prices each size in its own stamped box —
   the same treatment the rotisserie carve-up gets — set beside the name
   so the sizes read as a price board rather than a run-on line. */
.sized { display: flex; align-items: center; gap: 3mm; padding: 0.7mm 0; }
.sized + .sized { border-top: 0.3mm dotted rgba(29, 29, 27, 0.25); }
.sized__text { flex: 1; min-width: 0; }
.sized__name { font-weight: 800; font-size: 9pt; line-height: 1.1; }
.sized__desc { font-size: 6.6pt; line-height: 1.18; color: #4a453d; font-weight: 600; margin-top: 0.7mm; }
.sized__boxes { display: flex; gap: 1.5mm; flex: 0 0 auto; }
.sized__box {
  min-width: 14.5mm; text-align: center;
  background: #fff; border: 0.4mm solid var(--ink); border-radius: 1.6mm;
  box-shadow: 0.7mm 0.7mm 0 var(--ink);
  padding: 1mm 1.4mm 1.1mm;
}
.sized__boxes .sized__box:nth-child(odd) { transform: rotate(-0.6deg); }
.sized__boxes .sized__box:nth-child(even) { transform: rotate(0.6deg); }
.sized__box-label {
  font-size: 4.8pt; font-weight: 800; letter-spacing: 0.08em;
  text-transform: uppercase; color: var(--ink-dim);
}
.sized__box-price {
  font-family: var(--font-display); font-size: 11.5pt; color: var(--red);
  line-height: 1; margin-top: 0.5mm;
}

/* ---------- Carve-up poster ----------
   Quarter / Half / Whole priced in three stamped boxes, like the price
   boards on the shop wall — the rotisserie needs numbers, not a list. */
.carve { display: flex; gap: 1.8mm; margin-bottom: 2mm; padding-top: 1.4mm; }
/* the same four boxes squared into 2x2, for riding in an opener's column */
.carve--grid {
  display: grid; grid-template-columns: 1fr 1fr; gap: 1.8mm;
  margin-bottom: 0; padding-top: 0;
}
.carve__box {
  position: relative; flex: 1; text-align: center;
  background: #fff; border: 0.45mm solid var(--ink); border-radius: 2mm;
  box-shadow: 0.9mm 0.9mm 0 var(--ink);
  padding: 1.5mm 1mm 1.4mm;
}
.carve__box:nth-child(1) { transform: rotate(-0.5deg); }
.carve__box:nth-child(2) { transform: rotate(0.4deg); }
.carve__box:nth-child(3) { transform: rotate(-0.3deg); }
.carve__box:nth-child(4) { transform: rotate(0.5deg); }
.carve__box--wide { grid-column: 1 / -1; }
.carve__label { font-family: var(--font-display); font-size: 8pt; text-transform: uppercase; line-height: 1; }
.carve__price { font-family: var(--font-display); font-size: 14.5pt; color: var(--red); line-height: 1; margin-top: 0.9mm; }
.carve__sub {
  font-size: 4.8pt; font-weight: 800; color: var(--ink-dim);
  text-transform: uppercase; letter-spacing: 0.07em; margin-top: 0.7mm;
}
.carve__badge {
  position: absolute; top: -2.2mm; right: -1mm;
  font-weight: 800; font-size: 4.6pt; letter-spacing: 0.08em; text-transform: uppercase;
  background: var(--red); color: var(--bg);
  border: 0.3mm solid var(--ink); border-radius: 10mm;
  padding: 0.3mm 1.4mm 0.5mm;
  box-shadow: 0.4mm 0.4mm 0 var(--ink);
  transform: rotate(3deg);
}

/* ---------- Dark sides showcase ----------
   The website's "sides callout" block: an ink box with the photographed
   sides in a strip, everything else priced in one line underneath. */
/* Set on cream like every other section rather than the website's dark
   slab — in print that black block was the only one on the sheet and
   read as a foreign object. The round tiles carry the section instead. */
.sidesbox { margin-top: 6mm; }
/* the left-hand row opens the section (heading + first six), the
   right-hand row is a bare continuation — no heading, no top margin to
   spare, so it packs in tight underneath the deals */
.sidesbox--compact { margin-top: 1.5mm; }
/* the continuation row on the right has nothing pinning it down, so
   without this it drifts up under the deals instead of sitting level
   with the row that opens the section on the facing page */
.sidesbox--bottom { margin-top: auto; }
.sidesbox__head-sm {
  display: flex; align-items: baseline; gap: 2mm;
  border-bottom: 0.6mm solid var(--red);
  padding-bottom: 0.5mm; margin: 0 0 1mm;
}
.sidesbox__head-sm .cat__name { font-size: 12.5pt; }
/* 12 sides now (Mozzarella Sticks, Onion Rings, Seasoned Rice, Side Salad
   and the 1.5L bottle joined the list) — six across and two rows down
   reads far better than squeezing one strip of twelve into the width. */
.sidesbox__grid {
  display: grid; grid-template-columns: repeat(6, 1fr); gap: 1.5mm 1.4mm;
  padding-top: 0.9mm;
}
.sidesbox__item { text-align: center; }
/* The photo floats on the page with a grounding shadow, like the openers
   and card thumbs. The white circle it used to sit in cost 1.6mm of padding
   on each side, leaving the actual food barely 5mm wide — dropping it lets
   the shot fill the whole column. */
.sidesbox__photo {
  height: 9.3mm; margin: 0 auto;
  display: flex; align-items: flex-end; justify-content: center;
}
.sidesbox__photo img {
  max-width: 100%; max-height: 100%; object-fit: contain;
  filter: drop-shadow(0 0.9mm 0.9mm rgba(29, 29, 27, 0.3));
}
.sidesbox__price {
  display: inline-block; position: relative; z-index: 2;
  margin-top: -0.8mm;
  font-family: var(--font-display); font-size: 6.4pt; letter-spacing: 0.02em;
  background: var(--red); color: var(--bg);
  border: 0.3mm solid var(--ink); border-radius: 10mm;
  padding: 0.35mm 1.6mm 0.5mm;
  box-shadow: 0.5mm 0.5mm 0 var(--ink);
  transform: rotate(-2deg);
}
.sidesbox__item:nth-child(even) .sidesbox__price { transform: rotate(2deg); }
.sidesbox__name {
  display: block; margin-top: 1.2mm;
  font-family: var(--font-display); font-size: 5.6pt; letter-spacing: 0.02em;
  text-transform: uppercase; line-height: 1.15; color: var(--ink);
}

/* ---------- Ticker ----------
   The black ticker band from the top of the website, printed as a strip
   along the bottom edge of the panels. */
.ticker {
  background: var(--red); color: var(--bg);
  font-family: var(--font-display); font-size: 6.2pt; letter-spacing: 0.14em;
  text-transform: uppercase; white-space: nowrap; overflow: hidden;
  text-align: center; line-height: 1;
  padding: 1.6mm 0 1.8mm;
}
.ticker--abs { position: absolute; left: 0; right: 0; bottom: 0; }
.panel--ticker { padding-bottom: 9.5mm; }
.cover .ticker { align-self: stretch; margin: 1mm -8mm -8mm; }

/* ---------- Items ---------- */
.item {
  display: flex; align-items: baseline; gap: 2mm;
  padding: 0.3mm 0;
}
.item__name {
  font-family: var(--font-body); font-weight: 800;
  font-size: 9pt; letter-spacing: 0.01em; white-space: nowrap;
}
.item__badge {
  font-family: var(--font-body); font-weight: 800;
  font-size: 5.5pt; letter-spacing: 0.08em; text-transform: uppercase;
  background: var(--red); color: var(--bg);
  border: 0.35mm solid var(--ink);
  border-radius: 10mm; padding: 0.4mm 1.6mm 0.6mm;
  white-space: nowrap;
  box-shadow: 0.55mm 0.55mm 0 var(--ink);
  transform: rotate(-2deg);
  display: inline-block;
}
/* dotted leader so the eye tracks from the dish to its price */
.item__dots {
  flex: 1; min-width: 3mm;
  border-bottom: 0.35mm dotted rgba(29, 29, 27, 0.32);
  transform: translateY(-0.6mm);
}
.item__price {
  font-family: var(--font-display);
  font-size: 11pt; color: var(--red); white-space: nowrap;
}
.item__desc {
  font-size: 6pt; line-height: 1.15; color: #4a453d;
  font-weight: 600;
  margin: 0 0 0.5mm; padding-right: 12mm;
}

/* sizes on one line: 2 PC £5 · 4 PC £9.50 … */
.item__variants {
  display: flex; flex-wrap: wrap; gap: 0 3mm;
  font-size: 6.6pt; font-weight: 700; color: var(--ink-dim);
  margin: 0 0 0.8mm;
}
.item__variants b {
  font-family: var(--font-display); font-weight: 400;
  font-size: 9pt; color: var(--red); margin-left: 0.8mm;
}

/* ---------- Opener ----------
   The big shot that leads each panel sits BESIDE its heading, not above
   it — photo on one side, name + blurb on the other — so the full panel
   width is used and nothing floats in empty cream. On the open spread
   the left panel carries its photo left and the right panel right, so
   the photography frames the fold. */
.opener { margin-bottom: 1.6mm; }
.opener__row { display: flex; align-items: center; gap: 4mm; }
.opener--flip .opener__row { flex-direction: row-reverse; }
/* drops a section down a panel that has height to spare */
.opener--spaced { margin-top: 2mm; }
.opener__art {
  position: relative; flex: 1.15;
  height: 48mm;
  display: flex; align-items: center; justify-content: center;
}
/* a standalone row outside any .cat still needs its own breathing room */
.panel > .item-block { margin-bottom: 1.6mm; }
.opener__art::before {
  content: ""; position: absolute; left: 50%; top: 52%;
  width: 68mm; height: 68mm; border-radius: 50%;
  background: radial-gradient(circle, rgba(163, 17, 28, 0.16) 0%, rgba(163, 17, 28, 0.06) 58%, rgba(163, 17, 28, 0) 72%);
  transform: translate(-50%, -50%);
}
.opener__art img {
  position: relative; z-index: 1;
  max-width: 96%; max-height: 100%; width: auto; height: auto; object-fit: contain;
  filter: drop-shadow(0 2.4mm 2.2mm rgba(29, 29, 27, 0.3));
}
.opener__tag {
  position: absolute; z-index: 2; right: 0; bottom: 1mm;
  font-family: var(--font-marker); font-size: 6.6pt;
  background: var(--red); color: var(--bg);
  border: 0.4mm solid var(--ink); border-radius: 20mm;
  padding: 0.8mm 2.4mm 1mm; white-space: nowrap;
  box-shadow: 0.6mm 0.6mm 0 var(--ink);
  transform: rotate(-3deg);
}
/* the heading column can carry a stacked pair of cards beside the hero
   photo, using space that would otherwise sit empty under the blurb */
.opener__head { flex: 1; min-width: 0; }
.opener__aside { margin-top: 2.2mm; }
/* when the heading column carries cards, pin it to exactly one column of
   the grid below — (full width − column gap) ÷ 2 — so those boxes line up
   at the same width as the rest rather than inheriting the flex ratio */
/* bottom-align so the aside cards finish level with the photo and the grid
   below picks straight up from them, instead of floating 5mm clear */
.opener--aside .opener__row { align-items: flex-end; }
/* fries/rotisserie fill nearly the full art height with their aside, so
   bottom-aligning the two columns is invisible — but a single card in the
   burgers' aside is much shorter, and flex-end would drag its heading down
   away from the top of the box. Top-align there instead. */
.opener--aside-top .opener__row { align-items: flex-start; }
/* the burgers opener trades its full-height hero for a smaller featured
   card beside it, so the photo doesn't need the other openers' full 48mm
   to read as the panel's lead shot */
.opener--short .opener__art { height: 35mm; }
.opener--aside { margin-bottom: 0; }
.opener--aside .opener__head { flex: 0 0 calc((100% - 2mm) / 2); }
.opener--aside .opener__art { flex: 1; }
.cardgrid--1 { grid-template-columns: 1fr; }
.opener--flip .opener__head { text-align: right; }
.opener--aside .opener__head { text-align: left; }
.opener__name {
  font-family: var(--font-display); line-height: 0.92;
  font-size: 19pt; letter-spacing: 0.005em; text-transform: uppercase; color: var(--ink);
}
/* Service window on a section heading. Reversed out in red so it reads as
   a rule of the shop, not a line of the description. */
.opener__when {
  display: inline-block;
  margin-top: 1.4mm;
  padding: 0.8mm 2.2mm 1mm;
  background: var(--red, #a3111c); color: #fff;
  border-radius: 1.2mm;
  font-family: var(--display, inherit);
  font-size: 3.1mm; letter-spacing: 0.04em; text-transform: uppercase;
  white-space: nowrap;
}

.opener__blurb { font-family: var(--font-marker); font-size: 7pt; color: var(--red); margin-top: 1.2mm; }

/* ---------- Doodles ---------- */
.doodle { position: absolute; color: var(--red); opacity: 0.7; }

/* ---------- Front cover ----------
   The website hero, printed: the wordmark, then the giant two-line
   "One bird. Two ways." headline, then the two birds facing off —
   fried on the left, rotisserie on the right, the site's VS roundel
   between them and a marker label under each. */
.cover { justify-content: space-between; text-align: center; align-items: center; }
.cover__top { width: 100%; }
/* the real logo lockup, large — it already reads "fried · rotisserie
   chicken", so the footer no longer repeats that line */
/* the hand-drawn lockup, which already carries "fried + rotisserie" */
.cover__brand { display: block; width: 64.9mm; height: auto; margin: 9mm auto 0; }
/* the hero stage: the greaseproof sheet with the half-and-half bird on
   top of it, exactly as the site stages its hero photograph */
.cover__stage { position: relative; width: 100%; height: 101mm; margin-top: 0; }
.cover__paper { position: absolute; left: -7%; bottom: 0; width: 114%; }
.cover__paper-print text {
  font-family: var(--font-display); font-size: 19px; letter-spacing: 1px;
  fill: var(--red); opacity: 0.7;
}
.cover__bird {
  position: absolute; z-index: 2; left: 50%; top: 50%;
  height: 99.5mm; width: auto;
  transform: translate(-50%, -50%) rotate(1.5deg);
}
/* the two labels pinned to the bird's two halves */
.cover__label {
  position: absolute; z-index: 3;
  font-family: var(--font-marker); font-size: 8.5pt;
  background: #fff; border: 0.5mm solid var(--ink); border-radius: 20mm;
  padding: 1mm 3.4mm 1.2mm; white-space: nowrap;
  box-shadow: 0.8mm 0.8mm 0 var(--ink);
}
/* pinned to the bird itself, not the sheet — the bird is 94mm wide in a
   132mm stage, so these sit just inside its two edges as on the site */
.cover__label--fried { left: 24mm; bottom: 21%; transform: rotate(-7deg); }
.cover__label--rot {
  right: 20mm; top: 19%; transform: rotate(6deg);
  background: var(--red); color: var(--bg);
}
.cover__bubble {
  position: absolute; z-index: 3; right: 4mm; bottom: 3mm;
  width: 21mm; height: 21mm; border-radius: 50%;
  background: #fff; border: 0.5mm solid var(--ink);
  box-shadow: 1mm 1mm 0 var(--ink);
  display: flex; align-items: center; justify-content: center;
  font-family: var(--font-marker); font-size: 7.5pt; line-height: 1.15;
  text-align: center; color: var(--ink);
  transform: rotate(8deg);
}

.cover__headline { margin-top: 0.5mm; line-height: 0.92; }
.cover__headline span, .cover__headline em {
  display: block; font-family: var(--font-display); font-style: normal;
  font-size: 50pt; letter-spacing: 0.005em; text-transform: uppercase;
}
.cover__headline em { color: var(--red); transform: rotate(-1.4deg); }
.cover__sub {
  max-width: 108mm; margin: 1.5mm auto 0;
  font-size: 8pt; font-weight: 600; line-height: 1.35;
}
.cover__order {
  margin-top: 1.2mm;
  font-size: 6.8pt; font-weight: 800; letter-spacing: 0.05em;
  text-transform: uppercase; color: var(--red);
}
/* Foot of the cover: what we do, then how to reach us. The old two-line
   descriptor is folded into one small-caps line so the web address and
   phone can take the space and still be the loudest thing down here. */
.cover__foot { width: 100%; }
.cover__web {
  font-family: var(--font-display); font-size: 16pt; color: var(--red);
  letter-spacing: 0.02em; line-height: 1; margin-top: 0.7mm;
}
.cover__contact {
  font-size: 7.4pt; font-weight: 700; line-height: 1.3; margin-top: 0.8mm;
}
.cover__contact b {
  font-family: var(--font-display); font-weight: 400;
  font-size: 9.5pt; letter-spacing: 0.02em;
}

/* ---------- Allergen note ---------- */
/* the panel is a flex column, so auto top margin collects the leftover
   height above this note and settles it on the bottom edge */
.back__note {
  margin-top: auto;
  border-top: 0.5mm solid rgba(29, 29, 27, 0.25);
  padding-top: 1.4mm;
  /* allergy/hygiene info is safety-relevant, not filler — full ink and a
     heavier weight buy real contrast at no extra vertical cost */
  font-size: 6.1pt; font-weight: 700; line-height: 1.38; color: var(--ink);
}
.back__note b { color: var(--red); }

/* The DIY waffle builder, reduced to one strip: the ready-made bowls are
   the photo cards above, so this only needs to say it's possible and
   list what's on offer — the toppings run as small print. */
.builder {
  border: 0.5mm solid var(--ink); border-radius: 2mm;
  padding: 1.4mm 2mm 1.5mm; margin-top: 2mm;
  box-shadow: 0.8mm 0.8mm 0 var(--ink);
  background: #fff;
}
.builder__head {
  display: flex; align-items: baseline; gap: 2mm; margin-bottom: 1mm;
}
.builder__title {
  font-family: var(--font-display); font-size: 10pt; text-transform: uppercase; line-height: 1;
}
.builder__price {
  font-family: var(--font-display); font-size: 10pt; color: var(--red); margin-left: auto; line-height: 1;
}
.builder__line {
  font-size: 6pt; line-height: 1.4; font-weight: 600; color: #4a453d;
}
.builder__line b {
  font-weight: 800; letter-spacing: 0.07em; text-transform: uppercase;
  color: var(--red); font-size: 5.4pt;
}

/* name-and-price lists (sides, waffle combos) sit in two columns —
   no descriptions to wrap, so a single column just wastes the width */
.cat--2col .item-block { break-inside: avoid; }
.cat--2col .cat__list { columns: 2; column-gap: 5mm; }

/* ---------- Included sides ----------
   Two sides come free with every bird. Set straight on the page — the red
   flash carries it, so it needs no box of its own sitting under the four
   price boxes it belongs to. */
.included {
  display: flex; align-items: center; gap: 2.6mm;
  padding: 0 0.4mm; margin: 1.6mm 0 2mm;
}
.included__flash {
  flex: 0 0 auto;
  font-family: var(--font-display); font-size: 8pt; letter-spacing: 0.06em;
  text-transform: uppercase; white-space: nowrap;
  background: var(--red); color: var(--bg);
  border: 0.35mm solid var(--ink); border-radius: 10mm;
  padding: 0.7mm 2.6mm 0.9mm;
  transform: rotate(-2deg);
}
.included__list {
  flex: 1; min-width: 0;
  font-size: 7pt; font-weight: 700; line-height: 1.35;
}
.included__list b { font-weight: 800; }

/* small print flourish */
.panel__pip {
  position: absolute; bottom: 4mm; left: 0; right: 0;
  text-align: center;
  font-size: 5.5pt; font-weight: 800; letter-spacing: 0.25em;
  text-transform: uppercase; color: rgba(29, 29, 27, 0.32);
}

@media screen {
  body { padding: 8mm 0; }
  .sheet { box-shadow: 0 3mm 8mm rgba(0, 0, 0, 0.35); }
}

/* sides that have no photograph yet, listed rather than dropped */
.sidesbox__also {
  margin-top: 1.6mm; font-size: 6.4pt; font-weight: 700;
  color: var(--ink-dim); letter-spacing: 0.01em;
}
.sidesbox__also b { color: var(--red); font-family: var(--font-display); font-weight: 400; }

/* the back panel now carries the allergen notice as well as the fries and
   the waffle bowls — it runs a slightly tighter rhythm to fit */
[data-panel="back"] .cat { margin-bottom: 1.8mm; }
[data-panel="back"] .back__note { font-size: 6.4pt; line-height: 1.32; padding-top: 1.4mm; }
[data-panel="back"] .cardgrid { gap: 1.4mm; }

/* ---------- Add-on rule ----------
   A single line under a category for the paid extras. Deliberately quiet:
   it is a footnote to the cards above, not a row of its own. */
.addonline {
  /* a standalone footnote line under a card grid, for the paid extras that
     don't earn their own photo card */
  display: flex; align-items: center; align-content: center;
  flex-wrap: wrap; gap: 0.6mm 2mm;
  border: 0.4mm dashed rgba(29, 29, 27, 0.34);
  border-radius: 2.4mm;
  padding: 1.5mm 2.6mm;
  font-size: 2.5mm; line-height: 1.3;
  color: #4a453d;
}
.addonline span {
  font-family: "Anton", Haettenschweiler, Impact, sans-serif;
  font-size: 2.6mm; letter-spacing: 0.06em; text-transform: uppercase;
  color: #a3111c;
}
.addonline b { font-weight: 800; color: #1d1d1b; }