/* ============================================================
   PLAY — structure shared by every mural of a play: speakers,
   lines, and line-for-line exchanges.
   Load after mural.css and before the mural's own stylesheet:
   colors.css, mural.css, play.css, then the mural's sheet.
   Novels don't load it; Moby-Dick's hymn has a .line of its own.
   ============================================================ */

:root {

    /* Speaker color. Each speaker class the mural defines sets this
       to that character's color; a speaker with no class takes the
       :root value. Give a finished color. Neutral default; each
       mural overrides it. */
    --speaker-ink:    var(--limestone);
    --speaker-font:   'Inter', sans-serif;
    --speaker-column: 8.5rem; /* Wide enough for the play's longest name at the mural's label size. */

    --stage-direction-font: 'Inter', sans-serif;
    --stage-direction-ink:  var(--flax);

    /* Written Letters / Notes; Phoebe's letter, the tree verses */
    --written-font: 'IM Fell English', serif;
    --written-rule: color-mix(in srgb, var(--parchment) 40%, transparent);

    /* Speech rhythm */
    --space-above-speaker:          1.3rem;  /* the turn: last line to the next name; none above the first */
    --space-below-speaker:          0.5rem;  /* a name to its own speech: tighter, so the name belongs to it */
    --space-between-exchange-lines: 0.6rem;
    --space-around-song:            1.75rem; /* where a song meets speech in one excerpt */

    /* How far a song stands in from the column's left edge. The same
       for every song, so they all share one edge down the page. */
    --song-inset: 3.5rem;
}

/* ============================================================
   SPEECHES
   ============================================================ */

.excerpt .speaker {
    margin: var(--space-above-speaker) 0 var(--space-below-speaker);
    font-family: var(--speaker-font);
    color: var(--speaker-ink);
    font-size: 0.8rem;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    font-weight: 500;
}

.excerpt .speaker-inline {
    font-family: var(--speaker-font);
    color: var(--speaker-ink);
    font-size: 0.72rem;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    font-weight: 500;
    white-space: pre-line;
}

/* No gap above the excerpt's first name, whether or not a song opens it. */
.excerpt > .speaker:first-child,
.excerpt > .song:first-child > .speaker:first-child {
    margin-top: 0;
}

.line {
    font-size: 1.35rem;
    line-height: 1.65;
    font-weight: 300;
    white-space: pre-line;
}

.line-inline {
    font-size: 1.15rem;
    line-height: 1.55;
    font-weight: 300;
    white-space: pre-line;
}

/* ============================================================
   SONGS
   ============================================================ */

/* Set in by a fixed amount, not centered: centering on each song's
   longest line moves the edge from one song to the next. The speaker's
   name stands at the inset with the lines. Italic, so a song still reads
   as one on a phone, where the inset is small. */
.song {
    padding-left: var(--song-inset);
}

.song:not(:first-child) {
    margin-top: var(--space-around-song);
}

.song:not(:last-child) {
    margin-bottom: var(--space-around-song);
}

.song .line {
    font-style: italic;
    line-height: 1.75;
    font-weight: 400;
}

/* ============================================================
   EXCHANGES (stichomythia)
   ============================================================ */

/* Line-for-line dialogue: speaker in a narrow column, line beside it. */
.excerpt--exchange {
    display: flex;
    flex-direction: column;
    gap: var(--space-between-exchange-lines);
}

.exchange-line {
    display: grid;
    grid-template-columns: var(--speaker-column) 1fr;
    gap: 1rem;
    align-items: baseline;
}

/* ============================================================
   Stage Directions
   ============================================================ */

.stage-direction {
    font-family: var(--stage-direction-font);
    font-size: 0.85rem;
    letter-spacing: 0.04em;
    color: var(--stage-direction-ink);
    margin: 0.6rem 0;
}

/* ============================================================
   Written Lines
   ============================================================ */

/* Words read off the page (Phoebe's letter, the verses on the trees) */
.line--written {
    font-family: var(--written-font);
    font-size: 1.2rem;
    line-height: 1.7;
    padding-left: 1.5rem;
    border-left: 1px solid var(--written-rule);
    margin-block: 0.75rem;
    font-weight: 400;
}


/* Too narrow for two columns: stack each speaker above the line.
   Same breakpoint as the shared frame in mural.css. */
@media (max-width: 40rem) {
    :root {
        --song-inset: 1.25rem;
    }

    .exchange-line {
        grid-template-columns: 1fr;
        gap: 0.15rem;
    }
}