/* Hebrew titles: Varela Round (hebrew subset, self-hosted). Chosen over the
   default Hebrew serif fallback, which reads as dated print. */
@font-face {
  font-family: "Varela Round";
  font-display: swap;
  src: url(fonts/varela-round-hebrew.woff2) format("woff2");
}

:root {
  color-scheme: light;
  --paper: #f6f1e7;
  --card: #fbf8f1;
  --ink: #33302a;
  --muted: #7c766a;
  --line: #e0d8c8;
  --accent: #b3543e;
  --serif: Georgia, "Times New Roman", serif;
}

* {
  box-sizing: border-box;
}

body {
  max-width: 42rem;
  margin: 0 auto;
  padding: 0 1.15rem 4rem;
  background: var(--paper);
  color: var(--ink);
  font-family: system-ui, sans-serif;
  font-size: 17px;
  line-height: 1.65;
}

/* Each element belongs to one language; the toggle shows one at a time. */
html[data-lang="en"] .he { display: none; }
html[data-lang="he"] .en { display: none; }

/* Blocks that hold bilingual inline spans (the index list) follow the page
   language; recipe articles carry their own dir attribute instead. */
html[data-lang="he"] .recipe-list { direction: rtl; }
html[data-lang="he"] header { flex-direction: row-reverse; }

header {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: .5rem 1rem;
  padding: 1rem 0 .8rem;
  border-bottom: 2px solid var(--ink);
}

header > a {
  font-family: var(--serif);
  font-style: italic;
  font-size: 1.05rem;
  color: var(--ink);
  text-decoration: none;
}

header > a .he { font-style: normal; }

.controls {
  display: flex;
  align-items: center;
  gap: .5rem;
}

.pill {
  padding: .35rem .8rem;
  border: 1px solid var(--ink);
  border-radius: 999px;
  background: transparent;
  color: var(--ink);
  font: inherit;
  font-size: .8rem;
  cursor: pointer;
}

/* Hover styles only for real pointers: on touch, tap-emulated hover sticks
   until the next tap, leaving pills looking pressed/active. */
@media (hover: hover) {
  header > a:hover { color: var(--accent); }

  .pill:hover {
    background: var(--ink);
    color: var(--paper);
  }

  .recipe-list a:hover { color: var(--accent); }
}

html.details #details-toggle,
html.cook #cook-toggle {
  background: var(--ink);
  color: var(--paper);
}

h1 {
  margin: 2.4rem 0 2rem;
  font-family: var(--serif);
  font-weight: 400;
  font-size: clamp(1.9rem, 7vw, 2.6rem);
  line-height: 1.15;
  text-align: center;
}

h1::after {
  content: "";
  display: block;
  width: 3.5rem;
  height: 2px;
  margin: 1.1rem auto 0;
  background: var(--accent);
}

/* Hebrew display text (titles, wordmark, index entries) uses Varela Round;
   Hebrew body text stays on the system font. */
article[lang="he"] h1,
h1 .he,
header > a .he,
.recipe-list .entry > .he {
  font-family: "Varela Round", system-ui, sans-serif;
}

.times {
  margin: -1.3rem 0 2.2rem;
  text-align: center;
  font-family: var(--serif);
  font-style: italic;
  font-size: .95rem;
  color: var(--muted);
}

article[lang="he"] .times { font-style: normal; }

h2 {
  margin: 2.4rem 0 .9rem;
  font-size: .82rem;
  font-weight: 600;
  letter-spacing: .22em;
  text-transform: uppercase;
  color: var(--accent);
}

article[lang="he"] h2 {
  letter-spacing: 0;
  font-size: .95rem;
}

article ul {
  margin: 0;
  padding: .4rem 1.15rem;
  list-style: none;
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: 4px;
}

article ul li { padding: .55rem 0; }

article ul li + li { border-top: 1px dotted var(--line); }

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

article ol li {
  counter-increment: step;
  position: relative;
  padding: .55rem 0;
  padding-inline-start: 2.9rem;
}

article ol li::before {
  content: counter(step);
  position: absolute;
  inset-inline-start: .15rem;
  top: .3rem;
  font-family: var(--serif);
  font-size: 1.7rem;
  color: var(--accent);
}

/* Per-item detail notes, revealed by the Details toggle. */
.note {
  display: none;
  margin-top: .1rem;
  font-size: .85rem;
  color: var(--muted);
}

html.details .note { display: block; }

/* Reference charts: a label column that may carry a note, and a value. */
.chart {
  width: 100%;
  border-collapse: collapse;
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: 4px;
}

.chart th,
.chart td {
  padding: .65rem 1.15rem;
  font-weight: 400;
  text-align: start;
  vertical-align: baseline;
}

/* Values keep to one line, so a chart value stays terse: anything longer
   belongs after a ' · ', which renders as its own line below. */
.chart td {
  text-align: end;
  font-weight: 600;
  white-space: nowrap;
}

.chart td small {
  display: block;
  font-weight: 400;
  font-size: .8rem;
  white-space: nowrap;
  color: var(--muted);
}

.chart tr + tr th,
.chart tr + tr td {
  border-top: 1px dotted var(--line);
}

.sources {
  font-size: .9rem;
}

.sources a {
  color: var(--accent);
  overflow-wrap: anywhere;
}

.photo {
  display: block;
  width: 100%;
  max-width: 26rem;
  margin: 0 auto 2.2rem;
  border: 1px solid var(--line);
  outline: 6px solid var(--card);
  outline-offset: -7px;
  box-shadow: 0 10px 24px rgba(51, 48, 42, .14);
  transform: rotate(-.6deg);
}

/* Extra photos: a strip at the end, so only the first one opens the recipe. */
.gallery {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 1.6rem;
  margin: 2.8rem 0 1rem;
}

.gallery .photo {
  flex: 1 1 11rem;
  /* Without this, an img's automatic minimum is its intrinsic (huge) width. */
  min-width: 0;
  max-width: 18rem;
  margin: 0;
  transform: rotate(.5deg);
}

.gallery .photo:nth-child(even) { transform: rotate(-.7deg); }

/* Cook Mode: bigger, tappable, no distractions; screen kept awake via JS. */
html.cook body { font-size: 20px; }

html.cook .photo,
html.cook .gallery,
html.cook .times { display: none; }

html.cook h1 {
  margin: 1.2rem 0 1.4rem;
  font-size: 1.6rem;
}

html.cook [data-check] {
  cursor: pointer;
  user-select: none;
  -webkit-tap-highlight-color: transparent;
}

html.cook article ol li { padding-block: .75rem; }

[data-check].checked {
  opacity: .4;
  text-decoration: line-through;
}

/* Section divider on the index; the article h2 rules above style it. */
.index-heading {
  margin-top: 3rem;
  text-align: center;
}

.index-heading .he {
  letter-spacing: 0;
}

.recipe-list {
  margin: 0;
  padding: .25rem 1.15rem;
  list-style: none;
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: 4px;
}

.recipe-list li + li { border-top: 1px dotted var(--line); }

.recipe-list a {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  min-height: 3.6rem;
  padding: .6rem 0;
  font-family: var(--serif);
  font-size: 1.1rem;
  color: var(--ink);
  text-decoration: none;
}

.recipe-list small {
  display: block;
  font-family: system-ui, sans-serif;
  font-size: .76rem;
  color: var(--muted);
}

.recipe-list small b {
  font-weight: 600;
}

.recipe-list img {
  flex: none;
  width: 3.2rem;
  height: 3.2rem;
  object-fit: cover;
  border: 1px solid var(--line);
  outline: 3px solid #fff;
  outline-offset: -4px;
}