/* StyleCloud Stacking Covers — frontend styles. Inherits theme fonts; no font-family declarations.
   All sizing is in rem so the block scales with the user's root font-size; hairlines,
   filter blurs, and the JS-driven transforms stay in px (where rem would be wrong or
   wouldn't read). 1rem = 16px at default browser settings. */

.stylecloud-stacking-covers {
	position: relative;
	background: var(--ssc-bg, #0d0c0b);
	color: var(--ssc-fg, #f6f2e8);
	margin: 0;
	padding: 0;
	/* Contain internal stacking so chapter z-indexes (10+) don't escape into
	   the body's stacking context and paint over things like the site's
	   sticky header. */
	isolation: isolate;
}

/* Sticky stage that holds chapters during scroll-driven animation. */
.stylecloud-stacking-covers__stage {
	position: sticky;
	top: 0;
	height: 100vh;
	min-height: 100vh;
	width: 100%;
	overflow: hidden;
	z-index: 0;
}

.stylecloud-stacking-covers__stage-inner {
	position: absolute;
	inset: 0;
}

/* Inset the FIRST chapter only — gives it a frame around the edges so the
   backdrop (or section bg) peeks through. --ssc-card-inset is set inline by
   save() in rem (e.g. "2rem"). */
.stylecloud-stacking-covers__chapter[data-index="0"] {
	inset: var(--ssc-card-inset, 0);
	width: auto;
	height: auto;
	min-width: 0;
	min-height: 0;
	max-width: none;
	max-height: none;
}

/* Backdrop — view.js inserts this when cardInset > 0 and showBackdrop is on. */
.stylecloud-stacking-covers__backdrop {
	position: absolute;
	inset: 0;
	pointer-events: none;
	overflow: hidden;
	z-index: 0;
}
.stylecloud-stacking-covers__backdrop-image {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
	object-position: center;
	display: block;
}

.stylecloud-stacking-covers__track {
	position: relative;
	width: 100%;
	pointer-events: none;
}

/* Chapter card. */
.stylecloud-stacking-covers__chapter {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	min-height: 100%;
	margin: 0;
	padding: 0;
	list-style: none;
	overflow: hidden;
	will-change: transform, opacity;
	background: var(--ssc-bg, #0d0c0b);
}

.stylecloud-stacking-covers__figure {
	display: block;
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	margin: 0;
	overflow: hidden;
}

.stylecloud-stacking-covers__image {
	display: block;
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	min-width: 100%;
	min-height: 100%;
	max-width: none;
	max-height: none;
	object-fit: cover;
	object-position: center;
	will-change: transform, opacity, filter;
	user-select: none;
}

/* Vignette */
.stylecloud-stacking-covers__figure::after {
	content: "";
	position: absolute;
	inset: 0;
	pointer-events: none;
	background:
		linear-gradient(180deg, rgba(0,0,0,0.35) 0%, transparent 22%, transparent 60%, rgba(0,0,0,0.55) 100%),
		radial-gradient(120% 80% at 50% 50%, transparent 40%, rgba(0,0,0,0.35) 100%);
}

/* Copy block — sits over the image */
.stylecloud-stacking-covers__copy {
	position: absolute;
	z-index: 4;
	bottom: clamp( 5rem, 12vh, 8.75rem );
	max-width: min( 56.25rem, 80vw );
	padding: 0 clamp( 1.5rem, 6vw, 5rem );
	color: inherit;
	pointer-events: none;
	display: flex;
	flex-direction: column;
	gap: clamp( 1rem, 2vh, 1.75rem );
}

.stylecloud-stacking-covers__chapter[data-align="left"] .stylecloud-stacking-covers__copy {
	left: 0;
	text-align: left;
	align-items: flex-start;
}

.stylecloud-stacking-covers__chapter[data-align="right"] .stylecloud-stacking-covers__copy {
	right: 0;
	text-align: right;
	align-items: flex-end;
}

/* Kicker (H4) */
.stylecloud-stacking-covers__kicker {
	margin: 0;
	font-size: clamp( 0.75rem, 1vw, 0.875rem );
	letter-spacing: 0.22em;
	text-transform: uppercase;
	font-weight: 500;
	color: rgba( 246, 242, 232, 0.78 );
}

/* Headline (H2) */
.stylecloud-stacking-covers__headline {
	margin: 0;
	font-size: calc( clamp( 3.5rem, 11vw, 10.5rem ) * var(--ssc-headline-scale, 1) );
	line-height: 0.96;
	letter-spacing: -0.025em;
	color: inherit;
	overflow: hidden;
	padding: 0.08em 0 0.18em;
	margin: -0.08em 0 -0.18em;
}

/* Per-line wrapper (multi-line headlines). */
.stylecloud-stacking-covers__hl-line {
	display: block;
	overflow: hidden;
	padding: 0.08em 0.5em 0.18em;
	margin: -0.08em -0.5em -0.18em;
	white-space: nowrap;
}

.stylecloud-stacking-covers__hl-char-wrap {
	display: inline-block;
	overflow: hidden;
	vertical-align: top;
	padding: 0 0.5em;
	margin: 0 -0.5em;
}
.stylecloud-stacking-covers__hl-char {
	display: inline-block;
	will-change: transform, opacity, filter;
}

/* Strapline (body p) */
.stylecloud-stacking-covers__strapline {
	margin: 0;
	font-size: clamp( 0.9375rem, 1.2vw, 1.125rem );
	line-height: 1.5;
	color: rgba( 246, 242, 232, 0.78 );
	max-width: 26.25rem;
}

/* Progress chrome — wraps the track and the meta label. */
.stylecloud-stacking-covers__chrome {
	position: absolute;
	z-index: 100;
	pointer-events: none;
	color: var(--ssc-fg, #f6f2e8);
}
.stylecloud-stacking-covers__chrome--bottom {
	left: 0;
	right: 0;
	bottom: clamp( 2.25rem, 5vh, 4.5rem );
	padding: 0 clamp( 1.75rem, 5vw, 4rem );
	display: flex;
	flex-direction: column;
	gap: 0.875rem;
}

.stylecloud-stacking-covers__progress {
	position: relative;
	width: 100%;
	height: 1px;     /* hairline — keep px */
	background: rgba( 246, 242, 232, 0.18 );
}
.stylecloud-stacking-covers__progress-fill {
	position: absolute;
	inset: 0;
	background: rgba( 246, 242, 232, 0.85 );
	transform-origin: left;
	transform: scaleX( 0 );
	transition: transform 200ms linear;
}
.stylecloud-stacking-covers__progress-tick {
	position: absolute;
	top: 50%;
	width: 1px;      /* hairline — keep px */
	height: 0.5rem;
	margin-top: -0.25rem;
	background: rgba( 246, 242, 232, 0.75 );
	transition: opacity 200ms linear;
	opacity: 0.35;
}

/* Chapter meta row: number + divider + label */
.stylecloud-stacking-covers__meta {
	display: flex;
	align-items: center;
	gap: 0.875rem;
	font-size: 0.6875rem;
	letter-spacing: 0.22em;
	text-transform: uppercase;
	color: rgba( 246, 242, 232, 0.78 );
}
.stylecloud-stacking-covers__meta-num {
	font-variant-numeric: tabular-nums;
	color: rgba( 246, 242, 232, 0.92 );
}
.stylecloud-stacking-covers__meta-divider {
	display: inline-block;
	width: 1.125rem;
	height: 1px;     /* hairline — keep px */
	background: rgba( 246, 242, 232, 0.4 );
}
.stylecloud-stacking-covers__meta-label {
	letter-spacing: 0.18em;
	color: rgba( 246, 242, 232, 0.92 );
}

/* Grain */
.stylecloud-stacking-covers__grain {
	position: absolute;
	inset: -50%;
	width: 200%;
	height: 200%;
	z-index: 90;
	pointer-events: none;
	opacity: 0.07;
	mix-blend-mode: overlay;
	background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='220' height='220'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/><feColorMatrix values='0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0.6 0'/></filter><rect width='100%' height='100%' filter='url(%23n)'/></svg>");
	animation: ssc-grain 1.2s steps(6) infinite;
}
@keyframes ssc-grain {
	0%   { transform: translate(0,0); }
	20%  { transform: translate(-3%, 2%); }
	40%  { transform: translate(2%, -3%); }
	60%  { transform: translate(-2%, -2%); }
	80%  { transform: translate(3%, 1%); }
	100% { transform: translate(0,0); }
}

/* Reduced motion: render as a normal stacked list */
.stylecloud-stacking-covers--reduced .stylecloud-stacking-covers__chapters {
	display: flex;
	flex-direction: column;
	gap: 0;
	margin: 0;
	padding: 0;
	list-style: none;
}
.stylecloud-stacking-covers--reduced .stylecloud-stacking-covers__chapter {
	position: relative;
	height: 80vh;
	inset: auto;
}

/* =====================================================================
   Headline styles — corner (default), centered, stack, marquee.
   ===================================================================== */

/* ----- Centered */
.stylecloud-stacking-covers--style-centered .stylecloud-stacking-covers__chapter .stylecloud-stacking-covers__copy,
.stylecloud-stacking-covers--style-centered .stylecloud-stacking-covers__chapter[data-align="left"] .stylecloud-stacking-covers__copy,
.stylecloud-stacking-covers--style-centered .stylecloud-stacking-covers__chapter[data-align="right"] .stylecloud-stacking-covers__copy {
	left: 50%;
	right: auto;
	transform: translateX( -50% );
	max-width: min( 56.25rem, 88vw );
	text-align: center;
	align-items: center;
}
.stylecloud-stacking-covers--style-centered .stylecloud-stacking-covers__strapline {
	max-width: 32.5rem;
	text-align: center;
}

/* ----- Stack */
.stylecloud-stacking-covers--style-stack .stylecloud-stacking-covers__chapter .stylecloud-stacking-covers__copy,
.stylecloud-stacking-covers--style-stack .stylecloud-stacking-covers__chapter[data-align="left"] .stylecloud-stacking-covers__copy,
.stylecloud-stacking-covers--style-stack .stylecloud-stacking-covers__chapter[data-align="right"] .stylecloud-stacking-covers__copy {
	left: 50%;
	right: auto;
	top: 50%;
	bottom: auto;
	transform: translate( -50%, -50% );
	max-width: min( 68.75rem, 92vw );
	text-align: center;
	align-items: center;
	gap: clamp( 0.875rem, 2vh, 1.375rem );
}
.stylecloud-stacking-covers--style-stack .stylecloud-stacking-covers__headline {
	font-size: calc( clamp( 4rem, 12vw, 11.25rem ) * var(--ssc-headline-scale, 1) );
	line-height: 0.94;
	letter-spacing: -0.025em;
	display: flex;
	flex-direction: column;
	gap: 0.04em;
}
.stylecloud-stacking-covers--style-stack .stylecloud-stacking-covers__headline--lines-2 .stylecloud-stacking-covers__hl-line--1 {
	font-style: italic;
	font-weight: 300;
}
.stylecloud-stacking-covers--style-stack .stylecloud-stacking-covers__headline--lines-2 .stylecloud-stacking-covers__hl-line--2 {
	font-style: normal;
	font-weight: 400;
	font-size: 0.62em;
	letter-spacing: 0.18em;
	text-transform: uppercase;
	line-height: 1.05;
	opacity: 0.92;
}
.stylecloud-stacking-covers--style-stack .stylecloud-stacking-covers__strapline {
	max-width: 32.5rem;
	text-align: center;
}

/* ----- Marquee */
.stylecloud-stacking-covers--style-marquee .stylecloud-stacking-covers__chapter .stylecloud-stacking-covers__copy,
.stylecloud-stacking-covers--style-marquee .stylecloud-stacking-covers__chapter[data-align="left"] .stylecloud-stacking-covers__copy,
.stylecloud-stacking-covers--style-marquee .stylecloud-stacking-covers__chapter[data-align="right"] .stylecloud-stacking-covers__copy {
	left: 0;
	right: 0;
	top: 50%;
	bottom: auto;
	width: 100%;
	max-width: none;
	transform: translateY( -50% );
	padding: 0;
	text-align: center;
	align-items: center;
	gap: clamp( 0.875rem, 2vh, 1.375rem );
}
.stylecloud-stacking-covers--style-marquee .stylecloud-stacking-covers__kicker,
.stylecloud-stacking-covers--style-marquee .stylecloud-stacking-covers__strapline {
	padding: 0 clamp( 1.5rem, 6vw, 5rem );
	max-width: min( 45rem, 80vw );
	text-align: center;
}
.stylecloud-stacking-covers--style-marquee .stylecloud-stacking-covers__strapline {
	margin: 0 auto;
}
.stylecloud-stacking-covers--style-marquee .stylecloud-stacking-covers__headline {
	font-size: calc( clamp( 5rem, 14vw, 13.75rem ) * var(--ssc-headline-scale, 1) );
	line-height: 0.95;
	letter-spacing: -0.03em;
	width: 100%;
	font-style: italic;
	font-weight: 300;
	overflow: visible;
	white-space: nowrap;
	will-change: transform;
}
.stylecloud-stacking-covers--style-marquee .stylecloud-stacking-covers__hl-line {
	width: 100%;
	overflow: visible;
	white-space: nowrap;
	padding: 0.1em 0 0.2em;
	margin: -0.1em 0 -0.2em;
	display: block;
}

/* =====================================================================
   Mobile — use em-based breakpoint so the media query respects the user's
   root font-size. 45em ≈ 720px at default settings.
   ===================================================================== */
@media (max-width: 45em) {
	.stylecloud-stacking-covers__copy { padding: 0 1.25rem; bottom: 5rem; }
	.stylecloud-stacking-covers__chapter[data-align="right"] .stylecloud-stacking-covers__copy { align-items: flex-start; text-align: left; }

	/* Centered + Stack collapse to a corner-style left-aligned layout on phones */
	.stylecloud-stacking-covers--style-centered .stylecloud-stacking-covers__copy,
	.stylecloud-stacking-covers--style-stack .stylecloud-stacking-covers__copy {
		left: 0;
		top: auto;
		bottom: 5rem;
		transform: none;
		text-align: left;
		align-items: flex-start;
		padding: 0 1.25rem;
	}
	.stylecloud-stacking-covers--style-stack .stylecloud-stacking-covers__strapline,
	.stylecloud-stacking-covers--style-centered .stylecloud-stacking-covers__strapline {
		text-align: left;
	}

	/* Marquee on mobile */
	.stylecloud-stacking-covers--style-marquee .stylecloud-stacking-covers__copy {
		padding: 0;
	}
}

/* =====================================================================
   Headline size per breakpoint
   The vw-root scaling already shrinks the headline fluidly, but the desktop
   clamp still resolves too large on the tablet and mobile tiers, so cap it
   explicitly. Applies to all headline styles (corner/centred, stack, marquee).
   The --ssc-headline-scale multiplier is kept so the inspector's "Headline
   scale" control still works (at the default scale of 1 this is exactly the
   requested rem value). Breakpoints are the StyleCloud tiers (64em = 1024px,
   48em = 768px) written in em so they track the browser's initial font-size,
   not the vw-scaled root.
   ===================================================================== */
@media (min-width: 48em) and (max-width: 63.999em) { /* Tablet */
	.stylecloud-stacking-covers__headline,
	.stylecloud-stacking-covers--style-stack .stylecloud-stacking-covers__headline,
	.stylecloud-stacking-covers--style-marquee .stylecloud-stacking-covers__headline {
		font-size: calc( 3rem * var(--ssc-headline-scale, 1) );
	}
}
@media (max-width: 47.999em) { /* Mobile */
	.stylecloud-stacking-covers__headline,
	.stylecloud-stacking-covers--style-stack .stylecloud-stacking-covers__headline,
	.stylecloud-stacking-covers--style-marquee .stylecloud-stacking-covers__headline {
		font-size: calc( 2rem * var(--ssc-headline-scale, 1) );
	}
}