@charset "utf-8";

:root {
  --spacing-unit: 1em;
  --h-spacing-unit: 1ch;
  --text-color: #111;
  --background-color: #fbfbfb;
  --meta-color: hsl(0, 0%, 38%);
  --grey-color-light: hsl(0, 0%, 53.2%);
  --highlight-r: 255;
  --highlight-g: 225;
}

/* fonts */

/* latin-ext */
@font-face {
  font-family: 'Recursive';
  font-display: swap;
  font-weight: 300 1000;
  src: url(/fonts/recursive-latin-ext.woff2) format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

/* latin */
@font-face {
  font-family: 'Recursive';
  font-weight: 300 1000;
  font-display: swap;
  src: url(/fonts/recursive-latin.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

/* end fonts */


/* base */
body,
h1,
h2,
h3,
h4,
h5,
h6,
p,
blockquote,
pre,
hr,
dl,
dd,
ol,
ul,
figure {
  margin: 0;
  padding: 0;
}

html {
  font-family: "Recursive", "Courier New", "Courier", monospace;
  font-size: min(1.4em, calc(0.5vw + 0.9em));
  font-weight: 400;
  line-height: 1.3;
  color: var(--text-color);
  background-color: var(--background-color);
  -webkit-text-size-adjust: 100%;
  font-feature-settings: "kern" 1;
  font-kerning: normal;
  letter-spacing: 0em;
  font-optical-sizing: auto;
  font-style: normal;
  font-variation-settings:
    "slnt" 0,
    "CASL" 0.6,
    "CRSV" 0,
    "MONO" 1;
}

/**
 * Set `margin-bottom` to maintain vertical rhythm
 */
h1,
h2,
h3,
h4,
h5,
h6,
p,
blockquote,
dl,
li {
  margin-bottom: var(--spacing-unit);
}

ul {
  list-style-type: none;
}

ul>li {
  text-indent: calc(-2 * var(--h-spacing-unit));
}

ol ul>li,
ul ul>li {
  padding-left: calc(2 * var(--h-spacing-unit));
}

ul>li::before {
  content: "- ";
}

h1,
h2,
h3,
h4,
h5,
h6 {
  font-size: 1em;
  line-height: var(--base-line-height);
}

h1,
h2 {
  text-align: center;
  text-transform: uppercase;
  font-weight: 700;
}

h1::before {
  content: ">> ";
}

h1::after {
  content: " <<";
}

h2 {
  margin-top: calc(var(--spacing-unit) * 3);
}

h3 {
  margin-top: calc(var(--spacing-unit) * 2);
  font-weight: 600;
}

a {
  margin: -0.1rem 0;
  padding: 0.1rem 0;
  border-radius: 0.5rem 0.2rem;
  background: transparent;
  background-image: linear-gradient(to right,
      rgba(var(--highlight-r), var(--highlight-g), 0, 0.05),
      rgba(var(--highlight-r), var(--highlight-g), 0, 0.35) 4%,
      rgba(var(--highlight-r), var(--highlight-g), 0, 0.15));
  -webkit-box-decoration-break: clone;
  box-decoration-break: clone;
  text-decoration-color: rgba(10, 13, 19, 0.3);
}

a:has(img) {
  background-image: none;
  padding: 0;
  margin: 0;
}

a:hover {
  background-image: linear-gradient(to right,
      rgba(var(--highlight-r), var(--highlight-g), 0, 0.05),
      rgba(var(--highlight-r), var(--highlight-g), 0, 0.35) 4%,
      rgba(var(--highlight-r), var(--highlight-g), 0, 0.15));
  text-decoration-color: rgba(10, 13, 19, 0.1);
}

a:hover:has(img) {
  background-image: none;
}

a:link {
  color: #0000ee;
}

a:visited {
  color: #6666ee;
}

::selection {
  color: red;
  background: yellow;
}

blockquote p:first-child {
  text-indent: calc(-1 * var(--h-spacing-unit));
}

blockquote p:first-child::before {
  content: "“";
}

blockquote p:last-child::after {
  content: "”";
}

blockquote:not(:has(p)) {
  text-indent: calc(-1 * var(--h-spacing-unit));
}

blockquote:not(:has(p))::before {
  content: "“";
}

blockquote:not(:has(p))::after {
  content: "”";
}

pre {
  overflow-x: auto;
  white-space: pre-wrap;
  word-wrap: break-word;
}

li.post-item {
  text-indent: calc(-12 * var(--h-spacing-unit));
  margin-left: calc(10 * var(--h-spacing-unit));
}

li.talk-item {
  margin-bottom: calc(2 * var(--spacing-unit));
}

.talk-item-title {
  text-indent: calc(-10 * var(--h-spacing-unit));
  margin-left: calc(10 * var(--h-spacing-unit));
  margin-bottom: 1lh;
  margin-top: -1lh;
}

.talk-item-info {
  width: 100%;
  display: flex;
  gap: calc(2 * var(--h-spacing-unit));
  margin-left: calc(11 * var(--h-spacing-unit));
  justify-content: flex-start;
  align-content: stretch;
}

.talk-item-info>div:has(img) {
  display: none;
}

@media screen and (min-width: 115ch) {
  .talk-item-info>div:has(img) {
    display: block;
    min-width: 35%;
  }

  .talk-item-info>div img {
    padding-left: calc(2 * var(--h-spacing-unit));
    width: 100%;
  }
}

li.article-link::before,
li.book-link::before,
li.community-link::before,
li.podcast-link::before,
li.poster-link::before,
li.site-link::before,
li.slides-link::before,
li.video-link::before,
li.zine-link::before {
  display: inline-block;
  width: calc(2 * var(--h-spacing-unit));
  position: relative;
  left: var(--h-spacing-unit);
}

li.article-link::before {
  content: "📄";
}

li.book-link::before {
  content: "📕";
}

li.community-link::before {
  content: "🤝";
}

li.podcast-link::before {
  content: "🎧";
}

li.poster-link::before,
li.slides-link::before {
  content: "📊";
}

li.site-link::before {
  content: "🌍";
}

li.video-link::before {
  content: "📺";
}

li.zine-link::before {
  content: "💬";
}

p.quote-source {
  text-align: right;
  margin-top: calc(-1 * var(--spacing-unit));
}

p.quote-source::before {
  content: "— ";
}

.visually-hidden:not(:focus):not(:active) {
  position: absolute !important;
  height: 1px;
  width: 1px;
  overflow: hidden;
  clip: rect(1px 1px 1px 1px);
  /* IE6, IE7 */
  clip: rect(1px, 1px, 1px, 1px);
  white-space: nowrap;
  /* added line */
}

.post-meta {
  font-style: italic;
  color: var(--meta-color);
  margin-bottom: calc(2 * var(--spacing-unit));
}

.post-header {
  text-align: center;
  margin-bottom: var(--spacing-unit);
}

.video {
  margin-bottom: calc(var(--spacing-unit) * 2);
}

.video-responsive {
  overflow: hidden;
  padding-bottom: 56.25%;
  position: relative;
  height: 0;
}

.video-responsive iframe,
.video-responsive video {
  left: 0;
  top: 0;
  height: 100%;
  width: 100%;
  position: absolute;
}

.slide {
  margin-top: var(--spacing-unit);
  margin-bottom: var(--spacing-unit);
}

.slide img {
  width: 100%;
}

.transcript {
  padding-bottom: var(--spacing-unit);
}

.hero-image img {
  width: 100%;
}

@media screen and (min-width: 115ch) {
  .inset-image {
    float: right;
    width: 45%;
    margin: 0 0 var(--spacing-unit) calc(3 * var(--h-spacing-unit));
  }
}

.inset-image {
  margin-bottom: var(--spacing-unit);
}

.inset-image img {
  width: 100%;
}

.footnote {
  font-style: italic;
  text-align: center;
  width: 90%;
  margin-left: auto;
  margin-right: auto;
}

.separator {
  text-align: center;
  margin: calc(var(--spacing-unit) * 2) auto calc(var(--spacing-unit) * 2) auto;
}

.image-credit,
.video-caption {
  margin-bottom: calc(var(--spacing-unit) * 2);
  text-align: right;
}

/* end base */

/* layout */
.wrapper {
  max-width: 72ch;
  min-width: 24ch;
  margin-left: auto;
  margin-right: auto;
  padding-left: calc(var(--h-spacing-unit) * 4);
  padding-right: calc(var(--h-spacing-unit) * 4);
}

.navigation {
  display: flex;
  list-style: none;
  flex-wrap: wrap;
  justify-content: center;
}

.navigation li {
  padding-right: 2ch;
  white-space: nowrap;
  text-indent: 0;
}

.navigation li::before {
  content: "";
}

header .wrapper {
  margin-top: calc(var(--spacing-unit) * 2);
}

footer .wrapper {
  margin-bottom: calc(var(--spacing-unit) * 2);
  text-align: center;
}

.site-heading a {
  display: block;
  text-decoration: none;
  background-image: none;
}

.site-heading a,
.site-heading a:visited {
  color: var(--text-color);
}

.site-heading pre {
  white-space: pre;
  margin-left: calc(var(--h-spacing-unit) * -1);
  width: 32ch;
}

@media screen and (max-width: 50ch) {
  .site-heading pre {
    font-size: max(0.65em, 3.5vw);
  }
}

p.site-description {
  padding-top: 0;
  margin-top: calc(var(--spacing-unit) * -1);
  padding-bottom: var(--spacing-unit);
}

header .image-credit {
  margin-top: 0;
}

pre {
  padding: calc(var(--spacing-unit) * 2) calc(var(--h-spacing-unit) * 2);
}

.site-heading a {
  background-image: none;
}

@media screen and (min-width: 115ch) {
  .site-heading {
    display: flex;
    align-items: start;
  }

  .site-heading a {
    margin-right: var(--h-spacing-unit);
  }

  p.site-description {
    margin-top: 0;
    padding-top: calc(var(--spacing-unit) * 3);
  }
}

.links-pages {
  columns: 1;
}

@media screen and (min-width: 115ch) {
  .links-pages {
    columns: 2;
  }
}

.links-pages-block {
  break-inside: avoid-column;
}

.links-pages .links-pages-block:first-child h3 {
  margin-top: 0;
}

input[type="search"] {
  font: inherit;
  color: var(--text-color);
  background-color: var(--background-color);
  border: 1px solid var(--text-color);
  width: 100%;
  padding: calc(var(--spacing-unit) * 0.5) var(--h-spacing-unit);
  margin-top: var(--spacing-unit);
  box-sizing: border-box;
  -webkit-appearance: none;
  appearance: none;
}

#links-results,
#links-no-results {
  margin-top: calc(var(--spacing-unit) * 2)
}

input[type="search"]:focus {
  outline: 2px solid rgba(var(--highlight-r), var(--highlight-g), 0, 1);
  outline-offset: 1px;
}

/* end layout */

/**
 * Syntax highlighting styles
 */
code {
  color: #666;
}

.highlight {
  background: var(--grey-color-light);
  margin-bottom: var(--spacing-unit);

  .c, .cm, .c1 {
    color: #998;
    font-style: italic;
  }

  .err {
    color: #a61717;
    background-color: #e3d2d2;
  }

  .k, .o, .gs, .kc, .kd, .kp, .kr, .ow {
    font-weight: bold;
  }

  .cp {
    color: #999;
    font-weight: bold;
  }

  .cs {
    color: #999;
    font-weight: bold;
    font-style: italic;
  }

  .gd {
    color: #000;
    background-color: #fdd;
  }

  .gd .x {
    color: #000;
    background-color: #faa;
  }

  .ge {
    font-style: italic;
  }

  .gr, .gt {
    color: #a00;
  }

  .gh, .bp {
    color: #999;
  }

  .gi {
    color: #000;
    background-color: #dfd;
  }

  .gi .x {
    color: #000;
    background-color: #afa;
  }

  .go {
    color: #888;
  }

  .gp, .nn {
    color: #555;
  }

  .gu {
    color: #aaa;
  }

  .kt, .nc {
    color: #458;
    font-weight: bold;
  }

  .m, .mf, .mh, .mi, .mo, .il {
    color: #099;
  }

  .s, .sb, .sc, .sd, .s2, .se, .sh, .si, .sx, .s1 {
    color: #d14;
  }

  .na, .no, .nv, .vc, .vg, .vi {
    color: #008080;
  }

  .nb {
    color: #0086b3;
  }

  .ne, .nf {
    color: #900;
    font-weight: bold;
  }

  .ni {
    color: #800080;
  }

  .nt {
    color: #000080;
  }

  .w {
    color: #bbb;
  }

  .sr {
    color: #009926;
  }

  .ss {
    color: #990073;
  }

}

/* syntax highlighting styles */