/* ============================================================================
   PIXEL ACADEMY — BRAND CHROME
   Version 1.1.0

   Load after css/tokens.css.

   The mark and the lockup, in one place. Every deck, document and reference
   page reads from this file, so the lockup cannot drift between them.

   TWO LOCKUPS, AND THE SIZE DECIDES WHICH
   The name is thirteen characters at 24% tracking. Next to a square mark that
   is intrinsically wide, so a horizontal lockup stops working the moment it
   gets big: it either overflows its container or forces everything around it
   to shrink. Above roughly 22px, stack it. That is also what the original
   pitch deck cover does.
   ========================================================================= */

.pa-lockup{
  display:inline-flex; align-items:center; gap:.72em;
  max-width:100%;
}
.pa-lockup .pa-mark{width:1.75em; height:auto; flex:none; display:block}

.pa-lockup .name{
  font:var(--pa-mono-label); font-size:.78em;
  letter-spacing:.24em; text-transform:uppercase;
  color:var(--pa-text-strong); white-space:nowrap;
  /* letter-spacing also adds a gap after the last letter. Without this the
     lockup sits visibly off-centre in any centred container. */
  margin-right:-.24em;
}

/* ---- stacked, for anything above ~22px: covers, sheets, hero use ---------- */
.pa-lockup--stacked{align-items:center; gap:.62em}
.pa-lockup--stacked .pa-mark{width:2.1em}
.pa-lockup--stacked .name{
  display:grid; gap:.12em; line-height:1;
  font-size:.62em;
}
.pa-lockup--stacked .name b{font-weight:inherit; display:block}

/* ---- theme swap: one lockup, both surfaces ------------------------------- */
.pa-lockup .on-light{display:none}
[data-theme="light"] .pa-lockup .on-dark,
.pa-theme-light .pa-lockup .on-dark{display:none}
[data-theme="light"] .pa-lockup .on-light,
.pa-theme-light .pa-lockup .on-light{display:block}

/* ---- the mark on its own ------------------------------------------------- */
.pa-mark{display:block; width:100%; height:auto}