:root {
  --story-width: 800px;
}

* {
  box-sizing: border-box;
}

.page-layout {
  display: grid;
  grid-template-columns: 1fr 2fr 1fr;
  grid-template-areas: "cover cover cover" "left-rail main-content right-rail" "left-rail related-content right-rail";
  margin: auto;
  max-width: 100%;
}

.related-content {
  grid-area: related-content;
  padding-inline: 2rem;
}

.left-rail {
  grid-area: left-rail;
}

.related-content {
  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: column;
}

.right-rail {
  grid-area: right-rail;
}

h2 {
  font-size: 1.8rem;
}

.contents-table, .meta-info {
  max-width: 90vw;
}

.mobile-toc {
  display: none;
}

.contents-table-header {
  font-size: 1.2rem;
}

.contents-table {
  width: 100%;
  padding-top: 2rem;
  position: sticky;
  top: var(--nav-height);
  padding-inline-start: 2rem;
  max-height: calc(100vh - var(--nav-height));
  overflow-y: auto;
}

.contents-table ol {
  border-inline-start: 2px solid #a3a3a3;
  padding-inline-start: 2rem;
}

.contents-table ol li {
  margin-block: 1rem;
  padding-inline-start: 0.5rem;
}

.meta-info {
  text-align: left;
  width: min(var(--story-width), 100%);
  font-size: 0.8rem;
  display: flex;
  align-items: center;
  flex-direction: row;
}

.meta-info p {
  margin-left: 0.3rem;
  font-style: italic;
  flex-grow: 2;
}

.categories {
  display: flex;
  flex-direction: row;
  justify-content: end;
  gap: 1rem;
  flex-wrap: wrap;
}

.story-section {
  width: fit-content;
  max-width: var(--story-width);
}

.story-section * {
  margin-block-start: 2rem;
  max-width: 90vw;
  margin-inline: auto;
}

.story-section p a {
  word-wrap: break-word;
}

.story-section p {
  text-align: justify;
  font-size: 1.1rem;
}

.story-section img {
  display: block;
  margin: auto;
  height: auto;
  max-width: 100%;
}

.story-section ul,
.story-section ol {
  max-width: clamp(15rem, 35rem, 80vw);
}

.story-section li {
  margin-block-start: 0.8em;
}

.right {
  float: right;
}

.left {
  float: left;
}

figcaption {
  text-align: center;
  font-style: italic;
  font-size: 1rem;
}

.related-articles {
  display: flex;
  flex-direction: column;
  align-items: start;
  gap: 2rem;
  margin-block: 2rem;
  max-width: 90vw;
  margin-inline: auto;
}

.story-card {
  grid-template-areas: "image preview-text";
}

@media (max-width: 1200px) {
  .related-articles {
    justify-content: start;
  }
  .story-card .story-text {
    margin-inline: 0px;
  }
  .story-card {
    max-width: 250px;
    grid-template-areas: "image" "preview-text";
  }
}
/* Mobile: collapse to a single column. The left rail (TOC) appears above the
   article thanks to the natural DOM order. The right rail is hidden entirely
   because it carries no content and would waste vertical space. */
@media (max-width: 1100px) {
  .page-layout {
    grid-template-columns: 1fr;
    grid-template-areas: "cover" "main-content" "related-content";
  }
  .left-rail {
    display: none;
  }
  .right-rail {
    display: none;
  }
  .mobile-toc {
    display: block;
    max-width: 90vw;
    max-height: fit-content;
  }
  .contents-table {
    position: static;
    padding-top: 1.5rem;
    padding-inline-start: 0.5rem;
  }
  .meta-info {
    width: 100%;
  }
  .story-section {
    width: 100%;
    max-width: 100%;
  }
  .page-header {
    font-size: 2.2rem;
  }
}

/*# sourceMappingURL=story_page.css.bcaf7b469713.map */