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

:root{
  --ink:#211e19; --soft:#6d665c; --faint:#a89f90;
  --line:#ddd6c8; --rule:#2a2620; --accent:#9a7d3f;
  --paper:#fdfcf8; --bg:#efece3;
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  margin:0; padding:34px 16px 90px;
  background:var(--bg);
  background-image:radial-gradient(circle at 50% -8%,#fbfaf5,#e7e3d7);
  color:var(--ink);
  font-family:"EB Garamond",Georgia,"Times New Roman",serif;
  font-size:19px; line-height:1.55;
}
.book{max-width:900px;margin:0 auto}
a{color:inherit}

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

/* page card */
.page{
  position:relative;background:var(--paper);
  border:1px solid #e7e1d2; border-radius:3px;
  padding:46px 54px 30px; margin:26px 0;
  box-shadow:0 14px 40px rgba(60,50,30,.14);
}
@media(max-width:620px){.page{padding:30px 22px 24px}}

/* masthead: cover on the left, contents on the right */
.masthead{display:grid;grid-template-columns:minmax(200px,250px) 1fr;gap:44px;
  align-items:start;padding:40px 48px 36px}
@media(max-width:640px){.masthead{grid-template-columns:1fr;gap:26px;padding:28px 24px}}
.cover-col{text-align:center}
.cover-col img{width:100%;max-width:250px;height:auto;display:block;margin:0 auto;
  box-shadow:0 10px 30px rgba(40,30,15,.22)}
.cover-col .kicker{margin:18px 0 0;font-size:.7rem;letter-spacing:.3em;
  text-transform:uppercase;color:var(--accent)}
.cover-col .count{margin:.3rem 0 0;font-style:italic;color:var(--soft);font-size:1.02rem}

.toc-col h2{font-family:"Cormorant",Georgia,serif;font-weight:500;
  font-size:2.3rem;letter-spacing:.14em;text-transform:uppercase;margin:0;line-height:1}
.toc-col .flourish{color:var(--accent);letter-spacing:.5em;margin:.15em 0 .9em;font-size:1rem}
.toc-col ol{margin:0;padding:0;list-style:none}
.toc-col li{display:flex;align-items:baseline;gap:.5em;padding:.5em 0;
  border-bottom:1px solid var(--line)}
.toc-col li:last-child{border-bottom:0}
.toc-col .name{font-size:1.18rem}
.toc-col a{text-decoration:none;display:contents}
.toc-col a:hover .name{color:var(--accent)}
.toc-col .dots{flex:1;border-bottom:1px dotted var(--faint);transform:translateY(-.28em)}
.toc-col .pg{color:var(--soft);font-variant-numeric:tabular-nums}

/* recipe */
.photo{margin:0 auto 30px;max-width:560px}
.photo img{width:100%;height:auto;display:block;border-radius:2px;
  box-shadow:0 12px 30px rgba(40,30,15,.20)}
.dish-title{display:flex;align-items:center;gap:20px;margin:6px 0 10px}
.diet{text-align:center;font-size:.68rem;letter-spacing:.2em;text-transform:uppercase;
  color:var(--soft,#8a8175);margin:0 0 26px}
.dish-title::before,.dish-title::after{content:"";flex:1;height:1px;background:var(--rule)}
.dish-title h3{
  margin:0;font-family:"Cormorant",Georgia,serif;font-weight:500;
  font-size:1.9rem;letter-spacing:.11em;text-transform:uppercase;
  text-align:center;line-height:1.15}
@media(max-width:620px){.dish-title h3{font-size:1.4rem}}

.cols{display:grid;grid-template-columns:minmax(190px,34%) 1fr;gap:34px}
@media(max-width:620px){.cols{grid-template-columns:1fr;gap:20px}}

.ingredients{font-size:.98rem}
.ingredients .serves{font-style:italic;color:var(--soft);margin:0 0 .4em}
.ingredients ul{list-style:none;margin:0;padding:0}
.ingredients li{padding:.42em 0;border-top:1px solid var(--line);line-height:1.35}
.ingredients li:first-of-type{border-top:1px solid var(--rule)}
.ingredients li:last-child{border-bottom:1px solid var(--rule)}

.method p{margin:0 0 .85em;text-align:justify;hyphens:auto}
.method .serves-end{font-style:italic;color:var(--soft);text-align:left;margin-top:1.1em}
.method .note{color:var(--soft);font-size:.92rem}

.uncertain{color:var(--accent);font-size:.72em;vertical-align:super;cursor:help}

.pagenum{display:flex;align-items:center;gap:16px;margin-top:30px;color:var(--soft)}
.pagenum::before,.pagenum::after{content:"";flex:1;height:1px;background:var(--line)}
.pagenum span{font-variant-numeric:tabular-nums;letter-spacing:.05em;font-size:.9rem}
.links{margin-top:14px;font-size:.85rem;color:var(--soft);text-align:center}
.links a{color:var(--accent);margin-right:14px}
.also{text-align:center;margin-top:16px;font-size:.85rem;color:var(--soft);font-style:italic}
.also a{color:var(--accent)}

.pager{display:flex;justify-content:space-between;gap:20px;margin-top:34px;
  font-size:.88rem;line-height:1.3}
.pager a{color:var(--accent);letter-spacing:.03em;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:14px;font-size:.85rem}
.backlink a{color:var(--accent);text-decoration:none;letter-spacing:.06em}
.backlink a:hover{text-decoration:underline}

footer{text-align:center;color:var(--faint);font-size:.82rem;margin-top:46px;font-style:italic}