@import url('https://fonts.googleapis.com/css2?family=DM+Sans:wght@400;600;700&family=Instrument+Serif&display=swap');
:root{color-scheme:light;--ink:#283129;--muted:#505b4e;--paper:#fbf8ef;--line:#d5d7c8;--green:#284b38;--surface:#fffdf8}
*{box-sizing:border-box}
body{margin:0;background:var(--paper);color:var(--ink);font:1rem/1.55 'DM Sans',system-ui,sans-serif}
a{color:var(--green);text-underline-offset:.2em}
.site-header{display:flex;justify-content:space-between;align-items:center;gap:1rem;padding:1rem max(1rem,calc((100vw - 70rem)/2));border-bottom:1px solid var(--line);background:var(--surface)}
.brand{font:2rem 'Instrument Serif',Georgia,serif;text-decoration:none}
nav,.actions{display:flex;flex-wrap:wrap;align-items:center;gap:.85rem}
nav form{margin:0}
main{width:min(70rem,calc(100% - 2rem));margin:2rem auto 5rem}
.hero{padding:clamp(1.25rem,5vw,4rem);background:#e9eddf;border:1px solid #ccd6c5;border-radius:1.25rem;margin-bottom:3rem}
h1,h2,h3{font-family:'Instrument Serif',Georgia,serif;font-weight:400;line-height:1.05;margin:.35em 0}
h1{font-size:clamp(2.75rem,7vw,5.5rem)}
h2{font-size:2.15rem}h3{font-size:1.6rem}
.eyebrow{font-size:.8rem;text-transform:uppercase;letter-spacing:.1em;font-weight:700;color:var(--muted)}
.panel,.comment{background:var(--surface);border:1px solid var(--line);border-radius:.9rem;padding:1.25rem;margin-bottom:1rem}
.narrow{max-width:34rem;margin-inline:auto}
.cards,.fields{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,15rem),1fr));gap:1rem}
form{margin-block:1rem}
label{display:block;font-weight:600;margin:.65rem 0}
input:not([type=checkbox]),select,textarea{display:block;width:100%;margin-top:.25rem;border:1px solid #818b7b;border-radius:.45rem;padding:.65rem;background:var(--surface);color:inherit;font:inherit}
textarea{resize:vertical}
button{background:var(--green);color:white;border:1px solid var(--green);border-radius:.45rem;padding:.55rem .9rem;font:inherit;font-weight:700;cursor:pointer}
button.secondary,button.quiet{background:var(--surface);color:var(--green)}
button:disabled{opacity:.55;cursor:default}
:focus-visible{outline:3px solid #a34d2f;outline-offset:3px}
details{margin-block:1rem}summary{cursor:pointer;font-weight:700}
.notice{background:#f8e7c9;border-left:4px solid #895327;padding:.75rem 1rem}
.search{max-width:40rem}.cooking{display:grid;grid-template-columns:1fr 1.4fr;gap:2rem;margin:2rem 0}
.ingredients{padding:0;list-style:none}.ingredients li:has(input:checked){text-decoration:line-through}
.directions li{margin-bottom:.8rem}
dialog{width:min(45rem,calc(100% - 2rem));border:1px solid var(--line);border-radius:1rem;padding:2rem;color:var(--ink);background:var(--surface)}
dialog::backdrop{background:#18271bba}
footer{text-align:center;padding:2rem;border-top:1px solid var(--line);color:var(--muted)}
@media(max-width:640px){.site-header{align-items:flex-start;flex-direction:column}.cooking{grid-template-columns:1fr;gap:.5rem}}
@media print{.no-print,.site-header,footer,dialog{display:none!important}body,main,.panel{background:white;margin:0;width:auto;border:0}.book-recipe{break-inside:avoid}h1{font-size:2.4rem}}

.ingredient-grid{display:grid;grid-template-columns:minmax(0,.65fr) minmax(0,.8fr) minmax(0,1.5fr) minmax(0,1fr) 1.25rem auto;gap:.4rem;align-items:center;margin-bottom:.7rem}
.ingredient-row{display:contents}
.ingredient-grid input{min-width:0;padding:.45rem}
.ingredient-grid button{padding:.4rem .6rem}
fieldset{border:1px solid var(--line);border-radius:.5rem;margin:1rem 0;min-inline-size:0}
.chips,.stars{display:flex;flex-wrap:wrap;gap:.35rem}
.star{position:relative;cursor:pointer;font-size:2rem;line-height:1;color:#657064}
.star input{position:absolute;inset:0;opacity:0;cursor:pointer}
.star.filled{color:#a34d2f}
.star input:focus-visible+span{outline:3px solid #a34d2f;outline-offset:3px}
@media(max-width:420px){.ingredient-grid{font-size:.85rem;gap:.25rem}.ingredient-grid input{padding:.3rem}}
.recipe-photo{display:block;width:100%;max-width:48rem;max-height:32rem;object-fit:contain;object-position:left;border-radius:.75rem;margin-block:.8rem}
.cards .recipe-thumbnail {
    width: auto;
    height: 100px;
    max-width: 100%;
    object-fit: contain;
}
.recipe > .recipe-photo,
.book-recipe > .recipe-photo {
    float: right;
    width: auto;
    height: auto;
    max-width: min(300px, 42%);
    max-height: 300px;
    margin: 0 0 1rem 1.25rem;
}
.recipe > .cooking,
.book-recipe > .cooking {
    clear: both;
}
@media screen and (max-width: 640px) {
    .recipe > .recipe-photo,
    .book-recipe > .recipe-photo {
        float: none;
        max-width: min(300px, 100%);
        margin: .8rem 0;
    }
}


.nutrition-label{background:#fff;color:#111;border:2px solid #111;padding:.5rem;width:min(100%,19rem);margin-block:1rem;break-inside:avoid}
.nutrition-label h3{font:900 1.9rem/1 system-ui,sans-serif;margin:0;padding-bottom:.25rem;border-bottom:1px solid}
.nutrition-serving{display:flex;justify-content:space-between;gap:.5rem;padding:.25rem 0;border-bottom:7px solid}
.nutrition-amount{font-size:.8rem;font-weight:700;margin-top:.3rem}
.nutrition-label dl{display:grid;grid-template-columns:1fr auto;margin:0}
.nutrition-label dt,.nutrition-label dd{margin:0;border-top:1px solid;padding:.2rem 0}
.nutrition-label dd{text-align:right}
.ingredient-match{position:relative;min-width:0}
.ingredient-flag{text-align:center;font-size:.8rem}
.ingredient-suggestions{position:absolute;z-index:4;width:max(100%,15rem);max-width:75vw;max-height:14rem;overflow:auto;background:var(--surface);border:1px solid var(--line)}
.ingredient-suggestions button{display:block;width:100%;text-align:left;background:var(--surface);color:var(--ink);border-radius:0}
.cnf-row,.moderation-fields{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,12rem);gap:.5rem;align-items:end}
.cnf-row button{margin-bottom:.65rem}
.moderation-fields{grid-template-columns:minmax(0,1fr) minmax(0,3fr)}
.servings-control{display:flex;align-items:center;gap:.5rem}
.servings-control input[data-servings]{width:5rem;margin:0}
@media(max-width:480px){.cnf-row,.moderation-fields{grid-template-columns:1fr}}


.cn-label{width:min(100%,350px);border:1px solid #111;padding:6px 7px;color:#111;background:#fff;font:16px/1.2 Arial,Helvetica,sans-serif;box-sizing:border-box;break-inside:avoid}
.cn-label h3{font:700 30px/1.03 Arial,Helvetica,sans-serif;border:0;margin:0;padding:0}
.cn-serving{font-size:19px;padding:2px 0 3px;border-bottom:2px solid}
.cn-calories,.cn-row{display:flex;justify-content:space-between;align-items:baseline;gap:5px}
.cn-calories{align-items:start}
.cn-calories>strong{font-size:23px;line-height:1.2;border-bottom:5px solid;padding:1px 10px 1px 0}
.cn-calories>span{font-size:12px;font-weight:bold;text-align:right;padding-top:3px}
.cn-row{padding:2px 0}
.cn-major,.cn-minor{border-top:1px solid}
.cn-calories+.cn-major{border:0}
.cn-major .cn-name{font-weight:bold}
.cn-sub{padding:0 0 0 13px}
.cn-minerals,.cn-foot{border-top:5px solid}
.cn-foot{font-size:12px;padding-top:3px}
.cn-label small{font-size:11px}