/* Maker reels (26 Sep 2026): our own player + A (row on the maker page), B (gift pop-up hero), C (Journal). Loaded after kit-anya.css. */
.rl-pl{--rl-ink:#17181A;position:relative;overflow:hidden;background:#141416;border-radius:inherit;isolation:isolate}
.rl-pl video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;display:block;cursor:pointer;background:#141416}
.rl-pl .rl-ctl{position:absolute;right:10px;bottom:10px;z-index:2;display:flex;gap:6px}
.rl-pl .rl-b{width:36px;height:36px;border-radius:50%;border:0;padding:0;display:grid;place-items:center;background:rgba(23,24,26,.62);color:#fff;cursor:pointer;backdrop-filter:blur(6px);-webkit-backdrop-filter:blur(6px);transition:background .15s}
.rl-pl .rl-b:hover{background:rgba(23,24,26,.82)}
.rl-pl .rl-b svg{width:18px;height:18px}
.rl-pl .rl-big{position:absolute;left:50%;top:50%;z-index:2;width:64px;height:64px;margin:-32px 0 0 -32px;border-radius:50%;border:0;padding:0;background:rgba(255,255,255,.94);color:var(--rl-ink);display:none;place-items:center;cursor:pointer;box-shadow:0 10px 30px -10px rgba(0,0,0,.5)}
.rl-pl .rl-big svg{width:28px;height:28px;margin-left:3px}
.rl-pl.is-paused .rl-big{display:grid}
.rl-pl .rl-via{position:absolute;left:10px;bottom:10px;z-index:2;max-width:calc(100% - 110px);overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font:600 12px/1 var(--sans);color:#fff;text-decoration:none;background:rgba(23,24,26,.55);padding:8px 10px;border-radius:999px;backdrop-filter:blur(6px);-webkit-backdrop-filter:blur(6px)}
.rl-pl .rl-via:hover{background:rgba(23,24,26,.8)}
.rl-pl :is(.rl-b,.rl-big,.rl-via):focus-visible{outline:2px solid #E294A0;outline-offset:2px}

/* A · the row under the maker's header */
.rl-row{max-width:var(--maxw,1280px);margin:0 auto;padding:22px 26px 4px;display:grid;gap:10px}
.rl-row-h{display:flex;align-items:baseline;gap:10px;flex-wrap:wrap}
.rl-row-h b{font:700 18px/1.2 var(--sans);letter-spacing:-.01em;color:#17181A}
.rl-row-h small{font-size:13px;color:#6B6E70}
.rl-strip{display:flex;gap:10px;overflow-x:auto;scroll-snap-type:x mandatory;scrollbar-width:none;padding:2px 2px 6px;margin:0 -2px}
.rl-strip::-webkit-scrollbar{display:none}
.rl-tile{flex:0 0 148px;aspect-ratio:9/16;position:relative;border:0;padding:0;border-radius:14px;overflow:hidden;background:#222;cursor:pointer;scroll-snap-align:start;font:inherit;text-align:left;color:#fff}
.rl-tile .ph,.rl-jt .ph{display:block;background:#2a2a2d center/cover no-repeat}
.rl-tile .ph{position:absolute;inset:0}
.rl-tile .ph video,.rl-jt .ph video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.rl-tile::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(0,0,0,0) 50%,rgba(0,0,0,.62));pointer-events:none}
.rl-tile .pl{position:absolute;left:10px;bottom:10px;z-index:1;width:32px;height:32px;border-radius:50%;background:rgba(255,255,255,.94);color:#17181A;display:grid;place-items:center;transition:transform .15s}
.rl-tile .pl svg{width:15px;height:15px;margin-left:2px}
.rl-tile .cap{position:absolute;left:50px;right:8px;bottom:10px;z-index:1;font:600 12px/1.25 var(--sans);display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;text-shadow:0 1px 6px rgba(0,0,0,.4)}
.rl-tile:hover .pl,.rl-tile.hv .pl{transform:scale(1.08)}
.rl-tile:focus-visible{outline:2px solid #AE4453;outline-offset:2px}
@media (min-width:861px){.rl-tile{flex-basis:156px}}
@media (max-width:860px){.rl-row{padding:16px 16px 2px}}

/* the sheet: one reel, its caption and the gift it shows */
.rl-sheet{position:fixed;inset:0;z-index:1330;background:rgba(23,24,26,.62);display:grid;place-items:center;padding:3vh 16px;animation:rlFade .2s ease}
.rl-sh{width:min(420px,100%);max-height:94vh;overflow-y:auto;background:#fff;color:#17181A;border-radius:22px;padding:12px 14px 16px;display:grid;gap:10px;box-shadow:0 40px 90px -30px rgba(0,0,0,.6);animation:rlUp .24s ease}
.rl-sh-h{display:flex;justify-content:space-between;align-items:center;gap:10px}
.rl-sh-h>span:first-child{display:grid;gap:2px;min-width:0}
.rl-sh-h b{font:700 16px/1.2 var(--sans)}.rl-sh-h small{font-size:12.5px;color:#6B6E70}
.rl-sh-nav{display:flex;gap:6px}
.rl-r{width:34px;height:34px;border-radius:50%;border:0;background:#F5F5F3;color:#17181A;font:600 17px/1 var(--sans);cursor:pointer;display:grid;place-items:center}
.rl-r:hover{background:#EBEBE9}.rl-r[disabled]{opacity:.35;cursor:default}
.rl-sh-v .rl-pl{aspect-ratio:9/16;height:min(64vh,640px);max-width:100%;margin:0 auto;border-radius:14px}
.rl-sh-cap{margin:0;font-size:15px;line-height:1.45}
.rl-gift{display:flex;align-items:center;justify-content:space-between;gap:12px;width:100%;border:0;border-radius:14px;background:#17181A;color:#fff;padding:10px 10px 10px 14px;cursor:pointer;text-align:left;font:inherit}
.rl-gift span{display:grid;gap:2px;min-width:0}
.rl-gift small{font-size:11.5px;opacity:.72;letter-spacing:.06em;text-transform:uppercase}
.rl-gift b{font:600 14.5px/1.25 var(--sans);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.rl-gift em{font-style:normal;flex:none;background:#E294A0;color:#17181A;border-radius:999px;padding:10px 14px;font:700 14px/1 var(--sans);white-space:nowrap}
.rl-gift:hover em{background:#D67F8E}
@media (max-width:600px){
  .rl-sheet{place-items:end stretch;padding:0}
  .rl-sh{width:100%;max-height:96dvh;border-radius:22px 22px 0 0;padding:10px 14px calc(16px + env(safe-area-inset-bottom,0px));animation:rlUp .26s ease}
  .rl-sh-v .rl-pl{height:min(62dvh,560px)}
}
@keyframes rlFade{from{opacity:0}to{opacity:1}}
@keyframes rlUp{from{transform:translateY(30px);opacity:.4}to{transform:none;opacity:1}}

/* B · the gift pop-up: the reel is the first slide */
.xd-sl.xd-rl{position:relative;background:#141416}
.xd-rl .rl-pl{position:absolute;inset:0}
.xd-rl .rl-pl .rl-via{top:12px;bottom:auto}   /* the photo counter sits bottom-left, the wish heart top-right */
.xd-thumbs .rl-th{position:relative;display:grid;place-items:center;color:#fff}
.xd-thumbs .rl-th::before{content:"";position:absolute;inset:0;background:rgba(0,0,0,.28);border-radius:8px}
.xd-thumbs .rl-th svg{position:relative;width:20px;height:20px}

/* C · the Journal: "A minute in the workshop" */
.rl-jgrid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:16px}
.rl-jt{display:grid;gap:8px;text-decoration:none;color:inherit}
.rl-jt .ph{position:relative;aspect-ratio:4/5;border-radius:4px;overflow:hidden}
.rl-jt .pl{position:absolute;left:12px;bottom:12px;z-index:1;width:40px;height:40px;border-radius:50%;background:rgba(255,255,255,.94);color:#17181A;display:grid;place-items:center}
.rl-jt .pl svg{width:17px;height:17px;margin-left:2px}
.rl-jt b{font-size:17px;font-weight:600;line-height:1.25}
.rl-jt small{font-size:14px;line-height:1.4;color:var(--jmut,#5E5E5A);display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.rl-jt:hover b{text-decoration:underline;text-decoration-thickness:1px;text-underline-offset:4px}
@media (max-width:860px){.rl-jgrid{grid-template-columns:repeat(2,minmax(0,1fr));gap:12px}.rl-jt b{font-size:15px}.rl-jt small{font-size:13px}}
.rl-art-in{display:grid;grid-template-columns:minmax(0,420px) minmax(0,1fr);gap:40px;align-items:start}
.rl-art-v .rl-pl{aspect-ratio:9/16;max-height:78vh;border-radius:14px;margin:0 auto}
.rl-art-side{display:grid;gap:18px;align-content:start;font-size:19px;line-height:1.65;color:#2A2B2D;max-width:560px}
.rl-art-side p{margin:0}
.rl-art-mk{color:var(--jwine,#AE4453);font:600 16px var(--sans);text-decoration:none}
.rl-art-mk:hover{text-decoration:underline}
@media (max-width:760px){.rl-art-in{grid-template-columns:minmax(0,1fr);gap:22px}.rl-art-v .rl-pl{max-height:70dvh}.rl-art-side{font-size:17px}}

@media (prefers-reduced-motion:reduce){.rl-sheet,.rl-sh{animation:none}.rl-tile .pl{transition:none}}
