/* * depend on stylc.css */
:root {
  --main-shadow: 0 0 20px rgba(0, 0, 0, 0.15);
}
@media (prefers-color-scheme: dark) {
  :root {
    --main-shadow: 0 0 20px rgba(255, 255, 255, 0.15);
  }
}

@font-face {
  font-family: 'FandolKai';
  src: url('./FandolKai-Regular-min.woff2') format('woff2');
  font-weight: normal;
  font-style: normal;

  font-display: swap;
}

.main-card {
  width: 100%;
  max-width: var(--max-width);
  min-height: 100vh;
  padding: 20px var(--padding-width);
  margin-top: var(--nav-height-space);

  color: var(--text-color);

  box-shadow: var(--main-shadow);
}
@media screen and (max-width: 768px) {
  .main-card {
    /* 手机端的nav在下方，不需要顶部边距 */
    margin-top: 0px; 
    padding-top: 20px;

  }
}

.intro-row {
  display: flex;
  gap: 20px; /* 适当缩小间距以适应三列 */
  justify-content: space-between;
  align-items: center; /* 建议居中对齐，三等分时视觉更平衡 */
  margin-bottom: 3em;
}
@media screen and (max-width: 768px) {
  .intro-row {
    flex-direction: column;
    align-items: center;
    text-align: left;
  }
}

/* 重点：让简介内部的三行纵向排列 */
.intro-words {
  flex: 1;                 /* 占据 1/3 宽度 */
  display: flex;
  /* 开启内部 Flex 布局 */
  flex-direction: column;  /* 内部元素上下排列 */
  gap: 8px;
  /* 这里就是你想要的“回车”间距 */
}
.intro-words p {
  margin: 0px /* 清除 p 标签自带的 margin */
}

/* 核心：为三个子部分设置等宽 */
.intro-words, 
.intro-ruby, 
.intro-avatar-container {
  flex: 1;          /* 强制平分剩余空间 */
  display: flex;    /* 开启内部 flex 以便控制内容位置 */
}

/* 中间的 Ruby 居中 */
.intro-ruby {
  justify-content: center;
  font-size: 32px;
}
ruby {
  font-family: 'FandolKai', serif;;
}
ruby > rt {
  font-style: italic;
  font-family: "Palatino", "Georgia", sans-serif; /* we need this line to recover the font changed by ruby */
  width: 100%;
  font-size: 0.4em;
}

/* 右侧的头像容器靠右 */
.intro-avatar-container {
  justify-content: flex-end;
}

/* 锁死头像尺寸，解决“图片太大”的问题 */
.avatar-frame {
  width: 160px;
  height: 160px;
  border-radius: 8px;
  overflow: hidden;
  /* 禁止滚动 */
  border: 0.5px solid var(--border-color);
  flex-shrink: 0; /* 防止在窄屏下被挤压 */
}

.avatar-frame img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}



/* header */
.header-toggle {
  display: flex;
  align-items: baseline;
  justify-content: space-between; /* 关键：标题靠左，开关靠右。如果你想让它们挨在一起，可以换成 flex-start */
}