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

.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: white;
	white-space: initial;
	display: inline;
	position: fixed;
  left: 0;
  top: 0;
  writing-mode: vertical-rl;
  transform: rotate(.5turn);
  height: 100vh;
  text-decoration-color: plum;
  text-decoration-line: underline;
  text-decoration-style: wavy;
  text-decoration-thickness: clamp(1px,8vw,1.1em);
  text-decoration-skip-ink: none;
  z-index: -1;
  padding: .3em 0 0;
  filter: brightness(1);
  font-size: clamp(1em,12vh,20vh);
 }
@media (max-height: 30em) {
  .episode-intro h1 {
		font-size: clamp(1em,11vh,20vh);
	}
}
.episode-intro h1 span {
  padding: 0 1em 0 0;
}

@media (max-width: 54em) {
	.episode-intro footer {
		position: absolute;
	}
	.episode-intro {
		margin-top: 5em;
	}
}
@media (max-width: 44em) {
	.episode-intro {
		margin-top: 0;
		position: sticky;
		top: -3em;
		z-index: -1;
	}
	.episode-intro h1 {
		writing-mode: horizontal-tb;
		transform: rotate(0deg);
		position: relative;
		height: auto;
		font-size: clamp(2em,12vw,20vh);
	}
	header {
		position: relative;
	}
	.episode-intro footer {
		position: absolute;
		left: 0;
		margin: 0;
	}
}


.nav li a {
	background-color: white;
}

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

.direct-link {
	color: slateblue;
}

.direct-link:hover {
	color: darkslateblue;
}
p {
  transition: .2s;
  line-height: 1.8;
	text-decoration-color: powderblue;
	text-decoration-line: underline;
	text-decoration-style: solid;
	text-decoration-thickness: 1em;
	-webkit-text-decoration-skip: auto;
	text-decoration-skip-ink: none;
}
p:nth-of-type(odd) { text-decoration-color: khaki; }
p:nth-of-type(even) { text-decoration-color: plum; }

p.closed-caption {
	text-decoration-style: dotted;
	text-decoration-color: powderblue;
}
[id="why-does-this-page-look-like-this%3F"] ~ p {
  text-decoration-color: powderblue;
  text-decoration-style: double;
  -webkit-text-decoration-skip: auto;
  text-decoration-skip-ink: auto;
  font-style: italic;
}
[id="letmeread"] {
  position: fixed;
  left: -1000em;
}
[for="letmeread"] {
  position: sticky;
  color: whitesmoke;
  mix-blend-mode: difference;
  z-index: 2;
  top: 0;
  text-align: right;
  top: 0.2em;
	text-align: right;
	margin-top: 14.8em;
  margin-bottom: -16.8em;
	display: block;
}
@media (min-width: 54em) {
  [for="letmeread"] {
    margin-top: 12.6em;
    margin-bottom: -13.3em;
  }
}
@media (max-width: 44em) {
  [for="letmeread"] {
    margin-top: 0;
    margin-bottom: -1.2em;
  }
}
@media (max-width: 40em) {
  [for="letmeread"] {
    margin-top: 2em;
    margin-bottom: -1.3em;
  }
}
@media (max-width: 24em) {
  [for="letmeread"] {
    margin-top: -1.25em;
    margin-bottom: .75em;
  }
  header {
    position: relative;
    height: 3em;
    background-color: white;
	}
}
@media (max-width: 30em) {
	[for="letmeread"] {
		font-size: .9em;
	}
}
.para-big {
  font-size: 1.3em;
}
@media (min-width: 60em) {
  .para-big {
    font-size: 1.5em;
  }
  [for="letmeread"] {
    margin-top: 13.6em;
    margin-bottom: -14.7em;
  }
}
@media (min-width: 70em) {
  .para-big {
    font-size: 1.8em;
  }
  [for="letmeread"] {
    margin-top: 15em;
    margin-bottom: -16.7em;
  }
}

input:checked ~ p,
input:checked ~ .episode-intro h1 {
  text-decoration-color: hsla(0,0%,100%,0);
}
p code {
  font-style: normal;
}
label {
  cursor: pointer;
}
label:hover {
  color: powderblue;
}
input + label::before {
  content: '⨻ ';
  line-height: 1;
}
input:checked + label::before {
  content: '✓ ';
}
input[type="checkbox"]:focus + label {
  outline: dashed red;
}