/* --- Fonts --- */

@font-face {
  font-family: "Atkinson Hyperlegible Next";
  src: url("fonts/atkinson/AtkinsonHyperlegibleNext-VariableFont_wght-Latin.woff2") format("woff2");
  font-weight: 200 700;
  font-style: normal;
  font-display: swap;
  unicode-range: U+0000-00FF;
}

@font-face {
  font-family: "Atkinson Hyperlegible Next";
  src: url("fonts/atkinson/AtkinsonHyperlegibleNext-Italic-VariableFont_wght-Latin.woff2") format("woff2");
  font-weight: 200 700;
  font-style: italic;
  font-display: swap;
  unicode-range: U+0000-00FF;
}

@font-face {
  font-family: "Lora";
  src: url("fonts/lora/Lora-VariableFont_wght.woff2") format("woff2");
  font-weight: 200 700;
  font-style: normal;
  font-display: swap;
  unicode-range: U+0000-00FF;
}

@font-face {
  font-family: "Lora";
  src: url("fonts/lora/Lora-Italic-VariableFont_wght.woff2") format("woff2");
  font-weight: 200 700;
  font-style: italic;
  font-display: swap;
  unicode-range: U+0000-00FF;
}

@font-face {
  font-family: "DM Sans";
  src: url("fonts/dmsans/DMSans-Latin.woff2") format("woff2");
  font-weight: 200 700;
  font-style: normal;
  font-display: swap;
  unicode-range: U+0000-00FF;
}

@font-face {
  font-family: "DM Sans";
  src: url("fonts/dmsans/DMSans-Italic-Latin.woff2") format("woff2");
  font-weight: 200 700;
  font-style: italic;
  font-display: swap;
  unicode-range: U+0000-00FF;
}

@font-face {
  font-family: "mso";
  src: url("fonts/mso/MaterialSymbolsOutlined-static.woff2")
      format("woff2");
  font-weight: 400;
  font-style: normal;
  font-display: block;
}


/* --- Variables ---  */

:root.color-light {

  --baseBG:           #fffafa;
  --baseText:         #303030;
  --baseDecoration:   #ffb300;
  --baseOverDecor:    #303030;
  --baseShadow:       #707070;

  --linkLink:         #3366CC;
  --linkVisited:      #3366CC;
  --linkHover:        #ffb300;
  --linkActive:       #ba0000; /* Firebrick */

  --btnPrimaryBG:     #0d6efd;
  --btnPrimaryBorder: #0d6efd;
  --btnPrimaryText:   #ffffff;

  --btnSuccessBG:     #198754;
  --btnSuccessBorder: #198754;
  --btnSuccessText:   #ffffff;

  --btnDangerBG:      #dc3545;
  --btnDangerBorder:  #dc3545;
  --btnDangerText:    #ffffff;

  --btnWarningBG:     #ffc107;
  --btnWarningBorder: #303030;
  --btnWarningText:   #303030;

  --imgBright:        100%;
  --imgContrast:      100%;

  --footerBG:         #232629;
  --footerBorder:     #ffb300;
  --footerText:       #babfc4;

  --footerLink:       #ffb300;
  --footerVisited:    #ffb300;
  --footerHover:      #f0f0f0;
  --footerActive:     #ffb300;

  --gdprBG:           #000000;
  --gdprText:         #fffffa;

  --gdprLink:         #008080;
  --gdprVisited:      #007070;
  --gdprHover:        #a00000;
  --gdprActive:       #ffb300;

  --signalAlert:      #ff9900; /* DarkOrange */
  --signalDanger:     #f00;

}

:root.color-paper {

  --baseBG:           #c6b07e;   /* slightly lighter, less contrast */
  --baseText:         #3a332a;   /* warm charcoal, ink-like */
  --baseDecoration:   #b08d3a;   /* muted ochre, aged gold */
  --baseOverDecor:    #303030;
  --baseShadow:       #6a6257;

  --linkLink:         #425a75;  /* iron-blue ink */
  --linkVisited:      #4a4a5f;
  --linkHover:        #7a3f1d;  /* warm rust */
  --linkActive:       #5a1f1f;

  --btnPrimaryBG:     #2f5fa5;
  --btnPrimaryBorder: #2f5fa5;
  --btnPrimaryText:   #fdfcf7;

  --btnSuccessBG:     #4e7f5b;
  --btnSuccessBorder: #4e7f5b;
  --btnSuccessText:   #fdfcf7;

  --btnDangerBG:      #9a3b3b;
  --btnDangerBorder:  #9a3b3b;
  --btnDangerText:    #fdfcf7;

  --btnWarningBG:     #c9a24d;
  --btnWarningBorder: #3a332a;
  --btnWarningText:   #3a332a;

  --imgBright:        0.95;
  --imgContrast:      0.95;

  --footerBG:         #2a2a2a;
  --footerBorder:     #b08d3a;
  --footerText:       #c9c4ba;

  --footerLink:       #b08d3a;
  --footerVisited:    #b08d3a;
  --footerHover:      #f0e6c8;
  --footerActive:     #b08d3a;

  --gdprBG:           #000000d7;
  --gdprText:         #fffffa;

  --gdprLink:         #2f7f7a;
  --gdprVisited:      #2a6f6a;
  --gdprHover:        #7a1f1f;
  --gdprActive:       #b08d3a;

  --signalAlert:      #b35c1e;
  --signalDanger:     #8b2c2c;

}

:root.color-dark {

  --baseBG:           #151515;
  --baseText:         #bcc9d6;
  --baseDecoration:   #c0901e;
  --baseOverDecor:    #151515;
  --baseShadow:       #707070;

  --linkLink:         #87cefa; /* LightSkyBlue */
  --linkVisited:      #87cefa; /* LightBlue */
  --linkHover:        #ffb300; /* DarkOrange */
  --linkActive:       #fa8072; /* Salmon */

  --btnPrimaryBG:     #0553bd;
  --btnPrimaryBorder: #0553bd;
  --btnPrimaryText:   #ffffff;

  --btnSuccessBG:     #146640;
  --btnSuccessBorder: #146640;
  --btnSuccessText:   #ffffff;

  --btnDangerBG:      #a22d38;
  --btnDangerBorder:  #a22d38;
  --btnDangerText:    #ffffff;

  --btnWarningBG:     #b9921e;
  --btnWarningBorder: #ffffff;
  --btnWarningText:   #ffffff;

  --imgBright:        0.8;
  --imgContrast:      1.2;

  --footerBG:         #232629;
  --footerBorder:     #ffb300;
  --footerText:       #babfc4;

  --footerLink:       #ffb300;
  --footerVisited:    #ffb300;
  --footerHover:      #f0f0f0;
  --footerActive:     #ffb300;

  --gdprBG:           #000000d7;
  --gdprText:         #f2f2f2;

  --gdprLink:         #008080;
  --gdprVisited:      #007070;
  --gdprHover:        #a00000;
  --gdprActive:       #ffb300;

  --signalAlert:      #ff8c00; /* DarkOrange */
  --signalDanger:     #cd5c5c; /* IndianRed */

}


/* Viewport-adaptive base font size */
:root { --font-root-base: clamp( 16px, 0.6vw + 13.75px, 22px ); }

/* User multiplier */
:root.font-xsmall { --font-root-scale: 0.90; }
:root.font-small  { --font-root-scale: 0.95; }
:root.font-medium { --font-root-scale: 1.00; }
:root.font-large  { --font-root-scale: 1.10; }
:root.font-xlarge { --font-root-scale: 1.20; }

/* Final root font size */
:root { --font-root-size: calc(var(--font-root-base) * var(--font-root-scale)); }

/* --- Font familys per purpose: --- */
:root {

  --font-ui: var(--font-modern);

  --font-modern:  "DM Sans", system-ui, sans-serif;
  --font-comfort: "Atkinson Hyperlegible Next", system-ui, sans-serif;
  --font-classic: "Lora", Georgia, serif;

}


/* --- Resets --- */

* { margin: 0; padding: 0; outline: none;}
/* *:focus-visible { outline: 2px solid currentColor; outline-offset: 2px; } */
*, *::before, *::after { box-sizing: border-box; }

html {
  height:           100%;
  margin:           0;
  padding:          0;
  scroll-behavior:  smooth;

  font-size:        var(--font-root-size);
}

body {
  height:   100%;
  margin:   0;
  padding:  0;

  -webkit-font-smoothing:   antialiased;
  -moz-osx-font-smoothing:  grayscale;
}

/* img, picture, video, canvas, svg { display: block; max-width: 100%; } */

input, button, textarea, select { font: inherit; }

p, h1, h2, h3, h4, h5, h6 { overflow-wrap: break-word; }

button { cursor: pointer; }

.show-on-dark, .show-on-light, .show-on-paper {display: none;}



/* --- Top element styles --- */

html.color-dark   .show-on-dark   { display: block; }
html.color-light  .show-on-light  { display: block; }
html.color-paper  .show-on-paper  { display: block; }

body {
  font-family:      var(--font-ui);
  font-size:        1rem;

  background-color: var(--baseBG);
  color:            var(--baseText);

  transition:       filter 0.5s ease-out;

  &.blurred         { filter: blur(3rem);  }
  &.unblur          { animation: unblur 1s; }

}

header {

  border-style: solid;
  border-width: 0 0 0.125rem 0;
  display:      grid;
    align-items:  center;
    /* grid-template-columns: auto 1fr auto; */
    grid-template-columns: auto auto 1fr auto;
    /* grid-template-areas: "logo nav avatar menu"; */
    grid-template-areas: "menu logo nav avatar";
  padding: 0.75rem 4vw;

  background-color: var(--baseBG);
  border-color:     var(--baseShadow);

  > button {
    grid-area:    menu;
    justify-self: start;

    display:          none;
      align-items:      center;
      justify-content:  center;
    line-height:      1;

    font-size: 1.8rem;
  }

  > img { grid-area: logo; height: 1.5rem; }

  > nav {

    grid-area:    nav;
    justify-self: end;

    display:  flex;
      flex-direction:   row;
      flex-grow:        1;
      flex-wrap:        nowrap;
      justify-content:  end;
    margin-right: 1rem;

    ol {

      border-style:     solid;
      border-width:     0 0 0 3px;
      display:          none;
        flex-direction:   row;
        flex-wrap:        nowrap;
        justify-content:  end;
      padding-left:     0.5rem;

      border-color:     var(--baseDecoration);

      li {

        margin-right: 0.5rem;
        padding:      0;
        line-height:  1;
        list-style:   none;

        font-size:      0.8rem;
        letter-spacing: 0.05rem;
        font-weight:    bold;

      }

    }

  }

  > a {
    grid-area: avatar;
    justify-self: end;

    display: none;

    img {
      border-radius:  50%;
      border-color:   var(--baseBG);
      border-style:   solid;
      border-width:   0.05rem;
      height:         1.6rem;
      width:          auto;

      &:hover { border-color: var(--baseDecoration); }
    }

  }


}

main {

  min-height: 70vh;
  width:      100%;
  hyphens:    auto;

  .link         { color: var(--linkLink); cursor: pointer; }
  .link:hover   { color: var(--linkHover); }

  a             { color: var(--linkLink); text-decoration: none;}
  a:visited     { color: var(--linkVisited); }
  a:hover       { color: var(--linkHover); text-decoration: underline;}
  a:focus       { color: var(--linkFocus); text-decoration: underline; }
  a:active      { color: var(--linkActive); }

  &.text-align-left { text-align: left; }
  &.text-align-both { text-align: justify; }

  &.line-height-large  { line-height: 1.8; }
  &.line-height-medium { line-height: 1.6; }
  &.line-height-small  { line-height: 1.4; }

  &.reader {

    &.font-modern   { font-family: var(--font-modern); }
    &.font-comfort  { font-family: var(--font-comfort); }
    &.font-classic  { font-family: var(--font-classic); }

    /* Width below is 100% because box-sizing is set to border-box by default! */
    &.page-margin-narrow  { padding: 0  6% 2rem  6%;  width: 100%; } /* Was 88% */
    &.page-margin-wide    { padding: 0 12% 2rem 12%;  width: 100%; } /* Was 76% */

    article.cover {
      background-image: url('../pics/backgrounds/noise.png');
      /* border-style: solid; */
      /* border-width: 4vw; */

      /* margin:   1rem; */
      margin:   2rem auto 0 auto;
      /* padding:  1rem; */
      padding:  3rem;

      aspect-ratio: 5/4;
      width: 80vw;

      /* border-color: var(--baseDecoration); */
      background-color: var(--baseDecoration);

      div {
        padding: 1rem;
        background-color: var(--baseBG);

        p {
            margin-bottom: 0;
            margin-top: 0.8rem;
            margin-left: auto;
            margin-right: auto;
            font-size: 1rem;
            width: 80%;
            text-align: center;
          }

        p.publisher   { margin-top: 1.0rem; font-size: 0.9rem; }
        p.authors     { margin-top: 2.6rem; font-size: 1.4rem; }
        p.title       { margin-top: 1.2rem; font-size: 1.7rem; }
        p.subtitle    { margin-top: 0.7rem; font-size: 1.3rem; }
        p.originals   { margin-top: 1.0rem; font-size: 1rem; }
        p.attribution { margin-top: 3.6rem; span.mso {font-size: 1.6rem;} }
        p.copyright   { margin-bottom: 1.0rem; margin-top: 1.0rem; font-size: 0.8rem; }

        img {
          border-style: solid;
          border-width: 0.5vw;
          display:      block;
          margin:       4rem auto 2rem auto;
          width:        33vw;

          border-color: var(--baseDecoration);
        }

      }

    }

    div.page-header {

      border-style:   solid;
      border-width:   0 0 0.0625em 0;
      padding:        0.5em 0;

      border-color: var(--baseDecoration);

      p {
        margin:         0.75rem auto;
        letter-spacing: 0.0625rem;
        line-height:    1;
        text-align:     center;
      }
      p.author    { font-size: 1.0rem;  }
      p.title     { font-size: 1.5rem;  }
      p.subtitle  { font-size: 1.2rem; }
      p.block     { font-size: 0.9rem; }

    }

    div.page-body {  margin: 2em 0; }

  } /* /main.reader */

  &:not(.reader) {

    &.font-modern,
    &.font-comfort,
    &.font-classic  { font-family: var(--font-ui); }

    &.page-margin-narrow,
    &.page-margin-wide { padding: 0 0 2rem 0; }

    &.line-height-large,
    &.line-height-medium,
    &.line-height-small  { line-height: 1.6; }

    h2 {
      margin: 4rem auto 2rem auto;
      letter-spacing: 0.1rem;
      text-align: center;
    }

  } /* /main:not(reader) */



  /* -- (Some good) types -- */

  button {

    border-style:         solid;
    border-width:         1px;
    border-radius:        0.25rem;

    cursor:               pointer;
    display:              inline-block;
    height:               2.5rem;
    width:                5rem;

    font-size:            1rem;
    font-weight:          400;
    line-height:          1;
    text-align:           center;
    text-decoration:      none;


    background-color:     transparent;
    border-top-color:     transparent;
    border-right-color:   transparent;
    border-bottom-color:  transparent;
    border-left-color:    transparent;

    color:                #212529;

    transition:           background-color 0.15s ease-in-out,
                          border-color 0.15s ease-in-out,
                          box-shadow 0.15s ease-in-out,
                          color 0.15s ease-in-out;

    &.primary {

      background-color: var(--btnPrimaryBG);
      border-color:     var(--btnPrimaryBorder);
      color:            var(--btnPrimaryText);

    }

    &.success {

      background-color: var(--btnSuccessBG);
      border-color:     var(--btnSuccessBorder);
      color:            var(--btnSuccessText);

    }

    &.danger {

      background-color: var(--btnDangerBG);
      border-color:     var(--btnDangerBorder);
      color:            var(--btnDangerText);

    }

    &.warning {

      background-color: var(--btnWarningBG);
      border-color:     var(--btnWarningBorder);
      color:            var(--btnWarningText);

    }

    &.narrow  { width: auto; }
    &.wide    { width: 8rem; }

    &:focus, &:hover { border-color: #303030; }

    &:disabled { cursor: not-allowed; background-color: Gray; border-color: Gray; }

    & span.material-symbols-outlined { font-size: 1.2rem; }

  }

  form {

    margin: 2rem auto;
    width: 60vw;

    div.item {

      display:          flex;
      flex-direction:   column;
      margin-bottom:    1.5rem;

      label { font-size: 0.9rem; font-weight: bold; }

      span.material-symbols-outlined { font-size: 1.1rem; }

      input {

        border-style:     solid;
        border-width:     0.05rem;
        border-radius:    0.25rem;
        box-sizing:       border-box;
        height:           1.6rem;
        hyphens:          none;
        margin:           0.4rem 0 0 0;
        padding:          0.3rem 0.5rem;
        width:            100%;

        font-size:        0.9rem;

        background-color: var(--baseBG);
        border-color:     var(--baseText);
        color:            var(--baseText);

        outline:          none;

        &:focus {
          box-shadow: 0 0 4px 1px var(--baseDecoration);
          border-color: var(--baseDecoration);
        }

        &:invalid { border-color: var(--signalDanger); }

        &[type="date"] { width: 50%; }

        &[type=file] { border: none; padding-left: 0;}

        &.not-unique { background-color: var(--signalDanger); }
        &.malformed  { border-color: var(--signalDanger); }

      }

      select {

        border-style:     solid;
        border-width:     0.05rem;
        border-radius:    0.25rem;
        height:           1.6rem;
        margin:           0.4rem 0 0 0;
        padding:          0.3rem 0.5rem;
        width:            50%;

        background-color: transparent;
        border-color:     var(--baseText);
        color:            var(--baseText);

        outline:          none;

      }

      p { margin: 0.25rem 0 0 0; font-size: 0.7rem;

        &.not-unique  { color: var(--signalDanger); font-weight: bold; }
        &.malformed   { color: var(--signalDanger); font-weight: bold; }

      }

      &.checkbox {

        display: flex;
        flex-direction: row;

        label {
          display:        inline;
          padding-left:   0.5rem;
          padding-top:    0.5rem;
          vertical-align: bottom;
        }

        input {
          display:        inline;
          height:         1.6rem;
          width:          2rem;
          vertical-align: bottom;
        }

      }

    }

  } /* /form */

  dialog {

  opacity: 0;
  filter: blur(1rem);
  transition:
    opacity 0.4s ease-in,
    filter 0.4s ease-in;

  &[data-visible="true"] {
    opacity: 1;
    filter: blur(0);
  }

  &.credits, &.footnote {
    border:             none;
    display:            flex;
      flex-direction:     column;
    margin:             0;
    padding:            0;
    width:              80%;

    background-color:   var(--baseBG);
    color:              var(--baseText);

  }

  &.credits {
    h1 { margin: 0 0 1rem 0; font-size: 1.3rem; text-align: left; }
    img { float: right; height: 10rem; width: auto; }
  }

  &.floating {
    position:   fixed;
      top:        50%;
      left:       50%;
    transform:  translate(-50%, -50%);
    z-index:            10;

    -webkit-box-shadow: 0 0 0.6rem 0.2rem var(--baseShadow);
    box-shadow:         0 0 0.6rem 0.2rem var(--baseShadow);
  }

  p.dialog-top {
    border-style:       none;
    cursor:             pointer;
    margin:             0;
    padding:            0.25rem 2%;
    width:              100%;
    text-align:         right;
    color:              var(--baseText);

    border-color:       var(--baseDecoration);
    background-color:   var(--baseDecoration);

    &:hover { color: var(--baseBG); }

    &.mso { font-size: 1.8rem; }

  }

  div {
    max-height: 70vh;
    overflow:   auto;
    padding:    1.2rem 1rem;

    h1  { font-size: 1rem; }
    h2  { font-size: 0.951rem; }
    li  {margin: 0.8rem 0 0.8rem 0.8rem; font-size: 0.9rem; }
    p   { margin: 0.8rem 0; font-size: 0.9rem;}

  }


  } /* /dialog */

  figcaption {
    display:    flex;
      flex-direction: column;
      row-gap:        0.5rem;
    font-size:  0.7rem;
    text-align: center;
  } /* /figcaption */

  figure {

    border-style:     solid;
    border-width:     0.05rem;
    border-radius:    0.125rem;
    margin-top:       0;
    margin-bottom:    1rem;
    height:           auto;
    padding:          0.25rem;

    background-color: transparent;
    border-color:     var(--baseShadow);

    &.at-center  { float: none;  margin-left: auto; margin-right: auto; }
    &.at-left    { float: left;  margin-left: 0; margin-right: 1rem; }
    &.at-right   { float: right; margin-left: 1rem; margin-right: 0; }

    img { width: 100%; }

    &.banner-module-top {
      border:   none;
      padding: 0;
      position: relative;
      display:  inline-block;
      width:    100%;

      img { display: block; width: 100%; }

      h1 {
        border-style: solid;
        border-width: 1px 0;
        line-height: 2.6;
        position:     absolute;
        margin:       1rem;
        min-width:    30vw;
        padding:      0 2rem;

        font-size:      max(0.8rem, 5vw - 0.8rem);
        letter-spacing: 0.35rem;
        text-align:     center;

        background-color: rgba(0, 0, 0, 0.75);
        border-color:     var(--baseDecoration);
        color:            var(--baseDecoration);
      }

    }

  } /* /figure */

  h1  {
    margin:         1.5rem 0 2.0rem 0;
    padding:        0 0 0.25rem 0;

    font-size:      1.52rem;
    font-weight:    400;
    text-align:     center;

    &.heading {
      border-style: solid;
      border-width: 0 0 0.1rem 0;
      margin      : 2rem 0 3rem 0;

      border-color: var(--baseDecoration);
    }

    &.title { border: none; margin: 3rem 0 5rem 0; }

  }

  h2 {
    margin:       2.0rem 0 1.5rem 0;

    font-size:    1.3rem;
    font-weight:  400;
  }

  h3 {
    margin:       2.0rem 0 1.5rem 0;

    font-size:    1.15rem;
    font-weight:  400;
    text-align:   left;
  }

  h4 {
    margin:       1.5rem 0 1.0rem 0;

    font-size:    1rem;
    font-weight:  400;
    text-align:   left;
  }

  ol, ul {

    margin:  1rem auto;

    li { margin: 1rem auto 1rem 1.5rem; font-size: 1rem; word-wrap: break-word; }

  }

  p {

    margin: 1rem auto;

    font-size: 1em;
    word-wrap: break-word;

    &.dropcap { position: relative; }

    &.dropcap::first-letter {
      float:			  left;
      font-size:	  3rem;
      font-weight:  300;
      line-height:  0.7;
      margin:       0;
      padding:     	0.4rem 0.3rem 0 0;

      color:        var(--baseText);
    }

    &.verse { margin: 0.5rem auto 0.5rem 2rem; font-size: 0.86rem; }

  }


  /* Types with (a touch of) class */

  div.book-action-link {
    border-radius:    0.25rem;
    margin:           1rem auto;
    padding:          0.5em 1em;
    width:            fit-content;

    background-color: var(--baseDecoration);
    color:            var(--baseOverDecor);

    p { margin: 0.75em auto; text-align: center; }

    p:has(span) {
      border-radius:  9999px;
      border-style:   solid;
      border-width:   0.1em;
      padding:        0 0.5em;
      border-color:   var(--baseOverDecor);
    }

    a, p.link {
      display:        flex;
      flex-direction:   row;
      justify-content:  space-between;
      align-items:      center;

      text-align:       center;
      text-decoration:  none;

      color:            var(--baseOverDecor);
    }

    a:visited, a:active       {color: var(--baseOverDecor); }
    a:hover, span.link:hover  { color: var(--baseText); }

    span.mso { margin: 0.125rem 0.25rem; font-size: 1.7em; }

  }

  div.books-recent-grid {
    display:  flex;
      flex-wrap:        wrap;
      justify-content:  center;
      gap:              1rem;
    padding:  0.5rem;

    & .grid-cell {
      border-radius:    0.1rem;
      flex:             0 0 12rem;
      box-sizing:       border-box;
      padding:          0.5rem;

      text-align:       center;

      & img {
        border-radius:  0.1rem;
        height:         auto;
        max-width:      100%;
      }

      & h3 {
        margin:       0.5rem 0 0 0;

        font-size:    0.9rem;
        font-weight:  bold;
        text-align:   center;
      }

      & h4 {
        margin:       0.4rem 0;

        font-size:    0.7rem;
        font-weight:  bold;
        text-align:   center;
      }

      & p {
        margin:     0;
        width:      100%;
        height:     15em;
        overflow-y: auto;
        font-size:  0.7rem; text-align: start;
      }

    }

  }

  div.category-grid {

    display:  flex;
      flex-direction:   row;
      flex-wrap:        wrap;
      justify-content:  space-around;
      gap:              1.7rem;
    margin:   1rem auto;
    padding:  0.25rem 0.5rem;
    width:    80%;

    div {

      cursor:     pointer;
      margin-top: 0.5rem;
      width:      6rem;

      img { width: 100%; }

      .link         { color: var(--baseText); text-decoration: none; font-weight: bold; }
      .link:hover   { color: var(--baseDecoration); }

      a             { color: var(--baseText); text-decoration: none; font-weight: bold; }
      a:visited     { color: var(--baseText); }
      a:hover       { color: var(--baseDecoration); }
      a:focus       { color: var(--baseDecoration); }
      a:active      { color: var(--baseText); }

      p { margin: 0.1rem auto; font-size: 0.7rem; text-align: center; }

    }

  }

  div.note { display: none; }

  div.selling-cards {

    display:          flex;
      flex-direction:   row;
      flex-wrap:        wrap;
      justify-content:  space-between;
    margin:           2rem auto 2rem auto;
    width:            90%;

    div {

      display:          flex;
        flex-direction:   column;
      margin:           1rem auto;
      padding:          0;
      width:            20vw;

      h1 {

        margin:         0;
        padding:        0.5em 0;
        width:          100%;

        font-size:      1em;
        font-weight:    700;
        letter-spacing: 0.025rem;
        line-height:    1;
        text-align:     center;

        background-color: var(--baseDecoration);
        color:            var(--baseOverDecor);

      }

      p {

        margin:       0 auto;
        padding:      0.5rem 0;
        width:        100%;

        font-size:    0.8em;
        hyphens:      none;
        line-height:  1.3;
        text-align:   center;

      }

    }

  }

  div.submit-bar  {

    border-top-style: solid;
    border-top-width: 0.1rem;
    display:          flex;
    flex-direction:   row;
    justify-content:  space-between;
    margin-top:       3.5rem;
    padding-top:      1.5rem;

    border-top-color: var(--baseDecoration);

  }

  div.table-container {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch; /* for smooth scrolling on iOS */
  }

  p.bubble {

    border-radius:  9999px;
    border-style:   solid;
    border-width:   0.1em;
    display:        flex;
      flex-direction:   row;
      justify-content:  space-between;
      align-items:      center;
      gap:              1rem;
    padding:        0.5rem 0.75rem;
    margin:         1rem auto;
    width:          fit-content;

    span:first-of-type { font-size: 2rem;}

    &.warning {

      background-color: var(--btnWarningBG);
      border-color:     var(--btnWarningBorder);
      color:            var(--btnWarningText);

    }

  }

  p.go-next { display: block; font-size: 3rem; margin: 0 0 1rem auto; width: fit-content; }

  p.member-avatar {

    margin:   0 auto 3rem auto;
    position: relative;
    width:    6rem;

    span.mso, img.member-avatar {

      border-style:   solid;
      border-width:   0.05rem;
      border-radius:  50%;
      height:         6rem;
      margin:         0;
      position:       absolute;
        left:           0;
        top:            -3.5rem;
      width:          6rem;

      font-size:  6rem;

      color:        var(--baseDecoration);
      border-color: var(--baseDecoration);

    }

  }

  span.note-link {
    cursor: pointer;
    text-decoration:  underline;

    &:hover { color: var(--baseDecoration);  }
  }

  table.summary {

    border-style:     solid;
    border-width:     1px;
    border-collapse:  collapse;
    margin:           0 0 1rem 2rem;
    float:            right;
    width:            33vw;

    font-size:        0.9rem;

    border-color:     var(--baseShadow);

    thead th {
      padding:          0.5rem 0.4rem;
      font-size: 1.1em;

      background-color: var(--baseDecoration);
      color:            var(--baseOverDecor);
    }

    thead tr:last-of-type th { border-bottom: 1px solid var(--baseShadow); }

    tbody td {
      padding:        0.35rem 0.4rem;
      vertical-align: top;
      font-size:      0.9em;
      text-align:     left;

      &:nth-child(2) { width: 60%; }

      &:first-of-type { font-weight: bold; white-space: no-wrap; hyphens: none; }

      &.separator { height: 3em; vertical-align: bottom; }

      img { width: 90%; object-fit: cover; margin: 0.66em auto 0 auto; display: block;}

    }

  }

  table.wide {

    border-collapse:  collapse;
    border-style:     solid;
    border-width:     0.125rem 0;
    display:          table;
    gap:              0;
    margin:           2rem auto 1rem auto;
    width:            80%;

    font-size:        0.8rem;

    border-color:     var(--baseText);

    thead {

      tr { height: 2rem; background-color: var(--baseDecoration); }

      th {

        border-style: solid;
        border-width: 0.0625rem 0;
        padding:      0.25rem;

        color:            var(--baseText);
        border-color:     var(--baseText);

      }

    }

    tbody {
      & tr { height: 2rem; }
      & tr:nth-child(even) { background-color: #eaeaea; }
      & th { padding: 0.25rem 0; text-align: left; }
      & td { padding: 0.25rem 0; text-align: center; }
    }

  }

} /* /main */


footer {

  border-style:     solid;
  border-width:     0.125rem 0 0 0;
  box-sizing:       border-box;
  display:          grid;
    grid-template-columns:  1fr 1fr 1fr;
    grid-template-rows:     1fr auto;
    gap:                    1rem 1rem;
    grid-template-areas:    "privacy liability contact"
                            "copyright copyright copyright";
  padding:			    0 2vw 3rem 2vw;
  width:            100%;

  font-family:      "Lato", sans-serif;
  font-weight:      300;

  background-color: var(--footerBG);
  border-color:     var(--baseDecoration);

  color:            var(--footerText);

  .privacy      { grid-area: privacy;   }
  .liability    { grid-area: liability; }
  .contact      { grid-area: contact;   }
  .copyright    { grid-area: copyright; }

  a:link        { color: var(--footerLink); text-decoration: none; }
  a:visited     { color: var(--footerVisited); }
  a:hover       { color: var(--footerHover); }
  a:active      { color: var(--footerActive); }

  img.icon      { height: 1em; width: auto; }

  h1 {

    border-style:   solid;
    border-width:   0 0 0.05rem 0;
    margin:         2rem 0 1rem 0;
    padding:		    0;

    font-size:		  1rem;
    letter-spacing: 0.05rem;
    line-height:	  1.4;
    text-align:		  left;

    border-color:   var(--footerBorder);

  }

  p {

    font-size:      0.8rem;
    hyphens:		    auto;
    letter-spacing: 0.05rem;
    line-height:	  1.4;
    text-align:     left;
    word-wrap:	    break-word;

  }

} /*/footer */


button.mso, button.ui-action {

  border:      none;
  margin:      0 0.5rem;
  list-style:  none;
  font-size:   1.5rem;

  background-color: var(--baseBG);
  color: var(--baseText);

  &:hover {color: var(--baseDecoration);}

}

div#barReadersProgress {
  position:         fixed;
    left:             0;
    top:              0;
  height:           0.2rem;
  opacity:          1;
  pointer-events:   none;
  transform-origin: left center;
  transform:        scaleX(0);
  width:            100%;

  background-color: var(--baseDecoration);
}

nav.bar {
  border-radius:    1000px;
  border-style:     solid;
  border-width:     0.125rem;

  display: flex;
    flex-direction:   row;
    flex-wrap:        nowrap;
    justify-content:  center;
    align-items:      center;

  padding:          0.25rem;
  width:            fit-content;
  position:         fixed;
  bottom:           0.5rem;
  left: 50%;
  transform: translateX(-50%);
  transition: transform 0.25s ease, opacity 0.25s ease;
  z-index:          20;

  background-color: var(--baseBG);
  border-color:     var(--baseShadow);

  ol {

    display: flex;
    flex-direction: row;
    flex-wrap: nowrap;
    justify-content: space-around;
    margin: 0 0.5rem;

    li {

      list-style: none;

      img {
        border-radius: 50%;
        border-style: solid;
        border-width: 0.05rem;
        height: auto;
        margin: 0 0.4rem;
        padding: 0.1rem;
        width: 1.1rem;

        border-color: transparent;

        &.current {
          border-color: var(--baseDecoration);
        }

      }

    }

  }

  &.hidden-on-scroll {
    transform: translateX(-50%) translateY(100%);
    opacity: 0;
  }

}

nav.near-nav {

  margin: 2rem auto 3rem auto;
  width: fit-content;

  ol {

    display:          flex;
    flex-direction:   row;
    justify-content: space-between;

    li {
      margin: 0 2rem;
      list-style: none;
      button.mso { font-size: 2rem; }
    }

  }

}

nav.panel {

  border-style:     solid;
  border-width:     1px;
  position:         fixed;
  top:              2rem;
  max-height:       80vh;
  padding:          0.75rem 1.5rem;
  overflow-y:       auto;

  background-color: inherit;
  box-shadow:       0rem 0rem 0.2rem 0.1rem var(--baseShadow);

  .mso { font-size: calc(1.40 * var(--font-root-size)); }

  li { list-style: none; }

  ol {
    display:  flex;
      flex-direction:   row;
      justify-content:  center;
    padding:  0.75rem 0.5rem;
  }

  .font-xlarge { font-size: calc(1.50 * var(--font-root-size)); }
  .font-large  { font-size: calc(1.20 * var(--font-root-size)); }
  .font-medium { font-size: calc(1.00 * var(--font-root-size)); }
  .font-small  { font-size: calc(0.89 * var(--font-root-size)); }
  .font-xsmall { font-size: calc(0.75 * var(--font-root-size)); }

  .font-modern   { font-family: var(--font-modern); }
  .font-comfort  { font-family: var(--font-comfort); }
  .font-classic  { font-family: var(--font-classic); }
}

nav.toc, nav.history, nav.settings {

  min-width:  25vw;
  max-width:  85vw;
  left:       -100%;
  padding:    2rem;
  transition: left 0.75s cubic-bezier(0.60, -0.35, 0.4, 1.35);

  a       { cursor: pointer; color: var(--linkLink); text-decoration: none; }
  a:hover { color: var(--linkHover); }

  h1  {
    border-width: 0  0 0.0625em 0;
    border-style: solid;
    margin-bottom: 0.75em;
    padding-bottom: 0.25em;

    font-size: 1.0rem;
    text-align: center;

    border-color: var(--baseDecoration);
  }

  h2  { margin-bottom: 0.75rem; margin-top: 0.5rem; font-size: 0.9rem; }

  li  { margin-bottom: 0.75rem; margin-left: 0.5rem; font-size: 0.8rem; }

  h1, h2 { font-weight: normal; }

  &.active { left: 1rem; }

}

nav.settings {

  ol {
    display:          flex;
      flex-direction:   row;
      flex-wrap:        nowrap;
      align-items:      center;
      justify-content:  space-evenly;
    margin:           1.7rem 0;
    padding:          0;
  }

}

nav.toc       { z-index: 210; }
nav.history   { z-index: 220; }
nav.settings  { z-index: 230; }
nav.bar       { z-index: 240; }

/* For a few classes more */

.mso {
  font-family: "mso";
  font-style: normal;
  font-weight: 400;
  font-size: 1.25rem;
  line-height: 1;
  display: inline-block;

  font-variant-ligatures: contextual;
  font-feature-settings: "liga";

  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

.disabled             { color: var(--baseShadow) !important; }

.block                { display: block !important; }
.inline               { display: inline-block !important; }
.flex                 { display: flex  !important; }
.grid                 { display: grid  !important; }
.hidden               { display: none  !important; }

.invisible            { opacity: 0; visibility: hidden; }
.visible              { opacity: 1; visibility: visible; }

.scroll               { overflow-x: auto; }
.scroll th, .scroll td
                      { white-space: nowrap; }

.landscape            { display: block; }
.portrait             { display: none; }

.wide                 { display: block; }
.narrow               { display: none; }

.long-note            { display: none; }

.ui-action {
  cursor:   pointer;
  &:hover   { color: var(--baseDecoration);}
  a         { color: var(--baseText); text-decoration: none; }
  a:visited { color: var(--baseText); }
  a:hover   { color: var(--baseDecoration); }
  a:focus   { color: var(--baseText); }
  a:active  { color: var(--baseText); }
}


/* Spacing */

.flipped              { transform: scale(-1, 1); }
.marginless           { margin: 0; }
.borderless           { border: none; }

.i1                   { text-indent:  1em; }
.i2                   { text-indent:  2em; }
.i3                   { text-indent:  3em; }
.i4                   { text-indent:  4em; }
.i5                   { text-indent:  5em; }

.m-0                  { margin:   0    !important; }
.m-1                  { margin:   1rem !important; }
.m-2                  { margin:   2rem !important; }
.m-3                  { margin:   3rem !important; }
.m-4                  { margin:   4rem !important; }
.m-5                  { margin:   5rem !important; }

.m-top0               { margin-top:   0    !important; }
.m-top1               { margin-top:   1rem !important; }
.m-top2               { margin-top:   2rem !important; }
.m-top3               { margin-top:   3rem !important; }
.m-top4               { margin-top:   4rem !important; }
.m-top5               { margin-top:   5rem !important; }

.m-right0             { margin-right:   0    !important; }
.m-right1             { margin-right:   1rem !important; }
.m-right2             { margin-right:   2rem !important; }
.m-right3             { margin-right:   3rem !important; }
.m-right4             { margin-right:   4rem !important; }
.m-right5             { margin-right:   5rem !important; }

.m-bottom0            { margin-bottom:   0    !important; }
.m-bottom1            { margin-bottom:   1rem !important; }
.m-bottom2            { margin-bottom:   2rem !important; }
.m-bottom3            { margin-bottom:   3rem !important; }
.m-bottom4            { margin-bottom:   4rem !important; }
.m-bottom5            { margin-bottom:   5rem !important; }

.m-left0              { margin-left:   0    !important; }
.m-left1              { margin-left:   1rem !important; }
.m-left2              { margin-left:   2rem !important; }
.m-left3              { margin-left:   3rem !important; }
.m-left4              { margin-left:   4rem !important; }
.m-left5              { margin-left:   5rem !important; }

.paddingless          { padding:  0; }

.position-bottom      { bottom: 0; }
.position-left        { left:   0; }
.position-right       { right:  0; }
.position-top         { top:    0; }

.top                  { margin-top: 0 !important; }

.w10                  { width:  10%   !important; }
.w20                  { width:  20%   !important; }
.w25                  { width:  25%   !important; }
.w30                  { width:  30%   !important; }
.w33                  { width:  33%   !important; }
.w40                  { width:  40%   !important; }
.w50                  { width:  50%   !important; }
.w60                  { width:  60%   !important; }
.w66                  { width:  66%   !important; }
.w70                  { width:  70%   !important; }
.w75                  { width:  75%   !important; }
.w80                  { width:  80%   !important; }
.w90                  { width:  90%   !important; }
.w100                 { width:  100%  !important; }

.w10max               { max-width:  10%   !important; }
.w20max               { max-width:  20%   !important; }
.w25max               { max-width:  25%   !important; }
.w30max               { max-width:  30%   !important; }
.w33max               { max-width:  33%   !important; }
.w40max               { max-width:  40%   !important; }
.w50max               { max-width:  50%   !important; }
.w60max               { max-width:  60%   !important; }
.w66max               { max-width:  66%   !important; }
.w70max               { max-width:  70%   !important; }
.w75max               { max-width:  75%   !important; }
.w80max               { max-width:  80%   !important; }
.w90max               { max-width:  90%   !important; }
.w100max              { max-width:  100%  !important; }

.w10min               { min-width:  10%   !important; }
.w20min               { min-width:  20%   !important; }
.w25min               { min-width:  25%   !important; }
.w30min               { min-width:  30%   !important; }
.w33min               { min-width:  33%   !important; }
.w40min               { min-width:  40%   !important; }
.w50min               { min-width:  50%   !important; }
.w60min               { min-width:  60%   !important; }
.w66min               { min-width:  66%   !important; }
.w70min               { min-width:  70%   !important; }
.w75min               { min-width:  75%   !important; }
.w80min               { min-width:  80%   !important; }
.w90min               { min-width:  90%   !important; }
.w100min              { min-width:  100%  !important; }

/* Positioning */

.basis-10             { flex-basis: 10%; }
.basis-20             { flex-basis: 20%; }
.basis-25             { flex-basis: 25%; }
.basis-30             { flex-basis: 30%; }
.basis-33             { flex-basis: calc(100%/3); }
.basis-50             { flex-basis: 50%; }

.to-center            { margin-left: auto; margin-right: auto; }
.to-right             { float: right; }
.to-left              { float: left; }
.to-middle            { display: flex; flex-direction: row; align-items: center; }

.inline-middle        { vertical-align: middle; }

/* Flex */

.row                  { flex-direction: row; }
.row-reverse          { flex-direction: row-reverse; }
.column               { flex-direction: column;}
.column-reverse       { flex-direction: column-reverse;}

.wrap                 { flex-wrap: wrap; }
.wrap-reverse         { flex-wrap: wrap-reverse; }
.wrap-no              { flex-wrap: nowrap; }

.justify-center       { justify-content: center; }
.justify-start        { justify-content: flex-start; }
.justify-end          { justify-content: flex-start; }
.justify-left         { justify-content: left; }
.justify-right        { justify-content: right; }

.spaced-around        { justify-content: space-around; }
.spaced-between       { justify-content: space-between; }
.spaced-to-center     { justify-content: center; }


/* Typography */

.bold			            { font-weight:     bold         !important; }
.italic, .foreign     { font-style:      italic       !important; }
.strike			          { text-decoration: line-through !important; }
.underline		        { text-decoration: underline    !important; }

.smaller              { font-size: 0.6rem  !important;  }
.small                { font-size: 0.8rem  !important;  }
.original, .normal    { font-size: 1.0rem  !important;  }
.large                { font-size: 1.2rem  !important; }
.larger               { font-size: 1.4rem  !important; }
.big                  { font-size: 2.0rem  !important; }
.giant                { font-size: 4.0rem  !important; }

.grab                 { cursor: grab; }
.pointer              { cursor: pointer; }
.help                 { cursor: help; }

.smallcaps            { font-variant: small-caps; }

.text-left		        {	text-align: left		  !important;	}
.text-center	        {	text-align: center		!important;	}
.text-right		        {	text-align: right		  !important;	}
.text-justified	      {	text-align: justify   !important;	}

.spacing-00           { letter-spacing: 0; }
.spacing-01           { letter-spacing: 0.1rem; }
.spacing-05           { letter-spacing: 0.5rem; }
.spacing-10           { letter-spacing: 1.0rem; }


/* Named colors */

.black			          { color: #505050      !important; }
.blue			            { color: #000080      !important; }
.green			          { color: #00a000      !important; }
.gray                 { color: #808080      !important; }
.orange			          { color: #ffb300      !important; }
.red			            { color: #a00000      !important; }
.maroon		            { color: #a00000      !important; }
.snow			            { color: Snow         !important; }
.teal			            { color: Teal         !important; }
.yellow               { color: #ffb300      !important; }
.transparent          { color: transparent    !important; }

.accept               { background-color: #008000; }

.right                { color: green; }
.wrong                { color: red; }

.off                  { color: gray; }
.on                   { color: red; }

.settings-selected    { color: gray  !important; cursor: default !important; }


@media only screen and (max-width: 767px) {

  main {
    form              { width: 76%; }
    div.selling-cards { div.card { width: 40vw; } }
    table.summary     { width: 50%; }
  }

}


@media only screen and (max-width: 479px) {

  div#barReadersProgress { height: 0.4rem;}

  header {

    grid-template-columns: 1fr auto 1fr;
    grid-template-areas:
      "menu logo avatar"
      "nav nav nav";
    row-gap: 0;
    padding: 0.8rem 4vw;
    align-items: center;

    > button {
      display: inline-flex;

    }

    > img { grid-area: logo; height: 1.3rem; }

    > nav {

      justify-self: start;

      display:  flex;
        flex-direction:   column;
        justify-content:  start;

      margin-top: 0;

      max-height: 0;
      overflow:   hidden;

      opacity:        0;
      pointer-events: none;
      transform:      translateY(-0.5rem);

      transition:
        max-height 1.35s ease,
        opacity    1.25s ease,
        margin-top 1.25s ease;

      ol {
        border:           none;
          flex-direction:   column;
          justify-content:  start;
        padding:          0;

        li {
          font-size:  0.9rem;
          margin:     0.4rem 0 0.4rem 0.5rem;
        }

      }

    }

    &.menu-open nav {
      margin-top:     1.5rem;
      max-height:     50vh;
      opacity:        1;
      pointer-events: auto;
      transform:      translateY(0);
    }

  }

  main {

    &.page-margin-narrow  { padding: 0 6% 2rem 6%; }
    &.page-margin-wide    { padding: 0 8% 2rem 8%; }

    &.reader {

      article.cover {

        /* border-style: solid; */
        /* border-width: 4vw; */

        /* margin:   1rem auto; */
        /* padding:  1rem; */
        padding:  2rem;

        div {

          p {
              margin-bottom: 0;
              margin-top: 0.8rem;
              font-size: 1rem;
              width: 90%;

            }

          p.publisher   { margin-top: 0.5rem; font-size: 0.9rem; }
          p.authors     { margin-top: 1.6rem; font-size: 1.1rem; }
          p.title       { margin-top: 0.8rem; font-size: 1.3rem; }
          p.subtitle    { margin-top: 0.5rem; font-size: 1.1rem; }
          p.originals   { margin-top: 0.5rem; font-size: 0.8rem; }
          p.attribution { margin-top: 4.0rem; span.mso { font-size: 1.6rem; } }
          p.copyright   { margin-top: 1.0rem; font-size: 0.8rem; }

          img {
            border-width: 0.75vw;
            margin:       2rem auto 1rem auto;
            width:        50vw;
          }

        }

        p, li { font-size: 1.3rem; }

      }

    }

    /* dialog figure,
    dialog img { float: none !important; margin: 0 auto 1rem auto; width: 80%; }

    dialog figure img  */

    dialog figure { float: none !important; margin: 0 auto 1rem auto; }

    div.books-recent-grid {
      div.grid-cell { border-radius: 0.1rem; flex: 0 0 9rem; }
    }

    div.selling-cards {
      flex-direction: column;
      div.card { width: 80vw; }
    }

    figure {
      &.at-center,
      &.at-left,
      &.at-right  { float: none;  margin-left: auto; margin-right: auto; }
      &.w10, &.w20, &.w25, &.w30,
      &.w33, &.w40, &.w50, &.w60 { width:  60%  !important; }
      &.w66, &.w70, &.w75, &.w80, &.w90, &.w100 { width:  86%  !important; }
    }

    table.summary {
      margin: 0 auto 1rem auto;
      float: none;
      width: 100%;
    }

  }

  footer {
    grid-template-columns: 1fr;
    grid-template-rows: auto auto auto auto;
    grid-template-areas:
      "contact"
      "privacy"
      "liability"
      "copyright";
    padding: 0 4vw 3rem 4vw;
  }

    nav.bar {

      flex-direction: column;
      left: auto;
      right: -5%;
      padding: 0.75rem 0.125rem;

      button {
        margin: 0.5rem 0;
      }

      ol {
        flex-direction: column;

        li {
          margin: 0.4rem 0;

          img {
            height: auto;
            margin: 0.1rem 0;
            width: 1.5rem;
          }
        }

      }

    }

}