/* Recipe pages — layered on top of guides.css so the nav, footer, fonts and
   colour tokens stay identical to the rest of the site. Only the recipe-
   specific blocks live here. */

.r-main {
  max-width: 760px;
  margin: 0 auto;
  padding: 110px 22px 90px;
}

.r-crumbs {
  font-size: 13px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  margin-bottom: 26px;
  color: #8a8580;
}
.r-crumbs a { color: #c9972a; text-decoration: none; }
.r-crumbs a:hover { text-decoration: underline; }
.r-crumbs span { color: #6f6a66; }

.r-eyebrow {
  font-size: 12px;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: #c9972a;
  margin: 0 0 10px;
}

.r-main h1 {
  font-family: 'Playfair Display', Georgia, serif;
  font-style: italic;
  font-size: clamp(34px, 6vw, 52px);
  line-height: 1.1;
  margin: 0 0 12px;
}

.r-sub {
  font-size: 18px;
  color: #8a8580;
  margin: 0 0 30px;
  line-height: 1.5;
}

.r-hero {
  width: 100%;
  height: auto;
  border-radius: 14px;
  display: block;
  margin: 0 0 28px;
}

/* Flavour tags */
.r-tags {
  list-style: none;
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  padding: 0;
  margin: 0 0 30px;
}
.r-tags li {
  font-size: 12px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  padding: 6px 13px;
  border: 1px solid rgba(201, 151, 42, 0.4);
  border-radius: 999px;
  color: #c9972a;
}

/* Spec strip — temps, casing, bloom. Facts, never ratios. */
/* Flex, not grid: a recipe has 3-6 specs, and with grid the last row leaves a
   dead empty cell. Flex lets the final row's tiles stretch to fill it. */
.r-spec {
  display: flex;
  flex-wrap: wrap;
  gap: 1px;
  background: rgba(255, 255, 255, 0.09);
  border: 1px solid rgba(255, 255, 255, 0.09);
  border-radius: 12px;
  overflow: hidden;
  margin: 0 0 40px;
}
.r-spec > div {
  flex: 1 1 150px;
  background: #131110;
  padding: 16px 18px;
}
.r-spec dt {
  font-size: 11px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: #8a8580;
  margin-bottom: 5px;
}
.r-spec dd { margin: 0; font-size: 17px; font-weight: 600; }

.r-main h2 {
  font-family: 'Playfair Display', Georgia, serif;
  font-style: italic;
  font-size: 27px;
  margin: 44px 0 16px;
}

.r-ingredients, .r-meat { padding-left: 0; list-style: none; margin: 0; }
.r-ingredients li, .r-meat li {
  padding: 12px 0;
  border-bottom: 1px solid rgba(255, 255, 255, 0.07);
  font-size: 17px;
}
.r-alt { color: #8a8580; font-size: 15px; }

.r-amounts-note {
  margin: 18px 0 0;
  padding: 14px 16px;
  border-left: 3px solid #c9972a;
  background: rgba(201, 151, 42, 0.07);
  font-size: 15px;
  color: #b9b4ae;
  line-height: 1.55;
}

.r-steps { padding-left: 20px; margin: 0; }
.r-steps li { margin-bottom: 15px; line-height: 1.65; font-size: 17px; }

.r-wood { font-size: 17px; color: #b9b4ae; }

.r-safety {
  margin-top: 44px;
  padding: 22px 24px;
  border: 1px solid rgba(201, 151, 42, 0.32);
  border-radius: 12px;
  background: rgba(201, 151, 42, 0.05);
}
.r-safety h2 { margin-top: 0; font-size: 22px; }
.r-safety ul { padding-left: 20px; margin: 0; }
.r-safety li { margin-bottom: 9px; line-height: 1.6; font-size: 16px; }

/* App call-to-action */
.r-cta {
  margin: 56px 0 0;
  padding: 34px 28px;
  border-radius: 16px;
  background: linear-gradient(160deg, #1b1715, #100e0d);
  border: 1px solid rgba(255, 255, 255, 0.09);
  text-align: center;
}
.r-cta h2 {
  margin: 0 0 12px;
  font-size: 26px;
  font-style: italic;
  font-family: 'Playfair Display', Georgia, serif;
}
.r-cta p { color: #b9b4ae; line-height: 1.6; margin: 0 0 22px; font-size: 16px; }
.r-cta-buttons { display: flex; gap: 12px; justify-content: center; flex-wrap: wrap; }
.r-btn {
  display: inline-block;
  padding: 13px 26px;
  border-radius: 10px;
  border: 1px solid rgba(255, 255, 255, 0.22);
  color: #f2efec;
  text-decoration: none;
  font-weight: 600;
  font-size: 15px;
}
.r-btn-primary { background: #c9972a; border-color: #c9972a; color: #14100c; }
.r-btn:hover { opacity: 0.9; }
.r-cta-note {
  margin: 16px 0 0 !important;
  font-size: 12px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: #8a8580;
}

/* Index */
.r-cat { margin-top: 46px; }
.r-cat h2 { margin-bottom: 14px; }
.r-grid {
  list-style: none;
  padding: 0;
  margin: 0;
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(230px, 1fr));
  gap: 12px;
}
.r-grid a {
  display: block;
  padding: 16px 18px;
  border: 1px solid rgba(255, 255, 255, 0.09);
  border-radius: 12px;
  background: #131110;
  text-decoration: none;
  color: inherit;
  height: 100%;
}
.r-grid a:hover { border-color: rgba(201, 151, 42, 0.55); }
.r-grid-name { display: block; font-weight: 600; font-size: 16px; }
.r-grid-sub {
  display: block;
  margin-top: 4px;
  font-size: 14px;
  color: #8a8580;
  font-style: italic;
}

@media (max-width: 600px) {
  .r-main { padding: 90px 18px 70px; }
  .r-spec > div { flex-basis: 40%; }
}