/* cg51吃瓜网黑料 · responsive editorial theme */
:root { --ink:#101a36; --muted:#6f7892; --orange:#ff7047; --yellow:#ffc857; --cream:#f7f4ed; --line:#e6e1d8; --white:#fff; --shadow:0 18px 50px rgba(16,26,54,.08); }
* { box-sizing:border-box; }
html { scroll-behavior:smooth; }
body { margin:0; color:var(--ink); background:var(--cream); font-family:Arial,"PingFang SC","Microsoft YaHei",sans-serif; line-height:1.7; }
a { color:inherit; text-decoration:none; }
button { font:inherit; cursor:pointer; }
svg { width:18px; height:18px; fill:none; stroke:currentColor; stroke-width:1.8; stroke-linecap:round; stroke-linejoin:round; }
.site-header { padding:18px 5vw 0; background:var(--cream); }
.site-nav { max-width:1380px; margin:auto; min-height:66px; display:flex; align-items:center; gap:28px; }
.brand { display:flex; align-items:center; gap:10px; font-weight:800; letter-spacing:-.04em; font-size:20px; white-space:nowrap; }
.brand-mark { width:37px; height:37px; border-radius:12px 12px 12px 4px; display:grid; place-items:center; background:var(--orange); color:var(--white); font-size:20px; transform:rotate(-5deg); }
.nav-links { display:flex; align-items:center; justify-content:flex-end; gap:20px; flex:1; }
.nav-links a { display:flex; align-items:center; gap:6px; color:#626b82; font-size:13px; white-space:nowrap; transition:.2s; }
.nav-links a:hover { color:var(--orange); transform:translateY(-2px); }
.nav-links svg { width:15px; height:15px; }
.menu-toggle { display:none; border:0; background:transparent; color:var(--ink); font-size:24px; }
.home-hero { max-width:1380px; margin:24px auto 0; padding:0 5vw; }
.hero-slides { position:relative; min-height:440px; border-radius:28px; overflow:hidden; background:var(--ink); }
.hero-slide { position:absolute; inset:0; display:grid; grid-template-columns:1.05fr .95fr; gap:30px; padding:56px 7%; opacity:0; transform:translateX(18px); transition:opacity .45s,transform .45s; pointer-events:none; }
.hero-slide.is-active { opacity:1; transform:none; pointer-events:auto; }
.hero-slide-copy { color:var(--white); align-self:center; max-width:600px; }
.hero-slide h1 { margin:0 0 18px; font-size:16px; letter-spacing:.02em; }
.hero-slide h1 a { color:var(--yellow); }
.section-kicker { color:var(--orange); text-transform:uppercase; letter-spacing:.18em; font-size:11px; font-weight:800; }
.hero-slide h2 { max-width:620px; margin:14px 0 18px; font-size:clamp(32px,4vw,58px); line-height:1.14; letter-spacing:-.06em; }
.hero-slide p { color:#b8c0d3; max-width:520px; font-size:15px; }
.button { display:inline-flex; align-items:center; gap:18px; border:0; border-radius:999px; padding:12px 18px; font-weight:800; margin-top:18px; }
.button-light { color:var(--ink); background:var(--white); }
.button-orange { color:var(--white); background:var(--orange); }
.hero-art { position:relative; align-self:stretch; overflow:hidden; border-radius:22px; background:#27335a; }
.hero-image { width:100%; height:100%; object-fit:cover; aspect-ratio:4/3; opacity:.78; mix-blend-mode:screen; }
.art-label { position:absolute; right:20px; bottom:16px; color:var(--yellow); font-weight:900; font-size:24px; letter-spacing:.1em; }
.hero-controls { display:flex; align-items:center; justify-content:center; gap:24px; padding:18px; }
.hero-controls button { border:0; background:transparent; color:var(--ink); }
.hero-dots { display:flex; gap:8px; }
.hero-dots button { width:26px; height:4px; padding:0; background:#c8c4ba; border-radius:5px; }
.hero-dots button.is-active { background:var(--orange); }
.quick-strip { max-width:1240px; margin:0 auto; padding:14px 5vw; display:flex; align-items:center; gap:26px; font-size:13px; }
.quick-label { display:flex; align-items:center; gap:7px; color:var(--orange); font-weight:800; white-space:nowrap; }
.quick-flow { display:flex; gap:16px; align-items:center; color:var(--muted); flex:1; overflow:hidden; white-space:nowrap; }
.quick-flow i { width:4px; height:4px; background:var(--orange); border-radius:50%; }
.quick-strip > a,.heading-link,.text-link { color:var(--orange); font-weight:800; white-space:nowrap; font-size:13px; }
.stats-row { max-width:1240px; margin:30px auto 64px; padding:0 5vw; display:grid; grid-template-columns:repeat(4,1fr); gap:1px; background:var(--line); }
.stats-row div { background:var(--cream); padding:20px 24px; display:flex; flex-direction:column; }
.stats-row strong { font-size:28px; letter-spacing:-.06em; }.stats-row strong span { color:var(--orange); }.stats-row small { color:var(--muted); font-size:12px; }
.section-block,.split-feature,.editorial-row,.about-block,.subscribe-card { max-width:1240px; margin:0 auto 84px; padding:0 5vw; }
.section-heading { display:flex; align-items:end; justify-content:space-between; margin-bottom:24px; }.section-heading h2,.feature-copy h2,.editorial-row h2,.about-block h2,.subscribe-card h2 { margin:5px 0 0; font-size:30px; letter-spacing:-.06em; line-height:1.2; }.section-count { color:var(--muted); font-size:12px; }
.story-grid { display:grid; grid-template-columns:repeat(4,1fr); gap:18px; }
.story-card { background:var(--white); border-radius:18px; overflow:hidden; box-shadow:0 4px 20px rgba(16,26,54,.03); display:flex; flex-direction:column; min-width:0; }
.card-cover { position:relative; display:block; }.story-image { display:block; width:100%; aspect-ratio:1.48/1; object-fit:cover; background:#dfe3ee; }.card-tag { position:absolute; left:12px; top:12px; padding:3px 8px; border-radius:5px; color:var(--white); background:var(--orange); font-size:10px; font-weight:800; }
.card-body { padding:16px 16px 18px; display:flex; flex-direction:column; flex:1; }.eyebrow { margin:0; color:var(--orange); font-size:10px; font-weight:800; }.card-body h3 { margin:8px 0; font-size:17px; line-height:1.35; letter-spacing:-.03em; }.card-body > p:not(.eyebrow) { margin:0 0 15px; color:var(--muted); font-size:12px; line-height:1.7; }.read-more { margin-top:auto; display:flex; align-items:center; gap:5px; font-size:11px; color:var(--ink); font-weight:800; }.read-more svg { width:14px; }
.split-feature { display:grid; grid-template-columns:1.2fr .8fr; align-items:center; gap:7%; }.feature-visual { position:relative; border-radius:22px; overflow:hidden; }.wide-image { display:block; width:100%; aspect-ratio:1.75/1; object-fit:cover; }.feature-visual span { position:absolute; bottom:15px; left:18px; color:var(--white); font-size:12px; font-weight:800; }.feature-copy p { color:var(--muted); font-size:15px; max-width:380px; }.feature-copy .text-link { display:inline-flex; gap:7px; align-items:center; }
.topic-grid { display:grid; grid-template-columns:repeat(4,1fr); gap:12px; }.topic-chip { padding:19px; min-height:100px; background:var(--white); border:1px solid transparent; border-radius:15px; display:grid; grid-template-columns:auto 1fr; column-gap:10px; align-items:center; transition:.2s; }.topic-chip:hover { border-color:var(--orange); transform:translateY(-3px); }.topic-chip svg { color:var(--orange); }.topic-chip span { font-weight:800; }.topic-chip small { grid-column:2; color:var(--muted); font-size:11px; }
.editorial-row { display:grid; grid-template-columns:.8fr 1.2fr; gap:9%; align-items:center; padding-top:25px; border-top:1px solid var(--line); }.editorial-row p { color:var(--muted); font-size:13px; }.rank-list { list-style:none; padding:0; margin:0; }.rank-list li { display:grid; grid-template-columns:36px 1fr 60px; gap:14px; align-items:center; padding:15px 0; border-bottom:1px solid var(--line); font-size:13px; }.rank-list b { color:var(--orange); }.rank-list em { color:var(--orange); font-size:11px; text-align:right; font-style:normal; }
.about-block { padding:38px 5%; background:#ebe7dc; border-radius:23px; display:grid; grid-template-columns:.55fr 1.45fr; gap:8%; align-items:start; }.about-block p { margin:0; color:#596176; font-size:14px; }
.subscribe-card { padding:28px 5%; background:var(--ink); border-radius:23px; color:var(--white); display:flex; align-items:center; gap:26px; }.subscribe-card p { color:#b8c0d3; font-size:13px; max-width:650px; }.qr-box { width:100px; height:100px; flex:0 0 100px; display:grid; place-items:center; position:relative; background:var(--white); color:var(--ink); border-radius:12px; overflow:hidden; }.qr-box span { font-size:30px; font-weight:900; color:var(--orange); }.qr-box i { position:absolute; width:18px; height:18px; border:3px solid var(--ink); }.qr-box i:nth-of-type(1) { left:8px; top:8px; }.qr-box i:nth-of-type(2) { right:8px; top:8px; }.qr-box i:nth-of-type(3) { left:8px; bottom:8px; }.qr-box small { position:absolute; bottom:5px; font-size:7px; font-weight:800; }
.site-footer { background:var(--ink); color:#98a1ba; padding:30px 5%; }.footer-inner { max-width:1240px; margin:auto; display:flex; align-items:center; justify-content:space-between; gap:20px; font-size:11px; }.footer-inner strong { color:var(--white); display:block; }.footer-inner span { display:block; }.footer-inner p { margin:0; }
.breadcrumbs { max-width:1240px; margin:0 auto 32px; padding:0 5vw; display:flex; gap:9px; color:var(--muted); font-size:12px; }.breadcrumbs a { color:var(--orange); }.page-hero { max-width:1240px; margin:24px auto 50px; padding:0 5vw; }.compact-hero { display:grid; grid-template-columns:1fr auto; align-items:end; gap:20px; }.compact-hero .breadcrumbs { grid-column:1/-1; padding:0; margin-bottom:0; }.hero-copy h1 { margin:8px 0; font-size:clamp(38px,6vw,76px); letter-spacing:-.08em; line-height:1; }.hero-copy p { color:var(--muted); max-width:600px; }.hero-orbit { width:140px; height:140px; border:1px solid #d8d2c6; border-radius:50%; display:flex; flex-direction:column; align-items:center; justify-content:center; }.hero-orbit span { color:var(--orange); font-size:11px; font-weight:900; }.hero-orbit strong { font-size:40px; line-height:1; }.hero-orbit small { color:var(--muted); font-size:10px; }.category-list { padding-top:20px; }
.article-wrap { max-width:960px; margin:24px auto 80px; }.article-content { background:var(--white); border-radius:23px; padding:54px 8%; box-shadow:var(--shadow); }.article-heading h1 { margin:12px 0 18px; font-size:clamp(30px,5vw,54px); line-height:1.18; letter-spacing:-.07em; }.article-meta { display:flex; gap:18px; color:var(--muted); font-size:12px; flex-wrap:wrap; }.reading-note { margin:28px 0; padding:14px 16px; display:flex; gap:13px; background:#fff4ed; border-left:3px solid var(--orange); color:#6e6870; font-size:12px; }.reading-note strong { color:var(--orange); white-space:nowrap; }.article-lead { color:#48516a; font-size:18px; line-height:1.8; margin:32px 0; }.article-content p { color:#5d6578; font-size:15px; }.article-content h2 { margin:36px 0 12px; font-size:24px; letter-spacing:-.04em; }.article-content figure { margin:28px 0; }.article-content figure img { width:100%; display:block; aspect-ratio:2/1; object-fit:cover; border-radius:14px; }.chapter-end { margin-top:35px; padding:16px; text-align:center; color:var(--orange); background:#fff5ed; border-radius:9px; font-size:13px; font-weight:800; }.article-pager { display:flex; justify-content:space-between; align-items:center; margin-top:28px; color:var(--orange); font-size:13px; font-weight:800; }.back-button { background:var(--ink); color:var(--white); padding:9px 15px; border-radius:999px; }
@media (max-width:1000px) { .nav-links { gap:10px; }.nav-links a span { display:none; }.story-grid { grid-template-columns:repeat(2,1fr); }.topic-grid { grid-template-columns:repeat(2,1fr); }.footer-inner { flex-wrap:wrap; } }
@media (max-width:700px) { .site-header { padding:12px 18px 0; }.site-nav { min-height:54px; justify-content:space-between; }.brand { font-size:17px; }.menu-toggle { display:block; }.nav-links { display:none; position:absolute; z-index:10; left:18px; right:18px; top:66px; padding:14px; background:var(--white); border-radius:15px; box-shadow:var(--shadow); flex-direction:column; align-items:stretch; gap:0; }.site-nav.is-open .nav-links { display:flex; }.nav-links a { padding:9px 5px; }.nav-links a span { display:inline; }.hero-slides { min-height:600px; border-radius:20px; }.hero-slide { display:flex; flex-direction:column; padding:34px 22px; gap:20px; }.hero-slide h2 { font-size:34px; }.hero-art { min-height:210px; }.quick-strip { flex-wrap:wrap; gap:7px 16px; padding:16px 18px; }.quick-flow { order:3; flex-basis:100%; }.stats-row { margin:22px 0 54px; padding:0; grid-template-columns:repeat(2,1fr); }.section-block,.split-feature,.editorial-row,.about-block,.subscribe-card { padding-left:18px; padding-right:18px; margin-bottom:58px; }.section-heading { align-items:start; gap:12px; flex-direction:column; }.story-grid { grid-template-columns:1fr; gap:14px; }.story-card { display:grid; grid-template-columns:42% 58%; }.card-body { padding:12px; }.card-cover .story-image { aspect-ratio:1/1; height:100%; }.card-body h3 { font-size:15px; }.split-feature,.editorial-row,.about-block { grid-template-columns:1fr; gap:24px; }.topic-grid { grid-template-columns:1fr 1fr; }.topic-chip { min-height:90px; padding:13px; }.subscribe-card { align-items:flex-start; flex-direction:column; }.footer-inner { align-items:flex-start; flex-direction:column; gap:8px; }.page-hero { margin-top:18px; padding:0 18px; }.compact-hero { grid-template-columns:1fr; }.hero-orbit { width:100px; height:100px; }.hero-orbit strong { font-size:28px; }.breadcrumbs { padding:0 18px; margin-bottom:20px; }.article-wrap { margin:18px 0 55px; }.article-content { border-radius:0; padding:32px 18px; }.article-content h1 { font-size:32px; }.article-lead { font-size:16px; }.article-pager { gap:8px; }.article-pager a { font-size:11px; } }