* { box-sizing: border-box; margin: 0; padding: 0; }
/* scroll-behavior: smooth is handled via JS only for anchor clicks,
   to avoid fighting with position: sticky in the pinned story section */
html { scroll-padding-top: 80px; }
html, body {
  background: var(--paper);
  color: var(--ink);
  font-family: 'Inter', 'SF Pro Display', -apple-system, system-ui, sans-serif;
  font-weight: 400;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}
a { color: inherit; text-decoration: none; }
img { max-width: 100%; display: block; }

/* shared section heading pattern */
.sec-head {
  max-width: 760px; margin: 0 auto 64px; text-align: center;
}
.sec-head .eyebrow {
  font-family: 'JetBrains Mono', monospace; font-size: 11px;
  letter-spacing: 0.22em; text-transform: uppercase; color: var(--teal);
  display: inline-flex; align-items: center; gap: 10px; margin-bottom: 22px;
}
.sec-head .eyebrow i {
  display: inline-block; width: 24px; height: 2px;
  background: var(--teal); border-radius: 2px;
}
.sec-head h2 {
  font-family: 'Inter'; font-weight: 300;
  font-size: clamp(36px, 4.4vw, 56px);
  line-height: 1.05; letter-spacing: -0.025em; color: var(--ink);
  margin-bottom: 18px;
}
.sec-head h2 em { font-style: italic; color: var(--teal); font-weight: 400; }
.sec-head p {
  font-size: 17px; color: var(--body); line-height: 1.5;
  max-width: 56ch; margin: 0 auto;
}

/* buttons */
.btn {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 9px 16px; font-size: 13px; font-weight: 500;
  border-radius: 999px;
  background: var(--ink); color: #fff; border: 1px solid var(--ink);
  cursor: pointer;
  transition: background 180ms ease, transform 180ms ease, box-shadow 180ms ease;
}
.btn:hover { transform: translateY(-1px); }
.btn.ghost { background: transparent; color: var(--ink); }
.btn.ghost:hover { background: rgba(10,30,33,0.04); }
.btn.teal { background: var(--teal); border-color: var(--teal); }
.btn.teal:hover { background: var(--teal-deep); }
.btn.sm { padding: 6px 12px; font-size: 12px; }
.btn.lg { padding: 12px 24px; font-size: 14px; }

/* scroll reveal */
.reveal {
  opacity: 0; transform: translateY(14px);
  transition: opacity 700ms ease, transform 700ms cubic-bezier(.2,.7,.2,1);
}
.reveal.in { opacity: 1; transform: none; }

/* wash backgrounds */
.wash-lilac { background: linear-gradient(180deg, var(--paper) 0%, rgba(223,213,234,0.38) 50%, var(--paper) 100%); }
.wash-mint { background: linear-gradient(180deg, var(--paper) 0%, rgba(212,229,216,0.45) 50%, var(--paper) 100%); }
.wash-blush { background: linear-gradient(180deg, var(--paper) 0%, rgba(244,217,203,0.42) 50%, var(--paper) 100%); }
.wash-sky { background: linear-gradient(180deg, var(--paper) 0%, rgba(213,227,235,0.5) 50%, var(--paper) 100%); }
.wash-teal { background: linear-gradient(180deg, var(--paper) 0%, var(--teal-wash) 100%); }

/* focus styles */
:focus-visible {
  outline: 2px solid var(--teal);
  outline-offset: 2px;
}

/* reduced motion */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
  html { scroll-behavior: auto; }
  .reveal { opacity: 1; transform: none; }
}