/* A small storybook silhouette is the only new decorative element. */
.brand-identity {
  display:flex;
  align-items:stretch;
  gap:13px;
  min-width:0;
}
.brand-logo {
  display:block;
  position:relative;
  width:31px;
  height:auto;
  flex:none;
  border:0;
}
.brand-logo svg {
  display:block;
  position:absolute;
  top:0;
  left:50%;
  transform:translateX(-50%);
  width:auto;
  height:100%;
  aspect-ratio:234 / 328;
  max-width:none;
  stroke:none;
  fill:none;
}
.brand-wordmark { min-width:0; }
.brand h1 {
  display:flex;
  align-items:center;
  gap:5px;
  white-space:nowrap;
}
.brand-divider {
  font:300 18px var(--ui);
  color:#acbdc4;
  margin:0 1px;
}
.brand-system {
  font:550 13px var(--ui);
  letter-spacing:.1em;
  color:#567784;
}
.cover-mark {
  width:60px;
  height:64px;
  border:0;
  border-radius:4px;
  background:var(--paper);
  transform:none;
  flex:none;
}
.cover-mark img {
  display:block;
  width:76px;
  height:76px;
  max-width:none;
  object-fit:contain;
}
.cover-system {
  font-size:14px;
  letter-spacing:.17em;
  color:#e0eaed;
}
.cover-system small {
  display:block;
  margin-top:8px;
  font-size:8px;
  letter-spacing:.15em;
  color:#a9c2cb;
}
@media(max-width:720px) {
  .brand { gap:7px; }
  .brand-identity { gap:9px; }
  .brand-logo { display:block; width:26px; }
  .brand h1 { flex-direction:column; align-items:flex-start; gap:4px; font-size:17px; }
  .brand-divider { display:none; }
  .brand-system { font-size:10px; line-height:1.2; letter-spacing:.15em; }
  .brand-wordmark>small { display:none; }
  .topbar { gap:6px; }
  .cover-mark { width:46px; height:50px; }
  .cover-mark img { width:61px; height:61px; }
  .cover-system { font-size:12px; }
  .cover-system small { font-size:7px; margin-top:6px; }
}
@media(max-width:360px) {
  .brand { gap:4px; }
  .brand-identity { gap:7px; }
  .brand h1 { font-size:16px; }
  .brand-logo { width:25px; }
  .profile-button { padding-left:5px; }
}