@import url('https://fonts.googleapis.com/css2?family=Space+Grotesk:wght@300;400;500;700&family=JetBrains+Mono:wght@400;700&display=swap');
*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
:root{
  --bg:#0a0a0f;--bg2:#0f0f18;--bg3:#13131f;
  --border:#1a1a2a;--border2:#252535;
  --text:#f0f0f0;--text2:#aaa;--text3:#555;
  --accent:#00c882;--accent-dim:rgba(0,200,130,.1);
  --ff:'Space Grotesk',sans-serif;--mono:'JetBrains Mono',monospace;
}
html{scroll-behavior:smooth}
body{font-family:var(--ff);background:var(--bg);color:var(--text);font-size:16px;line-height:1.6}
a{text-decoration:none;color:inherit}
img{display:block;width:100%;height:100%;object-fit:cover}

/* TOPBAR */
.topbar{background:#050508;border-bottom:1px solid var(--border);padding:5px 1.5rem;display:flex;justify-content:space-between;font-family:var(--mono);font-size:10px;color:var(--text3);letter-spacing:.08em}
.topbar-right{color:var(--accent);opacity:.7}

/* HEADER */
header{background:var(--bg);border-bottom:1px solid var(--border);position:sticky;top:0;z-index:100}
.header-inner{display:flex;align-items:center;gap:1rem;padding:.75rem 1.5rem}
.brand{display:flex;align-items:center;gap:10px;flex-shrink:0}
.brand-name{font-size:1.4rem;font-weight:700;letter-spacing:-.03em}
.accent{color:var(--accent)}

/* SEARCH */
.search-form{flex:1;max-width:400px;display:flex;border:1px solid var(--border2);border-radius:4px;overflow:hidden;background:var(--bg2)}
.search-input{flex:1;background:transparent;border:none;padding:.45rem .75rem;font-family:var(--ff);font-size:13px;color:var(--text);outline:none}
.search-input::placeholder{color:var(--text3)}
.search-btn{background:transparent;border:none;border-left:1px solid var(--border2);padding:.45rem .75rem;color:var(--text3);cursor:pointer;font-size:16px;transition:color .2s}
.search-btn:hover{color:var(--accent)}

/* LIVE BADGE */
.header-meta{display:flex;align-items:center;gap:1rem;margin-left:auto;flex-shrink:0}
.live-badge{font-family:var(--mono);font-size:9px;letter-spacing:.15em;color:var(--accent);animation:pulse 2s infinite}
@keyframes pulse{0%,100%{opacity:1}50%{opacity:.4}}
.rss-link{font-family:var(--mono);font-size:10px;letter-spacing:.1em;color:var(--text3);border:1px solid var(--border2);padding:3px 8px;border-radius:2px;transition:color .2s,border-color .2s}
.rss-link:hover{color:var(--accent);border-color:var(--accent)}

/* NAV */
nav{display:flex;gap:0;padding:0 1.5rem;overflow-x:auto;scrollbar-width:none;border-top:1px solid var(--border)}
nav a{font-size:11px;font-weight:500;letter-spacing:.1em;text-transform:uppercase;color:var(--text3);padding:.55rem 1rem;border-bottom:2px solid transparent;white-space:nowrap;transition:color .2s,border-color .2s}
nav a:hover{color:var(--text);border-bottom-color:var(--accent)}

/* LAYOUT */
.site-wrap{display:grid;grid-template-columns:1fr 300px;gap:0;max-width:1200px;margin:0 auto;padding:1.5rem}
.main-col{min-width:0;padding-right:2rem;border-right:1px solid var(--border)}
.side-col{padding-left:1.5rem;display:flex;flex-direction:column;gap:1.5rem}

/* HERO */
.hero-section{margin-bottom:2rem}
.hero-link{display:grid;grid-template-columns:1fr 1fr;gap:1.5rem;margin-bottom:1.5rem}
.hero-img-wrap{position:relative;aspect-ratio:16/9;overflow:hidden;border-radius:4px;background:var(--bg3)}
.hero-img{width:100%;height:100%;object-fit:cover}
.hero-placeholder{width:100%;height:100%;background:linear-gradient(135deg,#0f1a2e,#1a0f3a)}
.hero-img-wrap .cat-badge{position:absolute;top:.75rem;left:.75rem}
.hero-body{display:flex;flex-direction:column;justify-content:center}
.hero-title{font-size:clamp(1.3rem,2.5vw,1.9rem);font-weight:700;line-height:1.2;margin-bottom:.75rem;transition:color .2s}
.hero-link:hover .hero-title{color:var(--accent)}
.hero-excerpt{font-size:14px;color:var(--text2);line-height:1.7;margin-bottom:.75rem}

/* FEATURED STACK */
.featured-stack{display:grid;grid-template-columns:repeat(3,1fr);gap:1rem;border-top:1px solid var(--border);padding-top:1.5rem}
.featured-item{display:flex;flex-direction:column;gap:.5rem;cursor:pointer;transition:opacity .2s}
.featured-item:hover{opacity:.75}
.feat-thumb{aspect-ratio:3/2;overflow:hidden;border-radius:3px;background:var(--bg3)}
.feat-body h3{font-size:13px;font-weight:500;line-height:1.35;margin:.25rem 0}

/* SECTION HEAD */
.section-head{display:flex;align-items:center;gap:1rem;margin:1.5rem 0 1rem;padding-top:1rem}
.section-head span{font-family:var(--mono);font-size:10px;letter-spacing:.2em;text-transform:uppercase;color:var(--text3);white-space:nowrap}
.section-head::after{content:'';flex:1;height:1px;background:var(--border)}

/* ARTICLE GRID */
.article-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:1.25rem;margin-bottom:2rem}
.related-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:1rem;margin-bottom:2rem}
.article-card{display:block;background:var(--bg2);border:1px solid var(--border);border-radius:4px;overflow:hidden;transition:border-color .2s,transform .15s;cursor:pointer}
.article-card:hover{border-color:var(--border2);transform:translateY(-2px)}
.card-thumb{aspect-ratio:16/9;overflow:hidden;background:var(--bg3)}
.card-thumb img{width:100%;height:100%;object-fit:cover;transition:transform .3s}
.article-card:hover .card-thumb img{transform:scale(1.03)}
.card-thumb img[src=""]{display:none}
.thumb-placeholder{width:100%;height:100%;background:linear-gradient(135deg,#0f1a2e 0%,#1a0f3a 100%)}
/* Hide broken images and show placeholder gradient instead */
img{background:linear-gradient(135deg,#0f1a2e 0%,#1a0f3a 100%)}
img::before{content:'';display:block;width:100%;height:100%;background:linear-gradient(135deg,#0f1a2e,#1a0f3a)}
.card-body{padding:.875rem}
.card-body h3{font-size:14px;font-weight:500;line-height:1.35;margin:.3rem 0 .5rem}
.card-body p{font-size:12px;color:var(--text2);line-height:1.6;margin-bottom:.4rem;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}

/* BADGES & LABELS */
.cat-badge{display:inline-block;font-family:var(--mono);font-size:9px;letter-spacing:.15em;text-transform:uppercase;color:var(--cc,var(--accent));background:rgba(0,200,130,.08);border:1px solid currentColor;border-radius:2px;padding:2px 8px}
.cat-label{font-family:var(--mono);font-size:9px;letter-spacing:.15em;text-transform:uppercase;display:block;margin-bottom:3px}
.article-meta,.meta-sm{font-size:11px;color:var(--text3);font-family:var(--mono)}
.article-meta-row{display:flex;gap:1.25rem;flex-wrap:wrap;margin-top:.5rem}
.article-meta-row span,.article-meta-row a{font-family:var(--mono);font-size:11px;color:var(--text3)}
.article-meta-row a{color:var(--accent)}

/* SIDEBAR WIDGETS */
.widget{background:var(--bg2);border:1px solid var(--border);border-radius:4px;overflow:hidden}
.widget-title{font-family:var(--mono);font-size:9px;letter-spacing:.2em;text-transform:uppercase;color:var(--text3);padding:.6rem 1rem;border-bottom:1px solid var(--border)}
.pop-item{display:flex;gap:.6rem;padding:.75rem 1rem;border-bottom:1px solid var(--border);cursor:pointer;transition:background .15s}
.pop-item:last-child{border-bottom:none}
.pop-item:hover{background:var(--bg3)}
.pop-thumb{width:56px;height:40px;flex-shrink:0;border-radius:2px;overflow:hidden;background:var(--bg3)}
.pop-body h4{font-size:12px;font-weight:500;line-height:1.3;margin:.2rem 0 .2rem}
.latest-side-item{display:block;padding:.75rem 1rem;border-bottom:1px solid var(--border);cursor:pointer;transition:background .15s}
.latest-side-item:last-child{border-bottom:none}
.latest-side-item:hover{background:var(--bg3)}
.latest-side-item h4{font-size:12px;font-weight:500;line-height:1.3;margin:.2rem 0 .2rem}
.newsletter-widget{padding:1rem}
.newsletter-widget p{font-size:12px;color:var(--text2);line-height:1.6;margin:.5rem 0 .75rem}
.rss-btn{display:inline-block;font-family:var(--mono);font-size:10px;letter-spacing:.1em;color:var(--accent);border:1px solid var(--accent);padding:5px 12px;border-radius:2px;transition:background .2s,color .2s}
.rss-btn:hover{background:var(--accent);color:#000}

/* ADS */
.ad-unit{min-height:100px;background:var(--bg2);border:1px dashed var(--border);border-radius:4px;display:flex;align-items:center;justify-content:center}

/* ARTICLE PAGE */
.article-page{padding-bottom:2rem}
.article-header{margin-bottom:1.5rem;padding-bottom:1rem;border-bottom:1px solid var(--border)}
.article-header h1{font-size:clamp(1.5rem,3vw,2.2rem);font-weight:700;line-height:1.2;margin:.75rem 0}
.article-hero-img{position:relative;margin-bottom:1.5rem;border-radius:4px;overflow:hidden;aspect-ratio:16/9}
.article-hero-img img{width:100%;height:100%;object-fit:cover}
.img-credit{position:absolute;bottom:.5rem;right:.5rem;font-size:10px;color:rgba(255,255,255,.6);background:rgba(0,0,0,.5);padding:2px 6px;border-radius:2px}
.img-credit a{color:inherit}
.tweet-link{font-family:var(--mono);font-size:11px;color:var(--accent)}

.article-body{font-size:17px;line-height:1.85;color:#d0d0d0}
.article-body h2{font-size:1.25rem;font-weight:700;color:var(--text);margin:2rem 0 .75rem;padding-top:1.5rem;border-top:1px solid var(--border)}
.article-body h3{font-size:1.05rem;font-weight:500;color:var(--text);margin:1.5rem 0 .5rem}
.article-body p{margin-bottom:1.25rem}
.article-body strong{color:var(--text);font-weight:500}
.article-body a{color:var(--accent);border-bottom:1px solid rgba(0,200,130,.3)}
.article-body ul,.article-body ol{padding-left:1.5rem;margin-bottom:1.25rem}
.article-body li{margin-bottom:.4rem}
.article-body blockquote{border-left:3px solid var(--accent);padding:.75rem 1.25rem;margin:1.5rem 0;background:var(--accent-dim);border-radius:0 4px 4px 0;color:var(--text2);font-style:italic}
.article-body code{font-family:var(--mono);font-size:13px;background:var(--bg3);padding:2px 6px;border-radius:3px;color:var(--accent)}

/* ABOUT */
.about-stats{display:grid;grid-template-columns:repeat(4,1fr);gap:1rem;margin:2rem 0}
.stat-box{background:var(--bg2);border:1px solid var(--border);border-radius:4px;padding:1rem;text-align:center}
.stat-num{font-size:1.8rem;font-weight:700;color:var(--accent)}
.stat-label{font-family:var(--mono);font-size:10px;color:var(--text3);letter-spacing:.1em;margin-top:.25rem}

/* SEARCH / EMPTY */
.no-results{color:var(--text2);padding:2rem 0;font-size:15px}
.empty-state{text-align:center;padding:4rem 2rem;color:var(--text2)}
.empty-icon{font-size:3rem;margin-bottom:1rem}
.empty-state h2{font-size:1.4rem;color:var(--text);margin-bottom:.75rem}

/* RELATED */
.related-section{border-top:1px solid var(--border);padding-top:1.5rem;margin-top:1.5rem}

/* FOOTER */
footer{background:#050508;border-top:1px solid var(--border);padding:2.5rem 1.5rem;text-align:center;margin-top:2rem}
.footer-inner{max-width:500px;margin:0 auto}
.footer-brand{font-size:1.4rem;font-weight:700;letter-spacing:-.02em;margin-bottom:.75rem}
footer p{font-size:12px;color:var(--text3);line-height:1.7;margin-bottom:.75rem}
.footer-links{display:flex;gap:1.5rem;justify-content:center;margin:1rem 0}
.footer-links a{font-family:var(--mono);font-size:10px;letter-spacing:.12em;text-transform:uppercase;color:var(--text3);transition:color .2s}
.footer-links a:hover{color:var(--accent)}
.footer-copy{font-size:11px}

/* RESPONSIVE */
@media(max-width:1024px){
  .site-wrap{grid-template-columns:1fr}
  .main-col{padding-right:0;border-right:none}
  .side-col{padding-left:0;display:grid;grid-template-columns:1fr 1fr;gap:1rem}
}
@media(max-width:768px){
  .hero-link{grid-template-columns:1fr}
  .featured-stack{grid-template-columns:1fr 1fr}
  .article-grid{grid-template-columns:1fr}
  .related-grid{grid-template-columns:1fr 1fr}
  .about-stats{grid-template-columns:1fr 1fr}
  .header-meta .rss-link{display:none}
  .topbar-right{display:none}
}
@media(max-width:480px){
  .featured-stack{grid-template-columns:1fr}
  .related-grid{grid-template-columns:1fr}
  .about-stats{grid-template-columns:1fr 1fr}
  .side-col{grid-template-columns:1fr}
}

/* REFERENCES SECTION */
.article-body h2:has(+ ol li a),
.article-body h2 + ol {
  font-size: 14px;
}

.references-section {
  margin-top: 2rem;
  padding-top: 1.5rem;
  border-top: 1px solid var(--border);
}

.article-body ol li,
.article-body ul li {
  font-size: 15px;
  line-height: 1.6;
  margin-bottom: .5rem;
  color: var(--text2);
}

/* Style the References heading differently */
.article-body h2:last-of-type {
  font-size: 1rem;
  color: var(--text3);
  letter-spacing: .1em;
  font-family: var(--mono);
  text-transform: uppercase;
  font-weight: 400;
  border-top: 1px solid var(--border);
  padding-top: 1.5rem;
  margin-top: 2rem;
}

/* Inline citation links like [[1]] */
.article-body a[href^="#ref"] {
  font-family: var(--mono);
  font-size: 11px;
  color: var(--accent);
  border-bottom: none;
  vertical-align: super;
  padding: 0 2px;
  opacity: .8;
}

.article-body a[href^="#ref"]:hover {
  opacity: 1;
}

/* Reference list links */
.article-body .references a,
.article-body ol a {
  color: var(--accent);
  border-bottom: 1px solid rgba(0,200,130,.2);
  word-break: break-all;
  font-size: 13px;
}

.article-body ol a:hover {
  border-bottom-color: var(--accent);
}