@font-face {
  font-family: "MPLUS1Code";
  src: url(/fonts/MPLUS1Code-VariableFont_wght.woff2);
  unicode-range: U+?????;
}
/*------------------------------------*



  CUSTOM PROPERTIES
    COLOURS

*------------------------------------*/
:root {
  color-scheme: only dark;
  --font-family-main: MPLUS1Code;
  --font-family-mono: MPLUS1Code;
  --color-background-emphasis: #000000;
  --color-background-accent: #670951;
  --color-background-accent-dim: #4a063a;
  --color-background-accent-tiny: #4d103e;
  --color-foreground-console: #e3b8c9;
  --color-foreground: #daa2b9;
  --color-foreground-dim: #9f6980;
  --color-tappable: #e156e1;
  --color-tappable-tiny: #e56ce5;
  --color-tappable-hover: #ff28ff;
  --color-accent: #e04c64;
  --color-accent-very-bright: #ed397d;
  --color-accent-bright: #c48080;
  --color-background-main: #15050b;
  --color-shadow: rgba(0, 0, 0, 0.5);
  --img-filter: hue-rotate(315deg) saturate(0.6);
}

/*------------------------------------*



  CUSTOM PROPERTIES
    SIZES

*------------------------------------*/
:root {
  --vert-pad: 12px;
  --vert-pad-half: 6px;
  --horiz-pad: 8px;
  --horiz-pad-med: 22px;
  --horiz-pad-big: 30px;
  --inset-large: 50px;
  --list-link-width: revert;
  --corner-radius: 0.2em;
  --gallery-item-width: 180px;
  --gallery-zoomed-label-height: 36px;
  --font-weight-thin: 300;
  --font-weight-normal: 400;
  --font-weight-bold: 500;
  --font-weight-black: 700;
  --search-input-width: 5em;
  --line-height-compact: 1.2;
  --line-height-normal: 1.4;
  --line-height-roomy: 1.6;
  --font-size-small: 95%;
  --font-size-very-small: 90%;
  --h1-font-size: 1.5em;
  --h2-font-size: 1.375em;
  --h3-font-size: 1.25em;
  --h4-font-size: 1.1em;
  --border-width-thick: 26px;
  --border-width-med: 20px;
  --border-width-thin: 13px;
  --border-image-slice-px-thick: 20;
  --border-image-slice-px-med: 30;
  --border-image-slice-px-thin: 30;
  --border-image-gap-thick: 0px;
  --border-image-gap-med: 0px;
  --border-image-gap-thin: 0px;
  --border-image-width-thick: 26px;
  --border-image-width-med: 20px;
  --border-image-width-thin: 8px;
  --mm-image-animator-magic-over-size: 10px;
}

@media only screen and (min-width: 480px) {
  :root {
    --vert-pad: 24px;
    --vert-pad-half: 12px;
    --horiz-pad: 15px;
    --horiz-pad-med: 45px;
    --horiz-pad-big: 60px;
    --inset-large: 105px;
    --list-link-width: 11em;
    --search-input-width: 7em;
  }
}
:root {
  --section-gap: calc(3 * var(--vert-pad));
  --vert-pad-large: calc(1.5 * var(--vert-pad));
}

/*------------------------------------*
  RESET
*------------------------------------*/
body,
div,
dl,
dt,
dd,
ul,
ol,
li,
h1,
h2,
h3,
h4,
h5,
h6,
pre,
form,
fieldset,
input,
textarea,
p,
blockquote,
th,
td {
  margin: 0;
  padding: 0;
}

table {
  border-collapse: collapse;
  border-spacing: 0;
}

fieldset,
img {
  border: 0;
}

address,
caption,
cite,
dfn,
th,
var {
  font-style: normal;
  font-weight: var(--font-weight-normal);
}

caption,
th {
  text-align: left;
}

button {
  font-family: var(--font-family-main);
}

h1,
h2,
h3,
h4,
h5,
h6 {
  font-size: 100%;
  font-weight: var(--font-weight-bold);
}

q:before,
q:after {
  content: "";
}

abbr,
acronym {
  border: 0;
}

.no-wrap {
  white-space: nowrap;
}

html {
  font-family: var(--font-family-main);
  background-color: var(--color-background-main);
}

body {
  max-width: 940px;
  font-weight: var(--font-weight-normal);
  margin: 0 auto;
  line-height: var(--line-height-normal);
  padding: 0 var(--horiz-pad-med);
  color: var(--color-foreground);
  background-color: var(--color-background-main);
  text-underline-offset: 0.3em;
}
@media only screen and (min-width: 480px) {
  body {
    padding: 0 var(--horiz-pad);
  }
}

em {
  font-style: normal;
}

body > main {
  padding-left: var(--horiz-pad);
  padding-right: var(--horiz-pad);
  padding-bottom: var(--section-gap);
}

body > main.home > .boxout:first-child {
  margin-bottom: var(--section-gap);
  padding-bottom: var(--section-gap);
}
body > main.home > .boxout:first-child h1#software-development-by-_mm-dev_,
body > main.home > .boxout:first-child h1#tagged-as-matching {
  color: var(--color-accent-bright);
}
body > main.home > .boxout:first-child h1#software-development-by-_mm-dev_ em,
body > main.home > .boxout:first-child h1#tagged-as-matching em {
  color: var(--color-accent-very-bright);
  font-style: normal;
}
body > main.home > .boxout:first-child h1#software-development-by-_mm-dev_ {
  padding-right: 8em;
  position: relative;
}
body > main.home > .boxout:first-child h1#tagged-as-matching {
  padding-top: var(--vert-pad-large);
}
body > main.home > .boxout:first-child h2:last-of-type {
  margin-top: var(--vert-pad-large);
  margin-bottom: var(--vert-pad-half);
}
body > main.home > .boxout:first-child .big-button {
  transform: rotate(-2deg);
}
body > main.home > .boxout:first-child ul:first-of-type {
  font-size: var(--h2-font-size);
}
body > main.home > .boxout:first-child ul:first-of-type li {
  margin-bottom: var(--vert-pad-half);
  line-height: var(--line-height-normal);
}
body > main.home > .boxout:first-child ul.gallery {
  overflow: hidden;
}
body > main.home > .boxout:first-child video {
  aspect-ratio: 739/924;
}
body > main.home > .boxout:first-child hr {
  clear: both;
  background: none;
}

input[type=checkbox] {
  appearance: none;
  background-color: var(--color-background-main);
  color: var(--color-background-main);
  margin: 0;
  font: inherit;
  width: 1.15em;
  height: 1.15em;
  display: grid;
  place-content: center;
  margin-right: 0.3em;
  cursor: pointer;
  border-style: none;
  border-style: solid;
  border-width: var(--border-width-thin);
  border-image-width: var(--border-image-width-thin);
  border-color: var(--color-background-main);
  border-image-repeat: round;
  border-image-source: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='90' height='90'%3E%3Cg style='fill:%23670951;fill-opacity:1;stroke:none;stroke-width:0;stroke-dasharray:none;stroke-opacity:1'%3E%3Cpath d='M10 10h10v10H10zM70 10h10v10H70zM40 40h10v10H40zM40 10h10v10H40zM10 70h10v10H10zM40 70h10v10H40zM70 70h10v10H70zM70 40h10v10H70zM10 40h10v10H10z'/%3E%3C/g%3E%3C/svg%3E");
  border-image-outset: var(--border-image-gap-thin);
  border-image-slice: var(--border-image-slice-px-thin);
}
input[type=checkbox]:hover {
  border-style: none;
  border-style: solid;
  border-width: var(--border-width-thin);
  border-image-width: var(--border-image-width-thin);
  border-color: var(--color-background-main);
  border-image-repeat: round;
  border-image-source: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='90' height='90'%3E%3Cg style='fill:%23ff28ff;fill-opacity:1;stroke:none;stroke-width:0;stroke-dasharray:none;stroke-opacity:1'%3E%3Cpath d='M10 10h10v10H10zM70 10h10v10H70zM40 40h10v10H40zM40 10h10v10H40zM10 70h10v10H10zM40 70h10v10H40zM70 70h10v10H70zM70 40h10v10H70zM10 40h10v10H10z'/%3E%3C/g%3E%3C/svg%3E");
  border-image-outset: var(--border-image-gap-thin);
  border-image-slice: var(--border-image-slice-px-thin);
}

input[type=checkbox]::before {
  content: "";
  width: 0.65em;
  height: 0.65em;
  transform: scale(0);
  background-color: var(--color-tappable);
  clip-path: polygon(14% 44%, 0 65%, 50% 100%, 100% 16%, 80% 0%, 43% 62%);
}

input[type=checkbox]:checked::before {
  transform: scale(1);
}

/* Global lists */
ul,
ol {
  margin-left: calc(var(--horiz-pad-med) - 1em);
  margin-right: var(--horiz-pad-big);
  margin-bottom: var(--vert-pad-large);
}

ul {
  list-style-type: none;
}
ul li {
  position: relative;
}

ul li::before {
  content: "";
  display: inline-block;
  position: absolute;
  left: -0.6em;
  color: var(--color-background-accent-tiny);
  line-height: 1.5rem;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='90' height='90'%3E%3Cg style='fill:%234d103e;fill-opacity:1;stroke:none;stroke-width:0;stroke-dasharray:none;stroke-opacity:1'%3E%3Cpath d='M10 10h10v10H10zM70 10h10v10H70zM40 40h10v10H40zM40 10h10v10H40zM10 70h10v10H10zM40 70h10v10H40zM70 70h10v10H70zM70 40h10v10H70zM10 40h10v10H10z'/%3E%3C/g%3E%3C/svg%3E");
  width: 1em;
  height: 1em;
}

ul li {
  padding-left: 1em;
  line-height: var(--line-height-normal);
  margin-bottom: var(--vert-pad-half);
}

ol li {
  padding-left: 0.5em;
  margin-left: 0.5em;
  margin-bottom: var(--vert-pad-half);
  line-height: var(--line-height-normal);
}

ol li::marker {
  color: var(--color-accent-bright);
}

ul ul,
ul ol,
ol ul,
ol ol {
  margin: var(--vert-pad-half) 0 0 calc(var(--horiz-pad) - 1em);
}
ul ul li:before,
ul ol li:before,
ol ul li:before,
ol ol li:before {
  left: -1em;
  color: var(--color-foreground-dim);
  font-size: 0.3em;
  line-height: var(--line-height-roomy);
}

/*------------------------------------*
  TYPE
*------------------------------------*/
/*--- HEADINGS ---*/
h1,
h2,
h3,
h4,
h5,
h6 {
  margin-bottom: var(--vert-pad-large);
}

h1 {
  font-weight: var(--font-weight-black);
  font-size: var(--h1-font-size);
  line-height: var(--line-height-compact);
  margin-top: var(--vert-pad-large);
  color: var(--color-accent-very-bright);
}

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

h3 {
  font-size: var(--h3-font-size);
  line-height: var(--line-height-normal);
  margin-top: var(--vert-pad-large);
  margin-bottom: calc(1 * var(--vert-pad));
  color: var(--color-accent);
}

h2 + h3 {
  margin-top: var(--vert-pad);
}

h4 {
  font-size: var(--h4-font-size);
  line-height: var(--line-height-normal);
  margin-top: calc(1.5 * var(--vert-pad));
  margin-bottom: var(--vert-pad-half);
  color: var(--color-accent);
}

h5,
h6 {
  font-size: 1em;
  line-height: var(--line-height-normal);
}

/*------------------------------------*
  MAIN HEADER BOXOUT
*------------------------------------*/
body > header {
  position: relative;
  margin-bottom: var(--vert-pad-large);
  padding-left: var(--horiz-pad);
  margin-right: var(--horiz-pad);
  border-style: none;
  border-right-style: solid;
  border-right-width: var(--border-width-med);
  border-image-width: initial var(--border-image-width-med) initial initial;
  border-color: var(--color-background-main);
  border-image-repeat: round;
  border-image-source: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='90' height='90'%3E%3Cg style='fill:%234a063a;fill-opacity:1;stroke:none;stroke-width:0;stroke-dasharray:none;stroke-opacity:1'%3E%3Cpath d='M10 10h10v10H10zM70 10h10v10H70zM40 40h10v10H40zM40 10h10v10H40zM10 70h10v10H10zM40 70h10v10H40zM70 70h10v10H70zM70 40h10v10H70zM10 40h10v10H10z'/%3E%3C/g%3E%3C/svg%3E");
  border-image-outset: var(--border-image-gap-med);
  border-image-slice: var(--border-image-slice-px-med);
}
body > header:after {
  position: absolute;
  content: "";
  display: block;
  background-color: var(--color-background-accent);
  width: var(--mm-image-animator-magic-over-size);
  height: var(--mm-image-animator-magic-over-size);
  top: var(--mm-image-animator-magic-over-size);
  left: var(--horiz-pad);
}
body > header.mm-image-animator-mmagic-over:after {
  background-color: var(--color-tappable-hover);
}

@media only screen and (min-width: 480px) {
  body > header {
    padding-left: var(--horiz-pad-big);
  }
}
body > header + main .boxout:last-of-type {
  margin-bottom: var(--section-gap);
  border-style: none;
  border-style: solid;
  border-width: var(--border-width-thin);
  border-image-width: var(--border-image-width-thin);
  border-color: var(--color-background-main);
  border-image-repeat: round;
  border-image-source: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='90' height='90'%3E%3Cg style='fill:%23670951;fill-opacity:1;stroke:none;stroke-width:0;stroke-dasharray:none;stroke-opacity:1'%3E%3Cpath d='M10 10h10v10H10zM70 10h10v10H70zM40 40h10v10H40zM40 10h10v10H40zM10 70h10v10H10zM40 70h10v10H40zM70 70h10v10H70zM70 40h10v10H70zM10 40h10v10H10z'/%3E%3C/g%3E%3C/svg%3E");
  border-image-outset: var(--border-image-gap-thin);
  border-image-slice: var(--border-image-slice-px-thin);
  padding-left: 2.1em;
}

body > header > input.search,
body > header > p.number-of-results,
body > header > ul.search-results {
  font-family: var(--font-family-main);
}

body > header > input.search {
  position: absolute;
  right: -20px;
  top: 0;
  text-align: right;
  outline: none;
  width: var(--search-input-width);
  font-size: var(--h4-font-size);
  font-weight: var(--font-weight-black);
  color: var(--color-tappable-tiny);
  background-color: var(--color-background-main);
  border-style: none;
  border-style: solid;
  border-width: var(--border-width-med);
  border-image-width: var(--border-image-width-med);
  border-color: var(--color-background-main);
  border-image-repeat: round;
  border-image-source: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='90' height='90'%3E%3Cg style='fill:%234a063a;fill-opacity:1;stroke:none;stroke-width:0;stroke-dasharray:none;stroke-opacity:1'%3E%3Cpath d='M10 10h10v10H10zM70 10h10v10H70zM40 40h10v10H40zM40 10h10v10H40zM10 70h10v10H10zM40 70h10v10H40zM70 70h10v10H70zM70 40h10v10H70zM10 40h10v10H10z'/%3E%3C/g%3E%3C/svg%3E");
  border-image-outset: var(--border-image-gap-med);
  border-image-slice: var(--border-image-slice-px-med);
  padding: 0 0.3em;
}
body > header > input.search::placeholder {
  color: var(--color-tappable-tiny);
}
body > header > input.search:focus, body > header > input.search:hover {
  border-style: none;
  border-style: solid;
  border-width: var(--border-width-med);
  border-image-width: var(--border-image-width-med);
  border-color: var(--color-background-main);
  border-image-repeat: round;
  border-image-source: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='90' height='90'%3E%3Cg style='fill:%23e156e1;fill-opacity:1;stroke:none;stroke-width:0;stroke-dasharray:none;stroke-opacity:1'%3E%3Cpath d='M10 10h10v10H10zM70 10h10v10H70zM40 40h10v10H40zM40 10h10v10H40zM10 70h10v10H10zM40 70h10v10H40zM70 70h10v10H70zM70 40h10v10H70zM10 40h10v10H10z'/%3E%3C/g%3E%3C/svg%3E");
  border-image-outset: var(--border-image-gap-med);
  border-image-slice: var(--border-image-slice-px-med);
  color: var(--color-foreground-console);
}
body > header > input.search:focus::placeholder, body > header > input.search:hover::placeholder {
  opacity: 1;
  color: var(--color-tappable-hover);
}
body > header > input.search.loading::placeholder {
  color: var(--color-accent-very-bright);
}
body > header > input.search.ready::placeholder {
  opacity: revert;
}

body > header > p.number-of-results {
  position: absolute;
  top: calc(0px + var(--border-image-width-med));
  right: calc(var(--horiz-pad-big) + var(--search-input-width));
  color: var(--color-foreground-console);
  font-weight: var(--font-weight-black);
}

body > header > ul.search-results {
  scrollbar-width: none;
  -ms-overflow-style: none;
  --outer-space: 33vw;
  max-width: calc(100vw - var(--outer-space));
  overflow-y: scroll;
  position: absolute;
  right: calc(-1 * var(--horiz-pad) - var(--vert-pad-half));
  padding-right: var(--horiz-pad);
  padding-bottom: var(--vert-pad-large);
  padding-top: 2em;
  top: var(--vert-pad);
  text-align: right;
  z-index: 1;
  margin: 2em 0 0 0;
  background-color: color-mix(in oklab, white, var(--color-background-main) 98%);
  border-style: none;
  border-left-style: solid;
  border-left-width: var(--border-width-med);
  border-bottom-style: solid;
  border-bottom-width: var(--border-width-med);
  border-image-width: initial initial var(--border-image-width-med) var(--border-image-width-med);
  border-color: var(--color-background-main);
  border-image-repeat: round;
  border-image-source: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='90' height='90'%3E%3Cg style='fill:%234a063a;fill-opacity:1;stroke:none;stroke-width:0;stroke-dasharray:none;stroke-opacity:1'%3E%3Cpath d='M10 10h10v10H10zM70 10h10v10H70zM40 40h10v10H40zM40 10h10v10H40zM10 70h10v10H10zM40 70h10v10H40zM70 70h10v10H70zM70 40h10v10H70zM10 40h10v10H10z'/%3E%3C/g%3E%3C/svg%3E");
  border-image-outset: var(--border-image-gap-med);
  border-image-slice: var(--border-image-slice-px-med);
  box-shadow: calc(-1 * var(--horiz-pad)) var(--vert-pad) var(--color-shadow);
}
body > header > ul.search-results::-webkit-scrollbar {
  width: 0;
  height: 0;
}
body > header > ul.search-results:empty {
  box-shadow: none;
  display: none;
}
body > header > ul.search-results li {
  text-align: right;
  margin: 0;
  padding-bottom: 2em;
}
body > header > ul.search-results li:before {
  display: none;
}
body > header > ul.search-results li a {
  text-decoration: none;
  cursor: pointer;
}
body > header > ul.search-results li a p {
  margin: 0;
  padding-right: 0.7em;
  line-height: var(--line-height-compact);
  color: var(--color-foreground);
}
body > header > ul.search-results li a p span {
  color: var(--color-background-main);
  background-color: var(--color-foreground);
}
body > header > ul.search-results li a p.title {
  color: var(--color-accent-bright);
  font-weight: var(--font-weight-black);
  margin-bottom: 0.15em;
}
body > header > ul.search-results li a p.title span {
  color: var(--color-background-main);
  background-color: var(--color-accent-bright);
}
body > header > ul.search-results li a p.link {
  font-weight: var(--font-weight-normal);
  color: var(--color-tappable);
  text-decoration-color: currentColor;
  text-decoration: underline;
  text-decoration-style: dashed;
  margin-bottom: 0.7em;
}
body > header > ul.search-results li a p.link:before {
  content: "";
  display: inline-block;
  position: absolute;
  left: -0.6em;
  color: var(--color-background-accent-tiny);
  line-height: 1.5rem;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='90' height='90'%3E%3Cg style='fill:%234d103e;fill-opacity:1;stroke:none;stroke-width:0;stroke-dasharray:none;stroke-opacity:1'%3E%3Cpath d='M10 10h10v10H10zM70 10h10v10H70zM40 40h10v10H40zM40 10h10v10H40zM10 70h10v10H10zM40 70h10v10H40zM70 70h10v10H70zM70 40h10v10H70zM10 40h10v10H10z'/%3E%3C/g%3E%3C/svg%3E");
  width: 1em;
  height: 1em;
  font-size: 0.6em;
  left: initial;
  right: 0;
  line-height: 2;
}
body > header > ul.search-results li a:hover p.link {
  color: var(--color-tappable-hover);
  text-decoration-color: var(--color-tappable);
  text-decoration: underline;
  text-decoration-style: dashed;
}
body > header > ul.search-results li a:hover p.link:before {
  color: var(--color-tappable-hover);
}

/*------------------------------------*
  TITLE / HOME LINK
*------------------------------------*/
body > header > a,
body > header > a:link,
body > header > a:hover,
body > header > a:visited {
  display: inline-block;
  font-family: var(--font-family-mono);
  font-size: 4.5em;
  display: inline-block;
  text-decoration: none;
  line-height: var(--line-height-roomy);
  border: none;
}

@media only screen and (min-width: 480px) {
  body > header > a {
    margin-top: var(--vert-pad);
    margin-bottom: 0;
  }
}
body > header > a > div {
  display: inline-block;
}

body > header > a > div > span {
  position: relative;
}

body > header > a > div > span::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
}

body > header > a:hover > div:first-of-type > span:nth-of-type(1)::after,
body > header > a:hover > div:first-of-type > span:nth-of-type(3)::after,
body > header > a:hover > div:last-of-type > span:nth-of-type(4)::after,
body > header > a:hover > div:last-of-type > span:nth-of-type(6)::after {
  border-color: var(--color-tappable-hover);
}

body > header > a > div:first-of-type > span:nth-of-type(4) {
  letter-spacing: -0.4em;
  color: var(--color-background-accent);
}

body > header > a:hover > div:first-of-type > span:nth-of-type(4) {
  color: var(--color-tappable-hover);
}

body > header > a > div:first-of-type > span:nth-of-type(1)::after,
body > header > a > div:first-of-type > span:nth-of-type(3)::after {
  bottom: -8px;
  border-bottom: solid 4px var(--color-background-accent);
}

body > header > a > div:last-of-type > span:nth-of-type(1) {
  letter-spacing: -0.1em;
  color: var(--color-background-accent);
}

body > header > a > div:last-of-type > span:nth-of-type(4)::after,
body > header > a > div:last-of-type > span:nth-of-type(6)::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  top: 0px;
  border-top: solid 4px var(--color-background-accent);
}

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

em {
  color: var(--color-accent-bright);
  padding-right: 3px;
  font-size: 102%;
}

.title-prefix {
  font-weight: var(--font-weight-bold);
}
.title-prefix em {
  font-style: normal;
  color: inherit;
}

main.home .boxout h1,
main.home .boxout h2,
main.home .boxout h3 {
  font-size: var(--h2-font-size);
  line-height: var(--line-height-normal);
  padding-left: 0;
}
main.home .boxout h1 {
  font-size: var(--h1-font-size);
}

main.home article {
  padding-left: var(--horiz-pad-med);
}
main.home h3 {
  margin: 0;
}
main.home details {
  margin: var(--vert-pad-half) 0 0 calc(-1 * var(--vert-pad-large));
}
main.home details summary h4 {
  margin: 0;
  line-height: var(--line-height-roomy);
}

main.home .list-summary {
  --number-width: 1.3rem;
}
main.home .list-summary h4 {
  position: relative;
}
main.home .list-summary h4 .title-prefix {
  position: absolute;
  width: var(--number-width);
  display: inline-block;
  text-align: right;
  left: 0;
  line-height: var(--line-height-roomy);
  pointer-events: none;
}
main.home .list-summary h4 .title-prefix em {
  display: none;
}
main.home .list-summary h4 .title-prefix + a {
  padding-left: calc(var(--number-width) + var(--horiz-pad));
  display: inline-block;
}
main.home .list-summary details > div {
  margin-left: calc(var(--vert-pad) + var(--number-width));
}

span.reading-time {
  white-space: nowrap;
}

article {
  margin-bottom: var(--section-gap);
}
article > div > h2:not(:first-of-type) {
  clear: both;
  padding-top: var(--vert-pad-large);
  border-style: none;
  border-top-style: solid;
  border-top-width: var(--border-width-med);
  border-image-width: var(--border-image-width-med) initial initial initial;
  border-color: var(--color-background-main);
  border-image-repeat: round;
  border-image-source: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='90' height='90'%3E%3Cg style='fill:%234a063a;fill-opacity:1;stroke:none;stroke-width:0;stroke-dasharray:none;stroke-opacity:1'%3E%3Cpath d='M10 10h10v10H10zM70 10h10v10H70zM40 40h10v10H40zM40 10h10v10H40zM10 70h10v10H10zM40 70h10v10H40zM70 70h10v10H70zM70 40h10v10H70zM10 40h10v10H10z'/%3E%3C/g%3E%3C/svg%3E");
  border-image-outset: var(--border-image-gap-med);
  border-image-slice: var(--border-image-slice-px-med);
}
article > div ul {
  overflow: hidden;
}
article div.content ul.gallery.single-item:first-of-type + p {
  padding-top: var(--vert-pad-large);
}

.list-summary {
  grid-template-columns: 1fr 4fr;
  grid-template-rows: auto 1fr;
  column-gap: var(--horiz-pad-med);
}

.list-summary > a:not(:first-child),
.list-summary.article-metadata > a + span {
  grid-row-start: 1;
  grid-row-end: 3;
  width: 100%;
  padding-left: var(--horiz-pad);
}

.list-summary > a > img {
  width: 100%;
  margin: 0;
  padding: 0;
}

.list-summary > a > img.flip-x {
  transform: scaleX(-1);
}

.list-summary > .article-metadata {
  min-height: initial;
}
.list-summary > .article-metadata > h3 .title-prefix {
  margin-right: var(--horiz-pad);
  color: var(--color-accent-bright);
  font-size: inherit;
  line-height: inherit;
}

.list-summary.article-metadata > a > h3 {
  display: inline;
  color: var(--color-tappable);
}

.list-summary.article-metadata > a + em {
  font-size: var(--h3-font-size);
  line-height: var(--line-height-normal);
  font-style: normal;
  font-weight: var(--font-weight-bold);
  margin-right: var(--horiz-pad);
}

.list-summary > .article-metadata > span + span,
.list-summary.article-metadata > a + em + span + span {
  display: block;
  margin-top: var(--vert-pad-half);
}
.list-summary > .article-metadata > span + span a,
.list-summary.article-metadata > a + em + span + span a {
  display: inline-block;
  margin-right: var(--horiz-pad);
  line-height: var(--line-height-roomy);
}
.list-summary > .article-metadata > span + span > span,
.list-summary.article-metadata > a + em + span + span > span {
  margin-right: var(--horiz-pad);
}

.list-summary.article-metadata > details > summary {
  text-decoration: none;
}

.list-summary > .article-metadata > * {
  margin: 0;
  padding: 0 var(--horiz-pad) 0 0;
  display: inline;
  overflow: hidden;
}

.list-summary > .article-metadata > time,
.list-summary > .article-metadata > a {
  display: inline-block;
  font-weight: var(--font-weight-normal);
}

.list-summary > .article-metadata > time {
  transform: translateY(0.1em);
  color: var(--color-accent-very-bright);
  font-weight: var(--font-weight-bold);
  padding-top: 0.2em;
  padding-bottom: 0.1em;
}

.list-summary > div:last-of-type {
  clear: both;
  margin-top: var(--vert-pad);
}

article:first-of-type header .boxout:first-of-type {
  margin-top: var(--vert-pad);
  margin-bottom: 0;
}

article:first-of-type header .boxout:last-of-type {
  margin-bottom: var(--section-gap);
}

article header {
  min-height: var(--section-gap);
  margin-top: var(--vert-pad-large);
}

.article-metadata h1 {
  margin-bottom: 0px;
  display: inline;
  margin-right: var(--vert-pad-half);
}

.article-metadata time {
  display: inline-block;
  margin-right: var(--vert-pad-half);
  color: var(--color-accent);
}

.article-metadata time:first-of-type:not(:last-of-type) {
  padding-right: 0;
  margin-right: 0;
}

.article-metadata time:nth-of-type(2) {
  color: var(--color-foreground-dim);
  font-size: 85%;
}

article .content {
  margin-bottom: var(--section-gap);
}
article .content > h3 > a {
  font-size: 0.8em;
}
article .content p {
  overflow: hidden;
}

/*--- PARAGRAPHS ---*/
p {
  margin-bottom: var(--vert-pad);
}

/*--- QUOTES ---*/
blockquote {
  margin: var(--vert-pad) var(--horiz-pad-big) var(--section-gap) -5px;
  padding-left: calc((var(--horiz-pad-med)) - 13px);
  padding-top: var(--vert-pad);
  padding-bottom: var(--vert-pad);
  font-weight: var(--font-weight-normal);
  font-size: 1.125em;
  line-height: var(--line-height-normal);
  color: var(--color-accent-bright);
  border-style: none;
  border-left-style: solid;
  border-left-width: var(--border-width-med);
  border-image-width: initial initial initial var(--border-image-width-med);
  border-color: var(--color-background-main);
  border-image-repeat: round;
  border-image-source: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='90' height='90'%3E%3Cg style='fill:%234a063a;fill-opacity:1;stroke:none;stroke-width:0;stroke-dasharray:none;stroke-opacity:1'%3E%3Cpath d='M10 10h10v10H10zM70 10h10v10H70zM40 40h10v10H40zM40 10h10v10H40zM10 70h10v10H10zM40 70h10v10H40zM70 70h10v10H70zM70 40h10v10H70zM10 40h10v10H10z'/%3E%3C/g%3E%3C/svg%3E");
  border-image-outset: var(--border-image-gap-med);
  border-image-slice: var(--border-image-slice-px-med);
}

blockquote *:last-child {
  margin-bottom: 0;
}

blockquote b {
  display: block;
  text-indent: 0;
}

/*--- TABLES ---*/
table {
  margin-bottom: var(--vert-pad-large);
  width: 100%;
  overflow: scroll;
  display: block;
}

table th {
  vertical-align: middle;
  padding-bottom: 6px;
  padding-top: 18px;
  color: var(--color-accent-bright);
}

table th:empty {
  display: none;
}

table td {
  vertical-align: top;
  padding-top: var(--vert-pad-half);
  padding-bottom: 18px;
}

table th,
table td {
  padding-left: clamp(2px, 15px, var(--horiz-pad-big));
  padding-right: clamp(2px, 15px, var(--horiz-pad-big));
  border: none;
  line-height: 1.2;
}

table th:not(:last-of-type),
table td:not(:last-of-type) {
  border-style: none;
  border-right-style: solid;
  border-right-width: var(--border-width-thin);
  border-image-width: initial var(--border-image-width-thin) initial initial;
  border-color: var(--color-background-main);
  border-image-repeat: round;
  border-image-source: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='90' height='90'%3E%3Cg style='fill:%23670951;fill-opacity:1;stroke:none;stroke-width:0;stroke-dasharray:none;stroke-opacity:1'%3E%3Cpath d='M10 10h10v10H10zM70 10h10v10H70zM40 40h10v10H40zM40 10h10v10H40zM10 70h10v10H10zM40 70h10v10H40zM70 70h10v10H70zM70 40h10v10H70zM10 40h10v10H10z'/%3E%3C/g%3E%3C/svg%3E");
  border-image-outset: var(--border-image-gap-thin);
  border-image-slice: var(--border-image-slice-px-thin);
}

table th,
table tr:not(:last-of-type) {
  border-style: none;
  border-bottom-style: solid;
  border-bottom-width: var(--border-width-thin);
  border-image-width: initial initial var(--border-image-width-thin) initial;
  border-color: var(--color-background-main);
  border-image-repeat: round;
  border-image-source: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='90' height='90'%3E%3Cg style='fill:%23670951;fill-opacity:1;stroke:none;stroke-width:0;stroke-dasharray:none;stroke-opacity:1'%3E%3Cpath d='M10 10h10v10H10zM70 10h10v10H70zM40 40h10v10H40zM40 10h10v10H40zM10 70h10v10H10zM40 70h10v10H40zM70 70h10v10H70zM70 40h10v10H70zM10 40h10v10H10z'/%3E%3C/g%3E%3C/svg%3E");
  border-image-outset: var(--border-image-gap-thin);
  border-image-slice: var(--border-image-slice-px-thin);
}

table th:first-of-type,
table td:first-of-type {
  width: var(--inset-large);
}

/*--- EXPAND ALL TOGGLE ---*/
.expand-all-toggle {
  margin-top: var(--section-gap);
  display: block;
  clear: both;
}

.expand-all-toggle > label * {
  display: inline;
}

.expand-all-toggle > label > input[type=checkbox],
.expand-all-toggle > label {
  display: none;
}

.expand-all-toggle.js-visible > label > input[type=checkbox] {
  display: inline-grid;
  transform: translateY(-0.1em);
}

.expand-all-toggle.js-visible > label {
  display: block;
  cursor: pointer;
}

.expand-all-toggle > label > *:nth-last-child(3) {
  margin-right: var(--horiz-pad);
}

.expand-all-toggle > label > span:last-of-type {
  display: inline-block;
  color: var(--color-tappable);
  vertical-align: text-bottom;
  cursor: pointer;
  text-decoration-color: currentColor;
  text-decoration: underline;
  text-decoration-style: dashed;
  transform: translateY(0.45em);
  line-height: 2.2;
  margin-right: 0.25em;
}

.expand-all-toggle > label:hover > span {
  color: var(--color-tappable-hover);
  text-decoration-color: var(--color-tappable);
  text-decoration: underline;
  text-decoration-style: dashed;
}

.expand-all-toggle > script + * {
  margin-top: var(--vert-pad-large);
}

main.home .expand-all-toggle.js-visible {
  position: relative;
}
main.home .expand-all-toggle.js-visible > label {
  display: inline-block;
  position: absolute;
  right: calc(100% - var(--vert-pad) - 0.2em);
}
main.home .expand-all-toggle.js-visible > label > input[type=checkbox] {
  border: none;
  height: 2em;
}
main.home .expand-all-toggle.js-visible > label > input[type=checkbox]:before {
  content: "";
  transform: scale(1);
  background-color: initial;
  clip-path: none;
  font-size: 300%;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' height='24px' viewBox='0 -960 960 960' width='24px' fill='%23670951'%3E%3Cpath d='M480-80 240-320l57-57 183 183 183-183 57 57L480-80ZM298-584l-58-56 240-240 240 240-58 56-182-182-182 182Z'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-size: 100% 100%;
}
main.home .expand-all-toggle.js-visible > label > input[type=checkbox]:checked:before {
  background-image: url("data:image/svg+xml,%0A%3Csvg xmlns='http://www.w3.org/2000/svg' height='24px' viewBox='0 -960 960 960' width='24px' fill='%23670951'%3E%3Cpath d='m296-80-56-56 240-240 240 240-56 56-184-184L296-80Zm184-504L240-824l56-56 184 184 184-184 56 56-240 240Z'/%3E%3C/svg%3E");
}
main.home .expand-all-toggle.js-visible > label > input[type=checkbox]:hover:before {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' height='24px' viewBox='0 -960 960 960' width='24px' fill='%23ff28ff'%3E%3Cpath d='M480-80 240-320l57-57 183 183 183-183 57 57L480-80ZM298-584l-58-56 240-240 240 240-58 56-182-182-182 182Z'/%3E%3C/svg%3E");
}
main.home .expand-all-toggle.js-visible > label > input[type=checkbox]:hover:checked:before {
  background-image: url("data:image/svg+xml,%0A%3Csvg xmlns='http://www.w3.org/2000/svg' height='24px' viewBox='0 -960 960 960' width='24px' fill='%23ff28ff'%3E%3Cpath d='m296-80-56-56 240-240 240 240-56 56-184-184L296-80Zm184-504L240-824l56-56 184 184 184-184 56 56-240 240Z'/%3E%3C/svg%3E");
}

/*--- DETAILS/SUMMARY ---*/
details {
  display: block;
  border-color: transparent;
  margin-bottom: var(--vert-pad);
  clear: both;
}

details[open] {
  margin-bottom: var(--section-gap);
}

details > summary {
  cursor: pointer;
  overflow-y: auto;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  margin-left: 1.8em;
}

details > summary::before {
  content: "";
  display: inline-block;
  width: 2em;
  height: 2em;
  position: absolute;
  margin-left: -2.1em;
  border-style: none;
  border-left-style: solid;
  border-left-width: var(--border-width-med);
  border-image-width: initial initial initial var(--border-image-width-med);
  border-color: var(--color-background-main);
  border-image-repeat: round;
  border-image-source: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='90' height='90'%3E%3Cg style='fill:%234a063a;fill-opacity:1;stroke:none;stroke-width:0;stroke-dasharray:none;stroke-opacity:1'%3E%3Cpath d='M10 10h10v10H10zM70 10h10v10H70zM40 40h10v10H40zM40 10h10v10H40zM10 70h10v10H10zM40 70h10v10H40zM70 70h10v10H70zM70 40h10v10H70zM10 40h10v10H10z'/%3E%3C/g%3E%3C/svg%3E");
  border-image-outset: var(--border-image-gap-med);
  border-image-slice: var(--border-image-slice-px-med);
}

details.table-of-contents {
  margin-left: calc(1 * var(--horiz-pad));
  margin-right: calc(1 * var(--horiz-pad-med));
  border-style: none;
  border-style: solid;
  border-width: var(--border-width-med);
  border-image-width: var(--border-image-width-med);
  border-color: var(--color-background-main);
  border-image-repeat: round;
  border-image-source: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='90' height='90'%3E%3Cg style='fill:%234a063a;fill-opacity:1;stroke:none;stroke-width:0;stroke-dasharray:none;stroke-opacity:1'%3E%3Cpath d='M10 10h10v10H10zM70 10h10v10H70zM40 40h10v10H40zM40 10h10v10H40zM10 70h10v10H10zM40 70h10v10H40zM70 70h10v10H70zM70 40h10v10H70zM10 40h10v10H10z'/%3E%3C/g%3E%3C/svg%3E");
  border-image-outset: var(--border-image-gap-med);
  border-image-slice: var(--border-image-slice-px-med);
  padding-bottom: calc(1.5 * var(--vert-pad));
}
details.table-of-contents > summary {
  padding: var(--vert-pad) 0 0 0;
}
details.table-of-contents > summary::before {
  display: none;
}
details.table-of-contents > summary span {
  margin-left: calc(1 * var(--horiz-pad));
  text-decoration-color: currentColor;
  text-decoration: underline;
  text-decoration-style: dashed;
}
details.table-of-contents[open] > summary::after {
  content: "close";
  position: absolute;
  right: calc(var(--horiz-pad-big) + var(--horiz-pad-big));
  text-decoration-color: currentColor;
  text-decoration: underline;
  text-decoration-style: dashed;
}
details.table-of-contents[open] #TableOfContents > ul {
  margin: 0 0 0 var(--horiz-pad);
  padding: 0;
}
details.table-of-contents[open] #TableOfContents > ul > li {
  margin-bottom: var(--vert-pad);
}

details > summary:not(:has(h3:hover)):hover::before {
  margin-left: -2.35em;
  height: 1em;
  border-style: none;
  border-bottom-style: solid;
  border-bottom-width: var(--border-width-med);
  border-image-width: initial initial var(--border-image-width-med) initial;
  border-color: var(--color-background-main);
  border-image-repeat: round;
  border-image-source: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='90' height='90'%3E%3Cg style='fill:%23670951;fill-opacity:1;stroke:none;stroke-width:0;stroke-dasharray:none;stroke-opacity:1'%3E%3Cpath d='M10 10h10v10H10zM70 10h10v10H70zM40 40h10v10H40zM40 10h10v10H40zM10 70h10v10H10zM40 70h10v10H40zM70 70h10v10H70zM70 40h10v10H70zM10 40h10v10H10z'/%3E%3C/g%3E%3C/svg%3E");
  border-image-outset: var(--border-image-gap-med);
  border-image-slice: var(--border-image-slice-px-med);
  transform: translateX(-0.1em);
}

details[open] > summary::before {
  margin-left: -2.35em;
  border-style: none;
  border-bottom-style: solid;
  border-bottom-width: var(--border-width-med);
  border-image-width: initial initial var(--border-image-width-med) initial;
  border-color: var(--color-background-main);
  border-image-repeat: round;
  border-image-source: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='90' height='90'%3E%3Cg style='fill:%234a063a;fill-opacity:1;stroke:none;stroke-width:0;stroke-dasharray:none;stroke-opacity:1'%3E%3Cpath d='M10 10h10v10H10zM70 10h10v10H70zM40 40h10v10H40zM40 10h10v10H40zM10 70h10v10H10zM40 70h10v10H40zM70 70h10v10H70zM70 40h10v10H70zM10 40h10v10H10z'/%3E%3C/g%3E%3C/svg%3E");
  border-image-outset: var(--border-image-gap-med);
  border-image-slice: var(--border-image-slice-px-med);
  transform: translateX(-0.1em);
}

details[open] > summary:not(:has(h3:hover)):hover::before {
  margin-left: -2.35em;
  border-style: none;
  border-top-style: solid;
  border-top-width: var(--border-width-med);
  border-image-width: var(--border-image-width-med) initial initial initial;
  border-color: var(--color-background-main);
  border-image-repeat: round;
  border-image-source: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='90' height='90'%3E%3Cg style='fill:%23670951;fill-opacity:1;stroke:none;stroke-width:0;stroke-dasharray:none;stroke-opacity:1'%3E%3Cpath d='M10 10h10v10H10zM70 10h10v10H70zM40 40h10v10H40zM40 10h10v10H40zM10 70h10v10H10zM40 70h10v10H40zM70 70h10v10H70zM70 40h10v10H70zM10 40h10v10H10z'/%3E%3C/g%3E%3C/svg%3E");
  border-image-outset: var(--border-image-gap-med);
  border-image-slice: var(--border-image-slice-px-med);
}

details > summary::-webkit-details-marker,
details > summary::marker {
  color: var(--color-accent-very-bright);
  display: none;
  content: "";
}

details > summary > span {
  color: var(--color-tappable);
  float: right;
  width: calc(100% - var(--horiz-pad-med) + var(--border-width-thick));
  padding-right: var(--horiz-pad);
  display: flex;
  align-items: center;
}
details > summary > span h4 {
  margin-top: calc(1.5 * var(--vert-pad-half));
  margin-bottom: var(--vert-pad-half);
}

details > summary:hover > span {
  color: var(--color-tappable-hover);
}

details > summary > span *:not(img):not(h4) {
  margin-bottom: 0;
}

details > div {
  margin-left: var(--vert-pad);
  margin-right: 2px;
  padding-top: var(--vert-pad-half);
  padding-left: var(--vert-pad);
  padding-right: var(--vert-pad);
  padding-bottom: var(--vert-pad);
}

details > div > blockquote,
details > div > ul,
details > div > ol {
  margin-left: var(--horiz-pad);
}

details > div > ul:last-child,
details > div > ol:last-child {
  margin-bottom: 0;
}

/*------------------------------------*



  FOOTER

*------------------------------------*/
body > footer {
  margin-top: 120px;
  padding-top: var(--vert-pad-large);
  display: flex;
  flex-flow: row;
  column-gap: var(--horiz-pad-big);
  row-gap: var(--vert-pad-large);
  justify-content: space-between;
  flex-wrap: wrap;
  border-style: none;
  border-top-style: solid;
  border-top-width: var(--border-width-med);
  border-image-width: var(--border-image-width-med) initial initial initial;
  border-color: var(--color-background-main);
  border-image-repeat: round;
  border-image-source: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='90' height='90'%3E%3Cg style='fill:%234a063a;fill-opacity:1;stroke:none;stroke-width:0;stroke-dasharray:none;stroke-opacity:1'%3E%3Cpath d='M10 10h10v10H10zM70 10h10v10H70zM40 40h10v10H40zM40 10h10v10H40zM10 70h10v10H10zM40 70h10v10H40zM70 70h10v10H70zM70 40h10v10H70zM10 40h10v10H10z'/%3E%3C/g%3E%3C/svg%3E");
  border-image-outset: var(--border-image-gap-med);
  border-image-slice: var(--border-image-slice-px-med);
  padding-right: var(--horiz-pad-big);
  padding-bottom: var(--section-gap);
  padding-left: var(--horiz-pad-big);
  align-items: baseline;
}

body > footer > section {
  display: inline-flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: baseline;
  flex-grow: 1;
  column-gap: var(--horiz-pad-big);
  row-gap: var(--vert-pad-large);
}
@media only screen and (min-width: 480px) {
  body > footer > section {
    flex-wrap: initial;
    justify-content: space-between;
  }
}
body > footer > section:first-of-type {
  --horiz-offset: calc(var(--horiz-pad) + var(--vert-pad-half));
  width: calc(100% + var(--horiz-offset) * 2);
  margin-left: calc(-1 * var(--horiz-offset));
  margin-right: calc(-1 * var(--horiz-offset));
}
body > footer > section:last-of-type {
  margin-top: var(--vert-pad);
}
body > footer > section:last-of-type * {
  font-size: var(--font-size-very-small);
}

body > footer > section > p,
body > footer ul,
body > footer ul li,
body > footer > section h4 {
  margin-top: 0;
  margin-bottom: 0;
}

body > footer > section h4 {
  margin-right: 1em;
}

body > footer ul {
  padding-left: 0;
  margin-left: 0;
  margin-bottom: 0;
  margin-right: 0;
  display: inline-flex;
  column-gap: var(--vert-pad-half);
  row-gap: var(--vert-pad-half);
  flex-wrap: wrap;
}
body > footer ul:last-of-type {
  justify-content: flex-end;
  flex-grow: 1;
}

body > footer ul li::before {
  content: none;
}

body > footer ul li {
  padding-left: 0;
  font-size: var(--font-size-very-small);
}
body > footer ul li a.big-button {
  font-size: inherit;
  font-weight: var(--font-weight-black);
}

body > footer section:last-of-type > p a {
  margin-right: 0.5em;
}

body > footer p.copyright {
  color: var(--color-foreground-dim);
  display: flex;
  align-items: start;
}
body > footer p.copyright > em {
  color: inherit;
  font-size: 240%;
  line-height: 0.9;
  padding-right: 0.15em;
}

body > footer section p a.big-button,
body > footer ul a.big-button {
  border-style: none;
  border-style: solid;
  border-width: var(--border-width-thin);
  border-image-width: var(--border-image-width-thin);
  border-color: var(--color-background-main);
  border-image-repeat: round;
  border-image-source: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='90' height='90'%3E%3Cg style='fill:%23670951;fill-opacity:1;stroke:none;stroke-width:0;stroke-dasharray:none;stroke-opacity:1'%3E%3Cpath d='M10 10h10v10H10zM70 10h10v10H70zM40 40h10v10H40zM40 10h10v10H40zM10 70h10v10H10zM40 70h10v10H40zM70 70h10v10H70zM70 40h10v10H70zM10 40h10v10H10z'/%3E%3C/g%3E%3C/svg%3E");
  border-image-outset: var(--border-image-gap-thin);
  border-image-slice: var(--border-image-slice-px-thin);
  color: var(--color-foreground-dim);
  margin-bottom: 0;
  font-size: initial;
  line-height: var(--line-height-normal);
  padding: 0 var(--horiz-pad);
  font-weight: var(--font-weight-normal);
  width: 7em;
  text-align: center;
}
body > footer section p a.big-button:hover,
body > footer ul a.big-button:hover {
  border-style: none;
  border-style: solid;
  border-width: var(--border-width-thin);
  border-image-width: var(--border-image-width-thin);
  border-color: var(--color-background-main);
  border-image-repeat: round;
  border-image-source: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='90' height='90'%3E%3Cg style='fill:%23ff28ff;fill-opacity:1;stroke:none;stroke-width:0;stroke-dasharray:none;stroke-opacity:1'%3E%3Cpath d='M10 10h10v10H10zM70 10h10v10H70zM40 40h10v10H40zM40 10h10v10H40zM10 70h10v10H10zM40 70h10v10H40zM70 70h10v10H70zM70 40h10v10H70zM10 40h10v10H10z'/%3E%3C/g%3E%3C/svg%3E");
  border-image-outset: var(--border-image-gap-thin);
  border-image-slice: var(--border-image-slice-px-thin);
}

body > footer section p a.big-button {
  color: var(--color-foreground);
  white-space: nowrap;
  width: initial;
  font-weight: var(--font-weight-bold);
}

a.rss:after,
a:link.rss:after,
a:hover.rss:after,
a:visited.rss:after {
  content: "";
  background: var(--color-accent);
  -webkit-mask-image: url("/images/rss-icon.svg");
  mask-image: url("/images/rss-icon.svg");
  width: 1em;
  height: 1em;
  mask-size: auto 100%;
  transform: scaleX(-1);
  position: absolute;
  width: 1em;
  right: calc(var(--horiz-pad) + var(--horiz-pad));
  margin-top: 0.25em;
}
a.rss:hover:after,
a:link.rss:hover:after,
a:hover.rss:hover:after,
a:visited.rss:hover:after {
  background: var(--color-tappable-hover);
}

/*------------------------------------*



  GALLERY

*------------------------------------*/
/* Block accidental scrolling of page while gallery item is open */
body:has(ul.gallery li input[type=checkbox]:checked) {
  overflow: hidden;
}

ul.gallery {
  display: grid;
  row-gap: var(--vert-pad);
  column-gap: var(--horiz-pad-big);
  padding-left: calc(var(--horiz-pad-med) + var(--horiz-pad));
  padding-right: var(--horiz-pad-big);
  padding-bottom: var(--vert-pad-large);
  margin: 0;
}
@media only screen and (min-width: 480px) {
  ul.gallery {
    grid-template-columns: repeat(auto-fit, var(--gallery-item-width));
  }
}

ul.gallery.float {
  float: left;
}

ul.gallery.single-item:not(.float) {
  padding-top: calc(1 * var(--vert-pad-half));
  padding-bottom: calc(1 * var(--vert-pad-half));
  padding-right: var(--horiz-pad-med);
  padding-left: calc(1 * var(--vert-pad-half));
  grid-template-columns: 1fr;
}
ul.gallery.single-item:not(.float):not(:only-child) {
  float: left;
  clear: both;
  width: calc(50% - var(--horiz-pad-big));
}

p + ul.gallery {
  padding-top: var(--vert-pad-large);
}

td ul.gallery {
  padding-left: 0;
  padding-bottom: 0;
}

ul.gallery li {
  padding-left: 0;
  align-items: center;
  justify-content: center;
  margin-bottom: 0;
}

ul.gallery li::before {
  content: none;
}

ul.gallery li input[type=checkbox] {
  display: none;
}

ul.gallery li input[type=checkbox] + label {
  cursor: pointer;
}

/* Normal image */
ul.gallery li input[type=checkbox] + label img {
  width: 100%;
  object-fit: cover;
  margin-left: calc(-1 * var(--border-width-thin));
}

ul.gallery li video,
ul.gallery li input[type=checkbox] + label img {
  border-style: none;
  border-style: solid;
  border-width: var(--border-width-thin);
  border-image-width: var(--border-image-width-thin);
  border-color: var(--color-background-main);
  border-image-repeat: round;
  border-image-source: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='90' height='90'%3E%3Cg style='fill:%23670951;fill-opacity:1;stroke:none;stroke-width:0;stroke-dasharray:none;stroke-opacity:1'%3E%3Cpath d='M10 10h10v10H10zM70 10h10v10H70zM40 40h10v10H40zM40 10h10v10H40zM10 70h10v10H10zM40 70h10v10H40zM70 70h10v10H70zM70 40h10v10H70zM10 40h10v10H10z'/%3E%3C/g%3E%3C/svg%3E");
  border-image-outset: var(--border-image-gap-thin);
  border-image-slice: var(--border-image-slice-px-thin);
}
ul.gallery li video:hover,
ul.gallery li input[type=checkbox] + label:hover img {
  border-style: none;
  border-style: solid;
  border-width: var(--border-width-thin);
  border-image-width: var(--border-image-width-thin);
  border-color: var(--color-background-main);
  border-image-repeat: round;
  border-image-source: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='90' height='90'%3E%3Cg style='fill:%23ff28ff;fill-opacity:1;stroke:none;stroke-width:0;stroke-dasharray:none;stroke-opacity:1'%3E%3Cpath d='M10 10h10v10H10zM70 10h10v10H70zM40 40h10v10H40zM40 10h10v10H40zM10 70h10v10H10zM40 70h10v10H40zM70 70h10v10H70zM70 40h10v10H70zM10 40h10v10H10z'/%3E%3C/g%3E%3C/svg%3E");
  border-image-outset: var(--border-image-gap-thin);
  border-image-slice: var(--border-image-slice-px-thin);
}

/* Normal label text */
ul.gallery li > span,
ul.gallery li input[type=checkbox] + label span {
  font-size: 0.85em;
  line-height: var(--line-height-normal);
  display: block;
  height: 4em;
  overflow: hidden;
  width: 100%;
  color: var(--color-accent-bright);
  padding: var(--vert-pad-half) 0 0 0;
  font-weight: var(--font-weight-normal);
}
ul.gallery li > span em,
ul.gallery li input[type=checkbox] + label span em {
  font-style: normal;
  color: var(--color-foreground-dim);
}

ul.gallery li input[type=checkbox] + label:hover span {
  color: var(--color-foreground-console);
}

ul.gallery li input[type=checkbox]:checked + label {
  z-index: 2;
  position: relative;
  --close-btn-width: 3em;
}

ul.gallery li video {
  width: 100%;
  object-fit: cover;
  margin-left: calc(-1 * var(--border-width-thin));
}

/* Expanded image */
ul.gallery li input[type=checkbox]:checked + label img {
  position: fixed;
  bottom: 0;
  left: 0;
  width: 100%;
  height: 100%;
  object-fit: contain;
  margin-left: initial;
  border: solid var(--vert-pad-large) transparent;
  box-sizing: border-box;
  cursor: default;
  pointer-events: all;
  background-color: var(--color-background-main);
  padding-top: calc(var(--gallery-zoomed-label-height) + var(--vert-pad-half));
}

/* Expanded label text */
ul.gallery li video + span:empty {
  display: none;
}

ul.gallery li video + span {
  position: initial;
}

ul.gallery li input[type=checkbox]:checked + label span {
  position: fixed;
  top: 0;
  height: var(--gallery-zoomed-label-height);
  padding-left: calc(var(--close-btn-width) + var(--vert-pad-half));
  padding-right: calc(var(--close-btn-width) + var(--vert-pad-half));
  width: initial;
  left: 0;
  right: 0;
  display: flex;
  place-content: center;
  font-size: 1.25em;
  color: var(--color-accent);
  text-align: center;
  overflow: initial;
}

/* Close button */
ul.gallery li input[type=checkbox]:checked + label::after {
  content: "close";
  text-decoration-color: currentColor;
  text-decoration: underline;
  text-decoration-style: dashed;
  padding: 0 0.5em;
  position: fixed;
  top: var(--vert-pad-half);
  right: var(--vert-pad-half);
  width: var(--close-btn-width);
  cursor: pointer;
  font-weight: var(--font-weight-normal);
  background-color: var(--color-background-emphasis);
  color: var(--color-tappable);
}

.table-of-contents {
  margin-top: calc(-1 * var(--vert-pad));
  margin-bottom: var(--vert-pad-large);
}

.a-z,
.tags {
  border-style: none;
  border-top-style: solid;
  border-top-width: var(--border-width-med);
  border-image-width: var(--border-image-width-med) initial initial initial;
  border-color: var(--color-background-main);
  border-image-repeat: round;
  border-image-source: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='90' height='90'%3E%3Cg style='fill:%234a063a;fill-opacity:1;stroke:none;stroke-width:0;stroke-dasharray:none;stroke-opacity:1'%3E%3Cpath d='M10 10h10v10H10zM70 10h10v10H70zM40 40h10v10H40zM40 10h10v10H40zM10 70h10v10H10zM40 70h10v10H40zM70 70h10v10H70zM70 40h10v10H70zM10 40h10v10H10z'/%3E%3C/g%3E%3C/svg%3E");
  border-image-outset: var(--border-image-gap-med);
  border-image-slice: var(--border-image-slice-px-med);
  padding-left: var(--horiz-pad);
}
.a-z h2,
.tags h2 {
  color: var(--color-foreground-dim);
  padding-top: var(--vert-pad-large);
  margin-top: 0;
  margin-bottom: var(--vert-pad);
  clear: both;
}
.a-z ul,
.tags ul {
  display: grid;
  row-gap: var(--vert-pad);
  grid-template-columns: repeat(auto-fill, minmax(var(--list-link-width), 1fr));
  column-gap: var(--horiz-pad-big);
  margin-left: calc(var(--horiz-pad-med) - 1em);
}
.a-z ul li,
.tags ul li {
  position: relative;
}
.a-z ul li a,
.tags ul li a {
  display: inline;
}
.a-z ul li > em,
.tags ul li > em {
  position: absolute;
  top: -1.3em;
  left: 0.5em;
  font-style: normal;
  font-weight: bold;
  font-size: 70%;
}
.a-z ul li > span em,
.tags ul li > span em {
  color: var(--color-foreground-dim);
}
.a-z.all-tags ul,
.tags.all-tags ul {
  row-gap: 0;
  column-gap: 0;
}
.a-z.all-tags ul li,
.tags.all-tags ul li {
  flex-basis: initial;
}
.a-z.all-tags ul li a,
.tags.all-tags ul li a {
  display: inline-block;
}
.a-z.all-tags ul li::before,
.tags.all-tags ul li::before {
  content: none;
}

.a-z {
  border-style: none;
  border-top-style: solid;
  border-top-width: var(--border-width-med);
  border-image-width: var(--border-image-width-med) initial initial initial;
  border-color: var(--color-background-main);
  border-image-repeat: round;
  border-image-source: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='90' height='90'%3E%3Cg style='fill:%234a063a;fill-opacity:1;stroke:none;stroke-width:0;stroke-dasharray:none;stroke-opacity:1'%3E%3Cpath d='M10 10h10v10H10zM70 10h10v10H70zM40 40h10v10H40zM40 10h10v10H40zM10 70h10v10H10zM40 70h10v10H40zM70 70h10v10H70zM70 40h10v10H70zM10 40h10v10H10z'/%3E%3C/g%3E%3C/svg%3E");
  border-image-outset: var(--border-image-gap-med);
  border-image-slice: var(--border-image-slice-px-med);
}
.a-z h2 {
  padding-left: var(--horiz-pad);
}
.a-z ul li span.title-prefix {
  color: var(--color-accent);
  margin-right: 0.5em;
}

/*------------------------------------*



  BOXOUTS

*------------------------------------*/
.boxout {
  padding: var(--vert-pad-large) var(--horiz-pad-med) var(--vert-pad) var(--horiz-pad-med);
  border-radius: var(--corner-radius);
  background-color: var(--color-background-emphasis);
  position: relative;
}

.boxout + .boxout {
  padding-top: var(--vert-pad-large);
  padding-bottom: var(--vert-pad);
}

.boxout h1,
.boxout h2 {
  margin-top: var(--vert-pad);
}

.boxout + .boxout h3 {
  margin-top: 0;
}

.boxout h2 {
  color: var(--color-accent-bright);
}

.boxout h4 {
  margin-top: 0;
  margin-bottom: 0.5em;
  color: var(--color-accent-very-bright);
}

.boxout > img:first-child {
  -webkit-mask-image: url(/images/screentone-pixel-grid.png);
  mask-image: url(/images/screentone-pixel-grid.png);
  -webkit-mask-repeat: repeat;
  mask-repeat: repeat;
  mask-size: 180px;
  -webkit-mask-size: 180px;
  mask-origin: content-box;
  -webkit-mask-origin: content-box;
  width: calc(var(--gallery-item-width) - var(--horiz-pad));
}

.boxout > img:first-child + h2 + p,
.boxout > img:first-child + h2 + small {
  clear: both;
}

.boxout img {
  float: left;
  margin-right: var(--horiz-pad);
  margin-bottom: var(--vert-pad-half);
}

.boxout span {
  display: flex;
  flex-wrap: wrap;
}

.boxout span:not(:last-of-type) {
  margin-bottom: var(--vert-pad);
}

.boxout span p,
.boxout span a {
  word-break: break-all;
  line-height: var(--line-height-compact);
}

.boxout small {
  display: grid;
  grid-column-gap: var(--horiz-pad-med);
  margin-bottom: calc(1 * var(--vert-pad));
  align-items: start;
}

.boxout small h4 {
  vertical-align: top;
  line-height: var(--line-height-compact);
}

.boxout small a {
  word-break: break-all;
  line-height: var(--line-height-compact);
}

@media only screen and (min-width: 480px) {
  .boxout small {
    grid-template-columns: calc(var(--horiz-pad-big) + var(--vert-pad-half)) auto;
  }
  .boxout small h4 {
    text-align: right;
  }
  .boxout small a {
    word-break: normal;
  }
}
/*------------------------------------*



  CODE

*------------------------------------*/
pre,
code,
p.live-code-embed {
  font-family: var(--font-family-mono);
}

pre {
  overflow-x: scroll;
  resize: both;
  padding: var(--vert-pad);
}

.chroma {
  background-color: var(--color-background-emphasis);
}

code {
  background-color: var(--color-background-emphasis);
  padding: 0.2em 0.3em 0.3em;
  font-weight: var(--font-weight-bold);
  color: var(--color-foreground-console);
}

pre > code {
  padding: 0;
  line-height: var(--line-height-roomy);
  font-size: var(--font-size-small);
  font-weight: var(--font-weight-normal);
}

p.live-code-embed {
  display: flex;
  column-gap: var(--horiz-pad);
  color: var(--color-foreground-dim);
  font-size: 0.7em;
  line-height: var(--line-height-roomy);
  margin-top: 0;
  padding-top: var(--vert-pad-half);
  padding: var(--vert-pad-half) 0 var(--vert-pad) 0;
  background-color: var(--color-background-main);
}
p.live-code-embed span {
  text-align: right;
  width: calc(var(--horiz-pad-big) - var(--horiz-pad));
}

/*------------------------------------*
  LINKS
*------------------------------------*/
a,
a:link,
a:hover,
a:visited,
details > summary {
  color: var(--color-tappable);
  text-decoration-color: currentColor;
  text-decoration: underline;
  text-decoration-style: dashed;
  cursor: pointer;
}

details > summary {
  text-decoration-color: #e04c64;
  text-decoration: underline;
  text-decoration-style: dashed;
}

a:hover {
  color: var(--color-tappable-hover);
  text-decoration-color: #e156e1;
  text-decoration: underline;
  text-decoration-style: dashed;
}

/*------------------------------------*



  SPECIAL <small> INSERTED USING
  SHORTCODE

*------------------------------------*/
small.special {
  background-color: var(--color-background-emphasis);
  display: block;
  line-height: var(--line-height-compact);
  color: var(--color-foreground-dim);
  margin-top: var(--vert-pad-half);
  font-weight: var(--font-weight-bold);
}

p + small.special {
  padding: var(--vert-pad-half) var(--horiz-pad) var(--vert-pad);
}
p + small.special h4 {
  margin-top: 0;
  margin-bottom: 0;
}

small.special > h4 {
  margin-top: calc(-1 * var(--vert-pad));
  margin-bottom: 0;
  color: var(--color-accent-very-bright);
  font-weight: var(--font-weight-bold);
}

small.special > p {
  margin-bottom: 0;
  line-height: var(--line-height-compact);
}

small.special > p > em {
  display: inline-block;
  line-height: var(--line-height-compact);
}

small.special > table td {
  padding-bottom: var(--vert-pad-half);
}

small.special > table td,
small.special > table thead tr,
small.special > table tr:not(:last-of-type),
small.special > table td:not(:last-of-type) {
  border: none;
  line-height: var(--line-height-compact);
}

em.star {
  font-size: 200%;
  width: 0.5em;
  display: inline-block;
  vertical-align: bottom;
  transform: translateX(-0.2em);
  color: var(--color-accent-very-bright);
}

span.chip {
  display: flex;
  margin-bottom: 0.2em;
  height: 3em;
  align-items: center;
  text-align: center;
  border-radius: var(--corner-radius);
}

span.chip > span {
  color: rgb(255, 255, 255);
  mix-blend-mode: difference;
  display: inline-block;
  padding: 0 9px;
  line-height: 1;
  font-weight: var(--font-weight-bold);
  width: 100%;
}

img.inline-icon {
  display: inline-block;
  width: var(--horiz-pad-med);
  margin-right: var(--horiz-pad);
  object-fit: cover;
  vertical-align: middle;
  float: left;
}

hr {
  border: none;
  height: var(--border-width-thin);
  margin-top: var(--vert-pad-large);
  margin-bottom: var(--vert-pad);
  border-style: none;
  border-bottom-style: solid;
  border-bottom-width: var(--border-width-thin);
  border-image-width: initial initial var(--border-image-width-thin) initial;
  border-color: var(--color-background-main);
  border-image-repeat: round;
  border-image-source: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='90' height='90'%3E%3Cg style='fill:%234d103e;fill-opacity:1;stroke:none;stroke-width:0;stroke-dasharray:none;stroke-opacity:1'%3E%3Cpath d='M10 10h10v10H10zM70 10h10v10H70zM40 40h10v10H40zM40 10h10v10H40zM10 70h10v10H10zM40 70h10v10H40zM70 70h10v10H70zM70 40h10v10H70zM10 40h10v10H10z'/%3E%3C/g%3E%3C/svg%3E");
  border-image-outset: var(--border-image-gap-thin);
  border-image-slice: var(--border-image-slice-px-thin);
}

/*------------------------------------*



  Article Series Nav

*------------------------------------*/
nav.series-nav {
  clear: both;
  background-color: var(--color-background-emphasis);
  padding: var(--vert-pad) 0 var(--vert-pad-half) 0;
}
nav.series-nav h4 {
  margin-top: 0;
  margin-left: calc(1 * var(--horiz-pad-med));
  font-weight: var(--font-weight-black);
}
nav.series-nav h4 em {
  font-style: normal;
  color: var(--color-accent-bright);
  font-weight: var(--font-weight-thin);
}
nav.series-nav ul {
  margin-bottom: var(--vert-pad-half);
  margin-left: calc(var(--horiz-pad) + 0.1em);
}
nav.series-nav ul li {
  padding-left: 0;
}
nav.series-nav ul li:before {
  content: "";
  background-image: none;
}
nav.series-nav ul li em {
  display: inline-block;
  width: 1em;
  font-style: normal;
  text-align: right;
}

article > nav.series-nav {
  margin-top: var(--vert-pad);
  margin-left: 0;
  margin-right: 0;
  margin-bottom: var(--vert-pad-large);
}

.content > nav.series-nav {
  margin-top: var(--section-gap);
  margin-left: 0;
  margin-right: 0;
}

/*------------------------------------*



  JS Code Copy

*------------------------------------*/
.copy-code-button {
  display: block;
  position: absolute;
  top: 0;
  right: 0;
  color: var(--color-tappable);
  background-color: var(--color-background-emphasis);
  border-style: none;
  border-style: solid;
  border-width: var(--border-width-thin);
  border-image-width: var(--border-image-width-thin);
  border-color: var(--color-background-main);
  border-image-repeat: round;
  border-image-source: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='90' height='90'%3E%3Cg style='fill:%23670951;fill-opacity:1;stroke:none;stroke-width:0;stroke-dasharray:none;stroke-opacity:1'%3E%3Cpath d='M10 10h10v10H10zM70 10h10v10H70zM40 40h10v10H40zM40 10h10v10H40zM10 70h10v10H10zM40 70h10v10H40zM70 70h10v10H70zM70 40h10v10H70zM10 40h10v10H10z'/%3E%3C/g%3E%3C/svg%3E");
  border-image-outset: var(--border-image-gap-thin);
  border-image-slice: var(--border-image-slice-px-thin);
  margin-bottom: calc(-1 * var(--border-width-med));
  padding: 3px 8px;
  font-weight: var(--font-weight-bold);
  outline: none;
  transform: translate(var(--border-image-width-thin), calc(-1 * var(--border-image-width-thin)));
}

.copy-code-button:hover {
  cursor: pointer;
  color: var(--color-tappable-hover);
  border-style: none;
  border-style: solid;
  border-width: var(--border-width-thin);
  border-image-width: var(--border-image-width-thin);
  border-color: var(--color-background-main);
  border-image-repeat: round;
  border-image-source: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='90' height='90'%3E%3Cg style='fill:%23e156e1;fill-opacity:1;stroke:none;stroke-width:0;stroke-dasharray:none;stroke-opacity:1'%3E%3Cpath d='M10 10h10v10H10zM70 10h10v10H70zM40 40h10v10H40zM40 10h10v10H40zM10 70h10v10H10zM40 70h10v10H40zM70 70h10v10H70zM70 40h10v10H70zM10 40h10v10H10z'/%3E%3C/g%3E%3C/svg%3E");
  border-image-outset: var(--border-image-gap-thin);
  border-image-slice: var(--border-image-slice-px-thin);
}

mm-image-animator {
  float: right;
  margin-bottom: -3em;
  position: relative;
  width: 154px;
  height: 231px;
  pointer-events: none;
  z-index: 1;
}

.highlight {
  position: relative;
}
.highlight + h2,
.highlight + p:not(.live-code-embed) {
  margin-top: var(--vert-pad-large);
}

main.portfolio header {
  padding-left: calc(var(--vert-pad-large) + var(--border-image-width-thin));
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  align-items: baseline;
  padding-right: calc(var(--vert-pad-large) + var(--border-image-width-thin));
}
main.portfolio header h1 {
  display: inline-block;
  margin-right: var(--horiz-pad-med);
}
main.portfolio header a.big-button {
  transform: rotate(3deg);
  margin: 0 auto;
}

.portfolio-pieces ul {
  padding: 0;
  margin: 0;
  margin-top: var(--section-gap);
}
.portfolio-pieces ul li {
  padding-left: 0;
  margin-bottom: var(--section-gap);
}
@media only screen and (min-width: 480px) {
  .portfolio-pieces ul li {
    margin-bottom: var(--vert-pad-large);
  }
}
.portfolio-pieces ul li::before {
  content: none;
}

.portfolio-pieces > ul > li {
  display: grid;
  column-gap: var(--horiz-pad-med);
  grid-template-columns: auto 1fr;
}
.portfolio-pieces > ul > li > img {
  image-rendering: pixelated;
  grid-column: 1/2;
  align-self: baseline;
  width: 80px;
  margin-bottom: var(--vert-pad-large);
  padding: var(--border-image-width-thin);
  border: solid var(--border-image-width-thin) color-mix(in lab, var(--color-accent-bright), var(--color-background-main) 80%);
}
@media only screen and (min-width: 480px) {
  .portfolio-pieces > ul > li > img {
    margin-bottom: var(--vert-pad);
  }
}
@media only screen and (min-width: 960px) {
  .portfolio-pieces > ul > li > img {
    margin-bottom: 0;
  }
}
.portfolio-pieces > ul > li > span {
  grid-column: 2/3;
}
.portfolio-pieces > ul > li > span h3 {
  margin-top: 0;
}
.portfolio-pieces > ul > li ul.gallery {
  grid-column: 1/3;
  margin-top: var(--vert-pad-half);
}
@media only screen and (min-width: 960px) {
  .portfolio-pieces > ul > li ul.gallery {
    grid-column: 2/3;
  }
}

a.big-button {
  color: var(--color-tappable);
  border-style: none;
  border-style: solid;
  border-width: var(--border-width-med);
  border-image-width: var(--border-image-width-med);
  border-color: var(--color-background-main);
  border-image-repeat: round;
  border-image-source: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='90' height='90'%3E%3Cg style='fill:%234a063a;fill-opacity:1;stroke:none;stroke-width:0;stroke-dasharray:none;stroke-opacity:1'%3E%3Cpath d='M10 10h10v10H10zM70 10h10v10H70zM40 40h10v10H40zM40 10h10v10H40zM10 70h10v10H10zM40 70h10v10H40zM70 70h10v10H70zM70 40h10v10H70zM10 40h10v10H10z'/%3E%3C/g%3E%3C/svg%3E");
  border-image-outset: var(--border-image-gap-med);
  border-image-slice: var(--border-image-slice-px-med);
  display: inline-block;
  margin-bottom: var(--vert-pad);
  padding: calc(var(--vert-pad-large) + var(--border-image-width-thin));
  text-decoration: none;
  font-size: var(--h1-font-size);
  font-weight: var(--font-weight-bold);
  line-height: var(--line-height-normal);
}

a.big-button:hover {
  cursor: pointer;
  color: var(--color-tappable-hover);
  border-style: none;
  border-style: solid;
  border-width: var(--border-width-med);
  border-image-width: var(--border-image-width-med);
  border-color: var(--color-background-main);
  border-image-repeat: round;
  border-image-source: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='90' height='90'%3E%3Cg style='fill:%23e156e1;fill-opacity:1;stroke:none;stroke-width:0;stroke-dasharray:none;stroke-opacity:1'%3E%3Cpath d='M10 10h10v10H10zM70 10h10v10H70zM40 40h10v10H40zM40 10h10v10H40zM10 70h10v10H10zM40 70h10v10H40zM70 70h10v10H70zM70 40h10v10H70zM10 40h10v10H10z'/%3E%3C/g%3E%3C/svg%3E");
  border-image-outset: var(--border-image-gap-med);
  border-image-slice: var(--border-image-slice-px-med);
}

.read-more-link {
  margin-left: 0.5em;
}

/*------------------------------------*



  AVOID FLASH OF UNSTYLED CONTENT

  KEEP AT END OF THE FILE

*------------------------------------*/
html {
  visibility: visible;
  opacity: 1;
}