@import url('https://fonts.googleapis.com/css2?family=Archivo+Black&family=Archivo:ital,wght@0,100..900;1,100..900&family=DM+Mono:ital,wght@0,300;0,400;0,500;1,300;1,400;1,500&family=Plus+Jakarta+Sans:ital,wght@0,200..800;1,200..800&display=swap');

/*
  Custom CSS — only what Tailwind's utility classes (loaded via the Play CDN,
  no build step, so no @apply here) cannot express: keyframe animation,
  a background pattern, and reduced-motion handling. See design.md §0.1/§0.8.
*/
/* ================================
   HEADINGS — ARCHIVO BLACK
   ================================ */

h1 {
  font-family: "Archivo Black", sans-serif;
  font-weight: 400;
  font-size: 5.2rem;
}

h2, h2.text-brand {
  font-family: "Archivo Black", sans-serif;
  font-weight: 400;
  font-size: 4.2rem;
}


/* ================================
   BODY TEXT — ARCHIVO
   ================================ */

p {
  font-family: "Archivo", sans-serif;
  font-weight: 400;
  font-size: 1rem;
}

/* ================================
   LINKS — PLUS JAKARTA SANS
   ================================ */

a {
  font-family: "Plus Jakarta Sans", sans-serif;
  font-weight: 700;
  font-size: 0.875rem;
}
/* ================================
   BRAND TEXT — DM MONO
   ================================ */
.text-brand {
  font-family: "DM Mono", monospace;
  font-weight: 400;
}

/* ================================
   SERVICE CARDS — TYPOGRAPHY
   ================================ */

/* TOP TEXT */
.service-label {
  font-family: "Plus Jakarta Sans", sans-serif;
  font-weight: 700;
}

/* CENTER TITLE */
.service-title {
  font-family: "DM Mono", monospace;
  font-weight: 500;
}

/* CENTER DESCRIPTION */
.service-description {
  font-family: "Archivo", sans-serif;
  font-weight: 600;
}

/* BOTTOM LINK */
.service-link {
  font-family: "Plus Jakarta Sans", sans-serif;
  font-weight: 700;
}


html {
  scroll-behavior: smooth;
}
.bg-grid-paper {
  background-color: #FFFFFF;
  background-image:
    linear-gradient(#D4D4D4 1px, transparent 1px),
    linear-gradient(90deg, #D4D4D4 1px, transparent 1px);
  background-size: 24px 24px;
}

@keyframes marquee {
  from { transform: translateX(0); }
  to { transform: translateX(-60%); }
}

.ticker-track {
  display: flex;
  width: 700px;
  animation: marquee 22s linear infinite;
}

@media (prefers-reduced-motion: reduce) {
  .ticker-track {
    animation: none;
  }
}