@media (prefers-color-scheme: dark) {
  img:not(.button-icon) {
    filter: brightness(0.8) contrast(1.2);
  }
  .squiggle {
    filter: brightness(0.3) saturate(9);
  }
  header .header-logo svg {
    filter: brightness(1.7) saturate(0);
  }
  .button-icon {
    filter: invert(1) brightness(2);
  }
  .home-intro__hello-group svg path {
    stroke: light-dark(#F1ECE4, #303030);
  }
  #theme-switcher .moon {
    display: none;
    visibility: hidden;
  }
  #theme-switcher .sun {
    display: block;
    visibility: visible;
  }
  #et picture, #re picture {
    filter: invert(1) brightness(0.8);
  }
  #about-page .image-container {
    background-color: transparent;
  }
  #about-page .icon img {
    filter: brightness(0.5);
  }
}
.dark img:not(.button-icon) {
  filter: brightness(0.8) contrast(1.2);
}
.dark .squiggle {
  filter: brightness(0.3) saturate(9);
}
.dark header .header-logo svg {
  filter: brightness(1.7) saturate(0);
}
.dark .button-icon {
  filter: invert(1) brightness(2);
}
.dark .home-intro__hello-group svg path {
  stroke: light-dark(#F1ECE4, #303030);
}
.dark #theme-switcher .moon {
  display: none;
  visibility: hidden;
}
.dark #theme-switcher .sun {
  display: block;
  visibility: visible;
}
.dark #et picture, .dark #re picture {
  filter: invert(1) brightness(0.8);
}
.dark #about-page .image-container {
  background-color: transparent;
}
.dark #about-page .icon img {
  filter: brightness(0.5);
}

@media (prefers-color-scheme: light) {
  img:not(.button-icon) {
    filter: brightness(1) contrast(1);
  }
  .squiggle {
    filter: brightness(1) saturate(1);
  }
  header .header-logo svg {
    filter: brightness(1) saturate(1);
  }
  .button-icon {
    filter: invert(0) brightness(1);
  }
  .home-intro__hello-group svg path {
    stroke: light-dark(#F8D0A1, #864C09);
  }
  #theme-switcher .moon {
    display: block;
    visibility: visible;
  }
  #theme-switcher .sun {
    display: none;
    visibility: hidden;
  }
  #et picture, #re picture {
    filter: invert(0) brightness(1);
  }
  #about-page .image-container {
    background-color: rgba(255, 255, 255, 0.3);
  }
  #about-page .icon img {
    filter: brightness(1);
  }
}
.light img:not(.button-icon) {
  filter: brightness(1) contrast(1);
}
.light .squiggle {
  filter: brightness(1) saturate(1);
}
.light header .header-logo svg {
  filter: brightness(1) saturate(1);
}
.light .button-icon {
  filter: invert(0) brightness(1);
}
.light .home-intro__hello-group svg path {
  stroke: light-dark(#F8D0A1, #864C09);
}
.light #theme-switcher .moon {
  display: block;
  visibility: visible;
}
.light #theme-switcher .sun {
  display: none;
  visibility: hidden;
}
.light #et picture, .light #re picture {
  filter: invert(0) brightness(1);
}
.light #about-page .image-container {
  background-color: rgba(255, 255, 255, 0.3);
}
.light #about-page .icon img {
  filter: brightness(1);
}

.text-primary {
  color: light-dark(#4E4843, #f6f5f3);
}

.text-secondary {
  color: light-dark(#7C6E65, #c4c4c4);
}

.text-neutral {
  color: light-dark(#9A9384, #9A9384);
}

.text-inverted {
  color: light-dark(#F6F5F3, #111010);
}

.text-negative {
  color: light-dark(#B11B1B, #FFC6C6);
}

.text-warning {
  color: light-dark(#864C09, #F8D0A1);
}

.text-emphasis {
  color: light-dark(#736002, #EEE485);
}

.text-success {
  color: light-dark(#436808, #C6E790);
}

.text-links {
  color: light-dark(#116969, #2FE4EF);
}

.text-rose {
  color: light-dark(#FFC6C6, #B11B1B);
}

.text-sunspray {
  color: light-dark(#F8D0A1, #864C09);
}

.text-lemonade {
  color: light-dark(#EEE485, #736002);
}

.text-lucky {
  color: light-dark(#C6E790, #436808);
}

.text-seasalt {
  color: light-dark(#C2DFE1, #116969);
}

.border-primary {
  border-color: light-dark(#4E4843, #f6f5f3);
}

.border-secondary {
  border-color: light-dark(#7C6E65, #c4c4c4);
}

.border-neutral {
  border-color: light-dark(#9A9384, #9A9384);
}

.border-inverted {
  border-color: light-dark(#F6F5F3, #111010);
}

.border-negative {
  border-color: light-dark(#B11B1B, #FFC6C6);
}

.border-warning {
  border-color: light-dark(#864C09, #F8D0A1);
}

.border-emphasis {
  border-color: light-dark(#736002, #EEE485);
}

.border-success {
  border-color: light-dark(#436808, #C6E790);
}

.border-links {
  border-color: light-dark(#116969, #2FE4EF);
}

.border-rose {
  border-color: light-dark(#FFC6C6, #B11B1B);
}

.border-sunspray {
  border-color: light-dark(#F8D0A1, #864C09);
}

.border-lemonade {
  border-color: light-dark(#EEE485, #736002);
}

.border-lucky {
  border-color: light-dark(#C6E790, #436808);
}

.border-seasalt {
  border-color: light-dark(#C2DFE1, #116969);
}

.border-dashed {
  border: 1px dashed;
}

.border-solid {
  border: 2px solid;
}

.bg-primary {
  background: light-dark(#F6F5F3, #111010);
}

.bg-secondary {
  background: light-dark(#FFFFFF, #1b1b1b);
}

.bg-tertiary {
  background: light-dark(#F1ECE4, #303030);
}

.bg-primary-inverted {
  background: light-dark(#4E4843, #f6f5f3);
}

.bg-secondary-inverted {
  background: light-dark(#7C6E65, #c4c4c4);
}

.bg-negative {
  background: light-dark(#FFC6C6, #B11B1B);
}

.bg-warning {
  background: light-dark(#F8D0A1, #864C09);
}

.bg-emphasis {
  background: light-dark(#EEE485, #736002);
}

.bg-success {
  background: light-dark(#C6E790, #436808);
}

.bg-links {
  background: light-dark(#C2DFE1, #116969);
}

.bg-negative-inverted {
  background: light-dark(#B11B1B, #FFC6C6);
}

.bg-warning-inverted {
  background: light-dark(#864C09, #F8D0A1);
}

.bg-emphasis-inverted {
  background: light-dark(#736002, #EEE485);
}

.bg-success-inverted {
  background: light-dark(#436808, #C6E790);
}

.bg-links-inverted {
  background: light-dark(#116969, #2FE4EF);
}

.bg-rose {
  background: light-dark(#FFC6C6, #B11B1B);
}

.bg-sunspray {
  background: light-dark(#F8D0A1, #864C09);
}

.bg-lemonade {
  background: light-dark(#EEE485, #736002);
}

.bg-lucky {
  background: light-dark(#C6E790, #436808);
}

.bg-seasalt {
  background: light-dark(#C2DFE1, #116969);
}

.neue-bit {
  font-family: "neuebit";
  font-size: 2rem;
}

@font-face {
  font-family: "neuebit";
  src: url("../assets/fonts/neuebit-regular.woff2") format("woff2"), url("../assets/fonts/neuebit-regular.woff") format("woff");
  font-weight: normal;
}
@font-face {
  font-family: "mondwest";
  src: url("../assets/fonts/mondwest-regular.woff2") format("woff2"), url("../assets/fonts/mondwest-regular.woff") format("woff");
  font-weight: normal;
}
@font-face {
  font-family: "mondwest";
  src: url("../assets/fonts/mondwest-bold.woff2") format("woff2"), url("../assets/fonts/mondwest-bold.woff") format("woff");
  font-weight: bold;
}
@font-face {
  font-family: "overpass" sans-serif;
  src: url("../assets/fonts/overpass.ttf") format("ttf");
  font-style: normal;
}
@font-face {
  font-family: "overpass" sans-serif;
  src: url("../assets/fonts/overpass-italic.ttf") format("ttf");
  font-style: italic;
}
html {
  color: light-dark(#4E4843, #f6f5f3);
  font-family: "overpass";
  font-size: 16px;
  text-wrap: pretty;
}

body {
  margin: 0;
  text-wrap: pretty;
  background-color: light-dark(#F6F5F3, #111010);
  background-image: linear-gradient(light-dark(#FFFFFF, #1b1b1b), 1px, transparent 0), linear-gradient(90deg, light-dark(#FFFFFF, #1b1b1b), 1px, transparent 0);
  background-size: 3.75rem 3.75rem, 3.75rem 3.75rem;
  animation: moveX 15s linear infinite;
}
@media (prefers-reduced-motion) {
  body {
    animation: none;
  }
}
@keyframes moveX {
  from {
    background-position: 0 0, 0 0;
  }
  to {
    background-position: 3.75rem 3.75rem;
  }
}

a {
  background: linear-gradient(0deg, light-dark(#C2DFE1, #116969), light-dark(#C2DFE1, #116969)) no-repeat right bottom/0 100%;
  color: light-dark(#116969, #2FE4EF);
  font-size: inherit;
  transition: background-size 0.75s, background-color 1s;
}
a:where(:hover, :focus-visible) {
  background: linear-gradient(0deg, light-dark(#EEE485, #736002), light-dark(#EEE485, #736002)) no-repeat left bottom/100% 100%;
}
@media (prefers-reduced-motion) {
  a {
    background: none;
  }
  a:where(:hover, :focus-visible) {
    background: none;
  }
}

b {
  font-weight: 900;
}

p {
  font-size: 1.125rem;
  line-height: 150%;
}

.text-hero {
  font-family: "mondwest";
  font-weight: bold;
  font-size: 4.5rem;
}

aside {
  color: light-dark(#7C6E65, #c4c4c4);
  font-family: "overpass";
  font-weight: normal;
  font-size: 1.5rem;
}
aside .links {
  font-size: 1.125rem;
}

h1 {
  font-size: 1.5rem;
  font-weight: bold;
}

.text-sm {
  font-size: 1rem;
}

a.skip-main {
  left: -999px;
  position: absolute;
  top: auto;
  width: 1px;
  height: 1px;
  overflow: hidden;
  z-index: -999;
  color: transparent;
  opacity: 0;
}
a.skip-main:where(:hover, :focus-visible) {
  background: linear-gradient(0deg, light-dark(#F6F5F3, #111010), light-dark(#F6F5F3, #111010)) no-repeat left bottom/100% 100%;
}

a.skip-main:focus, a.skip-main:active {
  color: light-dark(#116969, #2FE4EF);
  background: linear-gradient(0deg, light-dark(#FFFFFF, #1b1b1b), light-dark(#FFFFFF, #1b1b1b)) no-repeat left top/100% 100%;
  left: 0;
  top: 3.75rem;
  width: fit-content;
  height: fit-content;
  padding: 0.75rem;
  border-radius: 0.5rem;
  border: 1px solid light-dark(#116969, #2FE4EF);
  text-align: center;
  opacity: 1;
  z-index: 999;
}
@media only screen and (min-width: 1440px) {
  a.skip-main:focus, a.skip-main:active {
    top: 5rem;
  }
}

button {
  align-items: center;
  border-radius: 0.5rem;
  border: none;
  color: light-dark(#4E4843, #f6f5f3);
  display: flex;
  font-size: 1.125rem;
  font-weight: bold;
  gap: 0.625rem;
  padding: 1rem 1.5rem;
}
button picture {
  display: flex;
}
button picture .button-icon {
  place-self: center;
  width: 1.25rem;
  pointer-events: none;
}
button:hover {
  cursor: pointer;
}

.link-button {
  width: fit-content;
  align-items: center;
  border-radius: 0.5rem;
  border: none;
  color: light-dark(#4E4843, #f6f5f3);
  display: flex;
  font-size: 1.125rem;
  font-weight: bold;
  gap: 0.625rem;
  padding: 1rem 1.5rem;
  text-decoration: none;
}
.link-button picture {
  display: flex;
}
.link-button picture .button-icon {
  place-self: center;
  width: 1.25rem;
  pointer-events: none;
}
.link-button:hover {
  cursor: pointer;
}
.link-button img {
  width: 1.5rem;
}

header {
  display: grid;
  gap: 0;
  margin: auto;
  max-width: 1440px;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  z-index: 10;
  height: 3.125rem;
}
@media only screen and (min-width: 1024px) {
  header {
    gap: 0.625rem;
  }
}
@media only screen and (min-width: 1440px) {
  header {
    gap: 1rem;
  }
}
header .header-inner {
  display: flex;
  flex-direction: row;
  height: 100%;
}
header .header-logo {
  transition: color 0.3s, fill 0.3s;
}
header .header-logo:hover, header .header-logo:focus {
  background: unset;
  color: light-dark(#4E4843, #f6f5f3);
}
header .header-logo:hover path, header .header-logo:focus path {
  fill: light-dark(#4E4843, #f6f5f3);
}
header a {
  display: flex;
  gap: 0.5rem;
  align-items: center;
  text-decoration: none;
  color: light-dark(#7C6E65, #c4c4c4);
  font-family: "mondwest";
  font-weight: bold;
  font-size: 1.5rem;
  transition: background-size 0.75s, background-color 1s, font-weight 0.3s;
}
header a:hover, header a:focus {
  color: light-dark(#4E4843, #f6f5f3);
  font-weight: 600;
}
header ul {
  display: flex;
  list-style-type: "";
  margin-block-start: 0;
  margin-block-end: 0;
  padding-inline-start: 0;
}
header ul li {
  width: 100%;
}
header ul li a {
  font-family: "overpass";
  font-weight: 400;
  text-align: center;
}
header button {
  white-space: nowrap;
}
header .header-inner {
  display: flex;
  grid-column: 2/12;
  justify-content: space-between;
  width: 100%;
}
header .header-nav {
  display: none;
  position: absolute;
  top: calc(3.125rem + 1px);
  width: 100%;
  height: calc(100vh - 3.125rem - 1px);
  z-index: 10;
  overflow: hidden;
}
header .header-nav ul {
  background-color: light-dark(#F6F5F3, #111010);
  flex-direction: column;
  gap: 0;
  padding-top: 2rem;
  height: 100%;
  width: 100%;
}
header .header-nav ul li a {
  justify-content: center;
  padding: 1rem 0;
  width: 100%;
}
header .header__mobile-hamburger-button {
  background: none;
  padding: 1rem;
  margin: -1rem;
}
header .header__mobile-hamburger-button:focus .line, header .header__mobile-hamburger-button:hover .line {
  background-color: light-dark(#4E4843, #f6f5f3);
}
header .header__mobile-hamburger-button.active .line {
  background-color: light-dark(#4E4843, #f6f5f3);
}
header .header__mobile-hamburger-button.active .line-one {
  transform-origin: 0 0;
  transform: translate(20%, 0%) rotate(45deg);
}
header .header__mobile-hamburger-button.active .line-two {
  transform-origin: center;
  width: 0;
  opacity: 0;
}
header .header__mobile-hamburger-button.active .line-three {
  transform-origin: 0 100%;
  transform: translate(20%, 1.25px) rotate(-45deg);
}
header .hamburger-icon {
  align-items: center;
  border-radius: 0;
  background: none;
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: 0;
  gap: 6px;
  width: 2rem;
  height: 2rem;
}
header .hamburger-icon .line {
  background-color: light-dark(#7C6E65, #c4c4c4);
  height: 4px;
  width: 32px;
  transition: all 0.7s;
}
header .header__email-button {
  align-self: center;
  margin-top: 2rem;
  width: fit-content;
}
@media only screen and (min-width: 1024px) {
  header {
    height: 4.375rem;
  }
  header .header-inner {
    grid-column: 2/4;
  }
  header .mobile {
    display: none;
    visibility: hidden;
  }
  header .header-nav {
    display: flex !important;
    grid-column: 4/12;
    height: 100%;
    top: 0;
    visibility: visible;
    position: relative;
  }
  header .header-nav ul {
    background: none;
    display: flex;
    flex-direction: row;
    justify-content: flex-end;
    padding: 0;
  }
  header .header-nav ul li {
    align-items: center;
    display: flex;
    height: 100%;
    width: auto;
    position: relative;
  }
  header .header-nav ul li:nth-of-type(2) > a {
    min-width: 6.5rem;
  }
  header .header-nav ul li a {
    background: none;
    font-size: 1.125rem;
    height: 100%;
    padding: 0 1rem;
    min-width: 4rem;
    gap: 0;
  }
  header .header-nav ul li a.current-page {
    color: light-dark(#4E4843, #f6f5f3);
    font-weight: 600;
  }
  header .header-nav ul li a::after {
    content: "";
    height: 0;
    transition: height, 0.3s;
    width: 100%;
    position: absolute;
    bottom: 0;
    margin-bottom: 0.9rem;
    z-index: -1;
  }
  header .header-nav ul li a:hover, header .header-nav ul li a:focus, header .header-nav ul li a.current-page {
    flex-direction: column;
  }
  header .header-nav ul li a:hover::after, header .header-nav ul li a:focus::after, header .header-nav ul li a.current-page::after {
    content: "";
    height: 1.1875rem;
    background-color: light-dark(#F1ECE4, #303030);
    width: 100%;
    position: absolute;
    bottom: 0;
    margin-bottom: 0.9rem;
    z-index: -1;
  }
  header .header-nav ul button {
    font-size: 1.125rem;
    margin: 0 0 0 1rem;
    padding: 1 1.125rem;
  }
}
@media only screen and (min-width: 1440px) {
  header .header-nav ul {
    gap: 1rem;
  }
}

.pill.home-intro__pill {
  background-color: light-dark(#FFFFFF, #1b1b1b);
  border-radius: 3rem;
  font-weight: 500;
  width: fit-content;
}
.pill.home-intro__pill {
  font-size: 1.125rem;
  padding: 0.75rem 1.5rem;
}
.card {
  text-decoration: none;
  color: light-dark(#4E4843, #f6f5f3);
  background: light-dark(#FFFFFF, #1b1b1b);
  width: fit-content;
  height: fit-content;
  transition: box-shadow 0.3s;
}
.card:hover {
  box-shadow: -2px 13px 24px -9px rgba(0, 0, 0, 0.19);
  -webkit-box-shadow: -2px 13px 24px -9px rgba(0, 0, 0, 0.19);
  -moz-box-shadow: -2px 13px 24px -9px rgba(0, 0, 0, 0.19);
}
.card.wip::after {
  max-width: 25.125rem;
  color: white;
  font-weight: bold;
  display: flex;
  position: absolute;
  width: 100%;
  top: 0;
  justify-content: center;
  top: 30%;
  content: "Work in progress";
  z-index: 1;
  opacity: 0;
  transition: all 0.5s ease-in-out;
  padding: 1rem 0;
}
@media only screen and (min-width: 1024px) {
  .card.wip::after {
    max-width: 100%;
  }
}
.card.wip:hover {
  cursor: not-allowed;
}
.card.wip:hover::after {
  backdrop-filter: contrast(0.1) blur(5px);
  opacity: 100%;
}
.card.wip .card-image {
  transition: all 0.5s ease-in-out;
}
.card div.container {
  background: light-dark(#FFFFFF, #1b1b1b);
}
.card h3, .card p {
  margin: 0;
}
.card div.text {
  padding: 1rem 1.5rem;
}
.card h3 {
  font-size: 1.5rem;
  text-wrap: pretty;
  line-height: 150%;
}
.card img {
  width: 100%;
}
.card div.container {
  display: flex;
  flex-direction: column;
  max-width: 25.125rem;
}
.card .text {
  display: flex;
  flex-direction: column;
  gap: 1rem;
}
@media only screen and (min-width: 1024px) {
  .card {
    flex-direction: column;
  }
}
@media only screen and (min-width: 1440px) {
  .card {
    max-width: 23.625rem;
  }
}

.tile {
  box-sizing: border-box;
  display: flex;
  height: 4.75rem;
  min-width: fit-content;
  min-height: fit-content;
  border-radius: 1rem;
  gap: 1rem;
  white-space: nowrap;
  align-items: center;
  transition: all, 0.5s;
  padding: 1rem;
  background-color: light-dark(#FFFFFF, #1b1b1b);
}
.tile p {
  margin: 0;
}
.tile img {
  height: 2.625rem;
  width: 2.625rem;
}
@media only screen and (min-width: 1024px) {
  .tile {
    position: relative;
    flex-direction: column;
    height: fit-content;
    width: fit-content;
    display: flex;
  }
  .tile img {
    width: 6.25rem;
    height: 6.25rem;
  }
}
.tile .external-link-icon {
  width: 1.25rem;
  height: auto;
  display: inline;
  margin-bottom: -0.2rem;
}

#theme-switcher {
  z-index: 1;
  width: fit-content;
}
#theme-switcher button {
  border-radius: 0.5rem 0.5rem 0 0;
  gap: 0;
  padding: 0.5rem;
  background-color: light-dark(#F1ECE4, #303030);
  width: fit-content;
  filter: opacity(0.5);
  overflow: hidden;
  transition: all 0.3s;
  right: 0;
}
#theme-switcher button:hover {
  filter: opacity(1);
}
#theme-switcher button:hover span {
  opacity: 100%;
  width: fit-content;
  margin-left: 0.5rem;
}
#theme-switcher button span {
  opacity: 0;
  width: 0;
  margin-left: 0;
  text-wrap: nowrap;
  transition: all 0.3s;
}
#theme-switcher button .sun {
  display: none;
  visibility: hidden;
}
#theme-switcher button picture {
  display: flex;
}
#theme-switcher button picture img {
  height: 1.5rem;
}

#back-to-top {
  z-index: 1;
  width: fit-content;
}
#back-to-top button {
  border-radius: 0.5rem 0.5rem 0 0;
  gap: 0;
  padding: 0.5rem;
  background-color: light-dark(#F1ECE4, #303030);
  width: fit-content;
  filter: opacity(0.5);
  overflow: hidden;
  transition: all 0.3s;
  margin-left: auto;
}
#back-to-top button:hover {
  filter: opacity(1);
}
#back-to-top button:hover span {
  opacity: 100%;
  width: fit-content;
  margin-right: 0.5rem;
}
#back-to-top button span {
  opacity: 0;
  width: 0;
  margin-left: 0;
  text-wrap: nowrap;
  transition: all 0.3s;
}
#back-to-top button picture {
  display: flex;
}
#back-to-top button picture img {
  height: 1.5rem;
}

#floating-toc#floating-toc {
  display: none;
  visibility: hidden;
}
@media only screen and (min-width: 1440px) {
  #floating-toc#floating-toc:has(.floating-toc-content > ul) {
    display: flex;
    visibility: visible;
    flex-direction: column;
    position: sticky;
    grid-column: 2/4;
    grid-row: 1;
    width: 100%;
    height: fit-content;
    top: 7rem;
  }
  #floating-toc#floating-toc:has(.floating-toc-content > ul) h1 {
    font-size: 1rem;
  }
  #floating-toc#floating-toc:has(.floating-toc-content > ul) ul {
    padding: 0;
    margin: 0 0;
  }
  #floating-toc#floating-toc:has(.floating-toc-content > ul) ul li {
    list-style: none;
    font-size: 1rem;
  }
  #floating-toc#floating-toc:has(.floating-toc-content > ul) ul li li {
    margin-left: 1.5rem;
  }
  #floating-toc#floating-toc:has(.floating-toc-content > ul) ul a {
    text-decoration: none;
  }
  #floating-toc#floating-toc:has(.floating-toc-content > ul) ul a:hover {
    text-decoration: underline;
  }
  #floating-toc#floating-toc:has(.floating-toc-content > ul) ul a.selected {
    background-color: light-dark(#EEE485, #736002);
  }
}

#home-page {
  display: grid;
  gap: 0;
  margin: auto;
  max-width: 1440px;
  grid-template-columns: repeat(12, minmax(0, 1fr));
}
@media only screen and (min-width: 1024px) {
  #home-page {
    gap: 0.625rem;
  }
}
@media only screen and (min-width: 1440px) {
  #home-page {
    gap: 1rem;
  }
}
#home-page .snap-scroll {
  scroll-behavior: smooth !important;
  overflow-y: auto;
  overflow-x: hidden;
  scroll-snap-type: unset;
  max-height: calc(100dvh - 3.125rem);
}
@media only screen and (min-width: 1024px) {
  #home-page .snap-scroll {
    scroll-snap-type: y mandatory;
    max-height: calc(100dvh - 4.375rem);
  }
}
#home-page section {
  scroll-snap-align: start;
  grid-column: 2/12;
}
#home-page #home-intro {
  align-content: center;
}
#home-page h1 {
  transition: all, 0.5s;
  color: light-dark(#4E4843, #f6f5f3);
  font-family: "mondwest";
  font-style: normal;
  font-weight: 400;
  line-height: normal;
  transform: rotate(-1deg);
  margin-block: 0;
  white-space: nowrap;
}
#home-page .home-intro__pills {
  display: flex;
}
#home-page .note-link {
  background: none;
}
#home-page #home-intro__slime {
  transform: rotate(6.954deg) translateY(-0.5rem);
}
#home-page #home-intro__slime path {
  fill: light-dark(#4E4843, #f6f5f3);
}
#home-page .home-intro__i-am {
  display: flex;
  flex-direction: row;
  gap: 1rem;
}
#home-page .home-intro__hello-group {
  max-width: 38rem;
  position: relative;
  z-index: -1;
}
#home-page .home-intro__hello-group .placeholder {
  z-index: -1;
}
#home-page .home-intro__hello-group .home-intro__hello {
  position: absolute;
  z-index: 1;
  left: 0;
  top: 0;
}
#home-page .home-intro__hello-group #home-intro__hello-tc path {
  stroke-dasharray: 700;
  stroke-dashoffset: 700;
  animation: draw 3s linear forwards;
}
#home-page .home-intro__hello-group #home-intro__hello-tc path:nth-of-type(2) {
  animation-delay: 0.4s;
}
#home-page .home-intro__hello-group #home-intro__hello-tc path:nth-of-type(3) {
  animation-delay: 0.6s;
}
#home-page .home-intro__hello-group #home-intro__hello-tc path:nth-of-type(4) {
  animation-delay: 0.8s;
}
#home-page .home-intro__hello-group #home-intro__hello-tc path:nth-of-type(5) {
  animation-delay: 1s;
}
#home-page .home-intro__hello-group #home-intro__hello-tc path:nth-of-type(6) {
  animation-delay: 1.2s;
}
#home-page .home-intro__hello-group #home-intro__hello-tc path:nth-of-type(7) {
  animation-delay: 1.4s;
}
#home-page .home-intro__hello-group #home-intro__hello-tc path:nth-of-type(8) {
  animation-delay: 1.6s;
}
#home-page .home-intro__hello-group #home-intro__hello-tc path:nth-of-type(9) {
  animation-delay: 1.8s;
}
#home-page .home-intro__hello-group #home-intro__hello-tc path:nth-of-type(10) {
  animation-delay: 2s;
}
#home-page .home-intro__hello-group #home-intro__hello-tc path:nth-of-type(11) {
  animation-delay: 2.2s;
}
#home-page .home-intro__hello-group #home-intro__hello-tc path:nth-of-type(12) {
  animation-delay: 2.4s;
}
#home-page .home-intro__hello-group #home-intro__hello-tc path:nth-of-type(13) {
  animation-delay: 2.6s;
}
#home-page .home-intro__hello-group #home-intro__hello-tc path:nth-of-type(14) {
  animation-delay: 2.8s;
}
#home-page .home-intro__hello-group #home-intro__hello-tc path:nth-of-type(15) {
  animation-delay: 3s;
}
#home-page .home-intro__hello-group #home-intro__hello-tc path:nth-of-type(16) {
  animation-delay: 3.2s;
}
#home-page .home-intro__hello-group #home-intro__hello-tc path:nth-of-type(17) {
  animation-delay: 3.4s;
}
#home-page .home-intro__hello-group #home-intro__hello-tc path:nth-of-type(18) {
  animation-delay: 3.6s;
}
#home-page .home-intro__hello-group #home-intro__hello-tc path:nth-of-type(19) {
  animation-delay: 3.8s;
}
#home-page .home-intro__hello-group #home-intro__hello-tc path:nth-of-type(20) {
  animation-delay: 4s;
}
#home-page .home-intro__hello-group #home-intro__hello-tc path:nth-of-type(21) {
  animation-delay: 4.2s;
}
#home-page .home-intro__hello-group #home-intro__hello-tc path:nth-of-type(22) {
  animation-delay: 4.4s;
}
#home-page .home-intro__hello-group #home-intro__hello-tc path:nth-of-type(23) {
  animation-delay: 4.6s;
}
#home-page .home-intro__hello-group #home-intro__hello-tc path:nth-of-type(24) {
  animation-delay: 4.8s;
}
#home-page .home-intro__hello-group #home-intro__hello-tc path:nth-of-type(25) {
  animation-delay: 5s;
}
#home-page .home-intro__hello-group #home-intro__hello-tc path:nth-of-type(26) {
  animation-delay: 5.2s;
}
#home-page .home-intro__hello-group #home-intro__hello-tc path:nth-of-type(27) {
  animation-delay: 5.4s;
}
#home-page .home-intro__hello-group #home-intro__hello-cn path {
  stroke-dasharray: 700;
  stroke-dashoffset: 700;
  animation: draw 3s linear forwards;
}
#home-page .home-intro__hello-group #home-intro__hello-cn path:nth-of-type(2) {
  animation-delay: 1.2s;
}
#home-page .home-intro__hello-group #home-intro__hello-cn path:nth-of-type(3) {
  animation-delay: 1.8s;
}
#home-page .home-intro__hello-group #home-intro__hello-cn path:nth-of-type(4) {
  animation-delay: 2.4s;
}
#home-page .home-intro__hello-group #home-intro__hello-cn path:nth-of-type(5) {
  animation-delay: 3s;
}
#home-page .home-intro__hello-group #home-intro__hello-cn path:nth-of-type(6) {
  animation-delay: 3.6s;
}
#home-page .home-intro__hello-group #home-intro__hello-cn path:nth-of-type(7) {
  animation-delay: 4.2s;
}
#home-page .home-intro__hello-group #home-intro__hello-cn path:nth-of-type(8) {
  animation-delay: 4.8s;
}
#home-page .home-intro__hello-group #home-intro__hello-cn path:nth-of-type(9) {
  animation-delay: 5.4s;
}
#home-page .home-intro__hello-group #home-intro__hello-cn path:nth-of-type(10) {
  animation-delay: 6s;
}
#home-page .home-intro__hello-group #home-intro__hello-jp path {
  stroke-dasharray: 700;
  stroke-dashoffset: 700;
  animation: draw 3s linear forwards;
}
#home-page .home-intro__hello-group #home-intro__hello-jp path:nth-of-type(2) {
  animation-delay: 0.8s;
}
#home-page .home-intro__hello-group #home-intro__hello-jp path:nth-of-type(3) {
  animation-delay: 1.2s;
}
#home-page .home-intro__hello-group #home-intro__hello-jp path:nth-of-type(4) {
  animation-delay: 1.6s;
}
#home-page .home-intro__hello-group #home-intro__hello-jp path:nth-of-type(5) {
  animation-delay: 2s;
}
#home-page .home-intro__hello-group #home-intro__hello-jp path:nth-of-type(6) {
  animation-delay: 2.4s;
}
#home-page .home-intro__hello-group #home-intro__hello-jp path:nth-of-type(7) {
  animation-delay: 2.8s;
}
#home-page .home-intro__hello-group #home-intro__hello-jp path:nth-of-type(8) {
  animation-delay: 3.2s;
}
#home-page .home-intro__hello-group #home-intro__hello-jp path:nth-of-type(9) {
  animation-delay: 3.6s;
}
#home-page .home-intro__hello-group #home-intro__hello-jp path:nth-of-type(10) {
  animation-delay: 4s;
}
#home-page .home-intro__hello-group #home-intro__hello-jp path:nth-of-type(11) {
  animation-delay: 4.4s;
}
#home-page .home-intro__hello-group #home-intro__hello-jp path:nth-of-type(12) {
  animation-delay: 4.8s;
}
#home-page .home-intro__hello-group #home-intro__hello-jp path:nth-of-type(13) {
  animation-delay: 5.2s;
}
#home-page .home-intro__hello-group #home-intro__hello-en path {
  stroke-dasharray: 1500;
  stroke-dashoffset: 1500;
  animation: draw 4s linear forwards;
}
#home-page .home-intro__hello-group #home-intro__hello-en path:nth-of-type(2) {
  animation-delay: 4s;
}
#home-page .home-intro__hello-group #home-intro__hello-en path:nth-of-type(3) {
  animation-delay: 4.2s;
}
#home-page #home-intro__name-span {
  position: relative;
}
#home-page #home-intro__name-span::after {
  background: light-dark(#C2DFE1, #116969);
  content: "";
  left: 0;
  background-blend-mode: multiply;
  mix-blend-mode: multiply;
  position: absolute;
  width: 100%;
  z-index: -1;
}
#home-page #home-intro__paragraphs {
  max-width: 50ch;
}
#home-page #home-intro__image {
  transition: all, 0.5s;
  position: relative;
  max-width: 20rem;
}
#home-page #home-intro__image img {
  width: 100%;
}
#home-page .home-deco-circle {
  width: 4.875rem;
  height: 4.875rem;
  background-color: light-dark(#FFC6C6, #B11B1B);
  border-radius: 100%;
  position: absolute;
}
#home-page #home-tools, #home-page #home-design {
  display: grid;
  grid-template-columns: subgrid;
  row-gap: 2rem;
  align-content: center;
}
#home-page #home-design h2 {
  rotate: -1deg;
}
#home-page #home-tools h2 {
  rotate: 1deg;
}
#home-page #home-tools .tools {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  gap: 4rem;
}
#home-page #home-tools h3 {
  font-size: 2.5rem;
  font-family: "mondwest";
  margin: 0;
  font-weight: 400;
}
#home-page #home-tools .tiles-container {
  display: flex;
  flex-direction: column;
  gap: 1rem;
}
#home-page #home-tools .design {
  gap: 2rem;
}
#home-page #home-tools .code {
  gap: 2rem;
}
#home-page #home-tools .code .tile {
  background-color: light-dark(#F6F5F3, #111010);
  border: 1px dashed light-dark(#9A9384, #9A9384);
  margin: -1px;
}
#home-page #home-intro, #home-page #home-design, #home-page #home-tools {
  padding: 2rem 0;
}
#home-page .squiggle {
  position: absolute;
  left: 0;
  z-index: -1;
}
#home-page .squiggle.home-design-squiggle {
  bottom: -2rem;
}
#home-page .squiggle.home-tools-squiggle {
  bottom: -0.5rem;
}
#home-page h2 {
  font-size: 4.5rem;
  font-family: "mondwest";
  margin: 0;
  position: relative;
  z-index: 1;
}
#home-page h2, #home-page aside, #home-page .cards {
  grid-column: 1/11;
}
#home-page aside .aside-main {
  font-size: 1.5rem;
}
#home-page aside p {
  margin: 0;
}
#home-page h2 span {
  white-space: nowrap;
}
@keyframes draw {
  to {
    stroke-dashoffset: 0;
  }
}
#home-page #home-intro {
  min-height: calc(100dvh - 3.125rem);
}
#home-page #home-design {
  align-content: center;
  align-items: center;
}
#home-page h1 {
  font-size: min(12vw, 4rem);
}
#home-page #home-intro__slime {
  height: 4rem;
  width: 4rem;
}
#home-page #home-intro__name-span::after {
  bottom: 0.25rem;
  height: 1rem;
}
#home-page .home-intro__hello-group {
  margin-bottom: -3rem;
  margin-left: -1rem;
}
#home-page .home-intro__pills {
  flex-direction: row;
  gap: 0.75rem;
  max-width: 100%;
  align-items: flex-start;
}
#home-page .home-intro__pills div {
  display: flex;
  justify-content: flex-start;
  padding: 0.75rem 1rem;
}
#home-page #home-intro {
  display: flex;
  flex-direction: column;
  row-gap: 2rem;
}
#home-page #home-intro__image img {
  transform: rotate(1.82deg);
}
#home-page #home-intro__image .home-deco-circle {
  bottom: -1rem;
  right: -1rem;
}
#home-page .cards {
  display: flex;
  flex-direction: column;
  gap: 1.5rem;
  align-items: center;
}
#home-page #home-tools {
  padding-bottom: 4rem;
}
#home-page #home-tools h2 {
  margin-top: 2rem;
}
#home-page #home-tools .home-tools-toggle, #home-page #home-tools h2, #home-page #home-tools .tools {
  grid-column: 1/11;
}
#home-page #home-tools, #home-page #home-designs {
  min-height: calc(100dvh - 4.375rem);
}
@media only screen and (min-width: 1024px) {
  #home-page {
    padding-bottom: 0;
    row-gap: 4rem;
  }
  #home-page .link-button {
    grid-column: 1/4;
    margin-bottom: -1em;
  }
  #home-page #home-intro {
    display: grid;
    grid-template-columns: subgrid;
    gap: inherit;
    row-gap: 2rem;
    min-height: calc(100dvh - 4.375rem);
  }
  #home-page #home-intro__hero {
    grid-column: 1/10;
  }
  #home-page #home-intro__hero h1 {
    font-size: min(12vw, 6rem);
  }
  #home-page #home-intro__slime {
    height: 6rem;
    width: 6rem;
  }
  #home-page .home-intro__hello-group {
    margin-bottom: -4rem;
  }
  #home-page .home-intro__pills {
    grid-column: 1/5;
  }
  #home-page #home-intro__paragraphs {
    grid-column: 1/6;
  }
  #home-page #home-intro__image {
    margin-top: -1rem;
    grid-column: 7/11;
  }
  #home-page #home-intro__image img {
    transform: rotate(3.64deg);
  }
  #home-page .home-intro__pills div {
    display: flex;
    justify-content: flex-start;
    padding: 1rem 2rem;
  }
  #home-page #home-intro__name-span::after {
    bottom: 0.75rem;
    height: 1.5rem;
  }
  #home-page .home-intro__i-am {
    row-gap: 2rem;
  }
  #home-page #home-design .cards {
    grid-column: 1/11;
    display: flex;
    flex-direction: row;
    scroll-snap-align: center;
    gap: 2rem;
  }
  #home-page #home-design .cards .card.vr {
    rotate: 1deg;
  }
  #home-page #home-design .cards .card.ol {
    rotate: -1deg;
    margin-top: 3rem;
  }
  #home-page #home-design .cards .card.darlo {
    rotate: 1deg;
    margin-top: 6rem;
  }
  #home-page #home-design .cards .card.climasaur {
    rotate: -1deg;
    margin-top: 9rem;
  }
  #home-page #home-design h2 {
    grid-column: 1/4;
    white-space: nowrap;
  }
  #home-page #home-design aside {
    margin-top: 3rem;
    text-align: right;
    grid-column: 6/11;
    rotate: 1deg;
  }
  #home-page #home-tools {
    display: grid;
    grid-template-columns: subgrid;
    gap: inherit;
    row-gap: 4rem;
    scroll-snap-align: end;
  }
  #home-page #home-tools h2 {
    grid-column: 6/11;
    rotate: 1deg;
    white-space: nowrap;
    margin-top: 0;
  }
  #home-page #home-tools h3 {
    white-space: nowrap;
  }
  #home-page #home-tools .tools {
    display: grid;
    grid-template-columns: subgrid;
    gap: inherit;
  }
  #home-page #home-tools .design {
    grid-column: 1/6;
  }
  #home-page #home-tools .code {
    grid-column: 6/11;
  }
  #home-page #home-tools .design, #home-page #home-tools .code {
    display: grid;
    grid-template-columns: subgrid;
    gap: inherit;
    align-items: top;
  }
  #home-page #home-tools .design h3, #home-page #home-tools .code h3 {
    grid-column: 1/6;
  }
  #home-page #home-tools .tiles-container {
    grid-column: span 5;
    display: grid;
    grid-template-columns: subgrid;
    position: relative;
    width: 100%;
    height: 100%;
  }
  #home-page #home-tools #ae {
    grid-column: 2/3;
    grid-row: 1;
    top: -1rem;
    rotate: -2deg;
  }
  #home-page #home-tools #fg {
    grid-column: 4/5;
    grid-row: 1;
    rotate: 1deg;
  }
  #home-page #home-tools #il {
    grid-column: 1/2;
    grid-row: 2;
    left: 2rem;
    rotate: 3deg;
  }
  #home-page #home-tools #in {
    grid-column: 5/6;
    grid-row: 2;
    right: 1rem;
    top: 1rem;
    rotate: 1deg;
  }
  #home-page #home-tools #ps {
    grid-column: 3/4;
    grid-row: 2;
    rotate: -3deg;
  }
  #home-page #home-tools #pr {
    grid-column: 3/54;
    grid-row: 3;
    bottom: -1rem;
    left: -1rem;
    rotate: 2deg;
  }
  #home-page #home-tools #et {
    grid-column: 1/2;
    grid-row: 1;
    top: -1rem;
    left: 1rem;
    rotate: -2deg;
  }
  #home-page #home-tools #ht {
    grid-column: 4/5;
    grid-row: 1;
    right: -1rem;
    rotate: 5deg;
  }
  #home-page #home-tools #hg {
    grid-column: 3/4;
    grid-row: 2;
    left: -3rem;
    top: -5rem;
  }
  #home-page #home-tools #rc {
    grid-column: 1/2;
    grid-row: 3;
    right: -3rem;
    top: -5rem;
    rotate: -1deg;
  }
  #home-page #home-tools #sa {
    grid-column: 3/4;
    grid-row: 3;
    left: -0.45rem;
    rotate: 1deg;
  }
  #home-page #home-tools #tw {
    grid-column: 5/6;
    grid-row: 3;
    bottom: 6rem;
    left: -3rem;
    rotate: 3deg;
  }
  #home-page #home-design, #home-page #home-tools {
    min-height: calc(100dvh - 3.125rem - 4rem);
  }
  #home-page #home-intro, #home-page #home-design, #home-page #home-tools {
    padding: 2rem 0;
  }
}
@media only screen and (min-width: 1440px) {
  #home-page {
    row-gap: 0;
  }
  #home-page #home-intro__hero {
    grid-column: 1/10;
  }
  #home-page #home-intro__hero h1 {
    font-size: min(12vw, 9.375rem);
  }
  #home-page #home-intro__slime {
    height: 9.375rem;
    width: 9.375rem;
  }
  #home-page #home-intro__image {
    margin-top: -1rem;
    grid-column: 8/11;
  }
  #home-page #home-intro__name-span::after {
    bottom: 1rem;
    height: 2rem;
  }
}

img {
  object-fit: contain;
  height: auto;
}

picture {
  display: block;
  height: auto;
  align-content: center;
}
picture img {
  object-fit: contain;
  height: auto;
}

.snap-scroll {
  scroll-behavior: smooth !important;
  overflow-y: auto;
  overflow-x: hidden;
  max-height: calc(100dvh - 3.125rem);
}
@media only screen and (min-width: 1024px) {
  .snap-scroll {
    scroll-snap-type: y mandatory;
    max-height: calc(100dvh - 4.375rem);
  }
}

#project-page, #illustrations-page {
  display: grid;
  gap: 0;
  margin: auto;
  max-width: 1440px;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  transition: all, 0.5s;
  position: relative;
}
@media only screen and (min-width: 1024px) {
  #project-page, #illustrations-page {
    gap: 0.625rem;
  }
}
@media only screen and (min-width: 1440px) {
  #project-page, #illustrations-page {
    gap: 1rem;
  }
}
#project-page * :not(.project-header):not(.project-banner):not(.owl-carousel *), #illustrations-page * :not(.project-header):not(.project-banner):not(.owl-carousel *) {
  gap: inherit;
  max-width: 44.5rem;
}
#project-page h1, #project-page h2, #project-page h3, #project-page h4, #illustrations-page h1, #illustrations-page h2, #illustrations-page h3, #illustrations-page h4 {
  margin-inline: 0;
  margin-block: 0;
  text-wrap: balance;
}
#project-page h4, #illustrations-page h4 {
  font-size: 1.125rem;
}
#project-page .content, #illustrations-page .content {
  width: 100%;
}
#project-page .project-header, #illustrations-page .project-header {
  grid-column: 1/13;
  display: grid;
  grid-template-columns: subgrid;
  gap: inherit;
}
#project-page .project-header .project-banner, #illustrations-page .project-header .project-banner {
  grid-column: 1/13;
}
#project-page .project-header .information, #illustrations-page .project-header .information {
  padding: 2rem 0;
  display: flex;
  gap: 1rem;
  flex-direction: column;
}
#project-page .project-header .details, #illustrations-page .project-header .details {
  font-size: 1rem;
}
#project-page .project-header a, #illustrations-page .project-header a {
  font-size: 1rem;
  margin: -0.5rem;
  padding: 0.5rem;
  width: fit-content;
}
#project-page .project-header .award-badge, #illustrations-page .project-header .award-badge {
  display: flex;
  width: fit-content;
  background-color: light-dark(#F1ECE4, #303030);
  padding: 0.375rem 1rem;
  border-radius: 10rem;
  margin-top: 0.5rem;
}
#project-page #back-link, #illustrations-page #back-link {
  align-items: center;
  background: none;
  color: light-dark(#116969, #2FE4EF);
  display: flex;
  gap: 0.25rem;
  grid-column: 2/4;
  height: fit-content;
  justify-self: flex-start;
  margin: 0 -1rem;
  overflow: visible;
  padding: 1rem;
  text-decoration: underline;
  width: fit-content;
}
#project-page #back-link svg, #illustrations-page #back-link svg {
  flex-shrink: 0;
}
#project-page table th, #project-page table td, #illustrations-page table th, #illustrations-page table td {
  padding: 0.5rem;
  vertical-align: text-top;
}
#project-page table, #project-page li, #illustrations-page table, #illustrations-page li {
  font-size: 1.125rem;
}
#project-page figure, #illustrations-page figure {
  margin-block: 1rem;
}
#project-page figure img, #illustrations-page figure img {
  width: 100%;
}
#project-page figcaption, #illustrations-page figcaption {
  text-wrap: balance;
  text-align: center;
  font-style: italic;
  color: light-dark(#7C6E65, #c4c4c4);
}
#project-page figcaption a, #illustrations-page figcaption a {
  font-size: 1rem;
}
#project-page h2, #project-page p, #illustrations-page h2, #illustrations-page p {
  margin-block: 0;
  margin-bottom: 1rem;
}
#project-page p:last-of-type, #illustrations-page p:last-of-type {
  margin: 1rem 0;
}
#project-page .persona, #illustrations-page .persona {
  border-radius: 1rem;
  font-size: 1.125rem;
}
#project-page .persona blockquote, #illustrations-page .persona blockquote {
  border: none;
  text-align: center;
  text-wrap: balance;
  font-style: italic;
  background-color: transparent;
}
#project-page .persona b, #illustrations-page .persona b {
  font-weight: bold;
}
#project-page .persona .title, #illustrations-page .persona .title {
  background-color: light-dark(#F6F5F3, #111010);
  border-radius: 1rem;
  display: flex;
  align-items: center;
  gap: 1rem 2rem;
  padding: 1rem;
  justify-content: center;
  padding-right: 3rem;
}
#project-page .persona .title .portrait, #illustrations-page .persona .title .portrait {
  border-radius: 100%;
  width: 4rem;
}
#project-page .persona .title .name, #illustrations-page .persona .title .name {
  font-size: 1.125rem;
}
#project-page .persona ul, #illustrations-page .persona ul {
  padding-top: 1rem;
}
#project-page .webmentions, #illustrations-page .webmentions {
  max-width: 44.5rem;
  width: 100%;
}
#project-page .webmentions-header, #illustrations-page .webmentions-header {
  padding: 2rem;
  display: flex;
  justify-content: space-between;
}
#project-page .webmentions-header > .webmentions-header_title, #illustrations-page .webmentions-header > .webmentions-header_title {
  display: flex;
  gap: 1ch;
}
#project-page .webmentions-header > .webmentions-header_title span, #illustrations-page .webmentions-header > .webmentions-header_title span {
  font-size: 1.5rem;
  font-weight: bold;
}
#project-page .webmentions-header a, #illustrations-page .webmentions-header a {
  width: fit-content;
}
#project-page .webmentions .webmention, #illustrations-page .webmentions .webmention {
  background-color: light-dark(#F6F5F3, #111010);
  padding: 1rem;
}
#project-page .webmentions .webmention.reaction.reaction, #illustrations-page .webmentions .webmention.reaction.reaction {
  background-color: transparent;
  display: flex;
  flex-direction: row;
  padding: 0;
  align-items: center;
  gap: 1rem;
}
#project-page .webmentions .webmention.reaction.reaction .author, #illustrations-page .webmentions .webmention.reaction.reaction .author {
  display: flex;
  align-items: center;
}
#project-page .webmentions .webmention.reaction.reaction time, #illustrations-page .webmentions .webmention.reaction.reaction time {
  display: block;
  color: light-dark(#7C6E65, #c4c4c4);
  font-size: 0.875rem;
}
#project-page .webmentions .webmention.reaction.reaction img, #illustrations-page .webmentions .webmention.reaction.reaction img {
  width: 2rem;
  border-radius: 1rem;
}
#project-page .webmentions .webmention.reaction.reaction a, #illustrations-page .webmentions .webmention.reaction.reaction a {
  font-size: 1rem;
}
#project-page .webmentions .webmention.reaction.reaction > .photo, #illustrations-page .webmentions .webmention.reaction.reaction > .photo {
  background: transparent;
  font-size: unset;
}
#project-page .webmentions .webmention:first-of-type, #illustrations-page .webmentions .webmention:first-of-type {
  margin-block: 1rem;
}
#project-page .webmentions .webmention:not(:last-of-type), #illustrations-page .webmentions .webmention:not(:last-of-type) {
  margin-bottom: 1rem;
}
#project-page .webmentions .webmention .header, #illustrations-page .webmentions .webmention .header {
  display: flex;
  gap: 1rem;
  align-items: center;
  margin-bottom: 1rem;
}
#project-page .webmentions .webmention .header div .author, #illustrations-page .webmentions .webmention .header div .author {
  font-size: 1.25rem;
}
#project-page .webmentions .webmention .header img, #illustrations-page .webmentions .webmention .header img {
  height: 3.75rem;
  width: 3.75rem;
  border-radius: 1rem;
}
#project-page .webmentions details, #illustrations-page .webmentions details {
  margin-bottom: 2rem;
}
#project-page .webmentions details[open] summary .chevron-down, #illustrations-page .webmentions details[open] summary .chevron-down {
  rotate: 0deg;
}
#project-page .webmentions details summary, #illustrations-page .webmentions details summary {
  display: flex;
  gap: 1rem;
}
#project-page .webmentions details summary .chevron-down, #illustrations-page .webmentions details summary .chevron-down {
  rotate: 180deg;
  transition: transform, 0.3s;
}
#project-page .webmentions .webmentions-h2, #illustrations-page .webmentions .webmentions-h2 {
  align-content: center;
  display: flex;
  gap: 1ch;
  color: light-dark(#7C6E65, #c4c4c4);
}
#project-page .webmentions .webmentions-h2 h2, #illustrations-page .webmentions .webmentions-h2 h2 {
  margin-bottom: 0;
}
#project-page .webmentions .webmentions-h2 span, #illustrations-page .webmentions .webmentions-h2 span {
  font-size: 1.5rem;
  font-weight: bold;
}
#project-page .webmentions .p-name, #illustrations-page .webmentions .p-name {
  font-size: 1.25rem;
}
#project-page .webmentions .u-url, #illustrations-page .webmentions .u-url {
  font-size: 1.25rem;
}
#project-page .update-note.update-note p, #illustrations-page .update-note.update-note p {
  background-color: light-dark(#F6F5F3, #111010);
  padding: 2rem;
}
#project-page .blogpost.note .mention-link, #illustrations-page .blogpost.note .mention-link {
  font-size: 1rem;
  overflow-wrap: anywhere;
}
#project-page .blogpost.note .blogpost-content, #illustrations-page .blogpost.note .blogpost-content {
  row-gap: 0;
}
#project-page .blogpost.note .blogpost-content picture img, #illustrations-page .blogpost.note .blogpost-content picture img {
  width: 100%;
}
#project-page .blogpost.note .blogpost-content p, #illustrations-page .blogpost.note .blogpost-content p {
  margin-inline: unset;
  margin-block: 1rem;
}
#project-page .blogpost.note .blogpost-header, #illustrations-page .blogpost.note .blogpost-header {
  gap: 0;
}
#project-page .blogpost.note .u-photo:not(:last-child), #illustrations-page .blogpost.note .u-photo:not(:last-child) {
  margin-bottom: 1rem;
}
#project-page * :not(.project-header):not(.project-banner):not(.owl-carousel *), #illustrations-page * :not(.project-header):not(.project-banner):not(.owl-carousel *) {
  grid-column: 2/12;
  gap: inherit;
  max-width: 100%;
}
#project-page .content, #illustrations-page .content {
  display: grid;
  gap: inherit;
  grid-column: 1/13;
  grid-template-columns: subgrid;
  background-color: light-dark(#FFFFFF, #1b1b1b);
}
#project-page table, #illustrations-page table {
  margin: 2rem 0;
}
#project-page .content > figure, #illustrations-page .content > figure {
  margin-block: 0;
  margin-inline: 0;
  margin-bottom: 2rem;
}
#project-page .content > figure > figcaption, #illustrations-page .content > figure > figcaption {
  margin: 0.5rem auto auto auto;
}
#project-page .persona, #illustrations-page .persona {
  margin-top: 1rem;
}
#project-page .webmentions, #illustrations-page .webmentions {
  grid-column: 1/13;
  background: light-dark(#FFFFFF, #1b1b1b);
  display: grid;
  grid-template-columns: subgrid;
  margin-top: 1rem;
  padding: 2rem 0;
}
#project-page .webmentions-header, #illustrations-page .webmentions-header {
  padding: 0;
  flex-direction: column;
  margin-bottom: 2rem;
}
@media only screen and (min-width: 1024px) {
  #project-page, #illustrations-page {
    justify-items: center;
    padding-top: 1.5rem;
  }
  #project-page .information, #illustrations-page .information {
    grid-column: 1/13;
  }
  #project-page .project-header, #illustrations-page .project-header {
    row-gap: 0;
  }
  #project-page .project-header .information.information, #illustrations-page .project-header .information.information {
    padding: 2rem;
    grid-column: 1/13;
  }
  #project-page .content, #illustrations-page .content {
    display: flex;
    flex-direction: column;
    grid-column: 3/11;
    margin-block: 0;
    margin-inline: 0;
    max-width: 44.5rem;
    padding-bottom: 2rem;
  }
  #project-page .content p, #illustrations-page .content p {
    padding: 0 2rem;
  }
  #project-page .content h2, #project-page .content h3, #project-page .content h4, #illustrations-page .content h2, #illustrations-page .content h3, #illustrations-page .content h4 {
    padding: 0 2rem;
    margin-block: 0;
    margin-inline: 0;
    max-width: 44.5rem;
  }
  #project-page .content h2, #project-page .content h3, #illustrations-page .content h2, #illustrations-page .content h3 {
    margin: 1rem 0;
  }
  #project-page .content, #project-page #back-link, #illustrations-page .content, #illustrations-page #back-link {
    grid-row: 1;
  }
  #project-page #back-link, #illustrations-page #back-link {
    position: sticky;
    top: 2rem;
  }
  #project-page ol, #project-page ul, #project-page table, #illustrations-page ol, #illustrations-page ul, #illustrations-page table {
    margin: 0 2rem;
  }
  #project-page ol li, #project-page ul li, #project-page table li, #illustrations-page ol li, #illustrations-page ul li, #illustrations-page table li {
    line-height: 150%;
  }
  #project-page figure, #illustrations-page figure {
    margin-block: 2rem;
    margin-inline: 0;
  }
  #project-page figcaption, #illustrations-page figcaption {
    padding: 0 1rem;
  }
  #project-page .persona, #illustrations-page .persona {
    padding: 0 2rem;
  }
  #project-page .persona .needs-and-pains, #illustrations-page .persona .needs-and-pains {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  #project-page .persona .needs-and-pains .needs, #project-page .persona .needs-and-pains .pains, #illustrations-page .persona .needs-and-pains .needs, #illustrations-page .persona .needs-and-pains .pains {
    padding: 1rem;
  }
  #project-page .persona .needs-and-pains .needs, #illustrations-page .persona .needs-and-pains .needs {
    grid-column: 1/2;
  }
  #project-page .persona .needs-and-pains .pains, #illustrations-page .persona .needs-and-pains .pains {
    grid-column: 2/3;
  }
  #project-page .persona .needs-and-pains ul, #illustrations-page .persona .needs-and-pains ul {
    margin: 0;
    padding: 1rem 0;
  }
  #project-page #blogpost-footer-actions, #illustrations-page #blogpost-footer-actions {
    padding: 0 2rem;
  }
  #project-page .webmentions, #illustrations-page .webmentions {
    width: 100%;
    display: block;
    grid-column: 3/11;
  }
  #project-page .webmentions > *, #illustrations-page .webmentions > * {
    padding: 0 2rem;
  }
  #project-page .update-note.update-note, #illustrations-page .update-note.update-note {
    padding: 0 2rem;
  }
  #project-page .update-note.update-note p, #illustrations-page .update-note.update-note p {
    margin: 0;
  }
}
@media only screen and (min-width: 1440px) {
  #project-page, #illustrations-page {
    margin-bottom: 4rem;
  }
  #project-page .content, #illustrations-page .content {
    grid-column: 4/10;
  }
  #project-page .webmentions-header, #illustrations-page .webmentions-header {
    flex-direction: row;
  }
}

#illustrations-page {
  padding-top: 2rem;
}
#illustrations-page .squiggle {
  position: absolute;
  left: 0;
  z-index: -1;
  bottom: -1rem;
}
#illustrations-page h1 {
  font-size: 4.5rem;
  font-family: "mondwest";
  margin: 0;
  position: relative;
  z-index: 1;
  grid-row: 1;
  grid-column: 2/12;
  height: fit-content;
  rotate: -1deg;
  text-align: left;
  justify-self: flex-start;
}
#illustrations-page h1 span {
  align-items: center;
  gap: 1rem;
  display: flex;
  flex-wrap: nowrap;
}
#illustrations-page h1 span svg {
  margin-left: 1rem;
}
#illustrations-page aside {
  grid-column: 2/12;
  grid-row: 2;
  font-size: 1.125rem;
  margin: 2rem 0;
  text-wrap: pretty;
  height: fit-content;
  rotate: 1deg;
}
#illustrations-page aside .aside-main {
  font-size: 1.5rem;
}
#illustrations-page .content {
  background: none;
  grid-column: 1/13;
}
#illustrations-page .content .lightgallery {
  grid-column: 1/13;
}
#illustrations-page .content .lightgallery figure {
  background-color: transparent;
  padding: 0;
  margin: 0;
  width: 100%;
}
#illustrations-page .content .lightgallery figure img {
  height: 100%;
  object-fit: cover;
}
#illustrations-page #illustration-gallery a, #illustrations-page #illustration-gallery figure {
  aspect-ratio: 1/1;
}
@media only screen and (min-width: 550px) {
  #illustrations-page .lightgallery {
    display: flex;
    flex-wrap: wrap;
    gap: 0;
  }
  #illustrations-page .lightgallery a {
    width: 50%;
  }
}
@media only screen and (min-width: 1024px) {
  #illustrations-page {
    padding-top: 3rem;
  }
  #illustrations-page aside {
    grid-column: 7/12;
    grid-row: 1;
    text-wrap: balance;
    text-align: right;
    justify-self: flex-end;
  }
  #illustrations-page .lightgallery {
    margin-top: 2rem;
    gap: 0.625rem;
  }
  #illustrations-page .content {
    grid-row: 2;
    grid-column: 2/10;
    display: unset;
    max-width: 60rem;
  }
  #illustrations-page .content .lightgallery a {
    width: calc(33.3333333333% - 0.625rem);
  }
}
@media only screen and (min-width: 1440px) {
  #illustrations-page h1 {
    grid-column: 2/7;
  }
  #illustrations-page .content .lightgallery {
    gap: 1rem;
  }
  #illustrations-page .content .lightgallery a {
    width: calc(33.3333333333% - 1rem);
  }
}

.blogpost .information {
  gap: 1rem;
  display: flex;
  flex-direction: column;
}
.blogpost .blogpost-header {
  padding: 2rem 0;
}
@media only screen and (min-width: 1024px) {
  .blogpost .blogpost-header {
    padding: 2rem;
  }
}
.blogpost .blogpost-footer {
  padding-block: 2rem;
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.blogpost .blogpost-footer #blogpost-footer-actions {
  display: flex;
  gap: 1rem;
  margin-top: 0.25rem;
  align-self: flex-start;
}
.blogpost .blogpost-footer #blogpost-footer-actions .like, .blogpost .blogpost-footer #blogpost-footer-actions .reply {
  gap: 0.25rem;
}
.blogpost .blogpost-footer #blogpost-footer-actions span {
  display: flex;
  align-items: center;
  gap: 0.25rem;
}
.blogpost .blogpost-footer #blogpost-footer-tags#blogpost-footer-tags {
  display: flex;
  flex-wrap: wrap;
  flex: 1;
  row-gap: 0.5rem;
  gap: 0.5rem;
}
.blogpost .blogpost-footer .tag {
  padding: 0.5rem 1rem;
  border-radius: 90rem;
  background-color: light-dark(#F1ECE4, #303030);
  color: light-dark(#4E4843, #f6f5f3);
  text-decoration: none;
}
@media only screen and (min-width: 1024px) {
  .blogpost .blogpost-footer {
    padding-block: 2rem 0;
  }
  .blogpost #blogpost-footer-tags {
    padding: 0 2rem;
  }
  .blogpost .blogpost-content {
    display: flex;
    flex-direction: column;
  }
  .blogpost .blogpost-content .view-external-doc {
    align-self: center;
    margin: 2rem;
  }
  .blogpost .blogpost-content picture:not(:has(.button-icon)) {
    padding: 0 2rem;
  }
}
.blogpost .hidden {
  display: none;
  visibility: hidden;
}

#writing-page, #notes-page {
  display: grid;
  gap: 0;
  margin: auto;
  max-width: 1440px;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  padding-top: 2rem;
}
@media only screen and (min-width: 1024px) {
  #writing-page, #notes-page {
    gap: 0.625rem;
  }
}
@media only screen and (min-width: 1440px) {
  #writing-page, #notes-page {
    gap: 1rem;
  }
}
#writing-page .header-icon.notes, #notes-page .header-icon.notes {
  width: 5rem;
}
#writing-page .squiggle, #notes-page .squiggle {
  position: absolute;
  left: 0;
  z-index: -1;
  bottom: -0.25rem;
}
#writing-page h1, #notes-page h1 {
  font-size: 4.5rem;
  font-family: "mondwest";
  margin: 0;
  position: relative;
  z-index: 1;
  grid-row: 1;
  height: fit-content;
  rotate: -1deg;
  text-align: left;
  justify-self: flex-start;
}
#writing-page h1 span, #notes-page h1 span {
  align-items: center;
  gap: 1rem;
  display: flex;
  flex-wrap: nowrap;
}
#writing-page h1 span svg, #notes-page h1 span svg {
  margin-left: 1rem;
}
#writing-page aside, #notes-page aside {
  font-size: 1.5rem;
  margin: 2rem 0;
  text-wrap: pretty;
  height: fit-content;
  rotate: 1deg;
}
#writing-page aside .aside-small, #notes-page aside .aside-small {
  font-size: 1.125rem;
}
#writing-page .writing-posts, #notes-page .writing-posts {
  display: flex;
  justify-content: center;
}
#writing-page .writing-posts > ul, #notes-page .writing-posts > ul {
  display: flex;
  flex-direction: column-reverse;
  gap: 2rem;
  padding-inline: 0;
  margin-inline: 0;
  margin-block: 0;
}
#writing-page .writing-posts > ul li, #notes-page .writing-posts > ul li {
  position: relative;
  list-style-type: none;
  background-color: light-dark(#FFFFFF, #1b1b1b);
  padding: 2rem;
  max-width: 40rem;
  transition: all, 0.3s;
}
#writing-page .writing-posts > ul li:hover, #notes-page .writing-posts > ul li:hover {
  box-shadow: -2px 13px 24px -9px rgba(0, 0, 0, 0.19);
  -webkit-box-shadow: -2px 13px 24px -9px rgba(0, 0, 0, 0.19);
  -moz-box-shadow: -2px 13px 24px -9px rgba(0, 0, 0, 0.19);
}
#writing-page .writing-posts > ul li .post-thumbnail__link, #notes-page .writing-posts > ul li .post-thumbnail__link {
  text-decoration: none;
  width: 100%;
  height: 100%;
  position: absolute;
  left: 0;
  top: 0;
  background: none;
}
#writing-page .writing-posts > ul li .post-thumbnail__link span, #notes-page .writing-posts > ul li .post-thumbnail__link span {
  display: none;
}
#writing-page .writing-posts .tags, #notes-page .writing-posts .tags {
  display: flex;
  flex-direction: row;
  gap: 0.5rem;
}
#writing-page .writing-posts .tag, #notes-page .writing-posts .tag {
  border-radius: 99rem;
  padding: 0.5rem 1rem;
  background-color: light-dark(#F1ECE4, #303030);
  width: fit-content;
}
#writing-page .writing-posts .blogpost-footer, #notes-page .writing-posts .blogpost-footer {
  display: flex;
  justify-content: space-between;
}
#writing-page .writing-posts #blogpost-footer-actions, #notes-page .writing-posts #blogpost-footer-actions {
  display: flex;
  justify-content: flex-end;
}
#writing-page .writing-posts #blogpost-footer-actions .like, #notes-page .writing-posts #blogpost-footer-actions .like {
  margin-right: 1rem;
}
#writing-page .writing-posts #blogpost-footer-actions span, #notes-page .writing-posts #blogpost-footer-actions span {
  display: flex;
  align-items: center;
  gap: 0.25rem;
}
#writing-page #writing-search, #notes-page #writing-search {
  max-width: 44rem;
  align-self: center;
  width: 100%;
  margin: 2rem;
  font-family: inherit;
}
#writing-page #writing-search .pagefind-ui__filter-checkbox:checked, #notes-page #writing-search .pagefind-ui__filter-checkbox:checked {
  background: light-dark(#7C6E65, #c4c4c4);
}
#writing-page #writing-search .pagefind-ui__filter-block, #notes-page #writing-search .pagefind-ui__filter-block {
  padding: 0;
  border-bottom: none;
}
#writing-page #writing-search .pagefind-ui__filter-group, #notes-page #writing-search .pagefind-ui__filter-group {
  padding: 1rem 2rem 0 2rem;
}
#writing-page #writing-search .pagefind-ui__filter-name, #notes-page #writing-search .pagefind-ui__filter-name {
  font-size: 1rem;
  padding: 1rem 2rem;
  background-color: light-dark(#F6F5F3, #111010);
  height: min-content;
  margin: 0;
}
#writing-page #writing-search .pagefind-ui__filter-name::after, #notes-page #writing-search .pagefind-ui__filter-name::after {
  right: 2rem;
}
#writing-page #writing-search .pagefind-ui__search-input, #notes-page #writing-search .pagefind-ui__search-input {
  background-color: transparent;
}
#writing-page #writing-search .pagefind-ui__filter-group, #notes-page #writing-search .pagefind-ui__filter-group {
  flex-wrap: wrap;
  flex-direction: row;
}
#writing-page #writing-search .pagefind-ui__filter-group label, #notes-page #writing-search .pagefind-ui__filter-group label {
  font-size: 1rem;
}
#writing-page #writing-search .pagefind-ui__filter-panel, #notes-page #writing-search .pagefind-ui__filter-panel {
  margin-top: 0;
}
#writing-page #writing-search .pagefind-ui__filter-value, #notes-page #writing-search .pagefind-ui__filter-value {
  width: fit-content;
}
#writing-page #writing-search .pagefind-ui__filter-value label, #notes-page #writing-search .pagefind-ui__filter-value label {
  padding: 1rem 1rem 1rem 3rem;
  margin: -1rem -1rem -1rem -3rem;
}
#writing-page #writing-search .pagefind-ui__results-area, #notes-page #writing-search .pagefind-ui__results-area {
  display: block;
  width: 100%;
  flex: 0;
  padding: 1rem 2rem;
}
#writing-page #writing-search .pagefind-ui__drawer, #notes-page #writing-search .pagefind-ui__drawer {
  max-height: 30rem;
  overflow: auto;
  border: light-dark(#7C6E65, #c4c4c4) 2px solid;
  border-top: 0;
  position: absolute;
  z-index: 1;
  background-color: white;
  font-family: overpass, sans-serif;
  font-size: 1rem;
  line-height: 150%;
  width: 100%;
  flex-direction: column;
  flex-wrap: nowrap;
  gap: 0;
}
#writing-page #writing-search .pagefind-ui__drawer p, #notes-page #writing-search .pagefind-ui__drawer p {
  font-size: 1rem;
  line-height: 150%;
}
#writing-page #writing-search .pagefind-ui__drawer mark, #notes-page #writing-search .pagefind-ui__drawer mark {
  background-color: light-dark(#FFC6C6, #B11B1B);
}
#writing-page #writing-search .pagefind-ui__form::before, #notes-page #writing-search .pagefind-ui__form::before {
  height: 20px;
  width: 20px;
  margin-top: -3px;
  webkit-mask-image: url('data:image/svg+xml,<svg width="20" height="20" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M4 0H12V2H4V0ZM2 4V2H4V4H2ZM2 12H0V4H2V12ZM4 14H2V12H4V14ZM12 14V16H4V14H12ZM14 12H12V14H14V16H16V18H18V20H20V18H18V16H16V14H14V12ZM14 4H16V12H14V4ZM14 4V2H12V4H14Z" fill="%237C6E65"/></svg>');
  mask-image: url('data:image/svg+xml,<svg width="20" height="20" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M4 0H12V2H4V0ZM2 4V2H4V4H2ZM2 12H0V4H2V12ZM4 14H2V12H4V14ZM12 14V16H4V14H12ZM14 12H12V14H14V16H16V18H18V20H20V18H18V16H16V14H14V12ZM14 4H16V12H14V4ZM14 4V2H12V4H14Z" fill="%237C6E65"/></svg>');
}
#writing-page #writing-search .pagefind-ui__form input, #notes-page #writing-search .pagefind-ui__form input {
  border: light-dark(#7C6E65, #c4c4c4) 2px solid;
  border-radius: 0;
  font-family: overpass, sans-serif;
}
#writing-page #writing-search .pagefind-ui__form input::placeholder, #notes-page #writing-search .pagefind-ui__form input::placeholder {
  color: light-dark(#7C6E65, #c4c4c4);
  font-style: italic;
  font-weight: normal;
  opacity: 100%;
}
#writing-page #writing-search .pagefind-ui__form button, #notes-page #writing-search .pagefind-ui__form button {
  padding: 1rem;
  padding-top: 0.9rem;
  font-size: 1rem;
  font-family: overpass;
  border-radius: 0;
  background-color: transparent;
  border-left: light-dark(#7C6E65, #c4c4c4) 2px solid;
  color: light-dark(#7C6E65, #c4c4c4);
}
#writing-page .note .mention-link, #notes-page .note .mention-link {
  font-size: 1rem;
  overflow-wrap: anywhere;
}
#writing-page .note-content, #notes-page .note-content {
  row-gap: 0;
}
#writing-page .note-content blockquote, #notes-page .note-content blockquote {
  margin-inline: 0;
}
#writing-page .post-header.note, #notes-page .post-header.note {
  display: flex;
  flex-direction: column;
  gap: none;
}
#writing-page .post-header.note h2, #notes-page .post-header.note h2 {
  margin: 0;
}
#writing-page .u-photo, #notes-page .u-photo {
  max-width: 100%;
  box-sizing: content-box;
}
#writing-page h1, #notes-page h1 {
  grid-column: 2/12;
}
#writing-page aside, #notes-page aside {
  grid-column: 2/12;
  grid-row: 2;
}
#writing-page .writing-posts, #notes-page .writing-posts {
  grid-column: 1/13;
  flex-direction: column;
}
#writing-page .writing-posts > ul, #notes-page .writing-posts > ul {
  align-items: center;
}
#writing-page .blogpost-footer, #notes-page .blogpost-footer {
  overflow: auto;
  align-items: flex-start;
}
#writing-page .blogpost-footer .tags, #notes-page .blogpost-footer .tags {
  flex-wrap: wrap;
}
#writing-page #blogpost-footer-actions, #notes-page #blogpost-footer-actions {
  padding-top: 0.25rem;
  flex: 1;
}
#writing-page .post-thumbnail, #notes-page .post-thumbnail {
  display: flex;
  flex-direction: column;
  gap: 1.5rem;
  width: 100%;
  box-sizing: border-box;
}
@media only screen and (min-width: 1024px) {
  #writing-page aside, #notes-page aside {
    justify-self: flex-end;
    grid-column: 8/12;
    grid-row: 1;
    text-align: right;
  }
  #writing-page .writing-posts, #notes-page .writing-posts {
    grid-column: 3/11;
  }
  #writing-page .tags, #notes-page .tags {
    display: flex;
    flex-direction: row;
    gap: 0.5rem;
  }
  #writing-page li.post-thumbnail, #notes-page li.post-thumbnail {
    width: 100%;
  }
}
@media only screen and (min-width: 1440px) {
  #writing-page, #notes-page {
    padding-bottom: 4rem;
  }
  #writing-page .writing-posts, #notes-page .writing-posts {
    grid-column: 4/10;
  }
  #writing-page .writing-posts > ul li, #writing-page #notes-page .writing-posts > ul li, #notes-page .writing-posts > ul li, #notes-page #notes-page .writing-posts > ul li {
    max-width: 100%;
  }
}

#about-page {
  display: grid;
  gap: 0;
  margin: auto;
  max-width: 1440px;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  padding-top: 2rem;
}
@media only screen and (min-width: 1024px) {
  #about-page {
    gap: 0.625rem;
  }
}
@media only screen and (min-width: 1440px) {
  #about-page {
    gap: 1rem;
  }
}
#about-page .squiggle {
  position: absolute;
  left: 0;
  z-index: -1;
  top: -1.5rem;
  left: 9rem;
}
#about-page h1 {
  font-size: 4.5rem;
  font-family: "mondwest";
  margin: 0;
  position: relative;
  z-index: 1;
  z-index: -1;
  grid-row: 1;
  height: fit-content;
  rotate: -1deg;
  text-align: left;
  justify-self: flex-start;
}
#about-page h1 span {
  align-items: center;
  gap: 1rem;
  display: flex;
  flex-wrap: nowrap;
}
#about-page h1 span svg {
  margin-left: 1rem;
}
#about-page h2 {
  font-family: "mondwest";
  font-weight: 400;
}
#about-page p, #about-page li {
  max-width: 52ch;
}
#about-page .about-cta .cta-heading, #about-page .about-cta .cta-caption {
  font-size: 4.5rem;
  font-family: "mondwest";
  margin: 0;
  position: relative;
  z-index: 1;
}
#about-page .tile {
  text-decoration: none;
}
#about-page .tile:hover {
  box-shadow: -2px 13px 24px -9px rgba(0, 0, 0, 0.19);
  -webkit-box-shadow: -2px 13px 24px -9px rgba(0, 0, 0, 0.19);
  -moz-box-shadow: -2px 13px 24px -9px rgba(0, 0, 0, 0.19);
  background: light-dark(#FFFFFF, #1b1b1b);
}
#about-page aside {
  text-wrap: balance;
}
#about-page aside .aside-small {
  font-size: 1.125rem;
}
#about-page .text-container, #about-page .image-container, #about-page .about-cta {
  grid-column: 2/12;
}
#about-page .content {
  margin-top: 2rem;
}
#about-page .text-container {
  display: flex;
  flex-direction: column;
}
#about-page .about-cta {
  display: flex;
  flex-direction: column;
  gap: 1.5rem;
  padding-block: 5rem;
}
#about-page .about-cta button {
  width: fit-content;
}
#about-page .about-cta .cta-heading {
  font-size: 3rem;
  line-height: normal;
}
#about-page .about-cta .cta-caption {
  font-size: 2rem;
}
#about-page .about-images {
  display: none;
  visibility: hidden;
}
#about-page .mobile-me {
  object-fit: contain;
  aspect-ratio: 1/1;
  rotate: 1deg;
  object-fit: contain;
  max-height: 20rem;
  margin-block: 2rem;
}
#about-page h2 {
  margin-top: 4rem;
}
#about-page aside {
  padding-top: 3rem;
}
#about-page aside .aside-small {
  font-size: 1.125rem;
}
@media only screen and (min-width: 1024px) {
  #about-page .snap-scroll {
    scroll-behavior: smooth !important;
    overflow-y: auto;
    overflow-x: hidden;
    scroll-snap-type: unset;
    max-height: calc(100dvh - 3.125rem);
  }
}
@media only screen and (min-width: 1024px) and (min-width: 1024px) {
  #about-page .snap-scroll {
    scroll-snap-type: y mandatory;
    max-height: calc(100dvh - 4.375rem);
  }
}
@media only screen and (min-width: 1024px) {
  #about-page aside {
    padding: 3rem 0 0 3rem;
  }
  #about-page .mobile-me {
    display: none;
    visibility: hidden;
  }
  #about-page .about-images {
    display: unset;
    visibility: visible;
  }
  #about-page .text-container {
    grid-column: 2/8;
  }
  #about-page .text-container .about-content {
    display: flex;
    max-width: 52ch;
    justify-content: center;
    margin-top: -3rem;
    flex-direction: column;
    min-height: calc(100dvh - 4.375rem);
  }
  #about-page .content {
    margin-left: 3rem;
  }
  #about-page .image-container {
    box-shadow: -2px 13px 24px -9px rgba(0, 0, 0, 0.19);
    -webkit-box-shadow: -2px 13px 24px -9px rgba(0, 0, 0, 0.19);
    -moz-box-shadow: -2px 13px 24px -9px rgba(0, 0, 0, 0.19);
    background-color: rgba(255, 255, 255, 0.3);
    grid-column: 8/13;
    margin-left: 1rem;
    min-width: 50dvw;
    transform: rotate(0.84deg);
  }
  #about-page h2 {
    font-size: 2.3rem;
    margin-top: 0;
  }
  #about-page .about-content {
    scroll-snap-align: start;
  }
  #about-page .about-content.second-content-block {
    margin-top: 0;
    min-height: 100dvh;
  }
  #about-page .about-cta {
    display: grid;
    grid-template-columns: subgrid;
    gap: inherit;
    scroll-snap-align: center;
    min-height: calc(100dvh - 4.375rem);
    padding-block: 0;
    justify-content: center;
    align-items: center;
    align-content: center;
    justify-items: center;
  }
  #about-page .about-cta .cta-heading, #about-page .about-cta .cta-caption, #about-page .about-cta button {
    grid-column: 3/9;
  }
  #about-page .about-cta .tile {
    align-self: center;
    margin-top: 2rem;
    grid-row: 4;
    rotate: -7.99deg;
  }
  #about-page .about-cta #li {
    grid-column: 4/6;
  }
  #about-page .about-cta #re {
    grid-column: 6/8;
    rotate: 11.1deg;
  }
  #about-page .about-images {
    display: grid;
    gap: 0;
    grid-template-columns: repeat(6, minmax(0, 1fr));
    max-width: 43.75rem;
    align-items: center;
    justify-items: center;
    height: 50%;
    transform: rotate(-0.84deg);
  }
  #about-page .first-image-block .me {
    grid-column: 2/4;
    rotate: -2.12deg;
    z-index: 1;
    grid-row: 1;
    width: 11dvw;
    min-width: 10rem;
    max-width: 13.0625rem;
    align-self: flex-end;
    margin-bottom: -2rem;
  }
  #about-page .first-image-block .niigata {
    grid-column: 2/5;
    rotate: 3.18deg;
    grid-row: 2;
    width: 14dvw;
    min-width: 12rem;
    max-width: 17.75rem;
    margin-top: -2rem;
    align-self: flex-start;
  }
  #about-page .first-image-block .syd {
    grid-column: 4/5;
    rotate: 12.04deg;
    grid-row: 1;
    z-index: -1;
    margin-bottom: 4rem;
    align-self: flex-end;
  }
  #about-page .first-image-block .hk {
    grid-column: 1/3;
    rotate: -7.84deg;
    grid-row: 2;
    z-index: -1;
    align-self: flex-start;
    margin-top: 4rem;
  }
  #about-page .second-image-block .about-image-container {
    display: grid;
    grid-template-columns: subgrid;
    grid-column: 1/7;
    margin-top: -4rem;
  }
  #about-page .second-image-block .baby {
    grid-column: 3/5;
    grid-row: 1;
    align-self: flex-end;
    justify-self: flex-end;
    rotate: 1.82deg;
    width: 9dvw;
    min-width: 8rem;
    max-width: 10.6875rem;
  }
  #about-page .second-image-block .globe {
    grid-column: 2/4;
    grid-row: 1;
    align-self: center;
    margin-bottom: 10rem;
    justify-self: center;
    margin-right: -1rem;
    rotate: -2.28deg;
    z-index: -1;
  }
  #about-page .second-image-block .nanjing {
    grid-column: 2/4;
    grid-row: 2;
    align-self: flex-start;
    justify-self: flex-end;
    z-index: 1;
    margin-top: -10rem;
    rotate: 2.28deg;
    min-width: 11rem;
    width: 10.6dvw;
    max-width: 13.375rem;
  }
  #about-page .second-image-block .japan {
    grid-column: 2/5;
    grid-row: 3;
    align-self: flex-start;
    justify-self: flex-end;
    margin-top: -1rem;
    rotate: 7.12deg;
    min-width: 14rem;
    width: 13dvw;
    max-width: 16.485625rem;
  }
}
#now-page section.current {
  display: grid;
  gap: 0;
  margin: auto;
  max-width: 1440px;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  min-height: calc(100dvh - 4.375rem);
  grid-auto-rows: auto;
  padding-top: 2rem;
}
@media only screen and (min-width: 1024px) {
  #now-page section.current {
    gap: 0.625rem;
  }
}
@media only screen and (min-width: 1440px) {
  #now-page section.current {
    gap: 1rem;
  }
}
#now-page section.current .header-icon.notes {
  width: 5rem;
}
#now-page section.current .squiggle {
  position: absolute;
  left: 0;
  z-index: -1;
  bottom: -1rem;
  left: -3.5rem;
}
#now-page section.current h1 {
  font-size: 4.5rem;
  font-family: "mondwest";
  margin: 0;
  position: relative;
  z-index: 1;
  grid-row: 1;
  height: fit-content;
  rotate: -1deg;
  text-align: left;
  justify-self: flex-start;
}
#now-page section.current h1 span {
  align-items: center;
  gap: 1rem;
  display: flex;
  flex-wrap: nowrap;
}
#now-page section.current h1 span svg {
  margin-left: 1rem;
}
#now-page section.current aside {
  font-size: 1.5rem;
  margin: 2rem 0;
  text-wrap: pretty;
  height: fit-content;
  rotate: 1deg;
}
#now-page section.current aside .aside-small {
  font-size: 1.125rem;
}
#now-page section.current .column .block {
  font-size: 1.25rem;
  padding: 2rem;
  background-color: light-dark(#FFFFFF, #1b1b1b);
  text-wrap: balance;
}
#now-page section.current .column {
  display: flex;
  flex-direction: column;
  gap: 1rem;
  margin-bottom: 2.625rem;
}
#now-page section.current .column h2 {
  margin: 0;
  font-size: 2.5rem;
  font-family: "mondwest";
  margin: 0;
  font-weight: 400;
}
#now-page section.current .column .location-weather {
  padding: 0;
}
#now-page section.current .now-map-container {
  display: flex;
  flex-direction: column;
}
#now-page section.current .now-map-container > span {
  padding-top: 1rem;
  text-align: center;
  font-size: 1.25rem;
}
#now-page section.current .now-map-container {
  background-color: light-dark(#FFFFFF, #1b1b1b);
  padding: 1rem;
}
#now-page section.current .now-map-container #now-map {
  height: 17.25rem;
  width: 100%;
}
#now-page section.current .now-map-container #now-map .leaflet-control-zoom {
  display: none;
  visibility: hidden;
}
#now-page section.current .now-map-container #now-map .leaflet-control-attribution, #now-page section.current .now-map-container #now-map .leaflet-control-attribution a {
  font-size: 0.75rem;
}
#now-page section.current .last-updated {
  text-align: right;
  font-size: 1.25rem;
  color: light-dark(#7C6E65, #c4c4c4);
}
#now-page section.current .content-flex {
  grid-column: 2/12;
}
#now-page section.archive {
  display: grid;
  gap: 0;
  margin: auto;
  max-width: 1440px;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  padding-top: 2rem;
}
@media only screen and (min-width: 1024px) {
  #now-page section.archive {
    gap: 0.625rem;
  }
}
@media only screen and (min-width: 1440px) {
  #now-page section.archive {
    gap: 1rem;
  }
}
#now-page section.archive h2 {
  margin: 0;
  font-size: 2.5rem;
  font-family: "mondwest";
  margin: 0;
  font-weight: 400;
}
#now-page section.archive h2, #now-page section.archive ul, #now-page section.archive span {
  grid-column: 2/12;
  padding-inline: 0;
  margin-block: 0;
}
#now-page section.archive h2 li, #now-page section.archive ul li, #now-page section.archive span li {
  list-style: none;
  margin-bottom: 0.75rem;
}
#now-page section.archive div.archive-item {
  padding: 0.5rem 1.5rem;
}
#now-page section.archive .archive-item {
  font-size: 1.25rem;
}
#now-page section.archive .archive-item time {
  margin-left: 0.5rem;
}
#now-page section.archive summary {
  padding: 0.5rem 0;
}
#now-page h1 {
  grid-column: 2/12;
}
#now-page aside {
  grid-column: 2/12;
  grid-row: 2;
}
#now-page .last-updated {
  grid-column: 2/12;
}
@media only screen and (min-width: 1024px) {
  #now-page aside {
    justify-self: flex-end;
    grid-column: 8/12;
    grid-row: 1;
    text-align: right;
  }
  #now-page .content-flex {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 1rem;
  }
  #now-page .location.column {
    grid-column: 1/3;
  }
}
@media only screen and (min-width: 1440px) {
  #now-page {
    padding-bottom: 4rem;
  }
  #now-page .writing-posts {
    grid-column: 4/10;
  }
  #now-page .content-flex {
    display: flex;
    flex-direction: row;
    gap: 5rem;
  }
  #now-page .content-flex > .column {
    flex: 1;
  }
  #now-page .content-flex > .column:nth-of-type(2) {
    margin-top: -3rem;
  }
}

:root {
  color-scheme: light dark;
}
:root *:not(body) {
  transition: background-color 0.25s, filter 0.25s, fill 0.25s, stroke 0.25s;
}

#bottom-action-bar {
  max-width: 1440px;
  width: 100%;
  margin: 0 auto;
  height: 2.5rem;
  display: flex;
  justify-content: space-between;
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  margin: auto;
  z-index: 1;
}

h1 span svg path, h2 span svg path {
  fill: light-dark(#4E4843, #f6f5f3);
}

html {
  scroll-behavior: smooth !important;
}

body {
  overflow-x: hidden;
}

blockquote {
  border-left: 4px solid light-dark(#EEE485, #736002);
  padding: 1rem;
  margin-block: 1rem;
  margin-inline: 0rem;
  background-color: light-dark(#F6F5F3, #111010);
}
blockquote .reply-quote-attribution {
  font-size: 1rem;
}
blockquote .reply-quote-publication {
  font-style: italic;
}
@media only screen and (min-width: 1024px) {
  blockquote {
    margin-inline: 2rem;
  }
}

#notfound-page {
  display: flex;
  height: calc(100dvh - 4.375rem - 5rem);
  flex-direction: column;
  justify-content: center;
  align-items: center;
}

.lightgallery a {
  background: none;
  text-decoration: none;
  display: flex;
  justify-content: center;
}
.lightgallery a figure:hover, .lightgallery a video:hover {
  box-shadow: -2px 13px 24px -9px rgba(0, 0, 0, 0.19);
  -webkit-box-shadow: -2px 13px 24px -9px rgba(0, 0, 0, 0.19);
  -moz-box-shadow: -2px 13px 24px -9px rgba(0, 0, 0, 0.19);
  transform: scale(1.03);
  padding: 1rem;
}
.lightgallery a figure, .lightgallery a video {
  background-color: light-dark(#FFFFFF, #1b1b1b);
  transition: all 0.5s;
  border-radius: 1rem;
}
.lightgallery a figure img, .lightgallery a video img {
  background-color: white;
}

.lg-container div {
  font-family: "overpass";
}
.lg-container > div {
  background-color: light-dark(#F6F5F3, #111010);
}
.lg-container .lg-sub-html {
  color: light-dark(#4E4843, #f6f5f3);
}
.lg-container .lg-img-wrap {
  padding: 2rem;
  background-color: transparent;
}
.lg-container .lg-image, .lg-container video {
  box-shadow: -2px 13px 24px -9px rgba(0, 0, 0, 0.19);
  -webkit-box-shadow: -2px 13px 24px -9px rgba(0, 0, 0, 0.19);
  -moz-box-shadow: -2px 13px 24px -9px rgba(0, 0, 0, 0.19);
  border-radius: 1rem;
}
.lg-container .lg-outer .lg-thumb-outer {
  background-color: light-dark(#FFFFFF, #1b1b1b);
}
.lg-container .lg-outer .lg-thumb-item.active, .lg-container .lg-outer .lg-thumb-item:hover {
  border-color: light-dark(#116969, #2FE4EF);
}
.lg-container .lg-toolbar .lg-icon:hover {
  color: light-dark(#116969, #2FE4EF);
}
.lg-container .lg-next, .lg-container .lg-prev {
  color: light-dark(white, #303030);
}
.lg-container .lg-sub-html p {
  font-size: 1rem;
}

#inline-gallery-container {
  height: 42rem;
  overflow: hidden;
}
#inline-gallery-container .lg-container > div {
  background-color: light-dark(#FFFFFF, #1b1b1b);
}