@charset "UTF-8";
@font-face {
  font-family: "Junicode";
  src: url("/fonts/Junicode/WOFF2/JunicodeVF-Roman.woff2");
  font-weight: variable;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Junicode";
  src: url("/fonts/Junicode/WOFF2/JunicodeVF-Italic.woff2");
  font-weight: variable;
  font-style: italic;
  font-display: swap;
}
@font-face {
  font-family: "Alegreya";
  src: url("/fonts/alegreya-ht-pro/Alegreya-Regular.woff2");
  font-weight: variable;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Alegreya";
  src: url("/fonts/alegreya-ht-pro/Alegreya-Italic.woff2");
  font-weight: normal;
  font-style: italic;
  font-display: swap;
}
@font-face {
  font-family: "Alegreya";
  src: url("/fonts/alegreya-ht-pro/Alegreya-Bold.woff2");
  font-weight: bold;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Alegreya";
  src: url("/fonts/alegreya-ht-pro/Alegreya-BoldItalic.woff2");
  font-weight: bold;
  font-style: italic;
  font-display: swap;
}
@font-face {
  font-family: "Alegreya SC";
  src: url("/fonts/alegreya-ht-pro/AlegreyaSC-Regular.woff2");
  font-weight: normal;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Alegreya SC";
  src: url("/fonts/alegreya-ht-pro/AlegreyaSC-Bold.woff2");
  font-weight: bold;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Alegreya Sans";
  src: url("/fonts/alegreya-sans-ht/AlegreyaSans-Regular.woff2");
  font-weight: normal;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Alegreya Sans";
  src: url("/fonts/alegreya-sans-ht/AlegreyaSans-Bold.woff2");
  font-weight: bold;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Alegreya Sans";
  src: url("/fonts/alegreya-sans-ht/AlegreyaSans-Italic.woff2");
  font-weight: normal;
  font-style: italic;
  font-display: swap;
}
@font-face {
  font-family: "Alegreya Sans";
  src: url("/fonts/alegreya-sans-ht/AlegreyaSans-BoldItalic.woff2");
  font-weight: bold;
  font-style: italic;
  font-display: swap;
}
@font-face {
  font-family: "Alegreya Sans SC";
  src: url("/fonts/alegreya-sans-ht/AlegreyaSansSC-Regular.woff2");
  font-weight: normal;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Alegreya Sans SC";
  src: url("/fonts/alegreya-sans-ht/AlegreyaSansSC-Medium.woff2");
  font-weight: 500;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Alegreya Sans SC";
  src: url("/fonts/alegreya-sans-ht/AlegreyaSansSC-Bold.woff2");
  font-weight: bold;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Alegreya Sans SC";
  src: url("/fonts/alegreya-sans-ht/AlegreyaSansSC-Italic.woff2");
  font-weight: normal;
  font-style: italic;
  font-display: swap;
}
@font-face {
  font-family: "Alegreya Sans SC";
  src: url("/fonts/alegreya-sans-ht/AlegreyaSansSC-BoldItalic.woff2");
  font-weight: bold;
  font-style: italic;
  font-display: swap;
}
@font-face {
  font-family: "Fantasque Sans Mono";
  src: url("/fonts/FantasqueSansMono/FantasqueSansMono-Regular.woff2") format("woff2"), url("/fonts/FantasqueSansMono/FantasqueSansMono-Regular.woff") format("woff");
  /* Firefox >= 3.6, any other modern browser */
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Fantasque Sans Mono";
  src: url("/fonts/FantasqueSansMono/FantasqueSansMono-Bold.woff2") format("woff2"), url("/fonts/FantasqueSansMono/FantasqueSansMono-Bold.woff") format("woff");
  /* Firefox >= 3.6, any other modern browser */
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Fantasque Sans Mono";
  src: url("/fonts/FantasqueSansMono/FantasqueSansMono-BoldItalic.woff2") format("woff2"), url("/fonts/FantasqueSansMono/FantasqueSansMono-BoldItalic.woff") format("woff");
  /* Firefox >= 3.6, any other modern browser */
  font-weight: 700;
  font-style: italic;
  font-display: swap;
}
@font-face {
  font-family: "Fantasque Sans Mono";
  src: url("/fonts/FantasqueSansMono/FantasqueSansMono-Italic.woff2") format("woff2"), url("/fonts/FantasqueSansMono/FantasqueSansMono-Italic.woff") format("woff");
  /* Firefox >= 3.6, any other modern browser */
  font-weight: 400;
  font-style: italic;
  font-display: swap;
}
:root {
  --gap: 24px;
  --transition: 75ms;
}

body {
  --base: #faf4ed;
  --surface-subtle-highlight: #fbf0e4;
  /* --base: #F4F3EF; */
  --base-dark: #1b1b1b;
  /*--surface: #fffaf3;*/
  --surface: rgba(0, 0, 0, 0.05);
  /*--surface-dark: #1f1d2e;*/
  --surface-dark: #171717;
  /*--overlay: #f2e9e1;*/
  --overlay: rgba(0, 0, 0, 0.08);
  /*--overlay-dark: #26233a;*/
  --overlay-dark: var(--surface-dark);
  --gold: #ea9d34;
  --gold-text: #db8510;
  --gold-muted: #f6c177;
  --gold-muted-tr: #f6c1772b;
  --gold-muted-tr2: #f6c17710;
  --foam: #9ccfd8;
  --foam-intense: #2e9eb1;
  --foam-darker: #c;
  --foam-tr: #9ccfd82b;
  --foam-less-tr: #9ccfd8aa;
  --lightgreen: #9cd8a0;
  --lightgreen-tr: #9cd8a02b;
  --rose-muted: #ebbcba;
  --red: #E3120B;
  --red-darker: #CC100A;
  --red-lighter: #F6423C;
  --crimson: #C91D42;
  --crimson-darker: #9C1633;
  --maroon: #582235;
  --iris: #c4a7e7;
  --iris-muted: #D1BBEC;
  /* WCAG AA */
  --iris-muted-tr: #D1BBEC2b;
  --pine: #31748f;
  --pine-darker: #24586A;
  /* WCAG AA for tip boxes */
  --pine-even-darker: #245666;
  /* WCAG AA for btw boxes */
  --pine-muted: #3e8fb0;
  /* Not actually the Rosé Pine light text color, but this one (Moon Overlay color) has far better contrast while still fitting in with the theme */
  /*--text: #393552;*/
  --text: #252237;
  --heading-text: var(--maroon);
  --text-highlighted: var(--text);
  --text-contrasted: var(--text);
  --text-light: #e2e2e2;
  --link: var(--pine);
  --link-highlighted: var(--pine-even-darker);
  --muted: #9893a5;
  /*--subtle: #797593; */
  --subtle: #6D6986;
  --less-subtle: #606070;
  /* WCAG AA */
  --highlight: #dfdad9;
  --highlight-low: #f4ede8;
  --highlight-med: #dfdad9;
  --dark-highlight-med: rgb(50, 50, 50);
  --highlight-high: #cecacd;
  --radius: 8px;
  --content-gap: 1.8rem;
  --slider-height: 8px;
  --body-font: "Alegreya", "Junicode";
  --body-sc-font: "Alegreya SC";
  --body-sans-font: "Alegreya Sans";
  --body-sans-sc-font: "Alegreya Sans SC";
}

pre code ins {
  /* background-color: color-mix(in srgb, var(--lightgreen) 30%, transparent); */
  background-color: var(--lightgreen);
  color: var(--text-highlighted);
  text-decoration: none;
}

body {
  font-family: var(--body-font);
  font-weight: 450;
  font-size: 1.4rem;
  line-height: 140%;
  color: var(--text);
  padding: 0;
  margin: 0;
  background-color: var(--base);
  font-variant-ligatures: common-ligatures;
  font-variant-numeric: oldstyle-nums;
}

.frontpage {
  font-size: 1.6rem;
}

abbr {
  font-family: var(--body-sc-font), var(--body-font);
  font-variant-caps: small-caps;
  font-variant-numeric: lining-nums;
  letter-spacing: 0.05em;
}

p abbr, .sidenote abbr {
  font-weight: normal;
}

.sidenote abbr {
  font-family: var(--body-sans-sc-font), var(--body-sans-font);
}

h1 abbr, h2 abbr, h3 abbr, h4 abbr, h5 abbr, h6 abbr {
  font-style: normal;
}

main img {
  max-width: 100%;
}

figure img {
  width: unset;
}

figure {
  text-align: center;
}
figure.figure-tight {
  margin: 0;
}
figure.figure-left {
  text-align: left;
}
@media (min-width: 700px) {
  figure.figure-floating-right {
    float: right;
  }
  figure.figure-floating-left {
    float: left;
  }
  figure:not(.figure-floating):not(.figure-tight) {
    margin-bottom: calc(2 * var(--gap));
  }
  figure.figure-floating {
    margin-top: 0;
  }
}
figure figcaption {
  font-size: 1.1rem;
  text-align: center;
  font-family: var(--body-sans-font);
  line-height: 1.4;
}

blockquote, figure.quote {
  border-left: 1px solid var(--text);
  padding-left: var(--content-gap);
  text-align: left;
  font-size: 90%;
  line-height: 130%;
}

figure.quote figcaption {
  text-align: right;
  font-size: inherit;
}
figure.quote figcaption:before {
  content: "— ";
}

/*Chrome*/
@media screen and (-webkit-min-device-pixel-ratio: 0) {
  input[type=range] {
    background-color: transparent;
  }
}
/** FF*/
input[type=range]::-moz-range-progress {
  background-color: var(--foam);
}

input[type=range]::-moz-range-track {
  background-color: var(--text-light);
}

input[type=range]::-moz-range-thumb {
  appearance: none;
  -moz-appearance: none;
  overflow: visible;
  width: 20px;
  height: 20px;
  border-radius: 50%;
  border-color: transparent;
  background: var(--foam);
  z-index: 0;
}

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

a {
  overflow-wrap: break-word;
  hyphenate-character: "/";
}

::selection {
  background-color: var(--foam);
  color: var(--base-dark);
}

.highlight pre ::selection,
pre code ::selection,
pre ::selection {
  background-color: var(--surface);
  color: unset;
}

ol {
  counter-reset: ol-counter;
  /* list-style: none; */
}

ol > li {
  break-inside: avoid-column;
  margin-bottom: calc(0.5 * var(--gap));
}

/*ol>li::before {
    counter-increment: ol-counter;
    content: counter(ol-counter);
    color: var(--muted);
    margin-left: calc(-1.5 * var(--gap));
    position: absolute;
    border: 1px solid currentColor;
    width: 0.9em;
    height: 0.9em;
    font-size: 0.7em;
    margin-top: 0.35em;
    border-radius: 50%;
    display: inline-grid;
    place-items: center;
    line-height: 0.7em;
    padding: 0.05em;
}*/
ul {
  list-style-type: disc;
}

ul > li::marker {
  color: var(--muted);
}

main {
  max-width: 50%;
  margin: auto;
  margin-top: 48px;
  padding: 20px;
}
@media (max-width: 1200px) {
  main {
    padding-left: 5vw;
    padding-right: 5px;
    max-width: unset;
    width: 90vw;
  }
}

nav {
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  padding: 20px 20px;
}
nav a,
nav a:visited {
  color: var(--text);
  text-decoration: none;
}

header {
  position: relative;
  z-index: 2;
}

#logo-tilde {
  font-weight: bolder;
  margin-right: 0.05em;
}

#logo-full {
  opacity: 0;
  transition: all var(--transition);
}

#logo:hover #logo-full {
  opacity: 1;
}

h1 {
  font-size: 64px;
  font-style: italic;
}

h2,
h3,
h4,
h5,
h6 {
  font-style: italic;
  margin-top: calc(3 * var(--gap));
}

h1,
h2,
h3,
h4,
h5,
h6 {
  color: var(--heading-text);
  line-height: 1.2;
}
h1 a,
h2 a,
h3 a,
h4 a,
h5 a,
h6 a {
  color: var(--heading-text);
  text-decoration: none;
}
h1 a:visited,
h2 a:visited,
h3 a:visited,
h4 a:visited,
h5 a:visited,
h6 a:visited {
  color: var(--heading-text);
}
h1 a:hover:before,
h2 a:hover:before,
h3 a:hover:before,
h4 a:hover:before,
h5 a:hover:before,
h6 a:hover:before {
  content: "§";
  display: block;
  position: absolute;
  text-decoration: none;
  color: var(--muted);
  border: none;
  margin-left: -1em;
  /* margin-top: -4px; */
  font-style: normal;
}

::-webkit-scrollbar {
  height: 5px;
  width: 5px;
  background: transparent;
}

::-webkit-scrollbar-thumb {
  background: var(--muted);
  -webkit-border-radius: 1ex;
  -webkit-box-shadow: 0px 1px 2px rgba(0, 0, 0, 0.75);
}

::-webkit-scrollbar-thumb:hover {
  background: var(--text);
}

::-webkit-scrollbar-corner {
  background: transparent;
}

pre, code {
  font-family: "Fantasque Sans Mono", monospace;
}

code {
  font-size: 21px;
}

p > code {
  white-space: nowrap;
  margin-left: 0.2em;
}

pre,
pre code {
  font-size: 19px;
}

pre {
  padding: 10px;
  /* border-radius: var(--radius); */
  /* border-left: 2px solid var(--gold-muted); */
  max-height: 500px;
  overflow: overlay;
  line-height: 1.5rem;
}

pre code mark, pre code .z-hl {
  background-color: var(--gold-muted-tr);
  color: unset;
  width: 100%;
  display: block;
}

code .hll, code hll {
  display: block;
}

.named-codeblock {
  display: flex;
  flex-direction: column;
}
.named-codeblock .codeblock-mast {
  font-family: "Fantasque Sans Mono", monospace;
  font-size: 19px;
  font-style: italic;
  border-bottom: 1px dashed var(--muted);
  padding-left: 10px;
  background-color: var(--surface-subtle-highlight);
}
.named-codeblock .codeblock-mast a, .named-codeblock .codeblock-mast span {
  color: var(--subtle);
  text-decoration: none;
}
.named-codeblock > pre {
  margin-top: 0;
}

.demo-controls-container,
.demo-3d-controls {
  color: var(--less-subtle);
}

.demo-control, .demo-3d-control {
  font-family: var(--body-sc-font), var(--body-font);
  letter-spacing: 0.05em;
  font-variant-caps: small-caps;
  font-variant-numeric: tabular-nums;
}
.demo-control:hover, .demo-3d-control:hover {
  color: var(--text-contrasted);
}
.demo-control label, .demo-3d-control label {
  display: flex;
}
.demo-control label span:first-of-type, .demo-3d-control label span:first-of-type {
  margin-left: auto;
  margin-right: 0.2em;
}
.demo-control label span.demo-control-unit, .demo-3d-control label span.demo-control-unit {
  font-family: var(--body-font);
  font-variant-caps: normal;
}

.demo-control-button {
  background: none;
  border: 1px solid var(--text);
  color: var(--text);
  font-family: var(--body-sc-font), var(--body-font);
  font-variant-caps: small-caps;
  letter-spacing: 0.05em;
  font-size: inherit;
  transition: all var(--transition);
}
.demo-control-button:hover {
  transition: all var(--transition);
  border-color: var(--base);
  background: var(--base-dark);
  color: var(--base);
}

.visual-break {
  text-align: center;
  margin-top: calc(2 * var(--gap));
  margin-bottom: calc(2 * var(--gap));
  color: var(--subtle);
}

table {
  border-collapse: collapse;
  border-spacing: 0;
  overflow-x: auto;
  word-break: keep-all;
  text-align: start;
}

table th {
  min-width: 80px;
  padding: 12px 8px;
  line-height: 1.5;
  border-bottom: 1px solid var(--muted);
  text-align: start;
}

table td {
  min-width: 80px;
  padding: 12px 8px;
  line-height: 1.5;
  border-bottom: 1px solid var(--muted);
  font-size: 1.3rem;
}

.subtitle {
  color: var(--subtle);
}

.dateline {
  margin-top: -18px;
  font-size: 22px;
  font-style: italic;
  /* font-family: var(--body-sans-font); */
}

.note::before {
  content: var(--note-type-title);
  display: flex;
  font-size: 1.6rem;
  font-weight: bold;
  font-style: italic;
  margin-bottom: 10px;
  padding-bottom: 10px;
  font-family: var(--body-font);
  border-bottom: 1px solid currentColor;
}

.note {
  background-color: color-mix(in srgb, var(--note-type-bg), transparent 15%);
  border-radius: var(--radius);
  color: var(--text-highlighted);
  line-height: 130%;
  margin-bottom: var(--content-gap);
  border: 2px solid currentColor;
  padding: 15px;
}

.note {
  --note-type-title: "Note";
  --note-type-bg: var(--foam);
}

.note > p:last-of-type {
  margin-bottom: 0;
}

.post-content .highlight pre {
  margin-bottom: var(--content-gap);
}

.tip {
  --note-type-title: "Tip";
  --note-type-bg: var(--lightgreen);
}

.warning {
  --note-type-title: "Warning";
  --note-type-bg: var(--gold-muted);
}

.btw {
  --note-type-title: "By the way";
  --note-type-bg: var(--iris-muted);
}

.tip a,
.note a {
  color: var(--pine-darker);
}

.btw a {
  color: var(--pine-even-darker);
}

aside {
  margin-bottom: var(--gap);
}

.sidenote {
  position: relative;
  margin-bottom: var(--gap);
  font-family: var(--body-sans-font);
}

.sidenote code {
  font-size: 90%;
}

/* Wide viewport */
@media screen and (min-width: 1200px) {
  .sidenote {
    float: right;
    clear: right;
    margin-right: -23vw;
    text-align: left;
    width: 20vw;
    padding-left: 5px;
  }
}
@media (min-width: 1400px) {
  .sidenote code {
    display: inline-block;
  }
}
/* Narrow viewport */
@media (max-width: 1200px) {
  .sidenote {
    float: right;
    text-align: left;
    width: 25%;
    margin: 1rem 0;
    padding-left: 1rem;
    margin-left: 1rem;
    margin-top: 2rem;
    border-left: 1px solid var(--subtle);
    hyphens: auto;
  }
  .sidenote.marginnote {
    padding: 0 10%;
    width: unset;
    float: none;
    display: block;
    border-left: none;
  }
  .sidenote::before {
    margin-left: 10%;
  }
}
@media (max-width: 800px) {
  code {
    text-wrap: wrap;
  }
  a {
    text-wrap: wrap;
  }
  .sidenote, .sidenote > *, code {
    max-width: 100%;
    text-wrap: wrap;
    overflow-wrap: break-word;
    white-space: pre-wrap;
  }
}
/* Sidenote counter */
body {
  counter-reset: sidenote-counter;
}

.sidenote-number {
  counter-increment: sidenote-counter;
}

/* Counter before the sidenote in the margin. */
.sidenote::before {
  content: counter(sidenote-counter) ".";
  position: relative;
  vertical-align: baseline;
  font-family: var(--body-font);
  font-size: 0.9em;
  font-weight: bold;
  margin-right: 8px;
}

.sidenote {
  font-size: 20px;
  line-height: 140%;
}

/* Counter in the main body. */
.sidenote-number::after {
  content: counter(sidenote-counter);
  position: relative;
  vertical-align: baseline;
  font-size: 0.7em;
  top: -0.7rem;
  font-weight: bold;
  margin-left: 0.2rem;
  padding-right: 0.3em;
}

.sidenote-ref::after {
  content: " ";
  background-color: var(--base);
}

.sidenote-ref {
  margin-right: -0.4rem;
}

/* Highlight the sidenote when mouse hovers on the sidenote number or ref in body, and vice versa. */
@media (min-width: 1200px) {
  .sidenote,
.sidenote-ref,
.sidenote *,
.sidenote-ref * {
    transition: all var(--transition);
  }
  .sidenote-ref:hover {
    color: var(--text-highlighted);
    background-color: var(--gold-muted);
  }
  .sidenote-ref:hover a {
    color: var(--link-highlighted);
  }
  .sidenote-ref:hover > .sidenote-number > .sidenote {
    color: var(--text-highlighted);
  }
  .sidenote-number:hover .sidenote {
    background-color: var(--gold-muted);
  }
  .sidenote-ref:hover .sidenote {
    background-color: var(--gold-muted);
  }
}
@media (max-width: 1200px) {
  .sidenote,
.sidenote-ref,
.sidenote *,
.sidenote-ref * .sidenote-ref-text {
    transition: all var(--transition);
  }
  .sidenote-number:hover::after,
.sidenote-ref:hover .sidenote-number::after {
    color: var(--gold-text);
  }
  .sidenote-ref:hover .sidenote-ref-text {
    text-decoration: underline;
    text-decoration-color: var(--gold-text);
  }
  .sidenote-number:hover .sidenote, .sidenote-ref:hover .sidenote {
    border-color: var(--gold-text);
  }
  .sidenote-number:hover .sidenote::before, .sidenote-ref:hover .sidenote::before {
    color: var(--gold-text);
  }
}
/* Margin notes should be un-numbered */
.sidenote.marginnote::before {
  visibility: hidden;
  margin: 0;
  display: none;
}

/* Add some parentheses, to make it read well in "reader mode" things */
.sidenote-surroundings {
  display: none;
}

.toc {
  border: none;
  float: left;
  clear: left;
  position: fixed;
  left: 0;
  top: 0;
  font-family: var(--body-sans-sc-font), var(--body-sans-font);
  font-weight: 500;
  letter-spacing: 0.05em;
  max-width: 330px;
  margin-left: calc(-1 * var(--gap));
  background: 0 0 !important;
  height: 100%;
  display: flex;
  align-items: center;
  z-index: 1;
  margin: 0 2px 40px;
  margin-left: 2px;
  border-radius: var(--radius);
  padding: 0.4em;
}
@media (max-width: 1400px) {
  .toc {
    display: none;
  }
}
.toc ul {
  padding: 0;
  padding-left: 10px;
  list-style-type: none;
  line-height: 1.5rem;
}
.toc ul li {
  margin-bottom: 8px;
}
.toc ul li ul {
  margin-top: 8px;
}
.toc ul a {
  display: inline-block;
  height: 35px;
  font-size: 20px;
  color: var(--subtle);
  text-decoration: none;
  font-variant: all-small-caps;
  transition: all var(--transition);
}
.toc ul a.active {
  font-weight: bold;
  font-size: 21px;
  color: var(--gold-text);
}
.toc ul a:hover {
  text-decoration: underline;
}

li p {
  margin-top: 10px;
  margin-bottom: 10px;
}

.post-cards {
  display: flex;
  flex-direction: column;
  gap: var(--gap);
  font-size: 1.6rem;
}

.post-card {
  display: grid;
  grid-template-columns: 64px 1fr;
}
@media (min-width: 600px) {
  .post-card {
    grid-template-rows: 64px;
  }
}
.post-card:hover .post-card-thumb {
  transition: all var(--transition);
  border-color: var(--gold-muted);
}

.post-card a {
  text-decoration: none;
}

.post-card-thumb, .post-card-nothumb {
  width: 64px;
  height: 64px;
}

.post-card-thumb {
  transition: all var(--transition);
  border: 1px solid var(--text);
}

.post-card-category {
  font-variant: all-small-caps;
  font-size: 20px;
  letter-spacing: 0.05em;
  display: inline-block;
  padding: 0;
  font-family: var(--body-sans-sc-font), var(--body-sans-font);
}

.post-card-nothumb {
  display: flex;
  justify-content: center;
  align-items: center;
}

.post-card-nothumb-circle {
  height: 10px;
  width: 10px;
  border-radius: 10px;
  border: 1px solid var(--text);
}

.post-card-right {
  display: flex;
  flex-direction: column;
  padding-left: var(--gap);
  line-height: 1;
  gap: 5px;
}
@media (min-width: 600px) {
  .post-card-right {
    justify-content: center;
  }
}

.tombstone::after {
  content: "❚";
  color: var(--gold);
}