/* Identical filled 16:9 frames: three across on phones and five on desktop. */
#opening.ribbon-opening{height:auto;min-height:0;padding:111px var(--gutter) 30px;overflow:visible}
.ribbon-viewport{--ribbon-gap:8px;--ribbon-view-width:min(calc(100vw - var(--gutter) - var(--gutter)),1760px);--ribbon-cell-width:calc((var(--ribbon-view-width) - 4 * var(--ribbon-gap)) / 5);--ribbon-height:calc(var(--ribbon-cell-width) * 9 / 16);width:100%;max-width:1760px;margin-inline:auto;overflow-x:auto;overflow-y:hidden;scrollbar-width:none;overscroll-behavior-x:contain;touch-action:pan-x pan-y pinch-zoom;direction:ltr;cursor:grab;user-select:none;-webkit-user-select:none;-webkit-touch-callout:none}
.ribbon-viewport::-webkit-scrollbar{display:none}
.ribbon-viewport.is-dragging{cursor:grabbing}
.ribbon-track{display:flex;align-items:center;width:max-content}
.ribbon-period{display:flex;align-items:center;gap:var(--ribbon-gap);width:max-content;height:calc(var(--ribbon-cell-width) * 9 / 16);padding-right:var(--ribbon-gap)}
.ribbon-cell{position:relative;display:block;flex:0 0 var(--ribbon-cell-width);width:var(--ribbon-cell-width);height:100%;aspect-ratio:16/9;overflow:hidden;background:#000;border:0;padding:0;line-height:0;box-shadow:none;border-radius:var(--film-corner,8px);color:inherit;text-decoration:none}
.ribbon-cell video,.ribbon-thumbnail,.ribbon-placeholder,.ribbon-frame{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:center;display:block;pointer-events:none}
/* A one-pixel image bleed closes fractional-pixel seams at the rounded edges. */
.ribbon-cell>.ribbon-thumbnail,.ribbon-cell>.ribbon-placeholder,.ribbon-cell>.ribbon-frame{inset:-1px;width:calc(100% + 2px);height:calc(100% + 2px);object-fit:cover;border:0;outline:0;box-shadow:none}
.ribbon-cell video{z-index:0}
.ribbon-thumbnail{z-index:1;opacity:1}
.ribbon-placeholder{z-index:2;opacity:1}
.ribbon-frame{z-index:3}
.ribbon-frame[hidden]{display:none}
.ribbon-position{position:relative;width:min(320px,48%);height:28px;margin:18px auto 0;color:var(--ink);cursor:ew-resize;touch-action:none;direction:ltr}
.ribbon-position:before{content:"";position:absolute;inset:calc(50% - .5px) 0 auto;height:1px;background:currentColor;opacity:.17;border-radius:1px;pointer-events:none}
.ribbon-position-thumb{position:absolute;left:0;top:calc(50% - 1px);width:7%;min-width:18px;height:2px;border-radius:2px;background:currentColor;opacity:.72;pointer-events:none}
.ribbon-viewport:focus,.ribbon-position:focus{outline:none}
html[data-input-mode=keyboard] .ribbon-viewport:focus-visible,html[data-input-mode=keyboard] .ribbon-position:focus-visible{outline:1px solid var(--ink);outline-offset:5px;border-radius:3px}
@media(max-width:760px){#opening.ribbon-opening{padding:92px 16px 22px}.ribbon-viewport{--ribbon-gap:4px;--ribbon-view-width:calc(100vw - 32px);--ribbon-cell-width:calc((var(--ribbon-view-width) - 2 * var(--ribbon-gap)) / 3)}.ribbon-cell{border-radius:4px}.ribbon-position{margin-top:10px;width:48%}}