/* Home reel, "Behind it" (MKT-0018, released as MKT-0020). Uses the tokens in ayo.css. */
.rb-screen .rcut{position:absolute;inset:0;margin:0;visibility:hidden}
.rb-screen .rcut.on{visibility:visible;z-index:2}
.rb-screen .rcut.out{visibility:visible;z-index:1}
.rb-screen .rcut img{width:100%;height:100%;object-fit:cover;display:block}
.rb-screen .rcut.on img{animation:push 2.2s linear both}
.rb-sr{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}
.rb-behind{position:absolute;inset:0;z-index:3;background:var(--dark);-webkit-mask-repeat:no-repeat;mask-repeat:no-repeat;-webkit-mask-size:0 0;mask-size:0 0}
.rb-behind > *{position:absolute;left:0;top:0;display:block;object-fit:cover;opacity:0}
.rb-behind > .on{opacity:1}
/* all text on the reel sits on one paper label, bottom left: same place, same size, readable on every picture */
.rb-meta{position:absolute;z-index:5;left:clamp(12px,2.4vw,32px);bottom:clamp(12px,2.4vw,30px);width:min(calc(100% - 24px),30rem);
  background:rgba(247,244,238,.95);padding:12px 16px 14px;border-radius:2px;display:grid;gap:4px}
.rb-meta p{margin:0}
.rb-count{font-size:12px;font-weight:600;letter-spacing:.08em;color:var(--ink-60);font-variant-numeric:tabular-nums}
.rb-front{font-size:15px;font-weight:600;line-height:1.35;color:var(--dark)}
.rb-line{font-size:14px;line-height:1.4;color:var(--ink);min-height:2.8em}
.rb-line small{display:block;font-size:11px;font-weight:600;letter-spacing:.12em;text-transform:uppercase;color:var(--dark);margin-bottom:1px}
@media (prefers-reduced-motion:reduce){.rb-screen .rcut.on img{animation:none}}