/* ============ dop · Social Reels section (vanilla, portable) ============
     Desktop ≥761px : Coverflow (hover to preview)
     Mobile  ≤760px : Orbit drum (drag to spin, tap to play)
     Dependencies: none (image-slot.js optional — placeholders degrade to tinted blocks)
  ======================================================================== */
  :root{
    --paper:#F6F1E8; --paper-2:#FBF8F2; --sand:#EADFCB; --stone:#D6C7AC; --clay:#B6A584;
    --green:#15634A; --green-700:#0F4536; --signal:#1F8A63;
    --ink:#1C1A14; --ink-soft:#5C574C;
    --line:rgba(28,26,20,.13);
    --ui:"Quicksand", system-ui, sans-serif;
    --serif:"Playfair Display", Georgia, serif;
    --edit:"Cormorant Garamond", Georgia, serif;
    --rdur:6s;
  }
  *{box-sizing:border-box;}
  html,body{margin:0;}
  body{font-family:var(--ui); color:var(--ink); background:var(--paper);}
  button{font-family:inherit;}

  .dop-reels{position:relative; overflow:hidden; border-top:1px solid var(--line); padding:clamp(48px,7vw,84px) clamp(20px,5vw,88px) clamp(52px,7vw,88px);
    background:
      radial-gradient(120% 80% at 50% -12%, var(--paper-2), transparent 60%),
      linear-gradient(180deg, var(--paper) 0%, var(--paper) 72%, var(--sand) 132%);}
  .rs-inner{max-width:1120px; margin:0 auto;}

  /* head */
  .rs-head{display:flex; align-items:flex-end; justify-content:space-between; gap:40px; margin-bottom:32px;}
  .rs-eyebrow{display:inline-flex; align-items:center; gap:11px; margin:0 0 14px;
    font:600 12px/1 var(--ui); letter-spacing:.22em; text-transform:uppercase; color:var(--green);}
  .rs-eyebrow::before{content:""; width:26px; height:1.5px; background:var(--green);}
  .rs-title{margin:0; font-family:var(--serif); font-weight:500; letter-spacing:-.015em;
    font-size:clamp(32px,3.7vw,46px); line-height:1.05; max-width:18ch; text-wrap:balance;}
  .rs-title em{font-style:italic; color:var(--green);}
  .rs-head-r{display:flex; flex-direction:column; align-items:flex-end; gap:12px; text-align:right; max-width:440px; flex:0 0 auto;}
  .rs-lede{font-family:var(--edit); font-size:20px; line-height:1.45; color:var(--ink-soft); max-width:40ch; margin:0;}
  .rs-ctas{display:flex; gap:11px; flex-wrap:wrap;}
  .rs-cta{padding:13px 22px; border-radius:100px; font:700 14px/1 var(--ui); cursor:pointer; white-space:nowrap;
    display:inline-flex; align-items:center; gap:9px; transition:.16s; border:1.5px solid transparent;}
  .rs-cta-pri{background:var(--green); color:#fff;}
  .rs-cta-pri .ar{transition:transform .2s;}
  .rs-cta-pri:hover{background:var(--green-700);}
  .rs-cta-pri:hover .ar{transform:translateX(3px);}
  .rs-cta-sec{background:transparent; border-color:var(--ink); color:var(--ink);}
  .rs-cta-sec:hover{background:var(--ink); color:var(--paper);}
  @media (max-width:760px){
    .rs-head{flex-direction:column; align-items:flex-start; gap:16px; margin-bottom:8px;}
    .rs-head-r{align-items:flex-start; text-align:left;}
    .rs-lede{font-size:18px;}
    .rs-head-r .rs-ctas{display:none;} /* CTA repeats below the drum */
  }

  /* ============================ reel card ============================ */
  .reel{position:relative; overflow:hidden; cursor:pointer; background:var(--stone); border-radius:18px;
    box-shadow:0 20px 44px -26px rgba(20,18,14,.7); -webkit-tap-highlight-color:transparent; user-select:none;}
  .reel-media{position:absolute; inset:0; overflow:hidden; border-radius:inherit; background:var(--stone);
    transition:transform 1.1s cubic-bezier(.2,.6,.2,1);}
  .reel-media image-slot{position:absolute; inset:0; width:100%; height:100%;}
  .reel-tint{position:absolute; inset:0; pointer-events:none;}
  .reel-scrim{position:absolute; inset:0; pointer-events:none; z-index:2;
    background:linear-gradient(180deg, rgba(20,18,14,.30) 0%, transparent 24%, transparent 50%, rgba(20,18,14,.78) 100%);}
  .reel-prog{position:absolute; top:9px; left:11px; right:11px; height:3px; border-radius:3px; z-index:5;
    background:rgba(255,255,255,.28); overflow:hidden; opacity:0; transition:opacity .25s; pointer-events:none;}
  .reel-prog i{display:block; height:100%; width:0; background:var(--signal); border-radius:3px;}
  .reel:hover .reel-prog, .reel[data-playing] .reel-prog{opacity:1;}
  .reel:hover .reel-prog i, .reel[data-playing] .reel-prog i{animation:reelfill var(--rdur) linear forwards;}
  .reel:hover .reel-media, .reel[data-playing] .reel-media{transform:scale(1.07);}
  @keyframes reelfill{from{width:0}to{width:100%}}
  .reel-top{position:absolute; top:11px; left:11px; right:11px; display:flex; align-items:flex-start;
    justify-content:space-between; gap:8px; z-index:4; pointer-events:none;}
  .reel:hover .reel-top, .reel[data-playing] .reel-top{transform:translateY(8px); transition:transform .25s;}
  .reel-badge{display:inline-flex; align-items:center; gap:6px; padding:5px 11px 5px 9px; border-radius:100px;
    background:rgba(20,18,14,.42); border:1px solid rgba(255,255,255,.18); color:#FBF8F2;
    font:600 11px/1 var(--ui); letter-spacing:.04em; white-space:nowrap;
    backdrop-filter:blur(6px); -webkit-backdrop-filter:blur(6px);}
  .reel-badge svg{display:block;}
  .reel-dur{font:600 11px/1 var(--ui); color:#FBF8F2; background:rgba(20,18,14,.42); border:1px solid rgba(255,255,255,.16);
    padding:5px 9px; border-radius:100px; backdrop-filter:blur(6px); -webkit-backdrop-filter:blur(6px); font-variant-numeric:tabular-nums;}
  .reel-playbtn{position:absolute; inset:0; margin:auto; width:58px; height:58px; z-index:3; pointer-events:none;
    display:flex; align-items:center; justify-content:center; opacity:.95; transition:opacity .3s, transform .3s;}
  .pb-ring{width:56px; height:56px; border-radius:50%; background:rgba(20,18,14,.32); padding-left:3px;
    backdrop-filter:blur(5px); -webkit-backdrop-filter:blur(5px); border:1.5px solid rgba(255,255,255,.55);
    display:flex; align-items:center; justify-content:center;}
  .reel:hover .reel-playbtn, .reel[data-playing] .reel-playbtn{opacity:0; transform:scale(.7);}
  .reel-meta{position:absolute; left:13px; right:13px; bottom:13px; z-index:4; color:#FBF8F2; pointer-events:none;}
  .rm-place{display:flex; align-items:center; gap:5px; font:600 11.5px/1 var(--ui); letter-spacing:.04em;
    text-transform:uppercase; color:#EDE7DB; opacity:.92;}
  .rm-title{font-family:var(--serif); font-weight:600; font-size:19px; line-height:1.1; margin-top:5px;
    text-shadow:0 1px 8px rgba(20,18,14,.5);}
  .rm-stats{display:flex; align-items:center; gap:8px; margin-top:6px; font:500 12px/1 var(--ui); color:#E8E2D6;}
  .rm-stats b{font-weight:700; color:#fff;}
  .rm-stats .dot{width:3px; height:3px; border-radius:50%; background:rgba(255,255,255,.6);}

  /* ===================== desktop · coverflow ===================== */
  .cf-wrap{position:relative; display:flex; align-items:center; justify-content:center; height:448px; perspective:1700px;}
  .cf-cell{position:absolute; left:50%; top:50%; margin:-205px 0 0 -115px; cursor:pointer; will-change:transform;
    transition:transform .55s cubic-bezier(.2,.7,.3,1), opacity .55s; transform-origin:center center;}
  .cf-cell:hover{opacity:1 !important; z-index:9 !important;}
  .cf-cell .reel{width:230px; height:410px;}
  .cf-dots{display:flex; gap:7px; justify-content:center; margin-top:18px;}
  .cf-dots button{width:7px; height:7px; padding:0; border:none; border-radius:50%; background:var(--stone); cursor:pointer; transition:width .25s, background .25s;}
  .cf-dots button:hover{background:var(--clay);}
  .cf-dots button.on{width:22px; border-radius:4px; background:var(--green);}
  @media (max-width:760px){ .cf-only{display:none !important;} }

  /* ===================== mobile · orbit drum ===================== */
  .mdr-only{display:none;}
  @media (max-width:760px){ .mdr-only{display:block;} }
  .mdr-stage{perspective:1200px; height:404px; margin-top:22px; touch-action:pan-y; cursor:grab;}
  .mdr-stage:active{cursor:grabbing;}
  .mdr-wheel{position:relative; width:206px; height:368px; margin:8px auto 0; transform-style:preserve-3d;}
  .mdr-card{position:absolute; inset:0; backface-visibility:hidden; -webkit-backface-visibility:hidden;}
  .mdr-card .reel{width:100%; height:100%;}
  .mdr-ctrl{display:flex; align-items:center; gap:12px; padding:18px 2px 0;}
  .mdr-meta{flex:1; text-align:center; min-width:0;}
  .mdr-title{font-family:var(--serif); font-size:22px; font-weight:600;
    white-space:nowrap; overflow:hidden; text-overflow:ellipsis;}
  .mdr-place{display:flex; align-items:center; justify-content:center; gap:5px; margin-top:6px;
    font:500 13px/1 var(--ui); color:var(--ink-soft);}
  .mdr-place b{color:var(--ink); font-weight:700;}
  .mdr-btn{width:46px; height:46px; border-radius:50%; border:1.5px solid var(--line); background:var(--paper-2);
    color:var(--ink); cursor:pointer; display:flex; align-items:center; justify-content:center; font-size:17px;
    flex:0 0 auto; transition:.16s;}
  .mdr-btn:hover{border-color:var(--green); color:var(--green);}
  .mdr-dots{display:flex; gap:7px; justify-content:center; margin-top:16px;}
  .mdr-dots button{width:8px; height:8px; border-radius:50%; background:var(--stone); border:none; padding:0;
    cursor:pointer; transition:.2s;}
  .mdr-dots button.on{width:24px; border-radius:4px; background:var(--green);}
  .mdr-cta{margin:22px auto 0; display:flex; width:100%; max-width:340px;}
  .mdr-cta .rs-cta{flex:1; justify-content:center; padding:15px;}

  @media (prefers-reduced-motion: reduce){
    *, *::before, *::after{transition-duration:.01ms !important; animation:none !important;}
  }