body {
  background: white;
}

header {
	position: fixed;
}
/* .logo {
	height: 0;
	margin-bottom: 0;
} */

details.episode-intro {
  min-height: 100vh;
}
.episode-intro footer {
  writing-mode: initial;
	position: fixed;
	top: 0em;
	left: calc(40px + 1em);
	margin-top: clamp(1em, 4vw, 2em);
	margin-left: clamp(1em, 4vw, 2em);
}

.episode-intro h1 {
	background-color: transparent;
	white-space: initial;
  max-width: 15ch;
  font-size: clamp(3em, 8vw, 5em);
  line-height: 1em;
  margin-top: 1em;
  margin-top: 15vh;
  margin-bottom: 0.4em;
  padding: 0;
  filter: brightness(1);
  text-decoration-line: underline;
  text-decoration-style: solid;
  text-decoration-thickness: 0.5em;
  text-underline-offset: -0.5em;
  text-decoration-color: paleturquoise;
  text-decoration-skip-ink: none;
}
.episode-intro > summary::marker {
  font-size: clamp(3em, 8vw, 5em);
}
.episode-intro > summary ~ * {
  opacity: 0;
  transition: .8s;
}
.episode-intro[open] > summary ~ * {
  opacity: 1;
}


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

h3 {
  text-decoration-line: underline;
  text-decoration-style: solid;
  text-decoration-thickness: 0.5em;
  text-underline-offset: -0.5em;
  text-decoration-color: paleturquoise;
  text-decoration-skip-ink: none;
}


.player {
  top: 1em;
  border-radius: 1em;
  background: rgba(0,0,0,0.8)
}
.player:focus-within::before {
  content: "Whoah! Focus-within FTW!";
  position: absolute;
  transform: rotate(-10deg);
  background: darkmagenta;
  color: white;
  margin: -2em -3em;
  padding: .5em;
  border-radius: .3em;
}


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

.direct-link {
	color: slateblue;
}

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



[id="shownotes"] + ul li a {
  background: transparent;
}

[id="shownotes"] + ul li a:hover {
  background: thistle;
}

p {
  transition: .2s;
  line-height: 1.8;
}

p strong {
  background: none;
}

.shownotes {
  background: whitesmoke;
  padding: 1em 2em 1em;
  margin-bottom: 1em;
  border-radius: 0.5em;
}

.shownotes .direct-link {
  display: none;
}


.measure-radio:hover {
  color: black;
  border-color: slategray;
}

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

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

#conversation p:nth-of-type(odd) { background-color: lavender; align-self: flex-start; margin-right: 4em;}

#conversation p:nth-of-type(even) { background-color: paleturquoise; align-self: flex-end; margin-left: 4em; }



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

.para-big {
  font-size: 1.3em;
}

@media (min-width: 60em) {
  .para-big {
    font-size: 1.5em;
  }

}
@media (min-width: 70em) {
  .para-big {
    font-size: 1.8em;
  }
}

/* Interaction */

body {
  --hue: 0;
  --lightness: 100%;
  transition: background-color 5s cubic-bezier(0,1,.5,1);
  background-color: hsl(var(--hue),70%,var(--lightness));
}
main {
	--hue: 90;
	--lightness: 100%;
  transition: background-color 3s cubic-bezier(0,1,.5,1);
  background-color: hsl(var(--hue),70%,var(--lightness));
  padding: 0 1em 1em;
}
/* HOVERS */

body:hover {
	--lightness: 85%;
}
body:hover main {
	--hue: 30;
	--lightness: inherit;
}
body main:hover {
	--hue: 60;
}
header:hover + main {
	--hue: 90;
}

/* Focus-withins */
body:focus-within {
	--lightness: 85%;
  --hue: -30;
}
body:focus-within main {
	--lightness: inherit;
  --hue: 120;
}
body main:focus-within {
	--hue: 150;
}
header:focus-within + main {
	--hue: 180;
}

/* hover and focus within */
body:focus-within:hover {
  --hue: -60;
}
body:focus-within:hover main {
	--hue: 210;
}
body main:focus-within:hover {
	--hue: 240;
}
header:focus-within:hover + main {
	--hue: 270;
}
header:focus-within + main:hover {
	--hue: 300;
}
header:hover + main:focus-within {
	--hue: 330;
}
h2[id="why-does-this-page-look-like-this%3F"] {
  text-decoration-line: underline;
  text-decoration-style: solid;
  text-decoration-thickness: 0.01em;
  text-underline-offset: -0em;
  text-decoration-color: transparent;
  text-decoration-skip-ink: none;
  transition: 1s .7s;
}

h2[id="why-does-this-page-look-like-this%3F"]:target {
  text-decoration-thickness: 0.9em;
  text-underline-offset: 0;
  text-decoration-color: palevioletred;
  color: black;
  -webkit-text-decoration-skip: none;
}

@supports (text-decoration-skip-ink: none) {
  h2[id="why-does-this-page-look-like-this%3F"]:target {
    text-decoration-thickness: 0.9em;
    text-underline-offset: -0.8em;
    text-decoration-color: palevioletred;
    color: black;
    text-decoration-style: wavy;
  }
}
* {
  scroll-behavior: smooth;
}
[href="#body"] {
  color: hsl(var(--hue),70%,var(--lightness));
  background-color: inherit;
}

[href="#body"]:hover,
[href="#body"]:focus {
  color: black;
}

body:target * {
  transition: 3s 1s,
    transform-origin 0s 0s;
  transform: rotate(18deg);
  display: block;
  transform-origin: 50% 0%;
}
@media (max-width: 40em) {
  body:target * {
    transform: rotate(4deg);
    transform-origin: 50% 70%;
  }
  body:target *:hover {
    transform: rotate(0deg);
    transition: 2s;
  }
}
body:target *:hover {
  transform: rotate(0deg);
  transition: 2s;
}
body:target main,
body:target #conversation,
body:target details  {
  transform: rotate(0deg)
}


.sig {
  font-style: italic;
}
script {
  display: none !important;
}

details details {
  margin: 0 0 1em;
}
details details summary {
  margin-bottom: 1em;
  font-size: clamp(1.1em, 1.6vw, 1.3em);
  cursor: pointer;
}
details details summary ~ * {
  opacity: 0;
  transition: .8s;
}
details[open] details[open] summary ~ * {
  opacity: 1;
}
summary span {
  display: inline-block;
  max-width: 0;
  opacity: 0;
  transition: .3s;
}
[open] > summary span {
  max-width: 4em;
  opacity: 1;
}
[open] > summary,
[open] > summary span {
  text-decoration-line: underline;
  text-decoration-style: wavy;
  text-decoration-color: red;
}
body:target details details summary {
  display: none;
}