:root { color-scheme: light; font-family: Inter, ui-sans-serif, system-ui, sans-serif; color: #18221c; background: #f7f7f2; }
* { box-sizing: border-box; }
body { margin: 0; }
.shell { width: min(1120px, calc(100% - 32px)); margin: 0 auto; padding: 52px 0 80px; }
header, .section-heading { display: flex; align-items: center; justify-content: space-between; gap: 24px; }
h1, h2, p { margin: 0; }
h1 { font-size: clamp(2rem, 5vw, 3.25rem); letter-spacing: -.055em; }
h2 { font-size: 1.35rem; letter-spacing: -.025em; }
.eyebrow { color: #d76036; font-size: .72rem; font-weight: 800; letter-spacing: .16em; margin-bottom: 9px; }
.button { display: inline-flex; justify-content: center; align-items: center; border: 0; border-radius: 999px; background: #206c4a; color: #fff; padding: .72rem 1rem; font: inherit; font-weight: 700; text-decoration: none; cursor: pointer; }
.button.secondary { background: #18221c; }
.notice { margin: 34px 0 20px; border-left: 4px solid #d76036; background: #fff4ec; padding: 15px 17px; border-radius: 6px; }
.metrics { display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; }
.metrics article, .catalogue { border: 1px solid #e4e6de; border-radius: 14px; background: #fff; }
.metrics article { padding: 20px; }
.metrics span { display: block; color: #617067; font-size: .83rem; margin-bottom: 7px; }
.metrics strong { font-size: 1.75rem; }
.catalogue { margin-top: 20px; padding: 24px; }
.section-heading p { margin-top: 4px; color: #617067; font-size: .9rem; }
.recipes { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 14px; margin-top: 22px; }
.recipe { border: 1px solid #e7e9e2; border-radius: 10px; padding: 16px; }
.recipe h3 { margin: 0 0 8px; font-size: 1rem; line-height: 1.3; }
.recipe p { color: #617067; font-size: .86rem; line-height: 1.45; }
.tags { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 13px; }
.tag { background: #edf5ef; color: #206c4a; border-radius: 99px; padding: 4px 8px; font-size: .72rem; font-weight: 700; }
.error { margin-top: 20px; padding: 12px; border-radius: 8px; color: #982b1d; background: #fff0ed; }
@media (max-width: 640px) { .shell { padding-top: 28px; } header, .section-heading { align-items: flex-start; flex-direction: column; } .metrics { grid-template-columns: 1fr; } }