/*
 * The home page in the new design (main/templates/main.html and home/): light bands on the
 * index pages' canvas, mobile first, scoped to .hm. The cards, pills, search pill and "more"
 * button come from ix_base.css (.ix-kit, with its --ix-* tokens); this file lays out the
 * sections around them.
 */

body:has(> .hm) {
	background: #EEEFEB;
}

.hm {
	--hm-band: #F9FBF8;

	padding-bottom: clamp(2.5rem, 6vw, 4.5rem);
	background: var(--ix-canvas);
}

/* ---------- Hello: forest green, who we are, the search, ways in, one photo ----------
 * The app section's and the footer's dark (#1A2116) with the landing page's glows, so the page
 * opens and ends dark. Its bottom is the footer's dome turned over. Text: cream 16:1, sage
 * 10.9:1, lime 11.3:1 on the green. */

/* The band, its glows, colours and curve are the shared forest band's (.ix-forest, ix_base.css) */
.hm-hello {
	padding: clamp(1.75rem, 5vw, 3.75rem) 0 clamp(3rem, 7vw, 5rem);
}

.hm-hello__grid {
	display: grid;
	grid-template-columns: minmax(0, 1fr);   /* not the pills' full width */
	gap: 1.5rem;
}

.hm .hm-title {
	margin: 0 0 .9rem;
	color: var(--ix-cream);
	font-family: var(--ix-display);
	font-size: clamp(2.4rem, 9vw, 4.25rem);
	font-weight: normal;
	line-height: 1;
	letter-spacing: -.02em;
	text-wrap: balance;
}

.hm-title__lime {
	color: var(--ix-lime);
}

.hm .hm-hi {
	display: flex;
	align-items: flex-start;
	gap: .75rem;
	max-width: 34rem;
	margin: 0 0 1.25rem;
	color: var(--ix-sage);
	font-size: 1.0625rem;
	line-height: 1.45;
}

.hm-hi__face {
	flex: none;
	width: 40px;
	height: 40px;
	margin-top: .1rem;
	border-radius: 50%;
	box-shadow: 0 0 0 2px var(--ix-forest), 0 0 0 4px var(--ix-lime);
}

/* The search pill, white on the green: no border, lime when typing */
.hm-search {
	max-width: 34rem;
	margin: 0 0 .9rem;
}

.hm-hello .ix-search__input {
	border-color: transparent;
	box-shadow: 0 10px 30px rgba(0, 0, 0, .28);
}

.hm-hello .ix-search__input:focus {
	border-color: var(--ix-lime);
	box-shadow: 0 0 0 4px rgba(190, 227, 120, .3), 0 10px 30px rgba(0, 0, 0, .28);
}

/* Glass pills, lime under the finger. Phones: edge to edge, to swipe */
.hm-pills {
	margin-inline: calc(-1 * var(--ix-gutter));
	padding-inline: var(--ix-gutter);
}

.hm-hello .ix-pill {
	border-color: rgba(248, 255, 246, .16);
	background: rgba(248, 255, 246, .08);
	color: var(--ix-cream);
}

.hm-hello .ix-pill:hover {
	border-color: var(--ix-lime);
	background: var(--ix-lime);
	color: var(--ix-ink);
}

/* The photo, with a lime glow, drifting slowly; the glass cards sit on its edges */
.hm-hello__media {
	position: relative;
	margin-bottom: 1.25rem;   /* the favourite card hangs below on phones */
}

.hm-hello__photo {
	margin: 0;
	overflow: hidden;
	aspect-ratio: 16 / 9;
	border-radius: 22px;
	background: #26301F;
	box-shadow: 0 24px 60px -20px rgba(0, 0, 0, .6), 0 0 0 1px rgba(248, 255, 246, .08);
}

.hm-hello__photo img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
	object-position: 55% 50%;
	animation: hm-drift 26s ease-in-out infinite alternate;
}

@keyframes hm-drift {
	from { transform: scale(1.02); }
	to { transform: scale(1.09) translate(-1.5%, -1%); }
}

/* Live glass cards: the community's favourite and the newest recipe */
.hm-chip {
	position: absolute;
	z-index: 1;
	display: flex;
	align-items: center;
	gap: .65rem;
	max-width: min(19rem, 86%);
	padding: .5rem .85rem .5rem .5rem;
	border: 1px solid rgba(248, 255, 246, .14);
	border-radius: 18px;
	background: rgba(26, 33, 22, .72);
	-webkit-backdrop-filter: blur(14px);
	backdrop-filter: blur(14px);
	box-shadow: 0 12px 30px rgba(0, 0, 0, .35);
	color: var(--ix-cream);
	text-decoration: none;
	animation: hm-rise .7s cubic-bezier(.2, .8, .2, 1) .35s backwards;   /* not both: hover may move it after */
	transition: transform .3s cubic-bezier(.2, .8, .2, 1), border-color .2s;
}

.hm .hm-chip:hover {
	border-color: rgba(190, 227, 120, .6);
	color: var(--ix-cream);
	text-decoration: none;
	transform: translateY(-2px);
}

.hm-chip--fav {
	bottom: -1.25rem;
	left: .75rem;
	display: grid;
	grid-template-columns: minmax(0, 1fr);
	padding: 0;
}

/* The favourites take turns (home.js): stacked in one cell, so the card keeps the width of the
   longest and never jumps; each is a whole-card link, cross-fading in */
.hm-chip__item {
	grid-area: 1 / 1;
	display: flex;
	align-items: center;
	gap: .65rem;
	min-width: 0;
	padding: .5rem .85rem .5rem .5rem;
	border-radius: inherit;
	color: inherit;
	text-decoration: none;
	opacity: 0;
	transition: opacity .6s ease;
}

.hm-chip__item.is-current {
	opacity: 1;
}

.hm .hm-chip__item:hover,
.hm .hm-chip__item:focus {
	color: inherit;
	text-decoration: none;
}

.hm-chip__item:focus-visible {
	outline: 2px solid var(--ix-lime);
	outline-offset: 2px;
}

.hm-chip--new {
	top: .9rem;
	right: .9rem;
	display: none;
	animation-delay: .55s;
}

.hm-chip__img {
	flex: none;
	width: 44px;
	height: 44px;
	border-radius: 12px;
	object-fit: cover;
	background: #26301F;
}

.hm-chip__text {
	display: flex;
	flex-direction: column;
	min-width: 0;
	line-height: 1.2;
}

.hm-chip__label {
	color: var(--ix-lime);
	font-size: .6875rem;
	font-weight: 700;
	letter-spacing: .08em;
	text-transform: uppercase;
}

.hm-chip__name {
	overflow: hidden;
	font-family: var(--ix-display);
	font-size: 1rem;
	white-space: nowrap;
	text-overflow: ellipsis;
}

.hm-chip__meta {
	color: var(--ix-sage);
	font-size: .8125rem;
	font-weight: 600;
}

.hm-chip__star {
	color: #FF912C;
}

@keyframes hm-rise {
	from { opacity: 0; transform: translateY(10px); }
	to { opacity: 1; transform: none; }
}

@media (min-width: 600px) {
	.hm-chip--new {
		display: flex;
	}
}

@media (min-width: 768px) {
	.hm-pills {
		margin-inline: 0;
		padding-inline: 0;
	}
}

/* Tablets: full width but flatter, so the newest recipes still show on the first screen */
@media (min-width: 600px) and (max-width: 899px) {
	.hm-hello__photo {
		aspect-ratio: 5 / 2;
	}
}

@media (min-width: 900px) {
	.hm-hello__grid {
		grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
		align-items: center;
		gap: clamp(2.5rem, 5vw, 5rem);
	}

	.hm-hello__media {
		margin-bottom: 0;
	}

	.hm-hello__photo {
		aspect-ratio: 4 / 3;
		max-height: 520px;
		border-radius: 28px;
	}

	.hm-chip--fav {
		bottom: 1.5rem;
		left: -2rem;
	}

	.hm-chip--new {
		top: 1.5rem;
		right: -1.25rem;
	}
}

@media (prefers-reduced-motion: reduce) {
	.hm-hello__photo img,
	.hm-chip {
		animation: none;
	}

	.hm .hm-chip:hover {
		transform: none;
	}
}

/* ---------- Sections and bands ---------- */

.hm-section {
	padding-top: clamp(2.25rem, 5vw, 3.75rem);
}

.hm-band {
	margin-top: clamp(2.25rem, 5vw, 3.75rem);
	padding-block: clamp(2.25rem, 5vw, 3.75rem);
	background: var(--hm-band);
}

/* When the page ends with a band (the videos and articles), it runs into the footer: no strip of
   canvas between them, and the footer's curved top (36px over the page, site_app.css) shows the
   band in its corners. The extra 36px keeps the band's content clear of that overlap. */
.hm:has(> .hm-band:last-child) {
	padding-bottom: 0;
}

.hm > .hm-band:last-child {
	padding-bottom: calc(clamp(2.25rem, 5vw, 3.75rem) + 36px);
}

.hm-head {
	display: flex;
	flex-wrap: wrap;
	align-items: baseline;
	justify-content: space-between;
	gap: .3rem 1rem;
	margin-bottom: 1rem;
}

.hm .hm-h2 {
	margin: 0;
	color: var(--ix-ink);
	font-family: var(--ix-display);
	font-size: clamp(1.75rem, 5vw, 2.5rem);
	font-weight: normal;
	line-height: 1.1;
	letter-spacing: -.01em;
}

.hm .hm-lede {
	width: 100%;
	margin: 0;
	color: var(--ix-text);
}

.hm .hm-eyebrow {
	margin: 0 0 .45rem;
	color: var(--ix-green);
	font-size: .8125rem;
	font-weight: 700;
	letter-spacing: .08em;
	text-transform: uppercase;
}

.hm-more {
	margin: 1.25rem 0 0;
	text-align: center;
}

.hm-cq {
	container-type: inline-size;
}

/* Rows of cards: one to swipe below 1,000px with the next card half in view; from there, the
   index grids (4 recipes, 3 videos or articles a row). */
@media (max-width: 999px) {
	.hm .hm-scroll {
		grid-template-columns: none;
		grid-auto-flow: column;
		grid-auto-columns: 42%;
		margin-inline: calc(-1 * var(--ix-gutter));
		padding: .25rem var(--ix-gutter) .75rem;
		overflow-x: auto;
		scroll-padding-inline: var(--ix-gutter);
		scroll-snap-type: x mandatory;
		scrollbar-width: none;
	}

	.hm .hm-scroll::-webkit-scrollbar {
		display: none;
	}

	.hm .hm-scroll > * {
		scroll-snap-align: start;
	}

	.hm .hm-scroll--wide {
		grid-auto-columns: 82%;
	}
}

@media (min-width: 600px) and (max-width: 999px) {
	.hm .hm-scroll {
		grid-auto-columns: 30%;
	}

	.hm .hm-scroll--wide {
		grid-auto-columns: 46%;
	}
}

/* ---------- New here? ---------- */

.hm-new {
	display: grid;
	grid-template-columns: minmax(0, 1fr);
	gap: 1.5rem;
}

/* Sadia making fresh rolls, from the cookbook shoot (a 4:5 portrait): square on phones (her face
   to her hands), a band of her face on tablets, and the whole portrait beside the text from 900px */
.hm-new__photo {
	margin: 0;
	overflow: hidden;
	aspect-ratio: 1;
	border-radius: 20px;
	background: var(--ix-surface);
}

.hm-new__photo img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
	object-position: 50% 35%;
}

/* Her credentials, as pills (from the first screen): a pale green tint on the band, a one-colour
   icon each, the New York Times "T" in ink as the paper prints it */
.hm-creds {
	display: flex;
	flex-wrap: wrap;
	gap: .5rem;
	margin: 1.35rem 0 0;
	padding: 0;
	list-style: none;
}

.hm-cred {
	display: inline-flex;
	align-items: center;
	gap: .5rem;
	min-height: 2.25rem;
	padding: .32rem .95rem .22rem .7rem;
	border: 1px solid rgba(80, 113, 55, .2);
	border-radius: 999px;
	background: rgba(80, 113, 55, .08);
	color: var(--ix-ink);
	font-size: .9375rem;
	font-weight: 600;
	line-height: 1.2;
	text-decoration: none;
	transition: background-color .2s, border-color .2s;
}

.hm a.hm-cred:hover {
	border-color: rgba(80, 113, 55, .5);
	background: rgba(80, 113, 55, .14);
	color: var(--ix-ink);
	text-decoration: none;
}

.hm a.hm-cred:focus-visible {
	outline: 2px solid var(--ix-green);
	outline-offset: 2px;
}

.hm-cred__icon {
	flex: none;
	width: 1.1rem;
	height: 1.1rem;
	margin-top: -.1rem;
	color: var(--ix-green);
}

.hm-cred__icon--nyt {
	color: var(--ix-ink);
}

.hm .hm-new__text p:not(.hm-eyebrow) {
	max-width: 36rem;
	margin: .8rem 0 0;
	color: var(--ix-text);
	font-size: 1.0625rem;
	line-height: 1.55;
}

/* Three ways to start, all forest green with the lime button, each with its own picture: the
   real guide tilted with a "Free" sticker, the newest Nutrition article's photo edge to edge, and
   a taped snapshot of Sadia and Robin with a handwritten caption. One row to swipe below 900px;
   the padding leaves room for the tilted pictures and the shadows. Text: cream 16:1, sage 10.9:1
   on the green. */
.hm-start {
	display: grid;
	grid-auto-columns: 80%;
	grid-auto-flow: column;
	gap: .9rem;
	margin: .25rem calc(-1 * var(--ix-gutter)) 0;
	padding: .5rem var(--ix-gutter) 1rem;
	overflow-x: auto;
	scroll-padding-inline: var(--ix-gutter);
	scroll-snap-type: x mandatory;
	scrollbar-width: none;
	list-style: none;
}

.hm-start::-webkit-scrollbar {
	display: none;
}

.hm-start > li {
	scroll-snap-align: start;
}

.hm .hm-start__card {
	position: relative;
	display: flex;
	flex-direction: column;
	height: 100%;
	overflow: hidden;
	padding: 1rem 1.2rem 1.25rem;
	border-radius: 22px;
	background-color: #1A2116;
	background-image: radial-gradient(70% 55% at 50% 30%, rgba(114, 160, 106, .2), transparent 70%);
	background-repeat: no-repeat;
	color: #F8FFF6;
	text-decoration: none;
	transition: transform .35s var(--ix-ease), box-shadow .35s var(--ix-ease);
}

.hm .hm-start__card:hover {
	color: #F8FFF6;
	text-decoration: none;
	box-shadow: 0 16px 32px -14px rgba(26, 33, 22, .55);
	transform: translateY(-3px);
}

.hm .hm-start__card:focus-visible {
	outline-color: var(--ix-lime);
}

.hm-start__art {
	position: relative;
	display: flex;
	align-items: center;
	justify-content: center;
	height: 11rem;
	margin-bottom: 1.1rem;
}

.hm-start__title {
	font-family: var(--ix-display);
	font-size: 1.45rem;
	line-height: 1.1;
}

.hm-start__text {
	margin: .35rem 0 1.1rem;
	color: #C4D7C1;
	font-size: .9375rem;
	line-height: 1.45;
}

/* The lime button, as in the app section and the cookbook */
.hm-start__go {
	align-self: flex-start;
	margin-top: auto;
	padding: .55rem 1.15rem .45rem;
	border-radius: 999px;
	background: var(--ix-lime);
	color: var(--ix-ink);
	font-size: .9375rem;
	font-weight: 700;
	transition: box-shadow .3s var(--ix-ease);
}

.hm-start__card:hover .hm-start__go {
	box-shadow: 0 0 0 4px rgba(190, 227, 120, .22), 0 0 18px 3px rgba(190, 227, 120, .25);
}

/* The guide: the booklet tilted, a gold "Free" badge */
.hm-start__cover {
	width: auto;
	height: 100%;
	border-radius: 5px;
	box-shadow: 0 18px 28px -10px rgba(0, 0, 0, .65), 0 2px 5px rgba(0, 0, 0, .3);
	transform: rotate(-5deg);
	transition: transform .45s var(--ix-ease);
}

.hm-start__card--guide:hover .hm-start__cover {
	transform: rotate(-2deg) translateY(-4px) scale(1.03);
}

/* "Free": the gold badge (site_app.css .pul-free), by the booklet's top corner */
.hm-start__sticker {
	top: .25rem;
	left: calc(50% + 2.25rem);
}

/* Learning: the newest Nutrition article's photo edge to edge */
.hm .hm-start__card--learn {
	background-image: none;
}

.hm-start__card--learn .hm-start__art {
	height: 12rem;
	margin: -1rem -1.2rem 1.1rem;
	overflow: hidden;
	background: #26301F;
}

.hm-start__photo {
	width: 100%;
	height: 100%;
	object-fit: cover;
	transition: transform .6s var(--ix-ease);
}

.hm-start__card--learn:hover .hm-start__photo {
	transform: scale(1.05);
}

/* Our story: a taped snapshot with a handwritten caption */
.hm-start__snap {
	position: relative;
	display: block;
	padding: .5rem .5rem 2rem;
	border-radius: 3px;
	background: #F8FFF6;
	box-shadow: 0 16px 28px -12px rgba(0, 0, 0, .6);
	transform: rotate(3deg);
	transition: transform .45s var(--ix-ease);
}

.hm-start__snap::before {
	content: '';
	position: absolute;
	z-index: 1;
	top: -.55rem;
	left: 50%;
	width: 4.5rem;
	height: 1.15rem;
	background: rgba(190, 227, 120, .8);
	transform: translateX(-50%) rotate(-4deg);
}

.hm-start__snap img {
	display: block;
	width: auto;
	height: 7.75rem;   /* by height, so the tilted snapshot and its tape fit the 11rem art box */
	aspect-ratio: 16 / 10;
	object-fit: cover;
	border-radius: 2px;
}

.hm-start__caption {
	position: absolute;
	right: 0;
	bottom: .2rem;
	left: 0;
	color: #3D4A3A;
	font-family: 'Caveat', cursive;
	font-size: 1.35rem;
	text-align: center;
}

.hm-start__card--story:hover .hm-start__snap {
	transform: rotate(0) translateY(-3px);
}

@media (min-width: 600px) {
	.hm-start {
		grid-auto-columns: 46%;
	}

	.hm-new__photo {
		aspect-ratio: 16 / 10;
	}

	.hm-new__photo img {
		object-position: 50% 22%;
	}
}

@media (min-width: 900px) {
	.hm-new__photo {
		aspect-ratio: 4 / 5;
	}

	.hm-new__photo img {
		object-position: 50% 50%;
	}

	.hm-new {
		grid-template-columns: minmax(0, 4fr) minmax(0, 6fr);
		align-items: center;
		gap: 2rem clamp(2rem, 5vw, 4.5rem);
	}

	.hm-start {
		grid-column: 1 / -1;
		grid-auto-flow: row;
		grid-template-columns: repeat(3, minmax(0, 1fr));
		gap: 1.25rem;
		margin-inline: 0;
		padding-inline: 0;
		overflow: visible;
	}
}

/* The light cards (home_page.START_CARDS = 'light'; 'forest' is the dark cards above, as they
   were): pale sage on the band, ink titles, the band's body text, and the green button (lime
   would hardly show on them). The pictures keep their tilt, sticker and tape, with shadows made
   for a light ground. Text: ink 13.6:1, body 7.4:1 on the sage; the button's white 5.6:1. The
   card is close to the band (1.1:1): its hairline edge sets it apart. */
.hm .hm-start--light .hm-start__card {
	border: 1px solid rgba(26, 37, 24, .07);
	background-color: #E9EFE5;
	background-image: radial-gradient(70% 55% at 50% 30%, rgba(80, 113, 55, .16), transparent 70%);   /* the green of the button, not lime */
	color: var(--ix-ink);
}

.hm .hm-start--light .hm-start__card:hover {
	color: var(--ix-ink);
	box-shadow: 0 16px 30px -16px rgba(26, 37, 24, .32);
}

.hm .hm-start--light .hm-start__card:focus-visible {
	outline-color: var(--ix-green);
}

.hm-start--light .hm-start__text {
	color: var(--ix-text);
}

.hm-start--light .hm-start__go {
	background: var(--ix-green);
	color: #fff;
}

.hm-start--light .hm-start__card:hover .hm-start__go {
	box-shadow: 0 0 0 4px rgba(80, 113, 55, .16);
}

.hm-start--light .hm-start__cover {
	box-shadow: 0 16px 24px -12px rgba(26, 37, 24, .45), 0 2px 4px rgba(26, 37, 24, .18);
}

.hm-start--light .hm-start__sticker {
	box-shadow: 0 6px 12px rgba(26, 37, 24, .18);
}

.hm .hm-start--light .hm-start__card--learn {
	background-image: none;
}

.hm-start--light .hm-start__card--learn .hm-start__art {
	background: var(--ix-surface);
}

.hm-start--light .hm-start__snap {
	box-shadow: 0 14px 24px -12px rgba(26, 37, 24, .4), 0 1px 3px rgba(26, 37, 24, .12);
}

/* ---------- Ways in by need ---------- */

.hm-tiles {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: .75rem;
	margin: 0;
	padding: 0;
	list-style: none;
}

.hm .hm-tile {
	position: relative;
	display: block;
	overflow: hidden;
	aspect-ratio: 1;
	border-radius: 16px;
	background: var(--ix-green-dark);
	color: #fff;
	text-decoration: none;
}

.hm .hm-tile:hover {
	color: #fff;
	text-decoration: none;
}

.hm-tile__img {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
	transition: transform .5s var(--ix-ease);
}

.hm-tile:hover .hm-tile__img {
	transform: scale(1.04);
}

/* A dark green wash up from the bottom, only as high as the label needs: clear above the middle,
   a muted green behind the label, deepest at the edge, so the white text keeps its contrast */
.hm-tile::after {
	content: '';
	position: absolute;
	inset: 0;
	background: linear-gradient(rgba(36, 54, 28, 0) 50%, rgba(36, 54, 28, .5) 74%, rgba(24, 36, 19, .88) 100%);
}

/* Phones: the tiles are square and a long label takes two lines from about half way, so the
   wash starts higher there */
@media (max-width: 767.98px) {
	.hm-tile::after {
		background: linear-gradient(rgba(36, 54, 28, 0) 30%, rgba(36, 54, 28, .5) 58%, rgba(24, 36, 19, .88) 100%);
	}
}

.hm-tile__text {
	position: absolute;
	z-index: 1;
	right: 0;
	bottom: 0;
	left: 0;
	display: flex;
	flex-direction: column;
	gap: .15rem;
	padding: .85rem .95rem;
}

.hm-tile__label {
	font-family: var(--ix-display);
	font-size: 1.2rem;
	line-height: 1.1;
}

.hm-tile__count {
	font-size: .8125rem;
	font-weight: 600;
	opacity: .88;
}

@media (min-width: 768px) {
	.hm-tiles {
		grid-template-columns: repeat(4, minmax(0, 1fr));
		gap: 1rem;
	}

	.hm .hm-tile {
		aspect-ratio: 4 / 3;
	}

	.hm-tile__label {
		font-size: 1.35rem;
	}
}

/* ---------- The app (home/_app.html) ----------
 * Compact: the landing's dark band, the landing's tablet and phone stepping through the app's
 * screens (_pair.html) and the closing list with its lime checks. Phones: the devices first,
 * both whole; the tablet beside the phone keeps them wide rather than tall. From 768px: the
 * phone alone on the left, whole, the text beside it. */

.hm .hm-app {
	margin-top: clamp(2.5rem, 6vw, 4rem);
	background: transparent;
}

/* The band after it (the videos and articles) sits flush, without a strip of canvas between */
.hm-app + .hm-band {
	margin-top: 0;
}

.hm-app__band {
	padding-block: clamp(2.25rem, 7vw, 3.75rem);
}

.hm-app__grid {
	display: grid;
	grid-template-columns: minmax(0, 1fr);
	gap: 1.75rem;
}

.hm-app__media {
	display: flex;
	justify-content: center;
}

/* The pair, without the landing's glow and captions: the pause button on its top right */
.hm-app .hm-app__pair {
	width: min(100%, 24rem);
	margin: 0;
}

.hm-app__pair > .al-toggle {
	position: absolute;
	z-index: 2;
	top: 0;
	right: 0;
}

.hm-app .al-eyebrow {
	margin: 0 0 .75rem;
}

.app-landing.hm-app .al-h {
	margin-bottom: 1.1rem;
	font-size: clamp(2rem, 4vw, 3rem);
}

.hm-app .al-checklist {
	gap: .55rem;
	margin: 0 0 1.5rem;
}

.hm-app .al-checklist li {
	font-size: 1rem;
}

.hm-app__cta {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: .6rem 1.1rem;
}

.hm-app__cta .al-small {
	margin: 0;
}

@media (min-width: 768px) {
	.hm-app__grid {
		grid-template-columns: auto minmax(0, 1fr);
		align-items: center;
		gap: clamp(2.5rem, 6vw, 5.5rem);
		max-width: 62rem;
	}

	/* The phone alone, as Robin chose for the wider screens */
	.hm-app .hm-app__pair {
		width: auto;
	}

	.hm-app__pair .al-tablet {
		display: none;
	}

	.hm-app__pair .al-pair__devices {
		padding: 0;
	}

	.hm-app__pair .al-phone--pair {
		--al-pw: 13.5rem;
		margin: 0;
	}

	.hm-app__pair > .al-toggle {
		top: .25rem;
		right: -2.75rem;
	}

	.hm-app .al-checklist li {
		font-size: 1.0625rem;
	}
}

/* ---------- The newest videos and articles ----------
 * Two rows, each with its own heading (home/_watch.html), on the page's canvas rather than the
 * lighter band, still running into the footer. */

.hm .hm-band--canvas {
	background: var(--ix-canvas);
}

.hm-row-next {
	margin-top: clamp(2.25rem, 5vw, 3.25rem);
}

/* "See all" in a row's heading: a pale green pill with a chevron that nudges on hover */
.hm .hm-all {
	display: inline-flex;
	align-items: center;
	gap: .3rem;
	padding: .4rem .7rem .32rem .95rem;
	border-radius: 999px;
	background: rgba(80, 113, 55, .1);
	color: var(--ix-green-dark);
	font-size: .9375rem;
	font-weight: 700;
	line-height: 1.2;
	text-decoration: none;
	white-space: nowrap;
	transition: background-color .2s;
}

.hm .hm-all:hover {
	background: rgba(80, 113, 55, .18);
	color: var(--ix-green-dark);
	text-decoration: none;
}

.hm .hm-all:focus-visible {
	outline: 2px solid var(--ix-green);
	outline-offset: 2px;
}

.hm-all svg {
	flex: none;
	width: 1rem;
	height: 1rem;
	margin-top: -.08rem;
	fill: none;
	stroke: currentColor;
	stroke-width: 2;
	stroke-linecap: round;
	stroke-linejoin: round;
	transition: transform .2s var(--ix-ease);
}

.hm-all:hover svg {
	transform: translateX(3px);
}

@media (prefers-reduced-motion: reduce) {
	.hm-all:hover svg {
		transform: none;
	}
}

/* ---------- The cookbook (after the need tiles) ----------
 * Forest green, like the app section and the hero, so the products both get a dark band: the
 * 3D cover in front of two photos from the book, framed and fanned like the "New here?"
 * snapshot, and the cookbook page's New York Times Bestseller seal (nyt_seal.css). Text: cream
 * 16:1, sage 10.9:1, lime 11.3:1 on the green. */

.hm-cook {
	margin-top: clamp(2.25rem, 5vw, 3.75rem);
	padding-block: clamp(2.5rem, 6vw, 4.5rem);
	background-color: #1A2116;
	background-image:
		radial-gradient(60% 70% at 22% 40%, rgba(114, 160, 106, .24), transparent 65%),
		radial-gradient(50% 60% at 92% 100%, rgba(190, 227, 120, .1), transparent 70%);
	background-repeat: no-repeat;
	color: #F8FFF6;
}

.hm-cook__grid {
	display: grid;
	grid-template-columns: minmax(0, 1fr);
	align-items: center;
	gap: 1.75rem;
}

.hm-cook__art {
	position: relative;
	width: min(100%, 22rem);
	margin-inline: auto;
}

.hm-cook__pics {
	position: relative;
	display: block;
	height: 17rem;
}

.hm-cook__photo {
	position: absolute;
	top: 6%;
	width: 34%;
	height: auto;
	border: 6px solid #F8FFF6;
	border-radius: 6px;
	box-shadow: 0 16px 30px -12px rgba(0, 0, 0, .6);
	transition: transform .5s var(--ix-ease);
}

.hm-cook__photo--left {
	left: 3%;
	transform: rotate(-9deg);
}

.hm-cook__photo--right {
	right: 3%;
	transform: rotate(8deg);
}

.hm-cook__book {
	position: absolute;
	bottom: 0;
	left: 50%;
	width: 52%;
	transform: translateX(-50%);
	transition: transform .5s var(--ix-ease);
}

.hm-cook__cover {
	display: block;
	width: 100%;
	height: auto;
	filter: drop-shadow(0 22px 26px rgba(0, 0, 0, .55));
}

/* The seal below the cover's title, half over its right edge, as on the cookbook page (sized by
   font-size: 10.5em across) */
.hm-cook .hm-cook__seal {
	top: 24%;
	right: -22%;
	font-size: 7.5px;
}

.hm-cook__pics:hover .hm-cook__photo--left {
	transform: rotate(-13deg) translateX(-6px);
}

.hm-cook__pics:hover .hm-cook__photo--right {
	transform: rotate(12deg) translateX(6px);
}

.hm-cook__pics:hover .hm-cook__book {
	transform: translateX(-50%) translateY(-6px);
}

.hm .hm-cook .hm-eyebrow {
	color: var(--ix-lime);
}

.hm .hm-cook__title {
	color: #F8FFF6;
	font-size: clamp(2.25rem, 6vw, 3.25rem);
}

.hm .hm-cook__lede {
	max-width: 34rem;
	margin: .75rem 0 0;
	color: #C4D7C1;
	font-size: 1.0625rem;
	line-height: 1.55;
}

.hm .hm-cook__go {
	display: inline-flex;
	margin-top: 1.4rem;
	padding: .7rem 1.5rem .6rem;
	border-radius: 999px;
	background: var(--ix-lime);   /* the app section's lime button */
	color: var(--ix-ink);
	font-weight: 700;
	text-decoration: none;
	transition: background-color .2s, box-shadow .3s var(--ix-ease);
}

.hm .hm-cook__go:hover {
	background: var(--ix-lime);
	color: var(--ix-ink);
	text-decoration: none;
	box-shadow: 0 0 0 5px rgba(190, 227, 120, .25), 0 0 22px 4px rgba(190, 227, 120, .3);
}

.hm-cook :focus-visible {
	outline-color: var(--ix-lime);
}

@media (min-width: 900px) {
	.hm-cook__grid {
		grid-template-columns: minmax(0, 5fr) minmax(0, 6fr);
		gap: clamp(2.5rem, 5vw, 5rem);
	}

	.hm-cook__art {
		width: 100%;
		max-width: 30rem;
	}

	.hm-cook__pics {
		height: 24rem;
	}

	.hm-cook .hm-cook__seal {
		font-size: 8.5px;
	}
}

@media (prefers-reduced-motion: reduce) {
	.hm-tile__img,
	.hm-cook__photo,
	.hm-cook__book,
	.hm .hm-start__card,
	.hm-start__cover,
	.hm-start__photo,
	.hm-start__snap {
		transition: none;
	}

	.hm-tile:hover .hm-tile__img,
	.hm .hm-start__card:hover,
	.hm-start__card--learn:hover .hm-start__photo {
		transform: none;
	}
}