@import url('https://fonts.googleapis.com/css2?family=Playfair+Display:wght@500;600;700&family=Montserrat:wght@300;400;500;600&display=swap');

:root{
  --font-headline: "Playfair Display", ui-serif, Georgia, "Times New Roman", Times, serif;
  --font-body: "Montserrat", ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, Helvetica, Arial, "Apple Color Emoji", "Segoe UI Emoji";
}

body{
  font-family: var(--font-body);
  font-weight: 500;
}

h1, h2, h3{
  font-family: var(--font-headline);
  font-weight: 700;
}

.bg-hero{
  background:
    radial-gradient(1200px 600px at 10% 0%, rgba(15,122,62,0.14), transparent 52%),
    radial-gradient(900px 500px at 100% 20%, rgba(15,122,62,0.08), transparent 58%),
    linear-gradient(180deg, rgba(243,250,246,0.82), rgba(255,255,255,0.98) 48%, rgba(255,255,255,1));
}

.grain{
  position: relative;
}
.grain:after{
  content:"";
  position:absolute;
  inset:0;
  pointer-events:none;
  background-image: url("https://images.unsplash.com/photo-1528459801416-a9e53bbf4e17?auto=format&fit=crop&w=800&q=60");
  opacity: 0.03;
  mix-blend-mode: multiply;
  border-radius: inherit;
}

/* Image helpers (no-crop) */
.media-frame{
  position: relative;
  width: 100%;
  background: rgba(243,250,246,0.95);
}
.media-frame img{
  width: 100%;
  height: 100%;
  object-fit: contain;
  object-position: center;
  display: block;
  background: rgba(243,250,246,0.95);
}

/* Proportions users usually send: 1080x1080 (1:1) and 1080x1350 (4:5) */
.ratio-1x1{
  aspect-ratio: 1 / 1;
}
.ratio-4x5{
  aspect-ratio: 4 / 5;
}

/* Optional: keep a more cinematic ratio when needed */
.ratio-16x9{
  aspect-ratio: 16 / 9;
}