/* base.css — Built Before 18 */
:root {
  --paper: #FAFAFA;
  --ink: #0A0A0A;
  --blue: #2440FF;
  --ink-60: rgba(10,10,10,.6);
  --line: rgba(10,10,10,.12);
  --font-display: "Fraunces", Georgia, serif;
  --font-body: "Inter", -apple-system, sans-serif;
  --font-mono: "Space Mono", monospace;
  --space-1: 8px; --space-2: 16px; --space-3: 24px;
  --space-4: 40px; --space-5: 64px; --space-6: 96px; --space-7: 144px;
  --measure: 62ch;
}
* { margin: 0; padding: 0; box-sizing: border-box; }
html { scroll-behavior: smooth; }
body { background: var(--paper); color: var(--ink); font-family: var(--font-body); font-size: 17px; line-height: 1.6; -webkit-font-smoothing: antialiased; }
.display { font-family: var(--font-display); font-weight: 560; line-height: 1.02; letter-spacing: -0.02em; }
.eyebrow { font-family: var(--font-mono); font-size: 12px; letter-spacing: .18em; text-transform: uppercase; color: var(--ink-60); }
.eyebrow .accent { color: var(--blue); }
a { color: inherit; }
.wrap { max-width: 1240px; margin-inline: auto; padding-inline: var(--space-4); }
.section { padding-block: var(--space-6); }
.section-head { margin-bottom: var(--space-5); }
.accent { color: var(--blue); }
/* grain photo placeholder: gradient + SVG noise, sized by aspect-ratio */
.photo { position: relative; overflow: hidden; background:
  linear-gradient(160deg, #d8cfc4 0%, #b9a898 45%, #8f7a66 100%); }
.photo::after { content: ""; position: absolute; inset: 0; opacity: .35; mix-blend-mode: overlay;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='.5'/%3E%3C/svg%3E"); }
.photo--bw { background: linear-gradient(160deg, #c9c9c9 0%, #6e6e6e 55%, #2b2b2b 100%); }