/* Base layer shared by the homepage drafts. Each draft sets its own tokens (colours, fonts). */

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; }
body {
  margin: 0;
  background: var(--bg);
  color: var(--fg);
  font-family: var(--font-body);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  overflow-x: clip;
}
img, video, svg, canvas { display: block; max-width: 100%; }
button { font: inherit; color: inherit; background: none; border: 0; padding: 0; cursor: pointer; }
a { color: inherit; }
input { font: inherit; color: inherit; }
h1, h2, h3, h4, p, ul, ol, figure { margin: 0; }
ul, ol { padding: 0; list-style: none; }

.sr-only {
  position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}
:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; }

/* Split text: keep words together and let characters move */
.wd { display: inline-block; white-space: nowrap; }
.ch { display: inline-block; will-change: transform; }

/* Film grain over everything; --grain-amt is pushed up by the music */
.kp-grain {
  position: fixed; inset: -50%; z-index: 90; pointer-events: none;
  background-image: var(--grain);
  opacity: calc(var(--grain-base, .5) + var(--grain-amt, 0));
  animation: kp-grain 0.9s steps(5) infinite;
  mix-blend-mode: var(--grain-blend, overlay);
}
@keyframes kp-grain {
  0% { transform: translate(0, 0); } 20% { transform: translate(-6%, 3%); } 40% { transform: translate(4%, -7%); }
  60% { transform: translate(-3%, 8%); } 80% { transform: translate(7%, 2%); } 100% { transform: translate(0, 0); }
}

/* Label cursor (desktop only) */
.kp-cursor {
  position: fixed; left: 0; top: 0; z-index: 100; pointer-events: none;
  width: 0; height: 0;
}
.kp-cursor span {
  position: absolute; left: 0; top: 0;
  translate: -50% -50%; scale: .2; opacity: 0;
  min-width: 84px; height: 84px; padding: 0 14px; border-radius: 999px;
  display: grid; place-items: center;
  background: var(--cursor-bg, var(--accent)); color: var(--cursor-fg, #fff);
  font: 600 12px/1 var(--font-mono); letter-spacing: .08em; text-transform: lowercase;
  transition: scale .35s cubic-bezier(.2,.9,.2,1.2), opacity .2s;
}
.kp-cursor.on span { scale: 1; opacity: 1; }

/* Motion off: everything still, nothing loops */
[data-motion="off"] .kp-grain { animation: none; }
[data-motion="off"] *, [data-motion="off"] *::before, [data-motion="off"] *::after {
  animation-duration: 0.001ms !important; animation-iteration-count: 1 !important;
  transition-duration: 0.001ms !important; scroll-behavior: auto !important;
}