@import url("https://fonts.googleapis.com/css2?family=Cormorant:wght@400;500;600&family=EB+Garamond:ital,wght@0,400;0,500;1,400&display=swap");

:root{--ink:#2c2620;--soft:#6d665c;--faint:#a89f90;--accent:#9a7d3f;--accent-dark:#7d6330;
  --red:#a32f2b;--line:#e7e1d2;--paper:#fffdf6;--bg:#efece3}
*{box-sizing:border-box}
body{margin:0;padding:44px 18px 80px;background:var(--bg);
  background-image:radial-gradient(circle at 50% -6%,#fbfaf5,#e7e3d7);
  color:var(--ink);font-family:"EB Garamond",Georgia,serif;font-size:18px;line-height:1.55}
.wrap,.book{max-width:940px;margin:0 auto}
.masthead{text-align:center;margin:0 0 6px}
.masthead h1{font-family:"Cormorant",Georgia,serif;font-weight:500;font-size:3rem;
  letter-spacing:.05em;margin:0}
.masthead .flourish{color:var(--accent);letter-spacing:.5em;font-size:1rem;margin:.2em 0 .3em}
.masthead p{color:var(--soft);font-style:italic;font-size:1.1rem;margin:.2em 0 0}

.topbar{max-width:940px;margin:0 auto 4px;font-size:.82rem;letter-spacing:.08em;
  text-transform:uppercase}
.topbar a{color:var(--soft);text-decoration:none;margin-right:18px}
.topbar a:hover{color:var(--accent)}

.controls{margin:30px 0 8px;display:flex;gap:10px;flex-wrap:wrap;align-items:center;
  justify-content:center}
#q{flex:1 1 260px;max-width:380px;padding:9px 13px;border:1px solid var(--line);border-radius:3px;
  background:var(--paper);font-family:inherit;font-size:1rem;color:var(--ink)}
#q:focus{outline:none;border-color:var(--accent)}
.chip{padding:6px 13px;border:1px solid var(--line);border-radius:999px;background:var(--paper);
  color:var(--soft);font-family:inherit;font-size:.82rem;cursor:pointer;letter-spacing:.04em}
.chip:hover{border-color:var(--accent);color:var(--accent-dark)}
.chip[aria-pressed="true"]{background:var(--accent);border-color:var(--accent);color:#fff}
.scope{text-align:center;margin:10px 0 0;font-size:.9rem;color:var(--soft)}
.scope b{color:var(--ink)}
.scope a{color:var(--accent-dark);margin-left:8px;font-size:.82rem;text-decoration:none}
.scope a:hover{text-decoration:underline}
.tally{text-align:center;color:var(--faint);font-size:.8rem;letter-spacing:.12em;
  text-transform:uppercase;margin:4px 0 22px}

.index{display:grid;grid-template-columns:repeat(auto-fill,minmax(210px,1fr));gap:12px;
  margin:0 0 56px;padding:0;list-style:none}
.index a{display:flex;gap:10px;align-items:center;text-decoration:none;color:inherit;
  background:var(--paper);border:1px solid var(--line);border-radius:3px;padding:8px 10px;
  height:100%;transition:transform .14s ease,box-shadow .14s ease}
.index a:hover{transform:translateY(-2px);box-shadow:0 8px 20px rgba(60,50,30,.13)}
.index .thumb{width:44px;height:44px;flex:none;border-radius:2px;object-fit:cover;
  background:#e7e0cf;display:block}
.index .noimg{width:44px;height:44px;flex:none;border-radius:2px;background:#efe9db;
  display:flex;align-items:center;justify-content:center;color:var(--faint);font-size:1.1rem}
.index .t{font-size:.95rem;line-height:1.25}
.index .s{display:block;color:var(--faint);font-size:.75rem;margin-top:2px}

.recipe{background:var(--paper);border:1px solid var(--line);border-radius:3px;
  padding:30px 34px;margin:0 0 26px;box-shadow:0 8px 22px rgba(60,50,30,.09)}
@media(max-width:620px){.recipe{padding:22px 18px}}
.recipe h1{font-family:"Cormorant",Georgia,serif;font-weight:600;font-size:2.1rem;
  line-height:1.15;margin:0 0 3px}
.attrib{font-style:italic;color:var(--soft);margin:0 0 8px}
.meta{font-size:.72rem;letter-spacing:.12em;text-transform:uppercase;color:var(--faint);
  margin:0 0 16px}
.badge{display:inline-block;padding:1px 8px;border-radius:999px;font-size:.68rem;
  letter-spacing:.1em;margin-left:6px;vertical-align:1px}
.badge.fav{background:#f6efd9;color:var(--accent-dark)}
.badge.stub{background:#f2e6e5;color:var(--red)}
.badge.coll{background:#eae5d6;color:var(--soft)}
.badge.vegan{background:#e3efdc;color:#4a6b39}
.badge.veg{background:#eef2e2;color:#61703c}
.badge.meat{background:#f0e7e0;color:#8a6046}
.index .d{font-style:normal;font-weight:600}
.index .d.vegan{color:#4a6b39}
.index .d.veg{color:#61703c}
.index .d.meat{color:#8a6046}

.shots{display:flex;gap:10px;flex-wrap:wrap;margin:0 0 20px}
.shots img{max-width:100%;width:320px;height:auto;border:1px solid var(--line);border-radius:2px;
  display:block}
.cols{display:grid;grid-template-columns:minmax(180px,37%) 1fr;gap:30px}
@media(max-width:620px){.cols{grid-template-columns:1fr;gap:16px}}
.cols h3,.extra h3{font-family:"Cormorant",Georgia,serif;font-size:1.3rem;font-weight:600;
  color:var(--accent-dark);margin:0 0 .3em}
.serves{font-style:italic;color:var(--soft);margin:0 0 .5em;font-size:.92rem}
.subhead{font-weight:600;margin:.7em 0 .1em;font-size:.94rem}
.cols ul{list-style:none;margin:0 0 .3em;padding:0}
.cols li{padding:.3em 0;border-bottom:1px solid var(--line);line-height:1.35;font-size:.95rem}
.cols ol{margin:0;padding-left:1.3em}
.cols ol li{border:none;margin:0 0 .55em;padding:0 0 0 .2em}
.note{color:var(--soft);font-size:.94rem;margin:.6em 0 0}
.extra{margin-top:20px}
.extra ul{margin:.2em 0;padding-left:1.2em}
.extra li{color:var(--soft);font-size:.95rem;margin:.2em 0}
.prose{color:var(--soft);margin:.2em 0 .6em}
.links{margin-top:16px;font-size:.82rem;color:var(--soft)}
.links a{color:var(--accent-dark);margin-right:14px;text-decoration:none}
.links a:hover{text-decoration:underline}
.links .cooked{margin-right:14px}
.also{text-align:center;margin-top:18px;font-size:.85rem;color:var(--soft);font-style:italic}
.also a{color:var(--accent-dark)}
.uncertain{color:var(--accent);font-size:.72em;vertical-align:super;cursor:help}
.empty{text-align:center;color:var(--faint);font-style:italic;padding:30px 0}

.pager{display:flex;justify-content:space-between;gap:20px;margin-top:30px;
  font-size:.88rem;line-height:1.3}
.pager a{color:var(--accent-dark);text-decoration:none;max-width:46%}
.pager a:hover{text-decoration:underline}
.pager .next{text-align:right;margin-left:auto}
@media(max-width:520px){.pager{font-size:.8rem}}
.backlink{text-align:center;margin:34px 0 0;font-size:.85rem}
.backlink a{color:var(--accent-dark);text-decoration:none;letter-spacing:.05em}
.backlink a:hover{text-decoration:underline}
footer{text-align:center;color:var(--faint);font-size:.82rem;margin-top:40px;font-style:italic}