/******/
/*** SCROLLED / ANIMATE ON SCROLL ***/
/******/

/* BASE */

.js-scroll {
	opacity: 0;
	transition: none;
	will-change: opacity, transform, clip-path;
	-webkit-backface-visibility: hidden;
	backface-visibility: hidden;
	-webkit-transform: translate3d(0, 0, 0);
	transform: translate3d(0, 0, 0);
}

.js-scroll img,
.js-scroll picture,
.js-scroll svg {
	-webkit-backface-visibility: hidden;
	backface-visibility: hidden;
	-webkit-transform: translate3d(0, 0, 0);
	transform: translate3d(0, 0, 0);
}

/* Set the hidden/start state before JS runs.
   This prevents Safari from briefly painting the final image state. */
.js-scroll.fade-in-top {
	-webkit-transform: translate3d(0, -3.125rem, 0);
	transform: translate3d(0, -3.125rem, 0);
}

/* WORD-BY-WORD FADE-IN-BOTTOM START STATE */

.js-scroll.fade-in-bottom:has(h1 span),
.js-scroll.fade-in-bottom:has(h2 span),
h1.js-scroll.fade-in-bottom,
h2.js-scroll.fade-in-bottom {
	opacity: 1;
}

.js-scroll.fade-in-bottom h1 span,
.js-scroll.fade-in-bottom h2 span,
h1.js-scroll.fade-in-bottom span,
h2.js-scroll.fade-in-bottom span {
	display: inline-block;
	opacity: 0;
	-webkit-transform: translate3d(0, 3.125rem, 0);
	transform: translate3d(0, 3.125rem, 0);
	-webkit-backface-visibility: hidden;
	backface-visibility: hidden;
	will-change: opacity, transform;
}

.js-scroll.slide-in-left {
	-webkit-transform: translate3d(-6.25rem, 0, 0);
	transform: translate3d(-6.25rem, 0, 0);
}

.js-scroll.slide-in-right {
	-webkit-transform: translate3d(6.25rem, 0, 0);
	transform: translate3d(6.25rem, 0, 0);
}

.js-scroll.wipe-in-top {
	-webkit-clip-path: var(--wipe-in-top);
	clip-path: var(--wipe-in-top);
}

.js-scroll.wipe-in-bottom,
.js-scroll.wipe-and-zoom {
	-webkit-clip-path: var(--wipe-in-bottom);
	clip-path: var(--wipe-in-bottom);
}

.js-scroll.wipe-in-right {
	-webkit-clip-path: var(--wipe-in-left);
	clip-path: var(--wipe-in-left);
}

.js-scroll.wipe-in-left {
	-webkit-clip-path: var(--wipe-in-right);
	clip-path: var(--wipe-in-right);
}

.js-scroll.wipe-and-zoom {
	-webkit-transform: translate3d(0, 0, 0) scale(1.08);
	transform: translate3d(0, 0, 0) scale(1.08);
	overflow: clip;
}

.logged-in .js-scroll,
.paged .js-scroll {
	opacity: 1 !important;
}

.js-scroll.scrolled.wipe-in-top,
.js-scroll.scrolled.wipe-in-bottom,
.js-scroll.scrolled.wipe-in-right,
.js-scroll.scrolled.wipe-in-left {
	opacity: 1;
}

.js-scroll.scrolled-complete {
	opacity: 1;
	will-change: auto;
}

/* ANIMATION DEFAULTS */

.scrolled {
	--animation-duration: 800ms;
	--animation-easing: ease-in-out;
	--animation-delay: 0ms;
	--word-stagger: 100ms;
}

.scrolled.fade-in,
.scrolled.fade-in-top,
.scrolled.fade-in-bottom h1 span,
.scrolled.fade-in-bottom h2 span,
h1.scrolled.fade-in-bottom span,
h2.scrolled.fade-in-bottom span,
.scrolled.slide-in-left,
.scrolled.slide-in-right,
.scrolled.wipe-in-top,
.scrolled.wipe-in-bottom,
.scrolled.wipe-in-right,
.scrolled.wipe-in-left,
.scrolled.wipe-and-zoom {
	-webkit-animation-duration: var(--animation-duration);
	animation-duration: var(--animation-duration);
	-webkit-animation-timing-function: var(--animation-easing);
	animation-timing-function: var(--animation-easing);
	-webkit-animation-delay: var(--animation-delay);
	animation-delay: var(--animation-delay);
	-webkit-animation-fill-mode: both;
	animation-fill-mode: both;
}

/* Add word-specific stagger using the inline --word-index value from JS */

.scrolled.fade-in-bottom h1 span,
.scrolled.fade-in-bottom h2 span,
h1.scrolled.fade-in-bottom span,
h2.scrolled.fade-in-bottom span {
	-webkit-animation-delay: calc(var(--animation-delay) + (var(--word-index, 0) * var(--word-stagger)));
	animation-delay: calc(var(--animation-delay) + (var(--word-index, 0) * var(--word-stagger)));
}

/* FADE / SLIDE ANIMATIONS */

.scrolled.fade-in {
	-webkit-animation-name: fade-in;
	animation-name: fade-in;
}

.scrolled.fade-in-top {
	-webkit-animation-name: fade-in-top;
	animation-name: fade-in-top;
}

.scrolled.fade-in-bottom h1 span,
.scrolled.fade-in-bottom h2 span,
h1.scrolled.fade-in-bottom span,
h2.scrolled.fade-in-bottom span {
	-webkit-animation-name: fade-in-bottom;
	animation-name: fade-in-bottom;
}

.scrolled.slide-in-left {
	-webkit-animation-name: slide-in-left;
	animation-name: slide-in-left;
}

.scrolled.slide-in-right {
	-webkit-animation-name: slide-in-right;
	animation-name: slide-in-right;
}

/* WIPE ANIMATIONS */

:root {
	--wipe-in: inset(0 0 0 0);
	--wipe-in-bottom: inset(100% 0 0 0);
	--wipe-in-left: inset(0 100% 0 0);
	--wipe-in-top: inset(0 0 100% 0);
	--wipe-in-right: inset(0 0 0 100%);
}

.scrolled.wipe-in-top,
.scrolled.wipe-in-bottom,
.scrolled.wipe-in-right,
.scrolled.wipe-in-left {
	--animation-duration: 600ms;
}

.scrolled.wipe-in-top {
	-webkit-animation-name: wipe-in-top;
	animation-name: wipe-in-top;
}

.scrolled.wipe-in-bottom {
	-webkit-animation-name: wipe-in-bottom;
	animation-name: wipe-in-bottom;
}

.scrolled.wipe-in-right {
	-webkit-animation-name: wipe-in-right;
	animation-name: wipe-in-right;
}

.scrolled.wipe-in-left {
	-webkit-animation-name: wipe-in-left;
	animation-name: wipe-in-left;
}

/* WIPE + ZOOM */

.scrolled.wipe-and-zoom {
	--animation-duration: 1200ms;
	-webkit-animation-name: wipe-and-zoom;
	animation-name: wipe-and-zoom;
	overflow: clip;
}

/* ATTRIBUTE-BASED WIPE SUPPORT */

[transition-style] {
	-webkit-animation-delay: var(--transition__delay, 0ms);
	animation-delay: var(--transition__delay, 0ms);
	-webkit-animation-duration: var(--transition__duration, 2.5s);
	animation-duration: var(--transition__duration, 2.5s);
	-webkit-animation-timing-function: var(--transition__easing, cubic-bezier(.25, 1, .3, 1));
	animation-timing-function: var(--transition__easing, cubic-bezier(.25, 1, .3, 1));
	-webkit-animation-fill-mode: both;
	animation-fill-mode: both;
	will-change: clip-path;
}

[transition-style="in:wipe:down"],
[transition-style="in:wipe:top"] {
	-webkit-animation-name: wipe-in-top;
	animation-name: wipe-in-top;
}

[transition-style="in:wipe:right"] {
	-webkit-animation-name: wipe-in-right;
	animation-name: wipe-in-right;
}

[transition-style="in:wipe:bottom"],
[transition-style="in:wipe:up"] {
	-webkit-animation-name: wipe-in-bottom;
	animation-name: wipe-in-bottom;
}

[transition-style="in:wipe:left"] {
	-webkit-animation-name: wipe-in-left;
	animation-name: wipe-in-left;
}

/******/
/*** KEYFRAMES ***/
/******/

@-webkit-keyframes fade-in {
	0% {
		opacity: 0;
	}

	100% {
		opacity: 1;
	}
}

@keyframes fade-in {
	0% {
		opacity: 0;
	}

	100% {
		opacity: 1;
	}
}

@-webkit-keyframes fade-in-top {
	0% {
		-webkit-transform: translate3d(0, -3.125rem, 0);
		transform: translate3d(0, -3.125rem, 0);
		opacity: 0;
	}

	100% {
		-webkit-transform: translate3d(0, 0, 0);
		transform: translate3d(0, 0, 0);
		opacity: 1;
	}
}

@keyframes fade-in-top {
	0% {
		-webkit-transform: translate3d(0, -3.125rem, 0);
		transform: translate3d(0, -3.125rem, 0);
		opacity: 0;
	}

	100% {
		-webkit-transform: translate3d(0, 0, 0);
		transform: translate3d(0, 0, 0);
		opacity: 1;
	}
}

@-webkit-keyframes fade-in-bottom {
	0% {
		-webkit-transform: translate3d(0, 3.125rem, 0);
		transform: translate3d(0, 3.125rem, 0);
		opacity: 0;
	}

	100% {
		-webkit-transform: translate3d(0, 0, 0);
		transform: translate3d(0, 0, 0);
		opacity: 1;
	}
}

@keyframes fade-in-bottom {
	0% {
		-webkit-transform: translate3d(0, 3.125rem, 0);
		transform: translate3d(0, 3.125rem, 0);
		opacity: 0;
	}

	100% {
		-webkit-transform: translate3d(0, 0, 0);
		transform: translate3d(0, 0, 0);
		opacity: 1;
	}
}

@-webkit-keyframes slide-in-left {
	0% {
		-webkit-transform: translate3d(-6.25rem, 0, 0);
		transform: translate3d(-6.25rem, 0, 0);
		opacity: 0;
	}

	100% {
		-webkit-transform: translate3d(0, 0, 0);
		transform: translate3d(0, 0, 0);
		opacity: 1;
	}
}

@keyframes slide-in-left {
	0% {
		-webkit-transform: translate3d(-6.25rem, 0, 0);
		transform: translate3d(-6.25rem, 0, 0);
		opacity: 0;
	}

	100% {
		-webkit-transform: translate3d(0, 0, 0);
		transform: translate3d(0, 0, 0);
		opacity: 1;
	}
}

@-webkit-keyframes slide-in-right {
	0% {
		-webkit-transform: translate3d(6.25rem, 0, 0);
		transform: translate3d(6.25rem, 0, 0);
		opacity: 0;
	}

	100% {
		-webkit-transform: translate3d(0, 0, 0);
		transform: translate3d(0, 0, 0);
		opacity: 1;
	}
}

@keyframes slide-in-right {
	0% {
		-webkit-transform: translate3d(6.25rem, 0, 0);
		transform: translate3d(6.25rem, 0, 0);
		opacity: 0;
	}

	100% {
		-webkit-transform: translate3d(0, 0, 0);
		transform: translate3d(0, 0, 0);
		opacity: 1;
	}
}

@-webkit-keyframes wipe-in-top {
	0% {
		-webkit-clip-path: var(--wipe-in-top);
		clip-path: var(--wipe-in-top);
	}

	100% {
		-webkit-clip-path: var(--wipe-in);
		clip-path: var(--wipe-in);
	}
}

@keyframes wipe-in-top {
	0% {
		-webkit-clip-path: var(--wipe-in-top);
		clip-path: var(--wipe-in-top);
	}

	100% {
		-webkit-clip-path: var(--wipe-in);
		clip-path: var(--wipe-in);
	}
}

@-webkit-keyframes wipe-in-right {
	0% {
		-webkit-clip-path: var(--wipe-in-left);
		clip-path: var(--wipe-in-left);
	}

	100% {
		-webkit-clip-path: var(--wipe-in);
		clip-path: var(--wipe-in);
	}
}

@keyframes wipe-in-right {
	0% {
		-webkit-clip-path: var(--wipe-in-left);
		clip-path: var(--wipe-in-left);
	}

	100% {
		-webkit-clip-path: var(--wipe-in);
		clip-path: var(--wipe-in);
	}
}

@-webkit-keyframes wipe-in-bottom {
	0% {
		-webkit-clip-path: var(--wipe-in-bottom);
		clip-path: var(--wipe-in-bottom);
	}

	100% {
		-webkit-clip-path: var(--wipe-in);
		clip-path: var(--wipe-in);
	}
}

@keyframes wipe-in-bottom {
	0% {
		-webkit-clip-path: var(--wipe-in-bottom);
		clip-path: var(--wipe-in-bottom);
	}

	100% {
		-webkit-clip-path: var(--wipe-in);
		clip-path: var(--wipe-in);
	}
}

@-webkit-keyframes wipe-in-left {
	0% {
		-webkit-clip-path: var(--wipe-in-right);
		clip-path: var(--wipe-in-right);
	}

	100% {
		-webkit-clip-path: var(--wipe-in);
		clip-path: var(--wipe-in);
	}
}

@keyframes wipe-in-left {
	0% {
		-webkit-clip-path: var(--wipe-in-right);
		clip-path: var(--wipe-in-right);
	}

	100% {
		-webkit-clip-path: var(--wipe-in);
		clip-path: var(--wipe-in);
	}
}

@-webkit-keyframes wipe-and-zoom {
	0% {
		-webkit-clip-path: var(--wipe-in-bottom);
		clip-path: var(--wipe-in-bottom);
		-webkit-transform: translate3d(0, 0, 0) scale(1.08);
		transform: translate3d(0, 0, 0) scale(1.08);
		opacity: 0;
	}

	100% {
		-webkit-clip-path: var(--wipe-in);
		clip-path: var(--wipe-in);
		-webkit-transform: translate3d(0, 0, 0) scale(1);
		transform: translate3d(0, 0, 0) scale(1);
		opacity: 1;
	}
}

@keyframes wipe-and-zoom {
	0% {
		-webkit-clip-path: var(--wipe-in-bottom);
		clip-path: var(--wipe-in-bottom);
		-webkit-transform: translate3d(0, 0, 0) scale(1.08);
		transform: translate3d(0, 0, 0) scale(1.08);
		opacity: 0;
	}

	100% {
		-webkit-clip-path: var(--wipe-in);
		clip-path: var(--wipe-in);
		-webkit-transform: translate3d(0, 0, 0) scale(1);
		transform: translate3d(0, 0, 0) scale(1);
		opacity: 1;
	}
}

/******/
/*** INFINITE SCROLL ***/
/******/

.infinite-scroll-wrapper {
	width: 100%;
	overflow-x: hidden;
}

.infinite-scroll-container {
	display: flex;
	width: 125rem;
	animation: infinite-scroll 20s linear infinite;
}

.infinite-scroll-item {
	white-space: nowrap;
}

@-webkit-keyframes infinite-scroll {
	from {
		-webkit-transform: translate3d(0, 0, 0);
		transform: translate3d(0, 0, 0);
	}

	to {
		-webkit-transform: translate3d(-50%, 0, 0);
		transform: translate3d(-50%, 0, 0);
	}
}

@keyframes infinite-scroll {
	from {
		-webkit-transform: translate3d(0, 0, 0);
		transform: translate3d(0, 0, 0);
	}

	to {
		-webkit-transform: translate3d(-50%, 0, 0);
		transform: translate3d(-50%, 0, 0);
	}
}

/******/
/*** DELAYS ***/
/******/

.transition-delay-50 {
	--animation-delay: 50ms;
	animation-delay: 50ms;
	transition-delay: 50ms;
}

.transition-delay-100 {
	--animation-delay: 100ms;
	animation-delay: 100ms;
	transition-delay: 100ms;
}

.transition-delay-150 {
	--animation-delay: 150ms;
	animation-delay: 150ms;
	transition-delay: 150ms;
}

.transition-delay-200 {
	--animation-delay: 200ms;
	animation-delay: 200ms;
	transition-delay: 200ms;
}

.transition-delay-250 {
	--animation-delay: 250ms;
	animation-delay: 250ms;
	transition-delay: 250ms;
}

.transition-delay-300 {
	--animation-delay: 300ms;
	animation-delay: 300ms;
	transition-delay: 300ms;
}

.transition-delay-350 {
	--animation-delay: 350ms;
	animation-delay: 350ms;
	transition-delay: 350ms;
}

.transition-delay-400 {
	--animation-delay: 400ms;
	animation-delay: 400ms;
	transition-delay: 400ms;
}

.transition-delay-450 {
	--animation-delay: 450ms;
	animation-delay: 450ms;
	transition-delay: 450ms;
}

.transition-delay-500 {
	--animation-delay: 500ms;
	animation-delay: 500ms;
	transition-delay: 500ms;
}

.transition-delay-550 {
	--animation-delay: 550ms;
	animation-delay: 550ms;
	transition-delay: 550ms;
}

.transition-delay-600 {
	--animation-delay: 600ms;
	animation-delay: 600ms;
	transition-delay: 600ms;
}

.transition-delay-650 {
	--animation-delay: 650ms;
	animation-delay: 650ms;
	transition-delay: 650ms;
}

.transition-delay-700 {
	--animation-delay: 700ms;
	animation-delay: 700ms;
	transition-delay: 700ms;
}

.transition-delay-750 {
	--animation-delay: 750ms;
	animation-delay: 750ms;
	transition-delay: 750ms;
}

.transition-delay-800 {
	--animation-delay: 800ms;
	animation-delay: 800ms;
	transition-delay: 800ms;
}

.transition-delay-850 {
	--animation-delay: 850ms;
	animation-delay: 850ms;
	transition-delay: 850ms;
}

.transition-delay-900 {
	--animation-delay: 900ms;
	animation-delay: 900ms;
	transition-delay: 900ms;
}

.transition-delay-950 {
	--animation-delay: 950ms;
	animation-delay: 950ms;
	transition-delay: 950ms;
}

.transition-delay-1000 {
	--animation-delay: 1000ms;
	animation-delay: 1000ms;
	transition-delay: 1000ms;
}

/******/
/*** GRID STAGGER DELAYS ***/
/******/

@media screen and (min-width: 48rem) {
	.grid-50:nth-of-type(2n+2),
	.grid-33:nth-of-type(3n+2),
	.grid-25:nth-of-type(4n+2),
	.grid-20:nth-of-type(5n+2),
	.grid-16:nth-of-type(6n+2) {
		animation-delay: 100ms;
	}

	.grid-33:nth-of-type(3n+3),
	.grid-25:nth-of-type(4n+3),
	.grid-20:nth-of-type(5n+3),
	.grid-16:nth-of-type(6n+3) {
		animation-delay: 200ms;
	}

	.grid-25:nth-of-type(4n+4),
	.grid-20:nth-of-type(5n+4),
	.grid-16:nth-of-type(6n+4) {
		animation-delay: 300ms;
	}

	.grid-20:nth-of-type(5n+5),
	.grid-16:nth-of-type(6n+5) {
		animation-delay: 400ms;
	}

	.grid-16:nth-of-type(6n+6) {
		animation-delay: 500ms;
	}
}

@media screen and (max-width: 47.9375rem) {
	.mobile-grid-50:nth-of-type(2n+2),
	.mobile-grid-33:nth-of-type(3n+2),
	.mobile-grid-25:nth-of-type(4n+2),
	.mobile-grid-20:nth-of-type(5n+2),
	.mobile-grid-16:nth-of-type(6n+2) {
		animation-delay: 100ms;
	}

	.mobile-grid-33:nth-of-type(3n+3),
	.mobile-grid-25:nth-of-type(4n+3),
	.mobile-grid-20:nth-of-type(5n+3),
	.mobile-grid-16:nth-of-type(6n+3) {
		animation-delay: 200ms;
	}

	.mobile-grid-25:nth-of-type(4n+4),
	.mobile-grid-20:nth-of-type(5n+4),
	.mobile-grid-16:nth-of-type(6n+4) {
		animation-delay: 300ms;
	}

	.mobile-grid-20:nth-of-type(5n+5),
	.mobile-grid-16:nth-of-type(6n+5) {
		animation-delay: 400ms;
	}

	.mobile-grid-16:nth-of-type(6n+6) {
		animation-delay: 500ms;
	}
}

/******/
/*** DYNAMIC STICKY SIDEBAR ***/
/******/

@media screen and (min-width: 48rem) {
	
	:root {
		--space: 2rem;
		--space-xs: calc(var(--space) / 3);
		--space-sm: calc(var(--space) / 2);
		--space-md: calc(var(--space) * 2);
	}

	.sticky-article {
		flex-basis: 0;
		flex-grow: 999;
	}

	.sticky-aside {
		--offset: var(--space);
		flex-grow: 1;
		align-self: start;
		position: sticky;
		top: var(--offset);
	}
	
	.scrolling-text-fading-image .sticky-aside {
		--offset: 0;
	}
	
}

/******/
/*** REDUCED MOTION ***/
/******/

@media (prefers-reduced-motion: reduce), print {
	.js-scroll,
	.scrolled,
	[transition-style],
	.infinite-scroll-container {
		-webkit-animation-duration: 1ms !important;
		animation-duration: 1ms !important;
		transition-duration: 1ms !important;
		-webkit-animation-iteration-count: 1 !important;
		animation-iteration-count: 1 !important;
	}
}