/* Carousel (Josiah, Oct 19): one best screen from each of our eight sites, standing round a slightly tilted ring in a slim
   device frame. Phones see phone screens in a phone bezel, tablets see tablet screens, desktop sees browser windows.
   The ring turns one step at a time; one card faces front, the rest recede round the circle. Display only. Gold Dust.
   Transform/opacity only; one still card with a crossfade under reduced motion. */
.dcr{position:relative;padding:2px 0 4px;overflow:hidden;--dcr-w:min(46vw,200px);--dcr-h:calc(var(--dcr-w) * 1.86)}
@media (min-width:640px){.dcr{--dcr-w:min(30vw,250px);--dcr-h:calc(var(--dcr-w) * 1.38)}}
@media (min-width:1024px) and (hover:hover) and (pointer:fine){.dcr{padding:12px 0 18px;--dcr-w:min(26vw,380px);--dcr-h:calc(var(--dcr-w) * .7)}}
.dcr-stage{position:relative;height:calc(var(--dcr-h) * 1.06);touch-action:pan-y;cursor:grab;-webkit-user-select:none;user-select:none;outline:none;-webkit-tap-highlight-color:transparent;perspective:1000px;perspective-origin:50% 20%}
.dcr-stage::after{content:"";position:absolute;left:50%;bottom:0;width:min(92vw,620px);height:16%;transform:translateX(-50%);pointer-events:none;
  background:radial-gradient(closest-side,rgba(200,169,106,.15),rgba(200,169,106,.04) 55%,transparent)}
.dcr-ring{position:absolute;left:50%;top:calc(var(--dcr-h) * .58);width:0;height:0;transform-style:preserve-3d;
  transform:translateZ(calc(var(--dcr-r,300px) * -1)) rotateX(-6deg) rotateY(var(--dcr-a,0deg));transition:transform .7s cubic-bezier(.3,1.2,.45,1)}
.dcr-stage.dcr-drag .dcr-ring{transition:none}
.dcr-card{position:absolute;left:calc(var(--dcr-w) * -.5);top:calc(var(--dcr-h) * -.5);width:var(--dcr-w);margin:0;
  transform:rotateY(var(--dcr-i)) translateZ(var(--dcr-r,300px))}
/* device frames, Gold Dust: near-black body, gold hairline, no logos */
.dcr-dev{position:relative;display:block;background:linear-gradient(160deg,#1d1d1f,#0b0b0c);
  box-shadow:inset 0 0 0 1px rgba(200,169,106,.55),0 0 0 1px rgba(0,0,0,.6),0 18px 30px -14px rgba(0,0,0,.9)}
.dcr-dev::after{content:"";position:absolute;inset:0;border-radius:inherit;background:#0b0b0c;opacity:var(--dcr-dim,.6);transition:opacity .6s ease;pointer-events:none}
.dcr-scr{position:relative;display:block;overflow:hidden;background:#0b0b0c}
.dcr-scr img{display:block;width:100%;height:100%;object-fit:cover;object-position:top}
/* phone: rounded bezel with a pill notch */
.dcr-dev{padding:5.5%;border-radius:15% / 8.2%}
.dcr-scr{aspect-ratio:9/16;border-radius:11% / 6.2%}
.dcr-dev::before{content:"";position:absolute;z-index:1;left:50%;top:7.4%;width:26%;height:2.1%;transform:translateX(-50%);border-radius:99px;background:#050505;box-shadow:0 0 0 1px rgba(200,169,106,.25)}
@media (min-width:640px){
  .dcr-dev{padding:5%;border-radius:7% / 5.2%}
  .dcr-scr{aspect-ratio:3/4;border-radius:2.5% / 1.9%}
  .dcr-dev::before{top:2.2%;width:2.2%;height:auto;aspect-ratio:1;border-radius:50%}
}
@media (min-width:1024px) and (hover:hover) and (pointer:fine){
  .dcr-dev{padding:7.4% 1.3% 1.3%;border-radius:2.6% / 4.2%}
  .dcr-scr{aspect-ratio:16/10;border-radius:0 0 1.6% 1.6% / 0 0 2.6% 2.6%}
  .dcr-dev::before{display:none}
  .dcr-bar{position:absolute;z-index:1;left:22%;right:22%;top:2.1%;height:3.4%;border-radius:99px;box-shadow:inset 0 0 0 1px rgba(200,169,106,.35);background:rgba(255,255,255,.02)}
}
.dcr-bar,.dcr-dots{display:none}
@media (min-width:1024px) and (hover:hover) and (pointer:fine){.dcr-bar{display:block}.dcr-dots{position:absolute;z-index:1;left:2.4%;top:2.6%;display:flex;gap:5px}
  .dcr-dots i{display:block;width:6px;height:6px;border-radius:50%;box-shadow:inset 0 0 0 1px rgba(200,169,106,.6)}}
.dcr-more{display:flex;justify-content:center;align-items:center;min-height:44px;margin-top:0;font-size:.75rem;letter-spacing:.22em;text-transform:uppercase;color:var(--color-muted,#9a9892);text-decoration:none}
.dcr-more:hover,.dcr-more:focus-visible{color:#C8A96A}
@media (prefers-reduced-motion:reduce){.dcr-ring{transition:none}.dcr-dev::after{transition:none}.dcr-card{transition:opacity .6s ease}}

/* hands-on: drag or flick to spin, tap a side card to bring it round; display only, no links */
.dcr-stage.dcr-drag{cursor:grabbing}
.dcr-stage:focus-visible .dcr-card.dcr-front .dcr-dev{box-shadow:inset 0 0 0 1px rgba(200,169,106,.55),0 0 0 2px #C8A96A,0 18px 30px -14px rgba(0,0,0,.9)}
.dcr-card img{-webkit-user-drag:none;pointer-events:none}
.dcr-nav{position:absolute;z-index:2;top:calc(var(--dcr-h) * .58 - 22px);width:44px;height:44px;display:grid;place-items:center;border-radius:50%;
  background:rgba(11,11,12,.55);color:#C8A96A;font:300 26px/1 Georgia,serif;border:0;box-shadow:inset 0 0 0 1px rgba(200,169,106,.45);cursor:pointer;opacity:.8;transition:opacity .2s ease,box-shadow .2s ease;-webkit-tap-highlight-color:transparent}
.dcr-nav span{margin-top:-3px}
.dcr-nav:hover,.dcr-nav:focus-visible{opacity:1;box-shadow:inset 0 0 0 1px rgba(200,169,106,.9);outline:none}
.dcr-prev{left:max(10px,calc(50% - var(--dcr-w) * 1.05 - 44px))}
.dcr-next{right:max(10px,calc(50% - var(--dcr-w) * 1.05 - 44px))}
.dcr{position:relative}
/* fix pass Oct 19: tablets (portrait and landscape) keep a little air between the front card and "Our work" */
@media (min-width:640px){.dcr-more{margin-top:20px}}
/* fix pass Oct 19: the front card's lower edge no longer covers "Our work" on desktop */
@media (min-width:1024px) and (hover:hover) and (pointer:fine){.dcr-more{margin-top:max(44px,calc(var(--dcr-h) * .18))}}

/* front card that opens a site: pointer + a quiet "View site ↗" under it */
.dcr-card.dcr-front.dcr-opens{cursor:pointer}
.dcr-view{position:absolute;left:50%;bottom:10px;transform:translate(-50%,4px);padding:5px 10px;border-radius:999px;background:rgba(10,10,11,.78);box-shadow:inset 0 0 0 1px rgba(200,169,106,.55);font-size:10px;line-height:1;letter-spacing:.14em;text-transform:uppercase;color:#d6b878;opacity:0;transition:opacity .35s ease,transform .35s ease;pointer-events:none;white-space:nowrap;z-index:3}
.dcr-card.dcr-front .dcr-view{opacity:1;transform:translate(-50%,0)}
@media (prefers-reduced-motion:reduce){.dcr-view{transition:none}}