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

:root {
  /* Surfaces */
  --bg-base:        #F5F2ED;
  --bg-surface:     #EDEAE3;
  --bg-raised:      #E6E2D9;
  --bg-frosted:     rgba(245, 242, 237, 0.72);
  --bg-frosted-border: rgba(125, 155, 118, 0.18);

  /* Sage */
  --sage-pale:      #C5D4C0;
  --sage-mid:       #7D9B76;
  --sage-deep:      #4A6B45;
  --sage-ink:       #2D4A2A;

  /* Copper */
  --copper:         #B87333;
  --copper-subtle:  rgba(184, 115, 51, 0.15);

  /* Ink */
  --ink:            #1A1A18;
  --ink-secondary:  #5C5C56;
  --ink-ghost:      #9C9C94;
  --ink-rule:       rgba(26, 26, 24, 0.1);

  /* Spacing */
  --space-1:   4px;
  --space-2:   8px;
  --space-3:   12px;
  --space-4:   16px;
  --space-5:   24px;
  --space-6:   32px;
  --space-7:   48px;
  --space-8:   64px;
  --space-9:   96px;
  --space-10:  128px;
  --space-11:  192px;

  --section-gap: clamp(96px, 14vw, 192px);
  --section-gap-sm: clamp(48px, 8vw, 96px);

  --radius-sm:    3px;
  --radius-panel: 6px;
  --radius-nav:   8px;

  --content-max:  1200px;
  --content-wide: 1440px;
  --content-text: 680px;

  /* Shadows */
  --shadow-sm:
    0 1px 3px rgba(74, 107, 69, 0.08),
    0 1px 2px rgba(74, 107, 69, 0.05);
  --shadow-md:
    0 4px 16px rgba(74, 107, 69, 0.10),
    0 2px 6px rgba(74, 107, 69, 0.06);
  --shadow-lg:
    0 12px 40px rgba(74, 107, 69, 0.12),
    0 4px 12px rgba(74, 107, 69, 0.07);
  --shadow-copper:
    0 4px 20px rgba(184, 115, 51, 0.18);
}

[data-theme="dark"] {
  --bg-base:        #141412;
  --bg-surface:     #1E1E1B;
  --bg-raised:      #252521;
  --bg-frosted:     rgba(20, 20, 18, 0.78);
  --bg-frosted-border: rgba(138, 171, 131, 0.14);

  --sage-pale:      #3A5236;
  --sage-mid:       #8AAB83;
  --sage-deep:      #A8C8A0;
  --sage-ink:       #C5D4C0;

  --copper:         #C8873D;
  --copper-subtle:  rgba(200, 135, 61, 0.12);

  --ink:            #F0EDE6;
  --ink-secondary:  #A8A49C;
  --ink-ghost:      #6A6660;
  --ink-rule:       rgba(240, 237, 230, 0.08);

  --shadow-sm:  0 1px 3px rgba(0, 0, 0, 0.3);
  --shadow-md:  0 4px 16px rgba(0, 0, 0, 0.35);
  --shadow-lg:  0 12px 40px rgba(0, 0, 0, 0.4);
}

html {
  transition: background-color 300ms ease, color 300ms ease;
}

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

body {
  font-family: 'DM Sans', sans-serif;
  background: var(--bg-base);
  color: var(--ink);
  font-size: 17px;
  line-height: 1.72;
  -webkit-font-smoothing: antialiased;
}

/* Grain */
.grain-overlay {
  position: relative;
}
.grain-overlay::after {
  content: '';
  position: absolute;
  inset: 0;
  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)'/%3E%3C/svg%3E");
  opacity: 0.035;
  mix-blend-mode: multiply;
  pointer-events: none;
  z-index: 1;
}
[data-theme="dark"] .grain-overlay::after {
  opacity: 0.055;
  mix-blend-mode: screen;
}

/* Frosted panel */
.panel-frosted {
  background: var(--bg-frosted);
  backdrop-filter: blur(18px) saturate(140%);
  -webkit-backdrop-filter: blur(18px) saturate(140%);
  border: 1px solid var(--bg-frosted-border);
  border-radius: var(--radius-panel);
}

/* Washes */
.wash-sage {
  background:
    radial-gradient(ellipse 80% 60% at 20% 40%, rgba(125, 155, 118, 0.12) 0%, transparent 70%),
    var(--bg-base);
}
.wash-warm {
  background:
    radial-gradient(ellipse 60% 80% at 75% 30%, rgba(184, 115, 51, 0.07) 0%, transparent 65%),
    var(--bg-base);
}

/* Grid */
.grid {
  display: grid;
  grid-template-columns: repeat(12, 1fr);
  gap: var(--space-6);
  max-width: var(--content-max);
  margin: 0 auto;
  padding: 0 var(--space-8);
}

/* Reveal animation */
.reveal {
  opacity: 0;
  transform: translateY(16px);
  transition:
    opacity 400ms cubic-bezier(0.25, 0.46, 0.45, 0.94),
    transform 400ms cubic-bezier(0.25, 0.46, 0.45, 0.94);
}
.reveal.is-visible {
  opacity: 1;
  transform: translateY(0);
}
@media (prefers-reduced-motion: reduce) {
  .reveal { opacity: 1; transform: none; transition: none; }
}

/* Interactive */
.interactive {
  transition: border-color 200ms ease, transform 200ms ease, background 200ms ease;
}
.interactive:hover {
  transform: translateY(-2px);
  border-color: var(--sage-mid);
}

/* Buttons */
.btn-primary {
  display: inline-block;
  border: 1px solid var(--sage-mid);
  color: var(--sage-deep);
  background: transparent;
  font-family: 'DM Mono', monospace;
  font-size: 12px;
  letter-spacing: 0.14em;
  padding: 12px 24px;
  border-radius: var(--radius-sm);
  transition: background 200ms ease, color 200ms ease;
  cursor: pointer;
  text-decoration: none;
  text-transform: uppercase;
}
.btn-primary:hover {
  background: var(--sage-mid);
  color: var(--bg-base);
}

.btn-ghost {
  display: inline-block;
  border: none;
  background: none;
  color: var(--ink-secondary);
  font-family: 'DM Mono', monospace;
  font-size: 12px;
  letter-spacing: 0.14em;
  padding: 12px 0;
  border-bottom: 1px solid var(--ink-rule);
  cursor: pointer;
  text-decoration: none;
  text-transform: uppercase;
  transition: color 200ms ease, border-color 200ms ease;
}
.btn-ghost:hover {
  color: var(--ink);
  border-color: var(--sage-mid);
}

/* Card */
.card {
  background: var(--bg-surface);
  border: 1px solid var(--bg-frosted-border);
  border-radius: var(--radius-panel);
  padding: var(--space-7);
  box-shadow: var(--shadow-sm);
}

/* Tag */
.tag {
  display: inline-block;
  font-family: 'DM Mono', monospace;
  font-size: 10px;
  font-weight: 300;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--ink-ghost);
  border: 1px solid var(--ink-rule);
  border-radius: var(--radius-sm);
  padding: 4px 8px;
}

@media (max-width: 768px) {
  .grid {
    padding: 0 var(--space-5);
    gap: var(--space-4);
  }
}