@import "fonts/fonts.css";
/* ===== Melted Pot · Mid-century v3 · shared chrome =====
   Copied from scratchpad/design-demos/project/08-midcentury_v3/_shared.css.
   The single stylesheet for site pages, card PDF and book PDF. */

/* --- tokens --- */
.page{--paper:#f7f4ea;--ink:#2b2a25;--olive:#3d5a3a;--rust:#a0522d;--mustard:#c9a227;--muted:#5f5c50;--tint:#e9e5d6;--rule:rgba(43,42,37,.28);--hover:#2b4229}

/* --- base + type scale --- */
body{margin:0}
.page{position:relative;box-sizing:border-box;min-height:100%;padding:0 72px;background:var(--paper);color:var(--ink);font-family:'Lora',Georgia,serif;font-size:18px;line-height:1.55}
.wrap{box-sizing:border-box;max-width:1136px;margin:0 auto;padding:0 32px}
.disp{font-family:'Bodoni Moda',serif;font-weight:400;line-height:1.05}
.lbl,.times dt{font-family:'Josefin Sans',sans-serif;font-size:13px;font-weight:600;letter-spacing:.12em;text-transform:uppercase}
h1.disp{margin:0;font-size:64px;font-style:italic}
.title h1{margin:0 0 14px;font-size:72px;font-style:normal}
h2.disp{margin:0;font-size:36px}
.vh{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}

/* --- links: inline prose links (incl. URLs) are underlined; list links are not until hover --- */
a{color:var(--olive)}
a:hover,a.is-hover{color:var(--hover)}
a:focus-visible,button:focus-visible,input:focus-visible{outline:2px solid var(--olive);outline-offset:2px}

/* --- masthead, nav, search --- */
.mast{display:flex;flex-wrap:wrap;align-items:center;gap:12px 32px;padding:30px 0 22px}
.brand{display:inline-flex;align-items:center;min-height:44px;font-family:'Bodoni Moda',serif;font-size:42px;line-height:1;text-decoration:none;color:var(--ink)}
.nav{display:flex;flex-wrap:wrap;gap:4px;margin-left:auto}
.nav a{display:inline-block;padding:14px 12px;text-decoration:none;color:var(--ink)}
.nav a:hover,.nav a.is-hover{color:var(--olive)}
.nav a[aria-current]{text-decoration:underline;text-decoration-color:var(--olive);text-decoration-thickness:2px;text-underline-offset:6px}
.search{display:flex;align-items:center;gap:10px;margin:0}
.search input{box-sizing:border-box;height:44px;width:190px;padding:0 12px;border:1px solid var(--ink);border-radius:0;background:transparent;font:16px 'Lora',Georgia,serif;color:var(--ink)}

/* --- buttons: primary (Go, Search) and secondary (PDF downloads); one hover each --- */
.primary,.secondary{display:inline-flex;align-items:center;justify-content:center;gap:10px;box-sizing:border-box;min-width:44px;min-height:44px;padding:0 14px;border:1px solid var(--ink);border-radius:0;font-family:'Josefin Sans',sans-serif;font-size:13px;font-weight:600;letter-spacing:.12em;text-transform:uppercase;line-height:1;text-decoration:none;cursor:pointer}
.primary{background:var(--ink);color:var(--paper)}
.primary:hover,.primary.is-hover{background:var(--olive);border-color:var(--olive);color:var(--paper)}
.secondary{background:transparent;color:var(--ink)}
.secondary:hover,.secondary.is-hover{background:var(--ink);color:var(--paper)}
.dl{min-height:48px;padding:0 18px}
.dl svg{flex:none}

/* --- gingham divider, comb binding --- */
.gingham{display:block;width:100%;height:8px}
.comb{position:absolute;top:0;left:0;width:44px;height:100%;display:block}

/* --- index tabs: default (filled), open = aria-current (underlined), pale = unopened sibling --- */
.tabs{position:absolute;top:150px;right:0;display:flex;flex-direction:column;gap:6px}
.tab{display:flex;align-items:center;justify-content:center;box-sizing:border-box;width:44px;height:136px;border-radius:10px 0 0 10px;writing-mode:vertical-rl;text-decoration:none;color:var(--paper)}
.tab.olive{background:var(--olive)}.tab.rust{background:var(--rust)}.tab.mustard{background:var(--mustard);color:var(--ink)}
.tab:hover,.tab.is-hover{color:var(--paper);text-decoration:underline}.tab.mustard:hover,.tab.mustard.is-hover{color:var(--ink)}
.tab[aria-current]{text-decoration:underline;text-decoration-thickness:2px;text-underline-offset:5px}
.tab.pale{background:var(--tint);color:var(--ink);box-shadow:inset 0 0 0 1px var(--rule)}
.tab.pale:hover,.tab.pale.is-hover{color:var(--ink)}

/* --- section head, kitchen line, handwriting, footer --- */
.sec{display:flex;align-items:center;gap:16px;margin:56px 0 8px}
.sec .rule{flex:1;height:1px;background:var(--rule)}
.page .kitchen{display:flex;flex-wrap:wrap;align-items:baseline;gap:4px 14px;margin:20px 0 0}
.kitchen .line{flex:0 1 340px;border-bottom:1px solid var(--ink);padding:0 10px 2px}
.hand{display:inline-block;font-family:'Nothing You Could Do',cursive;font-size:30px;line-height:1.15;color:var(--olive);transform:rotate(-2deg)}
.foot{display:flex;flex-wrap:wrap;justify-content:space-between;gap:12px 40px;align-items:baseline;padding:28px 0 40px}
.foot p{margin:0}

/* --- page heads: breadcrumb, result-count line, lede --- */
.head{padding:48px 0 8px}
.crumb{margin:0 0 14px;color:var(--olive)}
.crumb a{text-decoration:none}
.crumb a:hover{text-decoration:underline}
.count{margin:14px 0 0;font-size:19px;font-style:italic;color:var(--rust)}
.head .lede{margin:14px 0 0;max-width:620px}

/* --- circled numeral: 44 in lists, 48 in recipe steps; grows into a pill for 2-4 digits --- */
.num{display:inline-flex;align-items:center;justify-content:center;box-sizing:border-box;min-width:44px;height:44px;padding:0 .4em;border-radius:999px;background:var(--olive);color:var(--paper);font-family:'Bodoni Moda',serif;font-size:23px;line-height:1;flex:none}
.steps .num{min-width:48px;height:48px;font-size:25px}

/* --- count numeral, zero count --- */
.n{font-family:'Bodoni Moda',serif;font-size:20px;line-height:1;color:var(--olive)}
.none{font-style:italic;color:var(--muted)}

/* --- photo placeholder (svg, aria-hidden, hatch on --tint) --- */
.ph{display:block;background:var(--tint)}

/* --- tag line: "·" is drawn before each following tag, so no trailing dot --- */
.tags{display:flex;flex-wrap:wrap;align-items:center;gap:0;overflow:hidden;margin:28px 0 0;color:var(--olive)}
.tags a{position:relative;display:inline-block;padding:11px 4px 11px 20px;margin:0 12px 0 -16px;white-space:nowrap;text-decoration:none;color:var(--olive)}
.tags a:hover,.tags a.is-hover{text-decoration:underline}
.tags a::before{content:"·";position:absolute;left:4px;color:var(--rust)}

/* --- recipe row --- */
.row{display:grid;grid-template-columns:auto 1fr auto 168px;gap:16px 28px;align-items:center;padding:26px 0;border-bottom:1px solid var(--rule)}
.row h3{margin:0 0 4px;font-size:30px}
.row h3 a{color:var(--ink);text-decoration:none}
.row h3 a:hover,.row h3 a.is-hover{color:var(--olive);text-decoration:underline}
.row .by{margin:0 0 6px;font-style:italic;color:var(--rust)}
.pick{margin-left:8px;font-style:normal;white-space:nowrap;color:var(--rust)}
.row .meta{margin:0;color:var(--olive)}
.meta{display:flex;flex-wrap:wrap;overflow:hidden}
.meta > span{position:relative;white-space:nowrap;padding-left:14px;margin:0 10px 0 -14px}
.meta > span::before{content:"·";position:absolute;left:7px}
.row .tags{margin:2px 0 0;gap:0 4px}
.row .tags a{padding:8px 2px 8px 18px}
.row .ph{width:168px;height:120px}
.times{display:grid;grid-template-columns:auto auto;gap:2px 20px;margin:0;align-items:baseline}
.times dt{color:var(--olive)}
.times dd{margin:0;font-family:'Bodoni Moda',serif;font-size:22px;line-height:1.2}

/* --- category box: ONE style, filled header band in the dimension colour --- */
.cats{display:flex;flex-wrap:wrap;gap:24px}
.cat{flex:1 1 260px;border:1px solid var(--ink);border-radius:10px 10px 0 0;padding:0 24px 14px}
.cat.olive{--tab:var(--olive);--tabtext:var(--paper)}.cat.rust{--tab:var(--rust);--tabtext:var(--paper)}.cat.mustard{--tab:var(--mustard);--tabtext:var(--ink)}.cat.ink{--tab:var(--ink);--tabtext:var(--paper)}
.cat h3{display:flex;align-items:center;gap:10px;box-sizing:border-box;min-height:44px;margin:0 -25px 8px;padding:0 25px;border-radius:10px 10px 0 0;background:var(--tab);color:var(--tabtext)}
.cat ul{list-style:none;margin:0;padding:0}
.cat li a,.cat li .none{display:flex;justify-content:space-between;align-items:baseline;gap:12px;padding:10px 0;border-bottom:1px solid var(--rule);font-size:18px}
.cat li a{text-decoration:none;color:var(--ink)}
.cat li a:hover,.cat li a.is-hover{color:var(--olive);text-decoration:underline}
.cat li:last-child a,.cat li:last-child .none{border-bottom:0}
.cat li a[aria-current]{color:var(--olive);font-weight:600}
.cur{text-decoration:underline;text-decoration-thickness:2px;text-underline-offset:6px}
.tagbox{margin-top:24px;padding-bottom:10px}
.cat .taglist{display:flex;flex-wrap:wrap;gap:0 28px}
.cat .taglist a{display:inline-flex;align-items:baseline;gap:8px;padding:10px 0;border:0}

/* --- filter chip (selected = aria-pressed, olive fill + check) --- */
.chips{display:flex;flex-wrap:wrap;gap:8px}
.chip{display:inline-flex;align-items:center;gap:8px;box-sizing:border-box;min-height:44px;padding:0 12px;border:1px solid var(--ink);border-radius:0;background:transparent;color:var(--ink);font:16px/1.2 'Lora',Georgia,serif;text-decoration:none;cursor:pointer}
.chip:hover,.chip.is-hover{border-color:var(--olive);color:var(--olive)}
.chip[aria-pressed="true"]{background:var(--olive);border-color:var(--olive);color:var(--paper)}
.chip[aria-pressed="true"] .n{color:var(--paper)}
.chip svg{flex:none}
.chips .none{display:inline-flex;align-items:center;gap:6px;min-height:44px;padding:0 4px;font-size:16px}

/* --- toolbar, sort and unit toggles, pager --- */
.toolbar{display:flex;flex-wrap:wrap;align-items:center;gap:10px 16px;padding:0 0 14px;border-bottom:1px solid var(--ink)}
.toolbar .shown{margin:0 auto 0 0;font-style:italic}
.seg,.units{display:inline-flex;border:1px solid var(--ink)}
.seg button,.units button{height:44px;padding:0 14px;border:0;background:transparent;color:var(--ink);cursor:pointer;font:inherit;text-transform:inherit;letter-spacing:inherit}
.seg button + button{border-left:1px solid var(--ink)}
.seg button[aria-pressed="true"],.units button[aria-pressed="true"]{background:var(--olive);color:var(--paper)}
.pager{display:flex;flex-wrap:wrap;align-items:center;gap:6px;margin:32px 0 0}
.pager a,.pager span{display:inline-flex;align-items:center;justify-content:center;box-sizing:border-box;min-width:44px;height:44px;padding:0 10px;border:1px solid transparent;text-decoration:none;color:var(--ink)}
.pager a:hover{border-color:var(--olive);color:var(--olive)}
.pager a[aria-current="page"]{background:var(--ink);color:var(--paper)}
.pager .off{color:var(--muted)}
.pager .pg{font-family:'Bodoni Moda',serif;font-size:20px}

/* --- recipe page: title, facts grid, ingredients box, stepper, source, downloads, QR, steps, notes --- */
.title{display:flex;flex-wrap:wrap;gap:28px 56px;align-items:flex-end;padding:44px 0 32px}
.title .text{flex:1 1 480px}
.title .by{margin:0;font-size:22px;font-style:italic;color:var(--rust)}
.title .ph{flex:0 1 340px;width:340px;max-width:100%;height:230px}
.facts{display:flex;flex-wrap:wrap;border-top:1px solid var(--ink);border-bottom:1px solid var(--ink)}
.facts div{flex:1 1 180px;padding:16px 24px 14px;border-right:1px solid var(--rule)}
.facts div:last-child{border-right:0}
.facts .k{display:block;color:var(--olive);margin-bottom:4px}
.facts .v{font-family:'Bodoni Moda',serif;font-size:30px;line-height:1.1}
.facts .v small{font-family:'Lora',Georgia,serif;font-size:16px;font-style:italic}
.facts + .tags{margin-top:14px}
.cols{display:grid;grid-template-columns:400px 1fr;gap:40px 64px;padding:40px 0 0;align-items:start}
.cols .sec{margin:0 0 10px}
.box{border:1px solid var(--ink);padding:0 22px 18px}
.boxhead{display:flex;flex-wrap:wrap;align-items:center;gap:8px 16px;padding:16px 0 14px;border-bottom:1px solid var(--ink);margin-bottom:6px}
.boxhead h2{margin-right:auto}
.scale{display:flex;flex-wrap:wrap;align-items:center;gap:10px 16px;padding:10px 0 12px;border-bottom:1px solid var(--rule)}
.step{display:inline-flex;align-items:center;border:1px solid var(--ink)}
.step button{width:44px;height:44px;border:0;background:transparent;color:var(--ink);font:22px 'Bodoni Moda',serif;cursor:pointer}
.step button:hover{background:var(--olive);color:var(--paper)}
.step input{width:52px;height:44px;border:0;border-left:1px solid var(--ink);border-right:1px solid var(--ink);background:transparent;text-align:center;font:20px 'Bodoni Moda',serif;color:var(--ink);-moz-appearance:textfield}
.group{margin:18px 0 0}
.group h3{display:flex;align-items:center;gap:10px;margin:0 0 2px;color:var(--olive)}
.group ul{list-style:none;margin:0;padding:0}
.group li{display:flex;gap:12px;padding:8px 0;border-bottom:1px solid var(--rule)}
.group li .q{flex:0 0 92px;font-family:'Bodoni Moda',serif;font-size:19px;line-height:1.3}
.source{margin:28px 0 0;border:1px solid rgba(43,42,37,.5);padding:14px 18px}
.source .lbl{display:block;color:var(--rust);margin-bottom:4px}
.source p{margin:0;font-style:italic}
.source cite{font-style:normal}
.downloads{display:flex;flex-wrap:wrap;gap:12px;margin:28px 0 0}
.qr{display:flex;align-items:center;gap:18px;margin:28px 0 0}
.qr svg{width:112px;height:112px;flex:none}
.qr p{margin:0}
.steps{list-style:none;margin:0;padding:0}
.steps li{display:grid;grid-template-columns:auto 1fr;gap:20px;padding:18px 0 20px;border-bottom:1px solid var(--rule)}
.steps li:last-child{border-bottom:0}
.steps li p{margin:0}
.notes{margin-top:44px}
.notes p{margin:0}
.notes p + p{margin-top:14px}
@media (max-width:900px){
  .cols{grid-template-columns:1fr}
  .title h1{font-size:48px}
  .facts .v{font-size:24px}
}

/* --- phone --- */
@media (max-width:760px){
  .page{padding:0 0 0 22px}
  .comb{width:22px}
  .page .wrap{padding-left:20px;padding-right:20px}
  .hand{font-size:24px}
  .nav{flex-basis:100%;margin-left:-12px;gap:0 4px}
  .search{flex:1 1 100%}
  .search input{flex:1 1 auto;width:auto;min-width:0}
  .tabs{position:static;flex-direction:row;flex-wrap:wrap;padding:0 20px}
  .tab{flex:1 1 auto;width:auto;height:44px;padding:0 6px;letter-spacing:.08em;writing-mode:horizontal-tb;border-radius:0 0 10px 10px}
  h1.disp{font-size:44px;overflow-wrap:anywhere}
  .title h1{font-size:48px}
  h2.disp{font-size:30px}
  .crumb a,.row h3 a{display:inline-flex;align-items:center;min-height:44px}
  .crumb a,.tags a,.row .tags a{min-width:44px}
  .tags a,.row .tags a{display:inline-flex;align-items:center;min-height:44px;padding-top:0;padding-bottom:0}
  .row{grid-template-columns:auto 1fr}
  .row .num{align-self:start}
  .row .times,.row .ph{grid-column:2}
  .row h3{font-size:26px}
  .facts{display:grid;grid-template-columns:1fr 1fr}
  .facts div{padding:12px 16px 10px;border-right:0}
  .facts div:nth-child(odd){border-right:1px solid var(--rule)}
  .facts div:nth-child(-n+2){border-bottom:1px solid var(--rule)}
  .cols > *{min-width:0}
  .qr a{overflow-wrap:anywhere}
  .cat .taglist{gap:0 20px}
}

/* ===== page-specific rules, copied verbatim from the mockup artboards' "page-specific" blocks ===== */
/* home */
.intro{display:flex;flex-wrap:wrap;gap:24px 64px;align-items:baseline;padding:48px 0 8px}
.intro p{flex:1 1 320px;margin:0;max-width:520px}
/* archive */
.layout{display:grid;grid-template-columns:220px 1fr;gap:32px 48px;align-items:start;padding-top:32px}
.layout > *{min-width:0}
.rail .grp{margin:0 0 22px}
.rail h3{margin:0 0 8px;color:var(--rust)}
.results{border-top:1px solid var(--ink)}
@media (max-width:760px){
  .layout{grid-template-columns:1fr;gap:16px;padding-top:16px}
  .rail{display:flex;gap:0 24px;overflow-x:auto;margin-right:-20px;padding-bottom:6px}
  .rail .grp{display:flex;align-items:center;gap:10px;flex:none;margin:0}
  .rail h3{margin:0}
  .rail .chips{flex-wrap:nowrap}
  .rail .chip,.rail .chips .none{white-space:nowrap}
}
/* category, cuisine, season, tag pages */
.cats .tagbox{flex:2 1 420px;margin-top:0}
/* recipe */
.recno{display:flex;align-items:center;gap:12px;margin:0 0 14px;color:var(--olive)}
.qr a,.source a{overflow-wrap:normal;word-break:normal}
.nw{white-space:nowrap}
.group li .q{flex-basis:110px}
@media (max-width:900px){
  .cols aside{display:contents}
  .cols .box{order:1}.cols section{order:2}.cols .source{order:3}.cols .downloads{order:4}.cols .qr{order:5}
  .cols .source,.cols .downloads,.cols .qr{margin-top:0}
}
@media (max-width:760px){.cols .qr{display:none}}
.title .pic{display:block;box-sizing:border-box;flex:0 1 340px;width:340px;max-width:100%;height:auto;aspect-ratio:3/2;object-fit:cover;object-position:50% 55%;border:1px solid var(--ink)}
.pickline{color:var(--rust)}
.pickline a,.pickline span:not(.lbl){font-size:22px;font-style:italic;color:var(--rust)}
.pickline .lbl + a{margin-right:14px}
@media (max-width:760px){.pickline a{display:inline-flex;align-items:center;min-height:44px}}
/* search */
.qhead{padding:44px 0 0}
.qhead h1{margin:0 0 22px}
.qform{display:flex;flex-wrap:wrap;align-items:flex-end;gap:10px 12px;max-width:760px;margin:0}
.qform label{flex:1 1 100%;color:var(--olive)}
.qform input{flex:1 1 280px;min-width:0;height:60px;border:0;border-bottom:2px solid var(--ink);border-radius:0;background:transparent;padding:0 4px;font:30px 'Bodoni Moda',serif;color:var(--ink)}
.qform .primary{min-height:56px;padding:0 22px}
.qhead + .count{margin-top:26px}
.row .hit{margin:10px 0 0;font-size:16px;max-width:560px}
.row .hit b{font-weight:600;color:var(--olive)}
.nothing{padding:30px 0 0;max-width:640px}
.nothing h2{margin:0 0 12px;font-style:italic}
.nothing p{margin:0 0 10px}
.blank{height:120px;margin-top:18px;background:repeating-linear-gradient(to bottom,transparent 0,transparent 39px,rgba(43,42,37,.28) 39px,rgba(43,42,37,.28) 40px)}
.related{margin:0 0 22px}
.related[hidden] + .cats{margin-top:22px}
@media (max-width:760px){.qform input{font-size:24px}}
/* about */
.about{display:flex;flex-wrap:wrap;gap:32px 64px;align-items:flex-end;padding:44px 0 8px}
.about .text{flex:1 1 480px}
.about h1{margin:0 0 20px}
.about .lede{margin:0;font-size:20px;max-width:600px}
.about figure{flex:0 1 340px;margin:0}
.about figure svg{display:block;width:100%;height:auto}
.prose{max-width:680px}
.prose p{margin:0 0 14px}
@media (max-width:760px){.about .lede{font-size:18px}}
/* added for the generator (no mockup rule): a real photo in a recipe row crops like the title photo */
.row img.ph{object-fit:cover}

.scale[hidden]{display:none} /* shown by site.js */
/* print rules for card and book are appended by task 4.1 */

/* ===== print: card = two 6.5 x 4.5in faces (6x4 trim + 1/4in bleed); book = one 8.5 x 11in sheet =====
   Ported from Card.dc.html / Book.dc.html. Every rule is scoped under .face or .sheet and resets what the
   site rules above (and the phone query, which matches the 624px-wide card) would otherwise leak in.
   The content box of .face / .sheet is the safe area; pdf.py's fit check sets --fs and --lh. */
.face{position:relative;width:6.5in;height:4.5in;box-sizing:border-box;padding:48px;background:#f7f4ea;color:#2b2a25;font-family:'Lora',Georgia,serif;font-size:var(--fs,13.4px);line-height:var(--lh,18px);overflow:hidden}
.face + .face{break-before:page}
.face p,.face h1,.face h2,.face ul,.face ol{margin:0;padding:0}
.face ul,.face ol{list-style:none}
.face .lbl{font-family:'Josefin Sans',sans-serif;text-transform:uppercase;letter-spacing:.12em;font-size:13.3px;font-weight:600}
.face .disp{font-family:'Bodoni Moda',serif;font-weight:400;font-style:normal}
.face .gingham{display:block;width:100%;height:6px}
.face .num{display:inline-flex;align-items:center;justify-content:center;box-sizing:border-box;min-width:18px;height:18px;padding:0 4px;border-radius:999px;background:#3d5a3a;color:#f7f4ea;font-family:'Bodoni Moda',serif;font-size:13.4px;line-height:1}
.face .ruled{background:repeating-linear-gradient(to bottom,transparent 0,transparent calc(var(--lh,18px) - 1px),rgba(43,42,37,.4) calc(var(--lh,18px) - 1px),rgba(43,42,37,.4) var(--lh,18px))}
.face .ghead{color:#3d5a3a;display:flex;align-items:center;gap:6px}
.face .ghead svg{flex:none}
.face .steps li{display:grid;grid-template-columns:18px 1fr;gap:8px;align-items:start;padding:0;border:0}
.face .steps .num{margin-bottom:calc(var(--lh,18px) - 18px)}
.face.front{padding-right:96px}
.face .trow{display:flex;align-items:center;justify-content:space-between;gap:8px;padding-top:5px}
.face .chead h1{font-size:23px;line-height:28px}
.face .no{flex:none;display:flex;align-items:center;gap:4px;color:#3d5a3a}
.face .no .num{min-width:22px;height:22px;padding:0 6px;font-size:15px}
.face .kitchen{display:flex;align-items:baseline;gap:10px;margin-top:2px;height:24px}
.face .kitchen .line{flex:0 0 220px;border-bottom:1px solid #2b2a25;padding:0 6px}
.face .hand{display:inline-block;font-family:'Nothing You Could Do',cursive;font-size:19px;line-height:22px;color:#3d5a3a;transform:rotate(-2deg)}
.face .kitchen.pick{display:block;height:auto;margin-left:0;white-space:normal;font-size:14px;line-height:24px;font-style:italic;color:#a0522d}
.face cite{font-style:normal}
.face .facts{display:block;margin-top:4px;border:0}
.face .facts b{color:#3d5a3a;margin-right:4px;line-height:1}
.face.front .gingham{margin:8px 0 6px}
.face.front .ruled{height:234px}
.face .ing{columns:2;column-gap:16px}
.face .ing li{break-inside:avoid}
.face .ing .ghead{break-after:avoid}
.face .tab{position:absolute;top:64px;right:0;display:block;box-sizing:content-box;width:76px;height:128px;padding:0;border-radius:10px 0 0 10px;background:#3d5a3a;color:#f7f4ea;writing-mode:horizontal-tb;text-decoration:none}
.face .tab span{position:absolute;left:10px;top:50%;transform:translateY(-50%);writing-mode:vertical-rl;line-height:16px}
.face.back .chead{display:flex;align-items:baseline;justify-content:space-between;height:24px}
.face.back .chead h2{font-size:20px;line-height:24px;white-space:nowrap}
.face .chead .by{font-style:italic;color:#a0522d;font-size:14px}
.face.back .gingham{margin:8px 0}
.face.back .ruled{height:216px;display:flex;flex-direction:column}
.face .notes b{font-family:'Josefin Sans',sans-serif;text-transform:uppercase;letter-spacing:.12em;font-size:13.3px;font-weight:600;color:#3d5a3a;margin-right:6px}
.face .foot{display:block;padding:0;margin-top:auto;font-style:italic;color:#a0522d}
.face .qr{position:absolute;left:48px;bottom:48px;width:68px;height:68px;display:block;margin:0}
.face .qr path{stroke:#2b2a25}
.face .sig{position:absolute;right:48px;bottom:48px;text-align:right}
.face .sig .disp{font-size:19px;font-style:italic;line-height:30px}

.sheet{position:relative;width:8.5in;height:11in;box-sizing:border-box;padding:.6in .6in .6in .85in;background:#f7f4ea;color:#2b2a25;font-family:'Lora',Georgia,serif;font-size:var(--fs,11pt);line-height:var(--lh,19.5px);overflow:hidden;display:flex;flex-direction:column;hyphens:auto}
.sheet p,.sheet h1,.sheet h2,.sheet ul,.sheet ol{margin:0;padding:0}
.sheet .lbl{font-family:'Josefin Sans',sans-serif;text-transform:uppercase;letter-spacing:.14em;font-size:10.5px;font-weight:600}
.sheet .disp{font-family:'Bodoni Moda',serif;font-weight:400;font-style:normal}
.sheet .gingham{display:block;width:100%;height:6px;margin:3px 0 0}
.sheet .hand{display:inline-block;font-family:'Nothing You Could Do',cursive;color:#3d5a3a;transform:rotate(-2deg)}
.sheet .num{display:inline-flex;align-items:center;justify-content:center;box-sizing:border-box;border-radius:999px;background:#3d5a3a;color:#f7f4ea;font-family:'Bodoni Moda',serif;line-height:1;flex:none}
.sheet .run{display:flex;justify-content:space-between;align-items:center;padding-bottom:7px;border-bottom:1px solid rgba(43,42,37,.4);color:#3d5a3a}
.sheet .run .no{display:flex;align-items:center;gap:8px}
.sheet .run .num{min-width:20px;height:20px;padding:0 .4em;font-size:12px}
.sheet .run .dot{color:#a0522d;margin:0 6px}
.sheet .head{display:grid;grid-template-columns:1fr 204px;gap:24px;align-items:end;padding:18px 0 16px}
.sheet .head h1{font-size:42px;line-height:1;margin-bottom:4px}
.sheet .head .by{font-size:17px;font-style:italic;color:#a0522d}
.sheet cite{font-style:normal}
.sheet .kitchen{display:flex;align-items:baseline;gap:12px;margin-top:6px;white-space:nowrap}
.sheet .kitchen .line{flex:0 1 230px;border-bottom:1px solid #2b2a25;padding:0 8px 1px}
.sheet .kitchen .hand{font-size:21px;line-height:24px}
.sheet .src{margin-top:8px;font-size:10pt;line-height:15px;hyphens:manual}
.sheet .src .lbl{color:#a0522d;margin-right:8px}
.sheet .src i{color:#2b2a25}
.sheet .photo{display:block;width:204px;height:136px;object-fit:cover;object-position:50% 60%;border:1px solid #2b2a25;box-sizing:border-box}
.sheet .facts{display:flex;flex-wrap:nowrap;border-top:1px solid #2b2a25;border-bottom:1px solid #2b2a25}
.sheet .facts div{flex:1 1 0;padding:6px 14px 5px;border-right:1px solid rgba(43,42,37,.28)}
.sheet .facts div:first-child{padding-left:0}
.sheet .facts div:last-child{border-right:0;flex-grow:1.6}
.sheet .facts .k{display:block;margin:0;color:#3d5a3a;font-size:9.5px;line-height:14px}
.sheet .facts .v{font-family:'Bodoni Moda',serif;font-size:20px;line-height:24px}
.sheet .facts .v small{font-family:'Lora',Georgia,serif;font-size:12px;font-style:italic}
.sheet .body{flex:1;display:grid;grid-template-columns:196px 1fr;gap:0 24px;padding-top:16px;min-height:0}
.sheet .col{display:flex;flex-direction:column;min-height:0}
.sheet .ing h2{display:flex;align-items:center;gap:7px;color:#3d5a3a;padding-bottom:3px;border-bottom:1px solid #2b2a25}
.sheet .ing h2 + ul{margin-bottom:14px}
.sheet .ing li{list-style:none;padding:3px 0 2px;border-bottom:1px solid rgba(43,42,37,.28);line-height:calc(var(--lh,19.5px) - 1.5px);hyphens:manual}
.sheet .ing .q{font-family:'Bodoni Moda',serif;font-weight:600}
.sheet .left{border-right:1px solid rgba(43,42,37,.28);padding-right:16px;margin-right:-16px}
.sheet .steps{list-style:none}
.sheet .steps li{display:grid;grid-template-columns:22px 1fr;gap:12px;padding:0 0 6px;border:0}
.sheet .steps .num{min-width:0;width:22px;height:22px;padding:0;font-size:14px;margin-top:-1px}
.sheet .sec{display:flex;align-items:center;gap:10px;margin:0 0 9px;color:#3d5a3a}
.sheet .sec h2{line-height:21px}
.sheet .sec .rule{flex:1;height:1px;background:rgba(43,42,37,.28)}
.sheet .notes{margin-top:10px}
.sheet .notes p + p{margin-top:6px}
.sheet div.qr{margin:auto 0 0;display:flex;align-items:flex-end;gap:10px}
.sheet .qr svg{width:70px;height:70px;display:block;flex:none;margin:0}
.sheet .qr path{stroke:#2b2a25}
.sheet .qr p{font-size:10pt;line-height:14px;hyphens:manual}
.sheet .qr .lbl{display:block;color:#3d5a3a;font-size:9.5px;margin-bottom:2px}
.sheet .sig{margin-top:auto;display:flex;align-items:baseline;justify-content:space-between;gap:16px;border-top:1px solid rgba(43,42,37,.28);padding-top:6px}
.sheet .sig .disp{font-size:21px;font-style:italic;line-height:26px;text-align:right}

/* added: metadata, print, a11y */
.skip{position:absolute;left:8px;top:-80px;z-index:10;padding:12px 18px;background:#f7f4ea;color:#3d5a3a;border:2px solid #3d5a3a;font:600 13px 'Josefin Sans',sans-serif;letter-spacing:.12em;text-transform:uppercase}
.skip:focus{top:8px}
@media (max-width:760px){
  .tabs{flex-wrap:nowrap;overflow-x:auto}
  .tab{flex:1 0 auto;white-space:nowrap;padding:0 14px}
  .tab[aria-current]{scroll-initial-target:nearest} /* current tab starts in view where supported */
  .row .tags{display:none}
}
@media print{
  .page .comb,.page .tabs,.page .mast .nav,.page .mast .search,.page .downloads,.page .qr,.page .scale,.skip{display:none !important}
  .page{padding:0;background:#fff}
  .page,.page *{color:#000 !important}
  .page .num{background:none;box-shadow:inset 0 0 0 1px #000}
}

/* spacing review (docs/spacing-review.md; numbers refer to its findings) */
/* 1 card ruling: Chromium rasterises any gradient background into the PDF at ~1 px per CSS px, and the 1px
   rules of the repeating gradient aliased away (every other rule missing on the card back, uneven pitch on the
   front). The rules are now 1px box-shadows of a hairline pseudo-element: vector, crisp and exactly one per line.
   15 rules cover the 234px front at the 16px minimum leading; overflow clips the spares */
.face .ruled{position:relative;z-index:0;overflow:hidden;background:none}
.face .ruled::before{content:"";position:absolute;z-index:-1;top:-1px;left:0;right:0;height:1px;--rl:rgba(43,42,37,.4);box-shadow:0 calc(1*var(--lh,18px)) var(--rl),0 calc(2*var(--lh,18px)) var(--rl),0 calc(3*var(--lh,18px)) var(--rl),0 calc(4*var(--lh,18px)) var(--rl),0 calc(5*var(--lh,18px)) var(--rl),0 calc(6*var(--lh,18px)) var(--rl),0 calc(7*var(--lh,18px)) var(--rl),0 calc(8*var(--lh,18px)) var(--rl),0 calc(9*var(--lh,18px)) var(--rl),0 calc(10*var(--lh,18px)) var(--rl),0 calc(11*var(--lh,18px)) var(--rl),0 calc(12*var(--lh,18px)) var(--rl),0 calc(13*var(--lh,18px)) var(--rl),0 calc(14*var(--lh,18px)) var(--rl),0 calc(15*var(--lh,18px)) var(--rl)}
/* 2 ingredient quantity and item share a baseline */
.page .group li{align-items:baseline}
/* 3 facts: the category cell gets the extra width (as in the book) so it holds one line where it can; its 22px
   value is dropped 7px so its first baseline meets the 30px values'; between 901 and 1100px a 2x2 grid replaces
   the 3+1 wrap that left the category alone on a full-width row */
.page .facts div{flex-basis:160px}
.page .facts div:last-child{flex-grow:1.6}
@media (min-width:901px){.page .facts div:last-child .v{display:block;padding-top:7px}}
@media (max-width:1100px){
  .page .facts{display:grid;grid-template-columns:1fr 1fr}
  .page .facts div{border-right:0}
  .page .facts div:nth-child(odd){border-right:1px solid var(--rule)}
  .page .facts div:nth-child(-n+2){border-bottom:1px solid var(--rule)}
}
/* 4 dot separators: centred in the gap, wrapped lines flush left, no dot after the Tags/Related label */
.page .tags a,.page .row .tags a{padding-left:20px;padding-right:0;margin:0 20px 0 -20px}
.page .tags a::before{left:9.2px;transform:translateX(-50%)}
.page .row .tags{gap:0}
.page .tags > span + a{margin-left:-10px}
.page .tags > span + a::before{content:none}
.page .meta > span{margin-right:14px}
.page .meta > span::before{left:6.2px;transform:translateX(-50%)}
/* 5 recipe row: the tags' tap padding no longer pads the row bottom */
.page .row .tags{margin-bottom:-8px}
/* 6 phone row: active/total labels sit next to their values */
.page .row .times{justify-content:start}
/* 7 ingredients box: no doubled rule at the bottom; bottom space = side padding */
.page .box{padding-bottom:14px}
.page .box .group:last-child li:last-child{border-bottom:0}
/* 8 stepper as tall as the unit toggle (UA input padding made it 48 vs 46) */
.page .step input{box-sizing:border-box;padding:0}
/* 9 direction steps: first line centred on the numeral */
.page .steps li p{padding-top:10px}
/* 10 page heads start at one height */
.page .title,.page .qhead,.page .about{padding-top:48px}
/* 11 about: lede to body text = the head's own gap (the template sets 56px inline) */
.page .about + .prose{margin-top:24px !important}
/* 12 short pages: the paper reaches the bottom of the window */
@media screen{.page{min-height:100vh}}
/* 13 archive rail: "none yet" entries line up with the chip labels */
.page .chips .none{padding:0 13px}
/* 14 category boxes: same inner space below the last row as above the first */
.page .cat,.page .tagbox{padding-bottom:8px}
/* 15 recipe QR: modules flush with the aside's left edge (the 4-module quiet zone is 12px) */
.page .cols .qr svg{margin:-12px -6px -12px -12px}
/* 16 one heading-to-content gap */
.page .cols .sec{margin-bottom:8px}
/* 17 servings row: equal space above and below the controls */
.page .scale{padding-bottom:16px}
/* 18 phone index tabs keep the site's label tracking */
@media (max-width:760px){.page .tab{letter-spacing:.12em}}
/* 19 book: the QR caption's last baseline meets the signature's (it sat 4.5px lower); a nudge, so the fit is untouched */
.sheet div.qr p{position:relative;top:-4.5px}

/* --- leaf band: footer divider from the original Mid-century mockup (meltedpot/leafband.py) --- */
.band{display:block;width:100%;height:28px}
@media print{.page .band{display:none}}

/* mobile usability review (docs/mobile-usability.md; F-numbers refer to its findings) */
/* F20 landscape notch bars and overscroll show paper, not white */
html{background:#f7f4ea}
/* F3 archive: the rail sits above the results until the 4-column row fits beside it (it overflowed at 761-1060px) */
@media (max-width:1060px){.page .layout{grid-template-columns:1fr;gap:16px}}
/* F14 quantities readable at arm's length on phones; scaled quantities and the note in rust (site.js sets .is-scaled) */
@media (max-width:760px){.page .group li .q{font-size:21px;font-weight:600}}
.page .box.is-scaled .q,.page .scale .scaled{color:var(--rust)}
/* scaling flags (site.js): salt and spices past 1.5×, leavening past 2× */
.page .group li .flag{margin-left:8px;color:var(--rust);align-self:center}
@media print{.page .group li .flag{display:none}}
/* F15 a − and + you can see */
.page .step button{font:600 24px/1 'Josefin Sans',sans-serif}
/* F16 F17 touch: no sticky hover fill, press feedback on :active, no double-tap zoom on repeated taps */
.page .step button,.page .units button{touch-action:manipulation}
@media (hover:none){.page .step button:hover{background:transparent;color:var(--ink)}}
.page .step button:active{background:var(--olive);color:var(--paper)}
/* F18 phone index tabs: fade the clipped edges so the row reads as scrollable (the 20px padding lets end tabs clear the fade) */
@media (max-width:760px){.page .tabs{-webkit-mask-image:linear-gradient(to right,transparent,#000 20px,#000 calc(100% - 20px),transparent);mask-image:linear-gradient(to right,transparent,#000 20px,#000 calc(100% - 20px),transparent);scrollbar-width:none}}
/* F19 the whole recipe row opens the recipe (photo and times too); tag links stay above the overlay */
.page .row{position:relative}
.page .row h3 a::after{content:"";position:absolute;inset:0}
.page .row .tags a{z-index:1}