/* Source Button / next-image fill replacements, private to these editorial views. */
.ep-page iframe.cms-video{display:block;width:100%;height:auto;aspect-ratio:16/9;border:0;margin-block:1.5rem}
.ep-page .ep-button{display:inline-flex;align-items:center;justify-content:center;white-space:nowrap;min-height:40px;padding-inline:20px;font-size:14px;line-height:20px;font-weight:500;border:1px solid transparent;transition:background-color .15s,color .15s,border-color .15s}
/* Blog back link: the ghost box keeps min-height 40px, but its 20px inline padding put the arrow 13px right of the breadcrumb/cover edge; 8px padding + -9px margin puts the arrow on the content edge (deliberate divergence from Source -ml-2/px-5). */
.ep-page .ep-button.ep-back{padding-inline:8px;margin-left:-9px}
.ep-page .ep-button svg{width:16px;height:16px;flex-shrink:0;pointer-events:none}
.ep-page .ep-button:focus-visible{outline:none;box-shadow:0 0 0 1px hsl(var(--ring))}
.ep-page .ep-button.ep-outline{border-color:hsl(var(--border));background:transparent}
.ep-page .ep-button.ep-outline:hover{border-color:hsl(var(--foreground))}
.ep-page .ep-button.ep-primary{border-color:hsl(var(--primary));background:hsl(var(--primary));color:hsl(var(--primary-foreground))}
.ep-page .ep-button.ep-primary:hover{background:hsl(var(--primary)/.9)}
.ep-page .ep-fill-image{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;color:transparent}
@media(prefers-reduced-motion:reduce){.ep-page .ep-button{transition:none}}