/* ═══════════════════════════════════════════════════════════════
   THE GRILL: the Big Bird story, the portion picker, a red window.
   ═══════════════════════════════════════════════════════════════ */
.grill { padding-top: clamp(3.5rem, 7vw, 6rem); }

.grill__grid { display: grid; gap: clamp(2rem, 5vw, 3.5rem); }
.grill__grid > * { min-width: 0; }

.grill__copy .h-display { margin-bottom: 1rem; max-width: 12ch; }
.grill__copy .lede { margin-bottom: .8rem; }

.grill__photo { position: relative; }
.grill__window { aspect-ratio: 4 / 5; }
.grill__window img { object-position: 50% 40%; }
.grill__caption {
  margin: .9rem 0 0;
  font-family: var(--font-cond);
  font-size: .92rem; font-weight: 600;
  letter-spacing: .12em; text-transform: uppercase;
  color: var(--sage-ink);
}

@media (min-width: 980px) {
  .grill__grid { grid-template-columns: 1.15fr .85fr; align-items: start; gap: clamp(2.5rem, 6vw, 6rem); }
  .grill__photo { position: sticky; top: calc(var(--header-h) + 2rem); }
}
@media (max-width: 979px) {
  .grill__window { aspect-ratio: 4 / 3; }
  .grill__window img { object-position: 50% 50%; }
}

.grill .portion { margin-top: clamp(1.5rem, 4vw, 3rem); }

/* ── Phones: the half chicken photo takes the portion chart's place ──
   The chart (.portion__hen) is hidden and the photo moves up between the
   story and the portion boards. CSS only: .grill__copy and .portion step
   aside (display: contents) so their children can be ordered in the grid.
   Delete this block to bring the chart back on phones. */
@media (max-width: 759px) {
  .grill__grid { grid-template-columns: minmax(0, 1fr); gap: 0; }
  .grill__copy, .grill .portion { display: contents; }
  .grill .portion__hen { display: none; }
  .grill__photo { order: 1; margin: 1.6rem 0 2.25rem; }
  .grill .portion__pick { order: 2; min-width: 0; }
}

/* Phones: Meet the Big Bird, louder. Each line sized to the column,
   "Big Bird." the biggest and in comb red. */
@media (max-width: 759px) {
  .grill__copy .grill__title {
    --col: calc(100vw - 2 * var(--gutter));
    max-width: none;
    margin-bottom: 1.15rem;
    line-height: .94;
  }
  .grill__meet { display: block; font-size: min(calc(var(--col) * .15), 4rem); }
  .grill__title em { display: block; font-size: min(calc(var(--col) * .205), 5.5rem); }
}