/* cartesianecu.com/distributors/: our distributors' logos as a moving strip (assets/distributors.js) and the way to become
   one. On top of site.css (tokens, header, footer). The logos (assets/distributors/v1/) are white on transparent, as the
   distributors drew them on black: the strip's band is dark in both themes, its edges fade, and its arrows and pause
   button are light on it. Without the script the strip is one row to scroll sideways. */
.dist-page{min-height:100vh;min-height:100dvh;display:flex;flex-direction:column}
.dist-page .head-tools > .lang-dd{display:block}              /* no menu drawer on this page: the language stays in the header */
.dist-page .site-foot{padding:0 0 22px}
.dist-page .foot-legal{margin-top:0;align-items:center}
.dist-foot{display:flex;flex-wrap:wrap;gap:6px 18px}
.dist-foot a{color:var(--muted)}
@media (hover:hover){.dist-foot a:hover{color:var(--accent)}}
.dist{flex:1;padding:48px 0 72px}
.dist:focus{outline:none}
.dist :focus-visible,.dist-page .skip:focus-visible,.dist-foot a:focus-visible{outline:2px solid var(--accent);outline-offset:2px;border-radius:4px}
.dist-sr{position:absolute;width:1px;height:1px;margin:-1px;padding:0;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}

.dist-head{max-width:660px;margin:0 auto;text-align:center}
.dist-head h1{font-family:'Russo One',sans-serif;font-size:clamp(28px,4.4vw,42px);margin:12px 0 0}
.dist-lede{margin:14px auto 0;color:var(--muted);font-size:17px;max-width:56ch}

/* the band: full width, dark in both themes */
.dist-band{--band:#0c0f12;--band-line:#232a31;--on-band:#c9d0d6;--lg-h:108px;--lg-w:196px;--lg-gap:64px;--edge:56px;
  margin-top:40px;padding:34px 0 18px;background:var(--band);border-top:1px solid var(--band-line);border-bottom:1px solid var(--band-line)}
:root[data-theme="light"] .dist-band{--band:#15191d;--band-line:#15191d}
.dist-rail{position:relative;padding:0 var(--edge)}
.dist-view{overflow-x:auto;overflow-y:hidden;scrollbar-width:none;
  -webkit-mask-image:linear-gradient(90deg,transparent 0,#000 7%,#000 93%,transparent 100%);mask-image:linear-gradient(90deg,transparent 0,#000 7%,#000 93%,transparent 100%)}
.dist-view::-webkit-scrollbar{display:none}
.dist-track{position:relative;list-style:none;margin:0;padding:0 4%;display:flex;align-items:center;gap:var(--lg-gap);width:max-content}
.dist-logo{flex:none;height:var(--lg-h);display:flex;align-items:center}
.dist-logo img{height:100%;width:auto;max-width:var(--lg-w);object-fit:contain;-webkit-user-drag:none;user-select:none}
/* moving (the script runs): the strip is drawn by its transform, a drag or a swipe moves it, the page still scrolls up and down */
.dist-band.is-live .dist-view{overflow:hidden;touch-action:pan-y;cursor:grab}
.dist-band.is-live .dist-view.is-drag{cursor:grabbing}
.dist-band.is-live .dist-track{padding:0;will-change:transform}
.dist-band.is-live .dist-logo{height:calc(var(--lg-h) * 1.28)}                   /* the tallest a logo gets (distributors.js size()) */
.dist-band.is-live .dist-logo img{max-width:none}

.dist-arrow,.dist-pause{display:grid;place-items:center;padding:0;border:1px solid var(--band-line);border-radius:50%;background:rgba(255,255,255,.04);color:var(--on-band);cursor:pointer;
  transition:color .15s,border-color .15s,background .15s}
.dist-arrow{position:absolute;top:50%;width:42px;height:42px;margin-top:-21px;z-index:1}
.dist-prev{left:8px}
.dist-next{right:8px}
.dist-arrow svg{width:22px;height:22px}
.dist-arrow[hidden],.dist-pause[hidden]{display:none}
@media (hover:hover){.dist-arrow:hover,.dist-pause:hover{color:var(--accent);border-color:var(--accent);background:rgba(255,255,255,.07)}}
.dist-arrow:focus-visible,.dist-pause:focus-visible{outline:2px solid var(--accent);outline-offset:2px}
.dist-tools{display:flex;justify-content:flex-end;margin-top:10px;min-height:32px}
.dist-pause{width:32px;height:32px}
.dist-pause svg{width:16px;height:16px}
.dist-pause .i-play,.dist-pause[aria-pressed="true"] .i-pause{display:none}
.dist-pause[aria-pressed="true"] .i-play{display:block}

.dist-join{max-width:660px;margin:56px auto 0;padding:34px 26px;text-align:center;background:var(--panel);border:1px solid var(--line);border-radius:var(--radius)}
.dist-join h2{font-family:'Russo One',sans-serif;font-size:clamp(22px,3vw,28px)}
.dist-join > p:not(.contact-mail){margin:10px auto 0;color:var(--muted);max-width:52ch}
.dist-join .btn{margin-top:20px}

@media (max-width:760px){
  .dist{padding:32px 0 52px}
  .dist-band{--lg-h:84px;--lg-w:150px;--lg-gap:44px;--edge:0px;margin-top:30px;padding:24px 0 14px}
  .dist-arrow{width:38px;height:38px;margin-top:-19px;background:rgba(12,15,18,.72)}
  .dist-prev{left:6px}
  .dist-next{right:6px}
  .dist-join{margin-top:44px;padding:28px 18px}
}
@media (max-width:400px){
  .dist-band{--lg-h:72px;--lg-w:128px;--lg-gap:36px}
  .dist-page .brand{gap:8px}
  .dist-page .brand-word{font-size:16px}
  .dist-page .head-tools{gap:6px}
}
@media (prefers-reduced-motion:reduce){.dist-arrow,.dist-pause{transition:none}}