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

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

html {
  -webkit-text-size-adjust: 100%;
  background: var(--bg-color);
}

body {
  min-height: 100dvh;
  color: var(--text-color);
  font-family: var(--font-family);
  font-size: var(--font-size);
  line-height: var(--line-height);
  letter-spacing: var(--letter-spacing);
  -webkit-font-smoothing: antialiased;
}

/* ---- the surface --------------------------------------------------------- */

#surface {
  position: fixed;
  inset: 0;
  width: 100%;
  height: 100%;
  z-index: 0;
  pointer-events: none;
}

/* ---- layout -------------------------------------------------------------- */

/* Text lets clicks and touches fall through to the surface; only links catch them. */
main {
  position: relative;
  z-index: 1;
  pointer-events: none;
  min-height: 100dvh;
  padding: var(--container-padding);
  display: grid;
  grid-template-columns: minmax(0, var(--text-max-width)) 1fr auto;
  grid-template-rows: auto 1fr auto auto;
  grid-template-areas:
    "title  .  ."
    ".      .  ."
    "thesis .  ledger"
    "footer .  ledger";
  column-gap: var(--block-gap);
}

h1 {
  grid-area: title;
  font-size: var(--font-size-title);
  font-weight: 400;
  line-height: var(--line-height-title);
  letter-spacing: var(--letter-spacing-title);
}

.thesis {
  grid-area: thesis;
  max-width: var(--text-max-width);
}

.ledger {
  grid-area: ledger;
  align-self: end;
  font-size: var(--font-size-small);
}

footer {
  grid-area: footer;
  margin-top: var(--block-gap);
  font-size: var(--font-size-small);
}

/* ---- ledger -------------------------------------------------------------- */

.ledger dl {
  display: grid;
  grid-template-columns: auto auto;
  column-gap: 2em;
}

.ledger dt {
  color: var(--muted-color);
}

.ledger dd {
  text-align: right;
  font-variant-numeric: tabular-nums;
}

.ledger small {
  grid-column: 2;
  display: block;
  text-align: right;
  font-size: inherit;
  color: var(--faint-color);
}

/* ---- links --------------------------------------------------------------- */

a {
  pointer-events: auto;
  color: inherit;
  text-decoration: underline dotted var(--dotted-underline-color);
  text-decoration-thickness: 1.5px;
  text-underline-offset: 0.4em;
}

a:hover {
  color: var(--muted-color);
}

/* ---- phones and small screens ------------------------------------------- */

@media (max-width: 720px) {
  main {
    grid-template-columns: 1fr;
    /* The first screen belongs to the drawing and the title alone. */
    grid-template-rows: calc(100svh - 2 * var(--container-padding)) auto auto auto;
    grid-template-areas:
      "title"
      "thesis"
      "ledger"
      "footer";
    row-gap: var(--block-gap);
  }

  .ledger {
    align-self: start;
    justify-self: start;
  }

  .ledger dl {
    justify-content: start;
  }

  .ledger dd,
  .ledger small {
    text-align: left;
  }

  footer {
    margin-top: 0;
  }
}

@media (prefers-reduced-motion: reduce) {
  #surface {
    opacity: 0.6;
  }
}