:root {
  --paper: #F2EFE7;
  --ink: #1C1B18;
  --ink-muted: #6F6A60;
  --serif: "Newsreader", Georgia, "Times New Roman", serif;
  --gutter: 1.5rem;
  --margin-left: clamp(var(--gutter), 13.9vw, 12.5rem);
}

body {
  margin: 0;
  background: var(--paper);
  color: var(--ink);
  font-family: var(--serif);
}

main {
  display: grid;
  align-content: center;
  justify-content: start;
  box-sizing: border-box;
  min-height: 100vh;
  min-height: 100dvh;
  padding: 0 var(--gutter) 0 var(--margin-left);
}

/* Raised 4% above true centre, where the eye reads centre. */
h1 {
  margin: 0;
  font-size: clamp(3.5rem, 13vw, 6rem);
  font-weight: 400;
  font-optical-sizing: auto;
  line-height: 1;
  letter-spacing: -0.025em;
  transform: translateY(-4vh);
}

h1 span {
  display: block;
  /* Gap between the lines equals this line's x-height. */
  margin-top: -0.14em;
  /* Aligns the curve of the C with the stem of the F, not its serif. */
  padding-left: 0.24em;
  font-size: 0.375em;
  letter-spacing: -0.01em;
  color: var(--ink-muted);
}