body {
  background: white;
  display: block;
  --episode-font: 'American typewriter', 'courier new', 'courier', monospace, serif;
}

main {
  display: grid;
  grid-template-columns: 2fr 3fr;
  /* grid-template-rows: 1fr auto 1fr; */
  grid-area:initial;
}

* {
  font-family: var(--episode-font) !important;
  letter-spacing: 0.03em;
}


h2 {
  font-size: clamp(2em, 6vw, 2.5em);
  max-width: 15ch;
}

p {
  font-size: clamp(0.9em, 1.5vw, 1.1em);
  line-height: 1.7em;
}

.episode-footer {
  grid-area: initial;
}

.episode-title {
  grid-column: 1 / span 1;
  /* grid-row: 1 / span 2; */
  padding: 2vw;
}

.episode-intro, .episode-transcript, .episode-meta, .episode-links, .episode-player, .episode-shownotes, .episode-art, .episode-footer {
  grid-column: 2 / span 1;
  padding: 3vw;
}

/* //////////////////////////////////////////////////////////////////////////////////////

Episode title (left hand sticky area)

////////////////////////////////////////////////////////////////////////////////////// */

.episode-title {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  height: 100vh;
  position: sticky;
  top: 0;
  background-color: linen;
  text-align: center;
}

.episode-title h1 {
	background-color: initial;
	white-space: initial;
  max-width: 15ch;

  font-size: clamp(2.5em, 3vw, 4em);
  line-height: 1em;
  margin-bottom: 0.4em;
  padding: 0;
  filter: brightness(1);
}

.episode-title h3 {
  margin-bottom: 0.2em;
  text-decoration: none;
  text-decoration-thickness: 2px;
}

.episode-title .meta {
  writing-mode: initial;
  /* text-transform: uppercase; */
  color: black;
}

.episode-title .meta a {
  text-decoration: none;
  color: black;
}

.episode-title .meta a:hover {
  text-decoration: underline;
  /* background-color: navajowhite; */
}


/* //////////////////////////////////////////////////////////////////////////////////////

Episode intro (player and shownotes)

////////////////////////////////////////////////////////////////////////////////////// */

.episode-intro {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  text-align: center;
  padding: 5vw;
  padding-bottom: 0;
}

.episode-intro p {
  font-weight: 600;
  font-size: clamp(1.1em, 1.5vw, 1.3em);
  line-height: 1.6em;
  margin-bottom: 2em;
  max-width: 30em;
}

.episode-intro h3, .episode-shownotes h3 {
  color: black;
  -webkit-font-smoothing: antialiased;
}

.episode-player {
  position: sticky;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  top: 0;
  /* transform: rotate(-1deg); */
}

.episode-player audio {
  width: 250px;
  /* transform: rotate(1deg); */
  background-color: black;
  /* height: 100px; */
}

.episode-shownotes {
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  align-items: center;
  text-align: center;
  padding: 2em 5vw 5vw;
}

.episode-shownotes h3 {
  margin-bottom: 1em;
}

.episode-shownotes ul {
  list-style: none;
  margin: 0 0 5vh;
  padding: 0;
}

.episode-shownotes ul li {
  margin-bottom: 1em;

}

.episode-shownotes a {
  color: black;
}

.episode-shownotes a:hover {
  color: tomato;
}


/* //////////////////////////////////////////////////////////////////////////////////////

Transcript

////////////////////////////////////////////////////////////////////////////////////// */

.episode-transcript {
  display: flex;
  flex-direction: column;
  align-items: center;
  padding-top: 0;
}

.episode-transcript h3 {
  text-align: center;
}

.episode-transcript .closed-caption {
  text-align: center;
  max-width: none;
}

.nav li a:hover {
	background-color: thistle;
}

.direct-link {
	color: black;
}

.direct-link:hover {
	color: tomato;
}


p strong {
  background: none;
}

#script p {

  line-height: 1.7em;
  max-width: 35em;
  margin-bottom: 2em;
  position: relative;
}

#script p b {
  position: relative;
}

#script p b:before {
  content:'';
  position: absolute;
  display: block;
  mix-blend-mode: multiply;
  width: 4.7em;
  margin-left: -0.5em;
  transform: rotate(1deg);
  height: 1.8em;
  clip-path: polygon(5% 0, 50% 0, 53% 2%, 78% 0, 85% 3%, 100% 0, 95% 90%, 80% 93%, 75% 90%, 13% 95%, 3% 90%);
  background-image: linear-gradient(45deg, yellow, lemonchiffon);
}

#script p:nth-of-type(even) b:before {
  width: 4.3em;
  transform: rotate(-1deg);
  clip-path: polygon(0 0, 50% 0, 53% 2%, 78% 0, 85% 3%, 97% 0, 100% 90%, 80% 93%, 75% 90%, 13% 95%, 3% 90%);
  background-image: linear-gradient(45deg, cyan, paleturquoise);
}



/* Bubble styles (left and right) – wrap the conversation in #conversation */

#conversation {
  display: flex;
  flex-direction: column;
}

#conversation p {
  padding: 1em;
  border-radius: 1em;
}

#conversation p:nth-of-type(odd) {
  border-top-left-radius: 0.1em;
  background-color: linen;
  align-self: flex-start;
  margin-right: 4em;}

#conversation p:nth-of-type(even) {
  border-top-right-radius: 0.1em;
  background-color: moccasin;
  align-self: flex-end;
  margin-left: 4em; }


.para-big {
  background-color: transparent !important;
}

p.closed-caption {
	text-decoration-style: dotted;
	text-decoration-color: powderblue;
}
[id="why-does-this-page-look-like-this%3F"]:target {
  padding-top: 6em;
}


/* //////////////////////////////////////////////////////////////////////////////////////

Other

////////////////////////////////////////////////////////////////////////////////////// */


.episode-art {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  grid-column: 2 / span 1;
  padding: 5vw;
  text-align: center;
}

.prevnext {
  text-align: center;
}

.prevnext li a {
  background-color: transparent;
}

.prevnext li a:hover {
  background-color: transparent;
}

p code {
  font-style: normal;
}

.episode-footer {
  text-align: center;
}

.episode-footer ul {
  padding: 0;
}

.episode-footer ul li {
  list-style: none;
  margin: 0 0 0.5em;
  padding: 0;
}

.episode-footer ul li a {
  color: black;
  /* background-color: khaki; */
}

.episode-footer ul li a:hover {
  /* background-color: tomato; */
}

.logo {
  display: inline-block;
}

abbr {
  font-variant-caps: initial;
}

/* MEDIA  */

@media (max-width: 60em) {

  .episode-content, .episode-footer, .episode-title {
    grid-column: 1 / span 2;
    padding: 2vw;
  }

  .episode-title {
    position: relative;
    min-height: 60vh;
    padding: 10vw;
  }

  .episode-intro {
    padding-top: 8vh;
  }

  .episode-shownotes {
    padding-bottom: 10vh;
  }

}