/* ============================================================
   IMMERSIVE SKIN — Single Story Page
   Dark hero → warm editorial content
   ============================================================ */

/* Hero — dark editorial moment */
body[data-skin="immersive"] .story-hero {
  background: var(--hero-bg);
}
body[data-skin="immersive"] .story-hero::after {
  background: linear-gradient(to top, var(--c-bg) 0%, transparent 100%);
}

/* Surface — warm editorial */
body[data-skin="immersive"] .story-surface {
  background: var(--c-surface);
  box-shadow: var(--shadow-lg);
  border: 1px solid var(--c-border);
}
body[data-skin="immersive"] .story-title {
  color: var(--c-text);
  font-family: var(--font-display);
  font-weight: 700;
  letter-spacing: -0.03em;
}
body[data-skin="immersive"] .story-meta {
  color: var(--c-text-muted);
  font-family: var(--font-main);
}

/* Content body */
body[data-skin="immersive"] .story-content {
  color: var(--c-text);
  font-family: var(--font-main);
  line-height: 1.8;
}
body[data-skin="immersive"] .story-content h2,
body[data-skin="immersive"] .story-content h3 {
  font-family: var(--font-display);
  color: var(--c-text);
}
body[data-skin="immersive"] .story-content a {
  color: var(--c-accent);
  text-decoration-color: rgba(194,112,62,0.3);
}
body[data-skin="immersive"] .story-content a:hover {
  text-decoration-color: var(--c-accent);
}

/* Blockquote */
body[data-skin="immersive"] .story-content blockquote {
  background: var(--c-bg);
  border-inline-start: 3px solid var(--c-accent);
  color: var(--c-text-muted);
}

/* Tags — consistent with system */
body[data-skin="immersive"] .story-ftag {
  background: var(--c-bg);
  border: 1px solid var(--c-border);
  color: var(--c-text);
  font-family: var(--font-main);
  transition: all var(--duration-fast) ease;
}
body[data-skin="immersive"] .story-ftag:hover {
  background: var(--c-primary);
  border-color: var(--c-primary);
  color: #fff;
}

/* Lightbox */
body[data-skin="immersive"] .lightbox-close {
  background: rgba(255,255,255,0.08);
  border: 1px solid rgba(255,255,255,0.12);
}
body[data-skin="immersive"] .lightbox-close:hover {
  background: rgba(255,255,255,0.15);
}