/* 蛙鸣工作室导航页 —— 只写本页新增的部分。
   配色 / 圆角 / 阴影 / 字体全部沿用 base.css 的变量与 layout.css、components.css 的既有组件，
   与奶图网、奶蛙大乱斗官网保持同一套视觉（含日间 / 夜间双主题）。*/

/* ---------------- 首屏 ---------------- */

.st-hero{text-align:center;padding:56px 0 10px}
/* 吉祥物是 320×340 的竖构图，只约束高度、宽度自适应，避免拉伸 */
.st-mascot{height:158px;width:auto;display:block;margin:0 auto 20px}
.st-title{
  font-family:var(--font-display);
  font-size:clamp(34px,5.6vw,54px);
  letter-spacing:.18em;margin:0 0 4px;color:var(--text);
  text-indent:.18em;   /* 补偿末字后多出的字距，视觉居中 */
}
/* 口号：做成比正文重的衬线字，用主色，比灰色小字更有分量 */
.st-sub{
  font-family:var(--font-display);
  color:var(--primary);
  font-size:clamp(15px,2.1vw,19px);
  letter-spacing:.08em;
  line-height:1.85;
  max-width:560px;margin:16px auto 0;
}

/* ---------------- 三个入口 ---------------- */

.st-grid{
  display:grid;grid-template-columns:repeat(3,1fr);
  gap:20px;margin:44px 0 10px;
}
.st-card{
  display:flex;flex-direction:column;
  background:var(--surface);border:1px solid var(--border);
  border-radius:var(--radius-lg);padding:26px 24px 22px;
  box-shadow:var(--shadow-sm);
  text-decoration:none;color:inherit;
  transition:transform .18s ease, box-shadow .18s ease, border-color .18s ease;
}
a.st-card:hover{
  transform:translateY(-3px);
  box-shadow:var(--shadow-md);
  border-color:var(--border-strong);
}
.st-card-icon{
  width:46px;height:46px;border-radius:var(--radius-md);
  background:var(--primary-soft);color:var(--primary);
  display:flex;align-items:center;justify-content:center;
  margin-bottom:16px;
}
.st-card-icon svg{width:24px;height:24px}
.st-card h2{
  font-size:17px;margin:0 0 10px;letter-spacing:.03em;
  font-family:var(--font-display);font-weight:700;
}
.st-card p{color:var(--text-muted);font-size:13px;line-height:1.85;margin:0 0 18px;flex:1}
/* margin-top:auto 让 CTA 贴到卡片底部 —— 没有 <p> 的卡片（QQ 群）也和三张卡对齐 */
.st-card .st-go{
  display:flex;align-items:center;gap:6px;
  font-size:13px;color:var(--primary);font-weight:600;
  margin-top:auto;
}
.st-card .st-go svg{width:15px;height:15px;transition:transform .18s ease}
a.st-card:hover .st-go svg{transform:translateX(3px)}
.st-card.is-static{cursor:default}
.st-card.is-static:hover{transform:none;box-shadow:var(--shadow-sm);border-color:var(--border)}

/* ---------------- 页内小标题 ---------------- */

.st-note{
  text-align:center;color:var(--text-faint);font-size:12.5px;
  line-height:1.9;margin:26px 0 0;
}

@media (max-width:900px){
  .st-grid{grid-template-columns:1fr;gap:16px}
  .st-hero{padding:38px 0 6px}
  .st-mascot{height:120px;width:auto;margin-bottom:14px}
}

/* 标志是内联 SVG 且用 currentColor 作线色，所以这里只需给它颜色：
   跟随主题的正文色（日间深褐、夜间米白），保证两种主题下都看得清。 */
.st-mascot{color:var(--text)}

/* 标志右下角的域名：用展示字体，字号随 viewBox 定 */
.st-mascot text{
  font-family:var(--font-display);
  font-size:31px;
  letter-spacing:.01em;
}

/* 左上角 logo：三站统一用蛙鸣线条 logo，颜色跟随主题 */
.brand-logo{height:32px;width:auto;display:block;color:var(--primary);flex:0 0 auto}
@media (max-width:560px){ .brand-logo{height:26px} }