.container { width: 100%; max-width: 1200px; margin: 0 auto; padding: 0 var(--space-md); }

/* Background textures */
.grid-lines {
  position: fixed; inset: 0;
  background-image:
    linear-gradient(to right, var(--color-border) 1px, transparent 1px),
    linear-gradient(to bottom, var(--color-border) 1px, transparent 1px);
  background-size: 10vw 10vw;
  z-index: -1; pointer-events: none;
  mask-image: radial-gradient(ellipse 60% 50% at 50% 50%, black 20%, transparent 80%);
  -webkit-mask-image: radial-gradient(ellipse 60% 50% at 50% 50%, black 20%, transparent 80%);
}

.noise {
  position: fixed; inset: 0;
  pointer-events: none; z-index: 9999; opacity: 0.04;
  background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 200 200' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.8' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}

.progress-bar {
  position: fixed; top: 0; left: 0;
  height: 2px; width: 0%; background: var(--color-text); z-index: 1000;
}

/* Narrative Moments */
.moment {
  min-height: 80vh; display: flex; align-items: center;
  position: relative; border-bottom: 1px solid var(--color-border);
  padding: var(--space-xl) 0;
}
.intro-moment { min-height: 100vh; padding-top: 80px; }

.moment-content { width: 100%; max-width: 800px; }
.align-right { margin-left: auto; text-align: right; }

/* Crosshairs */
.crosshair { position: absolute; width: 16px; height: 16px; pointer-events: none; }
.crosshair::before, .crosshair::after { content:''; position: absolute; background: var(--color-text-3); }
.crosshair::before { top: 50%; left: 0; width: 100%; height: 1px; }
.crosshair::after { top: 0; left: 50%; width: 1px; height: 100%; }
.top-left { top: var(--space-md); left: var(--space-md); }
.top-right { top: var(--space-md); right: var(--space-md); }
.bottom-left { bottom: var(--space-md); left: var(--space-md); }
.bottom-right { bottom: var(--space-md); right: var(--space-md); }

@media (max-width: 768px) {
  .moment { min-height: auto; padding: var(--space-lg) 0; }
  .intro-moment { min-height: 100vh; }
  .align-right { margin-left: 0; text-align: left; }
}