@font-face{font-family:"Sorts Mill Goudy";src:url(fonts/SortsMillGoudy-Regular.ttf);font-weight:400;font-display:swap}
@font-face{font-family:"Sorts Mill Goudy";src:url(fonts/SortsMillGoudy-Italic.ttf);font-style:italic;font-display:swap}
:root{--cream:#FEF7EC;--field:#8a8378;--card:#FFFDF7;--ink:#1A1A1A;--accent:#C16E2A;--accent-ink:#9E561E;--muted:#6f685e;--rule:#d9d2c4;--rule-dark:#b9b1a3;
  --serif:"Sorts Mill Goudy","Goudy Old Style",Georgia,serif;--shadow:0 1px 0 rgba(26,26,26,.05),0 8px 22px rgba(120,90,40,.10)}
*{box-sizing:border-box}
[hidden]{display:none!important}   /* the browser's own rule loses to any display: set below (cards, timers) */
body{margin:0;background:var(--cream);color:var(--ink);font-family:var(--serif);font-size:19px;line-height:1.5}
a{color:inherit;text-decoration:none}
a:focus-visible,button:focus-visible,input:focus-visible,select:focus-visible,textarea:focus-visible,summary:focus-visible{outline:2px solid var(--accent);outline-offset:3px}
.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}
.skip{position:absolute;left:12px;top:-60px;z-index:10;background:var(--card);padding:8px 16px;border-radius:6px;box-shadow:var(--shadow)}
.skip:focus{top:8px}
main:focus{outline:none}
img{max-width:100%}
main{max-width:1120px;margin:0 auto;padding:0 24px 48px}

/* masthead: brand and search on one row, chapters in a slim ruled line */
.mast{background:#FAEEDF;padding:16px 24px 0}
.mast-row,.chapters-nav{max-width:1072px;margin-left:auto;margin-right:auto}
.sbtn{display:none;background:none;border:0;padding:6px;margin:-6px -6px -6px 0;color:var(--ink);cursor:pointer}.sbtn svg{width:24px;height:24px;display:block}
.mast-row{display:flex;justify-content:space-between;align-items:center;gap:20px;flex-wrap:wrap}
.brand{display:inline-flex;align-items:center;gap:12px;font-size:30px;line-height:1;white-space:nowrap}
.brand .mark{height:44px;width:auto}
.search{flex:1 1 280px;max-width:460px;margin:0}
.search input{width:100%;font:inherit;font-size:17px;padding:8px 16px;border:1px solid var(--field);border-radius:999px;background:var(--card)}
.chapters-nav{display:flex;align-items:baseline;gap:0 22px;margin-top:12px;padding:6px 0;border-top:1px solid var(--rule-dark);border-bottom:1px solid var(--rule-dark);font-size:17px}
.chapters-nav a{padding:2px 0;border-bottom:2px solid transparent;white-space:nowrap}
.chapters-nav a:hover,.chapters-nav a.here{border-bottom-color:var(--accent)}
.chapters-nav .book-link{margin:-6px -6px -6px auto;color:var(--muted);display:inline-flex;align-items:center;align-self:center;padding:6px}
.chapters-nav .book-link svg{width:20px;height:20px;display:block}
.chapters-nav .book-link:hover{color:var(--accent-ink);border-bottom-color:transparent}

/* chapters, each with its own rat */
.chapter{margin-top:26px}
.chapter>h1,.chapter>h2{display:flex;align-items:flex-end;gap:14px;font-weight:400;font-size:36px;line-height:1;margin:0 0 16px;padding-bottom:10px;border-bottom:1px solid var(--rule-dark)}
.chapter>h1 img,.chapter>h2 img{height:78px;width:auto;margin-bottom:-4px}
.grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(220px,1fr));gap:22px}
.card{display:block;background:var(--card);border-radius:6px;overflow:hidden;box-shadow:var(--shadow)}
.card img,.card .noimg{width:100%;aspect-ratio:21/9;object-fit:cover;background:#eee6d6;display:block}
.card .ct{font-weight:400;font-size:22px;line-height:1.2;margin:12px 14px 2px}
.card .meta{margin:0 14px 14px;color:var(--muted);font-size:15px;font-style:italic}

/* recipe page: the book page */
.recipe{max-width:880px;margin:24px auto 0;text-align:center}
.chap{font-style:italic;font-size:17px;color:var(--muted);margin:0 0 4px}
.chap a{text-decoration:underline dotted;text-decoration-thickness:1px;text-underline-offset:3px;display:inline-block;padding:4px 0}
.inline-link{text-decoration:underline;text-underline-offset:3px}.chap .no{color:var(--accent-ink);font-style:normal}
.recipe h1{font-weight:400;font-size:44px;line-height:1.1;margin:6px 0 6px}
.serves{display:flex;align-items:center;justify-content:center;gap:.8em;margin:0 0 18px}.serves b{font-weight:400;color:var(--muted)}
.serves .rule{flex:0 1 5.5em;min-width:1.2em;border-top:1px solid var(--ink)}.serves>span:not(.rule){white-space:nowrap}
.recipe .hero{display:block;width:100%;height:auto;aspect-ratio:2.4/1;object-fit:cover;margin:8px 0 24px}
.recipe .hero2{display:block;width:100%;height:auto;margin:8px 0 24px}
.recipe.hero-short .hero{aspect-ratio:3.9/1}.recipe.focus-top .hero{object-position:top}.recipe.focus-bottom .hero{object-position:bottom}
.cols{text-align:left}.cols::after{content:"";display:block;clear:both}
.cols h2,.notes h2{font-weight:400;color:var(--muted);font-size:22px;margin:0 0 10px}
.ingredients{float:left;width:var(--ing,41%);box-sizing:border-box;border:1px solid var(--rule-dark);border-radius:3px;padding:14px 18px 16px;margin:0 32px 16px 0;background:var(--card)}
.ingredients h3{font-weight:400;font-size:19px;margin:10px 0 0;color:var(--accent-ink)}
.ingredients ul{list-style:none;padding:0;margin:0 0 6px}
.directions p{margin:0 0 8px}
.directions .steps{list-style:none;margin:0;padding:0}
.directions .step{display:flex;gap:12px;margin:0 0 8px}.directions .step .n{flex:0 0 1.1em;color:var(--accent-ink);font-size:.9em;line-height:1.75}
.directions .step>div{flex:1;min-width:0}
.directions table{border-collapse:collapse}.directions td,.directions th{border:1px solid var(--rule);padding:4px 8px}
.notes{text-align:left;margin:8px 0 0;padding-top:12px;border-top:1px solid var(--rule);font-size:17px}.notes p{margin:0 0 10px}
main table{border-collapse:collapse;margin:4px 0 12px}main th{font-weight:400;color:var(--muted);text-align:left;padding:0 18px 4px 0}
main td{text-align:left;vertical-align:top;padding:5px 18px 5px 0;border-top:1px solid var(--rule)}
.tsp{color:#1f5fbf}.tbsp{color:#1b7a33}
@media (forced-colors:active){.tbsp{text-decoration:underline}}   /* high contrast drops the colours; the underline keeps tbsp apart */
.xref{text-decoration:underline dotted;text-underline-offset:2px}.xref:hover{color:var(--accent-ink)}
.nomatch{margin:40px 0;text-align:center;font-style:italic;color:var(--muted)}
.btn{display:inline-block;font-family:inherit;cursor:pointer;border:1px solid var(--rule-dark);color:var(--ink);background:var(--card);padding:8px 26px;border-radius:999px;font-size:19px}
.btn:hover{border-color:var(--accent);color:var(--accent-ink)}
.btn.fill{background:var(--accent-ink);color:#fff;border-color:var(--accent-ink)}
.actions{margin:0 0 20px;display:flex;justify-content:center;align-items:center;gap:22px;flex-wrap:wrap}
.actions .quiet{font-style:italic;color:var(--muted)}.actions .quiet:hover{color:var(--accent-ink)}
.neighbours{display:flex;justify-content:space-between;gap:12px;max-width:880px;margin:18px auto 0;padding-top:16px;border-top:1px solid var(--rule)}
.neighbours a{flex:0 1 48%;display:flex;align-items:center;gap:10px;padding:9px 14px;border:1px solid var(--rule-dark);border-radius:6px;background:var(--card);line-height:1.25;text-align:left}
.neighbours .next{margin-left:auto;justify-content:flex-end;text-align:right}.neighbours .arr{color:var(--accent-ink);flex:none}
.neighbours a:hover{border-color:var(--accent)}

.foot{text-align:center;color:var(--muted);padding:14px 20px 18px;font-style:italic;font-size:16px}
.foot .bookdl{font-size:15px;text-decoration:underline;text-decoration-color:var(--rule-dark);text-underline-offset:3px;display:inline-block;padding:6px 4px}.foot .bookdl:hover{color:var(--accent-ink)}
.foot img{height:46px;width:auto;display:block;margin:0 auto 4px;opacity:.85}.foot p{margin:0}

@media (max-width:700px){
  body{font-size:17px}
  .mast{padding:10px 16px 0}.brand{font-size:24px}.brand .mark{height:36px}
  .search{display:none;flex-basis:100%;max-width:none}.search input{font-size:16px;padding:8px 14px}
  .sbtn{display:block}.mast.open .search{display:block}
  .neighbours{flex-direction:column-reverse;gap:8px}.neighbours a{flex:none;width:100%}
  .neighbours .next{justify-content:space-between;text-align:left}
  .chapters-nav{margin-top:10px;gap:0 16px;font-size:16px;overflow-x:auto;scrollbar-width:none;-webkit-overflow-scrolling:touch}.chapters-nav::-webkit-scrollbar{display:none}
  main{padding:0 16px 48px}
  .chapter>h1,.chapter>h2{font-size:28px}.chapter>h1 img,.chapter>h2 img{height:56px}
  .grid{grid-template-columns:repeat(2,1fr);gap:12px}.card .ct{font-size:18px;margin:8px 10px 2px}.card .meta{font-size:13px;margin:0 10px 10px}
  .recipe h1{font-size:32px}.chap{font-size:15px}.recipe .hero{margin-bottom:16px}
  .chapters-nav .book-link{display:none}
  .ingredients{float:none;width:auto;margin:0 0 18px;padding:12px 14px}
  .actions{position:fixed;left:0;right:0;bottom:0;margin:0;padding:8px 16px 10px;background:var(--cream);border-top:1px solid var(--rule);z-index:5}
  .actions .btn{flex:1;padding:6px 20px;font-size:18px}.actions .quiet{display:none}
  main{padding-bottom:6px}.foot{padding:12px 20px 14px}
  body:has(.recipe .actions){padding-bottom:58px}
  html:has(.recipe .actions){scroll-padding-bottom:70px}   /* a focused link never hides under the fixed bar */
}
/* the narrowest phones (320-380px): brand and magnifier stay on one row */
@media (max-width:380px){
  .mast-row{gap:10px}.brand{font-size:20px;gap:8px}.brand .mark{height:30px}
  .chapters-nav{gap:0 11px;font-size:15px}
}

/* printing a recipe page: the recipe only */
@media print{
  .mast,.foot,.actions,.neighbours,.skip{display:none!important}
  body{background:#fff;font-size:12pt}main{padding:0}.recipe{margin:0}.ingredients{background:none}
}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}*,*::before,*::after{animation:none!important;transition:none!important}}

/* kitchen tablet inside the wall panel: compact, no cover */
body.tablet .foot{display:none}
body.tablet .mast{padding-top:10px}body.tablet .brand{font-size:24px}body.tablet .brand .mark{height:34px}
body.tablet .chapters-nav{margin-top:8px;font-size:18px}
body.tablet .chapter>h1,body.tablet .chapter>h2{font-size:30px}body.tablet .chapter>h1 img,body.tablet .chapter>h2 img{height:60px}

/* admin */
.chapter-title{font-weight:400;font-size:30px;line-height:1.2;margin:14px 0 10px}
.adminform label{display:block;margin:10px 0 4px}
.adminform input:not([type=checkbox]),.adminform select,.adminform textarea{width:100%;font:inherit;padding:8px;border:1px solid var(--field);border-radius:6px;background:#fff}
.adminform label.check{display:flex;gap:8px;align-items:center;font-size:16px;color:var(--muted)}
.adminform .row{display:grid;grid-template-columns:repeat(auto-fit,minmax(160px,1fr));gap:12px}
.err{color:#a33}.ok{color:#2d6b2d}
.btn.fill.muted{background:var(--muted);border-color:var(--muted)}.btn.fill.danger{background:#a33;border-color:#a33}
.editor{display:grid;grid-template-columns:1fr;gap:28px;align-items:start}
@media (min-width:1000px){.editor{grid-template-columns:1fr 1fr}}
.pagepane{position:sticky;top:12px;text-align:center}
.pagepane img{width:100%;max-width:640px;aspect-ratio:148/210;background:var(--cream);box-shadow:var(--shadow);transition:opacity .2s}
.pagepane img.busy{opacity:.45}
.versions{margin:18px 0}.versions summary{cursor:pointer;color:var(--muted)}.versions ul{margin:6px 0;columns:2 220px}
.linkbtn{font:inherit;color:inherit;background:none;border:0;padding:4px 0;text-decoration:underline;text-underline-offset:3px;cursor:pointer}
form.inline,form.inline p{display:inline}
.admin{width:100%;border-collapse:collapse;background:#fff}.admin td,.admin th{border-bottom:1px solid var(--rule);padding:6px 10px;text-align:left}
.listhead{margin:22px 0 6px;font-weight:normal;font-size:22px;color:var(--accent-ink)}
.admin .grip{width:1.5em;cursor:grab;color:var(--muted);touch-action:none;user-select:none;letter-spacing:-3px}
.admin .no{width:2.5em;color:var(--muted)}.admin .view{width:6em}
.admin .move{width:5.5em;white-space:nowrap}
.admin .move button{font:inherit;font-size:16px;width:30px;height:30px;margin-right:4px;border:1px solid var(--field);border-radius:6px;background:var(--card);cursor:pointer}
.admin tr:first-child .move .up,.admin tr:last-child .move .down{visibility:hidden}
.admin tr.ghost{opacity:.4}.admin tr.chosen{background:#fbf3e6}
.fillers{border:1px solid var(--rule);border-radius:6px;margin:12px 0;padding:8px 12px 12px}.fillers legend{padding:0 6px;color:var(--muted)}
.fillers label.none{display:flex;gap:8px;align-items:center;font-size:16px;margin:4px 0 8px}
.fillers .picks{display:grid;grid-template-columns:repeat(auto-fill,minmax(120px,1fr));gap:8px}
.fillers .picks label{position:relative;margin:0;cursor:pointer}
.fillers .picks input{position:absolute;opacity:0;width:1px;height:1px}
.fillers .picks img{display:block;width:100%;aspect-ratio:21/9;object-fit:cover;border:3px solid transparent;border-radius:6px}
.fillers .picks input:checked+img{border-color:var(--accent-ink)}.fillers .picks input:focus-visible+img{outline:2px solid var(--accent);outline-offset:2px}
.calc{text-align:left;margin:8px 0 0;padding:12px 16px;border:1px solid var(--rule-dark);border-radius:3px;background:var(--card);max-width:420px}
.calc h2{font-weight:400;color:var(--muted);font-size:22px;margin:0 0 8px}
.calc label{display:flex;align-items:center;gap:8px;flex-wrap:wrap}
.calc input[type=number]{font:inherit;width:7em;padding:4px 8px;border:1px solid var(--field);border-radius:6px;background:#fff}
.calc table{margin:8px 0 0}.calc td{padding:3px 18px 3px 0;border-top:1px solid var(--rule)}.calc .amt{text-align:right;white-space:nowrap}
.calcfield{margin:10px 0}.calcfield summary{cursor:pointer;color:var(--muted)}.calcfield code{font-size:.9em}
.calc .choice{border:0;margin:8px 0 0;padding:0;display:flex;flex-wrap:wrap;gap:4px 16px;align-items:center}
.calc .choice legend{float:left;margin-right:8px;padding:0;color:var(--muted)}.calc .choice label{gap:6px}
/* Ask Lil B */
.chat-btn{position:fixed;right:18px;bottom:18px;z-index:40;height:56px;border-radius:999px;border:1px solid var(--rule-dark);background:var(--card);display:flex;align-items:center;gap:6px;cursor:pointer;padding:0 16px 0 6px;font-family:inherit;font-size:17px;color:var(--ink)}
.chat-btn:hover{border-color:var(--accent)}
.chat{position:fixed;right:18px;bottom:86px;z-index:50;width:380px;max-width:calc(100% - 36px);height:560px;max-height:calc(100vh - 110px);background:var(--cream);border:1px solid var(--rule);border-radius:14px;box-shadow:0 8px 30px rgba(60,40,20,.18);display:flex;flex-direction:column;font-size:17px;overflow:hidden}
.chat[hidden]{display:none}
.chat-top{display:flex;align-items:center;justify-content:space-between;padding:12px 16px;border-bottom:1px solid var(--rule)}
.chat-top h2{margin:0;font-weight:400;font-style:italic;font-size:20px}
.chat-x{background:none;border:0;font-size:28px;line-height:1;cursor:pointer;color:var(--muted);padding:4px 8px}
.chat-log{flex:1;overflow-y:auto;padding:12px 16px}
.chat .msg{margin:0 0 14px}.chat .msg p{margin:0 0 6px}.chat .msg ul{margin:0 0 6px;padding-left:1.2em}
.chat .msg.user{text-align:right;font-style:italic;color:var(--muted)}
.chat .msg.wait{color:var(--muted);font-style:italic}
.chat .msg a{color:var(--accent-ink);text-decoration:underline;text-underline-offset:3px}
.chat-form{display:flex;gap:8px;padding:10px 16px 4px;border-top:1px solid var(--rule)}
.chat-form textarea{flex:1;font:inherit;font-size:17px;resize:none;border:1px solid var(--rule-dark);border-radius:10px;padding:8px 10px;background:var(--card)}
.chat-form .btn{padding:8px 18px;font-size:17px;align-self:flex-end}
.chat-foot{margin:0;padding:2px 16px 10px;font-size:13px;color:var(--muted);font-style:italic}
@media (max-width:600px){.chat{top:0;right:0;bottom:0;width:100%;max-width:none;height:auto;max-height:none;border:0;border-radius:0;box-shadow:none}.chat-btn{right:14px;bottom:14px;height:50px}body.chat-open{overflow:hidden}body:has(.recipe .actions) .chat-btn{bottom:66px}}