/* /why-mneos — Cinematic experience CSS
   8 movements + Scholar Mode. Reduced-motion aware. Mobile-first.
*/

/* ============================================================
   BASE + LAYOUT
   ============================================================ */
.wm-body {
  --wm-bg: #0a0b0e;
  --wm-bg-alt: #0f1116;
  --wm-ink: #f3efe7;
  --wm-ink-dim: #c4bdae;
  --wm-ink-faint: #b0a899;
  --wm-accent: #d1a961;         /* warm gold */
  --wm-accent-dim: #8f6f34;
  --wm-lethe: #6ea7c4;          /* cool blue-cyan */
  --wm-mnemo: #d1a961;          /* warm gold */
  --wm-border: rgba(255,255,255,0.1);
  background: var(--wm-bg);
  color: var(--wm-ink);
  font-family: 'Inter', ui-sans-serif, system-ui, sans-serif;
  line-height: 1.6;
}

/* Persistent scholar-mode toggle */
.wm-mode-toggle {
  position: fixed;
  top: 96px;
  right: 20px;
  z-index: 30;
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 8px 14px 8px 12px;
  background: linear-gradient(180deg, #1c1e24, #12141a);
  border: 1px solid rgba(255,255,255,0.16);
  border-radius: 999px;
  color: var(--wm-ink);
  font-family: 'JetBrains Mono', monospace;
  font-size: 12px;
  letter-spacing: 1.5px;
  text-transform: uppercase;
  cursor: pointer;
  box-shadow: 0 1px 0 rgba(255,255,255,0.05) inset, 0 3px 10px rgba(0,0,0,0.5);
  transition: all 0.15s ease;
}
.wm-mode-toggle:hover, .wm-mode-toggle:focus-visible {
  border-color: var(--wm-accent);
  color: var(--wm-accent);
  outline: none;
}
.wm-mode-toggle .dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--wm-accent);
  box-shadow: 0 0 8px var(--wm-accent);
}
.wm-body[data-mode="scholar"] .wm-mode-toggle .dot {
  background: var(--wm-lethe);
  box-shadow: 0 0 8px var(--wm-lethe);
}

/* ============================================================
   MOVEMENT — shared structural rules
   ============================================================ */
.wm-mov {
  position: relative;
  min-height: 100vh;
  padding: 96px 0 96px;
  display: flex;
  align-items: center;
  overflow: hidden;
  border-bottom: 1px solid rgba(255,255,255,0.04);
}
.wm-mov-inner {
  position: relative;
  z-index: 2;
  max-width: 900px;
  margin: 0 auto;
  padding: 0 28px;
  width: 100%;
}
.wm-mov-num {
  font-family: 'JetBrains Mono', monospace;
  font-size: 12px;
  letter-spacing: 3.5px;
  color: var(--wm-accent);
  text-transform: uppercase;
  margin: 0 0 20px;
  opacity: 0.85;
}
.wm-mov h2 {
  font-family: 'Space Grotesk', 'Inter', sans-serif;
  font-weight: 500;
  font-size: clamp(30px, 5vw, 52px);
  line-height: 1.15;
  letter-spacing: -0.015em;
  color: var(--wm-ink);
  margin: 0 0 32px;
  max-width: 780px;
}
.wm-mov p.wm-lede {
  font-family: 'Inter', sans-serif;
  font-size: clamp(17px, 2.2vw, 20px);
  line-height: 1.6;
  color: rgba(243,239,231,0.88);
  margin: 0 0 24px;
  max-width: 640px;
}
.wm-mov p.wm-mono {
  font-family: 'JetBrains Mono', monospace;
  font-size: clamp(13px, 1.5vw, 15px);
  line-height: 1.55;
  color: var(--wm-ink-faint);
  margin: 0 0 12px;
  letter-spacing: 0.5px;
}

/* Cinematic hero images */
.wm-hero-bg {
  position: absolute;
  inset: 0;
  z-index: 1;
  background-size: cover;
  background-position: center;
  opacity: 0.32;
}
.wm-hero-bg::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(10,11,14,0.7) 0%, rgba(10,11,14,0.85) 40%, rgba(10,11,14,0.7) 100%);
}

/* Audio player — small, per-movement */
.wm-audio {
  margin: 28px 0 0;
  padding: 12px 16px;
  display: inline-flex;
  align-items: center;
  gap: 12px;
  background: rgba(255,255,255,0.04);
  border: 1px solid rgba(255,255,255,0.12);
  border-radius: 999px;
  font-family: 'JetBrains Mono', monospace;
  font-size: 12px;
  letter-spacing: 1.5px;
  text-transform: uppercase;
  color: var(--wm-ink-faint);
  cursor: pointer;
  transition: all 0.15s ease;
  box-shadow: 0 1px 0 rgba(255,255,255,0.03) inset;
}
.wm-audio:hover, .wm-audio:focus-visible {
  border-color: var(--wm-accent);
  color: var(--wm-accent);
  outline: none;
}
.wm-audio-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 24px;
  height: 24px;
  border-radius: 50%;
  background: var(--wm-accent);
  color: var(--wm-bg);
  flex-shrink: 0;
  transition: background 0.15s ease;
}
.wm-audio.playing .wm-audio-icon { background: var(--wm-ink); }
.wm-audio-icon svg { width: 10px; height: 10px; }

/* ============================================================
   MOVEMENT 1 — Before Writing
   ============================================================ */
.wm-m1 .wm-hero-bg { background-image: url('/assets/why-mneos/hero/m1_before_writing.webp'); opacity: 0.42; }
.wm-m1 .wm-hero-bg::after {
  background: linear-gradient(180deg, rgba(10,11,14,0.55) 0%, rgba(10,11,14,0.75) 100%);
}
.wm-m1 .wm-mov-inner { text-align: left; }
.wm-oral-list {
  list-style: none;
  padding: 0;
  margin: 32px 0 0;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 8px 24px;
  font-family: 'JetBrains Mono', monospace;
  font-size: 12.5px;
  letter-spacing: 1.5px;
  text-transform: uppercase;
  color: var(--wm-ink-faint);
  max-width: 720px;
}
.wm-oral-list li {
  padding: 6px 0;
  border-bottom: 1px solid rgba(255,255,255,0.05);
  opacity: 0;
  transform: translateY(6px);
  transition: opacity 0.7s ease, transform 0.7s ease;
  transition-delay: calc(var(--i, 0) * 90ms);
}
.wm-oral-list.reveal li { opacity: 0.9; transform: translateY(0); }

/* ============================================================
   MOVEMENT 2 — Writing Externalizes Memory (timeline scrubber)
   ============================================================ */
.wm-m2 .wm-hero-bg { background-image: url('/assets/why-mneos/hero/m2_writing.webp'); opacity: 0.35; }
.wm-scrubber {
  margin: 40px 0 0;
  padding: 24px 20px;
  background: linear-gradient(180deg, #14171e, #0f1116);
  border: 1px solid rgba(255,255,255,0.12);
  border-radius: 10px;
  box-shadow: 0 4px 20px rgba(0,0,0,0.4);
}
.wm-scrubber-label {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  margin-bottom: 16px;
}
.wm-scrubber-label .cur {
  font-family: 'Space Grotesk', sans-serif;
  font-weight: 500;
  font-size: 22px;
  color: var(--wm-accent);
}
.wm-scrubber-label .era {
  font-family: 'JetBrains Mono', monospace;
  font-size: 12px;
  letter-spacing: 1.5px;
  color: var(--wm-ink-faint);
  text-transform: uppercase;
}
.wm-scrubber input[type=range] {
  width: 100%;
  -webkit-appearance: none;
  appearance: none;
  height: 4px;
  background: linear-gradient(to right, var(--wm-accent) var(--val, 0%), rgba(255,255,255,0.15) var(--val, 0%));
  border-radius: 2px;
  outline: none;
  cursor: pointer;
}
.wm-scrubber input[type=range]::-webkit-slider-thumb {
  -webkit-appearance: none;
  appearance: none;
  width: 22px;
  height: 22px;
  border-radius: 50%;
  background: var(--wm-accent);
  border: 3px solid #0f1116;
  cursor: grab;
  box-shadow: 0 2px 8px rgba(209,169,97,0.5);
  transition: transform 0.15s ease;
}
.wm-scrubber input[type=range]::-webkit-slider-thumb:hover { transform: scale(1.1); }
.wm-scrubber input[type=range]::-webkit-slider-thumb:active { cursor: grabbing; transform: scale(1.05); }
.wm-scrubber input[type=range]::-moz-range-thumb {
  width: 22px;
  height: 22px;
  border-radius: 50%;
  background: var(--wm-accent);
  border: 3px solid #0f1116;
  cursor: grab;
}
.wm-scrubber-detail {
  margin-top: 20px;
  padding-top: 20px;
  border-top: 1px solid rgba(255,255,255,0.06);
  min-height: 90px;
}
.wm-scrubber-detail h3 {
  font-family: 'Space Grotesk', sans-serif;
  font-weight: 500;
  font-size: 18px;
  color: var(--wm-ink);
  margin: 0 0 6px;
}
.wm-scrubber-detail p {
  font-family: 'Inter', sans-serif;
  font-size: 14.5px;
  line-height: 1.55;
  color: var(--wm-ink-dim);
  margin: 0;
}
.wm-scrubber-marks {
  display: flex;
  justify-content: space-between;
  margin-top: 8px;
  font-family: 'JetBrains Mono', monospace;
  font-size: 12px;
  color: var(--wm-ink-faint);
  letter-spacing: 1px;
}

/* ============================================================
   MOVEMENT 3 — Mnemosyne Revealed
   ============================================================ */
.wm-m3 { min-height: 90vh; }
.wm-m3 .wm-hero-bg { background-image: url('/assets/why-mneos/hero/m3_mnemosyne.webp'); opacity: 0.65; }
.wm-m3 .wm-hero-bg::after {
  background: radial-gradient(ellipse at 60% 50%, transparent 0%, rgba(10,11,14,0.7) 65%, rgba(10,11,14,0.95) 100%);
}
.wm-m3 .wm-mov-inner { text-align: center; }
.wm-m3 h2 { margin-left: auto; margin-right: auto; }
.wm-m3 .wm-lede { margin-left: auto; margin-right: auto; }
.wm-name-drop {
  font-family: 'Space Grotesk', serif;
  font-weight: 400;
  font-size: clamp(56px, 10vw, 120px);
  line-height: 1;
  letter-spacing: 0.02em;
  color: var(--wm-accent);
  margin: 40px 0 32px;
  text-shadow: 0 0 40px rgba(209,169,97,0.25);
}

/* ============================================================
   MOVEMENT 4 — Lethe vs Mnemosyne (signature interaction)
   ============================================================ */
.wm-m4 { min-height: 100vh; padding: 96px 0 128px; }
.wm-m4 .wm-hero-bg { background-image: url('/assets/why-mneos/hero/m4_lethe_mnemosyne.webp'); opacity: 0.5; }
.wm-m4 .wm-hero-bg::after {
  background: linear-gradient(180deg, rgba(10,11,14,0.6) 0%, rgba(10,11,14,0.75) 100%);
}
.wm-choice {
  margin-top: 48px;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 20px;
}
.wm-choice-card {
  position: relative;
  padding: 32px 28px;
  background: linear-gradient(180deg, rgba(255,255,255,0.03), rgba(0,0,0,0.35));
  border: 1px solid rgba(255,255,255,0.1);
  border-radius: 10px;
  cursor: pointer;
  transition: all 0.2s ease;
  color: inherit;
  font: inherit;
  text-align: left;
  width: 100%;
  overflow: hidden;
  box-shadow: 0 4px 12px rgba(0,0,0,0.35);
}
.wm-choice-card:hover, .wm-choice-card:focus-visible {
  transform: translateY(-2px);
  outline: none;
}
.wm-choice-lethe:hover, .wm-choice-lethe:focus-visible {
  border-color: var(--wm-lethe);
  box-shadow: 0 6px 20px rgba(110,167,196,0.2);
}
.wm-choice-mnemo:hover, .wm-choice-mnemo:focus-visible {
  border-color: var(--wm-mnemo);
  box-shadow: 0 6px 20px rgba(209,169,97,0.25);
}
.wm-choice-card.active { transform: translateY(-2px); }
.wm-choice-lethe.active { border-color: var(--wm-lethe); background: linear-gradient(180deg, rgba(110,167,196,0.08), rgba(0,0,0,0.35)); }
.wm-choice-mnemo.active { border-color: var(--wm-mnemo); background: linear-gradient(180deg, rgba(209,169,97,0.08), rgba(0,0,0,0.35)); }
.wm-choice-eyebrow {
  font-family: 'JetBrains Mono', monospace;
  font-size: 12px;
  letter-spacing: 2.5px;
  text-transform: uppercase;
  margin: 0 0 10px;
}
.wm-choice-lethe .wm-choice-eyebrow { color: var(--wm-lethe); }
.wm-choice-mnemo .wm-choice-eyebrow { color: var(--wm-mnemo); }
.wm-choice-name {
  font-family: 'Space Grotesk', serif;
  font-weight: 500;
  font-size: 32px;
  color: var(--wm-ink);
  margin: 0 0 4px;
  line-height: 1;
}
.wm-choice-sub {
  font-family: 'Inter', sans-serif;
  font-size: 14px;
  color: var(--wm-ink-faint);
  margin: 0 0 20px;
  letter-spacing: 0.5px;
}
.wm-choice-desc {
  font-family: 'Inter', sans-serif;
  font-size: 14.5px;
  line-height: 1.55;
  color: rgba(243,239,231,0.75);
  margin: 0;
}
/* Visual effect of the choice - the memory web  */
.wm-web {
  margin-top: 40px;
  padding: 40px 24px;
  background: linear-gradient(180deg, #0d0f14, #08090c);
  border: 1px solid rgba(255,255,255,0.08);
  border-radius: 10px;
  min-height: 260px;
  position: relative;
  overflow: hidden;
}
.wm-web-svg {
  display: block;
  width: 100%;
  height: auto;
  max-height: 340px;
  transition: filter 0.6s ease;
}
.wm-web[data-state="forgetting"] .wm-web-node,
.wm-web[data-state="forgetting"] .wm-web-edge {
  opacity: 0;
  transition: opacity 1.5s ease;
}
.wm-web[data-state="remembering"] .wm-web-node,
.wm-web[data-state="remembering"] .wm-web-edge {
  opacity: 1;
  transition: opacity 1s ease;
}
.wm-web-node, .wm-web-edge {
  transition: opacity 1.2s ease;
  opacity: 0.9;
}
.wm-web-edge { stroke: var(--wm-mnemo); stroke-width: 1.2; fill: none; opacity: 0.4; }
.wm-web-node { fill: var(--wm-mnemo); }
.wm-web-node.dim { fill: var(--wm-lethe); }
.wm-web-label {
  font-family: 'JetBrains Mono', monospace;
  font-size: 12px;
  fill: var(--wm-ink-faint);
  letter-spacing: 1px;
  text-transform: uppercase;
}
.wm-web-caption {
  text-align: center;
  margin-top: 16px;
  font-family: 'JetBrains Mono', monospace;
  font-size: 12px;
  letter-spacing: 1.5px;
  text-transform: uppercase;
  color: var(--wm-ink-faint);
  min-height: 20px;
  transition: color 0.3s ease;
}
.wm-web[data-state="forgetting"] + .wm-web-caption,
.wm-choice-lethe.active ~ .wm-web + .wm-web-caption { color: var(--wm-lethe); }
.wm-web[data-state="remembering"] + .wm-web-caption { color: var(--wm-mnemo); }
.wm-petelia {
  margin-top: 36px;
  padding: 20px 22px;
  background: linear-gradient(90deg, rgba(209,169,97,0.06), transparent);
  border-left: 2px solid var(--wm-accent);
  border-radius: 3px;
}
.wm-petelia-label {
  font-family: 'JetBrains Mono', monospace;
  font-size: 12px;
  letter-spacing: 2px;
  text-transform: uppercase;
  color: var(--wm-accent);
  margin: 0 0 8px;
}
.wm-petelia-body {
  font-family: 'Inter', sans-serif;
  font-size: 14.5px;
  line-height: 1.55;
  color: rgba(243,239,231,0.85);
  margin: 0 0 10px;
}
.wm-petelia-link {
  font-family: 'JetBrains Mono', monospace;
  font-size: 12px;
  letter-spacing: 1.5px;
  color: var(--wm-accent);
  text-decoration: none;
  text-transform: uppercase;
}
.wm-petelia-link:hover { text-decoration: underline; }

/* ============================================================
   MOVEMENT 5 — Nine Nights, Nine Muses
   ============================================================ */
.wm-m5 .wm-hero-bg { background-image: url('/assets/why-mneos/hero/m5_nine_muses.webp'); opacity: 0.65; }
.wm-m5 .wm-hero-bg::after {
  background: linear-gradient(180deg, rgba(10,11,14,0.35) 0%, rgba(10,11,14,0.55) 50%, rgba(10,11,14,0.85) 100%);
}
.wm-m5 { min-height: 100vh; }
.wm-m5 .wm-mov-inner { text-align: center; }
.wm-m5 h2 { margin-left: auto; margin-right: auto; }
.wm-m5 .wm-lede { margin-left: auto; margin-right: auto; }
.wm-nine-stars {
  margin: 40px auto 0;
  display: grid;
  grid-template-columns: repeat(9, 1fr);
  gap: 10px;
  max-width: 640px;
}
.wm-star {
  aspect-ratio: 1;
  border-radius: 50%;
  background: radial-gradient(circle at 40% 40%, var(--wm-accent), var(--wm-accent-dim) 40%, transparent 70%);
  box-shadow: 0 0 12px rgba(209,169,97,0.4);
  opacity: 0.8;
  transition: opacity 0.3s ease, transform 0.3s ease;
}
.wm-star:hover { opacity: 1; transform: scale(1.15); }

/* ============================================================
   MOVEMENT 6 — Muse Chambers
   ============================================================ */
.wm-m6 { min-height: auto; padding: 96px 0; }
.wm-m6 .wm-mov-inner { max-width: 1240px; }
.wm-muses-grid {
  margin-top: 48px;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 24px;
}
.wm-muse-card {
  position: relative;
  background: #12141a;
  border: 1px solid rgba(255,255,255,0.1);
  border-radius: 10px;
  overflow: hidden;
  cursor: pointer;
  transition: transform 0.2s ease, border-color 0.2s ease, box-shadow 0.2s ease;
  color: inherit;
  font: inherit;
  text-align: left;
  width: 100%;
  padding: 0;
  box-shadow: 0 4px 14px rgba(0,0,0,0.4);
}
.wm-muse-card:hover, .wm-muse-card:focus-visible {
  transform: translateY(-4px);
  border-color: var(--wm-accent);
  box-shadow: 0 10px 24px rgba(209,169,97,0.15);
  outline: none;
}
.wm-muse-portrait {
  width: 100%;
  aspect-ratio: 3/4;
  object-fit: cover;
  display: block;
  filter: brightness(0.85);
  transition: filter 0.3s ease;
}
.wm-muse-card:hover .wm-muse-portrait { filter: brightness(1); }
.wm-muse-caption {
  padding: 18px 20px;
}
.wm-muse-name {
  font-family: 'Space Grotesk', serif;
  font-weight: 500;
  font-size: 22px;
  color: var(--wm-ink);
  margin: 0 0 4px;
  letter-spacing: 0.01em;
}
.wm-muse-domain {
  font-family: 'JetBrains Mono', monospace;
  font-size: 12px;
  letter-spacing: 1.5px;
  color: var(--wm-accent);
  text-transform: uppercase;
  margin: 0 0 12px;
}
.wm-muse-tag {
  font-family: 'Inter', sans-serif;
  font-size: 13px;
  line-height: 1.5;
  color: var(--wm-ink-faint);
  margin: 0;
}

/* Modal for chamber detail */
.wm-modal {
  position: fixed;
  inset: 0;
  z-index: 100;
  background: rgba(5,6,9,0.85);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  display: none;
  align-items: center;
  justify-content: center;
  padding: 40px 20px;
}
.wm-modal.open { display: flex; }
.wm-modal-body {
  position: relative;
  background: linear-gradient(180deg, #16181e, #0f1116);
  border: 1px solid rgba(255,255,255,0.14);
  border-radius: 14px;
  max-width: 960px;
  width: 100%;
  max-height: 90vh;
  overflow-y: auto;
  box-shadow: 0 20px 60px rgba(0,0,0,0.7);
  display: grid;
  grid-template-columns: 1fr 1.4fr;
  gap: 0;
}
.wm-modal-portrait {
  background: #0a0b0e;
  padding: 0;
  position: relative;
  overflow: hidden;
}
.wm-modal-portrait img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
.wm-modal-body-inner {
  padding: 40px 40px 40px;
}
.wm-modal-close {
  position: absolute;
  top: 16px;
  right: 16px;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  background: rgba(255,255,255,0.08);
  border: 1px solid rgba(255,255,255,0.14);
  color: var(--wm-ink);
  cursor: pointer;
  font-size: 20px;
  line-height: 1;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  z-index: 3;
  transition: all 0.15s ease;
}
.wm-modal-close:hover, .wm-modal-close:focus-visible {
  background: rgba(255,255,255,0.16);
  border-color: var(--wm-accent);
  color: var(--wm-accent);
  outline: none;
}
.wm-modal-eyebrow {
  font-family: 'JetBrains Mono', monospace;
  font-size: 12px;
  letter-spacing: 2px;
  text-transform: uppercase;
  color: var(--wm-accent);
  margin: 0 0 12px;
}
.wm-modal-name {
  font-family: 'Space Grotesk', serif;
  font-weight: 500;
  font-size: 44px;
  color: var(--wm-ink);
  margin: 0 0 6px;
  line-height: 1;
}
.wm-modal-domain {
  font-family: 'Inter', sans-serif;
  font-size: 15px;
  color: var(--wm-ink-faint);
  font-style: italic;
  margin: 0 0 32px;
}
.wm-modal-section {
  margin: 0 0 24px;
  padding-bottom: 20px;
  border-bottom: 1px solid rgba(255,255,255,0.06);
}
.wm-modal-section:last-child { border-bottom: 0; padding-bottom: 0; }
.wm-modal-label {
  font-family: 'JetBrains Mono', monospace;
  font-size: 12px;
  letter-spacing: 1.8px;
  text-transform: uppercase;
  color: var(--wm-accent);
  margin: 0 0 8px;
  opacity: 0.9;
}
.wm-modal-body-text {
  font-family: 'Inter', sans-serif;
  font-size: 14.5px;
  line-height: 1.6;
  color: rgba(243,239,231,0.88);
  margin: 0;
}
.wm-modal-body-text strong { color: var(--wm-ink); font-weight: 500; }
.wm-modal-mneos {
  padding: 16px 18px;
  background: linear-gradient(90deg, rgba(209,169,97,0.08), transparent);
  border-left: 2px solid var(--wm-accent);
  border-radius: 3px;
  margin: 0;
}
.wm-modal-mneos p {
  font-family: 'Inter', sans-serif;
  font-size: 14.5px;
  line-height: 1.6;
  color: rgba(243,239,231,0.9);
  margin: 0;
}
.wm-modal-related {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
}
.wm-modal-related a {
  font-family: 'JetBrains Mono', monospace;
  font-size: 12px;
  letter-spacing: 1.2px;
  text-transform: uppercase;
  color: var(--wm-ink-dim);
  text-decoration: none;
  padding: 6px 10px;
  border: 1px solid rgba(255,255,255,0.14);
  border-radius: 999px;
  transition: all 0.15s ease;
}
.wm-modal-related a:hover, .wm-modal-related a:focus-visible {
  color: var(--wm-accent);
  border-color: var(--wm-accent);
  outline: none;
}
.wm-modal-cite {
  font-family: 'JetBrains Mono', monospace;
  font-size: 12px;
  color: var(--wm-ink-faint);
  line-height: 1.55;
  margin: 0;
}
.wm-modal-cite a { color: var(--wm-ink-dim); text-decoration: underline; text-decoration-color: rgba(255,255,255,0.2); }
.wm-modal-cite a:hover { color: var(--wm-accent); }

/* ============================================================
   MOVEMENT 7 — Libraries & Institutions
   ============================================================ */
.wm-m7 .wm-hero-bg { background-image: url('/assets/why-mneos/hero/m7_libraries.webp'); opacity: 0.4; }
.wm-timeline {
  margin: 48px 0 0;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 12px;
}
.wm-timeline-step {
  padding: 18px 20px;
  background: linear-gradient(180deg, #14171e, #0f1116);
  border: 1px solid rgba(255,255,255,0.1);
  border-radius: 8px;
  position: relative;
  box-shadow: 0 2px 8px rgba(0,0,0,0.4);
}
.wm-timeline-era {
  font-family: 'JetBrains Mono', monospace;
  font-size: 12px;
  letter-spacing: 1.5px;
  text-transform: uppercase;
  color: var(--wm-accent);
  margin: 0 0 6px;
}
.wm-timeline-name {
  font-family: 'Space Grotesk', sans-serif;
  font-weight: 500;
  font-size: 17px;
  color: var(--wm-ink);
  margin: 0 0 6px;
  line-height: 1.25;
}
.wm-timeline-note {
  font-family: 'Inter', sans-serif;
  font-size: 13px;
  line-height: 1.5;
  color: var(--wm-ink-faint);
  margin: 0;
}
.wm-mouseion {
  margin-top: 32px;
  padding: 22px 24px;
  background: rgba(255,255,255,0.03);
  border: 1px solid rgba(255,255,255,0.1);
  border-radius: 8px;
}
.wm-mouseion-label {
  font-family: 'JetBrains Mono', monospace;
  font-size: 12px;
  letter-spacing: 2px;
  color: var(--wm-accent);
  text-transform: uppercase;
  margin: 0 0 10px;
}
.wm-mouseion-body {
  font-family: 'Inter', sans-serif;
  font-size: 15px;
  line-height: 1.6;
  color: rgba(243,239,231,0.85);
  margin: 0 0 12px;
}
.wm-mouseion-links {
  display: flex;
  gap: 12px;
  flex-wrap: wrap;
  font-family: 'JetBrains Mono', monospace;
  font-size: 12px;
  letter-spacing: 1.5px;
  text-transform: uppercase;
}
.wm-mouseion-links a {
  color: var(--wm-accent);
  text-decoration: none;
  padding: 8px 14px;
  border: 1px solid rgba(209,169,97,0.35);
  border-radius: 999px;
  transition: all 0.15s ease;
}
.wm-mouseion-links a:hover, .wm-mouseion-links a:focus-visible {
  background: rgba(209,169,97,0.1);
  border-color: var(--wm-accent);
  outline: none;
}

/* ============================================================
   MOVEMENT 8 — Lineage Continues
   ============================================================ */
.wm-m8 { min-height: 100vh; padding: 96px 0 128px; }
.wm-m8 .wm-hero-bg { background-image: url('/assets/why-mneos/hero/m8_lineage.webp'); opacity: 0.35; background-position: center bottom; }
.wm-m8 .wm-hero-bg::after {
  background: linear-gradient(180deg, rgba(10,11,14,0.7) 0%, rgba(10,11,14,0.85) 60%, rgba(10,11,14,0.95) 100%);
}
.wm-m8 .wm-mov-inner { text-align: center; }
.wm-m8 h2 { margin-left: auto; margin-right: auto; }
.wm-m8 .wm-lede { margin-left: auto; margin-right: auto; }
.wm-becoming {
  margin: 64px auto 0;
  max-width: 640px;
  font-family: 'Space Grotesk', serif;
  font-weight: 400;
  font-size: clamp(22px, 3vw, 30px);
  line-height: 1.5;
  color: var(--wm-ink);
  letter-spacing: 0.01em;
}
.wm-becoming p {
  margin: 0 0 20px;
  opacity: 0;
  transform: translateY(8px);
  transition: opacity 0.9s ease, transform 0.9s ease;
  transition-delay: calc(var(--i, 0) * 400ms);
}
.wm-becoming.reveal p { opacity: 0.95; transform: translateY(0); }
.wm-final {
  margin: 72px auto 0;
  font-family: 'Space Grotesk', serif;
  font-style: italic;
  font-size: clamp(24px, 4vw, 40px);
  line-height: 1.3;
  color: var(--wm-accent);
  letter-spacing: 0.01em;
  text-shadow: 0 0 24px rgba(209,169,97,0.2);
  opacity: 0;
  transition: opacity 1.5s ease 3s;
}
.wm-becoming.reveal ~ .wm-final { opacity: 1; }

/* ============================================================
   SCHOLAR MODE — hidden by default, revealed on toggle
   ============================================================ */
[data-mode="story"] .wm-scholar { display: none; }
.wm-scholar {
  padding: 96px 0;
  background: linear-gradient(180deg, #0d0f14, #0a0b0e);
  border-top: 1px solid rgba(255,255,255,0.08);
}
.wm-scholar-inner {
  max-width: 1080px;
  margin: 0 auto;
  padding: 0 28px;
}
.wm-scholar-kicker {
  font-family: 'JetBrains Mono', monospace;
  font-size: 12px;
  letter-spacing: 3px;
  color: var(--wm-lethe);
  text-transform: uppercase;
  margin: 0 0 20px;
}
.wm-scholar h2 {
  font-family: 'Space Grotesk', sans-serif;
  font-weight: 500;
  font-size: clamp(26px, 4vw, 40px);
  color: var(--wm-ink);
  margin: 0 0 24px;
  max-width: 780px;
}
.wm-scholar-lede {
  font-family: 'Inter', sans-serif;
  font-size: 16px;
  line-height: 1.6;
  color: rgba(243,239,231,0.82);
  max-width: 700px;
  margin: 0 0 48px;
}
.wm-scholar-sources {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  gap: 16px;
  margin: 32px 0;
}
.wm-scholar-source {
  padding: 20px 22px;
  background: #12141a;
  border: 1px solid rgba(255,255,255,0.1);
  border-radius: 8px;
}
.wm-scholar-source-label {
  font-family: 'JetBrains Mono', monospace;
  font-size: 12px;
  letter-spacing: 1.5px;
  color: var(--wm-lethe);
  text-transform: uppercase;
  margin: 0 0 8px;
}
.wm-scholar-source-title {
  font-family: 'Space Grotesk', sans-serif;
  font-weight: 500;
  font-size: 16px;
  color: var(--wm-ink);
  margin: 0 0 8px;
  line-height: 1.3;
}
.wm-scholar-source-attr {
  font-family: 'Inter', sans-serif;
  font-size: 13px;
  line-height: 1.5;
  color: var(--wm-ink-faint);
  margin: 0 0 12px;
}
.wm-scholar-source-link {
  font-family: 'JetBrains Mono', monospace;
  font-size: 12px;
  letter-spacing: 1.5px;
  color: var(--wm-accent);
  text-decoration: none;
  text-transform: uppercase;
}
.wm-scholar-source-link:hover { text-decoration: underline; }

/* Preserved lineage tree hidden container */
.wm-scholar-legacy {
  margin-top: 64px;
  padding-top: 48px;
  border-top: 1px solid rgba(255,255,255,0.08);
}
.wm-scholar-legacy-cta {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 32px;
  padding: 28px 36px;
  margin-top: 20px;
  background: linear-gradient(135deg, rgba(74,125,255,0.08), rgba(74,125,255,0.02));
  border: 1px solid rgba(74,125,255,0.35);
  border-radius: 12px;
  text-decoration: none;
  color: #f3efe7;
  transition: background 0.2s ease, border-color 0.2s ease, transform 0.15s ease;
}
.wm-scholar-legacy-cta:hover,
.wm-scholar-legacy-cta:focus {
  background: linear-gradient(135deg, rgba(74,125,255,0.15), rgba(74,125,255,0.05));
  border-color: rgba(74,125,255,0.65);
  transform: translateY(-1px);
  outline: none;
}
.wm-scholar-legacy-cta:focus-visible {
  box-shadow: 0 0 0 3px rgba(74,125,255,0.35);
}
.wm-scholar-legacy-cta-label {
  font-family: 'Space Grotesk', 'Inter', sans-serif;
  font-weight: 500;
  font-size: 20px;
  color: #f3efe7;
  margin-bottom: 6px;
}
.wm-scholar-legacy-cta-sub {
  font-family: 'Inter', sans-serif;
  font-size: 14.5px;
  color: #b8b3a8;
  line-height: 1.5;
}
.wm-scholar-legacy-cta-arrow {
  font-size: 28px;
  color: #6f95ff;
  flex-shrink: 0;
}
.wm-scholar-legacy-note {
  margin-top: 14px;
  font-family: 'JetBrains Mono', monospace;
  font-size: 12.5px;
  letter-spacing: 0.5px;
  color: #7a7974;
  text-transform: uppercase;
}
@media (max-width: 640px) {
  .wm-scholar-legacy-cta {
    padding: 22px 22px;
    gap: 18px;
  }
  .wm-scholar-legacy-cta-label { font-size: 17px; }
  .wm-scholar-legacy-cta-sub { font-size: 13.5px; }
  .wm-scholar-legacy-cta-arrow { font-size: 22px; }
}

/* ============================================================
   MOBILE
   ============================================================ */
@media (max-width: 900px) {
  .wm-mov { padding: 64px 0; min-height: auto; }
  .wm-mov h2 { font-size: clamp(24px, 6vw, 34px); margin-bottom: 20px; }
  .wm-mov p.wm-lede { font-size: 16.5px; }
  .wm-mode-toggle { top: 84px; right: 14px; padding: 7px 12px; font-size: 12px; }
  .wm-oral-list { grid-template-columns: repeat(2, 1fr); gap: 4px 16px; }
  .wm-choice { grid-template-columns: 1fr; gap: 12px; }
  .wm-choice-card { padding: 22px 22px; }
  .wm-choice-name { font-size: 26px; }
  .wm-nine-stars { max-width: 340px; grid-template-columns: repeat(9, 1fr); gap: 6px; }
  .wm-muses-grid { grid-template-columns: repeat(2, 1fr); gap: 14px; }
  .wm-muse-caption { padding: 14px 16px; }
  .wm-muse-name { font-size: 19px; }
  .wm-modal { padding: 20px 12px; }
  .wm-modal-body { grid-template-columns: 1fr; max-height: 94vh; }
  .wm-modal-portrait { max-height: 40vh; }
  .wm-modal-body-inner { padding: 24px 24px 32px; }
  .wm-modal-name { font-size: 32px; }
  .wm-timeline { grid-template-columns: 1fr; gap: 8px; }
  .wm-scholar { padding: 64px 0; }
  .wm-name-drop { font-size: clamp(44px, 12vw, 72px); }
}
@media (max-width: 480px) {
  .wm-muses-grid { grid-template-columns: 1fr; }
  .wm-becoming { font-size: 20px; }
  .wm-final { font-size: 22px; margin-top: 48px; }
}

/* Reduced motion */
@media (prefers-reduced-motion: reduce) {
  .wm-oral-list li, .wm-becoming p, .wm-final,
  .wm-web-node, .wm-web-edge, .wm-star, .wm-muse-portrait {
    transition: none !important;
    animation: none !important;
  }
  .wm-oral-list li { opacity: 0.9; transform: none; }
  .wm-becoming p { opacity: 0.95; transform: none; }
  .wm-final { opacity: 1; transition: none; }
}

/* ==========================================================================
   Muse chamber affordance (2026-07-13) — make the cards clearly clickable
   without being loud. Reveal "Enter chamber →" hint on the portrait on hover
   AND show a persistent arrow next to the Muse name so touch users see the
   affordance at rest.
   ========================================================================== */

.wm-muse-portrait-wrap {
  position: relative;
  overflow: hidden;
}

/* Hover-reveal overlay on the portrait */
.wm-muse-enter-hint {
  position: absolute;
  left: 50%;
  bottom: 14px;
  transform: translate(-50%, 6px);
  font-family: 'JetBrains Mono', monospace;
  font-size: 12px;
  letter-spacing: 1.5px;
  text-transform: uppercase;
  color: #F3EFE7;
  background: rgba(10, 11, 14, 0.72);
  border: 1px solid var(--wm-accent);
  border-radius: 999px;
  padding: 7px 14px 6px;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.22s ease, transform 0.22s ease;
  backdrop-filter: blur(4px);
  -webkit-backdrop-filter: blur(4px);
  white-space: nowrap;
}
.wm-muse-card:hover .wm-muse-enter-hint,
.wm-muse-card:focus-visible .wm-muse-enter-hint {
  opacity: 1;
  transform: translate(-50%, 0);
}

/* Arrow next to the Muse name — always visible so touch users see clickability */
.wm-muse-arrow {
  display: inline-block;
  color: var(--wm-accent);
  font-weight: 400;
  margin-left: 6px;
  opacity: 0.65;
  transition: opacity 0.2s ease, transform 0.2s ease;
  font-size: 0.85em;
}
.wm-muse-card:hover .wm-muse-arrow,
.wm-muse-card:focus-visible .wm-muse-arrow {
  opacity: 1;
  transform: translateX(3px);
}

/* Persistent subtle "9 chambers · tap to open" hint under the grid */
.wm-muses-hint {
  text-align: center;
  margin: 24px 0 0;
  font-family: 'JetBrains Mono', monospace;
  font-size: 12px;
  letter-spacing: 1.5px;
  text-transform: uppercase;
  color: rgba(243, 239, 231, 0.55);
}

/* First-time pulse on the first card, once per session, to teach the interaction */
@keyframes wm-muse-first-pulse {
  0%   { box-shadow: 0 4px 14px rgba(0,0,0,0.4), 0 0 0 0 rgba(209,169,97,0.55); }
  40%  { box-shadow: 0 4px 14px rgba(0,0,0,0.4), 0 0 0 12px rgba(209,169,97,0); }
  100% { box-shadow: 0 4px 14px rgba(0,0,0,0.4), 0 0 0 0 rgba(209,169,97,0); }
}
.wm-muse-card.wm-muse-teach {
  animation: wm-muse-first-pulse 1.8s ease-out 2;
}
@media (prefers-reduced-motion: reduce) {
  .wm-muse-card.wm-muse-teach { animation: none; }
  .wm-muse-enter-hint { transition: none; }
  .wm-muse-arrow { transition: none; }
}

/* ---------------------------------------------------------------------------
   ACT II (Inquiry) and ACT III (Executable Models) — Phase 2, 2026-08-03
   These sit between the memory arc and Chapter II. They deliberately carry NO
   hero photograph: Movements I-VIII are the mythic/historical arc, and the Acts
   are the analytical turn. The visual charter rejects decorative imagery, so
   these use type and space rather than a picture that would not be earning its
   place. A faint vertical gradient keeps them from reading as a dead gap.
   --------------------------------------------------------------------------- */
.wm-actII,
.wm-actIII {
  min-height: auto;
  padding: 120px 0;
  background:
    linear-gradient(180deg, rgba(255,255,255,0.020) 0%, rgba(255,255,255,0) 62%),
    var(--wm-ground, #0A0B0E);
}
.wm-actII .wm-mov-inner,
.wm-actIII .wm-mov-inner {
  text-align: left;
}
.wm-actIII {
  border-bottom: 1px solid rgba(255,255,255,0.07);
}
/* The act number is the reader's position marker in the spine — give it the
   same weight the movement numbers carry. */
.wm-actII .wm-mov-num,
.wm-actIII .wm-mov-num {
  letter-spacing: 0.14em;
}
@media (max-width: 720px) {
  .wm-actII,
  .wm-actIII { padding: 76px 0; }
}