/* 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; }

/* Visually hidden until focused — used by the skip-to-content link. */
.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}
.sr-only:focus {
  position: fixed;
  top: 12px;
  left: 12px;
  width: auto;
  height: auto;
  margin: 0;
  padding: 10px 18px;
  clip: auto;
  white-space: normal;
  background: var(--g);
  color: #fff;
  border-radius: var(--r);
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.25);
  z-index: 1000;
}

/* 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; }
}