/* Everything Tailwind's utility classes can't express: the paper grain,
   the reveal-on-scroll transitions, the slang ticker and the FAQ markers.
   Same rules the original single-file version used. */

:root { scroll-behavior: smooth; }

@media (prefers-reduced-motion: reduce) {
  :root { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: .001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .001ms !important;
  }
}

body { -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; }

/* Fraunces variable axes — a touch of softness keeps it warm rather than austere */
.font-display { font-variation-settings: 'SOFT' 26, 'WONK' 0; }
.wonky { font-variation-settings: 'SOFT' 40, 'WONK' 1; }

/* Paper grain */
.grain::after {
  content: ''; position: fixed; inset: 0; pointer-events: none; z-index: 60;
  opacity: .55; mix-blend-mode: multiply;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='240' height='240'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.82' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='240' height='240' filter='url(%23n)' opacity='.055'/%3E%3C/svg%3E");
}

/* Section label rule */
.rule-label::before {
  content: ''; display: inline-block; width: 2rem; height: 1px;
  background: currentColor; vertical-align: middle; margin-right: .85rem; opacity: .5;
}

/* Reveal on scroll */
.reveal {
  opacity: 0; transform: translateY(18px);
  transition: opacity .7s cubic-bezier(.2,.6,.2,1), transform .7s cubic-bezier(.2,.6,.2,1);
}
.reveal.is-in { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) { .reveal { opacity: 1; transform: none; } }

/* Slang ticker */
.ticker { display: flex; width: max-content; animation: slide 46s linear infinite; }
.ticker:hover { animation-play-state: paused; }
@keyframes slide { from { transform: translateX(0); } to { transform: translateX(-50%); } }
@media (prefers-reduced-motion: reduce) { .ticker { animation: none; } }

/* FAQ marker */
details > summary { list-style: none; cursor: pointer; }
details > summary::-webkit-details-marker { display: none; }
details[open] .chev { transform: rotate(45deg); }

::selection { background: #8E3B4F; color: #FBF8F4; }
:focus-visible { outline: 2px solid #8E3B4F; outline-offset: 3px; border-radius: 2px; }

/* ── Rich text from the CMS ───────────────────────────────────────────────
   Every block of editor-managed prose is wrapped in .rt. The editor can only
   apply bold, italic and links, so there is not much to style — but italics
   need to pick up the display face, the way they do in the fixed copy. */

.rt > p + p { margin-top: 1.25rem; }
.rt i,
.rt em {
  font-family: 'Fraunces', Georgia, serif;
  font-style: italic;
}
/* In the hero and the section intros, italics are claret as well. */
.rt-accent i,
.rt-accent em { color: #8E3B4F; }

.rt a { text-decoration: underline; text-underline-offset: 3px; }
.rt a:hover { color: #8E3B4F; }

/* Links inside the dark bands need the light treatment. */
.rt-invert a:hover { color: #F7EBEC; }