/*
 * The recipe page in the new design, light theme (recipes/templates/recipe_v4/), after the app's
 * tablet screen and the web app. Mobile first. Everything hangs off .rp and the v4 classes, so the
 * partials the page still shares (the ads, nutrition, comments) only change where this says so.
 *
 * Two things this file has to work around:
 *  - recipe_styles.css stays loaded (the nutrition tables, /print) and styles hooks the new markup
 *    keeps (.ingredientlist, .ingredient-container, .direction, .input-number, .subs-btn ...).
 *    Those rules are reset under .rp below.
 *  - recipe_detail_script.js marks a checked ingredient or step with inline styles (grey,
 *    line-through, then black again). The states here go by the state attribute instead, with
 *    !important to beat the inline styles.
 * Ads: nothing that holds an ad sets overflow or transform, so the sticky vrec ads keep working.
 */

/* ---------- Tokens ---------- */

.rp {
	--rp-paper: #F9FBF8;
	--rp-surface: #EDEEEA;
	--rp-surface-2: #E3E6DF;
	--rp-ink: #1A2518;
	--rp-text: #454E43;
	--rp-muted: #5F6B5B;
	--rp-line: rgba(26, 37, 24, .12);
	--rp-green: #516940;          /* the site's greens after the lime move */
	--rp-green-dark: #3E5530;
	--rp-lime: #BEE378;
	--rp-mustard: #c99738;        /* "contains" and premium, as in the apps */
	--rp-mustard-ink: #6B4F12;
	--rp-star: #ff912c;
	--rp-display: 'Cotoris Bold', 'Hind Vadodara', sans-serif;
	--rp-sans: 'Hind Vadodara', sans-serif;
	--rp-max: 76rem;
	--rp-gutter: clamp(1rem, 4vw, 2.5rem);
	--rp-ease: cubic-bezier(.2, .8, .2, 1);
	--rp-nav: 0px;                /* how much the navbar covers (recipe_page.js) */
	--rp-check: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M3.6 8.4l2.9 2.9 5.9-6.6' fill='none' stroke='white' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
	--rp-check-ink: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M3.6 8.4l2.9 2.9 5.9-6.6' fill='none' stroke='%231A2518' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");

	background: var(--rp-paper);
	color: var(--rp-ink);
	font-family: var(--rp-sans);
	text-align: left;
	/* No overflow here: it would stop the jump bar, the ingredients and the vrec ads sticking */
}

/* The page under the translucent navbar matches the first band (the body is white elsewhere) */
body:has(> .rp) {
	background: #F9FBF8;
}

.rp-wrap {
	max-width: var(--rp-max);
	margin-inline: auto;
	padding-inline: var(--rp-gutter);
}

.rp-band--paper { background: var(--rp-paper); }
.rp-band--surface { background: var(--rp-surface); }

/* Headings: the site's global h1-h3 are light and huge; these are the app's */
.rp .rp-title,
.rp .rp-h2,
.rp .rp-h3,
.rp .rp-callout__title {
	font-family: var(--rp-display);
	font-weight: normal;
	color: var(--rp-ink);
	letter-spacing: -.015em;
}

.rp .rp-h2 {
	margin: 0;
	font-size: clamp(1.6rem, 5vw, 2rem);
	line-height: 1.1;
}

.rp .rp-h3 {
	margin: 1.5rem 0 .35rem;
	font-size: 1.15rem;
	line-height: 1.25;
}

/* Buttons */
.rp-btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: .5rem;
	min-height: 3rem;
	padding: .8rem 1.5rem .65rem;
	border-radius: 999px;
	border: 2px solid transparent;
	background: none;
	font: 600 1.0625rem/1.2 var(--rp-sans);
	white-space: nowrap;
	text-decoration: none;
	cursor: pointer;
	transition: box-shadow .3s var(--rp-ease), transform .3s var(--rp-ease), background-color .2s, color .2s;
}

.rp-btn svg {
	width: 1.1em;
	height: 1.1em;
	flex: none;
	margin-top: -.15em;
}

.rp-btn--outline {
	border-color: var(--rp-ink);
	color: var(--rp-ink);
}

.rp-btn--outline:hover,
.rp-btn--outline:focus-visible {
	background: var(--rp-ink);
	color: var(--rp-paper);
}

.rp :focus-visible {
	outline: 3px solid var(--rp-green);
	outline-offset: 2px;
}

@media (prefers-reduced-motion: reduce) {
	.rp-btn { transition: none; }
}

/* ---------- The first screen (_hero.html) ---------- */

/* Phones: no box, so the jump bar inside sticks within the whole page */
.rp-top {
	display: contents;
}

/* Phones: edge to edge, square (so the title and the jump bar make the first screen), starting
   right under the navbar (the inline script in _hero.html sets .rp's top margin) */
.rp-photo {
	position: relative;   /* the QR code and the share bar sit over it */
	overflow: hidden;
	aspect-ratio: 1;
	background: var(--rp-surface);
}

.rp-photo__img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
}

/* The photos as a carousel (_hero.html, recipe_page.js): one photo a slide, snapping into place,
   swiped or moved on by the controls under it. As the web app's (RecipeImageCarousel) and the
   iPad's. Each slide keeps its own "expand" icon (position: relative). */
.rp-slides {
	display: flex;
	height: 100%;
	margin: 0;
	padding: 0;
	list-style: none;
	overflow-x: auto;
	overscroll-behavior-x: contain;
	scroll-snap-type: x mandatory;
	scrollbar-width: none;
}

.rp-slides::-webkit-scrollbar {
	display: none;
}

.rp-slide {
	position: relative;
	flex: 0 0 100%;
	height: 100%;
	scroll-snap-align: center;
	scroll-snap-stop: always;
}

/* Under the photo: back, the dots (where you are), forward, and pause. Small, in the page's
   muted ink; the current dot is a green pill. Each dot is a 24px target with a small mark. */
.rp-gallery__controls {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: .2rem;
	padding: .5rem var(--rp-gutter) 0;
}

.rp .rp-gallery__btn {
	display: grid;
	flex: none;
	place-items: center;
	width: 2rem;
	height: 2rem;
	padding: 0;
	border: 0;
	border-radius: 50%;
	background: transparent;
	color: var(--rp-muted);
	cursor: pointer;
	transition: background-color .2s, color .2s;
}

.rp .rp-gallery__btn:hover {
	background: var(--rp-surface);
	color: var(--rp-ink);
}

.rp-gallery__btn svg {
	width: .95rem;
	height: .95rem;
}

.rp .rp-gallery__play {
	margin-left: .35rem;
}

.rp-gallery__play-icon,
.rp-gallery.is-paused .rp-gallery__pause-icon {
	display: none;
}

.rp-gallery.is-paused .rp-gallery__play-icon {
	display: block;
}

.rp-dots {
	display: flex;
	align-items: center;
}

.rp .rp-dot {
	position: relative;
	width: 1.05rem;
	height: 1.5rem;
	padding: 0;
	border: 0;
	background: none;
	cursor: pointer;
	transition: width .3s cubic-bezier(.2, .8, .2, 1);
}

.rp .rp-dot::before {
	content: '';
	position: absolute;
	top: 50%;
	left: 50%;
	width: .45rem;
	height: .45rem;
	border-radius: 999px;
	background: rgba(26, 37, 24, .24);
	transform: translate(-50%, -50%);
	transition: width .3s cubic-bezier(.2, .8, .2, 1), background-color .3s;
}

.rp .rp-dot:hover::before {
	background: rgba(26, 37, 24, .45);
}

.rp .rp-dot[aria-current="true"] {
	width: 1.75rem;
}

.rp .rp-dot[aria-current="true"]::before {
	width: 1.2rem;
	background: var(--rp-green);
}

.rp .rp-gallery__btn:focus,
.rp .rp-dot:focus {
	outline: none;
}

.rp .rp-gallery__btn:focus-visible,
.rp .rp-dot:focus-visible {
	outline: 2px solid var(--rp-green);
	outline-offset: 1px;
	border-radius: 999px;
}

@media (prefers-reduced-motion: reduce) {
	.rp .rp-dot,
	.rp .rp-dot::before {
		transition: none;
	}
}

.rp-head {
	padding: 1.35rem var(--rp-gutter) 0;
}

.rp .rp-title {
	margin: 0;
	font-size: clamp(2.15rem, 8.5vw, 3.5rem);
	line-height: 1.04;
	text-wrap: balance;
}

/* Chips: time, meal and type, premium, video */
.rp-chips {
	display: flex;
	flex-wrap: wrap;
	gap: .45rem;
	margin-top: 1rem;
}

.rp .rp-chip {
	display: inline-flex;
	align-items: center;
	gap: .4rem;
	min-height: 2.25rem;
	padding: .32rem .95rem .2rem;
	border: 0;
	border-radius: 999px;
	background: var(--rp-surface);
	color: var(--rp-ink);
	font: 600 .9375rem/1.2 var(--rp-sans);
	text-decoration: none;
	white-space: nowrap;
	cursor: pointer;
	transition: background-color .2s;
}

.rp a.rp-chip:hover,
.rp button.rp-chip:hover {
	background: var(--rp-surface-2);
	color: var(--rp-ink);
	text-decoration: none;
}

.rp-chip__icon {
	flex: none;
	width: 1rem;
	height: 1rem;
	margin-top: -.12rem;
}

.rp-chip--video .rp-chip__icon {
	width: 1.2rem;
	height: 1.2rem;
}

.rp .rp-chip--premium {
	background: var(--rp-mustard);
	color: #fff;
	cursor: default;
	box-shadow: 0 2px 10px -4px rgba(0, 0, 0, .45);
}

.rp-chip--premium svg {
	width: 1.05rem;
	height: .85rem;
	margin-top: -.12rem;
}

/* The recipe's rating, from the comments */
.rp .rp-rating {
	display: inline-flex;
	align-items: center;
	gap: .55rem;
	margin-top: .9rem;
	color: var(--rp-text);
	font-size: .9375rem;
	text-decoration: none;
}

.rp .rp-rating:hover {
	color: var(--rp-ink);
	text-decoration: underline;
	text-underline-offset: .2em;
}

.rp-rating strong {
	color: var(--rp-ink);
	font-weight: 600;
}

/* Five stars as a mask, filled to the rating */
.rp-stars {
	--rp-star-size: 1.05rem;
	flex: none;
	width: calc(var(--rp-star-size) * 5);
	height: var(--rp-star-size);
	margin-top: -.15rem;
	background: linear-gradient(90deg, var(--rp-star) calc(var(--rp-rating, 5) / 5 * 100%), rgba(26, 37, 24, .16) 0);
	-webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 2.6l2.8 5.9 6.4.8-4.7 4.5 1.2 6.4L12 17.1l-5.7 3.1 1.2-6.4-4.7-4.5 6.4-.8z'/%3E%3C/svg%3E") 0 0 / var(--rp-star-size) var(--rp-star-size) repeat-x;
	mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 2.6l2.8 5.9 6.4.8-4.7 4.5 1.2 6.4L12 17.1l-5.7 3.1 1.2-6.4-4.7-4.5 6.4-.8z'/%3E%3C/svg%3E") 0 0 / var(--rp-star-size) var(--rp-star-size) repeat-x;
}

/* The jump bar (phones) */
.rp-jump {
	position: sticky;
	top: var(--rp-nav);
	z-index: 20;   /* under the navbar (21) */
	display: flex;
	justify-content: space-between;
	gap: .15rem;
	margin-top: 1.1rem;
	padding: .45rem max(.5rem, calc(var(--rp-gutter) - .65rem));
	background: rgba(249, 251, 248, .88);
	-webkit-backdrop-filter: blur(14px);
	backdrop-filter: blur(14px);
	border-block: 1px solid var(--rp-line);
	overflow-x: auto;
	scrollbar-width: none;
	transition: top .6s;
}

.rp-jump::-webkit-scrollbar {
	display: none;
}

.rp .rp-jump a {
	flex: none;
	padding: .42rem .55rem .3rem;
	border-radius: 999px;
	color: var(--rp-text);
	font-size: .9375rem;
	font-weight: 600;
	line-height: 1.2;
	text-decoration: none;
	transition: background-color .2s, color .2s;
}

.rp .rp-jump a:hover {
	color: var(--rp-ink);
	text-decoration: none;
}

.rp .rp-jump a.is-active {
	background: var(--rp-lime);
	color: var(--rp-ink);
}

.rp-jump a[hidden] {
	display: none;
}

.rp-intro {
	padding: 1.2rem var(--rp-gutter) 0;
}

.rp-blurb {
	color: var(--rp-text);
	font-size: 1.0625rem;
	line-height: 1.6;
}

.rp-blurb p {
	margin: 0 0 .75rem;
}

.rp-blurb > :last-child {
	margin-bottom: 0;
}

/* Allergens, as on the iPad (ServingsAllergenPills): one row of pills with the app's glyphs
   (buttons; recipe_allergens.js). "contains" is mustard, "make ... free" green: a faint wash of
   that colour while it's off, and the full tint while it's on (aria-pressed) */
.rp-allergens {
	display: flex;
	flex-wrap: wrap;
	gap: .45rem;
	margin-top: 1.2rem;
}

.rp-allergen {
	display: inline-flex;
	align-items: center;
	gap: .45rem;
	min-height: 2.1rem;
	padding: .3rem .95rem .22rem .7rem;
	border: 1px solid rgba(26, 37, 24, .18);
	border-radius: 999px;
	background: rgba(249, 251, 248, .6);
	color: var(--rp-ink);
	font-family: inherit;
	font-size: .9375rem;
	font-weight: 600;
	line-height: 1.2;
	cursor: pointer;
	user-select: none;
	transition: background-color .2s, border-color .2s, box-shadow .2s;
}

.rp-allergen:focus {
	outline: none;
}

.rp-allergen:focus-visible {
	outline: 2px solid var(--rp-green);
	outline-offset: 2px;
}

/* Three steps of each pill's own colour (green "make ... free", mustard "contains"), mixed into
   the paper like the app's heroTintSurface: off 8%, hovered 16% with a firmer edge, on 30% with a
   solid two-pixel edge (a 1px border plus a 1px inset ring, so the pill doesn't grow) and the glyph
   in the accent. The iPad's resting pills are glass that picks up colour from the blurred photo
   behind them (HeroBackdrop); on the website's plain paper the pill's own accent stands in for it */
.rp-allergen--contains {
	--rp-pill-accent: #c99738;
	--rp-pill-glyph: #a27824;     /* the mustard, deepened to hold on its own tint */
	--rp-pill-off: 245, 243, 233;
	--rp-pill-hover: 241, 235, 217;
	--rp-pill-on: 235, 221, 190;
	--rp-pill-on-hover: 232, 215, 179;
	--rp-pill-edge: 201, 151, 56;
}

.rp-allergen--swap {
	--rp-pill-accent: #57701B;    /* the apps' lime, darkened for light backgrounds */
	--rp-pill-glyph: #57701B;
	--rp-pill-off: 236, 240, 230;
	--rp-pill-hover: 223, 229, 213;
	--rp-pill-on: 200, 209, 182;
	--rp-pill-on-hover: 191, 201, 168;
	--rp-pill-edge: 87, 112, 27;
}

.rp-allergen--contains,
.rp-allergen--swap {
	border-color: rgba(var(--rp-pill-edge), .32);
	background: rgb(var(--rp-pill-off));
}

.rp-allergen--contains:hover,
.rp-allergen--swap:hover {
	border-color: rgba(var(--rp-pill-edge), .65);
	background: rgb(var(--rp-pill-hover));
}

.rp-allergen__glyph {
	flex: none;
	width: 1.1rem;
	height: 1.1rem;
	margin-top: -.12rem;
	transition: color .2s;
}

.rp-allergen[aria-pressed="true"] {
	border-color: var(--rp-pill-accent);
	background: rgb(var(--rp-pill-on));
	box-shadow: inset 0 0 0 1px var(--rp-pill-accent);
}

.rp-allergen[aria-pressed="true"]:hover {
	background: rgb(var(--rp-pill-on-hover));
}

.rp-allergen[aria-pressed="true"] .rp-allergen__glyph {
	color: var(--rp-pill-glyph);
}

/* Times, as the apps' ring clocks (_clocks.html): Total green, the steps mustard */
.rp-clocks {
	display: flex;
	flex-wrap: wrap;
	gap: .9rem 1.35rem;
	margin: 1.4rem 0 0;
	padding: 0;
	list-style: none;
}

.rp-clock {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: .35rem;
	width: 4rem;
}

.rp-clock__dial {
	position: relative;
	display: block;
	width: 4rem;
	height: 4rem;
}

.rp-clock__dial svg {
	display: block;
	width: 100%;
	height: 100%;
}

.rp-clock__track {
	fill: rgba(249, 251, 248, .44);
	stroke: rgba(26, 37, 24, .12);
	stroke-width: 5;
}

.rp-clock__arc {
	fill: none;
	stroke-width: 5;
	stroke-linecap: round;
	animation: rp-clock 1s var(--rp-ease) both;
}

.rp-clock--green .rp-clock__arc { stroke: #57701B; }
.rp-clock--mustard .rp-clock__arc { stroke: var(--rp-mustard); }

.rp-clock__arc--full {
	animation: none;
}

@keyframes rp-clock {
	from { stroke-dashoffset: var(--rp-arc); }
	to { stroke-dashoffset: 0; }
}

.rp-clock__face {
	position: absolute;
	inset: 0;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	padding-bottom: .1rem;
	line-height: 1;
}

.rp-clock__value {
	color: var(--rp-ink);
	font-size: 1.2rem;
	font-weight: 700;
	font-variant-numeric: tabular-nums;
	letter-spacing: -.01em;
}

.rp-clock__approx {
	color: rgba(26, 37, 24, .65);
	font-size: .95rem;
	font-weight: 600;
}

.rp-clock__unit {
	margin-top: .05rem;
	color: rgba(26, 37, 24, .65);
	font-size: .66rem;
	font-weight: 600;
}

.rp-clock__title {
	color: var(--rp-text);
	font-size: .875rem;
	line-height: 1.2;
	white-space: nowrap;
}

@media (prefers-reduced-motion: reduce) {
	.rp-clock__arc { animation: none; }
}

/* On the photo: "View on phone" (computers; recipe_qr.js shows it and the code on hover) and
   sharing (_share.html), in dark glass */
.rp-photo__bar {
	position: absolute;
	left: var(--rp-gutter);
	right: var(--rp-gutter);
	bottom: 1rem;
	z-index: 3;
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: .5rem;
	pointer-events: none;   /* only the buttons take clicks, so the photo stays pinnable */
}

.rp-glass {
	position: relative;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: .5rem;
	min-height: 2.6rem;
	padding: 0;
	border: 1px solid rgba(255, 255, 255, .16);
	border-radius: 999px;
	background: rgba(26, 33, 22, .55);
	-webkit-backdrop-filter: blur(12px);
	backdrop-filter: blur(12px);
	color: #fff;
	pointer-events: auto;
	transition: background-color .2s;
}

.rp a.rp-glass:hover,
.rp button.rp-glass:hover {
	background: rgba(26, 33, 22, .78);
	color: #fff;
}

.rp-glass--round {
	width: 2.6rem;
	cursor: pointer;
}

.rp-glass svg {
	width: 1.05rem;
	height: 1.05rem;
}

.rp-glass--round svg[viewBox="0 0 32 32"] {
	width: 1.35rem;
	height: 1.35rem;
}

/* "Link copied", where the browser has no share sheet */
.rp-glass__toast {
	position: absolute;
	bottom: calc(100% + .5rem);
	left: 50%;
	padding: .35rem .7rem .25rem;
	border-radius: 999px;
	background: rgba(26, 33, 22, .85);
	color: #fff;
	font-size: .8125rem;
	font-weight: 600;
	white-space: nowrap;
	transform: translateX(-50%);
	pointer-events: none;
}

.rp #qr-btn-cnt {
	position: static;
}

.rp #qr-btn {
	padding: .45rem 1.05rem .35rem .85rem;
	background: rgba(26, 33, 22, .55);   /* recipe_styles.css gives #qr-btn its own green */
	-webkit-backdrop-filter: blur(12px);
	backdrop-filter: blur(12px);
	cursor: default;
}

.rp #qr-btn::before {
	content: '';
	width: 1rem;
	height: 1rem;
	margin-top: -.1rem;
	background: currentColor;
	-webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M1 1h5v5H1zM2.5 2.5v2h2v-2zM10 1h5v5h-5zm1.5 1.5v2h2v-2zM1 10h5v5H1zm1.5 1.5v2h2v-2zM8 1h1v3H8zm0 4h1v3H8zm-1 2h1v1H7zm3 0h3v1h-3zm4 0h1v2h-1zm-6 2h2v1H8zm3 0h1v1h-1zm1 1h3v1h-3zM8 11h1v4H8zm2 1h1v3h-1zm2 1h1v2h-1zm2 0h1v2h-1z'/%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 16 16'%3E%3Cpath d='M1 1h5v5H1zM2.5 2.5v2h2v-2zM10 1h5v5h-5zm1.5 1.5v2h2v-2zM1 10h5v5H1zm1.5 1.5v2h2v-2zM8 1h1v3H8zm0 4h1v3H8zm-1 2h1v1H7zm3 0h3v1h-3zm4 0h1v2h-1zm-6 2h2v1H8zm3 0h1v1h-1zm1 1h3v1h-3zM8 11h1v4H8zm2 1h1v3h-1zm2 1h1v2h-1zm2 0h1v2h-1z'/%3E%3C/svg%3E") center / contain no-repeat;
}

.rp #qr-btn p {
	margin: 0;
	color: inherit;
	font-size: .9375rem;
	font-weight: 600;
	line-height: 1.2;
}

.rp #qr-cnt {
	border-radius: inherit;
	pointer-events: none;
}

.rp #qr-code {
	border-radius: 18px;
	box-shadow: 0 18px 40px -16px rgba(0, 0, 0, .5);
}

/* From 768px: photo left, the rest right */
@media (min-width: 768px) {
	.rp-top {
		display: grid;
		grid-template-columns: minmax(0, 6fr) minmax(0, 7fr);
		grid-template-rows: auto 1fr;
		column-gap: clamp(2rem, 5vw, 4.5rem);
		align-items: start;
		max-width: var(--rp-max);
		margin: 0 auto;
		padding: clamp(1.75rem, 3.5vw, 3rem) var(--rp-gutter) 0;
	}

	/* The photos and their controls stick together beside the title. The photo is no taller than
	   the window leaves room for, so the controls under it stay in view (a laptop's 900px) */
	.rp-gallery {
		grid-row: 1 / span 2;
		position: sticky;
		top: calc(var(--rp-nav) + 1.25rem);
		transition: top .6s;
	}

	.rp-photo {
		aspect-ratio: 3 / 4;   /* the photos are 2:3; a little of the top and bottom is cropped */
		max-height: calc(100vh - var(--rp-nav) - 7rem);   /* the top's padding, the controls, a margin */
		border-radius: 24px;
		box-shadow: 0 28px 50px -34px rgba(26, 37, 24, .6);
	}

	.rp-head {
		padding: .5rem 0 0;
	}

	.rp-jump {
		display: none;
	}

	.rp-intro {
		padding: 0;
		margin-top: 1.5rem;
	}

	.rp-photo__bar {
		left: 1rem;
		right: 1rem;
	}
}

@media (min-width: 1200px) {
	.rp-top {
		grid-template-columns: minmax(0, 34rem) minmax(0, 1fr);
	}
}

/* ---------- The app banner, between the first screen and the recipe ---------- */

.rp-banner {
	padding: clamp(2rem, 6vw, 3.5rem) 0 clamp(2rem, 6vw, 3.5rem);
}

/* ---------- The cook section (_cook.html) ---------- */

.rp-cook {
	padding-block: clamp(1.5rem, 5vw, 4rem) clamp(2.5rem, 6vw, 4.5rem);
}

.rp-cook__grid {
	display: grid;
	gap: 2.25rem;
}

/* Reset what recipe_styles.css gives the kept hooks */
.rp .ingredientlist {
	max-width: none !important;
	padding: 0;
}

/* The card's frame is on .rp-ingredients itself: from 768px that box scrolls, and a frame on the
   content inside it would scroll away with it */
.rp-card,
.rp .rp-ingredients {
	border-radius: 24px;
	border: 1px solid var(--rp-line);
	background: var(--rp-paper);
}

.rp .rp-ingredients__card {
	border: 0;
	border-radius: 0;
	background: none;
}

.rp-ingredients__card {
	padding: 1.3rem 1.15rem 1.1rem;
}

.rp-ingredients__head {
	display: flex;
	align-items: flex-start;
	justify-content: space-between;
	gap: 1rem;
}

.rp-ingredients__head .rp-h2 {
	padding-top: .25rem;
}

/* Servings: − 4 + with what they are underneath */
.rp-servings {
	display: grid;
	justify-items: center;
	gap: .2rem;
}

.rp-stepper {
	display: flex;
	align-items: center;
	padding: .2rem;
	border-radius: 999px;
	background: var(--rp-surface);
}

.rp .rp-stepper__btn {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 2.25rem;
	height: 2.25rem;
	padding: 0;
	border: 0;
	border-radius: 50%;
	background: var(--rp-paper);
	color: var(--rp-ink);
	box-shadow: 0 1px 2px rgba(26, 37, 24, .14);
	cursor: pointer;
	transition: background-color .2s;
}

.rp .rp-stepper__btn:hover {
	background: var(--rp-lime);
}

.rp .rp-stepper__btn:disabled {
	opacity: .4;
	cursor: default;
}

.rp-stepper__btn svg {
	width: 1rem;
	height: 1rem;
}

.rp .rp-stepper__input {
	flex: none !important;
	width: 2.6rem;
	height: 2.25rem;
	padding: .2rem 0 0;
	border: 1.5px solid transparent;   /* recipe_detail_script.js colours it when the servings change */
	border-radius: 999px !important;
	background: transparent;
	box-shadow: none;
	color: var(--rp-ink);
	font: 600 1.125rem/1 var(--rp-sans);
	text-align: center;
}

.rp .rp-servings__label {
	margin: 0;
	color: var(--rp-muted);
	font-family: var(--rp-sans);
	font-size: .8125rem;
	font-weight: 500;
	letter-spacing: 0;
	line-height: 1.2;
	text-transform: lowercase;
}

.rp .rp-servings__note {
	margin: .6rem 0 0;
	color: var(--rp-muted);
	font-size: .875rem;
}

/* An ingredient: a circle to tick, the amount, the metric, the name in bold, the note */
.rp-ing-list {
	margin: .35rem 0 0;
	padding: 0;
	list-style: none;
}

.rp .rp-ing-list > li {
	position: relative;
	display: flex;
	flex-wrap: wrap;
	align-items: flex-start;
	column-gap: .5rem;
	margin: 0;
	padding: .6rem 0 .6rem 2.1rem;
	border-bottom: 1px solid var(--rp-line);
	font-size: 1.0625rem;
	line-height: 1.45;
	text-indent: 0;
}

.rp .rp-ing-list > li:last-child {
	border-bottom: 0;
}

.rp .rp-ing-list .ingredient-container {
	display: block;
	flex: 1 1 0;
	min-width: 0;
	color: var(--rp-ink) !important;
	text-decoration: none !important;
	cursor: pointer;
	-webkit-tap-highlight-color: transparent;
}

.rp .rp-ing-list .ingredient-container::before {
	content: '';
	position: absolute;
	left: 0;
	top: .72rem;
	width: 1.3rem;
	height: 1.3rem;
	border-radius: 50%;
	border: 1.5px solid rgba(26, 37, 24, .3);
	background: center / 75% no-repeat;
	transition: background-color .2s, border-color .2s;
}

.rp .rp-ing-list > li:hover .ingredient-container::before {
	border-color: var(--rp-green);
}

.rp .rp-ing-list .ingredient-container[state="0"] {
	text-decoration: line-through !important;
	text-decoration-thickness: 1.5px !important;
}

.rp .rp-ing-list .ingredient-container[state="0"] > * {
	opacity: .45;
}

.rp .rp-ing-list .ingredient-container[state="0"]::before {
	border-color: var(--rp-green);
	background-color: var(--rp-green);
	background-image: var(--rp-check);
}

.rp .rp-ing-list .ingredient {
	display: inline;
}

.rp .rp-ing-list .ingredient-name-text {
	font-weight: 600;
}

.rp .rp-ing-list [class^="ingredient-amount-metric-text"] {
	color: var(--rp-muted);
}

.rp .rp-ing-list .rp-ing-note {
	color: var(--rp-text);
}

.rp .rp-ing-list .link,
.rp .rp-steps a,
.rp .rp-callout a {
	color: var(--rp-green-dark);
	text-decoration: underline;
	text-decoration-color: rgba(81, 105, 64, .45);
	text-underline-offset: .18em;
}

.rp .rp-ing-list .link:hover,
.rp .rp-steps a:hover,
.rp .rp-callout a:hover {
	color: var(--rp-ink);
	text-decoration-color: currentColor;
}

.rp .note-symbol-source,
.rp .note-symbol {
	color: var(--rp-green);
	font-weight: 600;
}

/* Swaps: the round chevron, and its "Swap for X, or Y." line (recipe_allergens.js writes it) */
.rp .rp-ing-list .subs-btn {
	display: flex;
	flex: none;
	align-items: center;
	justify-content: center;
	width: 2rem;
	height: 2rem;
	margin: -.15rem 0 0;
	border-radius: 50%;
	background: var(--rp-surface);
	color: var(--rp-green-dark);
	cursor: pointer;
	transition: background-color .2s;
}

.rp .rp-ing-list .subs-btn:hover,
.rp .rp-ing-list .subs-btn:has(~ .all-subs-txt:not(.hidden)) {
	background: var(--rp-lime);
	color: var(--rp-ink);
}

.rp .rp-ing-list .subs-btn .fa {
	font-size: .7rem;
	line-height: 1;
}

.rp .rp-ing-list > li > .all-subs-txt {
	flex-basis: 100%;
	margin: .25rem 0 0;
	color: var(--rp-text);
	font-size: .9375rem;
	font-style: normal;
}

.rp .rp-ing-list > li > .all-subs-txt .link {
	font-weight: 600;
}

/* An allergen that's on (recipe_allergens.js), as in the app since 2.2.0: each ingredient that
   has it gets a soft wash in the row's colour (green: it has a swap free of it; mustard: none is
   listed), bleeding a little past the text, and a line with the allergen's glyph. The row's own
   chevron and its "Swap for" line step aside meanwhile. A ticked row fades, wash and all. */
.rp .rp-ing-list > li.rp-ing--allergen {
	margin: 2px -.5rem;
	padding-right: .5rem;
	padding-left: 2.6rem;
	border-bottom-color: transparent;
	border-radius: 10px;
	background: rgba(87, 112, 27, .16);
	--rp-allergy: #57701B;
	--rp-allergy-ink: #4A5F17;
}

.rp .rp-ing-list > li.rp-ing--no-swap {
	background: rgba(201, 151, 56, .16);
	--rp-allergy: var(--rp-mustard);
	--rp-allergy-ink: var(--rp-mustard-ink);
}

.rp .rp-ing-list > li.rp-ing--allergen .ingredient-container::before {
	left: .5rem;
}

.rp .rp-ing-list > li.rp-ing--allergen > .subs-btn,
.rp .rp-ing-list > li.rp-ing--allergen > .all-subs-txt {
	display: none;
}

.rp .rp-ing-list > li > .rp-allergy {
	display: flex;
	flex-basis: 100%;
	align-items: flex-start;
	gap: .4rem;
	margin: .2rem 0 0;
	color: var(--rp-allergy-ink);
	font-size: .9375rem;
	font-weight: 500;
	line-height: 1.4;
}

.rp .rp-ing-list > li > .rp-allergy .link {
	color: inherit;
	font-weight: 600;
	text-decoration-color: currentColor;
}

.rp-allergy__glyph {
	flex: none;
	width: .9rem;
	height: .9rem;
	margin-top: .15rem;
	color: var(--rp-allergy);
}

.rp .rp-ing-list > li.rp-ing--allergen:has(> .ingredient-container[state="0"]) {
	background-color: rgba(26, 37, 24, .04);
}

.rp .rp-ing-list > li.rp-ing--allergen:has(> .ingredient-container[state="0"]) > .rp-allergy {
	opacity: .45;
}

.rp .rp-ing-list--optional .ingredient-name-text {
	font-weight: 500;
}

/* Directions: numbered discs on a line, a tick when done */
.rp-directions {
	min-width: 0;
}

.rp-directions > .rp-h2 {
	margin-bottom: 1.25rem;
}

.rp-steps {
	margin: 0;
	padding: 0;
	list-style: none;
	counter-reset: rp-step;
}

.rp .rp-steps > li {
	position: relative;
	margin: 0;
	padding: 0 0 1.4rem 3.1rem;
	counter-increment: rp-step;
	font-size: 1.0625rem;
	line-height: 1.65;
}

/* Each step's number is the button that checks it off (_cook.html, recipe_page.js), drawn like the
   ingredients' checkboxes so it reads as one: an empty green ring with the number in it. With a
   mouse, the step's row washes the ring lime and the ring itself previews the tick; checked, it's
   the lime disc with the tick, and the step's text fades and is struck through. */
.rp-step__check {
	position: absolute;
	left: 0;
	top: 0;
	display: grid;
	place-items: center;
	width: 2.1rem;
	height: 2.1rem;
	margin: 0;
	padding: 0;
	border: 2px solid var(--rp-green);
	border-radius: 50%;
	background: var(--rp-paper);
	color: var(--rp-green);
	font: 600 1rem/1 var(--rp-sans);
	cursor: pointer;
	-webkit-tap-highlight-color: transparent;
	transition: background-color .2s, border-color .2s, color .2s, transform .15s var(--rp-ease);
}

/* A 44px target on phones (the ring stays 34px) */
.rp-step__check::before {
	content: '';
	position: absolute;
	inset: -6px;
	border-radius: 50%;
}

.rp-step__check:focus {
	outline: none;
}

.rp-step__check:focus-visible {
	outline: 2px solid var(--rp-green);
	outline-offset: 3px;
}

.rp-step__check:active {
	transform: scale(.9);
}

/* The number and the tick share the middle and cross-fade */
.rp-step__num,
.rp-step__tick {
	grid-area: 1 / 1;
	transition: opacity .2s, transform .2s var(--rp-ease);
}

.rp-step__num {
	padding-bottom: .12em;   /* Hind's numerals sit low in the line box */
}

.rp-step__tick {
	width: 1.1rem;
	height: 1.1rem;
	fill: none;
	stroke: currentColor;
	stroke-width: 2.2;
	stroke-linecap: round;
	stroke-linejoin: round;
	opacity: 0;
	transform: scale(.6);
}

@media (hover: hover) {
	.rp-steps > li:hover > .rp-step__check[aria-pressed="false"] {
		background: rgba(190, 227, 120, .28);
	}

	.rp-steps > li > .rp-step__check[aria-pressed="false"]:hover:not([data-rp-fresh]) {
		background: rgba(190, 227, 120, .6);
	}

	.rp-step__check[aria-pressed="false"]:hover:not([data-rp-fresh]) > .rp-step__num {
		opacity: 0;
		transform: scale(.6);
	}

	.rp-step__check[aria-pressed="false"]:hover:not([data-rp-fresh]) > .rp-step__tick {
		opacity: 1;
		transform: none;
	}
}

.rp-step__check[aria-pressed="true"] {
	border-color: var(--rp-lime);
	background: var(--rp-lime);
	color: var(--rp-ink);
}

.rp-step__check[aria-pressed="true"] > .rp-step__num {
	opacity: 0;
	transform: scale(.6);
}

.rp-step__check[aria-pressed="true"] > .rp-step__tick {
	opacity: 1;
	transform: none;
}

@media (prefers-reduced-motion: no-preference) {
	.rp-step__check[aria-pressed="true"] {
		animation: rp-step-done .35s var(--rp-ease);
	}
}

@keyframes rp-step-done {
	50% { transform: scale(1.12); }
}

/* Pages cached before the numbers were buttons (Cloudflare keeps HTML 4h): the number drawn as
   before. Remove a release after this one. */
.rp-steps > li:not(:has(> .rp-step__check))::before {
	content: counter(rp-step);
	position: absolute;
	left: 0;
	top: 0;
	display: flex;
	align-items: center;
	justify-content: center;
	width: 2.1rem;
	height: 2.1rem;
	padding-bottom: .12em;
	border-radius: 50%;
	background: var(--rp-green);
	color: #fff;
	font-size: 1rem;
	font-weight: 600;
	line-height: 1;
}

.rp-steps > li:not(:has(> .rp-step__check)):has(> .direction[state="0"])::before {
	content: '';
	background: var(--rp-lime) var(--rp-check-ink) center / 58% no-repeat;
}

/* The line from one step to the next */
.rp-steps > li:not(:last-child)::after {
	content: '';
	position: absolute;
	left: calc(1.05rem - .75px);
	top: 2.5rem;
	bottom: .4rem;
	width: 1.5px;
	border-radius: 1px;
	background: rgba(81, 105, 64, .25);
}

.rp .rp-steps .direction {
	display: block;
	color: var(--rp-ink) !important;
	text-decoration: none !important;
	cursor: pointer;
	transition: opacity .2s;
	-webkit-tap-highlight-color: transparent;
}

.rp .rp-steps .direction[state="0"] {
	opacity: .45;
	text-decoration: line-through !important;
	text-decoration-thickness: 1.5px !important;
}

/* Notes, storage, make your own */
.rp-callout {
	margin-top: 1.25rem;
	padding: 1.15rem 1.25rem 1.05rem;
	border-radius: 20px;
	background: var(--rp-paper);
	border: 1px solid var(--rp-line);
}

.rp .rp-callout__title {
	margin: 0 0 .5rem;
	font-size: 1.2rem;
	line-height: 1.2;
}

.rp-callout__list {
	margin: 0;
	padding-left: 1.15rem;
	color: var(--rp-text);
	font-size: 1rem;
	line-height: 1.6;
}

.rp-callout__list li {
	margin: 0 0 .45rem;
}

.rp-callout__list li:last-child {
	margin-bottom: 0;
}

.rp-callout__list li::marker {
	color: var(--rp-green);
}

.rp #included-recipes-container {
	display: block;
	padding-bottom: 1.05rem;
}

/* "Make your own": landscape cards, a 3:2 photo over the name (Sadia: the photos were too small;
   portrait cards would take too much height here). Three across in the directions column, two on
   phones: a card is at least 11rem, or half the row where that's narrower. */
.rp-make__list {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(min(11rem, calc(50% - .4rem)), 1fr));
	gap: .8rem;
	margin: .5rem 0 0;
	padding: 0;
	list-style: none;
}

/* Within the callout, so the callout's own link underline (.rp .rp-callout a) doesn't reach the cards */
.rp .rp-callout .rp-make__item {
	display: flex;
	flex-direction: column;
	height: 100%;
	overflow: hidden;
	border: 1px solid var(--rp-line);
	border-radius: 16px;
	background: #fff;
	color: var(--rp-ink);
	text-decoration: none;
	transition: box-shadow .25s var(--rp-ease), transform .25s var(--rp-ease);
}

.rp .rp-callout .rp-make__item:hover {
	color: var(--rp-ink);
	text-decoration: none;
	box-shadow: 0 12px 24px -14px rgba(26, 37, 24, .35);
	transform: translateY(-2px);
}

.rp .rp-make__item:focus-visible {
	outline: 2px solid var(--rp-green);
	outline-offset: 2px;
}

.rp-make__photo {
	display: block;
	overflow: hidden;
	aspect-ratio: 3 / 2;
	background: var(--rp-surface);
}

.rp .rp-make__img {
	display: block;
	width: 100%;
	height: 100%;
	border-radius: 0;
	object-fit: cover;
	transition: transform .5s var(--rp-ease);
}

.rp-make__item:hover .rp-make__img {
	transform: scale(1.04);
}

/* Three lines at most (on phones a name like "Quick Homemade Tahini" takes three); the space
   below is a margin, as a clamped line would show in a bottom padding */
.rp-make__name {
	display: -webkit-box;
	margin: 0 0 .7rem;
	padding: .6rem .75rem 0;
	overflow: hidden;
	font-family: var(--rp-display);
	font-size: 1.05rem;
	line-height: 1.2;
	-webkit-line-clamp: 3;
	-webkit-box-orient: vertical;
}

@media (prefers-reduced-motion: reduce) {
	.rp .rp-make__item:hover,
	.rp-make__item:hover .rp-make__img {
		transform: none;
	}
}

/* The end of the recipe: the stars and print */
.rp-cook__end {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
	gap: 1rem 1.5rem;
	margin-top: 1.75rem;
	padding-top: 1.5rem;
	border-top: 1px solid var(--rp-line);
}

.rp .rp-rate__title {
	margin: 0 0 .2rem;
	color: var(--rp-ink);
	font-weight: 600;
	font-size: 1.0625rem;
}

.rp .rp-rate .rating-stars {
	display: block;
	padding: 0;
}

.rp .rp-rate #link-stars {
	display: flex;
	gap: .1rem;
	margin: 0 0 0 -.3rem;
	padding: 0;
	list-style: none;
}

.rp .rp-rate li.star-sub {
	cursor: pointer;
}

.rp .rp-rate li.star-sub > i.fa {
	font-size: 1.6rem;
	color: rgba(26, 37, 24, .2);
	transition: color .15s;
}

.rp .rp-rate li.star-sub.hover > i.fa {
	color: #ffb347;
}

.rp .rp-rate li.star-sub.selected > i.fa {
	color: var(--rp-star);
}

/* From 768px: the ingredients beside the directions, sticky, scrolling on their own if taller
   than the screen */
@media (min-width: 768px) {
	.rp-cook__grid {
		grid-template-columns: minmax(18.5rem, 23rem) minmax(0, 1fr);
		align-items: start;
		column-gap: clamp(2rem, 4vw, 4.5rem);
	}

	.rp .rp-ingredients {
		position: sticky;
		top: calc(var(--rp-nav) + 1rem);
		max-height: calc(100vh - var(--rp-nav) - 2rem);
		overflow-y: auto;   /* no ad in here */
		scrollbar-width: thin;
		scrollbar-color: rgba(26, 37, 24, .2) transparent;
		transition: top .6s, max-height .6s;
	}

	.rp-ingredients__card {
		padding: 1.5rem 1.4rem 0;
	}

	/* A soft fade at the bottom while there's more to scroll to */
	.rp-ingredients__card::after {
		content: '';
		position: sticky;
		bottom: 0;
		display: block;
		height: 1.75rem;
		margin-inline: -1.4rem;
		background: linear-gradient(rgba(249, 251, 248, 0), var(--rp-paper) 80%);
		pointer-events: none;
	}

	.rp-directions > .rp-h2 {
		padding-top: 1.5rem;
	}
}

/* ---------- Comments: comments/static/css/comment_section.css (.cm), shared with the article page ---------- */

/* ---------- Phones ---------- */

@media (max-width: 767.98px) {
	/* The steps read edge to edge; the card keeps a little gutter */
	.rp-cook .rp-wrap {
		padding-inline: .75rem;
	}

	.rp-directions {
		padding-inline: .35rem;
	}
}

/* ---------- The sections after the recipe (_video, _nutrition, _faqs, _shots, _similar) ---------- */

.rp-video,
.rp-nutrition,
.rp-faqs,
.rp-shots,
.rp-photos,
.rp-similar {
	padding-block: clamp(2.5rem, 7vw, 4.5rem);
}

/* Bands of the same colour next to each other read as one */
.rp-band--paper + .rp-band--paper,
.rp-band--surface + .rp-band--surface,
.rp-ad + .rp-band--paper {
	padding-top: .5rem;
}

/* The ads between sections (the partials are shared, so only spacing here) */
.rp-ad .row-pt {
	padding-top: 1.5rem;
}

/* Video */
.rp-video__frame {
	position: relative;
	aspect-ratio: 16 / 9;
	max-width: 64rem;
	margin-top: 1.25rem;
	border-radius: clamp(18px, 2.5vw, 28px);
	overflow: hidden;   /* no ad in here */
	background: #10160E;
	box-shadow: 0 28px 50px -34px rgba(26, 37, 24, .6);
}

.rp-video__frame iframe {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	border: 0;
}

/* Nutrition and the plate method */
.rp-nutrition__grid {
	display: grid;
	gap: 1.25rem;
}

.rp-nutrition__card,
.rp-plate {
	padding: 1.5rem 1.3rem 1.4rem;
}

.rp-nutrition__grid:not(.rp-nutrition__grid--plate) .rp-nutrition__card {
	max-width: 50rem;
}

.rp .rp-nutrition__intro {
	margin: .65rem 0 1.25rem;
	color: var(--rp-text);
	font-size: 1rem;
	line-height: 1.6;
}

.rp-nutrition a.link,
.rp-plate a.link,
.rp-faq__a a {
	color: var(--rp-green-dark);
	text-decoration: underline;
	text-decoration-color: rgba(81, 105, 64, .45);
	text-underline-offset: .18em;
}

.rp-nutrition__toggle {
	min-height: 2.75rem;
	padding-block: .6rem .5rem;
}

/* The two labels in one place, cross-fading (aria-expanded: recipe_page.js), so the button is
   as wide as the longer one throughout */
.rp-nutrition__toggle {
	display: inline-grid;
	place-items: center;
}

.rp-nutrition__label {
	display: inline-flex;
	grid-area: 1 / 1;
	align-items: center;
	justify-content: center;
	gap: .5rem;
	transition: opacity .25s ease;
}

.rp-nutrition__label--hide,
.rp-nutrition__toggle[aria-expanded="true"] .rp-nutrition__label--show {
	opacity: 0;
}

.rp-nutrition__toggle[aria-expanded="true"] .rp-nutrition__label--hide {
	opacity: 1;
}

@media (prefers-reduced-motion: reduce) {
	.rp-nutrition__label { transition: none; }
}

.rp-nutrition__toggle svg {
	width: 1rem;
	height: 1rem;
}

.rp-nutrition__head {
	display: flex;
	flex-wrap: wrap;
	align-items: baseline;
	justify-content: space-between;
	gap: .25rem 1rem;
	margin-top: 1.5rem;
	padding-bottom: .6rem;
	border-bottom: 2px solid var(--rp-ink);
}

.rp .rp-nutrition__per {
	margin: 0;
	color: var(--rp-ink);
	font-weight: 600;
}

.rp-nutrition__per span {
	color: var(--rp-muted);
	font-weight: 400;
	font-size: .9375rem;
}

.rp .rp-nutrition__kcal {
	margin: 0;
	color: var(--rp-muted);
	font-size: .9375rem;
}

.rp-nutrition__kcal strong {
	color: var(--rp-ink);
	font-family: var(--rp-display);
	font-size: 1.9rem;
	font-weight: normal;
	letter-spacing: -.01em;
}

.rp-nutrition__tables .row {
	display: block;
	margin: 0;
}

.rp-nutrition__tables .col {
	padding: 0;
}

.rp-nutrition__tables .row + .row {
	margin-top: 1rem;
}

.rp-nutrition__tables table {
	table-layout: auto;
}

.rp-nutrition__tables td {
	padding: .5rem 0 .4rem;
	border-bottom: 1px solid var(--rp-line);
	color: var(--rp-text);
	font-size: .9375rem;
	line-height: 1.3;
}

.rp-nutrition__tables td[data-label="value"] {
	color: var(--rp-ink);
	font-variant-numeric: tabular-nums;
	white-space: nowrap;
}

.rp-nutrition__tables td strong {
	color: var(--rp-ink);
	font-weight: 600;
}

@media (min-width: 576px) {
	.rp-nutrition__tables .row {
		display: grid;
		grid-template-columns: repeat(2, minmax(0, 1fr));
		column-gap: 2rem;
	}
}

/* The plate method, as the cookbook draws it (_plate.html) */
.rp-plate__figure {
	max-width: 22rem;
	margin: .25rem auto 0;
	padding: .25rem;
	border-radius: 20px;
	background: #EEF2EC;   /* the cookbook's panel behind the plate */
}

.rp-plate__svg {
	display: block;
	width: 100%;
	height: auto;
	overflow: visible;
}

.rp-plate__empty {
	fill: rgba(169, 189, 167, .25);
}

.rp-plate__label {
	fill: #4A6646;
	font-family: var(--rp-sans);
	font-size: 17px;   /* LABEL_SIZE in recipes/recipe_page.py, which sizes the arcs to it */
	font-weight: 500;
	letter-spacing: .02em;
}

/* + healthy fats, + calcium-rich foods: outlined pills, filled when the recipe has them */
.rp-plate__sides {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: .5rem;
	margin: 1rem 0 0;
	padding: 0;
	list-style: none;
}

.rp-plate__side {
	display: inline-block;
	padding: .32rem .9rem .22rem;
	border: 1.5px solid rgba(74, 102, 70, .3);
	border-radius: 999px;
	color: rgba(74, 102, 70, .55);
	font-size: .875rem;
	font-weight: 500;
	line-height: 1.2;
}

/* A side the recipe has: a tick in place of the "+" (Sadia), so it reads as there, not to add */
.rp-plate__side.is-on {
	display: inline-flex;
	align-items: center;
	gap: .3rem;
	padding-left: .7rem;
	border-color: #4A6646;
	background: #EEF2EC;
	color: #3C5639;
}

.rp-plate__tick {
	flex: none;
	width: .95em;
	height: .95em;
	margin-top: -.1em;
}

/* What goes into each part: every part without the script; with it (.is-js, recipe_page.js), the
   part tapped on the plate, or a line inviting a tap */
.rp-plate__detail {
	margin: 1.35rem 0 0;
	padding-top: 1.1rem;
	border-top: 1px solid var(--rp-line);
}

.rp-plate__legend {
	display: grid;
	gap: .7rem;
	margin: 0;
}

/* HTML cached before the panel (Cloudflare, up to 4 hours) has the list straight in the card: keep
   its line above. Remove after a release */
.rp-plate > .rp-plate__legend {
	margin-top: 1.35rem;
	padding-top: 1.1rem;
	border-top: 1px solid var(--rp-line);
}

.rp .rp-plate__prompt {
	margin: 0;
	color: var(--rp-muted);
	font-size: .9375rem;
	text-align: center;
}

.rp-plate.is-js .rp-plate__row {
	display: none;
}

.rp-plate.is-js .rp-plate__row.is-shown {
	display: block;
	animation: rp-plate-in .3s var(--rp-ease);
}

@keyframes rp-plate-in {
	from { opacity: 0; transform: translateY(4px); }
}

/* The parts as toggles: a little lift on hover, the picked one forward and the rest dimmed */
.rp-plate.is-js .rp-plate__part {
	cursor: pointer;
	transform-box: view-box;
	transform-origin: 200px 200px;
	transition: opacity .25s, transform .3s var(--rp-ease);
}

.rp-plate__part:focus {
	outline: none;
}

.rp-plate__part:focus-visible .rp-plate__wedge {
	filter: drop-shadow(0 0 1.5px #3C5639) drop-shadow(0 0 1.5px #3C5639);
}

@media (hover: hover) {
	.rp-plate.is-js .rp-plate__part:hover {
		transform: scale(1.025);
	}
}

.rp-plate.is-js .rp-plate__part.is-picked {
	transform: scale(1.035);
}

.rp-plate.has-pick .rp-plate__part:not(.is-picked) {
	opacity: .35;
}

.rp-plate.is-js .rp-plate__side.is-on {
	cursor: pointer;
	transition: background-color .2s, color .2s;
}

.rp-plate.is-js .rp-plate__side.is-on:hover {
	background: #E2EADF;
}

.rp-plate.is-js .rp-plate__side.is-on.is-picked {
	background: #4A6646;
	color: #fff;
}

.rp-plate__side:focus {
	outline: none;
}

.rp-plate__side:focus-visible {
	outline: 2px solid var(--rp-green);
	outline-offset: 2px;
}

@media (prefers-reduced-motion: reduce) {
	.rp-plate.is-js .rp-plate__part,
	.rp-plate.is-js .rp-plate__part:hover,
	.rp-plate.is-js .rp-plate__part.is-picked {
		transform: none;
	}

	.rp-plate.is-js .rp-plate__row.is-shown {
		animation: none;
	}
}

.rp-plate__row dt {
	display: flex;
	align-items: center;
	gap: .5rem;
	color: var(--rp-ink);
	font-size: .9375rem;
	font-weight: 600;
}

.rp-plate__pct {
	color: var(--rp-muted);
	font-weight: 500;
}

.rp-plate__row dd {
	margin: .1rem 0 0 1.4rem;
	color: var(--rp-text);
	font-size: .9375rem;
	line-height: 1.5;
}

.rp-plate__swatch {
	flex: none;
	width: .9rem;
	height: .9rem;
	border-radius: 50%;
	background: #A9BDA7 center / 180% no-repeat;
}

.rp-plate__swatch--veggies { background-image: url("../images/plate_method/collage_veggies.8616126a6cf2.svg"); }
.rp-plate__swatch--grains { background-image: url("../images/plate_method/collage_grains.e275314f076e.svg"); }
.rp-plate__swatch--proteins { background-image: url("../images/plate_method/collage_proteins.3ce3768142e8.svg"); }

/* Only a side the recipe has gets a row, so its orb is filled, with the pill's tick */
.rp-plate__swatch--side {
	background: #4A6646 url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M4 8.4l2.6 2.6 5.4-5.8' fill='none' stroke='%23fff' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / 100% no-repeat;
}

@media (min-width: 992px) {
	.rp-nutrition__grid--plate {
		grid-template-columns: minmax(0, 7fr) minmax(0, 5fr);
		align-items: start;
	}

	.rp-nutrition__card,
	.rp-plate {
		padding: 2rem 2rem 1.9rem;
	}
}

/* Questions */
.rp-faqs__list {
	max-width: 52rem;
	margin-top: 1.25rem;
	border-top: 1px solid var(--rp-line);
}

.rp-faq {
	border-bottom: 1px solid var(--rp-line);
}

.rp-faq__q {
	display: flex;
	align-items: flex-start;
	justify-content: space-between;
	gap: 1rem;
	padding: 1.05rem 0 .95rem;
	color: var(--rp-ink);
	font-size: 1.0625rem;
	font-weight: 600;
	line-height: 1.45;
	list-style: none;
	cursor: pointer;
}

.rp-faq__q::-webkit-details-marker {
	display: none;
}

.rp-faq__icon {
	flex: none;
	width: 2rem;
	height: 2rem;
	margin-top: -.2rem;
	padding: .5rem;
	border-radius: 50%;
	background: var(--rp-surface);
	transition: transform .25s var(--rp-ease), background-color .2s;
}

.rp-faq__q:hover .rp-faq__icon {
	background: var(--rp-surface-2);
}

.rp-faq[open] .rp-faq__icon {
	transform: rotate(45deg);
	background: var(--rp-lime);
}

.rp-faq__a {
	padding: 0 3rem 1.25rem 0;
	color: var(--rp-text);
	font-size: 1rem;
	line-height: 1.65;
}

.rp-faq__a p {
	margin: 0 0 .75rem;
}

.rp-faq__a > :last-child {
	margin-bottom: 0;
}

@media (prefers-reduced-motion: reduce) {
	.rp-faq__icon { transition: none; }
}

/* More photos ("More for the eyes", _shots.html): the beauty shots again after the questions.
   Phones and tablets keep it short, as the photos are in the carousel at the top too: rows of 2 on
   phones (at most 4), cropped a little to 4:5; on tablets rows of 3 of the whole 2:3 photos (at most
   6), on a grid of 6 columns with each photo across 2, so a row that isn't full sits in the middle:
   4 photos as 2 + 2, 5 as 3 + 2 (--n: how many, _shots.html). The last tile shown carries "+3" for
   the rest (the count differs, so one for each). Computers (1,024px and up): every photo whole, one
   under another in a column up to 36rem wide, narrower on a short screen so each photo fits on it
   (Sadia's long column), with the vrec ads sticking either side from 1,441px (.rp-after). The tiles clip their photo (no ad in here). */
.rp-shots__grid {
	--rp-shots-gap: .75rem;
	display: flex;
	flex-wrap: wrap;
	gap: var(--rp-shots-gap);
	margin: 1.25rem 0 0;
	padding: 0;
	list-style: none;
}

.rp-shots__item {
	flex: 0 0 calc((100% - var(--rp-shots-gap)) / 2);
	min-width: 0;
}

/* .rp-view (the photo buttons' reset, further down) would clear the background */
.rp-view.rp-shots__tile {
	position: relative;
	aspect-ratio: 4 / 5;
	overflow: hidden;
	border-radius: 16px;
	background: var(--rp-surface-2);
}

.rp-shots__img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
	transition: transform .6s var(--rp-ease);
}

@media (hover: hover) {
	.rp-shots__tile:hover .rp-shots__img {
		transform: scale(1.03);
	}
}

.rp-shots__more {
	position: absolute;
	inset: 0;
	display: grid;
	place-items: center;
	background: rgba(26, 37, 24, .52);
	color: #fff;
	font-family: var(--rp-sans);   /* Cotoris' plus is tiny */
	font-size: clamp(1.5rem, 5vw, 2rem);
	font-weight: 600;
	line-height: 1;
	pointer-events: none;
}

/* After .rp-shots__more, so its display: grid doesn't undo this */
.rp-shots__item--tablet,
.rp-shots__item--desktop,
.rp-shots__more--tablet {
	display: none;
}

@media (min-width: 768px) and (max-width: 1023.98px) {
	.rp-shots__grid {
		--rp-shots-gap: 1rem;
		display: grid;
		grid-template-columns: repeat(6, minmax(0, 1fr));
	}

	.rp-shots__item {
		grid-column: span 2;
	}

	.rp-shots__grid--n1 > :nth-child(1) {
		grid-column: 3 / span 2;
	}

	.rp-shots__grid--n2 > :nth-child(1),
	.rp-shots__grid--n4 > :nth-child(odd),
	.rp-shots__grid--n5 > :nth-child(4) {
		grid-column: 2 / span 2;
	}

	.rp-shots__item--tablet {
		display: block;
	}

	.rp-view.rp-shots__tile {
		aspect-ratio: 2 / 3;
		border-radius: 20px;
	}

	.rp-shots__more--phone {
		display: none;
	}

	.rp-shots__more--tablet {
		display: grid;
	}
}

@media (min-width: 1024px) {
	.rp-shots .rp-h2 {
		text-align: center;
	}

	/* Up to 36rem, and no wider than lets a 2:3 photo fit on the screen under the navbar */
	.rp-shots__grid {
		flex-direction: column;
		flex-wrap: nowrap;
		gap: 1.5rem;
		max-width: min(36rem, (100vh - var(--rp-nav) - 4rem) * 2 / 3);
		margin: 1.75rem auto 0;
	}

	/* Down the column: the phones' half-width basis would apply to the height */
	.rp-shots__item {
		flex: none;
	}

	.rp-shots__item--tablet,
	.rp-shots__item--desktop {
		display: block;
	}

	/* Each photo whole, at its own shape (its width and height are on the img) */
	.rp-view.rp-shots__tile {
		aspect-ratio: auto;
		border-radius: 24px;
	}

	.rp-shots__img {
		height: auto;
	}

	.rp-shots__more--phone {
		display: none;
	}

	@media (hover: hover) {
		.rp-shots__tile:hover .rp-shots__img {
			transform: scale(1.015);
		}
	}
}

@media (prefers-reduced-motion: reduce) {
	.rp-shots__img { transition: none; }
}

/* The previous "More for the eyes" (.rp-photos, a masonry of every photo), off the page since the
   carousel at the top; .rp-shots above is the new one. These rules stay one release for pages
   Cloudflare cached with the old section; then they can go.
   It was a grid everywhere. Two columns on phones and tablets, three from 1,024px, and from
   1,441px two in a wider middle column between the vrec ads */
.rp .rp-photos__title {
	margin-bottom: 1.25rem;
}

.rp-photos__layout {
	max-width: var(--rp-max);
	margin-inline: auto;
	padding-inline: var(--rp-gutter);
}

.rp-photos__ad {
	display: none;
}

.rp-photos__grid {
	columns: 2;
	column-gap: .75rem;
}

.rp-photos__img {
	display: block;
	width: 100%;
	height: auto;
	margin: 0 0 .75rem;
	border-radius: 16px;
	background: var(--rp-surface-2);
	break-inside: avoid;
}

@media (min-width: 768px) {
	.rp-photos__grid {
		column-gap: 1.25rem;
	}

	.rp-photos__img {
		margin-bottom: 1.25rem;
		border-radius: 24px;
	}
}

@media (min-width: 1024px) {
	.rp-photos__grid {
		columns: 3;
	}
}

@media (min-width: 1441px) {
	.rp-photos__layout {
		display: grid;
		grid-template-columns: minmax(300px, 1fr) minmax(0, 56rem) minmax(300px, 1fr);
		align-items: stretch;   /* the ad columns are as tall as the photos */
		column-gap: 2rem;
		max-width: none;
	}

	.rp-photos__layout--empty {
		grid-template-columns: repeat(2, minmax(0, 1fr));
		padding-block: 2rem;
	}

	.rp-photos__ad {
		display: block;
	}

	.rp-photos__grid {
		columns: 2;
	}

	.rp .rp-photos__title {
		text-align: center;
	}

	/* The vrec ads stick just under the navbar (recipe_styles.css: 90px) */
	.rp .vrec-ad {
		top: calc(var(--rp-nav) + 1rem);
		transition: top .6s;
	}
}

/* The sections after the recipe (_after.html): the video, nutrition and questions. From 1,441px
   the two vrec ads either side of them, as they were beside "More for the eyes": the same columns
   (300px each at least, the sections up to 56rem between them), the ads sticking just under the
   navbar while the sections scroll by. In the flow, so the ads add to the region's height and never
   run into what follows. Between them the nutrition band is a rounded panel. */
.rp-after__ad {
	display: none;
}

@media (min-width: 1441px) {
	.rp-after {
		display: grid;
		grid-template-columns: minmax(300px, 1fr) minmax(0, 56rem) minmax(300px, 1fr);
		align-items: stretch;
		column-gap: 2rem;
		padding-inline: var(--rp-gutter);
	}

	.rp-after__main {
		grid-column: 2;
		grid-row: 1;
		min-width: 0;
	}

	.rp-after__ad {
		display: block;
		grid-row: 1;
	}

	.rp-after__ad--left {
		grid-column: 1;
	}

	.rp-after__ad--right {
		grid-column: 3;
	}

	.rp-after .rp-band--surface {
		border-radius: 28px;
	}

	/* The vrec ads stick just under the navbar (recipe_styles.css: 90px) */
	.rp-after .vrec-ad {
		top: calc(var(--rp-nav) + 1rem);
		transition: top .6s;
	}
}

/* Similar recipes: a row to swipe, arrows from 768px */
.rp-similar__head {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 1rem;
}

.rp-similar__arrows {
	display: none;
	gap: .5rem;
}

.rp .rp-similar__arrow {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 2.75rem;
	height: 2.75rem;
	padding: 0;
	border: 1px solid var(--rp-line);
	border-radius: 50%;
	background: var(--rp-paper);
	color: var(--rp-ink);
	cursor: pointer;
	transition: background-color .2s, opacity .2s;
}

.rp .rp-similar__arrow:hover:not(:disabled) {
	background: var(--rp-lime);
	border-color: transparent;
}

.rp .rp-similar__arrow:disabled {
	opacity: .35;
	cursor: default;
}

.rp-similar__arrow svg {
	width: 1rem;
	height: 1rem;
}

.rp-similar__row {
	--rp-row-pad: max(var(--rp-gutter), calc((100% - var(--rp-max)) / 2 + var(--rp-gutter)));
	display: grid;
	grid-auto-flow: column;
	grid-auto-columns: min(68vw, 16rem);
	gap: 1rem;
	margin: 1.25rem 0 0;
	padding: 0 var(--rp-row-pad) .5rem;
	list-style: none;
	overflow-x: auto;   /* no ad in here */
	overscroll-behavior-x: contain;
	scroll-snap-type: x mandatory;
	scroll-padding-inline: var(--rp-row-pad);
	scrollbar-width: none;
}

.rp-similar__row::-webkit-scrollbar {
	display: none;
}

.rp-similar__item {
	scroll-snap-align: start;
}

.rp .rp-similar__card,
.rp .rp-similar__card:hover {
	display: block;
	color: var(--rp-ink);
	text-decoration: none;
}

.rp-similar__photo {
	position: relative;
	display: block;
	aspect-ratio: 4 / 5;
	overflow: hidden;
	border-radius: 20px;
	background: var(--rp-surface);
}

.rp-similar__photo img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
	transition: transform .5s var(--rp-ease);
}

.rp-similar__card:hover .rp-similar__photo img {
	transform: scale(1.04);
}

.rp-similar__premium {
	position: absolute;
	top: .65rem;
	left: .65rem;
	display: inline-flex;
	align-items: center;
	gap: .35rem;
	padding: .3rem .7rem .2rem;
	border-radius: 999px;
	background: var(--rp-mustard);
	color: #fff;
	font-size: .8125rem;
	font-weight: 600;
	line-height: 1.2;
	box-shadow: 0 2px 10px -3px rgba(0, 0, 0, .45);
}

.rp-similar__premium svg {
	width: .95rem;
	height: .8rem;
	margin-top: -.1rem;
}

.rp-similar__name {
	display: block;
	margin-top: .75rem;
	font-family: var(--rp-display);
	font-size: 1.15rem;
	line-height: 1.2;
	letter-spacing: -.01em;
}

.rp-similar__card:hover .rp-similar__name {
	text-decoration: underline;
	text-decoration-thickness: 1.5px;
	text-underline-offset: .15em;
}

@media (min-width: 768px) {
	.rp-similar__arrows {
		display: flex;
	}

	.rp-similar__row {
		gap: 1.5rem;
	}
}

@media (prefers-reduced-motion: reduce) {
	.rp-similar__photo img { transition: none; }
	.rp-similar__card:hover .rp-similar__photo img { transform: none; }
}

/* ---------- Photos full screen (recipe_viewer.js) ----------
 * The main photo and the beauty shots are buttons (.rp-view) that open the viewer at that photo.
 * The main photo carries the apps' "expand" icon at its top right. The viewer follows the web
 * app's (ImageLightbox: a 90% black backdrop, the photo whole, a round × top right, round arrows
 * at the sides, "2 / 5" at the top) with the iPad's fade and swipe; the arrows give way to the
 * swipe below 600px. It's a <dialog> added to <body>, so nothing here is under .rp. */
.rp-view {
	display: block;
	width: 100%;
	padding: 0;
	border: 0;
	background: none;
	color: inherit;
	font: inherit;
}

/* Over Bootstrap's button:not(:disabled) { cursor: pointer } */
.rp .rp-view {
	cursor: zoom-in;
}

.rp-view:focus-visible {
	outline: 3px solid var(--rp-green);
	outline-offset: 3px;
}

.rp-photo__view {
	height: 100%;
}

/* The hero photo clips what's outside it: the ring goes inside */
.rp-photo__view:focus-visible {
	outline-color: #fff;
	outline-offset: -6px;
}

.rp-view__icon {
	position: absolute;
	top: .75rem;
	right: .75rem;
	display: grid;
	place-items: center;
	width: 2rem;
	height: 2rem;
	border-radius: 50%;
	background: rgba(0, 0, 0, .4);
	-webkit-backdrop-filter: blur(4px);
	backdrop-filter: blur(4px);
	color: #fff;
	pointer-events: none;
	transition: background-color .2s;
}

.rp-view__icon svg {
	width: 15px;
	height: 15px;
}

.rp-photo__view:hover .rp-view__icon {
	background: rgba(0, 0, 0, .6);
}

/* The beauty shots: the button takes the photo's place in the columns */
.rp-photos__view {
	margin: 0 0 .75rem;
	border-radius: 16px;
	break-inside: avoid;
}

.rp-photos__view .rp-photos__img {
	margin: 0;
	transition: opacity .2s;
}

.rp-photos__view:hover .rp-photos__img {
	opacity: .92;
}

@media (min-width: 768px) {
	.rp-photos__view {
		margin-bottom: 1.25rem;
		border-radius: 24px;
	}
}

/* As behind the navbar's sheets (on body: site_app.css says why; it keeps the scrollbar's room too).
   From the dialog's own open attribute, so however it closes (×, Esc, ⌘K) the page is free again */
html:has(.rp-viewer[open]) body {
	overflow: hidden;
}

.rp-viewer {
	position: fixed;
	inset: 0;
	width: 100%;
	height: 100%;
	max-width: none;
	max-height: none;
	margin: 0;
	padding: 0;
	border: 0;
	background: rgba(0, 0, 0, .9);
	color: #fff;
	overflow: hidden;
}

.rp-viewer::backdrop {
	background: transparent;
}

.rp-viewer[open] {
	animation: rp-viewer-in .2s ease-out;
}

@keyframes rp-viewer-in {
	from { opacity: 0; }
}

.rp-viewer__stage {
	position: absolute;
	inset: 0;
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 4rem 1rem;
	touch-action: pinch-zoom;   /* sideways drags come to the script, as swipes */
}

.rp-viewer__img {
	display: block;
	width: auto;
	height: auto;
	max-width: 100%;
	max-height: 100%;
	border-radius: 0;   /* pul_website_styles.css rounds every img */
	object-fit: contain;
	-webkit-user-select: none;
	user-select: none;
	-webkit-user-drag: none;
}

.rp-viewer__btn {
	position: absolute;
	z-index: 1;
	display: grid;
	place-items: center;
	padding: 0;
	border: 0;
	border-radius: 50%;
	background: rgba(255, 255, 255, .1);
	color: #fff;
	cursor: pointer;
	transition: background-color .2s;
}

.rp-viewer__btn:hover {
	background: rgba(255, 255, 255, .2);
}

.rp-viewer__btn:focus {
	outline: none;
}

.rp-viewer__btn:focus-visible {
	outline: 2px solid #BEE378;
	outline-offset: 2px;
}

.rp-viewer__close {
	top: 1rem;
	right: 1rem;
	width: 2.5rem;
	height: 2.5rem;
}

.rp-viewer__close svg {
	width: 22px;
	height: 22px;
}

.rp-viewer__arrow {
	top: 50%;
	display: none;
	width: 3rem;
	height: 3rem;
	margin-top: -1.5rem;
}

.rp-viewer__arrow svg {
	width: 28px;
	height: 28px;
}

.rp-viewer__arrow--prev {
	left: .75rem;
}

.rp-viewer__arrow--next {
	right: .75rem;
}

.rp-viewer__count {
	position: absolute;
	top: 1rem;
	left: 50%;
	margin: 0;
	transform: translateX(-50%);
	font-family: var(--rp-sans, 'Hind Vadodara', sans-serif);
	font-size: 13px;
	font-weight: 500;
	line-height: 2.5rem;   /* level with the × */
	color: rgba(255, 255, 255, .85);
	pointer-events: none;
}

.rp-viewer--single .rp-viewer__arrow,
.rp-viewer--single .rp-viewer__count {
	display: none !important;
}

@media (min-width: 600px) {
	.rp-viewer__stage {
		padding: 4.5rem 5rem;
	}

	.rp-viewer__arrow {
		display: grid;
	}
}

@media (prefers-reduced-motion: reduce) {
	.rp-viewer[open] { animation: none; }
	.rp-view__icon,
	.rp-photos__view .rp-photos__img { transition: none; }
}