/* =========================================================
   NU ESSENCE PSYCHIATRY
   HERO BACKGROUND + RING SHINE EFFECT
   ========================================================= */

:root {
  --nu-black: #090b0d;
  --nu-ivory: #f5efe5;

  --nu-gold: #d4a04a;
  --nu-gold-soft: #f2c56f;
  --nu-gold-bright: #fff0c3;
  --nu-white-gold: #fffdf2;

  /* Actual gold ring location in the source artwork */
  --orbit-x: 53.1%;
  --orbit-y: 41.2%;
  --orbit-size: 19.3%;
}

/* =========================================================
   RESET
   ========================================================= */

*,
*::before,
*::after {
  box-sizing: border-box;
}

html,
body {
  margin: 0;
  padding: 0;
  min-height: 100%;
}

body {
  background: var(--nu-black);
  font-family: Georgia, "Times New Roman", serif;
}

/* =========================================================
   HERO
   ========================================================= */

/* NOTE: .hero's background-image/size/position/color now live
   in hero-ring-cycle.css, not here, to avoid two files fighting
   over the same property. Only non-conflicting layout rules
   stay in this file. */

/* =========================================================
   ARTWORK-ALIGNED OVERLAY
   ========================================================= */

.hero-art-overlay {
  position: absolute;

  left: 50%;
  top: 50%;

  /*
    Must match the ACTUAL background image proportions:
    1672 × 941
  */
  width: 98%;
  aspect-ratio: 1672 / 941;

  transform: translate(-50%, -50%);

  pointer-events: none;
  z-index: 3;
   
}

/* =========================================================
   FUTURE HERO CONTENT
   ========================================================= */

.hero-content {
  position: relative;
  z-index: 5;

  width: 100%;
  height: 100%;
}

/* =========================================================
   MOBILE
   ========================================================= */

@media (max-width: 700px) {
  .hero {
    width: 100%;
    height: 100vh;

    background-size: contain;
    background-position: center top;
  }
}