◊(Local Yarn Code "Diff")

@import url('font.css');
@import url('normalize.css');

/* Let us first address the matter of font size in different screen sizes. */

/* Mobile portrait screens will see a minimum 18px font. */
html { font-size: 18px; } 
html { font-size: 22px; } 

/* Start increasing type size dynamically at screen widths of 768px */
@media only screen and (min-width: 768px) { 
    html { font-size: 2.3vw; } 
    html { font-size: 2.8vw; } 
}

/* Top out at 23px for screens up to 800px TALL */
@media only screen and (min-width: 1000px) and (max-height: 800px) {
    html { font-size: 23px; } /* =  2.3% of 1000px (min-width) */
}
◊; @media only screen and (min-width: 1000px) and (max-height: 800px) {
◊;    html { font-size: 26px; } /* =  2.6% of 1000px (min-width) */
◊; }


/* Top out at 26px for screens 801px-1000px TALL */
@media only screen and (min-width: 1130px) and (min-height: 801px) and (max-height: 1000px) {
    html { font-size: 26px; }     /* =  2.3% of 1130px (min-width) */
/* Top out at 28px for screens 801px-1000px TALL */
@media only screen and (min-width: 1000px) and (max-height: 920px) { 
   html { font-size: 28px; }     /* =  2.8% of 1000px (min-width) */
}
/* For screens taller than 1000 px, top out at 32px */
@media only screen and (min-width: 1400px) and (min-height: 1001px) {
    html { font-size: 32px; }    /* =  2.3% of 1400px (min-width) */
@media only screen and (min-width: 1178px) and (min-height: 921px) {
    html { font-size: 33px; }    /* =  2.8% of 1178px (min-width) */
}

◊; Since line height is used in so many places...
◊(define LINEHEIGHT 1.3)
◊(define lineheight (string-append (number->string LINEHEIGHT) "rem"))
◊(define (x-lineheight multiple) 
    (string-append (real->decimal-string (* LINEHEIGHT multiple) 2) "rem"))

        font-size: ◊x-lineheight[1];
        line-height: ◊x-lineheight[1];
        margin: 0 0 ◊x-lineheight[1] 0;
        font-style: italic;
        font-weight: normal;
    }

    /* If you DO add an actual, formal title to an article, we’ll put it in small caps (Fabiol comes with
    /* Titles non-bold, non-smallcaps by default. This can be overridden in document markup. */
       some really nice small caps).
    */ 
    article>h1.entry-title {
        margin: 0 0 0 0;
        font-feature-settings: "smcp" on;
        text-transform: none;
        font-style: normal;
        line-height: 1.7rem;
    }

    /* This <SPAN> class is used in titles for Notes appended to earlier articles */
    h1.entry-title .cross-reference {

    pre code {
        border: 0;
        background: none;
        font-style: italic;
        font-size: 0.75rem;
    }

    pre.code {
        border: dotted #aaa 2px;
        padding-left: 0.2em;
    }

    pre.verse {
        font-family: ◊body-font;
        font-size: 1rem;
        line-height: ◊x-lineheight[1];
        width: auto;
        margin: ◊x-lineheight[1] auto;

        article.no-title footer.article-info {
            padding-top: 1.5rem;
        }
        
        section.entry-content {
            grid-area: main;
            /* Prevent content from overriding grid column sizing */
            /* See https://css-tricks.com/preventing-a-grid-blowout/ */
            min-width: 0;
        }

        section.entry-content:first-child {
            margin-top: 0 !important;
        }

        article>:last-child::after {