:root {
  --brand-red: #b20e0e;
}

body {
  font-family: 'Vollkorn', serif;
  font-size: 1.125rem;
  max-width: 540px;
  margin: 0 auto;
}

h1 {
  text-align: center;
}

.playlist {
  column-count: 3;
}

.playlist p {
  break-inside: avoid;
}

.playlist p:first-child {
  margin-top: 0;
}

.caution {
  font-style: italic;
  font-size: 90%;
}

a {
  color: var(--brand-red);
}

.caution span.warning {
  color: var(--brand-red);
}

.scene p.stagedir,
i.stagedir {
  display: block;
  font-style: italic;
  font-size: 90%;
  text-indent: 0;
  margin: 21px;
}

i.stagedir + br {
  display: none;
}

i.stagedir::before,
i.parenthetical::before {
  content: "(";
}

i.stagedir::after,
i.parenthetical::after {
  content: ")";
}

.scene p {
  text-align: left;
  padding-left: 10px;
}

span.line {
  display: block;
  position: relative;
}

span.line a {
  position: absolute;
  left: -130px;
  top: 0;
  width: 80px;
  text-align: right;
  color: #ccc;
  text-decoration: none;
}

span.line a:hover {
  text-decoration: underline;
  color: #b96d6d;
}

.scene {
  padding: 0;
  border: none;
  border-bottom: medium double #333;
  color: #333;
  text-align: center;
}

.scene::after {
  content: "❦";
  display: inline-block;
  position: relative;
  top: 0.8em;
  margin: auto;
  font-size: 1.5em;
  padding: 0 0.25em;
  background: white;
}

b.speaker {
  text-transform: lowercase;
  font-variant: small-caps;
  font-weight: normal;
  font-size: 120%;
  color: var(--brand-red);
  margin: 0;
}

.act h2 {
  text-align: center;
}

b.speaker::after {
  content: "\00a0";
}

b.speaker + i.parenthetical::after {
  content: ")\00a0";
}

.scene p b {
  text-indent: -10px;
  display: inline-block;
}