/* Base element styles and page layout */
[hidden]{display:none!important}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{margin:0;background:var(--bg);color:var(--ink);font:16px/1.55 var(--font);-webkit-font-smoothing:antialiased;overflow-x:hidden;padding-inline:16px}
a{color:inherit}
h1,h2,h3{margin:0;text-wrap:balance;letter-spacing:-.025em}
p{margin:0}

/* ---------- colourful ambient backdrop ---------- */
.backdrop{position:fixed;inset:0;z-index:-1;overflow:hidden;pointer-events:none}
.blob{position:absolute;border-radius:50%;filter:blur(60px);opacity:var(--blob-opacity);mix-blend-mode:normal;will-change:transform}
.blob.a{width:46vmax;height:46vmax;background:radial-gradient(circle at 30% 30%,var(--b1),transparent 65%);top:-12vmax;left:-10vmax;animation:drift1 26s ease-in-out infinite alternate}
.blob.b{width:40vmax;height:40vmax;background:radial-gradient(circle at 60% 40%,var(--b3),transparent 65%);top:-6vmax;right:-12vmax;animation:drift2 30s ease-in-out infinite alternate}
.blob.c{width:38vmax;height:38vmax;background:radial-gradient(circle,var(--b4),transparent 65%);top:38vh;left:22vw;animation:drift3 34s ease-in-out infinite alternate}
.blob.d{width:34vmax;height:34vmax;background:radial-gradient(circle,var(--b2),transparent 65%);bottom:-10vmax;right:4vw;animation:drift1 28s ease-in-out infinite alternate-reverse}
.blob.e{width:28vmax;height:28vmax;background:radial-gradient(circle,var(--b5),transparent 65%);bottom:6vh;left:-8vmax;animation:drift2 32s ease-in-out infinite alternate-reverse}
.blob.f{width:22vmax;height:22vmax;background:radial-gradient(circle,var(--b6),transparent 65%);top:18vh;right:26vw;animation:drift3 24s ease-in-out infinite alternate}
@keyframes drift1{to{transform:translate(8vw,10vh) scale(1.12)}}
@keyframes drift2{to{transform:translate(-10vw,8vh) scale(.92)}}
@keyframes drift3{to{transform:translate(6vw,-8vh) scale(1.08)}}
.grain{position:absolute;inset:0;opacity:.06;background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='160' height='160'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/></filter><rect width='100%' height='100%' filter='url(%23n)'/></svg>")}