* {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

:root {
  --night: 30, 35, 41;
  --day: 244, 241, 234;
  --sky: var(--night);
  --ink: var(--day);
  --grid: repeat(12, minmax(0, 1fr));
  --gutter: 1rem;
}

html,
body {
  min-height: 100%;
}

html {
  background: rgb(var(--sky));
}

body {
  display: flex;
  flex-direction: column;
  min-height: 100vh;
  padding: 1rem;
  background: rgb(var(--sky));
  color: rgb(var(--ink));
  font-family: "Courier Prime", Courier, monospace;
  font-size: 12px;
  line-height: 1.45;
}

a {
  color: inherit;
  text-decoration: none;
}

a:hover {
  text-decoration: underline;
}

header,
.band,
footer {
  display: grid;
  grid-template-columns: var(--grid);
  column-gap: var(--gutter);
}

header {
  flex: none;
  align-items: start;
  min-height: 2.9em;
}

h1 {
  display: flex;
  grid-column: 1 / 4;
  align-items: flex-end;
  height: 1.45em;
  overflow: hidden;
  font-size: 12px;
  font-weight: 400;
}

.slot {
  display: block;
  width: 1ch;
  height: 1.45em;
  overflow: hidden;
}

.reel {
  display: flex;
  flex-direction: column;
  animation: mark-up 5.6s cubic-bezier(0.77, 0, 0.175, 1) infinite;
}

.reel b {
  display: block;
  height: 1.45em;
  font-weight: 400;
}

.colon {
  width: 1ch;
  line-height: 1.45em;
}

.d0 .reel {
  animation-delay: 0s;
}

.d1 .reel {
  animation-delay: 0.12s;
}

.d2 .reel {
  animation-delay: 0.24s;
}

.d3 .reel {
  animation-delay: 0.36s;
}

@keyframes mark-up {
  0%,
  22% {
    transform: translateY(0);
  }

  34%,
  66% {
    transform: translateY(-1.45em);
  }

  78%,
  100% {
    transform: translateY(-2.9em);
  }
}

.lead {
  grid-column: 5 / 9;
}

main {
  display: flex;
  flex: 1 0 auto;
  align-items: start;
  padding-top: calc(50dvh - 7.5rem);
}

.band {
  width: 100%;
  align-items: start;
}

.col {
  grid-column: 1 / 4;
}

.mid {
  grid-column: 5 / 9;
}

.rail {
  grid-column: 10 / 13;
  text-align: right;
}

footer {
  flex: none;
  align-items: end;
}

.who,
.lang {
  display: inline;
  padding: 0;
  border: 0;
  background: none;
  color: inherit;
  font: inherit;
  font-size: 12px;
  cursor: pointer;
}

.who,
.lang {
  text-decoration: underline;
  text-underline-offset: 0.2em;
}

.lang[aria-pressed="true"] {
  text-decoration: none;
  cursor: default;
}

.langs {
  grid-column: 5 / 9;
}

.profile {
  margin-top: 1.45em;
}

.profile[hidden] {
  display: none;
}

.upcoming {
  grid-column: 10 / 13;
  text-align: right;
}

@media (max-width: 40rem) {
  header,
  .band,
  footer {
    grid-template-columns: 1fr;
    row-gap: 1.45em;
  }

  h1,
  .lead,
  .col,
  .mid,
  .rail,
  .langs,
  .upcoming {
    grid-column: 1 / -1;
  }

  header {
    min-height: 0;
    align-items: start;
  }

  main {
    align-items: stretch;
    padding-top: 1.5rem;
  }

  .band {
    display: flex;
    flex-direction: column;
    gap: 1.5rem;
    align-items: stretch;
  }

  .mid {
    order: -1;
  }

  footer {
    grid-template-columns: 1fr 1fr;
    margin-top: auto;
    padding-top: 2rem;
  }

  .langs,
  .upcoming {
    grid-column: auto;
  }
}

@media (prefers-reduced-motion: reduce) {
  .reel {
    animation: none;
  }
}