@import url('https://fonts.googleapis.com/css2?family=DM+Serif+Display:ital@0;1&family=Syne:wght@400;500;600;700&display=swap');

:root {
  --ink: #1a1a18;
  --paper: #f4f0e8;
  --trace: #c8b89a;
  --accent: #2d4a3e;
  --accent-l: #4a7c6f;
  --grid: rgba(100,90,70,0.07);
  --serif: 'DM Serif Display', Georgia, serif;
  --sans: 'Syne', system-ui, sans-serif;
}

*, *::before, *::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

html { scroll-behavior: smooth; }

body {
  background: var(--paper);
  color: var(--ink);
  font-family: var(--sans);
  overflow-x: hidden;
}

body::before {
  content: '';
  position: fixed;
  inset: 0;
  background-image:
    linear-gradient(var(--grid) 1px, transparent 1px),
    linear-gradient(90deg, var(--grid) 1px, transparent 1px);
  background-size: 40px 40px;
  pointer-events: none;
  z-index: 0;
}

::-webkit-scrollbar { width: 3px; }
::-webkit-scrollbar-track { background: var(--paper); }
::-webkit-scrollbar-thumb { background: var(--trace); }

@keyframes fadeIn { to { opacity: 1; } }
@keyframes slideUp {
  from { opacity: 0; transform: translateY(18px); }
  to   { opacity: 1; transform: translateY(0); }
}
@keyframes draw { to { stroke-dashoffset: 0; } }
@keyframes pop {
  0%   { opacity: 0; transform: scale(0); }
  60%  { transform: scale(1.4); }
  100% { opacity: 1; transform: scale(1); }
}