@charset "utf-8";
/* 51黑料网 - 样式
 * 炭黑中性底（H240 极低饱和）+ 品红紫强调 H292，与前七套色相全错开。
 * 布局原型：分栏杂志 / 新闻版面 —— 素材几乎全是横图（3:2 40% / 4:3 31% / 16:9 21%），
 * 竖图不足 3%，所以走大图头条 + 多栏文字流，而不是封面墙或竖卡瀑布流。
 * 容器名取自报刊编辑室术语：masthead/splash/wire/dispatch/heatbar/desk/galley/stringer。
 */

:root{
  --hl-coal:   #131316;
  --hl-slate:  #1C1C21;
  --hl-slate2: #26262D;
  --hl-rule:   #32323A;

  --hl-paper:  #ECECF1;
  --hl-ash:    #9E9EAC;

  --hl-fuchsia:   #D946EF;
  --hl-fuchsia-d: #A21CAF;
  --hl-azure:     #60A5FA;

  --hl-r:    4px;          /* 报纸感：圆角克制 */
  --hl-r-lg: 8px;
  --hl-gap:  clamp(14px, 1.8vw, 22px);
  --hl-pad:  clamp(14px, 2.4vw, 28px);
  --hl-max:  1340px;
  --hl-cast: 0 12px 30px rgba(0,0,0,.5);
}

*,*::before,*::after{ box-sizing:border-box; }
html{ -webkit-text-size-adjust:100%; }

body{
  margin:0;
  background:var(--hl-coal);
  color:var(--hl-paper);
  font-family:"PingFang SC","Hiragino Sans GB","Microsoft YaHei","Source Han Sans SC",sans-serif;
  font-size:clamp(15px,1.05vw,16px);
  line-height:1.65;
}

img{ max-width:100%; height:auto; display:block; }
a{ color:inherit; text-decoration:none; }
ul,ol{ margin:0; padding:0; list-style:none; }
h1,h2,h3{ margin:0; line-height:1.28; text-wrap:balance; }
button,input{ font:inherit; color:inherit; }

:focus-visible{
  outline:3px solid var(--hl-fuchsia);
  outline-offset:2px;
}

.hl-offscreen{
  position:absolute; width:1px; height:1px; overflow:hidden;
  clip:rect(0 0 0 0); white-space:nowrap;
}
.hl-tomain{
  position:absolute; left:-9999px; top:0; z-index:99;
  background:var(--hl-fuchsia); color:var(--hl-coal); font-weight:800;
  padding:11px 20px;
}
.hl-tomain:focus{ left:0; }

/* ═════ 报头 masthead ═════ */
.hl-masthead{
  background:var(--hl-slate);        /* 实色不透明，与页脚同族 */
  position:sticky; top:0; z-index:40;
  border-bottom:2px solid var(--hl-fuchsia-d);
}
.hl-masthead-in{
  max-width:var(--hl-max); margin:0 auto;
  padding:10px var(--hl-pad);
  display:flex; align-items:center; gap:14px; flex-wrap:wrap;
}
.hl-nameplate{ display:flex; align-items:baseline; gap:3px; font-weight:800; }
.hl-nameplate-num{
  font-size:25px; color:var(--hl-fuchsia);
  font-family:"DIN Alternate","Helvetica Neue",sans-serif; letter-spacing:-.5px;
}
.hl-nameplate-word{ font-size:20px; letter-spacing:1px; }
.hl-dateline{
  margin:0; padding-left:14px; border-left:1px solid var(--hl-rule);
  font-size:12px; color:var(--hl-ash);
}

.hl-drawer{
  display:none; align-items:center; gap:7px; margin-left:auto;
  background:none; border:1px solid var(--hl-rule);
  border-radius:var(--hl-r); padding:7px 12px; cursor:pointer;
}
.hl-drawer span:not(.hl-drawer-txt){
  display:block; width:16px; height:2px; background:var(--hl-fuchsia);
}
.hl-drawer span:not(.hl-drawer-txt)+span{ margin-top:-9px; }
.hl-drawer-txt{ font-size:13px; color:var(--hl-ash); }

.hl-sections{ flex-basis:100%; order:9; border-top:1px solid var(--hl-rule); padding-top:8px; margin-top:2px; }
.hl-sections ul{ display:flex; gap:2px; flex-wrap:wrap; }
.hl-sections a{
  display:block; padding:6px 13px; font-size:15px; color:var(--hl-ash);
  border-radius:var(--hl-r);
  transition:background .15s, color .15s;
}
.hl-sections a:hover{ background:var(--hl-slate2); color:var(--hl-paper); }
.hl-sections a.hl-live{ background:var(--hl-fuchsia-d); color:#fff; font-weight:700; }

.hl-lookout{ margin-left:auto; display:flex; align-items:center; gap:9px; }
.hl-lookout-lab{ font-size:12px; color:var(--hl-ash); }
.hl-lookout input{
  width:210px; padding:7px 12px;
  background:var(--hl-coal); border:1px solid var(--hl-rule);
  border-radius:var(--hl-r); color:var(--hl-paper);
}
.hl-lookout input::placeholder{ color:#6D6D7B; }

/* ═════ 头版 splash ═════ */
.hl-splash{
  max-width:var(--hl-max); margin:var(--hl-pad) auto 0;
  padding:0 var(--hl-pad);
  display:grid; grid-template-columns:minmax(0,1.85fr) minmax(0,1fr);
  gap:var(--hl-gap); align-items:start;
}
.hl-splash-lead{ position:relative; }
.hl-splash-lead img{
  width:100%; aspect-ratio:3/2; object-fit:cover;
  border-radius:var(--hl-r-lg); box-shadow:var(--hl-cast);
}
.hl-splash-veil{
  position:absolute; left:0; right:0; bottom:0;
  padding:clamp(16px,2.6vw,32px);
  border-radius:0 0 var(--hl-r-lg) var(--hl-r-lg);
  background:linear-gradient(to top, rgba(19,19,22,.97) 14%, rgba(19,19,22,.84) 55%, rgba(19,19,22,0));
}
.hl-rubric{
  display:inline-block; margin:0 0 9px;
  background:var(--hl-fuchsia); color:var(--hl-coal);
  font-size:12px; font-weight:800; letter-spacing:1.2px;
  padding:3px 11px; border-radius:var(--hl-r);
}
.hl-rubric-plain{
  background:none; color:var(--hl-fuchsia);
  padding:0; font-size:12px; letter-spacing:.8px;
}
.hl-splash-veil h1{
  font-size:clamp(20px,2.7vw,32px); font-weight:800; margin-bottom:9px;
}
.hl-splash-sum{ margin:0 0 9px; font-size:14px; color:var(--hl-paper); max-width:62ch; }
.hl-byline{ margin:0; font-size:12px; color:var(--hl-ash); }

.hl-splash-side{ display:grid; gap:var(--hl-gap); }
.hl-splash-sub>a{
  display:grid; grid-template-columns:110px minmax(0,1fr); gap:13px;
  background:var(--hl-slate); border:1px solid var(--hl-rule);
  border-radius:var(--hl-r-lg); padding:11px; height:100%;
  transition:border-color .15s;
}
.hl-splash-sub>a:hover{ border-color:var(--hl-fuchsia); }
.hl-splash-sub img{ width:100%; aspect-ratio:4/3; object-fit:cover; border-radius:var(--hl-r); }
.hl-splash-sub-body{ display:block; min-width:0; }
.hl-splash-sub-h{
  display:block; margin:5px 0 6px; font-size:15px; font-weight:700; line-height:1.4;
}
.hl-splash-sub>a:hover .hl-splash-sub-h{ color:var(--hl-fuchsia); }

/* ═════ 电讯流 wire ═════ */
.hl-wire,.hl-heatbar,.hl-desk,.hl-ticker{
  max-width:var(--hl-max); margin:clamp(32px,5vw,58px) auto 0;
  padding:0 var(--hl-pad);
}
.hl-wire-head{ margin-bottom:16px; border-bottom:2px solid var(--hl-rule); padding-bottom:10px; }
.hl-wire-head h2,.hl-heatbar-head h2,.hl-desk h2{
  font-size:clamp(19px,2.3vw,26px); font-weight:800;
}
.hl-wire-note{ margin:6px 0 0; font-size:13px; color:var(--hl-ash); }

.hl-wire-cols{
  display:grid; grid-template-columns:repeat(auto-fill,minmax(300px,1fr)); gap:var(--hl-gap);
}
.hl-dispatch>a{
  display:block; height:100%;
  background:var(--hl-slate); border:1px solid var(--hl-rule);
  border-radius:var(--hl-r-lg); overflow:hidden;
  transition:border-color .18s, transform .18s;
}
.hl-dispatch>a:hover{ border-color:var(--hl-fuchsia); transform:translateY(-2px); }
.hl-dispatch img{ width:100%; aspect-ratio:16/9; object-fit:cover; }
.hl-dispatch-body{ display:block; padding:12px 14px 14px; }
.hl-dispatch-h{
  display:block; margin:6px 0 7px; font-size:16px; font-weight:700; line-height:1.42;
}
.hl-dispatch>a:hover .hl-dispatch-h{ color:var(--hl-fuchsia); }
.hl-dispatch-sum{ display:block; margin-bottom:8px; font-size:13px; color:var(--hl-ash); }

/* ═════ 热度榜 heatbar ═════ */
.hl-heatbar-head{
  display:flex; align-items:baseline; justify-content:space-between;
  gap:16px; flex-wrap:wrap; margin-bottom:14px;
  border-bottom:2px solid var(--hl-rule); padding-bottom:10px;
}
.hl-onto{
  font-size:14px; font-weight:700; color:var(--hl-fuchsia);
  border-bottom:2px solid var(--hl-fuchsia-d); padding-bottom:1px;
}
.hl-onto:hover{ border-bottom-color:var(--hl-fuchsia); }
.hl-heatbar-rows{
  display:grid; grid-template-columns:repeat(auto-fill,minmax(420px,1fr)); gap:0 28px;
}
.hl-heatbar-rows>li{
  display:grid; grid-template-columns:30px minmax(0,1fr) auto;
  gap:12px; align-items:baseline;
  padding:10px 2px; border-bottom:1px solid var(--hl-rule);
}
.hl-heatbar-no{
  font-size:15px; font-weight:800; color:var(--hl-ash); text-align:center;
  font-variant-numeric:tabular-nums;
}
.hl-heatbar-rows>li:nth-child(-n+3) .hl-heatbar-no{ color:var(--hl-fuchsia); }
.hl-heatbar-h{
  font-size:15px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap;
}
.hl-heatbar-h:hover{ color:var(--hl-fuchsia); }
.hl-heatbar-val{ font-size:12px; color:var(--hl-azure); font-variant-numeric:tabular-nums; }

/* ═════ 版面分区 desk ═════ */
.hl-desk h2{ margin-bottom:16px; border-bottom:2px solid var(--hl-rule); padding-bottom:10px; }
.hl-desk-row{
  display:grid; grid-template-columns:repeat(auto-fit,minmax(160px,1fr)); gap:var(--hl-gap);
}
.hl-desk-row a{
  display:block; background:var(--hl-slate);
  border:1px solid var(--hl-rule); border-radius:var(--hl-r-lg);
  overflow:hidden; height:100%;
  transition:border-color .15s, transform .15s;
}
.hl-desk-row a:hover{ border-color:var(--hl-fuchsia); transform:translateY(-2px); }
.hl-desk-row img{ width:100%; aspect-ratio:4/3; object-fit:cover; }
.hl-desk-name{ display:block; padding:11px 13px 0; font-size:15px; font-weight:700; }
.hl-desk-n{ display:block; padding:2px 13px 12px; font-size:12px; color:var(--hl-ash); }

/* ═════ 友链 ticker ═════ */
.hl-ticker h2{ font-size:16px; font-weight:800; margin-bottom:11px; }
.hl-ticker-row{ display:flex; flex-wrap:wrap; gap:8px 20px; }
.hl-ticker-row a{ font-size:14px; color:var(--hl-ash); }
.hl-ticker-row a:hover{ color:var(--hl-fuchsia); text-decoration:underline; }

/* ═════ 页脚 stringer ═════ */
.hl-stringer{
  margin-top:clamp(36px,5vw,62px);
  background:var(--hl-slate); border-top:2px solid var(--hl-fuchsia-d);
}
.hl-stringer-in{
  max-width:var(--hl-max); margin:0 auto;
  padding:clamp(26px,4vw,44px) var(--hl-pad);
}
.hl-stringer-cols{
  display:grid; grid-template-columns:repeat(auto-fit,minmax(250px,1fr));
  gap:clamp(18px,3vw,40px); margin-bottom:24px;
}
.hl-stringer-h{ font-size:15px; font-weight:800; margin-bottom:10px; }
.hl-stringer-say{ margin:0; font-size:14px; color:var(--hl-ash); }
.hl-stringer-links li{ margin-bottom:7px; font-size:14px; color:var(--hl-ash); }
.hl-stringer-links a:hover{ color:var(--hl-fuchsia); }
.hl-stringer-tail{
  display:flex; flex-wrap:wrap; gap:6px 14px; align-items:baseline;
  padding-top:16px; border-top:1px solid var(--hl-rule); margin:0 0 8px;
}
.hl-sitetag{ font-size:17px; font-weight:800; }
.hl-sitefull{ font-size:13px; color:var(--hl-ash); }
.hl-stringer-line{ margin:0; font-size:12px; color:var(--hl-ash); }

/* ═════ 回到顶部 ═════ */
.hl-backup{
  position:fixed; right:20px; bottom:20px; z-index:30;
  width:44px; height:44px; border-radius:var(--hl-r);
  background:var(--hl-fuchsia); color:var(--hl-coal); border:none;
  font-size:18px; font-weight:800; cursor:pointer;
  opacity:0; pointer-events:none; transform:translateY(8px);
  transition:opacity .2s, transform .2s;
}
.hl-backup.hl-live{ opacity:1; pointer-events:auto; transform:translateY(0); }

/* ═════ 列表页 / 详情页共用 ═════ */
.hl-trace{
  max-width:var(--hl-max); margin:0 auto; padding:14px var(--hl-pad) 0;
  font-size:13px; color:var(--hl-ash);
}
.hl-trace a:hover{ color:var(--hl-fuchsia); }
.hl-trace span{ margin:0 6px; }

.hl-standfirst{
  max-width:var(--hl-max); margin:0 auto; padding:16px var(--hl-pad) 0;
}
.hl-standfirst h1{ font-size:clamp(22px,2.8vw,32px); font-weight:800; margin-bottom:10px; }
.hl-standfirst-say{ margin:0; color:var(--hl-ash); max-width:74ch; }

.hl-filter{
  max-width:var(--hl-max); margin:18px auto 0; padding:0 var(--hl-pad);
  display:flex; gap:8px; flex-wrap:wrap;
}
.hl-filter a{
  padding:6px 14px; border-radius:var(--hl-r); font-size:14px;
  background:var(--hl-slate); border:1px solid var(--hl-rule); color:var(--hl-ash);
}
.hl-filter a:hover{ border-color:var(--hl-fuchsia); color:var(--hl-fuchsia); }
.hl-filter a.hl-live{ background:var(--hl-fuchsia-d); border-color:var(--hl-fuchsia-d); color:#fff; font-weight:700; }

.hl-more{
  max-width:var(--hl-max); margin:clamp(26px,4vw,42px) auto 0;
  padding:0 var(--hl-pad);
  display:flex; gap:8px; justify-content:center; flex-wrap:wrap;
}
.hl-more a,.hl-more span{
  min-width:38px; text-align:center; padding:7px 13px;
  border-radius:var(--hl-r); border:1px solid var(--hl-rule);
  background:var(--hl-slate); font-size:14px;
}
.hl-more a:hover{ border-color:var(--hl-fuchsia); color:var(--hl-fuchsia); }
.hl-more .hl-live{ background:var(--hl-fuchsia-d); border-color:var(--hl-fuchsia-d); color:#fff; font-weight:800; }

/* ═════ 详情页 galley ═════ */
.hl-galley{
  max-width:960px; margin:18px auto 0; padding:0 var(--hl-pad);
}
.hl-galley h1{ font-size:clamp(22px,3vw,34px); font-weight:800; margin-bottom:12px; }
.hl-galley-meta{
  display:flex; flex-wrap:wrap; gap:8px 16px; align-items:center;
  padding-bottom:14px; border-bottom:1px solid var(--hl-rule); margin-bottom:18px;
  font-size:13px; color:var(--hl-ash);
}
.hl-galley-art img{
  width:100%; aspect-ratio:3/2; object-fit:cover;
  border-radius:var(--hl-r-lg); margin-bottom:18px;
}
.hl-galley-text p{ margin:0 0 14px; max-width:70ch; }
.hl-galley-text h2{ font-size:19px; font-weight:800; margin:24px 0 10px; }

.hl-timeline,.hl-aside,.hl-related,.hl-queries{
  max-width:960px; margin:clamp(28px,4vw,46px) auto 0; padding:0 var(--hl-pad);
}
.hl-timeline h2,.hl-aside h2,.hl-related h2,.hl-queries h2{
  font-size:clamp(18px,2.1vw,23px); font-weight:800; margin-bottom:14px;
  border-bottom:2px solid var(--hl-rule); padding-bottom:9px;
}
.hl-timeline-rows>li{
  display:grid; grid-template-columns:88px minmax(0,1fr); gap:14px;
  padding:11px 0; border-bottom:1px solid var(--hl-rule);
}
.hl-timeline-when{ font-size:13px; color:var(--hl-fuchsia); font-weight:700; }
.hl-timeline-what{ font-size:14px; color:var(--hl-ash); }

.hl-aside-body{ color:var(--hl-ash); }
.hl-aside-body h3{ font-size:16px; font-weight:700; color:var(--hl-paper); margin:16px 0 7px; }
.hl-aside-body p{ margin:0 0 10px; max-width:72ch; }

.hl-related-row{
  display:grid; grid-template-columns:repeat(auto-fill,minmax(240px,1fr)); gap:var(--hl-gap);
}
.hl-queries-list li{
  background:var(--hl-slate); border:1px solid var(--hl-rule);
  border-radius:var(--hl-r-lg); padding:13px 15px; margin-bottom:9px;
}
.hl-queries-q{ margin:0 0 5px; font-weight:700; }
.hl-queries-a{ margin:0; color:var(--hl-ash); font-size:14px; }

/* ═════ APP 页 ═════ */
.hl-getapp{
  max-width:var(--hl-max); margin:20px auto 0; padding:0 var(--hl-pad);
  display:grid; grid-template-columns:repeat(auto-fit,minmax(290px,1fr));
  gap:clamp(20px,3vw,40px); align-items:center;
}
.hl-getapp-copy h1{ font-size:clamp(23px,2.9vw,34px); font-weight:800; margin-bottom:12px; }
.hl-getapp-say{ margin:0 0 18px; color:var(--hl-ash); }
.hl-merit{ margin:0 0 20px; }
.hl-merit li{ padding-left:23px; position:relative; margin-bottom:9px; color:var(--hl-ash); }
.hl-merit li strong{ color:var(--hl-paper); }
.hl-merit li::before{
  content:""; position:absolute; left:0; top:10px;
  width:10px; height:10px; background:var(--hl-fuchsia);
}
.hl-frames{ display:grid; grid-template-columns:repeat(auto-fit,minmax(190px,1fr)); gap:14px; }
.hl-frames img{
  width:100%; aspect-ratio:4/3; object-fit:cover;
  border-radius:var(--hl-r-lg); border:1px solid var(--hl-rule);
}
.hl-frames figcaption{ font-size:13px; color:var(--hl-ash); margin-top:7px; text-align:center; }

.hl-flash{
  display:inline-block; padding:11px 24px; border-radius:var(--hl-r);
  background:var(--hl-fuchsia); color:var(--hl-coal); font-weight:800;
  transition:transform .15s;
}
.hl-flash:hover{ transform:translateY(-2px); }
.hl-flash-line{
  background:transparent; color:var(--hl-fuchsia);
  border:2px solid var(--hl-fuchsia); padding:9px 22px;
}
.hl-flash-line:hover{ background:rgba(217,70,239,.13); }
.hl-acts{ display:flex; gap:11px; flex-wrap:wrap; margin:0; }

/* ═════ 404 ═════ */
.hl-gone{
  max-width:680px; margin:0 auto; padding:clamp(50px,9vw,110px) var(--hl-pad);
  text-align:center;
}
.hl-gone-num{
  font-size:clamp(64px,12vw,120px); font-weight:800; line-height:1;
  color:var(--hl-fuchsia); font-variant-numeric:tabular-nums;
}
.hl-gone h1{ font-size:clamp(20px,2.4vw,27px); font-weight:800; margin:14px 0 10px; }
.hl-gone-say{ margin:0 0 22px; color:var(--hl-ash); }
.hl-gone-ways{ display:flex; gap:10px; justify-content:center; flex-wrap:wrap; }

/* ═════ 响应式 ═════ */
@media (max-width:1024px){
  .hl-splash{ grid-template-columns:1fr; }
  .hl-splash-side{ grid-template-columns:repeat(auto-fit,minmax(280px,1fr)); }
  .hl-heatbar-rows{ grid-template-columns:1fr; }
}
@media (max-width:760px){
  .hl-drawer{ display:flex; }
  .hl-sections{ display:none; }
  .hl-sections.hl-live{ display:block; }
  .hl-sections ul{ flex-direction:column; gap:1px; }
  .hl-sections a{ padding:10px 12px; }
  .hl-dateline{ display:none; }
  .hl-lookout{ order:8; flex-basis:100%; margin-left:0; }
  .hl-lookout input{ width:100%; }
  .hl-lookout-lab{ display:none; }

  .hl-splash-veil{ position:static; padding:14px 0 0; background:none; border-radius:0; }
  .hl-splash-sub>a{ grid-template-columns:96px minmax(0,1fr); }
  .hl-timeline-rows>li{ grid-template-columns:1fr; gap:3px; }
}

@media (prefers-reduced-motion:reduce){
  *{ animation-duration:.01ms !important; transition-duration:.01ms !important; }
}


/* --- 内容库 --- */
/* 暗·85°·r6·宽1453·间距40 */
:root{
  --hl-coal:#10120D;
  --hl-slate:#272A23;
  --hl-slate2:#31352C;
  --hl-paper:#F5F5F4;
  --hl-ash:#C1C5BA;
  --hl-rule:#444A3A;
  --hl-fuchsia:#22D5E2;
  --hl-azure:#E31C6C;
  --hl-fuchsia-d:#129BA5;
  --hl-max:1453px;
  --hl-on:#10131A;
  --hl-on2:#FFFFFF;
  --hl-on3:#10131A;
}