/* Factions page styles — uses base variables and utilities */
.hero { display: grid; gap: var(--space-6); align-items: center; padding-block: var(--space-16) var(--space-10); }
.hero__content { max-width: 60ch; }
.hero__actions { display: flex; gap: var(--space-4); flex-wrap: wrap; margin-top: var(--space-4); }
.hero__media { position: relative; }
.hero__media img { width: 100%; height: auto; box-shadow: var(--shadow-3); }

.tools { padding-block: var(--space-6); }
.tools__grid { display: grid; gap: var(--space-6); grid-template-columns: 1fr; }
.search label { display: block; margin-bottom: var(--space-2); color: var(--color-text-muted); }

.toc { background: linear-gradient(180deg, color-mix(in oklab, var(--color-bg-elevated) 92%, black), var(--color-surface)); border: 1px solid rgba(255,255,255,0.05); border-radius: var(--radius-l); padding: var(--space-5); box-shadow: var(--shadow-2); }
.toc__title { font-size: var(--fs-500); margin: 0 0 var(--space-3) 0; }
.toc__list { display: grid; gap: var(--space-2); grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); }
.toc__list a { color: var(--color-text); border-bottom: 1px dashed rgba(255,255,255,0.15); padding-bottom: 2px; }
.toc__list a:hover { color: var(--color-primary); text-decoration: none; border-color: color-mix(in oklab, var(--color-primary) 50%, rgba(255,255,255,0.15)); }

@media (min-width: 992px) {
  .tools__grid { grid-template-columns: 1.2fr 1fr; align-items: start; }
  .toc { position: sticky; top: var(--space-10); }
}

.factions { padding-block: var(--space-8) var(--space-16); }
.faction { display: grid; gap: var(--space-4); }
.faction__intro { color: var(--color-text-muted); }
.faction__en { font-size: var(--fs-300); color: var(--gray-300); font-family: var(--font-sans); letter-spacing: 0.02em; }
.faction__ctas { display: flex; gap: var(--space-3); flex-wrap: wrap; margin-top: var(--space-2); }
.faction__figure { margin-top: var(--space-2); }

.backtop { margin-top: var(--space-12); text-align: center; }

/* Filter state */
[data-empty]\:hidden { display: none !important; }

/* Reduced motion safe hover */
@media (hover: hover) and (pointer: fine) {
  .faction:hover { transform: translateY(-2px); transition: transform var(--duration-fast) var(--ease-out), box-shadow var(--duration-base) var(--ease-out); box-shadow: var(--shadow-3); }
}