/* FundLand 內容站共用樣式 —— /wiki/ 同 /blog/ 用
   色票同 index.html 嘅 :root 一致（institutional 深海藍金）。改色要兩邊一齊改。 */

:root{
  --paper:#F8F9FA; --card:#FFFFFF; --hairline:#EAE7E1;
  --ink:#1F2230; --ink-2:#565B6E; --ink-3:#8E93A6;
  --primary:#1E4E8C; --deep:#143661; --tint:#E8EFF8;
  --grad-a:#2F6BB5; --grad-b:#163F73; --gold:#F5B301;
  --r-s:12px; --r-m:18px; --r-l:28px;
  --shell:760px;                 /* 閱讀柱 —— 比 landing 嘅 1180 窄好多，長文可讀性行先 */
  --pad:clamp(20px,5vw,40px);
  --f-display:"Gabarito","PingFang HK","PingFang TC","Noto Sans TC",sans-serif;
  --f-body:"Instrument Sans","PingFang HK","PingFang TC","Noto Sans TC",sans-serif;
  --f-mono:"IBM Plex Mono","PingFang HK",ui-monospace,monospace;
}

*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{
  margin:0; background:var(--paper); color:var(--ink);
  font-family:var(--f-body); font-size:17px; line-height:1.85;
  -webkit-font-smoothing:antialiased;
}
.shell{max-width:var(--shell); margin:0 auto; padding:0 var(--pad)}

/* ---- 導航 ---- */
.nav{
  border-bottom:1px solid var(--hairline); background:rgba(248,249,250,.9);
  backdrop-filter:saturate(1.6) blur(10px); position:sticky; top:0; z-index:9;
}
.nav .shell{display:flex; align-items:center; gap:22px; height:60px}
.nav a{color:var(--ink-2); text-decoration:none; font-weight:600; font-size:14.5px}
.nav a:hover{color:var(--primary)}
.nav .brand{
  font-family:var(--f-display); font-weight:800; font-size:17px;
  color:var(--ink); letter-spacing:-.02em; margin-right:auto;
  display:flex; align-items:center; gap:9px;
}
.nav .brand img{width:26px; height:26px; border-radius:7px}
.nav .cta{
  background:var(--primary); color:#fff; padding:8px 15px; border-radius:999px; font-size:13.5px;
}
.nav .cta:hover{background:var(--deep); color:#fff}

/* ---- 麵包屑 ---- */
.crumb{font-size:13px; color:var(--ink-3); margin:26px 0 0; font-family:var(--f-mono)}
.crumb a{color:var(--ink-3); text-decoration:none}
.crumb a:hover{color:var(--primary)}

/* ---- 文章 ---- */
article{padding-bottom:40px}
h1{
  font-family:var(--f-display); font-weight:800; letter-spacing:-.03em;
  font-size:clamp(30px,5.4vw,42px); line-height:1.2; margin:14px 0 0;
}
.lede{font-size:18.5px; color:var(--ink-2); margin:14px 0 0; line-height:1.7}
.meta{
  display:flex; flex-wrap:wrap; gap:9px; align-items:center;
  margin:20px 0 0; padding-bottom:26px; border-bottom:1px solid var(--hairline);
}
.tag{
  font-family:var(--f-mono); font-size:11.5px; font-weight:600; letter-spacing:.02em;
  background:var(--tint); color:var(--deep); padding:4px 10px; border-radius:999px;
}
.tag--date{background:transparent; color:var(--ink-3); padding-left:0}

.body{margin-top:30px}
.body h2{
  font-family:var(--f-display); font-weight:800; letter-spacing:-.02em;
  font-size:24px; line-height:1.3; margin:44px 0 0; padding-top:4px;
}
.body h3{
  font-family:var(--f-display); font-weight:700; font-size:18.5px; margin:32px 0 0;
}
.body p{margin:16px 0 0}
.body ul,.body ol{margin:16px 0 0; padding-left:22px}
.body li{margin:7px 0}
.body li::marker{color:var(--primary)}
.body a{color:var(--primary); text-decoration:underline; text-underline-offset:3px; text-decoration-thickness:1.5px}
.body a:hover{color:var(--deep)}
.body strong{font-weight:700; color:var(--ink)}
.body code{
  font-family:var(--f-mono); font-size:.88em; background:var(--tint);
  color:var(--deep); padding:2px 6px; border-radius:6px;
}
.body blockquote{
  margin:24px 0 0; padding:2px 0 2px 18px;
  border-left:4px solid var(--gold); color:var(--ink-2);
}
.body blockquote p{margin:8px 0}
.body hr{border:0; border-top:1px solid var(--hairline); margin:38px 0 0}
.body table{width:100%; border-collapse:collapse; margin:22px 0 0; font-size:15.5px}
.body th,.body td{text-align:left; padding:10px 12px; border-bottom:1px solid var(--hairline)}
.body th{font-weight:700; color:var(--deep); background:var(--tint)}

/* ---- App 導流卡 ---- */
.appcard{
  margin:40px 0 0; padding:22px 24px; border-radius:var(--r-m);
  background:linear-gradient(135deg,var(--grad-a),var(--grad-b)); color:#fff;
}
.appcard b{display:block; font-family:var(--f-display); font-size:18px; letter-spacing:-.02em}
.appcard p{margin:8px 0 0; font-size:15px; color:rgba(255,255,255,.86); line-height:1.65}
.appcard a{
  display:inline-block; margin-top:16px; background:var(--gold); color:#2A2000;
  font-weight:700; font-size:14.5px; text-decoration:none;
  padding:10px 20px; border-radius:999px;
}
.appcard a:hover{filter:brightness(1.06)}

/* ---- 相關詞條 ---- */
.related{margin:40px 0 0; padding-top:26px; border-top:1px solid var(--hairline)}
.related h2{font-family:var(--f-display); font-size:15px; color:var(--ink-3); margin:0 0 14px; letter-spacing:.02em}
.related ul{list-style:none; margin:0; padding:0; display:flex; flex-wrap:wrap; gap:9px}
.related a{
  display:block; background:var(--card); border:1px solid var(--hairline);
  padding:8px 14px; border-radius:999px; font-size:14.5px; font-weight:600;
  color:var(--deep); text-decoration:none;
}
.related a:hover{border-color:var(--primary); background:var(--tint)}

/* ---- 索引頁 ---- */
.hero{padding:44px 0 0}
.hero h1{margin:0}
.hero p{font-size:18px; color:var(--ink-2); margin:14px 0 0; max-width:56ch}
.group{margin:44px 0 0}
.group > h2{
  font-family:var(--f-mono); font-size:12px; font-weight:600; letter-spacing:.08em;
  color:var(--ink-3); text-transform:uppercase; margin:0 0 14px;
}
.cards{display:grid; gap:12px}
.card{
  display:block; background:var(--card); border:1px solid var(--hairline);
  border-radius:var(--r-m); padding:18px 20px; text-decoration:none; color:inherit;
}
.card:hover{border-color:var(--primary); box-shadow:0 6px 22px rgba(30,78,140,.08)}
.card b{font-family:var(--f-display); font-size:17.5px; letter-spacing:-.02em; color:var(--ink); display:block}
.card span{display:block; margin-top:5px; font-size:14.5px; color:var(--ink-2); line-height:1.6}
.card .when{font-family:var(--f-mono); font-size:11.5px; color:var(--ink-3); margin-top:9px; display:block}
.empty{color:var(--ink-3); font-size:15px; margin:14px 0 0}

/* ---- 頁尾 ---- */
footer{margin-top:60px; border-top:1px solid var(--hairline); background:var(--card)}
footer .shell{padding-top:26px; padding-bottom:34px}
.disclaimer{font-size:13px; line-height:1.7; color:var(--ink-3); margin:0}
.disclaimer b{color:var(--ink-2)}
.fnav{margin:16px 0 0; display:flex; flex-wrap:wrap; gap:16px; font-size:13.5px}
.fnav a{color:var(--ink-2); text-decoration:none; font-weight:600}
.fnav a:hover{color:var(--primary)}

@media (max-width:560px){
  body{font-size:16.5px}
  .nav .shell{gap:16px}
  .nav a:not(.brand):not(.cta){display:none}
}