:root { --ink: #283128; --muted: #687067; --accent: #cf542c; --cream: #fffaf2; --line: #e9e1d6; --green: #41734e; }
* { box-sizing: border-box; }
body { margin: 0; color: var(--ink); background: var(--cream); font-family: ui-sans-serif, system-ui, sans-serif; line-height: 1.5; }
a { color: inherit; } h1, h2, h3, p { margin-top: 0; } h1 { margin-bottom: .25rem; font-size: clamp(1.8rem, 4vw, 2.6rem); line-height: 1.1; } h2 { font-size: 1.25rem; }
.site-header { border-bottom: 1px solid var(--line); background: #fff; }.site-nav, .page-shell { width: min(100% - 2rem, 1120px); margin: auto; }.site-nav { display: flex; align-items: center; justify-content: space-between; min-height: 4.25rem; }.brand { color: var(--accent); font-size: 1.25rem; font-weight: 800; text-decoration: none; }.nav-links { display: flex; gap: 1rem; }.nav-links a { text-decoration: none; font-weight: 600; }.page-shell { padding-block: 2.5rem; }
.hero { max-width: 42rem; margin-bottom: 2.5rem; }.hero p:last-child, .help-text, .empty-state, .result-count, .missing-preview { color: var(--muted); }.eyebrow { margin-bottom: .35rem; color: var(--accent); font-size: .78rem; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; }.section-heading { display: flex; align-items: center; justify-content: space-between; gap: 1rem; margin-bottom: 1.2rem; }.section-heading.compact { margin-top: 2rem; }.section-heading h1, .section-heading h2 { margin: 0; }
.pantry-summary, .panel, .recipe-card { border: 1px solid var(--line); border-radius: .75rem; background: #fff; }.pantry-summary { display: flex; max-width: 32rem; align-items: center; gap: 1rem; padding: 1rem; text-decoration: none; }.pantry-summary strong, .pantry-summary small { display: block; }.pantry-summary small { color: var(--muted); }.pantry-summary > :last-child { margin-left: auto; }.summary-icon { display: grid; width: 2.6rem; height: 2.6rem; place-items: center; border-radius: 50%; background: #fff0e9; color: var(--accent); }
.panel { padding: 1.25rem; }.panel h2 { margin-bottom: .75rem; } form { display: flex; gap: .5rem; align-items: flex-start; } input { min-width: 0; width: 100%; border: 1px solid #bfc4bb; border-radius: .4rem; padding: .65rem .75rem; font: inherit; }.autocomplete { position: relative; flex: 1; }.autocomplete-results { position: absolute; z-index: 2; width: 100%; max-height: 15rem; overflow-y: auto; border-radius: .4rem; background: #fff; box-shadow: 0 5px 15px #0002; }.autocomplete-option { display: block; width: 100%; border: 0; padding: .55rem .75rem; background: #fff; text-align: left; font: inherit; }.autocomplete-option:hover { background: #fff0e9; }
.help-text { margin: .75rem 0 0; font-size: .9rem; }.button, .link-button, .icon-button { border: 0; border-radius: .4rem; padding: .65rem .8rem; cursor: pointer; font: inherit; font-weight: 700; text-decoration: none; white-space: nowrap; }.button { background: #eee9e1; }.button.primary { background: var(--accent); color: #fff; }.button:disabled, .button[aria-disabled="true"] { cursor: not-allowed; opacity: .45; }.link-button { padding: 0; background: transparent; }.danger { color: #a73325; }.icon-button { padding: .3rem; background: transparent; color: var(--muted); }
.ingredient-list, .ingredient-lines ul { margin: 0; padding: 0; list-style: none; }.ingredient-list { display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: .5rem; }.ingredient-list li { display: flex; align-items: center; justify-content: space-between; border: 1px solid var(--line); border-radius: .4rem; padding: .45rem .6rem; background: #fff; }.ingredient-list i { color: var(--green); }
.title-filter { max-width: 38rem; margin-bottom: .8rem; }.text-link { align-self: center; color: var(--accent); }.recipe-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 1rem; }.recipe-card { overflow: hidden; }.recipe-image { display: block; width: 100%; height: 145px; object-fit: cover; background: #ede6db; }.recipe-image.placeholder { display: grid; place-items: center; color: #9d968d; font-size: 2rem; }.recipe-card-body { padding: .85rem; }.recipe-card h3 { margin-bottom: .45rem; font-size: 1rem; line-height: 1.25; }.recipe-card h3 a { text-decoration: none; }.recipe-meta { display: flex; flex-wrap: wrap; gap: .7rem; margin-bottom: .5rem; color: var(--muted); font-size: .85rem; }.recipe-meta .bi-star-fill { color: #d8941d; }.category, .missing-preview { margin-bottom: 0; font-size: .85rem; }.missing-preview { margin-top: 0; padding-left: 1.2rem; color: var(--muted); }.status { margin: .25rem 0; font-size: .9rem; font-weight: 700; }.status.ready { color: var(--green); }.status.almost { color: var(--accent); }.match-section + .match-section { margin-top: 2.8rem; }.match-section h2 i { color: var(--accent); }.pagination { display: flex; justify-content: space-between; margin-top: 1.5rem; }
.recipe-detail { max-width: 760px; }.recipe-detail-image { display: block; width: 100%; max-height: 380px; margin-bottom: 1.5rem; border-radius: .75rem; object-fit: cover; }.detail-meta { font-size: 1rem; }.ingredient-lines { margin-top: 2rem; }.ingredient-lines li { padding: .65rem 0; border-bottom: 1px solid var(--line); }.ingredient-lines .available i { color: var(--green); }.ingredient-lines .missing i { color: var(--accent); }.ingredient-lines .staple i { color: #8d8d8d; }.flash { padding: .75rem 1rem; border-radius: .4rem; }.flash.notice { background: #e6f3e8; }.flash.alert { background: #fbe5df; }.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; }
@media (max-width: 520px) { .page-shell { padding-block: 1.5rem; }.section-heading { align-items: flex-start; }.section-heading:not(.compact) { flex-direction: column; }.button.primary { width: 100%; text-align: center; } }