.news-page {
  --news-surface:#191714;
  --news-glow:#352515;
  --news-button:#2a2118;
}
[data-theme="light"] .news-page {
  --news-surface:#fffdfa;
  --news-glow:#f5d6a7;
  --news-button:#fff4df;
}
[data-theme="light"] .news-page .brand img { content:url("./socialx-logo-light.png") }
.news-page .nav a[aria-current="location"] {
  color:#ffd477;
  background:#553914;
  box-shadow:inset 0 0 0 1px #ffc55430;
}
[data-theme="light"] .news-page .nav a[aria-current="location"] {
  color:var(--accent);
  background:#ffebc4;
  box-shadow:inset 0 0 0 1px #d5a451;
}
.news-page .shell { background:radial-gradient(ellipse 530px 155px at 50% -22px,var(--news-glow),transparent) }
.news { max-width:1192px; margin:56px auto 0 }
.news-intro { margin-bottom:34px }
.news h1 { margin:0; font-size:clamp(46px,5.1vw,74px); line-height:1.02; letter-spacing:-.045em; font-weight:720 }
.news-intro p { margin:15px 0 0; color:var(--muted); font-size:18px; line-height:1.5 }
.news-grid { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:22px }
.news-card {
  display:flex;
  flex-direction:column;
  border:1px solid var(--line);
  border-radius:19px;
  background:var(--news-surface);
  box-shadow:0 14px 32px #100c0718;
}
.news-cover {
  position:relative;
  display:grid;
  place-items:center;
  aspect-ratio:1.76;
  overflow:hidden;
  border-radius:18px 18px 0 0;
  color:#ffda8d;
}
.cover-smm { background:radial-gradient(ellipse at 48% 34%,#b46a26,#422213 82%) }
.cover-ad { background:radial-gradient(ellipse at 60% 25%,#704524,#2a221b 79%) }
.cover-ai { background:radial-gradient(ellipse at 55% 38%,#905224,#391d16 78%) }
.news-cover svg { width:100%; height:100%; display:block }
.news-cover span {
  position:absolute;
  top:13px;
  left:13px;
  padding:6px 10px;
  border-radius:999px;
  background:#21150e;
  border:1px solid #ffce713d;
  color:#ffe5b9;
  font-size:12px;
  font-weight:650;
}
.news-card-content { display:flex; flex-direction:column; align-items:flex-start; flex:1; padding:22px }
.news-card h2 { margin:0; font-size:clamp(20px,1.7vw,25px); line-height:1.17; letter-spacing:-.027em }
.news-card p { margin:11px 0 20px; color:var(--muted); font-size:15px; line-height:1.5 }
.read-more {
  display:inline-flex;
  align-items:center;
  gap:9px;
  min-height:44px;
  margin-top:auto;
  padding:0 14px;
  border:1px solid var(--line);
  border-radius:999px;
  color:var(--accent);
  background:var(--news-button);
  font-size:14px;
  font-weight:650;
}
.read-more:hover { background:var(--theme-hover) }
.read-more .icon { width:17px; height:17px }
@media (max-width:900px) {
  .news { margin-top:30px }
  .news-grid { grid-template-columns:repeat(2,minmax(0,1fr)); gap:16px }
}
@media (max-width:580px) {
  .news-intro { margin-bottom:25px }
  .news-intro p { font-size:16px; margin-top:11px }
  .news-grid { grid-template-columns:1fr }
  .news-card-content { padding:18px }
}

.cover-generic { background:radial-gradient(ellipse at 48% 34%,#9d5f28,#422213 82%) }
.news-cover img { width:100%; height:100%; position:absolute; inset:0; object-fit:cover }
.news-cover span { max-width:calc(100% - 26px); overflow-wrap:anywhere }
.news-card-content { overflow-wrap:anywhere }
.news-status { color:var(--muted) }
.news-status:empty { display:none }

.news-page [hidden] { display:none }
.news-back {
  display:inline-flex;
  align-items:center;
  gap:8px;
  min-height:44px;
  margin:-12px 0 16px;
  color:var(--accent);
  font-size:14px;
  font-weight:650;
}
.news-back .icon { width:17px; height:17px; transform:rotate(180deg) }
.news-detail { display:grid; grid-template-columns:minmax(0,2.45fr) minmax(0,1fr); align-items:start; gap:40px }
.article-cover .news-cover { border:1px solid var(--line); border-radius:20px; aspect-ratio:1.95 }
.article-cover .news-cover span { top:18px; left:18px }
.news-article h1 {
  margin:27px 0 17px;
  font-size:clamp(32px,4vw,54px);
  line-height:1.08;
  letter-spacing:-.039em;
  overflow-wrap:anywhere;
}
.article-copy {
  color:var(--muted);
  font-size:17px;
  line-height:1.7;
  white-space:pre-wrap;
  overflow-wrap:anywhere;
}
.news-share { margin-top:29px; padding-top:20px; border-top:1px solid var(--line) }
.news-share h2 { margin:0 0 13px; font-size:17px }
.share-actions { display:flex; gap:8px; flex-wrap:wrap }
.share-status { margin:10px 0 0; color:var(--muted); font-size:14px }
.share-status:empty { display:none }
.related-news h2 { margin:0 0 16px; font-size:23px; letter-spacing:-.025em }
.related-news ul { list-style:none; margin:0; padding:0; display:grid; gap:11px }
.related-news a {
  display:grid;
  grid-template-columns:86px minmax(0,1fr);
  align-items:center;
  gap:12px;
  padding:9px;
  border:1px solid var(--line);
  border-radius:13px;
  background:var(--news-surface);
  font-size:14px;
  font-weight:650;
  line-height:1.3;
  overflow-wrap:anywhere;
}
.related-news a:hover { background:var(--news-button) }
.related-news .news-cover { aspect-ratio:1.3; border-radius:8px }
@media (max-width:900px) {
  .news-detail { grid-template-columns:1fr; gap:32px }
  .news-back { margin:0 0 12px }
}
@media (max-width:580px) {
  .article-cover .news-cover { border-radius:14px; aspect-ratio:1.55 }
  .article-cover .news-cover span { top:10px; left:10px }
  .news-article h1 { margin:20px 0 13px }
  .article-copy { font-size:16px }
}