.recipes-hero { background: radial-gradient(circle at 80% 20%, rgb(242 140 27 / .12), transparent 28rem); }
.recipes-finder { min-width: 0; display: grid; grid-template-columns: minmax(240px,.65fr) minmax(0,1.35fr); gap: clamp(1.5rem,4vw,4rem); align-items: end; padding: clamp(1.2rem,3vw,2rem); border: 1px solid rgb(223 178 70 / .24); border-radius: var(--radius-lg); background: linear-gradient(145deg,#21150d,#0b0705); }
.recipes-controls { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)) auto; gap: .8rem; align-items: end; }
.recipes-controls label { display: grid; gap: .35rem; color: var(--color-muted); font-size: .72rem; font-weight: 800; letter-spacing: .06em; text-transform: uppercase; }
.recipes-controls__search { grid-column: 1 / 3; }
.recipes-controls select,.recipes-controls input { width: 100%; min-height: 3rem; padding: .75rem .85rem; border: 1px solid rgb(243 231 207 / .18); border-radius: .65rem; color: var(--color-cream); background: #120d09; }
.recipes-results-heading { margin: 1.25rem 0 .85rem; color: var(--color-muted); }
.recipe-grid { display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); gap: 1rem; }
.recipe-card { content-visibility: auto; contain-intrinsic-size: 420px; display: flex; min-width: 0; flex-direction: column; padding: 1.25rem; border: 1px solid rgb(223 178 70 / .22); border-radius: var(--radius-lg); background: linear-gradient(150deg,rgb(30 19 13 / .97),rgb(13 8 5 / .99)); box-shadow: var(--shadow-card); }
.recipe-card__topline,.recipe-card__meta,.recipe-card__actions { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: .55rem; }
.recipe-card__source { color: var(--color-gold); font-size: .68rem; font-weight: 900; letter-spacing: .07em; text-transform: uppercase; }
.recipe-card h3 { margin: .2rem 0 .65rem; font-size: 1.45rem; line-height: 1.15; }
.recipe-card__sauce { margin-bottom: .65rem; color: var(--color-cream-deep); }
.recipe-card__why { padding-top: .7rem; border-top: 1px solid rgb(243 231 207 / .1); font-size: .86rem; }
.recipe-card__meta { margin: auto 0 .9rem; padding-top: .8rem; color: var(--color-muted); font-size: .75rem; }
.recipe-card__actions { justify-content: flex-start; }
.recipe-card__actions .button { min-height: 2.45rem; padding: .55rem .8rem; font-size: .75rem; }
.newsletter-recipe-archive .recipe-card { background: #fffaf0; color: var(--color-ink); }
.newsletter-recipe-archive .recipe-card h3 a,.newsletter-recipe-archive .recipe-card__sauce,.newsletter-recipe-archive .recipe-card__why { color: var(--color-ink); }
.recipe-detail-section { padding-top: clamp(2rem,5vw,5rem); }
.recipe-detail { display: grid; gap: 1.5rem; }
.recipe-detail__header { display: grid; grid-template-columns: minmax(0,1.4fr) minmax(260px,.6fr); gap: clamp(1.5rem,5vw,4rem); align-items: start; }
.recipe-detail__meta { display: flex; flex-wrap: wrap; gap: .55rem; margin-top: 1rem; }
.recipe-detail__meta span { padding: .45rem .7rem; border: 1px solid rgb(223 178 70 / .24); border-radius: 999px; color: var(--color-cream-deep); background: rgb(255 255 255 / .035); }
.recipe-sauce-card,.recipe-detail__why,.recipe-detail__tip { padding: 1.25rem; border: 1px solid rgb(223 178 70 / .24); border-radius: var(--radius-lg); background: linear-gradient(145deg,#21150d,#0b0705); }
.recipe-detail__body { display: grid; grid-template-columns: minmax(260px,.75fr) minmax(0,1.25fr); gap: 1rem; }
.recipe-detail__body > section { padding: clamp(1.25rem,3vw,2rem); border: 1px solid rgb(243 231 207 / .13); border-radius: var(--radius-lg); background: rgb(255 255 255 / .025); }
.recipe-detail__body li { margin-bottom: .8rem; color: var(--color-cream-deep); line-height: 1.6; }
.recipe-detail__tip strong { color: var(--color-gold); }
@media (max-width: 980px) { .recipe-grid { grid-template-columns: repeat(2,minmax(0,1fr)); } .recipes-finder,.recipe-detail__header,.recipe-detail__body { grid-template-columns: 1fr; } }
@media (max-width: 640px) {
  .recipes-finder { gap: 1.1rem; padding: 1rem; }
  .recipe-grid,.recipes-controls { grid-template-columns: minmax(0,1fr); }
  .recipes-controls__search { grid-column: auto; }
  .recipes-controls select,.recipes-controls input { min-width: 0; font-size: 16px; }
  .recipes-controls .button { width: 100%; }
  .recipe-card { padding: 1rem; content-visibility: visible; contain-intrinsic-size: auto; }
  .recipe-card h3 { overflow-wrap: anywhere; font-size: 1.25rem; }
  .recipe-card__actions { align-items: flex-start; }
  .recipe-load-more .button { width: 100%; }
}

.recipe-load-more { display: flex; justify-content: center; margin-top: 1.25rem; }
.recipe-load-more [hidden] { display: none; }

/* Mobile-first sauce picker: only the selected sauce's small recipe shard is loaded. */
.recipes-controls [data-recipe-submit] { align-self: end; }
.recipe-loading { grid-column: 1 / -1; display: grid; justify-items: center; gap: .75rem; padding: 2rem; text-align: center; color: var(--color-muted); }
.recipe-loading span { width: 2rem; height: 2rem; border: 3px solid rgb(223 178 70 / .25); border-top-color: var(--color-gold); border-radius: 50%; animation: recipe-spin .8s linear infinite; }
@keyframes recipe-spin { to { transform: rotate(360deg); } }
.recipes-controls select:disabled,.recipes-controls input:disabled { opacity: .62; cursor: not-allowed; }
@media (min-width: 641px) {
  .recipes-controls { grid-template-columns: repeat(2,minmax(0,1fr)) repeat(2,auto); }
  .recipes-controls__search { grid-column: 1 / 3; }
}
@media (max-width: 640px) {
  .recipes-hero { padding-top: 2.25rem; padding-bottom: 2rem; }
  .recipes-finder { display: block; }
  .recipes-finder > div:first-child { margin-bottom: 1rem; }
  .recipes-controls { display: grid; grid-template-columns: 1fr; width: 100%; }
  .recipes-controls label,.recipes-controls select,.recipes-controls input,.recipes-controls .button { width: 100%; max-width: 100%; }
  .recipes-controls select { text-overflow: ellipsis; }
  .recipe-grid { display: grid; grid-template-columns: 1fr; }
  .recipe-card { content-visibility: visible; contain: none; }
  .recipe-card__topline,.recipe-card__meta { align-items: flex-start; }
  .newsletter-recipe-archive .section-header { align-items: flex-start; }
}

/* Recipe collection labels: every sauce has Carnivore, Vegetarian, and Vegan options. */
.recipe-card__source--carnivore { color: var(--color-orange); }
.recipe-card__source--vegetarian { color: var(--color-gold); }
.recipe-card__source--vegan { color: #9fd38f; }
.recipe-card__source--newsletter { color: var(--color-gold); }
.recipe-sauce-card p + p { margin-top: .35rem; }

.recipe-card__dietary-note {
  margin-top: 0.8rem;
  padding: 0.75rem 0.85rem;
  border-left: 3px solid var(--color-gold);
  background: rgba(223, 178, 70, 0.08);
  font-size: 0.92rem;
}