/* permasoftware assembly :: one small stylesheet
   Fonts: Handjet for the title only (its pixel elements give the glitch),
   Departure Mono (1-bit pixel) for everything else. Both SIL OFL, cut down
   to the characters of this site and hosted here (about 7 KB together).
   Pixel sizes are multiples of 11px (its grid), so the titles stay sharp. */
@font-face {
  font-family: "Handjet";
  src: url("fonts/handjet-title.woff2") format("woff2");   /* only the letters of the title, 1.5 KB */
  font-weight: 600;
  font-display: swap;
}
@font-face {
  font-family: "Departure Mono";
  src: url("fonts/departure-mono.woff2") format("woff2");
  font-display: swap;
}

:root {
  /* always black: on OLED screens black pixels use no power */
  color-scheme: dark;
  --ink: #e6e6e6;
  --paper: #000;
  --meta: #999;
  --hl: #1c1c1c;
  --mono: "Departure Mono", "Courier New", Menlo, Consolas, monospace;
}

* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; overflow-x: hidden; background: var(--paper); }
body {
  margin: 0 auto;
  padding: 24px 16px 40px;
  max-width: 72ch;
  font: 16.5px/1.6 var(--mono);
  color: var(--ink);
  background: var(--paper);
}
a { color: inherit; text-underline-offset: 3px; }
a:hover { background: var(--ink); color: var(--paper); }
img { display: block; width: 100%; height: auto; image-rendering: pixelated; margin: 14px 0; }

/* header :: big Handjet title */
h1.title {
  font: 600 clamp(44px, 15.5vw, 128px)/.86 "Handjet", var(--mono);
  letter-spacing: .02em; text-align: center; margin: 20px 0 14px;
}

/* glitch: thin 1px lines over and between the title letters (static, CSS only):
   light lines show in the gaps, black lines cut through the letters.
   Handjet sometimes draws such lines by accident; these are always there. */
h1.title { position: relative; }
h1.title::after {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background:
    linear-gradient(var(--ink), var(--ink)) 43% 5.2% / 19% 1px no-repeat,
    linear-gradient(var(--ink), var(--ink)) 48% 5.3% / 9% 1px no-repeat,
    linear-gradient(var(--paper), var(--paper)) 59% 5.9% / 7% 1px no-repeat,
    linear-gradient(var(--paper), var(--paper)) 10% 11.9% / 16% 1px no-repeat,
    linear-gradient(var(--ink), var(--ink)) 90% 12.4% / 15% 1px no-repeat,
    linear-gradient(var(--paper), var(--paper)) 16% 9.5% / 13% 1px no-repeat,
    linear-gradient(var(--ink), var(--ink)) 19% 16.2% / 6% 1px no-repeat,
    linear-gradient(var(--ink), var(--ink)) 42% 18.0% / 13% 1px no-repeat,
    linear-gradient(var(--paper), var(--paper)) 47% 17.5% / 12% 1px no-repeat,
    linear-gradient(var(--ink), var(--ink)) 92% 26.5% / 18% 1px no-repeat,
    linear-gradient(var(--paper), var(--paper)) 30% 24.2% / 10% 1px no-repeat,
    linear-gradient(var(--paper), var(--paper)) 71% 24.7% / 18% 1px no-repeat,
    linear-gradient(var(--paper), var(--paper)) 88% 34.0% / 6% 1px no-repeat,
    linear-gradient(var(--paper), var(--paper)) 84% 32.9% / 20% 1px no-repeat,
    linear-gradient(var(--paper), var(--paper)) 9% 33.4% / 17% 1px no-repeat,
    linear-gradient(var(--ink), var(--ink)) 10% 39.5% / 19% 1px no-repeat,
    linear-gradient(var(--paper), var(--paper)) 13% 39.2% / 7% 1px no-repeat,
    linear-gradient(var(--ink), var(--ink)) 74% 39.0% / 14% 1px no-repeat,
    linear-gradient(var(--ink), var(--ink)) 19% 46.7% / 8% 1px no-repeat,
    linear-gradient(var(--paper), var(--paper)) 12% 45.8% / 9% 1px no-repeat,
    linear-gradient(var(--ink), var(--ink)) 89% 46.9% / 10% 1px no-repeat,
    linear-gradient(var(--ink), var(--ink)) 30% 54.7% / 14% 1px no-repeat,
    linear-gradient(var(--paper), var(--paper)) 24% 56.5% / 7% 1px no-repeat,
    linear-gradient(var(--paper), var(--paper)) 61% 61.5% / 8% 1px no-repeat,
    linear-gradient(var(--ink), var(--ink)) 23% 62.2% / 8% 1px no-repeat,
    linear-gradient(var(--ink), var(--ink)) 39% 69.9% / 16% 1px no-repeat,
    linear-gradient(var(--paper), var(--paper)) 50% 71.1% / 7% 1px no-repeat,
    linear-gradient(var(--paper), var(--paper)) 69% 79.0% / 8% 1px no-repeat,
    linear-gradient(var(--ink), var(--ink)) 59% 79.3% / 7% 1px no-repeat,
    linear-gradient(var(--paper), var(--paper)) 67% 86.3% / 10% 1px no-repeat,
    linear-gradient(var(--ink), var(--ink)) 20% 87.4% / 8% 1px no-repeat,
    linear-gradient(var(--paper), var(--paper)) 32% 95.0% / 12% 1px no-repeat,
    linear-gradient(var(--paper), var(--paper)) 28% 94.7% / 6% 1px no-repeat;
}

.lang { text-align: right; font-size: 13px; color: var(--meta); margin: 0 0 12px; }
.lang a[aria-current] { color: var(--ink); text-decoration: none; }
.kicker { font: 22px/1.2 var(--mono); letter-spacing: .04em; margin: 18px 0 4px; }
.tagline { font: clamp(22px, 6vw, 33px)/1.2 var(--mono); margin: 0 0 10px; }
.bar { height: 6px; background: var(--ink); margin: 12px 0 16px; }
.lead { margin: 0 0 10px; }
.meta { color: var(--meta); font-size: 14px; }

/* sections :: big pixel heads */
h2 {
  font: clamp(22px, 7vw, 44px)/1.1 var(--mono);
  margin: 44px 0 14px;
  padding-bottom: 6px;
  border-bottom: 2px solid var(--ink);
}
h2::before { content: "// "; }
p { margin: 0 0 12px; }
/* Departure Mono has no bold: bold words are bigger and white instead.
   In the tree every bold name ends its line, so the columns stay aligned. */
b { font-weight: normal; font-size: 1.15em; line-height: 1; color: #fff; }
pre.tree b { font-size: 1.3em; }
footer b { font: inherit; }

ul.gt { list-style: none; padding: 0; margin: 0 0 12px; }
ul.gt li { padding-left: 2ch; text-indent: -2ch; margin-bottom: 6px; }
ul.gt li::before { content: "> "; }

/* projects :: map — ASCII tree. Narrow screens: one column of 48 characters.
   Wide screens: two columns of 50 characters, wider than the text column, never wider than the screen. */
.map { background: var(--paper); font-size: max(8.5px, min(15px, calc((100vw - 32px) / 33))); margin: 14px 0; }
pre.tree { font-family: var(--mono); font-size: inherit; line-height: 1.45; color: var(--ink); margin: 0; overflow: hidden; }
pre.tree .node, pre.tree .row, pre.tree .pad { display: block; }
.map .wide, .map .pad { display: none; }
@media (min-width: 760px) {
  .map { font-size: min(15px, calc((100vw - 48px) / 64.5)); width: 100ch; margin-left: calc(50% - 50ch); }
  .map .cols { display: grid; grid-template-columns: 50ch 50ch; }
  .map .wide, .map .pad { display: block; }
  .map .narrow { display: none; }
}

/* figures: inline svg uses currentColor */
figure { margin: 14px 0; overflow-x: auto; }
figure svg { display: block; width: 100%; min-width: 560px; height: auto; color: var(--ink); }
figcaption { color: var(--meta); font-size: 14px; margin-top: 4px; }
svg text { font-family: var(--mono); font-size: 11.5px; fill: currentColor; }
svg .soft { opacity: .55; }
svg .dash { stroke-dasharray: 4 3; }

footer {
  margin-top: 44px;
  padding-top: 8px;
  border-top: 1px solid var(--meta);
  color: var(--meta);
  font-size: 13px;
  text-align: center;
}

/* cursor marker: the block under the pointer gets a grey field and a bar in the margin */
@media (hover: hover) {
  main > section > p:hover, main li:hover, figure:hover {
    background: var(--hl);
    box-shadow: -10px 0 0 var(--hl), -14px 0 0 var(--ink);
  }
  pre.tree .node:hover { background: var(--hl); box-shadow: inset 4px 0 0 var(--ink); }
}