:root {
    --rbc-bg: #f8f5ef;
    --rbc-surface: #fffdf9;
    --rbc-border: #ddd6ca;
    --rbc-text: #2b261f;
    --rbc-muted: #72685d;
    --rbc-accent: #7b5d43;
    --rbc-shadow: 0 16px 30px rgba(70, 56, 38, 0.08);
    --rbc-radius: 18px;
    --rbc-width: 1120px;
}

*,
*::before,
*::after {
    box-sizing: border-box;
}

body {
    margin: 0;
    color: var(--rbc-text);
    background: linear-gradient(180deg, #fbf8f1 0%, #f3ede3 100%);
    font-family: "Segoe UI", Tahoma, sans-serif;
    line-height: 1.6;
}

a {
    color: inherit;
    text-decoration: none;
}

img {
    display: block;
    max-width: 100%;
    height: auto;
}

.site-container {
    width: min(calc(100% - 2rem), var(--rbc-width));
    margin: 0 auto;
}

.site-header,
.site-footer {
    background: rgba(255, 253, 249, 0.9);
    border-bottom: 1px solid var(--rbc-border);
}

.site-footer {
    border-top: 1px solid var(--rbc-border);
    border-bottom: 0;
    margin-top: 3rem;
}

.site-header__inner,
.site-footer .site-container {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 1rem;
    padding: 1rem 0;
}

.site-brand {
    font-size: 1.5rem;
    font-weight: 700;
}

.site-nav ul {
    display: flex;
    flex-wrap: wrap;
    gap: 1rem;
    list-style: none;
    margin: 0;
    padding: 0;
}

.page-hero,
.page-section {
    padding: 2.5rem 0;
}

.section-head {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 1rem;
    margin-bottom: 1.25rem;
}

.recipe-grid {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 1.5rem;
}

.recipe-card,
.recipe-single,
.recipe-search-shell {
    background: var(--rbc-surface);
    border: 1px solid var(--rbc-border);
    border-radius: var(--rbc-radius);
    box-shadow: var(--rbc-shadow);
}

.recipe-card {
    overflow: hidden;
}

.recipe-card__media,
.recipe-card__placeholder {
    display: block;
    aspect-ratio: 4 / 3;
    background: linear-gradient(135deg, #efe6da, #ddd1bf);
}

.recipe-card__media img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.recipe-card__title {
    margin: 0;
    padding: 1rem;
    font-size: 1.05rem;
}

.recipe-layout {
    display: grid;
}

.recipe-single {
    padding: 2rem;
}

.page-content {
    margin-top: 1rem;
}

.recipe-featured-image {
    margin: 1.5rem 0;
    overflow: hidden;
    border-radius: 16px;
}

.recipe-section + .recipe-section {
    margin-top: 1.75rem;
}

.recipe-list {
    padding-left: 1.25rem;
}

.search-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 1rem;
    margin-bottom: 1rem;
}

.search-grid label {
    display: grid;
    gap: 0.4rem;
    font-weight: 600;
}

.search-submit {
    padding: 0.9rem 1.3rem;
    border: 0;
    border-radius: 999px;
    background: var(--rbc-accent);
    color: #fff;
    font-weight: 700;
    cursor: pointer;
}

@media (max-width: 1024px) {
    .recipe-grid {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }
}

@media (max-width: 768px) {
    .recipe-grid,
    .search-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .site-header__inner,
    .site-footer .site-container {
        flex-direction: column;
        align-items: flex-start;
    }
}

@media (max-width: 540px) {
    .recipe-grid,
    .search-grid {
        grid-template-columns: 1fr;
    }

    .recipe-single {
        padding: 1.25rem;
    }
}