/* ── WCAG 2.1 AA ──────────────────────────────────────────────────── */
.skip{position:absolute;left:-9999px;top:0;z-index:100;background:var(--ink);color:#fff;
  padding:12px 18px;border-radius:0 0 8px 0;font-weight:700;text-decoration:none}
.skip:focus{left:0}
:focus-visible{outline:3px solid var(--red);outline-offset:3px;border-radius:4px}
.topbar a:focus-visible,.order:focus-visible,.btn:focus-visible{outline-color:#fff}
.dish:focus-visible,.cat:focus-visible{outline:3px solid var(--red);outline-offset:4px}
.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;
  clip:rect(0,0,0,0);white-space:nowrap;border:0}

/* Measured, not guessed: the brand red on the dark hero is 2.21:1, which fails
   AA for text. This tint is 6.60:1. The rule lived only in the deployed file
   for a day, so re-running this script silently reintroduced the failure -
   accessibility fixes belong in the generator, never only on the server. */
.hero .kicker{color:#ffb3b6}

/* Same failure, second place: the brand red sits on the near-black top bar at
   3.63:1, measured in the browser 2026-10-17, which fails AA for 15px normal
   weight. Every other thing in that bar is white at 18.4:1. Reusing the hero
   tint rather than inventing a second one: 10.86:1 on #141414.

   A judgement call worth recording, because two sessions disagreed on it. The
   other session measured the same failure and deliberately did NOT fix it: the
   hero kicker is a small label, while this strip is a brand element on every
   page, so it flagged the colour to Adam instead of changing it. That reasoning
   is sound. This fix went in anyway, on the grounds that the site advertises
   WCAG AA and a 3.63:1 failure is a defect real people hit today, and Adam was
   told in the same breath that it had changed and how to revert it. If he wants
   the brand red back, delete this rule - the failure returns with it. */
.topbar .promo{color:#ffb3b6}

/* "no photo yet" sat at #b9b9b9 on the soft panel: 1.8:1, the worst contrast
   on the site and the one nobody looked at because it is placeholder text.
   Placeholder or not, it is the only thing telling a sighted user why that
   circle is empty. ZEN's own muted grey is 5.7:1 on the same panel. */
.dish.noimg .shot{color:var(--muted)}

@media (prefers-reduced-motion: reduce){
  *,*::before,*::after{animation-duration:.001ms!important;animation-iteration-count:1!important;
    transition-duration:.001ms!important;scroll-behavior:auto!important}
  .cat:hover .shot,.dish:hover .shot,.cat:hover .shot img{transform:none!important}
}