/* Reset */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html { scroll-behavior: smooth; }
body {
  font-family: var(--sans);
  background: var(--bg);
  color: var(--t2);
  font-size: 16px;
  line-height: 1.6;
  overflow-x: hidden;
  -webkit-font-smoothing: antialiased;
  transition: background 0.3s ease, color 0.3s ease;
}
a { color: inherit; text-decoration: none; }
button { cursor: pointer; border: none; font-family: var(--sans); background: none; color: inherit; }
img { max-width: 100%; display: block; }

/* Layout utilities */
.container { max-width: var(--max); margin: 0 auto; padding: 0 5vw; }
.section { padding: 120px 0; }
.section.tight { padding: 80px 0; }

/* Typography utilities */
.label {
  font-size: 10.5px;
  font-weight: 500;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--t3);
}
.label.green { color: var(--g); }
/* Used as a section eyebrow above a heading; spacing is consistent enough to bake in. */
.label.eyebrow { display: block; margin-bottom: 16px; }

h2.serif {
  font-family: var(--serif);
  font-size: clamp(34px,4vw,54px);
  font-weight: 400;
  line-height: 1.1;
  letter-spacing: -0.01em;
  color: var(--t1);
}
h2.serif em { font-style: italic; color: var(--t3); }

.body-copy {
  font-size: 16px;
  color: var(--t2);
  line-height: 1.75;
  font-weight: 300;
  max-width: 520px;
}
.body-copy.centered { margin-left: auto; margin-right: auto; text-align: center; max-width: 480px; }

/* Fade-in on scroll (.fi elements toggle .visible from the IntersectionObserver) */
.fi {
  opacity: 0;
  transform: translateY(20px);
  transition:
    opacity 0.8s cubic-bezier(.22,.68,0,1),
    transform 0.8s cubic-bezier(.22,.68,0,1);
}
.fi.visible { opacity: 1; transform: none; }
.d1 { transition-delay: .1s; }
.d2 { transition-delay: .2s; }
.d3 { transition-delay: .3s; }
.d4 { transition-delay: .45s; }

@media (prefers-reduced-motion: reduce) {
  .fi { opacity: 1; transform: none; transition: none; }
  html { scroll-behavior: auto; }
}

/* Responsive helpers shared by all pages */
@media (max-width: 768px) {
  .section { padding: 60px 0; }
  .section.tight { padding: 48px 0; }
  h2.serif { font-size: clamp(28px,6vw,42px); }
  .container { padding: 0 5vw; }
}
@media (max-width: 480px) {
  .section { padding: 48px 0; }
}