/* ============================================================================
   EON PEPTIDES — Base / reset / global craft layer
   ============================================================================ */

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

html {
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
}
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
}

body {
  margin: 0;
  background: var(--paper);
  color: var(--ink-2);
  font-family: var(--font-sans);
  font-size: var(--fs-body);
  line-height: var(--lh-body);
  font-feature-settings: "cv05" 1, "ss01" 1;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
  overflow-x: hidden;
}

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

h1, h2, h3, h4, p, figure, blockquote, ul, ol { margin: 0; }
ul[role="list"], ol[role="list"] { list-style: none; padding: 0; }

a { color: inherit; text-decoration: none; }
button { font: inherit; color: inherit; background: none; border: 0; cursor: pointer; }
input, textarea, select { font: inherit; color: inherit; }

/* ---- Headings — clinical grotesque (IBM Plex Sans), tight tracking ------- */
h1, h2, h3, h4 { color: var(--ink); font-family: var(--font-sans); font-weight: 600; }
h1 { font-size: var(--fs-h1); line-height: 1.1; letter-spacing: -0.02em; }
h2 { font-size: var(--fs-h2); line-height: 1.14; letter-spacing: -0.018em; }
h3 { font-size: var(--fs-h3); line-height: 1.2; letter-spacing: -0.012em; }
h4 { font-size: var(--fs-h4); line-height: 1.3; letter-spacing: -0.006em; }

p { max-width: 62ch; }

strong { font-weight: 600; color: var(--ink); }

/* ---- Mono / metadata ---------------------------------------------------- */
.mono {
  font-family: var(--font-mono);
  font-feature-settings: "zero" 1;
  font-variant-numeric: tabular-nums;
}
.eyebrow {
  font-family: var(--font-mono);
  font-size: var(--fs-eyebrow);
  font-weight: 500;
  letter-spacing: var(--tracking-eyebrow);
  text-transform: uppercase;
  color: var(--accent-press);
}
.tnum { font-variant-numeric: tabular-nums; }

/* ============================================================================
   Grain — feTurbulence noise tuned for LIGHT surfaces (felt, not seen)
   ============================================================================ */
.grain {
  position: fixed;
  inset: 0;
  z-index: var(--z-grain);
  pointer-events: none;
  mix-blend-mode: multiply;
  opacity: 0.035;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  background-size: 180px 180px;
}

/* ============================================================================
   Selection / scrollbar — small craft signals
   ============================================================================ */
::selection { background: var(--accent-tint); color: var(--accent-press); }
::-moz-selection { background: var(--accent-tint); color: var(--accent-press); }

html { scrollbar-color: var(--hairline-strong) transparent; scrollbar-width: thin; }
::-webkit-scrollbar { width: 12px; height: 12px; }
::-webkit-scrollbar-track { background: var(--paper); }
::-webkit-scrollbar-thumb {
  background: var(--hairline-strong);
  border: 3px solid var(--paper);
  border-radius: var(--radius-pill);
}
::-webkit-scrollbar-thumb:hover { background: var(--muted); }

/* ============================================================================
   Focus — designed, not default
   ============================================================================ */
:focus { outline: none; }
:focus-visible {
  outline: 2px solid var(--focus-ring);
  outline-offset: 2px;
  border-radius: var(--radius-xs);
}
a:focus-visible, button:focus-visible {
  outline-offset: 3px;
}

.skip-link {
  position: absolute;
  left: 50%;
  top: -64px;
  transform: translateX(-50%);
  background: var(--ink);
  color: var(--paper);
  padding: 0.6rem 1rem;
  border-radius: var(--radius-sm);
  z-index: 1000;
  transition: top var(--dur-fast) var(--ease-out);
}
.skip-link:focus { top: 12px; }

/* ============================================================================
   Layout primitives
   ============================================================================ */
.container { width: 100%; max-width: var(--container); margin-inline: auto; padding-inline: var(--gutter); }
.container--md { max-width: var(--container-md); }
.container--sm { max-width: var(--container-sm); }
.container--xs { max-width: var(--container-xs); }
.container--text { max-width: var(--container-text); }

.section { padding-block: var(--section-pad); position: relative; }
.section--sunk { background: var(--paper-sunk); border-block: 1px solid var(--hairline); }
.section--tint { background: var(--accent-tint-2); border-block: 1px solid var(--hairline); }
section[id],
#verify {
  scroll-margin-top: 92px;
}

.section-head { margin-bottom: clamp(2rem, 1rem + 3vw, 3.5rem); }
.section-head .eyebrow { display: block; margin-bottom: var(--space-3); }
.section-head__lead { color: var(--ink-2); margin-top: var(--space-4); font-size: 1.0625rem; }

.hairline { border: 0; border-top: 1px solid var(--hairline); margin: 0; }

.visually-hidden {
  position: absolute !important;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); clip-path: inset(50%);
  white-space: nowrap; border: 0;
}

@media (min-width: 1px) and (min-resolution: 1.5dppx) {
  .hairline, .has-hairline { border-top-width: 0.5px; }
}

/* ============================================================================
   Reveal primitives (driven by motion.js via [data-reveal])
   ============================================================================ */
[data-reveal] {
  opacity: 0;
  transform: translateY(var(--travel-fadeup));
  transition: opacity var(--dur-base) var(--ease-out),
              transform var(--dur-base) var(--ease-out);
  transition-delay: var(--reveal-delay, 0ms);
  will-change: opacity, transform;
}
[data-reveal="sm"] { transform: translateY(var(--travel-fadeup-sm)); }
[data-reveal].is-visible { opacity: 1; transform: none; }

/* Masked line reveal — text rises out of an overflow-clipped mask, NO opacity */
.mask-line { display: block; overflow: hidden; padding-block: 0.04em; }
.mask-line > span {
  display: block;
  transform: translateY(110%);
  transition: transform var(--dur-slow) var(--ease-out);
  transition-delay: var(--mask-delay, 0ms);
  will-change: transform;
}
.mask-reveal.is-visible .mask-line > span { transform: translateY(0); }

/* ============================================================================
   Global reduced-motion floor
   ============================================================================ */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
  [data-reveal] { opacity: 1 !important; transform: none !important; }
  .mask-line > span { transform: none !important; }
  .grain { opacity: 0.02; }
}