/* Shared by every page drawn with dither.js. Pages lay their text out as usual here, but it's
   transparent: dither.js paints it onto the canvas behind */
@font-face {
  font-family: "IBM Plex Mono";
  font-style: italic;
  src: url("fonts/IBMPlex/IBMPlexMono-Italic.otf") format("opentype");
}
@font-face {
  font-family: "IBM Plex Mono";
  font-style: normal;
  src: url("fonts/IBMPlex/IBMPlexMono-Regular.otf") format("opentype");
}
/* Keep in step with THEMES in dither.js */
:root { --ink: #111; --paper: #ece8dc; }
@media (prefers-color-scheme: dark) {
  :root { --ink: #d6d0c0; --paper: #161513; }
}
html {
  background: var(--paper);
}
body {
  margin: 0;
  padding: 32px 48px 96px;
  color: transparent;
  font: italic 22px/1.6 "IBM Plex Mono", ui-monospace, monospace;
}
::selection {
  background: var(--ink);
  color: var(--paper);
}
#dither {
  position: fixed;
  inset: 0;
  width: 100%;
  height: 100%;
  image-rendering: pixelated;
  pointer-events: none;
}
nav, main {
  position: relative;
}
a {
  color: inherit;
  text-decoration: none;
  outline: none;
}
/* Pages have a centered heading over a centered column of text */
h1 {
  margin: 40px 0 0;
  text-align: center;
  /* 15vw keeps "photography" inside a phone screen */
  font: 800 clamp(48px, 15vw, 200px)/1 Fraunces, serif;
  /* Room for the tails of g, p and y, which hang below the line box */
  padding-bottom: 0.2em;
}
p {
  margin: 1em 0 0;
}
main > p {
  max-width: 34em;
  margin-left: auto;
  margin-right: auto;
}
/* Text for reading: the real text in solid ink, with nothing from dither.js under it */
.prose {
  max-width: 36em;
  margin: 2.5em auto 0;
  color: var(--ink);
  font: 18px/1.75 "IBM Plex Mono", ui-monospace, monospace;
}
.prose a {
  text-decoration: underline;
  text-underline-offset: 0.2em;
}
.prose a:hover,
.prose a:focus-visible {
  background: var(--ink);
  color: var(--paper);
  text-decoration: none;
}
/* An album's line of where and when, solid like prose: dithered at this size, under the title's glow,
   it was hard to read. Inline-block so it's only as wide as its text, which keeps the plain patch dither.js
   clears behind prose from running across the page */
.meta.prose {
  display: inline-block;
  max-width: none;
  margin: 0;
  font-style: italic;
  font-size: 16px;
}
/* A photo, dithered by photos.js; hover or tap shows the real one */
.photo {
  position: relative;
  margin: 0;
  overflow: hidden;
  background: var(--ink);
}
.photo img,
.photo canvas {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.photo video {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.photo canvas {
  position: absolute;
  inset: 0;
  image-rendering: pixelated;
  /* After the mouse leaves, the color stays a couple of seconds, then the dither slowly comes back */
  transition: opacity 1.5s ease-in 2s;
}
.photo:not(.dithered) img {
  opacity: 0;
}
.photo:hover canvas,
.photo.open canvas {
  opacity: 0;
  transition: opacity 0.4s;
}
@media (max-width: 640px) {
  body {
    padding: 20px 20px 64px;
    font-size: 17px;
  }
  .prose {
    font-size: 16px;
  }
}