/* 夜空蓝底色 + 居中 + 艺术化过渡  // 全站风格 */
:root{
  --bg:#0b1226;      /* 夜蓝主底 */
  --bg2:#132a4a;     /* 夜蓝次底 */
  --ink:#f1f5f9;    /* 主文更亮 */
  --muted:#e2e8f0;  /* 次文也更亮，不发灰 */
  --line:rgba(148,163,184,.25);
  --pink:#f9a8d4; --blue:#93c5fd;
  --radius:18px;
  --container:1800px;
  --shadow:0 12px 40px rgba(0,0,0,.28);
}

*{box-sizing:border-box}
html,body{margin:0;padding:0}
body{
  background: linear-gradient(180deg,var(--bg),var(--bg2));
  color:var(--ink);
  font: 16px/1.65 ui-sans-serif,system-ui,-apple-system,Segoe UI,Roboto,Helvetica,Arial;
  -webkit-font-smoothing:antialiased;
}

.container{max-width:var(--container);margin:0 auto;padding:0 22px}
.row{display:flex;align-items:center;justify-content:space-between}
.center{text-align:center}

/* 顶栏：深色毛玻璃 */
.topbar{
  position:sticky;top:0;z-index:50;
  backdrop-filter:saturate(150%) blur(10px);
  background:rgba(11,18,38,.55);
  border-bottom:1px solid var(--line);
}
.brand{display:flex;align-items:center;gap:8px;text-decoration:none;color:black}
.brand-icon{width:70px;height:auto}
.brand-name{font-weight:800;letter-spacing:.2px}
.brand-sub{margin-left:6px;padding:3px 8px;border-radius:999px;background:linear-gradient(90deg,#fde2f3,#dbeafe);font-size:12px}
.nav a{display:inline-block;padding:14px 10px;margin:0 2px;color:#f8fafc;text-decoration:none;border-radius:10px}
.nav a:hover{background:rgba(255,255,255,.07)}

/* HERO：轻雾 + 居中 */
.hero{position:relative;min-height:clamp(720px,88vh,880px);display:flex;align-items:center}
.bg-cover{background-size:cover;background-position:center}
.hero-overlay{
  position:absolute;inset:0;
  background:
    radial-gradient(1100px 420px at 42% 62%, rgba(255,255,255,.18), rgba(255,255,255,.06)),
    linear-gradient(180deg, rgba(249,168,212,.08), rgba(147,197,253,.06));
}
.hero-inner{position:relative;margin:auto;padding:90px 0}
.hero-title{ font-size: clamp(34px, 5vw, 60px); font-weight: 800; }
.hero-tag{   font-size: clamp(16px, 2.2vw, 20px); font-weight: 550; }
.chips{list-style:none;padding:0;margin:0 0 18px;display:flex;gap:10px;justify-content:center;flex-wrap:wrap}
.chips li{padding:8px 12px;border-radius:999px;background:linear-gradient(90deg,#fde2f3,#e0e7ff);color:#111;font-weight:700;font-size:13px}
.cta{display:flex;gap:12px;justify-content:center}
.btn{padding:12px 18px;border-radius:14px;border:1px solid var(--line);text-decoration:none;color:#111;box-shadow:var(--shadow);background:#fff}
.btn.primary{background:linear-gradient(180deg,#fce7f3,#dbeafe)}
.btn.ghost{background:#fff}

/* Apple 风：每屏 1/2 + 1/2 */
.section{min-height:clamp(640px,80vh,800px);display:grid;grid-template-rows:1fr 1fr}
.section .container{height:100%}
.intro{position:relative;display:flex;align-items:center}
.bg-photo{background-size:cover;background-position:center}
.dim-60::before{content:"";position:absolute;inset:0;background:linear-gradient(180deg, rgba(0,0,0,.38), rgba(0,0,0,.52))}
.intro .container{position:relative;z-index:1;display:flex;flex-direction:column;align-items:center;justify-content:center}
.section-title{ font-size: clamp(26px, 3.4vw, 40px); font-weight: 800; }
.section-title::after{content:"";display:block;width:76px;height:4px;border-radius:999px;margin:12px auto 0;background:linear-gradient(90deg,#f9a8d4,#93c5fd)}
.lead{ font-size: clamp(17px, 2vw, 19px); font-weight: 520; line-height: 1.78; }
.learnmore{display:inline-block;margin-top:14px;color:#f9a8d4;text-decoration:none}
.learnmore:hover{text-decoration:underline}

/* 下半：纯底色 + 白卡 */
.grid{display:flex;align-items:center}
.cards{display:grid;grid-template-columns:repeat(3,1fr);gap:18px;width:100%}
.card{
  background: rgba(255,255,255,.6);          /* 80% 白 */
  color:#0b0b0c;
  border:1px solid rgba(0,0,0,.06);
  border-radius:18px;
  box-shadow:var(--shadow);
  text-decoration:none;
  transform:translateY(6px);
  transition:transform .3s ease, box-shadow .3s ease, opacity .3s ease;
}

.card:hover{transform:translateY(0);box-shadow:0 18px 50px rgba(0,0,0,.35)}
.card-body{padding:22px}
.card h3{margin:0 0 6px}
.card p{margin:0;color:#475569}

/* 报纸风（仍用白卡） */
.newspaper{display:grid;grid-template-columns:repeat(3,1fr);gap:18px;width:100%}
.story{
  background: rgba(255,255,255,.8);          /* 80% 白 */
  color:#0b0b0c;
  border:1px solid rgba(0,0,0,.06);
  border-radius:18px;
  box-shadow:var(--shadow);
  padding:22px;
  transform:translateY(6px);
  transition:transform .3s ease, box-shadow .3s ease, opacity .3s ease;
}

.story:hover{transform:translateY(0);box-shadow:0 18px 50px rgba(0,0,0,.35)}
.story-link{text-decoration:none;font-weight:800}

/* 动画：淡入上移 + 轻微视差 */
@keyframes fadeUp{from{opacity:0;transform:translateY(18px)}to{opacity:1;transform:translateY(0)}}
.reveal{opacity:0;transform:translateY(18px)}
.reveal.in{animation:fadeUp .8s cubic-bezier(.2,.7,.2,1) forwards}

/* 响应式 */
@media (max-width:980px){
  .cards,.newspaper{grid-template-columns:repeat(2,1fr)}
}
@media (max-width:640px){
  .cards,.newspaper{grid-template-columns:1fr}
  .nav{display:none}
}


/* ===== 下半：三卡区（定宽三列，宽度锁死） ===== */
:root{
  --cards-gap: 16px;       /* 卡间距 */
  --card-w: 332px;         /* 单卡固定宽度（320~360按需调） */
  --card-h: 320px;         /* 单卡高度（你不 care 可保持） */
  --media-h: 180px;        /* 顶部图片固定高度 */
  --card-radius: 16px;     /* 圆角 */
}

/* 行容器 */
.grid{ display:flex; align-items:center; }

/* 三卡容器：像素级定宽，避免父容器差异引起的“忽宽忽窄” */
.cards,
.newspaper{ /* 报纸风也用同一套定宽规则，保持一致 */
  display: grid;
  grid-template-columns: repeat(3, var(--card-w));
  gap: var(--cards-gap);
  width: calc(var(--card-w) * 3 + var(--cards-gap) * 2);
  margin: 0 auto;
  justify-content: center;
  align-items: stretch;
  box-sizing: border-box;
}

/* 卡片：固定宽度/高度，不随文字撑大 */
.card,
.story{
  width: var(--card-w);
  height: var(--card-h);
  overflow: hidden;
  border-radius: var(--card-radius);
  background: rgba(255,255,255,.6);
  color:#0b0b0c;
  border:1px solid rgba(0,0,0,.06);
  box-shadow: var(--shadow);
  text-decoration:none;
  display:flex; flex-direction:column;
  transform: translateY(6px);
  transition: transform .3s ease, box-shadow .3s ease, opacity .3s ease;
}
.card:hover,
.story:hover{ transform:translateY(0); box-shadow:0 18px 50px rgba(0,0,0,.35); }

/* 顶部图片：固定高 + 16:9 裁切视觉 */
.card-media{
  margin:0;
  width:100%;
  height:var(--media-h);
  border-radius: var(--card-radius) var(--card-radius) 0 0;
  background:#f8fafc;
  border-bottom:1px solid rgba(0,0,0,.06);
}
.card-media img{ width:100%; height:100%; display:block; object-fit:cover; }

/* 文案：行数裁切，避免把卡撑高；间距统一 */
.card .card-body,
.story{ padding:12px 16px 16px; }
.card h3, .card p,
.story h3, .story p{
  margin:0 0 6px;
  overflow:hidden;
  display:-webkit-box;
  -webkit-box-orient:vertical;
}
.card h3, .story h3{ -webkit-line-clamp:2; font-weight:800; }
.card p,  .story p { -webkit-line-clamp:2; color:#475569; }

/* —— 响应式只改列数，并精确重算容器宽度 —— */
@media (max-width:1100px){
  .cards, .newspaper{
    grid-template-columns: repeat(2, var(--card-w));
    width: calc(var(--card-w) * 2 + var(--cards-gap) * 1);
  }
}
@media (max-width:720px){
  .cards, .newspaper{
    grid-template-columns: var(--card-w);
    width: var(--card-w);
  }
  .card, .story{ height: calc(var(--card-h) - 10px); } /* 手机端轻微收紧，可删 */
}

/* 顶栏品牌区：并列两个链接 */
.topbar .brand{
  display:inline-flex; align-items:center; gap:10px;
}

.topbar .brand-logo{
  display:inline-flex; align-items:center;
  text-decoration:none;
}
.topbar .brand-icon{
  display:block; height:28px; width:auto;
}

.topbar .brand-sub{
  font-weight:600; color:inherit; text-decoration:none;
}
.topbar .brand-sub:hover{ text-decoration:underline; }
/* =================== Brand (split links) — override patch =================== */
/* 顶栏品牌区整体：跟原来一致的对齐与间距；强制文字颜色用全站主题色，而不是黑色 */
.topbar .brand{
  display:inline-flex;
  align-items:center;
  gap:8px;
  color: var(--ink);            /* 覆盖前面 brand{color:black} 的影响 */
  text-decoration:none;
}

/* 左侧 logo 链接：点击区域更宽，垂直居中，不改变整体高度 */
.topbar .brand-logo{
  display:inline-flex;
  align-items:center;
  padding: 8px 0;              /* 与右侧 nav 的高度更协调 */
  text-decoration:none;
}

/* logo 图片尺寸回到“原来”的 70px 宽；按宽定高，避免被拉伸 */
.topbar .brand-logo .brand-icon,
.topbar .brand .brand-icon{     /* 兼容你之前的 class 写法 */
  width: 70px;
  height: auto;
  display: block;
}

/* 右侧 Stable Diffusion 胶囊：恢复原来的渐变 + 粗体 + 小字重 */
.topbar .brand-sub{
  display:inline-flex;
  align-items:center;
  margin-left: 6px;
  padding: 3px 10px;
  height: 28px;                /* 视觉上更像胶囊 */
  border-radius: 999px;
  background: linear-gradient(90deg,#fde2f3,#dbeafe);
  font-size: 12px;
  font-weight: 800;            /* 和原来的 .brand-name/.brand-sub 粗细接近 */
  letter-spacing: .2px;
  color: #111;                 /* 放在浅色胶囊上 */
  text-decoration: none;
  line-height: 1;
}

/* 悬停与键盘可达性（和原站风格一致） */
.topbar .brand-sub:hover{ filter: brightness(1.05); }
.topbar .brand-logo:hover{ opacity: .95; }
.topbar .brand a:focus-visible{
  outline: 2px solid var(--pink);
  outline-offset: 2px;
}

/* 如果你前面有这段，会把 logo 拉到 28px 高，这里把它“回正”：
.topbar .brand-icon{ display:block; height:28px; width:auto; }
上面这句高度会被我们宽度规则覆盖；为了保险，做一次强优先覆盖： */
.topbar .brand-icon{ height: auto !important; width: 70px !important; }

/* ===== Topbar -20% height (keep logo & fonts the same) ===== */
/* 原 nav 链接上下 padding: 14px → 14 * 0.8 = 11px */
.topbar .nav a { padding: 11px 10px; }

/* 原 brand-logo 上下 padding: 8px → 6px */
.topbar .brand-logo { padding: 1px 0; }

/* 如果你的顶栏仍显高，可选再收一点行高（不改字号） */
// .topbar { line-height: 1.4; }  /* 可选 */

/* ===== Stable Diffusion capsule: no underline on hover ===== */
.topbar .brand-sub,
.topbar .brand-sub:hover,
.topbar .brand-sub:focus {
  text-decoration: none !important;
}

/* ===== Apple-split 高度锁死 + 卡片区内部滚动修复 ===== */


/* 所有 apple-split section：锁高度在一屏左右，避免被多行卡片撑得无限长 */
.section.apple-split{
  /* 原来就有 min-height，这里顺便加个 max-height 并统一定义 */
  min-height: clamp(640px, 80vh, 800px);
  max-height: clamp(640px, 80vh, 800px);
  display: grid;
  grid-template-rows: minmax(260px,1fr) minmax(260px,1fr); /* 上下两半 */
  overflow: hidden; /* 超出部分交给内部容器滚动 */
}


/* 下半部分格子占满剩余高度，方便内部滚动 */
.section.apple-split .grid{
  align-items: stretch;
  height: 100%;
}


/* 卡片 & 报纸风：高度限制为可用高度，内部竖向滚动 */
/* 这里用到你之前的 var(--card-w / --card-h / --cards-gap) 不冲突 */
.section.apple-split .cards,
.section.apple-split .newspaper{
  max-height: 100%;
  overflow-y: auto;
  padding-right: 6px;              /* 给滚动条留点位置，避免贴边 */
}


/* 美化一下滚动条（可选） */
.section.apple-split .cards::-webkit-scrollbar,
.section.apple-split .newspaper::-webkit-scrollbar{
  width: 6px;
}
.section.apple-split .cards::-webkit-scrollbar-thumb,
.section.apple-split .newspaper::-webkit-scrollbar-thumb{
  border-radius: 999px;
  background: rgba(148,163,184,.6);
}


/* ===== 移动端：不要锁高度，正常整页往下滚就好 ===== */
@media (max-width: 720px){
  .section.apple-split{
    min-height: auto;
    max-height: none;
    grid-template-rows: auto auto;
  }


  .section.apple-split .cards,
  .section.apple-split .newspaper{
    max-height: none;
    overflow: visible;
    padding-right: 0;
  }
}

/* ===== Featured Guides – 左右布局 + 可滚动列表 ===== */


/* 覆盖通用 .section 的大高度 & grid 布局 */
.section.section-articles{
  display:block;
  min-height:auto;
  padding:72px 0 90px;
}


/* 整体左右两栏 */
.section-articles .articles-layout{
  display:grid;
  grid-template-columns: minmax(0, 1.1fr) minmax(0, 2.2fr);
  gap:32px;
  align-items:flex-start;
}


/* 左侧说明：对齐到左边，保持你原来 section-title / lead 的风格 */
.section-articles .articles-intro{
  text-align:left;
}


.section-articles .articles-intro .section-title::after{
  margin-left:0;           /* 小横条从左边开始，而不是居中 */
}


.section-articles .articles-intro .lead{
  margin-top:14px;
}


/* 右侧文章池：两列 + 限高 + 内部滚动（桌面端） */
.section-articles .articles-list{
  display:grid;
  grid-template-columns: 1fr 1fr;
  gap:16px;
  max-height:640px;        /* 文章再多也不会把整个页面撑爆 */
  overflow-y:auto;
  padding-right:4px;       /* 给滚动条留一点空间，避免紧贴边缘 */
}


/* 单条文章卡片：横向布局，左图右文 */
.section-articles .article-card{
  display:flex;
  align-items:flex-start;
  gap:12px;
  padding:10px 12px;
  border-radius:16px;
  background:rgba(255,255,255,.6);
  color:#0b0b0c;
  border:1px solid rgba(0,0,0,.06);
  box-shadow:var(--shadow);
  text-decoration:none;
  transform:translateY(0);
  transition:transform .2s ease, box-shadow .2s ease, opacity .2s ease;
}


.section-articles .article-card:hover{
  transform:translateY(-1px);
  box-shadow:0 18px 50px rgba(0,0,0,.35);
}


/* 缩略图：固定小块，不抢版面 */
/* 缩略图：固定宽度 + 16:9 比例，适配 1920×1080 截图 */
.section-articles .article-thumb{
  flex:0 0 128px;        /* 你可以按喜好调大/调小，比如 120 / 140 */
  width:128px;
  aspect-ratio:16 / 9;   /* 关键：锁定 16:9，不再挤成 4:3 */
  margin:0;
  border-radius:12px;
  overflow:hidden;
  background:#f8fafc;
}


.section-articles .article-thumb img{
  width:100%;
  height:100%;
  object-fit:cover;      /* 只上下裁一点，不再左右砍太多 */
  display:block;
}


/* 文案区：两行标题 + 一行描述，超出省略 */
.section-articles .article-body h3{
  margin:0 0 4px;
  font-size:15px;
  font-weight:800;
  line-height:1.4;
  overflow:hidden;
  display:-webkit-box;
  -webkit-box-orient:vertical;
  -webkit-line-clamp:2;
}


.section-articles .article-body p{
  margin:0;
  font-size:13px;
  color:#475569;
  overflow:hidden;
  display:-webkit-box;
  -webkit-box-orient:vertical;
  -webkit-line-clamp:2;
}


/* 响应式：窄屏堆叠，列表不再内部滚动，改成正常整页向下滚 */
@media (max-width: 1100px){
  .section-articles .articles-layout{
    grid-template-columns: 1fr;
  }


  .section-articles .articles-intro{
    text-align:center;
  }


  .section-articles .articles-intro .section-title::after{
    margin-left:auto;
    margin-right:auto;
  }


  .section-articles .articles-list{
    max-height:none;
    overflow:visible;
    grid-template-columns:1fr;
  }
}