/* Compact CSS Reset */
*, *::before, *::after { box-sizing: border-box; }

html, body, div, span, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, 
img, small, strike, strong, sub, sup, tt, var, b, u, i, ol, ul, li, fieldset,
form, label, table, caption, tbody, tfoot, thead, tr, th, td, article, aside,
canvas, details, embed, figure, figcaption, footer, header, menu, nav, section,
summary, audio, video {
  margin: 0;
  padding: 0;
  border: 0;
  font: inherit;
  vertical-align: baseline;
}

html { font-size: 16px; }
body { min-height: 100vh; line-height: 1.5; -webkit-font-smoothing: antialiased; }
ul, ol { list-style: none; }
img, picture, video, canvas{ display: block; max-width: 100%; }
img { height: auto; }
table { border-collapse: collapse; }
p, h1, h2, h3, h4, h5, h6 { overflow-wrap: break-word; }
a { text-decoration-skip-ink: auto; }
button, input, select, textarea { font: inherit; }
button { background: none; border: none; cursor: pointer; }

@media (prefers-reduced-motion: reduce) {
  * { animation-duration: 0.01ms !important; transition-duration: 0.01ms !important; }
}

:root{
	/*sizes*/
	--size-xxs: 0.1875rem;  /* 3px */
	--size-xs: 0.375rem;    /* 6px */
	--size-s: 0.75rem;      /* 12px */
	--size-m: 1.125rem;     /* 18px */
	--size-l: 1.5rem;       /* 24px */
	--size-xl: 2rem;        /* 32px */
	--size-xxl: 3rem;       /* 48px */

	--thumbnail-s:6rem;		/*96px*/
	--thumbnail-m:12rem;	/*192px*/
	
	/*utility*/
	--line-height: 1.8;

	/*typography*/
	--bold: 700;

	/*timing*/
	--speed-fast:0.15s;
	--speed:0.3s;
	--speed-slow:0.6s;
	--speed-snail:1s;
}

.theme-light{
	--dark: #e9e8e3;  
--light: #0d0d0d; 
--gold: #9C7C00;  
--stone: #2b2b28; 
--concrete: #c6c6c1; 
--carbon: #ddDCD7; 

/*fx*/
--shadow:1px 1px 5px rgba(0, 0, 0, .15);
}

.theme-light .logo{
	background-image: url('/img/svg/logo-light.svg');
}



/*general structure*/

body{
	background-color: var(--dark);
	font-family: "Geist", "Poppins", sans-serif;
	font-optical-sizing: auto;	
	font-weight: 400;
	font-style: normal;
	line-height: var(--line-height);
	font-size: var(--size-m);
	color: var(--light);	
	background-image: radial-gradient(var(--concrete) 1px, transparent 1px);
	background-size: var(--size-l) var(--size-l);

}

.h1, .h2, .h3{
	font-weight: var(--bold);	
	line-height: 1.6;
	color: var(--gold);
	margin-bottom: var(--size-m); /* Add more space after headings */
}

/*typography*/

.h1{
	font-size: var(--size-xl);
}

.h2{
	font-size: var(--size-l);
}

.h3{
	font-size: var(--size-m);	
}

p, ul, ol, article{
	margin: var(--size-m) 0;
}

strong, dt{
	font-weight: var(--bold);
}

ol.list li{
	list-style-type: decimal-leading-zero;
	margin-left: var(--size-xl);
}

ul.list li{
	list-style-type: circle;
	margin-left: var(--size-xl);
}

.inline-list{
	display: flex;
	flex-wrap: wrap;
	gap:var(--size-l);
}

abbr{
	text-decoration: none;
}

.display{
	font-size: var(--size-xxl);
	text-transform: uppercase;
	line-height: 1.2;
}

.quote{
	font-style: italic;
}

cite{
	font-style: normal;
	text-align: right;
	display: block;
	color: var(--stone);
}

.secondary{
	font-size: var(--size-s);
}


header, section{
	padding:var(--size-l);	
}

header, section, hr{
	max-width: 1200px;
	margin: 0 auto;
}

section{
	max-width: 990px;
  	margin-bottom: var(--size-xl); /* Increase from current spacing */
}

section:not(:first-child) {
  margin-top: var(--size-xl); /* Add more space between consecutive sections */
}


h1 + p, h2 + p, h3 + p, p + p{
	margin-top: var(--size-l); /* More space between consecutive paragraphs */
}



main{
	opacity: 1;
	transition: opacity var(--speed) ease-in;
}

.open{
	background-color: var(--dark);
}

.open + main{
	opacity: .1;
	transition: opacity var(--speed) ease-out;
}

/*buttons*/

.btn{
	font-size: var(--size-m);
	font-weight: var(--bold);
	text-transform: uppercase;
	background-color: var(--gold);
	color: var(--dark);
	border-radius: var(--size-xs);
	padding: var(--size-xxs) var(--size-m);
	border:1px solid var(--gold);
	text-decoration: none;
	display: inline-block;
	text-wrap: nowrap;
	transition: background-color, color var(--speed) ease;
	box-shadow: var(--shadow);
}

.btn:hover{
	background-color: var(--dark);
	color: var(--gold);
}

.btn-secondary{
	border-color: transparent;
	background-color: transparent;
	text-transform: none;
	color: var(--gold);
	box-shadow: none;
}

.btn-secondary:hover,
.menu-toggle:hover{
	background-color: transparent;
	color: var(--light);
}

.social-link{
	transition: background-color var(--speed) ease;
	transition: border-color var(--speed) ease;
	color: var(--gold);
}

.social-link:hover{
	background-color: var(--light);
	border-color: var(--light);	
}

.social-link,
.social-link img,
.menu-toggle{
	width: var(--size-xxl);
	height: var(--size-xxl);
	padding: 0;
}

.menu-toggle{
	color: var(--gold);
	background-color: transparent;
	transition: color var(--speed) ease;
}

/*links*/

a{
	color: var(--gold);
	text-decoration: underline;
	transition: color var(--speed) ease;
}

a:hover{
	color: var(--light);
}


/*icons*/

.icon{
	display: inline;
	width:var(--size-xl);
	height:var(--size-xl);
	vertical-align: middle;
}

.btn .icon{
	width:var(--size-m);
	height:var(--size-m);
}

/*dividers*/

hr{
	border:1px solid var(--concrete);
	margin: var(--size-xs) auto;
}



/*navigation*/

#nav{
	position: absolute;
	top:calc(var(--size-xxl) + var(--size-l));
	right: 0;
	left: 0;
	background-color: var(--dark);
	padding:0 var(--size-xl) var(--size-l) var(--size-xl);
	/*display: none;*/
	z-index: 10;
	transform: translateY(-150%);
	transition: transform var(--speed) ease;
}

#nav .btn-secondary{
	padding-left: 0;
}

.open #nav{
	display: block;
	background-color: var(--dark);
	transform: translateY(0);	
}

.open #nav .btn{
	padding: var(--size-s) 0;
}

.icon-close,
.open .icon-menu{
	display: none;
}

.open .icon-close{
	display: inline;
}


.open #nav .inline-list{
	justify-content: flex-end;
}


/*hero*/

.hero{
	text-align: center;
}

.hero .display{
	text-align: center;	
}

.page-title{
	margin: 0 auto;
    text-align: center;
    padding-top: 0;
    padding-bottom: 0;
}

/*available on*/
.available-on{
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	align-items: center;
	padding: 0 var(--size-l);
}

.available-on .inline-list{
	align-items: center;
	justify-content: center;
}

.available-on p{
	margin-right: var(--size-l);
}



/*cards*/

.card{
	background-color: var(--carbon);
	border:1px solid var(--concrete);
	padding: var(--size-l);
	border-radius: var(--size-xs);
	box-shadow: var(--shadow);
}


.card-content{
	display:flex;
    flex-direction:column;
    gap:var(--size-m);
}

.card-content .h2{
	color:var(--light);
}

.card-content .h3{
	text-transform: uppercase;
}

/*episode cards*/

.episode{	
	grid-template-columns: auto 1fr;
	gap: var(--size-m);
}

.episode-date{
	color: var(--stone);
}

.episode .card-content {
  gap: var(--size-l); /* Increase from var(--size-m) */
}

.episode + .episode{
	margin-top: var(--size-xxl);
}

.episode-player{
	grid-column: span 2;
}

.episode-summary{
	margin: 0;
}


/*quote boxes*/

.quote-callout{
	position: relative;	
	padding: var(--size-xxl);
}

.quote-callout:before{
	content: "\201C"; 
	font-size: var(--size-xxl);
	color: var(--gold);
	position: absolute;
	left: calc(50% - var(--size-xxl)/2);
	top: calc(-1 * var(--size-s));
}

.quote-callout-secondary{
	background-color: var(--dark);
	border-color: var(--concrete);
	color: var(--light);
	margin: var(--size-m) 0;
	padding: var(--size-l);
}

.quote-callout-secondary cite{
	color: var(--stone);
}

.quote-callout-secondary:before{
	left:var(--size-m);
}


/*thumbnails*/

.thumbnail{
	margin: 0 auto var(--size-l);
	border-radius: var(--size-xs);
	width: 100%;
}

.thumbnail-s{
	width: 100%;
}

.host-img{		
	width: 100%;
	border-radius: var(--size-xs);
	overflow: hidden;
	margin: var(--size-m) 0;

}

/*available now promo*/
.available-now{
	display: flex;
	flex-direction: column;
	justify-content: space-between;
	align-items: center;
	margin-bottom: 0;
}

.phones{
	margin: var(--size-m) 0 0 var(--size-m);
	align-self: flex-end;
	width: 400px;

}

/*footer*/

.footer{
	background-color: var(--gold);
	color: var(--concrete);
	text-align: center;
	padding-top: var(--size-xl);
}

.footer section{
	margin-bottom: 0;
}

.footer a,
.footer h2{
	color: var(--concrete);
}

.footer a:hover{
	color: var(--light);
}

.footer .inline-list{
	justify-content: center;
}

.nav-secondary{
	margin-bottom:0;
	padding-bottom:0;
}

.nav-secondary + section{
	margin-top:0;
	padding-top:0;
}

.breadcrumb{
	margin:0;
	gap:var(--size-xs);
}


.breadcrumb li:not(:last-child)::after {
  content: "";
  display: inline-block;
  width: var(--size-m);
  height: var(--size-m);
  margin: 0 0 0 var(--size-xs);
  vertical-align: middle;
  mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m9 18 6-6-6-6'/%3E%3C/svg%3E");
  mask-size: contain;
  mask-repeat: no-repeat;
  mask-position: center;
  background-color: var(--stone);  
}

.intro{
	padding: var(--size-xl);
}




/*utility*/

/*h1{
	outline:1px solid red;
	position: relative;
}

h1:before{
	content: 'h1';
	display: inline-block;
	position: absolute;
	top:0;
	left: 0;
	font-size: var(--size-s);
	color: var(--light);
	background-color: red;
}

h2{
	outline:1px solid green;
	position: relative;
}

h2:before{
	content: 'h2';
	display: inline-block;
	position: absolute;
	top:0;
	left: 0;
	font-size: var(--size-s);
	color: var(--light);
	background-color: green;
}

h3{
	outline:1px solid blue;
	position: relative;
}

h3:before{
	content: 'h3';
	display: inline-block;
	position: absolute;
	top:0;
	left: 0;
	font-size: var(--size-s);
	color: var(--light);
	background-color: blue;
}

h4{
	outline:1px solid purple;
	position: relative;
}

h4:before{
	content: 'h4';
	display: inline-block;
	position: absolute;
	top:0;
	left: 0;
	font-size: var(--size-s);
	color: var(--light);
	background-color: purple;
}*/

.utl-zero-margin{
	margin:0;
}

.utl-margin-top-xxl{
	margin-top: var(--size-xxl);
}

.utl-gold{
	color: var(--gold);
}

.utl-light{
	color: var(--light);
}

.utl-img-right{
	float: right;
	border-radius: var(--size-xs);
	overflow: hidden;
}

.skip-link {
  position: absolute;
  top: -100%;
  left: 0;
  background: var(--gold);
  color: var(--dark);
  padding: var(--size-s);
  z-index: 100;
  transition: top var(--speed) ease;
}

.skip-link:focus {
  top: 0;
}

.clearfix::after {
  content: "";
  display: table;
  clear: both;
}

a:focus-visible, button:focus-visible {
  outline: 3px solid var(--light);
  outline-offset: 3px;
}


main > section:last-child {
    padding-bottom: 0;
    margin-bottom: 0;
}



/* Audio Player Styles */


.audio-player {
    padding: 0;
    margin-top: 0;
}

.player-controls {
    display: flex;
    flex-direction: column;
    gap: var(--size-l);
}

.play-button {
    background-color: var(--gold);
    color: var(--dark);
    border-radius: 50%;
    width: var(--size-xl);
    height: var(--size-xl);
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: var(--shadow);
    transition: background-color var(--speed) ease;
    border: 1px solid var(--gold);
}

.play-button:hover {
    background-color: var(--dark);
    color: var(--gold);
}

.play-button .icon {
    width: var(--size-m);
    height: var(--size-m);
}

.icon-pause {
    display: none;
}

.playing .icon-pause {
    display: inline;
}

.playing .icon:not(.icon-pause) {
    display: none;
}

.progress-container {
    display: flex;
    align-items: center;
    gap: var(--size-s);
}

.time {
    font-size: var(--size-s);
    color: var(--stone);
    white-space: nowrap;
}

.progress-bar {
    flex-grow: 1;
    position: relative;
    height: var(--size-xs);
    background-color: var(--concrete);
    border-radius: var(--size-xxs);
    overflow: hidden;
}

.progress-fill {
    position: absolute;
    height: 100%;
    width: 0%;
    background-color: var(--gold);
    border-radius: var(--size-xxs);
    transition: width 0.1s linear;
}

.seek-slider {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    opacity: 0;
    margin: 0;
    cursor: pointer;
}

.volume-container {
    display: flex;
    align-items: center;
    gap: var(--size-s);
}

.volume-button {
    color: var(--gold);
    transition: color var(--speed) ease;
    display: flex;
    align-items: center;
    justify-content: center;
}

.volume-button:hover {
    color: var(--light);
}

.volume-mute-icon {
    display: none;
}

.muted .volume-mute-icon {
    display: inline;
}

.muted .volume-icon {
    display: none;
}

.volume-slider {
    width: 80px;
    height: 5px;
    -webkit-appearance: none;
    appearance: none;
    background-color: var(--concrete);
    border-radius: var(--size-xxs);
    cursor: pointer;
}

.volume-slider::-webkit-slider-thumb {
    -webkit-appearance: none;
    appearance: none;
    width: var(--size-s);
    height: var(--size-s);
    border-radius: 50%;
    background-color: var(--gold);
    cursor: pointer;
}

.volume-slider::-moz-range-thumb {
    width: var(--size-s);
    height: var(--size-s);
    border-radius: 50%;
    background-color: var(--gold);
    cursor: pointer;
    border: none;
}

/*image masks*/

.mask{
  background-color: var(--gold); 
  color: var(--dark); 
  mask-size: contain;
  -webkit-mask-size: contain;
  display: block;
  text-indent: -99rem;
  transition: background-color var(--speed) ease;
}

.mask:hover{
	background-color: var(--light); 
}

.footer .mask{
	background-color: var(--carbon);
}

.footer .mask:hover{
	background-color: var(--carbon);
	background-color: var(--light); 
}

.mask.spotify{
	width: 96px;
	height: 29px;
	mask-image: url('/img/svg/spotify-logo.svg');
  	-webkit-mask-image: url('/img/svg/spotify-logo.svg');
}

.mask.apple{
	width: 114px;
	height: 26px;
	mask-image: url('/img/svg/apple-logo.svg');
  	-webkit-mask-image: url('/img/svg/apple-logo.svg');
}

.mask.amazon{
	width: 135px;
	height: 28px;
	mask-image: url('/img/svg/amazon-logo.svg');
  	-webkit-mask-image: url('/img/svg/amazon-logo.svg');
}

.mask.medium{
	mask-image: url('/img/svg/medium-icon.svg');
  	-webkit-mask-image: url('/img/svg/medium-icon.svg');
}

.mask.twitter{
	mask-image: url('/img/svg/x-icon.svg');
  	-webkit-mask-image: url('/img/svg/x-icon.svg');
}

.mask.linkedin{
	mask-image: url('/img/svg/linkedin-icon.svg');
  	-webkit-mask-image: url('/img/svg/linkedin-icon.svg');
}

.mask.instagram{
	mask-image: url('/img/svg/instagram-icon.svg');
  	-webkit-mask-image: url('/img/svg/instagram-icon.svg');
}

.logo{
	display: block;
	width: 117px;
	height: 43px;
	text-indent: -99rem;
	background-image: url('/img/svg/logo.svg');
	background-size: contain;
	background-repeat: no-repeat;
	float: right;
	color: var(--gold);
}

/*captions*/

/* Caption container styling using site variables */
.caption-container {
    background-color: var(--carbon);
    color: var(--light);
    padding: var(--size-m);
    border-radius: var(--size-xs);
    text-align: center;
    min-height: var(--size-xxl);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: var(--size-m);
    margin: var(--size-m) 0;
    transition: background-color var(--speed) ease, opacity var(--speed-fast) ease;
}

/* Hidden state */
.caption-container.hidden {
    display: none;
}

.caption-container.active {
    color: var(--light);
    background-color: var(--dark);
    border: 1px solid var(--concrete);
}

.caption-container .no-captions {
    color: var(--stone);
    font-style: italic;
    font-size: var(--size-s);
}

.caption-container.empty {
    background-color: transparent;
    border: 1px dashed var(--concrete);
}

/* CC toggle button styling */
.cc-toggle-button,
.cc-toggle-button[aria-pressed="true"]:hover{
    width:var(--size-xl);
    height: var(--size-l);
    border:1px solid var(--gold);
    border-radius: var(--size-xs);
    background-color: var(--gold);
    display: block;
    font-weight: var(--bold);
    font-size: var(--size-s);
    text-transform: uppercase;
    text-align: center;
    color: var(--carbon);
    padding: 0;
    line-height: 1;
}

.cc-toggle-button:hover,
.cc-toggle-button[aria-pressed="true"]{
    background-color: transparent;
    color: var(--gold);
}



summary {
    list-style-type: none;
    cursor: pointer;
    margin-bottom: var(--size-l);
}

summary:before {
  content: "View";  
}

details[open] summary:before{
	content: "Hide"; 
}

summary:-webkit-details-marker {
    display: none;
}

summary:focus {
    outline: none;
}

/* Small devices (phones, 576px and up) */
@media (min-width: 576px) {

	.display{
		line-height: 1.4;
	}

	.episode{
		display: grid;
	}	

	.quote-callout{
		margin: var(--size-xl);
	}

	.quote-callout-secondary{
		margin:0;
	}

	.quote-grid {
	  display: grid;
	  grid-template-columns: repeat(2, 1fr); /* Creates 2 columns of equal width */
	  grid-template-rows: repeat(2, auto); /* Creates 2 rows that size to content */
	  gap: var(--size-m); /* Space between cards */
	}

	.available-now{
		flex-direction: row;
        margin: auto;
        padding:0 var(--size-l);	
	}

	.intro{
	    display: grid;
    	grid-template-columns: 3fr 1fr;
    	gap: var(--size-xl);
	}

	.host-img{
		min-width: var(--thumbnail-m);
	}

	.player-controls {
        flex-direction: row;
        align-items: center;
    }
    
    .progress-container {
        flex-grow: 1;
    }

    .audio-player{
    	padding: 0 var(--size-m);
    }

    .breadcrumb{
		gap:var(--size-l);
	}

    .breadcrumb li:not(:last-child)::after {
	  margin: 0 0 0 var(--size-m);
	}

	.inline-list{
		justify-content: flex-start;
	}

	.available-on .inline-list{
		justify-content: flex-start;
	}

	.thumbnail{
		width: var(--thumbnail-m);
	}

	.thumbnail-s{
		width: var(--thumbnail-s);
	}

}

/* Medium devices (tablets, 768px and up) */
@media (min-width: 768px) {
	.card-content{
		flex-direction: row;
		justify-content: space-between;
	}


  
}

/* Large devices (desktops, 992px and up) */
@media (min-width: 992px) {

	.menu-toggle{
		display: none;
	}

	#nav{
		transform: translateY(0);
		padding: 0;
		background-color: transparent;
		position: static;
		display: flex;
        justify-content: space-between;
        transition: transform 0;
	}

	#nav ul{
		display: flex;
		flex-wrap: wrap;
		gap:var(--size-xl);
		margin-top: 0;
	}

	#nav hr{
		display: none;
	}

	#nav .social-link,
	#nav .social-link img{
		width: var(--size-xl);
		height: var(--size-xl);
	}

	.hero{
		margin-top: var(--size-s);
		margin-bottom: var(--size-xxl);
	}

	.introduction{
		display: grid;
		grid-template-columns: 3fr 2fr;
		gap: var(--size-xxl);
	}
  
}