/* ════════════════════════════════════════════════════════════════════════
   ProYA · base.css
   ────────────────────────────────────────────────────────────────────────
   html / body / typography defaults · ::selection · imported fonts
   No component rules here.
   ════════════════════════════════════════════════════════════════════════ */

@import url('https://fonts.googleapis.com/css2?family=Inter+Tight:wght@400;500;600;700&family=Instrument+Serif:ital@0;1&family=JetBrains+Mono:wght@400;500&display=swap');

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

html {
  font-family: var(--ff-display);
  font-size: var(--fs-body);
  line-height: var(--lh-body);
  color: var(--ink);
  background: var(--bg);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
  scroll-behavior: smooth;
}

/* ─── Lenis (official) ────────────────────────────────────────────────── */
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;
}
.lenis.lenis-smooth iframe {
  pointer-events: none;
}

body {
  background: var(--bg);
  color: var(--ink);
  font-feature-settings: "ss01", "ss02", "cv11";
  overflow-x: hidden;
}

::selection {
  background: var(--ink);
  color: var(--bg);
}

a {
  color: inherit;
  text-decoration: none;
}

img,
svg,
video {
  display: block;
  max-width: 100%;
}

img {
  height: auto;
}

button {
  font: inherit;
  color: inherit;
  background: none;
  border: 0;
  cursor: pointer;
}

input,
textarea,
select {
  font: inherit;
  color: inherit;
}

/* ─── Type primitives ────────────────────────────────────────────────── */
.h1, .h2, .h3, .h4 {
  font-family: var(--ff-display);
  font-weight: 600;
  line-height: var(--lh-head);
  letter-spacing: -0.02em;
  color: var(--ink);
}
.h1 { font-size: var(--fs-h1); line-height: var(--lh-tight); letter-spacing: -0.035em; }
.h2 { font-size: var(--fs-h2); letter-spacing: -0.025em; }
.h3 { font-size: var(--fs-h3); }
.h4 { font-size: var(--fs-h4); letter-spacing: -0.015em; }

.serif-i {
  font-family: var(--ff-serif);
  font-style: italic;
  font-weight: 400;
  letter-spacing: 0;
}

.mono {
  font-family: var(--ff-mono);
  font-size: var(--fs-hud);
  letter-spacing: var(--tracking-hud);
  color: var(--ink-3);
  text-transform: uppercase;
}

.eyebrow {
  font-family: var(--ff-mono);
  font-size: var(--fs-eyebrow);
  letter-spacing: var(--tracking-eyebrow);
  color: var(--ink-3);
  text-transform: uppercase;
}

.hud {
  font-family: var(--ff-mono);
  font-size: var(--fs-hud);
  letter-spacing: var(--tracking-hud);
  color: var(--ink-3);
  text-transform: uppercase;
}

.lede {
  font-family: var(--ff-display);
  font-weight: 400;
  font-size: var(--fs-lede);
  line-height: var(--lh-lede);
  color: var(--ink-2);
  letter-spacing: -0.005em;
}

.body-lg { font-size: var(--fs-body); color: var(--ink-2); }
.meta    { font-size: var(--fs-meta); color: var(--ink-3); }

/* ─── Container + section spacing ────────────────────────────────────── */
.container {
  max-width: var(--container-max);
  margin-inline: auto;
  padding-inline: var(--container-padding);
}

.section {
  padding-block: var(--section-y);
  position: relative;
}

.section--tight {
  padding-block: var(--section-y-tight);
}

.section--dark {
  background: var(--bg-deep);
  color: var(--ink-bone);
}
.section--dark .hud,
.section--dark .mono,
.section--dark .eyebrow {
  color: var(--ink-3);
}

.rule {
  height: 1px;
  background: var(--line);
  border: 0;
}
.section--dark .rule { background: var(--line-dark); }

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

/* Hide system cursor when custom is active */
html.has-custom-cursor,
html.has-custom-cursor * {
  cursor: none !important;
}
@media (pointer: coarse) {
  html.has-custom-cursor,
  html.has-custom-cursor * {
    cursor: auto !important;
  }
}