/* ===== Page: Journal ===== */

/* Reusable helpers (match site scale) */
.sheen {
	position: relative;
	overflow: hidden;
}
.sheen::after {
	content: '';
	position: absolute;
	inset: -20%;
	background: linear-gradient(
		110deg,
		rgba(255, 255, 255, 0) 30%,
		rgba(255, 255, 255, 0.5) 50%,
		rgba(255, 255, 255, 0) 70%
	);
	transform: translateX(-120%) rotate(8deg);
	transition: transform 0.8s ease;
}
.sheen:hover::after {
	transform: translateX(120%) rotate(8deg);
}

.section-head {
	max-width: var(--maxw);
	margin: clamp(28px, 5vw, 56px) auto 10px;
	padding: 0 20px;
}
.section-head h2 {
	font-family: 'Playfair Display', serif;
	font-weight: 600;
	font-size: clamp(22px, 3.2vw, 38px);
	line-height: 1.15;
	margin: 0 0 6px;
}
.section-head .lead {
	color: var(--muted);
	margin: 0;
	max-width: 68ch;
}

/* Cap all images on this page */
.j-hero img,
.j-log img,
.j-myths img,
.j-interview img {
	max-width: 350px;
}

/* ---------- SECTION 1: Journal Hero ---------- */
.j-hero {
	padding: clamp(40px, 6vw, 88px) 20px;
	background: radial-gradient(1200px 600px at 10% -10%, #fff, transparent 55%),
		linear-gradient(#fff, #fff) padding-box,
		linear-gradient(180deg, #ffffff 0%, var(--bg-soft) 100%);
	border-bottom: 1px solid var(--line);
}
.j-hero-wrap {
	max-width: var(--maxw);
	margin: 0 auto;
	display: grid;
	grid-template-columns: 1.05fr 0.95fr;
	gap: clamp(16px, 3vw, 36px);
	align-items: start;
}
.j-hero .title {
	font-family: 'Playfair Display', serif;
	font-weight: 600;
	font-size: clamp(26px, 3.6vw, 44px);
	line-height: 1.15;
	margin: 0 0 10px;
}
.j-hero .lead {
	color: var(--muted);
	max-width: 62ch;
	margin: 0 0 12px;
}
.j-hero .ticks {
	list-style: none;
	padding: 0;
	margin: 0;
	display: grid;
	gap: 8px;
	color: var(--muted);
}
.j-hero .ticks li {
	padding: 6px 10px;
	border: 1px dashed var(--line);
	border-radius: 999px;
	width: fit-content;
}

.j-hero-rail {
	position: relative;
	overflow-x: auto;
	overflow-y: hidden;
	scroll-snap-type: x mandatory;
	-webkit-overflow-scrolling: touch;
	overscroll-behavior-x: contain;
	border-radius: var(--radius-sm);
	-webkit-mask-image: linear-gradient(
		90deg,
		transparent 0,
		#000 4%,
		#000 96%,
		transparent 100%
	);
	mask-image: linear-gradient(
		90deg,
		transparent 0,
		#000 4%,
		#000 96%,
		transparent 100%
	);
	scrollbar-gutter: stable both-edges;
}
.j-rail {
	display: flex;
	gap: 12px;
	align-items: stretch;
	padding: 2px 2px 10px;
	scroll-padding-inline: 20px;
}
.j-card {
	scroll-snap-align: start;
	flex: 0 0 auto;
	width: clamp(200px, 32vw, 320px);
	max-width: 350px;
	background: #fff;
	border: 1px solid var(--line);
	border-radius: var(--radius);
	box-shadow: var(--shadow);
	padding: 12px;
	transition: transform 0.24s ease, box-shadow 0.24s ease;
}
.j-card:hover {
	transform: translateY(-4px);
	box-shadow: 0 16px 36px rgba(27, 33, 36, 0.12);
}
.j-card figure {
	position: relative;
	margin: 0 0 8px;
}
.j-card img {
	width: 100%;
	height: auto;
	max-width: 350px;
	border-radius: 12px;
	aspect-ratio: 4/3;
	object-fit: cover;
}
.j-card .tag {
	position: absolute;
	left: 8px;
	bottom: 8px;
	padding: 6px 10px;
	border-radius: 999px;
	background: #fff;
	color: var(--muted);
	font-weight: 700;
	box-shadow: var(--shadow);
}
.j-card h3 {
	margin: 0 0 6px;
	font-size: clamp(16px, 2vw, 20px);
}
.j-card p {
	margin: 0;
	color: var(--muted);
}

.j-rail-fade {
	pointer-events: none;
	position: absolute;
	inset: 0;
	background: linear-gradient(
				90deg,
				rgba(255, 255, 255, 1),
				rgba(255, 255, 255, 0) 60%
			)
			left / 80px 100% no-repeat,
		linear-gradient(270deg, rgba(255, 255, 255, 1), rgba(255, 255, 255, 0) 60%)
			right / 80px 100% no-repeat;
}

@media (max-width: 1024px) {
	.j-hero-wrap {
		grid-template-columns: 1fr;
	}
}

/* ---------- SECTION 2: Studio log ---------- */
.j-log {
	background: #fff;
	border-bottom: 1px solid var(--line);
}
.j-log-grid {
	max-width: var(--maxw);
	margin: 8px auto 10px;
	padding: 0 20px;
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 12px;
}
.j-shot {
	background: #fff;
	border: 1px solid var(--line);
	border-radius: 16px;
	box-shadow: var(--shadow);
	overflow: hidden;
	position: relative;
	transition: transform 0.25s ease, box-shadow 0.25s ease;
}
.j-shot:hover {
	transform: translateY(-3px);
	box-shadow: 0 18px 40px rgba(27, 33, 36, 0.14);
}
.j-shot img {
	width: 100%;
	height: auto;
	max-width: 350px;
	display: block;
}
.j-shot figcaption {
	position: absolute;
	left: 10px;
	bottom: 10px;
	padding: 6px 10px;
	border-radius: 999px;
	background: #fff;
	color: var(--muted);
	font-weight: 700;
	box-shadow: var(--shadow);
}
.j-log-note {
	max-width: var(--maxw);
	margin: 0 auto 16px;
	padding: 0 20px;
	color: var(--muted);
}
@media (max-width: 800px) {
	.j-log-grid {
		grid-template-columns: 1fr;
	}
}

/* ---------- SECTION 3: Myths ---------- */
.j-myths {
	background: var(--bg-soft);
	border-top: 1px solid var(--line);
	border-bottom: 1px solid var(--line);
}
.myths-card {
	max-width: var(--maxw);
	margin: 8px auto 16px;
	padding: 0 20px;
	display: grid;
	grid-template-columns: 240px 1fr;
	gap: 12px;
	align-items: start;
}
.myths-pic img {
	width: 100%;
	height: auto;
	max-width: 350px;
	border-radius: 12px;
	box-shadow: var(--shadow);
}
.myths-body {
	display: grid;
	gap: 10px;
}
.myth {
	border: 1px solid var(--line);
	border-radius: var(--radius);
	background: #fff;
	box-shadow: var(--shadow);
	overflow: hidden;
}
.myth summary {
	list-style: none;
	cursor: pointer;
	padding: 12px 14px;
	font-weight: 700;
}
.myth summary::-webkit-details-marker {
	display: none;
}
.myth[open] summary {
	color: var(--brand-600);
}
.myth p {
	margin: 0 0 12px;
	padding: 0 14px 0;
	color: var(--muted);
}
@media (max-width: 760px) {
	.myths-card {
		grid-template-columns: 1fr;
	}
}

/* ---------- SECTION 4: Interview ---------- */
.j-interview {
	background: #fff;
	border-bottom: 1px solid var(--line);
}
.ivw-card {
	max-width: var(--maxw);
	margin: 8px auto 16px;
	padding: 0 20px;
	display: grid;
	grid-template-columns: 220px 1fr;
	gap: 14px;
	align-items: start;
}
.ivw-pic img {
	width: 100%;
	height: auto;
	max-width: 350px;
	border-radius: 12px;
	box-shadow: var(--shadow);
}
.ivw-qa {
	margin: 6px 0;
	padding-left: 18px;
	display: grid;
	gap: 8px;
	color: var(--muted);
}
.ivw-foot {
	color: var(--muted);
	margin: 8px 0 0;
}
@media (max-width: 820px) {
	.ivw-card {
		grid-template-columns: 1fr;
	}
}
/* ===== SECTION 5: Process Deep Dive — Casting ===== */
.j-casting {
	background: #fff;
	border-bottom: 1px solid var(--line);
}
.cast-grid {
	max-width: var(--maxw);
	margin: 8px auto 12px;
	padding: 0 20px;
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	gap: 12px;
	counter-reset: cast;
}
.cast-card {
	background: #fff;
	border: 1px solid var(--line);
	border-radius: var(--radius);
	box-shadow: var(--shadow);
	padding: 12px;
	position: relative;
	transition: transform 0.24s ease, box-shadow 0.24s ease;
}
.cast-card:hover {
	transform: translateY(-4px);
	box-shadow: 0 16px 36px rgba(27, 33, 36, 0.12);
}
.cast-card figure {
	margin: 0 0 8px;
}
.cast-card img {
	width: 100%;
	height: auto;
	max-width: 350px;
	border-radius: 12px;
}
.cast-card h3 {
	margin: 0 0 6px;
	font-size: clamp(16px, 2vw, 20px);
}
.cast-card p {
	margin: 0;
	color: var(--muted);
}
.cast-card::before {
	counter-increment: cast;
	content: counter(cast);
	position: absolute;
	top: 10px;
	right: 10px;
	width: 26px;
	height: 26px;
	border-radius: 999px;
	display: grid;
	place-items: center;
	background: linear-gradient(
		110deg,
		var(--brand) 0%,
		#e1bd8f 60%,
		var(--brand) 100%
	);
	color: #fff;
	font-weight: 700;
}
.cast-note {
	max-width: var(--maxw);
	margin: 0 auto 16px;
	padding: 0 20px;
	color: var(--muted);
}
@media (max-width: 900px) {
	.cast-grid {
		grid-template-columns: 1fr 1fr;
	}
}
@media (max-width: 560px) {
	.cast-grid {
		grid-template-columns: 1fr;
	}
}

/* ===== SECTION 6: Reader Mail — Fit fixes ===== */
.mailbag {
	background: var(--bg-soft);
	border-top: 1px solid var(--line);
	border-bottom: 1px solid var(--line);
}
.mail-card {
	max-width: var(--maxw);
	margin: 8px auto 16px;
	padding: 0 20px;
	display: grid;
	grid-template-columns: 220px 1fr;
	gap: 14px;
	align-items: start;
}
.mail-aside figure {
	margin: 0 0 10px;
}
.mail-aside img {
	width: 100%;
	height: auto;
	max-width: 350px;
	border-radius: 12px;
	box-shadow: var(--shadow);
	display: block;
}
.mail-body {
	display: grid;
	gap: 10px;
}
.qa {
	border: 1px solid var(--line);
	border-radius: var(--radius);
	background: #fff;
	box-shadow: var(--shadow);
	overflow: hidden;
}
.qa summary {
	list-style: none;
	cursor: pointer;
	padding: 12px 14px;
	font-weight: 700;
}
.qa summary::-webkit-details-marker {
	display: none;
}
.qa[open] summary {
	color: var(--brand-600);
}
.qa p {
	margin: 0 0 12px;
	padding: 0 14px 0;
	color: var(--muted);
}
@media (max-width: 860px) {
	.mail-card {
		grid-template-columns: 1fr;
	}
}

/* ===== SECTION 7: Palette Essay — Warm vs Cool ===== */
.palette {
	background: #fff;
	border-bottom: 1px solid var(--line);
}
.pl-grid {
	max-width: var(--maxw);
	margin: 8px auto 10px;
	padding: 0 20px;
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	gap: 12px;
}
.pl-tile {
	background: #fff;
	border: 1px solid var(--line);
	border-radius: 16px;
	box-shadow: var(--shadow);
	overflow: hidden;
	position: relative;
	transition: transform 0.25s ease, box-shadow 0.25s ease;
}
.pl-tile:hover {
	transform: translateY(-3px);
	box-shadow: 0 18px 40px rgba(27, 33, 36, 0.14);
}
.pl-tile img {
	width: 100%;
	height: auto;
	max-width: 350px;
	display: block;
}
.pl-tile figcaption {
	position: absolute;
	left: 10px;
	bottom: 10px;
	padding: 6px 10px;
	border-radius: 999px;
	background: #fff;
	color: var(--muted);
	font-weight: 700;
	box-shadow: var(--shadow);
}
.pl-quote {
	max-width: var(--maxw);
	margin: 8px auto 16px;
	padding: 0 20px;
	font-style: italic;
	color: var(--muted);
	border-left: 4px solid var(--brand-200);
	padding-left: 12px;
}
@media (max-width: 900px) {
	.pl-grid {
		grid-template-columns: 1fr 1fr;
	}
}
@media (max-width: 560px) {
	.pl-grid {
		grid-template-columns: 1fr;
	}
}

/* ===== SECTION 8: Journal Picks — Quiet gifts (rail) ===== */
.picks {
	background: var(--bg-soft);
	border-top: 1px solid var(--line);
	border-bottom: 1px solid var(--line);
}
.pk-rail {
	max-width: var(--maxw);
	margin: 8px auto 16px;
	padding: 0 20px;
	position: relative;
	overflow-x: auto;
	overflow-y: hidden;
	scroll-snap-type: x mandatory;
	-webkit-overflow-scrolling: touch;
	overscroll-behavior-x: contain;
	border-radius: var(--radius-sm);
	-webkit-mask-image: linear-gradient(
		90deg,
		transparent 0,
		#000 4%,
		#000 96%,
		transparent 100%
	);
	mask-image: linear-gradient(
		90deg,
		transparent 0,
		#000 4%,
		#000 96%,
		transparent 100%
	);
	scrollbar-gutter: stable both-edges;
}
.pk-track {
	display: flex;
	gap: 12px;
	align-items: stretch;
	padding: 2px 2px 10px;
	scroll-padding-inline: 20px;
}
.pk-card {
	scroll-snap-align: start;
	flex: 0 0 auto;
	width: clamp(220px, 32vw, 320px);
	max-width: 350px;
	background: #fff;
	border: 1px solid var(--line);
	border-radius: var(--radius);
	box-shadow: var(--shadow);
	padding: 12px;
	transition: transform 0.24s ease, box-shadow 0.24s ease;
}
.pk-card.text-only figure {
	display: none;
}
.pk-card:hover {
	transform: translateY(-4px);
	box-shadow: 0 16px 36px rgba(27, 33, 36, 0.12);
}
.pk-card figure {
	position: relative;
	margin: 0 0 8px;
}
.pk-card img {
	width: 100%;
	height: auto;
	max-width: 350px;
	border-radius: 12px;
	aspect-ratio: 4/3;
	object-fit: cover;
}
.pk-card figcaption {
	position: absolute;
	left: 8px;
	bottom: 8px;
	padding: 6px 10px;
	border-radius: 999px;
	background: #fff;
	color: var(--muted);
	font-weight: 700;
	box-shadow: var(--shadow);
}
.pk-fade {
	pointer-events: none;
	position: absolute;
	inset: 0;
	background: linear-gradient(90deg, #fff, rgba(255, 255, 255, 0) 60%) left /
			80px 100% no-repeat,
		linear-gradient(270deg, #fff, rgba(255, 255, 255, 0) 60%) right / 80px 100%
			no-repeat;
}

/* Cap image widths for these sections too */
.j-casting img,
.mailbag img,
.palette img,
.picks img {
	max-width: 350px;
}
/* ===== SECTION 9: Bench Q&A ===== */
.j-qa {
	background: #fff;
	border-bottom: 1px solid var(--line);
}
.qa-card {
	max-width: var(--maxw);
	margin: 8px auto 16px;
	padding: 0 20px;
	display: grid;
	grid-template-columns: 220px 1fr;
	gap: 14px;
	align-items: start;
}
.qa-aside figure {
	margin: 0 0 10px;
}
.qa-aside img {
	width: 100%;
	height: auto;
	max-width: 350px;
	border-radius: 12px;
	box-shadow: var(--shadow);
	display: block;
}
.qa-body {
	display: grid;
	gap: 10px;
}
.qa-item {
	border: 1px solid var(--line);
	border-radius: var(--radius);
	background: #fff;
	box-shadow: var(--shadow);
	overflow: hidden;
}
.qa-item summary {
	list-style: none;
	cursor: pointer;
	padding: 12px 14px;
	font-weight: 700;
}
.qa-item summary::-webkit-details-marker {
	display: none;
}
.qa-item[open] summary {
	color: var(--brand-600);
}
.qa-item p {
	margin: 0 0 12px;
	padding: 0 14px 0;
	color: var(--muted);
}
@media (max-width: 860px) {
	.qa-card {
		grid-template-columns: 1fr;
	}
}

/* ===== SECTION 10: Essay (long-form) ===== */
.j-essay {
	background: var(--bg-soft);
	border-top: 1px solid var(--line);
	border-bottom: 1px solid var(--line);
}
.essay-card {
	max-width: var(--maxw);
	margin: 8px auto 18px;
	padding: 0 20px;
	display: grid;
	grid-template-columns: 260px 1fr;
	gap: 14px;
	align-items: start;
}
.essay-pic img {
	width: 100%;
	height: auto;
	max-width: 350px;
	border-radius: 12px;
	box-shadow: var(--shadow);
	display: block;
}
.essay-body {
	display: grid;
	gap: 10px;
	color: var(--ink);
}
.essay-body p {
	margin: 0;
	color: var(--muted);
	line-height: 1.65;
}
@media (max-width: 900px) {
	.essay-card {
		grid-template-columns: 1fr;
	}
}

/* ===== SECTION 11: Community Spotlight ===== */
.j-spotlight {
	background: #fff;
	border-bottom: 1px solid var(--line);
}
.spot-grid {
	max-width: var(--maxw);
	margin: 8px auto 10px;
	padding: 0 20px;
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 12px;
}
.spot-card {
	background: #fff;
	border: 1px solid var(--line);
	border-radius: 16px;
	box-shadow: var(--shadow);
	overflow: hidden;
	position: relative;
	transition: transform 0.25s ease, box-shadow 0.25s ease;
}
.spot-card:hover {
	transform: translateY(-3px);
	box-shadow: 0 18px 40px rgba(27, 33, 36, 0.14);
}
.spot-card img {
	width: 100%;
	height: auto;
	max-width: 350px;
	display: block;
}
.spot-card figcaption {
	position: absolute;
	left: 10px;
	bottom: 10px;
	padding: 6px 10px;
	border-radius: 999px;
	background: #fff;
	color: var(--muted);
	font-weight: 700;
	box-shadow: var(--shadow);
}
.spot-foot {
	max-width: var(--maxw);
	margin: 0 auto 16px;
	padding: 0 20px;
	color: var(--muted);
}
@media (max-width: 860px) {
	.spot-grid {
		grid-template-columns: 1fr;
	}
}

/* ===== SECTION 12: Seasonal Care Scheduler ===== */
.j-schedule {
	background: var(--bg-soft);
	border-top: 1px solid var(--line);
	border-bottom: 1px solid var(--line);
}
.sch-grid {
	max-width: var(--maxw);
	margin: 8px auto 16px;
	padding: 0 20px;
	display: grid;
	grid-template-columns: 1fr 240px 1fr 240px;
	gap: 12px;
	align-items: start;
}
.sch-pic img {
	width: 100%;
	height: auto;
	max-width: 350px;
	border-radius: 12px;
	box-shadow: var(--shadow);
	display: block;
}
.sch-list {
	background: #fff;
	border: 1px solid var(--line);
	border-radius: var(--radius);
	box-shadow: var(--shadow);
	padding: 12px;
	display: grid;
	gap: 8px;
	color: var(--muted);
}
.sch-list.do {
	border-left: 5px solid #e6f5ea;
}
.sch-list.dont {
	border-left: 5px solid #ffe9e9;
}

@media (max-width: 1000px) {
	.sch-grid {
		grid-template-columns: 1fr 1fr;
	}
	.sch-grid .sch-pic:last-child {
		order: 4;
	}
}
@media (max-width: 640px) {
	.sch-grid {
		grid-template-columns: 1fr;
	}
}

/* Cap widths for new sections */
.j-qa img,
.j-essay img,
.j-spotlight img,
.j-schedule img {
	max-width: 350px;
}
/* ===== SECTION 13: Heirloom Reset ===== */
.heirloom {
	background: #fff;
	border-bottom: 1px solid var(--line);
}
.hl-grid {
	max-width: var(--maxw);
	margin: 8px auto 16px;
	padding: 0 20px;
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 12px;
}
.hl-card {
	background: #fff;
	border: 1px solid var(--line);
	border-radius: var(--radius);
	box-shadow: var(--shadow);
	padding: 12px;
	transition: transform 0.24s ease, box-shadow 0.24s ease;
}
.hl-card:hover {
	transform: translateY(-4px);
	box-shadow: 0 16px 36px rgba(27, 33, 36, 0.12);
}
.hl-card figure {
	margin: 0 0 8px;
}
.hl-card img {
	width: 100%;
	height: auto;
	max-width: 350px;
	border-radius: 12px;
}
.hl-card h3 {
	margin: 0 0 6px;
	font-size: clamp(16px, 2vw, 20px);
}
.hl-card p {
	margin: 0;
	color: var(--muted);
}
@media (max-width: 860px) {
	.hl-grid {
		grid-template-columns: 1fr;
	}
}

/* ===== SECTION 14: Comfort II (essay + refs) ===== */
.comfort2 {
	background: var(--bg-soft);
	border-top: 1px solid var(--line);
	border-bottom: 1px solid var(--line);
}
.cf-card {
	max-width: var(--maxw);
	margin: 8px auto 18px;
	padding: 0 20px;
	display: grid;
	grid-template-columns: 220px 1fr;
	gap: 14px;
	align-items: start;
}
.cf-aside figure {
	margin: 0 0 10px;
}
.cf-aside img {
	width: 100%;
	height: auto;
	max-width: 350px;
	border-radius: 12px;
	box-shadow: var(--shadow);
	display: block;
}
.cf-body {
	display: grid;
	gap: 10px;
	color: var(--ink);
}
.cf-body p {
	margin: 0;
	color: var(--muted);
	line-height: 1.65;
}
.cf-tips {
	margin: 0;
	padding-left: 18px;
	display: grid;
	gap: 8px;
	color: var(--muted);
}
@media (max-width: 900px) {
	.cf-card {
		grid-template-columns: 1fr;
	}
}

/* ===== SECTION 15: Workshop Playlist ===== */
.playlist {
	background: #fff;
	border-bottom: 1px solid var(--line);
}
.plst-tracks {
	max-width: var(--maxw);
	margin: 8px auto 12px;
	padding: 0 20px;
	list-style: decimal;
	display: grid;
	gap: 8px;
	color: var(--muted);
}
.plst-tracks li {
	background: #fff;
	border: 1px solid var(--line);
	border-radius: var(--radius);
	box-shadow: var(--shadow);
	padding: 10px 12px;
	display: flex;
	justify-content: space-between;
	align-items: center;
}
.t-name {
	font-weight: 700;
}
.t-time {
	font-variant-numeric: tabular-nums;
	color: var(--ink);
}
.plst-foot {
	max-width: var(--maxw);
	margin: 0 auto 16px;
	padding: 0 20px;
	color: var(--muted);
}

/* ===== SECTION 16: Reader Projects (Before/After) ===== */
.projects {
	background: var(--bg-soft);
	border-top: 1px solid var(--line);
	border-bottom: 1px solid var(--line);
}
.prj-grid {
	max-width: var(--maxw);
	margin: 8px auto 12px;
	padding: 0 20px;
	display: grid;
	grid-template-columns: repeat(2, 1fr);
	gap: 12px;
}
.prj-card {
	background: #fff;
	border: 1px solid var(--line);
	border-radius: 16px;
	box-shadow: var(--shadow);
	overflow: hidden;
	position: relative;
	transition: transform 0.25s ease, box-shadow 0.25s ease;
}
.prj-card:hover {
	transform: translateY(-3px);
	box-shadow: 0 18px 40px rgba(27, 33, 36, 0.14);
}
.prj-card img {
	width: 100%;
	height: auto;
	max-width: 350px;
	display: block;
}
.prj-card figcaption {
	position: absolute;
	left: 10px;
	bottom: 10px;
	padding: 6px 10px;
	border-radius: 999px;
	background: #fff;
	color: var(--muted);
	font-weight: 700;
	box-shadow: var(--shadow);
}
.prj-card .label {
	font-size: 12px;
	padding: 2px 8px;
	border-radius: 999px;
	margin-right: 6px;
}
.prj-card .label.before {
	background: #ffe9e9;
}
.prj-card .label.after {
	background: #e6f5ea;
}
.prj-foot {
	max-width: var(--maxw);
	margin: 0 auto 16px;
	padding: 0 20px;
	color: var(--muted);
}
@media (max-width: 860px) {
	.prj-grid {
		grid-template-columns: 1fr;
	}
}

/* ===== SECTION 17: Closing Note ===== */
.closing {
	background: #fff;
	border-bottom: 1px solid var(--line);
}
.cl-card {
	max-width: var(--maxw);
	margin: 8px auto 16px;
	padding: 0 20px;
	display: grid;
	grid-template-columns: 220px 1fr;
	gap: 14px;
	align-items: start;
}
.cl-pic img {
	width: 100%;
	height: auto;
	max-width: 350px;
	border-radius: 12px;
	box-shadow: var(--shadow);
	display: block;
}
.cl-body {
	color: var(--muted);
	display: grid;
	gap: 10px;
}
@media (max-width: 820px) {
	.cl-card {
		grid-template-columns: 1fr;
	}
}

/* Cap widths for new sections */
.heirloom img,
.comfort2 img,
.projects img,
.closing img {
	max-width: 350px;
}