/* 
  /````\                       /)                 /````\
 (_.    ) _   __        _     / /        ._       |.  `/_    __   .
:```\  / / ) |  `/`. / / \/\  \/`\._/\  / |     /``\)  / )  /  )  /\
\__/ \/  \/_/`\_/\/_/|/  |  \_/\_/  \/_/  \_.  (____\ .\/__/\_/\_/ ()-.

+-------+
| ABOUT |
+-------+

This is a supplemental stylesheet for decemberseas.com applied to erotica.
Coded from scratch by December Seas unless otherwise noted.

Base URL: <https://decemberseas.com>

=========================================
            TABLE OF CONTENTS
-----------------------------------------
   Type the search key into the "find" 
     dialog to jump to that section.
=========================================
Section name                   Search key
-----------------------------------------
1. Layout .................... ds-layout
2. UX elements ............... ds-ux
  2.1 Reading progress bar ... ds-readbar
  2.2 Poem line numbers ...... ds-poemnum
3. Modules ................... ds-modules
  3.1 Erotica meta ........... ds-meta
  3.2 Erotica identifiers .... ds-eroid
  3.3 Author meta ............ ds-author
=========================================
*/

/*'-.,_,.-'``'-.,_,.='``'-.,_,.-'``'-.,_,.='``'-.,_,.-'``'-.,_,.='``'-.,_,.-'``

[ds-layout]    LAYOUT
               Define sections and positioning.

``'-.,_,.-'``'-.,_,.='``'-.,_,.-'``'-.,_,.='``'-.,_,.-'``'-.,_,.='``'-.,_,.-'*/

.erotica {
    padding: 10px;
    counter-reset: paragraph;
  }
  
  .erotica-frontmatter {
    text-align: center;
    margin: 40px auto;
  }
  
  .erotica-title {
    margin-top: 4rem;
  }

  @media (prefers-color-scheme: dark) {
    #content .erotica-title {
      color: var(--seven-seas);
    }

    .erotica-author {
      color: var(--lace-veil);
    }
  }
  
  #erotica-audiobook {
    margin: 40px auto;
  }
  
  .erotica-audiobook-instructions, .erotica-audiobook-options {
    font: 500 italic smaller/1.2 var(--slab-serif);
  }
  
  .erotica p {
    margin-bottom: 2rem;
    position: relative;
  }
  
  .section-break {
    height: 150px;
    width: 60px;
    background: transparent var(--flourish) no-repeat center;
    margin: 2rem auto 0 auto;
  }

  #content hr {
    margin: 4rem auto;
  }

  .erotica-text {
    padding: 10px 10px 10px calc(10px + 2rem);
  }

  @media only screen and (min-width: 768px) {
    .erotica-text {
      padding: 20px 4rem 20px calc(20px + 4rem);
    }

    #content hr {
      margin: 6rem auto;
    }
  }

  @media only screen and (min-width: 1280px) {
    .erotica-text {
      padding: 0 20% 0 calc(20% + 4rem);
    }

    #content hr {
      margin: 8rem auto;
    }
  }
  
  .erotica-text > p:last-child::after {
    content: '\220E'; /* tombstone */
    display: inline-block;
    margin-left: 5px;
    color: var(--searulean);
  }

  .erotica-text > blockquote {
    font-family: var(--sans-serif);
  }

  .erotica-text p {
    position: relative;
  }

  .erotica-text p::before {
    counter-increment: paragraph;
    content: "\00B6" counter(paragraph);
    position: absolute;
    top: 2px;
    left: -3rem;
    color: var(--sea-salt);
    font-size: smaller;
  }

  @media (prefers-color-scheme: dark) {
    .erotica-text p::before {
      color: var(--crystalline);
    }
  }
  
  @media only screen and (min-width: 768px) {
    .erotica-text p::before {
      top: 3px;
      left: -4rem;
    }
  }

  @media only screen and (max-width: 400px) {
    /* hide paragraph marks when text gets zoomed in to like 200% to prevent distortion */
    .erotica-text {
      padding: 0;
    }

    .erotica-text p::before {
      display: none;
    }
  }

/*'-.,_,.-'``'-.,_,.='``'-.,_,.-'``'-.,_,.='``'-.,_,.-'``'-.,_,.='``'-.,_,.-'``

[ds-ux]    UX ELEMENTS
           Define UX elements.

``'-.,_,.-'``'-.,_,.='``'-.,_,.-'``'-.,_,.='``'-.,_,.-'``'-.,_,.='``'-.,_,.-'*/

/*---------------------------------------------------------------------------*
 [ds-readbar]    READING PROGRESS BAR
                 Derived from reading progress bar by Ricardo Prieto
                 <https://codepen.io/ricardpriet/pen/RjXdPa>
 *---------------------------------------------------------------------------*/
  #content {
    width: 100%;
    margin: 0;
    padding: 0 0 2rem 0;
  }
  
  .erotica {
    position: relative;
    padding: 0;
  }
  
  .erotica::before {
    content: "";
    display: block;
    background: linear-gradient(to right top, var(--seafoam) 0%, var(--searulean) 50%, transparent 50%);
    height: calc(100% - 100vh + 6px);
    width: 100%;
    position: absolute;
    top: 0;
    left: 0;
    z-index: 0;
  }
  
  .erotica::after {
    content: "";
    display: block;
    background: var(--droplets) var(--marble);
    height: calc(100vh - 6px);
    width: 100%;
    position: -webkit-sticky;
    position: sticky;
    bottom: 0;
    left: 0;
  }

  @media (prefers-color-scheme: dark) {
    .erotica::after {
      background-image: var(--asphalt);
    }
  }

  @media only screen and (min-width: 768px) {
    #content .erotica::after {
      bottom: 10px;
    }
  }
  
  .erotica-container {
    margin: 0 auto;  
    position: relative;
    z-index: 1;
    margin-bottom: calc(-100vh + 6px);
    padding: 0 20px;
  }

/*---------------------------------------------------------------------------*
 [ds-poemnum]    POETRY LINE NUMBERS
                 Works with /assets/scripts/number-poem-lines.js
 *---------------------------------------------------------------------------*/

 .poem {
    white-space: pre-wrap;
    margin: 4rem 0 4rem -5rem;
  }

  .poem .line {
    width: 100%;
    display: grid;
    grid: [row1-start] "number . text" auto [row1-end]
          / 3rem 2rem 1fr;
  }

  .poem .line-number {
    grid-area: number;
    text-align: right;
    color: var(--sea-salt);
  }

  .poem .text {
    grid-area: text;
    /* hanging indent so long lines don't blend together */
    text-indent: -1rem;
    padding-left: 1rem;
  }

  @media (prefers-color-scheme: dark) {
    .poem .line-number {
      color: var(--crystalline);
    }
  }
  
/*'-.,_,.-'``'-.,_,.='``'-.,_,.-'``'-.,_,.='``'-.,_,.-'``'-.,_,.='``'-.,_,.-'``

[ds-modules]    MODULES
                Informational boxes and other subsections.

``'-.,_,.-'``'-.,_,.='``'-.,_,.-'``'-.,_,.='``'-.,_,.-'``'-.,_,.='``'-.,_,.-'*/
  
/*---------------------------------------------------------------------------*
 [ds-meta]       EROTICA META (.metabox-erotica)
                 Displays cover and story descriptions
 *---------------------------------------------------------------------------*/
  
  .metabox-erotica {
    background: var(--seafoam) var(--white-diamond);
    padding: 60px 20px 40px 20px;
  }

  .metabox-erotica-cover {
    grid-area: cover;
    display: flex;
    align-items: center;
  }

  .metabox-erotica-cover-image {
    text-align: center;
    margin: 0 auto;
  }

  .metabox-erotica-cover {
    max-width: 250px;
    margin: 0 auto;
  }

  .metabox-erotica-cover-image img {
    height: auto;
    width: 100%;
  }

  @media only screen and (min-width: 768px) {
    .metabox-erotica {
        display: grid;
        grid: [row1-start] "cover info" auto [row1-end]
              [row2-start] "downloads info" auto [row2-end]
              / 1fr 2fr;
        padding: 40px;
      }

      .metabox-erotica-cover {
        margin-right: 40px;
        max-width: 400px;
      }

      .metabox-erotica-basic-info {
        grid-area: info;
      }

      .metabox-erotica-downloads {
        grid-area: downloads;
      }
  }

  @media only screen and (min-width: 1280px) {
    .metabox-erotica {
      padding: 80px 20%;
    }
  }
  
  .metabox-erotica-title {
    margin: 2rem auto 10px auto;
    padding: 0 10px;
    line-height: 1.2;
  }
  
  .metabox-erotica-byline {
    margin: -1rem auto 2rem auto;
    padding: 0 10px;
    font-size: var(--font-size);
    line-height: 1.2;
    text-align: center;
  }
  
  .metabox-erotica-summary {
    display: block;
    margin: 0 auto 2rem auto;
    padding: 0 10px;
    font-size: smaller;
  }
  
  .metabox-erotica-downloads-label {
    margin-bottom: 1rem;
  }
  
  .metabox-erotica-download-links {
    display: flex;
    flex-flow: row;
    justify-content: center;
    list-style-type: none;
    margin-bottom: 2rem;
  }
  
  .metabox-erotica-cover-credits {
    font: 500 italic smaller/1.6 var(--slab-serif);
    margin-top: 1rem;
    color: var(--sea-salt);
  }

  @media (prefers-color-scheme: dark) {
    .metabox-erotica {
      background: var(--abyssal) var(--padded);
    }

    .metabox-erotica-title {
      color: var(--seven-seas);
    }

    #content .metabox-erotica-byline {
      color: var(--searulean);
    }
  }
  
/*---------------------------------------------------------------------------*
 [ds-eroid]    EROTICA IDENTIFIERS (.metabox-erotica-identifiers)
               Display ISBN and copyright
 *---------------------------------------------------------------------------*/
  
  .metabox-erotica-identifiers {
    font: 500 smaller/1.6 var(--slab-serif);
    text-align: center;
    color: var(--sea-salt);
  }
  
#content .metabox-erotica-identifiers p {
    margin: 0;
  }

/*---------------------------------------------------------------------------*
 [ds-author]    AUTHOR META (.metabox-author)
                Displays headshot and bio
 *---------------------------------------------------------------------------*/

 #content .metabox-author-wrapper {
  border: 8px solid var(--seafoam);
  background-color: var(--seafoam);
  border-radius: 5px;
  width: calc(100% - 2rem);
  max-width: 800px;
  margin: 4rem auto;
  box-shadow: 0 0 10px var(--crystalline);
 }

#content .metabox-author {
  padding: 80px 40px;
  margin: 0 auto;
  text-align: center;
  color: var(--brine);

  border-image-slice: 138 140 138 140;
  border-image-width: 140px 140px 140px 140px;
  border-image-outset: 0px 0px 0px 0px;
  border-image-repeat: space round;
  border-image-source: var(--ornate-frame);
  border-style: solid;
}

.metabox-author a {
  color: var(--searulean);
}

.metabox-author-headshot {
  margin: 0 auto;
  padding: 20px 20px 10px 20px;
}

#content .metabox-author-headshot-photo {
  width: 150px;
  height: 150px;
}

#content .metabox-author-headshot-photo img {
  border-radius: 50%;
  width: 150px !important;
  height: 150px !important;
}

.metabox-author-headshot-caption {
  font: 500 italic 1rem/1.2 var(--slab-serif);
  color: var(--sea-salt);
  margin: 10px auto;
}

.metabox-author-label {
  margin-top: 0;
  padding: 10px 10px 0 10px;
  font-size: smaller;
  color: var(--searulean);
}

.metabox-author-body {
  margin: 0;
  padding: 0;
}

.metabox-author-bio {
  font: 400 smaller/1.6 var(--slab-serif);
  margin: 1rem 0;
  padding: 10px;
}

@media screen and (min-width: 768px) {    
  .metabox-author {
    display: grid;
    grid: [row1-start] "headshot . bio" auto [row1-end]
          / 200px 20px 1fr;
    padding: 80px;
  }

  .metabox-author-headshot {
    grid-area: headshot;
  }
  
  .metabox-author-body {
    grid-area: bio;
    text-align: left;
    padding-right: 20px;
  }
  
  .metabox-author-label {
    margin-top: 10px;
  }
}

@media (prefers-color-scheme: dark) {
  #content .metabox-author-wrapper {
    border-color: var(--nocturne);
    box-shadow: 0 0 10px var(--abyssal);
  }

  #content .metabox-author {
    background-color: var(--nocturne);
    color: var(--lace-veil);
  }

  #content .metabox-author-label {
    color: var(--lace-veil);
  }
}