@import "tailwindcss";

:root {
  --background: #f5f0e8;
  --foreground: #222221;
}

@theme inline {
  --color-background: var(--background);
  --color-foreground: var(--foreground);
  --font-sans: var(--font-geist-sans);
  --font-mono: var(--font-geist-mono);
}

html {
  scroll-padding-top: 5rem; /* mobile navbar height */
}

@media (min-width: 1024px) {
  html {
    scroll-padding-top: 6.25rem; /* desktop navbar height */
  }
}

/* Hero image: gradient mask only on desktop where image is right-column */
.hero-mask {
  -webkit-mask-image: none;
  mask-image: none;
}

@media (min-width: 1024px) {
  .hero-mask {
    -webkit-mask-image:
      linear-gradient(to right, transparent 0%, black 14%),
      linear-gradient(to bottom, transparent 0%, black 10%);
    -webkit-mask-composite: destination-in;
    mask-image:
      linear-gradient(to right, transparent 0%, black 14%),
      linear-gradient(to bottom, transparent 0%, black 10%);
    mask-composite: intersect;
  }
}

body {
  background: var(--background);
  color: var(--foreground);
  font-family: var(--font-geist-sans), Arial, Helvetica, sans-serif;
}