/*
 * Canonical stylesheet for "you hear me" poem pages.
 *
 * This is the single source of truth for the site's visual language:
 * GitHub dark theme, Courier New for the poem body, blue titles,
 * red dates, green ellipses. New/regenerated poem pages should link
 * to this file rather than embedding their own <style> block, so a
 * design change only has to happen in one place.
 *
 * Union of the conventions that had accumulated across individual
 * poem pages before this file existed (line numbers, italics,
 * indentation levels, footnotes, ellipses).
 */

body {
    font-family: 'Arial', sans-serif;
    line-height: 1.6;
    background-color: #0d1117; /* GitHub dark background */
    color: #c9d1d9; /* Light text color */
    max-width: 800px;
    margin: 0 auto;
    padding: 20px;
    overflow-wrap: break-word;
    /*
     * Deliberately NOT white-space: pre here. <pre> already preserves
     * whitespace on its own - inheriting it onto body as well made the
     * raw newlines/indentation *between* tags in the template (e.g.
     * between </h1> and <pre>) render as visible blank space, inflating
     * the title-to-verse gap well past any margin actually set below.
     */
}

h1 {
    /*
     * Half of the ~80px gap this page used to render (measured in a
     * real browser before/after) - the rest of that gap was the stray
     * whitespace-preservation bug described above, not a deliberate
     * margin, so halving the OLD number would have halved a bug.
     */
    margin-bottom: 37px;
    color: #58a6ff; /* Blue color for the title */
    /*
     * Line the title's first character up with the poem's first
     * character. That offset is pre's 40px padding, plus the 30px
     * line-number gutter, plus the single space after the number
     * (0.6em in Courier New, i.e. 0.6rem at the root size).
     */
    padding-left: calc(40px + 30px + 0.6rem);
}

h2 {
    font-size: 1em; /* Same font size as the body */
    font-weight: bold;
    text-align: left;
    padding-left: 120px; /* Indent with one tab, stanza heading */
    margin: 0;
    margin-bottom: 5px;
    padding-top: 10px;
    color: #56d364; /* GitHub green */
}

/*
 * The poem's real width. <pre> does not wrap, so the longest line is
 * what actually sets it - wider than the 800px body when a line is
 * long, narrower when every line is short. Sizing this wrapper to that
 * content gives the footnotes something to measure against, so a
 * citation wraps at the same right edge the verse ends at instead of at
 * the edge of the screen. min-width keeps it from collapsing narrower
 * than the body on a short poem.
 */
.poem {
    width: max-content;
    min-width: 100%;
}

pre {
    font-family: 'Courier New', monospace;
    font-size: 1em;
    color: #c9d1d9;
    padding-left: 40px; /* Space for line numbers */
    margin: 0; /* No reliance on the browser's default pre margin */
}

a {
    color: #58a6ff; /* GitHub link blue */
    text-decoration: none;
}

a:hover {
    text-decoration: underline;
}

em,
.date {
    color: red; /* Date styling */
    font-size: 1em;
    display: block;
    /*
     * Line the date up with the title and the verse. It already sits at
     * pre's 40px padding, so it needs the rest of the offset: the 30px
     * line-number gutter plus the space that follows the number.
     */
    padding-left: calc(30px + 0.6rem);
}

.line-number {
    /*
     * The numeric-constant orange from GitHub's own dark syntax theme
     * (Primer), not an arbitrary orange - it's the color GitHub itself
     * uses for numbers in code, which is exactly what a line number is.
     */
    color: #ffa657;
    display: inline-block;
    width: 30px; /* Fixed width for alignment */
    text-align: right;
    position: relative;
    left: -40px; /* Keeps line numbers visually secondary and out of the text flow */
}

.italic {
    font-style: italic;
}

.indent {
    padding-left: 40px;
}

.double-indent {
    padding-left: 80px;
}

.fifth-indent {
    padding-left: 200px;
}

.green-ellipsis,
.ellipsis {
    color: #56d364; /* Standardized ellipsis green */
}

/*
 * Stanza / section markers ("1.", "2."). These are numbered lines of the
 * poem like any other, not headings outside the numbering — the green
 * and the indent are all that set them apart. The 80px matches where the
 * old h2 treatment sat relative to the poem text (h2 was 120px from the
 * body edge; the poem starts at pre's 40px).
 */
.stanza {
    color: #56d364; /* GitHub green */
    font-weight: bold;
    padding-left: 80px;
}

.footnote {
    font-size: 0.85em;
    color: #c9d1d9;
    margin-top: 5px;
    /*
     * Same left edge as the title, the verse and the date - pre's 40px
     * padding, the 30px line-number gutter, and the space after the
     * number. In px and rem rather than em so the 0.85em type above
     * doesn't shrink the offset and pull the citations out of line.
     */
    padding-left: calc(40px + 30px + 0.6rem);
    line-height: 1.2;
    word-wrap: break-word;
    /*
     * Wrap where the verse ends, not where the viewport does. width:0
     * keeps a long citation from being what makes .poem wide - left to
     * itself it would stretch to its longest unbroken run - and
     * min-width then fills whatever width the verse settled on.
     */
    box-sizing: border-box;
    width: 0;
    min-width: 100%;
}

.footnote-number {
    color: #2ea043;
    font-size: 0.75em;
    vertical-align: super;
    display: inline-block;
    margin-top: -0.5em;
}

/*
 * Narrow screens: fit the poem to the screen instead of asking the
 * reader to pinch it into view.
 *
 * <pre> does not wrap, so the longest line decides the page's width, and
 * the poems disagree wildly about that - 19 characters at the narrowest,
 * 117 at the widest. One mobile font size would leave half of them
 * overflowing and shrink the other half for nothing, so each page
 * carries its own width as --cols and is sized from it.
 *
 * This is not smaller than it already reads. A 61-column poem on a 390px
 * phone lays out 695px wide today, so seeing it whole means zooming to
 * 56% - an effective 9px. Sizing it to fit lands in the same place. What
 * goes away is the gesture, on every page, every time.
 *
 * Desktop is untouched: the block sits behind a media query and the
 * clamp's ceiling is the 1rem it already was.
 */
@media (max-width: 700px) {
    body {
        padding: 12px;
    }

    .poem {
        /*
         * The verse needs pre's indent, the line-number box, the space
         * after the number, and then its own characters - all of them
         * 0.6em wide in Courier New. Solving that for the font size is
         * this: 4.975em of fixed offset, 0.6em per column.
         */
        font-size: clamp(8.5px, calc((100vw - 24px) / (var(--cols, 60) * 0.6 + 4.975)), 1rem);

        /*
         * Desktop sizes this wrapper to the longest line so a citation
         * wraps where the verse ends rather than at the screen edge. On
         * a phone that hands the decision to the title, which is prose
         * and could simply wrap: a long one laid the page out 528px wide
         * on its own. Let the wrapper be the screen and let the title
         * wrap inside it.
         */
        width: auto;
        min-width: 0;
    }

    pre {
        padding-left: 2.5em;
    }

    .line-number {
        width: 1.875em;
        left: -2.5em;
    }

    /*
     * The title and the citations are the two places an em means
     * something different from what it means in the verse, and both have
     * to land on the verse's left edge.
     *
     * A custom property does not solve this: an em inside one is resolved
     * where the property is used, not where it was written, so a shared
     * --gutter comes out scaled by whatever type reads it. The offset is
     * therefore written in the verse's ems and divided by each element's
     * own multiple, which is the one form that resolves to the same
     * length everywhere.
     *
     * h1 is given an explicit size for the same reason: left alone it is
     * the browser's 2em, which over 9px verse is a 19px title, and the
     * arithmetic below would have nothing fixed to divide by.
     */
    h1 {
        font-size: 1.6em;
        padding-left: calc((2.5em + 1.875em + 0.6em) / 1.6);
        /* The 37px above, kept as its ratio to the type it sits over. */
        margin-bottom: 0.8em;
    }

    /* Already inside pre's indent, so only the rest of the offset. */
    em,
    .date {
        padding-left: calc(1.875em + 0.6em);
    }

    .footnote {
        padding-left: calc((2.5em + 1.875em + 0.6em) / 0.85);
    }

    .indent {
        padding-left: 2.5em;
    }

    .double-indent {
        padding-left: 5em;
    }

    .fifth-indent {
        padding-left: 12.5em;
    }

    .stanza {
        padding-left: 5em;
    }

    h2 {
        padding-left: 7.5em;
    }
}