/* ==========================================================================
   Layout primitives
   ========================================================================== */

.container {
  width: 100%;
  max-width: calc(var(--container) + var(--gutter) * 2);
  margin-inline: auto;
  padding-inline: var(--gutter);
}

.container-wide {
  max-width: calc(1440px + var(--gutter) * 2);
}

.section {
  position: relative;
  padding-block: var(--section-y);
}

.section-tight {
  padding-block: calc(var(--section-y) * 0.6);
}

.section-head {
  display: grid;
  gap: var(--s-4);
  max-width: 760px;
  margin-bottom: clamp(2.5rem, 2rem + 3vw, 5rem);
}

.section-head.center {
  margin-inline: auto;
  text-align: center;
  justify-items: center;
}

.section-head.split {
  max-width: none;
  grid-template-columns: 1fr;
  align-items: end;
}

@media (min-width: 900px) {
  .section-head.split {
    grid-template-columns: 1.3fr 1fr;
    gap: var(--s-7);
  }
}

.grid {
  display: grid;
  gap: var(--s-5);
}

.stack > * + * {
  margin-top: var(--s-4);
}

.hairline {
  height: 1px;
  background: linear-gradient(90deg, transparent, var(--line-strong), transparent);
  border: 0;
}

/* Ambient backgrounds -------------------------------------------------- */
.bg-grid {
  position: absolute;
  inset: 0;
  pointer-events: none;
  background-image:
    linear-gradient(var(--line) 1px, transparent 1px),
    linear-gradient(90deg, var(--line) 1px, transparent 1px);
  background-size: 64px 64px;
  mask-image: radial-gradient(ellipse 70% 60% at 50% 40%, #000 30%, transparent 75%);
  -webkit-mask-image: radial-gradient(ellipse 70% 60% at 50% 40%, #000 30%, transparent 75%);
  opacity: 0.55;
}

.aurora {
  position: absolute;
  inset: -20% -10% auto;
  height: 120%;
  pointer-events: none;
  filter: blur(60px);
  opacity: 0.6;
  background:
    radial-gradient(40% 35% at 20% 30%, rgba(86, 224, 224, 0.22), transparent 70%),
    radial-gradient(35% 30% at 80% 20%, rgba(43, 120, 214, 0.22), transparent 70%),
    radial-gradient(30% 30% at 60% 75%, rgba(86, 224, 224, 0.1), transparent 70%);
  animation: aurora-drift 22s var(--ease-in-out) infinite alternate;
}

/* Film grain — fixed overlay across the whole site */
.grain {
  position: fixed;
  inset: -50%;
  z-index: var(--z-overlay);
  pointer-events: none;
  opacity: 0.05;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  animation: grain 1.2s steps(6) infinite;
}

main {
  position: relative;
  display: block;
  /* clip (not hidden) so decorative spinners can't cause sideways scroll, without breaking position: sticky */
  overflow-x: clip;
}