/* =========================================================
   ALULA COMMUNICATIONS
   Foundation
   ========================================================= */


/* ---------------------------------------------------------
   Reset
   --------------------------------------------------------- */

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


html {
  min-height: 100%;
  margin: 0;

  background: var(--parchment);

  scroll-behavior: smooth;
}


body {
  min-height: 100vh;
  margin: 0;

  overflow-x: clip;

  color: var(--ink);

  font-family: var(--body-font);
  font-size: 1rem;
  font-weight: 300;
  line-height: 1.7;

  background:

    radial-gradient(
      circle at 50% 8%,
      rgba(255, 250, 235, 0.95),
      transparent 32rem
    ),

    radial-gradient(
      circle at 12% 34%,
      rgba(215, 185, 104, 0.10),
      transparent 30rem
    ),

    radial-gradient(
      circle at 88% 72%,
      rgba(128, 89, 48, 0.07),
      transparent 34rem
    ),

    linear-gradient(
      145deg,
      var(--parchment-deep),
      var(--parchment) 22%,
      var(--parchment-light) 50%,
      var(--parchment) 78%,
      var(--parchment-deep)
    );

  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}


/* ---------------------------------------------------------
   Fine parchment weave
   --------------------------------------------------------- */

body::before {
  content: "";

  position: fixed;
  inset: 0;
  z-index: 1000;

  pointer-events: none;

  background:

    repeating-linear-gradient(
      1deg,
      rgba(73, 52, 35, 0.020) 0,
      rgba(73, 52, 35, 0.020) 1px,
      transparent 1px,
      transparent 4px
    ),

    repeating-linear-gradient(
      91deg,
      rgba(255, 255, 255, 0.035) 0,
      rgba(255, 255, 255, 0.035) 1px,
      transparent 1px,
      transparent 5px
    );

  mix-blend-mode: multiply;
  opacity: 0.72;
}


/* ---------------------------------------------------------
   Reactive cyan / magenta illumination

   JavaScript will eventually move these coordinates.
   --------------------------------------------------------- */

body::after {
  content: "";

  position: fixed;
  inset: 0;
  z-index: 0;

  pointer-events: none;

  background:

    radial-gradient(
      circle 20rem
      at var(--cyan-x) var(--cyan-y),
      rgba(50, 236, 255, 0.13),
      transparent 68%
    ),

    radial-gradient(
      circle 17rem
      at var(--magenta-x) var(--magenta-y),
      rgba(255, 59, 212, 0.08),
      transparent 70%
    );

  opacity: 0;

  transition:
    opacity 600ms ease;
}


body.light-active::after,
body.network-awake::after {
  opacity: 1;
}


/* ---------------------------------------------------------
   Global layers
   --------------------------------------------------------- */

main,
.site-header,
.site-footer {
  position: relative;
  z-index: 1;
}


main {
  width: 100%;
}


img,
svg,
video,
canvas {
  display: block;
  max-width: 100%;
}


a {
  color: inherit;
}


/* ---------------------------------------------------------
   Typography
   --------------------------------------------------------- */

h1,
h2,
h3,
p {
  margin-top: 0;
}


h1,
h2,
h3 {
  color: var(--ink);

  font-family: var(--display-font);
  font-weight: 400;
}


h1 {
  margin-bottom: 1.6rem;

  font-size:
    clamp(3.4rem, 8vw, 7.8rem);

  line-height: 0.92;
  letter-spacing: -0.045em;
}


h2 {
  margin-bottom: 1rem;

  font-size:
    clamp(2rem, 4vw, 3.6rem);

  line-height: 1.02;
  letter-spacing: -0.03em;
}


h3 {
  font-size:
    clamp(1.35rem, 2vw, 1.75rem);

  line-height: 1.15;
  letter-spacing: -0.02em;
}


p {
  color: var(--ink-soft);
}


.eyebrow,
.hero-eyebrow {
  margin:
    0
    0
    1.35rem;

  color: var(--gold);

  font-family: var(--body-font);

  font-size: 0.7rem;
  font-weight: 600;

  letter-spacing: 0.26em;
  text-transform: uppercase;
}


/* ---------------------------------------------------------
   Selection
   --------------------------------------------------------- */

::selection {
  color: var(--ink);

  background:
    rgba(215, 185, 104, 0.46);
}


/* ---------------------------------------------------------
   Keyboard focus
   --------------------------------------------------------- */

a:focus-visible,
button:focus-visible,
[role="button"]:focus-visible {
  outline:
    2px solid var(--gold);

  outline-offset: 5px;
}


/* ---------------------------------------------------------
   Reduced motion
   --------------------------------------------------------- */

@media (prefers-reduced-motion: reduce) {

  html {
    scroll-behavior: auto;
  }


  *,
  *::before,
  *::after {
    animation-duration:
      0.01ms !important;

    animation-iteration-count:
      1 !important;

    transition-duration:
      0.01ms !important;
  }
}


/* ---------------------------------------------------------
   Small screens
   --------------------------------------------------------- */

@media (max-width: 760px) {

  :root {
    --page-padding: 1rem;
  }
}


@media (max-width: 520px) {

  body {
    font-size: 0.98rem;
  }


  h1 {
    font-size:
      clamp(
        3rem,
        15vw,
        4.8rem
      );
  }
}