:root{
  --bg:#0b1220;
  --panel:#0f172a;
  --muted:#94a3b8;
  --text:#e5e7eb;
  --accent:#66e3ff;
  --brand:#7dd3fc;
  --radius:16px;
  --shadow:0 8px 24px rgba(0,0,0,.25);
}
*{box-sizing:border-box}
html,body{height:100%}
body{
  margin:0;
  font-family:Inter,system-ui,-apple-system,Segoe UI,Roboto,Arial,sans-serif;
  background:var(--bg);
  color:var(--text);
  -webkit-font-smoothing:antialiased;
  line-height:1.6;
}
a{color:var(--accent);text-decoration:none}
a:hover{text-decoration:underline}

/* Header */
.site-header{
  position:sticky;top:0;z-index:20;
  display:flex;align-items:center;justify-content:space-between;
  gap:16px;padding:14px 20px;background:rgba(15,23,42,.8);backdrop-filter:saturate(180%) blur(10px);
  border-bottom:1px solid #1f2937;
}
.brand{font-weight:700;font-size:20px;color:#fff}
.brand span{color:var(--brand)}
.site-nav{display:flex;gap:18px}
.site-nav a{color:#cbd5e1}
.site-nav a:hover{color:#fff}

#nav-toggle{display:none}
.burger{display:none;font-size:22px;cursor:pointer}

/* Hero */
.hero{
  max-width:1100px;margin:40px auto 10px;padding:0 20px 10px;
}
.hero h1{font-size:clamp(28px,4vw,44px);line-height:1.2;margin:0 0 8px}
.hero p{color:var(--muted);margin:0}

/* Article cards */
.articles{
  max-width:1100px;margin:14px auto 60px;padding:0 20px;
  display:grid;grid-template-columns:repeat(12,1fr);gap:22px;
}
.card{
  grid-column:span 12;background:var(--panel);border:1px solid #253046;border-radius:var(--radius);box-shadow:var(--shadow);
  display:grid;grid-template-columns:160px 1fr;overflow:hidden
}
.thumb{display:block;height:100%}
.thumb img{width:100%;height:100%;object-fit:cover}
.card-body{padding:16px}
.card h2{margin:0 0 6px;font-size:20px;line-height:1.35}
.meta{margin:0 0 8px;color:var(--muted);font-size:14px}
.excerpt{margin:0 0 12px;color:#cbd5e1}
.read{font-weight:600}
.site-footer{
  padding:26px 20px;border-top:1px solid #1f2937;background:#0e1526;color:#9fb0c2;text-align:center
}

/* Responsive */
@media (max-width:900px){
  .card{grid-template-columns:1fr}
}
@media (max-width:760px){
  .site-nav{display:none}
  #nav-toggle:checked ~ .site-nav{display:flex;flex-direction:column;position:absolute;top:56px;right:14px;background:#0f172a;padding:12px 14px;border:1px solid #253046;border-radius:12px}
  .burger{display:block;color:#cbd5e1}
}
@media (prefers-color-scheme:light){
  :root{--bg:#f6f7fb;--panel:#ffffff;--text:#111827;--muted:#6b7280;--accent:#0ea5e9;--brand:#0284c7}
  .site-header{background:rgba(255,255,255,.7);border-bottom:1px solid #e5e7eb}
  .site-footer{background:#f8fafc;border-top:1px solid #e5e7eb;color:#4b5563}
  .card{border-color:#e5e7eb}
}
/* Article cover image */
.hero-image {
  max-width: 1100px;
  margin: 0 auto 30px;
  padding: 0 20px;
}

.hero-image img {
  width: 100%;
  height: auto;
  border-radius: 16px;
  object-fit: cover;
  box-shadow: 0 10px 30px rgba(0,0,0,0.35);
}
/* Spacing between article meta line and intro paragraph */
h1 + p {
  margin-top: 0.3rem !important;     /* keeps meta close to title */
  margin-bottom: 1.6rem !important;  /* 👈 space BEFORE the intro para */
}
/* Limit width of article content for better readability */
main {
  max-width: 800px;            /* keeps lines readable */
  margin: 0 auto;              /* centers the content horizontally */
  padding: 0 1.5rem;           /* adds breathing space on smaller screens */
  line-height: 1.6;
}

/* Adjust intro paragraph slightly for clarity */
.article-intro {
  font-size: 1rem;
  color: #d1d5db;
  text-align: justify;         /* balanced, cleaner look */
}
body {
  background-color: #0b132b;  /* same navy as Coming Soon page */
  color: #e5e7eb;
  margin: 0;
  font-family: "Inter", system-ui, sans-serif;
}
html, body {
  background-color: #0b132b !important;
  height: 100%;
  margin: 0;
  padding: 0;
}
/* === GLOBAL DARK NAVY THEME === */
html, body {
  background-color: #0b132b;   /* consistent navy tone */
  color: #e5e7eb;              /* soft readable text */
  margin: 0;
  padding: 0;
  min-height: 100%;
  font-family: "Inter", system-ui, sans-serif;
}

/* === HEADER === */
header {
  background-color: #0b132b !important;
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.3);
}

/* === HERO IMAGE === */
.hero-image img {
  display: block;
  max-width: 100%;
  height: auto;
  border-radius: 8px;
  margin: 0 auto 20px auto;
  box-shadow: 0 0 30px rgba(0, 0, 0, 0.4);
}

/* === MAIN CONTENT === */
main {
  background-color: transparent !important;
  max-width: 800px;
  margin: 0 auto;
  padding: 20px 20px 60px 20px;
  line-height: 1.6;
}

/* === FOOTER === */
footer {
  background-color: #0b132b !important;
  color: #9ca3af;
  text-align: center;
  padding: 25px 0;
  font-size: 0.9rem;
  border-top: 1px solid rgba(255, 255, 255, 0.05);
}

/* === LINKS === */
a {
  color: #38bdf8;
  text-decoration: none;
}

a:hover {
  color: #7dd3fc;
  text-decoration: underline;
}

/* === REMOVE ANY LIGHT BANDS / BACKGROUND OVERRIDES === */
.article, .wrapper, .content, .section {
  background-color: transparent !important;
  box-shadow: none !important;
}