/* ============================================================
   Forever Ago Guide — styles.css
   设计语言取自游戏本体：夜晚公路的两个世界（紫夜/记忆粉紫），
   核心结构件 = 拍立得照片 + 手绘 journal + 公路路牌。
   页面底 = 夜空（禁近白）；浅色只作内容面板（相册页）。
   ============================================================ */
:root{
  --night:#1b1622; --night2:#2a2035; --night3:#3a2f5c; --deep:#141019;
  --memo:#b96f8f; --memo2:#aa82a8; --memo-deep:#6e3c61;
  --ember:#e8a020; --ember-deep:#af594a;
  --van:#f0b429; --van-deep:#c9900f;
  --paper:#fbf8f0; --paper2:#f6efe2; --paper-line:#e6dbc8;
  --ink:#3b2f2a; --ink-soft:#6b5a4e; --ink-faint:#9a8a7c;
  --snow:#c3bad2; --snow-faint:#918aa4;
  --radius:3px; --radius-sm:2px; --maxw:1100px;
  --font:"Crimson Pro",Georgia,"Times New Roman",serif;
  --display:"Crimson Pro",Georgia,serif;
  --hand:"Caveat","Segoe Script",cursive;
  --label:"Oswald","Arial Narrow",Arial,sans-serif;
  color-scheme:dark;
}
*{box-sizing:border-box}
html{background:var(--deep)}
body{
  margin:0;color:var(--snow);font:17px/1.72 var(--font);
  -webkit-font-smoothing:antialiased;
  background:
    radial-gradient(1.6px 1.6px at 22% 14%, rgba(255,255,255,.8), transparent 55%),
    radial-gradient(1.2px 1.2px at 68% 38%, rgba(255,255,255,.6), transparent 55%),
    radial-gradient(1.4px 1.4px at 42% 72%, rgba(255,255,255,.55), transparent 55%),
    radial-gradient(1.1px 1.1px at 88% 12%, rgba(255,255,255,.65), transparent 55%),
    radial-gradient(1.3px 1.3px at 8% 55%, rgba(255,255,255,.5), transparent 55%),
    linear-gradient(180deg, var(--night) 0%, var(--night2) 30%, var(--night3) 64%, var(--deep) 100%);
  background-attachment:fixed;
}
/* 萤火虫（极少量光点，低开销） */
body::before,body::after{
  content:"";position:fixed;width:5px;height:5px;border-radius:50%;pointer-events:none;z-index:0;
  background:radial-gradient(circle, rgba(255,215,106,.95), rgba(255,215,106,0) 70%);
  animation:drift 11s ease-in-out infinite;
}
body::before{left:12%;top:26%}
body::after{right:9%;top:64%;animation-delay:-5s}
@keyframes drift{
  0%,100%{opacity:.25;transform:translate(0,0)}
  50%{opacity:.95;transform:translate(7px,-12px)}
}
@media (prefers-reduced-motion: reduce){
  body::before,body::after{animation:none;opacity:.5}
}
main,.topbar,.foot{position:relative;z-index:1}
img{max-width:100%;height:auto}
a{color:var(--van);text-decoration:none}
a:hover{text-decoration:underline}
a:focus-visible{outline:2px dashed var(--van);outline-offset:2px}
.wrap{max-width:var(--maxw);margin:0 auto;padding:0 18px}
.skip{position:absolute;left:-9999px}
.skip:focus{left:8px;top:8px;background:var(--night);padding:8px 12px;z-index:60}
.muted{color:var(--snow-faint)}

/* ---------- topbar / nav ---------- */
.topbar{
  position:sticky;top:0;z-index:30;
  background:rgba(27,22,34,.94);
  backdrop-filter:blur(8px);
  border-bottom:1px solid var(--border-dark, rgba(240,180,41,.18));
}
.topbar .bar{display:flex;align-items:center;gap:16px;min-height:64px;flex-wrap:wrap}
.brand{display:flex;align-items:center;gap:10px;color:#f5efe6}
.brand img{width:38px;height:38px;border-radius:50%;box-shadow:0 0 0 2px rgba(240,180,41,.35)}
.brand span{font-family:var(--display);font-size:21px;font-weight:700;letter-spacing:.01em}
.nav{margin-left:auto;display:flex;align-items:center;gap:14px}
.nav ul{display:flex;gap:16px;margin:0;padding:0;list-style:none;flex-wrap:wrap}
.nav a{
  color:var(--snow);font-family:var(--label);font-size:13px;font-weight:400;
  text-transform:uppercase;letter-spacing:.09em;text-decoration:none;
}
.nav a:hover{color:#fff}
.nav .active > a{color:var(--van);border-bottom:2px dashed var(--van)}
.nav li{position:relative}
.nav .kids{
  display:none;position:absolute;top:100%;left:-12px;min-width:216px;
  background:var(--night);border:1px solid var(--border-dark, rgba(240,180,41,.22));
  border-radius:var(--radius);padding:10px;flex-direction:column;gap:2px;
  box-shadow:0 18px 40px rgba(5,3,12,.55);
}
.nav li.has-kids::after{content:"";position:absolute;left:-14px;right:-14px;top:100%;height:14px;z-index:39}
.nav li.has-kids > a::after{content:" ▾";opacity:.7}
.nav li.has-kids:hover .kids,.nav li.has-kids:focus-within .kids{display:flex}
.nav .kids a{display:block;padding:7px 10px;border-radius:var(--radius-sm);text-transform:none;letter-spacing:.02em;font-size:13.5px;font-family:var(--font);color:var(--snow)}
.nav .kids a:hover{background:rgba(240,180,41,.12);color:#fff;text-decoration:none}
.nav .cta{
  border:1px solid rgba(240,180,41,.6);border-radius:var(--radius);padding:7px 13px;
  color:var(--van);font-weight:500;display:flex;align-items:center;gap:6px;
}
.nav .cta:hover{background:rgba(240,180,41,.14);text-decoration:none}
@media (max-width:860px){
  .topbar .bar{padding-top:10px;padding-bottom:10px}
  .nav{margin-left:0;width:100%;overflow-x:auto}
  .nav ul{flex-wrap:nowrap;white-space:nowrap}
  .nav .kids{position:static;display:flex;border:0;padding:4px 0 0;box-shadow:none;background:none}
}
/* 中日繁导航竖排保险 */
.nav li,.nav a{white-space:nowrap}

/* ---------- hero ---------- */
.hero{
  position:relative;
  background:
    linear-gradient(180deg, rgba(20,16,25,.32) 0%, rgba(27,22,34,.5) 55%, rgba(27,22,34,.78) 100%),
    var(--hero) center 32%/cover no-repeat,
    var(--night2);
  border-bottom:1px solid rgba(240,180,41,.22);
}
.hero-in{padding:92px 18px 66px;max-width:var(--maxw);margin:0 auto}
.hero .eyebrow{
  display:inline-block;margin:0 0 14px;padding:5px 12px;
  font-family:var(--label);font-size:12px;letter-spacing:.18em;text-transform:uppercase;font-weight:500;
  color:var(--van);background:rgba(27,22,34,.72);border:1px dashed rgba(240,180,41,.5);border-radius:999px;
}
.hero h1{
  font-family:var(--display);font-weight:700;color:#fff;
  font-size:clamp(40px,7.5vw,68px);line-height:1.02;margin:0 0 14px;
  text-shadow:0 2px 24px rgba(20,16,25,.65);
  max-width:16ch;
}
.hero .lead{color:#efe7f2;font-size:clamp(17px,2.4vw,21px);max-width:52ch;margin:0 0 22px;text-shadow:0 1px 14px rgba(20,16,25,.7)}
.hero-cta{display:flex;gap:12px;flex-wrap:wrap;margin:0}
.btn{
  background:var(--van);color:#241b2f;border:0;border-radius:var(--radius);
  padding:12px 20px;font-family:var(--label);font-size:13.5px;font-weight:500;
  letter-spacing:.09em;text-transform:uppercase;text-decoration:none;display:inline-block;
  box-shadow:0 6px 18px rgba(240,180,41,.28);
}
.btn:hover{background:#ffc63e;text-decoration:none;transform:translateY(-1px)}
.btn.ghost{background:rgba(27,22,34,.55);color:#fff;box-shadow:none;border:1px solid rgba(255,255,255,.55)}
.btn.ghost:hover{background:rgba(27,22,34,.8)}

/* ---------- facts strip（公路里程碑） ---------- */
.facts-strip{background:rgba(20,16,25,.6);border-bottom:1px solid rgba(240,180,41,.16)}
.facts{display:flex;flex-wrap:wrap;gap:12px;padding:16px 18px}
.fact{flex:1 1 170px;display:flex;flex-direction:column;gap:3px;padding:4px 2px}
.fact-k{font-family:var(--label);font-size:11px;letter-spacing:.16em;text-transform:uppercase;color:var(--snow-faint)}
.fact-v{font-family:var(--display);font-size:21px;line-height:1.2;color:#f5efe6;font-weight:600}

/* ---------- section head + grids ---------- */
.section-head{display:flex;align-items:baseline;gap:12px;margin:36px 0 18px;flex-wrap:wrap}
.section-head h2{
  margin:0;font-family:var(--display);font-size:25px;font-weight:700;color:#f5efe6;
  background:linear-gradient(transparent 58%, rgba(185,111,143,.42) 58%);
  padding:2px 10px 4px 8px;border-radius:var(--radius-sm);
}
.overline{font-family:var(--label);font-size:11px;letter-spacing:.18em;text-transform:uppercase;color:var(--memo)}
.count-pill{
  margin-left:10px;background:rgba(240,180,41,.16);color:var(--van);border:1px dashed rgba(240,180,41,.5);
  font-family:var(--label);font-size:13px;font-weight:500;padding:1px 10px;border-radius:999px;vertical-align:middle;
}
/* 首页正文面板（相册页） */
.home-body{
  background:var(--paper);color:var(--ink);border-radius:var(--radius);
  padding:30px 32px 38px;margin:8px 0 40px;
  box-shadow:0 22px 48px rgba(5,3,12,.5), 0 2px 0 rgba(255,255,255,.06) inset;
}
.home-body h2{color:var(--ink);font-family:var(--display);border:0;padding:0;background:none;font-size:25px}
.home-body h2::after{content:"";display:block;width:64px;height:0;border-top:3px dashed var(--van);margin-top:8px}
.home-body a{color:var(--ember-deep)}
.home-body ul{padding-left:22px}
.home-body li{margin:6px 0}
.home-body strong{color:#2c231f}

/* ---------- 拍立得卡片（首页网格） ---------- */
.grid{display:flex;flex-wrap:wrap;gap:22px;margin:6px 0 34px}
.card{
  flex:1 1 290px;display:flex;flex-direction:column;color:var(--ink);
  background:var(--paper);border-radius:2px;padding:11px 11px 0;
  box-shadow:0 14px 30px rgba(5,3,12,.5);
  text-decoration:none;
  transition:transform .18s ease, box-shadow .18s ease;
}
.card:nth-child(3n+1){transform:rotate(-1.1deg)}
.card:nth-child(3n+2){transform:rotate(.7deg)}
.card:nth-child(3n){transform:rotate(-.4deg)}
.card:hover{transform:rotate(0) translateY(-5px);box-shadow:0 22px 42px rgba(5,3,12,.6);text-decoration:none}
.card .thumb{position:relative;display:block}
.card .thumb img{aspect-ratio:16/10;object-fit:cover;width:100%;border-radius:1px;border:1px solid var(--paper-line)}
.pill-tag{
  position:absolute;left:8px;bottom:8px;
  background:linear-gradient(135deg, var(--memo), var(--memo-deep));color:#fff;
  font-family:var(--label);font-size:10.5px;font-weight:500;letter-spacing:.1em;text-transform:uppercase;
  padding:3px 9px;border-radius:999px;box-shadow:0 2px 8px rgba(20,16,25,.4);
}
.card .card-body{padding:12px 6px 16px}
.card h3{margin:0 0 6px;font-family:var(--display);font-size:19.5px;font-weight:700;color:var(--ink);line-height:1.25}
.card p{margin:0 0 10px;color:var(--ink-soft);font-size:14.5px;line-height:1.55}
.card .go{font-family:var(--label);font-size:12px;letter-spacing:.12em;text-transform:uppercase;color:var(--ember-deep);font-weight:500}
.card .stamp{display:block;margin-top:8px;font-family:var(--hand);font-size:16px;color:var(--ink-faint)}
.card.sm{flex:1 1 240px}
.card.sm h3{font-size:17px}

/* ---------- 内页：正文 + 目录 ---------- */
.article-grid{display:grid;grid-template-columns:minmax(0,1fr) 232px;gap:30px;align-items:start;padding:0 18px}
.article-grid > div{min-width:0}
article{
  background:var(--paper);color:var(--ink);border-radius:var(--radius);
  padding:30px 34px 44px;margin:14px 0 44px;
  box-shadow:0 22px 48px rgba(5,3,12,.5);
}
article h1{font-family:var(--display);font-size:clamp(28px,4.6vw,38px);line-height:1.12;margin:6px 0 14px;color:#2c231f}
article h2{
  font-family:var(--display);font-size:24px;color:#2c231f;
  margin:38px 0 14px;padding-bottom:10px;border-bottom:3px dashed rgba(240,180,41,.75);
}
article h2:first-of-type{margin-top:22px}
article h3{font-family:var(--display);font-size:19px;color:#2c231f;margin:26px 0 8px}
article p{margin:0 0 16px}
article ul,article ol{padding-left:24px;margin:0 0 18px}
article li{margin:7px 0}
article li::marker{color:var(--ember-deep)}
article strong{color:#2c231f}
article a{color:var(--ember-deep);text-decoration:underline;text-decoration-color:rgba(175,89,74,.4)}
article a:hover{text-decoration-color:var(--ember-deep)}
article img.zoom{
  width:100%;display:block;margin:20px 0 8px;cursor:zoom-in;
  border:10px solid #fff;border-radius:2px;
  box-shadow:0 10px 26px rgba(59,47,42,.28);
}
article img.zoom + p, article img.zoom ~ p:first-of-type{margin-top:0}
article img.zoom.open{max-width:min(1200px,96vw);cursor:zoom-out;border-color:#fff}
article blockquote{
  border-left:4px solid var(--memo);margin:20px 0;padding:6px 18px;
  font-family:var(--hand);font-size:21px;line-height:1.5;color:var(--memo-deep);
}
article code{background:var(--paper2);border:1px solid var(--paper-line);padding:1px 6px;border-radius:3px;font-size:.92em}
article .callout{
  background:#fdf3d8;border:1px solid #edd9a8;border-left:5px solid var(--ember);
  border-radius:0 var(--radius) var(--radius) 0;padding:16px 20px;margin:24px 0;
}
article .callout.note::before{
  content:"Roadside notes";display:block;font-family:var(--label);font-size:11px;
  letter-spacing:.18em;text-transform:uppercase;color:#a06a12;margin-bottom:8px;
}
article .callout p{margin:0 0 8px}
article .callout ul{margin:6px 0 0;padding-left:20px}
article .callout li{margin:4px 0}

/* 表格（相纸上的记录表） */
.tbl-wrap{overflow-x:auto;margin:18px 0}
.tbl-wrap table{min-width:480px}
table{border-collapse:collapse;width:100%;font-size:15px;background:#fffdf7}
th,td{border:1px solid var(--paper-line);padding:9px 12px;text-align:left;vertical-align:top}
th{
  background:linear-gradient(180deg,#3a2f5c,#2e2549);color:#f2ecdd;
  font-family:var(--label);font-size:12.5px;font-weight:500;letter-spacing:.07em;text-transform:uppercase;
}
td{color:var(--ink)}
tbody tr:nth-child(even) td{background:var(--paper2)}
table strong,table b{color:inherit}

/* 面包屑（夜色上） */
.crumb{font-size:13.5px;color:var(--snow-faint);margin:18px 0 0}
.crumb a{color:var(--snow)}
.crumb .sep{opacity:.5;margin:0 5px}
.crumb .here{color:#fff;font-weight:600}

/* 快速结论框（贴纸便签） */
.quick-answer{
  background:linear-gradient(135deg, rgba(185,111,143,.14), rgba(170,130,168,.2));
  border:1px dashed var(--memo);border-radius:var(--radius);
  padding:14px 18px;margin:18px 0 6px;
}
.qa-stamp{
  display:inline-block;font-family:var(--label);font-size:11px;font-weight:500;
  letter-spacing:.18em;text-transform:uppercase;color:var(--memo-deep);margin-bottom:6px;
}
.quick-answer p{margin:2px 0;color:#4a3a3f;font-size:16px}

/* 目录（票根） */
.toc{
  position:sticky;top:86px;margin:14px 0 0;
  background:rgba(20,16,25,.72);
  border:1px dashed rgba(240,180,41,.45);border-radius:var(--radius);
  padding:16px 16px 14px;
}
.toc .overline{display:block;margin-bottom:10px;color:var(--van)}
.toc-list{display:flex;flex-direction:column;gap:4px;margin:0;padding:0;list-style:none}
.toc-list a{font-size:14px;color:var(--snow);opacity:.92;padding:3px 0;border-bottom:1px solid rgba(195,186,210,.12)}
.toc-list a:hover{opacity:1;color:#fff;text-decoration:none;border-bottom-color:rgba(240,180,41,.5)}
@media (max-width:980px){
  .article-grid{grid-template-columns:1fr}
  .toc{position:static;margin:20px 0 0}
}

/* All guides（内页底部导航） */
.all-guides{margin-top:40px;border-top:1px dashed rgba(240,180,41,.6);padding-top:10px}
.all-guides .section-head h2{background:none;color:#f5efe6}
.guide-links{list-style:none;margin:4px 0 0;padding:0;display:grid;grid-template-columns:1fr 1fr;gap:6px 26px}
.guide-links a{
  display:block;padding:9px 2px;color:#e8dfd0;text-decoration:none;
  border-bottom:1px solid rgba(195,186,210,.14);font-size:15.5px;
}
.guide-links a::before{content:"→ ";color:var(--van)}
.guide-links a:hover{color:#fff;border-bottom-color:rgba(240,180,41,.5)}
@media (max-width:640px){.guide-links{grid-template-columns:1fr}}
/* all-guides 在浅色 article 内时反色 */
article .all-guides h2{color:#2c231f}
article .all-guides .guide-links a{color:var(--ink);border-bottom-color:var(--paper-line)}
article .all-guides .guide-links a:hover{color:var(--ember-deep)}

/* ---------- ad slot ---------- */
@media (hover: hover) and (pointer: fine){ .ad-slot{display:block} }
@media not all and (hover: hover) and (pointer: fine){ .ad-slot{display:none} }
.ad-slot{margin:26px auto;max-width:var(--maxw)}
.ad-inner{min-height:90px;border:1px dashed rgba(195,186,210,.3);border-radius:var(--radius-sm);background:rgba(20,16,25,.5);overflow:hidden}

/* ---------- footer（夜路） ---------- */
.foot{
  margin-top:30px;padding:34px 0 26px;
  background:linear-gradient(180deg, var(--night) 0%, var(--deep) 100%);
  border-top:1px solid rgba(240,180,41,.22);
}
.foot::before{
  content:"";display:block;height:0;border-top:3px double rgba(240,180,41,.55);
  margin:-34px 18px 30px;max-width:var(--maxw);
}
.foot .disclaimer{color:var(--snow-faint);font-size:13px;max-width:88ch}
.foot-links a{color:var(--snow)}
.foot .muted{font-family:var(--hand);font-size:16px;color:var(--snow-faint)}

/* ---------- ribbon（备用） ---------- */
.ribbon{background:var(--van);color:#241b2f;font-weight:600;font-size:13px;letter-spacing:.04em;padding:7px 0}
.ribbon .wrap{display:block}

/* 保险：各处深底上 strong 不得隐形 */
.facts strong,.hero strong{color:inherit}