.ferncombe.journal-sheet, @{adventure-sheet} {

  /* ----------------------------------------- */
  /*  Typography                               */
  /* ----------------------------------------- */

  p {
    text-align: justify;
    margin: 1rem 0;
    font-family: var(--body-font);
    &.important {
      text-align: center;
      font-weight: bold;
      font-size: var(--body-size);
      line-height: 1rem;
    }
  }

  h1 {
    font-family: var(--h1-font);
    font-size: var(--h1-size);
  }

  h2 {
    font-size: var(--h2-size);
    font-family: var(--h2-font);
    font-weight: bold;
    &::before { border-top: 6px double ; }
    &::after { border-top: 6px double; }
  }

  h3 {
    font-size: var(--h3-size);
    font-family: var(--h3-font);
    font-weight: bold;
    border: unset;
    &::before { border-top: 4px dotted; }
    &::after { border-top: 4px dotted; }
  }

  h4:not(.window-title) {
    font-size: var(--h3-size);
    font-family: var(--h1-font);
    border: unset;
  }

  // Apply fancy borders to some headers
  section.journal-page-content, section.adventure-overview, section.adventure-contents {
    h2, h3 {
      border: none;
      display: flex;
      clear: both;
      justify-content: center;
      align-items: center;
      white-space: nowrap;
      color: var(--ferncombe-green);
      &::before {
        content: "";
        width: 50%;
        margin-right: 1rem;
        border-color: var(--ferncombe-green);
      }
      &::after {
        content: "";
        width: 50%;
        margin-left: 1rem;
        border-color: var(--ferncombe-green);
      }
    }
  }

  // Page & adventure headers
  .journal-page-header, .adventure-header {
    width: 100%;
    margin: 0 auto 1rem;
    background: url(ui/top-left.webp) no-repeat left, url(ui/top-right.webp) no-repeat right;
    background-size: 49%;
    background-position: 0 0, 100% 0;
    h1, h2, h3 {
      text-align: center;
      line-height: 50px;
      padding-top: 20px;
      border-bottom: 3px solid var(--ferncombe-green);
      border-radius: 0 0 100px 100px / 0px 10px 75px 75px;
    }
  }

  /* ----------------------------------------- */
  /*  Blocks                                   */
  /* ----------------------------------------- */

  section.journal-page-content {

    // Only on headers that appear in the text content
    h2 {
      margin-top: 2rem;
    }
    h3 {
      margin-top: 1rem;
    }

    /** Tables */
    table {
      table-layout: fixed;
      margin: auto;
      width: 80%;
      caption {
        padding-bottom: 0.5rem;
        font-family: var(--h1-font);
        font-size: var(--h4-size);
      }
      th, td {
        padding: 0.5rem 0;
        text-align: center;
        width: 30%;
      }
    }

    /** Two-Column Layout */
    .columns {
      display: flex; 
      figure.portrait {
        max-height: 200px;
        flex: 0 0 200px;
        margin: 0 0.2rem 0 1.2rem;
      }
    }

    /* Figures */
    figure {
      display: flex;
      img {
        border: none;
        border-radius: 10px;
      }
      figcaption {
        font-size: var(--h3-size);
        font-family: var(--h3-font);
        font-weight: bold;
        border: unset;
      }
    }

    /* Box Text Variants */
    .box-text {
      margin: 1rem;

      &.narrative {
        font-family: var(--body-i);
        padding: 0 2rem;
        background: linear-gradient(90deg, transparent, rgba(175, 128, 39, 0.1) 5% 95%, transparent);
        border-radius: 1.5rem;
        margin: 1rem;
        border-top: 2px solid rgba(64, 64, 64, 0.8);
        border-bottom: 2px solid rgba(64, 64, 64, 0.8);
      }
    }

    .secret {
      button {
        float: left;
        position: absolute;
        line-height: 20px;
        margin-top: 0.75rem;
        }
      h4 {
        text-align: center;
      }
    }

    dl {
      display: flex;
      flex-wrap: wrap;
      justify-content: space-between;
      align-items: center;
      flex-direction: row;
      line-height: 1rem;    
      width: 80%;
      margin: auto;
      p {
        margin: 0.25rem 0.5rem;
      }
      dt {
        flex-basis: 70%;
      }
      dd {
        flex-basis: 30%;
        p {
          text-align: right;
        }
      }
      dt:nth-of-type(odd), dd:nth-of-type(odd) {
        background-color: rgba(0, 0, 0, 0.05);
      }
      &>p {
        flex-basis: 100%;
        margin: 0.5rem;
        text-align: center;
      }
    }

    h4.amenities {
      margin: initial auto;
      text-align: center;
      font-size: var(--h4-size);
      &::before { border-top: 6px double ; }
      &::after { border-top: 6px double; }
    }
  }
}