main {
    font-family: serif;
    font-size: 18px;
    max-width: 32rem;
}

/* With heavy heart, use smaller font for the outer frame story, to match Hertel's Sanskrit book. Can revert when we have paragraph-level alignment. */
.outer-frame-story {
    font-size: 14px;
}

.pagenum img {
    border: 1px solid red;
}

/* On a narrow screen, the image occupies full width. */
@media screen and (max-width: 959px) {
    .pagenum img {
        display: block;
        /* The same width as "main" */
        width: 32rem;
    }
}

/* On a sufficiently wide screen, we can display the prose to the right of the (floated-left) images. */
@media screen and (min-width: 960px) {
    main {
        margin-left: 660px;
        margin-right: 5em;
    }

    .pagenum {
        position: absolute;
        /* This is to override the margin-left that we have set above. */
        left: 1%;
        /* This is for the margin-top trick with the images below.
           From https://stackoverflow.com/a/23220895 */
        overflow: hidden;
    }

    /* Doesn't seem to apply to lazy-loaded images though! */
    .pagenum img {
        --width: 500px;
        /* The original images are 2088 pixels wide and 3121 pixels tall.
           We want to leave out `--frac` of the top, so set negative margin. */
        margin-top: calc(-1 * var(--frac, 0.15) * 3121 * var(--width) / 2088 );
        width: var(--width);
    }
}

/* We use <pre>...</pre> for verses. */
pre {
    font-family: serif;
    margin-left: 25%;
    margin-bottom: -0.3em;
    margin-top: -0.3em;
}

/* An empty paragraph inserted between paragraphs (I don't remember why), but we want it to not take height. */
p.parbreak {
    margin-top: -4px;
    margin-bottom: -4px;
    line-height: 0.0px;
    height: 0.0px;
}

/* Just matching the style of Ryder's original I think? */
h1,
h2 {
    font-variant: small-caps;
}