/**
 * Curatery homepage — the rebrand.
 *
 * front-page.php, built to the mockup's index.html. Eyebrows, scallops,
 * section headings and small links are in components.css; the cards are in
 * good-card.css, collections.css and corners.css.
 */

.cur-home {
	/* Blocksy colors every link through these; inherit instead. */
	--theme-link-initial-color: currentColor;
	--theme-link-hover-color: var(--cur-tomato);
	color: var(--cur-ink);
	font-family: var(--cur-sans);
}

.cur-home :where(a) {
	text-decoration: none;
}

.cur-home :is(h1, h2, h3) {
	color: inherit;
	font-family: var(--cur-serif);
	font-weight: 400;
}

.cur-home :is(ul, ol) {
	margin: 0;
	padding: 0;
	list-style: none;
}

.cur-home p {
	margin: 0 0 1rem;
}

.cur-button {
	display: inline-flex;
	align-items: center;
	gap: 0.7rem;
	min-height: 48px;
	padding: 0.9rem 1.25rem;
	border: 2px solid var(--cur-tomato);
	background: var(--cur-tomato);
	color: #ffffff;
	font: 700 0.76rem/1.2 var(--cur-sans);
	letter-spacing: 0.08em;
	text-transform: uppercase;
}

.cur-home .cur-button:hover,
.cur-home .cur-button:focus-visible {
	border-color: var(--cur-tomato-hover);
	background: var(--cur-tomato-hover);
	color: #ffffff;
}

.cur-home .cur-button--dark {
	border-color: var(--cur-ink);
	background: var(--cur-ink);
}

.cur-home .cur-button--dark:hover,
.cur-home .cur-button--dark:focus-visible {
	border-color: #000000;
	background: #000000;
}

.cur-home .cur-button--mustard {
	border-color: var(--cur-mustard);
	background: var(--cur-mustard);
	color: var(--cur-ink);
}

.cur-home .cur-button--mustard:hover,
.cur-home .cur-button--mustard:focus-visible {
	border-color: #e0ab2a;
	background: #e0ab2a;
	color: var(--cur-ink);
}


/* ════════════════════════════════════════════════════════════
   Hero
   ════════════════════════════════════════════════════════════ */

.cur-hero {
	background: var(--cur-peach);
}

.cur-hero__inner {
	display: grid;
	grid-template-columns: 1.12fr 0.88fr;
	min-height: 520px;
}

/* The picture side is a tile of the newest Goods, so it fills itself in.
   The tiles are laid over the band rather than inside its flow, so the
   pictures fill the hero's height instead of setting it. */
.cur-hero__art {
	position: relative;
	overflow: hidden;
	background: #f7bca9;
}

.cur-hero__tiles {
	position: absolute;
	inset: 0;
	display: grid;
	grid-template-columns: repeat(2, 1fr);
	grid-template-rows: repeat(2, 1fr);
}

.cur-hero__tiles img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
}

/* One picture fills the space rather than leaving a gap. */
.cur-hero__tiles img:only-of-type {
	grid-column: 1 / -1;
	grid-row: 1 / -1;
}

.cur-hero__seal {
	position: absolute;
	right: 2.4rem;
	bottom: 2.2rem;
	display: grid;
	place-items: center;
	width: 100px;
	height: 100px;
	border: 2px solid rgba(255, 255, 255, 0.65);
	border-radius: 50%;
	background: var(--cur-blue);
	color: var(--cur-ink);
	font: 700 0.62rem/1.35 var(--cur-sans);
	letter-spacing: 0.12em;
	text-align: center;
	text-transform: uppercase;
	transform: rotate(8deg);
}

.cur-hero__copy {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	justify-content: center;
	padding: 5.4rem clamp(2rem, 6vw, 7rem);
	background: rgba(255, 248, 238, 0.8);
}

.cur-home .cur-hero__copy h1 {
	margin: 0.5rem 0 1rem;
	font-size: clamp(3.4rem, 5.6vw, 6rem);
	line-height: 0.92;
	letter-spacing: -0.04em;
}

.cur-hero__copy h1 em {
	color: var(--cur-tomato);
}

.cur-hero__lede {
	max-width: 480px;
	font-size: 1.05rem;
}


/* ════════════════════════════════════════════════════════════
   What are you into?
   ════════════════════════════════════════════════════════════ */

.cur-home-interests {
	padding: 4.5rem var(--cur-gutter) 5rem;
	background: var(--cur-paper);
}

.cur-home-interests__inner,
.cur-home-ways__inner,
.cur-home-corners__inner {
	display: grid;
	grid-template-columns: 250px 1fr;
	gap: 3rem;
	align-items: center;
	max-width: var(--cur-max-width);
	margin: 0 auto;
}

.cur-home :is(.cur-home-interests, .cur-home-ways, .cur-home-corners) header h2 {
	margin: 0.45rem 0 0.6rem;
	font-size: 2.5rem;
	line-height: 1.03;
}

.cur-home :is(.cur-home-interests, .cur-home-ways) header p {
	font-size: 0.88rem;
}

.cur-home .cur-home-interests__list {
	display: grid;
	grid-template-columns: repeat(6, 1fr);
	gap: 1.4rem;
	text-align: center;
}

.cur-home-interest {
	display: block;
}

.cur-home-interest__arch {
	display: grid;
	place-items: center;
	height: 128px;
	margin-bottom: 0.7rem;
	overflow: hidden;
	border: 1px solid rgba(36, 27, 22, 0.08);
	border-radius: 64px 64px 8px 8px;
	background: var(--cur-butter);
	transition: transform 0.2s ease;
}

.cur-home-interest__arch img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.cur-home-interest:hover .cur-home-interest__arch {
	transform: translateY(-4px);
}

/* The mockup gives each arch its own color, so an Interest with no picture
   still reads as part of the row. */
.cur-home-interests__list li:nth-child(1) .cur-home-interest__arch { background: var(--cur-lilac); }
.cur-home-interests__list li:nth-child(2) .cur-home-interest__arch { background: var(--cur-green-pale); }
.cur-home-interests__list li:nth-child(3) .cur-home-interest__arch { background: var(--cur-peach); }
.cur-home-interests__list li:nth-child(4) .cur-home-interest__arch { background: #f8d36e; }
.cur-home-interests__list li:nth-child(5) .cur-home-interest__arch { background: #cbd9ba; }
.cur-home-interests__list li:nth-child(6) .cur-home-interest__arch { background: #aac8e5; }

.cur-home-interest b {
	display: block;
	font-size: 0.72rem;
	letter-spacing: 0.12em;
	text-transform: uppercase;
}

.cur-home-interest small {
	display: block;
	margin-top: 0.2rem;
	color: var(--cur-ink-muted);
	font-size: 0.68rem;
}


/* ════════════════════════════════════════════════════════════
   Good things, saved together
   ════════════════════════════════════════════════════════════ */

.cur-home-collections {
	border-top: 12px solid transparent;
	border-image: repeating-linear-gradient(90deg, var(--cur-tomato) 0 70px, var(--cur-stripe-blue) 70px 140px) 12;
}

.cur-home-collections__inner {
	display: grid;
	grid-template-columns: 0.8fr 1.55fr;
}

.cur-home-collections__note {
	position: relative;
	overflow: hidden;
	padding: 4.2rem 6vw;
	background: var(--cur-mustard);
}

/* Tomato on mustard is too faint for a small label. */
.cur-home-collections__note .cur-eyebrow {
	color: var(--cur-ink);
}

/* The scalloped edge where the mustard meets the cards. */
.cur-home-collections__note::after {
	content: "";
	position: absolute;
	top: 0;
	right: -18px;
	width: 36px;
	height: 100%;
	background: radial-gradient(circle at 36px 18px, transparent 18px, var(--cur-mustard) 19px);
	background-size: 36px 38px;
}

.cur-home .cur-home-collections__note h2 {
	max-width: 460px;
	margin: 0.45rem 0 0.8rem;
	font-size: 3.15rem;
	line-height: 0.92;
}

.cur-home-collections__note p {
	max-width: 390px;
	font-size: 0.88rem;
}

.cur-home .cur-home-collections__grid {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: 1.2rem;
	padding: 3.5rem var(--cur-gutter);
	background: var(--cur-cream);
}


/* ════════════════════════════════════════════════════════════
   Three ways in
   ════════════════════════════════════════════════════════════ */

.cur-home-ways {
	padding: 4.8rem var(--cur-gutter);
	background: var(--cur-paper);
}

.cur-home-ways__inner {
	grid-template-columns: 250px repeat(3, 1fr);
	gap: 1.5rem;
	align-items: stretch;
}

.cur-home-ways__inner > header {
	align-self: start;
}

.cur-home-way {
	padding: 0 1.5rem;
	border-left: 1px solid var(--cur-line);
}

.cur-home-way__visual {
	position: relative;
	display: flex;
	align-items: flex-end;
	height: 155px;
	margin-bottom: 1rem;
	padding: 1rem;
	overflow: hidden;
	border-radius: 10px;
	color: #ffffff;
	font: 400 1.8rem/1 var(--cur-serif);
	background-position: center;
	background-size: cover;
}

/* Darkened at the foot so the label reads over any picture. */
.cur-home-way__visual::after {
	content: "";
	position: absolute;
	inset: 0;
	background: linear-gradient(0deg, rgba(24, 17, 13, 0.65), transparent 70%);
}

.cur-home-way__visual > span {
	position: relative;
	z-index: 1;
}

.cur-home-way__visual--corners { background-color: var(--cur-green); }
.cur-home-way__visual--nooks { background-color: var(--cur-blue-deep); }
.cur-home-way__visual--collections { background-color: var(--cur-tomato); }

.cur-home .cur-home-way h3 {
	margin: 0 0 0.4rem;
	font-size: 1.6rem;
	line-height: 1.1;
}

.cur-home-way p {
	font-size: 0.85rem;
}


/* ════════════════════════════════════════════════════════════
   New and noteworthy
   ════════════════════════════════════════════════════════════ */

.cur-home-goods {
	padding: 5rem var(--cur-gutter) 5.5rem;
	background: var(--cur-butter);
}

/* The advert between the goods and the Corners: the same butter as the goods,
   so the Corners' butter scallops still meet butter. */
.cur-home__ad-band {
	padding: 0 var(--cur-gutter);
	background: var(--cur-butter);
}

.cur-home-goods__grid,
.cur-home-picks__grid {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 2.2rem 1.5rem;
}


/* ════════════════════════════════════════════════════════════
   Corners with their own point of view
   ════════════════════════════════════════════════════════════ */

.cur-home-corners {
	position: relative;
	padding: 4.6rem var(--cur-gutter) 4rem;
	background: var(--cur-green);
	color: #ffffff;
	border-bottom: 12px solid transparent;
	border-image: repeating-linear-gradient(90deg, var(--cur-tomato) 0 70px, var(--cur-stripe-blue) 70px 140px) 12;
}

/* That striped edge divides the Corners from whatever comes next. When nothing
   does — no Nook articles written yet, no Club picks open, and an advert slot
   with nothing in it — the footer's scallops hang over the edge instead and the
   stripes show through the gaps between them. */
.cur-home-corners--last {
	border-bottom: 0;
	border-image: none;
}

/* Scallops along the top, showing the butter band above. */
.cur-home-corners::before {
	content: "";
	position: absolute;
	top: 0;
	right: 0;
	left: 0;
	height: 22px;
	background: radial-gradient(circle at 22px 0, var(--cur-butter) 21px, transparent 22px);
	background-size: 44px 22px;
	pointer-events: none;
}

.cur-home-corners__inner {
	grid-template-columns: 300px 1fr;
	gap: 2.5rem;
}

.cur-home-corners .cur-eyebrow,
.cur-home-corners .cur-tiny-link {
	color: var(--cur-butter);
}

.cur-home-corners .cur-tiny-link {
	border-color: currentColor;
}

.cur-home .cur-home-corners header h2 {
	font-size: 3rem;
	line-height: 0.95;
}

.cur-home-corners header p {
	color: #edf3e7;
	font-size: 0.88rem;
}

.cur-home .cur-home-corners__grid {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: 1.2rem;
}


/* ════════════════════════════════════════════════════════════
   Pull up a chair
   ════════════════════════════════════════════════════════════ */

.cur-home-nooks {
	padding: 5rem var(--cur-gutter);
	background: var(--cur-cream);
}

.cur-home-nooks__inner {
	display: grid;
	grid-template-columns: 1.05fr 1fr;
	gap: 3rem;
	align-items: start;
	max-width: var(--cur-max-width);
	margin: 0 auto;
}

.cur-home-nooks__lead {
	position: relative;
	display: flex;
	flex-direction: column;
	justify-content: flex-end;
	min-height: 520px;
	overflow: hidden;
	padding: 3.5rem;
	border-radius: 120px 8px 8px 8px;
	background: var(--cur-blue-deep, #233c61);
	color: #ffffff;
}

.cur-home-nooks__lead-image {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.cur-home-nooks__lead::after {
	content: "";
	position: absolute;
	inset: 0;
	background: linear-gradient(0deg, rgba(22, 33, 48, 0.98), rgba(22, 33, 48, 0.72) 42%, rgba(22, 33, 48, 0.18));
}

.cur-home-nooks__lead-copy {
	position: relative;
	z-index: 1;
}

.cur-home-nooks__lead-copy .cur-eyebrow {
	display: inline-block;
	margin-bottom: 0.8rem;
	padding: 0.38rem 0.62rem;
	border-radius: 3px;
	background: var(--cur-mustard);
	color: var(--cur-ink);
}

.cur-home .cur-home-nooks__lead-copy h2 {
	max-width: 500px;
	margin: 0 0 1.2rem;
	font-size: 3rem;
	line-height: 1;
	text-shadow: 0 2px 18px rgba(0, 0, 0, 0.4);
}

.cur-home .cur-home-nooks__articles h2 {
	margin: 0.45rem 0 1rem;
	font-size: 2.5rem;
	line-height: 1.03;
}

.cur-home .cur-home-articles {
	display: grid;
	gap: 1rem;
	margin-bottom: 1.5rem;
}

.cur-home-article {
	display: grid;
	grid-template-columns: 100px 1fr;
	gap: 1rem;
	align-items: center;
	padding: 1rem 0;
	border-bottom: 1px solid var(--cur-line);
}

.cur-home-article__thumb {
	display: block;
	aspect-ratio: 1 / 1;
	overflow: hidden;
	border-radius: 8px;
	background: var(--cur-butter);
}

.cur-home-article__thumb img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.cur-home-article small {
	color: var(--cur-green);
	font-size: 0.65rem;
	font-weight: 700;
	letter-spacing: 0.06em;
	text-transform: uppercase;
}

.cur-home .cur-home-article h3 {
	margin: 0.2rem 0 0;
	font-size: 1.25rem;
	line-height: 1.1;
	transition: color 0.15s ease;
}

.cur-home-article:hover h3 {
	color: var(--cur-tomato);
}


/* ════════════════════════════════════════════════════════════
   This month for free members
   ════════════════════════════════════════════════════════════ */

.cur-home-picks {
	padding: 5rem var(--cur-gutter) 6rem;
	background: var(--cur-paper);
	border-top: 12px solid transparent;
	border-image: repeating-linear-gradient(90deg, var(--cur-tomato) 0 70px, var(--cur-stripe-blue) 70px 140px) 12;
}

.cur-home-picks .cur-section-head {
	align-items: start;
}

.cur-home .cur-home-picks h2 {
	max-width: 700px;
	margin: 0.4rem 0 0.7rem;
	color: var(--cur-tomato);
	font-size: clamp(2.8rem, 5vw, 4.4rem);
	line-height: 0.9;
}

.cur-home-picks header p {
	max-width: 620px;
	margin: 0;
}

.cur-home-picks__count {
	/* A column rather than a grid: two grid rows spread the number and the
	   label to opposite ends of the circle. */
	display: flex;
	flex: 0 0 130px;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	gap: 0.1rem;
	width: 130px;
	height: 130px;
	border: 3px solid var(--cur-paper);
	border-radius: 50%;
	background: var(--cur-tomato);
	color: #ffffff;
	font: 700 0.68rem/1.15 var(--cur-sans);
	text-align: center;
	text-transform: uppercase;
	transform: rotate(7deg);
}

.cur-home-picks__count strong {
	font: 400 3.1rem/1 var(--cur-serif);
}

/* The gap after the last letter would otherwise push the word off centre. */
.cur-home-picks__count span {
	letter-spacing: 0.1em;
	text-indent: 0.1em;
}


/* ════════════════════════════════════════════════════════════
   Narrower screens
   ════════════════════════════════════════════════════════════ */

@media (max-width: 1100px) {
	/* minmax(0, 1fr): the one column never grows past the screen to fit a wide
	   row inside it, which cut off the section headings on phones. */
	.cur-hero__inner,
	.cur-home-interests__inner,
	.cur-home-corners__inner,
	.cur-home-nooks__inner,
	.cur-home-collections__inner {
		grid-template-columns: minmax(0, 1fr);
	}

	.cur-hero__art {
		min-height: 380px;
	}

	.cur-hero__copy {
		padding: 3.5rem 7vw;
	}

	.cur-home-collections__note::after {
		display: none;
	}

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

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

	.cur-home-ways__inner > header {
		grid-column: 1 / -1;
	}

	.cur-home-way:first-of-type {
		border-left: 0;
		padding-left: 0;
	}

	.cur-home-nooks__lead {
		border-radius: 90px 8px 8px 8px;
	}
}

@media (max-width: 760px) {
	.cur-hero__art {
		min-height: 290px;
	}

	.cur-hero__copy {
		padding: 3rem 6vw;
	}

	.cur-hero__seal {
		right: 1rem;
		bottom: 1rem;
		width: 78px;
		height: 78px;
	}

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

	.cur-home .cur-home-collections__grid,
	.cur-home-ways__inner,
	.cur-home .cur-home-corners__grid,
	.cur-home-goods__grid,
	.cur-home-picks__grid {
		grid-template-columns: minmax(0, 1fr);
	}

	.cur-home-way {
		padding: 0;
		border-left: 0;
	}

	.cur-home-picks__count {
		width: 92px;
		height: 92px;
		flex-basis: 92px;
	}

	.cur-home-picks__count strong {
		font-size: 2.5rem;
	}

	.cur-home-nooks__lead {
		min-height: 320px;
		padding: 2rem;
	}
}