.mc-carousel{
 --mc-brand:#064b73;--mc-brand-dark:#003f63;--mc-gap:24px;
 position:relative;width:100%;max-width:1500px;margin:32px auto;padding:22px 58px 18px;
 box-sizing:border-box;overflow:visible;background:transparent
}
.mc-viewport{width:100%;overflow-x:clip;overflow-y:visible;padding:52px 0 68px;box-sizing:border-box}
.mc-track{display:flex;align-items:center;gap:var(--mc-gap);width:max-content;will-change:transform;transform:translateX(0);transition:transform .65s cubic-bezier(.22,.7,.25,1)}
.mc-card{
 width:clamp(170px,21vw,285px);flex:0 0 auto;text-align:center;box-sizing:border-box;
 opacity:.68;transform:scale(.82);transform-origin:center center;
 transition:transform .65s ease,opacity .65s ease,filter .65s ease;
 filter:saturate(.82)
}
.mc-card.mc-active{opacity:1;transform:scale(1.12);filter:none;z-index:1}
.mc-cover-link{
 height:var(--mc-cover-height);display:flex;align-items:center;justify-content:center;
 background:#fff;border:1px solid rgba(6,75,115,.13);border-radius:9px;
 overflow:hidden;padding:9px;box-sizing:border-box;
 box-shadow:0 5px 20px rgba(0,45,70,.09);transition:box-shadow .4s ease,border-color .4s ease
}
.mc-card.mc-active .mc-cover-link{border:2px solid var(--mc-brand);box-shadow:0 13px 32px rgba(0,63,99,.2)}
.mc-cover{display:block;width:100%;height:100%;object-fit:contain;object-position:center;filter:none}
.mc-no-cover{color:#667085;font-size:13px}
.mc-meta{padding:12px 5px 4px;color:#172b3a}
.mc-meta h3{font-family:Lora,Georgia,serif;font-size:15px;line-height:1.35;margin:0 0 5px;font-weight:600}
.mc-card.mc-active .mc-meta h3{color:var(--mc-brand-dark);font-size:16px}
.mc-meta span,.mc-meta time{display:block;font-size:12px;color:#657786;margin-top:3px}
.mc-arrow{
 position:absolute;top:43%;z-index:5;width:43px;height:54px;border:2px solid var(--mc-brand);
 background:var(--mc-brand);color:#fff;font-size:34px;line-height:1;cursor:pointer;
 border-radius:7px;display:flex;align-items:center;justify-content:center;
 box-shadow:0 4px 12px rgba(0,63,99,.18);transition:background .2s,color .2s,transform .2s
}
.mc-arrow:hover,.mc-arrow:focus{background:#fff;color:var(--mc-brand);transform:scale(1.06)}
.mc-prev{left:5px}.mc-next{right:5px}
.mc-empty{color:#657786;text-align:center}
@media(max-width:900px){
 .mc-carousel{--mc-gap:18px;padding:16px 48px}
 .mc-card{width:clamp(155px,30vw,245px)}
 .mc-cover-link{height:min(var(--mc-cover-height),360px)}
 .mc-card.mc-active{transform:scale(1.08)}
}
@media(max-width:600px){
 .mc-carousel{--mc-gap:12px;padding:12px 36px}
 .mc-viewport{padding:42px 0 55px}
 .mc-card{width:72vw;max-width:270px;min-width:150px;transform:scale(.82)}
 .mc-card.mc-active{transform:scale(1.04)}
 .mc-cover-link{height:min(var(--mc-cover-height),390px);padding:6px}
 .mc-meta h3{font-size:14px}
 .mc-card.mc-active .mc-meta h3{font-size:15px}
 .mc-arrow{width:31px;height:43px;font-size:26px;top:42%}
 .mc-prev{left:1px}.mc-next{right:1px}
}
@media(prefers-reduced-motion:reduce){.mc-track,.mc-card,.mc-arrow{transition:none!important}}

/* Keep the enlarged centre cover and its title fully inside the carousel viewport. */
.mc-carousel,.mc-carousel *{box-sizing:border-box}
.mc-carousel{isolation:isolate}
.mc-viewport{position:relative}
.mc-card{position:relative}
.mc-card.mc-active{z-index:3}
.mc-cover-link{flex-shrink:0}
.mc-cover{object-fit:contain!important;max-width:100%;max-height:100%}
