/* Pondros brand styling — single source of truth for the logo lockup.
   Markup comes from app/templates/_macros/brand.html (mark() / logo()).
   The mark is self-contained (deep-green squircle, mint bars, cream dot), so it
   carries its own colours; the wordmark reads from the per-document :root tokens. */

/* —— Lockup wrappers ——————————————————————————————————————————————— */

/* App sidebar lockup (icon tile + wordmark), also reused on auth pages. */
.brand-link {
  display: flex; align-items: center; gap: 10px;
  padding: 4px 6px; margin: 0 0 14px;
  cursor: pointer; position: relative; text-decoration: none;
}

/* The mark sits free next to the wordmark; a subtle lift on hover. */
.brand-link:hover .brand-mark { transform: translateY(-1px); }

.brand-wordmark {
  font-family: var(--font-display, 'Iowan Old Style', Georgia, serif);
  font-size: 19px; font-weight: 600; letter-spacing: -0.01em; color: var(--ink);
}

.brand-eyebrow {
  font-size: 10.5px; font-weight: 600; letter-spacing: 0.06em;
  text-transform: uppercase; color: var(--ink-3);
  padding: 2px 6px; border-radius: 4px;
  background: var(--bg-2); border: 1px solid var(--line);
}

/* —— The mark itself ——————————————————————————————————————————————
   Three mint level-bars + a cream tuning dot on a deep-forest squircle.
   Matches the Pondros desktop app icon; crisp from 16px up. Colours are baked
   into the SVG, so the mark looks identical on any background. */
.brand-mark { display: block; border-radius: 22%; transition: transform 0.2s ease; }