/* ============================================================================
   The Canceled Productions logo on every game's header, a link back to the
   site's home (platform/client/brand.js sets its address). Images in
   platform/assets/brand/: the full logo (a game on a dark header uses
   canceled-productions-on-dark.png) and the folder alone, shown on phones.
   A game may set --cp-brand-h (the logo's height). The games use the
   folder alone (canceled-productions-mark.png, class cp-brand-icon); the
   site's pages the full logo.

     <a class="cp-brand" href="../../site/index.html" aria-label="..."
        data-i18n-aria="cp.home" data-i18n-title="cp.home">
       <img class="cp-brand-full" src="../../platform/assets/brand/canceled-productions-on-dark.png" alt="...">
       <img class="cp-brand-mark" src="../../platform/assets/brand/canceled-productions-mark.png" alt="...">
     </a>
   ============================================================================ */
.cp-brand{
  display:inline-flex;align-items:center;flex:none;
  border-radius:8px;text-decoration:none;opacity:.95;
  transition:opacity .15s ease,transform .15s ease;
}
.cp-brand:hover{opacity:1;transform:translateY(-1px)}
.cp-brand:focus-visible{outline:2px solid currentColor;outline-offset:3px}
.cp-brand img{display:block;height:var(--cp-brand-h,36px);width:auto}
.cp-brand-mark{display:none !important}
@media (max-width:560px){
  .cp-brand-full{display:none !important}
  .cp-brand-mark{display:block !important}
}
/* The games' headers show the folder alone, at every width. */
.cp-brand-icon{display:block}
@media (prefers-reduced-motion: reduce){ .cp-brand{transition:none} .cp-brand:hover{transform:none} }