:root {
  color-scheme: light;
  --paper: #fff;
  --ink: #161616;
  --signal: #2b3cff;
  color: var(--ink);
  background: var(--paper);
}

* {
  box-sizing: border-box;
}

body {
  margin: 0;
}

.sr {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}

/* --u is one wordmark pixel and --t one text pixel. Whole CSS pixels keep every square crisp. */
.page {
  --pad: clamp(24px, 3.5vw, 84px);
  --t: 3px;
  --u: clamp(8px, min((100vw - 2 * var(--pad)) / 72, (100svh - 220px) / 36), 32px);
  display: grid;
  grid-template-areas:
    "statement contact"
    ". ."
    "pixel pixel"
    "digits digits"
    ". .";
  grid-template-columns: minmax(0, 1fr) auto;
  grid-template-rows: auto minmax(32px, 1fr) auto auto minmax(0, 1fr);
  column-gap: 24px;
  min-height: 100vh;
  min-height: 100svh;
  max-width: 2400px;
  margin-inline: auto;
  padding: 40px var(--pad) 48px;
}

@supports (width: round(down, 10.5px, 1px)) {
  .page {
    --u: clamp(8px, round(down, min((100vw - 2 * var(--pad)) / 72, (100svh - 220px) / 36), 1px), 32px);
  }
}

.glyphs {
  display: flex;
  flex-wrap: wrap;
  gap: calc(3 * var(--t));
}

.glyphs svg {
  display: block;
  width: auto;
  height: calc(9 * var(--t));
}

.statement {
  grid-area: statement;
  display: flex;
  align-items: center;
  min-height: 44px;
  margin: 0;
}

/* Matches the contact underline space so both top-row texts share a baseline. */
.statement .glyphs {
  padding-bottom: calc(2 * var(--t));
}

.contact {
  grid-area: contact;
  align-self: start;
  justify-self: end;
  display: flex;
  align-items: center;
  min-height: 44px;
  color: inherit;
  text-decoration: none;
}

.contact .glyphs {
  padding-bottom: calc(2 * var(--t));
  background: linear-gradient(currentColor, currentColor) left bottom / 100% var(--t) no-repeat;
}

.contact:hover {
  color: var(--signal);
}

.contact:focus-visible {
  outline: 2px solid var(--ink);
  outline-offset: 6px;
}

.mark {
  display: block;
  width: auto;
  height: calc(16 * var(--u));
  overflow: visible;
  fill: var(--ink);
}

.mark-pixel {
  grid-area: pixel;
  margin-bottom: calc(4 * var(--u));
}

.mark-808 {
  grid-area: digits;
  justify-self: end;
}

::selection {
  color: var(--paper);
  background: var(--ink);
}

/* Page-load build: wordmark columns appear left to right, then the blue dot blinks into place like a cursor. */
@keyframes place {
  from {
    opacity: 0;
  }
}

@keyframes blink {
  50% {
    opacity: 0;
  }
}

.mark path {
  animation: place 1ms backwards;
}

.mark .d0 { animation-delay: 60ms; }
.mark .d1 { animation-delay: 96ms; }
.mark .d2 { animation-delay: 132ms; }
.mark .d3 { animation-delay: 168ms; }
.mark .d4 { animation-delay: 204ms; }
.mark .d5 { animation-delay: 240ms; }
.mark .d6 { animation-delay: 276ms; }
.mark .d7 { animation-delay: 312ms; }
.mark .d8 { animation-delay: 348ms; }
.mark .d9 { animation-delay: 384ms; }
.mark .d10 { animation-delay: 420ms; }
.mark .d11 { animation-delay: 456ms; }
.mark .d12 { animation-delay: 492ms; }
.mark .d13 { animation-delay: 528ms; }
.mark .d14 { animation-delay: 564ms; }
.mark .d15 { animation-delay: 600ms; }
.mark .d16 { animation-delay: 636ms; }
.mark .d17 { animation-delay: 672ms; }
.mark .d18 { animation-delay: 708ms; }
.mark .d19 { animation-delay: 744ms; }
.mark .d20 { animation-delay: 780ms; }
.mark .d21 { animation-delay: 816ms; }
.mark .d22 { animation-delay: 852ms; }
.mark .d23 { animation-delay: 888ms; }

.mark .dot {
  fill: var(--signal);
  animation: place 1ms 1100ms backwards, blink 240ms step-end 1100ms 2;
}

@media (min-width: 1600px) and (min-height: 860px) {
  .page {
    --t: 4px;
  }
}

/* Narrow and portrait screens stack the wordmark so it can use the full width. */
@media (max-width: 719px), (max-aspect-ratio: 5/6) {
  .page {
    --u: clamp(4px, (100vw - 2 * var(--pad)) / 53, 20px);
    grid-template-areas:
      "statement"
      "."
      "pixel"
      "digits"
      "."
      "contact";
    grid-template-columns: minmax(0, 1fr);
    grid-template-rows: auto minmax(48px, 1fr) auto auto minmax(48px, 1fr) auto;
    padding-block: 28px 24px;
  }

  @supports (width: round(down, 10.5px, 1px)) {
    .page {
      --u: clamp(4px, round(down, (100vw - 2 * var(--pad)) / 53, 1px), 20px);
    }
  }

  .mark-pixel {
    margin-bottom: calc(3 * var(--u));
  }

  .contact {
    justify-self: start;
  }
}

@media (max-width: 719px) {
  .page {
    --t: 2px;
  }
}

@media (prefers-reduced-motion: reduce) {
  .mark path,
  .mark .dot {
    animation: none;
  }
}