/* ---- Detail theme system: the aesthetic speaks through color only. ----
   Typography and layout stay the parent site's modern system; each
   per-aesthetic file just sets the --t-* palette variables (light + dark). */
.detail-themed {
  --t-bg: var(--paper);
  --t-ink: var(--ink);
  --t-soft: var(--ink-soft);
  --t-line: var(--hairline);
  --t-panel: var(--card-bg);
  --t-chip: var(--card-bg);
  --t-accent: var(--accent);
  --t-accent-ink: var(--accent);
  --t-strip: linear-gradient(90deg, var(--hairline), var(--hairline));

  background: var(--t-bg);
  color: var(--t-ink);
  font-family: var(--font-body);
  padding: 32px;
}

.detail-themed::before {
  content: '';
  display: block;
  height: 6px;
  border-radius: 999px;
  background: var(--t-strip);
  margin-bottom: 2.2rem;
}

.detail-themed .detail-back {
  background: transparent;
  color: var(--t-ink);
  border: 1px solid var(--t-line);
  border-radius: 999px;
  padding: 0.35rem 0.9rem;
  font-family: var(--font-mono);
  font-size: 0.78rem;
}
.detail-themed .detail-back:hover { border-color: var(--t-accent-ink); color: var(--t-accent-ink); }

.detail-themed .detail-name {
  font-family: var(--font-display);
  font-weight: 850;
  letter-spacing: -0.02em;
  color: var(--t-accent-ink);
}

.detail-themed .detail-era {
  color: var(--t-soft);
  font-family: var(--font-mono);
  font-size: 0.82rem;
}

.detail-themed .detail-mood {
  background: var(--t-chip);
  color: var(--t-accent-ink);
  border: 1px solid var(--t-line);
  border-radius: 999px;
  font-family: var(--font-mono);
}

.detail-themed .detail-section h3 {
  color: var(--t-accent-ink);
  font-family: var(--font-mono);
  font-size: 0.8rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.14em;
  border-bottom: 1px solid var(--t-line);
  padding-bottom: 0.5em;
}

.detail-themed .readable-panel {
  background: var(--t-panel);
  color: var(--t-ink);
  border: 1px solid var(--t-line);
  border-radius: 10px;
  padding: 24px;
}
.detail-themed .readable-panel p { color: var(--t-ink); line-height: 1.65; }

.detail-themed .detail-section li { color: var(--t-ink); }
.detail-themed .detail-section li::marker { color: var(--t-accent-ink); }

.detail-themed .palette-chip { border: 1px solid var(--t-line); border-radius: 8px; background: var(--t-panel); }
.detail-themed .palette-hex { color: var(--t-soft); font-family: var(--font-mono); }

.detail-themed .copy-palette {
  background: transparent;
  color: var(--t-accent-ink);
  border: 1px solid var(--t-accent-ink);
  border-radius: 999px;
  padding: 0.4rem 1rem;
  font-family: var(--font-mono);
  font-size: 0.78rem;
}
.detail-themed .copy-palette:hover { background: var(--t-chip); }

.detail-themed .mood-fig img { border-radius: 8px; border: 1px solid var(--t-line); background: var(--t-chip); }
.detail-themed .mood-fig figcaption { color: var(--t-soft); }