/**
 * TAG Strategies: home page (front-page.php only; inc/assets.php).
 *
 * Home hero · Counter · Homepage CTA · Featured work.
 * (The marquee and the reel dialog are shell components.)
 *
 * Values are lifted from the old build: tagstart-child components/_homepage,
 * 02-molecules/_jumbotron (homepage hero), _counter, _homepage-cta,
 * _featured-work, _filter, 02-molecules/_accordion and _flickity-carousel,
 * plus the dream.css jumbotron / accordion / flickity / grid rules they sat
 * on (_reference/css-spec). The Bootstrap container > row > col wrappers are
 * folded into each block's own BEM elements with the same boxes.
 *
 * @package TGS
 */

/* ==========================================================================
   Home hero (was section.homepage-hero > .jumbotron.jumbotron-homepage-hero)
   ========================================================================== */

.tgs-home-hero {
	position: relative;
}

/* The jumbotron box: padding, the "TAG." wordmark, the row. */
.tgs-home-hero__stage {
	position: relative;
	padding-top: 6.125rem;
	padding-bottom: 6.125rem;
}

.tgs-home-hero.has-image .tgs-home-hero__stage {
	padding-top: 0;
}

/* The vertical "TAG." wordmark (uploads/2023/05/Wordmark-TAG-NegativeBlueDot.svg). */
.tgs-home-hero__stage::before {
	position: absolute;
	top: 3.75rem;
	right: 1rem;
	z-index: var(--tgs-z-site-content);
	display: block;
	width: 1rem;
	font-weight: 700;
	content: url("../images/wordmark-tag.svg");
	opacity: 1;
	transition: opacity var(--tgs-transition);
}

.tgs-home-hero.has-image .tgs-home-hero__stage::before {
	top: 7rem;
}

/* container-fluid > row: full width up to the fluid cap, gutters cancelled. */
.tgs-home-hero__inner {
	display: flex;
	flex-wrap: wrap;
	max-width: var(--tgs-container-xxxxl);
	margin-right: auto;
	margin-left: auto;
}

/* The video column, over the heading (the outline copy sits above it). */
.tgs-home-hero__media {
	position: relative;
	z-index: 2;
	flex-shrink: 0;
	width: 100%;
	max-width: 100%;
	padding: 0;
}

.tgs-home-hero__media video {
	pointer-events: none;
}

.tgs-home-hero__image {
	display: block;
	width: 100%;
	height: auto;
}

.tgs-home-hero__content {
	position: relative;
	flex-shrink: 0;
	width: 100%;
	max-width: 100%;
	padding-right: 0.75rem;
	padding-left: 1.875rem;
	margin-top: -2.125rem;
}

.tgs-home-hero__title {
	margin: 0;
	font-family: var(--tgs-font-primary);
	font-size: 4.625rem;
	font-weight: 700;
	line-height: 0.8108108108;
	color: var(--white);
}

.tgs-home-hero__title span {
	display: block;
	white-space: nowrap;
}

.tgs-home-hero__title strong {
	font-family: var(--tgs-font-accent);
	font-size: 0.8em;
	line-height: 0;
	color: var(--octonary);
}

/* The outlined copy, laid over the video. */
.tgs-home-hero__title--outline {
	position: absolute;
	bottom: 0;
	z-index: var(--tgs-z-site-content);
	pointer-events: none;
	-webkit-text-stroke: 0.0625rem var(--white);
	-webkit-text-fill-color: transparent;
}

.tgs-home-hero__title--outline strong {
	-webkit-text-stroke: 0.0625rem var(--octonary);
	-webkit-text-fill-color: transparent;
}

/* Watch Reel: covers the video; the label slides open on hover. */
.tgs-home-hero__play {
	position: absolute;
	top: 0;
	right: 0;
	bottom: 0;
	left: 0;
	z-index: var(--tgs-z-site-content);
	display: block;
	width: 100%;
	padding: 0.375rem 0.75rem;
	font-family: var(--tgs-font-primary);
	font-size: 1rem;
	font-weight: 400;
	line-height: 1.4;
	color: var(--white);
	text-align: center;
	text-decoration: none;
	text-transform: uppercase;
	vertical-align: middle;
	pointer-events: none;
	cursor: pointer;
	background-color: transparent;
	border: 1px solid transparent;
	border-radius: 0;
	transition: opacity var(--tgs-transition);
}

.tgs-home-hero__media:hover .tgs-home-hero__play,
.tgs-home-hero__media:focus-within .tgs-home-hero__play {
	pointer-events: all;
	opacity: 1;
}

/* Touch screens cannot hover first: the button takes the tap straight away. */
@media (hover: none) {
	.tgs-home-hero__play {
		pointer-events: all;
	}
}

.tgs-home-hero__play::before {
	position: absolute;
	top: 0;
	right: 0;
	bottom: 0;
	left: 0;
	content: "";
	background: var(--octonary-primary-horizontal);
	background-size: 200% auto;
	opacity: 0;
	transition: opacity var(--tgs-transition);
	animation: gradient-alt 15s ease infinite;
}

.tgs-home-hero__play:hover,
.tgs-home-hero__play:focus-visible {
	color: var(--white);
}

.tgs-home-hero__play:hover::before,
.tgs-home-hero__play:focus-visible::before {
	opacity: 0.5;
}

.tgs-home-hero__play-label,
.tgs-home-hero__play-icon {
	position: relative;
	display: inline-block;
	vertical-align: middle;
}

.tgs-home-hero__play-label {
	max-width: 0;
	overflow: hidden;
	white-space: nowrap;
	transition: max-width var(--tgs-transition);
}

.tgs-home-hero__play:hover .tgs-home-hero__play-label,
.tgs-home-hero__play:focus-visible .tgs-home-hero__play-label {
	max-width: 5.875rem;
}

.tgs-home-hero__play-icon {
	width: 30px;
	height: 30px;
}

.tgs-home-hero__play-icon .tgs-icon {
	display: block;
	width: 30px;
	height: 30px;
}

/* Scroll-linked motion (animations.css .tgs-scroll-motion, which also
   carries the power1.out curve): line 1 drifts 300px (the page header's is
   345px), over the first half of the stage. app.js initHeroScrollEnd()
   writes the measured half-height inline for the rAF fallback. */
.tgs-home-hero.tgs-scroll-motion .line-1 {
	--tgs-scroll-x: -300px;
}

.tgs-home-hero.tgs-scroll-motion {
	--tgs-scroll-end: calc(8.75rem + (100vw - var(--tgs-side-w)) * 0.1875);
}

@media (min-width: 768px) {
	.tgs-home-hero__stage,
	.tgs-home-hero.has-image .tgs-home-hero__stage {
		padding-top: 11.375rem;
	}

	.tgs-home-hero__media {
		flex: 0 0 auto;
		order: 1;
		width: 66.6666666667%;
		margin-left: -16.6666666667%;
	}

	.tgs-home-hero__content {
		flex: 0 0 auto;
		order: 0;
		width: 50%;
		margin-top: 0;
	}

	.tgs-home-hero.has-image .tgs-home-hero__title {
		position: absolute;
		top: 50%;
		display: inline-block;
		transform: translateY(-50%);
	}

	.tgs-home-hero.has-image .tgs-home-hero__title--outline {
		bottom: auto;
	}

	/* The old fluid-type mixin resolved to these flat sizes. */
	.tgs-home-hero__title {
		font-size: 132px;
	}
}

/* Only between the side header appearing and the stage going fixed. */
@media (min-width: 992px) and (max-width: 1023.98px) {
	.tgs-home-hero.has-image .tgs-home-hero__stage::before {
		top: 2.75rem;
	}
}

@media (min-width: 992px) {
	.tgs-home-hero__stage::before {
		right: 2.5rem;
	}

	.tgs-home-hero__title--outline {
		-webkit-text-stroke-width: 0.125rem;
	}

	.tgs-home-hero__title--outline strong {
		-webkit-text-stroke-width: 0.125rem;
	}
}

/* From 1024 the stage is fixed under the page (was .homepage-hero.animated)
   and the section keeps its height in the flow, so the counter and the rest
   scroll up over it. Stage height at 1024-1399 = 182 + 98 padding + the 16:9
   video at 2/3 of the column: 17.5rem + 37.5% of the column width, which a
   content-box height plus a percentage padding gives exactly. Without
   media (no video, no featured image) the hero stays in the flow. */
@media (min-width: 1024px) {
	.tgs-home-hero.has-image {
		box-sizing: content-box;
		height: 17.5rem;
		padding-top: 37.5%;
	}

	.tgs-home-hero.has-image .tgs-home-hero__stage {
		position: fixed;
		top: 0;
		right: 0;
		left: var(--tgs-side-w);
	}

	.tgs-home-hero__content {
		padding-left: 4.375rem;
	}

	.tgs-home-hero__title {
		font-size: 154px;
	}
}

@media (min-width: 1400px) {
	.tgs-home-hero.has-image {
		height: 85vh;
		padding-top: 0;
	}

	.tgs-home-hero__stage,
	.tgs-home-hero.has-image .tgs-home-hero__stage {
		height: 85vh;
		padding-top: 11rem;
		padding-bottom: 8.25rem;
	}

	.tgs-home-hero__stage::before,
	.tgs-home-hero.has-image .tgs-home-hero__stage::before {
		top: 3.5rem;
	}

	.tgs-home-hero__content {
		padding-left: 8.75rem;
	}

	.tgs-home-hero__title {
		font-size: 197px;
	}

	.tgs-home-hero.tgs-scroll-motion {
		--tgs-scroll-end: 42.5vh;
	}
}

@media (min-width: 2300px) {
	.tgs-home-hero__stage,
	.tgs-home-hero.has-image .tgs-home-hero__stage {
		padding-top: 20rem;
		padding-bottom: 11.5rem;
	}

	.tgs-home-hero__title {
		font-size: 309px;
	}
}

/* ==========================================================================
   Counter (was section.counter#fundraisingCounter, child _counter.scss)
   ========================================================================== */

.tgs-counter {
	position: relative;
	background-color: var(--black);
}

.tgs-counter__wrapper {
	border-top: var(--tgs-rule);
	border-bottom: var(--tgs-rule);
}

/* container-fluid > row: full width up to the fluid cap, gutters cancelled. */
.tgs-counter__inner {
	display: flex;
	flex-wrap: wrap;
	max-width: var(--tgs-container-xxxxl);
	margin-right: auto;
	margin-left: auto;
}

/* col-8 col-lg-10 */
.tgs-counter__number {
	display: block;
	flex: 0 0 auto;
	width: 66.6666666667%;
	padding: 0.625rem;
	border-right: var(--tgs-rule);
}

.tgs-counter__label {
	font-size: 1rem;
	line-height: 1;
}

.tgs-counter__amount {
	margin: 0;
	font-family: var(--tgs-font-primary);
	font-size: 1.6875rem;
	font-weight: 700;
	line-height: 1;
	background: var(--tgs-gradient-shimmer);
	background-size: 200% auto;
	-webkit-background-clip: text;
	background-clip: text;
	-webkit-text-fill-color: transparent;
	animation: gradient 15s ease infinite;
}

.tgs-counter__amount::before {
	content: "$";
}

/* col-4 col-lg-2 */
.tgs-counter__action {
	display: flex;
	flex: 0 0 auto;
	align-items: center;
	width: 33.3333333333%;
	padding: 0;
	font-size: 1.5rem;
	text-transform: uppercase;
}

.tgs-counter__button {
	position: relative;
	display: block;
	width: 100%;
	height: 100%;
	padding: 0.375rem 0.75rem;
	font-family: var(--tgs-font-primary);
	font-size: 0.875rem;
	font-weight: 400;
	line-height: 1.4;
	color: var(--white);
	text-align: center;
	text-decoration: none;
	text-transform: uppercase;
	cursor: pointer;
	background-color: transparent;
	border: 1px solid transparent;
	border-radius: 0;
	transition: color 0.15s ease-in-out;
}

.tgs-counter__button:hover,
.tgs-counter__button:focus-visible {
	color: var(--tgs-link-hover);
}

.tgs-counter__button-label {
	position: absolute;
	top: 50%;
	left: 50%;
	display: inline-block;
	width: 100%;
	transform: translate(-50%, -50%);
}

@media (min-width: 768px) {
	.tgs-counter__amount {
		font-size: 2rem;
	}
}

@media (min-width: 992px) {
	.tgs-counter__number {
		display: flex;
		align-items: center;
		justify-content: flex-end;
		width: 83.3333333333%;
		padding: 1.25rem 0;
	}

	.tgs-counter__label {
		margin-right: 1rem;
		font-size: 1.625rem;
	}

	.tgs-counter__amount {
		min-width: 17.5rem;
		margin-right: 1.25rem;
		font-size: 2.5rem;
	}

	.tgs-counter__action {
		width: 16.6666666667%;
	}

	.tgs-counter__button {
		font-size: 1rem;
	}
}

@media (min-width: 1400px) {
	.tgs-counter__label {
		font-size: 1.6875rem;
	}

	.tgs-counter__amount {
		min-width: 21.875rem;
		font-size: 3.25rem;
	}

	.tgs-counter__button {
		font-size: 1.125rem;
	}
}

/* ==========================================================================
   Homepage CTA (was section.homepage-cta#homepageCTA, child _homepage-cta.scss)
   ========================================================================== */

.tgs-home-cta {
	position: relative;
	padding: 5rem 1.875rem;
	background-color: var(--black);
	border-bottom: var(--tgs-rule);
}

/* container-fluid > row > col: one 12px inset, capped at the fluid width. */
.tgs-home-cta__inner {
	max-width: var(--tgs-container-xxxxl);
	padding-right: 0.75rem;
	padding-left: 0.75rem;
	margin-right: auto;
	margin-left: auto;
}

.tgs-home-cta__text {
	text-align: center;
}

.tgs-home-cta__text p {
	font-size: 1.5rem;
	font-weight: 200;
}

.tgs-home-cta__text p strong {
	font-weight: 600;
	text-transform: uppercase;
}

/* Each word starts blurred and transparent; fade-in (animations.css) clears it. */
.tgs-home-cta__text p span {
	opacity: 0;
	filter: blur(4px);
}

/* Phones: the words fade in straight away. */
@media (max-width: 767.98px) {
	.tgs-home-cta__text p span {
		animation-name: fade-in;
		animation-duration: var(--tgs-duration);
		animation-timing-function: cubic-bezier(0.11, 0, 0.5, 0);
		animation-fill-mode: forwards;
	}

	.tgs-home-cta__text p span:nth-child(1) { animation-delay: 0.1s; }
	.tgs-home-cta__text p span:nth-child(2) { animation-delay: 0.2s; }
	.tgs-home-cta__text p span:nth-child(3) { animation-delay: 0.3s; }
	.tgs-home-cta__text p span:nth-child(4) { animation-delay: 0.4s; }
	.tgs-home-cta__text p span:nth-child(5) { animation-delay: 0.5s; }
	.tgs-home-cta__text p span:nth-child(6) { animation-delay: 0.6s; }
	.tgs-home-cta__text p span:nth-child(7) { animation-delay: 0.7s; }
	.tgs-home-cta__text p span:nth-child(8) { animation-delay: 0.8s; }
	.tgs-home-cta__text p span:nth-child(9) { animation-delay: 0.9s; }
	.tgs-home-cta__text p span:nth-child(10) { animation-delay: 1s; }
	.tgs-home-cta__text p span:nth-child(11) { animation-delay: 1.1s; }
	.tgs-home-cta__text p span:nth-child(12) { animation-delay: 1.2s; }
	.tgs-home-cta__text p span:nth-child(13) { animation-delay: 1.3s; }
	.tgs-home-cta__text p span:nth-child(14) { animation-delay: 1.4s; }
	.tgs-home-cta__text p span:nth-child(15) { animation-delay: 1.5s; }
	.tgs-home-cta__text p span:nth-child(16) { animation-delay: 1.6s; }
	.tgs-home-cta__text p span:nth-child(17) { animation-delay: 1.7s; }
	.tgs-home-cta__text p span:nth-child(18) { animation-delay: 1.8s; }
	.tgs-home-cta__text p span:nth-child(19) { animation-delay: 1.9s; }
	.tgs-home-cta__text p span:nth-child(20) { animation-delay: 2s; }
}

/* From 768: once in view (.is-active, app.js initHomeCta). The old
   delays, word 4 and 5 both at .5s included. */
@media (min-width: 768px) {
	.tgs-home-cta.is-active span {
		animation-name: fade-in;
		animation-duration: var(--tgs-duration);
		animation-timing-function: cubic-bezier(0.11, 0, 0.5, 0);
		animation-fill-mode: forwards;
	}

	.tgs-home-cta.is-active span:nth-child(1) { animation-delay: 0.1s; }
	.tgs-home-cta.is-active span:nth-child(2) { animation-delay: 0.2s; }
	.tgs-home-cta.is-active span:nth-child(3) { animation-delay: 0.3s; }
	.tgs-home-cta.is-active span:nth-child(4) { animation-delay: 0.5s; }
	.tgs-home-cta.is-active span:nth-child(5) { animation-delay: 0.5s; }
	.tgs-home-cta.is-active span:nth-child(6) { animation-delay: 0.6s; }
	.tgs-home-cta.is-active span:nth-child(7) { animation-delay: 0.7s; }
	.tgs-home-cta.is-active span:nth-child(8) { animation-delay: 0.8s; }
	.tgs-home-cta.is-active span:nth-child(9) { animation-delay: 0.9s; }
	.tgs-home-cta.is-active span:nth-child(10) { animation-delay: 1s; }
	.tgs-home-cta.is-active span:nth-child(11) { animation-delay: 1.1s; }
	.tgs-home-cta.is-active span:nth-child(12) { animation-delay: 1.2s; }
	.tgs-home-cta.is-active span:nth-child(13) { animation-delay: 1.3s; }
	.tgs-home-cta.is-active span:nth-child(14) { animation-delay: 1.4s; }
	.tgs-home-cta.is-active span:nth-child(15) { animation-delay: 1.5s; }
	.tgs-home-cta.is-active span:nth-child(16) { animation-delay: 1.6s; }
	.tgs-home-cta.is-active span:nth-child(17) { animation-delay: 1.7s; }
	.tgs-home-cta.is-active span:nth-child(18) { animation-delay: 1.8s; }
	.tgs-home-cta.is-active span:nth-child(19) { animation-delay: 1.9s; }
	.tgs-home-cta.is-active span:nth-child(20) { animation-delay: 2s; }
}

/* From 768, without scripting nothing adds .is-active: show the words as
   they end up (phones keep the CSS-only fade above). */
@media (min-width: 768px) and (scripting: none) {
	.tgs-home-cta__text p span {
		opacity: 1;
		filter: none;
	}
}

@media (min-width: 992px) {
	.tgs-home-cta {
		padding: 10rem 3.75rem;
	}

	.tgs-home-cta__text p {
		font-size: 3rem;
	}
}

/* ==========================================================================
   Featured work (was section.featured-work#featuredWork: child
   _featured-work.scss, _filter.scss, the accordion and Flickity carousels)
   ========================================================================== */

.tgs-featured-work {
	position: relative;
	padding: 5rem 0 5rem 1.875rem;
	overflow: hidden;
	background-color: var(--black);
}

/* container-fluid > row > cols. The cols keep dream.css's grid: md 540. */
.tgs-featured-work__container {
	width: 100%;
	max-width: var(--tgs-container-xxxxl);
	padding-right: 0.75rem;
	padding-left: 0.75rem;
	margin-right: auto;
	margin-left: auto;
}

.tgs-featured-work__row {
	display: flex;
	flex-wrap: wrap;
	margin-right: -0.75rem;
	margin-left: -0.75rem;
}

.tgs-featured-work__head,
.tgs-featured-work__filters,
.tgs-featured-work__tracks-col {
	position: relative;
	flex: 0 0 auto;
	width: 100%;
	max-width: 100%;
	padding-right: 0.75rem;
	padding-left: 0.75rem;
}

.tgs-featured-work__tracks-col {
	padding-right: 0;
}

.tgs-featured-work__title {
	margin-bottom: 3.125rem;
	font-size: 2.5rem;
	font-weight: 700;
	line-height: 1;
	letter-spacing: -0.05rem;
	transition-property: margin-bottom, font-size;
	transition-duration: var(--tgs-duration);
	transition-timing-function: var(--tgs-ease);
}

.tgs-featured-work__title strong {
	font-family: var(--tgs-font-accent);
	color: var(--octonary);
}

/* --- Select box (phones / tablets) ------------------------------------- */

.tgs-featured-work__select-wrap {
	position: relative;
	z-index: 4;
	padding-right: 1.875rem;
	margin-bottom: 3.125rem;
}

.tgs-select {
	position: relative;
	z-index: var(--tgs-z-site-content);
	display: block;
	width: 100%;
	margin: 0 auto;
}

.tgs-select__current {
	position: relative;
	cursor: pointer;
	outline: none;
}

/* The white rule left of the chevron. */
.tgs-select__current::after {
	position: absolute;
	top: 0.5rem;
	right: 2.75rem;
	display: block;
	width: 0.125rem;
	height: calc(100% - 16px);
	content: "";
	background-color: var(--white);
}

.tgs-select__icon {
	position: absolute;
	top: 50%;
	right: 1rem;
	display: block;
	width: 16px;
	height: 16px;
	color: var(--octonary);
	transform: translateY(-50%);
	transition: transform var(--tgs-transition);
}

.tgs-select__current:focus .tgs-select__icon {
	transform: translateY(-50%) rotate(180deg);
}

.tgs-select__value {
	display: flex;
}

.tgs-select__input {
	display: none;
}

.tgs-select__text {
	display: none;
	width: 100%;
	padding: 1rem 3.75rem 1rem 1rem;
	margin: 0;
	font-size: 1.25rem;
	border: var(--tgs-rule);
}

.tgs-select__input:checked + .tgs-select__text {
	display: block;
}

/* The option list: shown while the box has focus; HideList folds it away
   half a second after (so a click on an option still lands). */
.tgs-select__list {
	position: absolute;
	top: 0.5rem;
	right: 0.5rem;
	bottom: auto;
	left: 0.5rem;
	padding: 0;
	margin: 0;
	font-size: 0.875rem;
	list-style: none;
	opacity: 0;
	animation-name: HideList;
	animation-duration: 0.5s;
	animation-timing-function: step-start;
	animation-delay: 0.5s;
	animation-fill-mode: forwards;
}

.tgs-select__current:focus + .tgs-select__list {
	opacity: 1;
	animation-name: none;
}

.tgs-select__list > li {
	line-height: 1;
}

.tgs-select__option {
	display: block;
	padding: 0.5rem 1rem;
	background: var(--octonary-primary-horizontal);
	transition: padding-left var(--tgs-transition);
}

.tgs-select__current:focus + .tgs-select__list .tgs-select__option {
	cursor: pointer;
}

.tgs-select__option:hover,
.tgs-select__option:focus {
	padding-left: 1.5rem;
}

.tgs-select__list > li:first-of-type .tgs-select__option {
	padding-top: 1rem;
}

.tgs-select__list > li:last-of-type .tgs-select__option {
	padding-bottom: 1rem;
}

/* --- Accordion (desktop) ----------------------------------------------- */

.tgs-featured-work__accordion {
	display: none;
	flex-flow: column nowrap;
}

.tgs-featured-work__acc-item {
	flex: 0 0 auto;
	order: 1;
	overflow: hidden;
	color: var(--white);
	background-color: transparent;
}

.tgs-featured-work__acc-header {
	margin-bottom: 0;
}

.tgs-featured-work__acc-button {
	position: relative;
	display: block;
	width: 100%;
	padding: 1rem 1.25rem 1rem 0;
	font-family: var(--tgs-font-primary);
	font-size: 1.25rem;
	font-style: normal;
	font-weight: 600;
	line-height: 1;
	letter-spacing: 0;
	color: var(--white);
	text-align: left;
	text-decoration: none;
	text-transform: none;
	vertical-align: middle;
	overflow-anchor: none;
	cursor: pointer;
	background-color: transparent;
	border: 0.0625rem solid transparent;
	border-radius: 0;
	box-shadow: none;
	transition: all var(--tgs-transition);
}

.tgs-featured-work__acc-button:focus-visible {
	outline: 0.125rem solid var(--octonary);
	outline-offset: 0.125rem;
}

.tgs-featured-work__acc-button[aria-expanded="false"] {
	opacity: 0.25;
}

.tgs-featured-work__acc-button[aria-expanded="false"]:hover,
.tgs-featured-work__acc-button[aria-expanded="false"]:focus {
	opacity: 1;
}

/* The "01"-"08" counts were in the markup but hidden. */
.tgs-featured-work__acc-count {
	display: none;
}

.tgs-featured-work__acc-name {
	font-size: 2.375rem;
	line-height: 1.2105263158;
	transition: font-size var(--tgs-transition);
}

.tgs-featured-work__acc-button[aria-expanded="false"] .tgs-featured-work__acc-name {
	font-size: 1.5rem;
	line-height: 1.5;
}

.tgs-featured-work__acc-body {
	padding: 0 1.25rem 1rem 0;
}

.tgs-featured-work__acc-body p {
	font-size: 1rem;
	line-height: 1.5;
	transition: font-size var(--tgs-transition);
}

.tgs-featured-work__acc-body p:last-child {
	margin-bottom: 0;
}

/* --- Tracks (were Flickity carousels) ---------------------------------- */

.tgs-featured-work__tracks {
	overflow-x: hidden;
}

/* One track shows; the others wait off to the right, transparent and inert. */
.tgs-featured-work__track {
	position: absolute;
	top: 0;
	right: 0;
	left: 0;
	z-index: 0;
	pointer-events: none;
	opacity: 0;
	transform: translateX(100%);
	transition-property: opacity, transform;
	transition-duration: var(--tgs-duration);
	transition-timing-function: var(--tgs-ease);
}

.tgs-featured-work__track.is-active {
	position: relative;
	z-index: var(--tgs-z-site-content);
	pointer-events: all;
	opacity: 1;
	transform: translateX(0);
}

.tgs-featured-work__carousel {
	position: relative;
	padding: 0 0 0 1rem;
}

/* The scroll-snap row (Flickity's viewport). The trailing 25% lets the last
   card snap to the start like the others. contain: inline-size keeps the
   row's width out of the page's intrinsic sizing: the site grid column is
   1fr (min-content floor), and the 24-card "all" row's min-content would
   otherwise widen <main> past the viewport. */
.tgs-featured-work__viewport {
	position: relative;
	display: flex;
	contain: inline-size;
	align-items: flex-start;
	overflow-x: auto;
	overflow-y: hidden;
	overscroll-behavior-x: contain;
	scroll-snap-type: x mandatory;
	scrollbar-width: none;
}

.tgs-featured-work__viewport::-webkit-scrollbar {
	display: none;
}

.tgs-featured-work__viewport::after {
	flex: 0 0 25%;
	content: "";
}

.tgs-featured-work__viewport:focus-visible {
	outline: 0.125rem solid var(--octonary);
	outline-offset: 0.125rem;
}

/* A card: 75% of the row; dimmed unless it is the snapped one. */
.tgs-featured-work__work {
	flex: 0 0 75%;
	width: 75%;
	padding: 0 0.5rem;
	scroll-snap-align: start;
	opacity: 0.25;
	transition-property: opacity, width, height;
	transition-duration: var(--tgs-duration);
	transition-timing-function: var(--tgs-ease);
}

.tgs-featured-work__work.is-selected {
	opacity: 1;
}

/* Landscape box pushed down; the selected card's grows to a full portrait.
   Both cards end up the same height, so the row never jumps. */
.tgs-featured-work__figure {
	position: relative;
	margin: 49.0292498233% 0 1.625rem;
	transition-property: margin-top, margin-bottom;
	transition-duration: var(--tgs-duration);
	transition-timing-function: var(--tgs-ease);
}

.tgs-featured-work__figure::before {
	display: block;
	width: 100%;
	padding-top: 92.5720060637%;
	content: "";
	transition-property: padding-top;
	transition-duration: var(--tgs-duration);
	transition-timing-function: var(--tgs-ease);
}

.tgs-featured-work__work.is-selected .tgs-featured-work__figure {
	margin-top: 0;
}

.tgs-featured-work__work.is-selected .tgs-featured-work__figure::before {
	padding-top: 141.601255887%;
}

.tgs-featured-work__figure-inner {
	position: absolute;
	top: 0;
	right: 0;
	bottom: 0;
	left: 0;
}

.tgs-featured-work__image {
	width: 100%;
	max-width: 100%;
	height: 100%;
	object-fit: cover;
	object-position: 50% 50%;
}

/* The card titles were in the markup but hidden. */
.tgs-featured-work__work-title {
	display: none;
	visibility: hidden;
}

.tgs-featured-work__excerpt {
	font-size: 1rem;
	line-height: 1.5;
	transition: font-size var(--tgs-transition);
}

/* Prev / next: Flickity's round buttons, 10px in from the carousel edges. */
.tgs-featured-work__nav {
	position: absolute;
	top: 50%;
	width: 2.8125rem;
	height: 2.8125rem;
	padding: 0;
	color: #808080;
	cursor: pointer;
	background-color: transparent;
	border: 0.1875rem solid #808080;
	border-radius: 50%;
	opacity: 1;
	transform: translateY(-50%);
	transition-property: background-color, border-color, color, opacity;
	transition-duration: var(--tgs-duration);
	transition-timing-function: var(--tgs-ease);
}

.tgs-featured-work__nav--prev {
	left: 10px;
}

.tgs-featured-work__nav--next {
	right: 10px;
}

.tgs-featured-work__nav:hover {
	color: var(--white);
	background-color: #898989;
	border-color: #898989;
}

.tgs-featured-work__nav:focus-visible {
	outline: 0.125rem solid var(--octonary);
	outline-offset: 0.125rem;
}

.tgs-featured-work__nav:active {
	opacity: 0.6;
}

.tgs-featured-work__nav .tgs-icon {
	position: absolute;
	top: 20%;
	left: 20%;
	width: 60%;
	height: 60%;
}

/* --- Descriptions under the track (phones / tablets) -------------------- */

.tgs-featured-work__descriptions {
	padding: 0 3.625rem 0 1rem;
}

.tgs-featured-work__description,
.tgs-featured-work__description-link {
	display: none;
	visibility: hidden;
}

/* As before: the active description is inline (display: initial). */
.tgs-featured-work__description.is-active {
	display: initial;
	visibility: visible;
}

.tgs-featured-work__description-link {
	margin-top: 0.5rem;
}

.tgs-featured-work__description-link.is-active {
	display: block;
	visibility: visible;
}

/* --- Breakpoints ------------------------------------------------------- */

/* Grid md (dream.css 33.75em): col-md-8 offset-md-2. */
@media (min-width: 540px) {
	.tgs-featured-work__head,
	.tgs-featured-work__filters,
	.tgs-featured-work__tracks-col {
		width: 66.6666666667%;
		margin-left: 16.6666666667%;
	}
}

@media (min-width: 992px) {
	.tgs-featured-work {
		padding: 7.5rem 0 7.5rem 1.875rem;
		overflow: unset;
	}

	/* offset-lg-0; col-lg-5 / col-lg-7 */
	.tgs-featured-work__head,
	.tgs-featured-work__filters,
	.tgs-featured-work__tracks-col {
		margin-left: 0;
	}

	.tgs-featured-work__filters {
		width: 41.6666666667%;
	}

	.tgs-featured-work__tracks-col {
		width: 58.3333333333%;
	}

	.tgs-featured-work__title {
		margin-bottom: 4.6875rem;
		font-size: 3.75rem;
		line-height: 0.8;
	}

	.tgs-featured-work__select-wrap,
	.tgs-featured-work__descriptions {
		display: none;
	}

	.tgs-featured-work__accordion {
		display: flex;
		margin-bottom: 5rem;
	}

	/* The track column sticks while the accordion scrolls past. */
	.tgs-featured-work__tracks {
		position: sticky;
		top: 1.875rem;
		right: 0;
		margin-bottom: -5rem;
	}

	.tgs-featured-work__carousel {
		padding: 0 0 3.875rem 1.375rem;
	}
}

/* col-xl-12 / col-xl-4 / col-xl-8 */
@media (min-width: 1024px) {
	.tgs-featured-work__head {
		width: 100%;
	}

	.tgs-featured-work__filters {
		width: 33.3333333333%;
	}

	.tgs-featured-work__tracks-col {
		width: 66.6666666667%;
	}
}

/* col-xxl-11 offset-xxl-1 / offset-xxl-1 / col-xxl-7 */
@media (min-width: 1400px) {
	.tgs-featured-work {
		padding: 11.25rem 0;
	}

	.tgs-featured-work__head {
		width: 91.6666666667%;
		margin-left: 8.3333333333%;
	}

	.tgs-featured-work__filters {
		margin-left: 8.3333333333%;
	}

	.tgs-featured-work__tracks-col {
		width: 58.3333333333%;
	}

	.tgs-featured-work__title {
		margin-bottom: 6.25rem;
		font-size: 5.625rem;
		line-height: 0.7111111111;
	}

	.tgs-featured-work__acc-name {
		font-size: 3.5rem;
		line-height: 1.1428571429;
	}

	.tgs-featured-work__acc-button[aria-expanded="false"] .tgs-featured-work__acc-name {
		font-size: 2.1875rem;
		line-height: 1.3142857143;
	}

	.tgs-featured-work__acc-body p {
		font-size: 1.125rem;
		line-height: 1.5555555556;
	}

	.tgs-featured-work__carousel {
		padding: 0 0 3.875rem 2rem;
	}

	.tgs-featured-work__work {
		padding: 0 1.75rem;
	}

	.tgs-featured-work__figure {
		margin-bottom: 2.8125rem;
	}
}