/* Jack Bodenstein Magic — Vegas Showroom Theme */
@import url('https://fonts.googleapis.com/css2?family=Playfair+Display:ital,wght@0,700;0,900;1,400&family=Lato:wght@300;400;700&display=swap');

* { margin: 0; padding: 0; box-sizing: border-box; }

body {
  font-family: 'Lato', sans-serif;
  font-weight: 300;
  color: #f0e6ff;
  background: #12082a;
  background-image:
    radial-gradient(ellipse at 20% 0%, rgba(180,60,255,0.18) 0%, transparent 55%),
    radial-gradient(ellipse at 80% 0%, rgba(255,180,0,0.12) 0%, transparent 55%),
    radial-gradient(ellipse at 50% 100%, rgba(120,0,200,0.15) 0%, transparent 60%);
}

header {
  background: linear-gradient(160deg, #1e0a40 0%, #2d0e5a 40%, #1a0630 100%);
  padding: 70px 20px 60px;
  text-align: center;
  position: relative;
  overflow: hidden;
  border-bottom: 1px solid rgba(255,190,0,0.3);
}
header::before {
  content: '';
  position: absolute; inset: 0;
  background:
    radial-gradient(ellipse at 50% 0%, rgba(255,200,0,0.22) 0%, transparent 60%),
    radial-gradient(ellipse at 20% 50%, rgba(200,80,255,0.15) 0%, transparent 50%),
    radial-gradient(ellipse at 80% 50%, rgba(255,100,200,0.12) 0%, transparent 50%);
  pointer-events: none;
}
header h1 {
  font-family: 'Playfair Display', serif;
  font-size: 2.8em;
  font-weight: 900;
  color: #fff;
  letter-spacing: 3px;
  text-transform: uppercase;
  position: relative;
  text-shadow: 0 0 40px rgba(255,200,0,0.5), 0 0 80px rgba(180,60,255,0.3);
}
header p {
  color: rgba(255,220,150,0.88);
  font-style: italic;
  font-family: 'Playfair Display', serif;
  margin-top: 10px;
  position: relative;
}

nav {
  background: rgba(18,8,42,0.97);
  padding: 16px 0;
  text-align: center;
  border-bottom: 1px solid rgba(180,60,255,0.25);
  position: sticky; top: 0; z-index: 100;
  box-shadow: 0 2px 30px rgba(120,0,200,0.2);
}
nav a {
  color: rgba(255,210,100,0.9);
  text-decoration: none;
  margin: 0 20px;
  font-size: 0.78em;
  text-transform: uppercase;
  letter-spacing: 2px;
  font-weight: 400;
  transition: color 0.3s, text-shadow 0.3s;
}
nav a:hover { color: #fff; text-shadow: 0 0 12px rgba(255,200,0,0.7); }

.container { max-width: 860px; margin: 0 auto; padding: 60px 24px; }

h2 {
  font-family: 'Playfair Display', serif;
  color: #ffd966;
  font-size: 1.9em;
  margin-bottom: 20px;
  letter-spacing: 1px;
  text-shadow: 0 0 20px rgba(255,200,0,0.2);
}
h3 { font-family: 'Playfair Display', serif; color: #e0c8ff; font-size: 1.3em; margin-bottom: 12px; }
p { color: rgba(225,210,255,0.82); line-height: 1.85; margin-bottom: 15px; font-size: 1.05em; }
a { color: #ffc84a; text-decoration: none; transition: color 0.2s; }
a:hover { color: #fff; }
a.il { color: #ffc84a; border-bottom: 1px dotted rgba(255,200,0,0.4); }
a.il:hover { color: #fff; border-bottom-color: #fff; }
strong { color: #ffd966; }
img { max-width: 100%; display: block; }

/* Blog index */
.post-preview {
  margin-bottom: 44px;
  padding-bottom: 44px;
  border-bottom: 1px solid rgba(180,60,255,0.18);
}
.post-preview h2 a {
  color: #ffd966;
  font-size: 1.4em;
  text-shadow: none;
}
.post-preview h2 a:hover { color: #fff; }
.post-preview .date { color: rgba(200,180,240,0.5); font-size: 0.88em; margin: 8px 0 12px; letter-spacing: 1px; }
.read-more { color: #ffc84a; font-size: 0.88em; letter-spacing: 1px; text-transform: uppercase; }
.read-more:hover { color: #fff; }

/* Article */
.article-hero {
  width: 100%;
  max-height: 400px;
  object-fit: cover;
  border-radius: 4px;
  margin-bottom: 36px;
  border: 1px solid rgba(180,60,255,0.25);
  box-shadow: 0 8px 50px rgba(120,0,200,0.3);
}
.post-meta { color: rgba(200,180,240,0.5); font-size: 0.85em; margin-bottom: 28px; letter-spacing: 1px; }

footer {
  background: #0a0418;
  border-top: 1px solid rgba(255,190,0,0.15);
  text-align: center;
  padding: 44px 24px;
  color: rgba(180,160,220,0.5);
  font-size: 0.9em;
}
footer p { margin-bottom: 10px; color: rgba(180,160,220,0.5); }
footer a { color: rgba(255,200,80,0.7); }
footer a:hover { color: #ffd966; }

@media (max-width: 600px) {
  header h1 { font-size: 1.9em; }
  nav a { margin: 0 10px; font-size: 0.72em; }
}