/* ===========================================================================
   NOIR CHROMA — story.php
   Overrides assets/css/story-page.css.
   =========================================================================== */

/* ---- 1. Cinematic hero -------------------------------------------------- */

body[data-skin="noir"] .story-hero {
  position: relative;
  background: var(--n-ink-0);
  max-height: 62dvh;
  overflow: hidden;
}
body[data-skin="noir"] .story-hero-img {
  filter: brightness(.78);
  object-fit: cover;
  width: 100%;
}
/* Scrim so the title, which overlaps the image bottom, always has ink under
   it — whatever the photograph happens to be. */
body[data-skin="noir"] .story-hero::after {
  content: '';
  position: absolute;
  inset: 0;
  pointer-events: none;
  background: linear-gradient(to top,
                var(--n-ink-0) 0%,
                rgba(11, 11, 13, .45) 40%,
                rgba(11, 11, 13, .10) 100%);
}
body[data-skin="noir"] .story-enlarge-hint {
  background: rgba(11, 11, 13, .7);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  border: 1px solid var(--n-border-strong);
  color: var(--n-text-muted);
  border-radius: var(--n-r-pill);
  z-index: 2;
}


/* ---- 2. Article --------------------------------------------------------- */

body[data-skin="noir"] .story-surface {
  background: var(--n-bg);
  position: relative;
  z-index: 1;
}

body[data-skin="noir"] .story-breadcrumb,
body[data-skin="noir"] .story-breadcrumb a { color: var(--n-text-dim); }
body[data-skin="noir"] .story-breadcrumb a:hover { color: var(--n-text-muted); }
body[data-skin="noir"] .bc-sep { color: var(--n-fg-3); }
body[data-skin="noir"] .bc-current { color: var(--n-text-muted); }

body[data-skin="noir"] .story-article {
  background: transparent;
  border: 0;
  box-shadow: none;
}

body[data-skin="noir"] .story-title {
  font-family: var(--n-font-display);
  font-size: var(--n-fz-3xl);
  font-weight: var(--n-fw-bold);
  color: var(--n-fg);
  letter-spacing: -.02em;
  line-height: var(--n-lh-tight);
}

body[data-skin="noir"] .story-meta,
body[data-skin="noir"] .story-reading-time { color: var(--n-text-dim); }
body[data-skin="noir"] .story-meta-dot { background: var(--n-fg-3); }
body[data-skin="noir"] .story-draft-badge {
  background: rgba(255, 180, 61, .12);
  border: 1px solid rgba(255, 180, 61, .4);
  color: var(--n-warning);
  border-radius: var(--n-r-pill);
}

body[data-skin="noir"] .story-tags-header .story-tag-link,
body[data-skin="noir"] .story-ftag {
  background: var(--n-surface-2);
  border: 1px solid var(--n-border);
  color: var(--n-text-muted);
  border-radius: var(--n-r-pill);
}
body[data-skin="noir"] .story-tags-header .story-tag-link:hover,
body[data-skin="noir"] .story-ftag:hover {
  color: var(--n-fg);
  border-color: var(--n-accent);
}

body[data-skin="noir"] .story-sep { background: var(--n-border); border: 0; }


/* ---- 3. Body copy ------------------------------------------------------- */

body[data-skin="noir"] .story-content {
  max-width: var(--n-maxw-read);
  color: var(--n-text);
  font-size: var(--n-fz-lg);
  line-height: var(--n-lh-read);
}
body[data-skin="noir"] .story-content h2,
body[data-skin="noir"] .story-content h3 {
  font-family: var(--n-font-display);
  color: var(--n-fg);
  margin-top: var(--n-s7);
}
body[data-skin="noir"] .story-content a {
  color: var(--n-accent);
  text-underline-offset: 3px;
}
body[data-skin="noir"] .story-content a:hover { color: var(--n-amber); }
body[data-skin="noir"] .story-content img {
  border-radius: var(--n-r-md);
  border: 1px solid var(--n-border);
}
body[data-skin="noir"] .story-content blockquote {
  border: 0;
  border-inline-start: 3px solid transparent;
  border-image: var(--n-grad) 1;
  background: var(--n-surface);
  color: var(--n-fg);
  padding: var(--n-s4) var(--n-s5);
  margin-inline: 0;
  font-family: var(--n-font-display);
}
body[data-skin="noir"] .story-content code,
body[data-skin="noir"] .story-content pre {
  background: var(--n-surface-2);
  border: 1px solid var(--n-border);
  border-radius: var(--n-r-xs);
  color: var(--n-fg);
}
body[data-skin="noir"] .story-content hr { background: var(--n-border); }

body[data-skin="noir"] .story-empty { color: var(--n-text-dim); }


/* ---- 4. Footer nav ------------------------------------------------------ */

body[data-skin="noir"] .story-article-footer { border-top: 1px solid var(--n-border); }
body[data-skin="noir"] .story-end-nav .nav-arrow {
  background: var(--n-surface-2);
  border: 1px solid var(--n-border);
  color: var(--n-text-muted);
  border-radius: var(--n-r-sm);
}
body[data-skin="noir"] .story-end-nav .nav-arrow:hover {
  color: var(--n-fg);
  border-color: var(--n-accent);
}


/* ---- 5. Lightbox -------------------------------------------------------- */

body[data-skin="noir"] .story-lightbox { z-index: 2000; }
body[data-skin="noir"] .lightbox-backdrop {
  background: rgba(6, 6, 8, .96);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
}
body[data-skin="noir"] .lightbox-img {
  border-radius: var(--n-r-sm);
  box-shadow: 0 32px 96px rgba(0, 0, 0, .8);
}
body[data-skin="noir"] .lightbox-close {
  background: rgba(255, 255, 255, .08);
  border: 1px solid var(--n-border-strong);
  color: var(--n-fg);
  border-radius: 50%;
  min-width: 44px;
  min-height: 44px;
}
body[data-skin="noir"] .lightbox-close:hover { border-color: var(--n-accent); }


/* ---- 6. Mobile ---------------------------------------------------------- */

@media (max-width: 900px) {
  body[data-skin="noir"] .story-hero { max-height: 46dvh; }
  body[data-skin="noir"] .story-title { font-size: var(--n-fz-2xl); }
  body[data-skin="noir"] .story-content { font-size: var(--n-fz-lg); }
  body[data-skin="noir"] .story-content blockquote { padding: var(--n-s3) var(--n-s4); }
}