/**
 * Curatery Nooks pages — the rebrand.
 *
 * nook-hub.php (every Nook) is built to the mockup's nooks.html and
 * editorial.css; nook-landing.php (one Nook) to nook-studio.html. Eyebrows,
 * breadcrumbs, section headings, chips and pagination are in components.css.
 */

.cur-nooks {
	/* 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-nooks :where(a) {
	text-decoration: none;
}

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

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

/* Buttons, shared by both Nook pages. */
.cur-nook__button {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 0.5rem;
	min-height: 48px;
	padding: 0.85rem 1.2rem;
	border: 2px solid var(--cur-tomato);
	border-radius: 0;
	background: var(--cur-tomato);
	color: #ffffff;
	font: 700 0.74rem/1.2 var(--cur-sans);
	letter-spacing: 0.08em;
	text-transform: uppercase;
	cursor: pointer;
}

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

.cur-nooks .cur-nook__button--outline {
	border-color: var(--cur-ink);
	background: transparent;
	color: var(--cur-ink);
}

.cur-nooks .cur-nook__button--outline:hover,
.cur-nooks .cur-nook__button--outline:focus-visible,
.cur-nooks .cur-nook__button--outline.is-following {
	border-color: var(--cur-ink);
	background: var(--cur-ink);
	color: #ffffff;
}

.cur-nook__button:focus-visible {
	outline: 2px solid var(--cur-ink);
	outline-offset: 2px;
}


/* ════════════════════════════════════════════════════════════
   Every Nook (nook-hub.php)
   ════════════════════════════════════════════════════════════ */

.cur-nooks__hero {
	position: relative;
	overflow: hidden;
	padding: 5rem var(--cur-gutter);
	background: var(--cur-green);
	color: #ffffff;
}

.cur-nooks__hero-image {
	position: absolute;
	top: 0;
	right: 0;
	width: 42%;
	height: 100%;
	object-fit: cover;
	opacity: 0.46;
}

.cur-nooks__hero-inner {
	position: relative;
	z-index: 1;
	max-width: var(--cur-max-width);
	margin: 0 auto;
}

.cur-nooks__hero .cur-eyebrow {
	/* Butter, not the brighter yellow: small bold text on the green needs
	   4.5:1 and the yellow only reached 3.6:1. */
	color: var(--cur-butter);
}

.cur-nooks .cur-nooks__title {
	max-width: 760px;
	margin: 0.5rem 0 1rem;
	font-size: clamp(3.8rem, 7vw, 7rem);
	line-height: 0.9;
	letter-spacing: -0.045em;
}

.cur-nooks__intro {
	max-width: 610px;
	margin: 0;
	font-size: 1.05rem;
}

.cur-nooks__count {
	display: inline-block;
	margin: 1rem 0 0;
	padding: 0.45rem 0.75rem;
	border-radius: 20px;
	background: var(--cur-mustard);
	color: var(--cur-ink);
	font: 700 0.7rem/1.5 var(--cur-sans);
	letter-spacing: 0.08em;
	text-transform: uppercase;
}

.cur-nooks__directory {
	padding: 5rem var(--cur-gutter) 6rem;
	background: var(--cur-paper);
}

.cur-nooks .cur-nooks__grid {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 1.5rem;
}

.cur-nook-card {
	display: block;
	height: 100%;
	overflow: hidden;
	border: 1px solid var(--cur-line);
	border-radius: var(--cur-radius-panel);
	background: var(--cur-cream);
	transition: transform 0.2s ease;
}

.cur-nook-card:hover {
	transform: translateY(-5px);
}

.cur-nook-card:focus-visible {
	outline: 3px solid var(--cur-ink);
	outline-offset: 3px;
}

.cur-nook-card__image {
	position: relative;
	height: 190px;
	background: var(--cur-butter);
}

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

.cur-nook-card__mark {
	position: absolute;
	top: 1rem;
	left: 1rem;
	display: grid;
	place-items: center;
	width: 42px;
	height: 42px;
	border-radius: 50%;
	background: var(--cur-mustard);
	color: var(--cur-ink);
}

.cur-nook-card__mark svg {
	width: 21px;
	height: 21px;
}

.cur-nook-card__body {
	padding: 1.25rem;
}

.cur-nooks .cur-nook-card__body h3 {
	margin: 0 0 0.55rem;
	font-size: 1.65rem;
	line-height: 1;
	transition: color 0.15s ease;
}

.cur-nook-card:hover h3 {
	color: var(--cur-tomato);
}

.cur-nook-card__body p {
	min-height: 54px;
	margin: 0 0 1rem;
	font-size: 0.78rem;
}

.cur-nook-card__footer {
	display: flex;
	justify-content: space-between;
	gap: 1rem;
	padding-top: 0.8rem;
	border-top: 1px solid var(--cur-line);
	color: var(--cur-green);
	font-size: 0.65rem;
	font-weight: 700;
	letter-spacing: 0.05em;
	text-transform: uppercase;
}

.cur-nooks__empty,
.cur-nook__empty {
	margin: 0;
	color: var(--cur-ink-muted);
}


/* ════════════════════════════════════════════════════════════
   One Nook (nook-landing.php)
   ════════════════════════════════════════════════════════════ */

.cur-nook__hero {
	padding: 1rem var(--cur-gutter) 4.5rem;
	background: var(--cur-butter);
}

.cur-nook__hero-inner {
	display: grid;
	grid-template-columns: 0.92fr 1.08fr;
	gap: 3.5rem;
	align-items: center;
	max-width: var(--cur-max-width);
	margin: 0 auto;
}

.cur-nook__cover {
	position: relative;
	min-height: 470px;
	overflow: hidden;
	border-radius: 120px 12px 12px 12px;
	background: var(--cur-stripe-blue);
}

.cur-nook__cover img {
	display: block;
	width: 100%;
	height: 100%;
	min-height: 470px;
	object-fit: cover;
}

.cur-nook__cover::after {
	content: "";
	position: absolute;
	inset: 0;
	background: linear-gradient(0deg, rgba(35, 60, 97, 0.8), transparent 60%);
}

.cur-nook__cover-label {
	position: absolute;
	bottom: 2rem;
	left: 2rem;
	z-index: 1;
	color: #ffffff;
	font: 400 2rem/1 var(--cur-serif);
}

.cur-nooks .cur-nook__title {
	margin: 0.5rem 0 1rem;
	font-size: clamp(4rem, 7vw, 7rem);
	line-height: 0.88;
	letter-spacing: -0.045em;
}

.cur-nook__intro {
	max-width: 580px;
	margin: 0;
	font-size: 1.05rem;
}

.cur-nooks .cur-nook__stats {
	display: flex;
	flex-wrap: wrap;
	gap: 0.4rem 1.2rem;
	margin: 1.2rem 0;
	color: var(--cur-green);
	font-size: 0.7rem;
	font-weight: 700;
	letter-spacing: 0.08em;
	text-transform: uppercase;
}

.cur-nook__actions {
	display: flex;
	flex-wrap: wrap;
	gap: 0.7rem;
}

/* ── The newest article ────────────────────────────────────── */

.cur-nook__featured {
	padding: 4.8rem var(--cur-gutter);
	background: var(--cur-peach);
}

.cur-nook__featured-inner {
	display: grid;
	grid-template-columns: 1.15fr 0.85fr;
	overflow: hidden;
	max-width: var(--cur-max-width);
	margin: 0 auto;
	border-radius: var(--cur-radius-panel);
	background: var(--cur-paper);
}

.cur-nook__featured-image {
	min-height: 430px;
	background: var(--cur-butter);
}

.cur-nook__featured-image img {
	display: block;
	width: 100%;
	height: 100%;
	min-height: 430px;
	object-fit: cover;
}

.cur-nook__featured-copy {
	display: flex;
	flex-direction: column;
	justify-content: center;
	padding: 3.5rem;
}

.cur-nooks .cur-nook__featured-copy h2 {
	margin: 0.5rem 0 1rem;
	font-size: 3rem;
	line-height: 0.95;
}

.cur-nook__featured-copy p {
	font-size: 0.88rem;
}

.cur-nook__featured-copy .cur-nook__button {
	align-self: flex-start;
	margin-top: 0.8rem;
}

.cur-nook-article__meta {
	margin: 0 0 0.4rem;
	color: var(--cur-green);
	font-size: 0.66rem;
	font-weight: 700;
	letter-spacing: 0.09em;
	text-transform: uppercase;
}

/* ── The Nook's articles ───────────────────────────────────── */

.cur-nook__articles {
	padding: 5rem var(--cur-gutter) 6rem;
	background: var(--cur-paper);
	scroll-margin-top: 1rem;
}

.cur-nook__tabs {
	display: flex;
	flex-wrap: wrap;
	gap: 0.55rem;
	margin: 0 0 2rem;
}

.cur-nooks .cur-nook__grid {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 2rem 1.4rem;
}

.cur-nook-article {
	display: block;
	height: 100%;
	overflow: hidden;
	border: 1px solid var(--cur-line);
	border-radius: var(--cur-radius);
	background: var(--cur-cream);
	transition: transform 0.2s ease;
}

.cur-nook-article:hover {
	transform: translateY(-3px);
}

.cur-nook-article:focus-visible {
	outline: 3px solid var(--cur-ink);
	outline-offset: 3px;
}

.cur-nook-article__image {
	height: 220px;
	background: var(--cur-butter);
}

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

.cur-nook-article__body {
	padding: 1.2rem;
}

.cur-nooks .cur-nook-article__body h3 {
	margin: 0.4rem 0 0.7rem;
	font-size: 1.55rem;
	line-height: 1.05;
	transition: color 0.15s ease;
}

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

.cur-nook-article__body p {
	margin: 0 0 1rem;
	font-size: 0.78rem;
}

.cur-nook-article__footer {
	display: flex;
	justify-content: space-between;
	gap: 1rem;
	padding-top: 0.75rem;
	border-top: 1px solid var(--cur-line);
	color: var(--cur-ink-muted);
	font-size: 0.65rem;
}

/* ── Discussion ────────────────────────────────────────────── */

/* One conversation per row: the leaderboard already takes a column, and a
   thread needs the width to stay readable as it nests. */
.cur-nooks .cur-nook__threads {
	display: grid;
	grid-template-columns: 1fr;
	gap: 1.4rem;
	align-items: start;
}

.cur-nook__thread {
	padding: 1.3rem;
	border: 1px solid var(--cur-line);
	border-radius: var(--cur-radius);
	background: var(--cur-cream);
}

.cur-nook__thread-title {
	font: 400 1.4rem/1.1 var(--cur-serif);
}

.cur-nook__thread-title:hover {
	color: var(--cur-tomato);
}

.cur-nook__thread-count {
	margin: 0.35rem 0 0.9rem;
	color: var(--cur-green);
	font-size: 0.65rem;
	font-weight: 700;
	letter-spacing: 0.05em;
	text-transform: uppercase;
}

.cur-nook__comment {
	margin: 0 0 0.9rem;
	padding-left: 1rem;
	border-left: 3px solid var(--cur-line);
}

.cur-nook__comment p {
	margin: 0 0 0.3rem;
	font-size: 0.82rem;
}

.cur-nook__comment footer {
	color: var(--cur-ink-muted);
	font-size: 0.7rem;
}


/* ════════════════════════════════════════════════════════════
   Smaller screens
   ════════════════════════════════════════════════════════════ */

@media (max-width: 950px) {
	.cur-nooks .cur-nooks__grid,
	.cur-nooks .cur-nook__grid {
		grid-template-columns: repeat(2, 1fr);
	}

	.cur-nook__hero-inner,
	.cur-nook__featured-inner {
		grid-template-columns: 1fr;
	}

	.cur-nook__cover,
	.cur-nook__cover img {
		min-height: 400px;
	}

	.cur-nook__featured-image,
	.cur-nook__featured-image img {
		min-height: 350px;
	}

	.cur-nooks .cur-nook__threads {
		grid-template-columns: 1fr;
	}
}

@media (max-width: 650px) {
	.cur-nooks__hero {
		padding: 4rem 6vw;
	}

	.cur-nooks__hero-image {
		width: 100%;
		opacity: 0.25;
	}

	.cur-nooks__directory,
	.cur-nook__articles {
		padding-right: 6vw;
		padding-left: 6vw;
	}

	.cur-nooks .cur-nooks__grid,
	.cur-nooks .cur-nook__grid {
		grid-template-columns: 1fr;
	}

	.cur-nook-card__body p {
		min-height: 0;
	}

	.cur-nook__hero {
		padding: 1rem 6vw 4rem;
	}

	.cur-nook__cover,
	.cur-nook__cover img {
		min-height: 320px;
	}

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

	.cur-nook__featured-copy {
		padding: 2rem;
	}
}

@media (prefers-reduced-motion: reduce) {
	.cur-nook-card,
	.cur-nook-article,
	.cur-nooks h3 {
		transition: none;
	}

	.cur-nook-card:hover,
	.cur-nook-article:hover {
		transform: none;
	}
}


/* ── The Discussion tab: conversations, and the leaderboard beside them ── */

.cur-nook__discussion {
	display: grid;
	grid-template-columns: minmax(0, 1fr) 290px;
	gap: 2.5rem;
	align-items: start;
}

.cur-nook__board {
	position: sticky;
	top: 1.5rem;
	padding: 1.5rem 1.4rem;
	border: 1px solid var(--cur-line);
	border-radius: var(--cur-radius-panel);
	background: var(--cur-butter);
}

.cur-nooks .cur-nook__board h3 {
	margin: 0.35rem 0 0.5rem;
	font-size: 1.8rem;
	line-height: 1;
}

.cur-nook__board-note {
	margin: 0 0 1.2rem;
	color: var(--cur-ink-muted);
	font-size: 0.78rem;
	line-height: 1.5;
}

.cur-nook__board-note a {
	color: var(--cur-tomato);
	font-weight: 700;
}

.cur-nooks .cur-nook__board-list {
	display: flex;
	flex-direction: column;
	gap: 0.1rem;
	counter-reset: none;
}

.cur-nook__board-list li {
	display: flex;
	align-items: center;
	gap: 0.7rem;
	padding: 0.5rem 0;
	border-bottom: 1px solid rgba(36, 27, 22, 0.1);
}

.cur-nook__board-list li:last-child {
	border-bottom: 0;
}

.cur-nook__board-rank {
	flex: 0 0 1.2rem;
	color: var(--cur-ink-muted);
	font-size: 0.76rem;
	font-weight: 700;
	text-align: center;
}

/* The top three get the podium colours. */
.cur-nook__board-list li:nth-child(1) .cur-nook__board-rank { color: var(--cur-mustard); }
.cur-nook__board-list li:nth-child(2) .cur-nook__board-rank { color: #9ea8b4; }
.cur-nook__board-list li:nth-child(3) .cur-nook__board-rank { color: #b87333; }

.cur-nook__board-who {
	display: flex;
	flex: 1;
	align-items: center;
	gap: 0.55rem;
	min-width: 0;
}

.cur-nook__board-who img {
	flex: 0 0 30px;
	width: 30px;
	height: 30px;
	border-radius: 50%;
	object-fit: cover;
	background: var(--cur-cream);
}

.cur-nook__board-who span {
	overflow: hidden;
	font-size: 0.85rem;
	font-weight: 700;
	text-overflow: ellipsis;
	white-space: nowrap;
}

.cur-nook__board-points {
	flex-shrink: 0;
	color: var(--cur-green);
	font-size: 0.78rem;
	font-weight: 700;
}

@media (max-width: 900px) {
	.cur-nook__discussion {
		grid-template-columns: 1fr;
	}

	.cur-nook__board {
		position: static;
	}
}


/* An advert, when one is set for this slot (Curatery Core's 073). */
.cur-nooks .curatery-ad-slot {
	margin: 0 0 2rem;
	text-align: center;
}

/* ── The photos on a Nook card ──
   A Nook without its own picture shows up to four photos from the Goods its
   articles feature, filling the same band a single picture would. */
.cur-nook-card__collage {
	position: absolute;
	inset: 0;
	display: grid;
	/* Rows are set here, not left to grow: a photo asking for the full height
	   of a row that sizes itself to the photo makes the browser fall back to
	   the picture's own size, which spilled over the Nook's name below. */
	grid-template-columns: 1fr 1fr;
	grid-template-rows: 1fr 1fr;
	gap: 2px;
	overflow: hidden;
	background: var(--cur-butter);
}

.cur-nook-card__collage img {
	display: block;
	width: 100%;
	height: 100%;
	min-width: 0;
	min-height: 0;
	object-fit: cover;
}

/* One photo fills the band, two sit side by side, three put the first one
   down the left, four make a square. */
.cur-nook-card__collage--1 {
	grid-template-columns: 1fr;
	grid-template-rows: 1fr;
}

.cur-nook-card__collage--2 {
	grid-template-rows: 1fr;
}

.cur-nook-card__collage--3 img:first-child {
	grid-row: span 2;
}