/* =========================================================
   Scroll timeline (/thebeginning): a path that fills with gold as you read,
   chapters alternate sides and light up when reached.
   ========================================================= */
.story { list-style: none; margin: 0; padding: 20px 0 40px; position: relative; }
.st-line { position: absolute; top: 0; bottom: 0; left: 50%; width: 6px; margin-left: -3px; border-radius: 6px; background: rgba(76, 42, 144, 0.14); overflow: hidden; }
.st-fill { position: absolute; top: 0; left: 0; right: 0; height: 100%; border-radius: inherit; transform: scaleY(var(--p, 0)); transform-origin: top;
  background: linear-gradient(180deg, #4c2a90, #2569c5 45%, #ffd700); box-shadow: 0 0 18px rgba(255, 215, 0, 0.7); }

.st-item { position: relative; display: grid; grid-template-columns: 1fr 90px 1fr; align-items: start; margin-bottom: 46px; }
.st-card {
  grid-column: 1; position: relative; padding: 26px 28px; border-radius: 28px;
  background: rgba(255, 255, 255, 0.92); border: 1px solid rgba(184, 134, 11, 0.22);
  box-shadow: 0 20px 44px -22px rgba(46, 16, 101, 0.35);
  transition: transform 0.5s var(--ease-out), box-shadow 0.5s;
}
.st-left .st-card { grid-column: 3; }
/* the empty side of the path holds the chapter's artifact, loose and tilted */
.st-side { grid-row: 1; align-self: center; padding: 10px 24px; display: grid; gap: 18px; justify-items: center; }
.st-right .st-side { grid-column: 3; }
.st-left .st-side { grid-column: 1; }
.st-side .st-photo { max-width: 360px; rotate: 3deg; transform: none; box-shadow: 0 26px 50px -24px rgba(46, 16, 101, 0.6); }
.st-left .st-side .st-photo { rotate: -3deg; }
.st-side .st-photo:hover { rotate: 0deg; }
.st-side .st-fig { margin: 0; max-width: 360px; }
.st-side .st-fig figcaption { font-size: 1.1rem; }
.st-card::after { /* little arrow toward the path */
  content: ""; position: absolute; top: 30px; width: 18px; height: 18px; background: inherit; border: inherit; border-width: 0 0 1px 1px;
  inset-inline-end: -10px; transform: rotate(-135deg);
}
.st-left .st-card::after { inset-inline-end: auto; inset-inline-start: -10px; transform: rotate(45deg); }
.st-item.lit .st-card { box-shadow: 0 26px 50px -22px rgba(46, 16, 101, 0.45), 0 0 0 2px rgba(255, 215, 0, 0.45); }
.st-dot {
  grid-column: 2; grid-row: 1; justify-self: center; margin-top: 18px; z-index: 1;
  width: 54px; height: 54px; border-radius: 50%; display: grid; place-items: center; font-size: 1.5rem;
  background: #fff; border: 3px solid rgba(76, 42, 144, 0.25); box-shadow: 0 6px 16px rgba(46, 16, 101, 0.2);
  transition: transform 0.6s var(--ease-spring), background 0.4s, border-color 0.4s, box-shadow 0.4s;
}
.st-item.lit .st-dot { background: radial-gradient(circle at 35% 30%, #fff6c2, #ffd700 55%, #d99a1e); border-color: #fff; transform: scale(1.15); box-shadow: 0 0 0 7px rgba(255, 215, 0, 0.2), 0 0 26px rgba(255, 200, 0, 0.7); }
.st-date { font-family: var(--font-hand); font-weight: 700; font-size: 1.3rem; color: #2569c5; line-height: 1.1; margin-bottom: 4px; }
.st-card h3 { font-size: clamp(1.5rem, 2.6vw, 2rem); margin-bottom: 10px; }
.st-card .prose { font-size: 1.05rem; }
.st-big .st-card { padding: 34px 36px; background: linear-gradient(160deg, #fffdf4, #fff); border: 2px solid rgba(255, 215, 0, 0.55); }
.st-big .st-dot { width: 70px; height: 70px; font-size: 2rem; }
.st-photo { display: block; width: 100%; margin-top: 14px; padding: 0; border: 0; border-radius: 18px; overflow: hidden; cursor: zoom-in; background: #eee; transform: rotate(-1deg); transition: transform 0.5s var(--ease-spring); }
.st-photo:hover { transform: rotate(0) scale(1.02); }
.st-photo img { width: 100%; height: auto; }
.st-pics { justify-content: flex-start; margin-top: 14px; }
.st-pics .polaroid { width: 128px; margin-inline-end: -26px; }
.st-pics .polaroid:nth-child(1) { --r: -8deg; } .st-pics .polaroid:nth-child(2) { --r: -4deg; } .st-pics .polaroid:nth-child(3) { --r: 0deg; } .st-pics .polaroid:nth-child(4) { --r: 4deg; } .st-pics .polaroid:nth-child(5) { --r: 8deg; } .st-pics .polaroid:nth-child(6) { --r: 12deg; }
.st-pics .polaroid:hover { z-index: 3; }
.st-big .st-photo img { max-height: 520px; object-fit: cover; }
.st-quote { margin: 4px 0 0; padding: 0; font-size: 1.05rem; color: #2e1065; }
.st-quote footer { display: flex; align-items: center; gap: 12px; margin-top: 12px; font-weight: 700; color: #4c2a90; }
.st-av { width: 56px; height: 56px; border-radius: 50%; object-fit: cover; box-shadow: 0 0 0 3px #ffd700; flex: none; }
.st-mem { display: flex; gap: 14px; margin-top: 18px; padding: 16px; border-radius: 18px; background: rgba(76, 42, 144, 0.06); }
.st-mem strong { display: block; color: #2e1065; }
.st-mem small { display: block; color: #2569c5; font-family: var(--font-hand); margin-bottom: 6px; }
.st-mem p { margin: 0 0 6px; font-size: 0.98rem; }
.st-year { position: relative; z-index: 1; display: grid; place-items: center; margin: 10px 0 46px; }
.st-year span {
  font-family: var(--font-hand); font-weight: 700; font-size: clamp(1.8rem, 4vw, 2.6rem); color: #fff; padding: 6px 30px; border-radius: 999px;
  background: linear-gradient(90deg, #4c2a90, #2569c5); box-shadow: 0 12px 26px -10px rgba(46, 16, 101, 0.6);
}
/* villain mode: the storybook read by candlelight */
body.villain .st-card { background: rgba(6, 14, 8, 0.85); border-color: rgb(var(--v-rgb) / 0.25); box-shadow: 0 20px 44px -22px rgba(0, 0, 0, 0.7); }
body.villain .st-big .st-card { background: linear-gradient(160deg, rgba(16, 36, 14, 0.9), rgba(28, 10, 46, 0.9)); border-color: rgb(var(--v-rgb) / 0.5); }
body.villain .st-item.lit .st-card { box-shadow: 0 26px 50px -22px rgba(0, 0, 0, 0.7), 0 0 0 2px rgb(var(--v-rgb) / 0.45); }
body.villain .st-quote, body.villain .st-mem strong, body.villain .st-quote footer { color: #eef7ea; }
body.villain .st-mem { background: rgb(var(--v-rgb) / 0.06); }
body.villain .st-mem small, body.villain .st-date { color: var(--v-warm); }
body.villain .st-line { background: rgb(var(--v-rgb) / 0.12); }
body.villain .st-fill { background: linear-gradient(180deg, #4c1d95, var(--v2) 45%, var(--villain)); box-shadow: 0 0 18px rgb(var(--v-rgb) / 0.7); }
body.villain .st-dot { background: #0d0520; border-color: rgb(var(--v-rgb) / 0.35); box-shadow: 0 6px 16px rgba(0, 0, 0, 0.5); }
body.villain .st-item.lit .st-dot { background: radial-gradient(circle at 35% 30%, var(--v-light), var(--villain) 55%, #15803d); border-color: var(--v-light); box-shadow: 0 0 0 7px rgb(var(--v-rgb) / 0.2), 0 0 26px rgb(var(--v-rgb) / 0.7); }
body.villain .st-av { box-shadow: 0 0 0 3px var(--villain); }
body.villain .st-year span { background: linear-gradient(90deg, #4c1d95, #0a2a0a); box-shadow: 0 12px 26px -10px rgba(0, 0, 0, 0.8), 0 0 0 1px rgb(var(--v-rgb) / 0.35); }

@media (max-width: 860px) {
  .st-line { left: auto; right: 26px; margin: 0; }
  .st-item { grid-template-columns: 58px 1fr; }
  .st-dot { grid-column: 1; width: 46px; height: 46px; font-size: 1.25rem; }
  .st-big .st-dot { width: 54px; height: 54px; }
  .st-card, .st-left .st-card { grid-column: 2; grid-row: 1; padding: 22px 20px; }
  .st-side, .st-right .st-side, .st-left .st-side { grid-column: 2; grid-row: 2; padding: 14px 0 0; }
  .st-card::after, .st-left .st-card::after { inset-inline-end: auto; inset-inline-start: -10px; transform: rotate(45deg); }
  .st-year { justify-items: start; }
}
.st-fig { margin: 16px 0 0; }
.st-fig figcaption { margin-top: 10px; font-family: var(--font-hand); font-size: 1.05rem; color: #4c2a90; text-align: center; }
.st-card .st-fig + .st-fig { margin-top: 22px; }
.story-wrap-mini .st-card { background: rgba(255, 255, 255, 0.08); border-color: var(--glass-border); color: var(--text); }
.story-wrap-mini .st-card h3 { color: #fff; }
.story-wrap-mini .st-date { color: var(--accent); }
.story-wrap-mini .st-fig figcaption { color: var(--text-soft); }
.story-wrap-mini .st-line { background: rgba(255, 255, 255, 0.12); }
.story-wrap-mini .st-dot { background: var(--night-800); border-color: rgba(255, 255, 255, 0.2); }

/* big moments sit in the middle, over the path */
.st-center { grid-template-columns: 1fr; justify-items: center; margin-bottom: 56px; }
.st-center .st-dot { grid-column: 1; grid-row: 1; margin: 0 0 -30px; z-index: 2; }
.st-center .st-card { grid-column: 1; grid-row: 2; width: min(100%, 820px); text-align: center; padding-top: 44px; }
.st-center .st-card::after { display: none; }
.st-center .st-photo { max-width: 620px; margin-inline: auto; }
.st-center .st-pics, .st-center .btn-row { justify-content: center !important; }
.st-center .st-mem { text-align: start; }
.st-center .st-quote footer { justify-content: center; }
@media (max-width: 860px) {
  .st-center { grid-template-columns: 1fr; }
  .st-center .st-card { grid-column: 1; grid-row: 2; }
}