@font-face {
  font-family: "VT323";
  src: url("fonts/vt323-latin-400-normal.woff2") format("woff2");
  font-display: swap;
}

:root {
  --ink: #000;
  --ribbon: #C4081B;
  /* One dot on the 5px grid. Every row height below is a multiple of 5px so
     the dotted rails stay in phase from one list item to the next. */
  --dot: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='5' height='5'%3E%3Crect width='4' height='4' fill='%23000'/%3E%3C/svg%3E");
  --dot-ribbon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='5' height='5'%3E%3Crect width='4' height='4' fill='%23C4081B'/%3E%3C/svg%3E");
  --dot-off: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='5' height='5'%3E%3Crect width='4' height='4' fill='%23ccc'/%3E%3C/svg%3E");
  --ring: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14' fill='%23000'%3E%3Cpath d='M0 0h4v4H0zM5 0h4v4H5zM10 0h4v4h-4zM0 5h4v4H0zM10 5h4v4h-4zM0 10h4v4H0zM5 10h4v4H5zM10 10h4v4h-4z'/%3E%3C/svg%3E");
  --ring-ribbon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14' fill='%23C4081B'%3E%3Cpath d='M0 0h4v4H0zM5 0h4v4H5zM10 0h4v4h-4zM0 5h4v4H0zM10 5h4v4h-4zM0 10h4v4H0zM5 10h4v4H5zM10 10h4v4h-4z'/%3E%3C/svg%3E");
}

body {
  margin: 0;
  background: #fff;
  color: var(--ink);
  font: 400 22px/25px "VT323", ui-monospace, Menlo, monospace;
}

main {
  max-width: 800px;
  padding: 40px;
}

h1 {
  margin: 0 0 60px;
  line-height: 0;
}

.vh {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip-path: inset(50%);
}

h1 svg { display: block; }
h1 .two { display: none; }

ol {
  list-style: none;
  margin: 0;
  padding: 0;
}

.career > li {
  position: relative;
  display: grid;
  grid-template-columns: 10ch 1fr;
  column-gap: 1ch;
  padding: 0 0 10px 60px;
}

.rail,
.rail2 {
  position: absolute;
  top: 0;
  bottom: 0;
  width: 4px;
  background: var(--dot) 0 0 / 5px 5px repeat-y;
}

.rail { left: 5px; }
.rail2 { left: 30px; background-image: var(--dot-ribbon); }
.side > .rail { background-image: var(--dot-off); }
.first > .rail { top: 5px; }
.last > .rail { bottom: auto; height: 19px; }

.n {
  position: absolute;
  left: 0;
  top: 5px;
  width: 14px;
  height: 14px;
  background: #fff var(--ring) 0 0 / 14px 14px no-repeat;
}

.side > .n {
  left: 25px;
  background-image: var(--ring-ribbon);
}

.career > .tie {
  display: block;
  height: 30px;
  padding: 0;
}

.tie svg {
  position: absolute;
  left: 0;
  top: 0;
}

summary {
  display: inline-block;
  padding: 5px 0;
  color: var(--ribbon);
  cursor: pointer;
  list-style: none;
}

summary::-webkit-details-marker { display: none; }
summary::before { content: "[+] "; }
details[open] summary::before { content: "[-] "; }
summary:hover { text-decoration: underline; text-underline-offset: 3px; }

.stories li { padding: 0 0 5px; }

.stories a {
  color: var(--ribbon);
  text-decoration: none;
}

.stories a:hover {
  text-decoration: underline;
  text-underline-offset: 3px;
}

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

@media (max-width: 560px) {
  main { padding: 20px; }
  h1 .one { display: none; }
  h1 .two { display: block; max-width: 100%; height: auto; }
  .career > li { display: block; }
  .d { display: block; }
  .d:empty { display: none; }
}