/*
 * Full-bleed sections below use `width: 100vw`, which includes the vertical
 * scrollbar width and overflows the viewport by ~15px (horizontal scrollbar).
 * `clip` removes the overshoot without creating a scroll container, so the
 * sticky header keeps working. Scoped here because homepage.css only loads
 * on pages that render these sections.
 */
html,
body {
	overflow-x: clip;
}

.nobo-capacity {
	margin: 0 auto;
	max-width: 720px;
	text-align: center;
}

.nobo-capacity .vc_progress_bar {
	margin-bottom: 0.5rem;
}

/* Keep the bar's own label/percentage visible regardless of theme overrides */
.nobo-capacity .vc_progress_bar .vc_label {
	color: var(--color-heading);
	font-weight: 700;
	opacity: 1;
}

.nobo-capacity__caption {
	margin: 0;
	font-size: 1rem;
	font-weight: 600;
	color: var(--color-heading);
}

.nobo-capacity__caption strong {
	font-weight: 800;
}

.nobo-homepage-layout-rendering {
	aspect-ratio: 16 / 9;
	margin: 0;
	overflow: hidden;
	position: relative;
}

.nobo-homepage-layout-rendering__image,
.nobo-homepage-layout-rendering__media {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.nobo-homepage-layout-rendering__toggle {
	align-items: center;
	background: rgba(22, 21, 18, 0.74);
	border: 1px solid rgba(255, 255, 255, 0.5);
	border-radius: 999px;
	bottom: 1rem;
	color: #fff;
	cursor: pointer;
	display: inline-flex;
	font-size: 0.8125rem;
	font-weight: 700;
	justify-content: center;
	line-height: 1;
	min-height: 2.5rem;
	min-width: 4.5rem;
	padding: 0.75rem 1rem;
	position: absolute;
	right: 1rem;
	transition: background-color 160ms ease, border-color 160ms ease, transform 160ms ease;
}

.nobo-homepage-layout-rendering__toggle:hover,
.nobo-homepage-layout-rendering__toggle:focus-visible {
	background: rgba(22, 21, 18, 0.88);
	border-color: rgba(255, 255, 255, 0.86);
	transform: translateY(-1px);
}

@media (prefers-reduced-motion: reduce) {
	.nobo-homepage-layout-rendering__toggle {
		transition: none;
	}

	.nobo-homepage-layout-rendering__toggle:hover,
	.nobo-homepage-layout-rendering__toggle:focus-visible {
		transform: none;
	}
}

.nobo-hero-dust-storm-host {
	position: relative;
	overflow: hidden;
	isolation: isolate;
}

.nobo-hero-dust-storm-host > :not(.nobo-hero-dust-storm) {
	position: relative;
	z-index: 2;
}

.nobo-hero-dust-storm {
	position: absolute;
	inset: 0;
	z-index: 1;
	display: block;
	width: 100%;
	height: 100%;
	pointer-events: none;
	opacity: 0;
	transition: opacity 1200ms var(--ease-standard);
}

.nobo-hero-dust-storm-host[data-nobo-hero-dust-storm="ready"] .nobo-hero-dust-storm {
	opacity: 0.86;
}

@media (prefers-reduced-motion: reduce), (update: slow) {
	.nobo-hero-dust-storm {
		display: none;
		transition: none;
	}
}

.nobo-animated-flag {
	position: relative;
	display: inline-block;
	max-width: 100%;
	overflow: hidden;
	isolation: isolate;
}

.nobo-animated-flag > img {
	transition: opacity 220ms ease;
}

.nobo-animated-flag::before,
.nobo-animated-flag::after,
.nobo-animated-flag__canvas {
	opacity: 0;
	pointer-events: none;
}

/*
 * Flag pole + finial. Both pseudo-elements share the same X anchor (21.5%)
 * as the WebGL flag's hoist (see homepage.js shader stageX = 0.215). Using
 * translateX(-50%) keeps the metal centered on that line at every viewport
 * width so the alignment never drifts when the wrapper resizes.
 */
.nobo-animated-flag::before {
	content: "";
	position: absolute;
	top: 2.5%;
	left: 21.5%;
	z-index: 3;
	width: clamp(7px, 1.6%, 13px);
	height: 95%;
	border-radius: 999px;
	/* Brushed-metal gradient: warm shadow → sharp highlight → cool shadow.
	   The thin vertical sheen layered on top sells the cylindrical curve. */
	background:
		linear-gradient(180deg, rgba(255, 255, 255, 0.55) 0%, rgba(255, 255, 255, 0) 14%),
		linear-gradient(180deg, rgba(0, 0, 0, 0) 86%, rgba(0, 0, 0, 0.18) 100%),
		linear-gradient(
			90deg,
			#5b6770 0%,
			#9ba6ae 22%,
			#f4f7f9 48%,
			#c2ccd3 70%,
			#6a747d 100%
		);
	box-shadow:
		0 10px 22px rgba(35, 45, 55, 0.22),
		inset 0 1px 0 rgba(255, 255, 255, 0.7),
		inset 0 -1px 0 rgba(0, 0, 0, 0.25);
	transform: translateX(-50%);
}

.nobo-animated-flag::after {
	content: "";
	position: absolute;
	top: 0.4%;
	left: 21.5%;
	z-index: 4;
	width: clamp(15px, 3.4%, 26px);
	aspect-ratio: 1;
	border-radius: 999px;
	/* Spherical finial: bright off-center highlight, deep underside,
	   layered inset shadows for the metal sheen. */
	background: radial-gradient(
		circle at 32% 28%,
		#ffffff 0 12%,
		#e6ecf0 28%,
		#aab4bc 58%,
		#5a6670 92%,
		#3f4a52 100%
	);
	box-shadow:
		0 6px 14px rgba(35, 45, 55, 0.30),
		inset -2px -3px 6px rgba(0, 0, 0, 0.32),
		inset 2px 2px 4px rgba(255, 255, 255, 0.55);
	transform: translateX(-50%);
}

.nobo-animated-flag__canvas {
	position: absolute;
	inset: 0;
	z-index: 2;
	display: block;
	width: 100%;
	height: 100%;
	transition: opacity 220ms ease;
}

.nobo-animated-flag[data-nobo-animated-flag="ready"]::before,
.nobo-animated-flag[data-nobo-animated-flag="ready"]::after,
.nobo-animated-flag[data-nobo-animated-flag="ready"] .nobo-animated-flag__canvas {
	opacity: 1;
}

.nobo-animated-flag[data-nobo-animated-flag="ready"] > img {
	opacity: 0;
}

@media (prefers-reduced-motion: reduce) {
	.nobo-animated-flag > img {
		transition: none;
	}

	.nobo-animated-flag::before,
	.nobo-animated-flag::after,
	.nobo-animated-flag__canvas {
		transition: none;
	}
}

/* ----------------------------------------------------------------------
 * Camp values — selected Lottie-ready SVG story loops.
 * -------------------------------------------------------------------- */
.nobo-homepage-values {
	--nobo-browser-theme-color: #fbdcc6;
	--nobo-values-ink: var(--color-bark-900);
	--nobo-values-soft: var(--color-text-soft);
	--nobo-values-accent: var(--color-clay-500);
	--nobo-values-glow: rgba(199, 161, 82, 0.28);
	position: relative;
	width: 100vw;
	margin: 0 calc(50% - 50vw);
	padding: 4.5rem 1.25rem 4.85rem;
	overflow: hidden;
	background:
		radial-gradient(circle at 14% 14%, rgba(199, 161, 82, 0.18), transparent 20rem),
		radial-gradient(circle at 86% 24%, rgba(183, 101, 63, 0.15), transparent 22rem),
		linear-gradient(
			180deg,
			rgba(251, 246, 238, 0) 0%,
			rgba(251, 246, 238, 0.72) 18%,
			rgba(251, 246, 238, 0.78) 82%,
			rgba(251, 246, 238, 0) 100%
		);
	color: var(--nobo-values-ink);
}

.nobo-homepage-values::before,
.nobo-homepage-values::after {
	content: "";
	position: absolute;
	pointer-events: none;
}

.nobo-homepage-values::before {
	inset: 1.3rem max(-7vw, -5rem);
	background:
		linear-gradient(90deg, rgba(42, 23, 18, 0.055) 1px, transparent 1px),
		linear-gradient(180deg, rgba(42, 23, 18, 0.04) 1px, transparent 1px);
	background-size: 5.5rem 5.5rem;
	-webkit-mask-image: radial-gradient(ellipse at 50% 50%, #000 0 56%, transparent 78%);
	mask-image: radial-gradient(ellipse at 50% 50%, #000 0 56%, transparent 78%);
	opacity: 0.42;
}

.nobo-homepage-values::after {
	inset: auto 8% 1.6rem;
	height: 1px;
	background: linear-gradient(90deg, transparent, rgba(42, 23, 18, 0.22), transparent);
}

.nobo-homepage-values__inner {
	position: relative;
	z-index: 1;
	width: min(1180px, 100%);
	margin: 0 auto;
}

.nobo-homepage-values__header {
	margin: 0 auto 2.4rem;
	text-align: center;
}

.nobo-homepage-values__eyebrow {
	margin: 0 0 0.7rem;
	color: var(--color-clay-600);
	font-family: var(--font-family-body);
	font-size: 0.82rem;
	font-weight: 800;
	letter-spacing: 0.16em;
	line-height: 1.2;
	text-transform: uppercase;
}

.nobo-homepage-values__title {
	margin: 0;
	color: var(--color-heading);
	font-family: var(--font-family-display);
	font-size: 3rem;
	font-weight: 840;
	line-height: 1.02;
	letter-spacing: 0;
}

.nobo-homepage-values__grid {
	display: grid;
	grid-template-columns: repeat(5, minmax(0, 1fr));
	gap: clamp(1rem, 2.2vw, 2rem);
	margin: 0;
	padding: 0;
	list-style: none;
}

.nobo-homepage-values__item {
	min-width: 0;
}

.nobo-homepage-values__card {
	position: relative;
	display: grid;
	justify-items: center;
	align-content: start;
	gap: 1.05rem;
	min-height: 13rem;
	padding: 0.35rem 0.25rem;
	text-align: center;
}

.nobo-homepage-values__icon {
	position: relative;
	display: grid;
	place-items: center;
	width: 8.1rem;
	aspect-ratio: 1;
	border-radius: var(--radius-md);
	background:
		radial-gradient(circle at 50% 52%, rgba(255, 253, 248, 0.88), rgba(255, 250, 242, 0.5) 62%, transparent 63%),
		radial-gradient(circle at 50% 50%, var(--nobo-values-glow), transparent 70%);
}

.nobo-homepage-values__icon::before {
	content: "";
	position: absolute;
	inset: 1.02rem;
	border: 1px dashed rgba(42, 23, 18, 0.18);
	border-radius: var(--radius-full);
}

.nobo-homepage-values__svg {
	position: relative;
	z-index: 1;
	display: block;
	width: 5.65rem;
	height: 5.65rem;
	overflow: visible;
	color: var(--nobo-values-ink);
	fill: none;
	stroke: currentColor;
	stroke-linecap: round;
	stroke-linejoin: round;
	stroke-width: 2;
}

.nobo-homepage-values__accent {
	fill: var(--nobo-values-accent);
	stroke: none;
}

.nobo-homepage-values__label {
	margin: 0;
	color: var(--color-heading);
	font-family: var(--font-family-display);
	font-size: 2rem;
	font-weight: 820;
	line-height: 1.03;
	letter-spacing: 0;
}

.nobo-homepage-values__story {
	position: absolute;
	width: 1px;
	height: 1px;
	margin: -1px;
	padding: 0;
	overflow: hidden;
	clip: rect(0 0 0 0);
	white-space: nowrap;
	border: 0;
}

.nobo-homepage-values__item--respect .nobo-homepage-values__heart {
	animation: nobo-value-heart-rise 3.8s var(--ease-expressive) infinite;
	transform-box: fill-box;
	transform-origin: center;
}

.nobo-homepage-values__item--respect .nobo-homepage-values__hand-left {
	animation: nobo-value-cup-left 3.8s var(--ease-standard) infinite;
	transform-box: fill-box;
	transform-origin: right bottom;
}

.nobo-homepage-values__item--respect .nobo-homepage-values__hand-right {
	animation: nobo-value-cup-right 3.8s var(--ease-standard) infinite;
	transform-box: fill-box;
	transform-origin: left bottom;
}

.nobo-homepage-values__item--growth .nobo-homepage-values__stem {
	stroke-dasharray: 14;
	stroke-dashoffset: 0;
	animation: nobo-value-stem-grow 4.2s var(--ease-standard) infinite;
}

.nobo-homepage-values__item--growth .nobo-homepage-values__leaf-a {
	animation: nobo-value-sprout-right 4.2s var(--ease-expressive) infinite;
	transform-box: fill-box;
	transform-origin: left bottom;
}

.nobo-homepage-values__item--growth .nobo-homepage-values__leaf-b {
	animation: nobo-value-sprout-left 4.2s var(--ease-expressive) infinite;
	transform-box: fill-box;
	transform-origin: right bottom;
}

.nobo-homepage-values__item--connection .nobo-homepage-values__ring-a {
	animation: nobo-value-ring-shift-a 4.4s var(--ease-standard) infinite;
	transform-box: fill-box;
	transform-origin: center;
}

.nobo-homepage-values__item--connection .nobo-homepage-values__ring-b {
	animation: nobo-value-ring-shift-b 4.4s var(--ease-standard) infinite;
	transform-box: fill-box;
	transform-origin: center;
}

.nobo-homepage-values__item--connection .nobo-homepage-values__center-dot {
	animation: nobo-value-center-pulse 4.4s var(--ease-expressive) infinite;
	transform-box: fill-box;
	transform-origin: center;
}

.nobo-homepage-values__item--abundance .nobo-homepage-values__basket,
.nobo-homepage-values__item--abundance .nobo-homepage-values__basket-line {
	animation: nobo-value-basket-fill 4.6s var(--ease-standard) infinite;
	transform-box: fill-box;
	transform-origin: center bottom;
}

.nobo-homepage-values__item--abundance .nobo-homepage-values__leaf-accent {
	animation: nobo-value-leaf-drop 4.6s var(--ease-expressive) infinite;
	transform-box: fill-box;
	transform-origin: center;
}

.nobo-homepage-values__item--playfulness .nobo-homepage-values__kite {
	animation: nobo-value-kite-loop 4.8s var(--ease-standard) infinite;
	transform-box: fill-box;
	transform-origin: center;
}

.nobo-homepage-values__item--playfulness .nobo-homepage-values__tail {
	animation: nobo-value-tail-sway 4.8s var(--ease-standard) infinite;
	transform-box: fill-box;
	transform-origin: top center;
}

.nobo-homepage-values__item--playfulness .nobo-homepage-values__bow {
	animation: nobo-value-bow-flicker 4.8s var(--ease-expressive) infinite;
	transform-box: fill-box;
	transform-origin: center;
}

@keyframes nobo-value-heart-rise {
	0%,
	10%,
	52%,
	100% {
		transform: translateY(0) scale(1);
		opacity: 1;
	}
	20% {
		transform: translateY(6px) scale(0.84);
		opacity: 1;
	}
	38% {
		transform: translateY(-2px) scale(1.08);
		opacity: 1;
	}
}

@keyframes nobo-value-cup-left {
	0%,
	10%,
	42%,
	100% {
		transform: translateX(0) rotate(0);
	}
	20% {
		transform: translateX(-2px) rotate(-8deg);
	}
}

@keyframes nobo-value-cup-right {
	0%,
	10%,
	42%,
	100% {
		transform: translateX(0) rotate(0);
	}
	20% {
		transform: translateX(2px) rotate(8deg);
	}
}

@keyframes nobo-value-sprout-right {
	0%,
	10%,
	62%,
	100% {
		transform: scale(1) rotate(0);
		opacity: 1;
	}
	18% {
		transform: scale(0.72) rotate(-16deg);
		opacity: 1;
	}
	42% {
		transform: scale(1.05) rotate(4deg);
		opacity: 1;
	}
}

@keyframes nobo-value-sprout-left {
	0%,
	10%,
	68%,
	100% {
		transform: scale(1) rotate(0);
		opacity: 1;
	}
	24% {
		transform: scale(0.72) rotate(16deg);
		opacity: 1;
	}
	48% {
		transform: scale(1.04) rotate(-4deg);
		opacity: 1;
	}
}

@keyframes nobo-value-stem-grow {
	0%,
	10%,
	42%,
	100% {
		stroke-dashoffset: 0;
	}
	18% {
		stroke-dashoffset: 6;
	}
}

@keyframes nobo-value-ring-shift-a {
	0%,
	100% {
		transform: translateX(0) scale(1);
	}
	42% {
		transform: translateX(1.2px) scale(1.03);
	}
}

@keyframes nobo-value-ring-shift-b {
	0%,
	100% {
		transform: translateX(0) scale(1);
	}
	42% {
		transform: translateX(-1.2px) scale(1.03);
	}
}

@keyframes nobo-value-center-pulse {
	0%,
	100% {
		transform: scale(1);
	}
	44% {
		transform: scale(1.28);
	}
}

@keyframes nobo-value-basket-fill {
	0%,
	10%,
	42%,
	100% {
		transform: translateY(0);
	}
	18% {
		transform: translateY(3px);
	}
}

@keyframes nobo-value-leaf-drop {
	0%,
	10%,
	58%,
	100% {
		transform: translate(0, 0) rotate(0) scale(1);
		opacity: 1;
	}
	18% {
		transform: translate(0, -6px) rotate(-14deg) scale(0.84);
		opacity: 1;
	}
	38% {
		transform: translate(0, 0) rotate(4deg) scale(1.08);
		opacity: 1;
	}
}

@keyframes nobo-value-kite-loop {
	0%,
	100% {
		transform: translate(0, 0) rotate(0);
	}
	30% {
		transform: translate(4px, -6px) rotate(5deg);
	}
	62% {
		transform: translate(-3px, -2px) rotate(-4deg);
	}
}

@keyframes nobo-value-tail-sway {
	0%,
	100% {
		transform: rotate(0);
	}
	35% {
		transform: rotate(7deg);
	}
	66% {
		transform: rotate(-6deg);
	}
}

@keyframes nobo-value-bow-flicker {
	0%,
	100% {
		transform: scale(1) rotate(0);
	}
	34% {
		transform: scale(1.12) rotate(8deg);
	}
	66% {
		transform: scale(0.96) rotate(-7deg);
	}
}

@media (prefers-reduced-motion: reduce) {
	.nobo-homepage-values__svg * {
		animation: none !important;
		opacity: 1 !important;
		transform: none !important;
	}

	.nobo-homepage-values__item--growth .nobo-homepage-values__stem {
		stroke-dashoffset: 0;
	}
}

@media (max-width: 980px) {
	.nobo-homepage-values__grid {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}

	.nobo-homepage-values__item--playfulness {
		grid-column: 1 / -1;
	}
}

@media (max-width: 620px) {
	.nobo-homepage-values {
		padding: 3.35rem 1rem 3.65rem;
	}

	.nobo-homepage-values__title {
		font-size: 2.25rem;
	}

	.nobo-homepage-values__grid {
		grid-template-columns: 1fr;
		gap: 0.45rem;
	}

	.nobo-homepage-values__item--playfulness {
		grid-column: auto;
	}

	.nobo-homepage-values__card {
		min-height: 11.4rem;
	}

	.nobo-homepage-values__icon {
		width: 7.2rem;
	}

	.nobo-homepage-values__svg {
		width: 5rem;
		height: 5rem;
	}

	.nobo-homepage-values__label {
		font-size: 1.82rem;
	}
}

/* =================================================================
 * Visual direction (Camp Features / How We Run / By the Numbers):
 * Camp Features is the terrain-map chapter: warm field-journal canvas,
 * topographic/orbital hairlines, and uneven feature nodes so camp
 * infrastructure reads as an ecosystem. How We Run / By the Numbers
 * keep the quieter field-manual divider system. Clay stays the warm
 * secondary; magenta stays reserved for primary CTAs and true hierarchy.
 * ================================================================= */
.nobo-homepage-camp-features {
	--nobo-browser-theme-color: #fbf6ee;
	position: relative;
	overflow: hidden;
	box-sizing: border-box;
	width: 100vw;
	margin: 0 calc(50% - 50vw);
	padding: clamp(4.5rem, 7vw, 6.75rem) 1.25rem;
	/* Feathered veil instead of an opaque sand fill. The body's fixed
	   sunset gradient is what dissolves the seams at the top/bottom edges
	   (see LEARNINGS — opaque fills can't track the fixed gradient and
	   read as hard bands). The warm sand wash still lifts the bento cards
	   through the mid-section; the diagonal clay/gold tints layer on top. */
	background:
		linear-gradient(128deg, rgba(199, 161, 82, 0.16), transparent 34%),
		linear-gradient(312deg, rgba(183, 101, 63, 0.15), transparent 36%),
		linear-gradient(
			180deg,
			rgba(251, 246, 238, 0) 0%,
			rgba(251, 246, 238, 0.78) 14%,
			rgba(251, 246, 238, 0.78) 86%,
			rgba(251, 246, 238, 0) 100%
		);
	color: var(--color-text);
}

.nobo-homepage-camp-features::before,
.nobo-homepage-camp-features::after {
	content: "";
	position: absolute;
	pointer-events: none;
}

.nobo-homepage-camp-features::before {
	inset: 3.5rem max(-7vw, -5rem) 2.5rem;
	background:
		radial-gradient(ellipse 82% 46% at 52% 46%, transparent 61%, rgba(42, 23, 18, 0.11) 61.25%, transparent 61.7%),
		radial-gradient(ellipse 58% 34% at 50% 47%, transparent 58%, rgba(157, 81, 50, 0.13) 58.25%, transparent 58.85%),
		radial-gradient(ellipse 38% 22% at 51% 48%, transparent 57%, rgba(199, 161, 82, 0.16) 57.25%, transparent 58%);
	opacity: 0.82;
}

.nobo-homepage-camp-features::after {
	inset: 0;
	background:
		linear-gradient(90deg, rgba(42, 23, 18, 0.06) 1px, transparent 1px),
		linear-gradient(180deg, rgba(42, 23, 18, 0.045) 1px, transparent 1px);
	background-size: 5.5rem 5.5rem;
	-webkit-mask-image: radial-gradient(ellipse at 50% 48%, #000 0 58%, transparent 78%);
	mask-image: radial-gradient(ellipse at 50% 48%, #000 0 58%, transparent 78%);
	opacity: 0.32;
}

.nobo-homepage-camp-features__inner {
	position: relative;
	z-index: 1;
	width: min(1180px, 100%);
	margin: 0 auto;
}

.nobo-homepage-camp-features__header {
	max-width: 720px;
	margin: 0 auto 2.5rem;
	text-align: center;
}

.nobo-homepage-camp-features__eyebrow {
	margin: 0 0 0.7rem;
	color: var(--color-clay-600);
	font-family: var(--font-family-body);
	font-size: 0.82rem;
	font-weight: 800;
	letter-spacing: 0.16em;
	text-transform: uppercase;
}

.nobo-homepage-camp-features__title {
	margin: 0;
	color: var(--color-heading);
	font-family: var(--font-family-display);
	font-size: 2.25rem;
	font-weight: 800;
	line-height: 1.08;
	letter-spacing: 0;
}

.nobo-homepage-camp-features__intro {
	margin: 1rem auto 0;
	max-width: 58ch;
	color: var(--color-text-soft);
	font-size: 1.05rem;
	line-height: 1.6;
}

.nobo-homepage-camp-features__grid {
	position: relative;
	display: grid;
	grid-template-columns: repeat(12, minmax(0, 1fr));
	grid-auto-rows: minmax(8.25rem, max-content);
	gap: clamp(0.95rem, 1.8vw, 1.45rem);
	margin: 0;
	padding: 1.25rem 0 0;
	list-style: none;
}

.nobo-homepage-camp-features__grid::before {
	content: "";
	position: absolute;
	inset: 2.1rem 4% 3.4rem;
	z-index: 0;
	background:
		linear-gradient(114deg, transparent 0 17%, rgba(42, 23, 18, 0.13) 17.15% 17.38%, transparent 17.55% 100%),
		linear-gradient(32deg, transparent 0 36%, rgba(183, 101, 63, 0.14) 36.15% 36.38%, transparent 36.55% 100%),
		linear-gradient(158deg, transparent 0 47%, rgba(42, 23, 18, 0.1) 47.14% 47.38%, transparent 47.55% 100%),
		linear-gradient(68deg, transparent 0 64%, rgba(199, 161, 82, 0.17) 64.12% 64.36%, transparent 64.55% 100%);
	opacity: 0.58;
}

.nobo-homepage-camp-features__item {
	position: relative;
	z-index: 1;
	min-width: 0;
}

.nobo-homepage-camp-features__item::before,
.nobo-homepage-camp-features__item::after {
	content: "";
	position: absolute;
	top: 1rem;
	left: 1rem;
	pointer-events: none;
}

/* Soft halo that breathes behind the mark. */
.nobo-homepage-camp-features__item::after {
	z-index: 1;
	width: 1.5rem;
	height: 1.5rem;
	margin: -0.5rem 0 0 -0.5rem;
	border-radius: var(--radius-full);
	background: radial-gradient(
		circle,
		rgba(199, 161, 82, 0.42) 0%,
		rgba(199, 161, 82, 0.18) 45%,
		transparent 72%
	);
	opacity: 0.7;
	animation: nobo-camp-feature-halo 4.6s ease-in-out infinite;
}

/* The Nobo diamond-star: a four-point sparkle clipped from a gold gradient. */
.nobo-homepage-camp-features__item::before {
	z-index: 2;
	width: 0.95rem;
	height: 0.95rem;
	margin: -0.18rem 0 0 -0.18rem;
	background: radial-gradient(
		circle at 50% 38%,
		#f6e6bb 0%,
		var(--color-gold-400) 52%,
		var(--color-clay-500) 100%
	);
	clip-path: polygon(
		50% 0%,
		60% 40%,
		100% 50%,
		60% 60%,
		50% 100%,
		40% 60%,
		0% 50%,
		40% 40%
	);
	filter: drop-shadow(0 0 4px rgba(199, 161, 82, 0.7));
	transform-origin: center;
	animation: nobo-camp-feature-twinkle 3.8s ease-in-out infinite;
}

@keyframes nobo-camp-feature-twinkle {
	0%,
	100% {
		transform: scale(0.82) rotate(0deg);
		opacity: 0.72;
		filter: drop-shadow(0 0 3px rgba(199, 161, 82, 0.5));
	}
	45% {
		transform: scale(1) rotate(45deg);
		opacity: 1;
		filter: drop-shadow(0 0 7px rgba(199, 161, 82, 0.9));
	}
	60% {
		transform: scale(0.92) rotate(60deg);
		opacity: 0.95;
	}
}

@keyframes nobo-camp-feature-halo {
	0%,
	100% {
		transform: scale(0.78);
		opacity: 0.45;
	}
	45% {
		transform: scale(1.12);
		opacity: 0.85;
	}
}

/* Stagger each card's sparkle so the grid twinkles, not pulses in unison. */
.nobo-homepage-camp-features__item:nth-child(2)::before {
	animation-delay: 0.5s;
}
.nobo-homepage-camp-features__item:nth-child(3)::before {
	animation-delay: 1.1s;
}
.nobo-homepage-camp-features__item:nth-child(4)::before {
	animation-delay: 1.7s;
}
.nobo-homepage-camp-features__item:nth-child(5)::before {
	animation-delay: 0.8s;
}
.nobo-homepage-camp-features__item:nth-child(6)::before {
	animation-delay: 2.3s;
}
.nobo-homepage-camp-features__item:nth-child(7)::before {
	animation-delay: 1.4s;
}
.nobo-homepage-camp-features__item:nth-child(8)::before {
	animation-delay: 2.9s;
}
.nobo-homepage-camp-features__item:nth-child(9)::before {
	animation-delay: 0.3s;
}
.nobo-homepage-camp-features__item:nth-child(10)::before {
	animation-delay: 2s;
}
.nobo-homepage-camp-features__item:nth-child(11)::before {
	animation-delay: 1s;
}
.nobo-homepage-camp-features__item:nth-child(12)::before {
	animation-delay: 2.6s;
}

@media (prefers-reduced-motion: reduce) {
	.nobo-homepage-camp-features__item::before,
	.nobo-homepage-camp-features__item::after {
		animation: none;
	}
	.nobo-homepage-camp-features__item::before {
		opacity: 1;
		transform: scale(1);
	}
}

.nobo-homepage-camp-features__item:nth-child(1) {
	grid-column: 1 / span 4;
	grid-row: 1 / span 2;
}

.nobo-homepage-camp-features__item:nth-child(2) {
	grid-column: 5 / span 4;
	grid-row: 1;
}

.nobo-homepage-camp-features__item:nth-child(3) {
	grid-column: 9 / span 4;
	grid-row: 1 / span 2;
}

.nobo-homepage-camp-features__item:nth-child(4) {
	grid-column: 5 / span 3;
	grid-row: 2;
}

.nobo-homepage-camp-features__item:nth-child(5) {
	grid-column: 1 / span 4;
	grid-row: 3;
}

.nobo-homepage-camp-features__item:nth-child(6) {
	grid-column: 8 / span 5;
	grid-row: 3;
}

.nobo-homepage-camp-features__item:nth-child(7) {
	grid-column: 2 / span 5;
	grid-row: 4 / span 2;
}

.nobo-homepage-camp-features__item:nth-child(8) {
	grid-column: 7 / span 3;
	grid-row: 4;
}

.nobo-homepage-camp-features__item:nth-child(9) {
	grid-column: 10 / span 3;
	grid-row: 4 / span 2;
}

.nobo-homepage-camp-features__item:nth-child(10) {
	grid-column: 1 / span 3;
	grid-row: 6;
}

.nobo-homepage-camp-features__item:nth-child(11) {
	grid-column: 4 / span 5;
	grid-row: 6 / span 2;
}

.nobo-homepage-camp-features__item:nth-child(12) {
	grid-column: 9 / span 4;
	grid-row: 6;
}

.nobo-homepage-camp-features__item:nth-child(2),
.nobo-homepage-camp-features__item:nth-child(6),
.nobo-homepage-camp-features__item:nth-child(8),
.nobo-homepage-camp-features__item:nth-child(12) {
	transform: translateY(1.2rem);
}

.nobo-homepage-camp-features__item:nth-child(4),
.nobo-homepage-camp-features__item:nth-child(10) {
	transform: translateY(-0.75rem);
}

.nobo-homepage-camp-features__item:nth-child(1)::before,
.nobo-homepage-camp-features__item:nth-child(3)::before,
.nobo-homepage-camp-features__item:nth-child(7)::before,
.nobo-homepage-camp-features__item:nth-child(11)::before {
	background: radial-gradient(
		circle at 50% 38%,
		#fff5da 0%,
		var(--color-gold-400) 55%,
		var(--color-clay-500) 100%
	);
	filter: drop-shadow(0 0 6px rgba(231, 197, 122, 0.85));
}

.nobo-homepage-camp-features__item:nth-child(1)::after,
.nobo-homepage-camp-features__item:nth-child(3)::after,
.nobo-homepage-camp-features__item:nth-child(7)::after,
.nobo-homepage-camp-features__item:nth-child(11)::after {
	background: radial-gradient(
		circle,
		rgba(231, 197, 122, 0.5) 0%,
		rgba(231, 197, 122, 0.22) 45%,
		transparent 72%
	);
}

.nobo-homepage-camp-features__card {
	position: relative;
	display: flex;
	flex-direction: column;
	min-height: 100%;
	padding: clamp(1.25rem, 2vw, 1.65rem);
	overflow: hidden;
	border: 1px solid rgba(42, 23, 18, 0.14);
	border-radius: var(--radius-lg);
	background:
		linear-gradient(180deg, rgba(255, 253, 248, 0.88), rgba(255, 250, 242, 0.74)),
		rgba(255, 250, 242, 0.76);
	box-shadow: 0 18px 54px rgba(42, 23, 18, 0.08);
}

.nobo-homepage-camp-features__card::before,
.nobo-homepage-camp-features__card::after {
	content: "";
	position: absolute;
	pointer-events: none;
}

.nobo-homepage-camp-features__card::before {
	inset: 0.6rem;
	border: 1px solid rgba(42, 23, 18, 0.08);
	border-radius: calc(var(--radius-lg) - 0.35rem);
}

.nobo-homepage-camp-features__card::after {
	right: -1.4rem;
	bottom: -1.8rem;
	width: 7rem;
	height: 7rem;
	border: 1px solid rgba(183, 101, 63, 0.15);
	border-radius: var(--radius-full);
}

.nobo-homepage-camp-features__item:nth-child(1) .nobo-homepage-camp-features__card,
.nobo-homepage-camp-features__item:nth-child(3) .nobo-homepage-camp-features__card,
.nobo-homepage-camp-features__item:nth-child(7) .nobo-homepage-camp-features__card,
.nobo-homepage-camp-features__item:nth-child(11) .nobo-homepage-camp-features__card {
	justify-content: space-between;
	background:
		linear-gradient(180deg, rgba(42, 23, 18, 0.95), rgba(79, 51, 39, 0.9)),
		var(--color-bark-900);
	color: var(--color-sand-50);
}

.nobo-homepage-camp-features__icon {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 2.75rem;
	height: 2.75rem;
	margin-bottom: 1.1rem;
	border: 1px solid rgba(183, 101, 63, 0.3);
	border-radius: var(--radius-full);
	background: rgba(183, 101, 63, 0.12);
	color: var(--color-clay-600);
}

.nobo-homepage-camp-features__svg {
	width: 1.55rem;
	height: 1.55rem;
	fill: currentColor;
	stroke: none;
}

.nobo-homepage-camp-features__item:nth-child(1) .nobo-homepage-camp-features__icon,
.nobo-homepage-camp-features__item:nth-child(3) .nobo-homepage-camp-features__icon,
.nobo-homepage-camp-features__item:nth-child(7) .nobo-homepage-camp-features__icon,
.nobo-homepage-camp-features__item:nth-child(11) .nobo-homepage-camp-features__icon {
	border-color: rgba(251, 246, 238, 0.22);
	background: rgba(251, 246, 238, 0.14);
	color: var(--color-gold-400);
}

.nobo-homepage-camp-features__feature-title {
	margin: 0;
	color: var(--color-heading);
	font-size: clamp(1.16rem, 1.45vw, 1.36rem);
	font-weight: 800;
	line-height: 1.2;
}

.nobo-homepage-camp-features__item:nth-child(1) .nobo-homepage-camp-features__feature-title,
.nobo-homepage-camp-features__item:nth-child(3) .nobo-homepage-camp-features__feature-title,
.nobo-homepage-camp-features__item:nth-child(7) .nobo-homepage-camp-features__feature-title,
.nobo-homepage-camp-features__item:nth-child(11) .nobo-homepage-camp-features__feature-title {
	color: var(--color-white);
	font-size: clamp(1.45rem, 2.1vw, 1.95rem);
}

.nobo-homepage-camp-features__description {
	margin: 0.65rem 0 0;
	color: var(--color-text-soft);
	font-size: 0.98rem;
	line-height: 1.55;
}

.nobo-homepage-camp-features__item:nth-child(1) .nobo-homepage-camp-features__description,
.nobo-homepage-camp-features__item:nth-child(3) .nobo-homepage-camp-features__description,
.nobo-homepage-camp-features__item:nth-child(7) .nobo-homepage-camp-features__description,
.nobo-homepage-camp-features__item:nth-child(11) .nobo-homepage-camp-features__description {
	color: rgba(255, 250, 242, 0.82);
}

.nobo-homepage-camp-features__actions {
	display: flex;
	justify-content: center;
	margin-top: 2rem;
}

.nobo-homepage-camp-features__button {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-height: 3rem;
	padding: 0.95rem 1.7rem;
	border-radius: var(--radius-pill);
	background: var(--color-action);
	color: var(--color-on-action);
	font-size: 1rem;
	font-weight: 800;
	line-height: 1;
	text-decoration: none;
	transition: background-color var(--motion-fast) var(--ease-expressive),
		transform var(--motion-fast) var(--ease-expressive);
}

.nobo-homepage-camp-features__button:hover,
.nobo-homepage-camp-features__button:focus-visible {
	background: var(--color-action-hover);
	color: var(--color-on-action);
	text-decoration: none;
	transform: translateY(-2px);
}

/* Uniform 3 x 4 variant — used on the cost-share page. It drops the homepage
   full-bleed slab so the section sits inside the page rhythm and background. */
.nobo-homepage-camp-features--uniform {
	overflow: visible;
	width: min(1120px, calc(100vw - 2rem));
	margin: clamp(3.25rem, 6vw, 4.75rem) auto;
	padding: clamp(3.25rem, 6vw, 4.75rem) clamp(1rem, 2.2vw, 1.5rem);
	background: transparent;
	isolation: isolate;
}

.nobo-homepage-camp-features--uniform::before {
	inset: 0 auto 0 50%;
	width: min(100vw, 1440px);
	background:
		radial-gradient(ellipse 82% 46% at 52% 46%, transparent 61%, rgba(42, 23, 18, 0.11) 61.25%, transparent 61.7%),
		radial-gradient(ellipse 58% 34% at 50% 47%, transparent 58%, rgba(157, 81, 50, 0.13) 58.25%, transparent 58.85%),
		radial-gradient(ellipse 38% 22% at 51% 48%, transparent 57%, rgba(199, 161, 82, 0.16) 57.25%, transparent 58%),
		radial-gradient(
			ellipse at 50% 52%,
			rgba(251, 246, 238, 0.72) 0%,
			rgba(251, 246, 238, 0.48) 58%,
			rgba(251, 246, 238, 0) 100%
		);
	opacity: 0.9;
	transform: translateX(-50%);
}

.nobo-homepage-camp-features--uniform::after {
	inset: 0 auto 0 50%;
	width: min(100vw, 1440px);
	background:
		linear-gradient(90deg, rgba(42, 23, 18, 0.06) 1px, transparent 1px),
		linear-gradient(180deg, rgba(42, 23, 18, 0.045) 1px, transparent 1px);
	background-size: 5.5rem 5.5rem;
	-webkit-mask-image: radial-gradient(ellipse at 50% 48%, #000 0 58%, transparent 78%);
	mask-image: radial-gradient(ellipse at 50% 48%, #000 0 58%, transparent 78%);
	opacity: 0.28;
	transform: translateX(-50%);
}

.nobo-homepage-camp-features--uniform .nobo-homepage-camp-features__inner {
	width: 100%;
}

.nobo-homepage-camp-features--uniform .nobo-homepage-camp-features__grid {
	grid-template-columns: repeat(3, minmax(0, 1fr));
	grid-auto-rows: 1fr;
	gap: clamp(1rem, 2vw, 1.5rem);
	padding-top: 0;
}

.nobo-homepage-camp-features--uniform .nobo-homepage-camp-features__grid > .nobo-homepage-camp-features__item {
	grid-column: auto;
	grid-row: auto;
	transform: none;
}

@media (min-width: 782px) and (max-width: 1040px) {
	.nobo-homepage-camp-features--uniform .nobo-homepage-camp-features__grid {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}

	.nobo-homepage-camp-features--uniform .nobo-homepage-camp-features__grid > .nobo-homepage-camp-features__item:nth-child(1),
	.nobo-homepage-camp-features--uniform .nobo-homepage-camp-features__grid > .nobo-homepage-camp-features__item:nth-child(3),
	.nobo-homepage-camp-features--uniform .nobo-homepage-camp-features__grid > .nobo-homepage-camp-features__item:nth-child(7),
	.nobo-homepage-camp-features--uniform .nobo-homepage-camp-features__grid > .nobo-homepage-camp-features__item:nth-child(11) {
		grid-column: auto;
	}
}

.nobo-homepage-camp-group-photos {
	--nobo-browser-theme-color: #ffd7c6;
	width: 100vw;
	margin: 0 calc(50% - 50vw);
	padding: 5.5rem 1.25rem;
	/* The page <body> carries a fixed sunset gradient that every section
	   shows through. An opaque fill here cannot track that fixed gradient
	   and reads as a hard-edged band (see LEARNINGS, camper-origins). So
	   paint only a translucent warm veil that fades to zero alpha at the
	   top and bottom — the section dissolves into the continuous body
	   gradient with no seam, while the mid wash still lifts the white
	   polaroid frames. */
	background: linear-gradient(
		180deg,
		rgba(251, 246, 238, 0) 0%,
		rgba(251, 246, 238, 0.62) 22%,
		rgba(251, 246, 238, 0.62) 78%,
		rgba(251, 246, 238, 0) 100%
	);
	color: var(--color-text);
}

.nobo-homepage-camp-group-photos__inner {
	width: min(1180px, 100%);
	margin: 0 auto;
}

.nobo-homepage-camp-group-photos__header {
	max-width: 720px;
	margin: 0 auto 2.75rem;
	text-align: center;
}

.nobo-homepage-camp-group-photos__eyebrow {
	margin: 0 0 0.55rem;
	color: var(--color-clay-600);
	font-family: var(--font-family-body);
	font-size: 0.86rem;
	font-weight: 800;
	letter-spacing: 0;
	text-transform: uppercase;
}

.nobo-homepage-camp-group-photos__title {
	margin: 0;
	color: var(--color-heading);
	font-family: var(--font-family-display);
	font-size: 2.25rem;
	font-weight: 800;
	line-height: 1.08;
	letter-spacing: 0;
}

.nobo-homepage-camp-group-photos__intro {
	margin: 1rem auto 0;
	max-width: 58ch;
	color: var(--color-text-soft);
	font-size: 1.05rem;
	line-height: 1.6;
}

.nobo-homepage-camp-group-photos__wall {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
	gap: clamp(1.75rem, 3.2vw, 3.25rem);
	align-items: start;
	justify-items: center;
	margin: 0;
	padding: 0.5rem 0;
	list-style: none;
}

.nobo-homepage-camp-group-photos__item {
	--nobo-polaroid-rotate: 0deg;
	--nobo-polaroid-shift: 0px;
	--nobo-polaroid-accent: var(--color-clay-500);
	width: min(420px, 100%);
	transform: translateY(var(--nobo-polaroid-shift)) rotate(var(--nobo-polaroid-rotate));
	transition: transform var(--motion-base, 240ms) var(--ease-expressive),
		filter var(--motion-base, 240ms) var(--ease-expressive);
	will-change: transform;
}

/* Shared polaroid frame chrome — border + paper gradient. Per-section rules
   below set their own padding/shadow so the wall reads larger than the row. */
.nobo-homepage-camp-group-photos__frame,
.nobo-homepage-year-seven__frame {
	margin: 0;
	border: 1px solid;
	border-color: #ffffff hsl(34deg 22% 78%) hsl(28deg 24% 58%) hsl(34deg 22% 78%);
	border-radius: 3px;
	background: linear-gradient(180deg, #fffdf8, #f4ece0);
}

.nobo-homepage-camp-group-photos__frame {
	padding: clamp(12px, 4%, 18px);
	padding-bottom: clamp(36px, 14%, 56px);
	box-shadow:
		0 2px 4px rgba(59, 36, 27, 0.18),
		0 14px 28px rgba(59, 36, 27, 0.16);
}

.nobo-homepage-camp-group-photos__image {
	display: block;
	width: 100%;
	height: auto;
	aspect-ratio: 1 / 1;
	object-fit: cover;
}

.nobo-homepage-camp-group-photos__item--upcoming {
	grid-column: 1 / -1;
	justify-self: center;
	width: min(740px, 100%);
	margin-top: clamp(0.35rem, 1.8vw, 1.25rem);
	transform: none;
}

.nobo-homepage-camp-group-photos__item--upcoming .nobo-homepage-camp-group-photos__frame {
	padding: 0;
	border: 0;
	background: transparent;
	box-shadow: none;
}

.nobo-homepage-camp-group-photos__placeholder {
	--nobo-camera-slot-left: 19.5%;
	--nobo-camera-slot-top: 74.85%;
	--nobo-camera-slot-width: 61%;
	--nobo-camera-slot-height: 3.7%;
	position: relative;
	display: block;
	width: 100%;
	aspect-ratio: 1 / 1;
	overflow: visible;
	border-radius: 2px;
	isolation: isolate;
}

.nobo-homepage-camp-group-photos__placeholder::after {
	content: "";
	position: absolute;
	top: var(--nobo-camera-slot-top);
	left: var(--nobo-camera-slot-left);
	z-index: 5;
	display: block;
	width: var(--nobo-camera-slot-width);
	height: var(--nobo-camera-slot-height);
	border-radius: 7px;
	background:
		linear-gradient(90deg, rgba(69, 36, 28, 0.32), rgba(255, 224, 209, 0.18), rgba(69, 36, 28, 0.32)) 50% 52% / 92% 18% no-repeat,
		linear-gradient(180deg, #321915 0%, #140807 100%);
	box-shadow:
		0 2px 4px rgba(25, 10, 12, 0.2),
		inset 0 1px 0 rgba(255, 208, 189, 0.28);
	pointer-events: none;
}

.nobo-homepage-camp-group-photos__camera {
	position: absolute;
	inset: 0;
	z-index: 3;
	display: block;
	width: 100%;
	height: 100%;
	filter: drop-shadow(0 24px 28px rgba(59, 36, 27, 0.24));
}

.nobo-homepage-camp-group-photos__camera-ground {
	display: none;
	fill: rgba(25, 10, 12, 0.22);
}

.nobo-homepage-camp-group-photos__camera-body {
	fill: url(#nobo-camera-body-fill);
}

.nobo-homepage-camp-group-photos__camera-body-highlight {
	fill: rgba(255, 255, 255, 0.48);
}

.nobo-homepage-camp-group-photos__camera-top-cap,
.nobo-homepage-camp-group-photos__camera-base {
	fill: url(#nobo-camera-sunset-fill);
}

.nobo-homepage-camp-group-photos__camera-top-highlight {
	fill: none;
	stroke: rgba(255, 250, 242, 0.62);
	stroke-linecap: round;
	stroke-width: 6px;
}

.nobo-homepage-camp-group-photos__camera-base {
	filter: drop-shadow(0 -5px 8px rgba(157, 81, 50, 0.22));
}

.nobo-homepage-camp-group-photos__camera-base-highlight {
	fill: rgba(255, 250, 242, 0.3);
}

.nobo-homepage-camp-group-photos__camera-viewfinder {
	fill: url(#nobo-camera-viewfinder-fill);
	filter: drop-shadow(0 4px 5px rgba(0, 0, 0, 0.24));
}

.nobo-homepage-camp-group-photos__camera-viewfinder-glint {
	fill: rgba(255, 255, 255, 0.2);
}

.nobo-homepage-camp-group-photos__camera-flash {
	filter: drop-shadow(0 5px 6px rgba(25, 10, 12, 0.2));
}

.nobo-homepage-camp-group-photos__camera-flash-bezel {
	fill: #17191a;
}

.nobo-homepage-camp-group-photos__camera-flash-glass {
	fill: url(#nobo-camera-flash-fill);
}

.nobo-homepage-camp-group-photos__camera-flash-ring {
	fill: none;
	stroke: rgba(255, 255, 255, 0.58);
	stroke-width: 2px;
}

.nobo-homepage-camp-group-photos__camera-flash-sheen {
	fill: none;
	stroke: rgba(255, 255, 255, 0.74);
	stroke-linecap: round;
	stroke-width: 4px;
}

.nobo-homepage-camp-group-photos__camera-shutter {
	fill: #fa221d;
	filter: drop-shadow(0 4px 4px rgba(99, 16, 12, 0.28));
}

.nobo-homepage-camp-group-photos__camera-shutter-highlight {
	fill: rgba(255, 255, 255, 0.2);
}

.nobo-homepage-camp-group-photos__camera-side-button {
	fill: #0d0d0e;
	filter: drop-shadow(0 3px 3px rgba(0, 0, 0, 0.18));
}

.nobo-homepage-camp-group-photos__camera-side-button-inner {
	fill: #f4f3ef;
	stroke: rgba(36, 22, 18, 0.16);
	stroke-width: 2px;
}

.nobo-homepage-camp-group-photos__camera-side-button-mark {
	fill: none;
	stroke: rgba(36, 22, 18, 0.2);
	stroke-linecap: round;
	stroke-width: 2px;
}

.nobo-homepage-camp-group-photos__camera-printer {
	fill: url(#nobo-camera-slot-fill);
	stroke: rgba(255, 208, 189, 0.46);
	stroke-width: 1px;
	animation: nobo-camp-group-printer-cue 6.8s ease-in-out infinite;
}

.nobo-homepage-camp-group-photos__camera-printer-glow {
	fill: rgba(255, 208, 189, 0.34);
	animation: nobo-camp-group-printer-glow 6.8s ease-in-out infinite;
}

.nobo-homepage-camp-group-photos__camera-rainbow rect:nth-child(1) {
	fill: var(--color-magenta-500);
}

.nobo-homepage-camp-group-photos__camera-rainbow rect:nth-child(2) {
	fill: var(--color-clay-500);
}

.nobo-homepage-camp-group-photos__camera-rainbow rect:nth-child(3) {
	fill: var(--color-gold-400);
}

.nobo-homepage-camp-group-photos__camera-rainbow rect:nth-child(4) {
	fill: var(--color-sand-200);
}

.nobo-homepage-camp-group-photos__camera-lens {
	filter: drop-shadow(0 10px 12px rgba(25, 10, 12, 0.42));
}

.nobo-homepage-camp-group-photos__camera-lens-shadow {
	fill: rgba(25, 10, 12, 0.18);
}

.nobo-homepage-camp-group-photos__camera-lens-accent {
	fill: #f2b083;
}

.nobo-homepage-camp-group-photos__camera-lens-bezel {
	fill: #202124;
}

.nobo-homepage-camp-group-photos__camera-lens-ring {
	fill: #060608;
	stroke: rgba(255, 255, 255, 0.08);
	stroke-width: 2px;
}

.nobo-homepage-camp-group-photos__camera-lens-ridge {
	fill: none;
	stroke: rgba(255, 255, 255, 0.1);
	stroke-width: 2px;
}

.nobo-homepage-camp-group-photos__camera-lens-core {
	fill: #09090b;
}

.nobo-homepage-camp-group-photos__camera-lens-glass {
	fill: url(#nobo-camera-lens-glass-fill);
	animation: nobo-camp-group-camera-glint 6.8s ease-in-out infinite;
}

.nobo-homepage-camp-group-photos__camera-lens-pupil {
	fill: #050202;
}

.nobo-homepage-camp-group-photos__camera-lens-glint {
	fill: rgba(255, 208, 189, 0.86);
}

.nobo-homepage-camp-group-photos__camera-lens-glint-sub {
	fill: rgba(255, 250, 240, 0.55);
}

.nobo-homepage-camp-group-photos__camera-lens-type {
	fill: rgba(239, 239, 232, 0.68);
	font-family: var(--font-family-body);
	font-size: 8px;
	font-weight: 700;
	letter-spacing: 0.18em;
}

.nobo-homepage-camp-group-photos__camera-label-badge {
	fill: rgba(255, 208, 189, 0.26);
}

.nobo-homepage-camp-group-photos__camera-label {
	fill: var(--color-clay-600);
	font-family: var(--font-family-body);
	font-size: 13px;
	font-weight: 800;
	letter-spacing: 0.08em;
}

.nobo-homepage-camp-group-photos__camera-flash-burst {
	fill: #fffaf2;
	opacity: 0;
	transform-box: fill-box;
	transform-origin: center;
	animation: nobo-camp-group-camera-flash 6.8s ease-out infinite;
}

.nobo-homepage-camp-group-photos__print-channel {
	position: absolute;
	left: 50%;
	top: calc(var(--nobo-camera-slot-top) + var(--nobo-camera-slot-height));
	z-index: 4;
	width: min(50%, 300px);
	height: 58%;
	overflow: hidden;
	transform: translateX(-50%) rotate(-1deg);
	transform-origin: top center;
	pointer-events: none;
}

.nobo-homepage-camp-group-photos__developing-photo {
	position: relative;
	display: flex;
	flex-direction: column;
	width: 100%;
	min-height: 0;
	padding: 10px 10px 15px;
	border: 1px solid rgba(59, 36, 27, 0.22);
	background: linear-gradient(180deg, #fffdf8, #f3eadc);
	box-shadow:
		0 2px 5px rgba(59, 36, 27, 0.14),
		0 14px 24px -18px rgba(25, 10, 12, 0.36);
	transform: translateY(-112%);
	transform-origin: top center;
	animation: nobo-camp-group-photo-eject 6.8s cubic-bezier(0.18, 0.72, 0.24, 1) infinite;
	will-change: transform;
}

.nobo-homepage-camp-group-photos__developing-image {
	position: relative;
	aspect-ratio: 16 / 9;
	overflow: hidden;
	background:
		radial-gradient(circle at 76% 18%, rgba(255, 217, 149, 0.95), transparent 16%),
		linear-gradient(180deg, #5f3448 0%, #7a3f4e 44%, #d58a72 100%);
	filter: saturate(0.42) contrast(0.9);
	animation: nobo-camp-group-photo-develop 6.8s ease-in-out infinite;
}

.nobo-homepage-camp-group-photos__developing-image::before {
	position: absolute;
	inset: 48% 0 0;
	background: linear-gradient(155deg, #241019 0%, #4a2235 50%, #c7a152 100%);
	content: "";
	opacity: 0.74;
}

.nobo-homepage-camp-group-photos__developing-sun {
	position: absolute;
	top: 16%;
	right: 16%;
	width: 22%;
	aspect-ratio: 1;
	border-radius: 999px;
	background: var(--nobo-polaroid-accent);
	opacity: 0.84;
}

.nobo-homepage-camp-group-photos__developing-playa {
	position: absolute;
	right: 6%;
	bottom: 4%;
	left: 6%;
	height: 42%;
	opacity: 0.92;
}

.nobo-homepage-camp-group-photos__developing-playa-line,
.nobo-homepage-camp-group-photos__developing-temple-line,
.nobo-homepage-camp-group-photos__developing-playa-man-rigging {
	fill: none;
	stroke-linecap: round;
	stroke-linejoin: round;
}

.nobo-homepage-camp-group-photos__developing-playa-line {
	stroke: #fffaf2;
	stroke-width: 2px;
}

.nobo-homepage-camp-group-photos__developing-temple {
	opacity: 0.46;
}

.nobo-homepage-camp-group-photos__developing-temple-line {
	stroke: #ffe4ba;
	stroke-width: 1.25px;
	opacity: 0.68;
}

.nobo-homepage-camp-group-photos__developing-playa-man-effigy {
	opacity: 0.96;
}

.nobo-homepage-camp-group-photos__developing-playa-man-rigging {
	stroke: #ffe4ba;
	stroke-width: 0.45px;
	opacity: 0.64;
	vector-effect: non-scaling-stroke;
}

.nobo-homepage-camp-group-photos__developing-banana-duck {
	opacity: 0.98;
}

.nobo-homepage-camp-group-photos__developing-copy {
	display: flex;
	flex-direction: column;
	gap: 0.32rem;
	margin-top: 0.55rem;
	color: #3b241b;
	text-align: center;
}

.nobo-homepage-camp-group-photos__placeholder-kicker {
	color: var(--color-clay-600);
	font-size: 0.68rem;
	font-weight: 800;
	letter-spacing: 0.08em;
	line-height: 1.2;
	text-transform: uppercase;
}

.nobo-homepage-camp-group-photos__placeholder-line {
	max-width: 12rem;
	margin: 0 auto;
	font-family: var(--font-family-display);
	font-size: 1.28rem;
	font-style: italic;
	font-weight: 800;
	line-height: 0.96;
	text-wrap: balance;
}

/* Polaroid eject: the print channel clips the film above the slot, then lets
   the paper drop from the printer opening. */
@keyframes nobo-camp-group-photo-eject {
	0%,
	9% {
		transform: translateY(-112%);
	}

	30%,
	100% {
		transform: translateY(0);
	}
}

/* Real Polaroid film exits as an opaque, near-black rectangle while the
   reagent spreads, then the image emerges through a hazy intermediate before
   reaching full color. Develop holds dark until the eject completes (30%). */
@keyframes nobo-camp-group-photo-develop {
	0%,
	30% {
		filter: brightness(0.05) contrast(0.18) saturate(0);
		opacity: 1;
	}

	44% {
		filter: brightness(0.22) contrast(0.42) saturate(0.18);
		opacity: 1;
	}

	59% {
		filter: brightness(0.56) contrast(0.78) saturate(0.6);
		opacity: 1;
	}

	72%,
	100% {
		filter: brightness(1) contrast(1) saturate(1);
		opacity: 1;
	}
}

@keyframes nobo-camp-group-camera-flash {
	0%,
	12%,
	100% {
		opacity: 0;
		transform: scale(0.35);
	}

	17% {
		opacity: 0.42;
		transform: scale(1);
	}

	25% {
		opacity: 0;
		transform: scale(1.18);
	}
}

@keyframes nobo-camp-group-printer-cue {
	0%,
	12%,
	100% {
		stroke: rgba(255, 208, 189, 0.46);
		filter: none;
	}

	18% {
		stroke: rgba(199, 161, 82, 0.78);
		filter: drop-shadow(0 0 8px rgba(199, 161, 82, 0.38));
	}

	30% {
		stroke: rgba(255, 250, 242, 0.46);
	}
}

@keyframes nobo-camp-group-printer-glow {
	0%,
	12%,
	100% {
		opacity: 0.32;
	}

	18%,
	30% {
		opacity: 0.78;
	}
}

@keyframes nobo-camp-group-camera-glint {
	0%,
	18%,
	100% {
		opacity: 0.45;
		transform: translate(0, 0);
	}

	24% {
		opacity: 0.82;
		transform: translate(8px, -6px);
	}
}

.nobo-homepage-camp-group-photos__caption {
	display: flex;
	flex-direction: column;
	gap: 0.3rem;
	margin: clamp(14px, 7%, 24px) 0 0;
	text-align: center;
}

.nobo-homepage-camp-group-photos__item--upcoming .nobo-homepage-camp-group-photos__caption {
	margin-top: clamp(8.4rem, 10vw, 9.2rem);
}

.nobo-homepage-camp-group-photos__item--upcoming .nobo-homepage-camp-group-photos__year {
	font-size: 2.05rem;
}

.nobo-homepage-camp-group-photos__year {
	color: var(--color-bark-800);
	font-family: var(--font-family-display);
	font-size: 1.7rem;
	font-style: italic;
	font-weight: 700;
	line-height: 1;
}

.nobo-homepage-camp-group-photos__theme {
	color: var(--color-clay-600);
	font-family: var(--font-family-body);
	font-size: 0.74rem;
	font-weight: 700;
	letter-spacing: 0.08em;
	line-height: 1.25;
	text-transform: uppercase;
}

a.nobo-homepage-camp-group-photos__theme--link {
	text-decoration: none;
	transition: color var(--motion-base, 240ms) var(--ease-expressive);
}

a.nobo-homepage-camp-group-photos__theme--link:hover,
a.nobo-homepage-camp-group-photos__theme--link:focus-visible {
	color: var(--color-bark-800);
	text-decoration: underline;
	text-underline-offset: 0.25em;
}

.nobo-homepage-camp-group-photos__item:hover,
.nobo-homepage-camp-group-photos__item:focus-within {
	position: relative;
	z-index: 2;
	transform: translateY(calc(var(--nobo-polaroid-shift) - 10px)) rotate(0deg) scale(1.04);
}

.nobo-homepage-camp-group-photos__item--upcoming:hover,
.nobo-homepage-camp-group-photos__item--upcoming:focus-within {
	transform: translateY(-8px) scale(1.025);
}

.nobo-homepage-camp-group-photos__item:hover .nobo-homepage-camp-group-photos__frame,
.nobo-homepage-camp-group-photos__item:focus-within .nobo-homepage-camp-group-photos__frame {
	box-shadow:
		0 6px 10px rgba(59, 36, 27, 0.22),
		0 22px 48px rgba(59, 36, 27, 0.22);
}

.nobo-homepage-camp-group-photos__item--upcoming:hover .nobo-homepage-camp-group-photos__frame,
.nobo-homepage-camp-group-photos__item--upcoming:focus-within .nobo-homepage-camp-group-photos__frame {
	box-shadow: none;
}

@media (min-width: 1040px) {
	.nobo-homepage-camp-group-photos__item:nth-last-child(2) {
		grid-column: 1;
	}

	.nobo-homepage-camp-group-photos__item--upcoming {
		grid-column: 2 / span 2;
		align-self: start;
		width: min(620px, 100%);
		margin-top: 0;
	}
}

@media (prefers-reduced-motion: reduce) {
	.nobo-homepage-camp-group-photos__item {
		transition: none;
		transform: none;
	}

	.nobo-homepage-camp-group-photos__item:hover,
	.nobo-homepage-camp-group-photos__item:focus-within {
		transform: scale(1.02);
	}

	.nobo-homepage-camp-group-photos__developing-photo,
	.nobo-homepage-camp-group-photos__developing-image,
	.nobo-homepage-camp-group-photos__camera-lens-glass,
	.nobo-homepage-camp-group-photos__camera-printer,
	.nobo-homepage-camp-group-photos__camera-printer-glow,
	.nobo-homepage-camp-group-photos__camera-flash-burst {
		animation: none;
	}

	.nobo-homepage-camp-group-photos__developing-photo {
		transform: translateY(0);
	}

	.nobo-homepage-camp-group-photos__developing-image {
		filter: saturate(1) contrast(1) brightness(1);
		opacity: 1;
	}
}

.nobo-camper-origins {
	--nobo-browser-theme-color: #3b2233;
	position: relative;
	width: 100vw;
	margin: 0 calc(50% - 50vw);
	padding: 4.75rem 1.25rem;
	overflow: hidden;
	/* Warm sunset bridge: starts at the sand the camp-features section ends
	   on, drops through clay/plum into a warm bark body, and lands on the
	   footer-top plum so both seams dissolve. The Mapbox canvas is fully
	   transparent (setFog(null)), so this gradient — not a flat fill — is
	   what shows around and behind the globe. */
	background:
		radial-gradient(circle at 72% 50%, rgba(10, 5, 8, 0.32), transparent 52%),
		radial-gradient(circle at 90% 20%, rgba(237, 25, 129, 0.16), transparent 40%),
		radial-gradient(circle at 14% 80%, rgba(199, 161, 82, 0.1), transparent 46%),
		linear-gradient(
			180deg,
			#f3ebde 0%,
			#d98a72 6%,
			#7a3f4e 14%,
			#3b2233 24%,
			#2a1712 52%,
			#241019 82%,
			#3b2233 100%
		);
	color: #f6e8dd;
}

/* Faint warm vignette; mix-blend softens long-gradient banding. */
.nobo-camper-origins::before {
	position: absolute;
	inset: 0;
	background:
		radial-gradient(circle at 70% 42%, rgba(237, 25, 129, 0.1), transparent 55%),
		radial-gradient(ellipse at 50% 120%, rgba(0, 0, 0, 0.35), transparent 60%);
	content: "";
	opacity: 0.9;
	mix-blend-mode: soft-light;
	pointer-events: none;
}

.nobo-camper-origins__inner {
	position: relative;
	z-index: 1;
	display: grid;
	grid-template-columns: minmax(280px, 0.75fr) minmax(360px, 1.25fr);
	gap: clamp(2rem, 4vw, 4.75rem);
	align-items: center;
	width: min(1180px, 100%);
	margin: 0 auto;
}

.nobo-camper-origins__copy {
	position: relative;
	z-index: 2;
}

.nobo-camper-origins__eyebrow {
	margin: 0 0 0.7rem;
	color: #c7a152;
	font-size: 0.82rem;
	font-weight: 800;
	letter-spacing: 0;
	text-transform: uppercase;
}

.nobo-camper-origins__title {
	margin: 0;
	color: #ffffff;
	font-family: var(--font-family-display);
	font-size: clamp(2.15rem, 4vw, 4rem);
	font-weight: 800;
	line-height: 0.98;
	letter-spacing: 0;
}

.nobo-camper-origins__intro {
	max-width: 34rem;
	margin: 1.15rem 0 0;
	color: rgba(246, 232, 221, 0.78);
	font-size: 1.08rem;
	line-height: 1.65;
}

.nobo-camper-origins__stats {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: 0.75rem;
	margin: 2rem 0 0;
}

.nobo-camper-origins__stat {
	min-width: 0;
	padding-block: 0.85rem;
	border-top: 1px solid rgba(237, 25, 129, 0.34);
}

.nobo-camper-origins__stat dt {
	color: rgba(246, 232, 221, 0.62);
	font-size: 0.72rem;
	font-weight: 800;
	letter-spacing: 0;
	line-height: 1.2;
	text-transform: uppercase;
}

.nobo-camper-origins__stat dd {
	margin: 0.35rem 0 0;
	color: #ffffff;
	font-size: 1.45rem;
	font-weight: 800;
	line-height: 1;
}

.nobo-camper-origins__stage {
	position: relative;
	height: clamp(340px, 46vw, 590px);
	isolation: isolate;
	container-type: size;
	--nobo-globe-map-inset-top: -20%;
	--nobo-globe-map-inset-right: -24%;
	--nobo-globe-map-inset-bottom: -18%;
	--nobo-globe-map-inset-left: -18%;
	/* Fallback for browsers without container query units. */
	--nobo-globe-r: clamp(195px, 18vw, 285px);
}

@supports (width: 1cqw) {
	.nobo-camper-origins__stage {
		--nobo-globe-r: clamp(205px, min(46cqw, 50cqh), 318px);
	}
}

/* Artificial atmosphere rim-glow for depth — NOT a blend. A previous
   soft-light shade darkened the page inside this element's rectangle and
   read as a returned Mapbox background box. This is a pure radial glow:
   transparent center (globe/land shows), a warm + magenta luminous band at
   the sphere limb, then fully transparent well before the box edge so there
   is no rectangle. Paired with the Mapbox hillshade (real land relief) and
   the ::after backlight, it gives the sphere depth without any fill. */
.nobo-camper-origins__stage::before {
	position: absolute;
	inset:
		var(--nobo-globe-map-inset-top)
		var(--nobo-globe-map-inset-right)
		var(--nobo-globe-map-inset-bottom)
		var(--nobo-globe-map-inset-left);
	z-index: 1;
	content: "";
	pointer-events: none;
	background: radial-gradient(
		circle var(--nobo-globe-r) at 50% 50%,
		rgba(237, 25, 129, 0) 0 88%,
		rgba(255, 209, 168, 0.1) 93%,
		rgba(237, 25, 129, 0.24) 97%,
		rgba(237, 25, 129, 0) 100%
	);
}

/* Soft magenta backlight behind the now-transparent globe canvas. This
   replaces the removed Mapbox fog atmosphere — it sits at z-index -1 (the
   stage uses isolation:isolate) so it glows around the sphere, composited
   over the real page background, with no rectangular fill. */
.nobo-camper-origins__stage::after {
	position: absolute;
	inset:
		var(--nobo-globe-map-inset-top)
		var(--nobo-globe-map-inset-right)
		var(--nobo-globe-map-inset-bottom)
		var(--nobo-globe-map-inset-left);
	z-index: -1;
	background: radial-gradient(
		circle calc(var(--nobo-globe-r) * 1.34) at 50% 50%,
		rgba(237, 25, 129, 0) 0 72%,
		rgba(237, 25, 129, 0.2) 80%,
		rgba(255, 138, 0, 0.08) 91%,
		rgba(237, 25, 129, 0) 100%
	);
	content: "";
	opacity: 0.82;
}

/* The globe floats on the page background. With Mapbox fog unset
   (setFog(null)) the WebGL canvas is transparent everywhere outside the
   sphere, so the page's own warm gradient — not a flat fill — shows around
   and through it. No mask/scrim needed (and mask-image over a WebGL canvas
   fails to composite in Chrome anyway). */
.nobo-camper-origins__map {
	position: absolute;
	inset:
		var(--nobo-globe-map-inset-top)
		var(--nobo-globe-map-inset-right)
		var(--nobo-globe-map-inset-bottom)
		var(--nobo-globe-map-inset-left);
	display: block;
}

.nobo-camper-origins__stage > .nobo-camper-origins__map.mapboxgl-map {
	position: absolute;
	inset:
		var(--nobo-globe-map-inset-top)
		var(--nobo-globe-map-inset-right)
		var(--nobo-globe-map-inset-bottom)
		var(--nobo-globe-map-inset-left);
	width: auto;
	height: auto;
	overflow: hidden;
}

.nobo-camper-origins__map .mapboxgl-map,
.nobo-camper-origins__map .mapboxgl-canvas {
	background: transparent;
}

.nobo-camper-origins__map .mapboxgl-canvas {
	outline: none;
}

.nobo-camper-origins__map .mapboxgl-ctrl-bottom-left,
.nobo-camper-origins__map .mapboxgl-ctrl-bottom-right {
	z-index: 1;
}

.nobo-camper-origins__map .mapboxgl-ctrl-attrib {
	border-radius: 999px;
	background: rgba(36, 16, 25, 0.66);
	color: rgba(246, 232, 221, 0.7);
	font-size: 0.68rem;
}

.nobo-camper-origins__map .mapboxgl-ctrl-attrib a {
	color: rgba(246, 232, 221, 0.86);
}

.nobo-camper-origins__fallback {
	position: absolute;
	right: 0;
	bottom: 0;
	z-index: 2;
	width: min(22rem, 92%);
	padding: 1rem;
	border: 1px solid rgba(199, 161, 82, 0.32);
	background: rgba(36, 16, 25, 0.82);
	color: #f6e8dd;
	backdrop-filter: blur(12px);
}

.nobo-camper-origins[data-globe-state="ready"] .nobo-camper-origins__fallback {
	background: rgba(36, 16, 25, 0.58);
}

.nobo-camper-origins[data-globe-state="fallback"] .nobo-camper-origins__map {
	display: none;
}

.nobo-camper-origins__fallback-title {
	margin: 0;
	color: #ffffff;
	font-size: 0.95rem;
	font-weight: 800;
	line-height: 1.35;
}

.nobo-camper-origins__fallback-list {
	display: flex;
	flex-wrap: wrap;
	gap: 0.45rem;
	margin: 0.8rem 0 0;
	padding: 0;
	list-style: none;
}

.nobo-camper-origins__fallback-list li {
	padding: 0.4rem 0.6rem;
	border: 1px solid rgba(246, 232, 221, 0.2);
	border-radius: var(--radius-pill);
	color: rgba(246, 232, 221, 0.78);
	font-size: 0.8rem;
	line-height: 1;
}

/* Required Mapbox/OpenStreetMap attribution as quiet static text instead of
   the on-globe info control. */
.nobo-camper-origins__credit {
	position: relative;
	z-index: 1;
	width: min(1180px, 100%);
	margin: 1.5rem auto 0;
	color: rgba(246, 232, 221, 0.4);
	font-size: 0.7rem;
	text-align: right;
}

.nobo-camper-origins__credit a {
	color: rgba(246, 232, 221, 0.55);
	text-decoration: none;
}

.nobo-camper-origins__credit a:hover,
.nobo-camper-origins__credit a:focus-visible {
	color: rgba(246, 232, 221, 0.8);
	text-decoration: underline;
}

/* ----------------------------------------------------------------------
 * Public interactivity — "loop reel" stage.
 *
 * Top: centered editorial intro (eyebrow / title / lede / subcopy / CTAs).
 * Middle: featured panel — media left, copy right with index counter,
 *         name, body, and a small-caps "How it runs" note.
 * Bottom: full-width reel of six thumbnail chips acting as the tablist.
 *
 * Reference lock: docs/homepage-interactivity-section-design.md
 *   Primary: Raus (warm rustic minimalism — calm retreat rhythm).
 *   Borrow: Transform (typographic poster moment in the index counter
 *           and active-tab tone) and amp (athletic clarity in the reel).
 * -------------------------------------------------------------------- */
.nobo-homepage-interactivity {
	--nobo-browser-theme-color: #f4ede9;
	--nobo-interactivity-panel-radius: 18px;
	--nobo-interactivity-line: rgba(34, 19, 16, 0.12);
	--nobo-interactivity-line-strong: rgba(34, 19, 16, 0.22);
	position: relative;
	width: 100vw;
	margin-left: calc(50% - 50vw);
	padding: 5.5rem 1.25rem 6rem;
	/* Feathered veil instead of an opaque #f4ede9 fill. The body's fixed
	 * sunset gradient is what dissolves the seam against camp-features
	 * below (see LEARNINGS — opaque fills can't track the fixed gradient
	 * and read as hard bands). The bottom of the veil drifts from the
	 * cooler interactivity cream (#f4ede9) toward camp-features' warmer
	 * cream (#fbf6ee) so the two adjacent veils share a tone at the
	 * seam, eliminating the warm/cool step that would otherwise show
	 * even with both edges transparent. */
	background:
		radial-gradient(circle at 14% -10%, rgba(249, 207, 185, 0.55), rgba(244, 237, 233, 0) 540px),
		radial-gradient(circle at 92% 110%, rgba(237, 25, 129, 0.08), rgba(244, 237, 233, 0) 520px),
		linear-gradient(
			180deg,
			rgba(244, 237, 233, 0) 0%,
			rgba(244, 237, 233, 0.78) 16%,
			rgba(244, 237, 233, 0.78) 58%,
			rgba(251, 246, 238, 0.7) 82%,
			rgba(251, 246, 238, 0) 100%
		);
	color: var(--color-heading);
}

.nobo-homepage-interactivity__inner {
	display: flex;
	flex-direction: column;
	gap: 3rem;
	width: min(1180px, 100%);
	margin: 0 auto;
}

.nobo-homepage-interactivity__intro {
	display: flex;
	flex-direction: column;
	gap: 1.05rem;
	max-width: 720px;
}

.nobo-homepage-interactivity__eyebrow {
	margin: 0;
	color: var(--color-action-hover);
	font-size: 0.78rem;
	font-weight: 800;
	letter-spacing: 0.08em;
	line-height: 1.2;
	text-transform: uppercase;
}

.nobo-homepage-interactivity__title {
	margin: 0;
	color: var(--color-heading);
	font-family: Georgia, "Times New Roman", serif;
	font-size: clamp(2.6rem, 4.6vw, 4.1rem);
	font-weight: 700;
	line-height: 0.98;
	letter-spacing: -0.01em;
	text-wrap: balance;
}

.nobo-homepage-interactivity__lede {
	margin: 0;
	color: var(--color-heading);
	font-size: 1.12rem;
	font-weight: 500;
	line-height: 1.45;
	text-wrap: pretty;
}

.nobo-homepage-interactivity__subcopy {
	margin: 0;
	color: var(--color-text-soft);
	font-size: 1rem;
	line-height: 1.55;
	text-wrap: pretty;
}

.nobo-homepage-interactivity__ctas {
	display: flex;
	flex-wrap: wrap;
	gap: 0.65rem 0.9rem;
	align-items: center;
	margin-top: 0.4rem;
}

.nobo-homepage-interactivity__cta {
	display: inline-flex;
	align-items: center;
	gap: 0.45rem;
	min-height: 2.85rem;
	padding: 0.85rem 1.35rem;
	border-radius: var(--radius-pill);
	font-size: 0.98rem;
	font-weight: 800;
	line-height: 1;
	text-decoration: none !important;
	transition:
		background-color var(--motion-fast) var(--ease-expressive),
		color var(--motion-fast) var(--ease-expressive),
		transform var(--motion-fast) var(--ease-expressive),
		box-shadow var(--motion-fast) var(--ease-expressive);
}

.nobo-homepage-interactivity__cta--primary {
	background: var(--color-action);
	color: var(--color-on-action);
	box-shadow: 0 14px 32px rgba(237, 25, 129, 0.22);
}

.nobo-homepage-interactivity__cta--primary:hover,
.nobo-homepage-interactivity__cta--primary:focus-visible {
	background: var(--color-action-hover);
	color: var(--color-on-action);
	transform: translateY(-1px);
	text-decoration: none;
}

.nobo-homepage-interactivity__cta--ghost {
	background: transparent;
	color: var(--color-heading);
	border: 1px solid var(--nobo-interactivity-line-strong);
}

.nobo-homepage-interactivity__cta--ghost:hover,
.nobo-homepage-interactivity__cta--ghost:focus-visible {
	background: rgba(34, 19, 16, 0.06);
	color: var(--color-heading);
	transform: translateY(-1px);
	text-decoration: none;
}

.nobo-homepage-interactivity__cta-arrow {
	font-size: 1rem;
	line-height: 1;
	transition: transform var(--motion-fast) var(--ease-expressive);
}

.nobo-homepage-interactivity__cta--ghost:hover .nobo-homepage-interactivity__cta-arrow,
.nobo-homepage-interactivity__cta--ghost:focus-visible .nobo-homepage-interactivity__cta-arrow {
	transform: translateX(3px);
}

/* Stage: featured panel + reel. The panels share a grid cell so the
 * inactive ones overlay invisibly; the reel sits below as a full-width
 * row that controls the active panel. */
.nobo-homepage-interactivity__stage {
	display: flex;
	flex-direction: column;
	gap: 1.25rem;
	min-width: 0;
}

.nobo-homepage-interactivity__panels {
	position: relative;
	display: grid;
}

.nobo-homepage-interactivity__panel {
	grid-column: 1;
	grid-row: 1;
	display: grid;
	grid-template-columns: minmax(0, 1.05fr) minmax(0, 0.95fr);
	min-height: 460px;
	/* Cap height so portrait images (1440x1920) don't blow the panel out
	 * to ~820px. object-fit: cover crops the media safely. */
	max-height: 560px;
	overflow: hidden;
	background: var(--color-surface-strong);
	border: 1px solid var(--nobo-interactivity-line);
	border-radius: var(--nobo-interactivity-panel-radius);
	box-shadow: 0 26px 56px rgba(42, 23, 18, 0.14);
	opacity: 0;
	visibility: hidden;
	transform: translateY(8px);
	transition:
		opacity var(--motion-fast) var(--ease-expressive),
		transform var(--motion-fast) var(--ease-expressive),
		visibility 0s linear var(--motion-fast);
}

.nobo-homepage-interactivity__panel[data-active="true"] {
	opacity: 1;
	visibility: visible;
	transform: none;
	transition-delay: 0s;
}

.nobo-homepage-interactivity__panel:focus-visible {
	outline: 3px solid var(--color-action);
	outline-offset: 4px;
}

.nobo-homepage-interactivity__media-frame {
	position: relative;
	overflow: hidden;
	margin: 0;
	background: #d8cbc0;
	min-height: 100%;
}

.nobo-homepage-interactivity__media {
	display: block;
	width: 100%;
	height: 100%;
	min-height: 360px;
	object-fit: cover;
}

.nobo-homepage-interactivity__media-frame::after {
	position: absolute;
	inset: auto 0 0;
	height: 38%;
	content: "";
	background: linear-gradient(180deg, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 0.42) 100%);
	pointer-events: none;
}

/* Quieter than the original dark pill — a single small-caps label sitting
 * against the photo, in the spirit of Raus restraint. */
.nobo-homepage-interactivity__media-caption {
	position: absolute;
	left: 1.1rem;
	bottom: 1.1rem;
	z-index: 1;
	display: inline-flex;
	gap: 0.4rem;
	padding: 0.35rem 0.7rem;
	border: 1px solid rgba(255, 250, 242, 0.45);
	border-radius: var(--radius-pill);
	background: rgba(34, 19, 16, 0.36);
	color: #fffaf2;
	line-height: 1;
	-webkit-backdrop-filter: blur(6px);
	backdrop-filter: blur(6px);
}

.nobo-homepage-interactivity__media-label {
	font-size: 0.7rem;
	font-weight: 800;
	letter-spacing: 0.12em;
	text-transform: uppercase;
	color: #fffaf2;
}

.nobo-homepage-interactivity__copy {
	display: flex;
	flex-direction: column;
	justify-content: center;
	gap: 0.95rem;
	padding: 1.75rem 1.85rem 1.9rem;
}

/* "01 / 05" counter — the "Transform poster moment" detail in the
 * reference lock. Sets the cinematic loop position. */
.nobo-homepage-interactivity__copy-counter {
	display: inline-flex;
	align-items: baseline;
	gap: 0.3rem;
	margin: 0;
	color: var(--color-action-hover);
	font-family: Georgia, "Times New Roman", serif;
	font-size: 0.88rem;
	font-weight: 700;
	letter-spacing: 0.08em;
	font-variant-numeric: tabular-nums;
}

.nobo-homepage-interactivity__copy-counter-position {
	font-size: 1.1rem;
}

.nobo-homepage-interactivity__copy-counter-divider {
	color: var(--nobo-interactivity-line-strong);
	font-size: 0.95rem;
}

.nobo-homepage-interactivity__copy-counter-total {
	color: var(--color-text-soft);
}

.nobo-homepage-interactivity__copy-name {
	margin: 0;
	color: var(--color-heading);
	font-family: Georgia, "Times New Roman", serif;
	font-size: clamp(1.55rem, 2.3vw, 1.85rem);
	font-weight: 700;
	line-height: 1.05;
	letter-spacing: -0.005em;
}

.nobo-homepage-interactivity__copy-body {
	margin: 0;
	color: var(--color-heading);
	font-size: 1.02rem;
	font-weight: 500;
	line-height: 1.5;
	text-wrap: pretty;
}

/* Replaces the original two-column chip+text grid with a single line:
 * a small-caps "How it runs" label, a hairline separator, the note. */
.nobo-homepage-interactivity__copy-note {
	display: flex;
	flex-wrap: wrap;
	align-items: baseline;
	gap: 0.5rem 0.7rem;
	margin: 0.4rem 0 0;
	padding-top: 1rem;
	border-top: 1px solid var(--nobo-interactivity-line);
	color: var(--color-text-soft);
	font-size: 0.92rem;
	line-height: 1.45;
}

.nobo-homepage-interactivity__copy-note-label {
	display: inline-block;
	color: var(--color-action-hover);
	font-size: 0.68rem;
	font-weight: 800;
	letter-spacing: 0.12em;
	line-height: 1;
	text-transform: uppercase;
	white-space: nowrap;
}

.nobo-homepage-interactivity__copy-note-text {
	flex: 1 1 16rem;
	min-width: 0;
}

/* Reel — full-width tablist of six thumbnail chips. Reads as a strip
 * of frames the user is selecting from, not a row of disconnected pills. */
.nobo-homepage-interactivity__tabs--reel {
	display: grid;
	grid-template-columns: repeat(6, minmax(0, 1fr));
	gap: 0.5rem;
	padding: 0.5rem;
	border: 1px solid var(--nobo-interactivity-line);
	border-radius: var(--nobo-interactivity-panel-radius);
	background: rgba(255, 250, 244, 0.72);
	-webkit-backdrop-filter: blur(6px);
	backdrop-filter: blur(6px);
}

.nobo-homepage-interactivity__tab {
	display: grid;
	grid-template-columns: 56px minmax(0, 1fr);
	align-items: center;
	gap: 0.75rem;
	min-height: 4.25rem;
	padding: 0.45rem 0.65rem 0.45rem 0.5rem;
	border: 1px solid transparent;
	border-radius: 12px;
	background: transparent;
	color: var(--color-heading);
	font-family: inherit;
	text-align: left;
	cursor: pointer;
	transition:
		background-color var(--motion-fast) var(--ease-expressive),
		color var(--motion-fast) var(--ease-expressive),
		border-color var(--motion-fast) var(--ease-expressive),
		transform var(--motion-fast) var(--ease-expressive),
		box-shadow var(--motion-fast) var(--ease-expressive);
}

.nobo-homepage-interactivity__tab:hover {
	background: rgba(34, 19, 16, 0.05);
	border-color: var(--nobo-interactivity-line);
}

.nobo-homepage-interactivity__tab:focus-visible {
	outline: 2px solid var(--color-action);
	outline-offset: 2px;
}

.nobo-homepage-interactivity__tab[aria-selected="true"] {
	background: var(--color-heading);
	color: var(--color-surface-strong);
	border-color: var(--color-heading);
	box-shadow: 0 12px 26px rgba(34, 19, 16, 0.22);
	transform: translateY(-1px);
}

.nobo-homepage-interactivity__tab-thumb {
	position: relative;
	display: block;
	width: 56px;
	height: 56px;
	overflow: hidden;
	border-radius: 10px;
	background: #d8cbc0;
	flex-shrink: 0;
}

.nobo-homepage-interactivity__tab-thumb-image {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
	transition: transform var(--motion-fast) var(--ease-expressive);
}

.nobo-homepage-interactivity__tab:hover .nobo-homepage-interactivity__tab-thumb-image {
	transform: scale(1.05);
}

.nobo-homepage-interactivity__tab-thumb-index {
	position: absolute;
	left: 4px;
	bottom: 4px;
	padding: 0.05rem 0.3rem;
	border-radius: 4px;
	background: rgba(34, 19, 16, 0.7);
	color: #fffaf2;
	font-family: Georgia, "Times New Roman", serif;
	font-size: 0.62rem;
	font-weight: 700;
	letter-spacing: 0.06em;
	line-height: 1;
	font-variant-numeric: tabular-nums;
}

.nobo-homepage-interactivity__tab-text {
	display: flex;
	flex-direction: column;
	gap: 0.1rem;
	min-width: 0;
}

.nobo-homepage-interactivity__tab-label {
	color: inherit;
	font-size: 0.95rem;
	font-weight: 800;
	letter-spacing: 0.005em;
	line-height: 1.1;
}

.nobo-homepage-interactivity__tab-name {
	font-size: 0.7rem;
	font-weight: 700;
	letter-spacing: 0.12em;
	text-transform: uppercase;
	color: var(--color-text-soft);
}

.nobo-homepage-interactivity__tab[aria-selected="true"] .nobo-homepage-interactivity__tab-name {
	color: rgba(255, 250, 244, 0.72);
}

@media (prefers-reduced-motion: reduce) {
	.nobo-homepage-interactivity__panel,
	.nobo-homepage-interactivity__tab,
	.nobo-homepage-interactivity__tab-thumb-image,
	.nobo-homepage-interactivity__cta,
	.nobo-homepage-interactivity__cta-arrow {
		transition: none;
	}

	.nobo-homepage-interactivity__tab[aria-selected="true"] {
		transform: none;
	}
}

/* Tablet / narrow desktop: featured panel stays two-column but tighter;
 * reel keeps five columns but cards collapse to thumbnail + label only. */
@media (max-width: 1040px) {
	.nobo-homepage-interactivity {
		padding-block: 4.25rem 4.75rem;
	}

	.nobo-homepage-interactivity__inner {
		gap: 2.5rem;
	}

	.nobo-homepage-interactivity__panel {
		min-height: 420px;
	}

	.nobo-homepage-interactivity__copy {
		padding: 1.5rem 1.5rem 1.6rem;
	}

	.nobo-homepage-interactivity__tab {
		grid-template-columns: 48px minmax(0, 1fr);
		gap: 0.6rem;
		min-height: 4rem;
	}

	.nobo-homepage-interactivity__tab-thumb {
		width: 48px;
		height: 48px;
	}

	.nobo-homepage-interactivity__tab-name {
		display: none;
	}
}

@media (min-width: 782px) and (max-width: 1040px) {
	.nobo-homepage-camp-features__grid {
		grid-template-columns: repeat(6, minmax(0, 1fr));
	}

	.nobo-homepage-camp-features__grid > .nobo-homepage-camp-features__item {
		grid-column: span 3;
		grid-row: auto;
		transform: none;
	}

	.nobo-homepage-camp-features__item:nth-child(1),
	.nobo-homepage-camp-features__item:nth-child(3),
	.nobo-homepage-camp-features__item:nth-child(7),
	.nobo-homepage-camp-features__item:nth-child(11) {
		grid-column: span 6;
	}
}

@media (max-width: 781px) {
	.nobo-homepage-interactivity {
		padding: 3.5rem 0 4rem;
	}

	.nobo-homepage-interactivity__inner {
		gap: 1.75rem;
		padding: 0 1rem;
	}

	.nobo-homepage-interactivity__title {
		font-size: clamp(2.1rem, 8.5vw, 2.7rem);
	}

	.nobo-homepage-interactivity__cta {
		flex: 1 1 auto;
		justify-content: center;
	}

	/* Mobile: panels become a horizontal scroll-snap rail of stacked
	 * media+copy cards; the reel collapses into a scrollable chip row. */
	.nobo-homepage-interactivity__stage {
		gap: 1rem;
	}

	.nobo-homepage-interactivity__panels {
		display: flex;
		flex-wrap: nowrap;
		gap: 0.9rem;
		min-height: 0;
		padding: 0.25rem 1rem 1rem;
		margin: -0.25rem -1rem 0;
		overflow-x: auto;
		overscroll-behavior-x: contain;
		scroll-snap-type: x mandatory;
		scrollbar-width: none;
	}

	.nobo-homepage-interactivity__panels::-webkit-scrollbar {
		display: none;
	}

	.nobo-homepage-interactivity__panel {
		grid-column: auto;
		grid-row: auto;
		display: grid;
		grid-template-columns: 1fr;
		grid-template-rows: 240px auto;
		flex: 0 0 88%;
		max-width: 22rem;
		min-height: 0;
		opacity: 1;
		visibility: visible;
		transform: none;
		scroll-snap-align: start;
		scroll-snap-stop: always;
	}

	.nobo-homepage-interactivity__media-frame {
		min-height: 240px;
	}

	.nobo-homepage-interactivity__media {
		min-height: 240px;
	}

	.nobo-homepage-interactivity__copy {
		padding: 1.25rem 1.25rem 1.4rem;
		gap: 0.7rem;
	}

	.nobo-homepage-interactivity__tabs--reel {
		grid-auto-flow: column;
		grid-auto-columns: 9.5rem;
		grid-template-columns: none;
		gap: 0.45rem;
		padding: 0.45rem;
		margin: 0 -1rem;
		padding-inline: 1rem;
		overflow-x: auto;
		overscroll-behavior-x: contain;
		scroll-snap-type: x proximity;
		scrollbar-width: none;
		border-radius: 0;
		border-left: 0;
		border-right: 0;
		background: transparent;
		backdrop-filter: none;
		-webkit-backdrop-filter: none;
	}

	.nobo-homepage-interactivity__tabs--reel::-webkit-scrollbar {
		display: none;
	}

	.nobo-homepage-interactivity__tab {
		min-width: 9.5rem;
		min-height: 3.6rem;
		padding: 0.4rem 0.6rem;
		border: 1px solid var(--nobo-interactivity-line-strong);
		border-radius: 12px;
		background: rgba(255, 250, 244, 0.92);
		scroll-snap-align: start;
	}

	.nobo-homepage-interactivity__tab-name {
		display: block;
	}

	.nobo-homepage-camp-features {
		padding: 3.25rem 1rem;
	}

	.nobo-homepage-camp-features__grid {
		grid-template-columns: 1fr;
		gap: 0.9rem;
		padding-top: 0.5rem;
	}

	.nobo-homepage-camp-features--uniform .nobo-homepage-camp-features__grid {
		grid-template-columns: 1fr;
	}

	.nobo-homepage-camp-features__grid::before {
		inset: 0.9rem auto 0.9rem 1.18rem;
		width: 1px;
		background: linear-gradient(180deg, transparent, rgba(42, 23, 18, 0.22), transparent);
		opacity: 1;
	}

	.nobo-homepage-camp-features__grid > .nobo-homepage-camp-features__item {
		grid-column: 1 / -1;
		grid-row: auto;
		transform: none;
	}

	.nobo-homepage-camp-features__item::before {
		top: 1.45rem;
		left: 1rem;
	}

	.nobo-homepage-camp-features__card {
		min-height: auto;
		margin-left: 1.55rem;
		padding: 1.15rem;
		border-radius: var(--radius-md);
	}

	.nobo-homepage-camp-features__title {
		font-size: 1.85rem;
	}

	.nobo-homepage-camp-group-photos {
		padding: 3.25rem 1rem;
	}

	.nobo-homepage-camp-group-photos__wall {
		grid-template-columns: minmax(0, 420px);
		justify-content: center;
		gap: 1.75rem;
	}

	.nobo-homepage-camp-group-photos__item--upcoming {
		grid-column: auto;
		width: min(520px, 100%);
	}

	.nobo-homepage-camp-group-photos__print-channel {
		width: min(45%, 180px);
	}

	.nobo-homepage-camp-group-photos__developing-photo {
		min-height: 0;
		padding: 7px 7px 11px;
	}

	.nobo-homepage-camp-group-photos__developing-copy {
		gap: 0.25rem;
		margin-top: 0.4rem;
	}

	.nobo-homepage-camp-group-photos__placeholder-kicker {
		font-size: 0.58rem;
	}

	.nobo-homepage-camp-group-photos__placeholder-line {
		font-size: 1.02rem;
	}

	.nobo-homepage-camp-group-photos__item--upcoming .nobo-homepage-camp-group-photos__caption {
		margin-top: clamp(6.5rem, 24vw, 7.5rem);
	}

	.nobo-homepage-camp-group-photos__title {
		font-size: 1.85rem;
	}

	.nobo-camper-origins {
		padding: 3.35rem 1rem;
	}

	.nobo-camper-origins__inner {
		grid-template-columns: 1fr;
		gap: 1.8rem;
	}

	.nobo-camper-origins__stats {
		grid-template-columns: 1fr;
		gap: 0.25rem;
	}

	.nobo-camper-origins__stage {
		height: 360px;
		--nobo-globe-map-inset-top: -5%;
		--nobo-globe-map-inset-right: -26%;
		--nobo-globe-map-inset-bottom: 0;
		--nobo-globe-map-inset-left: -22%;
		--nobo-globe-r: clamp(145px, 42vw, 205px);
	}

	@supports (width: 1cqw) {
		.nobo-camper-origins__stage {
			--nobo-globe-r: clamp(148px, min(48cqw, 50cqh), 220px);
		}
	}

	.nobo-camper-origins__fallback {
		position: relative;
		width: 100%;
		margin-top: 1rem;
	}
}

/* ----------------------------------------------------------------------
 * Camp stats — data-driven "A Camp From Everywhere" section.
 * Warm sunset editorial treatment, sibling to camp-features.
 * -------------------------------------------------------------------- */
.nobo-camp-stats {
	--nobo-browser-theme-color: #fbdcc6;
	width: 100vw;
	margin: 0 calc(50% - 50vw);
	padding: 4.75rem 1.25rem;
	/* Feathered veil — see camp-features. Top/bottom dissolve into the
	   body's fixed sunset gradient so seams against camp-group-photos /
	   how-we-run / year-seven disappear; the mid wash still lifts the
	   "By the numbers" headline and stat figures off the canvas. */
	background:
		linear-gradient(128deg, rgba(237, 25, 129, 0.075), transparent 36%),
		linear-gradient(312deg, rgba(199, 161, 82, 0.16), transparent 38%),
		linear-gradient(
			180deg,
			rgba(251, 220, 198, 0) 0%,
			rgba(251, 220, 198, 0.62) 16%,
			rgba(251, 246, 238, 0.8) 52%,
			rgba(251, 220, 198, 0.62) 84%,
			rgba(251, 220, 198, 0) 100%
		);
	color: var(--color-text);
}

.nobo-camp-stats__inner {
	width: min(1120px, 100%);
	margin: 0 auto;
}

.nobo-camp-stats__header {
	max-width: 720px;
	margin: 0 auto 2.75rem;
	text-align: center;
}

.nobo-camp-stats__eyebrow {
	margin: 0 0 0.7rem;
	color: var(--color-magenta-500);
	font-family: var(--font-family-body);
	font-size: 0.82rem;
	font-weight: 800;
	letter-spacing: 0.16em;
	text-transform: uppercase;
}

.nobo-camp-stats__title {
	margin: 0;
	color: var(--color-heading);
	font-family: var(--font-family-display);
	font-size: clamp(2rem, 3.4vw, 3rem);
	font-weight: 800;
	line-height: 1.06;
	letter-spacing: 0;
}

.nobo-camp-stats__intro {
	margin: 1rem auto 0;
	max-width: 56ch;
	color: var(--color-text-soft);
	font-size: 1.05rem;
	line-height: 1.6;
}

.nobo-camp-stats__grid {
	display: grid;
	grid-template-columns: repeat(5, minmax(0, 1fr));
	gap: 0;
	margin: 0;
}

.nobo-camp-stats__stat {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 0.5rem;
	min-width: 0;
	padding: 0.35rem clamp(0.6rem, 1.4vw, 1.25rem);
	text-align: center;
}

.nobo-camp-stats__stat + .nobo-camp-stats__stat {
	border-left: 1px solid rgba(237, 25, 129, 0.16);
}

.nobo-camp-stats__value {
	display: flex;
	align-items: baseline;
	justify-content: center;
	gap: 0.06em;
	margin: 0;
	color: var(--color-heading);
	font-family: var(--font-family-display);
	font-size: clamp(2.4rem, 4.4vw, 3.5rem);
	font-weight: 800;
	line-height: 1;
}

.nobo-camp-stats__num {
	font-variant-numeric: tabular-nums;
}

.nobo-camp-stats__affix {
	color: var(--color-magenta-500);
	font-size: 0.78em;
}

.nobo-camp-stats__label {
	color: var(--color-text-soft);
	font-family: var(--font-family-body);
	font-size: 0.78rem;
	font-weight: 800;
	letter-spacing: 0.04em;
	line-height: 1.25;
	text-transform: uppercase;
}

/* Camper age range — "14–74", en-dash spans the spread. */
.nobo-camp-stats__range-sep {
	margin: 0 0.12em;
	color: var(--color-magenta-500);
	font-weight: 600;
}

/* Growth sparkline */
.nobo-camp-stats__trend {
	margin: 2.75rem auto 0;
	max-width: 540px;
	text-align: center;
}

.nobo-camp-stats__spark {
	display: block;
	width: 100%;
	height: clamp(48px, 8vw, 72px);
	overflow: visible;
}

.nobo-camp-stats__spark-area {
	fill: rgba(237, 25, 129, 0.09);
	stroke: none;
}

.nobo-camp-stats__spark-line {
	fill: none;
	stroke: var(--color-magenta-500);
	stroke-width: 2;
	stroke-linecap: round;
	stroke-linejoin: round;
	stroke-dasharray: 1;
	stroke-dashoffset: 1;
	transition: stroke-dashoffset 1200ms var(--ease-expressive);
}

[data-nobo-camp-stats].is-revealed .nobo-camp-stats__spark-line {
	stroke-dashoffset: 0;
}

.nobo-camp-stats__trend-caption {
	margin: 0.7rem 0 0;
	color: var(--color-text-soft);
	font-size: 0.82rem;
	font-weight: 600;
	letter-spacing: 0.02em;
}

.nobo-camp-stats__sr-only {
	position: absolute;
	width: 1px;
	height: 1px;
	margin: -1px;
	padding: 0;
	border: 0;
	overflow: hidden;
	clip: rect(0 0 0 0);
	clip-path: inset(50%);
	white-space: nowrap;
}

/* Editorial pull-quote — no card; anchored by a serif quote mark */
.nobo-camp-stats__quote {
	margin: 3.5rem auto 0;
	max-width: 660px;
	padding: 0;
	border: 0;
	border-radius: 0;
	background: none;
	box-shadow: none;
	text-align: center;
}

.nobo-camp-stats__quote::before {
	content: "\201C";
	display: block;
	margin: 0 auto -0.35rem;
	color: var(--color-magenta-500);
	font-family: var(--font-family-display);
	font-size: 4rem;
	font-weight: 700;
	line-height: 1;
}

.nobo-camp-stats__quote-text {
	margin: 0;
	padding: 0;
	border: 0;
	border-radius: 0;
	background: none;
	color: var(--color-heading);
	font-family: var(--font-family-display);
	font-size: clamp(1.5rem, 3.2vw, 2.1rem);
	font-style: italic;
	font-weight: 600;
	line-height: 1.3;
	text-wrap: balance;
}

.nobo-camp-stats__quote-attrib {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 0.7rem;
	margin: 1.6rem 0 0;
	color: var(--color-text-soft);
	font-family: var(--font-family-body);
	font-size: 0.78rem;
	font-weight: 700;
	letter-spacing: 0.1em;
	line-height: 1.5;
	text-transform: uppercase;
}

.nobo-camp-stats__quote-attrib::before {
	content: "";
	flex: 0 0 auto;
	width: 1.75rem;
	height: 1px;
	background: var(--color-magenta-500);
}

@media (max-width: 780px) {
	.nobo-camp-stats__grid {
		grid-template-columns: repeat(2, minmax(0, 1fr));
		row-gap: 1.75rem;
	}

	.nobo-camp-stats__stat {
		padding: 0.35rem 0.75rem;
	}

	.nobo-camp-stats__stat + .nobo-camp-stats__stat {
		border-left: 0;
	}

	.nobo-camp-stats__stat:nth-child(2) {
		border-left: 1px solid rgba(237, 25, 129, 0.16);
	}

	.nobo-camp-stats__stat:nth-child(4) {
		border-left: 1px solid rgba(237, 25, 129, 0.16);
	}
}

@media (prefers-reduced-motion: reduce) {
	.nobo-camp-stats__spark-line {
		stroke-dashoffset: 0;
		transition: none;
	}
}

/* =================================================================
 * How Nobo Runs — organization / "how we work" section.
 * The deep "structure" chapter in the light → deep → light canvas
 * rhythm. Same restrained system as Camp Features: hairline-divided
 * team cells, no shadow, no decorative stripes. The org map keeps
 * minimal flat nodes (it is a diagram, so the boxes are justified);
 * magenta marks only the Camp Lead apex, since that is the brand/
 * action color and it points at who the structure serves. Phase
 * numerals are oversized Playfair in magenta — the one memorable
 * move, reframing one playa week as a sliver of a year. Scroll-
 * reveal + count-up reuse the shared homepage.js utilities.
 * ================================================================= */
.nobo-how-we-run {
	--nobo-browser-theme-color: #f3ebde;
	width: 100vw;
	margin: 0 calc(50% - 50vw);
	padding: 4.25rem 1.25rem;
	/* Feathered veil — see camp-features. A slightly warmer sand-100
	   mid-wash keeps the playa CTA card and org map readable while
	   the top/bottom alpha taper hands off into the body sunset
	   gradient, killing the seam against camp-stats. */
	background: linear-gradient(
		180deg,
		rgba(243, 235, 222, 0) 0%,
		rgba(243, 235, 222, 0.82) 14%,
		rgba(243, 235, 222, 0.82) 86%,
		rgba(243, 235, 222, 0) 100%
	);
	color: var(--color-text);
}

.nobo-how-we-run__inner {
	width: min(1120px, 100%);
	margin: 0 auto;
}

.nobo-how-we-run__header {
	max-width: 720px;
	margin: 0 auto 2.4rem;
	text-align: center;
}

.nobo-how-we-run__eyebrow {
	margin: 0 0 0.7rem;
	color: var(--color-clay-600);
	font-family: var(--font-family-body);
	font-size: 0.82rem;
	font-weight: 800;
	letter-spacing: 0.16em;
	text-transform: uppercase;
}

.nobo-how-we-run__title {
	margin: 0;
	color: var(--color-heading);
	font-family: var(--font-family-display);
	font-size: 2.25rem;
	font-weight: 800;
	line-height: 1.08;
}

.nobo-how-we-run__intro {
	margin: 1rem auto 0;
	max-width: 58ch;
	color: var(--color-text-soft);
	font-size: 1.05rem;
	line-height: 1.6;
}

/* Reveal: subtle rise on scroll-in, reused across child movements.
   Reduced-motion forces the final state below. */
.nobo-how-we-run__phases,
.nobo-how-we-run__leadership,
.nobo-how-we-run__platform,
.nobo-how-we-run__departments,
.nobo-how-we-run__anchor {
	opacity: 0;
	transform: translateY(16px);
	transition:
		opacity var(--motion-slow) var(--ease-standard),
		transform var(--motion-slow) var(--ease-standard);
}

.nobo-how-we-run.is-revealed .nobo-how-we-run__phases,
.nobo-how-we-run.is-revealed .nobo-how-we-run__leadership,
.nobo-how-we-run.is-revealed .nobo-how-we-run__platform,
.nobo-how-we-run.is-revealed .nobo-how-we-run__departments,
.nobo-how-we-run.is-revealed .nobo-how-we-run__anchor {
	opacity: 1;
	transform: none;
}

.nobo-how-we-run.is-revealed .nobo-how-we-run__leadership {
	transition-delay: 80ms;
}

.nobo-how-we-run.is-revealed .nobo-how-we-run__platform {
	transition-delay: 140ms;
}

.nobo-how-we-run.is-revealed .nobo-how-we-run__departments {
	transition-delay: 200ms;
}

.nobo-how-we-run.is-revealed .nobo-how-we-run__anchor {
	transition-delay: 260ms;
}

/* The yearly rhythm: a three-phase time-grain row. The step numerals
   are the memorable move — large Playfair figures that reframe "the
   week" as ~7% of the work. */
.nobo-how-we-run__phases {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: 1.15rem;
	margin: 0;
	padding: 0;
	list-style: none;
}

.nobo-how-we-run__phase {
	display: flex;
	gap: 0.85rem;
	padding-top: 1rem;
	border-top: 2px solid var(--color-bark-900);
}

/* The memorable move: oversized magenta Playfair figures that reframe
   one week on playa as a sliver of a year-long build. */
.nobo-how-we-run__phase-step {
	flex-shrink: 0;
	color: var(--color-magenta-500);
	font-family: var(--font-family-display);
	font-size: 3rem;
	font-weight: 800;
	line-height: 0.9;
}

.nobo-how-we-run__phase-label {
	margin: 0 0 0.4rem;
	color: var(--color-heading);
	font-size: 1.05rem;
	font-weight: 800;
	line-height: 1.2;
}

.nobo-how-we-run__phase-meta {
	display: inline-block;
	margin-left: 0.5rem;
	color: var(--color-clay-600);
	font-size: 0.78rem;
	font-weight: 700;
	letter-spacing: 0.08em;
	text-transform: uppercase;
}

.nobo-how-we-run__phase-body {
	margin: 0;
	color: var(--color-text-soft);
	font-size: 0.96rem;
	line-height: 1.55;
}

.nobo-how-we-run__sub-caption {
	margin: 0 0 1.5rem;
	color: var(--color-clay-600);
	font-family: var(--font-family-body);
	font-size: 0.82rem;
	font-weight: 800;
	letter-spacing: 0.12em;
	text-transform: uppercase;
	text-align: center;
}

.nobo-how-we-run__leadership {
	margin-top: 2.75rem;
}

/* Leadership org map: a semantic list with visual hierarchy layered on top.
   Camp Lead anchors the structure; the daily/culture roles stay visibly paired. */
.nobo-how-we-run__org-map {
	position: relative;
	display: grid;
	grid-template-columns: repeat(6, minmax(0, 1fr));
	grid-template-areas:
		". camp camp camp camp ."
		". co co co co ."
		"chief chief team team mayor mayor"
		"pod pod role role spirit spirit"
		". campers campers campers campers .";
	gap: 0.82rem 0.85rem;
	margin: 0;
	padding: 0;
	list-style: none;
}

.nobo-how-we-run__tier {
	position: relative;
	display: flex;
	align-items: flex-start;
	gap: 0.75rem;
	min-width: 0;
	min-height: 6.15rem;
	padding: 0.95rem;
	border: 1.5px solid rgba(42, 23, 18, 0.16);
	border-radius: var(--radius-sm);
	background: var(--color-surface-strong);
}

/* Structural connector hairline — wiring, not decoration; matches the
   ink hairline language used everywhere else. */
.nobo-how-we-run__tier:not(.nobo-how-we-run__tier--camp-lead)::before {
	content: "";
	position: absolute;
	top: -1.05rem;
	left: 50%;
	width: 2px;
	height: 1.05rem;
	background: rgba(42, 23, 18, 0.22);
	transform: translateX(-50%);
}

/* Horizontal bridge that joins Co-Organizers' bottom spine to the two
   off-center children (Chief of Staff at 25%, Mayor of the Day at 75%).
   Each ::after extends inward from the child's center to container 50%,
   sitting in the row gap so the three drops read as one fork. */
.nobo-how-we-run__tier--chief-of-staff::after,
.nobo-how-we-run__tier--mayor-of-the-day::after {
	content: "";
	position: absolute;
	top: -0.525rem;
	height: 2px;
	background: rgba(42, 23, 18, 0.22);
}

.nobo-how-we-run__tier--chief-of-staff::after {
	left: 50%;
	right: calc(-50% - 1rem);
}

.nobo-how-we-run__tier--mayor-of-the-day::after {
	right: 50%;
	left: calc(-50% - 1rem);
}

/* The one place magenta carries meaning in this map: the apex node.
   It's the brand/action color, so it marks who the structure points
   to, not a decorative band. */
.nobo-how-we-run__tier--camp-lead {
	grid-area: camp;
	border: 2px solid var(--color-magenta-500);
	background: var(--color-bark-900);
	color: var(--color-on-action);
}

.nobo-how-we-run__tier--co-organizers {
	grid-area: co;
	border-color: rgba(42, 23, 18, 0.28);
}

.nobo-how-we-run__tier--chief-of-staff {
	grid-area: chief;
}

.nobo-how-we-run__tier--team-leads {
	grid-area: team;
}

.nobo-how-we-run__tier--mayor-of-the-day {
	grid-area: mayor;
}

.nobo-how-we-run__tier--pod-captains {
	grid-area: pod;
}

.nobo-how-we-run__tier--role-lead {
	grid-area: role;
}

.nobo-how-we-run__tier--spirit-guide {
	grid-area: spirit;
	border-style: dashed;
	background: rgba(255, 250, 242, 0.78);
}

.nobo-how-we-run__tier--campers {
	grid-area: campers;
	border-color: rgba(42, 23, 18, 0.2);
	background:
		linear-gradient(180deg, rgba(255, 253, 248, 0.96), rgba(255, 250, 242, 0.86)),
		var(--color-surface-strong);
}

.nobo-how-we-run__tier-icon {
	display: inline-flex;
	flex: 0 0 auto;
	align-items: center;
	justify-content: center;
	width: 2.5rem;
	height: 2.5rem;
	border: 1.5px solid rgba(183, 101, 63, 0.34);
	border-radius: 10px;
	background: rgba(183, 101, 63, 0.12);
	color: var(--color-clay-600);
}

.nobo-how-we-run__tier--camp-lead .nobo-how-we-run__tier-icon {
	border-color: transparent;
	background: var(--color-magenta-500);
	color: var(--color-white);
}

.nobo-how-we-run__tier-copy {
	display: flex;
	min-width: 0;
	flex-direction: column;
	gap: 0.22rem;
}

.nobo-how-we-run__tier-name {
	color: var(--color-heading);
	font-size: 0.98rem;
	font-weight: 800;
	line-height: 1.2;
}

.nobo-how-we-run__tier-role {
	color: var(--color-text-soft);
	font-size: 0.85rem;
	line-height: 1.35;
}

.nobo-how-we-run__tier--camp-lead .nobo-how-we-run__tier-name,
.nobo-how-we-run__tier--camp-lead .nobo-how-we-run__tier-role {
	color: var(--color-on-action);
}

.nobo-how-we-run__departments {
	margin-top: 2.75rem;
}

/* Department grid keeps the quieter field-manual sibling rhythm
   without adopting the Camp Features constellation map. */
.nobo-how-we-run__grid {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	column-gap: 2.25rem;
	row-gap: 1.55rem;
	margin: 0;
	padding: 0;
	list-style: none;
}

.nobo-how-we-run__item {
	min-width: 0;
}

/* The team list reads as a field-manual grid of hairline-divided cells,
   not a card wall. */
.nobo-how-we-run__card {
	display: grid;
	grid-template-rows: auto auto 1fr;
	min-height: 100%;
	padding: 1.05rem 0 0;
	border: 0;
	border-top: 1.5px solid rgba(42, 23, 18, 0.22);
	border-radius: 0;
	background: none;
}

.nobo-how-we-run__icon {
	display: inline-flex;
	align-items: center;
	justify-content: flex-start;
	width: 2rem;
	height: 2rem;
	margin-bottom: 1rem;
	color: var(--color-clay-600);
}

.nobo-how-we-run__svg {
	width: 1.7rem;
	height: 1.7rem;
	fill: currentColor;
	stroke: none;
}

/* Tier chips are smaller than department chips; scale the duotone glyph
   down so it reads at the 2.45rem badge size used in the org map. */
.nobo-how-we-run__tier-icon .nobo-how-we-run__svg {
	width: 1.4rem;
	height: 1.4rem;
}

.nobo-how-we-run__dept-name {
	margin: 0;
	/* Real team names run one or two lines (e.g. "Kitchen" vs
	   "Community & Communications"). Reserve two lines and balance the
	   wrap so scope copy starts on a shared baseline across a row
	   instead of stair-stepping. */
	display: flex;
	align-items: flex-end;
	min-height: 2.4em;
	color: var(--color-heading);
	font-size: 1.18rem;
	font-weight: 800;
	line-height: 1.2;
	text-wrap: balance;
}

.nobo-how-we-run__dept-scope {
	margin: 0.65rem 0 0;
	color: var(--color-text-soft);
	font-size: 0.98rem;
	line-height: 1.55;
}

/* The single deep moment: a plum dusk band carrying the time-grain
   line. Mirrors the footer dusk so the dark beat reads as on-brand,
   not a contrast accident. CTA uses the one primary action color. */
.nobo-how-we-run__anchor {
	margin: 2.75rem auto 0;
	max-width: 760px;
	padding: 2.55rem 2.25rem;
	border-radius: var(--radius-lg);
	background: var(--gradient-footer);
	color: rgba(255, 254, 251, 0.92);
	text-align: center;
}

.nobo-how-we-run__anchor-title {
	margin: 0;
	color: var(--color-white);
	font-family: var(--font-family-display);
	font-size: clamp(1.6rem, 1.3rem + 1.4vw, 2.1rem);
	font-weight: 700;
	line-height: 1.15;
	text-wrap: balance;
}

.nobo-how-we-run__anchor-body {
	margin: 1rem auto 0;
	max-width: 52ch;
	color: rgba(255, 254, 251, 0.82);
	font-size: 1rem;
	line-height: 1.6;
}

.nobo-how-we-run__anchor-cta {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-height: 3rem;
	margin-top: 1.75rem;
	padding: 0.95rem 1.7rem;
	border-radius: var(--radius-pill);
	background: var(--color-action);
	color: var(--color-on-action);
	font-size: 1rem;
	font-weight: 800;
	line-height: 1;
	text-decoration: none;
	transition:
		background-color var(--motion-fast) var(--ease-expressive),
		transform var(--motion-fast) var(--ease-expressive);
}

.nobo-how-we-run__anchor-cta:hover,
.nobo-how-we-run__anchor-cta:focus-visible {
	background: var(--color-action-hover);
	color: var(--color-on-action);
	text-decoration: none;
	transform: translateY(-2px);
}

/* Platform preview: a quiet field-manual sibling of the org map. The
   SVG mockup carries the "what runs the camp" claim; the CTA stays a
   secondary text link so the dusk anchor below keeps the single
   primary action. */
.nobo-how-we-run__platform {
	margin-top: 2.75rem;
}

.nobo-how-we-run__platform-grid {
	display: grid;
	grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr);
	gap: 2rem;
	align-items: center;
	max-width: 1040px;
	margin: 0 auto;
}

.nobo-how-we-run__platform-preview {
	margin: 0;
	min-width: 0;
}

.nobo-how-we-run__platform-svg {
	display: block;
	width: 100%;
	height: auto;
	max-width: 500px;
	margin: 0 auto;
	border-radius: var(--radius-md, 12px);
	overflow: visible;
}

.nobo-how-we-run__platform-copy {
	min-width: 0;
}

.nobo-how-we-run__platform-title {
	margin: 0;
	color: var(--color-heading);
	font-family: var(--font-family-display);
	font-size: clamp(1.45rem, 1.15rem + 1.2vw, 1.85rem);
	font-weight: 700;
	line-height: 1.15;
	text-wrap: balance;
}

.nobo-how-we-run__platform-body {
	margin: 1rem 0 0;
	color: var(--color-text-soft);
	font-size: 1rem;
	line-height: 1.6;
	text-wrap: pretty;
}

.nobo-how-we-run__platform-cta {
	display: inline-flex;
	align-items: center;
	gap: 0.45rem;
	margin-top: 1.4rem;
	padding: 0;
	color: var(--color-action);
	font-size: 0.98rem;
	font-weight: 800;
	letter-spacing: 0.01em;
	text-decoration: none;
	background: none;
	border: 0;
}

.nobo-how-we-run__platform-cta-arrow {
	display: inline-block;
	transition: transform var(--motion-fast) var(--ease-expressive);
}

.nobo-how-we-run__platform-cta:hover,
.nobo-how-we-run__platform-cta:focus-visible {
	color: var(--color-action-hover);
	text-decoration: underline;
	text-underline-offset: 0.25em;
}

.nobo-how-we-run__platform-cta:hover .nobo-how-we-run__platform-cta-arrow,
.nobo-how-we-run__platform-cta:focus-visible .nobo-how-we-run__platform-cta-arrow {
	transform: translateX(3px);
}

@media (max-width: 781px) {
	.nobo-how-we-run {
		padding: 3.25rem 1rem;
	}

	.nobo-how-we-run__phases,
	.nobo-how-we-run__grid,
	.nobo-how-we-run__org-map {
		grid-template-columns: 1fr;
	}

	.nobo-how-we-run__org-map {
		grid-template-areas: none;
		gap: 0.85rem;
	}

	.nobo-how-we-run__title {
		font-size: 1.85rem;
	}

	.nobo-how-we-run__tier {
		grid-area: auto;
		min-height: auto;
	}

	.nobo-how-we-run__tier:not(.nobo-how-we-run__tier--camp-lead)::before {
		left: 1.52rem;
		transform: none;
	}

	.nobo-how-we-run__tier--chief-of-staff::after,
	.nobo-how-we-run__tier--mayor-of-the-day::after {
		content: none;
	}

	.nobo-how-we-run__anchor {
		padding: 2.25rem 1.5rem;
	}

	.nobo-how-we-run__platform-grid {
		grid-template-columns: 1fr;
		gap: 1.75rem;
	}

	.nobo-how-we-run__platform-copy {
		text-align: center;
	}

	.nobo-how-we-run__platform-cta {
		justify-content: center;
	}
}

@media (prefers-reduced-motion: reduce) {
	.nobo-how-we-run__phases,
	.nobo-how-we-run__leadership,
	.nobo-how-we-run__platform,
	.nobo-how-we-run__departments,
	.nobo-how-we-run__anchor {
		opacity: 1;
		transform: none;
		transition: none;
	}

	.nobo-how-we-run__platform-cta-arrow {
		transition: none;
	}
}

/* =================================================================
 * Year Seven — "Seven seasons on the playa."
 *
 * Earned retrospective placed directly under the BM 2026 hero
 * countdown. Field-journal direction lifted from San Rita (a
 * monumental display numeral grounding a strip of scrapbook-frame
 * chapters), with Lightship-style restrained metadata and generous
 * vertical rhythm. The polaroid frame idiom is reused from
 * .nobo-homepage-camp-group-photos so the section reads as a sibling
 * of the camp-family wall, not a bolted-on widget.
 *
 * Canvas: do NOT paint an opaque rectangle here. The body sunset
 * gradient is fixed; opaque fills cannot track it and read as hard
 * bands (see the existing camper-origins/camp-group-photos notes
 * above). Same translucent veil trick — fade in, fade out.
 * ================================================================= */

.nobo-homepage-year-seven {
	--nobo-y7-frame-width: clamp(160px, 18vw, 220px);
	--nobo-y7-strip-gap: clamp(1rem, 2.4vw, 1.85rem);
	--nobo-browser-theme-color: #fbdcc6;
	position: relative;
	width: 100vw;
	margin: 0 calc(50% - 50vw);
	padding: clamp(3.5rem, 7vw, 6rem) 1.25rem clamp(3rem, 6vw, 5rem);
	background: linear-gradient(
		180deg,
		rgba(251, 246, 238, 0) 0%,
		rgba(251, 246, 238, 0.5) 26%,
		rgba(251, 246, 238, 0.5) 74%,
		rgba(251, 246, 238, 0) 100%
	);
	color: var(--color-text);
	overflow: hidden;
}

.nobo-homepage-year-seven__inner {
	position: relative;
	width: min(1180px, 100%);
	margin: 0 auto;
}

/* Monumental Roman numeral floating behind the headline. Borrowed
   from 19-86 / Bibliothèque: oversized year/numeral as architectural
   typographic anchor, not decoration. Sits in the warm sunset
   shadow tone so it reads as a watermark, not a UI element. */
.nobo-homepage-year-seven__cartouche {
	position: absolute;
	inset: -0.4em 0 auto auto;
	z-index: 0;
	pointer-events: none;
	line-height: 0.78;
	text-align: right;
}

.nobo-homepage-year-seven__cartouche-mark {
	display: inline-block;
	font-family: var(--font-family-display);
	font-size: clamp(7rem, 22vw, 16rem);
	font-weight: 700;
	letter-spacing: -0.04em;
	color: rgba(157, 81, 50, 0.12);
	-webkit-text-stroke: 1px rgba(157, 81, 50, 0.18);
	text-stroke: 1px rgba(157, 81, 50, 0.18);
}

.nobo-homepage-year-seven__header {
	position: relative;
	z-index: 1;
	max-width: 680px;
	margin: 0 0 clamp(1.5rem, 3vw, 2.25rem);
}

.nobo-homepage-year-seven__eyebrow {
	margin: 0 0 0.7rem;
	color: var(--color-clay-600);
	font-family: var(--font-family-eyebrow);
	font-size: var(--font-size-xs);
	font-weight: 700;
	letter-spacing: var(--tracking-eyebrow);
	line-height: 1.2;
	text-transform: uppercase;
}

.nobo-homepage-year-seven__title {
	margin: 0;
	max-width: 16ch;
	color: var(--color-heading);
	font-family: var(--font-family-display);
	font-size: clamp(2.1rem, 1.6rem + 2.4vw, 3.6rem);
	font-weight: 600;
	line-height: var(--leading-tight);
	letter-spacing: var(--tracking-display);
	text-wrap: balance;
}

.nobo-homepage-year-seven__lede {
	margin: 1rem 0 0;
	max-width: 52ch;
	color: var(--color-text);
	font-size: var(--font-size-md);
	font-weight: 400;
	line-height: var(--leading-snug);
	text-wrap: pretty;
}

/* Pull quote: not a decorative blockquote. It's the section's
   emotional center. Lightship-style restraint — generous size,
   italic display serif, small tracked attribution underneath. */
.nobo-homepage-year-seven__pull {
	position: relative;
	z-index: 1;
	max-width: 36ch;
	margin: clamp(1.5rem, 3vw, 2.25rem) 0 clamp(2.25rem, 4vw, 3rem);
	padding: 0 0 0 clamp(0.9rem, 1.6vw, 1.25rem);
	border-left: 2px solid var(--color-clay-500);
}

.nobo-homepage-year-seven__pull blockquote {
	margin: 0;
	padding: 0;
	border: 0;
	background: transparent;
	border-radius: 0;
}

.nobo-homepage-year-seven__pull blockquote p {
	margin: 0;
	color: var(--color-heading);
	font-family: var(--font-family-display);
	font-size: clamp(1.2rem, 1rem + 0.9vw, 1.65rem);
	font-style: italic;
	font-weight: 500;
	line-height: 1.35;
	letter-spacing: -0.005em;
	text-wrap: balance;
}

.nobo-homepage-year-seven__pull figcaption {
	margin-top: 0.6rem;
	color: var(--color-clay-600);
	font-family: var(--font-family-body);
	font-size: var(--font-size-xs);
	font-weight: 700;
	letter-spacing: var(--tracking-eyebrow);
	line-height: 1.2;
	text-transform: uppercase;
}

/* Year strip: horizontal scroll on small screens, equal-column grid
   on wide ones. Order matters — chapters must read left-to-right in
   the document order set by the renderer. */
.nobo-homepage-year-seven__strip {
	position: relative;
	z-index: 1;
	display: grid;
	grid-template-columns: repeat(8, minmax(var(--nobo-y7-frame-width), 1fr));
	gap: var(--nobo-y7-strip-gap);
	margin: 0;
	padding: 0.25rem 0 0.5rem;
	list-style: none;
	overflow-x: auto;
	-webkit-overflow-scrolling: touch;
	scroll-snap-type: x mandatory;
	scrollbar-width: thin;
	scrollbar-color: rgba(157, 81, 50, 0.35) transparent;
}

.nobo-homepage-year-seven__strip::-webkit-scrollbar {
	height: 6px;
}

.nobo-homepage-year-seven__strip::-webkit-scrollbar-thumb {
	background: rgba(157, 81, 50, 0.32);
	border-radius: 999px;
}

.nobo-homepage-year-seven__chapter {
	display: grid;
	grid-template-rows: auto auto;
	gap: 0.85rem;
	min-width: var(--nobo-y7-frame-width);
	scroll-snap-align: start;
}

/* Smaller chapters in a row, not the wall — tighter padding and shadow. */
.nobo-homepage-year-seven__frame {
	padding: 8px 8px 10px;
	box-shadow:
		0 1px 2px rgba(59, 36, 27, 0.16),
		0 8px 18px rgba(59, 36, 27, 0.12);
	transition: transform var(--motion-base, 240ms) var(--ease-expressive, ease),
		box-shadow var(--motion-base, 240ms) var(--ease-expressive, ease);
}

.nobo-homepage-year-seven__chapter--built:hover .nobo-homepage-year-seven__frame,
.nobo-homepage-year-seven__chapter--built:focus-within .nobo-homepage-year-seven__frame {
	transform: translateY(-3px);
	box-shadow:
		0 2px 3px rgba(59, 36, 27, 0.18),
		0 14px 26px rgba(59, 36, 27, 0.18);
}

.nobo-homepage-year-seven__image {
	display: block;
	width: 100%;
	height: auto;
	aspect-ratio: 1 / 1;
	object-fit: cover;
}

/* Paused: no photo, just a hairline rule split by a quiet label.
   Honest texture — the world stopped, the camp didn't pretend. */
.nobo-homepage-year-seven__paused {
	display: flex;
	align-items: center;
	gap: 0.55rem;
	height: var(--nobo-y7-frame-width);
	min-height: 140px;
	padding: 0 0.25rem;
}

.nobo-homepage-year-seven__paused-rule {
	flex: 1 1 auto;
	height: 1px;
	background: linear-gradient(
		90deg,
		rgba(157, 81, 50, 0) 0%,
		rgba(157, 81, 50, 0.4) 50%,
		rgba(157, 81, 50, 0) 100%
	);
}

.nobo-homepage-year-seven__paused-label {
	color: var(--color-clay-600);
	font-family: var(--font-family-body);
	font-size: 0.72rem;
	font-weight: 700;
	letter-spacing: 0.18em;
	line-height: 1;
	text-transform: uppercase;
	white-space: nowrap;
}

/* Upcoming: the chapter that hasn't happened. Dashed frame in clay,
   a ghosted "7" mark, and a small "Being written" label. Same
   dimensions as a polaroid so the strip rhythm holds; visibly
   different so the eye lands here last. */
.nobo-homepage-year-seven__upcoming {
	display: grid;
	place-items: center;
	gap: 0.45rem;
	aspect-ratio: 1 / 1;
	padding: 1rem;
	border: 1.5px dashed rgba(157, 81, 50, 0.45);
	border-radius: 3px;
	background:
		repeating-linear-gradient(
			135deg,
			rgba(255, 253, 248, 0.5) 0 8px,
			rgba(251, 235, 218, 0.5) 8px 16px
		);
}

.nobo-homepage-year-seven__upcoming-mark {
	font-family: var(--font-family-display);
	font-size: clamp(3.2rem, 4vw, 4.4rem);
	font-weight: 700;
	line-height: 0.9;
	color: var(--color-clay-500);
	letter-spacing: -0.03em;
}

.nobo-homepage-year-seven__upcoming-label {
	color: var(--color-clay-600);
	font-family: var(--font-family-body);
	font-size: 0.7rem;
	font-weight: 700;
	letter-spacing: 0.18em;
	line-height: 1;
	text-transform: uppercase;
}

.nobo-homepage-year-seven__meta {
	display: grid;
	gap: 0.25rem;
}

.nobo-homepage-year-seven__year {
	color: var(--color-heading);
	font-family: var(--font-family-display);
	font-size: 1.18rem;
	font-weight: 700;
	letter-spacing: -0.02em;
	line-height: 1;
}

.nobo-homepage-year-seven__season {
	color: var(--color-clay-600);
	font-family: var(--font-family-body);
	font-size: 0.72rem;
	font-weight: 700;
	letter-spacing: 0.14em;
	line-height: 1.2;
	text-transform: uppercase;
}

.nobo-homepage-year-seven__theme {
	color: var(--color-text-soft);
	font-weight: 600;
	text-transform: none;
	letter-spacing: 0.04em;
}

.nobo-homepage-year-seven__note {
	margin: 0.15rem 0 0;
	color: var(--color-text);
	font-family: var(--font-family-body);
	font-size: 0.86rem;
	font-weight: 400;
	line-height: 1.42;
	text-wrap: pretty;
}

.nobo-homepage-year-seven__chapter--paused .nobo-homepage-year-seven__year,
.nobo-homepage-year-seven__chapter--paused .nobo-homepage-year-seven__note {
	color: var(--color-text-soft);
}

@media (max-width: 760px) {
	.nobo-homepage-year-seven {
		--nobo-y7-frame-width: 180px;
	}

	.nobo-homepage-year-seven__strip {
		grid-auto-flow: column;
		grid-template-columns: none;
		grid-auto-columns: var(--nobo-y7-frame-width);
		padding-bottom: 1rem;
	}

	.nobo-homepage-year-seven__cartouche-mark {
		font-size: clamp(6rem, 32vw, 11rem);
		color: rgba(157, 81, 50, 0.09);
	}
}

@media (max-width: 480px) {
	.nobo-homepage-year-seven {
		--nobo-y7-frame-width: 160px;
	}
}

@media (prefers-reduced-motion: reduce) {
	.nobo-homepage-year-seven__frame {
		transition: none;
	}
}

/* =================================================================
 * House Rest — oscillating photo manifesto
 * ================================================================= */

.nobo-homepage-house-rest {
	--nobo-house-rest-edge: clamp(1rem, 4vw, 3.5rem);
	--nobo-house-rest-gap: clamp(0.85rem, 2vw, 1.4rem);
	position: relative;
	width: 100vw;
	margin: 0 calc(50% - 50vw);
	padding: clamp(4rem, 8vw, 7rem) 0;
	background:
		linear-gradient(180deg, rgba(36, 16, 25, 0) 0%, var(--color-night) 16%, var(--color-night) 84%, rgba(36, 16, 25, 0) 100%),
		linear-gradient(135deg, color-mix(in srgb, var(--color-clay-500) 22%, transparent) 0%, rgba(36, 16, 25, 0) 42%),
		var(--color-night);
	color: var(--color-sand-50);
	overflow: hidden;
}

.nobo-homepage-house-rest__inner {
	position: relative;
	width: min(1180px, calc(100% - 2.5rem));
	margin: 0 auto;
}

.nobo-homepage-house-rest__header {
	display: grid;
	grid-template-columns: minmax(0, 0.78fr) minmax(18rem, 0.42fr);
	gap: clamp(1rem, 4vw, 3rem);
	align-items: end;
	margin-bottom: clamp(1.6rem, 4vw, 3rem);
}

.nobo-homepage-house-rest__eyebrow {
	margin: 0 0 0.65rem;
	color: var(--color-gold-400);
	font-family: var(--font-family-eyebrow);
	font-size: var(--font-size-xs);
	font-weight: 700;
	letter-spacing: 0;
	line-height: 1.2;
	text-transform: uppercase;
}

.nobo-homepage-house-rest__title {
	margin: 0;
	max-width: 14ch;
	color: var(--color-sand-50);
	font-family: var(--font-family-display);
	font-size: clamp(2.25rem, 1.6rem + 3vw, 4.35rem);
	font-weight: 650;
	letter-spacing: 0;
	line-height: 0.98;
	text-wrap: balance;
}

.nobo-homepage-house-rest__lede {
	margin: 0;
	max-width: 36ch;
	color: rgba(251, 246, 238, 0.76);
	font-size: clamp(1rem, 0.95rem + 0.3vw, 1.16rem);
	font-weight: 400;
	letter-spacing: 0;
	line-height: 1.48;
	text-wrap: pretty;
}

.nobo-homepage-house-rest__rail {
	width: 100vw;
	margin-left: 50%;
	padding: 0 var(--nobo-house-rest-edge) clamp(0.5rem, 1vw, 0.8rem);
	overflow: hidden;
	transform: translateX(-50%);
}

.nobo-homepage-house-rest__track {
	--nobo-house-rest-shift: min(0px, calc(100vw - 100% - var(--nobo-house-rest-edge) - var(--nobo-house-rest-edge)));
	display: flex;
	align-items: stretch;
	gap: var(--nobo-house-rest-gap);
	width: max-content;
	margin: 0;
	padding: 0;
	list-style: none;
	will-change: transform;
}

.nobo-homepage-house-rest__item {
	flex: 0 0 auto;
}

.nobo-homepage-house-rest__card {
	position: relative;
	width: clamp(16rem, 28vw, 24rem);
	aspect-ratio: 3 / 4;
	overflow: hidden;
	border: 1px solid rgba(251, 246, 238, 0.16);
	border-radius: 8px;
	background: var(--color-bark-800);
	box-shadow:
		0 1px 1px rgba(0, 0, 0, 0.35),
		0 20px 46px rgba(0, 0, 0, 0.32);
}

.nobo-homepage-house-rest__item--wide .nobo-homepage-house-rest__card {
	width: clamp(22rem, 46vw, 42rem);
	aspect-ratio: 16 / 9;
}

.nobo-homepage-house-rest__item--landscape .nobo-homepage-house-rest__card {
	width: clamp(20rem, 39vw, 35rem);
	aspect-ratio: 4 / 3;
}

.nobo-homepage-house-rest__image,
.nobo-homepage-house-rest__shade {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
}

.nobo-homepage-house-rest__image {
	display: block;
	object-fit: cover;
}

.nobo-homepage-house-rest__shade {
	background:
		linear-gradient(180deg, rgba(10, 7, 6, 0.08) 0%, rgba(10, 7, 6, 0.12) 42%, rgba(10, 7, 6, 0.88) 100%),
		linear-gradient(90deg, rgba(10, 7, 6, 0.38) 0%, transparent 54%);
	pointer-events: none;
}

.nobo-homepage-house-rest__copy {
	position: absolute;
	inset: auto clamp(1rem, 2vw, 1.35rem) clamp(1rem, 2vw, 1.35rem);
	display: grid;
	gap: 0.55rem;
}

.nobo-homepage-house-rest__index {
	width: max-content;
	padding: 0.25rem 0.5rem;
	border: 1px solid rgba(251, 246, 238, 0.28);
	border-radius: 999px;
	background: rgba(36, 16, 25, 0.5);
	color: rgba(251, 246, 238, 0.82);
	font-family: var(--font-family-body);
	font-size: 0.74rem;
	font-weight: 700;
	letter-spacing: 0;
	line-height: 1;
}

.nobo-homepage-house-rest__phrase {
	margin: 0;
	max-width: 12ch;
	color: var(--color-sand-50);
	font-family: var(--font-family-display);
	font-size: clamp(1.55rem, 1.1rem + 1.5vw, 2.6rem);
	font-weight: 650;
	letter-spacing: 0;
	line-height: 1.02;
	text-wrap: balance;
}

.nobo-homepage-house-rest__item--wide .nobo-homepage-house-rest__phrase,
.nobo-homepage-house-rest__item--landscape .nobo-homepage-house-rest__phrase {
	max-width: 13ch;
}

@media (prefers-reduced-motion: no-preference) {
	.nobo-homepage-house-rest__track {
		animation: nobo-house-rest-oscillate 34s ease-in-out infinite alternate;
	}

	.nobo-homepage-house-rest:hover .nobo-homepage-house-rest__track,
	.nobo-homepage-house-rest:focus-within .nobo-homepage-house-rest__track {
		animation-play-state: paused;
	}
}

@keyframes nobo-house-rest-oscillate {
	0%,
	8% {
		transform: translate3d(0, 0, 0);
	}

	92%,
	100% {
		transform: translate3d(var(--nobo-house-rest-shift), 0, 0);
	}
}

@media (max-width: 760px) {
	.nobo-homepage-house-rest {
		padding: clamp(3.4rem, 16vw, 5.25rem) 0;
	}

	.nobo-homepage-house-rest__header {
		grid-template-columns: 1fr;
		align-items: start;
	}

	.nobo-homepage-house-rest__title {
		max-width: 11ch;
	}

	.nobo-homepage-house-rest__lede {
		max-width: 29ch;
	}

	.nobo-homepage-house-rest__card {
		width: min(78vw, 22rem);
	}

	.nobo-homepage-house-rest__item--wide .nobo-homepage-house-rest__card,
	.nobo-homepage-house-rest__item--landscape .nobo-homepage-house-rest__card {
		width: min(88vw, 30rem);
	}
}

@media (prefers-reduced-motion: reduce) {
	.nobo-homepage-house-rest__rail {
		overflow-x: auto;
		-webkit-overflow-scrolling: touch;
		scrollbar-width: thin;
	}

	.nobo-homepage-house-rest__track {
		transform: none;
		will-change: auto;
	}
}

/* =================================================================
 * Application Status — field-manual status card replacing the legacy
 * fas-fa-burn vc_message warning box. The page already shows a live
 * capacity bar above, so this section answers "we got record apps —
 * what's the bar from here?" instead of repeating capacity numbers.
 * ================================================================= */

.nobo-homepage-app-status {
	/* Lean on system tokens (warm-white surface, bark ink, clay accent,
	 * brand border + text-soft) so the card reads as one calm field card
	 * on the sunset canvas instead of a stack of nested gradients. */
	--nobo-app-status-surface: var(--color-surface, #fffaf2);
	--nobo-app-status-ink: var(--color-heading, #221310);
	--nobo-app-status-ink-soft: var(--color-text-soft, #5b4339);
	--nobo-app-status-rule: var(--color-border, rgba(42, 23, 18, 0.12));
	--nobo-app-status-accent: var(--color-clay-500, #b7653f);
	--nobo-app-status-accent-deep: var(--color-clay-600, #9d5132);
	position: relative;
	margin: clamp(2.5rem, 5vw, 4rem) auto;
	padding: 0;
	max-width: 1180px;
}

.nobo-homepage-app-status__inner {
	position: relative;
	display: grid;
	grid-template-columns: minmax(0, 1.55fr) minmax(0, 1fr);
	grid-template-areas:
		"header metric"
		"columns columns"
		"footnote footnote";
	column-gap: clamp(1.5rem, 3vw, 2.75rem);
	row-gap: clamp(1.25rem, 2.4vw, 1.85rem);
	padding: clamp(1.5rem, 2.6vw, 2.25rem) clamp(1.5rem, 2.8vw, 2.5rem);
	/* One flat warm-white surface. The page's sunset gradient is what
	 * frames the card; the card itself stays calm. */
	background: var(--nobo-app-status-surface);
	border: 1px solid var(--nobo-app-status-rule);
	border-radius: var(--radius-md, 0.75rem);
}

.nobo-homepage-app-status__header {
	grid-area: header;
	display: grid;
	gap: 0.7rem;
	max-width: 52ch;
}

.nobo-homepage-app-status__eyebrow {
	display: inline-flex;
	align-items: center;
	gap: 0.5rem;
	margin: 0;
	padding: 0;
	color: var(--nobo-app-status-accent-deep);
	font-family: var(--font-family-eyebrow);
	font-size: var(--font-size-xs, 0.82rem);
	font-weight: 800;
	letter-spacing: 0.16em;
	line-height: 1.1;
	text-transform: uppercase;
}

.nobo-homepage-app-status__flame {
	width: 0.95em;
	height: 0.95em;
	color: var(--nobo-app-status-accent);
	flex: 0 0 auto;
}

.nobo-homepage-app-status__title {
	margin: 0;
	max-width: 18ch;
	color: var(--nobo-app-status-ink);
	font-family: var(--font-family-display);
	font-size: clamp(1.65rem, 1.2rem + 1.55vw, 2.4rem);
	font-weight: 650;
	line-height: 1.05;
	letter-spacing: var(--tracking-display, -0.012em);
	text-wrap: balance;
}

.nobo-homepage-app-status__lede {
	margin: 0;
	max-width: 60ch;
	color: var(--nobo-app-status-ink-soft);
	font-family: var(--font-family-body);
	font-size: clamp(1rem, 0.96rem + 0.2vw, 1.12rem);
	line-height: 1.55;
	text-wrap: pretty;
}

/* Metric block: now sits right of the header on a hairline-divided
 * column instead of below it. The vertical rule echoes the column
 * dividers below and turns the empty right gutter into a deliberate
 * editorial pair: lede on the left, status pull-quote on the right. */
.nobo-homepage-app-status__metric {
	grid-area: metric;
	position: relative;
	display: grid;
	grid-template-columns: 1fr;
	row-gap: 0.35rem;
	align-self: start;
	margin: 0;
	padding: 0.1rem 0 0 clamp(1.25rem, 2.4vw, 1.85rem);
	border-left: 1px solid var(--nobo-app-status-rule);
}

.nobo-homepage-app-status__metric-label {
	margin: 0;
	color: var(--nobo-app-status-accent-deep);
	font-family: var(--font-family-eyebrow);
	font-size: var(--font-size-xs, 0.82rem);
	font-weight: 700;
	letter-spacing: var(--tracking-eyebrow, 0.14em);
	line-height: 1.2;
	text-transform: uppercase;
}

.nobo-homepage-app-status__metric-value {
	margin: 0;
	color: var(--nobo-app-status-ink);
	font-family: var(--font-family-display);
	font-size: clamp(1.3rem, 1rem + 0.85vw, 1.75rem);
	font-weight: 600;
	letter-spacing: var(--tracking-heading, -0.016em);
	line-height: 1.1;
	text-wrap: balance;
}

.nobo-homepage-app-status__metric-caption {
	margin: 0;
	max-width: 28ch;
	color: var(--nobo-app-status-ink-soft);
	font-family: var(--font-family-display);
	font-size: var(--font-size-sm, 0.92rem);
	font-style: italic;
	font-weight: 400;
	line-height: 1.4;
}

/* Columns: drop the outer top/bottom wrapping borders (less "table"),
 * keep the two interior dividers, and let the CSS counter add a
 * numbered "01 / 02 / 03" step marker above each label so the trio
 * reads as a sequenced field guide, not three parallel boxes. */
.nobo-homepage-app-status__columns {
	grid-area: columns;
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: 0;
	margin: 0;
	padding: clamp(1rem, 2vw, 1.35rem) 0 0;
	border-top: 1px solid var(--nobo-app-status-rule);
	list-style: none;
	counter-reset: nobo-app-step;
}

.nobo-homepage-app-status__column {
	display: grid;
	gap: 0.5rem;
	align-content: start;
	padding: clamp(0.5rem, 1.5vw, 0.85rem) clamp(1rem, 2vw, 1.4rem) clamp(0.5rem, 1.5vw, 0.85rem);
	border-right: 1px solid var(--nobo-app-status-rule);
	counter-increment: nobo-app-step;
}

.nobo-homepage-app-status__column::before {
	content: counter(nobo-app-step, decimal-leading-zero);
	display: block;
	margin-bottom: 0.15rem;
	color: var(--nobo-app-status-accent);
	font-family: var(--font-family-body);
	font-size: var(--font-size-xs, 0.82rem);
	font-weight: 700;
	letter-spacing: var(--tracking-eyebrow, 0.14em);
	font-variant-numeric: tabular-nums;
}

.nobo-homepage-app-status__column:first-child {
	padding-left: 0;
}

.nobo-homepage-app-status__column:last-child {
	border-right: 0;
	padding-right: 0;
}

/* Theme's tokens.css uses `h3 { font-size: ...!important }`, so we counter
 * with !important to keep these field-manual labels at a quiet caps size
 * instead of inheriting the page's display-serif h3 treatment. */
.nobo-homepage-app-status .nobo-homepage-app-status__column-label {
	margin: 0;
	color: var(--nobo-app-status-ink);
	font-family: var(--font-family-body) !important;
	font-size: var(--font-size-sm, 0.95rem) !important;
	font-weight: 700;
	letter-spacing: 0.08em;
	line-height: 1.2 !important;
	text-transform: uppercase;
}

.nobo-homepage-app-status__column-body {
	margin: 0;
	color: var(--nobo-app-status-ink);
	font-family: var(--font-family-body);
	font-size: var(--font-size-base, 1.02rem);
	font-weight: 400;
	line-height: 1.5;
	text-wrap: pretty;
}

/* Footnote: italic Playfair caption ties it to the metric row's voice
 * and reads as a soft annotation, not a fourth column. */
.nobo-homepage-app-status__footnote {
	grid-area: footnote;
	margin: 0;
	max-width: 80ch;
	padding-top: clamp(0.5rem, 1.5vw, 0.85rem);
	border-top: 1px solid var(--nobo-app-status-rule);
	color: var(--nobo-app-status-ink-soft);
	font-family: var(--font-family-display);
	font-size: var(--font-size-xs, 0.82rem);
	font-style: italic;
	line-height: 1.45;
}

.nobo-homepage-app-status__footnote-link {
	margin-left: 0.4em;
	color: var(--nobo-app-status-accent-deep);
	font-style: normal;
	font-weight: 600;
	text-decoration: underline;
	text-decoration-thickness: 1px;
	text-underline-offset: 0.18em;
	transition: color 120ms ease;
}

.nobo-homepage-app-status__footnote-link:hover,
.nobo-homepage-app-status__footnote-link:focus-visible {
	color: var(--nobo-app-status-accent);
}

@media (max-width: 860px) {
	/* Collapse the two-column top row: metric drops below the header
	 * with a horizontal hairline above it instead of the vertical rule. */
	.nobo-homepage-app-status__inner {
		grid-template-columns: 1fr;
		grid-template-areas:
			"header"
			"metric"
			"columns"
			"footnote";
	}

	.nobo-homepage-app-status__metric {
		padding: clamp(1rem, 3vw, 1.35rem) 0 0;
		border-left: 0;
		border-top: 1px solid var(--nobo-app-status-rule);
	}

	.nobo-homepage-app-status__columns {
		grid-template-columns: 1fr;
	}

	.nobo-homepage-app-status__column {
		padding: clamp(1rem, 4vw, 1.3rem) 0;
		border-right: 0;
		border-bottom: 1px solid var(--nobo-app-status-rule);
	}

	.nobo-homepage-app-status__column:first-child {
		padding-top: clamp(1rem, 4vw, 1.3rem);
	}

	.nobo-homepage-app-status__column:last-child {
		border-bottom: 0;
		padding-bottom: clamp(0.5rem, 2vw, 0.8rem);
	}
}