.drr{--drr-accent:#b87d51;--drr-ink:#242424;--drr-muted:#777;--drr-line:#ece6e1;--drr-bg:#fff;--drr-soft:#f8f3ef;--drr-gap:20px;--drr-cols:4;
  font-family:inherit;color:var(--drr-ink);width:100%;max-width:100%;overflow:hidden}
.drr *,.drr *::before,.drr *::after{box-sizing:border-box}
.drr-head{text-align:center;margin:0 0 28px}
.drr-title{margin:0 0 6px}
.drr-sub{margin:0;color:var(--drr-muted)}

.drr-wrap{position:relative}
.drr-track{display:flex;gap:var(--drr-gap);overflow-x:auto;overflow-y:hidden;scroll-snap-type:x mandatory;scroll-behavior:smooth;
  -webkit-overflow-scrolling:touch;overscroll-behavior-x:contain;scrollbar-width:none;padding:6px 2px 18px;outline:none}
.drr-track::-webkit-scrollbar{display:none}
.drr-track.is-dragging{scroll-snap-type:none;scroll-behavior:auto;cursor:grabbing}
.drr-track.is-dragging *{pointer-events:none}

.drr-card{flex:0 0 calc((100% - (var(--drr-cols) - 1) * var(--drr-gap)) / var(--drr-cols));scroll-snap-align:start;
  display:flex;flex-direction:column;background:var(--drr-bg);border:1px solid var(--drr-line);border-radius:16px;overflow:hidden;
  box-shadow:0 4px 18px rgba(36,36,36,.06);transition:transform .25s ease,box-shadow .25s ease}
@media (hover:hover){.drr-card:hover{transform:translateY(-3px);box-shadow:0 10px 28px rgba(36,36,36,.10)}}

.drr-media{position:relative;display:block;width:100%;aspect-ratio:4/5;margin:0;padding:0;border:0;border-radius:0;background:var(--drr-soft);
  overflow:hidden;cursor:pointer;line-height:0;color:inherit;text-decoration:none}
.drr-media img,.drr-media video,.drr-media iframe{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;border:0;display:block}
.drr-media iframe{background:#000}
.drr-zoom img{transition:transform .5s ease}
@media (hover:hover){.drr-zoom:hover img{transform:scale(1.04)}}
.drr-vph{position:absolute;inset:0;background:linear-gradient(135deg,#d9b394,var(--drr-accent) 55%,#7a4f31)}
.drr-play{position:absolute;top:50%;left:50%;width:62px;height:62px;margin:-31px 0 0 -31px;border-radius:50%;
  background:rgba(255,255,255,.92);box-shadow:0 6px 20px rgba(0,0,0,.25);transition:transform .2s ease}
.drr-play::after{content:"";position:absolute;top:50%;left:54%;transform:translate(-50%,-50%);border-style:solid;
  border-width:11px 0 11px 18px;border-color:transparent transparent transparent var(--drr-accent)}
@media (hover:hover){.drr-video:hover .drr-play{transform:scale(1.08)}}
.drr-video.is-playing{cursor:default}
.drr-video.is-playing .drr-play{display:none}

.drr-body{position:relative;display:flex;flex-direction:column;gap:10px;padding:16px 18px 18px;flex:1}
.drr-card--text .drr-body{padding-top:26px;background:linear-gradient(180deg,var(--drr-soft),var(--drr-bg) 70%)}
.drr-quote{font-family:Georgia,serif;font-size:64px;line-height:.6;height:28px;color:var(--drr-accent);opacity:.35}
.drr-stars{color:var(--drr-accent);letter-spacing:2px;font-size:15px;line-height:1}
.drr-stars span{color:#ddd}
.drr-text{margin:0;font-size:14px;line-height:1.65;color:#555;display:-webkit-box;-webkit-line-clamp:4;-webkit-box-orient:vertical;overflow:hidden}
.drr-card--text .drr-text{-webkit-line-clamp:9;font-size:15px;color:#444}
.drr-who{display:flex;align-items:center;gap:10px;margin-top:auto;padding-top:4px}
.drr-avatar{flex:0 0 36px;width:36px;height:36px;border-radius:50%;display:flex;align-items:center;justify-content:center;
  background:var(--drr-accent);color:#fff;font-weight:600;font-size:15px;text-transform:uppercase}
.drr-name{display:block;font-size:14px;font-weight:600;color:var(--drr-ink);line-height:1.3}
.drr-meta{display:block;font-size:12px;color:var(--drr-muted);line-height:1.3}
.drr-src{margin-inline-start:auto;color:var(--drr-accent);text-decoration:none;font-size:18px}

.drr-nav{position:absolute;top:calc(50% - 9px);z-index:2;width:44px;height:44px;margin-top:-22px;padding:0;border-radius:50%;
  border:1px solid var(--drr-line);background:#fff;color:var(--drr-ink);cursor:pointer;display:flex;align-items:center;justify-content:center;
  box-shadow:0 4px 14px rgba(0,0,0,.12);transition:background .2s,color .2s,opacity .2s}
.drr-nav svg{width:20px;height:20px;fill:none;stroke:currentColor;stroke-width:2.2;stroke-linecap:round;stroke-linejoin:round}
.drr-nav:hover{background:var(--drr-accent);border-color:var(--drr-accent);color:#fff}
.drr-nav:focus-visible{outline:2px solid var(--drr-accent);outline-offset:2px}
.drr-nav[disabled]{opacity:0;pointer-events:none}
.drr-prev{left:6px}
.drr-next{right:6px}
[dir=rtl] .drr-prev{left:auto;right:6px}
[dir=rtl] .drr-next{right:auto;left:6px}
[dir=rtl] .drr-nav svg{transform:scaleX(-1)}
.drr.is-static .drr-nav{display:none}

@media (max-width:1024px){.drr{--drr-cols:3}}
@media (max-width:767px){.drr{--drr-cols:1.6;--drr-gap:14px}.drr-nav{width:38px;height:38px;margin-top:-19px}}
@media (max-width:480px){.drr{--drr-cols:1.25}.drr-nav{display:none}}

/* lightbox */
.drr-lb{position:fixed;inset:0;z-index:999999;display:flex;align-items:center;justify-content:center;padding:20px;background:rgba(15,12,10,.9);
  opacity:0;transition:opacity .2s ease}
.drr-lb.is-open{opacity:1}
.drr-lb img{max-width:100%;max-height:100%;border-radius:10px;box-shadow:0 20px 60px rgba(0,0,0,.5)}
.drr-lb-close{position:absolute;top:14px;right:14px;width:44px;height:44px;border:0;border-radius:50%;background:rgba(255,255,255,.15);
  color:#fff;font-size:26px;line-height:44px;cursor:pointer;padding:0}
.drr-lb-close:hover{background:rgba(255,255,255,.3)}
.drr.is-static .drr-track{justify-content:center}
.drr-youtube img{transform:scale(1.36)}
