/*
 * Marketing site styles (CCV-14). Loaded only by the "marketing" layout.
 * Scoped under body.marketing-site so nothing leaks into the app.
 *
 * Palette follows the 2026 homepage mockup — classic Western print look:
 * deep brick/maroon accent, warm cream paper, charcoal bars, slab-serif
 * display type (Besley, a Clarendon revival).
 */

.marketing-site {
  font-family: "Hanken Grotesk", ui-sans-serif, system-ui, -apple-system, sans-serif;
}

.marketing-site .font-display {
  /* Rokkitt — condensed geometric slab (Rockwell Condensed style), matching
     the mockup's headline/title lettering. */
  font-family: "Rokkitt", "Rockwell", ui-serif, Georgia, serif;
  letter-spacing: 0.015em;
}

/* Filmic grain over the hero video — subtle vintage-Western texture. */
.hero-grain {
  opacity: 0.07;
  mix-blend-mode: overlay;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}

/* --- Staggered load reveal ------------------------------------------------ */
@keyframes rise {
  from { opacity: 0; transform: translateY(18px); }
  to   { opacity: 1; transform: none; }
}

.rise {
  opacity: 0;
  animation: rise 0.7s cubic-bezier(0.22, 1, 0.36, 1) forwards;
}

/* Soft pulse for the eyebrow dot */
@keyframes ping-dot {
  0%   { box-shadow: 0 0 0 0 rgba(125, 47, 36, 0.55); }
  70%  { box-shadow: 0 0 0 7px rgba(125, 47, 36, 0); }
  100% { box-shadow: 0 0 0 0 rgba(125, 47, 36, 0); }
}
.dot-pulse { animation: ping-dot 2.2s ease-out infinite; }

@media (prefers-reduced-motion: reduce) {
  .dot-pulse { animation: none; }
  .rise { animation: none; opacity: 1; }
}

/* News article body (CCV-285) — ActionText/Trix content rendered on the public
   marketing site. Self-contained typography so it doesn't depend on the Tailwind
   typography plugin being in the build. Targets descendants since ActionText
   wraps content in a .trix-content div. */
.news-content { color: #44403c; line-height: 1.75; font-size: 1.05rem; }
.news-content p { margin: 1rem 0; }
.news-content h2 { font-family: "Rokkitt", serif; font-size: 1.6rem; font-weight: 600; color: #1c1917; margin: 1.9rem 0 0.75rem; }
.news-content h3 { font-family: "Rokkitt", serif; font-size: 1.3rem; font-weight: 600; color: #1c1917; margin: 1.5rem 0 0.5rem; }
.news-content a { color: #7d2f24; text-decoration: underline; }
.news-content a:hover { color: #94392c; }
.news-content strong { font-weight: 600; color: #292524; }
.news-content ul { list-style: disc; padding-left: 1.5rem; margin: 1rem 0; }
.news-content ol { list-style: decimal; padding-left: 1.5rem; margin: 1rem 0; }
.news-content li { margin: 0.3rem 0; }
.news-content blockquote { border-left: 3px solid #7d2f24; padding-left: 1rem; margin: 1.25rem 0; color: #57534e; font-style: italic; }
.news-content img { border-radius: 0.75rem; margin: 1.5rem 0; max-width: 100%; height: auto; }
.news-content figure { margin: 1.5rem 0; }
.news-content figcaption { margin-top: 0.4rem; text-align: center; font-size: 0.85rem; color: #78716c; }