/* ==========================================================================
   Opus AV — Base typography and layout primitives
   ========================================================================== */

html { font-size: 16px; }

body {
  font-family: var(--font-sans);
  font-weight: var(--fw-regular);
  font-size: var(--fs-body);
  line-height: var(--lh-body);
  color: var(--text-default);
  background: var(--surface-default);
}

/* Headings — always Helvetica/Inter Light, charcoal on light surfaces ----- */
h1, h2, h3, h4, h5, h6 {
  font-family: var(--font-sans);
  color: var(--text-strong);
  font-weight: var(--fw-light);
  letter-spacing: var(--ls-h1);
  line-height: var(--lh-h1);
}

.display, h1.display {
  font-size: var(--fs-display);
  line-height: var(--lh-display);
  letter-spacing: var(--ls-display);
}

h1 { font-size: var(--fs-h1); }
h2 { font-size: var(--fs-h2); font-weight: var(--fw-regular); letter-spacing: var(--ls-h2); line-height: var(--lh-h2); }
h3 { font-size: var(--fs-h3); font-weight: var(--fw-regular); }

/* Eyebrow ---------------------------------------------------------------- */
.eyebrow {
  display: inline-block;
  font-size: var(--fs-eyebrow);
  font-weight: var(--fw-bold);
  text-transform: uppercase;
  letter-spacing: var(--ls-eyebrow);
  color: var(--accent);
  line-height: var(--lh-tight);
  margin-bottom: var(--space-2);
}

/* Body & links ----------------------------------------------------------- */
p { color: var(--text-default); }
p + p { margin-top: var(--space-2); }

strong { color: var(--text-strong); font-weight: var(--fw-bold); }
em.accent { color: var(--accent); font-style: normal; font-weight: var(--fw-bold); }

a { color: var(--text-strong); transition: color var(--dur-fast) var(--ease-opus); }
a:hover { color: var(--accent); }

/* Pull-quote ------------------------------------------------------------- */
.pull-quote {
  font-weight: var(--fw-light);
  font-size: var(--fs-pull);
  line-height: 1.4;
  letter-spacing: -0.005em;
  color: var(--text-strong);
  border-left: 4px solid var(--accent);
  padding: var(--space-2) 0 var(--space-2) var(--space-3);
  max-width: 60ch;
}

/* Layout helpers --------------------------------------------------------- */
.container {
  width: 100%;
  max-width: var(--container-max);
  margin-inline: auto;
  padding-inline: var(--container-pad);
}

.container-narrow {
  width: 100%;
  max-width: 880px;
  margin-inline: auto;
  padding-inline: var(--container-pad);
}

section { position: relative; }

/* Stack utility (vertical rhythm) */
.stack > * + * { margin-top: var(--stack-space, var(--space-3)); }
.stack-lg > * + * { margin-top: var(--space-5); }
.stack-xl > * + * { margin-top: var(--space-6); }

/* Surface variants ------------------------------------------------------- */
.surface-default { background: var(--surface-default); color: var(--text-default); }
.surface-soft    { background: var(--surface-soft);    color: var(--text-default); }
.surface-dark    { background: var(--surface-dark);    color: var(--text-on-dark); }
.surface-dark h1, .surface-dark h2, .surface-dark h3,
.surface-dark .display { color: var(--opus-white); }
.surface-dark .eyebrow { color: var(--accent); }
.surface-dark p { color: var(--text-on-dark); }

/* Section padding scale */
.section          { padding-block: var(--space-7); }
.section-tight    { padding-block: var(--space-5); }
.section-loose    { padding-block: var(--space-8); }

/* Skip link -------------------------------------------------------------- */
.skip-link {
  position: absolute;
  left: var(--space-2);
  top: var(--space-2);
  padding: var(--space-1) var(--space-2);
  background: var(--opus-charcoal);
  color: var(--opus-white);
  font-size: var(--fs-small);
  font-weight: var(--fw-bold);
  z-index: var(--z-modal);
  transform: translateY(-200%);
  transition: transform var(--dur-fast) var(--ease-opus);
}
.skip-link:focus-visible {
  transform: translateY(0);
}

/* Visually hidden, screen-reader friendly */
.sr-only {
  position: absolute;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0, 0, 0, 0);
  white-space: nowrap; border: 0;
}

/* Reveal-on-scroll baseline (JS adds .is-in) ----------------------------- */
.reveal {
  opacity: 0;
  transform: translateY(24px);
  transition:
    opacity var(--dur-slow) var(--ease-opus),
    transform var(--dur-slow) var(--ease-opus);
  will-change: opacity, transform;
}
.reveal.is-in {
  opacity: 1;
  transform: translateY(0);
}

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