/* premium-overlay.css — Phase 6 reskin layer over legacy site.css.
 *
 * site.css defines the original `.t-panel`, `.t-table`, `.t-row`,
 * `.sp-card`, `.section-head`, `.rule-block`, `.t-badge` etc. used by
 * every page. Rewriting those to a new class name across 18 templates
 * is risky and JS-hook-fragile. Instead, this overlay scopes new
 * styling to those legacy class names BUT only when a Phase-6 theme
 * is active (via the [data-theme=...] selector chain), so legacy
 * themes (amber-terminal, jungle-excavation, etc.) keep their old
 * look untouched.
 *
 * Loaded AFTER site.css from _base.html so specificity wins on equal
 * selectors. Where we need to outrun an existing per-theme override,
 * we double-up the [data-theme] selector to bump specificity.
 */

/* ── 1. Generic premium-theme retargeting ───────────────────────────── */

[data-theme="naturalist"],
[data-theme="obsidian-codex"],
[data-theme="cretaceous-greenhouse"],
[data-theme="volcanic-glass"],
[data-theme="polar-field-lab"],
[data-theme="vellum-atlas"] {
  /* Map legacy site.css custom-property names onto Phase-6 tokens so
   * the existing rules in site.css resolve against our palette.
   *
   * Self-aliases like `--bg: var(--bg)` were removed: the CSS spec
   * resolves any custom-property cycle to the property's initial
   * (empty) value. With them in place, --bg / --ink / --accent
   * collapsed to "" and every legacy-themed rule (body { background:
   * var(--bg) }) painted transparent. The site.css `:root` import
   * order in _base.html now sits BEFORE the theme files, so the
   * theme-file declarations naturally win on cascade and we don't
   * need a self-aliasing rule here. */
  --bg-elev:          var(--panel);
  --card:             var(--panel);
  --card-elev:        color-mix(in srgb, var(--panel), var(--ink) 6%);
  --line:             var(--rule);
  --line-bright:      var(--accent);
  --ink-dim:          var(--ink-soft);
  --ink-faint:        var(--ink-dim);
  --warn:             var(--accent-2);
  --danger:           var(--accent-2);
  --safe:             var(--accent);
  --panel-scrim:      0.55;
  --mono:             var(--font-mono);
}

/* ── 2. Hero block ──────────────────────────────────────────────────── */

[data-theme="naturalist"] .hero h1,
[data-theme="obsidian-codex"] .hero h1,
[data-theme="cretaceous-greenhouse"] .hero h1,
[data-theme="volcanic-glass"] .hero h1,
[data-theme="polar-field-lab"] .hero h1,
[data-theme="vellum-atlas"] .hero h1 {
  font-family: var(--font-display);
  letter-spacing: var(--tracking-display);
  font-weight: var(--weight-display);
  font-size: clamp(2.4rem, 5vw, 4.0rem);
  line-height: 1.05;
  margin: 0.2em 0 0.5em;
  text-transform: none;
  color: var(--ink);
}
[data-theme="naturalist"] .hero h1 .cursor,
[data-theme="obsidian-codex"] .hero h1 .cursor,
[data-theme="cretaceous-greenhouse"] .hero h1 .cursor,
[data-theme="volcanic-glass"] .hero h1 .cursor,
[data-theme="polar-field-lab"] .hero h1 .cursor,
[data-theme="vellum-atlas"] .hero h1 .cursor {
  display: none;
}
[data-theme="naturalist"] .hero .sub,
[data-theme="obsidian-codex"] .hero .sub,
[data-theme="cretaceous-greenhouse"] .hero .sub,
[data-theme="volcanic-glass"] .hero .sub,
[data-theme="polar-field-lab"] .hero .sub,
[data-theme="vellum-atlas"] .hero .sub {
  font-family: var(--font-body);
  font-size: clamp(1.0rem, 1.4vw, 1.15rem);
  color: var(--ink-soft);
  max-width: 70ch;
  line-height: 1.55;
}
[data-theme="naturalist"] .hero .t-eyebrow,
[data-theme="obsidian-codex"] .hero .t-eyebrow,
[data-theme="cretaceous-greenhouse"] .hero .t-eyebrow,
[data-theme="volcanic-glass"] .hero .t-eyebrow,
[data-theme="polar-field-lab"] .hero .t-eyebrow,
[data-theme="vellum-atlas"] .hero .t-eyebrow {
  font-family: var(--font-mono);
  font-size: 0.72rem;
  letter-spacing: 0.32em;
  text-transform: uppercase;
  color: var(--ink-dim);
  margin-bottom: 14px;
}

/* ── 3. Panels ──────────────────────────────────────────────────────── */

[data-theme="naturalist"] .t-panel,
[data-theme="obsidian-codex"] .t-panel,
[data-theme="cretaceous-greenhouse"] .t-panel,
[data-theme="volcanic-glass"] .t-panel,
[data-theme="polar-field-lab"] .t-panel,
[data-theme="vellum-atlas"] .t-panel {
  background: var(--panel);
  background-image: var(--texture-panel);
  border: 1px solid var(--panel-edge);
  border-radius: var(--radius-panel);
  box-shadow: var(--shadow-panel);
  margin-bottom: 18px;
  overflow: hidden;
}
[data-theme="naturalist"] .t-panel-head,
[data-theme="obsidian-codex"] .t-panel-head,
[data-theme="cretaceous-greenhouse"] .t-panel-head,
[data-theme="volcanic-glass"] .t-panel-head,
[data-theme="polar-field-lab"] .t-panel-head,
[data-theme="vellum-atlas"] .t-panel-head {
  background: linear-gradient(180deg,
              color-mix(in srgb, var(--panel), var(--ink) 4%) 0%,
              var(--panel) 100%);
  color: var(--ink);
  font-family: var(--font-display);
  font-size: 1.0rem;
  font-weight: var(--weight-display);
  letter-spacing: var(--tracking-display);
  text-transform: none;
  padding: 14px 22px;
  border-bottom: 1px solid var(--rule);
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 16px;
}
[data-theme="naturalist"] .t-panel-head .corner,
[data-theme="obsidian-codex"] .t-panel-head .corner,
[data-theme="cretaceous-greenhouse"] .t-panel-head .corner,
[data-theme="volcanic-glass"] .t-panel-head .corner,
[data-theme="polar-field-lab"] .t-panel-head .corner,
[data-theme="vellum-atlas"] .t-panel-head .corner {
  /* Hidden on Phase-6 themes — the SVG bracket on .t-panel::before
   * provides the corner mark instead. Keeps the legacy ┌ glyph
   * available for old amber-terminal / jungle-excavation themes. */
  display: none;
}
[data-theme="naturalist"] .t-panel-head .badge,
[data-theme="obsidian-codex"] .t-panel-head .badge,
[data-theme="cretaceous-greenhouse"] .t-panel-head .badge,
[data-theme="volcanic-glass"] .t-panel-head .badge,
[data-theme="polar-field-lab"] .t-panel-head .badge,
[data-theme="vellum-atlas"] .t-panel-head .badge {
  font-family: var(--font-mono);
  font-size: 0.66rem;
  letter-spacing: 0.16em;
  color: var(--ink-dim);
  background: transparent;
  border: 0;
  padding: 0;
}
[data-theme="naturalist"] .t-panel-body,
[data-theme="obsidian-codex"] .t-panel-body,
[data-theme="cretaceous-greenhouse"] .t-panel-body,
[data-theme="volcanic-glass"] .t-panel-body,
[data-theme="polar-field-lab"] .t-panel-body,
[data-theme="vellum-atlas"] .t-panel-body {
  padding: 18px 22px;
  font-family: var(--font-body);
  color: var(--ink-soft);
  line-height: 1.65;
}

/* ── 4. Rows + tables ───────────────────────────────────────────────── */

[data-theme="naturalist"] .t-row,
[data-theme="obsidian-codex"] .t-row,
[data-theme="cretaceous-greenhouse"] .t-row,
[data-theme="volcanic-glass"] .t-row,
[data-theme="polar-field-lab"] .t-row,
[data-theme="vellum-atlas"] .t-row {
  border-color: var(--rule);
  font-family: var(--font-body);
  color: var(--ink);
}
[data-theme="naturalist"] .t-num,
[data-theme="obsidian-codex"] .t-num,
[data-theme="cretaceous-greenhouse"] .t-num,
[data-theme="volcanic-glass"] .t-num,
[data-theme="polar-field-lab"] .t-num,
[data-theme="vellum-atlas"] .t-num {
  color: var(--accent);
  font-family: var(--font-mono);
  font-weight: 500;
}
[data-theme="naturalist"] .t-table,
[data-theme="obsidian-codex"] .t-table,
[data-theme="cretaceous-greenhouse"] .t-table,
[data-theme="volcanic-glass"] .t-table,
[data-theme="polar-field-lab"] .t-table,
[data-theme="vellum-atlas"] .t-table {
  font-family: var(--font-body);
  border-collapse: separate;
  border-spacing: 0;
}
[data-theme="naturalist"] .t-table th,
[data-theme="obsidian-codex"] .t-table th,
[data-theme="cretaceous-greenhouse"] .t-table th,
[data-theme="volcanic-glass"] .t-table th,
[data-theme="polar-field-lab"] .t-table th,
[data-theme="vellum-atlas"] .t-table th {
  background: color-mix(in srgb, var(--panel), var(--ink) 6%);
  color: var(--ink);
  font-family: var(--font-display);
  font-weight: 500;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  font-size: 0.78rem;
  border-bottom: 1px solid var(--rule);
  padding: 10px 14px;
  text-align: left;
}
[data-theme="naturalist"] .t-table td,
[data-theme="obsidian-codex"] .t-table td,
[data-theme="cretaceous-greenhouse"] .t-table td,
[data-theme="volcanic-glass"] .t-table td,
[data-theme="polar-field-lab"] .t-table td,
[data-theme="vellum-atlas"] .t-table td {
  background: var(--panel);
  color: var(--ink-soft);
  border-bottom: 1px solid var(--rule);
  padding: 10px 14px;
  font-family: var(--font-body);
}
[data-theme="naturalist"] .t-table tr:hover td,
[data-theme="obsidian-codex"] .t-table tr:hover td,
[data-theme="cretaceous-greenhouse"] .t-table tr:hover td,
[data-theme="volcanic-glass"] .t-table tr:hover td,
[data-theme="polar-field-lab"] .t-table tr:hover td,
[data-theme="vellum-atlas"] .t-table tr:hover td {
  background: color-mix(in srgb, var(--panel), var(--accent) 6%);
}

/* ── 5. Badges / tags ───────────────────────────────────────────────── */

[data-theme="naturalist"] .t-badge,
[data-theme="obsidian-codex"] .t-badge,
[data-theme="cretaceous-greenhouse"] .t-badge,
[data-theme="volcanic-glass"] .t-badge,
[data-theme="polar-field-lab"] .t-badge,
[data-theme="vellum-atlas"] .t-badge {
  border: 1px solid var(--panel-edge);
  background: color-mix(in srgb, var(--panel), var(--ink) 4%);
  color: var(--ink-soft);
  font-family: var(--font-mono);
  font-size: 0.7rem;
  letter-spacing: 0.10em;
  text-transform: uppercase;
  padding: 3px 10px;
  border-radius: 999px;
}
[data-theme="naturalist"] .t-badge.warn,
[data-theme="obsidian-codex"] .t-badge.warn,
[data-theme="cretaceous-greenhouse"] .t-badge.warn,
[data-theme="volcanic-glass"] .t-badge.warn,
[data-theme="polar-field-lab"] .t-badge.warn,
[data-theme="vellum-atlas"] .t-badge.warn {
  color: var(--accent-2);
  border-color: color-mix(in srgb, var(--accent-2), transparent 60%);
}
[data-theme="naturalist"] .t-badge.ok,
[data-theme="obsidian-codex"] .t-badge.ok,
[data-theme="cretaceous-greenhouse"] .t-badge.ok,
[data-theme="volcanic-glass"] .t-badge.ok,
[data-theme="polar-field-lab"] .t-badge.ok,
[data-theme="vellum-atlas"] .t-badge.ok {
  color: var(--accent);
  border-color: color-mix(in srgb, var(--accent), transparent 60%);
}

/* ── 6. Section heads + rule blocks ─────────────────────────────────── */

[data-theme="naturalist"] .section-head,
[data-theme="obsidian-codex"] .section-head,
[data-theme="cretaceous-greenhouse"] .section-head,
[data-theme="volcanic-glass"] .section-head,
[data-theme="polar-field-lab"] .section-head,
[data-theme="vellum-atlas"] .section-head {
  border-bottom: 1px solid var(--rule);
  padding-bottom: 6px;
  margin: 24px 0 14px;
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 12px;
}
[data-theme="naturalist"] .section-head h2,
[data-theme="obsidian-codex"] .section-head h2,
[data-theme="cretaceous-greenhouse"] .section-head h2,
[data-theme="volcanic-glass"] .section-head h2,
[data-theme="polar-field-lab"] .section-head h2,
[data-theme="vellum-atlas"] .section-head h2 {
  font-family: var(--font-display);
  font-weight: var(--weight-display);
  letter-spacing: var(--tracking-display);
  font-size: 1.4rem;
  color: var(--ink);
  margin: 0;
  text-transform: none;
}
[data-theme="naturalist"] .section-head .sc-badge,
[data-theme="obsidian-codex"] .section-head .sc-badge,
[data-theme="cretaceous-greenhouse"] .section-head .sc-badge,
[data-theme="volcanic-glass"] .section-head .sc-badge,
[data-theme="polar-field-lab"] .section-head .sc-badge,
[data-theme="vellum-atlas"] .section-head .sc-badge {
  font-family: var(--font-mono);
  font-size: 0.7rem;
  letter-spacing: 0.16em;
  color: var(--ink-dim);
  text-transform: uppercase;
}
[data-theme="naturalist"] .rule-block,
[data-theme="obsidian-codex"] .rule-block,
[data-theme="cretaceous-greenhouse"] .rule-block,
[data-theme="volcanic-glass"] .rule-block,
[data-theme="polar-field-lab"] .rule-block,
[data-theme="vellum-atlas"] .rule-block {
  background: color-mix(in srgb, var(--panel), var(--accent) 3%);
  border-left: 3px solid var(--accent);
  border-radius: 0 var(--radius-panel) var(--radius-panel) 0;
  padding: 14px 18px;
  margin: 12px 0;
  color: var(--ink-soft);
  font-family: var(--font-body);
}
[data-theme="naturalist"] .rule-block strong,
[data-theme="obsidian-codex"] .rule-block strong,
[data-theme="cretaceous-greenhouse"] .rule-block strong,
[data-theme="volcanic-glass"] .rule-block strong,
[data-theme="polar-field-lab"] .rule-block strong,
[data-theme="vellum-atlas"] .rule-block strong {
  color: var(--accent);
  font-family: var(--font-display);
  font-weight: var(--weight-display);
  letter-spacing: var(--tracking-display);
}

/* ── 7. Species cards + filter chips (species_list.html) ───────────── */

[data-theme="naturalist"] .sp-card,
[data-theme="obsidian-codex"] .sp-card,
[data-theme="cretaceous-greenhouse"] .sp-card,
[data-theme="volcanic-glass"] .sp-card,
[data-theme="polar-field-lab"] .sp-card,
[data-theme="vellum-atlas"] .sp-card {
  background: var(--panel);
  background-image: var(--texture-panel);
  border: 1px solid var(--panel-edge);
  border-radius: var(--radius-panel);
  padding: 18px 20px 16px;
  transition: border-color 200ms ease, transform 120ms ease, box-shadow 200ms ease;
  box-shadow: var(--shadow-panel);
  position: relative;
  overflow: hidden;
}
[data-theme="naturalist"] .sp-card::before,
[data-theme="obsidian-codex"] .sp-card::before,
[data-theme="cretaceous-greenhouse"] .sp-card::before,
[data-theme="volcanic-glass"] .sp-card::before,
[data-theme="polar-field-lab"] .sp-card::before,
[data-theme="vellum-atlas"] .sp-card::before {
  background: var(--accent);
  height: 2px;
}
[data-theme="naturalist"] .sp-card:hover,
[data-theme="obsidian-codex"] .sp-card:hover,
[data-theme="cretaceous-greenhouse"] .sp-card:hover,
[data-theme="volcanic-glass"] .sp-card:hover,
[data-theme="polar-field-lab"] .sp-card:hover,
[data-theme="vellum-atlas"] .sp-card:hover {
  border-color: var(--accent);
  transform: translateY(-3px);
  box-shadow: 0 18px 44px rgba(0, 0, 0, 0.50);
}
[data-theme="naturalist"] .sp-name,
[data-theme="obsidian-codex"] .sp-name,
[data-theme="cretaceous-greenhouse"] .sp-name,
[data-theme="volcanic-glass"] .sp-name,
[data-theme="polar-field-lab"] .sp-name,
[data-theme="vellum-atlas"] .sp-name {
  font-family: var(--font-display);
  font-size: 1.25rem;
  font-weight: var(--weight-display);
  letter-spacing: var(--tracking-display);
  color: var(--ink);
}
[data-theme="naturalist"] .sp-sci,
[data-theme="obsidian-codex"] .sp-sci,
[data-theme="cretaceous-greenhouse"] .sp-sci,
[data-theme="volcanic-glass"] .sp-sci,
[data-theme="polar-field-lab"] .sp-sci,
[data-theme="vellum-atlas"] .sp-sci {
  font-family: var(--font-display);
  font-style: italic;
  color: var(--ink-dim);
}
[data-theme="naturalist"] .sp-tag,
[data-theme="obsidian-codex"] .sp-tag,
[data-theme="cretaceous-greenhouse"] .sp-tag,
[data-theme="volcanic-glass"] .sp-tag,
[data-theme="polar-field-lab"] .sp-tag,
[data-theme="vellum-atlas"] .sp-tag {
  background: color-mix(in srgb, var(--panel), var(--ink) 5%);
  border: 1px solid var(--panel-edge);
  color: var(--ink-soft);
  font-family: var(--font-mono);
  font-size: 0.66rem;
  letter-spacing: 0.10em;
  padding: 3px 10px;
  border-radius: 999px;
  text-transform: uppercase;
}
[data-theme="naturalist"] .sp-tag-apex,
[data-theme="obsidian-codex"] .sp-tag-apex,
[data-theme="cretaceous-greenhouse"] .sp-tag-apex,
[data-theme="volcanic-glass"] .sp-tag-apex,
[data-theme="polar-field-lab"] .sp-tag-apex,
[data-theme="vellum-atlas"] .sp-tag-apex {
  color: var(--accent-2);
  border-color: color-mix(in srgb, var(--accent-2), transparent 60%);
}
[data-theme="naturalist"] .sp-tag-difficulty,
[data-theme="obsidian-codex"] .sp-tag-difficulty,
[data-theme="cretaceous-greenhouse"] .sp-tag-difficulty,
[data-theme="volcanic-glass"] .sp-tag-difficulty,
[data-theme="polar-field-lab"] .sp-tag-difficulty,
[data-theme="vellum-atlas"] .sp-tag-difficulty {
  color: var(--accent);
  border-color: color-mix(in srgb, var(--accent), transparent 50%);
}
[data-theme="naturalist"] .sp-stats-row,
[data-theme="obsidian-codex"] .sp-stats-row,
[data-theme="cretaceous-greenhouse"] .sp-stats-row,
[data-theme="volcanic-glass"] .sp-stats-row,
[data-theme="polar-field-lab"] .sp-stats-row,
[data-theme="vellum-atlas"] .sp-stats-row {
  border-top: 1px solid var(--rule);
  color: var(--ink-dim);
  font-family: var(--font-mono);
}
[data-theme="naturalist"] .sp-stats-row > span > b,
[data-theme="obsidian-codex"] .sp-stats-row > span > b,
[data-theme="cretaceous-greenhouse"] .sp-stats-row > span > b,
[data-theme="volcanic-glass"] .sp-stats-row > span > b,
[data-theme="polar-field-lab"] .sp-stats-row > span > b,
[data-theme="vellum-atlas"] .sp-stats-row > span > b {
  color: var(--accent);
}
[data-theme="naturalist"] .sp-filter-bar,
[data-theme="obsidian-codex"] .sp-filter-bar,
[data-theme="cretaceous-greenhouse"] .sp-filter-bar,
[data-theme="volcanic-glass"] .sp-filter-bar,
[data-theme="polar-field-lab"] .sp-filter-bar,
[data-theme="vellum-atlas"] .sp-filter-bar {
  background: var(--panel);
  border: 1px solid var(--panel-edge);
  border-radius: var(--radius-panel);
  box-shadow: var(--shadow-panel);
}
[data-theme="naturalist"] .sp-filter-search,
[data-theme="obsidian-codex"] .sp-filter-search,
[data-theme="cretaceous-greenhouse"] .sp-filter-search,
[data-theme="volcanic-glass"] .sp-filter-search,
[data-theme="polar-field-lab"] .sp-filter-search,
[data-theme="vellum-atlas"] .sp-filter-search {
  background: color-mix(in srgb, var(--bg), var(--panel) 30%);
  border: 1px solid var(--rule);
  color: var(--ink);
  font-family: var(--font-body);
}
[data-theme="naturalist"] .sp-filter-search:focus,
[data-theme="obsidian-codex"] .sp-filter-search:focus,
[data-theme="cretaceous-greenhouse"] .sp-filter-search:focus,
[data-theme="volcanic-glass"] .sp-filter-search:focus,
[data-theme="polar-field-lab"] .sp-filter-search:focus,
[data-theme="vellum-atlas"] .sp-filter-search:focus {
  border-color: var(--accent);
  outline: 2px solid color-mix(in srgb, var(--accent), transparent 70%);
  outline-offset: 2px;
}
[data-theme="naturalist"] .sp-filter-chip,
[data-theme="obsidian-codex"] .sp-filter-chip,
[data-theme="cretaceous-greenhouse"] .sp-filter-chip,
[data-theme="volcanic-glass"] .sp-filter-chip,
[data-theme="polar-field-lab"] .sp-filter-chip,
[data-theme="vellum-atlas"] .sp-filter-chip {
  background: color-mix(in srgb, var(--bg), var(--panel) 35%);
  border: 1px solid var(--rule);
  color: var(--ink-soft);
  font-family: var(--font-mono);
  letter-spacing: 0.08em;
  text-transform: uppercase;
}
[data-theme="naturalist"] .sp-filter-chip:hover,
[data-theme="obsidian-codex"] .sp-filter-chip:hover,
[data-theme="cretaceous-greenhouse"] .sp-filter-chip:hover,
[data-theme="volcanic-glass"] .sp-filter-chip:hover,
[data-theme="polar-field-lab"] .sp-filter-chip:hover,
[data-theme="vellum-atlas"] .sp-filter-chip:hover {
  border-color: var(--accent);
  color: var(--ink);
}
[data-theme="naturalist"] .sp-filter-chip.active,
[data-theme="obsidian-codex"] .sp-filter-chip.active,
[data-theme="cretaceous-greenhouse"] .sp-filter-chip.active,
[data-theme="volcanic-glass"] .sp-filter-chip.active,
[data-theme="polar-field-lab"] .sp-filter-chip.active,
[data-theme="vellum-atlas"] .sp-filter-chip.active {
  background: color-mix(in srgb, var(--accent), transparent 80%);
  border-color: var(--accent);
  color: var(--accent);
}
[data-theme="naturalist"] .sp-future-banner,
[data-theme="obsidian-codex"] .sp-future-banner,
[data-theme="cretaceous-greenhouse"] .sp-future-banner,
[data-theme="volcanic-glass"] .sp-future-banner,
[data-theme="polar-field-lab"] .sp-future-banner,
[data-theme="vellum-atlas"] .sp-future-banner {
  background: color-mix(in srgb, var(--accent), transparent 85%);
  border: 1px dashed var(--accent);
  color: var(--accent);
  font-family: var(--font-mono);
}

/* ── 8. Footer + nav ────────────────────────────────────────────────── */

[data-theme="naturalist"] header.nav,
[data-theme="obsidian-codex"] header.nav,
[data-theme="cretaceous-greenhouse"] header.nav,
[data-theme="volcanic-glass"] header.nav,
[data-theme="polar-field-lab"] header.nav,
[data-theme="vellum-atlas"] header.nav {
  background: color-mix(in srgb, var(--bg), #000 25%);
  border-bottom: 1px solid var(--rule);
}
[data-theme="naturalist"] header.nav nav a,
[data-theme="obsidian-codex"] header.nav nav a,
[data-theme="cretaceous-greenhouse"] header.nav nav a,
[data-theme="volcanic-glass"] header.nav nav a,
[data-theme="polar-field-lab"] header.nav nav a,
[data-theme="vellum-atlas"] header.nav nav a {
  color: var(--ink-soft);
  font-family: var(--font-body);
  font-weight: 500;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  font-size: 0.8rem;
}
[data-theme="naturalist"] header.nav nav a:hover,
[data-theme="obsidian-codex"] header.nav nav a:hover,
[data-theme="cretaceous-greenhouse"] header.nav nav a:hover,
[data-theme="volcanic-glass"] header.nav nav a:hover,
[data-theme="polar-field-lab"] header.nav nav a:hover,
[data-theme="vellum-atlas"] header.nav nav a:hover {
  color: var(--accent);
}
[data-theme="naturalist"] header.nav .brand,
[data-theme="obsidian-codex"] header.nav .brand,
[data-theme="cretaceous-greenhouse"] header.nav .brand,
[data-theme="volcanic-glass"] header.nav .brand,
[data-theme="polar-field-lab"] header.nav .brand,
[data-theme="vellum-atlas"] header.nav .brand {
  font-family: var(--font-display);
  font-weight: var(--weight-display);
  letter-spacing: var(--tracking-display);
  color: var(--ink);
}
[data-theme="naturalist"] footer,
[data-theme="obsidian-codex"] footer,
[data-theme="cretaceous-greenhouse"] footer,
[data-theme="volcanic-glass"] footer,
[data-theme="polar-field-lab"] footer,
[data-theme="vellum-atlas"] footer {
  background: color-mix(in srgb, var(--bg), #000 30%);
  border-top: 1px solid var(--rule);
  color: var(--ink-soft);
  font-family: var(--font-body);
}
[data-theme="naturalist"] footer strong,
[data-theme="obsidian-codex"] footer strong,
[data-theme="cretaceous-greenhouse"] footer strong,
[data-theme="volcanic-glass"] footer strong,
[data-theme="polar-field-lab"] footer strong,
[data-theme="vellum-atlas"] footer strong {
  color: var(--ink);
  font-family: var(--font-display);
  letter-spacing: var(--tracking-display);
}

/* ── 9. Disable legacy ambient ember + grain layers in premium themes ─ */

[data-theme="naturalist"] .nx-ember-layer,
[data-theme="obsidian-codex"] .nx-ember-layer,
[data-theme="cretaceous-greenhouse"] .nx-ember-layer,
[data-theme="volcanic-glass"] .nx-ember-layer,
[data-theme="polar-field-lab"] .nx-ember-layer,
[data-theme="vellum-atlas"] .nx-ember-layer,
[data-theme="naturalist"] .nx-grain-layer,
[data-theme="obsidian-codex"] .nx-grain-layer,
[data-theme="cretaceous-greenhouse"] .nx-grain-layer,
[data-theme="volcanic-glass"] .nx-grain-layer,
[data-theme="polar-field-lab"] .nx-grain-layer,
[data-theme="vellum-atlas"] .nx-grain-layer,
[data-theme="naturalist"] .nx-accent-layer,
[data-theme="obsidian-codex"] .nx-accent-layer,
[data-theme="cretaceous-greenhouse"] .nx-accent-layer,
[data-theme="volcanic-glass"] .nx-accent-layer,
[data-theme="polar-field-lab"] .nx-accent-layer,
[data-theme="vellum-atlas"] .nx-accent-layer {
  display: none;
}

/* ── 10. Panel corner ornaments (theme-specific top-left + bottom-right) ─
 * Mounted via ::before / ::after on .t-panel and .premium-panel. The
 * `--ornament-fill` token tints the SVG via the `mask-image` recolour
 * trick: the SVG itself uses currentColor, so we set color: directly
 * and use a CSS mask to render only the ornament shape. */

[data-theme="naturalist"] .t-panel,
[data-theme="naturalist"] .premium-panel {
  --ornament-img: url('/static/img/ornaments/leaf-stamp.svg');
}
[data-theme="obsidian-codex"] .t-panel,
[data-theme="obsidian-codex"] .premium-panel {
  --ornament-img: url('/static/img/ornaments/gold-flourish.svg');
}
[data-theme="cretaceous-greenhouse"] .t-panel,
[data-theme="cretaceous-greenhouse"] .premium-panel {
  --ornament-img: url('/static/img/ornaments/fern-frond.svg');
}
[data-theme="volcanic-glass"] .t-panel,
[data-theme="volcanic-glass"] .premium-panel {
  --ornament-img: url('/static/img/ornaments/scarab.svg');
}
[data-theme="polar-field-lab"] .t-panel,
[data-theme="polar-field-lab"] .premium-panel {
  --ornament-img: url('/static/img/ornaments/hex-rivet.svg');
}
[data-theme="vellum-atlas"] .t-panel,
[data-theme="vellum-atlas"] .premium-panel {
  --ornament-img: url('/static/img/ornaments/compass-rose.svg');
}

/* Mount the ornament at the bottom-right of each panel — small, tinted
 * by the theme's --ornament-fill, low opacity so it reads as a watermark
 * rather than competing with content. The corner-bracket below is also
 * mounted top-left for a hard-edge frame on every theme. */
[data-theme="naturalist"] .t-panel,
[data-theme="obsidian-codex"] .t-panel,
[data-theme="cretaceous-greenhouse"] .t-panel,
[data-theme="volcanic-glass"] .t-panel,
[data-theme="polar-field-lab"] .t-panel,
[data-theme="vellum-atlas"] .t-panel,
[data-theme="naturalist"] .premium-panel,
[data-theme="obsidian-codex"] .premium-panel,
[data-theme="cretaceous-greenhouse"] .premium-panel,
[data-theme="volcanic-glass"] .premium-panel,
[data-theme="polar-field-lab"] .premium-panel,
[data-theme="vellum-atlas"] .premium-panel {
  position: relative;
}
[data-theme="naturalist"] .t-panel::after,
[data-theme="obsidian-codex"] .t-panel::after,
[data-theme="cretaceous-greenhouse"] .t-panel::after,
[data-theme="volcanic-glass"] .t-panel::after,
[data-theme="polar-field-lab"] .t-panel::after,
[data-theme="vellum-atlas"] .t-panel::after,
[data-theme="naturalist"] .premium-panel::after,
[data-theme="obsidian-codex"] .premium-panel::after,
[data-theme="cretaceous-greenhouse"] .premium-panel::after,
[data-theme="volcanic-glass"] .premium-panel::after,
[data-theme="polar-field-lab"] .premium-panel::after,
[data-theme="vellum-atlas"] .premium-panel::after {
  content: "";
  position: absolute;
  right: 14px;
  bottom: 12px;
  width: 56px;
  height: 56px;
  background-color: var(--ornament-fill, var(--accent));
  -webkit-mask: var(--ornament-img) center/contain no-repeat;
          mask: var(--ornament-img) center/contain no-repeat;
  opacity: 0.18;
  pointer-events: none;
  transition: opacity 240ms ease;
}
[data-theme="naturalist"] .t-panel:hover::after,
[data-theme="obsidian-codex"] .t-panel:hover::after,
[data-theme="cretaceous-greenhouse"] .t-panel:hover::after,
[data-theme="volcanic-glass"] .t-panel:hover::after,
[data-theme="polar-field-lab"] .t-panel:hover::after,
[data-theme="vellum-atlas"] .t-panel:hover::after,
[data-theme="naturalist"] .premium-panel:hover::after,
[data-theme="obsidian-codex"] .premium-panel:hover::after,
[data-theme="cretaceous-greenhouse"] .premium-panel:hover::after,
[data-theme="volcanic-glass"] .premium-panel:hover::after,
[data-theme="polar-field-lab"] .premium-panel:hover::after,
[data-theme="vellum-atlas"] .premium-panel:hover::after {
  opacity: 0.30;
}

/* Top-left bracket — universal, sized smaller, used as a hard frame.
 * Hidden on mobile widths where the title would crowd it. */
[data-theme="naturalist"] .t-panel::before,
[data-theme="obsidian-codex"] .t-panel::before,
[data-theme="cretaceous-greenhouse"] .t-panel::before,
[data-theme="volcanic-glass"] .t-panel::before,
[data-theme="polar-field-lab"] .t-panel::before,
[data-theme="vellum-atlas"] .t-panel::before {
  content: "";
  position: absolute;
  left: -1px;
  top: -1px;
  width: 28px;
  height: 28px;
  background-color: var(--accent);
  -webkit-mask: url('/static/img/ornaments/corner-bracket.svg') center/contain no-repeat;
          mask: url('/static/img/ornaments/corner-bracket.svg') center/contain no-repeat;
  opacity: 0.55;
  pointer-events: none;
  z-index: 1;
}
@media (max-width: 720px) {
  [data-theme="naturalist"] .t-panel::before,
  [data-theme="obsidian-codex"] .t-panel::before,
  [data-theme="cretaceous-greenhouse"] .t-panel::before,
  [data-theme="volcanic-glass"] .t-panel::before,
  [data-theme="polar-field-lab"] .t-panel::before,
  [data-theme="vellum-atlas"] .t-panel::before {
    width: 18px; height: 18px;
  }
}

/* ── 11. Hero photography per theme ─────────────────────────────────
 * Each theme's primary hero photo sits behind the theme's veil
 * gradient (var(--texture-hero-veil)) so headlines stay legible at
 * any contrast level. Applied to .hero (the standard pages) and
 * .aegis-hero (the bespoke landing).
 *
 * Asset source: scripts/fetch_premium_assets.py pulls 5 hero photos
 * per theme into web/static/img/heroes/<theme>/ (Pexels, attributed
 * in docs/assets-attribution.md). The CSS below mounts the primary
 * pick per theme; future polish can rotate through the other 4 via
 * a JS picker keyed by page slug.
 */

[data-theme="naturalist"] .hero,
[data-theme="naturalist"] .aegis-hero {
  background:
    var(--texture-hero-veil),
    url('/static/img/heroes/naturalist/ridgeline-mist.jpeg') center/cover no-repeat fixed;
  border-radius: var(--radius-panel);
  padding-left: 32px; padding-right: 32px;
}
[data-theme="obsidian-codex"] .hero,
[data-theme="obsidian-codex"] .aegis-hero {
  background:
    var(--texture-hero-veil),
    url('/static/img/heroes/obsidian-codex/vitrine-singleton.jpeg') center/cover no-repeat fixed;
  border-radius: var(--radius-panel);
  padding-left: 32px; padding-right: 32px;
}
[data-theme="cretaceous-greenhouse"] .hero,
[data-theme="cretaceous-greenhouse"] .aegis-hero {
  background:
    var(--texture-hero-veil),
    url('/static/img/heroes/cretaceous-greenhouse/kew-canopy.jpeg') center/cover no-repeat fixed;
  border-radius: var(--radius-panel);
  padding-left: 32px; padding-right: 32px;
}
[data-theme="volcanic-glass"] .hero,
[data-theme="volcanic-glass"] .aegis-hero {
  background:
    var(--texture-hero-veil),
    url('/static/img/heroes/volcanic-glass/lava-river.jpeg') center/cover no-repeat fixed;
  border-radius: var(--radius-panel);
  padding-left: 32px; padding-right: 32px;
}
[data-theme="polar-field-lab"] .hero,
[data-theme="polar-field-lab"] .aegis-hero {
  background:
    var(--texture-hero-veil),
    url('/static/img/heroes/polar-field-lab/tundra-low-sun.jpeg') center/cover no-repeat fixed;
  border-radius: var(--radius-panel);
  padding-left: 32px; padding-right: 32px;
}
[data-theme="vellum-atlas"] .hero,
[data-theme="vellum-atlas"] .aegis-hero {
  background:
    var(--texture-hero-veil),
    url('/static/img/heroes/vellum-atlas/audubon-plate.jpeg') center/cover no-repeat fixed;
  border-radius: var(--radius-panel);
  padding-left: 32px; padding-right: 32px;
}

/* On mobile widths the fixed-background gives a shaky parallax — pin
 * the photo to the hero block on small viewports for smoother scroll. */
@media (max-width: 720px) {
  [data-theme="naturalist"] .hero,
  [data-theme="obsidian-codex"] .hero,
  [data-theme="cretaceous-greenhouse"] .hero,
  [data-theme="volcanic-glass"] .hero,
  [data-theme="polar-field-lab"] .hero,
  [data-theme="vellum-atlas"] .hero,
  [data-theme="naturalist"] .aegis-hero,
  [data-theme="obsidian-codex"] .aegis-hero,
  [data-theme="cretaceous-greenhouse"] .aegis-hero,
  [data-theme="volcanic-glass"] .aegis-hero,
  [data-theme="polar-field-lab"] .aegis-hero,
  [data-theme="vellum-atlas"] .aegis-hero {
    background-attachment: scroll;
  }
}

/* ── 12. Policy-acceptance gate panels (policy_accept.html) ──────── */

/* policy_accept.html declares its own .policy-panel / -head / -body
 * / -check / -actions classes — they're not the legacy .t-panel
 * family so the §3 overlay above doesn't catch them. Wire them
 * through the Phase-6 tokens here so the gate (which is the FIRST
 * page every visitor sees) reskins under all six themes. */

[data-theme="naturalist"] .policy-panel,
[data-theme="obsidian-codex"] .policy-panel,
[data-theme="cretaceous-greenhouse"] .policy-panel,
[data-theme="volcanic-glass"] .policy-panel,
[data-theme="polar-field-lab"] .policy-panel,
[data-theme="vellum-atlas"] .policy-panel {
  background: var(--panel);
  background-image: var(--texture-panel);
  border: 1px solid var(--panel-edge);
  border-radius: var(--radius-panel);
  box-shadow: var(--shadow-panel);
}

[data-theme="naturalist"] .policy-panel-head,
[data-theme="obsidian-codex"] .policy-panel-head,
[data-theme="cretaceous-greenhouse"] .policy-panel-head,
[data-theme="volcanic-glass"] .policy-panel-head,
[data-theme="polar-field-lab"] .policy-panel-head,
[data-theme="vellum-atlas"] .policy-panel-head {
  color: var(--accent);
  font-family: var(--font-display);
  font-weight: var(--weight-display);
  letter-spacing: var(--tracking-display);
  border-bottom: 1px solid var(--rule);
  background: linear-gradient(180deg,
              color-mix(in srgb, var(--panel), var(--ink) 4%) 0%,
              var(--panel) 100%);
}

[data-theme="naturalist"] .policy-panel-head .corner,
[data-theme="obsidian-codex"] .policy-panel-head .corner,
[data-theme="cretaceous-greenhouse"] .policy-panel-head .corner,
[data-theme="volcanic-glass"] .policy-panel-head .corner,
[data-theme="polar-field-lab"] .policy-panel-head .corner,
[data-theme="vellum-atlas"] .policy-panel-head .corner {
  display: none;
}

[data-theme="naturalist"] .policy-body,
[data-theme="obsidian-codex"] .policy-body,
[data-theme="cretaceous-greenhouse"] .policy-body,
[data-theme="volcanic-glass"] .policy-body,
[data-theme="polar-field-lab"] .policy-body,
[data-theme="vellum-atlas"] .policy-body {
  background: color-mix(in srgb, var(--bg), var(--panel) 60%);
  color: var(--ink-soft);
  font-family: var(--font-mono);
  border-bottom-left-radius: var(--radius-panel);
  border-bottom-right-radius: var(--radius-panel);
}

[data-theme="naturalist"] .policy-check,
[data-theme="obsidian-codex"] .policy-check,
[data-theme="cretaceous-greenhouse"] .policy-check,
[data-theme="volcanic-glass"] .policy-check,
[data-theme="polar-field-lab"] .policy-check,
[data-theme="vellum-atlas"] .policy-check {
  border-top: 1px solid var(--rule);
  color: var(--ink-soft);
  font-family: var(--font-body);
  background: color-mix(in srgb, var(--panel), var(--ink) 2%);
}

[data-theme="naturalist"] .policy-check input[type="checkbox"],
[data-theme="obsidian-codex"] .policy-check input[type="checkbox"],
[data-theme="cretaceous-greenhouse"] .policy-check input[type="checkbox"],
[data-theme="volcanic-glass"] .policy-check input[type="checkbox"],
[data-theme="polar-field-lab"] .policy-check input[type="checkbox"],
[data-theme="vellum-atlas"] .policy-check input[type="checkbox"] {
  accent-color: var(--accent);
}

[data-theme="naturalist"] .policy-actions button,
[data-theme="obsidian-codex"] .policy-actions button,
[data-theme="cretaceous-greenhouse"] .policy-actions button,
[data-theme="volcanic-glass"] .policy-actions button,
[data-theme="polar-field-lab"] .policy-actions button,
[data-theme="vellum-atlas"] .policy-actions button {
  background: linear-gradient(135deg,
    var(--accent),
    color-mix(in srgb, var(--accent), #000 25%));
  color: var(--bg);
  border: 1px solid color-mix(in srgb, var(--accent), transparent 30%);
  font-family: var(--font-body);
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.10em;
  border-radius: 4px;
  transition: filter 160ms ease, transform 80ms ease, box-shadow 200ms ease;
}
[data-theme="naturalist"] .policy-actions button:hover,
[data-theme="obsidian-codex"] .policy-actions button:hover,
[data-theme="cretaceous-greenhouse"] .policy-actions button:hover,
[data-theme="volcanic-glass"] .policy-actions button:hover,
[data-theme="polar-field-lab"] .policy-actions button:hover,
[data-theme="vellum-atlas"] .policy-actions button:hover {
  filter: brightness(1.08);
  box-shadow: 0 6px 18px color-mix(in srgb, var(--accent), transparent 70%);
}
[data-theme="naturalist"] .policy-actions button:disabled,
[data-theme="obsidian-codex"] .policy-actions button:disabled,
[data-theme="cretaceous-greenhouse"] .policy-actions button:disabled,
[data-theme="volcanic-glass"] .policy-actions button:disabled,
[data-theme="polar-field-lab"] .policy-actions button:disabled,
[data-theme="vellum-atlas"] .policy-actions button:disabled {
  background: color-mix(in srgb, var(--panel), var(--ink) 12%);
  color: var(--ink-dim);
  border-color: var(--rule);
  filter: none;
  box-shadow: none;
}

[data-theme="naturalist"] .version-badge,
[data-theme="obsidian-codex"] .version-badge,
[data-theme="cretaceous-greenhouse"] .version-badge,
[data-theme="volcanic-glass"] .version-badge,
[data-theme="polar-field-lab"] .version-badge,
[data-theme="vellum-atlas"] .version-badge {
  font-family: var(--font-mono);
  color: var(--ink-dim);
  letter-spacing: 0.10em;
}

/* ── 13. Vellum-atlas is light — invert default body background ───── */

[data-theme="vellum-atlas"] body {
  color: var(--ink);
}
[data-theme="vellum-atlas"] header.nav {
  background: var(--panel);
  border-bottom: 1px solid var(--panel-edge);
}
[data-theme="vellum-atlas"] footer {
  background: color-mix(in srgb, var(--bg), var(--ink) 4%);
  border-top: 1px solid var(--panel-edge);
}
[data-theme="vellum-atlas"] header.nav nav a {
  color: var(--ink-soft);
}
[data-theme="vellum-atlas"] header.nav nav a:hover {
  color: var(--accent-2);
}

/* ── §13. Phase-6.x — 4 new themes inherit overlay retargeting ────
 * solarpunk / bioluminescent-deep / steampunk-foundry / martian-survey
 * need the same legacy-class retargets (.t-panel, .t-panel-head,
 * .t-eyebrow, .hero h1, .section-head, .rule-block, .t-badge,
 * .t-table, .sp-card, .policy-*) that the original six get above.
 * Rather than retrofit every grouped selector, this block paints
 * those classes through the tokens for the new themes specifically. */

[data-theme="solarpunk"]           .t-panel,
[data-theme="bioluminescent-deep"] .t-panel,
[data-theme="steampunk-foundry"]   .t-panel,
[data-theme="martian-survey"]      .t-panel {
  background: var(--panel);
  background-image: var(--texture-panel);
  border: 1px solid var(--panel-edge);
  border-radius: var(--radius-panel);
  box-shadow: var(--shadow-panel);
  margin-bottom: 18px;
  overflow: hidden;
}
[data-theme="solarpunk"]           .t-panel-head,
[data-theme="bioluminescent-deep"] .t-panel-head,
[data-theme="steampunk-foundry"]   .t-panel-head,
[data-theme="martian-survey"]      .t-panel-head {
  background: linear-gradient(180deg,
              color-mix(in srgb, var(--panel), var(--ink) 4%) 0%,
              var(--panel) 100%);
  color: var(--ink);
  font-family: var(--font-display);
  font-weight: var(--weight-display);
  letter-spacing: var(--tracking-display);
  border-bottom: 1px solid var(--rule);
  padding: 14px 22px;
}
[data-theme="solarpunk"]           .t-panel-head .corner,
[data-theme="bioluminescent-deep"] .t-panel-head .corner,
[data-theme="steampunk-foundry"]   .t-panel-head .corner,
[data-theme="martian-survey"]      .t-panel-head .corner { display: none; }
[data-theme="solarpunk"]           .t-panel-body,
[data-theme="bioluminescent-deep"] .t-panel-body,
[data-theme="steampunk-foundry"]   .t-panel-body,
[data-theme="martian-survey"]      .t-panel-body {
  padding: 18px 22px;
  font-family: var(--font-body);
  color: var(--ink-soft);
  line-height: 1.65;
}
[data-theme="solarpunk"]           .t-eyebrow,
[data-theme="bioluminescent-deep"] .t-eyebrow,
[data-theme="steampunk-foundry"]   .t-eyebrow,
[data-theme="martian-survey"]      .t-eyebrow {
  font-family: var(--font-mono);
  font-size: 0.72rem;
  letter-spacing: 0.32em;
  text-transform: uppercase;
  color: var(--ink-dim);
}
[data-theme="solarpunk"]           .hero .sub,
[data-theme="bioluminescent-deep"] .hero .sub,
[data-theme="steampunk-foundry"]   .hero .sub,
[data-theme="martian-survey"]      .hero .sub {
  font-family: var(--font-body);
  color: var(--ink-soft);
  max-width: 70ch;
  line-height: 1.55;
}
[data-theme="solarpunk"]           .section-head,
[data-theme="bioluminescent-deep"] .section-head,
[data-theme="steampunk-foundry"]   .section-head,
[data-theme="martian-survey"]      .section-head {
  border-bottom: 1px solid var(--rule);
  padding-bottom: 6px;
  margin: 24px 0 14px;
}
[data-theme="solarpunk"]           .section-head h2,
[data-theme="bioluminescent-deep"] .section-head h2,
[data-theme="steampunk-foundry"]   .section-head h2,
[data-theme="martian-survey"]      .section-head h2 {
  font-family: var(--font-display);
  font-weight: var(--weight-display);
  letter-spacing: var(--tracking-display);
  color: var(--ink);
}
[data-theme="solarpunk"]           .rule-block,
[data-theme="bioluminescent-deep"] .rule-block,
[data-theme="steampunk-foundry"]   .rule-block,
[data-theme="martian-survey"]      .rule-block {
  background: color-mix(in srgb, var(--panel), var(--accent) 3%);
  border-left: 3px solid var(--accent);
  border-radius: 0 var(--radius-panel) var(--radius-panel) 0;
  padding: 14px 18px;
  color: var(--ink-soft);
}
[data-theme="solarpunk"]           .t-badge,
[data-theme="bioluminescent-deep"] .t-badge,
[data-theme="steampunk-foundry"]   .t-badge,
[data-theme="martian-survey"]      .t-badge {
  border: 1px solid var(--panel-edge);
  background: color-mix(in srgb, var(--panel), var(--ink) 4%);
  color: var(--ink-soft);
  font-family: var(--font-mono);
  border-radius: 999px;
}
[data-theme="solarpunk"]           a,
[data-theme="bioluminescent-deep"] a,
[data-theme="steampunk-foundry"]   a,
[data-theme="martian-survey"]      a {
  color: var(--accent);
}
[data-theme="solarpunk"]           header.nav,
[data-theme="bioluminescent-deep"] header.nav,
[data-theme="steampunk-foundry"]   header.nav,
[data-theme="martian-survey"]      header.nav {
  background: color-mix(in srgb, var(--bg), #000 25%);
  border-bottom: 1px solid var(--rule);
}
[data-theme="solarpunk"]           header.nav nav a,
[data-theme="bioluminescent-deep"] header.nav nav a,
[data-theme="steampunk-foundry"]   header.nav nav a,
[data-theme="martian-survey"]      header.nav nav a {
  color: var(--ink-soft);
}
[data-theme="solarpunk"]           header.nav nav a:hover,
[data-theme="bioluminescent-deep"] header.nav nav a:hover,
[data-theme="steampunk-foundry"]   header.nav nav a:hover,
[data-theme="martian-survey"]      header.nav nav a:hover { color: var(--accent); }
[data-theme="solarpunk"]           footer,
[data-theme="bioluminescent-deep"] footer,
[data-theme="steampunk-foundry"]   footer,
[data-theme="martian-survey"]      footer {
  background: color-mix(in srgb, var(--bg), #000 30%);
  border-top: 1px solid var(--rule);
  color: var(--ink-soft);
}
[data-theme="solarpunk"]           .policy-panel,
[data-theme="bioluminescent-deep"] .policy-panel,
[data-theme="steampunk-foundry"]   .policy-panel,
[data-theme="martian-survey"]      .policy-panel {
  background: var(--panel);
  border: 1px solid var(--panel-edge);
  border-radius: var(--radius-panel);
  box-shadow: var(--shadow-panel);
}
[data-theme="solarpunk"]           .policy-panel-head,
[data-theme="bioluminescent-deep"] .policy-panel-head,
[data-theme="steampunk-foundry"]   .policy-panel-head,
[data-theme="martian-survey"]      .policy-panel-head {
  color: var(--accent);
  font-family: var(--font-display);
  border-bottom: 1px solid var(--rule);
}
[data-theme="solarpunk"]           .policy-actions button,
[data-theme="bioluminescent-deep"] .policy-actions button,
[data-theme="steampunk-foundry"]   .policy-actions button,
[data-theme="martian-survey"]      .policy-actions button {
  background: linear-gradient(135deg,
    var(--accent),
    color-mix(in srgb, var(--accent), #000 25%));
  color: var(--bg);
  border: 1px solid var(--accent);
  text-transform: uppercase;
  letter-spacing: 0.10em;
  border-radius: 4px;
}

/* ── §14. Vellum-atlas contrast hardening ─────────────────────────
 * Light theme — make absolutely sure no white-on-white. ink + ink-soft
 * are dark walnut. Every legacy class that defaulted to a light text
 * colour gets re-pinned to var(--ink). */
[data-theme="vellum-atlas"] body,
[data-theme="vellum-atlas"] .hero .sub,
[data-theme="vellum-atlas"] .t-panel-body,
[data-theme="vellum-atlas"] .t-row,
[data-theme="vellum-atlas"] .rule-block,
[data-theme="vellum-atlas"] .t-table td,
[data-theme="vellum-atlas"] footer,
[data-theme="vellum-atlas"] .policy-body,
[data-theme="vellum-atlas"] .policy-check {
  color: var(--ink) !important;
}
[data-theme="vellum-atlas"] .ink-dim,
[data-theme="vellum-atlas"] .t-panel-head,
[data-theme="vellum-atlas"] .section-head h2 {
  color: var(--accent) !important;
}
[data-theme="vellum-atlas"] code,
[data-theme="vellum-atlas"] kbd,
[data-theme="vellum-atlas"] pre {
  background: color-mix(in srgb, var(--panel), var(--ink) 8%);
  color: var(--ink) !important;
  border: 1px solid var(--rule);
}