@font-face {
  font-family: 'Main Manrope';
  src: url('/assets/salvation-manrope.woff2') format('woff2');
  font-style: normal;
  font-weight: 200 800;
  font-display: swap;
}

/* A deliberately black, route-scoped gallery; reader themes stay independent. */
html:has(.main-menu-page) {
  background: #000;
  color-scheme: dark;
  scrollbar-color: #414141 #000;
  scroll-behavior: auto;
}
body:has(.main-menu-page) { background: #000; }
.main-menu-page {
  --menu-ground: #000;
  --menu-ink: #f5f3ee;
  --menu-muted: #9a9894;
  --menu-focus: #e7cf9f;
  --menu-ease: cubic-bezier(.16, 1, .3, 1);
  min-height: 100dvh;
  overflow: clip;
  background: var(--menu-ground);
  color: var(--menu-ink);
  font: 400 16px/1.5 'Main Manrope', sans-serif;
  -webkit-font-smoothing: antialiased;
}
.main-menu-page *, .main-menu-page *::before, .main-menu-page *::after { box-sizing: border-box; }
.main-menu-page ::selection { background: #d8bd87; color: #000; }
.main-menu-page a { color: inherit; text-decoration: none; -webkit-tap-highlight-color: transparent; }
.main-menu-page :is(a, button):focus-visible { outline: 2px solid var(--menu-focus); outline-offset: 10px; }
.main-menu-sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; border: 0; }
.main-menu-skip { position: absolute; top: -100px; left: 24px; padding: 12px 20px; background: var(--menu-ink); color: var(--menu-ground) !important; z-index: 2; }
.main-menu-skip:focus { top: 24px; }
.main-menu-header {
  width: min(1440px, 100%);
  margin-inline: auto;
  padding: max(28px, env(safe-area-inset-top)) max(48px, env(safe-area-inset-right)) 20px max(48px, env(safe-area-inset-left));
  min-height: 92px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
}
.main-menu-brand { display: inline-flex; align-items: center; gap: 10px; min-height: 44px; font-size: 21px; font-weight: 650; letter-spacing: -.035em; }
.main-menu-brand img { display: block; object-fit: contain; }
.main-menu-motion { display: inline-flex; align-items: center; justify-content: center; gap: 9px; min-height: 44px; border: 0; padding: 0 4px; background: none; color: var(--menu-muted); font: inherit; font-size: 12px; cursor: pointer; transition: color 180ms; }
.main-menu-motion[hidden] { display: none; }
.main-menu-motion:hover { color: var(--menu-ink); }
.main-menu-motion svg { display: block; width: 15px; height: 15px; }
.main-menu-play, .main-menu-page[data-paused='true'] .main-menu-pause { display: none; }
.main-menu-page[data-paused='true'] .main-menu-play { display: inline; }
.main-menu-content { max-width: 1100px; margin: 0 auto; padding-inline: 24px; }
.main-menu-portals { list-style: none; padding: 0; margin: 0; display: grid; gap: 114px; }
.main-portal-item { --orb-size: clamp(260px, 31vw, 390px); display: grid; justify-items: center; }
.main-portal { display: grid; justify-items: center; width: 100%; max-width: 920px; padding: 34px 20px 20px; border-radius: 16px; text-align: center; touch-action: pan-y pinch-zoom; }
a.main-portal { cursor: pointer; }
.main-portal-stage { display: grid; place-items: center; position: relative; width: var(--orb-size); height: var(--orb-size); perspective: 1000px; }
.main-portal-float { position: absolute; inset: 0; }
.main-portal-tilt { position: absolute; inset: 0; transform-style: preserve-3d; transform: rotateX(var(--tilt-x, 0deg)) rotateY(var(--tilt-y, 0deg)); transition: transform 700ms var(--menu-ease); }
[data-tilting='true'] .main-portal-tilt { transition-duration: 150ms; }
.main-portal-orb {
  position: absolute;
  inset: 4%;
  border-radius: 50%;
  background: radial-gradient(circle at 40% 32%, #fffef9 0%, #f0ece2 35%, #d5cfc3 72%, #a8a196 100%);
  box-shadow: 0 16px 90px -14px rgb(238 223 192 / .2), inset 0 1px 2px rgb(255 255 255 / .7);
  transform: translateZ(-20px);
}
.main-portal-orb::after { content: ''; position: absolute; inset: 0; border-radius: inherit; background: radial-gradient(ellipse at 50% 82%, rgb(74 55 31 / .13), transparent 52%); }
.main-portal-art { position: absolute; inset: 8%; transform: translate3d(var(--art-x, 0px), var(--art-y, 0px), 46px); transition: transform 700ms var(--menu-ease); }
[data-tilting='true'] .main-portal-art { transition-duration: 150ms; }
.main-portal-art img { display: block; width: 100%; height: 100%; object-fit: contain; user-select: none; pointer-events: none; filter: drop-shadow(0 24px 17px rgb(30 20 10 / .28)); }
.main-portal-copy { display: grid; justify-items: center; gap: 12px; margin-top: 42px; position: relative; }
.main-portal-title { position: relative; max-width: 820px; font-size: clamp(28px, 4.2vw, 54px); font-weight: 550; line-height: 1.14; letter-spacing: -.035em; text-wrap: balance; transition: color 220ms; }
.main-portal-description { color: var(--menu-muted); font-size: 13px; letter-spacing: .01em; }
.main-portal-arrow { position: absolute; left: calc(100% + 16px); top: 50%; display: flex; opacity: 0; transform: translate(-7px, calc(-50% + 7px)); transition: transform 350ms var(--menu-ease), opacity 220ms; }
.main-portal-arrow svg { width: 26px; height: 26px; }
a.main-portal:focus-visible .main-portal-arrow { opacity: 1; transform: translate(0, -50%); }
a.main-portal:active .main-portal-tilt { transform: rotateX(var(--tilt-x, 0deg)) rotateY(var(--tilt-y, 0deg)) scale(.965); transition-duration: 140ms; }
.main-portal--salvation .main-portal-art { inset: 3%; }
.main-portal--library .main-portal-art { inset: 9%; }
.main-portal--history .main-portal-art { inset: 7%; }
.main-portal--locked .main-portal-orb { background: radial-gradient(circle at 40% 32%, #e3e3e3, #b8b8b8 50%, #828282); box-shadow: 0 16px 80px -14px rgb(220 220 220 / .1); }
.main-portal--locked .main-portal-art img { filter: grayscale(1) brightness(.88) drop-shadow(0 24px 17px rgb(0 0 0 / .3)); }
.main-portal--locked .main-portal-title { color: #a7a7a7; }
.main-portal-lock { display: inline-flex; vertical-align: middle; margin-left: 15px; transform: translateY(-3px); }
.main-portal-lock svg { width: 24px; height: 24px; }
.main-portal-soon { display: inline-block; color: #aaa; font-size: 12px; }
.main-menu-footer { display: flex; justify-content: space-between; gap: 20px; width: min(1344px, calc(100% - 96px)); margin: 120px auto 0; padding: 25px 0 max(32px, env(safe-area-inset-bottom)); border-top: 1px solid #222; color: var(--menu-muted); font-size: 12px; }

@media (hover: hover) and (pointer: fine) {
  a.main-portal:hover .main-portal-arrow { opacity: 1; transform: translate(0, -50%); }
  a.main-portal:hover .main-portal-title { color: #e7cf9f; }
}
@media (prefers-reduced-motion: no-preference) {
  [data-main-portal][data-in-view='true'] .main-portal-float { animation: main-portal-float 7s ease-in-out infinite; }
  [data-main-portal]:nth-child(even) .main-portal-float { animation-delay: -3s; }
  .main-menu-page[data-paused='true'] .main-portal-float,
  .main-menu-page[data-suspended='true'] .main-portal-float { animation-play-state: paused; }
  [data-main-portal][data-in-view='false'] .main-portal-float { animation-play-state: paused; }
  .main-portal-item:first-child .main-portal-copy { animation: main-menu-arrive 850ms var(--menu-ease) both; }
  @keyframes main-portal-float { 0%, 100% { transform: translateY(0) rotate(-1deg); } 50% { transform: translateY(-12px) rotate(1deg); } }
  @keyframes main-menu-arrive { from { opacity: .25; transform: translateY(16px); } to { opacity: 1; transform: translateY(0); } }
}
@media (max-width: 767px) {
  .main-menu-header { padding: max(18px, env(safe-area-inset-top)) max(24px, env(safe-area-inset-right)) 10px max(24px, env(safe-area-inset-left)); min-height: 78px; }
  .main-menu-brand { font-size: 19px; }
  .main-menu-brand img { width: 28px; height: 28px; }
  .main-menu-motion { width: 44px; }
  .main-menu-motion [data-main-motion-label] { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); }
  .main-menu-motion svg { width: 18px; height: 18px; }
  .main-menu-content { padding-inline: 16px; }
  .main-menu-portals { gap: 92px; }
  .main-portal-item { --orb-size: clamp(220px, 66vw, 330px); }
  .main-portal { padding: 28px 10px 16px; }
  .main-portal-copy { margin-top: 38px; gap: 11px; }
  .main-portal-title { font-size: clamp(25px, 6.5vw, 40px); max-width: 520px; }
  .main-portal-description { font-size: 12px; }
  .main-portal--history .main-portal-title { max-width: 330px; }
  .main-portal-arrow { display: none; }
  .main-portal-lock { margin-left: 9px; transform: translateY(-1px); }
  .main-portal-lock svg { width: 19px; height: 19px; }
  .main-menu-footer { width: calc(100% - 48px); margin-top: 90px; padding-top: 22px; font-size: 11px; }
}
@media (prefers-reduced-motion: reduce) {
  .main-menu-page *, .main-menu-page *::before, .main-menu-page *::after { animation: none !important; transition: none !important; }
  .main-portal-tilt, .main-portal-art { transform: none !important; }
}