/* Base layer for the standalone build: reset, journey tokens, chapter heights.
 * site-layer.css (the brand layer) and scroll-scrub.css (the journey chrome)
 * are loaded before this file. */

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

html {
  scroll-behavior: smooth;
}

body {
  margin: 0;
  overflow-x: hidden;
}

img,
video {
  max-width: 100%;
}

h1,
h2,
h3,
p,
figure,
ul {
  margin: 0;
}

button {
  font: inherit;
}

/* The journey's own tokens — set inline by the app in the original build. */
.scroll-scrub {
  --ss-accent: #f2f2f0;
  --ss-bg: #101010;
  --ss-ink: #f2f2f0;
  --ss-muted: #9c9c98;
  --ss-object-position: center center;
  --ss-mobile-position: center center;
}

/* Each chapter owns its share of scroll distance. */
.scroll-scrub__chapter {
  height: calc(var(--chapter-scroll, 1.5) * 100dvh);
}

.scroll-scrub__layer {
  transition: opacity 0.45s ease;
}

.scroll-scrub__layer:first-child {
  opacity: 1;
}

/* The opening headline carries the h1, so keep it on the title scale. */
.scroll-scrub__title {
  font-family: var(--ne-font-display);
}

@media (prefers-reduced-motion: reduce) {
  html {
    scroll-behavior: auto;
  }

  .scroll-scrub__chapter {
    height: auto;
    min-height: 100dvh;
  }

  .scroll-scrub__layer {
    transition: none;
  }
}