/* Fleurale — base element styling & a few utility helpers.
   Kept light: sets the typographic defaults so raw HTML looks on-brand. */

*, *::before, *::after { box-sizing: border-box; }

body {
  margin: 0;
  background: var(--bg-page);
  color: var(--text-body);
  font-family: var(--font-body);
  font-weight: var(--fw-regular);
  font-size: var(--text-md);
  line-height: var(--leading-normal);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

h1, h2, h3, h4 {
  font-family: var(--font-display);
  font-weight: var(--fw-bold);
  color: var(--text-heading);
  line-height: var(--leading-tight);
  margin: 0 0 0.4em;
  text-wrap: balance;
}

h1 { font-size: var(--text-3xl); }
h2 { font-size: var(--text-2xl); }
h3 { font-size: var(--text-xl); }
h4 { font-size: var(--text-lg); }

p { margin: 0 0 1em; text-wrap: pretty; }

a {
  color: var(--link);
  text-decoration-thickness: 1.5px;
  text-underline-offset: 2px;
  transition: color var(--dur-fast) var(--ease-soft);
}
a:hover { color: var(--link-hover); }

small { font-size: var(--text-xs); }
strong, b { font-weight: var(--fw-bold); }

::selection { background: var(--yellow-pollen); color: var(--blue-electric); }

:focus-visible {
  outline: var(--focus-ring-width) solid var(--focus-ring);
  outline-offset: var(--focus-ring-offset);
}

/* ---- Utility helpers ---- */

/* Eyebrow / running-head caps label (as seen on every poster corner) */
.fl-eyebrow {
  font-family: var(--font-display);
  font-weight: var(--fw-bold);
  font-size: var(--text-2xs);
  letter-spacing: var(--tracking-caps);
  text-transform: uppercase;
}

/* Warm paper grain overlay — apply to a solid-color block */
.fl-grain { position: relative; }
.fl-grain::after {
  content: "";
  position: absolute; inset: 0;
  background-image: var(--grain);
  background-size: 140px 140px;
  mix-blend-mode: multiply;
  opacity: 0.35;
  pointer-events: none;
}

/* Full-bleed saturated grounds */
.fl-ground-blue   { background: var(--blue-electric); color: var(--cream-on-dark); }
.fl-ground-red    { background: var(--red-poppy);     color: var(--cream-on-dark); }
.fl-ground-yellow { background: var(--yellow-pollen); color: var(--blue-electric); }
.fl-ground-blue h1, .fl-ground-blue h2, .fl-ground-blue h3, .fl-ground-red h1, .fl-ground-red h2 { color: var(--yellow-pollen); }