/* The process is a moving row of authored posts inside the same red/silver room. */
.social-process{background:radial-gradient(ellipse at 88% 26%,#8c252b57,transparent 60%),radial-gradient(ellipse at 9% 100%,#5f769547,transparent 59%),#171b23;color:#f4f5f6}
.social-process:before{inset:52% -24% -45% 38%;background:linear-gradient(140deg,#b6312b5c,#a6b3c922 57%,transparent 80%);border:1px solid #a6b3c929;box-shadow:-24px 38px 60px #04060b38;transform:perspective(900px) rotateX(56deg) rotateZ(-18deg);pointer-events:none}
.social-process:after{content:'';position:absolute;left:-14%;top:12%;width:38%;height:80%;z-index:-1;border-radius:50%;border:1px solid #a6b3c929;transform:rotate(28deg);pointer-events:none}
.social-process h2{color:#f4f5f6}
.social-process h2 em{color:#ff8076}
.social-process-intro>p{color:#d4dce7}
.social-carousel-position,.social-process-intro>.social-carousel-hint{color:#c5cfde}
.social-carousel-controls button{color:#e2e8f1;border-color:#a6b3c95c;background:#a6b3c910}
.social-carousel-controls button:hover:not(:disabled){background:#b6312b;border-color:#ef8076}
.social-carousel-progress{background:#75829763}
.social-carousel-progress span{background:#ff8b81}
.social-process-slide{box-shadow:16px 30px 44px #03050a66}
.social-carousel-track{scrollbar-color:#ff8b81 #333c4a}
.social-process :is(button,a):focus-visible,.social-carousel-track:focus-visible{outline-color:#ffb2a9}
.social-process .social-process-copy a:focus-visible{outline-color:#9d2c2a}

/* Only this class adds scroll length. JS applies it after checking the real copy fits. */
.social-process.is-scroll-driven{height:var(--carousel-section-height,auto);padding:0;overflow:clip}
.social-process.is-scroll-driven .social-process-layout{position:sticky;top:var(--carousel-stage-top,96px);height:var(--carousel-stage-height);min-height:0;align-items:center;gap:7%}
.social-process.is-scroll-driven .social-carousel-track{overflow-x:hidden;overflow-y:clip;scroll-snap-type:none;scroll-behavior:auto;overscroll-behavior:auto;touch-action:pan-y;scrollbar-width:none;padding:18px 20px 24px 8px}
.social-process.is-scroll-driven .social-carousel-track::-webkit-scrollbar{display:none}
.social-process.is-scroll-driven .social-process-slide{scroll-snap-align:none}
.social-process.is-scroll-driven .social-process-art{height:clamp(180px,25vh,250px)}
.social-process.is-scroll-driven .social-process-copy{padding:24px 26px}
.social-process.is-scroll-driven .social-process-copy p{font-size:13px;line-height:1.7}
.social-process.is-scroll-driven .social-process-copy h3{font-size:clamp(25px,2.5vw,35px)}
.social-process.is-scroll-driven .social-process-output{margin-top:17px}

@media(max-width:1100px) and (min-width:761px){
 .social-process.is-scroll-driven .social-process-layout{gap:5%;grid-template-columns:.8fr 1.2fr}
 .social-process.is-scroll-driven h2{font-size:43px}
 .social-process.is-scroll-driven .social-process-intro>p{font-size:13px;margin-top:22px}
 .social-process.is-scroll-driven .social-process-copy{padding:20px}
 .social-process.is-scroll-driven .social-process-art{height:190px}
 .social-process.is-scroll-driven .process-word{font-size:49px;top:30px}
 .social-process.is-scroll-driven .note-second{top:80px}
 .social-process.is-scroll-driven .process-format{height:119px;min-height:0;padding:14px 10px;gap:9px}
 .social-process.is-scroll-driven .format-post{height:auto;min-height:88px;font-size:22px;bottom:13px}
}
@media(max-width:760px){
 .social-process{padding-block:70px 76px}
 .social-process.is-scroll-driven .social-process-layout{display:flex;flex-direction:column;justify-content:center;align-items:stretch;gap:12px}
 .social-process.is-scroll-driven .social-process-intro{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:9px 14px;align-items:center}
 .social-process.is-scroll-driven h2{font-size:clamp(25px,6.8vw,32px);line-height:1.02;grid-column:1;grid-row:1;max-width:270px}
 .social-process.is-scroll-driven .social-process-intro>p:not(.social-carousel-hint){grid-column:1/-1;grid-row:2;font-size:11px;line-height:1.6;margin:0;max-width:none}
 .social-process.is-scroll-driven .social-carousel-controls{grid-column:2;grid-row:1;display:grid;grid-template-columns:40px 40px;gap:4px 5px;margin:0}
 .social-process.is-scroll-driven .social-carousel-controls button{width:40px;height:40px}
 .social-process.is-scroll-driven .social-carousel-position{grid-column:1/-1;grid-row:2;text-align:center;font-size:9px}
 .social-process.is-scroll-driven .social-carousel-prev{grid-column:1;grid-row:1}
 .social-process.is-scroll-driven .social-carousel-next{grid-column:2;grid-row:1}
 .social-process.is-scroll-driven .social-carousel-progress{grid-column:1/-1;grid-row:3;width:100%;margin:0;height:2px}
 .social-process.is-scroll-driven .social-process-intro>.social-carousel-hint{grid-column:1/-1;grid-row:4;font-size:9px;line-height:1.4;margin:0}
 .social-process.is-scroll-driven .social-carousel-track{margin:0;flex:none;padding:9px 12px 18px 0;gap:14px}
 .social-process.is-scroll-driven .social-process-slide{flex-basis:calc(100% - 14px)}
 .social-process.is-scroll-driven .social-post-author{padding:11px 16px;gap:8px}
 .social-process.is-scroll-driven .social-post-author img{width:24px;height:24px}
 .social-process.is-scroll-driven .social-post-author>span{font-size:9px}
 .social-process.is-scroll-driven .social-post-author strong{font-size:10px}
 .social-process.is-scroll-driven .social-process-art{height:145px}
 .social-process.is-scroll-driven .process-word{font-size:39px;left:17px;top:30px}
 .social-process.is-scroll-driven .process-note{padding:7px 11px;font-size:9px;border-radius:8px}
 .social-process.is-scroll-driven .note-first{top:13px;right:15px}
 .social-process.is-scroll-driven .note-second{top:61px;right:18px}
 .social-process.is-scroll-driven .note-third{bottom:12px;right:14px}
 .social-process.is-scroll-driven .process-discover .social-process-art>svg{width:24px;height:24px;bottom:14px;left:18px}
 .social-process.is-scroll-driven .social-process-copy{padding:18px 18px 20px}
 .social-process.is-scroll-driven .social-process-copy h3{font-size:25px;line-height:1.08}
 .social-process.is-scroll-driven .social-process-copy p{font-size:11px;line-height:1.65;margin-top:12px}
 .social-process.is-scroll-driven .social-process-output{font-size:10px;line-height:1.5;margin-top:12px}
 .social-process.is-scroll-driven .social-process-copy .text-link{font-size:10px;margin-top:8px;min-height:40px}
 .social-process.is-scroll-driven .process-format{min-width:60px;height:99px;padding:10px;font-size:11px;gap:7px;border-radius:8px}
 .social-process.is-scroll-driven .process-format svg{width:26px;height:26px}
 .social-process.is-scroll-driven .format-reel{left:15px;top:13px}
 .social-process.is-scroll-driven .format-story{right:17px;top:16px}
 .social-process.is-scroll-driven .format-post{left:28%;min-width:120px;min-height:70px;height:70px;bottom:10px;font-size:21px}
 .social-process.is-scroll-driven .process-publish-type{font-size:29px;left:17px;top:17px}
 .social-process.is-scroll-driven .process-publish{width:46px;height:46px;right:18px;top:16px;border-radius:10px}
 .social-process.is-scroll-driven .process-publish svg{width:26px;height:26px}
 .social-process.is-scroll-driven .note-review{font-size:8px;right:16px;bottom:11px}
}
@media(prefers-reduced-motion:reduce){
 .social-process.is-scroll-driven{height:auto;padding:70px 0 76px}
 .social-process.is-scroll-driven .social-process-layout{height:auto;position:relative;top:auto}
 .social-carousel-track{scroll-behavior:auto!important}
}