:root {
  --ink: #111820;
  --steel: #162632;
  --void: #0c1218;
  --orange: #f36c21;
  --orange-hot: #ff7a2e;
  --on-orange: #1a0d05;
  --concrete: #52616b;
  --bone: #f3f1ea;
  --white: #fff;
  --line: rgb(243 241 234 / 0.12);
  --r: 8px;
  --max: 1120px;
  --display: "Inter Tight", ui-sans-serif, system-ui, sans-serif;
  --body: "Inter", ui-sans-serif, system-ui, sans-serif;
  --mono: "IBM Plex Mono", ui-monospace, monospace;
}
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html { scroll-behavior: smooth; }
img { display: block; max-width: 100%; }
a { color: inherit; text-decoration: none; }
button, .btn { font-family: inherit; cursor: pointer; }
:focus-visible { outline: 2px solid var(--orange); outline-offset: 3px; }
.wrap { width: min(var(--max), calc(100% - 40px)); margin-inline: auto; }
.eyebrow {
  font-size: 11px; font-weight: 700; letter-spacing: 0.18em;
  text-transform: uppercase; color: var(--orange);
}
.stamp {
  position: absolute; z-index: 8; left: 20px; bottom: 16px;
  font: 700 10px/1 var(--mono); letter-spacing: 0.14em; text-transform: uppercase;
  color: var(--orange); border: 1px solid rgb(243 108 33 / 0.4);
  padding: 6px 10px; border-radius: 4px; background: rgb(17 24 32 / 0.55);
}
.grain, .grain-page {
  position: relative;
}
.grain::after, .grain-page::before {
  content: ""; pointer-events: none; position: absolute; inset: 0; z-index: 6;
  opacity: 0.11; mix-blend-mode: overlay;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='180' height='180'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='4' stitchTiles='stitch'/><feColorMatrix values='0 0 0 0 0.07  0 0 0 0 0.09  0 0 0 0 0.11  0 0 0 0.55 0'/></filter><rect width='100%' height='100%' filter='url(%23n)'/></svg>");
}
.grain-page::before { position: fixed; z-index: 40; opacity: 0.07; mix-blend-mode: multiply; }
@media (prefers-reduced-motion: reduce) {
  * { transition: none !important; animation: none !important; }
}