:root{
  --ink:#11110f;
  --paper:#f0eee6;
  --blue:#74ACDF;
  --red:#ff3a19;
  --muted:#817e74;
  --mono:"DM Mono", monospace;
  --display:"Archivo Black", sans-serif;
  --serif:"Instrument Serif", serif;
}
@font-face{font-family:"SAIBA-45";src:url("../fonts/saiba/SAIBA-45.woff") format("woff"),url("../fonts/saiba/SAIBA-45.otf") format("opentype");font-display:swap}
@font-face{font-family:"SAIBA-45 Outline";src:url("../fonts/saiba/SAIBA-45-Outline.woff") format("woff"),url("../fonts/saiba/SAIBA-45-Outline.otf") format("opentype");font-display:swap}
@font-face{font-family:"Sefa";src:url("../fonts/sefa/Sefa.otf") format("opentype"),url("../fonts/sefa/Sefa.ttf") format("truetype");font-display:swap}
*{box-sizing:border-box}
html{scroll-behavior:smooth;background:var(--ink);scrollbar-width:thin;scrollbar-color:var(--sb-color,#74ACDF) transparent;overflow-x:clip}
::-webkit-scrollbar{width:6px;height:6px}
::-webkit-scrollbar-track{background:transparent}
::-webkit-scrollbar-thumb{background:var(--sb-color,#74ACDF);border-radius:99px}
main{overflow-x:clip}
@media(min-width:901px){
  html{scroll-snap-type:y mandatory}
  main>section{scroll-snap-align:start;scroll-snap-stop:always}
}
@media(max-width:900px){
  .grain{animation:none}
}
[data-animate].reset *{transition:none!important}
.is-off{content-visibility:hidden}
body{margin:0;background:var(--ink);color:var(--paper);font-family:Arial,Helvetica,sans-serif;overflow-x:hidden}
a{color:inherit;text-decoration:none}
button,input{font:inherit}
.serif{font-family:var(--serif)}
.mono,.section-label{font-family:var(--mono);letter-spacing:.06em;text-transform:uppercase}
.section-label{font-size:9px}
.grain{position:fixed;inset:-20%;z-index:9999;pointer-events:none;opacity:.18;mix-blend-mode:multiply;background-image:url("data:image/svg+xml,%3Csvg viewBox='0 0 180 180' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.95' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='.25'/%3E%3C/svg%3E");animation:grain .35s steps(2) infinite}
@keyframes grain{0%{transform:translate(0,0)}25%{transform:translate(1%,-1%)}50%{transform:translate(-1%,1%)}75%{transform:translate(1%,1%)}100%{transform:translate(0,0)}}
.cursor-stamp{position:fixed;z-index:9998;left:0;top:0;width:34px;height:34px;border:1px solid rgba(116,172,223,.7);color:var(--blue);display:grid;place-items:center;pointer-events:none;transform:translate(-50%,-50%);mix-blend-mode:difference;transition:width .2s,height .2s,border-radius .2s}
.cursor-stamp span{font:18px var(--mono)}

.topbar{position:fixed;z-index:1000;top:0;left:0;right:0;height:66px;padding:0 24px;display:grid;grid-template-columns:1fr auto 1fr;align-items:center;color:var(--paper);mix-blend-mode:difference}
.logo{display:flex;align-items:center;gap:10px;font:14px var(--mono);width:max-content}
.topbar-meta{font:10px var(--mono);opacity:.7}
.topbar nav{justify-self:end;display:flex;gap:22px;font:10px var(--mono)}
.topbar nav a:hover{text-decoration:line-through}