@import url('https://fonts.googleapis.com/css2?family=Crimson+Pro:ital,wght@0,300;0,400;0,600;0,700;1,300;1,400;1,600&family=JetBrains+Mono:wght@300;400;500;700&family=Libre+Baskerville:ital,wght@0,400;0,700;1,400&display=swap');

/* ── DESIGN TOKENS ─────────────────────────────────────────── */
:root {
  --beige:        #F4EFE4;
  --beige-dark:   #E8DFD0;
  --beige-mid:    #EDE5D5;
  --cream:        #FAF6EF;
  --parchment:    #D9CEBC;
  --rust:         #B54A1C;
  --rust-light:   #D96235;
  --rust-pale:    #F2C9B8;
  --amber:        #C8872A;
  --amber-light:  #E8A83E;
  --ink:          #1F1A12;
  --ink-mid:      #3D3428;
  --ink-soft:     #6B5D47;
  --sage:         #5A7A5A;
  --teal:         #2E6E6E;
  --border:       #C8BAA2;
  --border-light: #DDD4C0;
  --shadow:       rgba(31,26,18,0.12);
  --shadow-deep:  rgba(31,26,18,0.22);

  --font-display: 'Libre Baskerville', Georgia, serif;
  --font-body:    'Crimson Pro', Georgia, serif;
  --font-mono:    'JetBrains Mono', 'Courier New', monospace;

  --max-w:  1120px;
  --gap:    clamp(1.5rem, 4vw, 3rem);
  --radius: 4px;

  --ease-spring: cubic-bezier(0.34, 1.56, 0.64, 1);
  --ease-out:    cubic-bezier(0.25, 0.46, 0.45, 0.94);
}

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

html { scroll-behavior: smooth; font-size: 18px; }

body {
  background: var(--beige);
  color: var(--ink);
  font-family: var(--font-body);
  font-weight: 400;
  line-height: 1.72;
  min-height: 100vh;
  overflow-x: hidden;
}

/* ── TYPOGRAPHY ─────────────────────────────────────────────── */
h1, h2, h3, h4 {
  font-family: var(--font-display);
  line-height: 1.25;
  color: var(--ink);
  font-weight: 700;
}

h1 { font-size: clamp(2.4rem, 6vw, 4.5rem); letter-spacing: -0.02em; }
h2 { font-size: clamp(1.8rem, 4vw, 3rem);   letter-spacing: -0.015em; }
h3 { font-size: clamp(1.3rem, 2.5vw, 1.9rem); }
h4 { font-size: 1.15rem; font-weight: 700; }

p { font-size: 1.05rem; color: var(--ink-mid); }

a { color: var(--rust); text-decoration: none; transition: color 0.2s; }
a:hover { color: var(--rust-light); }

em { font-style: italic; }
strong { font-weight: 700; color: var(--ink); }

code, .mono {
  font-family: var(--font-mono);
  font-size: 0.82em;
  background: var(--beige-dark);
  border: 1px solid var(--border-light);
  padding: 0.12em 0.45em;
  border-radius: 3px;
  color: var(--rust);
}

pre {
  font-family: var(--font-mono);
  background: var(--ink);
  color: #F4EFE4;
  padding: 1.5rem;
  border-radius: var(--radius);
  overflow-x: auto;
  font-size: 0.82rem;
  line-height: 1.65;
  border-left: 4px solid var(--rust);
}

pre code {
  background: transparent;
  border: none;
  padding: 0;
  color: inherit;
  font-size: inherit;
}

/* ── LAYOUT ─────────────────────────────────────────────────── */
.container {
  max-width: var(--max-w);
  margin: 0 auto;
  padding: 0 clamp(1rem, 5vw, 3rem);
}

.section {
  padding: clamp(3rem, 8vw, 6rem) 0;
}

.section--alt {
  background: var(--beige-mid);
  border-top: 1px solid var(--border-light);
  border-bottom: 1px solid var(--border-light);
}

/* ── DECORATIVE ELEMENTS ─────────────────────────────────────── */
.divider {
  display: flex;
  align-items: center;
  gap: 1rem;
  margin: 2.5rem 0;
}

.divider::before,
.divider::after {
  content: '';
  flex: 1;
  height: 1px;
  background: var(--border);
}

.divider-icon {
  font-family: var(--font-mono);
  font-size: 0.7rem;
  color: var(--ink-soft);
  white-space: nowrap;
  letter-spacing: 0.08em;
}

/* ── UTILITY CLASSES ─────────────────────────────────────────── */
.text-rust   { color: var(--rust); }
.text-amber  { color: var(--amber); }
.text-sage   { color: var(--sage); }
.text-soft   { color: var(--ink-soft); }
.text-mono   { font-family: var(--font-mono); }
.text-serif  { font-family: var(--font-display); }

.mt-1 { margin-top: 0.5rem; }
.mt-2 { margin-top: 1rem; }
.mt-3 { margin-top: 1.5rem; }
.mt-4 { margin-top: 2.5rem; }
.mt-5 { margin-top: 4rem; }
.mb-2 { margin-bottom: 1rem; }
.mb-3 { margin-bottom: 1.5rem; }
.mb-4 { margin-bottom: 2.5rem; }

.label {
  font-family: var(--font-mono);
  font-size: 0.7rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--rust);
  margin-bottom: 0.6rem;
  display: block;
}

.card {
  background: var(--cream);
  border: 1px solid var(--border-light);
  border-radius: var(--radius);
  padding: 2rem;
  transition: box-shadow 0.25s, transform 0.25s;
}

.card:hover {
  box-shadow: 0 8px 32px var(--shadow);
  transform: translateY(-3px);
}

.pill {
  display: inline-block;
  font-family: var(--font-mono);
  font-size: 0.7rem;
  padding: 0.2em 0.75em;
  border-radius: 20px;
  border: 1px solid var(--border);
  color: var(--ink-soft);
  background: var(--beige);
  letter-spacing: 0.06em;
}

.pill--rust   { background: var(--rust-pale); border-color: var(--rust); color: var(--rust); }
.pill--amber  { background: #F5E6C8; border-color: var(--amber); color: var(--amber); }
.pill--sage   { background: #D8E8D8; border-color: var(--sage); color: var(--sage); }
.pill--teal   { background: #C8DEDE; border-color: var(--teal); color: var(--teal); }

/* ── GRAIN TEXTURE OVERLAY ─────────────────────────────────── */
body::after {
  content: '';
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 9999;
  background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 256 256' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='noise'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23noise)' opacity='1'/%3E%3C/svg%3E");
  opacity: 0.028;
}

/* ── SCROLL REVEAL ──────────────────────────────────────────── */
.reveal {
  opacity: 0;
  transform: translateY(24px);
  transition: opacity 0.7s var(--ease-out), transform 0.7s var(--ease-out);
}
.reveal.visible {
  opacity: 1;
  transform: none;
}
.reveal-delay-1 { transition-delay: 0.1s; }
.reveal-delay-2 { transition-delay: 0.2s; }
.reveal-delay-3 { transition-delay: 0.3s; }
.reveal-delay-4 { transition-delay: 0.4s; }

/* ── RESPONSIVE ─────────────────────────────────────────────── */
@media (max-width: 768px) {
  html { font-size: 16px; }
}