/* TPP brand book motion components, standalone (no Squarespace hooks). */
.tpp-scroll-logo{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.08fr);gap:clamp(2rem,5vw,6rem);margin:clamp(3rem,6vw,6rem) 0;align-items:start}
.tpp-scroll-logo__step{min-height:68vh;display:flex;flex-direction:column;justify-content:center;max-width:480px;padding:2rem 0;opacity:.48;transition:opacity .45s ease}
.tpp-scroll-logo__step.is-current{opacity:1}
.tpp-scroll-logo__step h3{font:300 clamp(2.3rem,4vw,4.8rem)/1.06 var(--tpp-editorial);letter-spacing:-.035em;margin:1.2rem 0}
.tpp-scroll-logo__step p{max-width:380px;font-size:1.05rem;line-height:1.65}
.tpp-scroll-logo__visual{position:sticky;top:calc(64px + 4rem);height:calc(100vh - 64px - 8rem);min-height:340px;max-height:670px}
.tpp-scroll-logo__stage{height:100%;background:#F1EBDD;display:flex;align-items:center;justify-content:center;position:relative;padding:clamp(2rem,5vw,4rem);overflow:hidden}
.tpp-scroll-logo__stage img{width:100%;height:100%;max-width:520px;max-height:330px;object-fit:contain;transition:opacity .26s ease;will-change:opacity}
.tpp-scroll-logo__stage img.is-fading{opacity:0}
.tpp-scroll-logo__stage>.mono{position:absolute;left:2rem;bottom:1.7rem;color:#292B27}
.tpp-playground-label{margin-top:3rem;margin-bottom:1rem}
/* Color mood transitions are contained inside the canvas; no global page background mutations. */
.tpp-color-story{position:relative;margin:clamp(4rem,7vw,7rem) 0 4rem}
.tpp-color-story__intro{max-width:540px;margin-bottom:1.5rem}.tpp-color-story__intro p{margin:1rem 0 0}
.tpp-color-story__canvas{position:sticky;top:calc(64px + 2rem);min-height:430px;height:min(66vh,640px);background:#F1EBDD;color:#292B27;z-index:2;transition:background-color .65s ease,color .65s ease;display:flex;align-items:center;padding:clamp(2rem,5vw,5rem);overflow:hidden}
.tpp-color-story__headline{font:400 clamp(2.5rem,5.5vw,6.3rem)/1.04 Avenue,sans-serif;text-transform:uppercase;margin:1.3rem 0 1.6rem;max-width:940px;transition:opacity .22s ease}
.tpp-color-story__inner>p{font:400 clamp(1rem,1.6vw,1.3rem)/1.5 Familjen,sans-serif}
.tpp-color-story__inner.is-fading{opacity:.3;transition:opacity .18s ease}.tpp-color-story__inner{transition:opacity .25s ease}
.tpp-color-story__markers{position:relative;pointer-events:none}.tpp-color-story__marker{height:45vh;min-height:250px}
/* Motif hover labels build upon existing library, leaving downloads visibly available. */
#assetsGallery .library-item{position:relative;overflow:hidden}
#assetsGallery .library-image{position:relative}
#assetsGallery .library-image:after{content:attr(data-motif-caption);position:absolute;inset:auto 0 0;background:rgba(41,43,39,.88);color:#F1EBDD;padding:1rem;font:400 .7rem/1.35 var(--tpp-mono);letter-spacing:.06em;text-transform:uppercase;opacity:0;transform:translateY(100%);transition:opacity .28s ease,transform .28s ease;pointer-events:none}
@media(hover:hover) and (pointer:fine){#assetsGallery .library-item:is(:hover,:focus-within) .library-image[data-motif-caption]:after{opacity:1;transform:translateY(0)}}
@media(hover:none){#assetsGallery .library-image[data-motif-caption]:after{opacity:1;transform:none;font-size:.59rem;padding:.55rem}}
@media(max-width:850px){.tpp-scroll-logo{grid-template-columns:1fr}.tpp-scroll-logo__visual{grid-row:1;top:72px;height:36vh;min-height:260px}.tpp-scroll-logo__step{min-height:180px;opacity:1;padding:1rem 0}.tpp-scroll-logo__step h3{font-size:clamp(2rem,7vw,3.5rem)}.tpp-color-story__canvas{top:72px;height:53vh;min-height:320px}.tpp-color-story__marker{height:35vh}}
@media(max-width:520px){.tpp-scroll-logo__visual{height:280px}.tpp-scroll-logo__stage{padding:2.4rem}.tpp-color-story__canvas{min-height:280px;height:380px;padding:1.5rem}.tpp-color-story__headline{font-size:clamp(2rem,9vw,3.8rem)}.tpp-color-story__marker{min-height:170px;height:230px}}
@media(prefers-reduced-motion:reduce){.tpp-scroll-logo__step,.tpp-scroll-logo__stage img,.tpp-color-story__canvas,.tpp-color-story__inner,.tpp-color-story__headline,#assetsGallery .library-image:after{transition:none!important}}


/* V9: mobile-only inline artwork must never enter the desktop grid. */
.tpp-scroll-logo__inline{display:none}

/* V7: scroll timeline must not overlap reading content. Desktop image stays in its own sticky column. */
.tpp-scroll-logo__visual{align-self:start;z-index:1}
.tpp-scroll-logo__copy{min-width:0;position:relative;z-index:2}
.tpp-scroll-logo__step{scroll-margin-top:clamp(100px,13vh,170px)}
/* On touch/narrow screens the three image/text pairs become ordinary editorial panels.
   No floating stage can cover the next entry or end before the last caption. */
@media(max-width:850px){
 .tpp-scroll-logo{display:block;margin-block:2.75rem}
 .tpp-scroll-logo__visual{display:none}
 .tpp-scroll-logo__copy{display:grid;gap:3rem}
 .tpp-scroll-logo__step{min-height:0;padding:0;opacity:1;display:flex;flex-direction:column;gap:.8rem;max-width:none}
 .tpp-scroll-logo__step h3{margin:0;font-size:clamp(2rem,7vw,3.5rem)}
 .tpp-scroll-logo__step p{margin:0;max-width:35rem}
 .tpp-scroll-logo__inline{order:-1;background:#F1EBDD;width:100%;aspect-ratio:1.2;max-height:410px;display:flex;align-items:center;justify-content:center;padding:clamp(2rem,8vw,4rem);position:relative;overflow:hidden}
 .tpp-scroll-logo__inline img{width:100%;height:100%;max-width:520px;max-height:300px;object-fit:contain}
 .tpp-scroll-logo__inline .mono{position:absolute;left:1.4rem;bottom:1.15rem;font-size:.59rem;color:#292B27}
}
@media(prefers-reduced-motion:reduce){.tpp-scroll-logo__step{opacity:1}}