/*
 * RECIPE PAGE — Dal Makhani
 * =========================
 * Concept: "A stained card from someone's kitchen." Warm, tactile, 
 * inviting. No food blog preamble — just the recipe, beautifully set.
 *
 * Hook: Two-column layout where ingredients stay sticky while steps
 * scroll. As you read a step, the relevant ingredients highlight.
 * You cook like this — glancing left, reading right.
 *
 * Why DM Serif Display? Warm, approachable, slightly quirky serif.
 * Food is personal and imperfect — this font has that same quality.
 * The italic has a lovely handwritten character.
 *
 * Color: Warm spice tones — turmeric, paprika, cream. The palette
 * IS the dish.
 */

:root {
  --font-display: 'DM Serif Display', Georgia, serif;
  --font-mono:    'IBM Plex Mono', 'Consolas', monospace;

  --bg:         #1e1a14;
  --bg-raised:  #282218;
  --text:       #e8ddd0;
  --text-mid:   #b0a290;
  --text-quiet: #6e6450;
  --accent:     #c89848;   /* turmeric gold */
  --accent-dim: #c8984818;
  --highlight:  #c8984820;
  --rule:       #342e24;

  --ease: cubic-bezier(0.25, 0.46, 0.45, 0.94);
}

@media (prefers-color-scheme: light) {
  :root {
    --bg:         #f8f4ec;
    --bg-raised:  #f0ebe0;
    --text:       #302818;
    --text-mid:   #6e6050;
    --text-quiet: #a89880;
    --accent:     #a07828;
    --accent-dim: #a0782818;
    --highlight:  #a0782820;
    --rule:       #e0d8c8;
  }
}

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

body {
  font-family: var(--font-mono);
  font-size: 0.9rem;
  line-height: 1.72;
  color: var(--text);
  background: var(--bg);
  max-width: 900px;
  margin: 0 auto;
  padding: 3rem 2rem;
  -webkit-font-smoothing: antialiased;
}

::selection { background: var(--accent); color: var(--bg); }

/* HEADER */
.header {
  margin-bottom: 3rem;
  padding-bottom: 2rem;
  border-bottom: 1px solid var(--rule);
}

.label {
  font-size: 0.65rem;
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 0.2em;
  color: var(--accent);
  margin-bottom: 0.5rem;
}

.title {
  font-family: var(--font-display);
  font-size: clamp(2rem, 5vw, 3.2rem);
  font-weight: 400;
  line-height: 1.1;
  margin-bottom: 0.6rem;
}

.subtitle {
  font-size: 0.82rem;
  color: var(--text-mid);
  max-width: 480px;
  line-height: 1.6;
  margin-bottom: 1.5rem;
}

.meta {
  display: flex;
  flex-wrap: wrap;
  gap: 1.5rem;
}

.meta__item {
  display: flex;
  flex-direction: column;
  gap: 0.15rem;
}

.meta__key {
  font-size: 0.6rem;
  text-transform: uppercase;
  letter-spacing: 0.15em;
  color: var(--text-quiet);
}

.meta__val {
  font-size: 0.8rem;
  color: var(--text);
  font-weight: 500;
}

/* RECIPE GRID — ingredients sticky left, steps scroll right */
.recipe-grid {
  display: grid;
  grid-template-columns: 260px 1fr;
  gap: 3rem;
  align-items: start;
}

.section-label {
  font-size: 0.62rem;
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 0.18em;
  color: var(--text-quiet);
  margin-bottom: 1.2rem;
}

/* INGREDIENTS — sticky sidebar */
.ingredients {
  position: sticky;
  top: 2rem;
}

.ing-list {
  list-style: none;
}

.ing-list li {
  font-size: 0.78rem;
  color: var(--text-mid);
  line-height: 1.65;
  padding: 0.25rem 0.5rem;
  border-left: 2px solid transparent;
  transition: all 0.3s var(--ease);
}

/* Active ingredient highlight — synced to step in view */
.ing-list li.ing--active {
  color: var(--text);
  border-left-color: var(--accent);
  background: var(--highlight);
}

.ing-divider {
  height: 0.8rem;
  border-left: none !important;
}

/* STEPS */
.steps {
  list-style: none;
  counter-reset: none;
}

.step {
  display: grid;
  grid-template-columns: 2.5rem 1fr;
  gap: 0.8rem;
  margin-bottom: 2.2rem;
  /* reveal */
  opacity: 0;
  transform: translateY(8px);
  transition: opacity 0.5s var(--ease), transform 0.5s var(--ease);
}

.step.is-visible {
  opacity: 1;
  transform: translateY(0);
}

.step__num {
  font-family: var(--font-display);
  font-size: 1.3rem;
  color: var(--text-quiet);
  line-height: 1.5;
}

.step__text p {
  font-size: 0.86rem;
  color: var(--text-mid);
  line-height: 1.75;
  margin-bottom: 0.6rem;
}

.step__text strong {
  color: var(--text);
  font-weight: 500;
}

.step__aside {
  font-style: italic;
  font-size: 0.8rem;
  color: var(--text-quiet);
}

/* RESPONSIVE */
@media (max-width: 700px) {
  .recipe-grid {
    grid-template-columns: 1fr;
    gap: 2rem;
  }

  .ingredients {
    position: static;
    padding-bottom: 1.5rem;
    border-bottom: 1px solid var(--rule);
  }
}

@media (max-width: 480px) {
  body { padding: 2rem 1rem; }
  .step { grid-template-columns: 1.8rem 1fr; }
}

@media (prefers-reduced-motion: reduce) {
  .step { opacity: 1; transform: none; transition: none; }
  .ing-list li { transition: none; }
}