/* davar-site.css — DAVAR-emitted cathedral-of-creation aesthetic
   Matches danczministries.com visual overhaul (2026-05-30 orbital wheel / magnitude)
   Served by davar_http.exe from web/assets/
*/

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

/* ── Palette ── */
:root {
  --gold:     #f0c963;
  --blue:     #4da6ff;
  --bg:       #020507;
  --surface:  #0a0e14;
  --surface2: #111822;
  --text:     #e8e8f0;
  --muted:    #8892a0;
  --border:   #1e2a38;
  --glow-g:   rgba(240,201,99,0.15);
  --glow-b:   rgba(77,166,255,0.12);
}

/* ── Base ── */
html { font-size: 16px; scroll-behavior: smooth; }
body {
  background: var(--bg);
  color: var(--text);
  font-family: 'Segoe UI', system-ui, -apple-system, sans-serif;
  line-height: 1.65;
  min-height: 100vh;
}
a { color: var(--blue); text-decoration: none; }
a:hover { color: var(--gold); }

/* ── Creation Field Canvas (living backdrop — hero + wheel stage) ── */
#dm-creation-field {
  position: fixed;
  inset: 0;
  width: 100%;
  height: 100%;
  z-index: 0;
  pointer-events: none;
  display: block;
}
/* All page content sits above the cosmos canvas */
.dm-nav,
.dm-hero,
.dm-doxology,
.dm-creation-wheel-section,
.dm-section,
.dm-magnitude-section,
.dm-footer {
  position: relative;
  z-index: 1;
}
/* Reduced-motion: hide the canvas entirely (static bg already covers it) */
@media (prefers-reduced-motion: reduce) {
  #dm-creation-field { display: none; }
}

/* ── Inner-page cosmos backdrop (lightweight — used on bible/sanctum/ministry/support/daveai) ── */
#dm-inner-cosmos {
  position: fixed;
  inset: 0;
  width: 100%;
  height: 100%;
  z-index: 0;
  pointer-events: none;
  display: block;
  opacity: 0.55; /* quieter than home canvas — content pages need higher readability */
}
@media (prefers-reduced-motion: reduce) {
  #dm-inner-cosmos { display: none; }
}

/* ── Nav ── */
.dm-nav {
  position: fixed; top: 0; left: 0; right: 0; z-index: 100;
  background: rgba(2,5,7,0.92);
  border-bottom: 1px solid var(--border);
  backdrop-filter: blur(8px);
  display: flex; align-items: center; justify-content: space-between;
  padding: 0 2rem; height: 60px;
}
.dm-nav-brand {
  font-size: 1.1rem; font-weight: 700;
  background: linear-gradient(90deg, var(--gold), var(--blue));
  -webkit-background-clip: text; -webkit-text-fill-color: transparent;
  background-clip: text;
}
.dm-nav-links { display: flex; gap: 1.5rem; }
.dm-nav-links a {
  color: var(--muted); font-size: 0.92rem; transition: color 0.2s;
}
.dm-nav-links a:hover,
.dm-nav-links a.active { color: var(--gold); }

/* ── Hero ── */
.dm-hero {
  min-height: 100vh;
  display: flex; flex-direction: column;
  align-items: center; justify-content: center;
  text-align: center;
  padding: 80px 2rem 5rem;
  position: relative; overflow: hidden;
}
.dm-hero::before {
  content: '';
  position: absolute; inset: 0;
  /* Stronger radial scrim — keeps cosmos backdrop dominant but carves out readable text zone */
  background:
    /* tight center text-legibility pool — bright enough to lift text contrast without blowing out the ring art */
    radial-gradient(ellipse 52% 34% at 50% 44%, rgba(2,5,7,0.82) 0%, rgba(2,5,7,0.55) 55%, transparent 80%),
    /* secondary gold halo framing the text block */
    radial-gradient(ellipse 68% 46% at 50% 42%, rgba(240,201,99,0.12), transparent 70%),
    /* top vignette keeps nav readable */
    linear-gradient(180deg, rgba(2,5,7,0.45) 0%, transparent 18%),
    /* bottom fade into next section */
    linear-gradient(0deg, rgba(2,5,7,0.50) 0%, transparent 20%);
  pointer-events: none; z-index: 1;
}
.dm-hero h1 {
  position: relative; z-index: 2;
  font-size: clamp(2.2rem, 5.5vw, 4.2rem);
  font-weight: 900; line-height: 1.1; letter-spacing: -0.02em;
  background: linear-gradient(135deg, var(--gold) 0%, #ffe59a 45%, var(--blue) 100%);
  -webkit-background-clip: text; -webkit-text-fill-color: transparent;
  background-clip: text; margin-bottom: 1.4rem;
  text-shadow: none;
}
.dm-hero p {
  position: relative; z-index: 2;
  font-size: clamp(1.1rem, 2.5vw, 1.38rem);
  color: #e8eef5; max-width: 620px; margin-bottom: 2.75rem;
  line-height: 1.75;
  text-shadow: 0 1px 12px rgba(2,5,7,0.85), 0 0 24px rgba(2,5,7,0.7);
}
.dm-hero .dm-cta-row { position: relative; z-index: 2; }
.dm-hero-art {
  position: absolute; inset: 0;
  background-size: cover; background-position: center center;
  opacity: 0.78; pointer-events: none;
  /* cosmos plate — full center exposure so ring is visible;
     light vignette at edges to blend into dark bg without masking the center art */
  mask-image: radial-gradient(ellipse 85% 80% at 50% 45%, rgba(0,0,0,1) 40%, rgba(0,0,0,0.6) 75%, rgba(0,0,0,0) 100%);
  -webkit-mask-image: radial-gradient(ellipse 85% 80% at 50% 45%, rgba(0,0,0,1) 40%, rgba(0,0,0,0.6) 75%, rgba(0,0,0,0) 100%);
}

/* ── CTA Buttons ── */
.dm-btn {
  display: inline-block; padding: 0.75rem 2rem;
  border-radius: 8px; font-weight: 600; font-size: 0.95rem;
  transition: all 0.2s; cursor: pointer; border: none;
}
.dm-btn-primary {
  background: linear-gradient(135deg, #f5d060 0%, var(--gold) 50%, #c9a030 100%);
  color: #000;
  /* stronger shadow so it reads over cosmos art */
  box-shadow: 0 4px 18px rgba(240,201,99,0.38), 0 0 0 1.5px rgba(240,201,99,0.55);
  text-shadow: 0 1px 0 rgba(255,255,255,0.18);
  font-weight: 700;
}
.dm-btn-primary:hover {
  transform: translateY(-3px);
  box-shadow: 0 10px 30px rgba(240,201,99,0.52), 0 0 0 2px rgba(240,201,99,0.7);
  color: #000;
}
.dm-btn-secondary {
  background: rgba(2,5,7,0.72); color: var(--blue);
  border: 1.5px solid rgba(77,166,255,0.72);
  /* frosted backing so it's visible over bright cosmos center */
  backdrop-filter: blur(6px);
  box-shadow: 0 2px 12px rgba(77,166,255,0.18), inset 0 0 0 1px rgba(77,166,255,0.12);
}
.dm-btn-secondary:hover {
  background: rgba(77,166,255,0.15);
  border-color: var(--blue);
  transform: translateY(-3px);
  color: var(--blue);
  box-shadow: 0 8px 24px rgba(77,166,255,0.25);
}
.dm-cta-row { display: flex; gap: 1rem; flex-wrap: wrap; justify-content: center; }

/* ── Section ── */
.dm-section {
  max-width: 1100px; margin: 0 auto; padding: 5.5rem 2rem;
}
.dm-section-title {
  font-size: clamp(1.55rem, 3vw, 2.3rem); font-weight: 800;
  color: var(--gold); margin-bottom: 1.5rem; letter-spacing: -0.01em;
}
.dm-section-body { color: var(--muted); max-width: 700px; margin-bottom: 2rem; font-size: 1.02rem; line-height: 1.72; }

/* ── Lane Cards ── */
.dm-lanes {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 1.5rem; margin-top: 2rem;
}
@media (max-width: 900px) {
  .dm-lanes { grid-template-columns: repeat(3, 1fr); }
}
.dm-lane-card {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 14px; padding: 2rem 1.5rem;
  text-align: center; transition: all 0.25s;
  text-decoration: none; display: block;
  position: relative; overflow: hidden;
  min-height: 180px;
}
.dm-lane-art-bg {
  position: absolute; inset: 0;
  background-image: var(--lane-art, none);
  background-size: cover; background-position: center;
  opacity: 0.12; transition: opacity 0.25s;
  border-radius: 14px;
}
.dm-lane-card:hover .dm-lane-art-bg { opacity: 0.22; }
.dm-lane-card:hover {
  border-color: var(--gold);
  box-shadow: 0 0 28px var(--glow-g);
  transform: translateY(-5px);
  color: var(--gold);
}
.dm-lane-icon { font-size: 2.2rem; margin-bottom: 0.85rem; position: relative; z-index: 1; }
.dm-lane-label { font-weight: 700; color: var(--gold); margin-bottom: 0.5rem; font-size: 1.0rem; position: relative; z-index: 1; }
.dm-lane-desc { font-size: 0.84rem; color: var(--muted); position: relative; z-index: 1; line-height: 1.5; }

/* ── Chat UI ── */
.dm-chat-wrap {
  background: var(--surface); border: 1px solid var(--border);
  border-radius: 12px; padding: 1.5rem;
  max-width: 760px; margin: 2rem auto;
}
.dm-chat-log {
  min-height: 260px; max-height: 420px; overflow-y: auto;
  margin-bottom: 1rem; padding: 0.5rem 0;
}
.dm-chat-msg { margin-bottom: 1rem; }
.dm-chat-msg.user .dm-chat-bubble {
  background: var(--surface2); color: var(--text);
  border-radius: 8px 8px 2px 8px; padding: 0.65rem 1rem;
  max-width: 80%; margin-left: auto;
}
.dm-chat-msg.dave .dm-chat-bubble {
  background: linear-gradient(135deg, #0a1a2e, #071018);
  border: 1px solid var(--border); color: var(--text);
  border-radius: 8px 8px 8px 2px; padding: 0.65rem 1rem;
  max-width: 80%;
}
.dm-chat-input-row { display: flex; gap: 0.75rem; }
.dm-chat-input {
  flex: 1; background: var(--surface2); border: 1px solid var(--border);
  color: var(--text); border-radius: 8px; padding: 0.65rem 1rem;
  font-size: 0.95rem;
}
.dm-chat-input:focus { outline: none; border-color: var(--blue); }
.dm-chat-input::placeholder { color: var(--muted); }

/* ── Search / Input ── */
.dm-search-row { display: flex; gap: 0.75rem; max-width: 640px; margin-bottom: 1.5rem; }
.dm-input {
  flex: 1; background: var(--surface); border: 1px solid var(--border);
  color: var(--text); border-radius: 8px; padding: 0.65rem 1rem; font-size: 0.95rem;
}
.dm-input:focus { outline: none; border-color: var(--gold); }
.dm-input::placeholder { color: var(--muted); }
.dm-results {
  background: var(--surface); border: 1px solid var(--border);
  border-radius: 10px; padding: 1.25rem; margin-top: 1rem;
  min-height: 80px; color: var(--text); font-size: 0.95rem;
}

/* ── Topic chips ── */
.dm-chips { display: flex; flex-wrap: wrap; gap: 0.5rem; margin-top: 1rem; }
.dm-chip {
  background: var(--surface2); border: 1px solid var(--border);
  color: var(--muted); border-radius: 20px; padding: 0.3rem 0.85rem;
  font-size: 0.82rem; cursor: pointer; transition: all 0.15s;
}
.dm-chip:hover { border-color: var(--gold); color: var(--gold); }

/* ── Status badge ── */
.dm-status { display: inline-flex; align-items: center; gap: 0.5rem; font-size: 0.85rem; }
.dm-status-dot {
  width: 8px; height: 8px; border-radius: 50%;
  background: #555; flex-shrink: 0;
}
.dm-status-dot.online  { background: #22c55e; box-shadow: 0 0 6px rgba(34,197,94,0.5); }
.dm-status-dot.offline { background: #ef4444; }

/* ── Runtime status grid (dave-ai page) ── */
.dm-runtime-status-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  gap: 1rem; margin-top: 1.5rem;
}
.dm-rstat-card {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 10px; padding: 1rem 1.25rem;
  display: flex; flex-direction: column; gap: 0.3rem;
  transition: border-color 0.25s;
}
.dm-rstat-card:hover { border-color: rgba(240,201,99,0.22); }
.dm-rstat-card .dm-status-dot { width: 10px; height: 10px; margin-bottom: 0.25rem; }
.dm-rstat-name { font-weight: 700; font-size: 0.82rem; color: var(--gold); }
.dm-rstat-val  { font-size: 0.78rem; color: var(--muted); }

/* ── Beliefs list ── */
.dm-beliefs { list-style: none; margin-top: 1rem; }
.dm-beliefs li {
  padding: 0.6rem 0; border-bottom: 1px solid var(--border);
  color: var(--text); display: flex; align-items: flex-start; gap: 0.75rem;
}
.dm-beliefs li::before { content: '\2736'; color: var(--gold); flex-shrink: 0; }

/* ── Capabilities list ── */
.dm-caps { list-style: none; margin-top: 1rem; display: grid; grid-template-columns: 1fr 1fr; gap: 0.75rem; }
.dm-cap-item {
  background: var(--surface); border: 1px solid var(--border);
  border-radius: 8px; padding: 0.85rem 1rem;
  color: var(--text); display: flex; align-items: flex-start; gap: 0.75rem;
}
.dm-cap-item::before { content: '\25C8'; color: var(--blue); }

/* ── Live API badge (sanctum / ministry cosmos) ── */
.dm-live-badge {
  display: inline-flex; align-items: center; gap: 0.65rem;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 10px;
  padding: 0.6rem 1.2rem;
  font-size: 0.84rem; color: var(--muted);
  margin: 1.25rem 0; transition: border-color 0.3s;
}
.dm-live-badge.live { border-color: rgba(34,197,94,0.35); }
.dm-live-badge .dm-status-dot { width: 9px; height: 9px; flex-shrink: 0; }

/* ── Scripture search results ── */
.dm-scripture-results {
  margin-top: 1.5rem;
  display: flex; flex-direction: column; gap: 0.85rem;
}
.dm-verse-card {
  background: var(--surface); border: 1px solid var(--border);
  border-radius: 10px; padding: 1rem 1.25rem;
  transition: border-color 0.2s;
}
.dm-verse-card:hover { border-color: rgba(240,201,99,0.3); }
.dm-verse-ref {
  font-size: 0.78rem; font-weight: 700; color: var(--gold);
  letter-spacing: 0.06em; text-transform: uppercase; margin-bottom: 0.4rem;
}
.dm-verse-text { color: var(--text); font-size: 0.95rem; line-height: 1.65; }

/* ── Apologetics result card ── */
.dm-apol-result {
  background: var(--surface); border: 1px solid rgba(240,201,99,0.2);
  border-radius: 12px; padding: 1.5rem;
  margin-top: 1.25rem;
}
.dm-apol-guidance { color: var(--text); font-size: 1.02rem; line-height: 1.72; margin-bottom: 1rem; }
.dm-apol-scripture { color: var(--muted); font-size: 0.88rem; border-top: 1px solid var(--border); padding-top: 0.75rem; margin-top: 0.5rem; }
.dm-apol-scripture strong { color: var(--gold); }

/* ── Footer ── */
.dm-footer {
  border-top: 1px solid var(--border);
  text-align: center; padding: 2.5rem 2rem;
  color: var(--muted); font-size: 0.85rem;
}
.dm-footer strong { color: var(--gold); }

/* ── Atlas pulse ── */
.dm-atlas-pulse {
  display: inline-flex; align-items: center; gap: 0.75rem;
  background: var(--surface); border: 1px solid var(--border);
  border-radius: 8px; padding: 0.65rem 1.25rem;
  font-size: 0.88rem; color: var(--muted); margin-top: 1rem;
}

/* ══════════════════════════════════════════════════════
   DOXOLOGY DIVIDER
   ══════════════════════════════════════════════════════ */
.dm-doxology {
  text-align: center; padding: 2rem 2rem 0;
  font-size: 0.8rem; letter-spacing: 0.18em; text-transform: uppercase;
  color: rgba(240,201,99,0.38);
}

/* ══════════════════════════════════════════════════════
   CREATION WHEEL — Signature orbital ring
   ══════════════════════════════════════════════════════ */

.dm-creation-wheel-section {
  background: radial-gradient(ellipse 120% 80% at 50% 55%, #060e1a 0%, var(--bg) 100%);
  border-top: 1px solid var(--border);
  border-bottom: 1px solid var(--border);
  padding: 5rem 2rem 4.5rem;
  overflow: hidden;
}
.dm-wheel-header {
  text-align: center; max-width: 720px; margin: 0 auto 3.5rem;
}
.dm-wheel-header .dm-section-title { text-align: center; }
.dm-wheel-header .dm-section-body  { margin-left: auto; margin-right: auto; }

/* ── Stage (square container, satellites position inside it) ── */
.dm-wheel-stage {
  position: relative;
  width: min(680px, 92vw);
  height: min(680px, 92vw);
  margin: 0 auto;
}

/* ── Orbit ring traces ── */
.dm-wheel-orbit-ring {
  position: absolute; inset: 0;
  border-radius: 50%;
  /* faint but visible gold orbit trace */
  border: 1px solid rgba(240,201,99,0.22);
  box-shadow: 0 0 80px rgba(240,201,99,0.07) inset,
              0 0 0 1px rgba(240,201,99,0.06);
  pointer-events: none;
}
.dm-wheel-orbit-ring::before {
  content: '';
  position: absolute; inset: 14%;
  border-radius: 50%;
  border: 1px dashed rgba(77,166,255,0.10);
}
.dm-wheel-orbit-ring::after {
  content: '';
  position: absolute; inset: 30%;
  border-radius: 50%;
  border: 1px solid rgba(240,201,99,0.08);
}

/* ── Glowing core ── */
.dm-wheel-core {
  position: absolute;
  top: 50%; left: 50%;
  transform: translate(-50%, -50%);
  width: min(190px, 28vw);
  height: min(190px, 28vw);
  border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  z-index: 4;
}
.dm-core-pulse {
  position: absolute; inset: 0;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(240,201,99,0.20) 0%, rgba(240,201,99,0.05) 55%, transparent 75%);
  box-shadow:
    0 0 50px rgba(240,201,99,0.16),
    0 0 100px rgba(240,201,99,0.07),
    0 0 0 1px rgba(240,201,99,0.22);
  animation: dm-core-breathe 4.5s ease-in-out infinite;
}
@keyframes dm-core-breathe {
  0%, 100% { opacity: 0.78; transform: scale(1); }
  50%       { opacity: 1;    transform: scale(1.07); }
}
.dm-core-text {
  position: relative; z-index: 1;
  text-align: center;
  font-size: clamp(0.7rem, 1.3vw, 0.88rem);
  font-weight: 700; letter-spacing: 0.04em; line-height: 1.55;
  color: var(--gold);
  text-shadow: 0 0 20px rgba(240,201,99,0.55);
  padding: 0 0.75rem;
}

/* ── Sat group — rotates to carry all satellites in orbit ── */
.dm-wheel-sat-group {
  position: absolute; inset: 0;
  animation: dm-group-spin 80s linear infinite;
}
@keyframes dm-group-spin { to { transform: rotate(360deg); } }

/* ── Individual satellite ──
   Positioned by CSS custom props:
     --i : 0-based index  (set inline by emit.py)
     --n : domain count   (set inline by emit.py)
   Strategy: The sat element is placed at origin (top/left 50%),
   rotated by its initial angle, then pushed outward along X.
   The sat-body counter-rotates BOTH the group spin AND the sat's
   own initial angle, so icons/labels always face upright.
*/
.dm-orbit-sat {
  position: absolute;
  top: 50%; left: 50%;
  /* orbs ~130px as requested */
  width: min(130px, 18vw);
  height: min(130px, 18vw);
  /* pull back by half own size */
  margin-top:  calc(-1 * min(65px, 9vw));
  margin-left: calc(-1 * min(65px, 9vw));
  border-radius: 50%;
  background: var(--surface);
  border: 1.5px solid var(--border);
  cursor: pointer;
  z-index: 3;
  overflow: visible;
  /* rotate by initial angle then push outward */
  transform:
    rotate(calc(var(--i) * (360deg / var(--n))))
    translateX(min(240px, 35.5vw));
  transition: border-color 0.35s, box-shadow 0.35s;
}

/* ── Art fill (clip to circle) ── */
.dm-sat-art {
  position: absolute; inset: 0;
  background-size: cover; background-position: center;
  opacity: 0.28; border-radius: 50%;
  transition: opacity 0.35s;
  overflow: hidden;
  clip-path: circle(50% at 50% 50%);
}

/* ── Sat body — counter-spins so text stays upright ──
   Must undo: (a) the group's ongoing CW spin, AND
              (b) the sat's own initial placement angle (--i * 360/n).
   We handle (a) with the counter-spin animation and (b) by baking
   the initial counter-angle into the animation start via a CSS
   rotate applied before the animation kicks in. Because CSS
   animations override the transform property, we use a wrapper
   strategy: the sat-body has transform-origin center and uses
   JavaScript (injected by emit.py) to set its exact counter-angle
   as a CSS variable, then the animation uses that.

   Simpler pure-CSS approach used here:
   - The sat element is positioned via rotate+translateX (initial angle baked in)
   - The body applies a STATIC counter-rotate of the initial angle first,
     THEN the running counter-spin animation undoes only the group spin.
   - We do this by setting --angle = --i * 360 / --n as a custom property
     and using a separate counter-spin keyframe that includes it.

   Since CSS can't compute --i * 360 / --n at keyframe time, we use a
   JS shim injected in the creation_ring_html to set data attributes
   and directly set the animation. See emit.py creation_ring_html function.
   Until JS loads, we apply a rough upright approximation via rotate(0).
*/
.dm-sat-body {
  position: absolute; inset: 0; border-radius: 50%;
  display: flex; flex-direction: column;
  align-items: center; justify-content: center;
  padding: 0.5rem; text-align: center; z-index: 2;
  /* JS will set exact counter-rotation; CSS fallback keeps roughly upright */
  transform-origin: center center;
}
@keyframes dm-counter-spin {
  from { transform: rotate(var(--sat-start-angle, 0deg)); }
  to   { transform: rotate(calc(var(--sat-start-angle, 0deg) - 360deg)); }
}

.dm-sat-icon {
  font-size: min(1.4rem, 2.6vw);
  color: var(--gold); margin-bottom: 0.25rem;
  text-shadow: 0 0 14px rgba(240,201,99,0.55);
}
.dm-sat-label {
  font-size: min(0.70rem, 1.25vw);
  font-weight: 800; color: var(--gold);
  line-height: 1.2; letter-spacing: 0.025em;
}

/* ── Hover: illuminate ── */
.dm-orbit-sat:hover {
  border-color: var(--gold);
  box-shadow:
    0 0 0 2px rgba(240,201,99,0.25),
    0 0 30px rgba(240,201,99,0.28),
    0 0 70px rgba(240,201,99,0.12);
  z-index: 10;
}
.dm-orbit-sat:hover .dm-sat-art { opacity: 0.62; }
.dm-orbit-sat:hover .dm-sat-panel {
  opacity: 1;
  transform: translateX(-50%) translateY(0) scale(1);
}

/* ── Hover info panel ── */
.dm-sat-panel {
  position: absolute;
  bottom: calc(100% + 14px);
  left: 50%;
  /* panel is a child of sat-body which counter-rotates, so panel itself
     is already upright — no extra transform needed here */
  transform: translateX(-50%) translateY(10px) scale(0.94);
  width: min(210px, 56vw);
  background: rgba(8,12,18,0.97);
  border: 1px solid rgba(240,201,99,0.28);
  border-radius: 12px;
  padding: 1rem 1.15rem;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.28s, transform 0.28s;
  z-index: 20;
}
.dm-sat-panel-label {
  font-weight: 800; color: var(--gold);
  font-size: 0.88rem; margin-bottom: 0.45rem;
}
.dm-sat-panel-desc {
  font-size: 0.78rem; color: #9daab8; line-height: 1.55;
}

.dm-wheel-hint {
  text-align: center; margin-top: 2.25rem;
  font-size: 0.75rem; color: rgba(240,201,99,0.28);
  letter-spacing: 0.14em; text-transform: uppercase;
}

/* ── Responsive wheel ── */
@media (max-width: 560px) {
  .dm-sat-label { font-size: 0.58rem; }
  .dm-sat-icon  { font-size: 0.95rem; }
  .dm-sat-panel { display: none; }
  .dm-wheel-stage { width: 96vw; height: 96vw; }
}

/* ══════════════════════════════════════════════════════
   MAGNITUDE SECTION — Everything He Made
   ══════════════════════════════════════════════════════ */

.dm-magnitude-section {
  position: relative;
  background: linear-gradient(180deg, #060d14 0%, #020507 100%);
  border-top: 1px solid var(--border);
  border-bottom: 1px solid var(--border);
  overflow: hidden;
  padding: 6rem 2rem;
}
.dm-particles-canvas {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  pointer-events: none; opacity: 0.65;
}
.dm-magnitude-inner {
  position: relative; z-index: 2;
  max-width: 1100px; margin: 0 auto;
}
.dm-mag-doxology {
  text-align: center;
  font-size: clamp(0.9rem, 1.8vw, 1.08rem);
  font-style: italic;
  color: rgba(240,201,99,0.52);
  margin-bottom: 2rem;
  display: flex; align-items: center; justify-content: center;
  flex-wrap: wrap; gap: 0.75rem 1rem;
  letter-spacing: 0.02em;
}
.dm-dox-star { color: rgba(240,201,99,0.32); font-style: normal; }
.dm-mag-title {
  text-align: center;
  font-size: clamp(1.8rem, 4vw, 3rem);
  font-weight: 900; color: var(--gold);
  letter-spacing: -0.02em;
  margin-bottom: 3rem;
  text-shadow: 0 0 40px rgba(240,201,99,0.12);
}
.dm-mag-stats {
  display: flex; flex-wrap: wrap; gap: 1.5rem;
  justify-content: center; margin-bottom: 4rem;
}
.dm-mag-stat {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 14px;
  padding: 1.5rem 2rem;
  text-align: center;
  min-width: 140px;
  transition: border-color 0.25s, box-shadow 0.25s;
}
.dm-mag-stat:hover {
  border-color: rgba(240,201,99,0.28);
  box-shadow: 0 0 24px rgba(240,201,99,0.08);
}
.dm-mag-num {
  font-size: clamp(1.5rem, 3.5vw, 2.2rem);
  font-weight: 900;
  background: linear-gradient(135deg, var(--gold), #ffe59a);
  -webkit-background-clip: text; -webkit-text-fill-color: transparent;
  background-clip: text;
  line-height: 1.1; margin-bottom: 0.3rem;
}
.dm-mag-label {
  font-size: 0.78rem; color: var(--muted);
  text-transform: uppercase; letter-spacing: 0.1em;
}
.dm-mag-body-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 3rem; align-items: center;
}
@media (max-width: 800px) {
  .dm-mag-body-row { grid-template-columns: 1fr; }
}
.dm-mag-mosaic {
  display: grid;
  grid-template-columns: 1fr 1fr;
  grid-template-rows: 240px 150px;
  gap: 0.75rem;
}
.dm-mag-art-panel {
  background-size: cover; background-position: center;
  border-radius: 12px;
  border: 1px solid var(--border);
  opacity: 0.72;
  transition: opacity 0.3s;
}
.dm-mag-art-panel:first-child {
  grid-column: 1 / -1;
}
.dm-mag-art-panel:hover { opacity: 0.95; }
.dm-mag-text p {
  color: #aab8c8; line-height: 1.78;
  font-size: 1.04rem; margin-bottom: 2rem;
}
.dm-mag-cta { font-size: 1rem; padding: 0.85rem 2.5rem; }

/* ── Responsive ── */
@media (max-width: 600px) {
  .dm-nav-links { display: none; }
  .dm-caps { grid-template-columns: 1fr; }
  .dm-lanes { grid-template-columns: 1fr 1fr; }
  .dm-mag-mosaic { grid-template-rows: 160px 100px; }
}


/* ── bible-flagship-wiring-20260530 — Interlinear Reader + Strong's CSS ── */
.dm-verse-nav { display:flex; flex-wrap:wrap; gap:0.5rem; margin-bottom:1.5rem; align-items:center; }
.dm-verse-nav .dm-input { flex-shrink:0; }
.dm-translation-strip { display:grid; grid-template-columns:1fr 1fr; gap:1rem; margin:1.5rem 0; padding:1rem; background:#0a121d; border-radius:8px; border:1px solid #1e3a5f; }
.dm-trans-label { font-size:0.7rem; color:#4da6ff; text-transform:uppercase; letter-spacing:0.1em; display:block; margin-bottom:0.4rem; }
.dm-trans-kjv p, .dm-trans-original p { color:#e0e0e0; font-size:0.95rem; line-height:1.6; margin:0; }
.dm-word-grid { display:flex; flex-wrap:wrap; gap:0.5rem 1rem; margin:1.5rem 0; direction:ltr; }
.dm-word-cell { text-align:center; min-width:60px; max-width:120px; padding:0.25rem 0.1rem; }
.dm-word-original { font-size:1.3rem; color:#f0c963; font-family:serif; display:block; }
.dm-word-translit { font-size:0.7rem; color:#aaa; display:block; }
.dm-word-english { font-size:0.8rem; color:#e0e0e0; display:block; margin-top:2px; }
.dm-strongs-badge { font-size:0.65rem; color:#4da6ff; cursor:pointer; border:1px solid #4da6ff33; border-radius:3px; padding:1px 3px; margin-top:3px; display:inline-block; transition:background 0.15s; }
.dm-strongs-badge:hover { background:#4da6ff22; }
.dm-strongs-tooltip { position:fixed; max-width:300px; background:#0d1825; border:1px solid #f0c963; border-radius:6px; padding:0.75rem 1rem; z-index:1000; box-shadow:0 4px 24px #000a; pointer-events:none; }
.dm-strongs-id { font-size:0.7rem; color:#4da6ff; }
.dm-strongs-headword { font-size:1rem; color:#f0c963; font-weight:600; display:block; margin:4px 0; font-family:serif; }
.dm-strongs-def { font-size:0.8rem; color:#ccc; margin:0; line-height:1.4; }
.dm-original-script { font-family:serif; font-size:1.1rem; direction:auto; }
.dm-section-flagship { border-top:2px solid #f0c96344; padding-top:2.5rem; }
.dm-crossref-chips { display:flex; flex-wrap:wrap; gap:0.4rem; }
.dm-crossref-chip { background:#0d1825; border:1px solid #1e3a5f; color:#4da6ff; font-size:0.75rem; padding:0.25rem 0.6rem; border-radius:4px; cursor:pointer; transition:background 0.15s; }
.dm-crossref-chip:hover { background:#1e3a5f; }
.dm-strongs-card, .dm-father-card { background:#0a121d; border:1px solid #1e3a5f; border-radius:8px; padding:1rem; margin-bottom:0.75rem; }

/* ── Cathedral of Creation (/creation) — domain galleries ── */
.dm-cathedral-domains {
  display: flex; flex-direction: column; gap: 0.5rem;
  margin-top: 2rem;
}
.dm-cathedral-domain {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 12px;
  overflow: hidden;
  transition: border-color 0.2s;
}
.dm-cathedral-domain:hover { border-color: rgba(240,201,99,0.4); }

.dm-cathedral-domain-header {
  display: flex; align-items: center; gap: 1rem;
  width: 100%; background: none; border: none;
  color: var(--text); padding: 1.25rem 1.75rem;
  cursor: pointer; text-align: left;
  transition: background 0.15s;
}
.dm-cathedral-domain-header:hover { background: rgba(240,201,99,0.05); }
.dm-cathedral-domain-icon { color: var(--gold); font-size: 1.1rem; flex-shrink: 0; }
.dm-cathedral-domain-title {
  flex: 1; font-size: 1.05rem; font-weight: 700; color: var(--gold); letter-spacing: -0.01em;
}
.dm-cathedral-badge {
  font-size: 0.72rem; color: var(--muted); background: var(--surface2);
  border: 1px solid var(--border); border-radius: 20px; padding: 0.2rem 0.7rem;
  flex-shrink: 0;
}
.dm-cathedral-chevron { color: var(--muted); font-size: 0.75rem; flex-shrink: 0; transition: transform 0.2s; }

.dm-cathedral-domain-body {
  padding: 0 1.75rem 1.75rem;
}
.dm-cathedral-mosaic {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 0.75rem;
  margin-bottom: 1.25rem;
}
@media (max-width: 700px) {
  .dm-cathedral-mosaic { grid-template-columns: 1fr 1fr; }
}
.dm-cathedral-plate {
  aspect-ratio: 16/9;
  background-size: cover; background-position: center;
  border-radius: 8px;
  border: 1px solid var(--border);
  transition: transform 0.2s, box-shadow 0.2s;
  cursor: default;
}
.dm-cathedral-plate:hover {
  transform: scale(1.025);
  box-shadow: 0 0 20px rgba(240,201,99,0.2);
}
.dm-cathedral-desc {
  color: var(--muted); font-size: 0.92rem; line-height: 1.72; margin-bottom: 1rem; max-width: 820px;
}
.dm-cathedral-verse {
  border-left: 3px solid var(--gold);
  padding-left: 1rem; margin-top: 0.75rem;
  font-size: 0.88rem; color: rgba(232,232,240,0.7); font-style: italic;
}
.dm-cathedral-verse-ref {
  color: var(--gold); font-style: normal; font-weight: 600; margin-right: 0.5rem;
}

/* Atlas pulse line */
.dm-atlas-pulse {
  display: flex; align-items: center; gap: 0.6rem;
  font-size: 0.85rem; color: var(--muted);
  padding: 0.6rem 1rem; background: var(--surface); border: 1px solid var(--border);
  border-radius: 8px; display: inline-flex;
}