.remember-story { --story-stacked: 0; position: relative; background: #05060a; color: #ede5ef; }
.story-stage { position: relative; padding: 48px 24px 80px; }
.story-topline { display: flex; justify-content: flex-end; align-items: center; max-width: 1120px; margin: 0 auto; gap: 24px; font-size: 11px; }
.story-topline a { color: #c3b9cc; text-decoration: none; }
.story-topline a span { margin-left: 8px; }
.story-topline a:focus-visible,.story-step:focus-visible { outline: 2px solid #d6a6d8; outline-offset: 4px; border-radius: 4px; }
.story-captions { position: relative; max-width: 900px; margin: 48px auto; height: 40px; text-align: center; }
.story-caption { display: none; margin: 0; color: #aea1b9; font-size: clamp(20px,2vw,25px); line-height: 1.35; letter-spacing: -.035em; font-weight: 400; }
.story-caption:first-child { display: block; }
.story-scene { position: relative; max-width: 1120px; margin: auto; }
.thought-threads,.constellation,.word-fragment { display: none; }
.memory { position: relative; width: min(100%,390px); padding: 18px 24px; border: 0; border-left: 1px solid #b6a1c338; }
.memory-body { margin: 0; color: #ede5ef; font-size: 25px; line-height: 1.55; letter-spacing: -.035em; }
.memory mark { background: transparent; color: inherit; }
.memory-earlier,.memory-birthday { margin: 28px 0 28px auto; }
.story-insight { width: min(100%,620px); margin: 64px auto; }
.insight-label { display: block; margin-bottom: 20px; color: #b5a3c2; font-size: 12px; }
.insight-body { margin: 0; font-size: clamp(25px,2.8vw,34px); line-height: 1.5; letter-spacing: -.035em; }
.insight-body mark { color: #e5c58c; background: transparent; white-space: nowrap; }
.story-question { width: min(100%,650px); margin: 72px auto 36px; }
.question-ink { margin: 0; color: #eee6f3; font-size: clamp(28px,3vw,36px); letter-spacing: -.045em; line-height: 1.45; }
.story-answer { width: min(100%,700px); margin: auto; }
.answer-heading { color: #b5a3c2; font-size: 12px; margin-bottom: 18px; }
.answer-body { margin: 0; font-size: clamp(25px,2.85vw,35px); letter-spacing: -.04em; line-height: 1.5; text-wrap: pretty; }
.answer-body em { font-style: normal; color: #e5c58c; }
.answer-body sup { position: relative; top: -.3em; color: #d0b995; font: 10px/1 Menlo,monospace; padding-left: 4px; }
.story-evidence { margin-top: 32px; padding-top: 22px; border-top: 1px solid #b5a0c11c; }
.evidence-label { color: #a497af; font-size: 11px; }
.evidence-quotes { display: grid; grid-template-columns: 1fr 1fr; gap: 24px; margin-top: 16px; }
.evidence-quotes blockquote { margin: 0; color: #bdb1c5; font-size: 13px; line-height: 1.65; letter-spacing: -.01em; }
.evidence-quotes blockquote span { display: block; color: #94869f; font-size: 10px; margin-bottom: 7px; }
.story-footer { display: none; }
.remember-story.is-animated { height: 480svh; }
.is-animated .story-stage { position: sticky; top: 0; height: 100svh; min-height: 650px; overflow: hidden; padding: 36px 40px 28px; }
.is-animated .story-captions { position: absolute; top: 100px; left: 24px; right: 24px; height: 42px; margin: auto; z-index: 4; pointer-events: none; }
.is-animated .story-caption { display: block; position: absolute; inset: 0; opacity: 0; }
.is-animated .story-scene { position: absolute; top: 170px; bottom: 90px; left: 40px; right: 40px; }
.is-animated .memory,.is-animated .story-question,.is-animated .story-answer,.is-animated .story-insight { position: absolute; left: 0; top: 0; margin: 0; opacity: 0; will-change: transform,opacity; }
.is-animated .word-fragment { display: block; position: absolute; left: 0; top: 0; opacity: 0; color: #e5c58c; white-space: nowrap; pointer-events: none; will-change: transform,opacity; }
.is-animated .story-insight { width: min(86%,620px); }
.is-animated .memory { width: min(39%,390px); }
.is-animated .memory-earlier,.is-animated .memory-birthday { width: min(39%,390px); }
.is-animated .memory-word { opacity: 0; }
.is-animated .thought-threads { display: block; position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; pointer-events: none; }
.thought-thread { stroke-dasharray: 1; stroke-dashoffset: 1; }
.is-animated .constellation { display: block; position: absolute; inset: 0; opacity: 0; pointer-events: none; }
.thought-node { position: absolute; top: 0; left: 0; padding: 8px; background: #05060a; font-size: 18px; color: #c6b4d7; white-space: nowrap; }
.node-person { color: #e5c58c; font-size: 20px; padding: 10px 14px; }
.is-animated .story-question { width: min(82%,650px); }
.is-animated .story-answer { width: min(86%,700px); }
.is-animated .story-evidence { opacity: 0; }
.is-animated .story-footer { display: flex; align-items: center; justify-content: center; position: absolute; bottom: 28px; left: 24px; right: 24px; }
.story-scroll-hint { position: absolute; bottom: 51px; left: 0; right: 0; text-align: center; color: #918398; font-size: 11px; pointer-events: none; }
.story-stepper { display: flex; gap: 2px; }
.story-step { display: grid; place-items: center; width: 44px; height: 44px; border: 0; background: transparent; cursor: pointer; }
.story-step span { width: 4px; height: 4px; border-radius: 50%; background: #675a71; transition: background-color 160ms cubic-bezier(.23,1,.32,1); }
.story-step[aria-current=step] span { background: #dbc293; }
@media (max-width:800px) {
  .remember-story { --story-stacked: 1; }
  .story-stage { padding: 36px 24px 64px; }
  .story-topline { font-size: 10px; }
  .is-animated .story-stage { padding: 28px 24px; }
  .is-animated .story-captions { top: 94px; }
  .is-animated .story-scene { top: 154px; bottom: 90px; left: 24px; right: 24px; }
  .is-animated .memory,.is-animated .memory-earlier,.is-animated .memory-birthday { width: min(100%,420px); padding: 14px 20px; }
  .memory-body { font-size: 23px; }
  .is-animated .story-answer,.is-animated .story-question { width: min(100%,620px); }
  .is-animated .story-insight { width: min(100%,620px); }
  .insight-body { font-size: 25px; }
  .thought-node { font-size: 16px; }
  .answer-body { font-size: 25px; }
  .answer-heading { margin-bottom: 14px; }
  .evidence-quotes { gap: 16px; grid-template-columns: 1fr; }
  .evidence-quotes blockquote { font-size: 12px; line-height: 1.55; }
  .story-evidence { margin-top: 24px; padding-top: 18px; }
  .question-ink { font-size: 28px; }
}
@media (max-width:360px) { .answer-body { font-size: 22px; } .memory-body { font-size: 21px; } .question-ink { font-size: 26px; } .evidence-quotes { gap: 12px; } }
@media (prefers-reduced-motion:reduce) { .story-step span { transition: none; } }