body.realm-1-origin {
  --realm-deep: #301726;
  --realm-surface: #3c1d30;
  --realm-mid: #c06584;
  --realm-hi: #f2a8bf;
  background-color: var(--realm-deep);
}

body.realm-2-form {
  --realm-deep: #1e242c;
  --realm-surface: #28303a;
  --realm-mid: #858f9d;
  --realm-hi: #cad2dc;
  background-color: var(--realm-deep);
}

body.realm-3-identity {
  --realm-deep: #142536;
  --realm-surface: #1b3248;
  --realm-mid: #5e8cae;
  --realm-hi: #b0d5f0;
  background-color: var(--realm-deep);
}

body.realm-4-will {
  --realm-deep: #361b11;
  --realm-surface: #442215;
  --realm-mid: #cf5c36;
  --realm-hi: #f79b68;
  background-color: var(--realm-deep);
}

body.realm-5-echoes {
  --realm-deep: #242e16;
  --realm-surface: #2f3c1d;
  --realm-mid: #768f3a;
  --realm-hi: #e1eef8;
  background-color: var(--realm-deep);
  background-image: linear-gradient(145deg, #283846 0%, #242e16 50%, #381d12 100%);
  background-attachment: fixed;
}

body.realm-6-compassion {
  --realm-deep: #102538;
  --realm-surface: #16324a;
  --realm-mid: #3c86be;
  --realm-hi: #8cd0fc;
  background-color: var(--realm-deep);
}

body.realm-7-presence {
  --realm-deep: #282d17;
  --realm-surface: #343a1e;
  --realm-mid: #898142;
  --realm-hi: #d2ca88;
  background-color: var(--realm-deep);
}

body.realm-8-integration {
  --realm-deep: #13322b;
  --realm-surface: #193f36;
  --realm-mid: #31927b;
  --realm-hi: #85e2c1;
  background-color: var(--realm-deep);
}

body.realm-9-threshold-fear {
  --realm-deep: #241733;
  --realm-surface: #301f44;
  --realm-mid: #916cc4;
  --realm-hi: #caa8f8;
  background-color: var(--realm-deep);
}

body.realm-10-return {
  --realm-deep: #2e2616;
  --realm-surface: #3a301c;
  --realm-mid: #c29b40;
  --realm-hi: #fbf0cf;
  background-color: var(--realm-deep);
}

/* The Great Wheel — Static Stylesheet */

:root {
  --bg-color: #1b1e2b;
  --card-bg: #232738;
  --card-bg-elevated: #292e41;
  --card-border: #363c54;
  --card-border-hover: #4c5470;
  --text-main: #e6e8ee;
  --text-muted: #c3c9d6;
  --text-dim: #b8bfcd;
  --accent: #dab886;
  --accent-hover: #ebd0a3;
  --accent-contrast: #0e1014;
  --accent-glow: rgba(218, 184, 134, 0.2);
  --accent-subtle: rgba(218, 184, 134, 0.08);

  --font-serif: "Charter", "Bitstream Charter", "Sitka Text", "Cambria", Georgia, serif;
  --font-sans: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;

  --max-width: 960px;
  --container-padding: 1.5rem;
}

*, *::before, *::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

html {
  font-size: 16px;
  scroll-behavior: smooth;
  background-color: var(--bg-color);
  color: var(--text-main);
  color-scheme: dark;
}

body {
  min-height: 100vh;
  font-family: var(--font-serif);
  line-height: 1.75;
  background-color: var(--bg-color);
  color: var(--text-main);
  text-rendering: optimizeLegibility;
  -webkit-font-smoothing: antialiased;
  display: flex;
  flex-direction: column;
}

body.home {
  --text-muted: #d6dbe4;
  --text-dim: #d6dbe4;
  background-color: #1b1e2b;
  background-image:
    radial-gradient(ellipse 55% 40% at 12% 10%, rgba(192, 101, 132, 0.22) 0%, transparent 70%),
    radial-gradient(ellipse 55% 40% at 88% 18%, rgba(94, 140, 174, 0.22) 0%, transparent 70%),
    radial-gradient(ellipse 60% 45% at 10% 55%, rgba(49, 146, 123, 0.18) 0%, transparent 70%),
    radial-gradient(ellipse 60% 45% at 90% 60%, rgba(207, 92, 54, 0.16) 0%, transparent 70%),
    radial-gradient(ellipse 60% 45% at 20% 92%, rgba(145, 108, 196, 0.18) 0%, transparent 70%),
    radial-gradient(ellipse 60% 45% at 80% 95%, rgba(60, 134, 190, 0.18) 0%, transparent 70%);
  background-attachment: fixed;
}

body.home .realm-card,
body.home .card,
body.home .wheel-inspector {
  background-color: rgba(30, 34, 50, 0.82);
}

main {
  flex: 1 0 auto;
}

.container {
  width: 100%;
  max-width: var(--max-width);
  margin-left: auto;
  margin-right: auto;
  padding-left: var(--container-padding);
  padding-right: var(--container-padding);
}

.text-container {
  max-width: 740px;
}

/* Header & Navigation */
.site-header {
  border-bottom: 1px solid var(--card-border);
  background-color: rgba(27, 30, 43, 0.94);
  backdrop-filter: blur(8px);
  position: sticky;
  top: 0;
  z-index: 100;
}

.nav-container {
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: 64px;
}

.site-logo {
  font-family: var(--font-serif);
  font-size: 1.25rem;
  font-weight: 600;
  letter-spacing: 0.05em;
  color: var(--text-main);
  text-decoration: none;
  transition: color 0.2s ease;
}

.site-logo:hover {
  color: var(--accent);
}

.nav-menu {
  display: flex;
  align-items: center;
  gap: 1.25rem;
}

.nav-link {
  font-family: var(--font-sans);
  font-size: 0.88rem;
  letter-spacing: 0.03em;
  color: var(--text-muted);
  text-decoration: none;
  transition: color 0.2s ease;
  white-space: nowrap;
}

.nav-link:hover, .nav-link:focus-visible {
  color: var(--accent);
}

.nav-link.active {
  color: var(--accent);
  font-weight: 600;
}

.nav-toggle {
  display: none;
  background: none;
  border: 1px solid var(--card-border);
  color: var(--text-main);
  font-size: 1.4rem;
  padding: 0.35rem 0.65rem;
  border-radius: 4px;
  cursor: pointer;
}

/* Desktop: site title sits on its own line above the menu */
@media (min-width: 681px) {
  .nav-container {
    flex-direction: column;
    justify-content: center;
    height: auto;
    padding-top: 0.9rem;
    padding-bottom: 0.7rem;
    gap: 0.55rem;
  }
  .site-logo {
    font-size: 1.6rem;
    text-align: center;
  }
  .nav-menu {
    justify-content: center;
    flex-wrap: wrap;
    row-gap: 0.4rem;
  }
}

/* Breadcrumbs */
.breadcrumb-bar {
  border-bottom: 1px solid var(--card-border);
  padding: 0.75rem 0;
  font-size: 0.85rem;
  background-color: rgba(21, 24, 31, 0.4);
}

.breadcrumbs {
  font-family: var(--font-sans);
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 0.5rem;
}

.crumb-link {
  color: var(--text-dim);
  text-decoration: none;
  transition: color 0.2s ease;
}

.crumb-link:hover {
  color: var(--accent);
}

.crumb-sep {
  color: var(--card-border-hover);
}

.crumb-current {
  color: var(--text-muted);
}

/* Sections */
.section {
  padding: 4.5rem 0;
}

.section-title {
  font-size: clamp(1.75rem, 3.5vw, 2.35rem);
  font-weight: 400;
  letter-spacing: 0.03em;
  color: var(--text-main);
  margin-bottom: 1.5rem;
  text-align: center;
}

.section-lead {
  font-size: 1.15rem;
  color: var(--text-muted);
  max-width: 680px;
  margin: -0.5rem auto 2.5rem;
  line-height: 1.7;
}

.text-center {
  text-align: center;
}

.section-tag {
  font-family: var(--font-sans);
  font-size: 0.78rem;
  text-transform: uppercase;
  letter-spacing: 0.12em;
  color: var(--accent);
  margin-bottom: 0.5rem;
}

/* Hero */
.hero {
  padding: 5.5rem 0 3.5rem;
  border-bottom: 1px solid var(--card-border);
  text-align: center;
}

.hero-container {
  display: flex;
  flex-direction: column;
  align-items: center;
}

.hero-title {
  font-size: clamp(2.5rem, 5.5vw, 4rem);
  font-weight: 400;
  letter-spacing: 0.04em;
  color: var(--text-main);
  margin-bottom: 1rem;
}

.key-quote {
  margin: 0.5rem 0 2.5rem;
  font-size: clamp(1.2rem, 2.5vw, 1.5rem);
  color: var(--accent);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.4rem;
}

.key-quote blockquote {
  font-style: italic;
}

.quote-source {
  font-family: var(--font-sans);
  font-size: 0.8rem;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--text-dim);
}

.hero-intro {
  max-width: 700px;
  display: flex;
  flex-direction: column;
  gap: 1.5rem;
  text-align: left;
}

.intro-quote {
  font-size: 1.1rem;
  font-style: italic;
  color: var(--text-muted);
  border-left: 2px solid var(--accent);
  padding-left: 1.25rem;
  line-height: 1.75;
}

.intro-text {
  font-size: 1.12rem;
  line-height: 1.85;
  color: var(--text-main);
}

/* Interactive SVG Great Wheel */
.wheel-section {
  border-bottom: 1px solid var(--card-border);
  position: relative;
  overflow: hidden;
  isolation: isolate;
}

.wheel-section::before {
  content: "";
  position: absolute;
  inset: -20%;
  z-index: -1;
  background: conic-gradient(from -90deg at 38% 55%,
    rgba(192,101,132,.45), rgba(133,143,157,.40), rgba(94,140,174,.45), rgba(207,92,54,.45),
    rgba(150,140,70,.42), rgba(60,134,190,.45), rgba(137,129,66,.42), rgba(49,146,123,.45),
    rgba(145,108,196,.45), rgba(194,155,64,.22), rgba(192,101,132,.45));
  -webkit-mask-image: radial-gradient(circle at 38% 55%, #000 0%, rgba(0,0,0,.8) 28%, transparent 58%);
  mask-image: radial-gradient(circle at 38% 55%, #000 0%, rgba(0,0,0,.8) 28%, transparent 58%);
  filter: blur(20px);
  opacity: 1;
  pointer-events: none;
}

.wheel-interactive-layout {
  display: grid;
  grid-template-columns: 1fr 340px;
  gap: 2.5rem;
  align-items: center;
  margin-top: 2rem;
}

.wheel-svg-container {
  width: 100%;
  max-width: 540px;
  margin: 0 auto;
}

.great-wheel-svg {
  width: 100%;
  height: auto;
  overflow: visible;
  filter: drop-shadow(0 4px 20px rgba(0, 0, 0, 0.5));
}

.wheel-track-orbit {
  fill: none;
  stroke: var(--accent);
  stroke-width: 2;
}

.wheel-track-outer {
  fill: none;
  stroke: #232733;
  stroke-width: 1;
  stroke-dasharray: 4 4;
}

.wheel-track-inner {
  fill: none;
  stroke: #232733;
  stroke-width: 1;
}

.wheel-track-core {
  fill: none;
  stroke: rgba(211, 176, 125, 0.2);
  stroke-width: 1;
}

.wheel-chord {
  stroke: rgba(211, 176, 125, 0.12);
  stroke-width: 1;
}

.wheel-hub-text {
  font-family: var(--font-sans);
  font-size: 7.5px;
  font-weight: 600;
  letter-spacing: 0.15em;
  fill: var(--accent);
}

.wheel-hub-sub {
  font-family: var(--font-sans);
  font-size: 7px;
  letter-spacing: 0.2em;
  fill: var(--text-dim);
}

.wheel-node {
  cursor: pointer;
  transition: transform 0.25s ease;
  outline: none;
}

.wheel-node .node-bg {
  fill: var(--node-deep, var(--card-bg));
  transition: fill 0.2s ease, stroke 0.2s ease;
}

.wheel-node .node-ring {
  fill: none;
  stroke: var(--node-mid, var(--card-border));
  stroke-width: 1.8;
  transition: stroke 0.2s ease, stroke-width 0.2s ease;
}

.wheel-node .node-num {
  font-family: var(--font-sans);
  font-size: 10.5px;
  font-weight: 700;
  letter-spacing: 0.05em;
  fill: var(--node-hi, var(--accent));
  pointer-events: none;
}

.wheel-node .node-title {
  font-family: var(--font-serif);
  font-size: 9px;
  fill: var(--text-main);
  pointer-events: none;
}

.wheel-node:hover .node-ring,
.wheel-node:focus-visible .node-ring,
.wheel-node.active .node-ring {
  stroke: var(--node-hi, var(--accent));
  stroke-width: 2.5;
}

.wheel-node:hover .node-bg,
.wheel-node:focus-visible .node-bg,
.wheel-node.active .node-bg {
  fill: color-mix(in srgb, var(--node-mid, #1c212b) 30%, var(--node-deep, #1c212b));
}

.wheel-node:hover,
.wheel-node:focus-visible {
  filter: drop-shadow(0 0 10px var(--node-mid, rgba(218, 184, 134, 0.45)));
}

.wheel-node-5-echoes .node-bg,
.wheel-node-5-echoes:hover .node-bg,
.wheel-node-5-echoes:focus-visible .node-bg,
.wheel-node-5-echoes.active .node-bg {
  fill: url(#echoesGradient) !important;
}

.wheel-node-5-echoes .node-ring {
  stroke: url(#echoesRingGrad);
}

.wheel-node-5-echoes:hover .node-ring,
.wheel-node-5-echoes:focus-visible .node-ring,
.wheel-node-5-echoes.active .node-ring {
  stroke: var(--node-hi, #e1eef8);
  stroke-width: 2.5;
}

.wheel-node.active {
  filter: drop-shadow(0 0 8px var(--node-hi, rgba(218, 184, 134, 0.45)));
}

/* Wheel Inspector Card */
.wheel-inspector {
  background-color: var(--card-bg);
  border: 1px solid var(--card-border);
  border-radius: 6px;
  padding: 2rem 1.75rem;
  display: flex;
  flex-direction: column;
  gap: 0.85rem;
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.4);
}

.inspector-badge {
  font-family: var(--font-sans);
  font-size: 0.82rem;
  font-weight: 600;
  letter-spacing: 0.08em;
  color: var(--accent);
}

.inspector-title {
  font-size: 1.85rem;
  font-weight: 400;
  color: var(--text-main);
  line-height: 1.2;
}

.inspector-gate {
  font-family: var(--font-sans);
  font-size: 0.82rem;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--text-dim);
}

.inspector-subtitle {
  font-size: 0.95rem;
  color: var(--text-muted);
  font-style: italic;
}

.inspector-quote {
  font-size: 1.05rem;
  font-style: italic;
  color: var(--accent);
  border-left: 2px solid var(--accent);
  padding-left: 1rem;
  margin: 0.35rem 0;
  line-height: 1.6;
}

.inspector-whisper {
  font-size: 0.95rem;
  color: var(--text-muted);
  line-height: 1.6;
}

.inspector-desc {
  font-size: 0.98rem;
  color: var(--text-main);
  line-height: 1.65;
}

.inspector-btn {
  margin-top: 0.5rem;
  text-align: center;
}

/* Ten Realms Grid */
.realms-section {
  border-bottom: 1px solid var(--card-border);
}

.realms-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
  gap: 1.5rem;
}

.realm-card {
  background-color: var(--card-bg);
  border: 1px solid var(--card-border);
  border-radius: 4px;
  padding: 1.75rem 1.5rem;
  display: flex;
  flex-direction: column;
  gap: 0.65rem;
  text-decoration: none;
  color: inherit;
  transition: border-color 0.2s ease, background-color 0.2s ease, transform 0.15s ease;
}

.realm-card:hover {
  border-color: var(--card-border-hover);
  background-color: var(--card-bg-elevated);
  transform: translateY(-2px);
}

.realm-meta {
  display: flex;
  align-items: baseline;
  gap: 0.6rem;
}

.realm-num {
  font-family: var(--font-sans);
  font-size: 0.85rem;
  font-weight: 600;
  letter-spacing: 0.08em;
  color: var(--accent);
}

.realm-name {
  font-size: 1.35rem;
  font-weight: 400;
  letter-spacing: 0.02em;
  color: var(--text-main);
}

.gate-name {
  font-family: var(--font-sans);
  font-size: 0.8rem;
  text-transform: uppercase;
  letter-spacing: 0.07em;
  color: var(--text-dim);
}

.codex-subname {
  font-size: 0.82rem;
  color: var(--text-dim);
  font-style: italic;
}

.realm-line {
  font-size: 1rem;
  font-style: italic;
  color: var(--text-muted);
  line-height: 1.65;
  margin: 0.5rem 0 auto;
}

.realm-card-footer {
  margin-top: 1rem;
  font-family: var(--font-sans);
  font-size: 0.85rem;
  font-weight: 600;
  color: var(--accent);
}

/* Teachings Overview Grid */
.teachings-overview-section {
  border-bottom: 1px solid var(--card-border);
}

.teachings-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: 1.5rem;
  margin-top: 1.5rem;
}

.teaching-card {
  background-color: var(--card-bg);
  border: 1px solid var(--card-border);
  border-radius: 4px;
  padding: 1.75rem 1.5rem;
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
}

.teaching-title a {
  color: var(--text-main);
  text-decoration: none;
  font-size: 1.25rem;
  font-weight: 400;
  transition: color 0.2s ease;
}

.teaching-title a:hover {
  color: var(--accent);
}

.teaching-desc {
  font-size: 0.98rem;
  color: var(--text-muted);
  line-height: 1.65;
  margin-bottom: auto;
}

.teaching-link {
  font-family: var(--font-sans);
  font-size: 0.85rem;
  font-weight: 600;
  color: var(--accent);
  text-decoration: none;
  margin-top: 0.75rem;
}

.teaching-link:hover {
  text-decoration: underline;
}

/* Sections for Traveler and Remnants */
.traveler-section, .remnants-section {
  border-bottom: 1px solid var(--card-border);
}

.section-quote {
  font-size: 1.2rem;
  font-style: italic;
  color: var(--accent);
  border-left: 2px solid var(--accent);
  padding-left: 1.25rem;
  line-height: 1.75;
  margin: 0.5rem 0 1rem;
}

.section-text {
  font-size: 1.1rem;
  line-height: 1.8;
  color: var(--text-main);
}

.inline-link {
  font-family: var(--font-sans);
  font-size: 0.95rem;
  color: var(--accent);
  text-decoration: none;
  font-weight: 600;
  display: inline-block;
  margin-top: 0.75rem;
}

.inline-link:hover {
  text-decoration: underline;
}

/* CTA Section */
.cta-section {
  padding: 5rem 0 5.5rem;
  border-top: 1px solid var(--card-border);
  background: radial-gradient(circle at 50% 50%, rgba(211, 176, 125, 0.04) 0%, transparent 60%);
}

.cta-container {
  max-width: 640px;
  text-align: center;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 1.5rem;
}

.cta-lead {
  font-size: clamp(1.4rem, 3vw, 1.85rem);
  font-weight: 400;
  color: var(--text-main);
  line-height: 1.4;
}

.cta-subtext {
  font-size: 1.05rem;
  color: var(--text-muted);
  line-height: 1.7;
}

.cta-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 1rem;
  justify-content: center;
  margin-top: 0.5rem;
}

.cta-button {
  display: inline-block;
  font-family: var(--font-sans);
  font-size: 0.98rem;
  font-weight: 600;
  letter-spacing: 0.03em;
  text-decoration: none;
  background-color: var(--accent);
  color: var(--accent-contrast);
  padding: 0.85rem 1.85rem;
  border-radius: 3px;
  transition: background-color 0.2s ease, transform 0.15s ease, box-shadow 0.2s ease;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.35);
}

.cta-button:hover, .cta-button:focus-visible {
  background-color: var(--accent-hover);
  transform: translateY(-1px);
  box-shadow: 0 4px 12px rgba(211, 176, 125, 0.3);
}

.cta-button-secondary {
  background-color: transparent;
  color: var(--accent);
  border: 1px solid var(--accent);
  box-shadow: none;
}

.cta-button-secondary:hover {
  background-color: var(--accent-subtle);
  color: var(--accent-hover);
}

/* Realm Detail Page */
.hero-buttons {
  display: flex; gap: 1rem; justify-content: center; flex-wrap: wrap; margin-top: 1.5rem;
}

header.realm-hero {
  padding: 4.5rem 0 3rem;
  border-bottom: 1px solid var(--card-border);
  border-radius: 0;
  margin-bottom: 0;
}

.realm-hero {
  width: 100%;
  height: auto;
  display: block;
  border-radius: 8px;
  margin-bottom: 1.5rem;
}

.realm-badge-row {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 0.75rem;
  margin-bottom: 0.75rem;
}

.realm-num-large {
  font-family: var(--font-sans);
  font-size: 1.15rem;
  font-weight: 700;
  letter-spacing: 0.1em;
  color: var(--accent);
}

.realm-element-badge, .realm-codex-badge {
  font-family: var(--font-sans);
  font-size: 0.8rem;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  background-color: var(--card-bg-elevated);
  border: 1px solid var(--card-border);
  padding: 0.25rem 0.65rem;
  border-radius: 3px;
  color: var(--text-dim);
}

.realm-main-title {
  font-size: clamp(2.4rem, 5vw, 3.6rem);
  font-weight: 400;
  line-height: 1.15;
  color: var(--text-main);
  margin-bottom: 0.5rem;
}

.realm-element-line {
  font-family: var(--font-sans);
  font-size: 1.05rem;
  font-weight: 500;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--realm-hi, var(--accent));
  margin-top: 0.25rem;
  margin-bottom: 0.75rem;
}

.realm-gate-title {
  font-family: var(--font-sans);
  font-size: 1rem;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--text-dim);
  margin-bottom: 1.5rem;
}

/* Realm Specific Accents & Tinting */
body[class*="realm-"] {
  background-color: var(--realm-deep);
}

body[class*="realm-"] .site-header {
  background-color: color-mix(in srgb, var(--realm-deep) 92%, black 8%);
  border-bottom: 1px solid color-mix(in srgb, var(--realm-mid) 25%, var(--card-border));
}

body[class*="realm-"] header.realm-hero {
  border-bottom: 1px solid var(--realm-mid);
  background: radial-gradient(ellipse 75% 65% at 50% 30%, color-mix(in srgb, var(--realm-mid) 20%, transparent) 0%, transparent 75%);
}

body.realm-5-echoes header.realm-hero {
  border-bottom: 1px solid var(--realm-mid);
  background: radial-gradient(ellipse 75% 65% at 50% 30%, 
    color-mix(in srgb, #97b9d4 20%, transparent) 0%, 
    color-mix(in srgb, #768f3a 18%, transparent) 40%, 
    color-mix(in srgb, #d45e32 20%, transparent) 70%, 
    transparent 85%);
}

body[class*="realm-"] .realm-element-badge {
  background-color: rgba(0, 0, 0, 0.35);
  border: 1px solid var(--realm-mid);
  color: var(--realm-hi);
}

body[class*="realm-"] .realm-codex-badge {
  background-color: rgba(0, 0, 0, 0.35);
  border: 1px solid var(--card-border);
  color: var(--text-muted);
}

body[class*="realm-"] .realm-gate-title {
  color: var(--text-muted);
}

body[class*="realm-"] .realm-entry-section {
  background: linear-gradient(180deg, var(--realm-surface) 0%, transparent 100%);
  border-bottom: 1px solid color-mix(in srgb, var(--realm-mid) 20%, transparent);
}

body[class*="realm-"] .signs-section {
  background-color: var(--realm-surface);
  border-top: 1px solid color-mix(in srgb, var(--realm-mid) 25%, transparent);
  border-bottom: 1px solid color-mix(in srgb, var(--realm-mid) 25%, transparent);
}

body[class*="realm-"] .sign-card,
body[class*="realm-"] .gate-detail-box,
body[class*="realm-"] .key-box,
body[class*="realm-"] .realm-remnant-card,
body[class*="realm-"] .pagination-link {
  background-color: var(--realm-surface);
  border-color: color-mix(in srgb, var(--realm-mid) 25%, var(--card-border));
}

body[class*="realm-"] .gatekeeper-whisper-box {
  border-left: 2px solid var(--realm-hi);
  background-color: rgba(0, 0, 0, 0.25);
}

body[class*="realm-"] .remnant-card-epigraph {
  border-left-color: var(--realm-mid);
}

body[class*="realm-"] .remnant-practice-box {
  border-color: color-mix(in srgb, var(--realm-mid) 40%, var(--card-border));
  background-color: color-mix(in srgb, var(--realm-surface) 80%, black 20%);
}

body[class*="realm-"] .realm-bridge-section {
  border-top: 1px solid var(--realm-mid);
  border-bottom: 1px solid var(--realm-mid);
  background: radial-gradient(circle at 50% 50%, color-mix(in srgb, var(--realm-mid) 6%, transparent) 0%, transparent 70%);
}

.realm-hero-quote {
  font-size: 1.35rem;
  font-style: italic;
  color: var(--accent);
  border-left: 2px solid var(--accent);
  padding-left: 1.25rem;
  line-height: 1.65;
  margin-bottom: 1.5rem;
}

.quote-ref {
  font-family: var(--font-sans);
  font-size: 0.82rem;
  font-style: normal;
  letter-spacing: 0.05em;
  color: var(--text-dim);
}

.gatekeeper-whisper-box {
  background-color: var(--card-bg);
  border: 1px solid var(--card-border);
  border-radius: 4px;
  padding: 1rem 1.25rem;
  font-size: 1.05rem;
  color: var(--text-muted);
}

.whisper-label {
  font-family: var(--font-sans);
  font-size: 0.82rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--accent);
  margin-right: 0.5rem;
}

/* Realm Content Blocks */
.prose-content {
  display: flex;
  flex-direction: column;
  gap: 1.25rem;
  font-size: 1.1rem;
  line-height: 1.85;
  color: var(--text-main);
}

.history-note-box {
  margin-top: 2rem;
  background-color: var(--card-bg);
  border: 1px solid var(--card-border);
  border-left: 3px solid var(--accent);
  border-radius: 3px;
  padding: 1.25rem;
}

.history-note-title {
  font-family: var(--font-sans);
  font-size: 0.88rem;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--accent);
  margin-bottom: 0.5rem;
}

.dla-callout {
  margin-top: 1.5rem;
  background-color: var(--card-bg);
  border: 1px solid var(--card-border);
  border-radius: 4px;
  padding: 1.25rem;
}

.dla-callout-title {
  font-family: var(--font-sans);
  font-size: 0.82rem;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--accent);
  margin-bottom: 0.4rem;
}

/* Signs Grid */
.signs-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1.5rem;
  margin-top: 1.5rem;
}

.sign-card {
  background-color: var(--card-bg);
  border: 1px solid var(--card-border);
  border-radius: 4px;
  padding: 1.75rem;
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
}

.passage-card {
  border-top: 3px solid var(--accent);
}

.looping-card {
  border-top: 3px solid #7a4343;
}

.sign-card-title {
  font-family: var(--font-sans);
  font-size: 1rem;
  letter-spacing: 0.04em;
  color: var(--text-main);
}

.sign-lead {
  font-size: 0.95rem;
  color: var(--text-dim);
}

.sign-quote {
  font-size: 1.05rem;
  line-height: 1.7;
  color: var(--text-muted);
  font-style: italic;
}

/* Gate Detail Box */
.gate-detail-box {
  background-color: var(--card-bg);
  border: 1px solid var(--card-border);
  border-radius: 4px;
  padding: 2rem;
  display: flex;
  flex-direction: column;
  gap: 1.25rem;
}

.gate-detail-heading {
  font-size: 1.35rem;
  font-weight: 400;
  color: var(--text-main);
}

.gate-desc-text {
  font-size: 1.1rem;
  line-height: 1.8;
  color: var(--text-main);
}

.remnant-gate-box {
  background-color: rgba(14, 16, 20, 0.6);
  border: 1px solid var(--card-border);
  border-left: 2px solid #8c5a5a;
  padding: 1rem 1.25rem;
  border-radius: 3px;
}

.remnant-gate-box h4 {
  font-family: var(--font-sans);
  font-size: 0.85rem;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: #cca3a3;
  margin-bottom: 0.4rem;
}

.remnant-gate-box p {
  font-size: 0.98rem;
  color: var(--text-muted);
  line-height: 1.65;
}

/* Key Comparison Grid */
.key-comparison-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1.5rem;
}

.key-box {
  background-color: var(--card-bg);
  border: 1px solid var(--card-border);
  border-radius: 4px;
  padding: 1.75rem;
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
}

.genuine-key-box {
  border-top: 3px solid var(--accent);
}

.remnant-key-box {
  border-top: 3px solid var(--card-border-hover);
}

.key-badge {
  font-family: var(--font-sans);
  font-size: 0.82rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--accent);
}

.remnant-badge {
  color: var(--text-dim);
}

.key-text {
  font-size: 1.25rem;
  font-style: italic;
  color: var(--text-main);
  line-height: 1.5;
}

.key-source {
  font-family: var(--font-sans);
  font-size: 0.8rem;
  color: var(--text-dim);
  text-transform: uppercase;
}

.key-desc {
  font-size: 1rem;
  line-height: 1.7;
  color: var(--text-muted);
}

/* Realm Remnants List */
.realm-remnants-list {
  display: flex;
  flex-direction: column;
  gap: 2rem;
  margin-top: 2rem;
}

.realm-remnant-card {
  background-color: var(--card-bg);
  border: 1px solid var(--card-border);
  border-radius: 4px;
  padding: 2.25rem;
  display: flex;
  flex-direction: column;
  gap: 1.25rem;
}

.remnant-card-header {
  display: flex;
  align-items: baseline;
  gap: 0.75rem;
  flex-wrap: wrap;
}

.remnant-num-badge {
  font-family: var(--font-sans);
  font-size: 0.82rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--accent);
  background-color: var(--accent-subtle);
  padding: 0.25rem 0.5rem;
  border-radius: 3px;
}

.remnant-card-title {
  font-size: 1.45rem;
  font-weight: 400;
  color: var(--text-main);
}

.remnant-card-epigraph {
  font-size: 1.05rem;
  font-style: italic;
  color: var(--text-muted);
  border-left: 2px solid var(--card-border-hover);
  padding-left: 1.25rem;
  line-height: 1.7;
}

.remnant-card-body {
  font-size: 1.05rem;
  line-height: 1.8;
  color: var(--text-main);
}

.remnant-practice-box {
  background-color: var(--card-bg-elevated);
  border: 1px solid var(--card-border);
  border-radius: 4px;
  padding: 1.5rem;
  margin-top: 0.5rem;
}

.practice-box-title {
  font-family: var(--font-sans);
  font-size: 0.95rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--accent);
  margin-bottom: 1rem;
}

.practice-steps-list {
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: 1rem;
}

.practice-steps-list li strong {
  display: block;
  font-family: var(--font-sans);
  font-size: 0.98rem;
  color: var(--text-main);
  margin-bottom: 0.35rem;
}

.practice-steps-list li p {
  font-size: 0.98rem;
  line-height: 1.7;
  color: var(--text-muted);
}

/* Realm Bridge & Pagination */
.realm-bridge-section {
  border-top: 1px solid var(--card-border);
  border-bottom: 1px solid var(--card-border);
}

.bridge-desc-lead {
  font-size: 1.15rem;
  line-height: 1.85;
  color: var(--text-main);
  margin-bottom: 1.5rem;
}

.bridge-action {
  text-align: left;
}

.realm-pagination {
  display: flex;
  justify-content: space-between;
  gap: 1.5rem;
  padding: 3rem var(--container-padding);
}

.pagination-link {
  display: flex;
  flex-direction: column;
  gap: 0.25rem;
  text-decoration: none;
  color: inherit;
  padding: 1rem 1.25rem;
  background-color: var(--card-bg);
  border: 1px solid var(--card-border);
  border-radius: 4px;
  transition: border-color 0.2s ease, background-color 0.2s ease;
  min-width: 220px;
}

.pagination-link:hover {
  border-color: var(--card-border-hover);
  background-color: var(--card-bg-elevated);
}

.pagination-sub {
  font-family: var(--font-sans);
  font-size: 0.78rem;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--accent);
}

.pagination-title {
  font-size: 1.15rem;
  color: var(--text-main);
}

.next-link {
  text-align: right;
  margin-left: auto;
}

/* Remnants Catalog Page (/remnants/) */
.page-hero {
  padding: 4.5rem 0 3rem;
  border-bottom: 1px solid var(--card-border);
  text-align: center;
}

.hero-tag {
  font-family: var(--font-sans);
  font-size: 0.82rem;
  text-transform: uppercase;
  letter-spacing: 0.12em;
  color: var(--accent);
  display: block;
  margin-bottom: 0.5rem;
}

.page-title {
  font-size: clamp(2.2rem, 5vw, 3.4rem);
  font-weight: 400;
  color: var(--text-main);
  margin-bottom: 1rem;
}

.hero-lead {
  font-size: 1.15rem;
  color: var(--text-muted);
  max-width: 680px;
  margin: 0 auto;
  line-height: 1.7;
}

.hero-key-quote {
  font-size: clamp(1.1rem, 2.2vw, 1.35rem);
  font-style: italic;
  color: var(--accent);
  max-width: 720px;
  margin: 0.5rem auto 0.75rem;
  line-height: 1.6;
}

.filter-controls-container {
  display: flex;
  flex-direction: column;
  gap: 1.25rem;
  margin-bottom: 2.5rem;
}

.search-box-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  flex-wrap: wrap;
}

.search-input {
  flex: 1;
  min-width: 280px;
  padding: 0.85rem 1.25rem;
  background-color: var(--card-bg);
  border: 1px solid var(--card-border);
  border-radius: 4px;
  color: var(--text-main);
  font-family: var(--font-sans);
  font-size: 1rem;
  transition: border-color 0.2s ease, box-shadow 0.2s ease;
}

.search-input:focus {
  outline: none;
  border-color: var(--accent);
  box-shadow: 0 0 0 3px var(--accent-subtle);
}

.results-count {
  font-family: var(--font-sans);
  font-size: 0.9rem;
  color: var(--text-dim);
  white-space: nowrap;
}

.filter-pills {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
}

.filter-pill {
  background: var(--card-bg);
  border: 1px solid var(--card-border);
  color: var(--text-muted);
  padding: 0.45rem 0.9rem;
  border-radius: 20px;
  font-family: var(--font-sans);
  font-size: 0.85rem;
  cursor: pointer;
  transition: all 0.15s ease;
}

.filter-pill:hover {
  border-color: var(--card-border-hover);
  color: var(--text-main);
}

.filter-pill.active {
  background-color: var(--accent);
  color: var(--accent-contrast);
  border-color: var(--accent);
  font-weight: 600;
}

.remnants-catalog-grid {
  display: flex;
  flex-direction: column;
  gap: 2rem;
}

.remnant-catalog-item {
  background-color: var(--card-bg);
  border: 1px solid var(--card-border);
  border-radius: 4px;
  padding: 2rem;
  display: flex;
  flex-direction: column;
  gap: 1rem;
}

.remnant-item-header {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  flex-wrap: wrap;
  gap: 0.5rem;
}

.remnant-item-badge {
  font-family: var(--font-sans);
  font-size: 0.82rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--accent);
}

.remnant-realm-name a {
  font-family: var(--font-sans);
  font-size: 0.88rem;
  color: var(--text-dim);
  text-decoration: none;
}

.remnant-realm-name a:hover {
  color: var(--accent);
}

.remnant-item-title {
  font-size: 1.4rem;
  font-weight: 400;
  color: var(--text-main);
}

.remnant-item-epigraph {
  font-size: 1.05rem;
  font-style: italic;
  color: var(--text-muted);
  border-left: 2px solid var(--card-border-hover);
  padding-left: 1rem;
  line-height: 1.65;
}

.remnant-item-body {
  font-size: 1.05rem;
  line-height: 1.8;
  color: var(--text-main);
}

.remnant-item-practice {
  background-color: var(--card-bg-elevated);
  border: 1px solid var(--card-border);
  border-radius: 4px;
  padding: 1.25rem 1.5rem;
}

.practice-title-small {
  font-family: var(--font-sans);
  font-size: 0.85rem;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--accent);
  margin-bottom: 0.85rem;
}

.practice-steps-compact {
  display: flex;
  flex-direction: column;
  gap: 0.85rem;
}

.step-compact {
  display: flex;
  align-items: baseline;
  gap: 0.75rem;
  font-size: 0.95rem;
  line-height: 1.65;
}

.step-num-pill {
  font-family: var(--font-sans);
  font-size: 0.75rem;
  font-weight: 700;
  background-color: var(--card-border);
  color: var(--accent);
  width: 22px;
  height: 22px;
  border-radius: 50%;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

.remnant-detail-link {
  font-family: var(--font-sans);
  font-size: 0.88rem;
  font-weight: 600;
  color: var(--accent);
  text-decoration: none;
}

.remnant-detail-link:hover {
  text-decoration: underline;
}

/* Gates Catalog (/gates/) */
.gates-catalog-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
  gap: 1.75rem;
  margin-top: 1.5rem;
}

.gate-catalog-card {
  background-color: var(--card-bg);
  border: 1px solid var(--card-border);
  border-radius: 4px;
  padding: 1.75rem;
  display: flex;
  flex-direction: column;
  gap: 0.85rem;
}

.gate-card-header {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
}

.gate-num-badge {
  font-family: var(--font-sans);
  font-size: 0.82rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  color: var(--accent);
}

.gate-realm-link a {
  font-family: var(--font-sans);
  font-size: 0.82rem;
  color: var(--text-dim);
  text-decoration: none;
}

.gate-realm-link a:hover {
  color: var(--accent);
}

.gate-card-title {
  font-size: 1.35rem;
  font-weight: 400;
  color: var(--text-main);
}

.gate-codex-title {
  font-size: 0.88rem;
  color: var(--text-dim);
  margin-top: -0.4rem;
}

.gate-card-whisper {
  font-size: 0.95rem;
  color: var(--text-muted);
  font-style: italic;
  border-left: 2px solid var(--accent);
  padding-left: 0.75rem;
}

.gate-card-desc {
  font-size: 0.98rem;
  line-height: 1.7;
  color: var(--text-main);
  margin-bottom: auto;
}

.gate-remnant-passage {
  font-size: 0.88rem;
  color: var(--text-muted);
  background: var(--card-bg-elevated);
  padding: 0.75rem;
  border-radius: 3px;
  border-left: 2px solid #8c5a5a;
}

.gate-card-actions {
  display: flex;
  gap: 1.25rem;
  margin-top: 0.5rem;
}

/* Keys Matrix (/keys/) */
.keys-matrix-list {
  display: flex;
  flex-direction: column;
  gap: 2rem;
  margin-top: 1.5rem;
}

.keys-comparison-card {
  background-color: var(--card-bg);
  border: 1px solid var(--card-border);
  border-radius: 4px;
  padding: 2rem;
  display: flex;
  flex-direction: column;
  gap: 1.25rem;
}

.keys-card-meta {
  display: flex;
  align-items: baseline;
  gap: 1rem;
  border-bottom: 1px solid var(--card-border);
  padding-bottom: 0.75rem;
}

.keys-card-num {
  font-family: var(--font-sans);
  font-size: 0.85rem;
  font-weight: 700;
  color: var(--accent);
}

.keys-card-realm a {
  font-size: 1.25rem;
  color: var(--text-main);
  text-decoration: none;
}

.keys-card-realm a:hover {
  color: var(--accent);
}

.keys-card-gate {
  font-family: var(--font-sans);
  font-size: 0.82rem;
  text-transform: uppercase;
  color: var(--text-dim);
  margin-left: auto;
}

.keys-duo-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1.5rem;
}

.key-column {
  display: flex;
  flex-direction: column;
  gap: 0.65rem;
}

.key-col-tag {
  font-family: var(--font-sans);
  font-size: 0.8rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.08em;
}

.genuine-tag {
  color: var(--accent);
}

.counterfeit-tag {
  color: var(--text-dim);
}

.key-text-quote {
  font-size: 1.15rem;
  font-style: italic;
  color: var(--text-main);
  line-height: 1.55;
}

.key-ref {
  font-family: var(--font-sans);
  font-size: 0.78rem;
  text-transform: uppercase;
  color: var(--text-dim);
}

.key-col-desc {
  font-size: 0.95rem;
  line-height: 1.65;
  color: var(--text-muted);
}

/* Bridges Page (/bridges/) */
.bridges-list {
  display: flex;
  flex-direction: column;
  gap: 1.75rem;
  margin-top: 1.5rem;
}

.bridge-card {
  background-color: var(--card-bg);
  border: 1px solid var(--card-border);
  border-radius: 4px;
  padding: 2rem;
  display: flex;
  flex-direction: column;
  gap: 1rem;
}

.bridge-card-header {
  display: flex;
  align-items: baseline;
  gap: 1rem;
  flex-wrap: wrap;
}

.bridge-badge {
  font-family: var(--font-sans);
  font-size: 0.82rem;
  font-weight: 700;
  color: var(--accent);
  background-color: var(--accent-subtle);
  padding: 0.25rem 0.65rem;
  border-radius: 3px;
}

.bridge-title {
  font-size: 1.4rem;
  font-weight: 400;
  color: var(--text-main);
}

.bridge-flow-indicator {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  font-family: var(--font-sans);
  font-size: 0.95rem;
}

.bridge-node-link {
  color: var(--accent);
  text-decoration: none;
  font-weight: 600;
}

.bridge-node-link:hover {
  text-decoration: underline;
}

.bridge-flow-arrow {
  color: var(--text-dim);
  font-size: 1.2rem;
}

.bridge-body {
  font-size: 1.05rem;
  line-height: 1.8;
  color: var(--text-main);
}

/* Glossary Page (/glossary/) */
.glossary-nav {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  margin-bottom: 2.5rem;
  padding: 1rem;
  background-color: var(--card-bg);
  border: 1px solid var(--card-border);
  border-radius: 4px;
  justify-content: center;
}

.letter-link {
  font-family: var(--font-sans);
  font-size: 0.9rem;
  font-weight: 600;
  color: var(--text-muted);
  text-decoration: none;
  width: 32px;
  height: 32px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 3px;
  transition: all 0.15s ease;
}

.letter-link:hover {
  background-color: var(--card-bg-elevated);
  color: var(--accent);
}

.glossary-list {
  display: flex;
  flex-direction: column;
  gap: 2.5rem;
}

.letter-heading {
  font-size: 2rem;
  color: var(--accent);
  border-bottom: 1px solid var(--card-border);
  padding-bottom: 0.5rem;
  margin-bottom: 1.5rem;
}

.glossary-entry {
  margin-bottom: 1.5rem;
}

.term-name {
  font-size: 1.35rem;
  font-weight: 400;
  color: var(--text-main);
  margin-bottom: 0.35rem;
}

.term-def {
  font-size: 1.05rem;
  line-height: 1.75;
  color: var(--text-muted);
}

/* Search Page (/search/) */
.search-input-box {
  margin-bottom: 1.5rem;
}

.search-input-main {
  width: 100%;
  padding: 1.15rem 1.5rem;
  background-color: var(--card-bg);
  border: 1px solid var(--card-border);
  border-radius: 4px;
  font-family: var(--font-sans);
  font-size: 1.15rem;
  color: var(--text-main);
  transition: border-color 0.2s ease, box-shadow 0.2s ease;
}

.search-input-main:focus {
  outline: none;
  border-color: var(--accent);
  box-shadow: 0 0 0 4px var(--accent-subtle);
}

.search-pills-row {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  margin-bottom: 1.5rem;
}

.search-cat-pill {
  background: var(--card-bg);
  border: 1px solid var(--card-border);
  color: var(--text-muted);
  padding: 0.45rem 1rem;
  border-radius: 20px;
  font-family: var(--font-sans);
  font-size: 0.85rem;
  cursor: pointer;
  transition: all 0.15s ease;
}

.search-cat-pill.active {
  background-color: var(--accent);
  color: var(--accent-contrast);
  border-color: var(--accent);
  font-weight: 600;
}

.search-status {
  font-family: var(--font-sans);
  font-size: 0.95rem;
  color: var(--text-dim);
  margin-bottom: 1.5rem;
}

.search-results-list {
  display: flex;
  flex-direction: column;
  gap: 1.25rem;
}

.search-result-card {
  background-color: var(--card-bg);
  border: 1px solid var(--card-border);
  border-radius: 4px;
  padding: 1.5rem;
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  transition: border-color 0.2s ease;
}

.search-result-card:hover {
  border-color: var(--card-border-hover);
}

.result-badge {
  font-family: var(--font-sans);
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.1em;
  padding: 0.2rem 0.5rem;
  border-radius: 2px;
  background-color: var(--card-bg-elevated);
  color: var(--accent);
  display: inline-block;
}

.result-title a {
  color: var(--text-main);
  text-decoration: none;
  font-size: 1.25rem;
  font-weight: 400;
}

.result-title a:hover {
  color: var(--accent);
}

.result-excerpt {
  font-size: 0.98rem;
  line-height: 1.65;
  color: var(--text-muted);
}

/* Site Directory / Sitemap (/sitemap/) */
.sitemap-heading {
  font-size: 1.5rem;
  font-weight: 400;
  color: var(--accent);
  margin: 2rem 0 1rem;
}

.sitemap-list {
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: 0.85rem;
}

.sitemap-list li a {
  color: var(--text-main);
  text-decoration: none;
  font-size: 1.1rem;
  transition: color 0.2s ease;
}

.sitemap-list li a:hover {
  color: var(--accent);
  text-decoration: underline;
}

/* Footer */
.site-footer {
  border-top: 1px solid var(--card-border);
  background-color: #161925;
  padding: 4.5rem 0 3rem;
  margin-top: auto;
}

.footer-grid {
  display: grid;
  grid-template-columns: 2fr 1fr 1fr 1fr;
  gap: 2.5rem;
  margin-bottom: 3.5rem;
}

.footer-heading {
  font-size: 1.35rem;
  font-weight: 400;
  color: var(--text-main);
  margin-bottom: 0.85rem;
}

.footer-desc {
  font-size: 0.95rem;
  line-height: 1.7;
  color: var(--text-muted);
  margin-bottom: 1.25rem;
}

.footer-badges {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
}

.badge {
  font-family: var(--font-sans);
  font-size: 0.75rem;
  background-color: var(--card-bg);
  border: 1px solid var(--card-border);
  padding: 0.2rem 0.6rem;
  border-radius: 12px;
  color: var(--accent);
}

.footer-subheading {
  font-family: var(--font-sans);
  font-size: 0.82rem;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: var(--accent);
  margin-bottom: 1rem;
}

.footer-links {
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: 0.6rem;
}

.footer-links li a {
  font-family: var(--font-sans);
  font-size: 0.88rem;
  color: var(--text-muted);
  text-decoration: none;
  transition: color 0.2s ease;
}

.footer-links li a:hover {
  color: var(--accent);
}

.footer-bottom {
  border-top: 1px solid var(--card-border);
  padding-top: 2rem;
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
  font-size: 0.85rem;
  color: var(--text-dim);
  line-height: 1.6;
}

.footer-disclaimer {
  max-width: 800px;
}

/* Responsive adjustments */
@media (max-width: 880px) {
  .wheel-interactive-layout {
    grid-template-columns: 1fr;
  }

  .signs-grid, .key-comparison-grid, .keys-duo-grid {
    grid-template-columns: 1fr;
  }

  .footer-grid {
    grid-template-columns: 1fr 1fr;
  }
}

@media (max-width: 680px) {
  :root {
    --container-padding: 1.15rem;
  }

  .nav-menu {
    display: none;
    position: absolute;
    top: 64px;
    left: 0;
    right: 0;
    background-color: var(--card-bg);
    border-bottom: 1px solid var(--card-border);
    flex-direction: column;
    padding: 1.25rem;
    gap: 1rem;
  }

  .nav-menu.open {
    display: flex;
  }

  .nav-toggle {
    display: block;
  }

  .footer-grid {
    grid-template-columns: 1fr;
    gap: 2rem;
  }

  .realm-pagination {
    flex-direction: column;
  }

  .next-link {
    text-align: left;
    margin-left: 0;
  }
}


/* Section pages: lifted background and Realm-derived glows */

body.section-page { background-color: #1b1e2b; }

body.section-page .page-hero { position: relative; border-bottom-color: rgba(255,255,255,0.08); }

.section-page .card, .section-page .feature-box, .section-page .next-links-box { background-color: rgba(35, 39, 56, 0.85); }

body.page-traveler {
  background-image:
    radial-gradient(ellipse 55% 45% at 12% 10%, rgba(192, 101, 132, 0.22) 0%, transparent 70%),
    radial-gradient(ellipse 55% 45% at 88% 15%, rgba(94, 140, 174, 0.22) 0%, transparent 70%),
    radial-gradient(ellipse 55% 45% at 50% 0%, rgba(207, 92, 54, 0.22) 0%, transparent 70%),
    radial-gradient(ellipse 55% 45% at 20% 90%, rgba(60, 134, 190, 0.22) 0%, transparent 70%),
    radial-gradient(ellipse 55% 45% at 80% 85%, rgba(49, 146, 123, 0.22) 0%, transparent 70%),
    radial-gradient(ellipse 55% 45% at 50% 60%, rgba(145, 108, 196, 0.22) 0%, transparent 70%);
  background-attachment: fixed;
}

body.page-remnants {
  background-image:
    radial-gradient(ellipse 55% 45% at 10% 12%, rgba(207, 92, 54, 0.16) 0%, transparent 70%),
    radial-gradient(ellipse 55% 45% at 50% 22%, rgba(145, 108, 196, 0.16) 0%, transparent 70%),
    radial-gradient(ellipse 55% 45% at 90% 12%, rgba(207, 92, 54, 0.16) 0%, transparent 70%);
  background-attachment: fixed;
}

body.page-gates {
  background-image:
    radial-gradient(ellipse 55% 45% at 10% 12%, rgba(192, 101, 132, 0.22) 0%, transparent 70%),
    radial-gradient(ellipse 55% 45% at 50% 22%, rgba(94, 140, 174, 0.22) 0%, transparent 70%),
    radial-gradient(ellipse 55% 45% at 90% 12%, rgba(60, 134, 190, 0.22) 0%, transparent 70%);
  background-attachment: fixed;
}

body.page-keys {
  background-image:
    radial-gradient(ellipse 55% 45% at 10% 12%, rgba(60, 134, 190, 0.22) 0%, transparent 70%),
    radial-gradient(ellipse 55% 45% at 50% 22%, rgba(49, 146, 123, 0.22) 0%, transparent 70%),
    radial-gradient(ellipse 55% 45% at 90% 12%, rgba(137, 129, 66, 0.22) 0%, transparent 70%);
  background-attachment: fixed;
}

body.page-thresholds {
  background-image:
    radial-gradient(ellipse 55% 45% at 10% 12%, rgba(145, 108, 196, 0.22) 0%, transparent 70%),
    radial-gradient(ellipse 55% 45% at 50% 22%, rgba(192, 101, 132, 0.22) 0%, transparent 70%),
    radial-gradient(ellipse 55% 45% at 90% 12%, rgba(145, 108, 196, 0.22) 0%, transparent 70%);
  background-attachment: fixed;
}

body.page-bridges {
  background-image:
    radial-gradient(ellipse 55% 45% at 10% 12%, rgba(192, 101, 132, 0.22) 0%, transparent 70%),
    radial-gradient(ellipse 55% 45% at 36% 22%, rgba(49, 146, 123, 0.22) 0%, transparent 70%),
    radial-gradient(ellipse 55% 45% at 63% 12%, rgba(145, 108, 196, 0.22) 0%, transparent 70%),
    radial-gradient(ellipse 55% 45% at 90% 22%, rgba(207, 92, 54, 0.22) 0%, transparent 70%);
  background-attachment: fixed;
}

body.page-glossary {
  background-image:
    radial-gradient(ellipse 55% 45% at 10% 12%, rgba(133, 143, 157, 0.16) 0%, transparent 70%),
    radial-gradient(ellipse 55% 45% at 50% 22%, rgba(94, 140, 174, 0.16) 0%, transparent 70%),
    radial-gradient(ellipse 55% 45% at 90% 12%, rgba(137, 129, 66, 0.16) 0%, transparent 70%);
  background-attachment: fixed;
}

body.page-search {
  background-image:
    radial-gradient(ellipse 55% 45% at 10% 12%, rgba(94, 140, 174, 0.22) 0%, transparent 70%),
    radial-gradient(ellipse 55% 45% at 50% 22%, rgba(60, 134, 190, 0.22) 0%, transparent 70%),
    radial-gradient(ellipse 55% 45% at 90% 12%, rgba(49, 146, 123, 0.22) 0%, transparent 70%);
  background-attachment: fixed;
}

body.page-sitemap {
  background-image:
    radial-gradient(ellipse 55% 45% at 10% 12%, rgba(49, 146, 123, 0.22) 0%, transparent 70%),
    radial-gradient(ellipse 55% 45% at 50% 22%, rgba(192, 101, 132, 0.22) 0%, transparent 70%),
    radial-gradient(ellipse 55% 45% at 90% 12%, rgba(145, 108, 196, 0.22) 0%, transparent 70%);
  background-attachment: fixed;
}

#gate-1, #key-1, .remnant-catalog-item[data-realm="1"], .filter-pill[data-realm="1"] { --ra: #c06584; --ra-hi: #f2a8bf; --ra-surface: #3c1d30; }

#bridge-1-to-2 { --ra: #c06584; --ra-hi: #f2a8bf; --ra2: #858f9d; --ra2-hi: #cad2dc; --ra-surface: #3c1d30; --ra2-surface: #28303a; }

#gate-2, #key-2, .remnant-catalog-item[data-realm="2"], .filter-pill[data-realm="2"] { --ra: #858f9d; --ra-hi: #cad2dc; --ra-surface: #28303a; }

#bridge-2-to-3 { --ra: #858f9d; --ra-hi: #cad2dc; --ra2: #5e8cae; --ra2-hi: #b0d5f0; --ra-surface: #28303a; --ra2-surface: #1b3248; }

#gate-3, #key-3, .remnant-catalog-item[data-realm="3"], .filter-pill[data-realm="3"] { --ra: #5e8cae; --ra-hi: #b0d5f0; --ra-surface: #1b3248; }

#bridge-3-to-4 { --ra: #5e8cae; --ra-hi: #b0d5f0; --ra2: #cf5c36; --ra2-hi: #f79b68; --ra-surface: #1b3248; --ra2-surface: #442215; }

#gate-4, #key-4, .remnant-catalog-item[data-realm="4"], .filter-pill[data-realm="4"] { --ra: #cf5c36; --ra-hi: #f79b68; --ra-surface: #442215; }

#bridge-4-to-5 { --ra: #cf5c36; --ra-hi: #f79b68; --ra2: #768f3a; --ra2-hi: #e1eef8; --ra-surface: #442215; --ra2-surface: #2f3c1d; }

#gate-5, #key-5, .remnant-catalog-item[data-realm="5"], .filter-pill[data-realm="5"] { --ra: #768f3a; --ra-hi: #e1eef8; --ra-surface: #2f3c1d; }

#bridge-5-to-6 { --ra: #768f3a; --ra-hi: #e1eef8; --ra2: #3c86be; --ra2-hi: #8cd0fc; --ra-surface: #2f3c1d; --ra2-surface: #16324a; }

#gate-6, #key-6, .remnant-catalog-item[data-realm="6"], .filter-pill[data-realm="6"] { --ra: #3c86be; --ra-hi: #8cd0fc; --ra-surface: #16324a; }

#bridge-6-to-7 { --ra: #3c86be; --ra-hi: #8cd0fc; --ra2: #898142; --ra2-hi: #d2ca88; --ra-surface: #16324a; --ra2-surface: #343a1e; }

#gate-7, #key-7, .remnant-catalog-item[data-realm="7"], .filter-pill[data-realm="7"] { --ra: #898142; --ra-hi: #d2ca88; --ra-surface: #343a1e; }

#bridge-7-to-8 { --ra: #898142; --ra-hi: #d2ca88; --ra2: #31927b; --ra2-hi: #85e2c1; --ra-surface: #343a1e; --ra2-surface: #193f36; }

#gate-8, #key-8, .remnant-catalog-item[data-realm="8"], .filter-pill[data-realm="8"] { --ra: #31927b; --ra-hi: #85e2c1; --ra-surface: #193f36; }

#bridge-8-to-9 { --ra: #31927b; --ra-hi: #85e2c1; --ra2: #916cc4; --ra2-hi: #caa8f8; --ra-surface: #193f36; --ra2-surface: #301f44; }

#gate-9, #key-9, .remnant-catalog-item[data-realm="9"], .filter-pill[data-realm="9"] { --ra: #916cc4; --ra-hi: #caa8f8; --ra-surface: #301f44; }

#bridge-9-to-10 { --ra: #916cc4; --ra-hi: #caa8f8; --ra2: #c29b40; --ra2-hi: #fbf0cf; --ra-surface: #301f44; --ra2-surface: #3a301c; }

#gate-10, #key-10, .remnant-catalog-item[data-realm="10"], .filter-pill[data-realm="10"] { --ra: #c29b40; --ra-hi: #fbf0cf; --ra-surface: #3a301c; }

#bridge-10-to-1 { --ra: #c29b40; --ra-hi: #fbf0cf; --ra2: #c06584; --ra2-hi: #f2a8bf; --ra-surface: #3a301c; --ra2-surface: #3c1d30; }

[id^="gate-"].gate-catalog-card, .keys-comparison-card, .remnant-catalog-item {
  background-color: var(--ra-surface, var(--card-bg));
  border-color: color-mix(in srgb, var(--ra, var(--card-border)) 55%, transparent);
  border-top: 3px solid var(--ra, var(--accent));
}
.gate-catalog-card .gate-num-badge, .gate-catalog-card .gate-realm-link a, .keys-comparison-card a,
.remnant-catalog-item .remnant-item-badge, .remnant-catalog-item .remnant-realm-name a, .remnant-catalog-item .remnant-detail-link {
  color: var(--ra-hi, var(--accent));
}
.gate-catalog-card .gate-card-title, .remnant-catalog-item .remnant-item-title { color: var(--ra-hi, var(--text-main)); }
.filter-pill[data-realm]:not([data-realm="all"]) { border-color: var(--ra, var(--card-border)); }
.filter-pill[data-realm]:not([data-realm="all"]).active { background-color: var(--ra-surface); color: var(--ra-hi); border-color: var(--ra-hi); }
.bridge-card {
  background-image: linear-gradient(90deg, var(--ra-surface, var(--card-bg)) 0%, var(--ra2-surface, var(--card-bg)) 100%);
  border-color: transparent;
  border-image: linear-gradient(90deg, var(--ra, var(--card-border)), var(--ra2, var(--card-border))) 1;
}
.bridge-card .bridge-node-link:first-of-type { color: var(--ra-hi, var(--accent)); }
.bridge-card .bridge-node-link:last-of-type { color: var(--ra2-hi, var(--accent)); }

/* Traveler lessons (no new colours: realm highlight / body text only, already contrast-checked) */
.lesson-list { list-style: none; padding: 0; margin: 1rem 0; }
.lesson-list-item { display: flex; gap: 0.75rem; align-items: baseline; padding: 0.6rem 0; border-bottom: 1px solid var(--card-border); }
.lesson-list-item a, .lesson-published a, .lesson-subscribe-line a, .lesson-remnant-link a, .page-lesson .section-tag a { color: var(--realm-hi, var(--accent)); }
.lesson-soon span:last-child { font-style: italic; }
.lesson-published { font-style: italic; margin-bottom: 2rem; }
.lesson-body h2, .lesson-body h3, .lesson-body h4, .lesson-body h5 { margin-top: 2rem; }
.lesson-body blockquote { border-left: 3px solid var(--realm-hi, var(--accent)); margin: 1.5rem 0; padding-left: 1.25rem; }
.lesson-body hr { border: 0; border-top: 1px solid var(--card-border); margin: 2rem 0; }
.lesson-subscribe .cta-button { margin: 0.25rem 0 1rem; display: inline-block; }
.lesson-subscribe { margin: 3rem 0 1rem; padding: 1.5rem; border: 1px solid var(--card-border); border-radius: 8px; text-align: center; }