:root { color-scheme: light; --ink:#1d2b25; --muted:#536158; --paper:#f7f7ef; --line:#d4dcd1; --accent:#24533f; }
* { box-sizing:border-box; }
body { margin:0; background:var(--paper); color:var(--ink); font:16px/1.55 system-ui,sans-serif; }
header { border-bottom:1px solid var(--line); padding:1rem max(1rem,calc((100% - 56rem)/2)); display:flex; justify-content:space-between; gap:1rem; color:var(--muted); }
.brand { color:var(--ink); font-family:Georgia,serif; font-weight:bold; text-decoration:none; }
main { max-width:58rem; margin:2.2rem auto 4rem; padding:0 1rem; }
h1,h2,h3,p { margin-top:0; }
h1,h2 { font-family:Georgia,serif; line-height:1.15; }
h1 { font-size:clamp(2.25rem,6vw,4rem); margin-bottom:.55rem; }
h2 { font-size:1.65rem; margin-bottom:.85rem; }
h3 { font-size:1rem; margin-top:1rem; margin-bottom:.4rem; }
a { color:var(--accent); text-underline-offset:.2em; }
nav,.heading,.actions,.checks { display:flex; gap:.65rem 1rem; flex-wrap:wrap; align-items:center; }
.heading { justify-content:space-between; }
nav { margin-bottom:1.25rem; }
.panel { padding:clamp(1rem,3vw,1.65rem); background:#fffefa; border:1px solid var(--line); border-radius:.85rem; margin-bottom:1rem; }
.narrow { max-width:30rem; }
.notice { border-color:var(--accent); }
.grid { display:grid; gap:.65rem 1rem; grid-template-columns:repeat(auto-fit,minmax(min(100%,14rem),1fr)); }
label { display:block; margin-bottom:.6rem; }
label span { display:block; margin-bottom:.2rem; }
input,select,button { font:inherit; }
input:not([type=checkbox]),select { width:100%; min-height:2.65rem; padding:.48rem .58rem; background:white; color:var(--ink); border:1px solid #a5b4a8; border-radius:.35rem; }
input[type=checkbox] { width:1.15rem; height:1.15rem; accent-color:var(--accent); vertical-align:middle; }
button { cursor:pointer; padding:.5rem .85rem; min-height:2.65rem; background:var(--accent); color:white; border:1px solid var(--accent); border-radius:.4rem; }
button.quiet { background:transparent; color:var(--accent); }
:focus-visible { outline:3px solid #987a2c; outline-offset:3px; }
details:not(.panel),.row { border-top:1px solid var(--line); padding:.75rem 0; }
summary { cursor:pointer; font-weight:600; }
details[open]>summary { margin-bottom:.85rem; }
details form+form { margin-top:.75rem; }
.row p { margin-bottom:.4rem; }
.shopping { list-style:none; margin:0 0 .85rem; padding:0; }
.shopping li { border-bottom:1px solid var(--line); }
.checkline { display:flex; align-items:center; gap:.55rem; min-height:2.85rem; margin:0; cursor:pointer; }
.checkline span { margin:0; overflow-wrap:anywhere; }
.bought span { text-decoration:line-through; color:var(--muted); }