@font-face {
    font-family: 'RobotoCondensed';
    src: url('../font/Roboto_Condensed/RobotoCondensed-VariableFont_wght.ttf');
}
@font-face {
    font-family: 'RobotoCondensedItalic';
    src: url('../font/Roboto_Condensed/RobotoCondensed-Italic-VariableFont_wght.ttf');
}
@font-face {
    font-family: Latin-Modern-Mono-Light;
    src: url("../font/Latin-Modern-Mono/lmmonolt10-regular.otf") format("opentype");
}
@font-face {
    font-family: Latin-Modern-Mono-Light-Oblique;
    src: url("../font/Latin-Modern-Mono/lmmonolt10-oblique.otf") format("opentype");
}
@font-face {
    font-family: Latin-Modern-Mono-Light-Bold;
    src: url("../font/Latin-Modern-Mono/lmmonolt10-bold.otf") format("opentype");
}
@font-face {
    font-family: Latin-Modern-Mono-Light-Bold-Oblique;
    src: url("../font/Latin-Modern-Mono/lmmonolt10-boldoblique.otf") format("opentype");
}
@font-face {
    font-family: CooperHewitt-Bold;
    src: url("../font/cooper-hewitt/CooperHewitt-Bold.otf") format("opentype");
}
@font-face {
    font-family: CooperHewitt-Light;
    src: url("../font/cooper-hewitt/CooperHewitt-Light.otf") format("opentype");
}
@font-face {
    font-family: caroni;
    src: url("../font/caroni/Caroni-Regular.otf");
}
@font-face {
    font-family: 'GabrieleD';
    src: url("../font/gabriele/gabriele-d.ttf");
}
@font-face {
    font-family: 'GabrieleBad';
    src: url("../font/gabriele/gabriele-bad.ttf");
}

:root {
    --title-offset: -1em;
    --prev-next-color: #DDD;
    --menu-link-color: #DDD;
    --link-blue: rgb(93,117,222);
    --link-hover: #80D; /* #080; */
}

* {
    box-sizing: border-box;
}


body {
    font-family: Latin-Modern-Mono-Light;
    background-color: white;
    display: flex;
    flex-direction: column;
    height: 100vh;
    min-height: 100vh;
}
header {
    flex-shrink: 0;
    flex-grow:   0;
    margin-top:    1em;
    margin-left:  2em;
    margin-right:  2em;
    margin-bottom: 0.25em;

    display: grid;
    grid-template-rows: auto;
    grid-template-columns: 1fr 80px;
    align-items: center;
}
#rss-link-container {
    /*border: 2px solid green;*/
    grid-row: 1;
    grid-column: 2;
    text-align: right;
}
#menu-container {
    /*border: 2px solid orange;*/
    grid-row: 1;
    grid-column: 1;
    /*padding-top: 1rem;*/
    font-size: 10pt;
    color: var( --menu-link-color );
    text-align: left;
}
#menu-container a {
    color: var( --menu-link-color );
    text-decoration: none;
}
#menu-container a:visited {
    color: var( --menu-link-color );
}
#menu-container a:hover {
    color: black;
}
main {
    flex-shrink: 1;
    flex-grow:   1;
    max-width: 40em;
    margin-left: auto;
    margin-right: auto;
    margin-bottom: 0px;
    /* overflow-x: visible; */ /* any use of overflow breaks left-overhanging title. (?) */
    /* overflow-y: hidden; */
    /* border: green solid 1px; */
}
b, strong {
    font-family: Latin-Modern-Mono-Light-Bold;
    font-weight: normal;
}
i, em {
    /* letter-spacing: -0.015em; */
    /* I prefer the synthesized slant... */
    font-family: Latin-Modern-Mono-Light-Oblique;
    font-style: normal;
}
b i, b em, strong i, strong em, i b, em b, i strong, em strong {
    /* letter-spacing: -0.05em; */
    font-family: Latin-Modern-Mono-Light-Bold-Oblique;
    font-style: normal;
    font-weight: normal;
}
h1, h2, h3, h4, h5 {
    font-family: CooperHewitt-Bold;
    font-weight: normal;
}
hr {
    border-top: 1px solid black;
}
/*
blockquote::before {
    content: url("../image/blockquote-line.png");
    display: inline;
}
*/
blockquote {
    font-size: 90%;
    line-height: 110%;
    margin-left: 0.0em;
    padding-left: 2em;
    background-image: url("../image/blockquote-line.png");
    background-repeat: no-repeat;
}
div.entry-header h1, div.subscribe-space h1 {
    position: relative;
    left: var( --title-offset );
    /* font-family: Latin-Modern-Mono-Caps; */
    font-family: CooperHewitt-Bold;
    font-weight: normal;
    /* font-family: F25_Bank_Printer; */
    /* font-family: caroni; */
    /* text-transform: uppercase; */
}
div.entry-header h1 a {
    /* font-family: Latin-Modern-Mono-Light-Bold; */
    /* font-family: F25_Bank_Printer; */
    color: black;
    text-decoration: none;
}
div.entry-header h1 a:focus {
    outline: none;
    text-decoration: underline;
}
div.entry-body a, div.related a {
    /* background-color: #FFFF99; */
    /* text-decoration: #BBFFBB underline; */
    text-decoration: none;
    /* color: black; */
    color: var( --link-blue );
    font-family: caroni;
    font-size: 115%;
    /* font-family: F25_Bank_Printer; */
    /*
      font-family: xxx-1942-report;
      letter-spacing: -0.125em;
    */
    position: relative;
    bottom: -1pt;
}
div.entry-body a:hover, div.related a:hover {
    /* text-decoration: underline; */
    color: var( --link-hover );
    /* color: black; */
    /* text-decoration: wavy black underline; */
    /* text-decoration: orange underline; */
    /* background-color: yellow; */
}
div.entry-body a:hover:before, div.entry-body a:hover:after, div.related a:hover:before, div.related a:hover:after {
    color: red;
    /* color: black; */
}
/*
div.entry-body a:before, div.related a:before {
    font-size: 90%;
    content: "[";
}
div.entry-body a:after, div.related a:after {
    font-size: 90%;
    content: "]";
}
div.entry-body a.bracketless:before {
    content: "";
}
div.entry-body a.bracketless:after {
    font-size: 90%;
    content: "";
}
div.entry-body a.anchorlink:before {
    content: "";
}
div.entry-body a.anchorlink:after {
    content: "";
}
*/
div.entry-body a i, div.entry-body a em, div.entry-body i a, div.entry-body em a {
    font-family: caroni;
    font-style: oblique;
}
div.entry-body {
    text-align: justify;
    text-wrap: pretty;
}
article.synthetic em, article.synthetic i {
    font-family: CooperHewitt-Light;
    font-style: oblique;
}
article.synthetic b, article.synthetic strong {
    font-family: CooperHewitt-Bold;
    font-style: unset;
}
/*
  XXX: Adding a small padding-top to this seems to cause padding for a whole new line
       of text to be added, so we just nudge the header down with relative positioning.
       Ick!
*/
article.synthetic div.entry-header-body-footer {
    font-family: CooperHewitt-Light;
    font-size: 90%;
    padding-left: 1em;
    padding-right: 0.75em;
    padding-bottom: 0.25em;
    border-left: 5px solid black;
    background-color: #eeeeee;
}
article.synthetic div.entry-header {
    font-family: CooperHewitt-Bold;
    position: relative;
    top: 5px;
}
article.synthetic div.entry-header h1 {
    left: 0;
}
article.synthetic div.entry-body a {
    color: var( --link-blue );
    font-family: CooperHewitt-Light;
    font-size: unset;
    position: unset;
    bottom: unset;
}
article.synthetic div.entry-body a i {
    text-decoration: underline;
    font-family: CooperHewitt-Light;
    font-style: normal;
}
article.synthetic div.entry-body a:before {
    content: "";
}
article.synthetic div.entry-body a:after {
    content: "";
}
article.synthetic div.entry-body blockquote {
    font-family: CooperHewitt-Bold;
    background-image: unset;
}
article.synthetic div.synthetic-note {
    float: left;
}
div.related {
    padding-top: 2rem;
    font-size: 90%;
}
div.related:first-child {
    margin-top: 2rem;
    border-top: 1px solid black;
}
div.related ul {
    margin-top: 0;
    margin-bottom: 0;
}
div.related-title {
    font-family: CooperHewitt-Bold;
}
div.entry-footer a {
    /* color: var( --link-blue ); */
    color: blue; /* we just like the richer blue for this small link */
}
div.entry-footer a:visited {
    /* color: var( --link-blue ); */
    color: blue; /* we just like the richer blue for this small link */
}
div.entry-footer .post-metainfo {
    font-size: 9pt;
    text-align: right;
}
.prev-top-next {
    font-size: 80%;
    color: var( --prev-next-color );
    margin-top: 3em;
    border-top: 1px solid var( --prev-next-color );
    padding-top: 0.5em;
    display: flex;
    flex-direction: row;
}
.prev-top-next a {
    color: var( --prev-next-color );
    text-decoration: none;
}
.prev-top-next a:hover {
    color: black;
}
.prev-top-next .prev {
    width: 45%;
    text-align: left;
    margin-left: 3em;
}
.prev-top-next .top {
    text-align: center;
}
.prev-top-next .next {
    width: 45%;
    text-align: right;
    margin-right: 3em;
}
a#rss-link {
    color: black;
    text-decoration: none;
    font-family: Latin-Modern-Mono-Light-Bold;
    font-weight: normal;
}
a#rss-link span {
    color: #FF8800;
}
/*
.flexmark sup:has( .footnote-ref ) {
    font-size: 75%;
    vertical-align: 20%;
}
*/

/* sup hack modified from https://stackoverflow.com/questions/1530685/how-can-i-keep-consistent-line-height-with-superscript-elements */
sup {
    vertical-align: top;
    font-size: 60%;
}
.flexmark a.footnote-ref:before {
    content: none;
}
.flexmark a.footnote-ref:after {
    content: none;
}
.flexmark a.footnote-ref {
    font-family: Latin-Modern-Mono-Light-Bold;
}
.flexmark .footnotes li {
    margin-bottom: 0.5rem;
}
.flexmark .footnotes p {
    display: inline;
}
.flexmark .footnotes a.footnote-backref {
    font-size: smaller;
}
.flexmark .footnotes a.footnote-backref:before {
    content: none;
}
.flexmark .footnotes a.footnote-backref:after {
    content: none;
}
.footnotes {
    font-size: smaller;
    line-height: 120%;
}
.bottom-form {
    padding-top: 4em;
    /* border: 2px solid green; */
    margin-bottom: -6em;
}
footer {
    flex-grow:       0;
    flex-shrink:     0;
    margin-top:      4em;
    padding-top:     4em;
    padding-bottom:  1em;
    margin-left:     1em;
    margin-right:    1em;
    
    font-size: 10pt;
    /* border: red solid 1px; */
}
footer a {
    color: gray;
    text-decoration: none;
}
footer a:hover {
    color: gray;
    text-decoration: black underline;
}
#left-footer {
    float: left;
}
#left-footer a{
    color: black;
}
#right-footer {
    float: right;
}
/* modified from https://medium.com/towards-more-beautiful-web-typography/everything-about-hr-when-to-use-it-and-how-to-style-it-fd17b66573 */
hr.entry-separator {
    margin-top: 2em;
    margin-bottom: 2em;
    border: none;
}
hr.entry-separator::before {
    font-size: 100%;
    content: '<< - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -';
    display: block;
    text-align: left;
    white-space: nowrap;
    overflow-x: hidden;
}
div.archive h1 {
    position: relative;
    left: var( --title-offset );
    font-family: CooperHewitt-Bold;
    font-weight: normal;
    font-size: 18pt;
    margin-block-end: 0em;
}
div.archive p.download-zip-offer {
    margin-block-start: 0;
    font-size: smaller;
    margin-block-end: 1.5em;
    /*
    text-align: center;
    border-top: 1px solid black;
    border-bottom: 1px solid black;
    */
}
div.archive p.download-zip-offer a:link {
    text-decoration: none;
}
div.archive dt {
   font-family: CooperHewitt-Bold;
   font-weight: normal;
   font-size: 10pt;
 }
div.archive dd ul {
    margin-top: 0.25em;
    margin-bottom: 1em;
    list-style-type: "- ";
}
div.archive dd ul a {
    color: black;
    text-decoration: none;
    white-space: nowrap;
}
div.archive dd ul a:visited {
    color: black;
}
div.archive dd ul a:hover {
    text-decoration: underline;
}
div.subscribe-form {
    display: grid;
    grid-template-columns: min-content 1fr;
    grid-template-rows: min-content min-content;
    padding-bottom: 1.5rem;
}
div.subscribe-form div.sf-label {
    font-family: Latin-Modern-Mono-Light-Bold;
    font-weight: normal;
    text-align: right;
    white-space: nowrap;
    grid-column: 1;
    padding-right: 0.5em;
}
div.subscribe-form div.sf-field input {
    width: 100%;
}
div.subscribe-form div.sf-submit {
    text-align: center;
}
div.subscribe-form div.sf-submit input {
    width: 100%;
    font-family: CooperHewitt-Bold;
}
div.subscribe-form div.sf-label-email {
    grid-row: 1;
}
div.subscribe-form div.sf-field-email {
    grid-row: 1;
    grid-column: 2;
}
div.subscribe-form div.sf-label-name {
    grid-row: 2;
}
div.subscribe-form div.sf-field-name {
    grid-row: 2;
    grid-column: 2;
}
div.subscribe-form div.sf-note-name {
    grid-row: 2;
    grid-column: 3;
}
div.subscribe-form div.sf-label-submit {
    grid-row: 3;
    font-size: 150%;
}
div.subscribe-form div.sf-submit {
    grid-row: 3;
    grid-column: 2;
}

.latest-posts {
    font-family: caroni;
    font-size: 12pt;
    display: flex;
    flexDirection: row;
    align-items: start;
    justify-items: start;
    line-height: 110%;
    color: var( --link-blue );
    margin-top: 0.5rem;
    margin-bottom: 2rem;
}

.latest-posts-title {
}

.latest-posts-body {
    display: grid;
    grid-template-columns: max-content 1fr;
    margin-left: 0.5rem;
}

.latest-posts-body .lp-bullet {
    margin-left: 0.25rem;
}
.latest-posts-body .lp-link {
    margin-left: 0.25rem;
}

.latest-posts a {
    text-decoration: none;
    color: var( --link-blue );
}

.latest-posts a:hover {
    color: var( --link-hover );
}

table.flexmark-table {
    border-collapse: collapse;
    margin-left: auto;
    margin-right: auto;
}
table.flexmark-table td, table.flexmark-table th {
    font-family: 'RobotoCondensed';
    border: 1px solid;
    padding: 3px;
}
table.flexmark-table td {
    font-variation-settings: "wght" 400;
}
table.flexmark-table th {
    color: white;
    background-color: black;
    font-variation-settings: "wght" 700;
}

.update-history-note {
    font-size: smaller;
    line-height: 100%;
}
.update-prepend ul {
    font-family: 'RobotoCondensed';
    font-variation-settings: "wght" 400;
    font-size: smaller;
    list-style-type: "➣";
    padding: 0;
    margin: 0;
}
.update-prepend ul li {
    padding-left: 0.25em;
    margin-left: 1em;
}

body.old-draft {
    padding-top: 1em;
    background-color: #F3F5DA;
    color: #6E7FD9;
    font-family: 'GabrieleD', 'Courier';
}
body.old-draft .entry-body a {
    color: #aa8888;
}
body.old-draft .entry-body a:visited {
    color: #aa8888;
}
body.old-draft .entry-header h1 a {
    color: #aa8888;
    font-family: 'GabrieleBad', 'Courier';
}
body.old-draft .entry-header h1 a:visited {
    color: #aa8888;
    font-family: 'GabrieleBad', 'Courier';
}
body.old-draft #top-banner {
    position: fixed;
    top: 0;
    left: 0;
    width: 100vw;
    color: black;
    background-color: yellow;
    text-align: center;
    font-family: 'RobotoCondensed', 'Arial', 'Helvetica', sans-serif;
    font-variation-settings: "wght" 500;
    padding-top: 4px;
    padding-bottom: 4px;
    border-bottom: 2px solid black;
}

@media only screen and (max-width: 700px) {
    :root {
    	--title-offset: 0em;
    }
    main {
        max-width: unset;
        margin-left: 2em;;
        margin-right: 2em;;
    }
    footer {
    	min-height: 1.5em; /* bigger on desktop to prevent occlusion by link targets on hover */
    }
    hr.entry-separator::before {
        content: '- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -';
    }
    div.entry-body {
      hyphens: auto;
      hyphenate-limit-chars: 7;
    }
    .latest-posts {
        flex-direction: column;
    }
}

@media only screen and (max-width: 300px) {
    #left-footer {
        float: unset;
        text-align: right;
    }
}
