/* =========================================================
   诗以载史 · 布局层：顶栏 / 首页 hero / 页脚
   ========================================================= */

/* ---------- 顶栏 ---------- */
.topbar {
  position: sticky; top: 0; z-index: 50;
  background: color-mix(in srgb, var(--bg) 86%, transparent);
  backdrop-filter: blur(14px);
  border-bottom: 1px solid var(--line);
}
.topbar .wrap {
  display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; height: 64px;
}
.brand { justify-self: start; margin-left: -8px; }
.topbar-actions { justify-self: end; margin-right: -8px; }
.brand { display: flex; align-items: center; gap: 12px; font-family: var(--serif);
  & .brand-mark {
    width: 38px; height: 38px; flex: none; border-radius: 50%;
    object-fit: cover; display: block;
    border: 1px solid color-mix(in srgb, var(--accent) 38%, transparent);
    box-shadow: 0 6px 16px color-mix(in srgb, var(--accent) 30%, transparent);
  }
  & .brand-text { display: flex; flex-direction: column; gap: 3px; line-height: 1; }
  & .brand-name { font-size: 23px; font-weight: 700; letter-spacing: .1em; color: var(--ink); }
  & .brand-tag {
    font-family: var(--sans); font-size: 11px; font-weight: 400;
    letter-spacing: .26em; color: var(--ink-faint); padding-left: 1px;
  }
}

.nav { display: flex; align-items: center; gap: 2px; }
.nav a {
  padding: 8px 14px; border-radius: 999px; font-size: 14px; color: var(--ink-soft);
  transition: color .25s var(--ease), background .25s var(--ease);
}
.nav a:hover { color: var(--ink); background: var(--bg-soft); }
.nav a.active { color: var(--accent); background: color-mix(in srgb, var(--accent) 12%, transparent); }

/* 昼夜切换：仅日月图标，无圆框 */
.theme-toggle {
  margin-left: 10px; display: inline-flex; align-items: center; gap: 5px;
  border: none; background: none; cursor: pointer; padding: 6px 8px; color: var(--ink-soft);
  border-radius: 10px; transition: background .25s var(--ease);
}
.theme-toggle:hover { background: var(--bg-soft); }
.theme-toggle svg { width: 19px; height: 19px; transition: color .3s var(--ease), transform .3s var(--ease), opacity .3s var(--ease); }
.theme-toggle .ic-sun { color: var(--gold); }
.theme-toggle .ic-moon { color: var(--accent); filter: drop-shadow(0 0 4px color-mix(in srgb, var(--accent) 42%, transparent)); }
.theme-toggle .ic-moon .moon-star { fill: currentColor; animation: twinkle 3.6s var(--ease) infinite; }
.theme-toggle .ic-moon .moon-star:nth-of-type(2) { animation-delay: 1.2s; }
.theme-toggle .ic-moon .moon-star:nth-of-type(3) { animation-delay: 2.4s; }
@keyframes twinkle { 0%,100% { opacity: .35; } 50% { opacity: .95; } }
@media (prefers-reduced-motion: reduce) { .theme-toggle .ic-moon .moon-star { animation: none; } }
/* 单图标：白天显示月亮，黑夜显示太阳（任意时刻仅一个可见） */
[data-theme="light"] .ic-sun { display: none; }
[data-theme="light"] .ic-moon { display: block; }
[data-theme="dark"] .ic-moon { display: none; }
[data-theme="dark"] .ic-sun { display: block; }
.theme-toggle:hover svg { transform: rotate(18deg) scale(1.12); }

.menu-toggle { display: none; }
/* 顶栏右侧操作区：主题切换 + 菜单按钮（手机端整体靠右，主题按钮在最右） */
.topbar-actions { display: flex; align-items: center; gap: 6px; }

/* ---------- 首页 hero（大字 + 经典头像） ---------- */
.hero { position: relative; padding: 30px 0 34px; }
.hero::before {
  content: ""; position: absolute; inset: -8% -12% -18vw -12%; z-index: 0; pointer-events: none;
  /* 朱红暖晕（左上，标题后方）+ 金色柔雾（右下，头像后方）：两团圆心推到画布外四角（at -8%/-8% 与 108%/108%），
     仅留柔和外缘落在内容区——避免径向渐变“竖直中轴”在标题左缘 / 头像右缘被视觉拉成竖条分隔线；
     半径拉大（130%/140%）、blur 提到 40px、透明停点拉远（72%/74%），深色模式下过渡连续自然、无 banding 与硬边。
     下方抗色带噪点层（.hero::after）继续覆盖过渡区做像素抖动。 */
  background:
    radial-gradient(130% 120% at -8% -8%, color-mix(in srgb, var(--accent) 5%, transparent), transparent 72%),
    radial-gradient(140% 130% at 108% 108%, color-mix(in srgb, var(--gold) 6%, transparent), transparent 74%);
  filter: blur(40px);
  -webkit-mask-image: linear-gradient(to bottom, #000 0 52%, transparent 95%);
          mask-image: linear-gradient(to bottom, #000 0 52%, transparent 95%);
  transition: background .5s var(--ease), filter .5s var(--ease);
}
/* 抗色带层：低色深台式面板下大跨度渐变易出断层/“分隔线”，叠加细噪点做像素抖动抹平；
   高 DPI 笔记本面板无感。向下延伸覆盖到探索入口上部，抹平 hero 底部到卡片区的过渡 */
.hero::after {
  content: ""; position: absolute; inset: 0 0 -16vw 0; z-index: 0; pointer-events: none;
  opacity: .3; mix-blend-mode: overlay;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='200' height='200'%3E%3Cfilter id='h'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23h)'/%3E%3C/svg%3E");
}
.hero-inner { position: relative; z-index: 1; display: grid; grid-template-columns: 1.15fr 1fr; gap: 48px; align-items: end; }
/* 左列 flex 竖向 space-between + 外层 align-items:end：诗词数量行贴底与头像出生年月齐平，
   左列整体沉到行底（标题随之下移）→ 满足“标题与统计整体下移且统计对齐出生年月”；margin-left 16px 基础上 +40px 右移靠近中线 */
.hero-text { min-width: 0; margin-left: 56px; display: flex; flex-direction: column; justify-content: space-between; }
.hero-title {
  font-family: var(--serif); font-weight: 700;
  /* 随机名句较长，字号收敛以适配两行长句、保持 hero 左右布局平衡（原为短标题 44–92px） */
  font-size: clamp(36px, 6vw, 64px); line-height: 1.16; letter-spacing: .02em;
  margin: 0 0 40px; text-wrap: balance;
}
.hero-title .em { color: var(--accent); }
/* 随机名句的出处小标：低调、不破坏 hero 排版 */
.hero-src {
  display: block; margin-top: 14px; font-family: var(--serif); font-weight: 400;
  font-size: 15px; letter-spacing: .04em; color: var(--ink-soft);
}
.hero-text .lead { margin-bottom: 30px; }
.hero-portrait { display: flex; flex-direction: column; align-items: center; }
.portrait-inner { display: flex; flex-direction: column; align-items: center; gap: 16px; }
.portrait-ring {
  position: relative; width: min(380px, 66vw); aspect-ratio: 1 / 1; border-radius: 50%;
  padding: 10px;
  /* 玻璃质感：半透明表面随主题变化（light 浅 / dark 深），自然融入背景 */
  background: color-mix(in srgb, var(--surface) 42%, transparent);
  /* 描边用 ink 系极淡色而非纯白：深色模式下不再是刺眼白环、浅色模式为自然淡灰线，黑白都柔和 */
  border: 1px solid color-mix(in srgb, var(--ink) 9%, transparent);
  /* 柔和投影 + 整圈极淡高光压边（对称，不偏置右侧，避免切线竖线） */
  box-shadow:
    0 20px 50px color-mix(in srgb, var(--ink) 16%, transparent),
    inset 0 0 0 1px color-mix(in srgb, #fff 7%, transparent);
  overflow: hidden;
}
/* 玻璃高光：顶部对称的柔光（左右均衡，不在右侧制造单独亮带） */
.portrait-ring::before {
  content: ""; position: absolute; inset: 10px; border-radius: 50%; pointer-events: none; z-index: 2;
  background: linear-gradient(180deg, rgba(255,255,255,.22) 0%, rgba(255,255,255,.05) 30%, transparent 56%);
}
/* 内侧暗角增加立体感（对称） */
.portrait-ring::after {
  content: ""; position: absolute; inset: 10px; border-radius: 50%; pointer-events: none; z-index: 2;
  box-shadow: inset 0 0 30px color-mix(in srgb, #000 13%, transparent);
}
.portrait-ring img { width: 100%; height: 100%; border-radius: 50%; object-fit: cover; object-position: 50% 60%; display: block; }
.portrait-cap { font-family: var(--serif); color: var(--ink-soft); letter-spacing: .18em; font-size: 15px; text-align: center; width: 100%; }

@media (max-width: 860px) {
  .hero { padding: 31px 0 26px; }
  .hero-inner { grid-template-columns: 1fr; gap: 26px; text-align: center; }
  .hero-portrait { order: -1; align-items: center; }
  .hero-text { margin-left: 0; display: block; padding-top: 0; }
  .hero-title { margin-top: 0; }
  .hero-text .stat-row { justify-content: center; width: auto; gap: 36px; flex-wrap: wrap; }
}

/* ---------- 页脚 ---------- */
.footer { border-top: 1px solid var(--line); padding: 36px 0; color: var(--ink-faint); font-size: 13px; margin-top: 40px; }
.footer .wrap { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 16px; }