/* Multi-photo posts, Updated side only (see multiphoto.js) */
body[data-mk-side=updated] .mp-card .editorial-title-card{background:#111}
body[data-mk-side=updated] .mp-card .feed-media.mp-media{position:relative;inset:auto;display:block;aspect-ratio:4/3;background:#111;overflow:hidden;gap:0}
.mp-track{display:flex;width:100%;height:100%;overflow-x:auto;overflow-y:hidden;scroll-snap-type:x mandatory;overscroll-behavior-x:contain;-webkit-overflow-scrolling:touch;scrollbar-width:none;touch-action:pan-x pan-y;outline:none}
.mp-track::-webkit-scrollbar{display:none}
.mp-track:focus-visible{box-shadow:inset 0 0 0 3px var(--u-open,#1F7A4A)}
.mp-track.mp-drag{scroll-snap-type:none;cursor:grabbing}
.mp-slide{flex:0 0 100%;width:100%;height:100%;scroll-snap-align:center;scroll-snap-stop:always;display:block;position:relative;overflow:hidden;-webkit-user-drag:none;user-select:none}
.mp-slide img{width:100%;height:100%;object-fit:cover;display:block;pointer-events:none}
/* the title overlay never blocks the swipe */
.mp-card .editorial-title-card-fade,.mp-card .editorial-title-card-title{pointer-events:none}
.mp-card .editorial-title-card-title,.mp-card .editorial-title-card-fade{will-change:opacity,transform}
/* B: fades while swiping, back when it settles */
.mp-B .editorial-title-card-title,.mp-B .editorial-title-card-fade{transition:opacity .32s cubic-bezier(.2,.7,.2,1) .06s}
.mp-B .mp-moving .editorial-title-card-title{opacity:0;transition:opacity .14s ease-out}
.mp-B .mp-moving .editorial-title-card-fade{opacity:.35;transition:opacity .14s ease-out}
/* C: slides down out of the way */
.mp-C .editorial-title-card-title{transition:transform .38s cubic-bezier(.2,.8,.2,1) .06s,opacity .3s ease .06s}
.mp-C .editorial-title-card-fade{transition:opacity .3s ease .06s}
.mp-C .mp-moving .editorial-title-card-title{transform:translateY(calc(100% + 18px));opacity:0;transition:transform .2s cubic-bezier(.4,0,1,1),opacity .16s ease-in}
.mp-C .mp-moving .editorial-title-card-fade{opacity:.35;transition:opacity .16s ease-in}
/* dots: small, quiet, active = coral (Marla logo colour) */
.mp-dots{display:flex;justify-content:center;align-items:center;gap:6px;height:20px;pointer-events:none}
.mp-dots i{width:6px;height:6px;border-radius:50%;background:color-mix(in srgb,var(--u-ink,#1D211F) 26%,transparent);transition:background-color .2s ease,transform .2s ease}
.mp-dots i.on{background:#D93350;transform:scale(1.17)}
.mp-card .mp-dots+.feed-structured-summary{padding-top:2px}
.mp-dots.mp-dark{height:24px}
.mp-dots.mp-dark i{background:rgba(255,255,255,.42)}
.mp-dots.mp-dark i.on{background:#D93350}
.mp-sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
@media (prefers-reduced-motion:reduce){
  .mp-card .editorial-title-card-title,.mp-card .editorial-title-card-fade,.mp-dots i{transition:none!important}
  .mp-card .mp-moving .editorial-title-card-title{opacity:1!important;transform:none!important}
  .mp-card .mp-moving .editorial-title-card-fade{opacity:1!important}
}
/* Council 14 (5): at most 5 dots; the end dots shrink when there are more beyond them */
.mp-dots i.mp-out{display:none}
.mp-dots i.mp-edge{transform:scale(.6)}