/* The navigation and its stories share one uninterrupted surface. */
#navigation {
  inset: 0;
  width: 100%;
  max-width: none;
  padding: 0;
  display: block;
  border: 0;
  background: none;
  transform: none;
  pointer-events: none;
}
#navigation.open { transform: none; pointer-events: none; }
.nav-index {
  position: absolute;
  top: clamp(126px, 20vh, 200px);
  left: 40px;
  width: min(360px, calc(100vw - 80px));
  display: flex;
  align-items: flex-start;
  flex-direction: column;
  opacity: 0;
  transform: translateY(14px);
  visibility: hidden;
  pointer-events: none;
  transition: opacity .35s, transform .65s cubic-bezier(.2,.8,.2,1), visibility 0s .65s;
}
.navigation.open:not(.reading-story) .nav-index {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
  pointer-events: auto;
  transition-delay: .3s, .18s, 0s;
}
.nav-index > .eyebrow { margin-bottom: 10px; color: inherit; font-size: var(--label-sm); }
.nav-index > a {
  display: flex;
  align-items: center;
  min-height: 48px;
  padding: 0;
  font: italic 400 clamp(30px, 3vw, 42px)/1 var(--serif);
  letter-spacing: -.025em;
  transform: translateX(-10px);
  opacity: 0;
  transition: transform .6s cubic-bezier(.2,.8,.2,1), opacity .4s, color .25s;
}
.navigation.open:not(.reading-story) .nav-index > a { opacity: 1; transform: translateX(0); }
.navigation.open:not(.reading-story) .nav-index > a:nth-of-type(1) { transition-delay: .22s; }
.navigation.open:not(.reading-story) .nav-index > a:nth-of-type(2) { transition-delay: .29s; }
.navigation.open:not(.reading-story) .nav-index > a:nth-of-type(3) { transition-delay: .36s; }
.navigation.open:not(.reading-story) .nav-index > a:hover { transform: translateX(6px); color: #000; transition-delay: 0s; }
.navigation.reading-story .nav-index { transform: translateY(-12px); }
.menu-story {
  position: absolute;
  left: clamp(40px, 10vw, 180px);
  top: clamp(126px, 23vh, 260px);
  bottom: 70px;
  width: min(660px, 64vw);
  overflow-y: auto;
  scrollbar-width: thin;
  scrollbar-color: #0003 transparent;
  padding: 8px 8px 36px;
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transform: translateY(25px);
  filter: blur(6px);
  transition: opacity .32s, transform .65s, filter .5s, visibility 0s .65s;
  color: #130706;
}
.navigation.open.reading-story .menu-story {
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
  transform: translateY(0);
  filter: blur(0);
  transition: opacity .9s .3s, transform 1.1s .25s cubic-bezier(.16,1,.3,1), filter .9s .25s, visibility 0s;
}
.menu-story-topline { display: flex; align-items: center; justify-content: space-between; gap: 24px; margin-bottom: 34px; }
.menu-story .eyebrow { color: #0009; font-size: var(--label-sm); }
.menu-story h2 { margin: 0; max-width: 650px; font: 400 clamp(48px, 5.8vw, 88px)/.98 var(--serif); letter-spacing: -.045em; color: #170807bf; }
.menu-story h2 i { color: #080404; }
.menu-story h2:focus { outline: none; }
.menu-story > p { max-width: 480px; margin-top: 30px; font: normal 400 clamp(21px, 2vw, 27px)/1.3 var(--serif); color: rgb(16 5 5 / 60%); text-transform: lowercase; }
.menu-story > p.keep-case { text-transform: none; }
/* Dim the text color, not the paragraph, so highlights remain fully opaque. */
.menu-story > p :is(i, em) { font-style: italic; font-weight: 400; color: rgb(16 5 5 / 100%); }
.menu-story #story-label { text-transform: uppercase; }
.menu-story #story-action { text-transform: lowercase; }
.menu-story .menu-story-action { margin-top: 32px; color: #080404; text-decoration: underline; text-underline-offset: 7px; text-decoration-color: #0003; transition: text-decoration-color .3s; }
.menu-story .menu-story-action:hover { color: #080404; text-decoration-color: #0009; }
.menu-story a:focus-visible, .menu-story button:focus-visible, .nav-index a:focus-visible { outline-color: #0009; }
body.menu-story-open .brand { color: #080404; }
body.menu-story-open .social-links { color: #080404; }
#menu-atmosphere:not(.is-shader) {
  background: radial-gradient(ellipse at 0 18%, #e61e22f5, transparent 70%), radial-gradient(ellipse at 0 100%, #92929288, transparent 55%);
  background-size: 100% 100%;
  background-repeat: no-repeat;
  transition: opacity .8s ease, visibility 0s .8s, background-size 1.4s cubic-bezier(.2,.7,.2,1);
}
body.menu-open #menu-atmosphere:not(.is-shader) {
  transition: opacity .8s ease, visibility 0s, background-size 1.4s cubic-bezier(.2,.7,.2,1);
}
body.menu-story-open #menu-atmosphere:not(.is-shader) { background-size: 380% 130%; }
body[data-view="join"] .join-pill { color: #080404; text-shadow: none; }
main { transition: opacity .8s; }
body.menu-story-open main { opacity: 0; }
.social-links { transition: color .9s; }
.social-links a { border: 1px solid transparent; }
.social-links a:hover { background: transparent; border-color: var(--red60); transform: none; }
body.menu-story-open .social-links a:hover { border-color: #0009; }

/* A dark, procedural atmosphere fills the join journey, not a card. */
#journey-atmosphere {
  position: fixed;
  inset: 0;
  width: 100%;
  height: 100%;
  z-index: 1;
  pointer-events: none;
  opacity: 0;
  visibility: hidden;
  background: radial-gradient(ellipse at 0 100%, #650c10, transparent 74%), radial-gradient(ellipse at 100% 100%, #494040, transparent 72%), #090506;
  transition: opacity 1.35s ease, visibility 0s 1.35s;
}
body[data-view="join"] #journey-atmosphere { opacity: 1; visibility: visible; transition: opacity 1.35s ease, visibility 0s; }
#join-page { background: transparent; overscroll-behavior: contain; scrollbar-color: var(--red20) transparent; }
.journey-stage, .journey-signup {
  min-height: 100%;
  min-height: 100svh;
  padding: max(140px, 19vh) 24px max(96px, 11vh);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
}
.journey-stage[hidden], .journey-signup[hidden], .journey-navigation [hidden] { display: none !important; }
.journey-messages { width: min(800px, 100%); }
.journey-messages > .eyebrow { margin-bottom: 18px; color: var(--red60); font-size: var(--label-sm); letter-spacing: .075em; }
.journey-messages h1, .journey-signup .join-copy > h1 {
  margin: 0;
  color: var(--red60);
  font: 400 clamp(34px, 3.3vw, 62px)/.97 var(--serif);
  letter-spacing: -.035em;
}
.journey-messages h1:focus { outline: none; }
.journey-messages h1 i, .journey-signup h1 i { color: var(--red100); }
.journey-messages > p {
  margin: 18px 0 0;
  color: var(--red60);
  font: 400 clamp(16px, 1.25vw, 21px)/1.12 var(--serif);
  letter-spacing: -.01em;
}
.journey-messages p i { color: var(--red60); }
.journey-navigation { display: flex; flex-direction: column; align-items: center; margin-top: clamp(25px, 4.8vh, 56px); }
.journey-constellation {
  position: relative;
  width: 56px;
  height: 56px;
  min-width: 56px;
  border: 1px solid rgb(230 30 34 / 8%);
  border-radius: 50%;
  background: transparent;
  padding: 0;
  color: var(--red100);
  transition: border-color .4s;
  animation: constellation-breathe 6s ease-in-out infinite;
}
.journey-constellation::before { content: ''; position: absolute; inset: 7px; border: 1px solid rgb(230 30 34 / 10%); border-radius: 50%; }
.journey-constellation:hover { background: transparent; border-color: var(--red60); }
.journey-star { position: absolute; width: 3px; height: 3px; border-radius: 50%; background: var(--red20); transition: background .8s, box-shadow .8s, transform .8s; }
.journey-star:nth-child(1) { top: 13px; left: 25px; }
.journey-star:nth-child(2) { top: 26px; right: 12px; }
.journey-star:nth-child(3) { bottom: 12px; left: 25px; }
.journey-star:nth-child(4) { top: 26px; left: 12px; }
.journey-star.visited { background: var(--red60); }
.journey-star.current { background: var(--red100); box-shadow: 0 0 8px rgb(230 30 34 / 45%); transform: scale(1.35); }
.journey-playback-mark { position: absolute; top: 23px; left: 24px; width: 6px; height: 8px; border-inline: 1px solid var(--red60); opacity: 0; transition: opacity .3s; }
.journey-constellation:is(:hover, :focus-visible) .journey-playback-mark { opacity: 1; }
.journey-constellation.paused .journey-playback-mark { width: 0; height: 0; border: 4px solid transparent; border-left: 5px solid var(--red60); border-right: 0; left: 26px; }
.journey-constellation.paused { animation-play-state: paused; }
.journey-constellation.final { opacity: .6; cursor: default; animation: none; transform: scale(.5); border-color: var(--red20); }
.journey-constellation.final .journey-star, .journey-constellation.final .journey-playback-mark { opacity: 0; }
.journey-cta { margin-top: clamp(27px, 4.8vh, 54px); height: 48px; }
.journey-next {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 96px;
  height: 48px;
  padding: 0 28px 4px;
  border: 0;
  border-radius: 99px;
  background: #030303;
  color: var(--red100);
  font: italic 400 14px/1.2 var(--serif);
  letter-spacing: var(--button-text-spacing);
  box-shadow: none;
  -webkit-tap-highlight-color: transparent;
  transition: background .4s, transform .45s cubic-bezier(.16,1,.3,1), opacity .3s;
}
.journey-next:hover { background: #100506; box-shadow: none; transform: translateY(-1px); }
.journey-next:active { background: #180708; transform: scale(.95); transition-duration: .15s; }
.journey-next:focus-visible { outline: none; text-decoration: underline; text-underline-offset: 5px; }
.journey-next:disabled { transform: none; }
@media (prefers-reduced-motion: reduce) {
  .journey-next { transition: none; }
  .journey-next:hover, .journey-next:active { transform: none; }
}
.journey-cta .rose-button { min-width: 96px; color: #080404; text-shadow: none; }
.journey-cta button:disabled { opacity: .65; }
.journey-signup { gap: 36px; }
.journey-signup .join-copy { width: min(680px, 100%); }
.journey-signup .join-copy > .eyebrow { margin-bottom: 20px; color: var(--red60); }
.journey-signup .join-copy > p:not(.signup-error) { margin: 18px 0 0; font: 400 21px/1.3 var(--serif); color: var(--red60); }
.journey-signup #join-form { width: min(440px, 100%); max-width: none; margin: 30px auto 0; }
.journey-signup .email-form { width: 100%; margin-top: 0; }
.journey-signup .email-form input { background: rgb(3 3 3 / 30%); }
.journey-signup .signup-error { margin-top: 32px; font-style: normal; }
.journey-signup .signup-confirmation { margin: auto; }
.journey-signup .signup-confirmation-actions { justify-content: center; }
.journey-replay { color: var(--red60); }
.join-pill, .rose-button { color: var(--black); text-shadow: none; }
.join-pill > svg { filter: none; }
@keyframes constellation-breathe { 50% { transform: scale(1.08) rotate(10deg); } }
@media (max-width: 750px) {
  .nav-index { left: 24px; top: 132px; width: calc(100vw - 48px); }
  .nav-index > a { font-size: 34px; }
  .menu-story { left: 20px; width: calc(100vw - 40px); top: 122px; bottom: 80px; }
  .menu-story-topline { margin-bottom: 25px; }
  .menu-story h2 { font-size: clamp(43px, 9vw, 66px); }
  .menu-story > p { font-size: 23px; max-width: 440px; margin-top: 24px; }
  .journey-stage, .journey-signup { padding: 124px 20px 105px; }
  .journey-messages h1, .journey-signup .join-copy > h1 { font-size: clamp(31px, 5.8vw, 46px); }
  .journey-messages > p { font-size: 18px; line-height: 1.15; }
  .journey-messages > .eyebrow { margin-bottom: 20px; }
  .journey-navigation { margin-top: 34px; }
  .journey-cta { margin-top: 30px; }
  .journey-signup #join-form { width: min(420px, 100%); }
  .journey-signup .email-form input { width: 0; }
}
@media (max-height: 600px) and (min-width: 751px) {
  .journey-stage, .journey-signup { padding-top: 110px; padding-bottom: 76px; }
  .journey-navigation { margin-top: 20px; }
  .journey-cta { margin-top: 18px; }
  .menu-story { top: 108px; bottom: 30px; }
}
@media (prefers-reduced-motion: reduce) {
  .journey-constellation { animation: none; }
  .menu-story, .nav-index, .nav-index > a, #journey-atmosphere { transition: none; filter: none; }
}
/* The header control handles Back and Close; the backdrop is not a button. */
#nav-backdrop { cursor: default; }