/* =====================================================================
   盘缠 / Wayfare — 出境旅行的钱（站 23）自定义层
   基座：HTML5 UP Massively（CC BY 3.0）/ 仅本站使用，不复用其它站 CSS DNA
   视觉册型：图文编辑 / 报头杂志（image-led editorial）
   配色策略：Committed（中性墨蓝 + 奶油纸底 + 单一 teal 强调）
   字体：Bricolage Grotesque(标题) · Inter(正文) · Spline Sans Mono(数字) · Noto Sans SC(中文)
   签名组件：① 真实花费对照表（登机牌/小票样式）② 出行钱包打包清单（行李牌样式）
   ===================================================================== */

:root{
  --ink:#16263d;        /* 墨蓝 文字/标题 */
  --ink-2:#101d33;      /* 更深 背景 */
  --ink-3:#0d1b30;
  --paper:#fbf8f1;      /* 奶油纸 内容卡 */
  --paper-2:#f3ecdd;    /* 次级纸 */
  --line:#e7ddc8;       /* 暖灰描边 */
  --teal:#0d9488;       /* 强调色 */
  --teal-d:#0b7c72;
  --teal-tint:#e6f2ef;  /* teal 浅底 */
  --muted:#5f6b78;      /* 次要文字 */
  --ink-soft:#33445a;
}

/* ---------- 缓存防混用兜底：图片不撑破布局、文字 logo 旁若有图限高 ---------- */
img{ max-width:100%; height:auto; }
#main img, .post img, .article img{ max-width:100%; height:auto; }
.logo img, #header img, #logo img{ max-height:1.5em; width:auto; vertical-align:middle; }

/* ---------- 字体覆盖 ---------- */
body, input, select, textarea{
  font-family:"Inter","Noto Sans SC",-apple-system,"PingFang SC","Microsoft YaHei",sans-serif;
  letter-spacing:0;
}
h1,h2,h3,h4,h5,h6,.logo,#nav .links a,.button,.phase-card h3,.tag{
  font-family:"Bricolage Grotesque","Noto Sans SC","PingFang SC",sans-serif;
  text-transform:none !important;   /* 关掉 Massively 的全大写，中文友好 */
  letter-spacing:.005em !important;
  font-weight:700;
}
.mono,.truecost td.num,.truecost th.num,.amount,.code-like{
  font-family:"Spline Sans Mono","JetBrains Mono",ui-monospace,monospace;
}

/* ---------- 整页背景：墨蓝渐变（模板 JS 会对 .bg 做视差，这里只放纯色渐变，
   照片单独铺在一个屏高的 #intro 上，避免被视差拉伸成一条纯色） ---------- */
#wrapper > .bg{
  background-color:var(--ink-2) !important;
  background-image:
    linear-gradient(160deg, #0e1d35 0%, #16263d 55%, #102540 100%),
    url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='44' height='44'%3E%3Cpath d='M0 43.5H44M43.5 0V44' stroke='%23ffffff' stroke-opacity='0.035'/%3E%3C/svg%3E") !important;
  background-size:auto,44px 44px !important;
  background-position:center,center !important;
  background-repeat:no-repeat,repeat !important;
}

/* ---------- 首屏照片背景：暮色机翼（刚好一个屏高，cover 不会被拉伸） ---------- */
#intro{
  background-image:
    linear-gradient(180deg, rgba(10,18,34,.55) 0%, rgba(11,20,38,.26) 46%, rgba(12,24,44,.10) 72%, rgba(16,38,64,.34) 100%),
    url("../../images/hero.webp?v=20260622") !important;
  background-size:cover, cover !important;
  background-position:center, center !important;
  background-repeat:no-repeat, no-repeat !important;
}

/* ---------- 顶部披露条（本站非官方） ---------- */
.disclo{
  position:relative; z-index:5;
  background:var(--ink-3); color:#cdd6e2;
  font-size:.62rem; letter-spacing:.02em;
  text-align:center; padding:.55em 1em; line-height:1.5;
  border-bottom:1px solid rgba(255,255,255,.06);
}
.disclo b{color:#fff;font-weight:600}

/* ---------- 内容卡：白 → 奶油纸 ---------- */
#main{ background-color:var(--paper) !important; }
#main > *{ border-top-color:var(--line) !important; }
.post.featured > .image, .post .image.main{ border-radius:2px; }

/* 正文文字颜色微调 */
#main, #main p, #main li{ color:#2c3a4c; }
#main h1,#main h2,#main h3{ color:var(--ink); }
#main a{ color:var(--teal-d); }
#main a:hover{ color:var(--teal); }

/* ---------- Logo / 报头 ---------- */
.logo{ font-size:1.5em; letter-spacing:.01em; }
.logo .latin{ font-size:.5em; font-weight:600; opacity:.7; display:block; letter-spacing:.22em; margin-top:.1em; }
.logo small{ font-weight:600; }

/* ---------- Intro 大首屏（Massively 的 #intro） ---------- */
#intro h1{ line-height:1.05; }
.intro-kicker{ display:inline-block; font-family:"Spline Sans Mono",monospace; font-size:.6rem;
  letter-spacing:.32em; text-transform:uppercase; color:var(--teal);
  border:1px solid rgba(13,148,136,.5); border-radius:2px; padding:.5em .9em; margin-bottom:1.4em; }

/* ---------- 首屏出站卡（副位·不露码 §21.5） ---------- */
.hero-out{
  max-width:640px; margin:1.7rem auto 0; text-align:left;
  background:rgba(11,22,40,.62); border:1px solid rgba(63,208,194,.40);
  border-left:4px solid var(--teal); border-radius:5px;
  padding:1.05rem 1.25rem; box-shadow:0 20px 46px -28px rgba(0,0,0,.85);
}
.hero-out .ho-tag{ display:inline-block; font-family:"Spline Sans Mono",monospace;
  font-size:.56rem; letter-spacing:.18em; text-transform:uppercase; color:var(--teal);
  border:1px solid rgba(63,208,194,.45); border-radius:2px; padding:.32em .6em; margin-bottom:.6rem; }
.hero-out p{ color:#d8e1eb; font-size:.86rem; line-height:1.62; margin:0 0 .95rem; }
.hero-out p b{ color:#fff; font-weight:600; }
.hero-out .ho-act{ display:flex; flex-wrap:wrap; gap:.6rem; align-items:center; }
.hero-out .ho-act .button{ margin:0; }
.hero-out .ho-act .button.ghost{ background:transparent !important; color:#fff !important;
  box-shadow:inset 0 0 0 1px rgba(255,255,255,.32) !important; }
.hero-out .ho-act .button.ghost:hover{ box-shadow:inset 0 0 0 1px rgba(63,208,194,.8) !important; color:#bdeee7 !important; }
@media screen and (max-width:480px){
  .hero-out{ margin-top:1.2rem; padding:.95rem 1rem; }
  .hero-out .ho-act .button{ width:100%; text-align:center; }
}

/* ---------- 出行三阶段分流器（任务导航 §17.3） ---------- */
.phases{ display:grid; grid-template-columns:repeat(3,1fr); gap:1.25rem; }
.phase-card{
  background:#fff; border:1px solid var(--line); border-top:3px solid var(--teal);
  border-radius:3px; padding:1.5rem 1.4rem; display:flex; flex-direction:column;
}
.phase-card .step{ font-family:"Spline Sans Mono",monospace; font-size:.62rem; letter-spacing:.18em;
  color:var(--teal-d); text-transform:uppercase; }
.phase-card h3{ font-size:1.15rem; margin:.35rem 0 .55rem; }
.phase-card p{ font-size:.82rem; color:var(--muted); margin-bottom:.9rem; }
.phase-card ul{ list-style:none; margin:0 0 0; padding:0; }
.phase-card li{ padding:.32em 0; border-top:1px dashed var(--line); font-size:.85rem; }
.phase-card li:first-child{ border-top:0; }
.phase-card a{ font-weight:600; }

/* ---------- 签名组件①：真实花费对照表（登机牌 / 小票样式） ---------- */
.truecost{
  position:relative; background:#fff; border:1px solid var(--ink);
  border-radius:4px; margin:1.5rem 0; overflow:hidden;
  box-shadow:0 12px 30px -22px rgba(16,38,64,.55);
}
.truecost .tc-head{
  background:var(--ink); color:#fff; padding:.9rem 1.1rem;
  display:flex; align-items:center; justify-content:space-between; gap:1rem;
}
.truecost .tc-head h3{ color:#fff; font-size:1rem; margin:0; line-height:1.3; }
.truecost .tc-tag{
  font-family:"Spline Sans Mono",monospace; font-size:.55rem; letter-spacing:.18em;
  text-transform:uppercase; color:var(--ink); background:var(--teal);
  padding:.4em .7em; border-radius:2px; white-space:nowrap; font-weight:700;
}
.truecost table{ width:100%; border-collapse:collapse; margin:0; }
.truecost th,.truecost td{ padding:.7rem .9rem; text-align:left; border-bottom:1px solid var(--line); font-size:.82rem; }
.truecost thead th{ background:var(--paper-2); color:var(--ink); font-size:.66rem; letter-spacing:.06em;
  text-transform:uppercase; font-family:"Inter",sans-serif; font-weight:600; }
.truecost td.num,.truecost th.num{ text-align:right; font-family:"Spline Sans Mono",monospace; white-space:nowrap; }
.truecost .method{ font-weight:600; color:var(--ink); }
.truecost tr.is-bridge td{ background:var(--teal-tint); }
.truecost tr.is-bridge .method{ color:var(--teal-d); }
.truecost .badge-bridge{ display:inline-block; font-size:.58rem; font-family:"Spline Sans Mono",monospace;
  color:#fff; background:var(--teal); border-radius:2px; padding:.1em .5em; margin-left:.4em; letter-spacing:.05em; }
.truecost .tc-foot{
  border-top:1px dashed var(--ink);
  background:repeating-linear-gradient(90deg,#fff 0 8px,transparent 8px 16px);
  padding:.7rem 1.1rem; font-size:.66rem; color:var(--muted); line-height:1.5;
}
.truecost .tc-foot::before{ content:""; }

/* ---------- 签名组件②：出行钱包打包清单（行李牌样式） ---------- */
.packlist{
  background:var(--paper-2); border:1px solid var(--line); border-left:4px solid var(--teal);
  border-radius:3px; padding:1.3rem 1.4rem; margin:1.5rem 0;
}
.packlist h3{ font-size:1.05rem; margin:0 0 .2rem; }
.packlist .pl-sub{ font-size:.74rem; color:var(--muted); margin-bottom:.9rem; }
.packlist ul{ list-style:none; margin:0; padding:0; }
.packlist li{ position:relative; padding:.42em 0 .42em 1.8em; border-top:1px solid var(--line); font-size:.86rem; }
.packlist li:first-child{ border-top:0; }
.packlist li::before{
  content:""; position:absolute; left:0; top:.62em; width:1.05em; height:1.05em;
  border:1.5px solid var(--teal); border-radius:3px; }
.packlist li.checked::before{
  background:var(--teal);
  background-image:url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M3.5 8.5l3 3 6-7' fill='none' stroke='white' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  background-size:contain; }

/* ---------- 面包屑 ---------- */
.crumbs{ font-size:.72rem; color:var(--muted); padding:1.2rem 0 0 !important; border-top:0 !important; }
.crumbs a{ color:var(--muted); } .crumbs a:hover{ color:var(--teal); }
.crumbs span{ color:var(--ink); }

/* ---------- guide 索引（钩子标题列表） ---------- */
.guide-index{ list-style:none; margin:0; padding:0; }
.guide-index li{ border-top:1px solid var(--line); padding:1rem 0; }
.guide-index li:first-child{ border-top:0; }
.guide-index .gi-no{ font-family:"Spline Sans Mono",monospace; font-size:.72rem; color:var(--teal-d); }
.guide-index a{ font-family:"Bricolage Grotesque","Noto Sans SC",sans-serif; font-weight:700;
  font-size:1.08rem; color:var(--ink) !important; display:block; margin:.1rem 0 .25rem; }
.guide-index a:hover{ color:var(--teal-d) !important; }
.guide-index p{ font-size:.82rem; color:var(--muted); margin:0; }

/* ---------- 注册前核对卡（首页副位，不露码 §21.5） ---------- */
/* 注意：用 #main 前缀提高优先级，盖过 #main p / #main h3（否则正文/标题被强制成深色，压在深卡上看不清） */
#main .precheck{ background:var(--ink); color:#eef3f9; border-radius:4px; padding:1.7rem 1.7rem;
  border:1px solid rgba(63,208,194,.28); border-left:4px solid var(--teal); }
#main .precheck h3{ color:#fff; font-size:1.2rem; margin:0 0 .6rem; }
#main .precheck p{ color:#eef3f9; font-size:.92rem; line-height:1.7; }
#main .precheck p b{ color:#fff; font-weight:600; }
#main .precheck a{ color:#7fd3c8; }
#main .precheck .button{ margin-top:.4rem; }

/* ---------- 反钓鱼提示框（go 出站页 / 风险页） ---------- */
.phish-warn{ background:#fbecec; border:1px solid #e7b9b9; border-left:4px solid #c0392b;
  border-radius:4px; padding:1rem 1.15rem; margin:1.3rem 0; color:#5a2a22; font-size:.86rem; line-height:1.65; }
.phish-warn strong{ color:#a5311f; }
#main .phish-warn, #main .phish-warn strong{ color:#5a2a22; }
#main .phish-warn strong{ color:#a5311f; }

/* ---------- 通用小标签 ---------- */
.tag{ display:inline-block; font-family:"Spline Sans Mono",monospace; font-size:.58rem; letter-spacing:.16em;
  text-transform:uppercase; color:var(--teal-d); background:var(--teal-tint); padding:.35em .7em; border-radius:2px; }

/* ---------- 页脚署名 ---------- */
.byline{ font-size:.78rem; color:#9fb0c0; line-height:1.6; }
.byline b{ color:#fff; }
#footer h3{ font-family:"Bricolage Grotesque","Noto Sans SC",sans-serif; }

/* ---------- 按钮微调 ---------- */
.button.primary, input[type="submit"].primary{ background-color:var(--teal) !important; color:#fff !important; }
.button.primary:hover{ background-color:var(--teal-d) !important; }

/* =====================================================================
   正文 guide 页专用（TOC 大纲 / 导语 / 信息框 / FAQ / 相关阅读 / 更新条）
   ===================================================================== */

/* guide 顶部：紧凑报头（非整屏照片） */
.guide-head{ padding-top:2.2rem !important; }
.guide-head .kicker{ font-family:"Spline Sans Mono",monospace; font-size:.62rem; letter-spacing:.2em;
  text-transform:uppercase; color:var(--teal-d); }
.guide-head h1{ font-size:2.1rem; line-height:1.16; margin:.5rem 0 .4rem; color:var(--ink); }
.guide-head h1 small{ display:block; font-family:"Inter","Noto Sans SC",sans-serif; font-weight:500;
  font-size:.94rem; color:var(--muted); letter-spacing:0; margin-top:.55rem; }
.guide-meta{ font-size:.74rem; color:var(--muted); margin:.2rem 0 0; display:flex; flex-wrap:wrap; gap:.4rem 1.1rem; }
.guide-meta b{ color:var(--ink-soft); font-weight:600; }

/* 导语：先给结论 */
.lede{ font-size:1.02rem; line-height:1.75; color:var(--ink-soft); border-left:3px solid var(--teal);
  padding:.2rem 0 .2rem 1.1rem; margin:1.4rem 0 1.6rem; }

/* TOC 大纲（可折叠、锚点可跳） */
details.toc{ background:var(--paper-2); border:1px solid var(--line); border-radius:3px; padding:.5rem 1.1rem; margin:1.6rem 0; }
details.toc > summary{ cursor:pointer; font-family:"Bricolage Grotesque","Noto Sans SC",sans-serif; font-weight:700;
  font-size:.82rem; letter-spacing:.04em; color:var(--ink); list-style:none; padding:.5rem 0; }
details.toc > summary::-webkit-details-marker{ display:none; }
details.toc > summary::before{ content:"▸ "; color:var(--teal-d); }
details.toc[open] > summary::before{ content:"▾ "; }
details.toc ol{ columns:2; column-gap:2rem; margin:.4rem 0 .7rem; padding-left:1.1rem; font-size:.84rem; }
details.toc li{ margin:.3em 0; break-inside:avoid; }
details.toc a{ color:var(--ink-soft) !important; } details.toc a:hover{ color:var(--teal-d) !important; }

/* 正文排版 */
.article h2{ font-size:1.4rem; margin:2.4rem 0 .8rem; padding-top:.6rem; border-top:1px solid var(--line); color:var(--ink); scroll-margin-top:1.5rem; }
.article h2 .h2no{ font-family:"Spline Sans Mono",monospace; font-size:.8rem; color:var(--teal-d); margin-right:.5rem; }
.article h3{ font-size:1.08rem; margin:1.5rem 0 .5rem; color:var(--ink); }
.article p{ line-height:1.78; margin:0 0 1rem; }
.article ul,.article ol{ line-height:1.7; }
.article strong{ color:var(--ink); }

/* 信息框家族（克制、同族不同色，避免8个一样的橙callout） */
.box{ border-radius:3px; padding:1.1rem 1.2rem; margin:1.4rem 0; font-size:.9rem; line-height:1.7; }
.box .box-h{ font-family:"Bricolage Grotesque","Noto Sans SC",sans-serif; font-weight:700; font-size:.92rem; display:block; margin-bottom:.45rem; }
.box.scene{ background:#eef4f3; border:1px solid #cfe2de; }
.box.scene .box-h{ color:var(--teal-d); }
.box.mistake{ background:#fbf1ec; border:1px solid #f0d8cc; }
.box.mistake .box-h{ color:#b15a36; }
.box.stop{ background:#fbf6e9; border:1px solid #ecdcb0; }
.box.stop .box-h{ color:#9a7b1f; }
.box.stop .box-h::before{ content:"■ "; color:#c9a227; }
.box.field{ background:#eef1f6; border:1px solid #d3dbe8; }
.box.field .box-h{ color:#3a5176; }
.box.field code{ background:#dfe5ef; color:#28344a; padding:.05em .4em; border-radius:2px; font-family:"Spline Sans Mono",monospace; font-size:.82em; }

/* FAQ */
.faq{ margin:1.4rem 0; }
.faq details{ border-bottom:1px solid var(--line); padding:.2rem 0; }
.faq summary{ cursor:pointer; font-weight:600; color:var(--ink); padding:.7rem 0; list-style:none; font-size:.95rem; }
.faq summary::-webkit-details-marker{ display:none; }
.faq summary::after{ content:"+"; float:right; color:var(--teal-d); font-family:"Spline Sans Mono",monospace; }
.faq details[open] summary::after{ content:"–"; }
.faq details > p{ padding:0 0 .9rem; color:var(--ink-soft); font-size:.9rem; }

/* 数据/对比表（通用，区别于签名 .truecost） */
table.data{ width:100%; border-collapse:collapse; margin:1.4rem 0; font-size:.85rem; }
table.data th,table.data td{ border:1px solid var(--line); padding:.6rem .8rem; text-align:left; vertical-align:top; }
table.data thead th{ background:var(--paper-2); color:var(--ink); font-weight:600; }
table.data td.num{ text-align:right; font-family:"Spline Sans Mono",monospace; white-space:nowrap; }
table.data tr.is-bridge td{ background:var(--teal-tint); }

/* 相关阅读 / 下一步 */
.related{ margin:2rem 0 0; }
.related .related-h{ font-family:"Bricolage Grotesque","Noto Sans SC",sans-serif; font-weight:700; font-size:1.05rem; margin-bottom:.6rem; }
.related ul{ list-style:none; padding:0; margin:0; }
.related li{ border-top:1px solid var(--line); padding:.7rem 0; }
.related a{ font-weight:600; }

/* 文末出站 CTA 卡 */
.go-cta{ background:var(--ink); color:#dfe6ee; border-radius:4px; padding:1.4rem 1.5rem; margin:1.8rem 0 0; }
.go-cta h3{ color:#fff; font-size:1.08rem; margin:0 0 .4rem; }
.go-cta p{ color:#b9c4d2; font-size:.86rem; margin:0 0 .9rem; }

/* 更新条 / 编辑说明 */
.update-note{ font-size:.74rem; color:var(--muted); border-top:1px solid var(--line); margin-top:2rem; padding-top:1rem; line-height:1.6; }
.update-note b{ color:var(--ink-soft); }

/* 作者署名条 */
.author-card{ display:flex; gap:.9rem; align-items:flex-start; background:var(--paper-2); border:1px solid var(--line);
  border-radius:3px; padding:1rem 1.1rem; margin:1.6rem 0; font-size:.84rem; color:var(--ink-soft); }
.author-card .ac-badge{ flex:0 0 auto; width:2.4rem; height:2.4rem; border-radius:50%; background:var(--ink); color:#fff;
  display:flex; align-items:center; justify-content:center; font-family:"Bricolage Grotesque",sans-serif; font-weight:700; }
.author-card b{ color:var(--ink); }

@media screen and (max-width:736px){
  details.toc ol{ columns:1; }
  .guide-head h1{ font-size:1.6rem; }
  .article h2{ font-size:1.2rem; }
}

/* ---------- 响应式 ---------- */
/* 移动端汉堡按钮：保证 ≥44px 触摸目标（Massively 默认偏小约 32px） */
#navPanelToggle{ padding:0.9rem 1.3rem !important; }
@media screen and (max-width:980px){
  .phases{ grid-template-columns:1fr; gap:1rem; }
}
@media screen and (max-width:736px){
  .truecost .tc-head{ flex-direction:column; align-items:flex-start; gap:.5rem; }
  .truecost th,.truecost td{ padding:.55rem .6rem; font-size:.74rem; }
  .truecost .tc-tag{ font-size:.5rem; }
  .logo .latin{ letter-spacing:.16em; }
}
@media screen and (max-width:480px){
  .truecost{ overflow-x:auto; }
  #intro h1{ font-size:2.2em; }
}