Mordant - Samin Sami

by Samin Sami

HTML

<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>MORDANT — Vault of Unmixable Pigments</title>
<meta name="description" content="The Mordant Vault guards colours that refuse to blend. Float them on water. Comb them. Never, under any circumstance, stir.">
<meta property="og:title" content="MORDANT — Vault of Unmixable Pigments">
<meta property="og:description" content="A containment archive for colours that curdle, spread, and swallow. Marbling is the protocol. The bath is open.">
<meta property="og:type" content="website">
<link rel="icon" href="data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 64 64'%3E%3Crect width='64' height='64' rx='12' fill='%232a2722'/%3E%3Ccircle cx='32' cy='32' r='17' fill='%23b4471f'/%3E%3Ccircle cx='32' cy='32' r='11' fill='%23274d8f'/%3E%3Ccircle cx='32' cy='32' r='5.5' fill='%23a91f3c'/%3E%3C/svg%3E">
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=IM+Fell+English:ital@0;1&family=IM+Fell+English+SC&family=IBM+Plex+Mono:ital,wght@0,400;0,500;1,400&display=swap" rel="stylesheet">
<style>
:root{
  --stone:#26231e;
  --stone-2:#2e2a24;
  --stone-3:#3a352d;
  --ink:#e8ded0;
  --ink-dim:#a89c88;
  --ink-faint:#6f6555;
  --ochre:#c9821f;
  --lapis:#2b57b0;
  --coch:#b81f45;
  --verd:#2e7d4f;
  --void:#0c0b0a;
  --rule:#4a4438;
  --pill:rgba(24,22,18,.62);
  --serif:"IM Fell English",serif;
  --sc:"IM Fell English SC",serif;
  --mono:"IBM Plex Mono",monospace;
}
*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth}
@media (prefers-reduced-motion: reduce){html{scroll-behavior:auto}}
body{
  background:var(--stone);
  color:var(--ink);
  font-family:var(--serif);
  font-variant-ligatures:none;
  -webkit-font-smoothing:antialiased;
 ...