/* ============================================================
   layout.css — page-level primitives
   ============================================================
   Section gap, container, wrap, body chrome, reveal animation.
   Component files own their own internal layout.
   ============================================================ */

:root       { --section-gap: calc(var(--space-36) + var(--space-16)); }

html        { scroll-behavior: smooth; }
body        { margin: 0; display: flex; flex-direction: column; min-height: 100vh; }
main        { flex: 1; position: relative; }

section     { margin-top: var(--section-gap); }
section[id] { scroll-margin-top: var(--space-24); }

.container  { max-width: 1200px; margin: 0 auto; padding: 0 var(--space-6); width: 100%;
              box-sizing: border-box; }
.wrap       { display: flex; flex-wrap: wrap; gap: var(--space-12); }

.brand      { color: var(--color-primary); }
em          { font-style: normal; }

/* Reveal-on-scroll: fade + slide up when .in is added by IntersectionObserver. */
.reveal     { opacity: 0; transform: translateY(24px);
              transition: opacity 700ms ease, transform 700ms ease; }
.reveal.in  { opacity: 1; transform: none; }

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

@media (max-width: 1024px) {
  :root     { --section-gap: var(--space-36); }
}

@media (max-width: 768px) {
  .container { padding: 0 var(--space-6); }
}