.five-ingredient-page{background-color:var(--bg-pure);min-height:100vh}.hero-banner{text-align:center;border-bottom:1px solid var(--border);background-color:#f7f3ec;padding:4rem 2rem}.hero-banner h1{color:var(--secondary);font-size:3.5rem;font-weight:800;font-family:var(--font-outfit), sans-serif;text-transform:uppercase;letter-spacing:1px;margin-bottom:1rem}.hero-banner p{color:var(--text-muted);max-width:600px;margin:0 auto;font-size:1.2rem}.featured-section{background-color:#f7f3ec;padding:4rem 0}.featured-card{border-radius:var(--radius-lg);box-shadow:var(--shadow-md);z-index:10;background:#fff;margin-top:-8rem;display:flex;position:relative;overflow:hidden}.featured-image{flex:1;min-height:400px;position:relative}.featured-image img{object-fit:cover;width:100%;height:100%;position:absolute;top:0;left:0}.featured-content{flex-direction:column;flex:1;justify-content:center;padding:3rem;display:flex}.featured-label{text-transform:uppercase;color:var(--primary);letter-spacing:1px;margin-bottom:1rem;font-size:.9rem;font-weight:700}.featured-content h2{margin-bottom:1.5rem;font-size:2.5rem;line-height:1.2}.featured-content p{color:var(--text-muted);margin-bottom:2rem;font-size:1.1rem;line-height:1.6}.author-info{align-items:center;gap:1rem;display:flex}.author-avatar{object-fit:cover;border-radius:50%;width:48px;height:48px}.author-details{flex-direction:column;display:flex}.author-name{font-size:.9rem;font-weight:600}.author-role{color:var(--text-muted);font-size:.8rem}.category-section{padding:4rem 0}.section-header{border-bottom:2px solid var(--border);justify-content:space-between;align-items:center;margin-bottom:2rem;padding-bottom:1rem;display:flex}.section-header h2{color:var(--secondary);font-size:2rem;font-weight:700}.view-more{color:var(--primary);text-transform:uppercase;align-items:center;gap:.5rem;font-size:.9rem;font-weight:600;display:flex}.view-more:hover{color:var(--primary-hover)}.recipe-grid{grid-template-columns:repeat(auto-fill,minmax(280px,1fr));gap:2rem;display:grid}.recipe-grid.large{grid-template-columns:repeat(auto-fill,minmax(350px,1fr))}@media (max-width:900px){.featured-card{flex-direction:column;margin-top:2rem}.featured-image{min-height:300px}.hero-banner h1{font-size:2.5rem}}