@font-face {
  font-family: 'Altar Gothic';
  src: url('assets/altar-gothic-demo.otf') format('opentype');
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}
:root {
  color-scheme: light;
  --paper: #fafaff;
  --ink: #292929;
  --heading-ink: #292929;
  --nav-ink: #404040;
  --pen: #4930f4;
  --selection: #acd6ff;
  --selection-ink: #081525;
  --favicon-color: #3e24ef;
  --page-gutter: 24px;
}
@font-face {
  font-family: 'Octagen';
  src: url('assets/octagen-roman.ttf') format('truetype');
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}
* { box-sizing: border-box; }
body {
  position: relative;
  min-height: 100vh;
  margin: 0;
  padding-top: var(--page-y, 1.65rem);
  background: var(--paper);
  color: var(--ink);
  font: 400 1.25rem/1.5 'Octagen', Arial, sans-serif;
}
.page {
  --page-width: min(38rem, calc(100% - var(--page-gutter) * 2));
  position: relative;
  z-index: 1;
  width: var(--page-width);
  margin: 0;
  /* Stay inside the window even before the resize handler has run. */
  margin-left: clamp(var(--page-gutter), var(--page-x, var(--page-gutter)), calc(100% - var(--page-width) - var(--page-gutter)));
  padding: 0 0 3rem;
  overflow-wrap: anywhere;
}
header { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 1.5rem; }
h1 { margin: 0; color: var(--heading-ink); font: 400 clamp(1.9rem, 5.7vw, 2.6rem)/1.2 'Altar Gothic', Georgia, serif; }
nav { display: flex; flex-wrap: wrap; gap: .6rem; font-size: 1rem; }
nav a { color: var(--nav-ink); text-decoration: none; }
main { margin-top: 3.15rem; }
p { margin: 0 0 1.65rem; }
.numerals { font-family: Arial, sans-serif; font-size: .9em; }
a { color: inherit; text-decoration: none; }
a:hover { color: var(--pen); }
a:focus-visible { outline: 2px solid var(--pen); outline-offset: 5px; }
::selection { background: var(--selection); color: var(--selection-ink); }
@media (max-width: 560px) {
  :root { --page-gutter: 16px; }
  header { flex-wrap: wrap; gap: 1.1rem; }
  nav { gap: .85rem; }
  main { margin-top: 2.2rem; }
  body { font-size: 1.1875rem; }
  p { margin-bottom: 1.5rem; }
}