*{ box-sizing: border-box; }

html{
  scroll-behavior: smooth;
}

body{
  margin: 0;
  font-family: "Segoe UI", system-ui, -apple-system, "Helvetica Neue", Arial, sans-serif;
  font-size: 1.0625rem;
  line-height: 1.65;
  color: var(--ink);
  background: var(--paper);
}

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

a{ color: var(--sun-deep); }
a:hover{ color: var(--plum); }

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

.skip{
  position: absolute;
  left: -9999px;
  top: 0;
  background: var(--btn-bg);
  color: var(--btn-fg);
  padding: .6rem 1rem;
  z-index: 100;
}
.skip:focus{ left: 0; }

.wrap{
  max-width: 1080px;
  margin: 0 auto;
  padding: 0 1.25rem;
}

/* ---------- animation ---------- */

@keyframes spin{
  to{ transform: rotate(360deg); }
}
.rays{
  transform-origin: center;
  animation: spin 90s linear infinite;
}
@keyframes rise{
  from{ opacity: 0; transform: translateY(14px); }
  to{ opacity: 1; transform: none; }
}
.hero-grid > *{ animation: rise .8s ease-out both; }
.hero-grid > :last-child{ animation-delay: .15s; }

@media (prefers-reduced-motion: reduce){
  html{ scroll-behavior: auto; }
  *{
    animation: none !important;
    transition: none !important;
  }
}