/* 五则传说共用的连续故事阅读版式。 */
.legend-page { background: var(--color-bg); }
.legend-page.has-legend-navigation { padding-top: 44px; --legend-nav-height: calc(var(--navbar-height) + 44px); }
.legend-page .page-hero { background: var(--color-surface-deep); }
.legend-story { padding-block: 32px 64px; }
.legend-story__meta { display: flex; justify-content: space-between; align-items: baseline; gap: 16px; padding-bottom: 24px; margin-bottom: 40px; border-bottom: 1px solid var(--color-border); color: var(--color-text-secondary); font: 400 14px/1.7 var(--font-body); }
.legend-story__meta a { display: inline-flex; align-items: center; gap: 12px; min-height: 44px; color: var(--color-surface-deep); white-space: nowrap; text-underline-offset: 5px; }
.legend-story__layout { display: grid; grid-template-columns: minmax(0, 1fr) minmax(310px, .58fr); gap: clamp(40px, 6vw, 96px); align-items: start; }
.legend-story__narrative { min-width: 0; }
.legend-story__narrative p { margin: 0 0 24px; color: var(--color-text); font: 400 18px/2 var(--font-body); text-indent: 2em; overflow-wrap: break-word; }
.legend-story__narrative .legend-story__opening { margin-bottom: 40px; }
.legend-scene + .legend-scene { margin-top: 48px; }
.legend-scene h2 { margin: 0 0 20px; color: var(--color-text); font: 600 20px/1.6 var(--font-body); }
.legend-story__photo { max-width: min(100%, 430px); margin: 32px auto 0; }
.legend-story__photo img { max-height: 380px; }
.legend-place { position: sticky; top: calc(var(--legend-nav-height, var(--navbar-height)) + 32px); border-top: 2px solid var(--color-accent); padding-top: 20px; }
.legend-place__eyebrow { color: var(--color-text-secondary); font: 400 13px/1.6 var(--font-body); letter-spacing: .12em; }
.legend-place h2 { margin: 8px 0 24px; font: 600 24px/1.5 var(--font-heading); color: var(--color-surface-deep); }
.legend-place__map { margin: 0; }
.legend-place__map a { display: block; cursor: zoom-in; border: 1px solid var(--color-border); border-radius: var(--border-radius-lg); }
.legend-place__map img { display: block; width: 100%; height: auto; border-radius: inherit; }
.legend-place__map a[hidden], .legend-place__error[hidden] { display: none; }
.legend-place__error { padding: 24px; border: 1px solid var(--color-border); color: var(--color-text-secondary); font-size: 14px; }
.legend-place__map figcaption { margin-top: 12px; color: var(--color-text-secondary); font: 400 13px/1.65 var(--font-body); }
.legend-place > p { margin: 20px 0 0; color: var(--color-text-secondary); font: 400 15px/1.9 var(--font-body); }
.legend-story__end { display: flex; align-items: center; justify-content: space-between; gap: 24px; margin-top: 56px; padding-top: 24px; border-top: 1px solid var(--color-border); }
.legend-story__end a { display: flex; min-height: 44px; justify-content: center; flex-direction: column; color: var(--color-surface-deep); font: 400 16px/1.8 var(--font-body); text-underline-offset: 5px; }
.legend-story__end a:last-child { text-align: right; }
.legend-story__end span { color: var(--color-text-secondary); font-size: 12px; }
.legend-page a:hover { text-decoration: underline; }
.legend-page a:focus-visible { outline: 3px solid var(--color-accent); outline-offset: 4px; }
.legend-page a:active { opacity: .75; }
.legend-page [id] { scroll-margin-top: calc(var(--legend-nav-height, var(--navbar-height)) + 24px); }
@media (max-width: 1000px) {
  .legend-story__layout { grid-template-columns: minmax(0, 1fr); gap: 40px; }
  .legend-place { position: static; display: grid; grid-template-columns: 1fr 1fr; column-gap: 32px; }
  .legend-place__eyebrow, .legend-place h2 { grid-column: 1 / -1; }
  .legend-place > p { margin-top: 0; }
}
@media (max-width: 600px) {
  .legend-story { padding-block: 20px 48px; }
  .legend-story__meta { margin-bottom: 28px; padding-bottom: 16px; font-size: 12px; gap: 8px; }
  .legend-story__narrative p { font-size: 16px; line-height: 1.95; margin-bottom: 20px; }
  .legend-story__narrative .legend-story__opening { margin-bottom: 32px; }
  .legend-scene + .legend-scene { margin-top: 32px; }
  .legend-scene h2 { font-size: 18px; margin-bottom: 16px; }
  .legend-place { display: block; }
  .legend-place h2 { font-size: 22px; margin-bottom: 20px; }
  .legend-place > p { margin-top: 20px; }
  .legend-story__end { align-items: flex-start; flex-direction: column; gap: 16px; margin-top: 40px; }
  .legend-story__end a:last-child { text-align: left; }
}
@media (prefers-reduced-motion: reduce) { .legend-page { scroll-behavior: auto; } }