/* The whole site's styling. Both the index and the recipe pages link this
   (via base.html.jinja2), which is the point -- they used to be generated
   independently, so the index had no styling at all and picked up the
   browser's default serif while recipe pages set a sans-serif stack. */

:root { color-scheme: light; }
body {
  max-width: 38em;
  margin: 2.5em auto;
  padding: 0 1.25em;
  background: #fff;
  color: #000;
  font-family: -apple-system, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  line-height: 1.5;
}
h1 { font-size: 1.6em; margin-bottom: 0.2em; }
h2 { font-size: 1.1em; margin-top: 1.6em; }
p { margin: 1em 0; }
table.ingredients {
  border-collapse: collapse;
  table-layout: fixed;
  width: 100%;
  margin: 0.8em 0 1.2em;
}
table.ingredients td { padding: 0.15em 0.8em; vertical-align: top; }
table.ingredients td.amount { width: 11em; text-align: right; white-space: nowrap; border-right: 1px solid #000; }
@media (max-width: 30em) {
  table.ingredients td.amount { width: 35%; white-space: normal; }
}
sup a { text-decoration: none; }
footer { margin-top: 3em; font-size: 0.8em; opacity: 0.5; }
.footer-links {
  display: flex;
  justify-content: space-between;
  gap: 1em;
  flex-wrap: wrap;
}

/* Index */
ul.recipes { list-style: none; padding-left: 0; }
ul.recipes li { margin: 0.35em 0; }