@import url("https://fonts.googleapis.com/css2?family=Pinyon+Script&family=EB+Garamond:ital,wght@0,400;0,500;1,400;1,500&display=swap");

:root{
  --red:#a32f2b; --red-soft:#bd6058; --gold:#9c7b3a;
  --cream:#fbf7ec; --paper:#fffdf6; --ink:#2c2620;
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  margin:0; padding:40px 16px 80px;
  background:#efe7d4;
  background-image:radial-gradient(circle at 50% 0,#f5eedd,#e7dcc3);
  color:var(--ink);
  font-family:"EB Garamond",Georgia,"Times New Roman",serif;
  font-size:18px; line-height:1.5;
}
.book{max-width:840px;margin:0 auto}

/* shared ornamental frame */
.frame{
  position:relative; background:var(--paper);
  border:2.5px solid var(--red); border-radius:18px;
  padding:34px 38px; margin:34px 0;
  box-shadow:0 10px 30px rgba(90,40,20,.18);
}
.frame::before{
  content:""; position:absolute; inset:7px;
  border:1px solid var(--red); border-radius:12px; pointer-events:none;
}
.corner{position:absolute;color:var(--red);font-size:1.5rem;line-height:1;opacity:.85}
.corner.tl{top:9px;left:13px} .corner.tr{top:9px;right:13px;transform:scaleX(-1)}
.corner.bl{bottom:9px;left:13px;transform:scaleY(-1)} .corner.br{bottom:9px;right:13px;transform:scale(-1,-1)}

.script{font-family:"Pinyon Script","Snell Roundhand",cursive;color:var(--red);font-weight:400}

/* cover */
.cover{text-align:center;padding:54px 38px}
.cover .title{font-size:4.4rem;line-height:1.05;margin:0}
.cover .sub{font-style:italic;color:var(--red-soft);font-size:1.5rem;margin:.4rem 0 0}
.cover .rule{width:120px;height:1px;background:var(--red);margin:26px auto;opacity:.5}
.cover .count{letter-spacing:.18em;text-transform:uppercase;font-size:.8rem;color:var(--gold)}

/* contents */
.toc h2{text-align:center;font-size:3rem;margin:.1em 0 .5em}
.toc ol{columns:2;column-gap:46px;margin:0;padding:0 0 0 0;list-style:none}
@media(max-width:560px){.toc ol{columns:1}}
.toc li{break-inside:avoid;padding:3px 0;border-bottom:1px dotted rgba(163,47,43,.3)}
.toc a{color:var(--ink);text-decoration:none;display:flex;gap:.6em}
.toc a:hover{color:var(--red)}
.toc .no{color:var(--red);font-weight:600;min-width:2.4em;text-align:right}

/* recipe */
.recipe-no{text-align:center;font-size:2.7rem;margin:2px 0 20px}
.inner{
  position:relative;border:1.6px solid var(--red);border-radius:9px;
  padding:22px 24px 24px;background:var(--paper);
  background-image:repeating-linear-gradient(to bottom,transparent 0,transparent 33px,rgba(120,90,60,.08) 34px);
}
.label{font-style:italic;color:var(--red);font-weight:500}
.namefield{font-size:1.05rem;margin:0 0 4px}
.dishname{font-size:1.5rem;font-weight:600;color:var(--ink)}
.dishsub{font-style:italic;color:#6a5f50;margin:.1rem 0 0}
.serving{color:#7a6e5c;font-style:italic;font-size:.95rem;margin:.3rem 0 .2rem}
.section{margin-top:1rem}
.section ul,.section ol{margin:.35rem 0 0;padding-left:1.5rem}
.section li{margin:.12rem 0}
.shots{display:flex;gap:12px;flex-wrap:wrap;margin:1rem 0 0}
.shots img{max-width:100%;width:320px;height:auto;border:1px solid var(--red-soft);border-radius:3px;display:block}
.cook-time{margin-top:1rem}
.uncertain{color:var(--red-soft);font-size:.78em;vertical-align:super;cursor:help}
.meta{margin-top:14px;font-size:.8rem;color:#9a8f7c;letter-spacing:.03em}
.links{margin-top:12px;font-size:.85rem}
.links a{color:var(--red-soft);margin-right:14px}
.also{text-align:center;margin-top:18px;font-size:.85rem;color:#8a7f6c;font-style:italic}
.also a{color:var(--red-soft)}

.pager{display:flex;justify-content:space-between;gap:20px;margin-top:26px;
  font-size:.88rem;line-height:1.3}
.pager a{color:var(--red-soft);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{display:block;text-align:center;margin-top:10px;font-size:.85rem}
.backlink a{color:var(--red-soft);text-decoration:none}
.backlink a:hover{text-decoration:underline}
.topbar{max-width:840px;margin:0 auto 4px;font-size:.82rem;letter-spacing:.08em;text-transform:uppercase}
.topbar a{color:var(--red-soft);text-decoration:none;margin-right:18px}
.topbar a:hover{color:var(--red)}
footer{text-align:center;color:#8a7f6c;font-size:.8rem;margin-top:50px;font-style:italic}