/* 51吃瓜 · 青绿轻娱乐资讯索引
   Accessible, compact, readable, deliberately editorial rather than a generic landing page.
   Main navigation and story links remain functional without scripts.
*/
:root {
  --brand: #168c78;
  --brand-strong: #116b5d;
  --brand-soft: #bfe8d8;
  --ink: #203b39;
  --body: #253330;
  --muted: #637570;
  --orange: #b95020;
  --surface: #fafbf7;
  --surface-alt: #edf5ef;
  --white: #fff;
  --line: #dbe7df;
  --line-strong: #c9dcd0;
  --radius: 9px;
  --radius-sm: 5px;
  --page: 1192px;
  --ease: cubic-bezier(.2,.7,.25,1);
}
*,*::before,*::after{box-sizing:border-box}
html{scroll-behavior:smooth;scroll-padding-top:92px}
body{margin:0;background:var(--surface);color:var(--body);font-family:system-ui,-apple-system,"PingFang SC","Microsoft YaHei","Noto Sans CJK SC",sans-serif;font-size:15px;line-height:1.65;-webkit-font-smoothing:antialiased}
::selection{background:var(--brand-soft);color:var(--ink)}
a{color:inherit;text-decoration:none}
a:focus-visible,button:focus-visible{outline:3px solid var(--orange);outline-offset:4px;border-radius:3px}
a:hover{color:var(--brand-strong)}
button{font:inherit}
img{display:block;max-width:100%;height:auto}
p,h1,h2,h3,figure{margin:0}
p{overflow-wrap:anywhere}
.container{width:min(calc(100% - 56px),var(--page));margin-inline:auto}
.skip-link{position:fixed;z-index:99;top:-90px;left:16px;background:var(--ink);color:#fff;padding:10px 15px;border-radius:6px}
.skip-link:focus{top:10px}
.site-header{position:relative;z-index:20;background:rgba(250,251,247,.98);border-bottom:1px solid var(--line);box-shadow:0 3px 10px rgb(25 70 55 / 2%)}
.header-inner{max-width:calc(var(--page) + 56px);padding:0 28px;margin:auto;min-height:82px;display:flex;align-items:center;justify-content:space-between;gap:30px}
.brand{display:flex;align-items:center;gap:11px;min-width:210px;color:var(--ink)}
.brand img{width:43px;height:43px;object-fit:contain;border-radius:8px}
.brand span{display:flex;flex-direction:column;line-height:1.3;gap:3px}
.brand strong{font-size:22px;font-weight:850;letter-spacing:-.035em;color:var(--brand-strong)}
.brand small{font-weight:500;font-size:10.5px;letter-spacing:.09em;color:var(--muted)}
.primary-nav{display:flex;align-items:stretch;gap:30px;align-self:stretch}
.primary-nav a{display:flex;align-items:center;position:relative;white-space:nowrap;font-size:14px;font-weight:650;color:#4b625b;transition:color .17s}
.primary-nav a:hover,.primary-nav a[aria-current="page"]{color:var(--brand-strong)}
.primary-nav a[aria-current="page"]::after{content:"";position:absolute;bottom:0;left:0;right:0;height:3px;border-radius:3px 3px 0 0;background:var(--brand)}
.menu-toggle{display:none;border:1px solid var(--line-strong);background:#fff;border-radius:7px;color:var(--ink);align-items:center;gap:7px;padding:7px 12px;cursor:pointer}
.menu-toggle[hidden]{display:none!important}
.menu-icon{font-size:17px;line-height:1}
.section-kicker{display:inline-flex;align-items:center;gap:8px;color:var(--brand-strong);font-size:12px;font-weight:800;letter-spacing:.10em}
.kicker-dot{width:7px;height:7px;background:var(--orange);border-radius:50%}
.front-intro{display:grid;grid-template-columns:minmax(0,1.65fr) minmax(265px,.72fr);align-items:center;gap:48px;padding:36px 0 33px;border-bottom:1px solid var(--line)}
.intro-copy h1{font-size:clamp(28px,3vw,42px);line-height:1.26;letter-spacing:-.05em;color:var(--ink);margin:11px 0 14px;font-weight:860}
.intro-copy p{color:#51655e;max-width:790px;font-size:15px;line-height:1.93}
.intro-side{background:var(--surface-alt);border-left:3px solid var(--brand);padding:17px 22px;border-radius:2px var(--radius) var(--radius) 2px}
.intro-side>span{color:var(--brand-strong);font-size:12px;font-weight:800;letter-spacing:.06em}
.intro-side strong{display:block;font-size:19px;line-height:1.45;font-weight:800;color:var(--ink);margin:5px 0 6px}
.intro-side p{font-size:13px;line-height:1.82;color:var(--muted)}
.section-head{display:flex;justify-content:space-between;align-items:end;gap:22px;margin-bottom:22px}
.section-head h2{color:var(--ink);font-size:24px;font-weight:820;letter-spacing:-.04em;margin-top:6px;line-height:1.33}
.section-head .text-link{font-size:13px;color:var(--brand-strong);font-weight:700;white-space:nowrap;border-bottom:1px solid transparent;padding-bottom:3px}
.section-head .text-link:hover{border-color:currentColor}
.section-head .text-link span{font-size:17px}
.top-stories{padding:37px 0 42px}
.lead-layout{display:grid;grid-template-columns:minmax(0,1.09fr) minmax(0,.91fr);gap:27px;align-items:stretch}
.story-card{min-width:0;display:grid;grid-template-columns:138px minmax(0,1fr);gap:18px;align-items:center;padding:0 0 15px;border-bottom:1px solid var(--line)}
.story-card:not(:last-child){margin-bottom:16px}
.story-visual{display:block;overflow:hidden;border-radius:var(--radius-sm);background:var(--surface-alt);aspect-ratio:1.5;border:1px solid var(--line)}
.story-visual img{width:100%;height:100%;object-fit:cover;transition:transform .34s var(--ease);font-size:10px;color:var(--muted)}
.story-visual:hover img{transform:scale(1.045)}
.story-copy{min-width:0}
.eyebrow{display:inline-block;color:var(--orange);font-weight:800;font-size:11px;letter-spacing:.07em;margin-bottom:5px}
.story-copy h3{font-size:16px;line-height:1.43;letter-spacing:-.018em;color:var(--ink);font-weight:800;margin-bottom:6px}
.story-copy p{font-size:12.6px;line-height:1.72;color:var(--muted);display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.story-note{display:block;color:#799087;font-size:11px;font-weight:550;margin-top:8px}
.lead-feature{min-width:0}
.story-card--featured{display:block;height:100%;background:#fff;border:1px solid var(--line);border-radius:var(--radius);padding:0;overflow:hidden}
.story-card--featured .story-visual{aspect-ratio:2.11;border:0;border-radius:0}
.story-card--featured .story-copy{padding:19px 24px 23px}
.story-card--featured .story-copy h3{font-size:23px;line-height:1.4;margin:5px 0 9px}
.story-card--featured .story-copy p{font-size:14px;line-height:1.85;-webkit-line-clamp:3}
.story-card--featured .story-note{margin-top:14px}
.lead-stack{display:flex;flex-direction:column;justify-content:space-between;gap:0;min-width:0}
.lead-stack .story-card{flex:1}
.lead-stack .story-card:last-child{margin-bottom:0}
.feed-section{padding:31px 0 40px;border-top:1px solid var(--line)}
.section-aside{font-size:13px;color:var(--muted);max-width:290px;text-align:right}
.feed-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));column-gap:36px;row-gap:22px}
.feed-grid .story-card{grid-template-columns:150px minmax(0,1fr);gap:17px;margin:0}
.feed-grid .story-visual{aspect-ratio:1.43}
.spotlight{margin:12px 0 44px;padding:30px 34px;display:grid;grid-template-columns:minmax(0,1.42fr) minmax(255px,.8fr);gap:42px;background:var(--surface-alt);border:1px solid var(--line-strong);border-top:3px solid var(--brand);border-radius:var(--radius)}
.spotlight h2{font-size:24px;line-height:1.4;color:var(--ink);margin:9px 0 12px;letter-spacing:-.035em}
.spotlight-copy p{font-size:14px;line-height:1.9;color:#52695f}
.inline-action{display:inline-flex;align-items:center;gap:18px;margin-top:17px;color:var(--brand-strong);font-size:13px;font-weight:800;border-bottom:1px solid var(--brand);padding:0 0 5px}
.spotlight-links{border-left:1px solid var(--line-strong);padding-left:30px;display:flex;flex-direction:column;justify-content:center}
.spotlight-links>span{font-size:12px;color:var(--muted);font-weight:800;margin-bottom:10px}
.spotlight-links a{display:flex;justify-content:space-between;align-items:center;gap:12px;padding:12px 0;font-size:13px;color:var(--ink);font-weight:700;border-bottom:1px solid var(--line-strong)}
.spotlight-links a:last-child{border:0}
.spotlight-links a:hover{color:var(--brand)}
.brand-info{border-top:1px solid var(--line);padding:28px 0 51px;display:grid;grid-template-columns:minmax(0,1.5fr) minmax(245px,.65fr);gap:48px;align-items:center}
.brand-info h2{font-size:21px;color:var(--ink);margin:6px 0 11px}
.brand-info p{font-size:13px;color:var(--muted);line-height:1.9;margin-bottom:8px}
.brand-info p strong{color:var(--ink);font-weight:700}
.domain-chip{background:#fff;border:1px solid var(--line);padding:20px;border-radius:var(--radius)}
.domain-chip span{display:block;color:var(--muted);font-size:12px;margin-bottom:8px}
.domain-chip a{font-weight:800;letter-spacing:-.01em;color:var(--brand-strong);overflow-wrap:anywhere}
.domain-chip a span{display:inline;color:var(--brand-strong);font-size:17px}
.site-footer{background:var(--ink);color:#dcebe4}
.footer-inner{max-width:calc(var(--page) + 56px);padding:29px 28px 27px;margin:auto;display:flex;justify-content:space-between;gap:30px}
.footer-inner>div{max-width:480px}
.footer-brand{font-size:22px;color:#fff;font-weight:850}
.footer-inner p{font-size:12px;color:#b7d0c5;line-height:1.9;margin-top:8px}
.footer-inner nav{display:flex;gap:25px;align-items:center}
.footer-inner nav a{font-size:13px;color:#dcebe4;font-weight:600}
.footer-inner a:hover{color:#fff;text-decoration:underline;text-underline-offset:4px}
.footer-bottom{max-width:var(--page);margin:auto;padding:14px 0 18px;border-top:1px solid #3a5650;color:#aac2b8;font-size:11px;display:flex;justify-content:space-between;gap:20px}
.breadcrumbs{padding:20px 0 0;color:var(--muted);font-size:12px}
.breadcrumbs ol{list-style:none;display:flex;align-items:center;flex-wrap:wrap;gap:8px;padding:0;margin:0}
.breadcrumbs li:not(:last-child)::after{content:'›';margin-left:8px;color:#a0b3a8}
.breadcrumbs li:last-child{color:var(--brand-strong)}
.subpage{padding-bottom:55px}
.page-lead{padding:29px 0 28px;max-width:870px}
.page-lead h1{font-size:clamp(27px,3vw,38px);font-weight:850;letter-spacing:-.045em;color:var(--ink);line-height:1.3;margin:9px 0 13px}
.page-lead p{font-size:15px;color:var(--muted);line-height:1.95;max-width:770px}
.report-layout{display:grid;grid-template-columns:minmax(0,1fr) 270px;gap:55px;align-items:start}
.report-main{min-width:0}
.report-main section{padding:20px 0 29px;border-top:1px solid var(--line)}
.report-main section + section{margin-top:20px}
.report-main h2{font-size:22px;letter-spacing:-.025em;color:var(--ink);margin-bottom:5px}
.section-description{font-size:13px;color:var(--muted);margin-bottom:18px;line-height:1.85}
.report-cards{display:grid;grid-template-columns:1fr 1fr;gap:23px}
.report-cards .story-card{display:block;background:#fff;border:1px solid var(--line);border-radius:var(--radius);overflow:hidden;padding:0;margin:0}
.report-cards .story-visual{aspect-ratio:1.74;border:0;border-radius:0}
.report-cards .story-copy{padding:14px 17px 18px}
.report-cards .story-copy h3{font-size:17px}
.report-cards .story-copy p{-webkit-line-clamp:3}
.report-aside{position:sticky;top:28px;background:var(--surface-alt);border-radius:var(--radius);padding:22px 22px 25px;border:1px solid var(--line)}
.report-aside h2{font-size:17px;color:var(--ink);margin-bottom:14px}
.report-aside ol{list-style:none;counter-reset:fact;margin:0;padding:0}
.report-aside li{counter-increment:fact;position:relative;padding:12px 0 12px 36px;border-bottom:1px solid var(--line-strong)}
.report-aside li::before{content:counter(fact,decimal-leading-zero);position:absolute;left:0;top:14px;font-size:11px;color:var(--orange);font-weight:800}
.report-aside li strong{font-size:13px;color:var(--ink)}
.report-aside li p{font-size:12px;color:var(--muted);line-height:1.8;margin-top:3px}
.back-home{display:inline-block;margin-top:18px;font-size:13px;font-weight:800;color:var(--brand-strong)}
.article-page{padding-bottom:70px}
.article-shell{display:grid;grid-template-columns:minmax(0,1fr) 270px;gap:56px;margin-top:28px;align-items:start}
.full-article{min-width:0}
.article-header{padding-bottom:23px;border-bottom:1px solid var(--line)}
.article-header h1{font-size:clamp(27px,3vw,39px);line-height:1.38;color:var(--ink);font-weight:850;letter-spacing:-.043em;margin:10px 0 12px}
.article-deck{font-size:15px;color:#586e65;line-height:1.95}
.article-meta{display:flex;align-items:center;gap:17px;color:#789084;font-size:11px;font-weight:600;margin-top:15px}
.article-meta span + span{border-left:1px solid var(--line-strong);padding-left:16px}
.article-cover{margin-top:23px;background:var(--surface-alt);border:1px solid var(--line);border-radius:var(--radius);overflow:hidden}
.article-cover img{width:100%;aspect-ratio:1.9;object-fit:cover;color:var(--muted);font-size:11px}
.article-cover figcaption{text-align:right;padding:6px 11px;font-size:11px;color:#72867c}
.article-body{padding:8px 0 25px}
.article-body section{padding-top:23px}
.article-body h2{font-size:21px;line-height:1.48;color:var(--ink);margin:0 0 9px;letter-spacing:-.025em}
.article-body h2::before{content:"";display:inline-block;width:4px;height:18px;background:var(--brand);border-radius:3px;margin-right:10px;vertical-align:-3px}
.article-body p{font-size:15px;line-height:2.08;color:#3d5149;letter-spacing:.008em}
.article-end{padding:24px 25px;background:var(--surface-alt);border-top:2px solid var(--brand);border-radius:var(--radius)}
.article-end strong{font-size:16px;color:var(--ink)}
.article-end p{font-size:13px;color:var(--muted);line-height:1.8;margin:6px 0 12px}
.article-end a{font-size:13px;color:var(--brand-strong);font-weight:800}
.article-sidebar{position:sticky;top:26px}
.sidebar-panel{background:#fff;border:1px solid var(--line);border-radius:var(--radius);padding:19px 18px}
.sidebar-panel h2{font-size:17px;color:var(--ink);margin-bottom:9px}
.sidebar-panel a{display:block;padding:15px 0;border-bottom:1px solid var(--line)}
.sidebar-panel a:last-child{border-bottom:0}
.sidebar-panel a span{display:block;color:var(--orange);font-size:11px;font-weight:800;margin-bottom:4px}
.sidebar-panel a strong{display:block;color:var(--ink);font-size:13px;line-height:1.6;font-weight:740}
.sidebar-panel a:hover strong{color:var(--brand)}
.sidebar-directory{display:flex;align-items:center;justify-content:space-between;background:var(--brand);border-radius:var(--radius);color:#fff;font-weight:800;font-size:13px;margin-top:13px;padding:13px 15px}
.sidebar-directory:hover{background:var(--brand-strong);color:#fff}
.not-found{min-height:45vh;padding:85px 0}
.not-found h1{font-size:32px;color:var(--ink);line-height:1.3;margin-bottom:13px}
.not-found p{color:var(--muted);margin:0 0 17px}
.not-found a{color:var(--brand-strong);font-weight:800}
/* Vertical rhythm is intentionally shared across the editorial reading path,
   while modules retain independent display patterns where information differs. */
@media (min-width:1300px){
  .front-intro{padding-top:41px;padding-bottom:37px}
  .top-stories{padding-top:41px}
  .feed-section{padding-top:36px}
  .lead-feature .story-card--featured .story-copy{padding:23px 25px 25px}
}
@media (max-width:1040px){
  .container{width:min(calc(100% - 46px),var(--page))}
  .header-inner{padding:0 23px}
  .front-intro{gap:30px;grid-template-columns:minmax(0,1.45fr) minmax(240px,.8fr)}
  .lead-layout{gap:20px}
  .lead-stack .story-card{grid-template-columns:112px minmax(0,1fr);gap:13px}
  .lead-stack .story-copy h3{font-size:14px}
  .lead-stack .story-copy p{font-size:12px}
  .feed-grid{gap:20px}
  .feed-grid .story-card{grid-template-columns:128px minmax(0,1fr);gap:13px}
  .report-layout,.article-shell{gap:30px;grid-template-columns:minmax(0,1fr) 250px}
  .footer-bottom{margin:0 23px}
}
@media (max-width:790px){
  .header-inner{min-height:73px}
  .primary-nav{gap:15px}
  .primary-nav a{font-size:12px}
  .brand{min-width:unset}
  .brand strong{font-size:20px}
  .front-intro{grid-template-columns:1fr;gap:20px;padding:30px 0 29px}
  .intro-copy h1{font-size:33px}
  .intro-side{max-width:660px}
  .lead-layout{grid-template-columns:1fr;gap:20px}
  .story-card--featured{display:grid;grid-template-columns:48% 1fr;min-height:240px}
  .story-card--featured .story-visual{aspect-ratio:auto;height:100%}
  .story-card--featured .story-copy{padding:20px;align-self:center}
  .story-card--featured .story-copy h3{font-size:21px}
  .lead-stack{display:grid;grid-template-columns:repeat(3,1fr);gap:15px}
  .lead-stack .story-card{display:block;padding:0 0 14px;margin:0}
  .lead-stack .story-visual{aspect-ratio:1.67;margin-bottom:10px}
  .feed-grid .story-card{grid-template-columns:1fr;gap:10px}
  .feed-grid .story-visual{aspect-ratio:1.78}
  .feed-grid .story-copy h3{font-size:15px}
  .spotlight{grid-template-columns:1fr;gap:23px}
  .spotlight-links{border-left:0;border-top:1px solid var(--line-strong);padding:15px 0 0}
  .brand-info{gap:25px;grid-template-columns:1fr}
  .domain-chip{max-width:365px}
  .report-layout,.article-shell{grid-template-columns:1fr;gap:25px}
  .report-aside,.article-sidebar{position:static}
  .article-sidebar{display:grid;grid-template-columns:1fr;gap:0}
}
@media (max-width:610px){
  html{scroll-padding-top:70px}
  .container{width:calc(100% - 32px)}
  .header-inner{padding:0 16px;min-height:68px;gap:10px;flex-wrap:wrap;position:relative}
  .brand img{width:38px;height:38px}
  .brand strong{font-size:20px}
  .brand small{font-size:9px}
  .menu-toggle:not([hidden]){display:flex}
  .primary-nav{flex-basis:100%;display:flex;gap:0;overflow-x:auto;align-self:auto;width:100%;padding:0 0 9px;scrollbar-width:thin}
  .primary-nav a{font-size:12px;justify-content:center;padding:8px 11px;white-space:nowrap}
  .primary-nav a[aria-current="page"]::after{bottom:1px;height:2px}
  .primary-nav.is-open{flex-direction:column;align-items:stretch;overflow:visible;padding:2px 0 13px}
  .primary-nav.is-open a{justify-content:flex-start;padding:11px;border-bottom:1px solid var(--line)}
  .front-intro{padding:25px 0}
  .intro-copy h1{font-size:29px;letter-spacing:-.035em;line-height:1.35}
  .intro-copy p{font-size:14px;line-height:1.85}
  .intro-side{padding:14px 17px}
  .intro-side strong{font-size:17px}
  .section-head{align-items:start;gap:10px;margin-bottom:16px}
  .section-head h2{font-size:21px}
  .section-head .text-link{white-space:normal;max-width:115px;text-align:right;font-size:11px;line-height:1.6}
  .top-stories{padding:27px 0 30px}
  .story-card--featured{display:block}
  .story-card--featured .story-visual{aspect-ratio:1.95;height:auto}
  .story-card--featured .story-copy{padding:16px 18px 19px}
  .story-card--featured .story-copy h3{font-size:19px}
  .story-card--featured .story-copy p{font-size:13px}
  .lead-stack{display:block}
  .lead-stack .story-card{display:grid;grid-template-columns:115px minmax(0,1fr);gap:13px;margin:0;padding:13px 0}
  .lead-stack .story-visual{aspect-ratio:1.35;margin:0}
  .lead-stack .story-copy h3{font-size:14px}
  .lead-stack .story-copy p{font-size:12px}
  .lead-stack .story-card:last-child{border-bottom:0}
  .feed-section{padding-top:27px;padding-bottom:25px}
  .section-aside{display:none}
  .feed-grid{grid-template-columns:1fr;row-gap:0}
  .feed-grid .story-card{display:grid;grid-template-columns:118px minmax(0,1fr);gap:13px;padding:14px 0}
  .feed-grid .story-visual{aspect-ratio:1.3}
  .feed-grid .story-copy h3{font-size:14px;margin-bottom:3px}
  .feed-grid .story-copy p{font-size:12px}
  .spotlight{margin:12px 0 30px;padding:22px 19px;gap:15px}
  .spotlight h2{font-size:21px}
  .spotlight p{font-size:13px}
  .brand-info{padding:23px 0 36px}
  .footer-inner{padding:28px 16px 23px;display:block}
  .footer-inner nav{margin-top:20px;gap:21px;flex-wrap:wrap}
  .footer-bottom{margin:0 16px;padding:13px 0 17px;display:block}
  .footer-bottom span{display:block;margin-bottom:4px}
  .subpage{padding-bottom:36px}
  .page-lead{padding:25px 0}
  .page-lead h1{font-size:27px}
  .page-lead p{font-size:14px}
  .report-main section{padding:20px 0}
  .report-main h2{font-size:20px}
  .report-cards{grid-template-columns:1fr;gap:17px}
  .report-cards .story-card{display:grid;grid-template-columns:37% 1fr}
  .report-cards .story-visual{height:100%;aspect-ratio:auto}
  .report-cards .story-copy{padding:13px}
  .report-cards .story-copy h3{font-size:14px}
  .report-cards .story-copy p{font-size:12px;-webkit-line-clamp:3}
  .report-aside{padding:21px}
  .article-page{padding-bottom:42px}
  .article-shell{margin-top:20px}
  .article-header h1{font-size:27px}
  .article-deck{font-size:14px}
  .article-cover img{aspect-ratio:1.6}
  .article-body section{padding-top:20px}
  .article-body h2{font-size:19px}
  .article-body p{font-size:14px;line-height:2}
  .article-end{padding:20px}
}
@media (max-width:390px){
  .container{width:calc(100% - 26px)}
  .header-inner{padding:0 13px}
  .brand{gap:7px}
  .brand strong{font-size:18px}
  .brand small{letter-spacing:0}
  .intro-copy h1{font-size:26px}
  .lead-stack .story-card,.feed-grid .story-card{grid-template-columns:100px minmax(0,1fr);gap:10px}
  .lead-stack .story-copy p,.feed-grid .story-copy p{-webkit-line-clamp:2}
  .report-cards .story-card{display:block}
  .report-cards .story-visual{aspect-ratio:1.85}
  .section-head h2{font-size:19px}
}
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *,*::before,*::after{animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important}
}
@media print{
  :root{--surface:#fff}
  body{color:#000;font-size:12pt;line-height:1.6}
  .site-header,.site-footer,.menu-toggle,.article-sidebar,.report-aside,.spotlight-links{display:none!important}
  .container{width:100%;max-width:none}
  .article-shell,.report-layout,.front-intro,.lead-layout,.brand-info{display:block}
  .article-cover img{max-height:300px;object-fit:contain}
  a[href]::after{content:none}
  .article-body p{color:#222}
  .story-card{break-inside:avoid}
}