/*
Theme Name: 00freerecipes
Description: Historical recipes with the original text beside a modern version. Classic theme, no build step.
Version: 3.0.0
Requires at least: 6.0
Requires PHP: 8.0
Text Domain: freerecipes
*/

:root{
  --paper:#fff7f8;--paper2:#ffe6ea;--pop:#ffd54a;
  --side:#fff;--pattern:url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' width='240' height='240' viewBox='0 0 240 240'><g fill='none' stroke='%23dcdcdc' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><g transform='translate(18 14) rotate(-8 30 30)'><path d='M12 54V44a11 11 0 0 1 3-21 14 14 0 0 1 28-3 11 11 0 0 1 6 24v10z M12 48h37'/></g><g transform='translate(128 10) rotate(12 30 30)'><path d='M30 56V36 M30 36C14 30 14 4 30 4s16 26 0 32 M30 36C24 28 24 8 30 4 M30 36c6-8 6-28 0-32 M24 52h12'/></g><g transform='translate(68 84) rotate(-6 30 30)'><path d='M10 26h40v20a6 6 0 0 1-6 6H16a6 6 0 0 1-6-6z M4 30h6 M50 30h6 M14 20h32 M26 14h8'/></g><g transform='translate(156 92) rotate(14 30 30)'><path d='M26 4c12 0 20 18 20 30a20 20 0 0 1-40 0C6 22 14 4 26 4z'/></g><g transform='translate(14 134) rotate(-14 30 30)'><path d='M30 4c-8 0-12 8-12 16s4 14 12 14 12-6 12-14S38 4 30 4z M30 34v22'/></g><g transform='translate(92 160) rotate(8 30 30)'><path d='M14 22h32a4 4 0 0 1 4 4v8a4 4 0 0 1-4 4H14a4 4 0 0 1-4-4v-8a4 4 0 0 1 4-4z M10 30H2 M50 30h8'/></g><g transform='translate(182 160) rotate(-10 30 30)'><path d='M18 4v14a8 8 0 0 0 16 0V4 M26 4v22 M26 26v30'/></g></g></svg>");
  --ink:#1b1013;--soft:#46343a;--muted:#6b4f57;
  --rule:#f0c4cc;--red:#c8102e;
  --font-display:"Bricolage Grotesque",system-ui,sans-serif;
  --font-body:"Instrument Sans",system-ui,sans-serif;
  --font-old:"Libre Caslon Text",Georgia,serif;
  --step--1:.875rem;--step-0:1.0625rem;--step-1:1.1875rem;--step-2:1.75rem;--step-3:2.5rem;
  --space-1:.25rem;--space-2:.5rem;--space-3:.75rem;--space-4:1rem;--space-5:1.5rem;--space-6:2.5rem;--space-7:4.5rem;
  --tap:2.75rem;--focus:3px solid var(--red);
  --motion-fast:140ms;
}
@media (min-width:80em){:root{--step-0:1.125rem;--step-1:1.25rem;--step-2:2.125rem;--step-3:3rem}}
@media (prefers-color-scheme:dark){:root{
  --paper:#2a1519;--paper2:#381d23;--pop:#381d23;--side:#1f1114;--pattern:url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' width='240' height='240' viewBox='0 0 240 240'><g fill='none' stroke='%233d262b' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><g transform='translate(18 14) rotate(-8 30 30)'><path d='M12 54V44a11 11 0 0 1 3-21 14 14 0 0 1 28-3 11 11 0 0 1 6 24v10z M12 48h37'/></g><g transform='translate(128 10) rotate(12 30 30)'><path d='M30 56V36 M30 36C14 30 14 4 30 4s16 26 0 32 M30 36C24 28 24 8 30 4 M30 36c6-8 6-28 0-32 M24 52h12'/></g><g transform='translate(68 84) rotate(-6 30 30)'><path d='M10 26h40v20a6 6 0 0 1-6 6H16a6 6 0 0 1-6-6z M4 30h6 M50 30h6 M14 20h32 M26 14h8'/></g><g transform='translate(156 92) rotate(14 30 30)'><path d='M26 4c12 0 20 18 20 30a20 20 0 0 1-40 0C6 22 14 4 26 4z'/></g><g transform='translate(14 134) rotate(-14 30 30)'><path d='M30 4c-8 0-12 8-12 16s4 14 12 14 12-6 12-14S38 4 30 4z M30 34v22'/></g><g transform='translate(92 160) rotate(8 30 30)'><path d='M14 22h32a4 4 0 0 1 4 4v8a4 4 0 0 1-4 4H14a4 4 0 0 1-4-4v-8a4 4 0 0 1 4-4z M10 30H2 M50 30h8'/></g><g transform='translate(182 160) rotate(-10 30 30)'><path d='M18 4v14a8 8 0 0 0 16 0V4 M26 4v22 M26 26v30'/></g></g></svg>");--ink:#fff1f3;--soft:#f0cdd3;--muted:#d9a9b2;--rule:#5c3640;--red:#ff8a9a}}
@media (prefers-reduced-motion:reduce){:root{--motion-fast:0ms}}

*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{margin:0;background:var(--side) var(--pattern);color:var(--ink);font:var(--step-0)/1.55 var(--font-body)}
a{color:inherit}
.page{max-width:80rem;margin:0 auto;background:var(--paper);border-inline:1px solid var(--rule)}
:focus-visible{outline:var(--focus);outline-offset:3px}
.skip{position:absolute;left:var(--space-4);top:-4rem;background:var(--ink);color:var(--paper);padding:var(--space-3) var(--space-4);z-index:10;font-weight:600}
.skip:focus{top:var(--space-2)}
.vh{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.wrap{max-width:80rem;margin:0 auto;padding:0 var(--space-4)}
@media (min-width:48em){.wrap{padding:0 var(--space-6)}}
.display{font-family:var(--font-display);font-weight:700;letter-spacing:-.025em;line-height:1.02;margin:0}
.label{font:500 .875rem/1.4 var(--font-body);color:var(--muted)}

/* Header and footer */
.site-header .wrap{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;min-height:4.5rem}
.wordmark{display:inline-flex;align-items:center;min-height:var(--tap);font-size:1.5rem;font-weight:800;text-decoration:none;font-stretch:80%;letter-spacing:-.03em}
.nav{display:flex;flex-wrap:wrap;gap:0 var(--space-2);list-style:none;margin:0;padding:0}
.nav a{display:inline-flex;align-items:center;min-height:var(--tap);padding:0 var(--space-2);text-decoration:none;font-weight:500;border-bottom:2px solid transparent}
@media (min-width:48em){.nav{gap:0 var(--space-4)}}
.nav a:hover{border-bottom-color:var(--ink)}
.nav a[aria-current="page"]{border-bottom-color:var(--red)}
.site-footer{margin-top:var(--space-7);padding:var(--space-6) 0 var(--space-5);background:var(--ink);color:var(--paper)}
.site-footer .wrap{display:flex;flex-wrap:wrap;align-items:flex-end;gap:var(--space-3) var(--space-5)}
.site-footer .wordmark{margin-right:auto;font-size:clamp(2.5rem,9vw,6rem);line-height:1;font-stretch:80%}
.site-footer a{display:inline-flex;align-items:center;min-height:var(--tap)}
.site-footer :focus-visible{outline-color:var(--paper)}

/* Controls */
.btn{min-height:var(--tap);min-width:var(--tap);display:inline-flex;align-items:center;justify-content:center;padding:0 var(--space-5);border:2px solid var(--ink);background:transparent;color:var(--ink);font:inherit;font-weight:600;text-decoration:none;cursor:pointer;transition:background var(--motion-fast),color var(--motion-fast),border-color var(--motion-fast)}
.btn:hover{background:var(--ink);color:var(--paper)}
.btn--solid{background:var(--ink);color:var(--paper)}
.btn--solid:hover{background:var(--red);border-color:var(--red);color:var(--paper)}
.field{display:block;font-weight:600;margin-bottom:var(--space-2)}
.input{width:100%;min-height:3.5rem;padding:0 var(--space-4);border:2px solid var(--ink);border-radius:0;background:var(--paper);color:var(--ink);font:500 1.375rem/1.2 var(--font-body)}
.input::placeholder{color:var(--muted)}
.input:focus-visible{outline:var(--focus);outline-offset:2px;border-color:var(--red)}

/* Home: title wall */
.intro{padding-top:var(--space-6)}
.intro__lede{margin:0 0 var(--space-5);max-width:36rem;font-size:var(--step-1);color:var(--soft)}
.finder{margin-top:var(--space-5);padding:var(--space-5);background:var(--pop);border:2px solid var(--ink)}
.finder .field{margin-bottom:var(--space-3);font:700 var(--step-2)/1.1 var(--font-display);letter-spacing:-.02em}
.finder__row{display:flex;flex-wrap:wrap;gap:var(--space-3)}
.finder__row .input{flex:1 1 12rem;width:auto;min-width:0}
.finder__row .btn{min-height:3.5rem}
.finder__status{margin:var(--space-3) 0 0;min-height:1.5rem;color:var(--soft)}
.wall{list-style:none;margin:0;padding:0;font:600 clamp(1.625rem,4.4vw,3.75rem)/1.04 var(--font-display);font-stretch:78%;letter-spacing:-.025em}
.wall li{display:inline}
.wall li::after{content:" / ";color:var(--red);font-weight:400}
.wall li:last-child::after{content:"."}
.wall a{text-decoration:none;transition:opacity var(--motion-fast)}
.wall a:hover,.wall a:focus-visible{color:var(--red)}
.wall li[data-dim] a{opacity:.16}
.wall li[data-dim] a:focus-visible,.wall li[data-dim] a:hover{opacity:1}
.peek{position:fixed;right:var(--space-5);bottom:var(--space-5);width:16rem;margin:0;pointer-events:none;opacity:0;transition:opacity var(--motion-fast);z-index:4;background:var(--paper);padding:var(--space-2)}
.peek[data-on]{opacity:1}
.peek img{display:block;width:100%;height:auto;aspect-ratio:4/3;object-fit:cover}
.peek figcaption{margin-top:var(--space-2);font-size:.75rem;color:var(--muted);line-height:1.35}
@media (max-width:63.99em){.peek{display:none}}

/* Home: sections */
.sec{margin-top:var(--space-7)}
.sec__head{display:flex;flex-wrap:wrap;align-items:baseline;justify-content:space-between;gap:var(--space-2) var(--space-5);border-top:2px solid var(--ink);padding-top:var(--space-3);margin-bottom:var(--space-5)}
.sec__title{font-size:var(--step-2)}
.sec__sub{margin:0;color:var(--soft)}
.sec__sub a,.more{font-weight:600}
.more{display:inline-flex;align-items:center;min-height:var(--tap)}
.duo{display:grid;gap:var(--space-5)}
@media (min-width:48em){.duo{grid-template-columns:repeat(2,minmax(0,1fr));gap:var(--space-6)}}
.duo__h{margin:0 0 var(--space-3);font:600 .9375rem/1.3 var(--font-body);color:var(--muted)}
.duo__old{border-left:4px solid var(--red);padding-left:var(--space-4)}
.duo__old blockquote{margin:0;font:1.1875rem/1.65 var(--font-old)}
.duo__new p{margin:0;font-size:var(--step-1);line-height:1.6}

.plates{list-style:none;margin:0;padding:0;display:grid;gap:var(--space-5)}
@media (min-width:48em){
  .plates{grid-template-columns:repeat(12,minmax(0,1fr));gap:var(--space-6) var(--space-5)}
  .plates li:nth-child(1){grid-column:1/8}
  .plates li:nth-child(2){grid-column:8/13;margin-top:var(--space-7)}
  .plates li:nth-child(n+3){grid-column:span 4}
  .plates li:nth-child(2) .plate__img{aspect-ratio:4/5}
}
.plate{display:block;text-decoration:none}
.plate__img,.plate img{display:block;width:100%;height:auto;aspect-ratio:3/2;object-fit:cover;background:var(--paper2)}
.plate h3{margin:var(--space-3) 0 var(--space-1);font:700 1.5rem/1.1 var(--font-display);letter-spacing:-.02em}
.plate:hover h3{color:var(--red)}
.plates+.caption{margin-top:var(--space-5)}

.books{list-style:none;margin:0;padding:0}
.book{display:flex;flex-wrap:wrap;align-items:baseline;justify-content:space-between;gap:var(--space-2) var(--space-5);padding:var(--space-4) 0;border-bottom:1px solid var(--ink);text-decoration:none}
.book__title{font:700 clamp(1.5rem,3.4vw,2.5rem)/1.1 var(--font-display);font-stretch:85%;letter-spacing:-.02em}
.book:hover .book__title{color:var(--red)}
.book .label{color:var(--soft)}

.cols{list-style:none;margin:0;padding:0;display:grid;gap:var(--space-5)}
@media (min-width:48em){.cols{grid-template-columns:repeat(3,minmax(0,1fr));gap:var(--space-6)}}
.col h3{font:700 var(--step-1)/1.15 var(--font-display);margin:0 0 var(--space-2)}
.col p{margin:0;color:var(--soft);max-width:26rem}

/* Archive */
.arch-head{padding-top:var(--space-6)}
.arch-head h1{font-size:clamp(2.5rem,8vw,5.5rem);font-stretch:78%;margin-bottom:var(--space-5)}
.cards{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:var(--space-5) var(--space-4);list-style:none;margin:0;padding:0}
@media (min-width:48em){.cards{grid-template-columns:repeat(3,minmax(0,1fr));gap:var(--space-6) var(--space-5)}}
@media (min-width:80em){.cards{grid-template-columns:repeat(4,minmax(0,1fr))}}
.card{display:block;text-decoration:none;color:inherit}
.card__img,.card img{display:block;width:100%;height:auto;aspect-ratio:4/3;object-fit:cover;background:var(--paper2)}
.card h3{font:700 1.25rem/1.1 var(--font-display);letter-spacing:-.015em;margin:var(--space-3) 0 var(--space-1)}
.card:hover h3{color:var(--red)}
.nav-links{display:flex;flex-wrap:wrap;gap:var(--space-2);margin-top:var(--space-6)}
.page-numbers{display:inline-flex;align-items:center;justify-content:center;min-height:var(--tap);min-width:var(--tap);padding:0 var(--space-3);border:2px solid var(--ink);font-weight:600;text-decoration:none}
a.page-numbers:hover,.page-numbers.current{background:var(--ink);color:var(--paper)}

/* Recipe page */
.title{font-size:clamp(2.25rem,6.5vw,4.5rem);font-stretch:80%;margin:0 0 var(--space-3)}
.dek{font-size:var(--step-1);color:var(--soft);margin:0 0 var(--space-4)}
.hero{margin:0}
.hero__img{display:block;width:100%;height:auto;aspect-ratio:4/3;object-fit:cover;background:var(--paper2)}
.hero figcaption,.caption{font-size:var(--step--1);font-style:italic;color:var(--muted);margin:var(--space-2) 0 0;line-height:1.4}
.disclosure{margin:0;padding:var(--space-3) 0;border-block:1px solid var(--ink);font-size:.9375rem;color:var(--soft)}
.disclosure strong{color:var(--red)}
.provenance{margin-top:var(--space-4)}
.provenance dl{margin:0;display:grid;grid-template-columns:8rem 1fr}
.provenance dt,.provenance dd{margin:0;padding:.55rem 0;border-bottom:1px solid var(--rule);font-size:.9375rem}
.provenance dt{font-weight:600;color:var(--muted)}
.top{display:grid;gap:var(--space-4);margin-top:var(--space-5)}
@media (min-width:48em){.top{grid-template-columns:minmax(0,1.1fr) minmax(0,1fr);gap:var(--space-6);align-items:start}}
.actions{display:flex;flex-wrap:wrap;gap:var(--space-3);margin-top:var(--space-4)}
.actions .btn[aria-pressed="true"]{background:var(--ink);color:var(--paper)}
.jump{position:sticky;top:0;z-index:5;display:flex;gap:var(--space-4);background:var(--paper);border-bottom:1px solid var(--ink);overflow-x:auto;margin-top:var(--space-5)}
.jump a{display:inline-flex;align-items:center;min-height:var(--tap);font-weight:600;text-decoration:none;white-space:nowrap}
.jump a:hover{color:var(--red)}
@media (min-width:64em){.jump{display:none}}
.section-title{font-size:var(--step-2);margin:var(--space-6) 0 var(--space-3);scroll-margin-top:4rem;border-top:2px solid var(--ink);padding-top:var(--space-3)}
.body__ing .section-title{margin-top:var(--space-6)}
@media (min-width:64em){.body{display:grid;grid-template-columns:21rem minmax(0,1fr);column-gap:var(--space-6);align-items:start}.body__ing{position:sticky;top:var(--space-4)}}
.ingredients{list-style:none;margin:0;padding:0}
.ingredient{display:flex;gap:var(--space-3);align-items:flex-start;min-height:var(--tap);padding:var(--space-2) 0;border-bottom:1px solid var(--rule);font-variant-numeric:tabular-nums}
.ingredient input{width:1.5rem;height:1.5rem;margin:.125rem 0 0;accent-color:var(--red);flex:none}
.ingredient__qty{font-weight:700;min-width:4.5rem;flex:none;padding-top:.125rem}
.ingredient input:checked~span:last-child{text-decoration:line-through;color:var(--muted)}
.scaler{display:flex;align-items:center;gap:var(--space-2);margin-bottom:var(--space-3)}
.scaler output{min-width:2.5rem;text-align:center;font:700 1.375rem var(--font-display)}
.steps{list-style:none;margin:0;padding:0;counter-reset:s}
.step{display:grid;grid-template-columns:3rem 1fr;gap:var(--space-3);padding:var(--space-4) 0;border-bottom:1px solid var(--rule);counter-increment:s}
.step::before{content:counter(s);font:700 2rem/1 var(--font-display);color:var(--red)}
.step p{margin:0 0 var(--space-2);font-size:var(--step-1);line-height:1.6}
.original summary{list-style:none;cursor:pointer;display:flex;align-items:center;min-height:var(--tap);font-size:.9375rem;padding:0 var(--space-4);border:2px solid var(--ink);width:fit-content;font-weight:600}
.original summary::-webkit-details-marker{display:none}
.original blockquote{margin:var(--space-2) 0 0;padding:var(--space-1) 0 var(--space-1) var(--space-4);border-left:4px solid var(--red);font:1.0625rem/1.65 var(--font-old);max-width:34rem}
div.original{background:var(--paper2);padding:var(--space-5)}
div.original blockquote{margin:0;max-width:42rem;font-size:1.125rem}
.safety{border:2px solid var(--red);padding:var(--space-3) var(--space-4);margin:var(--space-5) 0}
.safety .label{color:var(--red);font-weight:700}
.safety p{margin:var(--space-1) 0 0}
.disclosure--end{margin-top:var(--space-5)}
@media (min-width:80em){
  .parallel{display:grid;grid-template-columns:1fr 1fr;column-gap:var(--space-6)}
  .parallel .step{grid-column:1/-1;display:grid;grid-template-columns:subgrid;grid-template-rows:auto}
  .parallel .step::before{display:none}
  .parallel .step__body{display:contents}
  .parallel .original summary{display:none}
  .parallel .original blockquote{margin:0}
}

/* Pages */
.prose{max-width:40rem}
.prose p{margin:0 0 var(--space-4)}
.prose h2{font:700 var(--step-2)/1.1 var(--font-display);margin:var(--space-6) 0 var(--space-3)}
.sources{list-style:none;margin:var(--space-5) 0 0;padding:0;max-width:40rem}
.source{display:flex;flex-direction:column;gap:var(--space-1);padding:var(--space-4) 0;border-bottom:1px solid var(--ink)}
.source__title{font:700 var(--step-2)/1.1 var(--font-display)}
.source a{display:inline-flex;align-items:center;min-height:var(--tap)}

@media print{
  .site-header,.site-footer,.scaler,.skip,.jump,.actions,.peek{display:none}
  .top,.body{display:block}
  .hero__img{max-width:12cm}
  details.original summary{display:none}
  .step{break-inside:avoid}
  body{font-size:12pt;background:#fff;color:#000}
}