@font-face {
  font-family: 'Special Gothic';
  src: url('https://pearlnightslair.neocities.org/assets/fonts/SpecialGothic.ttf') format('truetype');
  font-weight: normal;
  font-style: normal;
}
@font-face {
  font-family: 'Alagard';
  src: url('https://pearlnightslair.neocities.org/assets/fonts/alagard.ttf') format('truetype');
  font-weight: normal;
  font-style: normal;
}
@font-face {
  font-family: 'Tandy';
  src: url('https://pearlnightslair.neocities.org/assets/fonts/PxPlus_Tandy1K-II_200L-2y.ttf') format('truetype');
  font-weight: normal;
  font-style: normal;
}
@font-face {
  font-family: 'Birchleaf';
  src: url('https://pearlnightslair.neocities.org/assets/fonts/BirchLeaf.ttf') format('truetype');
  font-weight: normal;
  font-style: normal;
}
:root {
  --headerfont:      'Alagard', serif;
  --bodyfont:        'Special Gothic', Verdana, sans-serif;
  --asciifont:       'Tandy', monospace;
  --color-bg:        #080808;
  --color-selection: #080808;
  --color-fg:        #D3D3D3;
  --color-comment:   #D3D3D3;
  --color-pink:      #D3D3D3;
  --column-bg:       var(--color-bg);
  --link:            #D3D3D3;
  --text-sub:        var(--color-comment);
  --text-accent:     var(--color-pink);
  --text-quote:      var(--color-pink);
  --border-subtle:   var(--color-selection);
}
@media (prefers-color-scheme: light) {
  :root {
    --color-bg:        #f0f0f0;
    --color-selection: #f0f0f0;
    --color-fg:        #080808;
    --color-comment:   #080808;
    --color-pink:      #080808;
    --link:            #080808;
  }
}
* { margin: 0; padding: 0; }
body {
  background:      var(--column-bg);
  color:           var(--color-fg);
  font-family:     var(--bodyfont);
  font-size:       1em;
  line-height:     1.5em;
  display:         flex;
  flex-direction:  column;
  justify-content: space-between;
  min-height:      100vh;
}
h1, h2, h3, h4, h5, h6 {
  font-family:  var(--headerfont);
  word-spacing: 0.1em;
}
main :is(h1, h2, h3, h4, h5, h6) {
  text-align:    center;
  padding:       0.5em;
  border-bottom: 1px dashed var(--border-subtle);
  border-top:    1px dashed var(--border-subtle);
}
header {
  padding: 0 0 1em 0;
}
footer {
  text-align: center;
  padding:    1em;
}
header h1 {
  font-size:     2.5em;
  text-align:    left;
  padding:       0.3em 0 0.4em;
  border-bottom: 1px dashed var(--border-subtle);
}
header h1 a:not(a:hover) {
  text-decoration: none;
}
a {
  color: var(--link);
}
a:hover, a:focus {
  font-weight: bold;
}
header nav {
  margin-top: 0.6em;
}
main {
  position: relative;
}
#left-column, #right-column {
  background: none;
  color:      var(--color-fg);
  padding:    1em;
  flex-basis: 40%;
}
#left-column {
  background: none;
  z-index:    1;
  position:   relative;
  flex-basis: 60%;
}
article {
  display:   flex;
  flex-grow: 1;
}
main p {
  line-height: 1.5;
  margin:      10px 0;
}
main :is(#left-column, #right-column) :is(p, ul) {
  max-width:    80ch;
  margin-left:  auto;
  margin-right: auto;
}
ul {
  padding-left: 1.5em;
}
table {
  width:           100%;
  border-collapse: collapse;
  margin:          1em 0;
  font-family:     var(--bodyfont);
}
thead th {
  font-family:    var(--headerfont);
  padding:        0.5em 0.75em;
  text-align:     left;
  letter-spacing: 0.05em;
}
@media (min-width: 601px) {
  tbody td:first-child { width: 35%; }
}
tbody td {
  padding:        0.5em 0.75em;
  vertical-align: top;
}
@media (max-width: 600px) {
  thead          { display: none; }
  tr             { display: block; margin-bottom: 8px; }
  td             { display: block; border: none; }
  td:first-child { font-family: var(--headerfont); font-weight: normal; }
}
.tombstone {
  position:     relative;
  background:   none;
  font-size:    1.2rem;
  font-family:  var(--headerfont);
  font-variant: small-caps;
  margin:       0.3rem auto;
  color:        var(--color-fg);
  padding:      0.7rem;
  text-align:   center;
  display:      block;
  cursor:       pointer;
  border:       2px dashed var(--link);
  letter-spacing: 0.1em;
  width:        auto;
}
.tombstone:hover {
  font-weight:  bold;
  border-color: var(--color-fg);
  font-family:  'Birchleaf', serif;
}
.button-row {
  display: flex;
  gap:     0.5rem;
}
.filter-container.button-row {
  display:   flex;
  flex-wrap: wrap;
  gap:       0.4rem;
}
.filter-container .tombstone {
  font-family:     var(--bodyfont);
  font-variant:    normal;
  color:           var(--text-accent);
  border-color:    var(--border-subtle);
  text-decoration: underline;
}
.filter-container .tombstone:hover {
  font-weight:  bold;
  border-color: var(--border-subtle);
  font-family:  var(--bodyfont);
}
.ascii-art-label pre {
  display:     table;
  font-family: var(--asciifont);
  margin:      0 auto;
  text-align:  left;
  line-height: 1.3;
  font-size:   16px;
  color:       var(--text-sub);
}
@media (max-width: 1700px) {
  #mobile-hide { display: none; }
}
@media only screen and (orientation: portrait) {
  header nav ul {
    display:    flex;
    flex-wrap:  nowrap;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
    padding-bottom: 4px;
  }
  header nav ul::-webkit-scrollbar { display: none; }
  header nav ul li                  { flex-shrink: 0; }
  article                           { flex-direction: column; }
  .filter-container.button-row      { flex-direction: column; }
  .filter-container.button-row .tombstone { width: 100%; flex: none; }
}
@media only screen and (orientation: landscape) {
  main {
    min-height: 100%;
    flex-grow:  1;
  }
  #left-column {
    overflow-y: auto;
    max-height: 90vh;
    position:   sticky;
    top:        0;
  }
  #right-column {
    overflow-y: auto;
    max-height: 90vh;
    position:   sticky;
    top:        0;
  }
}
.ascii-art-label#mobile-hide {
  position: fixed;
  bottom:   0;
  right:    0;
}
      #left-column {
      }

      .bookcase {
        padding: 0.5rem 1rem 0;
        margin: 0;
      }

      .bookcase::before {
        content: "|_-_--_-_--_-_--_-_--_-_--_-_--_-_--_-_--_-_--_-_--_-_--_-_--_-_--_-_--_-_--_-_--_-_--_-_--_-_--_-_--_-_--_-_--_-_--_-_--_-_--_-_--_-_--_-_--_-_--_-_--_-_--_-_--_-_--_-_--_-_--_-_--|";
        display: block;
        white-space: nowrap;
        overflow: hidden;
        width: 100%;
        font-family: var(--asciifont);
        font-size: 14px;
        color: var(--color-fg);
        margin-bottom: 0.75rem;
      }

      @media (min-width: 601px) {
        .bookcase::before {
          content:
            "  .-------------------------------------------------------------------------------------------------------------------------------------------.\A"
            "  |_ _-_--_-_--_-_--_-_--_-_--_-_--_-_--_-_--_-_--_--_--_--_--_--_--_--_--_--_--_--_--_--_--_--_--_--_--_--_--_--_--_--_--_--_--_--_--_--_-- _|\A"
            "   | --_-_--_-_--_-_--_-_--_-_--_-_--_-_--_-_--_--_--_--_--_--_--_--_--_--_--_--_--_--_--_--_--_--_--_--_--_--_--_--_--_--_--_--_--_--_--_-- |\A"
            "   '--.   .--------------------------------------------------------------------------------------------------------------------------.   .--'\A"
            "      '---'                                                                                                                          '---'";
          white-space: pre;
          overflow: visible;
          width: auto;
          line-height: 1.2;
        }
      }

      .shelf {
        display: flex;
        flex-direction: column;
        gap: 8px;
      }

      .shelf a {
        display: block;
        text-decoration: none;
        color: var(--color-fg);
        background: var(--color-bg);
        border: 1px dashed var(--color-fg);
        padding: 12px 16px;
        font-size: 1.2rem;
        font-family: var(--headerfont);
        letter-spacing: 0.1em;
        text-align: center;
      }

      .shelf a:hover {
        opacity: 0.8;
        font-weight: bold;
      }

      @media (min-width: 601px) {
        .shelf {
          flex-direction: row;
          align-items: flex-end;
          justify-content: center;
          gap: 14px;
        }

        .shelf a {
          display: inline-flex;
          align-items: center;
          justify-content: center;
          position: relative;
          writing-mode: vertical-rl;
          transform: rotate(180deg);
          padding: 30px 14px;
          font-size: 1.4rem;
          height: 200px;
          width: auto;
        }

        .shelf a:hover {
          transform: rotate(180deg) translateY(16px);
        }

        .shelf a::before {
          content: '';
          position: absolute;
          left: 4px;
          right: 4px;
          top: 13px;
          height: 1px;
          background: var(--color-fg);
        }

        .shelf a::after {
          content: '';
          position: absolute;
          left: 4px;
          right: 4px;
          bottom: 13px;
          height: 1px;
          background: var(--color-fg);
        }
      }