/**
 * Recipe Paper — textures and details theme.json can't express.
 *
 * ---------------------------------------------------------------
 * HOW THE TEXTURES WORK
 * ---------------------------------------------------------------
 * There are no texture image files. Each texture is a tiny SVG
 * written right into the CSS as a "data URI". Inside the SVG,
 * <feTurbulence> generates random noise (the same math behind
 * Photoshop's Clouds and Add Noise filters), and <feColorMatrix>
 * tints it and sets how see-through it is.
 *
 *   baseFrequency  high (0.8)  = fine grain, like paper tooth
 *                  low (0.01)  = big soft blotches, like age stains
 *   The last row of the color matrix ("0 0 0 A B") controls opacity.
 *   A big A with a negative B keeps only the darkest noise peaks,
 *   which turns grain into scattered ink specks.
 *
 * Every texture is a variable in :root below. To use your own paper
 * scan instead, replace one line, for example:
 *     --rp-card-paper: url(../images/my-paper.jpg);
 *
 * ---------------------------------------------------------------
 * THE PAGE BACKGROUND (image files in assets/images/)
 * ---------------------------------------------------------------
 * Two layers sit behind everything:
 *   body          linen (500px seamless tile), scrolling with the page.
 *   body::after   four corner smudges, anchored to the corners of the
 *                 whole PAGE: the top two at the very top, the bottom
 *                 two at the very end, scrolling with the page like
 *                 ink printed on the sheet. They're multiplied onto the
 *                 linen and broken up by a blotchy noise mask, so they
 *                 read like ink rubbed off another sheet rather than
 *                 a smooth vignette.
 * The Gray Linen style variation (Appearance → Editor → Styles) swaps in
 * the gray linen as a cover image.
 *
 * ---------------------------------------------------------------
 * RESTYLING THE RECIPE CARD
 * ---------------------------------------------------------------
 * The Recipe WP plugin exposes the card's colors and fonts as CSS
 * variables (--rwp-bg, --rwp-accent…). This theme only sets those
 * variables plus a few extra touches, so the plugin itself is never
 * edited. Rules are prefixed with .rwp-card so they win over the
 * plugin's own single-class rules no matter which loads first.
 */

:root {
	/* Fine paper tooth for the page background. */
	--rp-grain: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='220' height='220'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 0.24 0 0 0 0 0.19 0 0 0 0 0.12 0 0 0 0.09 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");

	/* Sparse ink specks ("particles") scattered over the page. */
	--rp-specks: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='420' height='420'%3E%3Cfilter id='s'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.55' numOctaves='2' seed='7' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 0.14 0 0 0 0 0.12 0 0 0 0 0.1 0 0 0 14 -10.6'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23s)'/%3E%3C/svg%3E");

	/* Large soft age stains for the old-paper cards. */
	--rp-stains: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='600' height='600'%3E%3Cfilter id='t'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.012' numOctaves='3' seed='3' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 0.55 0 0 0 0 0.4 0 0 0 0 0.15 0 0 0 0.55 -0.12'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23t)'/%3E%3C/svg%3E");

	/* A hand-drawn ink rule (slightly wobbly line) used under the header. */
	--rp-ink-rule: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='600' height='8' preserveAspectRatio='none'%3E%3Cpath d='M0 4 C 60 2.6, 120 5.4, 190 3.8 S 330 2.4, 400 4.6 S 520 5.2, 600 3.6' fill='none' stroke='%2323201c' stroke-width='1.6' stroke-linecap='round' opacity='0.85'/%3E%3C/svg%3E");

	/* The card paper: aged color + stains + grain + darker edges. */
	--rp-card-paper:
		var(--rp-grain),
		var(--rp-stains),
		radial-gradient(ellipse at center, transparent 55%, rgba(120, 85, 30, 0.14) 100%);

	--rp-card-shadow: 0 1px 1px rgba(60, 40, 10, 0.08), 0 14px 28px -14px rgba(60, 40, 10, 0.45);

	/* ---- Page background ---- */
	--rp-linen-light: url(../images/linen-light.webp); /* Seamless tile. */
	--rp-linen-gray: url(../images/linen-gray.webp);   /* Has a seam: use as a cover image. */
	--rp-page-bg-image: var(--rp-linen-light);
	--rp-page-bg-size: 250px 250px; /* 500px tile shown at half size = crisp weave on retina. */
	--rp-page-bg-repeat: repeat;
	--rp-page-bg-position: left top;
	--rp-page-bg-attachment: scroll; /* The cover-image variation uses "fixed". */
	--rp-page-bg-color: #e6e1db;
	--rp-page-specks: none; /* Clean linen. Use var(--rp-specks) to add ink specks back. */

	/* ---- Corner ink smudges ---- */
	--rp-smudge-size: clamp(170px, 24vw, 400px);
	--rp-smudge-opacity: 0.75;
	/* Blotchy noise used as a mask. Set to "none" for smooth corners. */
	--rp-smudge-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='560' height='560'%3E%3Cfilter id='m'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.02' numOctaves='4' seed='11' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 1.7 0 0 0 -0.3'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23m)'/%3E%3C/svg%3E");

	/* ---- Single recipe hero ---- */
	--rp-hero-height: clamp(340px, 44vw, 560px);
	--rp-hero-overlap: clamp(70px, 10vw, 150px); /* How far the content rides up over the photo. */
	--rp-hero-opacity: 0.6;                       /* Photo strength at its most solid. */
	--rp-hero-solid: 22%;                         /* Where the fade-out begins. */
	--rp-hero-offset: -8px;                       /* Tucks the photo up under the header's ink line. */
}

/* ---------- Page ---------- */

body {
	/* The smudge layer measures itself against the body, so the body
	   must be at least one screen tall (minus the admin bar, if shown). */
	position: relative;
	min-height: calc(100vh - var(--wp-admin--admin-bar--height, 0px));
	background-color: var(--rp-page-bg-color);
}

/* Layer 1: linen (+ optional specks), on the page itself so it scrolls with it. */
body {
	background-image: var(--rp-page-specks), var(--rp-page-bg-image);
	background-size: auto, var(--rp-page-bg-size);
	background-repeat: repeat, var(--rp-page-bg-repeat);
	background-position: 0 0, var(--rp-page-bg-position);
	background-attachment: scroll, var(--rp-page-bg-attachment);
}

body::after {
	content: "";
	position: absolute;
	inset: 0;
	z-index: -1;
	pointer-events: none;
}

/* Layer 2: corner smudges (transparent PNG/WebP, dark ink at the corner). */
body::after {
	background-image:
		url(../images/smudge-tl.webp),
		url(../images/smudge-tr.webp),
		url(../images/smudge-br.webp),
		url(../images/smudge-bl.webp);
	background-position: left top, right top, right bottom, left bottom;
	background-size: var(--rp-smudge-size) var(--rp-smudge-size);
	background-repeat: no-repeat;
	mix-blend-mode: multiply; /* Darkens the linen like ink, never paints over it. */
	opacity: var(--rp-smudge-opacity);
	-webkit-mask-image: var(--rp-smudge-mask);
	mask-image: var(--rp-smudge-mask);
}

@media print {
	body {
		background: none;
	}

	body::after {
		display: none;
	}
}

/* Ink on paper: a faint bleed around headings and the site title. */
h1, h2, h3,
.wp-block-site-title {
	text-shadow: 0 0 0.6px rgba(35, 32, 28, 0.45);
}

::selection {
	color: var(--wp--preset--color--paper);
	background: var(--wp--preset--color--tomato);
}

/* ---------- Header & footer ---------- */

.rp-header {
	background: var(--rp-ink-rule) bottom center / 100% 8px no-repeat;
}

.rp-footer {
	background: var(--rp-ink-rule) top center / 100% 8px no-repeat;
}

.rp-footer .wp-block-site-title {
	font-size: var(--wp--preset--font-size--x-large);
}

.rp-colophon a {
	color: var(--wp--preset--color--tomato);
}

/* ---------- Home hero ---------- */

.rp-kicker {
	font-family: var(--wp--preset--font-family--typewriter);
	font-size: var(--wp--preset--font-size--small);
	letter-spacing: 0.12em;
	text-transform: uppercase;
	color: var(--wp--preset--color--tomato);
}

/* The site tagline, set very large, is the homepage headline.
   Change the tagline under Settings > General and the hero follows. */
.wp-block-site-tagline.rp-hero-tagline {
	margin-top: 0.25rem;
	font-family: var(--wp--preset--font-family--heading);
	font-size: var(--wp--preset--font-size--xx-large);
	font-weight: 700;
	line-height: 1.05;
	letter-spacing: -0.02em;
	color: var(--wp--preset--color--ink);
	text-shadow: 0 0 0.6px rgba(35, 32, 28, 0.45);
}

.rp-section-title {
	display: flex;
	align-items: center;
	gap: 1rem;
}

/* Short ink strokes on either side of section titles. */
.rp-section-title::before,
.rp-section-title::after {
	content: "";
	flex: 1;
	height: 8px;
	background: var(--rp-ink-rule) center / 100% 8px no-repeat;
}

/* ---------- Index-card grid (archives, home, search) ---------- */

.rp-index-card {
	height: 100%;
	background-color: var(--wp--preset--color--aged-paper);
	background-image: var(--rp-card-paper);
	border-radius: 3px;
	box-shadow: var(--rp-card-shadow);
	transform: rotate(-0.6deg);
	transition: transform 0.2s ease, box-shadow 0.2s ease;
}

/* Alternate the tilt so the grid looks like cards pinned by hand. */
.wp-block-post-template > li:nth-child(even) .rp-index-card {
	transform: rotate(0.5deg);
}

.wp-block-post-template > li:nth-child(3n) .rp-index-card {
	transform: rotate(-0.2deg);
}

.wp-block-post-template > li .rp-index-card:hover,
.wp-block-post-template > li .rp-index-card:focus-within {
	transform: rotate(0deg) translateY(-3px);
	box-shadow: 0 2px 2px rgba(60, 40, 10, 0.08), 0 20px 34px -14px rgba(60, 40, 10, 0.5);
}

.rp-index-card .wp-block-post-featured-image img {
	border-radius: 2px;
}

/* Index cards have a red line under the title area. */
.rp-index-card .wp-block-post-title {
	padding-bottom: 0.4rem;
	border-bottom: 1.5px solid rgba(163, 56, 31, 0.55);
}

/* ---------- Single recipe: faded photo hero ---------- */

/*
 * The featured image fills the hero behind the title. It fades in over
 * the first 10px under the header rule, holds, then fades to fully
 * transparent, so it melts into the linen. The recipe content below is
 * pulled up by --rp-hero-overlap so it rides over the faded part.
 */
.rp-recipe-hero {
	position: relative;
	margin-block-start: var(--rp-hero-offset);
	min-height: var(--rp-hero-height);
	padding-top: var(--wp--preset--spacing--50);
	padding-bottom: calc(var(--rp-hero-overlap) + var(--wp--preset--spacing--40));
}

.rp-recipe-hero .rp-recipe-hero__image {
	position: absolute;
	inset: 0;
	z-index: 0;
	width: 100%;
	max-width: none;
	height: 100%;
	margin: 0 !important;
}

.rp-recipe-hero .rp-recipe-hero__image img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	opacity: var(--rp-hero-opacity);
	-webkit-mask-image: linear-gradient(to bottom, transparent 0, #000 10px, #000 var(--rp-hero-solid), transparent 100%);
	mask-image: linear-gradient(to bottom, transparent 0, #000 10px, #000 var(--rp-hero-solid), transparent 100%);
}

.rp-recipe-hero__inner {
	position: relative;
	z-index: 1;
}

/* WordPress adds a gap between the header and <main>; the hero sits flush instead. */
:where(.wp-site-blocks) > main:has(> .rp-recipe-hero) {
	margin-block-start: 0;
}

/* A soft paper-colored glow keeps the title readable over any photo. */
.rp-recipe-hero .wp-block-post-title,
.rp-recipe-hero .rp-byline {
	text-shadow: 0 0 2px rgba(252, 250, 245, 0.95), 0 0 18px rgba(252, 250, 245, 0.9);
}

/* Space under the title for the editable Recipe Call to Action part. */
.rp-recipe-cta {
	margin-top: var(--wp--preset--spacing--40);
}

main .rp-recipe-body {
	position: relative;
	z-index: 2;
	margin-block-start: calc(-1 * var(--rp-hero-overlap));
}

/* No featured image: no tall empty hero, no overlap. */
.rp-recipe-hero:not(:has(.rp-recipe-hero__image img)) {
	min-height: 0;
	padding-bottom: var(--wp--preset--spacing--40);
}

main .rp-recipe-hero:not(:has(.rp-recipe-hero__image img)) + .rp-recipe-body {
	margin-block-start: 0;
}

/* ---------- Single recipe ---------- */

.rp-photo img {
	border-radius: 3px;
	box-shadow: var(--rp-card-shadow);
}

.rp-byline {
	font-family: var(--wp--preset--font-family--typewriter);
	font-size: var(--wp--preset--font-size--small);
	color: var(--wp--preset--color--ink-soft);
}

/* ---------- Recipe WP card → aged index card ---------- */

.rwp-card,
.rwp-jump {
	--rwp-bg: var(--wp--preset--color--aged-paper);
	--rwp-bg-image: var(--rp-card-paper);
	--rwp-text: var(--wp--preset--color--ink);
	--rwp-muted: #6a5c45;
	--rwp-border: rgba(120, 90, 40, 0.28);
	--rwp-accent: var(--wp--preset--color--tomato);
	--rwp-accent-text: var(--wp--preset--color--paper);
	--rwp-tag-bg: rgba(255, 251, 238, 0.6);
	--rwp-radius: 3px;
	--rwp-font-heading: var(--wp--preset--font-family--heading);
	--rwp-font-body: var(--wp--preset--font-family--body);
	--rwp-heading-weight: 700;
	--rwp-shadow: var(--rp-card-shadow);
	--rwp-star: #c98a12;
	--rwp-star-empty: rgba(120, 90, 40, 0.25);
}

/* Stars in reviews and the review form: same mustard as the cards. */
.rwp-stars,
.rwp-rate {
	--rwp-star: #c98a12;
	--rwp-star-empty: #d9ceb6;
}

.rwp-rate legend {
	font-family: var(--wp--preset--font-family--typewriter);
	font-size: var(--wp--preset--font-size--small);
	letter-spacing: 0.06em;
	text-transform: uppercase;
}

.rwp-card .rwp-card__rating {
	font-family: var(--wp--preset--font-family--typewriter);
}

/* The classic index-card red rule under the title area. */
.rwp-card .rwp-card__meta {
	border-top: 2px solid rgba(163, 56, 31, 0.6);
	border-bottom-style: dashed;
}

/* Typewriter labels: times, tags, groups, buttons. */
.rwp-card .rwp-card__meta dt,
.rwp-card .rwp-card__group,
.rwp-card .rwp-tag,
.rwp-card .rwp-units button,
.rwp-card .rwp-card__footer,
.rwp-card .rwp-button,
.rwp-jump .rwp-button {
	font-family: var(--wp--preset--font-family--typewriter);
	letter-spacing: 0.04em;
}

.rwp-card .rwp-card__meta dd {
	font-family: var(--wp--preset--font-family--heading);
}

/* Amounts look typed onto the card. */
.rwp-card .rwp-ingredient__amount,
.rwp-card .rwp-ingredient__unit {
	font-family: var(--wp--preset--font-family--typewriter);
}

/* Faint ruled lines behind the steps, like a lined card. */
.rwp-card .rwp-steps {
	background-image: repeating-linear-gradient(
		to bottom,
		transparent 0,
		transparent calc(1.6em - 1px),
		rgba(90, 120, 160, 0.16) calc(1.6em - 1px),
		rgba(90, 120, 160, 0.16) 1.6em
	);
	background-position: 0 0.15em;
}

.rwp-card .rwp-card__notes {
	border-left: 3px solid var(--wp--preset--color--tomato);
	border-radius: 0;
}

.rwp-card .rwp-card__title {
	text-shadow: 0 0 0.6px rgba(35, 32, 28, 0.45);
}

/* "Recipe #63 in …" line under the card title: typed like a library stamp. */
.rwp-card .rwp-card__collection {
	font-family: var(--wp--preset--font-family--typewriter);
	font-weight: 400;
	letter-spacing: 0.06em;
	text-transform: uppercase;
	font-size: 0.78em;
}

/* Email-for-download form: an index card with typed labels. */
.rwp-collection .rwp-gate,
.rwp-gate {
	--rwp-bg: var(--wp--preset--color--aged-paper);
	--rwp-bg-image: var(--rp-card-paper);
	--rwp-text: var(--wp--preset--color--ink);
	--rwp-muted: #6a5c45;
	--rwp-border: rgba(120, 90, 40, 0.28);
	--rwp-accent: var(--wp--preset--color--tomato);
	--rwp-accent-text: var(--wp--preset--color--paper);
	--rwp-radius: 3px;
	--rwp-shadow: var(--rp-card-shadow);
	--rwp-font-heading: var(--wp--preset--font-family--heading);
}

.rwp-gate .rwp-gate__field span,
.rwp-gate button.rwp-button,
.rwp-gate .rwp-collection__size {
	font-family: var(--wp--preset--font-family--typewriter);
	letter-spacing: 0.04em;
}

.rwp-gate .rwp-gate__field input {
	font-family: var(--wp--preset--font-family--typewriter);
	background: rgba(255, 253, 246, 0.85);
	border-color: rgba(120, 90, 40, 0.35);
	border-radius: 2px;
}

/* Kitchen Tested stamp: basil ink in the typewriter face. */
.rwp-card .rwp-stamp {
	--rwp-stamp-color: var(--wp--preset--color--basil);
	font-family: var(--wp--preset--font-family--typewriter);
}

/* ---------- Recipe WP collections (books & roundups) → pinned index cards ---------- */

.rwp-collection {
	--rwp-bg: var(--wp--preset--color--aged-paper);
	--rwp-bg-image: var(--rp-card-paper);
	--rwp-text: var(--wp--preset--color--ink);
	--rwp-muted: #6a5c45;
	--rwp-border: transparent;
	--rwp-accent: var(--wp--preset--color--tomato);
	--rwp-accent-text: var(--wp--preset--color--paper);
	--rwp-radius: 3px;
	--rwp-shadow: var(--rp-card-shadow);
	--rwp-font-heading: var(--wp--preset--font-family--heading);
	--rwp-font-label: var(--wp--preset--font-family--typewriter);
	--rwp-star: #c98a12;
	--rwp-star-empty: rgba(120, 90, 40, 0.25);
}

/* A slight, alternating tilt, like the archive grid. */
.rwp-collection__item {
	transform: rotate(-0.35deg);
	transition: transform 0.2s ease;
}

.rwp-collection__item:nth-child(even) {
	transform: rotate(0.3deg);
}

.rwp-collection__item:hover,
.rwp-collection__item:focus-within {
	transform: rotate(0deg);
}

/* The photo sits on the card like a snapshot with a white border. */
.rwp-collection .rwp-collection__image {
	padding: 10px;
}

.rwp-collection .rwp-collection__image img {
	border: 6px solid #fffdf6;
	box-shadow: 0 1px 3px rgba(60, 40, 10, 0.25);
}

.rwp-collection .rwp-collection__num {
	font-weight: 400;
	letter-spacing: 0.1em;
}

.rwp-collection .rwp-collection__meta,
.rwp-collection .rwp-collection__link,
.rwp-collection .rwp-collection__size,
.rwp-collection .rwp-button {
	font-family: var(--wp--preset--font-family--typewriter);
	letter-spacing: 0.04em;
}

/* Red index-card rule under each roundup title. */
.rwp-collection--list .rwp-collection__title {
	padding-bottom: 0.3em;
	border-bottom: 2px solid rgba(163, 56, 31, 0.5);
}

/* ---------- Recipe WP submission form → a blank index card ---------- */

.rwp-submit {
	--rwp-bg: var(--wp--preset--color--aged-paper);
	--rwp-bg-image: var(--rp-card-paper);
	--rwp-text: var(--wp--preset--color--ink);
	--rwp-muted: #6a5c45;
	--rwp-border: rgba(120, 90, 40, 0.3);
	--rwp-accent: var(--wp--preset--color--tomato);
	--rwp-accent-text: var(--wp--preset--color--paper);
	--rwp-radius: 3px;
	--rwp-font-heading: var(--wp--preset--font-family--heading);
	--rwp-shadow: var(--rp-card-shadow);
	--rwp-input-bg: rgba(255, 252, 242, 0.85);
}

.rwp-submit .rwp-submit__section legend {
	border-bottom: 2px solid rgba(163, 56, 31, 0.6);
}

.rwp-submit .rwp-field label,
.rwp-submit .rwp-button {
	font-family: var(--wp--preset--font-family--typewriter);
	letter-spacing: 0.03em;
}

.rwp-submit .rwp-button {
	text-transform: uppercase;
	font-size: var(--wp--preset--font-size--small);
}

/* Long sentences read better in the body face. */
.rwp-submit .rwp-field--check label {
	font-family: var(--wp--preset--font-family--body);
	letter-spacing: normal;
}

/* Typing on the card: ingredient & step boxes use the typewriter face. */
.rwp-submit textarea[name="rwp_ingredients"],
.rwp-submit textarea[name="rwp_instructions"] {
	font-family: var(--wp--preset--font-family--typewriter);
	font-size: 0.95em;
}

/* ---------- Recipe WP filter bar & browse tiles ---------- */

.rwp-filters,
.rwp-tiles {
	--rwp-bg: var(--wp--preset--color--paper);
	--rwp-text: var(--wp--preset--color--ink);
	--rwp-muted: #6a5c45;
	--rwp-border: rgba(120, 90, 40, 0.35);
	--rwp-accent: var(--wp--preset--color--tomato);
	--rwp-accent-text: var(--wp--preset--color--paper);
	--rwp-chip-bg: rgba(242, 228, 187, 0.65);
	--rwp-radius: 3px;
	--rwp-panel-shadow: var(--rp-card-shadow);
}

/* Filter buttons and labels in the typewriter face. */
.rwp-filters .rwp-facet__toggle,
.rwp-filters .rwp-facet__apply,
.rwp-filters .rwp-filters__submit,
.rwp-filters .rwp-filters__total {
	font-family: var(--wp--preset--font-family--typewriter);
	letter-spacing: 0.04em;
	text-transform: uppercase;
	font-size: var(--wp--preset--font-size--small);
}

/* Dropdown panels are little aged-paper cards. */
.rwp-filters .rwp-facet__panel {
	background-color: var(--wp--preset--color--aged-paper);
	background-image: var(--rp-card-paper);
}

.rwp-filters .rwp-chip {
	background: rgba(255, 252, 242, 0.75);
}

/* Shape tiles: small index cards with a hand-pinned tilt. */
.rwp-tiles .rwp-tile {
	background-color: var(--wp--preset--color--aged-paper);
	background-image: var(--rp-card-paper);
	border: 0;
	box-shadow: var(--rp-card-shadow);
}

.rwp-tiles li:nth-child(odd) .rwp-tile { transform: rotate(-1deg); }
.rwp-tiles li:nth-child(even) .rwp-tile { transform: rotate(0.8deg); }

.rwp-tiles .rwp-tile:hover,
.rwp-tiles .rwp-tile:focus-visible {
	transform: rotate(0deg) translateY(-3px);
}

.rwp-tiles .rwp-tile__name {
	font-family: var(--wp--preset--font-family--heading);
}

.rwp-tiles .rwp-tile__count {
	font-family: var(--wp--preset--font-family--typewriter);
}

/* The tiles' heading matches the other ink-ruled section titles. */
.rwp-tiles__heading {
	display: flex;
	align-items: center;
	gap: 1rem;
	margin: 0 0 1.25rem;
	font-size: var(--wp--preset--font-size--large);
	text-align: center;
}

.rwp-tiles__heading::before,
.rwp-tiles__heading::after {
	content: "";
	flex: 1;
	height: 8px;
	background: var(--rp-ink-rule) center / 100% 8px no-repeat;
}

.rp-shape-tiles {
	/* Padding, not margin: WordPress's layout spacing overrides block margins. */
	padding-bottom: var(--wp--preset--spacing--50);
}

/* ---------- Header buttons ---------- */

.rp-header-right {
	align-items: center;
}

.rp-header-actions .wp-block-button__link {
	font-size: 0.78rem;
	white-space: nowrap;
}

/* ---------- Button styles: Retro and Flat ----------
 * Pick them in the editor: select a Button block → Styles. Any color you
 * choose in the editor still wins, so one style works in every color.
 */

.wp-block-button.is-style-retro .wp-block-button__link {
	padding: 0.55em 1.15em;
	color: var(--wp--preset--color--paper);
	background-color: var(--wp--preset--color--tomato);
	border: 2px solid var(--wp--preset--color--ink);
	border-radius: 6px;
	box-shadow: 3px 3px 0 var(--wp--preset--color--ink);
	transition: transform 0.08s ease, box-shadow 0.08s ease;
}

.wp-block-button.is-style-retro .wp-block-button__link:hover,
.wp-block-button.is-style-retro .wp-block-button__link:focus-visible {
	color: var(--wp--preset--color--paper);
	background-color: var(--wp--preset--color--tomato);
	transform: translate(-1px, -1px);
	box-shadow: 4px 4px 0 var(--wp--preset--color--ink);
}

/* Pressed: the button "stamps" down onto the paper. */
.wp-block-button.is-style-retro .wp-block-button__link:active {
	transform: translate(2px, 2px);
	box-shadow: 1px 1px 0 var(--wp--preset--color--ink);
}

.wp-block-button.is-style-flat .wp-block-button__link {
	color: var(--wp--preset--color--paper);
	background-color: var(--wp--preset--color--ink);
	border: 0;
	border-radius: 3px;
	box-shadow: none;
}

.wp-block-button.is-style-flat .wp-block-button__link:hover,
.wp-block-button.is-style-flat .wp-block-button__link:focus-visible {
	background-color: var(--wp--preset--color--tomato);
}

/* Share button (class "rp-share"): basil green, so it reads as the
   second choice next to the tomato "Share a recipe" button. */
.wp-block-button.rp-share {
	position: relative; /* The share menu opens under it. */
}

.wp-block-button.is-style-retro.rp-share .wp-block-button__link,
.wp-block-button.is-style-retro.rp-share .wp-block-button__link:hover,
.wp-block-button.is-style-retro.rp-share .wp-block-button__link:focus-visible {
	background-color: var(--wp--preset--color--basil);
}

/* The little "or" between the two call-to-action buttons. */
.rp-cta-or {
	margin: 0;
	font-family: var(--wp--preset--font-family--typewriter);
	font-size: var(--wp--preset--font-size--small);
	font-style: italic;
	color: var(--wp--preset--color--ink-soft);
}

/* Narrow screens: stack the two buttons with the "or" between them. */
@media (max-width: 520px) {
	.rp-cta-row {
		flex-direction: column;
		align-items: flex-start !important;
		gap: 0.4rem !important;
	}

	.rp-cta-or {
		padding-left: 1rem;
	}
}

/* An open share menu must sit above the recipe content that rides up over
   the hero (that content has z-index 2), or its lower items can't be clicked. */
.rp-recipe-hero__inner:has(.rp-share-menu),
.wp-block-group:has(> .rp-cta-row .rp-share-menu),
.rp-share-open .rp-recipe-hero__inner {
	z-index: 30;
}

/* Share menu: a small aged-paper card. */
.rp-share-menu {
	position: absolute;
	overflow: hidden; /* Hover colors stay inside the rounded card. */
	top: calc(100% + 10px);
	left: 0;
	z-index: 20;
	min-width: 170px;
	margin: 0;
	padding: 6px 0;
	list-style: none;
	background-color: var(--wp--preset--color--aged-paper);
	background-image: var(--rp-card-paper);
	border: 2px solid var(--wp--preset--color--ink);
	border-radius: 6px;
	box-shadow: 3px 3px 0 var(--wp--preset--color--ink);
}

.rp-share-menu a,
.rp-share-menu button {
	box-sizing: border-box; /* Width includes the padding, so items fit the card. */
	display: block;
	width: 100%;
	padding: 7px 16px;
	font: inherit;
	font-family: var(--wp--preset--font-family--typewriter);
	font-size: 0.9rem;
	color: var(--wp--preset--color--ink);
	text-align: left;
	text-decoration: none;
	cursor: pointer;
	background: none;
	border: 0;
}

.rp-share-menu a:hover,
.rp-share-menu a:focus-visible,
.rp-share-menu button:hover,
.rp-share-menu button:focus-visible {
	color: var(--wp--preset--color--paper);
	background: var(--wp--preset--color--basil);
	outline: none;
}

/* Facebook button: brand blue + the "f" logo (drawn with a CSS mask). */
.wp-block-button.rp-btn-facebook .wp-block-button__link {
	display: inline-flex;
	align-items: center;
	gap: 0.45em;
	background-color: #1877f2;
}

.wp-block-button.rp-btn-facebook .wp-block-button__link:hover,
.wp-block-button.rp-btn-facebook .wp-block-button__link:focus-visible {
	background-color: #0f63d4;
}

.wp-block-button.rp-btn-facebook .wp-block-button__link::before {
	content: "";
	flex: none;
	width: 1.15em;
	height: 1.15em;
	background-color: currentColor;
	-webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M24 12.07C24 5.41 18.63 0 12 0S0 5.41 0 12.07C0 18.1 4.39 23.1 10.13 24v-8.44H7.08v-3.49h3.05V9.41c0-3.02 1.79-4.69 4.53-4.69 1.31 0 2.68.24 2.68.24v2.97h-1.51c-1.49 0-1.96.93-1.96 1.89v2.25h3.33l-.53 3.49h-2.8V24C19.61 23.1 24 18.1 24 12.07z'/%3E%3C/svg%3E") center / contain no-repeat;
	mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M24 12.07C24 5.41 18.63 0 12 0S0 5.41 0 12.07C0 18.1 4.39 23.1 10.13 24v-8.44H7.08v-3.49h3.05V9.41c0-3.02 1.79-4.69 4.53-4.69 1.31 0 2.68.24 2.68.24v2.97h-1.51c-1.49 0-1.96.93-1.96 1.89v2.25h3.33l-.53 3.49h-2.8V24C19.61 23.1 24 18.1 24 12.07z'/%3E%3C/svg%3E") center / contain no-repeat;
}

/* Phones: Facebook shrinks to its logo (the label is still read aloud),
   buttons sit left and the menu icon moves to the far right. */
@media (max-width: 600px) {
	.rp-header-right {
		width: 100%;
		justify-content: space-between;
	}

	.rp-header-right > .wp-block-navigation {
		order: 2;
	}

	.rp-header-actions .wp-block-button.rp-btn-facebook .wp-block-button__link {
		gap: 0;
		padding: 8px; /* px, not em: the font size is 0 here. */
		font-size: 0;
	}

	.rp-header-actions .wp-block-button.rp-btn-facebook .wp-block-button__link::before {
		width: 18px;
		height: 18px;
	}
}

/* Respect people who turn off motion in their system settings. */
@media (prefers-reduced-motion: reduce) {
	.wp-block-button.is-style-retro .wp-block-button__link,
	.rwp-tiles .rwp-tile,
	.rp-index-card,
	.wp-block-post-template > li:nth-child(n) .rp-index-card {
		transform: none;
		transition: none;
	}
}