/*
Theme Name: Feeding My Addiction
Theme URI: https://www.feedingmyaddiction.com
Author: Feeding My Addiction
Description: Custom theme for feedingmyaddiction.com — healthy/protein dessert and decorated sugar cookie recipe blog. Candy-bakery archetype: bright confectionery palette, cupcake/cookie/cake-shaped components, dessert-pattern backdrop.
Version: 2.0.0
Text Domain: fma
*/

/* ===================================================================
   Self-hosted fonts (no CDN)
   =================================================================== */
@font-face {
	font-family: 'FMA Display';
	src: url('assets/fonts/anton-400.woff2') format('woff2');
	font-weight: 400;
	font-style: normal;
	font-display: swap;
}
@font-face {
	font-family: 'FMA Script';
	src: url('assets/fonts/dancingscript-600.woff2') format('woff2');
	font-weight: 600;
	font-style: normal;
	font-display: swap;
}
/* Shantell Sans variable font — marker-style handwriting designed for running
   text (the free open-license equivalent of Dreaming Outloud Pro; to use the
   licensed original later, just point this src at its woff2). The mono stays
   for small labels/tickets where it reads as bakery-receipt charm. */
@font-face {
	font-family: 'FMA Body';
	src: url('assets/fonts/shantellsans-variable.woff2') format('woff2-variations');
	font-weight: 300 800;
	font-style: normal;
	font-display: swap;
}
@font-face {
	font-family: 'FMA Mono';
	src: url('assets/fonts/ibmplexmono-400.woff2') format('woff2');
	font-weight: 400;
	font-style: normal;
	font-display: swap;
}
@font-face {
	font-family: 'FMA Mono';
	src: url('assets/fonts/ibmplexmono-500.woff2') format('woff2');
	font-weight: 500;
	font-style: normal;
	font-display: swap;
}
@font-face {
	font-family: 'FMA Mono';
	src: url('assets/fonts/ibmplexmono-600.woff2') format('woff2');
	font-weight: 600;
	font-style: normal;
	font-display: swap;
}
@font-face {
	font-family: 'FMA Mono';
	src: url('assets/fonts/ibmplexmono-700.woff2') format('woff2');
	font-weight: 700;
	font-style: normal;
	font-display: swap;
}

/* ===================================================================
   Tokens — candy-bakery palette + motion personality.
   Legacy token NAMES are kept (they're referenced from template inline
   styles + DB content) but remapped to the new candy values.
   =================================================================== */
:root {
	--fma-ink:      #fffdf8; /* content surface — near-white vanilla */
	--fma-ink-2:    #e9b9cf; /* wafer-pink line — dashed rules, secondary borders */
	--fma-ink-3:    #efd3b3; /* biscuit border — image frames, quiet outlines */
	--fma-cream:    #43231a; /* deep chocolate text */
	--fma-butter:   #ff4f87; /* strawberry — primary accent */
	--fma-frosting: #ffb9d2; /* bubblegum — soft accent */
	--fma-stone:    #7a5140; /* muted secondary text, cocoa-gray */

	/* the candy jar */
	--fma-lemon:    #ffd23f;
	--fma-mint:     #2ec4a0;
	--fma-sky:      #3cb8e6;
	--fma-lav:      #b487e0;
	--fma-choc:     #5a3222; /* chocolate — component borders, footer slab */
	--fma-biscuit:  #f7dfae; /* baked-cookie surface */

	/* motion personality: "stagger cascade" — choreographed reveal, own names */
	--fma-ease:  cubic-bezier(0.25, 0.5, 0.3, 1);
	--fma-dur-1: 150ms; /* hovers, focus */
	--fma-dur-2: 340ms; /* reveals, cards */
	--fma-dur-3: 620ms; /* section-level, ambient */
	--fma-stagger-step: 70ms;

	/* icing drip + frosting scallop tiles, used as MASKS so any element can
	   pour them in its own candy color (one SVG, n colors) */
	--fma-drip-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='26' viewBox='0 0 140 26'%3E%3Cg fill='%23000'%3E%3Crect x='0' y='0' width='140' height='10'/%3E%3Ccircle cx='12' cy='12' r='9'/%3E%3Ccircle cx='34' cy='10' r='6'/%3E%3Ccircle cx='56' cy='14' r='10'/%3E%3Ccircle cx='80' cy='9' r='5'/%3E%3Ccircle cx='100' cy='13' r='8'/%3E%3Ccircle cx='124' cy='10' r='6'/%3E%3C/g%3E%3C/svg%3E");
	--fma-scallop-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='40' height='26' viewBox='0 0 40 26'%3E%3Ccircle cx='20' cy='13' r='13' fill='%23000'/%3E%3Crect x='0' y='13' width='40' height='13' fill='%23000'/%3E%3C/svg%3E");
	/* rainbow sprinkles — used as a colored tile (dividers, confetti surfaces) */
	--fma-sprinkles: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='72' height='72' viewBox='0 0 72 72'%3E%3Cg%3E%3Crect x='6' y='10' width='9' height='3' rx='1.5' fill='%23ff4f87' transform='rotate(24 10 11)'/%3E%3Crect x='30' y='6' width='9' height='3' rx='1.5' fill='%232ec4a0' transform='rotate(-30 34 7)'/%3E%3Crect x='54' y='14' width='9' height='3' rx='1.5' fill='%233cb8e6' transform='rotate(40 58 15)'/%3E%3Crect x='14' y='34' width='9' height='3' rx='1.5' fill='%23ffd23f' transform='rotate(-18 18 35)'/%3E%3Crect x='42' y='30' width='9' height='3' rx='1.5' fill='%23b487e0' transform='rotate(12 46 31)'/%3E%3Crect x='60' y='42' width='9' height='3' rx='1.5' fill='%23ff4f87' transform='rotate(-36 64 43)'/%3E%3Crect x='8' y='56' width='9' height='3' rx='1.5' fill='%233cb8e6' transform='rotate(30 12 57)'/%3E%3Crect x='32' y='52' width='9' height='3' rx='1.5' fill='%23ffd23f' transform='rotate(-24 36 53)'/%3E%3Crect x='52' y='62' width='9' height='3' rx='1.5' fill='%232ec4a0' transform='rotate(18 56 63)'/%3E%3Ccircle cx='24' cy='22' r='2' fill='%23b487e0'/%3E%3Ccircle cx='50' cy='44' r='2' fill='%23ff4f87'/%3E%3Ccircle cx='20' cy='66' r='2' fill='%23ffd23f'/%3E%3C/g%3E%3C/svg%3E");
	/* chocolate-chip specks — overlay on biscuit surfaces */
	--fma-chips: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='64' height='64' viewBox='0 0 64 64'%3E%3Cg fill='%235a3222'%3E%3Ccircle cx='12' cy='10' r='3'/%3E%3Ccircle cx='40' cy='16' r='2.4' opacity='.85'/%3E%3Ccircle cx='56' cy='36' r='3.2'/%3E%3Ccircle cx='24' cy='34' r='2.6' opacity='.9'/%3E%3Ccircle cx='8' cy='52' r='2.4' opacity='.85'/%3E%3Ccircle cx='38' cy='54' r='3'/%3E%3Ccircle cx='54' cy='8' r='2' opacity='.8'/%3E%3C/g%3E%3C/svg%3E");
	/* a cherry with stem — sits on every cupcake cap */
	--fma-cherry: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='26' height='30' viewBox='0 0 26 30'%3E%3Cpath d='M13 12 Q14 3 22 3' fill='none' stroke='%232e7d4f' stroke-width='2.4' stroke-linecap='round'/%3E%3Cellipse cx='21' cy='5' rx='4' ry='2.2' fill='%234aa96c' transform='rotate(-24 21 5)'/%3E%3Ccircle cx='13' cy='20' r='9' fill='%23ff2f5e'/%3E%3Ccircle cx='9.5' cy='16.5' r='2.6' fill='%23ffb3c8'/%3E%3C/svg%3E");
}

/* ===================================================================
   Reset / base
   =================================================================== */
*, *::before, *::after { box-sizing: border-box; }
html { overflow-x: hidden; scroll-behavior: smooth; }
body {
	margin: 0;
	background-color: #ffe9f2;
	color: var(--fma-cream);
	font-family: 'FMA Body', 'Comic Sans MS', 'Trebuchet MS', sans-serif;
	font-size: 18.5px; /* base readable size — every plain paragraph sitewide inherits this,
	                      not just article pages (nav/buttons/badges use their own rem sizes
	                      off the root and are unaffected) */
	line-height: 1.75; /* handwriting needs a touch more breathing room than a sans */
	overflow-x: hidden;
}

/* small label/ticket elements keep the receipt-mono charm */
.fma-tagline, .fma-byline, .fma-pick__meta, .fma-pick__stat,
.fma-cat-badge, .fma-footer__fine, .fma-swap__delta {
	font-family: 'FMA Mono', 'Courier New', monospace;
}
img { max-width: 100%; height: auto; display: block; }
a { color: inherit; text-decoration: none; }
ul, ol { padding-left: 1.25em; }

/* Anton (FMA Display) ships no true italic face — font-style:italic would trigger
   browser font-synthesis, which looks visibly blurry on a bold condensed display font.
   A skew transform on the rendered box reads as italic without that artifact. */
h1, h2, h3, h4, .fma-display, .fma-brand-title {
	font-family: 'FMA Display', 'Arial Narrow', sans-serif;
	letter-spacing: 0.04em;
	line-height: 1.05;
	margin: 0 0 0.5em;
	text-wrap: balance;
	transform: skewX(-8deg);
	transform-origin: left center;
}

.fma-script {
	font-family: 'FMA Script', cursive;
	color: var(--fma-butter);
}

::selection { background: var(--fma-butter); color: #fff; }
html { scrollbar-color: var(--fma-butter) #ffe9f2; }
:focus-visible { outline: 3px solid var(--fma-sky); outline-offset: 3px; }
::marker { color: var(--fma-butter); }
input, textarea, button { accent-color: var(--fma-butter); font-family: inherit; }

/* ===================================================================
   Layout shell — the pâtisserie counter: a dessert-strewn candy backdrop
   with the content sitting on a plated vanilla slab.
   =================================================================== */
.fma-page {
	min-height: 100vh;
	padding: 1.25rem 0.75rem 2.5rem;
	background-color: #ffe9f2;
	/* hand-drawn dessert scatter: cupcake, iced donut, ice-cream cone, choc-chip
	   cookie, wrapped candy, cake slice, lollipop + loose sprinkles */
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='260' height='260' viewBox='0 0 260 260'%3E%3Cg opacity='0.55'%3E%3Cg transform='translate(16 14) rotate(-8 18 22)'%3E%3Cpath d='M4 22 h28 l-4 16 h-20 z' fill='%23ff8fb1'/%3E%3Cpath d='M12 22 l-1.5 16 M24 22 l1.5 16' stroke='%23fff' stroke-width='2' opacity='.55' fill='none'/%3E%3Ccircle cx='8' cy='18' r='6' fill='%23fffdf8'/%3E%3Ccircle cx='28' cy='18' r='6' fill='%23fffdf8'/%3E%3Ccircle cx='18' cy='12' r='8' fill='%23fffdf8'/%3E%3Ccircle cx='18' cy='4' r='3.5' fill='%23ff4054'/%3E%3C/g%3E%3Cg transform='translate(166 46) rotate(10)'%3E%3Ccircle r='16' fill='%23f6b45f'/%3E%3Cpath d='M-16 0 a16 16 0 0 1 32 0 c0 4 -4 6 -8 5 c-3 -1 -5 1 -8 1 c-3 0 -5 -2 -8 -1 c-4 1 -8 -1 -8 -5 z' fill='%23ff5c93'/%3E%3Ccircle r='5.5' fill='%23ffe9f2'/%3E%3Crect x='-9' y='-11' width='4' height='1.6' rx='.8' fill='%23fffdf8' transform='rotate(20 -7 -10)'/%3E%3Crect x='4' y='-12' width='4' height='1.6' rx='.8' fill='%23ffd23f' transform='rotate(-16 6 -11)'/%3E%3Crect x='-2' y='-8' width='4' height='1.6' rx='.8' fill='%232ec4a0' transform='rotate(8 0 -7)'/%3E%3C/g%3E%3Cg transform='translate(58 158)'%3E%3Cpath d='M0 14 h20 l-10 26 z' fill='%23e8a552'/%3E%3Cpath d='M4 20 l12 0 M6 26 l8 0' stroke='%23fff' stroke-width='1.6' opacity='.5' fill='none'/%3E%3Ccircle cx='10' cy='8' r='11' fill='%2358d9bd'/%3E%3Ccircle cx='10' cy='-4' r='3' fill='%23ff4054'/%3E%3C/g%3E%3Cg transform='translate(196 142)'%3E%3Ccircle r='15' fill='%23f2c36b'/%3E%3Ccircle cx='-6' cy='-4' r='2' fill='%236b3a1e'/%3E%3Ccircle cx='5' cy='-7' r='2.2' fill='%236b3a1e'/%3E%3Ccircle cx='8' cy='4' r='2' fill='%236b3a1e'/%3E%3Ccircle cx='-2' cy='7' r='2.4' fill='%236b3a1e'/%3E%3Ccircle cx='-9' cy='6' r='1.6' fill='%236b3a1e'/%3E%3C/g%3E%3Cg transform='translate(112 92) rotate(-15)'%3E%3Cpath d='M-9 0 l-9 -7 v14 z' fill='%2360cdf0'/%3E%3Cpath d='M9 0 l9 -7 v14 z' fill='%2360cdf0'/%3E%3Ccircle r='9' fill='%2360cdf0'/%3E%3Cpath d='M-4 -3 a5 5 0 0 1 8 2 a4 4 0 0 1 -6 3' fill='none' stroke='%23fffdf8' stroke-width='1.8'/%3E%3C/g%3E%3Cg transform='translate(24 200) rotate(6 13 15)'%3E%3Cpath d='M0 8 h26 v22 h-26 z' fill='%23fff1d8'/%3E%3Crect x='0' y='13' width='26' height='4' fill='%23ff8fb1'/%3E%3Crect x='0' y='22' width='26' height='4' fill='%23ff8fb1'/%3E%3Crect x='0' y='4' width='26' height='6' rx='3' fill='%23ff5c93'/%3E%3Ccircle cx='13' cy='1' r='3' fill='%23ff4054'/%3E%3C/g%3E%3Cg transform='translate(212 212) rotate(14)'%3E%3Crect x='-1.4' y='9' width='2.8' height='18' rx='1.4' fill='%23d9a05b'/%3E%3Ccircle r='10' fill='%23ff5c93'/%3E%3Cpath d='M0 -10 a10 10 0 0 1 0 20 a6 6 0 0 1 0 -12 a3 3 0 0 1 0 6' fill='none' stroke='%23fffdf8' stroke-width='2'/%3E%3C/g%3E%3Ccircle cx='128' cy='190' r='2.2' fill='%23ffd23f'/%3E%3Ccircle cx='90' cy='40' r='2.2' fill='%23b487e0'/%3E%3Ccircle cx='230' cy='96' r='2.2' fill='%232ec4a0'/%3E%3Ccircle cx='150' cy='236' r='2.2' fill='%23ff4f87'/%3E%3Ccircle cx='40' cy='104' r='2.2' fill='%233cb8e6'/%3E%3Ccircle cx='240' cy='180' r='2' fill='%23ffd23f'/%3E%3C/g%3E%3C/svg%3E");
	background-repeat: repeat;
	background-size: 260px 260px;
	position: relative;
}
/* the dessert scatter drifts as a FIXED overlay layer (transform = compositor-
   animated, no repaints) — .fma-page keeps the same pattern statically underneath
   as the no-motion/reduced-motion fallback; the overlay simply covers it. */
.fma-page::before {
	content: '';
	position: fixed;
	top: -260px; left: -260px;
	width: calc(100vw + 260px);
	height: calc(100vh + 260px);
	background-color: #ffe9f2;
	background-image: inherit;
	background-repeat: repeat;
	background-size: 260px 260px;
	pointer-events: none;
	z-index: 0;
}
@media (prefers-reduced-motion: no-preference) {
	/* Scroll-linked, NOT time-linked. An `infinite` time-based drift means the
	   viewport never stops changing, so Lighthouse can never call the page
	   visually complete: Speed Index read 15.9s against a Performance score of
	   89 purely because of this one layer. Tied to scroll, the layer holds
	   perfectly still at rest, the metric settles, and the drift still reads
	   when the reader moves. Browsers without scroll timelines simply get the
	   static pattern — the same fallback the comment above already describes. */
	@supports (animation-timeline: scroll()) {
		.fma-page::before {
			animation: fma-drift linear;
			animation-timeline: scroll(root block);
		}
	}
}
@keyframes fma-drift {
	to { transform: translate(260px, 260px); }
}
@media (min-width: 1024px) {
	.fma-page { padding: 2.5rem 2rem 3.5rem; } /* show more of the dessert counter around the slab */
}
.fma-frame {
	max-width: min(1320px, 96vw); /* leave a visible band of the dessert backdrop on wide screens */
	margin: 0 auto;
	position: relative;
	z-index: 1; /* above the fixed drifting-backdrop layer */
	border: 3px solid var(--fma-choc);
	border-radius: 26px;
	/* stacked-plate hard shadows in candy colors */
	box-shadow: 9px 9px 0 var(--fma-frosting), 18px 18px 0 rgba(255, 79, 135, 0.18);
	background: var(--fma-ink);
}
.fma-frame__inner {
	padding: 1.5rem 1rem;
}
@media (min-width: 768px) {
	.fma-frame__inner { padding: 2.5rem 2rem; }
}
@media (min-width: 1200px) {
	.fma-frame__inner { padding: 2rem 1.25rem; }
}

/* sprinkle rule — a strip of rainbow sprinkles instead of a plain line */
.fma-divider-rule {
	height: 14px;
	margin: 1.5rem 0;
	border: none;
	background-image: var(--fma-sprinkles);
	background-repeat: repeat-x;
	background-size: 72px 72px;
	background-position: center;
}

/* ===================================================================
   Header — bakery fascia with an icing drip hanging off its bottom edge
   =================================================================== */
.fma-header {
	text-align: center;
	margin-bottom: 3.5rem;
	padding-bottom: 2.25rem;
	position: relative;
}
.fma-header::after {
	content: '';
	position: absolute;
	left: 2%; right: 2%;
	bottom: -22px;
	height: 26px;
	background: var(--fma-butter);
	-webkit-mask-image: var(--fma-drip-mask);
	mask-image: var(--fma-drip-mask);
	-webkit-mask-repeat: repeat-x;
	mask-repeat: repeat-x;
	-webkit-mask-size: 140px 26px;
	mask-size: 140px 26px;
	pointer-events: none;
}
.fma-logo-mark { display: inline-flex; align-items: center; gap: 0.6rem; margin-bottom: 0.75rem; }
.fma-logo-mark svg { width: 44px; height: 44px; color: var(--fma-butter); }
.fma-logo-mark img,
.fma-logo-mark .custom-logo-link img,
.fma-logo-mark .custom-logo {
	width: 132px; height: 132px; max-width: 132px;
	object-fit: contain; border-radius: 50%;
}
@media (max-width: 767px) {
	.fma-logo-mark img,
	.fma-logo-mark .custom-logo-link img,
	.fma-logo-mark .custom-logo {
		width: 104px; height: 104px; max-width: 104px;
	}
}
.fma-brand-title {
	font-size: clamp(2.4rem, 8vw, 5.5rem);
	letter-spacing: 0.02em;
	margin: 0 0 0.5em;
	font-family: 'FMA Display', 'Arial Narrow', sans-serif; /* p.fma-brand-title on inner pages still reads as the display face */
	line-height: 1.05;
	color: var(--fma-choc);
	text-shadow: 4px 4px 0 var(--fma-lemon); /* frosted-sticker pop */
}
.fma-brand-title .fma-accent { color: var(--fma-butter); }
.fma-brand-subtitle {
	display: block;
	font-family: 'FMA Mono', monospace;
	font-size: 1rem;
	letter-spacing: 0.02em;
	text-transform: none;
	color: var(--fma-cream);
	opacity: 0.85;
	margin-top: 0.5rem;
	text-shadow: none;
}
.fma-tagline {
	font-size: 0.95rem;
	letter-spacing: 0.4em;
	text-transform: uppercase;
	opacity: 0.8;
	margin-top: 0.75rem;
}

/* nav links as gumdrop candies: pastel pills, chocolate rim, hard candy shadow */
.fma-nav {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: 1rem 1.25rem;
	margin-top: 2.25rem;
	padding-top: 1.75rem;
	border-top: 2px dashed var(--fma-ink-2);
}
.fma-nav a {
	font-size: 1.05rem;
	text-transform: uppercase;
	letter-spacing: 0.03em;
	padding: 0.45rem 1.2rem;
	border: 2px solid var(--fma-choc);
	border-radius: 999px;
	box-shadow: 0 4px 0 var(--fma-choc);
	background: var(--fma-frosting);
	transition: transform var(--fma-dur-1) var(--fma-ease), box-shadow var(--fma-dur-1) var(--fma-ease);
}
.fma-nav a:nth-child(5n+2) { background: #ffe9a8; }
.fma-nav a:nth-child(5n+3) { background: #b9ecdc; }
.fma-nav a:nth-child(5n+4) { background: #c3e9f8; }
.fma-nav a:nth-child(5n+5) { background: #e2d0f6; }
.fma-nav a:hover, .fma-nav a:focus-visible {
	transform: translateY(-3px);
	box-shadow: 0 7px 0 var(--fma-choc);
}

/* Mobile hamburger toggle — hidden on desktop */
.fma-nav-toggle {
	display: none;
	margin: 1.5rem auto 0;
	background: var(--fma-lemon);
	border: 2px solid var(--fma-choc);
	border-radius: 999px;
	box-shadow: 0 4px 0 var(--fma-choc);
	padding: 0.6rem 1.2rem;
	align-items: center;
	gap: 0.6rem;
	cursor: pointer;
	color: var(--fma-choc);
	font-family: 'FMA Mono', monospace;
	text-transform: uppercase;
	font-size: 0.9rem;
	letter-spacing: 0.05em;
}
@media (max-width: 767px) {
	.fma-nav-toggle { display: inline-flex; }
	/* Nav stays fully visible/functional with no JS — only collapses once JS confirms it can reopen it. */
	.js .fma-nav {
		display: none;
		flex-direction: column;
		align-items: center;
		gap: 1.25rem;
		width: 100%;
	}
	.js .fma-nav.is-open { display: flex; }
}

/* ===================================================================
   Hero — layer-cake card + frosted-donut badge
   =================================================================== */
.fma-hero {
	display: grid;
	gap: 3rem;
	margin-bottom: 5rem;
}
@media (min-width: 1024px) { .fma-hero { grid-template-columns: 1.1fr 0.9fr; align-items: start; } }

/* sponge-and-filling stripes + a bubblegum icing drip poured over the top edge */
.fma-hero__card {
	border: 3px solid var(--fma-choc);
	border-radius: 22px;
	padding: 3rem 2.25rem 2.5rem;
	position: relative;
	background-color: var(--fma-ink);
	background-image: repeating-linear-gradient(
		0deg,
		var(--fma-ink) 0 64px,
		#ffeef5 64px 70px
	);
}
.fma-hero__card::before {
	content: '';
	position: absolute;
	top: -1px; left: 18px; right: 18px;
	height: 24px;
	background: var(--fma-frosting);
	-webkit-mask-image: var(--fma-drip-mask);
	mask-image: var(--fma-drip-mask);
	-webkit-mask-repeat: repeat-x;
	mask-repeat: repeat-x;
	-webkit-mask-size: 140px 26px;
	mask-size: 140px 26px;
	pointer-events: none;
}
.fma-hero__eyebrow {
	position: absolute;
	top: -1.5rem; left: 1rem;
	background: var(--fma-ink);
	border: 2px solid var(--fma-choc);
	border-radius: 999px;
	box-shadow: 0 3px 0 var(--fma-choc);
	padding: 0.1rem 1rem;
	font-size: 1.4rem;
}
.fma-hero__title { font-size: clamp(2.2rem, 6vw, 4rem); margin-top: 0.5rem; color: var(--fma-choc); text-shadow: 3px 3px 0 var(--fma-frosting); }
.fma-hero__quote { color: var(--fma-butter); font-style: italic; font-size: 1.3rem; margin: 0.75rem 0; }
.fma-hero__desc { opacity: 0.9; margin-bottom: 1.75rem; }
.fma-hero__ctas { display: flex; flex-wrap: wrap; gap: 1rem; }

/* buttons = gumdrops */
.fma-btn {
	display: inline-block;
	border: 2.5px solid var(--fma-choc);
	border-radius: 999px;
	background: var(--fma-lemon);
	color: var(--fma-choc);
	padding: 0.7rem 1.75rem;
	text-transform: uppercase;
	font-size: 1.05rem;
	font-weight: 600;
	box-shadow: 0 5px 0 var(--fma-choc);
	transition: transform var(--fma-dur-1) var(--fma-ease), box-shadow var(--fma-dur-1) var(--fma-ease), background var(--fma-dur-1) var(--fma-ease);
}
.fma-btn:hover, .fma-btn:focus-visible {
	transform: translateY(3px);
	box-shadow: 0 2px 0 var(--fma-choc);
	background: #ffdd66;
}
/* gumdrop squish on press — buttons and nav pills squash like jelly */
.fma-btn:active, .fma-nav a:active, .fma-rail__chips a:active {
	transform: translateY(4px) scale(0.97, 0.9);
	box-shadow: 0 1px 0 var(--fma-choc);
}
.fma-btn--accent { background: var(--fma-butter); color: #fff; }
.fma-btn--accent:hover, .fma-btn--accent:focus-visible { background: #ff3377; }

/* hero visual: a real photo cropped into the organic cookie-blob shape with the
   bubblegum frosting rim, plus a small chip-cookie sticker overlapping its corner */
.fma-hero__visual {
	position: relative;
	width: min(100%, 460px);
	margin: 0 auto;
}
.fma-hero__photo {
	width: 100% !important;
	aspect-ratio: 1;
	height: auto;
	object-fit: cover;
	border-radius: 44% 56% 48% 52% / 50% 44% 56% 50%; /* organic cookie-blob crop */
	border: 8px solid var(--fma-frosting);
	outline: 3px solid var(--fma-choc);
	margin: 0 !important;
}
.fma-hero__sticker {
	position: absolute;
	bottom: -14px; right: -8px;
	width: 168px;
	padding: 1.1rem 0.9rem;
	text-align: center;
	transform: rotate(-6deg);
	border: 3px solid var(--fma-choc);
	border-radius: 48% 52% 44% 56% / 52% 46% 54% 48%;
	background-color: var(--fma-biscuit);
	background-image: var(--fma-chips);
	background-size: 64px 64px;
	box-shadow: 4px 5px 0 rgba(90, 50, 34, 0.25);
	transition: transform var(--fma-dur-2) var(--fma-ease), box-shadow var(--fma-dur-2) var(--fma-ease);
}
/* sticker peels a little when you hover the hero photo */
.fma-hero__visual:hover .fma-hero__sticker {
	transform: rotate(-11deg) translateY(-6px) scale(1.05);
	box-shadow: 7px 10px 0 rgba(90, 50, 34, 0.28);
}
.fma-hero__sticker h3 { color: var(--fma-choc); font-size: 1.05rem; margin-bottom: 0.2em; }
.fma-hero__sticker .fma-script {
	display: inline-block;
	font-size: 1.05rem;
	background: rgba(255, 253, 248, 0.82); border-radius: 10px; padding: 0.05em 0.4em;
}

/* ===================================================================
   Pillars — three full cupcakes: frosting cap + cherry above a
   pleated paper liner
   =================================================================== */
.fma-pillars {
	display: grid;
	gap: 2rem;
	margin-bottom: 5rem;
}
@media (min-width: 768px) { .fma-pillars { grid-template-columns: repeat(3, 1fr); } }

.fma-pillar {
	--pill: var(--fma-butter);   /* per-card candy accent */
	--pill-soft: #ffe4ee;        /* per-card liner pastel */
	border: 2.5px solid var(--fma-choc);
	border-radius: 12px 12px 36px 36px; /* small top corners (frosting cap sits above), rounded liner-cup bottom */
	padding: 1.5rem 1.25rem 1.75rem;
	text-align: center;
	display: flex; flex-direction: column; align-items: center;
	position: relative;
	margin-top: 52px; /* room for the frosting cap + cherry above the card */
	/* pleated cupcake-liner paper */
	background-color: var(--pill-soft);
	background-image: repeating-linear-gradient(
		90deg,
		rgba(255, 255, 255, 0.5) 0 10px,
		rgba(255, 255, 255, 0) 10px 22px
	);
	transition: transform var(--fma-dur-2) var(--fma-ease);
}
.fma-pillar:nth-child(2) { --pill: var(--fma-mint); --pill-soft: #dcf5ec; }
.fma-pillar:nth-child(3) { --pill: var(--fma-lemon); --pill-soft: #fdf2cd; }
.fma-pillar:hover { transform: translateY(-4px); }
.fma-pillar .fma-icon { width: 2.75rem; height: 2.75rem; color: var(--pill); margin-bottom: 0.75rem; }
.fma-pillar__img { width: 52px; height: 52px; margin: 0 auto 0.4rem; object-fit: contain; }
.fma-pillar h3 { font-size: 1.3rem; text-transform: uppercase; margin-bottom: 0; color: var(--fma-choc); }
.fma-pillar p { color: var(--fma-stone); margin-bottom: 0.75rem; font-size: 0.95rem; }
.fma-pillar > .fma-script { color: var(--fma-butter); font-size: 1.25rem; margin-top: auto; } /* CTA pinned to card bottom, same line on all three */

/* round cookie-badge wrapping the icon+title: auto-sized to short centered content
   (same proven-safe blob pattern as .fma-hero__badge) — a chocolate-chip cookie
   sitting in the middle of the frosting */
.fma-pillar__badge {
	border: 4px solid var(--fma-choc);
	border-radius: 48% 52% 44% 56% / 52% 46% 54% 48%;
	width: 170px; /* FIXED size: content-driven sizing made the three cookies
	                 unequal (171/140/135px), so descriptions started at different
	                 heights card-to-card */
	aspect-ratio: 1;
	display: flex; flex-direction: column; align-items: center; justify-content: center;
	text-align: center;
	padding: 0.6rem;
	margin: 0 auto 0.85rem;
	background-color: var(--fma-biscuit);
	background-image: var(--fma-chips);
	background-size: 64px 64px;
}

/* cupcake frosting cap: a fixed-height row of scalloped bumps poured in the card's
   own candy color (mask tile, like the drip edges) — tiled, so it never distorts
   or grows with card content length. */
.fma-pillar__cap {
	position: absolute;
	top: -22px; left: 6px; right: 6px;
	height: 26px;
	background: var(--pill);
	-webkit-mask-image: var(--fma-scallop-mask);
	mask-image: var(--fma-scallop-mask);
	-webkit-mask-repeat: repeat-x;
	mask-repeat: repeat-x;
	-webkit-mask-size: 40px 26px;
	mask-size: 40px 26px;
	-webkit-mask-position: center bottom;
	mask-position: center bottom;
	border-radius: 10px 10px 0 0;
	pointer-events: none;
}
/* …and the cherry on top */
.fma-pillar::after {
	content: '';
	position: absolute;
	top: -50px; left: 50%;
	width: 26px; height: 30px;
	margin-left: -13px;
	background-image: var(--fma-cherry);
	background-repeat: no-repeat;
	background-size: 26px 30px;
	pointer-events: none;
	transform-origin: 50% 90%;
}
/* cherry wobbles when you hover its cupcake */
@media (prefers-reduced-motion: no-preference) {
	.fma-pillar:hover::after, .fma-pillar:focus-visible::after {
		animation: fma-cherry-wobble 0.9s var(--fma-ease);
	}
}
@keyframes fma-cherry-wobble {
	0%   { transform: rotate(0); }
	25%  { transform: rotate(-9deg); }
	55%  { transform: rotate(7deg); }
	80%  { transform: rotate(-3deg); }
	100% { transform: rotate(0); }
}

/* signature moment: icing-outline fade-in on scroll-into-view. Previously this traced the
   border via stroke-dasharray/dashoffset sized from getTotalLength() — under the non-uniform
   viewBox-to-card stretch, that dash math kept coming out wrong (a fixed-length dash drawn
   along a differently-scaled path), producing long stray "drip" lines past the corners no
   matter how the length was recalculated. A plain opacity fade has no path-length dependency
   at all, so it can't reproduce that failure mode. Gated behind .js (see header.php) so
   no-JS visitors simply see the border immediately, never hidden. */
.fma-pillar__icing {
	position: absolute;
	top: -2px; left: -2px;
	/* explicit width/height, NOT inset-stretching: once JS assigns a viewBox,
	   an abs-positioned SVG sizes itself from the intrinsic RATIO and freezes
	   at whatever height the card had on first sync (drew a stray horizontal
	   stroke through the card body once fonts/content grew the card) */
	width: calc(100% + 4px);
	height: calc(100% + 4px);
	pointer-events: none;
	fill: none;
	stroke: var(--pill);
	stroke-width: 2;
	opacity: 1;
}
.js .fma-pillar__icing {
	opacity: 0;
	transition: opacity var(--fma-dur-3) var(--fma-ease);
}
.js .fma-pillar.is-visible .fma-pillar__icing { opacity: 1; }

/* ===================================================================
   Homepage intro prose (cornerstone body-copy floor) — with faded
   dessert watermarks behind the text corners
   =================================================================== */
.fma-homepage-intro { max-width: 100%; margin: 0 auto 5rem; position: relative; }
.fma-homepage-intro::before,
.fma-content-page::before {
	content: '';
	position: absolute;
	top: 1rem; right: -0.5rem;
	width: 260px; height: 300px;
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='96' height='110' viewBox='0 0 96 110'%3E%3Cpath d='M20 58 h56 l-9 44 h-38 z' fill='%23ff8fb1'/%3E%3Cpath d='M34 58 l-3 44 M48 58 v44 M62 58 l3 44' stroke='%23fff' stroke-width='3.5' opacity='.55' fill='none'/%3E%3Ccircle cx='28' cy='50' r='13' fill='%23ffd8e6'/%3E%3Ccircle cx='68' cy='50' r='13' fill='%23ffd8e6'/%3E%3Ccircle cx='48' cy='38' r='17' fill='%23ffd8e6'/%3E%3Ccircle cx='48' cy='16' r='7' fill='%23ff4054'/%3E%3Cpath d='M48 9 Q50 2 57 2' fill='none' stroke='%232e7d4f' stroke-width='2.5' stroke-linecap='round'/%3E%3C/svg%3E");
	background-repeat: no-repeat;
	background-size: contain;
	opacity: 0.12;
	pointer-events: none;
	z-index: -1;
}
.fma-homepage-intro::after {
	content: '';
	position: absolute;
	bottom: 0.5rem; left: -0.5rem;
	width: 220px; height: 220px;
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='96' height='96' viewBox='0 0 96 96'%3E%3Cg transform='translate(48 48)'%3E%3Ccircle r='40' fill='%23f6b45f'/%3E%3Cpath d='M-40 0 a40 40 0 0 1 80 0 c0 10 -10 15 -20 12 c-8 -2 -12 3 -20 3 c-8 0 -12 -5 -20 -3 c-10 3 -20 -2 -20 -12 z' fill='%23ff5c93'/%3E%3Ccircle r='14' fill='%23fffdf8'/%3E%3Crect x='-24' y='-28' width='10' height='4' rx='2' fill='%23fffdf8' transform='rotate(20 -19 -26)'/%3E%3Crect x='10' y='-30' width='10' height='4' rx='2' fill='%23ffd23f' transform='rotate(-16 15 -28)'/%3E%3Crect x='-6' y='-20' width='10' height='4' rx='2' fill='%232ec4a0' transform='rotate(8 -1 -18)'/%3E%3C/g%3E%3C/svg%3E");
	background-repeat: no-repeat;
	background-size: contain;
	opacity: 0.1;
	pointer-events: none;
	z-index: -1;
}
.fma-homepage-intro h2 { font-size: clamp(1.6rem, 4vw, 2.2rem); margin-top: 2rem; color: var(--fma-choc); }
.fma-homepage-intro h2::after {
	content: '';
	display: block;
	width: 150px; height: 12px;
	margin-top: 0.4rem;
	background-image: var(--fma-sprinkles);
	background-size: 72px 72px;
	background-position: center;
}
.fma-homepage-intro p { margin-bottom: 1.1rem; line-height: 1.75; }

/* ===================================================================
   Editor's picks — cookie cards with a bite taken out of the corner
   =================================================================== */
.fma-picks__heading { text-align: center; margin-bottom: 2.5rem; }
.fma-picks__heading h2 {
	display: inline-block;
	font-size: clamp(2rem, 5vw, 3rem);
	text-transform: uppercase;
	color: var(--fma-choc);
	text-shadow: 3px 3px 0 var(--fma-frosting);
}
/* sprinkle strip UNDER the heading, never crossing the letters */
.fma-picks__heading h2::after {
	content: '';
	display: block;
	height: 14px;
	margin-top: 0.4rem;
	background-image: var(--fma-sprinkles);
	background-size: 72px 72px;
	background-position: center;
}
.fma-picks {
	display: grid;
	/* minmax(0,…) everywhere: an auto/1fr track would take the card's
	   min-content width (driven by the 640px-intrinsic thumbnail) and blow
	   out past narrow viewports — classic grid blowout, showed at 320px */
	grid-template-columns: minmax(0, 1fr);
	gap: 2.5rem 2rem;
	margin-bottom: 5rem;
}
@media (min-width: 768px) { .fma-picks { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 1024px) { .fma-picks { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.fma-pick { min-width: 0; }

.fma-pick {
	background: var(--fma-ink);
	border: 2.5px solid var(--fma-choc);
	border-radius: 20px;
	padding: 1rem 1rem 1.1rem;
	/* one clean bite out of the top-right corner */
	-webkit-mask-image: radial-gradient(circle 30px at calc(100% - 12px) 8px, transparent 29px, #000 30px);
	mask-image: radial-gradient(circle 30px at calc(100% - 12px) 8px, transparent 29px, #000 30px);
	filter: drop-shadow(5px 6px 0 rgba(90, 50, 34, 0.18));
	transition: opacity var(--fma-dur-2) var(--fma-ease), transform var(--fma-dur-2) var(--fma-ease);
	transition-delay: calc(var(--i, 0) * var(--fma-stagger-step));
}
/* Reveal-hidden start state ONLY applies once JS has confirmed it can reveal again
   (html.js, set synchronously in <head>) — no-JS/crawlers always see full content. */
.js .fma-pick { opacity: 0; transform: translateY(14px); }
.js .fma-pick.is-visible { opacity: 1; transform: none; }
.fma-pick__row { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: baseline; gap: 0.35rem 0.75rem; margin-bottom: 0.35rem; }
.fma-pick h4 { font-size: 1.5rem; text-transform: uppercase; margin: 0; color: var(--fma-choc); }
.fma-pick__stat {
	background: var(--fma-lemon);
	color: var(--fma-choc);
	border: 1.5px solid var(--fma-choc);
	border-radius: 999px;
	padding: 0.1rem 0.6rem;
	font-size: 0.85rem;
	white-space: nowrap;
}
.fma-pick__meta { color: var(--fma-stone); font-size: 0.8rem; text-transform: uppercase; letter-spacing: 0.08em; margin: 0; }
.fma-pick img { margin-bottom: 0.75rem; border: 2px solid var(--fma-choc); border-radius: 12px; }

/* ===================================================================
   Press strip — a chocolate bar: each mention sits in its own square
   =================================================================== */
.fma-press {
	display: flex; flex-wrap: wrap; justify-content: center; align-items: center;
	gap: 1rem 1.25rem; padding: 1.75rem 1.5rem; margin-bottom: 5rem;
	background: var(--fma-choc);
	border-radius: 18px;
	color: #ffe9d2;
}
.fma-press span {
	font-size: 1.15rem;
	padding: 0.5rem 1.1rem;
	border: 1.5px solid rgba(255, 233, 210, 0.35);
	border-radius: 10px;
	background: rgba(255, 253, 248, 0.06);
}
.fma-press .fma-script { color: var(--fma-frosting); }

/* ===================================================================
   Footer — chocolate slab with the vanilla page dripping into it
   =================================================================== */
.fma-footer {
	position: relative;
	margin-top: 3rem;
	padding: 3.25rem 1.5rem 2.25rem;
	background: var(--fma-choc);
	border-radius: 20px;
	text-align: center;
	color: #ffe9d2;
}
.fma-footer::before {
	content: '';
	position: absolute;
	top: -1px; left: 14px; right: 14px;
	height: 24px;
	background: var(--fma-ink);
	-webkit-mask-image: var(--fma-drip-mask);
	mask-image: var(--fma-drip-mask);
	-webkit-mask-repeat: repeat-x;
	mask-repeat: repeat-x;
	-webkit-mask-size: 140px 26px;
	mask-size: 140px 26px;
	pointer-events: none;
}
.fma-footer__legal {
	margin-bottom: 0.9rem;
	font-size: 0.85rem;
	color: #ffe9d2;
	display: flex; justify-content: center; align-items: center; gap: 0.7rem;
}
/* inline-block + generous padding = comfortable ≥44px tap target on touch */
.fma-footer__legal a {
	display: inline-block;
	border-bottom: 1.5px dashed rgba(255, 233, 210, 0.5);
	padding: 0.7rem 0.4rem;
}
.fma-footer__legal a:hover, .fma-footer__legal a:focus-visible { color: var(--fma-frosting); border-bottom-color: var(--fma-frosting); }
.fma-footer__fine { color: #e8c8ae; text-transform: uppercase; letter-spacing: 0.08em; font-size: 0.75rem; }

/* ===================================================================
   Recipe single-post — the recipe card is a layer cake: iced top,
   sponge stripes, cookie-shaped stat medallions
   =================================================================== */
.fma-recipe-card {
	border: 3px solid var(--fma-choc);
	border-radius: 24px;
	padding: 3rem 1.5rem 1.75rem;
	margin: 2.5rem 0;
	position: relative;
	background-color: var(--fma-ink);
	background-image: repeating-linear-gradient(
		0deg,
		var(--fma-ink) 0 72px,
		#fff0f6 72px 78px
	);
}
.fma-recipe-card::before {
	content: '';
	position: absolute;
	top: -1px; left: 16px; right: 16px;
	height: 24px;
	background: var(--fma-frosting);
	-webkit-mask-image: var(--fma-drip-mask);
	mask-image: var(--fma-drip-mask);
	-webkit-mask-repeat: repeat-x;
	mask-repeat: repeat-x;
	-webkit-mask-size: 140px 26px;
	mask-size: 140px 26px;
	pointer-events: none;
}
.fma-recipe-card > h2 { color: var(--fma-choc); text-shadow: 2px 2px 0 var(--fma-frosting); }

/* stat tiles = chocolate-chip cookies */
.fma-recipe-stats {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(110px, 1fr));
	gap: 1rem;
	margin-bottom: 1.75rem;
	text-align: center;
}
.fma-recipe-stats div {
	aspect-ratio: 1;
	border-radius: 50%;
	border: 3px solid var(--fma-choc);
	background-color: var(--fma-biscuit);
	background-image: var(--fma-chips);
	background-size: 64px 64px;
	display: flex; flex-direction: column; align-items: center; justify-content: center;
	padding: 0.5rem;
	box-shadow: 0 4px 0 rgba(90, 50, 34, 0.35);
}
/* vanilla plaques so the numbers stay legible over the chip specks */
.fma-recipe-stats strong {
	display: block; color: var(--fma-choc); font-size: 1.25rem; font-weight: 700;
	background: rgba(255, 253, 248, 0.82); border-radius: 8px; padding: 0 0.4rem;
}
.fma-recipe-stats span {
	font-size: 0.7rem; text-transform: uppercase; color: var(--fma-stone); letter-spacing: 0.06em;
	background: rgba(255, 253, 248, 0.82); border-radius: 6px; padding: 0 0.3rem; margin-top: 2px;
}

.fma-recipe-note {
	font-family: 'FMA Mono', 'Courier New', monospace;
	font-size: 0.78rem;
	color: var(--fma-stone);
	margin: -0.9rem 0 1.5rem;
}
.fma-recipe-ingredients, .fma-recipe-instructions { margin-bottom: 1.5rem; }
.fma-recipe-ingredients h3, .fma-recipe-instructions h3 { color: var(--fma-choc); }
.fma-recipe-ingredients ul { list-style: none; padding: 0; }
.fma-recipe-ingredients li {
	padding: 0.45rem 0 0.45rem 1.5rem;
	border-bottom: 1.5px dashed var(--fma-ink-2);
	position: relative;
}
/* candy-dot bullets rotating through the jar */
.fma-recipe-ingredients li::before {
	content: '';
	position: absolute;
	left: 0.15rem; top: 0.95rem;
	width: 11px; height: 11px;
	border-radius: 50%;
	background: var(--fma-butter);
	border: 1.5px solid var(--fma-choc);
}
.fma-recipe-ingredients li:nth-child(3n+2)::before { background: var(--fma-mint); }
.fma-recipe-ingredients li:nth-child(3n+3)::before { background: var(--fma-lemon); }

/* numbered steps get piped-frosting number blobs */
.fma-recipe-instructions ol {
	list-style: none;
	counter-reset: fma-step;
	padding: 0;
}
.fma-recipe-instructions li {
	counter-increment: fma-step;
	position: relative;
	padding-left: 3.2rem;
	margin-bottom: 1rem;
	min-height: 2.4rem;
}
.fma-recipe-instructions li::before {
	content: counter(fma-step);
	position: absolute;
	left: 0; top: 0;
	width: 2.3rem; height: 2.3rem;
	border-radius: 50% 50% 50% 12%;
	background: var(--fma-butter);
	color: #fff;
	border: 2px solid var(--fma-choc);
	display: flex; align-items: center; justify-content: center;
	font-weight: 700;
	font-size: 1rem;
}

/* ===================================================================
   Healthified Swap widget — mint candy-wrapper panel
   =================================================================== */
.fma-swap {
	border: 3px solid var(--fma-choc);
	border-radius: 18px;
	background: #e3f8f0;
	padding: 2.25rem 1.5rem 1.5rem;
	margin: 2.5rem 0;
	position: relative;
}
.fma-swap::before {
	content: '';
	position: absolute;
	top: -1px; left: 14px; right: 14px;
	height: 20px;
	background: var(--fma-mint);
	-webkit-mask-image: var(--fma-scallop-mask);
	mask-image: var(--fma-scallop-mask);
	-webkit-mask-repeat: repeat-x;
	mask-repeat: repeat-x;
	-webkit-mask-size: 32px 20px;
	mask-size: 32px 20px;
	pointer-events: none;
}
.fma-swap__title { font-size: 1.4rem; text-transform: uppercase; margin-bottom: 1rem; color: var(--fma-choc); }
.fma-swap__grid { display: grid; grid-template-columns: 1fr auto 1fr; gap: 1rem; align-items: center; }
@media (max-width: 560px) { .fma-swap__grid { grid-template-columns: 1fr; } }
.fma-swap__col h4 { font-size: 1rem; text-transform: uppercase; color: var(--fma-stone); margin-bottom: 0.5rem; }
.fma-swap__col ul { list-style: none; padding: 0; margin: 0; }
.fma-swap__col li { padding: 0.2rem 0; }
.fma-swap__arrow { font-size: 1.8rem; color: var(--fma-butter); text-align: center; font-weight: 700; }
.fma-swap__deltas { margin-top: 1rem; display: flex; gap: 1rem; flex-wrap: wrap; }
.fma-swap__delta {
	border: 2px solid var(--fma-choc);
	border-radius: 999px;
	background: var(--fma-ink);
	padding: 0.35rem 0.9rem;
	font-size: 0.85rem;
}
.fma-swap__delta strong { color: var(--fma-butter); }

/* ===================================================================
   Author box — the baker's card at the end of every recipe (EEAT)
   =================================================================== */
.fma-authorbox {
	display: flex;
	gap: 1.25rem;
	align-items: center;
	margin: 2.5rem 0 1rem;
	padding: 1.4rem 1.5rem;
	border: 2.5px solid var(--fma-choc);
	border-radius: 20px;
	background: #fff4f8;
	box-shadow: 5px 6px 0 rgba(90, 50, 34, 0.15);
}
/* full selector `.fma-content-page img.fma-authorbox__img` needed: the generic
   `.fma-content-page img { width:100% !important }` rule otherwise WINS on
   specificity and stretches the portrait into a flat strip */
.fma-authorbox__img,
.fma-content-page img.fma-authorbox__img {
	width: 96px !important;
	height: 96px !important;
	max-width: 96px !important;
	border-radius: 50%;
	object-fit: cover;
	border: 3px solid var(--fma-frosting);
	outline: 2px solid var(--fma-choc);
	margin: 0 !important;
	flex: none;
}
.fma-authorbox__label {
	font-family: 'FMA Mono', 'Courier New', monospace;
	font-size: 0.7rem;
	text-transform: uppercase;
	letter-spacing: 0.1em;
	color: var(--fma-stone);
	margin: 0;
}
.fma-authorbox__name {
	font-family: 'FMA Display', 'Arial Narrow', sans-serif;
	font-size: 1.35rem;
	margin: 0.1rem 0 0.3rem;
	transform: skewX(-8deg);
	transform-origin: left center;
}
.fma-authorbox__name a { color: var(--fma-choc); }
.fma-authorbox__name a:hover, .fma-authorbox__name a:focus-visible { color: var(--fma-butter); }
.fma-authorbox__bio { font-size: 0.92rem; line-height: 1.6; margin: 0; color: var(--fma-cream); }
@media (max-width: 560px) {
	.fma-authorbox { flex-direction: column; text-align: center; }
	.fma-authorbox__name { transform-origin: center center; }
}

/* ===================================================================
   FAQ accordion — a stack of macarons: pastel shells, filling stripe
   =================================================================== */
.fma-faq { margin: 3rem 0; }
.fma-faq h2 { color: var(--fma-choc); }
.fma-faq__item {
	--shell: #ffe4ee; /* per-item macaron shell */
	border: 2.5px solid var(--fma-choc);
	border-radius: 24px;
	background: var(--shell);
	padding: 0.9rem 1.4rem;
	margin-bottom: 1rem;
	box-shadow: 0 4px 0 rgba(90, 50, 34, 0.3);
}
.fma-faq__item:nth-of-type(4n+2) { --shell: #fdf2cd; }
.fma-faq__item:nth-of-type(4n+3) { --shell: #dcf5ec; }
.fma-faq__item:nth-of-type(4n+0) { --shell: #e9dcf8; }
.fma-faq__q { display: inline; font-size: 1.12rem; text-transform: none; letter-spacing: normal; font-family: 'FMA Body', 'Comic Sans MS', sans-serif; font-weight: 600; transform: none; cursor: pointer; color: var(--fma-choc); }
.fma-faq__item summary { cursor: pointer; list-style: none; }
.fma-faq__item summary::-webkit-details-marker { display: none; }
.fma-faq__item summary::before { content: '+ '; color: var(--fma-butter); font-weight: 700; font-size: 1.2rem; }
.fma-faq__item[open] summary::before { content: '\2212 '; }
/* the filling: a strawberry-cream layer between the two shells */
.fma-faq__a {
	margin-top: 0.85rem;
	padding-top: 0.85rem;
	border-top: 5px dotted var(--fma-butter);
	color: var(--fma-cream);
}

/* ===================================================================
   Icons
   =================================================================== */
.fma-icon { width: 1.5rem; height: 1.5rem; display: inline-block; }

/* ===================================================================
   3D bakery diorama — five zones, one physics family.
   All transforms/composited, no libraries. Scroll-linked pieces stay
   under reduced-motion (they mirror the user's own action); autonomous
   spins freeze.
   =================================================================== */

/* zone 0 — near sprinkle layer: scroll-parallax depth over the far drift */
.fma-page::after {
	content: '';
	position: fixed;
	top: -220px; left: 0;
	width: 100vw;
	height: calc(100vh + 440px);
	background-image: var(--fma-sprinkles);
	background-size: 210px 210px;
	opacity: 0.3;
	transform: translate3d(0, var(--fma-parallax, 0px), 0);
	pointer-events: none;
	z-index: 0;
}

/* zone header — logo leans toward the cursor (JS sets the transform);
   touch devices get a slow idle sway instead */
.fma-logo-mark img { will-change: transform; }
@media (hover: none) and (prefers-reduced-motion: no-preference) {
	.fma-logo-mark img { animation: fma-logo-sway 7s ease-in-out infinite alternate; }
}
@keyframes fma-logo-sway {
	from { transform: perspective(500px) rotateY(-7deg); }
	to   { transform: perspective(500px) rotateY(7deg); }
}

/* zone scroll — chocolate-chip cookie coin rolling along the bottom edge */
.fma-cookie3d {
	position: fixed;
	bottom: 10px; left: 0;
	width: 72px; height: 72px;
	z-index: 40;
	pointer-events: none;
	transform: translate3d(var(--fma-roll-x, 8px), 0, 0);
	perspective: 500px;
}
.fma-cookie3d__coin {
	position: absolute; inset: 0;
	transform-style: preserve-3d;
	transform: rotateY(26deg); /* fixed yaw so the coin's thickness reads as 3D */
}
.fma-cookie3d__rotor {
	position: absolute; inset: 0;
	transform-style: preserve-3d;
	transform: rotateZ(var(--fma-roll, 0deg)); /* the rolling itself */
}
.fma-cookie3d__face {
	position: absolute; inset: 0;
	border-radius: 50%;
	background-color: var(--fma-biscuit);
	background-image: var(--fma-chips);
	background-size: 34px 34px;
	border: 2.5px solid var(--fma-choc);
	backface-visibility: hidden;
}
.fma-cookie3d__face--front { transform: translateZ(5px); }
.fma-cookie3d__face--front::after {
	/* one oversized chip off-center so the rolling rotation is visible */
	content: '';
	position: absolute;
	top: 12px; left: 40px;
	width: 11px; height: 11px;
	border-radius: 50%;
	background: var(--fma-choc);
}
.fma-cookie3d__face--back { transform: rotateY(180deg) translateZ(5px); }
.fma-cookie3d__mid {
	position: absolute; inset: 1px;
	border-radius: 50%;
	background: #c9973f; /* baked edge */
}
.fma-cookie3d__mid:nth-child(3) { transform: translateZ(-2px); }
.fma-cookie3d__mid:nth-child(4) { transform: translateZ(0); }
.fma-cookie3d__mid:nth-child(5) { transform: translateZ(2px); }
@media (max-width: 560px) {
	.fma-cookie3d { width: 48px; height: 48px; bottom: 8px; }
	.fma-cookie3d__face { background-size: 26px 26px; }
	.fma-cookie3d__face--front::after { top: 8px; left: 27px; width: 8px; height: 8px; }
}

/* zone gutter — three-tier cake turning on a bakery turntable (wide screens).
   The "rotation" is the tier surface pattern sliding around a shaded cylinder —
   reads as a turntable without a 40-div true cylinder. */
.fma-cake3d { display: none; }
@media screen and (min-width: 1720px) {
	.fma-cake3d {
		display: block;
		position: fixed;
		bottom: 34px;
		left: calc((50vw - 660px - 180px) / 2);
		width: 180px; height: 200px;
		z-index: 4;
		pointer-events: none;
	}
	.fma-cake3d__tier {
		position: absolute;
		left: 50%;
		transform: translateX(-50%);
		border: 2px solid var(--fma-choc);
		border-radius: 8px 8px 12px 12px;
		/* cylindrical side shading */
		box-shadow: inset 14px 0 18px -10px rgba(90, 50, 34, 0.35), inset -14px 0 18px -10px rgba(90, 50, 34, 0.35);
	}
	/* frosting cap on each tier */
	.fma-cake3d__tier::before {
		content: '';
		position: absolute;
		top: -9px; left: -2px; right: -2px;
		height: 18px;
		border-radius: 50%;
		background: #fffdf8;
		border: 2px solid var(--fma-choc);
	}
	.fma-cake3d__tier--bottom {
		bottom: 16px;
		width: 148px; height: 58px;
		background: repeating-linear-gradient(90deg, var(--fma-frosting) 0 18px, #ff9dbe 18px 36px);
	}
	.fma-cake3d__tier--middle {
		bottom: 72px;
		width: 110px; height: 50px;
		background: repeating-linear-gradient(90deg, #b9ecdc 0 18px, #8eddc4 18px 36px);
	}
	.fma-cake3d__tier--top {
		bottom: 120px;
		width: 74px; height: 42px;
		background: repeating-linear-gradient(90deg, #ffe9a8 0 18px, #ffd96e 18px 36px);
	}
	/* the turntable spin: pattern slides a full multiple of its 36px repeat */
	@media (prefers-reduced-motion: no-preference) {
		.fma-cake3d__tier { animation: fma-cake-turn 22s linear infinite; }
	}
	.fma-cake3d__tier--bottom { --turn: -288px; }
	.fma-cake3d__tier--middle { --turn: -216px; }
	.fma-cake3d__tier--top    { --turn: -144px; }
	.fma-cake3d__plate {
		position: absolute;
		bottom: 0; left: 50%;
		transform: translateX(-50%);
		width: 180px; height: 26px;
		border-radius: 50%;
		background: linear-gradient(#ffffff, #e9d8c4);
		border: 2px solid var(--fma-choc);
	}
	.fma-cake3d::after {
		/* cherry on top */
		content: '';
		position: absolute;
		top: 8px; left: 50%;
		width: 26px; height: 30px;
		margin-left: -13px;
		background-image: var(--fma-cherry);
		background-size: 26px 30px;
		background-repeat: no-repeat;
	}
}
@keyframes fma-cake-turn {
	to { background-position-x: var(--turn, -288px); }
}

/* ===================================================================
   Motion extras — icing scroll-progress bar (element injected by JS)
   + sprinkle-pop particles on FAQ open
   =================================================================== */
.fma-progress {
	position: fixed;
	top: 0; left: 0;
	width: 100%;
	height: 13px;
	z-index: 60;
	pointer-events: none;
	background: var(--fma-butter);
	-webkit-mask-image: var(--fma-drip-mask);
	mask-image: var(--fma-drip-mask);
	-webkit-mask-repeat: repeat-x;
	mask-repeat: repeat-x;
	-webkit-mask-size: 70px 13px;
	mask-size: 70px 13px;
	transform: scaleX(0);
	transform-origin: left center;
}

.fma-pop {
	position: absolute;
	width: 9px; height: 3px;
	border-radius: 2px;
	pointer-events: none;
	animation: fma-pop 0.6s ease-out forwards;
}
@keyframes fma-pop {
	from { transform: translate(0, 0) rotate(0); opacity: 1; }
	to   { transform: translate(var(--dx, 20px), var(--dy, -24px)) rotate(var(--dr, 120deg)); opacity: 0; }
}

/* ===================================================================
   Reveals — reduced-motion-safe, no-JS-safe (JS only ADDS classes)
   =================================================================== */
@media (prefers-reduced-motion: reduce) {
	.fma-pick { opacity: 1 !important; transform: none !important; transition: none !important; filter: drop-shadow(5px 6px 0 rgba(90, 50, 34, 0.18)); }
	.fma-pillar, .fma-pillar__icing { transition: none !important; }
	.fma-pillar:hover { transform: none; }
	.fma-pillar__icing { opacity: 1 !important; }
	.fma-nav a, .fma-btn { transition: none !important; }
	.fma-nav a:hover, .fma-btn:hover { transform: none; }
	/* motion extras off: no drift, no squish/peel/pop (progress bar stays —
	   it only mirrors the user's own scrolling, no autonomous movement) */
	.fma-page::before { animation: none !important; }
	.fma-btn:active, .fma-nav a:active, .fma-rail__chips a:active { transform: none; }
	.fma-hero__sticker { transition: none !important; }
	.fma-hero__visual:hover .fma-hero__sticker { transform: rotate(-6deg); }
	.fma-pop { animation: none !important; opacity: 0; }
}

/* Content pages (single/page) — wide shell, readable-width prose inside it */
.fma-content-page { max-width: 100%; margin: 0 auto; padding: 2rem 1rem 3rem; position: relative; }
@media (min-width: 768px) { .fma-content-page { padding: 3rem 2rem 4rem; } }
.fma-content-page h1 { font-size: clamp(2rem, 6vw, 3rem); margin-bottom: 1rem; color: var(--fma-choc); text-shadow: 3px 3px 0 var(--fma-frosting); }
.fma-content-page h2, .fma-content-page h3 { color: var(--fma-choc); }
.fma-byline { color: var(--fma-stone); font-size: 0.9rem; margin-bottom: 2rem; }

/* icing-drizzle underline for in-content links (nav switched to gumdrops) */
.fma-content-page p a, .fma-content-page li a, .fma-homepage-intro a, .fma-cat-desc a {
	overflow-wrap: anywhere; /* long unbreakable strings (email addresses) must wrap on narrow screens */
	color: var(--fma-butter);
	position: relative;
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 40 8' preserveAspectRatio='none'%3E%3Cpath d='M0 4 Q5 0 10 4 T20 4 T30 4 T40 4' fill='none' stroke='%23ff4f87' stroke-width='2'/%3E%3C/svg%3E");
	background-repeat: repeat-x;
	background-size: 20px 6px;
	background-position: left bottom;
	padding-bottom: 4px;
}

/* Body copy readability: these inherit the body base font-size (bumped to 18px above) —
   widen the line-height here so long-form prose doesn't feel cramped. */
.fma-content-page > p, .fma-content-page li,
.fma-recipe-ingredients li, .fma-recipe-instructions li,
.fma-swap__col li, .fma-faq__a {
	line-height: 1.75;
}

/* Reading measure. The page shell is deliberately wide (images, recipe cards and the
   decorative rows want the room), so the cap goes on the prose itself, not the shell:
   uncapped, body text ran ~121 characters per line at 1440px, well past the 60-80 the
   eye can track back to the next line. `ch` not px, so the measure follows the font
   size instead of drifting when the base size changes. Direct children only —
   nesting it deeper would squeeze tables, pros/cons columns and recipe cards too.
   All THREE prose containers need it, not just the article body: the category hubs
   render their copy inside .fma-cat-desc and the homepage inside .fma-homepage-intro,
   so a rule scoped to .fma-content-page's own children would silently miss both. */
.fma-content-page > p,
.fma-content-page > h2,
.fma-content-page > h3,
.fma-content-page > h4,
.fma-content-page > ul,
.fma-content-page > ol,
.fma-content-page > blockquote,
.fma-cat-desc > p,
.fma-cat-desc > h2,
.fma-cat-desc > h3,
.fma-cat-desc > ul,
.fma-cat-desc > ol,
.fma-homepage-intro > p,
.fma-homepage-intro > h2,
.fma-homepage-intro > h3,
.fma-homepage-intro > ul,
.fma-homepage-intro > ol {
	max-width: 68ch;
	margin-inline: auto;
}

/* Content-body images: contained + centered rather than stretched edge-to-edge across
   the full-width page shell — a photo reads as a photo, not a banner. !important because
   the bulk-imported inline "margin:1.5rem 0" on many post images otherwise wins over this
   (inline style specificity), pinning them flush-left instead of centered. */
.fma-content-page img {
	max-width: 900px !important;
	width: 100% !important;
	margin: 2rem auto !important;
	border-radius: 16px;
}

/* Images are wrapped in <picture> to name the AVIF/WebP sources explicitly (see
   inc/picture.php). <picture> is an INLINE box by default, and `margin: … auto`
   on the inner img cannot centre inside an inline parent — so without this the
   AVIF work would silently un-centre every content image. Block-level here, and
   the img keeps doing the sizing exactly as before. */
.fma-content-page picture,
.fma-pick picture,
.fma-cat-grid picture { display: block; }
.fma-content-page figure { text-align: center; }

/* anchored H2s shouldn't hide under the viewport edge after a jump */
h2[id] { scroll-margin-top: 24px; }

/* About-page portrait: a modest centered circle — full selector needed to beat
   the generic .fma-content-page img { width:100% !important } rule */
.fma-content-page img.fma-about-portrait {
	width: 260px !important;
	max-width: 260px !important;
	height: 260px;
	object-fit: cover;
	border-radius: 50%;
	border: 4px solid var(--fma-frosting);
	outline: 3px solid var(--fma-choc);
	margin: 0.5rem auto 2rem !important;
}

/* ===================================================================
   Wide-screen side rails — functional gutter fill on big monitors.
   Left: "On this page" order-ticket. Right: favorites + category chips.
   Hidden entirely below the breakpoint (the gutters barely exist there).
   Width shrinks with the gutter so the rails always hug the frame:
   frame is min(1320px, 96vw) centered → half-frame = 660px.
   =================================================================== */
.fma-rail { display: none; }

@media screen and (min-width: 1720px) {
	.fma-rail {
		/* grow with the gutter (up to 340px) and sit CENTERED in it —
		   gutter width = 50vw - 660px (frame half-width), so the centering
		   inset is half of what the rail doesn't occupy */
		--rail-w: min(340px, calc(50vw - 700px));
		display: block;
		position: fixed;
		top: 50%;
		transform: translateY(-50%);
		width: var(--rail-w);
		max-height: 86vh;
		overflow-y: auto;
		background: var(--fma-ink);
		border: 2.5px solid var(--fma-choc);
		border-radius: 16px;
		padding: 2.2rem 1.4rem 1.4rem;
		box-shadow: 5px 6px 0 rgba(90, 50, 34, 0.18);
		z-index: 5;
	}
	.fma-rail--left  { left:  calc((50vw - 660px - var(--rail-w)) / 2); }
	.fma-rail--right { right: calc((50vw - 660px - var(--rail-w)) / 2); }

	/* ticket header: strawberry scallops on the left rail, mint drip on the right */
	.fma-rail::before {
		content: '';
		position: absolute;
		top: -1px; left: 10px; right: 10px;
		height: 18px;
		background: var(--fma-butter);
		-webkit-mask-image: var(--fma-scallop-mask);
		mask-image: var(--fma-scallop-mask);
		-webkit-mask-repeat: repeat-x;
		mask-repeat: repeat-x;
		-webkit-mask-size: 28px 18px;
		mask-size: 28px 18px;
		pointer-events: none;
	}
	.fma-rail--right::before {
		background: var(--fma-mint);
		-webkit-mask-image: var(--fma-drip-mask);
		mask-image: var(--fma-drip-mask);
		-webkit-mask-size: 108px 20px;
		mask-size: 108px 20px;
		height: 20px;
	}

	.fma-rail__title {
		font-family: 'FMA Display', 'Arial Narrow', sans-serif;
		transform: skewX(-8deg);
		transform-origin: left center;
		text-transform: uppercase;
		letter-spacing: 0.06em;
		font-size: 1.3rem;
		color: var(--fma-choc);
		margin: 0 0 0.75rem;
	}
	.fma-rail__title--sub { margin-top: 1.4rem; }

	.fma-rail__toc { display: flex; flex-direction: column; }
	.fma-rail__toc a {
		font-size: 0.92rem;
		line-height: 1.5;
		padding: 0.55rem 0 0.55rem 1.3rem;
		border-bottom: 1.5px dashed var(--fma-ink-2);
		position: relative;
		color: var(--fma-cream);
		transition: color var(--fma-dur-1) var(--fma-ease);
	}
	.fma-rail__toc a:last-child { border-bottom: none; }
	/* candy-dot bullets, rotating through the jar */
	.fma-rail__toc a::before {
		content: '';
		position: absolute;
		left: 0; top: 0.95em;
		width: 11px; height: 11px;
		border-radius: 50%;
		background: var(--fma-butter);
		border: 1.5px solid var(--fma-choc);
	}
	.fma-rail__toc a:nth-child(3n+2)::before { background: var(--fma-mint); }
	.fma-rail__toc a:nth-child(3n+3)::before { background: var(--fma-lemon); }
	.fma-rail__toc a:hover, .fma-rail__toc a:focus-visible { color: var(--fma-butter); }

	/* homepage left rail: a transparent stack of two individually-styled cards */
	.fma-rail--stack {
		background: none;
		border: none;
		box-shadow: none;
		padding: 0;
		overflow: visible;
	}
	.fma-rail--stack::before { display: none; }
	.fma-railcard {
		background: var(--fma-ink);
		border: 2.5px solid var(--fma-choc);
		border-radius: 16px;
		padding: 2rem 1.2rem 1.3rem;
		box-shadow: 5px 6px 0 rgba(90, 50, 34, 0.18);
		position: relative;
	}
	.fma-railcard + .fma-railcard { margin-top: 1.6rem; }

	/* Baker's Note: tilted lined-paper letter held up by a tape strip */
	.fma-note {
		transform: rotate(-1.5deg);
		background-image: repeating-linear-gradient(
			0deg,
			transparent 0 27px,
			#f8d3e2 27px 29px
		);
	}
	.fma-note::before {
		content: '';
		position: absolute;
		top: -12px; left: 50%;
		width: 96px; height: 26px;
		margin-left: -48px;
		background: rgba(255, 185, 210, 0.62);
		border-left: 1px dashed rgba(90, 50, 34, 0.25);
		border-right: 1px dashed rgba(90, 50, 34, 0.25);
		transform: rotate(-3deg);
		border-radius: 3px;
	}
	.fma-note__body { font-size: 0.98rem; line-height: 1.65; margin: 0; }
	.fma-note__sig { font-size: 1.7rem; margin: 0.5rem 0 0; text-align: right; }

	/* mini gumdrop chips for the category shortcuts */
	.fma-rail__chips { display: flex; flex-wrap: wrap; gap: 0.6rem; }
	.fma-rail__chips a {
		font-size: 0.82rem;
		text-transform: uppercase;
		letter-spacing: 0.04em;
		padding: 0.38rem 0.9rem;
		border: 2px solid var(--fma-choc);
		border-radius: 999px;
		box-shadow: 0 3px 0 var(--fma-choc);
		background: var(--fma-frosting);
		color: var(--fma-choc);
		transition: transform var(--fma-dur-1) var(--fma-ease), box-shadow var(--fma-dur-1) var(--fma-ease);
	}
	.fma-rail__chips a:nth-child(2) { background: #ffe9a8; }
	.fma-rail__chips a:nth-child(3) { background: #b9ecdc; }
	.fma-rail__chips a:hover, .fma-rail__chips a:focus-visible {
		transform: translateY(-2px);
		box-shadow: 0 5px 0 var(--fma-choc);
	}
}
@media (prefers-reduced-motion: reduce) {
	.fma-rail__chips a { transition: none !important; }
	.fma-rail__chips a:hover { transform: none; }
}
@media print {
	.fma-rail { display: none !important; }
}
/* category-archive hero banner (latest post's featured image) */
.fma-cat-hero {
	max-height: 380px;
	object-fit: cover;
	border: 3px solid var(--fma-choc);
}

.fma-cat-badge {
	display: inline-block;
	background: var(--fma-lemon);
	border: 2px solid var(--fma-choc);
	border-radius: 999px;
	box-shadow: 0 3px 0 var(--fma-choc);
	color: var(--fma-choc);
	padding: 0.25rem 0.9rem;
	font-size: 0.75rem;
	text-transform: uppercase;
	letter-spacing: 0.06em;
	margin-bottom: 1rem;
}