/* ARC · home page shop reel: the video in a drawing-view frame */
.reel__head { margin-bottom: clamp(20px, 3vh, 32px); }
.rl { margin: 0; }
.rl__frame { position: relative; border: 1.5px solid var(--fg); padding: clamp(6px, 1vw, 10px); background: var(--bg); }
.rl__frame::before, .rl__frame::after {      /* corner ticks, like a detail view's frame */
  content: ""; position: absolute; width: 18px; height: 18px; border: 2px solid var(--orange); pointer-events: none;
}
.rl__frame::before { top: -6px; left: -6px; border-right: 0; border-bottom: 0; }
.rl__frame::after { bottom: -6px; right: -6px; border-left: 0; border-top: 0; }
.rl__video { display: block; width: 100%; height: auto; aspect-ratio: 16 / 9; background: #0e0e0e; }
.rl__cap { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 8px 24px; margin-top: 12px; }
.rl__chapters { list-style: none; display: flex; flex-wrap: wrap; gap: 4px 18px; margin: 0; padding: 0; color: var(--dim); }
.rl__chapters .mono { color: var(--accent, var(--orange)); margin-right: 4px; }
@media (max-width: 700px) { .rl__chapters { gap: 2px 12px; } }