/* Story page enhancements (story-extra.js). Everything here is additive and only active once the script adds html.sx. */
.sx-progress { position: fixed; inset: 0 0 auto 0; height: 4px; z-index: 1200; background: transparent; pointer-events: none; }
.sx-progress i { display: block; height: 100%; background: linear-gradient(90deg, var(--qwt-surface-hover, #1C6055), var(--qwt-surface-hover, #C98B2B)); transform-origin: 0 50%; transform: scaleX(0); }

.sx-rail { position: fixed; right: 18px; top: 50%; transform: translateY(-50%); z-index: 900; display: none; flex-direction: column; gap: 12px; }
@media (min-width: 1180px) { .sx-rail { display: flex; } }
.sx-dot { width: 12px; height: 12px; border-radius: 50%; border: 2px solid var(--qwt-border, #1C6055); background: transparent; transition: transform .25s ease, background .25s ease; }
.sx-dot:hover { transform: scale(1.35); }
.sx-dot.on { background: var(--qwt-surface-hover, #1C6055); transform: scale(1.3); }

html.sx .sx-chapter { position: relative; opacity: 0; transform: translate3d(0, 34px, 0); transition: opacity .7s ease, transform .7s cubic-bezier(.22, 1, .36, 1); }
html.sx .sx-chapter.sx-in { opacity: 1; transform: none; }
html.sx .sx-rise { opacity: 0; transform: translate3d(0, 24px, 0); transition: opacity .6s ease var(--d, 0ms), transform .6s cubic-bezier(.22, 1, .36, 1) var(--d, 0ms); }
html.sx .sx-rise.sx-in { opacity: 1; transform: none; }
.sx-chapter::before {
  content: attr(data-n); position: absolute; right: -.5rem; top: -2.6rem; z-index: 0; pointer-events: none; font: 800 clamp(7rem, 20vw, 13rem)/1 Georgia, "Times New Roman", serif;
  color: transparent; -webkit-text-stroke: 2px var(--qwt-surface-hover, rgba(28, 96, 85, .16)); letter-spacing: -.04em;
}
.sx-chapter > * { position: relative; z-index: 1; }
.sx-chapter .eyebrow { display: inline-flex; align-items: center; gap: 10px; }
.sx-chapter .eyebrow::before { content: ""; width: 34px; height: 2px; background: var(--qwt-surface-hover, #C98B2B); display: inline-block; }

.story-pull { position: relative; margin: 1.6rem 0; padding: 1.1rem 1.3rem 1.1rem 1.6rem; border-left: 5px solid var(--qwt-border, #1C6055); border-radius: 0 16px 16px 0; background: var(--qwt-surface-hover, #E0ECE9); font-size: clamp(1.15rem, 2.4vw, 1.5rem); line-height: 1.4; font-weight: 700; color: var(--qwt-text, #144D44); }
.story-pull::before { content: "\201C"; position: absolute; left: .45rem; top: -.55rem; font: 800 3.4rem/1 Georgia, serif; color: var(--qwt-text, #1C6055); opacity: .35; }

.sx-facts { list-style: none; display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 12px; margin: 1.8rem 0 0; padding: 0; max-width: 700px; }
.sx-facts li { display: grid; gap: 2px; padding: 14px 16px; border: 1px solid var(--qwt-border, #E5DED5); border-radius: 16px; background: var(--qwt-bg, #fff); }
.sx-facts b { white-space: nowrap; font: 800 1.3rem/1.1 Georgia, serif; color: var(--qwt-text, #1C6055); font-variant-numeric: tabular-nums; }
.sx-facts span { font-size: .78rem; color: var(--qwt-text-muted, #78716C); }

/* the timeline draws itself */
.story-timeline ol { position: relative; }
.story-timeline ol::before { content: ""; position: absolute; left: 8.3rem; top: 1rem; bottom: 1rem; width: 3px; border-radius: 3px; background: var(--qwt-surface-hover, #E5DED5); }
.sx-line { position: absolute; left: 8.3rem; top: 1rem; bottom: 1rem; width: 3px; border-radius: 3px; background: linear-gradient(var(--qwt-surface-hover, #1C6055), var(--qwt-surface-hover, #C98B2B)); transform-origin: 50% 0; transform: scaleY(0); }
.story-timeline li b { position: relative; z-index: 1; }

.history-shot { transform: perspective(900px) rotateX(var(--rx, 0deg)) rotateY(var(--ry, 0deg)); transition: transform .18s ease-out, box-shadow .2s ease; will-change: transform; }
.history-shot:hover { box-shadow: 0 22px 44px -22px rgba(41, 37, 36, .55); }

/* the midnight letter */
.story-letter { position: relative; overflow: hidden; padding: clamp(28px, 6vw, 64px) !important; border-radius: 28px; background: radial-gradient(120% 90% at 80% 0%, var(--qwt-surface-hover, #2a2522), var(--qwt-surface, #141211) 70%); color: var(--qwt-text, #F2EBE1); }
.story-letter h2, .story-letter p { color: inherit !important; }
.story-letter .eyebrow { color: var(--qwt-text-muted, #C98B2B) !important; }
.story-letter::before { -webkit-text-stroke-color: var(--qwt-surface-hover, rgba(242, 235, 225, .1)) !important; content: "\263E"; }
.sx-sky { position: absolute; inset: 0; z-index: 0; pointer-events: none; }
.sx-sky i { position: absolute; width: 3px; height: 3px; border-radius: 50%; background: var(--qwt-surface-hover, #F2EBE1); opacity: .2; animation: sx-twinkle var(--t, 3s) ease-in-out infinite; }
@keyframes sx-twinkle { 50% { opacity: .85; transform: scale(1.6); } }
.sx-cta { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 1.6rem; }

@media (prefers-reduced-motion: reduce) {
  html.sx .sx-chapter, html.sx .sx-rise { opacity: 1; transform: none; transition: none; }
  .sx-sky i { animation: none; }
}
@media (max-width: 700px) { .sx-chapter::before { font-size: 6rem; top: -1.4rem; } .story-timeline ol::before, .sx-line { left: 1.2rem; } }