/* ==========================================================================
   Makamboo Recipes
   Ported from the approved design preview. Section numbers follow the preview
   so a rule can be found in either file by the same heading.
   ========================================================================== */

/* Disabled for this file: the rule flags hover states in one component against base
   styles in an unrelated one, and the fixes would either break the section ordering
   or move away from the selectors wp_nav_menu actually produces. */
/* stylelint-disable no-descending-specificity */

/* --------------------------------------------------------------------------
   1. Tokens
   Shared with assets/css/main.css. Tokens marked NEW are additions this
   design needs and should be back-ported. See README.md.
   -------------------------------------------------------------------------- */
:root {
	/* Colour, from main.css */
	--color-brand: #b64f2b;
	--color-brand-dark: #8f3c1d;
	--color-ink: #1f1b18;
	--color-ink-muted: #5d564f;
	--color-surface: #fff;
	--color-surface-alt: #f6f2ec;
	--color-line: #cfc7bd;

	/* Colour, NEW */
	--color-brand-soft: #f9ece5;
	--color-accent: #4f6146;
	--color-accent-soft: #eceee8;
	--color-ink-faint: #756d65;
	--color-ad-fill: #ebe7e0;

	/* Spacing, from main.css */
	--space-1: 0.25rem;
	--space-2: 0.5rem;
	--space-3: 1rem;
	--space-4: 1.5rem;
	--space-5: 2.5rem;
	--space-6: 4rem;

	/* Spacing, NEW */
	--space-7: 6rem;

	/* Type, from main.css */
	--font-body: system-ui, -apple-system, "Segoe UI", roboto, "Helvetica Neue", arial, sans-serif;
	--font-display: georgia, "Iowan Old Style", "Times New Roman", serif;

	/* Type scale, NEW. Mirrors theme.json font sizes where they overlap. */
	--text-xs: 0.8125rem;
	--text-sm: 0.875rem;
	--text-base: 1rem;
	--text-lg: 1.25rem;
	--text-xl: 1.75rem;
	--text-2xl: 2.5rem;
	--text-3xl: 3.25rem;
	--tracking-wide: 0.09em;

	/* Layout, from main.css */
	--container-width: 72rem;
	--content-width: 42rem;
	--radius: 4px;

	/* Layout, NEW */
	--radius-lg: 14px;
	--radius-pill: 999px;
	--header-height: 6.5rem;
	--sidebar-width: 300px;
	--shadow-1: 0 1px 2px rgb(31 27 24 / 6%), 0 8px 24px rgb(31 27 24 / 6%);
	--shadow-2: 0 1px 3px rgb(31 27 24 / 10%), 0 18px 40px rgb(31 27 24 / 10%);
	--transition: 160ms ease;
}

/* --------------------------------------------------------------------------
   2. Reset and base
   -------------------------------------------------------------------------- */
*,
*::before,
*::after {
	box-sizing: border-box;
}

body,
h1,
h2,
h3,
h4,
p,
figure,
blockquote,
ol,
ul,
fieldset {
	margin: 0;
	padding: 0;
}

ol,
ul {
	list-style: none;
}

fieldset {
	border: 0;
}

img,
picture,
svg,
video {
	display: block;
	max-width: 100%;
	height: auto;
}

button,
input,
select,
textarea {
	font: inherit;
	color: inherit;
}

html {
	scroll-behavior: smooth;
}

body {
	font-family: var(--font-body);
	font-size: var(--text-base);
	line-height: 1.65;
	color: var(--color-ink);
	background-color: var(--color-surface);
	-webkit-font-smoothing: antialiased;
}

h1,
h2,
h3,
h4 {
	font-family: var(--font-display);
	font-weight: 400;
	line-height: 1.15;
	letter-spacing: -0.01em;
	text-wrap: balance;
}

a {
	color: var(--color-brand);
	text-decoration-thickness: 1px;
	text-underline-offset: 0.18em;
}

a:hover {
	color: var(--color-brand-dark);
}

:focus-visible {
	outline: 2px solid var(--color-brand);
	outline-offset: 3px;
	border-radius: 2px;
}

::selection {
	color: var(--color-surface);
	background-color: var(--color-brand);
}

/* --------------------------------------------------------------------------
   3. Utilities
   -------------------------------------------------------------------------- */
.container {
	width: 100%;
	max-width: var(--container-width);
	margin-inline: auto;
	padding-inline: var(--space-3);
}

.sr-only,
.screen-reader-text {
	position: absolute;
	width: 1px;
	height: 1px;
	overflow: hidden;
	clip-path: inset(50%);
	white-space: nowrap;
}

.skip-link {
	position: absolute;
	top: 0;
	left: var(--space-3);
	z-index: 100;
	padding: var(--space-2) var(--space-3);
	color: var(--color-ink);
	background-color: var(--color-surface);
	border-radius: 0 0 var(--radius) var(--radius);
	box-shadow: var(--shadow-1);
	transform: translateY(-250%);
	transition: transform var(--transition);
}

.skip-link:focus {
	transform: translateY(0);
}

.is-hidden {
	display: none;
}

[hidden] {
	display: none !important;
}

/* --------------------------------------------------------------------------
   4. Type helpers
   -------------------------------------------------------------------------- */
.eyebrow {
	font-family: var(--font-body);
	font-size: var(--text-xs);
	font-weight: 600;
	letter-spacing: var(--tracking-wide);
	text-transform: uppercase;
	color: var(--color-brand-dark);
}

.meta {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: var(--space-2);
	font-size: var(--text-sm);
	color: var(--color-ink-muted);
}

.meta__dot {
	width: 3px;
	height: 3px;
	border-radius: 50%;
	background-color: var(--color-ink-faint);
}

.section {
	padding-block: var(--space-6);
}

.section--alt {
	background-color: var(--color-surface-alt);
}

.section-head {
	display: flex;
	flex-wrap: wrap;
	align-items: baseline;
	justify-content: space-between;
	gap: var(--space-2) var(--space-4);
	margin-bottom: var(--space-4);
}

.section-title {
	font-size: var(--text-xl);
}

.section-link {
	font-size: var(--text-sm);
	font-weight: 600;
	color: var(--color-ink);
}

.link-button {
	padding: 0;
	font-size: var(--text-sm);
	font-weight: 600;
	color: var(--color-ink);
	text-decoration: underline;
	text-underline-offset: 0.18em;
	background: none;
	border: 0;
	cursor: pointer;
}

.link-button:hover {
	color: var(--color-brand-dark);
}

.stars {
	color: var(--color-brand);
	letter-spacing: 0.06em;
}

/* --------------------------------------------------------------------------
   5. Buttons, tags, chips, fields
   -------------------------------------------------------------------------- */
.button {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: var(--space-2);
	padding: 0.7rem var(--space-4);
	font-size: var(--text-sm);
	font-weight: 600;
	line-height: 1.2;
	color: var(--color-surface);
	text-decoration: none;
	background-color: var(--color-brand);
	border: 1px solid var(--color-brand);
	border-radius: var(--radius-pill);
	cursor: pointer;
	transition: background-color var(--transition), border-color var(--transition);
}

.button:hover {
	color: var(--color-surface);
	background-color: var(--color-brand-dark);
	border-color: var(--color-brand-dark);
}

.button--ghost {
	color: var(--color-ink);
	background-color: transparent;
	border-color: var(--color-line);
}

.button--ghost:hover {
	color: var(--color-ink);
	background-color: var(--color-surface-alt);
	border-color: var(--color-ink-faint);
}

.tag-row {
	display: flex;
	flex-wrap: wrap;
	gap: var(--space-2);
}

.tag {
	display: inline-block;
	padding: 0.2rem 0.7rem;
	font-size: var(--text-xs);
	font-weight: 600;
	letter-spacing: 0.02em;
	color: var(--color-brand-dark);
	text-decoration: none;
	background-color: var(--color-brand-soft);
	border-radius: var(--radius-pill);
}

.tag:hover {
	color: var(--color-surface);
	background-color: var(--color-brand-dark);
}

.tag--diet {
	color: var(--color-accent);
	background-color: var(--color-accent-soft);
}

.tag--diet:hover {
	color: var(--color-surface);
	background-color: var(--color-accent);
}

.field {
	width: 100%;
	padding: 0.7rem var(--space-3);
	background-color: var(--color-surface);
	border: 1px solid var(--color-line);
	border-radius: var(--radius-pill);
}

.field::placeholder {
	color: var(--color-ink-faint);
}

.icon-button {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 2.5rem;
	height: 2.5rem;
	color: var(--color-ink);
	background-color: transparent;
	border: 1px solid transparent;
	border-radius: 50%;
	cursor: pointer;
	transition: background-color var(--transition);
}

.icon-button:hover {
	background-color: var(--color-surface-alt);
}

.icon-button svg {
	width: 20px;
	height: 20px;
}

/* --------------------------------------------------------------------------
   6. Site header, navigation, inline search
   -------------------------------------------------------------------------- */
.site-header {
	position: sticky;
	top: 0;
	z-index: 50;
	background-color: color-mix(in srgb, var(--color-surface) 92%, transparent);
	border-bottom: 1px solid var(--color-line);
	backdrop-filter: blur(8px);
}

.site-header__inner {
	display: flex;
	align-items: center;
	gap: var(--space-3);
	min-height: var(--header-height);
}

.wordmark {
	flex-shrink: 0;
	line-height: 0;
	color: var(--color-ink);
}

.wordmark .logo {
	height: 56px;
}

.site-nav {
	order: 3;
	width: 100%;
}

.nav-menu {
	display: flex;
	flex-direction: column;
	gap: var(--space-1);
	padding-bottom: var(--space-3);
	border-top: 1px solid var(--color-line);
}

.nav-menu a {
	display: block;
	padding: var(--space-2) 0;
	font-size: var(--text-sm);
	font-weight: 700;
	letter-spacing: var(--tracking-wide);
	text-transform: uppercase;
	color: var(--color-ink);
	text-decoration: none;
}

.nav-menu a:hover,
.nav-menu a[aria-current="page"] {
	color: var(--color-brand-dark);
}

.header-actions {
	display: flex;
	gap: var(--space-1);
	margin-left: auto;
}

/* Without JavaScript the menu stays open and the toggle stays hidden. */
.nav-toggle {
	display: none;
}

.has-js .nav-toggle {
	display: inline-flex;
}

.has-js .site-nav {
	display: none;
}

.has-js .site-nav.is-open {
	display: block;
}

.site-search {
	padding-bottom: var(--space-3);
	border-top: 1px solid var(--color-line);
}

.site-search__form {
	display: flex;
	gap: var(--space-2);
	padding-top: var(--space-3);
}

/* --------------------------------------------------------------------------
   7. Hero
   -------------------------------------------------------------------------- */
.hero {
	padding-block: var(--space-5) var(--space-6);
}

.hero__grid {
	display: grid;
	gap: var(--space-4);
}

.hero__media img {
	width: 100%;
	aspect-ratio: 4 / 3;
	object-fit: cover;
	border-radius: var(--radius-lg);
}

.hero__body {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: var(--space-3);
}

.hero__title {
	font-size: clamp(var(--text-xl), 6vw, var(--text-3xl));
}

.hero__title a {
	color: inherit;
	text-decoration: none;
}

.hero__title a:hover {
	color: var(--color-brand-dark);
}

.hero__dek {
	max-width: 34rem;
	font-size: var(--text-lg);
	color: var(--color-ink-muted);
}

/* --------------------------------------------------------------------------
   8. Course tiles
   -------------------------------------------------------------------------- */
.course-rail {
	display: flex;
	gap: var(--space-3);
	padding-bottom: var(--space-2);
	overflow-x: auto;
	scroll-snap-type: x mandatory;
	scrollbar-width: thin;
}

.course-tile {
	flex: 0 0 7.5rem;
	scroll-snap-align: start;
	text-align: center;
	text-decoration: none;
	color: var(--color-ink);
}

.course-tile img {
	width: 100%;
	aspect-ratio: 1;
	object-fit: cover;
	border-radius: 50%;
	transition: transform var(--transition);
}

.course-tile:hover img {
	transform: scale(1.04);
}

.course-tile__label {
	display: block;
	margin-top: var(--space-2);
	font-size: var(--text-sm);
	font-weight: 600;
}

.course-tile__count {
	display: block;
	font-size: var(--text-xs);
	color: var(--color-ink-muted);
}

/* --------------------------------------------------------------------------
   9. Recipe card grid
   -------------------------------------------------------------------------- */
.card-grid {
	display: grid;
	gap: var(--space-5) var(--space-4);
	grid-template-columns: 1fr;
}

.card__link {
	display: block;
	color: inherit;
	text-decoration: none;
}

.card__media {
	overflow: hidden;
	border-radius: var(--radius-lg);
	background-color: var(--color-surface-alt);
}

.card__media img {
	width: 100%;
	aspect-ratio: 1;
	object-fit: cover;
	transition: transform 300ms ease;
}

.card__link:hover .card__media img {
	transform: scale(1.03);
}

.card__title {
	margin-top: var(--space-3);
	font-size: var(--text-lg);
}

.card__link:hover .card__title {
	color: var(--color-brand-dark);
}

.card__meta {
	margin-top: var(--space-2);
}

.card__excerpt {
	margin-top: var(--space-2);
	font-size: var(--text-sm);
	color: var(--color-ink-muted);
}

/* -------------------------------------------------------------------------
   10. Popular strip
   ------------------------------------------------------------------------- */
.popular-list {
	display: grid;
	gap: var(--space-4);
}

.popular-item {
	display: grid;
	grid-template-columns: 2rem 5rem minmax(0, 1fr);
	align-items: center;
	gap: var(--space-3);
}

.popular-item__rank {
	font-family: var(--font-display);
	font-size: var(--text-xl);
	color: var(--color-ink-faint);
}

.popular-item__media img {
	width: 5rem;
	aspect-ratio: 1;
	object-fit: cover;
	border-radius: var(--radius);
}

.popular-item__title {
	font-size: var(--text-base);
	font-family: var(--font-display);
}

.popular-item__title a {
	color: inherit;
	text-decoration: none;
}

.popular-item__title a:hover {
	color: var(--color-brand-dark);
}

/* -------------------------------------------------------------------------
   11. Newsletter
   ------------------------------------------------------------------------- */
.newsletter {
	padding: var(--space-5) var(--space-3);
	text-align: center;
	background-color: var(--color-brand-soft);
	border-radius: var(--radius-lg);
}

.newsletter__title {
	font-size: var(--text-xl);
}

.newsletter__dek {
	max-width: 32rem;
	margin: var(--space-2) auto 0;
	color: var(--color-ink-muted);
}

/* -------------------------------------------------------------------------
   6b. Announcement bar and tagline band
   ------------------------------------------------------------------------- */
.announce {
	color: var(--color-surface);
	background-color: var(--color-brand-dark);
}

.announce__inner {
	position: relative;
	display: flex;
	align-items: center;
	justify-content: center;
	gap: var(--space-3);
	min-height: 2.5rem;
}

.announce__text {
	display: flex;
	align-items: center;
	gap: var(--space-2);
	font-size: var(--text-xs);
	text-align: center;
}

.announce__link {
	font-weight: 700;
	letter-spacing: var(--tracking-wide);
	text-transform: uppercase;
	color: var(--color-surface);
}

.announce__dismiss {
	position: absolute;
	right: 0;
	top: 50%;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 1.75rem;
	height: 1.75rem;
	color: inherit;
	background: none;
	border: 0;
	cursor: pointer;
	transform: translateY(-50%);
}

.announce__dismiss svg {
	width: 14px;
	height: 14px;
}

/* One line only. Below this the copy would wrap, so the bar is hidden. */
@media (max-width: 29.99rem) {
	.announce {
		display: none;
	}
}

/* Sits below the header rule, outside the sticky header, so it scrolls away. */
.tagline {
	padding-block: var(--space-3);
	text-align: center;
}

.tagline__text {
	display: flex;
	flex-wrap: wrap;
	align-items: baseline;
	justify-content: center;
	gap: var(--space-2);
}

.tagline__lead {
	font-size: var(--text-sm);
	letter-spacing: var(--tracking-wide);
	text-transform: uppercase;
	color: var(--color-ink-muted);
}

/* The phrase after the lead carries the personality. Display face, italic and
   larger, in brand so it reads as a different voice from the caps. */
.tagline__script {
	font-family: var(--font-display);
	font-size: var(--text-xl);
	font-style: italic;
	line-height: 1.1;
	color: var(--color-brand-dark);
}

/* -------------------------------------------------------------------------
   11b. Logo
   Every path uses currentcolor, so the mark and wordmark follow the palette and
   invert correctly on --color-brand-dark. The stem is the one second tone and it
   inherits --color-accent.
   ------------------------------------------------------------------------- */
.logo__body,
.logo__stem,
.logo__knock {
	fill: none;
	stroke: currentcolor;
	stroke-linecap: round;
	stroke-linejoin: round;
}

/* The stem is the one second tone. Measured across all 22 palettes it clears
   4.5 on --color-surface but only reaches 1.03 to 1.80 on --color-brand-dark,
   so anywhere the logo sits on the brand block it falls back to currentcolor
   and the mark becomes a single flat silhouette. */
.logo__stem {
	stroke: var(--color-accent);
}

.logo--onbrand .logo__stem,
.announce .logo__stem,
.footer-panel .logo__stem,
.cta-band .logo__stem {
	stroke: currentcolor;
}

.logo__disc {
	fill: currentcolor;
}

.logo__knock {
	stroke: var(--color-surface);
}

.logo {
	display: block;
	width: auto;
}

/* -------------------------------------------------------------------------
   11c. Featured category row
   Full bleed tiles above a circle rail. The tiles sit outside .container, the
   same technique the CTA band uses, so nothing needs a negative margin.
   ------------------------------------------------------------------------- */
.featured {
	padding-block: var(--space-4) var(--space-5);
}

/* Scrolls with snap on a phone rather than shrinking the tiles to nothing. */
.featured__tiles {
	display: flex;
	gap: var(--space-1);
	overflow-x: auto;
	scroll-snap-type: x mandatory;
	scrollbar-width: thin;
}

.tile {
	position: relative;
	flex: 0 0 68%;
	scroll-snap-align: start;
	padding-bottom: 16px;
	color: inherit;
	text-decoration: none;
}

.tile__media {
	overflow: hidden;
	background-color: var(--color-surface-alt);
}

.tile__media img {
	width: 100%;
	aspect-ratio: 3 / 4;
	object-fit: cover;
	transition: transform 300ms ease;
}

.tile:hover .tile__media img {
	transform: scale(1.03);
}

/* Hard rectangle hanging over the bottom edge of the photo. */
.tile__label {
	position: absolute;
	bottom: 0;
	left: 50%;
	max-width: calc(100% - var(--space-4));
	padding: var(--space-2) var(--space-3);
	font-size: var(--text-xs);
	font-weight: 600;
	letter-spacing: var(--tracking-wide);
	text-transform: uppercase;
	text-align: center;
	color: var(--color-surface);
	background-color: var(--color-accent);
	transform: translateX(-50%);
}

.circle-rail {
	display: flex;
	gap: var(--space-3);
	margin-top: var(--space-5);
	padding-bottom: var(--space-2);
	overflow-x: auto;
	scroll-snap-type: x mandatory;
	scrollbar-width: thin;
}

.circle-rail li {
	flex: 0 0 6rem;
	scroll-snap-align: start;
}

.circle-item {
	display: block;
	text-align: center;
	text-decoration: none;
	color: inherit;
}

.circle-item__img {
	width: 100%;
	aspect-ratio: 1;
	object-fit: cover;
	border-radius: 50%;
	transition: transform var(--transition);
}

.circle-item:hover .circle-item__img {
	transform: scale(1.04);
}

.circle-item__label {
	display: block;
	margin-top: var(--space-2);
	font-size: var(--text-xs);
	font-weight: 600;
	letter-spacing: var(--tracking-wide);
	text-transform: uppercase;
	line-height: 1.25;
}

/* -------------------------------------------------------------------------
   12. Footer
   ------------------------------------------------------------------------- */
.site-footer {
	margin-top: var(--space-6);
	padding-block: var(--space-4) var(--space-3);
	background-color: var(--color-surface-alt);
	border-top: 1px solid var(--color-line);
}

.site-footer__grid {
	display: grid;
	gap: var(--space-5);
}

.footer-heading {
	font-family: var(--font-body);
	font-size: var(--text-xs);
	font-weight: 600;
	letter-spacing: var(--tracking-wide);
	text-transform: uppercase;
	color: var(--color-ink-muted);
}

.footer-list {
	display: grid;
	gap: var(--space-1);
	margin-top: var(--space-2);
	font-size: var(--text-sm);
	line-height: 1.45;
}

.footer-list a {
	color: var(--color-ink);
	text-decoration: none;
}

.footer-list a:hover {
	color: var(--color-brand-dark);
	text-decoration: underline;
}

/* The only coloured block in the footer, so it carries the weight. Square
   corners and flush edges, so it reads as a solid block rather than a card. */
.footer-panel {
	padding: var(--space-4);
	color: var(--color-surface);
	background-color: var(--color-brand-dark);
}

.footer-panel .field,
.footer-panel .button {
	border-radius: 0;
}

/* Deliberately unlike .footer-heading: display face, larger, normal case,
   tight tracking rather than small muted caps. */
.footer-panel__title {
	font-family: var(--font-display);
	font-size: var(--text-lg);
	font-weight: 400;
	letter-spacing: -0.01em;
	text-transform: none;
}

.footer-panel__offer {
	margin-top: var(--space-2);
	font-size: var(--text-sm);
}

.footer-panel__form {
	display: grid;
	gap: var(--space-2);
	margin-top: var(--space-3);
}

.site-footer__social {
	margin-top: var(--space-3);
}

.social-row {
	display: flex;
	gap: var(--space-2);
}

.social-row a {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 2.25rem;
	height: 2.25rem;
	color: var(--color-ink);
	background-color: var(--color-surface);
	border-radius: 50%;
	transition: color var(--transition), background-color var(--transition);
}

.social-row a:hover {
	color: var(--color-surface);
	background-color: var(--color-brand);
}

.social-row svg {
	width: 18px;
	height: 18px;
}

/* Filled circles in brand, glyphs in surface. */
.social-row--filled {
	gap: var(--space-1);
}

.social-row--filled a {
	width: 2rem;
	height: 2rem;
	color: var(--color-surface);
	background-color: var(--color-brand);
}

.social-row--filled svg {
	width: 15px;
	height: 15px;
}

.social-row--filled a:hover {
	background-color: var(--color-brand-dark);
}

.site-footer__brand {
	margin-top: var(--space-3);
}

.site-footer__brand .logo {
	height: 54px;
}

.site-footer__copy {
	margin-top: var(--space-2);
	font-size: var(--text-sm);
	color: var(--color-ink-muted);
}

.site-footer__descriptor {
	max-width: 32rem;
	margin-top: var(--space-1);
	font-size: var(--text-sm);
	color: var(--color-ink-muted);
}

.site-footer__legal {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: var(--space-4);
	margin-top: var(--space-4);
	padding-top: var(--space-3);
	font-size: var(--text-xs);
	border-top: 1px solid var(--color-line);
}

.site-footer__legal a {
	color: var(--color-ink-muted);
}

/* -------------------------------------------------------------------------
   12b. Full bleed CTA band and testimonial
   ------------------------------------------------------------------------- */

/* A sibling of the container rather than a child, so it spans the viewport
   without negative margins and cannot introduce horizontal overflow. */
.cta-band {
	padding-block: var(--space-6);
	color: var(--color-surface);
	background-color: var(--color-brand-dark);
}

.cta-band__lead {
	text-align: center;
}

.cta-band__title {
	font-size: var(--text-xl);
}

.cta-band__sub {
	margin-top: var(--space-2);
	font-size: var(--text-sm);
}

.cta-band__form {
	display: grid;
	gap: var(--space-2);
	max-width: 32rem;
	margin: var(--space-4) auto 0;
}

.cta-band__cards-title {
	margin-top: var(--space-6);
	font-size: var(--text-lg);
	text-align: center;
}

.cta-band__cards {
	display: grid;
	gap: var(--space-3);
	margin-top: var(--space-4);
}

.cta-card {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: var(--space-2);
	padding: var(--space-4);
	text-align: center;
	color: var(--color-ink);
	background-color: var(--color-surface);
	border-radius: var(--radius-lg);
}

.cta-card svg {
	width: 28px;
	height: 28px;
	color: var(--color-brand-dark);
}

.cta-card__title {
	font-family: var(--font-body);
	font-size: var(--text-xs);
	font-weight: 600;
	letter-spacing: var(--tracking-wide);
	text-transform: uppercase;
}

.cta-card__text {
	font-size: var(--text-sm);
	color: var(--color-ink-muted);
}

.cta-card .button {
	margin-top: var(--space-2);
}

.testimonial {
	max-width: var(--content-width);
	margin: var(--space-6) auto;
	padding: var(--space-5) var(--space-4);
	text-align: center;
}

.testimonial__quote {
	font-family: var(--font-display);
	font-size: clamp(var(--text-lg), 3.5vw, var(--text-xl));
	line-height: 1.35;
	text-wrap: balance;
}

.testimonial__quote p::before {
	content: "\201c";
}

.testimonial__quote p::after {
	content: "\201d";
}

.testimonial__by {
	margin-top: var(--space-3);
}

.testimonial__name {
	display: block;
	font-size: var(--text-sm);
	font-weight: 600;
	letter-spacing: var(--tracking-wide);
	text-transform: uppercase;
	color: var(--color-brand-dark);
}

.testimonial__detail {
	display: block;
	margin-top: var(--space-1);
	font-size: var(--text-sm);
	color: var(--color-ink-muted);
}

.start-search {
	max-width: var(--content-width);
	margin: var(--space-5) auto 0;
	text-align: center;
}

/* -------------------------------------------------------------------------
   13. Recipe article
   ------------------------------------------------------------------------- */
.breadcrumb {
	display: flex;
	flex-wrap: wrap;
	gap: var(--space-2);
	padding-top: var(--space-4);
	font-size: var(--text-xs);
	color: var(--color-ink-muted);
}

.breadcrumb a {
	color: inherit;
}

.entry-header {
	max-width: var(--content-width);
	padding-top: var(--space-4);
}

.entry-title {
	margin-top: var(--space-3);
	font-size: clamp(var(--text-xl), 5.5vw, var(--text-2xl));
}

.entry-actions {
	display: flex;
	flex-wrap: wrap;
	gap: var(--space-2);
	margin-top: var(--space-4);
}

.entry-hero {
	margin-top: var(--space-5);
}

.entry-hero img {
	width: 100%;
	aspect-ratio: 3 / 2;
	object-fit: cover;
	border-radius: var(--radius-lg);
}

.entry-hero figcaption {
	margin-top: var(--space-2);
	font-size: var(--text-xs);
	color: var(--color-ink-muted);
}

.entry-content {
	max-width: var(--content-width);
	margin-top: var(--space-5);
	font-size: 1.0625rem;
}

.entry-content > * + * {
	margin-top: var(--space-3);
}

.entry-content h2 {
	margin-top: var(--space-5);
	font-size: var(--text-lg);
}

.callout {
	padding: var(--space-3) var(--space-4);
	background-color: var(--color-surface-alt);
	border-left: 3px solid var(--color-brand);
	border-radius: 0 var(--radius) var(--radius) 0;
}

.callout__label {
	display: block;
	margin-bottom: var(--space-1);
	font-size: var(--text-xs);
	font-weight: 600;
	letter-spacing: var(--tracking-wide);
	text-transform: uppercase;
	color: var(--color-brand-dark);
}

/* -------------------------------------------------------------------------
   14. Recipe card
   The real card. Class prefix makamboo-recipe so it can move to the theme as is.
   ------------------------------------------------------------------------- */
.makamboo-recipe {
	/* Component scoped, not design tokens: the circle geometry is referenced by the
	   header padding, the top margin and the jump target offset. */
	--thumb: 180px;
	--thumb-out: calc(var(--thumb) / 3);
	--card-pad: var(--space-4);

	max-width: var(--content-width);
	margin-block: calc(var(--space-6) + var(--thumb-out)) var(--space-6);
	padding: 0 var(--card-pad) var(--card-pad);
	background-color: var(--color-surface);
	border: 1px solid var(--color-line);
	border-radius: var(--radius-lg);
	box-shadow: var(--shadow-1);
	scroll-margin-top: calc(var(--header-height) + var(--space-3) + var(--thumb-out));
}

/* Two tone: the coloured header bleeds to the card edges, the rest stays on surface. */
.makamboo-recipe__hero {
	position: relative;
	margin-inline: calc(var(--card-pad) * -1);
	padding: calc(var(--thumb) - var(--thumb-out) + var(--space-3)) var(--space-4) var(--space-4);
	text-align: center;
	color: var(--color-surface);
	background-color: var(--color-brand-dark);
	border-radius: var(--radius-lg) var(--radius-lg) 0 0;
}

.makamboo-recipe__thumb {
	position: absolute;
	top: calc(var(--thumb-out) * -1);
	left: 50%;
	width: var(--thumb);
	height: var(--thumb);
	max-width: calc(100% - var(--space-4));
	object-fit: cover;
	border: 6px solid var(--color-surface);
	border-radius: 50%;
	transform: translateX(-50%);
}

.makamboo-recipe__name {
	font-size: var(--text-xl);
	text-wrap: balance;
}

/* Contrast on --color-brand-dark, measured across all 22 palettes:
   surface 7.42 worst, brand-soft 6.41 worst, line 4.43 worst.
   --color-brand is 1.28 worst, so the usual star colour cannot be used here. */
.makamboo-recipe__rule {
	width: 4rem;
	margin: var(--space-3) auto;
	border: 0;
	border-top: 1px solid var(--color-line);
}

.stars--on-colour {
	color: var(--color-brand-soft);
}

.makamboo-recipe__reviews {
	margin-top: var(--space-1);
	font-size: var(--text-sm);
	font-style: italic;
	color: var(--color-brand-soft);
}

.makamboo-recipe__quickmeta {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: var(--space-2) var(--space-4);
	margin-top: var(--space-3);
	font-size: var(--text-sm);
}

.makamboo-recipe__quickmeta span {
	display: inline-flex;
	align-items: center;
	gap: var(--space-1);
}

.makamboo-recipe__quickmeta svg {
	width: 16px;
	height: 16px;
}

.makamboo-recipe__cta {
	display: grid;
	gap: var(--space-2);
	margin-inline: calc(var(--card-pad) * -1);
	padding: var(--space-3) var(--space-4);
	background-color: var(--color-surface-alt);
}

.recipe-cta {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: var(--space-2);
	width: 100%;
	padding: var(--space-3);
	font-size: var(--text-xs);
	font-weight: 600;
	letter-spacing: var(--tracking-wide);
	text-transform: uppercase;
	color: var(--color-ink);
	background-color: var(--color-surface);
	border: 1px solid var(--color-line);
	border-radius: var(--radius);
	cursor: pointer;
	transition: color var(--transition), background-color var(--transition), border-color var(--transition);
}

.recipe-cta:hover {
	color: var(--color-surface);
	background-color: var(--color-brand);
	border-color: var(--color-brand);
}

.recipe-cta svg {
	width: 18px;
	height: 18px;
	flex-shrink: 0;
}

.makamboo-recipe__description {
	margin-top: var(--space-4);
	color: var(--color-ink-muted);
}

.ingredients-head {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
	gap: var(--space-2);
}

/* Sits alongside the servings stepper. Both drive the same value. */
.scale-control {
	display: flex;
	gap: var(--space-1);
}

.scale-control__button {
	width: 2.5rem;
	height: 2.5rem;
	font-size: var(--text-sm);
	font-weight: 600;
	color: var(--color-ink);
	background-color: var(--color-surface);
	border: 1px solid var(--color-line);
	border-radius: var(--radius);
	cursor: pointer;
}

.scale-control__button:hover {
	border-color: var(--color-ink-faint);
}

.scale-control__button[aria-pressed="true"] {
	color: var(--color-surface);
	background-color: var(--color-brand);
	border-color: var(--color-brand);
}

.makamboo-recipe__facts {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: var(--space-3);
	padding-block: var(--space-4);
	border-bottom: 1px solid var(--color-line);
}

.makamboo-recipe__fact-label {
	display: block;
	font-size: var(--text-xs);
	letter-spacing: var(--tracking-wide);
	text-transform: uppercase;
	color: var(--color-ink-muted);
}

.makamboo-recipe__fact-value {
	display: block;
	margin-top: var(--space-1);
	font-family: var(--font-display);
	font-size: var(--text-base);
}

.makamboo-recipe__controls {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
	gap: var(--space-3);
	padding-block: var(--space-4);
	border-bottom: 1px solid var(--color-line);
}

.scaler {
	display: flex;
	align-items: center;
	gap: var(--space-2);
	font-size: var(--text-sm);
}

.scaler__button {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 2.75rem;
	height: 2.75rem;
	font-size: var(--text-lg);
	line-height: 1;
	color: var(--color-ink);
	background-color: var(--color-surface);
	border: 1px solid var(--color-line);
	border-radius: 50%;
	cursor: pointer;
}

.scaler__button:hover {
	border-color: var(--color-ink-faint);
}

.scaler__button[disabled] {
	color: var(--color-ink-faint);
	cursor: not-allowed;
}

.scaler__value {
	min-width: 2.5rem;
	font-family: var(--font-display);
	font-size: var(--text-lg);
	text-align: center;
}

.unit-toggle {
	display: inline-flex;
	padding: 3px;
	background-color: var(--color-surface-alt);
	border-radius: var(--radius-pill);
}

.unit-toggle__button {
	padding: 0.45rem var(--space-3);
	font-size: var(--text-sm);
	font-weight: 600;
	color: var(--color-ink-muted);
	background: none;
	border: 0;
	border-radius: var(--radius-pill);
	cursor: pointer;
}

.unit-toggle__button[aria-pressed="true"] {
	color: var(--color-surface);
	background-color: var(--color-brand);
}

/* Ingredients above instructions at every width. Never two columns: a cook
   reads the list once, then works down the steps, so side by side only splits
   attention and shortens the measure of both. */
.makamboo-recipe__body {
	display: grid;
	gap: var(--space-6);
	padding-top: var(--space-4);
}

/* Enough of a break that instructions read as a new section. */
.makamboo-recipe__steps {
	padding-top: var(--space-5);
	border-top: 1px solid var(--color-line);
}

/* Opt in for genuinely long lists. The template adds this when a group runs past
   about eight rows, because CSS cannot count list items. */
.ingredient-list--split {
	column-gap: var(--space-5);
}

.ingredient-list--split li {
	break-inside: avoid;
}

.makamboo-recipe__subhead {
	font-family: var(--font-body);
	font-size: var(--text-base);
	font-weight: 600;
	text-transform: uppercase;
	letter-spacing: 0.01em;
}

.ingredient-group,
.step-section {
	margin-top: var(--space-4);
	font-family: var(--font-display);
	font-size: var(--text-base);
	color: var(--color-brand-dark);
}

.ingredient-list {
	display: grid;
	gap: var(--space-2);
	margin-top: var(--space-2);
	font-size: var(--text-sm);
}

.ingredient-list li {
	display: flex;
	gap: var(--space-2);
	align-items: flex-start;
	padding-bottom: var(--space-2);
	border-bottom: 1px dashed var(--color-line);
}

/* 24px minimum, so the checkbox itself clears WCAG target size on a phone. */
.ingredient-list input {
	width: 1.5rem;
	height: 1.5rem;
	margin-top: 0.1rem;
	flex-shrink: 0;
	accent-color: var(--color-brand);
}

/* The label extends the tap target across the whole row. */
.ingredient-list label {
	display: block;
	flex: 1;
	min-height: 1.5rem;
	padding-block: 0.15rem;
	cursor: pointer;
}

.ingredient-list input:checked + label {
	color: var(--color-ink-faint);
	text-decoration: line-through;
}

.ingredient__amount {
	font-weight: 600;
	white-space: nowrap;
}

.ingredient__note {
	color: var(--color-ink-muted);
}

.step-list {
	display: grid;
	gap: var(--space-4);
	margin-top: var(--space-3);
	font-size: var(--text-sm);
	counter-reset: step var(--step-start, 0);
}

.step-list li {
	display: grid;
	grid-template-columns: 1.75rem 1fr;
	gap: var(--space-3);
	counter-increment: step;
	scroll-margin-top: calc(var(--header-height) + var(--space-3));
}

.step-list li::before {
	content: counter(step);
	display: flex;
	align-items: center;
	justify-content: center;
	width: 1.75rem;
	height: 1.75rem;
	font-family: var(--font-display);
	font-size: var(--text-sm);
	color: var(--color-brand-dark);
	background-color: var(--color-brand-soft);
	border-radius: 50%;
}

.step__image {
	width: 100%;
	margin-top: var(--space-2);
	border-radius: var(--radius);
}

.makamboo-recipe__notes {
	margin-top: var(--space-4);
	padding: var(--space-3) var(--space-4);
	font-size: var(--text-sm);
	background-color: var(--color-surface-alt);
	border-radius: var(--radius);
}

.makamboo-recipe__notes ol {
	display: grid;
	gap: var(--space-2);
	margin-top: var(--space-2);
	padding-left: var(--space-4);
	list-style: decimal;
}

/* Footnote marker on an ingredient, linking to its numbered note. */
.ingredient__ref {
	margin-left: 2px;
	font-size: var(--text-xs);
	font-weight: 600;
	text-decoration: none;
}

.ingredient__ref sup {
	font-size: 0.7em;
}

.step__lead {
	color: var(--color-ink);
}

.makamboo-recipe__nutrition {
	margin-top: var(--space-4);
	font-size: var(--text-sm);
	border-top: 1px solid var(--color-line);
}

.makamboo-recipe__nutrition summary {
	padding-block: var(--space-3);
	font-weight: 600;
	cursor: pointer;
}

.nutrition-grid {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: var(--space-2) var(--space-3);
	padding-bottom: var(--space-3);
	color: var(--color-ink-muted);
}

.nutrition-grid div {
	display: flex;
	justify-content: space-between;
	gap: var(--space-2);
	padding-bottom: var(--space-1);
	border-bottom: 1px dashed var(--color-line);
}

.makamboo-recipe__rating {
	margin-top: var(--space-4);
	padding-top: var(--space-4);
	border-top: 1px solid var(--color-line);
}

.makamboo-recipe__foot {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
	gap: var(--space-3);
	margin-top: var(--space-4);
	padding-top: var(--space-4);
	font-size: var(--text-sm);
	border-top: 1px solid var(--color-line);
}

.makamboo-recipe__print-only {
	display: none;
}

/* -------------------------------------------------------------------------
   15. Comments
   ------------------------------------------------------------------------- */
.comments {
	max-width: var(--content-width);
	margin-top: var(--space-6);
}

.comment-list {
	display: grid;
	gap: var(--space-4);
	margin-top: var(--space-4);
}

.comment {
	display: grid;
	grid-template-columns: 2.75rem 1fr;
	gap: var(--space-3);
}

.comment__avatar {
	width: 2.75rem;
	height: 2.75rem;
	display: flex;
	align-items: center;
	justify-content: center;
	font-family: var(--font-display);
	color: var(--color-brand-dark);
	background-color: var(--color-brand-soft);
	border-radius: 50%;
}

.comment__name {
	font-weight: 600;
}

.comment__date {
	font-size: var(--text-xs);
	color: var(--color-ink-muted);
}

.comment__text {
	margin-top: var(--space-2);
	font-size: var(--text-sm);
}

.comment-form {
	display: grid;
	gap: var(--space-3);
	margin-top: var(--space-5);
	padding-top: var(--space-4);
	border-top: 1px solid var(--color-line);
}

.comment-form label {
	display: block;
	margin-bottom: var(--space-1);
	font-size: var(--text-sm);
	font-weight: 600;
}

.comment-form textarea {
	min-height: 7rem;
	border-radius: var(--radius-lg);
	resize: vertical;
}

/* -------------------------------------------------------------------------
   16. Archive header, filters, pagination
   ------------------------------------------------------------------------- */
.archive-header {
	padding-block: var(--space-5) var(--space-4);
	text-align: center;
}

.archive-title {
	margin-top: var(--space-2);
	font-size: clamp(var(--text-xl), 6vw, var(--text-2xl));
}

.archive-description {
	max-width: 38rem;
	margin: var(--space-3) auto 0;
	color: var(--color-ink-muted);
}

.filters {
	padding-block: var(--space-4);
	border-block: 1px solid var(--color-line);
}

.filters__bar {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
	gap: var(--space-3);
}

.filters__count {
	font-size: var(--text-sm);
	color: var(--color-ink-muted);
}

.filters__panel {
	display: grid;
	gap: var(--space-3);
	margin-top: var(--space-4);
}

.filter-group__label {
	font-family: var(--font-body);
	font-size: var(--text-xs);
	font-weight: 600;
	letter-spacing: var(--tracking-wide);
	text-transform: uppercase;
	color: var(--color-ink-muted);
}

.chip-row {
	display: flex;
	flex-wrap: wrap;
	gap: var(--space-2);
	margin-top: var(--space-2);
}

.chip {
	padding: 0.35rem 0.85rem;
	font-size: var(--text-sm);
	color: var(--color-ink);
	background-color: var(--color-surface);
	border: 1px solid var(--color-line);
	border-radius: var(--radius-pill);
	cursor: pointer;
	transition: color var(--transition), background-color var(--transition), border-color var(--transition);
}

.chip:hover {
	border-color: var(--color-ink-faint);
}

.chip[aria-pressed="true"] {
	color: var(--color-surface);
	background-color: var(--color-brand);
	border-color: var(--color-brand);
}

.sort-control {
	display: flex;
	align-items: center;
	gap: var(--space-2);
	font-size: var(--text-sm);
}

.sort-control select {
	padding: 0.4rem var(--space-3);
	background-color: var(--color-surface);
	border: 1px solid var(--color-line);
	border-radius: var(--radius-pill);
}

.filters__toggle {
	display: inline-flex;
	align-items: center;
	gap: var(--space-2);
	padding: 0.4rem var(--space-3);
	font-size: var(--text-sm);
	background-color: var(--color-surface);
	border: 1px solid var(--color-line);
	border-radius: var(--radius-pill);
	cursor: pointer;
}

.no-results {
	padding: var(--space-6) var(--space-3);
	text-align: center;
}

.no-results__title {
	font-size: var(--text-lg);
}

.no-results p {
	margin-top: var(--space-2);
	color: var(--color-ink-muted);
}

.pagination {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: center;
	gap: var(--space-2);
	margin-top: var(--space-6);
}

.pagination a,
.pagination span {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-width: 2.5rem;
	height: 2.5rem;
	padding-inline: var(--space-2);
	font-size: var(--text-sm);
	color: var(--color-ink);
	text-decoration: none;
	border: 1px solid var(--color-line);
	border-radius: var(--radius-pill);
}

.pagination a:hover {
	border-color: var(--color-ink-faint);
}

.pagination [aria-current="page"] {
	color: var(--color-surface);
	background-color: var(--color-brand);
	border-color: var(--color-brand);
}

.pagination__ellipsis {
	border-color: transparent;
}

/* -------------------------------------------------------------------------
   17. Related recipes
   ------------------------------------------------------------------------- */
.related {
	margin-top: var(--space-6);
	padding-top: var(--space-5);
	border-top: 1px solid var(--color-line);
}

/* -------------------------------------------------------------------------
   18. Static pages, search results and 404
   Built from the existing tokens. No new tokens.
   ------------------------------------------------------------------------- */

/* The global reset removes list markers, so prose has to put them back. */
.entry-content ul,
.entry-content ol {
	padding-left: var(--space-4);
	list-style: disc;
}

.entry-content ol {
	list-style: decimal;
}

.entry-content li + li {
	margin-top: var(--space-2);
}

.entry-content--centered {
	margin-inline: auto;
}

.search-form {
	display: flex;
	flex-direction: column;
	gap: var(--space-2);
	max-width: 28rem;
	margin-top: var(--space-4);
}

.search-form--centered {
	margin-inline: auto;
}

.result-count {
	margin-top: var(--space-3);
	font-size: var(--text-sm);
	color: var(--color-ink-muted);
}

.tag-row--centered {
	justify-content: center;
	margin-top: var(--space-4);
}

.error-panel {
	max-width: 34rem;
	margin-inline: auto;
	padding-block: var(--space-6);
	text-align: center;
}

/* -------------------------------------------------------------------------
   19. Ad slots
   The pixel values below are fixed IAB creative sizes, not design tokens. Each
   size reserves its height with min-height so nothing shifts when a real ad
   loads in.
   ------------------------------------------------------------------------- */
.ad-slot {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: var(--space-1);
	margin-block: var(--space-5);
}

/* Any slot with no booked campaign collapses to nothing. */
.ad-slot.is-empty {
	display: none;
}

.ad-slot__label {
	font-size: var(--text-xs);
	letter-spacing: var(--tracking-wide);
	text-transform: uppercase;
	color: var(--color-ink-faint);
}

.ad-slot__fill {
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	gap: var(--space-1);
	width: 100%;
	padding: var(--space-2);
	font-size: var(--text-xs);
	text-align: center;
	color: var(--color-ink-muted);
	background-color: var(--color-ad-fill);
	border: 1px dashed var(--color-line);
	border-radius: var(--radius);
}

.ad-slot__name {
	font-weight: 600;
	color: var(--color-ink);
}

.ad-slot__size--lg {
	display: none;
}

.ad-slot--leaderboard .ad-slot__fill {
	min-height: 100px;
	max-width: 320px;
}

.ad-slot--rectangle .ad-slot__fill {
	min-height: 250px;
	max-width: 300px;
}

.ad-slot--large-rect .ad-slot__fill {
	min-height: 280px;
	max-width: 336px;
}

/* In-grid slot. A three column cell is 288px at 960 and 309px at 1024, so it serves a
   300x250 until the cell can hold a 336x280, which is 70rem, see the swap below. */
.ad-slot--grid-rect .ad-slot__fill {
	min-height: 250px;
	max-width: 300px;
}

.ad-slot--half-page .ad-slot__fill {
	min-height: 600px;
	max-width: 300px;
}

.ad-slot--mobile-banner .ad-slot__fill {
	min-height: 50px;
	max-width: 320px;
}

/* An ordinary grid cell. It stretches to the row height like a card does, and
   the creative is centred in whatever height is left below the label, so the
   cell never reads as an empty box. The label stays at the top.
   No panel behind it, because a card cell has none either. */
.card-grid .ad-slot {
	position: relative;
	margin-block: 0;
	align-self: stretch;
	justify-content: center;

	/* Symmetric padding keeps the creative centred on the cell while reserving
	   room for the label. Needed at one column, where the cell hugs the ad and
	   the absolutely positioned label would otherwise sit on top of it. */
	padding-block: var(--space-4);
}

/* The label is taken out of the flow so it can sit at the top while the
   creative still centres on the cell rather than on the space beneath it. */
.card-grid .ad-slot__label {
	position: absolute;
	top: 0;
	left: 50%;
	transform: translateX(-50%);
}

/* The reserved min-height stays as the floor. */
.card-grid .ad-slot__fill {
	flex: 0 0 auto;
}

/* -------------------------------------------------------------------------
   20. Single post layout and sidebar
   ------------------------------------------------------------------------- */
.single-layout {
	display: grid;
	gap: var(--space-6);
}

.single-layout__comments {
	min-width: 0;
}

.single-layout__main {
	min-width: 0;
}

/* Flex column, not grid: grid rows are sized to their content, which leaves the
   sticky block no room to travel. As a flex column the sidebar stretches to the
   article height and the last block can follow the reader down it. */
.single-sidebar {
	display: flex;
	flex-direction: column;
	gap: var(--space-5);
}

.sidebar-block > .footer-heading {
	display: block;
	margin-bottom: var(--space-3);
}

.single-sidebar .search-form {
	flex-direction: column;
	margin-top: 0;
}

.single-sidebar .popular-list {
	grid-template-columns: 1fr;
	gap: var(--space-3);
}

.single-sidebar .popular-item {
	grid-template-columns: 3.5rem 1fr;
	gap: var(--space-3);
}

.single-sidebar .popular-item__media img {
	width: 3.5rem;
}

.author-card {
	display: grid;
	grid-template-columns: 3.5rem 1fr;
	gap: var(--space-3);
	align-items: start;
}

.author-card__avatar {
	width: 3.5rem;
	height: 3.5rem;
	border-radius: 50%;
	object-fit: cover;
}

.author-card__name {
	font-family: var(--font-display);
	font-size: var(--text-base);
}

.author-card__bio {
	margin-top: var(--space-1);
	font-size: var(--text-sm);
	color: var(--color-ink-muted);
}

.author-card__link {
	display: inline-block;
	margin-top: var(--space-2);
	font-size: var(--text-sm);
	font-weight: 600;
}

/* The full author box that follows the recipe card in the main column. */
.author-box {
	display: grid;
	gap: var(--space-3);
	max-width: var(--content-width);
	margin-block: var(--space-5);
	padding: var(--space-4);
	background-color: var(--color-surface-alt);
	border-radius: var(--radius-lg);
}

a.chip {
	text-decoration: none;
}

/* -------------------------------------------------------------------------
   21. Entry header, jump bar, trust signals
   ------------------------------------------------------------------------- */
.entry-rating {
	margin-top: var(--space-3);
}

.entry-dek {
	margin-top: var(--space-3);
	font-style: italic;
	font-size: var(--text-lg);
	color: var(--color-ink-muted);
}

.entry-byline {
	display: flex;
	align-items: center;
	gap: var(--space-2);
	margin-top: var(--space-4);
	font-size: var(--text-sm);
	color: var(--color-ink-muted);
}

.entry-byline__avatar {
	width: 40px;
	height: 40px;
	flex-shrink: 0;
	border-radius: 50%;
	object-fit: cover;
}

/* A band across the content column, not a pill. */
.jump-bar {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: var(--space-2);
	margin-top: var(--space-4);
	padding: var(--space-3) var(--space-4);
	font-size: var(--text-sm);
	font-weight: 600;
	letter-spacing: var(--tracking-wide);
	text-transform: uppercase;
	color: var(--color-brand-dark);
	text-decoration: none;
	background-color: var(--color-brand-soft);
	border-radius: var(--radius);
}

.jump-bar:hover {
	color: var(--color-surface);
	background-color: var(--color-brand-dark);
}

.jump-bar svg {
	width: 16px;
	height: 16px;
}

.cook-mode-control {
	display: inline-flex;
	flex-direction: column;
	gap: var(--space-1);
}

.cook-mode-note {
	font-size: var(--text-xs);
	color: var(--color-ink-muted);
}

[data-save][aria-pressed="true"] {
	color: var(--color-surface);
	background-color: var(--color-brand);
	border-color: var(--color-brand);
}

.affiliate-note {
	margin-top: var(--space-3);
	font-size: var(--text-xs);
	color: var(--color-ink-muted);
}

/* -------------------------------------------------------------------------
   22. Sidebar author intro and lead magnet
   ------------------------------------------------------------------------- */
.author-intro {
	position: relative;
	padding-top: 90px;
	text-align: center;
}

.author-intro__photo {
	position: absolute;
	top: 0;
	left: 50%;
	width: 180px;
	height: 180px;
	object-fit: cover;
	border: 4px solid var(--color-surface);
	border-radius: 50%;
	transform: translateX(-50%);
}

.author-intro__card {
	padding: 100px var(--space-4) var(--space-4);
	background-color: var(--color-surface-alt);
	border-radius: var(--radius-lg) var(--radius-lg) 0 0;
}

.author-intro__greeting {
	font-family: var(--font-display);
	font-size: var(--text-lg);
}

.author-intro__sub {
	margin-top: var(--space-1);
	font-size: var(--text-sm);
	font-weight: 600;
	letter-spacing: var(--tracking-wide);
	text-transform: uppercase;
	color: var(--color-brand-dark);
}

.author-intro__bio {
	margin-top: var(--space-3);
	font-size: var(--text-sm);
	color: var(--color-ink-muted);
}

.author-intro__more {
	display: inline-block;
	margin-top: var(--space-3);
	font-size: var(--text-xs);
	font-weight: 600;
	letter-spacing: var(--tracking-wide);
	text-transform: uppercase;
}

/* Reads as one unit with the card above it, no gap and matching corners. */
.follow-block {
	padding: var(--space-4);
	text-align: center;
	color: var(--color-surface);
	background-color: var(--color-brand-dark);
	border-radius: 0 0 var(--radius-lg) var(--radius-lg);
}

.follow-block__title {
	font-family: var(--font-body);
	font-size: var(--text-xs);
	font-weight: 600;
	letter-spacing: var(--tracking-wide);
	text-transform: uppercase;
}

/* The sidebar can sit exactly on its 300px floor at 60rem, where six icons at the
   shared gap would be squeezed by a pixel. A tighter gap leaves them at full size. */
.social-row--follow {
	justify-content: center;
	gap: var(--space-1);
}

.social-row--follow a {
	color: var(--color-brand-dark);
	background-color: var(--color-surface);
}

.social-row--follow a:hover {
	color: var(--color-surface);
	background-color: var(--color-brand);
}

.lead-magnet {
	display: grid;
	gap: var(--space-2);
	margin-top: var(--space-4);
	padding-top: var(--space-4);
	border-top: 1px solid var(--color-surface);
}

.lead-magnet__title {
	font-family: var(--font-body);
	font-size: var(--text-sm);
	font-weight: 600;
	letter-spacing: var(--tracking-wide);
	text-transform: uppercase;
}

.lead-magnet__offer {
	font-size: var(--text-sm);
}

.lead-magnet__row {
	display: flex;
	gap: var(--space-2);
}

.lead-magnet__row .field {
	flex: 1;
	min-width: 0;
}

/* -------------------------------------------------------------------------
   23. Comment rating and author replies
   ------------------------------------------------------------------------- */
.comment-rating {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: var(--space-2) var(--space-3);
}

.comment-rating legend {
	float: left;
	width: 100%;
	margin-bottom: var(--space-2);
	font-size: var(--text-sm);
	font-weight: 600;
}

/* Star ratings. One treatment for the card's rating buttons and the comment form's radios.
   Stars sit in reading order, one to five. The whole row fills, then the stars after the
   hovered or chosen one empty again, so no reversed DOM order is needed. */
.star-rating {
	display: flex;
	align-items: center;
}

.star-rating input {
	position: absolute;
	width: 1px;
	height: 1px;
	overflow: hidden;
	clip-path: inset(50%);
}

.star-rating__star {
	padding: 0 2px;
	font-size: var(--text-xl);
	line-height: 1;
	color: var(--color-ink-faint);
	background: none;
	border: 0;
	border-radius: var(--radius);
	cursor: pointer;
	transition: color var(--transition);
}

/* Chosen. The buttons get is-on from the script, the radios from :checked. */
.star-rating .is-on,
.star-rating input:checked + .star-rating__star,
.star-rating:has(input:checked) .star-rating__star {
	color: var(--color-brand);
}

.star-rating input:checked ~ input + .star-rating__star {
	color: var(--color-ink-faint);
}

/* Hover previews a score: fill up to the pointer, empty the rest, chosen or not. */
.star-rating:has(.star-rating__star:hover) .star-rating__star {
	color: var(--color-brand);
}

.star-rating .star-rating__star:hover ~ .star-rating__star {
	color: var(--color-ink-faint);
}

.star-rating__star:focus-visible,
.star-rating input:focus-visible + .star-rating__star {
	outline: 2px solid var(--color-brand);
	outline-offset: 2px;
}

/* The site owner answering, so it does not read as another reader. */
.comment--author > .comment__body {
	padding: var(--space-3);
	background-color: var(--color-brand-soft);
	border-left: 3px solid var(--color-brand);
	border-radius: 0 var(--radius) var(--radius) 0;
}

/* Brand on the tint is under 4.5:1 in seven palettes, so the reply link steps darker. */
.comment--author > .comment__body .comment__reply {
	color: var(--color-brand-dark);
}

.comment__badge {
	display: inline-block;
	margin-inline: var(--space-1);
	padding: 0.1rem 0.5rem;
	font-size: var(--text-xs);
	font-weight: 600;
	color: var(--color-surface);
	background-color: var(--color-brand);
	border-radius: var(--radius-pill);
}

/* -------------------------------------------------------------------------
   24. Social sharing
   ------------------------------------------------------------------------- */
.share-list {
	display: flex;
	flex-wrap: wrap;
	gap: var(--space-2);
}

.share-row {
	max-width: var(--content-width);
	margin-block: var(--space-5);
	padding-block: var(--space-3);
	border-block: 1px solid var(--color-line);
}

.share-row__label {
	margin-bottom: var(--space-2);
}

.share-button {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: var(--space-2);
	min-width: 2.5rem;
	padding: var(--space-2);
	font-size: var(--text-sm);
	font-weight: 600;
	color: var(--color-ink);
	background-color: var(--color-surface);
	border: 1px solid var(--color-line);
	border-radius: var(--radius-pill);
	cursor: pointer;
	transition: color var(--transition), background-color var(--transition), border-color var(--transition);
}

.share-button:hover {
	color: var(--color-surface);
	background-color: var(--color-ink);
	border-color: var(--color-ink);
}

.share-button--primary {
	color: var(--color-surface);
	background-color: var(--color-brand);
	border-color: var(--color-brand);
}

.share-button--primary:hover {
	background-color: var(--color-brand-dark);
	border-color: var(--color-brand-dark);
}

.share-button svg {
	width: 18px;
	height: 18px;
	flex-shrink: 0;
}

/* Icon only until there is room for words. The label carries .sr-only in the markup and
   the 40rem query below lifts it back into view. */


/* -------------------------------------------------------------------------
   22. Breakpoints
   ------------------------------------------------------------------------- */
@media (min-width: 40rem) {
	.card-grid {
		grid-template-columns: repeat(2, 1fr);
	}

	.featured__tiles {
		display: grid;
		grid-template-columns: repeat(2, minmax(0, 1fr));
		overflow-x: visible;
	}

	.tile {
		flex: none;
	}

	.newsletter {
		padding: var(--space-6) var(--space-5);
	}

	.search-form {
		flex-direction: row;
	}

	.search-form .field {
		flex: 1;
	}

	.share-list--inline .share-button__label {
		position: static;
		width: auto;
		height: auto;
		overflow: visible;
		clip-path: none;
	}

	.share-list--inline .share-button {
		padding: var(--space-2) var(--space-3);
	}

	.popular-list {
		grid-template-columns: repeat(2, 1fr);
	}

	.makamboo-recipe {
		--card-pad: var(--space-5);
	}

	.makamboo-recipe__cta {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}

	.makamboo-recipe__facts {
		grid-template-columns: repeat(4, minmax(0, 1fr));
	}

	.nutrition-grid {
		grid-template-columns: repeat(3, minmax(0, 1fr));
	}
}

@media (min-width: 48rem) {
	.container {
		padding-inline: var(--space-4);
	}

	.section {
		padding-block: var(--space-7);
	}

	.site-footer {
		padding-block: var(--space-5) var(--space-3);
	}

	.filters__panel {
		display: grid;
		grid-template-columns: repeat(3, 1fr);
		gap: var(--space-4);
	}

	.filters__toggle {
		display: none;
	}

	.card-grid--related {
		grid-template-columns: repeat(3, 1fr);
	}

	/* Narrow link columns sitting left, the panel taking the right third and
	   running to the container edge. */
	.site-footer__grid {
		grid-template-columns: minmax(0, 0.8fr) minmax(0, 0.8fr) minmax(0, 1.4fr);
		gap: var(--space-5) var(--space-4);
	}

	.footer-panel__form {
		grid-template-columns: 1fr 1fr auto;
	}

	.cta-band__form {
		grid-template-columns: 1fr 1fr auto;
	}

	.cta-band__cards {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}
}

@media (min-width: 49rem) {
	.ad-slot--leaderboard .ad-slot__fill {
		min-height: 90px;
		max-width: 728px;
	}

	.ad-slot--leaderboard .ad-slot__size--sm {
		display: none;
	}

	.ad-slot--leaderboard .ad-slot__size--lg {
		display: inline;
	}
}

/* The three column cell reaches 336px at 1104px, 70rem leaves room for a scrollbar. */
@media (min-width: 70rem) {
	.ad-slot--grid-rect .ad-slot__fill {
		min-height: 280px;
		max-width: 336px;
	}

	.ad-slot--grid-rect .ad-slot__size--sm {
		display: none;
	}

	.ad-slot--grid-rect .ad-slot__size--lg {
		display: inline;
	}
}

@media (min-width: 48rem) {
	.ingredient-list--split {
		columns: 2;
	}
}

@media (min-width: 60rem) {
	.site-header__inner {
		gap: var(--space-4);
	}

	.featured__tiles {
		grid-template-columns: repeat(4, minmax(0, 1fr));
	}

	.circle-rail {
		justify-content: space-between;
		overflow-x: visible;
	}

	.circle-rail li {
		flex: 1 1 0;
		min-width: 0;
	}

	/* 64 to 32 with a --space-5 gutter, so the two columns fill the container and
	   the sidebar grows with it. --sidebar-width is the floor, not the width: the
	   300x250 and 300x600 slots have fixed pixel widths and must never be clipped.
	   The sidebar spans both rows so it can stay with the reader past the article. */
	.single-layout {
		grid-template-columns: minmax(0, 64fr) minmax(var(--sidebar-width), 32fr);
		column-gap: var(--space-5);
	}

	.single-layout__main {
		grid-column: 1;
		grid-row: 1;
	}

	.single-sidebar {
		grid-column: 2;
		grid-row: 1 / span 2;
	}

	.single-layout__comments {
		grid-column: 1;
		grid-row: 2;
	}

	/* The sidebar column stretches to the article height, so its last block can
	   stay with the reader without ever reaching the footer. */
	.sidebar-block--sticky {
		position: sticky;
		top: calc(var(--header-height) + var(--space-3));
	}

	/* The auto margin moves to the nav, so the links cluster on the right beside
	   the search rather than sitting next to the logo. */
	.site-nav {
		order: 2;
		width: auto;
		margin-left: auto;
	}

	.has-js .site-nav,
	.has-js .site-nav.is-open {
		display: block;
	}

	.nav-menu {
		flex-direction: row;
		gap: var(--space-4);
		padding-bottom: 0;
		border-top: 0;
	}

	.nav-menu a {
		padding: 0;
		font-size: var(--text-sm);
		font-weight: 700;
	}

	.has-js .nav-toggle {
		display: none;
	}

	.header-actions {
		order: 3;
		margin-left: 0;
	}

	.hero__grid {
		grid-template-columns: 1.15fr 0.85fr;
		gap: var(--space-6);
		align-items: center;
	}

	.hero__media img {
		aspect-ratio: 5 / 4;
	}

	.popular-list {
		grid-template-columns: repeat(4, 1fr);
	}

	.course-tile {
		flex: 1 0 0;
	}

	.course-rail {
		overflow-x: visible;
	}
}

/* Three columns wait for a cell that can hold a 300x250 in the grid slot: at 60rem the
   cell is 288px, at 63rem it is 304px with a classic scrollbar. */
@media (min-width: 63rem) {
	.card-grid {
		grid-template-columns: repeat(3, 1fr);
	}
}

/* -------------------------------------------------------------------------
   23. Post navigation, threaded replies
   ------------------------------------------------------------------------- */
.post-nav {
	display: grid;
	gap: var(--space-3);
	max-width: var(--content-width);
	margin-block: var(--space-5);
}

.post-nav__item {
	display: flex;
	flex-direction: column;
	gap: var(--space-1);
	padding: var(--space-3) var(--space-4);
	color: inherit;
	text-decoration: none;
	border: 1px solid var(--color-line);
	border-radius: var(--radius-lg);
	transition: border-color var(--transition), background-color var(--transition);
}

a.post-nav__item:hover {
	background-color: var(--color-surface-alt);
	border-color: var(--color-ink-faint);
}

.post-nav__label {
	display: flex;
	align-items: center;
	gap: var(--space-1);
	font-size: var(--text-xs);
	font-weight: 600;
	letter-spacing: var(--tracking-wide);
	text-transform: uppercase;
	color: var(--color-ink-muted);
}

.post-nav__title {
	font-family: var(--font-display);
	font-size: var(--text-lg);
	line-height: 1.25;
}

.post-nav__item--next {
	align-items: flex-end;
	text-align: right;
}

/* The end of the archive, shown so the layout is proven with no next post. */
.post-nav__item--empty {
	color: var(--color-ink-faint);
	border-style: dashed;
}

.post-nav__item--empty .post-nav__title {
	font-size: var(--text-base);
}

.post-nav svg {
	width: 14px;
	height: 14px;
	flex-shrink: 0;
}

.comment__reply {
	margin-top: var(--space-2);
	padding: 0;
	font-size: var(--text-xs);
	font-weight: 600;
	color: var(--color-brand);
	background: none;
	border: 0;
	cursor: pointer;
}

.comment__reply:hover {
	color: var(--color-brand-dark);
	text-decoration: underline;
}

/* One level of nesting only. */
.comment-list--replies {
	gap: var(--space-4);
	margin-top: var(--space-4);
	padding-left: var(--space-4);
	border-left: 2px solid var(--color-line);
}

@media (min-width: 48rem) {
	.post-nav {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}
}

/* -------------------------------------------------------------------------
   25. Motion and print
   ------------------------------------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
	html {
		scroll-behavior: auto;
	}

	*,
	*::before,
	*::after {
		transition-duration: 0.01ms !important;
		animation-duration: 0.01ms !important;
	}
}

/* -------------------------------------------------------------------------
   Cook mode
   The toggle hides itself when the Wake Lock API is unavailable, so it never
   appears as a control that does nothing.
   ------------------------------------------------------------------------- */
.is-cook-mode .site-header,
.is-cook-mode .site-footer,
.is-cook-mode .ad-slot,
.is-cook-mode .single-sidebar,
.is-cook-mode .breadcrumb,
.is-cook-mode .entry-header,
.is-cook-mode .jump-bar,
.is-cook-mode .affiliate-note,
.is-cook-mode .entry-content,
.is-cook-mode .share-row,
.is-cook-mode .related,
.is-cook-mode .single-layout__comments,
.is-cook-mode .post-nav,
.is-cook-mode .author-box,
.is-cook-mode .entry-hero {
	display: none;
}

/* The exit control has to stay reachable, so it is pinned rather than hidden. */
.is-cook-mode .entry-actions {
	position: sticky;
	top: var(--space-3);
	z-index: 2;
	padding-block: var(--space-2);
	background-color: var(--color-surface);
}

.is-cook-mode .makamboo-recipe {
	margin-top: var(--space-4);
	box-shadow: none;
}

.is-cook-mode .step-list {
	font-size: var(--text-lg);
	line-height: 1.6;
}

.is-cook-mode .ingredient-list {
	font-size: var(--text-base);
}

@media (min-width: 60rem) {
	.is-cook-mode .makamboo-recipe {
		max-width: none;
	}

	/* Ingredients stay on screen while the steps scroll past. Now that the block
	   spans the card, cap its height or a pinned list would fill the screen. */
	.is-cook-mode .makamboo-recipe__ingredients {
		position: sticky;
		top: var(--space-4);
		z-index: 1;
		max-height: 38vh;
		overflow-y: auto;
		padding-bottom: var(--space-3);
		background-color: var(--color-surface);
	}
}

@media print {
	/* The card alone: name, image, times, yield, ingredients, steps, notes, url. */
	.announce,
	.site-header,
	.site-footer,
	.skip-link,
	.breadcrumb,
	.entry-header,
	.entry-hero,
	.entry-content,
	.entry-actions,
	.entry-rating,
	.entry-dek,
	.entry-byline,
	.jump-bar,
	.affiliate-note,
	.ad-slot,
	.single-sidebar,
	.single-layout__comments,
	.share-row,
	.share-list,
	.author-box,
	.post-nav,
	.related,
	.comments,
	.newsletter,
	.makamboo-recipe__cta,
	.makamboo-recipe__controls,
	.makamboo-recipe__rating,
	.makamboo-recipe__foot {
		display: none !important;
	}

	.makamboo-recipe__print-only {
		display: block;
	}

	.single-layout {
		display: block;
	}

	.makamboo-recipe {
		max-width: none;
		margin: 0;
		padding: 0;
		border: 0;
		box-shadow: none;
	}

	/* Print the header as text, not as a solid block of ink. */
	.makamboo-recipe__hero {
		margin: 0;
		padding: 0;
		color: var(--color-ink);
		background: none;
	}

	/* The card's own 1:1 photo, already loaded on screen, prints in place of a separate
	   print image so screen visitors never fetch a second crop. */
	.makamboo-recipe__thumb {
		position: static;
		display: block;
		width: 60mm;
		height: 60mm;
		max-width: none;
		margin: 0 auto 4mm;
		transform: none;
		border: 0;
		box-shadow: none;
	}

	.makamboo-recipe__reviews,
	.stars--on-colour {
		color: var(--color-ink-muted);
	}

	.makamboo-recipe__body {
		display: block;
	}

	.makamboo-recipe__ingredients {
		break-after: avoid;
	}

	.step-list li,
	.ingredient-list li {
		break-inside: avoid;
	}

	.makamboo-recipe__nutrition[open] summary ~ * {
		display: block;
	}

	.makamboo-recipe__print-url {
		margin-top: 6mm;
		padding-top: 3mm;
		font-size: 10pt;
		border-top: 1px solid var(--color-line);
	}
}

/* -------------------------------------------------------------------------
   26. WordPress core markup
   The preview hand wrote pagination, comments and block content. Core produces
   slightly different wrappers, so these rules map them onto the preview styles
   without changing any value above.
   ------------------------------------------------------------------------- */
.pagination .nav-links {
	display: contents;
}

.pagination .dots {
	border-color: transparent;
}

.entry-content .alignwide {
	max-width: var(--container-width);
	margin-inline: auto;
}

.entry-content .alignfull {
	width: 100vw;
	max-width: none;
	margin-inline: calc(50% - 50vw);
}

.entry-content .aligncenter {
	margin-inline: auto;
}

.entry-content figcaption,
.entry-content .wp-element-caption {
	margin-top: var(--space-2);
	font-size: var(--text-sm);
	color: var(--color-ink-muted);
}

.page-links {
	margin-top: var(--space-4);
	font-size: var(--text-sm);
}

.page-links a,
.page-links > span {
	display: inline-block;
	margin-right: var(--space-2);
}

/* Threaded replies and the reply link, as core prints them. */
.comment-list .children {
	gap: var(--space-4);
	margin-top: var(--space-4);
	padding-left: var(--space-4);
	border-left: 2px solid var(--color-line);
}

.comment-reply-link {
	display: inline-block;
	margin-top: var(--space-2);
	padding: 0;
	font-size: var(--text-xs);
	font-weight: 600;
	color: var(--color-brand);
	text-decoration: none;
}

.comment-reply-link:hover {
	color: var(--color-brand-dark);
	text-decoration: underline;
}

.comment--author > .comment__body .comment-reply-link {
	color: var(--color-brand-dark);
}

.comment__text > p + p {
	margin-top: var(--space-2);
}

/* -------------------------------------------------------------------------
   27. Homepage modules and sidebar blocks
   Each section and block stands behind a Customizer toggle. Colour comes only
   from the tokens, so all 22 palettes apply, and the seasonal band is a tint
   of the active palette rather than a second dark block.
   ------------------------------------------------------------------------- */

/* Collection cards: a strip on the homepage, a single card in the sidebar. */
.collection-strip {
	display: flex;
	gap: var(--space-3);
	padding-bottom: var(--space-2);
	overflow-x: auto;
	scroll-snap-type: x mandatory;
	scrollbar-width: thin;
}

.collection-strip > * {
	flex: 0 0 78%;
	scroll-snap-align: start;
}

.collection-card {
	display: block;
	color: var(--color-ink);
	text-decoration: none;
}

.collection-card__media {
	overflow: hidden;
	background-color: var(--color-surface-alt);
	border-radius: var(--radius-lg);
}

.collection-card__media img {
	width: 100%;
	aspect-ratio: 4 / 3;
	object-fit: cover;
	transition: transform 300ms ease;
}

.collection-card:hover .collection-card__media img {
	transform: scale(1.03);
}

.collection-card .eyebrow {
	display: block;
	margin-top: var(--space-3);
}

.collection-card__title {
	display: block;
	margin-top: var(--space-1);
	font-family: var(--font-display);
	font-size: var(--text-lg);
	line-height: 1.25;
}

.collection-card:hover .collection-card__title {
	color: var(--color-brand-dark);
}

.collection-card__count,
.collection-card__line {
	display: block;
	margin-top: var(--space-1);
	font-size: var(--text-sm);
	color: var(--color-ink-muted);
}

/* The collections page: the strip's cards in a wrapping grid, one across on a
   phone, two from 40rem, four from 60rem, with the strip's breakpoints. */
.collection-grid {
	display: grid;
	grid-template-columns: minmax(0, 1fr);
	gap: var(--space-5) var(--space-4);
}

/* Seasonal picks: a contained tint with ink on it, links stepping to brand-dark
   because brand on brand-soft falls under 4.5:1 in seven palettes. */
.seasonal {
	padding: var(--space-5) var(--space-4);
	color: var(--color-ink);
	background-color: var(--color-brand-soft);
	border-radius: var(--radius-lg);
}

.seasonal .section-head {
	margin-bottom: var(--space-1);
}

.seasonal .section-link,
.seasonal .compact-card:hover .compact-card__title {
	color: var(--color-brand-dark);
}

.seasonal__note {
	margin-bottom: var(--space-4);
	font-size: var(--text-sm);
	color: var(--color-ink-muted);
}

.seasonal__grid {
	display: flex;
	gap: var(--space-3);
	padding-bottom: var(--space-2);
	overflow-x: auto;
	scroll-snap-type: x mandatory;
	scrollbar-width: thin;
}

.seasonal__grid > * {
	flex: 0 0 62%;
	scroll-snap-align: start;
}

.compact-card {
	display: block;
	color: inherit;
	text-decoration: none;
}

.compact-card__media {
	overflow: hidden;
	background-color: var(--color-surface);
	border-radius: var(--radius-lg);
}

.compact-card__media img {
	width: 100%;
	aspect-ratio: 1;
	object-fit: cover;
}

.compact-card__title {
	display: block;
	margin-top: var(--space-2);
	font-family: var(--font-display);
	font-size: var(--text-base);
	line-height: 1.3;
}

.compact-card .meta {
	margin-top: var(--space-1);
}

/* Blog posts: the recipe card in a lighter variant, a 3:2 image and a date. */
.card--post .card__media img {
	aspect-ratio: 3 / 2;
}

.card__date {
	display: block;
	margin-top: var(--space-2);
	font-size: var(--text-xs);
	font-weight: 600;
	letter-spacing: var(--tracking-wide);
	text-transform: uppercase;
	color: var(--color-ink-muted);
}

/* Social strip: six squares edge to edge, three across on a phone. */
.social-strip__grid {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: var(--space-1);
}

.social-strip__grid a {
	display: block;
	overflow: hidden;
	background-color: var(--color-surface-alt);
	border-radius: var(--radius);
}

.social-strip__grid img {
	width: 100%;
	aspect-ratio: 1;
	object-fit: cover;
}

.social-strip__follow {
	margin-top: var(--space-4);
	text-align: center;
}

/* Save this recipe: a light outlined box, so it never reads as the newsletter block. */
.save-recipe {
	padding: var(--space-3);
	background-color: var(--color-surface-alt);
	border: 1px solid var(--color-line);
	border-radius: var(--radius-lg);
}

.save-recipe .footer-heading {
	margin-bottom: var(--space-2);
}

.save-recipe__row {
	display: flex;
	gap: var(--space-2);
}

.save-recipe__row .field {
	flex: 1;
	min-width: 0;
}

.save-recipe__fine {
	margin-top: var(--space-2);
	font-size: var(--text-xs);
	color: var(--color-ink-muted);
}

@media (min-width: 40rem) {
	.collection-strip {
		display: grid;
		grid-template-columns: repeat(2, minmax(0, 1fr));
		gap: var(--space-4);
		padding-bottom: 0;
		overflow: visible;
	}

	.collection-grid {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}

	.collection-strip > *,
	.seasonal__grid > * {
		flex: 1 1 auto;
	}

	.seasonal__grid {
		display: grid;
		grid-template-columns: repeat(4, minmax(0, 1fr));
		gap: var(--space-4);
		padding-bottom: 0;
		overflow: visible;
	}
}

@media (min-width: 48rem) {
	.social-strip__grid {
		grid-template-columns: repeat(6, minmax(0, 1fr));
	}
}

@media (min-width: 60rem) {
	.collection-strip,
	.collection-grid {
		grid-template-columns: repeat(4, minmax(0, 1fr));
	}

	.seasonal {
		padding: var(--space-5);
	}
}