/* Vector identity: the wordmark follows its surface colour. */
.brand{display:grid;grid-template-columns:auto auto;grid-template-rows:auto auto;column-gap:12px;row-gap:6px;align-items:center;justify-content:start;flex-shrink:0}
.brand-mark{display:block;width:48px;height:48px;grid-column:1;grid-row:1 / 3}
.brand .wordmark{grid-column:2;grid-row:1;align-self:end}
.wordmark .brand-wordmark{display:block;width:4.95em;height:auto;overflow:visible}
.brand .brand-baseline{grid-column:2;grid-row:2;align-self:start;padding:0}
.pz-header.is-floating .brand-mark{width:40px;height:40px}
.pz-footer .brand-mark .brand-tile{fill:var(--paper)}
.pz-footer .brand-mark .brand-glyph{fill:var(--ink)}
.footer-brand .brand-mark{display:none}
.footer-brand .wordmark{display:block}
.footer-brand .brand-wordmark{width:100%;max-width:100%;height:auto}
@media(max-width:1100px){.brand{column-gap:10px}.brand-mark{width:44px;height:44px}}
@media(max-width:600px){.brand{column-gap:10px;row-gap:5px}.brand-mark{width:43px;height:43px}.pz-header.is-floating .brand-mark{width:37px;height:37px}.header{gap:20px}}
@media(max-width:380px){.header .brand .wordmark{font-size:26px}.header .brand .brand-baseline{font-size:4.8px}.header .brand-mark{width:36px;height:36px}.header{gap:14px}.pz-header.is-floating .brand{column-gap:8px}.pz-header.is-floating .brand .wordmark{font-size:25px}}