/* ==================================================================
   Chip 'n Dale: Rescue Rangers Fanfiction Archive
   Shared stylesheet

   Maintainer notes:
   - This file preserves existing live behavior.
   - New paragraph-style work should prefer the `archive-prose` system
     near the end of this file.
   - A legacy compatibility appendix is kept at the bottom so older
     converted pages remain unchanged.
   ================================================================== */

/* ------------------------------------------------------------------
   Theme tokens
   ------------------------------------------------------------------ */

:root {
  color-scheme: light dark;

  --bg: #f3f0c9;
  --bg-alt: #ece7b8;
  --panel: #fbfae8;
  --panel-soft: #f6f3d8;
  --text: #181818;
  --muted: #4a4a3e;
  --border: #c9c59a;
  --accent: #5a2e00;
  --accent-hover: #3e1f00;
  --image-bg: #f7f2c6;
  --shadow: 0 8px 24px rgba(60, 50, 20, 0.08);

  --max-width: 1040px;
  --story-width: 920px;
  --reading-width: 860px;

  --radius: 18px;
}

@media (prefers-color-scheme: dark) {
  :root {
    --bg: #16150f;
    --bg-alt: #1d1b14;
    --panel: #1f1d15;
    --panel-soft: #27241b;
    --text: #f3efd2;
    --muted: #d3cdaf;
    --border: #4b4635;
    --accent: #e0c15a;
    --accent-hover: #f0d98a;
    --image-bg: #1a1812;
    --shadow: none;
  }
}

/* ------------------------------------------------------------------
   Reset and base elements
   ------------------------------------------------------------------ */

*,
*::before,
*::after {
  box-sizing: border-box;
}

html {
  font-size: 16px;
  scroll-behavior: smooth;
}

@media (prefers-reduced-motion: reduce) {
  html {
    scroll-behavior: auto;
  }
}

body {
  margin: 0;
  font-family: Georgia, "Times New Roman", Times, serif;
  background: linear-gradient(to bottom, var(--bg) 0%, var(--bg-alt) 100%);
  color: var(--text);
  line-height: 1.65;
}

img {
  display: block;
  max-width: 100%;
  height: auto;
}

a {
  color: var(--accent);
  text-decoration-thickness: 1px;
  text-underline-offset: 2px;
}

a:hover,
a:focus {
  color: var(--accent-hover);
}

/* ------------------------------------------------------------------
   Layout containers
   ------------------------------------------------------------------ */

.container {
  width: min(calc(100% - 2rem), var(--max-width));
  margin: 0 auto;
}

.container-story {
  width: min(calc(100% - 2rem), var(--story-width));
  margin: 0 auto;
}

.container-reading {
  width: min(calc(100% - 2rem), var(--reading-width));
  margin: 0 auto;
}

.panel {
  background: var(--panel);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
}

/* ------------------------------------------------------------------
   Global page chrome
   ------------------------------------------------------------------ */

.site-header {
  padding: 1.25rem 0 1rem;
}

.topbar {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 1rem;
  flex-wrap: wrap;
  border-bottom: 1px solid var(--border);
  padding-bottom: 1rem;
}

.site-name {
  margin: 0;
  font-size: 0.95rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--muted);
}

.nav {
  display: flex;
  flex-wrap: wrap;
  gap: 0.9rem 1.2rem;
}

.nav a {
  text-decoration: none;
  font-size: 0.98rem;
}

.hero,
.story-header {
  padding: 2rem 0 2.25rem;
}

.story-header /* ------------------------------------------------------------------
   Typography
   ------------------------------------------------------------------ */

h1 {
  text-align: center;
}

.hero-grid {
  display: grid;
  grid-template-columns: minmax(0, 1.35fr) minmax(280px, 360px);
  gap: 1.5rem;
  align-items: stretch;
}

.hero-copy,
.content-panel,
.story-intro,
.story-body,
.index-panel,
.note-panel,
.footer-panel,
.reader,
.reader-controls,
.intro,
.news-entry,
.card {
  padding: 1.5rem;
}

.hero,
.story-header,
.story-intro,
.story-body,
.content-panel,
.index-panel,
.note-panel,
.footer-panel,
.reader,
.reader-controls,
.intro,
.news-entry,
.card {
  margin-bottom: 1.5rem;
}

.hero-copy {
  padding: 2rem;
  display: flex;
  flex-direction: column;
  justify-content: center;
}

.hero-image {
  padding: 1rem;
  display: flex;
  flex-direction: column;
  justify-content: center;
  background: var(--panel);
}

.hero-image figure {
  margin: 0;
}

.hero-image img {
  width: 100%;
  border: 1px solid var(--border);
  border-radius: 12px;
  background: var(--image-bg);
}

.hero-image figcaption {
  margin-top: 0.75rem;
  font-size: 0.95rem;
  color: var(--muted);
  text-align: center;
}

h1 {
  margin: 0 0 1rem;
  font-size: clamp(2.1rem, 5vw, 3.5rem);
  line-height: 1.08;
  letter-spacing: -0.02em;
}

h2 {
  margin: 0 0 0.75rem;
  font-size: 1.5rem;
  line-height: 1.2;
}

h3 {
  margin: 0 0 0.65rem;
  font-size: 1.2rem;
  line-height: 1.2;
}

.lead,
.meta,
.byline,
.footer-panel,
.note-panel p,
.content-panel p {
  color: var(--muted);
}

.lead {
  margin: 0;
  max-width: 75rem;
  font-size: 1.1rem;
}

.byline {
  margin: 0;
  text-align: center;
  font-size: 1.05rem;
}

.section-title {
  margin: 0 0 0.75rem;
  font-size: 1.5rem;
  line-height: 1.2;
}

.meta {
  margin: 0 0 0.75rem;
  font-size: 0.95rem;
}

.text-link {
  color: var(--accent);
}

/* ------------------------------------------------------------------
   Actions and buttons
   ------------------------------------------------------------------ */

.actions {
  display: flex;
  flex-wrap: wrap;
  gap: 0.85rem;
  margin-top: 1.5rem;
}

.chapter-actions {
  display: grid;
  grid-template-columns: max-content max-content;
  gap: 1rem 1.25rem;
  justify-content: start;
  align-items: start;
}

.chapter-actions .button-back {
  grid-column: 1 / -1;
  width: max-content;
}

.work-links {
  display: flex;
  flex-wrap: wrap;
  gap: 0.75rem 1rem;
  margin-top: 0.85rem;
}

.button,
button {
  display: inline-block;
  font: inherit;
  padding: 0.85rem 1.15rem;
  border-radius: 999px;
  text-decoration: none;
  border: 1px solid var(--accent);
  transition: background-color 0.15s ease, color 0.15s ease, border-color 0.15s ease;
  background: var(--accent);
  color: var(--panel);
  cursor: pointer;
}

.button:hover,
.button:focus,
button:hover,
button:focus {
  background: var(--accent-hover);
  border-color: var(--accent-hover);
  color: var(--panel);
}

.button.primary {
  background: var(--accent);
  color: var(--panel);
}

.button.primary:hover,
.button.primary:focus {
  background: var(--accent-hover);
  border-color: var(--accent-hover);
  color: var(--panel);
}

.button.secondary {
  background: transparent;
  color: var(--accent);
}

.button.secondary:hover,
.button.secondary:focus {
  background: var(--panel-soft);
  color: var(--accent-hover);
}

/* ------------------------------------------------------------------
   Page-level layout blocks
   ------------------------------------------------------------------ */

main {
  padding-bottom: 3rem;
}


.card h2,
.card h3 {
  margin-top: 0;
  margin-bottom: 0.7rem;
  line-height: 1.2;
}

.card p {
  margin-top: 0;
  color: var(--muted);
}

.card .button,
.card .text-link {
  margin-top: 0.4rem;
}

.small-grid {
  display: grid;
  grid-template-columns: 2fr 1fr;
  gap: 1.25rem;
}

/* ------------------------------------------------------------------
   Author index and listing components
   ------------------------------------------------------------------ */

.works-list {
  list-style: none;
  padding: 0;
  margin: 1rem 0 0;
}

.works-list li {
  margin: 0 0 1rem;
  padding: 1rem;
  background: var(--panel-soft);
  border: 1px solid var(--border);
  border-radius: 12px;
}

.works-list strong {
  display: block;
  margin-bottom: 0.35rem;
  color: var(--text);
  font-size: 1.1rem;
}

.parts {
  margin-top: 0.5rem;
  color: var(--muted);
}

.parts a {
  margin-right: 0.35rem;
  white-space: nowrap;
}

/* ------------------------------------------------------------------
   Shared content boxes
   ------------------------------------------------------------------ */

.contact-box,
.callout-box {
  margin-top: 1.25rem;
  padding: 1rem;
  background: var(--panel-soft);
  border: 1px solid var(--border);
  border-radius: 12px;
}

.contact-box p:last-child,
.callout-box p:last-child {
  margin-bottom: 0;
}

/* ------------------------------------------------------------------
   Story page core layout
   ------------------------------------------------------------------ */

.story-body {
  font-size: clamp(1.05rem, 2.1vw, 1.22rem);
  line-height: 1.75;
}

/* Story chapter headings: existing <h2> support plus optional future-proof alias */
.story-body h2,
.story-body .chapter-heading {
  text-indent: 0;
  text-align: center;
  text-decoration: underline;
  font-weight: normal;
  margin: 1.5rem 0 1rem;
}

.story-body hr {
  border: none;
  border-top: 1px solid var(--border);
  margin: 1.5rem 0;
}

.story-body .story-block,
.story-body .story-center,
.story-body .verse {
  text-indent: 0;
}

.story-body .indent-run {
  display: inline-block;
  padding-left: 1.5em;
}

/* ------------------------------------------------------------------
   Story content helpers
   ------------------------------------------------------------------ */

.story-block {
  margin: 0 0 1.3rem;
  white-space: pre-wrap;
  overflow-wrap: break-word;
}

.story-center {
  margin: 0 0 1.3rem;
  text-align: center;
  white-space: pre-wrap;
  overflow-wrap: break-word;
}

.story-columns {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1.5rem;
  margin: 1.5rem 0;
  align-items: start;
}

.story-columns > div {
  margin: 0;
  padding: 0.9rem 1rem;
  background: var(--panel-soft);
  border: 1px solid var(--border);
  border-radius: 12px;
  white-space: pre-wrap;
  overflow-wrap: break-word;
}

.binary-block {
  margin: 0 0 1.3rem;
  padding: 0.9rem 1rem;
  font-family: ui-monospace, SFMono-Regular, Consolas, "Courier New", monospace;
  font-size: 0.95rem;
  line-height: 1.35;
  white-space: pre;
  overflow-x: auto;
  overflow-y: hidden;
  text-indent: 0;
  background: var(--panel-soft);
  border: 1px solid var(--border);
  border-radius: 12px;
}

.verse {
  margin: 0;
  white-space: pre-line;
  overflow-wrap: break-word;
}

.small {
  font-size: 0.95em;
  color: var(--muted);
}

/* ------------------------------------------------------------------
   Secondary site components
   ------------------------------------------------------------------ */

.footer-links {
  margin-top: 2rem;
  padding-top: 1.25rem;
  border-top: 1px solid var(--border);
}

.alpha-nav {
  display: flex;
  flex-wrap: wrap;
  gap: 0.45rem 0.7rem;
  margin-bottom: 1.5rem;
  padding-bottom: 1rem;
  border-bottom: 1px solid var(--border);
}

.alpha-nav a {
  min-width: 1.75rem;
  text-align: center;
  text-decoration: none;
  font-weight: bold;
}

.author-columns {
  columns: 3;
  column-gap: 2rem;
}

.letter-group {
  break-inside: avoid;
  margin: 0 0 1.5rem;
}

.letter-group h2 {
  margin: 0 0 0.5rem;
  font-size: 1.35rem;
  line-height: 1.2;
  color: var(--text);
  border-bottom: 1px solid var(--border);
  padding-bottom: 0.2rem;
}

.letter-group ul {
  list-style: none;
  margin: 0;
  padding: 0;
}

.letter-group li {
  margin: 0 0 0.35rem;
}

.letter-group a {
  text-decoration: none;
}

.letter-group a:hover,
.letter-group a:focus {
  text-decoration: underline;
}

/* ------------------------------------------------------------------
   Reader and comic components
   ------------------------------------------------------------------ */

.reader-controls,
.bottom-controls {
  display: flex;
  flex-wrap: wrap;
  gap: 0.75rem 1rem;
  align-items: center;
  justify-content: space-between;
}

.reader-controls .controls-left,
.reader-controls .controls-right {
  display: flex;
  flex-wrap: wrap;
  gap: 0.75rem;
  align-items: center;
}

.comic-image {
  display: block;
  width: 100%;
  height: auto;
  margin: 0 auto;
  border-radius: 12px;
  background: var(--image-bg);
}

.comic-list {
  padding: 0.75rem;
  margin-bottom: 1.25rem;
}

.comic-page {
  margin: 0 0 1rem;
}

.comic-page:last-child {
  margin-bottom: 0;
}

.comic-page figcaption {
  margin-top: 0.35rem;
  text-align: center;
  color: var(--muted);
  font-size: 0.95rem;
}

.site-footer {
  padding-bottom: 3rem;
}

.footer-panel p {
  margin: 0.35rem 0;
}



/* ------------------------------------------------------------------
   Responsive adjustments
   ------------------------------------------------------------------ */

@media (max-width: 860px) {
  .hero-grid,
  .small-grid {
    grid-template-columns: 1fr;
  }

  .hero-copy,
  .content-panel,
  .story-intro,
  .story-body,
  .index-panel,
  .note-panel,
  .footer-panel,
  .reader,
  .reader-controls,
  .intro,
  .hero-image,
  .news-entry,
  .card {
    padding: 1.25rem;
  }

  .lead {
    font-size: 1.02rem;
  }

  .hero {
    padding-top: 1.5rem;
  }

  .author-columns {
    columns: 2;
  }
}

@media (max-width: 820px) {
  .story-columns {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 700px) {
  body {
    line-height: 1.68;
  }

  .reader-controls .controls-left,
  .reader-controls .controls-right {
    width: 100%;
  }

  .reader-controls .controls-right {
    justify-content: space-between;
  }
}

@media (max-width: 560px) {
  .author-columns {
    columns: 1;
  }
}

/* ------------------------------------------------------------------
   Faithful presentation extensions
   Preferred for current and future conversions when the source truly
   needs these presentation modes. These additions are intentionally
   additive and narrowly scoped. They do not change the default story
   rendering; they only apply when the classes below are used.
   ------------------------------------------------------------------ */

/* Restored inline illustration support */
.story-body .story-illustration,
.story-intro .story-illustration,
.legacy-modern-story .story-illustration {
  margin: 0 0 1.3rem;
  text-align: center;
  text-indent: 0;
}

.story-body .story-illustration img,
.story-intro .story-illustration img,
.legacy-modern-story .story-illustration img {
  margin-inline: auto;
}

/* Newspaper / tabloid splash treatment for inserted headline material */
.story-body .newspaper-splash,
.story-intro .newspaper-splash,
.legacy-modern-story .newspaper-splash {
  text-align: center;
}

.story-body .newspaper-banner,
.story-intro .newspaper-banner,
.legacy-modern-story .newspaper-banner {
  display: grid;
  grid-template-columns: 1fr 1fr;
  align-items: center;
  gap: 0;
  width: 100%;
  margin: 0 0 0.85rem;
  color: #b30000;
  font-size: clamp(1.5rem, 3vw, 2rem);
  font-weight: 700;
  line-height: 1.1;
  text-indent: 0;
}

.story-body .newspaper-banner span,
.story-intro .newspaper-banner span,
.legacy-modern-story .newspaper-banner span {
  display: block;
}

.story-body .newspaper-banner span:first-child,
.story-intro .newspaper-banner span:first-child,
.legacy-modern-story .newspaper-banner span:first-child {
  text-align: left;
}

.story-body .newspaper-banner span:last-child,
.story-intro .newspaper-banner span:last-child,
.legacy-modern-story .newspaper-banner span:last-child {
  text-align: right;
}

.story-body .newspaper-masthead,
.story-intro .newspaper-masthead,
.legacy-modern-story .newspaper-masthead {
  display: inline;
  margin: 0 0 0.9rem;
  padding: 0 0.12rem;
  background: #c00000;
  color: #ffffff;
  font-style: italic;
  font-weight: 700;
  font-size: clamp(1.2rem, 2.4vw, 1.6rem);
  line-height: 1.1;
  text-indent: 0;
  box-decoration-break: clone;
  -webkit-box-decoration-break: clone;
}

.story-body .newspaper-headline,
.story-body .newspaper-subheadline,
.story-intro .newspaper-headline,
.story-intro .newspaper-subheadline,
.legacy-modern-story .newspaper-headline,
.legacy-modern-story .newspaper-subheadline {
  margin: 0;
  color: var(--text);
  font-weight: 700;
  text-align: center;
  text-indent: 0;
  line-height: 1.15;
}

.story-body .newspaper-headline,
.story-intro .newspaper-headline,
.legacy-modern-story .newspaper-headline {
  font-size: clamp(1.5rem, 3vw, 2rem);
}

.story-body .newspaper-subheadline,
.story-intro .newspaper-subheadline,
.legacy-modern-story .newspaper-subheadline {
  margin-top: 0.5rem;
  font-size: clamp(1.3rem, 2.5vw, 1.75rem);
}

.story-body .newspaper-excerpt .story-block,
.story-intro .newspaper-excerpt .story-block,
.legacy-modern-story .newspaper-excerpt .story-block {
  margin: 0;
}

/* Epigraph support
   Use this for opening quotes / lyrics / citations that should stay
   visually distinct without introducing paragraph-sized gaps between
   every quoted line.
*/
.story-body .epigraph-box,
.story-intro .epigraph-box,
.legacy-modern-story .epigraph-box {
  margin: 0 0 1.3rem;
  padding: 1rem 1.25rem;
  background: var(--panel-soft);
  border: 1px solid var(--border);
  border-radius: 12px;
  display: flex;
  flex-direction: column;
  align-items: center;
}

.story-body .epigraph-box p,
.story-intro .epigraph-box p,
.legacy-modern-story .epigraph-box p {
  margin: 0;
  padding: 0;
  width: fit-content;
  max-width: 100%;
  margin-inline: auto;
  text-align: center;
  text-indent: 0;
}

.story-body .epigraph-line,
.story-body .epigraph-attribution,
.story-body .epigraph-verse,
.story-intro .epigraph-line,
.story-intro .epigraph-attribution,
.story-intro .epigraph-verse,
.legacy-modern-story .epigraph-line,
.legacy-modern-story .epigraph-attribution,
.legacy-modern-story .epigraph-verse {
  text-align: center;
  white-space: pre-wrap;
  overflow-wrap: break-word;
  line-height: 1.22;
}

.story-body .epigraph-line + .epigraph-line,
.story-body .epigraph-verse + .epigraph-verse,
.story-intro .epigraph-line + .epigraph-line,
.story-intro .epigraph-verse + .epigraph-verse,
.legacy-modern-story .epigraph-line + .epigraph-line,
.legacy-modern-story .epigraph-verse + .epigraph-verse {
  margin-top: 0.08rem;
}

.story-body .epigraph-attribution,
.story-intro .epigraph-attribution,
.legacy-modern-story .epigraph-attribution {
  margin-top: 0.55rem;
  line-height: 1.25;
}

.story-body .epigraph-verse:empty,
.story-intro .epigraph-verse:empty,
.legacy-modern-story .epigraph-verse:empty,
.story-body .epigraph-gap,
.story-intro .epigraph-gap,
.legacy-modern-story .epigraph-gap {
  display: block;
  width: 100%;
  height: 0.45rem;
  line-height: 0;
}

.story-body .epigraph-box .story-center,
.story-intro .epigraph-box .story-center,
.legacy-modern-story .epigraph-box .story-center {
  margin: 0;
  padding: 0;
  width: fit-content;
  max-width: 100%;
  margin-inline: auto;
  text-align: center;
  text-indent: 0;
}

/* ------------------------------------------------------------------
   Preferred prose system for future conversions
   Use this container-based system for normal story prose instead of
   per-paragraph formatting classes whenever possible.
   ------------------------------------------------------------------ */

/* ------------------------------------------------------------------
   Archive prose modes
   Additive-only paragraph behavior system for normal story prose.
   Existing pages are unaffected unless they opt in with `archive-prose`.

   Usage:
   - Style 1 (indented + spaced):
     <article class="panel story-body archive-prose prose-style-1">
   - Style 2 (unindented + spaced):
     <article class="panel story-body archive-prose prose-style-2">
   - Style 3 (unindented + unspaced):
     <article class="panel story-body archive-prose prose-style-3">
   - Style 4 (indented + unspaced):
     <article class="panel story-body archive-prose prose-style-4">

   Optional atomic form:
     <article class="panel story-body archive-prose prose-mode-unindented prose-mode-spaced">

   Paragraph-level exception utilities:
   - prose-override-indent
   - prose-override-no-indent
   - prose-override-gap-before
   - prose-override-no-gap-before
   ------------------------------------------------------------------ */

.story-body.archive-prose {
  --archive-prose-indent: 1.5em;
  --archive-prose-gap: 1.15rem;
}

.story-body.archive-prose.prose-mode-indented,
.story-body.archive-prose.prose-style-1,
.story-body.archive-prose.prose-style-4 {
  --archive-prose-indent: 1.5em;
}

.story-body.archive-prose.prose-mode-unindented,
.story-body.archive-prose.prose-style-2,
.story-body.archive-prose.prose-style-3 {
  --archive-prose-indent: 0;
}

.story-body.archive-prose.prose-mode-spaced,
.story-body.archive-prose.prose-style-1,
.story-body.archive-prose.prose-style-2 {
  --archive-prose-gap: 1.15rem;
}

.story-body.archive-prose.prose-mode-unspaced,
.story-body.archive-prose.prose-style-3,
.story-body.archive-prose.prose-style-4 {
  --archive-prose-gap: 0;
}

.story-body.archive-prose > p:not(.story-block):not(.story-center):not(.verse):not(.binary-block):not(.centered-line):not(.center-block):not(.scene-gap) {
  margin: 0;
  text-indent: var(--archive-prose-indent);
}

.story-body.archive-prose > p:not(.story-block):not(.story-center):not(.verse):not(.binary-block):not(.centered-line):not(.center-block):not(.scene-gap) + p:not(.story-block):not(.story-center):not(.verse):not(.binary-block):not(.centered-line):not(.center-block):not(.scene-gap) {
  margin-top: var(--archive-prose-gap);
}

.story-body.archive-prose > p.prose-override-indent {
  text-indent: 1.5em;
}

.story-body.archive-prose > p.prose-override-no-indent {
  text-indent: 0;
}

.story-body.archive-prose > p.prose-override-gap-before {
  margin-top: 1.15rem;
}

.story-body.archive-prose > p.prose-override-no-gap-before {
  margin-top: 0;
}

/* ------------------------------------------------------------------
   Legacy compatibility appendix

   Keep these rules so existing converted pages continue to render the
   same way. Do NOT use these as the default approach for future
   conversions unless you are intentionally preserving a genuine older
   page pattern that requires them.

   Preferred for new prose pages: use `.story-body.archive-prose` with
   one of the `prose-style-*` classes above.
   ------------------------------------------------------------------ */

/* Legacy default story paragraph behavior
   Existing pages may rely on this raw `.story-body p` rule. Future
   conversions should prefer the prose-mode system above instead of
   relying on this default. */

.story-body p {
  margin: 0 0 1.15rem;
  text-indent: 1.5em;
}

/* Legacy-modern story standard
   Use this for modernized story pages that preserve original text structure
   while removing legacy Word-era markup. */

.legacy-modern-story {
  --story-indent: 37.4pt;
}

.legacy-modern-story .story-note,
.legacy-modern-story .story-attribution {
  margin: 0;
}

.legacy-modern-story .story-note p,
.legacy-modern-story .story-attribution p {
  margin: 0;
  text-indent: 0;
}

.legacy-modern-story .story-content > p {
  margin: 0;
  text-indent: var(--story-indent);
}

.legacy-modern-story .story-content > p.no-indent,
.legacy-modern-story .story-content > p.centered-line,
.legacy-modern-story .story-content > p.center-block {
  text-indent: 0;
}

.legacy-modern-story .story-content > p.centered-line,
.legacy-modern-story .story-content > p.center-block {
  text-align: center;
}

.legacy-modern-story .story-content > p.centered-line img,
.legacy-modern-story .story-content > p.center-block img {
  margin-inline: auto;
}

.legacy-modern-story .story-content > p.scene-gap,
.legacy-modern-story .story-content > div.scene-gap {
  height: 1.15rem;
  margin: 0;
  text-indent: 0;
}

.legacy-modern-story .story-content h2 {
  margin: 0.5rem 0 0.75rem;
  text-align: center;
  text-decoration: underline;
  font-weight: normal;
  text-indent: 0;
}

.legacy-modern-story hr {
  border: none;
  border-top: 1px solid var(--border);
  margin: 1.25rem 0;
}

.legacy-modern-story em {
  font-style: italic;
}

.legacy-modern-story strong {
  font-weight: 700;
}