/* =====================================================
   STRIP THE SCRIPT — BLOG ARTICLE STYLES
   Shared stylesheet for standalone blog post pages
===================================================== */

:root {
  --black:   #090909;
  --ink:     #111111;
  --dark:    #181818;
  --border:  #272727;
  --mid:     #333;
  --muted:   #666;
  --light:   #999;
  --offwhite:#e8e4dc;
  --white:   #ffffff;
  --red:     #d42b2b;
  --red2:    #ff3c3c;
  --nav-h:   76px;
  --max:     1300px;
  --content: 760px;
}

*, *::before, *::after { box-sizing:border-box; margin:0; padding:0; }
html { scroll-behavior:smooth; }

body {
  background: var(--black);
  color: var(--white);
  font-family: 'Inter', sans-serif;
  font-size: 16px;
  line-height: 1.6;
  overflow-x: hidden;
  -webkit-font-smoothing: antialiased;
}

a { color:inherit; text-decoration:none; }
img { display:block; max-width:100%; }

/* Noise overlay */
body::after {
  content:'';
  position:fixed; inset:0;
  background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 200 200' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.75' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='1'/%3E%3C/svg%3E");
  opacity:.035;
  pointer-events:none;
  z-index:9998;
}

/* =====================================================
   NAV
===================================================== */
nav {
  position:fixed; top:0; left:0; right:0;
  height:var(--nav-h);
  z-index:1000;
  display:flex; align-items:center; justify-content:space-between;
  padding:0 40px;
  background: rgba(9,9,9,.93);
  backdrop-filter: blur(20px);
  border-bottom:1px solid var(--border);
}
.nav-logo img {
  height:36px; width:auto;
  filter: invert(1);
}
.nav-links {
  display:flex; align-items:center; gap:36px;
  list-style:none;
}
.nav-links a {
  font-size:.75rem; font-weight:600;
  letter-spacing:.18em; text-transform:uppercase;
  color:var(--light);
  transition:color .2s;
}
.nav-links a:hover { color:var(--white); }
.nav-cta {
  font-size:.72rem; font-weight:600;
  letter-spacing:.14em; text-transform:uppercase;
  padding:11px 24px;
  background: var(--red);
  color:var(--white);
  transition: background .2s;
  clip-path: polygon(0 0, calc(100% - 8px) 0, 100% 8px, 100% 100%, 8px 100%, 0 calc(100% - 8px));
}
.nav-cta:hover { background:var(--red2); }
.nav-ham { display:none; flex-direction:column; gap:5px; }
.nav-ham span { display:block; width:24px; height:2px; background:var(--white); }

@media(max-width:768px){
  nav { padding:0 18px; height:64px; }
  .nav-links, .nav-cta { display:none; }
  .nav-ham { display:flex; }
}

/* =====================================================
   ARTICLE HERO
===================================================== */
.article-hero {
  padding: calc(var(--nav-h) + 56px) 40px 40px;
  max-width: var(--content);
  margin: 0 auto;
}
.section-eyebrow {
  display:inline-flex; align-items:center; gap:10px;
  font-size:.68rem; font-weight:700;
  letter-spacing:.22em; text-transform:uppercase;
  color:var(--red);
  margin-bottom:20px;
}
.section-eyebrow::before {
  content:''; display:block;
  width:24px; height:2px; background:var(--red);
}
.article-title {
  font-family:'Bebas Neue', sans-serif;
  font-size:clamp(2.6rem,7vw,4.5rem);
  line-height:1.05;
  letter-spacing:.03em;
  margin-bottom:20px;
}
.article-title span { color:var(--red); }
.article-meta {
  display:flex; align-items:center; gap:16px;
  font-size:.8rem; color:var(--muted);
  margin-top:24px;
  padding-top:24px;
  border-top:1px solid var(--border);
}
.article-meta .dot {
  width:4px; height:4px; border-radius:50%;
  background:var(--border);
}

/* =====================================================
   ARTICLE BODY
===================================================== */
.article-body {
  max-width: var(--content);
  margin: 0 auto;
  padding: 0 40px 80px;
}
.article-body p {
  font-size: 1.02rem;
  color: var(--offwhite);
  line-height: 1.85;
  margin-bottom: 24px;
}
.article-body h2 {
  font-family:'Bebas Neue', sans-serif;
  font-size: clamp(1.8rem, 4vw, 2.6rem);
  letter-spacing:.03em;
  margin: 56px 0 20px;
  line-height: 1.15;
}
.article-body h3 {
  font-family:'Bebas Neue', sans-serif;
  font-size: clamp(1.3rem, 3vw, 1.7rem);
  letter-spacing:.03em;
  margin: 36px 0 14px;
  color: var(--offwhite);
}
.article-body strong { color:var(--white); font-weight:600; }
.article-body em { color: var(--offwhite); font-style: italic; }
.article-body ul, .article-body ol {
  margin: 0 0 24px 0;
  padding-left: 24px;
  color: var(--offwhite);
}
.article-body li {
  font-size: 1.02rem;
  line-height: 1.85;
  margin-bottom: 10px;
}
.article-body blockquote {
  border-left: 3px solid var(--red);
  padding: 4px 0 4px 24px;
  margin: 32px 0;
  font-family:'Permanent Marker', cursive;
  font-size: 1.2rem;
  color: var(--white);
  line-height: 1.6;
}
.pull-quote {
  font-family:'Bebas Neue', sans-serif;
  font-size: clamp(1.6rem, 4vw, 2.4rem);
  line-height: 1.25;
  letter-spacing:.02em;
  color: var(--white);
  margin: 48px 0;
  padding: 32px 0;
  border-top: 1px solid var(--border);
  border-bottom: 1px solid var(--border);
}
.pull-quote span { color: var(--red); }

/* Episode link card */
.ep-link-card {
  display:flex; align-items:center; gap:20px;
  background: var(--dark);
  border: 1px solid var(--border);
  padding: 20px 24px;
  margin: 32px 0;
  transition: border-color .2s, background .2s;
}
.ep-link-card:hover { border-color: var(--red); background: #1c1414; }
.ep-link-card .ep-tag {
  font-size:.62rem; font-weight:700;
  letter-spacing:.18em; text-transform:uppercase;
  color:var(--red);
  white-space: nowrap;
}
.ep-link-card .ep-link-title {
  font-family:'Bebas Neue', sans-serif;
  font-size: 1.3rem; letter-spacing:.03em;
  flex: 1;
}
.ep-link-card .ep-link-arrow {
  font-size: 1.2rem; color: var(--red);
  flex-shrink: 0;
}

/* CTA block */
.article-cta {
  margin: 64px 0 0;
  padding: 40px;
  background: var(--dark);
  border: 1px solid var(--border);
  text-align: center;
}
.article-cta h3 {
  font-family:'Bebas Neue', sans-serif;
  font-size: clamp(1.8rem, 4vw, 2.6rem);
  letter-spacing:.03em;
  margin: 0 0 12px;
  color: var(--white);
}
.article-cta p {
  font-size: .95rem; color: var(--light);
  margin: 0 0 24px;
  max-width: 480px;
  margin-left: auto; margin-right: auto;
}
.article-cta-actions {
  display: flex; gap: 12px; justify-content: center; flex-wrap: wrap;
}
.btn-primary, .btn-ghost {
  display:inline-flex; align-items:center; gap:8px;
  font-size:.75rem; font-weight:700;
  letter-spacing:.14em; text-transform:uppercase;
  padding:14px 28px;
  transition: background .2s, color .2s, border-color .2s;
}
.btn-primary {
  background: var(--red); color: var(--white);
  clip-path: polygon(0 0, calc(100% - 8px) 0, 100% 8px, 100% 100%, 8px 100%, 0 calc(100% - 8px));
}
.btn-primary:hover { background: var(--red2); }
.btn-ghost {
  border: 1.5px solid var(--border); color: var(--light);
}
.btn-ghost:hover { border-color: var(--white); color: var(--white); }

/* Related posts */
.related-section {
  max-width: var(--max);
  margin: 0 auto;
  padding: 0 40px 100px;
}
.related-section .section-eyebrow { margin-bottom: 28px; }
.related-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 3px;
  background: var(--border);
  border: 1px solid var(--border);
}
.related-card {
  background: var(--ink);
  padding: 28px;
  transition: background .25s;
}
.related-card:hover { background: var(--dark); }
.related-cat {
  font-size:.62rem; font-weight:700;
  letter-spacing:.18em; text-transform:uppercase;
  color:var(--red); margin-bottom:10px;
}
.related-title {
  font-family:'Bebas Neue', sans-serif;
  font-size: 1.3rem; letter-spacing:.03em;
  line-height:1.2; margin-bottom:10px;
}
.related-excerpt {
  font-size:.85rem; color:var(--muted); line-height:1.6;
}

@media(max-width:768px){
  .article-hero { padding: calc(64px + 32px) 18px 32px; }
  .article-body { padding: 0 18px 56px; }
  .related-section { padding: 0 18px 56px; }
  .related-grid { grid-template-columns: 1fr; }
  .article-cta { padding: 28px 20px; }
}

/* =====================================================
   FOOTER (simplified)
===================================================== */
footer {
  padding: 52px 40px 32px;
  border-top: 1px solid var(--border);
  max-width: var(--max);
  margin: 0 auto;
}
.footer-bottom {
  display:flex; align-items:center; justify-content:space-between;
  font-size:.78rem; color:var(--muted);
  flex-wrap: wrap; gap: 12px;
}
.footer-bottom a { color: var(--light); transition: color .2s; }
.footer-bottom a:hover { color: var(--white); }
@media(max-width:768px){
  footer { padding: 40px 18px 28px; }
  .footer-bottom { flex-direction: column; align-items: flex-start; gap: 10px; }
}