@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;
  /* The space at each side, wider where a phone on its side has its notch. */
  --gutter-left: max(20px, env(safe-area-inset-left, 0px));
  --gutter-right: max(20px, env(safe-area-inset-right, 0px));
  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) var(--gutter-right) env(safe-area-inset-bottom, 0px)
    var(--gutter-left);
  background: var(--paper);
  color: var(--words);
  font-family: "Newsreader", Georgia, "Times New Roman", serif;
}

main {
  width: 100%;
}

.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;
  /* The one line is 16em wide, so it also fits between the gutters. */
  font-size: min(5.6vw, 5.25rem, (100vw - var(--gutter-left) - var(--gutter-right)) / 16);
  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. The
   columns' widths come from the screen alone, never from the words: Safari on an iPhone
   keeps the words' width from before the phone was turned, and a column sized by it
   would then be too narrow and let "Årsrapporten," run into the wordmark. */
.line {
  grid-template-columns: minmax(0, 1fr) auto minmax(0, 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;
    text-align: center;
  }
}

.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;
  }
}