/* =========================================================
	50th HEADERS
========================================================= */

/* MARK: Main page header
----------------------------------------------- */
.fiftieth-page-header {
	--content-border-radius: 1rem;
	--content-mbe: 4rem;
	--content-padding-top: 155px;
	--content-panel-max-width: 380px;
	--content-panel-width: clamp(12.5rem, 70%, 23.75rem);
	--height: 60rem;
	--logo-width: 17.5rem;
	--logo-bg-fill-width: 100%;
	--logo-bg-fill-height: 3.125rem;
	--nav-height: 3.75rem;
	--position-top: 0;
	--prose-container-padding: var(--space-lg);
	--prose-font-size: var(--fs-0);
	--prose-heading-size: var(--fs-7);

	position: relative;
	background-color: var(--gray);
	padding-block: 0;
	min-height: var(--height);
	overflow: hidden;

	@media (width >= 800px) {
		--content-panel-width: calc(100% - 3rem);
		--content-panel-max-width: 54.75rem;
		--logo-bg-fill-width: 1rem;
		--logo-bg-fill-height: 1rem;
	}

	@media (width >= 960px) {
		--logo-width: 23.875rem;
		--nav-height: 10.3125rem;
		--prose-font-size: var(--fs-2);
		--prose-heading-size: 3.5625rem;
		--content-mbe: 10rem;
		--prose-container-padding: 3rem; /* FIX THIS */

		margin-block-start: calc(var(--nav-height) * -1);
	}

	.bg-image {
		position: absolute;
		top: var(--position-top);
		width: 100%;
		height: 100%;

		img {
			width: 100%;
			height: 100%;
			-o-object-fit: cover;
			   object-fit: cover;
		}
	}

	.content-panel {
		position: relative;
		z-index: var(--z-above);
		margin-inline: auto;
		padding-block-start: var(--content-padding-top);
		width: var(--content-panel-width);
		max-width: var(--content-panel-max-width);
		height: 100%;

		@media (width >= 960px) {
			padding-block-start: calc(var(--content-padding-top) + var(--nav-height));
		}
	}

	.content {
		display: grid;
		margin-block-end: var(--content-mbe);

		@media (width >= 800px) {
			grid-template-columns: var(--logo-width) auto;
		}

		.logo {
			position: relative;

			&::before {
				position: absolute;
				bottom: 0;
				background-color: rgba(94, 94, 95, 0.9);
				width: var(--logo-bg-fill-width);
				height: var(--logo-bg-fill-height);
				content: "";

				@media (width >= 800px) {
					top: 0;
					right: 0;
					bottom: auto;
				}
			}
		}

		.prose-container {
			border-radius: 0 0 var(--content-border-radius) var(--content-border-radius);
			background: rgba(94, 94, 95, 0.9);
			padding: var(--prose-container-padding);

			@media (width >= 800px) {
				display: grid;
				align-items: center;
				border-radius: 0 var(--content-border-radius) var(--content-border-radius) 0;
			}
		}

		.prose {
			color: white;
			font-size: var(--prose-font-size);

			h1 {
				color: inherit;
				font-weight: 400;
				font-size: var(--prose-heading-size);
				line-height: 1.1;
				font-family: var(--font-serif);
			}
		}
	}
}


/* MARK: Short page header
----------------------------------------------- */
.fiftieth-page-header[data-height="short"] {
	--height: 576px;
	--content-panel-width: 100%;
	--content-panel-max-width: 270px;
	--content-padding-top: 205px;

	.content-panel {
		height: auto;
	}

	.logo.logo-vertical {
		margin-block-end: 50px;
	}

	.logo.logo-horizontal { display: none; }
}

@media (width >= 768px) {
	.fiftieth-page-header[data-height="short"] {
		--content-panel-max-width: 600px;
		position: relative;
		z-index: calc( var(--z-above) + 1 );

		.logo.logo-vertical { display: none; }

		.logo.logo-horizontal {
			display: block;
			margin-block-end: 124px;
			box-shadow: 0px 14px 14px 0px rgba(0, 0, 0, 0.45);
		}
	}
}

/* =========================================================
	50th SUBNAV
========================================================= */

.fiftieth-subnav {
   background-color: var(--gold);
   padding-inline: 1rem;
   width: 100vw;
   color: white;
   font-weight: 400;
   font-size: 1.5rem;
   text-align: center;

	@media (width >= 768px) {
		position: relative;
      z-index: calc(var(--z-above) + 1);
	}
}

.fiftieth-subnav nav {
	display: grid;
	row-gap: 0.875rem;
	margin-inline: auto;
	padding-block: 1.5625rem;
	max-width: 768px;

	@media (width >= 640px) {
		grid-template-columns: repeat(3, 1fr);
		margin-inline-start: auto;
		padding-block: 0;
		max-width: 768px;
	}
}

.fiftieth-subnav a {
	transition: all 0.3s ease-in-out;
	border-bottom: 1px solid transparent;
	color: inherit;
	line-height: 1;

	&:hover {
		border-color: white;
	}
}

.fiftieth-subnav div {
	@media (width >= 640px) {
		position: relative;
		padding-block: 0.9375rem 1.1875rem;
	}

	&.active > a {
		border-color: white;
	}

	&.active > a:not(:hover) {
		@media (width >= 640px) {
			border-color: transparent;
		}
	}

	> svg {
		display: none;
	}

	&.active > svg {
      @media (width >= 640px) {
			display: block;
			position: absolute;
			bottom: -1px;
			left: 50%;
			transform: translateX(-50%);
			fill: var(--gold-lightest);
			width: 3.625rem;
			height: auto;
		}
   }

	> span.disabled {
		color: rgba(255, 255, 255, 0.3);
		line-height: 1;
	}

	> span.disabled span {
		display: block;
		font-size: 0.9375rem;

		@media (width >= 640px) {
			margin-block-end: -0.75rem;
			padding-inline-end: 0.875rem;
			text-align: right;
		}
	}
}

/* =========================================================
	JUMPBAR
========================================================= */

/* MARK: Jumpbar container
----------------------------------------------- */
.fiftieth-jumpbar {
	--box-shadow: 0px 4px 40px 0px rgba(0, 0, 0, 0.25);
	--jumpbar-max-width: 231px;
	--jumpbar-width: 100vw;
	position: fixed;
	right: 0;
	bottom: 0;
	z-index: calc(var(--z-navigation) - 1);
	transition: opacity 0.3s ease-in-out;
	margin-inline-start: auto;
	width: var(--jumpbar-width);
	max-width: var(--jumpbar-max-width);

	@media (width >= 768px) {
		--jumpbar-top-position: -109px;
	}
}

/* MARK: Inner div
----------------------------------------------- */
.fiftieth-jumpbar > div {
	position: relative;
	text-align: right;
}

/* MARK: Button
----------------------------------------------- */
.fiftieth-jumpbar > div button {
	box-shadow: var(--box-shadow);
	background-color: var(--gray);
	padding: 12px 10px;
	color: white;
	font-weight: 400;
	font-size: 0.9375rem;
	line-height: 1;
	text-transform: uppercase;

	@media (width >= 768px) {
		display: block;
		width: 100%;
	}

	span.pd {
		display: none;
		@media (width >= 768px) { display: inline; }
	}

	span.menu-icon {
		--icon-width: 16px;
		display: inline-block;
		margin-inline-start: 12px;
		width: var(--icon-width);
	}

	span.menu-icon .bar {
		border-radius: 50px;
		background-color: white;
		width: var(--icon-width);
		height: 2px;
	}

	span.menu-icon .bar:nth-child(1) {}

	span.menu-icon .bar:nth-child(2) {
		margin-block: 3px;
	}

	span.menu-icon .bar:nth-child(1) {}
}

/* MARK: Links
----------------------------------------------- */
.fiftieth-jumpbar > div .links {
	position: absolute;
	right: 0;
	bottom: 100%;
	transform-origin: bottom center;
	box-shadow: var(--box-shadow);
	background-color: white;
	width: 100%;

	a {
		--link-bg-color: transparent;
		--color: var(--twilight);
		display: block;
		transition: all 0.3s ease-in-out;
		background-color: var(--link-bg-color);
		padding-inline: 0.25rem;
		padding-block: 0.84375rem;
		color: var(--color);
		font-weight: 400;
		font-size: 0.9375rem;
		text-align: center;
		text-transform: uppercase;

		&.active { color: white; }
	}

	a span {
		border: 0;
		clip: rect(0, 0, 0, 0);
		position: absolute;
		margin: -1px;
		padding: 0;
		width: 1px;
		height: 1px;
		overflow: hidden;
		white-space: nowrap;
	}
}

/* MARK: Timeline specifics
----------------------------------------------- */
.t-fiftiethAnniversaryTimeline:has(.fiftieth-jumpbar) {
	position: relative;

	.scroll-top {
		display: none;
		opacity: 0;
	}
}

.fiftieth-jumpbar[data-jumpbar="timeline"] > div .links {
	a[href="#epoch-1"] {
		--color: var(--gold);
		--link-bg-color: rgba(172, 146, 87, 0.2);

		&.active {
			--link-bg-color: var(--gold);
		}
	}

	a[href="#epoch-2"] {
		--link-bg-color: rgba(2, 94, 110, 0.2);

		&.active {
			--link-bg-color: var(--twilight);
		}
	}

	a[href="#epoch-3"] {
		--link-bg-color: rgba(224, 104, 74, 0.2);
		--color: var(--salmon);

		&.active { --link-bg-color: var(--salmon); }
	}

	a[href="#epoch-4"] {
		--link-bg-color: rgba(80, 201, 181, 0.2);
		--color: var(--lake);

		&.active { --link-bg-color: var(--lake); }
	}
}

/* MARK: Impact specific
----------------------------------------------- */
.t-fiftiethAnniversaryImpact:has(.fiftieth-jumpbar) {
	position: relative;

	.scroll-top {
		display: none;
		opacity: 0;
	}
}

.fiftieth-jumpbar[data-jumpbar="impact"] {
	z-index: var(--z-modal);
	width: 100%;
	max-width: 360px;

	@media (width >= 768px) { display: none; }
}

.fiftieth-jumpbar[data-jumpbar="impact"] > div .links {
	padding: 1.25rem 1.5rem 0;

	a {
		padding: 0;
		color: var(--gray);
		font-size: 1.125rem;
		letter-spacing: -1%;
		text-align: left;
		text-transform: none;
	}

	section {
		margin: 0;
		padding: 0;

		+ section { margin-block-start: 1.25rem; }
	}

	h2 {
		color: rgba(94, 94, 95, 0.3);
		font-weight: 600;
		font-size: 1.125rem;
		letter-spacing: 25%;
		text-align: left;
		text-transform: uppercase;
	}

	h2 + ul,
	ul li + li { margin-block-start: 0.625rem; }
}

/* MARK: Timeline & impact intros
----------------------------------------------- */
.timeline-intro,
.impact-intro {
   position: relative;
   z-index: calc(var(--z-above) + 1);
   padding-bottom: 0;
   text-align: center;

   h1 {
		--h1-font-size: 2.375rem;
      color: var(--gold);
      font-weight: 400;
      font-size: var(--h1-font-size);
      line-height: 1.35;
      font-family: var(--font-serif);
      letter-spacing: -2.2%;

      @media (width >= 768px) {
         --h1-font-size: 3rem;
      }
   }

   p {
      font-size: 1.875rem;
      letter-spacing: -2%;
   }
}

.impact-intro.container {
	padding-block: var(--intro-padding-block, 5.1875rem 6.4375rem);

	@media (width >= 768px) {
		--intro-padding-block: 7.0625rem 5.375rem
	}

	@media (width >= 1024px) {
		--intro-padding-block: 7.0625rem 7.625rem;
	}
}

/* MARK: Timeline path ticks
----------------------------------------------- */
.timeline-path-start {
   --path-bg-image: url('/assets/images/timeline-path-start-sm.svg');
   --path-height: 180px;
   --top-path-spacing: 50px;
   position: relative;
   opacity: 0.4;
   margin-block-start: var(--top-path-spacing);
   background-image: var(--path-bg-image);
   background-position: center top;
   background-repeat: no-repeat;
   min-height: var(--path-height);

   @media (width >= 768px) {
      --path-bg-image: url('/assets/images/timeline-path-start-md.svg');
   }

   @media (width >= 1080px) {
      --path-bg-image: url('/assets/images/timeline-path-start-lg.svg');
   }
}

/* =========================================================
	INTERACTIVE WRAPPER
	01. Interactive wrapper
	02. Images (for >= 768px)
========================================================= */

/* MARK: Interactive wrapper
----------------------------------------------- */
.interactive-wrapper {
	position: relative;
	background-color: white;
	width: 100vw;
}

/* MARK: Images (for >= 768px)
----------------------------------------------- */
.interactive-wrapper .image-sticky {
	@media (width < 768px) { display: none; }

	--image-container-height: 100vh;
	--image-gradient-height: 241px;
	--image-gradient: linear-gradient(180deg, rgba(0, 204, 181, 0) 0%, #00CCB5 80.28%);
	--image-heading-font-size: 1.75rem;
	--image-heading-padding: 0 4rem 1.75rem;
	--image-z-index: var(--z-above);
	position: fixed;
	top: 0;
	z-index: var(--image-z-index);
	width: 50%;
	max-width: 900px;
	height: var(--image-container-height);
	/* opacity: 0; */
	/* visibility: hidden; */

	@media (width >= 1080px) {
		--image-gradient-height: 350px;
		--image-heading-font-size: 4rem;
		--image-heading-padding: 0 4.75rem 5.75rem;
	}

	&#epoch-1-image {
		--image-gradient: linear-gradient(180deg, rgba(177, 145, 77, 0) 0%, #B1914D 80.28%);
	}

	&#epoch-2-image {
		--image-gradient: linear-gradient(180deg, rgba(0, 96, 112, 0) 0%, #006070 80.28%);
	}

	&#epoch-3-image {
		--image-gradient: linear-gradient(180deg, rgba(241, 94, 63, 0) 0%, #F15E3F 80.28%);
	}

	img {
		width: 100%;
		max-width: 100%;
		height: 100%;
		-o-object-fit: cover;
		   object-fit: cover;
	}

	.gradient {
		position: absolute;
		right: 0;
		bottom: 0;
		left: 0;
		opacity: 0.9;
		z-index: var(--z-above);
		background: var(--image-gradient);
		width: 100%;
		height: var(--image-gradient-height);
	}

	h2 {
		position: absolute;
		bottom: 0;
		z-index: calc(var(--z-above) + 2);
		padding: var(--image-heading-padding);
		color: white;
		font-weight: 400;
		font-size: var(--image-heading-font-size);
		line-height: 1.35;
		font-family: var(--font-serif);
		letter-spacing: -2.2%;
		text-align: right;
	}

	&.left {
		right: 50vw;
		img { margin-inline-start: auto; }
		h2 { right: 0; }
	}

	&.right {
		left: 50vw;
		h2 {
			left: 0;
			text-align: left;
		}
	}
}

/* =========================================================
	50th ANNIVERSARY TIMELINE - EPOCHS
========================================================= */

/* MARK: Epoch
----------------------------------------------- */
.epoch {
   --epoch-bg-ticks: url("/assets/images/timeline-path-lake-sm.svg");
   --epoch-padding-block: 0;
   --epoch-z-index: var(--z-above);
   position: relative;
   z-index: var(--epoch-z-index);
   transition: background-color 2.5s ease;
   margin: 0 auto;
   padding-block: var(--epoch-padding-block);
   max-width: 1920px;
   max-width: 1800px;
   min-height: unset;

   @media (width >= 768px) {
      --epoch-bg-ticks: url("/assets/images/timeline-path-lake-md.svg");
      display: grid;
      grid-template-columns: 1fr 1fr;
      justify-content: center;
      align-items: start;
   }

   @media (width >= 1080px) {
      --epoch-bg-ticks: url("/assets/images/timeline-path-lake-lg.svg");
   }
}

/* Holds timeline path ticks */
.epoch::before {
   position: absolute;
   top: 0;
   left: 50%;
   transform: translateX(-50%);
   opacity: 0.4;
   background-image: var(--epoch-bg-ticks);
   background-position: center top;
   background-repeat: repeat-y;
   width: 50px;
   height: 100%;
   content: "";

   @media (width >= 768px) {
      display: grid;
      grid-template-columns: 1fr 1fr;
      z-index: var(--z-above);
   }
}

/* MARK: Epoch bg image (768px+)
----------------------------------------------- */
.epoch .image {
   @media (width >= 768px) {
      display: none;
   }
}

.epoch .image .image-inner {
   --epoch-header-gradient-height: 151px;
   --epoch-header-gradient: linear-gradient(
      180deg,
      rgba(177, 145, 77, 0) 0%,
      #b1914d 80.28%
   );
   --image-container-height: 362px;
   position: relative;

   img {
      aspect-ratio: 1;
      width: 100%;
      max-width: 100%;
      height: 100%;
      -o-object-fit: cover;
         object-fit: cover;
   }

   .gradient {
      display: grid;
      position: absolute;
      bottom: 0;
      justify-content: center;
      align-items: end;
      opacity: 0.9;
      inset-inline: 0;
      background: var(--epoch-header-gradient);
      width: 100%;
      height: var(--epoch-header-gradient-height);
   }

   h2 {
      --heading-padding-inline: 2.75rem;
      --heading-size: 1.78375rem;
      padding-inline: var(--heading-padding-inline);
      padding-block-end: 1.5625rem;
      width: 100%;
      color: white;
      font-weight: 400;
      font-size: var(--heading-size);
      line-height: 1.35;
      font-family: var(--font-serif);
      letter-spacing: -2.2%;
      text-align: center;
      /* z-index: calc(var(--z-above) + 1); */
   }
}

/* MARK: Milestones
----------------------------------------------- */
.epoch ol.milestones {
   --border-radius: 5px;
   --milestone-bg-color: var(--lake);
   --milestone-border-color: var(--lake);
   --milestone-text-color: white;
   --milestones-padding-block: 3rem 4.3125rem;
   display: grid;
   row-gap: 2.5rem;
   margin: 0 auto;
   padding-inline: 0;
   padding-block: var(--milestones-padding-block);
   max-width: calc(100% - 2.5rem);
   list-style: none;

   @media (width < 768px) {
      position: relative;
      z-index: var(--z-above);
   }

   @media (width >= 768px) {
      --milestones-padding-block: 3.5rem 5.5rem;
      margin-inline: 3.125rem 0;
      padding-inline-end: 2rem;
      max-width: 518px;
   }

   @media (width >= 1080px) {
      --milestones-padding-block: 5.625rem 6rem;
      margin-inline: 6.5rem 0;
   }
}

/* MARK: Simple milestones
----------------------------------------------- */
.epoch ol.milestones li.simpleMilestone {
   --milestone-grid-template-cols: 55px 1fr;
   --milestone-prose-font-size: 1.0625rem;
   --milestone-time-font-size: 2.25rem;
   display: grid;
   grid-template-columns: var(--milestone-grid-template-cols);
   -moz-column-gap: 1.25rem;
        column-gap: 1.25rem;
   border-radius: var(--radius-sm);
   background-color: var(--milestone-bg-color);
   padding-inline: 0.625rem;
   color: var(--milestone-text-color);

   @media (width >= 768px) {
      --milestone-time-font-size: 2.875rem;
   }

   > time {
      font-weight: 300;
      font-size: var(--milestone-time-font-size);
      line-height: 1.4;
   }

   > .prose {
      padding-block: 1.25rem;
      font-size: var(--milestone-prose-font-size);
      line-height: 1.2;
      letter-spacing: -2%;
   }

   @media (width >= 1080px) {
      --milestone-grid-template-cols: 85px 1fr;
      --milestone-prose-font-size: 1.875rem;
      --milestone-time-font-size: 2.8125rem;
   }
}

/* MARK: Milestones with image
----------------------------------------------- */
.epoch ol.milestones li.milestoneWithImage {
   --milestone-grid-gap: 20px;
   --milestone-grid-template-cols: 85px 1fr;
   --milestone-prose-font-size: var(--fs--2);
   --milestone-time-font-size: 2.875rem;
   border-top: 6px solid var(--milestone-border-color);
   border-radius: var(--radius-sm);
   background-color: var(--milestone-bg-color);
   overflow: hidden;
   color: var(--milestone-text-color);

   > div {
      display: grid;
      grid-template-columns: var(--milestone-grid-template-cols);
      -moz-column-gap: var(--milestone-grid-gap);
           column-gap: var(--milestone-grid-gap);
      margin-inline: 24px;
      padding-block: 0.75rem 1rem;
   }

   > div time {
      display: block;
      margin: 0;
      padding: 0;
      color: var(--milestone-year-color);
      font-weight: 300;
      font-size: var(--milestone-time-font-size);
      line-height: 0.8;
      text-align: center;
   }

   > div .prose {
      font-size: var(--milestone-prose-font-size);
      line-height: 1.25;
      letter-spacing: -2%;

      p {
         padding-block: 0.9rem;
      }
   }

   > img {
      border-radius: var(--radius-sm);
   }

   @media (width >= 1080px) {
      --milestone-grid-gap: 40px;
      --milestone-grid-template-cols: 135px 1fr;
      --milestone-prose-font-size: 1.75rem;
      --milestone-time-font-size: 5rem;
   }
}

/* Reversed */
.epoch[data-flow="reverse"] {
   @media (width >= 768px) {
      .image {
         order: 2;
      }
      .milestones {
         order: 1;
         margin-inline: auto 3rem;
      }
   }

   @media (width >= 1080px) {
      .milestones {
         margin-inline: auto 5rem;
      }
   }
}

/* Custom coloring */
.epoch[data-epoch="jack-early"] {
   --epoch-bg-color: rgba(172, 146, 87, 0.25);
   --epoch-bg-ticks: url("/assets/images/timeline-path-gold-sm.svg");
   /* border: 2px solid var(--gold); for debugging only */

   @media (width >= 768px) {
      --epoch-bg-ticks: url("/assets/images/timeline-path-gold-md.svg");
      &::before {
         transform: translateX(
            calc(-50% - 1px)
         ); /* image isn't quite centered for some reason. */
      }
   }

   @media (width >= 1080px) {
      --epoch-bg-ticks: url("/assets/images/timeline-path-gold-lg.svg");
   }

   .image .image-inner {
      --epoch-header-gradient: linear-gradient(
         180deg,
         rgba(177, 145, 77, 0) 0%,
         #b1914d 80.28%
      );
   }

   ol.milestones {
      @media (width >= 768px) {
         grid-column-start: 2;
      }
   }

   ol.milestones li.simpleMilestone {
      --milestone-bg-color: var(--gold);
      --milestone-text-color: white;
   }

   ol.milestones li.milestoneWithImage {
      --milestone-bg-color: rgba(255, 255, 255, 0.8);
      --milestone-border-color: var(--gold);
      --milestone-text-color: var(--gray);
      --milestone-year-color: var(--gold);
   }
}

.epoch[data-epoch="tektronix-seeds"] {
   --epoch-bg-color: rgba(2, 94, 110, 0.3);
   --epoch-bg-ticks: url("/assets/images/timeline-path-lake-sm.svg");
   --epoch-z-index: calc(var(--z-above) + 1);
   /* border: 2px solid var(--river); for debugging only */

   @media (width >= 768px) {
      --epoch-bg-ticks: url("/assets/images/timeline-path-lake-md.svg");
   }

   @media (width >= 1080px) {
      --epoch-bg-ticks: url("/assets/images/timeline-path-lake-lg.svg");
   }

   .image .image-inner {
      --epoch-header-gradient: linear-gradient(
         180deg,
         rgba(0, 96, 112, 0) 0%,
         #006070 80.28%
      );
   }

   ol.milestones li.simpleMilestone {
      --milestone-bg-color: var(--twilight);
      --milestone-text-color: white;
   }

   ol.milestones li.milestoneWithImage {
      --milestone-bg-color: rgba(255, 255, 255, 0.8);
      --milestone-border-color: var(--twilight);
      --milestone-text-color: var(--gray);
      --milestone-year-color: var(--twilight);
   }
}

.epoch[data-epoch="tektronix-beyond"] {
   --epoch-bg-color: rgba(224, 104, 74, 0.25);
   --epoch-bg-ticks: url("/assets/images/timeline-path-salmon-sm.svg");
   --epoch-z-index: calc(var(--z-above) + 2);
   /* border: 2px solid var(--salmon); for debugging only */

   @media (width >= 768px) {
      --epoch-bg-ticks: url("/assets/images/timeline-path-salmon-md.svg");
   }

   @media (width >= 1080px) {
      --epoch-bg-ticks: url("/assets/images/timeline-path-salmon-lg.svg");
   }

   .image .image-inner {
      --epoch-header-gradient: linear-gradient(
         180deg,
         rgba(241, 94, 63, 0) 0%,
         #f15e3f 80.28%
      );
   }

   ol.milestones {
      @media (width >= 768px) {
         grid-column-start: 2;
      }
   }

   ol.milestones li.simpleMilestone {
      --milestone-bg-color: var(--salmon);
      --milestone-text-color: white;
   }

   ol.milestones li.milestoneWithImage {
      --milestone-bg-color: rgba(255, 255, 255, 0.8);
      --milestone-border-color: var(--salmon);
      --milestone-text-color: var(--gray);
      --milestone-year-color: var(--salmon);
   }
}

.epoch[data-epoch="trust-born"] {
   --epoch-bg-color: rgba(80, 201, 181, 0.6);
   --epoch-bg-ticks: url("/assets/images/timeline-path-lake-sm.svg");
   --epoch-z-index: calc(var(--z-above) + 3);
   /* border: 2px solid var(--lake); for debugging only */

   @media (width >= 768px) {
      --epoch-bg-ticks: url("/assets/images/timeline-path-lake-md.svg");
      &::before {
         transform: translateX(
            calc(-50% + 1px)
         ); /* image isn't quite centered for some reason. */
      }
   }

   @media (width >= 1080px) {
      --epoch-bg-ticks: url("/assets/images/timeline-path-lake-lg.svg");
   }

   .image .image-inner {
      --epoch-header-gradient: linear-gradient(
         180deg,
         rgba(0, 204, 181, 0) 0%,
         #00ccb5 80.28%
      );
   }

   ol.milestones {
      @media (width >= 768px) {
         grid-column-start: 2;
      }
   }

   ol.milestones li.simpleMilestone {
      --milestone-bg-color: var(--lake);
      --milestone-text-color: white;
   }

   ol.milestones li.milestoneWithImage {
      --milestone-bg-color: rgba(255, 255, 255, 0.8);
      --milestone-border-color: var(--lake);
      --milestone-text-color: var(--gray);
      --milestone-year-color: var(--lake);
   }
}

.epoch[data-epoch="growing-legacy"] {
   --epoch-bg-color: rgba(80, 201, 181, 0.6);
   --epoch-bg-ticks: url("/assets/images/timeline-path-lake-sm.svg");
   --epoch-z-index: calc(var(--z-above) + 4);
   /* border: 2px solid var(--river); for debugging only */

   @media (width >= 768px) {
      --epoch-bg-ticks: url("/assets/images/timeline-path-lake-md.svg");
      &::before {
         top: 8px;
         transform: translateX(
            calc(-50% + 1px)
         ); /* image isn't quite centered for some reason. */
      }
   }

   @media (width >= 1080px) {
      --epoch-bg-ticks: url("/assets/images/timeline-path-lake-lg.svg");
   }

   .image .image-inner {
      --epoch-header-gradient: linear-gradient(
         180deg,
         rgba(0, 204, 181, 0) 0%,
         #00ccb5 80.28%
      );
   }

   ol.milestones li.simpleMilestone {
      --milestone-bg-color: var(--lake);
      --milestone-text-color: white;
   }

   ol.milestones li.milestoneWithImage {
      --milestone-bg-color: rgba(255, 255, 255, 0.8);
      --milestone-border-color: var(--lake);
      --milestone-text-color: var(--gray);
      --milestone-year-color: var(--lake);
   }
}

.epoch[data-epoch="1995-2004"] {
   /* --epoch-bg-color: rgba(172, 146, 87, 0.25); */
   /* --epoch-bg-ticks: url("/assets/images/timeline-path-gold-sm.svg"); */
   /* --epoch-z-index: calc(var(--z-above) + 3); */
   /* border: 2px solid var(--lake); for debugging only */

   /* @media (width >= 768px) { */
   /* 	--epoch-bg-ticks: url("/assets/images/timeline-path-lake-md.svg"); */
   /* 	&::before { */
   /* 		transform: translateX( calc(-50% + 1px) ); image isn't quite centered for some reason. */
   /* 	} */
   /* } */

   /* @media (width >= 1080px) { */
   /* 	--epoch-bg-ticks: url("/assets/images/timeline-path-lake-lg.svg"); */
   /* } */

   /* .image .image-inner { */
   /* 	--epoch-header-gradient: linear-gradient(180deg, rgba(0, 204, 181, 0) 0%, #00CCB5 80.28%); */
   /* } */

   ol.milestones {
      @media (width >= 768px) {
         grid-column-start: 2;
      }
   }

   /* ol.milestones li.simpleMilestone { */
   /* 	--milestone-bg-color: var(--lake); */
   /* 	--milestone-text-color: white; */
   /* } */

   /* ol.milestones li.milestoneWithImage { */
   /* 	--milestone-bg-color: rgba(255, 255, 255, 0.8); */
   /* 	--milestone-border-color: var(--lake); */
   /* 	--milestone-text-color: var(--gray); */
   /* 	--milestone-year-color: var(--lake); */
   /* } */
}

.epoch[data-epoch="2005-2014"] {
   /* --epoch-bg-color: rgba(80, 201, 181, 0.6); */
   /* --epoch-bg-ticks: url("/assets/images/timeline-path-lake-sm.svg"); */
   /* --epoch-z-index: calc(var(--z-above) + 4); */
   /* border: 2px solid var(--river); for debugging only */

   /* @media (width >= 768px) { */
   /* 	--epoch-bg-ticks: url("/assets/images/timeline-path-lake-md.svg"); */
   /* 	&::before { */
   /* 		top: 8px; */
   /* 		transform: translateX( calc(-50% + 1px) ); image isn't quite centered for some reason. */
   /* 	} */
   /* } */

   /* @media (width >= 1080px) { */
   /* 	--epoch-bg-ticks: url("/assets/images/timeline-path-lake-lg.svg"); */
   /* } */

   /* .image .image-inner { */
   /* 	--epoch-header-gradient: linear-gradient(180deg, rgba(0, 204, 181, 0) 0%, #00CCB5 80.28%); */
   /* } */

   /* ol.milestones li.simpleMilestone { */
   /* 	--milestone-bg-color: var(--twilight); */
   /* 	--milestone-text-color: white; */
   /* } */

   /* ol.milestones li.milestoneWithImage { */
   /* 	--milestone-bg-color: rgba(255, 255, 255, 0.8); */
   /* 	--milestone-border-color: var(--twilight); */
   /* 	--milestone-text-color: var(--gray); */
   /* 	--milestone-year-color: var(--twilight); */
   /* } */
}

.epoch[data-epoch="2015-2025"] {
   /* --epoch-bg-color: rgba(80, 201, 181, 0.6); */
   /* --epoch-bg-ticks: url("/assets/images/timeline-path-lake-sm.svg"); */
   /* --epoch-z-index: calc(var(--z-above) + 3); */
   /* border: 2px solid var(--lake); for debugging only */

   /* @media (width >= 768px) { */
   /* 	--epoch-bg-ticks: url("/assets/images/timeline-path-lake-md.svg"); */
   /* 	&::before { */
   /* 		transform: translateX( calc(-50% + 1px) ); image isn't quite centered for some reason. */
   /* 	} */
   /* } */

   /* @media (width >= 1080px) { */
   /* 	--epoch-bg-ticks: url("/assets/images/timeline-path-lake-lg.svg"); */
   /* } */

   /* .image .image-inner { */
   /* 	--epoch-header-gradient: linear-gradient(180deg, rgba(0, 204, 181, 0) 0%, #00CCB5 80.28%); */
   /* } */

   ol.milestones {
      @media (width >= 768px) {
         grid-column-start: 2;
      }
   }

   /* ol.milestones li.simpleMilestone { */
   /* 	--milestone-bg-color: var(--lake); */
   /* 	--milestone-text-color: white; */
   /* } */

   /* ol.milestones li.milestoneWithImage { */
   /* 	--milestone-bg-color: rgba(255, 255, 255, 0.8); */
   /* 	--milestone-border-color: var(--lake); */
   /* 	--milestone-text-color: var(--gray); */
   /* 	--milestone-year-color: var(--lake); */
   /* } */
}

.epoch-transition {
	--li-bg-color: rgba(0, 0, 0, 0.4); /* changed to black to match design better */
	--li-blend-mode: multiply;
	--li-border: 3px solid white;
	--li-border-radius: 3px;
	--li-p-size: 0.789375rem;
	--li-padding: 0 0.75rem 1.75rem 1.5rem;
	--li-text-color: white;
	--li-year-size: 2.25rem;
	--timeline-items-width: 210px;
	--timeline-row-gap: 158px;
	--transition-line-image: url("/assets/images/timeline-transition-line-sm.svg");
	--transition-line-transform: translateX( calc(-50% - 3px) ); /* image is off-center for some reason */
	--transition-min-height: 695px;
	--transition-padding-block: 134px 98px;
	/* --li-bg-color: rgba(94, 94, 95, 0.5); */
	background-color: white;
	background-image: url("/assets/images/timeline-Death-Birth-Transition.webp");
	background-position: center top;
	background-repeat: no-repeat;
	background-size: cover;
	margin: 0;
	min-height: var(--transition-min-height);
	padding-block: var(--transition-padding-block);
	position: relative;

	@media (width < 768px) {
		overflow-x: hidden;
	}

	@media (width >= 768px) {
		--li-border: 5px solid white;
		--li-border-radius: 4.3px;
		--li-p-size: 0.9375rem;
		--li-padding: 2rem 2.375rem 3.375rem 3.875rem;
		--li-year-size: 2.6875rem;
		--timeline-items-width: 300px;
		--timeline-row-gap: 309px;
		--transition-line-image: url("/assets/images/timeline-transition-line-md.svg");
		--transition-line-transform: translateX( calc(-50% - 5px) );
		--transition-min-height: 1023px;
		--transition-padding-block: 151px 139px;
		z-index: calc( var(--z-above) + 10);
	}

	@media (width >= 1080px) {
		--li-border: 10px solid white;
		--li-border-radius: 8px;
		--li-p-size: 1.75rem;
		--li-padding: 3.6875rem 5.125rem 6.3125rem 6.625rem;
		--li-year-size: 5rem;
		--timeline-items-width: 561px;
		--timeline-row-gap: 803px;
		--transition-line-image: url("/assets/images/timeline-transition-line-lg.svg");
		--transition-line-transform: translateX( calc(-50% + 3px) );
		--transition-min-height: 2302px;
		--transition-padding-block: 380px 355px;
	}

	&::before {
		content: "";
		height: var(--transition-min-height);
		left: 50%;
		position: absolute;
		top: 0;
		transform: var(--transition-line-transform);
		width: 90vw;
		background-image: var(--transition-line-image);
		background-repeat: no-repeat;
		background-position: center top;
	}
}

.epoch-transition ol.timeline-items {
	display: grid;
	list-style: none;
	margin: 0 auto;
	padding: 0;
	position: relative;
	row-gap: var(--timeline-row-gap);
	width: var(--timeline-items-width);
	z-index: var(--z-above);

	/* Shared <li> styles (which also applies to the first <li>) */
	li {
		background-color: var(--li-bg-color);
		border-radius: var(--li-border-radius);
		border-right: var(--li-border);
		min-height: 140px;
		mix-blend-mode: var(--li-blend-mode);
		padding: var(--li-padding);

		.prose {
			--prose-flow-space: 0.75rem;
			color: var(--li-text-color);
		}

		.prose time {
			font-weight: 300;
			font-size: var(--li-year-size);
			line-height: 1.4;
		}

		.prose p {
			font-size: var(--li-p-size);
			letter-spacing: -2%;
			line-height: 1.2;
		}
	}

	/* Second <li>/milestone */
	li:nth-child(2) {
		--li-bg-color: rgba(255, 255, 255, 0.6);
		--li-text-color: var(--gray);
		--li-blend-mode: lighten;
		border-right: 0;
		border-left: var(--li-border);
	}
}

/* =========================================================
	NEWSLETTER CTAs
========================================================= */

/* MARK: Timeline CTA (beyond-2025)
----------------------------------------------- */
.beyond-2025 {
	--timeline-path-end-img: url("/assets/images/timeline-path-end-sm.svg");
	--timeline-path-height: 130px;
	--padding-block: 0 7.75rem;
	background: linear-gradient(156.1deg, #00CCB5 33.88%, #E6E6E6 61.92%);
	padding-inline: 0;
	padding-block: var(--padding-block);

	@media (width >= 768px) {
		--timeline-path-end-img: url("/assets/images/timeline-path-end-md.svg");
		--timeline-path-height: 140px;
		--padding-block: 0 8.5rem;
		position: relative;
		z-index: calc( var(--z-above) + 10);
	}

	@media (width >= 768px) {
		--timeline-path-end-img: url("/assets/images/timeline-path-end-lg.svg");
		--padding-block: 0 10rem;
	}

	&::before {
		display: block;
		position: relative;
		top: 0;
		left: 50%;
		transform: translateX( calc(-50% + 1px) ); /* image is off-center for some reason */
		background-image: var(--timeline-path-end-img);
		background-position: center top;
		background-repeat: no-repeat;
		width: 50px;
		height: var(--timeline-path-height);
		content: "";
	}

	/* article { */
	/* 	--margin-block-start: 1.625rem; */
	/* 	--margin-inline: 0.625rem; */
	/* 	--padding: 3.4375rem 1.6875rem 4.875rem; */
	/* 	--heading-font-size: 3.5625rem; */
	/* 	--heading-letter-spacing: -2.54px; */
	/* 	--heading-line-height: 1.08rem; */
	/* 	--heading-text-align: center; */
	/* 	--text-color: var(--river); */
	/* 	--text-align: center; */
	/* 	--text-font-size: 1.375rem; */
	/* 	--text-line-height: 1.35; */
	/* 	display: grid; */
	/* 	row-gap: 3.0625rem; */
	/* 	margin-inline: var(--margin-inline); */
	/* 	margin-block-start: var(--margin-block-start); */
	/* 	border-radius: 8px; */
	/* 	background-color: white; */
	/* 	padding: var(--padding); */
	/* 	max-width: 1000px; */

	/* 	@media (width >= 768px) { */
	/* 		--margin-block-start: 3.3125rem; */
	/* 		--margin-inline: 1.25rem; */
	/* 		--padding: 3.3125rem 2rem calc(3.875rem - 13px); */
	/* 		--heading-font-size: 4.375rem; */
	/* 		--heading-letter-spacing: -3.12px; */
	/* 		--heading-line-height: 1.1; */
	/* 		--heading-text-align: left; */
	/* 		max-width: 1000px; */
	/* 	} */

	/* 	@media (width >= 1040px) { */
	/* 		--margin-block-start: 3.5rem; */
	/* 		--margin-inline: auto; */
	/* 		--heading-font-size: 6rem; */
	/* 		--heading-letter-spacing: -4.27px; */
	/* 		--text-font-size: 1.875rem; */
	/* 	} */

	/* 	.prose { */
	/* 		> div { */
	/* 			--prose-flow-space: 1.3125rem; */
	/* 		} */

	/* 		@media (width >= 768px) { */
	/* 			display: grid; */
	/* 			grid-template-columns: 50% auto; */
	/* 			column-gap: 2.5rem; */

	/* 			> div { */
	/* 				--prose-flow-space: 0; */
	/* 				--text-align: left; */
	/* 			} */
	/* 		} */

	/* 		@media (width >= 1040px) { */
	/* 			columng-gap: 3.5rem; */
	/* 		} */
	/* 	} */

	/* 	h2 { */
	/* 		color: var(--neutral-900); */
	/* 		font-weight: 400; */
	/* 		font-size: var(--heading-font-size); */
	/* 		font-family: var(--font-serif); */
	/* 		text-align: var(--heading-text-align); */

	/* 		@media (width >= 768px) { */
	/* 			--heading-text-align: right; */
	/* 		} */
	/* 	} */

	/* 	p { */
	/* 		color: var(--neutral-900); */
	/* 		font-size: var(--text-font-size); */
	/* 		line-height: var(--text-line-height); */
	/* 		text-align: var(--text-align); */
	/* 	} */

	/* 	// Newsletter signup embed overrides */
	/* 	form#ctct_form_0.ctct-form-custom { */
	/* 		box-sizing: border-box; */

	/* 		@media (width >= 768px) { */
	/* 			display: grid; */
	/* 			grid-template-columns: 76% auto; */
	/* 			gap: 0.8125rem; */
	/* 			min-height: 48px; */
	/* 		} */
	/* 	} */

	/* 	.ctct-inline-form { margin-block-start: 1.25rem; } */
	/* 	div.ctct-form-embed div.ctct-form-defaults { padding: 0; } */

	/* 	#gdpr_text, */
	/* 	#email_address_label_0, */
	/* 	p.ctct-form-footer, */
	/* 	#ctct_recaptcha_0 { display: none !important; } */

	/* 	div#email_address_field_0 { */
	/* 		margin-block-end: 0.75rem; */
	/* 		@media (width >= 768px) { margin-block-end: 0; } */
	/* 	} */

	/* 	input#email_address_0.ctct-form-element { */
	/* 		margin-block-end: 0; */
	/* 		box-shadow: none; */
	/* 		border: 0; */
	/* 		background-color: rgba(94, 94, 95, 0.2); */
	/* 		padding: 13px; */
	/* 		min-height: 48px; */
	/* 		font-size: 1.3125rem; */
	/* 		line-height: 1; */
	/* 		font-family: var(--font-callunasans); */
	/* 		letter-spacing: -2%; */
	/* 		text-align: center; */

	/* 		@media (width >= 768px) { */
	/* 			text-align: left; */
	/* 		} */
	/* 	} */

	/* 	button.ctct-form-button { */
	/* 		background-color: var(--twilight); */
	/* 		padding: 0.5rem !important; */
	/* 		height: 48px; */
	/* 		font-weight: 700; */
	/* 		font-size: 1.75rem !important; */
	/* 		line-height: 1 !important; */
	/* 		font-family: var(--font-callunasans); */
	/* 		letter-spacing: -2%; */
	/* 		text-transform: uppercase !important; */

	/* 		@media (width >= 768px) { */
	/* 			// flex: 1; */
	/* 		} */
	/* 	} */
	/* } */
}

/* MARK: Impact CTA
----------------------------------------------- */
.newsletter-cta.impact {
	background: linear-gradient(156.1deg, rgba(94, 94, 95, 0.47) 33.88%, #E6E6E6 61.92%);
	padding-inline: 0;
	padding-block: 12.8125rem 13.375rem;
}

/* MARK: Inner card
----------------------------------------------- */
.newsletter-cta article {
	--margin-block-start: 1.625rem;
	--margin-inline: 0.625rem;
	--padding: 3.4375rem 1.6875rem 4.875rem;
	--heading-font-size: 3.5625rem;
	--heading-letter-spacing: -2.54px;
	--heading-line-height: 1.08rem;
	--heading-text-align: center;
	--text-color: var(--river);
	--text-align: center;
	--text-font-size: 1.375rem;
	--text-line-height: 1.35;
	display: grid;
	row-gap: 3.0625rem;
	margin-inline: var(--margin-inline);
	margin-block-start: var(--margin-block-start);
	border-radius: 8px;
	background-color: white;
	padding: var(--padding);
	max-width: 1000px;

	@media (width >= 768px) {
		--margin-block-start: 3.3125rem;
		--margin-inline: 1.25rem;
		--padding: 3.3125rem 2rem calc(3.875rem - 13px);
		--heading-font-size: 4.8125rem;
		--heading-letter-spacing: -3.12px;
		--heading-line-height: 1.1;
		--heading-text-align: left;
		max-width: 1000px;
	}

	@media (width >= 1040px) {
		--margin-block-start: 3.5rem;
		--margin-inline: auto;
		--heading-font-size: 6rem;
		--heading-letter-spacing: -4.27px;
		--text-font-size: 1.875rem;
	}

	.prose {
		> div {
			--prose-flow-space: 1.3125rem;
		}

		@media (width >= 768px) {
			display: grid;
			grid-template-columns: 50% auto;
			-moz-column-gap: 2.5rem;
			     column-gap: 2.5rem;

			> div {
				--prose-flow-space: 0;
				--text-align: left;
			}
		}

		@media (width >= 1040px) {
			columng-gap: 3.5rem;
		}
	}

	h2 {
		color: var(--neutral-900);
		font-weight: 400;
		font-size: var(--heading-font-size);
		font-family: var(--font-serif);
		letter-spacing: -4%;
		text-align: var(--heading-text-align);

		@media (width >= 768px) {
			--heading-text-align: right;
		}
	}

	p {
		color: var(--neutral-900);
		font-size: var(--text-font-size);
		line-height: var(--text-line-height);
		text-align: var(--text-align);
	}

	/* Newsletter signup embed overrides */
	form#ctct_form_0.ctct-form-custom {
		box-sizing: border-box;

		@media (width >= 768px) {
			display: grid;
			grid-template-columns: 76% auto;
			gap: 0.8125rem;
			min-height: 48px;
		}
	}

	.ctct-inline-form { margin-block-start: 1.25rem; }
	div.ctct-form-embed div.ctct-form-defaults { padding: 0; }

	#gdpr_text,
	#email_address_label_0,
	p.ctct-form-footer,
	#ctct_recaptcha_0 { display: none !important; }

	div#email_address_field_0 {
		margin-block-end: 0.75rem;
		@media (width >= 768px) { margin-block-end: 0; }
	}

	input#email_address_0.ctct-form-element {
		margin-block-end: 0;
		box-shadow: none;
		border: 0;
		background-color: rgba(94, 94, 95, 0.2);
		padding: 13px;
		min-height: 48px;
		font-size: 1.3125rem;
		line-height: 1;
		font-family: var(--font-callunasans);
		letter-spacing: -2%;
		text-align: center;

		@media (width >= 768px) {
			text-align: left;
		}
	}

	button.ctct-form-button {
		background-color: var(--twilight);
		padding: 0.5rem !important;
		height: 48px;
		font-weight: 700;
		font-size: 1.75rem !important;
		line-height: 1 !important;
		font-family: var(--font-callunasans);
		letter-spacing: -2%;
		text-transform: uppercase !important;
	}
}

.t-fiftiethAnniversaryImpact .newsletter-cta article {
	@media (width >= 1040px) {
		--heading-font-size: 4.8125rem;
	}

	.prose {
		@media (width >= 768px) {
			grid-template-columns: 50% minmax(0, max-content);
		}
	}

	h2 {
		color: var(--lake);

		@media (width >= 768px) {
			--heading-text-align: left;
		}
	}

	:not(.newsletter) p {
		@media (width >= 768px) {
			text-align: left;
		}
	}
}

.explore-more {
	--prose-padding-block: 7.5rem;
	--prose-heading-size: 2.375rem;
	background-color: var(--gold);
	background-image: url("/assets/images/timeline-explore-texture.png");
	background-position: center;
	background-repeat: no-repeat;
	background-size: cover;

	@media (width >= 768px) {
		--prose-padding-block: 7.5rem 6.6875rem;
		--prose-heading-size: 3rem;
		position: relative;
		z-index: calc( var(--z-above) + 10);
	}

	@media (width >= 1080px) {
		--prose-padding-block: 10.875rem 12.5rem;
	}

	.prose {
		padding-block: var(--prose-padding-block);
		text-align: center;

		h2 {
			color: white;
			font-family: var(--font-serif);
			font-weight: 400;
			font-size: var(--prose-heading-size);
			line-height: 1.35;
			letter-spacing: -2.2%;
		}

		p {
			color: white;
			font-size: 1.6875rem;
			line-height: 1.2;
			letter-spacing: -2%;
		}
	}

	.button-group {
		--prose-flow-space: 3.5625rem;
		gap: 1.5rem;

		.button.fiftieth-explore {
			border-radius: 12px;
			font-size: 1.6875rem;
			font-weight: 400;
			letter-spacing: -2%;
			line-height: 1;
			width: 100%;
			max-width: 400px;
			text-align: center;
		}

		button[disabled] {
			align-items: center;
			background-color: var(--gray);
			color: white;
			opacity: 0.3;
			padding: 1.25rem;
			display: flex;
			justify-content: center;
			flex-wrap: wrap;
			-moz-column-gap: 1rem;
			     column-gap: 1rem;
			row-gap: 0.5rem;

			&:hover { cursor: unset; }

			span {
				font-size: 1.125rem;
			}
		}
	}
}

/* =========================================================
	IMPACT STATS
========================================================= */

.impact-stats {
	--section-bg-color: #e9e4d7;
	position: relative;
	background-color: var(--section-bg-color);

	> svg {
		fill: var(--section-bg-color);
		position: absolute;
		top: -16px;
		left: 50%;
		transform: translateX(50%);
		rotate: 180deg;
	}

	.container {
		container: innerContainer / inline-size;
		margin-inline: auto;
		max-width: 1000px;
	}

	.stats {
		display: grid;
		gap: 1.25rem;

		@container innerContainer (width >= 570px) {
			grid-template-columns: repeat(2, 1fr);
			/* display: flex; */
			gap: 1.5rem;
		}
	}

	figure {
		--border-style: 11px solid var(--gold);
		--figure-font-size: 7.5rem;
		--figcaption-font-size: 2.25rem;
		border-radius: var(--border-radius-xl);
		background-color: white;
		padding-inline: 1rem;
		padding-block: 3.1875rem 4.6875rem;
		text-align: center;

		@container innerContainer (width >= 580px) {
			--border-style: 8px solid var(--gold);
		}

		@media (width >= 768px) {
			--figure-font-size: 5.75rem;
			--figcaption-font-size: 1.6875rem;
		}

		@media (width >= 960px) {
			--figure-font-size: 7.3125rem;
			--figcaption-font-size: 2.1875rem;
		}

		@media (width >= 1280px) {
			--figure-font-size: 9.375rem;
			--figcaption-font-size: 2.75rem;
		}

		&:first-child {
			@container innerContainer (width < 570px) {
				border-top: var(--border-style);
			}

			@container innerContainer (width >= 570px) {
				border-left: var(--border-style);
			}
		}

		&:last-child {
			@container innerContainer (width < 570px) {
				border-bottom: var(--border-style);
			}

			@container innerContainer (width >= 570px) {
				border-right: var(--border-style);
			}
		}


		h2 {
			color: var(--gold);
			font-weight: 600;
			font-size: var(--figure-font-size);
			line-height: 1;
			letter-spacing: -4%;
		}

		figcaption {
			margin-block-start: 1.5rem;
			color: var(--gold);
			font-size: 600;
			font-size: var(--figcaption-font-size);
			line-height: 1.1;
			letter-spacing: -2%;
		}
	}

	.lottie {
		margin-block-start: 1.25rem;
		border-radius: var(--border-radius-xl);
		overflow: hidden;

		@container innerContainer (width >= 570px) {
			margin-block-start: 1.5rem;
		}
	}
}

/* =========================================================
	IMPACT PAGE: STATES & AREAS OF FOCUS (AoF)

	- States & AoF sections
	- States intro
	- Tabbed slide navigation
	- Swiper/slides container
	- Slide
========================================================= */

/* MARK: States & AoF sections
----------------------------------------------- */
.impact-slider-section {
	transition: background-color 0.3s ease-in-out;
	background-color: var(--section-bg-color, #eee);
	padding-block: 0 8.75rem;
}

/* MARK: Intro
----------------------------------------------- */
.impact-slider-section :is(.states-intro, .focus-areas-intro) {
	--intro-padding-block: 7.1875rem 4.125rem;
	padding-block: var(--intro-padding-block);
	color: var(--gray);
	text-align: center;

	@media (width >= 768px) {
		--intro-padding-block: 7.5rem 2.8125rem
	}

	@media (width >= 1280px) {
		--intro-padding-block: 7.5rem 2.3125rem
	}

	h2 {
		color: inherit;
		font-weight: 400;
		font-size: 3rem;
		line-height: 1.35;
		font-family: var(--font-serif);
		letter-spacing: -2.2%;
	}

	p {
		font-size: 1.3125rem;
		line-height: 1.5;
		letter-spacing: -1.1%;
	}
}

/* MARK: Tabbed slide navigation
----------------------------------------------- */
.impact-slider-section nav[aria-label] {
	@media (width < 768px) { display: none; }

	&.container { --container-max-width: 1077px; }
	&:has([data-slider-tabs="focus-areas-tabs"]).container { --container-max-width: 1087px; }

	ul.slider-tabs {
		--tab-spacing: 2.25rem;
		--tab-padding: 0.3125rem 1.5rem;
		display: flex;
		justify-content: center;
		gap: var(--tab-spacing);
		margin: 0 0 40px 0;
		padding: 0;
		list-style: none;

		@media (width >= 960px) { --tab-spacing: 6rem; }
		@media (width >= 1024px) { --tab-spacing: 4.5rem; }
		@media (width >= 1280px) { --tab-spacing: 6.3125rem; }

		&[data-slider-tabs="focus-areas-tabs"] {
			--tab-spacing: 1.75rem;
			--tab-padding: 0.3125rem 0.75rem;
			@media (width >= 1024px) { --tab-spacing: 3rem; }
		}
	}

	ul.slider-tabs li button {
		--slider-tab-font-size: 1.5rem;
		position: relative;
		border-radius: var(--border-radius-xl);
		background-color: transparent;
		padding: var(--tab-padding);
		color: var(--gray);
		font-weight: 400;
		font-size: var(--slider-tab-font-size);
		line-height: 1;
		letter-spacing: -2%;

		svg {
			position: absolute;
			top: calc(100% - 1px);
			left: 50%;
			transform: translateX(-50%);
		}
	}

	ul.slider-tabs[data-slider-tabs="focus-areas-tabs"] li button {
		--slider-tab-font-size: 1.125rem;
	}

	ul.slider-tabs li button:hover {
		background-color: white;
	}

	ul.slider-tabs li button[aria-selected="true"] { color: white; }

	ul.slider-tabs li button[aria-selected="true"][data-theme="salmon"] {
		background-color: var(--salmon);

		svg { fill: var(--salmon); }
	}

	ul.slider-tabs li button[aria-selected="true"][data-theme="lake"] {
		background-color: var(--lake);

		svg { fill: var(--lake); }
	}

	ul.slider-tabs li button[aria-selected="true"][data-theme="gold"] {
		background-color: var(--gold);

		svg { fill: var(--gold); }
	}

	ul.slider-tabs li button[aria-selected="true"][data-theme="dark-gray"] {
		background-color: var(--gray);

		svg { fill: var(--gray); }
	}

	ul.slider-tabs li button[aria-selected="true"][data-theme="twilight"] {
		background-color: var(--twilight);

		svg { fill: var(--twilight); }
	}

	ul.slider-tabs li button[aria-selected="true"][data-theme="river"] {
		background-color: var(--river);

		svg { fill: var(--river); }
	}
}

/* MARK: Swiper
----------------------------------------------- */
.impact-slider-section .swiper {
	@media (width < 768px) { display: none; }
}
.impact-slider-section .swiper-slide {
	width: 100%;

	@media (width >= 1280px) {
		margin-inline: 0;
		width: 1200px;
	}
}

/* MARK: Slide content
----------------------------------------------- */
.impact-slider-section .slide-content {
	--slide-theme: black;
	--slide-theme-10: rgba(0, 0, 0, 0.1);
	--slide-theme-50: rgba(0, 0, 0, 0.5);
	--slide-grid-columns: auto 268px;
	--slide-heading-font-size: 3rem;
	--slide-state-total-font-size: 3.75rem;
	display: grid;
	margin-inline: 20px;
	border-radius: var(--border-radius-xl);
	background-color: white;
	overflow: hidden;

	@media (width < 768px) {
		border-top: 10px solid var(--slide-theme);
	}

	@media (width >= 960px) {
		--slide-grid-columns: repeat(2, 1fr);
		grid-template-columns: var(--slide-grid-columns);
		align-items: center;
		border-left: 10px solid var(--slide-theme);
	}

	@media (width >= 1280px) {
		--slide-heading-font-size: 4.375rem;
		--slide-state-total-p-font-size: 3.75rem;
		margin-inline: 0;
	}

	&:has([data-slide-header="focus-area"]) {
		@media (width >= 1280px) {
			border-right: 10px solid var(--slide-theme);
			border-left: 0;
		}
	}

	&[data-theme="gold"] {
		--slide-theme: var(--gold);
		--slide-theme-10: rgba(172, 146, 87, 0.1);
		--slide-theme-50: rgba(172, 146, 87, 0.5);
	}

	&[data-theme="dark-gray"] {
		--slide-theme: var(--gray);
		--slide-theme-10: rgba(94, 94, 95, 0.1);
		--slide-theme-50: rgba(94, 94, 95, 0.5);
	}

	&[data-theme="lake"] {
		--slide-theme: var(--lake);
		--slide-theme-10: rgba(80, 201, 181, 0.1);
		--slide-theme-50: rgba(80, 201, 181, 0.5);
	}

	&[data-theme="river"] {
		--slide-theme: var(--river);
		--slide-theme-10: rgba(11, 63, 74, 0.1);
		--slide-theme-50: rgba(11, 63, 74, 0.5);
	}

	&[data-theme="salmon"] {
		--slide-theme: var(--salmon);
		--slide-theme-10: rgba(224, 104, 74, 0.1);
		--slide-theme-50: rgba(224, 104, 74, 0.5);
	}

	&[data-theme="twilight"] {
		--slide-theme: var(--twilight);
		--slide-theme-10: rgba(2, 94, 110, 0.1);
		--slide-theme-50: rgba(2, 94, 110, 0.5);
	}
}

/* MARK: Slide facts
----------------------------------------------- */
.impact-slider-section .slide-content .slide-facts {
	--slide-facts-padding-inline: 1.25rem;
	padding-inline: var(--slide-facts-padding-inline);
	padding-block: 1.125rem 2.875rem;

	@media (width >= 1280px) { --slide-facts-padding-inline: 2.75rem; }

	header {
		display: grid;
		gap: 1rem;
		text-align: center;

		@media (width >= 768px) {
			display: flex;
			justify-content: flex-start;
			align-items: center;
			text-align: left;
		}

		@media (width >= 1024px) { gap: 1.125rem; }
		@media (width >= 1280px) { gap: 1.4375rem; }

		div {
			@media (width < 768px) { margin-inline: auto; }
			@media (width >= 768px) { position: relative; }
		}

		svg {
			fill: var(--slide-theme);
			max-width: 211px;
			height: 194px;
		}

		h3 {
			color: var(--slide-theme);
			font-weight: 500;
			font-size: var(--slide-heading-font-size);
			line-height: var(--slide-heading-line-height, 1);
			letter-spacing: -2%;
		}

		&[data-slide-header="focus-area"] h3 {
			--slide-heading-font-size: 1.75rem;
			@media (width >= 768px) { --slide-heading-font-size: 2.125rem; }
			@media (width >= 1280px) { --slide-heading-font-size: 2.5rem; }
		}

		&[data-slide-header="focus-area"] svg,
		&[data-slide-header="focus-area"] img {
			max-width: 98px;
			@media (width < 768px) { margin-inline: auto; }
		}
	}

	.prose {
		--flow-space: 1.25rem;
		font-size: 1.13333333rem;
		line-height: 1.5;
	}

	.slide-totals {
		--flow-space: 2.3125rem;
		display: grid;
		gap: 1.25rem;

		@media (width >= 768px) {
			grid-template-columns: repeat(2, 1fr);
		}

		div {
			border-radius: var(--border-radius-xl);
			background-color: var(--slide-theme-10);
			padding: 1.5625rem 1rem;
			text-align: center;
		}

		h4 {
			color: var(--slide-theme-50);
			font-weight: 500;
			font-size: 1.5625rem;
			line-height: 1;
			letter-spacing: -2%;
			text-transform: uppercase;
		}

		p {
			color: var(--slide-theme);
			font-weight: 500;
			font-size: var(--slide-state-total-font-size);
			line-height: 1;
			letter-spacing: -3%;
		}
	}
}

.impact-slider-section .slide-content:has([data-slide-header="focus-area"]) .slide-facts {
	@media (width >= 1280px) { order: 2; }
}

/* MARK: Slide grantees
----------------------------------------------- */
.impact-slider-section .slide-content .slide-grantees {
	display: grid;

	@media (width >= 768px) {
		display: flex;
		height: 100%;
	}

	@media (width >= 960px) {
		flex-wrap: wrap;
	}

	figure {
		position: relative;
		width: 100%;
		height: 270px;
		max-height: 270px;

		/* @media (width >= 768px) { */
		/* 	height: 315px; */
		/* 	max-height: 315px; */
		/* } */

		@media (width >= 768px) {
			height: 350px;
			max-height: 350px;
		}
	}

	figure:nth-child(1),
	figure:nth-child(2) {
		@media (width >= 960px) {
			flex-basis: 50%;
			width: 50%;
		}
	}

	figure picture {
		width: 100%;
		height: 100%;
	}

	figure img {
		width: 100%;
		height: 100%;
		-o-object-fit: cover;
		   object-fit: cover;
		-o-object-position: center;
		   object-position: center;
	}

	figure figcaption {
		position: absolute;
		bottom: 0;
		left: 0;
		background-color: rgba(94, 94, 95, 0.9);
		padding: 0.3125rem 0.5rem;
		color: white;
		font-size: 0.75rem;
		line-height: 1.5;
		letter-spacing: -2%;
	}
}

.impact-slider-section .slide-content:has([data-slide-header="focus-area"]) .slide-grantees {
	@media (width >= 1280px) { order: 1; }
}

/* MARK: Mobile slides
----------------------------------------------- */
.slides-mobile {
	@media (width >= 768px) { display: none; }

	display: grid;
	gap: 6.25rem;
	container: mobileSlidesContainer / inline-size;
	margin-inline: auto;
	width: 100%;
	max-width: 400px;
}

/* =========================================================
   50th ANNIVERSARY LANDING PAGE(S) STYLES
========================================================= */ /* also contains large bg images */


/*# sourceMappingURL=50th-anniversary.css.map*/