@import url("/assets/theme.css");
@import url("/assets/content.css");
@import url("/assets/forms.css");
@import url("/assets/admin.css");
@import url("/assets/responsive.css");
@import url("/assets/rail.css");
@import url("/assets/mobile-system.css");
@import url("/assets/ecosystem-home.css");
@import url("/assets/ecosystem-nav.css");
@import url("/assets/cinematic-system.css");
@import url("/assets/glass-system.css");
@import url("/assets/concept-home.css");
@import url("/assets/sharp-depth.css");

/* Keep the accessibility shortcut hidden unless it receives visible keyboard focus. */
.skip-link {
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transform: translateY(-160%);
}

.skip-link:focus,
.skip-link:focus-visible {
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
  transform: translateY(0);
}

/* Real owner-supplied Raysor artwork. The Worker serves /raysor-icon.jpg as an
   actual JPEG response, avoiding iOS Safari's broken nested-raster-in-SVG icon. */
.brand-mark {
  background-image: url("/raysor-icon.jpg");
}

/* These selectors intentionally match or exceed the imported homepage rule's
   specificity so the real JPEG wins even where the older SVG rule is !important. */
.site-header .brand-mark,
.public-drawer .brand-mark,
.site-footer .brand-mark,
.platform-lockup .brand-mark,
.home-core-mark .brand-mark {
  background: #080809 url("/raysor-icon.jpg") center / cover no-repeat !important;
  color: transparent !important;
  font-size: 0 !important;
}

/* Give Space Grotesk descenders enough room while preserving the centered title. */
.site-header .brand > span:last-child {
  line-height: 1.25;
  padding-block: .1em;
}

/* The sticky header must stay above translucent page content while scrolling. */
.site-header {
  position: sticky;
  z-index: 120;
}

/* Fill the page-index rail with only the links that actually exist instead of
   reserving empty columns on tablet and desktop widths. */
@media (min-width: 761px) {
  .page-section-index {
    grid-template-columns: minmax(130px, .55fr) repeat(auto-fit, minmax(220px, 1fr));
  }
}

/* Anchor the menu to the header itself so its centerline always matches the R. */
.menu-toggle {
  position: absolute;
  top: 50%;
  right: 14px;
  transform: translateY(-50%);
}

.menu-toggle:hover {
  transform: translateY(calc(-50% - 2px));
}

.menu-toggle:active {
  transform: translateY(-50%) scale(.97);
}

/* Keep the central identity floating inside the R while the compact StriveLoop
   card sits at the floor of the scene instead of occupying the same grid cell. */
.glass-home .home-core-mark {
  align-self: center;
}

@media (max-width: 760px) {
  .menu-toggle {
    top: 50%;
    right: 11px;
  }

  .glass-home .home-core-mark {
    align-self: auto;
  }
}

@media (max-width: 380px) {
  .menu-toggle {
    right: 8px;
  }
}