/* Additions on top of the compiled site.css (kept separate so a rebuild of the
   Tailwind bundle never overwrites them). */

.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}
.hp{position:absolute;left:-9999px;width:1px;height:1px;opacity:0}

/* star ratings */
.fill-sun{fill:var(--color-sun)}
.fill-ink{fill:var(--color-ink)}
.text-sun{color:var(--color-sun)}
.star-half-sun path{fill:url(#half-sun)}
.star-half-ink path{fill:url(#half-ink)}
.text-ink\/25{color:color-mix(in oklab,var(--color-ink) 25%,transparent)}
.text-ink\/50{color:color-mix(in oklab,var(--color-ink) 50%,transparent)}
.text-ink\/60{color:color-mix(in oklab,var(--color-ink) 60%,transparent)}
.text-ink\/80{color:color-mix(in oklab,var(--color-ink) 80%,transparent)}

/* utilities used by the new content that the original bundle didn't include */
.w-28{width:7rem}
.w-full{width:100%}
.max-w-3xl{max-width:48rem}
.max-w-sm{max-width:24rem}
.grid-cols-2{grid-template-columns:repeat(2,minmax(0,1fr))}
.gap-0\.5{gap:.125rem}
.mt-0\.5{margin-top:.125rem}
.mt-16{margin-top:4rem}
.pt-12{padding-top:3rem}
.pb-16{padding-bottom:6rem}
.py-24{padding-block:6rem}
.pointer-events-none{pointer-events:none}
.top-1\/2{top:50%}
.-translate-y-1\/2{transform:translateY(-50%)}
.bg-black{background-color:#000}
.bg-cream{background-color:var(--color-cream)}
.text-base{font-size:1rem;line-height:1.5rem}
.text-3xl{font-size:1.875rem;line-height:2.25rem}
.font-display{font-family:var(--font-display)}
.border-t{border-top-width:1px}
.hover\:bg-flame:hover{background-color:var(--color-flame)}
.hover\:border-flame:hover{border-color:var(--color-flame)}
.text-center{text-align:center}
@media (min-width:640px){.sm\:grid-cols-4{grid-template-columns:repeat(4,minmax(0,1fr))}}
@media (min-width:768px){.md\:p-8{padding:2rem}}
@media (min-width:1024px){.lg\:grid-cols-2{grid-template-columns:repeat(2,minmax(0,1fr))}}

/* header search + mobile menu */
#search-panel[hidden],#mobile-menu[hidden]{display:none}
button[data-save][aria-pressed="true"] svg{fill:var(--color-flame);color:var(--color-flame)}

/* form feedback */
.form-status:empty{display:none}
.form-status.is-error{color:var(--color-flame)}

/* motion */
@media (prefers-reduced-motion:reduce){
  .animate-marquee,.animate-fade-up{animation:none}
  .transition-all,.transition-transform,.transition-colors{transition:none}
}

/* print: only the recipe card */
@media print{
  .print\:hidden{display:none!important}
  .print\:block{display:block!important}
  body{background:#fff}
}
.text-cream\/60{color:color-mix(in oklab,var(--color-cream) 60%,transparent)}