:root{
    --ink:#181510; --ink-soft:#3a352c;
    --paper:#FBF8F2; --paper-warm:#F1EBDC;
    --line:#DDD5C2;
    --clay:#B5622C; --clay-deep:#8F4A20; --gold:#C8955A;
    --night:#15120E; --night-2:#1D1812; --night-soft:#F0E9DB;
  }

*{box-sizing:border-box;margin:0;padding:0;-webkit-tap-highlight-color:transparent;}

html{scroll-behavior:smooth;}

body{font-family:'Inter',sans-serif;background:var(--paper);color:var(--ink);-webkit-font-smoothing:antialiased;overflow-x:hidden;}

.serif{font-family:'Fraunces',serif;}

.mono{font-family:'Space Mono',monospace;}

.reveal{opacity:0;transform:translateY(24px);transition:opacity .8s ease, transform .8s ease;}

.reveal.in{opacity:1;transform:translateY(0);}

@keyframes tickerScroll{from{transform:translateX(0);}to{transform:translateX(-50%);}}

@keyframes heroCycle{0%{opacity:0;} 4%{opacity:1;} 21%{opacity:1;} 25%{opacity:0;} 100%{opacity:0;}}

@keyframes heroZoom{0%{transform:scale(1);} 4%{transform:scale(1.08);} 14%{transform:scale(1.28);} 25%{transform:scale(1.32);} 100%{transform:scale(1.32);}}

@media (prefers-reduced-motion: reduce){
  .hero-photo{animation-name:heroCycle;}
  .cta-parallax,.cta-photo{transform:none !important;}
}

@keyframes draw{to{stroke-dashoffset:0;}}

@keyframes fadein{to{opacity:1;}}

@keyframes spin{from{transform:rotate(0deg);}to{transform:rotate(360deg);}}