/* Studio chrome added on top of an app's own landing styles.
 *
 * App sections (/ridio, …) ship their product's stylesheet verbatim — it is
 * vendored and re-synced, so it must stay untouched. Anything the studio adds
 * around it lives here and is loaded after it. */

/* Header: product mark first, studio credit right after it. Hidden on narrow
   screens where the header already competes with the nav and the CTA; the
   footer credit below is always there. */
.brand-group {
  display: flex;
  align-items: center;
  gap: 12px;
  min-width: 0;
}

.studio-back {
  display: none;
  align-items: center;
  gap: 5px;
  font-size: 13px;
  font-weight: 600;
  text-decoration: none;
  color: var(--ink-faint);
  padding: 6px 12px;
  border-radius: 999px;
  border: 1px solid var(--border);
  white-space: nowrap;
  transition: color 0.15s ease, border-color 0.15s ease;
}

.studio-back:hover {
  color: var(--accent-dark);
  border-color: var(--accent);
}

@media (min-width: 1040px) {
  .studio-back {
    display: inline-flex;
  }
}

/* Footer credit. */
.studio-link {
  display: inline-block;
  margin-top: 14px;
  font-size: 14px;
  color: var(--ink-faint);
  text-decoration: none;
}

.studio-link strong {
  font-family: "Literata", Georgia, serif;
  color: var(--ink-soft);
  font-weight: 600;
}

.studio-link:hover strong {
  color: var(--accent-dark);
}