/* SWD Showreel — the reel in a rounded card frame with a sound toggle. */
.swd.swd-reel { padding: 40px 0 0; }
.swd-reel .reel { margin-top: 0; padding: 20px; border-radius: var(--r-xl); background: var(--card); box-shadow: inset 0 0 0 1px var(--edge); }
.swd-reel .reel__in { position: relative; border-radius: 24px; overflow: hidden; background: var(--bg); }
.swd-reel .reel__video { display: block; width: 100%; height: auto; aspect-ratio: 16 / 9; object-fit: cover; }
.swd-reel .reel__sound { position: absolute; left: 20px; bottom: 20px; display: inline-flex; align-items: center; gap: 8px; height: 44px; padding: 0 16px; border: 0; border-radius: 12px; background: rgba(20, 26, 44, .72); color: #fff; font-family: var(--f); font-size: 15px; font-weight: 500; line-height: 1; text-transform: none; cursor: pointer; backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); transition: background .2s; }
.swd-reel .reel__sound:hover, .swd-reel .reel__sound:focus { background: rgba(20, 26, 44, .9); color: #fff; }
.swd-reel .reel__sound svg { width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.swd-reel .reel__sound .on { display: none; }
.swd-reel .reel__sound[aria-pressed="true"] .on { display: inline; }
.swd-reel .reel__sound[aria-pressed="true"] .off { display: none; }

@media (max-width: 980px) {
	.swd.swd-reel { padding-top: 120px; }
	.swd-reel .reel { margin-top: 70px; padding: 10px; border-radius: 26px; }
	.swd-reel .reel__in { border-radius: 18px; }
}
@media (max-width: 640px) {
	.swd-reel .reel__sound { left: auto; right: 10px; bottom: 10px; width: 36px; height: 36px; padding: 0; justify-content: center; border-radius: 10px; }
	.swd-reel .reel__sound span { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
}