:root { --ink:#172029; --muted:#65717d; --line:#e7e8e9; --paper:#fffdf9; --cream:#f8f2e9; --accent:#e84d32; --dark:#172029; --gold:#f3b54a; }
* { box-sizing:border-box; }
html { scroll-behavior:smooth; }
body { margin:0; color:var(--ink); background:var(--paper); font-family:"Microsoft YaHei", "PingFang SC", Arial, sans-serif; line-height:1.7; }
a { color:inherit; text-decoration:none; }
img { display:block; width:100%; max-width:100%; object-fit:cover; }
.site-header { position:sticky; top:0; z-index:20; background:rgba(255,253,249,.96); border-bottom:1px solid var(--line); backdrop-filter:blur(10px); }
.header-inner, main, .footer-inner { width:min(1180px, calc(100% - 40px)); margin:0 auto; }
.header-inner { min-height:72px; display:flex; align-items:center; gap:26px; }
.brand { display:flex; align-items:center; flex:none; gap:9px; font-weight:800; font-size:20px; letter-spacing:-.5px; }
.brand-mark { display:grid; width:35px; height:35px; place-items:center; border-radius:11px; color:#fff; background:var(--accent); transform:rotate(-6deg); }
.main-nav { display:flex; flex:1; justify-content:space-between; gap:11px; }
.main-nav a { padding:22px 0 18px; border-bottom:3px solid transparent; white-space:nowrap; font-size:14px; font-weight:700; }
.main-nav a:hover { color:var(--accent); border-color:var(--accent); }
.main-nav span { display:inline-block; margin-right:4px; color:var(--accent); }
.menu-toggle { display:none; margin-left:auto; border:0; background:transparent; font-size:24px; }
.hero { display:grid; grid-template-columns:1.02fr .98fr; gap:56px; align-items:center; min-height:498px; padding:68px 0 58px; }
.kicker, .eyebrow { margin:0 0 10px; color:var(--accent); font-size:12px; font-weight:800; letter-spacing:1.5px; }
.hero h1, .channel-hero h1 { margin:0; font-family:Georgia, "Microsoft YaHei", serif; font-size:clamp(40px, 6vw, 74px); line-height:1.08; letter-spacing:-3px; }
.hero h1 a { border-bottom:4px solid var(--gold); }
.hero-copy > p:not(.kicker) { max-width:475px; margin:25px 0 30px; color:var(--muted); font-size:18px; }
.primary-button { display:inline-flex; align-items:center; gap:15px; padding:13px 21px; border-radius:4px; color:#fff; background:var(--dark); font-weight:800; }
.primary-button span { color:var(--gold); font-size:20px; }
.hero-slider { position:relative; min-height:365px; overflow:hidden; border-radius:8px; background:#d8d0c8; box-shadow:15px 16px 0 var(--gold); }
.slide { position:absolute; inset:0; margin:0; opacity:0; transition:opacity .5s ease; }
.slide.is-active { opacity:1; }
.slide img { height:365px; }
.slide figcaption { position:absolute; bottom:0; left:0; right:0; padding:24px; color:#fff; font-size:21px; font-weight:800; background:linear-gradient(transparent, rgba(0,0,0,.7)); }
.slider-dots { position:absolute; right:18px; top:18px; display:flex; gap:7px; }
.slider-dots button { width:25px; height:25px; border:1px solid #fff; border-radius:50%; color:#fff; background:transparent; font-size:0; cursor:pointer; }
.slider-dots button.is-active { background:var(--gold); border-color:var(--gold); }
.section-shell, .content-section, .app-section { margin-bottom:68px; }
.ticker { display:flex; align-items:center; gap:16px; padding:16px 21px; border:1px solid var(--line); border-left:5px solid var(--accent); background:#fff; }
.ticker-icon { color:var(--accent); }
.ticker p { flex:1; margin:0; color:var(--muted); }
.ticker a, .section-heading > a, .text-button { color:var(--accent); font-size:14px; font-weight:800; }
.section-heading { display:flex; align-items:end; justify-content:space-between; gap:20px; margin-bottom:23px; }
.section-heading h2, .section-panel h2, .about-section h2, .app-section h2, .channel-note h2 { margin:0; font-size:29px; line-height:1.25; letter-spacing:-1px; }
.section-heading.compact { margin-bottom:12px; }
.featured-grid, .story-grid { display:grid; grid-template-columns:repeat(3, 1fr); gap:20px; }
.story-grid { grid-template-columns:repeat(4, 1fr); }
.story-card { height:100%; overflow:hidden; border:1px solid var(--line); background:#fff; transition:transform .2s; }
.story-card:hover { transform:translateY(-4px); }
.thumb { display:block; overflow:hidden; aspect-ratio:1.58; background:#ede8e1; }
.thumb img { height:100%; }
.card-copy { min-height:190px; padding:17px; }
.card-copy h3 { margin:3px 0 9px; font-size:17px; line-height:1.45; }
.card-copy p:last-child { margin:0; color:var(--muted); font-size:13px; line-height:1.65; }
.split-section { display:grid; grid-template-columns:1.45fr .9fr; gap:22px; }
.section-panel { min-height:330px; padding:25px; border:1px solid var(--line); background:#fff; }
.warm-panel { background:var(--cream); border-color:#eddfca; }
.warm-panel ol { padding-left:22px; }
.warm-panel li { padding:8px 0; font-weight:700; }
.compact-list { border-top:1px solid var(--line); }
.compact-list a { display:grid; grid-template-columns:38px 1fr 54px; gap:12px; align-items:center; min-height:55px; border-bottom:1px solid var(--line); }
.compact-list span { color:var(--accent); font-family:Georgia, serif; font-size:20px; font-weight:bold; }
.compact-list b { overflow:hidden; font-size:14px; text-overflow:ellipsis; white-space:nowrap; }
.compact-list em { color:var(--muted); font-size:12px; font-style:normal; }
.topic-grid { display:grid; grid-template-columns:repeat(4, 1fr); gap:14px; }
.topic-tile { min-height:146px; padding:20px; color:#fff; background:#20313b; }
.topic-tile span { display:block; color:var(--gold); font-size:26px; }
.topic-tile strong { display:block; margin:8px 0 4px; font-size:18px; }
.topic-tile small { display:block; opacity:.75; line-height:1.45; }
.tile-1, .tile-6 { background:#a83f37; } .tile-2, .tile-5 { background:#87653a; } .tile-3, .tile-7 { background:#47666b; }
.insight-banner { display:grid; grid-template-columns:.95fr 1.05fr; gap:30px; padding:36px; background:var(--dark); color:#fff; }
.insight-banner .kicker { color:var(--gold); }
.insight-banner h2 { margin:0; font-size:32px; line-height:1.25; }
.insight-banner p { margin:0; color:#d8e0e2; }
.about-section { display:grid; grid-template-columns:.85fr 1.15fr; gap:48px; align-items:center; padding:36px 0; }
.about-image { aspect-ratio:1.1; overflow:hidden; border-radius:8px; } .about-image img { height:100%; }
.about-section p:not(.kicker) { color:var(--muted); }
.app-section { display:grid; grid-template-columns:1.45fr .55fr; align-items:center; gap:30px; padding:44px; color:#fff; background:var(--accent); }
.app-section .kicker { color:#ffe19f; } .app-section h2 { font-size:36px; } .app-section > div > p:not(.kicker) { max-width:620px; } .app-section .primary-button { color:var(--dark); background:#fff; } .app-section small { display:block; margin-top:13px; color:#ffe2d9; }
.qr-card { display:grid; width:170px; aspect-ratio:1; place-content:center; margin:auto; border:8px solid #fff; background:repeating-linear-gradient(45deg,#fff,#fff 9px,#ffe6dd 9px,#ffe6dd 18px); color:var(--dark); text-align:center; } .qr-card span { font-size:40px; font-weight:900; line-height:.8; } .qr-card b { font-size:47px; } .qr-card small { color:var(--dark); font-size:9px; font-weight:900; }
.site-footer { padding:38px 0 22px; color:#d4dee0; background:var(--dark); } .footer-inner { display:flex; justify-content:space-between; gap:30px; } .footer-inner p { max-width:500px; color:#9eafb4; font-size:13px; } .footer-links { display:flex; gap:18px; align-items:center; font-size:13px; } .copyright { width:min(1180px, calc(100% - 40px)); margin:25px auto 0; padding-top:18px; border-top:1px solid #30414a; color:#83949a; font-size:12px; }
.inner-page, .article-page { padding:30px 0 70px; } .breadcrumb { display:flex; gap:10px; color:var(--muted); font-size:13px; } .breadcrumb a:hover { color:var(--accent); } .channel-hero { margin:22px 0 45px; padding:45px; color:#fff; background:linear-gradient(120deg,#20313b,#455d63); } .channel-hero h1 { font-size:48px; letter-spacing:-2px; } .channel-hero p:last-child { max-width:720px; color:#d7e2e4; } .channel-grid { grid-template-columns:repeat(3,1fr); } .channel-note { display:flex; gap:18px; align-items:flex-start; margin-top:42px; padding:25px; border-left:5px solid var(--gold); background:var(--cream); } .channel-note > span { color:var(--accent); font-size:27px; } .channel-note p { margin-bottom:0; color:var(--muted); }
.article-shell { max-width:820px; margin:24px auto 0; } .article-header { padding-bottom:26px; border-bottom:1px solid var(--line); } .article-header h1 { margin:0 0 17px; font-size:clamp(29px,5vw,45px); line-height:1.25; letter-spacing:-1.5px; } .article-meta { display:flex; flex-wrap:wrap; gap:10px 20px; color:var(--muted); font-size:13px; } .article-lead { display:flex; gap:16px; margin:30px 0; padding:18px 20px; border-radius:5px; background:#f3f5f5; } .article-lead strong { flex:none; color:var(--accent); } .article-lead p { margin:0; } .article-chapter { margin:40px 0; } .article-chapter h2 { padding-left:13px; border-left:4px solid var(--accent); font-size:23px; } .article-chapter p { color:#35424b; font-size:17px; } .article-chapter figure { margin:24px 0; } .article-chapter figure img { aspect-ratio:1.68; background:#eee; } .article-chapter figcaption { padding-top:8px; color:var(--muted); font-size:13px; text-align:center; } .article-end { display:flex; gap:12px; justify-content:center; align-items:center; padding:20px; border-top:1px dashed #b9c0c3; border-bottom:1px dashed #b9c0c3; color:var(--muted); } .article-end span { display:grid; width:24px; height:24px; place-items:center; border-radius:50%; color:#fff; background:#6a9a71; } .article-end p { margin:0; } .chapter-nav { display:flex; justify-content:space-between; gap:20px; margin-top:34px; } .chapter-nav a { padding:11px 15px; border:1px solid var(--line); font-size:14px; font-weight:700; } .chapter-nav a:hover { color:#fff; background:var(--dark); }
@media (max-width:850px) { .header-inner, main, .footer-inner { width:min(100% - 28px, 620px); } .header-inner { min-height:63px; } .menu-toggle { display:block; } .main-nav { display:none; position:absolute; top:63px; left:0; right:0; flex-direction:column; gap:0; padding:10px 20px 18px; background:var(--paper); border-bottom:1px solid var(--line); } .main-nav.is-open { display:flex; } .main-nav a { padding:8px 0; border:0; } .hero { grid-template-columns:1fr; gap:32px; min-height:0; padding:42px 0; } .hero h1 { font-size:52px; } .hero-slider, .slide img { min-height:300px; height:300px; } .featured-grid, .story-grid, .channel-grid { grid-template-columns:repeat(2,1fr); } .split-section, .insight-banner, .about-section, .app-section { grid-template-columns:1fr; } .topic-grid { grid-template-columns:repeat(2,1fr); } .app-section { padding:30px; } .qr-card { margin:0; } .footer-inner { flex-direction:column; } }
@media (max-width:520px) { .header-inner, main, .footer-inner { width:calc(100% - 24px); } .hero h1 { font-size:44px; } .hero-copy > p:not(.kicker) { font-size:16px; } .ticker { align-items:flex-start; flex-wrap:wrap; } .ticker p { flex-basis:76%; } .featured-grid, .story-grid, .channel-grid { grid-template-columns:1fr; } .story-grid .story-card { display:grid; grid-template-columns:40% 60%; } .story-grid .thumb { height:100%; aspect-ratio:auto; } .story-grid .card-copy { min-height:0; padding:13px; } .story-grid .card-copy p:last-child { display:none; } .topic-grid { gap:9px; } .topic-tile { min-height:125px; padding:14px; } .topic-tile small { font-size:11px; } .channel-hero { margin-bottom:30px; padding:29px 22px; } .channel-hero h1 { font-size:38px; } .section-heading h2, .section-panel h2, .about-section h2, .app-section h2 { font-size:26px; } .article-chapter p { font-size:16px; } .chapter-nav { flex-direction:column; } }