/* ── AS215855 Custom Branding ───────────────────────────────────────────────── */

/* About page — hero wrapper */
.about__header {
  position: relative;
  border-radius: 12px;
  overflow: hidden;
  border: 1px solid rgba(25, 81, 255, 0.2);
  background: #0a1020;
  padding-bottom: 28px;
}

/* Hero image — no bottom margin, let the wrapper handle spacing */
.about__header__hero {
  border-radius: 0 !important;
  margin-bottom: 0 !important;
}

/* Domain h1 — brand it */
.about__header h1 {
  font-family: 'Noto Sans Mono', 'Roboto Mono', monospace !important;
  font-size: 18px !important;
  font-weight: 700 !important;
  letter-spacing: 0.04em;
  color: #4d78ff !important;
  margin-top: 20px !important;
  margin-bottom: 6px !important;
}

/* "Decentralized social media powered by Mastodon" — subtler */
.about__header p {
  font-size: 13px !important;
  color: rgba(255, 255, 255, 0.4) !important;
}

.about__header p a {
  color: rgba(255, 255, 255, 0.55) !important;
}

/* About meta section */
.about__meta {
  border-radius: 10px !important;
  overflow: hidden;
  border-color: rgba(25, 81, 255, 0.2) !important;
}

.about__meta h4 {
  font-family: 'Noto Sans Mono', 'Roboto Mono', monospace !important;
  font-size: 10px !important;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.about__mail {
  color: #4d78ff !important;
  font-family: 'Noto Sans Mono', 'Roboto Mono', monospace !important;
  font-size: 12px !important;
}

/* About footer */
.about__footer p {
  font-family: 'Noto Sans Mono', 'Roboto Mono', monospace !important;
  font-size: 11px !important;
  letter-spacing: 0.02em;
  opacity: 0.45;
}

/* ── Interaction modal (what external visitors see first) ─────────────────── */
.interaction-modal {
  border: 1px solid rgba(25, 81, 255, 0.3) !important;
  box-shadow: 0 0 0 1px rgba(25, 81, 255, 0.1),
              0 24px 48px rgba(0, 0, 0, 0.5) !important;
}

.interaction-modal::before {
  content: '';
  display: block;
  width: 100%;
  height: 3px;
  background: linear-gradient(90deg, #1951ff, #4d78ff, #20c997);
  border-radius: 16px 16px 0 0;
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
}

.interaction-modal .logo {
  color: #1951ff;
}

/* ── Public profile header ────────────────────────────────────────────────── */
.account__header__tabs__name .display-name__account {
  font-family: 'Noto Sans Mono', 'Roboto Mono', monospace !important;
  font-size: 13px;
  letter-spacing: 0.02em;
  color: #4d78ff !important;
}

.account__header__fields a[rel~='me'] {
  color: #20c997 !important;
}

.account__header__fields .verified__mark {
  color: #20c997 !important;
}

/* ── Scrollbar accent ─────────────────────────────────────────────────────── */
::-webkit-scrollbar {
  width: 6px;
  height: 6px;
}

::-webkit-scrollbar-track {
  background: transparent;
}

::-webkit-scrollbar-thumb {
  background: rgba(25, 81, 255, 0.3);
  border-radius: 3px;
}

::-webkit-scrollbar-thumb:hover {
  background: rgba(25, 81, 255, 0.5);
}