@import url('https://fonts.googleapis.com/css2?family=Chelsea+Market&family=Inter:wght@400;600;700&display=swap');

:root {
  --ink: #2b2622;
  --sub: #6b6259;
  --line: #e4ddd3;
  --accent: #a6482f;
  --bg: #fdfbf8;
  --card: #ffffff;
}

* { box-sizing: border-box; }

body {
  margin: 0;
  background: var(--bg);
  color: var(--ink);
  font-family: Inter, sans-serif;
  line-height: 1.65;
}

h1, h2, h3 {
  font-family: "Chelsea Market", cursive;
  font-weight: 400;
}

.site-nav {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  max-width: 820px;
  margin: 0 auto;
  padding: 20px 24px 0;
  font-family: Inter, sans-serif;
}

.site-nav a { color: var(--accent); text-decoration: none; }
.site-nav a:hover { text-decoration: underline; }
.site-nav .brand { font-weight: 700; letter-spacing: 0.02em; }
.site-nav .links { display: flex; flex-wrap: wrap; gap: 14px; font-size: 0.86rem; }

.markdown-page .wrap { max-width: 820px; margin: 0 auto; padding: 48px 24px 80px; }
.markdown-page h1 { font-size: 2rem; line-height: 1.15; margin: 0 0 8px; }
.markdown-page h2 { font-size: 1.3rem; margin: 42px 0 12px; padding-bottom: 8px; border-bottom: 1px solid var(--line); }
.markdown-page h3 { color: var(--accent); font-size: 1.05rem; margin: 28px 0 7px; }
.markdown-page h4 { color: var(--sub); font-size: 0.92rem; margin: 18px 0 7px; text-transform: uppercase; letter-spacing: 0.04em; }
.markdown-page p { margin: 0 0 14px; }
.recipe-index { margin: 28px 0 38px; padding: 18px 20px; border: 1px solid var(--line); background: var(--card); }
.recipe-index h2 { margin: 0 0 8px; padding: 0; border: 0; font-family: Inter, sans-serif; font-size: 0.78rem; letter-spacing: 0.08em; text-transform: uppercase; }
.recipe-index h2:not(:first-child) { margin-top: 18px; }
.recipe-index ul { margin: 0; padding-left: 20px; }
.recipe-index a { color: var(--accent); }
.quantity { white-space: nowrap; }
.markdown-page ul, .markdown-page ol { margin: 0 0 16px; padding-left: 25px; }
.markdown-page li { margin-bottom: 5px; }
.task-list { list-style: none; padding-left: 0 !important; }
.task-list li { display: flex; align-items: flex-start; gap: 9px; }
.task-list input { flex: 0 0 auto; width: 1.1rem; height: 1.1rem; margin-top: 0.35rem; accent-color: var(--accent); }
.ingredients { width: 100%; border-collapse: collapse; margin: 0 0 18px; font-size: 0.94rem; }
.ingredients th, .ingredients td { padding: 8px 10px; border-bottom: 1px solid var(--line); text-align: left; vertical-align: top; }
.ingredients th { color: var(--sub); font-family: Inter, sans-serif; font-size: 0.76rem; letter-spacing: 0.05em; text-transform: uppercase; }
.ingredients td:first-child { width: 20%; color: var(--accent); }
.shopping-list .check-column { width: 8%; text-align: center; }
.shopping-list .check-column input { width: 1.1rem; height: 1.1rem; accent-color: var(--accent); }
.shopping-list td:nth-child(2) { width: 18%; }
.markdown-page em { color: var(--sub); }
.markdown-page strong { color: #493326; }
.markdown-page hr { border: 0; border-top: 1px solid var(--line); margin: 34px 0; }

@media (max-width: 600px) {
  .site-nav { align-items: flex-start; flex-direction: column; gap: 8px; }
  .site-nav .links { gap: 10px; }
  .markdown-page .wrap { padding-top: 36px; }
}

@media print {
  @page { margin: 14mm; }
  body { background: #fff; color: #000; font-size: 10pt; }
  .site-nav { display: none; }
  .markdown-page .wrap { max-width: none; padding: 0; }
  .markdown-page h1 { font-size: 19pt; }
  .markdown-page h2 { break-after: avoid; margin-top: 20px; }
  .ingredients { font-size: 9pt; }
  .ingredients th, .ingredients td { padding: 4px 6px; }
  .shopping-list tr { break-inside: avoid; }
  .shopping-list .check-column input { print-color-adjust: exact; }
  .task-list li { break-inside: avoid; }
  .task-list input { print-color-adjust: exact; }
}