.recipe-hero {
  display: grid;
  grid-template-columns: minmax(0, .8fr) minmax(0, 1.2fr);
  background: var(--deep-forest);
  color: var(--paper);
}
.recipe-hero-copy {
  align-self: center;
  padding: clamp(2.25rem, 6vw, 6rem) clamp(1.25rem, 5.4vw, 5.5rem);
}
.recipe-hero-copy h1 {
  color: inherit;
  font-size: clamp(2.5rem, 5.35vw, 5.8rem);
}
.recipe-hero-copy .back-link {
  color: inherit;
  margin-bottom: clamp(1rem, 2.7vw, 2.2rem);
}
.recipe-hero-copy .lede { max-width: 34ch; }
.recipe-hero-photo { min-width: 0; overflow: hidden; }
.recipe-hero-photo img {
  width: 100%;
  height: 100%;
  min-height: clamp(21rem, 36vw, 39rem);
  object-fit: cover;
}
.recipe-peel-photo {
  display: grid;
  align-items: center;
}
.recipe-peel-photo, .recipe-card-photo { background: linear-gradient(#f1f4f8 15%, #f9fafc 85%); }
.recipe-peel-photo img {
  height: auto;
  min-height: 0;
  aspect-ratio: 3 / 2;
  object-fit: contain;
}
.recipe-collection .recipe-hero-photo img { filter: saturate(1.03) contrast(1.02); }
.recipe-index { display: grid; gap: clamp(1.6rem, 4vw, 3.5rem) clamp(1.25rem, 3vw, 2.75rem); grid-template-columns: repeat(3, minmax(0, 1fr)); }
.recipe-card { min-width: 0; }
.recipe-card-link {
  display: grid;
  gap: .7rem;
  color: var(--forest);
  text-decoration: none;
}
.recipe-card-photo {
  overflow: hidden;
  border-radius: var(--radius);
}
.recipe-card-photo img { width: 100%; aspect-ratio: 3 / 2; object-fit: contain; }
.recipe-card-link:hover .recipe-card-photo img { transform: none; }
.recipe-card-title { display: flex; gap: .4rem; align-items: baseline; justify-content: space-between; }
.recipe-card-title h3 { text-wrap: initial; }
.recipe-card-title .link-arrow { flex: none; }
.recipe-card-link:hover h3 { text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: .19em; }
.recipe-card > p { margin-top: .45rem; color: var(--muted-foreground); }
.recipe-content {
  display: grid;
  grid-template-columns: minmax(0, .76fr) minmax(0, 1.24fr);
  gap: clamp(1.75rem, 6vw, 6rem);
  align-items: start;
}
.recipe-ingredients {
  padding: clamp(1.35rem, 3.2vw, 2.75rem);
  border: 1px solid var(--border);
  border-radius: var(--radius-xl);
  background: var(--card);
  box-shadow: var(--shadow-xs);
}
.recipe-ingredients h2 { font-size: clamp(1.55rem, 3vw, 2.5rem); }
.recipe-ingredients ul { padding: 0; margin: .95rem 0 0; list-style: none; }
.recipe-ingredients li { padding-block: .55rem; border-bottom: 1px solid var(--border); }
.recipe-ingredients li:last-child { padding-bottom: 0; border-bottom: 0; }
.recipe-ingredients a { color: var(--forest); font-weight: 700; }
.recipe-method ol { padding-inline-start: 1.5rem; margin: 1rem 0 0; }
.recipe-method li { padding-block: .72rem; padding-inline-start: .45rem; }
.recipe-method li + li { border-top: 1px solid var(--line); }
.recipe-method li::marker { font-weight: 750; color: var(--forest); }
.recipe-method h3 { font: 750 1rem/1.4 var(--sans); letter-spacing: 0; text-wrap: initial; }
.recipe-method h3 + p { margin-top: .25rem; }
.recipe-in-service { background: var(--sage); }
.recipe-in-service .wrap { display: grid; grid-template-columns: minmax(0, 1.15fr) minmax(0, .85fr); gap: clamp(1rem, 3vw, 2.5rem); }
.recipe-in-service .editorial-photo img { aspect-ratio: 1.53; object-fit: cover; border-radius: var(--radius); }
.recipe-cta { margin-top: 1.2rem; }

@media (hover: hover) and (prefers-reduced-motion: no-preference) {
  .recipe-card-title .link-arrow { transition: transform .35s var(--easing); }
  .recipe-card-link:is(:hover, :focus-visible) .recipe-card-title .link-arrow { transform: translateX(.2rem); }
}
@media (max-width: 900px) {
  .recipe-hero { grid-template-columns: minmax(0, .9fr) minmax(0, 1.1fr); }
  .recipe-index { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 739px) {
  .recipe-hero { grid-template-columns: minmax(0, 1fr); }
  .recipe-hero-photo img { min-height: 0; height: auto; aspect-ratio: 1.5; }
}
@media (max-width: 643px) {
  .recipe-content { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 460px) {
  .recipe-index, .recipe-in-service .wrap { grid-template-columns: minmax(0, 1fr); }
}