/* ─────────────────────────────────────
   dark.css — dark theme layer for article pages
   Link AFTER styles.css on each article page
───────────────────────────────────── */

:root {
  --ink:        #ddd8d0;
  --ink-soft:   #8c8580;
  --ink-muted:  #514d49;
  --paper:      #0d0c0b;
  --paper-warm: #131210;
  --rule:       #1e1c1a;
  --accent:     #e07a38;
  --accent-light: rgba(224, 122, 56, 0.18);
  --accent-project: #e07a38;
  --accent-project-light: rgba(224, 122, 56, 0.18);
  --link:       #9ec4d6;
  --focus:      #e07a38;
}

body {
  background: var(--paper);
  color: var(--ink);
}

/* ── Header ── */
header {
  background: rgba(13, 12, 11, 0.9);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border-bottom-color: var(--rule);
}
header.scrolled { box-shadow: 0 4px 20px rgba(0, 0, 0, 0.35); }

.logo { color: var(--ink); }
nav a { color: var(--ink-muted); }
nav a:hover { color: var(--ink); }
nav a[aria-current="page"] { color: var(--ink); }

/* ── Post hero ── */
.post-hero::after {
  background: linear-gradient(to right, rgba(0,0,0,0.35) 0%, rgba(0,0,0,0) 60%);
}

/* ── Byline ── */
.byline { color: var(--ink-muted); border-bottom-color: var(--rule); }
.byline a { color: var(--ink-muted); }

/* ── Article body ── */
article h2 { color: var(--ink); }
article h3 { color: var(--ink); }
article p  { color: var(--ink-soft); }
article p strong { color: var(--ink); }
article li { color: var(--ink-soft); }
article li strong { color: var(--ink); }
article p a,
article li a { color: var(--link); }
article p a:hover,
article li a:hover { border-bottom-color: var(--link); }
article figure img { border-color: var(--rule); }
article figcaption { color: var(--ink-muted); }
code { color: var(--ink-soft); background: var(--paper-warm); border-radius: 2px; padding: 0.1em 0.35em; }

/* ── Status callout ── */
.status-callout { background: var(--paper-warm); border-left-color: var(--accent); }
.status-callout p { color: var(--ink-soft); }
.status-callout .status-label { color: var(--accent); }

/* ── Status chips ── */
.project-status { border-color: var(--rule); color: var(--ink-muted); background: var(--paper-warm); }
.project-status.live     { color: #6ec49a; border-color: #1e4a30; background: #0b1f15; }
.project-status.dev      { color: #c49050; border-color: #4a2c08; background: #1f1205; }
.project-status.released { color: var(--ink-soft); border-color: var(--rule); background: var(--paper-warm); }
.project-status.ended    { color: var(--ink-muted); border-color: var(--rule); background: var(--paper-warm); }

/* ── Factor cards ── */
.factors { background: var(--rule); border-color: var(--rule); }
.factor  { background: var(--paper-warm); }
.factor:hover,
.factor[aria-expanded="true"] { background: #1a1815; }
.factor h4 { color: var(--ink); }
.factor p  { color: var(--ink-soft); }
.factor-detail { border-top-color: var(--rule); color: var(--ink-soft); }
.factor-toggle-hint { color: var(--ink-muted); }

/* ── CTA block ── */
.cta-block { background: var(--paper-warm); border: 1px solid var(--rule); }
.cta-block h3 { color: var(--ink); }
.cta-block p  { color: var(--ink-soft); }
.cta-block a  { background: var(--accent); color: #fff; }
.cta-block a:hover { filter: brightness(0.88); }

/* ── Buttons ── */
.btn-primary { background: var(--accent); color: #fff; }
.btn-primary:hover { filter: brightness(0.88); }
.btn-ghost { border-color: var(--rule); color: var(--ink-soft); }
.btn-ghost:hover { border-color: var(--ink-muted); color: var(--ink); background: var(--paper-warm); }

/* ── Specimen block (fonts page) ── */
.specimen-block { background: var(--paper-warm); border-color: var(--rule); }
.specimen-word  { color: var(--ink); }
.specimen-meta  { color: var(--ink-muted); }

/* ── Feature image ── */
.feature-image { border-color: var(--rule); }
.feature-image-caption { color: rgba(255,255,255,0.5); }

/* ── Projects grid (if used in articles) ── */
.projects-grid { background: var(--rule); border-color: var(--rule); }
.project-card  { background: var(--paper); }
.project-card:hover { background: var(--paper-warm); box-shadow: 0 10px 24px rgba(0,0,0,0.3); }

/* ── Section divider ── */
.section-divider hr { border-top-color: var(--rule); }

/* ── Writing block ── */
.writing-block { background: var(--paper-warm); border-color: var(--rule); }
.writing-block h3 { color: var(--ink); }
.writing-block p  { color: var(--ink-soft); }

/* ── Site footer ── */
.site-footer { border-top-color: var(--rule); }
.site-footer span { color: var(--ink-muted); }
.site-footer nav a { color: var(--ink-muted); }
.site-footer nav a:hover { color: var(--ink); }