/* Header */
.header {
  background-color: var(--surface-1);
  position: relative;
  margin-block-end: calc(var(--gap) * 2);
}

.header__controls {
  display: flex;
  justify-content: flex-end;
  align-items: center;
  gap: var(--size-3);
  z-index: var(--layer-2);
  padding: var(--size-3);
}


/* Auth menu container and dropdown */
.auth-menu-container {
  position: relative;
}

.auth-menu {
  position: absolute;
  top: calc(100% + var(--size-2));
  right: 0;
  background: var(--surface-4);
  color: var(--on-surface-4);
  border: 1px solid var(--surface-3);
  border-radius: var(--radius-2);
  box-shadow: var(--shadow-3);
  width: var(--size-content-1);
  z-index: var(--layer-3);
}

.auth-menu__link {
  display: flex;
  align-items: center;
  gap: var(--size-2);
  padding: var(--size-2) var(--size-3);
  color: var(--on-surface-4);
  text-decoration: none;
  font-size: var(--font-size-1);
  font-weight: var(--font-weight-5);
  transition: background 0.2s var(--ease-3);
}

.auth-menu__link:hover {
  text-decoration: none;
  background: var(--surface-3);
  color: var(--text-1);
}

.auth-menu__link svg {
  width: 16px;
  height: 16px;
  flex-shrink: 0;
}

.header__content {
  max-width: 800px;
  margin: 0 auto;
  padding: 0 var(--size-4);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--size-6);
}

.header__divider {
  width: 33%;
  height: 1px;
  background-color: var(--surface-3);
}

/* Masthead */
.masthead {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
}

.masthead__avatar {
  display: block;
  margin-bottom: var(--size-4);
}

.masthead__image {
  width: 64px;
  height: 64px;
  border-radius: var(--radius-round);
  object-fit: cover;
}

/* Avatar component integration */
.masthead__avatar .avatar {
  margin: 0 auto;
}

.masthead__title {
  font-size: var(--font-size-2);
  margin-block-end: var(--size-3);
  color: var(--text-1);
  font-weight: var(--font-weight-6);
  text-transform: uppercase;
}

.masthead__bio {
  /* font-size: var(--font-size-1); */
  /* color: var(--text-2); */
  margin: 0;
  width: min(95%, var(--size-page));
  line-height: var(--font-lineheight-3);
  font-size: var(--font-size-0);
}
.account-bio__title {
  font-size: var(--font-size-1);
  color: var(--text-1);
  margin-bottom: var(--size-2);
  text-transform: uppercase;
}
.account-bio, 
.account-bio .trix-content,
.masthead__bio .trix-content {
  text-align: center;
  color: var(--text-2);
  font-size: --font-size-1;;
  margin-inline: auto;
  width: min(95%, var(--size-page));
  line-height: var(--font-lineheight-3);
}
.content-bio {
  margin-block: var(--gap-double);
}