/* Reels wall — tiles first, Instagram's player only on tap. */
.rs-reels{
	--rl-red:var(--rac-red,#EC272E);--rl-ink:var(--rac-ink,#141218);
	--rl-acc:var(--accent,"Unbounded","Poppins",sans-serif);--rl-sans:var(--sans,"Poppins",system-ui,sans-serif);
	display:grid;grid-template-columns:repeat(auto-fill,minmax(190px,1fr));gap:14px;margin:18px 0 0
}
.rs-reel{position:relative;display:block;width:100%;aspect-ratio:9/16;border:0;padding:0;margin:0;border-radius:16px;overflow:hidden;
	background:#1b1622;cursor:pointer;text-align:left;color:#fff;-webkit-tap-highlight-color:transparent}
.rs-reel img,.rs-reel-blank{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;display:block;transition:transform .35s,opacity .3s;opacity:.94}
.rs-reel-blank{background:conic-gradient(from 200deg,#4F2780,#EC272E,#FF7700,#FFE600,#056A38,#1E378F,#FF00AB,#4F2780)}
.rs-reel:hover img{transform:scale(1.04);opacity:1}
.rs-reel:focus-visible{outline:3px solid var(--rac-yellow,#FFE600);outline-offset:3px}
.rs-reel-play{position:absolute;left:50%;top:44%;width:58px;height:58px;margin:-29px 0 0 -29px;border-radius:50%;background:var(--rl-red);box-shadow:0 8px 22px rgba(0,0,0,.45);transition:transform .2s}
.rs-reel-play::after{content:"";position:absolute;left:23px;top:18px;border-left:17px solid #fff;border-top:11px solid transparent;border-bottom:11px solid transparent}
.rs-reel:hover .rs-reel-play{transform:scale(1.08)}
.rs-reel-t{position:absolute;left:0;right:0;bottom:0;padding:40px 14px 14px;background:linear-gradient(180deg,transparent,rgba(10,6,16,.88));display:flex;flex-direction:column;gap:3px}
.rs-reel-t b{font:700 14px/1.3 var(--rl-acc);letter-spacing:-.005em}
.rs-reel-t i{font:500 13px/1.3 var(--rl-sans);font-style:normal;opacity:.85}
.rs-reels-more{margin-top:16px}
.rs-reels-artist{margin-top:28px}
.rs-reels-artist .rs-reels{grid-template-columns:repeat(auto-fill,minmax(160px,220px))}

/* a page that is mostly video (the Watch page) uses the full wrap */
.article-body:has(.rs-reels){max-width:none!important}
.article-body:has(.rs-reels)>p,.article-body:has(.rs-reels)>h2{max-width:66ch}
.article-body .rs-reels-more a,.article-body .rs-yt-more a{text-decoration:none}

/* the YouTube and reels "more" buttons sit outside the plugin's token scope, so give them real colours */
.rs-yt-more .rs-btn.ghost,.rs-reels-more .rs-btn.ghost{display:inline-flex;align-items:center;padding:12px 22px;border-radius:999px;background:transparent;color:#4F2780!important;box-shadow:inset 0 0 0 2px #4F2780;font:700 13px/1 var(--accent,"Unbounded","Poppins",sans-serif);letter-spacing:.03em;text-decoration:none!important}
.rs-yt-more .rs-btn.ghost:hover,.rs-reels-more .rs-btn.ghost:hover{background:#4F2780;color:#fff!important}

/* the player */
.rs-reel-dlg{border:0;padding:0;background:transparent;max-width:none;max-height:none;overflow:visible}
.rs-reel-dlg::backdrop{background:rgba(10,6,16,.86)}
.rs-reel-box{position:relative;width:min(400px,92vw);height:min(760px,calc(100vh - 90px));background:#fff;border-radius:14px;overflow:hidden}
.rs-reel-box iframe{width:100%;height:100%;border:0;display:block}
.rs-reel-x{position:absolute;top:0;right:-52px;width:38px;height:38px;border-radius:50%;border:0;background:#fff;color:#141218;font:700 22px/38px system-ui;cursor:pointer}
.rs-reel-x:focus-visible{outline:3px solid var(--rac-yellow,#FFE600);outline-offset:2px}
.rs-reel-open{display:block;margin:10px auto 0;text-align:center;font:600 13px var(--sans,"Poppins",sans-serif);color:#fff!important;text-decoration:underline!important}

@media (max-width:640px){
	.rs-reels{display:flex;overflow-x:auto;scroll-snap-type:x mandatory;gap:10px;margin-left:-16px;margin-right:-16px;padding:2px 16px 8px;scrollbar-width:none}
	.rs-reels::-webkit-scrollbar{display:none}
	.rs-reel{flex:0 0 44%;scroll-snap-align:start}
	.rs-reels-artist .rs-reels{display:flex}
	.rs-reel-box{height:min(700px,calc(100vh - 150px))}
	.rs-reel-x{top:-48px;right:0}
}
@media (prefers-reduced-motion:reduce){.rs-reel img,.rs-reel-play{transition:none}.rs-reel:hover img{transform:none}}