/* Web Fonts
--------------------------------------------- */
@font-face {
	font-family: "Patron";
	src: url("/_f/baseline-adjusted/Patron-Regular.woff2") format("woff2"), url("/_f/baseline-adjusted/Patron-Regular.woff") format("woff");
	font-display: auto;
	font-style: normal;
	font-weight: normal;
	font-stretch: normal;
}
@font-face {
	font-family: "Patron";
	src: url("/_f/baseline-adjusted/Patron-Bold.woff2") format("woff2"), url("/_f/baseline-adjusted/Patron-Bold.woff") format("woff");
	font-display: auto;
	font-style: bold;
	font-weight: bold;
	font-stretch: normal;
}
@font-face {
	font-family: "Patron";
	src: url("/_f/baseline-adjusted/Patron-Italic.woff2") format("woff2"), url("/_f/baseline-adjusted/Patron-Italic.woff") format("woff");
	font-display: auto;
	font-style: italic;
	font-weight: normal;
	font-stretch: normal;
}


/* Variables
--------------------------------------------- */
:root {
	/* Core Colorway */
	--color-midnight:			18, 28, 48;
	--color-dusk:				25, 42, 72;
	--color-dawn:				52, 80, 134;
	--color-noon:				95, 135, 230;
	--color-spotlight: 			255, 229, 0;
	--color-white:				255, 255, 255;
	--color-error:				212, 3, 99;
	--color-success:			39, 184, 139;
	
	--color-show-tint:			52, 80, 134;
	--color-apple-podcasts:		#852dc4;
	
	/* Core Text */
	--color-mainText: 			var(--color-white);
	--color-altText: 			var(--color-white), .69;
	--color-subtleText:			var(--color-white), .39;
	--color-link:				rgb(var(--color-noon));
	--color-bevel:				rgba(var(--color-white), .12);
	
	/* Spacing */
	--layout-margin:			20px;	/* "Outer" element spacing. */
	--layout-padding:			12px;	/* "Inner" element spacing. */
	--layout-card-padding:		25px;	/* Card widget margin. ... varying this from the primaries helps keep better visual rhythm. */
	--layout-section-margin:	30px;	/* Vertical rhythm, between bottom of one section and the following header. */
	
	--layout-nav:				48px;
	--layout-sidebar:			0px;
	
	/* Rounding */
	--layout-radius-sml:		3px;
	--layout-radius-med:		6px;
	--layout-radius-lrg:		12px;
	
	/* Art */
	--layout-art-sml:			50px;
	--layout-art-med:			84px;
	--layout-art-lrg:			100px;
	--layout-art-xlrg:			calc( (100vw - (var(--layout-margin) * 2) - var(--layout-padding)) / 2 );
	
	/* Fonts */
	--font-regular:				"Patron", "SF Pro Display", "Helvetica Neue", "Helvetica", sans-serif;
	--font-mono:				"Roboto Mono", monospace;
	
	--font-size-small:			.8rem;
	--font-size-badge:			.66667rem;
	--font-size-fine:			11px;
	
	/* Buttons */
	--button-large:				2.93rem;
	--button-small:				2.1rem;
	
	/* Logo */
	--logo-height:				24px;
	--logo-ratio:				.22;
	
	/* Script & Layout Helpers */
	--script-break-desktop:		1024px;
	--script-break-preMobile:	570px;
	--video-ratio:				.5625;
}


/* Core Page Setup
--------------------------------------------- */
html, body {
	height: 100%;
	font-size: 15px;	/* Base font size. Use rem for everything else. */
}
body {
	background: rgb(var(--color-midnight));
}
body.nav-open:not(.desktop) {
	overflow: hidden;
}
body, input, textarea, select, button {
	color: rgb(var(--color-mainText));
	font-family: var(--font-regular);
	font-weight: 400;
	-webkit-font-smoothing: auto;
	-moz-osx-font-smoothing: auto;
	text-rendering: optimizeLegibility;
}


/* Core Typography
--------------------------------------------- */
h1, .large-head {
	font-size: 2rem;
	line-height: 1.2;
}
h1 {
	margin-bottom: 1em;
}
h2 {
	font-size: 1.4rem;
	font-weight: bold;
	line-height: 1.2;
	margin-bottom: var(--layout-padding);
}
h3 {
	font-size: 1rem;
	font-weight: bold;
	line-height: 1.2;
	margin-bottom: var(--layout-margin);
}
p, figcaption {
	color: rgba(var(--color-altText));
	line-height: 1.42em;
	margin-bottom: 1em;
}

a {
	color: inherit;
	cursor: pointer;
	text-decoration: none;
}
a.styled {
	color: rgb(var(--color-noon));
}
a.styled:hover {
	border-bottom: 1px solid rgb(var(--color-noon));
}
a:not(.btn).subtle {
	box-shadow: var(--color-bevel) 0 1px 0;
	color: rgba(var(--color-subtleText));
	display: inline-block;
}

strong {
	font-weight: bold;
}

/* Alt Text Styles */
h1 + .subhead .large-head + .subhead {
	margin-top: -1.5em;
	margin-bottom: var(--layout-section-margin);
}

h2 .eyebrow {
	color: rgba(var(--color-altText));
	display: block;
	font-size: 1rem;
	font-weight: normal;
	line-height: 1.2;
}
h2 + .subhead {
	margin-top: -.5em;
}
.subhead strong {
	color: rgb(var(--color-white));
}

h3.title {
	margin-bottom: calc(var(--layout-padding) / 2);
}
h3 .eyebrow, h3.eyebrow {
	color: rgba(var(--color-altText));
	display: block;
	font-size: var(--font-size-badge);
	font-weight: bold;
	letter-spacing: .1em;
	line-height: 1;
	margin-bottom: .25em;
	text-transform: uppercase;
}

em.extra {
	color: rgba(var(--color-subtleText));
	font-size: .8em;
}
em.extra.inline {
	margin-left: .5em;
}

.meta {
	color: rgba(var(--color-altText));
	font-size: var(--font-size-small);
}
.small-print {
	font-size: .8em;
}
.fine-print {
	color: rgba(var(--color-subtleText));
	font-size: var(--font-size-fine);
}
.fine-print a {
	box-shadow: var(--color-bevel) 0 1px 0;
}
.footnote {
	color: rgba(var(--color-subtleText));
	font-feature-settings: "numr";
	font-size: 1em;
	font-weight: normal;
	left: .15em;
	position: relative;
	top: -.1em;
	vertical-align: initial;
}

.no-link {
	cursor: default !important;
}

.spaced-bull {
	content: '•';
	padding: 0 .125rem;
}
.spaced-bull.wide {
	padding: 0 .5rem;
}

.spotlight {
	color: rgb(var(--color-spotlight));
}
.highlight {
	color: rgb(var(--color-noon));
}
.white {
	color: rgb(var(--color-mainText));
}
.alt {
	color: rgba(var(--color-altText));
}
.subtle, .subtle p {
	color: rgba(var(--color-subtleText));
}

.center {
	text-align: center;
}
.left {
	text-align: left;
}
.right {
	text-align: right;
}

.full-price {
	color: rgba(var(--color-subtleText));
	font-size: .75em;
	font-weight: normal;
	margin-left: .5em;
	position: relative;
	text-decoration: none;
}
.full-price:after {
	background: rgba(var(--color-white), .84);
	border-radius: 2px;
	content: '';
	height: .1em;
	left: 0;
	margin: -.05em 0 0 -6%;
	position: absolute;
	top: 50%;
	transform: rotate(-3.4deg);
	width: 112%;
}
.full-price.spotlight:after {
	background: rgb(var(--color-spotlight));
}
h3 .full-price, p .full-price {
	font-size: 1em;
}
h3 .full-price:after, p .full-price:after {
	height: .075em;
}
p .full-price {
	margin: 0 .5em 0 0;
}

.quote {
	border-left: 2px solid var(--color-bevel);
	padding-left: 2em;
	margin: 1.5em 0;
}
figcaption {
	font-style: italic;
	margin: 0;
}

/* Spacers & Breaks */
body:not(.desktop) .m-br, body.desktop .d-br {
	display: block;
}
.no-br {
	white-space: nowrap;
}

/* Selection */
::selection {
	background: rgb(var(--color-spotlight));
	color: rgb(var(--color-midnight));
}

/* Inline Logo */
.logo {
	display: inline-block;
	position: relative;
}
.logo:after {
	background: url(/_i/Luminary-Logo.svg) center bottom no-repeat;
	background-size: contain;
	bottom: 0;
	content: '';
	left: 0;
	position: absolute;
	width: 100%;
}


/* Buttons
--------------------------------------------- */
button {
	background: transparent;
	border: none;
	margin: 0;
	padding: 0;
	-webkit-appearance: none;
	-moz-appearance: none;
	appearance: none;
}
.btn {
	background: rgb(var(--color-white));
	border: none;
	border-radius: var(--layout-radius-lrg);
	color: rgb(var(--color-midnight));
	cursor: pointer;
	display: block;
	font-size: 1rem;
	font-weight: bold;
	line-height: var(--button-large);
	margin-bottom: 1rem;
	padding: 0 1rem;
	text-align: center;
	-webkit-appearance: none;
	width: 100%;
}
.btn.small {
	border-radius: var(--layout-radius-med);
	font-size: .93rem;
	line-height: var(--button-small);
	height: var(--button-small);
}
.btn.disabled {
	cursor: default !important;
	opacity: .39;
	pointer-events: none;
}
.btn.autosize {
	display: inline-block;
	width: auto;
}

.btn.secondary {
	background: none;
	box-shadow: rgb(var(--color-white)) 0 0 0 1px;
	color: rgb(var(--color-white));
}
.btn.subtle {
	background: rgb(var(--color-dusk));
	box-shadow: rgb(var(--color-dusk)) 0 0 0 1px;
	color: rgb(var(--color-white));
}
.btn.spotlight {
	background: rgb(var(--color-spotlight));
	box-shadow: rgb(var(--color-spotlight)) 0 0 0 1px;
	color: rgb(var(--color-midnight));
}
.btn.highlight {
	background: rgb(var(--color-noon));
	box-shadow: rgb(var(--color-noon)) 0 0 0 1px;
	color: rgb(var(--color-white));
}
.btn.apple-podcasts {
	background: var(--color-apple-podcasts);
	box-shadow: var(--color-apple-podcasts) 0 0 0 1px;
	color: rgb(var(--color-white));
}
.btn.blur {
	background: rgba(var(--color-midnight), .84);
	box-shadow: rgb(var(--color-white)) 0 0 0 1px;
	color: rgb(var(--color-white));
}
@supports (backdrop-filter: blur(5px)) or (-webkit-backdrop-filter: blur(5px)) {
	.btn.blur {
		background: none;
		-webkit-backdrop-filter: saturate(120%) blur(21px);
		backdrop-filter: saturate(120%) blur(21px);
	}
}

.btn.icon {
	position: relative;
}
.btn.icon:before {
	background: red;
	content: '';
	height: calc(var(--button-large) - var(--layout-padding));
	left: var(--layout-padding);
	position: absolute;
	top: calc(var(--layout-padding) / 2);
	width: calc(var(--button-large) - var(--layout-padding));
}

.controls .btn {
	background: transparent;
	margin: 0;
	padding: 0;
}
.controls .btn:hover {
	background: transparent !important;
}
.controls .btn .icon, .controls .btn:not(.secondary) .icon {
	background: rgb(var(--color-white));
	margin: 0;
	transition: background .21s ease;
}
.controls .btn:hover .icon, .controls .btn:not(.secondary):hover .icon {
	background: rgba(var(--color-white), .75);
}


/* Icons
--------------------------------------------- */
.icon {
	background: rgb(var(--color-white));
	display: inline-block;
	-webkit-mask-repeat: no-repeat;
	mask-repeat: no-repeat;
	-webkit-mask-size: 100% 100%;
	mask-size: 100% 100%;
}
.btn:not(.small) .icon {
    height: calc(var(--button-large) * .75);
    margin: calc(var(--button-large) * -.125 + 3px) 0.125rem 0 calc(var(--button-large) * -.25);
    vertical-align: middle;
    width: calc(var(--button-large) * .75);
}
.btn.small .icon {
	height: calc(var(--button-small) * .75);
	/*	The left margin here is accounting for our icons, which include built-in padding.
		The padding is about 25% of the width of the icon, so shifting left by 12.5% ensures
		the button label + icon lockup is properly centered. */
	/*	The top margin is almost the same, but for a different reason. In this case it's because we've
		sized the icons to 75% of the total height, which means in order to center them vertically,
		we need to move up by half of 25%. Then we shim it by 1px, since that's the same offset
		we applied to the line height of the button (to adjust for Patron's x-height). */
	margin: calc(var(--button-small) * -.125 + 3px) .125rem 0 calc(var(--button-small) * -.125);
	vertical-align: middle;
	width: calc(var(--button-small) * .75);
}
.btn:not(.secondary) .icon {
	background: rgb(var(--color-midnight));
}

.btn.left-icon {
	position: relative;
}
.btn.left-icon .icon {
	left: var(--layout-margin);
	margin-top: calc( (var(--button-large) * .75) / 2 * -1);
	position: absolute;
	top: 50%;
}

.icon-play {
	-webkit-mask-image: url(../_i/icons/Icon-Play.svg);
	mask-image: url(../_i/icons/Icon-Play.svg);
}
.playing:not(.paused) .icon-play, .icon-play.playing:not(.paused) {
	-webkit-mask-image: url(../_i/icons/Icon-Pause.svg);
	mask-image: url(../_i/icons/Icon-Pause.svg);
}
.icon-paywalled {
	-webkit-mask-image: url(../_i/icons/Icon-Unavailable.svg);
	mask-image: url(../_i/icons/Icon-Unavailable.svg);
}


/* Badges
--------------------------------------------- */
.badges {
	display: flex;
}
.badge {
	border-radius: var(--layout-radius-sml);
	flex: 0;
	font-size: var(--font-size-badge);
	font-weight: bold;
	letter-spacing: .1em;
	line-height: 1;
	padding: .5em .6em .4em .6em;
	text-transform: uppercase;
	white-space: nowrap;
}
.badges .badge:not(:empty) {
	margin-bottom: calc(var(--layout-padding) + .3334rem);
}
.badge:not(:empty) + .badge:not(:empty), .badge:not(:empty) + .badge:empty + .badge:not(:empty) {
	margin-left: var(--layout-padding);
}
.badge.tag {
	background: rgba(var(--color-midnight), .12);
	box-shadow: inset rgba(var(--color-white)) 0 0 0 1px;
	color: rgba(var(--color-white));
}
@supports (backdrop-filter: blur(5px)) or (-webkit-backdrop-filter: blur(5px)) {
	.badge.tag {
		background: rgba(var(--color-midnight), .09);
		-webkit-backdrop-filter: saturate(120%) blur(3px);
		backdrop-filter: saturate(120%) blur(3px);
	}
}
.badge.callout {
	background: rgb(var(--color-spotlight));
	color: rgb(var(--color-midnight));
}
.badge.extra {
	background: rgb(var(--color-noon));
	color: rgba(var(--color-white));
}
.badge:empty {
	display: none;
}


/* Core Layout
--------------------------------------------- */
.wrap {
	padding: 0 var(--layout-margin);
}
.unwrap {
	margin-left: calc(var(--layout-margin) * -1);
	margin-right: calc(var(--layout-margin) * -1);
}
.flex {
	display: flex;
}

main {
	padding-top: calc(var(--layout-nav) + var(--layout-section-margin));
}
main.flush {
	padding-top: 0;
}
section {
	/*
		Leaving this empty for now, so pages can set their own rhythm.
		Will probably come up with a default later.
	*/
}
section > h2.large-head {
	margin-bottom: 1em;
}


/* Nav Bar
--------------------------------------------- */
#top-nav {
	left: 0;
	position: fixed;
	top: 0;
	width: 100%;
	z-index: 1000;
}
.nav-fade {
	background-image: linear-gradient(180deg, rgba(var(--color-midnight), 1) 0%, rgba(var(--color-midnight), 0) 69%);
	content: '';
	height: calc((var(--layout-nav) + var(--layout-margin)) * 2);
	left: 0;
	opacity: .5;
	pointer-events: none;
	position: absolute;
	top: 0;
	width: 100%;
	z-index: 100;
}
body.pinned #top-nav .nav-fade, #top-nav.force-show .nav-fade {
	opacity: 1;
}
#top-nav > .wrap {
	position: relative;
	z-index: 200;
}
#top-nav .flex {
	align-items: center;
	height: var(--layout-nav);
}

#top-nav .logo-wrap {
	align-items: center;
	display: flex;
	flex: 1 0;
	margin: 0;
}
#top-nav .logo {
	height: var(--logo-height);
	width: calc(var(--logo-height) / var(--logo-ratio));
}
#top-nav .logo:after {
	background-position: left bottom;
	height: 100%;
}

#top-nav .nav-items {
	opacity: 0;
	pointer-events: none;
	transition: opacity .21s ease;
}
.nav-open #top-nav .nav-items {
	opacity: 1;
	pointer-events: auto;
}

#top-nav #m-home {
	background: url(/_i/Luminary-Logo.svg) left bottom no-repeat;
	height: var(--logo-height);
	left: var(--layout-margin);
	position: absolute;
	top: calc((var(--layout-nav) - var(--logo-height)) / 2);
	width: calc(var(--logo-height) / var(--logo-ratio));
}
#top-nav #m-home a {
	padding: 0;
}
#top-nav .nav-wrap {
	background: rgb(var(--color-midnight));
	height: 100%;
	left: 0;
	padding: calc(var(--layout-nav) + var(--layout-margin)) var(--layout-margin) 0 var(--layout-margin);
	position: fixed;
	top: 0;
	width: 100%;
	z-index: 2000;
}
@supports (backdrop-filter: blur(5px)) or (-webkit-backdrop-filter: blur(5px)) {
	#top-nav .nav-wrap {
		background: rgba(var(--color-midnight), .84);
		-webkit-backdrop-filter: saturate(120%) blur(21px);
		backdrop-filter: saturate(120%) blur(21px);
	}
}
#top-nav .nav-wrap li a {
	display: block;
	font-size: 1.2rem;
	line-height: 1.42;
	padding: .5em 0;
}
#top-nav .nav-wrap li.divider {
	border-top: 1px solid var(--color-bevel);
	margin-top: 1em;
	padding-top: 1em;
}
#top-nav .m-cta {
	bottom: calc(var(--layout-margin) * 2 - 1em);
	left: var(--layout-margin);
	position: absolute;
	text-align: center;
	width: calc(100% - (var(--layout-margin) * 2));
}
#top-nav .m-cta .btn {
	margin: 0 auto var(--layout-margin) auto;
	width: calc(100% - (var(--layout-margin) * 3));
}
.pinned #top-nav .m-cta {
	bottom: calc(var(--layout-margin) - 1em);
}
.pinned #top-nav .m-cta .btn {
	margin-bottom: var(--layout-padding);
}

#top-nav .nav-wrap li a {
	opacity: 0;
	padding-left: 1.2rem;
}
.nav-open #top-nav .nav-wrap li a {
	opacity: 1;
	padding-left: 0;
}
#top-nav .nav-wrap li.anim-grp-1 a {
	transition: padding-left .34s .07s cubic-bezier(.24, .48, .475, .93), opacity .12s .07s ease;
}
#top-nav .nav-wrap li.anim-grp-2 a {
	transition: padding-left .34s .12s cubic-bezier(.24, .48, 0.475, .93), opacity .12s .12s ease;
}
#top-nav .nav-wrap li.anim-grp-3 a {
	transition: padding-left .34s .17s cubic-bezier(.24, .48, 0.475, .93), opacity .12s .17s ease;
}

.m-menu-btn {
	--ham-height: 18px;
	
	height: var(--ham-height);
	position: relative;
	transform: rotate(0deg);
	transition: .5s ease-in-out;
	width: 24px;
	z-index: 2000;
}
.m-menu-btn .ham-bar {
	--ham-bar: 2px;
	
	background: rgb(var(--color-white));
	border-radius: var(--ham-bar);
	display: block;
	height: var(--ham-bar);
	left: 0;
	opacity: 1;
	position: absolute;
	transform: rotate(0deg);
	transition: .25s ease-in-out;
	width: 100%;
}
.m-menu-btn .ham-bar:nth-child(1) {
	top: 0px;
}
.m-menu-btn .ham-bar:nth-child(2), .m-menu-btn .ham-bar:nth-child(3) {
	top: calc((var(--ham-height) - var(--ham-bar)) / 2);
}
.m-menu-btn .ham-bar:nth-child(4) {
	top: calc(var(--ham-height) - var(--ham-bar));
}
.nav-open .m-menu-btn .ham-bar:nth-child(1), .nav-open .m-menu-btn .ham-bar:nth-child(4) {
	left: 50%;
	top: calc((var(--ham-height) - var(--ham-bar)) / 2);
	width: 0%;
}
.nav-open .m-menu-btn .ham-bar:nth-child(2) {
	transform: rotate(45deg);
}
.nav-open .m-menu-btn .ham-bar:nth-child(3) {
	transform: rotate(-45deg);
}

#top-nav .m-log-in + .m-menu-btn, #top-nav .m-sign-up + .m-menu-btn {
	margin-left: 1em;
}
#top-nav .m-log-in .btn, #top-nav .m-sign-up .btn {
	margin: 0;
}
body:not(.desktop) #top-nav .d-sign-up:not(.m-sign-up), body:not(.desktop) #top-nav .d-log-in:not(.m-log-in) {
	display: none;
}
body.desktop #top-nav .m-sign-up:not(.d-sign-up), body.desktop #top-nav .m-log-in:not(.d-log-in) {
	display: none;
}

#top-nav .d-sign-up, #top-nav .d-log-in {
	padding-right: 2rem;
	transition: opacity .34s ease;
}
#top-nav .d-sign-up .btn, #top-nav .d-log-in .btn {
	margin: 0;
}
#top-nav .d-sign-up + .d-log-in, #top-nav .d-sign-up + .d-sign-up {
	margin-left: -1rem;
}
#top-nav .d-sign-up + .d-sign-up {
	margin-right: 1em;
	position: relative;
}
#top-nav .d-sign-up + .d-sign-up:after {
	background: var(--color-bevel);
	content: '';
	height: 50%;
	position: absolute;
	right: calc(1em - 1px);
	top: 25%;
	width: 1px;
}

#top-nav .bevel {
	background: var(--color-bevel);
	height: 1px;
	opacity: 0;
	width: 100%;
}
#top-nav .bevel.auto-fade {
	transition: opacity .34s;
}
body.pinned #top-nav .bevel.auto-fade, #top-nav.force-show .bevel {
	opacity: 1;
}


/* Link Lists
--------------------------------------------- */
.link-list {
	margin-bottom: 1em;
	text-align: left;
}
.link-list li:not(:first-child) {
	border-top: 1px solid var(--color-bevel);
}
.link-list li > a {
	display: flex;
	overflow: hidden;
	padding: 1em 0;
}
.link-list li > a h3 {
	align-self: center;
	flex: 1 0;
	font-size: 1.1rem;
	font-weight: normal;
	line-height: 1.2;
	margin: 0;
	padding-right: 1em;
	transition: color .12s ease;
}
.link-list li > a .disclosure {
	align-self: center;
	height: 1.4rem;
	left: -.3rem;
	position: relative;
	transform: rotate(45deg);
	transition: transform .21s ease;
	width: 1.4rem;
}
.link-list .disclosure:before, .link-list .disclosure:after {
	background: rgb(var(--color-white));
	border-radius: 2px;
	content: '';
	position: absolute;
	height: .15em;
	right: 0;
	top: 0;
	transition: background .12s ease;
	width: 57%;
}
.link-list .disclosure:after {
	margin-right: .15em;
	transform-origin: right top;
	transform: rotate(-90deg);
}

.accordion .ac-contents {
	height: 0px;
	overflow: hidden;
	transition: height .34s ease-in-out;
}
.accordion .animating .ac-contents {
	height: auto;
}
.accordion .ac-contents .contents {
	padding-bottom: var(--layout-margin);
}
.accordion .ac-contents .contents p:last-child {
	margin: 0;
}
.accordion .ac-contents p .btn {
	/* Because accordion's clip overflows, and our buttons have a 1px box-shadow, this
	   just helps ensure that the border doesn't get clipped. */
	margin: 0 1px;
}
.accordion .disclosure {
	left: 0;
}
.accordion .disclosure:before, .accordion .disclosure:after {
	bottom: 29%;
	left: auto;
	right: 29%;
	top: auto;
}
.accordion .disclosure:after {
	margin-right: 0;
	margin-bottom: -.15em;
	transform: rotate(90deg);
}

.accordion .open > a h3 {
	color: rgb(var(--color-noon));
}
.accordion .open .disclosure:before, .accordion .open .disclosure:after {
	background: rgb(var(--color-noon));
}
.accordion .open .disclosure {
	top: .15rem;
	transform: rotate(-135deg);
}

.accordion .open.apple-podcasts > a h3 {
	color: var(--color-apple-podcasts);
}
.accordion .open.apple-podcasts .disclosure:before, .accordion .open.apple-podcasts .disclosure:after {
	background: var(--color-apple-podcasts);
}

.accordion .card.app-store-badge.apple-podcasts {
	margin-bottom: 1em;
}



/* Swipeable Carousels
--------------------------------------------- */
.swipe-wrapper {
	padding-bottom: calc(var(--layout-margin) + 4px);
	position: relative;
}
.swipe-container {
	height: 100%;
	overflow-x: scroll;
	overflow-y: hidden;
	scroll-behavior: smooth;
	scroll-snap-type: x mandatory;
	scrollbar-width: none;
	
	-webkit-overflow-scrolling: touch;
	-webkit-scroll-snap-type: x mandatory;
	
	/* We'll override this value in JS setup, per swiper. This is just an initial fallback. */
	--slide-count: 10;
}
.swipe-container::-webkit-scrollbar {
	display: none;
}
.swipe-items {
	align-items: stretch;
	display: flex;
	gap: var(--layout-padding);
	height: 100%;
	width: calc(100vw * var(--slide-count));
}
.swipe-items li {
	display: block;
	scroll-snap-align: center;
	width: calc(100vw - (var(--layout-margin) * 2));
}
.swipe-items li:first-child {
	margin-left: var(--layout-margin);
}

.swipe-dots {
	bottom: 0;
	font-size: 0;
	height: 4px;
	left: 50%;
	position: absolute;
	transform: translateX(-50%);
}
.swipe-dots li {
	display: inline-block;
	height: 4px;
	margin: 0 .2rem;
	vertical-align: baseline;
}
.swipe-dots li span {
	background: rgba(var(--color-white), .34);
	border-radius: 4px;
	display: inline-block;
	height: 4px;
	transition: background .24s ease, width .48s ease;
	width: 4px;
}
.swipe-dots li.current span {
	background: rgb(var(--color-white));
	width: 12px;
}


/* Coda & Footer
--------------------------------------------- */
footer {
	/* Enforcing the standard (mobile) font size for footer. */
	--font-footer: 15px;
	
	background: rgb(var(--color-dusk));
	color: rgba(var(--color-altText));
	font-size: var(--font-footer);
	margin-top: calc(var(--layout-section-margin) * 2 + var(--layout-margin));
	padding-bottom: calc(var(--layout-section-margin) * 2);
	position: relative;
}
footer nav {
	padding: 1em 0;
	margin-bottom: -.6em;
}
footer nav, footer .breadcrumbs {
	display: flex;
}
footer .logo {
	height: var(--logo-height);
	overflow: hidden;
	width: var(--logo-height);
}
footer .logo:after {
	height: var(--logo-height);
	width: calc(var(--logo-height) / var(--logo-ratio));
}
footer .breadcrumbs li span[property="name"] {
	line-height: 24px;
	margin-left: 1em;
}
footer .breadcrumbs li:before {
	content: "•";
	left: .5em;
	position: relative;
}

.footer-group li {
	line-height: calc(1.42em * .84);
	padding: .6em 0;
}
.footer-group li a {
	font-size: .84em;
}
.footer-group h3 {
	border-top: 1px solid var(--color-bevel);
	color: rgb(var(--color-white));
	font-size: .84em;
	margin: calc(.6em / .84) 0 0 0;
	padding: calc(1.2em / .84) 0 calc(.6em / .84) 0;
}

.footer-group.originals li strong, .footer-group.originals li em {
	font-style: normal;
	font-weight: normal;
}
.footer-group.originals li strong {
	display: block;
}
.footer-group.originals li em {
	color: rgba(var(--color-subtleText));
}

footer .accordion .ac-contents .contents {
	padding-bottom: 0;
}

footer ul#footer-social {
	padding-top: var(--layout-margin);
	font-size: 0;
	margin-bottom: var(--layout-section-margin);
	
	--social-icon-size: 30px;
}
footer ul#footer-social li {
	display: inline-block;
	height: var(--social-icon-size);
	line-height: 1;
	padding: 0;
	width: var(--social-icon-size);
}
footer ul#footer-social li:not(:first-child) {
	margin-left: var(--layout-margin);
}
footer ul#footer-social li a {
	background-position: center center;
	background-repeat: no-repeat;
	background-size: 100%;
	display: block;
	height: 100%;
	opacity: .42;
}
.social-fb a {
	background-image: url(/_i/Social-FB.svg);
}
.social-tw a {
	background-image: url(/_i/Social-TW.svg);
}
.social-ig a {
	background-image: url(/_i/Social-IG.svg);
}
.social-yt a {
	background-image: url(/_i/Social-YT.svg);
}
.social-tt a {
	background-image: url(/_i/Social-TT.svg);
}

footer .footer-wrap > p {
	font-size: calc(var(--font-footer) * .84);
}
footer .copyright {
	color: rgba(var(--color-white), .21);
	margin: 0;
}


/* Carts & Key Art
--------------------------------------------- */
.art-wrap img {
	display: block;
	width: 100%;
}

.card, .key-art, .card .key-art {
	background: rgba(var(--color-dusk));
	border-radius: var(--layout-radius-med);
	position: relative;
}
.card .key-art.sml {
	border-radius: var(--layout-radius-sml);
}
.card {
	display: block;
	height: calc( (100vw - (var(--layout-margin) * 2)) * (4/3) );
	margin-bottom: var(--layout-margin);
	padding: var(--layout-card-padding);
}
.card:after, .key-art:after {
	border-radius: var(--layout-radius-med);
	box-shadow: inset 0 0 0 .5px var(--color-bevel);
	content: '';
	height: 100%;
	left: 0;
	pointer-events: none;
	position: absolute;
	top: 0;
	width: 100%;
	z-index: 10;
}
.card.autosize {
	height: auto;
}
.card.autofill {
	height: 100%;
}
.card > p:last-child {
	margin-bottom: 0;
}

.card-contents, .card-extras, .card-branding {
	position: relative;
	z-index: 20;
}
.card-contents {
	flex-direction: column;
	height: 100%;
	justify-content: flex-end;
}
.card-extras h3 {
	/* Small manual adjustment here, which brings the talent line and branding
	   a little closer together, for better vertical rhythm. */
	margin-bottom: calc(var(--layout-padding) - 2px);
}
.card-branding {
	align-items: flex-end;
}
.branding-contents {
	padding-right: var(--layout-margin);
	flex: 1;
}
.branding-contents .show-branding {
	margin-bottom: var(--layout-margin);
}
.branding-contents p {
	margin-bottom: -.2em;
}
.card-branding .key-art {
	box-shadow: rgba(0, 0, 0, .48) 0 4px 34px;
	margin-right: calc((var(--layout-card-padding) + (var(--layout-margin) / 2)) * -1);
}

.card-actions {
	border-top: 1px solid var(--color-bevel);
	justify-content: center;
	padding-top: calc(var(--layout-card-padding) / 2);
	margin: var(--layout-margin) 0 calc(var(--layout-card-padding) / 2 * -1) 0;
}
.card-actions .btn {
	margin: 0;
	width: calc(50% - (var(--layout-padding) / 2));
}

.card-hero {
	border-radius: var(--layout-radius-med);
	height: 100%;
	left: 0;
	overflow: hidden;
	position: absolute;
	top: 0;
	width: 100%;
	z-index: 5;
}

.card.plan h2 {
	margin-bottom: .125em;
}

.gradients, .gradients > div {
	height: 100%;
	left: 0;
	position: absolute;
	top: 0;
	width: 100%;
	z-index: 100;
}
.gradients .dark {
	/* Dark Gradients */
	/* ... ( some doubling, and angle variants for smoothness ) ... */
	/* Dark Bottom */
	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%);
}
.gradients .tint {
	/* Show Color */
	/* This is the default. Will be overridden in markup with per-show values. */
	background-image:
		linear-gradient(-48deg, rgba(var(--color-show-tint), .93) 0%, rgba(var(--color-show-tint), 0) 34%, rgba(var(--color-show-tint), 0) 100%);
	transition: background-image .69s;
}

.key-art {
	border-radius: var(--layout-radius-sml);
	overflow: hidden;
}
.key-art.sml {
	height: var(--layout-art-sml);
	width: var(--layout-art-sml);
}
.key-art.med {
	height: var(--layout-art-med);
	width: var(--layout-art-med);
}
.key-art.lrg {
	border-radius: var(--layout-radius-med);
	height: var(--layout-art-lrg);
	width: var(--layout-art-lrg);
}
.key-art.xlrg {
	border-radius: var(--layout-radius-med);
	height: var(--layout-art-xlrg);
	width: var(--layout-art-xlrg);
}

/* App Store Cards */
.card.app-store-badge {
	align-items: center;
	background-color: rgba(var(--color-white), .93);
	color: rgb(var(--color-midnight));
	display: flex;
	height: auto;
	padding: var(--layout-padding);
	margin: 0 auto;
	text-align: left;
	max-width: calc(100% - (var(--layout-margin) * 3));
}
.card.app-store-badge, .card.app-store-badge:after {
	border-radius: 24px;
}
.app-store-badge .app-icon {
	--icon-size: 4.8rem;
	
    background: rgb(var(--color-dusk));
    height: var(--icon-size);
    position: relative;
	width: var(--icon-size);
	
    -webkit-mask-image: url(../_i/squircle-mask.svg);
    mask-image: url(../_i/squircle-mask.svg);
    -webkit-mask-size: var(--icon-size) var(--icon-size);
    mask-size: var(--icon-size) var(--icon-size);
}
.app-store-badge .app-icon:after {
    background: transparent url(../_i/squircle-bevel.svg) 0 0 no-repeat;
    background-size: 100% 100%;
    content: '';
    height: 100%;
	left: 0;
    position: absolute;
    top: 0;
	width: 100%;
}
.app-store-badge h2 {
	flex: 1 0;
	margin: 0;
	padding-left: var(--layout-padding);
}
.app-store-badge h2 .eyebrow {
	color: rgba(var(--color-midnight), .69);
}

.card.app-store-badge.flex {
	max-width: 100%;
}
.card.app-store-badge.condensed, .card.app-store-badge.condensed:after {
	border-radius: 12px;
}
.card.app-store-badge.condensed .app-icon {
	--icon-size: 2.84rem;
}
.card.app-store-badge.apple-podcasts {
	background: #000;
	box-shadow: inset rgba(var(--color-white), .07) 0 0 0 1px;
	color: rgba(var(--color-white), .93);
}
.card.app-store-badge.apple-podcasts h2 .eyebrow {
	color: rgba(var(--color-white), .84);
}

.card.app-store-badge.condensed.with-copy {
	padding: var(--layout-margin);
}
.card.app-store-badge:not(.with-copy) .description {
	display: none;
}


/* Mini Audio Controls
--------------------------------------------- */
.audio-ctrl {
	position: relative;
	transition: border-radius .21s ease, height .21s ease, padding .21s ease, width .21s ease;
}
.audio-ctrl .timer {
	height: 1px;
	overflow: visible;
	left: 50%;
	opacity: 0;
	pointer-events: none;
	position: absolute;
	top: 50%;
	transition: opacity .21s ease;
	width: 1px;
}
.audio-ctrl .timer span {
	color: rgba(var(--color-altText));
	font-size: var(--font-size-small);
	font-weight: normal;
	height: var(--button-large);
	line-height: var(--button-large);
	position: absolute;
	top: calc(var(--button-large) / 2 * -1);
	width: 100px;
}
.audio-ctrl .timer .elapsed {
	right: calc((var(--button-large) / 2) + var(--layout-padding));
	text-align: right;
}
.audio-ctrl .timer .total {
	left: calc((var(--button-large) / 2) + var(--layout-padding));
	text-align: left;
}

.audio-ctrl.playing {
	font-size: 0;
	height: var(--button-large);
	padding: 0;
	width: var(--button-large);
}
.audio-ctrl.small.playing {
	border-radius: var(--button-large);
}
.audio-ctrl.playing .icon {
	font-size: 0;
	margin: 0;
}
.audio-ctrl.playing .label {
	display: none;
}
.audio-ctrl.playing .timer {
	opacity: 1;
}

.audio-ctrl:after {
    border-top: 3px solid rgb(var(--color-show-tint));
    border-radius: 50%;
	border-right: 3px solid transparent;
	content: '';
	height: calc(100% - 4px);
	left: 2px;
	opacity: 0;
	position: absolute;
	top: 2px;
	transition: none;
	width: calc(100% - 4px);
}
.audio-ctrl.loading:after, .audio-ctrl.buffering:after {
	animation: buffering .57s linear infinite;
	opacity: 1;
	transition: opacity .21s .21s ease;
}
@keyframes buffering {
	to { transform: rotate(360deg) }
}

.audio-ctrl:not(.small) {
	overflow: hidden;
	transition: border-radius .48s ease, padding .48s ease, width .34s ease, min-width .34s ease;
}
.audio-ctrl:not(.small).playing {
	padding: 0 1rem;
	width: 100%;
}
.audio-ctrl:not(.small) .timer .total {
	left: calc((var(--button-large) / 2) + .25em);
}
.audio-ctrl:not(.small)  .timer .elapsed {
	right: calc((var(--button-large) / 2) + .25em);
}
.audio-ctrl:not(.small):after {
	--spinner-size: calc(var(--button-large) - 4px);
	
	height: var(--spinner-size);
	left: calc(50% - (var(--spinner-size) / 2));
	width: var(--spinner-size);
}
.audio-ctrl:not(.small) .progress {
	background: rgba(var(--color-show-tint), .69);
	height: 100%;
	left: 0;
	position: absolute;
	top: 0;
	z-index: -1;
}
.audio-ctrl:not(.small) {
	/* Fixing Safari bug with radius + transition + overflow not being respected. */
	-webkit-backface-visibility: hidden;
	-webkit-transform: translate3d(0, 0, 0);
}


/* Forms & Fields
--------------------------------------------- */
input.text-input {
	-webkit-appearance: none;
	-moz-appearance: none;
	appearance: none;
	
	background: rgb(var(--color-dusk));
	border: 1px solid rgba(var(--color-white), .12);
	border-radius: var(--layout-radius-lrg);
	display: block;
	height: 3.7rem;
	font-size: 1rem;
	line-height: 1.2;
	outline: none;
	padding: 1.3rem 1.2rem 0 1.2rem;
	width: 100%;
}
input.has-entry:invalid:not(:focus), .error input.has-entry:not(:focus) {
	border-color: rgb(var(--color-error));
}
input.text-input:focus {
	border-color: rgba(var(--color-noon), .75);
	box-shadow: rgba(var(--color-noon), .48) 0 0 0 4px;
}

.field-wrap {
	position: relative;
}
.field-wrap input {
	margin-bottom: 1rem;
}
.field-wrap input~label {
	color: rgba(var(--color-subtleText));
	font-size: 1rem;
	left: 1.2rem;
	line-height: 1.2;
	max-width: calc(100% - 2.4rem);
	pointer-events: none;
	position: absolute;
	top: 1.3rem;
	transition: font-size .17s ease, top .17s ease;
}
.field-wrap input.text-input:focus~label, .field-wrap input.text-input.has-entry~label {
	font-size: .7rem;
	top: .7rem;
}

.field-message, .field-help {
	font-size: .8rem;
	margin-bottom: 1rem;
}
.field-message:empty, .field-wrap:not(.first-focus) input.text-input~.field-message {
	display: none;
}
.first-focus input.text-input~.field-message:not(:empty),
.show-all-errors input.text-input~.field-message:not(:empty) {
	margin-top: -.5rem;
}
input.text-input:invalid~.field-message, .field-wrap.error .field-message {
	color: rgb(var(--color-error));
	font-weight: bold;
}
.field-wrap.error.first-focus + .field-help:not(:empty),
.show-all-errors .field-wrap.error + .field-help:not(:empty) {
	margin-top: -1em;
}
.show-all-errors input.text-input~.field-message:not(:empty) {
	display: block;
}

.field-wrap.pw input.text-input {
	padding-right: calc(1.2rem + 48px);
}
button.show-pw {
	color: rgba(var(--color-altText));
	font-size: var(--font-size-small);
	font-weight: normal;
	height: 3.7rem;
	line-height: 3.7rem;
	padding-right: 1.2rem;
	position: absolute;
	top: 0;
	right: 0;
}

form button[type=submit]:last-child {
	margin: 0;
}

.more-fields {
	--more-fields-duration: .34s;
	
	display: none;
	overflow: hidden;
	transition: height var(--more-fields-duration) ease;
}
.more-fields.show {
	display: block;
}

.flex.split-field, .flex.extra-field {
	gap: 1rem;
}
.flex.split-field .split-field {
	flex: 1;
}
.flex.extra-field .main-field {
	flex: 1;
}
.flex.extra-field .extra-field {
	width: 24%;
}



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

/* Desktop */
@media only screen and (min-width:1024px) {
	/* Variables
	--------------------------------------------- */
	:root {
		--layout-max:				1600px;
		
		/* Spacing */
		--layout-margin:			40px;	/* "Outer" element spacing. */
		--layout-padding:			16px;	/* "Inner" element spacing. */
		--layout-card-padding:		30px;	/* Card widget margin. ... varying this from the primaries helps keep better visual rhythm. */
		--layout-section-margin:	62px;	/* Vertical rhythm, between bottom of one section and the following header. */
	
		--layout-nav:				60px;
		--layout-sidebar:			420px;
		
		/* Art */
		--layout-art-sml:			60px;
		--layout-art-med:			100px;
		--layout-art-lrg:			120px;
		--layout-art-xlrg:			calc( (100vw - (var(--layout-margin) * 2) - var(--layout-padding)) / 2 );
		
		/* Fonts */
		--font-size-fine:			12px;
				
		/* Logo */
		--logo-height:				30px;
		
		/* Show Cards */
		--layout-card:				420px;
	}
	
	
	/* Core Page Setup
	--------------------------------------------- */
	html, body {
		/* Base font size. Use rem for everything else. */
		font-size: 20px;
	}
	.show-card {
		/* Enforcing the standard (mobile) font size for cards. */
		font-size: 15px;
	}
	a:not(.disabled), button:not(.disabled), .btn:not(.disabled) {
		cursor: pointer;
	}
	
	
	/* Page Loader
	--------------------------------------------- */
	body.loading {
		overflow: hidden;
	}
	#page-loading {
		align-items: center;
		background: rgb(var(--color-midnight));
		display: flex;
		flex-direction: column;
		height: 100vh;
		justify-content: center;
		left: 0;
		opacity: 0;
		position: fixed;
		top: 0;
		transition: opacity .21s ease;
		width: 100vw;
		z-index: 99999;
	}
	body.loading #page-loading {
		opacity: 1;
	}
	
	#page-loading-dots {
		background: transparent;
		height: 86px;
		position: relative;
		width: 84px;
	}
	#page-loading:before {
		background: transparent url(/_i/Luminary-Logo.svg) left top no-repeat;
		background-size: auto 120px;
		content: '';
		display: block;
		height: 104px;
		width: 104px;
	}
	
	#page-loading-dots div {
		--dots-timing: .39s;
		
		animation-timing-function: cubic-bezier(0, 1, 1, 0);
		background: rgb(var(--color-white));
		border-radius: 50%;
		position: absolute;
		height: 12px;
		top: 37px;
		width: 12px;
	}
	#page-loading-dots div:nth-child(1) {
		animation: load-dot-1 var(--dots-timing) infinite;
		left: 12px;
	}
	#page-loading-dots div:nth-child(2) {
		animation: load-dot-2 var(--dots-timing) infinite;
		left: 12px;
	}
	#page-loading-dots div:nth-child(3) {
		animation: load-dot-2 var(--dots-timing) infinite;
		left: 36px;
	}
	#page-loading-dots div:nth-child(4) {
		animation: load-dot-3 var(--dots-timing) infinite;
		left: 60px;
	}
	
	@keyframes load-dot-1 {
		0% { transform: scale(0); }
		100% { transform: scale(1); }
	}
	@keyframes load-dot-2 {
		0% { transform: translate(0, 0); }
		100% { transform: translate(24px, 0); }
	}
	@keyframes load-dot-3 {
		0% { transform: scale(1); }
		100% { transform: scale(0); }
	}
	
	
	/* Core Typography
	--------------------------------------------- */
	.fine-print a {
		transition: color .12s ease, box-shadow .12s ease;
	}
	.fine-print a:hover {
		box-shadow: rgba(var(--color-white), .48) 0 1px 0;
		color: rgba(var(--color-white), .48);
	}
	
	
	/* Core Layout
	--------------------------------------------- */
	.wrap {
		margin: 0 auto;
		max-width: var(--layout-max);
	}
	.wrap.narrow {
		max-width: 930px;
	}
	.x-narrow {
		max-width: 690px;
	}
	.sidebar-main {
		padding-left: calc(var(--layout-sidebar) + (var(--layout-margin) * 2));
	}
	
	
	/* Buttons
	--------------------------------------------- */
	.btn:not(.disabled):not(.audio-ctrl) {
		transition: background .21s ease;
	}
	.btn:not(.disabled):hover {
		background-color: rgba(var(--color-white), .84);
	}
	.btn:not(.disabled).spotlight:hover {
		background-color: rgba(var(--color-spotlight), .84);
	}
	.btn:not(.disabled).highlight:hover {
		background-color: rgba(var(--color-noon), .84);
	}
	.btn:not(.disabled).subtle:hover {
		background-color: rgba(var(--color-dawn), .48);
	}
	.btn:not(.disabled).secondary:hover {
		background: rgba(var(--color-white), .12);
	}
	.btn:not(.disabled).apple-podcasts:hover {
		background: var(--color-apple-podcasts);
		opacity: .93;
	}
	
		
	/* Icons
	--------------------------------------------- */
	.btn.small .icon {
		margin-top: calc(var(--button-small) * -.125 + 2px);
	}
	.btn.small.audio-ctrl.playing .icon, .btn.small.audio-ctrl.paused .icon {
		margin: 0;
	}
	
	
	/* Badges
	--------------------------------------------- */
	.badge {
		font-size: .575rem;
		padding: .4em .6em;
	}
	.show-card .badge {
		padding: .5em .6em .4em .6em;
	}
	
	
	/* Link Lists
	--------------------------------------------- */
	.link-list a {
		transition: color .12s ease;
	}
	.link-list a:not(.btn):hover {
		color: rgb(var(--color-noon));
	}
	.link-list .apple-podcasts a:hover {
		color: var(--color-apple-podcasts);
	}
	.link-list a .disclosure:before, .link-list a .disclosure:after {
		transition: background .12s ease;
	}
	.link-list a:hover .disclosure:before, .link-list a:hover .disclosure:after {
		background: rgb(var(--color-noon));
	}
	.link-list .apple-podcasts a:hover .disclosure:before, .link-list .apple-podcasts a:hover .disclosure:after {
		background: var(--color-apple-podcasts);
	}
	
	
	/* Swipeable Carousels
	--------------------------------------------- */
	.swipe-wrapper {
		padding-bottom: 0;
	}
	.swipe-container {
		scroll-snap-type: none;
		-webkit-scroll-snap-type: none;
	}
	.swipe-dots {
		display: none;
	}
	
	
	/* Footer
	--------------------------------------------- */
	footer, .loaded footer {
		padding-bottom: var(--layout-margin);
	}
	footer .logo {
		width: calc(var(--logo-height) / var(--logo-ratio));
	}
	footer ul#footer-social {
		/* Enforcing the standard (mobile) font size for footer. */
		--layout-margin: 20px;
		--layout-section-margin: 30px;
	}
	
	footer a {
		transition: color .12s ease, opacity .21s ease;
	}
	footer a:hover {
		color: rgb(var(--color-white));
	}
	footer ul#footer-social li a:hover {
		opacity: 1;
	}
	
	.footer-links {
		display: flex;
	}
	.footer-links .footer-group:not(.originals) {
		flex: 1;
	}
	
	.footer-links .footer-group:not(.originals) .ac-trigger, .footer-links .footer-group:not(.originals) .ac-contents,
	.footer-links .originals .accordion:first-child .ac-trigger, .footer-links .originals .accordion:first-child .ac-contents {
		padding-right: calc(var(--layout-margin) * .5);
	}
	.footer-links .originals .accordion .ac-trigger, .footer-links .originals .accordion .ac-contents {
		padding-left: calc(var(--layout-margin) * .5);
	}
	
	.footer-links .originals {
		display: flex;
		width: 75%;
	}
	.footer-links .originals a {
		display: block;
	}
	.footer-links .originals .accordion:first-child {
		width: 40%;
	}
	.footer-links .originals .accordion:last-child {
		width: 60%;
	}
	.footer-links .originals .accordion:last-child .contents {
		display: flex;
		flex-wrap: wrap;
	}
	.footer-links .originals .accordion:last-child .contents li {
		width: 50%;
	}
	.footer-links .originals .accordion:last-child .contents li:nth-child(odd) {
		padding-right: calc(var(--layout-margin) * .5);
	}
	.footer-links .originals .accordion:last-child .contents li:nth-child(even) {
		padding-left: calc(var(--layout-margin) * .5);
	}
	.footer-links .accordion .ac-contents {
		height: auto !important;
	}
	.footer-links + .footer-group {
		border-top: 1px solid var(--color-bevel);
		margin-top: 1em;
	}
	
	
	/* Cards
	--------------------------------------------- */
	.show-card {
		/* Enforcing the standard (mobile) font size for cards. */
		--layout-margin:			20px;
		--layout-padding:			12px;
		--button-small:				2.1em;
		
		height: calc(var(--layout-card) * 1.3334);
		font-size: 15px;
		width: var(--layout-card);
	}
	.show-card h3 {
		font-size: 1em;
	}
	.show-card .badge {
		font-size: .6667em;
	}
	.show-card .badges .badge:not(:empty) {
		--standard-rem: 15px;
		margin-bottom: calc(var(--layout-padding) + calc(var(--standard-rem) * .3334));
	}
	.show-card .card-actions .btn.small {
		font-size: .93em;
		padding: 0 1em;
	}
	/* App Store Cards */
	.card.app-store-badge.condensed.with-copy {
		padding: var(--layout-card-padding);
	}
	
	
	/* Mini Audio Controls
	--------------------------------------------- */
	.audio-ctrl.playing .icon, .audio-ctrl.paused .icon {
		--button-small: 2.1rem;
	}
	.audio-ctrl:not(.small) .timer span {
		font-size: .65rem;
	}
}

/* Narrow Desktop Adjustments */
@media only screen and (min-width:1024px) and (max-width:1280px) {
	
}

/* Short Desktop Adjustments */
@media only screen and (min-width:1024px) and (max-height:1100px) {
	
}
@media only screen and (min-width:1024px) and (max-height:860px) {
	
}
@media only screen and (min-width:1024px) and (max-height:800px) {
	
}

/* No-Man's Land (too small for desktop, not yet mobile) */
@media only screen and (max-width:1024px) and (min-width:570px) {
	
}