/* Reset + shared primitives. Page-specific CSS stays inline in each page. */
*, *::before, *::after { margin:0; padding:0; box-sizing:border-box; }

html { scroll-behavior:smooth; -webkit-text-size-adjust:100%; }

body{
  background:var(--paper);
  color:var(--ink);
  font-family:var(--body);
  font-size:var(--fs-body);
  line-height:var(--lh-prose);
  -webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale;
  overflow-x:hidden;
}

h1,h2,h3,h4{ font-family:var(--display); font-weight:600; letter-spacing:-.01em; color:var(--ink); }
a { color:var(--ink); }
strong,b { font-weight:600; }
img { max-width:100%; display:block; }

::selection { background:var(--yellow); color:var(--ink); }

:focus-visible{
  outline:2px solid var(--red-ink);
  outline-offset:3px;
  border-radius:var(--r-sm);
}

/* The brand's signature emphasis: one word swapped to the accent serif in red. */
.em{ font-family:var(--accent); font-style:italic; font-weight:400; color:var(--red); }

/* Scroll reveal. Visible by default; only hidden once JS confirms it can
   animate, so a JS failure never blanks the page. */
[data-reveal]{ opacity:1; }
.js [data-reveal]{
  opacity:0; transform:translateY(12px);
  transition:opacity .55s var(--ease), transform .55s var(--ease);
}
.js [data-reveal].is-in{ opacity:1; transform:none; }

@media (prefers-reduced-motion: reduce){
  html{ scroll-behavior:auto; }
  .js [data-reveal]{ opacity:1; transform:none; transition:none; }
  *,*::before,*::after{ animation-duration:.01ms !important; transition-duration:.01ms !important; }
}