/* ==== Reset ==== */
*, *::before, *::after { box-sizing: border-box; }
* { margin: 0; padding: 0; }
html { scroll-behavior: auto; -webkit-text-size-adjust: 100%; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; }
body {
  font-family: var(--font-sans);
  font-size: var(--fs-body);
  line-height: 1.55;
  color: var(--ink);
  background: var(--paper);
  text-rendering: optimizeLegibility;
  overflow-x: hidden;
}
img, svg, video { display: block; max-width: 100%; }
img { height: auto; }
button { font: inherit; color: inherit; background: none; border: 0; cursor: pointer; }
a { color: inherit; text-decoration: none; }
ul { list-style: none; }
input, textarea, select { font: inherit; color: inherit; }

/* ==== Type ==== */
h1, h2, h3, h4 {
  font-family: var(--font-display);
  font-weight: 600;
  letter-spacing: -0.02em;
  line-height: 1;
}
h1 { font-size: var(--fs-hero); letter-spacing: -0.035em; line-height: 0.92; }
h2 { font-size: var(--fs-h2); }
h3 { font-size: var(--fs-h3); letter-spacing: -0.015em; }
h4 { font-size: 14px; letter-spacing: 0.02em; text-transform: uppercase; font-family: var(--font-mono); font-weight: 500; }
em { font-style: italic; font-weight: 400; }
p { max-width: 60ch; }

.mono {
  font-family: var(--font-mono);
  font-size: var(--fs-mono);
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--mute);
  font-weight: 500;
}

/* ==== Selection ==== */
::selection { background: var(--accent); color: var(--ink); }

/* ==== Focus ==== */
:focus-visible { outline: 2px solid var(--ink); outline-offset: 3px; }

/* ==== Custom cursor suppression ==== */
@media (hover: hover) and (pointer: fine) {
  html.has-custom-cursor,
  html.has-custom-cursor * { cursor: none !important; }
}

/* ==== Grain ==== */
.grain {
  position: fixed;
  top: -50%; left: -50%;
  width: 200%; height: 200%;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='300' height='300'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.72' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='300' height='300' filter='url(%23n)'/%3E%3C/svg%3E");
  background-size: 200px 200px;
  opacity: 0.038;
  pointer-events: none;
  z-index: 998;
  animation: grain 0.7s steps(2) infinite;
  will-change: transform;
}

/* ==== Live dot ==== */
.dot-live {
  display: inline-block;
  width: 6px; height: 6px;
  background: var(--accent);
  border-radius: 50%;
  animation: pulse 2s ease-in-out infinite;
  vertical-align: middle;
  margin-left: 2px;
}

/* ==== Clip-wrap reveal ==== */
.clip-wrap {
  display: inline-block;
  overflow: hidden;
  vertical-align: bottom;
}
.clip-wrap > * { display: inline-block; }