/* Grimoire - Willowdale lore page styling.
   Reuses the global palette from gomud.css and layers on serif body type,
   wider measure, and ornamental flourishes for long-form reading. */

.lore-shell {
  max-width: 1220px;
  margin: 0 auto;
  padding: 32px 24px 64px;
  color: var(--text-primary-color);
  font-family: "JetBrains Mono", monospace;
  font-size: 1rem;
  line-height: 1.7;
}

/* The lore index uses a wide shell so chapters and library sit side by
   side. Prose blocks (chapter body, pagination, etc.) stay constrained to a
   comfortable reading measure. The page header card spans the full width
   so it acts as a banner above both grid columns; its inner prose is
   constrained separately, below. */
.lore-shell .lore-body,
.lore-shell .lore-page-footer,
.lore-shell .lore-pagination,
.lore-shell .lore-back,
.lore-shell .lore-rule {
  max-width: 820px;
  margin-left: auto;
  margin-right: auto;
}

/* Header card spans the full shell. Inside, content sits in a two-column
   layout: framing (eyebrow + title + subtitle) on the left, intro prose on
   the right, divided by a thin vertical rule. The visual gap between
   columns is created by per-column padding rather than grid `gap` so the
   divider (border-left on the right column) lands at the inner-center of
   the card, which lines up with the gap center of the chapters/library
   grid below. Using `gap` would push the border to the right edge of the
   gap and break that alignment. */
.lore-shell .lore-page-header-inner {
  display: grid;
  grid-template-columns: 1fr 1fr;
  align-items: center;
}

.lore-shell .lore-page-header-col-meta {
  padding-right: 36px;
}

.lore-shell .lore-page-header-col-intro {
  position: relative;
  padding-left: 36px;
}

/* Vertical divider with fading ends, mirroring the gradient HR rule used
   for markdown <hr> in .lore-body. Same color stops and opacity, rotated
   90 degrees and stretched to fill the column height. */
.lore-shell .lore-page-header-col-intro::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0;
  bottom: 0;
  width: 1px;
  background: linear-gradient(
    to bottom,
    transparent,
    var(--text-secondary-color) 30%,
    var(--text-secondary-color) 70%,
    transparent
  );
  opacity: 0.5;
}

.lore-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 28px;
  align-items: start;
  margin-top: 28px;
}

.lore-grid > .lore-section-card {
  margin-top: 0;
}

/* Atlas browse + read both use a 2/3 + 1/3 layout: main content on the
   left (intro essay on the index, area body on the reading page) with a
   sidebar of "The Lands of Caedhraeth" on the right that links to other
   areas. The main column overrides the 820px lore-body cap so it fills
   its grid column naturally. */
.atlas-grid {
  display: grid;
  grid-template-columns: 2fr 1fr;
  gap: 28px;
  align-items: start;
  margin-top: 28px;
}

.lore-shell .atlas-grid .lore-body {
  max-width: none;
  margin-left: 0;
  margin-right: 0;
}

.atlas-grid > .lore-section-card {
  margin-top: 0;
}

/* Sidebar entries are tighter than the front-page rows since they sit in
   a narrower column. */
.atlas-grid-aside .lore-row {
  padding: 14px 18px;
}

.atlas-grid-aside .lore-row-title {
  font-size: 0.95rem;
  letter-spacing: 0.06em;
}

.atlas-grid-aside .lore-row-summary {
  font-size: 0.95rem;
}

/* Current page's entry in the sidebar reads as "you are here". */
.atlas-grid-aside .lore-row-current,
.atlas-grid-aside .lore-row-current:hover {
  background-color: rgba(201, 168, 96, 0.1);
  cursor: default;
}

.atlas-grid-aside .lore-row-current .lore-row-title {
  color: var(--text-secondary-color);
}

/* The area page renders its eyebrow/title/summary inside the body card
   (rather than as a separate full-width header above the grid) so the
   title only spans the actual reading column. Bottom divider matches the
   lore-body horizontal rule treatment. */
.atlas-area-header {
  padding-bottom: 20px;
  margin-bottom: 24px;
  border-bottom: 1px solid rgba(201, 168, 96, 0.18);
}

/* Pagination at the top of the body card no longer needs the negative
   pull-up used in chapter pages, because the area header now sits above
   it inside the card. */
.atlas-grid-main .lore-pagination-top {
  margin-top: 0;
  margin-bottom: 24px;
}

.lore-shell .lore-page-header {
  background-color: rgba(0, 0, 0, 0.82);
  border: 1px solid rgba(201, 168, 96, 0.18);
  border-radius: 10px;
  padding: 28px 36px 30px;
  margin-bottom: 28px;
}

.lore-shell .lore-eyebrow {
  text-transform: uppercase;
  letter-spacing: 0.18em;
  font-size: 0.95rem;
  color: var(--text-secondary-color);
  margin-bottom: 8px;
}

.lore-shell h1.lore-page-title {
  font-family: "Amarante", cursive;
  font-size: 2rem;
  font-weight: 400;
  color: var(--text-primary-color);
  margin: 0 0 6px 0;
  line-height: 1.15;
}

.lore-shell .lore-page-subtitle {
  font-style: italic;
  color: var(--text-secondary-color);
  font-size: 1rem;
  margin: 0;
}

.lore-shell .lore-intro-text {
  margin: 0;
  font-style: italic;
  color: var(--text-primary-color);
  font-size: 1rem;
  line-height: 1.6;
}

.lore-shell .lore-rule {
  border: none;
  height: 1px;
  background: linear-gradient(
    to right,
    transparent,
    var(--text-secondary-color) 30%,
    var(--text-secondary-color) 70%,
    transparent
  );
  opacity: 0.5;
  margin: 36px 0;
}

/* Lore index - table of contents */

.lore-intro {
  text-align: center;
  margin: 0 auto 40px;
  max-width: 640px;
}

.lore-intro p {
  font-style: italic;
  color: var(--text-primary-color);
  opacity: 0.9;
}

.lore-toc {
  display: flex;
  flex-direction: column;
  gap: 18px;
}

.lore-card {
  display: block;
  padding: 22px 26px;
  background-color: rgba(0, 0, 0, 0.78);
  border: 1px solid rgba(201, 168, 96, 0.25);
  border-radius: 8px;
  text-decoration: none;
  color: inherit;
  transition: border-color 0.2s ease, transform 0.2s ease,
    background-color 0.2s ease;
}

.lore-card:hover {
  border-color: var(--text-secondary-color);
  background-color: rgba(0, 0, 0, 0.88);
  transform: translateY(-1px);
}

.lore-card-eyebrow {
  display: block;
  text-transform: uppercase;
  letter-spacing: 0.18em;
  font-size: 0.95rem;
  color: var(--text-secondary-color);
  margin-bottom: 4px;
}

.lore-card-title {
  font-size: 1rem;
  font-weight: 700;
  color: var(--text-primary-color);
  margin: 0 0 8px 0;
  line-height: 1.3;
}

.lore-card-summary {
  margin: 0;
  font-size: 1rem;
  color: var(--text-primary-color);
  line-height: 1.55;
}

/* Chapter body - rendered markdown */

.lore-body {
  background-color: rgba(0, 0, 0, 0.82);
  border: 1px solid rgba(201, 168, 96, 0.18);
  border-radius: 10px;
  padding: 40px 48px;
}

.lore-body h1,
.lore-body h2,
.lore-body h3,
.lore-body h4 {
  color: var(--text-primary-color);
  line-height: 1.3;
}

.lore-body h1 {
  font-size: 1.35rem;
  font-weight: 700;
  margin: 0.4em 0 0.4em;
  color: var(--text-secondary-color);
  text-align: center;
  letter-spacing: 0.04em;
}

.lore-body h1:first-child {
  margin-top: 0;
}

.lore-body h2 {
  font-size: 1rem;
  font-weight: 600;
  margin: 1.6em 0 0.4em;
  text-align: center;
  font-style: italic;
}

.lore-body h3 {
  font-size: 1rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  margin: 2em 0 0.6em;
  color: var(--text-secondary-color);
  border-bottom: 1px solid rgba(201, 168, 96, 0.25);
  padding-bottom: 0.35em;
}

.lore-body h4 {
  font-size: 1rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  margin: 1.6em 0 0.4em;
  color: var(--text-secondary-color);
}

.lore-body p {
  margin: 0 0 1.1em;
}

.lore-body hr {
  border: none;
  height: 1px;
  width: 75%;
  margin: 2.4em auto;
  background: linear-gradient(
    to right,
    transparent,
    var(--text-secondary-color) 30%,
    var(--text-secondary-color) 70%,
    transparent
  );
  opacity: 0.5;
}

.lore-body blockquote {
  margin: 1.4em 0;
  padding: 0.6em 1.4em;
  border-left: 3px solid var(--text-secondary-color);
  font-style: italic;
  color: var(--text-primary-color);
  opacity: 0.92;
}

.lore-body em {
  color: var(--text-primary-color);
}

.lore-body strong {
  color: var(--text-secondary-color);
}

.lore-body a {
  color: var(--text-secondary-color);
  text-decoration: underline;
  text-decoration-color: rgba(201, 168, 96, 0.4);
}

.lore-body a:hover {
  text-decoration-color: var(--text-secondary-color);
}

.lore-body ul,
.lore-body ol {
  margin: 0 0 1.1em 1.4em;
  padding: 0;
}

.lore-body li {
  margin-bottom: 0.4em;
}

.lore-body code {
  font-family: "JetBrains Mono", monospace;
  font-size: 0.9em;
  padding: 1px 6px;
  background-color: rgba(201, 168, 96, 0.12);
  border-radius: 3px;
}

/* Chapter footer - prev/next navigation */

.lore-pagination {
  display: flex;
  justify-content: space-between;
  gap: 16px;
  margin-top: 32px;
}

.lore-pagination a {
  flex: 1 1 0;
  padding: 4px 4px;
  text-decoration: none;
  color: inherit;
  transition: opacity 0.2s ease;
}

.lore-pagination a:hover {
  opacity: 0.85;
}

.lore-pagination a:hover .lore-pagination-title {
  color: var(--text-secondary-color);
}

.lore-pagination .lore-pagination-prev {
  text-align: left;
}

.lore-pagination .lore-pagination-next {
  text-align: right;
}

.lore-pagination-label {
  text-transform: uppercase;
  letter-spacing: 0.18em;
  font-size: 0.95rem;
  color: var(--text-secondary-color);
  margin-right: 6px;
}

.lore-pagination-title {
  font-size: 1rem;
  font-weight: 700;
  color: var(--text-primary-color);
}

.lore-back {
  display: inline-block;
  margin-top: 24px;
  padding: 8px 14px;
  background-color: rgba(0, 0, 0, 0.78);
  border: 1px solid rgba(201, 168, 96, 0.25);
  border-radius: 6px;
  color: var(--text-secondary-color);
  text-decoration: none;
  font-family: "JetBrains Mono", monospace;
  font-size: 1rem;
  letter-spacing: 0.1em;
  transition: border-color 0.2s ease, color 0.2s ease;
}

.lore-back:hover {
  border-color: var(--text-secondary-color);
  color: var(--text-primary-color);
}

@media (max-width: 768px) {
  .lore-shell {
    padding: 24px 14px 48px;
  }

  .lore-body {
    padding: 24px 20px;
  }

  .lore-shell h1.lore-page-title {
    font-size: 2rem;
  }

  .lore-pagination {
    flex-direction: column;
  }

  .lore-grid,
  .atlas-grid {
    grid-template-columns: 1fr;
    gap: 20px;
  }

  .lore-shell .lore-page-header-inner {
    grid-template-columns: 1fr;
    gap: 18px;
  }

  .lore-shell .lore-page-header-col-meta {
    padding-right: 0;
  }

  .lore-shell .lore-page-header-col-intro {
    border-top: 1px solid rgba(201, 168, 96, 0.22);
    padding-left: 0;
    padding-top: 18px;
  }

  .lore-shell .lore-page-header-col-intro::before {
    display: none;
  }
}

/* Lore index sections - each section is one large card containing the
   section header and its items as rows. This unifies the visual block,
   keeps the section headers legible against the busy background, and
   removes the per-card-on-card clutter. */

.lore-section-card {
  background-color: rgba(0, 0, 0, 0.82);
  border: 1px solid rgba(201, 168, 96, 0.25);
  border-radius: 10px;
  margin-top: 28px;
  overflow: hidden;
}

.lore-section-header {
  padding: 22px 28px 18px;
  background-color: rgba(0, 0, 0, 0.45);
  border-bottom: 1px solid rgba(201, 168, 96, 0.22);
}

.lore-section-title {
  font-size: 1.35rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--text-secondary-color);
  margin: 0 0 4px 0;
  line-height: 1.2;
}

.lore-section-subtitle {
  font-style: italic;
  color: var(--text-primary-color);
  opacity: 0.85;
  margin: 0;
  font-size: 1rem;
  line-height: 1.5;
}

.lore-section-rows {
  display: flex;
  flex-direction: column;
}

.lore-row {
  display: block;
  padding: 18px 28px;
  text-decoration: none;
  color: var(--text-primary-color);
  border-bottom: 1px solid rgba(201, 168, 96, 0.15);
  transition: background-color 0.2s ease;
}

.lore-row:last-child {
  border-bottom: none;
}

.lore-row:hover {
  background-color: rgba(0, 0, 0, 0.4);
  color: var(--text-primary-color);
}

/* Row title is the prominent, gold uppercase line at the top of each
   index card. The series/subtitle line below the summary uses the
   .lore-row-eyebrow class (italic gold) - intentionally swapped from
   the previous layout so the chapter's own title leads, with the series
   it belongs to as a footer attribution. */
.lore-row-title {
  display: block;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  font-size: 1rem;
  font-weight: 700;
  color: var(--text-secondary-color);
  margin: 0 0 8px 0;
  line-height: 1.3;
}

.lore-row-eyebrow {
  display: block;
  font-style: italic;
  font-size: 0.95rem;
  color: var(--text-secondary-color);
  margin: 8px 0 0 0;
  text-align: right;
}

.lore-row-summary {
  margin: 0;
  font-size: 1rem;
  color: var(--text-primary-color);
  line-height: 1.55;
}

/* Sub-heading inside a section card - used to divide the Library card into
   "Public Shelf" and "Your Library" without spawning two separate cards. */
.lore-shelf-heading {
  text-transform: uppercase;
  letter-spacing: 0.18em;
  font-size: 0.95rem;
  color: var(--text-secondary-color);
  padding: 16px 28px 6px;
  border-top: 1px solid rgba(201, 168, 96, 0.15);
}

.lore-section-rows + .lore-shelf-heading,
.lore-section-empty + .lore-shelf-heading,
.lore-shelf-empty + .lore-shelf-heading,
.lore-book-grid + .lore-shelf-heading {
  margin-top: 4px;
}

.lore-section-header + .lore-shelf-heading {
  border-top: none;
  padding-top: 18px;
}

.lore-section-card > .lore-shelf-heading:first-child {
  border-top: none;
  padding-top: 22px;
}

.lore-shelf-subtitle {
  padding: 0 28px 14px;
  margin: 0;
  font-style: italic;
  color: var(--text-primary-color);
  opacity: 0.85;
  font-size: 1rem;
  line-height: 1.5;
}

.lore-shelf-empty {
  padding: 18px 28px;
  font-style: italic;
  color: var(--text-primary-color);
  font-size: 1rem;
  line-height: 1.55;
}

/* Book grid - clickable cards laid out three across inside a shelf section. */
.lore-book-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 14px;
  padding: 14px 28px 22px;
}

.lore-book-card {
  display: block;
  padding: 16px 16px 18px;
  background-color: rgba(0, 0, 0, 0.45);
  border: 1px solid rgba(201, 168, 96, 0.2);
  border-radius: 8px;
  text-decoration: none;
  color: var(--text-primary-color);
  transition: border-color 0.2s ease, background-color 0.2s ease, transform 0.2s ease;
}

.lore-book-card:hover {
  border-color: rgba(201, 168, 96, 0.5);
  background-color: rgba(0, 0, 0, 0.65);
  color: var(--text-primary-color);
  transform: translateY(-1px);
}

.lore-book-card-eyebrow {
  display: block;
  text-transform: uppercase;
  letter-spacing: 0.16em;
  font-size: 0.78rem;
  color: var(--text-secondary-color);
  margin-bottom: 6px;
}

.lore-book-card-title {
  font-weight: 700;
  font-size: 1rem;
  margin-bottom: 4px;
  line-height: 1.3;
  color: var(--text-primary-color);
}

.lore-book-card-author {
  font-style: italic;
  color: var(--text-secondary-color);
  font-size: 0.9rem;
  margin-bottom: 8px;
}

.lore-book-card-summary {
  margin: 0;
  font-size: 0.92rem;
  line-height: 1.5;
  color: var(--text-primary-color);
}

.lore-section-footer-link {
  display: block;
  padding: 14px 28px;
  border-top: 1px solid rgba(201, 168, 96, 0.15);
  color: var(--text-secondary-color);
  text-decoration: none;
  font-size: 0.75rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  transition: background-color 0.2s ease;
}

.lore-section-footer-link:hover {
  background-color: rgba(0, 0, 0, 0.4);
  color: var(--text-secondary-color);
}

.lore-book-locked {
  background-color: rgba(0, 0, 0, 0.82);
  border: 1px solid rgba(201, 168, 96, 0.25);
  border-radius: 10px;
  padding: 36px 40px;
  text-align: center;
  color: var(--text-primary-color);
  font-style: italic;
  line-height: 1.7;
  margin-bottom: 18px;
}

.lore-book-locked p {
  margin: 0 0 0.8em;
}

.lore-book-locked p:last-child {
  margin-bottom: 0;
}

.lore-section-empty {
  padding: 22px 28px;
  font-style: italic;
  color: var(--text-primary-color);
  opacity: 0.85;
  line-height: 1.55;
}

/* Top variant of the back-to-index link. The bottom one already has its
   panel-style; the top sits above the page header and uses the same look. */

.lore-back-top {
  margin-top: 0;
  margin-bottom: 18px;
}

/* Top pagination sits flush against the body card's top padding; we pull
   it tight against the card edge so the next/prev tiles feel like a header
   strip rather than a floating block. */
.lore-pagination-top {
  margin-top: -28px;
  margin-bottom: 0;
}

/* Cancel the body-content top margin on the first heading or paragraph
   that follows the top pagination so the chapter starts right under the
   nav rather than after a 2em gap. */
.lore-pagination-top + h1,
.lore-pagination-top + h2,
.lore-pagination-top + h3,
.lore-pagination-top + h4,
.lore-pagination-top + p {
  margin-top: 0;
}

.lore-body > .lore-pagination:not(.lore-pagination-top) {
  margin-top: 24px;
}

/* Book reader - paginated readable items rendered from item JSON content */

.book-body .book-page p {
  margin: 0 0 1.1em;
}

.book-body .book-page p:last-child {
  margin-bottom: 0;
}

.book-page-break {
  border: none;
  text-align: center;
  margin: 2.4em 0 2.2em;
  height: 1em;
  position: relative;
}

.book-page-break::after {
  content: "\2042"; /* asterism-like flourish */
  color: var(--text-secondary-color);
  font-size: 1.35rem;
  letter-spacing: 0.6em;
  opacity: 0.6;
}