.story{--p:0;color:var(--stage-text);position:relative}.story-sticky{gap:3rem;max-width:72rem;margin:0 auto;padding:4rem 1.5rem;display:grid;position:relative}.story-text{gap:2.5rem;display:grid}.story-chapter h2{overflow-wrap:break-word;min-width:0;margin:.5rem 0 .75rem;font-family:Georgia,serif;font-size:clamp(1.75rem,3.4vw,2.75rem);line-height:1.1}.story-chapter p{color:var(--stage-sage-light);max-width:28rem;font-size:1.0625rem;line-height:1.6}.story-nr{color:var(--stage-gold);font-variant-numeric:tabular-nums;font-size:.875rem}.story-visual{aspect-ratio:1;background:radial-gradient(circle at 50% 45%, color-mix(in oklab, var(--stage-sage) 30%, transparent), transparent 70%);border:1px solid color-mix(in oklab, var(--stage-sage-light) 14%, transparent);border-radius:1.5rem;width:100%;max-width:32rem;margin:0 auto;position:relative;overflow:hidden}.story-visual>*{place-items:center;display:grid;position:absolute;inset:0}.story-fragments,.story-count,.story-calm{opacity:0}.story-frag{background:var(--stage-bg-2);border:1px solid color-mix(in oklab, var(--stage-sage-light) 22%, transparent);width:9.5rem;box-shadow:0 18px 40px -20px var(--stage-bg);color:var(--stage-sage-light);transform:translate(-50%, -50%) translate(calc(var(--fx) * 1% * 2.4), calc(var(--fy) * 1% * 2.4)) rotate(calc(var(--fr) * 1deg));border-radius:.75rem;gap:.35rem;padding:.75rem;font-size:.75rem;display:grid;position:absolute;top:50%;left:50%}.story-frag b{color:var(--stage-text);font-weight:500}.story-frag-line{background:color-mix(in oklab, var(--stage-sage-light) 30%, transparent);border-radius:2px;height:4px}.story-frag-line.short{width:60%}.story-count{text-align:center;align-content:center;justify-items:center;gap:.4rem;padding:2rem}.story-count-num{color:var(--stage-gold);font-variant-numeric:tabular-nums;font-family:Georgia,serif;font-size:clamp(4.5rem,9vw,7.5rem);line-height:1}.story-count-unit{font-size:1.125rem}.story-count-sum{color:var(--stage-sage-light);font-variant-numeric:tabular-nums;font-size:.875rem}.story-count-note{color:var(--stage-text-soft);margin-top:.75rem;font-size:.75rem}.story-board{background:color-mix(in oklab, var(--stage-bg) 85%, transparent);border:1px solid color-mix(in oklab, var(--stage-sage-light) 20%, transparent);border-radius:1rem;align-content:start;place-items:stretch stretch;gap:.7rem;padding:1.25rem;display:grid;inset:14% 12%}.story-board-head{color:var(--stage-sage-light);justify-content:space-between;margin-bottom:.4rem;font-size:.875rem;display:flex}.story-board-pill{color:var(--stage-gold)}.story-board-row{background:color-mix(in oklab, var(--stage-sage) 18%, transparent);border-radius:.6rem;grid-template-columns:5rem minmax(0,1fr) 1.25rem;align-items:center;gap:.75rem;padding:.7rem .8rem;font-size:.9375rem;display:grid}.story-bar{background:color-mix(in oklab, var(--stage-sage-light) 15%, transparent);border-radius:3px;height:6px;overflow:hidden}.story-bar i{background:var(--stage-gold);transform-origin:0;height:100%;display:block;transform:scaleX(1)}.story-check{color:var(--stage-gold);font-size:.875rem}.story-calm{align-content:center;justify-items:center;gap:1.5rem}.story-calm-ring{aspect-ratio:1;border:1px solid var(--stage-gold);width:8rem;box-shadow:0 0 80px -10px color-mix(in oklab, var(--stage-gold) 60%, transparent);border-radius:50%}.story-calm-text{text-align:center;padding:0 2rem;font-family:Georgia,serif;font-size:1.25rem}.story-progress,.story-skip{display:none}.story.is-live{height:420svh}.story.is-live .story-sticky{grid-template-columns:minmax(0,5fr) minmax(0,6fr);align-items:center;height:100svh;padding-block:0;position:sticky;top:0}.story.is-live .story-text{height:16rem;position:relative}.story.is-live .story-chapter{opacity:0;transition:opacity .5s,transform .6s cubic-bezier(.2,.7,.2,1);position:absolute;inset:0;transform:translateY(1.5rem)}.story.is-live[data-chapter="0"] .story-chapter[data-i="0"],.story.is-live[data-chapter="1"] .story-chapter[data-i="1"],.story.is-live[data-chapter="2"] .story-chapter[data-i="2"],.story.is-live[data-chapter="3"] .story-chapter[data-i="3"]{opacity:1;transform:none}.story.is-live .story-visual{width:min(100%,78svh);max-width:none}.story.is-live{--a:clamp(0, calc(var(--p) * 4), 1);--b:clamp(0, calc((var(--p) - .22) * 8), 1);--bo:clamp(0, calc((var(--p) - .47) * 10), 1);--c:clamp(0, calc((var(--p) - .5) * 6), 1);--co:clamp(0, calc((var(--p) - .74) * 10), 1);--d:clamp(0, calc((var(--p) - .76) * 6), 1)}.story.is-live .story-fragments{opacity:calc(1 - var(--b))}.story.is-live .story-frag{transform:translate(-50%, -50%) translate(calc(var(--fx) * 2.4% * (1 - var(--a) * .85)), calc(var(--fy) * 2.4% * (1 - var(--a) * .85))) rotate(calc(var(--fr) * 1deg * (1 - var(--a)))) scale(calc(1 - var(--a) * .3))}.story.is-live .story-count{opacity:calc(var(--b) - var(--bo));transform:scale(calc(.94 + var(--b) * .06 + var(--bo) * .08))}.story.is-live .story-board{opacity:calc(var(--c) - var(--co));transform:translateY(calc((1 - var(--c)) * 2rem)) scale(calc(1 - var(--co) * .08))}.story.is-live .story-board-row{opacity:calc(clamp(0, calc((var(--c) - var(--ri) * .15) * 3), 1) - var(--co));transform:translateX(calc((1 - clamp(0, calc((var(--c) - var(--ri) * .15) * 3), 1)) * -1rem))}.story.is-live .story-bar i{transform:scaleX(clamp(0, calc((var(--c) - .3 - var(--ri) * .1) * 2.5), 1))}.story.is-live .story-calm{opacity:var(--d);transform:scale(calc(.9 + var(--d) * .1))}.story.is-live .story-progress{background:color-mix(in oklab, var(--stage-sage-light) 18%, transparent);border-radius:1px;height:2px;display:block;position:absolute;bottom:2rem;left:1.5rem;right:1.5rem;overflow:hidden}.story.is-live .story-progress i{background:var(--stage-gold);transform-origin:0;height:100%;transform:scaleX(var(--p));display:block}.story.is-live .story-skip{color:var(--stage-sage-light);border:1px solid color-mix(in oklab, var(--stage-sage-light) 25%, transparent);border-radius:999px;padding:.5rem .75rem;font-size:.875rem;display:inline-block;position:absolute;bottom:3rem;right:1.5rem}.story-skip:hover{color:var(--stage-text)}.story-skip:focus-visible{outline:2px solid var(--stage-gold);outline-offset:2px;transition:none}@media (width<=768px),(prefers-reduced-motion:reduce){.story-visual{aspect-ratio:4/5}}