/* ---------------------------------------------------------------------------
   Base: resets and page-level defaults every engine stylesheet assumes.
   Section styles live in css/engines/<section>.css.
   --------------------------------------------------------------------------- */

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

html {
  scroll-behavior: auto; /* Lenis owns smooth scrolling */
}

body {
  margin: 0;
  min-height: 100dvh;
  background: var(--color-bg);
  color: var(--color-fg);
  font-family: var(--font-mono);
  font-size: var(--text-body);
  line-height: 1.7;
  -webkit-font-smoothing: antialiased;
}

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

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

canvas {
  display: block;
}

.accent {
  color: var(--color-accent);
}

/* The "Ops" half of the BrewedOps wordmark, per the brand kit. */
.brand-ops {
  color: var(--color-brand-blue);
}

.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;
}

/*main is overflow-x-clip; the ink layer overhangs 300px each side.
   clip, not hidden: hidden would make <main> a scroll container and break the pin. */
.home-main {
  overflow-x: clip;
}

/* Wraps only the hero so the ink layer's bottom:0 / 100vh covers the hero's last screen. */
.ink-hero-wrap {
  position: relative;
}

.skip-link {
  position: absolute;
  left: -9999px;
}

.skip-link:focus {
  position: fixed;
  left: 16px;
  top: 16px;
  z-index: 200;
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  padding: 8px 20px;
  border-radius: 999px;
  background: var(--color-bg);
  border: var(--hairline) solid var(--color-border);
}

/* KAPE particle cursor (js/engines/: above everything, never takes a click.
   difference blend keeps the white particles readable on dark and cream sections alike. */
.kape-cursor {
  position: fixed;
  inset: 0;
  z-index: 9999;
  width: 100vw;
  height: 100vh;
  pointer-events: none;
  mix-blend-mode: difference;
}