/* Base theme and responsive utilities */
/* 
- 定义全局颜色变量（前景色、背景色、弱化色、链接色、分割线色）
- 支持深色模式自动切换
*/
:root { --fg:#111111; --bg:#fff; --muted:#666; --link:#111111; --dim:#c3c3c3; --divider:#e6e6e6; }
@media (prefers-color-scheme: dark) {
  :root { --fg:#eaeaea; --bg:#0b0b0b; --muted:#a0a0a0; --link:#eaeaea; --dim:#666666; --divider:#333333; }
}

/* 
基础排版和字体设置
- 去除默认边距和内边距
- 设置背景色和字体
- 适配多种中英文系统字体
*/
html, body { margin:0; padding:0; background:transparent; color:var(--fg);
  font:16px/1.7 -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial,
  "PingFang SC", "Noto Sans CJK SC", "Hiragino Sans GB", "Microsoft YaHei", sans-serif;
}

/* 
链接样式
- 默认无下划线，悬停时显示下划线
*/
a { color:var(--link); text-decoration:none; }
a:hover { text-decoration:none; }

/* 
首页布局
- .page: 居中全屏布局
- .home: 响应式宽度和内边距
- .brand: 品牌大标题，居中、加粗、透明度
- .grid: 双栏网格布局
- .section-title: 区块标题加粗
- .list: 垂直列表，间距10px
- .divider: 分割线
*/
.page {
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-start;
  background: var(--bg);
}
.home { width:clamp(240px, 92vw, 1200px); margin:0 auto; padding:24px 24px 64px; }
.brand {
  display: flex;
  align-items: center;
  justify-content: space-between;
  /* 让logo靠左，文字靠右 */
  color: var(--dim);
  opacity: .6;
  margin: 0 0 240px;
  /* 取消自适应字号 */
  position: relative;
  z-index: 10; /* 确保在背景图片之上 */
}
.brand-logo {
  flex-shrink: 0;
  display: flex;
  align-items: center;
  height: 36px; /* 与.brand-text字号一致 */
  width: auto;
}
.brand-logo svg {
  height: 100%;
  width: auto;
  display: block;
}
.brand-logo svg path {
  fill: currentColor;
}
.brand-text {
  flex: 1;
  text-align: right;
  font-weight: 800;
  font-size: 24px; /* 固定字号，可根据需要调整 */
  line-height: 1;
  letter-spacing: 0;
  white-space: nowrap;
  text-transform: uppercase; /* 始终大写 */
}
.grid { display:grid; grid-template-columns:200px 1fr; gap:28px; }
.section-title { font-weight:700; }
.list {
  display: flex;
  flex-direction: column;
  gap: 10px;
  width: 160px;
  min-width: 0;
}
.divider { height:1px; background:var(--divider); margin:18px 0; }

/* 背景图片样式 */
.background-image {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  opacity: 0;
  transition: opacity 0.3s ease;
  z-index: 1;
  pointer-events: none;
}

/* 背景图片遮罩层，确保顶部内容清晰可见 */
.background-image::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(0, 0, 0, 0.4); /* 纯黑色，透明度20% */    
  pointer-events: none;
}

/* 深色模式下的遮罩层 */
@media (prefers-color-scheme: dark) {
  .background-image::before {
    background:rgba(0, 0, 0, 0.4); /* 纯黑色，透明度20% */  
  }
}

/* 
移动端适配
- 缩小内边距、品牌字体和网格宽度
*/
@media (max-width: 640px) {
  .home { padding:28px 16px 56px; }
  .brand { font-size:clamp(28px, 12vw, 72px); }
  .grid { grid-template-columns:140px 1fr; gap:18px; }
}

/* 
二级页面布局
- .container: 最大宽度、居中、内边距
- .back: 返回按钮区域，右对齐
- .back a: 返回链接样式，弱化色、加粗、字母间距
- 悬停时高亮
*/
.container { max-width:860px; margin:0 auto; padding:48px 20px 120px; }
.back { margin:48px 0 0; text-align:right; }
.back a { color:var(--muted); font-weight:600; letter-spacing:.08em; }
.back a:hover { color:var(--fg); text-decoration:none; }

/* 页脚样式 */
.footer {
  width: 100%;
  text-align: center;
  color: var(--muted);
  font-size: 14px;
  letter-spacing: .08em;
  padding: 32px 0 16px;
  opacity: .7;
  user-select: none;
  margin-top: auto; /* 让页脚自动推到底部 */
}

.experience-list-wrapper {
  width: 160px;
  min-width: 0;
  display: flex;
  flex-direction: column;
  position: relative;
}
.experience-link {
  width: 160px;
  position: relative;
  z-index: 2;
  cursor: pointer;
  align-self: flex-start;
}
.exp-dropdown {
  position: absolute;
  left: 100%;
  top: 0;
  min-width: 140px;
  /* 去掉背景色 */
  background: none;
  border: none;
  box-shadow: none;
  padding: 0px 0;
  display: flex;
  flex-direction: column;
  z-index: 10;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.25s;
  align-items: flex-start;
  margin-left: 0px;
}
/* 只在Experience链接悬浮时显示下拉菜单 */
.experience-link:hover + .exp-dropdown {
  opacity: 1;
  pointer-events: auto;
}

/* 确保下拉菜单在悬浮时保持显示 */
.exp-dropdown:hover {
  opacity: 1;
  pointer-events: auto;
}
.exp-dropdown span {
  padding: 8px 18px;
  color: #7f7f7f;
  text-align: left;
  white-space: nowrap;
  font-size: 15px;
  background: none;
  transition: color .15s;
  cursor: pointer;
}
.exp-dropdown span:hover {
  background: none;
  color: #ffffff;
}