:root {
  --ink: #241a12;
  --muted: #6f5f4f;
  --cream: #fff7ea;
  --paper: #fffdf7;
  --tomato: #bf3f2f;
  --tomato-dark: #8f2d22;
  --sage: #6f7f52;
  --gold: #e0a63a;
  --line: rgba(36, 26, 18, 0.14);
  font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
  margin: 0;
  color: var(--ink);
  background: radial-gradient(circle at top left, #fff1d6, transparent 35rem), var(--cream);
}
a { color: inherit; }

.hero {
  min-height: 72vh;
  padding: 1.25rem clamp(1rem, 4vw, 4rem) 4rem;
  background:
    linear-gradient(135deg, rgba(36,26,18,.76), rgba(36,26,18,.28)),
    url('https://images.unsplash.com/photo-1504674900247-0877df9cc836?auto=format&fit=crop&w=1800&q=80') center/cover;
  color: white;
}
.nav { display: flex; justify-content: space-between; align-items: center; gap: 1rem; }
.brand { font-weight: 900; font-size: clamp(1.4rem, 2vw, 2rem); text-decoration: none; letter-spacing: .03em; }
.nav-links { display: flex; gap: 1rem; font-weight: 700; }
.nav-links a { text-decoration: none; opacity: .9; }
.hero-copy { max-width: 760px; margin-top: clamp(5rem, 12vw, 10rem); }
.eyebrow { text-transform: uppercase; letter-spacing: .14em; font-weight: 900; font-size: .78rem; color: var(--gold); margin: 0 0 .75rem; }
h1, h2, h3 { margin: 0; line-height: .96; }
h1 { font-size: clamp(3.4rem, 10vw, 7.8rem); letter-spacing: -.08em; }
h2 { font-size: clamp(2rem, 5vw, 4rem); letter-spacing: -.055em; }
h3 { font-size: 1.35rem; }
.lede { font-size: clamp(1.05rem, 2vw, 1.35rem); max-width: 48rem; line-height: 1.55; color: rgba(255,255,255,.9); }
.actions { display: flex; gap: .9rem; flex-wrap: wrap; margin-top: 1.6rem; }
.button { display: inline-flex; padding: .9rem 1.15rem; border-radius: 999px; font-weight: 900; text-decoration: none; }
.primary { background: var(--tomato); color: white; }
.secondary { background: rgba(255,255,255,.16); border: 1px solid rgba(255,255,255,.42); color: white; }

main { padding: clamp(1rem, 4vw, 4rem); }
.panel, .section { max-width: 1180px; margin: 0 auto clamp(2rem, 5vw, 4rem); }
.panel {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.4fr);
  gap: 2rem;
  background: var(--paper);
  border: 1px solid var(--line);
  border-radius: 28px;
  padding: clamp(1.2rem, 4vw, 2.5rem);
  box-shadow: 0 22px 60px rgba(36, 26, 18, .08);
}
.panel p, .panel li { font-size: 1.05rem; line-height: 1.7; color: var(--muted); }
.section-heading { margin-bottom: 1.5rem; }
.recipe-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 1rem; }
.card {
  background: var(--paper);
  border: 1px solid var(--line);
  border-radius: 24px;
  padding: 1rem;
  box-shadow: 0 16px 44px rgba(36, 26, 18, .07);
}
.card img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; border-radius: 18px; background: #eadfcf; }
.card p { color: var(--muted); line-height: 1.5; }
.tags { display: flex; gap: .35rem; flex-wrap: wrap; }
.tag { font-size: .72rem; font-weight: 900; color: var(--tomato-dark); background: #ffe4dc; border-radius: 999px; padding: .3rem .55rem; }
.meta { display: flex; gap: .8rem; color: var(--sage); font-weight: 900; font-size: .85rem; }
.video-placeholder { border: 2px dashed rgba(36,26,18,.2); border-radius: 28px; padding: 3rem; text-align: center; background: rgba(255,255,255,.55); color: var(--muted); }
.submit ul { margin: 0; columns: 2; }
footer { padding: 2rem; text-align: center; color: var(--muted); }

@media (max-width: 720px) {
  .nav { align-items: flex-start; flex-direction: column; }
  .panel { grid-template-columns: 1fr; }
  .submit ul { columns: 1; }
}

.recipe-link { display: block; color: inherit; text-decoration: none; transition: transform .16s ease, box-shadow .16s ease; }
.recipe-link:hover { transform: translateY(-3px); box-shadow: 0 22px 56px rgba(36, 26, 18, .12); }
.open-recipe { display: inline-block; margin-top: .9rem; font-weight: 900; color: var(--tomato-dark); }
.recipe-page { background: var(--paper); }
.recipe-hero { min-height: auto; padding-bottom: 2rem; }
.recipe-detail { max-width: 1080px; margin: -2rem auto 4rem; padding: 0 clamp(1rem, 4vw, 4rem); }
.recipe-sheet { background: var(--paper); border: 1px solid var(--line); border-radius: 28px; overflow: hidden; box-shadow: 0 22px 60px rgba(36, 26, 18, .1); }
.recipe-sheet img { width: 100%; max-height: 560px; object-fit: cover; display: block; }
.recipe-body { padding: clamp(1.25rem, 4vw, 3rem); display: grid; grid-template-columns: minmax(0, .8fr) minmax(0, 1fr); gap: 2rem; }
.recipe-body h2 { font-size: clamp(1.5rem, 3vw, 2.4rem); margin-bottom: 1rem; }
.recipe-body li { margin-bottom: .75rem; line-height: 1.5; color: var(--muted); }
.recipe-story { font-size: 1.15rem; line-height: 1.7; color: var(--muted); }
.back-link { display: inline-flex; margin: 1rem 0; color: white; font-weight: 900; text-decoration: none; }
@media (max-width: 800px) { .recipe-body { grid-template-columns: 1fr; } }