/* ────────────────────────────────────────────────────────────────
   M&L Prodigy — Design tokens
   ───────────────────────────────────────────────────────────────
   Aesthetic: editorial healthcare. Magazine-grade typography,
   generous whitespace, photoreal Massachusetts imagery, refined
   palette. Apple-level minimalism inside healthcare warmth.

   No Inter. No system fonts. No purple gradients. No AI slop.
   ──────────────────────────────────────────────────────────────── */

:root {
  /* — Palette —
     Anchored to the live logo at mlphealthcare.org: navy teal wordmark
     with a vital green heartbeat / EKG accent. Cream surfaces, gold
     used for AFC dollar amounts and primary CTAs. */
  --mlp-cream:        #F7F0DF;  /* surface */
  --mlp-cream-2:      #FBF5E8;  /* surface lighter */
  --mlp-ink:          #0B2A3A;  /* primary text on cream */
  --mlp-teal:         #0E5C5C;  /* primary brand — the wordmark */
  --mlp-teal-deep:    #084848;  /* deeper teal for hovers */
  --mlp-teal-tint:    #D6E3E1;  /* tint of teal for subtle backgrounds */
  --mlp-green:        #3FB55B;  /* vital green — the heartbeat accent */
  --mlp-green-deep:   #2E944A;  /* deeper green for hovers */
  --mlp-gold:         #E5A53A;  /* AFC dollar amount + primary CTAs */
  --mlp-gold-deep:    #C68720;
  --mlp-gray-warm:    #6B7372;  /* secondary text */
  --mlp-gray-fine:    #C9C1AC;  /* hairline borders on cream */
  --mlp-white:        #FFFFFF;
  --mlp-shadow:       0 1rem 3rem -1rem rgba(11, 42, 58, 0.18);
  --mlp-shadow-soft:  0 0.5rem 2rem -0.5rem rgba(11, 42, 58, 0.10);

  /* — Type families —
     Fraunces: editorial serif with personality. Italic does the heavy
     emotional lifting (hero headline, dollar amounts).
     General Sans: refined contemporary sans-serif, distinctive against
     the Inter / Helvetica norm. */
  --mlp-serif:  'Fraunces', 'Source Serif Pro', 'Georgia', serif;
  --mlp-sans:   'General Sans', 'Söhne', 'Helvetica Neue', sans-serif;
  --mlp-mono:   'JetBrains Mono', 'IBM Plex Mono', ui-monospace, monospace;

  /* — Type scale — fluid via clamp() — */
  --t-eyebrow:     0.75rem;    /* uppercase microtext labels */
  --t-body-sm:     0.9375rem;  /* secondary body */
  --t-body:        1.0625rem;  /* primary body */
  --t-body-lg:     1.1875rem;  /* lead body */
  --t-h6:          1.125rem;
  --t-h5:          1.375rem;
  --t-h4:          clamp(1.5rem, 1.2rem + 1vw, 2rem);
  --t-h3:          clamp(2rem, 1.6rem + 2vw, 3rem);
  --t-h2:          clamp(2.75rem, 2rem + 3.5vw, 4.5rem);
  --t-h1:          clamp(3rem, 2rem + 4vw, 5.5rem);
  --t-hero:        clamp(3.1rem, 1.9rem + 5.4vw, 6rem);

  /* — Spacing — 8pt grid — */
  --s-1:  0.5rem;
  --s-2:  1rem;
  --s-3:  1.5rem;
  --s-4:  2rem;
  --s-5:  2.5rem;
  --s-6:  3rem;
  --s-7:  4rem;
  --s-8:  5rem;
  --s-9:  6rem;
  --s-10: 8rem;
  --s-11: 10rem;
  --s-12: 12rem;

  /* — Radii — */
  --r-pill:   999px;
  --r-card:   0.75rem;
  --r-soft:   0.375rem;

  /* — Layout — */
  --maxw-narrow:  44rem;   /* longform body */
  --maxw-text:    52rem;   /* section body */
  --maxw-wide:    72rem;   /* dominant grid */
  --maxw-huge:    88rem;   /* hero / edge-bleed */

  --leading-display: 0.95;
  --leading-tight:   1.05;
  --leading-snug:    1.25;
  --leading-body:    1.65;

  /* — Motion — */
  --ease-out: cubic-bezier(0.22, 1, 0.36, 1);
  --ease-out-expo: cubic-bezier(0.16, 1, 0.3, 1);
  --ease-in-out: cubic-bezier(0.65, 0, 0.35, 1);
  --d-fast: 180ms;
  --d-med:  420ms;
  --d-slow: 720ms;
}

/* — Base resets — */
*, *::before, *::after { box-sizing: border-box; }
html {
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
  scroll-padding-top: 5.5rem;
  accent-color: var(--mlp-teal);
  caret-color: var(--mlp-teal);
  scrollbar-color: var(--mlp-gray-fine) var(--mlp-cream);
}
body {
  margin: 0;
  font-family: var(--mlp-sans);
  font-size: var(--t-body);
  line-height: var(--leading-body);
  color: var(--mlp-ink);
  background: var(--mlp-cream);
  font-feature-settings: 'ss01', 'ss02', 'cv11';
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}
img, picture, video, svg { display: block; max-width: 100%; height: auto; }
a { color: inherit; text-decoration-thickness: 1px; text-underline-offset: 0.18em; }

/* — Type helpers — */
.eyebrow {
  font-family: var(--mlp-sans);
  font-size: var(--t-eyebrow);
  letter-spacing: 0.16em;
  text-transform: uppercase;
  font-weight: 500;
  color: var(--mlp-teal);
}
.serif-display {
  font-family: var(--mlp-serif);
  font-weight: 300;
  font-style: italic;
  font-variation-settings: 'opsz' 144, 'SOFT' 50, 'WONK' 0;
  letter-spacing: -0.02em;
}
.serif-display-roman {
  font-family: var(--mlp-serif);
  font-weight: 400;
  font-variation-settings: 'opsz' 144, 'SOFT' 60, 'WONK' 0;
  letter-spacing: -0.015em;
}
.tnum { font-feature-settings: 'tnum', 'ss01'; }

/* — Buttons — */
.btn {
  display: inline-flex;
  align-items: center;
  gap: 0.6rem;
  padding: 0.95rem 1.6rem;
  font-family: var(--mlp-sans);
  font-weight: 600;
  font-size: var(--t-body);
  letter-spacing: -0.005em;
  border-radius: var(--r-pill);
  border: 1.5px solid transparent;
  cursor: pointer;
  transition: transform var(--d-fast) var(--ease-out),
              background-color var(--d-fast) var(--ease-out),
              color var(--d-fast) var(--ease-out),
              box-shadow var(--d-fast) var(--ease-out);
  text-decoration: none;
  white-space: nowrap;
}
.btn-gold {
  background: var(--mlp-gold);
  color: var(--mlp-ink);
  box-shadow: 0 0.5rem 1.5rem -0.5rem rgba(229, 165, 58, 0.55);
}
.btn-gold:hover { background: var(--mlp-gold-deep); transform: translateY(-2px); }
.btn-ghost {
  background: transparent;
  border-color: currentColor;
  color: var(--mlp-cream);
}
.btn-ghost:hover { background: rgba(247, 240, 223, 0.1); transform: translateY(-2px); }
.btn-ink {
  background: var(--mlp-ink);
  color: var(--mlp-cream);
}
.btn-ink:hover { background: var(--mlp-teal-deep); transform: translateY(-2px); }
.btn-lg { padding: 1.15rem 2rem; font-size: var(--t-body-lg); }

/* — Containers — */
.container {
  width: 100%;
  margin-inline: auto;
  padding-inline: clamp(1.25rem, 2.5vw, 2rem);
}
.container-wide  { max-width: var(--maxw-wide); }
.container-text  { max-width: var(--maxw-text); }
.container-huge  { max-width: var(--maxw-huge); }

/* — Reveal on scroll —
   Opt in: only html.js hides the starting state, so crawlers, print, and a
   failed script all see the full page. A revealed list staggers its children
   through the --i custom property set inline on each child. */
.js .reveal {
  opacity: 0;
  transform: translateY(1.25rem);
  transition: opacity var(--d-slow) var(--ease-out-expo),
              transform var(--d-slow) var(--ease-out-expo);
}
.js .reveal.in {
  opacity: 1;
  transform: translateY(0);
}
.js .reveal > [style*="--i"] {
  opacity: 0;
  transform: translateY(1rem);
  transition: opacity var(--d-slow) var(--ease-out-expo),
              transform var(--d-slow) var(--ease-out-expo);
  transition-delay: calc(120ms + var(--i, 0) * 90ms);
}
.js .reveal.in > [style*="--i"] {
  opacity: 1;
  transform: translateY(0);
}

/* — Subtle grain on hero — */
.grain::after {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  opacity: 0.22;
  mix-blend-mode: overlay;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='180' height='180'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='2' stitchTiles='stitch'/></filter><rect width='100%25' height='100%25' filter='url(%23n)' opacity='0.85'/></svg>");
}

/* — Reduced motion — */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    transition-delay: 0ms !important;
  }
  .js .reveal, .js .reveal > [style*="--i"] { opacity: 1; transform: none; }
}