/* ==========================================================================
   Zada Group — Base layer (current)
   Element defaults + brand utility classes. Requires tokens.css.
   ========================================================================== */

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

html {
  scroll-behavior: smooth;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

body {
  font-family: var(--font-sans);
  font-weight: var(--fw-light);
  font-size: 16px;
  line-height: var(--leading-body);
  color: var(--text-body);
  background: var(--surface-page);
  letter-spacing: var(--tracking-body);
}

img { max-width: 100%; display: block; }

a {
  color: inherit;
  text-decoration: none;
  transition: opacity var(--dur-fast) ease, color var(--dur-fast) ease;
}
a:hover { opacity: 0.7; }

:focus-visible {
  outline: 2px solid var(--focus-ring);
  outline-offset: 2px;
}

/* --- Headings: the serif display voice ----------------------------------- */
h1, h2, h3, h4, .serif {
  font-family: var(--font-serif);
  font-weight: var(--fw-regular);
  line-height: var(--leading-tight);
  letter-spacing: var(--tracking-tight);
}
h1 { font-size: var(--text-h1); }
h2 { font-size: var(--text-h2); }
h3 { font-size: var(--text-h3); }
h4 { font-size: var(--text-h4); }

/* The signature heading treatment: Abigail with a brown accent word.
   Abigail has NO italic face — never set font-style: italic on it. */
.display {
  font-family: var(--font-serif);
  font-weight: var(--fw-regular);
  font-size: var(--text-display);
  line-height: var(--leading-display);
  letter-spacing: var(--tracking-display);
}
.display strong, h1 strong, h2 strong {
  font-weight: var(--fw-regular);
  color: var(--brown-warm);
}

/* --- Eyebrow: wide-tracked uppercase label ------------------------------- */
.eyebrow {
  font-family: var(--font-sans);
  font-size: var(--text-xs);
  font-weight: var(--fw-medium);
  letter-spacing: var(--tracking-eyebrow);
  text-transform: uppercase;
  color: var(--text-eyebrow);
}

/* --- Scroll cue: the widest tracking in the system ----------------------- */
.cue {
  font-family: var(--font-sans);
  font-size: 0.66rem;
  font-weight: var(--fw-medium);
  letter-spacing: var(--tracking-cue);
  text-transform: uppercase;
  color: var(--ink-on-dark-soft);
}

/* --- Body copy ----------------------------------------------------------- */
p { font-size: var(--text-base); line-height: var(--leading-body); max-width: 65ch; }
p + p { margin-top: 1.25rem; }

.lede { font-size: var(--text-lede); line-height: 1.6; color: var(--text-muted); }

/* --- Layout primitives --------------------------------------------------- */
.container {
  max-width: var(--max-width);
  margin: 0 auto;
  padding-left: var(--gutter);
  padding-right: var(--gutter);
}
.container-narrow {
  max-width: var(--content-narrow);
  margin: 0 auto;
  padding-left: var(--gutter);
  padding-right: var(--gutter);
}

.section { padding: var(--section-y) 0; }
.section-lg { padding: var(--section-y-lg) 0; }

.section-dark {
  background: var(--surface-dark);
  color: var(--text-on-dark);
}
.section-dark .eyebrow { color: var(--brown-warm); }
.section-dark .lede { color: var(--ink-on-dark-soft); }

.section-cinema {
  background: var(--surface-cinema);
  color: var(--text-on-dark);
}

/* --- Hairline rule ------------------------------------------------------- */
.rule { border: 0; border-top: 1px solid var(--border-subtle); }
.section-dark .rule, .section-cinema .rule { border-color: var(--brown-25); }

/* --- Scroll reveal (signature motion) ------------------------------------
   Add .reveal to elements; toggle .is-visible via IntersectionObserver.
   Stagger siblings with .reveal-1 … .reveal-4. Respect reduced motion. */
.reveal {
  opacity: 0;
  transform: translateY(var(--reveal-distance));
  transition: opacity var(--dur-reveal) var(--ease-out-soft),
              transform var(--dur-reveal) var(--ease-out-soft);
}
.reveal.is-visible { opacity: 1; transform: translateY(0); }
.reveal-1 { transition-delay: calc(var(--reveal-stagger) * 1); }
.reveal-2 { transition-delay: calc(var(--reveal-stagger) * 2); }
.reveal-3 { transition-delay: calc(var(--reveal-stagger) * 3); }
.reveal-4 { transition-delay: calc(var(--reveal-stagger) * 4); }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .reveal { opacity: 1; transform: none; transition: none; }
}