/* Brands only: loaded after styles.css. */
/* the empty frames' dashed line, in both colour modes */
.mq{--slot:rgba(14,16,22,.22)}
@media (prefers-color-scheme: dark){
.mq{--slot:rgba(255,255,255,.22)}
}
/* the section head over the shelf */
.mq-head{display:flex;flex-wrap:wrap;align-items:flex-end;justify-content:space-between;gap:16px 48px;margin-bottom:56px}
/* Past brands: an empty shelf of poster frames with one way in (the orange tile opens Contact with Brand Partnerships
   chosen; the five dashed frames are decoration) */
.mq-shelf{display:grid;grid-template-columns:repeat(6,minmax(0,1fr));gap:24px}
.mq-slot{aspect-ratio:3 / 4;border:2px dashed var(--slot);border-radius:6px}
.mq .mq-addbrand{aspect-ratio:3 / 4;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:16px;min-width:44px;padding:16px;border-radius:6px;background:#FF8A1F;color:#0E1016;font-family:'Big Shoulders','Big Shoulders fallback',sans-serif;font-size:28px;font-weight:900;line-height:.95;letter-spacing:.01em;text-align:center;text-transform:uppercase;text-wrap:balance;text-decoration:none;box-shadow:0 3px 0 #B85A0C;transition:background-color 150ms ease-out,transform 150ms ease-out,box-shadow 150ms ease-out}
.mq .mq-addbrand:hover{background:#FF9D45;color:#0E1016;transform:translateY(-2px);box-shadow:0 5px 0 #B85A0C}
.mq .mq-addbrand:active{background:#F27A0C;transform:translateY(2px);box-shadow:0 1px 0 #B85A0C}
.mq .mq-lt .mq-addbrand:focus-visible{outline:2px solid var(--ink);outline-offset:3px}
/* tablet: three frames a row */
@media (max-width:1023.98px){
.mq-shelf{grid-template-columns:repeat(3,minmax(0,1fr))}
}
/* phone */
@media (max-width:767.98px){
.mq-head{margin-bottom:32px}
.mq-shelf{gap:12px}
.mq .mq-addbrand{gap:8px;padding:8px;font-size:20px}
.mq-addbrand svg{width:40px;height:40px}
}
@media (prefers-reduced-motion:reduce){
.mq .mq-addbrand{transition:background-color 150ms ease-out,border-color 150ms ease-out,color 150ms ease-out}
.mq .mq-addbrand.mq-addbrand:hover,.mq .mq-addbrand.mq-addbrand:active{transform:none}
}
