/* Sutton Lumber design tokens. Stacked timber: horizontal bands, zero radius, grain hairlines. */
:root {
  /* palette */
  --bark:   #24190F;
  --bark-2: #362719;
  --timber: #7A4A1E;
  --saw:    #B5761F;
  --kraft:  #EFE3D0;
  --kraft-2:#E4D3B9;
  --mill:   #FAF6EF;
  --pencil: #5C5147;
  --rule:   #CDBBA0;
  --rule-dark: #4A3826;

  /* type */
  --face-display: "Roboto Slab", Georgia, "Times New Roman", serif;
  --face-body: "Readex Pro", system-ui, -apple-system, "Segoe UI", sans-serif;

  --t-hero:  clamp(2.15rem, 1.30rem + 3.6vw, 4.15rem);
  --t-h2:    clamp(1.65rem, 1.20rem + 1.9vw, 2.60rem);
  --t-h3:    clamp(1.16rem, 1.02rem + 0.6vw, 1.44rem);
  --t-lead:  clamp(1.03rem, 0.97rem + 0.30vw, 1.19rem);
  --t-body:  1rem;
  --t-small: 0.905rem;

  /* 8px spacing scale */
  --s1: 8px;  --s2: 16px; --s3: 24px; --s4: 32px;
  --s5: 48px; --s6: 64px; --s7: 88px; --s8: 120px;

  --band-y: clamp(48px, 7vw, 96px);
  --gutter: clamp(20px, 4.4vw, 56px);
  --measure: 62ch;
  --wrap: 1180px;
  --wrap-narrow: 900px;

  --header-h: 118px;
  --ease: cubic-bezier(.22,.61,.36,1);
  --dur: 200ms;

  --shadow-1: 0 1px 2px rgba(36,25,15,.10);
  --shadow-2: 0 2px 6px rgba(36,25,15,.13);
}

/* horizontal wood grain, 2% on light bands */
:root {
  --grain: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='600' height='120'%3E%3Cfilter id='g'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9 0.014' numOctaves='4' seed='7'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='600' height='120' filter='url(%23g)'/%3E%3C/svg%3E");
}