@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
/*==========================================================*/

  h1, h3, h4, b, strong
    { font-family:"Calluna Bold", palatino, georgia, "noto serif", serif; font-feature-settings:"liga","dlig","calt"; letter-spacing:-.01em; font-weight:normal; }
  h2, h5, h6, .image figcaption small, .video figcaption small, #tooltip, #keywords li, #citeit1 p, sup a, .list li span, #breadcrumb p, #continue p, #nav a, #nav button, #about p, #menu-top a, footer p, .log, .opa
    { font-family:"Public Light", "Lucida Grande", "Lucida Sans Unicode", "Lucida Sans", "noto sans", sans-serif; font-feature-settings:"liga","dlig","calt"; font-weight:normal; }
  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; }
  #about p b, footer p b, time, .list li span b, #social li small
    { font-family:"Public Bold", "Lucida Grande", "Lucida Sans Unicode", "Lucida Sans", "noto sans", sans-serif; font-feature-settings:"liga","dlig","calt"; font-weight:normal; font-style:normal; letter-spacing:.1px; }

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

  /* column */
  main { width:80%; padding:0 60px; display:block;  position:relative; margin-left:auto; margin-right:auto; }
    #article main, #lexicon main, #bookshelf main, #me main { max-width:700px; }

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

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

/*==========================================================*/
/* text sizes
/*==========================================================*/

  h1 { font-size:49px; line-height:53px; 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-size:.7em; }
  h2 { 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; } }
  h3 { font-size:29px; line-height:36.5px; margin-top:55px;margin-bottom:21px; }
  h4, #sitemap h3 { font-size:25px; line-height:32.5px; }
  h5 { font-size:23px; line-height:31px; }
  h6 { font-size:21px; line-height:27.5px; }
  p, ul, ol, dt, dd, blockquote small, nav a { font-size:22px; line-height:31.5px; }
  time, .opa span { font-size:16px; line-height:19px; }

  @media all and (max-width:1199px) {
    p, ul, ol, dt, dd, blockquote small, nav a { font-size:20px; line-height:30.5px; }
    time, .opa span { font-size:14px; line-height:17px; }
    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, #sitemap h3 { 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 }
      #sitemap h1 { margin-right:auto }
  }
  @media all and (max-width:579px) {
    p, ul, ol, dt, dd, blockquote small, nav a { font-size:19px; line-height:28.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, #sitemap h3 { 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; }
  }

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

  a { position:relative; transition:all 0.2s ease-in-out; text-decoration-thickness:0.01em; text-underline-offset:0.23em; }
  	footer a { white-space:nowrap; }
  /* create outbound links icon */
  a[href^="http"]:not([href*="faithharkey.com"]):not(:has(img, svg, picture)):not(.webring) { padding-right:0.15rem; }
  a[href^="http"]:not([href*="faithharkey.com"]):not(:has(img, svg, picture)):not(.webring)::after {
    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.1rem);
  }
  /* cite a[href^="http"]:not([href*="faithharkey.com"]):not(:has(img, svg, picture)):not(.webring)::after { margin-left:0.5rem; } */
  /* add arrow icon to in-site links */
  .link a::before {
    content:"\f809";
    display:inline-block;
    width:1.6rem;
    font-family:"fontello";
    font-style:normal;
    font-weight:normal;
    text-decoration:none;
    line-height:1em;
    text-align:left;
    -webkit-font-smoothing:antialiased;
    -moz-osx-font-smoothing:grayscale;
  }
 /* add slashes to slash links */
  .slash a::before {
    content:"/ ";
    display:inline-block;
    width:0.7rem;
   	text-decoration:none;
   	line-height:1em;
   	text-align:left;
    -webkit-font-smoothing:antialiased;
    -moz-osx-font-smoothing:grayscale;
  }
/*==========================================================*/
/* main pages
/*==========================================================*/

  /* headlines */
  #article h1, #lexicon h1, #bookshelf h1, #me h1 { max-width:700px; }
  #article #synopsis h2, #bookshelf #synopsis h2, #me #synopsis h2 { margin-top:63px; }

  #full-text h3:first-of-type { border-width:0 0 0 20px; border-left-style:solid; padding-left:20px; margin-bottom:34px;  }
    #full-text h3 small, #definition h3 small { display:block;font-size:.8em; line-height:1.37em; margin-top:3px; }

  #full-text h4, #definition h4 { margin-top:34px; margin-bottom:8px; }

  /* body text */
  main p, main li, main dd { margin-bottom:21px; }
    main header p { max-width:700px; margin:12px auto 0 auto; }

  /* first paragraph */
  #synopsis p:first-of-type, #definition p:first-of-type { max-width:670px }

  /* blockquote */
  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; }
    blockquote small { display:block; margin-top:8px; text-align:right; }

  /* box of chapters */
  #chapters h2 { margin-bottom:18px; }
  #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; } }

  /* indent */
  .indent, #full-text ol, #full-text ul, #definition ol, #definition ul { margin-left:30px }
    #full-text .indent h4:first-of-type, #definition .indent  h4:first-of-type { margin-top:13px }
  @media all and (max-width:579px) { .indent, #full-text ol, #full-text ul, #definition ol, #definition ul { margin-left:20px } }

  /* next/previous buttons at end of full text */
  #continue { height:100px; margin-top:55px; margin-bottom:55px; }
    #continue h4 { text-align:center; padding-top:34px; }
    #continue p { position:absolute; display:block; margin-top:.5em; margin-bottom:5px }
      #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 }

  /* images and video */
  .image, .video { margin-top:55px; margin-bottom:55px; text-align:center; }
    .image h4, .video h4 { margin-bottom:13px }
    .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-style:normal; }

  /* 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; } }

  /* text widgets */
  .wsnw { white-space:nowrap }
  .skip { display:block; position:absolute; left:-999px; top:-999px; }
  dfn { font-weight:700 }
  /* abbr { cursor:help; border-bottom:0; text-decoration: underline dotted; } */
	.clear { clear:both }
	
/*==========================================================*/
/* breadcrumb strip
/*==========================================================*/

  #breadcrumb { padding:21px 150%; margin-top:-55px; margin-bottom:55px;  }
    #breadcrumb p { margin-bottom:5px }
    #breadcrumb p { max-width:700px; margin-left:auto; margin-right:auto; }

/*==========================================================*/
/* blurb sizes
/*==========================================================*/

  @media all and (min-width:1200px) {
    .blurb p, #notes li, figcaption, #breadcrumb p, #continue p { font-size:19px; line-height:28.5px; }
      figcaption small { font-size:.7em }
  }
  @media all and (max-width:1199px) {
    .blurb p, #notes li, figcaption, #breadcrumb p, #continue p { font-size:18px; line-height:26.5px; }
  }
  @media all and (max-width:899px) {
    .blurb p, #notes li, figcaption, #breadcrumb p, #continue p { font-size:17px; line-height:25px; }
  }
  @media all and (max-width:579px) {
    .blurb p, #notes li, figcaption, #breadcrumb p, #continue p { font-size:16px; line-height:24.5px; }
  }

/*==========================================================*/
/* list pages
/*==========================================================*/

  #lexicon .list li, #lex.list li { margin:0 0 8px 21px; }
  #bookshelf .list li, #books.list li, #papers.list li, #articles.list li { margin:0 0 13px 21px; }
    .list li span  { display:block; font-size:.8em; line-height:1.5em; margin:0.2em 0 21px 0; }
    	#me .list li span  { margin:0.01em 0 21px 0;  line-height:1.6em; } /*  */
    		#me .list li span small { font-size:0.9em }
    .list li i { font-style:normal }

/*==========================================================*/
/* keywords / cite1
/*==========================================================*/

  #keywords { margin-bottom:-5px }
    #keywords h2 { margin-bottom:18px; }
    #keywords li { display:inline-block; margin-bottom:-5px; white-space:nowrap; letter-spacing:0; font-size:13px; line-height:17px; padding:13px 21px; border-radius:5px; overflow:hidden; }

  @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; margin-bottom:18px; width:160px; }
          #lexicon #citeit1 h2 { margin-top:0 }
      #citeit1 p { white-space:nowrap; }
        #citeit1 a { text-decoration:none }
        #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 }
  }

/*==========================================================*/
/* tooltip
/*==========================================================*/

  #tooltip { position:absolute; z-index:3;  font-size:13px; letter-spacing:0; line-height:17px; padding:13px 21px; border-radius:5px; text-align:left; box-shadow:0px 0px 30px rgba(0, 0, 0, .15); overflow:hidden; }
      #tooltip.about { margin-top:-15px; border-radius:32px 20px 20px 0px; rotate:-10deg; }

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

  sup { display:inline-block; top:-0.65em; height:12px; width:18px; line-height:12px; margin-right:2px; margin-left:3px; padding:0; }
    sup a { display:inline-block; font-size:10px; height:12px; line-height:12px; width:18px; text-align:center; text-decoration:none; }

  #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; } }

/*==========================================================*/
/* screenreader help
/*==========================================================*/

  /* 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; }

/*==========================================================*/
/* 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 {  position:absolute; display:block; }

  #nav { position:fixed; display:block; width:100%; height:90px; bottom:-90px; transition:all 0.6s ease-in-out; z-index:3; }
    #nav li { top:6px; }
    #nav a, #nav button { 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 button { transition:all 0.2s ease-in-out; }
      #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-size:1rem; line-height:1.3rem; display:inline-block; transition:all 0.3s ease-in-out; }

  #print { left:112px; }
    #print button { font-size:38px; cursor:pointer; }
    
  #citeit2 { left:190px; }
    #citeit2 a { font-size:45.5px; }
      #citeit2 a i { opacity:.95 }
      #citeit2 a:hover i { opacity:1 }

  #up { right:112px; }
    #up a { font-size:43px; }
      #up a i { opacity:.935 }
      #up a:hover i { opacity:1 }

  #menu, #sitemap #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-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; }

  /* breakpoints */
  @media all and (max-width:899px) {
    #about { left:50%; margin-left:-40%; }
    #print { left:32%; margin-left:-30px; }
    #citeit2 { left:50%; margin-left:-30px; }
    #up { right:32%; margin-right:-30px; }
    #menu, #sitemap #up { right:50%; margin-right:-40%; }
  }
  @media all and (min-width:700px) {
    .sub0 #menu-top #text { display:none }
  }
  @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 }
    #print { left:32.5%; }
    #up { right:32.5%; }
    #menu, #sitemap #up { margin-right:-42%; }
    #menu-top { margin-left:-42%; }
  }
  @media all and (max-width:469px) {
    #about {  margin-left:-43%; }
    #menu, #sitemap #up { margin-right:-42.5%; }
  }
  @media all and (max-width:404px) {
    #about {  margin-left:-44%; }
    #print { left:33%; }
    #up { right:33%; }
    #menu, #sitemap #up { margin-right:-43%; }
  }
  @media all and (max-width:339px) {
    #about {  margin-left:-45%; }
  }

  /* hide the "cite", "print" and "menu" on various pages */
  #sitemap #citeit2,  #sitemap #print, #sitemap #menu, #sitemap #menu-top, #me #citeit2 { display:none }

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

  footer { margin-top:89px; margin-bottom:105px; }
    #sitemap footer { margin-top:0; }
    footer p { font-style:normal; font-size:1rem; line-height:1.5rem; max-width:700px; margin: 13px auto 5px auto; }

      .icon-fire { font-size:3em; color:#bbbab5; display:block; margin:-20px 0 9px 0; }
      .cc, .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; }
  }

/*==========================================================*/
/* webring strip
/*==========================================================*/

  #webrings { border-left-width:0; border-top-width:8px; border-right-width:0; border-bottom-width:8px; border-style:solid; }
    #webrings div { font-style:normal; font-size:1rem; line-height:1.5rem; margin-left:auto; margin-right:auto }

/*==========================================================*/
/* homepage / sitemap
/*==========================================================*/

  /* desktop is 2 columns */
  @media all and (min-width:1160px) {

    /* header */
    #sitemap main { width:100%; padding: 0 0; }
    #sitemap h1 { max-width:1100px; }
      .break { display:none }

    /* double columns */
    #columns { max-width:2150px; margin:-34px auto 0 auto; display:flex; }
      #col1, #col2 { width:50%; flex:1; content:""; display:table; clear:both; }
        #col1 { float:left; border-right:4px solid #eeece6; margin-left:-4px; }
        #col2 { float:right;border-left:4px solid #eeece6; margin-right:-4px; }

      /* column 1 */
      #sitemap #latest { width:520px; float:right; padding:21px 30px 21px 0; }
      #sitemap #articles { width:520px; float:right; padding:21px 30px 34px 0; }
      #sitemap #notes { width:520px; float:right; padding:21px 30px 34px 0; }
        #sitemap #notes ol { margin:34px 0 0 13px; }

      /* column 2 */
      #sitemap #papers { width:535px; padding:34px 21px 34px 34px; }
      #sitemap #lex  { width:535px; padding:34px 21px 34px 34px; }
      #sitemap #books { width:535px; padding:34px 21px 34px 34px; }
      #sitemap #papers h2, #sitemap #lex h2, #sitemap #books h2 { margin-top:0; margin-bottom:34px; }

      /* open access */
      #sitemap .opa { margin:-25px 0 24px 0; }

    /* webrings */
    #webrings div { max-width:1100px; }

    /* footer */
    #sitemap footer p { max-width:1100px; }

  }

  /* tablet and mobile is 1 column */
  @media all and (max-width:1159px) {

    /* header */
    #sitemap main { width:100%; padding: 0 0; }
    #sitemap h1 { max-width:700px; }
      .break { display:none }

    /* single column */
    #columns { max-width:100%; margin-top:-34px; }
      #col1, #col2 { width:100%; }
        #col1 div, #col2 div { max-width:700px; margin-left:auto; margin-right:auto; }

      /* column sections */
      #sitemap #latest, #sitemap #articles, #sitemap #notes, #sitemap #papers, #sitemap #lex, #sitemap #books { width:100%; padding:34px 0; }
        #sitemap #papers h2, #sitemap #books h2, #sitemap #lex h2 { margin-top:13px; margin-bottom: 34px; }

      /* open access */
      #sitemap .opa { margin:-25px 0 34px 0; }

    /* webrings */
    #webrings div { max-width:700px; margin-left:auto; margin-right:auto; }

  }
  @media all and (max-width:999px) {
    #sitemap header { padding:34px 150%; }
    #sitemap header h1, #col1 div, #col2 div, #webrings div { width:80%; padding 0 30px; }
  }
  @media all and (max-width:579px) {
    #webrings div { margin-left:10%; margin-right:10%; }
  }
  @media all and (max-width:579px) {
    #sitemap header h1, #col1 div, #col2 div, #webrings div { width:85%; padding 0 20px; }
    .break { display:inline-block }
  }

  /* homepage elements common to all viewports */

    /* header */
    #sitemap header { margin-bottom:34px; }

    /* subheadlines */
    #sitemap #latest h2 { margin-top:13px; margin-bottom:21px; }
    #sitemap #articles h2, #sitemap #notes h2 { margin-top:13px; }
      #sitemap #articles h3 { margin-top:34px }
    #webrings h2 { margin-top:5px; }

    /* under the h2 */
    #sitemap time, #sitemap .opa { display:block }
      #sitemap time { margin:-5px 0 24px 0; }
    #sitemap .log { text-align:right;  margin-top:-21px; margin-right:15px; }
    	#sitemap .log a { display:inline-block; width:105px; text-align:left; }

    /* lexicon double columns */
    #lex ul:nth-of-type(1) { width:49%; float:left; }
    #lex ul:nth-of-type(2) { width:49%; float:right; }
    /* convert to single column */
    @media all and (max-width:469px) {
      #lex ul:nth-of-type(1) { width:100%; float:none; }
      #lex ul:nth-of-type(2) { width:100%; float:none; }
    }

/*==========================================================*/
/* etc pages
/*==========================================================*/

	/* about page */
  .cv { display: none }
  
  #me h3 { margin-top:34px; margin-bottom:13px; }
  	#me h3:first-of-type { margin-top:0; }
  #me h4 { margin-top:13px; margin-bottom:13px }
  
  /* socials */
  #social li { width:120px; display:inline-block; list-style-type:none; padding:0; }
  	#social li i { display:block; margin-bottom:8px; }
  		#social li i.icon-email { font-size:2.25em; }
  		#social li i.icon-orchid { font-size:2.15em; }
  		#social li i.icon-linkedin { font-size:2.025em; }
	@media all and (max-width:1199px) {
	 	#social li { width:100px; }
	}
	@media all and (max-width:469px) {
	 	#social li { display:block }
	}

	 	 
/*==========================================================*/
/* 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, #me h4 { color:#222 }
      h1 small small { color:#333 }
      h2 { border-color:#222 }
    blockquote, #full-text h3:first-of-type, #chapters ol { border-color:#eeece6 }
      #chapters ol { background-color:#fff }
    a, #nav button { color:#004e2d }
      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; }
    #webrings { border-color:#eeece6; }
    footer, #breadcrumb, #continue { background-color:#f6f5f2; }

    /* homepage desktop is 2 columns */
    @media all and (min-width:1160px) {
      #sitemap body { background-color:#fff }
      #col1 { background-color:#f6f5f2; }
      #col2 { background-color:#fbfbfb; }
      #sitemap #articles { border-top:8px solid #eeece6; }
      #sitemap #notes { border-top:8px solid #eeece6; }
      #sitemap #papers { background-color:#fbfbfb; }
      #sitemap #lex  { background-color:#fff; border-top:8px solid #eeece6;  }
      #sitemap #books { background-color:#fbfbfb; border-top:8px solid #eeece6;  }
    }
    /* homepage tablet and mobile is 1 column */
    @media all and (max-width:1159px) {
      #sitemap #articles { background-color:#fff; border-top:8px solid #eeece6; }
      #sitemap #notes { background-color:#f6f5f2; border-top:8px solid #eeece6; }
      #sitemap #papers { background-color:#fff; border-top:8px solid #eeece6; }
      #sitemap #lex  { background-color:#fff; border-top:8px solid #eeece6;  }
      #sitemap #books { border-top:8px solid #eeece6;  }
      #webrings { background-color:#fff; }
    }

  }

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

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

    /* colors */

  }

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

  @media print {

    /* elements */
    .cv { display: block }
    
    /* colors */
    body, header { background-color:#fff }
    h1, h2, h1 small  { color:#000 }

  }