/* TCF design tokens — Zofnat & Jacobson Colorectal Foundation */

@import url('https://fonts.googleapis.com/css2?family=Cormorant+Garamond:ital,wght@0,300;0,400;0,500;0,600;1,300;1,400&family=DM+Sans:opsz,wght@9..40,200;9..40,300;9..40,400;9..40,500;9..40,600&display=swap');

:root {
  --olive:        #6B5A2C;
  --olive-mid:    #7D6B38;
  --olive-faint:  #A3916A;
  --cream:        #F0EAD8;
  --parchment:    #E6DFC9;
  --ink:          #1C1A16;
  --ink-mid:      #4B4639;
  --ink-faint:    #857E72;
  --white:        #FFFFFF;
  --rule:         #CEC69A;

  --serif: 'Cormorant Garamond', 'EB Garamond', Georgia, serif;
  --sans:  'DM Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;

  --ease: cubic-bezier(0.16, 1, 0.3, 1);
}

* { box-sizing: border-box; }
html, body { margin: 0; padding: 0; }
body {
  background: var(--cream);
  color: var(--ink);
  font-family: var(--sans);
  font-weight: 300;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

/* shared grain overlay (subtle) */
.tcf-grain {
  position: absolute; inset: 0; pointer-events: none;
  opacity: .04;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='200' height='200'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='2' stitchTiles='stitch'/><feColorMatrix values='0 0 0 0 0  0 0 0 0 0  0 0 0 0 0  0 0 0 0.55 0'/></filter><rect width='100%' height='100%' filter='url(%23n)'/></svg>");
  mix-blend-mode: multiply;
}

/* shared utility */
.tcf-eyebrow {
  font-family: var(--sans);
  font-weight: 400;
  font-size: 12px;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--ink-mid);
}
.tcf-rule {
  display: inline-block;
  width: 40px; height: 1px;
  background: currentColor;
  vertical-align: middle;
  margin-right: 14px;
  opacity: .6;
}
.tcf-serif { font-family: var(--serif); font-weight: 400; }
.tcf-sans  { font-family: var(--sans); }

/* fade-up reveal */
.reveal { opacity: 0; transform: translateY(24px); transition: opacity 1.1s var(--ease), transform 1.1s var(--ease); }
.reveal.in { opacity: 1; transform: none; }
.reveal-stagger > * { opacity: 0; transform: translateY(24px); transition: opacity 1s var(--ease), transform 1s var(--ease); }
.reveal-stagger.in > * { opacity: 1; transform: none; }
.reveal-stagger.in > *:nth-child(1) { transition-delay: 0ms; }
.reveal-stagger.in > *:nth-child(2) { transition-delay: 100ms; }
.reveal-stagger.in > *:nth-child(3) { transition-delay: 200ms; }
.reveal-stagger.in > *:nth-child(4) { transition-delay: 300ms; }
.reveal-stagger.in > *:nth-child(5) { transition-delay: 400ms; }
.reveal-stagger.in > *:nth-child(6) { transition-delay: 500ms; }
.reveal-stagger.in > *:nth-child(7) { transition-delay: 600ms; }