:root {
  --bg: #fbf8f3;
  --surface: #ffffff;
  --fg: #2a2420;
  --muted: #6b6058;
  --rule: #e7ddd1;
  --accent: #a3401f;
  --accent-soft: #f6e6dc;
  --callout: #f3ede4;
  --serif: "Iowan Old Style", "Palatino Linotype", Palatino, Georgia, serif;
  --sans: system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  color-scheme: light;
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --bg: #1c1917;
    --surface: #26211e;
    --fg: #eee8e1;
    --muted: #aaa096;
    --rule: #3a332e;
    --accent: #e8825f;
    --accent-soft: #3d2a22;
    --callout: #2a2421;
    color-scheme: dark;
  }
}

:root[data-theme="dark"] {
  --bg: #1c1917;
  --surface: #26211e;
  --fg: #eee8e1;
  --muted: #aaa096;
  --rule: #3a332e;
  --accent: #e8825f;
  --accent-soft: #3d2a22;
  --callout: #2a2421;
  color-scheme: dark;
}

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

html {
  -webkit-text-size-adjust: 100%;
}

body {
  margin: 0;
  background: var(--bg);
  color: var(--fg);
  font: 18px/1.6 var(--sans);
  padding: env(safe-area-inset-top) env(safe-area-inset-right) env(safe-area-inset-bottom) env(safe-area-inset-left);
}

main {
  max-width: 42rem;
  margin: 0 auto;
  padding: 0 16px 4rem;
}

h1,
h2,
h3 {
  font-family: var(--serif);
  font-weight: 600;
  line-height: 1.2;
  text-wrap: balance;
}

h1 {
  font-size: 2.25rem;
  margin: 0.25rem 0 0.5rem;
}

h2 {
  font-size: 1.5rem;
  margin: 2.5rem 0 0.75rem;
  padding-top: 1.5rem;
  border-top: 1px solid var(--rule);
}

h3 {
  font-family: var(--sans);
  font-size: 0.8rem;
  font-weight: 650;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--muted);
  margin: 1.5rem 0 0.25rem;
}

a {
  color: var(--accent);
  text-underline-offset: 0.15em;
}

strong {
  font-weight: 650;
}

/* Top bar */

.bar {
  position: sticky;
  top: 0;
  z-index: 1;
  background: color-mix(in srgb, var(--bg) 88%, transparent);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  border-bottom: 1px solid var(--rule);
}

.back {
  display: block;
  max-width: 42rem;
  margin: 0 auto;
  padding: 0.75rem 16px;
  font-size: 0.95rem;
  text-decoration: none;
}

.back::before {
  content: "‹ ";
}

/* Home */

.home-head {
  padding-top: 2rem;
}

.lede {
  font-size: 1.1rem;
  color: var(--muted);
  margin: 0 0 1rem;
}

.filters {
  position: sticky;
  top: 0;
  z-index: 1;
  background: var(--bg);
  padding: 0.75rem 0;
  margin-bottom: 0.5rem;
}

input[type="search"] {
  width: 100%;
  font: inherit;
  color: inherit;
  background: var(--surface);
  border: 1px solid var(--rule);
  border-radius: 12px;
  padding: 0.65rem 0.9rem;
  -webkit-appearance: none;
  appearance: none;
}

input[type="search"]:focus {
  outline: 2px solid var(--accent);
  outline-offset: 1px;
}

.chips {
  display: flex;
  gap: 0.5rem;
  overflow-x: auto;
  padding: 0.75rem 0 0.1rem;
  scrollbar-width: none;
}

.chips::-webkit-scrollbar {
  display: none;
}

.chip {
  flex: none;
  font: inherit;
  font-size: 0.9rem;
  text-transform: capitalize;
  color: var(--fg);
  background: var(--surface);
  border: 1px solid var(--rule);
  border-radius: 999px;
  padding: 0.35rem 0.9rem;
  cursor: pointer;
}

.chip[aria-pressed="true"] {
  color: var(--bg);
  background: var(--fg);
  border-color: var(--fg);
}

.cards {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: 0.75rem;
}

.card a {
  display: block;
  color: inherit;
  text-decoration: none;
  background: var(--surface);
  border: 1px solid var(--rule);
  border-radius: 14px;
  padding: 1rem 1.1rem;
}

.card a:active {
  background: var(--accent-soft);
}

.card h2 {
  font-size: 1.3rem;
  margin: 0 0 0.25rem;
  padding: 0;
  border: 0;
}

.card p {
  margin: 0;
  color: var(--muted);
  font-size: 0.95rem;
  line-height: 1.45;
}

.card .card-meta {
  margin-top: 0.5rem;
  font-size: 0.85rem;
  font-variant-numeric: tabular-nums;
}

.empty {
  color: var(--muted);
  text-align: center;
  padding: 2rem 0;
}

.foot {
  margin-top: 3rem;
  text-align: center;
  font-size: 0.95rem;
}

/* Recipe */

.recipe-head {
  padding-top: 1.5rem;
}

.tags {
  list-style: none;
  display: flex;
  flex-wrap: wrap;
  gap: 0.4rem;
  margin: 0;
  padding: 0;
}

.tags a {
  display: inline-block;
  font-size: 0.75rem;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  text-decoration: none;
  color: var(--accent);
  background: var(--accent-soft);
  border-radius: 999px;
  padding: 0.15rem 0.6rem;
}

.meta {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem 1.75rem;
  margin: 1rem 0 0;
  padding: 0.85rem 0;
  border-top: 1px solid var(--rule);
  border-bottom: 1px solid var(--rule);
}

.meta dt {
  font-size: 0.75rem;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--muted);
}

.meta dd {
  margin: 0;
  font-weight: 600;
  font-variant-numeric: tabular-nums;
}

.meta small {
  display: block;
  font-weight: 400;
  font-size: 0.85rem;
  color: var(--muted);
}

.intro p {
  margin: 1.25rem 0;
}

.ingredients {
  list-style: none;
  margin: 0;
  padding: 0;
}

.ingredients li {
  padding: 0.5rem 0;
  border-bottom: 1px solid var(--rule);
  line-height: 1.45;
}

.ingredients li:last-child {
  border-bottom: 0;
}

.measure {
  font-weight: 650;
  font-variant-numeric: tabular-nums;
}

.conv {
  color: var(--muted);
}

.note {
  display: block;
  font-size: 0.875rem;
  color: var(--muted);
}

.optional::after {
  content: "optional";
  margin-left: 0.5rem;
  font-size: 0.7rem;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--muted);
  border: 1px solid var(--rule);
  border-radius: 4px;
  padding: 0 0.3rem;
  vertical-align: 0.1em;
}

#method ol {
  list-style: none;
  counter-reset: step;
  margin: 0;
  padding: 0;
}

#method li {
  counter-increment: step;
  position: relative;
  padding: 0 0 1.25rem 2.75rem;
}

#method li::before {
  content: counter(step);
  position: absolute;
  left: 0;
  top: 0.05rem;
  width: 1.9rem;
  height: 1.9rem;
  border-radius: 50%;
  display: grid;
  place-items: center;
  font-size: 0.9rem;
  font-weight: 650;
  color: var(--accent);
  background: var(--accent-soft);
}

#why-it-works ul {
  margin: 0;
  padding: 1rem 1.1rem 1rem 2.2rem;
  background: var(--callout);
  border-radius: 14px;
}

#why-it-works li + li {
  margin-top: 0.75rem;
}

#sources ul,
.cited {
  padding-left: 1.2rem;
}

#sources li + li {
  margin-top: 0.4rem;
}

/* References */

.reference h1 {
  padding-top: 1.5rem;
}

.button {
  display: inline-block;
  text-decoration: none;
  font-weight: 600;
  color: var(--bg);
  background: var(--accent);
  border-radius: 999px;
  padding: 0.5rem 1.1rem;
}

.reference .cards {
  margin-top: 1rem;
}

@media (min-width: 40rem) {
  h1 {
    font-size: 2.75rem;
  }
}

/* Servings stepper and scaling status */

.serves dd {
  display: flex;
  align-items: center;
  gap: 0.5rem;
}

.step {
  font: inherit;
  font-weight: 600;
  line-height: 1;
  width: 2rem;
  height: 2rem;
  border-radius: 50%;
  border: 1px solid var(--rule);
  background: var(--surface);
  color: var(--accent);
  cursor: pointer;
}

.step:disabled {
  color: var(--muted);
  opacity: 0.5;
  cursor: default;
}

.serves .count {
  min-width: 1.5ch;
  text-align: center;
}

.scaled {
  font-size: 0.9rem;
  color: var(--fg);
  background: var(--accent-soft);
  border-radius: 10px;
  padding: 0.5rem 0.75rem;
  margin: 0 0 0.5rem;
}

.link {
  font: inherit;
  color: var(--accent);
  background: none;
  border: 0;
  padding: 0;
  text-decoration: underline;
  text-underline-offset: 0.15em;
  cursor: pointer;
}

.actions {
  font-size: 0.9rem;
  color: var(--muted);
  margin: 0.75rem 0 0;
}

/* Cook view: full screen, one step at a time, large type, big targets */

.cook-start {
  font: inherit;
  font-weight: 650;
  color: var(--bg);
  background: var(--accent);
  border: 0;
  border-radius: 999px;
  padding: 0.6rem 1.4rem;
  margin-top: 1rem;
  cursor: pointer;
}

html.cooking {
  overflow: hidden;
}

dialog.cook {
  position: fixed;
  inset: 0;
  width: 100%;
  height: 100%;
  max-width: none;
  max-height: none;
  margin: 0;
  border: 0;
  padding: env(safe-area-inset-top) env(safe-area-inset-right) env(safe-area-inset-bottom) env(safe-area-inset-left);
  background: var(--bg);
  color: var(--fg);
  flex-direction: column;
}

dialog.cook[open] {
  display: flex;
}

dialog.cook::backdrop {
  background: var(--bg);
}

.cook-top {
  display: flex;
  align-items: center;
  gap: 1rem;
  padding: 0.5rem 16px;
  border-bottom: 1px solid var(--rule);
  font-size: 0.95rem;
  color: var(--muted);
}

.cook-close {
  font: inherit;
  font-size: 1.3rem;
  width: 3rem;
  height: 3rem;
  border: 0;
  border-radius: 50%;
  background: var(--surface);
  color: var(--fg);
  cursor: pointer;
}

.cook-count {
  font-weight: 650;
  color: var(--fg);
  font-variant-numeric: tabular-nums;
}

.cook-awake {
  margin-left: auto;
  font-size: 0.8rem;
}

.cook-step {
  flex: 1;
  overflow-y: auto;
  padding: 1.5rem 16px;
  font-size: clamp(1.5rem, 4.8vw, 2.4rem);
  line-height: 1.4;
  max-width: 48rem;
  width: 100%;
  margin: 0 auto;
}

.cook-tools {
  display: flex;
  gap: 0.5rem;
  justify-content: center;
  padding: 0.5rem 16px;
}

.cook-tools button,
.cook-sheet-close {
  font: inherit;
  font-size: 1rem;
  color: var(--fg);
  background: var(--surface);
  border: 1px solid var(--rule);
  border-radius: 999px;
  padding: 0.65rem 1.2rem;
  cursor: pointer;
}

.cook-nav {
  display: grid;
  grid-template-columns: 1fr 2fr;
  gap: 0.5rem;
  padding: 0.5rem 16px 1rem;
}

.cook-nav button {
  font: inherit;
  font-size: 1.3rem;
  font-weight: 650;
  min-height: 4.5rem;
  border-radius: 16px;
  border: 1px solid var(--rule);
  background: var(--surface);
  color: var(--fg);
  cursor: pointer;
}

.cook-nav .cook-next {
  color: var(--bg);
  background: var(--accent);
  border-color: var(--accent);
}

.cook-nav button:disabled {
  opacity: 0.4;
  cursor: default;
}

dialog.cook-sheet {
  width: min(100% - 32px, 40rem);
  max-height: 85vh;
  border: 1px solid var(--rule);
  border-radius: 16px;
  padding: 1rem 1.25rem 1.5rem;
  background: var(--bg);
  color: var(--fg);
}

dialog.cook-sheet::backdrop {
  background: rgb(0 0 0 / 0.45);
}

.cook-sheet h2 {
  margin-top: 1rem;
  padding-top: 0;
  border-top: 0;
}

.cook-sheet ul:not(.ingredients) {
  padding-left: 1.2rem;
}

.cook-sheet li + li {
  margin-top: 0.6rem;
}

.cook-sheet .relevant {
  background: var(--accent-soft);
  border-radius: 8px;
  padding: 0.4rem 0.6rem;
  margin-left: -0.6rem;
  list-style: none;
}

.cook-sheet .relevant::before {
  content: "Most relevant to this step";
  display: block;
  font-size: 0.75rem;
  font-weight: 650;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--accent);
}

/* Timers: durations in method steps, and the tray of running timers */

button.timer {
  font: inherit;
  font-weight: 650;
  color: var(--accent);
  background: var(--accent-soft);
  border: 0;
  border-radius: 6px;
  padding: 0 0.3em;
  cursor: pointer;
}

button.timer::before {
  content: "⏱ ";
  font-size: 0.85em;
}

.timers {
  position: fixed;
  inset: auto 12px calc(12px + env(safe-area-inset-bottom)) auto;
  width: min(22rem, calc(100vw - 24px));
  height: auto;
  max-height: 50vh;
  margin: 0;
  padding: 0;
  overflow-y: auto;
  border: 0;
  background: transparent;
  color: var(--fg);
  display: grid;
  gap: 0.5rem;
}

.timers[hidden],
html.cooking .timers {
  display: none;
}

/* In the Cook view, timers scroll sideways in a strip above the buttons. */
.cook-timers {
  display: flex;
  gap: 0.5rem;
  overflow-x: auto;
  padding: 0.25rem 16px;
}

.cook-timers[hidden] {
  display: none;
}

.cook-timers .timer-row {
  flex: 0 0 auto;
  width: min(17rem, 80vw);
  box-shadow: none;
}

.cook-timers .timer-label {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.timer-row {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 0.15rem 0.75rem;
  align-items: center;
  background: var(--surface);
  border: 1px solid var(--rule);
  border-radius: 14px;
  padding: 0.6rem 0.75rem;
  box-shadow: 0 6px 20px rgb(0 0 0 / 0.15);
}

.timer-row.done {
  border-color: var(--accent);
  background: var(--accent-soft);
  animation: timer-pulse 1s ease-in-out infinite alternate;
}

@keyframes timer-pulse {
  to {
    box-shadow: 0 0 0 4px var(--accent-soft);
  }
}

@media (prefers-reduced-motion: reduce) {
  .timer-row.done {
    animation: none;
  }
}

.timer-label {
  grid-column: 1 / -1;
  font-size: 0.8rem;
  color: var(--muted);
  line-height: 1.3;
}

.timer-clock {
  font-size: 1.6rem;
  font-weight: 650;
  font-variant-numeric: tabular-nums;
}

.timer-range {
  font-size: 0.8rem;
  font-weight: 400;
  color: var(--muted);
}

.timer-actions {
  display: flex;
  gap: 0.4rem;
}

.timer-actions button {
  font: inherit;
  font-size: 0.9rem;
  min-height: 2.5rem;
  min-width: 2.5rem;
  border: 1px solid var(--rule);
  border-radius: 999px;
  background: var(--bg);
  color: var(--fg);
  padding: 0 0.8rem;
  cursor: pointer;
}

/* Shopping list */

.home-links {
  margin: -0.5rem 0 0.5rem;
  font-size: 0.95rem;
}

.shopping h1 {
  padding-top: 1.5rem;
}

.picks,
.add-list,
.shop {
  list-style: none;
  margin: 0;
  padding: 0;
}

.picks li {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  padding: 0.5rem 0;
  border-bottom: 1px solid var(--rule);
}

.picks a {
  flex: 1;
}

.pick-serves {
  display: flex;
  align-items: center;
  gap: 0.4rem;
  font-variant-numeric: tabular-nums;
}

.empty-picks {
  color: var(--muted);
}

.add {
  margin: 1rem 0;
}

.add summary {
  cursor: pointer;
  color: var(--accent);
}

.add-list label {
  display: block;
  padding: 0.35rem 0;
}

.add-list small,
.shop small,
.muted {
  color: var(--muted);
}

.list-head {
  display: flex;
  flex-wrap: wrap;
  gap: 0.25rem 1rem;
  align-items: center;
  margin-top: 1.5rem;
  font-size: 0.95rem;
}

.shop li label {
  display: flex;
  gap: 0.75rem;
  align-items: flex-start;
  padding: 0.55rem 0;
  border-bottom: 1px solid var(--rule);
  cursor: pointer;
}

.shop input,
.toggle input,
.add-list input {
  width: 1.3rem;
  height: 1.3rem;
  accent-color: var(--accent);
  flex: none;
  margin-top: 0.15rem;
}

.shop small {
  display: block;
  font-size: 0.8rem;
}

.shop .got .shop-item {
  color: var(--muted);
  text-decoration: line-through;
}

.opt {
  font-size: 0.7rem;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--muted);
}

.list-actions {
  margin-top: 1.5rem;
}

/* Focus and hover, for keyboard and mouse users */

:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
}

.card a:focus-visible {
  outline-offset: 0;
}

@media (hover: hover) {
  .card a:hover {
    border-color: var(--accent);
  }

  .chip:hover {
    border-color: var(--fg);
  }
}

/* Desktop: wider pages, a card grid, and ingredients beside the method */

@media (min-width: 64rem) {
  .wide main,
  .wide .back {
    max-width: 72rem;
    padding-left: 32px;
    padding-right: 32px;
  }

  /* Index: search and chips share a row, and the chips wrap instead of scrolling */
  .filters {
    display: flex;
    align-items: center;
    gap: 1rem;
  }

  .filters input[type="search"] {
    flex: 0 0 20rem;
  }

  .chips {
    flex-wrap: wrap;
    overflow: visible;
    padding: 0;
  }

  .home .cards {
    grid-template-columns: repeat(auto-fill, minmax(19rem, 1fr));
    gap: 1rem;
  }

  .home .card a {
    height: 100%;
    display: flex;
    flex-direction: column;
  }

  .home .card .card-meta {
    margin-top: auto;
    padding-top: 0.5rem;
  }

  /* Recipe: head on top, then ingredients in a sticky sidebar beside everything
     else. The sidebar spans more rows than any recipe has sections, and the
     spare implicit rows collapse to nothing. */
  .recipe-head {
    max-width: 48rem;
  }

  .recipe-body {
    display: grid;
    grid-template-columns: 21rem minmax(0, 42rem);
    column-gap: 3.5rem;
    align-items: start;
  }

  .recipe-body > * {
    grid-column: 2;
  }

  .recipe-body > #ingredients {
    grid-column: 1;
    grid-row: 1 / span 20;
    position: sticky;
    top: 4rem;
    max-height: calc(100vh - 5rem);
    overflow-y: auto;
    overscroll-behavior: contain;
    padding-right: 0.5rem;
  }

  #ingredients h2 {
    margin-top: 1.25rem;
    border-top: 0;
    padding-top: 0;
  }
}

/* Print: a clean kitchen copy. Black on white whatever the colour scheme,
   ingredients beside the intro and method, and the reasoning below at full
   width. Scaled quantities print as shown, since the page already holds them. */

@media print {
  :root {
    --bg: #fff !important;
    --surface: #fff !important;
    --fg: #000 !important;
    --muted: #444 !important;
    --rule: #bbb !important;
    --accent: #000 !important;
    --accent-soft: transparent !important;
    --callout: transparent !important;
    color-scheme: light !important;
  }

  @page {
    margin: 1.5cm;
  }

  body {
    font: 10.5pt/1.45 var(--serif);
    padding: 0;
  }

  .bar,
  .timers,
  .tags,
  .step,
  .scaled button,
  .no-print {
    display: none !important;
  }

  main,
  .wide main {
    max-width: none;
    padding: 0;
  }

  h1 {
    font-size: 22pt;
    margin: 0 0 0.2rem;
  }

  h2 {
    font-size: 13pt;
    margin: 1rem 0 0.4rem;
    padding-top: 0.5rem;
    break-after: avoid;
  }

  h3 {
    font-size: 8pt;
    margin: 0.75rem 0 0.2rem;
    break-after: avoid;
  }

  .recipe-head {
    padding-top: 0;
    max-width: none;
  }

  .lede {
    font-size: 11pt;
    margin-bottom: 0.4rem;
  }

  .meta {
    margin-top: 0.4rem;
    padding: 0.4rem 0;
    gap: 0.25rem 1.5rem;
  }

  .meta dd {
    display: block;
  }

  a {
    color: inherit;
    text-decoration: none;
  }

  button.timer {
    font-weight: inherit;
    color: inherit;
    background: none;
    padding: 0;
  }

  button.timer::before {
    content: none;
  }

  /* Ingredients down the left beside the intro and method; everything after
     the method runs full width underneath. */
  .recipe-body {
    display: grid;
    grid-template-columns: 34% minmax(0, 1fr);
    column-gap: 1.5rem;
    align-items: start;
  }

  .recipe-body > * {
    grid-column: 2;
  }

  .recipe-body > #ingredients {
    grid-column: 1;
    grid-row: 1 / span 20;
  }

  .recipe-body > #why-it-works,
  .recipe-body > #wine-pairing,
  .recipe-body > #sources {
    grid-column: 1 / -1;
  }

  #ingredients h2 {
    margin-top: 0.5rem;
    border-top: 0;
    padding-top: 0;
  }

  .intro p {
    margin: 0.5rem 0;
  }

  .ingredients li {
    padding: 0.2rem 0;
    break-inside: avoid;
  }

  .note {
    font-size: 8.5pt;
  }

  .scaled {
    padding: 0;
    font-style: italic;
  }

  #method li {
    padding: 0 0 0.5rem 1.6rem;
    break-inside: avoid;
  }

  #method li::before {
    width: auto;
    height: auto;
    display: block;
    top: 0;
    font-size: 10.5pt;
    color: #000;
    background: none;
    content: counter(step) ".";
  }

  #why-it-works ul {
    padding: 0 0 0 1.2rem;
  }

  #why-it-works li + li {
    margin-top: 0.3rem;
  }

  #wine-pairing,
  #sources {
    font-size: 9pt;
  }

  .print-short #why-it-works,
  .print-short #wine-pairing,
  .print-short #sources {
    display: none;
  }

  #sources a[data-resource]::after {
    content: " (" attr(data-resource) ")";
    color: var(--muted);
    word-break: break-all;
  }
}