:root {
  --ink: #14140F;
  --paper: #FAF8F2;
  --paddy: #2F4C39;
  --paddy-50: #EEF2EE;
  --paddy-900: #1C2C22;
  --husk: #C9A15C;
  --husk-100: #F3E9D6;
  --clay: #A8442C;
  --mist: #6B6A61;
}

html {
  scroll-behavior: smooth;
}

body {
  background-color: var(--paper);
  color: var(--ink);
  font-family: "Inter", sans-serif;
}

.font-display {
  font-family: "Fraunces", serif;
}

.font-mono {
  font-family: "JetBrains Mono", monospace;
}

.eyebrow {
  font-family: "JetBrains Mono", monospace;
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.28em;
  color: var(--mist);
}

.bg-ink { background-color: var(--ink); }
.bg-paper { background-color: var(--paper); }
.bg-paddy { background-color: var(--paddy); }
.bg-paddy-50 { background-color: var(--paddy-50); }
.bg-paddy-900 { background-color: var(--paddy-900); }
.bg-husk { background-color: var(--husk); }
.bg-husk-100 { background-color: var(--husk-100); }
.bg-clay { background-color: var(--clay); }

.text-ink { color: var(--ink); }
.text-paper { color: var(--paper); }
.text-paddy { color: var(--paddy); }
.text-husk { color: var(--husk); }
.text-clay { color: var(--clay); }
.text-mist { color: var(--mist); }

.border-ink10 { border-color: rgba(20,20,15,0.1); }
.border-paper10 { border-color: rgba(250,248,242,0.1); }
.border-paper20 { border-color: rgba(250,248,242,0.2); }
.border-paddy10 { border-color: rgba(47,76,57,0.1); }

/* Signature element: scattered-grain texture, echoes flattened rice
   grains drifting across a section boundary. */
.grain-scatter {
  position: relative;
}
.grain-scatter::before {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  opacity: 0.4;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='240' height='120' viewBox='0 0 240 120'%3E%3Cg fill='%23C9A15C' fill-opacity='0.35'%3E%3Cellipse cx='12' cy='18' rx='5' ry='2' transform='rotate(20 12 18)'/%3E%3Cellipse cx='58' cy='64' rx='5' ry='2' transform='rotate(-15 58 64)'/%3E%3Cellipse cx='104' cy='22' rx='5' ry='2' transform='rotate(40 104 22)'/%3E%3Cellipse cx='150' cy='80' rx='5' ry='2' transform='rotate(-30 150 80)'/%3E%3Cellipse cx='196' cy='34' rx='5' ry='2' transform='rotate(10 196 34)'/%3E%3Cellipse cx='226' cy='96' rx='5' ry='2' transform='rotate(-45 226 96)'/%3E%3Cellipse cx='80' cy='104' rx='5' ry='2' transform='rotate(60 80 104)'/%3E%3Cellipse cx='170' cy='10' rx='5' ry='2' transform='rotate(-5 170 10)'/%3E%3C/g%3E%3C/svg%3E");
  background-repeat: repeat;
}

/* Sticky nav glass effect once scrolled */
#navbar {
  transition: background-color 0.4s ease, border-color 0.4s ease, backdrop-filter 0.4s ease;
}
#navbar.scrolled {
  background-color: rgba(250, 248, 242, 0.85);
  backdrop-filter: blur(10px);
  border-bottom: 1px solid rgba(20,20,15,0.1);
}

.reveal {
  opacity: 0;
  transform: translateY(24px);
  transition: opacity 0.7s cubic-bezier(0.22,1,0.36,1), transform 0.7s cubic-bezier(0.22,1,0.36,1);
}
.reveal.in-view {
  opacity: 1;
  transform: translateY(0);
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .reveal { opacity: 1; transform: none; transition: none; }
}

::selection {
  background-color: var(--paddy);
  color: var(--paper);
}

a:focus-visible, button:focus-visible {
  outline: 2px solid var(--paddy);
  outline-offset: 3px;
}

.logo-badge {
  height: 44px;
  width: auto;
  border-radius: 10px;
  display: block;
}

.timeline-btn.active {
  color: var(--ink);
}
.timeline-btn {
  color: rgba(20,20,15,0.4);
}

.timeline-progress {
  height: 4px;
  border-radius: 999px;
  background-color: rgba(47,76,57,0.15);
  flex: 1;
}
.timeline-progress.done {
  background-color: var(--paddy);
}