/* SEO/SSR content pages — reuses the app's own tokens (frontend/src/index.css) so this
   layer doesn't read as a bolted-on second site. */
@import url('https://fonts.googleapis.com/css2?family=Unbounded:wght@600;700&family=Golos+Text:wght@400;500;600&display=swap');

:root{
  --ink:#1e1113; --ink2:#2a1518; --paper:#faf6f2; --card:#ffffff; --mut:#826c6c;
  --wine:#722f37; --wine-deep:#3a181d; --claret:#9e4a50; --wine-soft:#f5e9ea;
  --gold:#c9992e; --gold-l:#e8c97e; --gold-soft:#fbf3df; --line:#ebdede; --ok:#3e7c4f;
  --font-display:"Unbounded", sans-serif; --font-ui:"Golos Text", sans-serif;
  color-scheme: light;
}
html[lang="zh"]{ --font-ui:"Noto Sans SC","Golos Text",sans-serif; }

@media (prefers-color-scheme: dark){
  :root{
    --ink:#f3e6e6; --ink2:#fbf1f1; --paper:#1a0f11; --card:#241318; --mut:#c2a0a1;
    --wine:#e2969b; --wine-deep:#f7ecec; --claret:#d98a90; --wine-soft:rgba(114,47,55,.35);
    --gold:#e8c97e; --gold-l:#f3dca0; --gold-soft:rgba(201,153,46,.16); --line:#3f2226; --ok:#7fc491;
    color-scheme: dark;
  }
}

*{ box-sizing:border-box; }
body{ margin:0; background:var(--paper); color:var(--ink); font-family:var(--font-ui); line-height:1.6; font-size:16px; }
h1,h2,h3{ font-family:var(--font-display); font-weight:700; line-height:1.25; text-wrap:balance; }
h1{ font-size:clamp(26px,4vw,36px); margin:.2em 0 .3em; }
h2{ font-size:19px; margin:1.6em 0 .5em; color:var(--wine); }
p{ margin:.6em 0; max-width:70ch; }
a{ color:var(--wine); text-decoration-color:var(--line); }
a:hover{ text-decoration-color:var(--wine); }
.mut{ color:var(--mut); }
.wrap{ max-width:920px; margin:0 auto; padding:0 20px; }

.site-head{ border-bottom:1px solid var(--line); padding:16px 0; }
.site-head .wrap{ display:flex; align-items:center; gap:20px; flex-wrap:wrap; }
.brand{ font-family:var(--font-display); font-weight:700; color:var(--ink); text-decoration:none; font-size:15px; }
.site-nav{ display:flex; gap:16px; flex-wrap:wrap; font-size:13.5px; margin-right:auto; }
.site-nav a{ color:var(--mut); text-decoration:none; }
.site-nav a:hover{ color:var(--wine); }
.lang-switch{ display:flex; gap:6px; font-size:12px; text-transform:uppercase; font-family:var(--font-ui); }
.lang-switch a{ padding:2px 7px; border-radius:5px; color:var(--mut); text-decoration:none; }
.lang-switch a.on{ background:var(--wine); color:#fff; }

.crumbs{ border-bottom:1px solid var(--line); background:var(--card); }
.crumbs .wrap{ padding:9px 20px; font-size:12.5px; color:var(--mut); }
.crumbs a{ color:var(--mut); text-decoration:none; }
.crumbs a:hover{ color:var(--wine); }
.crumbs .sep{ margin:0 6px; }
.crumbs .here{ color:var(--ink); }

main.wrap{ padding:40px 20px 70px; }
.page .lede{ font-size:17px; color:var(--mut); max-width:65ch; }

.fact-row{ display:flex; gap:14px; flex-wrap:wrap; margin:18px 0; }
.fact{ border:1px solid var(--line); border-radius:10px; padding:10px 16px; background:var(--card); }
.fact b{ display:block; font-family:var(--font-display); font-size:18px; color:var(--wine); }
.fact span{ font-size:11.5px; color:var(--mut); text-transform:uppercase; letter-spacing:.04em; }

.twrap{ overflow-x:auto; border:1px solid var(--line); border-radius:10px; margin:12px 0; }
table{ border-collapse:collapse; width:100%; min-width:420px; font-size:14px; }
th,td{ padding:9px 14px; text-align:left; border-bottom:1px solid var(--line); }
thead th{ background:var(--wine-soft); font-size:11.5px; text-transform:uppercase; letter-spacing:.03em; color:var(--wine-deep); }
tbody tr:last-child td{ border-bottom:none; }

.card-grid{ display:grid; grid-template-columns:repeat(auto-fill,minmax(220px,1fr)); gap:14px; margin:18px 0; }
.entity-card{ display:block; border:1px solid var(--line); border-radius:12px; padding:16px 18px; background:var(--card); text-decoration:none; color:var(--ink); }
.entity-card:hover{ border-color:var(--gold); }
.entity-card h3{ margin:0 0 4px; font-size:16px; }

ul.plain{ padding-left:1.2em; }
ul.plain li{ margin:.3em 0; }

.cta-block{ margin:34px 0 10px; }
.cta{ display:inline-block; background:var(--wine); color:#fff; font-family:var(--font-ui); font-weight:600;
  padding:11px 22px; border-radius:9px; text-decoration:none; }
.cta:hover{ background:var(--wine-deep); }

.site-foot{ border-top:1px solid var(--line); padding:22px 0; }
.foot-links{ display:flex; gap:16px; flex-wrap:wrap; font-size:12.5px; margin-bottom:8px; }
.foot-links a{ color:var(--mut); text-decoration:none; }
.foot-links a:hover{ color:var(--wine); }