:root{
  --paper:#f6f1e6;
  --paper-deep:#efe7d5;
  --ink:#221d12;
  --ink-soft:#5a5240;
  --moss:#2e4a32;
  --moss-bright:#3c6443;
  --gild:#a8771d;
  --gild-soft:#c89b4a;
  --rule:#d8cdb4;
  --code-bg:#27231a;
  --code-ink:#ece4d0;
  --code-green:#9dc89a;
  --code-gold:#e0bd76;
  --code-dim:#8d8674;
}
*{margin:0;padding:0;box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  font-family:'Newsreader',Georgia,serif;
  font-size:1.125rem;
  line-height:1.7;
  color:var(--ink);
  background:
    radial-gradient(1200px 500px at 80% -10%, rgba(168,119,29,.10), transparent 60%),
    radial-gradient(900px 600px at -10% 20%, rgba(46,74,50,.08), transparent 55%),
    var(--paper);
}
body::before{
  content:"";position:fixed;inset:0;pointer-events:none;z-index:1;opacity:.5;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2'/%3E%3CfeColorMatrix values='0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0.025 0'/%3E%3C/filter%3E%3Crect width='160' height='160' filter='url(%23n)'/%3E%3C/svg%3E");
}
.wrap{position:relative;z-index:2;max-width:46rem;margin:0 auto;padding:0 1.5rem}

/* ---------- top nav (subpages) ---------- */
.topnav{
  display:flex;flex-wrap:wrap;align-items:baseline;gap:.5rem 1.4rem;
  padding:1.4rem 0 1.2rem;border-bottom:3px double var(--rule);
  font-family:'IBM Plex Mono',monospace
}
.topnav .home{
  font-size:.8rem;letter-spacing:.35em;text-transform:uppercase;
  color:var(--gild);font-weight:600;text-decoration:none
}
.topnav a{color:var(--moss-bright);text-decoration:none;font-size:.8rem}
.topnav a:hover{color:var(--gild)}
.topnav a.here{color:var(--ink);border-bottom:2px solid var(--gild)}

/* ---------- page head ---------- */
.pagehead{padding:2.6rem 0 1.6rem;border-bottom:1px solid var(--rule)}
.chap{
  font-family:'IBM Plex Mono',monospace;font-size:.74rem;font-weight:600;
  letter-spacing:.3em;text-transform:uppercase;color:var(--gild)
}
h1{font-size:clamp(2rem,5.5vw,3rem);font-weight:700;line-height:1.1;margin:.45rem 0 .5rem;letter-spacing:-.01em}
.deck{font-size:1.2rem;font-style:italic;color:var(--ink-soft)}
.dateline{
  font-family:'IBM Plex Mono',monospace;font-size:.74rem;color:var(--ink-soft);
  letter-spacing:.08em;margin-top:.6rem
}

/* ---------- body ---------- */
main{padding:1.4rem 0 3rem}
section{padding:1.6rem 0 .4rem}
h2{font-size:1.7rem;font-weight:700;margin:1.2rem 0 .9rem;letter-spacing:-.01em}
h3{font-size:1.2rem;font-weight:700;margin:1.8rem 0 .6rem;color:var(--moss)}
p{margin:0 0 1.05rem}
a{color:var(--moss-bright);text-decoration-color:var(--gild-soft);text-underline-offset:3px}
a:hover{color:var(--gild)}
strong{font-weight:700}
ul,ol{margin:0 0 1.05rem 1.4rem}
li{margin-bottom:.45rem}
code{
  font-family:'IBM Plex Mono',monospace;font-size:.82em;
  background:var(--paper-deep);border:1px solid var(--rule);
  padding:.08em .35em;border-radius:3px;white-space:nowrap
}
pre{
  background:var(--code-bg);color:var(--code-ink);border-radius:6px;
  padding:1.1rem 1.25rem;overflow-x:auto;margin:0 0 1.3rem;
  font-size:.85rem;line-height:1.55;
  box-shadow:0 2px 14px rgba(34,29,18,.18), inset 0 0 0 1px rgba(236,228,208,.06)
}
pre code{background:none;border:none;padding:0;white-space:pre;font-size:1em;color:inherit}
.cm{color:var(--code-dim)}
.cs{color:var(--code-green)}
.ck{color:var(--code-gold)}

table{width:100%;border-collapse:collapse;margin:0 0 1.3rem;font-size:.95rem}
th{
  font-family:'IBM Plex Mono',monospace;font-size:.72rem;letter-spacing:.12em;
  text-transform:uppercase;color:var(--ink-soft);text-align:left;
  border-bottom:2px solid var(--ink);padding:.45rem .6rem .45rem 0
}
td{border-bottom:1px solid var(--rule);padding:.55rem .6rem .55rem 0;vertical-align:top}
td code{white-space:nowrap}

.note{
  border-left:3px solid var(--gild);background:rgba(168,119,29,.07);
  padding:.85rem 1.1rem;margin:0 0 1.3rem;font-size:1rem
}
.note b{color:var(--gild)}
.moral{
  margin:1.6rem 0 1rem;padding:1rem 1.3rem;text-align:center;font-style:italic;
  font-size:1.12rem;color:var(--moss);
  border-top:1px solid var(--rule);border-bottom:1px solid var(--rule)
}
.moral::before{content:"❧ ";color:var(--gild)}

/* ---------- recipe cards (cookbook index) ---------- */
.cards{display:grid;grid-template-columns:1fr 1fr;gap:1.1rem;margin:1.6rem 0;padding:0;list-style:none}
.cards li{margin:0}
.cards a{
  display:block;height:100%;padding:1.15rem 1.25rem;text-decoration:none;
  border:1px solid var(--rule);border-radius:6px;background:rgba(255,255,255,.45);
  transition:border-color .15s, box-shadow .15s, transform .15s
}
.cards a:hover{border-color:var(--gild-soft);box-shadow:0 4px 16px rgba(34,29,18,.12);transform:translateY(-2px)}
.cards .k{
  font-family:'IBM Plex Mono',monospace;font-size:.68rem;font-weight:600;
  letter-spacing:.22em;text-transform:uppercase;color:var(--gild)
}
.cards .t{display:block;font-size:1.18rem;font-weight:700;color:var(--ink);margin:.25rem 0 .3rem;line-height:1.25}
.cards .d{display:block;font-size:.95rem;color:var(--ink-soft);font-style:italic;line-height:1.5}

/* ---------- news list ---------- */
.newslist{list-style:none;margin:1.4rem 0;padding:0}
.newslist li{
  display:flex;gap:1.2rem;align-items:baseline;
  padding:.85rem 0;border-bottom:1px solid var(--rule);margin:0
}
.newslist time{
  font-family:'IBM Plex Mono',monospace;font-size:.74rem;color:var(--gild);
  white-space:nowrap;letter-spacing:.05em
}
.newslist a{font-size:1.15rem;font-weight:500}

/* ---------- prev/next + footer ---------- */
.pn{
  display:flex;justify-content:space-between;gap:1rem;margin-top:2.4rem;
  padding-top:1.2rem;border-top:1px solid var(--rule);
  font-family:'IBM Plex Mono',monospace;font-size:.78rem
}
footer{
  border-top:3px double var(--rule);padding:2rem 0 3rem;
  font-size:.9rem;color:var(--ink-soft);text-align:center
}
footer p{margin-bottom:.5rem}
@media (max-width:640px){
  body{font-size:1.05rem}
  pre{font-size:.78rem;padding:.9rem 1rem}
  .cards{grid-template-columns:1fr}
}