/* @font-face {
  font-family: "PP Talisman Narrow";
  src: url("/fonts/PPTalisman-Narrow-Bold.woff2") format("woff2");
  font-weight: bold;
  font-display: swap;
} */

@font-face {
  font-family: "PP Mori";
  src: url("/fonts/PPMori-Regular.woff2") format("woff2");
  font-display: swap;
}

@font-face {
  font-family: "PP Mori";
  src: url("/fonts/PPMori-Extrabold.woff2") format("woff2");
  font-weight: bold;
  font-display: swap;
}

@font-face {
  font-family: "PP Mori";
  src: url("/fonts/PPMori-Black.woff2") format("woff2");
  font-weight: 900;
  font-display: swap;
}

@font-face {
  font-family: "PP Mori";
  src: url("/fonts/PPMori-Italic.woff2") format("woff2");
  font-style: italic;
  font-display: swap;
}

@font-face {
  font-family: "PP Mori";
  src: url("/fonts/PPMori-ExtraboldItalic.woff2") format("woff2");
  font-style: italic;
  font-weight: bold;
  font-display: swap;
}

@font-face {
  font-family: "Lilex";
  src: url("/fonts/Lilex[wght].woff2") format("woff2");
  font-display: swap;
  font-weight: 100 900;
}

@font-face {
  font-family: "Lilex";
  src: url("/fonts/Lilex-Italic[wght].woff2") format("woff2");
  font-display: swap;
  font-style: italic;
  font-weight: 100 900;
}

:root {
  --color-white: #fff;
  --color-black: #111;
  --color-green1: #def2d9;
  --color-green1b: #d5efd0;
  --color-green2: #bce3c3;
  --color-green3: #95d7a2;
  --color-purple: BlueViolet;
  --theme-selection-bg: var(--color-black);
  --theme-selection-text: var(--color-white);
  --theme-header-bg: var(--color-black);
  --theme-header-text: var(--color-white);
  --theme-text: var(--color-black);
  --theme-infobox: var(--color-green2);
  --theme-code: var(--color-green2);
  --theme-shadow: var(--color-green3);
  --theme-page-bg: var(--color-green1);
  --theme-page-alt: var(--color-green1b);
  --theme-page-text: var(--color-black);
  --theme-scrollbar: var(--color-black);
  --theme-bullet: var(--color-black);
  --theme-accent: var(--color-green2);
  --theme-accent2: var(--color-green3);
  --theme-border: var(--color-black);
  --theme-number: var(--color-green3);
  --theme-photo: var(--color-green3);
  --theme-image: var(--color-white);
  --theme-box: var(--color-white);
  --theme-button-bg: var(--color-black);
  --theme-button-text: var(--color-white);
  --theme-card: var(--color-white);
  --theme-link: var(--color-black);
  --theme-hover-light: rgb(from var(--color-green3) r g b / 20%);
  --theme-hover-light-alt: rgb(from var(--color-green3) r g b / 30%);
  --theme-hover-dark: rgb(from var(--color-green3) r g b / 20%);
  --syntax-background: var(--color-black);
  --syntax-border: var(--color-black);
  --syntax-text: var(--color-green1);
  --syntax-keyword: #ffffff;
  --syntax-comment: #bd85f9;
  --syntax-property: #b3f200;
  --syntax-string: #00cc9c;
  --syntax-punctuation: #d2acfb;
}

:root {
  --font-fallback-main: system-ui, sans-serif;
  --font-fallback-mono:
    ui-monospace, "Cascadia Code", "SFMono-Regular", "Menlo", "Monaco",
    "Consolas", "Liberation Mono", "Courier New", monospace;
  --font-body: "PP Mori", var(--font-fallback-main);
  --font-cool: var(--font-body);
  --font-mono: "Lilex", var(--font-fallback-mono);

  /* --image-outline: rgb(from var(--color-black) r g b / 10%); */
  --image-outline: var(--color-black);
  /* --image-outline: rgb(from currentColor r g b / 20%); */
  /* --image-outline: #fff; */

  /* --shadow1:
    0 1px 2px var(--theme-shadow), 0 2px 4px var(--theme-shadow),
    0 4px 8px var(--theme-shadow); */
  /* --shadow-inset1: inset 0 4px 0 var(--theme-shadow); */
  /* --shadow-inset1:
    inset 0 1px 2px var(--theme-shadow), inset 0 2px 4px var(--theme-shadow); */

  --shadow1: 4px 4px 0 var(--theme-shadow);
  /* --shadow1:
    1px 1px 0 var(--theme-shadow), 2px 2px 0 var(--theme-shadow),
    3px 3px 0 var(--theme-shadow), 4px 4px 0 var(--theme-shadow); */
  --shadow2: 0 4px var(--theme-shadow);

  --ui-bg-overlay-hover: radial-gradient(#fff4);
  --ui-bg-overlay-active: radial-gradient(#0002);

  /*
   Fluid typography seems really cool, but it also kinda looks terrible unless
   you're adding in `round()` to prevent fractional pixels during resizing,
   which causes jumpy text. Maybe in the future I'll play with it more...

   https://modern-fluid-typography.vercel.app/
  */
  --font-size-h1: 3rem;
  --font-size-h2: 2rem;
  --font-size-h3: 1.5rem;
  --font-size-nav: 1.25rem;
  --font-size-base: 1.25rem;
  --font-size-small: 1rem;
  --font-size-code: 1rem;

  --cursor-zoom-in: url("/cursors/zoom-in.svg") 12 12, zoom-in;

  --list-inset: 24px;

  --rounded-xsmall: 2px;
  --rounded-small: 4px;
  --rounded-medium: 8px;
  --rounded-large: 16px;

  --rounded-pill: 9999px;

  --width-copy: 50rem;
  --width-heading: 50rem;
  /* --width-copy: 50rem;
  --width-heading: 50rem; */

  --link-underline-offset: calc(1em / 8);
  --link-underline-thickness: 2px;
  --link-underline-thickness-hover: calc(var(--link-underline-thickness) + 0px);

  @media (resolution >= 1.5dppx) {
    --link-underline-thickness: 1.5px;
  }

  @media (width <= 50rem) {
    --font-size-h1: round(2.5rem, 1px);
    --font-size-h2: round(2rem, 1px);
    --font-size-h3: round(1.5rem, 1px);
    --font-size-base: round(1.15rem, 1px);
    --font-size-nav: round(1.25rem, 1px);
    --font-size-small: round(1rem, 1px);
  }
}

::before,
::after,
* {
  box-sizing: border-box;
}

/* Scrolling offset when direct linking to an element */
* {
  scroll-padding-top: 1em;
}

:root {
  /* https://dbushell.com/2024/11/05/webkit-font-smoothing/ */
  /* https://www.joshwcomeau.com/css/custom-css-reset/ */
  -webkit-font-smoothing: antialiased;
  /* Make sure scrollbars show on every page, for consistent nav bar size */
  overflow-y: scroll;
  color-scheme: light;
  scrollbar-color: var(--theme-scrollbar) transparent;
  font-synthesis: none;
  padding: 0;
  margin: 0;
  background: var(--theme-page-bg);
  color: var(--theme-page-text);
}

/* https://css-pattern.com/wave-circles/ */

:root {
  --s: 256px; /* control the size*/
  --c1: var(--theme-page-bg);
  --c2: var(--theme-page-alt);

  --_g: var(--s) var(--s)
    radial-gradient(var(--c1) 17%, var(--c2) 18% 35%, #0000 36.5%);
  background:
    calc(var(--s) / -4) calc(var(--s) / -4) / var(--_g),
    calc(var(--s) / 4) calc(var(--s) / 4) / var(--_g),
    radial-gradient(var(--c2) 34%, var(--c1) 36% 68%, #0000 70%) 0 0 /
      calc(var(--s) / 2) calc(var(--s) / 2),
    repeating-linear-gradient(45deg, var(--c1) -12.5% 12.5%, var(--c2) 0 37.5%)
      0 0 / var(--s) var(--s);
  background-color: var(--theme-page-bg);
  /* background-attachment: fixed; */
}

:where(:root[data-figure-viewer] :is(figure, p)) img {
  cursor: var(--cursor-zoom-in);
}

body {
  padding: 0;
  margin: 0;
  /**
   * Setting font size on body rather than html so that 1rem can refer to the
   * user's specified font size anywhere in my CSS, rather than 1.25 times that
   * value; but this way most things get bumped up a little bigger, for a
   * slightly comfier to read site (since this is a blog, after all)
   */
  font-size: var(--font-size-base);
  font-family: var(--font-body);
  line-height: 1.5;
  display: flex;
  flex-direction: column;
  gap: 0;
  min-height: 100vh;
}

::selection {
  background-color: var(--theme-selection-bg);
  color: var(--theme-selection-text);
  text-shadow: none;
}

main {
  flex: auto;
}

a {
  color: var(--theme-link);
  /* border-radius: var(--rounded-small); */
  text-decoration-thickness: var(--link-underline-thickness);
  text-underline-offset: var(--link-underline-offset);
}

a:hover {
  text-decoration-line: underline;
  --link-underline-thickness: var(--link-underline-thickness-hover);
  /* color: var(--color-black); */
}

a:active {
  text-decoration-line: underline;
  --link-underline-thickness: var(--link-underline-thickness-hover);
  /* color: var(--color-black); */
}

:is(input, select, button, textarea) {
  font: inherit;
}

:is(h1, h2, h3, h4, h5, h6) {
  text-wrap: balance;
}

:is(h1, h2, h3) {
  line-height: 1.25;
}

.paragraph,
p {
  margin-block: 1.5rem;
}

h1 {
  font-size: var(--font-size-h1);
  font-family: var(--font-cool);
  font-weight: 900;
  margin-block: 2rem 1.5rem;
}

h1::after {
  content: "\00A0//";
  color: var(--theme-accent2);
  font-weight: normal;
  font-size: 0.5em;
}

h2 {
  font-size: var(--font-size-h2);
  font-family: var(--font-cool);
  margin-block: 4rem 0.5rem;
}

h2::after {
  font-size: 0.5em;
  content: "\00A0//";
  font-weight: normal;
  color: var(--theme-accent2);
}

h3 {
  /* font-style: italic; */
  /* font-weight: normal; */
  font-family: inherit;
  font-size: var(--font-size-h3);
  margin-block: 4rem 0.5rem;
}

h3:where(:not(:has(a)))::after {
  text-decoration: none;
  font-size: 0.5em;
  content: "\00A0//";
  color: var(--theme-accent2);
}

code,
pre {
  font-family: var(--font-mono);
  font-size: var(--font-size-code);
  font-variant-ligatures: none;
  overflow-x: auto;
  font-style: normal;
}

:not(pre) > code {
  font-size: 0.9em;
  font-weight: 500;
  background: var(--theme-code);
  /* border-radius: var(--rounded-small); */
  padding: 0 4px;
}

.description {
  margin-top: 8px;
}

.post-description {
  font-size: var(--font-size-small);
  font-style: italic;
}

.spoiler {
  padding-inline: 0.25ch;
  background-color: var(--color-black);
  color: transparent;
  cursor: default;
}

@media (hover) {
  .spoiler:hover:where(:not(:focus)) {
    opacity: 0.8;
  }
}

.spoiler:focus {
  color: var(--color-white);
}

.spoiler:focus-visible {
  outline: 3px solid var(--color-black);
  outline-offset: 2px;
}

main :is(blockquote, ul, ol, dl, p) {
  margin-block: 1.5rem;
}

main ul {
  padding-left: var(--list-inset);

  /* @media (width >= 30rem) {
    padding-left: 0;
  } */
}

main :is(ol, ul) ul {
  padding-left: var(--list-inset);
}

main ul {
  /* list-style-type: disc; */
  /* list-style-type: circle; */
  list-style-type: "–\00a0";
  list-style-type: "→\00a0";
  list-style-type: "*\00a0";
}

main ul ::marker {
  /* font-size: 0.5em; */
  vertical-align: middle;
  font-family: var(--font-mono);
  font-weight: bold;
  color: var(--theme-bullet);
}

.hash-nav {
  padding: 0;
  list-style: none;
  display: flex;
  flex-wrap: wrap;
  flex-direction: row;
  gap: 1px;

  li {
    display: flex;
  }

  a {
    /* border-bottom: var(--link-underline-thickness) solid; */
    line-height: 1.15;
    padding: 8px 16px;
    /* padding-bottom: 6px; */
    background-color: var(--theme-infobox);
    font-weight: bold;
    /* color: var(--theme-button-text); */
    /* box-shadow: var(--shadow1); */
    /* border-bottom: 2px solid; */

    &:not(:hover) {
      text-decoration-line: none;
    }

    &:focus-visible {
      outline-offset: -1px;
    }

    &:where(:hover:not(:active)) {
      background-image: radial-gradient(var(--theme-hover-light-alt));
    }
  }
}

main ol {
  padding-left: 2.5rem;

  @media (width >= 60rem) {
    /* padding-left: 0; */
  }
}

main :is(ol, ul) ol {
  padding-left: 2.5rem;
}

main :is(ul, ol) :is(ul, ol) {
  margin-block: 0;
}

main {
  flex: auto;
  min-height: 50vh;
  padding-bottom: 3rem;
}

canvas,
img,
video {
  display: block;
  /* border-radius: var(--rounded-medium); */
}

.border,
.frame {
  background: var(--theme-card);
  border-radius: 0;
  padding: 1px;
  border: 2px solid var(--theme-border);
  box-shadow: var(--shadow1);
}

.sharp {
  border-radius: 0;
}

.playdate {
  filter: contrast(70%);
}

.tcg {
  /* Source from the Grand Archive index */
  /* https://index.gatcg.com/edition/alice-golden-queen-dtr */
  border-radius: 4.75% / 3.5%;
}

.max-content {
  max-width: max-content;
}

article header :is(h1, h2, h3) {
  margin-bottom: 0;
}

article header small {
  font-style: normal;
  font-weight: normal;
  font-size: var(--font-size-small);
  vertical-align: middle;
}

:focus-visible {
  outline: 3px solid currentColor;
  outline-offset: 2px;
  text-decoration-line: none;
}

.flex {
  display: flex;
}

.flex-auto {
  flex: auto;
}

.inline-flex {
  display: inline-flex;
}

.flex-column {
  flex-direction: column;
}

.flex-wrap {
  flex-wrap: wrap;
}

.text-center {
  text-align: center;
}

.photo-grid {
  display: grid;
  gap: 1rem;
  justify-content: flex-start;
  align-items: flex-start;
}

.photo-grid > * {
  margin-block: 0 !important;
  max-width: initial !important;
}

.column-span {
  grid-column: 1 / -1;
}

img[data-aspect="square"] {
  object-fit: cover;
  aspect-ratio: 1 / 1;
}

img[data-position="top"] {
  object-position: 50% 0%;
}

@media (width >= 30rem) {
  .photo-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}

.layout-col2 {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0.5rem;
}

@media (width <= 30rem) {
  .layout-col2 {
    display: grid;
    grid-template-columns: 1fr;
  }
}

.layout-col2 > * {
  margin: 0 !important;
}

.layout-col3 {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  gap: 0.5rem;
}

@media (width <= 50rem) {
  .layout-col3 {
    display: grid;
    grid-template-columns: 1fr 1fr;
  }
}

@media (width <= 30rem) {
  .layout-col3 {
    display: grid;
    grid-template-columns: 1fr;
  }
}

.gap1 {
  gap: 0.25rem;
}

.gap2 {
  gap: 0.5rem;
}

.gap3 {
  gap: 1rem;
}

.clearfix {
  clear: both;
}

/* Non-integer display scales fuck this up. It looks like this is a violation of
the spec, but Firefox and Chrome both do it. I haven't checked in Safari. Maybe
I should file a bug later. */
@media (resolution = 1dppx), (resolution = 2dppx), (resolution = 3dppx) {
  .pixelated {
    image-rendering: pixelated;
  }
}

.arrow {
  font-size: 1.25em;
  margin-inline: 0.25em;
}

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

ol > li::before {
  --size: 2rem;
  left: calc(-1 * (var(--size) + 0.5rem));
  width: var(--size);
  top: 2px;

  position: absolute;
  display: inline;
  font-size: var(--font-size-small);
  font-family: var(--font-mono);
  content: counter(list-item) "";
  font-weight: bold;
  background: var(--theme-number);
  text-align: center;
  border-radius: var(--rounded-pill);
}

li > :is(h2, h3) {
  margin-top: 8px;
}

dl > dt {
  font-weight: bold;
}

dl > dd {
  margin: 0;
}

dl > dd + dd {
  margin-top: 0.5rem;
}

dl > dd > ul {
  margin: 0;
}

dl > dd + dt {
  margin-top: 1.5rem;
}

@media (prefers-reduced-motion: reduce) {
  * {
    transition: none !important;
    animation: none !important;
  }
}

.inline-img {
  display: inline-block;
  vertical-align: middle;
}

.print-only {
  display: none;
}

[data-media="print"] {
  display: hidden;
}

.page-footer--congrats {
  margin-top: 64px;
  margin-bottom: -16px;
}

pre:has(> code) {
  overflow-x: auto;
  margin-block: 1.5rem;
  padding: 1rem;
  background: var(--syntax-background);
  border: 1px solid var(--syntax-border);
  color: var(--syntax-text);
  /* border-radius: var(--rounded-medium); */
  font-weight: 500;
}

/* Reset color for nested scripts */
.token.script {
  color: var(--syntax-default);
}

.token.comment,
.token.prolog,
.token.doctype,
.token.cdata {
  color: var(--syntax-comment);
  font-style: italic;
  font-weight: 400;
}

.token.punctuation {
  color: var(--syntax-punctuation);
}

.token.attr-value,
.token.selector,
.token.string,
.token.char,
.token.boolean,
.token.number,
.token.regex,
/* .token.builtin, */
.token.inserted {
  color: var(--syntax-string);
}

.token.operator,
.token.entity,
.token.url,
.language-css .token.string,
.style .token.string {
  color: var(--syntax-punctuation);
}

.token.atrule,
.token.function,
.token.class-name {
  color: var(--syntax-property);
}

.token.tag,
.token.tag > .token.class-name {
  color: var(--syntax-keyword);
}

.token.keyword {
  color: var(--syntax-keyword);
  font-weight: bold;
}

.language-css .token.property,
.token.attr-name,
/* .token.property, */
.token.variable,
.token.constant,
.token.symbol,
.token.deleted,
.token.important {
  color: var(--syntax-property);
}

.token.important,
.token.bold {
  font-weight: bold;
}

.token.italic {
  font-style: italic;
  font-weight: 400;
}

.token.entity {
  cursor: help;
}

.avatar-wrapper {
  background: var(--theme-photo);

  --avatar-size: 200px;
  --avatar-padding: 0px;
  float: right;
  margin: 1rem;
  margin-right: 0;
  margin-top: 0.5rem;
  padding: var(--avatar-padding);
  display: flex;
  position: relative;

  border-radius: var(--rounded-pill);

  /* outline: 1px solid var(--image-outline);
  outline-offset: -1px; */
}

.avatar {
  /* background: var(--theme-photo); */
  border-radius: inherit;

  width: var(--avatar-size);
  height: var(--avatar-size);
  /* border: 0; */
  box-sizing: content-box;

  /* outline: 1px solid var(--color-shadow);
  outline-offset: -1px; */
}

@media (width <= 50rem) {
  .avatar {
    --avatar-size: 100px;
  }
}

.header {
  background: var(--theme-header-bg);
  color: var(--theme-header-text);
  /* border-bottom: 2px solid; */
  box-shadow: var(--shadow2);
  margin-bottom: 16px;
  padding: 8px 0;
}

:where(:root[data-sticky]) .header {
  top: 0;
  position: sticky;
  z-index: 1;
  transition: translate 200ms;
  translate: 0% 0%;
}

:root[data-sticky="false"] .header {
  translate: 0% calc(-100% - 2px);
}

@media (prefers-reduced-motion: reduce) {
  .header {
    transition: opacity 200ms !important;
    opacity: 1;
  }

  :root[data-sticky="false"] .header {
    translate: initial;
    opacity: 0;
  }
}

.header-content {
  width: 100%;
  max-width: var(--width-heading);
  margin-inline: auto;

  display: flex;
  flex-direction: column;
  justify-content: start;
  align-items: stretch;
  padding: 1rem;
  gap: 8px;

  box-sizing: border-box;
}

.logo {
  display: grid;
  align-items: center;
}

.logo svg {
  /* max-width: 250px; */
  width: auto;
  height: 26px;
  fill: currentColor;
}

.decoration {
  color: inherit;
}

.logo a {
  position: relative;
  color: inherit;
  pointer-events: initial;
  padding: 0;
  line-height: 1;
  width: 100%;
  display: flex;
  outline-offset: 4px;
}

.logo a:hover:not(:focus-visible)::after {
  content: "";
  width: 100%;
  position: absolute;
  left: 0;
  bottom: calc(
    -1 * (var(--link-underline-offset) + var(--link-underline-thickness-hover))
  );
  height: var(--link-underline-thickness-hover);
  background: currentColor;
}

.logo-container {
  display: flex;
  /* align-items: center; */
  gap: 1rem;
}

@media (width < 35rem) {
  .header {
    padding: 8px 0;
  }

  .logo a {
    margin-block: 8px;
  }

  .logo svg {
    height: initial;
    width: 100%;
  }

  .logo-container {
    /* justify-content: center; */
  }

  .header-content {
    gap: 16px;
  }
}

@media (width >= 35rem) {
  .header-content {
    padding: 16px;
    flex-direction: row;
    justify-content: space-between;
  }

  :root[data-sticky="true"] .header {
    position: sticky;
  }
}

.footer {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  gap: 8px;
  padding: 1rem;
  margin-top: 4rem;
  margin-bottom: env(safe-area-max-inset-bottom, 1rem);
}

.footer > * {
  margin-inline: auto;
  max-width: max-content;
}

.nav {
  max-width: var(--width-heading);
  display: flex;
  /* align-items: center; */
}

.nav a {
  /* display: block; */
  color: inherit;
  font-weight: bold;
  /* font-style: italic; */
  padding-top: 20px;
  padding-bottom: 20px;
  font-size: var(--font-size-nav);
}

.nav a:where(:not(:hover)) {
  text-decoration-line: none;
}

.nav .button {
  width: 100%;
  padding: 8px 8px;
}

.nav .button:focus-visible {
  outline-color: currentColor;
  outline-offset: -1px;
}

.nav ul {
  margin: 0;
  display: flex;
  flex-wrap: wrap;
  list-style: none;
  width: 100%;
  max-width: var(--width-heading);
  padding: 0;
  justify-content: space-evenly;
  justify-content: space-between;
  padding-right: 4px;
  font-style: italic;
  text-transform: uppercase;
  /* font-family: var(--font-mono); */
}

.nav .separator::after {
  font-style: normal;
  font-weight: normal;
  content: "/";
  opacity: 0.2;
  margin-inline: 0;
}

@media (width <= 50rem) {
  .nav .separator {
    margin-inline: 8px;
  }

  .nav ul,
  .logo {
    /* justify-content: center; */
  }
}

@media (width > 50rem) {
  .nav .separator {
    margin-inline: 8px;
  }
}

article:where(.page) {
  > header,
  > section,
  > footer {
    max-width: var(--width-heading);
    margin-inline: auto;
    padding-inline: 1rem;

    p,
    ul,
    ol,
    dl,
    figcaption,
    details {
      max-width: var(--width-copy);
    }
  }

  > header {
    > h1 {
      margin-block: 2rem 1.5rem;
    }

    > small {
      display: block;
      margin-block: 0.5rem 1.5rem;
    }
  }

  /* Hack for my bad habit of using Markdown images with bold text after them as captions */
  p:has(img, video) + p:has(strong) {
    margin-top: -16px;
    line-height: 1.25;

    strong {
      font-weight: normal;
      font-style: italic;
      font-size: var(--font-size-small);
    }
  }

  > :where(section, header, footer) {
    video,
    img {
      max-width: 100%;
      height: auto;
      display: block;
      /* border-radius: var(--rounded-small); */
    }

    p:has(img, video) {
      max-width: var(--width-heading);
      display: flex;
    }

    hr {
      border: 0;
      margin-block: 1.5rem;
      margin-inline: auto;
      color: inherit;
      width: 100%;
      background: var(--theme-accent2);
      height: 1px;

      @media (width < 40rem) {
        margin-inline: -16px;
        width: calc(100% + 32px);
      }

      /* https://css-shape.com/zig-zag-line/ */

      --a: 90deg; /* control the angle */
      --s: 16px; /* size of the zig-zag */
      --b: 4px; /* control the thickness */

      height: calc(var(--b) + var(--s) / (2 * tan(var(--a) / 2)));
      --_g: var(--s) repeat-x
        conic-gradient(
          from calc(var(--a) / -2) at bottom,
          #0000,
          #000 1deg calc(var(--a) - 1deg),
          #0000 var(--a)
        );
      mask:
        50% calc(-1 * var(--b)) / var(--_g) exclude,
        50% / var(--_g);
    }

    :where(.paragraph),
    blockquote,
    ul,
    ol,
    dl,
    p,
    figure {
      margin: 1.5rem 0;
    }

    ul ul {
      margin-block: 0.5rem;
    }

    li > p {
      margin-block: 0.5rem;
    }

    figure {
      display: flex;
      flex-direction: column;
      max-width: max-content;
      gap: 8px;

      @media (width < 30rem) {
        margin-inline: -16px;
        width: calc(100% + 32px);

        figcaption {
          padding-inline: 16px;
        }
      }

      img,
      video {
        outline: 2px dotted var(--theme-border);
        outline-offset: -2px;
        background-color: var(--theme-page-bg);
        background-color: var(--theme-image);
        /* border-radius: var(--rounded-small); */

        @media (width < 30rem) {
          outline: 0;
          border-block: 2px solid var(--theme-border);
          box-shadow: var(--shadow1);
          box-sizing: content-box;
        }

        &:where(:not([data-background="transparent"])) {
          /* background: var(--theme-image); */
          /* I use a lot of lazy loaded images, so let's give them a bit of a
          background so that things look less empty when they load in while you're
          scrolling... */
          /* box-shadow: var(--shadow1); */
        }
      }
    }

    figcaption {
      font-size: var(--font-size-small);
      /* text-wrap: balance; */
      text-wrap: pretty;
      font-style: italic;
      margin-top: -4px;

      strong {
        font-style: normal;
      }
    }

    blockquote,
    aside {
      padding-inline: 1rem;
      border-left: 4px solid var(--theme-border);
      max-width: max-content;
      /* position: relative; */

      /* &::after {
        content: "";
        width: 4px;
        height: 100%;
        position: absolute;
        top: 0;
        left: -4px;
        background: var(--theme-accent2);
        border-radius: var(--rounded-pill);
      } */

      h3 {
        margin-top: 1.5rem;
      }
    }

    blockquote {
      font-style: italic;
    }
  }
}

:where(.page.post) {
  p > img {
    outline: 2px dotted var(--theme-image);
    outline-offset: -2px;
  }
}

a.card {
  color: inherit;
  text-decoration-line: none;

  display: grid;
  margin-block: 16px;
  padding: 16px;
  gap: 8px;

  /* border-radius: 0; */
  background: var(--theme-card);
  border: 2px solid;
  outline-offset: -1px;

  box-shadow: var(--shadow1);

  @media (width < 40rem) {
    margin-inline: -16px;
    border-inline: 0;
    /* width: calc(100% + 32px); */
  }

  .heading {
    margin: 0;
    font-weight: bold;
    text-wrap: balance;
    line-height: 1.25;
    color: inherit;
    text-underline-offset: var(--link-underline-offset);
  }

  &:hover:where(:not(:active)) {
    background-image: radial-gradient(var(--theme-hover-light));

    .heading {
      text-decoration-line: underline;
      text-decoration-thickness: inherit;
      color: var(--color-black);
    }
  }

  .description {
    margin: 0;
    font-style: italic;
    font-size: var(--font-size-small);
  }

  &:focus-visible {
    box-shadow: 0 0 0 2px var(--theme-card);
    outline-width: 2px;
    outline-offset: 2px;
  }
}

ul.card {
  --card-padding-x: 16px;
  --card-padding-y: 8px;

  display: grid;
  list-style-type: none;
  max-width: initial;
  padding: 0;
  gap: 1px;

  /* border-radius: 0; */
  background: var(--theme-page-bg);
  border: 2px solid;
  color: inherit;

  box-shadow: var(--shadow1);

  > li a {
    /* border-radius: 0; */
    display: block;
    padding: var(--card-padding-y) var(--card-padding-x);
    background: var(--theme-card);
    color: inherit;

    &:hover {
      background-image: var(--ui-bg-overlay-hover);
    }

    &:not(:hover) {
      text-decoration-line: none;
    }

    &:focus-visible {
      outline-offset: -2px;
    }
  }

  > li:first-of-type a {
    /* border-radius: var(--rounded-medium) var(--rounded-medium) 0 0; */
  }

  > li:last-of-type a {
    /* border-radius: 0 0 var(--rounded-medium) var(--rounded-medium); */
  }
}

ul.card[data-size="large"] {
  --card-padding-x: 16px;
  --card-padding-y: 16px;
}

.infobox {
  @media (width < 40rem) {
    margin-inline: -16px;
  }
}

a.infobox {
  color: inherit;
  text-decoration-line: none;

  margin-block: 16px;
  gap: 8px;

  outline-offset: -1px;

  padding: 16px;
  background: var(--theme-infobox);
  display: grid;

  &:hover:where(:not(:active)) {
    background-image: radial-gradient(var(--theme-hover-light-alt));
  }

  & + & {
    margin-top: -15px;
  }

  .heading {
    margin: 0;
    font-weight: bold;
    text-wrap: balance;
    line-height: 1.25;
    color: inherit;
    text-underline-offset: var(--link-underline-offset);
  }

  .description {
    margin: 0;
  }

  &:where(:hover) .heading {
    text-decoration-line: underline;
    text-decoration-thickness: inherit;
    color: var(--color-black);
  }
}

ul.infobox {
  display: grid;
  gap: 1px;
  list-style-type: none;
  padding: 0;

  /* padding-inline: 16px; */
  /*! border-left: 4px solid transparent; */
  /* max-width: max-content; */
  position: relative;

  background: var(--theme-page-bg);
  border-radius: 0;
  /* border: 2px solid; */
  /* box-shadow: var(--shadow-inset1); */

  a {
    color: inherit;
  }

  &.clickable a {
    display: block;
    outline-offset: -3px;

    &:not(:hover) {
      text-decoration-line: none;
    }
  }

  &.clickable > li a,
  &:not(.clickable) > li {
    padding: 8px 16px;
    background: var(--theme-infobox);

    &:hover:where(:not(:active)) {
      background-image: radial-gradient(var(--theme-hover-light-alt));
    }
  }
}

dl.infobox {
  background: var(--theme-page-bg);

  > :is(dd, dt) {
    background: var(--theme-infobox);
  }

  > :is(dd, dt) {
    padding-inline: 16px;
  }

  > dt {
    margin: 0;
  }

  > dd + dt {
    margin-top: 1px;
    padding-block: 16px 0;
  }

  > dt:first-child {
    padding-block: 16px 0;
  }

  > dd {
    padding-block: 0 16px;
  }

  > dd + dd {
    margin-top: 0;
  }

  @media (width >= 40rem) {
    &.wide-dl {
      display: grid;
      gap: 1px;
      grid-template-columns: auto 1fr;

      > :is(dd, dt) {
        margin: 0;
        padding: 8px 16px;
      }
    }
  }
}

main details {
  display: grid;
  margin: 1.5rem 0;
  /* border-bottom: 1px solid var(--theme-divider); */
  /* border-bottom: 1px solid var(--theme-border); */
  background: var(--theme-infobox);
  padding-inline: 16px;

  @media (width < 40rem) {
    margin-inline: -16px;
  }
}

main details:hover {
  z-index: 100;
}

/* main details:where(:last-of-type, :has(+ :not(details))) {
  border-bottom: 1px solid var(--theme-border);
} */

main details + details {
  margin-top: calc(-1.5rem + 1px);
  /* margin-top: calc(-1.5rem); */
}

main summary {
  -webkit-user-select: none;
  user-select: none;
  cursor: default;
  padding-block: 16px;
  padding-inline: 16px;
  margin-inline: -16px;
}

main details {
  summary {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 16px;
  }

  /* https://css-shape.com/plus/ */
  summary::after {
    content: "";
    --c: var(--theme-shadow);
    height: 24px;
    aspect-ratio: 1;
    background: radial-gradient(
      circle at center,
      var(--theme-text) 0 calc(100% - 6px),
      transparent 0
    );
    box-shadow: 0 0 0 6px inset var(--c);
    border-image: conic-gradient(var(--c) 0 0) 50% / calc(50% - 1px);
    clip-path: circle();
  }

  /* https://css-shape.com/minus/ */
  &[open] summary::after {
    border-image: conic-gradient(var(--c) 0 0) 1 / calc(50% - 1px) 2px;
  }

  @media (hover) {
    summary:hover:where(:not(:active)) {
      background-image: radial-gradient(var(--theme-hover-light-alt));
    }
  }
}

/* main summary:hover:active::after {
  opacity: 0.5;
} */

main details:has(> summary:focus-visible) {
  box-shadow: none;
  outline: 3px solid;
  outline-offset: -1px;
  /* border-radius: var(--rounded-small); */
}

main details summary:focus-visible {
  outline: none;
}

main details[open] > summary {
  margin-bottom: -0.5rem;
  border-bottom: 2px dotted;
  position: relative;
}

.button,
button {
  font: inherit;
  text-align: center;
  justify-content: center;
  align-items: center;
  display: inline-flex;
  font-weight: bold;
  /* font-style: italic; */
  padding: 8px 16px;
  border-radius: 0;
  text-decoration-line: none;
  text-decoration-thickness: var(--link-underline-thickness);
  line-height: 1.25;
  /* border: 0; */

  background: var(--theme-button-bg);
  color: var(--theme-button-text);

  border: 2px solid transparent;
  box-shadow: var(--shadow1);
}

.button:hover,
button:hover {
  text-decoration-line: none;
}

.button:hover:where(:not(:active)),
button:hover:where(:not(:active)) {
  background-image: radial-gradient(var(--theme-hover-dark));
}

.button:focus-visible,
button:focus-visible {
  outline: 2px solid var(--color-black);
  outline-offset: 2px;
  box-shadow: 0 0 0 2px var(--color-white);
}

:is(.button, button):where([data-variant="secondary"]) {
  background: var(--color-white);
  color: var(--color-green);
  font-weight: bold;
  line-height: 1.25;
  border-color: var(--theme-border2);
  box-shadow: var(--shadow1);

  &:hover:where(:not(:active)) {
    background-image: radial-gradient(var(--theme-hover-light));
  }
}

:is(.button, button):where([data-size="small"]) {
  padding: 4px 8px;
  border-radius: 0;
  font-size: var(--font-size-small);
}

label:has(> input[type="checkbox"]:first-child) {
  user-select: none;
  display: flex;
  gap: 0.5rem;

  input[type="checkbox"] {
    color-scheme: light;
    accent-color: var(--theme-border);
    width: 1.5rem;
    height: 1.5rem;
    margin: 0;
    margin-top: 4px;
  }
}

.crime-frame {
  overflow: hidden;
  position: relative;
  display: flex;
}

.crime-frame :is(details, summary) {
  all: initial;
  display: block;
  font: inherit;
}

.crime-frame > * {
  max-width: initial !important;
  width: 100% !important;
}

.menu {
  display: grid;
  gap: 1px;

  background: var(--theme-page-bg);
  color: inherit;
}

.menu-card {
  color: inherit;
  text-decoration-line: none;

  display: grid;
  padding: 16px;
  line-height: 1.25;

  background: var(--theme-infobox);
  outline-offset: -2px;

  font-size: var(--font-size-h3);

  &:empty {
    pointer-events: none;
  }

  &:where(:hover:not(:active)) {
    background-image: radial-gradient(var(--theme-hover-light-alt));

    .heading {
      text-decoration-line: underline;
      text-decoration-thickness: inherit;
      color: var(--color-black);
    }
  }

  .heading {
    margin: 0;
    font-weight: bold;
    text-wrap: balance;
    line-height: 1.25;
    color: inherit;
    text-underline-offset: var(--link-underline-offset);
  }

  .description {
    margin: 0;
    font-style: italic;
    font-size: var(--font-size-small);
  }
}

@media (width < 40rem) {
  .menu-card {
    &:empty {
      display: none;
    }
  }

  .menu {
    margin-inline: -16px;
  }
}

@media (width >= 40rem) {
  .menu {
    .menu-card {
      &:empty {
        display: none;
      }
    }
  }
}