/**
 * 40k-16bit — Warhammer 40k / gothic imperial aesthetic.
 * Display: Cinzel (Roman imperial capitals). Body: Spectral (readable serif).
 * Mono: Fira Code (clean, ligatures). Dark cathedral palette, parchment text,
 * crimson + gold accents. The entire page transforms.
 */

[data-article-theme='40k-16bit'] {
  --t-display: 'Cinzel', 'Times New Roman', serif;
  --t-body: 'Spectral', 'Georgia', serif;
  --t-mono: 'Fira Code', 'Cascadia Code', 'Source Code Pro', monospace;

  --t-fg: #c9b896;
  --t-fg-dim: #8a7d65;
  --t-fg-bright: #e4d5b7;
  --t-bg-deep: #08060a;
  --t-bg: #0e0b10;
  --t-surface: #16121a;
  --t-surface-raised: #1c1722;
  --t-crimson: #8b1a1a;
  --t-crimson-bright: #b22222;
  --t-gold: #b8860b;
  --t-gold-bright: #daa520;
  --t-border: #2e2620;
  --t-border-dim: #1e1a16;
}

/* ── html / body ── */
[data-article-theme='40k-16bit'] {
  background: var(--t-bg-deep);
}

[data-article-theme='40k-16bit'] body {
  font-family: var(--t-body);
  background: var(--t-bg-deep) !important;
  color: var(--t-fg);
}

/* ── Fixed page background: gothic cathedral vignette ── */
[data-article-theme='40k-16bit'] .fixed.inset-0 {
  background:
    radial-gradient(ellipse 80% 60% at 50% 0%, rgb(139 26 26 / 0.08), transparent 70%),
    radial-gradient(ellipse 60% 50% at 50% 100%, rgb(8 6 10 / 0.9), transparent),
    var(--t-bg-deep) !important;
}

[data-article-theme='40k-16bit'] .fixed.inset-0 > div > div {
  background: transparent !important;
  background-image:
    repeating-linear-gradient(
      0deg,
      transparent,
      transparent 47px,
      rgb(184 134 11 / 0.03) 47px,
      rgb(184 134 11 / 0.03) 48px
    ),
    repeating-linear-gradient(
      90deg,
      transparent,
      transparent 47px,
      rgb(184 134 11 / 0.03) 47px,
      rgb(184 134 11 / 0.03) 48px
    ) !important;
  background-size: 48px 48px !important;
  box-shadow:
    inset 0 0 200px 60px rgb(0 0 0 / 0.6),
    inset 0 -80px 120px -40px rgb(0 0 0 / 0.4) !important;
  ring: none !important;
  --tw-ring-color: transparent !important;
  border: none !important;
}

[data-article-theme='40k-16bit'] [class*='bg-neutral-50'] {
  background-color: transparent !important;
  border: none !important;
  box-shadow: none !important;
  ring: none !important;
}

/* ── Navigation ── */
[data-article-theme='40k-16bit'] header nav ul {
  background: rgb(22 18 26 / 0.85) !important;
  backdrop-filter: blur(12px);
  border: 1px solid var(--t-border) !important;
  box-shadow: 0 4px 20px rgb(0 0 0 / 0.4), inset 0 1px 0 rgb(184 134 11 / 0.08) !important;
  --tw-ring-color: transparent !important;
  --tw-ring-shadow: none !important;
}

[data-article-theme='40k-16bit'] header nav ul li a {
  font-family: var(--t-display) !important;
  text-transform: uppercase !important;
  letter-spacing: 0.1em !important;
  font-size: 0.65rem !important;
  color: var(--t-fg-dim) !important;
}

[data-article-theme='40k-16bit'] header nav ul li a:hover {
  color: var(--t-gold) !important;
}

[data-article-theme='40k-16bit'] header .rounded-full.bg-neutral-200\/90 {
  background: var(--t-surface) !important;
  border: 1px solid var(--t-border);
  --tw-ring-color: transparent !important;
}

/* Avatar ring */
[data-article-theme='40k-16bit'] header .h-10.w-10.rounded-full {
  background: var(--t-surface) !important;
  --tw-ring-color: rgb(184 134 11 / 0.2) !important;
}

/* Mobile menu button */
[data-article-theme='40k-16bit'] #mobile-menu-button {
  background: rgb(22 18 26 / 0.85) !important;
  color: var(--t-fg-dim) !important;
  border: 1px solid var(--t-border) !important;
  font-family: var(--t-display) !important;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  --tw-ring-color: transparent !important;
}

/* ── Back button ── */
[data-article-theme='40k-16bit'] button[aria-label='Go back to articles'] {
  background: var(--t-surface) !important;
  border: 1px solid var(--t-border) !important;
  border-radius: 2px !important;
  --tw-ring-color: transparent !important;
  box-shadow: none !important;
}

[data-article-theme='40k-16bit'] button[aria-label='Go back to articles'] svg {
  stroke: var(--t-fg-dim) !important;
}

[data-article-theme='40k-16bit'] button[aria-label='Go back to articles']:hover {
  border-color: var(--t-gold) !important;
}

[data-article-theme='40k-16bit'] button[aria-label='Go back to articles']:hover svg {
  stroke: var(--t-gold) !important;
}

/* ── Article header ── */
[data-article-theme='40k-16bit'] article header {
  font-family: var(--t-display);
}

[data-article-theme='40k-16bit'] article h1 {
  font-family: var(--t-display) !important;
  font-size: 2rem !important;
  font-weight: 700 !important;
  line-height: 1.2 !important;
  letter-spacing: 0.04em !important;
  text-transform: uppercase;
  color: var(--t-fg-bright) !important;
  border-bottom: none !important;
  padding-bottom: 0 !important;
  text-shadow: 0 0 40px rgb(139 26 26 / 0.3);
}

@media (min-width: 640px) {
  [data-article-theme='40k-16bit'] article h1 {
    font-size: 2.5rem !important;
  }
}

[data-article-theme='40k-16bit'] article time {
  font-family: var(--t-display);
  font-size: 0.75rem;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  color: var(--t-fg-dim);
}

[data-article-theme='40k-16bit'] article time .h-4.w-0\.5 {
  background-color: var(--t-crimson) !important;
}

/* ── Prose: body text ── */
[data-article-theme='40k-16bit'] .prose {
  font-family: var(--t-body);
  font-size: 1.0625rem;
  line-height: 1.75;
  color: var(--t-fg);
}

[data-article-theme='40k-16bit'] .prose p,
[data-article-theme='40k-16bit'] .prose li {
  font-family: var(--t-body);
  color: var(--t-fg);
}

/* ── Prose: headings ── */
[data-article-theme='40k-16bit'] .prose h2 {
  font-family: var(--t-display) !important;
  font-size: 1.5rem !important;
  font-weight: 600 !important;
  line-height: 1.3 !important;
  letter-spacing: 0.06em !important;
  text-transform: uppercase;
  margin-top: 2.5rem !important;
  margin-bottom: 1rem !important;
  padding-bottom: 0.5rem;
  border-bottom: 1px solid var(--t-border);
  color: var(--t-fg-bright) !important;
}

[data-article-theme='40k-16bit'] .prose h3 {
  font-family: var(--t-display) !important;
  font-size: 1.25rem !important;
  font-weight: 600 !important;
  line-height: 1.35 !important;
  letter-spacing: 0.04em !important;
  text-transform: uppercase;
  margin-top: 2rem !important;
  margin-bottom: 0.75rem !important;
  color: var(--t-fg-bright) !important;
}

[data-article-theme='40k-16bit'] .prose h4,
[data-article-theme='40k-16bit'] .prose h5,
[data-article-theme='40k-16bit'] .prose h6 {
  font-family: var(--t-display) !important;
  font-size: 1.0625rem !important;
  font-weight: 600 !important;
  line-height: 1.4 !important;
  letter-spacing: 0.03em !important;
  text-transform: uppercase;
  color: var(--t-fg-bright) !important;
}

/* ── Prose: inline styles ── */
[data-article-theme='40k-16bit'] .prose strong {
  font-weight: 600;
  color: var(--t-fg-bright);
}

[data-article-theme='40k-16bit'] .prose em {
  font-style: italic;
  color: var(--t-fg);
}

/* ── Prose: blockquotes ── */
[data-article-theme='40k-16bit'] .prose blockquote {
  font-family: var(--t-body);
  font-style: italic;
  font-size: 1rem;
  border-left: 3px solid var(--t-crimson);
  padding-left: 1.25rem;
  margin: 1.5rem 0;
  color: var(--t-fg-dim);
  quotes: none;
}

[data-article-theme='40k-16bit'] .prose blockquote p::before,
[data-article-theme='40k-16bit'] .prose blockquote p::after {
  content: none;
}

/* ── Prose: lists ── */
[data-article-theme='40k-16bit'] .prose ul {
  list-style-type: none;
  padding-left: 1.25rem;
}

[data-article-theme='40k-16bit'] .prose ul > li {
  position: relative;
  padding-left: 1em;
}

[data-article-theme='40k-16bit'] .prose ul > li::before {
  content: '✦';
  position: absolute;
  left: -0.25em;
  color: var(--t-crimson-bright);
  font-size: 0.6em;
  top: 0.45em;
}

[data-article-theme='40k-16bit'] .prose ol {
  list-style-type: decimal;
  padding-left: 1.5rem;
}

[data-article-theme='40k-16bit'] .prose ol li::marker {
  color: var(--t-gold);
  font-weight: 600;
}

[data-article-theme='40k-16bit'] .prose li {
  margin: 0.4rem 0;
}

/* ── Prose: links ── */
[data-article-theme='40k-16bit'] .prose a {
  font-family: var(--t-body);
  color: var(--t-gold);
  text-decoration: none;
  border-bottom: 1px solid rgb(184 134 11 / 0.3);
  transition: color 0.2s, border-color 0.2s;
}

[data-article-theme='40k-16bit'] .prose a:hover {
  color: var(--t-gold-bright);
  border-bottom-color: var(--t-gold-bright);
}

/* ── Prose: horizontal rules ── */
[data-article-theme='40k-16bit'] .prose hr {
  border: none;
  height: 1px;
  background: linear-gradient(
    90deg,
    transparent,
    var(--t-crimson) 20%,
    var(--t-gold) 50%,
    var(--t-crimson) 80%,
    transparent
  );
  margin: 2.5rem 0;
}

/* ── Prose: inline code ── */
[data-article-theme='40k-16bit'] .prose :not(pre) > code {
  font-family: var(--t-mono);
  font-size: 0.875em;
  padding: 0.15em 0.4em;
  border: 1px solid var(--t-border);
  border-radius: 2px;
  background: var(--t-surface);
  color: var(--t-fg);
}

/* ── Prose: code blocks ── */
[data-article-theme='40k-16bit'] .astro-code,
[data-article-theme='40k-16bit'] .prose pre {
  font-family: var(--t-mono) !important;
  font-size: 0.875rem !important;
  line-height: 1.65 !important;
  border: 1px solid var(--t-border) !important;
  border-radius: 2px !important;
  background: var(--t-surface) !important;
  box-shadow: inset 0 2px 8px rgb(0 0 0 / 0.3) !important;
}

[data-article-theme='40k-16bit'] .prose pre code {
  font-family: var(--t-mono) !important;
}

/* ── Prose: tables ── */
[data-article-theme='40k-16bit'] .prose table {
  font-family: var(--t-body);
  font-size: 0.9375rem;
  border: 1px solid var(--t-border);
  border-collapse: collapse;
}

[data-article-theme='40k-16bit'] .prose th,
[data-article-theme='40k-16bit'] .prose td {
  border: 1px solid var(--t-border);
  padding: 0.5rem 0.75rem;
  color: var(--t-fg);
}

[data-article-theme='40k-16bit'] .prose th {
  background: var(--t-surface-raised);
  font-family: var(--t-display);
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  font-size: 0.8125rem;
  color: var(--t-fg-bright);
}

/* ── Prose: footnotes ── */
[data-article-theme='40k-16bit'] .prose .footnotes {
  border-top: 1px solid var(--t-border);
  margin-top: 2rem;
  padding-top: 1.5rem;
  font-size: 0.875rem;
  color: var(--t-fg-dim);
}

[data-article-theme='40k-16bit'] .prose sup a {
  color: var(--t-crimson-bright);
  border-bottom: none;
  font-family: var(--t-mono);
  font-size: 0.75em;
}

/* ── Footer ── */
[data-article-theme='40k-16bit'] footer.mt-32 {
  font-family: var(--t-display);
}

[data-article-theme='40k-16bit'] footer.mt-32 .border-t {
  border-color: var(--t-border) !important;
}

[data-article-theme='40k-16bit'] footer.mt-32 a {
  font-family: var(--t-display) !important;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: var(--t-fg-dim) !important;
}

[data-article-theme='40k-16bit'] footer.mt-32 a:hover {
  color: var(--t-gold) !important;
}

[data-article-theme='40k-16bit'] footer.mt-32 p {
  color: var(--t-fg-dim) !important;
  font-family: var(--t-display);
  letter-spacing: 0.05em;
}

/* ── Layout: widen the content column and match prose to header ── */
[data-article-theme='40k-16bit'] .mx-auto.max-w-2xl {
  max-width: 48rem !important;
}

[data-article-theme='40k-16bit'] .mx-auto.max-w-2xl.lg\:max-w-5xl {
  max-width: 64rem !important;
}

[data-article-theme='40k-16bit'] .prose {
  max-width: none !important;
}

/* ── Syntax highlighting (Shiki CSS-variables theme) ──
 *
 * Uses html[] to beat the :root definitions in tailwind.css.
 * Shiki emits --astro-code-foreground / --astro-code-background
 * (not the -color-text / -color-background names in tailwind.css).
 */
html[data-article-theme='40k-16bit'] {
  --astro-code-foreground: #d4c4a0;
  --astro-code-background: #16121a;
  --astro-code-color-text: #d4c4a0;
  --astro-code-color-background: #16121a;
  --astro-code-token-keyword: #d44040;
  --astro-code-token-function: #e2b750;
  --astro-code-token-string: #6aab9a;
  --astro-code-token-string-expression: #6aab9a;
  --astro-code-token-constant: #e8a832;
  --astro-code-token-parameter: #d4948a;
  --astro-code-token-comment: #6b5e4a;
  --astro-code-token-punctuation: #9a8b72;
  --astro-code-token-link: #daa520;
}

[data-article-theme='40k-16bit'] .astro-code {
  font-family: var(--t-mono) !important;
  border: 1px solid var(--t-border) !important;
  border-radius: 2px !important;
  background: var(--t-surface) !important;
  box-shadow: inset 0 2px 8px rgb(0 0 0 / 0.3) !important;
  padding: 1.25rem !important;
}

[data-article-theme='40k-16bit'] .astro-code::-webkit-scrollbar-track {
  background: var(--t-surface) !important;
}

[data-article-theme='40k-16bit'] .astro-code::-webkit-scrollbar-thumb {
  background: rgb(139 26 26 / 0.3) !important;
  border-color: var(--t-surface) !important;
}

/* ── Mermaid diagrams ── */
[data-article-theme='40k-16bit'] .mermaid-bleed {
  background: var(--t-surface) !important;
  border-color: var(--t-border) !important;
  border-radius: 2px !important;
}

/* ── Observable Plot / QueryTimeline ── */
[data-article-theme='40k-16bit'] .mermaid-bleed .plot-target {
  color: var(--t-fg) !important;
}

[data-article-theme='40k-16bit'] .mermaid-bleed p {
  color: var(--t-fg-dim) !important;
}

/* ── Scrollbar ── */
[data-article-theme='40k-16bit']::-webkit-scrollbar-thumb {
  background: rgb(139 26 26 / 0.4) !important;
}

[data-article-theme='40k-16bit']::-webkit-scrollbar-thumb:hover {
  background: rgb(139 26 26 / 0.6) !important;
}

[data-article-theme='40k-16bit'] {
  scrollbar-color: rgb(139 26 26 / 0.4) transparent !important;
}

/* Decorative candles handled by WebGL ThemeCandle component */