/* Shared stylesheet for every journal article.
   Was inlined identically in all 18 pages (292KB total); extracting it means
   the browser fetches it once and reuses it for every subsequent article.
   Block order is preserved exactly as it appeared in the head, so the
   cascade is unchanged. */

/* ==================== RESET & BASE ==================== */
*, *::before, *::after { margin:0; padding:0; box-sizing:border-box; }
:root {
  --deep-space: #030014;
  --void: #0a0520;
  --nebula-purple: #6b21a8;
  --nebula-blue: #1e40af;
  --cosmic-gold: #f59e0b;
  --stellar-cyan: #06b6d4;
  --star-white: #f0e6ff;
  --astral-pink: #c084fc;
  --nova-orange: #f97316;
  --text-primary: #ede9fe;
  --text-secondary: #a5b4fc;
  --text-muted: #7c83a8;
  --glass-bg: rgba(10, 5, 32, 0.6);
  --glass-border: rgba(167, 139, 250, 0.15);
  --glass-hover: rgba(167, 139, 250, 0.25);
  --glow-purple: 0 0 30px rgba(139, 92, 246, 0.3);
  --glow-gold: 0 0 30px rgba(245, 158, 11, 0.3);
  --transition: 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}
html { scroll-behavior: smooth; scrollbar-width: thin; scrollbar-color: var(--nebula-purple) var(--deep-space); }
body {
  font-family: 'Inter', sans-serif;
  background: var(--deep-space);
  color: var(--text-primary);
  overflow-x: hidden;
  line-height: 1.6;
}
a { text-decoration: none; color: inherit; }
img { max-width: 100%; display: block; }

/* ==================== STARFIELD BACKGROUND ==================== */
.starfield {
  position: fixed; inset: 0; z-index: 0; pointer-events: none;
  background: url('/bg-starfield.webp') repeat center center;
  background-size: cover;
}
.starfield::after {
  content:''; position:absolute; inset:0;
  background: radial-gradient(ellipse at 20% 50%, rgba(107,33,168,0.06) 0%, transparent 60%),
              radial-gradient(ellipse at 80% 30%, rgba(30,64,175,0.05) 0%, transparent 60%);
  animation: nebulaPulse 12s ease-in-out infinite alternate;
}
@keyframes nebulaPulse {
  0% { opacity: 0.5; } 100% { opacity: 1; }
}

/* ==================== NAVIGATION ==================== */
.nav {
  position: fixed; top: 0; left: 0; right: 0; z-index: 1000;
  padding: 16px 40px;
  display: flex; align-items: center; justify-content: space-between;
  transition: var(--transition);
  background: rgba(3,0,20,0.88);
  backdrop-filter: blur(20px);
  border-bottom: 1px solid var(--glass-border);
}
.nav-logo img { height: 36px; width: auto; transition: var(--transition); }
.nav-links { display: flex; gap: 36px; align-items: center; }
.nav-links a {
  font-family: 'Rajdhani', sans-serif;
  font-size: 0.95rem; font-weight: 500;
  letter-spacing: 2px; text-transform: uppercase;
  color: var(--text-secondary);
  transition: var(--transition);
  position: relative;
}
.nav-links a::after {
  content:''; position: absolute; bottom: -4px; left: 0;
  width: 0; height: 2px;
  background: linear-gradient(90deg, var(--astral-pink), var(--cosmic-gold));
  transition: var(--transition);
}
.nav-links a:hover { color: white; }
.nav-links a:hover::after { width: 100%; }
.nav-links a.active { color: white; }
.nav-links a.active::after { width: 100%; }
.nav-hamburger { display: none; flex-direction: column; gap: 5px; cursor: pointer; padding: 8px; }
.nav-hamburger span { width: 24px; height: 2px; background: var(--text-secondary); transition: var(--transition); }

/* ==================== BLOG HERO ==================== */
.blog-hero {
  position: relative; z-index: 1;
  padding: 160px 40px 80px;
  text-align: center;
  background: linear-gradient(to bottom, rgba(3,0,20,0.3) 0%, rgba(3,0,20,0.7) 100%);
}
.blog-hero-title {
  font-family: 'Orbitron', sans-serif;
  font-size: clamp(2rem, 5vw, 3.5rem);
  font-weight: 800;
  letter-spacing: 6px;
  line-height: 1.1;
  background: linear-gradient(135deg, #fff 0%, #e0d0ff 30%, #c084fc 50%, #a78bfa 70%, #fff 100%);
  background-size: 200% 200%;
  -webkit-background-clip: text; -webkit-text-fill-color: transparent;
  background-clip: text;
  animation: shimmer 6s ease-in-out infinite;
  filter: drop-shadow(0 0 40px rgba(139,92,246,0.3));
  margin-bottom: 16px;
}
@keyframes shimmer {
  0%, 100% { background-position: 0% 50%; }
  50% { background-position: 100% 50%; }
}
.blog-hero-tagline {
  font-family: 'Rajdhani', sans-serif;
  font-size: clamp(0.9rem, 2vw, 1.2rem);
  font-weight: 400;
  letter-spacing: 4px;
  text-transform: uppercase;
  color: var(--text-secondary);
  max-width: 600px;
  margin: 0 auto;
}

/* ==================== TABLE OF CONTENTS ==================== */
.toc {
  position: relative; z-index: 1;
  max-width: 800px; margin: 0 auto 60px;
  padding: 32px 36px;
  background: var(--glass-bg);
  border: 1px solid var(--glass-border);
  border-radius: 20px;
  backdrop-filter: blur(12px);
}
.toc-title {
  font-family: 'Rajdhani', sans-serif;
  font-size: 0.85rem; font-weight: 700;
  letter-spacing: 3px; text-transform: uppercase;
  color: var(--cosmic-gold);
  margin-bottom: 16px;
}
.toc-list {
  list-style: none; display: flex; flex-direction: column; gap: 12px;
}
.toc-list li { display: flex; align-items: baseline; gap: 12px; }
.toc-list .toc-num {
  font-family: 'Orbitron', sans-serif;
  font-size: 0.75rem; font-weight: 600;
  color: var(--astral-pink);
  min-width: 24px;
}
.toc-list a {
  color: var(--text-secondary);
  font-size: 1rem;
  transition: var(--transition);
  border-bottom: 1px solid transparent;
}
.toc-list a:hover { color: white; border-bottom-color: var(--astral-pink); }
.toc-meta {
  font-size: 0.8rem; color: var(--text-muted); margin-left: auto; white-space: nowrap;
}

/* ==================== ARTICLE STYLES ==================== */
.blog-content {
  position: relative; z-index: 1;
  max-width: 800px;
  margin: 0 auto;
  padding: 0 40px 80px;
}
.blog-article {
  margin-bottom: 80px;
  padding-bottom: 80px;
  border-bottom: 1px solid var(--glass-border);
}
.blog-article:last-child {
  border-bottom: none;
  margin-bottom: 0;
  padding-bottom: 40px;
}
.article-header {
  margin-bottom: 36px;
}
.article-meta {
  display: flex; gap: 20px; align-items: center;
  font-family: 'Rajdhani', sans-serif;
  font-size: 0.85rem; font-weight: 500;
  letter-spacing: 1px;
  color: var(--text-muted);
  margin-bottom: 16px;
}
.article-meta .meta-date { color: var(--stellar-cyan); }
.article-meta .meta-read { color: var(--cosmic-gold); }
.article-title {
  font-family: 'Orbitron', sans-serif;
  font-size: clamp(1.4rem, 3.5vw, 2rem);
  font-weight: 700;
  letter-spacing: 2px;
  line-height: 1.3;
  color: white;
  margin-bottom: 8px;
}
.article-keywords {
  display: flex; flex-wrap: wrap; gap: 8px; margin-top: 16px;
}
.article-keywords span {
  font-family: 'Rajdhani', sans-serif;
  font-size: 0.75rem; font-weight: 500;
  letter-spacing: 1px; text-transform: uppercase;
  padding: 4px 12px;
  border-radius: 50px;
  border: 1px solid var(--glass-border);
  color: var(--text-muted);
  background: rgba(10, 5, 32, 0.4);
}

/* Article body typography */
.article-body h3 {
  font-family: 'Orbitron', sans-serif;
  font-size: 1.15rem;
  font-weight: 600;
  letter-spacing: 1px;
  color: var(--astral-pink);
  margin: 40px 0 16px;
}
.article-body p {
  color: var(--text-secondary);
  font-size: 1.02rem;
  line-height: 1.85;
  margin-bottom: 20px;
}
.article-body strong {
  color: var(--text-primary);
  font-weight: 600;
}
.article-body ul, .article-body ol {
  color: var(--text-secondary);
  font-size: 1.02rem;
  line-height: 1.85;
  margin: 0 0 20px 24px;
}
.article-body li {
  margin-bottom: 8px;
}
.article-body a {
  color: var(--stellar-cyan);
  border-bottom: 1px solid rgba(6, 182, 212, 0.3);
  transition: var(--transition);
}
.article-body a:hover {
  color: white;
  border-bottom-color: var(--stellar-cyan);
}
.article-body .highlight-box {
  padding: 24px 28px;
  margin: 28px 0;
  background: var(--glass-bg);
  border: 1px solid var(--glass-border);
  border-left: 3px solid var(--cosmic-gold);
  border-radius: 12px;
  backdrop-filter: blur(8px);
}
.article-body .highlight-box p {
  margin-bottom: 0;
  color: var(--text-primary);
  font-size: 0.95rem;
}
.article-body .highlight-box strong {
  color: var(--cosmic-gold);
}

/* Article CTA */
.article-cta {
  margin-top: 40px;
  padding: 32px;
  background: var(--glass-bg);
  border: 1px solid var(--glass-border);
  border-radius: 16px;
  backdrop-filter: blur(12px);
  text-align: center;
}
.article-cta p {
  font-family: 'Rajdhani', sans-serif;
  font-size: 1.1rem;
  font-weight: 500;
  color: var(--text-primary);
  margin-bottom: 16px;
  letter-spacing: 1px;
}
.btn-primary {
  display: inline-block;
  padding: 14px 36px;
  border-radius: 50px;
  font-family: 'Rajdhani', sans-serif;
  font-weight: 600; font-size: 1rem;
  letter-spacing: 2px; text-transform: uppercase;
  background: linear-gradient(135deg, var(--nebula-purple), var(--nebula-blue));
  color: white;
  border: 1px solid rgba(139,92,246,0.5);
  transition: var(--transition);
}
.btn-primary:hover {
  box-shadow: var(--glow-purple);
  transform: translateY(-2px);
  border-bottom: none;
}

/* ==================== DIVIDER ==================== */
.cosmic-divider {
  height: 1px; border: none;
  background: linear-gradient(90deg, transparent, var(--glass-border), var(--astral-pink), var(--glass-border), transparent);
  margin: 0; position: relative; z-index: 1;
}

/* ==================== FOOTER ==================== */
.footer {
  position: relative; z-index: 1;
  padding: 80px 40px 32px;
  border-top: 1px solid var(--glass-border);
  background: rgba(3,0,20,0.8);
}
.footer-grid {
  display: grid; grid-template-columns: 2fr 1fr 1fr 1fr;
  gap: 48px; max-width: 1200px; margin: 0 auto 64px;
}
.footer-brand-logo { height: 32px; width: auto; margin-bottom: 16px; }
.footer-brand p { color: var(--text-muted); font-size: 0.95rem; max-width: 300px; line-height: 1.7; }
.footer-col h4 {
  font-family: 'Rajdhani', sans-serif;
  font-size: 0.85rem; font-weight: 700;
  letter-spacing: 3px; text-transform: uppercase;
  color: var(--text-secondary);
  margin-bottom: 20px;
}
.footer-col a {
  display: block; color: var(--text-muted);
  font-size: 0.9rem; margin-bottom: 12px;
  transition: var(--transition);
}
.footer-col a:hover { color: var(--astral-pink); }
.footer-bottom {
  max-width: 1200px; margin: 0 auto;
  padding-top: 32px;
  border-top: 1px solid var(--glass-border);
  display: flex; justify-content: space-between; align-items: center;
  flex-wrap: wrap; gap: 16px;
}
.footer-bottom p { color: var(--text-muted); font-size: 0.8rem; }
.footer-legal { display: flex; gap: 24px; }
.footer-legal a { color: var(--text-muted); font-size: 0.8rem; transition: var(--transition); }
.footer-legal a:hover { color: var(--text-secondary); }

/* ==================== BACK TO TOP ==================== */
.back-to-top {
  position: fixed; bottom: 32px; right: 32px; z-index: 900;
  width: 48px; height: 48px; border-radius: 50%;
  background: var(--glass-bg);
  border: 1px solid var(--glass-border);
  backdrop-filter: blur(12px);
  display: flex; align-items: center; justify-content: center;
  color: var(--text-secondary);
  font-size: 1.2rem;
  cursor: pointer;
  opacity: 0; pointer-events: none;
  transition: var(--transition);
}
.back-to-top.visible { opacity: 1; pointer-events: all; }
.back-to-top:hover {
  border-color: var(--astral-pink);
  color: white;
  transform: translateY(-3px);
}

/* ==================== RESPONSIVE ==================== */
@media (max-width: 1024px) {
  .footer-grid { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 768px) {
  .nav { padding: 12px 20px; }
  .nav-links {
    display: none; position: fixed; top: 0; left: 0; right: 0; bottom: 0;
    flex-direction: column; gap: 0; background: rgba(3,0,20,0.97);
    backdrop-filter: blur(20px); padding: 100px 40px 40px;
    align-items: flex-start;
  }
  .nav-links.open { display: flex; }
  .nav-links a { font-size: 1.5rem; padding: 12px 0; }
  .nav-hamburger { display: flex; z-index: 1001; }
  .blog-hero { padding: 120px 20px 60px; }
  .blog-content { padding: 0 20px 60px; }
  .toc { margin: 0 20px 40px; padding: 24px 20px; }
  .article-meta { flex-wrap: wrap; gap: 12px; }
  .article-keywords { gap: 6px; }
  .article-cta { padding: 24px 20px; }
  .footer-grid { grid-template-columns: 1fr; gap: 32px; }
  .footer-bottom { flex-direction: column; text-align: center; }
  .footer { padding: 60px 20px 24px; }
  .toc-meta { display: none; }
}

/* ---- Age gate (21+) ---- */
.age-gate {
  position: fixed; inset: 0; z-index: 10000;
  background: rgba(3,0,20,0.97);
  display: flex; align-items: center; justify-content: center;
  backdrop-filter: blur(20px); padding: 24px;
}
.age-gate.hidden { display: none; }
.age-gate-box {
  text-align: center; max-width: 460px; padding: 44px 36px;
  background: rgba(255,255,255,0.04); border: 1px solid rgba(255,255,255,0.1);
  border-radius: 24px; box-shadow: 0 0 40px rgba(139,92,246,0.2);
}
.age-gate-box img { max-width: 200px; margin: 0 auto 22px; display: block; }
.age-gate-box p { color: #b9b3d0; margin-bottom: 28px; }
.age-gate-btns { display: flex; gap: 14px; justify-content: center; flex-wrap: wrap; }
.age-gate-btns button {
  padding: 13px 36px; border-radius: 50px; font-weight: 600; font-size: 0.95rem;
  letter-spacing: 1px; text-transform: uppercase; cursor: pointer;
}
.age-gate-btns .btn-yes { background: linear-gradient(135deg, #8b5cf6, #3b82f6); color: white; border: 1px solid rgba(139,92,246,0.5); }
.age-gate-btns .btn-no { background: transparent; color: #8a83a3; border: 1px solid rgba(255,255,255,0.1); }

/* ---- Sitewide compliance footer ---- */
.compliance {
  max-width: 900px; margin: 60px auto 0; padding: 24px;
  border-top: 1px solid rgba(255,255,255,0.1);
  text-align: center; font-size: 0.78rem; line-height: 1.7; color: #8a83a3;
}
.compliance p { margin: 0 0 10px; color: #8a83a3; font-size: 0.78rem; line-height: 1.7; }
.compliance p:last-child { margin-bottom: 0; }
.compliance a { color: #b9b3d0; margin: 0 6px; text-decoration: none; }
.compliance a:hover { color: #fff; }

body { background: var(--deep-space) url('/bg-starfield.webp') center/cover fixed; } /* article-page-bg */
.article-hero { padding:150px 24px 30px; max-width:820px; margin:0 auto; }
.crumb { font-family:'Rajdhani',sans-serif; font-weight:600; font-size:0.78rem; letter-spacing:2px; text-transform:uppercase; color:var(--text-muted); margin-bottom:16px; }
.crumb a { color:var(--text-secondary); }
.crumb a:hover { color:var(--astral-pink); }
h1.article-title { font-family:'Orbitron',sans-serif; font-weight:800; font-size:clamp(1.6rem,4vw,2.4rem); line-height:1.25; color:#fff; margin:8px 0 14px; }
.single-wrap { max-width:820px; margin:0 auto; padding:0 24px 70px; }
.more-reading { max-width:820px; margin:0 auto; padding:0 24px 80px; }
.more-reading h2 { font-family:'Orbitron',sans-serif; font-size:1.05rem; color:#fff; margin-bottom:16px; }
.more-reading ul { list-style:none; }
.more-reading li { padding:14px 0; border-bottom:1px solid var(--glass-border); display:flex; justify-content:space-between; gap:16px; flex-wrap:wrap; }
.more-reading a { color:var(--text-secondary); font-family:'Rajdhani',sans-serif; font-weight:600; font-size:1rem; }
.more-reading a:hover { color:var(--astral-pink); }

/* Compliance footer - solid panel so required disclosures stay legible over the starfield */
#siteCompliance {
  max-width: 940px; margin: 60px auto 0; padding: 28px 30px 26px;
  background: rgba(8, 4, 26, 0.92);
  border: 1px solid rgba(255,255,255,0.09); border-top: 1px solid rgba(139,92,246,0.25);
  border-radius: 18px; position: relative; z-index: 2;
  text-align: center; color: #9d96b8;
}
#siteCompliance p { margin: 0 0 11px; font-size: 0.76rem; line-height: 1.75; color: #9d96b8; }
#siteCompliance p:last-child { margin-bottom: 0; }
#siteCompliance strong { color: #cfc9e6; }
#siteCompliance a { color: #b9b3d0; margin: 0 5px; text-decoration: none; border-bottom: 1px solid rgba(185,179,208,0.25); }
#siteCompliance a:hover { color: #fff; border-bottom-color: #fff; }
@media (max-width: 600px) {
  #siteCompliance { margin: 40px 14px 0; padding: 22px 18px; border-radius: 14px; }
}

.community-cta {
  max-width: 760px; margin: 36px auto 0; padding: 26px 28px;
  background: rgba(88,101,242,0.07);
  border: 1px solid rgba(88,101,242,0.28);
  border-radius: 16px; text-align: center;
}
.community-cta h3 {
  font-family: 'Rajdhani', sans-serif; font-size: 1.1rem; color: #fff;
  margin-bottom: 8px; letter-spacing: 0.5px;
}
.community-cta p { color: var(--text-secondary); font-size: 0.92rem; line-height: 1.65; margin-bottom: 16px; }
.community-cta a.btn-discord {
  display: inline-block; padding: 12px 30px; border-radius: 50px;
  background: #5865F2; color: #fff; text-decoration: none;
  font-family: 'Rajdhani', sans-serif; font-weight: 700;
  letter-spacing: 1.2px; text-transform: uppercase; font-size: 0.85rem;
  transition: var(--transition);
}
.community-cta a.btn-discord:hover { background: #4752c4; transform: translateY(-2px); }