@font-face { font-family: "Berkeley Mono Micah"; src: url("/assets/BerkeleyMonoMicah-Regular.63b2c9c7ff3f8441.woff2") format("woff2"); font-weight: 400; font-style: normal; font-display: swap; }
@font-face { font-family: "Berkeley Mono Micah"; src: url("/assets/BerkeleyMonoMicah-Bold.3d44fe70b7959830.woff2") format("woff2"); font-weight: 700; font-style: normal; font-display: swap; }
@font-face { font-family: "Berkeley Mono Micah"; src: url("/assets/BerkeleyMonoMicah-Oblique.555f4ec71f36b708.woff2") format("woff2"); font-weight: 400; font-style: oblique; font-display: swap; }
/* keawe.net. Values come from the Micah style manual, edition 1.0:
   paper and ink (03.01), Berkeley Mono Micah with Menlo as the named fallback (03.02),
   16/24 reading text and 12/20 supporting text (03.03), space as the separator (04.01),
   links (07.01), focus and selection (07.02).
   The window is a sheet of paper. The words stand at its left with the seal right above them;
   an ohia lehua, drawn in type by ohia.js, stands at its right. See README.md, "design record",
   for what this sheet does that the manual does not. */

:root {
  --ink: #0F0F0F;
  --paper: #FFFFFF;
  /* The seal's red: for the blossoms of the seal's own flower and the line under the list, and nothing else. */
  --seal-red: #BC0005;
  /* Two tints of the ink for the tree, so the words stay in front of it. */
  --wood: #878787;
  --leaf: #B7B7B7;
  /* The manual defines paper and ink only, so the page is not handed to an automatic dark theme. */
  color-scheme: only light;
}

* { box-sizing: border-box; }

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

body {
  position: relative;
  margin: 0;
  font: 400 16px/24px "Berkeley Mono Micah", Menlo, monospace;
}

::selection { background: var(--ink); color: var(--paper); }

a {
  color: inherit;
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 3px;
}
a:hover { font-style: oblique; }
a:focus-visible {
  outline: 2px solid var(--ink);
  outline-offset: 0;
  background: var(--ink);
  color: var(--paper);
}

h1, p, ul, pre { margin: 0; padding: 0; }
h1 { font: inherit; font-weight: 700; }
ul { list-style: none; }
.small { font-size: 12px; line-height: 20px; }

/* ------------------------------------------------------------------ words */

/* The words stand at the left of the sheet, a little above its middle. On a very wide window
   the whole picture, words and tree, stays 1440 across and is centred. */
.sheet {
  position: relative;
  z-index: 1;
  width: min(60ch, 100% - 48px);
  min-height: 100vh;
  min-height: 100svh;
  margin-left: max(24px, calc((100% - min(100%, 1440px)) / 2 + min(9%, 130px)));
  padding: clamp(28px, 7vh, 72px) 0 clamp(72px, 19vh, 200px);
  display: flex;
  flex-direction: column;
  justify-content: center;
}

/* The seal sits right above the name, small. It is a bitmap shown one pixel to the bit,
   so it keeps the grain of the type beside it. */
.seal {
  display: block;
  width: 90px;
  height: 90px;
  margin: 0 0 24px -1px;
  image-rendering: pixelated;
  user-select: none;
  -webkit-user-select: none;
}

h1 { margin-bottom: 24px; }

/* A line is kept whole wherever it fits. Where it cannot, it breaks between its parts,
   the lead-in and then the name under it, and never inside one (04.03). */
.lines span, .bio span { white-space: nowrap; }

/* Who he is, as distinct from what he is doing, stands apart from the list:
   after a break, as its own sentence, in the red of the seal and of the lehua. */
.bio, .back { margin-top: 48px; }
.bio { color: var(--seal-red); }

/* ------------------------------------------------------------------- tree */

/* The tree is drawn on the whole sheet, behind the words, in lighter ink. ohia.js fills it with
   one row of characters to a line, and unhides it when it has something to draw. Where the tree
   passes behind the words it goes on, faint, so the words stand in front of it and not in a hole. */
.grove {
  position: absolute;
  inset: 0;
  z-index: 0;
  overflow: hidden;
  font: 400 12px/14px "Berkeley Mono Micah", Menlo, monospace;
  white-space: pre;
  color: var(--wood);
  pointer-events: none;
  user-select: none;
  -webkit-user-select: none;
}
.grove[hidden] { display: none; }
.grove > div { height: 14px; }
.grove i, .grove em { font-style: normal; color: var(--leaf); }
.grove b, .grove strong { font-weight: 400; color: var(--seal-red); }
.grove s { text-decoration: none; }
.grove s, .grove em, .grove strong { opacity: .18; }

/* ----------------------------------------------------------- narrow sheet */

/* On a phone the words cannot stand beside the tree, so they stand at its foot:
   the crown above them at full strength, the last line just over the lava. */
@media (max-width: 639px) {
  .sheet { justify-content: flex-end; padding-bottom: 88px; }
}
/* Narrower than any line's parts, let them break where they must. */
@media (max-width: 319px) {
  .lines span, .bio span { white-space: normal; }
}