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

:root {
  --ink:        #0E0E0F;
  --ink-soft:   #161617;
  --ink-card:   #1C1C1E;
  --line:       rgba(245,239,224,0.09);
  --line-strong:rgba(245,239,224,0.18);
  --bone:       #F5EFE0;
  --cream:      #E8DFC8;
  --warm:       #B8A57E;
  --brass:      #C9A961;
  --brass-dim:  #8C7240;
  --muted:      #6E6857;
  --dim:        #3D3933;
  --ff-disp:    'Bodoni Moda', Georgia, serif;
  --ff-body:    'Inter', -apple-system, BlinkMacSystemFont, sans-serif;
}

html { scroll-behavior: smooth; }

body {
  background: var(--ink);
  color: var(--cream);
  font-family: var(--ff-body);
  font-weight: 300;
  overflow-x: hidden;
  cursor: none;
  letter-spacing: -0.005em;
}

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

/* ─────────────────────────── COMMONS ─────────────────────────── */
section { position: relative; z-index: 2; }

.section-mark {
  display: flex; align-items: center; gap: 16px;
  font-family: var(--ff-disp); font-style: italic;
  font-size: 14px; color: var(--brass);
  letter-spacing: .04em;
}
.section-mark::before {
  content: ''; width: 36px; height: 1px; background: var(--brass);
}
.section-mark span { color: var(--muted); font-style: normal; font-family: var(--ff-body); font-size: 11px; letter-spacing: .25em; text-transform: uppercase; }

.section-title {
  font-family: var(--ff-disp);
  font-size: clamp(40px, 4.2vw, 68px);
  font-weight: 400; line-height: 1.0;
  letter-spacing: -0.018em;
  color: var(--bone);
  margin-top: 12px;
}
.section-title em { font-style: italic; color: var(--brass); }
.section-aside {
  font-size: 14px; line-height: 1.7; color: var(--muted);
  max-width: 460px;
}

.section-head {
  padding: 64px 72px 40px;
  display: grid; grid-template-columns: 38fr 62fr;
  gap: 64px;
  align-items: end;
  border-top: 1px solid var(--line-strong);
}

/* ── REVEAL ── */
.reveal { opacity: 0; transform: translateY(20px); transition: opacity .7s, transform .7s; }
.reveal.on { opacity: 1; transform: none; }
.d1 { transition-delay: .08s; } .d2 { transition-delay: .16s; } .d3 { transition-delay: .24s; }

@keyframes fadeUp { from { opacity:0; transform:translateY(18px); } to { opacity:1; transform:none; } }

/* ─────────────────────────── UTILITIES ─────────────────────────── */
.text-cream { color: var(--cream); }
.text-muted { color: var(--muted); }
.text-brass { color: var(--brass); }
.spacer { flex: 1; }