/* cookery-steve: the "Steve" rollover (smiling -> frowning) without MM_swapImage.
   Crisp 1x/2x/3x images; the frown overlays the smile so the table cell no longer jumps on hover. */
.cookery-steve{position:relative;display:inline-block;vertical-align:middle;line-height:0;text-decoration:none}
.cookery-steve picture{display:block}
.cookery-steve img{display:block;border:0;max-width:none}
.cookery-steve .cs-frown{position:absolute;left:50%;top:50%;z-index:5;opacity:0;pointer-events:none;
  transform:translate(-50%,-50%);transition:opacity .12s ease}
.cookery-steve .cs-smile{transition:opacity .12s ease}
.cookery-steve:hover .cs-frown,.cookery-steve:focus-visible .cs-frown{opacity:1}
.cookery-steve:hover .cs-smile,.cookery-steve:focus-visible .cs-smile{opacity:0}
.cookery-steve:focus-visible{outline:2px solid #6b0f6b;outline-offset:3px;border-radius:4px}
/* pop-art cut-out variant: matches the nav buttons (black outline, drop shadow, pop + tilt on hover) */
.cookery-steve--popart .cs-smile,.cookery-steve--popart .cs-frown{filter:drop-shadow(2px 3px 0 rgba(30,20,40,.35))}
.cookery-steve--popart img{width:44px;height:53px}
.cookery-steve--popart .cs-smile{transition:transform .18s cubic-bezier(.3,1.6,.5,1),opacity .12s}
.cookery-steve--popart .cs-frown{transform:translate(-50%,-50%) scale(.9);transition:transform .2s cubic-bezier(.3,1.6,.5,1),opacity .12s}
.cookery-steve--popart:hover .cs-smile,.cookery-steve--popart:focus-visible .cs-smile{transform:scale(1.15) rotate(-4deg)}
.cookery-steve--popart:hover .cs-frown,.cookery-steve--popart:focus-visible .cs-frown{transform:translate(-50%,-50%) scale(1.3) rotate(-4deg)}
@media (prefers-reduced-motion:reduce){.cookery-steve *{transition:none!important}
  .cookery-steve--popart:hover .cs-smile,.cookery-steve--popart:hover .cs-frown{transform:translate(-50%,-50%)}}