/* ==========================================================================
   BASE — tokens, reset, global typography
   Shared across every page. Page-specific rules live in their own files.
   ========================================================================== */

:root{
  --ease: cubic-bezier(.16,.8,.24,1);
  --bg: #f1ede6;
  --bg-soft: #f7f4ee;
  --ink: #33322f;
  --ink-dim: #8b877e;
  --line: rgba(51,50,47,0.12);
  --accent: #6f89a3;
  --accent-soft: rgba(111,137,163,0.22);
  --card-bg: #fbf9f5;
  --shadow-out: 0 20px 42px rgba(60,55,45,0.12), 0 1px 0 rgba(255,255,255,0.7) inset;
  --shadow-in: inset 2px 2px 5px rgba(60,55,45,0.16), inset -2px -2px 5px rgba(255,255,255,0.85);
}

*{ box-sizing:border-box; }
html{ scroll-behavior:smooth; }
body{ margin:0; background:var(--bg); color:var(--ink); font-family:'Newsreader', serif; overflow-x:hidden; }

.grain{
  position:fixed; inset:0; pointer-events:none; z-index:999; opacity:.08; mix-blend-mode:multiply;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='120'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}

.eyebrow{ font-family:'IBM Plex Mono', monospace; font-size:11px; letter-spacing:.28em; text-transform:uppercase; color:var(--ink-dim); }
h1,h2,h3{ font-family:'Space Grotesk', sans-serif; font-weight:300; margin:0; }

.slash{ color:var(--accent); }

.section{ padding:70px 48px; max-width:1100px; margin:0 auto; }
.section .lede{ color:var(--ink-dim); font-size:16px; line-height:1.75; max-width:660px; }

@media (max-width:880px){
  .section{ padding:50px 22px; }
}