:root {
  --ink: #221b13;
  --ink-soft: #48392a;
  --paper: #e7dbbd;
  --panel: #f2e8ce;
  --rule: #221b13;
  --accent: #7c2020;
  --accent-dark: #5c1616;
  --muted: #5a4a35;
  --meta: #3f5049;
  --error: #8a5a1a;
  --paper-shadow: #cbb98f;
  --kraft: #c9a86a;
  --kraft-dark: #a9884e;
  --space-1: 8px; --space-2: 16px; --space-3: 24px; --space-4: 32px; --space-5: 40px; --space-6: 48px;

  /* 3D Stamper Variables */
  --fall-ms: 820ms;
  --impact-pct: 45;
  --impact-y: 90px; 
  
  /* Reusable SVG noise for organic material feel */
  --grain: url('data:image/svg+xml;utf8,<svg viewBox="0 0 200 200" xmlns="http://www.w3.org/2000/svg"><filter id="noise"><feTurbulence type="fractalNoise" baseFrequency="0.8" numOctaves="3" stitchTiles="stitch"/></filter><rect width="100%" height="100%" filter="url(%23noise)" opacity="0.08"/></svg>');
}

*, *::before, *::after { box-sizing: border-box; }
html { scrollbar-color: var(--ink) var(--paper); scrollbar-width: thin; }

body {
  margin: 0;
  min-height: 100vh;
  position: relative;
  background-color: var(--paper);
  background-image:
    radial-gradient(circle at 18% 22%, rgba(0,0,0,0.035), transparent 45%),
    radial-gradient(circle at 82% 68%, rgba(0,0,0,0.03), transparent 50%),
    repeating-linear-gradient(0deg, rgba(0,0,0,0.015) 0px, rgba(0,0,0,0.015) 1px, transparent 1px, transparent 3px);
  color: var(--ink);
  font-family: 'Libre Baskerville', Georgia, 'Times New Roman', serif;
  line-height: 1.5;
  -webkit-text-size-adjust: 100%;
  -webkit-font-smoothing: antialiased;
  padding: clamp(16px, 5vw, 32px) 0;
}

body::before {
  content: ""; position: fixed; inset: 0; z-index: 0; pointer-events: none;
  background:
    var(--grain),
    radial-gradient(ellipse at center, transparent 60%, rgba(20,14,8,0.09) 100%);
  background-blend-mode: multiply, normal;
  opacity: 0.6;
}

a { color: inherit; }
button { -webkit-tap-highlight-color: transparent; touch-action: manipulation; }
input, select { -webkit-tap-highlight-color: transparent; }

/* custom scrollbar */
::-webkit-scrollbar { width: 10px; height: 10px; }
::-webkit-scrollbar-track { background: var(--paper); }
::-webkit-scrollbar-thumb { background: var(--ink); border: 2px solid var(--paper); }
::-webkit-scrollbar-thumb:hover { background: var(--accent); }