:root{
  --bg:#0d0a08;
  --ink:#f3ede3;
  --ink-dim:rgba(243,237,227,0.52);
  --ink-faint:rgba(243,237,227,0.28);
  --signal:#e8793e;
  --terra:#c1584a;
  --line:rgba(243,237,227,0.15);
}
*{ margin:0; padding:0; box-sizing:border-box; }
html,body{ height:100%; }
body{
  background:var(--bg);
  color:var(--ink);
  font-family:'Sora', sans-serif;
  font-weight:300;
  overflow:hidden;
}

canvas#net{
  position:fixed; inset:0;
  display:block;
}

.grain{
  position:fixed; inset:0;
  z-index:1;
  opacity:.05;
  mix-blend-mode:overlay;
  pointer-events:none;
  background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='120' height='120'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/></filter><rect width='100%25' height='100%25' filter='url(%23n)'/></svg>");
  background-size:160px 160px;
}

/* custom cursor */
@media (pointer:fine){
  body, a{ cursor:none; }
  .cursor-dot, .cursor-ring{
    position:fixed; top:0; left:0;
    pointer-events:none;
    z-index:50;
    transform:translate(-50%,-50%);
  }
  .cursor-dot{
    width:4px; height:4px;
    border-radius:50%;
    background:var(--ink);
  }
  .cursor-ring{
    width:26px; height:26px;
    border-radius:50%;
    border:1px solid var(--ink-faint);
    transition:width .2s ease, height .2s ease, border-color .2s ease;
  }
  .cursor-ring.hover{
    width:42px; height:42px;
    border-color:var(--terra);
  }
}

.stage{
  position:relative; z-index:5;
  height:100vh;
  display:flex; flex-direction:column;
}

.top{
  padding:36px 40px 18px;
  font-family:'IBM Plex Mono', monospace;
  font-size:12px;
  letter-spacing:.16em;
  text-transform:uppercase;
  color:var(--ink-dim);
  border-bottom:1px solid var(--line);
}

.center{
  flex:1;
  display:flex; flex-direction:column;
  align-items:center; justify-content:center;
  text-align:center;
  padding:0 24px;
  position:relative;
}
.center::before{
  content:'';
  position:absolute;
  top:50%; left:50%;
  width:640px; height:420px;
  transform:translate(-50%,-58%);
  background:radial-gradient(ellipse, rgba(232,121,62,0.14), transparent 70%);
  pointer-events:none;
  z-index:-1;
}

.eyebrow{
  font-family:'IBM Plex Mono', monospace;
  font-size:12px;
  letter-spacing:.24em;
  text-transform:uppercase;
  color:var(--terra);
  margin-bottom:28px;
}

h1{
  font-weight:500;
  font-size:clamp(2.4rem, 6.4vw, 4.4rem);
  letter-spacing:-.015em;
  line-height:1.08;
  max-width:15ch;
  color:var(--ink);
}
h1 em{
  font-style:normal;
  color:var(--signal);
}

.tagline{
  margin-top:22px;
  font-size:clamp(.98rem, 1.8vw, 1.08rem);
  color:var(--ink-dim);
  max-width:42ch;
  font-weight:300;
}

.arrival{
  margin-top:40px;
  display:flex; align-items:center; gap:14px;
  font-family:'IBM Plex Mono', monospace;
  font-size:12px;
  letter-spacing:.12em;
  text-transform:uppercase;
  color:var(--ink-dim);
}
.arrival .rule{ width:28px; height:1px; background:var(--line); }
.arrival strong{ color:var(--ink); font-weight:500; }

.foot{
  padding:0 24px 44px;
  text-align:center;
  font-size:13px;
}
.foot a{
  color:var(--ink-dim);
  text-decoration:none;
  border-bottom:1px solid transparent;
  padding-bottom:2px;
  transition:color .2s ease, border-color .2s ease;
}
.foot a:hover{ color:var(--ink); border-color:var(--ink-faint); }
.foot a:focus-visible{
  outline:1px solid var(--terra);
  outline-offset:6px;
  border-radius:2px;
  color:var(--ink);
}