/* blacksh33p direction kit: mechanics only. Each page sets its own tokens. */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
html.lenis, html.lenis body { height: auto; }
.lenis.lenis-smooth { scroll-behavior: auto !important; }
body {
  margin: 0;
  background: var(--paper);
  color: var(--ink);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  overflow-x: clip;
}
html.js main, html.js footer { opacity: 0; transition: opacity .45s ease; } /* the header stays put from the first frame; only the content waits for its fonts */
html.js.ready main, html.js.ready footer, html.still main, html.still footer { opacity: 1; }
img, svg { display: block; }
a { color: inherit; }
:focus-visible { outline: 2px solid currentColor; outline-offset: 4px; border-radius: 2px; }
::selection { background: var(--ink); color: var(--paper); }

.sheep { overflow: visible; }

/* Paper grain: one fixed layer, never animated */
.grain {
  position: fixed; inset: 0; z-index: 90; pointer-events: none;
  opacity: var(--grain, .07);
  mix-blend-mode: multiply;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='220' height='220'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 .9 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}

/* Wordmark: hover the 33 and it turns back into ee */
[data-wordmark] { white-space: nowrap; text-decoration: none; }
.wm-33 { display: inline-flex; }
.wm-33 i { font-style: inherit; display: inline-block; transition: transform .7s cubic-bezier(.5, 1.6, .4, 1); }
.wm-33 i + i { transition-delay: .06s; }
@media (hover: hover) and (pointer: fine) { .brand:hover .wm-33 i, [data-wordmark]:hover .wm-33 i { transform: rotateY(180deg); } }

.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

/* Little speech bits from easter eggs */
.say {
  position: fixed; z-index: 80; pointer-events: none;
  font: italic 400 1.25rem/1 var(--serif, Georgia, serif);
  color: var(--ink);
  opacity: 0;
}