/* ============================================================
   FFkit — Responsive overrides
   - Fluid display type via clamp()
   - Global guards: no horizontal page scroll, images cap to their box
   - Component-level reflows live in the JSX via useViewport()
   ============================================================ */

:root {
  /* Fluid display scale — preserves the desktop ceiling, drops gracefully on phones. */
  --type-display-xl: 400 clamp(40px, 6.4vw, 64px)/1.05 var(--font-serif);
  --type-display-lg: 400 clamp(34px, 4.8vw, 48px)/1.08 var(--font-serif);
  --type-display-md: 400 clamp(28px, 3.6vw, 36px)/1.14 var(--font-serif);
  --type-display-sm: 400 clamp(24px, 2.8vw, 28px)/1.20 var(--font-serif);

  --type-h1: 600 clamp(24px, 2.6vw, 32px)/1.22 var(--font-sans);
  --type-h2: 600 clamp(20px, 2.0vw, 24px)/1.26 var(--font-sans);

  --type-body-lg: 400 clamp(15px, 1.2vw, 17px)/1.55 var(--font-sans);
}

html, body {
  overflow-x: hidden;
}

body {
  text-rendering: optimizeLegibility;
}

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

/* Headline letter-spacing slightly relaxes on narrow widths so words don't
   collide with each other in the serif. */
@media (max-width: 520px) {
  h1 { letter-spacing: -0.02em; }
}

/* Tap targets for buttons inherit the design's height (28/36/44) which is
   already finger-friendly. Just make sure links don't tap-highlight blue. */
a, button {
  -webkit-tap-highlight-color: transparent;
}

/* Reduce-motion respect — disable the only transitions we declare. */
@media (prefers-reduced-motion: reduce) {
  * {
    transition-duration: 0ms !important;
    animation-duration: 0ms !important;
  }
}