/* ============================================================
   The Fate Map · ink.css — 东方美学设计系统
   米白纸底 · 墨色 · 朱砂点缀 · 太极/卦象/干支纹理
   移动优先（mobile-first），简约而不简单
   ============================================================ */
:root{
  --paper:#f7f3e9;          /* 米白 */
  --paper2:#f0eadb;         /* 深一点的米 */
  --paper3:#e9e1cd;         /* 宣纸暗部 */
  --ink:#26221b;            /* 墨色 */
  --ink2:#4c463a;           /* 淡墨 */
  --faint:#8d8471;          /* 墨灰 */
  --cinn:#a63a2a;           /* 朱砂 */
  --cinn-dk:#8c2f21;
  --gold:#a08050;           /* 陈金 */
  --line:#ddd3ba;           /* 纸纹线 */
  --serif:'Fraunces','Noto Serif SC','Songti SC',Georgia,serif;
  --cjk:'Noto Serif CJK SC','Songti SC',serif;
  --sans:-apple-system,'Segoe UI',Roboto,'Helvetica Neue',Arial,sans-serif;
  --shadow:0 1px 2px rgba(38,34,27,.05),0 8px 28px rgba(38,34,27,.07);
}

*{margin:0;padding:0;box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{
  background:var(--paper);
  /* 宣纸颗粒：细噪点 */
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='240' height='240'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 .035 0'/%3E%3C/filter%3E%3Crect width='240' height='240' filter='url(%23n)'/%3E%3C/svg%3E");
  color:var(--ink);
  font-family:var(--sans);
  font-size:16px;line-height:1.7;
  letter-spacing:.01em;
}
img,svg{display:block;max-width:100%}
a{color:var(--cinn);text-decoration:none}
a:hover{color:var(--cinn-dk)}
h1,h2,h3,h4{font-family:var(--serif);font-weight:600;line-height:1.28;letter-spacing:.01em}
.wrap{max-width:1080px;margin:0 auto;padding:0 20px}
.center{text-align:center}

/* ---------- 文字装饰 ---------- */
.kicker{font-size:11.5px;letter-spacing:.34em;text-transform:uppercase;color:var(--gold);
  font-family:var(--sans);margin-bottom:14px;font-weight:600}
.kicker::before{content:"— ";color:var(--line)}
.kicker::after{content:" —";color:var(--line)}
.zh-note{font-family:var(--cjk);color:var(--faint);font-size:14px}
.hanzi{font-family:var(--cjk)}

/* ---------- 顶栏 ---------- */
.topbar{position:sticky;top:0;z-index:50;background:rgba(247,243,233,.92);
  backdrop-filter:blur(10px);border-bottom:1px solid var(--line)}
.topbar-in{max-width:1080px;margin:0 auto;padding:0 20px;height:58px;
  display:flex;align-items:center;gap:14px}
.brand{display:flex;align-items:center;gap:10px;color:var(--ink)}
.brand-seal{display:inline-flex;line-height:0}
.brand-name{font-family:var(--serif);font-size:16px;letter-spacing:.2em;text-transform:uppercase;font-weight:700}
.brand-zh{font-family:var(--cjk);font-size:12px;color:var(--faint);margin-left:-6px}
.nav{margin-left:auto;display:flex;gap:2px;align-items:center}
.nav a{color:var(--ink2);font-size:14.5px;font-weight:500;padding:8px 12px;border-radius:8px;
  font-family:var(--sans);position:relative}
.nav a:hover{color:var(--cinn);background:var(--paper2)}
.nav a.hot{color:var(--cinn);font-weight:600}
.nav a.hot::after{content:"";position:absolute;left:12px;right:12px;bottom:4px;height:2px;background:var(--cinn);opacity:.55;border-radius:2px}
.nav-cta{background:var(--ink);color:var(--paper)!important;font-weight:600;border-radius:999px;padding:8px 16px!important;margin-left:8px}
.nav-cta:hover{background:var(--cinn)}
.menu-btn{display:none;margin-left:auto;background:none;border:1px solid var(--line);border-radius:8px;
  width:40px;height:40px;font-size:20px;color:var(--ink);cursor:pointer;font-family:var(--sans)}
.m-nav{display:none;flex-direction:column;padding:8px 20px 16px;border-bottom:1px solid var(--line);
  background:var(--paper)}
.m-nav a{padding:13px 4px;color:var(--ink2);font-size:16px;border-bottom:1px dashed var(--line);font-weight:500}
.m-nav a:last-child{border-bottom:none}
.m-nav.open{display:flex}
@media(max-width:860px){ .nav{display:none} .menu-btn{display:grid;place-items:center} }

/* ---------- 英雄区 ---------- */
.hero{position:relative;overflow:hidden;text-align:center;padding:64px 20px 72px}
.hero-taiji{width:min(300px,66vw);margin:0 auto 30px;position:relative}
.hero-taiji svg{width:100%;height:auto}
.taiji-spin{animation:spin 90s linear infinite;transform-origin:50% 50%}
@keyframes spin{to{transform:rotate(360deg)}}
.ganzhi-ring{font-family:var(--cjk);font-size:13px;letter-spacing:.5em;color:var(--faint);
  margin:0 0 8px;text-indent:.5em}
.hero h1{font-size:clamp(30px,7.4vw,54px);font-weight:600;font-family:var(--serif),var(--cjk)}
.hero h1 em{font-style:italic;color:var(--cinn)}
.hero .zh-lead{font-family:var(--cjk);font-size:clamp(17px,4.2vw,24px);color:var(--ink2);margin-top:14px;letter-spacing:.14em;line-height:1.9}
.hero p.lead{max-width:600px;margin:22px auto 0;color:var(--ink2);font-size:clamp(15.5px,2.6vw,17.5px)}
.hero-ctas{margin-top:30px;display:flex;gap:12px;justify-content:center;flex-wrap:wrap}
.btn{display:inline-block;background:var(--cinn);color:#fdfbf5;border:none;cursor:pointer;
  font-family:var(--sans);font-size:16px;font-weight:600;letter-spacing:.03em;
  padding:14px 28px;border-radius:999px;transition:.2s;box-shadow:0 2px 10px rgba(166,58,42,.25)}
.btn:hover{background:var(--cinn-dk);color:#fff;transform:translateY(-1px)}
.btn-ghost{background:transparent;color:var(--ink);border:1.5px solid var(--ink);box-shadow:none}
.btn-ghost:hover{background:var(--ink);color:var(--paper)}
.btn-ink{background:var(--ink);box-shadow:none}
.btn-ink:hover{background:#000;color:#fff}

/* 卦象纹理条 */
.trigram-strip{display:flex;justify-content:center;gap:clamp(14px,4vw,34px);
  padding:18px 20px;border-top:1px solid var(--line);border-bottom:1px solid var(--line);
  background:var(--paper2);overflow:hidden}
.trigram{display:flex;flex-direction:column;align-items:center;gap:4px;color:var(--ink2)}
.trigram .glyph{font-size:clamp(17px,3.4vw,22px);line-height:1;font-family:var(--serif);letter-spacing:2px}
.trigram .name{font-size:10px;letter-spacing:.2em;text-transform:uppercase;color:var(--faint)}

/* ---------- 区块 ---------- */
section{padding:56px 0}
.sec-tight{padding:40px 0}
.sec-alt{background:var(--paper2);
  background-image:linear-gradient(180deg,rgba(247,243,233,0),rgba(247,243,233,.7)),
  url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='240' height='240'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 .03 0'/%3E%3C/filter%3E%3Crect width='240' height='240' filter='url(%23n)'/%3E%3C/svg%3E")}
h2.sec-title{font-size:clamp(24px,5vw,34px);margin-bottom:6px}
.sec-sub{color:var(--ink2);max-width:560px;margin:10px auto 0;font-size:15.5px}
.brush{width:120px;height:14px;margin:16px auto 22px;opacity:.85}

/* 干支水印（区块侧缘装饰） */
.gz-mark{position:absolute;right:6px;top:50%;transform:translateY(-50%);
  writing-mode:vertical-rl;font-family:var(--cjk);font-size:15px;letter-spacing:.6em;
  color:var(--line);user-select:none;pointer-events:none}

/* ---------- astro 式卡片栅格 ---------- */
.tiles{display:grid;gap:18px;margin-top:34px;
  grid-template-columns:1fr}
@media(min-width:640px){.tiles{grid-template-columns:1fr 1fr}}
@media(min-width:960px){.tiles.cols-4{grid-template-columns:repeat(4,1fr)}}
.tile{background:#fcf9f1;border:1px solid var(--line);border-radius:14px;overflow:hidden;
  display:flex;flex-direction:column;transition:.22s;position:relative;box-shadow:var(--shadow)}
.tile:hover{transform:translateY(-3px);box-shadow:0 4px 8px rgba(38,34,27,.06),0 16px 40px rgba(38,34,27,.12);border-color:var(--gold)}
.tile-thumb{height:132px;position:relative;display:grid;place-items:center;overflow:hidden;
  background:var(--paper3)}
.tile-thumb .big{font-family:var(--cjk);font-size:56px;font-weight:700;opacity:.9}
.tile-thumb::after{content:"";position:absolute;inset:0;
  background:radial-gradient(ellipse at 30% 20%,rgba(247,243,233,.0),rgba(38,34,27,.10))}
.tile-thumb.ink-wash{background:
  radial-gradient(120% 90% at 15% 10%,rgba(38,34,27,.16),transparent 55%),
  radial-gradient(100% 80% at 85% 90%,rgba(166,58,42,.14),transparent 60%),
  var(--paper3)}
.tile-body{padding:18px 18px 20px;display:flex;flex-direction:column;gap:8px;flex:1}
.tile-body h3{font-size:19px}
.tile-body h3 .zh{font-family:var(--cjk);font-size:14px;color:var(--faint);font-weight:400;margin-left:6px}
.tile-body p{color:var(--ink2);font-size:14.5px;flex:1}
.tile-go{margin-top:6px;font-size:13.5px;font-weight:600;color:var(--cinn);letter-spacing:.02em}
.tile:hover .tile-go{color:var(--cinn-dk)}
.tag-new{position:absolute;top:10px;right:10px;background:var(--cinn);color:#fff;
  font-size:10.5px;font-weight:700;letter-spacing:.12em;padding:4px 9px;border-radius:4px;z-index:2}
.tag-free{position:absolute;top:10px;right:10px;background:var(--ink);color:var(--paper);
  font-size:10.5px;font-weight:700;letter-spacing:.12em;padding:4px 9px;border-radius:4px;z-index:2}

/* ---------- 文章排版 ---------- */
.article{max-width:680px;margin:0 auto;padding:0 20px}
.article h1{font-size:clamp(27px,6vw,38px);margin:8px 0 4px}
.article .byline{color:var(--faint);font-size:13.5px;margin:10px 0 26px;padding-bottom:18px;
  border-bottom:1px solid var(--line)}
.article h2{font-size:22px;margin:38px 0 12px;padding-left:14px;border-left:4px solid var(--cinn)}
.article h3{font-size:18px;margin:28px 0 10px}
.article p{margin:14px 0;color:var(--ink2)}
.article p strong,.article li strong{color:var(--ink)}
.article ul,.article ol{margin:14px 0 14px 22px;color:var(--ink2)}
.article li{margin:7px 0}
.article blockquote{margin:22px 0;padding:14px 20px;border-left:4px solid var(--gold);
  background:var(--paper2);border-radius:0 10px 10px 0;font-family:var(--serif);
  font-size:17px;color:var(--ink);font-style:italic}
.article table{width:100%;border-collapse:collapse;margin:18px 0;font-size:14.5px}
.article th{background:var(--ink);color:var(--paper);text-align:left;padding:9px 12px;font-weight:600;font-family:var(--sans)}
.article td{padding:9px 12px;border-bottom:1px solid var(--line);color:var(--ink2)}
.article tr:nth-child(even) td{background:#fbf7ee}
.term{font-family:var(--cjk);background:var(--paper2);border:1px solid var(--line);
  border-radius:6px;padding:1px 7px;font-size:.94em;color:var(--cinn-dk);white-space:nowrap}
.art-nav{display:flex;justify-content:space-between;gap:14px;margin:44px 0 10px;
  padding-top:22px;border-top:1px solid var(--line);font-size:14.5px}
.art-nav a{max-width:46%}
.crumb{font-size:13px;color:var(--faint);margin:0 0 6px}
.crumb a{color:var(--faint)}

/* 知识库卡片（小） */
.kb-list{margin-top:30px;display:grid;gap:12px}
.kb-item{display:flex;gap:16px;align-items:center;background:#fcf9f1;border:1px solid var(--line);
  border-radius:12px;padding:14px 16px;transition:.2s}
.kb-item:hover{transform:translateX(4px);border-color:var(--gold)}
.kb-glyph{width:46px;height:46px;flex:0 0 46px;display:grid;place-items:center;
  background:var(--ink);color:var(--paper);border-radius:10px;
  font-family:var(--cjk);font-size:20px;font-weight:700}
.kb-item h3{font-size:16.5px;margin:0}
.kb-item p{font-size:13.5px;color:var(--ink2);margin:2px 0 0}
.kb-item .go{margin-left:auto;color:var(--cinn);font-weight:700;flex:0 0 auto}

/* ---------- 页脚 ---------- */
footer{border-top:1px solid var(--line);background:var(--paper2);padding:44px 0 90px;margin-top:20px}
.foot-grid{display:grid;gap:26px;grid-template-columns:1fr}
@media(min-width:760px){.foot-grid{grid-template-columns:1.4fr 1fr 1fr}}
.foot-brand{display:flex;align-items:center;gap:10px;margin-bottom:12px}
.foot-col h4{font-size:12px;letter-spacing:.24em;text-transform:uppercase;color:var(--faint);
  font-family:var(--sans);margin-bottom:14px;font-weight:600}
.foot-col a{display:block;color:var(--ink2);font-size:14.5px;padding:5px 0}
.foot-col a:hover{color:var(--cinn)}
.foot-note{font-size:13px;color:var(--faint);margin-top:10px;max-width:420px;line-height:1.7}
.foot-copy{margin-top:30px;padding-top:20px;border-top:1px dashed var(--line);
  font-size:12.5px;color:var(--faint);display:flex;justify-content:space-between;flex-wrap:wrap;gap:10px}
.ganzhi-row{font-family:var(--cjk);letter-spacing:.34em;color:var(--line);font-size:13px}

/* ---------- 通用小组件 ---------- */
.divider-seal{width:44px;height:44px;margin:24px auto;background:var(--cinn);color:var(--paper);
  font-family:var(--cjk);display:grid;place-items:center;border-radius:8px;font-size:19px;
  box-shadow:inset 0 0 0 2px rgba(247,243,233,.3)}
.note-card{background:#fcf9f1;border:1px solid var(--line);border-left:4px solid var(--cinn);
  border-radius:0 12px 12px 0;padding:16px 18px;margin:22px 0;font-size:14.5px;color:var(--ink2)}
.btn-row{display:flex;gap:12px;flex-wrap:wrap;justify-content:center;margin-top:26px}
.pill{display:inline-block;border:1px solid var(--line);border-radius:999px;padding:5px 14px;
  font-size:13px;color:var(--ink2);background:#fcf9f1;margin:3px}
.pill b{color:var(--cinn);font-weight:600}
.fine{font-size:12.5px;color:var(--faint)}
.mt-s{margin-top:14px}.mt-m{margin-top:26px}.mt-l{margin-top:44px}

/* ---------- 金罗盘动画 ---------- */
.hero-taiji{width:min(330px,74vw)}
.lp-spin-slow{animation:lp-spin 90s linear infinite}
.lp-spin-rev{animation:lp-spin 110s linear infinite reverse}
@keyframes lp-spin{to{transform:rotate(360deg)}}
.lp-needle{animation:lp-needle 5.5s ease-in-out infinite alternate}
@keyframes lp-needle{
  0%{transform:rotate(-16deg)}
  55%{transform:rotate(9deg)}
  100%{transform:rotate(-4deg)}
}
.lp-shan text,.lp-zhi text,.lp-gua text,.lp-gan text{font-family:var(--cjk)}