.story-page{position:relative;min-height:100dvh;padding:clamp(6rem,11dvh,7.5rem) var(--page-x) clamp(5rem,10vw,8rem);isolation:isolate;&:before{content:"";position:absolute;inset:0;z-index:-1;background:radial-gradient(55rem 40rem at 88% -8%,rgba(var(--blue-rgb),.07),transparent 60%),radial-gradient(40rem 35rem at -8% 108%,rgba(var(--blue-rgb),.045),transparent 55%);pointer-events:none}.story{width:min(100%,62rem);margin-inline:auto;:is(h1,h2,h3,p,.story-meta){text-wrap:pretty}.ink{position:relative;display:inline-block;color:var(--dark);white-space:nowrap;&:after{content:"";position:absolute;top:calc(100% + .13em);left:0;width:100%;height:.13em;background:var(--blue);opacity:.86;border-radius:999px;transform:rotate(-1.2deg) scaleX(0);transform-origin:left center;animation:inkGrow .7s .95s var(--ease-expo) forwards;@media(prefers-reduced-motion:reduce){transform:rotate(-1.2deg) scaleX(1);animation:none}}}.story-intro{margin-bottom:clamp(3rem,7vw,5rem);.story-kicker{display:inline-block;margin-bottom:.9rem;color:var(--blue);font-family:var(--font-hand);font-size:clamp(.972rem,2.106vw,1.2555rem);font-weight:700;transform:rotate(-2deg);animation:storyFadeUp .6s .1s var(--ease-expo) both}.story-title{max-width:16ch;color:var(--dark);font-family:var(--font-display);font-size:clamp(2.43rem,min(6.48vw,9.72dvh),5.265rem);font-weight:1000;line-height:.93;letter-spacing:0;animation:storyNameReveal .9s .22s var(--ease-expo) both;@media(max-width:560px){font-size:clamp(2.2275rem,10.53vw,4.05rem)}}.story-lede{max-width:44rem;margin-top:clamp(1.4rem,3vw,2rem);color:var(--gray-600);font-family:var(--font-display);font-size:clamp(.8505rem,1.215vw,1.053rem);font-weight:800;line-height:1.78;animation:storyFadeUp .68s .42s var(--ease-expo) both}.story-meta{display:flex;flex-wrap:wrap;align-items:center;gap:.65rem 2.2rem;margin-top:clamp(1.6rem,3vw,2.2rem);animation:storyFadeUp .68s .56s var(--ease-expo) both;.story-meta-item{display:inline-flex;align-items:center;gap:.5rem;color:var(--dark);font-family:var(--font-display);font-size:.7776rem;font-weight:850;line-height:1;white-space:nowrap}.story-meta-label{display:inline-block;color:var(--blue);font-family:var(--font-hand);font-size:.8424rem;line-height:1;transform:translateY(-.04em) rotate(-2deg);transform-origin:center}.story-meta-value{display:inline-block;color:var(--dark);font-family:var(--font-display);font-size:.7776rem;font-weight:850;line-height:1}}}.story-break{display:flex;align-items:center;gap:1rem;margin:clamp(3.25rem,7vw,5.5rem) 0 clamp(1.75rem,4vw,2.75rem);&:before{content:"";flex:none;width:.6rem;height:.6rem;border-radius:50%;background:var(--blue)}& h2{flex:none;color:var(--dark);font-family:var(--font-display);font-size:clamp(1.55rem,3.5vw,2.4rem);font-weight:1000;line-height:1;white-space:nowrap}&:after{content:"";flex:1;height:2px;border-radius:999px;background:linear-gradient(90deg,rgba(var(--dark-rgb),.16),transparent)}}.story-next{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:1.5rem;margin-top:clamp(3.5rem,8vw,6rem);padding-top:2rem;border-top:2px solid rgba(var(--dark-rgb),.1);.next-link{display:inline-flex;flex-direction:column;gap:.15rem;& small{color:var(--blue);font-family:var(--font-hand);font-size:1.05rem;font-weight:700}& strong{display:inline-flex;align-items:center;gap:.55rem;color:var(--dark);font-family:var(--font-display);font-size:clamp(1.35rem,3vw,2rem);font-weight:1000;transition:color .3s var(--ease-expo);& svg{display:block;flex:none;transition:transform .35s var(--ease-spring)}}&:hover strong{color:var(--blue)}&:hover strong svg{transform:translate(5px)}}.story-aside-link{position:relative;color:var(--gray-600);font-family:var(--font-display);font-size:.95rem;font-weight:900;transition:color .25s;&:after{content:"";position:absolute;left:0;bottom:-4px;width:0;height:2px;border-radius:1px;background:var(--blue);transition:width .3s var(--ease-expo)}&:hover{color:var(--dark)}&:hover:after{width:100%}}}.reveal{animation:storyFadeUp .7s var(--ease-expo) both;@supports (animation-timeline: view()){animation:storyFadeUp linear both;animation-timeline:view();animation-range:entry 0% entry 62%}}}}@keyframes storyNameReveal{0%{opacity:0;clip-path:inset(0 0 100% 0);transform:translateY(45px)}to{opacity:1;clip-path:inset(-5% -5% -75% -5%);transform:translateY(0)}}@keyframes storyFadeUp{0%{opacity:0;transform:translateY(26px)}to{opacity:1;transform:translateY(0)}}@keyframes inkGrow{to{transform:rotate(-.8deg) scaleX(1)}}