/* ────────────────────────────────────────────────
   base — reset, typography, common elements
   ──────────────────────────────────────────────── */

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

html, body{
  background: var(--bg);
  color: var(--ink);
  font-family: var(--font-body);
  font-weight: 400;
  font-size: 16px;
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  overflow-x: hidden;
  cursor: none;
}

body{
  position: relative;
  min-height: 100vh;
}

img{
  max-width: 100%;
  height: auto;
  display: block;
}

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

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

ul, ol{ list-style: none; }

/* ────────── film grain overlay ────────── */
.grain{
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 100;
  opacity: 0.28;
  mix-blend-mode: overlay;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='240' height='240'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/><feColorMatrix values='0 0 0 0 1  0 0 0 0 1  0 0 0 0 1  0 0 0 0.5 0'/></filter><rect width='100%25' height='100%25' filter='url(%23n)'/></svg>");
  animation: grain 0.6s steps(2) infinite;
}
@keyframes grain{
  0%   { transform: translate(0, 0); }
  25%  { transform: translate(-2%, 1%); }
  50%  { transform: translate(1%, -2%); }
  75%  { transform: translate(-1%, 2%); }
  100% { transform: translate(0, 0); }
}

/* ────────── custom cursor ────────── */
.cursor{
  position: fixed;
  top: 0; left: 0;
  width: 6px; height: 6px;
  background: var(--ink);
  border-radius: 50%;
  pointer-events: none;
  z-index: 1000;
  transform: translate(-50%, -50%);
  transition: width .25s, height .25s;
  mix-blend-mode: difference;
}
.cursor-ring{
  position: fixed;
  top: 0; left: 0;
  width: 32px; height: 32px;
  border: 1px solid rgba(245,244,242,0.3);
  border-radius: 50%;
  pointer-events: none;
  z-index: 1000;
  transform: translate(-50%, -50%);
  transition: width .35s, height .35s, border-color .25s;
}
body.is-hover .cursor{ width: 1px; height: 1px; }
body.is-hover .cursor-ring{
  width: 64px; height: 64px;
  border-color: rgba(245,244,242,0.7);
}

@media (hover: none){
  .cursor, .cursor-ring{ display: none; }
  html, body{ cursor: auto; }
  button, a{ cursor: pointer; }
}

/* ────────── layout helpers ────────── */
.container{
  max-width: var(--container);
  margin: 0 auto;
  padding: 0 var(--gutter);
}

@media (max-width: 820px){
  .container{ padding: 0 var(--gutter-sm); }
}

/* prevent FOUC of reveal animations */
[data-reveal]{ opacity: 0; transform: translateY(15px); }
[data-reveal-up]{ opacity: 0; transform: translateY(20px); }