/* ==========================================================================
   Nook Scroll Gallery — front end
   Exact port of the "Inside Nook" section (gx-track / gx-stage / gx-rail)
   from index.html. NO background colour is set anywhere — the section
   inherits the page/body background you already added.
   ========================================================================== */

/* ---- Pinned track / sticky stage ---------------------------------------- */
.nookgx-track {
	position: relative;
	height: var(--nookgx-track-height, 300vh);   /* scroll runway (original: 300vh) */
	padding: 0;
	margin: 0;
	/* NO background — inherits body */
}
.nookgx-stage {
	position: sticky;
	top: 0;
	height: 100vh;
	display: flex;
	flex-direction: column;
	justify-content: center;
	overflow: hidden;
}

/* ---- Container (matches .nook-wrap: max 1200px, 32px gutters) ----------- */
.nookgx-wrap {
	max-width: 1200px;
	margin: 0 auto;
	padding: 0 32px;
	width: 100%;
	box-sizing: border-box;
}

/* ---- Section head (Eyebrow + serif h2 + sub) ----------------------------- */
.nookgx-head {
	max-width: 640px;
	margin: 0 0 44px;
	text-align: left;
}
.nookgx-eyebrow {
	display: inline-block;
	font-family: "Mulish", "Brother 1816", system-ui, sans-serif;
	font-size: var(--nookgx-eyebrow-size, 0.78rem);
	font-weight: var(--nookgx-eyebrow-weight, 700);
	letter-spacing: var(--nookgx-eyebrow-spacing, 0.18em);
	text-transform: uppercase;
	color: var(--nookgx-eyebrow-color, #D2B073);
	line-height: 1.4;
}
.nookgx-title {
	font-family: "Playfair Display", "Cinema Sunday", Georgia, serif;
	font-size: var(--nookgx-title-size, clamp(2rem, 3.2vw, 2.75rem));
	font-weight: var(--nookgx-title-weight, 500);
	letter-spacing: var(--nookgx-title-spacing, -0.02em);
	line-height: 1.08;
	margin: 12px 0 0;
	color: var(--nookgx-title-color, #FFFFFF);
}
.nookgx-sub {
	font-family: "Mulish", "Brother 1816", system-ui, sans-serif;
	font-size: var(--nookgx-sub-size, 16px);
	font-weight: var(--nookgx-sub-weight, 400);
	letter-spacing: var(--nookgx-sub-spacing, 0);
	line-height: 1.6;
	margin: 14px 0 0;
	color: var(--nookgx-sub-color, #B6BEC3);
}

/* ---- Pan progress hairline (220 x 2, gold fill, scaleX driven by JS) ----- */
.nookgx-progress {
	position: relative;
	width: 220px;
	height: 2px;
	border-radius: 2px;
	background: var(--nookgx-bar-track, rgba(255, 255, 255, 0.16));
	overflow: hidden;
	margin: -20px 0 36px;
}
.nookgx-progress-fill {
	position: absolute;
	inset: 0;
	background: var(--nookgx-bar-color, #D2B073);
	transform-origin: left center;
	transform: scaleX(0);
}

/* ---- Clip viewport + horizontal rail ------------------------------------- */
.nookgx-clip {
	width: 100%;
	overflow: hidden;
}
.nookgx-rail {
	display: flex;
	gap: 18px;
	padding: 0 32px;
	padding-right: 32px;
	will-change: transform;
	margin: 0;
}

/* ---- Photo tiles ---------------------------------------------------------- */
.nookgx-tile {
	position: relative;
	flex: 0 0 clamp(280px, 32vw, 440px);
	height: 58vh;
	border-radius: 18px;
	overflow: hidden;
	margin: 0;
	background: #2b353c; /* image letterbox fill only — sits behind the photo */
	box-shadow:
		0 24px 54px -26px rgba(0, 0, 0, 0.62),
		inset 0 0 0 1px rgba(255, 255, 255, 0.14),
		inset 0 1px 0 rgba(255, 255, 255, 0.32);
}
.nookgx-img {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
	object-position: center top;
	display: block;
}
.nookgx-overlay {
	position: absolute;
	inset: 0;
	pointer-events: none;
	background: linear-gradient(
		180deg,
		rgba(18, 23, 27, 0) 38%,
		rgba(18, 23, 27, 0.16) 64%,
		rgba(18, 23, 27, 0.74) 100%
	);
}
.nookgx-cap {
	position: absolute;
	left: 18px;
	bottom: 15px;
	z-index: 2;
	font-family: "Mulish", "Brother 1816", system-ui, sans-serif;
	font-size: var(--nookgx-cap-size, 12px);
	font-weight: var(--nookgx-cap-weight, 700);
	letter-spacing: var(--nookgx-cap-spacing, 0.12em);
	text-transform: uppercase;
	color: var(--nookgx-cap-color, rgba(255, 255, 255, 0.92));
	text-shadow: 0 1px 8px rgba(0, 0, 0, 0.5);
	line-height: 1.3;
}

/* ---- Narrow screens: drop the pin, rail becomes a vertical stack --------- */
@media (max-width: 880px) {
	.nookgx-track { height: auto !important; }
	.nookgx-stage {
		position: static !important;
		height: auto !important;
		overflow: visible !important;
		padding: 60px 0 84px;
	}
	.nookgx-rail {
		flex-direction: column;
		padding: 0 32px;
	}
	.nookgx-tile {
		flex: none;
		width: 100% !important;
		height: 240px !important;
	}
	.nookgx-progress { display: none; }
}

/* ---- Reduced motion: same static fallback -------------------------------- */
@media (prefers-reduced-motion: reduce) {
	.nookgx-track { height: auto !important; }
	.nookgx-stage {
		position: static !important;
		height: auto !important;
		overflow: visible !important;
		padding: 60px 0 84px;
	}
	.nookgx-rail { transform: none !important; }
	.nookgx-progress-fill { transform: scaleX(1) !important; }
}