@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');
}
/*
  Public Sans, the preferred face for "modern". Both files are variable on wght,
  and their default instance is Thin — so the 100..900 descriptor is load-bearing:
  without it the browser renders the thin default for every weight. With it,
  font-weight 400 and 700 instantiate normally, and the italic file gives us a
  real italic rather than a synthesized slant.

  font-display: swap so the system-sans fallback paints immediately and Public
  Sans swaps in when it arrives, rather than blocking on the download.
*/
@font-face {
    font-family: 'PublicSans';
    src: url('../font/Public_Sans/PublicSans-VariableFont_wght.ttf');
    font-weight: 100 900;
    font-style: normal;
    font-display: swap;
}
@font-face {
    font-family: 'PublicSans';
    src: url('../font/Public_Sans/PublicSans-Italic-VariableFont_wght.ttf');
    font-weight: 100 900;
    font-style: italic;
    font-display: swap;
}
@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: #AAA;
    --menu-link-color: #AAA;
    --link-blue: rgb(93,117,222);
    --link-hover: #80D; /* #080; */

    /*
      Typography, typewriter (the default). The "modern" menu item flips
      data-typography on <html>, which re-points these; every rule below reads
      them rather than naming a face directly.
    */
    --font-body:             Latin-Modern-Mono-Light;
    --font-body-bold:        Latin-Modern-Mono-Light-Bold;
    --font-body-italic:      Latin-Modern-Mono-Light-Oblique;
    --font-body-bold-italic: Latin-Modern-Mono-Light-Bold-Oblique;
    --font-weight-bold:      normal;  /* bold is its own face here; don't double-embolden */
    --font-style-italic:     normal;  /* oblique is its own face here */

    --menu-font-family:      Latin-Modern-Mono-Light;

    --font-link:             caroni;
    --font-link-size:        115%;
    --font-link-shift:       -1pt;

    --body-line-height:       normal;  /* the browser default, i.e. today's single spacing */
    --blockquote-line-height: 110%;
    --footnotes-line-height:  120%;

    --blockquote-image:  url("../image/blockquote-line.png");  /* the pen-drawn stroke */
    --blockquote-border: none;
    /*
      The png carries its own left inset (the ink sits ~6.5px into a 16px image),
      so typewriter needs no margin. Modern reproduces that inset with margin, and
      takes it back out of the padding so the quote is indented the same overall.
    */
    --blockquote-margin-left:  0.0em;
    --blockquote-padding-left: 2em;

    --entry-separator-content: '<< - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -';
    --entry-separator-border:  none;
}

:root[data-typography="modern"] {
    --font-body:             'PublicSans', -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
    --font-body-bold:        var( --font-body );
    --font-body-italic:      var( --font-body );
    --font-body-bold-italic: var( --font-body );
    --font-weight-bold:      700;
    --font-style-italic:     italic;

    --font-link:             inherit;
    --font-link-size:        100%;
    --font-link-shift:       0;

    /* line-and-a-half body; quotes and footnotes stay proportionally tighter */
    --body-line-height:       1.5;
    --blockquote-line-height: 1.35;
    --footnotes-line-height:  1.35;

    --blockquote-image:  none;
    --blockquote-border: 3pt solid #C00;
    --blockquote-margin-left:  0.5em;   /* ≈ the png's 6.5px ink inset */
    --blockquote-padding-left: 1.25em;  /* 0.5em + 3pt border + 1.25em ≈ the 2em above */

    --entry-separator-content: '';
    --entry-separator-border:  2pt solid black;
}

* {
    box-sizing: border-box;
}


body {
    font-family: var( --font-body );
    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 {
    font-family: var( --menu-font-family );
    /*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;
    padding-left: 3px;
    padding-right: 3px;
}
/*
  ORDER-DEPENDENT: :visited and :hover have identical specificity here
  (#menu-container a:visited vs #menu-container a:hover, both 1-1-1), so whichever
  is written last wins. :hover must stay below :visited or a visited link will not
  change on hover. The usual LVHA rule.
*/
#menu-container a:visited {
    color: var( --menu-link-color );
}
#menu-container a:hover {
    font-family: var( --menu-font-family );
    color: black;
    /* text-decoration: underline; */
    background-color: rgba( 0, 255, 255, 0.25 );
}
/*
  No hamburger above the narrow breakpoint. Hiding the checkbox too, not just the
  button: display:none is what keeps it out of the tab order, where an invisible
  focusable control would otherwise sit.

  ORDER-DEPENDENT: the 520px block re-enables both with the same selectors and so the
  same specificity. It only wins because it appears later in the file.
*/
#menu-toggle, #menu-button {
    display: none;
}
/* the toggle names the mode it would switch you *to* */
#typography-toggle .if-modern {
    display: none;
}
:root[data-typography="modern"] #typography-toggle .if-modern {
    display: inline;
}
:root[data-typography="modern"] #typography-toggle .if-typewriter {
    display: none;
}
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: var( --font-body-bold );
    font-weight: var( --font-weight-bold );
}
i, em {
    /* letter-spacing: -0.015em; */
    /* I prefer the synthesized slant... */
    font-family: var( --font-body-italic );
    font-style: var( --font-style-italic );
}
b i, b em, strong i, strong em, i b, em b, i strong, em strong {
    /* letter-spacing: -0.05em; */
    font-family: var( --font-body-bold-italic );
    font-style: var( --font-style-italic );
    font-weight: var( --font-weight-bold );
}
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: var( --blockquote-line-height );
    margin-left: var( --blockquote-margin-left );
    padding-left: var( --blockquote-padding-left );
    border-left: var( --blockquote-border );
    background-image: var( --blockquote-image );
    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: var( --font-link );
    font-size: var( --font-link-size );
    /* font-family: F25_Bank_Printer; */
    /*
      font-family: xxx-1942-report;
      letter-spacing: -0.125em;
    */
    position: relative;
    bottom: var( --font-link-shift );
}
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: var( --font-link );
    /* oblique falls back to a real italic face when the family has no oblique */
    font-style: oblique;
}
div.entry-body {
    text-align: justify;
    text-wrap: pretty;
    line-height: var( --body-line-height );
}
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;
    /* deliberately NOT var(--font-body-bold): the ascii art only lines up in mono */
    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: var( --font-body-bold );
    font-weight: var( --font-weight-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: var( --footnotes-line-height );
}
.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;
    border-top: var( --entry-separator-border );
}
hr.entry-separator::before {
    font-size: 100%;
    content: var( --entry-separator-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: var( --font-body-bold );
    font-weight: var( --font-weight-bold );
    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 {
    /* deliberately NOT var(--font-link), even in modern let's keep "latest posts" as handwritten after all. */
    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 */
    }
    /*
      Set the variable rather than `content`, so the modern override
      (higher specificity, wins regardless of order) still applies here.
    */
    :root {
        --entry-separator-content: '- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -';
    }
    div.entry-body {
      hyphens: auto;
      hyphenate-limit-chars: 7;
    }
    .latest-posts {
        flex-direction: column;
    }
}

/*
  Phones. The menu needs a 376px viewport to stay on one line, so it collapses well
  before then.
*/
/*
  ===========================================================================
  ORDER-DEPENDENT BLOCK. A media query adds no specificity of its own, so every
  override below ties with the base rule it is overriding and wins purely because
  it comes later in the file. Moving this block above the rules it overrides would
  silently undo all of it -- no error, no warning, just the desktop styling back.

  What relies on that here:
    :root --menu-link-color   ties with the base :root  (0-1-0)
    #menu-toggle, #menu-button  tie with the base hide  (1-0-0)
    #menu-container grid-row/column  tie with the base placement (1-0-0)
    #menu-container a:hover   ties with the desktop hover rule (1-1-1)

  Keep this block last, before only the 300px query.
  ===========================================================================
*/
@media only screen and (max-width: 520px) {
    /*
      #BBB is right for the inline strip on desktop, where the items read as one
      quiet line. Stacked, each item is on its own and needs more weight to hold --
      and black is already the page's ink, so there's no call to invent a grey.
      Covers the links and the hamburger alike, both of which read this variable.
    */
    :root {
        --menu-link-color: black;
    }
    /* clipped rather than display:none, so it stays keyboard-reachable */
    #menu-toggle {
        display: block;
        position: absolute;
        width: 1px;
        height: 1px;
        overflow: hidden;
        clip-path: inset(50%);
    }
    #menu-button {
        display: block;
        grid-row: 1;
        grid-column: 1;
        justify-self: start;   /* hug the glyph; a 1fr-wide label would make the whole header row a hit target */
        /*
          The label lives in <header>, not #menu-container, so it would otherwise
          inherit the body face -- and Public Sans has no U+2261, which would send
          the glyph to a fallback font. Cooper Hewitt has it.
        */
        font-family: CooperHewitt-Light;
        font-size: 16pt;
        line-height: 1;
        cursor: pointer;
        padding: 0.2em 0.3em;  /* a finger-sized tap target */
        color: var( --menu-link-color );
    }
    #menu-toggle:focus-visible ~ #menu-button {
        outline: 2px solid black;
    }
    header {
        position: relative;   /* containing block for the menu panel */
    }
    #menu-container {
        /*
          grid-row/column must go back to auto: an absolutely positioned grid child
          with definite placement is contained by its grid area, which here would be
          the narrow hamburger cell. With auto placement the containing block is the
          header's padding box, so left/right:0 span its full width.

          ORDER-DEPENDENT: ties with the base #menu-container placement (1-0-0) and wins
          only by coming later. If it lost, the panel would silently shrink to the
          hamburger's cell instead of spanning the header.
        */
        grid-row: auto;
        grid-column: auto;
        position: absolute;
        top: 100%;
        left: 0;
        right: 0;
        z-index: 10;
        /*
          Translucent, so text behind shows through rather than being sliced by the
          panel's edge. The taller the panel grows the more it covers, so it needs a
          correspondingly higher alpha to stay quiet: at 44px rows it reaches down over
          body text as well as the headline.
        */
        background-color: rgba( 204, 204, 204, 0.87 );
        border-top: 1pt solid black;
        display: none;
    }
    #menu-toggle:checked ~ #menu-container {
        display: block;
    }
    #menu-container .menu-sep {
        display: none;
    }
    #menu-container a {
        display: block;
        font-family: CooperHewitt-Bold;
        /*
          0.95em top and bottom, not 0.6: the menu is 10pt, so an em here is 13.3px,
          and this is what puts the row at the ~44px tap target guideline.
        */
        padding: 0.95em 0 0.95em 1em;
        border-bottom: 1pt solid black;
    }
    /*
      ORDER-DEPENDENT, and the sharpest edge in this block: this ties exactly with the
      desktop #menu-container a:hover (both 1-1-1) and beats it only by being later.

      That is also why font-family is repeated rather than redundant -- the desktop
      hover rule sets CooperHewitt-Light, which would otherwise override the Bold set
      just above on hover alone, so the row would change weight as the pointer crossed
      it. display/padding/border-bottom genuinely are redundant; kept so the rule reads
      as a complete description of a hovered row.
    */
    #menu-container a:hover {
        display: block;
        font-family: CooperHewitt-Bold;
        padding: 0.95em 0 0.95em 1em;
        border-bottom: 1pt solid black;
        color: white;
        background-color: black;
    }

}

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