/* 0904 Crypto News V2 — front template rewrite 2026-11-10.
   Look kept from the approved design: 980px centred wrapper, dark-blue
   header #1f0a0a, gold logo #f59e0b, red nav #7f1d1d, main col + 300px
   sidebar, blue pill tags, card grids. No external CDN.
   What the rewrite fixes (browser audit 2026-11-10, /the-verge-7/):
   - a body image could fill the whole viewport (inline styles / w=2400
     srcset let it escape the column): hero + every body image is now
     hard-capped (max-width 100%, max-height 520px, object-fit contain);
   - sidebar titles clipped mid-word ("Anthrop…") and broken-image icons:
     every title uses line-clamp + ellipsis, every thumb has a fixed
     16:10 aspect ratio and object-fit cover, failed images are hidden;
   - "Maybe You Like" duplicated the article page's Related Articles:
     the box is deleted (front.php no longer renders it);
   - tag pills no longer have stray commas (front.php, space-separated);
   - mobile: single column under 768px, nav scrolls horizontally,
     tables scroll, nothing overflows the viewport.
   Mobile-first: base styles are the single-column layout; the
   two-column desktop layout kicks in at min-width 769px. */
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,"Helvetica Neue",Arial,"PingFang SC","Microsoft YaHei",sans-serif;background:#e6edf7;color:#1e293b;margin:0;line-height:1.7;-webkit-font-smoothing:antialiased;overflow-x:hidden}
a{color:#991b1b;text-decoration:none;overflow-wrap:break-word}
a:hover{color:#dc2626;text-decoration:underline}
h1,h2,h3,h4,h5,h6{font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif;line-height:1.35;letter-spacing:-.01em;overflow-wrap:break-word}
img{max-width:100%;height:auto;display:block}
img[src=""],img:not([src]){display:none}

/* Layout — single column by default (mobile-first) */
.wrapper{background:#fff;box-shadow:0 8px 32px rgba(153,27,27,.14);margin:0 auto 16px;max-width:980px;padding:0;overflow:hidden}
.container{padding:0 15px}
.row{display:block}
.col-md-8,.col-md-4{width:100%;min-width:0}
.clearfix::after{content:"";display:table;clear:both}

/* Header + nav */
#logo{padding:24px 18px 20px;background:linear-gradient(135deg,#1f0a0a 0%,#450a0a 100%);color:#fff}
#logo a{font-size:27px;font-weight:800;color:#fff;letter-spacing:-.02em}
#logo a:hover{text-decoration:none;color:#fff}
#logo a span{color:#f59e0b}
#logo .tagline{font-size:13px;color:#94a3b8;margin-top:8px;line-height:1.5}
.navbar-inverse{background:#7f1d1d;border:none;border-radius:0;min-height:48px}
.navbar{margin-bottom:0}
#menu{display:flex;flex-wrap:nowrap;overflow-x:auto;-webkit-overflow-scrolling:touch;scrollbar-width:none}
#menu::-webkit-scrollbar{display:none}
#menu a{color:#e2e8f0;cursor:pointer;font-size:15px;font-weight:600;padding:14px 16px;transition:background .15s ease;white-space:nowrap;flex-shrink:0}
#menu a:hover{background-color:#b91c1c !important;color:#fff !important;text-decoration:none}
#menu .site-search{margin-left:auto;display:flex;flex-wrap:nowrap;align-items:center;align-self:center;gap:6px;padding:7px 10px;flex:none;width:auto;white-space:nowrap}
#menu .site-search input{flex:none;width:170px;height:32px;padding:0 10px;border:1px solid #b91c1c;border-radius:6px;background:#1f0a0a;color:#e2e8f0;font-size:13px;outline:none}
#menu .site-search input::placeholder{color:#7d8aa5}
#menu .site-search button{flex:none;height:32px;padding:0 12px;border:none;border-radius:6px;background:#dc2626;color:#fff;font-size:13px;font-weight:700;cursor:pointer;white-space:nowrap}

/* Main column */
#main{background:#fff;margin-bottom:20px;padding:20px 18px;min-width:0}
#main .mtitle{font-size:25px;font-weight:800;color:#991b1b;margin:8px 0 16px;line-height:1.3}
#main h1{font-size:25px;font-weight:800;color:#991b1b}
#main p{margin-bottom:14px}
#main li{margin-bottom:6px}
.breadcrumb{color:#64748b;font-size:12px;margin-bottom:10px;text-align:right}

/* Article list — stacked cards on mobile, thumb left on desktop */
.post-list section{border-bottom:1px solid #e2e8f0;clear:both;margin-bottom:24px;padding-bottom:24px}
.post-list section header{margin:6px 0 14px}
.post-list section h2{font-size:18px;line-height:1.4;margin-bottom:6px;padding:0}
.post-list section h2 a{font-size:21px;font-weight:700;letter-spacing:-.01em;color:#991b1b;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.post-list section h2 a:hover{color:#dc2626;text-decoration:none}
.post-list section .meta{color:#64748b;font-size:13px}
.post-list section .thumbnail{background:#fff;border:none;display:block;margin:0 0 12px 0;padding:0;max-width:100%}
.post-list section .thumbnail img{width:100%;aspect-ratio:16/10;object-fit:cover;border-radius:12px;display:block;box-shadow:0 2px 10px rgba(153,27,27,.12);background:#fee2e2}
.post-list section .summary{line-height:1.75;color:#475569;font-size:15px;display:-webkit-box;-webkit-line-clamp:4;-webkit-box-orient:vertical;overflow:hidden}

/* Article body — the hero cap is the point of this rewrite.
   No body image may ever exceed the column or cover the viewport:
   max-width 100%, max-height 520px, contain (never cropped, never
   stretched). Inline styles are stripped at render time too, so a
   style="width:100vw" from a source site cannot override this. */
.article-body{line-height:1.85;font-size:16.5px;color:#1e293b;overflow-wrap:break-word}
.article-body img{max-width:100% !important;height:auto !important;max-height:520px;object-fit:contain;border-radius:10px;background:#fee2e2}
.article-body img.article-hero{display:block;width:100%;max-width:100%;max-height:520px;object-fit:contain;border-radius:10px;background:#1f0a0a}
.article-body figure{margin:0 0 16px;max-width:100%}
.article-body figure img{max-height:520px;object-fit:contain}
.article-body figcaption{color:#64748b;font-size:13px;text-align:center;margin-top:6px}
.article-body p{margin-bottom:16px}
.article-body blockquote{margin:16px 0;padding:12px 18px;border-left:4px solid #dc2626;background:#fef2f2;border-radius:0 10px 10px 0;color:#334155}
.article-body pre{overflow-x:auto;background:#1f0a0a;color:#e2e8f0;padding:14px;border-radius:10px;font-size:14px;line-height:1.6}
.article-body code{font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;font-size:.9em;background:#fef2f2;padding:1px 6px;border-radius:6px}
.article-body pre code{background:transparent;padding:0;color:inherit}
.article-body ul,.article-body ol{padding-left:24px;margin-bottom:16px}
.article-body table{display:block;overflow-x:auto;max-width:100%;margin-bottom:16px;border-collapse:collapse}
.article-body table table{display:table}
.article-body th,.article-body td{border:1px solid #dde6f2;padding:8px;text-align:left}
.article-body iframe,.article-body video{max-width:100%}
/* Defence in depth: source-site chrome that slips past the render-time
   sanitizer is hidden by CSS too (avatars, sponsor/ad placeholders,
   popups, newsletters, paywalls). */
.article-body img[src*="avatar"],.article-body img.avatar,.article-body .byline img,.article-body [class*="byline"] img,.article-body [class*="author"] img{display:none !important}
.article-body [class*="sponsor"],.article-body [class*="advertiser"],.article-body [class*="native-ad"],.article-body [class*="ad-slot"],.article-body [class*="ad-container"],.article-body [class*="popup"],.article-body [class*="modal"],.article-body [class*="newsletter"],.article-body [class*="paywall"]{display:none !important}
#main .meta{color:#64748b;font-size:13px;padding-bottom:14px;border-bottom:1px solid #eef2f7;margin-bottom:16px}
#tags,#stags{margin:16px 0;font-size:14px;color:#475569}
#tags a,#stags a{display:inline-block;margin:0 6px 6px 0;color:#991b1b;background:#fef2f2;border:1px solid #fca5a5;border-radius:999px;padding:2px 12px;font-size:13px;line-height:1.7}
#tags a:hover,#stags a:hover{background:#dc2626;color:#fff;text-decoration:none;border-color:#dc2626}

/* Related articles — CSS GRID: 1 column on mobile, 3 on desktop. */
#similar{display:grid;grid-template-columns:1fr;gap:16px;margin:28px 0 8px;padding-top:24px;border-top:1px solid #e2e8f0}
#similar h3{grid-column:1/-1;color:#991b1b;font-size:21px;font-weight:800;margin:0;padding-bottom:4px}
#similar .item{background:#fff;border:1px solid #e2e8f0;border-radius:14px;overflow:hidden;box-shadow:0 2px 10px rgba(153,27,27,.07);transition:transform .15s ease,box-shadow .15s ease;min-width:0}
#similar .item:hover{transform:translateY(-3px);box-shadow:0 8px 22px rgba(153,27,27,.16)}
#similar .thumbnail{display:block;padding:0;margin:0}
#similar .thumbnail img{width:100%;aspect-ratio:16/10;object-fit:cover;border-radius:0;background:#fee2e2}
#similar .info{padding:12px 14px 14px;font-size:11px}
#similar .info h4{font-size:15px;font-weight:700;line-height:1.45;margin:0;display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden}
#similar .info h4 a{color:#991b1b}
#similar .info h4 a:hover{color:#dc2626;text-decoration:none}

/* Term pages: intro + related blocks */
.term-intro{background:#fef2f2;border:1px solid #fecaca;border-radius:12px;padding:14px 18px;margin:0 0 20px;color:#334155;font-size:15px;line-height:1.7}
.term-cluster{margin:0 0 20px;font-size:14px}
.term-cluster a{display:inline-block;margin:0 6px 6px 0;color:#991b1b;background:#fef2f2;border:1px solid #fca5a5;border-radius:999px;padding:2px 12px}
.term-related{margin:0 0 20px}
.term-related h2{font-size:18px;color:#991b1b}
.term-related li{margin-bottom:6px}

/* Ad slots — rendered ONLY when ad code is set in 后台 → 设置 → 广告.
   Empty slots output nothing at all (no box, no heading, no placeholder),
   so these rules only ever apply to a filled slot. */
.ad-slot{margin:20px 0;max-width:100%;overflow:hidden;text-align:center}
.ad-slot ins,.ad-slot iframe,.ad-slot img,.ad-slot div{max-width:100%}
.ad-slot iframe{border:0}
.ad-label{font-size:11px;line-height:1.4;color:#94a3b8;letter-spacing:.1em;text-transform:uppercase;text-align:center;margin-bottom:6px}
.ad-sidebar{margin:0 0 18px}
.ad-article-bottom{margin:24px 0 8px}
.ad-home-top{margin:4px 0 24px;padding-bottom:16px;border-bottom:1px solid #eef2f7}

/* Sidebar */
aside.col-md-4{padding-top:0;min-width:0}
.box{background:#fff !important;border:1px solid #e2e8f0;border-radius:14px;overflow:hidden;margin-bottom:18px;box-shadow:0 2px 10px rgba(153,27,27,.06)}
.box .box-heading{background-color:#fef2f2 !important;border-bottom:1px solid #fecaca;border-left:4px solid #dc2626;padding:0 16px}
.box-heading span{color:#991b1b;font-weight:700;font-size:14px;letter-spacing:.02em;line-height:38px}
.box-content{padding:16px}
.box-content li{margin-bottom:6px}
.box-content p{margin:0 0 8px;color:#475569;font-size:14px}

/* Feature Gallery — CSS GRID, 3 columns. Thumbs are real article
   images only (front.php filters out placeholders); fixed 16:10 ratio
   with object-fit cover so cards align and no mid-word crop shows. */
.box-gallery1 .box-content{margin:0;padding:14px 16px}
.box-gallery1 .item{margin:0 0 14px 0}
.box-gallery1 .item:last-child{margin-bottom:0}
.box-gallery1 .thumbnail{display:block;float:left;width:120px;max-width:120px;margin:0 12px 0 0;padding:0;border:none;aspect-ratio:16/10;overflow:hidden;border-radius:8px;background:#fee2e2}
.box-gallery1 .thumbnail img{width:100%;height:100%;aspect-ratio:16/10;object-fit:cover;display:block;border-radius:8px}
.box-gallery1 .info{overflow:hidden}
.box-gallery1 .info .title{display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;font-weight:700;line-height:1.35}
.box-gallery1 .info>div{display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;line-height:1.45}
.box-gallery3 .box-content{display:grid;grid-template-columns:repeat(3,1fr);gap:10px;margin:0;padding:14px 16px}
.box-gallery3 .thumbnail{display:block;border:none;float:none;margin:0;padding:0;width:100%;aspect-ratio:16/10;overflow:hidden;border-radius:8px;background:#fee2e2}
.box-gallery3 .thumbnail img{width:100%;height:100%;aspect-ratio:16/10;object-fit:cover;border-radius:8px;transition:transform .15s ease}
.box-gallery3 .thumbnail:hover img{transform:scale(1.05)}
.box-gallery2 .box-content{display:grid;grid-template-columns:repeat(3,1fr);gap:10px;margin:0;padding:14px 16px}
.hot-terms{list-style:none;margin:0;padding:0}
.hot-terms li{margin-bottom:8px}
.hot-terms a{font-size:14px}

/* Tag / stag clouds */
.tag-cloud a,.stag-cloud a{display:inline-block;margin:0 8px 8px 0;color:#991b1b;background:#fef2f2;border:1px solid #fca5a5;border-radius:999px;padding:3px 12px;font-size:13px;line-height:1.6;transition:background .15s ease,color .15s ease}
.tag-cloud a:hover,.stag-cloud a:hover{background:#dc2626;color:#fff;text-decoration:none;border-color:#dc2626}

/* Archive / static pages / sitemap */
.archive-list{list-style:none;margin:0 0 20px;padding:0}
.archive-list li{padding:8px 0;border-bottom:1px solid #eef2f7}
.static-page{line-height:1.85;font-size:16px;color:#1e293b}
.static-page h2{color:#991b1b;margin:24px 0 10px}

/* Pagination */
.pagenavi{text-align:center;margin:24px 0}
.pagenavi a,.pagenavi span.current{display:inline-block;padding:8px 14px;margin:0 4px;border:1px solid #fca5a5;border-radius:999px;background:#fff;color:#991b1b;font-weight:600;font-size:14px}
.pagenavi a:hover{background:#fef2f2;text-decoration:none;border-color:#dc2626;color:#dc2626}
.pagenavi span.current{background:#7f1d1d;color:#fff;border-color:#7f1d1d}

/* Search form */
form input[name="q"]{padding:11px 14px;border:1px solid #cbd5e1;border-radius:10px;width:100%;max-width:480px;font-size:15px}
form input[name="q"]:focus{outline:2px solid #fca5a5;border-color:#dc2626}
button{padding:11px 20px;background:#dc2626;color:#fff;border:none;border-radius:10px;cursor:pointer;font-weight:600;font-size:15px;transition:background .15s ease}
button:hover{background:#dc2626}

/* Footer */
footer{background-color:#fef2f2;border-top:1px solid #fecaca;clear:both;overflow:auto;padding:20px 0}
footer h3{border-bottom:1px solid #fecaca;color:#991b1b !important;font-size:18px;margin:0 0 15px;padding-bottom:5px;text-transform:uppercase}
footer a,#copyright a{color:#991b1b}
footer a:hover,#copyright a:hover{color:#dc2626;text-decoration:underline}
#about_links a{margin:0 10px;text-transform:uppercase}
#copyright{background-color:#fee2e2;border-top:1px solid #fca5a5;clear:both;color:#475569 !important;font-size:12px;margin-top:0;overflow:auto;padding:20px 24px}
#copyright #about_links{float:right}
.declare{color:#64748b;font-size:11px}

/* Generic bits reused by admin/install pages */
.wrap{max-width:980px;margin:0 auto;padding:0 16px}
.header{background:#1f0a0a;color:#fff;padding:18px 0}
.logo{font-size:28px;font-weight:bold;color:#fff}
.logo span{color:#f59e0b}
.nav{background:#7f1d1d;padding:10px 0}
.nav a{color:#fff;margin-right:18px}
.main{display:flex;gap:20px;padding:20px 0}
.content{flex:1;min-width:0}
.sidebar{width:300px;flex-shrink:0}
.post-list article,.card{background:#fff;border:1px solid #dde6f2;border-radius:12px;padding:16px;margin-bottom:16px}
.footer{background:#1f0a0a;color:#cbd5e1;text-align:center;padding:20px;margin-top:20px}
.btn{display:inline-block;background:#dc2626;color:#fff;padding:8px 16px;border-radius:8px}
input,select,textarea{padding:9px 10px;border:1px solid #cbd5e1;border-radius:8px;font-size:15px}
input:focus,select:focus,textarea:focus{outline:2px solid #fca5a5;border-color:#dc2626}
table{width:100%;border-collapse:collapse}
th,td{border:1px solid #dde6f2;padding:8px;text-align:left}

/* Desktop: two-column layout at 769px and up. The 980px wrapper,
   300px sidebar and floated list thumbs are desktop-only; mobile
   keeps the single-column base above. */
@media (min-width:769px){
  .wrapper{margin:24px auto 28px;border-radius:16px}
  .row{display:flex;gap:0;align-items:flex-start}
  .col-md-8{flex:1}
  .col-md-4{width:300px;flex-shrink:0;margin-left:16px}
  aside.col-md-4{padding-top:20px}
  #main{padding:24px 28px}
  #main .mtitle,#main h1{font-size:28px}
  #logo{padding:32px 28px 22px}
  #logo a{font-size:32px}
  #menu{flex-wrap:wrap;overflow-x:visible}
  #menu a{padding:14px 18px}
  .post-list section .thumbnail{float:left;width:250px;max-width:250px;margin:0 16px 10px 0}
  .post-list section .thumbnail img{width:100%}
  .post-list section h2 a{font-size:23px}
  #similar{grid-template-columns:repeat(3,1fr);gap:20px}
}
@media (max-width:480px){
  #main{padding:16px 14px}
  #main .mtitle,#main h1{font-size:22px}
  .article-body{font-size:15.5px}
  #copyright{padding:16px}
  #copyright #about_links{float:none;display:block;margin-top:8px}
  .box-gallery3 .box-content{grid-template-columns:repeat(2,1fr)}
  #menu .site-search{margin-left:0;flex:1 1 100%;padding:7px 10px 10px}
  #menu .site-search input{flex:1;width:auto;min-width:0}
}