/* Goldenlay Recipes — matches the wireframe theme's tokens, with fallbacks so
   recipe pages still look right if the theme is ever swapped. */
:root {
	--gl-gold: var(--gold, #b8860b);
	--gl-ink: var(--ink, #2b2b2b);
	--gl-ink-soft: var(--ink-soft, #5a5752);
	--gl-hand: var(--hand, 'Caveat', cursive);
	--gl-body: var(--body, 'Kalam', 'Caveat', cursive);
}

/* Recipe cards inherit the theme .card look; this just tidies the <a> wrapper
   and adds the meta line. */
.gl-recipe-card { display: block; text-decoration: none; color: inherit; }
.gl-recipe-card:hover { text-decoration: none; }
.gl-recipe-card .card-body { display: block; }
.gl-recipe-meta {
	font-family: var(--gl-body); font-size: 13px; color: var(--gl-ink-soft);
	margin: 8px 0 2px; letter-spacing: .2px;
}

/* Single recipe */
.gl-recipe { position: relative; }
.gl-back {
	display: inline-block; font-family: var(--gl-hand); font-size: 17px;
	color: var(--gl-gold); text-decoration: none; margin-bottom: 14px;
}
.gl-back:hover { text-decoration: underline; }
.gl-recipe-intro { max-width: 64ch; }

.gl-recipe-stats {
	display: flex; flex-wrap: wrap; gap: 14px; margin: 20px 0 26px;
}
.gl-stat {
	display: flex; flex-direction: column; gap: 2px;
	border: 1.5px solid #d7d2c6; border-radius: 14px;
	padding: 10px 18px; background: var(--paper, #f7f5ef);
	min-width: 96px;
}
.gl-stat-k {
	font-family: var(--gl-body); font-size: 11px; letter-spacing: 2px;
	text-transform: uppercase; color: var(--gl-gold); font-weight: 700;
}
.gl-stat-v { font-family: var(--gl-hand); font-size: 22px; color: var(--gl-ink); line-height: 1; }

.gl-recipe-hero { min-height: 380px; margin-top: 8px; }

.gl-recipe-body { align-items: start; }

/* Numbered method list with hand-drawn gold counters */
.gl-steps-list {
	list-style: none; counter-reset: gl-step; margin: 6px 0 0; padding: 0;
	display: flex; flex-direction: column; gap: 16px;
}
.gl-steps-list li {
	counter-increment: gl-step; display: flex; gap: 14px; align-items: flex-start;
	font-family: var(--gl-body); font-weight: 300; font-size: 16.5px;
	color: var(--gl-ink-soft); max-width: 60ch;
}
.gl-steps-list li::before {
	content: counter(gl-step); flex: none;
	width: 32px; height: 32px; border-radius: 255px 15px 225px 15px / 15px 225px 15px 255px;
	border: 2px solid var(--gl-gold); color: var(--gl-gold);
	font-family: var(--gl-hand); font-weight: 700; font-size: 18px;
	display: grid; place-items: center; line-height: 1;
}

@media (max-width: 760px) {
	.gl-recipe-hero { min-height: 260px; }
}