/* ===== 鲸喜财经 · Midnight Gallery(Origin-inspired 暗色编辑部风)===== */
:root {
  /* 画布 / 表面 —— 靠色阶分层,不用阴影 */
  --canvas:#0f1011;
  --surface:#161719;
  --surface-2:#1c1d1f;
  --steel:#2e2e2e;
  --steel-hi:#3f4041;
  --line:rgba(255,255,255,.08);
  --line-hi:rgba(255,255,255,.16);
  /* 文字 */
  --cloud:#f5f5f7;
  --ash:#9f9fa0;
  --ash-dim:#6b6c6e;
  --white:#ffffff;
  /* 彩色强调(卡片) */
  --violet:#847dff;
  --cyan:#00b3dd;
  --orchid:#dd90d8;
  --peri:#90b8f0;
  /* 市场语义 */
  --up:#f2555a;
  --down:#35c07a;
  /* 字体 */
  /* 展示字:极细优雅。Mac 走 Songti/宋体细体,Win 走雅黑 Light,刻意跳过粗重的 SimSun */
  --serif:"Songti SC","Noto Serif SC","Source Han Serif SC","Georgia","Microsoft YaHei Light","PingFang SC","Microsoft YaHei",serif;
  --sans:-apple-system,BlinkMacSystemFont,"Segoe UI","PingFang SC","Microsoft YaHei","Hiragino Sans GB",Roboto,Helvetica,Arial,sans-serif;
  --mono:"Roboto Mono","SF Mono","JetBrains Mono",Consolas,"Cascadia Code",monospace;
  /* 尺度 */
  --maxw:1200px;
  --maxw-read:720px;
}

* { box-sizing:border-box; }
html { -webkit-text-size-adjust:100%; scroll-behavior:smooth; }
body {
  margin:0; background:var(--canvas); color:var(--ash);
  font-family:var(--sans); font-weight:400; font-size:16px; line-height:1.7;
  -webkit-font-smoothing:antialiased; text-rendering:optimizeLegibility;
}
::selection { background:var(--violet); color:#fff; }
a { color:var(--cloud); text-decoration:none; }
img { max-width:100%; height:auto; }

.wrap { max-width:var(--maxw); margin:0 auto; padding:0 32px; }
.wrap-read { max-width:var(--maxw-read); margin:0 auto; padding:0 32px; }

/* 等宽小标签(eyebrow / 日期 / 分类) */
.mono {
  font-family:var(--mono); font-size:11px; font-weight:500;
  text-transform:uppercase; letter-spacing:.18em; color:var(--ash-dim);
}

/* ---- 玻璃导航 ---- */
.site-header {
  position:sticky; top:0; z-index:30;
  background:color-mix(in srgb,var(--canvas) 72%,transparent);
  backdrop-filter:saturate(140%) blur(24px);
  -webkit-backdrop-filter:saturate(140%) blur(24px);
  border-bottom:1px solid var(--line);
}
.nav { max-width:var(--maxw); margin:0 auto; padding:18px 32px; display:flex; align-items:center; gap:24px; }
.brand { display:flex; align-items:center; gap:11px; color:var(--cloud); }
.brand .logo { width:28px; height:auto; flex-shrink:0; color:var(--cloud); display:block; }
.brand .logo circle { fill:var(--canvas); }
.brand-text { display:flex; flex-direction:column; gap:2px; line-height:1; }
/* 品牌字:放大 + 站内配色流光(紫→青→蓝往复),克制的品牌识别动效,非泛滥装饰 */
.brand .bname {
  font-family:var(--serif); font-weight:300; font-size:27px; letter-spacing:1px;
  background:linear-gradient(100deg, var(--violet) 0%, var(--cyan) 25%, var(--peri) 50%, var(--cyan) 75%, var(--violet) 100%);
  background-size:250% auto; -webkit-background-clip:text; background-clip:text;
  -webkit-text-fill-color:transparent; color:transparent;
  animation:brandflow 9s linear infinite;
}
@keyframes brandflow { to { background-position:-250% center; } }
.brand .bname-en {
  font-family:var(--mono); font-size:10px; font-weight:500; letter-spacing:.24em;
  text-transform:uppercase; color:var(--ash-dim);
}
@media (prefers-reduced-motion:reduce) { .brand .bname { animation:none; } }
.nav .spacer { flex:1; }
.nav a.navlink { color:var(--ash); font-size:14px; font-weight:400; letter-spacing:.02em; }
.nav a.navlink:hover { color:var(--cloud); }
.nav .cta-ghost {
  font-size:14px; color:var(--cloud); border:1px solid rgba(255,255,255,1);
  padding:12px 18px; border-radius:8px; transition:background-color .2s ease;
}
.nav .cta-ghost:hover { background-color:rgba(255,255,255,.1); }

/* ---- Hero ---- */
/* Hero:居中 + 规范给出的精确 "Sky Atmosphere" 渐变配方(非装饰性渐变,是系统仅有的两个结构性渐变之一) */
.hero { position:relative; text-align:center; padding:154px 20px 120px; overflow:hidden;
  background:linear-gradient(180deg, rgb(15,16,17), rgb(19,29,39) 18%, rgb(26,71,136) 37%, rgb(64,138,193) 69%, rgb(64,138,193) 102%);
}
.hero-bg { position:absolute; inset:0; z-index:0; background-size:cover; background-position:center; }
.hero-bg.filled { opacity:.55; mix-blend-mode:soft-light; }
.hero-bg::after { content:""; position:absolute; inset:0;
  background:linear-gradient(180deg, rgba(15,16,17,0) 0%, rgba(15,16,17,.55) 62%, var(--canvas) 100%); }
.hero-inner { position:relative; z-index:1; max-width:920px; margin:0 auto; }
.hero .promo {
  display:inline-flex; align-items:center; gap:8px; margin:0 0 30px;
  font-family:var(--mono); font-size:12px; font-weight:500; text-transform:uppercase; letter-spacing:.16em;
  color:#fafafa; background:rgba(255,255,255,.12); border:1px solid rgba(255,255,255,.15);
  border-radius:999px; padding:10px 32px;
}
.hero h1 {
  font-family:var(--serif); font-weight:300; color:#fff;
  font-size:clamp(46px,7.6vw,96px); line-height:.92; letter-spacing:-.005em;
  margin:0 auto 26px; max-width:16ch; text-wrap:balance;
}
.hero h1 em { font-style:italic; color:var(--cloud); }
.hero .lede { font-size:clamp(16px,2vw,19px); color:var(--ash); max-width:50ch; margin:0 auto 38px; }
.hero .actions { display:flex; gap:14px; flex-wrap:wrap; align-items:center; justify-content:center; }

/* 主按钮:白底黑字 + 箭头 */
.btn-primary {
  display:inline-flex; align-items:center; gap:10px;
  background:var(--white); color:#000; font-weight:400; font-size:16px;
  padding:12px 18px; border-radius:8px; transition:opacity .2s ease;
}
.btn-primary:hover { opacity:.85; }
.btn-text { color:var(--ash); font-size:15px; display:inline-flex; align-items:center; gap:8px; }
.btn-text:hover { color:var(--cloud); }

/* ---- 分区标题 ---- */
.section { padding:0 0 80px; }
.section-head { display:flex; align-items:baseline; justify-content:space-between; gap:16px; margin-bottom:32px; }
.section-head h2 { font-family:var(--serif); font-weight:300; color:var(--cloud); font-size:clamp(26px,4vw,40px); letter-spacing:-.01em; margin:0; }
.section-head .mono { flex-shrink:0; }

/* ---- 彩色特色卡片(文章)---- */
.feature-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:14px; }
/* 规范:纯平色块,无阴影无渐变;靠色彩区分类别;大号细体标题 + 图标 + 描述 */
.fcard {
  position:relative; border-radius:30px; padding:32px; min-height:290px;
  display:flex; flex-direction:column; color:#0d0d0f; overflow:hidden;
  transition:opacity .2s ease;
}
.fcard:hover { opacity:.92; }
.fcard.violet { background:var(--violet); }
.fcard.cyan   { background:var(--cyan); }
.fcard.peri   { background:var(--peri); }
.fcard.orchid { background:var(--orchid); }
.fcard .fc-icon { width:34px; height:34px; margin-bottom:auto; opacity:.92; }
.fcard .fc-cat { font-family:var(--mono); font-size:11px; font-weight:600; text-transform:uppercase; letter-spacing:.18em; color:rgba(13,13,15,.58); margin-top:22px; }
.fcard .fc-title { font-family:var(--serif); font-weight:300; font-size:30px; line-height:1.06; margin:12px 0 12px; color:#0d0d0f; }
.fcard .fc-ex { font-size:14.5px; line-height:1.62; color:rgba(13,13,15,.72); margin:0; }
.fcard .fc-foot { margin-top:22px; display:flex; align-items:center; justify-content:space-between; }
.fcard .fc-date { font-family:var(--mono); font-size:11px; letter-spacing:.1em; color:rgba(13,13,15,.5); }
.fcard .fc-arw { width:34px; height:34px; border-radius:50%; background:rgba(13,13,15,.13); display:grid; place-items:center; color:#0d0d0f; transition:background-color .2s ease; }
.fcard:hover .fc-arw { background-color:rgba(13,13,15,.22); }

/* ---- 图片占位(自动填充:图片按约定名放入 assets/img/ 即显示)---- */
.ph {
  position:relative; background:var(--surface-2); border:1px solid var(--line);
  border-radius:16px; overflow:hidden; display:grid; place-items:center;
  background-repeat:no-repeat;
}
.ph::before {
  content:attr(data-label); font-family:var(--mono); font-size:11px; font-weight:500;
  letter-spacing:.16em; text-transform:uppercase; color:var(--ash-dim); text-align:center; padding:12px; z-index:1;
}
.ph::after {
  content:""; position:absolute; inset:0; pointer-events:none;
  background-image:repeating-linear-gradient(45deg,rgba(255,255,255,.022) 0 10px,transparent 10px 20px);
}
.ph.filled { background-color:transparent; border-color:transparent; background-size:cover; background-position:center; }
.ph.filled::before, .ph.filled::after { content:none; }
.ph-16x9 { aspect-ratio:16/9; } .ph-16x10 { aspect-ratio:16/10; } .ph-21x9 { aspect-ratio:21/9; }
.ph-4x3 { aspect-ratio:4/3; } .ph-1x1 { aspect-ratio:1/1; }
/* 彩色卡片上的镂空占位 */
.ph.on-color { background-color:rgba(13,13,15,.12); border-color:rgba(13,13,15,.16); }
.ph.on-color::before { color:rgba(13,13,15,.5); }
.ph.on-color::after { background-image:repeating-linear-gradient(45deg,rgba(13,13,15,.05) 0 10px,transparent 10px 20px); }

/* Hero 大图带 / 文章封面 / 内文插图 / 头像 */
.hero-band { margin:0 0 96px; }
.hero-band .ph { border-radius:24px; }
.article-cover { margin:0 0 40px; }
.article-cover .ph { border-radius:20px; }
figure.inline-fig { margin:34px 0; }
figure.inline-fig .ph { border-radius:16px; }
figure.inline-fig figcaption { font-family:var(--mono); font-size:11px; letter-spacing:.1em; color:var(--ash-dim); text-transform:uppercase; margin-top:10px; text-align:center; }
.about-portrait { float:right; width:172px; margin:4px 0 18px 28px; }
.about-portrait .ph { border-radius:20px; }
@media (max-width:560px) { .about-portrait { float:none; width:100%; max-width:220px; margin:0 0 22px; } }

/* ---- 简单文章行(备用/更多)---- */
.post-list { list-style:none; padding:0; margin:0; border-top:1px solid var(--line); }
.post-item { display:flex; gap:20px; align-items:baseline; padding:22px 4px; border-bottom:1px solid var(--line); transition:padding-left .2s; }
.post-item:hover { padding-left:12px; }
.post-item .pi-date { font-family:var(--mono); font-size:11px; letter-spacing:.1em; color:var(--ash-dim); flex-shrink:0; width:96px; }
.post-item .pi-title { font-family:var(--serif); font-size:20px; color:var(--cloud); font-weight:400; }
.post-item:hover .pi-title { color:#fff; }

/* ---- 文章正文 ---- */
.article { padding:72px 0 40px; }
.article-header { margin-bottom:44px; }
.article-header .meta { display:flex; gap:14px; align-items:center; margin-bottom:20px; }
.article-header .cat { font-family:var(--mono); font-size:11px; font-weight:600; text-transform:uppercase; letter-spacing:.16em; }
.article-header .cat.violet { color:var(--violet); } .article-header .cat.cyan { color:var(--cyan); } .article-header .cat.peri { color:var(--peri); }
.article-header .date { font-family:var(--mono); font-size:11px; letter-spacing:.1em; color:var(--ash-dim); }
.article-header h1 { font-family:var(--serif); font-weight:300; color:var(--cloud); font-size:clamp(32px,5vw,54px); line-height:1.05; letter-spacing:-.01em; margin:0; text-wrap:balance; }

.article-body { font-size:17px; line-height:1.8; color:var(--ash); }
.article-body p { margin:0 0 22px; }
.article-body strong { color:var(--cloud); font-weight:600; }
.article-body a { color:var(--cyan); text-decoration:underline; text-underline-offset:3px; text-decoration-color:rgba(0,179,221,.4); }
.article-body h2 { font-family:var(--serif); font-weight:400; color:var(--cloud); font-size:28px; line-height:1.2; margin:52px 0 18px; }
.article-body h3 { color:var(--cloud); font-weight:600; font-size:19px; margin:36px 0 12px; }
.article-body ul, .article-body ol { padding-left:22px; margin:0 0 22px; }
.article-body li { margin:8px 0; }
.article-body li::marker { color:var(--ash-dim); }
.article-body blockquote {
  font-family:var(--serif); font-weight:300; font-size:24px; line-height:1.4; color:var(--cloud);
  margin:34px 0; padding:6px 0 6px 26px; border-left:2px solid var(--violet);
}
.article-body code { font-family:var(--mono); font-size:.86em; background:var(--surface-2); border:1px solid var(--line); padding:2px 7px; border-radius:6px; color:var(--cloud); }
.article-body hr { border:none; border-top:1px solid var(--line); margin:44px 0; }

.tablewrap { overflow-x:auto; margin:26px 0; border:1px solid var(--line); border-radius:16px; }
.article-body table { width:100%; border-collapse:collapse; font-size:14.5px; }
.article-body th, .article-body td { padding:12px 16px; text-align:left; border-bottom:1px solid var(--line); }
.article-body th { font-family:var(--mono); font-size:11px; text-transform:uppercase; letter-spacing:.12em; color:var(--ash-dim); font-weight:500; background:var(--surface); }
.article-body tr:last-child td { border-bottom:none; }
.up { color:var(--up); font-weight:600; } .down { color:var(--down); font-weight:600; }

.callout {
  background:var(--surface); border:1px solid var(--line); border-radius:18px;
  padding:22px 24px; margin:30px 0; font-size:15.5px; color:var(--ash); line-height:1.7;
}
.callout strong { color:var(--cloud); }

.back-link { display:inline-flex; align-items:center; gap:8px; margin-top:12px; color:var(--ash); font-size:14px; font-family:var(--mono); letter-spacing:.05em; }
.back-link:hover { color:var(--cloud); }

/* 关于页信条 */
.creed { list-style:none; padding:0; margin:0; }
.creed li { padding:20px 0; border-bottom:1px solid var(--line); font-size:16px; color:var(--ash); }
.creed li strong { color:var(--cloud); }

/* ---- 底部 ---- */
.site-footer { border-top:1px solid var(--line); margin-top:40px; padding:44px 0 64px; }
.site-footer .wrap { display:flex; align-items:center; gap:20px; flex-wrap:wrap; }
.site-footer .fbrand { font-family:var(--serif); font-size:18px; color:var(--cloud); letter-spacing:1px; }
.site-footer .spacer { flex:1; }
.site-footer a { color:var(--ash); font-size:13px; }
.site-footer a:hover { color:var(--cloud); }
.site-footer .copy { color:var(--ash-dim); font-family:var(--mono); font-size:11px; letter-spacing:.08em; }

@media (max-width:860px) {
  .feature-grid { grid-template-columns:1fr; }
  .hero { padding:84px 0 60px; }
}
@media (max-width:560px) {
  .wrap, .nav, .wrap-read { padding-left:20px; padding-right:20px; }
  .post-item { flex-direction:column; gap:4px; }
  .post-item .pi-date { width:auto; }
}
/* ---- 入场:轻微上浮渐显(唯一保留的动效,克制)---- */
/* 规范:atmospheric reveal 用 2.5s + cubic-bezier(0.455,0.03,0.515,0.955),仅用于 hero 文案入场;卡片用更快的 quick transition 节奏 */
@keyframes rise { from { opacity:0; transform:translateY(18px); } to { opacity:1; transform:none; } }
.hero .promo, .hero h1, .hero .lede, .hero .actions { animation:rise 2.5s cubic-bezier(.455,.03,.515,.955) both; }
.hero h1 { animation-delay:.1s; }
.hero .lede { animation-delay:.25s; }
.hero .actions { animation-delay:.4s; }
.feature-grid .fcard { animation:rise .5s ease both; }
.feature-grid .fcard:nth-child(1) { animation-delay:.05s; }
.feature-grid .fcard:nth-child(2) { animation-delay:.1s; }
.feature-grid .fcard:nth-child(3) { animation-delay:.15s; }

@media (prefers-reduced-motion:reduce) { * { animation:none!important; transition:none!important; } }