:root {
  color-scheme: light;
  font-family: Arial, Helvetica, sans-serif;
  background: #e9e9e6;
  color: #252524;
  font-synthesis: none;
}

* { box-sizing: border-box; }
body {
  margin: 0;
  background-image: url('/incl/images/paper-stains.svg');
  background-size: cover;
  background-position: center;
}
::selection { background: #252524; color: #e9e9e6; }
a { color: inherit; text-decoration: none; }
a:focus-visible { outline: 2px dashed currentColor; outline-offset: 7px; }

main {
  position: relative;
  isolation: isolate;
  min-height: 100svh;
  max-width: 1100px;
  margin: auto;
  padding: 1px 8% 64px;
}

.coffee-ring {
  position: absolute;
  z-index: -1;
  top: 9%;
  right: 3%;
  width: clamp(220px, 32vw, 370px);
  height: auto;
  transform: rotate(13deg) scaleX(.94);
  pointer-events: none;
  user-select: none;
}

h1 {
  width: fit-content;
  margin: clamp(120px, 22vh, 220px) 0 0 6%;
  font-size: clamp(42px, 5vw, 64px);
  font-weight: 700;
  line-height: 1;
  letter-spacing: -.065em;
  transform: rotate(-3deg);
}
h1 > span { display: block; width: fit-content; }
/* Uneven ink coverage, as though the stamp was running dry. */
@supports (background-clip: text) {
  h1 > span {
    background: linear-gradient(107deg, #252524 4%, #777773 19%, #30302e 32%, #858580 45%, #353533 57%, #252524 74%, #797975 88%, #333331);
    background-clip: text;
    color: transparent;
    mask-image: url('/incl/images/worn-ink.svg');
    mask-size: 240px 100px;
  }
  .last-name { background-position: 35px 0; mask-position: -47px -23px; }
}
.first-name { transform: rotate(1deg); }
.last-name {
  margin: 5px 0 0 28px;
  transform: rotate(5deg);
}
.full-stop { display: inline-block; transform: translate(4px, 3px); color: #888885; }

.email {
  position: relative;
  display: block;
  width: fit-content;
  margin: 35px 0 0 15%;
  padding: 8px 0;
  font: 14px/1.5 "Courier New", monospace;
  transform: rotate(-2deg);
}
.email::after {
  content: "";
  position: absolute;
  bottom: 5px;
  left: -2px;
  width: 104%;
  border-bottom: 1px solid #888885;
  transform: rotate(1deg);
}
.email:hover::after { border-color: currentColor; border-bottom-style: dashed; }

nav {
  width: 290px;
  max-width: 85%;
  margin: clamp(90px, 15vh, 160px) 6% 0 auto;
  transform: rotate(2deg);
}
nav a {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  min-height: 62px;
  padding: 14px 4px;
  font-size: 18px;
  letter-spacing: -.035em;
}
/* The rules missed their ruler. The links still have generous hit areas. */
nav a::after {
  content: "";
  position: absolute;
  bottom: 4px;
  left: -5px;
  width: 104%;
  height: 7px;
  border-bottom: 1px solid #777774;
  border-radius: 0 0 45% 18%;
  transform: rotate(-1.5deg);
  pointer-events: none;
}
nav a:nth-child(2) { margin-left: 14px; transform: rotate(-4deg); }
nav a:nth-child(2)::after { width: 94%; transform: rotate(1deg); }
nav a:nth-child(3) { margin-left: -8px; transform: rotate(-1deg); }
nav a:nth-child(3)::after { width: 108%; border-radius: 0 0 10% 40%; }
.arrow { display: inline-block; font: 23px/1 "Courier New", monospace; transform: rotate(9deg); }
nav a:nth-child(2) .arrow { transform: rotate(-15deg); }
nav a:hover span:first-child { text-decoration: underline; text-decoration-style: wavy; text-underline-offset: 5px; }
nav a:hover .arrow { transform: translate(3px, -3px) rotate(-8deg); }

@media (max-width: 600px) {
  main { padding: 1px 9% 48px; overflow: hidden; }
  .coffee-ring { width: 255px; top: 46px; right: -83px; opacity: .85; }
  h1 { margin: 145px 0 0 1%; font-size: 46px; }
  .email { margin-left: 8%; margin-top: 32px; }
  nav { margin: max(100px, 17vh) 4% 0 auto; width: 260px; max-width: 90%; }
  nav a { font-size: 17px; }
}
.flies {
  position: fixed;
  inset: 0;
  z-index: 10;
  pointer-events: none;
  overflow: hidden;
  opacity: 0;
  transition: opacity 600ms;
}
.flies.is-active { opacity: .8; }
.fly {
  position: absolute;
  top: 0;
  left: 0;
  width: 3px;
  height: 6px;
  border-radius: 45% 45% 40% 40%;
  background: #30302e;
  box-shadow: 0 -2px 0 -0.5px #30302e;
  will-change: transform;
}
.fly::before, .fly::after {
  content: "";
  position: absolute;
  top: 0;
  width: 4px;
  height: 6px;
  border: 1px solid #777772;
  background: #d1d1cb;
  border-radius: 70% 30% 60% 40%;
  opacity: .65;
  animation: wings 130ms ease-in-out infinite alternate paused;
}
.fly::before { right: 2px; transform-origin: right bottom; --wing-angle: -32deg; }
.fly::after { left: 2px; transform-origin: left bottom; --wing-angle: 32deg; }
.flies.is-active .fly::before, .flies.is-active .fly::after { animation-play-state: running; }
@keyframes wings {
  from { transform: rotate(var(--wing-angle)) scaleX(.6); }
  to { transform: rotate(var(--wing-angle)) scaleX(1); }
}

@media (prefers-reduced-motion: reduce) {
  nav a:hover .arrow { transform: none; }
  .flies { display: none; }
  .fly::before, .fly::after { animation: none; }
}

.error-message {
  max-width: 28ch;
  margin: 35px 0 0 8%;
  font: 16px/1.6 "Courier New", monospace;
  transform: rotate(-1deg);
}
.error-page h1 { font-size: clamp(80px, 11vw, 140px); }
.error-aside {
  width: fit-content;
  margin: 22px 0 0 11%;
  color: #646460;
  font: 13px/1.6 "Courier New", monospace;
  transform: rotate(2deg);
}