@font-face { font-family: "Space Grotesk"; font-weight: 500; font-display: swap; src: url("../assets/fonts/space-grotesk-latin-500-normal.woff2") format("woff2"); }
@font-face { font-family: "Space Grotesk"; font-weight: 700; font-display: swap; src: url("../assets/fonts/space-grotesk-latin-700-normal.woff2") format("woff2"); }
@font-face { font-family: "JetBrains Mono"; font-weight: 400; font-display: swap; src: url("../assets/fonts/jetbrains-mono-latin-400-normal.woff2") format("woff2"); }
@font-face { font-family: "JetBrains Mono"; font-weight: 500; font-display: swap; src: url("../assets/fonts/jetbrains-mono-latin-500-normal.woff2") format("woff2"); }
@font-face { font-family: "JetBrains Mono"; font-weight: 700; font-display: swap; src: url("../assets/fonts/jetbrains-mono-latin-700-normal.woff2") format("woff2"); }

:root {
  --void: #0B0B0B;
  --gaze: #F5C518;
  --bone: #F3EFE2;
  --stone: #6E6A60;
  /* tints of the four colours only */
  --bone-70: rgba(243, 239, 226, .7);
  --bone-50: rgba(243, 239, 226, .5);
  --bone-12: rgba(243, 239, 226, .12);
  --bone-06: rgba(243, 239, 226, .06);
  --stone-40: rgba(110, 106, 96, .4);
  --gaze-16: rgba(245, 197, 24, .16);

  --grotesk: "Space Grotesk", ui-sans-serif, system-ui, sans-serif;
  --mono: "JetBrains Mono", ui-monospace, "SFMono-Regular", Menlo, monospace;
  --gutter: clamp(16px, 4vw, 56px);
  color-scheme: dark;
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
html, body { margin: 0; background: var(--void); color: var(--bone); }
body { font-family: var(--grotesk); font-size: 17px; line-height: 1.5; overflow-x: hidden; -webkit-font-smoothing: antialiased; }
img, canvas { display: block; max-width: 100%; }
a { color: inherit; }
:focus-visible { outline: 2px solid var(--gaze); outline-offset: 3px; }
::selection { background: var(--gaze); color: var(--void); }

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

/* Petrified type: bone letters with a carved stone grain */
.petrify {
  color: var(--bone);
  background:
    url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='220' height='220'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='3' seed='4'/><feColorMatrix values='0 0 0 0 .43  0 0 0 0 .416  0 0 0 0 .376  0 0 0 1.6 -.75'/></filter><rect width='100%' height='100%' filter='url(%23n)'/></svg>"),
    linear-gradient(var(--bone), var(--bone));
  -webkit-background-clip: text; background-clip: text;
  -webkit-text-fill-color: transparent;
}
@media (prefers-reduced-motion: no-preference) {
  .petrify.is-turning { animation: turn-to-stone 2.6s cubic-bezier(.6, 0, .3, 1) .5s both; }
}
@keyframes turn-to-stone {
  from { -webkit-text-fill-color: var(--gaze); filter: drop-shadow(0 0 18px rgba(245, 197, 24, .45)); }
  60% { filter: drop-shadow(0 0 0 rgba(245, 197, 24, 0)); }
  to { -webkit-text-fill-color: transparent; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .01ms !important; transition-duration: .01ms !important; }
}