@font-face {
  font-family: "Roboto Mono";
  src: url("fonts/RobotoMono-Regular.woff2") format("woff2");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "Roboto Mono";
  src: url("fonts/RobotoMono-Bold.woff2") format("woff2");
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "Roboto Mono";
  src: url("fonts/RobotoMono-Italic.woff2") format("woff2");
  font-weight: 400;
  font-style: italic;
  font-display: swap;
}

:root {
  --color-bg:   #FFFFFF;
  --color-lens: #000000;

  --font-main: "Roboto Mono", ui-monospace, Menlo, Consolas, "Courier New", monospace;
  --size: 0.9375rem;
  --line: 1.4;

  --gap-entry:   1lh;
  --gap-section: 2lh;

  --text-width: 62ch;
  --page-left:  12vw;
  --gutter:     1.5rem;

  /* svh = % of the screen height with the browser bars shown. Unlike % or
     vh it doesn't change when mobile bars slide in and out while scrolling,
     so the circle stays still instead of jumping. */
  --lens-size:  min(88svh, 72vw);
  --lens-shift: 10%;
  --lens-top:   50svh;
}

@media (prefers-color-scheme: dark) {
  :root {
    --color-bg:   #000000;
    --color-lens: #FFFFFF;
  }
}

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

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

body {
  margin: 0;
  font-family: var(--font-main);
  font-size: var(--size);
  line-height: var(--line);
  /* macOS thickens light text; all text here is rendered white (for the
     inversion trick), so it looked bolder than intended. This turns that off. */
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

h1, h2, h3, p {
  margin: 0;
}

h1, h2, h3 {
  font-size: 1em;
  text-transform: uppercase;
}

a {
  color: inherit;
  text-decoration: none;
}

a:focus-visible {
  outline: 1px solid currentColor;
  outline-offset: 2px;
}

.lens {
  position: fixed;
  top: var(--lens-top);
  right: 0;
  width: var(--lens-size);
  aspect-ratio: 1;
  border-radius: 50%;
  background: var(--color-lens);
  transform: translate(var(--lens-shift), -50%);
  z-index: 0;
}

/* white text + "difference" = inverts over the circle */
.page {
  position: relative;
  z-index: 1;
  color: #FFFFFF;
  mix-blend-mode: difference;
  box-sizing: content-box;   /* max-width = text column only, without padding */
  max-width: var(--text-width);
  padding: 4rem var(--gutter) 4rem var(--page-left);
}

.intro {
  margin-top: var(--gap-entry);
}

.section {
  margin-top: var(--gap-section);
}

h2 {
  margin-bottom: 0.5lh;
}

.entry + .entry {
  margin-top: var(--gap-entry);
}

.wt {
  font-weight: 400;
}

@media (max-width: 40rem) {
  :root {
    --page-left:  var(--gutter);
    --lens-size:  min(110vw, 66svh);   /* 66svh: never cut off at the bottom */
    --lens-shift: 45%;
    --lens-top:   65svh;
  }

  .page {
    padding-top: 2.5rem;
  }
}

@media (orientation: landscape) and (max-height: 32rem) {
  :root {
    --lens-size:  120svh; 
    --lens-shift: 10%;
    --lens-top:   50svh;
  }
}

/* Forced-colors mode (Windows contrast themes, Firefox color override):
   drop the circle, the system sets the colors */
@media (forced-colors: active) {
  .lens {
    display: none;
  }
}

/* Reduce motion: the circle scrolls away with the page instead of staying
   fixed, so the text doesn't keep flipping color while scrolling */
@media (prefers-reduced-motion: reduce) {
  html {
    overflow-x: clip;   /* hides the part of the circle beyond the right edge */
  }

  .lens {
    position: absolute;
  }
}

/* Print: no circle, plain black text (browsers skip backgrounds when
   printing, which would otherwise leave white text on white paper) */
@media print {
  .lens {
    display: none;
  }

  .page {
    color: #000000;
    mix-blend-mode: normal;
  }
}