Index: web-extra/martin.css.pp
==================================================================
--- web-extra/martin.css.pp
+++ web-extra/martin.css.pp
@@ -27,25 +27,25 @@
 
 /* Mobile portrait screens will see a minimum 18px font. */
 html { font-size: 22px; } 
 
 /* Start increasing type size dynamically at screen widths of 768px */
-@media only screen and (min-width: 768px) { 
+@media (min-width: 768px) { 
     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: 26px; } /* =  2.6% of 1000px (min-width) */
 ◊; }
 
 /* Top out at 28px for screens 801px-1000px TALL */
-@media only screen and (min-width: 1000px) and (max-height: 920px) { 
+@media (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: 1178px) and (min-height: 921px) {
+@media (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)
@@ -72,632 +72,630 @@
       1.2 Front page
       1.3 Individual post body markup
       1.4 Journal views (article listings)  
  */
 
-@media screen {
-    body {
-        margin: 0;
-        background: ◊color-background;
-
-        /* Typography: `line-height` is important!
-           All verticle rhythm based on this value. */
-        line-height: ◊lineheight;
-        font-family: ◊body-font;
-
-        font-feature-settings: "calt" on, "liga" on, "clig" on, "dlig" on, "kern" on, "onum" on, "pnum" on;
-        color: ◊color-bodytext; /* Japanese Indigo, baby */
-    }
-
-    /* This is used to hide certain punctuation and things as long as CSS is available. 
-       Turn off CSS and voila: stuff appears. */
-    .x {
-        display: none;
-    }
-
-    .hist p {
-        font-variant-alternates: historical-forms;
-    }
-    .nonhist {
-        font-variant-alternates: normal;
-    }
-
-    main {
-        background: white;
-        margin: 0;
-        padding: ◊x-lineheight[0.5] ◊x-lineheight[1];
-    }
-
-    main > a > header {
-        text-align: center;
-    }
-
-    main > a > header h1 {
-        display: none;
-        /* font-size: ◊x-lineheight[1.5];
-        line-height: ◊x-lineheight[2];
-        margin: 0 0 ◊x-lineheight[0.5] 0;
-        font-weight: normal;
-        font-style: italic;
-        text-transform: lowercase;
-        color: ◊color-pagehead;
-        transition: color 0.25s ease; */
-    }
-
-    img.logo {
-        height: ◊x-lineheight[3];
-        filter: none;
-        transition: filter 0.5s ease;
-    }
-
-    header:hover img.logo {
-        filter: invert(12%) sepia(87%) saturate(2559%) hue-rotate(348deg) brightness(125%) contrast(88%);
-        transition: filter 0.5s ease;
-    }
-
-    /* I read somewhere years ago that you should specify styling for links in the
-       following order: Link, Visited, Hover, Active. 
-           → Remember the mnemonic: Lord Vader Has Arrived.
-       
-       Not sure if that's relevant advice any more but I still follow it. It can't hurt. */
-       
-    a:link, a:visited {         /* [L]ord [V]ader… */
-        color: ◊color-link;
-        text-decoration: none;
-    }
-
-    a:hover, a:active {         /* …[H]as [A]rrived */
-        color: ◊color-linkhover;
-        background: ◊color-linkbackground;
-    }
-
-    a.index-link:link, a.index-link:visited {
-        color: ◊color-bodytext;
-    }
-
-    a.index-link:hover, a.index-link:active {
-        color: #006400;
-    }
-
-    a.index-link::after {
-        content: '\f89b';
-        color: #809102;
-        position: relative;
-        top: -0.3em;
-    }
-
-    main>a {
-        color: inherit;
-    }
-    
-    span.links-footnote {
-        display: inline-block; /* allows keyframe animation to work */
-    }
-    
-    :target {
-        animation: hilite 2.5s;
-    }
-    @keyframes hilite {
-        0% {background: transparent;}
-        10% {background: #feffc1;}
-        100% {background: transparent;}
-    }
-
-    main > aside {
-        text-align: center;
-    }
-
-    nav {
-        font-family: 'Triplicate T4c', monospace;
-        font-feature-settings: "onum" off;
-        font-size: 0.7rem;
-        margin: 0;
-        margin-top: 0.5rem;
-        text-align: center;
-    }
-
-    nav ul {
-        list-style-type: none;
-        margin: 0.2em auto;
-        padding: 0;
-    }
-
-    nav li {
-        display: none; /* Numbers not displayed on mobile */
-        color: gray;
-    }
-
-    nav li.nav-text {
-        display: inline;
-        text-transform: uppercase;
-        letter-spacing: 0.05rem;
-        font-size: 0.6rem;
-    }
-
-    nav li.inactive-link {
-        color: #545454; /* Accessibility (contrast) */
-    }
-
-    nav li.current-page {
-        color: ◊color-bodytext;
-        padding: 0.2rem 0.5rem;
-        border-bottom: dotted ◊color-bodytext 2px;
-    }
-
-    nav li a {
-        padding: 0.2rem 0.5rem;
-    }
-
-    nav li a:link, nav li a:visited {
-        color: ◊color-bodytext;
-    }
-
-    nav li a:hover, nav li a:active {
-        color: ◊color-linkhover;
-        background: #ebebeb;
-    }
-    
-    i > em { font-style: normal; }
-    
-    /* On mobile, an <ARTICLE> is just a box. Later we'll do fancy stuff if grid support is detected. */
-    article {
-        margin: ◊x-lineheight[2] 0 ◊x-lineheight[1] 0;
-        padding-top: ◊x-lineheight[1];
-    }
-    article:first-of-type {
-        margin-top: ◊x-lineheight[1];
-    }
-
-    /* Here's my thing these days about article titles: they shouldn't be required. When you write in a
-       paper journal, do you think of a title for every entry? No! You just write the date. The date is
-       the heading. Makes sense. But, this means I've had to think long and hard about how to present two
-       different types of articles (those with titles AND dates, and those with just a date for the title). 
-
-        filter: invert(12%) sepia(87%) saturate(359%) hue-rotate(348deg) brightness(105%) contrast(88%);
-       For now: By default, the title-less article is assumed to be the norm. On these, we use <H1> to 
-       show the date in italics. */
-    article>h1 {
-        font-size: ◊x-lineheight[1];
-        line-height: ◊x-lineheight[1];
-        margin: 0 0 ◊x-lineheight[1] 0;
-        font-style: italic;
-        font-weight: normal;
-    }
-
-    /* Titles non-bold, non-smallcaps by default. This can be overridden in document markup. */
-    h1.entry-title {
-        margin: 0 0 0 0;
-        text-transform: none;
-        font-style: normal;
-        line-height: 1.7rem;
-    }
-
-    h1.entry-title.note-full {
-        font-feature-settings: "smcp" on, "liga" on, "clig" on, "dlig" on, "kern" on, "onum" on, "pnum" on;
-    }
-
-    /* This <SPAN> class is used in titles for Notes appended to earlier articles */
-    h1.entry-title .cross-reference {
-        font-feature-settings: "smcp" off, "liga" on, "clig" on, "dlig" on, "kern" on, "onum" on, "pnum" on;
-        font-style: italic;
-        text-transform: none;
-    }
-
-    /* `a.rel-bookmark` is only used in individual article or ‘journal’ views, 
-        not in listings; see the design docs.
-    */
-    a.rel-bookmark:link,        /* Lord  */
-    a.rel-bookmark:visited {    /* Vader */
-        text-decoration: none;
-        background: none;
-        color: ◊color-bodytext;
-    }
-
-    a.rel-bookmark:hover,       /* Has     */
-    a.rel-bookmark:active {     /* Arrived */
-        text-decoration: none;
-        background: ◊color-linkbackground;
-        color: #006400;
-    }
-
-    /* Here's where we add the minty fresh maple leaf glyph. */
-    a.rel-bookmark::after {
-        content: '\f894'; 
-        margin-left: 4px;
-        font-style: normal;
-        color: #809102;
-    }
-    a.rel-bookmark.note-permlink::after {
-        content: '\f897';
-        margin-left: 4px;
-    }
-    div.note a.rel-bookmark.note-permlink::after {
-        content: '';
-    }
-    div.note a.rel-bookmark.note-permlink::before {
-       font-family: ◊body-font;
-       font-size: 1rem;
-       content: '\00b6';
-       margin-left: -0.9rem;
-       float: left;
-       margin-top: -2px;
-    }
-
-    a.rel-bookmark:hover::after {
-        color: #aaba16;
-    }
-
-    a.cross-reference:link,
-    a.cross-reference:visited {
-        color: ◊color-bodytext;
-    }
-
-    a.cross-reference::before {
-        content: '☞\00a0';      /* Non-breaking space */
-        font-style: normal;
-        color: ◊color-xrefmark;
-    }
-
-    /* Footnote links */
-    sup a {
-        font-weight: bold;
-        margin-left: 3px;
-    }
-
-    p.time {
-        margin: 0 0 ◊x-lineheight[1] 0;
-    }
-    footer.article-info {
-        margin: ◊x-lineheight[1] 0;
-        text-align: center;
-        font-feature-settings: "smcp" on, "liga" on, "clig" on, "dlig" on, "kern" on, "onum" on, "pnum" on;
-        color: #555555; /* Accessibility (contrast) */
-    }
-
-    footer.article-info::before {
-        content: "☞\00a0";
-    }
-    
-    /* Within article info, don’t display series info when on a series page (redundant) */
-    body.series-page .series-part {
-        display: none;
-    }
-
-    p.time::before {
-        content: none;
-    }
-
-    p.time {
-        font-size: ◊x-lineheight[0.75];
-        line-height: ◊x-lineheight[1];
-        font-feature-settings: "scmp" off, "liga" on, "clig" on, "dlig" on, "kern" on, "onum" on, "pnum" on;
-        text-transform: none;
-        font-style: italic;
-    }
-    
-    article>:last-child::after {
-        content: '\f88d';  /* Round glyph */
-        color: ◊color-bodytext;
-        font-size: ◊x-lineheight[1];
-        line-height: ◊x-lineheight[1];
-        text-align: center;
-        display: block;
-        margin: ◊x-lineheight[1] 0;
-    }
-
-    p {
-        margin: 0;
-        text-indent: 0;
-    }
-
-    p + p {
-        text-indent: 2em;
-    }
-
-    section.entry-content blockquote {
-        font-size: ◊x-lineheight[0.7];
-        line-height: ◊derive-lineheight[7 #:per-lines 6];
-        margin: ◊x-lineheight[1.0] 2em;
-    }
-
-    section.entry-content blockquote:first-child {
-        margin-top: 0;
-    }
-
-    section.entry-content blockquote footer::before {
-        content: '—'; /* Em-dash */
-    }
-
-    section.entry-content blockquote footer {
-        margin-top: ◊x-lineheight[1];
-        text-align: right;
-        width: calc(100% + 2em);
-    }
-
-    section.entry-content h2 {
-        font-size: 1.2rem;
-        font-style: italic;
-        margin: ◊x-lineheight[1] 0;
-        font-weight: normal;
-    }
-
-    .caps, span.smallcaps, span.newthought {
-        font-feature-settings: "smcp" on, "liga" on, "clig" on, "dlig" on, "kern" on, "onum" on, "pnum" on;
-        font-style: normal;
-    }
-
-    .caps {
-        text-transform: lowercase;
-        font-size: 1.1em;
-    }
-
-    p.pause-before {
-        margin-top: ◊x-lineheight[2];
-        text-indent: 0;
-    }
-
-    section.entry-content ul,
-    section.entry-content ol {
-        margin: ◊x-lineheight[0.5] 0 ◊x-lineheight[0.5] 0;
-        padding: 0;
-    }
-
-    section.entry-content li {
-        margin: 0 0 ◊x-lineheight[0.5] 0;
-        padding: 0;
-        text-indent: 0; 
-    }
-
-    code {
-        font-size: 0.75rem;
-        font-family: ◊mono-font;
-    }
-
-    pre {
-        line-height: ◊derive-lineheight[7 #:per-lines 6];
-        max-width: 100%;
-        overflow-x: auto;
-        tab-size: 4;
-    }
-
-    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;
-        display: table;
-        white-space: pre-wrap;
-        /* Whitespace is preserved by the browser.
-           Text will wrap when necessary, and on line breaks */
-    }
-
-    p.verse-heading {
-        font-feature-settings: "smcp" on, "liga" on, "clig" on, "dlig" on, "kern" on, "onum" on, "pnum" on;
-        text-align: center;
-        font-size: 1.3rem;
-    }
-        
-    section.entry-content figure {
-        margin: ◊x-lineheight[1] 0;
-        padding: 0;
-    }
-
-    figure>a {
-        margin: 0;
-        padding: 0;
-        font-family: arial, sans-serif;
-    }
-    figure img {
-        max-width: 100%;
-        margin: 0 auto;
-    }
-
-    figcaption {
-        font-size: 0.8rem;
-        line-height: ◊derive-lineheight[4 #:per-lines 3];
-        margin-bottom: 0.3rem;
-        text-align: left;
-    }
-
-    dl {
-        margin: ◊x-lineheight[1] 0;
-    }
-
-    dl.dialogue dt {
-        font-feature-settings: "smcp" on, "liga" on, "clig" on, "dlig" on, "kern" on, "onum" on, "pnum" on;
-        font-style: normal;
-        text-transform: lowercase;
-    }
-
-    section.entry-content p.signoff {
-        margin-top: ◊x-lineheight[1];
-        font-size: 1.2rem;
-    }
-
-    section.footnotes {
-        margin-top: ◊x-lineheight[1];
-        font-size: 0.9rem;
-        line-height: ◊derive-lineheight[7 #:per-lines 6];
-    }
-
-    section.footnotes hr {
-        border: 0;
-        background: ◊color-bodytext;
-        height: 1px;
-        margin: 0;
-        width: 75%;
-        text-align: left;
-    }
-
-    section.footnotes ol {
-        margin: ◊x-lineheight[0.5] 0 0 0;
-    }
-
-    /* ******* “Further Notes” added to articles ********
-     */
-
-    div.further-notes {
-        margin-top: ◊x-lineheight[3];
-    }
-
-    div.further-notes>h2 {
-        font-style: normal;
-        font-feature-settings: "smcp" on;
-        border-top: solid 2px ◊color-bodytext;
-        text-transform: lowercase;
-    }
-
-    div.note h3 {
-        margin-top: 0;
-        font-size: 1rem;
-        font-weight: normal;
-        font-family: ◊mono-font;
-        font-size: 0.7rem;
-        background: #f3f3f3;
-        border-top: solid #b6b6b6 1px;
-        padding-left: 0.2rem;
-        margin-bottom: 0.3rem;
-    }
-
-    div.note-meta {
-        margin-top: ◊x-lineheight[1];
-        color: #888;
-        font-size: 1.2rem;
-    }
-
-    .by-proprietor .note-meta {
-        display: none;
-    }
-
-    div.note + div.note {
-        margin-top: ◊x-lineheight[2];
-    }
-
-    .disposition-mark {
-        color: ◊color-xrefmark;
-        position: relative;
-        top: -0.5em;
-        font-size: 0.83em;
-    }
-
-    .disposition-mark-in-note {
-        background: ◊color-xrefmark;
-        color: white;
-        border-radius: 0.08em;
-        padding: 0 0.1em;
-        margin: 0 0.4em 0 0;
-        text-decoration: none !important;
-    }
-
-    /* ******* (Mobile first) Journal View styling *******
-     */
-
-    section.content-block {
-    }
-
-    ul.article-list {
-        margin-top: ◊x-lineheight[1];
-        padding: 0;
-    }
-
-    ul.article-list li {
-        list-style-type: none;
-        display: block;
-        margin: 0;
-        padding: 0; 
-        margin-bottom: ◊x-lineheight[1];
-    }
-
-    ul.article-list li>a {
-        display: block;
-    }
-
-    div.article-list-date {
-        color: #999;
-    }
-
-    div.article-list-title {
-        font-size: 1.2rem;
-    }
-
-    /* ******* (Mobile first) Columnar series list styling *******
-     */
-
-    .series-list {
-        display: grid;
-        grid-template-columns: repeat(auto-fill,8em);
-        place-content: center;
-    }
-
-    .series-list div {
-        padding-left: 0.25em; /* Keeps some italic descenders inside the box */
-    }
-
-    .series-list h2 {
-        font-feature-settings: "smcp" on;
-        text-transform: lowercase;
-        font-weight: normal;
-        font-size: 1em;
-        margin: 0;
-    }
-
-    .series-list ul {
-        margin-top: 0;
-        list-style-type: none;
-        padding: 0;
-    }
-
-    /* ******* (Mobile first) Keyword Index styling *******
-     */
-
-    #keywordindex {
-        column-width: 7rem;
-        margin-top: ◊x-lineheight[2];
-    }
-    
-    #keywordindex section {
-        -webkit-column-break-inside: avoid; /* Chrome, Safari, Opera */
-        page-break-inside: avoid; /* Firefox */
-        break-inside: avoid; /* IE 10+ */
-    }
-
-    #keywordindex h2 {
-        margin: 0;
-    }
-
-    #keywordindex ul {
-        margin-top: 0;
-        list-style-type: none;
-        padding: 0;
-    }
-
-    #keywordindex ul ul {
-        margin-left: 0.5em;
-        font-size: smaller;
-    }
-
-    /* End of mobile-first typography and layout */
-}
+body {
+    margin: 0;
+    background: ◊color-background;
+
+    /* Typography: `line-height` is important!
+       All verticle rhythm based on this value. */
+    line-height: ◊lineheight;
+    font-family: ◊body-font;
+
+    font-feature-settings: "calt" on, "liga" on, "clig" on, "dlig" on, "kern" on, "onum" on, "pnum" on;
+    color: ◊color-bodytext; /* Japanese Indigo, baby */
+}
+
+/* This is used to hide certain punctuation and things as long as CSS is available. 
+   Turn off CSS and voila: stuff appears. */
+.x {
+    display: none;
+}
+
+.hist p {
+    font-variant-alternates: historical-forms;
+}
+.nonhist {
+    font-variant-alternates: normal;
+}
+
+main {
+    background: white;
+    margin: 0;
+    padding: ◊x-lineheight[0.5] ◊x-lineheight[1];
+}
+
+main > a > header {
+    text-align: center;
+}
+
+main > a > header h1 {
+    display: none;
+    /* font-size: ◊x-lineheight[1.5];
+    line-height: ◊x-lineheight[2];
+    margin: 0 0 ◊x-lineheight[0.5] 0;
+    font-weight: normal;
+    font-style: italic;
+    text-transform: lowercase;
+    color: ◊color-pagehead;
+    transition: color 0.25s ease; */
+}
+
+img.logo {
+    height: ◊x-lineheight[3];
+    filter: none;
+    transition: filter 0.5s ease;
+}
+
+header:hover img.logo {
+    filter: invert(12%) sepia(87%) saturate(2559%) hue-rotate(348deg) brightness(125%) contrast(88%);
+    transition: filter 0.5s ease;
+}
+
+/* I read somewhere years ago that you should specify styling for links in the
+   following order: Link, Visited, Hover, Active. 
+       → Remember the mnemonic: Lord Vader Has Arrived.
+   
+   Not sure if that's relevant advice any more but I still follow it. It can't hurt. */
+   
+a:link, a:visited {         /* [L]ord [V]ader… */
+    color: ◊color-link;
+    text-decoration: none;
+}
+
+a:hover, a:active {         /* …[H]as [A]rrived */
+    color: ◊color-linkhover;
+    background: ◊color-linkbackground;
+}
+
+a.index-link:link, a.index-link:visited {
+    color: ◊color-bodytext;
+}
+
+a.index-link:hover, a.index-link:active {
+    color: #006400;
+}
+
+a.index-link::after {
+    content: '\f89b';
+    color: #809102;
+    position: relative;
+    top: -0.3em;
+}
+
+main>a {
+    color: inherit;
+}
+
+span.links-footnote {
+    display: inline-block; /* allows keyframe animation to work */
+}
+
+:target {
+    animation: hilite 2.5s;
+}
+@keyframes hilite {
+    0% {background: transparent;}
+    10% {background: #feffc1;}
+    100% {background: transparent;}
+}
+
+main > aside {
+    text-align: center;
+}
+
+nav {
+    font-family: 'Triplicate T4c', monospace;
+    font-feature-settings: "onum" off;
+    font-size: 0.7rem;
+    margin: 0;
+    margin-top: 0.5rem;
+    text-align: center;
+}
+
+nav ul {
+    list-style-type: none;
+    margin: 0.2em auto;
+    padding: 0;
+}
+
+nav li {
+    display: none; /* Numbers not displayed on mobile */
+    color: gray;
+}
+
+nav li.nav-text {
+    display: inline;
+    text-transform: uppercase;
+    letter-spacing: 0.05rem;
+    font-size: 0.6rem;
+}
+
+nav li.inactive-link {
+    color: #545454; /* Accessibility (contrast) */
+}
+
+nav li.current-page {
+    color: ◊color-bodytext;
+    padding: 0.2rem 0.5rem;
+    border-bottom: dotted ◊color-bodytext 2px;
+}
+
+nav li a {
+    padding: 0.2rem 0.5rem;
+}
+
+nav li a:link, nav li a:visited {
+    color: ◊color-bodytext;
+}
+
+nav li a:hover, nav li a:active {
+    color: ◊color-linkhover;
+    background: #ebebeb;
+}
+
+i > em { font-style: normal; }
+
+/* On mobile, an <ARTICLE> is just a box. Later we'll do fancy stuff if grid support is detected. */
+article {
+    margin: ◊x-lineheight[2] 0 ◊x-lineheight[1] 0;
+    padding-top: ◊x-lineheight[1];
+}
+article:first-of-type {
+    margin-top: ◊x-lineheight[1];
+}
+
+/* Here's my thing these days about article titles: they shouldn't be required. When you write in a
+   paper journal, do you think of a title for every entry? No! You just write the date. The date is
+   the heading. Makes sense. But, this means I've had to think long and hard about how to present two
+   different types of articles (those with titles AND dates, and those with just a date for the title). 
+
+    filter: invert(12%) sepia(87%) saturate(359%) hue-rotate(348deg) brightness(105%) contrast(88%);
+   For now: By default, the title-less article is assumed to be the norm. On these, we use <H1> to 
+   show the date in italics. */
+article>h1 {
+    font-size: ◊x-lineheight[1];
+    line-height: ◊x-lineheight[1];
+    margin: 0 0 ◊x-lineheight[1] 0;
+    font-style: italic;
+    font-weight: normal;
+}
+
+/* Titles non-bold, non-smallcaps by default. This can be overridden in document markup. */
+h1.entry-title {
+    margin: 0 0 0 0;
+    text-transform: none;
+    font-style: normal;
+    line-height: 1.7rem;
+}
+
+h1.entry-title.note-full {
+    font-feature-settings: "smcp" on, "liga" on, "clig" on, "dlig" on, "kern" on, "onum" on, "pnum" on;
+}
+
+/* This <SPAN> class is used in titles for Notes appended to earlier articles */
+h1.entry-title .cross-reference {
+    font-feature-settings: "smcp" off, "liga" on, "clig" on, "dlig" on, "kern" on, "onum" on, "pnum" on;
+    font-style: italic;
+    text-transform: none;
+}
+
+/* `a.rel-bookmark` is only used in individual article or ‘journal’ views, 
+    not in listings; see the design docs.
+*/
+a.rel-bookmark:link,        /* Lord  */
+a.rel-bookmark:visited {    /* Vader */
+    text-decoration: none;
+    background: none;
+    color: ◊color-bodytext;
+}
+
+a.rel-bookmark:hover,       /* Has     */
+a.rel-bookmark:active {     /* Arrived */
+    text-decoration: none;
+    background: ◊color-linkbackground;
+    color: #006400;
+}
+
+/* Here's where we add the minty fresh maple leaf glyph. */
+a.rel-bookmark::after {
+    content: '\f894'; 
+    margin-left: 4px;
+    font-style: normal;
+    color: #809102;
+}
+a.rel-bookmark.note-permlink::after {
+    content: '\f897';
+    margin-left: 4px;
+}
+div.note a.rel-bookmark.note-permlink::after {
+    content: '';
+}
+div.note a.rel-bookmark.note-permlink::before {
+   font-family: ◊body-font;
+   font-size: 1rem;
+   content: '\00b6';
+   margin-left: -0.9rem;
+   float: left;
+   margin-top: -2px;
+}
+
+a.rel-bookmark:hover::after {
+    color: #aaba16;
+}
+
+a.cross-reference:link,
+a.cross-reference:visited {
+    color: ◊color-bodytext;
+}
+
+a.cross-reference::before {
+    content: '☞\00a0';      /* Non-breaking space */
+    font-style: normal;
+    color: ◊color-xrefmark;
+}
+
+/* Footnote links */
+sup a {
+    font-weight: bold;
+    margin-left: 3px;
+}
+
+p.time {
+    margin: 0 0 ◊x-lineheight[1] 0;
+}
+footer.article-info {
+    margin: ◊x-lineheight[1] 0;
+    text-align: center;
+    font-feature-settings: "smcp" on, "liga" on, "clig" on, "dlig" on, "kern" on, "onum" on, "pnum" on;
+    color: #555555; /* Accessibility (contrast) */
+}
+
+footer.article-info::before {
+    content: "☞\00a0";
+}
+
+/* Within article info, don’t display series info when on a series page (redundant) */
+body.series-page .series-part {
+    display: none;
+}
+
+p.time::before {
+    content: none;
+}
+
+p.time {
+    font-size: ◊x-lineheight[0.75];
+    line-height: ◊x-lineheight[1];
+    font-feature-settings: "scmp" off, "liga" on, "clig" on, "dlig" on, "kern" on, "onum" on, "pnum" on;
+    text-transform: none;
+    font-style: italic;
+}
+
+article>:last-child::after {
+    content: '\f88d';  /* Round glyph */
+    color: ◊color-bodytext;
+    font-size: ◊x-lineheight[1];
+    line-height: ◊x-lineheight[1];
+    text-align: center;
+    display: block;
+    margin: ◊x-lineheight[1] 0;
+}
+
+p {
+    margin: 0;
+    text-indent: 0;
+}
+
+p + p {
+    text-indent: 2em;
+}
+
+section.entry-content blockquote {
+    font-size: ◊x-lineheight[0.7];
+    line-height: ◊derive-lineheight[7 #:per-lines 6];
+    margin: ◊x-lineheight[1.0] 2em;
+}
+
+section.entry-content blockquote:first-child {
+    margin-top: 0;
+}
+
+section.entry-content blockquote footer::before {
+    content: '—'; /* Em-dash */
+}
+
+section.entry-content blockquote footer {
+    margin-top: ◊x-lineheight[1];
+    text-align: right;
+    width: calc(100% + 2em);
+}
+
+section.entry-content h2 {
+    font-size: 1.2rem;
+    font-style: italic;
+    margin: ◊x-lineheight[1] 0;
+    font-weight: normal;
+}
+
+.caps, span.smallcaps, span.newthought {
+    font-feature-settings: "smcp" on, "liga" on, "clig" on, "dlig" on, "kern" on, "onum" on, "pnum" on;
+    font-style: normal;
+}
+
+.caps {
+    text-transform: lowercase;
+    font-size: 1.1em;
+}
+
+p.pause-before {
+    margin-top: ◊x-lineheight[2];
+    text-indent: 0;
+}
+
+section.entry-content ul,
+section.entry-content ol {
+    margin: ◊x-lineheight[0.5] 0 ◊x-lineheight[0.5] 0;
+    padding: 0;
+}
+
+section.entry-content li {
+    margin: 0 0 ◊x-lineheight[0.5] 0;
+    padding: 0;
+    text-indent: 0; 
+}
+
+code {
+    font-size: 0.75rem;
+    font-family: ◊mono-font;
+}
+
+pre {
+    line-height: ◊derive-lineheight[7 #:per-lines 6];
+    max-width: 100%;
+    overflow-x: auto;
+    tab-size: 4;
+}
+
+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;
+    display: table;
+    white-space: pre-wrap;
+    /* Whitespace is preserved by the browser.
+       Text will wrap when necessary, and on line breaks */
+}
+
+p.verse-heading {
+    font-feature-settings: "smcp" on, "liga" on, "clig" on, "dlig" on, "kern" on, "onum" on, "pnum" on;
+    text-align: center;
+    font-size: 1.3rem;
+}
+    
+section.entry-content figure {
+    margin: ◊x-lineheight[1] 0;
+    padding: 0;
+}
+
+figure>a {
+    margin: 0;
+    padding: 0;
+    font-family: arial, sans-serif;
+}
+figure img {
+    max-width: 100%;
+    margin: 0 auto;
+}
+
+figcaption {
+    font-size: 0.8rem;
+    line-height: ◊derive-lineheight[4 #:per-lines 3];
+    margin-bottom: 0.3rem;
+    text-align: left;
+}
+
+dl {
+    margin: ◊x-lineheight[1] 0;
+}
+
+dl.dialogue dt {
+    font-feature-settings: "smcp" on, "liga" on, "clig" on, "dlig" on, "kern" on, "onum" on, "pnum" on;
+    font-style: normal;
+    text-transform: lowercase;
+}
+
+section.entry-content p.signoff {
+    margin-top: ◊x-lineheight[1];
+    font-size: 1.2rem;
+}
+
+section.footnotes {
+    margin-top: ◊x-lineheight[1];
+    font-size: 0.9rem;
+    line-height: ◊derive-lineheight[7 #:per-lines 6];
+}
+
+section.footnotes hr {
+    border: 0;
+    background: ◊color-bodytext;
+    height: 1px;
+    margin: 0;
+    width: 75%;
+    text-align: left;
+}
+
+section.footnotes ol {
+    margin: ◊x-lineheight[0.5] 0 0 0;
+}
+
+/* ******* “Further Notes” added to articles ********
+ */
+
+div.further-notes {
+    margin-top: ◊x-lineheight[3];
+}
+
+div.further-notes>h2 {
+    font-style: normal;
+    font-feature-settings: "smcp" on;
+    border-top: solid 2px ◊color-bodytext;
+    text-transform: lowercase;
+}
+
+div.note h3 {
+    margin-top: 0;
+    font-size: 1rem;
+    font-weight: normal;
+    font-family: ◊mono-font;
+    font-size: 0.7rem;
+    background: #f3f3f3;
+    border-top: solid #b6b6b6 1px;
+    padding-left: 0.2rem;
+    margin-bottom: 0.3rem;
+}
+
+div.note-meta {
+    margin-top: ◊x-lineheight[1];
+    color: #888;
+    font-size: 1.2rem;
+}
+
+.by-proprietor .note-meta {
+    display: none;
+}
+
+div.note + div.note {
+    margin-top: ◊x-lineheight[2];
+}
+
+.disposition-mark {
+    color: ◊color-xrefmark;
+    position: relative;
+    top: -0.5em;
+    font-size: 0.83em;
+}
+
+.disposition-mark-in-note {
+    background: ◊color-xrefmark;
+    color: white;
+    border-radius: 0.08em;
+    padding: 0 0.1em;
+    margin: 0 0.4em 0 0;
+    text-decoration: none !important;
+}
+
+/* ******* (Mobile first) Journal View styling *******
+ */
+
+section.content-block {
+}
+
+ul.article-list {
+    margin-top: ◊x-lineheight[1];
+    padding: 0;
+}
+
+ul.article-list li {
+    list-style-type: none;
+    display: block;
+    margin: 0;
+    padding: 0; 
+    margin-bottom: ◊x-lineheight[1];
+}
+
+ul.article-list li>a {
+    display: block;
+}
+
+div.article-list-date {
+    color: #999;
+}
+
+div.article-list-title {
+    font-size: 1.2rem;
+}
+
+/* ******* (Mobile first) Columnar series list styling *******
+ */
+
+.series-list {
+    display: grid;
+    grid-template-columns: repeat(auto-fill,8em);
+    place-content: center;
+}
+
+.series-list div {
+    padding-left: 0.25em; /* Keeps some italic descenders inside the box */
+}
+
+.series-list h2 {
+    font-feature-settings: "smcp" on;
+    text-transform: lowercase;
+    font-weight: normal;
+    font-size: 1em;
+    margin: 0;
+}
+
+.series-list ul {
+    margin-top: 0;
+    list-style-type: none;
+    padding: 0;
+}
+
+/* ******* (Mobile first) Keyword Index styling *******
+ */
+
+#keywordindex {
+    column-width: 7rem;
+    margin-top: ◊x-lineheight[2];
+}
+
+#keywordindex section {
+    -webkit-column-break-inside: avoid; /* Chrome, Safari, Opera */
+    page-break-inside: avoid; /* Firefox */
+    break-inside: avoid; /* IE 10+ */
+}
+
+#keywordindex h2 {
+    margin: 0;
+}
+
+#keywordindex ul {
+    margin-top: 0;
+    list-style-type: none;
+    padding: 0;
+}
+
+#keywordindex ul ul {
+    margin-left: 0.5em;
+    font-size: smaller;
+}
+
+/* End of mobile-first typography and layout */
 
 
 /* Here’s where we start getting funky for any viewport wider than mobile portrait.
    An iPhone 6 is 667px wide in landscape mode, so that’s our breakpoint. */
 
-@media only screen and (min-width: 667px) {
+@media (min-width: 667px) {
     main {
         margin: 0 auto;
         padding-left: 1rem;
         padding-right: 1rem;
         width: 30rem;
@@ -743,12 +741,10 @@
         
         article>h1 {
             grid-area: margin;
             font-size: 1.1rem;
             text-align: right;
-            /* padding-right: 1rem; */
-            color: ◊color-bodytext;
         }
 
         article>h1.entry-title {
             grid-area: title;
             font-size: ◊x-lineheight[1];
@@ -861,5 +857,20 @@
         div.content-block-main > :first-child {
             margin-top: 0 !important;
         }
     }
 }
+
+@media print {
+    html { font-size: 13pt; }
+    body { background: white; color: black; }
+    main { width: 100%; }
+    footer.article-info { color: black; }
+    article, section.content-block {
+        box-shadow: none;
+        border: none;
+        }
+    a:link, a:visited, a:hover, a:active {
+        color: black;
+        border-bottom: dotted 1px black;
+    }
+}