/* ==========================================================================
   Graviton -- LTR + G-mark overrides on top of the original rzastudio CSS.
   Loaded AFTER fonts.css / site.css / home.css / content.css.
   Keep this file tiny: everything else is the original system, untouched.
   ========================================================================== */

.skip {
  position: absolute; left: -9999px; top: 0; z-index: 200;
  padding: 12px 20px; background: var(--orange); color: #0B0C0F;
  font-family: var(--ui); font-weight: 700; font-size: 14px;
  border-radius: 0 0 10px 0; text-decoration: none;
}
.skip:focus { left: 0; }

/* the site is English/LTR -- flip the two direction-sensitive animations */
.head__nav a::before { transform-origin: left; }
.hero__headline em::after { right: auto; left: 0; transform-origin: left; }

/* the Graviton mark is tall (451:720), unlike the wide RZA mark */
.hero__stage {
  width: auto;
  height: min(32vh, 320px);
  aspect-ratio: 1 / 1;
  max-height: none;
}
@media (max-width: 768px) {
  .hero__stage { width: auto; height: min(26vh, 246px); max-height: none; }
}
@media (max-height: 620px) and (min-width: 600px) {
  .hero__stage { width: auto; height: 30vh; max-height: none; }
}
@media (max-height: 480px) {
  .hero__stage { height: 34vh; }
}

/* Latin headline metrics for the home hero (Arabic needed lh 1.55) */
.hero__headline {
  font-size: clamp(30px, 4.2vw, 56px);
  line-height: 1.22;
  letter-spacing: -.02em;
}
.hero__sub { line-height: 1.8; }