*, *::before, *::after { box-sizing: border-box; }
body { background: var(--background); margin: 0; }
a { text-decoration: none; }
img { display: block; }

.wrap { max-width: 720px; margin: 0 auto; padding-left: var(--spacing-16); padding-right: var(--spacing-16); }

/* ── Top bar (shared with the marketing homepage) ── */
.topbar { display: flex; align-items: center; justify-content: space-between; padding-top: var(--spacing-24); padding-bottom: var(--spacing-24); max-width: 1040px; margin: 0 auto; }
.logo { display: inline-flex; align-items: center; }
.logo-img { height: 32px; width: auto; display: block; }
.logo-img-dark { display: none; }
[data-theme="dark"] .logo-img-light { display: none; }
[data-theme="dark"] .logo-img-dark { display: block; }
@media (prefers-color-scheme: dark) {
    :root:not([data-theme="light"]) .logo-img-light { display: none; }
    :root:not([data-theme="light"]) .logo-img-dark { display: block; }
}
.topbar-actions { display: flex; align-items: center; gap: var(--spacing-16); }
.topbar-actions a.signin { font-family: "Manrope-SemiBold", Arial, Helvetica, sans-serif; font-size: var(--body-medium); color: var(--on-surface-variant); }
.topbar-actions a.signin:hover { color: var(--on-surface); }
.btn-cta {
    display: inline-flex; align-items: center; gap: var(--spacing-8);
    background: var(--primary); color: var(--on-primary);
    border: none; border-radius: var(--radius-48);
    padding: var(--spacing-8) var(--spacing-24);
    font-family: "Manrope-SemiBold", Arial, Helvetica, sans-serif; font-size: var(--body-medium);
    cursor: pointer; transition: var(--default-transition);
}
.btn-cta:hover { opacity: 0.9; }
.btn-cta.large { font-size: 18px; padding: var(--spacing-16) var(--spacing-24); }

/* ── Recipe page content ── */
.recipe-page { padding-top: var(--spacing-16); padding-bottom: var(--spacing-64); }
.recipe-page .recipe-card { overflow: hidden; }

/* ── Hero image (Figma: Recipe Header, node 259:1163) ───────────────────────
   Same markup at every width. Mobile: image is a responsive square, the back
   button sits in flexible top padding, the title band is pinned to the
   bottom by that flex space. Desktop: image drops the square ratio for a
   fixed-height band (back button fixed height + title's own padding) and
   gains rounded corners. Badges always sit below the media block, plain. ── */
.recipe-hero { display: flex; flex-direction: column; width: 100%; }

.recipe-hero-media {
    position: relative;
    display: flex;
    flex-direction: column;
    overflow: hidden;
    width: 100%;
    aspect-ratio: 1 / 1;
    margin-bottom: calc(-1 * var(--spacing-16));
    background: var(--background);
}
.recipe-hero-img {
    position: absolute;
    inset: 0;
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
}
.recipe-hero-back-wrap {
    position: relative;
    display: flex;
    flex: 1 0 0;
    flex-direction: column;
    align-items: flex-start;
    min-height: 0;
    width: 100%;
    padding: var(--spacing-16) var(--spacing-8);
}
.recipe-hero-back {
    display: inline-flex;
    align-items: center;
    gap: var(--spacing-4);
    background: var(--surface-container-high);
    border-radius: var(--radius-48);
    padding: var(--spacing-8) var(--spacing-16) var(--spacing-8) var(--spacing-8);
    color: var(--on-surface-variant);
    font-family: "Manrope-SemiBold", Arial, Helvetica, sans-serif;
    font-size: var(--body-medium);
    letter-spacing: 0.28px;
    text-decoration: none;
}
.recipe-hero-back-icon { width: 16px; height: 16px; }
.recipe-hero-title-band {
    position: relative;
    display: flex;
    align-items: flex-end;
    width: 100%;
    padding: 120px var(--spacing-16) var(--spacing-32);
    background: linear-gradient(to top, var(--background) 25%, transparent 100%);
    backdrop-filter: blur(1.5px);
}
.recipe-hero-title-band h1 {
    flex: 1 0 0;
    min-width: 0;
    margin: 0;
    font-family: "Manrope-Bold", Arial, Helvetica, sans-serif;
    font-size: 32px;
    line-height: 38px;
    letter-spacing: 0.64px;
    color: var(--on-surface);
}
.recipe-hero-badges { position: relative; padding: 0 var(--spacing-16) var(--spacing-16); margin: 0; }

@media (min-width: 801px) {
    .recipe-hero-media {
        aspect-ratio: auto;
        border-radius: var(--radius-16);
    }
    .recipe-hero-back-wrap { flex: none; height: 38px; padding: var(--spacing-16) var(--spacing-8); }
    .recipe-hero-title-band { padding-top: 140px; padding-bottom: var(--spacing-24); }
}

.recipe-index-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: var(--spacing-16); padding-top: var(--spacing-24); }
.recipe-index-card {
    display: block; background: var(--surface-container-lowest); border: 1px solid var(--outline-variant);
    border-radius: var(--radius-16); padding: var(--spacing-16); transition: var(--default-transition);
}
.recipe-index-card:hover { border-color: var(--primary); }
.recipe-index-card h2 { font-family: "Manrope-SemiBold", Arial, Helvetica, sans-serif; font-size: var(--body-large); color: var(--on-surface); margin: 0 0 var(--spacing-8); }

/* ── Bottom CTA ── */
.recipe-cta {
    margin-top: var(--spacing-32); text-align: center; background: var(--surface-container-lowest);
    border: 1px solid var(--outline-variant); border-radius: var(--radius-16); padding: var(--spacing-32) var(--spacing-24);
}
.recipe-cta p { font-family: "Manrope-Medium", Arial, Helvetica, sans-serif; font-size: var(--body-large); color: var(--on-surface-variant); margin: 0 0 var(--spacing-16); }

/* ── Footer ── */
footer { border-top: 1px solid var(--outline-variant); padding-top: var(--spacing-24); padding-bottom: var(--spacing-24); margin-top: var(--spacing-32); }
.footer-row { display: flex; align-items: center; flex-wrap: wrap; justify-content: space-between; gap: var(--spacing-8) var(--spacing-24); font-size: var(--body-medium); color: var(--on-surface-variant); max-width: 1040px; margin: 0 auto; padding: 0 var(--spacing-16); }
.footer-links { display: flex; flex-wrap: wrap; gap: var(--spacing-8) var(--spacing-16); }
footer a { color: var(--on-surface-variant); font-family: "Manrope-SemiBold", Arial, Helvetica, sans-serif; }
footer a:hover { color: var(--on-surface); }

:focus-visible { outline: 2px solid var(--primary); outline-offset: 2px; }

@media (max-width: 520px) {
    .recipe-index-grid { grid-template-columns: 1fr; }
}
@media (prefers-reduced-motion: reduce) {
    * { transition: none !important; }
}