@font-face {
  font-family: "Newsreader";
  src: url("fonts/newsreader.woff2") format("woff2");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

:root {
  --paper: #0f1c36;
  --ink: #f3f5f9;
  --words: #c8cfdc;
  --rule: #e0901a;
  color-scheme: dark;
}

*,
*::before,
*::after {
  box-sizing: border-box;
}

html,
body {
  margin: 0;
  height: 100%;
}

body {
  display: grid;
  place-items: center;
  min-height: 100dvh;
  padding: env(safe-area-inset-top, 0px) max(20px, env(safe-area-inset-right, 0px))
    env(safe-area-inset-bottom, 0px) max(20px, env(safe-area-inset-left, 0px));
  background: var(--paper);
  color: var(--words);
  font-family: "Newsreader", Georgia, "Times New Roman", serif;
}

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

.line {
  display: grid;
  align-items: baseline;
  width: 100%;
  margin: 0;
  font-size: min(5.6vw, 5.25rem);
  font-weight: 400;
  line-height: 1.3;
  letter-spacing: -0.01em;
}

.before,
.mark,
.after {
  white-space: nowrap;
}

.mark {
  position: relative;
  justify-self: center;
}

/* The wordmark stands at the exact centre; the words on either side hang from it. */
.line {
  grid-template-columns: 1fr auto 1fr;
}
.before {
  padding-right: 0.28em;
  text-align: right;
}
.after {
  padding-left: 0.52em;
}
.dot {
  position: absolute;
  top: 0;
  left: 100%;
}

/* On a phone held upright the sentence becomes three centred lines. Held on its side,
   it keeps the one line, which the font's width-based size lets fit. */
@media (max-width: 760px) and (orientation: portrait) {
  .line {
    font-size: max(2.4rem, 5.6vw);
    grid-template-columns: 1fr;
    row-gap: 0.15em;
    text-align: center;
  }
  .before,
  .after {
    padding: 0;
  }
}

.wordmark {
  display: inline-block;
  width: 2.979em;
  height: 1.118em;
  vertical-align: -0.409em;
  color: var(--ink);
}

.wordmark .rule {
  fill: var(--rule);
  transform-box: fill-box;
  transform-origin: left center;
}

@media (prefers-reduced-motion: no-preference) {
  .wordmark .rule {
    animation: draw-rule 700ms cubic-bezier(0.2, 0.7, 0.2, 1) 300ms both;
  }
  .wordmark .rule + .rule {
    animation-delay: 460ms;
  }
}

@keyframes draw-rule {
  from {
    transform: scaleX(0);
  }
  to {
    transform: scaleX(1);
  }
}

/* "Snart" winks to "Smart" now and then: the letter rolls like a counter. The strip
   n, m, n moves up behind a window the height of the letters, so the roll always goes the
   same way and starts again where it ended. "art." moves aside by the width "m" has
   more than "n", so the rest of the line stays put. */
.wink {
  position: relative;
  display: inline-block;
  clip-path: inset(0.3em -1em 0.4em);
}
.wink-width {
  visibility: hidden;
}
.wink-strip {
  position: absolute;
  top: 0;
  left: 0;
  text-align: left;
}
.wink-strip > span {
  display: block;
  height: 1.3em;
}
.wink-rest {
  display: inline-block;
}

@media (prefers-reduced-motion: no-preference) {
  .wink-strip,
  .wink-rest {
    animation: 4s cubic-bezier(0.3, 0, 0.2, 1) 1.2s infinite;
  }
  .wink-strip {
    animation-name: wink-roll;
  }
  .wink-rest {
    animation-name: wink-aside;
  }
}

/* "Snart" for 2.2 seconds, a roll of 0.35, "Smart" for 1.1, and a roll back to "Snart". */
@keyframes wink-roll {
  0%,
  55% {
    transform: none;
  }
  63.75%,
  91.25% {
    transform: translateY(-1.3em);
  }
  100% {
    transform: translateY(-2.6em);
  }
}
@keyframes wink-aside {
  0%,
  55% {
    transform: none;
  }
  63.75%,
  91.25% {
    transform: translateX(0.285em);
  }
  100% {
    transform: none;
  }
}