/* ══════════════════════════════════════════
   BASE — Variables, Reset, Typography, Body
   ══════════════════════════════════════════ */

:root {
  --cream: #F5F0E8;
  --warm-white: #FAF7F2;
  --bark: #1E140A;
  --timber: #4A2E12;
  --wood: #7A5030;
  --gold: #C49A55;
  --gold-light: #DDB96A;
  --ash: #C0BBB2;
  --charcoal: #141210;
  --mid: #1E1A16;
}

/* Reset */
*, *::before, *::after { margin: 0; padding: 0; box-sizing: border-box; }
html { scroll-behavior: smooth; }
body { background: var(--charcoal); color: var(--cream); font-family: 'DM Sans', sans-serif; overflow-x: hidden; }

/* Scrollbar */
::-webkit-scrollbar { width: 4px; }
::-webkit-scrollbar-track { background: var(--charcoal); }
::-webkit-scrollbar-thumb { background: var(--gold); border-radius: 2px; }

/* Noise texture overlay */
body::after {
  content: ''; position: fixed; inset: 0;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='200' height='200'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.8' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='200' height='200' filter='url(%23n)' opacity='0.03'/%3E%3C/svg%3E");
  pointer-events: none; z-index: 900; opacity: .45;
}

/* Label utility */
.label { font-size: .6rem; letter-spacing: .38em; text-transform: uppercase; color: var(--ash); display: flex; align-items: center; gap: 12px; margin-bottom: 16px; }
.label::before { content: ''; width: 22px; height: 1px; background: currentColor; flex-shrink: 0; }

/* Tag utility */
.tag { font-size: .55rem; letter-spacing: .2em; text-transform: uppercase; padding: 5px 12px; border: 1px solid rgba(196,154,85,.25); color: var(--gold); transition: all .3s; }

/* Reveal animations */
.reveal { opacity: 0; transform: translateY(30px); transition: opacity .7s cubic-bezier(.25,.46,.45,.94), transform .7s cubic-bezier(.25,.46,.45,.94); }
.reveal.visible { opacity: 1; transform: translateY(0); }
.d1 { transition-delay: .08s; }
.d2 { transition-delay: .16s; }
.d3 { transition-delay: .24s; }
.d4 { transition-delay: .32s; }
.d5 { transition-delay: .4s; }

@keyframes fadeUp { from { opacity: 0; transform: translateY(26px); } to { opacity: 1; transform: translateY(0); } }