@charset "utf-8";

/*=========================================================*/
/* cross-browser reset
/*==========================================================*/

  html {
    font-size: 16px;
    line-height: 19px;
  }
  html, body, div {
    margin: 0;
    padding: 0;
    position: relative;
    overflow-x: hidden;
  }
  h1, h2, h3, h4, h5, h6, p, ol, ul, blockquote, dt, dd, figcaption, summary, button {
    margin: 0;
    padding: 0;
    position: relative
  }
  sub, sup {
    line-height: 0;
    position: relative;
    vertical-align: baseline;
  }

/*==========================================================*/
/* fonts
/*==========================================================*/

  /* headlines */
  h6 {
    font-family: "Public Light", "Lucida Grande", "Lucida Sans Unicode", "Lucida Sans", "noto sans", sans-serif;
    font-feature-settings: "liga","dlig","calt";
    font-weight: normal;
    font-size: 21px;
    line-height: 27.5px;
  }
  h5 {
    font-family: "Public Light", "Lucida Grande", "Lucida Sans Unicode", "Lucida Sans", "noto sans", sans-serif;
    font-feature-settings: "liga","dlig","calt";
    font-weight: normal;
    font-size: 23px;
    line-height: 31px;
  }
  h4 {
    font-family: "Calluna Bold", palatino, georgia, "noto serif", serif;
    font-feature-settings: "liga","dlig","calt";
    letter-spacing: -.01em;
    font-weight: normal;
    font-size: 25px;
    line-height: 32.5px;
    }
    .image h4, .video h4 { margin-bottom: 13px }
  h3 {
    font-family: "Calluna Bold", palatino, georgia, "noto serif", serif;
    font-feature-settings: "liga","dlig","calt";
    letter-spacing: -.01em;
    font-weight: normal;
    font-size: 29px;
    line-height: 36.5px;
    margin-top: 55px;
    margin-bottom: 21px;
    }
    #full-text h3 {
      border-width: 0 0 0 20px;
      border-left-style: solid;
      padding-left: 20px;
      margin-bottom:34px
      }
      #full-text h3 small {
        display :block;
        font-size: .8em;
        line-height: 1.37em;
        margin-top: 3px;
      }
  h2 {
    font-family: "Public Light", "Lucida Grande", "Lucida Sans Unicode", "Lucida Sans", "noto sans", sans-serif;
    font-feature-settings: "liga","dlig","calt";
    font-weight: normal;
    font-size: 20px;
    line-height: 26px;
    letter-spacing: .1px;
    text-transform: uppercase;
    width: 30%;
    max-width: 200px;
    padding-bottom: 12px;
    border-width: 0 0 1px 0;
    border-bottom-style: solid;
    margin-top: 89px;
    margin-bottom: 34px;
    }
    @media all and (max-width: 579px) { h2 { margin-top: 55px; } }
    #article #synopsis h2 { margin-top: 63px; }
    #breadcrumb {
      padding: 21px 150%;
      margin-top:-55px;
      }
      #breadcrumb p, #continue p { margin-bottom:5px }
    #chapters h2, #keywords h2, #citeit1 h2 {
        margin-bottom: 18px;
      }
  h1 {
    font-family: "Calluna Bold", palatino, georgia, "noto serif", serif;
    font-feature-settings: "liga","dlig","calt";
    letter-spacing: -.01em;
    font-weight: normal;
    font-size: 49px;
    line-height: 53px;
    max-width: 700px;
    margin-left: auto;
    margin-right: auto;
    }
    h1 small {
      display: block;
      font-size: 36px;
      line-height: 43px;
      }
      .sub1st h1 small { margin-bottom: 6px; }
      .sub2nd h1 small { margin-top: 6px; }
        h1 small small {
          font-family: "Calluna";
          font-weight: normal;
          font-size: .8em;
        }

  /* block elements */
  p, ul, ol, dt, dd, figcaption, blockquote small {
    font-family: "Calluna", palatino, georgia, "noto serif", serif;
    font-feature-settings: "liga","dlig","calt";
    letter-spacing: -.01em;
    font-weight: normal;
    }
    p, ul, ol, dt, dd, blockquote small, nav a {
      font-size: 22px;
      line-height: 31.5px;
      }
      header p {
        max-width: 700px;
        margin: 12px auto 0 auto;
      }
      #synopsis p:first-of-type, #definition p:first-of-type { max-width:670px }
      .blurb, #notes li, figcaption, #breadcrumb p, #continue p {
        font-size: 19px;
        line-height: 28.5px;
        }
        figcaption small { font-size:.7em }
    blockquote small {
      display: block;
      margin-top: 8px;
      text-align: right;
    }
  b, strong, .bold {
    font-family: "Calluna Bold";
    font-feature-settings: "liga","dlig","calt";
    letter-spacing: -.01em;
    font-weight: normal;
    }

  /* breakpoints */
  @media all and (max-width: 1199px) {
    p, ul, ol, dt, dd, blockquote small, nav a {
      font-size: 20px;
      line-height: 30.5px;
      }
      .blurb, #notes li, figcaption, #breadcrumb p, #continue p {
        font-size: 18px;
        line-height: 26.5px;
      }
    h1 {
      font-size: 46.5px;
      line-height: 51px;
      }
      h1 small {
        font-size: 34px;
        line-height: 41px;
        }
    h2 {
      font-size: 19px;
      line-height: 25.5px;
    }
    h3 {
      font-size: 27.5px;
      line-height: 35.5px;
    }
    h4 {
      font-size: 24px;
      line-height: 32px;
    }
    h5 {
      font-size: 22px;
      line-height: 29.5px;
    }
    h6 {
      font-size: 20px;
      line-height: 30.5px;
    }
  }
  @media all and (min-width: 700px) and (max-width: 999px) {
    h1 { margin-right: 50px }
  }
  @media all and (max-width: 899px) {
    .blurb, #notes li, figcaption, #breadcrumb p, #continue p {
      font-size: 17px;
      line-height: 25px;
    }
  }
  @media all and (max-width: 579px) {
    p, ul, ol, dt, dd, blockquote small, nav a {
      font-size: 19px;
      line-height: 28.5px;
      }
      .blurb, #notes li, figcaption, #breadcrumb p, #continue p {
        font-size: 16px;
        line-height: 24.5px;
        }
    h1 {
      font-size: 44px;
      line-height: 47.5px;
      }
      h1 small {
        font-size: 32.5px;
        line-height: 38.5px;
        }
    h2 {
      font-size: 18px;
      line-height: 24.5px;
    }
    h3 {
      font-size: 26px;
      line-height: 33px;
    }
    h4 {
      font-size: 22.5px;
      line-height: 31px;
    }
    h5 {
      font-size: 21px;
      line-height: 28.5px;
    }
    h6 {
      font-size: 19px;
      line-height: 28.5px;
    }
  }
  @media all and (max-width: 444px) {
    h1 {
      font-size: 38px;
      line-height: 42px;
      }
      h1 small {
        font-size: 29px;
        line-height: 36.5px;
        }
    h2 {
      font-size: 16.5px;
      line-height: 22.5px;
    }
  }
  @media all and (max-width: 349px) {
    h1 {
      font-size: 33px;
      line-height: 39.5px;
      }
      h1 small {
        font-size: 24.5px;
        line-height: 33px;
      }
  }

  /* inline span widgets */
  .wsnw { white-space: nowrap }
  .skip {
    display: block;
    position: absolute;
    left:-999px;
    top:-999px;
  }
  dfn { font-weight:700 }
  /* abbr { text-decoration: none } */

/*=========================================================*/
/* columns and grids
/*==========================================================*/

  /* column */
  main {
    width: 80%;
    max-width: 700px;
    padding: 0 60px;
    display: block;
    position: relative;
    margin-left: auto;
    margin-right: auto;
    }
    main p, main li { margin-bottom: 21px; }

  header, footer, #breadcrumb, #continue {
    position: relative;
    margin-left: -150%;
    margin-right: -150%;
    margin-bottom: 55px;
    }
    header, footer { padding: 50px 150%; }

  blockquote {
    margin-top: 34px;
    margin-bottom: 34px;
    border-width: 0 0 0 10px;
    border-left-style: solid;
    padding-left: 30px;
    }
    blockquote p { margin-bottom: 0; }

  /* breakpoints */
  @media all and (max-width: 699px) {
    main { padding: 0 30px; }
    header { padding: 100px 150% 50px 150%; }
  }
  @media all and (max-width: 579px) {
    main {
      width: 85%;
      padding: 0 20px;
    }
  }

/*==========================================================*/
/* images and video
/*==========================================================*/

  .image, .video {
    margin-top: 55px;
    margin-bottom: 55px;
    text-align: center;
    }
    .image figure, .video figure {
      position: relative;
      display: block;
      padding: 0;
      margin: 0 auto;
      }
      .square figure img, .horizontal figure img, .vertical figure img {
        position: relative;
        display: block;
        padding: 0;
        margin-left: auto;
        margin-right: auto;
      }
      .video iframe {
        position: relative;
        display: block;
        padding: 0;
        margin-left: auto;
        margin-right: auto;
      }
  .image figcaption, .video figcaption {
    margin-top: 21px;
    margin-left: auto;
    margin-right: auto;
    font-style: italic;
    }
    .image figcaption small, .video figcaption small {
      font-family: "Public Light", "Lucida Grande", "Lucida Sans Unicode", "Lucida Sans", "noto sans", sans-serif;
      font-feature-settings: "liga","dlig","calt";
      font-weight: normal;
      font-style: normal;
    }

  /* Actual image dimensions:: large: 1597x987, medium: 843x521, squarelg: 1230x1230, squaremd: 667x667  */
  @media all and (min-height: 841px)  { .vertical img { width: 449px; height: 726px; } .vertical figcaption { width: 449px; } .square img { width: 557px; height: 557px; } .square figcaption { width: 557px; } }
  @media all and (max-width:  991px)  { .vertical img { width: 449px; height: 726px; } .vertical figcaption { width: 449px; } .square img { width: 557px; height: 557px; } .square figcaption { width: 557px; } }
  @media all and (min-width:  870px)  { .horizontal img { width: 700px; height: 433px; } .video iframe  { width: 700px; height: 394px; } .horizontal figcaption, .video figcaption { width: 600px; } }
  @media all and (max-width:  869px)  { .horizontal img { width: 610px; height: 377px; } .video iframe  { width: 610px; height: 343px; } .horizontal figcaption, .video figcaption { width: 510px; } }
  @media all and (max-width:  800px)  { .vertical img { width: 377px; height: 610px; } .vertical figcaption { width: 377px; } .square img { width: 480px; height: 480px; } .square figcaption { width: 480px; } }
  @media all and (max-height: 840px)  { .vertical img { width: 377px; height: 610px; } .vertical figcaption { width: 377px; } .square img { width: 480px; height: 480px; } .square figcaption { width: 480px; } }
  @media all and (max-width:  759px)  { .horizontal img { width: 521px; height: 322px; } .video iframe  { width: 521px; height: 293px; } .horizontal figcaption, .video figcaption { width: 421px; } }
  @media all and (max-width:  659px)  { .horizontal img { width: 445px; height: 275px; } .video iframe  { width: 445px; height: 250px; } .horizontal figcaption, .video figcaption { width: 345px; } }
  @media all and (max-width:  650px)  { .vertical img { width: 322px; height: 521px; } .vertical figcaption { width: 322px; } .square img { width: 410px; height: 410px; } .square figcaption { width: 410px; } }
  @media all and (max-height: 725px)  { .vertical img { width: 322px; height: 521px; } .vertical figcaption { width: 322px; } .square img { width: 410px; height: 410px; } .square figcaption { width: 410px; } }
  @media all and (max-width:  559px)  { .horizontal img { width: 380px; height: 235px; } .video iframe  { width: 380px; height: 214px; } .horizontal figcaption, .video figcaption { width: 300px; } }
  @media all and (max-width:  550px)  { .vertical img { width: 275px; height: 445px; } .vertical figcaption { width: 275px; } .square img { width: 350px; height: 350px; } .square figcaption { width: 350px; } }
  @media all and (max-height: 625px)  { .vertical img { width: 275px; height: 445px; } .vertical figcaption { width: 275px; } .square img { width: 350px; height: 350px; } .square figcaption { width: 350px; } }
  @media all and (max-width:  460px)  { .vertical img { width: 235px; height: 380px; } .vertical figcaption { width: 235px; } .square img { width: 299px; height: 299px; } .square figcaption { width: 299px; } }
  @media all and (max-width:  449px)  { .horizontal img { width: 300px; height: 186px; } .video iframe  { width: 300px; height: 169px; } .horizontal figcaption, .video figcaption { width: 280px; } }
  @media all and (max-height: 550px)  { .vertical img { width: 235px; height: 380px; } .vertical figcaption { width: 235px; } .square img { width: 299px; height: 299px; } .square figcaption { width: 299px; } }
  @media all and (max-width:  400px)  { .vertical img { width: 186px; height: 300px; } .vertical figcaption { width: 186px; } .square img { width: 255px; height: 255px; } .square figcaption { width: 255px; } }
  @media all and (max-height: 500px)  { .vertical img { width: 186px; height: 300px; } .vertical figcaption { width: 186px; } .square img { width: 255px; height: 255px; } .square figcaption { width: 255px; } }
  @media all and (max-width:  359px)  { .horizontal img { width: 260px; height: 161px; } .video iframe  { width: 260px; height: 146px; } .horizontal figcaption, .video figcaption { width: 260px; } }

/*==========================================================*/
/* a href
/*==========================================================*/

  a { position:relative }
  /* create outbound links icon */
  a[href^="http"]:not([href*="faithharkey.com"]):not(:has(img, svg, picture)):not(.webring) { padding-right: 1.25rem; }
  a[href^="http"]:not([href*="faithharkey.com"]):not(:has(img, svg, picture)):not(.webring)::after {
    position: absolute;
    content: "";
    display: inline-block;
    width: 1rem;
    height: 1rem;
    margin-left: 0.3rem;
    background-color: var(--color);
    mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 512 512'%3E%3C!--!Font Awesome Free 6.5.2 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license/free Copyright 2024 Fonticons, Inc.--%3E%3Cpath d='M320 0c-17.7 0-32 14.3-32 32s14.3 32 32 32h82.7L201.4 265.4c-12.5 12.5-12.5 32.8 0 45.3s32.8 12.5 45.3 0L448 109.3V192c0 17.7 14.3 32 32 32s32-14.3 32-32V32c0-17.7-14.3-32-32-32H320zM80 32C35.8 32 0 67.8 0 112V432c0 44.2 35.8 80 80 80H400c44.2 0 80-35.8 80-80V320c0-17.7-14.3-32-32-32s-32 14.3-32 32V432c0 8.8-7.2 16-16 16H80c-8.8 0-16-7.2-16-16V112c0-8.8 7.2-16 16-16H192c17.7 0 32-14.3 32-32s-14.3-32-32-32H80z'/%3E%3C/svg%3E");
    mask-repeat: no-repeat;
    mask-size: 75%;
    transform: translateY(0.25rem);
  }
  #notes a[href^="http"]:not([href*="faithharkey.com"]):not(:has(img, svg, picture)):not(.webring)::before {
    content: "\f809";
    display: inline-block;
    width: 1.45rem;
    font-family: "fontello";
    font-style: normal;
    font-weight: normal;
    text-decoration: none;
    line-height: 1em;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
  }

/*==========================================================*/
/* tooltips / keywords / top cite
/*==========================================================*/

  #tooltip, #keywords li {
    font-family:"Public Light","noto sans",sans-serif;
    letter-spacing:0;
    font-feature-settings:"liga","dlig","calt";
    font-size:13px;
    line-height:17px;
    padding:13px 21px;
    border-radius:5px;
    overflow:hidden;
    }
    #keywords { margin-bottom:-5px }
    #tooltip {
      position:absolute;
      z-index:3;
      text-align:left;
      box-shadow: 0px 0px 30px rgba(0, 0, 0, .15);
      }
      #tooltip.about {
      margin-top:-15px;
      border-radius:32px 20px 20px 0px;
      rotate: -10deg;
      }
    #keywords li {
      display: inline-block;
      margin-bottom:-5px;
      white-space: nowrap;
    }

  @media all and (min-width: 1259px) {
    #keywords, #citeit1 {
      position: absolute;
      max-width: 160px;
      }
      #keywords { left: -180px }
        #keywords h2 {
          margin-top: 8px;
          width: 160px;
        }
      #citeit1 { left: 800px }
        #citeit1 h2 {
          margin-top: 8px;
          width: 160px;
          }
          #lexicon #citeit1 h2 { margin-top:0 }
      #citeit1 p {
        font-family:"Public Light","noto sans",sans-serif;
        white-space: nowrap;
        }
        #citeit1 i {
          vertical-align: -2px;
          margin-right: 8px;
        }
        #citeit1 span { font-size:.8em }
  }
  @media all and (max-width: 1260px) {
    #citeit1, #keywords h2 { display: none }
    #keywords ul { margin-top: -21px }
  }

/*==========================================================*/
/* footnotes / anchors
/*==========================================================*/

  sup {
    display: inline-block;
    top: -0.8em;
    height: 12px;
    width: 18px;
    line-height: 12px;
    margin-left: 3px;
    padding: 0;
    }
    sup a {
      display:inline-block;
      font-family: "Public Light", courier, monospace;
      font-weight: normal;
      font-size: 10px;
      height: 12px;
      line-height: 12px;
      width: 18px;
      text-align: center;
      text-decoration:none;
      }
      /* visually hide elements for screenreaders */
      sup a span, .sr {
        position: absolute;
        width: 1px;
        height: 1px;
        padding: 0;
        margin: -1px;
        overflow: hidden;
        clip-path: polygon(0 0, 0 0, 0 0, 0 0);
        white-space: nowrap;
        border: 0;
      }
  #notes li { padding-left:10px }
    #notes li .rtn {
      display:block;
      text-align:right
    }

  /* highlight the container when it's clicked on from an anchor */
  #citation:target, li:target, p:has(> sup:target) {
    background-color: rgb(209, 95, 6, 0.1);
    animation: fade-bg .8s .4s ease-out forwards;
  }
  @keyframes fade-bg {
    to { background-color: transparent; }
  }

/*==========================================================*/
/* nav
/*==========================================================*/

  nav {
    width: 100%;
    height: 120px;
    bottom: 0;
    position: fixed;
    transition: all 0.6s ease-in-out;
    z-index: 2;
    }
    nav.shrink { height: 90px }
    nav ul {
      list-style: none;
      list-style-image: none
      }
      nav li, #continue p {
        position: absolute;
        display: block;
      }
  #nav {
    display: block;
    width: 100%;
    height: 90px;
    bottom: -90px;
    position: fixed;
    transition: all 0.6s ease-in-out;
    z-index: 3;
    }
    #nav li { top: 8px; }
    #nav a, #nav button {
      font-family: "Public Light";
      font-style: normal;
      letter-spacing: .1px;
      display: inline-block;
      width: 60px;
      height: 72px;
      line-height: 60px;
      text-decoration: none;
      text-align: center;
      border: 0;
      background-color: transparent;
      }
      #nav a span, #nav button span {
        font-size: 11px;
        line-height: 11px;
        text-transform: uppercase;
        display: block;
        margin-top: -3px;
      }
      #nav i {
        width: 60px;
        height: 60px;
        display: inline-block;
      }
  #about {
    top: 28px;
    left: 30px;
    transition: all 0.6s ease-in-out;
    }
    #about.nudge { top: 13px }
    #about img {
      display: block;
      position: relative;
      z-index: 4;
      width: 60px;
      height: 60px;
      float: left;
      margin: 2px 15px 0 0;
      border-radius: 30px;
      filter: grayscale(50%);
      transition: filter 0.3s ease-in-out;
      }
      #about img:hover { filter: grayscale(0%); }
    #about p {
      font-family: "Public Light";
      font-feature-settings: "liga","dlig","calt";
      font-weight: normal;
      font-style: normal;
      font-size: 1rem;
      line-height: 1.3rem;
      display: inline-block;
      transition: all 0.3s ease-in-out;
      }
      #about p b, footer p b {
        font-family: "Public Bold";
        font-weight: normal;
        font-style: normal;
        letter-spacing: .1px;
      }
  #citeit2 { left: 110px; }
    #citeit2 a { font-size: 45.5px; }
      #citeit2 a i { opacity: .95 }
      #citeit2 a:hover i { opacity: 1 }
  #print { left: 190px; }
    #print button {
      font-size: 38px;
      cursor:pointer;
    }
  #up { right: 110px; }
    #up a { font-size: 43px; }
      #up a i { opacity: .935 }
      #up a:hover i { opacity: 1 }
  #menu, #homepage #up { right: 30px; }
    #menu a { font-size: 42px; }
  #menu-top {
    position: fixed;
    top: 30px;
    right: 38px;
    transition: all 0.3s ease-in-out;
    }
    #menu-top a {
      font-family: "Public Light";
      font-feature-settings: "liga","dlig","calt";
      font-weight: normal;
      font-size: .5em;
      line-height: 1rem;
      text-decoration: none;
      text-transform: uppercase;
      display: block;
      letter-spacing: .1px;
      transition: all 0.3s ease-in-out;
      }
      #menu-top a i {
        font-size: 4.7em;
        display: block;
        margin-bottom: 3px;
      }

  /* hide the "cite", "print" and "menu" links and buttons of the menubar on various pages */
  #homepage #citeit2, #homepage #print, #homepage #menu, #list #citeit2 { display: none }

  /* breakpoints */
  @media all and (max-width: 899px) {
    #about {
      left: 50%;
      margin-left: -40%;
    }
    #citeit2 {
      left: 32%;
      margin-left: -30px;
    }
    #print {
      left: 50%;
      margin-left: -30px;
    }
    #up {
      right: 32%;
      margin-right: -30px;
    }
    #menu, #homepage #up {
      right: 50%;
      margin-right: -40%;
    }
  }
  @media all and (max-width: 699px) {
    #menu-top {
      margin-right: auto;
      top: 25px;
      left: 50%;
      margin-left: -40%;
      }
      #menu-top a { font-size: .4em; }
        #menu-top a i { margin-bottom: 2px; }
  }
  @media all and (min-width: 580px) {
    #about span.m { display: none }
  }
  @media all and (max-width: 579px) {
    #about {  margin-left: -42%; }
      #about span.d { display: none }
    #citeit2 { left: 32.5%; }
    #up { right: 32.5%; }
    #menu, #homepage #up { margin-right: -42%; }
    #menu-top { margin-left: -42%; }
  }
  @media all and (max-width: 469px) {
    #about {  margin-left: -43%; }
    #menu, #homepage #up { margin-right: -42.5%; }
  }
  @media all and (max-width: 404px) {
    #about {  margin-left: -44%; }
    #citeit2 { left: 33%; }
    #up { right: 33%; }
    #menu, #homepage #up { margin-right: -43%; }
  }
  @media all and (max-width: 339px) {
    #about {  margin-left: -45%; }
  }

/*==========================================================*/
/* list indexes
/*==========================================================*/

  #lexicon #list li { margin: 0 0 8px 21px; }
  #bookshelf #list li { margin: 0 0 13px 21px; }
    #lexicon #list li span, #bookshelf #list li span  {
      font-family: "Public Light", "Lucida Grande", "Lucida Sans Unicode", "Lucida Sans", "noto sans", sans-serif;
      font-size:.8em;
      }

/*==========================================================*/
/* breadcrumb
/*==========================================================*/

  #breadcrumb p {
    font-family: "Public Light", "Lucida Grande", "Lucida Sans Unicode", "Lucida Sans", "noto sans", sans-serif;
    font-feature-settings: "liga","dlig","calt";
    font-weight: normal;
    max-width: 700px;
    margin-left: auto;
    margin-right: auto;
    }

/*==========================================================*/
/* chapter elements
/*==========================================================*/

  /* table of chapters */
  #chapters ol {
    border-width:8px;
    border-radius: 8px;
    border-style: solid;
    padding: 21px 21px 13px 55px;
    }
    #chapters ol li {
      padding-left:5px;
      margin-bottom:13px;
      }
  @media all and (max-width: 579px) {
    #chapters ol { padding: 21px 21px 13px 34px; }
  }

  /* next/previous buttons at end of full text */
  #continue {
    height:100px;
    margin-top:55px;
    }
    #continue h4 {
      text-align:center;
      padding-top:34px;
      }
    #continue p {
      font-family: "Public Light", "Lucida Grande", "Lucida Sans Unicode", "Lucida Sans", "noto sans", sans-serif;
      font-feature-settings: "liga","dlig","calt";
      font-weight: normal;
      margin-top:.5em;
      }
    #continue a { display:block }
    #previous {
      top: 0;
      left: 50%;
      margin-left: -13%;
      text-align: left;
    }
    #next {
      top: 0;
      right: 50%;
      margin-right: -13%;
      text-align: right;
      }
     #next i, #previous i { font-size:2.5em }

/*==========================================================*/
/* footer
/*==========================================================*/

  footer {
    background-color: #f6f5f2;
    margin-top:89px;
    margin-bottom:105px;
    }
    footer p {
      font-family: "Public Light";
      font-feature-settings: "liga","dlig","calt";
      font-weight: normal;
      font-style: normal;
      font-size: 1rem;
      line-height: 1.5rem;
      max-width: 700px;
      margin-left:auto;
      margin-right:auto
      }
      footer .icon-fire {
        font-size:3em;
        color:#bbbab5;
        display:block;
        margin:-20px 0 9px 0;
      }
      footer p .cc, footer p .oa {
        max-width: 1em;
        max-height:1em;
        margin-right: .2em;
        vertical-align: -2px;
      }

    @media all and (max-width: 899px) {
      footer p {
        margin-left:10%;
        margin-right:10%
      }
    }
    @media all and (max-width: 579px) {
      footer {
        margin-top: 55px;
      }
    }

/*==========================================================*/
/* colors - for light screen
/*==========================================================*/

  @media (prefers-color-scheme: light) {

    body { background-color: #fbfbfb } /* previously grey fcfcfc */
    header { background-color: #eeece6 } /* previously grey efefef */
    h1, h2  { color: #000; }
      h1 small { color: #222 }
      h2 { border-color: #222 }
    blockquote, #full-text h3, #chapters ol { border-color: #eeece6 }
      #chapters ol { background-color:#fff }
    a, #nav button {
      color: #004e2d;
      transition: all 0.2s ease-in-out;
      }
      a[href^="http"]:not([href*="faithharkey.com"]):not(:has(img, svg, picture)):not(.webring)::after { background-color: #004e2d }
      a:hover, a:active, a:focus, #print-btn:hover, #print-btn:active, #print-btn:focus { color: #d15f06 }
    #tooltip, #keywords li {
      background:#fff;
      }
      #tooltip.href, #tooltip.about {
        color: #000;
        border-bottom:3px #d15f06 solid;
        }
      #tooltip.abbr {
        color: #000;
        border-bottom:3px #000 solid;
        }
      #keywords li {
        color: #888784;
        border: 5px #f6f5f2 solid;
        }
    sup a { border: 1px solid #004e2d; }
       sup a:hover, sup a:active, sup a:focus { border: 1px solid #d15f06; }
    nav, #nav { background-color: #eeece6 }
      nav { border-top: 15px solid #fbfbfb; }
    footer, #breadcrumb, #continue { background-color: #f6f5f2; }
  }

/*==========================================================*/
/* colors - for dark screen
/*==========================================================*/

  @media (prefers-color-scheme: dark) {

    /* colors */

  }

/*==========================================================*/
/* print / pdf
/*==========================================================*/

  @media print {

    /* colors */
    body, header { background-color: #fff }
    h1, h2, h1 small  { color: #000 }

  }