html {
  -webkit-text-size-adjust: 100%;
  line-height: 1.15
}

body {
  margin: 0
}

main {
  display: block
}

h1 {
  font-size: 2em;
  margin: .67em 0
}

a {
  background-color: transparent
}

b {
  font-weight: bolder
}

img {
  border-style: none
}

button,
input {
  font-family: inherit;
  font-size: 100%;
  line-height: 1.15;
  margin: 0
}

button,
input {
  overflow: visible
}

button {
  text-transform: none
}

[type=button]::-moz-focus-inner,
[type=reset]::-moz-focus-inner,
[type=submit]::-moz-focus-inner,
button::-moz-focus-inner {
  border-style: none;
  padding: 0
}

[type=button]:-moz-focusring,
[type=reset]:-moz-focusring,
[type=submit]:-moz-focusring,
button:-moz-focusring {
  outline: 1px dotted ButtonText
}

[type=checkbox],
[type=radio] {
  box-sizing: border-box;
  padding: 0
}

[type=number]::-webkit-inner-spin-button,
[type=number]::-webkit-outer-spin-button {
  height: auto
}

[type=search] {
  outline-offset: -2px
}

[type=search]::-webkit-search-decoration {
  -webkit-appearance: none
}

::-webkit-file-upload-button {
  -webkit-appearance: button;
  font: inherit
}

details {
  display: block
}

summary {
  display: list-item
}

[hidden] {
  display: none
}

.container:after {
  clear: both;
  content: "";
  display: table
}

details>summary {
  cursor: pointer;
  text-decoration: underline solid
}

details:hover>summary {
  text-decoration: underline wavy
}

html {
  box-sizing: border-box
}

*,
:after,
:before {
  box-sizing: inherit
}

a,
button {
  cursor: pointer
}

button {
  border-width: 0;
  padding: 0
}

input::-moz-focus-inner {
  border: 0;
  margin: 0;
  padding: 0
}

dd,
ul {
  margin: 0;
  padding: 0
}

h1,
h2,
h3,
h4,
h5,
h6,
p {
  margin: 0
}

:root {
  --ratio: 1.3;
  --s0: 1.375rem;
  --s1: calc(var(--s0)*var(--ratio));
  --s2: calc(var(--s1)*var(--ratio));
  --s3: calc(var(--s2)*var(--ratio));
  --s4: calc(var(--s3)*var(--ratio));
  --s5: calc(var(--s4)*var(--ratio));
  --s6: calc(var(--s5)*var(--ratio));
  --s7: calc(var(--s6)*var(--ratio));
  --s-1: calc(var(--s0)/var(--ratio));
  --s-2: calc(var(--s-1)/var(--ratio));
  --s-3: calc(var(--s-2)/var(--ratio));
  --s-4: calc(var(--s-3)/var(--ratio));
  --s-5: calc(var(--s-4)/var(--ratio));
  --s-6: calc(var(--s-5)/var(--ratio));
  --s-7: calc(var(--s-6)/var(--ratio))
}

@media (max-width:430px) {
  :root {
    --ratio: 1.2
  }
}

body {
  background-color: var(--page-colour);
  color: var(--text-colour-primary)
}

p img {
  width: 100%
}

a {
  color: var(--link-colour)
}

a:hover {
  text-decoration: underline wavy
}

a:visited:not(:focus) {
  color: var(--visited-link-colour)
}

button:hover {
  opacity: .8
}

:root {
  --default-font: "Trebuchet MS", Helvetica, Arial, sans-serif;
  --regular: 400;
  --bold: 700
}

body,
h5,
h6 {
  font-size: var(--s0);
  line-height: var(--s1)
}

.heading-s,
h4 {
  font-size: var(--s1);
  line-height: var(--s2)
}

.heading-m,
h3 {
  font-size: var(--s2);
  line-height: var(--s3)
}

h2 {
  font-size: var(--s3);
  line-height: var(--s4)
}

h1 {
  font-size: var(--s4);
  line-height: var(--s4)
}

html {
  font-family: var(--default-font)
}

body {
  font-weight: var(--regular)
}

h1 {
  margin-bottom: var(--s3);
  margin-top: var(--s3)
}

.heading-m,
.heading-s,
h2,
h3,
h4,
h5,
h6 {
  margin-bottom: var(--s2);
  margin-top: var(--s2)
}

h5,
h6 {
  font-weight: 700
}

p,
ul {
  margin-bottom: var(--s1)
}

ul {
  margin-left: var(--s0)
}

ul li {
  line-height: var(--s1);
  margin-bottom: var(--s-3)
}

li>ul {
  margin-bottom: 0;
  margin-top: var(--s-3)
}

a:focus {
  background-color: var(--focus-highlight-colour);
  color: var(--text-colour-primary);
  outline: thick solid var(--text-colour-primary);
  outline-offset: .2em;
  text-decoration: none
}

.theme-toggle__button:focus:focus-visible {
  background-color: var(--focus-highlight-colour);
  border-radius: 0;
  color: var(--focus-contrasting-colour);
  outline: thick solid var(--text-colour-primary);
  outline-offset: -2px
}

a[role=button]:focus {
  box-shadow: 0 0 0 var(--s-4) var(--focus-highlight-colour)
}

a[role=button]:focus>svg {
  fill: var(--focus-highlight-colour);
  background-color: var(--text-colour-primary);
  outline-offset: var(--s-3);
  position: relative;
  z-index: 1
}

.skip-link {
  clip: rect(0 0 0 0);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  -webkit-clip-path: inset(50%);
  clip-path: inset(50%);
  display: block;
  height: 1px;
  margin: 0;
  overflow: hidden;
  padding: var(--s0) var(--s1);
  position: absolute;
  white-space: nowrap;
  width: 1px
}

.skip-link:focus {
  clip: auto;
  -webkit-clip-path: none;
  clip-path: none;
  height: auto;
  margin: inherit;
  margin-bottom: var(--s2);
  outline: thick solid transparent;
  overflow: visible;
  padding: var(--s1);
  position: static;
  text-decoration: underline;
  text-decoration: none;
  white-space: inherit;
  width: auto
}

.box {
  outline: .125rem solid transparent;
  outline-offset: -.125rem;
  padding: var(--s0)
}

.box--m {
  padding: var(--s1) var(--s0)
}

.box--s {
  padding: var(--s-2) var(--s0)
}

.box--border-s {
  border: thin solid
}

.box--border-m {
  border: solid
}

.box>:last-child {
  margin-bottom: 0
}

.container {
  margin: auto;
  max-width: 60ch
}

.icon {
  height: .75em;
  height: 1cap;
  width: .75em;
  width: 1cap
}

.with-icon {
  align-items: baseline;
  display: inline-flex
}

.with-icon .icon {
  margin-inline-end: 1rem
}

.header__container {
  border-bottom: solid var(--border-colour);
  margin: auto;
  max-width: 60ch;
  outline: .125rem solid transparent;
  outline-offset: -.125rem;
  padding: var(--s0)
}

.header__container--m {
  padding: var(--s1) var(--s0)
}

.header__container--s {
  padding: var(--s-2) var(--s0)
}

.header__container--border-s {
  border: thin solid
}

.header__container--border-m {
  border: solid
}

.header__container>:last-child {
  margin-bottom: 0
}

.header__headshot>img {
  align-items: center;
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-start;
}

@media (max-width:540px) {
  .header__headshot>img {
    justify-content: center
  }
}

.header__nav-container {
  align-items: center;
  display: flex;
  flex-wrap: wrap;
  gap: var(--space, 1rem);
  justify-content: flex-start;
  justify-content: space-between;
}

@media (max-width:540px) {
  .header__nav-container {
    justify-content: center
  }
}

.header nav>* {
  align-items: center;
  display: flex;
  flex-wrap: wrap;
  font-size: var(--s1);
  gap: var(--space, 1rem);
  justify-content: flex-start;
  list-style: none;
  margin-bottom: 0;
  margin-left: 0
}

@media (max-width:540px) {
  .header nav>* {
    justify-content: center
  }
}

.header nav li {
  margin-bottom: 0
}

.header menu,
.header nav {
  margin-bottom: var(--s-2)
}

.header menu {
  align-items: center;
  display: flex;
  flex-wrap: wrap;
  font-size: 2rem;
  gap: var(--space, 1rem);
  gap: .5rem;
  justify-content: flex-start;
  line-height: 1rem;
  margin-top: 0;
  padding-left: 0
}

.header a[role=button] {
  min-height: 44px;
  min-width: 44px
}

.header a[role=button]:hover>svg {
  transform: scale(1.2)
}

.header__social-icon {
  align-items: baseline;
  display: inline-flex
}

.header__social-icon svg {
  fill: var(--link-colour);
  background-color: var(--page-colour)
}

.header__social-icon desc {
  fill: var(--text-colour-primary);
  background-color: var(--page-colour)
}

.footer {
  margin-top: var(--s5)
}

.footer__container {
  border-top: solid var(--border-colour);
  margin: auto;
  max-width: 60ch;
  outline: .125rem solid transparent;
  outline-offset: -.125rem;
  padding: var(--s0)
}

.footer__container--m {
  padding: var(--s1) var(--s0)
}

.footer__container--s {
  padding: var(--s-2) var(--s0)
}

.footer__container--border-s {
  border: thin solid
}

.footer__container--border-m {
  border: solid
}

.footer__container>:last-child {
  margin-bottom: 0
}

.footer ul {
  align-items: center;
  display: flex;
  flex-wrap: wrap;
  gap: var(--space, 1rem);
  justify-content: flex-start;
  list-style: none;
  margin-left: 0
}

.footer__copyright {
  font-size: var(--s-1)
}

.footer i {
  font-family: Courier, monospace
}

.card {
  background-color: var(--card-background-colour);
  border: 1px solid var(--card-border-colour);
  border-radius: .25rem;
  box-shadow: 0 .5em 1em -.125em hsla(0, 0%, 4%, .1), 0 0 0 1px hsla(0, 0%, 4%, .2)
}

.card__image {
  align-items: center;
  aspect-ratio: 16/9;
  display: flex;
  justify-content: center;
  overflow: hidden
}

.card__image>img {
  block-size: 100%;
  inline-size: 100%;
  object-fit: cover
}

.card__image:first-of-type {
  border-bottom: thin solid var(--card-border-colour);
  border-top-left-radius: .25rem;
  border-top-right-radius: .25rem
}

.card__info {
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  outline: .125rem solid transparent;
  outline-offset: -.125rem;
  padding: var(--s0)
}

.card__info--m {
  padding: var(--s1) var(--s0)
}

.card__info--s {
  padding: var(--s-2) var(--s0)
}

.card__info--border-s {
  border: thin solid
}

.card__info--border-m {
  border: solid
}

.card__info>:last-child {
  margin-bottom: 0
}

.card__info>*+* {
  margin-block-start: var(--s0)
}

.card__info>:last-child {
  margin-block-end: auto
}

.card__summary {
  border-left: thick solid var(--border-colour);
  font-size: var(--s-1);
  margin-left: 5px;
  padding-left: var(--s-2);
  padding-top: var(--s-2)
}

.card h1,
.card h2,
.card h3,
.card h4,
.card h5,
.card h6 {
  font-size: var(--s1);
  font-weight: 500;
  margin-bottom: 0;
  margin-top: 0
}

.article-info {
  border-bottom: thin solid var(--border-colour);
  display: flex;
  flex-wrap: wrap;
  font-size: var(--s-1);
  gap: 1rem;
  gap: 0 var(--s-5);
  margin-bottom: var(--s-2)
}

.article-info dd {
  color: var(--text-colour-faded);
  margin-bottom: 0;
  padding-left: 0
}

.article-info dd {
  flex-basis: 0;
  flex-grow: 999;
  min-inline-size: 50%;
  min-inline-size: 60%
}

main article {
  border-bottom: thin solid var(--border-colour);
  padding-bottom: var(--s1)
}

main article .article-info {
  border-bottom: 0
}

.theme-toggle__placeholder {
  margin-bottom: 44px
}

.theme-toggle__container {
  margin: auto;
  max-width: 60ch;
  padding: 0 1.5rem;
  text-align: right
}

@media (max-width:540px) {
  .theme-toggle__container {
    padding: 0 var(--s4)
  }
}

.theme-toggle__button {
  background-color: var(--button-background-colour);
  border-bottom-left-radius: var(--s-6);
  border-bottom-right-radius: var(--s-6);
  box-shadow: 0 .1rem .1rem 0 #000;
  color: var(--button-text-colour);
  font-size: var(--s-1);
  height: 44px;
  padding: 0 var(--s-1)
}

@media (max-width:540px) {
  .theme-toggle__button {
    width: 100%
  }
}

.tag,
a.tag:visited {
  background-color: var(--link-colour);
  border-radius: 5px;
  color: var(--page-colour);
  font-family: Courier, monospace;
  font-size: var(--s-1);
  font-weight: 700;
  padding: .4em;
  text-transform: uppercase
}

.heading-m {
  font-size: var(--s2) !important
}

.heading-s {
  font-size: var(--s1) !important
}

.padding-top-\!-0 {
  padding-top: 0 !important
}

.padding-top-\!-1 {
  padding-top: var(--s0) !important
}

.padding-top-\!-2 {
  padding-top: var(--s1) !important
}

.padding-top-\!-3 {
  padding-top: var(--s2) !important
}

.padding-top-\!-4 {
  padding-top: var(--s3) !important
}

.padding-top-\!-5 {
  padding-top: var(--s4) !important
}

.padding-right-\!-0 {
  padding-right: 0 !important
}

.padding-right-\!-1 {
  padding-right: var(--s0) !important
}

.padding-right-\!-2 {
  padding-right: var(--s1) !important
}

.padding-right-\!-3 {
  padding-right: var(--s2) !important
}

.padding-right-\!-4 {
  padding-right: var(--s3) !important
}

.padding-right-\!-5 {
  padding-right: var(--s4) !important
}

.no-visited-state:not(:focus) {
  color: var(--link-colour) !important
}

.visually-hidden {
  clip: rect(0, 0, 0, 0);
  background-color: #000;
  border: 0;
  color: #fff;
  height: 1px;
  margin: -1px;
  overflow: hidden;
  padding: 0;
  position: absolute;
  white-space: nowrap;
  width: 1px
}

.grid {
  grid-gap: var(--s1);
  display: grid
}

@supports (width:min(250px, 100%)) {
  .grid {
    grid-template-columns: repeat(auto-fit, minmax(min(250px, 100%), 1fr))
  }
}

:root {
  --white: #faf9f6;
  --black: #28282b;
  --black-translucent: rgba(1, 1, 1, .25);
  --kbd-background-colour: #d3d3d3;
  --kbd-border-colour: #a9a9a9;
  --kbd-text-colour: #28282b;
  --page-colour: #f4f4f8;
  --text-colour-primary: #28282b;
  --text-colour-faded: rgba(40, 40, 43, .6);
  --border-colour: #a9a9a9;
  --input-border-colour: #28282b;
  --link-colour: #DC0953;
  --visited-link-colour: #7554CF;
  --focus-highlight-colour: #c9bde8;
  --focus-contrasting-colour: var(--text-colour-primary);
  --barely-visible: rgba(1, 1, 1, .05);
  --partially-visible: rgba(1, 1, 1, .25);
  --button-text-colour: #28282b;
  --button-background-colour: #a9a9a9;
  --button-shadow-colour: #d3d3d3;
  --inline-code-colour: #015692;
  --card-background-colour: #F6F6F8;
  --card-border-colour: var(--barely-visible)
}

:root img {
  opacity: 1
}

@media (prefers-color-scheme:dark) {
  :root {
    --page-colour: #28282b;
    --text-colour-primary: #faf9f6;
    --text-colour-faded: hsla(45, 29%, 97%, .6);
    --border-colour: #d3d3d3;
    --input-border-colour: #000;
    --link-colour: #FF7AA4;
    --visited-link-colour: #c9bde8;
    --focus-highlight-colour: #7554CF;
    --focus-contrasting-colour: var(--text-colour-primary);
    --barely-visible: hsla(0, 0%, 100%, .05);
    --partially-visible: hsla(0, 0%, 100%, .25);
    --button-text-colour: #28282b;
    --button-background-colour: #d3d3d3;
    --button-shadow-colour: #a9a9a9;
    --inline-code-colour: #5ea1d8;
    --card-background-colour: var(--barely-visible);
    --card-border-colour: #000
  }

  :root img {
    opacity: .8
  }
}