*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth}
body{
  background:var(--paper);color:var(--ink);
  font-family:var(--ff-body);line-height:1.6;
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
}
img{max-width:100%;display:block}
a{color:inherit;text-decoration:none}
.wrap{max-width:var(--maxw);margin:0 auto;padding:0 var(--gut)}

/* scroll progress */
.progress{
  position:fixed;top:0;left:0;height:5px;width:0;z-index:50;
  background:var(--red);box-shadow:0 1px 0 var(--ink);
}

/* nav */
.nav{
  position:sticky;top:0;z-index:40;
  display:flex;align-items:center;justify-content:space-between;
  padding:14px var(--gut);
  background:var(--paper);
  border-bottom:var(--border);
}
.nav__brand{
  display:grid;place-items:center;width:44px;height:44px;
  border:3px solid var(--ink);background:var(--paper);color:var(--ink);
  box-shadow:4px 4px 0 var(--red);transform:rotate(-2deg);
  transition:transform .15s var(--snap),box-shadow .15s,background .2s,color .2s;
}
.nav__brand{font-family:var(--ff-display);font-size:1.15rem;letter-spacing:.02em}
.nav__brand:hover{transform:rotate(0) translate(-2px,-2px);box-shadow:6px 6px 0 var(--ink);background:var(--red);color:var(--paper)}
.nav__links{display:flex;align-items:center;gap:26px}
.nav__links a{font-weight:700;font-size:.92rem;text-transform:uppercase;letter-spacing:.06em;position:relative}
.nav__or{
  font-size:1.05rem;font-weight:800;font-style:italic;
  color:var(--red);margin:0 -8px;
  display:inline-block;transform:rotate(-6deg);
}
.nav__links a:not(.nav__cta)::after{
  content:"";position:absolute;left:0;bottom:-4px;height:3px;width:0;background:var(--red);transition:width .25s var(--ease);
}
.nav__links a:not(.nav__cta):hover::after{width:100%}
.nav__cta{
  background:var(--red);color:var(--paper)!important;border:3px solid var(--ink);
  padding:8px 18px;box-shadow:4px 4px 0 var(--ink);transition:transform .15s var(--snap),box-shadow .15s;
}
.nav__cta:hover{transform:translate(-2px,-2px);box-shadow:6px 6px 0 var(--ink)}
.nav__toggle{display:none;background:none;border:0;color:var(--ink);font-size:1.7rem;cursor:pointer}

/* buttons */
.btn{
  display:inline-block;padding:15px 28px;font-weight:800;font-size:1rem;
  text-transform:uppercase;letter-spacing:.05em;border:var(--border);
  transition:transform .15s var(--snap),box-shadow .15s,background .2s,color .2s;
}
.btn--ink{background:var(--ink);color:var(--paper);box-shadow:6px 6px 0 var(--red)}
.btn--ink:hover{transform:translate(-3px,-3px);box-shadow:9px 9px 0 var(--red)}
.btn--ghost{background:var(--paper);color:var(--ink);box-shadow:6px 6px 0 var(--ink)}
.btn--ghost:hover{transform:translate(-3px,-3px);box-shadow:9px 9px 0 var(--ink);background:var(--paper-2)}

.footer{
  padding:34px var(--gut);font-family:var(--ff-comic);letter-spacing:.08em;
  border-top:var(--border);text-align:center;font-size:1rem;
}

@media(max-width:760px){
  .nav__links{
    position:absolute;top:100%;left:0;right:0;
    flex-direction:column;align-items:flex-start;gap:18px;
    padding:22px var(--gut);background:var(--paper);border-bottom:var(--border);
    display:none;
  }
  .nav__links.open{display:flex}
  .nav__toggle{display:block}
}
@media(prefers-reduced-motion:reduce){
  *{animation:none!important;transition:none!important;scroll-behavior:auto}
}