/* IBM Plex, latin subset, self-hosted; copied from the blog.sigi.net
   sigi1 theme and trimmed to the two faces this landing page uses:
   Plex Sans sets the bio text, Plex Mono the title and links. woff2
   only, as in sigi1. */

/* IBM Plex Sans - bio */
@font-face {
  font-display: swap;
  font-family: 'IBM Plex Sans';
  font-style: normal;
  font-weight: 400;
  src: url('../fonts/ibm-plex-sans-latin-400-normal.woff2') format('woff2');
}

/* IBM Plex Mono - title and links */
@font-face {
  font-display: swap;
  font-family: 'IBM Plex Mono';
  font-style: normal;
  font-weight: 600;
  src: url('../fonts/ibm-plex-mono-latin-600-normal.woff2') format('woff2');
}
/* Single-viewport landing page. Shares its vocabulary with the
   blog.sigi.net sigi1 theme - IBM Plex, the green accent, the mosaic
   tile palette in squares.css - but none of the blog's page chrome. */
:root {
  --maincolor: #276749;
  --ink: #232333;
  --font-sans: 'IBM Plex Sans', system-ui, -apple-system, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
  --font-mono: 'IBM Plex Mono', ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
}
html {
  color: var(--ink);
  font-family: var(--font-sans);
  font-size: 17px;
  line-height: 1.65;
}
body {
  /* Full-height flex column so the mosaic strips in squares.css hug
     the viewport edges and the content centers between them. svh
     rather than vh where supported, for the reasons documented in the
     sigi1 theme. */
  display: flex;
  flex-direction: column;
  min-height: 100vh;
  min-height: 100svh;
  margin: 0;
  background: #fff;
}
* {
  -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
}

::selection {
  background: var(--maincolor);
  color: #fff;
}

main {
  flex-grow: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 2rem 1.25rem;
}

/* Logo beside the text on wide screens; the phone media query below
   stacks the columns. */
.cols {
  display: flex;
  align-items: center;
  gap: 3rem;
}

.logo {
  /* Native size; the source is 240px and scaling by non-integer
     factors would render the squares unevenly on 1x screens. */
  width: 240px;
  height: 240px;
  image-rendering: pixelated;
}

h1 {
  font-family: var(--font-mono);
  font-size: 1.5rem;
  font-weight: 600;
  letter-spacing: 0.04em;
  margin: 0;
}

/* 404 page: oversized status code with the reason phrase below it. */
h1.jumbo {
  font-size: 4rem;
  line-height: 1;
}
.sub {
  font-family: var(--font-mono);
  font-size: 1.25rem;
  font-weight: 600;
  margin: 0.5rem 0 0;
}

.bio {
  max-width: 32em;
  margin: 0.75rem 0 0;
}
.bio a {
  color: inherit;
  text-decoration: underline;
  text-decoration-color: var(--maincolor);
}
.bio a:hover {
  background-color: rgba(39, 103, 73, 0.08);
  color: var(--maincolor);
}

.links {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem 1.25rem;
  /* The negative margin cancels the first link's padding so its label
     lines up with the text edge above. */
  margin: 1.5rem 0 0 -0.9rem;
}
.links a {
  display: inline-flex;
  align-items: center;
  gap: 0.55rem;
  padding: 0.5rem 0.9rem;
  color: var(--maincolor);
  font-family: var(--font-mono);
  font-weight: 600;
  text-decoration: none;
}
.links a:hover {
  background-color: rgba(39, 103, 73, 0.08);
}
.links svg {
  width: 20px;
  height: 20px;
}

a:focus-visible {
  outline: 2px solid var(--maincolor);
  outline-offset: 2px;
}

/* Phones (but not tablets): logo above the text, everything centered. */
@media (max-width: 640px) {
  .cols {
    flex-direction: column;
    text-align: center;
    gap: 1.5rem;
  }
  .links {
    justify-content: center;
    margin-left: 0;
  }
}

@media (max-width: 26em) {
  .logo {
    /* Half size scales the squares evenly. */
    width: 120px;
    height: 120px;
  }
}
/* GENERATED FILE - do not edit.
 * Regenerate with: node scripts/gen_squares.mjs
 * See that script for the design and the tuning constants. */

.squares {
  height: 30px;
  background-repeat: repeat-x;
}
.squares.top { background-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D'http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg'%20width%3D'1600'%20height%3D'30'%3E%3Cpath%20fill%3D'%239ebbad'%20d%3D'M40%2C0h8v8h-8zm410%2C0h8v8h-8zm410%2C0h8v8h-8zm20%2C0h8v8h-8zm80%2C0h8v8h-8zm40%2C0h8v8h-8zm540%2C0h8v8h-8zm-1210%2C10h8v8h-8zm770%2C0h8v8h-8z'%2F%3E%3Cpath%20fill%3D'%236d9884'%20d%3D'M90%2C0h8v8h-8zm660%2C0h8v8h-8zm-590%2C10h8v8h-8z'%2F%3E%3Cpath%20fill%3D'%233d765b'%20d%3D'M120%2C0h8v8h-8zm90%2C0h8v8h-8zm60%2C0h8v8h-8zm120%2C0h8v8h-8zm300%2C0h8v8h-8zm410%2C0h8v8h-8zm10%2C0h8v8h-8zm120%2C0h8v8h-8zm230%2C0h8v8h-8zm-950%2C10h8v8h-8z'%2F%3E%3Cpath%20fill%3D'%23a8c5b6'%20d%3D'M110%2C0h8v8h-8zm910%2C0h8v8h-8zm500%2C0h8v8h-8zm-850%2C10h8v8h-8zm350%2C0h8v8h-8z'%2F%3E%3Cpath%20fill%3D'%237ca991'%20d%3D'M200%2C0h8v8h-8zm380%2C0h8v8h-8zm370%2C0h8v8h-8zm180%2C0h8v8h-8zm420%2C0h8v8h-8zm-1400%2C10h8v8h-8zm1390%2C0h8v8h-8z'%2F%3E%3Cpath%20fill%3D'%23508c6c'%20d%3D'M460%2C0h8v8h-8zm150%2C0h8v8h-8zm200%2C0h8v8h-8zm20%2C0h8v8h-8zm520%2C0h8v8h-8zm-280%2C10h8v8h-8z'%2F%3E%3Cpath%20fill%3D'%23c5e2d2'%20d%3D'M300%2C0h8v8h-8zm100%2C0h8v8h-8zm340%2C0h8v8h-8zm350%2C0h8v8h-8zm190%2C0h8v8h-8zm-980%2C20h8v8h-8z'%2F%3E%3Cpath%20fill%3D'%23a9d4bc'%20d%3D'M440%2C0h8v8h-8zm550%2C0h8v8h-8zm380%2C0h8v8h-8zm60%2C0h8v8h-8zm-1420%2C10h8v8h-8zm350%2C0h8v8h-8zm800%2C0h8v8h-8z'%2F%3E%3Cpath%20fill%3D'%238cc5a5'%20d%3D'M500%2C0h8v8h-8zm270%2C0h8v8h-8zm-170%2C10h8v8h-8zm440%2C0h8v8h-8zm-980%2C10h8v8h-8zm230%2C0h8v8h-8z'%2F%3E%3Cpath%20fill%3D'%23e0eee6'%20d%3D'M250%2C0h8v8h-8zm1170%2C0h8v8h-8zm20%2C0h8v8h-8zm-1380%2C10h8v8h-8zm280%2C0h8v8h-8zm310%2C0h8v8h-8zm160%2C0h8v8h-8zm400%2C0h8v8h-8zm350%2C0h8v8h-8zm-1130%2C10h8v8h-8zm770%2C0h8v8h-8zm280%2C0h8v8h-8z'%2F%3E%3Cpath%20fill%3D'%23d0e5d9'%20d%3D'M80%2C0h8v8h-8zm180%2C0h8v8h-8zm960%2C0h8v8h-8zm20%2C0h8v8h-8zm120%2C0h8v8h-8zm-1180%2C10h8v8h-8zm680%2C0h8v8h-8zm260%2C0h8v8h-8zm340%2C0h8v8h-8zm-980%2C10h8v8h-8z'%2F%3E%3Cpath%20fill%3D'%23c0ddcd'%20d%3D'M480%2C0h8v8h-8zm590%2C0h8v8h-8zm-880%2C10h8v8h-8zm60%2C0h8v8h-8zm360%2C0h8v8h-8zm860%2C0h8v8h-8zm80%2C0h8v8h-8zm-430%2C10h8v8h-8zm110%2C0h8v8h-8z'%2F%3E%3C%2Fsvg%3E"); }
.squares.bottom { background-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D'http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg'%20width%3D'1600'%20height%3D'30'%3E%3Cpath%20fill%3D'%239ebbad'%20d%3D'M720%2C10h8v8h-8zm150%2C0h8v8h-8zm680%2C0h8v8h-8zm-1270%2C10h8v8h-8zm790%2C0h8v8h-8zm210%2C0h8v8h-8zm110%2C0h8v8h-8z'%2F%3E%3Cpath%20fill%3D'%236d9884'%20d%3D'M150%2C0h8v8h-8zm390%2C10h8v8h-8zm-70%2C10h8v8h-8zm60%2C0h8v8h-8zm900%2C0h8v8h-8z'%2F%3E%3Cpath%20fill%3D'%233d765b'%20d%3D'M1390%2C10h8v8h-8zm140%2C0h8v8h-8zm-830%2C10h8v8h-8zm120%2C0h8v8h-8zm160%2C0h8v8h-8zm330%2C0h8v8h-8zm110%2C0h8v8h-8z'%2F%3E%3Cpath%20fill%3D'%23a8c5b6'%20d%3D'M1110%2C0h8v8h-8zm-790%2C10h8v8h-8zm-290%2C10h8v8h-8zm150%2C0h8v8h-8zm220%2C0h8v8h-8zm270%2C0h8v8h-8zm180%2C0h8v8h-8zm280%2C0h8v8h-8zm350%2C0h8v8h-8zm80%2C0h8v8h-8z'%2F%3E%3Cpath%20fill%3D'%237ca991'%20d%3D'M0%2C10h8v8h-8zm430%2C0h8v8h-8zm-410%2C10h8v8h-8zm110%2C0h8v8h-8z'%2F%3E%3Cpath%20fill%3D'%23508c6c'%20d%3D'M550%2C10h8v8h-8zm-510%2C10h8v8h-8zm980%2C0h8v8h-8zm220%2C0h8v8h-8zm50%2C0h8v8h-8z'%2F%3E%3Cpath%20fill%3D'%23c5e2d2'%20d%3D'M460%2C0h8v8h-8zm30%2C0h8v8h-8zm600%2C10h8v8h-8zm90%2C0h8v8h-8zm190%2C0h8v8h-8zm-1000%2C10h8v8h-8zm200%2C0h8v8h-8zm150%2C0h8v8h-8zm660%2C0h8v8h-8z'%2F%3E%3Cpath%20fill%3D'%23a9d4bc'%20d%3D'M1570%2C0h8v8h-8zm-1500%2C10h8v8h-8zm290%2C0h8v8h-8zm1090%2C0h8v8h-8zm-1110%2C10h8v8h-8zm690%2C0h8v8h-8zm90%2C0h8v8h-8z'%2F%3E%3Cpath%20fill%3D'%238cc5a5'%20d%3D'M220%2C0h8v8h-8zm790%2C0h8v8h-8zm-780%2C10h8v8h-8zm210%2C0h8v8h-8zm-320%2C10h8v8h-8zm300%2C0h8v8h-8zm510%2C0h8v8h-8z'%2F%3E%3Cpath%20fill%3D'%23e0eee6'%20d%3D'M680%2C0h8v8h-8zm910%2C0h8v8h-8zm-1350%2C10h8v8h-8zm70%2C0h8v8h-8zm650%2C0h8v8h-8zm270%2C0h8v8h-8zm190%2C0h8v8h-8zm-1130%2C10h8v8h-8zm140%2C0h8v8h-8zm510%2C0h8v8h-8z'%2F%3E%3Cpath%20fill%3D'%23d0e5d9'%20d%3D'M190%2C0h8v8h-8zm1130%2C0h8v8h-8zm40%2C0h8v8h-8zm220%2C0h8v8h-8zm-1380%2C10h8v8h-8zm500%2C0h8v8h-8zm290%2C0h8v8h-8zm-920%2C10h8v8h-8zm550%2C0h8v8h-8z'%2F%3E%3Cpath%20fill%3D'%23c0ddcd'%20d%3D'M280%2C0h8v8h-8zm880%2C10h8v8h-8zm-810%2C10h8v8h-8zm10%2C0h8v8h-8zm970%2C0h8v8h-8zm30%2C0h8v8h-8z'%2F%3E%3C%2Fsvg%3E"); }