/* Stage 8 — sourced cultural stories, balanced comparison cards, readable source links */
.culture-section { position: relative; }
.section-intro { max-width: 58rem !important; margin-bottom: clamp(1.5rem, 3vw, 2.5rem) !important; font-size: clamp(1rem, 1.25vw, 1.12rem); line-height: 1.8; }
.story-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: clamp(1rem, 2vw, 1.5rem); margin-top: 1.8rem; }
.story-card { position: relative; min-width: 0; padding: clamp(1.2rem, 2.2vw, 2rem); border: 1px solid rgb(143 224 255 / 26%); border-radius: 1.25rem; background: linear-gradient(145deg, rgb(44 108 151 / 31%), rgb(5 27 51 / 75%)); box-shadow: inset 0 1px 0 rgb(255 255 255 / 9%), 0 18px 38px rgb(0 8 25 / 15%); -webkit-backdrop-filter: blur(16px) saturate(130%); backdrop-filter: blur(16px) saturate(130%); }
.story-card__index { margin-bottom: 1rem; color: #91e3ff; font-size: .7rem; font-weight: 800; letter-spacing: .16em; }
.story-card__index span { color: #d7eefa; }
.story-card h3 { margin: 0; color: #f4fbff; font-size: clamp(1.25rem, 2.2vw, 1.75rem); line-height: 1.2; text-wrap: balance; }
.story-card__lead { margin: .35rem 0 .8rem; color: #b8eaff; font-weight: 650; }
.story-card p:not(.story-card__lead) { color: #d3e5f0; line-height: 1.8; }
.source-link { display: inline-flex; align-items: center; gap: .5rem; margin-top: .5rem; color: #a8eaff; font-weight: 700; text-decoration-thickness: 1px; text-underline-offset: .24em; }
.source-link > span[aria-hidden="true"] { transition: transform 180ms ease; }
.source-link:hover > span[aria-hidden="true"] { transform: translate(2px, -2px); }
.source-link:focus-visible { outline: 3px solid #d8f7ff; outline-offset: 4px; border-radius: .2rem; }
.editorial-note { margin-top: 1.5rem; padding: 1rem 1.2rem; border-left: 2px solid #72dfff; color: #c1d9e7; background: rgb(30 91 126 / 20%); font-size: .9rem; }
.footer-sources { flex-basis: 100%; margin-top: .4rem !important; font-size: .78rem; }
.footer-sources a { color: #a8eaff; text-underline-offset: .2em; }
@media (max-width: 700px) {
  .story-grid { grid-template-columns: minmax(0, 1fr); }
  .story-card { padding: 1.15rem; }
  .story-card p:not(.story-card__lead) { font-size: .96rem; }
}
@media (prefers-reduced-motion: reduce) {
  .source-link > span[aria-hidden="true"] { transition: none; }
}