.recipes-page { background: var(--paper); }
.recipes-page .site-header.is-scrolled .desktop-nav a[aria-current="page"]::after,
.recipes-page .desktop-nav a[aria-current="page"]::after { transform: scaleX(1); }

.recipes-hero {
  position: relative;
  display: flex;
  min-height: min(820px, 92svh);
  align-items: flex-end;
  overflow: hidden;
  color: var(--white);
  background: var(--olive);
}
.recipes-hero__image,
.recipes-hero__shade { position: absolute; inset: 0; width: 100%; height: 100%; }
.recipes-hero__image { object-fit: cover; object-position: center 52%; }
.recipes-hero__shade { background: linear-gradient(90deg, rgba(25, 20, 11, .82) 0%, rgba(25, 20, 11, .36) 58%, rgba(25, 20, 11, .13) 100%), linear-gradient(0deg, rgba(17, 13, 7, .7), transparent 62%); }
.recipes-hero__content { position: relative; z-index: 1; width: var(--container); margin: 0 auto; padding: 170px 0 105px; }
.recipes-hero h1 { max-width: 980px; margin-bottom: 28px; font-size: clamp(4.8rem, 9vw, 9.7rem); letter-spacing: -.06em; }
.recipes-hero h1 em { display: block; color: #f4dc9b; }
.recipes-hero__intro { max-width: 620px; margin-bottom: 0; font-size: clamp(1.08rem, 1.7vw, 1.35rem); line-height: 1.7; }
.recipes-hero__count { position: absolute; right: 0; bottom: 108px; display: grid; justify-items: end; }
.recipes-hero__count strong { color: #f4dc9b; font-family: var(--serif); font-size: 4.5rem; font-weight: 500; line-height: 1; }
.recipes-hero__count span { margin-top: 8px; font-size: .67rem; letter-spacing: .16em; text-transform: uppercase; }

.recipes-intro { display: grid; width: var(--container); grid-template-columns: .7fr 1.3fr; gap: 9%; align-items: start; }
.recipes-intro h2 { max-width: 900px; }
.recipes-intro h2 em { color: var(--terracotta); }
.recipes-intro__copy { padding-top: 82px; }
.recipes-intro__copy p { max-width: 580px; color: var(--muted); font-size: 1.12rem; line-height: 1.85; }
.recipes-intro__signature { display: flex; align-items: center; gap: 14px; margin-top: 32px; color: var(--terracotta-dark); font-size: .69rem; font-weight: 600; letter-spacing: .13em; text-transform: uppercase; }
.recipes-intro__signature::before { width: 42px; height: 1px; background: var(--terracotta); content: ""; }

.recipe-library { width: var(--container); padding-top: 30px; }
.recipe-library__header { display: flex; align-items: end; justify-content: space-between; gap: 42px; margin-bottom: 46px; padding-bottom: 30px; border-bottom: 1px solid var(--border); }
.recipe-library__header h2 { margin-bottom: 0; font-size: clamp(3.3rem, 5.4vw, 5.8rem); }
.recipe-filters { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 8px; }
.recipe-filter { min-height: 44px; border: 1px solid var(--border); border-radius: 100px; padding: 10px 17px; cursor: pointer; color: var(--muted); background: transparent; font-size: .68rem; font-weight: 600; letter-spacing: .08em; text-transform: uppercase; transition: color .2s ease, border-color .2s ease, background .2s ease; }
.recipe-filter:hover { border-color: var(--terracotta); color: var(--ink); }
.recipe-filter[aria-pressed="true"] { border-color: var(--ink); color: var(--white); background: var(--ink); }
.recipe-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 48px 18px; }
.recipe-grid__empty { grid-column: 1 / -1; padding: 70px 25px; color: var(--muted); background: var(--cream); text-align: center; }

.recipe-card { min-width: 0; }
.recipe-card__image { position: relative; display: block; aspect-ratio: 4 / 5; overflow: hidden; background: var(--cream-deep); }
.recipe-card__image::after { position: absolute; inset: 0; background: linear-gradient(0deg, rgba(24, 19, 10, .18), transparent 45%); content: ""; opacity: 0; transition: opacity .35s ease; }
.recipe-card__image img { width: 100%; height: 100%; object-fit: cover; transition: transform .7s cubic-bezier(.2, .7, .2, 1); }
.recipe-card:hover .recipe-card__image img { transform: scale(1.035); }
.recipe-card:hover .recipe-card__image::after { opacity: 1; }
.recipe-card__number { position: absolute; z-index: 1; top: 18px; left: 18px; display: grid; width: 46px; height: 46px; place-items: center; border-radius: 50%; color: var(--ink); background: rgba(255, 250, 240, .94); font-family: var(--serif); font-size: .88rem; }
.recipe-card__body { padding-top: 22px; }
.recipe-card__meta { display: flex; align-items: center; justify-content: space-between; gap: 15px; margin-bottom: 13px; color: var(--terracotta-dark); font-size: .65rem; font-weight: 600; letter-spacing: .12em; text-transform: uppercase; }
.recipe-card__meta span:last-child { color: var(--muted); }
.recipe-card h3 { margin-bottom: 13px; font-size: clamp(2rem, 3vw, 3rem); line-height: 1.03; }
.recipe-card__body > p { margin-bottom: 19px; color: var(--muted); line-height: 1.7; }

.recipe-invitation { display: grid; min-height: 660px; grid-template-columns: minmax(0, 1.1fr) minmax(360px, .9fr); margin-top: 140px; color: var(--white); background: var(--olive); }
.recipe-invitation__image { min-height: 540px; }
.recipe-invitation__image img { width: 100%; height: 100%; object-fit: cover; }
.recipe-invitation__copy { display: flex; flex-direction: column; align-items: flex-start; justify-content: center; padding: clamp(55px, 7vw, 105px); }
.recipe-invitation h2 { font-size: clamp(3.6rem, 5.7vw, 6.4rem); }
.recipe-invitation h2 em { color: #f4dc9b; }
.recipe-invitation__copy > p:not(.eyebrow) { max-width: 510px; margin-bottom: 35px; color: rgba(255, 255, 255, .7); font-size: 1.07rem; }

.recipe-detail-hero { position: relative; display: flex; min-height: 780px; align-items: flex-end; overflow: hidden; color: var(--white); background: var(--olive); }
.recipe-detail-hero__image,
.recipe-detail-hero__shade { position: absolute; inset: 0; width: 100%; height: 100%; }
.recipe-detail-hero__image { object-fit: cover; }
.recipe-detail-hero__shade { background: linear-gradient(90deg, rgba(17, 14, 8, .84), rgba(17, 14, 8, .24) 70%), linear-gradient(0deg, rgba(17, 14, 8, .72), transparent 60%); }
.recipe-detail-hero__content { position: relative; z-index: 1; width: var(--container); margin: 0 auto; padding: 165px 0 82px; }
.recipe-breadcrumb { display: flex; flex-wrap: wrap; gap: 10px; margin-bottom: 45px; font-size: .68rem; letter-spacing: .1em; text-transform: uppercase; }
.recipe-breadcrumb a { color: rgba(255, 255, 255, .7); text-underline-offset: 4px; }
.recipe-detail-hero h1 { max-width: 930px; margin-bottom: 25px; font-size: clamp(4.4rem, 8.5vw, 9rem); letter-spacing: -.055em; }
.recipe-detail-hero__intro { max-width: 650px; margin-bottom: 42px; color: rgba(255, 255, 255, .82); font-size: clamp(1.05rem, 1.5vw, 1.3rem); line-height: 1.7; }
.recipe-meta { display: flex; flex-wrap: wrap; gap: 10px; margin: 0; }
.recipe-meta div { min-width: 130px; padding: 14px 19px; border: 1px solid rgba(255, 255, 255, .24); background: rgba(19, 15, 8, .24); backdrop-filter: blur(8px); }
.recipe-meta dt { color: #f4dc9b; font-size: .58rem; letter-spacing: .13em; text-transform: uppercase; }
.recipe-meta dd { margin: 3px 0 0; font-family: var(--serif); font-size: 1.08rem; }

.recipe-body { display: grid; width: var(--container); grid-template-columns: minmax(280px, .7fr) minmax(0, 1.3fr); gap: 9%; align-items: start; }
.recipe-ingredients { padding: 48px; background: var(--cream); }
.recipe-ingredients h2,
.recipe-method h2 { margin-bottom: 38px; font-size: clamp(3rem, 4.4vw, 5rem); }
.recipe-ingredients ul { display: grid; gap: 0; margin: 0; padding: 0; list-style: none; }
.recipe-ingredients li { position: relative; padding: 15px 0 15px 25px; border-bottom: 1px solid var(--border); }
.recipe-ingredients li::before { position: absolute; top: 23px; left: 0; width: 7px; height: 7px; border-radius: 50%; background: var(--terracotta); content: ""; }
.recipe-method { padding-top: 22px; }
.recipe-method ol { display: grid; gap: 0; margin: 0; padding: 0; list-style: none; counter-reset: method; }
.recipe-method li { display: grid; grid-template-columns: 58px 1fr; gap: 23px; padding: 27px 0; border-top: 1px solid var(--border); counter-increment: method; }
.recipe-method li::before { color: var(--terracotta-dark); font-family: var(--serif); font-size: 1.15rem; content: counter(method, decimal-leading-zero); }
.recipe-method li p { margin: 0; font-size: 1.06rem; line-height: 1.8; }
.recipe-tip { margin-top: 48px; padding: 30px 34px; border-left: 3px solid var(--terracotta); background: rgba(217, 186, 106, .12); }
.recipe-tip strong { display: block; margin-bottom: 7px; color: var(--terracotta-dark); font-size: .66rem; letter-spacing: .13em; text-transform: uppercase; }
.recipe-tip p { margin: 0; color: var(--muted); }

.related-recipes { width: var(--container); padding-top: 20px; border-top: 1px solid var(--border); }
.related-recipes__heading { display: flex; align-items: end; justify-content: space-between; gap: 25px; margin-bottom: 42px; }
.related-recipes__heading h2 { margin-bottom: 0; font-size: clamp(3.2rem, 5vw, 5.4rem); }
.related-recipes .recipe-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.recipe-loading { min-height: 520px; padding: 180px 24px 80px; color: var(--muted); text-align: center; }

@media (max-width: 1050px) {
  .recipe-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .recipe-invitation { grid-template-columns: 1fr; }
  .recipe-invitation__image { height: 560px; }
  .recipe-body { gap: 6%; }
  .recipe-ingredients { padding: 38px; }
}

@media (max-width: 800px) {
  .recipes-hero { min-height: 760px; }
  .recipes-hero__content { padding: 145px 0 80px; }
  .recipes-hero h1 { font-size: clamp(4.5rem, 15vw, 7.2rem); }
  .recipes-hero__count { position: static; justify-items: start; margin-top: 44px; }
  .recipes-hero__count strong { font-size: 3.6rem; }
  .recipes-intro { grid-template-columns: 1fr; gap: 5px; }
  .recipes-intro__copy { padding-top: 0; }
  .recipe-library__header { align-items: flex-start; flex-direction: column; }
  .recipe-filters { justify-content: flex-start; }
  .recipe-detail-hero { min-height: 720px; }
  .recipe-detail-hero__content { padding: 140px 0 65px; }
  .recipe-body { grid-template-columns: 1fr; gap: 70px; }
  .related-recipes .recipe-grid { grid-template-columns: 1fr 1fr; }
}

@media (max-width: 560px) {
  .recipes-hero { min-height: 700px; }
  .recipes-hero__image { object-position: 58% center; }
  .recipes-hero__content { padding: 120px 0 62px; }
  .recipes-hero h1 { font-size: clamp(4rem, 17vw, 5.4rem); }
  .recipes-hero__intro { font-size: 1rem; }
  .recipes-intro { padding-bottom: 90px; }
  .recipe-library { padding-top: 0; }
  .recipe-filters { width: 100%; flex-wrap: nowrap; justify-content: flex-start; overflow-x: auto; padding-bottom: 8px; scrollbar-width: none; }
  .recipe-filters::-webkit-scrollbar { display: none; }
  .recipe-filter { flex: 0 0 auto; }
  .recipe-grid,
  .related-recipes .recipe-grid { grid-template-columns: 1fr; gap: 44px; }
  .recipe-card__image { aspect-ratio: 4 / 4.6; }
  .recipe-invitation { min-height: 0; margin-top: 95px; }
  .recipe-invitation__image { height: 410px; min-height: 0; }
  .recipe-invitation__copy { padding: 60px 25px 70px; }
  .recipe-detail-hero { min-height: 690px; }
  .recipe-detail-hero__content { padding: 118px 0 55px; }
  .recipe-detail-hero h1 { font-size: clamp(3.8rem, 16.5vw, 5rem); }
  .recipe-breadcrumb { margin-bottom: 32px; }
  .recipe-meta { gap: 7px; }
  .recipe-meta div { min-width: calc(50% - 4px); }
  .recipe-body { gap: 55px; }
  .recipe-ingredients { margin-inline: -6px; padding: 35px 25px; }
  .recipe-method li { grid-template-columns: 42px 1fr; gap: 13px; }
  .related-recipes__heading { align-items: flex-start; flex-direction: column; }
}