/* ============================================================
   Arva Flour Mills — Timeline / Learn page
   Design tokens tuned to arvaflourmills.com
   ============================================================ */

:root {
  /* ---- Arva palette (from arvaflourmills.com) ---- */
  --arva-red: #b93030;             /* barn / logo red */
  --arva-red-deep: #8f2020;        /* darker for accents */
  --arva-red-soft: #d95555;        /* highlight */
  --arva-cream: #f5f0e6;           /* page cream */
  --arva-cream-dark: #ebe4d3;      /* alt panel */
  --arva-parchment: #f9f5eb;       /* card bg */
  --arva-charcoal: #1f1f1f;        /* body text */
  --arva-ink: #2a2521;             /* headings */
  --arva-muted: #6b6259;           /* secondary text */
  --arva-rule: #d9cfba;            /* dividers on cream */
  --arva-brass: #a8874a;           /* subtle accent */
  --arva-gold: #c9a86a;

  /* ---- Semantic ---- */
  --bg: var(--arva-cream);
  --bg-alt: #efe8d8;
  --surface: var(--arva-parchment);
  --text: var(--arva-charcoal);
  --heading: var(--arva-ink);
  --muted: var(--arva-muted);
  --accent: var(--arva-red);
  --accent-deep: var(--arva-red-deep);
  --rule: var(--arva-rule);

  /* ---- Type ---- */
  --font-serif: "Playfair Display", "Times New Roman", Georgia, serif;
  --font-sans: "Source Sans 3", -apple-system, BlinkMacSystemFont, "Segoe UI",
    Roboto, sans-serif;

  /* Fluid type scale */
  --text-xs: 0.75rem;
  --text-sm: 0.875rem;
  --text-base: 1rem;
  --text-md: 1.0625rem;
  --text-lg: 1.25rem;
  --text-xl: clamp(1.35rem, 1.1rem + 0.9vw, 1.75rem);
  --text-2xl: clamp(1.75rem, 1.3rem + 1.6vw, 2.5rem);
  --text-3xl: clamp(2.25rem, 1.6rem + 2.4vw, 3.5rem);
  --text-hero: clamp(2.75rem, 1.8rem + 3.6vw, 5rem);

  /* Spacing */
  --space-1: 0.25rem;
  --space-2: 0.5rem;
  --space-3: 0.75rem;
  --space-4: 1rem;
  --space-5: 1.5rem;
  --space-6: 2rem;
  --space-7: 3rem;
  --space-8: 4rem;
  --space-9: 6rem;
  --space-10: 8rem;

  /* Radii + shadows */
  --radius-sm: 3px;
  --radius: 6px;
  --radius-lg: 10px;
  --shadow-sm: 0 1px 2px rgba(31, 25, 20, 0.05);
  --shadow: 0 4px 14px rgba(31, 25, 20, 0.08);
  --shadow-lg: 0 12px 40px rgba(31, 25, 20, 0.12);

  /* Container */
  --container-max: 1180px;
  --container-pad: clamp(1rem, 2vw, 2rem);
}

/* ---- Reset ---- */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
body {
  margin: 0;
  font-family: var(--font-sans);
  font-size: var(--text-md);
  line-height: 1.65;
  color: var(--text);
  background: var(--bg);
  font-weight: 400;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}
img, svg { max-width: 100%; height: auto; display: block; }
h1, h2, h3, h4, h5, h6 {
  font-family: var(--font-serif);
  color: var(--heading);
  font-weight: 600;
  line-height: 1.15;
  margin: 0;
  letter-spacing: -0.005em;
}
p { margin: 0 0 1em; }
a { color: var(--accent); text-decoration: underline; text-underline-offset: 3px; text-decoration-thickness: 1px; }
a:hover { color: var(--accent-deep); }
strong { font-weight: 600; color: var(--heading); }
em { font-style: italic; color: inherit; }
cite { font-style: normal; }

.sr-only {
  position: absolute; width: 1px; height: 1px;
  padding: 0; margin: -1px; overflow: hidden; clip: rect(0,0,0,0);
  white-space: nowrap; border: 0;
}
.sr-only:focus {
  position: static; width: auto; height: auto; clip: auto;
  padding: 0.5rem 1rem; background: var(--accent); color: #fff;
}

.container {
  max-width: var(--container-max);
  margin: 0 auto;
  padding-left: var(--container-pad);
  padding-right: var(--container-pad);
}