/* Family Recipes — cozy heirloom cookbook
 * Square corners everywhere, warm paper tones, bookish serifs, light-orange accent.
 */

:root {
  --paper:        oklch(0.985 0.009 75);
  --paper-2:      oklch(0.965 0.012 75);
  --ink:          oklch(0.255 0.012 60);
  --ink-soft:     oklch(0.45 0.014 60);
  --ink-faint:    oklch(0.6 0.012 60);
  --rule:         oklch(0.88 0.012 70);
  --rule-strong:  oklch(0.8 0.014 65);
  --orange:       oklch(0.74 0.13 56);
  --orange-ink:   oklch(0.56 0.15 47);
  --orange-soft:  oklch(0.93 0.05 70);
  --orange-line:  oklch(0.82 0.1 60);
  --star:         oklch(0.72 0.15 62);
  --font-display: "Spectral", Georgia, "Times New Roman", serif;
  --font-body:    "Source Serif 4", Georgia, serif;
  --row-pad:      14px;
  --base-size:    17px;
}

*, *::before, *::after { box-sizing: border-box; }

html, body {
  margin: 0; padding: 0;
  background: var(--paper);
  color: var(--ink);
  font-family: var(--font-body);
  font-size: var(--base-size);
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

::selection { background: var(--orange-soft); }

.app {
  max-width: 1040px;
  margin: 0 auto;
  padding: 0 32px 96px;
}

/* ── Masthead ── */
.masthead {
  text-align: center;
  padding: 56px 0 28px;
  border-bottom: 2px solid var(--ink);
}
.masthead .kicker {
  font-family: var(--font-body);
  font-size: 12px;
  letter-spacing: 0.32em;
  text-transform: uppercase;
  color: var(--orange-ink);
  margin: 0 0 14px;
}
.masthead h1 {
  font-family: var(--font-display);
  font-weight: 800;
  font-size: 52px;
  line-height: 1.02;
  letter-spacing: -0.01em;
  margin: 0;
}
.masthead .sub {
  font-style: italic;
  color: var(--ink-soft);
  margin: 12px 0 0;
  font-size: 18px;
}

/* ── Toolbar ── */
.toolbar {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 18px 0;
  border-bottom: 1px solid var(--rule);
  flex-wrap: wrap;
}
.search {
  position: relative;
  flex: 1;
  min-width: 220px;
}
.search input {
  width: 100%;
  font-family: var(--font-body);
  font-size: 16px;
  color: var(--ink);
  background: var(--paper);
  border: 1px solid var(--rule-strong);
  border-radius: 0;
  padding: 11px 14px 11px 38px;
  outline: none;
  transition: border-color 0.15s;
}
.search input:focus { border-color: var(--orange); }
.search input::placeholder { color: var(--ink-faint); font-style: italic; }
.search .icon {
  position: absolute;
  left: 13px; top: 50%;
  transform: translateY(-50%);
  color: var(--ink-faint);
  pointer-events: none;
}
.fav-filter {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-family: var(--font-body);
  font-size: 15px;
  color: var(--ink-soft);
  background: var(--paper);
  border: 1px solid var(--rule-strong);
  border-radius: 0;
  padding: 10px 16px;
  cursor: pointer;
  transition: all 0.15s;
  white-space: nowrap;
}
.fav-filter:hover { border-color: var(--orange); color: var(--ink); }
.fav-filter.on {
  background: var(--orange-soft);
  border-color: var(--orange);
  color: var(--orange-ink);
}
.count {
  font-size: 13px;
  color: var(--ink-faint);
  letter-spacing: 0.04em;
  white-space: nowrap;
}

/* ── Recipe table ── */
.recipe-table {
  width: 100%;
  border-collapse: collapse;
  border: 1px solid var(--rule-strong);
  border-top: none;
}
.recipe-table thead th {
  font-family: var(--font-body);
  font-size: 12px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--ink-soft);
  text-align: left;
  font-weight: 600;
  padding: 13px 18px;
  background: var(--paper-2);
  border-bottom: 1px solid var(--rule-strong);
  cursor: pointer;
  user-select: none;
  white-space: nowrap;
  transition: color 0.15s;
}
.recipe-table thead th:hover { color: var(--orange-ink); }
.recipe-table thead th .sort {
  display: inline-block;
  margin-left: 6px;
  color: var(--orange-ink);
  font-size: 11px;
  opacity: 0;
  transition: opacity 0.15s;
}
.recipe-table thead th.active .sort { opacity: 1; }
.recipe-table thead th.col-fav {
  position: relative;
  text-align: center;
}
.recipe-table thead th.col-fav .sort {
  position: absolute;
  right: 12px; top: 50%;
  transform: translateY(-50%);
  margin-left: 0;
}
.col-fav   { width: 64px; text-align: center !important; }
.col-date  { width: 150px; }
.col-author { width: 200px; }

.recipe-table tbody tr {
  cursor: pointer;
  transition: background 0.12s;
  border-bottom: 1px solid var(--rule);
}
.recipe-table tbody tr:last-child { border-bottom: none; }
.recipe-table tbody tr:hover { background: var(--orange-soft); }
.recipe-table tbody td {
  padding: var(--row-pad) 18px;
  vertical-align: middle;
}
.cell-title {
  font-family: var(--font-display);
  font-size: 20px;
  font-weight: 600;
  color: var(--ink);
  letter-spacing: -0.005em;
}
.recipe-table tbody tr:hover .cell-title { color: var(--orange-ink); }
.cell-author { color: var(--ink-soft); }
.cell-date {
  color: var(--ink-faint);
  font-size: 14px;
  letter-spacing: 0.02em;
  font-variant-numeric: tabular-nums;
}
.cell-fav { text-align: center; }
.star-icon { font-size: 19px; line-height: 1; color: var(--rule-strong); }
.star-icon.on { color: var(--star); }
.empty {
  text-align: center;
  padding: 60px 20px;
  color: var(--ink-faint);
  font-style: italic;
}

/* ── Recipe view ── */
.back {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  font-family: var(--font-body);
  font-size: 15px;
  color: var(--ink-soft);
  text-decoration: none;
  padding: 22px 0 0;
  transition: color 0.15s;
}
.back:hover { color: var(--orange-ink); }

.recipe-title-area {
  border-bottom: 2px solid var(--ink);
  padding: 18px 0 28px;
  position: relative;
}
.recipe-title-area h1 {
  font-family: var(--font-display);
  font-weight: 800;
  font-size: 44px;
  line-height: 1.05;
  letter-spacing: -0.015em;
  margin: 0 64px 0 0;
}
.recipe-meta {
  display: flex;
  gap: 16px 36px;
  flex-wrap: wrap;
  margin-top: 18px;
  font-size: 15px;
}
.recipe-meta .label {
  display: block;
  font-size: 11px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--ink-faint);
  margin-bottom: 3px;
  white-space: nowrap;
}
.recipe-meta .value { color: var(--ink); font-style: italic; }
.recipe-meta .value.num { font-variant-numeric: tabular-nums; font-style: normal; }
.recipe-meta .value.plain { font-style: normal; }
.recipe-meta a.src-link {
  color: var(--orange-ink);
  font-style: italic;
  text-decoration: none;
  border-bottom: 1px solid var(--orange-line);
  transition: border-color 0.15s;
}
.recipe-meta a.src-link:hover { border-bottom-color: var(--orange-ink); }
.fav-badge {
  position: absolute;
  top: 18px; right: 0;
  font-size: 28px;
  line-height: 1;
  color: var(--rule-strong);
}
.fav-badge.on { color: var(--star); }

/* ── Recipe body grid ── */
.recipe-body {
  display: grid;
  gap: 0;
}
.recipe-body.layout-sidebar {
  grid-template-columns: 300px 1fr;
}
.recipe-body.layout-stacked {
  grid-template-columns: 1fr;
}
.section {
  padding: 34px 0;
  border-bottom: 1px solid var(--rule);
}
.section:last-child { border-bottom: none; }
.layout-sidebar .col-ingredients {
  border-right: 1px solid var(--rule-strong);
  padding-right: 36px;
  position: sticky;
  top: 0;
  align-self: start;
}
.layout-sidebar .col-main { padding-left: 36px; }

/* ── Section heading ── */
.section-head {
  font-family: var(--font-body);
  font-size: 12px;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--orange-ink);
  margin: 0 0 20px;
  font-weight: 600;
  display: flex;
  align-items: center;
  gap: 12px;
}
.section-head::after {
  content: "";
  flex: 1;
  height: 1px;
  background: var(--rule);
}

/* ── Ingredients ── */
.ingredient-group { margin-bottom: 26px; }
.ingredient-group:last-child { margin-bottom: 0; }
.ingredient-group h4 {
  font-family: var(--font-display);
  font-size: 18px;
  font-style: italic;
  font-weight: 600;
  color: var(--ink);
  margin: 0 0 12px;
}
.ingredient-list { list-style: none; margin: 0; padding: 0; }
.ingredient-list li {
  display: grid;
  grid-template-columns: 124px 1fr;
  gap: 14px;
  padding: 7px 0;
  border-bottom: 1px dotted var(--rule);
  align-items: baseline;
}
.ingredient-list li:last-child { border-bottom: none; }
.ingredient-list .qty {
  color: var(--orange-ink);
  font-weight: 600;
  font-variant-numeric: tabular-nums;
  font-size: 15px;
  line-height: 1.4;
}
.ingredient-list .name { color: var(--ink); }

/* ── Instructions ── */
.instruction-section { margin-bottom: 32px; }
.instruction-section:last-child { margin-bottom: 0; }
.instruction-section h4 {
  font-family: var(--font-display);
  font-size: 20px;
  font-style: italic;
  font-weight: 600;
  color: var(--ink);
  margin: 0 0 16px;
}
.steps { list-style: none; counter-reset: step; margin: 0; padding: 0; }
/* One continuous numbered list per recipe; ## phases are unnumbered dividers */
.steps-recipe > li.step-phase {
  counter-increment: none;
  padding: 28px 0 10px 0;
  min-height: 0;
}
.steps-recipe > li.step-phase:first-child { padding-top: 0; }
.steps-recipe > li.step-phase::before { content: none; display: none; }
.step-phase-title {
  font-family: var(--font-display);
  font-size: 20px;
  font-style: italic;
  font-weight: 600;
  color: var(--ink);
  margin: 0;
}
.steps li {
  position: relative;
  counter-increment: step;
  padding: 0 0 22px 52px;
  min-height: 36px;
}
.steps li:last-child { padding-bottom: 0; }
.steps li::before {
  content: counter(step);
  position: absolute;
  left: 0; top: -2px;
  width: 34px; height: 34px;
  display: flex;
  align-items: center;
  justify-content: center;
  border: 1.5px solid var(--orange);
  color: var(--orange-ink);
  font-family: var(--font-display);
  font-size: 16px;
  font-weight: 600;
  background: var(--paper);
}
.steps li p { margin: 4px 0 0; line-height: 1.62; }

/* ingredient highlight in steps; cross-recipe links */
.ing-ref { color: var(--orange-ink); font-weight: 700; }
a.recipe-ref { color: var(--orange-ink); font-weight: 700; text-decoration: underline; text-underline-offset: 2px; }
a.recipe-ref:hover { color: var(--ink); }

/* ── Notes ── */
.comments-body,
.comments-body p {
  font-style: italic;
  font-size: 18px;
  line-height: 1.7;
  color: var(--ink-soft);
  max-width: 64ch;
}
.comments-body {
  border-left: 3px solid var(--orange);
  padding-left: 22px;
  margin: 0;
}
.comments-body p {
  margin: 0 0 0.75em;
}
.comments-body p:last-child {
  margin-bottom: 0;
}
/* Markdown notes links lack recipe-ref until build tags them; match site link style */
.comments-body a,
.comments-body a:visited {
  color: var(--orange-ink);
  font-weight: 700;
  font-style: normal;
  text-decoration: underline;
  text-underline-offset: 2px;
}
.comments-body a:hover {
  color: var(--ink);
}

/* ── Tag index (home) ── */
.tag-index {
  margin-top: 3rem;
  padding-top: 2rem;
  border-top: 1px solid var(--rule-strong);
}
.tag-index-head {
  font-size: 14px;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--ink-muted);
  margin: 0 0 1rem;
}
.tag-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem 1rem;
}
.tag-list a {
  color: var(--green);
  text-decoration: none;
  font-size: 15px;
}
.tag-list a:hover {
  text-decoration: underline;
}

/* ── Responsive ── */
@media (max-width: 720px) {
  .app { padding: 0 18px 64px; }
  .masthead h1 { font-size: 38px; }
  .recipe-title-area h1 { font-size: 32px; }
  .recipe-body.layout-sidebar { grid-template-columns: 1fr; }
  .layout-sidebar .col-ingredients {
    border-right: none;
    border-bottom: 1px solid var(--rule-strong);
    padding-right: 0;
    position: static;
  }
  .layout-sidebar .col-main { padding-left: 0; }
  .col-author { width: auto; }
  .col-date, .cell-date,
  .recipe-table thead th.col-date { display: none; }
}