/**
 * Tim Scott: the home page (front-page.php and template-parts/sections/
 * hero-video, homepage-nav, timeline-horizontal, video-promo).
 *
 * Route sheet: enqueued on the front page only, after the shell chain
 * (inc/assets.php, tsc_route_stylesheet()). Behaviour is app.js
 * (initHomeTimeline, initVideos).
 *
 * Values are the old dream.css rules that matched on the home page
 * (_reference/css-spec/dream-used.css, plus the 150em rules the README lists
 * in full), verbatim, rewritten mobile-first: a max-width rule became the
 * base rule and the wider widths restore what the old base rule said.
 * Vendor prefixes and the colour fallbacks Sass printed before each var()
 * are dropped.
 *
 * Class names are the old ones (homepage-hero-video, nav-button,
 * homepage-nav, timeline__*, timeline-nav-button, issues-video-promo,
 * video-title): the spec styles them. The timeline rules are scoped to
 * .homepage-timeline so they never meet the Meet Tim timeline, which uses
 * the same library class names.
 *
 * Image URLs are relative to this file, assets/css/routes/: "../../images/"
 * is assets/images/.
 *
 * Contents: Hero video · Image navigation · Timeline (vertical up to 768px,
 * horizontal from 769px) · Video promo.
 *
 * @package TSC
 */

/* ==========================================================================
   Hero video (02-molecules/jumbotron .homepage-hero-video)
   ==========================================================================
   The shared jumbotron, video and video-promo rules are in components.css;
   these are the hero's own: the menu button top right (from 48em, where the
   site header is hidden on the home page) and Share bottom left. */

.jumbotron.homepage-hero-video .nav-button {
	position: absolute;
	top: 1.875rem;
	right: 1rem;
	z-index: 2;
	display: none;
	visibility: hidden;
	padding: 0;
}

.jumbotron.homepage-hero-video .share-button {
	right: auto;
	left: 0.375rem;
}

/* The open mobile nav (body.nav-open) passes over the hero. */
.nav-open .jumbotron.homepage-hero-video {
	z-index: 0;
}

@media (min-width: 48em) {
	.jumbotron.homepage-hero-video .nav-button {
		display: inline-block;
		visibility: visible;
	}

	.nav-open .jumbotron.homepage-hero-video {
		z-index: var(--tsc-z-jumbotron);
	}
}

/* ==========================================================================
   Image navigation (components/_homepage-nav)
   ==========================================================================
   The Primary menu with its pictures: stacked below 64em, a collage from
   64em (each item's CSS classes move its link and label). */

.homepage-nav {
	position: relative;
	background-image: url("../../images/navbg.jpg");
	background-repeat: no-repeat;
	background-position: 50%;
	background-size: cover;
}

body:not(.nav-open) .homepage-nav {
	z-index: 3;
}

.homepage-nav-menu {
	flex-flow: row nowrap;
	height: 100%;
	margin: -1.875rem -0.625rem;
}

.homepage-nav-menu.nav {
	width: calc(100% + 1.25rem);
}

.homepage-nav .nav-item {
	position: relative;
	flex: 1 1 auto;
	min-width: 13.125rem;
	margin-bottom: 1.875rem;
}

.homepage-nav .nav-item.align-link-center {
	text-align: center;
}

.homepage-nav .nav-item.hide {
	display: none;
	visibility: hidden;
}

.homepage-nav .nav-link {
	position: relative;
	max-width: 21.875rem;
	padding: 0;
	margin: 0 auto;
	font-size: 1.375rem;
	font-weight: 600;
	line-height: 1;
	color: var(--white);
	text-shadow: 0.0625rem 0.0625rem 0.0625rem rgba(0, 0, 0, 0.6);
	transition-property: color, text-shadow, transform;
}

.homepage-nav .nav-link:focus,
.homepage-nav .nav-link:hover {
	text-shadow: 1px 1px 1px rgba(0, 0, 0, 0.5);
	transform: scale(1.1);
}

.homepage-nav .nav-item.mobile-max-width .nav-link {
	max-width: 14.375rem;
}

.homepage-nav .nav-item:nth-child(odd) .nav-link {
	top: auto;
	bottom: 0;
}

.homepage-nav .nav-item:nth-child(odd) .nav-link:focus,
.homepage-nav .nav-item:nth-child(odd) .nav-link:hover {
	color: var(--primary);
}

.homepage-nav .nav-item:nth-child(2n) .nav-link:focus,
.homepage-nav .nav-item:nth-child(2n) .nav-link:hover {
	color: var(--tertiary);
}

.homepage-nav .item-label {
	position: absolute;
	right: 2.8125rem;
	bottom: 1.875rem;
}

.homepage-nav .nav-item.short .item-label {
	max-width: 4.6875rem;
}

.homepage-nav .nav-item.left .item-label {
	right: auto;
	left: 3.75rem;
}

.homepage-nav .nav-item.left-label .item-label {
	text-align: left;
}

.homepage-nav .nav-item.center-label .item-label {
	position: absolute;
	top: 50%;
	right: auto;
	bottom: auto;
	left: 50%;
	display: inline-block;
	width: 100%;
	text-align: center;
	transform: translate(-50%, -50%);
}

.homepage-nav .nav-item.center-vertical .item-label {
	position: absolute;
	top: 50%;
	bottom: auto;
	display: inline-block;
	transform: translateY(-50%);
}

.homepage-nav .nav-item.center-horizontal .item-label {
	position: absolute;
	left: 50%;
	display: inline-block;
	transform: translateX(-50%);
}

.homepage-nav .nav-item.tilt-label-right .item-label {
	transform: rotate(3deg);
}

.homepage-nav .nav-item.tilt-label-right.center-vertical .item-label {
	transform: rotate(3deg) translateY(-50%);
}

@media (min-width: 48em) {
	.homepage-nav {
		z-index: 3;
	}

	.homepage-nav-menu {
		margin-right: -0.9375rem;
		margin-left: -0.9375rem;
	}

	.homepage-nav-menu.nav {
		width: calc(100% + 1.875rem);
	}
}

@media (min-width: 64em) {
	.homepage-nav {
		height: 26.25rem;
	}

	.homepage-nav-menu {
		margin-top: 0;
		margin-bottom: 0;
	}

	.homepage-nav .nav-item {
		margin-bottom: 0;
	}

	.homepage-nav .nav-item.align-link-right {
		text-align: right;
	}

	.homepage-nav .nav-link,
	.homepage-nav .nav-item.mobile-max-width .nav-link {
		max-width: 28.125rem;
	}

	.homepage-nav .nav-link {
		position: absolute;
		top: 0;
		right: 0;
		left: 0;
		margin: 0;
		font-size: 2rem;
		line-height: 1;
	}

	.homepage-nav .nav-item:nth-child(odd) .nav-link {
		bottom: -1rem;
	}

	.homepage-nav .nav-item:last-child .nav-link,
	.homepage-nav .nav-item.mobile-max-width:last-child .nav-link {
		right: 0;
		width: auto;
		max-width: none;
	}

	.homepage-nav .nav-item.align-link-center .nav-link {
		right: -25%;
		left: 50%;
		transform: translateX(-50%);
	}

	.homepage-nav .nav-item.align-link-center .nav-link:focus,
	.homepage-nav .nav-item.align-link-center .nav-link:hover {
		transform: translateX(-50%) scale(1.1);
	}

	.homepage-nav .nav-item.neg-margin-left .nav-link {
		left: -2.8125rem;
	}

	.homepage-nav .nav-item.neg-margin-left-lg .nav-link {
		left: -9.375rem;
	}

	.homepage-nav .nav-item.neg-margin-right .nav-link {
		right: -2.8125rem;
	}

	.homepage-nav .nav-item.neg-margin-top .nav-link {
		top: -12vw;
	}

	.homepage-nav .nav-item.neg-margin-top-small .nav-link {
		top: -2.25vw;
	}

	.homepage-nav .nav-item.wide .nav-link {
		width: 100%;
	}

	.homepage-nav .item-label {
		right: 3.75rem;
		bottom: 2.5rem;
	}

	.homepage-nav .nav-item.short .item-label {
		right: 40%;
	}

	.homepage-nav .nav-item.label-margin-top .item-label {
		margin-top: 1.5rem;
	}

	.homepage-nav .nav-item.label-margin-top-lg .item-label {
		margin-top: 3.75rem;
	}
}

@media (min-width: 90em) {
	.homepage-nav .nav-link,
	.homepage-nav .nav-item.mobile-max-width .nav-link {
		max-width: 29.6875rem;
	}
}

@media (min-width: 111.25em) {
	.homepage-nav .nav-item.neg-margin-top .nav-link {
		top: -14vw;
	}

	.homepage-nav .nav-item.neg-margin-top-small .nav-link {
		top: -20%;
	}
}

@media (min-width: 150em) {
	.homepage-nav {
		height: 33.75rem;
	}

	.homepage-nav .nav-link,
	.homepage-nav .nav-item.mobile-max-width .nav-link {
		max-width: 37.5rem;
	}

	.homepage-nav .nav-item.neg-margin-top .nav-link {
		top: -60%;
	}
}

/* ==========================================================================
   Timeline (libs/timeline/timeline.min.css + components/_timeline)
   ==========================================================================
   Up to 768px the library's vertical mode: the coral line 10px in, a dot
   and a pulsing marker per item, the cards stacked. From 769px (the library
   switched at a window wider than 768px, so 48em itself is still vertical)
   a horizontal track: --tsc-timeline-visible columns in view, the items
   alternating above and below the line, the rows as tall as the tallest
   card above and below it (CSS subgrid; app.js initHomeTimeline rounds
   them to whole pixels, as the library's measured heights were). The
   track scrolls with snapping; the Previous / Next buttons sit on the
   line in the 50px gutters, the divider runs between them. */

.homepage-timeline .timeline {
	position: relative;
	padding: 3.75rem 0;
}

/* The line. */
.homepage-timeline .timeline::before {
	position: absolute;
	top: 0;
	bottom: 0;
	left: 10px;
	z-index: 1;
	width: 2px;
	margin: 0;
	content: "";
	background-color: var(--tertiary);
}

.homepage-timeline .timeline__wrap {
	position: relative;
	z-index: 2;
	overflow: visible;
}

.homepage-timeline .timeline__items {
	position: relative;
}

.homepage-timeline .timeline__item {
	position: relative;
	left: 0;
	z-index: 2;
	width: 100%;
	padding: 0.625rem 0 0.625rem 40px;
	font-size: 1rem;
}

/* The dot. */
.homepage-timeline .timeline__item::after {
	position: absolute;
	top: 50%;
	right: -10px;
	left: 0.0625rem;
	z-index: 1;
	width: 20px;
	height: 20px;
	margin: 0;
	content: "";
	background-color: var(--tertiary);
	border: none;
	border-radius: 50%;
	transform: translateY(-50%);
}

/* The pulsing marker round the dot (the keyframes are in animations.css). */
.homepage-timeline .timeline__marker {
	position: absolute;
	top: 50%;
	right: -0.625rem;
	left: 0.0625rem;
	z-index: 2;
	display: block;
	width: 1.25rem;
	height: 1.25rem;
	border: 0.25rem double var(--tertiary);
	border-radius: 50%;
	transform: translateY(-50%);
	animation-name: scale-fade-mobile;
	animation-duration: 4s;
	animation-delay: 0.1875s;
	animation-iteration-count: infinite;
}

.homepage-timeline .timeline__marker::before,
.homepage-timeline .timeline__marker::after {
	position: absolute;
	top: 50%;
	left: 50%;
	display: block;
	width: 100%;
	height: 100%;
	content: "";
	border: 0.0625rem double var(--tertiary);
	border-radius: 50%;
	transform: translate(-50%, -50%);
	animation-name: grow-fade;
	animation-duration: 4s;
	animation-iteration-count: infinite;
}

.homepage-timeline .timeline__marker::before {
	border-width: 0.125rem;
}

.homepage-timeline .timeline__marker::after {
	animation-delay: 0.0625s;
}

/* The card. */
.homepage-timeline .timeline__content {
	position: relative;
	display: block;
	padding: 0.625rem;
	color: var(--tsc-timeline-text);
	background-color: var(--white);
	background-image: url("../../images/card-bg.jpg");
	background-size: cover;
	border: none;
	border-radius: 0.25rem;
	box-shadow: 0.125rem 0.125rem 0.5rem rgba(0, 0, 0, 0.2);
}

.homepage-timeline .timeline__link {
	display: block;
}

.homepage-timeline .timeline__link:focus,
.homepage-timeline .timeline__link:hover {
	text-decoration: none;
}

.homepage-timeline .timeline__image {
	width: 100%;
	margin-bottom: 1rem;
}

.homepage-timeline .timeline__label {
	display: block;
	font-family: var(--tsc-font-heading);
	font-size: 1.375rem;
	font-weight: 700;
	line-height: 1;
	color: var(--primary);
	text-align: center;
	text-transform: uppercase;
}

/* The reveal below the first screen (app.js, vertical layout only). */
.homepage-timeline .timeline__item.animated {
	opacity: 0;
	animation-duration: 1s;
	animation-fill-mode: both;
}

.homepage-timeline .timeline__item.fadeIn {
	animation-name: fadeIn;
}

/* Built for the horizontal track only. */
.homepage-timeline .timeline-divider,
.homepage-timeline .timeline-nav-button {
	display: none;
}

@media (min-width: 48em) {
	.timeline--wrapper.homepage-timeline {
		padding: 5rem 0;
	}

	.homepage-timeline .timeline {
		padding: 0;
	}

	.homepage-timeline .timeline__marker {
		left: auto;
	}
}

/* The horizontal track: the library's horizontal mode (window wider than 768px). */
@media (min-width: 48.0625em) {
	.homepage-timeline .timeline {
		display: grid;
		grid-template-columns: 3.125rem minmax(0, 1fr) 3.125rem;
		grid-template-rows: var(--tsc-timeline-rows, auto auto);
		overflow: hidden;
	}

	.homepage-timeline .timeline::before {
		content: none;
	}

	.homepage-timeline .timeline__wrap {
		display: grid;
		grid-row: 1 / 3;
		grid-column: 2;
		grid-template-rows: subgrid;
		grid-template-columns: minmax(0, 1fr);
		overflow: hidden;
	}

	.homepage-timeline .timeline__items {
		display: grid;
		grid-row: 1 / 3;
		grid-column: 1;
		grid-template-rows: subgrid;
		grid-auto-columns: calc(100% / var(--tsc-timeline-visible, 6));
		grid-auto-flow: column;
		overflow-x: auto;
		overflow-y: hidden;
		overscroll-behavior-x: contain;
		scroll-snap-type: x mandatory;
		scrollbar-width: none;
	}

	.homepage-timeline .timeline__items::-webkit-scrollbar {
		display: none;
	}

	.homepage-timeline .timeline__item {
		display: grid;
		grid-row: 1 / 3;
		grid-template-rows: subgrid;
		grid-template-columns: minmax(0, 1fr);
		width: auto;
		padding: 0;
		white-space: normal;
		scroll-snap-align: start;
	}

	/* Odd items above the line, even items below, 2.5rem clear of it. */
	.homepage-timeline .timeline__content {
		grid-row: 1;
		grid-column: 1;
		align-self: end;
		margin-bottom: 2.5rem;
	}

	.homepage-timeline .timeline__item:nth-child(even) .timeline__content {
		grid-row: 2;
		align-self: start;
		margin-top: 2.5rem;
		margin-bottom: 0;
	}

	/* Dot and marker on the line: the top of the second row. */
	.homepage-timeline .timeline__item::after,
	.homepage-timeline .timeline__marker {
		grid-row: 2;
		grid-column: 1;
		top: 0;
		right: auto;
		left: 50%;
		transform: translate(-50%, -50%);
	}

	.homepage-timeline .timeline__marker {
		animation-name: scale-fade;
	}

	.homepage-timeline .timeline-divider {
		position: absolute;
		top: 0;
		right: 40px;
		left: 40px;
		z-index: 1;
		display: block;
		grid-row: 2;
		grid-column: 1 / -1;
		height: 2px;
		background-color: var(--tertiary);
		transform: translateY(-50%);
	}

	.homepage-timeline .timeline-nav-button {
		position: absolute;
		top: 0;
		z-index: 10;
		display: block;
		grid-row: 2;
		box-sizing: border-box;
		width: 40px;
		height: 40px;
		padding: 0;
		cursor: pointer;
		background-color: var(--white);
		border: 2px solid var(--tertiary);
		border-radius: 50px;
		outline: 0;
		box-shadow: none;
		transform: translateY(-50%);
	}

	.homepage-timeline .timeline-nav-button:focus-visible {
		outline: 2px solid var(--primary);
		outline-offset: 2px;
	}

	.homepage-timeline .timeline-nav-button[aria-disabled="true"],
	.homepage-timeline .timeline-nav-button:disabled {
		pointer-events: none;
		opacity: 0.5;
	}

	.homepage-timeline .timeline-nav-button::before {
		position: absolute;
		top: 50%;
		left: 50%;
		display: block;
		width: 1rem;
		height: 1rem;
		content: "";
		transform: translateX(-50%) translateY(-50%);
	}

	.homepage-timeline .timeline-nav-button--prev {
		grid-column: 1;
		left: 0;
	}

	.homepage-timeline .timeline-nav-button--prev::before {
		background: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 500 500'%3E%3Cpath fill='%23F36B5B' d='M82.1 250.6L330.5 2.3 405 76.8 218.7 250.6 405 424.5 330.5 499 82.1 250.6z'/%3E%3C/svg%3E") 50% no-repeat;
	}

	.homepage-timeline .timeline-nav-button--next {
		grid-column: 3;
		right: 0;
	}

	.homepage-timeline .timeline-nav-button--next::before {
		background: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 500 500'%3E%3Cpath fill='%23F36B5B' d='M166.6 499l-74.5-74.5 186.3-173.9L92.1 76.8l74.5-74.5L415 250.6 166.6 499z'/%3E%3C/svg%3E") 50% no-repeat;
	}

	/* The reveal is vertical-only; a track item is always shown. */
	.homepage-timeline .timeline__item.animated {
		opacity: 1;
		animation: none;
	}
}

@media (min-width: 48.0625em) and (prefers-reduced-motion: no-preference) {
	.homepage-timeline .timeline__items {
		scroll-behavior: smooth;
	}
}

@media (min-width: 64em) {
	.homepage-timeline .timeline__item::after,
	.homepage-timeline .timeline__marker {
		width: 1.75rem;
		height: 1.75rem;
	}

	.homepage-timeline .timeline__label {
		font-size: 2.6875rem;
		line-height: 1.1860465116;
	}
}

/* ==========================================================================
   Video promo (components/_video-promo + 02-molecules/jumbotron
   .issues-video-promo)
   ==========================================================================
   "From Cotton to Congress": a 16:9 box, the title on its torn-paper strip
   over the top edge below 36em and half over the bottom edge from 36em,
   Share top right. The shared play / share rules are in components.css. */

.jumbotron.issues-video-promo .jumbotron--content {
	margin-top: 4.375rem;
}

body:not(.nav-open) .jumbotron.issues-video-promo {
	z-index: 3;
}

.jumbotron.issues-video-promo .video::before {
	display: block;
	width: 100%;
	padding-top: 56.25%;
	content: "";
}

.jumbotron.issues-video-promo .video-responsive {
	position: absolute;
	top: 0;
	right: 0;
	bottom: 0;
	left: 0;
	height: 100%;
	padding: 0;
	overflow: hidden;
}

.jumbotron.issues-video-promo .share-button {
	top: 1.875rem;
	bottom: auto;
}

.video-promo .video-title {
	position: absolute;
	top: -5.375rem;
	left: -0.625rem;
	z-index: 2;
	max-width: 36rem;
	margin: 0 0 0 -1rem;
	font-size: 2rem;
	line-height: 1;
	background-image: url("../../images/heading-bg.png");
	background-repeat: no-repeat;
	background-position: left -0.625rem center;
	background-size: cover;
}

.video-promo .video-title a {
	display: block;
	padding: 1.875rem 3.75rem;
	color: var(--primary);
}

.video-promo .video-title a:focus,
.video-promo .video-title a:hover {
	color: var(--tertiary);
	text-decoration: none;
}

@media (min-width: 36em) {
	.jumbotron.issues-video-promo .jumbotron--content {
		margin-top: 0;
	}

	.video-promo .video-title {
		top: auto;
		bottom: 0;
		left: -0.9375rem;
		font-size: var(--tsc-font-size-h2);
		line-height: var(--tsc-heading-line-height);
		transform: translateY(50%);
	}

	.video-promo .video-title a {
		padding-bottom: 4.375rem;
	}
}

@media (min-width: 48em) {
	body:not(.nav-open) .jumbotron.issues-video-promo {
		z-index: var(--tsc-z-jumbotron);
	}

	.video-promo .video-title {
		max-width: 23.4375rem;
	}
}

@media (min-width: 64em) {
	.video-promo .video-title {
		max-width: 33.75rem;
		font-size: 5.6875rem;
		line-height: 1;
	}
}

@media (min-width: 150em) {
	.video-promo .video-title {
		max-width: 45.875rem;
		font-size: 8.25rem;
	}

	/* The old 68px cap on play icons stopped at 150em; only this 220px icon notices. */
	.video-promo .video-promo--play-icon {
		max-width: none;
		max-height: none;
	}
}