/* MNEOS institutional frame for the Lineage of Mnemosyne page.
   Keeps the classical typography of the interactive intact,
   but makes clear the page belongs to MNEOS through nav,
   wordmark, and return paths.
*/

/* ---- Master nav ---- */
.mneos-nav {
  position: sticky;
  top: 0;
  z-index: 50;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 16px 32px;
  background: rgba(11, 13, 15, 0.85);
  backdrop-filter: saturate(180%) blur(14px);
  -webkit-backdrop-filter: saturate(180%) blur(14px);
  border-bottom: 1px solid rgba(255, 255, 255, 0.06);
  font-family: 'Inter', system-ui, sans-serif;
}
.mneos-wordmark {
  font-family: 'Inter', system-ui, sans-serif;
  font-weight: 600;
  letter-spacing: 2px;
  font-size: 14px;
  color: #f3efe7;
  text-decoration: none;
}
.mneos-wordmark span { color: #4a7dff; }
.mneos-nav-links {
  display: flex;
  gap: 24px;
}
.mneos-nav-links a {
  color: rgba(243, 239, 231, 0.7);
  text-decoration: none;
  font-size: 13px;
  font-weight: 500;
  letter-spacing: 0.4px;
  transition: color 0.15s ease;
}
.mneos-nav-links a:hover,
.mneos-nav-links a:focus-visible {
  color: #f3efe7;
}
.mneos-nav-links a[aria-current="page"] {
  color: #f3efe7;
  border-bottom: 1px solid #4a7dff;
  padding-bottom: 2px;
}

/* ---- Intro panel ---- */
.why-intro {
  padding: 96px 32px 48px;
  max-width: 780px;
  margin: 0 auto;
  text-align: center;
  color: #f3efe7;
  position: relative;
  z-index: 2;
}
.why-intro-inner { }
.why-kicker {
  font-family: 'Inter', system-ui, sans-serif;
  font-size: 11px;
  letter-spacing: 3px;
  color: #B0A899;
  text-transform: uppercase;
  margin: 0 0 24px;
}
.why-intro h1 {
  font-family: 'Cormorant Garamond', Georgia, serif;
  font-weight: 500;
  font-size: clamp(48px, 8vw, 96px);
  line-height: 1.05;
  letter-spacing: -0.02em;
  margin: 0 0 40px;
  color: #f3efe7;
}
.why-body {
  font-family: 'Spectral', Georgia, serif;
  font-weight: 300;
  font-size: 19px;
  line-height: 1.75;
  color: rgba(243, 239, 231, 0.85);
}
.why-body p {
  margin: 0 0 18px;
}
.why-body p.why-thesis {
  font-family: 'Cormorant Garamond', Georgia, serif;
  font-style: italic;
  font-weight: 400;
  font-size: 28px;
  color: #f3efe7;
  margin: 32px 0;
}
.why-body p.why-invite {
  font-family: 'Inter', system-ui, sans-serif;
  font-size: 12px;
  letter-spacing: 2px;
  color: #B0A899;
  text-transform: uppercase;
  margin-top: 48px;
}

/* ---- Bridge back to MNEOS ---- */
.why-bridge {
  padding: 80px 32px 96px;
  border-top: 1px solid rgba(255, 255, 255, 0.06);
  text-align: center;
  color: #f3efe7;
  background: #0b0d0f;
}
.why-bridge-inner {
  max-width: 720px;
  margin: 0 auto;
}
.why-bridge-line {
  font-family: 'Cormorant Garamond', Georgia, serif;
  font-style: italic;
  font-weight: 400;
  font-size: 34px;
  line-height: 1.2;
  margin: 0 0 12px;
  color: #f3efe7;
}
.why-bridge-sub {
  font-family: 'Spectral', Georgia, serif;
  font-weight: 300;
  font-size: 17px;
  line-height: 1.6;
  color: rgba(243, 239, 231, 0.7);
  margin: 0 0 40px;
}
.why-bridge-links {
  display: flex;
  gap: 12px;
  justify-content: center;
  flex-wrap: wrap;
}
.why-bridge-btn {
  display: inline-block;
  padding: 12px 24px;
  border: 1px solid rgba(243, 239, 231, 0.25);
  border-radius: 4px;
  color: #f3efe7;
  text-decoration: none;
  font-family: 'Inter', system-ui, sans-serif;
  font-size: 13px;
  font-weight: 500;
  letter-spacing: 0.5px;
  transition: all 0.15s ease;
}
.why-bridge-btn:hover,
.why-bridge-btn:focus-visible {
  border-color: #f3efe7;
  background: rgba(255, 255, 255, 0.03);
}
.why-bridge-btn.primary {
  background: #4a7dff;
  border-color: #4a7dff;
  color: #ffffff;
}
.why-bridge-btn.primary:hover,
.why-bridge-btn.primary:focus-visible {
  background: #3d6de6;
  border-color: #3d6de6;
}

/* ---- Mobile ---- */
@media (max-width: 720px) {
  .mneos-nav {
    padding: 12px 16px;
    flex-wrap: wrap;
    gap: 8px;
  }
  .mneos-nav-links {
    gap: 14px;
    font-size: 12px;
    overflow-x: auto;
    max-width: 100%;
    -webkit-overflow-scrolling: touch;
  }
  .mneos-nav-links a { font-size: 12px; }
  .why-intro { padding: 56px 20px 40px; }
  .why-body { font-size: 17px; }
  .why-body p.why-thesis { font-size: 24px; }
  .why-bridge { padding: 56px 20px 72px; }
  .why-bridge-line { font-size: 26px; }
}

@media (prefers-reduced-motion: reduce) {
  * { animation: none !important; transition: none !important; }
}