:root{--paper:#f6f2e9;--ink:#263b2c;--muted:#677260;--line:#d9dece;--accent:#e6edce}*{box-sizing:border-box}body{margin:0;background:var(--paper);color:var(--ink);font:16px/1.6 system-ui,-apple-system,sans-serif}a{color:inherit;text-decoration:none}button,input{font:inherit}button{cursor:pointer}header,main,footer{max-width:1180px;margin:auto}header{padding:28px 28px;display:flex;justify-content:space-between;border-bottom:1px solid var(--line);font-size:13px}.brand{font-weight:800;letter-spacing:2px}.brand span{font-weight:400;letter-spacing:1px;margin-left:8px}main{padding:0 28px}.intro{position:relative;padding:65px 0 52px}.eyebrow{font-size:11px;font-weight:700;letter-spacing:2px}.intro h1{font:clamp(54px,7vw,92px)/1.03 Georgia,serif;letter-spacing:-3px;margin:20px 0 25px}.intro>p:last-of-type{max-width:490px;color:var(--muted);font-size:17px}.stamp{position:absolute;right:55px;top:105px;border:1px solid #9eab8d;border-radius:50%;width:185px;height:185px;display:flex;flex-direction:column;align-items:center;justify-content:center;transform:rotate(9deg);font:22px/1.3 Georgia,serif;background:var(--accent)}.stamp span{font-size:36px;margin-top:7px}label{display:block;font-size:12px;font-weight:700;margin-bottom:9px}.searchbox{background:#fffdf8;border:1px solid #b5bda9;border-radius:8px;display:flex;align-items:center;padding:5px 18px;gap:10px}.searchbox span{font-size:30px}input{width:100%;padding:13px 0;background:none;border:0;color:var(--ink);outline:none}.searchbox:focus-within{outline:2px solid var(--ink);outline-offset:3px}button{border:1px solid var(--line);background:transparent;border-radius:30px;padding:8px 16px;color:var(--ink)}button:hover{background:var(--accent)}button:focus-visible,a:focus-visible{outline:3px solid #76834c;outline-offset:4px}#filters{display:flex;flex-wrap:wrap;gap:8px;margin:18px 0 35px}#filters button[aria-pressed=true]{background:var(--ink);color:var(--paper);border-color:var(--ink)}.listhead{display:flex;align-items:center;justify-content:space-between;border-top:1px solid var(--line);padding-top:24px;margin-bottom:18px}.listhead h2{font:30px Georgia,serif;margin:0}.listhead p{font-size:12px;color:var(--muted)}#grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:17px}.card{width:100%;text-align:left;border:1px solid var(--line);border-radius:9px;padding:25px;background:#fffdf7;display:flex;flex-direction:column;min-height:208px;transition:transform .16s,background .16s}.card:hover{transform:translateY(-3px);background:#eef1df}.tag{font-size:10px;text-transform:uppercase;letter-spacing:1.6px;color:var(--muted)}.card h3{font:26px/1.2 Georgia,serif;margin:18px 0 25px;overflow-wrap:anywhere}.card .open{margin-top:auto;font-size:12px;display:flex;justify-content:space-between}.card .arrow{font-size:20px}footer{padding:55px 28px 25px;margin-top:40px;display:flex;justify-content:space-between;font-size:12px;color:var(--muted)}dialog{max-width:840px;width:calc(100% - 28px);max-height:92vh;border:1px solid var(--line);border-radius:12px;background:var(--paper);color:var(--ink);padding:28px}dialog::backdrop{background:#16251dbb}.detailbar{display:flex;justify-content:space-between;gap:8px;margin-bottom:35px}article{padding:0 22px 20px}article h2{font:40px/1.1 Georgia,serif;overflow-wrap:anywhere}article .body{white-space:pre-wrap;line-height:1.85;overflow-wrap:anywhere}article .source{font-size:12px;color:var(--muted);border-top:1px solid var(--line);padding-top:18px;margin-top:30px}@media(max-width:760px){#grid{grid-template-columns:repeat(2,minmax(0,1fr))}.stamp{right:5px;top:85px;width:130px;height:130px;font-size:17px}.intro>p:last-of-type{max-width:70%}.brand span{display:none}}@media(max-width:480px){main{padding:0 20px}.intro{padding-top:40px}.stamp{top:62px;width:100px;height:100px;font-size:14px}.stamp span{font-size:22px}#grid{grid-template-columns:1fr}.card{min-height:165px}.intro>p:last-of-type{max-width:100%}.intro h1{font-size:56px;letter-spacing:-2px}.detailbar{font-size:12px}dialog{padding:18px}article{padding:0}article h2{font-size:32px}footer{gap:20px}}@media print{body>*{display:none!important}body>dialog[open]{display:block!important;position:static;max-height:none;max-width:none;width:100%;border:0;padding:0;overflow:visible}dialog .detailbar{display:none}dialog::backdrop{background:none}article .body{font-size:12pt}article h2{font-size:25pt}}

.reference{max-width:1180px;margin:35px auto 0;padding:0 28px;font-size:13px}.source a{text-decoration:underline}.body{tab-size:2}

/* On small screens the badge has its own row below the introductory text. */
@media(max-width:760px){.intro .stamp{position:relative;top:auto;right:auto;margin:24px 8px 0 auto}.intro>p:last-of-type{max-width:100%}}
@media(max-width:480px){.intro h1{font-size:clamp(44px,12vw,56px)}}

/* Hide the decorative badge on narrow phone screens. */
@media(max-width:480px){.intro .stamp{display:none}}

/* Keep recipe actions visible inside the scrolling dialog. */
dialog .detailbar{position:sticky;top:-28px;z-index:2;background:var(--paper);margin:-28px -28px 35px;padding:20px 28px 16px;border-bottom:1px solid var(--line)}
@media(max-width:480px){dialog .detailbar{top:-18px;margin:-18px -18px 28px;padding:14px 18px}}
@media print{dialog .detailbar{display:none}}

.vegetarian-filter{display:flex;align-items:center;gap:10px;font-size:14px;margin:18px 0 4px;cursor:pointer}.vegetarian-filter input{width:20px;height:20px;margin:0;accent-color:var(--ink);flex:none}.filter-help{font-size:12px;color:var(--muted);margin:0 0 12px;max-width:650px}.diet-badge,.diet-check{align-self:flex-start;font-size:11px;border-radius:12px;padding:2px 9px;margin:-10px 0 16px;background:var(--accent)}.diet-check{background:#f2ead8;color:#665133}.diet-note{font-size:13px;background:var(--accent);padding:12px 15px;border-radius:6px}

/* Categories and the vegetarian checkbox share a compact wrapping row. */
.filterbar{display:flex;flex-wrap:wrap;align-items:center;gap:8px;margin:16px 0 22px}
.filterbar #filters{display:contents}
.filterbar .vegetarian-filter{margin:0;padding:8px 12px;min-height:43px;border:1px solid var(--line);border-radius:30px;font-weight:400;white-space:nowrap}
.filterbar .vegetarian-filter:has(input:checked){background:var(--accent);border-color:#9eab8d}
#vegetarian-help{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap;border:0}
.listhead{padding-top:18px}

/* Keep the landing-page navigation visible while scrolling. */
body>header{position:sticky;top:0;z-index:10;background:var(--paper)}
@media(max-width:480px){body>header{padding:16px 20px;gap:12px;align-items:center}body>header nav{flex:1;text-align:right;line-height:1.5}}

/* A smaller introduction leaves more room for the recipe collection. */
.intro{padding:30px 0 24px}.intro h1{font-size:clamp(36px,4vw,52px);letter-spacing:-1px;margin:12px 0 14px}.intro>p:last-of-type{margin-bottom:0}.intro .stamp{top:28px;width:130px;height:130px;font-size:17px}.intro .stamp span{font-size:26px}
@media(min-width:481px) and (max-width:760px){.intro{padding-right:150px}.intro .stamp{position:absolute;top:32px;right:5px;margin:0}.intro>p:last-of-type{max-width:100%}}
@media(max-width:480px){.intro{padding:22px 0 20px}.intro h1{font-size:36px;letter-spacing:-1px}.intro>p:last-of-type{font-size:15px}}

.intro h1{white-space:nowrap}
@media(max-width:760px){.intro{padding-right:0}.intro .stamp{display:none}.intro h1{font-size:clamp(24px,6.5vw,42px)}}

.detailbar{flex-wrap:wrap;align-items:center}.detailbar #edit-recipe{border:1px solid var(--line);border-radius:30px;padding:8px 16px}.detailbar #edit-recipe:hover{background:var(--accent)}.detailbar #edit-recipe[hidden]{display:none}