/* Variables
--------------------------------------------- */
:root {
	/* Script Helpers */
	--script-pin-pos:			184px;
}


/* Core Layout
--------------------------------------------- */
main {
	margin-top: var(--layout-section-margin);
}
section:not(#mast) {
	margin-bottom: var(--layout-section-margin);
	padding-top: var(--layout-margin);
}


/* Nav Bar
--------------------------------------------- */
body:not(.pinned) #top-nav .d-sign-up {
	opacity: 0;
	pointer-events: none;
}
#top-nav .d-log-in {
	padding-right: 0;
}


/* Cards
--------------------------------------------- */
body.desktop .app-store-badge.luminary {
	cursor: default !important;
}
body:not(.desktop) .app-store-badge.luminary .desktop-help {
	display: none;
}
body.desktop .app-store-badge.luminary .desktop-help {
	--icon-size: 2.84rem;	/* Defined in base.css -> .card.app-store-badge.condensed .app-icon */
	--left-pos: calc(var(--layout-padding) + var(--icon-size) + var(--layout-padding));
	
	align-self: middle;
	color: rgb(var(--color-midnight));
	display: flex;
	flex-direction: column;
	height: 100%;
	justify-content: center;
	left: 0;
	margin: 0;
	opacity: 0;
	padding-left: var(--left-pos);
	padding-right: var(--layout-padding);
	pointer-events: none;
	position: absolute;
	top: 50%;
	transition: opacity .21s ease, top .39s ease;
	width: 100%;
}
body.desktop .app-store-badge.luminary:hover .desktop-help {
	opacity: 1;
	top: 0;
}

body.desktop .app-store-badge.luminary h2 {
	position: relative;
	top: 0;
	transition: opacity .21s ease, top .39s ease;
}
body.desktop .app-store-badge.luminary:hover h2 {
	opacity: 0;
	top: -1em;
}


/* Footer
--------------------------------------------- */
footer .footer-links {
	display: none;
}
footer nav {
    margin-bottom: -1em;
}
footer .logo {
    width: calc(var(--logo-height) / var(--logo-ratio));
}
footer .footer-links + .footer-group {
    border-top: 1px solid var(--color-bevel);
    margin-top: 1em;
}

body:not(.desktop) footer {
	padding-bottom: calc( (var(--layout-margin) * 2) + ((var(--button-large) + var(--layout-section-margin)) * 2) );
}


/* Mini Audio Controls
--------------------------------------------- */
body:not(.desktop) .audio-ctrl .timer span {
	top: calc((var(--button-large) / 2 * -1) + 1px);
}


/* Mast
--------------------------------------------- */
body:not(.desktop):not(.preMobile) #mast .show-card {
	background: transparent;
	border-radius: 0;
	height: calc( 100vw * (4/3) );
	padding: 0 var(--layout-margin) var(--layout-margin);
}
body:not(.desktop):not(.preMobile) #mast .show-card .card-hero {
	border-radius: 0;
}
body:not(.desktop):not(.preMobile) #mast .show-card:after {
	display: none;
}
body:not(.desktop):not(.preMobile) #mast .card-branding .key-art {
	margin-right: 0;
}
body:not(.desktop) #mast .card-branding .key-art {
	/*	Forcing slightly larger key art in the main
		header card on mobile. */
	--layout-art-med: 100px;
}

body:not(.desktop):not(.preMobile) #mast .card-branding .key-art {
	filter: blur(0px);
}

body:not(.desktop):not(.preMobile) #mast .card-hero {
	height: auto;
	left: 0;
	overflow: visible;
	position: fixed;
	top: 0;
	width: 100%;
	z-index: -1;
}
body:not(.desktop):not(.preMobile) #mast .card-actions {
	display: none;
}
body:not(.desktop):not(.preMobile) #mast .show-card .gradients {
	height: calc(100% + 1px);
}

body:not(.pinned) #mast .show-card .branding-contents .show-branding {
	max-width: var(--layout-card);
}

body:not(.desktop):not(.preMobile) #mast .show-card .gradients .tint {
	background: none !important;
}
.sizzle-long {
	display: none;
}
#mast .show-card .card-actions {
	display: none;
}

body:not(.desktop):not(.preMobile) .card-group .card + .card {
	margin-top: 1em;
}

.card.app-store-badge {
	flex: 1;
	max-width: none;
}
.card.app-store-badge.with-copy {
	flex-direction: column;
}
.card.app-store-badge > .flex {
	align-items: center;
	width: 100%;
}
.card.app-store-badge.with-copy .description {
	color: rgb(var(--color-altText));
    font-size: var(--font-size-small);
	margin-top: var(--layout-padding);
	width: 100%;
}
.card.app-store-badge.luminary .description {
	color: rgba(var(--color-midnight), .69);
}

#desk-hero {
	height: 100vh;
	left: 0;
	overflow: hidden;
	pointer-events: none;
	position: absolute;
	top: 0;
	width: 100%;
}
#desk-hero .art-wrap {
	height: calc( 100vw * (4/3) );
	left: 0;
	position: absolute;
	top: 0;
	width: 100%;
}
#desk-hero img, body:not(.desktop) #desk-hero .gradients .dark {
	display: none;
}
#desk-hero .gradients {
	z-index: 0;
}
#desk-hero .gradients .tint {
	background: none !important;
}
#desk-hero svg {
	bottom: calc( (93vw / -2) + var(--layout-margin) + var(--layout-art-med) );
	filter: blur(48px);
	height: 93vw;
	position: absolute;
	right: -24vw;
	width: 84vw;
}
#desk-hero svg polygon {
	fill: rgba(var(--color-show-tint), .84);
}

#fixed-cta .wrap .btn:last-child {
	margin: 0;
}
body:not(.desktop) #fixed-cta .wrap {
	display: flex;
	flex-direction: column;
	gap: var(--layout-padding);
}
body:not(.desktop) #fixed-cta .btn {
	flex: 0;
	font-size: .93rem;
	margin: 0;
	white-space: nowrap;
}
body:not(.desktop) #fixed-cta .btn:not(.audio-ctrl) {
	flex: 1;
}
body:not(.desktop) #fixed-cta .btn.audio-ctrl {
	min-width: 120px;
}
body:not(.desktop) #fixed-cta .btn.audio-ctrl.playing {
	min-width: calc(var(--button-large) + 7rem);
}

body:not(.desktop).cta-pinned #fixed-cta {
	background-color: rgba(var(--color-midnight), .84);
	background-image: linear-gradient(180deg, rgba(var(--color-midnight), .21) 0%, rgba(var(--color-midnight), .84) 100%);
	border-radius: var(--layout-radius-lrg) var(--layout-radius-lrg) 0 0;
	bottom: 0;
	box-shadow: inset var(--color-bevel) 0 1px 0, rgba(var(--color-midnight), .48) 0 -3px 7px;
	left: 0;
	padding: var(--layout-margin) 0;
	position: fixed;
	width: 100%;
	z-index: 1000;
}
@supports (backdrop-filter: blur(5px)) or (-webkit-backdrop-filter: blur(5px)) {
	body:not(.desktop).cta-pinned #fixed-cta {
		background-color: rgba(var(--color-midnight), .34);
		-webkit-backdrop-filter: saturate(120%) blur(21px);
		backdrop-filter: saturate(120%) blur(21px);
	}
}

body:not(.desktop).cta-pinned #fixed-cta {
	animation-name: ctaFade;
	animation-duration: .34s;
	animation-timing-function: ease;
}
@keyframes ctaFade {
	0% {
		opacity: 0;
	}
	100% {
		opacity: 1;
	}
}


/* Track List
--------------------------------------------- */
.track-list {
	
}
.track-list li, .track-list + .divider, .btn.show-all + .divider {
	border-top: .5px solid var(--color-bevel);
}
.track-list li .track {
	padding: var(--layout-padding) 0;
}
.track-list li .track, .track-list li .meta {
	align-items: center;
	display: flex;
}

.track-list .key-art:not(:empty) {
	align-self: flex-start;
	margin: .5rem var(--layout-padding) 0 0;
}

.track-list .contents {
	flex: 1;
	padding: .5rem 0;
}
.track-list .badge:not(:empty) {
	margin-right: .5rem;
}
.track-list .badge:not(:empty) + .badge:not(:empty) {
	margin-left: 0;
}

.track-list .meta .details {
	display: flex;
}
.track-list .meta .details span:not(:empty) + span:not(:empty):before,
.track-list .meta .progress:empty + .details:not(:empty) + .time:not(:empty):before {
	content: '•';
	margin-right: .375rem;
	padding-left: .375rem;
}

.track-list .description {
    display: -webkit-box;
	font-size: var(--font-size-small);
	margin: 0;
	overflow: hidden;
	padding-top: var(--layout-padding);
	-webkit-box-orient: vertical;
	-webkit-line-clamp: 2;
}
.track-list .description p:last-child {
	margin: 0;
}
.track-list .ac-item .contents {
	margin-bottom: calc(var(--layout-padding) * -1);
}
.track-list .ac-item .description:after {
	content: '';
	display: block;
	height: .5rem;
}
.track-list .description em.quote {
	display: block;
	margin: calc(var(--layout-padding) * .5) 0 var(--layout-padding) 0;
}
.track-list .description cite {
	display: block;
	margin-left: 1em;
}
.track-list .description:empty {
	display: none;
}

body:not(.desktop) .track-list .description .quote,
body:not(.desktop) .track-list .description cite {
	display: inline;
}
body:not(.desktop) .track-list .description .quote {
	border: none;
	padding-left: 0;
}
body:not(.desktop) .track-list .description cite {
	margin: 0;
}
body:not(.desktop) .track-list .description cite:after {
	content: ' ...';
}

.track-list .controls {
	align-self: flex-start;
	margin-top: .25rem;
	padding-left: var(--layout-padding);
}
.track-list .controls:not(:empty) {
	display: flex;
	flex-direction: column;
	height: 100%;
	width: 62px;
}

.track-list li.paywalled, .track-list li.paywalled .badge.tag {
	color: rgba(var(--color-white), .69);
}
.track-list li.paywalled .badge.tag {
	box-shadow: inset rgba(var(--color-white), .69) 0 0 0 1px;
}

.tracks.condensed .track-list li:nth-child(n+6),
.tracks.extra-condensed .track-list li:nth-child(n+4) {
	display: none;
}
.track-list li.fade-out,
.tracks.condensed .track-list li:nth-child(5),
.tracks.extra-condensed .track-list li:nth-child(3) {
	position: relative;
}
.track-list li.fade-out:after,
.tracks.condensed .track-list li:nth-child(5):after,
.tracks.extra-condensed .track-list li:nth-child(3):after,
.track-list + .divider.fade-out:after, .btn.show-all + .divider.fade-out:after {
    background-image: linear-gradient(0deg, rgba(var(--color-midnight), 1) 0%, rgba(var(--color-midnight), 0) 100%);
    content: '';
    height: calc(100% - .5px);
    left: calc(var(--layout-margin) * -1);
	pointer-events: none;
    position: absolute;
    bottom: .5px;
    width: calc(100% + (var(--layout-margin) * 2));
}

.track-list + .divider, .btn.show-all + .divider {
	color: rgb(var(--color-spotlight));
	font-size: 1rem;
	font-weight: 700;
	line-height: var(--button-large);
	margin-bottom: 1rem;
}
body.desktop .tracks .show-all, body.desktop .track-list + .show-all {
	width: auto;
}
.tracks:not(.condensed):not(.extra-condensed) .show-all {
	display: none;
}

.track-list + .divider.fade-out, .btn.show-all + .divider.fade-out {
	color: rgb(var(--color-white));
	position: relative;
}
.track-list + .divider.fade-out:after, .btn.show-all + .divider.fade-out:after {
	background-image: linear-gradient(0deg, rgba(var(--color-midnight), 1) 0%, rgba(var(--color-midnight), 1) 1rem, rgba(var(--color-midnight), 0) 100%);
	bottom: -1rem;
	height: calc(100% + 4rem);
}



/* Galleries & Sliders
--------------------------------------------- */
.gallery-wrap, .quotes-wrap {
	margin: 0 calc(var(--layout-margin) * -1);
	position: relative;
}
.gallery-wrap .art-wrap figure img {
	border-radius: var(--layout-radius-sml);
	overflow: hidden;
	position: relative;
}

.gallery-wrap figcaption {
	border-left: 2px solid var(--color-bevel);
	color: rgba(var(--color-white), .39);
	font-size: var(--font-size-fine);
	margin-top: var(--layout-padding);
	padding-left: var(--layout-padding);
	padding-right: var(--layout-padding);
}

.quotes-wrap .card {
	margin-bottom: 0;
}
.pullquote p {
	position: relative;
}
.pullquote p:before {
	content: '“';
	font-family: Georgia, serif;
	font-size: 8.4rem;
	font-weight: normal;
	left: -1.2rem;
	opacity: .12;
	position: absolute;
	top: 2.1rem;
	z-index: 0;
}


/* Video
--------------------------------------------- */
.video-ctrl {
	--main-col-width: calc( 100vw - (var(--layout-margin) * 2) );
	
	background: rgb(var(--color-dusk));
	border-radius: var(--layout-radius-sml);
	height: calc(var(--main-col-width) * var(--video-ratio));
	overflow: hidden;
	position: relative;
	width: 100%;
}
.video-ctrl video, .video-ctrl iframe {
	display: block;
	height: 100%;
	width: 100%;
	z-index: 10;
}

.vid-controls {
	background-image: linear-gradient(180deg, rgba(0,0,0,.21) 0, rgba(0,0,0,.21) 12%, rgba(0,0,0,.12) 34%, rgba(0,0,0,.24) 50%, rgba(0,0,0,.12) 75%, rgba(0,0,0,.43) 84%, rgba(0,0,0,.62) 100%);
	height: 100%;
	left: 0;
	opacity: 0;
	position: absolute;
	top: 0;
	transition: opacity .34s ease;
	width: 100%;
	z-index: 20;
}
body:not(.desktop) .video-ctrl.show-controls .vid-controls {
	opacity: 1;
}
body:not(.desktop) .video-ctrl:not(.show-controls) .vid-controls {
	pointer-events: none;
}

.vid-controls .play {
	--btn-size: 66px;
	
	height: var(--btn-size);
	left: 50%;
	margin: calc(var(--btn-size) / -2) 0 0 calc(var(--btn-size) / -2);
	position: absolute;
	top: 50%;
	width: var(--btn-size);
}
.vid-controls .play .icon {
	height: 100%;
	width: 100%;
}

.vid-controls .progress-gutter, .vid-controls .timer {
	left: var(--layout-margin);
	position: absolute;
	width: calc(100% - (var(--layout-margin) * 2));
}
.vid-controls .progress-gutter {
	--gutter-height: 4px;
	
	background: rgba(var(--color-white), .21);
	border-radius: calc(var(--gutter-height) / 2);
	bottom: calc(var(--layout-margin) + var(--gutter-height) + .5rem);
	height: var(--gutter-height);
	overflow: hidden;
}
.vid-controls .progress {
	background: rgb(var(--color-show-tint));
	height: 100%;
	left: 0;
	position: absolute;
	top: 0;
}
.vid-controls .timer {
	bottom: calc(var(--layout-margin) - .5rem);
	display: flex;
}
.vid-controls span {
	color: rgba(var(--color-altText));
	font-size: .65rem;
	width: 50%;
}
.vid-controls span.total {
	text-align: right;
}

.video-ctrl:not(.started) {
	cursor: pointer;
}
.video-ctrl:not(.started) .vid-controls {
	display: none !important;
}


/* Media Queries
--------------------------------------------- */

/* Desktop */
@media only screen and (min-width:1024px) {
	:root {
		--layout-peek:		var(--layout-section-margin);
		--max-margin:		max( var(--layout-margin), calc(((100vw - var(--layout-max)) / 2) + var(--layout-margin)) );
	}
	
	/* Core Layout
	--------------------------------------------- */
	main, main.flush {
		--layout-column: calc(var(--layout-card) + (var(--layout-margin) * 2));
    	margin-left: var(--layout-column);
    	padding-top: calc(100vh - (var(--layout-nav) * 2) - var(--layout-peek));
		
		position: relative;
		z-index: 300;
	}
	main .wrap {
		max-width: calc( 100vw - (var(--max-margin) * 2) - var(--layout-column));
		padding: 0;
	}
	
	section:not(#mast):first-child {
		padding-top: 0;
	}
	
	
	/* Mast
	--------------------------------------------- */
	#mast {
		width: var(--layout-card);
	}
	#hero-wrap {
		--sidebar-height: calc(100vh - (var(--layout-nav) * 2));
		
		display: flex;
		flex-direction: column;
		height: var(--sidebar-height);
		justify-content: flex-start;
		left: var(--max-margin);
		top: var(--layout-nav);
		position: fixed;
		z-index: 500;
	}
	#mast .show-card {
		background: transparent;
		z-index: 100;
	}
	
	body:not(.pinned) #hero-wrap {
		
		justify-content: center;
		width: 640px;
	}
	body:not(.pinned) #mast .show-card {
		height: auto;
		margin: 0;
		padding: 0;
		width: 100%;
	}
	body:not(.pinned) #mast .show-card .card-contents {
		display: block;
		height: auto;
		margin-bottom: calc(var(--layout-margin) * 2);
		top: var(--layout-art-lrg);
	}
	body:not(.pinned) #mast .show-card .branding-contents .show-branding {
		margin-bottom: calc(var(--layout-padding) * 2);
		width: var(--layout-card);
	}
	body:not(.pinned) #mast .show-card .card-branding {
		position: static;
	}
	body:not(.pinned) #mast .show-card .branding-contents {
		padding-right: calc(var(--layout-margin) * 3);
	}
	body:not(.pinned) #mast .show-card .key-art {
		bottom: calc(100% + (var(--layout-margin) * 2));
		height: calc(var(--layout-art-lrg) * 2);
		left: 0;
		position: absolute;
		width: calc(var(--layout-art-lrg) * 2);
	}
	
	#desk-hero {
		height: calc(100vh - var(--layout-peek));
		position: fixed;
	}
	#desk-hero .art-wrap {
		height: 100%;
		opacity: .9;
	}
	#desk-hero .art-wrap img {
		display: block;
		object-fit: cover;
		height: calc(100% - 1px);
		width: 100%;
	}
	#desk-hero svg {
		display: none;
	}
	#desk-hero .gradients .dark {
		background-image:
			linear-gradient(39deg, rgba(var(--color-midnight), .93) 0%, rgba(var(--color-midnight), 0) 69%, rgba(var(--color-midnight), 0) 100%),
			linear-gradient(39deg, rgba(var(--color-midnight), .69) 0%, rgba(var(--color-midnight), 0) 69%, rgba(var(--color-midnight), 0) 100%),
			linear-gradient(21deg, rgba(var(--color-midnight), .57) 0%, rgba(var(--color-midnight), 0) 69%, rgba(var(--color-midnight), 0) 100%),
			linear-gradient(0deg, rgba(var(--color-midnight), 1) 0%, rgba(var(--color-midnight), 0) 12%, rgba(var(--color-midnight), 0) 100%),
			linear-gradient(0deg, rgba(var(--color-midnight), 1) 0%, rgba(var(--color-midnight), 0) 34%, rgba(var(--color-midnight), 0) 100%);
	}
	
	#fixed-cta {
		position: relative;
		top: var(--layout-art-lrg);
		width: var(--layout-card);
		z-index: 150;
	}
	#fixed-cta .wrap {
		padding: 0;
	}
	
	/* Hide/Show */
	body:not(.pinned) #mast .show-card .card-extras h3, body:not(.pinned) .sizzle-short, body:not(.pinned) #mast .show-card .card-actions {
		display: none;
	}
	body:not(.pinned) .sizzle-long {
		display: block;
	}
	
	/* Transitions */
	body:not(.pinned) #mast .show-card .card-hero, body:not(.pinned) #mast .show-card:after {
		opacity: 0;
	}
	
	body.pinned #hero-wrap {
		padding-top: var(--layout-margin);
	}
	body.pinned #mast .show-card .card-hero, body.pinned #mast .show-card:after {
		transition: opacity .34s ease;
	}
	body.pinned #mast .show-card .card-contents {
		animation-name: cardDrift;
		animation-duration: .48s;
		animation-timing-function: ease;
		top: 0;
	}
	@keyframes cardDrift {
		0% {
			opacity: 0;
			top: calc(var(--layout-peek) * -2.1);
		}
		100% {
			opacity: 1;
			top: 0;
		}
	}
	
	body.pinned #fixed-cta {
		animation-name: ctaDrift;
		animation-duration: .34s;
		animation-timing-function: ease;
		top: 0;
	}
	@keyframes ctaDrift {
		0% {
			top: calc(var(--layout-peek) * -1.5);
		}
		100% {
			top: 0;
		}
	}
	
	
	/* Cards
	--------------------------------------------- */
	.card-group {
		display: flex;
		gap: var(--layout-margin);
	}
	.card-group .card.luminary.with-copy {
		flex: 1.34;
	}
	.card-group .card.apple-podcasts.with-copy {
		flex: 1;
	}
	
	
	/* Track List
	--------------------------------------------- */
	.track-list .key-art {
		--layout-art-sml: 75px;
		
		margin-top: .5rem;
	}
	.track-list .controls {
		align-self: flex-start;
	}
	.track-list .controls:not(:empty) {
		width: 84px;
	}
	
	.track-list .track .title {
		transition: color .21s ease;
	}
	.track-list .track:hover .title {
		color: rgb(var(--color-noon));
	}
	.track-list li.paywalled .track .badge {
		transition: background .21s ease, color .21s ease;
	}
	.track-list li.paywalled .track:hover .badge.tag {
		background: rgb(var(--color-spotlight));
		box-shadow: inset rgb(var(--color-spotlight)) 0 0 0 1px;
		color: rgb(var(--color-midnight));
	}
	
	
	/* Galleries & Sliders
	--------------------------------------------- */
	.gallery-wrap, .quotes-wrap {
		margin-left: calc(var(--layout-margin) * -1);
		margin-right: calc(var(--max-margin) * -1);
		position: relative;
	}
	.gallery-wrap:after, .quotes-wrap:after {
		background-image: linear-gradient(90deg, rgba(var(--color-midnight), 1) 0%, rgba(var(--color-midnight), 0) 100%);
	
		content: '';
		height: 100%;
		left: 0;
		position: absolute;
		top: 0;
		width: var(--layout-margin);
	}
	
	.gallery-wrap, .quotes-wrap {
		--container-width: calc(100vw - (var(--max-margin) * 2) - var(--layout-card) - (var(--layout-margin) * 2));
	}
	.gallery-wrap .swipe-items {
		--swipe-item-width: var(--container-width);
	
		width: calc( (var(--swipe-item-width) * var(--slide-count)) + (var(--layout-padding) * (var(--slide-count) - 1)) + var(--max-margin) + var(--layout-margin) );
	}
	.quotes-wrap .swipe-items {
		--items-in-view: 2;
		
		--swipe-item-width: calc( (var(--container-width) - (var(--layout-padding) * (var(--items-in-view) - 1))) / var(--items-in-view) );
		
		width: calc( (var(--swipe-item-width) * var(--slide-count)) + (var(--layout-padding) * (var(--slide-count) - 1)) + (var(--max-margin) + var(--layout-margin)) );
	}
	
	.gallery-wrap .swipe-items li, .quotes-wrap .swipe-items li {
		scroll-snap-align: start;
		width: var(--swipe-item-width)
	}
	
	
	/* Video
	--------------------------------------------- */
	.video-ctrl {
		--main-col-width: calc(100vw - (var(--max-margin) * 2) - (var(--layout-margin) * 2) - var(--layout-card));
		border-radius: var(--layout-radius-med);
	}
	.video-ctrl:hover .vid-controls {
		opacity: 1;
	}
	
	.vid-controls .play {
		--btn-size: 84px;
	}
	.vid-controls .progress-gutter {
		bottom: calc(var(--layout-margin) + var(--gutter-height) + 1rem);
	}
	.vid-controls .timer {
		bottom: var(--layout-margin);
	}
}

/* Narrow Desktop Adjustments */
@media only screen and (min-width:1024px) and (max-width:1460px) {
	body.desktop .card-group.with-copy {
		display: block;
	}
}
@media only screen and (min-width:1024px) and (max-width:1280px) {
	/* Variables
	--------------------------------------------- */
	:root {
		--layout-max:				1600px;
		
		/* Spacing */
		--layout-margin:			30px;	/* "Outer" element spacing. */
		--layout-padding:			14px;	/* "Inner" element spacing. */
		--layout-card-padding:		26px;	/* Card widget margin. ... varying this from the primaries helps keep better visual rhythm. */
		--layout-section-margin:	50px;	/* Vertical rhythm, between bottom of one section and the following header. */
		
		--layout-sidebar:			390px;
		
		/* Show Cards */
		--layout-card:				390px;
	}
	
	
	/* Core Page Setup
	--------------------------------------------- */
	html, body {
	    font-size: 17px;
	}
}
@media only screen and (min-width:1024px) and (max-width:1140px) {
	/* Cards
	--------------------------------------------- */
	.card-group {
		flex-direction: column;
		gap: 0;
	}
	.card-group .card {
		width: 100%;
	}
	.card-group .card + .card {
		margin-top: 1em;
	}
}

/* Short Desktop Adjustments */
@media only screen and (min-width:1024px) and (min-height:1099px) {
	footer {
		z-index: 501;
	}
}
@media only screen and (min-width:1024px) and (max-height:1100px) {
	body.preMobile footer, .loaded footer {
		--layout-column: calc(var(--layout-card) + (var(--layout-margin) * 2));
		
		background: transparent;
		margin-left: var(--layout-column);
		margin-top: calc(var(--layout-section-margin) + var(--layout-margin));
		padding-bottom: var(--layout-nav);
	}
	body.preMobile footer .wrap {
		border-top: 1px solid var(--color-bevel);
		max-width: calc( 100vw - (var(--max-margin) * 2) - var(--layout-column));
		padding: 0;
	}
	body.preMobile footer .footer-links + .footer-group {
		border-top: none;
	}
}
@media only screen and (min-width:1024px) and (max-height:860px) {
	/* Variables
	--------------------------------------------- */
	:root {
		--layout-max:				1600px;
		
		/* Spacing */
		--layout-margin:			30px;	/* "Outer" element spacing. */
		--layout-padding:			14px;	/* "Inner" element spacing. */
		--layout-card-padding:		26px;	/* Card widget margin. ... varying this from the primaries helps keep better visual rhythm. */
		--layout-section-margin:	50px;	/* Vertical rhythm, between bottom of one section and the following header. */
		
		--layout-sidebar:			390px;
		
		/* Show Cards */
		--layout-card:				390px;
	}
	
	
	/* Core Page Setup
	--------------------------------------------- */
	html, body {
	    font-size: 17px;
	}
	
	
	/* Mast
	--------------------------------------------- */
	body:not(.pinned) #mast .show-card .key-art {
		--layout-art-lrg: 100px;
	}
}
@media only screen and (min-width:1024px) and (max-height:760px) {
	/* Mast
	--------------------------------------------- */
	#fixed-cta .wrap {
		display: flex;
		gap: var(--layout-padding);
	}
	#fixed-cta .btn {
		display: table-cell;
		flex: 1;
		font-size: .93rem;
		margin: 0;
		vertical-align: middle;
	}
	#fixed-cta .btn .stack-hide {
		display: none;
	}
}
@media only screen and (min-width:1024px) and (max-height:730px) {
	/* Mast
	--------------------------------------------- */
	body:not(.pinned) #hero-wrap {
		max-width: 840px;
		width: 48%;
	}
	body:not(.pinned) #mast .show-card {
		--layout-art-lrg: calc( (var(--layout-card) - var(--layout-padding)) / 2 );
	}
	body:not(.pinned) #mast .show-card .branding-contents {
		padding-left: calc( var(--layout-art-lrg) + var(--layout-margin) + var(--layout-padding) );
	}
	body:not(.pinned) #mast .show-card .branding-contents .show-branding {
		width: auto;
	}
	body:not(.pinned) #mast .show-card .card-extras {
		padding-left: calc( var(--layout-art-lrg) + var(--layout-margin) + var(--layout-padding) );
	}
	body:not(.pinned) #mast .show-card .card-contents {
		top: 0;
	}
	body:not(.pinned) #fixed-cta {
		top: 0;
	}
	
	body:not(.pinned) #mast .show-card .key-art {
		--layout-art-lrg: calc( (var(--layout-card) - var(--layout-padding)) / 2 );
		
		bottom: 0;
		height: var(--layout-art-lrg);
		left: 0;
		margin: 0 calc(var(--layout-margin) + var(--layout-padding)) 0 0;
		width: var(--layout-art-lrg);
	}
}

/* No-Man's Land (too small for desktop, not yet mobile) */
@media only screen and (max-width:1023px) and (min-width:570px) {
	/* Variables
	--------------------------------------------- */
	:root {
		--layout-card:				390px;
	}
	
	/* Cards
	--------------------------------------------- */
	.card-group {
		display: flex;
		gap: var(--layout-margin);
	}
	.card-group .card.luminary.with-copy {
		flex: 1.34;
	}
	.card-group .card.apple-podcasts.with-copy {
		flex: 1;
	}
	
	/* Mast
	--------------------------------------------- */
	#desk-hero {
		display: none;
	}
	
	#hero-wrap {
		padding: calc(var(--layout-nav) + var(--layout-margin)) var(--layout-margin) 0 var(--layout-margin);
	}
	#hero-wrap .show-card {
		height: calc( var(--layout-card) * (4/3) );
		width: var(--layout-card);
	}
	.preMobile #mast .card-hero {
		opacity: 1 !important;
		transform: none !important;
	}
	
	#fixed-cta .wrap {
		max-width: var(--layout-card);
		padding: 0;
	}
	.cta-pinned #fixed-cta .wrap {
		max-width: none;
		padding: 0 var(--layout-margin);
	}
	.cta-pinned #fixed-cta .btn {
		flex: 1 !important;
	}
	body:not(.cta-pinned) #fixed-cta .wrap {
		padding-bottom: var(--layout-section-margin);
	}
	
	/* Header */
	#hero-wrap .card,
	body:not(.cta-pinned) #fixed-cta .wrap {
		margin-left: auto;
		margin-right: auto;
	}
	
	/* Related Content */
	#related-content > .wrap > h2, #related-content > .wrap > .subhead {
		text-align: center;
	}
	#related-content .subhead .m-br {
		display: inline;
		padding-left: .125em;
	}
	#related-content .show-card {
	    --layout-margin: 20px;
	    --layout-padding: 12px;
	    --button-small: 2.1em;
	    height: calc(var(--layout-card) * 1.3334);
	    font-size: 15px;
		margin-left: auto;
		margin-right: auto;
	    width: var(--layout-card);
	}
	
	/* Scrollable Related Content */
	#related-content .wrap {
		padding-right: 0;
	}
	.inline-cards-wrap .card:last-child {
		margin-right: var(--layout-margin) !important;
	}
}

@media only screen and (min-width: 570px) {
	.inline-cards-contain {
		margin-left: calc(var(--layout-margin) * -1);
		margin-right: calc(var(--max-margin) * -1);
		position: relative;
	}
	.inline-cards-contain:after {
		background-image: linear-gradient(90deg, rgba(var(--color-midnight), 1) 0%, rgba(var(--color-midnight), 0) 100%);
		content: '';
		height: 100%;
		left: 0;
		position: absolute;
		top: 0;
		width: var(--layout-margin);
		z-index: 50;
	}

	.inline-cards {
		height: calc((var(--layout-card) * 1.3334) + 1px);
	
		max-width: none;
		overflow-x: scroll;
		overflow-y: visible;
		position: relative;
		scroll-behavior: smooth;
		scrollbar-width: none;
	}
	.inline-cards::-webkit-scrollbar {
		display: none;
	}

	.inline-cards-wrap {
		display: flex;
	    flex-direction: row;
	    gap: var(--layout-margin);
	    height: 100%;
	    justify-content: center;
	    /*left: max( var(--layout-margin), calc(((100vw - var(--layout-max)) / 2)) );*/
		padding-left: var(--layout-margin);
		padding-right: max( var(--layout-margin), calc(((100vw - var(--layout-max)) / 2) + var(--layout-margin)) );
	    position: absolute;
	    top: 0;
	}
}