/*
  CarlosSuarezArt — Base
  Reset and foundational typography. No component-specific rules here —
  see components.css. No page-specific rules here — see layout.css and
  the page's own stylesheet (e.g. home.css).
*/

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

html{
  scroll-behavior: smooth;
}

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

body{
  background: var(--color-white);
  color: var(--color-black);
  font-family: var(--font-sans);
  font-size: var(--text-body);
  line-height: 1.6;
  overflow-x: hidden;
  /* Sitewide load fade — a page never pops in abruptly (Bible §12).
     Skipped entirely under reduced motion, see motion.css. */
  animation: page-fade-in var(--duration-fade) var(--ease-gentle) forwards;
}

h1, h2, h3{
  font-family: var(--font-serif);
  font-weight: 400;
  line-height: 1.25;
}

p{
  max-width: var(--reading-max);
}

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

a{
  color: inherit;
}

/* Real, visible keyboard focus everywhere — Human Connection (Bible §5)
   extends to every visitor, per §18 Accessibility. */
a:focus-visible,
button:focus-visible,
[tabindex]:focus-visible{
  outline: 1.5px solid var(--color-blue);
  outline-offset: 3px;
}

/* Skip-to-content link — distinct from the Home ceremony's own skip
   button (see home.css). Visually hidden until focused. */
.skip-to-content{
  position: absolute;
  left: var(--space-2);
  top: -80px;
  background: var(--color-white);
  color: var(--color-black);
  font-family: var(--font-sans);
  font-size: var(--text-micro);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  text-decoration: none;
  padding: var(--space-2) var(--space-3);
  border: 0.5px solid var(--color-border);
  z-index: 100;
  transition: top 0.3s var(--ease-gentle);
}

.skip-to-content:focus{
  top: var(--space-2);
}