*{margin:0;padding:0;box-sizing:border-box}
html{font-size:clamp(14px,1.2vw,20px);scroll-behavior:smooth}
:root{
  --bg:#0b0b0b;
  --surface:rgba(255,255,255,.015);
  --surface-hover:rgba(255,255,255,.03);
  --border:rgba(255,255,255,.04);
  --border-hover:rgba(255,255,255,.08);
  --text:#b0b0b0;
  --text-dim:#555;
  --pad:6vw
}
body{
  background:var(--bg);
  color:#c4c4c4;
  font-family:"Space Grotesk","IBM Plex Sans JP",sans-serif;
  font-weight:300;
  line-height:1.7;
  -webkit-font-smoothing:antialiased;
  min-height:100vh;
  overflow-x:hidden;
  letter-spacing:.02em
}
::selection{background:#3a3a3a;color:#e0e0e0}

/* global faded grain */
body::before{
  content:'';position:fixed;inset:0;pointer-events:none;z-index:9999;
  opacity:.035;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='200' height='200'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.75' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  mix-blend-mode:overlay
}

a{color:#a0a0a0;text-decoration:none;border-bottom:1px solid #2a2a2a;transition:border .25s}
a:hover{border-color:#888}