/* The site logo (app/lib/layout.php → sly_logo_html): the header, and extra pages like the Quake engine page. */
.lgo { display: flex; align-items: flex-end; gap: 14px; color: var(--text); }
/* logo pieces are one-colour masks, so every theme colours them (--logo) */
.lgo-mark, .lgo-word { display: block; background: var(--logo); -webkit-mask: var(--mask) center / contain no-repeat; mask: var(--mask) center / contain no-repeat; }
.lgo-mark { width: 35.2px; height: 44px; }                 /* 414 × 518 artwork */
.lgo-col { display: flex; flex-direction: column; gap: 6px; }
.lgo-word { width: 96.2px; height: 26px; }                 /* 492 × 133 artwork */
.lgo-tag { display: block; width: max-content; white-space: nowrap; font: 400 9px/1 "Share Tech Mono", ui-monospace, monospace; letter-spacing: 0; color: var(--text-4); }
/* Bea's takeover: her photo in a circle + the name in letters */
.lgo-photo { display: flex; align-items: center; gap: 14px; color: var(--text); }
.lgo-pic { width: 44px; height: 44px; flex: none; display: flex; align-items: flex-end; justify-content: center; overflow: hidden; border-radius: 50%;
  border: 1px solid var(--accent); background: var(--bg-4); }
.lgo-pic img { width: 100%; max-width: none; height: auto; }
.lgo-name { font-weight: 300; font-size: 30px; letter-spacing: .32em; color: var(--text); }
@media (max-width: 600px) { .lgo-name { font-size: 22px; letter-spacing: .24em; } }