:root {
  --bg: #f4efe9;
  --ink: #2b2a28;
  --accent: #465f57;
  --accent-soft: #3b514a;
  --muted: #6f6a63;
  --light-muted: #9a938b;
  --border: #d8d2cb;

  --page-width: 1120px;
  --text-width: 760px;
  --image-width: 900px;

  --inner-text-width: 620px;
  --speech-indent: 2.1em;
  --speaker-shift: 1.3em;
}

* {
  box-sizing: border-box;
}

html,
body {
  margin: 0;
  padding: 0;
  -webkit-text-size-adjust: 100%;
}

body {
  background: var(--bg);
  color: var(--ink);
  font-family: Georgia, "Times New Roman", serif;
  line-height: 1.68;
}

/* PAGE */

.page {
  width: 100%;
  padding: 34px 28px 84px;
}

.play {
  max-width: var(--page-width);
  margin: 0 auto;
}

/* HEADER */

.play-header {
  max-width: var(--text-width);
  margin: 0 auto 34px;
  text-align: center;
}

.play-header h1 {
  margin: 0;
  color: var(--accent);
  font-weight: 500;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  line-height: 1.03;
}

.title-line {
  display: block;
  font-size: clamp(2rem, 4.4vw, 3rem);
}

.title-line:first-child {
  margin-bottom: 6px;
}

.subtitle {
  margin: 24px 0 14px;
  font-size: 1.38rem;
  font-style: italic;
  color: var(--muted);
}

.cast-label {
  margin: 22px 0 8px;
  font-size: 0.92rem;
  color: var(--muted);
}

.cast-line {
  margin: 0 auto;
  max-width: 700px;
  font-size: 0.98rem;
  color: var(--muted);
  line-height: 1.62;
  text-align: center;
}

.bullet {
  color: var(--light-muted);
}

/* IMAGE */

.hero-image {
  margin: 42px auto 56px;
  text-align: center;
}

.hero-image img {
  display: block;
  width: 100%;
  max-width: var(--image-width);
  height: auto;
  margin: 0 auto;
  border: 1px solid var(--border);
}

/* PLAY TEXT */

.play-text {
  max-width: var(--text-width);
  margin: 0 auto;
  font-size: 1.08rem;
}

.play-text p {
  margin-top: 0;
  margin-bottom: 0.72em;
}

.stage-direction,
.line,
.speaker {
  max-width: var(--inner-text-width);
  margin-right: auto;
}

/* STAGE DIRECTIONS */

.stage-direction,
.stage-inline {
  font-style: italic;
  color: var(--muted);
}

.stage-direction {
  margin-left: auto;
  margin-bottom: 0.95em;
}

.stage-inline {
  margin-left: auto;
  margin-top: -0.08em;
  margin-bottom: 0.72em;
}

/* SPEAKER + DIALOGUE STRUCTURE */

.speaker {
  margin-left: auto;
  margin-top: 1.3em;
  margin-bottom: 0.3em;
  transform: translateX(calc(-1 * var(--speaker-shift)));
  color: var(--accent-soft);
  font-variant: small-caps;
  letter-spacing: 0.09em;
  font-size: 1rem;
}

.line {
  margin-left: auto;
  padding-left: var(--speech-indent);
  color: var(--ink);
}

.speaker + .line {
  margin-top: 0;
}

/* DEDICATION */

.dedication {
  max-width: var(--text-width);
  margin: 62px auto 16px;
  text-align: center;
  font-size: 0.92rem;
  color: var(--light-muted);
  font-style: italic;
}

.dedication a {
  color: inherit;
  text-decoration: none;
}

.dedication a:hover {
  opacity: 0.8;
}

/* FOOTER */

.footer {
  max-width: var(--text-width);
  margin: 40px auto 0;
  text-align: center;
}

.signature {
  color: var(--light-muted);
  text-decoration: none;
  font-size: 0.92rem;
  letter-spacing: 0.28em;
  text-transform: lowercase;
}

.signature:hover {
  opacity: 0.8;
}

/* TABLET / SMALL LAPTOP */

@media (max-width: 900px) {
  :root {
    --image-width: 100%;
    --inner-text-width: 640px;
    --speech-indent: 1.8em;
    --speaker-shift: 1em;
  }

  .page {
    padding: 28px 22px 72px;
  }

  .subtitle {
    margin: 20px 0 12px;
    font-size: 1.28rem;
  }

  .cast-label {
    margin-top: 20px;
  }

  .hero-image {
    margin: 36px auto 48px;
  }
}

/* MOBILE */

@media (max-width: 700px) {
  :root {
    --inner-text-width: 100%;
    --speech-indent: 1.05em;
    --speaker-shift: 0.35em;
  }

  .page {
    padding: 30px 22px 56px;
  }

  .play-header {
    margin-bottom: 26px;
  }

  .play-header h1 {
    line-height: 1.02;
  }

  .title-line {
    font-size: 2.05rem;
  }

  .title-line:first-child {
    margin-bottom: 4px;
  }

  .subtitle {
    margin: 18px 0 14px;
    font-size: 1.32rem;
  }

  .cast-label {
    margin: 18px 0 8px;
    font-size: 0.92rem;
  }

  .cast-line {
    max-width: 100%;
    font-size: 0.98rem;
    line-height: 1.68;
  }

  .hero-image {
    margin: 30px auto 40px;
  }

  .hero-image img {
    max-width: 100%;
  }

  .play-text {
    font-size: 1.04rem;
  }

  .stage-direction {
    margin-bottom: 1em;
  }

  .speaker {
    margin-top: 1.25em;
    margin-bottom: 0.28em;
    font-size: 1rem;
  }

  .line {
    padding-left: var(--speech-indent);
  }

  .dedication {
    margin: 50px auto 14px;
    font-size: 0.9rem;
  }

  .footer {
    margin-top: 28px;
  }

  .signature {
    font-size: 0.88rem;
    letter-spacing: 0.2em;
  }
}