/* Paper becomes possibility. All motion values come from Scroll Craft's act progress. */
.scroll-story{--story-open:1;--story-color:1;--story-p:1;--story-camera:.92;position:relative;background:var(--lavender);isolation:isolate}
.story-stage{position:relative;overflow:clip}
.story-ground{position:absolute;inset:0;z-index:-1;overflow:hidden;pointer-events:none}
.story-petal{display:block;position:absolute;border-radius:47% 53% 43% 57% / 38% 42% 58% 62%;opacity:.72}
.story-petal-lime{width:48%;height:70%;background:var(--lime);right:6%;top:15%;transform:rotate(calc(var(--story-p)*22deg)) scale(calc(.8 + var(--story-p)*.2))}
.story-petal-coral{width:26%;height:40%;background:var(--coral);right:0;bottom:3%;transform:translateY(calc(var(--story-p)*-10%)) rotate(calc(var(--story-p)*-28deg))}
.story-shell{position:relative;display:grid;grid-template-columns:minmax(0,.88fr) minmax(0,1.12fr);gap:30px 6%;align-items:center;padding-block:54px}
.story-copy{position:relative;z-index:3;min-width:0}
.story-copy h2{font-size:clamp(42px,5.3vw,76px);font-weight:500;line-height:1.02;color:var(--purple);margin-top:24px}
.story-copy h2 span{position:relative;display:inline-block}
.story-copy h2 span::after{content:"";position:absolute;height:5px;background:var(--coral);border-radius:60%;inset:auto -2px -7px;transform:rotate(-3deg) scaleX(calc(.2 + var(--story-p)*.8));transform-origin:left}
.story-lead{font-size:17px;line-height:1.6;margin-top:27px;max-width:300px;color:var(--muted)}
.story-steps{display:flex;flex-wrap:wrap;gap:6px;margin-top:28px}
.story-steps button{display:flex;align-items:center;gap:7px;min-height:44px;padding:10px 13px;border:1px solid #603e9140;border-radius:6px;background:transparent;color:var(--purple);font-size:12px;font-weight:600}
.story-steps button span{font-size:9px;opacity:.75}
.story-steps button[aria-pressed=true]{background:var(--purple);color:var(--cream);border-color:var(--purple)}
.story-track{height:2px;margin-top:17px;background:#603e9126;max-width:316px;overflow:hidden}
.story-track>span{display:block;width:100%;height:100%;background:var(--purple);transform:scaleX(var(--story-p));transform-origin:left}
.story-skip{display:inline-flex;align-items:center;gap:28px;min-height:44px;margin-top:20px;font-size:13px;font-weight:600;color:var(--purple);text-decoration:underline;text-underline-offset:5px}
.story-motion-notice{font-size:12px;line-height:1.6;margin-top:22px;max-width:350px;color:var(--muted)}
.story-motion-toggle{display:block;border:1px solid var(--purple);background:var(--cream);color:var(--purple);min-height:44px;border-radius:5px;font-size:12px;font-weight:600;padding:11px 14px;margin-top:10px}
.story-canvas{position:relative;min-width:0;min-height:0;display:grid;place-items:center;align-self:stretch;padding:12px 0 20px}
.story-spread{position:relative;width:min(86%,calc((100svh - 190px)*.75),490px);aspect-ratio:3/4;transform:scale(var(--story-camera));transform-origin:center;will-change:transform}
.story-spread figure{position:absolute;inset:0;margin:0;background:white;padding:9px;box-shadow:0 14px 40px #3d285926;transform-origin:center}
.story-spread img{display:block;width:100%;height:calc(100% - 37px);object-fit:contain;background:white}
.story-spread figcaption{font-size:12px;font-weight:600;line-height:1.3;padding:8px 3px 0;color:var(--purple)}
.story-spread figcaption span{display:block;font-size:9px;font-weight:400;line-height:1.45;margin-top:2px;color:var(--muted)}
.story-original{z-index:1;transform:translate3d(calc(var(--story-open)*-18%),calc(var(--story-open)*10%),0) rotate(calc(var(--story-open)*-6deg)) scale(calc(1.05 - var(--story-open)*.47))}
.story-reference{z-index:2;clip-path:inset(0 calc((1 - var(--story-color))*100%) 0 0);transform:translate3d(calc(24% - var(--story-open)*24%),calc(var(--story-open)*-4%),0) rotate(calc(8deg - var(--story-open)*6deg)) scale(calc(.82 + var(--story-open)*.12));opacity:1}
.story-palette{position:absolute;display:flex;align-items:center;gap:7px;bottom:-29px;right:-8px;white-space:nowrap;color:var(--purple);font-size:10px;z-index:3}
.story-palette i{width:15px;height:15px;border-radius:50%;background:var(--purple)}
.story-palette i:nth-child(2){background:var(--coral)}.story-palette i:nth-child(3){background:var(--lime)}
.story-palette span{margin-left:4px}
.story-footer{grid-column:1/-1;display:flex;justify-content:space-between;gap:30px;align-items:end;padding-top:9px;border-top:1px solid #603e9126;position:relative;z-index:3}
.story-footer p{font-size:11px;line-height:1.55;color:var(--muted)}
.story-book-link{color:var(--purple);font-size:13px;font-weight:600;min-height:44px;display:inline-flex;align-items:center;gap:26px;text-decoration:underline;text-underline-offset:5px;flex-shrink:0}
.scroll-story[data-motion=full] .story-stage{position:sticky;top:0;height:100svh;min-height:0}
.scroll-story[data-motion=full] .story-original{opacity:var(--story-ink,1)}
.scroll-story[data-motion=full] .story-reference figcaption{opacity:var(--story-caption,1)}
.scroll-story[data-motion=full] .story-motion-notice{display:flex;align-items:center;flex-wrap:wrap;gap:8px}
.scroll-story[data-motion=full] .story-motion-toggle{margin-top:0}
.scroll-story[data-motion=full] .story-shell{height:100%;grid-template-rows:minmax(0,1fr) auto;padding-block:38px 24px}
.scroll-story[data-motion=static]{height:auto!important}
.scroll-story[data-motion=static] .story-stage{position:relative;height:auto;overflow:visible}
.scroll-story[data-motion=static] .story-spread{will-change:auto}
.scroll-story:not([data-motion=full]) .story-original{z-index:3;opacity:1}
.scroll-story:not([data-motion=full]) .story-spread{display:grid;grid-template-columns:1fr 1fr;gap:20px;aspect-ratio:auto;transform:none;width:100%;max-width:700px}
.scroll-story:not([data-motion=full]) .story-spread figure{position:relative;inset:auto;transform:none;clip-path:none;opacity:1}
.scroll-story:not([data-motion=full]) .story-spread img{height:auto}
.scroll-story:not([data-motion=full]) .story-original{grid-area:1/1}
.scroll-story:not([data-motion=full]) .story-reference{grid-area:1/2}
.scroll-story[data-motion=static] .story-track,.scroll-story[data-motion=static] .story-palette{display:none}
html[data-roofline-motion=reduce] [data-sc-parallax]{transform:none!important}
html[data-roofline-motion=reduce] [data-sc-in],html[data-roofline-motion=reduce] [data-sc-stagger]>*{opacity:1!important;transform:none!important;transition:none!important}
@media(max-width:860px),(max-aspect-ratio:4/5){
  .story-shell{grid-template-columns:minmax(0,1fr);gap:20px;padding-block:40px}
  .story-copy h2{font-size:42px;line-height:1.03;margin-top:12px}.story-copy h2 br{display:none}
  .story-lead{max-width:none;font-size:14px;line-height:1.5;margin-top:14px}
  .story-steps{margin-top:17px;gap:5px}.story-steps button{font-size:11px;padding-inline:11px;gap:5px}
  .story-track{margin-top:11px;max-width:none}.story-skip{font-size:12px;margin-top:7px;min-height:36px}
  .story-canvas{min-height:0;padding:4px 0 14px}
  .story-spread{width:min(calc(100% - 32px),calc((100svh - 300px)*.75),560px)}
  .story-footer{gap:9px;display:block;padding-top:13px}.story-footer p{font-size:10px;line-height:1.45}
  .story-book-link{font-size:12px;min-height:36px;margin-top:4px}
  .scroll-story[data-motion=full] .story-shell{grid-template-rows:auto minmax(0,1fr) auto;padding-block:24px 14px;gap:12px}
  .story-spread figure{padding:6px}.story-spread img{height:calc(100% - 31px)}.story-spread figcaption{font-size:10px;padding-top:5px}.story-spread figcaption span{font-size:8px}
  .story-palette{font-size:9px;bottom:-23px;right:-4px;gap:5px}.story-palette i{width:11px;height:11px}
  .scroll-story[data-motion=static] .story-spread{width:min(72%,330px);margin-block:26px 35px}
  .story-motion-notice{max-width:none;margin-top:12px;font-size:11px}
}
@media(max-width:420px){.story-copy h2{font-size:34px;max-width:290px}.story-copy h2 br{display:block}.story-steps button{padding-inline:10px}.story-lead{font-size:13px;max-width:290px}.story-copy .eyebrow{font-size:9px}.story-footer p br{display:none}.story-book-link{min-height:30px}.scroll-story[data-motion=full] .story-shell{padding-block:18px 12px;gap:7px}}
@media(max-width:350px){.story-copy h2{font-size:31px}.story-lead{font-size:12px}.story-steps{margin-top:12px}.story-steps button{padding-inline:8px;gap:4px;font-size:10px}.story-copy h2{margin-top:10px}.story-skip{min-height:30px;margin-top:2px}.story-spread{width:min(calc(100% - 32px),calc((100svh - 285px)*.75))}}
@media(max-height:560px) and (min-width:600px){.story-shell,.scroll-story[data-motion=full] .story-shell{grid-template-columns:.95fr 1.05fr;grid-template-rows:minmax(0,1fr) auto;padding-block:15px;gap:10px 25px}.story-copy h2{font-size:34px}.story-copy h2 br{display:block}.story-lead{font-size:12px;max-width:290px}.story-steps{margin-top:12px}.story-spread{width:min(80%,calc((100svh - 95px)*.75))}.story-footer{display:flex;gap:20px;padding-top:8px}.story-footer p{font-size:9px}.story-book-link{font-size:11px;min-height:30px}.story-skip{min-height:30px}.story-track{margin-top:8px}}
.scroll-story[data-motion=full] .story-spread{width:var(--story-sheet-width,250px)}
.scroll-story[data-motion=full] .story-spread figure{display:grid;grid-template-rows:minmax(0,1fr) auto}
.scroll-story[data-motion=full] .story-spread img{height:100%;min-height:0}
.scroll-story:not([data-motion=full]) .story-spread{width:100%;max-width:700px}