/* http://meyerweb.com/eric/tools/css/reset/ 
   v2.0 | 20110126
   License: none (public domain)
*/

html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, center,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, embed, 
figure, figcaption, footer, header, hgroup, 
menu, nav, output, ruby, section, summary,
time, mark, audio, video {
	/*margin: 0;*/
	padding: 0;
	border: 0;
	font-size: 100%;
	font: inherit;
	vertical-align: baseline;
}
/* HTML5 display-role reset for older browsers */
article, aside, details, figcaption, figure, 
footer, header, hgroup, menu, nav, section {
	display: block;
}
body {
	line-height: 1;
}
ol, ul {
	list-style: none;
}
blockquote, q {
	quotes: none;
}
blockquote:before, blockquote:after,
q:before, q:after {
	content: '';
	content: none;
}
table {
	border-collapse: collapse;
	border-spacing: 0;
}

@font-face {
    font-family: 'Go Mono';
    src: url('../font/GoMono.woff2') format('woff2'),
        url('../font/GoMono.woff') format('woff');
    font-weight: normal;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'Go Mono';
    src: url('../font/GoMono-BoldItalic.woff2') format('woff2'),
        url('../font/GoMono-BoldItalic.woff') format('woff');
    font-weight: bold;
    font-style: italic;
    font-display: swap;
}

@font-face {
    font-family: 'Go Mono';
    src: url('../font/GoMono-Bold.woff2') format('woff2'),
        url('../font/GoMono-Bold.woff') format('woff');
    font-weight: bold;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'Go Mono';
    src: url('../font/GoMono-Italic.woff2') format('woff2'),
        url('../font/GoMono-Italic.woff') format('woff');
    font-weight: normal;
    font-style: italic;
    font-display: swap;
}

:root {
  --font-family: 'Go Mono', monospace;
  --line-height: 1.20rem;
  --border-thickness: 2px;

  --font-weight-normal: 500;
  --font-weight-medium: 600;
  --font-weight-bold: 800;

  font-family: var(--font-family);
  font-optical-sizing: auto;
  font-weight: var(--font-weight-normal);
  font-style: normal;
  font-variant-numeric: tabular-nums lining-nums;
  font-size: 16px;
}

:root {
  --text-color: #000;
  --text-color-alt: #666;
  --background-color: #fff;
  --background-color-alt: #eee;
}

@media (prefers-color-scheme: dark) {
  :root {
    --text-color: #fff;
    --text-color-alt: #aaa;
    --background-color: #000;
    --background-color-alt: #111;
  }
}

* {
  box-sizing: border-box;
}


* + * {
  margin-top: var(--line-height);
}

html {
  display: flex;
  width: 100%;
  margin: 0;
  padding: 0;
  flex-direction: column;
  align-items: center;
  background: var(--background-color);
  color: var(--text-color);
}

body {
  position: relative;
  width: 100%;
  margin: 0;
  padding: var(--line-height) 2ch;
  max-width: calc(min(80ch, round(down, 100%, 1ch)));
  line-height: var(--line-height);
  overflow-x: hidden;
}

@media screen and (max-width: 480px) {
  :root {
    font-size: 14px;
  }
  body {
    padding: var(--line-height) 1ch;
  }
}

h1, h2, h3, h4, h5, h6 {
  font-weight: var(--font-weight-bold);
  margin: calc(var(--line-height) * 2) 0 var(--line-height);
  line-height: var(--line-height);
}

h1 {
  font-size: 2rem;
  line-height: calc(2 * var(--line-height));
  margin-bottom: calc(var(--line-height) * 2);
  text-transform: uppercase;
}
h2 {
  font-size: 1.125rem;
  text-transform: uppercase;
}

hr {
  position: relative;
  display: block;
  height: var(--line-height);
  margin: calc(var(--line-height) * 1.5) 0;
  border: none;
  color: var(--text-color);
}
hr:after {
  display: block;
  content: "";
  position: absolute;
  top: calc(var(--line-height) / 2 - var(--border-thickness));
  left: 0;
  width: 100%;
  border-top: calc(var(--border-thickness) * 3) double var(--text-color);
  height: 0;
}

a {
  text-decoration-thickness: var(--border-thickness);
}

a:link, a:visited {
  color: var(--text-color);
}

p {
  margin-bottom: var(--line-height);
}

strong {
  font-weight: var(--font-weight-bold);
}
em {
  font-style: italic;
}

sub {
  position: relative;
  display: inline-block;
  margin: 0;
  vertical-align: sub;
  line-height: 0;
  width: calc(1ch / 0.75);
  font-size: .75rem;
}

table {
  position: relative;
  top: calc(var(--line-height) / 2);
  width: calc(round(down, 100%, 1ch));
  border-collapse: collapse;
  margin: 0 0 calc(var(--line-height) * 2);
}

th, td {
  border: var(--border-thickness) solid var(--text-color);
  padding: 
    calc((var(--line-height) / 2))
    calc(1ch - var(--border-thickness) / 2)
    calc((var(--line-height) / 2) - (var(--border-thickness)))
  ;
  line-height: var(--line-height);
  vertical-align: top;
  text-align: left;
}
table tbody tr:first-child > * {
  padding-top: calc((var(--line-height) / 2) - var(--border-thickness));
}
th {
  font-weight: 700;
}

p {
  word-break: break-word;
  word-wrap: break-word;
  hyphens: auto;
}

img, video {
  display: block;
  max-width: 100%;
  object-fit: contain;
  overflow: hidden;
  width: auto;
  height: auto;
}
img {
  font-style: italic;
  color: var(--text-color-alt);
}

details {
  border: var(--border-thickness) solid var(--text-color);
  padding: calc(var(--line-height) - var(--border-thickness)) 1ch;
  margin-bottom: var(--line-height);
}

summary {
  font-weight: var(--font-weight-medium);
  cursor: pointer;
}
details[open] summary {
  margin-bottom: var(--line-height);
}

details ::marker {
  display: inline-block;
  content: '▶';
  margin: 0;
}
details[open] ::marker {
  content: '▼';
}

details :last-child {
  margin-bottom: 0;
}

pre {
  white-space: pre;
  overflow-x: auto;
  margin: var(--line-height) 0;
  overflow-y: hidden;
}
figure pre {
  margin: 0;
}

pre, code {
  font-family: var(--font-family);
}

code {
  font-weight: var(--font-weight-medium);
}

figure {
  margin: calc(var(--line-height) * 2) 3ch;
  overflow-x: auto;
  overflow-y: hidden;
}

figcaption {
  display: block;
  font-style: italic;
  margin-top: var(--line-height);
}

ul, ol {
  padding: 0;
  margin: 0 0 var(--line-height);
}

ul {
  list-style-type: square;
  padding: 0 0 0 2ch;
}
ol {
  list-style-type: none;
  counter-reset: item;
  padding: 0;
}
ol ul,
ol ol,
ul ol,
ul ul {
  padding: 0 0 0 3ch;
  margin: 0;
}
ol li:before { 
  content: counters(item, ".") ". ";
  counter-increment: item;
  font-weight: var(--font-weight-medium);
}

li {
  margin: 0;
  padding: 0;
}

li::marker {
  line-height: 0;
}

::-webkit-scrollbar {
    height: var(--line-height);
}

input, button, textarea {
  border: var(--border-thickness) solid var(--text-color);
  padding: 
    calc(var(--line-height) / 2 - var(--border-thickness))
    calc(1ch - var(--border-thickness));
  margin: 0;
  font: inherit;
  font-weight: inherit;
  height: calc(var(--line-height) * 2);
  width: auto;
  overflow: visible;
  background: var(--background-color);
  color: var(--text-color);
  line-height: normal;
  -webkit-font-smoothing: inherit;
  -moz-osx-font-smoothing: inherit;
  -webkit-appearance: none;
}

input[type=checkbox] {
  display: inline-grid;
  place-content: center;
  vertical-align: top;
  width: 2ch;
  height: var(--line-height);
  cursor: pointer;
}
input[type=checkbox]:checked:before {
  content: "";
  width: 1ch;
  height: calc(var(--line-height) / 2);
  background: var(--text-color);
}

button:focus, input:focus {
  --border-thickness: 3px;
  outline: none;
}

input {
  width: calc(round(down, 100%, 1ch));
}
::placeholder {
  color: var(--text-color-alt);
  opacity: 1;
}
::-ms-input-placeholder {
  color: var(--text-color-alt);
}
button::-moz-focus-inner {
  padding: 0;
  border: 0
}

button {
  text-transform: uppercase;
  font-weight: var(--font-weight-medium);
  cursor: pointer;
}

button:hover {
  background: var(--background-color-alt);
}
button:active {
  transform: translate(2px, 2px);
}

label {
  display: block;
  width: calc(round(down, 100%, 1ch));
  height: auto;
  line-height: var(--line-height);
  font-weight: var(--font-weight-medium);
  margin: 0;
}

label input {
  width: 100%;
}


/* DEBUG UTILITIES */

.debug .debug-grid {
  --color: color-mix(in srgb, var(--text-color) 10%, var(--background-color) 90%);
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: -1;
  background-image:
    repeating-linear-gradient(var(--color) 0 1px, transparent 1px 100%),
    repeating-linear-gradient(90deg, var(--color) 0 1px, transparent 1px 100%);
  background-size: 1ch var(--line-height);
  margin: 0;
}

.debug .off-grid {
  background: rgba(255, 0, 0, 0.1);
}

.debug-toggle-label {
  text-align: right;
}


/* Text style */
.bold {
  font-weight: bold;
}

.semibold {
  font-weight: 600;
}

.italic {
  font-style: italic;
}

.underline {
  text-decoration: underline;
}

.strikethrough {
  text-decoration: line-through;
}

.uppercase {
  text-transform: uppercase;
}

.lowercase {
  text-transform: lowercase;
}

.capitalize {
  text-transform: capitalize;
}

.centered {
  text-align: center;
}

.justified {
  text-align: justify;
}

.monospace {
  font-family: var(--mono);
}

/* Font size */
.smaller {
  font-size: .85rem
}

.small {
  font-size: .875rem;
}

.normal {
  font-size: 1rem;
}

.large {
  font-size: 1.25rem;
}

.larger {
  font-size: 1.5rem;
}

/* Position */
.relative {
  position: relative;
}

.fixed {
  position: fixed;
}

.absolute {
  position: absolute;
}

.sticky {
  position: sticky;
}

/* Display */
.hidden {
  display: none;
}

.inline {
  display: inline;
}

.block {
  display: block;
}

.block.inline {
  display: inline-block
}

.flex {
  display: flex;
}

.flex.inline {
  display: inline-flex;
}

.contents {
  display: contents;
}

/* Flex */
.flex.row {
  flex-direction: row;
}

.flex.column {
  flex-direction: column;
}

.flex.row.reverse {
  flex-direction: row-reverse;
}

.flex.column.reverse {
  flex-direction: column-reverse;
}

.flex.wrap {
  flex-wrap: wrap;
}

.flex.wrap.reverse {
  flex-wrap: wrap-reverse;
}

.flex.no-wrap {
  flex-wrap: nowrap;
}

.flex.start {
  justify-content: flex-start;
}

.flex.end {
  justify-content: flex-end;
}

.flex.center {
  justify-content: center;
}

.flex.space-between {
  justify-content: space-between;
}

.flex.space-around {
  justify-content: space-around;
}

.flex.space-evenly {
  justify-content: space-evenly;
}

.flex.stretch {
  justify-content: stretch;
}

.flex.align-start {
  align-items: flex-start;
}

.flex.align-end {
  align-items: flex-end;
}

.flex.align-center {
  align-items: center;
}

.flex.align-stretch {
  align-items: stretch;
}

.grow {
  flex-grow: 1;
}

.shrink {
  flex-shrink: 1;
}

/* Sizing */
.width { width: 100%; }

.width-20ch { width: 20ch; }

.height { height: 100%; }

.border-box {
  box-sizing: border-box;
}

.content-box {
  box-sizing: content-box;
}

/* Resizing */
.resize {
  resize: both;
}

.resize-x {
  resize: horizontal;
}

.resize-y {
  resize: vertical;
}

.no-resize {
  resize: none;
}

/* SVG fill and stroke */
svg.fill-current {
  fill: currentColor;
}

svg.no-fill {
  fill: none;
}

svg.stroke-current {
  stroke: currentColor;
}

svg.no-stroke {
  stroke: none;
}

/* Spacing */
.m-0 { margin: 0rem; }
.m-\.125 { margin: .125rem; }
.m-\.25 { margin: .25rem; }
.m-\.5 { margin: .5rem; }
.m-\.75 { margin: .75rem; }
.m-1 { margin: 1rem; }
.m-1\.25 { margin: 1.25rem; }
.m-1\.5 { margin: 1.5rem; }
.m-1\.75 { margin: 1.75rem; }
.m-2 { margin: 2rem; }
.m-3 { margin: 3rem; }
.m-4 { margin: 4rem; }
.mx-0 { margin-right: 0rem; margin-left: 0rem; }
.mx-\.125 { margin-right: .125rem; margin-left: .125rem; }
.mx-\.25 { margin-right: .25rem; margin-left: .25rem; }
.mx-\.5 { margin-right: .5rem; margin-left: .5rem; }
.mx-\.75 { margin-right: .75rem; margin-left: .75rem; }
.mx-1 { margin-right: 1rem; margin-left: 1rem; }
.mx-1\.25 { margin-right: 1.25rem; margin-left: 1.25rem; }
.mx-1\.5 { margin-right: 1.5rem; margin-left: 1.5rem; }
.mx-1\.75 { margin-right: 1.75rem; margin-left: 1.75rem; }
.mx-2 { margin-right: 2rem; margin-left: 2rem; }
.mx-3 { margin-right: 3rem; margin-left: 3rem; }
.mx-4 { margin-right: 4rem; margin-left: 4rem; }
.mx-auto { margin-left: auto; margin-right: auto; }
.my-0 { margin-top: 0rem; margin-bottom: 0rem; }
.my-\.125 { margin-top: .125rem; margin-bottom: .125rem; }
.my-\.25 { margin-top: .25rem; margin-bottom: .25rem; }
.my-\.5 { margin-top: .5rem; margin-bottom: .5rem; }
.my-\.75 { margin-top: .75rem; margin-bottom: .75rem; }
.my-1 { margin-top: 1rem; margin-bottom: 1rem; }
.my-1\.25 { margin-top: 1.25rem; margin-bottom: 1.25rem; }
.my-1\.5 { margin-top: 1.5rem; margin-bottom: 1.5rem; }
.my-1\.75 { margin-top: 1.75rem; margin-bottom: 1.75rem; }
.my-2 { margin-top: 2rem; margin-bottom: 2rem; }
.my-3 { margin-top: 3rem; margin-bottom: 3rem; }
.my-4 { margin-top: 4rem; margin-bottom: 4rem; }
.mt-0 { margin-top: 0rem; }
.mt-\.125 { margin-top: .125rem; }
.mt-\.25 { margin-top: .25rem; }
.mt-\.5 { margin-top: .5rem; }
.mt-\.75 { margin-top: .75rem; }
.mt-1 { margin-top: 1rem; }
.mt-1\.25 { margin-top: 1.25rem; }
.mt-1\.5 { margin-top: 1.5rem; }
.mt-1\.75 { margin-top: 1.75rem; }
.mt-2 { margin-top: 2rem; }
.mt-3 { margin-top: 3rem; }
.mt-4 { margin-top: 4rem; }
.mr-0 { margin-right: 0rem; }
.mr-\.125 { margin-right: .125rem; }
.mr-\.25 { margin-right: .25rem; }
.mr-\.5 { margin-right: .5rem; }
.mr-\.75 { margin-right: .75rem; }
.mr-1 { margin-right: 1rem; }
.mr-1\.25 { margin-right: 1.25rem; }
.mr-1\.5 { margin-right: 1.5rem; }
.mr-1\.75 { margin-right: 1.75rem; }
.mr-2 { margin-right: 2rem; }
.mr-3 { margin-right: 3rem; }
.mr-4 { margin-right: 4rem; }
.mb-0 { margin-bottom: 0rem; }
.mb-\.125 { margin-bottom: .125rem; }
.mb-\.25 { margin-bottom: .25rem; }
.mb-\.5 { margin-bottom: .5rem; }
.mb-\.75 { margin-bottom: .75rem; }
.mb-1 { margin-bottom: 1rem; }
.mb-1\.25 { margin-bottom: 1.25rem; }
.mb-1\.5 { margin-bottom: 1.5rem; }
.mb-1\.75 { margin-bottom: 1.75rem; }
.mb-2 { margin-bottom: 2rem; }
.mb-3 { margin-bottom: 3rem; }
.mb-4 { margin-bottom: 4rem; }
.ml-0 { margin-left: 0rem; }
.ml-\.125 { margin-left: .125rem; }
.ml-\.25 { margin-left: .25rem; }
.ml-\.5 { margin-left: .5rem; }
.ml-\.75 { margin-left: .75rem; }
.ml-1 { margin-left: 1rem; }
.ml-1\.25 { margin-left: 1.25rem; }
.ml-1\.5 { margin-left: 1.5rem; }
.ml-1\.75 { margin-left: 1.75rem; }
.ml-2 { margin-left: 2rem; }
.ml-3 { margin-left: 3rem; }
.ml-4 { margin-left: 4rem; }
.p-0 { padding: 0rem; }
.p-\.125 { padding: .125rem; }
.p-\.25 { padding: .25rem; }
.p-\.5 { padding: .5rem; }
.p-\.75 { padding: .75rem; }
.p-1 { padding: 1rem; }
.p-1\.25 { padding: 1.25rem; }
.p-1\.5 { padding: 1.5rem; }
.p-1\.75 { padding: 1.75rem; }
.p-2 { padding: 2rem; }
.p-3 { padding: 3rem; }
.p-4 { padding: 4rem; }
.px-0 { padding-right: 0rem; padding-left: 0rem; }
.px-\.125 { padding-right: .125rem; padding-left: .125rem; }
.px-\.25 { padding-right: .25rem; padding-left: .25rem; }
.px-\.5 { padding-right: .5rem; padding-left: .5rem; }
.px-\.75 { padding-right: .75rem; padding-left: .75rem; }
.px-1 { padding-right: 1rem; padding-left: 1rem; }
.px-1\.25 { padding-right: 1.25rem; padding-left: 1.25rem; }
.px-1\.5 { padding-right: 1.5rem; padding-left: 1.5rem; }
.px-1\.75 { padding-right: 1.75rem; padding-left: 1.75rem; }
.px-2 { padding-right: 2rem; padding-left: 2rem; }
.px-3 { padding-right: 3rem; padding-left: 3rem; }
.px-4 { padding-right: 4rem; padding-left: 4rem; }
.py-0 { padding-top: 0rem; padding-bottom: 0rem; }
.py-\.125 { padding-top: .125rem; padding-bottom: .125rem; }
.py-\.25 { padding-top: .25rem; padding-bottom: .25rem; }
.py-\.5 { padding-top: .5rem; padding-bottom: .5rem; }
.py-\.75 { padding-top: .75rem; padding-bottom: .75rem; }
.py-1 { padding-top: 1rem; padding-bottom: 1rem; }
.py-1\.25 { padding-top: 1.25rem; padding-bottom: 1.25rem; }
.py-1\.5 { padding-top: 1.5rem; padding-bottom: 1.5rem; }
.py-1\.75 { padding-top: 1.75rem; padding-bottom: 1.75rem; }
.py-2 { padding-top: 2rem; padding-bottom: 2rem; }
.py-3 { padding-top: 3rem; padding-bottom: 3rem; }
.py-4 { padding-top: 4rem; padding-bottom: 4rem; }
.pt-0 { padding-top: 0rem; }
.pt-\.125 { padding-top: .125rem; }
.pt-\.25 { padding-top: .25rem; }
.pt-\.5 { padding-top: .5rem; }
.pt-\.75 { padding-top: .75rem; }
.pt-1 { padding-top: 1rem; }
.pt-1\.25 { padding-top: 1.25rem; }
.pt-1\.5 { padding-top: 1.5rem; }
.pt-1\.75 { padding-top: 1.75rem; }
.pt-2 { padding-top: 2rem; }
.pt-3 { padding-top: 3rem; }
.pt-4 { padding-top: 4rem; }
.pr-0 { padding-right: 0rem; }
.pr-\.125 { padding-right: .125rem; }
.pr-\.25 { padding-right: .25rem; }
.pr-\.5 { padding-right: .5rem; }
.pr-\.75 { padding-right: .75rem; }
.pr-1 { padding-right: 1rem; }
.pr-1\.25 { padding-right: 1.25rem; }
.pr-1\.5 { padding-right: 1.5rem; }
.pr-1\.75 { padding-right: 1.75rem; }
.pr-2 { padding-right: 2rem; }
.pr-3 { padding-right: 3rem; }
.pr-4 { padding-right: 4rem; }
.pb-0 { padding-bottom: 0rem; }
.pb-\.125 { padding-bottom: .125rem; }
.pb-\.25 { padding-bottom: .25rem; }
.pb-\.5 { padding-bottom: .5rem; }
.pb-\.75 { padding-bottom: .75rem; }
.pb-1 { padding-bottom: 1rem; }
.pb-1\.25 { padding-bottom: 1.25rem; }
.pb-1\.5 { padding-bottom: 1.5rem; }
.pb-1\.75 { padding-bottom: 1.75rem; }
.pb-2 { padding-bottom: 2rem; }
.pb-3 { padding-bottom: 3rem; }
.pb-4 { padding-bottom: 4rem; }
.pl-0 { padding-left: 0rem; }
.pl-\.125 { padding-left: .125rem; }
.pl-\.25 { padding-left: .25rem; }
.pl-\.5 { padding-left: .5rem; }
.pl-\.75 { padding-left: .75rem; }
.pl-1 { padding-left: 1rem; }
.pl-1\.25 { padding-left: 1.25rem; }
.pl-1\.5 { padding-left: 1.5rem; }
.pl-1\.75 { padding-left: 1.75rem; }
.pl-2 { padding-left: 2rem; }
.pl-3 { padding-left: 3rem; }
.pl-4 { padding-left: 4rem; }
.spacing-x-0 > * + * { margin-left: 0rem; }
.spacing-x-\.125 > * + * { margin-left: .125rem; }
.spacing-x-\.25 > * + * { margin-left: .25rem; }
.spacing-x-\.5 > * + * { margin-left: .5rem; }
.spacing-x-\.75 > * + * { margin-left: .75rem; }
.spacing-x-1 > * + * { margin-left: 1rem; }
.spacing-x-1\.25 > * + * { margin-left: 1.25rem; }
.spacing-x-1\.5 > * + * { margin-left: 1.5rem; }
.spacing-x-1\.75 > * + * { margin-left: 1.75rem; }
.spacing-x-2 > * + * { margin-left: 2rem; }
.spacing-x-3 > * + * { margin-left: 3rem; }
.spacing-x-4 > * + * { margin-left: 4rem; }
.spacing-y-0 > * + * { margin-top: 0rem; }
.spacing-y-\.125 > * + * { margin-top: .125rem; }
.spacing-y-\.25 > * + * { margin-top: .25rem; }
.spacing-y-\.5 > * + * { margin-top: .5rem; }
.spacing-y-\.75 > * + * { margin-top: .75rem; }
.spacing-y-1 > * + * { margin-top: 1rem; }
.spacing-y-1\.25 > * + * { margin-top: 1.25rem; }
.spacing-y-1\.5 > * + * { margin-top: 1.5rem; }
.spacing-y-1\.75 > * + * { margin-top: 1.75rem; }
.spacing-y-2 > * + * { margin-top: 2rem; }
.spacing-y-3 > * + * { margin-top: 3rem; }
.spacing-y-4 > * + * { margin-top: 4rem; }
body > header {
  --border: var(--border-thickness) solid var(--text-color);
  --padding: 
    calc((var(--line-height) / 2))
    calc(1ch - var(--border-thickness) / 2)
    calc((var(--line-height) / 2) - (var(--border-thickness)))
  ;

  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  grid-template-areas:
    "title title title"
    "nav nav nav";
  border-left: var(--border);
  border-top: var(--border);

  & > div {
    grid-area: title;
    border-right: var(--border);
    border-bottom: var(--border);
    padding: var(--padding);

    h1 {
      margin: 0;
    }
  }
  & > ul {
    grid-area: nav;
    margin: 0;
    padding: 0;
    display: grid;
    grid-template-columns: subgrid;

    & > li {
      border-right: var(--border);
      border-bottom: var(--border);
      padding: var(--padding);
      list-style-type: none;
      font-weight: 700;
      text-transform: uppercase;
    }
  }
}

@media all and (min-width: 65ch) {
  body > header {
    grid-template-columns: 1fr 1fr 1fr 1fr;
    grid-template-areas:
      "title title title title"
      "nav nav nav nav";
  }
}

main { margin-top:  calc(var(--line-height) * 2); }

main > header {
    display: flex;
    gap: 1rem;
    flex-wrap: wrap;

    img {
        margin: 0 auto;
    }
    div {
        margin: 0;
        align-content: center;
    }
    div > :first-child {
        margin-top: 0;
    }

    @media all and (min-width: 65ch) {
        flex-wrap: nowrap;
        img {
            order: 2;
            flex: 0 0 20ch;
        }
    }
    
}

.pipe-list {
    display: flex;
    justify-content: center;
    flex-direction: row;
    padding-left: 0;
    margin-bottom: 0;

    & > li {
        list-style-type: none;
        padding: 0 0.25em;
    }
    & > li:not(:first-child) {
        border-left: var(--border-thickness) solid var(--text-color);
    }
    .current {
        color: var(--text-color-alt);
    }
}

.img-list {
    padding: 0;

    & > li {
        list-style-type: none;
        margin-bottom: 1rem;
        display: flex;
        gap: 1rem;
        flex-wrap: wrap;
    }
    li > img {
        margin: 0 auto;
    }
    li > div {
        margin: 0;
    }
    li > div > :first-child {
        margin-top: 0;
    }
    @media all and (min-width: 65ch) {
        li {
            flex-wrap: nowrap;
        }
        li > img {
            flex: 0 0 20ch;
            max-width: 20ch;
        }
    }
}

body > footer {
  --border: var(--border-thickness) solid var(--text-color);

  margin-top: calc(var(--line-height) * 2);
  border-top: var(--border);
  padding-top: var(--line-height);
  display: flex;
  justify-content: space-between;
  flex-direction: row;

  & * { margin: 0; }
  nav {
    display: flex;
  }
}