/* Fonts: Rag and Rag Narrow by Dennis Grauel, SIL Open Font License 1.1 (see fonts/OFL.txt).
   Browsers only download a style when the page uses it. */

/* Rag */
@font-face { font-family: "Rag"; src: url("fonts/Rag-Regular.woff2") format("woff2");    font-weight: 400; font-style: normal; font-display: swap; }
@font-face { font-family: "Rag"; src: url("fonts/Rag-Italic.woff2") format("woff2");     font-weight: 400; font-style: italic; font-display: swap; }
@font-face { font-family: "Rag"; src: url("fonts/Rag-Bold.woff2") format("woff2");       font-weight: 700; font-style: normal; font-display: swap; }
@font-face { font-family: "Rag"; src: url("fonts/Rag-BoldItalic.woff2") format("woff2"); font-weight: 700; font-style: italic; font-display: swap; }
@font-face { font-family: "Rag"; src: url("fonts/Rag-Black.woff2") format("woff2");      font-weight: 900; font-style: normal; font-display: swap; }

/* Rag Narrow */
@font-face { font-family: "Rag Narrow"; src: url("fonts/Rag-NarrowRegular.woff2") format("woff2"); font-weight: 400; font-style: normal; font-display: swap; }
@font-face { font-family: "Rag Narrow"; src: url("fonts/Rag-NarrowBlack.woff2") format("woff2");   font-weight: 900; font-style: normal; font-display: swap; }

/* Base */
html, body {
  margin: 0;
  height: 100%;
  background: #fff;
  color: #000;
}

body {
  font-family: "Rag", Arial, Helvetica, sans-serif;
  -webkit-font-smoothing: antialiased;
  padding: 2rem;
}

/* The sentence, top left */
.intro {
  margin: 0;
  max-width: 24ch;
  font-size: clamp(1.5rem, 3.2vw, 2.4rem);
  line-height: 1.2;
  font-weight: 400;
}

.nowrap {
  white-space: nowrap;
}

/* Heron, bottom left */
.logo {
  position: fixed;
  left: 2rem;
  bottom: 2rem;
  width: 56px;
  height: auto;
}