/* ============================================================
   About 页面专属样式
   暗色模式：跟随 Cuteen 的 html.dark 类机制
   字体：Google Fonts Inter + Noto Serif SC
   ============================================================ */

@import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600&family=Noto+Serif+SC:wght@400;600&family=Crimson+Pro:ital,wght@0,400;0,600;1,400&display=swap');

/* ---- CSS 变量 ---- */
:root {
  --ab-bg: #fafafa;
  --ab-bg-alt: #f5f5f5;
  --ab-text: #1a1a1a;
  --ab-text-muted: #6b6b6b;
  --ab-text-faint: #aaaaaa;
  --ab-border: #e8e8e8;
  --ab-accent: #1a1a1a;
  --ab-link: #1a1a1a;
  --ab-hero-bg: var(--ab-bg);
  --ab-hero-text: var(--ab-text);
  --ab-hero-muted: var(--ab-text-muted);
  --ab-section-gap: 8rem;
  --ab-font-sans: 'Inter', 'MiSans', -apple-system, sans-serif;
  --ab-font-serif: 'Crimson Pro', 'Noto Serif SC', Georgia, serif;
  --ab-radius: 4px;
  --ab-transition: 0.25s ease;
}

.dark {
  --ab-bg: #0F172A;
  --ab-bg-alt: #1e293b;
  --ab-text: #e8e8e8;
  --ab-text-muted: #94a3b8;
  --ab-text-faint: #475569;
  --ab-border: #1e293b;
  --ab-accent: #e8e8e8;
  --ab-link: #e8e8e8;
}

/* ---- 页面基础重置 ---- */
.about-page {
  background: var(--ab-bg);
  color: var(--ab-text);
  font-family: var(--ab-font-sans);
  font-size: 16px;
  line-height: 1.8;
  -webkit-font-smoothing: antialiased;
}

.about-page * {
  box-sizing: border-box;
}

.about-page a {
  color: var(--ab-link);
  text-decoration: none;
  border-bottom: 1px solid var(--ab-border);
  transition: border-color var(--ab-transition), opacity var(--ab-transition);
}

.about-page a:hover {
  border-color: var(--ab-text);
  opacity: 0.75;
}

/* ---- 通用容器 ---- */
.ab-container {
  max-width: 960px;
  margin: 0 auto;
  padding: 0 2rem;
}

.ab-container--wide {
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 2rem;
}

/* ---- Section 通用 ---- */
.ab-section {
  padding: var(--ab-section-gap) 0;
  border-top: 1px solid var(--ab-border);
}

.ab-section:first-of-type {
  border-top: none;
}

.ab-section-label {
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--ab-text-muted);
  margin-bottom: 2rem;
  display: block;
}

.ab-section-title {
  font-family: var(--ab-font-serif);
  font-size: clamp(1.8rem, 3vw, 2.4rem);
  font-weight: 600;
  line-height: 1.3;
  color: var(--ab-text);
  margin: 0 0 1.5rem 0;
}

/* ============================================================
   01 HERO
   ============================================================ */
.ab-hero {
  min-height: 100vh;
  background: var(--ab-hero-bg);
  display: flex;
  align-items: center;
  position: relative;
  overflow: hidden;
  border-bottom: 1px solid var(--ab-border);
}

.ab-hero__inner {
  max-width: 960px;
  margin: 0 auto;
  padding: 0 2rem;
  width: 100%;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 4rem;
  align-items: center;
  padding-top: 80px;
}

/* 左侧文字 */
.ab-hero__text {
  color: var(--ab-hero-text);
}

.ab-hero__eyebrow {
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--ab-hero-muted);
  margin-bottom: 1.5rem;
  display: block;
}

.ab-hero__name {
  font-family: var(--ab-font-serif);
  font-size: clamp(3rem, 6vw, 5rem);
  font-weight: 600;
  line-height: 1.1;
  margin: 0 0 0.5rem 0;
  color: var(--ab-text);
  letter-spacing: -0.02em;
}

.ab-hero__title {
  font-size: 1rem;
  color: var(--ab-hero-muted);
  margin: 0 0 2rem 0;
  font-weight: 300;
}

.ab-hero__tags {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  margin-bottom: 2.5rem;
}

/* 马卡龙配色标签 */
.ab-hero__tag {
  font-size: 12px;
  font-weight: 500;
  letter-spacing: 0.03em;
  padding: 4px 12px;
  border-radius: 20px;
  display: inline-block;
}

.ab-hero__tag:not(:last-child)::after {
  content: none;
}

.ab-hero__tag:nth-child(1) { background: #fce7f3; color: #be185d; }
.ab-hero__tag:nth-child(2) { background: #dbeafe; color: #1d4ed8; }
.ab-hero__tag:nth-child(3) { background: #dcfce7; color: #15803d; }
.ab-hero__tag:nth-child(4) { background: #fef9c3; color: #a16207; }
.ab-hero__tag:nth-child(5) { background: #ede9fe; color: #6d28d9; }

/* 暗色模式下的马卡龙标签 */
.dark .ab-hero__tag:nth-child(1) { background: rgba(252,231,243,0.12); color: #f9a8d4; }
.dark .ab-hero__tag:nth-child(2) { background: rgba(219,234,254,0.12); color: #93c5fd; }
.dark .ab-hero__tag:nth-child(3) { background: rgba(220,252,231,0.12); color: #86efac; }
.dark .ab-hero__tag:nth-child(4) { background: rgba(254,249,195,0.12); color: #fde047; }
.dark .ab-hero__tag:nth-child(5) { background: rgba(237,233,254,0.12); color: #c4b5fd; }

.ab-hero__bio {
  font-size: 1.05rem;
  line-height: 1.8;
  color: var(--ab-text-muted);
  max-width: 440px;
  font-style: italic;
  font-family: var(--ab-font-serif);
}

.ab-hero__links {
  margin-top: 2.5rem;
  display: flex;
  gap: 1.5rem;
}

.ab-hero__link {
  font-size: 13px;
  color: var(--ab-text-muted) !important;
  border-bottom: 1px solid var(--ab-border) !important;
  letter-spacing: 0.05em;
  transition: color var(--ab-transition), border-color var(--ab-transition);
}

.ab-hero__link:hover {
  color: var(--ab-text) !important;
  border-color: var(--ab-text) !important;
  opacity: 1 !important;
}

/* 右侧照片 */
.ab-hero__photo {
  position: relative;
  display: flex;
  justify-content: center;
}

.ab-hero__img-wrap {
  width: 340px;
  height: 420px;
  position: relative;
}

.ab-hero__img-wrap::before {
  content: '';
  position: absolute;
  inset: -12px -12px 12px 12px;
  border: 1px solid var(--ab-border);
  border-radius: var(--ab-radius);
  z-index: 0;
}

.ab-hero__img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: var(--ab-radius);
  position: relative;
  z-index: 1;
  filter: grayscale(15%);
}

/* 占位（无图时） */
.ab-hero__img-placeholder {
  width: 100%;
  height: 100%;
  border-radius: var(--ab-radius);
  background: var(--ab-bg-alt);
  border: 1px solid var(--ab-border);
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--ab-text-faint);
  font-size: 80px;
  position: relative;
  z-index: 1;
}

/* 滚动提示 */
.ab-hero__scroll {
  position: absolute;
  bottom: 2.5rem;
  left: 50%;
  transform: translateX(-50%);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.5rem;
  color: var(--ab-text-faint);
  font-size: 11px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}

.ab-hero__scroll-line {
  width: 1px;
  height: 40px;
  background: linear-gradient(to bottom, var(--ab-text-faint), transparent);
  animation: ab-scroll-line 1.5s ease-in-out infinite;
}

@keyframes ab-scroll-line {
  0%, 100% { opacity: 0.3; transform: scaleY(1); }
  50% { opacity: 0.8; transform: scaleY(1.2); }
}

/* ============================================================
   02 WHO I AM
   ============================================================ */
.ab-who {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 5rem;
  align-items: start;
}

.ab-who__intro {
  font-size: 1.05rem;
  line-height: 1.9;
  color: var(--ab-text);
}

.ab-who__intro p + p {
  margin-top: 1.2rem;
}

.ab-who__fields {
  display: flex;
  flex-direction: column;
  gap: 1.5rem;
}

.ab-who__field-label {
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--ab-text-faint);
  margin-bottom: 0.3rem;
  display: block;
}

.ab-who__field-value {
  font-size: 0.95rem;
  color: var(--ab-text-muted);
  line-height: 1.6;
}

/* ============================================================
   03 JOURNEY — 纵向时间轴
   ============================================================ */
.ab-journey__list {
  position: relative;
  padding-left: 2rem;
}

/* 左侧竖线 */
.ab-journey__list::before {
  content: '';
  position: absolute;
  left: 0;
  top: 6px;
  bottom: 6px;
  width: 1px;
  background: var(--ab-border);
}

.ab-journey__item {
  position: relative;
  padding: 0 0 3.5rem 2.5rem;
  opacity: 0;
  transform: translateY(16px);
  transition: opacity 0.5s ease, transform 0.5s ease;
}

.ab-journey__item.ab-visible {
  opacity: 1;
  transform: none;
}

/* 时间轴圆点 */
.ab-journey__item::before {
  content: '';
  position: absolute;
  left: -4.5px;
  top: 6px;
  width: 9px;
  height: 9px;
  border-radius: 50%;
  background: var(--ab-text-faint);
  border: 2px solid var(--ab-bg);
  transition: background var(--ab-transition);
}

.ab-journey__item:hover::before {
  background: var(--ab-text);
}

.ab-journey__year {
  font-size: 12px;
  font-weight: 500;
  letter-spacing: 0.1em;
  color: var(--ab-text-faint);
  display: block;
  margin-bottom: 0.4rem;
}

.ab-journey__title {
  font-size: 1.05rem;
  font-weight: 500;
  color: var(--ab-text);
  margin: 0 0 0.5rem 0;
}

.ab-journey__desc {
  font-size: 0.93rem;
  color: var(--ab-text-muted);
  line-height: 1.7;
  max-width: 560px;
}

.ab-journey__link {
  display: inline-block;
  margin-top: 0.6rem;
  font-size: 12px;
  color: var(--ab-text-faint) !important;
  border-bottom: 1px solid var(--ab-border) !important;
}

.ab-journey__img {
  margin-top: 0.8rem;
  width: 180px;
  height: 110px;
  object-fit: cover;
  border-radius: var(--ab-radius);
  opacity: 0.85;
  filter: grayscale(20%);
}

/* ============================================================
   04 WHAT I DO
   ============================================================ */
.ab-what {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 3rem 4rem;
}

.ab-what__item {}

.ab-what__keyword {
  font-family: var(--ab-font-serif);
  font-size: 2rem;
  font-weight: 600;
  color: var(--ab-text);
  margin: 0 0 0.6rem 0;
  line-height: 1.2;
}

.ab-what__desc {
  font-size: 0.93rem;
  color: var(--ab-text-muted);
  line-height: 1.8;
}

/* ============================================================
   05 RESEARCH
   ============================================================ */
.ab-research__desc {
  font-size: 1rem;
  color: var(--ab-text-muted);
  max-width: 640px;
  margin-bottom: 3rem;
  line-height: 1.8;
}

/* ECharts 容器 */
.ab-research__chart {
  width: 100%;
  height: 420px;
  background: var(--ab-bg-alt);
  border-radius: var(--ab-radius);
  border: 1px solid var(--ab-border);
}

.ab-research__areas {
  margin-top: 3rem;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1.5rem;
}

.ab-research__area {
  padding: 1.5rem 0;
  border-top: 1px solid var(--ab-border);
}

.ab-research__area-name {
  font-size: 0.85rem;
  font-weight: 500;
  color: var(--ab-text);
  margin: 0 0 0.5rem 0;
}

.ab-research__area-desc {
  font-size: 0.83rem;
  color: var(--ab-text-muted);
  line-height: 1.7;
}

.ab-research__area-link {
  display: inline-block;
  margin-top: 0.5rem;
  font-size: 11px;
  color: var(--ab-text-faint) !important;
  border-bottom-color: var(--ab-border) !important;
}

/* ============================================================
   06 PROJECTS
   ============================================================ */
.ab-projects__list {
  display: flex;
  flex-direction: column;
  gap: 4rem;
}

/* 精选大项目 */
.ab-project--featured {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 3rem;
  align-items: center;
}

.ab-project--featured:nth-child(even) .ab-project__img-wrap {
  order: -1;
}

.ab-project__img-wrap {
  aspect-ratio: 4/3;
  overflow: hidden;
  border-radius: var(--ab-radius);
  background: var(--ab-bg-alt);
  border: 1px solid var(--ab-border);
}

.ab-project__img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  filter: grayscale(15%);
  transition: filter var(--ab-transition), transform 0.4s ease;
}

.ab-project__img-wrap:hover .ab-project__img {
  filter: grayscale(0%);
  transform: scale(1.02);
}

.ab-project__img-placeholder {
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--ab-text-faint);
  font-size: 40px;
}

.ab-project__year {
  font-size: 11px;
  letter-spacing: 0.1em;
  color: var(--ab-text-faint);
  display: block;
  margin-bottom: 0.5rem;
}

.ab-project__title {
  font-size: 1.3rem;
  font-weight: 500;
  color: var(--ab-text);
  margin: 0 0 0.8rem 0;
  line-height: 1.3;
}

.ab-project__desc {
  font-size: 0.93rem;
  color: var(--ab-text-muted);
  line-height: 1.8;
  margin-bottom: 1rem;
}

.ab-project__tags {
  display: flex;
  flex-wrap: wrap;
  gap: 0.4rem;
  margin-bottom: 1rem;
}

.ab-project__tag {
  font-size: 11px;
  color: var(--ab-text-faint);
  border: 1px solid var(--ab-border);
  border-radius: 2px;
  padding: 2px 8px;
  background: var(--ab-bg-alt);
}

.ab-project__links {
  display: flex;
  gap: 1.2rem;
}

.ab-project__link {
  font-size: 12px;
  color: var(--ab-text-muted) !important;
  letter-spacing: 0.04em;
}

/* 普通项目行 */
.ab-project--normal {
  padding: 2rem 0;
  border-top: 1px solid var(--ab-border);
  display: flex;
  gap: 2rem;
  align-items: start;
}

.ab-project--normal .ab-project__year {
  min-width: 60px;
  padding-top: 3px;
}

/* ============================================================
   07 LIFE
   ============================================================ */
.ab-life__intro {
  font-family: var(--ab-font-serif);
  font-size: 1.15rem;
  line-height: 1.9;
  color: var(--ab-text-muted);
  max-width: 720px;
  margin-bottom: 2.5rem;
}

.ab-life__grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 1.5rem;
  margin-top: 1.5rem;
}

.ab-life__card {
  position: relative;
  background: var(--ab-bg-alt);
  border: 1px solid var(--ab-border);
  border-radius: 12px;
  padding: 1.75rem 2rem;
  transition: transform var(--ab-transition), border-color var(--ab-transition), box-shadow var(--ab-transition);
  display: flex;
  flex-direction: column;
}

.ab-life__card:hover {
  transform: translateY(-2px);
  border-color: rgba(99, 102, 241, 0.3);
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.04);
}

/* 陪伴与重要的人 暖色调高亮卡片 */
.ab-life__card--highlight {
  background: linear-gradient(145deg, rgba(254, 242, 242, 0.9) 0%, rgba(255, 247, 237, 0.75) 100%);
  border: 1px solid rgba(244, 114, 182, 0.3);
  box-shadow: 0 4px 16px rgba(244, 114, 182, 0.06);
}

.ab-life__card--highlight:hover {
  border-color: rgba(244, 114, 182, 0.55);
  box-shadow: 0 8px 28px rgba(244, 114, 182, 0.12);
}

.ab-life__card--highlight .ab-life__tag {
  background: #fee2e2;
  color: #be123c;
  border-color: rgba(244, 114, 182, 0.3);
}

.dark .ab-life__card--highlight {
  background: linear-gradient(145deg, rgba(76, 29, 60, 0.35) 0%, rgba(67, 30, 75, 0.25) 100%);
  border: 1px solid rgba(244, 114, 182, 0.25);
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.2);
}

.dark .ab-life__card--highlight .ab-life__tag {
  background: rgba(244, 114, 182, 0.2);
  color: #f472b6;
  border-color: rgba(244, 114, 182, 0.3);
}

.ab-life__tag {
  display: inline-block;
  align-self: flex-start;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--ab-text-muted);
  background: var(--ab-bg);
  border: 1px solid var(--ab-border);
  padding: 3px 10px;
  border-radius: 9999px;
  margin-bottom: 1rem;
}

.ab-life__card-title {
  font-size: 1.15rem;
  font-weight: 600;
  color: var(--ab-text);
  margin: 0 0 0.75rem 0;
  line-height: 1.4;
}

.ab-life__card-desc {
  font-size: 0.92rem;
  color: var(--ab-text-muted);
  line-height: 1.8;
  margin: 0;
  flex-grow: 1;
}

@media (max-width: 768px) {
  .ab-life__grid {
    grid-template-columns: 1fr;
    gap: 1.25rem;
  }
  .ab-life__card {
    padding: 1.5rem;
  }
}

/* ============================================================
   11 CURRENTLY
   ============================================================ */
.ab-now__grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 0;
}

.ab-now__item {
  padding: 2rem 2rem 2rem 0;
  border-top: 1px solid var(--ab-border);
}

.ab-now__item:nth-child(n+4) {
  border-top: 1px solid var(--ab-border);
  padding-top: 2rem;
  margin-top: 0;
}

.ab-now__label {
  font-size: 11px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--ab-text-faint);
  display: block;
  margin-bottom: 0.5rem;
}

.ab-now__value {
  font-size: 0.93rem;
  color: var(--ab-text);
  line-height: 1.6;
}

.ab-now__updated {
  margin-top: 3rem;
  font-size: 12px;
  color: var(--ab-text-faint);
  letter-spacing: 0.05em;
}

/* ============================================================
   12 FUTURE
   ============================================================ */
.ab-future__list {
  list-style: none;
  padding: 0;
  margin: 0;
  max-width: 640px;
}

.ab-future__list li {
  padding: 1rem 0;
  border-bottom: 1px solid var(--ab-border);
  font-size: 1rem;
  color: var(--ab-text-muted);
  line-height: 1.6;
  display: flex;
  gap: 1rem;
  align-items: start;
}

.ab-future__list li::before {
  content: '→';
  color: var(--ab-text-faint);
  flex-shrink: 0;
  margin-top: 1px;
}

/* ============================================================
   13 THINGS I'M BUILDING (Unfinished)
   ============================================================ */
.ab-unfinished__header {
  display: flex;
  align-items: baseline;
  gap: 1.5rem;
  margin-bottom: 2.5rem;
}

.ab-unfinished__updated {
  font-size: 12px;
  color: var(--ab-text-faint);
  letter-spacing: 0.05em;
}

.ab-unfinished__list {
  list-style: none;
  padding: 0;
  margin: 0;
  max-width: 680px;
}

.ab-unfinished__item {
  padding: 1.2rem 0;
  border-bottom: 1px solid var(--ab-border);
  display: flex;
  gap: 1rem;
  align-items: start;
}

.ab-unfinished__bullet {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  border: 1.5px solid var(--ab-text-faint);
  flex-shrink: 0;
  margin-top: 6px;
}

.ab-unfinished__content {}

.ab-unfinished__title {
  font-size: 0.95rem;
  font-weight: 500;
  color: var(--ab-text);
  margin: 0 0 0.3rem 0;
}

.ab-unfinished__note {
  font-size: 0.88rem;
  color: var(--ab-text-muted);
  line-height: 1.6;
}

/* ============================================================
   14 WHY THIS WEBSITE
   ============================================================ */
.ab-why {
  text-align: center;
  padding-bottom: calc(var(--ab-section-gap) + 2rem);
}

.ab-why__text {
  max-width: 600px;
  margin: 0 auto 3rem;
  font-size: 1.05rem;
  color: var(--ab-text-muted);
  line-height: 1.9;
  font-family: var(--ab-font-serif);
}

.ab-why__text p + p {
  margin-top: 1.2rem;
}

.ab-why__ending {
  font-family: var(--ab-font-serif);
  font-size: clamp(1.8rem, 4vw, 3rem);
  font-style: italic;
  color: var(--ab-text);
  letter-spacing: -0.01em;
  margin: 0;
  line-height: 1.3;
}

/* ============================================================
   07 LIFE  08 PHOTOGRAPHY  09 BOOKS/MOVIES/MUSIC  10 THOUGHTS
   ============================================================ */

/* --- Photography Masonry --- */
.ab-photo__grid {
  column-count: 3;
  column-gap: 1rem;
}

.ab-photo__item {
  break-inside: avoid;
  margin-bottom: 1.5rem;
  border-radius: var(--ab-radius);
  background: var(--ab-bg-alt);
}

.ab-photo__item a[data-fslightbox] {
  display: block;
  overflow: hidden;
  border-radius: var(--ab-radius);
  border-bottom: none !important;
}

.ab-photo__img {
  width: 100%;
  height: auto;
  display: block;
  filter: grayscale(8%);
  transition: filter 0.4s ease, transform 0.5s ease;
}

.ab-photo__item a:hover .ab-photo__img {
  filter: grayscale(0%);
  transform: scale(1.02);
}

/* 直接展示在图片下方的信息区域 */
.ab-photo__info {
  padding: 0.6rem 0.2rem 0;
}

.ab-photo__caption {
  font-size: 12px;
  color: var(--ab-text-muted);
  line-height: 1.5;
  display: block;
}

.ab-photo__meta {
  font-size: 11px;
  color: var(--ab-text-faint);
  margin-top: 3px;
  display: block;
  letter-spacing: 0.02em;
}

/* --- Life 分区 --- */
.ab-life__intro {
  font-size: 1rem;
  color: var(--ab-text-muted);
  max-width: 560px;
  margin-bottom: 3rem;
  line-height: 1.8;
}

/* --- Books / Movies / Music --- */
.ab-media {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 3rem;
}

.ab-media__group-title {
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  color: var(--ab-text-faint);
  margin: 0 0 1.5rem 0;
  padding-bottom: 0.8rem;
  border-bottom: 1px solid var(--ab-border);
}

.ab-media__list {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 1rem;
}

.ab-media__item-title {
  font-size: 0.9rem;
  color: var(--ab-text);
  font-weight: 500;
  line-height: 1.3;
  display: block;
}

.ab-media__item-sub {
  font-size: 0.82rem;
  color: var(--ab-text-faint);
  display: block;
  margin-top: 2px;
}

.ab-media__item-status {
  font-size: 10px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--ab-text-faint);
  border: 1px solid var(--ab-border);
  border-radius: 2px;
  padding: 1px 5px;
  display: inline-block;
  margin-top: 3px;
}

/* --- Thoughts --- */
.ab-thoughts__list {
  display: flex;
  flex-direction: column;
  gap: 0;
}

.ab-thought__item {
  padding: 2rem 0;
  border-bottom: 1px solid var(--ab-border);
  display: grid;
  grid-template-columns: 120px 1fr;
  gap: 2rem;
}

.ab-thought__meta {
  padding-top: 3px;
}

.ab-thought__date {
  font-size: 12px;
  color: var(--ab-text-faint);
  display: block;
  margin-bottom: 0.3rem;
}

.ab-thought__tag {
  font-size: 10px;
  color: var(--ab-text-faint);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  border: 1px solid var(--ab-border);
  border-radius: 2px;
  padding: 1px 5px;
  display: inline-block;
}

.ab-thought__title {
  font-size: 1rem;
  font-weight: 500;
  color: var(--ab-text);
  margin: 0 0 0.5rem 0;
}

.ab-thought__excerpt {
  font-size: 0.9rem;
  color: var(--ab-text-muted);
  line-height: 1.7;
  margin-bottom: 0.5rem;
}

.ab-thought__link {
  font-size: 12px;
  color: var(--ab-text-faint) !important;
}

/* --- Contact --- */
.ab-contact__links {
  display: flex;
  flex-wrap: wrap;
  gap: 2rem;
  margin-top: 2rem;
}

.ab-contact__link {
  font-size: 0.95rem;
  color: var(--ab-text) !important;
  border-bottom: 1px solid var(--ab-border) !important;
  display: flex;
  align-items: center;
  gap: 0.4rem;
}

/* ============================================================
   FOOTER 覆盖（about 页内不使用 Cuteen 默认 main 包裹）
   ============================================================ */
.about-page #footer {
  background: var(--ab-bg-alt) !important;
  border-top: 1px solid var(--ab-border);
  margin-top: 0;
}

.dark.about-page #footer {
  background: #0a1120 !important;
}

/* ============================================================
   SECTION INDEX 导航（右侧固定小导航，桌面端）
   ============================================================ */
.ab-sidenav {
  position: fixed;
  right: 2rem;
  top: 50%;
  transform: translateY(-50%);
  display: flex;
  flex-direction: column;
  gap: 0.6rem;
  z-index: 100;
}

.ab-sidenav__dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--ab-text-faint);
  cursor: pointer;
  transition: background var(--ab-transition), transform var(--ab-transition);
  position: relative;
}

.ab-sidenav__dot:hover,
.ab-sidenav__dot.ab-active {
  background: var(--ab-text);
  transform: scale(1.4);
}

.ab-sidenav__dot:hover::after {
  content: attr(data-label);
  position: absolute;
  right: 16px;
  top: 50%;
  transform: translateY(-50%);
  font-size: 11px;
  color: var(--ab-text-muted);
  white-space: nowrap;
  background: var(--ab-bg);
  padding: 2px 6px;
  border-radius: 2px;
  border: 1px solid var(--ab-border);
}

/* ============================================================
   RESPONSIVE
   ============================================================ */
@media (max-width: 900px) {
  :root {
    --ab-section-gap: 5rem;
  }

  .ab-hero__inner {
    grid-template-columns: 1fr;
    gap: 3rem;
    padding-top: 100px;
    padding-bottom: 4rem;
  }

  .ab-hero__img-wrap {
    width: 240px;
    height: 300px;
    margin: 0 auto;
  }

  .ab-who {
    grid-template-columns: 1fr;
    gap: 2.5rem;
  }

  .ab-what {
    grid-template-columns: 1fr;
    gap: 2rem;
  }

  .ab-research__areas {
    grid-template-columns: repeat(2, 1fr);
  }

  .ab-project--featured {
    grid-template-columns: 1fr;
    gap: 2rem;
  }

  .ab-project--featured:nth-child(even) .ab-project__img-wrap {
    order: 0;
  }

  .ab-now__grid {
    grid-template-columns: repeat(2, 1fr);
  }

  .ab-media {
    grid-template-columns: 1fr;
    gap: 2.5rem;
  }

  .ab-thought__item {
    grid-template-columns: 1fr;
    gap: 0.5rem;
  }

  .ab-sidenav {
    display: none;
  }
}

@media (max-width: 600px) {
  :root {
    --ab-section-gap: 4rem;
  }

  .ab-container,
  .ab-container--wide {
    padding: 0 1.25rem;
  }

  .ab-hero__name {
    font-size: 2.5rem;
  }

  .ab-photo__grid {
    column-count: 2;
  }

  .ab-research__areas {
    grid-template-columns: 1fr;
  }

  .ab-now__grid {
    grid-template-columns: 1fr;
  }

  .ab-why__ending {
    font-size: 1.6rem;
  }
}

@media (max-width: 400px) {
  .ab-photo__grid {
    column-count: 1;
  }
}

/* ============================================================
   覆盖 Cuteen 原有样式对 About 页面的干扰
   ============================================================ */

/* Cuteen 的 main#wrap 有 max-width 和 padding，About 页面不需要 */
#wrap.about-page {
  max-width: none !important;
  padding: 0 !important;
  margin: 0 !important;
}

/* Cuteen vendor.min.css 给 body 设置背景，About 页面用自己的变量 */
body:has(main.about-page) {
  background: var(--ab-bg) !important;
}

/* Cuteen navbar 在 About 页面适配浅色和暗色模式，解决浅色 Hero 下白字冲突问题 */
.about-page #navPC,
body.about-page #navPC {
  background: rgba(255, 255, 255, 0.85) !important;
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  border-bottom: 1px solid var(--ab-border) !important;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.03) !important;
}

.about-page #navPC .logo-text,
.about-page #navPC .navbar-brand,
.about-page #navPC .navbar-nav .nav-link,
.about-page #navPC .navbar-icon {
  color: var(--ab-text) !important;
  transition: color var(--ab-transition-fast);
}

.about-page #navPC .navbar-nav .nav-link:hover,
.about-page #navPC .navbar-icon:hover {
  color: var(--ab-primary) !important;
}

/* 滚动状态下的过渡 */
.about-page #navPC.headroom--not-top:not(.headroom--top) {
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.06) !important;
}

/* 暗色模式下的导航栏 */
.dark.about-page #navPC,
.dark .about-page #navPC,
.about-page.dark #navPC,
.dark body.about-page #navPC {
  background: rgba(15, 23, 42, 0.85) !important;
  border-bottom: 1px solid var(--ab-border) !important;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.25) !important;
}

.dark.about-page #navPC .logo-text,
.dark .about-page #navPC .logo-text,
.dark.about-page #navPC .navbar-brand,
.dark .about-page #navPC .navbar-brand,
.dark.about-page #navPC .navbar-nav .nav-link,
.dark .about-page #navPC .navbar-nav .nav-link,
.dark.about-page #navPC .navbar-icon,
.dark .about-page #navPC .navbar-icon {
  color: var(--ab-text) !important;
}

.dark.about-page #navPC .navbar-nav .nav-link:hover,
.dark .about-page #navPC .navbar-nav .nav-link:hover,
.dark.about-page #navPC .navbar-icon:hover,
.dark .about-page #navPC .navbar-icon:hover {
  color: var(--ab-primary) !important;
}

/* Cuteen footer 背景在 About 页面的调整 */
#wrap.about-page + #footer {
  background: var(--ab-bg-alt) !important;
  border-top: 1px solid var(--ab-border);
}

/* 修复 Cuteen 默认给 section 的外边距 */
.about-page section.card {
  display: none;
}

/* About 页面的超链接不使用 Cuteen typography 样式 */
.ab-hero a,
.ab-section a {
  text-decoration: none;
}

/* 移除 Cuteen 容器在 About 页面内的 mt-4 影响 */
#wrap.about-page .row {
  margin: 0;
}

/* fslightbox 灯箱触发链接不显示下划线 */
.ab-photo__item a[data-fslightbox] {
  border-bottom: none !important;
  display: block;
}