.work.blog-carousel-section{padding:75px var(--p) 80px;background:#051a2f}
.blog-carousel-section .section-title{margin-bottom:38px}.blog-carousel-section .section-title h2{font-size:clamp(42px,5vw,76px)}
.blog-carousel{--blog-height:460px;--pointer-x:0px;--pointer-y:0px}
.blog-slides{position:relative;height:var(--blog-height);transition:height .35s ease;touch-action:pan-y}
.blog-slide{position:absolute;top:0;left:0;right:0;opacity:0;visibility:hidden;transform:translateY(12px);transition:opacity .42s ease,transform .55s cubic-bezier(.2,.7,.25,1);pointer-events:none}
.blog-slide.is-active{opacity:1;visibility:visible;transform:none;pointer-events:auto;z-index:1}.blog-slide.is-leaving{visibility:visible;opacity:0;transform:translateY(-12px)}
.blog-feature{display:grid;grid-template-columns:1fr 1.05fr;min-height:430px;border:1px solid #9d89fc30;border-radius:14px;overflow:hidden;background:#0a2037;isolation:isolate}
.blog-feature-copy{display:flex;flex-direction:column;justify-content:center;padding:38px;min-width:0}
.blog-meta{display:flex;align-items:center;justify-content:space-between;gap:15px;font-size:8px;line-height:1.6;letter-spacing:1.3px;color:#9d89fc;text-transform:uppercase}.blog-meta time{white-space:nowrap;color:#9fb4c9;font-size:9px;letter-spacing:.3px}
.blog-feature h3{font:400 clamp(29px,3.3vw,48px)/1.12 Anton;text-transform:uppercase;letter-spacing:-.015em;margin:25px 0 18px;max-width:480px}
.blog-feature-copy>p{font-size:14px;line-height:1.8;color:#c8ddf1;max-width:380px;margin:0}
.blog-feature-foot{display:flex;justify-content:space-between;align-items:center;gap:20px;margin-top:35px;font-size:8px;letter-spacing:1px;color:#91a9c1}.blog-read{display:flex;align-items:center;gap:18px;color:#fff;font-size:10px;letter-spacing:0;white-space:nowrap}.blog-read b{display:grid;place-items:center;width:34px;height:34px;border:1px solid #9d89fc65;border-radius:50%;font:300 20px 'DM Sans';transition:background .3s,transform .3s}
.blog-feature:hover .blog-read b,.blog-feature:focus-visible .blog-read b{background:#9d89fc30;transform:rotate(90deg)}
.blog-visual{position:relative;min-width:0;display:grid;place-items:center;overflow:hidden;background:radial-gradient(ellipse at 55% 45%,#9d89fc12,transparent 70%),#071c32;border-left:1px solid #9d89fc20;perspective:900px}
.blog-visual svg{display:block;width:100%;height:100%;max-height:480px;transform:translate3d(var(--pointer-x),var(--pointer-y),0);transition:transform .7s cubic-bezier(.2,.7,.25,1)}
.blog-visual-caption{position:absolute;bottom:20px;left:24px;right:24px;color:#9d89fc;font-size:7px;letter-spacing:1.7px}
.blog-art-core,.blog-art-satellites,.blog-art-orbit{transform-box:fill-box;transform-origin:center;transition:transform .8s cubic-bezier(.2,.7,.25,1)}
.blog-feature:hover .blog-art-core,.blog-feature:focus-visible .blog-art-core{transform:translateY(-9px)}.blog-feature:hover .blog-art-satellites,.blog-feature:focus-visible .blog-art-satellites{transform:translateY(7px)}.blog-feature:hover .blog-art-orbit,.blog-feature:focus-visible .blog-art-orbit{transform:rotate(8deg)}
.blog-carousel-controls{display:flex;justify-content:space-between;align-items:center;gap:40px;margin-top:25px}
.blog-pagination{display:flex;gap:18px;flex:1;max-width:480px}.blog-dot{position:relative;flex:1;border:0;background:none;color:#7892ab;text-align:left;font:9px 'DM Sans';padding:16px 0 7px;cursor:pointer;min-height:44px}.blog-dot:before,.blog-dot i{content:'';position:absolute;left:0;right:0;top:0;height:2px;background:#9d89fc25}.blog-dot i{background:#9d89fc;transform:scaleX(0);transform-origin:left}.blog-dot.is-active{color:#c8ddf1}.blog-dot.is-active i{transform:scaleX(1)}
.blog-manual{display:flex;align-items:center;gap:9px}.blog-manual button{border:1px solid #9d89fc50;border-radius:50%;width:44px;height:44px;background:none;color:#c8ddf1;font:16px 'DM Sans';cursor:pointer;transition:background .2s}.blog-manual button:hover{background:#9d89fc20}.blog-manual .blog-pause{font-size:12px;margin-left:8px}.blog-counter{font-size:9px;letter-spacing:1.5px;color:#93abc1;margin-right:15px}.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}
@media(max-width:900px){.blog-feature-copy{padding:28px}.blog-feature h3{font-size:33px}.blog-feature-foot{flex-wrap:wrap;gap:15px}.blog-meta{flex-wrap:wrap;gap:5px}}
@media(max-width:600px){
 .work.blog-carousel-section{padding:45px 7vw 105px}.blog-carousel-section .section-title{gap:15px;margin-bottom:25px}.blog-carousel-section .section-title h2{font-size:11vw}.blog-carousel-section .section-title>a{font-size:9px;white-space:nowrap;max-width:none}
 .blog-carousel{--blog-height:570px}.blog-feature{grid-template-columns:1fr;min-height:0;border-radius:10px}.blog-feature-copy{grid-row:2;padding:24px}.blog-visual{grid-row:1;height:245px;border-left:0;border-bottom:1px solid #9d89fc20}.blog-visual svg{max-width:340px}.blog-visual-caption{font-size:6px;bottom:13px;left:18px;letter-spacing:1.2px}.blog-feature h3{font-size:29px;margin:17px 0 13px}.blog-feature-copy>p{font-size:12px;line-height:1.7}.blog-meta{flex-direction:row;font-size:7px;letter-spacing:.7px}.blog-meta time{font-size:8px}.blog-feature-foot{margin-top:22px;font-size:7px;gap:12px}.blog-read{font-size:9px;gap:10px}.blog-read b{width:30px;height:30px}
 .blog-carousel-controls{gap:20px;margin-top:20px}.blog-pagination{gap:12px;max-width:130px}.blog-dot{font-size:8px}.blog-counter{display:none}.blog-manual{gap:7px}.blog-manual .blog-pause{margin-left:0}.blog-manual button{width:40px;height:40px;min-width:40px;font-size:14px}
}
@media(prefers-reduced-motion:reduce){.blog-slides,.blog-slide,.blog-visual svg,.blog-art-core,.blog-art-satellites,.blog-art-orbit,.blog-read b{transition:none!important;transform:none!important}}

/* A complete screen for the editorial chapter. */
.work.blog-carousel-section{min-height:100svh;min-height:100dvh;display:flex;flex-direction:column;justify-content:center;padding-top:40px;padding-bottom:32px;scroll-margin-top:-90px}
.blog-carousel-section .section-title{margin-bottom:24px}
.blog-carousel-section .section-title h2{font-size:clamp(36px,4vw,64px);margin:12px 0 0}
.blog-carousel-section .section-title h2 br{display:none}
.blog-feature{height:clamp(340px,52svh,560px);min-height:0}
.blog-visual svg{max-height:100%;min-height:0}
.blog-carousel-controls{margin-top:20px}
@media(max-width:600px){
 .work.blog-carousel-section{padding-top:32px;padding-bottom:calc(96px + env(safe-area-inset-bottom,0px))}
 .blog-carousel-section .section-title h2{font-size:11vw}
 .blog-carousel-section .section-title h2 br{display:block}
 .blog-feature{height:auto}
 .blog-visual{height:220px}
}
@media(min-width:601px){
 .blog-feature{height:clamp(380px,52svh,560px)}
 .blog-feature-copy{padding:26px}
 .blog-feature h3{font-size:clamp(28px,2.8vw,42px);margin:18px 0 14px}
 .blog-feature-copy>p{font-size:13px;line-height:1.7}
 .blog-feature-foot{margin-top:20px}
}

/* All slides share one grid track: the tallest article sets a stable height. */
.blog-slides{display:grid;height:clamp(380px,52svh,560px);transition:none}
.blog-slide{position:relative;inset:auto;grid-area:1 / 1;align-self:stretch;min-width:0}
.blog-slide .blog-feature{height:100%;min-height:0}
.blog-carousel-controls{display:block;margin-top:24px}
.blog-pagination{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:24px;max-width:none;width:100%}
.blog-dot{display:flex;flex-direction:column;gap:11px;justify-content:flex-start;min-height:94px;padding:17px 0 0;line-height:1.4}
.blog-dot small{font-size:8px;letter-spacing:.7px;color:#93abc1}
.blog-dot .blog-index-title{font-size:13px;line-height:1.5;color:#93abc1;text-transform:none;max-width:290px}
.blog-dot.is-active .blog-index-title{color:white}
@media(max-width:600px){
 .blog-slides{height:auto}
 .blog-slide .blog-feature{grid-template-rows:220px 1fr}
 .blog-pagination{gap:13px}
 .blog-dot{gap:8px;padding-top:13px;min-height:125px}
 .blog-dot small{font-size:6px;letter-spacing:0}
 .blog-dot .blog-index-title{font-size:10px;line-height:1.5}
}

/* Mobile editorial card: artwork + complete title; avoid repeating the excerpt. */
.blog-index-short{display:none}
@media(max-width:600px){
 .work.blog-carousel-section{padding:24px 7vw calc(90px + env(safe-area-inset-bottom,0px));justify-content:center}
 .blog-carousel-section .section-title{margin-bottom:18px;align-items:end}
 .blog-carousel-section .section-title .eyebrow{font-size:6px;letter-spacing:1px}
 .blog-carousel-section .section-title h2{font-size:clamp(29px,8.2vw,36px);margin-top:10px;line-height:1.08}
 .blog-carousel-section .section-title>a{font-size:8px}
 .blog-slides{height:clamp(300px,calc(100dvh - 325px),430px)}
 .blog-slide .blog-feature{height:100%;grid-template-rows:clamp(120px,22dvh,180px) minmax(0,1fr)}
 .blog-visual{height:100%;min-height:0}
 .blog-visual svg{max-width:260px;width:100%;height:100%}
 .blog-visual-caption{display:none}
 .blog-feature-copy{padding:15px 17px;justify-content:space-between}
 .blog-meta{font-size:6px;letter-spacing:.4px;gap:7px;flex-wrap:nowrap}
 .blog-meta time{font-size:7px}
 .blog-feature h3{font-size:clamp(22px,6.2vw,26px);line-height:1.1;margin:10px 0;max-width:100%}
 .blog-feature-copy>p{display:none}
 .blog-feature-foot{margin-top:7px;gap:8px;flex-wrap:nowrap;font-size:6px;letter-spacing:.4px}
 .blog-read{font-size:9px;gap:8px}.blog-read b{width:27px;height:27px;font-size:17px}
 .blog-carousel-controls{margin-top:16px}
 .blog-pagination{gap:14px}
 .blog-dot{gap:6px;min-height:68px;padding:11px 0 0}
 .blog-dot small{font-size:0;line-height:1}
 .blog-dot small:after{content:attr(data-number);font-size:8px}
 .blog-dot .blog-index-title{display:none}
 .blog-index-short{display:block;font-size:10px;line-height:1.4;color:#93abc1}
 .blog-dot.is-active .blog-index-short{color:white}
}
@media(max-width:600px) and (max-height:620px){
 .work.blog-carousel-section{padding-top:18px;padding-bottom:calc(86px + env(safe-area-inset-bottom,0px))}
 .blog-carousel-section .section-title{margin-bottom:14px}
 .blog-carousel-section .section-title h2{font-size:27px;margin-top:7px}
 .blog-carousel-section .section-title .eyebrow{font-size:5px;letter-spacing:.5px}
 .blog-feature-copy{padding:12px 14px}
 .blog-feature h3{font-size:22px;margin:7px 0}
 .blog-carousel-controls{margin-top:12px}
 .blog-dot{min-height:62px}
}
@media(max-width:600px){.blog-slides{height:clamp(290px,calc(100dvh - 325px - env(safe-area-inset-bottom,0px)),430px)}}
@media(max-width:600px) and (max-height:620px){.blog-slides{height:290px}}
