:root { --ink:#18211e; --muted:#6d7772; --line:#dfe7e1; --paper:#fbfcf8; --mint:#cfe9db; --green:#77ae86; --dark:#20342e; --orange:#f4d2a9; --violet:#dcd6f3; --sky:#cfe5ed; --rose:#f3d0d7; }
* { box-sizing:border-box; }
html { scroll-behavior:smooth; }
body { margin:0; background:var(--paper); color:var(--ink); font-family: "Microsoft YaHei", "PingFang SC", sans-serif; line-height:1.75; }
a { color:inherit; text-decoration:none; }
img { display:block; width:100%; height:100%; object-fit:cover; }
.container { width:min(1200px, calc(100% - 48px)); margin:0 auto; }
.site-header { padding:22px 0; background:rgba(251,252,248,.94); border-bottom:1px solid var(--line); position:sticky; top:0; z-index:20; backdrop-filter:blur(16px); }
.header-inner { display:flex; align-items:center; justify-content:space-between; gap:28px; }
.brand,.footer-brand { display:flex; align-items:center; gap:11px; font-weight:800; }
.brand-mark { display:grid; place-items:center; width:42px; height:42px; border-radius:14px 14px 14px 4px; background:var(--dark); color:#fff; font-size:23px; box-shadow:6px 6px 0 #b8d5c2; }
.brand-text { display:flex; flex-direction:column; line-height:1.15; }.brand-text strong { font-size:18px; }.brand-text small { margin-top:4px; color:var(--muted); font-size:9px; letter-spacing:2px; }
.main-nav { display:flex; align-items:center; gap:6px; flex-wrap:wrap; justify-content:flex-end; }.nav-link { display:flex; gap:6px; align-items:center; padding:9px 11px; color:var(--muted); border-radius:12px; font-size:13px; transition:.2s; }.nav-link:hover,.nav-link.is-active { color:var(--ink); background:#edf4ee; }.nav-icon { font-size:16px; color:var(--green); }.menu-toggle { display:none; border:0; background:none; font-size:24px; }
.hero { margin-top:64px; display:grid; grid-template-columns:1fr .9fr; gap:72px; align-items:center; min-height:520px; }.eyebrow { color:#668879; font-size:11px; font-weight:800; letter-spacing:2.5px; }.hero h1 { margin:16px 0 8px; font-size:clamp(56px,8vw,104px); line-height:.95; letter-spacing:-5px; }.hero-lead { margin:0 0 15px; font-size:24px; font-weight:700; }.hero-desc { max-width:510px; color:var(--muted); font-size:15px; }.hero-actions { display:flex; gap:12px; margin:27px 0; }.button { display:inline-flex; align-items:center; justify-content:center; gap:18px; padding:13px 18px; border-radius:999px; font-weight:700; font-size:13px; }.button-primary { background:var(--dark); color:#fff; }.button-dark { background:var(--dark); color:#fff; }.button-ghost,.button-outline { border:1px solid #bbc9bf; }.button:hover { transform:translateY(-2px); }.hero-meta { display:flex; gap:30px; color:var(--muted); font-size:12px; }.hero-meta strong { display:block; color:var(--ink); font-size:21px; }.hero-art { height:500px; position:relative; border-radius:48% 48% 14px 14px; overflow:hidden; background:#d4e8d8; box-shadow:20px 20px 0 #deeee2; }.hero-art:after { content:""; position:absolute; inset:0; background:linear-gradient(135deg,rgba(15,42,30,.04),rgba(15,42,30,.38)); }.hero-note { position:absolute; z-index:2; left:20px; right:20px; bottom:18px; padding:14px 16px; display:flex; gap:10px; align-items:center; background:rgba(255,255,255,.9); border-radius:14px; font-size:12px; }.hero-note small,.hero-note strong { display:block; }.hero-note small { color:var(--muted); }.note-dot { width:9px; height:9px; border-radius:50%; background:#f19c62; }.hero-stamp { position:absolute; z-index:3; top:24px; right:24px; width:70px; height:70px; border:1px solid rgba(255,255,255,.8); border-radius:50%; display:grid; place-items:center; text-align:center; color:#fff; font-weight:800; font-size:14px; line-height:1.1; transform:rotate(12deg); }.hero-stamp small { font-size:8px; letter-spacing:2px; }
.ticker-bar { margin-top:60px; background:#e9f3eb; border-block:1px solid #d7e8db; }.ticker-inner { display:flex; gap:18px; align-items:center; min-height:58px; color:var(--muted); font-size:12px; }.ticker-label { padding:5px 10px; color:#fff; background:var(--dark); border-radius:99px; font-size:10px; letter-spacing:1px; }.ticker-inner a { margin-left:auto; color:var(--ink); font-weight:700; }
.section { padding-top:110px; }.section-heading { display:flex; align-items:end; justify-content:space-between; gap:30px; margin-bottom:28px; }.section-heading h2,.feature-copy h2,.about-grid h2,.dark-panel h2,.channel-note h2,.about-long h2,.values h2 { margin:8px 0 0; font-size:36px; letter-spacing:-1.5px; line-height:1.2; }.section-heading p { max-width:300px; color:var(--muted); font-size:13px; margin:0; }.category-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:16px; }.category-card { position:relative; min-height:175px; padding:25px; border-radius:18px; display:flex; flex-direction:column; transition:.2s; overflow:hidden; }.category-card:hover { transform:translateY(-5px); box-shadow:0 16px 30px rgba(35,55,44,.1); }.category-card.mint { background:var(--mint); }.category-card.violet { background:var(--violet); }.category-card.orange { background:var(--orange); }.category-card.sky { background:var(--sky); }.category-card.rose { background:var(--rose); }.category-card.green { background:#d7e9c8; }.category-icon { font-size:28px; }.category-name { margin-top:14px; font-weight:800; font-size:19px; }.category-intro { max-width:240px; color:#5e6d64; font-size:12px; line-height:1.6; }.category-arrow { position:absolute; right:20px; bottom:20px; font-size:23px; }
.section-soft { background:#f0f6f1; }.split-feature { display:grid; grid-template-columns:1.2fr .8fr; align-items:center; gap:80px; min-height:330px; }.feature-copy p { max-width:620px; color:var(--muted); }.feature-stat { justify-self:end; width:260px; height:260px; border-radius:50%; background:#fff; display:grid; place-content:center; text-align:center; box-shadow:0 0 0 16px #e4f0e6; }.big-number { font-size:90px; line-height:.9; font-weight:800; color:var(--green); }.stat-line { display:block; height:1px; width:70px; margin:14px auto; background:var(--line); }.feature-stat p { margin:0; font-size:12px; color:var(--muted); }
.story-grid { display:grid; grid-template-columns:repeat(4,1fr); gap:18px; }.story-card { background:#fff; border:1px solid var(--line); border-radius:16px; overflow:hidden; transition:.2s; }.story-card:hover { transform:translateY(-4px); box-shadow:0 14px 30px rgba(35,55,44,.08); }.story-image { display:block; height:205px; position:relative; overflow:hidden; }.story-image img { transition:.3s; }.story-card:hover .story-image img { transform:scale(1.04); }.play-badge { position:absolute; right:12px; bottom:12px; display:grid; place-items:center; width:32px; height:32px; border-radius:50%; background:#fff; color:var(--dark); font-size:11px; }.story-content { padding:16px; }.story-tag { color:#72917b; font-size:10px; letter-spacing:1px; font-weight:800; }.story-content h3 { margin:6px 0; font-size:17px; line-height:1.35; }.story-content p { min-height:45px; margin:0 0 12px; color:var(--muted); font-size:12px; line-height:1.65; }.text-link { font-size:12px; font-weight:800; }.text-link span { color:var(--green); font-size:18px; margin-left:4px; }
.quote-band { margin-top:110px; background:#d8e9da; }.quote-inner { padding:66px 0; text-align:center; }.quote-mark { display:block; color:#7eb18b; font-family:Georgia,serif; font-size:80px; height:45px; line-height:1; }.quote-inner blockquote { max-width:760px; margin:18px auto 10px; font-size:27px; font-weight:700; line-height:1.45; }.quote-inner cite { color:#668272; font-size:12px; }
.section-dark { background:var(--dark); color:#fff; }.dark-panel { display:grid; grid-template-columns:1fr 1fr; gap:80px; align-items:center; padding-block:15px 20px; }.dark-panel .eyebrow { color:#a7cdb0; }.dark-panel p { max-width:530px; color:#b7c8bd; }.week-list { display:grid; gap:10px; }.week-list span { display:flex; align-items:center; gap:16px; padding:13px 0; border-bottom:1px solid rgba(255,255,255,.16); color:#cad8cf; }.week-list b { width:42px; color:#a7cdb0; font-size:11px; letter-spacing:1px; }.week-list i { margin-left:auto; color:#73987d; font-style:normal; }
.about-grid { display:grid; grid-template-columns:.7fr 1.3fr; gap:80px; }.about-lead { font-size:25px; font-weight:700; line-height:1.45; }.about-grid p:not(.about-lead) { color:var(--muted); font-size:14px; }.mini-grid { display:grid; grid-template-columns:repeat(4,1fr); gap:14px; }.mini-card { padding:24px; background:#fff; border:1px solid var(--line); border-radius:16px; }.mini-card span { color:var(--green); font-size:28px; }.mini-card h3 { margin:12px 0 4px; }.mini-card p { margin:0; color:var(--muted); font-size:12px; }
.subscribe { margin-top:110px; padding:45px 55px; background:#f3d9b9; border-radius:26px; display:flex; align-items:center; justify-content:space-between; gap:40px; }.subscribe h2 { margin:8px 0; font-size:32px; }.subscribe p { max-width:650px; color:#786b5c; font-size:13px; }.qr-card { display:grid; justify-items:center; gap:8px; color:#735b43; font-size:11px; }.qr-grid { width:110px; height:110px; padding:10px; background:#fff; display:grid; grid-template-columns:repeat(3,1fr); gap:5px; border-radius:10px; }.qr-grid i { background:#755b40; }.qr-grid i:nth-child(2),.qr-grid i:nth-child(5),.qr-grid i:nth-child(7) { background:#fff; border:2px solid #755b40; }
.site-footer { margin-top:110px; background:#eef4ee; border-top:1px solid var(--line); }.footer-inner { min-height:125px; display:flex; align-items:center; gap:28px; }.footer-inner p { color:var(--muted); font-size:11px; }.footer-inner p:last-child { margin-left:auto; }.footer-brand .brand-mark { width:32px; height:32px; font-size:17px; box-shadow:none; border-radius:10px 10px 10px 3px; }
.page-hero { margin-top:70px; padding:55px 0 65px; display:flex; justify-content:space-between; align-items:end; border-bottom:1px solid var(--line); }.breadcrumbs { display:flex; gap:10px; color:var(--muted); font-size:11px; margin-bottom:30px; }.breadcrumbs a { color:var(--ink); font-weight:700; }.page-hero h1 { margin:12px 0; font-size:64px; letter-spacing:-3px; }.page-hero p { max-width:620px; color:var(--muted); }.page-hero-icon { display:grid; place-items:center; width:125px; height:125px; border-radius:50%; background:var(--mint); font-size:54px; color:#4e8060; }.channel-note { padding-block:20px 10px; }.channel-note p { max-width:620px; color:var(--muted); }
.article-page { padding-top:52px; }.article-head { max-width:800px; margin:0 auto; text-align:center; }.article-head .breadcrumbs { justify-content:center; }.article-head h1 { font-size:54px; line-height:1.2; letter-spacing:-2px; margin:18px 0; }.article-meta { display:flex; justify-content:center; gap:22px; color:var(--muted); font-size:11px; }.article-layout { display:grid; grid-template-columns:minmax(0,1fr) 270px; gap:75px; max-width:1040px; margin:65px auto 0; }.article-main { max-width:720px; }.reading-note { display:flex; gap:15px; align-items:center; padding:16px 18px; background:#eef5ee; border-left:3px solid var(--green); font-size:12px; }.reading-note span { color:var(--muted); }.article-main p { color:#59665e; font-size:15px; }.article-main .article-lead { color:var(--ink); font-size:20px; font-weight:700; line-height:1.6; }.article-main h2 { margin-top:45px; font-size:28px; }.article-gallery { display:grid; grid-template-columns:repeat(2,1fr); gap:14px; margin:30px 0; }.article-gallery figure { margin:0; }.article-gallery figure:first-child { grid-column:span 2; height:300px; }.article-gallery figure:not(:first-child) { height:170px; }.article-gallery img { border-radius:13px; }.article-gallery figcaption { margin-top:5px; color:var(--muted); font-size:10px; }.ending-note { margin:42px 0; padding:22px; text-align:center; background:#f3d9b9; border-radius:13px; font-weight:700; }.article-nav { display:flex; justify-content:space-between; gap:20px; padding-top:25px; border-top:1px solid var(--line); font-size:12px; font-weight:700; }.aside-card { position:sticky; top:120px; padding:24px; background:#e2f0e4; border-radius:16px; }.aside-card h3 { font-size:25px; line-height:1.3; }.aside-card p { color:var(--muted); font-size:12px; }.aside-light { position:static; margin-top:18px; display:flex; flex-direction:column; gap:5px; background:#f2eee5; color:#7a6d59; font-size:12px; }.aside-icon { font-size:34px; color:#c18c54; }
.about-long { display:grid; grid-template-columns:.8fr 1.2fr; gap:90px; }.about-long p { color:var(--muted); }.values { display:grid; grid-template-columns:1fr 1fr; gap:80px; }.value-list { display:grid; gap:15px; }.value-list span { padding:14px 0; border-bottom:1px solid rgba(255,255,255,.17); color:#ccd8cf; }.value-list b { display:inline-block; width:45px; color:#a7cdb0; }
@media (max-width:900px) { .main-nav { gap:2px; }.nav-link { padding:8px 7px; font-size:12px; }.hero { gap:38px; }.story-grid { grid-template-columns:repeat(2,1fr); }.category-grid { grid-template-columns:repeat(2,1fr); }.mini-grid { grid-template-columns:repeat(2,1fr); } }
@media (max-width:680px) { .container { width:min(100% - 30px,1200px); }.site-header { padding:14px 0; }.menu-toggle { display:block; }.main-nav { display:none; position:absolute; top:70px; left:15px; right:15px; padding:12px; background:#fff; border:1px solid var(--line); border-radius:16px; box-shadow:0 15px 30px rgba(0,0,0,.08); }.main-nav.is-open { display:grid; grid-template-columns:repeat(2,1fr); }.nav-link { padding:10px; }.hero { grid-template-columns:1fr; margin-top:38px; min-height:auto; }.hero h1 { font-size:72px; }.hero-art { height:380px; }.hero-meta { gap:17px; }.ticker-inner { flex-wrap:wrap; padding:13px 0; gap:8px; }.ticker-inner a { width:100%; margin-left:0; }.section { padding-top:72px; }.section-heading { display:block; }.section-heading p { margin-top:14px; }.section-heading .text-link { display:inline-block; margin-top:15px; }.category-grid,.story-grid { grid-template-columns:1fr; }.story-image { height:225px; }.split-feature,.dark-panel,.about-grid,.about-long,.values { grid-template-columns:1fr; gap:35px; }.feature-stat { justify-self:start; width:190px; height:190px; }.big-number { font-size:65px; }.quote-band { margin-top:72px; }.quote-inner blockquote { font-size:22px; }.subscribe { margin-top:72px; padding:30px; display:block; }.qr-card { margin-top:25px; justify-items:start; }.footer-inner { padding:25px 0; display:block; }.footer-inner p:last-child { margin-left:0; }.page-hero { margin-top:30px; padding:35px 0 45px; display:block; }.page-hero h1 { font-size:46px; }.page-hero-icon { margin-top:25px; width:90px; height:90px; font-size:38px; }.article-head h1 { font-size:39px; }.article-meta { flex-wrap:wrap; gap:8px 15px; }.article-layout { grid-template-columns:1fr; gap:35px; margin-top:38px; }.aside-card { position:static; }.article-gallery figure:first-child { height:220px; }.article-gallery figure:not(:first-child) { height:120px; }.article-main p { font-size:14px; } }