/* === FONT IMPORT === */
/* Cabinet Grotesk (Fontshare) + Geist (Vercel CDN) */
@import url('https://api.fontshare.com/v2/css?f[]=cabinet-grotesk@500,700,800&f[]=satoshi@400,500,700&display=swap');

@font-face {
  font-family: "Geist";
  src: url("https://cdn.jsdelivr.net/npm/geist@1.3.0/dist/fonts/geist-sans/Geist-Regular.woff2") format("woff2");
  font-weight: 400; font-display: swap;
}
@font-face {
  font-family: "Geist";
  src: url("https://cdn.jsdelivr.net/npm/geist@1.3.0/dist/fonts/geist-sans/Geist-Medium.woff2") format("woff2");
  font-weight: 500; font-display: swap;
}
@font-face {
  font-family: "Geist";
  src: url("https://cdn.jsdelivr.net/npm/geist@1.3.0/dist/fonts/geist-sans/Geist-SemiBold.woff2") format("woff2");
  font-weight: 600; font-display: swap;
}
@font-face {
  font-family: "Geist Mono";
  src: url("https://cdn.jsdelivr.net/npm/geist@1.3.0/dist/fonts/geist-mono/GeistMono-Regular.woff2") format("woff2");
  font-weight: 400; font-display: swap;
}
@font-face {
  font-family: "Geist Mono";
  src: url("https://cdn.jsdelivr.net/npm/geist@1.3.0/dist/fonts/geist-mono/GeistMono-Medium.woff2") format("woff2");
  font-weight: 500; font-display: swap;
}

/* === BASE === */
html {
  scroll-behavior: smooth;
  overflow-x: clip;
}
body {
  font-family: var(--font-body);
  font-size: var(--fs-body);
  line-height: var(--lh-body);
  color: var(--ink);
  background: var(--white);
  font-feature-settings: "ss01", "ss02", "cv11";
  overflow-x: clip;
  width: 100%;
  max-width: 100vw;
}

/* When Lenis active */
html.lenis, html.lenis body { height: auto; }
.lenis.lenis-smooth { scroll-behavior: auto !important; }
.lenis.lenis-smooth [data-lenis-prevent] { overscroll-behavior: contain; }
.lenis.lenis-stopped { overflow: clip; }

/* === Typographie helpers === */
.display, h1, h2, h3 {
  font-family: var(--font-display);
  letter-spacing: -0.025em;
  line-height: var(--lh-tight);
  font-weight: 700;
  color: var(--ink);
}

h1 { font-size: var(--fs-h1); }
h2 { font-size: var(--fs-h2); }
h3 { font-size: var(--fs-h3); line-height: var(--lh-snug); }
h4 { font-size: var(--fs-h4); font-weight: 600; line-height: var(--lh-snug); }

.eyebrow {
  font-family: var(--font-mono);
  font-size: var(--fs-mono);
  text-transform: uppercase;
  letter-spacing: 0.18em;
  color: var(--mute);
  display: inline-flex;
  align-items: center;
  gap: var(--s-3);
}
.eyebrow::before {
  content: "";
  width: 6px; height: 6px; border-radius: 50%;
  background: var(--orange);
  box-shadow: 0 0 0 4px var(--orange-glow);
}

p { color: var(--mute); font-size: var(--fs-body); max-width: 64ch; }
p.lead { font-size: var(--fs-body-lg); color: var(--ink-soft); max-width: 56ch; line-height: 1.5; }

.text-orange { color: var(--orange); }
.text-ink { color: var(--ink); }
.text-mute { color: var(--mute); }
.font-mono { font-family: var(--font-mono); }

/* === Layout helpers === */
.container {
  width: 100%;
  max-width: var(--max-w);
  margin: 0 auto;
  padding: 0 var(--container-x);
}
.section { padding-block: var(--section-y); }
.section-tight { padding-block: clamp(56px, 8vh, 96px); }

.divider {
  height: 1px;
  background: linear-gradient(90deg, transparent, var(--line), transparent);
  border: 0;
}

/* === Reveal classes (consumed by GSAP) === */
/* Hidden state ONLY when JS has marked the document ready — graceful no-JS fallback */
html.js-ready .reveal { opacity: 0; transform: translate3d(0, 28px, 0); will-change: transform, opacity; }
.reveal.is-visible { opacity: 1; transform: translate3d(0, 0, 0); }

/* === Globally available keyframes === */
@keyframes spin { to { transform: rotate(360deg); } }

/* === Focus visible === */
:focus-visible {
  outline: 2px solid var(--orange);
  outline-offset: 3px;
  border-radius: 4px;
}

/* === Grain (subtle, fixed) === */
.grain {
  position: fixed; inset: 0;
  pointer-events: none;
  z-index: 1;
  opacity: 0.025;
  mix-blend-mode: multiply;
  background-image: url("data:image/svg+xml;utf8,<svg viewBox='0 0 200 200' xmlns='http://www.w3.org/2000/svg'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='0.95' numOctaves='2' stitchTiles='stitch'/></filter><rect width='100%25' height='100%25' filter='url(%23n)'/></svg>");
}

/* === Utility colors backgrounds === */
.bg-cream { background: var(--cream); }
.bg-linen { background: var(--linen); }
.bg-ink { background: var(--ink); color: var(--white); }
.bg-ink h1, .bg-ink h2, .bg-ink h3 { color: var(--white); }
.bg-ink p { color: rgba(255, 255, 255, 0.72); }

/* Section title pattern */
.section-head {
  display: flex;
  flex-direction: column;
  gap: var(--s-5);
  margin-bottom: var(--s-16);
  max-width: 720px;
}
.section-head h2 { line-height: 1.02; }
.section-head--split {
  flex-direction: row;
  justify-content: space-between;
  align-items: flex-end;
  max-width: none;
  gap: var(--s-12);
}
.section-head--split p { max-width: 38ch; text-align: right; }
@media (max-width: 1024px) {
  .section-head--split { flex-direction: column; align-items: flex-start; }
  .section-head--split p { text-align: left; }
}
@media (max-width: 640px) {
  .section-head { margin-bottom: var(--s-10); gap: var(--s-3); }
}

/* SR only */
.sr-only {
  position: absolute; width: 1px; height: 1px; padding: 0;
  margin: -1px; overflow: hidden; clip: rect(0,0,0,0); border: 0;
}