:root{
  --bg:#f7f4ec; --panel:#fffdf8; --ink:#2b2e28; --muted:#6f7568;
  --accent:#3c5240; --accent2:#58705a; --line:#e4e0d3; --shadow:0 1px 2px rgba(40,45,35,.06),0 8px 24px rgba(40,45,35,.06);
}
@media (prefers-color-scheme:dark){
  :root{
    --bg:#171a15; --panel:#20241d; --ink:#e9e7dc; --muted:#a2a897;
    --accent:#a9c0a8; --accent2:#8ba58c; --line:#31362b; --shadow:0 1px 2px rgba(0,0,0,.3),0 10px 28px rgba(0,0,0,.35);
  }
}
*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{margin:0;background:var(--bg);color:var(--ink);
  font:16px/1.6 -apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;}
.wrap{max-width:1040px;margin:0 auto;padding:0 20px}
.narrow{max-width:720px}
a{color:var(--accent);text-decoration:none}
a:hover{text-decoration:underline}
h1,h2,h3,.serif{font-family:Georgia,Charter,"Times New Roman",serif}

/* header */
.top{border-bottom:1px solid var(--line);background:var(--panel)}
.top .wrap{display:flex;align-items:center;gap:12px;height:60px}
.brand{font-family:Georgia,serif;font-style:italic;font-weight:600;font-size:20px;color:var(--accent);}
.brand:hover{text-decoration:none}
.crumb{color:var(--muted);font-size:14px}
.crumb a{color:var(--muted)}

/* hero */
.hero{text-align:center;padding:52px 20px 8px}
.hero .orn{color:var(--accent2);letter-spacing:.5em;font-size:14px}
.hero h1{font-size:clamp(34px,7vw,54px);font-style:italic;font-weight:600;color:var(--accent);margin:6px 0 4px}
.hero p{color:var(--muted);margin:0;font-size:17px}

/* search */
.search{max-width:560px;margin:26px auto 8px;position:relative}
.search input{width:100%;padding:14px 18px;font-size:17px;border:1px solid var(--line);
  border-radius:40px;background:var(--panel);color:var(--ink);box-shadow:var(--shadow);outline:none}
.search input:focus{border-color:var(--accent2)}
#results{list-style:none;margin:8px 0 0;padding:0;position:absolute;left:0;right:0;z-index:5;
  background:var(--panel);border:1px solid var(--line);border-radius:14px;box-shadow:var(--shadow);overflow:hidden;display:none}
#results.show{display:block}
#results li a{display:flex;justify-content:space-between;gap:12px;padding:11px 16px;color:var(--ink)}
#results li a:hover,#results li a.active{background:var(--bg);text-decoration:none}
#results .rc{color:var(--muted);font-size:13px;white-space:nowrap}
#results .empty{padding:12px 16px;color:var(--muted)}

/* section titles */
.sect{font-family:Georgia,serif;font-size:14px;letter-spacing:.14em;text-transform:uppercase;
  color:var(--accent2);text-align:center;margin:40px 0 18px}

/* category grid */
.grid{display:grid;gap:16px;grid-template-columns:repeat(auto-fill,minmax(240px,1fr));padding-bottom:16px}
.card{display:block;background:var(--panel);border:1px solid var(--line);border-radius:16px;
  padding:20px;box-shadow:var(--shadow);transition:transform .12s ease,border-color .12s ease}
.card:hover{transform:translateY(-2px);border-color:var(--accent2);text-decoration:none}
.card .ic{font-size:28px}
.card .nm{font-family:Georgia,serif;font-size:19px;color:var(--ink);margin:8px 0 2px;line-height:1.25}
.card .ct{color:var(--muted);font-size:14px}

/* A–Z list */
details.az{max-width:820px;margin:0 auto 40px;border:1px solid var(--line);border-radius:14px;background:var(--panel)}
details.az>summary{cursor:pointer;padding:14px 20px;font-family:Georgia,serif;color:var(--accent);list-style:none}
details.az>summary::-webkit-details-marker{display:none}
details.az>summary::after{content:" ▾";color:var(--muted)}
details.az[open]>summary::after{content:" ▴"}
.azlist{columns:2 260px;column-gap:32px;padding:6px 22px 20px;margin:0}
.azlist li{list-style:none;padding:4px 0;break-inside:avoid}

/* recipe list (category page) */
.rlist{list-style:none;margin:0;padding:0;display:grid;gap:10px}
.rlist a{display:block;background:var(--panel);border:1px solid var(--line);border-radius:12px;
  padding:14px 18px;color:var(--ink);box-shadow:var(--shadow)}
.rlist a:hover{border-color:var(--accent2);text-decoration:none}
.page-h{padding:34px 0 8px}
.page-h h1{font-style:italic;color:var(--accent);font-size:clamp(28px,5vw,40px);margin:6px 0 2px}
.page-h .ic{font-size:34px}
.page-h .ct{color:var(--muted)}

/* recipe page */
.recipe{padding:24px 0 60px}
.recipe .rtitle{font-style:italic;color:var(--accent);font-size:clamp(28px,5.5vw,42px);
  text-align:center;margin:6px 0 2px}
.recipe .rcat{text-align:center;margin:0 0 6px}
.recipe .rcat a{display:inline-block;font-size:13px;letter-spacing:.06em;color:var(--muted)}
.recipe .orn{text-align:center;color:var(--accent2);letter-spacing:.5em;margin:6px 0 26px}
.rh{font-family:Georgia,serif;font-variant:small-caps;letter-spacing:.08em;font-size:20px;
  color:var(--accent);border-bottom:1px solid var(--line);padding-bottom:6px;margin:30px 0 14px}
.ing{list-style:none;margin:0;padding:0}
.ing li{display:flex;justify-content:space-between;gap:16px;padding:8px 2px;border-bottom:1px solid var(--line)}
.ing .amt{color:var(--accent2);font-weight:600;white-space:nowrap;text-align:right;
  font-variant-numeric:tabular-nums}
.steps{margin:0;padding-left:0;counter-reset:step;list-style:none}
.steps li{position:relative;padding:2px 0 14px 44px;counter-increment:step}
.steps li::before{content:counter(step);position:absolute;left:0;top:0;width:28px;height:28px;
  border-radius:50%;background:var(--accent);color:var(--panel);font:600 14px/28px Georgia,serif;
  text-align:center}
.note{background:var(--panel);border:1px solid var(--line);border-left:3px solid var(--accent2);
  border-radius:8px;padding:14px 18px;color:var(--ink);font-style:italic;margin-top:8px}
.backrow{margin-top:36px}
.backrow a{font-size:15px}
.foot{border-top:1px solid var(--line);color:var(--muted);text-align:center;font-size:13px;padding:26px 20px}