/* Layout: one calm reading column; each roundup is a numbered list of recipe cards, swatch left, text right */
:root{
  --bg:#f7f8f3; --surface:#ffffff; --fg:#2a2226; --muted:#675d61; --line:#e2e4da;
  --accent:#d0661f; --accent-ink:#9a4610; --soft:#eef1e4; --leaf:#5f7a3a;
  --sw1:#f4d8c2; --sw2:#e3ead0; --sw3:#f0d9df; --sw4:#dfe5ee; --sw5:#f3e6c4; --sw6:#e6dcd0;
  --display:"Young Serif",Georgia,"Times New Roman",serif;
  --body:"Figtree",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;
}
@media (prefers-color-scheme: dark){:root:not([data-theme="light"]){
  --bg:#18171a; --surface:#222024; --fg:#efe9ea; --muted:#b3a9ad; --line:#38343a;
  --accent:#f08a43; --accent-ink:#f5a56c; --soft:#272a22; --leaf:#a9c47f;
  --sw1:#4a3426; --sw2:#36402a; --sw3:#46323a; --sw4:#2f3642; --sw5:#463c22; --sw6:#3d352d; color-scheme:dark}}
:root[data-theme="dark"]{
  --bg:#18171a; --surface:#222024; --fg:#efe9ea; --muted:#b3a9ad; --line:#38343a;
  --accent:#f08a43; --accent-ink:#f5a56c; --soft:#272a22; --leaf:#a9c47f;
  --sw1:#4a3426; --sw2:#36402a; --sw3:#46323a; --sw4:#2f3642; --sw5:#463c22; --sw6:#3d352d; color-scheme:dark}
*{box-sizing:border-box}
body{margin:0;background:var(--bg);color:var(--fg);font:17px/1.6 var(--body)}
a{color:var(--accent-ink)}
a:focus-visible,button:focus-visible{outline:2px solid var(--accent);outline-offset:2px}
.wrap{max-width:860px;margin:0 auto;padding-inline:16px}
.sr{position:absolute;left:-9999px}
.top{background:var(--surface);border-bottom:1px solid var(--line)}
.top-inner{display:flex;flex-wrap:wrap;gap:.4rem 1.2rem;align-items:center;justify-content:space-between;padding-block:.8rem}
.brand{font:400 1.25rem var(--display);color:var(--fg);text-decoration:none}
.brand span{color:var(--leaf)}
nav{display:flex;flex-wrap:wrap;gap:.2rem 1rem;font-size:.92rem}
nav a{color:var(--muted);text-decoration:none}
nav a:hover{color:var(--accent-ink)}
h1,h2{font-family:var(--display);font-weight:400;line-height:1.2;text-wrap:balance}
h1{font-size:clamp(1.8rem,5vw,2.5rem);margin:.3rem 0 .8rem}
.hero{padding-block:2.5rem 1rem}
.lede{font-size:1.08rem;color:var(--muted);max-width:65ch}
.eyebrow{text-transform:uppercase;letter-spacing:.08em;font-size:.75rem;font-weight:600;color:var(--leaf);margin:2rem 0 0}
.note{font-size:.92rem;color:var(--muted);background:var(--soft);padding:.7rem .9rem;border-radius:6px}
.jump{display:inline-block;margin:.4rem 0 1rem;font-weight:600}
.cards{list-style:none;padding:0;margin:1.5rem 0;display:grid;gap:1.2rem}
.card{background:var(--surface);border:1px solid var(--line);border-radius:8px;overflow:hidden;display:grid;grid-template-columns:1fr}
@media(min-width:640px){.card{grid-template-columns:200px 1fr}}
.card > a{text-decoration:none}
.card img,.ph{width:100%;height:100%;min-height:140px;object-fit:cover;display:block}
.ph{display:flex;align-items:center;justify-content:center}
.ph span{font:400 2.6rem var(--display);color:var(--fg);opacity:.35}
.sw1{background:var(--sw1)}.sw2{background:var(--sw2)}.sw3{background:var(--sw3)}.sw4{background:var(--sw4)}.sw5{background:var(--sw5)}.sw6{background:var(--sw6)}
.card-body{padding:1rem 1.1rem 1.2rem;min-width:0}
.card-body h2{font-size:1.25rem;margin:0 0 .2rem}
.card-body h2 a{color:var(--fg);text-decoration:none}
.num{color:var(--accent)}
.by{margin:0 0 .5rem;color:var(--muted);font-size:.92rem}
.tags{display:flex;flex-wrap:wrap;gap:.35rem;margin:.4rem 0 .8rem}
.tags span{font-size:.75rem;background:var(--soft);color:var(--leaf);padding:.15rem .55rem;border-radius:4px}
.btn,button{display:inline-block;background:var(--accent);color:#fff;border:0;border-radius:6px;padding:.6rem 1.1rem;font:600 .95rem var(--body);text-decoration:none;cursor:pointer}
.btn:hover,button:hover{background:var(--accent-ink)}
button:disabled{background:var(--line);color:var(--muted);cursor:default}
button.ghost{background:transparent;color:var(--fg);border:1px solid var(--line)}
button.linklike{background:none;color:var(--accent-ink);padding:0;font:inherit;text-decoration:underline;border-radius:0}
.grid3{display:grid;gap:1rem;grid-template-columns:repeat(auto-fit,minmax(230px,1fr));padding-bottom:2rem}
.tile{background:var(--surface);border:1px solid var(--line);border-radius:8px;padding:1.2rem;text-decoration:none;color:var(--fg)}
.tile h2{margin:0 0 .4rem;font-size:1.3rem}
.tile p{color:var(--muted);font-size:.95rem}
.more{font-weight:600;color:var(--accent-ink)}
.prose{max-width:68ch;padding-block:1.5rem}
.signup{background:var(--soft);padding-block:2rem;margin-top:2rem;border-top:1px solid var(--line)}
.signup h2{margin:0 0 .3rem}
.signup-form{display:flex;flex-wrap:wrap;gap:.5rem;margin:.8rem 0}
.signup-form input{flex:1 1 220px;padding:.6rem .9rem;border:1px solid var(--line);border-radius:6px;font:inherit;min-width:0;background:var(--surface);color:var(--fg)}
.small{font-size:.82rem;color:var(--muted)}
.foot{padding-block:1.5rem 2.5rem;font-size:.9rem;color:var(--muted)}
.consent{position:fixed;left:16px;right:16px;bottom:16px;max-width:520px;margin:auto;background:var(--surface);border:1px solid var(--line);border-radius:8px;padding:1rem;box-shadow:0 6px 24px rgba(0,0,0,.15);z-index:10}
.consent p{margin:0 0 .6rem}
.protein{color:var(--leaf);font-weight:600}
.hero-img{width:100%;max-width:100%;aspect-ratio:16/9;object-fit:cover;border-radius:8px;margin-top:1.5rem;display:block}