/* ==========================================================================
   Base: reset, page defaults, layout helpers and shared type
   ========================================================================== */

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

html { background: var(--bg); }

/* Lenis smooth scroll */
html.lenis, html.lenis body { height: auto; }
.lenis.lenis-smooth { scroll-behavior: auto !important; }
.lenis.lenis-stopped { overflow: hidden; }

body {
  margin: 0;
  background: var(--bg);
  color: var(--ink);
  font-family: var(--sans);
  font-weight: 500;
  font-size: 1rem;
  line-height: 1.3;
  letter-spacing: -.03em;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}

::selection { background: var(--ink); color: var(--bg); }
.dark ::selection { background: #fff; color: var(--dk); }

a { color: inherit; }
h1, h2, h3, h4, p { margin: 0; }
h1, h2, h3, h4 { font-weight: 500; }
:focus-visible { outline: 2px solid currentColor; outline-offset: 4px; }

.wrap {
  max-width: 1440px;
  margin: 0 auto;
  padding-inline: var(--gut);
}

/* Sections */
section { position: relative; }
section > .wrap { position: relative; z-index: 1; }
.light { background: var(--bg); color: var(--ink); }
.dark { background: var(--dk); color: var(--dk-ink); }
.pad { padding-top: var(--xl3); padding-bottom: var(--xl5); }

/* Shared type */
h2 {
  font-size: clamp(2.25rem, 5.2vw, 4.75rem);
  line-height: 1.04;
  letter-spacing: -.05em;
  max-width: 15ch;
}
.desc {
  color: var(--mute);
  max-width: 36ch;
  font-size: 1rem;
  line-height: 1.4;
}
.dark .desc { color: var(--dk-mute); }