@font-face {
    font-family: "Courier Prime";
    font-weight: normal;
    font-style: normal;
    src: url("fonts/courier-prime.ttf") format("truetype");
}

:root {
    --border: #999;
    --light: #f6f6f6;
    --panel-gap: 1rem;
}

body {
    font-family: "Courier Prime", monospace;
    max-width: 900px;
    margin: 0 auto;
    padding: 2rem;
    line-height: 1.6;
}

h1 {
    margin-top: 0;
    padding-bottom: 0.5rem;
}

manuscript {
    display: block;
}

manuscript {
    counter-reset: spread;
}

.manuscript-meta {
    margin-bottom: 2rem;
}

.manuscript-meta div {
    margin: 0.15rem 0;
}

spread {
    display: block;

    counter-increment: spread;
    counter-reset: panel;

    margin-top: 3rem;
    padding-top: 1rem;
}

spread::before {
    display: block;
    content: "STRONA " counter(spread);

    font-size: 1.4rem;
    font-weight: bold;

    border-bottom: 1px solid var(--border);

    padding-bottom: 0.25rem;
    margin-bottom: 1.5rem;
}

panel {
    display: block;
    counter-increment: panel;
    margin: 1.5rem 0;
}

panel::before {
    display: block;
    content: "Panel " counter(panel);

    font-weight: bold;
    text-transform: uppercase;

    margin-bottom: 0.3rem;
}

panel[mood]::after {
    content:
        " [" attr(mood) "]";

    font-style: italic;
    opacity: 0.7;
}

dialogue, sfx {
    display: grid;

    grid-template-columns: 10rem 1fr;
    gap: 1.5rem;

    margin-left: 2rem;
}

dialogue::before {
    content: attr(speaker);
    text-transform: uppercase;
}
sfx::before {
    content: "SFX";
}

dialogue[trait="shout"] {
    font-weight: bold;
}
dialogue[trait="whisper"] {
    font-style: italic;
}
dialogue[trait="think"] {
    font-style: italic;
    color: #666;
}

narration {
    display: block;

    margin: 1rem 0;
    font-style: italic;
}

character {
    text-transform: uppercase;
}

pre {
    background: var(--code-bg);
    border: 1px solid var(--border);
    border-radius: 6px;
    padding: 1rem;
    overflow-x: auto;
}

p code,
li code {
    background: var(--code-bg);
    padding: 0.1rem 0.3rem;
    border-radius: 4px;
}

.keyword-grid {
    display: inline-block;
}

.keyword-grid pre {
    margin-top: 0.5rem;
}

table {
    width: 100%;
    border-collapse: collapse;
    margin: 1rem 0;
}

th, td {
    border: 1px solid var(--border);
    padding: 0.6rem;
    text-align: left;
    vertical-align: top;
}

th {
    background: var(--code-bg);
}