@import url("https://fonts.googleapis.com/css2?family=Permanent+Marker&family=Caveat:wght@400;700&family=Karla:ital,wght@0,400;0,500;0,700;1,400&display=swap");

:root{
  --ink:#2a251d; --soft:#6f665a; --faint:#a99f8c;
  --line:#e0d6c1; --accent:#b23b2e; --accent-dark:#8f2f25;
  --paper:#fffdf7; --kraft:#d8c7a3;
  --bg:#d9c8a6;
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  margin:0; padding:30px 16px 90px;
  background:var(--bg);
  background-image:
    radial-gradient(circle at 20% -5%,#e7dabb,transparent 55%),
    radial-gradient(circle at 85% 8%,#e2d3af,transparent 45%),
    url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='60' height='60'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2'/></filter><rect width='60' height='60' filter='url(%23n)' opacity='0.05'/></svg>");
  color:var(--ink);
  font-family:"Karla","Helvetica Neue",Arial,sans-serif;
  font-size:18px; line-height:1.55;
}
.book{max-width:900px;margin:0 auto}
a{color:inherit}

.topbar{max-width:900px;margin:0 auto 10px;font-size:.82rem;letter-spacing:.08em;text-transform:uppercase}
.topbar a{color:#5c5138;text-decoration:none;margin-right:18px}
.topbar a:hover{color:var(--accent-dark)}

/* white printout sheet, punched with binder holes on the left */
.sheet{
  position:relative; background:var(--paper);
  border:1px solid #ece3d0; border-radius:3px;
  margin:26px 0; padding:34px 40px 30px 64px;
  box-shadow:0 12px 30px rgba(70,55,25,.20);
  background-image:
    radial-gradient(circle at 30px 64px, var(--bg) 7px, rgba(0,0,0,.16) 8px, transparent 9px),
    radial-gradient(circle at 30px 50%, var(--bg) 7px, rgba(0,0,0,.16) 8px, transparent 9px),
    radial-gradient(circle at 30px calc(100% - 64px), var(--bg) 7px, rgba(0,0,0,.16) 8px, transparent 9px);
  background-repeat:no-repeat;
}
/* the red binder margin rule */
.sheet::before{content:"";position:absolute;top:0;bottom:0;left:52px;width:1px;
  background:rgba(178,59,46,.35)}
@media(max-width:620px){.sheet{padding:26px 20px 24px 52px}
  .sheet::before{left:44px}
  .sheet{background-image:
    radial-gradient(circle at 24px 54px, var(--bg) 6px, rgba(0,0,0,.16) 7px, transparent 8px),
    radial-gradient(circle at 24px 50%, var(--bg) 6px, rgba(0,0,0,.16) 7px, transparent 8px),
    radial-gradient(circle at 24px calc(100% - 54px), var(--bg) 6px, rgba(0,0,0,.16) 7px, transparent 8px)}}

/* masthead */
.masthead{padding-top:44px;padding-bottom:38px;overflow:hidden}
.tab{position:absolute;top:-1px;right:40px;background:var(--accent);color:#fff;
  font-family:"Permanent Marker",cursive;font-size:1.15rem;letter-spacing:.02em;
  padding:12px 20px 10px;border-radius:0 0 6px 6px;box-shadow:0 6px 14px rgba(90,25,18,.3);
  transform:rotate(.5deg)}
.mh-grid{display:grid;grid-template-columns:minmax(180px,230px) 1fr;gap:40px;align-items:start}
@media(max-width:640px){.mh-grid{grid-template-columns:1fr;gap:24px}}
.cover-col{text-align:center}
.cover-col img{width:100%;max-width:230px;height:auto;display:block;margin:0 auto;
  border:1px solid #d7cbb1;box-shadow:0 8px 22px rgba(60,45,20,.28);transform:rotate(-1.4deg)}
.mh-title{font-family:"Permanent Marker",cursive;font-size:2.9rem;line-height:1;margin:.1em 0 0;color:var(--ink)}
.mh-sub{font-family:"Caveat",cursive;font-size:1.5rem;color:var(--accent-dark);margin:.15em 0 .8em}
.mh-count{font-size:.72rem;letter-spacing:.24em;text-transform:uppercase;color:var(--soft);margin:0 0 1em}
.toc{margin:0;padding:0;list-style:none;columns:2;column-gap:34px}
@media(max-width:560px){.toc{columns:1}}
.toc li{break-inside:avoid;padding:.32em 0;border-bottom:1px dotted var(--line)}
.toc a{text-decoration:none;display:block}
.toc a:hover{color:var(--accent-dark)}

/* recipe */
.dish{font-family:"Permanent Marker",cursive;font-weight:400;font-size:1.7rem;
  line-height:1.15;margin:0 0 2px;color:var(--ink)}
@media(max-width:620px){.dish{font-size:1.4rem}}
.attrib{font-family:"Caveat",cursive;font-size:1.25rem;color:var(--accent-dark);margin:0 0 6px}
.meta{font-size:.74rem;letter-spacing:.12em;text-transform:uppercase;color:var(--faint);margin:0 0 18px}
.meta .star{color:var(--accent);letter-spacing:0}

.scan{margin:0 0 22px}
.scan img{width:100%;height:auto;display:block;border:1px solid #e5dcc8;
  box-shadow:0 6px 16px rgba(60,45,20,.18)}
.scan figcaption{font-family:"Caveat",cursive;font-size:1.15rem;color:var(--soft);margin-top:6px;text-align:center}

.cols{display:grid;grid-template-columns:minmax(180px,36%) 1fr;gap:32px}
@media(max-width:620px){.cols{grid-template-columns:1fr;gap:18px}}

.ingredients h4,.method h4{font-family:"Caveat",cursive;font-weight:700;font-size:1.5rem;
  color:var(--accent-dark);margin:0 0 .3em}
.ingredients .serves{font-style:italic;color:var(--soft);margin:0 0 .5em;font-size:.95rem}
.ingredients .subhead{font-weight:700;color:var(--ink);margin:.7em 0 .1em;font-size:.95rem}
.ingredients ul{list-style:none;margin:0 0 .3em;padding:0}
.ingredients li{padding:.32em 0;border-bottom:1px solid var(--line);line-height:1.35;font-size:.97rem}
.method ol{margin:0;padding-left:1.3em}
.method li{margin:0 0 .6em;padding-left:.2em}
.method .note{color:var(--soft);font-size:.95rem;margin:.6em 0 0}
.extra{margin-top:20px}
.extra h4{font-family:"Caveat",cursive;font-weight:700;font-size:1.5rem;color:var(--accent-dark);margin:0 0 .2em}
.extra p{margin:.2em 0;color:var(--soft)}

.uncertain{color:var(--accent);font-size:.72em;vertical-align:super;cursor:help}
.links{margin-top:18px;font-size:.85rem;color:var(--soft)}
.links a{color:var(--accent-dark);margin-right:14px}
.also{text-align:center;margin-top:18px;font-size:.9rem;color:#5c5138;
  font-family:"Caveat",cursive;font-size:1.2rem}
.also a{color:var(--accent-dark)}

.pager{display:flex;justify-content:space-between;gap:20px;margin-top:26px;
  font-size:.88rem;line-height:1.3}
.pager a{color:var(--accent-dark);font-family:"Caveat",cursive;font-size:1.2rem;text-decoration:none;max-width:46%}
.pager a:hover{text-decoration:underline}
.pager .next{text-align:right;margin-left:auto}
@media(max-width:520px){.pager{font-size:.8rem}}
.backlink{text-align:center;margin-top:22px;font-size:.85rem}
.backlink a{color:var(--accent-dark);text-decoration:none;letter-spacing:.05em}
.backlink a:hover{text-decoration:underline}
footer{text-align:center;color:#6a5f47;font-size:.82rem;margin-top:48px;font-style:italic}